@workday/canvas-kit-react 7.0.4 → 7.0.7

package/checkbox/lib/Checkbox.tsx

@@ -58,6 +58,10 @@ export interface CheckboxProps extends Themeable {
    * @default false
    */
   indeterminate?: boolean;
+  /**
+   * The variant for the checkbox
+   */
+  variant?: 'inverse' | undefined;
 }
 
 const checkboxHeight = 18;
@@ -87,16 +91,20 @@ const CheckboxInputWrapper = styled('div')<Pick<CheckboxProps, 'disabled'>>({
   alignSelf: 'flex-start',
 });
 
-const CheckboxRipple = styled('span')<Pick<CheckboxProps, 'disabled'>>({
-  borderRadius: borderRadius.circle,
-  boxShadow: `0 0 0 0 ${colors.soap200}`,
-  height: checkboxHeight,
-  transition: 'box-shadow 150ms ease-out',
-  width: checkboxWidth,
-  position: 'absolute',
-  pointerEvents: 'none', // This is a decorative element we don't want it to block clicks to input
-  zIndex: -1,
-});
+const CheckboxRipple = styled('span')<Pick<CheckboxProps, 'disabled' | 'variant'>>(
+  {
+    borderRadius: borderRadius.circle,
+    boxShadow: `0 0 0 0 ${colors.soap200}`,
+    height: checkboxHeight,
+    transition: 'box-shadow 150ms ease-out',
+    width: checkboxWidth,
+    position: 'absolute',
+    pointerEvents: 'none', // This is a decorative element we don't want it to block clicks to input
+  },
+  ({variant}) => ({
+    opacity: variant === 'inverse' ? '0.4' : '1',
+  })
+);
 
 /**
  * Note: `~ div:first-of-type` refers to `CheckboxBackground`
@@ -112,6 +120,7 @@ const CheckboxInput = styled('input')<CheckboxProps & StyledType>(
         },
       },
     },
+    variant,
   }) => ({
     borderRadius: borderRadius.s,
     width: checkboxTapArea,
@@ -129,20 +138,21 @@ const CheckboxInput = styled('input')<CheckboxProps & StyledType>(
     // 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
@@ -150,30 +160,48 @@ const CheckboxInput = styled('input')<CheckboxProps & StyledType>(
       outline: 'none',
     },
     '&:focus ~ div:first-of-type': {
-      borderColor: themePrimary.main,
+      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': {
-      ...focusRing({width: 2, separation: 2, animate: false, outerColor: themeFocusOutline}),
+      ...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,
       },
     }),
   }),
@@ -182,7 +210,7 @@ const CheckboxInput = styled('input')<CheckboxProps & StyledType>(
       boxShadow: disabled ? undefined : `0 0 0 ${rippleRadius}px ${colors.soap200}`,
     },
   }),
-  ({theme, error}) => {
+  ({theme, error, variant}) => {
     const errorColors = getErrorColors(error, theme);
 
     if (errorColors.outer === errorColors.inner) {
@@ -191,24 +219,24 @@ const CheckboxInput = styled('input')<CheckboxProps & StyledType>(
 
     const 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,
+        borderColor: variant === 'inverse' ? colors.soap300 : theme.canvas.palette.primary.main,
         boxShadow: `
-            0 0 0 2px ${colors.frenchVanilla100},
-            0 0 0 4px ${errorColors.inner},
-            0 0 0 5px ${errorColors.outer}`,
+              0 0 0 2px ${colors.frenchVanilla100},
+              0 0 0 4px ${errorColors.inner},
+              0 0 0 5px ${errorColors.outer}`,
       },
     };
     return {
-      ...errorStyles,
       // Error rings take precedence over focus
       ...mouseFocusBehavior({
         ...errorStyles,
@@ -217,25 +245,30 @@ const CheckboxInput = styled('input')<CheckboxProps & StyledType>(
           boxShadow: `0 0 0 1px ${errorColors.inner}, 0 0 0 2px ${errorColors.outer}`,
         },
       }),
+      ...errorStyles,
     };
   }
 );
 
-const CheckboxBackground = styled('div')<CheckboxProps>({
-  alignItems: 'center',
-  backgroundColor: colors.frenchVanilla100,
-  borderRadius: borderRadius.s,
-  border: '1px solid ' + inputColors.border,
-  boxSizing: 'border-box',
-  display: 'flex',
-  height: checkboxHeight,
-  justifyContent: 'center',
-  padding: '0px 2px',
-  pointerEvents: 'none',
-  position: 'absolute',
-  transition: 'border 200ms ease, background 200ms',
-  width: checkboxWidth,
-});
+const CheckboxBackground = styled('div')<CheckboxProps>(
+  {
+    alignItems: 'center',
+    backgroundColor: colors.frenchVanilla100,
+    borderRadius: borderRadius.s,
+    boxSizing: 'border-box',
+    display: 'flex',
+    height: checkboxHeight,
+    justifyContent: 'center',
+    padding: '0px 2px',
+    pointerEvents: 'none',
+    position: 'absolute',
+    transition: 'border 200ms ease, background 200ms',
+    width: checkboxWidth,
+  },
+  ({variant}) => ({
+    border: `1px solid ${variant === 'inverse' ? colors.soap300 : inputColors.border}`,
+  })
+);
 
 const CheckboxCheck = styled('div')<Pick<CheckboxProps, 'checked'>>(
   {
@@ -261,22 +294,32 @@ const CheckboxCheck = styled('div')<Pick<CheckboxProps, 'checked'>>(
   })
 );
 
-const IndeterminateBox = styled('div')(
+const IndeterminateBox = styled('div')<CheckboxProps>(
   {
     width: '10px',
     height: '2px',
   },
-  ({theme}) => ({
-    backgroundColor: theme.canvas.palette.primary.contrast,
+  ({theme, variant}) => ({
+    backgroundColor:
+      variant === 'inverse'
+        ? theme.canvas.palette.primary.main
+        : theme.canvas.palette.primary.contrast,
   })
 );
 
-const CheckboxLabel = styled('label')<{disabled?: boolean}>(
+const CheckboxLabel = styled('label')<{disabled?: boolean; variant?: string}>(
   {
     ...canvas.type.levels.subtext.large,
     paddingLeft: checkboxLabelDistance,
   },
-  ({disabled}) => (disabled ? {color: inputColors.disabled.text} : {cursor: 'pointer'})
+  ({variant}) => (variant === 'inverse' ? {color: colors.frenchVanilla100} : undefined),
+  ({disabled, variant}) =>
+    disabled
+      ? {
+          color: variant === 'inverse' ? colors.frenchVanilla100 : inputColors.disabled.text,
+          opacity: variant === 'inverse' ? '.4' : '1',
+        }
+      : {cursor: 'pointer'}
 );
 
 export const Checkbox = createComponent('input')({
@@ -294,6 +337,7 @@ export const Checkbox = createComponent('input')({
       value,
       error,
       indeterminate,
+      variant,
       ...elemProps
     }: CheckboxProps,
     ref,
@@ -313,22 +357,30 @@ export const Checkbox = createComponent('input')({
             type="checkbox"
             value={value}
             error={error}
+            variant={variant}
             aria-checked={indeterminate ? 'mixed' : checked}
             {...elemProps}
           />
-          <CheckboxRipple />
-          <CheckboxBackground checked={checked} disabled={disabled}>
+          <CheckboxRipple variant={variant} />
+          <CheckboxBackground variant={variant} checked={checked} disabled={disabled}>
             <CheckboxCheck checked={checked}>
               {indeterminate ? (
-                <IndeterminateBox />
+                <IndeterminateBox variant={variant} />
               ) : (
-                <SystemIcon icon={checkSmallIcon} color={theme.canvas.palette.primary.contrast} />
+                <SystemIcon
+                  icon={checkSmallIcon}
+                  color={
+                    variant === 'inverse'
+                      ? theme.canvas.palette.primary.main
+                      : theme.canvas.palette.primary.contrast
+                  }
+                />
               )}
             </CheckboxCheck>
           </CheckboxBackground>
         </CheckboxInputWrapper>
         {label && (
-          <CheckboxLabel htmlFor={inputId} disabled={disabled}>
+          <CheckboxLabel variant={variant} htmlFor={inputId} disabled={disabled}>
             {label}
           </CheckboxLabel>
         )}

package/dist/commonjs/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/commonjs/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/commonjs/checkbox/lib/Checkbox.js

@@ -79,55 +79,70 @@ var CheckboxRipple = common_1.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 = common_1.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: tokens_1.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: tokens_1.inputColors.hoverBorder,
+                borderColor: variant === 'inverse' ? tokens_1.colors.soap300 : tokens_1.inputColors.hoverBorder,
             },
         }, '&:checked ~ div:first-of-type': {
-            borderColor: themePrimary.main,
-            backgroundColor: themePrimary.main,
+            borderColor: variant === 'inverse' ? tokens_1.colors.soap300 : themePrimary.main,
+            backgroundColor: variant === 'inverse' ? tokens_1.colors.frenchVanilla100 : themePrimary.main,
         }, '&:disabled ~ div:first-of-type': {
             borderColor: tokens_1.inputColors.disabled.border,
-            backgroundColor: tokens_1.inputColors.disabled.background,
+            backgroundColor: variant === 'inverse' ? tokens_1.colors.soap300 : tokens_1.inputColors.disabled.background,
+            opacity: variant === 'inverse' ? '.4' : '1',
         }, '&:disabled:checked ~ div:first-of-type': {
-            borderColor: themePrimary.light,
-            backgroundColor: themePrimary.light,
+            borderColor: variant === 'inverse' ? tokens_1.colors.soap300 : themePrimary.light,
+            backgroundColor: variant === 'inverse' ? tokens_1.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({}, common_1.focusRing({ width: 2, separation: 2, animate: false, outerColor: themeFocusOutline })), { '& span': {
+        }, '&:focus ~ div:first-of-type': __assign({ borderColor: variant === 'inverse' ? tokens_1.colors.blackPepper400 : themePrimary.main, borderWidth: '2px', 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({
+            width: 2,
+            separation: 2,
+            animate: false,
+            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', '& span': {
                 marginLeft: '-7px',
             } }) }, common_1.mouseFocusBehavior({
         '&:focus ~ div:first-of-type': {
-            border: "1px solid " + tokens_1.inputColors.hoverBorder,
+            border: variant === 'inverse'
+                ? "1px solid " + tokens_1.colors.soap300
+                : "1px solid " + tokens_1.inputColors.hoverBorder,
             boxShadow: 'none',
             '& span': {
                 marginLeft: '-6px',
             },
         },
         '&:checked ~ div:first-of-type': {
-            borderColor: themePrimary.main,
+            borderColor: variant === 'inverse' ? tokens_1.colors.soap300 : themePrimary.main,
         },
         '&:disabled:checked ~ div:first-of-type': {
             borderColor: themePrimary.light,
-            backgroundColor: themePrimary.light,
+            backgroundColor: variant === 'inverse' ? tokens_1.colors.soap300 : themePrimary.light,
         },
     })));
 }, function (_a) {
@@ -138,36 +153,35 @@ var CheckboxInput = common_1.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 = common_1.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 " + tokens_1.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 " + tokens_1.colors.soap300 : errorColors.inner,
             },
         },
         '&:checked ~ div:first-of-type': {
-            borderColor: theme.canvas.palette.primary.main,
-            boxShadow: "\n            0 0 0 2px " + tokens_1.colors.frenchVanilla100 + ",\n            0 0 0 4px " + errorColors.inner + ",\n            0 0 0 5px " + errorColors.outer,
+            borderColor: variant === 'inverse' ? tokens_1.colors.soap300 : theme.canvas.palette.primary.main,
+            boxShadow: "\n              0 0 0 2px " + tokens_1.colors.frenchVanilla100 + ",\n              0 0 0 4px " + errorColors.inner + ",\n              0 0 0 5px " + errorColors.outer,
         },
     };
-    return __assign(__assign({}, errorStyles), common_1.mouseFocusBehavior(__assign(__assign({}, errorStyles), { '&:not(:checked):focus ~ div:first-of-type': {
+    return __assign(__assign({}, common_1.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 = common_1.styled('div')({
     alignItems: 'center',
     backgroundColor: tokens_1.colors.frenchVanilla100,
     borderRadius: tokens_1.borderRadius.s,
-    border: '1px solid ' + tokens_1.inputColors.border,
     boxSizing: 'border-box',
     display: 'flex',
     height: checkboxHeight,
@@ -177,6 +191,11 @@ var CheckboxBackground = common_1.styled('div')({
     position: 'absolute',
     transition: 'border 200ms ease, background 200ms',
     width: checkboxWidth,
+}, function (_a) {
+    var variant = _a.variant;
+    return ({
+        border: "1px solid " + (variant === 'inverse' ? tokens_1.colors.soap300 : tokens_1.inputColors.border),
+    });
 });
 var CheckboxCheck = common_1.styled('div')({
     display: 'flex',
@@ -205,14 +224,24 @@ var IndeterminateBox = common_1.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 = common_1.styled('label')(__assign(__assign({}, tokens_1.default.type.levels.subtext.large), { paddingLeft: checkboxLabelDistance }), 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.Checkbox = common_1.createComponent('input')({
     displayName: 'Checkbox',
@@ -223,15 +252,17 @@ exports.Checkbox = common_1.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 ? common_1.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 ? common_1.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 = common_1.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(icon_1.SystemIcon, { icon: canvas_system_icons_web_1.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(icon_1.SystemIcon, { icon: canvas_system_icons_web_1.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: common_1.ErrorType,

package/dist/commonjs/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/commonjs/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"}