/** * 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;