@veeqo/ui 0.0.4 → 0.0.7

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

@@ -0,0 +1,454 @@
+import { Shadows } from './modules/shadows';
+export declare const theme: {
+    breakpoints: {
+        readonly mobile: "640px";
+        readonly tablet: "720px";
+        readonly lgTablet: "960px";
+        readonly desktop: "1280px";
+        readonly lgDesktop: "1440px";
+    };
+    colors: {
+        brand: {
+            blue: {
+                lightest: string;
+                light: string;
+                base: string;
+                dark: string;
+                darkest: string;
+            };
+            peach: {
+                lightest: string;
+                light: string;
+                base: string;
+                dark: string;
+                darkest: string;
+            };
+        };
+        neutral: {
+            ink: {
+                lightest: string;
+                light: string;
+                base: string;
+                dark: string;
+            };
+            grey: {
+                lightest: string;
+                light: string;
+                base: string;
+                dark: string;
+            };
+            greyBlue: {
+                lightest: string;
+                light: string;
+                base: string;
+                dark: string;
+            };
+        };
+        secondary: {
+            red: {
+                lightest: string;
+                light: string;
+                base: string;
+                dark: string;
+                darkest: string;
+            };
+            yellow: {
+                lightest: string;
+                light: string;
+                base: string;
+                dark: string;
+                darkest: string;
+            };
+            green: {
+                lightest: string;
+                light: string;
+                base: string;
+                dark: string;
+                darkest: string;
+            };
+            lime: {
+                lightest: string;
+                light: string;
+                base: string;
+                dark: string;
+                darkest: string;
+            };
+            teal: {
+                lightest: string;
+                light: string;
+                base: string;
+                dark: string;
+                darkest: string;
+            };
+            aqua: {
+                lightest: string;
+                light: string;
+                base: string;
+                dark: string;
+                darkest: string;
+            };
+            purple: {
+                lightest: string;
+                light: string;
+                base: string;
+                dark: string;
+                darkest: string;
+            };
+            blue: {
+                lightest: string;
+                light: string;
+                base: string;
+                dark: string;
+                darkest: string;
+            };
+            pink: {
+                lightest: string;
+                light: string;
+                base: string;
+                dark: string;
+                darkest: string;
+            };
+            orange: {
+                lightest: string;
+                light: string;
+                base: string;
+                dark: string;
+                darkest: string;
+            };
+        };
+        system: {
+            scrollbar: {
+                thumb: string;
+                background: string;
+            };
+        };
+    };
+    layers: {
+        base: number;
+        popup: number;
+        modal: number;
+        tooltip: number;
+    };
+    radius: {
+        sm: string;
+        base: string;
+        md: string;
+        lg: string;
+        full: string;
+    };
+    shadows: typeof Shadows;
+    sizes: import("./modules/sizes").SizeScale;
+    text: {
+        headingXXL: {
+            fontFamily: string;
+            fontStyle: string;
+            fontWeight: number;
+            fontSize: string;
+            lineHeight: string;
+            color: string;
+            textDecoration: string;
+            letterSpacing: string;
+        };
+        headingXL: {
+            fontFamily: string;
+            fontStyle: string;
+            fontWeight: number;
+            fontSize: string;
+            lineHeight: string;
+            color: string;
+            textDecoration: string;
+            letterSpacing: string;
+        };
+        headingLarge: {
+            fontFamily: string;
+            fontStyle: string;
+            fontWeight: number;
+            fontSize: string;
+            lineHeight: string;
+            color: string;
+            textDecoration: string;
+            letterSpacing: string;
+        };
+        headingMedium: {
+            fontFamily: string;
+            fontStyle: string;
+            fontWeight: number;
+            fontSize: string;
+            lineHeight: string;
+            color: string;
+            textDecoration: string;
+            letterSpacing: string;
+        };
+        headingSmall: {
+            fontFamily: string;
+            fontStyle: string;
+            fontWeight: number;
+            fontSize: string;
+            lineHeight: string;
+            color: string;
+            textDecoration: string;
+            letterSpacing: string;
+        };
+        headingTable: {
+            fontFamily: string;
+            fontStyle: string;
+            fontWeight: number;
+            fontSize: string;
+            lineHeight: string;
+            color: string;
+            textDecoration: string;
+            letterSpacing: string;
+        };
+        subheadingLarge: {
+            fontFamily: string;
+            fontStyle: string;
+            fontWeight: string;
+            fontSize: string;
+            lineHeight: string;
+            color: string;
+            textDecoration: string;
+            letterSpacing: string;
+        };
+        subheadingMedium: {
+            fontFamily: string;
+            fontStyle: string;
+            fontWeight: string;
+            fontSize: string;
+            lineHeight: string;
+            color: string;
+            textDecoration: string;
+            letterSpacing: string;
+        };
+        subheadingSmall: {
+            fontFamily: string;
+            fontStyle: string;
+            fontWeight: string;
+            fontSize: string;
+            lineHeight: string;
+            color: string;
+            textDecoration: string;
+            letterSpacing: string;
+        };
+        subheadingSmallBold: {
+            fontFamily: string;
+            fontStyle: string;
+            fontWeight: number;
+            fontSize: string;
+            lineHeight: string;
+            color: string;
+            textDecoration: string;
+            letterSpacing: string;
+        };
+        body: {
+            fontFamily: string;
+            fontStyle: string;
+            fontWeight: string;
+            fontSize: string;
+            lineHeight: string;
+            color: string;
+            textDecoration: string;
+            letterSpacing: string;
+        };
+        bodySmall: {
+            fontFamily: string;
+            fontStyle: string;
+            fontWeight: string;
+            fontSize: string;
+            lineHeight: string;
+            color: string;
+            textDecoration: string;
+            letterSpacing: string;
+        };
+        bodyBold: {
+            fontFamily: string;
+            fontStyle: string;
+            fontWeight: number;
+            fontSize: string;
+            lineHeight: string;
+            color: string;
+            textDecoration: string;
+            letterSpacing: string;
+        };
+        bodyBoldDark: {
+            fontFamily: string;
+            fontStyle: string;
+            fontWeight: number;
+            fontSize: string;
+            lineHeight: string;
+            color: string;
+            textDecoration: string;
+            letterSpacing: string;
+        };
+        bodySmallBold: {
+            fontFamily: string;
+            fontStyle: string;
+            fontWeight: number;
+            fontSize: string;
+            lineHeight: string;
+            color: string;
+            textDecoration: string;
+            letterSpacing: string;
+        };
+        button: {
+            fontFamily: string;
+            fontStyle: string;
+            fontWeight: number;
+            fontSize: string;
+            lineHeight: string;
+            color: string;
+            textDecoration: string;
+            letterSpacing: string;
+        };
+        buttonSmall: {
+            fontFamily: string;
+            fontStyle: string;
+            fontWeight: number;
+            fontSize: string;
+            lineHeight: string;
+            color: string;
+            textDecoration: string;
+            letterSpacing: string;
+        };
+        linkLarge: {
+            fontFamily: string;
+            fontStyle: string;
+            fontWeight: string;
+            fontSize: string;
+            lineHeight: string;
+            color: string;
+            textDecoration: string;
+            letterSpacing: string;
+        };
+        linkMedium: {
+            fontFamily: string;
+            fontStyle: string;
+            fontWeight: string;
+            fontSize: string;
+            lineHeight: string;
+            color: string;
+            textDecoration: string;
+            letterSpacing: string;
+        };
+        link: {
+            fontFamily: string;
+            fontStyle: string;
+            fontWeight: string;
+            fontSize: string;
+            lineHeight: string;
+            color: string;
+            textDecoration: string;
+            letterSpacing: string;
+        };
+        linkSmall: {
+            fontFamily: string;
+            fontStyle: string;
+            fontWeight: string;
+            fontSize: string;
+            lineHeight: string;
+            color: string;
+            textDecoration: string;
+            letterSpacing: string;
+        };
+        inputLabel: {
+            fontFamily: string;
+            fontStyle: string;
+            fontWeight: number;
+            fontSize: string;
+            lineHeight: string;
+            color: string;
+            textDecoration: string;
+            letterSpacing: string;
+        };
+        inputLabelSmall: {
+            fontFamily: string;
+            fontStyle: string;
+            fontWeight: number;
+            fontSize: string;
+            lineHeight: string;
+            color: string;
+            textDecoration: string;
+            letterSpacing: string;
+        };
+        hintText: {
+            fontFamily: string;
+            fontStyle: string;
+            fontWeight: string;
+            fontSize: string;
+            lineHeight: string;
+            color: string;
+            textDecoration: string;
+            letterSpacing: string;
+        };
+        placeholder: {
+            fontFamily: string;
+            fontStyle: string;
+            fontWeight: string;
+            fontSize: string;
+            lineHeight: string;
+            color: string;
+            textDecoration: string;
+            letterSpacing: string;
+        };
+        placeholderSmall: {
+            fontFamily: string;
+            fontStyle: string;
+            fontWeight: string;
+            fontSize: string;
+            lineHeight: string;
+            color: string;
+            textDecoration: string;
+            letterSpacing: string;
+        };
+        placeholderCode: {
+            fontFamily: string;
+            fontStyle: string;
+            fontWeight: string;
+            fontSize: string;
+            lineHeight: string;
+            color: string;
+            textDecoration: string;
+            letterSpacing: string;
+        };
+        placeholderCodeSmall: {
+            fontFamily: string;
+            fontStyle: string;
+            fontWeight: string;
+            fontSize: string;
+            lineHeight: string;
+            color: string;
+            textDecoration: string;
+            letterSpacing: string;
+        };
+        error: {
+            fontFamily: string;
+            fontStyle: string;
+            fontWeight: number;
+            fontSize: string;
+            lineHeight: string;
+            color: string;
+            textDecoration: string;
+            letterSpacing: string;
+        };
+        errorSmall: {
+            fontFamily: string;
+            fontStyle: string;
+            fontWeight: number;
+            fontSize: string;
+            lineHeight: string;
+            color: string;
+            textDecoration: string;
+            letterSpacing: string;
+        };
+        successSmall: {
+            fontFamily: string;
+            fontStyle: string;
+            fontWeight: number;
+            fontSize: string;
+            lineHeight: string;
+            color: string;
+            textDecoration: string;
+            letterSpacing: string;
+        };
+    };
+    fontFamily: string;
+};

