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

package/styles/status-bar.css

@@ -0,0 +1,161 @@
+/* === C. Bottom chrome — status bar sections + sheet tabs =============== */
+
+/* C.1 Status bar — 三段：选区地址 / 聚合读数 / 输入模式徽章 */
+.spreadsheet-status-bar {
+  display: flex;
+  align-items: center;
+  gap: 0;
+  min-height: var(--bottom-strip-h);
+  padding: 0;
+  border: none;
+  border-top: 1px solid var(--border);
+  background: var(--bg-chrome);
+  color: var(--text-default);
+  font-family: var(--excel-font);
+  font-size: 12px;
+  /* 数字等宽：聚合值变化时不改变字符宽度，状态栏不随之抖动 */
+  font-variant-numeric: tabular-nums;
+  overflow-x: auto;
+  white-space: nowrap;
+}
+
+.spreadsheet-status-bar .spreadsheet-status-bar-item {
+  display: inline-flex;
+  align-items: center;
+  align-self: stretch;
+  padding: 0 8px;
+  border-right: 1px solid var(--border);
+  color: var(--text-default);
+  font-weight: 600;
+}
+
+.spreadsheet-status-bar .spreadsheet-status-bar-aggregates {
+  display: inline-flex;
+  align-items: center;
+  align-self: stretch;
+  gap: 12px;
+  padding: 0 8px;
+  border-right: 1px solid var(--border);
+}
+
+.spreadsheet-status-bar .spreadsheet-status-bar-aggregate-summary {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+.spreadsheet-status-bar .spreadsheet-status-bar-aggregate {
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+  gap: 4px;
+  height: 18px;
+  color: var(--text-default);
+}
+
+.spreadsheet-status-bar .spreadsheet-status-bar-aggregate-label {
+  font-weight: 600;
+}
+
+.spreadsheet-status-bar .spreadsheet-status-bar-aggregate-value {
+  font-variant-numeric: tabular-nums;
+}
+
+.spreadsheet-status-bar .spreadsheet-status-bar-aggregate-empty {
+  color: var(--text-muted);
+  font-style: italic;
+}
+
+.spreadsheet-status-bar .spreadsheet-status-bar-aggregate-truncated {
+  color: var(--text-muted);
+}
+
+/* 输入模式徽章靠右 */
+.spreadsheet-status-bar .spreadsheet-status-bar-mode-badge {
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+  align-self: stretch;
+  padding: 0 10px;
+  margin: 0 0 0 auto;
+  /* Excel 的 Ready/Edit 是状态栏上一段安静的文字,不是彩色徽章。 */
+  color: var(--text-muted);
+  font-weight: 600;
+  font-size: 12px;
+}
+
+.spreadsheet-status-bar--vertical .spreadsheet-status-bar-mode-badge {
+  margin-left: 8px;
+}
+
+/* C.2 聚合项勾选菜单（右键状态栏聚合区） */
+.spreadsheet-status-bar-aggregate-menu {
+  position: fixed;
+  z-index: 60;
+  display: flex;
+  flex-direction: column;
+  min-width: 132px;
+  padding: 4px 0;
+  border: 1px solid var(--border-strong);
+  border-radius: var(--radius);
+  background: var(--bg-surface);
+  box-shadow: var(--shadow-popover);
+  font-family: var(--excel-font);
+  font-size: 12px;
+}
+
+.spreadsheet-status-bar-aggregate-menu-item {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  height: 24px;
+  padding: 0 12px 0 6px;
+  border: none;
+  background: transparent;
+  color: var(--text-default);
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+
+.spreadsheet-status-bar-aggregate-menu-item:hover,
+.spreadsheet-status-bar-aggregate-menu-item:focus-visible {
+  background: var(--hover);
+  outline: none;
+}
+
+.spreadsheet-status-bar-aggregate-menu-check {
+  display: inline-block;
+  width: 12px;
+  color: var(--excel-green-text);
+  text-align: center;
+}
+
+/* C.3 诊断读数条 —— 仅开发/演示宿主挂载，见 SpreadsheetDiagnosticsReadout.tsx */
+.spreadsheet-diagnostics-readout {
+  display: flex;
+  align-items: center;
+  min-height: 22px;
+  border-top: 1px solid var(--border);
+  background: var(--bg-chrome);
+  color: var(--text-muted);
+  font-family: var(--excel-font);
+  font-size: 11px;
+  font-variant-numeric: tabular-nums;
+  overflow-x: auto;
+  white-space: nowrap;
+}
+
+.spreadsheet-diagnostics-readout .spreadsheet-diagnostics-readout-item {
+  display: inline-flex;
+  align-items: center;
+  height: 22px;
+  padding: 0 8px;
+  border-right: 1px solid var(--border);
+}

package/styles/toolbar-popovers.css

@@ -0,0 +1,278 @@
+/* Number-format dropdown — anchored beneath the toolbar's number-format
+   button. Two-column rows (label left, preview right) mirroring Excel. */
+.number-format-dropdown {
+  min-width: 240px;
+  padding: 4px 0;
+  background: var(--bg-surface);
+  border: 1px solid var(--border-strong);
+  border-radius: 2px;
+  box-shadow: var(--shadow-popover);
+  font-family: var(--excel-font);
+  font-size: 12px;
+}
+
+.number-format-dropdown-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  padding: 4px 12px;
+  border: none;
+  background: transparent;
+  color: var(--text-default);
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+
+.number-format-dropdown-item:hover:not(:disabled) {
+  background: var(--select-bg);
+}
+
+.number-format-dropdown-custom {
+  position: relative;
+}
+
+.number-format-dropdown-custom-open > .number-format-dropdown-item,
+.number-format-dropdown-item-with-submenu[aria-expanded='true'] {
+  background: var(--select-bg);
+}
+
+.number-format-dropdown-item-with-submenu {
+  padding-right: 10px;
+}
+
+.number-format-dropdown-submenu-arrow {
+  width: 0;
+  height: 0;
+  margin-left: 12px;
+  border-top: 4px solid transparent;
+  border-bottom: 4px solid transparent;
+  border-left: 5px solid var(--text-muted);
+  flex: 0 0 auto;
+}
+
+.number-format-dropdown-submenu {
+  position: absolute;
+  top: -5px;
+  left: calc(100% - 2px);
+  z-index: 501;
+  min-width: 196px;
+  padding: 4px 0;
+  background: var(--bg-surface);
+  border: 1px solid var(--border-strong);
+  border-radius: 2px;
+  box-shadow: var(--shadow-popover);
+}
+
+.number-format-dropdown-submenu-item {
+  display: block;
+  width: 100%;
+  padding: 5px 12px;
+  border: none;
+  background: transparent;
+  color: var(--text-default);
+  font: inherit;
+  text-align: left;
+  white-space: nowrap;
+  cursor: pointer;
+}
+
+.number-format-dropdown-submenu-item:hover {
+  background: var(--select-bg);
+}
+
+.number-format-dropdown-item-disabled,
+.number-format-dropdown-item:disabled {
+  color: var(--text-disabled);
+  cursor: default;
+}
+
+.number-format-dropdown-label {
+  flex: 1;
+  margin-right: 16px;
+}
+
+.number-format-dropdown-preview {
+  color: var(--text-muted);
+  font-variant-numeric: tabular-nums;
+}
+
+/* Toolbar fill/text color popover */
+.spreadsheet-color-popover {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  min-width: 226px;
+  padding: 8px;
+  background: var(--bg-surface);
+  border: 1px solid var(--border-strong);
+  border-radius: var(--radius);
+  box-shadow: var(--shadow-popover);
+  user-select: none;
+  font-family: var(--excel-font);
+  color: var(--text-default);
+}
+
+.spreadsheet-color-popover-no-fill {
+  box-sizing: border-box;
+  display: flex;
+  min-height: var(--control-h);
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  text-align: left;
+  padding: 0 8px;
+  border: 1px solid transparent;
+  background: transparent;
+  font: inherit;
+  font-size: 12px;
+  color: var(--text-default);
+  cursor: pointer;
+  border-radius: var(--control-radius);
+  line-height: 1.2;
+}
+
+.spreadsheet-color-popover-no-fill:hover,
+.spreadsheet-color-popover-no-fill:focus-visible {
+  background: var(--hover);
+}
+
+.spreadsheet-color-popover-no-fill[data-selected='true'] {
+  border-color: var(--excel-green);
+  background: var(--select-bg);
+  color: var(--excel-green-text);
+}
+
+.spreadsheet-color-popover-no-fill:focus-visible {
+  border-color: var(--office-blue);
+  outline: 2px solid var(--office-blue);
+  outline-offset: 1px;
+}
+
+.spreadsheet-color-popover-no-fill:active {
+  background: var(--active-bg);
+}
+
+.spreadsheet-color-popover-no-fill-icon {
+  display: inline-flex;
+  width: 16px;
+  height: 16px;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+.spreadsheet-color-popover-no-fill-label {
+  flex: 1;
+}
+
+.spreadsheet-color-popover-section-title {
+  padding: 2px 4px;
+  margin-top: 2px;
+  font-size: 11px;
+  color: var(--text-muted);
+  letter-spacing: 0.02em;
+}
+
+.spreadsheet-color-popover-grid {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  padding: 2px 0;
+}
+
+.spreadsheet-color-popover-row {
+  display: flex;
+  gap: 2px;
+}
+
+.spreadsheet-color-popover-swatch {
+  box-sizing: border-box;
+  width: var(--control-h);
+  height: var(--control-h);
+  padding: 0;
+  border: 1px solid var(--border-strong);
+  cursor: pointer;
+  border-radius: var(--control-radius);
+}
+
+.spreadsheet-color-popover-swatch:hover,
+.spreadsheet-color-popover-swatch:focus-visible {
+  outline: 2px solid var(--office-blue);
+  outline-offset: 1px;
+}
+
+.spreadsheet-color-popover-swatch[data-selected='true'] {
+  border: 2px solid var(--excel-green);
+  box-shadow: inset 0 0 0 1px var(--bg-surface);
+}
+
+.spreadsheet-color-popover-swatch:active {
+  outline-color: var(--office-blue);
+  box-shadow: inset 0 0 0 2px var(--active-bg);
+}
+
+.spreadsheet-color-popover-more {
+  box-sizing: border-box;
+  display: flex;
+  min-height: var(--control-h);
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  text-align: left;
+  padding: 0 8px;
+  border: 1px solid transparent;
+  border-top: 1px solid var(--border);
+  background: transparent;
+  font: inherit;
+  font-size: 12px;
+  color: var(--text-default);
+  cursor: pointer;
+  border-radius: var(--control-radius);
+  margin-top: 2px;
+}
+
+.spreadsheet-color-popover-more:hover:not(:disabled),
+.spreadsheet-color-popover-more:focus-visible:not(:disabled) {
+  background: var(--hover);
+  border-color: var(--office-blue);
+  outline: 2px solid var(--office-blue);
+  outline-offset: 1px;
+}
+
+.spreadsheet-color-popover-more:disabled {
+  color: var(--text-disabled);
+  cursor: not-allowed;
+}
+
+.spreadsheet-color-popover-more-icon {
+  display: inline-flex;
+  width: 16px;
+  height: 16px;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  opacity: 0.85;
+}
+
+.spreadsheet-color-popover-more:disabled .spreadsheet-color-popover-more-icon {
+  opacity: 0.5;
+}
+
+.spreadsheet-color-popover-more-label {
+  flex: 1;
+}
+
+.spreadsheet-color-popover-hint {
+  min-height: 16px;
+  font-size: 11px;
+  color: var(--text-muted);
+  padding: 2px 4px 0;
+  font-family: var(--excel-font);
+  font-variant-numeric: tabular-nums;
+  border-top: 1px solid var(--border);
+  margin-top: 2px;
+  padding-top: 4px;
+}

package/styles/toolbar.css

@@ -0,0 +1,213 @@
+/* A.2 Toolbar — button groups separated by thin dividers, icon-like look.
+   The Univer slim layout wraps to a second row when the viewport narrows
+   instead of showing an overflow chevron, so flex-wrap drives the reflow
+   and overflow-x stays visible. */
+.spreadsheet-toolbar {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 2px;
+  min-height: 40px;
+  padding: 4px 10px;
+  background: var(--bg-toolbar);
+  border-bottom: 1px solid var(--border);
+  font-family: var(--excel-font);
+  font-size: 13px;
+  overflow-x: visible;
+  white-space: nowrap;
+  color: var(--text-default);
+}
+
+.spreadsheet-toolbar .spreadsheet-toolbar-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: var(--control-h);
+  height: var(--control-h);
+  padding: 0 6px;
+  margin: 0;
+  border: 1px solid transparent;
+  border-radius: 4px;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  cursor: pointer;
+  transition: background 100ms ease-out, border-color 100ms ease-out;
+}
+
+/* Toolbar SVG glyphs — 16px keeps the visual mass comparable to Univer's
+   slim toolbar without crowding the 28px hit target. */
+.spreadsheet-toolbar .spreadsheet-toolbar-button > svg {
+  width: 16px;
+  height: 16px;
+  flex-shrink: 0;
+}
+
+/* Faint vertical separator between toolbar button groups. The JSX places an
+   explicit <span class="spreadsheet-toolbar-separator"> between groups,
+   matching Univer's slim layout:
+     [history] | [font] | [textStyle] | [color] | [align] | [merge] | [number] */
+.spreadsheet-toolbar > .spreadsheet-toolbar-separator {
+  display: inline-block;
+  width: 1px;
+  height: 20px;
+  background: var(--border);
+  margin: 0 6px;
+  flex-shrink: 0;
+}
+
+/* Currency-dropdown opener: text + chevron (no icon). The button reads
+   wider than a 24x24 hit target so it gets explicit padding. */
+.spreadsheet-toolbar .spreadsheet-toolbar-currency-opener {
+  min-width: 80px;
+  padding: 0 8px;
+  gap: 4px;
+  font-weight: 500;
+}
+
+.spreadsheet-toolbar .spreadsheet-toolbar-currency-opener > .toolbar-chevron {
+  margin-left: 2px;
+  opacity: 0.65;
+}
+
+.spreadsheet-toolbar .spreadsheet-toolbar-button:hover:not(:disabled) {
+  background: var(--hover);
+  border-color: var(--border);
+}
+
+.spreadsheet-toolbar .spreadsheet-toolbar-button[aria-pressed='true'],
+/* is-active：下拉开启 / 格式命中等由组件计算的活跃态（原 fmt-btn-active）。 */
+.spreadsheet-toolbar .spreadsheet-toolbar-button.is-active {
+  background: var(--active-bg);
+  border-color: var(--border-strong);
+}
+
+.spreadsheet-toolbar .spreadsheet-toolbar-button:disabled {
+  color: var(--text-disabled);
+  cursor: default;
+}
+
+/* Format Painter state colors — armed / sticky */
+.spreadsheet-toolbar
+  .spreadsheet-toolbar-button[data-format-painter-state='armed'],
+.spreadsheet-toolbar
+  .spreadsheet-toolbar-button[data-format-painter-state='sticky'] {
+  background: var(--select-bg);
+  border-color: var(--excel-green);
+  color: var(--excel-green-text);
+}
+
+/*
+ * Custom hover tooltips for toolbar buttons. Replaces the native
+ * title="..." pop-up (which has a multi-second OS delay and OS styling)
+ * with a dark-bubble tip that animates in after 500 ms — matches Univer /
+ * MS Office conventions.
+ *
+ * Accessibility note: each button still carries aria-label, so screen
+ * readers pick up the label even though we dropped title=.
+ *
+ * Suppressed when an associated menu/dialog is open (aria-expanded=true)
+ * so the tooltip does not stack on top of the dropdown panel.
+ */
+.spreadsheet-toolbar [data-tooltip] {
+  position: relative;
+}
+
+.spreadsheet-toolbar [data-tooltip]:hover::after,
+.spreadsheet-toolbar [data-tooltip]:focus-visible::after {
+  content: attr(data-tooltip);
+  position: absolute;
+  top: calc(100% + 6px);
+  left: 50%;
+  transform: translateX(-50%);
+  background: rgba(34, 34, 34, 0.92);
+  color: #fff;
+  padding: 4px 8px;
+  border-radius: 4px;
+  font-size: 12px;
+  line-height: 1.3;
+  font-weight: 400;
+  white-space: nowrap;
+  pointer-events: none;
+  z-index: 10000;
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
+  animation: spreadsheet-toolbar-tooltip-fade-in 140ms 500ms both;
+}
+
+/* Little arrow above the bubble pointing at the button. */
+.spreadsheet-toolbar [data-tooltip]:hover::before,
+.spreadsheet-toolbar [data-tooltip]:focus-visible::before {
+  content: '';
+  position: absolute;
+  top: calc(100% + 1px);
+  left: 50%;
+  width: 0;
+  height: 0;
+  border-left: 4px solid transparent;
+  border-right: 4px solid transparent;
+  border-bottom: 5px solid rgba(34, 34, 34, 0.92);
+  transform: translateX(-50%);
+  pointer-events: none;
+  z-index: 10000;
+  animation: spreadsheet-toolbar-tooltip-fade-in 140ms 500ms both;
+}
+
+/* Suppress while the button has an open menu/dialog so the tooltip
+   doesn't sit on top of the popover. */
+.spreadsheet-toolbar [data-tooltip][aria-expanded='true']:hover::after,
+.spreadsheet-toolbar [data-tooltip][aria-expanded='true']:hover::before,
+.spreadsheet-toolbar [data-tooltip]:disabled:hover::after,
+.spreadsheet-toolbar [data-tooltip]:disabled:hover::before {
+  display: none;
+}
+
+@keyframes spreadsheet-toolbar-tooltip-fade-in {
+  from {
+    opacity: 0;
+    transform: translateX(-50%) translateY(-2px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(-50%) translateY(0);
+  }
+}
+
+/* Combo 形态的文本控件(字体/字号/数字格式开启器):白底 + 发丝边 + 尾部
+   下拉箭头,与 Excel for web 的组合框同构 —— 区别于纯图标按钮的隐形边框,
+   一眼可读"这是个下拉"。 */
+.spreadsheet-toolbar .spreadsheet-toolbar-combo,
+.spreadsheet-toolbar .spreadsheet-toolbar-currency-opener {
+  justify-content: flex-start;
+  gap: 4px;
+  border-color: var(--border);
+  border-radius: var(--radius);
+  background: var(--bg-surface);
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+.spreadsheet-toolbar .spreadsheet-toolbar-combo::after {
+  content: '';
+  flex-shrink: 0;
+  width: 0;
+  height: 0;
+  margin-left: auto;
+  border-left: 3px solid transparent;
+  border-right: 3px solid transparent;
+  border-top: 4px solid var(--text-muted);
+}
+
+.spreadsheet-toolbar .spreadsheet-toolbar-combo--font {
+  width: 108px;
+}
+
+.spreadsheet-toolbar .spreadsheet-toolbar-combo--size {
+  width: 48px;
+}
+
+/* combo 的 hover 保持白底、只加深边框(Excel 口径),覆盖通用按钮 hover。 */
+.spreadsheet-toolbar .spreadsheet-toolbar-combo:hover:not(:disabled),
+.spreadsheet-toolbar .spreadsheet-toolbar-currency-opener:hover:not(:disabled) {
+  background: var(--bg-surface);
+  border-color: var(--border-strong);
+}