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

package/src/components/CompressDialog.css

@@ -1,7 +1,7 @@
 .compress-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 @@
 }
 
 .compress-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: 420px;
   max-width: 90vw;
   max-height: 90vh;
@@ -25,7 +25,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);
 }
 
 .compress-dialog-title {
@@ -34,7 +34,7 @@
   gap: 8px;
   font-weight: 600;
   font-size: 16px;
-  color: rgb(17, 24, 39);
+  color: var(--huyooo-text);
 }
 
 .compress-dialog-close {
@@ -42,7 +42,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;
@@ -50,8 +50,8 @@
 }
 
 .compress-dialog-close:hover {
-  background: rgb(243, 244, 246);
-  color: rgb(55, 65, 81);
+  background: var(--huyooo-muted);
+  color: var(--huyooo-text);
 }
 
 .compress-dialog-content {
@@ -67,9 +67,9 @@
   align-items: center;
   gap: 8px;
   padding: 12px;
-  background: rgb(249, 250, 251);
+  background: var(--huyooo-surface);
   border-radius: 8px;
-  color: rgb(55, 65, 81);
+  color: var(--huyooo-text);
   font-size: 14px;
 }
 
@@ -82,7 +82,7 @@
 .compress-dialog-field > label {
   font-size: 13px;
   font-weight: 500;
-  color: rgb(55, 65, 81);
+  color: var(--huyooo-text);
 }
 
 .compress-dialog-input-group {
@@ -93,54 +93,57 @@
 .compress-dialog-input-group input {
   flex: 1;
   padding: 8px 12px;
-  border: 1px solid rgb(209, 213, 219);
+  border: 1px solid var(--huyooo-border);
   border-radius: 6px 0 0 6px;
   font-size: 14px;
   outline: none;
   transition: border-color 0.2s;
+  background: var(--huyooo-surface-2);
+  color: var(--huyooo-text);
 }
 
 .compress-dialog-input-group input:focus {
-  border-color: rgb(59, 130, 246);
+  border-color: var(--huyooo-primary);
 }
 
 .compress-dialog-ext {
   padding: 8px 12px;
-  background: rgb(243, 244, 246);
-  border: 1px solid rgb(209, 213, 219);
+  background: var(--huyooo-muted);
+  border: 1px solid var(--huyooo-border);
   border-left: none;
   border-radius: 0 6px 6px 0;
   font-size: 14px;
-  color: rgb(107, 114, 128);
+  color: var(--huyooo-text-muted);
 }
 
 .compress-dialog-toggle-password {
   padding: 8px 12px;
-  background: rgb(243, 244, 246);
-  border: 1px solid rgb(209, 213, 219);
+  background: var(--huyooo-muted);
+  border: 1px solid var(--huyooo-border);
   border-left: none;
   border-radius: 0 6px 6px 0;
   font-size: 12px;
-  color: rgb(59, 130, 246);
+  color: var(--huyooo-primary);
   cursor: pointer;
 }
 
 .compress-dialog-toggle-password:hover {
-  background: rgb(229, 231, 235);
+  background: var(--huyooo-muted-hover);
 }
 
 .compress-dialog-field select {
   padding: 8px 12px;
-  border: 1px solid rgb(209, 213, 219);
+  border: 1px solid var(--huyooo-border);
   border-radius: 6px;
   font-size: 14px;
   outline: none;
-  background: white;
+  background: var(--huyooo-surface-2);
+  color: var(--huyooo-text);
   cursor: pointer;
 }
 
 .compress-dialog-field select:focus {
-  border-color: rgb(59, 130, 246);
+  border-color: var(--huyooo-primary);
 }
 
 .compress-dialog-levels {
@@ -154,19 +157,19 @@
   align-items: center;
   gap: 8px;
   padding: 8px 12px;
-  border: 1px solid rgb(229, 231, 233);
+  border: 1px solid var(--huyooo-border);
   border-radius: 6px;
   cursor: pointer;
   transition: all 0.2s;
 }
 
 .compress-dialog-level:hover {
-  background: rgb(249, 250, 251);
+  background: var(--huyooo-surface);
 }
 
 .compress-dialog-level:has(input:checked) {
-  border-color: rgb(59, 130, 246);
-  background: rgb(239, 246, 255);
+  border-color: var(--huyooo-primary);
+  background: var(--huyooo-focus-ring);
 }
 
 .compress-dialog-level input {
@@ -176,12 +179,12 @@
 .compress-dialog-level-label {
   font-size: 14px;
   font-weight: 500;
-  color: rgb(17, 24, 39);
+  color: var(--huyooo-text);
 }
 
 .compress-dialog-level-desc {
   font-size: 12px;
-  color: rgb(107, 114, 128);
+  color: var(--huyooo-text-muted);
   margin-left: auto;
 }
 
@@ -191,7 +194,7 @@
   gap: 8px;
   cursor: pointer;
   font-size: 14px;
-  color: rgb(55, 65, 81);
+  color: var(--huyooo-text);
 }
 
 .compress-dialog-checkbox input {
@@ -202,7 +205,7 @@
 
 .compress-dialog-preview {
   padding: 10px 12px;
-  background: rgb(249, 250, 251);
+  background: var(--huyooo-surface);
   border-radius: 6px;
   font-size: 12px;
   display: flex;
@@ -211,11 +214,11 @@
 }
 
 .compress-dialog-preview-label {
-  color: rgb(107, 114, 128);
+  color: var(--huyooo-text-muted);
 }
 
 .compress-dialog-preview-path {
-  color: rgb(55, 65, 81);
+  color: var(--huyooo-text);
   word-break: break-all;
 }
 
@@ -224,7 +227,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);
 }
 
 .compress-dialog-btn {
@@ -237,28 +240,28 @@
 }
 
 .compress-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);
 }
 
 .compress-dialog-btn-cancel:hover {
-  background: rgb(249, 250, 251);
+  background: var(--huyooo-surface);
 }
 
 .compress-dialog-btn-confirm {
-  background: rgb(59, 130, 246);
-  border: 1px solid rgb(59, 130, 246);
+  background: var(--huyooo-primary);
+  border: 1px solid var(--huyooo-primary);
   color: white;
 }
 
 .compress-dialog-btn-confirm:hover {
-  background: rgb(37, 99, 235);
+  background: var(--huyooo-primary-hover, var(--huyooo-primary));
 }
 
 .compress-dialog-btn-confirm:disabled {
-  background: rgb(156, 163, 175);
-  border-color: rgb(156, 163, 175);
+  background: var(--huyooo-text-disabled);
+  border-color: var(--huyooo-text-disabled);
   cursor: not-allowed;
 }
 

