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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@lijian-ui/dsh-file-manager",
   "description": "DSH web GUI right-panel system: a pixel-faithful re-implementation of FileManager's Explorer + Preview columns (file tree, filename search, git changes, multi-tab preview of 10+ formats) driven by real host-side fs/git services, hot-pluggable via a profile bundle without any dsh source changes",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "type": "module",
   "main": "lib/index.js",
   "types": "lib/types/index.d.ts",

package/src/client/DockItem.tsx

@@ -14,7 +14,7 @@ function ensureStyle(): void {
   if (document.getElementById(STYLE_ID) !== null) return
   const tag = document.createElement('style')
   tag.id = STYLE_ID
-  tag.textContent = '.dsh-dock-item{width:32px;height:32px;border:none;border-radius:9999px;background:#000;color:#fff;cursor:pointer;position:relative;transition:transform .15s ease,background .18s ease;display:inline-flex;align-items:center;justify-content:center}.dsh-dock-item:hover{transform:scale(1.15);background:#1a1a1a}.dsh-dock-item-active{background:var(--aion-primary,#6ea0ff)}.dsh-dock-tooltip{position:absolute;top:calc(100% + 6px);left:50%;transform:translateX(-50%);padding:2px 8px;font-size:12px;line-height:1.4;white-space:nowrap;color:#fff;background:rgba(20,20,30,.9);border:1px solid rgba(255,255,255,.12);border-radius:6px;opacity:0;pointer-events:none;transition:opacity .15s}.dsh-dock-item:hover .dsh-dock-tooltip{opacity:1}'
+  tag.textContent = '.dsh-dock-item{width:32px;height:32px;border:none;border-radius:9999px;background:var(--dsw-alias-bg-layer-2);color:var(--dsw-alias-label-primary);cursor:pointer;position:relative;transition:transform .15s ease,background .18s ease;display:inline-flex;align-items:center;justify-content:center}.dsh-dock-item:hover{transform:scale(1.15);background:var(--dsw-alias-interactive-bg-hover)}.dsh-dock-item-active{background:var(--dsw-alias-state-business-primary)}.dsh-dock-tooltip{position:absolute;top:calc(100% + 6px);left:50%;transform:translateX(-50%);padding:2px 8px;font-size:12px;line-height:1.4;white-space:nowrap;color:var(--dsw-alias-label-primary);background:var(--dsw-alias-bg-layer-3);border:1px solid var(--dsw-alias-border-l2);border-radius:6px;opacity:0;pointer-events:none;transition:opacity .15s}.dsh-dock-item:hover .dsh-dock-tooltip{opacity:1}'
   document.head.appendChild(tag)
 }
 

package/src/client/components/ExplorerPanel.tsx

