OpsXShell Dev
e9a0d21758
参考设计系统: - 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
121 lines
4.6 KiB
JavaScript
121 lines
4.6 KiB
JavaScript
/** @type {import('tailwindcss').Config} */
|
|
export default {
|
|
content: [
|
|
"./index.html",
|
|
"./src/**/*.{js,ts,jsx,tsx}",
|
|
],
|
|
darkMode: 'class',
|
|
theme: {
|
|
extend: {
|
|
colors: {
|
|
// ── Semantic surface tokens (theme-aware via CSS vars) ──────────
|
|
surface: {
|
|
base: 'var(--color-surface-base)',
|
|
raised: 'var(--color-surface-raised)',
|
|
overlay: 'var(--color-surface-overlay)',
|
|
inset: 'var(--color-surface-inset)',
|
|
hover: 'var(--color-surface-hover)',
|
|
active: 'var(--color-surface-active)',
|
|
},
|
|
// ── 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)',
|
|
'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)',
|
|
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: {
|
|
sans: [
|
|
'Inter',
|
|
'-apple-system',
|
|
'BlinkMacSystemFont',
|
|
'"Segoe UI"',
|
|
'Roboto',
|
|
'"Helvetica Neue"',
|
|
'Arial',
|
|
'"Noto Sans SC"',
|
|
'"PingFang SC"',
|
|
'"Microsoft YaHei"',
|
|
'sans-serif',
|
|
],
|
|
mono: [
|
|
'Menlo',
|
|
'Monaco',
|
|
'Consolas',
|
|
'"Liberation Mono"',
|
|
'"Courier New"',
|
|
'monospace',
|
|
],
|
|
},
|
|
animation: {
|
|
'fade-in': 'fadeIn 0.15s ease-out',
|
|
'slide-up': 'slideUp 0.2s ease-out',
|
|
'scale-in': 'scaleIn 0.15s ease-out',
|
|
},
|
|
keyframes: {
|
|
fadeIn: {
|
|
'0%': { opacity: '0' },
|
|
'100%': { opacity: '1' },
|
|
},
|
|
slideUp: {
|
|
'0%': { opacity: '0', transform: 'translateY(8px)' },
|
|
'100%': { opacity: '1', transform: 'translateY(0)' },
|
|
},
|
|
scaleIn: {
|
|
'0%': { opacity: '0', transform: 'scale(0.96)' },
|
|
'100%': { opacity: '1', transform: 'scale(1)' },
|
|
},
|
|
},
|
|
},
|
|
},
|
|
plugins: [],
|
|
}
|