@ultraviolet/ui 1.56.0 → 1.57.0

package/dist/theme/index.d.ts

@@ -13,11 +13,6 @@ declare const colors: {
         backgroundStrong: string;
         backgroundStrongDisabled: string;
         backgroundStrongHover: string;
-        /**
-         * Will extend theme with new theme properties
-         * @param {UltravioletUITheme} baseTheme the theme you want to extend from, by default it is set to light theme
-         * @param {RecursivePartial<UltravioletUITheme>} extendedTheme the properties of a new theme you want to apply from baseTheme
-         */
         border: string;
         borderDisabled: string;
         borderHover: string;
@@ -135,6 +130,15 @@ declare const colors: {
                 success: string;
             };
         };
+        elevation: {
+            background: {
+                fixed: string;
+                fixedReversed: string;
+                overlay: string;
+                raised: string;
+                raisedReversed: string;
+            };
+        };
         gradients: {
             background: {
                 linear: {
@@ -422,6 +426,14 @@ declare const colors: {
     defaultShadow: string;
     drawer: string;
     dropdown: string;
+    fixed: {
+        "0": string;
+        "1": string;
+    };
+    fixedReversed: {
+        "0": string;
+        "1": string;
+    };
     focusDanger: string;
     focusInfo: string;
     focusNeutral: string;
@@ -436,7 +448,19 @@ declare const colors: {
     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;
@@ -790,802 +814,10 @@ type RecursivePartial<T> = {
  * @param {UltravioletUITheme} baseTheme the theme you want to extend from, by default it is set to light theme
  * @param {RecursivePartial<UltravioletUITheme>} extendedTheme the properties of a new theme you want to apply from baseTheme
  */
-declare const extendTheme: (extendedTheme: RecursivePartial<UltravioletUITheme>) => {
-    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;
-            /**
-             * Will extend theme with new theme properties
-             * @param {UltravioletUITheme} baseTheme the theme you want to extend from, by default it is set to light theme
-             * @param {RecursivePartial<UltravioletUITheme>} extendedTheme the properties of a new theme you want to apply from baseTheme
-             */
-            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;
-            backgroundStrongHover: string;
-            backgroundStronger: string;
-            backgroundStrongerDisabled: string;
-            backgroundStrongerHover: string;
-            backgroundWeak: string;
-            backgroundWeakDisabled: string;
-            backgroundWeakElevated: string;
-            backgroundWeakHover: string;
-            border: string;
-            borderDisabled: string;
-            borderHover: string;
-            borderStrong: string;
-            borderStrongDisabled: string;
-            borderStrongHover: string;
-            borderStronger: string;
-            borderStrongerDisabled: string;
-            borderStrongerHover: string;
-            borderWeak: string;
-            borderWeakDisabled: string;
-            borderWeakHover: string;
-            icon: string;
-            iconDisabled: string;
-            iconHover: string;
-            iconStrong: string;
-            iconStrongDisabled: string;
-            iconStrongHover: string;
-            iconStronger: string;
-            iconStrongerDisabled: string;
-            iconStrongerHover: string;
-            iconWeak: string;
-            iconWeakDisabled: string;
-            iconWeakHover: string;
-            text: string;
-            textDisabled: string;
-            textHover: string;
-            textStrong: string;
-            textStrongDisabled: string;
-            textStrongHover: string;
-            textStronger: string;
-            textStrongerDisabled: string;
-            textStrongerHover: string;
-            textWeak: string;
-            textWeakDisabled: string;
-            textWeakHover: string;
-        };
-        other: {
-            data: {
-                charts: {
-                    danger: string;
-                    data1: string;
-                    data10: string;
-                    data11: string;
-                    data12: string;
-                    data13: string;
-                    data14: string;
-                    data2: string;
-                    data3: string;
-                    data4: string;
-                    data5: string;
-                    data6: string;
-                    data7: string;
-                    data8: string;
-                    data9: string;
-                    success: 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;
-                    };
-                };
-            };
-        };
-        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;
-        };
-    } & {
-        danger: {
-            backgroundWeak: string;
-            backgroundWeakDisabled: string;
-            backgroundWeakHover: string;
-            borderWeak: string;
-            borderWeakDisabled: string;
-            borderWeakHover: string;
-            iconWeak: string;
-            iconWeakDisabled: string;
-            iconWeakHover: string;
-            textWeak: string;
-            textWeakDisabled: string;
-            textWeakHover: string;
-        };
-        info: {
-            backgroundWeak: string;
-            backgroundWeakDisabled: string;
-            backgroundWeakHover: string;
-            borderWeak: string;
-            borderWeakDisabled: string;
-            borderWeakHover: string;
-            iconWeak: string;
-            iconWeakDisabled: string;
-            iconWeakHover: string;
-            textWeak: string;
-            textWeakDisabled: string;
-            textWeakHover: string;
-        };
-        primary: {
-            backgroundWeak: string;
-            backgroundWeakDisabled: string;
-            backgroundWeakHover: string;
-            borderWeak: string;
-            borderWeakDisabled: string;
-            borderWeakHover: string;
-            iconWeak: string;
-            iconWeakDisabled: string;
-            iconWeakHover: string;
-            textWeak: string;
-            textWeakDisabled: string;
-            textWeakHover: string;
-        };
-        secondary: {
-            backgroundWeak: string;
-            backgroundWeakDisabled: string;
-            backgroundWeakHover: string;
-            borderWeak: string;
-            borderWeakDisabled: string;
-            borderWeakHover: string;
-            iconWeak: string;
-            iconWeakDisabled: string;
-            iconWeakHover: string;
-            textWeak: string;
-            textWeakDisabled: string;
-            textWeakHover: string;
-        };
-        success: {
-            backgroundWeak: string;
-            backgroundWeakDisabled: string;
-            backgroundWeakHover: string;
-            borderWeak: string;
-            borderWeakDisabled: string;
-            borderWeakHover: string;
-            iconWeak: string;
-            iconWeakDisabled: string;
-            iconWeakHover: string;
-            textWeak: string;
-            textWeakDisabled: string;
-            textWeakHover: string;
-        };
-        warning: {
-            backgroundWeak: string;
-            backgroundWeakDisabled: string;
-            backgroundWeakHover: string;
-            borderWeak: string;
-            borderWeakDisabled: string;
-            borderWeakHover: string;
-            iconWeak: string;
-            iconWeakDisabled: string;
-            iconWeakHover: string;
-            textWeak: string;
-            textWeakDisabled: string;
-            textWeakHover: string;
-        };
-        other: {
-            gradients: {
-                background: {
-                    gold: string;
-                    purple: string;
-                    strong: string;
-                    accent: string;
-                    aqua: string;
-                    blue: string;
-                    emerald: string;
-                    fuschia: string;
-                    magenta: string;
-                    primary: string;
-                };
-            };
-        };
-    };
-    radii: {
-        circle: string;
-        default: string;
-        large: string;
-        none: string;
-        small: string;
-        xlarge: string;
-    };
-    shadows: {
-        bulk: string;
-        defaultShadow: string;
-        drawer: string;
-        dropdown: 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;
-        popover: string;
-        tabBar: {
-            active: string;
-            off: string;
-        };
-        tooltip: string;
-    };
-    space: {
-        '0': string;
-        '1': string;
-        '2': string;
-        '3': string;
-        '4': string;
-        '5': string;
-        '6': string;
-        '7': string;
-        '8': string;
-        '9': string;
-        '10': string;
-        '0.25': string;
-        '0.5': string;
-        '1.5': 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;
-        };
-    } & {
-        body: {
-            fontFamily: string;
-        };
-        bodySmall: {
-            fontFamily: string;
-        };
-        bodySmallStrong: {
-            fontFamily: string;
-        };
-        bodySmallStronger: {
-            fontFamily: string;
-        };
-        bodyStrong: {
-            fontFamily: string;
-        };
-        bodyStronger: {
-            fontFamily: string;
-        };
-        caption: {
-            fontFamily: string;
-        };
-        captionSmall: {
-            fontFamily: string;
-        };
-        captionSmallStrong: {
-            fontFamily: string;
-        };
-        captionSmallStronger: {
-            fontFamily: string;
-        };
-        captionStrong: {
-            fontFamily: string;
-        };
-        captionStronger: {
-            fontFamily: string;
-        };
-        heading: {
-            fontFamily: string;
-        };
-        headingLarge: {
-            fontFamily: string;
-        };
-        headingSmall: {
-            fontFamily: string;
-        };
-    };
-    screens: {
-        xsmall: number;
-        small: number;
-        medium: number;
-        large: number;
-        xlarge: number;
-    };
-};
+declare const extendTheme: (extendedTheme: RecursivePartial<UltravioletUITheme>) => UltravioletUITheme;
 type Color = Extract<keyof typeof consoleLightTheme.colors, 'primary' | 'secondary' | 'neutral' | 'success' | 'danger' | 'warning' | 'info'>;
 declare const SENTIMENTS: readonly ["primary", "secondary", "neutral", "success", "danger", "warning", "info"];
-declare const SENTIMENTS_WITHOUT_NEUTRAL: ("primary" | "secondary" | "neutral" | "success" | "danger" | "warning" | "info")[];
+declare const SENTIMENTS_WITHOUT_NEUTRAL: ("primary" | "secondary" | "success" | "danger" | "warning" | "info")[];
 export type { SCWUITheme, UltravioletUITheme, Color };
 export { colors, shadows, space, radii, screens, consoleDarkTheme as darkTheme, extendTheme, SENTIMENTS, SENTIMENTS_WITHOUT_NEUTRAL, typography, };
 export default consoleLightTheme;