@atlaskit/checkbox 12.6.11 → 13.0.0

package/CHANGELOG.md

@@ -1,82 +1,88 @@
 # @atlaskit/checkbox
 
+## 13.0.0
+
+### Major Changes
+
+- [#41760](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/41760) [`909e4a30fe7`](https://bitbucket.org/atlassian/atlassian-frontend/commits/909e4a30fe7) - Removed all remaining legacy theming logic from the Blanket, Breadcrumbs and Checkbox components.
+
 ## 12.6.11
 
 ### Patch Changes
 
-- [`b580abfbc29`](https://bitbucket.org/atlassian/atlassian-frontend/commits/b580abfbc29) - Remove onClick from checkbox label
+- [#38875](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/38875) [`b580abfbc29`](https://bitbucket.org/atlassian/atlassian-frontend/commits/b580abfbc29) - Remove onClick from checkbox label
 
 ## 12.6.10
 
 ### Patch Changes
 
-- [`9af31f3c1ae`](https://bitbucket.org/atlassian/atlassian-frontend/commits/9af31f3c1ae) - Delete version.json
+- [#38731](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/38731) [`9af31f3c1ae`](https://bitbucket.org/atlassian/atlassian-frontend/commits/9af31f3c1ae) - Delete version.json
 
 ## 12.6.9
 
 ### Patch Changes
 
-- [`356d6ebed05`](https://bitbucket.org/atlassian/atlassian-frontend/commits/356d6ebed05) - This package is now onboarded onto the product push model.
+- [#38201](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/38201) [`356d6ebed05`](https://bitbucket.org/atlassian/atlassian-frontend/commits/356d6ebed05) - This package is now onboarded onto the product push model.
 
 ## 12.6.8
 
 ### Patch Changes
 
-- [`ba0a43d8ccc`](https://bitbucket.org/atlassian/atlassian-frontend/commits/ba0a43d8ccc) - [ux] update focused color fallback to meet contrast requirement
+- [#37615](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/37615) [`ba0a43d8ccc`](https://bitbucket.org/atlassian/atlassian-frontend/commits/ba0a43d8ccc) - [ux] update focused color fallback to meet contrast requirement
 
 ## 12.6.7
 
 ### Patch Changes
 
-- [`9cc3b8d1902`](https://bitbucket.org/atlassian/atlassian-frontend/commits/9cc3b8d1902) - chore(checkbox): use new feature flag for border contrast
+- [#37452](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/37452) [`9cc3b8d1902`](https://bitbucket.org/atlassian/atlassian-frontend/commits/9cc3b8d1902) - chore(checkbox): use new feature flag for border contrast
 
 ## 12.6.6
 
 ### Patch Changes
 
-- [`4ae083a7e66`](https://bitbucket.org/atlassian/atlassian-frontend/commits/4ae083a7e66) - Use `@af/accessibility-testing` for default jest-axe config and jest-axe import in accessibility testing.
+- [#36754](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/36754) [`4ae083a7e66`](https://bitbucket.org/atlassian/atlassian-frontend/commits/4ae083a7e66) - Use `@af/accessibility-testing` for default jest-axe config and jest-axe import in accessibility testing.
 
 ## 12.6.5
 
 ### Patch Changes
 
-- [`3958636a718`](https://bitbucket.org/atlassian/atlassian-frontend/commits/3958636a718) - update border width with border spacing token
+- [#36666](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/36666) [`3958636a718`](https://bitbucket.org/atlassian/atlassian-frontend/commits/3958636a718) - update border width with border spacing token
 
 ## 12.6.4
 
 ### Patch Changes
 
-- [`8f436f0c301`](https://bitbucket.org/atlassian/atlassian-frontend/commits/8f436f0c301) - extend border contrast feature flag to support confluence
+- [#35111](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/35111) [`8f436f0c301`](https://bitbucket.org/atlassian/atlassian-frontend/commits/8f436f0c301) - extend border contrast feature flag to support confluence
 
 ## 12.6.3
 
 ### Patch Changes
 
-- [`49b08bfdf5f`](https://bitbucket.org/atlassian/atlassian-frontend/commits/49b08bfdf5f) - Migrated use of `gridSize` to space tokens where possible. There is no expected visual or behaviour change.
+- [#34051](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/34051) [`49b08bfdf5f`](https://bitbucket.org/atlassian/atlassian-frontend/commits/49b08bfdf5f) - Migrated use of `gridSize` to space tokens where possible. There is no expected visual or behaviour change.
 
 ## 12.6.2
 
 ### Patch Changes
 
-- [`9d00501a414`](https://bitbucket.org/atlassian/atlassian-frontend/commits/9d00501a414) - Ensure legacy types are published for TS 4.5-4.8
+- [#33793](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/33793) [`9d00501a414`](https://bitbucket.org/atlassian/atlassian-frontend/commits/9d00501a414) - Ensure legacy types are published for TS 4.5-4.8
 
 ## 12.6.1
 
 ### Patch Changes
 
-- [`41fae2c6f68`](https://bitbucket.org/atlassian/atlassian-frontend/commits/41fae2c6f68) - Upgrade Typescript from `4.5.5` to `4.9.5`
+- [#33649](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/33649) [`41fae2c6f68`](https://bitbucket.org/atlassian/atlassian-frontend/commits/41fae2c6f68) - Upgrade Typescript from `4.5.5` to `4.9.5`
 
 ## 12.6.0
 
 ### Minor Changes
 
-- [`8d0fd2d3f6c`](https://bitbucket.org/atlassian/atlassian-frontend/commits/8d0fd2d3f6c) - [ux] reduce stroke width from 2px to 1px with new color to meet contrast requirement
+- [#33335](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/33335) [`8d0fd2d3f6c`](https://bitbucket.org/atlassian/atlassian-frontend/commits/8d0fd2d3f6c) - [ux] reduce stroke width from 2px to 1px with new color to meet contrast requirement
 
 ## 12.5.0
 
 ### Minor Changes
 
-- [`56507598609`](https://bitbucket.org/atlassian/atlassian-frontend/commits/56507598609) - Skip minor dependency bump
+- [#33258](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/33258) [`56507598609`](https://bitbucket.org/atlassian/atlassian-frontend/commits/56507598609) - Skip minor dependency bump
 
 ### Patch Changes
 
@@ -110,7 +116,7 @@
 
 ### Patch Changes
 
-- [`ed1b0fd2c2d`](https://bitbucket.org/atlassian/atlassian-frontend/commits/ed1b0fd2c2d) - [ux] Removes redundant whitespace from checkbox when no visual label is applied - eg when an aria-label or id is used instead.
+- [#27738](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/27738) [`ed1b0fd2c2d`](https://bitbucket.org/atlassian/atlassian-frontend/commits/ed1b0fd2c2d) - [ux] Removes redundant whitespace from checkbox when no visual label is applied - eg when an aria-label or id is used instead.
 
 ## 12.4.1
 
@@ -122,7 +128,7 @@
 
 ### Minor Changes
 
-- [`0944c0e7eed`](https://bitbucket.org/atlassian/atlassian-frontend/commits/0944c0e7eed) - Updates `@emotion/core` to `@emotion/react`; v10 to v11. There is no expected behavior change.
+- [#24710](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/24710) [`0944c0e7eed`](https://bitbucket.org/atlassian/atlassian-frontend/commits/0944c0e7eed) - Updates `@emotion/core` to `@emotion/react`; v10 to v11. There is no expected behavior change.
 
 ### Patch Changes
 
@@ -132,32 +138,32 @@
 
 ### Patch Changes
 
-- [`8cc2f888c83`](https://bitbucket.org/atlassian/atlassian-frontend/commits/8cc2f888c83) - Upgrade Typescript from `4.3.5` to `4.5.5`
+- [#24874](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/24874) [`8cc2f888c83`](https://bitbucket.org/atlassian/atlassian-frontend/commits/8cc2f888c83) - Upgrade Typescript from `4.3.5` to `4.5.5`
 
 ## 12.3.19
 
 ### Patch Changes
 
-- [`8d4228767b0`](https://bitbucket.org/atlassian/atlassian-frontend/commits/8d4228767b0) - Upgrade Typescript from `4.2.4` to `4.3.5`.
+- [#24492](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/24492) [`8d4228767b0`](https://bitbucket.org/atlassian/atlassian-frontend/commits/8d4228767b0) - Upgrade Typescript from `4.2.4` to `4.3.5`.
 
 ## 12.3.18
 
 ### Patch Changes
 
-- [`fe575d49d66`](https://bitbucket.org/atlassian/atlassian-frontend/commits/fe575d49d66) - Updated styles to use new input design tokens
+- [#23381](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/23381) [`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
+- [#23299](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/23299) [`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
+- [#23179](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/23179) [`f55cf469372`](https://bitbucket.org/atlassian/atlassian-frontend/commits/f55cf469372) - Added id property to the checkbox label for compatibility with aria-labelledby
 
 ## 12.3.15
 
@@ -169,7 +175,7 @@
 
 ### Patch Changes
 
-- [`ff75f6c3189`](https://bitbucket.org/atlassian/atlassian-frontend/commits/ff75f6c3189) - [ux] Checkbox now uses grid layout in order to position the hidden checkbox over the area where the icon is. This improves the virtual cursor for screen readers while also meaning that modifier keys used when clicking the checkbox work."
+- [#22130](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/22130) [`ff75f6c3189`](https://bitbucket.org/atlassian/atlassian-frontend/commits/ff75f6c3189) - [ux] Checkbox now uses grid layout in order to position the hidden checkbox over the area where the icon is. This improves the virtual cursor for screen readers while also meaning that modifier keys used when clicking the checkbox work."
 
 ## 12.3.13
 
@@ -181,7 +187,7 @@
 
 ### Patch Changes
 
-- [`cb2392f6d33`](https://bitbucket.org/atlassian/atlassian-frontend/commits/cb2392f6d33) - Upgrade to TypeScript 4.2.4
+- [#20650](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/20650) [`cb2392f6d33`](https://bitbucket.org/atlassian/atlassian-frontend/commits/cb2392f6d33) - Upgrade to TypeScript 4.2.4
 
 ## 12.3.11
 
@@ -205,14 +211,14 @@
 
 ### Patch Changes
 
-- [`5d27b03c5cf`](https://bitbucket.org/atlassian/atlassian-frontend/commits/5d27b03c5cf) - Styles have been rewritten in preparation for migration to compiled.
+- [#18526](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/18526) [`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
+- [#16752](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/16752) [`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
@@ -225,7 +231,7 @@
 
 ### 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.
+- [#15998](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/15998) [`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
@@ -250,14 +256,14 @@
 
 ### Patch Changes
 
-- [`6e2231d4609`](https://bitbucket.org/atlassian/atlassian-frontend/commits/6e2231d4609) - Checkbox no longer creates an empty `<span/>` element next to the input if no label is provided.
+- [#13864](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/13864) [`6e2231d4609`](https://bitbucket.org/atlassian/atlassian-frontend/commits/6e2231d4609) - Checkbox no longer creates an empty `<span/>` element next to the input if no label is provided.
 - Updated dependencies
 
 ## 12.3.0
 
 ### Minor Changes
 
-- [`fe79d66ea34`](https://bitbucket.org/atlassian/atlassian-frontend/commits/fe79d66ea34) - Instruments checkbox with the new tokens api. This will continue to work alongside the existing theming implementation. No visual changes
+- [#13302](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/13302) [`fe79d66ea34`](https://bitbucket.org/atlassian/atlassian-frontend/commits/fe79d66ea34) - Instruments checkbox with the new tokens api. This will continue to work alongside the existing theming implementation. No visual changes
 
 ### Patch Changes
 
@@ -269,20 +275,20 @@
 
 ### Patch Changes
 
-- [`18c128f6b73`](https://bitbucket.org/atlassian/atlassian-frontend/commits/18c128f6b73) - [ux] Fix bug in which modified click events (e.g. Ctrl+Click) would not get passed down to the underlying input element in Firefox.
+- [#12837](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/12837) [`18c128f6b73`](https://bitbucket.org/atlassian/atlassian-frontend/commits/18c128f6b73) - [ux] Fix bug in which modified click events (e.g. Ctrl+Click) would not get passed down to the underlying input element in Firefox.
 - Updated dependencies
 
 ## 12.2.1
 
 ### Patch Changes
 
-- [`378d1cef00f`](https://bitbucket.org/atlassian/atlassian-frontend/commits/378d1cef00f) - Bump `@atlaskit/theme` to version `^11.3.0`.
+- [#12880](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/12880) [`378d1cef00f`](https://bitbucket.org/atlassian/atlassian-frontend/commits/378d1cef00f) - Bump `@atlaskit/theme` to version `^11.3.0`.
 
 ## 12.2.0
 
 ### Minor Changes
 
-- [`987e2fc4ddd`](https://bitbucket.org/atlassian/atlassian-frontend/commits/987e2fc4ddd) - Add configuration to eslint rule label-has-associated-control
+- [#12328](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/12328) [`987e2fc4ddd`](https://bitbucket.org/atlassian/atlassian-frontend/commits/987e2fc4ddd) - Add configuration to eslint rule label-has-associated-control
 
 ### Patch Changes
 
@@ -293,46 +299,47 @@
 
 ### Patch Changes
 
-- [`d6f7ff383cf`](https://bitbucket.org/atlassian/atlassian-frontend/commits/d6f7ff383cf) - Updates to development dependency `storybook-addon-performance`
+- [#12167](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/12167) [`d6f7ff383cf`](https://bitbucket.org/atlassian/atlassian-frontend/commits/d6f7ff383cf) - Updates to development dependency `storybook-addon-performance`
 
 ## 12.1.2
 
 ### Patch Changes
 
-- [`37324ccc750`](https://bitbucket.org/atlassian/atlassian-frontend/commits/37324ccc750) - Fix styling error causing rendering errors in iOS Safari, and focus rings in Firefox
+- [#11584](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/11584) [`37324ccc750`](https://bitbucket.org/atlassian/atlassian-frontend/commits/37324ccc750) - Fix styling error causing rendering errors in iOS Safari, and focus rings in Firefox
 
 ## 12.1.1
 
 ### Patch Changes
 
-- [`a99925b1634`](https://bitbucket.org/atlassian/atlassian-frontend/commits/a99925b1634) - Added styles for edge high contrast modes (black on white and white on black)
+- [#10230](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/10230) [`a99925b1634`](https://bitbucket.org/atlassian/atlassian-frontend/commits/a99925b1634) - Added styles for edge high contrast modes (black on white and white on black)
 - Updated dependencies
 
 ## 12.1.0
 
 ### Minor Changes
 
-- [`02a0cdbd98b`](https://bitbucket.org/atlassian/atlassian-frontend/commits/02a0cdbd98b) - Added aria-invalid to checkbox input which corresponds the isInvalid prop
+- [#9510](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/9510) [`02a0cdbd98b`](https://bitbucket.org/atlassian/atlassian-frontend/commits/02a0cdbd98b) - Added aria-invalid to checkbox input which corresponds the isInvalid prop
 
 ## 12.0.2
 
 ### Patch Changes
 
-- [`e0278312c57`](https://bitbucket.org/atlassian/atlassian-frontend/commits/e0278312c57) - Checkbox now uses the new `SVG` component from @atlaskit/icon.
+- [#9083](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/9083) [`e0278312c57`](https://bitbucket.org/atlassian/atlassian-frontend/commits/e0278312c57) - Checkbox now uses the new `SVG` component from @atlaskit/icon.
 - Updated dependencies
 
 ## 12.0.1
 
 ### Patch Changes
 
-- [`79c23df6340`](https://bitbucket.org/atlassian/atlassian-frontend/commits/79c23df6340) - Use injected package name and version for analytics instead of version.json.
+- [#8644](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/8644) [`79c23df6340`](https://bitbucket.org/atlassian/atlassian-frontend/commits/79c23df6340) - Use injected package name and version for analytics instead of version.json.
 - [`08c1f789a45`](https://bitbucket.org/atlassian/atlassian-frontend/commits/08c1f789a45) - [ux] Fixes flickering when transitioning to and from indeterminate states
 
 ## 12.0.0
 
 ### Major Changes
 
-In this version, we made `Checkbox` dramatically faster and more lightweight 😍
+- [#6571](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/6571) [`ee02ee0aaa`](https://bitbucket.org/atlassian/atlassian-frontend/commits/ee02ee0aaa)
+  In this version, we made `Checkbox` dramatically faster and more lightweight 😍
 
 ### Changes
 
@@ -447,13 +454,13 @@ npx @atlaskit/codemod-cli /path/to/target/directory --parser [tsx | flow | babel
 
 ### Patch Changes
 
-- [`d3265f19be`](https://bitbucket.org/atlassian/atlassian-frontend/commits/d3265f19be) - Transpile packages using babel rather than tsc
+- [#5857](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/5857) [`d3265f19be`](https://bitbucket.org/atlassian/atlassian-frontend/commits/d3265f19be) - Transpile packages using babel rather than tsc
 
 ## 11.0.7
 
 ### Patch Changes
 
-- [`5f58283e1f`](https://bitbucket.org/atlassian/atlassian-frontend/commits/5f58283e1f) - Export types using Typescript's new "export type" syntax to satisfy Typescript's --isolatedModules compiler option.
+- [#5497](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/5497) [`5f58283e1f`](https://bitbucket.org/atlassian/atlassian-frontend/commits/5f58283e1f) - Export types using Typescript's new "export type" syntax to satisfy Typescript's --isolatedModules compiler option.
   This requires version 3.8 of Typescript, read more about how we handle Typescript versions here: https://atlaskit.atlassian.com/get-started
   Also add `typescript` to `devDependencies` to denote version that the package was built with.
 
@@ -467,13 +474,13 @@ npx @atlaskit/codemod-cli /path/to/target/directory --parser [tsx | flow | babel
 
 ### Patch Changes
 
-- [`6360c46009`](https://bitbucket.org/atlassian/atlassian-frontend/commits/6360c46009) - Reenable integration tests for Edge browser
+- [#4707](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/4707) [`6360c46009`](https://bitbucket.org/atlassian/atlassian-frontend/commits/6360c46009) - Reenable integration tests for Edge browser
 
 ## 11.0.4
 
 ### Patch Changes
 
-- [`6c525a8229`](https://bitbucket.org/atlassian/atlassian-frontend/commits/6c525a8229) - Upgraded to TypeScript 3.9.6 and tslib to 2.0.0
+- [#3885](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/3885) [`6c525a8229`](https://bitbucket.org/atlassian/atlassian-frontend/commits/6c525a8229) - Upgraded to TypeScript 3.9.6 and tslib to 2.0.0
 
   Since tslib is a dependency for all our packages we recommend that products also follow this tslib upgrade
   to prevent duplicates of tslib being bundled.
@@ -482,26 +489,26 @@ npx @atlaskit/codemod-cli /path/to/target/directory --parser [tsx | flow | babel
 
 ### Patch Changes
 
-- [`6262f382de`](https://bitbucket.org/atlassian/atlassian-frontend/commits/6262f382de) - Use the 'lodash' package instead of single-function 'lodash.\*' packages
+- [#3823](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/3823) [`6262f382de`](https://bitbucket.org/atlassian/atlassian-frontend/commits/6262f382de) - Use the 'lodash' package instead of single-function 'lodash.\*' packages
 - [`e99262c6f0`](https://bitbucket.org/atlassian/atlassian-frontend/commits/e99262c6f0) - All form elements now have a default font explicitly set
 
 ## 11.0.2
 
 ### Patch Changes
 
-- [`954cc87b62`](https://bitbucket.org/atlassian/atlassian-frontend/commits/954cc87b62) - The readme and package information has been updated to point to the new design system website.
+- [#3293](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/3293) [`954cc87b62`](https://bitbucket.org/atlassian/atlassian-frontend/commits/954cc87b62) - The readme and package information has been updated to point to the new design system website.
 
 ## 11.0.1
 
 ### Patch Changes
 
-- [`db053b24d8`](https://bitbucket.org/atlassian/atlassian-frontend/commits/db053b24d8) - Update all the theme imports to be tree-shakable
+- [#3428](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/3428) [`db053b24d8`](https://bitbucket.org/atlassian/atlassian-frontend/commits/db053b24d8) - Update all the theme imports to be tree-shakable
 
 ## 11.0.0
 
 ### Major Changes
 
-- [`87f4720f27`](https://bitbucket.org/atlassian/atlassian-frontend/commits/87f4720f27) - Officially dropping IE11 support, from this version onwards there are no warranties of the package working in IE11.
+- [#3335](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/3335) [`87f4720f27`](https://bitbucket.org/atlassian/atlassian-frontend/commits/87f4720f27) - Officially dropping IE11 support, from this version onwards there are no warranties of the package working in IE11.
   For more information see: https://community.developer.atlassian.com/t/atlaskit-to-drop-support-for-internet-explorer-11-from-1st-july-2020/39534
 
 ### Patch Changes
@@ -512,13 +519,13 @@ npx @atlaskit/codemod-cli /path/to/target/directory --parser [tsx | flow | babel
 
 ### Patch Changes
 
-- [`54a9514fcf`](https://bitbucket.org/atlassian/atlassian-frontend/commits/54a9514fcf) - Build and supporting files will no longer be published to npm
+- [#2866](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/2866) [`54a9514fcf`](https://bitbucket.org/atlassian/atlassian-frontend/commits/54a9514fcf) - Build and supporting files will no longer be published to npm
 
 ## 10.1.13
 
 ### Patch Changes
 
-- [`54d82b49f0`](https://bitbucket.org/atlassian/atlassian-frontend/commits/54d82b49f0) - Remove unused dependencies
+- [#2137](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/2137) [`54d82b49f0`](https://bitbucket.org/atlassian/atlassian-frontend/commits/54d82b49f0) - Remove unused dependencies
 
 ## 10.1.12
 

package/codemods/utils.tsx

@@ -5,8 +5,10 @@ import core, {
   ImportDeclaration,
   ImportDefaultSpecifier,
   ImportSpecifier,
+  JSXAttribute,
   Options,
   Program,
+  VariableDeclaration,
 } from 'jscodeshift';
 import { Collection } from 'jscodeshift/src/Collection';
 
@@ -40,7 +42,7 @@ export function getJSXAttributesByName(
   j: core.JSCodeshift,
   element: ASTPath<any>,
   attributeName: string,
-) {
+): Collection<JSXAttribute> {
   return j(element)
     .find(j.JSXOpeningElement)
     .find(j.JSXAttribute)
@@ -98,7 +100,7 @@ export function hasVariableAssignment(
   j: core.JSCodeshift,
   source: ReturnType<typeof j>,
   identifierName: string,
-) {
+): Collection<VariableDeclaration> | boolean {
   const occurance = source.find(j.VariableDeclaration).filter((path) => {
     return !!j(path.node)
       .find(j.VariableDeclarator)
@@ -241,20 +243,22 @@ export const createRenameFuncFor =
 
     let variable = hasVariableAssignment(j, source, specifier);
     if (variable) {
-      variable.find(j.VariableDeclarator).forEach((declarator) => {
-        j(declarator)
-          .find(j.Identifier)
-          .filter((identifier) => identifier.name === 'id')
-          .forEach((ids) => {
-            findIdentifierAndReplaceAttribute(
-              j,
-              source,
-              ids.node.name,
-              from,
-              to,
-            );
-          });
-      });
+      (variable as Collection<VariableDeclaration>)
+        .find(j.VariableDeclarator)
+        .forEach((declarator) => {
+          j(declarator)
+            .find(j.Identifier)
+            .filter((identifier) => identifier.name === 'id')
+            .forEach((ids) => {
+              findIdentifierAndReplaceAttribute(
+                j,
+                source,
+                ids.node.name,
+                from,
+                to,
+              );
+            });
+        });
     }
   };
 

package/dist/cjs/checkbox.js

@@ -161,7 +161,7 @@ var Checkbox = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef
     analyticsData: analyticsContext,
     componentName: 'checkbox',
     packageName: "@atlaskit/checkbox",
-    packageVersion: "12.6.11"
+    packageVersion: "13.0.0"
   });
   var internalRef = (0, _react.useRef)(null);
   var mergedRefs = (0, _mergeRefs.default)([internalRef, ref]);
@@ -194,5 +194,4 @@ var Checkbox = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef
   }), label && (0, _react2.jsx)(_internal.LabelText, null, label, isRequired && (0, _react2.jsx)(_internal.RequiredIndicator, null)));
 }));
 Checkbox.displayName = 'Checkbox';
-var _default = Checkbox;
-exports.default = _default;
+var _default = exports.default = Checkbox;

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

@@ -63,5 +63,4 @@ var CheckboxIcon = /*#__PURE__*/(0, _react.memo)(function (_ref) {
     rx: "2"
   }), icon));
 });
-var _default = CheckboxIcon;
-exports.default = _default;
+var _default = exports.default = CheckboxIcon;

package/dist/cjs/internal/constants.js

@@ -5,5 +5,4 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.fontFamily = void 0;
 var _constants = require("@atlaskit/theme/constants");
-var fontFamily = (0, _constants.fontFamily)();
-exports.fontFamily = fontFamily;
+var fontFamily = exports.fontFamily = (0, _constants.fontFamily)();

package/dist/cjs/internal/label.js

@@ -1,18 +1,16 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = Label;
 var _react = require("@emotion/react");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _colors = require("@atlaskit/theme/colors");
-var _components = require("@atlaskit/theme/components");
 var _constants = require("./constants");
-var _theme = _interopRequireDefault(require("./theme"));
 /** @jsx jsx */
 
-var labelStyles = (0, _react.css)({
+var baseStyles = (0, _react.css)({
   display: 'grid',
   gridAutoColumns: '1fr',
   gridAutoRows: 'min-content',
@@ -28,78 +26,44 @@ var disabledStyles = (0, _react.css)({
   color: "var(--ds-text-disabled, ".concat(_colors.N80, ")"),
   cursor: 'not-allowed'
 });
-var themeStyles = {
-  light: (0, _react.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,
-    /**
-     * 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, _react.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'
-  })
-};
+var labelStyles = (0, _react.css)({
+  /**
+   * Background
+   */
+  '--local-background': "var(--ds-background-input, ".concat(_colors.N10, ")"),
+  '--local-background-active': "var(--ds-background-input-pressed, ".concat(_colors.B50, ")"),
+  '--local-background-checked': "var(--ds-background-selected-bold, ".concat(_colors.B400, ")"),
+  '--local-background-checked-hover': "var(--ds-background-selected-bold-hovered, ".concat(_colors.B300, ")"),
+  '--local-background-disabled': "var(--ds-background-disabled, ".concat(_colors.N20, ")"),
+  '--local-background-hover': "var(--ds-background-input-hovered, ".concat(_colors.N30, ")"),
+  /**
+   * Border
+   */
+  '--local-border': (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.update-border-radio-checkbox_7askv') ? "var(--ds-border-bold, ".concat(_colors.N100, ")") : "var(--ds-border-input, ".concat(_colors.N40, ")"),
+  '--local-border-active': "var(--ds-border, ".concat(_colors.B50, ")"),
+  '--local-border-checked': "var(--ds-background-selected-bold, ".concat(_colors.B400, ")"),
+  '--local-border-checked-hover': "var(--ds-background-selected-bold-hovered, ".concat(_colors.B300, ")"),
+  '--local-border-checked-invalid': "var(--ds-border-danger, ".concat(_colors.R300, ")"),
+  '--local-border-disabled': "var(--ds-background-disabled, ".concat(_colors.N20, ")"),
+  '--local-border-focus': "var(--ds-border-focused, ".concat(_colors.B200, ")"),
+  '--local-border-hover': (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.update-border-radio-checkbox_7askv') ? "var(--ds-border-bold, ".concat(_colors.N100, ")") : "var(--ds-border-input, ".concat(_colors.N40, ")"),
+  '--local-border-invalid': "var(--ds-border-danger, ".concat(_colors.R300, ")"),
+  /**
+   * Tick
+   */
+  '--local-tick-active': "var(--ds-icon-inverse, ".concat(_colors.B400, ")"),
+  '--local-tick-checked': "var(--ds-icon-inverse, ".concat(_colors.N10, ")"),
+  '--local-tick-disabled': "var(--ds-icon-disabled, ".concat(_colors.N70, ")"),
+  '--local-tick-rest': 'transparent'
+});
 function Label(_ref) {
   var children = _ref.children,
     isDisabled = _ref.isDisabled,
     testId = _ref.testId,
     label = _ref.label,
     id = _ref.id;
-  var _useGlobalTheme = (0, _components.useGlobalTheme)(),
-    mode = _useGlobalTheme.mode;
   return (0, _react.jsx)("label", {
-    css: [labelStyles, label && textLabelLayoutStyles, isDisabled && disabledStyles, mode === 'light' && themeStyles.light, mode === 'dark' && themeStyles.dark],
+    css: [baseStyles, label && textLabelLayoutStyles, isDisabled && disabledStyles, labelStyles],
     "data-testid": testId,
     "data-disabled": isDisabled || undefined,
     id: id

package/dist/es2019/checkbox.js

@@ -145,7 +145,7 @@ const Checkbox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function Checkbox(pr
     analyticsData: analyticsContext,
     componentName: 'checkbox',
     packageName: "@atlaskit/checkbox",
-    packageVersion: "12.6.11"
+    packageVersion: "13.0.0"
   });
   const internalRef = useRef(null);
   const mergedRefs = mergeRefs([internalRef, ref]);

package/dist/es2019/internal/label.js

@@ -1,10 +1,9 @@
 /** @jsx jsx */
 import { css, jsx } from '@emotion/react';
-import { N80, N900 } from '@atlaskit/theme/colors';
-import { useGlobalTheme } from '@atlaskit/theme/components';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+import { B200, B300, B400, B50, N10, N100, N20, N30, N40, N70, N80, N900, R300 } from '@atlaskit/theme/colors';
 import { fontFamily } from './constants';
-import theme from './theme';
-const labelStyles = css({
+const baseStyles = css({
   display: 'grid',
   gridAutoColumns: '1fr',
   gridAutoRows: 'min-content',
@@ -20,68 +19,36 @@ 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'
-  })
-};
+const labelStyles = css({
+  /**
+   * Background
+   */
+  '--local-background': `var(--ds-background-input, ${N10})`,
+  '--local-background-active': `var(--ds-background-input-pressed, ${B50})`,
+  '--local-background-checked': `var(--ds-background-selected-bold, ${B400})`,
+  '--local-background-checked-hover': `var(--ds-background-selected-bold-hovered, ${B300})`,
+  '--local-background-disabled': `var(--ds-background-disabled, ${N20})`,
+  '--local-background-hover': `var(--ds-background-input-hovered, ${N30})`,
+  /**
+   * Border
+   */
+  '--local-border': getBooleanFF('platform.design-system-team.update-border-radio-checkbox_7askv') ? `var(--ds-border-bold, ${N100})` : `var(--ds-border-input, ${N40})`,
+  '--local-border-active': `var(--ds-border, ${B50})`,
+  '--local-border-checked': `var(--ds-background-selected-bold, ${B400})`,
+  '--local-border-checked-hover': `var(--ds-background-selected-bold-hovered, ${B300})`,
+  '--local-border-checked-invalid': `var(--ds-border-danger, ${R300})`,
+  '--local-border-disabled': `var(--ds-background-disabled, ${N20})`,
+  '--local-border-focus': `var(--ds-border-focused, ${B200})`,
+  '--local-border-hover': getBooleanFF('platform.design-system-team.update-border-radio-checkbox_7askv') ? `var(--ds-border-bold, ${N100})` : `var(--ds-border-input, ${N40})`,
+  '--local-border-invalid': `var(--ds-border-danger, ${R300})`,
+  /**
+   * Tick
+   */
+  '--local-tick-active': `var(--ds-icon-inverse, ${B400})`,
+  '--local-tick-checked': `var(--ds-icon-inverse, ${N10})`,
+  '--local-tick-disabled': `var(--ds-icon-disabled, ${N70})`,
+  '--local-tick-rest': 'transparent'
+});
 export default function Label({
   children,
   isDisabled,
@@ -89,11 +56,8 @@ export default function Label({
   label,
   id
 }) {
-  const {
-    mode
-  } = useGlobalTheme();
   return jsx("label", {
-    css: [labelStyles, label && textLabelLayoutStyles, isDisabled && disabledStyles, mode === 'light' && themeStyles.light, mode === 'dark' && themeStyles.dark],
+    css: [baseStyles, label && textLabelLayoutStyles, isDisabled && disabledStyles, labelStyles],
     "data-testid": testId,
     "data-disabled": isDisabled || undefined,
     id: id

package/dist/esm/checkbox.js

@@ -154,7 +154,7 @@ var Checkbox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function Checkbox(prop
     analyticsData: analyticsContext,
     componentName: 'checkbox',
     packageName: "@atlaskit/checkbox",
-    packageVersion: "12.6.11"
+    packageVersion: "13.0.0"
   });
   var internalRef = useRef(null);
   var mergedRefs = mergeRefs([internalRef, ref]);

package/dist/esm/internal/label.js

@@ -1,10 +1,9 @@
 /** @jsx jsx */
 import { css, jsx } from '@emotion/react';
-import { N80, N900 } from '@atlaskit/theme/colors';
-import { useGlobalTheme } from '@atlaskit/theme/components';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+import { B200, B300, B400, B50, N10, N100, N20, N30, N40, N70, N80, N900, R300 } from '@atlaskit/theme/colors';
 import { fontFamily } from './constants';
-import theme from './theme';
-var labelStyles = css({
+var baseStyles = css({
   display: 'grid',
   gridAutoColumns: '1fr',
   gridAutoRows: 'min-content',
@@ -20,78 +19,44 @@ var disabledStyles = css({
   color: "var(--ds-text-disabled, ".concat(N80, ")"),
   cursor: 'not-allowed'
 });
-var 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'
-  })
-};
+var labelStyles = css({
+  /**
+   * Background
+   */
+  '--local-background': "var(--ds-background-input, ".concat(N10, ")"),
+  '--local-background-active': "var(--ds-background-input-pressed, ".concat(B50, ")"),
+  '--local-background-checked': "var(--ds-background-selected-bold, ".concat(B400, ")"),
+  '--local-background-checked-hover': "var(--ds-background-selected-bold-hovered, ".concat(B300, ")"),
+  '--local-background-disabled': "var(--ds-background-disabled, ".concat(N20, ")"),
+  '--local-background-hover': "var(--ds-background-input-hovered, ".concat(N30, ")"),
+  /**
+   * Border
+   */
+  '--local-border': getBooleanFF('platform.design-system-team.update-border-radio-checkbox_7askv') ? "var(--ds-border-bold, ".concat(N100, ")") : "var(--ds-border-input, ".concat(N40, ")"),
+  '--local-border-active': "var(--ds-border, ".concat(B50, ")"),
+  '--local-border-checked': "var(--ds-background-selected-bold, ".concat(B400, ")"),
+  '--local-border-checked-hover': "var(--ds-background-selected-bold-hovered, ".concat(B300, ")"),
+  '--local-border-checked-invalid': "var(--ds-border-danger, ".concat(R300, ")"),
+  '--local-border-disabled': "var(--ds-background-disabled, ".concat(N20, ")"),
+  '--local-border-focus': "var(--ds-border-focused, ".concat(B200, ")"),
+  '--local-border-hover': getBooleanFF('platform.design-system-team.update-border-radio-checkbox_7askv') ? "var(--ds-border-bold, ".concat(N100, ")") : "var(--ds-border-input, ".concat(N40, ")"),
+  '--local-border-invalid': "var(--ds-border-danger, ".concat(R300, ")"),
+  /**
+   * Tick
+   */
+  '--local-tick-active': "var(--ds-icon-inverse, ".concat(B400, ")"),
+  '--local-tick-checked': "var(--ds-icon-inverse, ".concat(N10, ")"),
+  '--local-tick-disabled': "var(--ds-icon-disabled, ".concat(N70, ")"),
+  '--local-tick-rest': 'transparent'
+});
 export default function Label(_ref) {
   var children = _ref.children,
     isDisabled = _ref.isDisabled,
     testId = _ref.testId,
     label = _ref.label,
     id = _ref.id;
-  var _useGlobalTheme = useGlobalTheme(),
-    mode = _useGlobalTheme.mode;
   return jsx("label", {
-    css: [labelStyles, label && textLabelLayoutStyles, isDisabled && disabledStyles, mode === 'light' && themeStyles.light, mode === 'dark' && themeStyles.dark],
+    css: [baseStyles, label && textLabelLayoutStyles, isDisabled && disabledStyles, labelStyles],
     "data-testid": testId,
     "data-disabled": isDisabled || undefined,
     id: id

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/checkbox",
-  "version": "12.6.11",
+  "version": "13.0.0",
   "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/"
@@ -41,8 +41,8 @@
     "@atlaskit/ds-lib": "^2.2.0",
     "@atlaskit/icon": "^21.12.0",
     "@atlaskit/platform-feature-flags": "^0.2.0",
-    "@atlaskit/theme": "^12.5.0",
-    "@atlaskit/tokens": "^1.17.0",
+    "@atlaskit/theme": "^12.6.0",
+    "@atlaskit/tokens": "^1.28.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1"
   },
@@ -51,6 +51,7 @@
   },
   "devDependencies": {
     "@af/accessibility-testing": "*",
+    "@af/visual-regression": "*",
     "@atlaskit/ssr": "*",
     "@atlaskit/visual-regression": "*",
     "@atlaskit/webdriver-runner": "*",

package/dist/cjs/internal/theme.js

@@ -1,64 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
-var _colors = require("@atlaskit/theme/colors");
-var theme = {
-  light: {
-    borderColor: {
-      rest: (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.update-border-radio-checkbox_7askv') ? "var(--ds-border-bold, ".concat(_colors.N100, ")") : "var(--ds-border-input, ".concat(_colors.N40, ")"),
-      hovered: (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.update-border-radio-checkbox_7askv') ? "var(--ds-border-bold, ".concat(_colors.N100, ")") : "var(--ds-border-input, ".concat(_colors.N40, ")"),
-      disabled: "var(--ds-background-disabled, ".concat(_colors.N20, ")"),
-      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.B200, ")"),
-      hoveredAndChecked: "var(--ds-background-selected-bold-hovered, ".concat(_colors.B300, ")")
-    },
-    boxColor: {
-      rest: "var(--ds-background-input, ".concat(_colors.N10, ")"),
-      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-selected-bold-hovered, ".concat(_colors.B300, ")"),
-      checked: "var(--ds-background-selected-bold, ".concat(_colors.B400, ")")
-    },
-    tickColor: {
-      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: (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.update-border-radio-checkbox_7askv') ? "var(--ds-border-bold, ".concat(_colors.DN200, ")") : "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-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-selected-bold-hovered, ".concat(_colors.B75, ")")
-    },
-    boxColor: {
-      rest: "var(--ds-background-input, ".concat(_colors.DN10, ")"),
-      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-selected-bold-hovered, ".concat(_colors.B75, ")"),
-      checked: "var(--ds-background-selected-bold, ".concat(_colors.B400, ")")
-    },
-    tickColor: {
-      disabledAndChecked: "var(--ds-icon-disabled, ".concat(_colors.DN90, ")"),
-      activeAndChecked: "var(--ds-icon-inverse, ".concat(_colors.DN10, ")"),
-      checked: "var(--ds-icon-inverse, ".concat(_colors.DN10, ")")
-    }
-  }
-};
-var _default = theme;
-exports.default = _default;

package/dist/es2019/internal/theme.js

@@ -1,57 +0,0 @@
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
-import { B200, B300, B400, B50, B75, DN10, DN200, DN30, DN80, DN90, N10, N100, N20, N30, N40, N70, R300 } from '@atlaskit/theme/colors';
-const theme = {
-  light: {
-    borderColor: {
-      rest: getBooleanFF('platform.design-system-team.update-border-radio-checkbox_7askv') ? `var(--ds-border-bold, ${N100})` : `var(--ds-border-input, ${N40})`,
-      hovered: getBooleanFF('platform.design-system-team.update-border-radio-checkbox_7askv') ? `var(--ds-border-bold, ${N100})` : `var(--ds-border-input, ${N40})`,
-      disabled: `var(--ds-background-disabled, ${N20})`,
-      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, ${B200})`,
-      hoveredAndChecked: `var(--ds-background-selected-bold-hovered, ${B300})`
-    },
-    boxColor: {
-      rest: `var(--ds-background-input, ${N10})`,
-      hovered: `var(--ds-background-input-hovered, ${N30})`,
-      disabled: `var(--ds-background-disabled, ${N20})`,
-      active: `var(--ds-background-input-pressed, ${B50})`,
-      hoveredAndChecked: `var(--ds-background-selected-bold-hovered, ${B300})`,
-      checked: `var(--ds-background-selected-bold, ${B400})`
-    },
-    tickColor: {
-      disabledAndChecked: `var(--ds-icon-disabled, ${N70})`,
-      activeAndChecked: `var(--ds-icon-inverse, ${B400})`,
-      checked: `var(--ds-icon-inverse, ${N10})`
-    }
-  },
-  dark: {
-    borderColor: {
-      rest: getBooleanFF('platform.design-system-team.update-border-radio-checkbox_7askv') ? `var(--ds-border-bold, ${DN200})` : `var(--ds-border-input, ${DN80})`,
-      hovered: `var(--ds-border-input, ${DN200})`,
-      disabled: `var(--ds-background-disabled, ${DN10})`,
-      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-selected-bold-hovered, ${B75})`
-    },
-    boxColor: {
-      rest: `var(--ds-background-input, ${DN10})`,
-      hovered: `var(--ds-background-input-hovered, ${DN30})`,
-      disabled: `var(--ds-background-disabled, ${DN10})`,
-      active: `var(--ds-background-input-pressed, ${B200})`,
-      hoveredAndChecked: `var(--ds-background-selected-bold-hovered, ${B75})`,
-      checked: `var(--ds-background-selected-bold, ${B400})`
-    },
-    tickColor: {
-      disabledAndChecked: `var(--ds-icon-disabled, ${DN90})`,
-      activeAndChecked: `var(--ds-icon-inverse, ${DN10})`,
-      checked: `var(--ds-icon-inverse, ${DN10})`
-    }
-  }
-};
-export default theme;

package/dist/esm/internal/theme.js

@@ -1,57 +0,0 @@
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
-import { B200, B300, B400, B50, B75, DN10, DN200, DN30, DN80, DN90, N10, N100, N20, N30, N40, N70, R300 } from '@atlaskit/theme/colors';
-var theme = {
-  light: {
-    borderColor: {
-      rest: getBooleanFF('platform.design-system-team.update-border-radio-checkbox_7askv') ? "var(--ds-border-bold, ".concat(N100, ")") : "var(--ds-border-input, ".concat(N40, ")"),
-      hovered: getBooleanFF('platform.design-system-team.update-border-radio-checkbox_7askv') ? "var(--ds-border-bold, ".concat(N100, ")") : "var(--ds-border-input, ".concat(N40, ")"),
-      disabled: "var(--ds-background-disabled, ".concat(N20, ")"),
-      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(B200, ")"),
-      hoveredAndChecked: "var(--ds-background-selected-bold-hovered, ".concat(B300, ")")
-    },
-    boxColor: {
-      rest: "var(--ds-background-input, ".concat(N10, ")"),
-      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-selected-bold-hovered, ".concat(B300, ")"),
-      checked: "var(--ds-background-selected-bold, ".concat(B400, ")")
-    },
-    tickColor: {
-      disabledAndChecked: "var(--ds-icon-disabled, ".concat(N70, ")"),
-      activeAndChecked: "var(--ds-icon-inverse, ".concat(B400, ")"),
-      checked: "var(--ds-icon-inverse, ".concat(N10, ")")
-    }
-  },
-  dark: {
-    borderColor: {
-      rest: getBooleanFF('platform.design-system-team.update-border-radio-checkbox_7askv') ? "var(--ds-border-bold, ".concat(DN200, ")") : "var(--ds-border-input, ".concat(DN80, ")"),
-      hovered: "var(--ds-border-input, ".concat(DN200, ")"),
-      disabled: "var(--ds-background-disabled, ".concat(DN10, ")"),
-      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-selected-bold-hovered, ".concat(B75, ")")
-    },
-    boxColor: {
-      rest: "var(--ds-background-input, ".concat(DN10, ")"),
-      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-selected-bold-hovered, ".concat(B75, ")"),
-      checked: "var(--ds-background-selected-bold, ".concat(B400, ")")
-    },
-    tickColor: {
-      disabledAndChecked: "var(--ds-icon-disabled, ".concat(DN90, ")"),
-      activeAndChecked: "var(--ds-icon-inverse, ".concat(DN10, ")"),
-      checked: "var(--ds-icon-inverse, ".concat(DN10, ")")
-    }
-  }
-};
-export default theme;

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

@@ -1,55 +0,0 @@
-declare const theme: {
-    light: {
-        borderColor: {
-            rest: "var(--ds-border-bold)" | "var(--ds-border-input)";
-            hovered: "var(--ds-border-bold)" | "var(--ds-border-input)";
-            disabled: "var(--ds-background-disabled)";
-            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-selected-bold-hovered)";
-        };
-        boxColor: {
-            rest: "var(--ds-background-input)";
-            hovered: "var(--ds-background-input-hovered)";
-            disabled: "var(--ds-background-disabled)";
-            active: "var(--ds-background-input-pressed)";
-            hoveredAndChecked: "var(--ds-background-selected-bold-hovered)";
-            checked: "var(--ds-background-selected-bold)";
-        };
-        tickColor: {
-            disabledAndChecked: "var(--ds-icon-disabled)";
-            activeAndChecked: "var(--ds-icon-inverse)";
-            checked: "var(--ds-icon-inverse)";
-        };
-    };
-    dark: {
-        borderColor: {
-            rest: "var(--ds-border-bold)" | "var(--ds-border-input)";
-            hovered: "var(--ds-border-input)";
-            disabled: "var(--ds-background-disabled)";
-            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-selected-bold-hovered)";
-        };
-        boxColor: {
-            rest: "var(--ds-background-input)";
-            hovered: "var(--ds-background-input-hovered)";
-            disabled: "var(--ds-background-disabled)";
-            active: "var(--ds-background-input-pressed)";
-            hoveredAndChecked: "var(--ds-background-selected-bold-hovered)";
-            checked: "var(--ds-background-selected-bold)";
-        };
-        tickColor: {
-            disabledAndChecked: "var(--ds-icon-disabled)";
-            activeAndChecked: "var(--ds-icon-inverse)";
-            checked: "var(--ds-icon-inverse)";
-        };
-    };
-};
-export default theme;

package/dist/types-ts4.5/internal/theme.d.ts

@@ -1,55 +0,0 @@
-declare const theme: {
-    light: {
-        borderColor: {
-            rest: "var(--ds-border-bold)" | "var(--ds-border-input)";
-            hovered: "var(--ds-border-bold)" | "var(--ds-border-input)";
-            disabled: "var(--ds-background-disabled)";
-            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-selected-bold-hovered)";
-        };
-        boxColor: {
-            rest: "var(--ds-background-input)";
-            hovered: "var(--ds-background-input-hovered)";
-            disabled: "var(--ds-background-disabled)";
-            active: "var(--ds-background-input-pressed)";
-            hoveredAndChecked: "var(--ds-background-selected-bold-hovered)";
-            checked: "var(--ds-background-selected-bold)";
-        };
-        tickColor: {
-            disabledAndChecked: "var(--ds-icon-disabled)";
-            activeAndChecked: "var(--ds-icon-inverse)";
-            checked: "var(--ds-icon-inverse)";
-        };
-    };
-    dark: {
-        borderColor: {
-            rest: "var(--ds-border-bold)" | "var(--ds-border-input)";
-            hovered: "var(--ds-border-input)";
-            disabled: "var(--ds-background-disabled)";
-            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-selected-bold-hovered)";
-        };
-        boxColor: {
-            rest: "var(--ds-background-input)";
-            hovered: "var(--ds-background-input-hovered)";
-            disabled: "var(--ds-background-disabled)";
-            active: "var(--ds-background-input-pressed)";
-            hoveredAndChecked: "var(--ds-background-selected-bold-hovered)";
-            checked: "var(--ds-background-selected-bold)";
-        };
-        tickColor: {
-            disabledAndChecked: "var(--ds-icon-disabled)";
-            activeAndChecked: "var(--ds-icon-inverse)";
-            checked: "var(--ds-icon-inverse)";
-        };
-    };
-};
-export default theme;