@workday/canvas-kit-react 14.3.11 → 14.3.12

package/radio/lib/Radio.tsx

@@ -10,7 +10,7 @@ import {
 } from '@workday/canvas-kit-react/common';
 import {borderRadius, colors, inputColors, space} from '@workday/canvas-kit-react/tokens';
 import {LabelText} from '@workday/canvas-kit-react/text';
-import {px2rem} from '@workday/canvas-kit-styling';
+import {maybeWrapCSSVariables, px2rem} from '@workday/canvas-kit-styling';
 
 /**
  * @deprecated ⚠️ `RadioProps` in Main has been deprecated and will be removed in a future major version. Please use [`Radio` in Preview](https://workday.github.io/canvas-kit/?path=/docs/preview-inputs-radio--docs) instead.
@@ -137,14 +137,14 @@ const RadioInput = styled('input')<RadioProps & StyledType>(
       backgroundColor: checked
         ? variant === 'inverse'
           ? colors.frenchVanilla100
-          : themePrimary.main
+          : maybeWrapCSSVariables(themePrimary.main)
         : disabled
         ? inputColors.disabled.background
         : 'white',
       borderColor: checked
         ? variant === 'inverse'
           ? colors.soap300
-          : themePrimary.main
+          : maybeWrapCSSVariables(themePrimary.main)
         : disabled
         ? inputColors.disabled.border
         : variant === 'inverse'
@@ -174,7 +174,8 @@ const RadioInput = styled('input')<RadioProps & StyledType>(
         innerColor: variant === 'inverse' ? colors.blackPepper400 : undefined,
         outerColor: variant === 'inverse' ? colors.frenchVanilla100 : themeFocusOutline,
       }),
-      borderColor: variant === 'inverse' ? colors.frenchVanilla100 : themePrimary.main,
+      borderColor:
+        variant === 'inverse' ? colors.frenchVanilla100 : maybeWrapCSSVariables(themePrimary.main),
       borderWidth: '2px',
     },
     ...mouseFocusBehavior({
@@ -187,14 +188,14 @@ const RadioInput = styled('input')<RadioProps & StyledType>(
         borderColor: checked
           ? variant === 'inverse'
             ? colors.soap300
-            : themePrimary.main
+            : maybeWrapCSSVariables(themePrimary.main)
           : inputColors.border,
       },
       '&:focus:hover ~ div:first-of-type, &:focus:active ~ div:first-of-type': {
         borderColor: checked
           ? variant === 'inverse'
             ? colors.soap300
-            : themePrimary.main
+            : maybeWrapCSSVariables(themePrimary.main)
           : variant === 'inverse'
           ? colors.soap300
           : inputColors.hoverBorder,
@@ -233,7 +234,7 @@ const RadioBackground = styled('div')<RadioProps>(
     borderColor: checked
       ? variant === 'inverse'
         ? colors.soap300
-        : themePrimary.main
+        : maybeWrapCSSVariables(themePrimary.main)
       : disabled
       ? colors.licorice100
       : variant === 'inverse'
@@ -242,7 +243,7 @@ const RadioBackground = styled('div')<RadioProps>(
     backgroundColor: checked
       ? variant === 'inverse'
         ? colors.frenchVanilla100
-        : themePrimary.main
+        : maybeWrapCSSVariables(themePrimary.main)
       : disabled
       ? inputColors.disabled.background
       : 'white',
@@ -263,8 +264,8 @@ const RadioCheck = styled('div')<Pick<RadioProps, 'checked' | 'variant'>>(
   ({theme, variant}) => ({
     backgroundColor:
       variant === 'inverse'
-        ? theme.canvas.palette.primary.main
-        : theme.canvas.palette.primary.contrast,
+        ? maybeWrapCSSVariables(theme.canvas.palette.primary.main)
+        : maybeWrapCSSVariables(theme.canvas.palette.primary.contrast),
   }),
   ({checked}) => ({
     opacity: checked ? 1 : 0,