@youwen/ai-design-system
Version:
Enterprise AI-driven design system with comprehensive design tokens
848 lines (847 loc) • 27.2 kB
TypeScript
/**
* 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<string, string>;
/**
* 生成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;