init: 初始化 AssetX 项目仓库
包含 webapp(Next.js 用户端)、webapp-back(Go 后端)、 antdesign(管理后台)、landingpage(营销落地页)、 数据库 SQL 和配置文件。
This commit is contained in:
102
landingpage/styles/tokens/semantic-tokens.ts
Normal file
102
landingpage/styles/tokens/semantic-tokens.ts
Normal file
@@ -0,0 +1,102 @@
|
||||
/**
|
||||
* 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;
|
||||
Reference in New Issue
Block a user