package/dist/esm/types/theme/modules/breakpoints.d.ts

@@ -0,0 +1,7 @@
+export declare const breakpoints: {
+    readonly mobile: "640px";
+    readonly tablet: "720px";
+    readonly lgTablet: "960px";
+    readonly desktop: "1280px";
+    readonly lgDesktop: "1440px";
+};

package/dist/esm/types/theme/modules/colors.d.ts

@@ -0,0 +1,116 @@
+export declare const colors: {
+    brand: {
+        blue: {
+            lightest: string;
+            light: string;
+            base: string;
+            dark: string;
+            darkest: string;
+        };
+        peach: {
+            lightest: string;
+            light: string;
+            base: string;
+            dark: string;
+            darkest: string;
+        };
+    };
+    neutral: {
+        ink: {
+            lightest: string;
+            light: string;
+            base: string;
+            dark: string;
+        };
+        grey: {
+            lightest: string;
+            light: string;
+            base: string;
+            dark: string;
+        };
+        greyBlue: {
+            lightest: string;
+            light: string;
+            base: string;
+            dark: string;
+        };
+    };
+    secondary: {
+        red: {
+            lightest: string;
+            light: string;
+            base: string;
+            dark: string;
+            darkest: string;
+        };
+        yellow: {
+            lightest: string;
+            light: string;
+            base: string;
+            dark: string;
+            darkest: string;
+        };
+        green: {
+            lightest: string;
+            light: string;
+            base: string;
+            dark: string;
+            darkest: string;
+        };
+        lime: {
+            lightest: string;
+            light: string;
+            base: string;
+            dark: string;
+            darkest: string;
+        };
+        teal: {
+            lightest: string;
+            light: string;
+            base: string;
+            dark: string;
+            darkest: string;
+        };
+        aqua: {
+            lightest: string;
+            light: string;
+            base: string;
+            dark: string;
+            darkest: string;
+        };
+        purple: {
+            lightest: string;
+            light: string;
+            base: string;
+            dark: string;
+            darkest: string;
+        };
+        blue: {
+            lightest: string;
+            light: string;
+            base: string;
+            dark: string;
+            darkest: string;
+        };
+        pink: {
+            lightest: string;
+            light: string;
+            base: string;
+            dark: string;
+            darkest: string;
+        };
+        orange: {
+            lightest: string;
+            light: string;
+            base: string;
+            dark: string;
+            darkest: string;
+        };
+    };
+    system: {
+        scrollbar: {
+            thumb: string;
+            background: string;
+        };
+    };
+};

