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

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) dol
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,38 @@
-# Temporary Holding Version
+# @einfach-excel/spreadsheet-ui-styles
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+Framework-neutral CSS for Einfach spreadsheet surfaces. This package has no
+runtime JavaScript and no framework dependency.
+
+## Use
+
+Load the shared surface layer once for a spreadsheet implementation:
+
+```ts
+import '@einfach-excel/spreadsheet-ui-styles/styles.css'
+```
+
+Feature styles are exported individually so adapters can preserve their own
+lazy-loading lifecycle:
+
+```ts
+import '@einfach-excel/spreadsheet-ui-styles/features/find-replace-dialog.css'
+```
+
+The selectors describe a DOM contract rather than a component API. Consumers
+must render the matching markup and may provide the documented CSS custom
+properties from the shared style layer.
+
+## Theming(vnext chrome)
+
+`styles/chrome-tokens.css` 是 vnext 皮肤唯一的取色/尺寸来源(Excel for web
+口径)。规则:
+
+- chrome 样式文件里**禁止裸色值** —— 缺 token 就先在 chrome-tokens.css 里加;
+- 每个 chrome 面板必须铺**不透明**底色 token,不许透出宿主背景
+  (透明拼缝在暗色宿主下会漏光);
+- `*-text` 变体是文本安全色(AA ≥4.5:1),同名非 text 色只用于边框/填充。
+
+**暗色皮肤**:宿主在组件任意祖先上放 `data-spreadsheet-theme="dark"` 即
+整体换肤(变量继承,零组件配合)。excel-site 的 demo 岛把
+`<html data-theme>` 镜像到岛根;solid-excel 的 e2e demo 壳吃 `?theme=dark`。
+对齐/对比度的回归门禁在 `excel/solid-excel/e2e/visual-chrome/`。

package/features/comment-thread.css

