diff --git a/src/components/Avatar/Avatar.style.ts b/src/components/Avatar/Avatar.style.ts index 6db3acf73..39a3b1099 100644 --- a/src/components/Avatar/Avatar.style.ts +++ b/src/components/Avatar/Avatar.style.ts @@ -29,7 +29,7 @@ export const avatarStyle = user-select: none; justify-content: center; - ${generateStylesFromTokens(typographyTokens(`${size}`))}; + ${generateStylesFromTokens(typographyTokens(`${size}` as const))}; img { border-radius: ${tokens('borderRadius')}; diff --git a/src/components/Avatar/Avatar.tokens.ts b/src/components/Avatar/Avatar.tokens.ts index 4123a2e08..8864d9156 100644 --- a/src/components/Avatar/Avatar.tokens.ts +++ b/src/components/Avatar/Avatar.tokens.ts @@ -16,9 +16,9 @@ export type AvatarTokens = DotKeys; export type AvatarTextTokens = DotKeys; export const getAvatarTokens = (theme: Theme) => { - return getComponentTokens(avatar, theme); + return getComponentTokens(avatar, theme); }; export const getAvatarTextTokens = (theme: Theme) => { - return getComponentTokens(avatarText, theme); + return getComponentTokens(avatarText, theme); }; diff --git a/src/components/Avatar/__snapshots__/Avatar.stories.storyshot b/src/components/Avatar/__snapshots__/Avatar.stories.storyshot index 8b24775a8..26f813fae 100644 --- a/src/components/Avatar/__snapshots__/Avatar.stories.storyshot +++ b/src/components/Avatar/__snapshots__/Avatar.stories.storyshot @@ -333,8 +333,8 @@ exports[`Storyshots Design System/Avatar/Avatar Avatar with icon 1`] = ` display: -webkit-flex; display: -ms-flexbox; display: flex; - width: 2.25rem; - height: 2.25rem; + width: 2rem; + height: 2rem; border-radius: 6.25rem; border: 0.0625rem solid; border-color: #b9cdfc; @@ -373,8 +373,8 @@ exports[`Storyshots Design System/Avatar/Avatar Avatar with icon 1`] = ` .emotion-11 { fill: #1249C4; - width: 1.8rem; - height: 1.8rem; + width: 1.6rem; + height: 1.6rem; } .emotion-11 path { @@ -819,8 +819,8 @@ exports[`Storyshots Design System/Avatar/Avatar Avatar with letter 1`] = ` display: -webkit-flex; display: -ms-flexbox; display: flex; - width: 2.25rem; - height: 2.25rem; + width: 2rem; + height: 2rem; border-radius: 6.25rem; border: 0.0625rem solid; border-color: #b9cdfc; @@ -1223,8 +1223,8 @@ exports[`Storyshots Design System/Avatar/Avatar Avatar with src 1`] = ` display: -webkit-flex; display: -ms-flexbox; display: flex; - width: 2.25rem; - height: 2.25rem; + width: 2rem; + height: 2rem; border-radius: 6.25rem; border: 0.0625rem solid; border-color: #b9cdfc; diff --git a/src/components/Avatar/__snapshots__/AvatarStack.stories.storyshot b/src/components/Avatar/__snapshots__/AvatarStack.stories.storyshot index 9e26e1560..cabb0ec62 100644 --- a/src/components/Avatar/__snapshots__/AvatarStack.stories.storyshot +++ b/src/components/Avatar/__snapshots__/AvatarStack.stories.storyshot @@ -211,12 +211,12 @@ exports[`Storyshots Design System/Avatar/AvatarStack Avatar Stack 1`] = ` } .emotion-25 div:last-child { - width: 2.25rem; + width: 2rem; } .emotion-26 { z-index: 6; - width: 1.8rem; + width: 1.6rem; } .emotion-27 { @@ -227,8 +227,8 @@ exports[`Storyshots Design System/Avatar/AvatarStack Avatar Stack 1`] = ` display: -webkit-flex; display: -ms-flexbox; display: flex; - width: 2.25rem; - height: 2.25rem; + width: 2rem; + height: 2rem; border-radius: 6.25rem; border: 0.0625rem solid; border-color: #b9cdfc; @@ -267,7 +267,7 @@ exports[`Storyshots Design System/Avatar/AvatarStack Avatar Stack 1`] = ` .emotion-28 { z-index: 5; - width: 1.8rem; + width: 1.6rem; } .emotion-30 { @@ -288,8 +288,8 @@ exports[`Storyshots Design System/Avatar/AvatarStack Avatar Stack 1`] = ` .emotion-31 { fill: #1249C4; - width: 1.8rem; - height: 1.8rem; + width: 1.6rem; + height: 1.6rem; } .emotion-31 path { @@ -298,12 +298,12 @@ exports[`Storyshots Design System/Avatar/AvatarStack Avatar Stack 1`] = ` .emotion-32 { z-index: 4; - width: 1.8rem; + width: 1.6rem; } .emotion-34 { z-index: 0; - width: 1.8rem; + width: 1.6rem; } .emotion-36 { diff --git a/src/components/Box/Box.stories.mdx b/src/components/Box/Box.stories.mdx index 6f0564562..f5aecd481 100644 --- a/src/components/Box/Box.stories.mdx +++ b/src/components/Box/Box.stories.mdx @@ -45,13 +45,13 @@ All application below comes with a default margin bottom '5' which is 12px - + Padding 3 - + Padding 7 - + Padding 12 @@ -63,7 +63,7 @@ Padding is the same as "margin" in the application, you can also use `mx` for ma - + Padding Horizontal 7 @@ -75,7 +75,7 @@ Padding is the same as "margin" in the application, you can also use `my` for ma - + Padding Vertical 7 @@ -90,7 +90,7 @@ All application below comes with a default margin bottom '5' which is 12px Background Inverted - + Background Light diff --git a/src/components/Box/Box.test.ts b/src/components/Box/Box.test.ts index a7d3ca419..3e2c559e3 100644 --- a/src/components/Box/Box.test.ts +++ b/src/components/Box/Box.test.ts @@ -5,13 +5,13 @@ describe('pickCSSProperties', () => { it('should pick only the styled box props from the input object', () => { const inputObject: BoxProps = { color: 'inverted.secondary', - backgroundColor: 'light', + backgroundColor: 'default', id: 'testing-id', }; const expectedOutput: BoxProps = { color: 'inverted.secondary', - backgroundColor: 'light', + backgroundColor: 'default', }; const result = pickCSSProperties(inputObject); @@ -46,7 +46,7 @@ describe('pickNonCSSProps', () => { it('should pick only the non-CSS props from the input object', () => { const inputObject: BoxProps = { color: 'inverted.secondary', - backgroundColor: 'light', + backgroundColor: 'default', id: 'testing-id', }; @@ -62,7 +62,7 @@ describe('pickNonCSSProps', () => { it('should return an empty object if all props are CSS props', () => { const inputObject: BoxProps = { color: 'inverted.secondary', - backgroundColor: 'light', + backgroundColor: 'default', }; const expectedOutput: BoxProps = {}; diff --git a/src/components/Box/__snapshots__/Box.stories.storyshot b/src/components/Box/__snapshots__/Box.stories.storyshot index 36162a440..013fc8b68 100644 --- a/src/components/Box/__snapshots__/Box.stories.storyshot +++ b/src/components/Box/__snapshots__/Box.stories.storyshot @@ -18,7 +18,7 @@ exports[`Storyshots Design System/Box Box Background 1`] = ` .emotion-2 { color: #ffffff; - background-color: #212332; + background-color: #1B214F; margin-bottom: 0.75rem; } diff --git a/src/components/Button/Button.tokens.ts b/src/components/Button/Button.tokens.ts index ef1775177..31326ebb4 100644 --- a/src/components/Button/Button.tokens.ts +++ b/src/components/Button/Button.tokens.ts @@ -10,13 +10,13 @@ export type TextButtonTokens = DotKeys; export type IconButtonTokens = DotKeys; export const getButtonTokens = (theme: Theme) => { - return getComponentTokens(button, theme); + return getComponentTokens(button, theme); }; export const getTextButtonTokens = (theme: Theme) => { - return getComponentTokens(textButton, theme); + return getComponentTokens(textButton, theme); }; export const getIconButtonTokens = (theme: Theme) => { - return getComponentTokens(iconButton, theme); + return getComponentTokens(iconButton, theme); }; diff --git a/src/components/DatePicker/Day/__snapshots__/Day.test.tsx.snap b/src/components/DatePicker/Day/__snapshots__/Day.test.tsx.snap index 879a3da69..a0118324b 100644 --- a/src/components/DatePicker/Day/__snapshots__/Day.test.tsx.snap +++ b/src/components/DatePicker/Day/__snapshots__/Day.test.tsx.snap @@ -6,7 +6,6 @@ exports[`Day should render correctly 1`] = ` text-align: center; cursor: pointer; position: relative; - color: #212332; width: 2.25rem; font-weight: bold; opacity: 1; @@ -27,7 +26,6 @@ exports[`Day should render correctly 1`] = ` border-radius: 6.25rem; width: 2.25rem; height: 2.25rem; - color: #212332; box-sizing: border-box; display: -webkit-box; display: -webkit-flex; @@ -54,7 +52,6 @@ exports[`Day should render correctly 1`] = ` text-align: center; cursor: pointer; position: relative; - color: #212332; width: 2.25rem; font-weight: bold; opacity: 1; @@ -75,7 +72,6 @@ exports[`Day should render correctly 1`] = ` border-radius: 6.25rem; width: 2.25rem; height: 2.25rem; - color: #212332; box-sizing: border-box; display: -webkit-box; display: -webkit-flex; @@ -127,7 +123,6 @@ exports[`Day should render disabled correctly 1`] = ` text-align: center; cursor: pointer; position: relative; - color: #212332; width: 2.25rem; font-weight: bold; opacity: 0.5; @@ -148,7 +143,6 @@ exports[`Day should render disabled correctly 1`] = ` border-radius: 6.25rem; width: 2.25rem; height: 2.25rem; - color: #212332; box-sizing: border-box; display: -webkit-box; display: -webkit-flex; @@ -170,7 +164,6 @@ exports[`Day should render disabled correctly 1`] = ` text-align: center; cursor: pointer; position: relative; - color: #212332; width: 2.25rem; font-weight: bold; opacity: 0.5; @@ -191,7 +184,6 @@ exports[`Day should render disabled correctly 1`] = ` border-radius: 6.25rem; width: 2.25rem; height: 2.25rem; - color: #212332; box-sizing: border-box; display: -webkit-box; display: -webkit-flex; @@ -238,7 +230,6 @@ exports[`Day should render isFirst, isLast correctly 1`] = ` text-align: center; cursor: pointer; position: relative; - color: #212332; width: 2.25rem; font-weight: bold; opacity: 1; @@ -275,7 +266,6 @@ exports[`Day should render isFirst, isLast correctly 1`] = ` border-radius: 6.25rem; width: 2.25rem; height: 2.25rem; - color: #212332; box-sizing: border-box; display: -webkit-box; display: -webkit-flex; @@ -302,7 +292,6 @@ exports[`Day should render isFirst, isLast correctly 1`] = ` text-align: center; cursor: pointer; position: relative; - color: #212332; width: 2.25rem; font-weight: bold; opacity: 1; @@ -339,7 +328,6 @@ exports[`Day should render isFirst, isLast correctly 1`] = ` border-radius: 6.25rem; width: 2.25rem; height: 2.25rem; - color: #212332; box-sizing: border-box; display: -webkit-box; display: -webkit-flex; @@ -391,7 +379,6 @@ exports[`Day should render isFirst, isLast correctly 2`] = ` text-align: center; cursor: pointer; position: relative; - color: #212332; width: 2.25rem; font-weight: bold; opacity: 1; @@ -428,7 +415,6 @@ exports[`Day should render isFirst, isLast correctly 2`] = ` border-radius: 6.25rem; width: 2.25rem; height: 2.25rem; - color: #212332; box-sizing: border-box; display: -webkit-box; display: -webkit-flex; @@ -455,7 +441,6 @@ exports[`Day should render isFirst, isLast correctly 2`] = ` text-align: center; cursor: pointer; position: relative; - color: #212332; width: 2.25rem; font-weight: bold; opacity: 1; @@ -492,7 +477,6 @@ exports[`Day should render isFirst, isLast correctly 2`] = ` border-radius: 6.25rem; width: 2.25rem; height: 2.25rem; - color: #212332; box-sizing: border-box; display: -webkit-box; display: -webkit-flex; diff --git a/src/components/DatePicker/Month/__snapshots__/Month.test.tsx.snap b/src/components/DatePicker/Month/__snapshots__/Month.test.tsx.snap index 4fbde7531..529579968 100644 --- a/src/components/DatePicker/Month/__snapshots__/Month.test.tsx.snap +++ b/src/components/DatePicker/Month/__snapshots__/Month.test.tsx.snap @@ -25,7 +25,6 @@ exports[`Month should render correctly 1`] = ` -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; - color: #54587F; width: 2.25rem; height: 2.25rem; font-size: 0.875rem; @@ -52,7 +51,6 @@ exports[`Month should render correctly 1`] = ` text-align: center; cursor: pointer; position: relative; - color: #212332; width: 2.25rem; opacity: 1; } @@ -71,7 +69,6 @@ exports[`Month should render correctly 1`] = ` border: 0.0625rem solid rgba(84,94,255,0); width: 2.25rem; height: 2.25rem; - color: #212332; box-sizing: border-box; display: -webkit-box; display: -webkit-flex; @@ -98,7 +95,6 @@ exports[`Month should render correctly 1`] = ` text-align: center; cursor: pointer; position: relative; - color: #212332; width: 2.25rem; font-weight: bold; opacity: 1; @@ -119,7 +115,6 @@ exports[`Month should render correctly 1`] = ` border-radius: 6.25rem; width: 2.25rem; height: 2.25rem; - color: #212332; box-sizing: border-box; display: -webkit-box; display: -webkit-flex; @@ -211,7 +206,6 @@ exports[`Month should render correctly 1`] = ` text-align: center; cursor: pointer; position: relative; - color: #212332; width: 2.25rem; opacity: 1; background: #F5F5FF; @@ -231,7 +225,6 @@ exports[`Month should render correctly 1`] = ` border: 0.0625rem solid rgba(84,94,255,0); width: 2.25rem; height: 2.25rem; - color: #212332; box-sizing: border-box; display: -webkit-box; display: -webkit-flex; @@ -277,7 +270,6 @@ exports[`Month should render correctly 1`] = ` -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; - color: #54587F; width: 2.25rem; height: 2.25rem; font-size: 0.875rem; @@ -304,7 +296,6 @@ exports[`Month should render correctly 1`] = ` text-align: center; cursor: pointer; position: relative; - color: #212332; width: 2.25rem; opacity: 1; } @@ -323,7 +314,6 @@ exports[`Month should render correctly 1`] = ` border: 0.0625rem solid rgba(84,94,255,0); width: 2.25rem; height: 2.25rem; - color: #212332; box-sizing: border-box; display: -webkit-box; display: -webkit-flex; @@ -350,7 +340,6 @@ exports[`Month should render correctly 1`] = ` text-align: center; cursor: pointer; position: relative; - color: #212332; width: 2.25rem; font-weight: bold; opacity: 1; @@ -371,7 +360,6 @@ exports[`Month should render correctly 1`] = ` border-radius: 6.25rem; width: 2.25rem; height: 2.25rem; - color: #212332; box-sizing: border-box; display: -webkit-box; display: -webkit-flex; @@ -463,7 +451,6 @@ exports[`Month should render correctly 1`] = ` text-align: center; cursor: pointer; position: relative; - color: #212332; width: 2.25rem; opacity: 1; background: #F5F5FF; @@ -483,7 +470,6 @@ exports[`Month should render correctly 1`] = ` border: 0.0625rem solid rgba(84,94,255,0); width: 2.25rem; height: 2.25rem; - color: #212332; box-sizing: border-box; display: -webkit-box; display: -webkit-flex; diff --git a/src/components/DatePicker/OverlayComponent/__snapshots__/OverlayComponent.test.tsx.snap b/src/components/DatePicker/OverlayComponent/__snapshots__/OverlayComponent.test.tsx.snap index a137257f1..8e837f6b6 100644 --- a/src/components/DatePicker/OverlayComponent/__snapshots__/OverlayComponent.test.tsx.snap +++ b/src/components/DatePicker/OverlayComponent/__snapshots__/OverlayComponent.test.tsx.snap @@ -277,7 +277,6 @@ exports[`OverlayComponent should render correctly 1`] = ` -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; - color: #54587F; width: 2.25rem; height: 2.25rem; font-size: 0.875rem; @@ -304,7 +303,6 @@ exports[`OverlayComponent should render correctly 1`] = ` text-align: center; cursor: pointer; position: relative; - color: #212332; width: 2.25rem; opacity: 1; } @@ -323,7 +321,6 @@ exports[`OverlayComponent should render correctly 1`] = ` border: 0.0625rem solid rgba(84,94,255,0); width: 2.25rem; height: 2.25rem; - color: #212332; box-sizing: border-box; display: -webkit-box; display: -webkit-flex; @@ -350,7 +347,6 @@ exports[`OverlayComponent should render correctly 1`] = ` text-align: center; cursor: pointer; position: relative; - color: #212332; width: 2.25rem; font-weight: bold; opacity: 1; @@ -371,7 +367,6 @@ exports[`OverlayComponent should render correctly 1`] = ` border-radius: 6.25rem; width: 2.25rem; height: 2.25rem; - color: #212332; box-sizing: border-box; display: -webkit-box; display: -webkit-flex; @@ -463,7 +458,6 @@ exports[`OverlayComponent should render correctly 1`] = ` text-align: center; cursor: pointer; position: relative; - color: #212332; width: 2.25rem; opacity: 1; background: #F5F5FF; @@ -483,7 +477,6 @@ exports[`OverlayComponent should render correctly 1`] = ` border: 0.0625rem solid rgba(84,94,255,0); width: 2.25rem; height: 2.25rem; - color: #212332; box-sizing: border-box; display: -webkit-box; display: -webkit-flex; @@ -833,7 +826,6 @@ exports[`OverlayComponent should render correctly 1`] = ` -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; - color: #54587F; width: 2.25rem; height: 2.25rem; font-size: 0.875rem; @@ -860,7 +852,6 @@ exports[`OverlayComponent should render correctly 1`] = ` text-align: center; cursor: pointer; position: relative; - color: #212332; width: 2.25rem; opacity: 1; } @@ -879,7 +870,6 @@ exports[`OverlayComponent should render correctly 1`] = ` border: 0.0625rem solid rgba(84,94,255,0); width: 2.25rem; height: 2.25rem; - color: #212332; box-sizing: border-box; display: -webkit-box; display: -webkit-flex; @@ -906,7 +896,6 @@ exports[`OverlayComponent should render correctly 1`] = ` text-align: center; cursor: pointer; position: relative; - color: #212332; width: 2.25rem; font-weight: bold; opacity: 1; @@ -927,7 +916,6 @@ exports[`OverlayComponent should render correctly 1`] = ` border-radius: 6.25rem; width: 2.25rem; height: 2.25rem; - color: #212332; box-sizing: border-box; display: -webkit-box; display: -webkit-flex; @@ -1019,7 +1007,6 @@ exports[`OverlayComponent should render correctly 1`] = ` text-align: center; cursor: pointer; position: relative; - color: #212332; width: 2.25rem; opacity: 1; background: #F5F5FF; @@ -1039,7 +1026,6 @@ exports[`OverlayComponent should render correctly 1`] = ` border: 0.0625rem solid rgba(84,94,255,0); width: 2.25rem; height: 2.25rem; - color: #212332; box-sizing: border-box; display: -webkit-box; display: -webkit-flex; @@ -2082,7 +2068,6 @@ exports[`OverlayComponent should render datepicker correctly 1`] = ` -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; - color: #54587F; width: 2.25rem; height: 2.25rem; font-size: 0.875rem; @@ -2109,7 +2094,6 @@ exports[`OverlayComponent should render datepicker correctly 1`] = ` text-align: center; cursor: pointer; position: relative; - color: #212332; width: 2.25rem; opacity: 1; } @@ -2128,7 +2112,6 @@ exports[`OverlayComponent should render datepicker correctly 1`] = ` border: 0.0625rem solid rgba(84,94,255,0); width: 2.25rem; height: 2.25rem; - color: #212332; box-sizing: border-box; display: -webkit-box; display: -webkit-flex; @@ -2155,7 +2138,6 @@ exports[`OverlayComponent should render datepicker correctly 1`] = ` text-align: center; cursor: pointer; position: relative; - color: #212332; width: 2.25rem; font-weight: bold; opacity: 1; @@ -2176,7 +2158,6 @@ exports[`OverlayComponent should render datepicker correctly 1`] = ` border-radius: 6.25rem; width: 2.25rem; height: 2.25rem; - color: #212332; box-sizing: border-box; display: -webkit-box; display: -webkit-flex; @@ -2268,7 +2249,6 @@ exports[`OverlayComponent should render datepicker correctly 1`] = ` text-align: center; cursor: pointer; position: relative; - color: #212332; width: 2.25rem; opacity: 1; background: #F5F5FF; @@ -2288,7 +2268,6 @@ exports[`OverlayComponent should render datepicker correctly 1`] = ` border: 0.0625rem solid rgba(84,94,255,0); width: 2.25rem; height: 2.25rem; - color: #212332; box-sizing: border-box; display: -webkit-box; display: -webkit-flex; @@ -2692,7 +2671,6 @@ exports[`OverlayComponent should render datepicker correctly 1`] = ` -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; - color: #54587F; width: 2.25rem; height: 2.25rem; font-size: 0.875rem; @@ -2719,7 +2697,6 @@ exports[`OverlayComponent should render datepicker correctly 1`] = ` text-align: center; cursor: pointer; position: relative; - color: #212332; width: 2.25rem; opacity: 1; } @@ -2738,7 +2715,6 @@ exports[`OverlayComponent should render datepicker correctly 1`] = ` border: 0.0625rem solid rgba(84,94,255,0); width: 2.25rem; height: 2.25rem; - color: #212332; box-sizing: border-box; display: -webkit-box; display: -webkit-flex; @@ -2765,7 +2741,6 @@ exports[`OverlayComponent should render datepicker correctly 1`] = ` text-align: center; cursor: pointer; position: relative; - color: #212332; width: 2.25rem; font-weight: bold; opacity: 1; @@ -2786,7 +2761,6 @@ exports[`OverlayComponent should render datepicker correctly 1`] = ` border-radius: 6.25rem; width: 2.25rem; height: 2.25rem; - color: #212332; box-sizing: border-box; display: -webkit-box; display: -webkit-flex; @@ -2878,7 +2852,6 @@ exports[`OverlayComponent should render datepicker correctly 1`] = ` text-align: center; cursor: pointer; position: relative; - color: #212332; width: 2.25rem; opacity: 1; background: #F5F5FF; @@ -2898,7 +2871,6 @@ exports[`OverlayComponent should render datepicker correctly 1`] = ` border: 0.0625rem solid rgba(84,94,255,0); width: 2.25rem; height: 2.25rem; - color: #212332; box-sizing: border-box; display: -webkit-box; display: -webkit-flex; diff --git a/src/components/DatePicker/OverlayComponent/components/MonthWrapper/__snapshots__/MonthWrapper.test.tsx.snap b/src/components/DatePicker/OverlayComponent/components/MonthWrapper/__snapshots__/MonthWrapper.test.tsx.snap index 9cefe34f6..f74c28227 100644 --- a/src/components/DatePicker/OverlayComponent/components/MonthWrapper/__snapshots__/MonthWrapper.test.tsx.snap +++ b/src/components/DatePicker/OverlayComponent/components/MonthWrapper/__snapshots__/MonthWrapper.test.tsx.snap @@ -232,7 +232,6 @@ exports[`MonthWrapper should render correctly 1`] = ` -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; - color: #54587F; width: 2.25rem; height: 2.25rem; font-size: 0.875rem; @@ -259,7 +258,6 @@ exports[`MonthWrapper should render correctly 1`] = ` text-align: center; cursor: pointer; position: relative; - color: #212332; width: 2.25rem; opacity: 1; } @@ -278,7 +276,6 @@ exports[`MonthWrapper should render correctly 1`] = ` border: 0.0625rem solid rgba(84,94,255,0); width: 2.25rem; height: 2.25rem; - color: #212332; box-sizing: border-box; display: -webkit-box; display: -webkit-flex; @@ -305,7 +302,6 @@ exports[`MonthWrapper should render correctly 1`] = ` text-align: center; cursor: pointer; position: relative; - color: #212332; width: 2.25rem; font-weight: bold; opacity: 1; @@ -326,7 +322,6 @@ exports[`MonthWrapper should render correctly 1`] = ` border-radius: 6.25rem; width: 2.25rem; height: 2.25rem; - color: #212332; box-sizing: border-box; display: -webkit-box; display: -webkit-flex; @@ -418,7 +413,6 @@ exports[`MonthWrapper should render correctly 1`] = ` text-align: center; cursor: pointer; position: relative; - color: #212332; width: 2.25rem; opacity: 1; background: #F5F5FF; @@ -438,7 +432,6 @@ exports[`MonthWrapper should render correctly 1`] = ` border: 0.0625rem solid rgba(84,94,255,0); width: 2.25rem; height: 2.25rem; - color: #212332; box-sizing: border-box; display: -webkit-box; display: -webkit-flex; @@ -691,7 +684,6 @@ exports[`MonthWrapper should render correctly 1`] = ` -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; - color: #54587F; width: 2.25rem; height: 2.25rem; font-size: 0.875rem; @@ -718,7 +710,6 @@ exports[`MonthWrapper should render correctly 1`] = ` text-align: center; cursor: pointer; position: relative; - color: #212332; width: 2.25rem; opacity: 1; } @@ -737,7 +728,6 @@ exports[`MonthWrapper should render correctly 1`] = ` border: 0.0625rem solid rgba(84,94,255,0); width: 2.25rem; height: 2.25rem; - color: #212332; box-sizing: border-box; display: -webkit-box; display: -webkit-flex; @@ -764,7 +754,6 @@ exports[`MonthWrapper should render correctly 1`] = ` text-align: center; cursor: pointer; position: relative; - color: #212332; width: 2.25rem; font-weight: bold; opacity: 1; @@ -785,7 +774,6 @@ exports[`MonthWrapper should render correctly 1`] = ` border-radius: 6.25rem; width: 2.25rem; height: 2.25rem; - color: #212332; box-sizing: border-box; display: -webkit-box; display: -webkit-flex; @@ -877,7 +865,6 @@ exports[`MonthWrapper should render correctly 1`] = ` text-align: center; cursor: pointer; position: relative; - color: #212332; width: 2.25rem; opacity: 1; background: #F5F5FF; @@ -897,7 +884,6 @@ exports[`MonthWrapper should render correctly 1`] = ` border: 0.0625rem solid rgba(84,94,255,0); width: 2.25rem; height: 2.25rem; - color: #212332; box-sizing: border-box; display: -webkit-box; display: -webkit-flex; diff --git a/src/components/DatePicker/__snapshots__/DatePicker.stories.storyshot b/src/components/DatePicker/__snapshots__/DatePicker.stories.storyshot index 03921ed2b..ee77ba148 100644 --- a/src/components/DatePicker/__snapshots__/DatePicker.stories.storyshot +++ b/src/components/DatePicker/__snapshots__/DatePicker.stories.storyshot @@ -118,7 +118,7 @@ exports[`Storyshots Design System/DatePicker DatePicker 1`] = ` letter-spacing: 0.015625rem; background: transparent; border: none; - color: #212332; + color: #1B214F; display: block; position: relative; top: 0.4375rem; @@ -258,7 +258,6 @@ exports[`Storyshots Design System/DatePicker DatePicker 1`] = ` } .emotion-10:focus-visible { - background: rgba(84,94,255,0.06); border-radius: 6.25rem; } @@ -279,13 +278,13 @@ exports[`Storyshots Design System/DatePicker DatePicker 1`] = ` } .emotion-12 { - fill: #54587F; + fill: #686BB3; width: 1.25rem; height: 1.25rem; } .emotion-12 path { - fill: #54587F; + fill: #686BB3; }
-### Types (light) +### Types (default) General use of Typography based on available light types - + Primary Secondary diff --git a/src/components/Typography/Typography.style.ts b/src/components/Typography/Typography.style.ts index df74b00ae..1038e8706 100644 --- a/src/components/Typography/Typography.style.ts +++ b/src/components/Typography/Typography.style.ts @@ -62,7 +62,7 @@ export const typographyWrapper = body04, }; - const textColorCategory = isInverted ? 'inverted' : 'light'; + const textColorCategory = isInverted ? 'inverted' : 'default'; const textColor = `textColor.${textColorCategory}.${type}` as DotKeys; return css` diff --git a/src/components/Typography/__snapshots__/Typography.stories.storyshot b/src/components/Typography/__snapshots__/Typography.stories.storyshot index a42e0931f..d0a395ddb 100644 --- a/src/components/Typography/__snapshots__/Typography.stories.storyshot +++ b/src/components/Typography/__snapshots__/Typography.stories.storyshot @@ -36,7 +36,7 @@ exports[`Storyshots Design System/Typography As specific element 1`] = ` line-height: 2.5rem; font-size: 2rem; letter-spacing: 0rem; - color: #212332; + color: #1B214F; } .emotion-4 { @@ -45,7 +45,7 @@ exports[`Storyshots Design System/Typography As specific element 1`] = ` line-height: 2.25rem; font-size: 1.75rem; letter-spacing: 0rem; - color: #212332; + color: #1B214F; } .emotion-5 { @@ -54,7 +54,7 @@ exports[`Storyshots Design System/Typography As specific element 1`] = ` line-height: 2rem; font-size: 1.5rem; letter-spacing: 0rem; - color: #212332; + color: #1B214F; } .emotion-6 { @@ -63,7 +63,7 @@ exports[`Storyshots Design System/Typography As specific element 1`] = ` line-height: 1.75rem; font-size: 1.25rem; letter-spacing: 0rem; - color: #212332; + color: #1B214F; } .emotion-7 { @@ -72,7 +72,7 @@ exports[`Storyshots Design System/Typography As specific element 1`] = ` line-height: 1.5rem; font-size: 1.125rem; letter-spacing: 0rem; - color: #212332; + color: #1B214F; } .emotion-8 { @@ -81,7 +81,7 @@ exports[`Storyshots Design System/Typography As specific element 1`] = ` line-height: 1.375rem; font-size: 1rem; letter-spacing: 0.00625rem; - color: #212332; + color: #1B214F; } .emotion-9 { @@ -90,7 +90,7 @@ exports[`Storyshots Design System/Typography As specific element 1`] = ` line-height: 1.25rem; font-size: 0.875rem; letter-spacing: 0.015625rem; - color: #212332; + color: #1B214F; } .emotion-10 { @@ -99,7 +99,7 @@ exports[`Storyshots Design System/Typography As specific element 1`] = ` line-height: 1rem; font-size: 0.75rem; letter-spacing: 0.00625rem; - color: #212332; + color: #1B214F; } .emotion-11 { @@ -108,7 +108,7 @@ exports[`Storyshots Design System/Typography As specific element 1`] = ` line-height: 1.375rem; font-size: 1rem; letter-spacing: 0.00625rem; - color: #212332; + color: #1B214F; } .emotion-12 { @@ -117,7 +117,7 @@ exports[`Storyshots Design System/Typography As specific element 1`] = ` line-height: 1.25rem; font-size: 0.875rem; letter-spacing: 0.015625rem; - color: #212332; + color: #1B214F; } .emotion-13 { @@ -126,7 +126,7 @@ exports[`Storyshots Design System/Typography As specific element 1`] = ` line-height: 1rem; font-size: 0.75rem; letter-spacing: 0.015625rem; - color: #212332; + color: #1B214F; } .emotion-14 { @@ -135,7 +135,7 @@ exports[`Storyshots Design System/Typography As specific element 1`] = ` line-height: 1.375rem; font-size: 1rem; letter-spacing: 0.015625rem; - color: #212332; + color: #1B214F; } .emotion-15 { @@ -144,7 +144,7 @@ exports[`Storyshots Design System/Typography As specific element 1`] = ` line-height: 1.25rem; font-size: 0.875rem; letter-spacing: 0.015625rem; - color: #212332; + color: #1B214F; } .emotion-16 { @@ -153,7 +153,7 @@ exports[`Storyshots Design System/Typography As specific element 1`] = ` line-height: 1rem; font-size: 0.75rem; letter-spacing: 0.015625rem; - color: #212332; + color: #1B214F; }
`; -exports[`Storyshots Design System/Typography Types (inverted) 1`] = ` +exports[`Storyshots Design System/Typography Types (default) 1`] = ` .emotion-0 { -webkit-flex-direction: column; -ms-flex-direction: column; @@ -703,7 +703,6 @@ exports[`Storyshots Design System/Typography Types (inverted) 1`] = ` } .emotion-2 { - background: #212332; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -723,7 +722,7 @@ exports[`Storyshots Design System/Typography Types (inverted) 1`] = ` line-height: 1.375rem; font-size: 1rem; letter-spacing: 0.015625rem; - color: #ffffff; + color: #1B214F; } .emotion-4 { @@ -732,7 +731,7 @@ exports[`Storyshots Design System/Typography Types (inverted) 1`] = ` line-height: 1.375rem; font-size: 1rem; letter-spacing: 0.015625rem; - color: #b9cdfc; + color: #686BB3; } .emotion-5 { @@ -741,7 +740,7 @@ exports[`Storyshots Design System/Typography Types (inverted) 1`] = ` line-height: 1.375rem; font-size: 1rem; letter-spacing: 0.015625rem; - color: #FFB8D1; + color: #CB205D; } .emotion-6 { @@ -750,7 +749,7 @@ exports[`Storyshots Design System/Typography Types (inverted) 1`] = ` line-height: 1.375rem; font-size: 1rem; letter-spacing: 0.015625rem; - color: #1de9b6; + color: #1552DD; } .emotion-7 { @@ -759,7 +758,7 @@ exports[`Storyshots Design System/Typography Types (inverted) 1`] = ` line-height: 1.375rem; font-size: 1rem; letter-spacing: 0.015625rem; - color: #dbc1ff; + color: #6c28cc; }
`; -exports[`Storyshots Design System/Typography Types (light) 1`] = ` +exports[`Storyshots Design System/Typography Types (inverted) 1`] = ` .emotion-0 { -webkit-flex-direction: column; -ms-flex-direction: column; @@ -858,6 +857,7 @@ exports[`Storyshots Design System/Typography Types (light) 1`] = ` } .emotion-2 { + background: #1B214F; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -877,7 +877,7 @@ exports[`Storyshots Design System/Typography Types (light) 1`] = ` line-height: 1.375rem; font-size: 1rem; letter-spacing: 0.015625rem; - color: #212332; + color: #ffffff; } .emotion-4 { @@ -886,7 +886,7 @@ exports[`Storyshots Design System/Typography Types (light) 1`] = ` line-height: 1.375rem; font-size: 1rem; letter-spacing: 0.015625rem; - color: #54587F; + color: #b9cdfc; } .emotion-5 { @@ -895,7 +895,7 @@ exports[`Storyshots Design System/Typography Types (light) 1`] = ` line-height: 1.375rem; font-size: 1rem; letter-spacing: 0.015625rem; - color: #CB205D; + color: #FFB8D1; } .emotion-6 { @@ -904,7 +904,7 @@ exports[`Storyshots Design System/Typography Types (light) 1`] = ` line-height: 1.375rem; font-size: 1rem; letter-spacing: 0.015625rem; - color: #1552DD; + color: #1de9b6; } .emotion-7 { @@ -913,7 +913,7 @@ exports[`Storyshots Design System/Typography Types (light) 1`] = ` line-height: 1.375rem; font-size: 1rem; letter-spacing: 0.015625rem; - color: #6c28cc; + color: #dbc1ff; }
= ({ type = 'globals' }) => { : ['lightest', 'light', 'main', 'dark', 'darkest']; const colorKeys = isGlobal - ? ['blue', 'tinted', 'transparent', 'teal', 'purple', 'orange', 'red', 'neutral', 'gradient'] + ? [ + 'blue', + 'tinted', + 'transparent.default', + 'transparent.alt', + 'teal', + 'purple', + 'orange', + 'red', + 'neutral', + 'gradient', + ] : ['primary', 'secondary', 'tertiary', 'inverted', 'warning', 'upsell', 'error']; const colorsObj = isGlobal ? globalColorsFigma : colorsFigma.palette; - // eslint-disable-next-line @typescript-eslint/ban-types - const colors = map(pick(colorsObj as Object, colorKeys), (value, key) => ({ - key, - ...value, - })); + const colors = colorKeys.map((val) => { + return { key: val, ...get(colorsObj, val) }; + }); + + const renderDescription = useCallback( + (key: string, state: string) => { + const colorKey = key.split('.'); + colorKey.push(state); + + return ( +
+ + {get(colorsObj, colorKey).description} + + + ${`palette.${key}.${state}`} + + {' = '} + + {get(colorsObj, colorKey).value} + +
+ ); + }, + [colorsObj] + ); return (
@@ -55,7 +87,12 @@ const TokenColorsShowcase: FC = ({ type = 'globals' }) => {
{states - .filter((state) => get(colorsObj, [type.key, state])) + .filter((state) => { + const colorKey = type.key.split('.'); + colorKey.push(state); + + return get(colorsObj, colorKey); + }) .map((state) => (
= ({ type = 'globals' }) => { />
{state} -
- - {colorsObj[type.key][state].description} - - - ${`palette.${type.key}.${state}`} - - {' = '} - - {colorsObj[type.key][state].value} - -
+
{renderDescription(type.key, state)}
))} diff --git a/src/theme/globals/constants/colors.ts b/src/theme/globals/constants/colors.ts index 0663fa613..d7f26217e 100644 --- a/src/theme/globals/constants/colors.ts +++ b/src/theme/globals/constants/colors.ts @@ -5,7 +5,11 @@ const colors = { type: 'color', }, '2': { - value: 'linear-gradient(90deg, #1248C4 0%, #5C28CC 100%)', + value: 'linear-gradient(90deg, #B9CDFC 0%, #B9C0FF 100%)', + type: 'color', + }, + '3': { + value: 'linear-gradient(-90deg, #1B214F 0%, #020D25 100%)', type: 'color', }, }, @@ -159,39 +163,68 @@ const colors = { type: 'color', }, '3': { - value: '#54587F', + value: '#686BB3', type: 'color', description: 'AA compliant against white', }, '4': { - value: '#212332', - type: 'color', - description: 'AA compliant against white', - }, - }, - transparent: { - '1': { - value: 'rgba(84,94,255,0)', - type: 'color', - }, - '2': { - value: 'rgba(84,94,255,0.06)', - type: 'color', - }, - '3': { - value: 'rgba(84,94,255,0.14)', - type: 'color', - }, - '4': { - value: 'rgba(84,94,255,0.24)', + value: '#1B214F', type: 'color', }, '5': { - value: 'rgba(26,30,95,0.40)', + value: '#111530', type: 'color', description: 'AA compliant against white', }, }, + transparent: { + default: { + '1': { + value: 'rgba(84,94,255,0)', + type: 'color', + }, + '2': { + value: 'rgba(84,94,255,0.06)', + type: 'color', + }, + '3': { + value: 'rgba(84,94,255,0.14)', + type: 'color', + }, + '4': { + value: 'rgba(84,94,255,0.24)', + type: 'color', + }, + '5': { + value: 'rgba(26,30,95,0.40)', + type: 'color', + description: 'AA compliant against white', + }, + }, + alt: { + '1': { + value: 'rgba(255,255,255,0)', + type: 'color', + }, + '2': { + value: 'rgba(255,255,255,0.06)', + type: 'color', + }, + '3': { + value: 'rgba(255,255,255,0.14)', + type: 'color', + }, + '4': { + value: 'rgba(255,255,255,0.24)', + type: 'color', + }, + '5': { + value: 'rgba(255,255,255,0.40)', + type: 'color', + description: 'AA compliant against white', + }, + }, + }, } as const; export default colors; diff --git a/src/theme/tokens/components/variables/avatar.ts b/src/theme/tokens/components/variables/avatar.ts index a7e08a0ff..3d3400645 100644 --- a/src/theme/tokens/components/variables/avatar.ts +++ b/src/theme/tokens/components/variables/avatar.ts @@ -92,7 +92,7 @@ const avatar = { description: 'Sets size for small avatar', }, '3': { - value: '{sizing.9}', + value: '{sizing.8}', type: 'sizing', description: 'Sets size for medium avatar', }, diff --git a/src/theme/tokens/components/variables/button.ts b/src/theme/tokens/components/variables/button.ts index 76505c350..7747909b6 100644 --- a/src/theme/tokens/components/variables/button.ts +++ b/src/theme/tokens/components/variables/button.ts @@ -43,7 +43,7 @@ const button = { }, textColor: { type: 'color', - value: '{sem.colors.textColor.light.active}', + value: '{sem.colors.textColor.default.active}', description: 'Sets text and icon color for secondary button', }, }, @@ -66,7 +66,7 @@ const button = { }, }, textColor: { - value: '{sem.colors.textColor.light.active}', + value: '{sem.colors.textColor.default.active}', type: 'color', description: 'Sets text and icon color tertiary button', }, @@ -115,7 +115,7 @@ const button = { }, textColor: { type: 'color', - value: '{sem.colors.textColor.light.error}', + value: '{sem.colors.textColor.default.error}', description: 'Sets text and icon color for danger button', }, }, @@ -139,7 +139,7 @@ const button = { }, textColor: { type: 'color', - value: '{sem.colors.textColor.light.primary}', + value: '{sem.colors.textColor.default.primary}', description: 'Sets text and icon color for inverted button', }, }, diff --git a/src/theme/tokens/components/variables/field.ts b/src/theme/tokens/components/variables/field.ts index e66c57515..650f3a377 100644 --- a/src/theme/tokens/components/variables/field.ts +++ b/src/theme/tokens/components/variables/field.ts @@ -1,67 +1,4 @@ const field = { - inputChip: { - height: { - value: '{sizing.5}', - type: 'sizing', - description: 'Sets fixed height for _block input chip', - }, - backgroundColor: { - default: { - value: '{sem.colors.palette.secondary.lightest}', - type: 'color', - description: 'Sets backgroundColor for block input chip (default state)', - }, - focused: { - value: '{sem.colors.palette.secondary.light}', - type: 'color', - description: 'Sets backgroundColor for block input chip (focused state)', - }, - }, - borderColor: { - default: { - value: '{sem.colors.borderColor.interactive.default}', - type: 'color', - description: 'Sets borderColor for block input chip (default state)', - }, - focused: { - value: '{sem.colors.borderColor.interactive.active}', - type: 'color', - description: 'Sets borderColor for block input chip (focused state)', - }, - }, - borderRadius: { - value: '{borderRadius.1}', - type: 'borderRadius', - description: 'Sets borderRadius for block input chip', - }, - textColor: { - value: '{sem.colors.textColor.light.secondary}', - type: 'color', - description: 'Sets textColor for block input chip', - }, - borderWidth: { - '1': { - value: '{borderWidth.1}', - type: 'borderWidth', - description: 'Sets borderWidth for block input chip (default state)', - }, - '2': { - value: '{borderWidth.2}', - type: 'borderWidth', - description: 'Sets borderWidth for block input chip (focused state)', - }, - }, - label: { - value: '{sem.typography.normal.body02}', - type: 'typography', - description: 'Sets text for block input chip', - }, - paddingHorizontal: { - value: '{spacing.4}', - type: 'spacing', - description: 'Sets left and right padding for _block input chip', - }, - }, addOn: { height: { normal: { @@ -76,7 +13,7 @@ const field = { }, }, iconColor: { - value: '{sem.colors.textColor.light.secondary}', + value: '{sem.colors.textColor.default.secondary}', type: 'color', description: 'Sets color for _block addOn icon', }, @@ -107,7 +44,7 @@ const field = { }, }, }, - increment: { + stepper: { backgroundColor: { default: { value: '{sem.colors.palette.tertiary.lightest}', @@ -126,25 +63,17 @@ const field = { type: 'spacing', description: 'sets vertical padding between an input field container and its hint (if used)', }, - placeholder: { - value: '{sem.typography.normal.body02}', - type: 'typography', - description: 'Sets text for input field placeholder label', - }, - input: { - value: '{sem.typography.normal.body02}', - type: 'typography', - description: 'Sets text for field input', - }, - label: { - value: '{sem.typography.normal.label03}', - type: 'typography', - description: 'Sets text for input field label', - }, - labelCompact: { - value: '{sem.typography.normal.body03}', - type: 'typography', - description: 'Sets text for compact input field label', + normal: { + input: { + value: '{sem.typography.normal.body02}', + type: 'typography', + description: 'Sets text for field prefix/input/suffix/placeholder', + }, + label: { + value: '{sem.typography.normal.label03}', + type: 'typography', + description: 'Sets text for input field label', + }, }, hint: { value: '{sem.typography.normal.body03}', @@ -160,6 +89,11 @@ const field = { description: 'Sets text color for a field hint', }, description: 'Sets text for input field hint', + iconSize: { + value: '{sem.icon.size.2}', + type: 'sizing', + description: 'Sets icon size for error hint icon in fields', + }, }, backgroundColor: { default: { @@ -217,40 +151,40 @@ const field = { }, textColor: { inputColor: { - value: '{sem.colors.textColor.light.primary}', + value: '{sem.colors.textColor.default.primary}', type: 'color', description: 'Sets textColor for a field input', }, inputColorAlt: { type: 'color', - value: '{sem.colors.textColor.light.secondary}', + value: '{sem.colors.textColor.default.secondary}', description: 'Sets textColor for field label, hint, text placehodler and locked field contnet ', }, errorHintColor: { type: 'color', - value: '{sem.colors.textColor.light.error}', + value: '{sem.colors.textColor.default.error}', description: 'Sets textColor for error input field hint', }, labelActive: { type: 'color', - value: '{sem.colors.textColor.light.active}', + value: '{sem.colors.textColor.default.active}', description: 'Sets textColor for an active field label', }, labelError: { type: 'color', - value: '{sem.colors.textColor.light.error}', + value: '{sem.colors.textColor.default.error}', description: 'Sets textColor for an error field label', }, }, iconColor: { default: { - value: '{sem.colors.textColor.light.secondary}', + value: '{sem.colors.textColor.default.secondary}', type: 'color', description: 'Sets color for a field icon/suffix (if used)', }, errorIcon: { - value: '{sem.colors.textColor.light.error}', + value: '{sem.colors.textColor.default.error}', type: 'color', description: 'Sets color for an error input field icon', }, @@ -307,6 +241,18 @@ const field = { type: 'spacing', description: 'Sets top and bottom padding for text area', }, + compact: { + input: { + value: '{sem.typography.normal.body03}', + type: 'typography', + description: 'Sets text for input field label', + }, + }, + hintIconSize: { + value: '{sem.icon.size.2}', + type: 'sizing', + description: 'Sets icon size for field error hint icon', + }, } as const; export default field; diff --git a/src/theme/tokens/components/variables/listItem.ts b/src/theme/tokens/components/variables/listItem.ts index 3117b85d5..742fa0cc5 100644 --- a/src/theme/tokens/components/variables/listItem.ts +++ b/src/theme/tokens/components/variables/listItem.ts @@ -1,7 +1,7 @@ const listItem = { iconColor: { type: 'color', - value: '{sem.colors.textColor.light.secondary}', + value: '{sem.colors.textColor.default.secondary}', description: 'Sets color for list item icons', }, iconSize: { @@ -122,18 +122,18 @@ const listItem = { textColor: { default: { type: 'color', - value: '{sem.colors.textColor.light.primary}', + value: '{sem.colors.textColor.default.primary}', description: 'Sets textColor for primary list item copy', }, secondary: { type: 'color', - value: '{sem.colors.textColor.light.secondary}', + value: '{sem.colors.textColor.default.secondary}', description: 'Sets textColor for secondary list item copy and content variants (e.g. loading, no results)', }, active: { type: 'color', - value: '{sem.colors.textColor.light.active}', + value: '{sem.colors.textColor.default.active}', description: 'Sets textColor for active list item copy', }, }, diff --git a/src/theme/tokens/components/variables/menu.ts b/src/theme/tokens/components/variables/menu.ts index b13b21390..219ce63cd 100644 --- a/src/theme/tokens/components/variables/menu.ts +++ b/src/theme/tokens/components/variables/menu.ts @@ -1,6 +1,6 @@ const menu = { backgroundColor: { - value: '{sem.colors.backgroundColor.light}', + value: '{sem.colors.backgroundColor.default}', type: 'color', description: 'Background color for menu container', }, diff --git a/src/theme/tokens/semantic/variables/colors.ts b/src/theme/tokens/semantic/variables/colors.ts index bee6552c5..efa79895a 100644 --- a/src/theme/tokens/semantic/variables/colors.ts +++ b/src/theme/tokens/semantic/variables/colors.ts @@ -1,12 +1,12 @@ const colors = { backgroundColor: { - light: { + default: { value: '{colors.neutral.1}', type: 'color', description: 'light backgroundColor variant', }, transparent: { - value: '{colors.transparent.1}', + value: '{colors.transparent.default.1}', type: 'color', description: 'transparent backgroundColor variant', }, @@ -20,15 +20,20 @@ const colors = { type: 'color', description: 'invertedBackgroundColor variant', }, + invertedAlt: { + value: '{colors.neutral.5}', + type: 'color', + description: 'invertedBackgroundColor, dark variant', + }, }, backdrop: { transparent: { - value: '{colors.transparent.1}', + value: '{colors.transparent.default.1}', type: 'color', description: 'backdrop shade, transparent variant', }, dark: { - value: '{colors.transparent.5}', + value: '{colors.transparent.default.5}', type: 'color', description: 'backdrop shade, dark variant', }, @@ -147,24 +152,46 @@ const colors = { }, tertiary: { lightest: { - value: '{colors.transparent.1}', + value: '{colors.transparent.default.1}', + type: 'color', + }, + light: { + value: '{colors.transparent.default.2}', + type: 'color', + }, + main: { + value: '{colors.transparent.default.3}', + type: 'color', + }, + dark: { + type: 'color', + value: '{colors.transparent.default.4}', + }, + darkest: { + type: 'color', + value: '{colors.transparent.default.5}', + }, + }, + tertiaryAlt: { + lightest: { + value: '{colors.transparent.alt.1}', type: 'color', }, light: { - value: '{colors.transparent.2}', + value: '{colors.transparent.alt.2}', type: 'color', }, main: { - value: '{colors.transparent.3}', + value: '{colors.transparent.alt.3}', type: 'color', }, dark: { type: 'color', - value: '{colors.transparent.4}', + value: '{colors.transparent.alt.4}', }, darkest: { type: 'color', - value: '{colors.transparent.5}', + value: '{colors.transparent.alt.5}', }, }, upsell: { @@ -191,7 +218,7 @@ const colors = { }, }, textColor: { - light: { + default: { primary: { value: '{colors.neutral.4}', type: 'color', @@ -249,7 +276,7 @@ const colors = { borderColor: { decorative: { transparent: { - value: '{colors.transparent.1}', + value: '{colors.transparent.default.1}', type: 'color', description: 'transparent borderColor variant', }, diff --git a/src/theme/tokens/utils/components.ts b/src/theme/tokens/utils/components.ts index 485a8ffc1..b08546409 100644 --- a/src/theme/tokens/utils/components.ts +++ b/src/theme/tokens/utils/components.ts @@ -14,7 +14,8 @@ import { Token, TokensObject } from './types'; * @returns the parsed value of the requested path */ export const getComponentTokens = - (object: TokensObject | Token, theme: Theme) => (path: string, fn?: (val: string) => unknown) => { + (object: TokensObject | Token, theme: Theme) => + (path: T, fn?: (val: string) => unknown) => { if (object?.value) { return parseComponentToken((object as Token).value, fn)(theme); } diff --git a/src/theme/tokens/utils/parsers.ts b/src/theme/tokens/utils/parsers.ts index 3b9bad972..a3137b2f9 100644 --- a/src/theme/tokens/utils/parsers.ts +++ b/src/theme/tokens/utils/parsers.ts @@ -16,10 +16,9 @@ const parseColorToken = (token: Token) => { if (value.startsWith('{colors.')) { const valueArray = value.slice(1, -1).split('.'); - const color = valueArray[1]; - const shade = Number(valueArray[2]); + const colorPath = valueArray.splice(1).join('.'); - return get(globals, 'colors').get(`${color}.${shade}` as ColorsKey); + return get(globals, 'colors').get(colorPath as ColorsKey); } return value;