@qasa/qds-ui 0.1.0

package/dist/cjs/types/theme/foundations/index.d.ts

@@ -0,0 +1,335 @@
+/**
+ * ------ IMPORTANT ------
+ * Do not change or add to the contents of this file
+ * without consulting with the design team.
+ *
+ * These are values that make up our brand and even
+ * minor changes greatly affects our visual identity.
+ *
+ * The foundations are losely based on Styled System Theme Specification
+ * @see https://styled-system.com/theme-specification/
+ * -----------------------
+ */
+export declare const foundations: {
+    spacing: {
+        '0x': string;
+        '1x': string;
+        '2x': string;
+        '3x': string;
+        '4x': string;
+        '5x': string;
+        '6x': string;
+        '8x': string;
+        '12x': string;
+        '16x': string;
+        '20x': string;
+        '24x': string;
+    };
+    breakpoints: {
+        readonly base: 0;
+        readonly sm: 480;
+        readonly md: 768;
+        readonly lg: 1024;
+        readonly xl: 1280;
+        readonly '2xl': 1536;
+    };
+    zIndices: {
+        hide: number;
+        auto: string;
+        base: number;
+        docked: number;
+        dropdown: number;
+        sticky: number;
+        banner: number;
+        overlay: number;
+        modal: number;
+        popover: number;
+        skipLink: number;
+        toast: number;
+        tooltip: number;
+    };
+    colors: {
+        core: {
+            black: string;
+            white: string;
+            gray90: string;
+            gray80: string;
+            gray70: string;
+            gray60: string;
+            gray50: string;
+            gray40: string;
+            gray30: string;
+            gray20: string;
+            gray10: string;
+            brand90: string;
+            brand80: string;
+            brand70: string;
+            brand60: string;
+            brand50: string;
+            brand40: string;
+            brand30: string;
+            brand20: string;
+            brand10: string;
+            red10: string;
+            red20: string;
+            red30: string;
+            red40: string;
+            red50: string;
+            red60: string;
+            red70: string;
+            red80: string;
+            red90: string;
+            green90: string;
+            green80: string;
+            green70: string;
+            green60: string;
+            green50: string;
+            green40: string;
+            green30: string;
+            green20: string;
+            green10: string;
+            blue90: string;
+            blue80: string;
+            blue70: string;
+            blue60: string;
+            blue50: string;
+            blue40: string;
+            blue30: string;
+            blue20: string;
+            blue10: string;
+            yellow90: string;
+            yellow80: string;
+            yellow70: string;
+            yellow60: string;
+            yellow50: string;
+            yellow40: string;
+            yellow30: string;
+            yellow20: string;
+            yellow10: string;
+            blackAlpha20: string;
+        };
+        bg: {
+            default: string;
+            brandPrimary: string;
+            brandPrimaryHover: string;
+            brandPrimaryActive: string;
+            brandSecondary: string;
+            brandSecondaryHover: string;
+            brandSecondaryActive: string;
+            negative: string;
+            warning: string;
+            positive: string;
+            inset: string;
+            backdrop: string;
+        };
+        text: {
+            strong: string;
+            default: string;
+            subtle: string;
+            disabled: string;
+            negative: string;
+            warning: string;
+            positive: string;
+            onColor: string;
+        };
+        icon: {
+            default: string;
+            strong: string;
+            subtle: string;
+            disabled: string;
+            negative: string;
+            warning: string;
+            success: string;
+            onColor: string;
+        };
+        border: {
+            default: string;
+            defaultHover: string;
+            defaultSelected: string;
+            strong: string;
+            subtle: string;
+            negative: string;
+            warning: string;
+            success: string;
+        };
+    };
+    sizes: {
+        112: string;
+        128: string;
+        144: string;
+        160: string;
+        176: string;
+        192: string;
+        224: string;
+        256: string;
+        288: string;
+        320: string;
+        384: string;
+        448: string;
+        512: string;
+        576: string;
+        672: string;
+        768: string;
+        896: string;
+        1024: string;
+        '0x': string;
+        '1x': string;
+        '2x': string;
+        '3x': string;
+        '4x': string;
+        '5x': string;
+        '6x': string;
+        '8x': string;
+        '12x': string;
+        '16x': string;
+        '20x': string;
+        '24x': string;
+    };
+    radii: {
+        none: string;
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+        full: string;
+    };
+    shadows: {
+        none: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
+    typography: {
+        display: {
+            lg: {
+                fontFamily: string;
+                fontWeight: string;
+                fontSize: string;
+                lineHeight: string;
+                letterSpacing: string;
+            };
+            md: {
+                fontFamily: string;
+                fontWeight: string;
+                fontSize: string;
+                lineHeight: string;
+                letterSpacing: string;
+            };
+        };
+        title: {
+            lg: {
+                fontFamily: string;
+                fontWeight: string;
+                fontSize: string;
+                lineHeight: string;
+                letterSpacing: string;
+            };
+            md: {
+                fontFamily: string;
+                fontWeight: string;
+                fontSize: string;
+                lineHeight: string;
+                letterSpacing: string;
+            };
+            sm: {
+                fontFamily: string;
+                fontWeight: string;
+                fontSize: string;
+                lineHeight: string;
+                letterSpacing: string;
+            };
+            xs: {
+                fontFamily: string;
+                fontWeight: string;
+                fontSize: string;
+                lineHeight: string;
+                letterSpacing: string;
+            };
+            '2xs': {
+                fontFamily: string;
+                fontWeight: string;
+                fontSize: string;
+                lineHeight: string;
+                letterSpacing: string;
+            };
+            '3xs': {
+                fontFamily: string;
+                fontWeight: string;
+                fontSize: string;
+                lineHeight: string;
+                letterSpacing: string;
+            };
+        };
+        body: {
+            xl: {
+                fontFamily: string;
+                fontWeight: string;
+                fontSize: string;
+                lineHeight: string;
+                letterSpacing: string;
+            };
+            lg: {
+                fontFamily: string;
+                fontWeight: string;
+                fontSize: string;
+                lineHeight: string;
+                letterSpacing: string;
+            };
+            md: {
+                fontFamily: string;
+                fontWeight: string;
+                fontSize: string;
+                lineHeight: string;
+                letterSpacing: string;
+            };
+            sm: {
+                fontFamily: string;
+                fontWeight: string;
+                fontSize: string;
+                lineHeight: string;
+                letterSpacing: string;
+            };
+            xs: {
+                fontFamily: string;
+                fontWeight: string;
+                fontSize: string;
+                lineHeight: string;
+                letterSpacing: string;
+            };
+        };
+        label: {
+            md: {
+                fontFamily: string;
+                fontWeight: string;
+                fontSize: string;
+                lineHeight: string;
+                letterSpacing: string;
+            };
+            sm: {
+                fontFamily: string;
+                fontWeight: string;
+                fontSize: string;
+                lineHeight: string;
+                letterSpacing: string;
+            };
+        };
+        caption: {
+            md: {
+                fontFamily: string;
+                fontWeight: string;
+                fontSize: string;
+                lineHeight: string;
+                letterSpacing: string;
+            };
+            sm: {
+                fontFamily: string;
+                fontWeight: string;
+                fontSize: string;
+                lineHeight: string;
+                letterSpacing: string;
+            };
+        };
+    };
+};

package/dist/cjs/types/theme/foundations/radius.d.ts

@@ -0,0 +1,9 @@
+export declare const radii: {
+    none: string;
+    xs: string;
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+    full: string;
+};

package/dist/cjs/types/theme/foundations/shadows.d.ts

@@ -0,0 +1,7 @@
+export declare const shadows: {
+    none: string;
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+};

package/dist/cjs/types/theme/foundations/sizes.d.ts

@@ -0,0 +1,32 @@
+export declare const sizes: {
+    112: string;
+    128: string;
+    144: string;
+    160: string;
+    176: string;
+    192: string;
+    224: string;
+    256: string;
+    288: string;
+    320: string;
+    384: string;
+    448: string;
+    512: string;
+    576: string;
+    672: string;
+    768: string;
+    896: string;
+    1024: string;
+    '0x': string;
+    '1x': string;
+    '2x': string;
+    '3x': string;
+    '4x': string;
+    '5x': string;
+    '6x': string;
+    '8x': string;
+    '12x': string;
+    '16x': string;
+    '20x': string;
+    '24x': string;
+};

package/dist/cjs/types/theme/foundations/spacing.d.ts

@@ -0,0 +1,14 @@
+export declare const spacing: {
+    '0x': string;
+    '1x': string;
+    '2x': string;
+    '3x': string;
+    '4x': string;
+    '5x': string;
+    '6x': string;
+    '8x': string;
+    '12x': string;
+    '16x': string;
+    '20x': string;
+    '24x': string;
+};

package/dist/cjs/types/theme/foundations/typography.d.ts

@@ -0,0 +1,131 @@
+export declare const typography: {
+    display: {
+        lg: {
+            fontFamily: string;
+            fontWeight: string;
+            fontSize: string;
+            lineHeight: string;
+            letterSpacing: string;
+        };
+        md: {
+            fontFamily: string;
+            fontWeight: string;
+            fontSize: string;
+            lineHeight: string;
+            letterSpacing: string;
+        };
+    };
+    title: {
+        lg: {
+            fontFamily: string;
+            fontWeight: string;
+            fontSize: string;
+            lineHeight: string;
+            letterSpacing: string;
+        };
+        md: {
+            fontFamily: string;
+            fontWeight: string;
+            fontSize: string;
+            lineHeight: string;
+            letterSpacing: string;
+        };
+        sm: {
+            fontFamily: string;
+            fontWeight: string;
+            fontSize: string;
+            lineHeight: string;
+            letterSpacing: string;
+        };
+        xs: {
+            fontFamily: string;
+            fontWeight: string;
+            fontSize: string;
+            lineHeight: string;
+            letterSpacing: string;
+        };
+        '2xs': {
+            fontFamily: string;
+            fontWeight: string;
+            fontSize: string;
+            lineHeight: string;
+            letterSpacing: string;
+        };
+        '3xs': {
+            fontFamily: string;
+            fontWeight: string;
+            fontSize: string;
+            lineHeight: string;
+            letterSpacing: string;
+        };
+    };
+    body: {
+        xl: {
+            fontFamily: string;
+            fontWeight: string;
+            fontSize: string;
+            lineHeight: string;
+            letterSpacing: string;
+        };
+        lg: {
+            fontFamily: string;
+            fontWeight: string;
+            fontSize: string;
+            lineHeight: string;
+            letterSpacing: string;
+        };
+        md: {
+            fontFamily: string;
+            fontWeight: string;
+            fontSize: string;
+            lineHeight: string;
+            letterSpacing: string;
+        };
+        sm: {
+            fontFamily: string;
+            fontWeight: string;
+            fontSize: string;
+            lineHeight: string;
+            letterSpacing: string;
+        };
+        xs: {
+            fontFamily: string;
+            fontWeight: string;
+            fontSize: string;
+            lineHeight: string;
+            letterSpacing: string;
+        };
+    };
+    label: {
+        md: {
+            fontFamily: string;
+            fontWeight: string;
+            fontSize: string;
+            lineHeight: string;
+            letterSpacing: string;
+        };
+        sm: {
+            fontFamily: string;
+            fontWeight: string;
+            fontSize: string;
+            lineHeight: string;
+            letterSpacing: string;
+        };
+    };
+    caption: {
+        md: {
+            fontFamily: string;
+            fontWeight: string;
+            fontSize: string;
+            lineHeight: string;
+            letterSpacing: string;
+        };
+        sm: {
+            fontFamily: string;
+            fontWeight: string;
+            fontSize: string;
+            lineHeight: string;
+            letterSpacing: string;
+        };
+    };
+};

package/dist/cjs/types/theme/foundations/z-index.d.ts

@@ -0,0 +1,15 @@
+export declare const zIndices: {
+    hide: number;
+    auto: string;
+    base: number;
+    docked: number;
+    dropdown: number;
+    sticky: number;
+    banner: number;
+    overlay: number;
+    modal: number;
+    popover: number;
+    skipLink: number;
+    toast: number;
+    tooltip: number;
+};

package/dist/cjs/types/theme/index.d.ts

@@ -0,0 +1,2 @@
+export * from './theme';
+export * from './theme-tools';