package/src/components/ContextMenu.css

@@ -10,11 +10,11 @@
   position: fixed;
   z-index: 10000;
   width: 220px; /* 固定宽度，与 calculateMenuPosition 中的 MENU_WIDTH 一致 */
-  background: rgba(255, 255, 255, 0.95);
+  background: var(--huyooo-menu-bg);
   backdrop-filter: blur(24px);
-  border: 1px solid rgba(229, 231, 233, 0.5);
+  border: 1px solid var(--huyooo-border);
   border-radius: 0.5rem;
-  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.15), 0 4px 6px -2px rgba(0, 0, 0, 0.1);
+  box-shadow: var(--huyooo-menu-shadow);
   padding: 0.25rem 0;
   font-size: 0.875rem;
   user-select: none;
@@ -39,7 +39,7 @@
   align-items: center;
   gap: 0.5rem;
   padding: 0.375rem 1rem;
-  color: rgb(55, 65, 81);
+  color: var(--huyooo-text);
   transition: all 200ms;
   border: none;
   background: transparent;
@@ -47,7 +47,7 @@
 }
 
 .context-menu-item:hover {
-  background: rgb(59, 130, 246);
+  background: var(--huyooo-primary);
   color: white;
 }
 
@@ -56,7 +56,7 @@
 }
 
 .context-menu-item:hover .context-menu-item-shortcut {
-  color: rgba(255, 255, 255, 0.7);
+  color: var(--huyooo-on-primary-muted);
 }
 
 .context-menu-item--disabled {
@@ -66,24 +66,24 @@
 
 .context-menu-item--disabled:hover {
   background: transparent;
-  color: rgb(55, 65, 81);
+  color: var(--huyooo-text);
 }
 
 .context-menu-item--disabled:hover .context-menu-item-icon {
-  color: rgb(107, 114, 128);
+  color: var(--huyooo-text-muted);
 }
 
 .context-menu-item--danger {
-  color: rgb(220, 38, 38);
+  color: var(--huyooo-danger);
 }
 
 .context-menu-item--danger:hover {
-  background: rgb(220, 38, 38);
+  background: var(--huyooo-danger);
   color: white;
 }
 
 .context-menu-item--danger .context-menu-item-icon {
-  color: rgb(220, 38, 38);
+  color: var(--huyooo-danger);
 }
 
 .context-menu-item--danger:hover .context-menu-item-icon {
@@ -91,7 +91,7 @@
 }
 
 .context-menu-item-icon {
-  color: rgb(107, 114, 128);
+  color: var(--huyooo-text-muted);
   flex-shrink: 0;
 }
 
@@ -100,13 +100,13 @@
 }
 
 .context-menu-item-shortcut {
-  color: rgb(156, 163, 175);
+  color: var(--huyooo-text-disabled);
   font-size: 0.6875rem;
 }
 
 .context-menu-separator {
   height: 1px;
-  background: rgb(229, 231, 233);
+  background: var(--huyooo-border);
   margin: 0.25rem 0.5rem;
 }
 
