@basic-ui/material 0.1.16 → 1.0.0-alpha.2

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

@@ -1,36 +1,59 @@
 export declare const theme: {
     googleFonts: string;
     colors: {
-        background: string;
-        surface: string;
-        error: string;
         primary: string;
         secondary: string;
-        muted: 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;
         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;
-            muted: string;
+            'surface-variant': string;
+            outline: string;
         };
         modes: {
             dark: {
-                text: string;
-                background: string;
-                surface: string;
-                error: string;
                 primary: string;
                 secondary: string;
-                muted: 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;
                 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;
-                    muted: string;
+                    'surface-variant': string;
+                    outline: string;
                 };
             };
         };
@@ -42,10 +65,19 @@ export declare const theme: {
     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: {
+    shadowsOriginal: {
         0: string;
         1: string;
         2: string;
@@ -72,6 +104,14 @@ export declare const theme: {
         23: string;
         24: string;
     };
+    shadows: {
+        0: string;
+        1: string;
+        2: string;
+        3: string;
+        4: string;
+        5: string;
+    };
     fonts: {
         body: string;
         heading: string;
@@ -187,9 +227,8 @@ export declare const theme: {
         button: {
             variant: string;
             fontSize: number;
-            fontWeight: string;
             letterSpacing: string;
-            lineHeight: string;
+            fontWeight: string;
         };
         caption: {
             variant: string;
@@ -251,17 +290,17 @@ export declare const theme: {
         variants: {
             base: {
                 variant: string;
-                borderRadius: string;
                 boxShadow: string;
                 py: number;
-                px: number;
+                px: string;
                 height: string;
+                borderRadius: string;
                 cursor: string;
                 outline: string;
             };
             text: {
                 variant: string;
-                px: number;
+                px: string;
             };
             filled: {
                 variant: string;
@@ -276,6 +315,7 @@ export declare const theme: {
                 width: string;
                 maxWidth: string;
                 borderRadius: string;
+                px: number;
             };
             'fab-mini': {
                 variant: string;
@@ -283,6 +323,16 @@ export declare const theme: {
                 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': {
@@ -303,13 +353,19 @@ export declare const theme: {
         };
         elevations: {
             none: {};
-            contained: {
+            default: {
                 transition: string;
-                boxShadow: number;
-                ':focus,:hover': {
+                '&:hover': {
+                    boxShadow: number;
+                };
+                '&:hover:disabled': {
                     boxShadow: number;
                 };
-                ':active': {
+            };
+            elevated: {
+                transition: string;
+                boxShadow: number;
+                '&:hover': {
                     boxShadow: number;
                 };
                 '&:disabled,&:disabled:hover,&:disabled:focus,&:disabled:active': {
@@ -319,10 +375,7 @@ export declare const theme: {
             floating: {
                 transition: string;
                 boxShadow: number;
-                ':focus,:hover': {
-                    boxShadow: number;
-                };
-                ':active': {
+                ':hover': {
                     boxShadow: number;
                 };
                 '&:disabled,&:disabled:hover,&:disabled:focus,&:disabled:active': {
@@ -369,39 +422,32 @@ export declare const theme: {
             };
             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;
-            '6': number;
-            '7': number;
-            '8': number;
-            '9': number;
-            '10': number;
-            '11': number;
-            '12': number;
-            '13': number;
-            '14': number;
-            '15': number;
-            '16': number;
-            '17': number;
-            '18': number;
-            '19': number;
-            '20': number;
-            '21': number;
-            '22': number;
-            '23': number;
-            '24': number;
+            0: number;
+            1: number;
+            2: number;
+            3: number;
+            4: number;
+            5: number;
         };
     };
     zIndices: {

package/build/esm/theme/theme.js

@@ -2,46 +2,63 @@
 // work-in-progress
 // references
 // - https://material.io/design/typography/the-type-system.html#type-scale
-import { readableColor, mix, em } from 'polished';
-const primary = '#5d1049';
-const secondary = '#e30425';
-const error = '#BF360C';
-const background = '#f6f6f6';
-const surface = '#fff';
-const muted = '#f6f6f6';
-export const theme = {
+import { em } from 'polished';
+export var theme = {
   googleFonts: 'https://fonts.googleapis.com/css?family=Roboto+Mono|Roboto:300,400,500,600,700&display=swap',
   colors: {
-    background,
-    surface,
-    error,
-    primary,
-    secondary,
-    muted,
+    primary: '#934078',
+    secondary: '#705765',
+    tertiary: '#80543e',
+    error: '#ba1b1b',
+    'primary-container': '#ffd7ed',
+    'secondary-container': '#fbd9ea',
+    'tertiary-container': '#ffdbc9',
+    'error-container': '#ffdad4',
+    background: '#fcfcfc',
+    surface: '#fcfcfc',
+    'surface-variant': '#efdee5',
+    outline: '#81747a',
     on: {
-      primary: readableColor(primary),
-      secondary: readableColor(secondary),
-      error: readableColor(error),
-      background: readableColor(background),
-      surface: readableColor(surface),
-      muted: readableColor(muted)
+      primary: '#ffffff',
+      secondary: '#ffffff',
+      tertiary: '#ffffff',
+      error: '#ffffff',
+      'primary-container': '#3b002d',
+      'secondary-container': '#291521',
+      'tertiary-container': '#321303',
+      'error-container': '#410001',
+      background: '#1f1a1c',
+      surface: '#1f1a1c',
+      'surface-variant': '#4f4349',
+      outline: '#feecf3'
     },
     modes: {
       dark: {
-        text: '#000',
-        background: mix(0.08, primary, '#121212'),
-        surface: mix(0.08, primary, '#121212'),
-        error,
-        primary: '#EE89BD',
-        secondary,
-        muted,
+        primary: '#ffade0',
+        secondary: '#debece',
+        tertiary: '#f4ba9e',
+        error: '#ffb4a9',
+        'primary-container': '#77285f',
+        'secondary-container': '#57404d',
+        'tertiary-container': '#653d28',
+        'error-container': '#930006',
+        background: '#1f1a1c',
+        surface: '#1f1a1c',
+        'surface-variant': '#4f4349',
+        outline: '#9b8d93',
         on: {
-          primary: "#000",
-          secondary: readableColor(secondary),
-          error: readableColor(error),
-          background: "#fff",
-          surface: "#fff",
-          muted: readableColor(muted)
+          primary: '#5b0e47',
+          secondary: '#402a37',
+          tertiary: '#4b2714',
+          error: '#680003',
+          'primary-container': '#ffd7ed',
+          'secondary-container': '#fbd9ea',
+          'tertiary-container': '#ffdbc9',
+          'error-container': '#ffdad4',
+          background: '#eae0e3',
+          surface: '#eae0e3',
+          'surface-variant': '#d3c2c9',
+          outline: '#22191e'
         }
       }
     }
@@ -53,10 +70,19 @@ export const theme = {
   radii: {
     none: 0,
     default: "0.25rem",
-    large: "0.5rem",
+    'extra-small': "0.25rem",
+    'extra-small_top': "0.25rem".concat(" ", "0.25rem", " 0 0"),
+    small: "0.5rem",
+    medium: "0.75rem",
+    large: "1rem",
+    large_end: "0 ".concat("1rem", " ", "1rem", " 0"),
+    large_top: "1rem".concat(" ", "1rem", " 0 0"),
+    'extra-large': "1.75rem",
+    'extra-large_top': "1.75rem".concat(" ", "1.75rem", " 0 0"),
+    full: "6249.9375rem",
     circle: '100%'
   },
-  shadows: {
+  shadowsOriginal: {
     0: '0 0 0 0 rgba(0,0,0,0.2),0 0 0 0 rgba(0,0,0,0.14),0 0 0 0 rgba(0,0,0,0.12)',
     1: '0 2px 1px -1px rgba(0,0,0,0.2),0 1px 1px 0 rgba(0,0,0,0.14),0 1px 3px 0 rgba(0,0,0,0.12)',
     2: '0 3px 1px -2px rgba(0,0,0,0.2),0 2px 2px 0 rgba(0,0,0,0.14),0 1px 5px 0 rgba(0,0,0,0.12)',
@@ -83,6 +109,14 @@ export const theme = {
     23: '0 11px 14px -7px rgba(0,0,0,0.2),0 23px 36px 3px rgba(0,0,0,0.14),0 9px 44px 8px rgba(0,0,0,0.12)',
     24: '0 11px 15px -7px rgba(0,0,0,0.2),0 24px 38px 3px rgba(0,0,0,0.14),0 9px 46px 8px rgba(0,0,0,0.12)'
   },
+  shadows: {
+    0: '0 0 0 0 rgba(0,0,0,0.2),0 0 0 0 rgba(0,0,0,0.14),0 0 0 0 rgba(0,0,0,0.12)',
+    1: '0 1px 2px rgba(0,0,0,0.3),0 1px 3px 1px rgba(0,0,0,0.15)',
+    2: '0 1px 2px rgba(0,0,0,0.3),0 2px 6px 2px rgba(0,0,0,0.15)',
+    3: '0 4px 8px 3px rgba(0,0,0,0.15),0 1px 3px rgba(0,0,0,0.3)',
+    4: '0 6px 10px 4px rgba(0,0,0,0.15),0 2px 3px rgba(0,0,0,0.3)',
+    5: '0 8px 12px 6px rgba(0,0,0,0.15),0 4px 4px rgba(0,0,0,0.3)'
+  },
   fonts: {
     body: 'Roboto, sans-serif',
     heading: 'Roboto, sans-serif',
@@ -196,11 +230,10 @@ export const theme = {
       letterSpacing: "0.017857142857142856em"
     },
     button: {
-      variant: 'text.caps',
+      variant: 'text.display',
       fontSize: 2,
-      fontWeight: 'medium',
-      letterSpacing: "0.08928571428571429em",
-      lineHeight: 'normal'
+      letterSpacing: "0.08571428571428572em",
+      fontWeight: 'medium'
     },
     caption: {
       variant: 'text.display',
@@ -245,16 +278,16 @@ export const theme = {
     elevations: {
       default: {},
       elevated: {
-        boxShadow: 4
+        boxShadow: 2
       }
     },
     sizes: {
       default: {
-        height: "3.5rem",
+        height: "4rem",
         p: 3
       },
       dense: {
-        height: "3rem"
+        height: "3.5rem"
       }
     }
   },
@@ -262,17 +295,17 @@ export const theme = {
     variants: {
       base: {
         variant: 'text.button',
-        borderRadius: 'default',
         boxShadow: 'none',
         py: 0,
-        px: 3,
-        height: "2.25rem",
+        px: "1.5rem",
+        height: "2.5rem",
+        borderRadius: 'full',
         cursor: 'pointer',
         outline: 'none'
       },
       text: {
         variant: 'buttons.variants.base',
-        px: 2
+        px: "0.75rem"
       },
       filled: {
         variant: 'buttons.variants.base'
@@ -286,7 +319,8 @@ export const theme = {
         maxHeight: "3.5rem",
         width: "3.5rem",
         maxWidth: "3.5rem",
-        borderRadius: 'circle'
+        borderRadius: 'large',
+        px: 0
       },
       'fab-mini': {
         variant: 'buttons.variants.fab',
@@ -294,13 +328,23 @@ export const theme = {
         maxHeight: "2.5rem",
         width: "2.5rem",
         maxWidth: "2.5rem",
+        borderRadius: 'medium',
+        px: 0
+      },
+      'fab-large': {
+        variant: 'buttons.variants.fab',
+        height: "6rem",
+        maxHeight: "6rem",
+        width: "6rem",
+        maxWidth: "6rem",
+        borderRadius: 'extra-large',
         px: 0
       },
       'fab-extended': {
         variant: 'buttons.variants.base',
-        height: "3rem",
-        px: "1.25rem",
-        borderRadius: "1.5rem"
+        height: "3.5rem",
+        px: "1rem",
+        borderRadius: 'large'
       },
       icon: {
         variant: 'buttons.variants.base',
@@ -309,19 +353,25 @@ export const theme = {
         width: "3rem",
         maxWidth: "3rem",
         px: "0.75rem",
-        borderRadius: '100%'
+        borderRadius: 'full'
       }
     },
     elevations: {
       none: {},
-      contained: {
+      default: {
         transition: 'box-shadow .28s cubic-bezier(.4,0,.2,1)',
-        boxShadow: 2,
-        ':focus,:hover': {
-          boxShadow: 4
+        '&:hover': {
+          boxShadow: 1
         },
-        ':active': {
-          boxShadow: 8
+        '&:hover:disabled': {
+          boxShadow: 0
+        }
+      },
+      elevated: {
+        transition: 'box-shadow .28s cubic-bezier(.4,0,.2,1)',
+        boxShadow: 1,
+        '&:hover': {
+          boxShadow: 2
         },
         '&:disabled,&:disabled:hover,&:disabled:focus,&:disabled:active': {
           boxShadow: 0
@@ -329,12 +379,9 @@ export const theme = {
       },
       floating: {
         transition: 'box-shadow .28s cubic-bezier(.4,0,.2,1)',
-        boxShadow: 6,
-        ':focus,:hover': {
-          boxShadow: 8
-        },
-        ':active': {
-          boxShadow: 12
+        boxShadow: 3,
+        ':hover': {
+          boxShadow: 4
         },
         '&:disabled,&:disabled:hover,&:disabled:focus,&:disabled:active': {
           boxShadow: 0
@@ -344,13 +391,13 @@ export const theme = {
     overlays: {
       transparent: {
         hover: {
-          opacity: 0.04
+          opacity: 0.08
         },
         focus: {
           opacity: 0.12
         },
         pressed: {
-          opacity: 0.12
+          opacity: 0.16
         }
       },
       filled: {
@@ -358,10 +405,10 @@ export const theme = {
           opacity: 0.08
         },
         focus: {
-          opacity: 0.24
+          opacity: 0.12
         },
         pressed: {
-          opacity: 0.24
+          opacity: 0.16
         }
       }
     }
@@ -374,45 +421,38 @@ export const theme = {
         py: 0,
         px: 0,
         height: "2rem",
-        borderRadius: "1rem",
+        borderRadius: 'small',
         outline: 'none',
         transition: 'box-shadow .28s cubic-bezier(.4,0,.2,1)'
       },
       filled: {
-        variant: 'chips.variants.base'
+        variant: 'chips.variants.base',
+        boxShadow: 1,
+        ':active:not([data-disabled])': {
+          boxShadow: 2
+        }
       },
       outlined: {
         variant: 'chips.variants.base'
       }
     }
   },
+  dialogs: {
+    variants: {
+      base: {
+        borderRadius: 'extra-large'
+      }
+    },
+    backgroundColorOverlay: 0.11
+  },
   paper: {
     overlays: {
-      '0': 0,
-      '1': 0.05,
-      '2': 0.07,
-      '3': 0.08,
-      '4': 0.09,
-      '5': 0.1,
-      '6': 0.11,
-      '7': 0.115,
-      '8': 0.12,
-      '9': 0.125,
-      '10': 0.13,
-      '11': 0.135,
-      '12': 0.14,
-      '13': 0.1425,
-      '14': 0.145,
-      '15': 0.1475,
-      '16': 0.15,
-      '17': 0.15125,
-      '18': 0.1525,
-      '19': 0.15375,
-      '20': 0.155,
-      '21': 0.15625,
-      '22': 0.1575,
-      '23': 0.15875,
-      '24': 0.16
+      0: 0,
+      1: 0.05,
+      2: 0.08,
+      3: 0.11,
+      4: 0.12,
+      5: 0.14
     }
   },
   zIndices: {