/** * 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; export default layoutDesignTokens;