103 lines
3.8 KiB
TypeScript
103 lines
3.8 KiB
TypeScript
|
/**
|
|||
|
|
* Design System - Semantic Tokens
|
|||
|
|
*
|
|||
|
|
* 语义化颜色 tokens，定义 Light 和 Dark 模式下的颜色用途
|
|||
|
|
* 组件应该使用这些语义化的名称，而不是直接使用原始色板
|
|||
|
|
*/
|
|||
|
|
|
|||
|
|
import { primitives } from './primitives';
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* Light Mode Semantic Tokens
|
|||
|
|
*/
|
|||
|
|
export const lightTokens = {
|
|||
|
|
text: {
|
|||
|
|
primary: primitives.brand[11], // #111827 - 主要文本
|
|||
|
|
secondary: primitives.brand[8], // #4b5563 - 次要文本
|
|||
|
|
tertiary: primitives.brand[6], // #9ca1af - 辅助文本
|
|||
|
|
inverse: primitives.base[1], // #ffffff - 反色文本（深色背景上）
|
|||
|
|
disabled: primitives.brand[5], // #d1d5db - 禁用文本
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
bg: {
|
|||
|
|
base: primitives.base[1], // #ffffff - 主背景
|
|||
|
|
subtle: primitives.brand[2], // #f9fafb - 次级背景
|
|||
|
|
surface: primitives.base[1], // #ffffff - 卡片/表面背景
|
|||
|
|
elevated: primitives.brand[3], // #f3f4f6 - 提升背景
|
|||
|
|
overlay: 'rgba(0, 0, 0, 0.5)', // 遮罩层
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
border: {
|
|||
|
|
normal: primitives.brand[4], // #e5e7eb - 标准边框
|
|||
|
|
subtle: primitives.brand[3], // #f3f4f6 - 微妙边框
|
|||
|
|
strong: primitives.brand[5], // #d1d5db - 强调边框
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
accent: {
|
|||
|
|
green: primitives.green[9], // #10b981 - 绿色强调
|
|||
|
|
greenBg: primitives.green[1], // #e1f8ec - 绿色背景
|
|||
|
|
blue: primitives.blue[9], // #1447e6 - 蓝色强调
|
|||
|
|
blueBg: primitives.blue[1], // #ebf2ff - 蓝色背景
|
|||
|
|
red: primitives.red[9], // #ef4444 - 红色强调
|
|||
|
|
yellow: primitives.yellow[9], // #f59e0b - 黄色强调
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
special: {
|
|||
|
|
black: primitives.base[12], // #000000 - 纯黑（特殊用途）
|
|||
|
|
white: primitives.base[1], // #ffffff - 纯白（特殊用途）
|
|||
|
|
},
|
|||
|
|
} as const;
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* Dark Mode Semantic Tokens
|
|||
|
|
*/
|
|||
|
|
export const darkTokens = {
|
|||
|
|
text: {
|
|||
|
|
primary: primitives.dark.zinc[50], // #fafafa - 主要文本
|
|||
|
|
secondary: primitives.dark.zinc[400], // #a1a1aa - 次要文本
|
|||
|
|
tertiary: primitives.dark.zinc[500], // #71717a - 辅助文本
|
|||
|
|
inverse: primitives.brand[11], // #111827 - 反色文本（浅色背景上）
|
|||
|
|
disabled: primitives.dark.zinc[500], // #71717a - 禁用文本
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
bg: {
|
|||
|
|
base: primitives.dark.zinc[950], // #0a0a0a - 主背景
|
|||
|
|
subtle: primitives.dark.zinc[950], // #0a0a0a - 次级背景
|
|||
|
|
surface: primitives.dark.zinc[900], // #18181b - 卡片/表面背景
|
|||
|
|
elevated: primitives.dark.zinc[800], // #27272a - 提升背景
|
|||
|
|
overlay: 'rgba(0, 0, 0, 0.7)', // 遮罩层
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
border: {
|
|||
|
|
normal: primitives.dark.zinc[800], // #27272a - 标准边框
|
|||
|
|
subtle: primitives.dark.zinc[900], // #18181b - 微妙边框
|
|||
|
|
strong: '#3f3f46', // 强调边框
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
accent: {
|
|||
|
|
green: primitives.green[9], // #10b981 - 绿色强调（保持一致）
|
|||
|
|
greenBg: 'rgba(16, 185, 129, 0.15)', // 绿色背景（透明）
|
|||
|
|
blue: primitives.blue[9], // #1447e6 - 蓝色强调（保持一致）
|
|||
|
|
blueBg: 'rgba(20, 71, 230, 0.15)', // 蓝色背景（透明）
|
|||
|
|
red: primitives.red[9], // #ef4444 - 红色强调
|
|||
|
|
yellow: primitives.yellow[9], // #f59e0b - 黄色强调
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
special: {
|
|||
|
|
black: primitives.base[12], // #000000 - 纯黑（特殊用途）
|
|||
|
|
white: primitives.base[1], // #ffffff - 纯白（特殊用途）
|
|||
|
|
},
|
|||
|
|
} as const;
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 导出统一的 semantic tokens 结构
|
|||
|
|
*/
|
|||
|
|
export const semanticTokens = {
|
|||
|
|
light: lightTokens,
|
|||
|
|
dark: darkTokens,
|
|||
|
|
} as const;
|
|||
|
|
|
|||
|
|
export type SemanticTokens = typeof semanticTokens;
|
|||
|
|
export type LightTokens = typeof lightTokens;
|
|||
|
|
export type DarkTokens = typeof darkTokens;
|