@atlaskit/checkbox 12.3.15 → 12.3.18

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @atlaskit/checkbox
 
+## 12.3.18
+
+### Patch Changes
+
+- [`fe575d49d66`](https://bitbucket.org/atlassian/atlassian-frontend/commits/fe575d49d66) - Updated styles to use new input design tokens
+- Updated dependencies
+
+## 12.3.17
+
+### Patch Changes
+
+- [`90e89e12034`](https://bitbucket.org/atlassian/atlassian-frontend/commits/90e89e12034) - [ux] Updated colors to use appropriate tokens
+
+## 12.3.16
+
+### Patch Changes
+
+- [`f55cf469372`](https://bitbucket.org/atlassian/atlassian-frontend/commits/f55cf469372) - Added id property to the checkbox label for compatibility with aria-labelledby
+
 ## 12.3.15
 
 ### Patch Changes

package/dist/cjs/checkbox.js

@@ -174,7 +174,7 @@ var Checkbox = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef
     analyticsData: analyticsContext,
     componentName: 'checkbox',
     packageName: "@atlaskit/checkbox",
-    packageVersion: "12.3.15"
+    packageVersion: "12.3.18"
   });
   var internalRef = (0, _react.useRef)(null);
   var mergedRefs = (0, _mergeRefs.default)([internalRef, ref]); // Use isChecked from the state if it is controlled
@@ -182,6 +182,7 @@ var Checkbox = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef
   var isChecked = isCheckedProp === undefined ? isCheckedState : isCheckedProp;
   return (0, _core.jsx)(_internal.Label, {
     isDisabled: isDisabled,
+    id: rest.id ? "".concat(rest.id, "-label") : undefined,
     testId: testId && "".concat(testId, "--checkbox-label")
   }, (0, _core.jsx)("input", (0, _extends2.default)({}, rest, {
     type: "checkbox",

package/dist/cjs/internal/label.js

@@ -103,15 +103,19 @@ function Label(_ref) {
   var children = _ref.children,
       isDisabled = _ref.isDisabled,
       testId = _ref.testId,
-      onClick = _ref.onClick;
+      onClick = _ref.onClick,
+      id = _ref.id;
 
   var _useGlobalTheme = (0, _components.useGlobalTheme)(),
       mode = _useGlobalTheme.mode;
 
-  return (0, _core.jsx)("label", {
-    css: [labelStyles, isDisabled && disabledStyles, mode === 'light' && themeStyles.light, mode === 'dark' && themeStyles.dark],
-    "data-testid": testId,
-    "data-disabled": isDisabled || undefined,
-    onClick: onClick
-  }, children);
+  return (// eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-noninteractive-element-interactions
+    (0, _core.jsx)("label", {
+      css: [labelStyles, isDisabled && disabledStyles, mode === 'light' && themeStyles.light, mode === 'dark' && themeStyles.dark],
+      "data-testid": testId,
+      "data-disabled": isDisabled || undefined,
+      onClick: onClick,
+      id: id
+    }, children)
+  );
 }

package/dist/cjs/internal/theme.js

@@ -10,54 +10,54 @@ var _colors = require("@atlaskit/theme/colors");
 var theme = {
   light: {
     borderColor: {
-      rest: "var(--ds-border, ".concat(_colors.N40, ")"),
-      hovered: "var(--ds-border, ".concat(_colors.N40, ")"),
+      rest: "var(--ds-border-input, ".concat(_colors.N40, ")"),
+      hovered: "var(--ds-border-input, ".concat(_colors.N40, ")"),
       disabled: "var(--ds-background-disabled, ".concat(_colors.N20, ")"),
-      checked: "var(--ds-background-brand-bold, ".concat(_colors.B400, ")"),
+      checked: "var(--ds-background-selected-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, ")")
+      hoveredAndChecked: "var(--ds-background-selected-bold-hovered, ".concat(_colors.B300, ")")
     },
     boxColor: {
       rest: "var(--ds-background-input, ".concat(_colors.N10, ")"),
-      hovered: "var(--ds-surface, ".concat(_colors.N30, ")"),
+      hovered: "var(--ds-background-input-hovered, ".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, ")")
+      hoveredAndChecked: "var(--ds-background-selected-bold-hovered, ".concat(_colors.B300, ")"),
+      checked: "var(--ds-background-selected-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, ")")
+      disabledAndChecked: "var(--ds-icon-disabled, ".concat(_colors.N70, ")"),
+      activeAndChecked: "var(--ds-icon-inverse, ".concat(_colors.B400, ")"),
+      checked: "var(--ds-icon-inverse, ".concat(_colors.N10, ")")
     }
   },
   dark: {
     borderColor: {
-      rest: "var(--ds-border, ".concat(_colors.DN80, ")"),
-      hovered: "var(--ds-border, ".concat(_colors.DN200, ")"),
+      rest: "var(--ds-border-input, ".concat(_colors.DN80, ")"),
+      hovered: "var(--ds-border-input, ".concat(_colors.DN200, ")"),
       disabled: "var(--ds-background-disabled, ".concat(_colors.DN10, ")"),
-      checked: "var(--ds-background-brand-bold, ".concat(_colors.B400, ")"),
+      checked: "var(--ds-background-selected-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, ")")
+      hoveredAndChecked: "var(--ds-background-selected-bold-hovered, ".concat(_colors.B75, ")")
     },
     boxColor: {
       rest: "var(--ds-background-input, ".concat(_colors.DN10, ")"),
-      hovered: "var(--ds-surface, ".concat(_colors.DN30, ")"),
+      hovered: "var(--ds-background-input-hovered, ".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, ")")
+      hoveredAndChecked: "var(--ds-background-selected-bold-hovered, ".concat(_colors.B75, ")"),
+      checked: "var(--ds-background-selected-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, ")")
+      disabledAndChecked: "var(--ds-icon-disabled, ".concat(_colors.DN90, ")"),
+      activeAndChecked: "var(--ds-icon-inverse, ".concat(_colors.DN10, ")"),
+      checked: "var(--ds-icon-inverse, ".concat(_colors.DN10, ")")
     }
   }
 };

