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

package/features/data-validation-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('./data-validation-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/filter-dropdown.css

@@ -0,0 +1,177 @@
+/* Anchored filter menu. This deliberately owns only the non-modal popover
+ * surface; dialog-skin.css continues to exclude it from modal geometry. */
+
+:is(.vnext-demo, .demo-page) [role='dialog'].spreadsheet-filter-dropdown {
+  position: fixed;
+  top: 220px;
+  right: max(24px, calc((100vw - 1280px) / 2 + 40px));
+  left: auto;
+  z-index: 500;
+  box-sizing: border-box;
+  display: block;
+  width: 320px;
+  min-width: 0;
+  max-width: calc(100vw - 48px);
+  max-height: calc(100vh - 260px);
+  padding: 0;
+  transform: none;
+  overflow: auto;
+  border: 1px solid var(--border-strong);
+  border-radius: var(--radius);
+  background: var(--bg-surface);
+  box-shadow: var(--shadow-popover);
+  color: var(--text-default);
+  font: 12px/1.4 var(--excel-font);
+}
+
+.spreadsheet-filter-dropdown .filter-dropdown-header {
+  position: relative;
+  box-sizing: border-box;
+  display: flex;
+  min-height: var(--dialog-header-h);
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  padding: 0 12px;
+  border-bottom: 1px solid var(--border);
+  background: var(--bg-surface);
+}
+
+.spreadsheet-filter-dropdown .filter-dropdown-title {
+  color: var(--text-default);
+  font-size: 13px;
+  font-weight: 600;
+}
+
+.spreadsheet-filter-dropdown .filter-dropdown-subtitle {
+  margin-top: 2px;
+  color: var(--text-muted);
+}
+
+.spreadsheet-filter-dropdown .dialog-close-x {
+  box-sizing: border-box;
+  display: inline-flex;
+  width: var(--control-h);
+  height: var(--control-h);
+  min-width: var(--control-h);
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  border: 1px solid transparent;
+  border-radius: var(--control-radius);
+  background: transparent;
+  color: var(--text-muted);
+  font: inherit;
+  font-size: 18px;
+  line-height: 1;
+  cursor: pointer;
+}
+
+.spreadsheet-filter-dropdown .filter-dropdown-rules,
+.spreadsheet-filter-dropdown .filter-section {
+  padding-right: 12px;
+  padding-left: 12px;
+}
+
+.spreadsheet-filter-dropdown .filter-dropdown-rules {
+  gap: 4px;
+  padding-top: 8px;
+}
+
+.spreadsheet-filter-dropdown .filter-rule {
+  border-color: var(--border);
+  border-radius: var(--control-radius);
+  background: var(--select-bg);
+  color: var(--excel-green-text);
+}
+
+.spreadsheet-filter-dropdown .filter-section {
+  padding-top: 10px;
+}
+
+.spreadsheet-filter-dropdown .filter-section-title {
+  color: var(--text-default);
+  font-size: 12px;
+  font-weight: 600;
+}
+
+.spreadsheet-filter-dropdown
+  :is(.filter-btn, .filter-search-input, .filter-condition-input, .filter-condition-select) {
+  box-sizing: border-box;
+  height: var(--control-h);
+  min-height: var(--control-h);
+  border: 1px solid var(--border);
+  border-radius: var(--control-radius);
+  background: var(--bg-surface);
+  color: var(--text-default);
+  font: inherit;
+}
+
+.spreadsheet-filter-dropdown .filter-btn {
+  padding: 0 10px;
+  cursor: pointer;
+}
+
+.spreadsheet-filter-dropdown
+  :is(.filter-search-input, .filter-condition-input, .filter-condition-select) {
+  padding: 0 8px;
+}
+
+.spreadsheet-filter-dropdown .filter-values-list,
+.spreadsheet-filter-dropdown .filter-value-option-all {
+  border-color: var(--border);
+  border-radius: var(--control-radius);
+}
+
+.spreadsheet-filter-dropdown .filter-value-option {
+  min-height: var(--control-h);
+}
+
+.spreadsheet-filter-dropdown .filter-footer {
+  padding: 10px 12px;
+  border-top-color: var(--border);
+  background: var(--bg-surface);
+}
+
+.spreadsheet-filter-dropdown .filter-btn-primary {
+  border-color: var(--dialog-primary-bg);
+  background: var(--dialog-primary-bg);
+  color: var(--text-on-accent);
+}
+
+.spreadsheet-filter-dropdown
+  :is(.filter-btn, .filter-value-option, .dialog-close-x):hover:not(:disabled) {
+  background: var(--hover);
+}
+
+.spreadsheet-filter-dropdown .filter-btn-primary:hover:not(:disabled) {
+  border-color: var(--dialog-primary-hover);
+  background: var(--dialog-primary-hover);
+}
+
+.spreadsheet-filter-dropdown .filter-btn-primary:active:not(:disabled) {
+  border-color: var(--dialog-primary-active);
+  background: var(--dialog-primary-active);
+}
+
+.spreadsheet-filter-dropdown :is(button, input, select):focus-visible {
+  border-color: var(--office-blue);
+  outline: 2px solid var(--office-blue);
+  outline-offset: 1px;
+}
+
+.spreadsheet-filter-dropdown :is(button, input, select):disabled {
+  border-color: var(--border);
+  background: var(--bg-chrome);
+  color: var(--text-disabled);
+  cursor: default;
+}
+
+.spreadsheet-filter-dropdown .filter-error {
+  margin: 0 12px;
+  padding: 8px 10px;
+  border: 1px solid var(--error-text);
+  border-radius: var(--control-radius);
+  background: var(--error-bg);
+  color: var(--error-text);
+}

package/features/filter-dropdown.css.d.ts

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

package/features/find-replace-actions.css

@@ -0,0 +1,13 @@
+/* Find & Replace action sizing. The shared dialog skin owns footer and primary colors. */
+
+.find-replace-dialog .fr-btn {
+  min-width: 64px;
+  padding: 0 14px;
+  cursor: pointer;
+}
+
+.find-replace-dialog .fr-btn:disabled,
+.find-replace-dialog .fr-step-btn:disabled {
+  color: var(--text-disabled);
+  cursor: default;
+}

package/features/find-replace-actions.css.d.ts

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

package/features/find-replace-dialog.css

@@ -0,0 +1,147 @@
+/* Find & Replace dialog interior. The shared dialog skin owns the modal shell. */
+
+@import './find-replace-status-messages.css';
+@import './find-replace-actions.css';
+
+.find-replace-dialog {
+  width: min(480px, calc(100vw - 32px));
+  min-height: 280px;
+}
+
+.find-replace-dialog .fr-header {
+  justify-content: space-between;
+}
+
+.find-replace-dialog .fr-title {
+  font-size: 14px;
+  font-weight: 600;
+  user-select: none;
+}
+
+.find-replace-dialog .fr-tabs {
+  display: flex;
+  gap: 24px;
+  padding: 0 16px;
+  border-bottom: 1px solid var(--border);
+  background: var(--bg-surface);
+}
+
+.find-replace-dialog .fr-tab {
+  position: relative;
+  box-sizing: border-box;
+  height: 36px;
+  min-height: 36px;
+  padding: 0 2px;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+  color: var(--text-muted);
+  cursor: pointer;
+}
+
+.find-replace-dialog .fr-tab:hover:not(:disabled) {
+  background: transparent;
+  color: var(--text-default);
+}
+
+.find-replace-dialog .fr-tab[aria-selected='true'] {
+  color: var(--office-blue-text);
+  font-weight: 600;
+}
+
+.find-replace-dialog .fr-tab[aria-selected='true']::after {
+  position: absolute;
+  right: 0;
+  bottom: -1px;
+  left: 0;
+  height: 2px;
+  background: var(--office-blue);
+  content: '';
+}
+
+.find-replace-dialog .fr-body {
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  gap: 12px;
+  padding: 16px;
+  background: var(--bg-surface);
+}
+
+.find-replace-dialog .fr-field {
+  display: grid;
+  grid-template-columns: 72px minmax(0, 1fr) auto;
+  align-items: center;
+  gap: 10px;
+}
+
+.find-replace-dialog .fr-field-label {
+  color: var(--text-default);
+  text-align: right;
+  white-space: nowrap;
+}
+
+.find-replace-dialog .fr-input,
+.find-replace-dialog .fr-select {
+  width: 100%;
+  padding: 0 8px;
+}
+
+.find-replace-dialog .fr-step-group {
+  display: inline-flex;
+  gap: 4px;
+}
+
+.find-replace-dialog .fr-step-btn {
+  width: var(--control-h);
+  padding: 0;
+  cursor: pointer;
+  font-size: 14px;
+  line-height: 1;
+}
+
+.find-replace-dialog .fr-step-btn:hover:not(:disabled),
+.find-replace-dialog .fr-btn:hover:not(:disabled) {
+  border-color: var(--border-strong);
+  background: var(--hover);
+}
+
+.find-replace-dialog .fr-field.fr-field-replace,
+.find-replace-dialog .fr-scope {
+  grid-template-columns: 72px minmax(0, 1fr);
+}
+
+.find-replace-dialog .fr-options {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px 18px;
+  padding-left: 82px;
+}
+
+.find-replace-dialog .fr-option {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  color: var(--text-default);
+  cursor: pointer;
+  font-size: 12px;
+  user-select: none;
+}
+
+.find-replace-dialog .fr-option input[type='checkbox'] {
+  width: 14px;
+  height: 14px;
+  margin: 0;
+  accent-color: var(--excel-green);
+  cursor: pointer;
+}
+
+.find-replace-dialog .fr-scope {
+  display: grid;
+  align-items: center;
+  gap: 10px;
+}
+
+.find-replace-dialog[data-active-tab='find'] [data-replace-only='true'] {
+  display: none;
+}

package/features/find-replace-dialog.css.d.ts

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

package/features/find-replace-status-messages.css

@@ -0,0 +1,19 @@
+/* Feedback messages beneath the Find & Replace fields. */
+
+.find-replace-dialog .fr-status,
+.find-replace-dialog .fr-error,
+.find-replace-dialog .fr-capped {
+  min-height: 16px;
+  padding: 0 16px 8px;
+  background: var(--bg-surface);
+  font-size: 12px;
+}
+
+.find-replace-dialog .fr-status,
+.find-replace-dialog .fr-capped {
+  color: var(--text-muted);
+}
+
+.find-replace-dialog .fr-error {
+  color: var(--error-text);
+}

package/features/find-replace-status-messages.css.d.ts

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

package/features/format-cells-dialog.css

@@ -0,0 +1,296 @@
+/* Format Cells owns this interior; dialog-skin.css owns the Office web modal shell. */
+
+.format-cells-dialog {
+  width: min(560px, calc(100vw - 32px));
+  height: min(440px, calc(100vh - 32px));
+  min-height: 360px;
+}
+
+.format-cells-dialog .format-cells-header {
+  justify-content: space-between;
+}
+
+.format-cells-dialog .format-cells-title {
+  margin: 0;
+  color: var(--text-default);
+  font-size: 14px;
+  font-weight: 600;
+  user-select: none;
+}
+
+.format-cells-dialog .format-cells-tabs {
+  display: flex;
+  flex: 0 0 36px;
+  align-items: stretch;
+  gap: 22px;
+  padding: 0 16px;
+  border-bottom: 1px solid var(--border);
+  background: var(--bg-surface);
+}
+
+form[role='dialog'].format-cells-dialog .format-cells-tabs > .format-cells-tab {
+  position: relative;
+  height: 36px;
+  padding: 0 2px;
+  border: 0;
+  border-radius: 0;
+  background: var(--bg-surface);
+  color: var(--text-muted);
+  cursor: pointer;
+  font: inherit;
+  font-size: 13px;
+}
+
+form[role='dialog'].format-cells-dialog .format-cells-tabs > .format-cells-tab:hover {
+  color: var(--text-default);
+}
+
+form[role='dialog'].format-cells-dialog
+  .format-cells-tabs
+  > .format-cells-tab[aria-selected='true'] {
+  color: var(--office-blue-text);
+  font-weight: 600;
+}
+
+.format-cells-dialog .format-cells-tab[aria-selected='true']::after {
+  position: absolute;
+  right: 0;
+  bottom: -1px;
+  left: 0;
+  height: 2px;
+  border-radius: var(--control-radius);
+  background: var(--office-blue);
+  content: '';
+}
+
+.format-cells-dialog .format-cells-panel {
+  flex: 1 1 auto;
+  min-height: 0;
+  padding: 14px 16px;
+  overflow: auto;
+  background: var(--bg-surface);
+}
+
+.format-cells-dialog .format-cells-panel:focus-visible {
+  outline: 2px solid var(--office-blue);
+  outline-offset: -2px;
+}
+
+.format-cells-dialog .format-cells-section {
+  display: flex;
+  height: 100%;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.format-cells-dialog .format-cells-row {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  color: var(--text-default);
+  font-size: 13px;
+}
+
+.format-cells-dialog .format-cells-row > span {
+  min-width: 96px;
+}
+
+[role='dialog'].format-cells-dialog
+  .format-cells-row
+  :is(input[type='text'], input[type='number'], select) {
+  min-width: 144px;
+  padding: 0 8px;
+}
+
+[role='dialog'].format-cells-dialog .format-cells-row input[type='number'] {
+  width: 80px;
+  min-width: 80px;
+}
+
+[role='dialog'].format-cells-dialog .format-cells-row input[type='color'] {
+  width: 36px;
+  min-width: 36px;
+  padding: 2px;
+  cursor: pointer;
+}
+
+.format-cells-dialog .format-cells-row input[type='checkbox'] {
+  width: 14px;
+  height: 14px;
+  margin: 0;
+  accent-color: var(--excel-green);
+  cursor: pointer;
+}
+
+.format-cells-dialog .format-cells-section[data-testid='format-cells-number'] {
+  display: grid;
+  grid-template-columns: 164px minmax(0, 1fr);
+  grid-template-rows: auto 1fr;
+  gap: 12px 18px;
+  align-items: start;
+}
+
+.format-cells-dialog .format-cells-category-list {
+  grid-row: 1 / span 2;
+  margin: 0;
+  padding: 3px;
+  overflow-y: auto;
+  border: 1px solid var(--border);
+  border-radius: var(--control-radius);
+  background: var(--bg-chrome-light);
+  list-style: none;
+}
+
+.format-cells-dialog .format-cells-category-list li {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.format-cells-dialog .format-cells-category-row {
+  position: relative;
+  display: flex;
+  min-height: var(--control-h);
+  align-items: center;
+  gap: 6px;
+  padding: 0 8px;
+  border-radius: var(--control-radius);
+  color: var(--text-default);
+  cursor: pointer;
+  font-size: 12px;
+  user-select: none;
+}
+
+.format-cells-dialog .format-cells-category-row:hover {
+  background: var(--hover);
+}
+
+.format-cells-dialog .format-cells-category-row:has(input:disabled) {
+  color: var(--text-disabled);
+  cursor: not-allowed;
+}
+
+.format-cells-dialog .format-cells-category-row input[type='radio'] {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  border: 0;
+  appearance: none;
+  cursor: inherit;
+  opacity: 0;
+}
+
+.format-cells-dialog .format-cells-category-row:has(input:checked) {
+  background: var(--select-bg);
+  color: var(--excel-green-text);
+  font-weight: 600;
+}
+
+.format-cells-dialog .format-cells-category-row:has(input:focus-visible) {
+  outline: 2px solid var(--office-blue);
+  outline-offset: -2px;
+}
+
+.format-cells-dialog .format-cells-coming-soon {
+  margin-left: auto;
+  color: var(--text-disabled);
+  font-size: 11px;
+  font-weight: 400;
+}
+
+.format-cells-dialog .format-cells-preview {
+  display: flex;
+  min-height: 52px;
+  align-items: center;
+  justify-content: flex-end;
+  padding: 8px 12px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  background: var(--bg-chrome-light);
+  color: var(--text-default);
+  font-size: 14px;
+  font-variant-numeric: tabular-nums;
+}
+
+.format-cells-dialog .format-cells-section[data-testid='format-cells-number'] > .format-cells-row {
+  align-self: start;
+}
+
+[role='dialog'].format-cells-dialog :is(.format-cells-side, .format-cells-side-active),
+[role='dialog'].format-cells-dialog
+  [data-testid='format-cells-border']
+  > .format-cells-row
+  > button {
+  padding: 0 10px;
+  cursor: pointer;
+}
+
+[role='dialog'].format-cells-dialog :is(.format-cells-side, .format-cells-side-active):hover,
+[role='dialog'].format-cells-dialog
+  [data-testid='format-cells-border']
+  > .format-cells-row
+  > button:hover {
+  border-color: var(--border-strong);
+  background: var(--hover);
+}
+
+[role='dialog'].format-cells-dialog .format-cells-side-active {
+  border-color: var(--excel-green);
+  background: var(--select-bg);
+  color: var(--excel-green-text);
+}
+
+.format-cells-dialog .format-cells-border-preview {
+  display: inline-block;
+  align-self: flex-start;
+  margin-top: 2px;
+  padding: 12px 20px;
+  background: var(--bg-chrome-light);
+}
+
+.format-cells-dialog .format-cells-actions {
+  min-height: 48px;
+}
+
+.format-cells-dialog .format-cells-actions [role='alert'] {
+  margin-right: auto;
+  color: var(--error-text);
+  font-size: 12px;
+}
+
+[role='dialog'].format-cells-dialog .format-cells-actions button {
+  min-width: 72px;
+  padding: 0 14px;
+  cursor: pointer;
+}
+
+[role='dialog'].format-cells-dialog .format-cells-actions button:hover:not(:disabled) {
+  border-color: var(--border-strong);
+  background: var(--hover);
+}
+
+[role='dialog'].format-cells-dialog .format-cells-actions button:disabled {
+  border-color: var(--border);
+  background: var(--bg-chrome);
+  color: var(--text-disabled);
+  cursor: default;
+}
+
+@media (max-width: 520px) {
+  .format-cells-dialog .format-cells-tabs {
+    gap: 12px;
+    padding: 0 12px;
+    overflow-x: auto;
+  }
+
+  .format-cells-dialog .format-cells-panel {
+    padding: 12px;
+  }
+
+  .format-cells-dialog .format-cells-section[data-testid='format-cells-number'] {
+    grid-template-columns: 132px minmax(0, 1fr);
+    gap: 10px 12px;
+  }
+}

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

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