chore!: Refactor Switch to use system tokens (#2702)

Fixes: #2597 Switch has been updated to use our system tokens. [category:Components] ### BREAKING CHANGES This is a visual breaking change. Switch no longer uses `theme.primary.light` as the background color for a disabled and checked Switch. Instead, it uses `theme.primary.main` with an opacity of `0.4` to show a disabled state. Co-authored-by: manuel.carrera <manuel.carrera@workday.com> Co-authored-by: @josh-bagwell <44883293+josh-bagwell@users.noreply.github.com>
Workday · Apr 19, 2024 · 6ef0280 · 6ef0280
1 parent dbc9dbc
commit 6ef0280
Show file tree

Hide file tree

Showing 9 changed files with 35 additions and 30 deletions.
diff --git a/modules/docs/mdx/11.0-UPGRADE-GUIDE.mdx b/modules/docs/mdx/11.0-UPGRADE-GUIDE.mdx
@@ -782,6 +782,11 @@ our
 The component now supports the `cs` prop, but otherwise the API has not changed. It should behave
 identically as it did in previous versions.
 
+> #### Visual Breaking change
+>
+> Switch no longer uses `theme.primary.light` as the background color for a disabled and checked
+> Switch. Instead, it uses `theme.primary.main` with an opacity of `0.4` to show a disabled state.
+
 ### Table (Preview)
 
 **PR:** [#2567](https://github.com/Workday/canvas-kit/pull/2567)

diff --git a/modules/preview-react/radio/lib/StyledRadioButton.tsx b/modules/preview-react/radio/lib/StyledRadioButton.tsx
@@ -75,7 +75,7 @@ const radioInputStencil = createStencil({
         width: 1,
         separation: 0,
         animate: false,
-        innerColor: system.color.fg.inverse,
+        innerColor: system.color.border.inverse,
         outerColor: brand.common.focusOutline,
       }),
     },
@@ -98,7 +98,7 @@ const radioInputStencil = createStencil({
           width: 2,
           separation: 2,
           animate: false,
-          innerColor: system.color.fg.inverse,
+          innerColor: system.color.border.inverse,
           outerColor: brand.common.focusOutline,
         }),
       },
@@ -143,17 +143,17 @@ const radioInputStencil = createStencil({
             ...focusRing({
               width: 2,
               separation: 0,
-              innerColor: system.color.fg.strong,
-              outerColor: system.color.fg.inverse,
+              innerColor: system.color.border.contrast.default,
+              outerColor: system.color.border.inverse,
             }),
           },
         '&:focus-visible:checked + .cnvs-radio-check, &:focus-visible:hover:checked + .cnvs-radio-check, &.focus:checked + .cnvs-radio-check, &.focus:hover:checked + .cnvs-radio-check':
           {
             ...focusRing({
               width: 2,
               separation: 2,
-              innerColor: system.color.fg.strong,
-              outerColor: system.color.fg.inverse,
+              innerColor: system.color.border.contrast.default,
+              outerColor: system.color.border.inverse,
             }),
           },
       },

