@workday/canvas-kit-react 7.0.4 → 7.0.7

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

@@ -77,7 +77,11 @@ var RadioRipple = common_1.styled('span')({
     width: radioWidth,
     position: 'absolute',
     pointerEvents: 'none',
-    zIndex: -1,
+}, function (_a) {
+    var variant = _a.variant;
+    return ({
+        opacity: variant === 'inverse' ? '0.4' : '1',
+    });
 });
 var RadioInput = common_1.styled('input')({
     borderRadius: radioBorderRadius,
@@ -92,7 +96,7 @@ var RadioInput = common_1.styled('input')({
         outline: 'none',
     },
 }, function (_a) {
-    var checked = _a.checked, disabled = _a.disabled, _b = _a.theme.canvas.palette, themePrimary = _b.primary, themeFocusOutline = _b.common.focusOutline;
+    var checked = _a.checked, disabled = _a.disabled, variant = _a.variant, _b = _a.theme.canvas.palette, themePrimary = _b.primary, themeFocusOutline = _b.common.focusOutline;
     return (__assign({ cursor: disabled ? undefined : 'pointer', 
         /**
          * These selectors are targetting various sibling elements (~) here because
@@ -111,25 +115,52 @@ var RadioInput = common_1.styled('input')({
         // input (which is visually hidden)
         '&:hover ~ div:first-of-type': {
             backgroundColor: checked
-                ? themePrimary.main
+                ? variant === 'inverse'
+                    ? tokens_1.colors.frenchVanilla100
+                    : themePrimary.main
                 : disabled
                     ? tokens_1.inputColors.disabled.background
                     : 'white',
             borderColor: checked
-                ? themePrimary.main
+                ? variant === 'inverse'
+                    ? tokens_1.colors.soap300
+                    : themePrimary.main
                 : disabled
                     ? tokens_1.inputColors.disabled.border
-                    : tokens_1.inputColors.hoverBorder,
+                    : variant === 'inverse'
+                        ? tokens_1.colors.soap300
+                        : tokens_1.inputColors.hoverBorder,
             borderWidth: '1px',
         }, '&:focus, &focus:hover': {
-            '& ~ div:first-of-type': {
-                borderColor: checked ? themePrimary.main : themeFocusOutline,
-                borderWidth: '2px',
-            },
-        }, '&:checked:focus ~ div:first-of-type': __assign({}, common_1.focusRing({ separation: 2, outerColor: themeFocusOutline })) }, common_1.mouseFocusBehavior({
-        '&:focus ~ div:first-of-type': __assign(__assign({}, common_1.focusRing({ width: 0, outerColor: themeFocusOutline })), { borderWidth: '1px', borderColor: checked ? themePrimary.main : tokens_1.inputColors.border }),
+            '& ~ div:first-of-type': __assign({ borderWidth: '2px', borderColor: variant === 'inverse' ? tokens_1.colors.blackPepper400 : themeFocusOutline, boxShadow: 'none' }, common_1.focusRing({
+                width: variant === 'inverse' ? 2 : 0,
+                separation: 0,
+                animate: false,
+                innerColor: variant === 'inverse' ? tokens_1.colors.blackPepper400 : undefined,
+                outerColor: variant === 'inverse' ? tokens_1.colors.frenchVanilla100 : undefined,
+            })),
+        }, '&:checked:focus ~ div:first-of-type': __assign(__assign({}, common_1.focusRing({
+            separation: 2,
+            width: 2,
+            innerColor: variant === 'inverse' ? tokens_1.colors.blackPepper400 : undefined,
+            outerColor: variant === 'inverse' ? tokens_1.colors.frenchVanilla100 : themeFocusOutline,
+        })), { borderColor: variant === 'inverse' ? tokens_1.colors.frenchVanilla100 : themePrimary.main, borderWidth: '2px' }) }, common_1.mouseFocusBehavior({
+        '&:focus ~ div:first-of-type': __assign(__assign({}, common_1.focusRing({
+            width: 0,
+            outerColor: variant === 'inverse' ? tokens_1.colors.frenchVanilla100 : themeFocusOutline,
+        })), { borderWidth: '1px', borderColor: checked
+                ? variant === 'inverse'
+                    ? tokens_1.colors.soap300
+                    : themePrimary.main
+                : tokens_1.inputColors.border }),
         '&:focus:hover ~ div:first-of-type, &:focus:active ~ div:first-of-type': {
-            borderColor: checked ? themePrimary.main : tokens_1.inputColors.hoverBorder,
+            borderColor: checked
+                ? variant === 'inverse'
+                    ? tokens_1.colors.soap300
+                    : themePrimary.main
+                : variant === 'inverse'
+                    ? tokens_1.colors.soap300
+                    : tokens_1.inputColors.hoverBorder,
         },
     })));
 });
@@ -149,18 +180,25 @@ var RadioBackground = common_1.styled('div')({
     transition: 'border 200ms ease, background 200ms',
     width: radioWidth,
 }, function (_a) {
-    var checked = _a.checked, disabled = _a.disabled, themePrimary = _a.theme.canvas.palette.primary;
+    var checked = _a.checked, disabled = _a.disabled, variant = _a.variant, themePrimary = _a.theme.canvas.palette.primary;
     return ({
         borderColor: checked
-            ? themePrimary.main
+            ? variant === 'inverse'
+                ? tokens_1.colors.soap300
+                : themePrimary.main
             : disabled
                 ? tokens_1.inputColors.disabled.border
-                : tokens_1.inputColors.border,
+                : variant === 'inverse'
+                    ? tokens_1.colors.soap300
+                    : tokens_1.inputColors.border,
         backgroundColor: checked
-            ? themePrimary.main
+            ? variant === 'inverse'
+                ? tokens_1.colors.frenchVanilla100
+                : themePrimary.main
             : disabled
                 ? tokens_1.inputColors.disabled.background
                 : 'white',
+        opacity: disabled && variant === 'inverse' ? '.4' : '1',
     });
 });
 var RadioCheck = common_1.styled('div')({
@@ -172,9 +210,11 @@ var RadioCheck = common_1.styled('div')({
     transition: 'transform 200ms ease, opacity 200ms ease',
     width: radioDot,
 }, function (_a) {
-    var theme = _a.theme;
+    var theme = _a.theme, variant = _a.variant;
     return ({
-        backgroundColor: theme.canvas.palette.primary.contrast,
+        backgroundColor: variant === 'inverse'
+            ? theme.canvas.palette.primary.main
+            : theme.canvas.palette.primary.contrast,
     });
 }, function (_a) {
     var checked = _a.checked;
@@ -184,21 +224,29 @@ var RadioCheck = common_1.styled('div')({
     });
 });
 var RadioLabel = common_1.styled('label')(__assign(__assign({}, tokens_1.default.type.levels.subtext.large), { paddingLeft: radioLabelDistance }), function (_a) {
-    var disabled = _a.disabled;
-    return (disabled ? { color: tokens_1.inputColors.disabled.text } : { cursor: 'pointer' });
+    var variant = _a.variant;
+    return (variant === 'inverse' ? { color: tokens_1.colors.frenchVanilla100 } : undefined);
+}, function (_a) {
+    var disabled = _a.disabled, variant = _a.variant;
+    return disabled
+        ? {
+            color: variant === 'inverse' ? tokens_1.colors.frenchVanilla100 : tokens_1.inputColors.disabled.text,
+            opacity: variant === 'inverse' ? '.4' : '1',
+        }
+        : { cursor: 'pointer' };
 });
 exports.Radio = common_1.createComponent('input')({
     displayName: 'Radio',
     Component: function (_a, ref, Element) {
-        var _b = _a.checked, checked = _b === void 0 ? false : _b, id = _a.id, _c = _a.label, label = _c === void 0 ? '' : _c, disabled = _a.disabled, name = _a.name, onChange = _a.onChange, value = _a.value, elemProps = __rest(_a, ["checked", "id", "label", "disabled", "name", "onChange", "value"]);
+        var _b = _a.checked, checked = _b === void 0 ? false : _b, id = _a.id, _c = _a.label, label = _c === void 0 ? '' : _c, disabled = _a.disabled, name = _a.name, onChange = _a.onChange, value = _a.value, variant = _a.variant, elemProps = __rest(_a, ["checked", "id", "label", "disabled", "name", "onChange", "value", "variant"]);
         var inputId = common_1.useUniqueId(id);
         return (React.createElement(RadioContainer, null,
             React.createElement(RadioInputWrapper, { disabled: disabled },
-                React.createElement(RadioInput, __assign({ as: Element, checked: checked, disabled: disabled, id: inputId, ref: ref, name: name, onChange: onChange, type: "radio", value: value, "aria-checked": checked }, elemProps)),
-                React.createElement(RadioRipple, null),
-                React.createElement(RadioBackground, { checked: checked, disabled: disabled },
-                    React.createElement(RadioCheck, { checked: checked }))),
-            label && (React.createElement(RadioLabel, { htmlFor: inputId, disabled: disabled }, label))));
+                React.createElement(RadioInput, __assign({ as: Element, checked: checked, disabled: disabled, id: inputId, ref: ref, name: name, onChange: onChange, type: "radio", value: value, "aria-checked": checked, variant: variant }, elemProps)),
+                React.createElement(RadioRipple, { variant: variant }),
+                React.createElement(RadioBackground, { checked: checked, disabled: disabled, variant: variant },
+                    React.createElement(RadioCheck, { checked: checked, variant: variant }))),
+            label && (React.createElement(RadioLabel, { htmlFor: inputId, disabled: disabled, variant: variant }, label))));
     },
 });
 exports.default = exports.Radio;

package/dist/es6/checkbox/lib/Checkbox.d.ts

@@ -38,6 +38,10 @@ export interface CheckboxProps extends Themeable {
      * @default false
      */
     indeterminate?: boolean;
+    /**
+     * The variant for the checkbox
+     */
+    variant?: 'inverse' | undefined;
 }
 export declare const Checkbox: import("../../common").ElementComponent<"input", CheckboxProps> & {
     ErrorType: typeof ErrorType;

package/dist/es6/checkbox/lib/Checkbox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../../../checkbox/lib/Checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAGL,SAAS,EAOT,SAAS,EACV,MAAM,kCAAkC,CAAC;AAU1C,MAAM,WAAW,aAAc,SAAQ,SAAS;IAC9C;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAC5D;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AA6ND,eAAO,MAAM,QAAQ;;CA2DnB,CAAC;AAEH,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../../../checkbox/lib/Checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAGL,SAAS,EAOT,SAAS,EACV,MAAM,kCAAkC,CAAC;AAU1C,MAAM,WAAW,aAAc,SAAQ,SAAS;IAC9C;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAC5D;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;OAEG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;CACjC;AAoQD,eAAO,MAAM,QAAQ;;CAoEnB,CAAC;AAEH,eAAe,QAAQ,CAAC"}

package/dist/es6/checkbox/lib/Checkbox.js

@@ -57,55 +57,70 @@ var CheckboxRipple = styled('span')({
     width: checkboxWidth,
     position: 'absolute',
     pointerEvents: 'none',
-    zIndex: -1,
+}, function (_a) {
+    var variant = _a.variant;
+    return ({
+        opacity: variant === 'inverse' ? '0.4' : '1',
+    });
 });
 /**
  * Note: `~ div:first-of-type` refers to `CheckboxBackground`
  * and was easier to use than a component selector in this case.
  */
 var CheckboxInput = styled('input')(function (_a) {
-    var _b = _a.theme.canvas.palette, themePrimary = _b.primary, themeFocusOutline = _b.common.focusOutline;
+    var _b = _a.theme.canvas.palette, themePrimary = _b.primary, themeFocusOutline = _b.common.focusOutline, variant = _a.variant;
     return (__assign({ borderRadius: borderRadius.s, width: checkboxTapArea, height: checkboxTapArea, margin: 0, marginTop: '-3px', marginLeft: '-3px', position: 'absolute', opacity: 0, '&:not(:disabled)': {
             cursor: 'pointer',
         }, 
         // States
         '&:not(:checked):not(:disabled):not(:focus):hover, &:not(:checked):not(:disabled):active': {
             '~ div:first-of-type': {
-                borderColor: inputColors.hoverBorder,
+                borderColor: variant === 'inverse' ? colors.soap300 : inputColors.hoverBorder,
             },
         }, '&:checked ~ div:first-of-type': {
-            borderColor: themePrimary.main,
-            backgroundColor: themePrimary.main,
+            borderColor: variant === 'inverse' ? colors.soap300 : themePrimary.main,
+            backgroundColor: variant === 'inverse' ? colors.frenchVanilla100 : themePrimary.main,
         }, '&:disabled ~ div:first-of-type': {
             borderColor: inputColors.disabled.border,
-            backgroundColor: inputColors.disabled.background,
+            backgroundColor: variant === 'inverse' ? colors.soap300 : inputColors.disabled.background,
+            opacity: variant === 'inverse' ? '.4' : '1',
         }, '&:disabled:checked ~ div:first-of-type': {
-            borderColor: themePrimary.light,
-            backgroundColor: themePrimary.light,
+            borderColor: variant === 'inverse' ? colors.soap300 : themePrimary.light,
+            backgroundColor: variant === 'inverse' ? colors.soap300 : themePrimary.light,
         }, 
         // Focus
         '&:focus, &:active': {
             outline: 'none',
-        }, '&:focus ~ div:first-of-type': {
-            borderColor: themePrimary.main,
-            borderWidth: '2px',
-            boxShadow: 'none',
-        }, '&:checked:focus ~ div:first-of-type': __assign(__assign({}, focusRing({ width: 2, separation: 2, animate: false, outerColor: themeFocusOutline })), { '& span': {
+        }, '&:focus ~ div:first-of-type': __assign({ borderColor: variant === 'inverse' ? colors.blackPepper400 : themePrimary.main, borderWidth: '2px', boxShadow: 'none' }, focusRing({
+            width: variant === 'inverse' ? 2 : 0,
+            separation: 0,
+            animate: false,
+            innerColor: variant === 'inverse' ? colors.blackPepper400 : undefined,
+            outerColor: variant === 'inverse' ? colors.frenchVanilla100 : undefined,
+        })), '&:checked:focus ~ div:first-of-type': __assign(__assign({}, focusRing({
+            width: 2,
+            separation: 2,
+            animate: false,
+            innerColor: variant === 'inverse' ? colors.blackPepper400 : undefined,
+            outerColor: variant === 'inverse' ? colors.frenchVanilla100 : themeFocusOutline,
+        })), { borderColor: variant === 'inverse' ? colors.frenchVanilla100 : themePrimary.main, borderWidth: '2px', '& span': {
                 marginLeft: '-7px',
             } }) }, mouseFocusBehavior({
         '&:focus ~ div:first-of-type': {
-            border: "1px solid " + inputColors.hoverBorder,
+            border: variant === 'inverse'
+                ? "1px solid " + colors.soap300
+                : "1px solid " + inputColors.hoverBorder,
             boxShadow: 'none',
             '& span': {
                 marginLeft: '-6px',
             },
         },
         '&:checked ~ div:first-of-type': {
-            borderColor: themePrimary.main,
+            borderColor: variant === 'inverse' ? colors.soap300 : themePrimary.main,
         },
         '&:disabled:checked ~ div:first-of-type': {
             borderColor: themePrimary.light,
-            backgroundColor: themePrimary.light,
+            backgroundColor: variant === 'inverse' ? colors.soap300 : themePrimary.light,
         },
     })));
 }, function (_a) {
@@ -116,36 +131,35 @@ var CheckboxInput = styled('input')(function (_a) {
         },
     });
 }, function (_a) {
-    var theme = _a.theme, error = _a.error;
+    var theme = _a.theme, error = _a.error, variant = _a.variant;
     var errorColors = getErrorColors(error, theme);
     if (errorColors.outer === errorColors.inner) {
         errorColors.outer = 'transparent';
     }
     var errorStyles = {
         '& ~ div:first-of-type': {
-            border: "1px solid " + errorColors.inner,
+            border: variant === 'inverse' ? "1px solid " + colors.soap300 : "1px solid " + errorColors.inner,
             boxShadow: "0 0 0 1px " + errorColors.inner + ", 0 0 0 2px " + errorColors.outer,
         },
         '&:not(:checked):not(:disabled):not(:focus):hover, &:not(:checked):not(:disabled):active': {
             '~ div:first-of-type': {
-                borderColor: errorColors.inner,
+                borderColor: variant === 'inverse' ? "1px solid " + colors.soap300 : errorColors.inner,
             },
         },
         '&:checked ~ div:first-of-type': {
-            borderColor: theme.canvas.palette.primary.main,
-            boxShadow: "\n            0 0 0 2px " + colors.frenchVanilla100 + ",\n            0 0 0 4px " + errorColors.inner + ",\n            0 0 0 5px " + errorColors.outer,
+            borderColor: variant === 'inverse' ? colors.soap300 : theme.canvas.palette.primary.main,
+            boxShadow: "\n              0 0 0 2px " + colors.frenchVanilla100 + ",\n              0 0 0 4px " + errorColors.inner + ",\n              0 0 0 5px " + errorColors.outer,
         },
     };
-    return __assign(__assign({}, errorStyles), mouseFocusBehavior(__assign(__assign({}, errorStyles), { '&:not(:checked):focus ~ div:first-of-type': {
+    return __assign(__assign({}, mouseFocusBehavior(__assign(__assign({}, errorStyles), { '&:not(:checked):focus ~ div:first-of-type': {
             border: "1px solid " + errorColors.inner,
             boxShadow: "0 0 0 1px " + errorColors.inner + ", 0 0 0 2px " + errorColors.outer,
-        } })));
+        } }))), errorStyles);
 });
 var CheckboxBackground = styled('div')({
     alignItems: 'center',
     backgroundColor: colors.frenchVanilla100,
     borderRadius: borderRadius.s,
-    border: '1px solid ' + inputColors.border,
     boxSizing: 'border-box',
     display: 'flex',
     height: checkboxHeight,
@@ -155,6 +169,11 @@ var CheckboxBackground = styled('div')({
     position: 'absolute',
     transition: 'border 200ms ease, background 200ms',
     width: checkboxWidth,
+}, function (_a) {
+    var variant = _a.variant;
+    return ({
+        border: "1px solid " + (variant === 'inverse' ? colors.soap300 : inputColors.border),
+    });
 });
 var CheckboxCheck = styled('div')({
     display: 'flex',
@@ -183,14 +202,24 @@ var IndeterminateBox = styled('div')({
     width: '10px',
     height: '2px',
 }, function (_a) {
-    var theme = _a.theme;
+    var theme = _a.theme, variant = _a.variant;
     return ({
-        backgroundColor: theme.canvas.palette.primary.contrast,
+        backgroundColor: variant === 'inverse'
+            ? theme.canvas.palette.primary.main
+            : theme.canvas.palette.primary.contrast,
     });
 });
 var CheckboxLabel = styled('label')(__assign(__assign({}, canvas.type.levels.subtext.large), { paddingLeft: checkboxLabelDistance }), function (_a) {
-    var disabled = _a.disabled;
-    return (disabled ? { color: inputColors.disabled.text } : { cursor: 'pointer' });
+    var variant = _a.variant;
+    return (variant === 'inverse' ? { color: colors.frenchVanilla100 } : undefined);
+}, function (_a) {
+    var disabled = _a.disabled, variant = _a.variant;
+    return disabled
+        ? {
+            color: variant === 'inverse' ? colors.frenchVanilla100 : inputColors.disabled.text,
+            opacity: variant === 'inverse' ? '.4' : '1',
+        }
+        : { cursor: 'pointer' };
 });
 export var Checkbox = createComponent('input')({
     displayName: 'Checkbox',
@@ -201,15 +230,17 @@ export var Checkbox = createComponent('input')({
         _d = _a.theme, 
         // TODO: Fix useTheme and make it a real hook
         // eslint-disable-next-line react-hooks/rules-of-hooks
-        theme = _d === void 0 ? useTheme() : _d, id = _a.id, disabled = _a.disabled, onChange = _a.onChange, value = _a.value, error = _a.error, indeterminate = _a.indeterminate, elemProps = __rest(_a, ["checked", "label", "theme", "id", "disabled", "onChange", "value", "error", "indeterminate"]);
+        theme = _d === void 0 ? useTheme() : _d, id = _a.id, disabled = _a.disabled, onChange = _a.onChange, value = _a.value, error = _a.error, indeterminate = _a.indeterminate, variant = _a.variant, elemProps = __rest(_a, ["checked", "label", "theme", "id", "disabled", "onChange", "value", "error", "indeterminate", "variant"]);
         var inputId = useUniqueId(id);
         return (React.createElement(CheckboxContainer, null,
             React.createElement(CheckboxInputWrapper, { disabled: disabled },
-                React.createElement(CheckboxInput, __assign({ as: Element, checked: checked, disabled: disabled, id: inputId, ref: ref, onChange: onChange, type: "checkbox", value: value, error: error, "aria-checked": indeterminate ? 'mixed' : checked }, elemProps)),
-                React.createElement(CheckboxRipple, null),
-                React.createElement(CheckboxBackground, { checked: checked, disabled: disabled },
-                    React.createElement(CheckboxCheck, { checked: checked }, indeterminate ? (React.createElement(IndeterminateBox, null)) : (React.createElement(SystemIcon, { icon: checkSmallIcon, color: theme.canvas.palette.primary.contrast }))))),
-            label && (React.createElement(CheckboxLabel, { htmlFor: inputId, disabled: disabled }, label))));
+                React.createElement(CheckboxInput, __assign({ as: Element, checked: checked, disabled: disabled, id: inputId, ref: ref, onChange: onChange, type: "checkbox", value: value, error: error, variant: variant, "aria-checked": indeterminate ? 'mixed' : checked }, elemProps)),
+                React.createElement(CheckboxRipple, { variant: variant }),
+                React.createElement(CheckboxBackground, { variant: variant, checked: checked, disabled: disabled },
+                    React.createElement(CheckboxCheck, { checked: checked }, indeterminate ? (React.createElement(IndeterminateBox, { variant: variant })) : (React.createElement(SystemIcon, { icon: checkSmallIcon, color: variant === 'inverse'
+                            ? theme.canvas.palette.primary.main
+                            : theme.canvas.palette.primary.contrast }))))),
+            label && (React.createElement(CheckboxLabel, { variant: variant, htmlFor: inputId, disabled: disabled }, label))));
     },
     subComponents: {
         ErrorType: ErrorType,

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

@@ -33,6 +33,7 @@ export interface RadioProps extends Themeable {
      * The value of the Radio button.
      */
     value?: string;
+    variant?: 'inverse' | undefined;
 }
 export declare const Radio: import("../../common").ElementComponent<"input", RadioProps>;
 export default Radio;

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

@@ -1 +1 @@
-{"version":3,"file":"Radio.d.ts","sourceRoot":"","sources":["../../../../radio/lib/Radio.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAML,SAAS,EAEV,MAAM,kCAAkC,CAAC;AAQ1C,MAAM,WAAW,UAAW,SAAQ,SAAS;IAC3C;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAC5D;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAyLD,eAAO,MAAM,KAAK,8DAqChB,CAAC;AAEH,eAAe,KAAK,CAAC"}
+{"version":3,"file":"Radio.d.ts","sourceRoot":"","sources":["../../../../radio/lib/Radio.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAML,SAAS,EAEV,MAAM,kCAAkC,CAAC;AAQ1C,MAAM,WAAW,UAAW,SAAQ,SAAS;IAC3C;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAC5D;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;CACjC;AAkPD,eAAO,MAAM,KAAK,8DAgDhB,CAAC;AAEH,eAAe,KAAK,CAAC"}

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

@@ -55,7 +55,11 @@ var RadioRipple = styled('span')({
     width: radioWidth,
     position: 'absolute',
     pointerEvents: 'none',
-    zIndex: -1,
+}, function (_a) {
+    var variant = _a.variant;
+    return ({
+        opacity: variant === 'inverse' ? '0.4' : '1',
+    });
 });
 var RadioInput = styled('input')({
     borderRadius: radioBorderRadius,
@@ -70,7 +74,7 @@ var RadioInput = styled('input')({
         outline: 'none',
     },
 }, function (_a) {
-    var checked = _a.checked, disabled = _a.disabled, _b = _a.theme.canvas.palette, themePrimary = _b.primary, themeFocusOutline = _b.common.focusOutline;
+    var checked = _a.checked, disabled = _a.disabled, variant = _a.variant, _b = _a.theme.canvas.palette, themePrimary = _b.primary, themeFocusOutline = _b.common.focusOutline;
     return (__assign({ cursor: disabled ? undefined : 'pointer', 
         /**
          * These selectors are targetting various sibling elements (~) here because
@@ -89,25 +93,52 @@ var RadioInput = styled('input')({
         // input (which is visually hidden)
         '&:hover ~ div:first-of-type': {
             backgroundColor: checked
-                ? themePrimary.main
+                ? variant === 'inverse'
+                    ? colors.frenchVanilla100
+                    : themePrimary.main
                 : disabled
                     ? inputColors.disabled.background
                     : 'white',
             borderColor: checked
-                ? themePrimary.main
+                ? variant === 'inverse'
+                    ? colors.soap300
+                    : themePrimary.main
                 : disabled
                     ? inputColors.disabled.border
-                    : inputColors.hoverBorder,
+                    : variant === 'inverse'
+                        ? colors.soap300
+                        : inputColors.hoverBorder,
             borderWidth: '1px',
         }, '&:focus, &focus:hover': {
-            '& ~ div:first-of-type': {
-                borderColor: checked ? themePrimary.main : themeFocusOutline,
-                borderWidth: '2px',
-            },
-        }, '&:checked:focus ~ div:first-of-type': __assign({}, focusRing({ separation: 2, outerColor: themeFocusOutline })) }, mouseFocusBehavior({
-        '&:focus ~ div:first-of-type': __assign(__assign({}, focusRing({ width: 0, outerColor: themeFocusOutline })), { borderWidth: '1px', borderColor: checked ? themePrimary.main : inputColors.border }),
+            '& ~ div:first-of-type': __assign({ borderWidth: '2px', borderColor: variant === 'inverse' ? colors.blackPepper400 : themeFocusOutline, boxShadow: 'none' }, focusRing({
+                width: variant === 'inverse' ? 2 : 0,
+                separation: 0,
+                animate: false,
+                innerColor: variant === 'inverse' ? colors.blackPepper400 : undefined,
+                outerColor: variant === 'inverse' ? colors.frenchVanilla100 : undefined,
+            })),
+        }, '&:checked:focus ~ div:first-of-type': __assign(__assign({}, focusRing({
+            separation: 2,
+            width: 2,
+            innerColor: variant === 'inverse' ? colors.blackPepper400 : undefined,
+            outerColor: variant === 'inverse' ? colors.frenchVanilla100 : themeFocusOutline,
+        })), { borderColor: variant === 'inverse' ? colors.frenchVanilla100 : themePrimary.main, borderWidth: '2px' }) }, mouseFocusBehavior({
+        '&:focus ~ div:first-of-type': __assign(__assign({}, focusRing({
+            width: 0,
+            outerColor: variant === 'inverse' ? colors.frenchVanilla100 : themeFocusOutline,
+        })), { borderWidth: '1px', borderColor: checked
+                ? variant === 'inverse'
+                    ? colors.soap300
+                    : themePrimary.main
+                : inputColors.border }),
         '&:focus:hover ~ div:first-of-type, &:focus:active ~ div:first-of-type': {
-            borderColor: checked ? themePrimary.main : inputColors.hoverBorder,
+            borderColor: checked
+                ? variant === 'inverse'
+                    ? colors.soap300
+                    : themePrimary.main
+                : variant === 'inverse'
+                    ? colors.soap300
+                    : inputColors.hoverBorder,
         },
     })));
 });
@@ -127,18 +158,25 @@ var RadioBackground = styled('div')({
     transition: 'border 200ms ease, background 200ms',
     width: radioWidth,
 }, function (_a) {
-    var checked = _a.checked, disabled = _a.disabled, themePrimary = _a.theme.canvas.palette.primary;
+    var checked = _a.checked, disabled = _a.disabled, variant = _a.variant, themePrimary = _a.theme.canvas.palette.primary;
     return ({
         borderColor: checked
-            ? themePrimary.main
+            ? variant === 'inverse'
+                ? colors.soap300
+                : themePrimary.main
             : disabled
                 ? inputColors.disabled.border
-                : inputColors.border,
+                : variant === 'inverse'
+                    ? colors.soap300
+                    : inputColors.border,
         backgroundColor: checked
-            ? themePrimary.main
+            ? variant === 'inverse'
+                ? colors.frenchVanilla100
+                : themePrimary.main
             : disabled
                 ? inputColors.disabled.background
                 : 'white',
+        opacity: disabled && variant === 'inverse' ? '.4' : '1',
     });
 });
 var RadioCheck = styled('div')({
@@ -150,9 +188,11 @@ var RadioCheck = styled('div')({
     transition: 'transform 200ms ease, opacity 200ms ease',
     width: radioDot,
 }, function (_a) {
-    var theme = _a.theme;
+    var theme = _a.theme, variant = _a.variant;
     return ({
-        backgroundColor: theme.canvas.palette.primary.contrast,
+        backgroundColor: variant === 'inverse'
+            ? theme.canvas.palette.primary.main
+            : theme.canvas.palette.primary.contrast,
     });
 }, function (_a) {
     var checked = _a.checked;
@@ -162,21 +202,29 @@ var RadioCheck = styled('div')({
     });
 });
 var RadioLabel = styled('label')(__assign(__assign({}, canvas.type.levels.subtext.large), { paddingLeft: radioLabelDistance }), function (_a) {
-    var disabled = _a.disabled;
-    return (disabled ? { color: inputColors.disabled.text } : { cursor: 'pointer' });
+    var variant = _a.variant;
+    return (variant === 'inverse' ? { color: colors.frenchVanilla100 } : undefined);
+}, function (_a) {
+    var disabled = _a.disabled, variant = _a.variant;
+    return disabled
+        ? {
+            color: variant === 'inverse' ? colors.frenchVanilla100 : inputColors.disabled.text,
+            opacity: variant === 'inverse' ? '.4' : '1',
+        }
+        : { cursor: 'pointer' };
 });
 export var Radio = createComponent('input')({
     displayName: 'Radio',
     Component: function (_a, ref, Element) {
-        var _b = _a.checked, checked = _b === void 0 ? false : _b, id = _a.id, _c = _a.label, label = _c === void 0 ? '' : _c, disabled = _a.disabled, name = _a.name, onChange = _a.onChange, value = _a.value, elemProps = __rest(_a, ["checked", "id", "label", "disabled", "name", "onChange", "value"]);
+        var _b = _a.checked, checked = _b === void 0 ? false : _b, id = _a.id, _c = _a.label, label = _c === void 0 ? '' : _c, disabled = _a.disabled, name = _a.name, onChange = _a.onChange, value = _a.value, variant = _a.variant, elemProps = __rest(_a, ["checked", "id", "label", "disabled", "name", "onChange", "value", "variant"]);
         var inputId = useUniqueId(id);
         return (React.createElement(RadioContainer, null,
             React.createElement(RadioInputWrapper, { disabled: disabled },
-                React.createElement(RadioInput, __assign({ as: Element, checked: checked, disabled: disabled, id: inputId, ref: ref, name: name, onChange: onChange, type: "radio", value: value, "aria-checked": checked }, elemProps)),
-                React.createElement(RadioRipple, null),
-                React.createElement(RadioBackground, { checked: checked, disabled: disabled },
-                    React.createElement(RadioCheck, { checked: checked }))),
-            label && (React.createElement(RadioLabel, { htmlFor: inputId, disabled: disabled }, label))));
+                React.createElement(RadioInput, __assign({ as: Element, checked: checked, disabled: disabled, id: inputId, ref: ref, name: name, onChange: onChange, type: "radio", value: value, "aria-checked": checked, variant: variant }, elemProps)),
+                React.createElement(RadioRipple, { variant: variant }),
+                React.createElement(RadioBackground, { checked: checked, disabled: disabled, variant: variant },
+                    React.createElement(RadioCheck, { checked: checked, variant: variant }))),
+            label && (React.createElement(RadioLabel, { htmlFor: inputId, disabled: disabled, variant: variant }, label))));
     },
 });
 export default Radio;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-react",
-  "version": "7.0.4",
+  "version": "7.0.7",
   "description": "The parent module that contains all Workday Canvas Kit React components",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -48,9 +48,9 @@
     "@emotion/styled": "^11.6.0",
     "@popperjs/core": "^2.5.4",
     "@workday/canvas-colors-web": "^2.0.0",
-    "@workday/canvas-kit-labs-react": "^7.0.4",
-    "@workday/canvas-kit-popup-stack": "^7.0.4",
-    "@workday/canvas-kit-preview-react": "^7.0.4",
+    "@workday/canvas-kit-labs-react": "^7.0.7",
+    "@workday/canvas-kit-popup-stack": "^7.0.7",
+    "@workday/canvas-kit-preview-react": "^7.0.7",
     "@workday/canvas-system-icons-web": "^3.0.0",
     "@workday/design-assets-types": "^0.2.4",
     "chroma-js": "^2.1.0",
@@ -69,5 +69,5 @@
     "@workday/canvas-accent-icons-web": "^3.0.0",
     "@workday/canvas-applet-icons-web": "^2.0.0"
   },
-  "gitHead": "27b39e0bc853b84f6d1abe7b1872cb4c4f816881"
+  "gitHead": "ea3eafb31497479dd35c38da2170cfab8ec7bcf9"
 }