feat(tokens): 全球出海设计Token系统与多语言国际化统一字典

admin/src/style/tokens.ts

@@ -0,0 +1,140 @@
+/**
+ * OmniCard AI 设计 Token 系统 (Admin & Web)
+ * 严格遵循 AGENTS.md 约束规范
+ * 瑞士国际主义 + 现代 SaaS + 编辑感
+ */
+
+export interface ColorTokens {
+  readonly primary: string;
+  readonly primarySoft: string;
+  readonly ai: string;
+  readonly bg: string;
+  readonly surface: string;
+  readonly border: string;
+  readonly text: string;
+  readonly text2: string;
+  readonly success: string;
+  readonly warning: string;
+  readonly error: string;
+}
+
+export const lightColors: ColorTokens = {
+  primary: '#0B5CFF',
+  primarySoft: '#EAF1FF',
+  ai: '#7C5CFF',
+  bg: '#FFFFFF',
+  surface: '#F7F8FA',
+  border: '#E3E7ED',
+  text: '#101828',
+  text2: '#667085',
+  success: '#12B76A',
+  warning: '#F79009',
+  error: '#F04438',
+} as const;
+
+export const darkColors: ColorTokens = {
+  primary: '#4D8DFF',
+  primarySoft: '#102A4D',
+  ai: '#9B8CFF',
+  bg: '#0B0D10',
+  surface: '#12151A',
+  border: '#262B33',
+  text: '#F2F4F7',
+  text2: '#98A2B3',
+  success: '#32D583',
+  warning: '#FDB022',
+  error: '#F97066',
+} as const;
+
+export const spacing = {
+  4: '4px',
+  8: '8px',
+  12: '12px',
+  16: '16px',
+  24: '24px',
+  32: '32px',
+  48: '48px',
+  64: '64px',
+} as const;
+
+export const radius = {
+  button: '12px',
+  card: '16px',
+  modal: '20px',
+} as const;
+
+export const typography = {
+  fontFamily: 'Inter, Noto Sans SC, Noto Sans Arabic, Noto Sans JP, Noto Sans KR, sans-serif',
+  fontSize: {
+    12: '12px',
+    14: '14px',
+    16: '16px',
+    20: '20px',
+    24: '24px',
+    32: '32px',
+    40: '40px',
+  },
+  lineHeight: {
+    body: 1.6,
+    title: 1.25,
+    arabic: 1.7,
+  },
+  shadow: '0 1px 2px rgba(16,24,40,0.04)',
+  maxWidth: {
+    content: '1200px',
+    article: '720px',
+  },
+  motion: {
+    micro: '150ms',
+    drawer: '250ms',
+    page: '400ms',
+    easing: 'cubic-bezier(0.2, 0.8, 0.2, 1)',
+  },
+} as const;
+
+/**
+ * 获取指定主题下的 CSS 变量键值对
+ */
+export function getCssVariables(theme: 'light' | 'dark' = 'light'): Record<string, string> {
+  const colors = theme === 'dark' ? darkColors : lightColors;
+
+  return {
+    '--omni-color-primary': colors.primary,
+    '--omni-color-primary-soft': colors.primarySoft,
+    '--omni-color-ai': colors.ai,
+    '--omni-color-bg': colors.bg,
+    '--omni-color-surface': colors.surface,
+    '--omni-color-border': colors.border,
+    '--omni-color-text': colors.text,
+    '--omni-color-text-2': colors.text2,
+    '--omni-color-success': colors.success,
+    '--omni-color-warning': colors.warning,
+    '--omni-color-error': colors.error,
+
+    '--omni-space-4': spacing[4],
+    '--omni-space-8': spacing[8],
+    '--omni-space-12': spacing[12],
+    '--omni-space-16': spacing[16],
+    '--omni-space-24': spacing[24],
+    '--omni-space-32': spacing[32],
+    '--omni-space-48': spacing[48],
+    '--omni-space-64': spacing[64],
+
+    '--omni-radius-button': radius.button,
+    '--omni-radius-card': radius.card,
+    '--omni-radius-modal': radius.modal,
+
+    '--omni-font-family': typography.fontFamily,
+    '--omni-shadow': typography.shadow,
+  };
+}
+
+/**
+ * 将 CSS 变量对象序列化为 CSS 样式声明字符串
+ */
+export function getCssVariableDeclarations(theme: 'light' | 'dark' = 'light'): string {
+  const vars = getCssVariables(theme);
+  return Object.entries(vars)
+    .map(([k, v]) => `${k}: ${v};`)
+    .join(' ');
+}