takeat-design-system-ui-kit 1.0.0 → 1.1.2

package/dist/consts-DkuQ7CCO.d.ts

@@ -0,0 +1,433 @@
+declare const DEFAULT_THEME: {
+    readonly components: {
+        readonly button: {
+            readonly iconPadding: {
+                readonly large: 8;
+                readonly medium: 8;
+                readonly small: 4;
+                readonly tablet: 24;
+                readonly "tablet-medium": 16;
+                readonly "tablet-small": 8;
+                readonly totem: 32;
+                readonly "totem-medium": 24;
+                readonly "totem-small": 16;
+            };
+            readonly fontSize: {
+                readonly medium: "14px";
+                readonly small: "12px";
+                readonly large: "14px";
+                readonly tablet: "16px";
+                readonly "tablet-medium": "14px";
+                readonly "tablet-small": "12px";
+                readonly totem: "18px";
+                readonly "totem-medium": "16px";
+                readonly "totem-small": "14px";
+            };
+            readonly height: {
+                readonly large: "40px";
+                readonly medium: "32px";
+                readonly small: "24px";
+                readonly tablet: "48px";
+                readonly "tablet-medium": "40px";
+                readonly "tablet-small": "32px";
+                readonly totem: "56px";
+                readonly "totem-medium": "48px";
+                readonly "totem-small": "40px";
+            };
+            readonly padding: {
+                readonly large: {
+                    readonly text: "0 24px";
+                    readonly icon: "0 8px";
+                    readonly textAndIcon: "0 24px 0 16px";
+                };
+                readonly medium: {
+                    readonly text: "0 16px";
+                    readonly icon: "0 8px";
+                    readonly textAndIcon: "0 12px 0 8px";
+                };
+                readonly small: {
+                    readonly text: "0 8px";
+                    readonly icon: "0 4px";
+                    readonly textAndIcon: "0 6px 0 4px";
+                };
+                readonly tablet: {
+                    readonly text: "0 24px";
+                    readonly icon: "0 8px";
+                    readonly textAndIcon: "0 24px 0 16px";
+                };
+                readonly "tablet-medium": {
+                    readonly text: "0 16px";
+                    readonly icon: "0 8px";
+                    readonly textAndIcon: "0 16px 0 12px";
+                };
+                readonly "tablet-small": {
+                    readonly text: "0 12px";
+                    readonly icon: "0 4px";
+                    readonly textAndIcon: "0 10px 0 6px";
+                };
+                readonly totem: {
+                    readonly text: "0 32px";
+                    readonly icon: "0 8px";
+                    readonly textAndIcon: "0 32px 0 16px";
+                };
+                readonly "totem-medium": {
+                    readonly text: "0 24px";
+                    readonly icon: "0 8px";
+                    readonly textAndIcon: "0 24px 0 16px";
+                };
+                readonly "totem-small": {
+                    readonly text: "0 16px";
+                    readonly icon: "0 4px";
+                    readonly textAndIcon: "0 14px 0 8px";
+                };
+            };
+            readonly borderRadius: {
+                readonly large: "12px";
+                readonly medium: "8px";
+                readonly small: "4px";
+                readonly tablet: "12px";
+                readonly "tablet-medium": "8px";
+                readonly "tablet-small": "4px";
+                readonly totem: "12px";
+                readonly "totem-medium": "8px";
+                readonly "totem-small": "8px";
+            };
+            readonly iconSize: {
+                readonly large: "24px";
+                readonly medium: "20px";
+                readonly small: "16px";
+                readonly tablet: "24px";
+                readonly "tablet-medium": "20px";
+                readonly "tablet-small": "16px";
+                readonly totem: "24px";
+                readonly "totem-medium": "20px";
+                readonly "totem-small": "16px";
+            };
+        };
+        readonly fieldInfo: {
+            readonly fontSize: {
+                readonly desktop: "12px";
+                readonly tablet: "14px";
+                readonly totem: "16px";
+            };
+        };
+        readonly input: {
+            readonly label: {
+                readonly fontSize: {
+                    readonly desktop: "16px";
+                    readonly large: "16px";
+                    readonly medium: "14px";
+                    readonly small: "12px";
+                    readonly tablet: "18px";
+                    readonly "tablet-medium": "16px";
+                    readonly "tablet-small": "16px";
+                    readonly totem: "20px";
+                    readonly "totem-medium": "18px";
+                    readonly "totem-small": "16px";
+                };
+            };
+            readonly input: {
+                readonly fontSize: {
+                    readonly desktop: "14px";
+                    readonly large: "14px";
+                    readonly medium: "12px";
+                    readonly small: "12px";
+                    readonly tablet: "16px";
+                    readonly "tablet-medium": "16px";
+                    readonly "tablet-small": "16px";
+                    readonly totem: "18px";
+                    readonly "totem-medium": "16px";
+                    readonly "totem-small": "16px";
+                };
+                readonly height: {
+                    readonly desktop: "40px";
+                    readonly large: "40px";
+                    readonly medium: "32px";
+                    readonly small: "24px";
+                    readonly tablet: "48px";
+                    readonly "tablet-medium": "40px";
+                    readonly "tablet-small": "32px";
+                    readonly totem: "56px";
+                    readonly "totem-medium": "48px";
+                    readonly "totem-small": "40px";
+                };
+                readonly borderRadius: {
+                    readonly desktop: "8px";
+                    readonly large: "8px";
+                    readonly medium: "8px";
+                    readonly small: "4px";
+                    readonly tablet: "12px";
+                    readonly "tablet-medium": "8px";
+                    readonly "tablet-small": "4px";
+                    readonly totem: "16px";
+                    readonly "totem-medium": "8px";
+                    readonly "totem-small": "8px";
+                };
+                readonly padding: {
+                    readonly desktop: "8px 16px";
+                    readonly large: "8px 16px";
+                    readonly medium: "4px 12px";
+                    readonly small: "4px 8px";
+                    readonly tablet: "8px 16px";
+                    readonly "tablet-medium": "4px 16px";
+                    readonly "tablet-small": "4px 12px";
+                    readonly totem: "8px 12px";
+                    readonly "totem-medium": "8px 12px";
+                    readonly "totem-small": "4px 12px";
+                };
+            };
+        };
+        readonly select: {
+            readonly padding: {
+                readonly desktop: "4px 16px";
+                readonly tablet: "4px 16px";
+                readonly totem: "4px 12px";
+            };
+        };
+    };
+    readonly colors: {
+        readonly primary: {
+            readonly lightest: "#e5a1a4";
+            readonly lighter: "#db6e72";
+            readonly light: "#d13f45";
+            readonly default: "#c8131b";
+            readonly dark: "#94090f";
+            readonly darker: "#610206";
+        };
+        readonly red: {
+            readonly lightest: "#e5a1a4";
+            readonly lighter: "#db6e72";
+            readonly light: "#d13f45";
+            readonly default: "#c8131b";
+            readonly dark: "#94090f";
+            readonly darker: "#610206";
+        };
+        readonly yellow: {
+            readonly lightest: "#ffebc8";
+            readonly lighter: "#ffd894";
+            readonly light: "#ffc561";
+            readonly default: "#ffb32f";
+            readonly dark: "#cc8c1d";
+            readonly darker: "#99670f";
+        };
+        readonly green: {
+            readonly lightest: "#bce3de";
+            readonly lighter: "#89d9cf";
+            readonly light: "#59cfc1";
+            readonly default: "#2ec9b7";
+            readonly dark: "#1d9688";
+            readonly darker: "#0f635a";
+        };
+        readonly blue: {
+            readonly lightest: "#99dfff";
+            readonly lighter: "#66cfff";
+            readonly light: "#33bfff";
+            readonly default: "#01afff";
+            readonly dark: "#018ccc";
+            readonly darker: "#016999";
+        };
+        readonly orange: {
+            readonly lightest: "#FFD8BD";
+            readonly lighter: "#FFB98A";
+            readonly light: "#FF9B57";
+            readonly default: "#FF7D24";
+            readonly dark: "#CC5F14";
+            readonly darker: "#994409";
+        };
+        readonly second_green: {
+            readonly lightest: "#A5C7AF";
+            readonly lighter: "#77BD8B";
+            readonly light: "#4DB26A";
+            readonly default: "#27A84C";
+            readonly dark: "#167532";
+            readonly darker: "#0A421A";
+        };
+        readonly neutral: {
+            readonly white: "#ffffff";
+            readonly lightest: "#f6f6f6";
+            readonly lighter: "#ededed";
+            readonly light: "#c6c6c6";
+            readonly default: "#7a7a7a";
+            readonly dark: "#545454";
+            readonly darker: "#222222";
+            readonly black: "#000000";
+        };
+    };
+    readonly shadows: {
+        readonly lighter: "0px 0px 2px 0px #0000001F, 0px 1px 2px 0px #00000024;";
+        readonly light: "0px 0px 2px 0px #0000001F, 0px 2px 4px 0px #00000024;";
+        readonly default: "0px 0px 2px 0px #0000001F, 0px 4px 8px 0px #00000024;";
+        readonly dark: "0px 0px 2px 0px #0000001F, 0px 8px 16px 0px #00000024;";
+        readonly darker: "0px 0px 8px 0px #00000033, 0px 10px 25px 0px #00000024;";
+    };
+    readonly typography: {
+        readonly family: {
+            readonly default: "\"Poppins\", sans-serif";
+        };
+        readonly weights: {
+            readonly regular: "400";
+            readonly medium: "500";
+            readonly semibold: "600";
+            readonly bold: "700";
+        };
+        readonly scale: {
+            readonly display: {
+                readonly fontSize: "24px";
+                readonly lineHeight: "28px";
+                readonly fontWeight: "700";
+            };
+            readonly heading: {
+                readonly fontSize: "20px";
+                readonly lineHeight: "24px";
+                readonly fontWeight: "700";
+            };
+            readonly body: {
+                readonly fontSize: "14px";
+                readonly lineHeight: "20px";
+                readonly fontWeight: "400";
+            };
+            readonly caption: {
+                readonly fontSize: "12px";
+                readonly lineHeight: "16px";
+                readonly fontWeight: "500";
+            };
+            readonly small: {
+                readonly fontSize: "10px";
+                readonly lineHeight: "14px";
+                readonly fontWeight: "400";
+            };
+        };
+    };
+    readonly spacing: {
+        readonly xxs: "4px";
+        readonly xs: "8px";
+        readonly s: "16px";
+        readonly m: "24px";
+        readonly l: "32px";
+        readonly xl: "40px";
+        readonly xxl: "48px";
+    };
+    readonly radius: {
+        readonly s: "4px";
+        readonly m: "8px";
+        readonly l: "12px";
+        readonly xl: "16px";
+        readonly xxl: "24px";
+    };
+    readonly semantic: {
+        readonly error: "#c8131b";
+        readonly success: "#2ec9b7";
+        readonly info: "#01afff";
+        readonly warning: "#ffb32f";
+    };
+    readonly zIndex: {
+        readonly dropdown: "1000";
+        readonly modal: "1100";
+        readonly tooltip: "1200";
+        readonly toast: "1300";
+    };
+    readonly motion: {
+        readonly fast: "150ms";
+        readonly normal: "300ms";
+        readonly slow: "500ms";
+    };
+    readonly device: "desktop";
+};
+type DeviceType = "desktop" | "tablet" | "totem";
+type ButtonSize = "small" | "medium" | "large";
+type ColorShades = {
+    white?: string;
+    lightest: string;
+    lighter: string;
+    light: string;
+    default: string;
+    dark: string;
+    darker: string;
+    black?: string;
+};
+type Colors = {
+    [key in keyof typeof DEFAULT_THEME.colors]: ColorShades;
+};
+type Spacing = {
+    xxs: string;
+    xs: string;
+    s: string;
+    m: string;
+    l: string;
+    xl: string;
+    xxl: string;
+};
+type Radius = {
+    s: string;
+    m: string;
+    l: string;
+    xl: string;
+    xxl: string;
+};
+type Typography = {
+    family: {
+        default: string;
+    };
+    weights: {
+        regular: number;
+        medium: number;
+        semibold: number;
+        bold: number;
+    };
+};
+type ButtonSizeKey = ButtonSize | Exclude<DeviceType, "desktop"> | `${Exclude<DeviceType, "desktop">}-${Exclude<ButtonSize, "large">}`;
+type InputSizeKey = ButtonSize | "desktop" | Exclude<DeviceType, "desktop"> | `${Exclude<DeviceType, "desktop">}-${Exclude<ButtonSize, "large">}`;
+type Components = {
+    fieldInfo: {
+        fontSize: Record<DeviceType, string>;
+    };
+    input: {
+        label: {
+            fontSize: Record<InputSizeKey, string>;
+        };
+        input: {
+            fontSize: Record<InputSizeKey, string>;
+            height: Record<InputSizeKey, string>;
+            borderRadius: Record<InputSizeKey, string>;
+            padding: Record<InputSizeKey, string>;
+        };
+    };
+    select: {
+        padding: Record<DeviceType, string>;
+    };
+    button: {
+        fontSize: Record<ButtonSizeKey, string>;
+        iconSize: Record<ButtonSizeKey, string>;
+        height: Record<ButtonSizeKey, string>;
+        borderRadius: Record<ButtonSizeKey, string>;
+        padding: Record<ButtonSizeKey, {
+            text: string;
+            icon: string;
+            textAndIcon: string;
+        }>;
+    };
+};
+type DefaultThemeType = {
+    colors: Colors;
+    shadows: {
+        lighter: string;
+        light: string;
+        default: string;
+        dark: string;
+        darker: string;
+    };
+    typography: Typography;
+    spacing: Spacing;
+    radius: Radius;
+    components: Components;
+    device: DeviceType;
+};
+type ColorType = keyof DefaultThemeType["colors"];
+declare const LABEL_POSITIONS: {
+    top: string;
+    bottom: string;
+    left: string;
+    right: string;
+};
+
+export { type ColorType as C, DEFAULT_THEME as D, LABEL_POSITIONS as L, type DefaultThemeType as a };