package/dist/cjs/version.json

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

package/dist/es2019/checkbox.js

@@ -148,7 +148,7 @@ const Checkbox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function Checkbox(pr
     analyticsData: analyticsContext,
     componentName: 'checkbox',
     packageName: "@atlaskit/checkbox",
-    packageVersion: "12.3.15"
+    packageVersion: "12.3.18"
   });
   const internalRef = useRef(null);
   const mergedRefs = mergeRefs([internalRef, ref]); // Use isChecked from the state if it is controlled
@@ -156,6 +156,7 @@ const Checkbox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function Checkbox(pr
   const isChecked = isCheckedProp === undefined ? isCheckedState : isCheckedProp;
   return jsx(Label, {
     isDisabled: isDisabled,
+    id: rest.id ? `${rest.id}-label` : undefined,
     testId: testId && `${testId}--checkbox-label`
   }, jsx("input", _extends({}, rest, {
     type: "checkbox",

package/dist/es2019/internal/label.js

@@ -88,15 +88,19 @@ export default function Label({
   children,
   isDisabled,
   testId,
-  onClick
+  onClick,
+  id
 }) {
   const {
     mode
   } = useGlobalTheme();
-  return jsx("label", {
-    css: [labelStyles, isDisabled && disabledStyles, mode === 'light' && themeStyles.light, mode === 'dark' && themeStyles.dark],
-    "data-testid": testId,
-    "data-disabled": isDisabled || undefined,
-    onClick: onClick
-  }, children);
+  return (// eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-noninteractive-element-interactions
+    jsx("label", {
+      css: [labelStyles, isDisabled && disabledStyles, mode === 'light' && themeStyles.light, mode === 'dark' && themeStyles.dark],
+      "data-testid": testId,
+      "data-disabled": isDisabled || undefined,
+      onClick: onClick,
+      id: id
+    }, children)
+  );
 }

package/dist/es2019/internal/theme.js

@@ -2,54 +2,54 @@ import { B100, B200, B300, B400, B50, B75, DN10, DN200, DN30, DN80, DN90, N10, N
 const theme = {
   light: {
     borderColor: {
-      rest: `var(--ds-border, ${N40})`,
-      hovered: `var(--ds-border, ${N40})`,
+      rest: `var(--ds-border-input, ${N40})`,
+      hovered: `var(--ds-border-input, ${N40})`,
       disabled: `var(--ds-background-disabled, ${N20})`,
-      checked: `var(--ds-background-brand-bold, ${B400})`,
+      checked: `var(--ds-background-selected-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})`
+      hoveredAndChecked: `var(--ds-background-selected-bold-hovered, ${B300})`
     },
     boxColor: {
       rest: `var(--ds-background-input, ${N10})`,
-      hovered: `var(--ds-surface, ${N30})`,
+      hovered: `var(--ds-background-input-hovered, ${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})`
+      hoveredAndChecked: `var(--ds-background-selected-bold-hovered, ${B300})`,
+      checked: `var(--ds-background-selected-bold, ${B400})`
     },
     tickColor: {
-      disabledAndChecked: `var(--ds-text-disabled, ${N70})`,
-      activeAndChecked: `var(--ds-text-inverse, ${B400})`,
-      checked: `var(--ds-text-inverse, ${N10})`
+      disabledAndChecked: `var(--ds-icon-disabled, ${N70})`,
+      activeAndChecked: `var(--ds-icon-inverse, ${B400})`,
+      checked: `var(--ds-icon-inverse, ${N10})`
     }
   },
   dark: {
     borderColor: {
-      rest: `var(--ds-border, ${DN80})`,
-      hovered: `var(--ds-border, ${DN200})`,
+      rest: `var(--ds-border-input, ${DN80})`,
+      hovered: `var(--ds-border-input, ${DN200})`,
       disabled: `var(--ds-background-disabled, ${DN10})`,
-      checked: `var(--ds-background-brand-bold, ${B400})`,
+      checked: `var(--ds-background-selected-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})`
+      hoveredAndChecked: `var(--ds-background-selected-bold-hovered, ${B75})`
     },
     boxColor: {
       rest: `var(--ds-background-input, ${DN10})`,
-      hovered: `var(--ds-surface, ${DN30})`,
+      hovered: `var(--ds-background-input-hovered, ${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})`
+      hoveredAndChecked: `var(--ds-background-selected-bold-hovered, ${B75})`,
+      checked: `var(--ds-background-selected-bold, ${B400})`
     },
     tickColor: {
-      disabledAndChecked: `var(--ds-text-disabled, ${DN90})`,
-      activeAndChecked: `var(--ds-text-inverse, ${DN10})`,
-      checked: `var(--ds-text-inverse, ${DN10})`
+      disabledAndChecked: `var(--ds-icon-disabled, ${DN90})`,
+      activeAndChecked: `var(--ds-icon-inverse, ${DN10})`,
+      checked: `var(--ds-icon-inverse, ${DN10})`
     }
   }
 };

package/dist/es2019/version.json

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

package/dist/esm/checkbox.js

@@ -159,7 +159,7 @@ var Checkbox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function Checkbox(prop
     analyticsData: analyticsContext,
     componentName: 'checkbox',
     packageName: "@atlaskit/checkbox",
-    packageVersion: "12.3.15"
+    packageVersion: "12.3.18"
   });
   var internalRef = useRef(null);
   var mergedRefs = mergeRefs([internalRef, ref]); // Use isChecked from the state if it is controlled
@@ -167,6 +167,7 @@ var Checkbox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function Checkbox(prop
   var isChecked = isCheckedProp === undefined ? isCheckedState : isCheckedProp;
   return jsx(Label, {
     isDisabled: isDisabled,
+    id: rest.id ? "".concat(rest.id, "-label") : undefined,
     testId: testId && "".concat(testId, "--checkbox-label")
   }, jsx("input", _extends({}, rest, {
     type: "checkbox",

package/dist/esm/internal/label.js

@@ -88,15 +88,19 @@ export default function Label(_ref) {
   var children = _ref.children,
       isDisabled = _ref.isDisabled,
       testId = _ref.testId,
-      onClick = _ref.onClick;
+      onClick = _ref.onClick,
+      id = _ref.id;
 
   var _useGlobalTheme = useGlobalTheme(),
       mode = _useGlobalTheme.mode;
 
-  return jsx("label", {
-    css: [labelStyles, isDisabled && disabledStyles, mode === 'light' && themeStyles.light, mode === 'dark' && themeStyles.dark],
-    "data-testid": testId,
-    "data-disabled": isDisabled || undefined,
-    onClick: onClick
-  }, children);
+  return (// eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-noninteractive-element-interactions
+    jsx("label", {
+      css: [labelStyles, isDisabled && disabledStyles, mode === 'light' && themeStyles.light, mode === 'dark' && themeStyles.dark],
+      "data-testid": testId,
+      "data-disabled": isDisabled || undefined,
+      onClick: onClick,
+      id: id
+    }, children)
+  );
 }

package/dist/esm/internal/theme.js

@@ -2,54 +2,54 @@ import { B100, B200, B300, B400, B50, B75, DN10, DN200, DN30, DN80, DN90, N10, N
 var theme = {
   light: {
     borderColor: {
-      rest: "var(--ds-border, ".concat(N40, ")"),
-      hovered: "var(--ds-border, ".concat(N40, ")"),
+      rest: "var(--ds-border-input, ".concat(N40, ")"),
+      hovered: "var(--ds-border-input, ".concat(N40, ")"),
       disabled: "var(--ds-background-disabled, ".concat(N20, ")"),
-      checked: "var(--ds-background-brand-bold, ".concat(B400, ")"),
+      checked: "var(--ds-background-selected-bold, ".concat(B400, ")"),
       active: "var(--ds-border, ".concat(B50, ")"),
       invalid: "var(--ds-border-danger, ".concat(R300, ")"),
       invalidAndChecked: "var(--ds-border-danger, ".concat(R300, ")"),
       focused: "var(--ds-border-focused, ".concat(B100, ")"),
-      hoveredAndChecked: "var(--ds-background-brand-bold-hovered, ".concat(B300, ")")
+      hoveredAndChecked: "var(--ds-background-selected-bold-hovered, ".concat(B300, ")")
     },
     boxColor: {
       rest: "var(--ds-background-input, ".concat(N10, ")"),
-      hovered: "var(--ds-surface, ".concat(N30, ")"),
+      hovered: "var(--ds-background-input-hovered, ".concat(N30, ")"),
       disabled: "var(--ds-background-disabled, ".concat(N20, ")"),
       active: "var(--ds-background-input-pressed, ".concat(B50, ")"),
-      hoveredAndChecked: "var(--ds-background-brand-bold-hovered, ".concat(B300, ")"),
-      checked: "var(--ds-background-brand-bold, ".concat(B400, ")")
+      hoveredAndChecked: "var(--ds-background-selected-bold-hovered, ".concat(B300, ")"),
+      checked: "var(--ds-background-selected-bold, ".concat(B400, ")")
     },
     tickColor: {
-      disabledAndChecked: "var(--ds-text-disabled, ".concat(N70, ")"),
-      activeAndChecked: "var(--ds-text-inverse, ".concat(B400, ")"),
-      checked: "var(--ds-text-inverse, ".concat(N10, ")")
+      disabledAndChecked: "var(--ds-icon-disabled, ".concat(N70, ")"),
+      activeAndChecked: "var(--ds-icon-inverse, ".concat(B400, ")"),
+      checked: "var(--ds-icon-inverse, ".concat(N10, ")")
     }
   },
   dark: {
     borderColor: {
-      rest: "var(--ds-border, ".concat(DN80, ")"),
-      hovered: "var(--ds-border, ".concat(DN200, ")"),
+      rest: "var(--ds-border-input, ".concat(DN80, ")"),
+      hovered: "var(--ds-border-input, ".concat(DN200, ")"),
       disabled: "var(--ds-background-disabled, ".concat(DN10, ")"),
-      checked: "var(--ds-background-brand-bold, ".concat(B400, ")"),
+      checked: "var(--ds-background-selected-bold, ".concat(B400, ")"),
       active: "var(--ds-border, ".concat(B200, ")"),
       invalid: "var(--ds-border-danger, ".concat(R300, ")"),
       invalidAndChecked: "var(--ds-border-danger, ".concat(R300, ")"),
       focused: "var(--ds-border-focused, ".concat(B75, ")"),
-      hoveredAndChecked: "var(--ds-background-brand-bold-hovered, ".concat(B75, ")")
+      hoveredAndChecked: "var(--ds-background-selected-bold-hovered, ".concat(B75, ")")
     },
     boxColor: {
       rest: "var(--ds-background-input, ".concat(DN10, ")"),
-      hovered: "var(--ds-surface, ".concat(DN30, ")"),
+      hovered: "var(--ds-background-input-hovered, ".concat(DN30, ")"),
       disabled: "var(--ds-background-disabled, ".concat(DN10, ")"),
       active: "var(--ds-background-input-pressed, ".concat(B200, ")"),
-      hoveredAndChecked: "var(--ds-background-brand-bold-hovered, ".concat(B75, ")"),
-      checked: "var(--ds-background-brand-bold, ".concat(B400, ")")
+      hoveredAndChecked: "var(--ds-background-selected-bold-hovered, ".concat(B75, ")"),
+      checked: "var(--ds-background-selected-bold, ".concat(B400, ")")
     },
     tickColor: {
-      disabledAndChecked: "var(--ds-text-disabled, ".concat(DN90, ")"),
-      activeAndChecked: "var(--ds-text-inverse, ".concat(DN10, ")"),
-      checked: "var(--ds-text-inverse, ".concat(DN10, ")")
+      disabledAndChecked: "var(--ds-icon-disabled, ".concat(DN90, ")"),
+      activeAndChecked: "var(--ds-icon-inverse, ".concat(DN10, ")"),
+      checked: "var(--ds-icon-inverse, ".concat(DN10, ")")
     }
   }
 };

package/dist/esm/version.json

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

package/dist/types/internal/label.d.ts

@@ -1,3 +1,3 @@
 /// <reference types="react" />
 import { LabelProps } from '../types';
-export default function Label({ children, isDisabled, testId, onClick, }: LabelProps): JSX.Element;
+export default function Label({ children, isDisabled, testId, onClick, id, }: LabelProps): JSX.Element;

package/dist/types/internal/theme.d.ts

@@ -1,54 +1,54 @@
 declare const theme: {
     light: {
         borderColor: {
-            rest: "var(--ds-border)";
-            hovered: "var(--ds-border)";
+            rest: "var(--ds-border-input)";
+            hovered: "var(--ds-border-input)";
             disabled: "var(--ds-background-disabled)";
-            checked: "var(--ds-background-brand-bold)";
+            checked: "var(--ds-background-selected-bold)";
             active: "var(--ds-border)";
             invalid: "var(--ds-border-danger)";
             invalidAndChecked: "var(--ds-border-danger)";
             focused: "var(--ds-border-focused)";
-            hoveredAndChecked: "var(--ds-background-brand-bold-hovered)";
+            hoveredAndChecked: "var(--ds-background-selected-bold-hovered)";
         };
         boxColor: {
             rest: "var(--ds-background-input)";
-            hovered: "var(--ds-surface)";
+            hovered: "var(--ds-background-input-hovered)";
             disabled: "var(--ds-background-disabled)";
             active: "var(--ds-background-input-pressed)";
-            hoveredAndChecked: "var(--ds-background-brand-bold-hovered)";
-            checked: "var(--ds-background-brand-bold)";
+            hoveredAndChecked: "var(--ds-background-selected-bold-hovered)";
+            checked: "var(--ds-background-selected-bold)";
         };
         tickColor: {
-            disabledAndChecked: "var(--ds-text-disabled)";
-            activeAndChecked: "var(--ds-text-inverse)";
-            checked: "var(--ds-text-inverse)";
+            disabledAndChecked: "var(--ds-icon-disabled)";
+            activeAndChecked: "var(--ds-icon-inverse)";
+            checked: "var(--ds-icon-inverse)";
         };
     };
     dark: {
         borderColor: {
-            rest: "var(--ds-border)";
-            hovered: "var(--ds-border)";
+            rest: "var(--ds-border-input)";
+            hovered: "var(--ds-border-input)";
             disabled: "var(--ds-background-disabled)";
-            checked: "var(--ds-background-brand-bold)";
+            checked: "var(--ds-background-selected-bold)";
             active: "var(--ds-border)";
             invalid: "var(--ds-border-danger)";
             invalidAndChecked: "var(--ds-border-danger)";
             focused: "var(--ds-border-focused)";
-            hoveredAndChecked: "var(--ds-background-brand-bold-hovered)";
+            hoveredAndChecked: "var(--ds-background-selected-bold-hovered)";
         };
         boxColor: {
             rest: "var(--ds-background-input)";
-            hovered: "var(--ds-surface)";
+            hovered: "var(--ds-background-input-hovered)";
             disabled: "var(--ds-background-disabled)";
             active: "var(--ds-background-input-pressed)";
-            hoveredAndChecked: "var(--ds-background-brand-bold-hovered)";
-            checked: "var(--ds-background-brand-bold)";
+            hoveredAndChecked: "var(--ds-background-selected-bold-hovered)";
+            checked: "var(--ds-background-selected-bold)";
         };
         tickColor: {
-            disabledAndChecked: "var(--ds-text-disabled)";
-            activeAndChecked: "var(--ds-text-inverse)";
-            checked: "var(--ds-text-inverse)";
+            disabledAndChecked: "var(--ds-icon-disabled)";
+            activeAndChecked: "var(--ds-icon-inverse)";
+            checked: "var(--ds-icon-inverse)";
         };
     };
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/checkbox",
-  "version": "12.3.15",
+  "version": "12.3.18",
   "description": "A checkbox is an input control that allows a user to select one or more options from a number of choices.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -27,7 +27,7 @@
   },
   "dependencies": {
     "@atlaskit/analytics-next": "^8.2.0",
-    "@atlaskit/ds-lib": "^2.0.0",
+    "@atlaskit/ds-lib": "^2.1.0",
     "@atlaskit/icon": "^21.10.0",
     "@atlaskit/theme": "^12.1.0",
     "@atlaskit/tokens": "^0.10.0",

package/report.api.md

@@ -0,0 +1,136 @@
+## API Report File for "@atlaskit/checkbox"
+
+> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
+
+```ts
+/// <reference types="react" />
+
+import { ForwardRefExoticComponent } from 'react';
+import { InputHTMLAttributes } from 'react';
+import { MemoExoticComponent } from 'react';
+import { default as React_2 } from 'react';
+import { RefAttributes } from 'react';
+import type UIAnalyticsEvent from '@atlaskit/analytics-next/UIAnalyticsEvent';
+
+/**
+ * __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)
+ */
+declare const Checkbox: MemoExoticComponent<ForwardRefExoticComponent<
+  Omit<
+    Omit<
+      InputHTMLAttributes<HTMLInputElement>,
+      'disabled' | 'required' | 'checked' | 'css'
+    >,
+    keyof OwnProps
+  > &
+    OwnProps &
+    RefAttributes<HTMLInputElement>
+>>;
+export { Checkbox };
+export default Checkbox;
+
+export declare type CheckboxProps = Combine<
+  Omit<
+    React_2.InputHTMLAttributes<HTMLInputElement>,
+    /**
+     * 'disabled', 'required', and 'checked' are omitted so that
+     * consumers must handle state using our props.
+     *
+     * 'css' is added globally to element attributes by emotion.
+     * This was causing a bug, making the css prop required in
+     * some cases. We explicitly omit it to avoid that.
+     *
+     * Because 'className' (which the css prop uses internally)
+     * is still available, this should not break existing usage.
+     */
+    'disabled' | 'required' | 'checked' | 'css'
+  >,
+  OwnProps
+>;
+
+declare type Combine<First, Second> = Omit<First, keyof Second> & Second;
+
+/**
+ *
+ *
+ * CHECKBOX PROPTYPES
+ *
+ *
+ */
+declare type OwnProps = {
+  /**
+   * Sets whether the checkbox begins checked.
+   */
+  defaultChecked?: boolean;
+  /**
+   * id assigned to input
+   */
+  id?: string;
+  /**
+   * Sets whether the checkbox is checked or unchecked.
+   */
+  isChecked?: boolean;
+  /**
+   * Sets whether the checkbox is disabled.
+   */
+  isDisabled?: boolean;
+  /**
+   * Sets whether the checkbox is indeterminate. This only affects the
+   * style and does not modify the isChecked property.
+   */
+  isIndeterminate?: boolean;
+  /**
+   * Marks the field as invalid. Changes style of unchecked component.
+   */
+  isInvalid?: boolean;
+  /**
+   * Marks the field as required & changes the label style.
+   */
+  isRequired?: boolean;
+  /**
+   * The label to be displayed to the right of the checkbox. The label is part
+   * of the clickable element to select the checkbox.
+   */
+  label?: React_2.ReactChild;
+  /**
+   * The name of the submitted field in a checkbox.
+   */
+  name?: string;
+  /**
+   * Function that is called whenever the state of the checkbox changes. It will
+   * be called with an object containing the react synthetic event. Use currentTarget to get value, name and checked
+   */
+  onChange?: (
+    e: React_2.ChangeEvent<HTMLInputElement>,
+    analyticsEvent: UIAnalyticsEvent,
+  ) => void;
+  /**
+   * The value to be used in the checkbox input. This is the value that will be returned on form submission.
+   */
+  value?: number | string;
+  /**
+   * The size of the Checkbox
+   */
+  size?: Size;
+  /**
+   * A `testId` prop is provided for specified elements, which is a unique string that appears as a data attribute `data-testid` in the rendered code, serving as a hook for automated tests
+   * we have generated testid based on the one you pass to the Checkbox component:
+   * - `{testId}--hidden-checkbox` to check if it got changed to checked/unchecked.
+   */
+  testId?: string;
+  /**
+   * Additional information to be included in the `context` of analytics events that come from radio
+   */
+  analyticsContext?: Record<string, any>;
+};
+
+declare type Size = 'small' | 'medium' | 'large' | 'xlarge';
+
+export {};
+```