@workday/canvas-kit-preview-react 11.0.0-alpha.669-next.0 → 11.0.0-alpha.682-next.0

package/dist/commonjs/radio/lib/RadioGroup.d.ts

@@ -1,7 +1,8 @@
 import React from 'react';
-import { Themeable, ErrorType, ExtractProps } from '@workday/canvas-kit-react/common';
-import { Flex } from '@workday/canvas-kit-react/layout';
-export interface RadioGroupProps extends Themeable, ExtractProps<typeof Flex, never> {
+import { Themeable, ErrorType } from '@workday/canvas-kit-react/common';
+import { FlexProps } from '@workday/canvas-kit-react/layout';
+import { CSProps } from '@workday/canvas-kit-styling';
+export interface RadioGroupProps extends Themeable, CSProps, FlexProps {
     /**
      * The type of error associated with the RadioGroup (if applicable).
      */
@@ -17,9 +18,7 @@ export interface RadioGroupProps extends Themeable, ExtractProps<typeof Flex, ne
  * </RadioGroup>
  * ```
  */
-export declare const RadioGroup: import("@workday/canvas-kit-react/common").ElementComponentM<import("@workday/canvas-kit-react/common").ElementComponent<"div", Omit<import("@workday/canvas-kit-react/layout").BoxProps, "display"> & import("@workday/canvas-kit-react/layout").FlexStyleProps> & {
-    Item: import("@workday/canvas-kit-react/common").ElementComponent<"div", import("@workday/canvas-kit-react/layout").BackgroundStyleProps & import("@workday/canvas-kit-react/layout/lib/utils/border/color").BorderColorStyleProps & import("@workday/canvas-kit-react/layout/lib/utils/border/lineStyle").BorderLineStyleProps & import("@workday/canvas-kit-react/layout/lib/utils/border/radius").BorderRadiusStyleProps & import("@workday/canvas-kit-react/layout/lib/utils/border/shorthand").BorderShorthandStyleProps & import("@workday/canvas-kit-react/layout/lib/utils/border/width").BorderWidthStyleProps & import("@workday/canvas-kit-react/layout").ColorStyleProps & import("@workday/canvas-kit-react/layout").DepthStyleProps & import("@workday/canvas-kit-react/layout").FlexItemStyleProps & import("@workday/canvas-kit-react/layout").GridItemStyleProps & import("@workday/canvas-kit-react/layout").LayoutStyleProps & import("@workday/canvas-kit-react/layout").OtherStyleProps & import("@workday/canvas-kit-react/layout").PositionStyleProps & import("@workday/canvas-kit-react/layout").SpaceStyleProps & import("@workday/canvas-kit-react/layout").TextStyleProps & import("@workday/canvas-kit-styling").CSProps>;
-}, RadioGroupProps & Partial<{
+export declare const RadioGroup: import("@workday/canvas-kit-react/common").ElementComponentM<"div", RadioGroupProps & Partial<{
     'aria-describedby': string | undefined;
     name: string;
     value: string | number | undefined;

package/dist/commonjs/radio/lib/RadioGroup.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RadioGroup.d.ts","sourceRoot":"","sources":["../../../../radio/lib/RadioGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAEL,SAAS,EACT,SAAS,EAET,YAAY,EACb,MAAM,kCAAkC,CAAC;AAG1C,OAAO,EAAC,IAAI,EAAC,MAAM,kCAAkC,CAAC;AAItD,MAAM,WAAW,eAAgB,SAAQ,SAAS,EAAE,YAAY,CAAC,OAAO,IAAI,EAAE,KAAK,CAAC;IAClF;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB;AAED;;;;;;;;;GASG;AACH,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;IAInB;;;;;;;;;;OAUG;;;;;;;;;;;IAEH;;;;;;;;;;;;OAYG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8BL,CAAC"}
+{"version":3,"file":"RadioGroup.d.ts","sourceRoot":"","sources":["../../../../radio/lib/RadioGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAkB,SAAS,EAAE,SAAS,EAAC,MAAM,kCAAkC,CAAC;AAEvF,OAAO,EAAC,SAAS,EAAc,MAAM,kCAAkC,CAAC;AAGxE,OAAO,EAAgB,OAAO,EAAe,MAAM,6BAA6B,CAAC;AAGjF,MAAM,WAAW,eAAgB,SAAQ,SAAS,EAAE,OAAO,EAAE,SAAS;IACpE;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB;AA8BD;;;;;;;;;GASG;AACH,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;IAInB;;;;;;;;;;OAUG;;;;;;;;;;;IAEH;;;;;;;;;;;;OAYG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAKL,CAAC"}

package/dist/commonjs/radio/lib/RadioGroup.js

@@ -6,11 +6,37 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.RadioGroup = void 0;
 const react_1 = __importDefault(require("react"));
 const common_1 = require("@workday/canvas-kit-react/common");
-const tokens_1 = require("@workday/canvas-kit-react/tokens");
 const useRadioModel_1 = require("./hooks/useRadioModel");
 const layout_1 = require("@workday/canvas-kit-react/layout");
 const RadioLabel_1 = require("./RadioLabel");
 const RadioButton_1 = require("./RadioButton");
+const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
+const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
+/**
+ * Styles for RadioGroup
+ */
+const radioGroupStyles = canvas_kit_styling_1.createStencil({
+    base: {
+        display: 'flex',
+        flexDirection: 'column',
+        borderRadius: canvas_tokens_web_1.system.shape.x1,
+        gap: canvas_tokens_web_1.system.space.x2,
+        padding: `${canvas_kit_styling_1.px2rem(10)} ${canvas_tokens_web_1.system.space.x3} ${canvas_tokens_web_1.system.space.x2}`,
+        margin: `${canvas_kit_styling_1.calc.negate(canvas_tokens_web_1.system.space.x1)} ${canvas_kit_styling_1.calc.negate(canvas_tokens_web_1.system.space.x3)}`,
+        transition: '100ms box-shadow',
+        width: 'fit-content',
+    },
+    modifiers: {
+        error: {
+            error: {
+                boxShadow: `inset 0 0 0 ${canvas_kit_styling_1.px2rem(2)} ${canvas_tokens_web_1.brand.error.base}`,
+            },
+            alert: {
+                boxShadow: `inset 0 0 0 ${canvas_kit_styling_1.px2rem(1)} ${canvas_tokens_web_1.brand.alert.darkest}, inset 0 0 0 ${canvas_kit_styling_1.px2rem(3)} ${canvas_tokens_web_1.brand.alert.base}`,
+            },
+        },
+    },
+});
 /**
  * Use `RadioGroup` to group a collection of `RadioGroup.RadioButton` components under a common `name`.
  *
@@ -21,7 +47,7 @@ const RadioButton_1 = require("./RadioButton");
  * </RadioGroup>
  * ```
  */
-exports.RadioGroup = common_1.createContainer(layout_1.Flex)({
+exports.RadioGroup = common_1.createContainer('div')({
     displayName: 'RadioGroup',
     modelHook: useRadioModel_1.useRadioModel,
     subComponents: {
@@ -52,11 +78,6 @@ exports.RadioGroup = common_1.createContainer(layout_1.Flex)({
          */
         Label: RadioLabel_1.RadioLabel,
     },
-})(({ children, error, theme, ...elemProps }, Element, model) => {
-    const errorColors = common_1.getErrorColors(error, theme);
-    return (react_1.default.createElement(layout_1.Flex, Object.assign({ as: Element, boxSizing: "border-box", flexDirection: "column", borderRadius: "m", paddingTop: "10px", paddingBottom: "8px", paddingX: "xs", gap: "xxs", marginY: `-${tokens_1.space.xxxs}`, transition: "100ms box-shadow", marginX: `-${tokens_1.space.xs}`, width: "fit-content", cs: {
-            boxShadow: errorColors.outer !== errorColors.inner
-                ? `inset 0 0 0 1px ${errorColors.outer}, inset 0 0 0 3px ${errorColors.inner}`
-                : `inset 0 0 0 2px ${errorColors.inner}`,
-        } }, elemProps), children));
+})(({ children, error, theme, ...elemProps }, Element) => {
+    return react_1.default.createElement(Element, Object.assign({}, layout_1.mergeStyles(elemProps, radioGroupStyles({ error }))), children);
 });

package/dist/commonjs/radio/lib/RadioLabel.d.ts

@@ -1,12 +1,13 @@
 import React from 'react';
 import { Themeable, ExtractProps } from '@workday/canvas-kit-react/common';
 import { Flex } from '@workday/canvas-kit-react/layout';
+import { CSProps } from '@workday/canvas-kit-styling';
 interface RadioLabelContextInterface {
     disabled?: boolean | undefined;
     variant?: 'inverse' | undefined;
     value?: string | number;
 }
-export interface RadioLabelProps extends Themeable, ExtractProps<typeof Flex, never>, RadioLabelContextInterface {
+export interface RadioLabelProps extends Themeable, CSProps, ExtractProps<typeof Flex, never>, RadioLabelContextInterface {
     /**
      * The Radio input and label children of RadioLabel
      */

package/dist/commonjs/radio/lib/RadioLabel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RadioLabel.d.ts","sourceRoot":"","sources":["../../../../radio/lib/RadioLabel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAC,SAAS,EAAsB,YAAY,EAAC,MAAM,kCAAkC,CAAC;AAE7F,OAAO,EAAC,IAAI,EAAC,MAAM,kCAAkC,CAAC;AAItD,UAAU,0BAA0B;IAClC,QAAQ,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAC/B,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;IAChC,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CACzB;AACD,MAAM,WAAW,eACf,SAAQ,SAAS,EACf,YAAY,CAAC,OAAO,IAAI,EAAE,KAAK,CAAC,EAChC,0BAA0B;IAC5B;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,eAAO,MAAM,iBAAiB,2CAAwD,CAAC;AAEvF,eAAO,MAAM,UAAU;;;;;;;;;;IAInB;;;;;;;;;;;OAWG;;;;;;;;;;;IAEH;;;;;;;;;;;OAWG;;;;;;;;;;;CAkBL,CAAC"}
+{"version":3,"file":"RadioLabel.d.ts","sourceRoot":"","sources":["../../../../radio/lib/RadioLabel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAC,SAAS,EAAsB,YAAY,EAAC,MAAM,kCAAkC,CAAC;AAE7F,OAAO,EAAC,IAAI,EAAc,MAAM,kCAAkC,CAAC;AAGnE,OAAO,EAAgB,OAAO,EAAC,MAAM,6BAA6B,CAAC;AAGnE,UAAU,0BAA0B;IAClC,QAAQ,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAC/B,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;IAChC,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CACzB;AACD,MAAM,WAAW,eACf,SAAQ,SAAS,EACf,OAAO,EACP,YAAY,CAAC,OAAO,IAAI,EAAE,KAAK,CAAC,EAChC,0BAA0B;IAC5B;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAWD,eAAO,MAAM,iBAAiB,2CAAwD,CAAC;AAEvF,eAAO,MAAM,UAAU;;;;;;;;;;IAInB;;;;;;;;;;;OAWG;;;;;;;;;;;IAEH;;;;;;;;;;;OAWG;;;;;;;;;;;CAWL,CAAC"}

package/dist/commonjs/radio/lib/RadioLabel.js

@@ -10,6 +10,16 @@ const useRadioModel_1 = require("./hooks/useRadioModel");
 const layout_1 = require("@workday/canvas-kit-react/layout");
 const RadioInput_1 = require("./RadioInput");
 const RadioText_1 = require("./RadioText");
+const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
+const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
+const radioLabelStyles = canvas_kit_styling_1.createStencil({
+    base: {
+        alignItems: 'flex-start',
+        minHeight: canvas_tokens_web_1.system.space.x6,
+        position: 'relative',
+        gap: canvas_tokens_web_1.system.space.x3,
+    },
+});
 exports.RadioLabelContext = react_1.default.createContext({});
 exports.RadioLabel = common_1.createSubcomponent('label')({
     displayName: 'Radio.Label',
@@ -42,7 +52,7 @@ exports.RadioLabel = common_1.createSubcomponent('label')({
          */
         Text: RadioText_1.RadioText,
     },
-})(({ children, variant, disabled, value, ...elemProps }, Element, model) => {
+})(({ children, variant, disabled, value, ...elemProps }, Element) => {
     return (react_1.default.createElement(exports.RadioLabelContext.Provider, { value: { variant, disabled } },
-        react_1.default.createElement(layout_1.Flex, Object.assign({ as: Element, alignItems: "flex-start", minHeight: "m", position: "relative", gap: "xs" }, elemProps), children)));
+        react_1.default.createElement(layout_1.Flex, Object.assign({ as: Element }, layout_1.mergeStyles(elemProps, radioLabelStyles({ variant }))), children)));
 });

package/dist/commonjs/radio/lib/RadioText.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RadioText.d.ts","sourceRoot":"","sources":["../../../../radio/lib/RadioText.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,eAAO,MAAM,SAAS;;;;;;;;;EAwBpB,CAAC"}
+{"version":3,"file":"RadioText.d.ts","sourceRoot":"","sources":["../../../../radio/lib/RadioText.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAqC1B,eAAO,MAAM,SAAS;;;;;;;;;EAUpB,CAAC"}

package/dist/commonjs/radio/lib/RadioText.js

@@ -6,23 +6,43 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.RadioText = void 0;
 const react_1 = __importDefault(require("react"));
 const common_1 = require("@workday/canvas-kit-react/common");
-const tokens_1 = require("@workday/canvas-kit-react/tokens");
 const useRadioModel_1 = require("./hooks/useRadioModel");
 const RadioLabel_1 = require("./RadioLabel");
 const text_1 = require("@workday/canvas-kit-react/text");
+const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
+const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
+const layout_1 = require("@workday/canvas-kit-react/layout");
+const radioTextStyles = canvas_kit_styling_1.createStencil({
+    base: {
+        ...canvas_tokens_web_1.system.type.subtext.large,
+        cursor: 'pointer',
+        opacity: '1',
+        color: canvas_tokens_web_1.base.blackPepper300,
+    },
+    modifiers: {
+        variant: {
+            inverse: {
+                color: canvas_tokens_web_1.base.frenchVanilla100,
+            },
+        },
+        disabled: {
+            true: {
+                cursor: 'none',
+                color: canvas_tokens_web_1.base.licorice100,
+            },
+        },
+    },
+    compound: [
+        {
+            modifiers: { variant: 'inverse', disabled: true },
+            styles: { color: canvas_tokens_web_1.base.frenchVanilla100, opacity: canvas_tokens_web_1.system.opacity.disabled },
+        },
+    ],
+});
 exports.RadioText = common_1.createSubcomponent('span')({
     displayName: 'RadioButton.Text',
     modelHook: useRadioModel_1.useRadioModel,
 })(({ children, ...elemProps }, Element) => {
-    const { disabled, variant } = react_1.default.useContext(RadioLabel_1.RadioLabelContext);
-    const inverse = variant === 'inverse';
-    return (react_1.default.createElement(text_1.Text, Object.assign({ as: Element, style: {
-            cursor: !disabled ? 'pointer' : undefined,
-            opacity: disabled && inverse ? '.4' : '1',
-            color: inverse
-                ? tokens_1.colors.frenchVanilla100
-                : disabled
-                    ? tokens_1.inputColors.disabled.text
-                    : elemProps.color,
-        }, typeLevel: "subtext.large" }, elemProps), children));
+    const { variant, disabled } = react_1.default.useContext(RadioLabel_1.RadioLabelContext);
+    return (react_1.default.createElement(text_1.Text, Object.assign({ as: Element }, layout_1.mergeStyles(elemProps, radioTextStyles({ variant, disabled }))), children));
 });

package/dist/commonjs/radio/lib/StyledRadioButton.d.ts

@@ -1,6 +1,7 @@
-import { ExtractProps, Themeable } from '@workday/canvas-kit-react/common';
+import { ExtractProps } from '@workday/canvas-kit-react/common';
 import { Box } from '@workday/canvas-kit-react/layout';
-export interface StyledRadioButtonProps extends ExtractProps<typeof Box, 'input'>, Themeable {
+import { CSProps } from '@workday/canvas-kit-styling';
+export interface StyledRadioButtonProps extends CSProps {
     variant?: 'inverse' | undefined;
 }
 export interface StyledRadioButtonProps extends ExtractProps<typeof Box, 'input'> {

package/dist/commonjs/radio/lib/StyledRadioButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StyledRadioButton.d.ts","sourceRoot":"","sources":["../../../../radio/lib/StyledRadioButton.tsx"],"names":[],"mappings":"AACA,OAAO,EAML,YAAY,EACZ,SAAS,EACV,MAAM,kCAAkC,CAAC;AAG1C,OAAO,EAAC,GAAG,EAAO,MAAM,kCAAkC,CAAC;AAK3D,MAAM,WAAW,sBAAuB,SAAQ,YAAY,CAAC,OAAO,GAAG,EAAE,OAAO,CAAC,EAAE,SAAS;IAC1F,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;CACjC;AAiID,MAAM,WAAW,sBAAuB,SAAQ,YAAY,CAAC,OAAO,GAAG,EAAE,OAAO,CAAC;IAC/E,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;CACjC;AAED;;;GAGG;AACH,eAAO,MAAM,iBAAiB,8FAuB5B,CAAC"}
+{"version":3,"file":"StyledRadioButton.d.ts","sourceRoot":"","sources":["../../../../radio/lib/StyledRadioButton.tsx"],"names":[],"mappings":"AACA,OAAO,EAIL,YAAY,EACb,MAAM,kCAAkC,CAAC;AAE1C,OAAO,EAAC,GAAG,EAAO,MAAM,kCAAkC,CAAC;AAC3D,OAAO,EAAC,OAAO,EAA4C,MAAM,6BAA6B,CAAC;AAO/F,MAAM,WAAW,sBAAuB,SAAQ,OAAO;IACrD,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;CACjC;AA8MD,MAAM,WAAW,sBAAuB,SAAQ,YAAY,CAAC,OAAO,GAAG,EAAE,OAAO,CAAC;IAC/E,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;CACjC;AAED;;;GAGG;AACH,eAAO,MAAM,iBAAiB,8FAY5B,CAAC"}

package/dist/commonjs/radio/lib/StyledRadioButton.js

@@ -6,109 +6,198 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.StyledRadioButton = void 0;
 const react_1 = __importDefault(require("react"));
 const common_1 = require("@workday/canvas-kit-react/common");
-const tokens_1 = require("@workday/canvas-kit-react/tokens");
 const layout_1 = require("@workday/canvas-kit-react/layout");
+const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
+const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
+const RadioLabel_1 = require("./RadioLabel");
 const radioWidth = 18;
 const radioHeight = 18;
-const StyledRadioInput = common_1.styled(layout_1.Box.as('input'))({
-    '&:focus, &:active': {
-        outline: 'transparent',
-    },
-}, ({ disabled, variant, theme: { canvas: { palette: { primary: themePrimary, common: { focusOutline: themeFocusOutline }, }, }, }, }) => ({
-    cursor: !disabled ? 'pointer' : undefined,
-    opacity: disabled && variant === 'inverse' ? '.4' : '1',
-    height: '18px',
-    width: '18px',
-    // Circle element styles the radio as checked or unchecked
-    '+ .cnvs-radio-check': {
-        display: 'flex',
-        flexDirection: 'column',
-        alignItems: 'center',
-        backgroundColor: disabled ? tokens_1.inputColors.disabled.background : tokens_1.colors.frenchVanilla100,
-        borderRadius: '999px',
-        boxSizing: 'border-box',
-        border: `1px solid`,
-        borderColor: disabled
-            ? tokens_1.inputColors.disabled.border
-            : variant === 'inverse'
-                ? tokens_1.colors.soap300
-                : tokens_1.inputColors.border,
-        height: '18px',
-        width: '18px',
-        justifyContent: 'center',
-        pointerEvents: 'none',
+const radioInputStyles = canvas_kit_styling_1.createStencil({
+    base: {
+        cursor: 'pointer',
+        opacity: '1',
+        height: canvas_kit_styling_1.px2rem(radioHeight),
+        width: canvas_kit_styling_1.px2rem(radioWidth),
+        borderRadius: canvas_tokens_web_1.system.shape.round,
         position: 'absolute',
-        transition: 'border 200ms ease, background 200ms',
-        opacity: disabled && variant === 'inverse' ? '.4' : '1',
-    },
-    '&:hover + .cnvs-radio-check': {
-        borderColor: disabled
-            ? tokens_1.inputColors.disabled.border
-            : variant === 'inverse'
-                ? tokens_1.colors.soap300
-                : tokens_1.colors.licorice500,
-    },
-    '&:focus + .cnvs-radio-check': {
-        borderColor: disabled
-            ? tokens_1.inputColors.disabled.border
-            : variant === 'inverse'
-                ? tokens_1.colors.soap300
-                : tokens_1.colors.blueberry400,
-    },
-    '&:checked + .cnvs-radio-check': {
-        backgroundColor: variant === 'inverse' ? themePrimary.main : themePrimary.contrast,
-        border: `5px solid`,
-        borderColor: variant === 'inverse' ? tokens_1.colors.frenchVanilla100 : themePrimary.main, // outer circle color
+        margin: '0',
+        '&:focus-visible, &.focus, &:active': {
+            outline: 'transparent',
+        },
+        '&:disabled, &.disabled': {
+            cursor: 'auto',
+            '+ .cnvs-radio-check': {
+                borderColor: canvas_tokens_web_1.base.licorice100,
+                backgroundColor: canvas_tokens_web_1.base.soap100,
+            },
+            '&:hover + .cnvs-radio-check, &.hover + .cnvs-radio-check': {
+                borderColor: canvas_tokens_web_1.base.licorice100,
+            },
+            // 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: canvas_tokens_web_1.brand.primary.accent,
+                border: `5px solid ${canvas_tokens_web_1.brand.primary.base}`, // inner circle border color
+            },
+        },
+        // Circle element styles the radio as checked or unchecked
+        '+ .cnvs-radio-check': {
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            backgroundColor: canvas_tokens_web_1.base.frenchVanilla100,
+            borderRadius: canvas_tokens_web_1.system.shape.round,
+            boxSizing: 'border-box',
+            border: `${canvas_kit_styling_1.px2rem(1)} solid ${canvas_tokens_web_1.base.licorice200}`,
+            height: canvas_kit_styling_1.px2rem(radioHeight),
+            width: canvas_kit_styling_1.px2rem(radioWidth),
+            justifyContent: 'center',
+            pointerEvents: 'none',
+            position: 'absolute',
+            transition: 'border 200ms ease, background 200ms',
+            opacity: '1',
+        },
+        '&:hover + .cnvs-radio-check, &.hover + .cnvs-radio-check': {
+            borderColor: canvas_tokens_web_1.base.licorice500,
+        },
+        '&:focus-visible + .cnvs-radio-check, &.focus + .cnvs-radio-check': {
+            borderColor: canvas_tokens_web_1.base.blueberry400,
+            ...common_1.focusRing({
+                width: 1,
+                separation: 0,
+                animate: false,
+                innerColor: canvas_tokens_web_1.base.frenchVanilla100,
+                outerColor: canvas_tokens_web_1.brand.common.focusOutline,
+            }),
+        },
+        '&:focus-visible:hover + .cnvs-radio-check, &.focus:hover + .cnvs-radio-check': {
+            outline: 'transparent',
+        },
+        // 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: canvas_tokens_web_1.brand.primary.accent,
+            border: `${canvas_kit_styling_1.px2rem(5)} solid ${canvas_tokens_web_1.brand.primary.base}`, // 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': {
+            outline: 'transparent',
+            ...common_1.focusRing({
+                width: 2,
+                separation: 2,
+                animate: false,
+                innerColor: canvas_tokens_web_1.base.frenchVanilla100,
+                outerColor: canvas_tokens_web_1.brand.common.focusOutline,
+            }),
+        },
     },
-    '&:focus + .cnvs-radio-check, &:focus:hover + .cnvs-radio-check': {
-        outline: 'transparent',
-        ...common_1.focusRing({
-            width: variant === 'inverse' ? 2 : 1,
-            separation: 0,
-            animate: false,
-            innerColor: variant === 'inverse' ? tokens_1.colors.blackPepper400 : tokens_1.colors.frenchVanilla100,
-            outerColor: variant === 'inverse' ? tokens_1.colors.frenchVanilla100 : themeFocusOutline,
-        }),
+    modifiers: {
+        variant: {
+            inverse: {
+                '+ .cnvs-radio-check': {
+                    backgroundColor: canvas_tokens_web_1.base.soap100,
+                    borderColor: canvas_tokens_web_1.base.soap300,
+                },
+                '&:disabled, &.disabled': {
+                    opacity: canvas_tokens_web_1.system.opacity.disabled,
+                    '+ .cnvs-radio-check': {
+                        backgroundColor: canvas_tokens_web_1.base.soap100,
+                        borderColor: canvas_tokens_web_1.base.licorice100,
+                        opacity: canvas_tokens_web_1.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: canvas_tokens_web_1.brand.primary.base,
+                        borderColor: canvas_tokens_web_1.base.frenchVanilla100, // inner circle border color
+                    },
+                },
+                '&:hover + .cnvs-radio-check, &.hover + .cnvs-radio-check': {
+                    borderColor: canvas_tokens_web_1.base.soap300,
+                },
+                '&:focus-visible + .cnvs-radio-check, &.focus + .cnvs-radio-check': {
+                    borderColor: canvas_tokens_web_1.base.soap300,
+                },
+                // 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: canvas_tokens_web_1.brand.primary.base,
+                    borderColor: canvas_tokens_web_1.base.frenchVanilla100, // inner circle border color
+                },
+                '&:focus-visible + .cnvs-radio-check, &:focus-visible:hover + .cnvs-radio-check, &.focus + .cnvs-radio-check, &.focus:hover + .cnvs-radio-check': {
+                    ...common_1.focusRing({
+                        width: 2,
+                        separation: 0,
+                        innerColor: canvas_tokens_web_1.base.blackPepper400,
+                        outerColor: canvas_tokens_web_1.base.frenchVanilla100,
+                    }),
+                },
+                '&:focus-visible:checked + .cnvs-radio-check, &:focus-visible:hover:checked + .cnvs-radio-check, &.focus:checked + .cnvs-radio-check, &.focus:hover:checked + .cnvs-radio-check': {
+                    ...common_1.focusRing({
+                        width: 2,
+                        separation: 2,
+                        innerColor: canvas_tokens_web_1.base.blackPepper400,
+                        outerColor: canvas_tokens_web_1.base.frenchVanilla100,
+                    }),
+                },
+            },
+        },
     },
-    '&:focus:checked + .cnvs-radio-check, &:focus:hover:checked + .cnvs-radio-check': {
-        outline: 'transparent',
-        ...common_1.focusRing({
-            width: 2,
-            separation: 2,
-            animate: false,
-            innerColor: variant === 'inverse' ? tokens_1.colors.blackPepper400 : tokens_1.colors.frenchVanilla100,
-            outerColor: variant === 'inverse' ? tokens_1.colors.frenchVanilla100 : themeFocusOutline,
-        }),
+});
+const StyledRadioInput = common_1.createComponent('input')({
+    displayName: 'StyledRadioInput',
+    Component: ({ children, variant, ...elemProps }, ref, Element) => {
+        return react_1.default.createElement(Element, Object.assign({ ref: ref }, canvas_kit_styling_1.handleCsProp(elemProps, radioInputStyles({ variant }))));
     },
-    ...common_1.mouseFocusBehavior({
-        '&:focus + .cnvs-radio-check, &:focus:hover + .cnvs-radio-check, &:focus:active + .cnvs-radio-check, &:focus:hover:checked + .cnvs-radio-check, &:focus:active:checked + .cnvs-radio-check': {
-            ...common_1.focusRing({
-                width: 0,
-                outerColor: variant === 'inverse' ? tokens_1.colors.frenchVanilla100 : themeFocusOutline,
-            }),
+});
+const radioInputWrapperStyles = canvas_kit_styling_1.createStencil({
+    base: {
+        height: canvas_kit_styling_1.px2rem(radioHeight),
+        width: canvas_kit_styling_1.px2rem(radioWidth),
+        flex: '0 0 auto',
+        // Hover Ripple element
+        '::before': {
+            content: "''",
+            position: 'absolute',
+            borderRadius: canvas_tokens_web_1.system.shape.round,
+            height: canvas_kit_styling_1.px2rem(radioHeight),
+            transition: 'box-shadow 150ms ease-out',
+            width: canvas_kit_styling_1.px2rem(radioWidth),
+            pointerEvents: 'none',
+            opacity: '1',
+        },
+        '&:hover:before, &.hover:before': {
+            boxShadow: `0 0 0 ${canvas_kit_styling_1.calc.subtract(canvas_tokens_web_1.system.space.x2, canvas_kit_styling_1.px2rem(1))} ${canvas_tokens_web_1.base.soap200}`,
         },
-    }),
-}));
-const RadioInputWrapper = common_1.styled(layout_1.Flex)({
-    // Hover Ripple element
-    '::before': {
-        content: "''",
-        borderRadius: tokens_1.borderRadius.circle,
-        height: radioHeight,
-        transition: 'box-shadow 150ms ease-out',
-        width: radioWidth,
-        pointerEvents: 'none',
     },
-}, ({ variant, disabled }) => ({
-    '::before': {
-        opacity: variant === 'inverse' ? '0.4' : '1',
+    modifiers: {
+        variant: {
+            inverse: {
+                '::before': {
+                    opacity: canvas_tokens_web_1.system.opacity.disabled,
+                },
+            },
+        },
+        disabled: {
+            true: {
+                '&:hover:before, &.hover:before': {
+                    boxShadow: 'none',
+                    cursor: 'auto',
+                },
+            },
+        },
     },
-    '&:hover:before': {
-        boxShadow: !disabled
-            ? `0 0 0 calc((${tokens_1.space.l} - ${radioWidth}px) / 2) ${tokens_1.colors.soap200}`
-            : undefined,
+});
+const RadioInputWrapper = common_1.createComponent(layout_1.Flex)({
+    displayName: 'RadioInputWrapper',
+    Component: ({ children, variant, ...elemProps }, ref, Element) => {
+        const { disabled } = react_1.default.useContext(RadioLabel_1.RadioLabelContext);
+        return (react_1.default.createElement(Element, Object.assign({ ref: ref }, canvas_kit_styling_1.handleCsProp(elemProps, radioInputWrapperStyles({ variant, disabled }))), children));
     },
-}));
+});
 /**
  * Use `StyledRadioButton` when you want a styled radio button on its own without using `RadioGroup`.
  * You will need to handle behavior and accessibility.
@@ -116,8 +205,8 @@ const RadioInputWrapper = common_1.styled(layout_1.Flex)({
 exports.StyledRadioButton = common_1.createComponent('input')({
     displayName: 'Radio',
     Component: ({ ...elemProps }, ref, Element) => {
-        return (react_1.default.createElement(RadioInputWrapper, Object.assign({ height: "18px", width: "18px", flex: "0 0 auto" }, elemProps),
-            react_1.default.createElement(StyledRadioInput, Object.assign({ borderRadius: "circle", position: "absolute", margin: "zero", as: Element, type: "radio", ref: ref }, elemProps)),
+        return (react_1.default.createElement(RadioInputWrapper, Object.assign({}, elemProps),
+            react_1.default.createElement(StyledRadioInput, Object.assign({ type: "radio" }, elemProps)),
             react_1.default.createElement("span", { className: "cnvs-radio-check" })));
     },
 });

package/dist/es6/radio/lib/RadioGroup.d.ts

@@ -1,7 +1,8 @@
 import React from 'react';
-import { Themeable, ErrorType, ExtractProps } from '@workday/canvas-kit-react/common';
-import { Flex } from '@workday/canvas-kit-react/layout';
-export interface RadioGroupProps extends Themeable, ExtractProps<typeof Flex, never> {
+import { Themeable, ErrorType } from '@workday/canvas-kit-react/common';
+import { FlexProps } from '@workday/canvas-kit-react/layout';
+import { CSProps } from '@workday/canvas-kit-styling';
+export interface RadioGroupProps extends Themeable, CSProps, FlexProps {
     /**
      * The type of error associated with the RadioGroup (if applicable).
      */
@@ -17,9 +18,7 @@ export interface RadioGroupProps extends Themeable, ExtractProps<typeof Flex, ne
  * </RadioGroup>
  * ```
  */
-export declare const RadioGroup: import("@workday/canvas-kit-react/common").ElementComponentM<import("@workday/canvas-kit-react/common").ElementComponent<"div", Omit<import("@workday/canvas-kit-react/layout").BoxProps, "display"> & import("@workday/canvas-kit-react/layout").FlexStyleProps> & {
-    Item: import("@workday/canvas-kit-react/common").ElementComponent<"div", import("@workday/canvas-kit-react/layout").BackgroundStyleProps & import("@workday/canvas-kit-react/layout/lib/utils/border/color").BorderColorStyleProps & import("@workday/canvas-kit-react/layout/lib/utils/border/lineStyle").BorderLineStyleProps & import("@workday/canvas-kit-react/layout/lib/utils/border/radius").BorderRadiusStyleProps & import("@workday/canvas-kit-react/layout/lib/utils/border/shorthand").BorderShorthandStyleProps & import("@workday/canvas-kit-react/layout/lib/utils/border/width").BorderWidthStyleProps & import("@workday/canvas-kit-react/layout").ColorStyleProps & import("@workday/canvas-kit-react/layout").DepthStyleProps & import("@workday/canvas-kit-react/layout").FlexItemStyleProps & import("@workday/canvas-kit-react/layout").GridItemStyleProps & import("@workday/canvas-kit-react/layout").LayoutStyleProps & import("@workday/canvas-kit-react/layout").OtherStyleProps & import("@workday/canvas-kit-react/layout").PositionStyleProps & import("@workday/canvas-kit-react/layout").SpaceStyleProps & import("@workday/canvas-kit-react/layout").TextStyleProps & import("@workday/canvas-kit-styling").CSProps>;
-}, RadioGroupProps & Partial<{
+export declare const RadioGroup: import("@workday/canvas-kit-react/common").ElementComponentM<"div", RadioGroupProps & Partial<{
     'aria-describedby': string | undefined;
     name: string;
     value: string | number | undefined;

package/dist/es6/radio/lib/RadioGroup.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RadioGroup.d.ts","sourceRoot":"","sources":["../../../../radio/lib/RadioGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAEL,SAAS,EACT,SAAS,EAET,YAAY,EACb,MAAM,kCAAkC,CAAC;AAG1C,OAAO,EAAC,IAAI,EAAC,MAAM,kCAAkC,CAAC;AAItD,MAAM,WAAW,eAAgB,SAAQ,SAAS,EAAE,YAAY,CAAC,OAAO,IAAI,EAAE,KAAK,CAAC;IAClF;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB;AAED;;;;;;;;;GASG;AACH,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;IAInB;;;;;;;;;;OAUG;;;;;;;;;;;IAEH;;;;;;;;;;;;OAYG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8BL,CAAC"}
+{"version":3,"file":"RadioGroup.d.ts","sourceRoot":"","sources":["../../../../radio/lib/RadioGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAkB,SAAS,EAAE,SAAS,EAAC,MAAM,kCAAkC,CAAC;AAEvF,OAAO,EAAC,SAAS,EAAc,MAAM,kCAAkC,CAAC;AAGxE,OAAO,EAAgB,OAAO,EAAe,MAAM,6BAA6B,CAAC;AAGjF,MAAM,WAAW,eAAgB,SAAQ,SAAS,EAAE,OAAO,EAAE,SAAS;IACpE;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB;AA8BD;;;;;;;;;GASG;AACH,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;IAInB;;;;;;;;;;OAUG;;;;;;;;;;;IAEH;;;;;;;;;;;;OAYG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAKL,CAAC"}

package/dist/es6/radio/lib/RadioGroup.js

@@ -1,10 +1,36 @@
 import React from 'react';
-import { createContainer, getErrorColors, } from '@workday/canvas-kit-react/common';
-import { space } from '@workday/canvas-kit-react/tokens';
+import { createContainer } from '@workday/canvas-kit-react/common';
 import { useRadioModel } from './hooks/useRadioModel';
-import { Flex } from '@workday/canvas-kit-react/layout';
+import { mergeStyles } from '@workday/canvas-kit-react/layout';
 import { RadioLabel } from './RadioLabel';
 import { RadioButton } from './RadioButton';
+import { createStencil, calc, px2rem } from '@workday/canvas-kit-styling';
+import { brand, system } from '@workday/canvas-tokens-web';
+/**
+ * Styles for RadioGroup
+ */
+const radioGroupStyles = createStencil({
+    base: {
+        display: 'flex',
+        flexDirection: 'column',
+        borderRadius: system.shape.x1,
+        gap: system.space.x2,
+        padding: `${px2rem(10)} ${system.space.x3} ${system.space.x2}`,
+        margin: `${calc.negate(system.space.x1)} ${calc.negate(system.space.x3)}`,
+        transition: '100ms box-shadow',
+        width: 'fit-content',
+    },
+    modifiers: {
+        error: {
+            error: {
+                boxShadow: `inset 0 0 0 ${px2rem(2)} ${brand.error.base}`,
+            },
+            alert: {
+                boxShadow: `inset 0 0 0 ${px2rem(1)} ${brand.alert.darkest}, inset 0 0 0 ${px2rem(3)} ${brand.alert.base}`,
+            },
+        },
+    },
+});
 /**
  * Use `RadioGroup` to group a collection of `RadioGroup.RadioButton` components under a common `name`.
  *
@@ -15,7 +41,7 @@ import { RadioButton } from './RadioButton';
  * </RadioGroup>
  * ```
  */
-export const RadioGroup = createContainer(Flex)({
+export const RadioGroup = createContainer('div')({
     displayName: 'RadioGroup',
     modelHook: useRadioModel,
     subComponents: {
@@ -46,11 +72,6 @@ export const RadioGroup = createContainer(Flex)({
          */
         Label: RadioLabel,
     },
-})(({ children, error, theme, ...elemProps }, Element, model) => {
-    const errorColors = getErrorColors(error, theme);
-    return (React.createElement(Flex, Object.assign({ as: Element, boxSizing: "border-box", flexDirection: "column", borderRadius: "m", paddingTop: "10px", paddingBottom: "8px", paddingX: "xs", gap: "xxs", marginY: `-${space.xxxs}`, transition: "100ms box-shadow", marginX: `-${space.xs}`, width: "fit-content", cs: {
-            boxShadow: errorColors.outer !== errorColors.inner
-                ? `inset 0 0 0 1px ${errorColors.outer}, inset 0 0 0 3px ${errorColors.inner}`
-                : `inset 0 0 0 2px ${errorColors.inner}`,
-        } }, elemProps), children));
+})(({ children, error, theme, ...elemProps }, Element) => {
+    return React.createElement(Element, Object.assign({}, mergeStyles(elemProps, radioGroupStyles({ error }))), children);
 });