@@ -115,7 +115,7 @@
 }
 
 .context-menu-item--active {
-  background: rgb(59, 130, 246);
+  background: var(--huyooo-primary);
   color: white;
 }
 
@@ -124,11 +124,11 @@
 }
 
 .context-menu-item--active .context-menu-item-shortcut {
-  color: rgba(255, 255, 255, 0.7);
+  color: var(--huyooo-on-primary-muted);
 }
 
 .context-menu-item-check {
-  color: rgb(107, 114, 128);
+  color: var(--huyooo-text-muted);
   flex-shrink: 0;
   margin-left: auto;
 }
@@ -139,7 +139,7 @@
 }
 
 .context-menu-item-arrow {
-  color: rgb(156, 163, 175);
+  color: var(--huyooo-text-disabled);
   flex-shrink: 0;
   margin-left: auto;
 }

package/src/components/FileGrid.css

@@ -42,23 +42,23 @@
 
 /* 悬停效果 - 类似 macOS */
 .file-grid-item--normal:hover {
-  background: rgba(0, 0, 0, 0.04);
+  background: var(--huyooo-muted-hover);
 }
 
 /* 选中状态 - macOS 风格的蓝色高亮 */
 .file-grid-item--selected {
-  background: rgba(0, 122, 255, 0.12);
-  border-color: rgba(0, 122, 255, 0.2);
+  background: var(--huyooo-focus-ring);
+  border-color: var(--huyooo-primary);
 }
 
 .file-grid-item--selected:hover {
-  background: rgba(0, 122, 255, 0.16);
+  background: var(--huyooo-focus-ring);
 }
 
 /* 拖拽悬停 */
 .file-grid-item--drag-over {
-  background: rgba(0, 122, 255, 0.2);
-  border-color: rgba(0, 122, 255, 0.4);
+  background: var(--huyooo-focus-ring);
+  border-color: var(--huyooo-primary);
 }
 
 /* 图标/缩略图容器 - 统一尺寸 */
@@ -83,8 +83,8 @@
   object-position: center;
   border-radius: 4px;
   /* 轻微阴影增加层次感 */
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.04);
-  background: #f5f5f5;
+  box-shadow: var(--huyooo-shadow-sm);
+  background: var(--huyooo-muted);
   /* 确保图片能作为加载占位符，平滑过渡到原图 */
   display: block;
 }
