@atlaskit/checkbox 12.3.4 → 12.3.8

package/CHANGELOG.md

@@ -1,5 +1,32 @@
 # @atlaskit/checkbox
 
+## 12.3.8
+
+### Patch Changes
+
+- [`5d27b03c5cf`](https://bitbucket.org/atlassian/atlassian-frontend/commits/5d27b03c5cf) - Styles have been rewritten in preparation for migration to compiled.
+- Updated dependencies
+
+## 12.3.7
+
+### Patch Changes
+
+- [`19d72473dfb`](https://bitbucket.org/atlassian/atlassian-frontend/commits/19d72473dfb) - Updates usage of deprecated token names so they're aligned with the latest naming conventions. No UI or visual changes
+- Updated dependencies
+
+## 12.3.6
+
+### Patch Changes
+
+- Updated dependencies
+
+## 12.3.5
+
+### Patch Changes
+
+- [`f460cc7c411`](https://bitbucket.org/atlassian/atlassian-frontend/commits/f460cc7c411) - Builds for this package now pass through a tokens babel plugin, removing runtime invocations of the tokens() function and improving bundle size.
+- Updated dependencies
+
 ## 12.3.4
 
 ### Patch Changes

package/codemods/{12.0.0-lite-mode.ts → 12.0.0-lite-mode.tsx}

@@ -9,7 +9,7 @@ import {
   renameDeepTypeImport,
   renameTypeImport,
 } from './migrations/rename-import';
-import { renameInputRef } from './migrations/rename-inputRef-to-ref';
+import { renameInputRef } from './migrations/rename-input-ref-to-ref';
 import { createTransformer } from './utils';
 
 const transformer = createTransformer('@atlaskit/checkbox', [

package/dist/cjs/checkbox.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.Checkbox = void 0;
+exports.default = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
@@ -21,61 +21,126 @@ var _usePlatformLeafEventHandler = require("@atlaskit/analytics-next/usePlatform
 
 var _mergeRefs = _interopRequireDefault(require("@atlaskit/ds-lib/merge-refs"));
 
-var _svg = _interopRequireDefault(require("@atlaskit/icon/svg"));
-
-var _components = _interopRequireDefault(require("@atlaskit/theme/components"));
-
 var _internal = require("./internal");
 
-/**  @jsx jsx */
-// eslint-disable-next-line @atlassian/tangerine/import/entry-points
+var _excluded = ["isChecked", "isDisabled", "isInvalid", "defaultChecked", "isIndeterminate", "size", "onChange", "analyticsContext", "label", "name", "value", "isRequired", "testId"];
 // firefox doesn't handle cmd+click/ctrl+click properly
 var isFirefox = typeof navigator !== 'undefined' && navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
-
-function getIcon(isIndeterminate, isChecked) {
-  if (isIndeterminate) {
-    return (0, _core.jsx)("rect", {
-      fill: "inherit",
-      x: "8",
-      y: "11",
-      width: "8",
-      height: "2",
-      rx: "1"
-    });
+/* eslint-disable @repo/internal/styles/no-nested-styles */
+
+var checkboxStyles = (0, _core.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'
+    }
   }
-
-  if (isChecked) {
-    return (0, _core.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;
-}
-
-var CheckboxIcon = /*#__PURE__*/(0, _react.memo)(function (_ref) {
-  var size = _ref.size,
-      isIndeterminate = _ref.isIndeterminate,
-      isChecked = _ref.isChecked;
-  return (0, _core.jsx)(_svg.default, {
-    label: "",
-    size: size,
-    primaryColor: "var(--checkbox-background-color)",
-    secondaryColor: "var(--checkbox-tick-color)"
-  }, (0, _core.jsx)("g", {
-    fillRule: "evenodd"
-  }, (0, _core.jsx)("rect", {
-    fill: "currentColor",
-    x: "6",
-    y: "6",
-    width: "12",
-    height: "12",
-    rx: "2"
-  }), getIcon(isIndeterminate, isChecked)));
 });
-var CheckboxWithMode = /*#__PURE__*/(0, _react.forwardRef)(function Checkbox(props, ref) {
+/* eslint-enable @repo/internal/styles/no-nested-styles */
+
+/**
+ * __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)
+ */
+
+var Checkbox = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef)(function Checkbox(props, ref) {
   var isCheckedProp = props.isChecked,
       _props$isDisabled = props.isDisabled,
       isDisabled = _props$isDisabled === void 0 ? false : _props$isDisabled,
@@ -90,12 +155,11 @@ var CheckboxWithMode = /*#__PURE__*/(0, _react.forwardRef)(function Checkbox(pro
       onChangeProps = props.onChange,
       analyticsContext = props.analyticsContext,
       label = props.label,
-      mode = props.mode,
       name = props.name,
       value = props.value,
       isRequired = props.isRequired,
       testId = props.testId,
-      rest = (0, _objectWithoutProperties2.default)(props, ["isChecked", "isDisabled", "isInvalid", "defaultChecked", "isIndeterminate", "size", "onChange", "analyticsContext", "label", "mode", "name", "value", "isRequired", "testId"]);
+      rest = (0, _objectWithoutProperties2.default)(props, _excluded);
 
   var _useState = (0, _react.useState)(isCheckedProp !== undefined ? isCheckedProp : defaultChecked),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),
@@ -115,7 +179,7 @@ var CheckboxWithMode = /*#__PURE__*/(0, _react.forwardRef)(function Checkbox(pro
     analyticsData: analyticsContext,
     componentName: 'checkbox',
     packageName: "@atlaskit/checkbox",
-    packageVersion: "12.3.4"
+    packageVersion: "12.3.8"
   });
   var internalRef = (0, _react.useRef)(null);
   var mergedRefs = (0, _mergeRefs.default)([internalRef, ref]); // firefox doesn't properly dispatch events from label to its child input elements
@@ -129,13 +193,7 @@ var CheckboxWithMode = /*#__PURE__*/(0, _react.forwardRef)(function Checkbox(pro
   }; // Use isChecked from the state if it is controlled
 
 
-  var 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
-
-  var styles = (0, _react.useMemo)(function () {
-    return (0, _internal.getCheckboxStyles)(mode);
-  }, [mode]);
+  var isChecked = isCheckedProp === undefined ? isCheckedState : isCheckedProp;
   return (0, _core.jsx)(_internal.Label, {
     isDisabled: isDisabled,
     testId: testId && "".concat(testId, "--checkbox-label"),
@@ -148,30 +206,18 @@ var CheckboxWithMode = /*#__PURE__*/(0, _react.forwardRef)(function Checkbox(pro
     value: value,
     name: name,
     required: isRequired,
-    css: styles,
+    css: checkboxStyles,
     onChange: onChangeAnalytics,
     "aria-checked": isIndeterminate ? 'mixed' : isChecked,
     "aria-invalid": isInvalid ? 'true' : undefined,
     "data-testid": testId && "".concat(testId, "--hidden-checkbox"),
     "data-invalid": isInvalid ? 'true' : undefined
-  })), (0, _core.jsx)(CheckboxIcon, {
+  })), (0, _core.jsx)(_internal.CheckboxIcon, {
     size: size,
     isIndeterminate: isIndeterminate,
     isChecked: isChecked
-  }), label && (0, _core.jsx)(_internal.LabelText, null, label, isRequired && (0, _core.jsx)(_internal.RequiredIndicator, {
-    "aria-hidden": "true"
-  })));
-});
-var Checkbox = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef)(function Checkbox(props, ref) {
-  return (0, _core.jsx)(_components.default.Consumer, null, function (_ref2) {
-    var mode = _ref2.mode;
-    return (0, _core.jsx)(CheckboxWithMode, (0, _extends2.default)({}, props, {
-      ref: ref,
-      mode: mode
-    }));
-  });
+  }), label && (0, _core.jsx)(_internal.LabelText, null, label, isRequired && (0, _core.jsx)(_internal.RequiredIndicator, null)));
 }));
-exports.Checkbox = Checkbox;
 Checkbox.displayName = 'Checkbox';
 var _default = Checkbox;
 exports.default = _default;

package/dist/cjs/index.js

@@ -1,25 +1,21 @@
 "use strict";
 
-var _typeof = require("@babel/runtime/helpers/typeof");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "default", {
+Object.defineProperty(exports, "Checkbox", {
   enumerable: true,
   get: function get() {
     return _checkbox.default;
   }
 });
-Object.defineProperty(exports, "Checkbox", {
+Object.defineProperty(exports, "default", {
   enumerable: true,
   get: function get() {
-    return _checkbox.Checkbox;
+    return _checkbox.default;
   }
 });
 
-var _checkbox = _interopRequireWildcard(require("./checkbox"));
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+var _checkbox = _interopRequireDefault(require("./checkbox"));

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

@@ -0,0 +1,73 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = require("react");
+
+var _core = require("@emotion/core");
+
+var _svg = _interopRequireDefault(require("@atlaskit/icon/svg"));
+
+/**  @jsx jsx */
+function getIcon(isIndeterminate, isChecked) {
+  if (isIndeterminate) {
+    return (0, _core.jsx)("rect", {
+      fill: "inherit",
+      x: "8",
+      y: "11",
+      width: "8",
+      height: "2",
+      rx: "1"
+    });
+  }
+
+  if (isChecked) {
+    return (0, _core.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
+ */
+
+
+var CheckboxIcon = /*#__PURE__*/(0, _react.memo)(function (_ref) {
+  var size = _ref.size,
+      isIndeterminate = _ref.isIndeterminate,
+      isChecked = _ref.isChecked;
+  var icon = (0, _react.useMemo)(function () {
+    return getIcon(isIndeterminate, isChecked);
+  }, [isIndeterminate, isChecked]);
+  return (0, _core.jsx)(_svg.default, {
+    label: "",
+    size: size,
+    primaryColor: "var(--checkbox-background-color)",
+    secondaryColor: "var(--checkbox-tick-color)"
+  }, (0, _core.jsx)("g", {
+    fillRule: "evenodd"
+  }, (0, _core.jsx)("rect", {
+    fill: "currentColor",
+    x: "6",
+    y: "6",
+    width: "12",
+    height: "12",
+    rx: "2"
+  }), icon));
+});
+var _default = CheckboxIcon;
+exports.default = _default;

package/dist/cjs/internal/constants.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.gridSize = exports.fontFamily = void 0;
+
+var _constants = require("@atlaskit/theme/constants");
+
+var fontFamily = (0, _constants.fontFamily)();
+exports.fontFamily = fontFamily;
+var gridSize = (0, _constants.gridSize)();
+exports.gridSize = gridSize;

package/dist/cjs/internal/index.js

@@ -5,10 +5,10 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "getCheckboxStyles", {
+Object.defineProperty(exports, "CheckboxIcon", {
   enumerable: true,
   get: function get() {
-    return _styles.default;
+    return _checkboxIcon.default;
   }
 });
 Object.defineProperty(exports, "Label", {
@@ -30,7 +30,7 @@ Object.defineProperty(exports, "RequiredIndicator", {
   }
 });
 
-var _styles = _interopRequireDefault(require("./styles"));
+var _checkboxIcon = _interopRequireDefault(require("./checkbox-icon"));
 
 var _label = _interopRequireDefault(require("./label"));
 

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

@@ -4,23 +4,20 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = LabelText;
-exports.labelTextCSS = void 0;
 
 var _core = require("@emotion/core");
 
-var _constants = require("@atlaskit/theme/constants");
+var _constants = require("./constants");
 
 /** @jsx jsx */
-var padding = (0, _constants.gridSize)() * 0.5;
-var labelTextCSS = {
-  paddingRight: padding,
-  paddingLeft: padding
-};
-exports.labelTextCSS = labelTextCSS;
+var labelTextStyles = (0, _core.css)({
+  paddingRight: 0.5 * _constants.gridSize,
+  paddingLeft: 0.5 * _constants.gridSize
+});
 
 function LabelText(_ref) {
   var children = _ref.children;
   return (0, _core.jsx)("span", {
-    css: labelTextCSS
+    css: labelTextStyles
   }, children);
 }

package/dist/cjs/internal/label.js

@@ -1,50 +1,112 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = Label;
-exports.labelCSS = void 0;
-
-var _react = require("react");
 
 var _core = require("@emotion/core");
 
 var _colors = require("@atlaskit/theme/colors");
 
-var _constants = require("@atlaskit/theme/constants");
+var _components = require("@atlaskit/theme/components");
+
+var _constants = require("./constants");
 
-var _tokens = require("@atlaskit/tokens");
+var _theme = _interopRequireDefault(require("./theme"));
 
 /** @jsx jsx */
-var fontFamily = (0, _constants.fontFamily)();
-
-var labelCSS = function labelCSS() {
-  return {
-    fontFamily: fontFamily,
-    alignItems: 'center',
-    display: 'flex',
-    color: (0, _tokens.token)('color.text.highEmphasis', _colors.N900),
-    cursor: 'default',
-    '&[data-disabled]': {
-      color: (0, _tokens.token)('color.text.disabled', _colors.N80),
-      cursor: 'not-allowed'
-    }
-  };
-};
+var labelStyles = (0, _core.css)({
+  display: 'flex',
+  alignItems: 'center',
+  color: "var(--ds-text, ".concat(_colors.N900, ")"),
+  cursor: 'default',
+  fontFamily: _constants.fontFamily
+});
+var disabledStyles = (0, _core.css)({
+  color: "var(--ds-text-disabled, ".concat(_colors.N80, ")"),
+  cursor: 'not-allowed'
+});
+var themeStyles = {
+  light: (0, _core.css)({
+    /**
+     * Background
+     */
+    '--local-background': _theme.default.light.boxColor.rest,
+    '--local-background-active': _theme.default.light.boxColor.active,
+    '--local-background-checked': _theme.default.light.boxColor.checked,
+    '--local-background-checked-hover': _theme.default.light.boxColor.hoveredAndChecked,
+    '--local-background-disabled': _theme.default.light.boxColor.disabled,
+    '--local-background-hover': _theme.default.light.boxColor.hovered,
 
-exports.labelCSS = labelCSS;
+    /**
+     * Border
+     */
+    '--local-border': _theme.default.light.borderColor.rest,
+    '--local-border-active': _theme.default.light.borderColor.active,
+    '--local-border-checked': _theme.default.light.borderColor.checked,
+    '--local-border-checked-hover': _theme.default.light.borderColor.hoveredAndChecked,
+    '--local-border-checked-invalid': _theme.default.light.borderColor.invalidAndChecked,
+    '--local-border-disabled': _theme.default.light.borderColor.disabled,
+    '--local-border-focus': _theme.default.light.borderColor.focused,
+    '--local-border-hover': _theme.default.light.borderColor.hovered,
+    '--local-border-invalid': _theme.default.light.borderColor.invalid,
+
+    /**
+     * Tick
+     */
+    '--local-tick-active': _theme.default.light.tickColor.activeAndChecked,
+    '--local-tick-checked': _theme.default.light.tickColor.checked,
+    '--local-tick-disabled': _theme.default.light.tickColor.disabledAndChecked,
+    '--local-tick-rest': 'transparent'
+  }),
+  dark: (0, _core.css)({
+    /**
+     * Background
+     */
+    '--local-background': _theme.default.dark.boxColor.rest,
+    '--local-background-active': _theme.default.dark.boxColor.active,
+    '--local-background-checked': _theme.default.dark.boxColor.checked,
+    '--local-background-checked-hover': _theme.default.dark.boxColor.hoveredAndChecked,
+    '--local-background-disabled': _theme.default.dark.boxColor.disabled,
+    '--local-background-hover': _theme.default.dark.boxColor.hovered,
+
+    /**
+     * Border
+     */
+    '--local-border': _theme.default.dark.borderColor.rest,
+    '--local-border-active': _theme.default.dark.borderColor.active,
+    '--local-border-checked': _theme.default.dark.borderColor.checked,
+    '--local-border-checked-hover': _theme.default.dark.borderColor.hoveredAndChecked,
+    '--local-border-checked-invalid': _theme.default.dark.borderColor.invalidAndChecked,
+    '--local-border-disabled': _theme.default.dark.borderColor.disabled,
+    '--local-border-focus': _theme.default.dark.borderColor.focused,
+    '--local-border-hover': _theme.default.dark.borderColor.hovered,
+    '--local-border-invalid': _theme.default.dark.borderColor.invalid,
+
+    /**
+     * Tick
+     */
+    '--local-tick-active': _theme.default.dark.tickColor.activeAndChecked,
+    '--local-tick-checked': _theme.default.dark.tickColor.checked,
+    '--local-tick-disabled': _theme.default.dark.tickColor.disabledAndChecked,
+    '--local-tick-rest': 'transparent'
+  })
+};
 
 function Label(_ref) {
   var children = _ref.children,
       isDisabled = _ref.isDisabled,
       testId = _ref.testId,
       onClick = _ref.onClick;
-  var styles = (0, _react.useMemo)(function () {
-    return labelCSS();
-  }, []);
+
+  var _useGlobalTheme = (0, _components.useGlobalTheme)(),
+      mode = _useGlobalTheme.mode;
+
   return (0, _core.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/cjs/internal/required-indicator.js

@@ -1,30 +1,25 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = RequiredIndicator;
 
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 var _core = require("@emotion/core");
 
 var _colors = require("@atlaskit/theme/colors");
 
-var _constants = require("@atlaskit/theme/constants");
-
-var _tokens = require("@atlaskit/tokens");
+var _constants = require("./constants");
 
 /** @jsx jsx */
-var paddingLeft = "".concat((0, _constants.gridSize)() * 0.25, "px");
+var requiredIndicatorStyles = (0, _core.css)({
+  paddingLeft: _constants.gridSize * 0.25,
+  color: "var(--ds-text-danger, ".concat(_colors.R500, ")")
+});
 
-function RequiredIndicator(props) {
-  return (0, _core.jsx)("span", (0, _extends2.default)({
-    css: {
-      color: (0, _tokens.token)('color.text.danger', _colors.R500),
-      paddingLeft: paddingLeft
-    }
-  }, props), "*");
+function RequiredIndicator() {
+  return (0, _core.jsx)("span", {
+    css: requiredIndicatorStyles,
+    "aria-hidden": true
+  }, "*");
 }