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

package/src/ThemeExplorer/components.tsx

@@ -1,18 +1,18 @@
 import type { CSSProperties } from 'react';
-import React, { memo, useState } from 'react';
+import { memo, useState } from 'react';
 import { rgb, parseToHsl, parseToRgb } from 'polished';
 import { hexFromArgb, TonalPalette } from '@material/material-color-utilities';
 
-import { Box, Text, Tooltip } from '../';
+import { Box, Tooltip, Text } from '../';
 
 export const ColorItem = memo(
   (props: {
     token: string;
     style: CSSProperties;
-    height: number;
+    height?: number;
     width: string;
   }) => {
-    const { token, style, height = 50, width } = props;
+    const { token, style, width, height = '100%' } = props;
     const [computedColor, setComputedColor] = useState<string>();
     const hslColor = computedColor
       ? parseToHsl(computedColor)
@@ -41,22 +41,28 @@ export const ColorItem = memo(
           )
         }
       >
-        <Box
-          width={width}
-          height={height}
+        <Text
+          as="div"
+          variant="body-small"
           style={style}
-          pl="10px"
-          pt="10px"
           ref={(ref: HTMLDivElement | null) => {
             if (ref) {
               setComputedColor(window.getComputedStyle(ref).backgroundColor);
             }
           }}
+          sx={{
+            width,
+            height,
+            px: '10px',
+            py: '10px',
+            fontSize: '11px',
+            lineHeight: '11px',
+            textOverflow: 'ellipsis',
+            overflow: 'hidden',
+          }}
         >
-          <Text variant="body2" as="span" fontSize="11px" lineHeight="11px">
-            {token}
-          </Text>
-        </Box>
+          {token}
+        </Text>
       </Tooltip>
     );
   }
@@ -83,6 +89,7 @@ export const ColorRow = memo(
             borderBottomRightRadius: 24,
             overflow: 'hidden',
           },
+          height,
         }}
       >
         {colors.map(({ token, bg, color }, idx) => (
@@ -97,7 +104,6 @@ export const ColorRow = memo(
             key={token}
             token={token}
             style={{ backgroundColor: bg, color: color }}
-            height={height}
           />
         ))}
       </Box>
@@ -127,8 +133,10 @@ export const TonalColorItem = memo(
           </>
         }
       >
-        <Box
+        <Text
           key={level}
+          as="div"
+          variant="body-small"
           flex={1}
           display="flex"
           alignItems="center"
@@ -139,7 +147,7 @@ export const TonalColorItem = memo(
           }}
         >
           {level}
-        </Box>
+        </Text>
       </Tooltip>
     );
   }

package/src/ThemeExplorer/index.ts

@@ -0,0 +1 @@
+export * from './ThemeBuilder';

package/src/ThemeExplorer/useDeferredColor.tsx

@@ -4,14 +4,13 @@ import type { Color } from '@basic-ui/color-picker';
 
 import { useLocalStorageCachedState } from './useLocalStorageCachedState';
 
