@basic-ui/material 1.0.0-alpha.51 → 1.0.0-alpha.54

package/build/esm/theme/theme.d.ts

@@ -1,562 +1,590 @@
-export declare const theme: {
-    googleFonts: string;
-    colors: {
-        primary: string;
-        secondary: string;
-        tertiary: string;
-        error: string;
-        'primary-container': string;
-        'secondary-container': string;
-        'tertiary-container': string;
-        'error-container': string;
-        background: string;
-        surface: string;
-        'surface-variant': string;
-        outline: string;
-        'outline-variant': string;
-        on: {
-            primary: string;
-            secondary: string;
-            tertiary: string;
-            error: string;
-            'primary-container': string;
-            'secondary-container': string;
-            'tertiary-container': string;
-            'error-container': string;
-            background: string;
-            surface: string;
-            'surface-variant': string;
-            outline: string;
-            'outline-variant': string;
-        };
-        modes: {
-            dark: {
-                primary: string;
-                secondary: string;
-                tertiary: string;
-                error: string;
-                'primary-container': string;
-                'secondary-container': string;
-                'tertiary-container': string;
-                'error-container': string;
-                background: string;
-                surface: string;
-                'surface-variant': string;
-                outline: string;
-                'outline-variant': string;
-                on: {
-                    primary: string;
-                    secondary: string;
-                    tertiary: string;
-                    error: string;
-                    'primary-container': string;
-                    'secondary-container': string;
-                    'tertiary-container': string;
-                    'error-container': string;
-                    background: string;
-                    surface: string;
-                    'surface-variant': string;
-                    outline: string;
-                    'outline-variant': string;
-                };
-            };
-        };
-    };
-    sizes: {
-        icon: string;
-        avatar: string;
-    };
-    radii: {
-        none: number;
-        default: string;
-        'extra-small': string;
-        'extra-small_top': string;
-        small: string;
-        medium: string;
-        large: string;
-        large_end: string;
-        large_top: string;
-        'extra-large': string;
-        'extra-large_top': string;
-        full: string;
-        circle: string;
-    };
-    shadows: {
-        0: string;
-        1: string;
-        2: string;
-        3: string;
-        4: string;
-        5: string;
-    };
-    fonts: {
-        body: string;
-        heading: string;
-        brand: string;
-        plain: string;
-        monospace: string;
-    };
-    fontSizes: {
-        0: string;
-        1: string;
-        2: string;
-        3: string;
-        4: string;
-        5: string;
-        6: string;
-        7: string;
-        8: string;
-        9: string;
-    };
-    fontWeights: {
-        light: number;
-        regular: number;
-        medium: number;
-    };
-    lineHeights: {
-        body: number;
-        heading: number;
-    };
-    space: {
-        0: string;
-        1: string;
-        2: string;
-        3: string;
-        4: string;
-        5: string;
-        6: string;
-        7: string;
-        8: string;
-    };
-    text: {
-        caps: {
-            textTransform: string;
-            fontFamily: string;
-            lineHeight: string;
-            letterSpacing: string;
-        };
-        heading: {
-            fontFamily: string;
-            lineHeight: string;
-        };
-        display: {
-            fontFamily: string;
-            lineHeight: string;
-        };
-        'display-large': {
-            fontFamily: "plain" | "brand";
-            lineHeight: string;
-            fontSize: string;
-            letterSpacing: string;
-            fontWeight: number;
-        };
-        'display-medium': {
-            fontFamily: "plain" | "brand";
-            lineHeight: string;
-            fontSize: string;
-            letterSpacing: string;
-            fontWeight: number;
-        };
-        'display-small': {
-            fontFamily: "plain" | "brand";
-            lineHeight: string;
-            fontSize: string;
-            letterSpacing: string;
-            fontWeight: number;
-        };
-        'headline-large': {
-            fontFamily: "plain" | "brand";
-            lineHeight: string;
-            fontSize: string;
-            letterSpacing: string;
-            fontWeight: number;
-        };
-        'headline-medium': {
-            fontFamily: "plain" | "brand";
-            lineHeight: string;
-            fontSize: string;
-            letterSpacing: string;
-            fontWeight: number;
-        };
-        'headline-small': {
-            fontFamily: "plain" | "brand";
-            lineHeight: string;
-            fontSize: string;
-            letterSpacing: string;
-            fontWeight: number;
-        };
-        'title-large': {
-            fontFamily: "plain" | "brand";
-            lineHeight: string;
-            fontSize: string;
-            letterSpacing: string;
-            fontWeight: number;
-        };
-        'title-medium': {
-            fontFamily: "plain" | "brand";
-            lineHeight: string;
-            fontSize: string;
-            letterSpacing: string;
-            fontWeight: number;
-        };
-        'title-small': {
-            fontFamily: "plain" | "brand";
-            lineHeight: string;
-            fontSize: string;
-            letterSpacing: string;
-            fontWeight: number;
-        };
-        'label-large': {
-            fontFamily: "plain" | "brand";
-            lineHeight: string;
-            fontSize: string;
-            letterSpacing: string;
-            fontWeight: number;
-        };
-        'label-medium': {
-            fontFamily: "plain" | "brand";
-            lineHeight: string;
-            fontSize: string;
-            letterSpacing: string;
-            fontWeight: number;
-        };
-        'label-small': {
-            fontFamily: "plain" | "brand";
-            lineHeight: string;
-            fontSize: string;
-            letterSpacing: string;
-            fontWeight: number;
-        };
-        'body-large': {
-            fontFamily: "plain" | "brand";
-            lineHeight: string;
-            fontSize: string;
-            letterSpacing: string;
-            fontWeight: number;
-        };
-        'body-medium': {
-            fontFamily: "plain" | "brand";
-            lineHeight: string;
-            fontSize: string;
-            letterSpacing: string;
-            fontWeight: number;
-        };
-        'body-small': {
-            fontFamily: "plain" | "brand";
-            lineHeight: string;
-            fontSize: string;
-            letterSpacing: string;
-            fontWeight: number;
-        };
-        h1: {
-            variant: string;
-            fontWeight: string;
-            fontSize: number;
-            letterSpacing: string;
-        };
-        h2: {
-            variant: string;
-            fontWeight: string;
-            fontSize: number;
-            letterSpacing: string;
-        };
-        h3: {
-            variant: string;
-            fontWeight: string;
-            fontSize: number;
-            letterSpacing: string;
-        };
-        h4: {
-            variant: string;
-            fontWeight: string;
-            fontSize: number;
-            letterSpacing: string;
-        };
-        h5: {
-            variant: string;
-            fontWeight: string;
-            fontSize: number;
-            letterSpacing: string;
-        };
-        h6: {
-            variant: string;
-            fontWeight: string;
-            fontSize: number;
-            letterSpacing: string;
-        };
-        subtitle1: {
-            variant: string;
-            fontWeight: string;
-            fontSize: number;
-            letterSpacing: string;
-        };
-        subtitle2: {
-            variant: string;
-            fontWeight: string;
-            fontSize: number;
-            letterSpacing: string;
-        };
-        body1: {
-            variant: string;
-            fontWeight: string;
-            fontSize: number;
-            letterSpacing: string;
-        };
-        body2: {
-            variant: string;
-            fontWeight: string;
-            fontSize: number;
-            letterSpacing: string;
-        };
-        button: {
-            variant: string;
-            fontSize: number;
-            letterSpacing: string;
-            fontWeight: string;
-        };
-        caption: {
-            variant: string;
-            fontWeight: string;
-            fontSize: number;
-            letterSpacing: string;
-        };
-        overline: {
-            variant: string;
-            fontWeight: string;
-            fontSize: number;
-            letterSpacing: string;
-        };
-    };
-    appbar: {
-        variants: {
-            base: {
-                fontFamily: string;
-                fontSize: number;
-            };
-            default: {
-                variant: string;
-                backgroundColor: string;
-                color: string;
-            };
-            primary: {
-                variant: string;
-                backgroundColor: string;
-                color: string;
-            };
-            secondary: {
-                variant: string;
-                backgroundColor: string;
-                color: string;
-            };
-            transparent: {
-                variant: string;
-                backgroundColor: string;
-                color: string;
-            };
-        };
-        elevations: {
-            default: {};
-            elevated: {
-                boxShadow: number;
-            };
-        };
-        sizes: {
-            default: {
-                height: string;
-                p: number;
-            };
-            dense: {
-                height: string;
-            };
-        };
-    };
-    buttons: {
-        variants: {
-            base: {
-                variant: string;
-                boxShadow: string;
-                py: number;
-                px: string;
-                height: string;
-                borderRadius: string;
-                cursor: string;
-                outline: string;
-            };
-            text: {
-                variant: string;
-                px: string;
-            };
-            filled: {
-                variant: string;
-            };
-            outlined: {
-                variant: string;
-            };
-            fab: {
-                variant: string;
-                height: string;
-                maxHeight: string;
-                width: string;
-                maxWidth: string;
-                borderRadius: string;
-                px: number;
-            };
-            'fab-mini': {
-                variant: string;
-                height: string;
-                maxHeight: string;
-                width: string;
-                maxWidth: string;
-                borderRadius: string;
-                px: number;
-            };
-            'fab-large': {
-                variant: string;
-                height: string;
-                maxHeight: string;
-                width: string;
-                maxWidth: string;
-                borderRadius: string;
-                px: number;
-            };
-            'fab-extended': {
-                variant: string;
-                height: string;
-                px: string;
-                borderRadius: string;
-            };
-            icon: {
-                variant: string;
-                height: string;
-                maxHeight: string;
-                width: string;
-                maxWidth: string;
-                px: string;
-                borderRadius: string;
-            };
-        };
-        elevations: {
-            none: {};
-            default: {
-                transition: string;
-                '&:hover': {
-                    boxShadow: number;
-                };
-                '&:active,&:focus-visible,&:disabled': {
-                    boxShadow: number;
-                };
-            };
-            elevated: {
-                transition: string;
-                boxShadow: number;
-                '&:hover': {
-                    boxShadow: number;
-                };
-                '&:active,&:focus-visible': {
-                    boxShadow: number;
-                };
-                '&:disabled,&:disabled:hover,&:disabled:focus,&:disabled:active': {
-                    boxShadow: number;
-                };
-            };
-            floating: {
-                transition: string;
-                boxShadow: number;
-                ':hover': {
-                    boxShadow: number;
-                };
-                '&:active,&:focus-visible': {
-                    boxShadow: number;
-                };
-                '&:disabled,&:disabled:hover,&:disabled:focus,&:disabled:active': {
-                    boxShadow: number;
-                };
-            };
-        };
-        overlays: {
-            transparent: {
-                hover: {
-                    opacity: number;
-                };
-                focus: {
-                    opacity: number;
-                };
-                pressed: {
-                    opacity: number;
-                };
-            };
-            filled: {
-                hover: {
-                    opacity: number;
-                };
-                focus: {
-                    opacity: number;
-                };
-                pressed: {
-                    opacity: number;
-                };
-            };
-        };
-    };
-    chips: {
-        variants: {
-            base: {
-                variant: string;
-                boxShadow: string;
-                py: number;
-                px: number;
-                height: string;
-                borderRadius: string;
-                outline: string;
-                transition: string;
-            };
-            filled: {
-                variant: string;
-                boxShadow: number;
-                ':active:not([data-disabled])': {
-                    boxShadow: number;
-                };
-            };
-            outlined: {
-                variant: string;
-            };
-        };
-    };
-    dialogs: {
-        variants: {
-            base: {
-                borderRadius: string;
-            };
-        };
-        backgroundColorOverlay: number;
-    };
-    paper: {
-        overlays: {
-            0: number;
-            1: number;
-            2: number;
-            3: number;
-            4: number;
-            5: number;
-        };
-    };
-    zIndices: {
-        appBar: number;
-        drawer: number;
-        dialog: number;
-        snackbar: number;
-        tooltip: number;
-    };
-    styles: {
-        root: {
-            body: {
-                fontFamily: string;
-                fontWeight: string;
-                lineHeight: string;
-                backgroundColor: string;
-                color: string;
-            };
-        };
-    };
-};
-export declare type Theme = typeof theme;
+export declare const theme: {
+    googleFonts: string;
+    colors: {
+        primary: string;
+        secondary: string;
+        tertiary: string;
+        error: string;
+        'primary-container': string;
+        'secondary-container': string;
+        'tertiary-container': string;
+        'error-container': string;
+        background: string;
+        'surface-variant': string;
+        outline: string;
+        'outline-variant': string;
+        'surface-dim': string;
+        surface: string;
+        'surface-bright': string;
+        'surface-container-lowest': string;
+        'surface-container-low': string;
+        'surface-container': string;
+        'surface-container-high': string;
+        'surface-container-highest': string;
+        on: {
+            primary: string;
+            secondary: string;
+            tertiary: string;
+            error: string;
+            'primary-container': string;
+            'secondary-container': string;
+            'tertiary-container': string;
+            'error-container': string;
+            background: string;
+            'surface-variant': string;
+            outline: string;
+            'outline-variant': string;
+            'surface-dim': string;
+            surface: string;
+            'surface-bright': string;
+            'surface-container-lowest': string;
+            'surface-container-low': string;
+            'surface-container': string;
+            'surface-container-high': string;
+            'surface-container-highest': string;
+        };
+        modes: {
+            dark: {
+                primary: string;
+                secondary: string;
+                tertiary: string;
+                error: string;
+                'primary-container': string;
+                'secondary-container': string;
+                'tertiary-container': string;
+                'error-container': string;
+                background: string;
+                'surface-variant': string;
+                outline: string;
+                'outline-variant': string;
+                'surface-dim': string;
+                surface: string;
+                'surface-bright': string;
+                'surface-container-lowest': string;
+                'surface-container-low': string;
+                'surface-container': string;
+                'surface-container-high': string;
+                'surface-container-highest': string;
+                on: {
+                    primary: string;
+                    secondary: string;
+                    tertiary: string;
+                    error: string;
+                    'primary-container': string;
+                    'secondary-container': string;
+                    'tertiary-container': string;
+                    'error-container': string;
+                    background: string;
+                    'surface-variant': string;
+                    outline: string;
+                    'outline-variant': string;
+                    'surface-dim': string;
+                    surface: string;
+                    'surface-bright': string;
+                    'surface-container-lowest': string;
+                    'surface-container-low': string;
+                    'surface-container': string;
+                    'surface-container-high': string;
+                    'surface-container-highest': string;
+                };
+            };
+        };
+    };
+    sizes: {
+        icon: string;
+        avatar: string;
+    };
+    radii: {
+        none: number;
+        default: string;
+        'extra-small': string;
+        'extra-small_top': string;
+        small: string;
+        medium: string;
+        large: string;
+        large_end: string;
+        large_top: string;
+        'extra-large': string;
+        'extra-large_top': string;
+        full: string;
+        circle: string;
+    };
+    shadows: {
+        0: string;
+        1: string;
+        2: string;
+        3: string;
+        4: string;
+        5: string;
+    };
+    fonts: {
+        body: string;
+        heading: string;
+        brand: string;
+        plain: string;
+        monospace: string;
+    };
+    fontSizes: {
+        0: string;
+        1: string;
+        2: string;
+        3: string;
+        4: string;
+        5: string;
+        6: string;
+        7: string;
+        8: string;
+        9: string;
+    };
+    fontWeights: {
+        light: number;
+        regular: number;
+        medium: number;
+    };
+    lineHeights: {
+        body: number;
+        heading: number;
+    };
+    space: {
+        0: string;
+        1: string;
+        2: string;
+        3: string;
+        4: string;
+        5: string;
+        6: string;
+        7: string;
+        8: string;
+    };
+    text: {
+        caps: {
+            textTransform: string;
+            fontFamily: string;
+            lineHeight: string;
+            letterSpacing: string;
+        };
+        heading: {
+            fontFamily: string;
+            lineHeight: string;
+        };
+        display: {
+            fontFamily: string;
+            lineHeight: string;
+        };
+        'display-large': {
+            fontFamily: "plain" | "brand";
+            lineHeight: string;
+            fontSize: string;
+            letterSpacing: string;
+            fontWeight: number;
+        };
+        'display-medium': {
+            fontFamily: "plain" | "brand";
+            lineHeight: string;
+            fontSize: string;
+            letterSpacing: string;
+            fontWeight: number;
+        };
+        'display-small': {
+            fontFamily: "plain" | "brand";
+            lineHeight: string;
+            fontSize: string;
+            letterSpacing: string;
+            fontWeight: number;
+        };
+        'headline-large': {
+            fontFamily: "plain" | "brand";
+            lineHeight: string;
+            fontSize: string;
+            letterSpacing: string;
+            fontWeight: number;
+        };
+        'headline-medium': {
+            fontFamily: "plain" | "brand";
+            lineHeight: string;
+            fontSize: string;
+            letterSpacing: string;
+            fontWeight: number;
+        };
+        'headline-small': {
+            fontFamily: "plain" | "brand";
+            lineHeight: string;
+            fontSize: string;
+            letterSpacing: string;
+            fontWeight: number;
+        };
+        'title-large': {
+            fontFamily: "plain" | "brand";
+            lineHeight: string;
+            fontSize: string;
+            letterSpacing: string;
+            fontWeight: number;
+        };
+        'title-medium': {
+            fontFamily: "plain" | "brand";
+            lineHeight: string;
+            fontSize: string;
+            letterSpacing: string;
+            fontWeight: number;
+        };
+        'title-small': {
+            fontFamily: "plain" | "brand";
+            lineHeight: string;
+            fontSize: string;
+            letterSpacing: string;
+            fontWeight: number;
+        };
+        'label-large': {
+            fontFamily: "plain" | "brand";
+            lineHeight: string;
+            fontSize: string;
+            letterSpacing: string;
+            fontWeight: number;
+        };
+        'label-medium': {
+            fontFamily: "plain" | "brand";
+            lineHeight: string;
+            fontSize: string;
+            letterSpacing: string;
+            fontWeight: number;
+        };
+        'label-small': {
+            fontFamily: "plain" | "brand";
+            lineHeight: string;
+            fontSize: string;
+            letterSpacing: string;
+            fontWeight: number;
+        };
+        'body-large': {
+            fontFamily: "plain" | "brand";
+            lineHeight: string;
+            fontSize: string;
+            letterSpacing: string;
+            fontWeight: number;
+        };
+        'body-medium': {
+            fontFamily: "plain" | "brand";
+            lineHeight: string;
+            fontSize: string;
+            letterSpacing: string;
+            fontWeight: number;
+        };
+        'body-small': {
+            fontFamily: "plain" | "brand";
+            lineHeight: string;
+            fontSize: string;
+            letterSpacing: string;
+            fontWeight: number;
+        };
+        h1: {
+            variant: string;
+            fontWeight: string;
+            fontSize: number;
+            letterSpacing: string;
+        };
+        h2: {
+            variant: string;
+            fontWeight: string;
+            fontSize: number;
+            letterSpacing: string;
+        };
+        h3: {
+            variant: string;
+            fontWeight: string;
+            fontSize: number;
+            letterSpacing: string;
+        };
+        h4: {
+            variant: string;
+            fontWeight: string;
+            fontSize: number;
+            letterSpacing: string;
+        };
+        h5: {
+            variant: string;
+            fontWeight: string;
+            fontSize: number;
+            letterSpacing: string;
+        };
+        h6: {
+            variant: string;
+            fontWeight: string;
+            fontSize: number;
+            letterSpacing: string;
+        };
+        subtitle1: {
+            variant: string;
+            fontWeight: string;
+            fontSize: number;
+            letterSpacing: string;
+        };
+        subtitle2: {
+            variant: string;
+            fontWeight: string;
+            fontSize: number;
+            letterSpacing: string;
+        };
+        body1: {
+            variant: string;
+            fontWeight: string;
+            fontSize: number;
+            letterSpacing: string;
+        };
+        body2: {
+            variant: string;
+            fontWeight: string;
+            fontSize: number;
+            letterSpacing: string;
+        };
+        button: {
+            variant: string;
+            fontSize: number;
+            letterSpacing: string;
+            fontWeight: string;
+        };
+        caption: {
+            variant: string;
+            fontWeight: string;
+            fontSize: number;
+            letterSpacing: string;
+        };
+        overline: {
+            variant: string;
+            fontWeight: string;
+            fontSize: number;
+            letterSpacing: string;
+        };
+    };
+    appbar: {
+        variants: {
+            base: {
+                fontFamily: string;
+                fontSize: number;
+            };
+            default: {
+                variant: string;
+                backgroundColor: string;
+                color: string;
+            };
+            primary: {
+                variant: string;
+                backgroundColor: string;
+                color: string;
+            };
+            secondary: {
+                variant: string;
+                backgroundColor: string;
+                color: string;
+            };
+            transparent: {
+                variant: string;
+                backgroundColor: string;
+                color: string;
+            };
+        };
+        elevations: {
+            default: {};
+            elevated: {
+                boxShadow: number;
+            };
+        };
+        sizes: {
+            default: {
+                height: string;
+                p: number;
+            };
+            dense: {
+                height: string;
+            };
+        };
+    };
+    buttons: {
+        variants: {
+            base: {
+                variant: string;
+                boxShadow: string;
+                py: number;
+                px: string;
+                height: string;
+                borderRadius: string;
+                cursor: string;
+                outline: string;
+            };
+            text: {
+                variant: string;
+                px: string;
+            };
+            filled: {
+                variant: string;
+            };
+            outlined: {
+                variant: string;
+            };
+            fab: {
+                variant: string;
+                height: string;
+                maxHeight: string;
+                width: string;
+                maxWidth: string;
+                borderRadius: string;
+                px: number;
+            };
+            'fab-mini': {
+                variant: string;
+                height: string;
+                maxHeight: string;
+                width: string;
+                maxWidth: string;
+                borderRadius: string;
+                px: number;
+            };
+            'fab-large': {
+                variant: string;
+                height: string;
+                maxHeight: string;
+                width: string;
+                maxWidth: string;
+                borderRadius: string;
+                px: number;
+            };
+            'fab-extended': {
+                variant: string;
+                height: string;
+                px: string;
+                borderRadius: string;
+            };
+            icon: {
+                variant: string;
+                height: string;
+                maxHeight: string;
+                width: string;
+                maxWidth: string;
+                px: string;
+                borderRadius: string;
+            };
+        };
+        elevations: {
+            none: {};
+            default: {
+                transition: string;
+                '&:hover': {
+                    boxShadow: number;
+                };
+                '&:active,&:focus-visible,&:disabled': {
+                    boxShadow: number;
+                };
+            };
+            elevated: {
+                transition: string;
+                boxShadow: number;
+                '&:hover': {
+                    boxShadow: number;
+                };
+                '&:active,&:focus-visible': {
+                    boxShadow: number;
+                };
+                '&:disabled,&:disabled:hover,&:disabled:focus,&:disabled:active': {
+                    boxShadow: number;
+                };
+            };
+            floating: {
+                transition: string;
+                boxShadow: number;
+                ':hover': {
+                    boxShadow: number;
+                };
+                '&:active,&:focus-visible': {
+                    boxShadow: number;
+                };
+                '&:disabled,&:disabled:hover,&:disabled:focus,&:disabled:active': {
+                    boxShadow: number;
+                };
+            };
+        };
+        overlays: {
+            transparent: {
+                hover: {
+                    opacity: number;
+                };
+                focus: {
+                    opacity: number;
+                };
+                pressed: {
+                    opacity: number;
+                };
+            };
+            filled: {
+                hover: {
+                    opacity: number;
+                };
+                focus: {
+                    opacity: number;
+                };
+                pressed: {
+                    opacity: number;
+                };
+            };
+        };
+    };
+    chips: {
+        variants: {
+            base: {
+                variant: string;
+                boxShadow: string;
+                py: number;
+                px: number;
+                height: string;
+                borderRadius: string;
+                outline: string;
+                transition: string;
+            };
+            filled: {
+                variant: string;
+                boxShadow: number;
+                ':active:not([data-disabled])': {
+                    boxShadow: number;
+                };
+            };
+            outlined: {
+                variant: string;
+            };
+        };
+    };
+    dialogs: {
+        variants: {
+            base: {
+                borderRadius: string;
+            };
+        };
+        backgroundColorOverlay: number;
+    };
+    paper: {
+        overlays: {
+            0: number;
+            1: number;
+            2: number;
+            3: number;
+            4: number;
+            5: number;
+        };
+    };
+    zIndices: {
+        appBar: number;
+        drawer: number;
+        dialog: number;
+        snackbar: number;
+        tooltip: number;
+    };
+    styles: {
+        root: {
+            body: {
+                fontFamily: string;
+                fontWeight: string;
+                lineHeight: string;
+                backgroundColor: string;
+                color: string;
+            };
+        };
+    };
+};
+export type Theme = typeof theme;