@huyooo/file-explorer-frontend-react 0.4.14 → 0.4.15

package/src/components/ProgressDialog.css

@@ -1,7 +1,7 @@
 .progress-dialog-overlay {
   position: fixed;
   inset: 0;
-  background: rgba(0, 0, 0, 0.5);
+  background: var(--huyooo-overlay);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -9,9 +9,9 @@
 }
 
 .progress-dialog {
-  background: white;
+  background: var(--huyooo-panel-bg);
   border-radius: 12px;
-  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
+  box-shadow: var(--huyooo-shadow-lg);
   width: 380px;
   max-width: 90vw;
   overflow: hidden;
@@ -24,7 +24,7 @@
   align-items: center;
   justify-content: space-between;
   padding: 16px 20px;
-  border-bottom: 1px solid rgb(229, 231, 233);
+  border-bottom: 1px solid var(--huyooo-border);
 }
 
 .progress-dialog-title {
@@ -33,7 +33,7 @@
   gap: 10px;
   font-weight: 600;
   font-size: 16px;
-  color: rgb(17, 24, 39);
+  color: var(--huyooo-text);
 }
 
 .progress-dialog-close {
@@ -41,7 +41,7 @@
   border: none;
   padding: 4px;
   cursor: pointer;
-  color: rgb(107, 114, 128);
+  color: var(--huyooo-text-muted);
   border-radius: 4px;
   display: flex;
   align-items: center;
@@ -49,8 +49,8 @@
 }
 
 .progress-dialog-close:hover {
-  background: rgb(243, 244, 246);
-  color: rgb(55, 65, 81);
+  background: var(--huyooo-muted);
+  color: var(--huyooo-text);
 }
 
 .progress-dialog-content {
@@ -62,7 +62,7 @@
 
 .progress-dialog-status {
   font-size: 14px;
-  color: rgb(55, 65, 81);
+  color: var(--huyooo-text);
   text-align: center;
 }
 
@@ -75,14 +75,14 @@
 .progress-dialog-bar {
   flex: 1;
   height: 8px;
-  background: rgb(229, 231, 233);
+  background: var(--huyooo-border);
   border-radius: 4px;
   overflow: hidden;
 }
 
 .progress-dialog-bar-fill {
   height: 100%;
-  background: rgb(59, 130, 246);
+  background: var(--huyooo-primary);
   border-radius: 4px;
   transition: width 0.3s ease;
 }
@@ -90,14 +90,14 @@
 .progress-dialog-percent {
   font-size: 13px;
   font-weight: 500;
-  color: rgb(55, 65, 81);
+  color: var(--huyooo-text);
   min-width: 40px;
   text-align: right;
 }
 
 .progress-dialog-current-file {
   font-size: 12px;
-  color: rgb(107, 114, 128);
+  color: var(--huyooo-text-muted);
   text-align: center;
   white-space: nowrap;
   overflow: hidden;
@@ -106,23 +106,23 @@
 
 .progress-dialog-count {
   font-size: 12px;
-  color: rgb(107, 114, 128);
+  color: var(--huyooo-text-muted);
   text-align: center;
 }
 
 .progress-dialog-error {
   padding: 12px;
-  background: rgb(254, 242, 242);
-  border: 1px solid rgb(254, 202, 202);
+  background: var(--huyooo-danger-bg);
+  border: 1px solid var(--huyooo-danger-border);
   border-radius: 6px;
-  color: rgb(185, 28, 28);
+  color: var(--huyooo-danger);
   font-size: 13px;
 }
 
 .progress-dialog-output {
   padding: 12px;
-  background: rgb(240, 253, 244);
-  border: 1px solid rgb(187, 247, 208);
+  background: var(--huyooo-success-bg);
+  border: 1px solid var(--huyooo-success-border);
   border-radius: 6px;
   font-size: 12px;
   display: flex;
@@ -131,12 +131,12 @@
 }
 
 .progress-dialog-output-label {
-  color: rgb(22, 101, 52);
+  color: var(--huyooo-success);
   font-weight: 500;
 }
 
 .progress-dialog-output-path {
-  color: rgb(21, 128, 61);
+  color: var(--huyooo-success);
   word-break: break-all;
 }
 
@@ -145,7 +145,7 @@
   justify-content: flex-end;
   gap: 12px;
   padding: 16px 20px;
-  border-top: 1px solid rgb(229, 231, 233);
+  border-top: 1px solid var(--huyooo-border);
 }
 
 .progress-dialog-btn {
@@ -161,39 +161,39 @@
 }
 
 .progress-dialog-btn-cancel {
-  background: white;
-  border: 1px solid rgb(209, 213, 219);
-  color: rgb(55, 65, 81);
+  background: var(--huyooo-surface-2);
+  border: 1px solid var(--huyooo-border);
+  color: var(--huyooo-text);
 }
 
 .progress-dialog-btn-cancel:hover {
-  background: rgb(249, 250, 251);
+  background: var(--huyooo-surface);
 }
 
 .progress-dialog-btn-folder {
-  background: rgb(240, 253, 244);
-  border: 1px solid rgb(187, 247, 208);
-  color: rgb(22, 101, 52);
+  background: var(--huyooo-success-bg);
+  border: 1px solid var(--huyooo-success-border);
+  color: var(--huyooo-success);
 }
 
 .progress-dialog-btn-folder:hover {
-  background: rgb(220, 252, 231);
+  background: color-mix(in srgb, var(--huyooo-success-bg) 75%, var(--huyooo-success) 25%);
 }
 
 .progress-dialog-btn-close {
-  background: rgb(59, 130, 246);
-  border: 1px solid rgb(59, 130, 246);
+  background: var(--huyooo-primary);
+  border: 1px solid var(--huyooo-primary);
   color: white;
 }
 
 .progress-dialog-btn-close:hover {
-  background: rgb(37, 99, 235);
+  background: var(--huyooo-primary-hover, var(--huyooo-primary));
 }
 
 /* 旋转动画 */
 .progress-dialog-icon-spin {
   animation: spin 1s linear infinite;
-  color: rgb(59, 130, 246);
+  color: var(--huyooo-primary);
 }
 
 @keyframes spin {
@@ -202,10 +202,10 @@
 }
 
 .progress-dialog-icon-success {
-  color: rgb(34, 197, 94);
+  color: var(--huyooo-success);
 }
 
 .progress-dialog-icon-error {
-  color: rgb(239, 68, 68);
+  color: var(--huyooo-danger);
 }
 

package/src/components/SortIndicator.css

@@ -2,6 +2,6 @@
   margin-left: 4px;
   display: inline-flex;
   align-items: center;
-  color: rgb(59, 130, 246);
+  color: var(--huyooo-primary);
 }
 

