From 8faa4ec86f32b996b0dbce5fddb31233d5d959e7 Mon Sep 17 00:00:00 2001 From: Gil Barbara Date: Thu, 5 Sep 2024 11:48:38 -0300 Subject: [PATCH] Update shadow for darkMode - remove drop-shadow filter --- .storybook/preview.tsx | 16 +++++----- .storybook/theme.ts | 4 +-- .../__snapshots__/useTheme.test.tsx.snap | 12 ++++---- .../__snapshots__/helpers.test.tsx.snap | 22 +++++++------- src/modules/__snapshots__/system.test.ts.snap | 24 ++++----------- src/modules/system.test.ts | 18 +++-------- src/modules/system.ts | 30 ++++--------------- src/modules/theme.ts | 14 ++++----- 8 files changed, 49 insertions(+), 91 deletions(-) diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx index 1e153c6f..8b6c50c2 100644 --- a/.storybook/preview.tsx +++ b/.storybook/preview.tsx @@ -11,7 +11,7 @@ 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].*' }, @@ -19,9 +19,9 @@ export const parameters = { 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 }} > @@ -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%" > diff --git a/.storybook/theme.ts b/.storybook/theme.ts index 6ab450d0..8fe2b4c8 100644 --- a/.storybook/theme.ts +++ b/.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', diff --git a/src/hooks/__snapshots__/useTheme.test.tsx.snap b/src/hooks/__snapshots__/useTheme.test.tsx.snap index 0d990a75..2f2549e4 100644 --- a/src/hooks/__snapshots__/useTheme.test.tsx.snap +++ b/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", diff --git a/src/modules/__snapshots__/helpers.test.tsx.snap b/src/modules/__snapshots__/helpers.test.tsx.snap index c298cd6c..70777ea7 100644 --- a/src/modules/__snapshots__/helpers.test.tsx.snap +++ b/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", diff --git a/src/modules/__snapshots__/system.test.ts.snap b/src/modules/__snapshots__/system.test.ts.snap index 6fe9cbae..545394e0 100644 --- a/src/modules/__snapshots__/system.test.ts.snap +++ b/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", diff --git a/src/modules/system.test.ts b/src/modules/system.test.ts index 7c495aec..08558964 100644 --- a/src/modules/system.test.ts +++ b/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', () => { diff --git a/src/modules/system.ts b/src/modules/system.ts index 7644c20e..4e30d6a6 100644 --- a/src/modules/system.ts +++ b/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(props: T): CSSObj return output; } -export function shadowStyles( - props: T, - useFilter = false, -): CSSObject { - const { darkMode, dropShadow, shadow } = props.theme; +export function shadowStyles(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], }; } diff --git a/src/modules/theme.ts b/src/modules/theme.ts index 0bee0692..140ad3fc 100644 --- a/src/modules/theme.ts +++ b/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 = {