default
2ee4553b71
包含 webapp（Next.js 用户端）、webapp-back（Go 后端）、 antdesign（管理后台）、landingpage（营销落地页）、 数据库 SQL 和配置文件。
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;
|