@atlaskit/checkbox 12.3.4 → 12.3.8

package/dist/cjs/internal/theme.js

@@ -0,0 +1,65 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _colors = require("@atlaskit/theme/colors");
+
+var theme = {
+  light: {
+    borderColor: {
+      rest: "var(--ds-border, ".concat(_colors.N40, ")"),
+      hovered: "var(--ds-border, ".concat(_colors.N40, ")"),
+      disabled: "var(--ds-background-disabled, ".concat(_colors.N20, ")"),
+      checked: "var(--ds-background-brand-bold, ".concat(_colors.B400, ")"),
+      active: "var(--ds-border, ".concat(_colors.B50, ")"),
+      invalid: "var(--ds-border-danger, ".concat(_colors.R300, ")"),
+      invalidAndChecked: "var(--ds-border-danger, ".concat(_colors.R300, ")"),
+      focused: "var(--ds-border-focused, ".concat(_colors.B100, ")"),
+      hoveredAndChecked: "var(--ds-background-brand-bold-hovered, ".concat(_colors.B300, ")")
+    },
+    boxColor: {
+      rest: "var(--ds-background-input, ".concat(_colors.N10, ")"),
+      hovered: "var(--ds-surface, ".concat(_colors.N30, ")"),
+      disabled: "var(--ds-background-disabled, ".concat(_colors.N20, ")"),
+      active: "var(--ds-background-input-pressed, ".concat(_colors.B50, ")"),
+      hoveredAndChecked: "var(--ds-background-brand-bold-hovered, ".concat(_colors.B300, ")"),
+      checked: "var(--ds-background-brand-bold, ".concat(_colors.B400, ")")
+    },
+    tickColor: {
+      disabledAndChecked: "var(--ds-text-disabled, ".concat(_colors.N70, ")"),
+      activeAndChecked: "var(--ds-text-inverse, ".concat(_colors.B400, ")"),
+      checked: "var(--ds-text-inverse, ".concat(_colors.N10, ")")
+    }
+  },
+  dark: {
+    borderColor: {
+      rest: "var(--ds-border, ".concat(_colors.DN80, ")"),
+      hovered: "var(--ds-border, ".concat(_colors.DN200, ")"),
+      disabled: "var(--ds-background-disabled, ".concat(_colors.DN10, ")"),
+      checked: "var(--ds-background-brand-bold, ".concat(_colors.B400, ")"),
+      active: "var(--ds-border, ".concat(_colors.B200, ")"),
+      invalid: "var(--ds-border-danger, ".concat(_colors.R300, ")"),
+      invalidAndChecked: "var(--ds-border-danger, ".concat(_colors.R300, ")"),
+      focused: "var(--ds-border-focused, ".concat(_colors.B75, ")"),
+      hoveredAndChecked: "var(--ds-background-brand-bold-hovered, ".concat(_colors.B75, ")")
+    },
+    boxColor: {
+      rest: "var(--ds-background-input, ".concat(_colors.DN10, ")"),
+      hovered: "var(--ds-surface, ".concat(_colors.DN30, ")"),
+      disabled: "var(--ds-background-disabled, ".concat(_colors.DN10, ")"),
+      active: "var(--ds-background-input-pressed, ".concat(_colors.B200, ")"),
+      hoveredAndChecked: "var(--ds-background-brand-bold-hovered, ".concat(_colors.B75, ")"),
+      checked: "var(--ds-background-brand-bold, ".concat(_colors.B400, ")")
+    },
+    tickColor: {
+      disabledAndChecked: "var(--ds-text-disabled, ".concat(_colors.DN90, ")"),
+      activeAndChecked: "var(--ds-text-inverse, ".concat(_colors.DN10, ")"),
+      checked: "var(--ds-text-inverse, ".concat(_colors.DN10, ")")
+    }
+  }
+};
+var _default = theme;
+exports.default = _default;

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/checkbox",
-	"version": "12.3.4",
+	"version": "12.3.8",
 	"sideEffects": false
 }

package/dist/es2019/checkbox.js

@@ -1,60 +1,128 @@
 import _extends from "@babel/runtime/helpers/extends";
 
 /**  @jsx jsx */
-import { forwardRef, memo, useCallback, useMemo, useRef, useState } from 'react';
-import { jsx } from '@emotion/core';
+import { forwardRef, memo, useCallback, useRef, useState } from 'react';
+import { css, jsx } from '@emotion/core';
 import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next/usePlatformLeafEventHandler';