diff --git a/modules/react/button/lib/BaseButton.tsx b/modules/react/button/lib/BaseButton.tsx
@@ -185,7 +185,7 @@ export const buttonStencil = createStencil({
         separation: 2,
         innerColor: cssVar(
           buttonColorPropVars.focus.boxShadowInner,
-          cssVar(boxShadowInner, system.color.fg.inverse)
+          cssVar(boxShadowInner, system.color.border.inverse)
         ),
         outerColor: cssVar(
           buttonColorPropVars.focus.boxShadowOuter,

diff --git a/modules/react/button/lib/DeleteButton.tsx b/modules/react/button/lib/DeleteButton.tsx
@@ -28,7 +28,7 @@ const deleteButtonStencil = createStencil({
       [buttonStencil.vars.background]: brand.error.base,
       [buttonStencil.vars.label]: brand.error.accent,
       [systemIconStencil.vars.color]: brand.error.accent,
-      [buttonStencil.vars.boxShadowInner]: system.color.fg.inverse,
+      [buttonStencil.vars.boxShadowInner]: system.color.border.inverse,
       [buttonStencil.vars.boxShadowOuter]: brand.common.focusOutline,
     },
     // Hover Styles

diff --git a/modules/react/button/lib/PrimaryButton.tsx b/modules/react/button/lib/PrimaryButton.tsx
@@ -32,7 +32,7 @@ const primaryButtonStencil = createStencil({
     '&:focus-visible, &.focus': {
       [buttonStencil.vars.background]: brand.primary.base,
       [buttonStencil.vars.label]: brand.primary.accent,
-      [buttonStencil.vars.boxShadowInner]: system.color.fg.inverse,
+      [buttonStencil.vars.boxShadowInner]: system.color.border.inverse,
       [buttonStencil.vars.boxShadowOuter]: brand.common.focusOutline,
       [systemIconStencil.vars.color]: brand.primary.accent,
     },
@@ -68,8 +68,8 @@ const primaryButtonStencil = createStencil({
         '&:focus-visible, &.focus': {
           [buttonStencil.vars.background]: system.color.bg.default,
           [buttonStencil.vars.label]: system.color.fg.strong,
-          [buttonStencil.vars.boxShadowInner]: system.color.fg.strong,
-          [buttonStencil.vars.boxShadowOuter]: system.color.fg.inverse,
+          [buttonStencil.vars.boxShadowInner]: system.color.border.contrast.default,
+          [buttonStencil.vars.boxShadowOuter]: system.color.border.inverse,
           [systemIconStencil.vars.color]: system.color.fg.strong,
         },
         // Hover Styles

diff --git a/modules/react/button/lib/SecondaryButton.tsx b/modules/react/button/lib/SecondaryButton.tsx
@@ -34,7 +34,7 @@ const secondaryButtonStencil = createStencil({
       [buttonStencil.vars.background]: 'transparent',
       [buttonStencil.vars.border]: system.color.border.contrast.default,
       [buttonStencil.vars.label]: system.color.fg.strong,
-      [buttonStencil.vars.boxShadowInner]: system.color.fg.inverse,
+      [buttonStencil.vars.boxShadowInner]: system.color.border.inverse,
       [buttonStencil.vars.boxShadowOuter]: brand.common.focusOutline,
       [systemIconStencil.vars.color]: system.color.fg.strong,
     },
@@ -74,8 +74,8 @@ const secondaryButtonStencil = createStencil({
           [buttonStencil.vars.background]: system.color.bg.default,
           [buttonStencil.vars.border]: 'transparent',
           [buttonStencil.vars.label]: system.color.fg.strong,
-          [buttonStencil.vars.boxShadowInner]: system.color.fg.strong,
-          [buttonStencil.vars.boxShadowOuter]: system.color.fg.inverse,
+          [buttonStencil.vars.boxShadowInner]: system.color.border.contrast.default,
+          [buttonStencil.vars.boxShadowOuter]: system.color.border.inverse,
           [systemIconStencil.vars.color]: system.color.fg.strong,
         },
         // Hover Styles

diff --git a/modules/react/button/lib/TertiaryButton.tsx b/modules/react/button/lib/TertiaryButton.tsx
@@ -43,7 +43,7 @@ const tertiaryButtonStencil = createStencil({
       ...focusRing({
         width: 2,
         separation: 0,
-        innerColor: system.color.fg.inverse,
+        innerColor: system.color.border.inverse,
         outerColor: brand.common.focusOutline,
       }),
     },
@@ -122,8 +122,8 @@ const tertiaryButtonStencil = createStencil({
             inset: 'inner',
             width: 2,
             separation: 2,
-            innerColor: system.color.fg.strong,
-            outerColor: system.color.fg.inverse,
+            innerColor: system.color.border.contrast.default,
+            outerColor: system.color.border.inverse,
           }),
         },
         // Hover Styles

diff --git a/modules/react/checkbox/lib/CheckboxInput.tsx b/modules/react/checkbox/lib/CheckboxInput.tsx
@@ -144,7 +144,7 @@ const checkboxInputStencil = createStencil({
         },
         '&:disabled:where(:checked, :indeterminate) ~ div:first-of-type': {
           borderColor: system.color.border.input.inverse,
-          backgroundColor: system.color.bg.alt.default,
+          backgroundColor: system.color.bg.default,
         },
 
         // Focus state for inverse variant
@@ -154,8 +154,8 @@ const checkboxInputStencil = createStencil({
             width: 2,
             separation: 0,
             animate: false,
-            innerColor: system.color.fg.strong,
-            outerColor: system.color.fg.inverse,
+            innerColor: system.color.border.contrast.default,
+            outerColor: system.color.border.inverse,
           }),
         },
         '&:checked:focus-visible, &:checked.focus, &:indeterminate:focus-visible, &:indeterminate.focus':
@@ -165,8 +165,8 @@ const checkboxInputStencil = createStencil({
                 width: 2,
                 separation: 2,
                 animate: false,
-                innerColor: system.color.fg.strong,
-                outerColor: system.color.fg.inverse,
+                innerColor: system.color.border.contrast.default,
+                outerColor: system.color.border.inverse,
               }),
               borderColor: system.color.border.inverse,
             },
@@ -185,13 +185,13 @@ const checkboxInputStencil = createStencil({
         '&:not(:where(:focus-visible, .focus)) ~ div:first-of-type': {
           borderColor: checkboxBackgroundStencil.vars.errorRingColorInner,
           boxShadow: `
-            0 0 0 ${px2rem(1)} ${checkboxBackgroundStencil.vars.errorRingColorInner}, 
+            0 0 0 ${px2rem(1)} ${checkboxBackgroundStencil.vars.errorRingColorInner},
             0 0 0 ${px2rem(2)} ${checkboxBackgroundStencil.vars.errorRingColorOuter}`,
         },
         '&:where(:checked, :indeterminate) ~ div:first-of-type': {
           borderColor: 'transparent',
           boxShadow: `
-            0 0 0 ${px2rem(2)} ${system.color.fg.inverse},
+            0 0 0 ${px2rem(2)} ${system.color.border.inverse},
             0 0 0 ${px2rem(4)} ${checkboxBackgroundStencil.vars.errorRingColorInner},
             0 0 0 ${px2rem(5)} ${checkboxBackgroundStencil.vars.errorRingColorOuter}`,
         },

diff --git a/modules/react/switch/lib/Switch.tsx b/modules/react/switch/lib/Switch.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import {createComponent, ErrorType, focusRing, useUniqueId} from '@workday/canvas-kit-react/common';
 import {createStencil, px2rem} from '@workday/canvas-kit-styling';
-import {base, brand, system} from '@workday/canvas-tokens-web';
+import {brand, system} from '@workday/canvas-tokens-web';
 import {mergeStyles} from '../../layout';
 
 export interface SwitchProps {
@@ -70,14 +70,14 @@ const switchInputStencil = createStencil({
       },
       '&:disabled, &.disabled': {
         '& ~ div:first-of-type': {
-          backgroundColor: brand.primary.light,
+          opacity: system.opacity.disabled,
         },
       },
     },
     '&:disabled, &.disabled': {
       cursor: 'not-allowed',
       '& ~ div:first-of-type': {
-        backgroundColor: base.soap400,
+        opacity: system.opacity.disabled,
       },
     },
     '&:focus-visible, &:focus, &.focus': {
@@ -92,15 +92,15 @@ const switchInputStencil = createStencil({
       error: {
         '& ~ div:first-of-type': {
           boxShadow: `
-              0 0 0 ${px2rem(2)} ${base.frenchVanilla100},
+              0 0 0 ${px2rem(2)} ${system.color.border.inverse},
               0 0 0 ${system.space.x1} ${brand.error.base},
               0 0 0 ${px2rem(5)} transparent`,
         },
       },
       alert: {
         '& ~ div:first-of-type': {
           boxShadow: `
-          0 0 0 ${px2rem(2)} ${base.frenchVanilla100},
+          0 0 0 ${px2rem(2)} ${system.color.border.inverse},
           0 0 0 ${system.space.x1} ${brand.alert.base},
           0 0 0 ${px2rem(5)} ${brand.alert.darkest}`,
         },
@@ -128,7 +128,7 @@ const switchBackgroundStencil = createStencil({
     borderRadius: system.shape.round,
     padding: `${system.space.zero} ${px2rem(2)}`,
     transition: 'background-color 200ms ease',
-    backgroundColor: base.licorice200,
+    backgroundColor: system.color.bg.muted.soft,
   },
 });