@lijian-ui/dsh-file-manager 0.2.1 → 0.2.3

package/src/client/styles/tokens.module.css

@@ -1,83 +1,44 @@
 /**
- * The panel design system: FileManager's measured tokens (light/dark), scoped to
- * the plugin's own root elements so they never leak into the shell. Light
- * values are the defaults; the controller flips `data-filemgr-dark` on every
- * root element when the GUI theme is dark (the shell's theme service emits
- * theme/change; the controller mirrors it).
+ * The panel design system: FileManager's tokens, scoped to the plugin's own
+ * root elements so they never leak into the shell. The `--aion-*` names are
+ * kept as an alias layer that forwards to the official `--dsw-*` token system
+ * — dark-mode adaptation is handled by `--dsw-*` itself, so no per-theme
+ * override block is needed.
  *
- * The two rules at the top are intentionally GLOBAL (hence the :global()
- * wrapper): the token variables must be readable by DOM-created chrome — the
- * panel columns and drag handles are appended by the layout controller outside
- * any React subtree — so they live on :root. Every other rule below is still
- * scoped to `.filemgr-root` / the plugin's own class names.
- *
- * Values are the browser-measured ones from the research report (section 5.2)
- * — including the aou ramp reversal in dark mode and the missing --bg-7.
+ * Scoped to BODY, not :root: since the official theme rc.2 the `--dsw-*`
+ * semantic tokens live on `body` (not html), so an alias defined at :root
+ * would substitute var() against an undefined name and compute to the
+ * guaranteed-invalid value (""), killing every background that consumes it.
+ * On body the dsw tokens resolve and the aliases inherit to all visible
+ * elements — including the DOM-created chrome (panel columns, drag handles,
+ * the '@' picker portal) appended outside any React subtree.
  */
