rlwj-lab/opsxshell
0
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(theme): 专业主题系统重构 — Warp/Linear 设计参考，深色/浅色完整适配

Browse Source 
参考设计系统:
- Warp: 温暖暗色调、自然层次、克制配色
- Linear: 亮度阶梯层次、半透明边框、精确排版

核心改进:
- app-theme.ts: 完整重写深色/浅色调色板 (+surface-hover/active, border-subtle/focus, feedback-bg, placeholder)
- useTheme.ts: 修复硬编码 return 'dark'，支持 dark/light/system 完整切换
- index.css: 消除硬编码颜色，全部使用 CSS 变量
- tailwind.config.js: 新增 txt/content/surface/border/ph/feedback 语义 token
- 44 文件批量迁移: 292 处 text-gray/bg-gray/text-white/placeholder-gray → 主题感知语义 token

| 44 files +611/-482 | tsc零错误 | 96/96 tests passing
This commit is contained in:
OpsXShell Dev committed 2026-04-25 19:31:51 +08:00
1 parent 07c4a5b14f
commit e9a0d21758
44 files changed
+593 -464
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

tailwind.config.js
+43 -11
View File
@@ -8,36 +8,68 @@ export default {
theme: {
extend: {
colors: {
// Semantic color tokens — driven by CSS custom properties set per theme
// ── Semantic surface tokens (theme-aware via CSS vars) ──────────
surface: {
base: 'var(--color-surface-base)',
raised: 'var(--color-surface-raised)',
base: 'var(--color-surface-base)',
raised: 'var(--color-surface-raised)',
overlay: 'var(--color-surface-overlay)',
inset: 'var(--color-surface-inset)',
inset: 'var(--color-surface-inset)',
hover: 'var(--color-surface-hover)',
active: 'var(--color-surface-active)',
},
// Legacy dark-* aliases for backward compatibility
// ── Legacy dark-* aliases (backward compat → surface tokens) ───
dark: {
900: 'var(--color-surface-base)',
800: 'var(--color-surface-raised)',
700: 'var(--color-surface-overlay)',
600: 'var(--color-surface-inset)',
},
// ── Accent colors ──────────────────────────────────────────────
accent: {
blue: 'var(--color-accent-blue)',
green: 'var(--color-accent-green)',
purple: 'var(--color-accent-purple)',
orange: 'var(--color-accent-orange)',
red: 'var(--color-accent-red)',
blue: 'var(--color-accent-blue)',
'blue-hover':'var(--color-accent-blue-hover)',
green: 'var(--color-accent-green)',
purple: 'var(--color-accent-purple)',
orange: 'var(--color-accent-orange)',
red: 'var(--color-accent-red)',
},
// ── Content / text tokens ──────────────────────────────────────
content: {
primary: 'var(--color-content-primary)',
secondary: 'var(--color-content-secondary)',
tertiary: 'var(--color-content-tertiary)',
inverse: 'var(--color-content-inverse)',
},
// ── Text tokens (direct mapping) ───────────────────────────────
txt: {
primary: 'var(--color-text-primary)',
secondary: 'var(--color-text-secondary)',
muted: 'var(--color-text-muted)',
faint: 'var(--color-text-faint)',
dim: 'var(--color-text-dim)',
},
// ── Border tokens ──────────────────────────────────────────────
border: {
DEFAULT: 'var(--color-border)',
DEFAULT: 'var(--color-border-default)',
subtle: 'var(--color-border-subtle)',
strong: 'var(--color-border-strong)',
focus: 'var(--color-border-focus)',
},
// ── Placeholder tokens ─────────────────────────────────────────
ph: {
DEFAULT: 'var(--color-placeholder)',
disabled: 'var(--color-placeholder-disabled)',
},
// ── Feedback / status tokens ───────────────────────────────────
feedback: {
'success': 'var(--color-feedback-success)',
'success-bg': 'var(--color-feedback-success-bg)',
'warning': 'var(--color-feedback-warning)',
'warning-bg': 'var(--color-feedback-warning-bg)',
'error': 'var(--color-feedback-error)',
'error-bg': 'var(--color-feedback-error-bg)',
'info': 'var(--color-feedback-info)',
'info-bg': 'var(--color-feedback-info-bg)',
},
},
fontFamily: {