@basic-ui/material 0.1.1 → 0.1.5

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),
     },
   };
 }