@workday/canvas-kit-preview-react 16.0.0-alpha.0444-next.0 → 16.0.0-alpha.0449-next.0

package/radio/lib/StyledRadioButton.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import {ExtractProps, StyledType, createComponent} from '@workday/canvas-kit-react/common';
 import {Box, Flex, mergeStyles} from '@workday/canvas-kit-react/layout';
 import {CSProps, createStencil, handleCsProp, px2rem} from '@workday/canvas-kit-styling';
-import {base, system} from '@workday/canvas-tokens-web';
+import {system} from '@workday/canvas-tokens-web';
 
 import {RadioLabelContext} from './RadioLabel';
 
@@ -17,23 +17,23 @@ export const radioInputStencil = createStencil({
   },
   base: {
     cursor: 'pointer',
-    height: base.legacy.size225,
-    width: base.legacy.size225,
+    height: system.legacy.size.xs,
+    width: system.legacy.size.xs,
     borderRadius: system.legacy.shape.full,
     position: 'absolute',
     margin: 0,
+    opacity: system.opacity.zero,
     '&:focus-visible, &.focus, &:active': {
-      outline: 'transparent',
+      outline: `${px2rem(1)} solid transparent`,
     },
     '&:disabled, &.disabled': {
       cursor: 'auto',
-      opacity: system.opacity.disabled,
       // This creates the inner circle when the Radio is checked.
       // The backgroundColor represents the dot in the middle of the radio.
       // The borderColor represents the border around the middle dot of the radio.
       '&:checked + .cnvs-radio-check, &.checked + .cnvs-radio-check': {
         backgroundColor: system.legacy.color.surface.default, // inner circle background color
-        border: `${px2rem(5)} solid ${system.legacy.color.brand.accent.primary}`, // inner circle border color
+        border: `${px2rem(5)} solid ${system.legacy.color.brand.accent.positive}`, // inner circle border color
       },
     },
 
@@ -45,8 +45,8 @@ export const radioInputStencil = createStencil({
       backgroundColor: system.color.bg.default,
       boxSizing: 'border-box',
       border: `${px2rem(1)} solid ${system.color.border.input.default}`,
-      height: base.legacy.size225,
-      width: base.legacy.size225,
+      height: system.legacy.size.xxxs,
+      width: system.legacy.size.xxxs,
       borderRadius: system.legacy.shape.full,
       justifyContent: 'center',
       pointerEvents: 'none',
@@ -69,7 +69,7 @@ export const radioInputStencil = createStencil({
     // The borderColor represents the border around the middle dot of the radio.
     '&:checked + .cnvs-radio-check, &.checked + .cnvs-radio-check': {
       backgroundColor: system.legacy.color.surface.default, // inner circle background color
-      border: `${px2rem(5)} solid ${system.legacy.color.brand.accent.primary}`, // inner circle border color
+      border: `${px2rem(5)} solid ${system.legacy.color.brand.accent.positive}`, // inner circle border color
     },
 
     '&:focus-visible:checked + .cnvs-radio-check, &:focus-visible:hover:checked + .cnvs-radio-check, &.focus:checked + .cnvs-radio-check, &.focus:hover:checked + .cnvs-radio-check':
@@ -96,7 +96,7 @@ export const radioInputStencil = createStencil({
           // The backgroundColor represents the dot in the middle of the radio.
           // The borderColor represents the border around the middle dot of the radio.
           [`&:checked + ${checkPart}, &.checked + ${checkPart}`]: {
-            backgroundColor: system.legacy.color.brand.accent.primary, // inner circle background color
+            backgroundColor: system.legacy.color.brand.accent.positive, // inner circle background color
             borderColor: system.legacy.color.border.inverse.default, // inner circle border color
           },
         },
@@ -135,29 +135,31 @@ const StyledRadioInput = createComponent('input')<StyledRadioButtonProps & Style
 
 export const radioInputWrapperStencil = createStencil({
   base: {
-    height: base.legacy.size225,
-    width: base.legacy.size225,
+    height: system.legacy.size.xxs,
+    width: system.legacy.size.xxs,
     flex: '0 0 auto',
+    alignItems: 'center',
+    justifyContent: 'center',
     // Hover Ripple element
     '::before': {
       content: "''",
       position: 'absolute',
       borderRadius: system.legacy.shape.full,
-      height: base.legacy.size225,
+      height: system.legacy.size.xxxs,
       transition: 'box-shadow 150ms ease-out',
-      width: base.legacy.size225,
+      width: system.legacy.size.xxxs,
       pointerEvents: 'none',
       opacity: system.opacity.full,
     },
     '&:hover:before, &.hover:before': {
-      boxShadow: `0 0 0 ${px2rem(7)} ${system.legacy.color.surface.overlay.hover.default}`,
+      boxShadow: `0 0 0 ${px2rem(4)} ${system.legacy.color.surface.overlay.hover.default}`,
     },
   },
   modifiers: {
     variant: {
       inverse: {
         '&:hover:before, &.hover:before': {
-          boxShadow: `0 0 0 ${px2rem(7)} ${system.legacy.color.surface.overlay.hover.inverse}`,
+          boxShadow: `0 0 0 ${px2rem(4)} ${system.legacy.color.surface.overlay.hover.inverse}`,
         },
       },
     },

package/switch/lib/SwitchBackground.tsx

@@ -1,6 +1,6 @@
 import {createComponent} from '@workday/canvas-kit-react/common';
 import {createStencil, handleCsProp, px2rem} from '@workday/canvas-kit-styling';
-import {base, system} from '@workday/canvas-tokens-web';
+import {system} from '@workday/canvas-tokens-web';
 
 export const switchBackgroundStencil = createStencil({
   base: {
@@ -10,14 +10,14 @@ export const switchBackgroundStencil = createStencil({
     pointerEvents: 'none',
     // This is used in "High Contrast Mode" to show a border on the Switch background.
     border: `${px2rem(1)} solid transparent`,
-    height: base.legacy.size225,
+    height: system.legacy.size.xxs,
     // This value is in the spec and there is no token for this size.
     // calc() does not work inside of cssVar() as the first value.
     width: px2rem(34),
     borderRadius: system.legacy.shape.full,
-    padding: `0 ${px2rem(2)}`,
+    padding: `0 ${px2rem(1)}`,
     transition: 'background-color 200ms ease',
-    backgroundColor: system.legacy.color.accent.muted.soft,
+    backgroundColor: system.legacy.color.accent.muted.default,
   },
 });
 

package/switch/lib/SwitchCircle.tsx

@@ -1,13 +1,13 @@
 import {createComponent} from '@workday/canvas-kit-react/common';
 import {createStencil, handleCsProp, px2rem} from '@workday/canvas-kit-styling';
-import {base, system} from '@workday/canvas-tokens-web';
+import {system} from '@workday/canvas-tokens-web';
 
 import {SwitchProps} from './Switch';
 
 export const switchCircleStencil = createStencil({
   base: {
-    width: base.legacy.size150,
-    height: base.legacy.size150,
+    width: system.legacy.size.xxxs,
+    height: system.legacy.size.xxxs,
     borderRadius: system.legacy.shape.full,
     // This is used in "High Contrast Mode" to show a border on the Switch thumb.
     border: `${px2rem(1)} solid transparent`,
@@ -20,9 +20,9 @@ export const switchCircleStencil = createStencil({
   modifiers: {
     checked: {
       true: {
-        transform: `translateX(${px2rem(16)})`,
+        transform: `translateX(${px2rem(14)})`,
         ':dir(rtl)': {
-          transform: `translateX(${px2rem(-16)})`,
+          transform: `translateX(${px2rem(-14)})`,
         },
       },
     },

package/switch/lib/SwitchContainer.tsx

@@ -1,12 +1,12 @@
 import {createComponent} from '@workday/canvas-kit-react/common';
 import {createStencil, handleCsProp, px2rem} from '@workday/canvas-kit-styling';
-import {base, system} from '@workday/canvas-tokens-web';
+import {system} from '@workday/canvas-tokens-web';
 
 export const switchContainerStencil = createStencil({
   base: {
     position: 'relative',
     marginBlockStart: system.legacy.gap.xs,
-    height: base.legacy.size225,
+    height: system.legacy.size.xxs,
     // This value is in the spec and there is no token for this size.
     // calc() does not work inside of cssVar() as the first value.
     width: px2rem(34),

package/switch/lib/SwitchIcon.tsx

@@ -13,9 +13,9 @@ export const switchIconStencil = createStencil({
     position: 'absolute',
     transition: 'transform 0ms',
     pointerEvents: 'none',
-    transform: `translateX(${px2rem(12)})`,
+    transform: `translateX(${px2rem(14)})`,
     ':dir(rtl)': {
-      transform: `translateX(${px2rem(-12)})`,
+      transform: `translateX(${px2rem(-14)})`,
     },
   },
   modifiers: {

package/switch/lib/SwitchInput.tsx

@@ -10,7 +10,7 @@ export const switchInputStencil = createStencil({
     position: 'absolute',
     // This allows for the input to be the same size as the clickable area for the Switch
     margin: 0,
-    height: base.legacy.size225,
+    height: system.legacy.size.xs,
     // This value is in the spec and there is no token for this size.
     // calc() does not work inside of cssVar() as the first value.
     width: px2rem(34),
@@ -23,7 +23,7 @@ export const switchInputStencil = createStencil({
     },
     '&:checked, &.checked': {
       '& ~ div:first-of-type': {
-        backgroundColor: system.legacy.color.brand.accent.primary,
+        backgroundColor: system.legacy.color.brand.accent.positive,
       },
       '&:disabled, &.disabled': {
         '& ~ div:first-of-type': {