diff --git a/.eslintrc b/.eslintrc index 661ea8754..d932fbaeb 100644 --- a/.eslintrc +++ b/.eslintrc @@ -36,6 +36,7 @@ "@typescript-eslint/naming-convention": "off", "@typescript-eslint/no-shadow": "error", "@typescript-eslint/no-use-before-define": "error", + "arrow-parens": "off", "no-shadow": "off", "no-use-before-define": "off", "react/jsx-filename-extension": ["warn", { "extensions": [".js", ".tsx"] }], @@ -56,7 +57,8 @@ "emotion/jsx-import": "error", "emotion/no-vanilla": "error", "emotion/import-from-emotion": "error", - "emotion/styled-import": "error" + "emotion/styled-import": "error", + "react/jsx-props-no-spreading": "off" } }, { diff --git a/.storybook/preview.js b/.storybook/preview.js index 29a92a5a7..4e1b9c301 100644 --- a/.storybook/preview.js +++ b/.storybook/preview.js @@ -1,74 +1,89 @@ +import { useState } from 'react'; import { addDecorator, addParameters, configure } from '@storybook/react'; import { withA11y } from '@storybook/addon-a11y'; import { addReadme, configureReadme } from 'storybook-readme'; import centered from '@storybook/addon-centered/react'; import { Global, css } from '@emotion/core'; +import { ThemeProvider } from 'emotion-theming'; import Theme from './theme'; import { resetStyles, brandStyles, } from '../src/utils/injectGlobalStyles/style'; +import { primaryTheme, secondaryTheme } from '../src/constants/themes'; -const InjectGlobalStyles = (storyFn) => ( -
- - - - - { + const [theme, setTheme] = useState(primaryTheme); + + const toggleTheme = () => + theme.__type === 'primary' + ? setTheme(secondaryTheme) + : setTheme(primaryTheme); + + return ( +
- {storyFn()} -
-); + > + + + + + + + + {storyFn()} + +
+ ); +}; addDecorator(InjectGlobalStyles); addDecorator(centered); @@ -105,7 +120,7 @@ addParameters({ }, }); -const req = require.context('../stories', true, /.(ts|tsx|js)$/); +const req = require.context('../stories/toggle', true, /.(ts|tsx|js)$/); function loadStories() { req.keys().forEach(req); } diff --git a/package.json b/package.json index df5ca69f4..dfaa81947 100644 --- a/package.json +++ b/package.json @@ -128,9 +128,10 @@ "yarn-run-all": "^3.1.1" }, "dependencies": { - "@emotion/core": "^10.0.35", - "@emotion/styled": "^10.0.27", + "@emotion/core": "10.0.35", + "@emotion/styled": "10.0.27", "@react-aria/focus": "^3.0.2", + "emotion-theming": "10.0.27", "lodash.round": "^4.0.4", "lodash.throttle": "^4.1.1", "lodash.uniqueid": "^4.0.1", @@ -146,6 +147,7 @@ "peerDependencies": { "@emotion/core": "10.0.35", "@emotion/styled": "10.0.27", + "emotion-theming": "10.0.27", "react": "^16.13.1", "react-dom": "^16.13.1" }, diff --git a/src/constants/colors/primary.ts b/src/constants/colors/primary.ts new file mode 100644 index 000000000..2c1274e72 --- /dev/null +++ b/src/constants/colors/primary.ts @@ -0,0 +1,60 @@ +import PropTypes from 'prop-types'; + +import COLORS from '.'; + +const PRIMARY_COLORS = { + // brand colors + primary: COLORS.purple100, + primaryTint1: COLORS.purple85, + primaryTint2: COLORS.purple70, + primaryTint3: COLORS.purple30, + secondary: COLORS.lavender100, + tertiary: COLORS.purple4, + + // general colors + success: COLORS.statusGreen, + successBackground: COLORS.statusGreenBackground, + successBorder: COLORS.statusGreenBorder, + info: COLORS.statusPurple, + infoBackground: COLORS.statusPurpleBackground, + infoBorder: COLORS.statusPurpleBorder, + error: COLORS.statusRed, + errorBackground: COLORS.statusRedBackground, + errorBorder: COLORS.statusRedBorder, + default: COLORS.purple70, + defaultBackground: COLORS.purple10, + defaultBorder: COLORS.purple15, + accent: COLORS.red, + disabled: COLORS.purple10, + failure: COLORS.red, + hover: COLORS.purple4, + warning: COLORS.yellowLight, + + // ui colors + background: COLORS.purple4, + backgroundDark: COLORS.purple4, + border: COLORS.purple10, + divider: COLORS.purple10, + + // form colors + radioBorder: COLORS.purple30, + radioBorderSelected: COLORS.lavender100, + + // typography + textMuted: COLORS.purple70, + textGhost: COLORS.purple30, + textDisabled: COLORS.purple30, + + // overlay + overlay: 'rgba(45, 45, 48, 0.7)', + overlaySolid: 'rgba(45, 45, 48, 1)', + + black: COLORS.black, + white: COLORS.white, +}; + +export const PRIMARY_COLORS_PROP_TYPES = PropTypes.oneOf( + Object.values(PRIMARY_COLORS), +); + +export default PRIMARY_COLORS; diff --git a/src/constants/colors/secondary.ts b/src/constants/colors/secondary.ts new file mode 100644 index 000000000..35016327a --- /dev/null +++ b/src/constants/colors/secondary.ts @@ -0,0 +1,60 @@ +import PropTypes from 'prop-types'; + +import { COLORS } from '..'; + +const SECONDARY_COLORS = { + // brand colors + primary: null, + primaryTint1: '#000000', + primaryTint2: null, + primaryTint3: '#cccccc', + secondary: '#414a4c', + tertiary: null, + + // general colors + success: null, + successBackground: null, + successBorder: null, + info: null, + infoBackground: null, + infoBorder: null, + error: null, + errorBackground: null, + errorBorder: null, + default: null, + defaultBackground: null, + defaultBorder: null, + accent: null, + disabled: null, + failure: null, + hover: null, + warning: null, + + // ui colors + background: null, + backgroundDark: null, + border: null, + divider: null, + + // form colors + radioBorder: null, + radioBorderSelected: null, + + // typography + textMuted: null, + textGhost: null, + textDisabled: null, + + // overlay + overlay: null, + overlaySolid: null, + + black: COLORS.black, + white: COLORS.white, +}; + +export const SECONDARY_COLORS_PROP_TYPES = PropTypes.oneOf( + Object.values(SECONDARY_COLORS), +); + +export default SECONDARY_COLORS; diff --git a/src/constants/colors/test.ts b/src/constants/colors/test.ts new file mode 100644 index 000000000..4a8666abe --- /dev/null +++ b/src/constants/colors/test.ts @@ -0,0 +1,10 @@ +import PRIMARY_COLORS from './primary'; +import SECONDARY_COLORS from './secondary'; + +describe('theme colors', () => { + it('primary and secondary colors have the same number of properties', () => { + expect(Object.keys(PRIMARY_COLORS).length).toEqual( + Object.keys(SECONDARY_COLORS).length, + ); + }); +}); diff --git a/src/constants/themes/index.ts b/src/constants/themes/index.ts new file mode 100644 index 000000000..7cadc793d --- /dev/null +++ b/src/constants/themes/index.ts @@ -0,0 +1,2 @@ +export { default as primaryTheme } from './primary'; +export { default as secondaryTheme } from './secondary'; diff --git a/src/constants/themes/primary.ts b/src/constants/themes/primary.ts new file mode 100644 index 000000000..51dadaef1 --- /dev/null +++ b/src/constants/themes/primary.ts @@ -0,0 +1,7 @@ +import PRIMARY_COLORS from '../colors/primary'; + +export default { + __type: 'primary', + BOX_SHADOW: {}, + COLORS: PRIMARY_COLORS, +} as const; diff --git a/src/constants/themes/secondary.ts b/src/constants/themes/secondary.ts new file mode 100644 index 000000000..e4545e604 --- /dev/null +++ b/src/constants/themes/secondary.ts @@ -0,0 +1,7 @@ +import SECONDARY_COLORS from '../colors/secondary'; + +export default { + __type: 'secondary', + BOX_SHADOW: {}, + COLORS: SECONDARY_COLORS, +} as const; diff --git a/src/constants/themes/types.ts b/src/constants/themes/types.ts new file mode 100644 index 000000000..e97624573 --- /dev/null +++ b/src/constants/themes/types.ts @@ -0,0 +1,14 @@ +import primaryTheme from './primary'; +import secondaryTheme from './secondary'; + +type BoxShadow = + | typeof primaryTheme['BOX_SHADOW'] + | typeof secondaryTheme['BOX_SHADOW']; + +type Colors = typeof primaryTheme['COLORS'] | typeof secondaryTheme['COLORS']; + +export type ThemeType = { + __type: 'primary' | 'secondary'; + BOX_SHADOW: BoxShadow; + COLORS: Colors; +}; diff --git a/src/shared-components/accordion/index.tsx b/src/shared-components/accordion/index.tsx index 545c823f5..76d90a492 100644 --- a/src/shared-components/accordion/index.tsx +++ b/src/shared-components/accordion/index.tsx @@ -1,7 +1,8 @@ import PropTypes from 'prop-types'; import React from 'react'; -import { COLORS } from 'src/constants'; import ChevronIcon from 'src/svgs/icons/chevron-icon.svg'; +import { withTheme } from 'emotion-theming'; +import { ThemeType } from 'src/constants/themes/types'; import Thumbnails from './thumbnails'; import { @@ -25,6 +26,7 @@ type AccordionProps = { ) => void; rightAlignArrow?: boolean; title: React.ReactNode; + theme: ThemeType; }; /** @@ -125,6 +127,7 @@ class Accordion extends React.Component< noBorder, disabled, rightAlignArrow, + theme, } = this.props; return ( @@ -150,7 +153,7 @@ class Accordion extends React.Component< rotate={isOpen ? 90 : 0} width={16} height={16} - fill={COLORS.purple} + fill={theme.COLORS.primary} /> @@ -166,4 +169,4 @@ class Accordion extends React.Component< } } -export default Accordion; +export default withTheme(Accordion); diff --git a/src/shared-components/accordion/style.ts b/src/shared-components/accordion/style.ts index a15548867..a75edad2f 100644 --- a/src/shared-components/accordion/style.ts +++ b/src/shared-components/accordion/style.ts @@ -1,14 +1,9 @@ -import styled from '@emotion/styled'; -import { css } from '@emotion/core'; import { - ANIMATION, - BREAKPOINTS, - BOX_SHADOWS, - COLORS, - SPACER, + ANIMATION, BREAKPOINTS, BOX_SHADOWS, SPACER, } from 'src/constants'; - -const border = `1px solid ${COLORS.border}`; +import styled from '@emotion/styled'; +import { ThemeType } from 'src/constants/themes/types'; +import { css } from '@emotion/core'; export const Content = styled.div` padding: ${SPACER.medium}; @@ -21,11 +16,11 @@ export const ExpansionWrapper = styled.div<{ contentHeight: string }>` transition: max-height ${ANIMATION.defaultTiming} ease-in-out; `; -const getBorderStyle = (isOpen: boolean) => css` - border: ${border}; +const getBorderStyle = (theme: ThemeType, isOpen: boolean) => css` + border: 1px solid ${theme.COLORS.border}; ${ExpansionWrapper} { - ${isOpen && `border-top: ${border};`}; + ${isOpen && `border-top: 1px solid ${theme.COLORS.border};`}; } `; @@ -33,8 +28,10 @@ export const AccordionBox = styled.div<{ noBorder: boolean; isOpen: boolean; disabled: boolean; + theme?: ThemeType; }>` - ${({ noBorder, isOpen }) => (!noBorder ? getBorderStyle(isOpen) : '')}; + ${({ noBorder, isOpen, theme }) => + !noBorder ? getBorderStyle(theme, isOpen) : ''}; width: 100%; @@ -42,12 +39,12 @@ export const AccordionBox = styled.div<{ border-bottom: none; } - ${({ disabled }) => + ${({ disabled, theme }) => disabled ? ` opacity: 0.4; - background-color: ${COLORS.disabled}; - border-color: ${COLORS.purple30}; + background-color: ${theme.COLORS.disabled}; + border-color: ${theme.COLORS.primaryTint3}; ` : ''}; `; @@ -98,9 +95,12 @@ export const Truncate = styled.div` * borderRadius must match borderRadius passed to main * component if opting out of default values. */ -export const Container = styled.div<{ borderRadius?: string }>` +export const Container = styled.div<{ + borderRadius?: string; + theme?: ThemeType; +}>` box-shadow: ${BOX_SHADOWS.clickable}; - background-color: ${COLORS.white}; + background-color: ${({ theme }) => theme.COLORS.white}; max-width: ${BREAKPOINTS.md}px; ${({ borderRadius = '4px' }) => ` diff --git a/src/shared-components/accordion/test.tsx b/src/shared-components/accordion/test.tsx index 25d4995d7..e8441d2b1 100644 --- a/src/shared-components/accordion/test.tsx +++ b/src/shared-components/accordion/test.tsx @@ -1,38 +1,41 @@ import React from 'react'; import renderer from 'react-test-renderer'; import { shallow } from 'enzyme'; +import { primaryTheme } from 'src/constants/themes'; +import { ThemeProvider } from 'emotion-theming'; import Accordion from './index'; -const testAccordion = { +const testAccordionProps = { title:
title
, isOpen: false, onClick: (): void => undefined, children:
expansion
, }; -/* eslint-disable react/jsx-props-no-spreading */ +const AccordionWithTheme = (additionalProps?: Record) => ( + + + +); + describe('', () => { test('renders regular accordion', () => { - const component = renderer.create(); + const component = renderer.create(); const tree = component.toJSON(); expect(tree).toMatchSnapshot(); }); test('renders no border accordion', () => { - const component = renderer.create( - , - ); + const component = renderer.create(); const tree = component.toJSON(); expect(tree).toMatchSnapshot(); }); test('renders disabled accordion', () => { - const component = renderer.create( - , - ); + const component = renderer.create(); const tree = component.toJSON(); expect(tree).toMatchSnapshot(); @@ -42,11 +45,10 @@ describe('', () => { const spy = jest.fn(); const titleIndex = 0; - const component = shallow(); + const component = shallow(); const title = component.childAt(titleIndex); title.simulate('click'); expect(spy).toHaveBeenCalled(); }); }); -/* eslint-enable react/jsx-props-no-spreading */ diff --git a/src/shared-components/carousel/style.ts b/src/shared-components/carousel/style.ts index 7b52f20f8..706c7eddb 100644 --- a/src/shared-components/carousel/style.ts +++ b/src/shared-components/carousel/style.ts @@ -14,7 +14,7 @@ export const Card = styled.div` const primaryStyles = css` .slick-dots { li { - background-color: ${COLORS.purple}; + background-color: ${COLORS.primary}; } } `; diff --git a/src/shared-components/field/style.js b/src/shared-components/field/style.js index 335c42f27..e125af8ea 100644 --- a/src/shared-components/field/style.js +++ b/src/shared-components/field/style.js @@ -20,7 +20,7 @@ export const FieldContainer = styled.div` export const Label = styled.label` ${TYPOGRAPHY_STYLE.label}; - ${({ disabled }) => disabled && `color:${COLORS.purple30};`}; + ${({ disabled }) => disabled && `color:${COLORS.primaryTint3};`}; `; const inputStyles = css` @@ -80,7 +80,7 @@ export const Textarea = styled.textarea` width: 100%; `; -const applyMessagesStyles = messagesType => css` +const applyMessagesStyles = (messagesType) => css` svg.radiance-field-input-icon { opacity: 1; } diff --git a/src/shared-components/selectorButton/style.js b/src/shared-components/selectorButton/style.js index b930eece7..1a5206604 100644 --- a/src/shared-components/selectorButton/style.js +++ b/src/shared-components/selectorButton/style.js @@ -40,19 +40,19 @@ export const SelectorIcon = styled.div` `}; `; -const primarySelectorStyle = checked => css` +const primarySelectorStyle = (checked) => css` background-color: ${checked ? COLORS.primary : 'transparent'}; border-color: ${COLORS.primary}; `; -const secondarySelectorStyle = checked => css` +const secondarySelectorStyle = (checked) => css` background-color: ${checked ? COLORS.secondary : 'transparent'}; border-color: ${checked ? COLORS.secondary : COLORS.primary}; `; const disabledSelectorStyle = css` - background-color: ${COLORS.purple30}; - border-color: ${COLORS.purple30}; + background-color: ${COLORS.primaryTint3}; + border-color: ${COLORS.primaryTint3}; cursor: not-allowed; `; diff --git a/src/shared-components/toggle/__snapshots__/test.js.snap b/src/shared-components/toggle/__snapshots__/test.js.snap index 63093c9a1..56fe2ba6e 100644 --- a/src/shared-components/toggle/__snapshots__/test.js.snap +++ b/src/shared-components/toggle/__snapshots__/test.js.snap @@ -77,7 +77,7 @@ exports[` UI snapshot renders the component 1`] = ` style={ Object { "alignItems": "center", - "backgroundColor": "rgb(225,224,230)", + "backgroundColor": "rgb(195,192,205)", "borderRadius": 100, "display": "flex", "height": 24, diff --git a/src/shared-components/toggle/index.js b/src/shared-components/toggle/index.js index 6aedc4aef..2ac26314b 100644 --- a/src/shared-components/toggle/index.js +++ b/src/shared-components/toggle/index.js @@ -1,9 +1,9 @@ import PropTypes from 'prop-types'; import React from 'react'; import ToggleButton from 'react-toggle-button'; +import { useTheme } from 'emotion-theming'; -import { COLORS } from '../../constants'; -import { Container, Label, trackStyle, thumbStyle } from './style'; +import { Container, Label, trackStyle, getThumbStyle } from './style'; const propTypes = { checked: PropTypes.bool, @@ -16,34 +16,38 @@ const defaultProps = { label: '', }; -const Toggle = ({ checked, label, onChange }) => ( - - {label && } - - -); +const Toggle = ({ checked, label, onChange }) => { + const theme = useTheme(); + + return ( + + {label && } + + + ); +}; Toggle.propTypes = propTypes; Toggle.defaultProps = defaultProps; diff --git a/src/shared-components/toggle/style.js b/src/shared-components/toggle/style.js index 674f7d23c..0434044d4 100644 --- a/src/shared-components/toggle/style.js +++ b/src/shared-components/toggle/style.js @@ -17,7 +17,7 @@ export const Container = styled.div` `; export const Label = styled.span` - color: ${COLORS.primaryTint1}; + color: ${({ theme }) => theme.COLORS.primaryTint1}; margin: 0; font-size: ${SPACER.medium}; line-height: ${SPACER.large}; @@ -33,11 +33,11 @@ export const trackStyle = { width: 40, }; -export const thumbStyle = { +export const getThumbStyle = (theme) => ({ height: 22, width: 22, - border: `1px solid ${COLORS.border}`, + border: `1px solid ${theme.COLORS.border}`, boxShadow: `none`, background: COLORS.white, backgroundColor: COLORS.white, -}; +}); diff --git a/src/shared-components/toggle/test.js b/src/shared-components/toggle/test.js index b668dc8e0..1d3d1e862 100644 --- a/src/shared-components/toggle/test.js +++ b/src/shared-components/toggle/test.js @@ -1,16 +1,24 @@ import React from 'react'; import { shallow, mount } from 'enzyme'; import renderer from 'react-test-renderer'; +import { primaryTheme } from 'src/constants/themes'; +import { ThemeProvider } from 'emotion-theming'; import Toggle from './index'; +const ToggleWithTheme = (props) => ( + + + +); + describe('', () => { const labelText = 'Label Text'; describe('UI snapshot', () => { it('renders the component', () => { const component = renderer.create( - + , ); const tree = component.toJSON(); @@ -20,14 +28,16 @@ describe('', () => { describe('when label is undefined', () => { test('does not render a label component', () => { - const wrapper = shallow(); + const wrapper = shallow(); expect(wrapper.html().indexOf('label') === -1).toBe(true); }); }); describe('when label is a string', () => { test('renders a text component', () => { - const wrapper = shallow(); + const wrapper = shallow( + , + ); expect(wrapper.html().indexOf(labelText) > 0).toBe(true); }); @@ -36,7 +46,7 @@ describe('', () => { describe('when checkbox is clicked', () => { test('fires onChange function with correct argument when function exists', () => { const spy = jest.fn(); - const wrapper = mount(); + const wrapper = mount(); wrapper.find('[type="checkbox"]').simulate('click'); expect(spy).toHaveBeenCalled(); diff --git a/src/shared-components/typography/index.js b/src/shared-components/typography/index.js index f7cd31ad3..0465ff348 100644 --- a/src/shared-components/typography/index.js +++ b/src/shared-components/typography/index.js @@ -27,7 +27,7 @@ const titleStyle = css` `; export const baseBodyStyles = ` - color: ${COLORS.purpleTint1}; + color: ${COLORS.primaryTint1}; font-size: ${TYPOGRAPHY_CONSTANTS.fontSize.body}; line-height: ${round(28 / 16, 2)}; `; @@ -37,7 +37,7 @@ const bodyStyle = css` `; const captionStyle = css` - color: ${COLORS.purpleTint2}; + color: ${COLORS.primaryTint2}; font-size: ${TYPOGRAPHY_CONSTANTS.fontSize.caption}; line-height: ${round(24 / 14, 2)}; `; @@ -53,7 +53,7 @@ const successStyle = css` `; const labelStyle = css` - color: ${COLORS.purpleTint1}; + color: ${COLORS.primaryTint1}; font-size: ${TYPOGRAPHY_CONSTANTS.fontSize.label}; line-height: ${round(20 / 12, 2)}; `; diff --git a/stories/progressBar/index.js b/stories/progressBar/index.js index 0cf11cce3..780295f9e 100644 --- a/stories/progressBar/index.js +++ b/stories/progressBar/index.js @@ -1,11 +1,12 @@ import React from 'react'; import { storiesOf } from '@storybook/react'; import { withDocs } from 'storybook-readme'; -import { withKnobs, text, select, number, color } from '@storybook/addon-knobs'; +import { + withKnobs, text, select, number, color, +} from '@storybook/addon-knobs'; import styled from '@emotion/styled'; import { css } from '@emotion/core'; - -import ProgressBarReadme from 'docs/progressBar.md'; +import ProgressBarReadme from 'docs/progressBar'; import { ProgressBar, Typography } from 'src/shared-components'; import { COLORS, PROGRESS_BAR_STATUS } from 'src/constants'; @@ -25,7 +26,7 @@ const BarContainer = styled.div` :before { content: 'PAGE CONTENT'; - color: ${COLORS.purple30}; + color: ${COLORS.primaryTint3}; } `; @@ -71,10 +72,10 @@ stories.add( status={select( 'status', PROGRESS_BAR_STATUS, - PROGRESS_BAR_STATUS.loading + PROGRESS_BAR_STATUS.loading, )} /> - )) + )), ); diff --git a/stories/tooltip/index.js b/stories/tooltip/index.js index a12f84093..78d96f538 100644 --- a/stories/tooltip/index.js +++ b/stories/tooltip/index.js @@ -23,7 +23,7 @@ const TooltipContainer = styled.div` `; const TriggerContainer = styled.div` - background: ${COLORS.purple}; + background: ${COLORS.primary}; margin: 0 auto; padding: ${SPACER.small}; color: ${COLORS.white}; diff --git a/yarn.lock b/yarn.lock index 43a2ef4ed..7dffa41ef 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1672,7 +1672,7 @@ "@emotion/utils" "0.11.3" "@emotion/weak-memoize" "0.2.5" -"@emotion/core@^10.0.20", "@emotion/core@^10.0.35", "@emotion/core@^10.0.9": +"@emotion/core@10.0.35", "@emotion/core@^10.0.20", "@emotion/core@^10.0.9": version "10.0.35" resolved "https://registry.yarnpkg.com/@emotion/core/-/core-10.0.35.tgz#513fcf2e22cd4dfe9d3894ed138c9d7a859af9b3" integrity sha512-sH++vJCdk025fBlRZSAhkRlSUoqSqgCzYf5fMOmqqi3bM6how+sQpg3hkgJonj8GxXM4WbD7dRO+4tegDB9fUw== @@ -1752,7 +1752,7 @@ "@emotion/serialize" "^0.11.15" "@emotion/utils" "0.11.3" -"@emotion/styled@^10.0.17", "@emotion/styled@^10.0.27": +"@emotion/styled@10.0.27", "@emotion/styled@^10.0.17": version "10.0.27" resolved "https://registry.yarnpkg.com/@emotion/styled/-/styled-10.0.27.tgz#12cb67e91f7ad7431e1875b1d83a94b814133eaf" integrity sha512-iK/8Sh7+NLJzyp9a5+vIQIXTYxfT4yB/OJbjzQanB2RZpvmzBQOHZWhpAMZWYEKRNNbsD6WfBw5sVWkb6WzS/Q== @@ -5921,7 +5921,7 @@ emojis-list@^3.0.0: resolved "https://registry.yarnpkg.com/emojis-list/-/emojis-list-3.0.0.tgz#5570662046ad29e2e916e71aae260abdff4f6a78" integrity sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q== -emotion-theming@^10.0.19: +emotion-theming@10.0.27, emotion-theming@^10.0.19: version "10.0.27" resolved "https://registry.yarnpkg.com/emotion-theming/-/emotion-theming-10.0.27.tgz#1887baaec15199862c89b1b984b79806f2b9ab10" integrity sha512-MlF1yu/gYh8u+sLUqA0YuA9JX0P4Hb69WlKc/9OLo+WCXuX6sy/KoIa+qJimgmr2dWqnypYKYPX37esjDBbhdw==