@youwen/ai-design-system
Version:
Enterprise AI-driven design system with comprehensive design tokens
354 lines (353 loc) • 11.9 kB
TypeScript
/**
* Layout Design Tokens - Based on Figma specifications
* Source: Enterprise Figma design system analysis
*/
export declare const layoutFigmaTokens: {
readonly colors: {
readonly background: {
readonly dark: {
readonly primary: "#0A0A0A";
readonly secondary: "#313540";
readonly surface: "#1A1A1A";
};
readonly light: {
readonly primary: "#CDD0DD";
readonly secondary: "#F5F5F5";
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: "\"Scto Grotesk A\", -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 fontFamily: "Scto Grotesk A";
};
readonly big: {
readonly fontSize: "40px";
readonly fontWeight: "400";
readonly lineHeight: "44px";
readonly fontFamily: "Scto Grotesk A";
};
readonly medium: {
readonly fontSize: "24px";
readonly fontWeight: "400";
readonly lineHeight: "28px";
readonly fontFamily: "Scto Grotesk A";
};
readonly small: {
readonly fontSize: "16px";
readonly fontWeight: "400";
readonly lineHeight: "20px";
readonly fontFamily: "Scto Grotesk A";
};
readonly mini: {
readonly fontSize: "15px";
readonly fontWeight: "400";
readonly lineHeight: "18px";
readonly fontFamily: "Scto Grotesk A";
};
};
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: "546px";
readonly minHeight: "225px";
readonly maxHeight: "800px";
};
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(255, 255, 255, 0.1)";
readonly light: "1px solid rgba(0, 0, 0, 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 layoutThemeConfigs: {
readonly light: {
readonly colors: {
readonly background: "#CDD0DD";
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 layoutComponentTokens: {
readonly widget: {
readonly container: {
readonly width: "430px";
readonly minHeight: "225px";
readonly padding: "15px";
readonly borderRadius: "8px";
readonly border: "1px solid rgba(255, 255, 255, 0.1)";
readonly boxShadow: "0 2px 8px rgba(0, 0, 0, 0.1)";
};
readonly title: {
readonly fontSize: "24px";
readonly fontWeight: "500";
readonly fontFamily: "Scto Grotesk A";
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 LayoutColorMode = 'light' | 'dark';
export type LayoutBrandColor = keyof typeof layoutFigmaTokens.colors.brand;
export type LayoutSpacing = keyof typeof layoutFigmaTokens.spacing.scale;
export declare const getLayoutColor: (path: string, mode?: LayoutColorMode) => {
readonly background: {
readonly dark: {
readonly primary: "#0A0A0A";
readonly secondary: "#313540";
readonly surface: "#1A1A1A";
};
readonly light: {
readonly primary: "#CDD0DD";
readonly secondary: "#F5F5F5";
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 getLayoutSpacing: (size: LayoutSpacing) => "0px" | "20px" | "16px" | "8px" | "24px" | "4px" | "40px" | "12px" | "32px" | "48px" | "64px" | "80px";
export declare const getLayoutTypography: (type: 'title' | 'big' | 'medium' | 'small' | 'mini') => {
readonly fontSize: "24px";
readonly fontWeight: "500";
readonly lineHeight: "28px";
readonly fontFamily: "Scto Grotesk A";
} | {
readonly fontSize: "40px";
readonly fontWeight: "400";
readonly lineHeight: "44px";
readonly fontFamily: "Scto Grotesk A";
} | {
readonly fontSize: "24px";
readonly fontWeight: "400";
readonly lineHeight: "28px";
readonly fontFamily: "Scto Grotesk A";
} | {
readonly fontSize: "16px";
readonly fontWeight: "400";
readonly lineHeight: "20px";
readonly fontFamily: "Scto Grotesk A";
} | {
readonly fontSize: "15px";
readonly fontWeight: "400";
readonly lineHeight: "18px";
readonly fontFamily: "Scto Grotesk A";
};
export default layoutFigmaTokens;