@einfach-excel/spreadsheet-ui-styles 0.0.0-stage → 0.2.0

package/features/number-format-dialog.css

@@ -0,0 +1,147 @@
+.number-format-dialog {
+  width: 440px;
+  min-width: 440px;
+  max-width: min(440px, calc(100vw - 32px));
+  max-height: min(520px, calc(100vh - 32px));
+}
+
+.number-format-dialog-header {
+  justify-content: space-between;
+}
+
+.number-format-dialog-title {
+  margin: 0;
+  color: var(--text-default);
+  user-select: none;
+}
+
+.number-format-dialog-body {
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  gap: 10px;
+  min-height: 0;
+  padding: 14px 16px 16px;
+  background: var(--bg-surface);
+}
+
+.number-format-dialog-decimals {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  min-height: 28px;
+  color: var(--text-default);
+}
+
+.number-format-dialog-decimals span {
+  flex: 0 0 auto;
+}
+
+.number-format-dialog-decimals input {
+  width: 72px;
+  padding: 0 6px;
+  font-variant-numeric: tabular-nums;
+}
+
+.number-format-dialog-list {
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  max-height: 300px;
+  overflow: auto;
+  border: 1px solid var(--border);
+  border-radius: var(--control-radius);
+  background: var(--bg-surface);
+}
+
+.number-format-dialog-currency-list {
+  max-height: 288px;
+}
+
+.number-format-dialog-row {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  align-items: center;
+  gap: 16px;
+  min-height: 32px;
+  width: 100%;
+  padding: 5px 10px;
+  border: none;
+  border-bottom: 1px solid var(--gridline);
+  background: var(--bg-surface);
+  color: var(--text-default);
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+
+.number-format-dialog-row:last-child {
+  border-bottom: none;
+}
+
+.number-format-dialog-row:hover {
+  background: var(--hover);
+}
+
+.number-format-dialog-row-selected {
+  background: var(--select-bg);
+  box-shadow: inset 3px 0 0 var(--excel-green);
+}
+
+.number-format-dialog-row-label {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.number-format-dialog-row-preview,
+.number-format-dialog-row-pattern {
+  color: var(--text-muted);
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+}
+
+.number-format-dialog-row-pattern {
+  font-family: ui-monospace, SFMono-Regular, Consolas, 'Liberation Mono', monospace;
+  font-size: 12px;
+}
+
+.number-format-dialog-actions {
+  min-height: 48px;
+}
+
+.number-format-dialog-actions button {
+  min-width: 72px;
+  padding: 0 14px;
+  cursor: pointer;
+}
+
+.number-format-dialog-actions [role='alert'] {
+  margin-right: auto;
+  color: var(--error-text);
+  font-size: 12px;
+}
+
+.number-format-dialog-actions button:hover:not(:disabled) {
+  border-color: var(--border-strong);
+  background: var(--hover);
+}
+
+.number-format-dialog-actions button:disabled {
+  border-color: var(--border);
+  background: var(--bg-chrome);
+  color: var(--text-disabled);
+  cursor: default;
+}
+
+@media (max-width: 520px) {
+  .number-format-dialog {
+    width: calc(100vw - 32px);
+    min-width: 0;
+  }
+
+  .number-format-dialog-row {
+    gap: 10px;
+  }
+}

package/features/number-format-dialog.css.d.ts

@@ -0,0 +1,2 @@
+declare const stylesheet: string
+export default stylesheet

package/features/page-setup-dialog.css

@@ -0,0 +1,167 @@
+/* Page Setup owns its form layout; dialog-skin.css owns the Office web modal shell. */
+
+.spreadsheet-page-setup-dialog {
+  width: min(440px, calc(100vw - 32px));
+}
+
+.spreadsheet-page-setup-dialog .page-setup-header {
+  justify-content: space-between;
+}
+
+.spreadsheet-page-setup-dialog .page-setup-body {
+  display: grid;
+  min-height: 0;
+  flex: 1 1 auto;
+  gap: 12px;
+  padding: 16px;
+  overflow-y: auto;
+  background: var(--bg-surface);
+}
+
+.spreadsheet-page-setup-dialog .page-setup-fieldset {
+  display: grid;
+  gap: 8px 16px;
+  min-width: 0;
+  margin: 0;
+  padding: 8px 12px 12px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  background: var(--bg-surface);
+}
+
+.spreadsheet-page-setup-dialog .page-setup-orientation {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+.spreadsheet-page-setup-dialog legend {
+  padding: 0 4px;
+  color: var(--text-muted);
+  font-size: 12px;
+  font-weight: 600;
+}
+
+.spreadsheet-page-setup-dialog label,
+.spreadsheet-page-setup-dialog .page-setup-scale-choice {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  color: var(--text-default);
+  font-size: 13px;
+}
+
+.spreadsheet-page-setup-dialog .page-setup-scale-choice {
+  display: grid;
+  grid-template-columns: 72px 64px minmax(0, 1fr) 64px minmax(0, 1fr);
+}
+
+.spreadsheet-page-setup-dialog label {
+  cursor: pointer;
+}
+
+.spreadsheet-page-setup-dialog label:has(input:disabled) {
+  color: var(--text-disabled);
+  cursor: default;
+}
+
+.spreadsheet-page-setup-dialog input[type='radio'] {
+  accent-color: var(--excel-green);
+}
+
+.spreadsheet-page-setup-dialog input[type='number'] {
+  width: 64px;
+  padding: 0 6px;
+}
+
+.spreadsheet-page-setup-dialog input[type='number']:hover:not(:disabled) {
+  border-color: var(--border-strong);
+}
+
+.spreadsheet-page-setup-dialog input[type='number']:disabled {
+  background: var(--bg-chrome);
+  color: var(--text-disabled);
+  cursor: default;
+}
+
+.spreadsheet-page-setup-dialog output {
+  padding-top: 7px;
+  border-top: 1px solid var(--border);
+  color: var(--text-muted);
+  font-size: 12px;
+}
+
+.spreadsheet-page-setup-dialog .page-setup-error {
+  padding: 8px 10px;
+  border: 1px solid var(--error-text);
+  border-radius: var(--radius);
+  background: var(--error-bg);
+  color: var(--error-text);
+  font-size: 12px;
+}
+
+.spreadsheet-page-setup-dialog .page-setup-footer {
+  min-height: 48px;
+}
+
+.spreadsheet-page-setup-dialog .page-setup-button {
+  min-width: 72px;
+  cursor: pointer;
+  padding: 0 12px;
+}
+
+.spreadsheet-page-setup-dialog
+  .page-setup-button:hover:not(:disabled):not([data-variant='primary']) {
+  border-color: var(--border-strong);
+  background: var(--hover);
+}
+
+.spreadsheet-page-setup-dialog .page-setup-button:disabled {
+  border-color: var(--border);
+  background: var(--bg-chrome);
+  color: var(--text-disabled);
+  cursor: default;
+}
+
+.spreadsheet-page-setup-dialog[aria-busy='true'] .page-setup-body {
+  cursor: progress;
+}
+
+.spreadsheet-page-setup-dialog[aria-busy='true'] .page-setup-fieldset {
+  opacity: 0.72;
+}
+
+.spreadsheet-page-setup-dialog .page-setup-pending {
+  display: inline-flex;
+  flex: 1 1 auto;
+  align-items: center;
+}
+
+.spreadsheet-page-setup-dialog .page-setup-pending-indicator {
+  width: 10px;
+  height: 10px;
+  border: 2px solid var(--border);
+  border-top-color: var(--office-blue);
+  border-radius: 50%;
+  animation: page-setup-pending-spin 800ms linear infinite;
+}
+
+@keyframes page-setup-pending-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@media (max-width: 440px) {
+  .spreadsheet-page-setup-dialog .page-setup-scale-choice {
+    grid-template-columns: 72px 64px minmax(0, 1fr);
+  }
+
+  .spreadsheet-page-setup-dialog .page-setup-scale-choice > input:nth-of-type(2) {
+    grid-column: 2;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .spreadsheet-page-setup-dialog .page-setup-pending-indicator {
+    animation: none;
+  }
+}

package/features/page-setup-dialog.css.d.ts

@@ -0,0 +1,3 @@
+/** Allows the production-only dynamic stylesheet import to type-check. */
+declare const stylesheet: string
+export default stylesheet

package/features/paste-special-dialog.css

@@ -0,0 +1,126 @@
+/* Paste Special owns its interior; dialog-skin.css owns the modal shell. */
+
+.paste-special-dialog {
+  width: 420px;
+  max-width: calc(100vw - 32px);
+}
+
+.paste-special-dialog .ps-header {
+  justify-content: space-between;
+}
+
+.paste-special-dialog .ps-title {
+  color: var(--text-default);
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.paste-special-dialog .ps-body {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  padding: 16px;
+  background: var(--bg-surface);
+}
+
+.paste-special-dialog .ps-fieldset {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 8px 16px;
+  margin: 0;
+  padding: 8px 12px 12px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+}
+
+.paste-special-dialog .ps-legend {
+  padding: 0 4px;
+  color: var(--text-muted);
+  font-size: 12px;
+  font-weight: 600;
+}
+
+.paste-special-dialog .ps-radio,
+.paste-special-dialog .ps-option {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  color: var(--text-default);
+  cursor: pointer;
+}
+
+.paste-special-dialog .ps-radio:has(input:disabled),
+.paste-special-dialog .ps-option:has(input:disabled) {
+  color: var(--text-disabled);
+  cursor: default;
+}
+
+.paste-special-dialog :is(.ps-radio, .ps-option) input {
+  accent-color: var(--excel-green);
+}
+
+.paste-special-dialog .ps-field {
+  display: grid;
+  grid-template-columns: 72px minmax(0, 1fr);
+  align-items: center;
+  gap: 8px;
+}
+
+.paste-special-dialog .ps-field-label {
+  color: var(--text-muted);
+}
+
+.paste-special-dialog .ps-select {
+  width: 100%;
+  padding: 0 8px;
+}
+
+.paste-special-dialog .ps-options {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px 16px;
+  margin: 0;
+  padding: 0;
+  border: 0;
+}
+
+.paste-special-dialog .ps-footer {
+  min-height: 48px;
+}
+
+.paste-special-dialog .ps-btn {
+  min-width: 72px;
+  padding: 0 12px;
+  cursor: pointer;
+}
+
+.paste-special-dialog .ps-btn:hover:not(:disabled) {
+  background: var(--hover);
+}
+
+.paste-special-dialog .ps-btn:disabled,
+.paste-special-dialog .ps-select:disabled {
+  border-color: var(--border);
+  background: var(--bg-chrome);
+  color: var(--text-disabled);
+  cursor: default;
+}
+
+.paste-special-dialog .ps-btn-primary:disabled {
+  background: var(--bg-chrome);
+}
+
+.paste-special-dialog [role='alert'] {
+  margin: 0;
+  padding: 8px 10px;
+  border: 1px solid var(--error-text);
+  border-radius: var(--radius);
+  background: var(--error-bg);
+  color: var(--error-text);
+}
+
+.paste-special-dialog [data-testid='paste-special-unsupported-explanation'] {
+  margin: -4px 0 0;
+  color: var(--text-muted);
+  font-size: 12px;
+}

package/features/paste-special-dialog.css.d.ts

@@ -0,0 +1,7 @@
+// Side-effect CSS module — the dialog `.tsx` pulls this in for its styles.
+// Declaration is co-located so tsc is happy when the runtime-guarded
+// `import('./paste-special-dialog.css')` is type-checked. The default
+// export is `unknown` because nothing consumes the returned namespace; we
+// only want the load side-effect.
+declare const css: unknown
+export default css

package/features/print-preview-dialog.css

@@ -0,0 +1,197 @@
+/* Print Preview owns its preview surface; dialog-skin.css owns the modal shell. */
+
+.spreadsheet-print-preview {
+  width: min(680px, calc(100vw - 32px));
+}
+
+.spreadsheet-print-preview .print-preview-dialog-header {
+  justify-content: space-between;
+}
+
+.spreadsheet-print-preview .print-preview-dialog-body {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(156px, 0.42fr);
+  min-height: 300px;
+  gap: 20px;
+  padding: 20px;
+  overflow: auto;
+  background: var(--bg-chrome-light);
+}
+
+.spreadsheet-print-preview .print-preview-sheet {
+  display: grid;
+  place-items: center;
+  min-width: 0;
+  margin: 0;
+  gap: 8px;
+}
+
+.spreadsheet-print-preview .print-preview-paper {
+  display: grid;
+  grid-template-rows: auto minmax(180px, 1fr) auto;
+  width: min(100%, 336px);
+  min-height: 252px;
+  padding: 18px;
+  border: 1px solid var(--border-strong);
+  background: var(--bg-surface);
+  box-shadow: var(--shadow-popover);
+}
+
+.spreadsheet-print-preview .print-preview-page-header,
+.spreadsheet-print-preview .print-preview-page-footer {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  min-height: 20px;
+  padding: 4px 0;
+  color: var(--text-muted);
+  font-size: 11px;
+  line-height: 12px;
+}
+
+.spreadsheet-print-preview .print-preview-page-header {
+  border-bottom: 1px solid var(--gridline);
+}
+
+.spreadsheet-print-preview .print-preview-page-footer {
+  border-top: 1px solid var(--gridline);
+}
+
+.spreadsheet-print-preview :is(.print-preview-page-header, .print-preview-page-footer) span {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.spreadsheet-print-preview
+  :is(.print-preview-page-header, .print-preview-page-footer)
+  span:nth-child(2) {
+  text-align: center;
+}
+
+.spreadsheet-print-preview
+  :is(.print-preview-page-header, .print-preview-page-footer)
+  span:nth-child(3) {
+  text-align: right;
+}
+
+.spreadsheet-print-preview .print-preview-page-content {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  align-content: start;
+  gap: 1px;
+  padding-top: 16px;
+}
+
+.spreadsheet-print-preview .print-preview-page-content span {
+  min-height: 32px;
+  border: 1px solid var(--gridline);
+  background: var(--bg-surface);
+}
+
+.spreadsheet-print-preview .print-preview-sheet figcaption {
+  color: var(--text-muted);
+  font-size: 12px;
+}
+
+.spreadsheet-print-preview .print-preview-summary {
+  display: grid;
+  align-content: center;
+  min-width: 0;
+  margin: 0;
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  background: var(--bg-surface);
+}
+
+.spreadsheet-print-preview .print-preview-summary > div {
+  display: grid;
+  gap: 4px;
+  padding: 12px;
+  border-bottom: 1px solid var(--border);
+}
+
+.spreadsheet-print-preview .print-preview-summary > div:last-child {
+  border-bottom: 0;
+}
+
+.spreadsheet-print-preview .print-preview-summary dt {
+  color: var(--text-muted);
+  font-size: 12px;
+  font-weight: 600;
+}
+
+.spreadsheet-print-preview .print-preview-summary dd {
+  margin: 0;
+  color: var(--text-default);
+  font-size: 13px;
+  overflow-wrap: anywhere;
+}
+
+.spreadsheet-print-preview .print-preview-actions {
+  min-height: 48px;
+}
+
+.spreadsheet-print-preview .print-preview-button {
+  min-width: 92px;
+  padding: 0 12px;
+  cursor: pointer;
+}
+
+.spreadsheet-print-preview .print-preview-page-setup {
+  order: 1;
+}
+
+.spreadsheet-print-preview .print-preview-close {
+  order: 2;
+}
+
+.spreadsheet-print-preview .print-preview-primary {
+  order: 3;
+}
+
+.spreadsheet-print-preview
+  .print-preview-button:hover:not(:disabled):not([data-variant='primary']) {
+  border-color: var(--border-strong);
+  background: var(--hover);
+}
+
+.spreadsheet-print-preview .print-preview-primary:hover:not(:disabled) {
+  border-color: var(--dialog-primary-hover);
+  background: var(--dialog-primary-hover);
+}
+
+@media (max-width: 560px) {
+  .spreadsheet-print-preview .print-preview-dialog-body {
+    grid-template-columns: minmax(0, 1fr);
+    gap: 16px;
+    padding: 16px;
+  }
+
+  .spreadsheet-print-preview .print-preview-paper {
+    width: min(100%, 280px);
+  }
+
+  .spreadsheet-print-preview .print-preview-summary {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+
+  .spreadsheet-print-preview .print-preview-summary > div {
+    min-width: 0;
+    border-right: 1px solid var(--border);
+    border-bottom: 0;
+  }
+
+  .spreadsheet-print-preview .print-preview-summary > div:last-child {
+    border-right: 0;
+  }
+}
+
+@media (max-width: 400px) {
+  .spreadsheet-print-preview .print-preview-actions {
+    flex-wrap: wrap;
+  }
+
+  .spreadsheet-print-preview .print-preview-button {
+    flex: 1 1 auto;
+  }
+}

package/features/print-preview-dialog.css.d.ts

@@ -0,0 +1,3 @@
+/** Allows the production-only dynamic stylesheet import to type-check. */
+declare const stylesheet: string
+export default stylesheet