@@ -267,7 +267,7 @@ function SearchArea({
       <div className={explorerCss.searchArea}>
         <div
           className={`${explorerCss.searchBox}${searchFocus ? ` ${explorerCss.searchAreaFocus}` : ''}`}
-          style={{ borderColor: searchFocus ? 'var(--aion-primary)' : undefined }}
+          style={{ borderColor: searchFocus ? 'var(--dsw-alias-state-business-primary)' : undefined }}
         >
           <span className={explorerCss.searchIcon}><SearchIcon size={14} /></span>
           <input

package/src/client/components/ScmPanel.tsx

@@ -130,7 +130,7 @@ export function ScmPanel({ stores }: { stores: PanelStores }): JSX.Element {
           </span>
           <span className={scmCss.sectionTitle}>{t('scm.changes')}</span>
           {status.branch !== '' && (
-            <span className={scmCss.branchName} style={{ fontSize: 11, color: 'var(--aion-text-tertiary)', display: 'flex', alignItems: 'center', gap: 4 }}>
+            <span className={scmCss.branchName} style={{ fontSize: 11, color: 'var(--dsw-alias-label-tertiary)', display: 'flex', alignItems: 'center', gap: 4 }}>
               <BranchIcon size={12} />
               {status.branch}
             </span>
@@ -161,7 +161,7 @@ export function ScmPanel({ stores }: { stores: PanelStores }): JSX.Element {
               type="button"
               className={scmCss.sectionAction}
               title={t('scm.viewList')}
-              style={{ color: state.viewMode === 'list' ? 'var(--aion-brand)' : undefined }}
+              style={{ color: state.viewMode === 'list' ? 'var(--dsw-alias-brand-primary)' : undefined }}
               onClick={() => scm.setViewMode('list')}
             >
               <ListIcon size={13} />
@@ -170,7 +170,7 @@ export function ScmPanel({ stores }: { stores: PanelStores }): JSX.Element {
               type="button"
               className={scmCss.sectionAction}
               title={t('scm.viewTree')}
-              style={{ color: state.viewMode === 'tree' ? 'var(--aion-brand)' : undefined }}
+              style={{ color: state.viewMode === 'tree' ? 'var(--dsw-alias-brand-primary)' : undefined }}
               onClick={() => scm.setViewMode('tree')}
             >
               <TreeIcon size={13} />
@@ -359,7 +359,7 @@ function DirNode({
           <ChevronRightIcon size={13} />
         </span>
         <FileTypeIcon name={label} isDir expanded={expanded} />
-        <span style={{ fontSize: 13, color: 'var(--aion-text-primary)' }}>{label}</span>
+        <span style={{ fontSize: 13, color: 'var(--dsw-alias-label-primary)' }}>{label}</span>
       </div>
       {expanded &&
         rows.map((row) => (

package/src/client/layout.ts

@@ -165,7 +165,7 @@ export class PanelLayoutController {
     previewCol.style.overflow = 'hidden'
     previewCol.style.display = 'flex'
     previewCol.style.flexDirection = 'column'
-    previewCol.style.borderLeft = '1px solid var(--aion-bg-3, #e5e6eb)'
+    previewCol.style.borderLeft = '1px solid var(--dsw-alias-bg-layer-3)'
 
     const explorerCol = document.createElement('div')
     explorerCol.dataset.filemgrExplorerCol = ''
@@ -174,7 +174,7 @@ export class PanelLayoutController {
     explorerCol.style.overflow = 'hidden'
     explorerCol.style.display = 'flex'
     explorerCol.style.flexDirection = 'column'
-    explorerCol.style.borderLeft = '1px solid var(--aion-bg-3, #e5e6eb)'
+    explorerCol.style.borderLeft = '1px solid var(--dsw-alias-bg-layer-3)'
 
     frame.appendChild(previewCol)
     frame.appendChild(explorerCol)

package/src/client/preview/content.tsx

@@ -246,7 +246,7 @@ function HtmlViewer({
 }): JSX.Element {
   const srcDoc = useMemo(() => {
     // Base styles so the embedded page inherits the theme background.
-    return `<!doctype html><html><head><meta charset="utf-8"><style>body{margin:0;font-family:-apple-system,"system-ui","Segoe UI",Roboto,"PingFang SC",sans-serif;color:#1d2129}@media (prefers-color-scheme:dark){body{color:rgba(255,255,255,0.9)}}</style></head><body>${content}</body></html>`
+    return `<!doctype html><html><head><meta charset="utf-8"><style>body{margin:0;font-family:-apple-system,"system-ui","Segoe UI",Roboto,"PingFang SC",sans-serif;color:var(--dsw-alias-label-primary)}@media (prefers-color-scheme:dark){body{color:var(--dsw-alias-label-secondary)}}</style></head><body>${content}</body></html>`
   }, [content])
   if (sourceMode && onContentChange !== undefined) {
     return (

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

@@ -29,8 +29,8 @@
    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);
+  color: var(--aion-success);
+  font-family: var(--aion-font-mono);
   font-size: 0.85em;
   font-weight: 700;
   margin-right: 4px;

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

@@ -1,83 +1,42 @@
 /**
- * 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.
  */
 :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-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);
   --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;
+  --aion-font-mono: var(--dsw-alias-font-family-mono);
 }
 
 
@@ -105,7 +64,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;