@@ -98,7 +98,7 @@
 }
 
 .file-grid-item-thumbnail--selected {
-  box-shadow: 0 2px 6px rgba(0, 122, 255, 0.2), 0 0 0 2px rgba(0, 122, 255, 0.3);
+  box-shadow: 0 0 0 2px var(--huyooo-primary), 0 0 0 6px var(--huyooo-focus-ring);
 }
 
 /* 视频缩略图容器 */
@@ -106,10 +106,10 @@
   position: relative;
   border-radius: 4px;
   overflow: hidden;
-  background: #000;
+  background: var(--huyooo-overlay-strong);
   width: 48px;
   height: 48px;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
+  box-shadow: var(--huyooo-shadow-sm);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -144,7 +144,7 @@
   width: 20px;
   height: 20px;
   border-radius: 50%;
-  background: rgba(0, 0, 0, 0.5);
+  background: var(--huyooo-overlay);
   backdrop-filter: blur(4px);
   display: flex;
   align-items: center;
@@ -180,7 +180,7 @@
   user-select: none;
   cursor: default;
   transition: color 100ms;
-  color: #1d1d1f;
+  color: var(--huyooo-text);
   width: 100%;
   /* 使用 flexbox 布局，让扩展名始终显示 */
   display: flex;
@@ -222,46 +222,13 @@
   line-height: 1.3;
   text-align: center;
   padding: 2px 4px;
-  border: 1px solid #007aff;
+  border: 1px solid var(--huyooo-primary);
   border-radius: 3px;
   outline: none;
-  box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.2);
-  background: white;
+  box-shadow: 0 0 0 3px var(--huyooo-focus-ring);
+  background: var(--huyooo-surface-2);
+  color: var(--huyooo-text);
   cursor: text;
 }
 
-/* 深色模式支持 */
-@media (prefers-color-scheme: dark) {
-  .file-grid-item--normal:hover {
-    background: rgba(255, 255, 255, 0.06);
-  }
-
-  .file-grid-item--selected {
-    background: rgba(10, 132, 255, 0.25);
-    border-color: rgba(10, 132, 255, 0.3);
-  }
-
-  .file-grid-item--selected:hover {
-    background: rgba(10, 132, 255, 0.3);
-  }
-
-  .file-grid-item--drag-over {
-    background: rgba(10, 132, 255, 0.35);
-    border-color: rgba(10, 132, 255, 0.5);
-  }
-
-  .file-grid-item-thumbnail {
-    background: #2c2c2e;
-    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(255, 255, 255, 0.05);
-  }
-
-  .file-grid-item-name {
-    color: #f5f5f7;
-  }
-
-  .file-grid-item-rename-input {
-    background: #1c1c1e;
-    border-color: #0a84ff;
-    color: #f5f5f7;
-  }
-}
+/* 深色模式由 token 负责 */

package/src/components/FileIcon.css

@@ -1,41 +1,41 @@
 .file-icon--folder {
-  color: rgb(96, 165, 250);
-  fill: rgb(96, 165, 250);
+  color: var(--huyooo-primary);
+  fill: var(--huyooo-primary);
 }
 
 .file-icon--image {
-  color: rgb(168, 85, 247);
+  color: var(--huyooo-primary);
 }
 
 .file-icon--text {
-  color: rgb(107, 114, 128);
+  color: var(--huyooo-text-muted);
 }
 
 .file-icon--code {
-  color: rgb(34, 197, 94);
+  color: var(--huyooo-success);
 }
 
 .file-icon--music {
-  color: rgb(248, 113, 113);
+  color: var(--huyooo-danger);
 }
 
 .file-icon--video {
-  color: rgb(37, 99, 235);
+  color: var(--huyooo-primary);
 }
 
 .file-icon--pdf {
-  color: rgb(220, 38, 38);
+  color: var(--huyooo-danger);
 }
 
 .file-icon--application {
-  color: rgb(139, 92, 246);
+  color: var(--huyooo-primary);
 }
 
 .file-icon--archive {
-  color: rgb(234, 179, 8);
+  color: var(--huyooo-warning);
 }
 
 .file-icon--default {
-  color: rgb(156, 163, 175);
+  color: var(--huyooo-text-disabled);
 }