@basic-ui/material 0.1.13 → 1.0.0-alpha.0

package/build/esm/color.js

@@ -13,16 +13,20 @@ export const alpha = (colorString, alphaValue) => theme => {
   const rgb = parseToRgb(color);
   return "rgba(".concat(rgb.red, ",").concat(rgb.green, ",").concat(rgb.blue, ",").concat(alphaValue, ")");
 };
-export function getBackgroundOverlay(theme, backgroundOverlay) {
+export function getColorOverlay(theme, baseColor, overlayColor, overlayOpacity) {
+  baseColor = get(theme, "colors.".concat(baseColor)) || baseColor;
+  overlayColor = alpha(overlayColor, overlayOpacity)(theme);
+  return {
+    background: "linear-gradient(".concat(overlayColor, ", ").concat(overlayColor, "), ").concat(baseColor)
+  };
+}
+export function getBackgroundOverlay(theme, backgroundOverlay, overlayColor = 'on.surface') {
   if (Number(backgroundOverlay) <= 0) {
     return {};
   }
 
-  return {
-    background: "linear-gradient(".concat(get(theme, 'colors.surface'), ", ").concat(get(theme, 'colors.surface'), "), ").concat(alpha('on.surface', get(theme, "paper.overlays.".concat(backgroundOverlay)) || 0)(theme)),
-    backgroundBlendMode: 'overlay',
-    backgroundRepeat: 'no-repeat'
-  };
+  const overlay = get(theme, "paper.overlays.".concat(backgroundOverlay)) || 0;
+  return getColorOverlay(theme, 'surface', overlayColor, overlay);
 }
 export function getDarkThemeBackgroundOverlay(theme, backgroundOverlay) {
   if (Number(backgroundOverlay) <= 0) {

package/build/esm/color.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/color.ts"],"names":["get","parseToRgb","DARK_THEME_CLASS","alpha","colorString","alphaValue","theme","color","startsWith","rgb","red","green","blue","getBackgroundOverlay","backgroundOverlay","Number","background","backgroundBlendMode","backgroundRepeat","getDarkThemeBackgroundOverlay"],"mappings":";AAAA,SAASA,GAAT,QAAuC,oBAAvC;AACA,SAASC,UAAT,QAA2B,UAA3B;AACA,SAASC,gBAAT,QAAiC,aAAjC;AAGA,OAAO,MAAMC,KAAK,GAAG,CAACC,WAAD,EAAsBC,UAAtB,KACnBC,KADgE,IAE7D;AACH,QAAMC,KAAK,GAAGP,GAAG,CAACM,KAAD,EAAQ,YAAYF,WAApB,EAAiCA,WAAjC,CAAjB;;AACA,MAAIG,KAAK,CAACC,UAAN,CAAiB,KAAjB,CAAJ,EAA6B;AAC3B,UAAMD,KAAK,GAAGP,GAAG,CAACM,KAAD,EAAQ,YAAYF,WAAZ,GAA0B,MAAlC,EAA0CA,WAA1C,CAAjB;AACA,0BAAeG,KAAf,cAAwBF,UAAxB;AACD;;AAED,QAAMI,GAAG,GAAGR,UAAU,CAACM,KAAD,CAAtB;AACA,wBAAeE,GAAG,CAACC,GAAnB,cAA0BD,GAAG,CAACE,KAA9B,cAAuCF,GAAG,CAACG,IAA3C,cAAmDP,UAAnD;AACD,CAXM;AAaP,OAAO,SAASQ,oBAAT,CACLP,KADK,EAELQ,iBAFK,EAGc;AACnB,MAAIC,MAAM,CAACD,iBAAD,CAAN,IAA6B,CAAjC,EAAoC;AAClC,WAAO,EAAP;AACD;;AAED,SAAO;AACLE,IAAAA,UAAU,4BAAqBhB,GAAG,CAACM,KAAD,EAAQ,gBAAR,CAAxB,eAAsDN,GAAG,CACjEM,KADiE,EAEjE,gBAFiE,CAAzD,gBAGHH,KAAK,CACV,YADU,EAEVH,GAAG,CAACM,KAAD,2BAA0BQ,iBAA1B,EAAH,IAAqD,CAF3C,CAAL,CAGLR,KAHK,CAHG,CADL;AAQLW,IAAAA,mBAAmB,EAAE,SARhB;AASLC,IAAAA,gBAAgB,EAAE;AATb,GAAP;AAWD;AAED,OAAO,SAASC,6BAAT,CACLb,KADK,EAELQ,iBAFK,EAGc;AACnB,MAAIC,MAAM,CAACD,iBAAD,CAAN,IAA6B,CAAjC,EAAoC;AAClC,WAAO,EAAP;AACD;;AAED,SAAO;AACL,gBAAKZ,gBAAL,mBAA8BA,gBAA9B,iBACKW,oBAAoB,CAACP,KAAD,EAAQQ,iBAAR,CADzB;AADK,GAAP;AAKD","sourcesContent":["import { get, SystemStyleObject } from '@styled-system/css';\nimport { parseToRgb } from 'polished';\nimport { DARK_THEME_CLASS } from './ColorMode';\nimport { Theme } from './theme';\n\nexport const alpha = (colorString: string, alphaValue: number) => (\n  theme: any\n) => {\n  const color = get(theme, 'colors.' + colorString, colorString);\n  if (color.startsWith('var')) {\n    const color = get(theme, 'colors.' + colorString + '_rgb', colorString);\n    return `rgba(${color},${alphaValue})`;\n  }\n\n  const rgb = parseToRgb(color);\n  return `rgba(${rgb.red},${rgb.green},${rgb.blue},${alphaValue})`;\n};\n\nexport function getBackgroundOverlay(\n  theme: Theme,\n  backgroundOverlay: number | string\n): SystemStyleObject {\n  if (Number(backgroundOverlay) <= 0) {\n    return {};\n  }\n\n  return {\n    background: `linear-gradient(${get(theme, 'colors.surface')}, ${get(\n      theme,\n      'colors.surface'\n    )}), ${alpha(\n      'on.surface',\n      get(theme, `paper.overlays.${backgroundOverlay}`) || 0\n    )(theme)}`,\n    backgroundBlendMode: 'overlay',\n    backgroundRepeat: 'no-repeat',\n  };\n}\n\nexport function getDarkThemeBackgroundOverlay(\n  theme: Theme,\n  backgroundOverlay: number | string\n): SystemStyleObject {\n  if (Number(backgroundOverlay) <= 0) {\n    return {};\n  }\n\n  return {\n    [`.${DARK_THEME_CLASS} &, &.${DARK_THEME_CLASS}`]: {\n      ...getBackgroundOverlay(theme, backgroundOverlay),\n    },\n  };\n}\n"],"file":"color.js"}
+{"version":3,"sources":["../../src/color.ts"],"names":["get","parseToRgb","DARK_THEME_CLASS","alpha","colorString","alphaValue","theme","color","startsWith","rgb","red","green","blue","getColorOverlay","baseColor","overlayColor","overlayOpacity","background","getBackgroundOverlay","backgroundOverlay","Number","overlay","getDarkThemeBackgroundOverlay"],"mappings":";AAAA,SAASA,GAAT,QAAuC,oBAAvC;AACA,SAASC,UAAT,QAA2B,UAA3B;AACA,SAASC,gBAAT,QAAiC,aAAjC;AAGA,OAAO,MAAMC,KAAK,GAAG,CAACC,WAAD,EAAsBC,UAAtB,KACnBC,KADgE,IAE7D;AACH,QAAMC,KAAK,GAAGP,GAAG,CAACM,KAAD,EAAQ,YAAYF,WAApB,EAAiCA,WAAjC,CAAjB;;AACA,MAAIG,KAAK,CAACC,UAAN,CAAiB,KAAjB,CAAJ,EAA6B;AAC3B,UAAMD,KAAK,GAAGP,GAAG,CAACM,KAAD,EAAQ,YAAYF,WAAZ,GAA0B,MAAlC,EAA0CA,WAA1C,CAAjB;AACA,0BAAeG,KAAf,cAAwBF,UAAxB;AACD;;AAED,QAAMI,GAAG,GAAGR,UAAU,CAACM,KAAD,CAAtB;AACA,wBAAeE,GAAG,CAACC,GAAnB,cAA0BD,GAAG,CAACE,KAA9B,cAAuCF,GAAG,CAACG,IAA3C,cAAmDP,UAAnD;AACD,CAXM;AAaP,OAAO,SAASQ,eAAT,CACLP,KADK,EAELQ,SAFK,EAGLC,YAHK,EAILC,cAJK,EAKc;AACnBF,EAAAA,SAAS,GAAGd,GAAG,CAACM,KAAD,mBAAkBQ,SAAlB,EAAH,IAAqCA,SAAjD;AACAC,EAAAA,YAAY,GAAGZ,KAAK,CAACY,YAAD,EAAeC,cAAf,CAAL,CAAoCV,KAApC,CAAf;AAEA,SAAO;AACLW,IAAAA,UAAU,4BAAqBF,YAArB,eAAsCA,YAAtC,gBAAwDD,SAAxD;AADL,GAAP;AAGD;AAED,OAAO,SAASI,oBAAT,CACLZ,KADK,EAELa,iBAFK,EAGLJ,YAAY,GAAG,YAHV,EAIc;AACnB,MAAIK,MAAM,CAACD,iBAAD,CAAN,IAA6B,CAAjC,EAAoC;AAClC,WAAO,EAAP;AACD;;AACD,QAAME,OAAO,GAAGrB,GAAG,CAACM,KAAD,2BAA0Ba,iBAA1B,EAAH,IAAqD,CAArE;AACA,SAAON,eAAe,CAACP,KAAD,EAAQ,SAAR,EAAmBS,YAAnB,EAAiCM,OAAjC,CAAtB;AACD;AAED,OAAO,SAASC,6BAAT,CACLhB,KADK,EAELa,iBAFK,EAGc;AACnB,MAAIC,MAAM,CAACD,iBAAD,CAAN,IAA6B,CAAjC,EAAoC;AAClC,WAAO,EAAP;AACD;;AAED,SAAO;AACL,gBAAKjB,gBAAL,mBAA8BA,gBAA9B,iBACKgB,oBAAoB,CAACZ,KAAD,EAAQa,iBAAR,CADzB;AADK,GAAP;AAKD","sourcesContent":["import { get, SystemStyleObject } from '@styled-system/css';\nimport { parseToRgb } from 'polished';\nimport { DARK_THEME_CLASS } from './ColorMode';\nimport { Theme } from './theme';\n\nexport const alpha = (colorString: string, alphaValue: number) => (\n  theme: any\n) => {\n  const color = get(theme, 'colors.' + colorString, colorString);\n  if (color.startsWith('var')) {\n    const color = get(theme, 'colors.' + colorString + '_rgb', colorString);\n    return `rgba(${color},${alphaValue})`;\n  }\n\n  const rgb = parseToRgb(color);\n  return `rgba(${rgb.red},${rgb.green},${rgb.blue},${alphaValue})`;\n};\n\nexport function getColorOverlay(\n  theme: Theme,\n  baseColor: string,\n  overlayColor: string,\n  overlayOpacity: number\n): SystemStyleObject {\n  baseColor = get(theme, `colors.${baseColor}`) || baseColor;\n  overlayColor = alpha(overlayColor, overlayOpacity)(theme);\n\n  return {\n    background: `linear-gradient(${overlayColor}, ${overlayColor}), ${baseColor}`,\n  };\n}\n\nexport function getBackgroundOverlay(\n  theme: Theme,\n  backgroundOverlay: number | string,\n  overlayColor = 'on.surface'\n): SystemStyleObject {\n  if (Number(backgroundOverlay) <= 0) {\n    return {};\n  }\n  const overlay = get(theme, `paper.overlays.${backgroundOverlay}`) || 0;\n  return getColorOverlay(theme, 'surface', overlayColor, overlay);\n}\n\nexport function getDarkThemeBackgroundOverlay(\n  theme: Theme,\n  backgroundOverlay: number | string\n): SystemStyleObject {\n  if (Number(backgroundOverlay) <= 0) {\n    return {};\n  }\n\n  return {\n    [`.${DARK_THEME_CLASS} &, &.${DARK_THEME_CLASS}`]: {\n      ...getBackgroundOverlay(theme, backgroundOverlay),\n    },\n  };\n}\n"],"file":"color.js"}

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: {