@youwen/ai-design-system
Version:
Enterprise AI-driven design system with comprehensive design tokens
632 lines (631 loc) • 21.4 kB
TypeScript
/**
* Layout Design Tokens System
* Enterprise-grade design token system for layout components
* Built with shadcn/ui + Radix UI best practices
*/
export declare const foundationTokens: {
readonly spacing: {
readonly xs: 3;
readonly sm: 5;
readonly base: 10;
readonly md: 15;
readonly lg: 30;
readonly xl: 48;
readonly '2xl': 64;
readonly '3xl': 96;
};
readonly colors: {
readonly neutral: {
readonly white: "#FFFFFF";
readonly black: "#000000";
readonly gray: {
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 brand: {
readonly primary: "#000000";
readonly accent: "#9747FF";
readonly background: "#E5E5E5";
readonly surface: "#FFFFFF";
readonly surfaceDark: "#2A2A2A";
};
readonly status: {
readonly success: "#67D75E";
readonly warning: "#FECC36";
readonly error: "#F24E1E";
readonly info: "#3BC7FF";
};
readonly chart: {
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 sm: 5;
readonly md: 8;
readonly lg: 15;
readonly xl: 30;
readonly pill: 103;
readonly full: 9999;
};
readonly boxShadow: {
readonly none: "none";
readonly sm: "0 1px 2px 0 rgb(0 0 0 / 0.05)";
readonly base: "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)";
};
};
export declare const semanticTokens: {
readonly colors: {
readonly text: {
readonly primary: "#000000";
readonly secondary: "#00000070";
readonly tertiary: "#00000060";
readonly quaternary: "#00000050";
readonly muted: "#00000040";
readonly placeholder: "#00000030";
readonly inverse: "#FFFFFF";
readonly success: "#67D75E";
readonly warning: "#FECC36";
readonly error: "#F24E1E";
readonly info: "#3BC7FF";
};
readonly background: {
readonly primary: "#FFFFFF";
readonly secondary: "#E5E5E5";
readonly tertiary: "#F9FAFB";
readonly inverse: "#000000";
readonly overlay: "rgba(0, 0, 0, 0.5)";
};
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: "#2A2A2A";
};
readonly interactive: {
readonly hover: "rgba(255, 255, 255, 0.1)";
readonly active: "rgba(255, 255, 255, 0.2)";
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 widget: {
readonly containerPadding: 15;
readonly slotGap: 10;
readonly textGap: 3;
};
readonly layout: {
readonly section: 30;
readonly page: 48;
readonly container: 15;
};
};
};
export declare const componentTokens: {
readonly dimensions: {
readonly container: {
readonly small: {
readonly width: 195;
readonly height: 97;
};
readonly standard: {
readonly width: 430;
readonly height: 225;
};
readonly large: {
readonly width: 470;
readonly height: 310;
};
readonly list: {
readonly width: 430;
readonly height: 310;
};
readonly widget: {
readonly width: 470;
readonly height: 1525;
};
};
readonly module: {
readonly standard: {
readonly width: 195;
readonly height: 97;
};
readonly listItem: {
readonly width: 400;
readonly height: 48;
};
readonly button: {
readonly width: 165;
readonly height: 41;
};
readonly icon: {
readonly width: 16;
readonly height: 16;
};
readonly touch: {
readonly minHeight: 48;
};
};
};
readonly button: {
readonly size: {
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 sm: 10;
readonly md: 15;
readonly lg: 30;
};
readonly borderRadius: {
readonly sm: 5;
readonly md: 8;
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 layoutDesignTokens: {
readonly foundation: {
readonly spacing: {
readonly xs: 3;
readonly sm: 5;
readonly base: 10;
readonly md: 15;
readonly lg: 30;
readonly xl: 48;
readonly '2xl': 64;
readonly '3xl': 96;
};
readonly colors: {
readonly neutral: {
readonly white: "#FFFFFF";
readonly black: "#000000";
readonly gray: {
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 brand: {
readonly primary: "#000000";
readonly accent: "#9747FF";
readonly background: "#E5E5E5";
readonly surface: "#FFFFFF";
readonly surfaceDark: "#2A2A2A";
};
readonly status: {
readonly success: "#67D75E";
readonly warning: "#FECC36";
readonly error: "#F24E1E";
readonly info: "#3BC7FF";
};
readonly chart: {
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 sm: 5;
readonly md: 8;
readonly lg: 15;
readonly xl: 30;
readonly pill: 103;
readonly full: 9999;
};
readonly boxShadow: {
readonly none: "none";
readonly sm: "0 1px 2px 0 rgb(0 0 0 / 0.05)";
readonly base: "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 semantic: {
readonly colors: {
readonly text: {
readonly primary: "#000000";
readonly secondary: "#00000070";
readonly tertiary: "#00000060";
readonly quaternary: "#00000050";
readonly muted: "#00000040";
readonly placeholder: "#00000030";
readonly inverse: "#FFFFFF";
readonly success: "#67D75E";
readonly warning: "#FECC36";
readonly error: "#F24E1E";
readonly info: "#3BC7FF";
};
readonly background: {
readonly primary: "#FFFFFF";
readonly secondary: "#E5E5E5";
readonly tertiary: "#F9FAFB";
readonly inverse: "#000000";
readonly overlay: "rgba(0, 0, 0, 0.5)";
};
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: "#2A2A2A";
};
readonly interactive: {
readonly hover: "rgba(255, 255, 255, 0.1)";
readonly active: "rgba(255, 255, 255, 0.2)";
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 widget: {
readonly containerPadding: 15;
readonly slotGap: 10;
readonly textGap: 3;
};
readonly layout: {
readonly section: 30;
readonly page: 48;
readonly container: 15;
};
};
};
readonly component: {
readonly dimensions: {
readonly container: {
readonly small: {
readonly width: 195;
readonly height: 97;
};
readonly standard: {
readonly width: 430;
readonly height: 225;
};
readonly large: {
readonly width: 470;
readonly height: 310;
};
readonly list: {
readonly width: 430;
readonly height: 310;
};
readonly widget: {
readonly width: 470;
readonly height: 1525;
};
};
readonly module: {
readonly standard: {
readonly width: 195;
readonly height: 97;
};
readonly listItem: {
readonly width: 400;
readonly height: 48;
};
readonly button: {
readonly width: 165;
readonly height: 41;
};
readonly icon: {
readonly width: 16;
readonly height: 16;
};
readonly touch: {
readonly minHeight: 48;
};
};
};
readonly button: {
readonly size: {
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 sm: 10;
readonly md: 15;
readonly lg: 30;
};
readonly borderRadius: {
readonly sm: 5;
readonly md: 8;
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 LayoutDesignTokens = typeof layoutDesignTokens;
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>;
export default layoutDesignTokens;