-import mergeRefs from '@atlaskit/ds-lib/merge-refs'; // eslint-disable-next-line @atlassian/tangerine/import/entry-points
-
-import PrimitiveSVGIcon from '@atlaskit/icon/svg';
-import GlobalTheme from '@atlaskit/theme/components';
-import { getCheckboxStyles, Label, LabelText, RequiredIndicator } from './internal';
+import mergeRefs from '@atlaskit/ds-lib/merge-refs';
+import { CheckboxIcon, Label, LabelText, RequiredIndicator } from './internal';
 // firefox doesn't handle cmd+click/ctrl+click properly
 const isFirefox = typeof navigator !== 'undefined' && navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
+/* eslint-disable @repo/internal/styles/no-nested-styles */
 
-function getIcon(isIndeterminate, isChecked) {
-  if (isIndeterminate) {
-    return jsx("rect", {
-      fill: "inherit",
-      x: "8",
-      y: "11",
-      width: "8",
-      height: "2",
-      rx: "1"
-    });
-  }
-
-  if (isChecked) {
-    return jsx("path", {
-      d: "M9.707 11.293a1 1 0 1 0-1.414 1.414l2 2a1 1 0 0 0 1.414 0l4-4a1 1 0 1 0-1.414-1.414L11 12.586l-1.293-1.293z",
-      fill: "inherit"
-    });
-  } // No icon
+const checkboxStyles = css({
+  width: 0,
+  // Necessary to hide correctly on mobile Safari
+  height: 0,
+  // Necessary to hide correctly on mobile Safari
+  margin: 0,
+  appearance: 'none',
+  border: 'none',
+  // Necessary to hide correctly on mobile Safari
+  outline: 'none',
+  // Necessary to hide focus ring on Firefox
+  '& + svg': {
+    flexShrink: 0,
+    alignSelf: 'flex-start',
 
+    /**
+     *  Change the variables --checkbox-background-color, --checkbox-border-color
+     *  and --checkbox-tick-color according to user interactions.
+     *  All other variables are constant.
+     *  All styles from the input target the sibling svg.
+     */
+    '--checkbox-background-color': 'var(--local-background)',
+    '--checkbox-border-color': 'var(--local-border)',
+    '--checkbox-tick-color': 'var(--local-tick-rest)',
+    color: 'var(--checkbox-background-color)',
+    fill: 'var(--checkbox-tick-color)',
+    transition: 'color 0.2s ease-in-out, fill 0.2s ease-in-out',
+    'rect:first-of-type': {
+      stroke: 'var(--checkbox-border-color)',
+      strokeWidth: 2,
+      transition: 'stroke 0.2s ease-in-out'
+    }
+  },
+  '&&:focus + svg, &&:checked:focus + svg': {
+    '--checkbox-border-color': 'var(--local-border-focus)'
+  },
+  '&:hover + svg': {
+    '--checkbox-background-color': 'var(--local-background-hover)',
+    '--checkbox-border-color': 'var(--local-border-hover)'
+  },
+  '&:checked:hover + svg': {
+    '--checkbox-background-color': 'var(--local-background-checked-hover)',
+    '--checkbox-border-color': 'var(--local-border-checked-hover)'
+  },
+  '&:checked + svg': {
+    '--checkbox-background-color': 'var(--local-background-checked)',
+    '--checkbox-border-color': 'var(--local-border-checked)',
+    '--checkbox-tick-color': 'var(--local-tick-checked)'
+  },
+  '&[data-invalid] + svg': {
+    '--checkbox-border-color': 'var(--local-border-invalid)'
+  },
+  '&:checked[data-invalid] + svg': {
+    '--checkbox-border-color': 'var(--local-border-checked-invalid)'
+  },
+  '&:active + svg': {
+    '--checkbox-background-color': 'var(--local-background-active)',
+    '--checkbox-border-color': 'var(--local-border-active)'
+  },
+  '&:checked:active + svg': {
+    '--checkbox-background-color': 'var(--local-background-active)',
+    '--checkbox-border-color': 'var(--local-border-active)',
+    '--checkbox-tick-color': 'var(--local-tick-active)'
+  },
+  '&:disabled + svg, &:disabled:hover + svg, &:disabled:focus + svg, &:disabled:active + svg, &:disabled[data-invalid] + svg': {
+    '--checkbox-background-color': 'var(--local-background-disabled)',
+    '--checkbox-border-color': 'var(--local-border-disabled)',
+    cursor: 'not-allowed',
+    pointerEvents: 'none'
+  },
+  '&:disabled:checked + svg': {
+    '--checkbox-tick-color': 'var(--local-tick-disabled)'
+  },
+  '@media screen and (forced-colors: active)': {
+    '& + svg': {
+      '--checkbox-background-color': 'Canvas',
+      '--checkbox-border-color': 'CanvasText',
+      '--checkbox-tick-color': 'CanvasText'
+    },
+    '&:checked + svg, &:checked:hover + svg': {
+      '--checkbox-background-color': 'Canvas',
+      '--checkbox-border-color': 'CanvasText',
+      '--checkbox-tick-color': 'CanvasText'
+    },
+    '&:focus + svg rect:first-of-type': {
+      stroke: 'Highlight'
+    },
+    '&[data-invalid] + svg': {
+      '--checkbox-border-color': 'Highlight'
+    },
+    '&:checked[data-invalid] + svg': {
+      '--checkbox-border-color': 'Highlight'
+    },
+    '&:disabled + svg, &:disabled:hover + svg, &:disabled:focus + svg, &:disabled:active + svg, &:disabled[data-invalid] + svg': {
+      '--checkbox-background-color': 'Canvas',
+      '--checkbox-border-color': 'GrayText',
+      '--checkbox-tick-color': 'GrayText'
+    }
+  }
+});
+/* eslint-enable @repo/internal/styles/no-nested-styles */
 
-  return null;
-}
+/**
+ * __Checkbox__
+ *
+ * A checkbox an input control that allows a user to select one or more options from a number of choices.
+ *
+ * - [Examples](https://atlassian.design/components/checkbox/examples)
+ * - [Code](https://atlassian.design/components/checkbox/code)
+ * - [Usage](https://atlassian.design/components/checkbox/usage)
+ */
 
