@youwen/ai-design-system
Version:
Enterprise AI-driven design system with comprehensive design tokens
145 lines (144 loc) • 5.23 kB
TypeScript
/**
* Layout Tailwind CSS Configuration
* Complete Tailwind extension based on enterprise design specifications
*/
export declare const layoutTailwindConfig: {
darkMode: string[];
theme: {
extend: {
colors: {
brand: {
primary: "#3B82F6";
secondary: "#10B981";
accent: "#8B5CF6";
warning: "#F59E0B";
};
background: {
'dark-primary': "#0A0A0A";
'dark-secondary': "#313540";
'dark-surface': "#1A1A1A";
'light-primary': "#CDD0DD";
'light-secondary': "#F5F5F5";
'light-surface': "#FFFFFF";
};
text: {
'dark-primary': "#FFFFFF";
'dark-secondary': "#B8BCC8";
'dark-tertiary': "#9CA3AF";
'light-primary': "#0A0A0A";
'light-secondary': "#6B7280";
'light-tertiary': "#9CA3AF";
};
semantic: {
success: "#10B981";
warning: "#F59E0B";
error: "#EF4444";
info: "#3B82F6";
};
};
fontFamily: {
primary: "\"Scto Grotesk A\", -apple-system, BlinkMacSystemFont, sans-serif";
fallback: "-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif";
scto: string[];
};
fontSize: {
'widget-title': ("24px" | {
lineHeight: "28px";
fontWeight: "500";
})[];
'widget-big': ("40px" | {
lineHeight: "44px";
fontWeight: "400";
})[];
'widget-medium': ("24px" | {
lineHeight: "28px";
fontWeight: "400";
})[];
'widget-small': ("16px" | {
lineHeight: "20px";
fontWeight: "400";
})[];
'widget-mini': ("15px" | {
lineHeight: "18px";
fontWeight: "400";
})[];
};
width: {
container: "430px";
slot: "195px";
'container-md': "430px";
'widget-sm': "195px";
};
height: {
container: "546px";
'container-min': "225px";
slot: "97px";
'container-md': "546px";
'widget-sm': "97px";
};
spacing: {
'layout-padding': "15px";
'layout-title-height': "24px";
'layout-title-margin': "15px";
'layout-content-offset': "40px";
'slot-gap': "15px";
'text-gap': "6px";
'widget-padding': "15px";
'widget-gap': "6px";
'widget-offset': "2px";
'widget-content-top': "40px";
};
borderRadius: {
'layout-sm': "4px";
'layout-md': "8px";
'layout-lg': "12px";
'layout-xl': "16px";
};
boxShadow: {
'layout-widget': "0 2px 8px rgba(0, 0, 0, 0.1)";
'layout-widget-hover': "0 4px 16px rgba(0, 0, 0, 0.15)";
'layout-widget-active': "0 1px 4px rgba(0, 0, 0, 0.1)";
'layout-low': "0 1px 3px rgba(0, 0, 0, 0.1)";
'layout-medium': "0 4px 6px rgba(0, 0, 0, 0.1)";
'layout-high': "0 10px 15px rgba(0, 0, 0, 0.1)";
'layout-highest': "0 25px 50px rgba(0, 0, 0, 0.25)";
};
transitionDuration: {
'layout-fast': "150ms";
'layout-normal': "300ms";
'layout-slow': "500ms";
};
transitionTimingFunction: {
'layout-ease-out': "cubic-bezier(0.0, 0.0, 0.2, 1)";
'layout-ease-in': "cubic-bezier(0.4, 0.0, 1, 1)";
'layout-ease-in-out': "cubic-bezier(0.4, 0.0, 0.2, 1)";
};
screens: {
'layout-mobile': "320px";
'layout-tablet': "768px";
'layout-desktop': "1024px";
'layout-wide': "1440px";
};
gridTemplateColumns: {
slots: string;
'widget-grid': string;
};
gridTemplateRows: {
slots: string;
'widget-grid': string;
};
gap: {
slot: "15px";
widget: "15px";
};
};
};
plugins: (({ addUtilities, addComponents, theme }: {
addUtilities: any;
addComponents: any;
theme: any;
}) => void)[];
};
export declare const injectHVACCSSVariables: () => void;
export declare const setHVACTheme: (mode: 'light' | 'dark') => void;
export default layoutTailwindConfig;