/** * Enterprise Design System Tokens * 基于v2/styled组件沉淀的通用设计令牌系统 * 结合 shadcn/ui + Radix UI 最佳实践 * 无业务语义，纯设计系统抽象 */ export declare const foundationTokens: { readonly spacing: { readonly 0: 0; readonly 1: 3; readonly 2: 5; readonly 3: 8; readonly 4: 10; readonly 5: 15; readonly 6: 20; readonly 7: 30; readonly 8: 48; readonly 9: 64; readonly 10: 96; }; readonly colors: { readonly neutral: { readonly 0: "#FFFFFF"; readonly 50: "#F9FAFB"; readonly 100: "#F3F4F6"; readonly 200: "#E5E7EB"; readonly 300: "#D1D5DB"; readonly 400: "#9CA3AF"; readonly 500: "#6B7280"; readonly 600: "#4B5563"; readonly 700: "#374151"; readonly 800: "#1F2937"; readonly 900: "#111827"; readonly 950: "#000000"; }; readonly brand: { readonly primary: "#000000"; readonly secondary: "#9747FF"; readonly tertiary: "#E5E5E5"; }; readonly semantic: { readonly success: "#67D75E"; readonly warning: "#FECC36"; readonly error: "#F24E1E"; readonly info: "#3BC7FF"; }; readonly data: { readonly blue: "#6BB5FF"; readonly green: "#67D75E"; readonly yellow: "#FFB800"; readonly red: "#FF4747"; readonly purple: "#8B7EFF"; readonly cyan: "#5FE4D0"; }; }; readonly typography: { readonly fontFamily: { readonly primary: "\"Scto Grotesk A\", \"Helvetica Neue\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif"; readonly mono: "\"JetBrains Mono\", \"Fira Code\", \"Consolas\", monospace"; }; readonly fontSize: { readonly xs: 10; readonly sm: 12; readonly base: 15; readonly md: 16; readonly lg: 20; readonly xl: 24; readonly '2xl': 40; readonly '3xl': 48; }; readonly fontWeight: { readonly light: 300; readonly normal: 400; readonly medium: 500; readonly semibold: 600; readonly bold: 700; }; readonly lineHeight: { readonly tight: 1; readonly snug: 1.07; readonly normal: 1.2; readonly relaxed: 1.3; }; }; readonly borderRadius: { readonly none: 0; readonly xs: 2; readonly sm: 5; readonly md: 8; readonly lg: 15; readonly xl: 30; readonly pill: 103; readonly full: 9999; }; readonly boxShadow: { readonly none: "none"; readonly xs: "0 1px 2px 0 rgb(0 0 0 / 0.05)"; readonly sm: "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)"; readonly md: "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)"; readonly lg: "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)"; readonly xl: "0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)"; }; readonly borderWidth: { readonly 0: 0; readonly 1: 1; readonly 2: 2; readonly 4: 4; readonly 8: 8; }; readonly opacity: { readonly 0: 0; readonly 5: 0.05; readonly 10: 0.1; readonly 20: 0.2; readonly 25: 0.25; readonly 30: 0.3; readonly 40: 0.4; readonly 50: 0.5; readonly 60: 0.6; readonly 70: 0.7; readonly 75: 0.75; readonly 80: 0.8; readonly 90: 0.9; readonly 95: 0.95; readonly 100: 1; }; }; export declare const semanticTokens: { readonly colors: { readonly text: { readonly primary: "#000000"; readonly secondary: "#374151"; readonly tertiary: "#4B5563"; readonly quaternary: "#6B7280"; readonly muted: "#9CA3AF"; readonly placeholder: "#D1D5DB"; readonly inverse: "#FFFFFF"; readonly success: "#67D75E"; readonly warning: "#FECC36"; readonly error: "#F24E1E"; readonly info: "#3BC7FF"; }; readonly background: { readonly primary: "#FFFFFF"; readonly secondary: "#F9FAFB"; readonly tertiary: "#F3F4F6"; readonly inverse: "#000000"; readonly overlay: "#00000080"; }; readonly border: { readonly default: "#E5E7EB"; readonly muted: "#F3F4F6"; readonly strong: "#D1D5DB"; readonly accent: "#9747FF"; }; readonly surface: { readonly primary: "#FFFFFF"; readonly secondary: "#F9FAFB"; readonly tertiary: "#F3F4F6"; readonly accent: "#9747FF"; readonly inverse: "#1F2937"; }; readonly interactive: { readonly hover: "#FFFFFF1A"; readonly active: "#FFFFFF33"; readonly focus: "#9747FF"; readonly disabled: "#D1D5DB"; }; }; readonly spacing: { readonly component: { readonly xs: 3; readonly sm: 5; readonly normal: 10; readonly md: 15; readonly lg: 30; }; readonly container: { readonly padding: 15; readonly gap: 10; readonly margin: 8; }; readonly layout: { readonly section: 30; readonly page: 48; readonly block: 20; }; }; }; export declare const componentTokens: { readonly dimensions: { readonly container: { readonly xs: { readonly width: 195; readonly height: 97; }; readonly sm: { readonly width: 300; readonly height: 150; }; readonly md: { readonly width: 430; readonly height: 225; }; readonly lg: { readonly width: 470; readonly height: 310; }; readonly xl: { readonly width: 600; readonly height: 400; }; }; readonly component: { readonly button: { readonly width: 165; readonly height: 41; }; readonly icon: { readonly width: 16; readonly height: 16; }; readonly avatar: { readonly width: 32; readonly height: 32; }; readonly thumbnail: { readonly width: 64; readonly height: 64; }; }; readonly interactive: { readonly touch: { readonly minHeight: 48; readonly minWidth: 48; }; readonly click: { readonly minHeight: 32; readonly minWidth: 32; }; }; }; readonly button: { readonly size: { readonly xs: { readonly height: 24; readonly padding: "3px 5px"; readonly fontSize: 10; readonly borderRadius: 5; }; readonly sm: { readonly height: 32; readonly padding: "5px 10px"; readonly fontSize: 12; readonly borderRadius: 8; }; readonly md: { readonly height: 41; readonly padding: "10px 15px"; readonly fontSize: 15; readonly borderRadius: 103; readonly width: 165; }; readonly lg: { readonly height: 48; readonly padding: "15px 30px"; readonly fontSize: 16; readonly borderRadius: 103; }; }; }; readonly card: { readonly padding: { readonly xs: 8; readonly sm: 10; readonly md: 15; readonly lg: 30; }; readonly borderRadius: { readonly sm: 5; readonly md: 8; readonly lg: 15; }; }; readonly input: { readonly height: { readonly sm: 32; readonly md: 40; readonly lg: 48; }; readonly padding: { readonly sm: 8; readonly md: 10; readonly lg: 15; }; }; }; export declare const animationTokens: { readonly duration: { readonly instant: "0ms"; readonly fast: "150ms"; readonly normal: "300ms"; readonly slow: "500ms"; readonly slower: "750ms"; }; readonly easing: { readonly linear: "linear"; readonly easeIn: "cubic-bezier(0.4, 0, 1, 1)"; readonly easeOut: "cubic-bezier(0, 0, 0.2, 1)"; readonly easeInOut: "cubic-bezier(0.4, 0, 0.2, 1)"; readonly bounce: "cubic-bezier(0.68, -0.55, 0.265, 1.55)"; }; readonly presets: { readonly fadeIn: { readonly duration: "300ms"; readonly easing: "cubic-bezier(0, 0, 0.2, 1)"; readonly keyframes: { readonly from: { readonly opacity: 0; }; readonly to: { readonly opacity: 1; }; }; }; readonly slideIn: { readonly duration: "300ms"; readonly easing: "cubic-bezier(0.4, 0, 0.2, 1)"; readonly keyframes: { readonly from: { readonly transform: "translateY(-10px)"; readonly opacity: 0; }; readonly to: { readonly transform: "translateY(0)"; readonly opacity: 1; }; }; }; readonly scaleIn: { readonly duration: "200ms"; readonly easing: "cubic-bezier(0, 0, 0.2, 1)"; readonly keyframes: { readonly from: { readonly transform: "scale(0.95)"; readonly opacity: 0; }; readonly to: { readonly transform: "scale(1)"; readonly opacity: 1; }; }; }; }; }; export declare const designSystemTokens: { readonly foundation: { readonly spacing: { readonly 0: 0; readonly 1: 3; readonly 2: 5; readonly 3: 8; readonly 4: 10; readonly 5: 15; readonly 6: 20; readonly 7: 30; readonly 8: 48; readonly 9: 64; readonly 10: 96; }; readonly colors: { readonly neutral: { readonly 0: "#FFFFFF"; readonly 50: "#F9FAFB"; readonly 100: "#F3F4F6"; readonly 200: "#E5E7EB"; readonly 300: "#D1D5DB"; readonly 400: "#9CA3AF"; readonly 500: "#6B7280"; readonly 600: "#4B5563"; readonly 700: "#374151"; readonly 800: "#1F2937"; readonly 900: "#111827"; readonly 950: "#000000"; }; readonly brand: { readonly primary: "#000000"; readonly secondary: "#9747FF"; readonly tertiary: "#E5E5E5"; }; readonly semantic: { readonly success: "#67D75E"; readonly warning: "#FECC36"; readonly error: "#F24E1E"; readonly info: "#3BC7FF"; }; readonly data: { readonly blue: "#6BB5FF"; readonly green: "#67D75E"; readonly yellow: "#FFB800"; readonly red: "#FF4747"; readonly purple: "#8B7EFF"; readonly cyan: "#5FE4D0"; }; }; readonly typography: { readonly fontFamily: { readonly primary: "\"Scto Grotesk A\", \"Helvetica Neue\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif"; readonly mono: "\"JetBrains Mono\", \"Fira Code\", \"Consolas\", monospace"; }; readonly fontSize: { readonly xs: 10; readonly sm: 12; readonly base: 15; readonly md: 16; readonly lg: 20; readonly xl: 24; readonly '2xl': 40; readonly '3xl': 48; }; readonly fontWeight: { readonly light: 300; readonly normal: 400; readonly medium: 500; readonly semibold: 600; readonly bold: 700; }; readonly lineHeight: { readonly tight: 1; readonly snug: 1.07; readonly normal: 1.2; readonly relaxed: 1.3; }; }; readonly borderRadius: { readonly none: 0; readonly xs: 2; readonly sm: 5; readonly md: 8; readonly lg: 15; readonly xl: 30; readonly pill: 103; readonly full: 9999; }; readonly boxShadow: { readonly none: "none"; readonly xs: "0 1px 2px 0 rgb(0 0 0 / 0.05)"; readonly sm: "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)"; readonly md: "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)"; readonly lg: "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)"; readonly xl: "0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)"; }; readonly borderWidth: { readonly 0: 0; readonly 1: 1; readonly 2: 2; readonly 4: 4; readonly 8: 8; }; readonly opacity: { readonly 0: 0; readonly 5: 0.05; readonly 10: 0.1; readonly 20: 0.2; readonly 25: 0.25; readonly 30: 0.3; readonly 40: 0.4; readonly 50: 0.5; readonly 60: 0.6; readonly 70: 0.7; readonly 75: 0.75; readonly 80: 0.8; readonly 90: 0.9; readonly 95: 0.95; readonly 100: 1; }; }; readonly semantic: { readonly colors: { readonly text: { readonly primary: "#000000"; readonly secondary: "#374151"; readonly tertiary: "#4B5563"; readonly quaternary: "#6B7280"; readonly muted: "#9CA3AF"; readonly placeholder: "#D1D5DB"; readonly inverse: "#FFFFFF"; readonly success: "#67D75E"; readonly warning: "#FECC36"; readonly error: "#F24E1E"; readonly info: "#3BC7FF"; }; readonly background: { readonly primary: "#FFFFFF"; readonly secondary: "#F9FAFB"; readonly tertiary: "#F3F4F6"; readonly inverse: "#000000"; readonly overlay: "#00000080"; }; readonly border: { readonly default: "#E5E7EB"; readonly muted: "#F3F4F6"; readonly strong: "#D1D5DB"; readonly accent: "#9747FF"; }; readonly surface: { readonly primary: "#FFFFFF"; readonly secondary: "#F9FAFB"; readonly tertiary: "#F3F4F6"; readonly accent: "#9747FF"; readonly inverse: "#1F2937"; }; readonly interactive: { readonly hover: "#FFFFFF1A"; readonly active: "#FFFFFF33"; readonly focus: "#9747FF"; readonly disabled: "#D1D5DB"; }; }; readonly spacing: { readonly component: { readonly xs: 3; readonly sm: 5; readonly normal: 10; readonly md: 15; readonly lg: 30; }; readonly container: { readonly padding: 15; readonly gap: 10; readonly margin: 8; }; readonly layout: { readonly section: 30; readonly page: 48; readonly block: 20; }; }; }; readonly component: { readonly dimensions: { readonly container: { readonly xs: { readonly width: 195; readonly height: 97; }; readonly sm: { readonly width: 300; readonly height: 150; }; readonly md: { readonly width: 430; readonly height: 225; }; readonly lg: { readonly width: 470; readonly height: 310; }; readonly xl: { readonly width: 600; readonly height: 400; }; }; readonly component: { readonly button: { readonly width: 165; readonly height: 41; }; readonly icon: { readonly width: 16; readonly height: 16; }; readonly avatar: { readonly width: 32; readonly height: 32; }; readonly thumbnail: { readonly width: 64; readonly height: 64; }; }; readonly interactive: { readonly touch: { readonly minHeight: 48; readonly minWidth: 48; }; readonly click: { readonly minHeight: 32; readonly minWidth: 32; }; }; }; readonly button: { readonly size: { readonly xs: { readonly height: 24; readonly padding: "3px 5px"; readonly fontSize: 10; readonly borderRadius: 5; }; readonly sm: { readonly height: 32; readonly padding: "5px 10px"; readonly fontSize: 12; readonly borderRadius: 8; }; readonly md: { readonly height: 41; readonly padding: "10px 15px"; readonly fontSize: 15; readonly borderRadius: 103; readonly width: 165; }; readonly lg: { readonly height: 48; readonly padding: "15px 30px"; readonly fontSize: 16; readonly borderRadius: 103; }; }; }; readonly card: { readonly padding: { readonly xs: 8; readonly sm: 10; readonly md: 15; readonly lg: 30; }; readonly borderRadius: { readonly sm: 5; readonly md: 8; readonly lg: 15; }; }; readonly input: { readonly height: { readonly sm: 32; readonly md: 40; readonly lg: 48; }; readonly padding: { readonly sm: 8; readonly md: 10; readonly lg: 15; }; }; }; readonly animation: { readonly duration: { readonly instant: "0ms"; readonly fast: "150ms"; readonly normal: "300ms"; readonly slow: "500ms"; readonly slower: "750ms"; }; readonly easing: { readonly linear: "linear"; readonly easeIn: "cubic-bezier(0.4, 0, 1, 1)"; readonly easeOut: "cubic-bezier(0, 0, 0.2, 1)"; readonly easeInOut: "cubic-bezier(0.4, 0, 0.2, 1)"; readonly bounce: "cubic-bezier(0.68, -0.55, 0.265, 1.55)"; }; readonly presets: { readonly fadeIn: { readonly duration: "300ms"; readonly easing: "cubic-bezier(0, 0, 0.2, 1)"; readonly keyframes: { readonly from: { readonly opacity: 0; }; readonly to: { readonly opacity: 1; }; }; }; readonly slideIn: { readonly duration: "300ms"; readonly easing: "cubic-bezier(0.4, 0, 0.2, 1)"; readonly keyframes: { readonly from: { readonly transform: "translateY(-10px)"; readonly opacity: 0; }; readonly to: { readonly transform: "translateY(0)"; readonly opacity: 1; }; }; }; readonly scaleIn: { readonly duration: "200ms"; readonly easing: "cubic-bezier(0, 0, 0.2, 1)"; readonly keyframes: { readonly from: { readonly transform: "scale(0.95)"; readonly opacity: 0; }; readonly to: { readonly transform: "scale(1)"; readonly opacity: 1; }; }; }; }; }; }; export type DesignSystemTokens = typeof designSystemTokens; export type FoundationTokens = typeof foundationTokens; export type SemanticTokens = typeof semanticTokens; export type ComponentTokens = typeof componentTokens; export type AnimationTokens = typeof animationTokens; export type SpacingToken = keyof typeof foundationTokens.spacing; export type ColorToken = keyof typeof foundationTokens.colors; export type FontSizeToken = keyof typeof foundationTokens.typography.fontSize; export type BorderRadiusToken = keyof typeof foundationTokens.borderRadius; /** * 获取间距值 */ export declare const getSpacing: (token: SpacingToken) => number; /** * 获取字体大小值 */ export declare const getFontSize: (token: FontSizeToken) => number; /** * 获取圆角值 */ export declare const getBorderRadius: (token: BorderRadiusToken) => number; /** * 创建CSS变量映射 */ export declare const createCSSVariables: () => Record; /** * 生成Tailwind配置 */ export declare const generateTailwindConfig: () => { colors: { neutral: { readonly 0: "#FFFFFF"; readonly 50: "#F9FAFB"; readonly 100: "#F3F4F6"; readonly 200: "#E5E7EB"; readonly 300: "#D1D5DB"; readonly 400: "#9CA3AF"; readonly 500: "#6B7280"; readonly 600: "#4B5563"; readonly 700: "#374151"; readonly 800: "#1F2937"; readonly 900: "#111827"; readonly 950: "#000000"; }; brand: { readonly primary: "#000000"; readonly secondary: "#9747FF"; readonly tertiary: "#E5E5E5"; }; semantic: { readonly success: "#67D75E"; readonly warning: "#FECC36"; readonly error: "#F24E1E"; readonly info: "#3BC7FF"; }; data: { readonly blue: "#6BB5FF"; readonly green: "#67D75E"; readonly yellow: "#FFB800"; readonly red: "#FF4747"; readonly purple: "#8B7EFF"; readonly cyan: "#5FE4D0"; }; }; spacing: { readonly 0: 0; readonly 1: 3; readonly 2: 5; readonly 3: 8; readonly 4: 10; readonly 5: 15; readonly 6: 20; readonly 7: 30; readonly 8: 48; readonly 9: 64; readonly 10: 96; }; fontSize: { readonly xs: 10; readonly sm: 12; readonly base: 15; readonly md: 16; readonly lg: 20; readonly xl: 24; readonly '2xl': 40; readonly '3xl': 48; }; fontFamily: { readonly primary: "\"Scto Grotesk A\", \"Helvetica Neue\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif"; readonly mono: "\"JetBrains Mono\", \"Fira Code\", \"Consolas\", monospace"; }; fontWeight: { readonly light: 300; readonly normal: 400; readonly medium: 500; readonly semibold: 600; readonly bold: 700; }; lineHeight: { readonly tight: 1; readonly snug: 1.07; readonly normal: 1.2; readonly relaxed: 1.3; }; borderRadius: { readonly none: 0; readonly xs: 2; readonly sm: 5; readonly md: 8; readonly lg: 15; readonly xl: 30; readonly pill: 103; readonly full: 9999; }; boxShadow: { readonly none: "none"; readonly xs: "0 1px 2px 0 rgb(0 0 0 / 0.05)"; readonly sm: "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)"; readonly md: "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)"; readonly lg: "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)"; readonly xl: "0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)"; }; opacity: { readonly 0: 0; readonly 5: 0.05; readonly 10: 0.1; readonly 20: 0.2; readonly 25: 0.25; readonly 30: 0.3; readonly 40: 0.4; readonly 50: 0.5; readonly 60: 0.6; readonly 70: 0.7; readonly 75: 0.75; readonly 80: 0.8; readonly 90: 0.9; readonly 95: 0.95; readonly 100: 1; }; }; export default designSystemTokens;