Update shadow for darkMode

- remove drop-shadow filter

.storybook/preview.tsx

@@ -11,17 +11,17 @@ import { GlobalTypes } from '@storybook/types';
 import { Context, Story } from './Story';
 
 import { mergeTheme } from '../src';
-import { colors as themeColors } from '../src/modules/theme';
+import { black, colors as themeColors, darkColor, lightColor, white } from '../src/modules/theme';
 
 export const parameters = {
   actions: { argTypesRegex: '^on[A-Z].*' },
   backgrounds: {
     default: 'white',
     values: [
       { name: 'white', value: '#fff', default: true },
-      { name: 'light', value: '#f0f0f0' },
+      { name: 'light', value: lightColor },
       { name: 'gray', value: '#999' },
-      { name: 'dark', value: '#101010' },
+      { name: 'dark', value: darkColor },
     ],
   },
   controls: {
@@ -93,8 +93,8 @@ const ThemeBlock = styled.div(
     width: '50vw',
   },
   ({ theme }) => ({
-    background: theme.darkMode ? '#101010' : '#fff',
-    color: theme.darkMode ? '#fff' : '#101010',
+    background: theme.darkMode ? darkColor : white,
+    color: theme.darkMode ? white : black,
   }),
   ({ side }: any) =>
     side === 'left'
@@ -132,7 +132,7 @@ function Preview(StoryFn: FC, context: Context) {
   const isDocs = viewMode === 'docs';
   const isDarkMode = appearance === 'dark';
   const isSideBySide = appearance === 'side-by-side';
-  const desiredBackground = isSideBySide || appearance === 'light' ? '#fff' : '#101010';
+  const desiredBackground = isSideBySide || appearance === 'light' ? white : darkColor;
   const requireBackgroundUpdate = backgrounds?.value !== desiredBackground;
 
   useEffect(() => {
@@ -179,7 +179,7 @@ function Preview(StoryFn: FC, context: Context) {
           minHeight={minHeight}
           minWidth={minWidth}
           padding={paddingDocs}
-          style={{ color: isDarkMode ? '#fff' : '#101010' }}
+          style={{ color: isDarkMode ? white : darkColor }}
         >
           <StoryFn />
         </Story>
@@ -240,7 +240,7 @@ function Preview(StoryFn: FC, context: Context) {
         minWidth={minWidth}
         mx="auto"
         padding={padding}
-        style={{ color: isDarkMode ? '#fff' : '#101010' }}
+        style={{ color: isDarkMode ? white : darkColor }}
         width="100%"
       >
         <StoryFn />

.storybook/theme.ts

@@ -1,6 +1,6 @@
 import { create } from '@storybook/theming';
 
-import { colors, variants } from '../src/modules/theme';
+import { colors, darkColor, variants } from '../src/modules/theme';
 
 export default create({
   base: 'light',
@@ -9,7 +9,7 @@ export default create({
   barSelectedColor: colors.primary,
 
   colorPrimary: colors.primary,
-  colorSecondary: '#101010',
+  colorSecondary: darkColor,
 
   fontBase: 'Rubik, sans-serif',
   fontCode: 'monospace',

src/hooks/__snapshots__/useTheme.test.tsx.snap

@@ -111,14 +111,9 @@ exports[`useTheme > should return properly 1`] = `
     "teal": "#38b2ac",
     "yellow": "#ffe166",
   },
-  "darkColor": "#101010",
+  "darkColor": "#262626",
   "darkMode": false,
   "dataAttributeName": "component-name",
-  "dropShadow": {
-    "high": "drop-shadow(2px 4px 18px rgba(148, 148, 148, 0.8))",
-    "low": "drop-shadow(2px 4px 8px rgba(148, 148, 148, 0.4))",
-    "mid": "drop-shadow(2px 4px 12px rgba(148, 148, 148, 0.6))",
-  },
   "easing": "cubic-bezier(0.65, 0.815, 0.735, 0.395)",
   "fontFamily": "inherit",
   "fontMonospace": "Courier, monospace",
@@ -197,6 +192,11 @@ exports[`useTheme > should return properly 1`] = `
     "low": "2px 4px 16px 2px rgba(148, 148, 148, 0.16)",
     "mid": "2px 4px 16px 4px rgba(148, 148, 148, 0.24)",
   },
+  "shadowDark": {
+    "high": "2px 4px 16px 8px rgba(32, 32, 32, 0.32)",
+    "low": "2px 4px 16px 2px rgba(32, 32, 32, 0.16)",
+    "mid": "2px 4px 16px 4px rgba(32, 32, 32, 0.24)",
+  },
   "spacing": {
     "jumbo": "96px",
     "lg": "24px",

src/modules/__snapshots__/helpers.test.tsx.snap

@@ -141,11 +141,6 @@ exports[`mergeTheme > should return a modified theme 1`] = `
   "darkColor": "#f04",
   "darkMode": false,
   "dataAttributeName": "component-name",
-  "dropShadow": {
-    "high": "drop-shadow(2px 4px 18px rgba(148, 148, 148, 0.8))",
-    "low": "drop-shadow(2px 4px 8px rgba(148, 148, 148, 0.4))",
-    "mid": "drop-shadow(2px 4px 12px rgba(148, 148, 148, 0.6))",
-  },
   "easing": "cubic-bezier(0.65, 0.815, 0.735, 0.395)",
   "fontFamily": "inherit",
   "fontMonospace": "Courier, monospace",
@@ -224,6 +219,11 @@ exports[`mergeTheme > should return a modified theme 1`] = `
     "low": "2px 4px 16px 2px rgba(148, 148, 148, 0.16)",
     "mid": "2px 4px 16px 4px rgba(148, 148, 148, 0.24)",
   },
+  "shadowDark": {
+    "high": "2px 4px 16px 8px rgba(32, 32, 32, 0.32)",
+    "low": "2px 4px 16px 2px rgba(32, 32, 32, 0.16)",
+    "mid": "2px 4px 16px 4px rgba(32, 32, 32, 0.24)",
+  },
   "spacing": {
     "jumbo": "96px",
     "lg": "24px",
@@ -567,14 +567,9 @@ exports[`mergeTheme > should return the default theme 1`] = `
     "teal": "#38b2ac",
     "yellow": "#ffe166",
   },
-  "darkColor": "#101010",
+  "darkColor": "#262626",
   "darkMode": false,
   "dataAttributeName": "component-name",
-  "dropShadow": {
-    "high": "drop-shadow(2px 4px 18px rgba(148, 148, 148, 0.8))",
-    "low": "drop-shadow(2px 4px 8px rgba(148, 148, 148, 0.4))",
-    "mid": "drop-shadow(2px 4px 12px rgba(148, 148, 148, 0.6))",
-  },
   "easing": "cubic-bezier(0.65, 0.815, 0.735, 0.395)",
   "fontFamily": "inherit",
   "fontMonospace": "Courier, monospace",
@@ -653,6 +648,11 @@ exports[`mergeTheme > should return the default theme 1`] = `
     "low": "2px 4px 16px 2px rgba(148, 148, 148, 0.16)",
     "mid": "2px 4px 16px 4px rgba(148, 148, 148, 0.24)",
   },
+  "shadowDark": {
+    "high": "2px 4px 16px 8px rgba(32, 32, 32, 0.32)",
+    "low": "2px 4px 16px 2px rgba(32, 32, 32, 0.16)",
+    "mid": "2px 4px 16px 4px rgba(32, 32, 32, 0.24)",
+  },
   "spacing": {
     "jumbo": "96px",
     "lg": "24px",

src/modules/__snapshots__/system.test.ts.snap

@@ -307,7 +307,7 @@ exports[`hoverStyles > should return only and "color" for variant "clean 1`] = `
 
 exports[`inputStyles > should return custom styles for "input" 1`] = `
 "
-    color: #101010;
+    color: #262626;
     display: block;
     font-family: inherit;
     font-size: 16px;
@@ -373,7 +373,7 @@ outline: none;
 
 exports[`inputStyles > should return the default styles for "select" 1`] = `
 "
-    color: #101010;
+    color: #262626;
     display: block;
     font-family: inherit;
     font-size: 16px;
@@ -413,7 +413,7 @@ exports[`inputStyles > should return the default styles for "select" 1`] = `
 
 exports[`inputStyles > should return the default styles for "textarea" 1`] = `
 "
-    color: #101010;
+    color: #262626;
     display: block;
     font-family: inherit;
     font-size: 16px;
@@ -579,30 +579,18 @@ exports[`radiusStyles > should return properly with an object 1`] = `
 }
 `;
 
-exports[`shadowStyles > should return properly for "'box-shadow (dark)'" 1`] = `
+exports[`shadowStyles > should return properly for "'dark'" 1`] = `
 {
-  "boxShadow": "2px 4px 16px 4px rgba(222, 222, 222, 0.24)",
+  "boxShadow": "2px 4px 16px 4px rgba(32, 32, 32, 0.24)",
 }
 `;
 
-exports[`shadowStyles > should return properly for "'box-shadow (light)'" 1`] = `
+exports[`shadowStyles > should return properly for "'light'" 1`] = `
 {
   "boxShadow": "2px 4px 16px 2px rgba(148, 148, 148, 0.16)",
 }
 `;
 
-exports[`shadowStyles > should return properly for "'filter (dark)'" 1`] = `
-{
-  "filter": "drop-shadow(2px 4px 18px rgba(222, 222, 222, 0.8))",
-}
-`;
-
-exports[`shadowStyles > should return properly for "'filter (light)'" 1`] = `
-{
-  "filter": "drop-shadow(2px 4px 8px rgba(148, 148, 148, 0.4))",
-}
-`;
-
 exports[`textStyles > should return properly 1`] = `
 {
   "fontSize": "14px",

src/modules/system.test.ts

@@ -459,23 +459,13 @@ describe('radiusStyles', () => {
 
 describe('shadowStyles', () => {
   it.each([
-    { name: 'box-shadow (light)', props: { shadow: 'low' as const, theme } },
+    { name: 'light', props: { shadow: 'low' as const, theme } },
     {
-      name: 'box-shadow (dark)',
+      name: 'dark',
       props: { shadow: 'mid' as const, theme: { ...theme, darkMode: true } },
     },
-    {
-      name: 'filter (light)',
-      props: { shadow: 'low' as const, theme },
-      useFilter: true,
-    },
-    {
-      name: 'filter (dark)',
-      props: { shadow: 'high' as const, theme: { ...theme, darkMode: true } },
-      useFilter: true,
-    },
-  ])(`should return properly for "$name"`, ({ props, useFilter }) => {
-    expect(shadowStyles(props, useFilter)).toMatchSnapshot();
+  ])(`should return properly for "$name"`, ({ props }) => {
+    expect(shadowStyles(props)).toMatchSnapshot();
   });
 
   it('should return an empty object without "shadow" props', () => {

src/modules/system.ts

@@ -99,7 +99,6 @@ interface GetStylesOptions extends ColorStylesOptions {
   skipColor?: boolean;
   skipSpacing?: boolean;
   useFontSize?: boolean;
-  useShadowFilter?: boolean;
 }
 
 interface TextStylesOptions {
@@ -235,15 +234,7 @@ export function getStyledOptions(...exclude: string[]) {
 
 export function getStyles(props: GetStylesProps, options: GetStylesOptions = {}) {
   const { busy, display, textAlign, theme } = props;
-  const {
-    lineHeightCustom,
-    skipBorder,
-    skipColor,
-    skipShadow,
-    skipSpacing,
-    useFontSize,
-    useShadowFilter,
-  } = options;
+  const { lineHeightCustom, skipBorder, skipColor, skipShadow, skipSpacing, useFontSize } = options;
 
   const { fontFamily } = theme;
 
@@ -257,7 +248,7 @@ export function getStyles(props: GetStylesProps, options: GetStylesOptions = {})
     ...layoutStyles(props),
     ...positioningStyles(props),
     ...radiusStyles(props),
-    ...shadowStyles(props, useShadowFilter),
+    ...shadowStyles(props),
     ...textStyles(props, { lineHeightCustom, skipFontSizing: !useFontSize }),
     ...(!skipSpacing ? marginStyles(props) : {}),
     ...(!skipSpacing ? paddingStyles(props) : {}),
@@ -912,23 +903,12 @@ export function radiusStyles<T extends WithRadius & WithTheme>(props: T): CSSObj
   return output;
 }
 
-export function shadowStyles<T extends WithShadow & WithTheme>(
-  props: T,
-  useFilter = false,
-): CSSObject {
-  const { darkMode, dropShadow, shadow } = props.theme;
+export function shadowStyles<T extends WithShadow & WithTheme>(props: T): CSSObject {
+  const { darkMode, shadow, shadowDark } = props.theme;
 
   if (props.shadow) {
-    if (useFilter) {
-      return {
-        filter: darkMode
-          ? dropShadow[props.shadow].replace(/148/g, '222')
-          : dropShadow[props.shadow],
-      };
-    }
-
     return {
-      boxShadow: darkMode ? shadow[props.shadow].replace(/148/g, '222') : shadow[props.shadow],
+      boxShadow: darkMode ? shadowDark[props.shadow] : shadow[props.shadow],
     };
   }
 

src/modules/theme.ts

@@ -74,18 +74,18 @@ export const radius = {
   round: '50%',
 };
 
-export const dropShadow = {
-  low: 'drop-shadow(2px 4px 8px rgba(148, 148, 148, 0.4))',
-  mid: 'drop-shadow(2px 4px 12px rgba(148, 148, 148, 0.6))',
-  high: 'drop-shadow(2px 4px 18px rgba(148, 148, 148, 0.8))',
-};
-
 export const shadow = {
   low: '2px 4px 16px 2px rgba(148, 148, 148, 0.16)',
   mid: '2px 4px 16px 4px rgba(148, 148, 148, 0.24)',
   high: '2px 4px 16px 8px rgba(148, 148, 148, 0.32)',
 };
 
+export const shadowDark = {
+  low: '2px 4px 16px 2px rgba(32, 32, 32, 0.16)',
+  mid: '2px 4px 16px 4px rgba(32, 32, 32, 0.24)',
+  high: '2px 4px 16px 8px rgba(32, 32, 32, 0.32)',
+};
+
 export const spacing = {
   /** @default 2px */
   xxxs: '2px',
@@ -187,7 +187,7 @@ export const typography = {
  */
 export const black = '#000';
 export const white = '#fff';
-export const darkColor = '#101010';
+export const darkColor = '#262626';
 export const lightColor = '#f5f5f5';
 
 export const grayScale = {