@basic-ui/material 0.1.2 → 0.1.6

package/package.json

@@ -1,10 +1,9 @@
 {
   "name": "@basic-ui/material",
-  "version": "0.1.2",
+  "version": "0.1.6",
   "description": "Accessible React Components used as building blocks for UI patterns",
   "author": "Lucas Terra <lucasterra7@gmail.com>",
   "license": "MIT",
-  "private": false,
   "main": "./build/cjs/index.js",
   "module": "./build/esm/index.js",
   "jsnext:main": "./build/esm/index.js",
@@ -15,7 +14,7 @@
   ],
   "sideEffects": false,
   "scripts": {
-    "start": "start-storybook -p 9001 -c ./scripts/storybook",
+    "start": "yarn run -T start-storybook -p 9001 -c ./scripts/storybook",
     "build": "concurrently \"yarn:build:*\"",
     "build:dts": "tsc -p ./tsconfig.json --isolatedModules false --declaration --emitDeclarationOnly",
     "build:cjs": "rollup -c ../../rollup.config.js",
@@ -26,7 +25,7 @@
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "dependencies": {
-    "@basic-ui/core": "^0.0.31",
+    "@basic-ui/core": "^0.0.33",
     "@styled-system/should-forward-prop": "5.1.5",
     "@types/styled-system": "^5.1.10",
     "@types/styled-system__css": "^5.0.14",
@@ -50,5 +49,5 @@
     "react-dom": ">=16.14.0 || >=17.0.0",
     "react-spring": "^9.0.0"
   },
-  "gitHead": "a116aa3584379c1d515819ae18cbebef6f969667"
+  "gitHead": "5aa740f6686e8ed8b633d4e0d173a6dd91d28bef"
 }

package/src/BottomSheet/BottomSheetSurface.tsx

@@ -24,9 +24,9 @@ export const BottomSheetSurface = forwardRef<
       as={Paper}
       theme={theme}
       elevation={24}
-      backgroundColor="surface"
       __css={{
         position: 'absolute',
+        bg: 'surface',
         bottom: 0,
         mx: 'auto',
         borderRadius: 0,

package/src/Dialog/DialogSurface.tsx

@@ -22,8 +22,9 @@ export const DialogSurface = forwardRef<HTMLDivElement, DialogSurfaceProps>(
         as={Paper}
         theme={theme}
         elevation={24}
-        backgroundColor="surface"
         __css={{
+          position: 'relative',
+          bg: 'surface',
           borderRadius: rem(8),
           width: '100%',
           maxWidth: rem(600),

package/src/color.ts

@@ -1,5 +1,4 @@
-import { CSSObject } from '@emotion/react';
-import { get } from '@styled-system/css';
+import { get, SystemStyleObject } from '@styled-system/css';
 import { parseToRgb } from 'polished';
 import { DARK_THEME_CLASS } from './ColorMode';
 import { Theme } from './theme';
@@ -17,25 +16,38 @@ export const alpha = (colorString: string, alphaValue: number) => (
   return `rgba(${rgb.red},${rgb.green},${rgb.blue},${alphaValue})`;
 };
 
+export function getBackgroundOverlay(
+  theme: Theme,
+  backgroundOverlay: number | string
+): SystemStyleObject {
+  if (Number(backgroundOverlay) <= 0) {
+    return {};
+  }
+
+  return {
+    background: `linear-gradient(${get(theme, 'colors.surface')}, ${get(
+      theme,
+      'colors.surface'
+    )}), ${alpha(
+      'on.surface',
+      get(theme, `paper.overlays.${backgroundOverlay}`) || 0
+    )(theme)}`,
+    backgroundBlendMode: 'overlay',
+    backgroundRepeat: 'no-repeat',
+  };
+}
+
 export function getDarkThemeBackgroundOverlay(
   theme: Theme,
   backgroundOverlay: number | string
-): CSSObject {
+): SystemStyleObject {
   if (Number(backgroundOverlay) <= 0) {
     return {};
   }
 
   return {
     [`.${DARK_THEME_CLASS} &, &.${DARK_THEME_CLASS}`]: {
-      background: `linear-gradient(${get(theme, 'colors.surface')}, ${get(
-        theme,
-        'colors.surface'
-      )}), ${alpha(
-        'on.surface',
-        get(theme, `paper.overlays.${backgroundOverlay}`) || 0
-      )(theme)}`,
-      backgroundBlendMode: 'overlay',
-      backgroundRepeat: 'no-repeat',
+      ...getBackgroundOverlay(theme, backgroundOverlay),
     },
   };
 }