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

package/features/text-to-columns-dialog.css

@@ -0,0 +1,246 @@
+/* Text to Columns owns this wizard interior; dialog-skin.css owns the modal shell. */
+
+.text-to-columns-dialog {
+  width: min(600px, calc(100vw - 32px));
+  min-height: min(480px, calc(100vh - 32px));
+}
+
+.text-to-columns-dialog .ttc-header {
+  gap: 12px;
+  padding-right: 48px;
+}
+
+.text-to-columns-dialog .ttc-title {
+  color: var(--text-default);
+  font-size: 14px;
+  font-weight: 600;
+  white-space: nowrap;
+}
+
+.text-to-columns-dialog .ttc-step-indicator {
+  display: inline-flex;
+  max-width: 55%;
+  min-width: 0;
+  align-items: center;
+  gap: 8px;
+  height: 22px;
+  margin-left: auto;
+  padding: 0 8px;
+  border: 1px solid var(--border);
+  border-radius: var(--control-radius);
+  background: var(--bg-chrome);
+}
+
+.text-to-columns-dialog .ttc-step-count {
+  color: var(--excel-green-text);
+  font-size: 12px;
+  font-weight: 600;
+  white-space: nowrap;
+}
+
+.text-to-columns-dialog .ttc-step-label {
+  overflow: hidden;
+  color: var(--text-muted);
+  font-size: 12px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.text-to-columns-dialog .ttc-body {
+  display: flex;
+  min-height: 0;
+  flex: 1 1 auto;
+  flex-direction: column;
+  gap: 12px;
+  padding: 16px;
+  overflow: hidden;
+  background: var(--bg-surface);
+}
+
+.text-to-columns-dialog .ttc-section {
+  display: flex;
+  flex: 0 0 auto;
+  flex-direction: column;
+  gap: 8px;
+  min-width: 0;
+  margin: 0;
+  padding: 8px 12px 12px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+}
+
+.text-to-columns-dialog .ttc-section-title {
+  padding: 0 4px;
+  color: var(--text-muted);
+  font-size: 12px;
+  font-weight: 600;
+}
+
+.text-to-columns-dialog .ttc-radio,
+.text-to-columns-dialog .ttc-checkbox {
+  display: inline-flex;
+  min-height: 20px;
+  align-items: center;
+  gap: 6px;
+  color: var(--text-default);
+  cursor: pointer;
+  user-select: none;
+}
+
+.text-to-columns-dialog :is(.ttc-radio, .ttc-checkbox) input {
+  margin: 0;
+  accent-color: var(--excel-green);
+  cursor: inherit;
+}
+
+.text-to-columns-dialog :is(.ttc-radio, .ttc-checkbox):has(input:disabled),
+.text-to-columns-dialog .ttc-field-row:has(:disabled) {
+  color: var(--text-disabled);
+  cursor: default;
+}
+
+.text-to-columns-dialog .ttc-delim-grid {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 6px 16px;
+}
+
+.text-to-columns-dialog .ttc-field-row {
+  display: grid;
+  grid-template-columns: minmax(96px, auto) minmax(0, 1fr);
+  align-items: center;
+  gap: 8px;
+  color: var(--text-default);
+}
+
+.text-to-columns-dialog .ttc-input,
+.text-to-columns-dialog .ttc-select {
+  width: 100%;
+  padding: 0 8px;
+}
+
+.text-to-columns-dialog[role='dialog'][data-step] .ttc-input:disabled,
+.text-to-columns-dialog[role='dialog'][data-step] .ttc-select:disabled {
+  background: var(--bg-chrome);
+  color: var(--text-disabled);
+  cursor: default;
+}
+
+.text-to-columns-dialog .ttc-format-grid {
+  display: grid;
+  max-height: 112px;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 8px 12px;
+  overflow: auto;
+}
+
+.text-to-columns-dialog .ttc-format-grid .ttc-field-row {
+  grid-template-columns: 28px minmax(0, 1fr);
+}
+
+.text-to-columns-dialog .ttc-preview {
+  display: flex;
+  min-height: 0;
+  flex: 1 1 auto;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.text-to-columns-dialog .ttc-preview-header {
+  color: var(--text-default);
+  font-size: 12px;
+  font-weight: 600;
+}
+
+.text-to-columns-dialog .ttc-preview-scroll {
+  min-height: 112px;
+  flex: 1 1 auto;
+  overflow: auto;
+  border: 1px solid var(--border);
+  border-radius: var(--control-radius);
+  background: var(--bg-cell);
+}
+
+.text-to-columns-dialog .ttc-preview-scroll table {
+  width: 100%;
+  border-collapse: collapse;
+  color: var(--text-default);
+}
+
+.text-to-columns-dialog .ttc-preview-scroll td {
+  min-width: 72px;
+  padding: 4px 8px;
+  border-right: 1px solid var(--gridline);
+  border-bottom: 1px solid var(--gridline);
+  font-size: 12px;
+  white-space: nowrap;
+}
+
+.text-to-columns-dialog .ttc-help {
+  margin: 0;
+  color: var(--text-muted);
+  font-size: 12px;
+}
+
+.text-to-columns-dialog .ttc-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;
+}
+
+.text-to-columns-dialog .ttc-footer-status {
+  min-width: 0;
+  flex: 1 1 auto;
+}
+
+.text-to-columns-dialog .ttc-footer-actions {
+  display: inline-flex;
+  flex: 0 0 auto;
+  align-items: center;
+  gap: 8px;
+}
+
+.text-to-columns-dialog .ttc-btn {
+  min-width: 68px;
+  padding: 0 12px;
+  cursor: pointer;
+}
+
+.text-to-columns-dialog .ttc-btn:hover:not(:disabled) {
+  border-color: var(--border-strong);
+  background: var(--hover);
+}
+
+.text-to-columns-dialog .ttc-btn-primary:hover:not(:disabled) {
+  border-color: var(--dialog-primary-hover);
+  background: var(--dialog-primary-hover);
+}
+
+.text-to-columns-dialog[role='dialog'][data-step] .ttc-btn:disabled {
+  background: var(--bg-chrome);
+  color: var(--text-disabled);
+  cursor: default;
+}
+
+.text-to-columns-dialog[role='dialog'][data-step] .ttc-btn.ttc-btn-primary:disabled {
+  border-color: var(--border);
+}
+
+.text-to-columns-dialog .ttc-next-disabled-hint {
+  display: block;
+  overflow: hidden;
+  color: var(--text-muted);
+  font-size: 12px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+@media (max-width: 560px) {
+  .text-to-columns-dialog .ttc-delim-grid,
+  .text-to-columns-dialog .ttc-format-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}

package/features/text-to-columns-dialog.css.d.ts

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

package/features/toolbar-shell.css

@@ -0,0 +1,46 @@
+.spreadsheet-toolbar.toolbar-shell {
+  display: flex;
+  flex-wrap: nowrap;
+  gap: 0;
+  overflow: visible;
+  padding: 0;
+}
+
+.toolbar-shell__viewport {
+  min-width: 0;
+  overflow-x: auto;
+  overflow-y: hidden;
+  scrollbar-width: thin;
+  flex: 1 1 auto;
+}
+
+.toolbar-shell__content {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  min-height: 40px;
+  min-width: max-content;
+  padding: 4px 10px;
+}
+
+.toolbar-shell__content > .spreadsheet-toolbar-separator {
+  display: inline-block;
+  width: 1px;
+  height: 20px;
+  margin: 0 6px;
+  flex-shrink: 0;
+  background: #d8d8d8;
+}
+
+.toolbar-shell__scroll-button {
+  align-self: stretch;
+  width: 24px;
+  border: 0;
+  background: var(--bg-chrome-light);
+  color: inherit;
+  cursor: pointer;
+}
+
+.toolbar-shell__scroll-button:disabled {
+  visibility: hidden;
+}

package/features/toolbar-shell.css.d.ts

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

package/package.json

@@ -1,6 +1,43 @@
 {
   "name": "@einfach-excel/spreadsheet-ui-styles",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "0.2.0",
+  "description": "Framework-neutral CSS layer for Einfach spreadsheet surfaces",
+  "type": "module",
+  "exports": {
+    ".": "./styles/index.css",
+    "./styles.css": "./styles/index.css",
+    "./styles/*.css": "./styles/*.css",
+    "./features/*.css": {
+      "types": "./features/*.css.d.ts",
+      "default": "./features/*.css"
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "styles",
+    "features",
+    "README.md"
+  ],
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "engines": {
+    "node": ">=22.12.0"
+  },
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/allroad88888888/einfach-excel.git",
+    "directory": "excel/spreadsheet-ui-styles"
+  },
+  "homepage": "https://github.com/allroad88888888/einfach-excel/tree/main/excel/spreadsheet-ui-styles",
+  "bugs": {
+    "url": "https://github.com/allroad88888888/einfach-excel/issues"
+  },
+  "keywords": [
+    "spreadsheet",
+    "css",
+    "styles",
+    "framework-agnostic"
+  ]
 }

package/styles/button-states.css

@@ -0,0 +1,45 @@
+/* === E. Button universal states ====================================== */
+
+/* Excel-style focus ring — only via keyboard (focus-visible), Office blue,
+ * inset so it never expands box geometry. Applies broadly to vnext chrome. */
+.spreadsheet-menu-bar button:focus-visible,
+.spreadsheet-toolbar button:focus-visible,
+.spreadsheet-name-box-input:focus-visible,
+.spreadsheet-formula-bar-input:focus-visible,
+.spreadsheet-status-bar button:focus-visible,
+.spreadsheet-sheet-tabs button:focus-visible,
+.spreadsheet-grid-cell:focus-visible {
+  outline: 2px solid var(--office-blue);
+  outline-offset: -1px;
+}
+
+/* Hide native focus outline when JS sets focus programmatically (no keyboard).
+ * focus-visible above re-adds it for keyboard navigation. */
+.spreadsheet-menu-bar button:focus:not(:focus-visible),
+.spreadsheet-toolbar button:focus:not(:focus-visible),
+.spreadsheet-status-bar button:focus:not(:focus-visible),
+.spreadsheet-sheet-tabs button:focus:not(:focus-visible) {
+  outline: none;
+}
+
+/* Universal disabled baseline — anything with disabled attribute inside vnext
+ * chrome dims and stops pointer events except for tooltips. */
+.spreadsheet-menu-bar button:disabled,
+.spreadsheet-toolbar button:disabled,
+.spreadsheet-status-bar button:disabled,
+.spreadsheet-sheet-tabs button:disabled {
+  color: var(--text-disabled);
+  cursor: not-allowed;
+  background: transparent;
+  border-color: transparent;
+}
+
+/* Universal pressed/armed accent — any element advertising aria-pressed=true
+ * or data-active=true gets the Excel green inset highlight if nothing
+ * more specific overrides. Specific selectors above still win on cascade. */
+.spreadsheet-menu-bar button[aria-pressed='true'],
+.spreadsheet-toolbar button[aria-pressed='true'],
+.spreadsheet-status-bar button[aria-pressed='true'] {
+  box-shadow: inset 0 -2px 0 0 var(--excel-green);
+}
+

package/styles/chrome-tokens.css

@@ -0,0 +1,124 @@
+/* ============================================================================
+ * Excel-web chrome tokens — vnext 皮肤的唯一取色/尺寸来源
+ *
+ * 参照 Excel for web(Fluent):白色工具栏、#f5f5f5 表头/底部条、
+ * #107c41 品牌绿(选区边框/强调)、#e1e1e1 网格线。规则:
+ *   - chrome 样式文件里禁止再写裸色值 —— 缺 token 就来这里加;
+ *   - 每个面板必须铺自己的不透明底色 token,不许透出宿主背景
+ *     (透明拼缝在暗色宿主下会漏光,见 acfa5cb 修的"右下角黑缝");
+ *   - *-text 变体是文本安全色:同名非 text 色用于边框/填充时可以更鲜,
+ *     文本必须用 text 变体保 4.5:1(数值经脚本核算,见下方注释)。
+ *
+ * 对比度(AA≥4.5,核算于 2026-08-20):green-text/白 6.17、
+ * green-text/header-selected 4.78、green-text/select-bg 5.55、
+ * muted/chrome 5.68、白/green 5.27、blue-text/白 5.78、error/白 6.57。
+ * ========================================================================= */
+:root {
+  /* --- 品牌 / 强调 --- */
+  --excel-green: #107c41; /* 选区边框、活动 sheet 下划线、主按钮填充 */
+  --excel-green-text: #0f703b; /* 绿色"文本"一律用这个 */
+  --office-blue: #0078d4; /* 焦点环、链接态边框/填充 */
+  --office-blue-text: #0067b8; /* 蓝色"文本"一律用这个 */
+
+  /* --- 面板底色(全部不透明) --- */
+  --bg-toolbar: #ffffff; /* 工具栏 / 公式栏一行 */
+  --bg-chrome: #f5f5f5; /* 表头、底部条(页签+状态栏)、菜单栏 */
+  --bg-chrome-light: #fafafa; /* 次级浅面板(历史面板等) */
+  --bg-surface: #ffffff; /* 弹层:下拉、右键菜单、popover */
+  --bg-cell: #ffffff; /* 单元格画布 */
+
+  /* --- 文本 --- */
+  --text-default: #242424;
+  --text-muted: #616161;
+  --text-disabled: #bdbdbd;
+  --text-on-accent: #ffffff;
+  --text-on-accent-soft: rgba(255, 255, 255, 0.85);
+  --error-text: #b42318;
+  --error-bg: rgba(220, 53, 69, 0.12);
+
+  /* --- 线 --- */
+  --border: #d1d1d1; /* chrome 面板之间的 1px 发丝线 */
+  --border-strong: #a19f9d;
+  --gridline: #e1e1e1; /* 单元格网格线,比 chrome 线更浅(Excel 口径) */
+
+  /* --- Dialog 壳 --- */
+  --dialog-overlay: rgba(0, 0, 0, 0.28);
+  --dialog-shadow: 0 12px 32px rgba(0, 0, 0, 0.24);
+  --dialog-primary-bg: #107c41;
+  --dialog-primary-hover: #0d6f3a;
+  --dialog-primary-active: #0a5c30;
+
+  /* --- 交互状态底色 --- */
+  --hover: #f0f0f0;
+  --active-bg: #e4e4e4;
+  --select-bg: rgba(16, 124, 65, 0.08); /* 选区范围淡绿填充 */
+  --spill-tint: rgba(43, 87, 154, 0.06); /* 动态数组溢出区淡蓝 */
+  --resize-hint: rgba(0, 120, 212, 0.3); /* 行列缩放把手 hover */
+  --header-selected-bg: #caead8; /* 选区触及的表头 */
+  --header-selected-text: #0f703b;
+  /* 整行/列选中的实心表头。两主题都用 #107c41:白字 5.27:1,
+     暗色下不用更亮的 #21a366 —— 白字在其上只有 3.4:1,过不了 AA。 */
+  --header-full-selected-bg: #107c41;
+
+  /* --- 尺寸 --- */
+  --control-h: 28px; /* 工具栏控件统一高度 */
+  --formula-row-h: 28px;
+  --bottom-strip-h: 28px; /* 页签 + 状态栏共处的一条 */
+  --radius: 4px;
+  --control-radius: 2px;
+  --dialog-header-h: 40px;
+
+  /* --- 字体 --- */
+  /* chrome 用 UI 字体(Windows 命中 Segoe UI,即 Office 原生观感) */
+  --excel-font: 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, 'Helvetica Neue', sans-serif;
+  /* 单元格用 Excel 的默认正文字体栈(Windows 命中 Calibri ≈ 11pt) */
+  --cell-font:
+    Calibri, 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, 'Helvetica Neue', sans-serif;
+  --cell-font-size: 14px;
+
+  --shadow-popover: 0 4px 14px rgba(0, 0, 0, 0.14);
+}
+
+/* ============================================================================
+ * 暗色皮肤 —— 宿主在组件任意祖先上放 data-spreadsheet-theme="dark" 即生效
+ * (CSS 变量沿 DOM 继承,子树内所有 chrome 就地换色)。
+ * 参照 Office 暗色:画布 #212121、chrome #252423、网格线 #404040。
+ * 对比度(AA,核算于 2026-08-20):text/cell 14.4、muted/chrome 6.38、
+ * green-text/cell 8.11、green-text/header-selected 6.28、error 5.15、
+ * 绿边框图形对比 4.98(#21a366 vs #212121)。
+ * ========================================================================= */
+[data-spreadsheet-theme='dark'] {
+  --excel-green: #21a366; /* 暗底上边框/下划线需要更亮的绿 */
+  --excel-green-text: #6ccb8f;
+  --office-blue: #479ef5;
+  --office-blue-text: #62abf5;
+
+  --bg-toolbar: #292827;
+  --bg-chrome: #252423;
+  --bg-chrome-light: #2d2c2b;
+  --bg-surface: #363534;
+  --bg-cell: #212121;
+
+  --text-default: #f3f2f1;
+  --text-muted: #a8a6a3;
+  --text-disabled: #6b6966;
+  --error-text: #f1707b;
+  --error-bg: rgba(241, 112, 123, 0.16);
+
+  --border: #484644;
+  --border-strong: #6b6966;
+  --gridline: #404040;
+
+  --dialog-overlay: rgba(0, 0, 0, 0.56);
+  --dialog-shadow: 0 12px 32px rgba(0, 0, 0, 0.62);
+
+  --hover: #3a3938;
+  --active-bg: #484644;
+  --select-bg: rgba(76, 194, 123, 0.12);
+  --spill-tint: rgba(96, 130, 182, 0.14);
+  --resize-hint: rgba(71, 158, 245, 0.4);
+  --header-selected-bg: #143b26;
+  --header-selected-text: #6ccb8f;
+
+  --shadow-popover: 0 4px 14px rgba(0, 0, 0, 0.55);
+}

package/styles/demo-header.css

@@ -0,0 +1,23 @@
+/* Demo header — compress so the grid gets more vertical real estate */
+.vnext-demo .demo-header {
+  padding: 6px 12px;
+  margin-bottom: 4px;
+}
+
+.vnext-demo .demo-header h3 {
+  margin: 0;
+  font-size: 14px;
+}
+
+.vnext-demo .demo-header .demo-desc {
+  margin: 2px 0 0 0;
+  font-size: 11px;
+  color: var(--text-muted);
+}
+
+/* View > Show Gridlines: remove borders between cells. */
+.spreadsheet-grid.spreadsheet-grid--no-gridlines .spreadsheet-grid-cell {
+  border-right: none;
+  border-bottom: none;
+}
+

package/styles/demo-two-column.css

@@ -0,0 +1,115 @@
+/* === Wave 5 demo two-column layout ============================================== */
+
+.vnext-demo-body {
+  display: flex;
+  align-items: stretch;
+  min-height: 0;
+}
+
+.vnext-demo-main {
+  display: flex;
+  flex-direction: column;
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+.vnext-demo-bottom-row {
+  display: flex;
+  align-items: stretch;
+  min-height: var(--bottom-strip-h);
+  border-top: 1px solid var(--border);
+  /* 不透明底:chrome 条不许透出宿主背景(暗色宿主会漏光)。 */
+  background: var(--bg-chrome);
+}
+
+.vnext-demo-bottom-row .spreadsheet-sheet-tabs {
+  flex: 1 1 auto;
+  min-width: 0;
+  border-top: none;
+}
+
+/* 状态栏与页签共处一条时,分隔线由容器统一画,避免双线。 */
+.vnext-demo-bottom-row .spreadsheet-status-bar {
+  border-top: none;
+}
+
+.vnext-demo-sidebar {
+  display: flex;
+  flex-direction: column;
+  flex: 0 0 220px;
+  min-height: 0;
+  border-left: 1px solid var(--border);
+  background: var(--bg-chrome);
+}
+
+.vnext-demo-sidebar .spreadsheet-status-bar--vertical {
+  flex: 0 0 auto;
+}
+
+.vnext-demo-sidebar .spreadsheet-history-timeline {
+  flex: 1 1 auto;
+  border-top: 1px solid var(--border);
+  min-height: 0;
+}
+
+/* Status-bar vertical orientation — used in the right sidebar */
+.spreadsheet-status-bar--vertical {
+  flex-direction: column;
+  align-items: stretch;
+  overflow-x: visible;
+  overflow-y: auto;
+  white-space: normal;
+  padding: 6px;
+  gap: 4px;
+}
+
+.spreadsheet-status-bar--vertical .spreadsheet-status-bar-item {
+  height: auto;
+  min-height: 22px;
+  padding: 2px 8px;
+  border-right: none;
+  border-bottom: 1px dashed var(--border);
+  justify-content: space-between;
+}
+
+.spreadsheet-status-bar--vertical .spreadsheet-status-bar-item:last-of-type {
+  border-bottom: none;
+}
+
+.spreadsheet-status-bar--vertical .spreadsheet-status-bar-aggregates {
+  flex-direction: column;
+  align-items: stretch;
+  height: auto;
+  gap: 2px;
+  padding: 4px 0;
+  border-right: none;
+  border-top: 1px solid var(--border);
+}
+
+.spreadsheet-status-bar--vertical .spreadsheet-status-bar-aggregate {
+  justify-content: space-between;
+  width: 100%;
+  height: 22px;
+}
+
+.spreadsheet-status-bar--vertical .spreadsheet-status-bar-view-modes {
+  flex-direction: column;
+  align-items: stretch;
+  height: auto;
+  gap: 2px;
+  padding: 4px 0;
+  border-right: none;
+  border-top: 1px solid var(--border);
+}
+
+.spreadsheet-status-bar--vertical .spreadsheet-status-bar-view-mode {
+  justify-content: flex-start;
+  height: 22px;
+  padding: 0 8px;
+}
+
+.spreadsheet-status-bar--vertical .spreadsheet-status-bar-mode-badge {
+  align-self: flex-start;
+  margin: 4px 0 0 0;
+}
+