@ultraviolet/ui 2.0.5 → 3.0.0-beta.0

package/dist/theme/ThemeProvider.d.ts

@@ -0,0 +1,737 @@
+import { consoleLightTheme } from '@ultraviolet/themes';
+import type { ReactNode } from 'react';
+/**
+ * Provide an object of the theme variables.
+ */
+export declare const useTheme: () => {
+    breakpoints: {
+        large: string;
+        medium: string;
+        small: string;
+        xlarge: string;
+        xsmall: string;
+        xxsmall: string;
+    };
+    colors: {
+        danger: {
+            background: string;
+            backgroundDisabled: string;
+            backgroundHover: string;
+            backgroundStrong: string;
+            backgroundStrongDisabled: string;
+            backgroundStrongHover: string;
+            border: string;
+            borderDisabled: string;
+            borderHover: string;
+            borderStrong: string;
+            borderStrongDisabled: string;
+            borderStrongHover: string;
+            icon: string;
+            iconDisabled: string;
+            iconHover: string;
+            iconStrong: string;
+            iconStrongDisabled: string;
+            iconStrongHover: string;
+            text: string;
+            textDisabled: string;
+            textHover: string;
+            textStrong: string;
+            textStrongDisabled: string;
+            textStrongHover: string;
+        };
+        info: {
+            background: string;
+            backgroundDisabled: string;
+            backgroundHover: string;
+            backgroundStrong: string;
+            backgroundStrongDisabled: string;
+            backgroundStrongHover: string;
+            border: string;
+            borderDisabled: string;
+            borderHover: string;
+            borderStrong: string;
+            borderStrongDisabled: string;
+            borderStrongHover: string;
+            icon: string;
+            iconDisabled: string;
+            iconHover: string;
+            iconStrong: string;
+            iconStrongDisabled: string;
+            iconStrongHover: string;
+            text: string;
+            textDisabled: string;
+            textHover: string;
+            textStrong: string;
+            textStrongDisabled: string;
+            textStrongHover: string;
+        };
+        neutral: {
+            background: string;
+            backgroundDisabled: string;
+            backgroundHover: string;
+            backgroundStrong: string;
+            backgroundStrongDisabled: string;
+            backgroundStronger: string;
+            backgroundStrongerDisabled: string;
+            backgroundStrongerHover: string;
+            backgroundStrongHover: string;
+            backgroundWeak: string;
+            backgroundWeakDisabled: string;
+            backgroundWeakElevated: string;
+            backgroundWeakHover: string;
+            border: string;
+            borderDisabled: string;
+            borderHover: string;
+            borderStrong: string;
+            borderStrongDisabled: string;
+            borderStronger: string;
+            borderStrongerDisabled: string;
+            borderStrongerHover: string;
+            borderStrongHover: string;
+            borderWeak: string;
+            borderWeakDisabled: string;
+            borderWeakHover: string;
+            icon: string;
+            iconDisabled: string;
+            iconHover: string;
+            iconStrong: string;
+            iconStrongDisabled: string;
+            iconStronger: string;
+            iconStrongerDisabled: string;
+            iconStrongerHover: string;
+            iconStrongHover: string;
+            iconWeak: string;
+            iconWeakDisabled: string;
+            iconWeakHover: string;
+            text: string;
+            textDisabled: string;
+            textHover: string;
+            textStrong: string;
+            textStrongDisabled: string;
+            textStronger: string;
+            textStrongerDisabled: string;
+            textStrongerHover: string;
+            textStrongHover: string;
+            textWeak: string;
+            textWeakDisabled: string;
+            textWeakHover: string;
+        };
+        other: {
+            data: {
+                charts: {
+                    danger: string;
+                    data1: string;
+                    data2: string;
+                    data3: string;
+                    data4: string;
+                    data5: string;
+                    data6: string;
+                    data7: string;
+                    data8: string;
+                    data9: string;
+                    data10: string;
+                    data11: string;
+                    data12: string;
+                    data13: string;
+                    data14: string;
+                    success: string;
+                };
+            };
+            elevation: {
+                background: {
+                    fixed: string;
+                    fixedReversed: string;
+                    overlay: string;
+                    raised: string;
+                    raisedReversed: string;
+                };
+            };
+            gradients: {
+                background: {
+                    linear: {
+                        accent: string;
+                        aqua: string;
+                        blue: string;
+                        emerald: string;
+                        fuschia: string;
+                        magenta: string;
+                        primary: string;
+                    };
+                    radial: {
+                        aquaFuschia: string;
+                        aquaPurple: string;
+                        fuschiaPurple: string;
+                        lime: string;
+                        magenta: string;
+                        purple: string;
+                    };
+                };
+                text: {
+                    dark: string;
+                    light: string;
+                };
+            };
+            icon: {
+                category: {
+                    neutral: {
+                        fill: string;
+                        fillDisabled: string;
+                        fillStrong: string;
+                        fillStrongDisabled: string;
+                    };
+                    primary: {
+                        fill: string;
+                        fillDisabled: string;
+                        fillStrong: string;
+                        fillStrongDisabled: string;
+                    };
+                };
+                product: {
+                    danger: {
+                        fill: string;
+                        fillDisabled: string;
+                        fillStrong: string;
+                        fillStrongDisabled: string;
+                        fillWeak: string;
+                        fillWeakDisabled: string;
+                    };
+                    original: {
+                        fill: string;
+                        fillDisabled: string;
+                        fillStrong: string;
+                        fillStrongDisabled: string;
+                        fillWeak: string;
+                        fillWeakDisabled: string;
+                    };
+                    primary: {
+                        fill: string;
+                        fillDisabled: string;
+                        fillStrong: string;
+                        fillStrongDisabled: string;
+                        fillWeak: string;
+                        fillWeakDisabled: string;
+                    };
+                    warning: {
+                        fill: string;
+                        fillDisabled: string;
+                        fillStrong: string;
+                        fillStrongDisabled: string;
+                        fillWeak: string;
+                        fillWeakDisabled: string;
+                    };
+                };
+            };
+            monochrome: {
+                black: {
+                    background: string;
+                    backgroundDisabled: string;
+                    backgroundHover: string;
+                    border: string;
+                    borderDisabled: string;
+                    borderHover: string;
+                    icon: string;
+                    iconDisabled: string;
+                    iconHover: string;
+                    text: string;
+                    textDisabled: string;
+                    textHover: string;
+                };
+                white: {
+                    background: string;
+                    backgroundDisabled: string;
+                    backgroundHover: string;
+                    border: string;
+                    borderDisabled: string;
+                    borderHover: string;
+                    icon: string;
+                    iconDisabled: string;
+                    iconHover: string;
+                    text: string;
+                    textDisabled: string;
+                    textHover: string;
+                };
+            };
+        };
+        overlay: string;
+        primary: {
+            background: string;
+            backgroundDisabled: string;
+            backgroundHover: string;
+            backgroundStrong: string;
+            backgroundStrongDisabled: string;
+            backgroundStrongHover: string;
+            border: string;
+            borderDisabled: string;
+            borderHover: string;
+            borderStrong: string;
+            borderStrongDisabled: string;
+            borderStrongHover: string;
+            icon: string;
+            iconDisabled: string;
+            iconHover: string;
+            iconStrong: string;
+            iconStrongDisabled: string;
+            iconStrongHover: string;
+            text: string;
+            textDisabled: string;
+            textHover: string;
+            textStrong: string;
+            textStrongDisabled: string;
+            textStrongHover: string;
+        };
+        secondary: {
+            background: string;
+            backgroundDisabled: string;
+            backgroundHover: string;
+            backgroundStrong: string;
+            backgroundStrongDisabled: string;
+            backgroundStrongHover: string;
+            border: string;
+            borderDisabled: string;
+            borderHover: string;
+            borderStrong: string;
+            borderStrongDisabled: string;
+            borderStrongHover: string;
+            icon: string;
+            iconDisabled: string;
+            iconHover: string;
+            iconStrong: string;
+            iconStrongDisabled: string;
+            iconStrongHover: string;
+            text: string;
+            textDisabled: string;
+            textHover: string;
+            textStrong: string;
+            textStrongDisabled: string;
+            textStrongHover: string;
+        };
+        success: {
+            background: string;
+            backgroundDisabled: string;
+            backgroundHover: string;
+            backgroundStrong: string;
+            backgroundStrongDisabled: string;
+            backgroundStrongHover: string;
+            border: string;
+            borderDisabled: string;
+            borderHover: string;
+            borderStrong: string;
+            borderStrongDisabled: string;
+            borderStrongHover: string;
+            icon: string;
+            iconDisabled: string;
+            iconHover: string;
+            iconStrong: string;
+            iconStrongDisabled: string;
+            iconStrongHover: string;
+            text: string;
+            textDisabled: string;
+            textHover: string;
+            textStrong: string;
+            textStrongDisabled: string;
+            textStrongHover: string;
+        };
+        warning: {
+            background: string;
+            backgroundDisabled: string;
+            backgroundHover: string;
+            backgroundStrong: string;
+            backgroundStrongDisabled: string;
+            backgroundStrongHover: string;
+            border: string;
+            borderDisabled: string;
+            borderHover: string;
+            borderStrong: string;
+            borderStrongDisabled: string;
+            borderStrongHover: string;
+            icon: string;
+            iconDisabled: string;
+            iconHover: string;
+            iconStrong: string;
+            iconStrongDisabled: string;
+            iconStrongHover: string;
+            text: string;
+            textDisabled: string;
+            textHover: string;
+            textStrong: string;
+            textStrongDisabled: string;
+            textStrongHover: string;
+        };
+    };
+    radii: {
+        circle: string;
+        default: string;
+        large: string;
+        none: string;
+        small: string;
+        xlarge: string;
+        xxlarge: string;
+    };
+    shadows: {
+        bulk: string;
+        defaultShadow: string;
+        drawer: string;
+        dropdown: string;
+        fixed: {
+            "0": string;
+            "1": string;
+        };
+        fixedReversed: {
+            "0": string;
+            "1": string;
+        };
+        focusDanger: string;
+        focusInfo: string;
+        focusNeutral: string;
+        focusPrimary: string;
+        focusSuccess: string;
+        focusWarning: string;
+        hoverDanger: string;
+        hoverInfo: string;
+        hoverNeutral: string;
+        hoverPrimary: string;
+        hoverSuccess: string;
+        hoverWarning: string;
+        menu: string;
+        modal: string;
+        overlay: {
+            "0": string;
+            "1": string;
+        };
+        popover: string;
+        raised: {
+            "0": string;
+            "1": string;
+        };
+        raisedReversed: {
+            "0": string;
+            "1": string;
+        };
+        tabBar: {
+            active: string;
+            off: string;
+        };
+        tooltip: string;
+    };
+    sizing: {
+        "0": string;
+        "012": string;
+        "025": string;
+        "050": string;
+        "100": string;
+        "125": string;
+        "150": string;
+        "175": string;
+        "200": string;
+        "250": string;
+        "262": string;
+        "300": string;
+        "312": string;
+        "400": string;
+        "437": string;
+        "500": string;
+        "600": string;
+        "700": string;
+        "750": string;
+        "800": string;
+        "900": string;
+        "1000": string;
+    };
+    space: {
+        "0": string;
+        "0.5": string;
+        "0.25": string;
+        "1": string;
+        "1.5": string;
+        "2": string;
+        "3": string;
+        "4": string;
+        "5": string;
+        "6": string;
+        "7": string;
+        "8": string;
+        "9": string;
+        "10": string;
+    };
+    theme: string;
+    typography: {
+        body: {
+            fontFamily: string;
+            fontSize: string;
+            fontWeight: string;
+            letterSpacing: string;
+            lineHeight: string;
+            paragraphSpacing: string;
+            textCase: string;
+            textDecoration: string;
+            weight: string;
+        };
+        bodySmall: {
+            fontFamily: string;
+            fontSize: string;
+            fontWeight: string;
+            letterSpacing: string;
+            lineHeight: string;
+            paragraphSpacing: string;
+            textCase: string;
+            textDecoration: string;
+            weight: string;
+        };
+        bodySmallStrong: {
+            fontFamily: string;
+            fontSize: string;
+            fontWeight: string;
+            letterSpacing: string;
+            lineHeight: string;
+            paragraphSpacing: string;
+            textCase: string;
+            textDecoration: string;
+            weight: string;
+        };
+        bodySmallStronger: {
+            fontFamily: string;
+            fontSize: string;
+            fontWeight: string;
+            letterSpacing: string;
+            lineHeight: string;
+            paragraphSpacing: string;
+            textCase: string;
+            textDecoration: string;
+            weight: string;
+        };
+        bodyStrong: {
+            fontFamily: string;
+            fontSize: string;
+            fontWeight: string;
+            letterSpacing: string;
+            lineHeight: string;
+            paragraphSpacing: string;
+            textCase: string;
+            textDecoration: string;
+            weight: string;
+        };
+        bodyStronger: {
+            fontFamily: string;
+            fontSize: string;
+            fontWeight: string;
+            letterSpacing: string;
+            lineHeight: string;
+            paragraphSpacing: string;
+            textCase: string;
+            textDecoration: string;
+            weight: string;
+        };
+        caption: {
+            fontFamily: string;
+            fontSize: string;
+            fontWeight: string;
+            letterSpacing: string;
+            lineHeight: string;
+            paragraphSpacing: string;
+            textCase: string;
+            textDecoration: string;
+            weight: string;
+        };
+        captionSmall: {
+            fontFamily: string;
+            fontSize: string;
+            fontWeight: string;
+            letterSpacing: string;
+            lineHeight: string;
+            paragraphSpacing: string;
+            textCase: string;
+            textDecoration: string;
+            weight: string;
+        };
+        captionSmallStrong: {
+            fontFamily: string;
+            fontSize: string;
+            fontWeight: string;
+            letterSpacing: string;
+            lineHeight: string;
+            paragraphSpacing: string;
+            textCase: string;
+            textDecoration: string;
+            weight: string;
+        };
+        captionSmallStronger: {
+            fontFamily: string;
+            fontSize: string;
+            fontWeight: string;
+            letterSpacing: string;
+            lineHeight: string;
+            paragraphSpacing: string;
+            textCase: string;
+            textDecoration: string;
+            weight: string;
+        };
+        captionStrong: {
+            fontFamily: string;
+            fontSize: string;
+            fontWeight: string;
+            letterSpacing: string;
+            lineHeight: string;
+            paragraphSpacing: string;
+            textCase: string;
+            textDecoration: string;
+            weight: string;
+        };
+        captionStronger: {
+            fontFamily: string;
+            fontSize: string;
+            fontWeight: string;
+            letterSpacing: string;
+            lineHeight: string;
+            paragraphSpacing: string;
+            textCase: string;
+            textDecoration: string;
+            weight: string;
+        };
+        code: {
+            fontFamily: string;
+            fontSize: string;
+            fontWeight: string;
+            letterSpacing: string;
+            lineHeight: string;
+            paragraphSpacing: string;
+            textCase: string;
+            textDecoration: string;
+            weight: string;
+        };
+        codeStrong: {
+            fontFamily: string;
+            fontSize: string;
+            fontWeight: string;
+            letterSpacing: string;
+            lineHeight: string;
+            paragraphSpacing: string;
+            textCase: string;
+            textDecoration: string;
+            weight: string;
+        };
+        codeStronger: {
+            fontFamily: string;
+            fontSize: string;
+            fontWeight: string;
+            letterSpacing: string;
+            lineHeight: string;
+            paragraphSpacing: string;
+            textCase: string;
+            textDecoration: string;
+            weight: string;
+        };
+        heading: {
+            fontFamily: string;
+            fontSize: string;
+            fontWeight: string;
+            letterSpacing: string;
+            lineHeight: string;
+            paragraphSpacing: string;
+            textCase: string;
+            textDecoration: string;
+            weight: string;
+        };
+        headingLarge: {
+            fontFamily: string;
+            fontSize: string;
+            fontWeight: string;
+            letterSpacing: string;
+            lineHeight: string;
+            paragraphSpacing: string;
+            textCase: string;
+            textDecoration: string;
+            weight: string;
+        };
+        headingLargeStrong: {
+            fontFamily: string;
+            fontSize: string;
+            fontWeight: string;
+            letterSpacing: string;
+            lineHeight: string;
+            paragraphSpacing: string;
+            textCase: string;
+            textDecoration: string;
+            weight: string;
+        };
+        headingLargeStronger: {
+            fontFamily: string;
+            fontSize: string;
+            fontWeight: string;
+            letterSpacing: string;
+            lineHeight: string;
+            paragraphSpacing: string;
+            textCase: string;
+            textDecoration: string;
+            weight: string;
+        };
+        headingSmall: {
+            fontFamily: string;
+            fontSize: string;
+            fontWeight: string;
+            letterSpacing: string;
+            lineHeight: string;
+            paragraphSpacing: string;
+            textCase: string;
+            textDecoration: string;
+            weight: string;
+        };
+        headingSmallStrong: {
+            fontFamily: string;
+            fontSize: string;
+            fontWeight: string;
+            letterSpacing: string;
+            lineHeight: string;
+            paragraphSpacing: string;
+            textCase: string;
+            textDecoration: string;
+            weight: string;
+        };
+        headingSmallStronger: {
+            fontFamily: string;
+            fontSize: string;
+            fontWeight: string;
+            letterSpacing: string;
+            lineHeight: string;
+            paragraphSpacing: string;
+            textCase: string;
+            textDecoration: string;
+            weight: string;
+        };
+        headingStrong: {
+            fontFamily: string;
+            fontSize: string;
+            fontWeight: string;
+            letterSpacing: string;
+            lineHeight: string;
+            paragraphSpacing: string;
+            textCase: string;
+            textDecoration: string;
+            weight: string;
+        };
+        headingStronger: {
+            fontFamily: string;
+            fontSize: string;
+            fontWeight: string;
+            letterSpacing: string;
+            lineHeight: string;
+            paragraphSpacing: string;
+            textCase: string;
+            textDecoration: string;
+            weight: string;
+        };
+    };
+};
+type ThemeProviderProps = {
+    /**
+     * Change the theme by passing a vanilla theme object.
+     * If no theme is provided, it will default to `consolelightTheme`.
+     */
+    theme?: typeof consoleLightTheme;
+    children: ReactNode;
+};
+/**
+ * ThemeProvider will apply generated global CSS variables to the application.
+ * If no theme is provided, it will default to `lightTheme`.
+ */
+export declare const ThemeProvider: ({ children, theme, }: ThemeProviderProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export {};