@xanui/core 1.3.8 → 1.3.10

package/theme/types.d.ts

@@ -3,96 +3,50 @@ import { GlobalCSS, BreakpointKeys } from '../css/types.js';
 type ObjectType = {
     [key: string]: any;
 };
+type BaseTypographyKeys = "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "big" | "text" | "button" | "small";
 type ThemeTypographyItem = {
     fontSize: number;
     lineHeight: number;
     fontWeight: number;
 };
-type ThemeTypographyType = {
-    h1: ThemeTypographyItem;
-    h2: ThemeTypographyItem;
-    h3: ThemeTypographyItem;
-    h4: ThemeTypographyItem;
-    h5: ThemeTypographyItem;
-    h6: ThemeTypographyItem;
-    big: ThemeTypographyItem;
-    text: ThemeTypographyItem;
-    button: ThemeTypographyItem;
-    small: ThemeTypographyItem;
-};
+type ThemeColorKeys = "surface" | "primary" | "accent" | "info" | "success" | "warning" | "danger";
 type ThemeColorOption = {
-    primary: string;
-    secondary: string;
-    text: string;
-};
-type ThemeOptionsColor = ThemeColorOption & {
-    soft: {
-        primary: string;
-        secondary: string;
-    };
+    main: string;
+    light: string;
+    dark: string;
+    contrast: string;
+    muted: string;
+    disabled: string;
+    divider: string;
+    ghost: string;
 };
-interface ThemeOptions {
+type ThemeInterface<T = any> = (defaultProps: T, theme: ThemeOptions) => T;
+type ThemeMode = "dark" | "light";
+type ThemeOptions = {
     name: string;
-    mode?: "dark" | "light";
+    mode?: ThemeMode;
     rtl: boolean;
     globalStyle: GlobalCSS;
     breakpoints: {
         [key in BreakpointKeys]: number;
     };
     shadow: string[];
-    interfaces: {
-        [name: string]: <P extends object>(defaultProps: P, theme: ThemeOptions) => P;
-    };
-    colors: {
-        background: Omit<ThemeOptionsColor, 'text'>;
-        text: Omit<ThemeOptionsColor, 'text'>;
-        divider: Omit<ThemeOptionsColor, 'text'>;
-        brand: ThemeOptionsColor;
-        accent: ThemeOptionsColor;
-        success: ThemeOptionsColor;
-        info: ThemeOptionsColor;
-        warning: ThemeOptionsColor;
-        danger: ThemeOptionsColor;
-    };
-    typography: ThemeTypographyType;
+    interfaces: Record<string, ThemeInterface>;
+    colors: Record<ThemeColorKeys, ThemeColorOption>;
+    typography: Record<BaseTypographyKeys, ThemeTypographyItem>;
     change: (theme: ThemeOptionInput) => void;
-}
-type ThemeTypographyItemInput = Partial<ThemeTypographyItem>;
-type ThemeTypographyInputType = {
-    h1?: ThemeTypographyItemInput;
-    h2?: ThemeTypographyItemInput;
-    h3?: ThemeTypographyItemInput;
-    h4?: ThemeTypographyItemInput;
-    h5?: ThemeTypographyItemInput;
-    h6?: ThemeTypographyItemInput;
-    big?: ThemeTypographyItemInput;
-    text?: ThemeTypographyItemInput;
-    button?: ThemeTypographyItemInput;
-    small?: ThemeTypographyItemInput;
 };
-interface ThemeOptionInput {
+type ThemeOptionInput = {
     name?: string;
-    mode?: "dark" | "light";
+    mode?: ThemeMode;
     rtl?: boolean;
     globalStyle?: GlobalCSS;
     shadow?: string[];
-    interfaces?: {
-        [name: string]: <P extends object>(defaultProps: P, theme: ThemeOptions) => P;
-    };
-    colors?: {
-        background?: Omit<ThemeColorOption, 'text'>;
-        text?: Omit<ThemeColorOption, 'text'>;
-        divider?: Omit<ThemeColorOption, 'text'>;
-        brand?: ThemeColorOption;
-        accent?: ThemeColorOption;
-        success?: ThemeColorOption;
-        info?: ThemeColorOption;
-        warning?: ThemeColorOption;
-        danger?: ThemeColorOption;
-    };
-    typography?: ThemeTypographyInputType;
-}
-type TypographyRefTypes = "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "text" | "button" | "small";
-type ColorsRefTypes = "background" | "background.primary" | "background.secondary" | "text" | "text.primary" | "text.secondary" | "divider" | "divider.primary" | "divider.secondary" | "divider.soft.primary" | "divider.soft.secondary" | "brand" | "brand.primary" | "brand.secondary" | "brand.text" | "brand.soft.primary" | "brand.soft.secondary" | "accent" | "accent.primary" | "accent.secondary" | "accent.text" | "accent.soft.primary" | "accent.soft.secondary" | "info" | "info.primary" | "info.secondary" | "info.text" | "info.soft.primary" | "info.soft.secondary" | "success" | "success.primary" | "success.secondary" | "success.text" | "success.soft.primary" | "success.soft.secondary" | "warning" | "warning.primary" | "warning.secondary" | "warning.text" | "warning.soft.primary" | "warning.soft.secondary" | "danger" | "danger.primary" | "danger.secondary" | "danger.text" | "danger.soft.primary" | "danger.soft.secondary";
+    interfaces?: Record<string, ThemeInterface>;
+    colors?: Partial<Record<ThemeColorKeys, string | Partial<ThemeColorOption>>>;
+    typography?: Record<BaseTypographyKeys, ThemeTypographyItem>;
+};
+type TypographyRefTypes = "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "big" | "text" | "button" | "small";
+type ColorsRefTypes = "surface" | "surface.main" | "surface.light" | "surface.lighter" | "surface.dark" | "surface.darker" | "surface.contrast" | "surface.muted" | "surface.divider" | "surface.ghost" | "primary" | "primary.main" | "primary.light" | "primary.lighter" | "primary.dark" | "primary.darker" | "primary.contrast" | "primary.muted" | "primary.divider" | "primary.ghost" | "accent" | "accent.main" | "accent.light" | "accent.lighter" | "accent.dark" | "accent.darker" | "accent.contrast" | "accent.muted" | "accent.divider" | "accent.ghost" | "success" | "success.main" | "success.light" | "success.lighter" | "success.dark" | "success.darker" | "success.contrast" | "success.muted" | "success.divider" | "success.ghost" | "info" | "info.main" | "info.light" | "info.lighter" | "info.dark" | "info.darker" | "info.contrast" | "info.muted" | "info.divider" | "info.ghost" | "warning" | "warning.main" | "warning.light" | "warning.lighter" | "warning.dark" | "warning.darker" | "warning.contrast" | "warning.muted" | "warning.divider" | "warning.ghost" | "danger" | "danger.main" | "danger.light" | "danger.lighter" | "danger.dark" | "danger.darker" | "danger.contrast" | "danger.muted" | "danger.divider" | "danger.ghost";
 
-export type { ColorsRefTypes, ObjectType, ThemeColorOption, ThemeOptionInput, ThemeOptions, ThemeOptionsColor, ThemeTypographyInputType, ThemeTypographyItem, ThemeTypographyItemInput, ThemeTypographyType, TypographyRefTypes };
+export type { BaseTypographyKeys, ColorsRefTypes, ObjectType, ThemeColorKeys, ThemeColorOption, ThemeInterface, ThemeMode, ThemeOptionInput, ThemeOptions, ThemeTypographyItem, TypographyRefTypes };