package/dist/esm/types/theme/modules/layers.d.ts

@@ -0,0 +1,6 @@
+export declare const layers: {
+    base: number;
+    popup: number;
+    modal: number;
+    tooltip: number;
+};

package/dist/esm/types/theme/modules/radius.d.ts

@@ -0,0 +1,7 @@
+export declare const radius: {
+    sm: string;
+    base: string;
+    md: string;
+    lg: string;
+    full: string;
+};

package/dist/esm/types/theme/modules/shadows.d.ts

@@ -0,0 +1,6 @@
+export declare enum Shadows {
+    sm = "0px 1px 3px rgba(55, 66, 77, 0.15)",
+    base = "0px 4px 6px rgba(27, 33, 38, 0.2)",
+    md = "0px 10px 15px rgba(27, 33, 38, 0.2)",
+    lg = "0px 20px 25px rgba(27, 33, 38, 0.2)"
+}

package/dist/esm/types/theme/modules/sizes.d.ts

@@ -0,0 +1,20 @@
+declare enum SizeAlias {
+    none = "none",
+    line = "line",
+    xs = "xs",
+    sm = "sm",
+    base = "base",
+    md = "md",
+    lg = "lg",
+    xl = "xl",
+    xxl = "xxl"
+}
+export type SizeScaleIndex = number | keyof typeof SizeAlias;
+export type SizeScale = {
+    [index: number]: string;
+    [index: string]: string;
+};
+export declare const sizeScale: SizeScale;
+export declare const sizeAliases: SizeScale;
+export declare const sizes: SizeScale;
+export {};