@youwen/ai-design-system
Version:
Enterprise AI-driven design system with comprehensive design tokens
984 lines (983 loc) • 39.8 kB
TypeScript
/**
* 企业级Design Token系统架构
* 基于Token分层架构：基础Token -> 语义Token -> 组件Token
* 🎨 整合真实Figma色彩系统
*/
export declare const foundationTokens: {
readonly colors: {
readonly brand: {
readonly blue: {
readonly 50: "rgb(240, 248, 255)";
readonly 100: "rgb(224, 242, 255)";
readonly 200: "rgb(186, 230, 255)";
readonly 300: "rgb(111, 188, 255)";
readonly 400: "rgb(80, 187, 255)";
readonly 500: "rgb(51, 160, 255)";
readonly 600: "rgb(41, 128, 204)";
readonly 700: "rgb(31, 96, 153)";
readonly 800: "rgb(21, 64, 102)";
readonly 900: "rgb(11, 32, 51)";
readonly 950: "rgb(5, 16, 26)";
};
readonly green: {
readonly 50: "rgb(240, 253, 244)";
readonly 100: "rgb(220, 252, 231)";
readonly 200: "rgb(187, 247, 208)";
readonly 300: "rgb(74, 222, 128)";
readonly 400: "rgb(34, 197, 94)";
readonly 500: "rgb(22, 163, 74)";
readonly 600: "rgb(21, 128, 61)";
readonly 700: "rgb(22, 101, 52)";
readonly 800: "rgb(20, 83, 45)";
readonly 900: "rgb(14, 57, 31)";
readonly 950: "rgb(7, 29, 15)";
};
readonly nebula: {
readonly 50: "rgb(250, 245, 255)";
readonly 100: "rgb(243, 232, 255)";
readonly 200: "rgb(233, 213, 255)";
readonly 300: "rgb(168, 131, 255)";
readonly 400: "rgb(138, 91, 255)";
readonly 500: "rgb(124, 58, 237)";
readonly 600: "rgb(109, 40, 217)";
readonly 700: "rgb(91, 33, 182)";
readonly 800: "rgb(76, 29, 149)";
readonly 900: "rgb(58, 23, 114)";
readonly 950: "rgb(29, 11, 57)";
};
readonly amber: {
readonly 50: "rgb(255, 251, 235)";
readonly 100: "rgb(255, 243, 206)";
readonly 200: "rgb(255, 233, 158)";
readonly 300: "rgb(255, 183, 107)";
readonly 400: "rgb(255, 151, 71)";
readonly 500: "rgb(245, 130, 33)";
readonly 600: "rgb(217, 119, 6)";
readonly 700: "rgb(180, 83, 9)";
readonly 800: "rgb(146, 64, 14)";
readonly 900: "rgb(120, 53, 15)";
readonly 950: "rgb(69, 26, 3)";
};
readonly horizon: {
readonly 50: "rgb(255, 245, 245)";
readonly 100: "rgb(255, 235, 235)";
readonly 200: "rgb(255, 205, 205)";
readonly 300: "rgb(255, 141, 127)";
readonly 400: "rgb(255, 111, 97)";
readonly 500: "rgb(239, 68, 68)";
readonly 600: "rgb(220, 38, 38)";
readonly 700: "rgb(185, 28, 28)";
readonly 800: "rgb(153, 27, 27)";
readonly 900: "rgb(127, 29, 29)";
readonly 950: "rgb(69, 10, 10)";
};
};
readonly neutral: {
readonly 50: "oklch(0.98 0 0)";
readonly 100: "oklch(0.96 0 0)";
readonly 200: "oklch(0.93 0 0)";
readonly 300: "oklch(0.88 0 0)";
readonly 400: "oklch(0.74 0 0)";
readonly 500: "oklch(0.58 0 0)";
readonly 600: "oklch(0.48 0 0)";
readonly 700: "oklch(0.40 0 0)";
readonly 800: "oklch(0.27 0 0)";
readonly 900: "oklch(0.15 0 0)";
readonly 950: "oklch(0.05 0 0)";
};
readonly functional: {
readonly success: "oklch(0.65 0.18 150)";
readonly warning: "oklch(0.75 0.15 45)";
readonly error: "oklch(0.60 0.20 25)";
readonly info: "oklch(0.65 0.18 240)";
};
readonly pure: {
readonly white: "oklch(1 0 0)";
readonly black: "oklch(0 0 0)";
readonly transparent: "transparent";
};
};
readonly typography: {
readonly fontFamily: {
readonly primary: "\"Scto Grotesk A\", \"Inter\", ui-sans-serif, system-ui, sans-serif";
readonly fallback: "ui-sans-serif, system-ui, sans-serif";
};
readonly fontSize: {
readonly mini: "10px";
readonly small: "16px";
readonly medium: "24px";
readonly big: "40px";
readonly xs: "12px";
readonly sm: "14px";
readonly base: "16px";
readonly lg: "18px";
readonly xl: "20px";
readonly '2xl': "24px";
readonly '3xl': "30px";
readonly '4xl': "36px";
readonly '5xl': "48px";
};
readonly lineHeight: {
readonly mini: "7px";
readonly small: "11px";
readonly medium: "17px";
readonly big: "28px";
readonly tight: "1.25";
readonly snug: "1.375";
readonly normal: "1.5";
readonly relaxed: "1.625";
readonly loose: "2";
};
readonly fontWeight: {
readonly normal: "400";
readonly medium: "500";
readonly semibold: "600";
readonly bold: "700";
};
};
readonly spacing: {
readonly containerPadding: "15px";
readonly slotGap: "15px";
readonly textGap: "6px";
readonly edgeOffset: "2px";
readonly listRowGap: "18px";
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 24: "96px";
readonly 32: "128px";
};
readonly sizing: {
readonly containerWidth: "430px";
readonly containerHeight: "225px";
readonly slotWidth: "195px";
readonly slotHeight: "97px";
readonly xs: "20px";
readonly sm: "24px";
readonly md: "28px";
readonly lg: "32px";
readonly xl: "36px";
readonly '2xl': "44px";
readonly '3xl': "48px";
};
readonly borderRadius: {
readonly none: "0px";
readonly sm: "2px";
readonly md: "4px";
readonly lg: "6px";
readonly xl: "8px";
readonly '2xl': "12px";
readonly '3xl': "16px";
readonly full: "9999px";
};
readonly shadow: {
readonly sm: "0 1px 2px 0 rgb(0 0 0 / 0.05)";
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 opacity: {
readonly 0: "0";
readonly 5: "0.05";
readonly 10: "0.1";
readonly 20: "0.2";
readonly 25: "0.25";
readonly 30: "0.3";
readonly 40: "0.4";
readonly 50: "0.5";
readonly 60: "0.6";
readonly 70: "0.7";
readonly 75: "0.75";
readonly 80: "0.8";
readonly 90: "0.9";
readonly 95: "0.95";
readonly 100: "1";
};
};
export declare const semanticTokens: {
readonly colors: {
readonly text: {
readonly primary: "oklch(0.05 0 0)";
readonly secondary: "oklch(0.48 0 0)";
readonly tertiary: "oklch(0.58 0 0)";
readonly disabled: "oklch(0.74 0 0)";
readonly inverse: "oklch(1 0 0)";
readonly brand: "{brand.500}";
readonly success: "oklch(0.65 0.18 150)";
readonly warning: "oklch(0.75 0.15 45)";
readonly error: "oklch(0.60 0.20 25)";
readonly info: "oklch(0.65 0.18 240)";
};
readonly background: {
readonly primary: "oklch(1 0 0)";
readonly secondary: "oklch(0.98 0 0)";
readonly tertiary: "oklch(0.96 0 0)";
readonly inverse: "oklch(0.05 0 0)";
readonly brand: "{brand.500}";
readonly brandLight: "{brand.50}";
readonly success: "oklch(0.65 0.18 150)";
readonly warning: "oklch(0.75 0.15 45)";
readonly error: "oklch(0.60 0.20 25)";
readonly info: "oklch(0.65 0.18 240)";
};
readonly border: {
readonly default: "oklch(0.93 0 0)";
readonly primary: "oklch(0.93 0 0)";
readonly secondary: "oklch(0.88 0 0)";
readonly tertiary: "oklch(0.74 0 0)";
readonly brand: "{brand.500}";
readonly success: "oklch(0.65 0.18 150)";
readonly warning: "oklch(0.75 0.15 45)";
readonly error: "oklch(0.60 0.20 25)";
readonly info: "oklch(0.65 0.18 240)";
};
readonly surface: {
readonly primary: "oklch(1 0 0)";
readonly secondary: "oklch(0.98 0 0)";
readonly tertiary: "oklch(0.96 0 0)";
readonly brand: "{brand.50}";
readonly success: "oklch(0.98 0 0)";
readonly warning: "oklch(0.98 0 0)";
readonly error: "oklch(0.98 0 0)";
readonly info: "oklch(0.98 0 0)";
};
readonly success: {
readonly text: "oklch(0.65 0.18 150)";
readonly background: "oklch(0.98 0 0)";
readonly border: "oklch(0.65 0.18 150)";
};
readonly error: {
readonly text: "oklch(0.60 0.20 25)";
readonly background: "oklch(0.98 0 0)";
readonly border: "oklch(0.60 0.20 25)";
};
readonly interactive: {
readonly primary: "{brand.500}";
readonly primaryHover: "{brand.600}";
readonly primaryActive: "{brand.700}";
readonly primaryDisabled: "oklch(0.88 0 0)";
readonly secondary: "oklch(0.96 0 0)";
readonly secondaryHover: "oklch(0.93 0 0)";
readonly secondaryActive: "oklch(0.88 0 0)";
};
};
readonly typography: {
readonly widget: {
readonly big: {
readonly fontFamily: "\"Scto Grotesk A\", \"Inter\", ui-sans-serif, system-ui, sans-serif";
readonly fontSize: "40px";
readonly lineHeight: "28px";
readonly fontWeight: "400";
};
readonly medium: {
readonly fontFamily: "\"Scto Grotesk A\", \"Inter\", ui-sans-serif, system-ui, sans-serif";
readonly fontSize: "24px";
readonly lineHeight: "17px";
readonly fontWeight: "400";
};
readonly small: {
readonly fontFamily: "\"Scto Grotesk A\", \"Inter\", ui-sans-serif, system-ui, sans-serif";
readonly fontSize: "16px";
readonly lineHeight: "11px";
readonly fontWeight: "400";
};
readonly mini: {
readonly fontFamily: "\"Scto Grotesk A\", \"Inter\", ui-sans-serif, system-ui, sans-serif";
readonly fontSize: "10px";
readonly lineHeight: "7px";
readonly fontWeight: "400";
};
};
readonly heading: {
readonly h1: {
readonly fontFamily: "\"Scto Grotesk A\", \"Inter\", ui-sans-serif, system-ui, sans-serif";
readonly fontSize: "48px";
readonly lineHeight: "1.25";
readonly fontWeight: "700";
};
readonly h2: {
readonly fontFamily: "\"Scto Grotesk A\", \"Inter\", ui-sans-serif, system-ui, sans-serif";
readonly fontSize: "36px";
readonly lineHeight: "1.25";
readonly fontWeight: "700";
};
readonly h3: {
readonly fontFamily: "\"Scto Grotesk A\", \"Inter\", ui-sans-serif, system-ui, sans-serif";
readonly fontSize: "30px";
readonly lineHeight: "1.25";
readonly fontWeight: "600";
};
};
readonly body: {
readonly large: {
readonly fontFamily: "\"Scto Grotesk A\", \"Inter\", ui-sans-serif, system-ui, sans-serif";
readonly fontSize: "18px";
readonly lineHeight: "1.5";
readonly fontWeight: "400";
};
readonly medium: {
readonly fontFamily: "\"Scto Grotesk A\", \"Inter\", ui-sans-serif, system-ui, sans-serif";
readonly fontSize: "16px";
readonly lineHeight: "1.5";
readonly fontWeight: "400";
};
readonly small: {
readonly fontFamily: "\"Scto Grotesk A\", \"Inter\", ui-sans-serif, system-ui, sans-serif";
readonly fontSize: "14px";
readonly lineHeight: "1.5";
readonly fontWeight: "400";
};
};
};
readonly spacing: {
readonly widget: {
readonly containerPadding: "15px";
readonly slotGap: "15px";
readonly textGap: "6px";
readonly edgeOffset: "2px";
readonly listRowGap: "18px";
};
readonly layout: {
readonly xs: "4px";
readonly sm: "8px";
readonly md: "16px";
readonly lg: "24px";
readonly xl: "32px";
};
readonly component: {
readonly tight: "4px";
readonly normal: "8px";
readonly relaxed: "16px";
readonly loose: "24px";
};
};
readonly sizing: {
readonly widget: {
readonly containerWidth: "430px";
readonly containerHeight: "225px";
readonly slotWidth: "195px";
readonly slotHeight: "97px";
};
readonly interactive: {
readonly touchTarget: "48px";
readonly buttonHeight: "44px";
readonly inputHeight: "44px";
};
};
};
export declare const componentTokens: {
readonly widget: {
readonly container: {
readonly width: "430px";
readonly height: "225px";
readonly padding: "15px";
readonly backgroundColor: "oklch(1 0 0)";
readonly borderColor: "oklch(0.93 0 0)";
readonly borderRadius: "6px";
readonly boxShadow: "0 1px 2px 0 rgb(0 0 0 / 0.05)";
};
readonly slot: {
readonly width: "195px";
readonly height: "97px";
readonly gap: "15px";
};
readonly text: {
readonly big: {
readonly fontFamily: "\"Scto Grotesk A\", \"Inter\", ui-sans-serif, system-ui, sans-serif";
readonly fontSize: "40px";
readonly lineHeight: "28px";
readonly fontWeight: "400";
};
readonly medium: {
readonly fontFamily: "\"Scto Grotesk A\", \"Inter\", ui-sans-serif, system-ui, sans-serif";
readonly fontSize: "24px";
readonly lineHeight: "17px";
readonly fontWeight: "400";
};
readonly small: {
readonly fontFamily: "\"Scto Grotesk A\", \"Inter\", ui-sans-serif, system-ui, sans-serif";
readonly fontSize: "16px";
readonly lineHeight: "11px";
readonly fontWeight: "400";
};
readonly mini: {
readonly fontFamily: "\"Scto Grotesk A\", \"Inter\", ui-sans-serif, system-ui, sans-serif";
readonly fontSize: "10px";
readonly lineHeight: "7px";
readonly fontWeight: "400";
};
readonly gap: "6px";
readonly edgeOffset: "2px";
readonly color: "oklch(0.05 0 0)";
};
};
readonly button: {
readonly primary: {
readonly backgroundColor: "{brand.500}";
readonly color: "oklch(1 0 0)";
readonly borderColor: "{brand.500}";
readonly borderRadius: "4px";
readonly height: "44px";
readonly padding: "8px 16px";
readonly fontSize: "16px";
readonly fontWeight: "500";
readonly hover: {
readonly backgroundColor: "{brand.600}";
};
readonly active: {
readonly backgroundColor: "{brand.700}";
};
readonly disabled: {
readonly backgroundColor: "oklch(0.88 0 0)";
readonly color: "oklch(0.74 0 0)";
};
};
readonly secondary: {
readonly backgroundColor: "oklch(0.96 0 0)";
readonly color: "oklch(0.05 0 0)";
readonly borderColor: "oklch(0.93 0 0)";
readonly borderRadius: "4px";
readonly height: "44px";
readonly padding: "8px 16px";
readonly fontSize: "16px";
readonly fontWeight: "500";
readonly hover: {
readonly backgroundColor: "oklch(0.93 0 0)";
};
readonly active: {
readonly backgroundColor: "oklch(0.88 0 0)";
};
};
};
readonly input: {
readonly backgroundColor: "oklch(1 0 0)";
readonly borderColor: "oklch(0.93 0 0)";
readonly borderRadius: "4px";
readonly height: "44px";
readonly padding: "8px 12px";
readonly fontSize: "16px";
readonly color: "oklch(0.05 0 0)";
readonly placeholder: {
readonly color: "oklch(0.58 0 0)";
};
readonly focus: {
readonly borderColor: "{brand.500}";
readonly boxShadow: "0 0 0 3px {brand.500}20";
};
readonly error: {
readonly borderColor: "oklch(0.60 0.20 25)";
readonly boxShadow: "0 0 0 3px oklch(0.60 0.20 25)20";
};
};
readonly card: {
readonly backgroundColor: "oklch(1 0 0)";
readonly borderColor: "oklch(0.93 0 0)";
readonly borderRadius: "8px";
readonly padding: "24px";
readonly boxShadow: "0 1px 2px 0 rgb(0 0 0 / 0.05)";
readonly hover: {
readonly boxShadow: "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)";
};
};
};
export type FoundationTokens = typeof foundationTokens;
export type SemanticTokens = typeof semanticTokens;
export type ComponentTokens = typeof componentTokens;
export declare const designTokens: {
readonly foundation: {
readonly colors: {
readonly brand: {
readonly blue: {
readonly 50: "rgb(240, 248, 255)";
readonly 100: "rgb(224, 242, 255)";
readonly 200: "rgb(186, 230, 255)";
readonly 300: "rgb(111, 188, 255)";
readonly 400: "rgb(80, 187, 255)";
readonly 500: "rgb(51, 160, 255)";
readonly 600: "rgb(41, 128, 204)";
readonly 700: "rgb(31, 96, 153)";
readonly 800: "rgb(21, 64, 102)";
readonly 900: "rgb(11, 32, 51)";
readonly 950: "rgb(5, 16, 26)";
};
readonly green: {
readonly 50: "rgb(240, 253, 244)";
readonly 100: "rgb(220, 252, 231)";
readonly 200: "rgb(187, 247, 208)";
readonly 300: "rgb(74, 222, 128)";
readonly 400: "rgb(34, 197, 94)";
readonly 500: "rgb(22, 163, 74)";
readonly 600: "rgb(21, 128, 61)";
readonly 700: "rgb(22, 101, 52)";
readonly 800: "rgb(20, 83, 45)";
readonly 900: "rgb(14, 57, 31)";
readonly 950: "rgb(7, 29, 15)";
};
readonly nebula: {
readonly 50: "rgb(250, 245, 255)";
readonly 100: "rgb(243, 232, 255)";
readonly 200: "rgb(233, 213, 255)";
readonly 300: "rgb(168, 131, 255)";
readonly 400: "rgb(138, 91, 255)";
readonly 500: "rgb(124, 58, 237)";
readonly 600: "rgb(109, 40, 217)";
readonly 700: "rgb(91, 33, 182)";
readonly 800: "rgb(76, 29, 149)";
readonly 900: "rgb(58, 23, 114)";
readonly 950: "rgb(29, 11, 57)";
};
readonly amber: {
readonly 50: "rgb(255, 251, 235)";
readonly 100: "rgb(255, 243, 206)";
readonly 200: "rgb(255, 233, 158)";
readonly 300: "rgb(255, 183, 107)";
readonly 400: "rgb(255, 151, 71)";
readonly 500: "rgb(245, 130, 33)";
readonly 600: "rgb(217, 119, 6)";
readonly 700: "rgb(180, 83, 9)";
readonly 800: "rgb(146, 64, 14)";
readonly 900: "rgb(120, 53, 15)";
readonly 950: "rgb(69, 26, 3)";
};
readonly horizon: {
readonly 50: "rgb(255, 245, 245)";
readonly 100: "rgb(255, 235, 235)";
readonly 200: "rgb(255, 205, 205)";
readonly 300: "rgb(255, 141, 127)";
readonly 400: "rgb(255, 111, 97)";
readonly 500: "rgb(239, 68, 68)";
readonly 600: "rgb(220, 38, 38)";
readonly 700: "rgb(185, 28, 28)";
readonly 800: "rgb(153, 27, 27)";
readonly 900: "rgb(127, 29, 29)";
readonly 950: "rgb(69, 10, 10)";
};
};
readonly neutral: {
readonly 50: "oklch(0.98 0 0)";
readonly 100: "oklch(0.96 0 0)";
readonly 200: "oklch(0.93 0 0)";
readonly 300: "oklch(0.88 0 0)";
readonly 400: "oklch(0.74 0 0)";
readonly 500: "oklch(0.58 0 0)";
readonly 600: "oklch(0.48 0 0)";
readonly 700: "oklch(0.40 0 0)";
readonly 800: "oklch(0.27 0 0)";
readonly 900: "oklch(0.15 0 0)";
readonly 950: "oklch(0.05 0 0)";
};
readonly functional: {
readonly success: "oklch(0.65 0.18 150)";
readonly warning: "oklch(0.75 0.15 45)";
readonly error: "oklch(0.60 0.20 25)";
readonly info: "oklch(0.65 0.18 240)";
};
readonly pure: {
readonly white: "oklch(1 0 0)";
readonly black: "oklch(0 0 0)";
readonly transparent: "transparent";
};
};
readonly typography: {
readonly fontFamily: {
readonly primary: "\"Scto Grotesk A\", \"Inter\", ui-sans-serif, system-ui, sans-serif";
readonly fallback: "ui-sans-serif, system-ui, sans-serif";
};
readonly fontSize: {
readonly mini: "10px";
readonly small: "16px";
readonly medium: "24px";
readonly big: "40px";
readonly xs: "12px";
readonly sm: "14px";
readonly base: "16px";
readonly lg: "18px";
readonly xl: "20px";
readonly '2xl': "24px";
readonly '3xl': "30px";
readonly '4xl': "36px";
readonly '5xl': "48px";
};
readonly lineHeight: {
readonly mini: "7px";
readonly small: "11px";
readonly medium: "17px";
readonly big: "28px";
readonly tight: "1.25";
readonly snug: "1.375";
readonly normal: "1.5";
readonly relaxed: "1.625";
readonly loose: "2";
};
readonly fontWeight: {
readonly normal: "400";
readonly medium: "500";
readonly semibold: "600";
readonly bold: "700";
};
};
readonly spacing: {
readonly containerPadding: "15px";
readonly slotGap: "15px";
readonly textGap: "6px";
readonly edgeOffset: "2px";
readonly listRowGap: "18px";
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 24: "96px";
readonly 32: "128px";
};
readonly sizing: {
readonly containerWidth: "430px";
readonly containerHeight: "225px";
readonly slotWidth: "195px";
readonly slotHeight: "97px";
readonly xs: "20px";
readonly sm: "24px";
readonly md: "28px";
readonly lg: "32px";
readonly xl: "36px";
readonly '2xl': "44px";
readonly '3xl': "48px";
};
readonly borderRadius: {
readonly none: "0px";
readonly sm: "2px";
readonly md: "4px";
readonly lg: "6px";
readonly xl: "8px";
readonly '2xl': "12px";
readonly '3xl': "16px";
readonly full: "9999px";
};
readonly shadow: {
readonly sm: "0 1px 2px 0 rgb(0 0 0 / 0.05)";
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 opacity: {
readonly 0: "0";
readonly 5: "0.05";
readonly 10: "0.1";
readonly 20: "0.2";
readonly 25: "0.25";
readonly 30: "0.3";
readonly 40: "0.4";
readonly 50: "0.5";
readonly 60: "0.6";
readonly 70: "0.7";
readonly 75: "0.75";
readonly 80: "0.8";
readonly 90: "0.9";
readonly 95: "0.95";
readonly 100: "1";
};
};
readonly semantic: {
readonly colors: {
readonly text: {
readonly primary: "oklch(0.05 0 0)";
readonly secondary: "oklch(0.48 0 0)";
readonly tertiary: "oklch(0.58 0 0)";
readonly disabled: "oklch(0.74 0 0)";
readonly inverse: "oklch(1 0 0)";
readonly brand: "{brand.500}";
readonly success: "oklch(0.65 0.18 150)";
readonly warning: "oklch(0.75 0.15 45)";
readonly error: "oklch(0.60 0.20 25)";
readonly info: "oklch(0.65 0.18 240)";
};
readonly background: {
readonly primary: "oklch(1 0 0)";
readonly secondary: "oklch(0.98 0 0)";
readonly tertiary: "oklch(0.96 0 0)";
readonly inverse: "oklch(0.05 0 0)";
readonly brand: "{brand.500}";
readonly brandLight: "{brand.50}";
readonly success: "oklch(0.65 0.18 150)";
readonly warning: "oklch(0.75 0.15 45)";
readonly error: "oklch(0.60 0.20 25)";
readonly info: "oklch(0.65 0.18 240)";
};
readonly border: {
readonly default: "oklch(0.93 0 0)";
readonly primary: "oklch(0.93 0 0)";
readonly secondary: "oklch(0.88 0 0)";
readonly tertiary: "oklch(0.74 0 0)";
readonly brand: "{brand.500}";
readonly success: "oklch(0.65 0.18 150)";
readonly warning: "oklch(0.75 0.15 45)";
readonly error: "oklch(0.60 0.20 25)";
readonly info: "oklch(0.65 0.18 240)";
};
readonly surface: {
readonly primary: "oklch(1 0 0)";
readonly secondary: "oklch(0.98 0 0)";
readonly tertiary: "oklch(0.96 0 0)";
readonly brand: "{brand.50}";
readonly success: "oklch(0.98 0 0)";
readonly warning: "oklch(0.98 0 0)";
readonly error: "oklch(0.98 0 0)";
readonly info: "oklch(0.98 0 0)";
};
readonly success: {
readonly text: "oklch(0.65 0.18 150)";
readonly background: "oklch(0.98 0 0)";
readonly border: "oklch(0.65 0.18 150)";
};
readonly error: {
readonly text: "oklch(0.60 0.20 25)";
readonly background: "oklch(0.98 0 0)";
readonly border: "oklch(0.60 0.20 25)";
};
readonly interactive: {
readonly primary: "{brand.500}";
readonly primaryHover: "{brand.600}";
readonly primaryActive: "{brand.700}";
readonly primaryDisabled: "oklch(0.88 0 0)";
readonly secondary: "oklch(0.96 0 0)";
readonly secondaryHover: "oklch(0.93 0 0)";
readonly secondaryActive: "oklch(0.88 0 0)";
};
};
readonly typography: {
readonly widget: {
readonly big: {
readonly fontFamily: "\"Scto Grotesk A\", \"Inter\", ui-sans-serif, system-ui, sans-serif";
readonly fontSize: "40px";
readonly lineHeight: "28px";
readonly fontWeight: "400";
};
readonly medium: {
readonly fontFamily: "\"Scto Grotesk A\", \"Inter\", ui-sans-serif, system-ui, sans-serif";
readonly fontSize: "24px";
readonly lineHeight: "17px";
readonly fontWeight: "400";
};
readonly small: {
readonly fontFamily: "\"Scto Grotesk A\", \"Inter\", ui-sans-serif, system-ui, sans-serif";
readonly fontSize: "16px";
readonly lineHeight: "11px";
readonly fontWeight: "400";
};
readonly mini: {
readonly fontFamily: "\"Scto Grotesk A\", \"Inter\", ui-sans-serif, system-ui, sans-serif";
readonly fontSize: "10px";
readonly lineHeight: "7px";
readonly fontWeight: "400";
};
};
readonly heading: {
readonly h1: {
readonly fontFamily: "\"Scto Grotesk A\", \"Inter\", ui-sans-serif, system-ui, sans-serif";
readonly fontSize: "48px";
readonly lineHeight: "1.25";
readonly fontWeight: "700";
};
readonly h2: {
readonly fontFamily: "\"Scto Grotesk A\", \"Inter\", ui-sans-serif, system-ui, sans-serif";
readonly fontSize: "36px";
readonly lineHeight: "1.25";
readonly fontWeight: "700";
};
readonly h3: {
readonly fontFamily: "\"Scto Grotesk A\", \"Inter\", ui-sans-serif, system-ui, sans-serif";
readonly fontSize: "30px";
readonly lineHeight: "1.25";
readonly fontWeight: "600";
};
};
readonly body: {
readonly large: {
readonly fontFamily: "\"Scto Grotesk A\", \"Inter\", ui-sans-serif, system-ui, sans-serif";
readonly fontSize: "18px";
readonly lineHeight: "1.5";
readonly fontWeight: "400";
};
readonly medium: {
readonly fontFamily: "\"Scto Grotesk A\", \"Inter\", ui-sans-serif, system-ui, sans-serif";
readonly fontSize: "16px";
readonly lineHeight: "1.5";
readonly fontWeight: "400";
};
readonly small: {
readonly fontFamily: "\"Scto Grotesk A\", \"Inter\", ui-sans-serif, system-ui, sans-serif";
readonly fontSize: "14px";
readonly lineHeight: "1.5";
readonly fontWeight: "400";
};
};
};
readonly spacing: {
readonly widget: {
readonly containerPadding: "15px";
readonly slotGap: "15px";
readonly textGap: "6px";
readonly edgeOffset: "2px";
readonly listRowGap: "18px";
};
readonly layout: {
readonly xs: "4px";
readonly sm: "8px";
readonly md: "16px";
readonly lg: "24px";
readonly xl: "32px";
};
readonly component: {
readonly tight: "4px";
readonly normal: "8px";
readonly relaxed: "16px";
readonly loose: "24px";
};
};
readonly sizing: {
readonly widget: {
readonly containerWidth: "430px";
readonly containerHeight: "225px";
readonly slotWidth: "195px";
readonly slotHeight: "97px";
};
readonly interactive: {
readonly touchTarget: "48px";
readonly buttonHeight: "44px";
readonly inputHeight: "44px";
};
};
};
readonly component: {
readonly widget: {
readonly container: {
readonly width: "430px";
readonly height: "225px";
readonly padding: "15px";
readonly backgroundColor: "oklch(1 0 0)";
readonly borderColor: "oklch(0.93 0 0)";
readonly borderRadius: "6px";
readonly boxShadow: "0 1px 2px 0 rgb(0 0 0 / 0.05)";
};
readonly slot: {
readonly width: "195px";
readonly height: "97px";
readonly gap: "15px";
};
readonly text: {
readonly big: {
readonly fontFamily: "\"Scto Grotesk A\", \"Inter\", ui-sans-serif, system-ui, sans-serif";
readonly fontSize: "40px";
readonly lineHeight: "28px";
readonly fontWeight: "400";
};
readonly medium: {
readonly fontFamily: "\"Scto Grotesk A\", \"Inter\", ui-sans-serif, system-ui, sans-serif";
readonly fontSize: "24px";
readonly lineHeight: "17px";
readonly fontWeight: "400";
};
readonly small: {
readonly fontFamily: "\"Scto Grotesk A\", \"Inter\", ui-sans-serif, system-ui, sans-serif";
readonly fontSize: "16px";
readonly lineHeight: "11px";
readonly fontWeight: "400";
};
readonly mini: {
readonly fontFamily: "\"Scto Grotesk A\", \"Inter\", ui-sans-serif, system-ui, sans-serif";
readonly fontSize: "10px";
readonly lineHeight: "7px";
readonly fontWeight: "400";
};
readonly gap: "6px";
readonly edgeOffset: "2px";
readonly color: "oklch(0.05 0 0)";
};
};
readonly button: {
readonly primary: {
readonly backgroundColor: "{brand.500}";
readonly color: "oklch(1 0 0)";
readonly borderColor: "{brand.500}";
readonly borderRadius: "4px";
readonly height: "44px";
readonly padding: "8px 16px";
readonly fontSize: "16px";
readonly fontWeight: "500";
readonly hover: {
readonly backgroundColor: "{brand.600}";
};
readonly active: {
readonly backgroundColor: "{brand.700}";
};
readonly disabled: {
readonly backgroundColor: "oklch(0.88 0 0)";
readonly color: "oklch(0.74 0 0)";
};
};
readonly secondary: {
readonly backgroundColor: "oklch(0.96 0 0)";
readonly color: "oklch(0.05 0 0)";
readonly borderColor: "oklch(0.93 0 0)";
readonly borderRadius: "4px";
readonly height: "44px";
readonly padding: "8px 16px";
readonly fontSize: "16px";
readonly fontWeight: "500";
readonly hover: {
readonly backgroundColor: "oklch(0.93 0 0)";
};
readonly active: {
readonly backgroundColor: "oklch(0.88 0 0)";
};
};
};
readonly input: {
readonly backgroundColor: "oklch(1 0 0)";
readonly borderColor: "oklch(0.93 0 0)";
readonly borderRadius: "4px";
readonly height: "44px";
readonly padding: "8px 12px";
readonly fontSize: "16px";
readonly color: "oklch(0.05 0 0)";
readonly placeholder: {
readonly color: "oklch(0.58 0 0)";
};
readonly focus: {
readonly borderColor: "{brand.500}";
readonly boxShadow: "0 0 0 3px {brand.500}20";
};
readonly error: {
readonly borderColor: "oklch(0.60 0.20 25)";
readonly boxShadow: "0 0 0 3px oklch(0.60 0.20 25)20";
};
};
readonly card: {
readonly backgroundColor: "oklch(1 0 0)";
readonly borderColor: "oklch(0.93 0 0)";
readonly borderRadius: "8px";
readonly padding: "24px";
readonly boxShadow: "0 1px 2px 0 rgb(0 0 0 / 0.05)";
readonly hover: {
readonly boxShadow: "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)";
};
};
};
};
export type DesignTokens = typeof designTokens;