@youwen/ai-design-system
Version:
Enterprise AI-driven design system with comprehensive design tokens
560 lines (559 loc) • 18.2 kB
TypeScript
/**
* 企业级设计规范 - 基于Figma实际分析
* 通用的企业设计系统，可适配不同公司
*/
export declare const enterpriseFigmaTokens: {
readonly colors: {
readonly background: {
readonly dark: {
readonly primary: "#0A0A0A";
readonly secondary: "#313540";
readonly surface: "#1A1A1A";
};
readonly light: {
readonly primary: "#F5F5F5";
readonly secondary: "#FFFFFF";
readonly surface: "#FFFFFF";
};
};
readonly text: {
readonly dark: {
readonly primary: "#FFFFFF";
readonly secondary: "#B8BCC8";
readonly tertiary: "#9CA3AF";
};
readonly light: {
readonly primary: "#0A0A0A";
readonly secondary: "#6B7280";
readonly tertiary: "#9CA3AF";
};
};
readonly brand: {
readonly primary: "#3B82F6";
readonly secondary: "#10B981";
readonly accent: "#8B5CF6";
readonly warning: "#F59E0B";
};
readonly semantic: {
readonly success: "#10B981";
readonly warning: "#F59E0B";
readonly error: "#EF4444";
readonly info: "#3B82F6";
};
};
readonly typography: {
readonly fontFamily: {
readonly primary: "\"Inter\", -apple-system, BlinkMacSystemFont, sans-serif";
readonly fallback: "-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif";
};
readonly widget: {
readonly title: {
readonly fontSize: "24px";
readonly fontWeight: "500";
readonly lineHeight: "28px";
};
readonly big: {
readonly fontSize: "40px";
readonly fontWeight: "400";
readonly lineHeight: "44px";
};
readonly medium: {
readonly fontSize: "24px";
readonly fontWeight: "400";
readonly lineHeight: "28px";
};
readonly small: {
readonly fontSize: "16px";
readonly fontWeight: "400";
readonly lineHeight: "20px";
};
readonly mini: {
readonly fontSize: "12px";
readonly fontWeight: "400";
readonly lineHeight: "16px";
};
};
readonly heading: {
readonly h1: {
readonly fontSize: "48px";
readonly fontWeight: "600";
readonly lineHeight: "56px";
};
readonly h2: {
readonly fontSize: "36px";
readonly fontWeight: "600";
readonly lineHeight: "44px";
};
readonly h3: {
readonly fontSize: "30px";
readonly fontWeight: "500";
readonly lineHeight: "36px";
};
readonly h4: {
readonly fontSize: "24px";
readonly fontWeight: "500";
readonly lineHeight: "32px";
};
};
readonly body: {
readonly large: {
readonly fontSize: "18px";
readonly fontWeight: "400";
readonly lineHeight: "28px";
};
readonly medium: {
readonly fontSize: "16px";
readonly fontWeight: "400";
readonly lineHeight: "24px";
};
readonly small: {
readonly fontSize: "14px";
readonly fontWeight: "400";
readonly lineHeight: "20px";
};
};
};
readonly sizing: {
readonly container: {
readonly width: "430px";
readonly height: "225px";
readonly minHeight: "180px";
readonly maxHeight: "600px";
};
readonly slot: {
readonly width: "195px";
readonly height: "97px";
readonly gap: "15px";
};
readonly icon: {
readonly xs: "12px";
readonly sm: "16px";
readonly md: "20px";
readonly lg: "24px";
readonly xl: "32px";
};
};
readonly spacing: {
readonly widget: {
readonly containerPadding: "15px";
readonly titleMargin: "15px";
readonly titleHeight: "24px";
readonly titleOffset: "40px";
readonly slotGap: "15px";
readonly textGap: "6px";
readonly edgeOffset: "2px";
};
readonly scale: {
readonly '0': "0px";
readonly '1': "4px";
readonly '2': "8px";
readonly '3': "12px";
readonly '4': "16px";
readonly '5': "20px";
readonly '6': "24px";
readonly '8': "32px";
readonly '10': "40px";
readonly '12': "48px";
readonly '16': "64px";
readonly '20': "80px";
};
};
readonly shadows: {
readonly widget: {
readonly default: "0 2px 8px rgba(0, 0, 0, 0.1)";
readonly hover: "0 4px 16px rgba(0, 0, 0, 0.15)";
readonly active: "0 1px 4px rgba(0, 0, 0, 0.1)";
};
readonly elevation: {
readonly low: "0 1px 3px rgba(0, 0, 0, 0.1)";
readonly medium: "0 4px 6px rgba(0, 0, 0, 0.1)";
readonly high: "0 10px 15px rgba(0, 0, 0, 0.1)";
readonly highest: "0 25px 50px rgba(0, 0, 0, 0.25)";
};
};
readonly borderRadius: {
readonly none: "0px";
readonly sm: "4px";
readonly md: "8px";
readonly lg: "12px";
readonly xl: "16px";
readonly full: "9999px";
};
readonly borders: {
readonly width: {
readonly thin: "1px";
readonly medium: "2px";
readonly thick: "4px";
};
readonly style: {
readonly solid: "solid";
readonly dashed: "dashed";
readonly dotted: "dotted";
};
readonly widget: {
readonly default: "1px solid rgba(0, 0, 0, 0.1)";
readonly dark: "1px solid rgba(255, 255, 255, 0.1)";
};
};
readonly animations: {
readonly duration: {
readonly instant: "0ms";
readonly fast: "150ms";
readonly normal: "300ms";
readonly slow: "500ms";
};
readonly easing: {
readonly easeOut: "cubic-bezier(0.0, 0.0, 0.2, 1)";
readonly easeIn: "cubic-bezier(0.4, 0.0, 1, 1)";
readonly easeInOut: "cubic-bezier(0.4, 0.0, 0.2, 1)";
};
};
readonly breakpoints: {
readonly mobile: "320px";
readonly tablet: "768px";
readonly desktop: "1024px";
readonly wide: "1440px";
};
};
export declare const enterpriseThemeConfigs: {
readonly light: {
readonly colors: {
readonly background: "#F5F5F5";
readonly surface: "#FFFFFF";
readonly text: "#0A0A0A";
readonly textSecondary: "#6B7280";
readonly border: "rgba(0, 0, 0, 0.1)";
readonly shadow: "rgba(0, 0, 0, 0.1)";
};
};
readonly dark: {
readonly colors: {
readonly background: "#0A0A0A";
readonly surface: "#1A1A1A";
readonly text: "#FFFFFF";
readonly textSecondary: "#B8BCC8";
readonly border: "rgba(255, 255, 255, 0.1)";
readonly shadow: "rgba(0, 0, 0, 0.3)";
};
};
};
export declare const enterpriseComponentTokens: {
readonly widget: {
readonly container: {
readonly width: "430px";
readonly minHeight: "180px";
readonly padding: "15px";
readonly borderRadius: "8px";
readonly border: "1px solid rgba(0, 0, 0, 0.1)";
readonly boxShadow: "0 2px 8px rgba(0, 0, 0, 0.1)";
};
readonly title: {
readonly fontSize: "24px";
readonly fontWeight: "500";
readonly lineHeight: "28px";
readonly marginBottom: "15px";
readonly height: "24px";
};
readonly slot: {
readonly width: "195px";
readonly height: "97px";
readonly gap: "15px";
};
readonly content: {
readonly paddingTop: "40px";
};
};
readonly button: {
readonly primary: {
readonly backgroundColor: "#3B82F6";
readonly color: "#FFFFFF";
readonly border: "none";
readonly borderRadius: "8px";
readonly padding: "12px 24px";
readonly fontSize: "16px";
readonly fontWeight: "500";
readonly boxShadow: "0 1px 3px rgba(0, 0, 0, 0.1)";
};
};
};
export type EnterpriseColorMode = 'light' | 'dark';
export type EnterpriseBrandColor = keyof typeof enterpriseFigmaTokens.colors.brand;
export type EnterpriseSpacing = keyof typeof enterpriseFigmaTokens.spacing.scale;
export declare const getEnterpriseColor: (path: string, mode?: EnterpriseColorMode) => {
readonly background: {
readonly dark: {
readonly primary: "#0A0A0A";
readonly secondary: "#313540";
readonly surface: "#1A1A1A";
};
readonly light: {
readonly primary: "#F5F5F5";
readonly secondary: "#FFFFFF";
readonly surface: "#FFFFFF";
};
};
readonly text: {
readonly dark: {
readonly primary: "#FFFFFF";
readonly secondary: "#B8BCC8";
readonly tertiary: "#9CA3AF";
};
readonly light: {
readonly primary: "#0A0A0A";
readonly secondary: "#6B7280";
readonly tertiary: "#9CA3AF";
};
};
readonly brand: {
readonly primary: "#3B82F6";
readonly secondary: "#10B981";
readonly accent: "#8B5CF6";
readonly warning: "#F59E0B";
};
readonly semantic: {
readonly success: "#10B981";
readonly warning: "#F59E0B";
readonly error: "#EF4444";
readonly info: "#3B82F6";
};
};
export declare const getEnterpriseSpacing: (size: EnterpriseSpacing) => "0px" | "20px" | "16px" | "8px" | "24px" | "4px" | "40px" | "12px" | "32px" | "48px" | "64px" | "80px";
export declare const getEnterpriseTypography: (type: 'title' | 'big' | 'medium' | 'small' | 'mini') => {
readonly fontSize: "24px";
readonly fontWeight: "500";
readonly lineHeight: "28px";
} | {
readonly fontSize: "40px";
readonly fontWeight: "400";
readonly lineHeight: "44px";
} | {
readonly fontSize: "24px";
readonly fontWeight: "400";
readonly lineHeight: "28px";
} | {
readonly fontSize: "16px";
readonly fontWeight: "400";
readonly lineHeight: "20px";
} | {
readonly fontSize: "12px";
readonly fontWeight: "400";
readonly lineHeight: "16px";
};
export declare const createEnterpriseConfig: (overrides: {
brandColors?: Partial<typeof enterpriseFigmaTokens.colors.brand>;
fontFamily?: string;
containerSize?: Partial<typeof enterpriseFigmaTokens.sizing.container>;
}) => {
colors: {
brand: {
primary: "#3B82F6";
secondary: "#10B981";
accent: "#8B5CF6";
warning: "#F59E0B";
};
background: {
readonly dark: {
readonly primary: "#0A0A0A";
readonly secondary: "#313540";
readonly surface: "#1A1A1A";
};
readonly light: {
readonly primary: "#F5F5F5";
readonly secondary: "#FFFFFF";
readonly surface: "#FFFFFF";
};
};
text: {
readonly dark: {
readonly primary: "#FFFFFF";
readonly secondary: "#B8BCC8";
readonly tertiary: "#9CA3AF";
};
readonly light: {
readonly primary: "#0A0A0A";
readonly secondary: "#6B7280";
readonly tertiary: "#9CA3AF";
};
};
semantic: {
readonly success: "#10B981";
readonly warning: "#F59E0B";
readonly error: "#EF4444";
readonly info: "#3B82F6";
};
};
typography: {
fontFamily: {
primary: string;
fallback: "-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif";
};
widget: {
readonly title: {
readonly fontSize: "24px";
readonly fontWeight: "500";
readonly lineHeight: "28px";
};
readonly big: {
readonly fontSize: "40px";
readonly fontWeight: "400";
readonly lineHeight: "44px";
};
readonly medium: {
readonly fontSize: "24px";
readonly fontWeight: "400";
readonly lineHeight: "28px";
};
readonly small: {
readonly fontSize: "16px";
readonly fontWeight: "400";
readonly lineHeight: "20px";
};
readonly mini: {
readonly fontSize: "12px";
readonly fontWeight: "400";
readonly lineHeight: "16px";
};
};
heading: {
readonly h1: {
readonly fontSize: "48px";
readonly fontWeight: "600";
readonly lineHeight: "56px";
};
readonly h2: {
readonly fontSize: "36px";
readonly fontWeight: "600";
readonly lineHeight: "44px";
};
readonly h3: {
readonly fontSize: "30px";
readonly fontWeight: "500";
readonly lineHeight: "36px";
};
readonly h4: {
readonly fontSize: "24px";
readonly fontWeight: "500";
readonly lineHeight: "32px";
};
};
body: {
readonly large: {
readonly fontSize: "18px";
readonly fontWeight: "400";
readonly lineHeight: "28px";
};
readonly medium: {
readonly fontSize: "16px";
readonly fontWeight: "400";
readonly lineHeight: "24px";
};
readonly small: {
readonly fontSize: "14px";
readonly fontWeight: "400";
readonly lineHeight: "20px";
};
};
};
sizing: {
container: {
width: "430px";
height: "225px";
minHeight: "180px";
maxHeight: "600px";
};
slot: {
readonly width: "195px";
readonly height: "97px";
readonly gap: "15px";
};
icon: {
readonly xs: "12px";
readonly sm: "16px";
readonly md: "20px";
readonly lg: "24px";
readonly xl: "32px";
};
};
spacing: {
readonly widget: {
readonly containerPadding: "15px";
readonly titleMargin: "15px";
readonly titleHeight: "24px";
readonly titleOffset: "40px";
readonly slotGap: "15px";
readonly textGap: "6px";
readonly edgeOffset: "2px";
};
readonly scale: {
readonly '0': "0px";
readonly '1': "4px";
readonly '2': "8px";
readonly '3': "12px";
readonly '4': "16px";
readonly '5': "20px";
readonly '6': "24px";
readonly '8': "32px";
readonly '10': "40px";
readonly '12': "48px";
readonly '16': "64px";
readonly '20': "80px";
};
};
shadows: {
readonly widget: {
readonly default: "0 2px 8px rgba(0, 0, 0, 0.1)";
readonly hover: "0 4px 16px rgba(0, 0, 0, 0.15)";
readonly active: "0 1px 4px rgba(0, 0, 0, 0.1)";
};
readonly elevation: {
readonly low: "0 1px 3px rgba(0, 0, 0, 0.1)";
readonly medium: "0 4px 6px rgba(0, 0, 0, 0.1)";
readonly high: "0 10px 15px rgba(0, 0, 0, 0.1)";
readonly highest: "0 25px 50px rgba(0, 0, 0, 0.25)";
};
};
borderRadius: {
readonly none: "0px";
readonly sm: "4px";
readonly md: "8px";
readonly lg: "12px";
readonly xl: "16px";
readonly full: "9999px";
};
borders: {
readonly width: {
readonly thin: "1px";
readonly medium: "2px";
readonly thick: "4px";
};
readonly style: {
readonly solid: "solid";
readonly dashed: "dashed";
readonly dotted: "dotted";
};
readonly widget: {
readonly default: "1px solid rgba(0, 0, 0, 0.1)";
readonly dark: "1px solid rgba(255, 255, 255, 0.1)";
};
};
animations: {
readonly duration: {
readonly instant: "0ms";
readonly fast: "150ms";
readonly normal: "300ms";
readonly slow: "500ms";
};
readonly easing: {
readonly easeOut: "cubic-bezier(0.0, 0.0, 0.2, 1)";
readonly easeIn: "cubic-bezier(0.4, 0.0, 1, 1)";
readonly easeInOut: "cubic-bezier(0.4, 0.0, 0.2, 1)";
};
};
breakpoints: {
readonly mobile: "320px";
readonly tablet: "768px";
readonly desktop: "1024px";
readonly wide: "1440px";
};
};
export default enterpriseFigmaTokens;