@youwen/ai-design-system
Version:
Enterprise AI-driven design system with comprehensive design tokens
307 lines (306 loc) • 13.6 kB
TypeScript
/**
* 通用企业级色彩Design Token系统
* 基于shadcn架构 + Figma多主题设计模式
* 支持多主题切换，完全去业务化
*/
export declare const baseColors: {
readonly themes: {
readonly blue: {
readonly 50: "oklch(0.95 0.05 240)";
readonly 100: "oklch(0.90 0.10 240)";
readonly 200: "oklch(0.80 0.15 240)";
readonly 300: "oklch(0.70 0.20 240)";
readonly 400: "oklch(0.60 0.25 240)";
readonly 500: "oklch(0.50 0.30 240)";
readonly 600: "oklch(0.45 0.28 240)";
readonly 700: "oklch(0.40 0.25 240)";
readonly 800: "oklch(0.35 0.22 240)";
readonly 900: "oklch(0.30 0.18 240)";
readonly 950: "oklch(0.20 0.15 240)";
};
readonly green: {
readonly 50: "oklch(0.95 0.05 150)";
readonly 100: "oklch(0.90 0.10 150)";
readonly 200: "oklch(0.80 0.15 150)";
readonly 300: "oklch(0.70 0.20 150)";
readonly 400: "oklch(0.60 0.25 150)";
readonly 500: "oklch(0.50 0.30 150)";
readonly 600: "oklch(0.45 0.28 150)";
readonly 700: "oklch(0.40 0.25 150)";
readonly 800: "oklch(0.35 0.22 150)";
readonly 900: "oklch(0.30 0.18 150)";
readonly 950: "oklch(0.20 0.15 150)";
};
readonly purple: {
readonly 50: "oklch(0.95 0.05 280)";
readonly 100: "oklch(0.90 0.10 280)";
readonly 200: "oklch(0.80 0.15 280)";
readonly 300: "oklch(0.70 0.20 280)";
readonly 400: "oklch(0.60 0.25 280)";
readonly 500: "oklch(0.50 0.30 280)";
readonly 600: "oklch(0.45 0.28 280)";
readonly 700: "oklch(0.40 0.25 280)";
readonly 800: "oklch(0.35 0.22 280)";
readonly 900: "oklch(0.30 0.18 280)";
readonly 950: "oklch(0.20 0.15 280)";
};
readonly amber: {
readonly 50: "oklch(0.95 0.05 45)";
readonly 100: "oklch(0.90 0.10 45)";
readonly 200: "oklch(0.80 0.15 45)";
readonly 300: "oklch(0.70 0.20 45)";
readonly 400: "oklch(0.60 0.25 45)";
readonly 500: "oklch(0.50 0.30 45)";
readonly 600: "oklch(0.45 0.28 45)";
readonly 700: "oklch(0.40 0.25 45)";
readonly 800: "oklch(0.35 0.22 45)";
readonly 900: "oklch(0.30 0.18 45)";
readonly 950: "oklch(0.20 0.15 45)";
};
};
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)";
};
};
export declare const semanticColors: {
readonly light: {
readonly background: "oklch(1 0 0)";
readonly foreground: "oklch(0.09 0 0)";
readonly card: "oklch(1 0 0)";
readonly cardForeground: "oklch(0.09 0 0)";
readonly popover: "oklch(1 0 0)";
readonly popoverForeground: "oklch(0.09 0 0)";
readonly primary: "var(--theme-500)";
readonly primaryForeground: "oklch(0.98 0 0)";
readonly secondary: "oklch(0.96 0 0)";
readonly secondaryForeground: "oklch(0.09 0 0)";
readonly muted: "oklch(0.96 0 0)";
readonly mutedForeground: "oklch(0.48 0 0)";
readonly accent: "oklch(0.96 0 0)";
readonly accentForeground: "oklch(0.09 0 0)";
readonly destructive: "oklch(0.60 0.20 25)";
readonly destructiveForeground: "oklch(0.98 0 0)";
readonly border: "oklch(0.92 0 0)";
readonly input: "oklch(0.92 0 0)";
readonly ring: "var(--theme-500)";
readonly chart1: "var(--theme-500)";
readonly chart2: "var(--theme-600)";
readonly chart3: "var(--theme-400)";
readonly chart4: "var(--theme-700)";
readonly chart5: "var(--theme-300)";
};
readonly dark: {
readonly background: "oklch(0.05 0 0)";
readonly foreground: "oklch(0.98 0 0)";
readonly card: "oklch(0.05 0 0)";
readonly cardForeground: "oklch(0.98 0 0)";
readonly popover: "oklch(0.05 0 0)";
readonly popoverForeground: "oklch(0.98 0 0)";
readonly primary: "var(--theme-400)";
readonly primaryForeground: "oklch(0.05 0 0)";
readonly secondary: "oklch(0.15 0 0)";
readonly secondaryForeground: "oklch(0.98 0 0)";
readonly muted: "oklch(0.15 0 0)";
readonly mutedForeground: "oklch(0.70 0 0)";
readonly accent: "oklch(0.15 0 0)";
readonly accentForeground: "oklch(0.98 0 0)";
readonly destructive: "oklch(0.60 0.20 25)";
readonly destructiveForeground: "oklch(0.98 0 0)";
readonly border: "oklch(0.20 0 0)";
readonly input: "oklch(0.20 0 0)";
readonly ring: "var(--theme-400)";
readonly chart1: "var(--theme-400)";
readonly chart2: "var(--theme-500)";
readonly chart3: "var(--theme-300)";
readonly chart4: "var(--theme-600)";
readonly chart5: "var(--theme-200)";
};
};
export declare const gradients: {
readonly primary: {
readonly toWhite: "linear-gradient(to right, var(--theme-500), white)";
readonly toTransparent: "linear-gradient(to right, var(--theme-500), transparent)";
readonly toDark: "linear-gradient(to right, var(--theme-300), var(--theme-700))";
};
readonly status: {
readonly success: "linear-gradient(to right, var(--functional-success), white)";
readonly warning: "linear-gradient(to right, var(--functional-warning), white)";
readonly error: "linear-gradient(to right, var(--functional-error), white)";
};
};
export declare function generateCSSVariables(theme: keyof typeof baseColors.themes): {
[x: string]: string;
};
export declare class ThemeManager {
private currentTheme;
private currentMode;
setTheme(theme: keyof typeof baseColors.themes): void;
setMode(mode: 'light' | 'dark'): void;
private applyTheme;
getCurrentTheme(): "blue" | "green" | "purple" | "amber";
getCurrentMode(): "dark" | "light";
}
export type ThemeName = keyof typeof baseColors.themes;
export type ColorMode = 'light' | 'dark';
export type SemanticColorKey = keyof typeof semanticColors.light;
export declare const colorSystem: {
baseColors: {
readonly themes: {
readonly blue: {
readonly 50: "oklch(0.95 0.05 240)";
readonly 100: "oklch(0.90 0.10 240)";
readonly 200: "oklch(0.80 0.15 240)";
readonly 300: "oklch(0.70 0.20 240)";
readonly 400: "oklch(0.60 0.25 240)";
readonly 500: "oklch(0.50 0.30 240)";
readonly 600: "oklch(0.45 0.28 240)";
readonly 700: "oklch(0.40 0.25 240)";
readonly 800: "oklch(0.35 0.22 240)";
readonly 900: "oklch(0.30 0.18 240)";
readonly 950: "oklch(0.20 0.15 240)";
};
readonly green: {
readonly 50: "oklch(0.95 0.05 150)";
readonly 100: "oklch(0.90 0.10 150)";
readonly 200: "oklch(0.80 0.15 150)";
readonly 300: "oklch(0.70 0.20 150)";
readonly 400: "oklch(0.60 0.25 150)";
readonly 500: "oklch(0.50 0.30 150)";
readonly 600: "oklch(0.45 0.28 150)";
readonly 700: "oklch(0.40 0.25 150)";
readonly 800: "oklch(0.35 0.22 150)";
readonly 900: "oklch(0.30 0.18 150)";
readonly 950: "oklch(0.20 0.15 150)";
};
readonly purple: {
readonly 50: "oklch(0.95 0.05 280)";
readonly 100: "oklch(0.90 0.10 280)";
readonly 200: "oklch(0.80 0.15 280)";
readonly 300: "oklch(0.70 0.20 280)";
readonly 400: "oklch(0.60 0.25 280)";
readonly 500: "oklch(0.50 0.30 280)";
readonly 600: "oklch(0.45 0.28 280)";
readonly 700: "oklch(0.40 0.25 280)";
readonly 800: "oklch(0.35 0.22 280)";
readonly 900: "oklch(0.30 0.18 280)";
readonly 950: "oklch(0.20 0.15 280)";
};
readonly amber: {
readonly 50: "oklch(0.95 0.05 45)";
readonly 100: "oklch(0.90 0.10 45)";
readonly 200: "oklch(0.80 0.15 45)";
readonly 300: "oklch(0.70 0.20 45)";
readonly 400: "oklch(0.60 0.25 45)";
readonly 500: "oklch(0.50 0.30 45)";
readonly 600: "oklch(0.45 0.28 45)";
readonly 700: "oklch(0.40 0.25 45)";
readonly 800: "oklch(0.35 0.22 45)";
readonly 900: "oklch(0.30 0.18 45)";
readonly 950: "oklch(0.20 0.15 45)";
};
};
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)";
};
};
semanticColors: {
readonly light: {
readonly background: "oklch(1 0 0)";
readonly foreground: "oklch(0.09 0 0)";
readonly card: "oklch(1 0 0)";
readonly cardForeground: "oklch(0.09 0 0)";
readonly popover: "oklch(1 0 0)";
readonly popoverForeground: "oklch(0.09 0 0)";
readonly primary: "var(--theme-500)";
readonly primaryForeground: "oklch(0.98 0 0)";
readonly secondary: "oklch(0.96 0 0)";
readonly secondaryForeground: "oklch(0.09 0 0)";
readonly muted: "oklch(0.96 0 0)";
readonly mutedForeground: "oklch(0.48 0 0)";
readonly accent: "oklch(0.96 0 0)";
readonly accentForeground: "oklch(0.09 0 0)";
readonly destructive: "oklch(0.60 0.20 25)";
readonly destructiveForeground: "oklch(0.98 0 0)";
readonly border: "oklch(0.92 0 0)";
readonly input: "oklch(0.92 0 0)";
readonly ring: "var(--theme-500)";
readonly chart1: "var(--theme-500)";
readonly chart2: "var(--theme-600)";
readonly chart3: "var(--theme-400)";
readonly chart4: "var(--theme-700)";
readonly chart5: "var(--theme-300)";
};
readonly dark: {
readonly background: "oklch(0.05 0 0)";
readonly foreground: "oklch(0.98 0 0)";
readonly card: "oklch(0.05 0 0)";
readonly cardForeground: "oklch(0.98 0 0)";
readonly popover: "oklch(0.05 0 0)";
readonly popoverForeground: "oklch(0.98 0 0)";
readonly primary: "var(--theme-400)";
readonly primaryForeground: "oklch(0.05 0 0)";
readonly secondary: "oklch(0.15 0 0)";
readonly secondaryForeground: "oklch(0.98 0 0)";
readonly muted: "oklch(0.15 0 0)";
readonly mutedForeground: "oklch(0.70 0 0)";
readonly accent: "oklch(0.15 0 0)";
readonly accentForeground: "oklch(0.98 0 0)";
readonly destructive: "oklch(0.60 0.20 25)";
readonly destructiveForeground: "oklch(0.98 0 0)";
readonly border: "oklch(0.20 0 0)";
readonly input: "oklch(0.20 0 0)";
readonly ring: "var(--theme-400)";
readonly chart1: "var(--theme-400)";
readonly chart2: "var(--theme-500)";
readonly chart3: "var(--theme-300)";
readonly chart4: "var(--theme-600)";
readonly chart5: "var(--theme-200)";
};
};
gradients: {
readonly primary: {
readonly toWhite: "linear-gradient(to right, var(--theme-500), white)";
readonly toTransparent: "linear-gradient(to right, var(--theme-500), transparent)";
readonly toDark: "linear-gradient(to right, var(--theme-300), var(--theme-700))";
};
readonly status: {
readonly success: "linear-gradient(to right, var(--functional-success), white)";
readonly warning: "linear-gradient(to right, var(--functional-warning), white)";
readonly error: "linear-gradient(to right, var(--functional-error), white)";
};
};
generateCSSVariables: typeof generateCSSVariables;
ThemeManager: typeof ThemeManager;
};