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

package/src/color.ts

@@ -1,20 +1,21 @@
-import { get, SystemStyleObject } from '@styled-system/css';
+import type { SystemStyleObject } from '@styled-system/css';
+import { get } from '@styled-system/css';
 import { parseToRgb } from 'polished';
+
 import { DARK_THEME_CLASS } from './ColorMode';
-import { Theme } from './theme';
-
-export const alpha = (colorString: string, alphaValue: number) => (
-  theme: any
-) => {
-  const color = get(theme, 'colors.' + colorString, colorString);
-  if (color.startsWith('var')) {
-    const color = get(theme, 'colors.' + colorString + '_rgb', colorString);
-    return `rgba(${color},${alphaValue})`;
-  }
+import type { Theme } from './theme';
+
+export const alpha =
+  (colorString: string, alphaValue: number) => (theme: any) => {
+    const color = get(theme, 'colors.' + colorString, colorString);
+    if (color.startsWith('var')) {
+      const color = get(theme, 'colors.' + colorString + '_rgb', colorString);
+      return `rgba(${color},${alphaValue})`;
+    }
 
-  const rgb = parseToRgb(color);
-  return `rgba(${rgb.red},${rgb.green},${rgb.blue},${alphaValue})`;
-};
+    const rgb = parseToRgb(color);
+    return `rgba(${rgb.red},${rgb.green},${rgb.blue},${alphaValue})`;
+  };
 
 export function getColorOverlay(
   theme: Theme,
@@ -44,7 +45,8 @@ export function getBackgroundOverlay(
 
 export function getDarkThemeBackgroundOverlay(
   theme: Theme,
-  backgroundOverlay: number | string
+  backgroundOverlay: number | string,
+  overlayColor = 'on.surface'
 ): SystemStyleObject {
   if (Number(backgroundOverlay) <= 0) {
     return {};
@@ -52,7 +54,7 @@ export function getDarkThemeBackgroundOverlay(
 
   return {
     [`.${DARK_THEME_CLASS} &, &.${DARK_THEME_CLASS}`]: {
-      ...getBackgroundOverlay(theme, backgroundOverlay),
+      ...getBackgroundOverlay(theme, backgroundOverlay, overlayColor),
     },
   };
 }

package/src/hooks/useAnimation.ts

@@ -1,4 +1,5 @@
-import { useState, useEffect, useCallback, CSSProperties } from 'react';
+import type { CSSProperties } from 'react';
+import { useState, useEffect, useCallback } from 'react';
 
 export type AnimationStateStyles<TStyleProps extends CSSProperties> = {
   closed: TStyleProps;

package/src/theme/useTheme.ts

@@ -1,5 +1,7 @@
 import { useTheme as useEmotionTheme } from '@emotion/react';
-import { theme, Theme as MaterialTheme } from './theme';
+
+import type { Theme as MaterialTheme } from './theme';
+import { theme } from './theme';
 
 declare module '@emotion/react' {
   // eslint-disable-next-line @typescript-eslint/no-empty-interface