diff --git a/modules/docs/package.json b/modules/docs/package.json index aa010b6d8d..8665f21a96 100644 --- a/modules/docs/package.json +++ b/modules/docs/package.json @@ -49,7 +49,7 @@ "@workday/canvas-kit-react": "^12.3.5", "@workday/canvas-kit-styling": "^12.3.5", "@workday/canvas-system-icons-web": "^3.0.0", - "@workday/canvas-tokens-web": "^2.1.0", + "@workday/canvas-tokens-web": "^2.1.1", "markdown-to-jsx": "^7.2.0", "react-syntax-highlighter": "^15.5.0", "ts-node": "^10.9.1" diff --git a/modules/labs-react/package.json b/modules/labs-react/package.json index 82c34eaa5c..575179f8db 100644 --- a/modules/labs-react/package.json +++ b/modules/labs-react/package.json @@ -49,7 +49,7 @@ "@workday/canvas-kit-react": "^12.3.5", "@workday/canvas-kit-styling": "^12.3.5", "@workday/canvas-system-icons-web": "^3.0.0", - "@workday/canvas-tokens-web": "^2.1.0", + "@workday/canvas-tokens-web": "^2.1.1", "@workday/design-assets-types": "^0.2.8", "chroma-js": "^2.2.0", "lodash.flatten": "^4.4.0", diff --git a/modules/preview-react/package.json b/modules/preview-react/package.json index be7fd48f01..2791adddfb 100644 --- a/modules/preview-react/package.json +++ b/modules/preview-react/package.json @@ -49,7 +49,7 @@ "@workday/canvas-kit-react": "^12.3.5", "@workday/canvas-kit-styling": "^12.3.5", "@workday/canvas-system-icons-web": "^3.0.0", - "@workday/canvas-tokens-web": "^2.1.0", + "@workday/canvas-tokens-web": "^2.1.1", "@workday/design-assets-types": "^0.2.8" }, "devDependencies": { diff --git a/modules/react/button/stories/button/Button.mdx b/modules/react/button/stories/button/Button.mdx index 7cc19dabff..c862559e4e 100644 --- a/modules/react/button/stories/button/Button.mdx +++ b/modules/react/button/stories/button/Button.mdx @@ -97,7 +97,11 @@ or view the example below. ### Theme Overrides -The most common way to theme our buttons is to pass a `theme` object at the root level of the application via the `CanvasProvider`. In the example below, our buttons use our `brand.action.**` tokens with the fallback being `brand.primary.**`. +The most common way to theme our buttons is to pass a `theme` object at the root level of the application via the `CanvasProvider`. In the example below, our buttons use our `brand.action.**` tokens with the fallback being `brand.primary.**`. + +> **Caution:** Setting `--cnvs-brand-action**` tokens at the `:root` CSS will override all `PrimaryButton` theme colors set at the `CanvasProvider` level. + +> **Note:** You should **not** individually theme components wrapping them with the `CanvasProvider`, but rather theme at the root level of the application. diff --git a/modules/react/button/stories/button/examples/ThemeOverrides.tsx b/modules/react/button/stories/button/examples/ThemeOverrides.tsx index 3319ca50e3..ccdf9ce615 100644 --- a/modules/react/button/stories/button/examples/ThemeOverrides.tsx +++ b/modules/react/button/stories/button/examples/ThemeOverrides.tsx @@ -8,7 +8,7 @@ import { caretDownIcon, } from '@workday/canvas-system-icons-web'; import {createStyles} from '@workday/canvas-kit-styling'; -import {system} from '@workday/canvas-tokens-web'; +import {brand, system} from '@workday/canvas-tokens-web'; import {CanvasProvider} from '@workday/canvas-kit-react/common'; import {Heading} from '@workday/canvas-kit-react/text'; @@ -17,17 +17,24 @@ const parentContainerStyles = createStyles({ padding: system.space.x4, }); +const customActionTheme = createStyles({ + [brand.action.base]: 'teal', + [brand.action.accent]: 'white', + [brand.action.dark]: 'hsla(180, 100%, 20%)', + [brand.action.darkest]: 'hsla(180, 100%, 16%)', +}); + export const ThemeOverrides = () => (
- Override Primary Color + Override Primary Color Via Canvas Provider ( - Override Action Color + Override Action Color Via CSS Action Token - +
Primary @@ -68,6 +65,6 @@ export const ThemeOverrides = () => ( - +
); diff --git a/modules/react/button/stories/visual-testing/PrimaryButton.stories.tsx b/modules/react/button/stories/visual-testing/PrimaryButton.stories.tsx index 0acf0452d7..520c73abc5 100644 --- a/modules/react/button/stories/visual-testing/PrimaryButton.stories.tsx +++ b/modules/react/button/stories/visual-testing/PrimaryButton.stories.tsx @@ -9,7 +9,8 @@ import {customColorTheme} from '../../../../../utils/storybook'; import {playCircleIcon, relatedActionsVerticalIcon} from '@workday/canvas-system-icons-web'; import {PrimaryButton} from '@workday/canvas-kit-react/button'; import {Container, stateTableColumnProps} from './utils'; -import {customColorThemeWithAction} from '../../../../../utils/storybook/customThemes'; +import {createStyles} from '@workday/canvas-kit-styling'; +import {brand} from '@workday/canvas-tokens-web'; export default { title: 'Testing/Buttons/Button/Primary Button', @@ -21,6 +22,13 @@ export default { }, }; +const customActionTheme = createStyles({ + [brand.action.base]: 'teal', + [brand.action.accent]: 'white', + [brand.action.dark]: 'hsla(180, 100%, 20%)', + [brand.action.darkest]: 'hsla(180, 100%, 16%)', +}); + const PrimaryButtonTest = (props: {theme?: PartialEmotionCanvasTheme}) => ( , + render: () => ( +
+ +
+ ), }; export const PrimaryIconButtonThemedStates = { diff --git a/modules/react/common/lib/CanvasProvider.tsx b/modules/react/common/lib/CanvasProvider.tsx index 7ec9bd5622..95c69ddc34 100644 --- a/modules/react/common/lib/CanvasProvider.tsx +++ b/modules/react/common/lib/CanvasProvider.tsx @@ -44,12 +44,6 @@ const defaultBranding = createStyles({ [brand.primary.base]: base.blueberry400, [brand.primary.light]: base.blueberry200, [brand.primary.lightest]: base.blueberry100, - [brand.action.accent]: base.frenchVanilla100, - [brand.action.darkest]: base.blueberry600, - [brand.action.dark]: base.blueberry500, - [brand.action.base]: base.blueberry400, - [brand.action.light]: base.blueberry200, - [brand.action.lightest]: base.blueberry100, [brand.gradient .primary]: `linear-gradient(90deg, ${brand.primary.base} 0%, ${brand.primary.dark} 100%)`, }); @@ -71,22 +65,20 @@ export const useCanvasThemeToCssVars = ( const className = (elemProps.className || '').split(' ').concat(defaultBranding).join(' '); const style = elemProps.style || {}; const {palette} = filledTheme.canvas; - (['common', 'primary', 'error', 'alert', 'success', 'neutral', 'action'] as const).forEach( - color => { - if (color === 'common') { + (['common', 'primary', 'error', 'alert', 'success', 'neutral'] as const).forEach(color => { + if (color === 'common') { + // @ts-ignore + style[brand.common.focusOutline] = palette.common.focusOutline; + } + (['lightest', 'light', 'main', 'dark', 'darkest', 'contrast'] as const).forEach(key => { + // We only want to set custom colors if they do not match the default. The `defaultBranding` class will take care of the rest. + // @ts-ignore + if (palette[color][key] !== defaultCanvasTheme.palette[color][key]) { // @ts-ignore - style[brand.common.focusOutline] = palette.common.focusOutline; + style[brand[color][mappedKeys[key]]] = palette[color][key]; } - (['lightest', 'light', 'main', 'dark', 'darkest', 'contrast'] as const).forEach(key => { - // We only want to set custom colors if they do not match the default. The `defaultBranding` class will take care of the rest. - // @ts-ignore - if (palette[color][key] !== defaultCanvasTheme.palette[color][key]) { - // @ts-ignore - style[brand[color][mappedKeys[key]]] = palette[color][key]; - } - }); - } - ); + }); + }); return {...elemProps, className, style}; }; diff --git a/modules/react/common/lib/theming/createCanvasTheme.ts b/modules/react/common/lib/theming/createCanvasTheme.ts index 6188586f95..f8cda7d6f6 100644 --- a/modules/react/common/lib/theming/createCanvasTheme.ts +++ b/modules/react/common/lib/theming/createCanvasTheme.ts @@ -80,13 +80,12 @@ function fillPalette( function calculateCanvasTheme(partialTheme: PartialCanvasTheme): CanvasTheme { const {palette = {}, breakpoints = {}, direction, ...extraFields} = partialTheme; - const {primary, alert, error, success, neutral, action, common = {}} = palette!; + const {primary, alert, error, success, neutral, common = {}} = palette!; const mergeable: PartialCanvasTheme = { palette: { common, primary: fillPalette(defaultCanvasTheme.palette.primary, primary), - action: fillPalette(defaultCanvasTheme.palette.primary, action || primary), alert: fillPalette(defaultCanvasTheme.palette.alert, alert), error: fillPalette(defaultCanvasTheme.palette.error, error), success: fillPalette(defaultCanvasTheme.palette.success, success), diff --git a/modules/react/common/lib/theming/theme.ts b/modules/react/common/lib/theming/theme.ts index eef779f1d5..f9b2fa97eb 100644 --- a/modules/react/common/lib/theming/theme.ts +++ b/modules/react/common/lib/theming/theme.ts @@ -12,14 +12,6 @@ export const defaultCanvasTheme: CanvasTheme = { darkest: colors.blueberry600, contrast: colors.frenchVanilla100, }, - action: { - lightest: colors.blueberry100, - light: colors.blueberry200, - main: colors.blueberry400, - dark: colors.blueberry500, - darkest: colors.blueberry600, - contrast: colors.frenchVanilla100, - }, alert: { lightest: colors.cantaloupe100, light: colors.cantaloupe300, diff --git a/modules/react/common/lib/theming/types.ts b/modules/react/common/lib/theming/types.ts index 8e7bc7c6ba..8e7c8be176 100644 --- a/modules/react/common/lib/theming/types.ts +++ b/modules/react/common/lib/theming/types.ts @@ -37,7 +37,6 @@ export interface CanvasTheme { alert: CanvasThemePalette; success: CanvasThemePalette; neutral: CanvasThemePalette; - action: CanvasThemePalette; }; /** * ### Theme Breakpoints diff --git a/modules/react/common/spec/createCanvasTheme.spec.tsx b/modules/react/common/spec/createCanvasTheme.spec.tsx index cedecfe0b4..db6ee38975 100644 --- a/modules/react/common/spec/createCanvasTheme.spec.tsx +++ b/modules/react/common/spec/createCanvasTheme.spec.tsx @@ -23,20 +23,11 @@ describe('createCanvasTheme', () => { const input = { palette: { primary: palette, - action: palette, }, }; const theme = createCanvasTheme(input); const expected = {...defaultCanvasTheme}; - expected.palette.action = { - lightest: 'orange', - light: 'orange', - main: 'orange', - dark: 'orange', - darkest: 'orange', - contrast: 'orange', - }; expected.palette.primary = palette; expect(theme).toEqual(expected); @@ -61,15 +52,6 @@ describe('createCanvasTheme', () => { contrast: '#494949', }; - expected.palette.action = { - lightest: '#ffff7d', - light: '#ffd64a', - main: 'orange', - dark: '#c67600', - darkest: '#904a00', - contrast: '#494949', - }; - expect(theme).toEqual(expected); }); @@ -84,40 +66,6 @@ describe('createCanvasTheme', () => { const theme = createCanvasTheme(input); const expected = {...defaultCanvasTheme}; expected.palette.primary.dark = 'black'; - expected.palette.action.dark = 'black'; - expect(theme).toEqual(expected); - }); - - test('calling with a custom palette with action colors should keep the default primary color and only set action', () => { - const input = { - palette: { - primary: { - dark: 'black', - }, - action: { - dark: 'navy', - }, - }, - }; - const theme = createCanvasTheme(input); - const expected = {...defaultCanvasTheme}; - expected.palette.primary.dark = 'black'; - expected.palette.action.dark = 'navy'; - expect(theme).toEqual(expected); - }); - - test('if not action color is defined, it should default to primary color', () => { - const input = { - palette: { - primary: { - dark: 'black', - }, - }, - }; - const theme = createCanvasTheme(input); - const expected = {...defaultCanvasTheme}; - expected.palette.primary.dark = 'black'; - expected.palette.action.dark = 'black'; expect(theme).toEqual(expected); }); diff --git a/modules/react/package.json b/modules/react/package.json index e433ac3549..0f9abef09d 100644 --- a/modules/react/package.json +++ b/modules/react/package.json @@ -52,7 +52,7 @@ "@workday/canvas-kit-popup-stack": "^12.3.5", "@workday/canvas-kit-styling": "^12.3.5", "@workday/canvas-system-icons-web": "^3.0.0", - "@workday/canvas-tokens-web": "^2.1.0", + "@workday/canvas-tokens-web": "^2.1.1", "@workday/design-assets-types": "^0.2.8", "chroma-js": "^2.2.0", "csstype": "^3.0.2", diff --git a/modules/styling-transform/package.json b/modules/styling-transform/package.json index 944c0aad90..6e2770b800 100644 --- a/modules/styling-transform/package.json +++ b/modules/styling-transform/package.json @@ -35,7 +35,7 @@ "dependencies": { "@emotion/serialize": "^1.0.2", "@workday/canvas-kit-styling": "^12.3.5", - "@workday/canvas-tokens-web": "^2.1.0", + "@workday/canvas-tokens-web": "^2.1.1", "stylis": "4.0.13", "ts-node": "^10.9.1", "typescript": "5.0" diff --git a/modules/styling/package.json b/modules/styling/package.json index fcc7feeeb1..11c44dd7aa 100644 --- a/modules/styling/package.json +++ b/modules/styling/package.json @@ -55,7 +55,7 @@ "@emotion/styled": "^11.6.0", "@workday/canvas-kit-react": "^12.3.5", "@workday/canvas-system-icons-web": "^3.0.0", - "@workday/canvas-tokens-web": "^2.1.0", + "@workday/canvas-tokens-web": "^2.1.1", "typescript": "5.0" } } diff --git a/package.json b/package.json index 34904cefea..682be2d6f2 100644 --- a/package.json +++ b/package.json @@ -138,7 +138,7 @@ "@workday/canvas-accent-icons-web": "^3.0.9", "@workday/canvas-applet-icons-web": "^2.0.9", "@workday/canvas-system-icons-web": "^3.0.0", - "@workday/canvas-tokens-web": "^2.1.0", + "@workday/canvas-tokens-web": "^2.1.1", "jest-environment-jsdom": "^29.7.0", "ts-jest": "^29.2.4" }, diff --git a/utils/storybook/customThemes.ts b/utils/storybook/customThemes.ts index b93181a830..16da8f120a 100644 --- a/utils/storybook/customThemes.ts +++ b/utils/storybook/customThemes.ts @@ -23,30 +23,3 @@ export const customColorTheme: PartialCanvasTheme = { }, }, }; - -export const customColorThemeWithAction: PartialCanvasTheme = { - palette: { - primary: { - main: 'purple', - contrast: 'turquoise', - }, - action: { - main: 'teal', - }, - alert: { - main: 'coral', - }, - error: { - main: 'crimson', - }, - success: { - main: 'aquamarine', - }, - neutral: { - main: 'gray', - }, - common: { - focusOutline: 'turquoise', - }, - }, -}; diff --git a/yarn.lock b/yarn.lock index f95c8ffec5..7af7ad73e4 100644 --- a/yarn.lock +++ b/yarn.lock @@ -6158,10 +6158,10 @@ dependencies: "@workday/design-assets-types" "0.2.8" -"@workday/canvas-tokens-web@^2.1.0": - version "2.1.0" - resolved "https://registry.npmjs.org/@workday/canvas-tokens-web/-/canvas-tokens-web-2.1.0.tgz#3fa68416c003dd84a217909db556ab385360a34e" - integrity sha512-qDkhronvKRmautzHWLAlGYwI0UsrXmRN07EFCHPROFAbVglMdd1D3LIeP2ECtQ76qOcEVJM79vQJdwai4B9K7g== +"@workday/canvas-tokens-web@^2.1.1": + version "2.1.1" + resolved "https://registry.yarnpkg.com/@workday/canvas-tokens-web/-/canvas-tokens-web-2.1.1.tgz#d397b5fbbc22086e767812a6a76578b2439cf8fa" + integrity sha512-icsFntfDnqwlGZkAu9PNJs9ymLGZJG9o3j/a2+LXxIsr69PoE2XlNDKLGgHPXn0H9pHWHRgt6tVJk5mUTsCIgw== "@workday/design-assets-types@0.2.10": version "0.2.10" @@ -15683,16 +15683,7 @@ string-replace-loader@^3.1.0: loader-utils "^2.0.0" schema-utils "^3.0.0" -"string-width-cjs@npm:string-width@^4.2.0": - version "4.2.3" - resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010" - integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g== - dependencies: - emoji-regex "^8.0.0" - is-fullwidth-code-point "^3.0.0" - strip-ansi "^6.0.1" - -"string-width@^1.0.2 || 2 || 3 || 4", string-width@^4.2.3: +"string-width-cjs@npm:string-width@^4.2.0", "string-width@^1.0.2 || 2 || 3 || 4", string-width@^4.2.3: version "4.2.3" resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010" integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g== @@ -15779,7 +15770,7 @@ string_decoder@~1.1.1: dependencies: safe-buffer "~5.1.0" -"strip-ansi-cjs@npm:strip-ansi@^6.0.1": +"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.1: version "6.0.1" resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9" integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A== @@ -15800,13 +15791,6 @@ strip-ansi@^6.0.0: dependencies: ansi-regex "^5.0.0" -strip-ansi@^6.0.1: - version "6.0.1" - resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9" - integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A== - dependencies: - ansi-regex "^5.0.1" - strip-ansi@^7.0.1: version "7.1.0" resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-7.1.0.tgz#d5b6568ca689d8561370b0707685d22434faff45" @@ -17002,7 +16986,7 @@ wordwrap@^1.0.0: resolved "https://registry.yarnpkg.com/wordwrap/-/wordwrap-1.0.0.tgz#27584810891456a4171c8d0226441ade90cbcaeb" integrity sha1-J1hIEIkUVqQXHI0CJkQa3pDLyus= -"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0": +"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0: version "7.0.0" resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43" integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q== @@ -17020,15 +17004,6 @@ wrap-ansi@^6.0.1, wrap-ansi@^6.2.0: string-width "^4.1.0" strip-ansi "^6.0.0" -wrap-ansi@^7.0.0: - version "7.0.0" - resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43" - integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q== - dependencies: - ansi-styles "^4.0.0" - string-width "^4.1.0" - strip-ansi "^6.0.0" - wrap-ansi@^8.0.1, wrap-ansi@^8.1.0: version "8.1.0" resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-8.1.0.tgz#56dc22368ee570face1b49819975d9b9a5ead214"