package/src/components/StatusBar.css

@@ -1,13 +1,13 @@
 .file-status-bar {
   height: 1.5rem;
-  background-color: rgb(249, 250, 251);
-  border-top: 1px solid rgb(229, 231, 233);
+  background-color: var(--huyooo-surface-2);
+  border-top: 1px solid var(--huyooo-border);
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 0 8px;
   font-size: 10px;
-  color: rgb(107, 114, 128);
+  color: var(--huyooo-text-muted);
   user-select: none;
   flex-shrink: 0;
   z-index: 20;

package/src/components/Toolbar.css

@@ -1,8 +1,8 @@
 .file-toolbar {
   height: 3rem;
-  background: rgba(249, 250, 251, 0.9);
+  background: var(--huyooo-surface);
   backdrop-filter: blur(12px);
-  border-bottom: 1px solid rgb(229, 231, 233);
+  border-bottom: 1px solid var(--huyooo-border);
   display: flex;
   align-items: center;
   padding: 0 1rem;
@@ -19,8 +19,8 @@
 .file-toolbar-nav {
   display: flex;
   align-items: center;
-  color: rgb(75, 85, 99);
-  background: rgba(229, 231, 233, 0.5);
+  color: var(--huyooo-text-muted);
+  background: var(--huyooo-muted);
   border-radius: 0.5rem;
   padding: 0.125rem;
   flex-shrink: 0;
@@ -37,22 +37,22 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  color: rgb(31, 41, 55);
+  color: var(--huyooo-text);
 }
 
 .file-toolbar-button:hover:not(:disabled) {
-  background: rgb(209, 213, 219);
+  background: var(--huyooo-muted-hover);
 }
 
 .file-toolbar-button:disabled {
-  color: rgb(156, 163, 175);
+  color: var(--huyooo-text-disabled);
   cursor: default;
 }
 
 .file-toolbar-button--active {
-  background: white;
-  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
-  color: rgb(31, 41, 55);
+  background: var(--huyooo-surface-2);
+  box-shadow: var(--huyooo-shadow-sm);
+  color: var(--huyooo-text);
 }
 
 .file-toolbar-breadcrumb {
@@ -95,16 +95,16 @@
   left: 0.625rem;
   top: 50%;
   transform: translateY(-50%);
-  color: rgb(156, 163, 175);
+  color: var(--huyooo-text-disabled);
   transition: color 200ms;
 }
 
 .file-toolbar-search:focus-within .file-toolbar-search-icon {
-  color: rgb(59, 130, 246);
+  color: var(--huyooo-primary);
 }
 
 .file-toolbar-search-input {
-  background: rgb(243, 244, 246);
+  background: var(--huyooo-muted);
   border: 1px solid transparent;
   border-radius: 0.375rem;
   padding-left: 2rem;
@@ -115,36 +115,36 @@
   outline: none;
   transition: all 200ms;
   width: 8rem;
-  color: rgb(55, 65, 81);
+  color: var(--huyooo-text);
 }
 
 .file-toolbar-search-input::placeholder {
-  color: rgb(156, 163, 175);
+  color: var(--huyooo-text-disabled);
 }
 
 .file-toolbar-search-input:focus {
-  background: white;
-  border-color: rgb(96, 165, 250);
-  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
+  background: var(--huyooo-surface-2);
+  border-color: var(--huyooo-primary);
+  box-shadow: 0 0 0 2px var(--huyooo-focus-ring);
   width: 12rem;
 }
 
 .file-toolbar-view-toggle {
   display: flex;
   align-items: center;
-  background: rgba(229, 231, 233, 0.5);
+  background: var(--huyooo-muted);
   border-radius: 0.5rem;
   padding: 0.125rem;
-  color: rgb(75, 85, 99);
+  color: var(--huyooo-text-muted);
 }
 
 .file-toolbar-view-toggle .file-toolbar-button--active {
-  background: white;
-  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
-  color: rgb(31, 41, 55);
+  background: var(--huyooo-surface-2);
+  box-shadow: var(--huyooo-shadow-sm);
+  color: var(--huyooo-text);
 }
 
 .file-toolbar-view-toggle .file-toolbar-button:not(.file-toolbar-button--active):hover {
-  background: rgba(209, 213, 219, 0.5);
+  background: var(--huyooo-muted-hover);
 }
 

package/src/components/Window.css

@@ -2,7 +2,7 @@
   position: fixed;
   inset: 0;
   z-index: 100;
-  background: rgba(0, 0, 0, 0.3);
+  background: var(--huyooo-overlay);
   animation: fade-in 200ms ease-out;
   display: flex;
   align-items: center;
@@ -13,10 +13,10 @@
   position: absolute;
   display: flex;
   flex-direction: column;
-  background: rgba(255, 255, 255, 0.95);
+  background: var(--huyooo-panel-bg);
   backdrop-filter: blur(24px);
-  border: 1px solid rgb(229, 231, 233);
-  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+  border: 1px solid var(--huyooo-border);
+  box-shadow: var(--huyooo-shadow-lg);
   border-radius: 0.5rem;
   overflow: hidden;
   animation: window-fade-in 200ms ease-out;
@@ -28,10 +28,10 @@
   align-items: center;
   justify-content: space-between;
   padding: 0 0.75rem;
-  border-bottom: 1px solid rgb(229, 231, 233);
+  border-bottom: 1px solid var(--huyooo-border);
   flex-shrink: 0;
   user-select: none;
-  background: rgba(249, 250, 251, 0.8);
+  background: var(--huyooo-surface);
   z-index: 20;
   cursor: grab;
 }
@@ -54,7 +54,7 @@
   align-items: center;
   justify-content: center;
   border: 1px solid;
-  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+  box-shadow: var(--huyooo-shadow-sm);
   outline: none;
   cursor: pointer;
   padding: 0;
@@ -78,22 +78,22 @@
 }
 
 .window-control-button--close {
-  background-color: rgb(255, 95, 87);
-  border-color: rgb(224, 68, 62);
+  background-color: var(--huyooo-window-close-bg);
+  border-color: var(--huyooo-window-close-border);
 }
 
 .window-control-button--minimize {
-  background-color: rgb(254, 188, 46);
-  border-color: rgb(216, 158, 36);
+  background-color: var(--huyooo-window-minimize-bg);
+  border-color: var(--huyooo-window-minimize-border);
 }
 
 .window-control-button--maximize {
-  background-color: rgb(40, 200, 64);
-  border-color: rgb(26, 171, 41);
+  background-color: var(--huyooo-window-maximize-bg);
+  border-color: var(--huyooo-window-maximize-border);
 }
 
 .window-control-icon {
-  color: rgba(0, 0, 0, 0.5);
+  color: var(--huyooo-window-control-icon);
   opacity: 0;
   transition: opacity 200ms;
   width: 7px;
@@ -106,15 +106,15 @@
 }
 
 .window-control-button--close:hover {
-  background-color: rgba(255, 95, 87, 0.8);
+  background-color: color-mix(in srgb, var(--huyooo-window-close-bg) 80%, transparent);
 }
 
 .window-control-button--minimize:hover {
-  background-color: rgba(254, 188, 46, 0.8);
+  background-color: color-mix(in srgb, var(--huyooo-window-minimize-bg) 80%, transparent);
 }
 
 .window-control-button--maximize:hover {
-  background-color: rgba(40, 200, 64, 0.8);
+  background-color: color-mix(in srgb, var(--huyooo-window-maximize-bg) 80%, transparent);
 }
 
 .window-title-info {
@@ -131,7 +131,7 @@
 .window-title-text {
   font-weight: 500;
   font-size: 0.75rem;
-  color: rgb(75, 85, 99);
+  color: var(--huyooo-text-muted);
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;

package/src/index.css

@@ -1,3 +1,150 @@
-/* Base styles for file-explorer-frontend-react */
-/* This file will be copied to dist/style.css during build */
+/**
+ * File Explorer Frontend (React) - 全局主题 token
+ *
+ * 主题协议（跨项目统一）：
+ * - 使用 document.documentElement 的 data-theme = light | dark
+ * - 默认跟随系统 prefers-color-scheme
+ *
+ * 说明：
+ * - React 组件样式尽量使用 var(--huyooo-*)，避免硬编码颜色
+ */
+
+:root {
+  color-scheme: light;
+
+  --huyooo-bg: #ffffff;
+  --huyooo-surface: rgba(249, 250, 251, 0.9);
+  --huyooo-surface-2: #ffffff;
+  --huyooo-muted: rgba(229, 231, 233, 0.5);
+  --huyooo-muted-hover: rgba(209, 213, 219, 0.8);
+  --huyooo-border: rgb(229, 231, 233);
+  --huyooo-text: rgb(31, 41, 55);
+  --huyooo-text-muted: rgb(75, 85, 99);
+  --huyooo-text-disabled: rgb(156, 163, 175);
+  --huyooo-primary: rgb(59, 130, 246);
+  --huyooo-focus-ring: rgba(59, 130, 246, 0.12);
+  --huyooo-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+  --huyooo-scrollbar: rgba(0, 0, 0, 0.2);
+  --huyooo-scrollbar-hover: rgba(0, 0, 0, 0.3);
+  --huyooo-danger: rgb(220, 38, 38);
+  --huyooo-success: rgb(22, 163, 74);
+  --huyooo-warning: rgb(245, 158, 11);
+  --huyooo-danger-bg: rgba(254, 242, 242, 0.9);
+  --huyooo-danger-border: rgba(254, 202, 202, 0.9);
+  --huyooo-success-bg: rgba(240, 253, 244, 0.9);
+  --huyooo-success-border: rgba(187, 247, 208, 0.9);
+  --huyooo-warning-bg: rgba(255, 251, 235, 0.92);
+  --huyooo-warning-border: rgba(253, 230, 138, 0.9);
+  --huyooo-overlay: rgba(0, 0, 0, 0.5);
+  --huyooo-panel-bg: rgba(255, 255, 255, 0.95);
+  --huyooo-shadow-lg: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+  --huyooo-code-bg: #111827;
+  --huyooo-code-text: #e5e7eb;
+  --huyooo-menu-bg: rgba(255, 255, 255, 0.95);
+  --huyooo-menu-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.15), 0 4px 6px -2px rgba(0, 0, 0, 0.1);
+
+  /* macOS window control colors (for Window 组件) */
+  --huyooo-window-close-bg: rgb(255, 95, 87);
+  --huyooo-window-close-border: rgb(224, 68, 62);
+  --huyooo-window-minimize-bg: rgb(254, 188, 46);
+  --huyooo-window-minimize-border: rgb(216, 158, 36);
+  --huyooo-window-maximize-bg: rgb(40, 200, 64);
+  --huyooo-window-maximize-border: rgb(26, 171, 41);
+  --huyooo-window-control-icon: rgba(0, 0, 0, 0.5);
+
+  /* media overlay helpers (used in FileGrid video thumbnail) */
+  --huyooo-overlay-strong: rgba(0, 0, 0, 0.85);
+
+  /* on-primary text colors (selected state etc.) */
+  --huyooo-on-primary: #ffffff;
+  --huyooo-on-primary-muted: rgba(255, 255, 255, 0.8);
+
+  /* filetype colors (FileInfoDialog / FileIcon) */
+  --huyooo-filetype-folder: #dcb67a;
+  --huyooo-filetype-image: #7ec699;
+  --huyooo-filetype-video: #c678dd;
+  --huyooo-filetype-music: #e06c75;
+  --huyooo-filetype-document: #61afef;
+  --huyooo-filetype-code: #98c379;
+  --huyooo-filetype-archive: #d19a66;
+  --huyooo-filetype-file: #abb2bf;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    color-scheme: dark;
+
+    /* 暗色：统一采用 ai-chat 的经典暗色配色（更耐看） */
+    --huyooo-bg: #27292c;
+    --huyooo-surface: #27292c;
+    --huyooo-surface-2: #252526;
+    --huyooo-muted: #2d2d2d;
+    --huyooo-muted-hover: #3c3c3c;
+    --huyooo-border: #333;
+    --huyooo-text: #ccc;
+    --huyooo-text-muted: #888;
+    --huyooo-text-disabled: #666;
+    --huyooo-primary: #2563eb;
+    --huyooo-focus-ring: rgba(37, 99, 235, 0.18);
+    --huyooo-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.35);
+    --huyooo-scrollbar: rgba(255, 255, 255, 0.2);
+    --huyooo-scrollbar-hover: rgba(255, 255, 255, 0.3);
+    --huyooo-danger: #ef4444;
+    --huyooo-success: #22c55e;
+    --huyooo-warning: #f59e0b;
+    --huyooo-danger-bg: rgba(239, 68, 68, 0.12);
+    --huyooo-danger-border: rgba(239, 68, 68, 0.25);
+    --huyooo-success-bg: rgba(34, 197, 94, 0.12);
+    --huyooo-success-border: rgba(34, 197, 94, 0.25);
+    --huyooo-warning-bg: rgba(245, 158, 11, 0.12);
+    --huyooo-warning-border: rgba(245, 158, 11, 0.25);
+    --huyooo-overlay: rgba(0, 0, 0, 0.6);
+    --huyooo-panel-bg: #252526;
+    --huyooo-shadow-lg: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
+    --huyooo-code-bg: #1f2937;
+    --huyooo-code-text: #e5e7eb;
+    --huyooo-menu-bg: #252526;
+    --huyooo-menu-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.45), 0 4px 6px -2px rgba(0, 0, 0, 0.35);
+  }
+}
+
+:root[data-theme="light"] {
+  color-scheme: light;
+}
+
+:root[data-theme="dark"] {
+  color-scheme: dark;
+
+  /* 暗色：统一采用 ai-chat 的经典暗色配色（更耐看） */
+  --huyooo-bg: #27292c;
+  --huyooo-surface: #27292c;
+  --huyooo-surface-2: #252526;
+  --huyooo-muted: #2d2d2d;
+  --huyooo-muted-hover: #3c3c3c;
+  --huyooo-border: #333;
+  --huyooo-text: #ccc;
+  --huyooo-text-muted: #888;
+  --huyooo-text-disabled: #666;
+  --huyooo-primary: #2563eb;
+  --huyooo-focus-ring: rgba(37, 99, 235, 0.18);
+  --huyooo-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.35);
+  --huyooo-scrollbar: rgba(255, 255, 255, 0.2);
+  --huyooo-scrollbar-hover: rgba(255, 255, 255, 0.3);
+  --huyooo-danger: #ef4444;
+  --huyooo-success: #22c55e;
+  --huyooo-warning: #f59e0b;
+  --huyooo-danger-bg: rgba(239, 68, 68, 0.12);
+  --huyooo-danger-border: rgba(239, 68, 68, 0.25);
+  --huyooo-success-bg: rgba(34, 197, 94, 0.12);
+  --huyooo-success-border: rgba(34, 197, 94, 0.25);
+  --huyooo-warning-bg: rgba(245, 158, 11, 0.12);
+  --huyooo-warning-border: rgba(245, 158, 11, 0.25);
+  --huyooo-overlay: rgba(0, 0, 0, 0.6);
+  --huyooo-panel-bg: #252526;
+  --huyooo-shadow-lg: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
+  --huyooo-code-bg: #1f2937;
+  --huyooo-code-text: #e5e7eb;
+  --huyooo-menu-bg: #252526;
+  --huyooo-menu-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.45), 0 4px 6px -2px rgba(0, 0, 0, 0.35);
+}
 

package/src/index.ts

@@ -1,3 +1,6 @@
+// 主题 token（全局 CSS 变量）
+import './index.css';
+
 // Types
 export * from './types';