feat: Add action tokens to PrimaryButton with brand base as fallback (#3081)

Fixes: #3072

[category:Components]

Release Note:
In `@workday/canvas-tokens-web@2.1.0` we've added new `action` tokens. In most cases you'll use `brand.primary.**` tokens to override theme. However, in the unique cases where you need additional control over styling `PrimaryButton` you can override `brand.action.**` tokens for more control. This PR ensures that `PrimaryButton` uses the new `action` tokens with `brand.base.**` being a fallback token. There should be no breaking changes as this is an addition to provide more control of theming our `PrimaryButton` component.

**Note: If `band.action.**` token is set at the theme level in the `CanvasProvider`, `brand.pimrary**` will be overwritten.**

Co-authored-by: manuel.carrera <manuel.carrera@workday.com>
Co-authored-by: @josh-bagwell <44883293+josh-bagwell@users.noreply.github.com>

Author: 3 people

modules/docs/package.json

@@ -49,7 +49,7 @@
     "@workday/canvas-kit-react": "^12.2.2",
     "@workday/canvas-kit-styling": "^12.2.2",
     "@workday/canvas-system-icons-web": "^3.0.0",
-    "@workday/canvas-tokens-web": "^2.0.1",
+    "@workday/canvas-tokens-web": "^2.1.0",
     "markdown-to-jsx": "^7.2.0",
     "react-syntax-highlighter": "^15.5.0",
     "ts-node": "^10.9.1"

modules/labs-react/package.json

@@ -49,7 +49,7 @@
     "@workday/canvas-kit-react": "^12.2.2",
     "@workday/canvas-kit-styling": "^12.2.2",
     "@workday/canvas-system-icons-web": "^3.0.0",
-    "@workday/canvas-tokens-web": "^2.0.1",
+    "@workday/canvas-tokens-web": "^2.1.0",
     "@workday/design-assets-types": "^0.2.8",
     "chroma-js": "^2.2.0",
     "lodash.flatten": "^4.4.0",

modules/preview-react/package.json

@@ -49,7 +49,7 @@
     "@workday/canvas-kit-react": "^12.2.2",
     "@workday/canvas-kit-styling": "^12.2.2",
     "@workday/canvas-system-icons-web": "^3.0.0",
-    "@workday/canvas-tokens-web": "^2.0.1",
+    "@workday/canvas-tokens-web": "^2.1.0",
     "@workday/design-assets-types": "^0.2.8"
   },
   "devDependencies": {

modules/react/button/lib/PrimaryButton.tsx

@@ -23,38 +23,50 @@ const primaryButtonStencil = createStencil({
   extends: buttonStencil,
   base: {
     // Base Styles
-    [buttonStencil.vars.background]: brand.primary.base,
+    [buttonStencil.vars.background]: cssVar(brand.action.base, brand.primary.base),
     [buttonStencil.vars.borderRadius]: system.shape.round,
-    [buttonStencil.vars.label]: brand.primary.accent,
-    [systemIconStencil.vars.color]: cssVar(buttonColorPropVars.default.icon, brand.primary.accent),
+    [buttonStencil.vars.label]: cssVar(brand.action.accent, brand.primary.accent),
+    [systemIconStencil.vars.color]: cssVar(
+      buttonColorPropVars.default.icon,
+      cssVar(brand.action.accent, brand.primary.accent)
+    ),
     // Focus Styles
     '&:focus-visible, &.focus': {
-      [buttonStencil.vars.background]: brand.primary.base,
-      [buttonStencil.vars.label]: brand.primary.accent,
+      [buttonStencil.vars.background]: cssVar(brand.action.base, brand.primary.base),
+      [buttonStencil.vars.label]: cssVar(brand.action.accent, brand.primary.accent),
       [buttonStencil.vars.boxShadowInner]: system.color.border.inverse,
       [buttonStencil.vars.boxShadowOuter]: brand.common.focusOutline,
-      [systemIconStencil.vars.color]: cssVar(buttonColorPropVars.focus.icon, brand.primary.accent),
+      [systemIconStencil.vars.color]: cssVar(
+        buttonColorPropVars.focus.icon,
+        cssVar(brand.action.accent, brand.primary.accent)
+      ),
     },
     // Hover Styles
     '&:hover, &.hover': {
-      [buttonStencil.vars.background]: brand.primary.dark,
-      [buttonStencil.vars.label]: brand.primary.accent,
-      [systemIconStencil.vars.color]: cssVar(buttonColorPropVars.hover.icon, brand.primary.accent),
+      [buttonStencil.vars.background]: cssVar(brand.action.dark, brand.primary.dark),
+      [buttonStencil.vars.label]: cssVar(brand.action.accent, brand.primary.accent),
+      [systemIconStencil.vars.color]: cssVar(
+        buttonColorPropVars.hover.icon,
+        cssVar(brand.action.accent, brand.primary.accent)
+      ),
     },
     // Active Styles
     '&:active, &.active': {
-      [buttonStencil.vars.background]: brand.primary.darkest,
-      [buttonStencil.vars.label]: brand.primary.accent,
-      [systemIconStencil.vars.color]: cssVar(buttonColorPropVars.active.icon, brand.primary.accent),
+      [buttonStencil.vars.background]: cssVar(brand.action.darkest, brand.primary.darkest),
+      [buttonStencil.vars.label]: cssVar(brand.action.accent, brand.primary.accent),
+      [systemIconStencil.vars.color]: cssVar(
+        buttonColorPropVars.active.icon,
+        cssVar(brand.action.accent, brand.primary.accent)
+      ),
     },
     // Disabled Styles
     '&:disabled, &.disabled': {
-      [buttonStencil.vars.background]: brand.primary.base,
-      [buttonStencil.vars.label]: brand.primary.accent,
+      [buttonStencil.vars.background]: cssVar(brand.action.base, brand.primary.base),
+      [buttonStencil.vars.label]: cssVar(brand.action.accent, brand.primary.accent),
       [buttonStencil.vars.opacity]: system.opacity.disabled,
       [systemIconStencil.vars.color]: cssVar(
         buttonColorPropVars.disabled.icon,
-        brand.primary.accent
+        cssVar(brand.action.accent, brand.primary.accent)
       ),
     },
   },

modules/react/button/stories/button/Button.mdx

@@ -14,6 +14,7 @@ import { TertiaryInverse } from './examples/TertiaryInverse';
 import { Delete } from './examples/Delete';
 import { Grow } from './examples/Grow';
 import { CustomStyles } from './examples/CustomStyles';
+import { ThemeOverrides } from './examples/ThemeOverrides';
 
 import * as ButtonStories from './Button.stories';
 
@@ -94,6 +95,12 @@ or view the example below.
 
 <ExampleCodeBlock code={CustomStyles} />
 
+### 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.**`.
+
+<ExampleCodeBlock code={ThemeOverrides} />
+
 ### Accessible Use of the `as` Prop
 
 Like many of our components, Buttons accept an `as` prop, which lets you change the underlying

modules/react/button/stories/button/Button.stories.tsx

@@ -9,6 +9,7 @@ import {Tertiary as TertiaryExample} from './examples/Tertiary';
 import {TertiaryInverse as TertiaryInverseExample} from './examples/TertiaryInverse';
 import {Delete as DeleteExample} from './examples/Delete';
 import {CustomStyles as CustomStylesExample} from './examples/CustomStyles';
+import {ThemeOverrides as ThemeOverridesExample} from './examples/ThemeOverrides';
 
 export default {
   title: 'Components/Buttons',
@@ -44,3 +45,7 @@ export const Delete = {
 export const CustomStyles = {
   render: CustomStylesExample,
 };
+
+export const ThemeOverrides = {
+  render: ThemeOverridesExample,
+};

modules/react/button/stories/button/examples/ThemeOverrides.tsx

@@ -0,0 +1,73 @@
+import React from 'react';
+
+import {PrimaryButton} from '@workday/canvas-kit-react/button';
+import {Flex} from '@workday/canvas-kit-react/layout';
+import {
+  plusIcon,
+  relatedActionsVerticalIcon,
+  caretDownIcon,
+} from '@workday/canvas-system-icons-web';
+import {createStyles} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
+import {CanvasProvider} from '@workday/canvas-kit-react/common';
+import {Heading} from '@workday/canvas-kit-react/text';
+
+const parentContainerStyles = createStyles({
+  gap: system.space.x4,
+  padding: system.space.x4,
+});
+
+export const ThemeOverrides = () => (
+  <div>
+    <Heading size="medium" as="h3">
+      Override Primary Color
+    </Heading>
+    <CanvasProvider
+      theme={{
+        canvas: {
+          palette: {
+            action: {
+              main: 'teal',
+            },
+          },
+        },
+      }}
+    >
+      <Flex cs={parentContainerStyles}>
+        <PrimaryButton>Primary</PrimaryButton>
+        <PrimaryButton icon={plusIcon} iconPosition="start">
+          Primary
+        </PrimaryButton>
+        <PrimaryButton icon={caretDownIcon} iconPosition="end">
+          Primary
+        </PrimaryButton>
+        <PrimaryButton aria-label="Related Actions" icon={relatedActionsVerticalIcon} />
+      </Flex>
+    </CanvasProvider>
+    <Heading size="medium" as="h3">
+      Override Action Color
+    </Heading>
+    <CanvasProvider
+      theme={{
+        canvas: {
+          palette: {
+            primary: {
+              main: 'navy',
+            },
+          },
+        },
+      }}
+    >
+      <Flex cs={parentContainerStyles}>
+        <PrimaryButton>Primary</PrimaryButton>
+        <PrimaryButton icon={plusIcon} iconPosition="start">
+          Primary
+        </PrimaryButton>
+        <PrimaryButton icon={caretDownIcon} iconPosition="end">
+          Primary
+        </PrimaryButton>
+        <PrimaryButton aria-label="Related Actions" icon={relatedActionsVerticalIcon} />
+      </Flex>
+    </CanvasProvider>
+  </div>
+);

modules/react/button/stories/visual-testing/PrimaryButton.stories.tsx

@@ -9,6 +9,7 @@ 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';
 
 export default {
   title: 'Testing/Buttons/Button/Primary Button',
@@ -99,6 +100,10 @@ export const PrimaryButtonThemedStates = {
   render: () => <PrimaryButtonTest theme={{canvas: customColorTheme}} />,
 };
 
+export const PrimaryButtonThemedActionStates = {
+  render: () => <PrimaryButtonTest theme={{canvas: customColorThemeWithAction}} />,
+};
+
 export const PrimaryIconButtonThemedStates = {
   render: () => <PrimaryIconButtonTest theme={{canvas: customColorTheme}} />,
 };

modules/react/common/lib/CanvasProvider.tsx

@@ -44,6 +44,12 @@ 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%)`,
 });
@@ -65,20 +71,22 @@ 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'] 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]) {
+  (['common', 'primary', 'error', 'alert', 'success', 'neutral', 'action'] as const).forEach(
+    color => {
+      if (color === 'common') {
         // @ts-ignore
-        style[brand[color][mappedKeys[key]]] = palette[color][key];
+        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[color][mappedKeys[key]]] = palette[color][key];
+        }
+      });
+    }
+  );
   return {...elemProps, className, style};
 };
 

modules/react/common/lib/theming/createCanvasTheme.ts

@@ -80,12 +80,13 @@ function fillPalette(
 
 function calculateCanvasTheme(partialTheme: PartialCanvasTheme): CanvasTheme {
   const {palette = {}, breakpoints = {}, direction, ...extraFields} = partialTheme;
-  const {primary, alert, error, success, neutral, common = {}} = palette!;
+  const {primary, alert, error, success, neutral, action, 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),

modules/react/common/lib/theming/theme.ts

@@ -12,6 +12,14 @@ 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,

modules/react/common/lib/theming/types.ts

@@ -37,6 +37,7 @@ export interface CanvasTheme {
     alert: CanvasThemePalette;
     success: CanvasThemePalette;
     neutral: CanvasThemePalette;
+    action: CanvasThemePalette;
   };
   /**
    * ### Theme Breakpoints

modules/react/common/spec/createCanvasTheme.spec.tsx

@@ -23,10 +23,20 @@ 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);
@@ -51,6 +61,15 @@ describe('createCanvasTheme', () => {
       contrast: '#494949',
     };
 
+    expected.palette.action = {
+      lightest: '#ffff7d',
+      light: '#ffd64a',
+      main: 'orange',
+      dark: '#c67600',
+      darkest: '#904a00',
+      contrast: '#494949',
+    };
+
     expect(theme).toEqual(expected);
   });
 
@@ -65,7 +84,40 @@ 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);
   });
 

modules/react/package.json

@@ -52,7 +52,7 @@
     "@workday/canvas-kit-popup-stack": "^12.2.2",
     "@workday/canvas-kit-styling": "^12.2.2",
     "@workday/canvas-system-icons-web": "^3.0.0",
-    "@workday/canvas-tokens-web": "^2.0.1",
+    "@workday/canvas-tokens-web": "^2.1.0",
     "@workday/design-assets-types": "^0.2.8",
     "chroma-js": "^2.2.0",
     "csstype": "^3.0.2",