@basic-ui/material 1.0.0-alpha.12 → 1.0.0-alpha.15

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@basic-ui/material",
-  "version": "1.0.0-alpha.12",
+  "version": "1.0.0-alpha.15",
   "description": "Accessible React Components used as building blocks for UI patterns",
   "author": "Lucas Terra <lucasterra7@gmail.com>",
   "license": "MIT",
@@ -16,7 +16,7 @@
   "scripts": {
     "build": "run -T concurrently \"yarn:build:*\"",
     "build:dts": "run -T tsc -p ./tsconfig-build.json --isolatedModules false --declaration --emitDeclarationOnly",
-    "build:cjs": "run -T rollup -c ../../rollup.config.js",
+    "build:cjs": "run -T cross-env NODE_ENV=production rollup -c ../../rollup.config.js",
     "build:esm": "run -T cross-env NODE_ENV=production BABEL_ENV=esm run -T babel --config-file ../../babel.config.js ./src --extensions \".ts,.tsx,.js,.jsx\" --source-maps --out-dir ./build/esm --ignore \"**/*.story.tsx,**/*.story.ts,**/*.test.tsx,**/*.test.ts\"",
     "build-storybook": "run -T build-storybook -c ./scripts/storybook -o .out",
     "lint": "run -T eslint 'src/**/*.{js,jsx,ts,tsx}' --fix",
@@ -27,8 +27,8 @@
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "dependencies": {
-    "@basic-ui/core": "^0.0.42",
-    "@basic-ui/dynamic-theme": "^0.0.2",
+    "@basic-ui/core": "^0.0.43",
+    "@basic-ui/dynamic-theme": "^0.0.5",
     "@styled-system/should-forward-prop": "5.1.5",
     "@types/styled-system": "^5.1.10",
     "@types/styled-system__css": "^5.0.14",
@@ -36,7 +36,7 @@
     "styled-system": "^5.1.5"
   },
   "devDependencies": {
-    "@basic-ui/color-picker": "^0.0.9",
+    "@basic-ui/color-picker": "^0.0.10",
     "@emotion/react": "11.9.0",
     "@emotion/styled": "11.8.1",
     "@material/material-color-utilities": "0.1.1",
@@ -52,5 +52,5 @@
     "react": "^16.14.0 || ^17.0.0 || ^18.0.0",
     "react-dom": "^16.14.0 || ^17.0.0 || ^18.0.0"
   },
-  "gitHead": "ccb278c4188123480cffa3a1df5f04eed38b911e"
+  "gitHead": "1bf6a5a0f35cfa0ae1cfac346b0bb10d4d00931f"
 }

package/src/Snackbar/Snackbar.tsx

@@ -3,9 +3,9 @@ import { rem } from 'polished';
 import type { ReactElement } from 'react';
 import { cloneElement, forwardRef, useRef } from 'react';
 import {
-  DARK_THEME_CLASS,
-  DEFAULT_THEME_CLASS,
-  useColorMode,
+  DARK_SCHEME_CLASS,
+  LIGHT_SCHEME_CLASS,
+  useColorScheme,
 } from '@basic-ui/dynamic-theme';
 
 import { Box } from '../Box';
@@ -22,7 +22,7 @@ export interface SnackbarProps extends PaperProps {
 
 export const Snackbar = forwardRef<HTMLDivElement, SnackbarProps>(
   function Snackbar(props, forwardedRef) {
-    const { colorMode } = useColorMode();
+    const { colorScheme } = useColorScheme();
     const ref = useRef<HTMLDivElement | null>(null);
     const {
       __css,
@@ -44,7 +44,7 @@ export const Snackbar = forwardRef<HTMLDivElement, SnackbarProps>(
         elevation={4}
         darkThemeBackgroundOverlay={4}
         className={
-          colorMode === 'default' ? DARK_THEME_CLASS : DEFAULT_THEME_CLASS
+          colorScheme === 'light' ? DARK_SCHEME_CLASS : LIGHT_SCHEME_CLASS
         }
         ref={assignMultipleRefs(forwardedRef, ref)}
         __css={{

package/src/ThemeExplorer/ThemeBuilder.tsx

@@ -8,7 +8,7 @@ import {
 import type { Color } from '@basic-ui/color-picker';
 import { toColor } from '@basic-ui/color-picker';
 import {
-  THEME_OVERRIDE_KEY,
+  THEME_OVERRIDE_STORAGE_KEY,
   injectThemeOverride,
   transformTheme,
 } from '@basic-ui/dynamic-theme';
@@ -89,7 +89,10 @@ const ThemeBuilderImpl = (props: ThemeBuilderProps) => {
     [scheme]
   );
   useEffect(() => {
-    localStorage.setItem(THEME_OVERRIDE_KEY, JSON.stringify({ colorModes }));
+    localStorage.setItem(
+      THEME_OVERRIDE_STORAGE_KEY,
+      JSON.stringify({ colorModes })
+    );
     injectThemeOverride({ colorModes });
   }, [colorModes]);
 

package/src/color.ts

@@ -1,7 +1,7 @@
 import type { SystemStyleObject } from '@styled-system/css';
 import { get } from '@styled-system/css';
 import { parseToRgb } from 'polished';
-import { DARK_THEME_CLASS } from '@basic-ui/dynamic-theme';
+import { DARK_SCHEME_CLASS } from '@basic-ui/dynamic-theme';
 
 import type { Theme } from './theme';
 
@@ -74,7 +74,7 @@ export function getDarkThemeBackgroundOverlay(
   }
 
   return {
-    [`.${DARK_THEME_CLASS} &, &.${DARK_THEME_CLASS}`]: {
+    [`.${DARK_SCHEME_CLASS} &, &.${DARK_SCHEME_CLASS}`]: {
       ...getBackgroundOverlay(theme, backgroundOverlay, overlayColor),
     },
   };