Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: Remove action tokens from CanvasProvider to allow cascading #3125

Merged
merged 2 commits into from
Feb 6, 2025
Merged

fix: Remove action tokens from CanvasProvider to allow cascading #3125

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
aa81786
fix: Remove action tokens from CanvasProvider to allow cascading
Feb 6, 2025
3a2ca3f
fix: Remove referrences of action tokens
Feb 6, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion modules/docs/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
2 changes: 1 addition & 1 deletion modules/labs-react/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
2 changes: 1 addition & 1 deletion modules/preview-react/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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": {
Expand Down
6 changes: 5 additions & 1 deletion modules/react/button/stories/button/Button.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.

<ExampleCodeBlock code={ThemeOverrides} />

Expand Down
31 changes: 14 additions & 17 deletions modules/react/button/stories/button/examples/ThemeOverrides.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand All @@ -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 = () => (
<div>
<Heading size="medium" as="h3">
Override Primary Color
Override Primary Color Via Canvas Provider
</Heading>
<CanvasProvider
theme={{
canvas: {
palette: {
action: {
main: 'teal',
primary: {
main: 'navy',
},
},
},
Expand All @@ -45,19 +52,9 @@ export const ThemeOverrides = () => (
</Flex>
</CanvasProvider>
<Heading size="medium" as="h3">
Override Action Color
Override Action Color Via CSS Action Token
</Heading>
<CanvasProvider
theme={{
canvas: {
palette: {
primary: {
main: 'navy',
},
},
},
}}
>
<div className={customActionTheme}>
<Flex cs={parentContainerStyles}>
<PrimaryButton>Primary</PrimaryButton>
<PrimaryButton icon={plusIcon} iconPosition="start">
Expand All @@ -68,6 +65,6 @@ export const ThemeOverrides = () => (
</PrimaryButton>
<PrimaryButton aria-label="Related Actions" icon={relatedActionsVerticalIcon} />
</Flex>
</CanvasProvider>
</div>
</div>
);
16 changes: 14 additions & 2 deletions modules/react/button/stories/visual-testing/PrimaryButton.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand All @@ -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}) => (
<StaticStates theme={props.theme}>
<ComponentStatesTable
Expand Down Expand Up @@ -101,7 +109,11 @@ export const PrimaryButtonThemedStates = {
};

export const PrimaryButtonThemedActionStates = {
render: () => <PrimaryButtonTest theme={{canvas: customColorThemeWithAction}} />,
render: () => (
<div className={customActionTheme}>
<PrimaryButtonTest theme={{canvas: customColorTheme}} />
</div>
),
};

export const PrimaryIconButtonThemedStates = {
Expand Down
32 changes: 12 additions & 20 deletions modules/react/common/lib/CanvasProvider.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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%)`,
});
Expand All @@ -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
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What is TS complaining about here?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Existing code https://github.com/Workday/canvas-kit/blob/master/modules/react/common/lib/CanvasProvider.tsx#L77

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It looks like a Prettier reformat. 'action' was removed from the array and that shortened the line enough.

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};
};

Expand Down
3 changes: 1 addition & 2 deletions modules/react/common/lib/theming/createCanvasTheme.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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),
Expand Down
8 changes: 0 additions & 8 deletions modules/react/common/lib/theming/theme.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
1 change: 0 additions & 1 deletion modules/react/common/lib/theming/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,6 @@ export interface CanvasTheme {
alert: CanvasThemePalette;
success: CanvasThemePalette;
neutral: CanvasThemePalette;
action: CanvasThemePalette;
};
/**
* ### Theme Breakpoints
Expand Down
52 changes: 0 additions & 52 deletions modules/react/common/spec/createCanvasTheme.spec.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand All @@ -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);
});

Expand All @@ -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);
});

Expand Down
2 changes: 1 addition & 1 deletion modules/react/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
2 changes: 1 addition & 1 deletion modules/styling-transform/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
2 changes: 1 addition & 1 deletion modules/styling/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
}
}
2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
},
Expand Down
27 changes: 0 additions & 27 deletions utils/storybook/customThemes.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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',
},
},
};
Loading
Loading