@@ -0,0 +1,169 @@
+/* Anchored comment surface. dialog-skin.css owns modal shells, so this file
+ * deliberately restores the cell-adjacent geometry for the comment workflow. */
+
+:is(.vnext-demo, .demo-page) [role='dialog'].spreadsheet-comment-thread.spreadsheet-comment-thread {
+  position: fixed;
+  z-index: 80;
+  box-sizing: border-box;
+  width: min(360px, calc(100vw - 24px));
+  min-width: 0;
+  max-height: calc(100vh - 24px);
+  padding: 0;
+  transform: none;
+  overflow: hidden;
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  background: var(--bg-surface);
+  box-shadow: var(--shadow-popover);
+  color: var(--text-default);
+  font: 13px/1.4 var(--excel-font);
+}
+
+.comment-thread-header,
+.comment-thread-actions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.comment-thread-header {
+  position: relative;
+  justify-content: space-between;
+}
+
+.comment-thread-header h2 {
+  margin: 0;
+  font-size: 16px;
+}
+
+.comment-thread-cell {
+  color: var(--text-muted);
+  font-size: 12px;
+}
+
+.comment-thread-body {
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  gap: 6px;
+  padding: 14px 16px 16px;
+  overflow: auto;
+  background: var(--bg-surface);
+}
+
+.comment-thread-compose-label {
+  display: block;
+  color: var(--text-default);
+  font-size: 13px;
+  font-weight: 600;
+}
+
+.spreadsheet-comment-thread-textarea {
+  box-sizing: border-box;
+  width: 100%;
+  min-height: 96px;
+  resize: vertical;
+  padding: 8px;
+  border: 1px solid var(--border-strong);
+  border-radius: var(--control-radius);
+  background: var(--bg-surface);
+  color: var(--text-default);
+  font: inherit;
+}
+
+.spreadsheet-comment-thread-textarea:focus-visible {
+  border-color: var(--office-blue);
+  outline: 2px solid var(--office-blue);
+  outline-offset: 1px;
+}
+
+.spreadsheet-comment-thread-textarea:disabled {
+  border-color: var(--border);
+  background: var(--bg-chrome);
+  color: var(--text-disabled);
+  cursor: not-allowed;
+}
+
+.comment-thread-status {
+  margin-top: 4px;
+  padding: 8px 10px;
+  border: 1px solid var(--error-text);
+  border-radius: var(--control-radius);
+  background: var(--error-bg);
+  color: var(--error-text);
+  font-size: 12px;
+}
+
+.comment-thread-status p {
+  margin: 0;
+}
+
+.comment-thread-status p + p {
+  margin-top: 4px;
+}
+
+.comment-thread-actions {
+  justify-content: flex-end;
+  flex-wrap: wrap;
+}
+
+.comment-thread-actions button,
+.comment-thread-header button {
+  box-sizing: border-box;
+  min-width: 72px;
+  height: var(--control-h);
+  padding: 0 12px;
+  cursor: pointer;
+}
+
+.comment-thread-header .dialog-close-x {
+  min-width: var(--control-h);
+  padding: 0;
+}
+
+.comment-thread-actions button:hover:not(:disabled) {
+  border-color: var(--border-strong);
+  background: var(--hover);
+}
+
+.comment-thread-actions .comment-post-button:hover:not(:disabled) {
+  border-color: var(--dialog-primary-hover);
+  background: var(--dialog-primary-hover);
+}
+
+.comment-thread-actions .comment-post-button:active:not(:disabled) {
+  border-color: var(--dialog-primary-active);
+  background: var(--dialog-primary-active);
+}
+
+.comment-thread-actions button:disabled {
+  border-color: var(--border);
+  background: var(--bg-chrome);
+  color: var(--text-disabled);
+  cursor: not-allowed;
+}
+
+.spreadsheet-comment-thread[data-status='PendingPublished'] .comment-post-button::before {
+  display: inline-block;
+  width: 10px;
+  height: 10px;
+  margin-right: 6px;
+  animation: comment-thread-spin 800ms linear infinite;
+  border: 1px solid var(--text-on-accent-soft);
+  border-top-color: var(--text-on-accent);
+  border-radius: 50%;
+  content: '';
+  vertical-align: -1px;
+}
+
+@keyframes comment-thread-spin {
+  to {
+    transform: rotate(1turn);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .spreadsheet-comment-thread[data-status='PendingPublished'] .comment-post-button::before {
+    animation: none;
+  }
+}

package/features/comment-thread.css.d.ts

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

package/features/conditional-format-dialog.css

@@ -0,0 +1,254 @@
+/* Conditional Formatting owns this interior; dialog-skin.css owns the modal shell. */
+
+.conditional-format-dialog {
+  width: min(560px, calc(100vw - 32px));
+  min-height: 440px;
+}
+
+.conditional-format-dialog .cf-dialog-header {
+  justify-content: space-between;
+}
+
+.conditional-format-dialog .cf-dialog-title {
+  font-size: 14px;
+  font-weight: 600;
+  user-select: none;
+}
+
+.conditional-format-dialog .cf-dialog-body {
+  display: grid;
+  flex: 1 1 auto;
+  grid-template-rows: auto minmax(0, 1fr);
+  gap: 16px;
+  min-height: 0;
+  padding: 16px;
+  overflow-y: auto;
+  background: var(--bg-surface);
+}
+
+.conditional-format-dialog[aria-busy='true'] .cf-dialog-body {
+  cursor: progress;
+}
+
+.conditional-format-dialog[aria-busy='true'] .cf-form {
+  opacity: 0.72;
+}
+
+.conditional-format-dialog .cf-rules-section {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  min-width: 0;
+}
+
+.conditional-format-dialog .cf-section-label,
+.conditional-format-dialog .cf-form-label {
+  color: var(--text-muted);
+  font-size: 12px;
+  font-weight: 600;
+}
+
+.conditional-format-dialog .cf-rule-list {
+  min-height: 64px;
+  max-height: 112px;
+  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;
+}
+
+.conditional-format-dialog .cf-rule-list[aria-busy='true'] {
+  border-color: var(--office-blue);
+}
+
+[role='dialog'].conditional-format-dialog .cf-rules-section .cf-rule-select {
+  position: relative;
+  display: flex;
+  align-items: center;
+  width: 100%;
+  padding: 0 8px 0 22px;
+  overflow: hidden;
+  border: 0;
+  background: transparent;
+  color: var(--text-default);
+  cursor: pointer;
+  font: inherit;
+  font-size: 12px;
+  text-align: left;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+[role='dialog'].conditional-format-dialog .cf-rules-section .cf-rule-select::before {
+  position: absolute;
+  left: 8px;
+  width: 8px;
+  height: 8px;
+  border-radius: var(--control-radius);
+  background: var(--excel-green);
+  content: '';
+}
+
+[role='dialog'].conditional-format-dialog .cf-rules-section .cf-rule-select:hover:not(:disabled) {
+  background: var(--hover);
+}
+
+[role='dialog'].conditional-format-dialog .cf-rules-section .cf-rule-select[aria-current='true'] {
+  background: var(--select-bg);
+  color: var(--excel-green-text);
+  font-weight: 600;
+}
+
+[role='dialog'].conditional-format-dialog .cf-rules-section .cf-rule-select:disabled {
+  color: var(--text-disabled);
+  cursor: default;
+}
+
+.conditional-format-dialog .cf-form {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  min-width: 0;
+  padding-top: 14px;
+  border-top: 1px solid var(--border);
+  transition: opacity 120ms ease;
+}
+
+.conditional-format-dialog .cf-form-row {
+  display: grid;
+  grid-template-columns: 96px minmax(0, 1fr) auto;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+}
+
+[role='dialog'].conditional-format-dialog .cf-form .cf-form-row > :is(input, select) {
+  width: 100%;
+  min-width: 0;
+  padding: 0 8px;
+}
+
+[role='dialog'].conditional-format-dialog .cf-form .cf-form-row > input[type='checkbox'] {
+  width: auto;
+  accent-color: var(--excel-green);
+}
+
+[role='dialog'].conditional-format-dialog .cf-form .cf-form-row > button {
+  min-width: 96px;
+  padding: 0 10px;
+  cursor: pointer;
+}
+
+[role='dialog'].conditional-format-dialog .cf-form .cf-form-row > button:hover:not(:disabled) {
+  border-color: var(--border-strong);
+  background: var(--hover);
+}
+
+[role='dialog'].conditional-format-dialog .cf-form :is(input, select, button):disabled {
+  color: var(--text-disabled);
+  cursor: default;
+}
+
+[role='dialog'].conditional-format-dialog .cf-form :is(input, select):disabled {
+  background: var(--bg-chrome);
+}
+
+.conditional-format-dialog .cf-rule-preview {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  min-height: 42px;
+  padding: 8px 10px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  background: var(--bg-chrome-light);
+}
+
+.conditional-format-dialog .cf-rule-preview-swatch {
+  flex: 0 0 auto;
+  width: 44px;
+  height: 20px;
+  border: 1px solid var(--border-strong);
+  border-radius: var(--control-radius);
+  background: var(--select-bg);
+}
+
+.conditional-format-dialog .cf-rule-preview[data-rule-kind='formula'] .cf-rule-preview-swatch {
+  background: var(--error-bg);
+}
+
+.conditional-format-dialog
+  .cf-rule-preview:is([data-rule-kind='data-bar'], [data-rule-kind='top-bottom'])
+  .cf-rule-preview-swatch {
+  background: linear-gradient(to right, var(--bg-surface), var(--office-blue));
+}
+
+.conditional-format-dialog .cf-rule-preview[data-rule-kind='color-scale'] .cf-rule-preview-swatch {
+  background: linear-gradient(to right, var(--error-text), var(--office-blue), var(--excel-green));
+}
+
+.conditional-format-dialog .cf-rule-preview-text {
+  color: var(--text-muted);
+  font-size: 12px;
+}
+
+.conditional-format-dialog .cf-error {
+  margin: 0;
+  padding: 8px 16px;
+  border-top: 1px solid var(--error-text);
+  background: var(--error-bg);
+  color: var(--error-text);
+  font-size: 12px;
+}
+
+.conditional-format-dialog .cf-dialog-footer {
+  min-height: 48px;
+}
+
+.conditional-format-dialog .cf-error-spacer {
+  flex: 1 1 auto;
+}
+
+[role='dialog'].conditional-format-dialog .cf-dialog-footer button {
+  min-width: 72px;
+  padding: 0 14px;
+  cursor: pointer;
+}
+
+[role='dialog'].conditional-format-dialog .cf-dialog-footer button:hover:not(:disabled) {
+  border-color: var(--border-strong);
+  background: var(--hover);
+}
+
+[role='dialog'].conditional-format-dialog .cf-dialog-footer button[data-variant='danger'] {
+  border-color: var(--error-text);
+  background: var(--bg-surface);
+  color: var(--error-text);
+}
+
+[role='dialog'].conditional-format-dialog
+  .cf-dialog-footer
+  button[data-variant='danger']:hover:not(:disabled) {
+  background: var(--error-bg);
+}
+
+[role='dialog'].conditional-format-dialog .cf-dialog-footer button:disabled {
+  border-color: var(--border);
+  background: var(--bg-chrome);
+  color: var(--text-disabled);
+  cursor: default;
+}
+
+@media (max-width: 600px) {
+  .conditional-format-dialog .cf-form-row {
+    grid-template-columns: 80px minmax(0, 1fr);
+  }
+
+  .conditional-format-dialog .cf-form-row > button {
+    grid-column: 2;
+    justify-self: start;
+  }
+}

package/features/conditional-format-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('./conditional-format-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/conditional-format-fields.css

@@ -0,0 +1,10 @@
+.cf-range-fields {
+  flex: 1 1 auto;
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 6px;
+}
+
+[role='dialog'].conditional-format-dialog .cf-range-fields input {
+  min-width: 0;
+}

package/features/conditional-format-fields.css.d.ts

@@ -0,0 +1,2 @@
+declare const css: unknown
+export default css

package/features/data-validation-dialog.css

@@ -0,0 +1,197 @@
+/* Data Validation owns its rule editor interior; dialog-skin.css owns the modal shell. */
+
+.validation-dialog {
+  width: min(520px, calc(100vw - 32px));
+  min-height: 360px;
+}
+
+.validation-dialog .dv-dialog-header {
+  justify-content: space-between;
+}
+
+.validation-dialog .dv-dialog-title {
+  margin: 0;
+  color: var(--text-default);
+}
+
+.validation-dialog .dv-dialog-body {
+  display: flex;
+  min-height: 0;
+  flex: 1 1 auto;
+  flex-direction: column;
+  gap: 14px;
+  padding: 16px;
+  overflow-y: auto;
+  background: var(--bg-surface);
+}
+
+.validation-dialog[aria-busy='true'] .dv-dialog-body {
+  cursor: progress;
+}
+
+.validation-dialog[aria-busy='true'] .dv-rule-form {
+  opacity: 0.72;
+}
+
+.validation-dialog .dv-range-row {
+  display: grid;
+  grid-template-columns: 88px minmax(0, 1fr);
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+}
+
+.validation-dialog .dv-range-label,
+.validation-dialog .dv-form-row > label {
+  color: var(--text-muted);
+  font-size: 12px;
+  font-weight: 600;
+}
+
+.validation-dialog .validation-range {
+  display: flex;
+  min-width: 0;
+  align-items: center;
+  gap: 7px;
+  padding: 6px 9px;
+  overflow: hidden;
+  border: 1px solid var(--excel-green);
+  border-radius: var(--control-radius);
+  background: var(--select-bg);
+  color: var(--excel-green-text);
+  font-size: 12px;
+  font-weight: 600;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.validation-dialog .validation-range::before {
+  width: 7px;
+  height: 7px;
+  flex: 0 0 auto;
+  border-radius: var(--radius);
+  background: var(--excel-green);
+  content: '';
+}
+
+.validation-dialog .dv-rule-form {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  min-width: 0;
+  padding-top: 14px;
+  border-top: 1px solid var(--border);
+  transition: opacity 120ms ease;
+}
+
+.validation-dialog .dv-form-row {
+  display: grid;
+  grid-template-columns: 88px minmax(0, 1fr);
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+}
+
+[role='dialog'].validation-dialog .dv-dialog-body :is(select, input) {
+  width: 100%;
+  min-width: 0;
+  padding: 0 8px;
+}
+
+[role='dialog'].validation-dialog .dv-dialog-body :is(select, input):hover:not(:disabled) {
+  border-color: var(--border-strong);
+}
+
+[role='dialog'].validation-dialog .dv-dialog-body :is(select, input):disabled {
+  background: var(--bg-chrome);
+  color: var(--text-disabled);
+  cursor: default;
+}
+
+.validation-dialog .dv-range-pair {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 8px;
+  min-width: 0;
+}
+
+.validation-dialog .dv-error {
+  margin: 0;
+  padding: 8px 16px;
+  border-top: 1px solid var(--error-text);
+  background: var(--error-bg);
+  color: var(--error-text);
+  font-size: 12px;
+}
+
+.validation-dialog .dv-dialog-footer {
+  min-height: 48px;
+}
+
+[role='dialog'].validation-dialog .dv-dialog-footer button {
+  min-width: 72px;
+  padding: 0 12px;
+  cursor: pointer;
+}
+
+[role='dialog'].validation-dialog .dv-dialog-footer button:hover:not(:disabled) {
+  border-color: var(--border-strong);
+  background: var(--hover);
+}
+
+[role='dialog'].validation-dialog .dv-dialog-footer button[data-variant='danger'] {
+  border-color: var(--error-text);
+  background: var(--bg-surface);
+  color: var(--error-text);
+}
+
+[role='dialog'].validation-dialog
+  .dv-dialog-footer
+  button[data-variant='danger']:hover:not(:disabled) {
+  background: var(--error-bg);
+}
+
+[role='dialog'].validation-dialog .dv-dialog-footer button:disabled {
+  border-color: var(--border);
+  background: var(--bg-chrome);
+  color: var(--text-disabled);
+  cursor: default;
+}
+
+.validation-dialog .dv-footer-status {
+  display: inline-flex;
+  flex: 1 1 auto;
+  align-items: center;
+  gap: 6px;
+  color: var(--text-muted);
+  font-size: 12px;
+}
+
+.validation-dialog .dv-pending-indicator {
+  width: 10px;
+  height: 10px;
+  border: 2px solid var(--border);
+  border-top-color: var(--office-blue);
+  border-radius: 50%;
+  animation: dv-pending-spin 800ms linear infinite;
+}
+
+@keyframes dv-pending-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@media (max-width: 520px) {
+  .validation-dialog .dv-range-row,
+  .validation-dialog .dv-form-row {
+    grid-template-columns: minmax(0, 1fr);
+    gap: 5px;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .validation-dialog .dv-pending-indicator {
+    animation: none;
+  }
+}