-:global(:root) {
-  --aion-bg-base: #ffffff;
-  --aion-bg-1: #f9fafb;
-  --aion-bg-2: #f2f3f5;
-  --aion-bg-3: #e5e6eb;
-  --aion-bg-hover: #f3f4f6;
-  --aion-bg-active: #e5e6eb;
-  --aion-text-primary: #000000;
-  --aion-text-secondary: #454d5f;
-  --aion-text-tertiary: #86909c;
-  --aion-text-disabled: #c9cdd4;
-  --aion-primary: #165dff;
-  --aion-success: #00b42a;
-  --aion-warning: #ff7d00;
-  --aion-danger: #f53f3f;
-  --aion-brand: #7583b2;
-  --aion-aou-1: #eff0f6;
-  --aion-aou-2: #e5e7f0;
-  --aion-aou-3: #d1d5e5;
-  --aion-aou-4: #b5bcd6;
-  --aion-aou-5: #97a0c5;
-  --aion-aou-6: #7583b2;
-  --aion-fill-2: #f2f3f5;
-  --aion-fill-3: #e5e6eb;
-  --aion-border-base: #e5e6eb;
-  --aion-overlay-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
-  --aion-font-sans: -apple-system, "system-ui", "Segoe UI", Roboto, "Helvetica Neue",
-    "PingFang SC", "Microsoft YaHei", sans-serif;
-  --aion-font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas,
-    "Liberation Mono", monospace;
-}
-
-/* The shell marks dark mode with body[data-ds-dark-theme]; the panel tokens
-   follow it with zero JS wiring (the theme service toggles the attribute).
-   Scoped to body so third-party themes cannot override them from :root.
-   Global by intent (tokens reach the DOM-added columns/handles); the dark
-   color-scheme is only asserted here so the host's own light default wins. */
-:global(body[data-ds-dark-theme]) {
-  --aion-bg-base: #0e0e0e;
-  --aion-bg-1: #1a1a1a;
-  --aion-bg-2: #262626;
-  --aion-bg-3: #333333;
-  --aion-bg-hover: #1f1f1f;
-  --aion-bg-active: #2d2d2d;
-  --aion-text-primary: #ffffff;
-  --aion-text-secondary: #ced3da;
-  --aion-text-tertiary: #737373;
-  --aion-text-disabled: #737373;
-  --aion-primary: #4d9fff;
-  --aion-success: #23c343;
-  --aion-warning: #ff9a2e;
-  --aion-danger: #f76560;
-  --aion-brand: #a1aacb;
-  --aion-aou-1: #2a2a2a;
-  --aion-aou-2: #3d4150;
-  --aion-aou-3: #525a77;
-  --aion-aou-4: #6a749b;
-  --aion-aou-5: #838fba;
-  --aion-aou-6: #a1aacb;
-  --aion-fill-2: rgba(255, 255, 255, 0.08);
-  --aion-fill-3: rgba(255, 255, 255, 0.12);
-  --aion-border-base: #333333;
-  --aion-overlay-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
-  color-scheme: dark;
+:global(body) {
+  --aion-bg-base: var(--dsw-alias-bg-base);
+  --aion-bg-1: var(--dsw-alias-bg-layer-1);
+  --aion-bg-2: var(--dsw-alias-bg-layer-2);
+  --aion-bg-3: var(--dsw-alias-bg-layer-3);
+  --aion-bg-4: var(--dsw-alias-label-dimmed);
+  --aion-bg-hover: var(--dsw-alias-interactive-bg-hover);
+  --aion-bg-active: var(--dsw-alias-interactive-bg-active);
+  --aion-text-primary: var(--dsw-alias-label-primary);
+  --aion-text-secondary: var(--dsw-alias-label-secondary);
+  --aion-text-tertiary: var(--dsw-alias-label-tertiary);
+  --aion-text-disabled: var(--dsw-alias-label-dimmed);
+  --aion-primary: var(--dsw-alias-state-business-primary);
+  --aion-success: var(--dsw-alias-state-success-primary);
+  --aion-warning: var(--dsw-alias-state-warn-primary);
+  --aion-danger: var(--dsw-alias-state-error-primary);
+  --aion-brand: var(--dsw-alias-brand-primary);
+  --aion-aou-2: var(--dsw-alias-bg-layer-2);
+  --aion-aou-6: var(--dsw-alias-brand-primary);
+  --aion-fill-2: var(--dsw-alias-interactive-bg-hover);
+  --aion-fill-3: var(--dsw-alias-interactive-bg-hover-solid);
+  --aion-border-base: var(--dsw-alias-border-l2);
+  --aion-overlay-shadow: var(--dsw-shadow-lv2);
+  /* 官方字体 token；mono 用本地栈 —— 当前主题版本尚无 --dsw-alias-font-family-mono */
+  --aion-font-sans: var(--dsw-font-family);
+  --aion-font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
 }
 
 
@@ -105,7 +66,7 @@
   border-radius: 4px;
 }
 :global(.filemgr-root ::-webkit-scrollbar-thumb:hover) {
-  background: var(--aion-bg-4, #c9cdd4);
+  background: var(--aion-bg-4);
 }
 :global(.filemgr-root ::-webkit-scrollbar-track) {
   background: transparent;
@@ -242,7 +203,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  background: rgba(0, 0, 0, 0.35);
+  background: var(--dsw-alias-bg-mask-1);
 }
 :global(.filemgr-dialog) {
   width: 400px;
@@ -293,28 +254,30 @@
   outline-offset: 2px;
 }
 :global(.filemgr-btn-primary) {
-  background: var(--aion-primary);
-  border-color: var(--aion-primary);
-  color: #ffffff;
+  background: var(--dsw-alias-button-primary-fill);
+  border-color: var(--dsw-alias-button-primary-fill);
+  color: var(--dsw-alias-label-primary-foreground);
 }
 :global(.filemgr-btn-primary:hover) {
-  background: var(--aion-primary);
-  opacity: 0.9;
+  background: var(--dsw-alias-button-primary-hover);
+  border-color: var(--dsw-alias-button-primary-hover);
 }
 :global(.filemgr-btn-primary:active) {
-  opacity: 0.75;
-  filter: saturate(0.9);
+  background: var(--dsw-alias-button-primary-hover);
+  border-color: var(--dsw-alias-button-primary-hover);
 }
 :global(.filemgr-btn-danger) {
   background: var(--aion-danger);
   border-color: var(--aion-danger);
-  color: #ffffff;
+  color: var(--dsw-alias-label-primary-foreground);
 }
 :global(.filemgr-btn-danger:hover) {
-  opacity: 0.9;
+  background: color-mix(in srgb, var(--aion-danger) 88%, black);
+  border-color: color-mix(in srgb, var(--aion-danger) 88%, black);
 }
 :global(.filemgr-btn-danger:active) {
-  opacity: 0.75;
+  background: color-mix(in srgb, var(--aion-danger) 78%, black);
+  border-color: color-mix(in srgb, var(--aion-danger) 78%, black);
 }
 
 /* Context menu (tab right-click / tree right-click). */

package/src/client/styles/chip.module.css

@@ -1,38 +0,0 @@
-/**
- * Global restyle of the shell's reference chips to the file-reference look
- * (the user's screenshot): a muted rounded pill with a green `</>` code
- * glyph. The shell renders every U+FFFC chip with `data-decoration="chip"`
- * (InputBar), so this file overrides its default blue tint through that
- * attribute — the hash-scoped `.chip` class stays untouched and alignment
- * (the U+FFFC advance cell) is preserved because the glyph comes from the
- * label cell's ::before, not the placeholder cell's.
- *
- * Side effect: chips of other sources (skills, subagents) pick up the same
- * pill look — a uniform, muted family, which the shell's default blue
- * already intended.
- * @module dsh-filemgr/client/styles/chip
- */
-
-:global([data-decoration="chip"]) {
-  background: rgba(15, 23, 42, 0.06);
-  border-radius: 6px;
-}
-
-:global(body[data-ds-dark-theme] [data-decoration="chip"]) {
-  background: rgba(255, 255, 255, 0.1);
-}
-
-/* The label cell keeps the shell's default 0.72 compensated scale (no
-   override here) — the pill text renders at the composer's native size. */
-
-/* The green `</>` glyph, drawn inside the label cell (absolute-positioned by
-   the shell, so this never shifts the placeholder advance). */
-:global([data-decoration="chip"] > span::before) {
-  content: "</>";
-  color: var(--aion-success, #16a34a);
-  font-family: var(--aion-font-mono, ui-monospace, Menlo, Consolas, monospace);
-  font-size: 0.85em;
-  font-weight: 700;
-  margin-right: 4px;
-  letter-spacing: -0.5px;
-}