-// import './styles.css';
 export function useDeferredColor(
   key: string,
   fallbackValue: TonalPalette
 ): [Color | null, TonalPalette, (c: Color | null) => void] {
   const [color, setColor] = useLocalStorageCachedState<Color | null>(
-    'theme-builder.' + key,
-    null
+    null,
+    'theme-builder.' + key
   );
   const deferredColor = useDeferredValue(color);
   const colorTonal = useMemo(

package/src/ThemeExplorer/useLocalStorageCachedState.ts

@@ -1,8 +1,8 @@
 import { useCallback, useState } from 'react';
 
 export function useLocalStorageCachedState<T>(
-  key: string,
-  initialValue: T
+  initialValue: T,
+  key: string
 ): [T, (c: T) => void] {
   const [state, _setState] = useState<T>(
     () => JSON.parse(localStorage.getItem(key) || 'null') || initialValue

package/src/Tooltip/Tooltip.story.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 
 import { Tooltip } from './';
 import { Button } from '../Button';
@@ -9,7 +9,7 @@ export default {
 };
 
 const Example = () => {
-  const buttonRef = useRef();
+  const buttonRef = useRef<HTMLButtonElement>(null);
   const [counter, setCounter] = useState(0);
   useEffect(() => {
     const interval = setInterval(() => setCounter((f) => f + 1), 50);

package/src/Tooltip/Tooltip.tsx

@@ -1,7 +1,7 @@
 import type { PopperProps } from '@basic-ui/core';
 import { Tooltip as _BaseTooltip, Popper } from '@basic-ui/core';
-import type { FC } from 'react';
-import React, { forwardRef } from 'react';
+import type { ElementType, FC, ReactNode } from 'react';
+import { forwardRef } from 'react';
 
 import type { BoxProps } from '../Box';
 import { Box } from '../Box';
@@ -10,15 +10,16 @@ import { alpha } from '../color';
 export interface TooltipProps
   extends BoxProps,
     Omit<PopperProps, 'color' | 'anchorEl'> {
-  label: React.ReactNode;
+  label: ReactNode;
   disabled?: boolean;
 }
 
 const BaseTooltip: FC<
   BoxProps & {
-    innerAs?: React.ElementType<any>;
+    innerAs?: ElementType<any>;
   } & Omit<PopperProps, 'color' | 'anchorEl'>
 > = _BaseTooltip as any;
+
 export const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(
   function Tooltip(props, forwardedRef) {
     const { placement = 'bottom', __css, ...otherProps } = props;
@@ -31,15 +32,12 @@ export const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(
         placement={placement}
         distance={8}
         __css={{
+          variant: ['text.body-medium', 'text.body-small'],
           bg: alpha('#616161', 0.9),
           color: '#fff',
-          fontSize: [2, 2, 1],
-          fontFamily: 'body',
-          fontWeight: 'regular',
-          lineHeight: [1.2, 1.2, 1.33],
-          px: [3, 3, 2],
-          py: [2, 2, 1],
-          borderRadius: '4px',
+          px: 2,
+          py: 1,
+          borderRadius: 'extra-small',
           zIndex: 'tooltip',
           ...__css,
         }}

package/src/color.ts

@@ -1,8 +1,8 @@
 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_THEME_CLASS } from './ColorMode';
 import type { Theme } from './theme';
 
 export const alpha =
@@ -17,17 +17,38 @@ export const alpha =
     return `rgba(${rgb.red},${rgb.green},${rgb.blue},${alphaValue})`;
   };
 
+export function mixColor(
+  baseColor: string,
+  overlayColor: string
+): (theme: any) => string;
+export function mixColor(
+  baseColor: string,
+  overlayColor: string,
+  overlayOpacity: number
+): (theme: any) => string;
+export function mixColor(
+  baseColor: string,
+  overlayColor: string,
+  overlayOpacity?: number
+): (theme: any) => string {
+  return (theme) => {
+    baseColor = get(theme, `colors.${baseColor}`, baseColor);
+    overlayColor = overlayOpacity
+      ? alpha(overlayColor, overlayOpacity)(theme)
+      : get(theme, `colors.${overlayColor}`, overlayColor);
+
+    return `linear-gradient(${overlayColor}, ${overlayColor}), ${baseColor}`;
+  };
+}
+
 export function getColorOverlay(
   theme: Theme,
   baseColor: string,
   overlayColor: string,
   overlayOpacity: number
 ): SystemStyleObject {
-  baseColor = get(theme, `colors.${baseColor}`) || baseColor;
-  overlayColor = alpha(overlayColor, overlayOpacity)(theme);
-
   return {
-    background: `linear-gradient(${overlayColor}, ${overlayColor}), ${baseColor}`,
+    background: mixColor(baseColor, overlayColor, overlayOpacity)(theme),
   };
 }
 

package/src/index.ts

@@ -8,7 +8,6 @@ export * from './Button';
 export * from './Combobox';
 export * from './CheckBox';
 export * from './Chip';
-export * from './ColorMode';
 export * from './Divider';
 export * from './Dialog';
 export * from './FloatingLabel';
@@ -17,6 +16,7 @@ export * from './Link';
 export * from './List';
 export * from './ListItem';
 export * from './Menu';
+export * from './NavRail';
 export * from './NotchedOutline';
 export * from './Paper';
 export * from './ProgressSpinner';
@@ -33,5 +33,6 @@ export * from './Table';
 export * from './Text';
 export * from './TextField';
 export * from './Tooltip';
+export * from './motion';
 export * from './theme';
 export * from './color';

package/src/motion.ts

@@ -0,0 +1,7 @@
+export const EASING_EMPHASIZED = 'cubic-bezier(0.2, 0, 0, 1)';
+export const EASING_EMPHASIZED_ACCELERATE = 'cubic-bezier(0.3, 0, 0.8, 0.15)';
+export const EASING_EMPHASIZED_DECELERATE = 'cubic-bezier(0.05, 0.7, 0.1, 1)';
+export const EASING_LINEAR = 'cubic-bezier(0, 0, 1, 1)';
+export const EASING_STANDARD = 'cubic-bezier(0.2, 0, 0, 1)';
+export const EASING_STANDARD_ACCELERATE = 'cubic-bezier(0.3, 0, 1, 1)';
+export const EASING_STANDARD_DECELERATE = 'cubic-bezier(0, 0, 0, 1)';

package/src/theme/theme.ts

@@ -5,6 +5,24 @@
 // - https://material.io/design/typography/the-type-system.html#type-scale
 import { rem, em } from 'polished';
 
+import { EASING_STANDARD } from '../motion';
+
+function font(
+  fontFamily: 'plain' | 'brand',
+  lineHeight: number,
+  fontSize: number,
+  letterSpacing: number,
+  weight: number
+) {
+  return {
+    fontFamily,
+    lineHeight: rem(lineHeight),
+    fontSize: rem(fontSize),
+    letterSpacing: rem(letterSpacing),
+    fontWeight: weight,
+  };
+}
+
 export const theme = {
   googleFonts:
     'https://fonts.googleapis.com/css?family=Roboto+Mono|Roboto:300,400,500,600,700&display=swap',
@@ -85,44 +103,19 @@ export const theme = {
     full: rem(99999),
     circle: '100%',
   },
-  shadowsOriginal: {
-    0: '0 0 0 0 rgba(0,0,0,0.2),0 0 0 0 rgba(0,0,0,0.14),0 0 0 0 rgba(0,0,0,0.12)',
-    1: '0 2px 1px -1px rgba(0,0,0,0.2),0 1px 1px 0 rgba(0,0,0,0.14),0 1px 3px 0 rgba(0,0,0,0.12)',
-    2: '0 3px 1px -2px rgba(0,0,0,0.2),0 2px 2px 0 rgba(0,0,0,0.14),0 1px 5px 0 rgba(0,0,0,0.12)',
-    3: '0 3px 3px -2px rgba(0,0,0,0.2),0 3px 4px 0 rgba(0,0,0,0.14),0 1px 8px 0 rgba(0,0,0,0.12)',
-    4: '0 2px 4px -1px rgba(0,0,0,0.2),0 4px 5px 0 rgba(0,0,0,0.14),0 1px 10px 0 rgba(0,0,0,0.12)',
-    5: '0 3px 5px -1px rgba(0,0,0,0.2),0 5px 8px 0 rgba(0,0,0,0.14),0 1px 14px 0 rgba(0,0,0,0.12)',
-    6: '0 3px 5px -1px rgba(0,0,0,0.2),0 6px 10px 0 rgba(0,0,0,0.14),0 1px 18px 0 rgba(0,0,0,0.12)',
-    7: '0 4px 5px -2px rgba(0,0,0,0.2),0 7px 10px 1px rgba(0,0,0,0.14),0 2px 16px 1px rgba(0,0,0,0.12)',
-    8: '0 5px 5px -3px rgba(0,0,0,0.2),0 8px 10px 1px rgba(0,0,0,0.14),0 3px 14px 2px rgba(0,0,0,0.12)',
-    9: '0 5px 6px -3px rgba(0,0,0,0.2),0 9px 12px 1px rgba(0,0,0,0.14),0 3px 16px 2px rgba(0,0,0,0.12)',
-    10: '0 6px 6px -3px rgba(0,0,0,0.2),0 10px 14px 1px rgba(0,0,0,0.14),0 4px 18px 3px rgba(0,0,0,0.12)',
-    11: '0 6px 7px -4px rgba(0,0,0,0.2),0 11px 15px 1px rgba(0,0,0,0.14),0 4px 20px 3px rgba(0,0,0,0.12)',
-    12: '0 7px 8px -4px rgba(0,0,0,0.2),0 12px 17px 2px rgba(0,0,0,0.14),0 5px 22px 4px rgba(0,0,0,0.12)',
-    13: '0 7px 8px -4px rgba(0,0,0,0.2),0 13px 19px 2px rgba(0,0,0,0.14),0 5px 24px 4px rgba(0,0,0,0.12)',
-    14: '0 7px 9px -4px rgba(0,0,0,0.2),0 14px 21px 2px rgba(0,0,0,0.14),0 5px 26px 4px rgba(0,0,0,0.12)',
-    15: '0 8px 9px -5px rgba(0,0,0,0.2),0 15px 22px 2px rgba(0,0,0,0.14),0 6px 28px 5px rgba(0,0,0,0.12)',
-    16: '0 8px 10px -5px rgba(0,0,0,0.2),0 16px 24px 2px rgba(0,0,0,0.14),0 6px 30px 5px rgba(0,0,0,0.12)',
-    17: '0 8px 11px -5px rgba(0,0,0,0.2),0 17px 26px 2px rgba(0,0,0,0.14),0 6px 32px 5px rgba(0,0,0,0.12)',
-    18: '0 9px 11px -5px rgba(0,0,0,0.2),0 18px 28px 2px rgba(0,0,0,0.14),0 7px 34px 6px rgba(0,0,0,0.12)',
-    19: '0 9px 12px -6px rgba(0,0,0,0.2),0 19px 29px 2px rgba(0,0,0,0.14),0 7px 36px 6px rgba(0,0,0,0.12)',
-    20: '0 10px 13px -6px rgba(0,0,0,0.2),0 20px 31px 3px rgba(0,0,0,0.14),0 8px 38px 7px rgba(0,0,0,0.12)',
-    21: '0 10px 13px -6px rgba(0,0,0,0.2),0 21px 33px 3px rgba(0,0,0,0.14),0 8px 40px 7px rgba(0,0,0,0.12)',
-    22: '0 10px 14px -6px rgba(0,0,0,0.2),0 22px 35px 3px rgba(0,0,0,0.14),0 8px 42px 7px rgba(0,0,0,0.12)',
-    23: '0 11px 14px -7px rgba(0,0,0,0.2),0 23px 36px 3px rgba(0,0,0,0.14),0 9px 44px 8px rgba(0,0,0,0.12)',
-    24: '0 11px 15px -7px rgba(0,0,0,0.2),0 24px 38px 3px rgba(0,0,0,0.14),0 9px 46px 8px rgba(0,0,0,0.12)',
-  },
   shadows: {
     0: '0 0 0 0 rgba(0,0,0,0.2),0 0 0 0 rgba(0,0,0,0.14),0 0 0 0 rgba(0,0,0,0.12)',
     1: '0 1px 2px rgba(0,0,0,0.3),0 1px 3px 1px rgba(0,0,0,0.15)',
     2: '0 1px 2px rgba(0,0,0,0.3),0 2px 6px 2px rgba(0,0,0,0.15)',
-    3: '0 4px 8px 3px rgba(0,0,0,0.15),0 1px 3px rgba(0,0,0,0.3)',
-    4: '0 6px 10px 4px rgba(0,0,0,0.15),0 2px 3px rgba(0,0,0,0.3)',
-    5: '0 8px 12px 6px rgba(0,0,0,0.15),0 4px 4px rgba(0,0,0,0.3)',
+    3: '0 1px 3px rgba(0,0,0,0.3),0 4px 8px 3px rgba(0,0,0,0.15)',
+    4: '0 2px 3px rgba(0,0,0,0.3),0 6px 10px 4px rgba(0,0,0,0.15)',
+    5: '0 4px 4px rgba(0,0,0,0.3),0 8px 12px 6px rgba(0,0,0,0.15)',
   },
   fonts: {
     body: 'Roboto, sans-serif',
     heading: 'Roboto, sans-serif',
+    brand: 'Roboto, sans-serif',
+    plain: 'Roboto, sans-serif',
     monospace: '"Roboto Mono", monospace',
   },
   fontSizes: {
@@ -172,6 +165,21 @@ export const theme = {
       fontFamily: 'body',
       lineHeight: 'body',
     },
+    'display-large': font('brand', 64, 57, 0, 400),
+    'display-medium': font('brand', 52, 45, 0, 400),
+    'display-small': font('brand', 44, 36, 0, 400),
+    'headline-large': font('brand', 40, 32, 0, 400),
+    'headline-medium': font('brand', 36, 28, 0, 400),
+    'headline-small': font('brand', 32, 24, 0, 400),
+    'title-large': font('brand', 28, 22, 0, 400),
+    'title-medium': font('plain', 24, 16, 0.15, 500),
+    'title-small': font('plain', 20, 14, 0.1, 500),
+    'label-large': font('plain', 20, 14, 0.1, 500),
+    'label-medium': font('plain', 16, 12, 0.5, 500),
+    'label-small': font('plain', 16, 11, 0.5, 500),
+    'body-large': font('plain', 24, 16, 0.5, 400),
+    'body-medium': font('plain', 20, 14, 0.25, 400),
+    'body-small': font('plain', 16, 12, 0.4, 400),
     h1: {
       variant: 'text.heading',
       fontWeight: 'light',
@@ -297,7 +305,7 @@ export const theme = {
   buttons: {
     variants: {
       base: {
-        variant: 'text.button',
+        variant: 'text.label-large',
         boxShadow: 'none',
         py: 0,
         px: rem(24),
@@ -362,30 +370,36 @@ export const theme = {
     elevations: {
       none: {},
       default: {
-        transition: 'box-shadow .28s cubic-bezier(.4,0,.2,1)',
+        transition: `box-shadow .28s ${EASING_STANDARD}`,
         '&:hover': {
           boxShadow: 1,
         },
-        '&:hover:disabled': {
+        '&:active,&:focus-visible,&:disabled': {
           boxShadow: 0,
         },
       },
       elevated: {
-        transition: 'box-shadow .28s cubic-bezier(.4,0,.2,1)',
+        transition: `box-shadow .28s ${EASING_STANDARD}`,
         boxShadow: 1,
         '&:hover': {
           boxShadow: 2,
         },
+        '&:active,&:focus-visible': {
+          boxShadow: 1,
+        },
         '&:disabled,&:disabled:hover,&:disabled:focus,&:disabled:active': {
           boxShadow: 0,
         },
       },
       floating: {
-        transition: 'box-shadow .28s cubic-bezier(.4,0,.2,1)',
+        transition: `box-shadow .28s ${EASING_STANDARD}`,
         boxShadow: 3,
         ':hover': {
           boxShadow: 4,
         },
+        '&:active,&:focus-visible': {
+          boxShadow: 3,
+        },
         '&:disabled,&:disabled:hover,&:disabled:focus,&:disabled:active': {
           boxShadow: 0,
         },
@@ -426,7 +440,7 @@ export const theme = {
         height: rem(32),
         borderRadius: 'small',
         outline: 'none',
-        transition: 'box-shadow .28s cubic-bezier(.4,0,.2,1)',
+        transition: `box-shadow .28s ${EASING_STANDARD}`,
       },
       filled: {
         variant: 'chips.variants.base',
@@ -446,7 +460,7 @@ export const theme = {
         borderRadius: 'extra-large',
       },
     },
-    backgroundColorOverlay: 0.11,
+    backgroundColorOverlay: 3,
   },
   paper: {
     overlays: {

package/build/esm/ColorMode/ColorModeProvider.d.ts

@@ -1,7 +0,0 @@
-import * as React from 'react';
-interface ColorModeProviderProps {
-    children?: React.ReactNode;
-    styles: Record<string, Record<string, string>>;
-}
-export declare const ColorModeProvider: React.FC<ColorModeProviderProps>;
-export {};

package/build/esm/ColorMode/ColorModeProvider.js

@@ -1,92 +0,0 @@
-import _extends from "@babel/runtime/helpers/extends";
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import { useState, useEffect, useMemo, useCallback } from 'react';
-import * as React from 'react';
-import { Global } from '@emotion/react';
-import { ColorModeContext } from './color-mode';
-import { DARK_THEME_CLASS, DEFAULT_THEME_CLASS, THEME_LOCAL_STORAGE_KEY } from './constants';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Fragment as _Fragment } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-
-function saveColorMode(colorMode) {
-  var saveToStorage = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
-
-  if (saveToStorage) {
-    window.localStorage.setItem(THEME_LOCAL_STORAGE_KEY, colorMode || 'default');
-  }
-
-  var _ref = colorMode === 'dark' ? [DARK_THEME_CLASS, DEFAULT_THEME_CLASS] : [DEFAULT_THEME_CLASS, DARK_THEME_CLASS],
-      _ref2 = _slicedToArray(_ref, 2),
-      add = _ref2[0],
-      remove = _ref2[1];
-
-  if (!document.body.classList.contains(remove)) {
-    document.body.classList.add(add);
-    return;
-  }
-
-  document.body.classList.replace(remove, add);
-}
-
-export var ColorModeProvider = function ColorModeProvider(props) {
-  var children = props.children,
-      styles = props.styles;
-
-  var _useState = useState(),
-      _useState2 = _slicedToArray(_useState, 2),
-      colorMode = _useState2[0],
-      _setColorMode = _useState2[1];
-
-  var setColorMode = useCallback(function (colorMode) {
-    var saveToStorage = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
-    saveColorMode(colorMode || 'default', saveToStorage);
-
-    _setColorMode(colorMode);
-  }, []);
-  var colorModeObject = useMemo(function () {
-    return {
-      colorMode: colorMode,
-      setColorMode: setColorMode
-    };
-  }, [colorMode, setColorMode]);
-  useEffect(function () {
-    _setColorMode(document.body.classList.contains(DARK_THEME_CLASS) ? 'dark' : 'default');
-
-    var darkQuery = window.matchMedia('(prefers-color-scheme: dark)');
-    darkQuery == null ? void 0 : darkQuery.addListener(function (e) {
-      setColorMode(e.matches ? 'dark' : 'default', false);
-    });
-  }, [setColorMode]);
-  var globalStyles = useMemo(function () {
-    var ret = {
-      body: _extends({
-        colorScheme: 'light'
-      }, styles['default'] || {})
-    };
-    ret[".".concat(DEFAULT_THEME_CLASS)] = _extends({
-      colorScheme: 'light'
-    }, styles['default'] || {});
-
-    for (var key in styles) {
-      if (key === 'default') {
-        continue;
-      }
-
-      ret[".".concat(DARK_THEME_CLASS)] = _extends({
-        colorScheme: 'dark'
-      }, styles[key]);
-    }
-
-    return ret;
-  }, [styles]);
-  return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [/*#__PURE__*/_jsx(Global, {
-      styles: globalStyles
-    }), /*#__PURE__*/_jsx(ColorModeContext.Provider, {
-      value: colorModeObject,
-      children: children
-    })]
-  });
-};
-//# sourceMappingURL=ColorModeProvider.js.map

package/build/esm/ColorMode/ColorModeProvider.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../src/ColorMode/ColorModeProvider.tsx"],"names":["useState","useEffect","useMemo","useCallback","React","Global","ColorModeContext","DARK_THEME_CLASS","DEFAULT_THEME_CLASS","THEME_LOCAL_STORAGE_KEY","saveColorMode","colorMode","saveToStorage","window","localStorage","setItem","add","remove","document","body","classList","contains","replace","ColorModeProvider","props","children","styles","_setColorMode","setColorMode","colorModeObject","darkQuery","matchMedia","addListener","e","matches","globalStyles","ret","colorScheme","key"],"mappings":"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","sourcesContent":["import { useState, useEffect, useMemo, useCallback } from 'react';\nimport * as React from 'react';\nimport { Global } from '@emotion/react';\n\nimport type { ColorMode } from './color-mode';\nimport { ColorModeContext } from './color-mode';\nimport {\n  DARK_THEME_CLASS,\n  DEFAULT_THEME_CLASS,\n  THEME_LOCAL_STORAGE_KEY,\n} from './constants';\n\ninterface ColorModeProviderProps {\n  children?: React.ReactNode;\n  styles: Record<string, Record<string, string>>;\n}\n\nfunction saveColorMode(colorMode: ColorMode, saveToStorage = true) {\n  if (saveToStorage) {\n    window.localStorage.setItem(\n      THEME_LOCAL_STORAGE_KEY,\n      colorMode || 'default'\n    );\n  }\n\n  const [add, remove] =\n    colorMode === 'dark'\n      ? [DARK_THEME_CLASS, DEFAULT_THEME_CLASS]\n      : [DEFAULT_THEME_CLASS, DARK_THEME_CLASS];\n\n  if (!document.body.classList.contains(remove)) {\n    document.body.classList.add(add);\n    return;\n  }\n  document.body.classList.replace(remove, add);\n}\n\nexport const ColorModeProvider: React.FC<ColorModeProviderProps> = (props) => {\n  const { children, styles } = props;\n  const [colorMode, _setColorMode] = useState<ColorMode>();\n\n  const setColorMode = useCallback(\n    (colorMode: ColorMode, saveToStorage = true) => {\n      saveColorMode(colorMode || 'default', saveToStorage);\n      _setColorMode(colorMode);\n    },\n    []\n  );\n\n  const colorModeObject = useMemo(\n    () => ({\n      colorMode,\n      setColorMode,\n    }),\n    [colorMode, setColorMode]\n  );\n\n  useEffect(() => {\n    _setColorMode(\n      document.body.classList.contains(DARK_THEME_CLASS) ? 'dark' : 'default'\n    );\n\n    const darkQuery = window.matchMedia('(prefers-color-scheme: dark)');\n    darkQuery?.addListener((e) => {\n      setColorMode(e.matches ? 'dark' : 'default', false);\n    });\n  }, [setColorMode]);\n\n  const globalStyles = useMemo(() => {\n    const ret = {\n      body: { colorScheme: 'light', ...(styles['default'] || {}) },\n    };\n\n    ret[`.${DEFAULT_THEME_CLASS}`] = {\n      colorScheme: 'light',\n      ...(styles['default'] || {}),\n    };\n\n    for (const key in styles) {\n      if (key === 'default') {\n        continue;\n      }\n      ret[`.${DARK_THEME_CLASS}`] = { colorScheme: 'dark', ...styles[key] };\n    }\n\n    return ret;\n  }, [styles]);\n\n  return (\n    <>\n      <Global styles={globalStyles} />\n      <ColorModeContext.Provider value={colorModeObject}>\n        {children}\n      </ColorModeContext.Provider>\n    </>\n  );\n};\n"],"file":"ColorModeProvider.js"}

package/build/esm/ColorMode/color-mode.d.ts

@@ -1,8 +0,0 @@
-/// <reference types="react" />
-export declare type ColorMode = 'default' | 'dark';
-export interface ColorModeContextProps {
-    colorMode?: ColorMode;
-    setColorMode: (colorMode: ColorMode) => void;
-}
-export declare const ColorModeContext: import("react").Context<ColorModeContextProps>;
-export declare const useColorMode: () => ColorModeContextProps;

package/build/esm/ColorMode/color-mode.js

@@ -1,11 +0,0 @@
-import { createContext, useContext } from 'react';
-export var ColorModeContext = /*#__PURE__*/createContext({
-  colorMode: 'default',
-  setColorMode: function setColorMode() {
-    /*noop*/
-  }
-});
-export var useColorMode = function useColorMode() {
-  return useContext(ColorModeContext);
-};
-//# sourceMappingURL=color-mode.js.map

package/build/esm/ColorMode/color-mode.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../src/ColorMode/color-mode.ts"],"names":["createContext","useContext","ColorModeContext","colorMode","setColorMode","useColorMode"],"mappings":"AAAA,SAASA,aAAT,EAAwBC,UAAxB,QAA0C,OAA1C;AAUA,OAAO,IAAMC,gBAAgB,gBAAGF,aAAa,CAAwB;AACnEG,EAAAA,SAAS,EAAE,SADwD;AAEnEC,EAAAA,YAAY,EAAE,wBAAM;AAClB;AACD;AAJkE,CAAxB,CAAtC;AAOP,OAAO,IAAMC,YAAY,GAAG,SAAfA,YAAe,GAA6B;AACvD,SAAOJ,UAAU,CAACC,gBAAD,CAAjB;AACD,CAFM","sourcesContent":["import { createContext, useContext } from 'react';\n\nexport type ColorMode = 'default' | 'dark';\n\n// ColorMode Component\nexport interface ColorModeContextProps {\n  colorMode?: ColorMode;\n  setColorMode: (colorMode: ColorMode) => void;\n}\n\nexport const ColorModeContext = createContext<ColorModeContextProps>({\n  colorMode: 'default',\n  setColorMode: () => {\n    /*noop*/\n  },\n});\n\nexport const useColorMode = (): ColorModeContextProps => {\n  return useContext(ColorModeContext);\n};\n"],"file":"color-mode.js"}

package/build/esm/ColorMode/color-vars.d.ts

@@ -1,4 +0,0 @@
-export declare function getTheme(theme: Record<string, any>): {
-    theme: any;
-    colorModes: Record<string, Record<string, string>>;
-};

package/build/esm/ColorMode/color-vars.js

@@ -1,58 +0,0 @@
-import _typeof from "@babel/runtime/helpers/typeof";
-import { parseToRgb } from 'polished';
-
-var toVarName = function toVarName(key) {
-  var suffix = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
-  return "--".concat(key).concat(suffix ? "--".concat(suffix) : '');
-};
-
-var toVarValue = function toVarValue(key, value) {
-  var suffix = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : '';
-  return "var(".concat(toVarName(key, suffix), ", ").concat(value, ")");
-};
-
-function themify(obj, vars) {
-  var root = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : '';
-  Object.keys(obj).forEach(function (key) {
-    if (key === 'modes') {
-      return;
-    }
-
-    var value = obj[key];
-    var varName = root.length > 0 ? "".concat(root, "-").concat(key) : "".concat(key);
-
-    if (_typeof(value) === 'object') {
-      obj[key] = themify(obj[key], vars, varName);
-    } else {
-      vars[toVarName(varName)] = value;
-      obj[key] = toVarValue(varName, value);
-
-      try {
-        var rgb = parseToRgb(value);
-        vars[toVarName(varName, 'rgb')] = "".concat(rgb.red, ",").concat(rgb.green, ",").concat(rgb.blue);
-        obj[key + '_rgb'] = toVarValue(varName, value, 'rgb');
-      } catch (err) {// do nothing
-      }
-    }
-  });
-  return obj;
-}
-
-export function getTheme(theme) {
-  var colorModes = {
-    default: {}
-  };
-  var themeClone = JSON.parse(JSON.stringify(theme)); // default
-
-  themeClone.colors = themify(themeClone.colors, colorModes.default, ''); // other modes
-
-  Object.keys(themeClone.colors.modes).forEach(function (key) {
-    colorModes[key] = {};
-    themeClone.colors.modes[key] = themify(themeClone.colors.modes[key], colorModes[key], '');
-  });
-  return {
-    theme: themeClone,
-    colorModes: colorModes
-  };
-}
-//# sourceMappingURL=color-vars.js.map

package/build/esm/ColorMode/color-vars.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../src/ColorMode/color-vars.ts"],"names":["parseToRgb","toVarName","key","suffix","toVarValue","value","themify","obj","vars","root","Object","keys","forEach","varName","length","rgb","red","green","blue","err","getTheme","theme","colorModes","default","themeClone","JSON","parse","stringify","colors","modes"],"mappings":"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","sourcesContent":["import { parseToRgb } from 'polished';\n\nconst toVarName = (key: string, suffix = '') =>\n  `--${key}${suffix ? `--${suffix}` : ''}`;\nconst toVarValue = (key: string, value: string, suffix = '') =>\n  `var(${toVarName(key, suffix)}, ${value})`;\n\nfunction themify(\n  obj: Record<string, any>,\n  vars: Record<string, string>,\n  root = ''\n) {\n  Object.keys(obj).forEach((key) => {\n    if (key === 'modes') {\n      return;\n    }\n\n    const value = obj[key];\n    const varName = root.length > 0 ? `${root}-${key}` : `${key}`;\n    if (typeof value === 'object') {\n      obj[key] = themify(obj[key], vars, varName);\n    } else {\n      vars[toVarName(varName)] = value;\n      obj[key] = toVarValue(varName, value);\n\n      try {\n        const rgb = parseToRgb(value);\n        vars[toVarName(varName, 'rgb')] = `${rgb.red},${rgb.green},${rgb.blue}`;\n        obj[key + '_rgb'] = toVarValue(varName, value, 'rgb');\n      } catch (err) {\n        // do nothing\n      }\n    }\n  });\n\n  return obj;\n}\n\nexport function getTheme(theme: Record<string, any>) {\n  const colorModes: Record<string, Record<string, string>> = { default: {} };\n  const themeClone = JSON.parse(JSON.stringify(theme));\n\n  // default\n  themeClone.colors = themify(themeClone.colors, colorModes.default, '');\n  // other modes\n  Object.keys(themeClone.colors.modes).forEach((key) => {\n    colorModes[key] = {};\n    themeClone.colors.modes[key] = themify(\n      themeClone.colors.modes[key],\n      colorModes[key],\n      ''\n    );\n  });\n\n  return { theme: themeClone, colorModes };\n}\n"],"file":"color-vars.js"}