-const CheckboxIcon = /*#__PURE__*/memo(({
-  size,
-  isIndeterminate,
-  isChecked
-}) => jsx(PrimitiveSVGIcon, {
-  label: "",
-  size: size,
-  primaryColor: "var(--checkbox-background-color)",
-  secondaryColor: "var(--checkbox-tick-color)"
-}, jsx("g", {
-  fillRule: "evenodd"
-}, jsx("rect", {
-  fill: "currentColor",
-  x: "6",
-  y: "6",
-  width: "12",
-  height: "12",
-  rx: "2"
-}), getIcon(isIndeterminate, isChecked))));
-const CheckboxWithMode = /*#__PURE__*/forwardRef(function Checkbox(props, ref) {
+const Checkbox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function Checkbox(props, ref) {
   const {
     isChecked: isCheckedProp,
     isDisabled = false,
@@ -65,7 +133,6 @@ const CheckboxWithMode = /*#__PURE__*/forwardRef(function Checkbox(props, ref) {
     onChange: onChangeProps,
     analyticsContext,
     label,
-    mode,
     name,
     value,
     isRequired,
@@ -86,7 +153,7 @@ const CheckboxWithMode = /*#__PURE__*/forwardRef(function Checkbox(props, ref) {
     analyticsData: analyticsContext,
     componentName: 'checkbox',
     packageName: "@atlaskit/checkbox",
-    packageVersion: "12.3.4"
+    packageVersion: "12.3.8"
   });
   const internalRef = useRef(null);
   const mergedRefs = mergeRefs([internalRef, ref]); // firefox doesn't properly dispatch events from label to its child input elements
@@ -100,11 +167,7 @@ const CheckboxWithMode = /*#__PURE__*/forwardRef(function Checkbox(props, ref) {
   }; // Use isChecked from the state if it is controlled
 
 
-  const isChecked = isCheckedProp === undefined ? isCheckedState : isCheckedProp; // The styles are being generated for the input but are being
-  // applied to the svg with a sibling selector so we have access
-  // to the pseudo-classes of the input
-
-  const styles = useMemo(() => getCheckboxStyles(mode), [mode]);
+  const isChecked = isCheckedProp === undefined ? isCheckedState : isCheckedProp;
   return jsx(Label, {
     isDisabled: isDisabled,
     testId: testId && `${testId}--checkbox-label`,
@@ -117,7 +180,7 @@ const CheckboxWithMode = /*#__PURE__*/forwardRef(function Checkbox(props, ref) {
     value: value,
     name: name,
     required: isRequired,
-    css: styles,
+    css: checkboxStyles,
     onChange: onChangeAnalytics,
     "aria-checked": isIndeterminate ? 'mixed' : isChecked,
     "aria-invalid": isInvalid ? 'true' : undefined,
@@ -127,17 +190,7 @@ const CheckboxWithMode = /*#__PURE__*/forwardRef(function Checkbox(props, ref) {
     size: size,
     isIndeterminate: isIndeterminate,
     isChecked: isChecked
-  }), label && jsx(LabelText, null, label, isRequired && jsx(RequiredIndicator, {
-    "aria-hidden": "true"
-  })));
-});
-export const Checkbox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function Checkbox(props, ref) {
-  return jsx(GlobalTheme.Consumer, null, ({
-    mode
-  }) => jsx(CheckboxWithMode, _extends({}, props, {
-    ref: ref,
-    mode: mode
-  })));
+  }), label && jsx(LabelText, null, label, isRequired && jsx(RequiredIndicator, null)));
 }));
 Checkbox.displayName = 'Checkbox';
 export default Checkbox;

package/dist/es2019/index.js

@@ -1,2 +1,2 @@
 // This allows you to import Checkbox as a default or named export
-export { default, Checkbox } from './checkbox';
+export { default, default as Checkbox } from './checkbox';

package/dist/es2019/internal/checkbox-icon.js

@@ -0,0 +1,60 @@
+/**  @jsx jsx */
+import { memo, useMemo } from 'react';
+import { jsx } from '@emotion/core';
+import PrimitiveSVGIcon from '@atlaskit/icon/svg';
+
+function getIcon(isIndeterminate, isChecked) {
+  if (isIndeterminate) {
+    return jsx("rect", {
+      fill: "inherit",
+      x: "8",
+      y: "11",
+      width: "8",
+      height: "2",
+      rx: "1"
+    });
+  }
+
+  if (isChecked) {
+    return jsx("path", {
+      d: "M9.707 11.293a1 1 0 1 0-1.414 1.414l2 2a1 1 0 0 0 1.414 0l4-4a1 1 0 1 0-1.414-1.414L11 12.586l-1.293-1.293z",
+      fill: "inherit"
+    });
+  } // No icon
+
+
+  return null;
+}
+/**
+ * __Checkbox icon__
+ *
+ * A checkbox icon is the visual representation of checkbox state,
+ * which is shown instead of the native input.
+ *
+ * @internal
+ */
+
+
+const CheckboxIcon = /*#__PURE__*/memo(({
+  size,
+  isIndeterminate,
+  isChecked
+}) => {
+  const icon = useMemo(() => getIcon(isIndeterminate, isChecked), [isIndeterminate, isChecked]);
+  return jsx(PrimitiveSVGIcon, {
+    label: "",
+    size: size,
+    primaryColor: "var(--checkbox-background-color)",
+    secondaryColor: "var(--checkbox-tick-color)"
+  }, jsx("g", {
+    fillRule: "evenodd"
+  }, jsx("rect", {
+    fill: "currentColor",
+    x: "6",
+    y: "6",
+    width: "12",
+    height: "12",
+    rx: "2"
+  }), icon));
+});
+export default CheckboxIcon;

package/dist/es2019/internal/constants.js

@@ -0,0 +1,3 @@
+import { fontFamily as getFontFamily, gridSize as getGridSize } from '@atlaskit/theme/constants';
+export const fontFamily = getFontFamily();
+export const gridSize = getGridSize();

package/dist/es2019/internal/index.js

@@ -1,4 +1,4 @@
-export { default as getCheckboxStyles } from './styles';
+export { default as CheckboxIcon } from './checkbox-icon';
 export { default as Label } from './label';
 export { default as LabelText } from './label-text';
 export { default as RequiredIndicator } from './required-indicator';

package/dist/es2019/internal/label-text.js

@@ -1,15 +1,14 @@
 /** @jsx jsx */
-import { jsx } from '@emotion/core';
-import { gridSize } from '@atlaskit/theme/constants';
-const padding = gridSize() * 0.5;
-export const labelTextCSS = {
-  paddingRight: padding,
-  paddingLeft: padding
-};
+import { css, jsx } from '@emotion/core';
+import { gridSize } from './constants';
+const labelTextStyles = css({
+  paddingRight: 0.5 * gridSize,
+  paddingLeft: 0.5 * gridSize
+});
 export default function LabelText({
   children
 }) {
   return jsx("span", {
-    css: labelTextCSS
+    css: labelTextStyles
   }, children);
 }

package/dist/es2019/internal/label.js

@@ -1,30 +1,97 @@
 /** @jsx jsx */
-import { useMemo } from 'react';
-import { jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/core';
 import { N80, N900 } from '@atlaskit/theme/colors';
-import { fontFamily as getFontFamily } from '@atlaskit/theme/constants';
-import { token } from '@atlaskit/tokens';
-const fontFamily = getFontFamily();
-export const labelCSS = () => ({
-  fontFamily: fontFamily,
-  alignItems: 'center',
+import { useGlobalTheme } from '@atlaskit/theme/components';
+import { fontFamily } from './constants';
+import theme from './theme';
+const labelStyles = css({
   display: 'flex',
-  color: token('color.text.highEmphasis', N900),
+  alignItems: 'center',
+  color: `var(--ds-text, ${N900})`,
   cursor: 'default',
-  '&[data-disabled]': {
-    color: token('color.text.disabled', N80),
-    cursor: 'not-allowed'
-  }
+  fontFamily
+});
+const disabledStyles = css({
+  color: `var(--ds-text-disabled, ${N80})`,
+  cursor: 'not-allowed'
 });
+const themeStyles = {
+  light: css({
+    /**
+     * Background
+     */
+    '--local-background': theme.light.boxColor.rest,
+    '--local-background-active': theme.light.boxColor.active,
+    '--local-background-checked': theme.light.boxColor.checked,
+    '--local-background-checked-hover': theme.light.boxColor.hoveredAndChecked,
+    '--local-background-disabled': theme.light.boxColor.disabled,
+    '--local-background-hover': theme.light.boxColor.hovered,
+
+    /**
+     * Border
+     */
+    '--local-border': theme.light.borderColor.rest,
+    '--local-border-active': theme.light.borderColor.active,
+    '--local-border-checked': theme.light.borderColor.checked,
+    '--local-border-checked-hover': theme.light.borderColor.hoveredAndChecked,
+    '--local-border-checked-invalid': theme.light.borderColor.invalidAndChecked,
+    '--local-border-disabled': theme.light.borderColor.disabled,
+    '--local-border-focus': theme.light.borderColor.focused,
+    '--local-border-hover': theme.light.borderColor.hovered,
+    '--local-border-invalid': theme.light.borderColor.invalid,
+
+    /**
+     * Tick
+     */
+    '--local-tick-active': theme.light.tickColor.activeAndChecked,
+    '--local-tick-checked': theme.light.tickColor.checked,
+    '--local-tick-disabled': theme.light.tickColor.disabledAndChecked,
+    '--local-tick-rest': 'transparent'
+  }),
+  dark: css({
+    /**
+     * Background
+     */
+    '--local-background': theme.dark.boxColor.rest,
+    '--local-background-active': theme.dark.boxColor.active,
+    '--local-background-checked': theme.dark.boxColor.checked,
+    '--local-background-checked-hover': theme.dark.boxColor.hoveredAndChecked,
+    '--local-background-disabled': theme.dark.boxColor.disabled,
+    '--local-background-hover': theme.dark.boxColor.hovered,
+
+    /**
+     * Border
+     */
+    '--local-border': theme.dark.borderColor.rest,
+    '--local-border-active': theme.dark.borderColor.active,
+    '--local-border-checked': theme.dark.borderColor.checked,
+    '--local-border-checked-hover': theme.dark.borderColor.hoveredAndChecked,
+    '--local-border-checked-invalid': theme.dark.borderColor.invalidAndChecked,
+    '--local-border-disabled': theme.dark.borderColor.disabled,
+    '--local-border-focus': theme.dark.borderColor.focused,
+    '--local-border-hover': theme.dark.borderColor.hovered,
+    '--local-border-invalid': theme.dark.borderColor.invalid,
+
+    /**
+     * Tick
+     */
+    '--local-tick-active': theme.dark.tickColor.activeAndChecked,
+    '--local-tick-checked': theme.dark.tickColor.checked,
+    '--local-tick-disabled': theme.dark.tickColor.disabledAndChecked,
+    '--local-tick-rest': 'transparent'
+  })
+};
 export default function Label({
   children,
   isDisabled,
   testId,
   onClick
 }) {
-  const styles = useMemo(() => labelCSS(), []);
+  const {
+    mode
+  } = useGlobalTheme();
   return jsx("label", {
-    css: styles,
+    css: [labelStyles, isDisabled && disabledStyles, mode === 'light' && themeStyles.light, mode === 'dark' && themeStyles.dark],
     "data-testid": testId,
     "data-disabled": isDisabled || undefined,
     onClick: onClick

package/dist/es2019/internal/required-indicator.js

@@ -1,16 +1,14 @@
-import _extends from "@babel/runtime/helpers/extends";
-
 /** @jsx jsx */
-import { jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/core';
 import { R500 } from '@atlaskit/theme/colors';
-import { gridSize } from '@atlaskit/theme/constants';
-import { token } from '@atlaskit/tokens';
-const paddingLeft = `${gridSize() * 0.25}px`;
-export default function RequiredIndicator(props) {
-  return jsx("span", _extends({
-    css: {
-      color: token('color.text.danger', R500),
-      paddingLeft
-    }
-  }, props), "*");
+import { gridSize } from './constants';
+const requiredIndicatorStyles = css({
+  paddingLeft: gridSize * 0.25,
+  color: `var(--ds-text-danger, ${R500})`
+});
+export default function RequiredIndicator() {
+  return jsx("span", {
+    css: requiredIndicatorStyles,
+    "aria-hidden": true
+  }, "*");
 }

package/dist/es2019/internal/theme.js

@@ -0,0 +1,56 @@
+import { B100, B200, B300, B400, B50, B75, DN10, DN200, DN30, DN80, DN90, N10, N20, N30, N40, N70, R300 } from '@atlaskit/theme/colors';
+const theme = {
+  light: {
+    borderColor: {
+      rest: `var(--ds-border, ${N40})`,
+      hovered: `var(--ds-border, ${N40})`,
+      disabled: `var(--ds-background-disabled, ${N20})`,
+      checked: `var(--ds-background-brand-bold, ${B400})`,
+      active: `var(--ds-border, ${B50})`,
+      invalid: `var(--ds-border-danger, ${R300})`,
+      invalidAndChecked: `var(--ds-border-danger, ${R300})`,
+      focused: `var(--ds-border-focused, ${B100})`,
+      hoveredAndChecked: `var(--ds-background-brand-bold-hovered, ${B300})`
+    },
+    boxColor: {
+      rest: `var(--ds-background-input, ${N10})`,
+      hovered: `var(--ds-surface, ${N30})`,
+      disabled: `var(--ds-background-disabled, ${N20})`,
+      active: `var(--ds-background-input-pressed, ${B50})`,
+      hoveredAndChecked: `var(--ds-background-brand-bold-hovered, ${B300})`,
+      checked: `var(--ds-background-brand-bold, ${B400})`
+    },
+    tickColor: {
+      disabledAndChecked: `var(--ds-text-disabled, ${N70})`,
+      activeAndChecked: `var(--ds-text-inverse, ${B400})`,
+      checked: `var(--ds-text-inverse, ${N10})`
+    }
+  },
+  dark: {
+    borderColor: {
+      rest: `var(--ds-border, ${DN80})`,
+      hovered: `var(--ds-border, ${DN200})`,
+      disabled: `var(--ds-background-disabled, ${DN10})`,
+      checked: `var(--ds-background-brand-bold, ${B400})`,
+      active: `var(--ds-border, ${B200})`,
+      invalid: `var(--ds-border-danger, ${R300})`,
+      invalidAndChecked: `var(--ds-border-danger, ${R300})`,
+      focused: `var(--ds-border-focused, ${B75})`,
+      hoveredAndChecked: `var(--ds-background-brand-bold-hovered, ${B75})`
+    },
+    boxColor: {
+      rest: `var(--ds-background-input, ${DN10})`,
+      hovered: `var(--ds-surface, ${DN30})`,
+      disabled: `var(--ds-background-disabled, ${DN10})`,
+      active: `var(--ds-background-input-pressed, ${B200})`,
+      hoveredAndChecked: `var(--ds-background-brand-bold-hovered, ${B75})`,
+      checked: `var(--ds-background-brand-bold, ${B400})`
+    },
+    tickColor: {
+      disabledAndChecked: `var(--ds-text-disabled, ${DN90})`,
+      activeAndChecked: `var(--ds-text-inverse, ${DN10})`,
+      checked: `var(--ds-text-inverse, ${DN10})`
+    }
+  }
+};
+export default theme;

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/checkbox",
-	"version": "12.3.4",
+	"version": "12.3.8",
 	"sideEffects": false
 }