@atlaskit/heading 2.2.0 → 2.3.1

package/CHANGELOG.md

@@ -1,28 +1,50 @@
 # @atlaskit/heading
 
+## 2.3.1
+
+### Patch Changes
+
+- Updated dependencies
+
+## 2.3.0
+
+### Minor Changes
+
+- [#97580](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/97580)
+  [`3e6f291ec2d5`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/3e6f291ec2d5) -
+  Color prop to take color tokens when using heading with size prop.
+
 ## 2.2.0
 
 ### Minor Changes
 
-- [#91625](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/91625) [`d7770083ff25`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/d7770083ff25) - Add support for React 18.
+- [#91625](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/91625)
+  [`d7770083ff25`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/d7770083ff25) -
+  Add support for React 18.
 
 ## 2.1.2
 
 ### Patch Changes
 
-- [#83130](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/83130) [`4efd62cdc533`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/4efd62cdc533) - SHPLVIII-481: Assign name to default export components to fix quick-fix imports
+- [#83130](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/83130)
+  [`4efd62cdc533`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/4efd62cdc533) -
+  SHPLVIII-481: Assign name to default export components to fix quick-fix imports
 
 ## 2.1.1
 
 ### Patch Changes
 
-- [#83116](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/83116) [`8d4e99057fe0`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/8d4e99057fe0) - Upgrade Typescript from `4.9.5` to `5.4.2`
+- [#83116](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/83116)
+  [`8d4e99057fe0`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/8d4e99057fe0) -
+  Upgrade Typescript from `4.9.5` to `5.4.2`
 
 ## 2.1.0
 
 ### Minor Changes
 
-- [#78900](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/78900) [`2e05dc3106e3`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/2e05dc3106e3) - Run codegen for Heading font family changes.
+- [#78900](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/78900)
+  [`2e05dc3106e3`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/2e05dc3106e3) -
+  Run codegen for Heading font family changes.
 
 ### Patch Changes
 
@@ -32,38 +54,50 @@
 
 ### Patch Changes
 
-- [#80571](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/80571) [`c193ae1d1163`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/c193ae1d1163) - Fix heading typography styles to for apple OS edge cases.
+- [#80571](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/80571)
+  [`c193ae1d1163`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/c193ae1d1163) -
+  Fix heading typography styles to for apple OS edge cases.
 
 ## 2.0.0
 
 ### Major Changes
 
-- [#81744](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/81744) [`bc7085853ea2`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/bc7085853ea2) - Renamed `variant` prop to `size`. The prop values remain unchanged.
+- [#81744](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/81744)
+  [`bc7085853ea2`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/bc7085853ea2) -
+  Renamed `variant` prop to `size`. The prop values remain unchanged.
 
 ## 1.8.1
 
 ### Patch Changes
 
-- [#81644](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/81644) [`8ab7a816dca7`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/8ab7a816dca7) - Revert input border change from the previous version
+- [#81644](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/81644)
+  [`8ab7a816dca7`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/8ab7a816dca7) -
+  Revert input border change from the previous version
 
 ## 1.8.0
 
 ### Minor Changes
 
-- [#80528](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/80528) [`8877e9b57d55`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/8877e9b57d55) - Added `size` prop which will replace `variant` prop in the next major version.
+- [#80528](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/80528)
+  [`8877e9b57d55`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/8877e9b57d55) -
+  Added `size` prop which will replace `variant` prop in the next major version.
 
 ## 1.7.1
 
 ### Patch Changes
 
-- [#80805](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/80805) [`427c2dd9e0d6`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/427c2dd9e0d6) - Update input border color token and width to meet 3:1 color contrast
+- [#80805](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/80805)
+  [`427c2dd9e0d6`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/427c2dd9e0d6) -
+  Update input border color token and width to meet 3:1 color contrast
 - Updated dependencies
 
 ## 1.7.0
 
 ### Minor Changes
 
-- [#79770](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/79770) [`32e4d951a5ae`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/32e4d951a5ae) - Run the codegen and update heading.partial.tsx
+- [#79770](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/79770)
+  [`32e4d951a5ae`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/32e4d951a5ae) -
+  Run the codegen and update heading.partial.tsx
 
 ### Patch Changes
 
@@ -73,19 +107,27 @@
 
 ### Minor Changes
 
-- [#68604](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/68604) [`fdf7f6635426`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/fdf7f6635426) - Modified mapping of `variant` to the HTML element that gets rendered. Previously `xlarge` would render a `h2`, `large` would render a `h3` etc... Now `xlarge` renders a `h1` and so on...
+- [#68604](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/68604)
+  [`fdf7f6635426`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/fdf7f6635426) -
+  Modified mapping of `variant` to the HTML element that gets rendered. Previously `xlarge` would
+  render a `h2`, `large` would render a `h3` etc... Now `xlarge` renders a `h1` and so on...
 
 ## 1.5.1
 
 ### Patch Changes
 
-- [#70023](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/70023) [`e2d35320717b`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/e2d35320717b) - Fix types to set either level or variant to be required props to prevent exceptions being thrown.
+- [#70023](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/70023)
+  [`e2d35320717b`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/e2d35320717b) -
+  Fix types to set either level or variant to be required props to prevent exceptions being thrown.
 
 ## 1.5.0
 
 ### Minor Changes
 
-- [#67463](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/67463) [`caac5b953575`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/caac5b953575) - Fixed an issue where typography tokens referenced font family tokens that may not exist on a page, causing fallbacks to break.
+- [#67463](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/67463)
+  [`caac5b953575`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/caac5b953575) -
+  Fixed an issue where typography tokens referenced font family tokens that may not exist on a page,
+  causing fallbacks to break.
 
 ### Patch Changes
 
@@ -95,87 +137,123 @@
 
 ### Patch Changes
 
-- [#63526](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/63526) [`cae958047771`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/cae958047771) - Internal change to how typography tokens are imported. There is no expected behaviour change.
+- [#63526](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/63526)
+  [`cae958047771`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/cae958047771) -
+  Internal change to how typography tokens are imported. There is no expected behaviour change.
 - Updated dependencies
 
 ## 1.4.3
 
 ### Patch Changes
 
-- [#41226](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/41226) [`fc7aba3cbae`](https://bitbucket.org/atlassian/atlassian-frontend/commits/fc7aba3cbae) - [ux] Further fixes related to heading getting into possible invalid state. Heading will now always produce valid markup / aria-attributes for any configuration. Previously if there was no `HeadingContext` in the tree the heading would not produce accessibly correct markup in some cases. This is now resolved.
+- [#41226](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/41226)
+  [`fc7aba3cbae`](https://bitbucket.org/atlassian/atlassian-frontend/commits/fc7aba3cbae) - [ux]
+  Further fixes related to heading getting into possible invalid state. Heading will now always
+  produce valid markup / aria-attributes for any configuration. Previously if there was no
+  `HeadingContext` in the tree the heading would not produce accessibly correct markup in some
+  cases. This is now resolved.
 
 ## 1.4.2
 
 ### Patch Changes
 
-- [#41124](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/41124) [`40cd7f0c882`](https://bitbucket.org/atlassian/atlassian-frontend/commits/40cd7f0c882) - Fix to prevent heading getting into possible invalid state.
+- [#41124](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/41124)
+  [`40cd7f0c882`](https://bitbucket.org/atlassian/atlassian-frontend/commits/40cd7f0c882) - Fix to
+  prevent heading getting into possible invalid state.
 
 ## 1.4.1
 
 ### Patch Changes
 
-- [#41032](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/41032) [`8d9dad6b977`](https://bitbucket.org/atlassian/atlassian-frontend/commits/8d9dad6b977) - Heading will apply an aria level if rendered as a div. This is an accessibility fix for an incomplete feature shipped in the previous minor version.
-- [#40299](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/40299) [`b1882fdd842`](https://bitbucket.org/atlassian/atlassian-frontend/commits/b1882fdd842) - Change typography token naming to be more verbose.
+- [#41032](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/41032)
+  [`8d9dad6b977`](https://bitbucket.org/atlassian/atlassian-frontend/commits/8d9dad6b977) - Heading
+  will apply an aria level if rendered as a div. This is an accessibility fix for an incomplete
+  feature shipped in the previous minor version.
+- [#40299](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/40299)
+  [`b1882fdd842`](https://bitbucket.org/atlassian/atlassian-frontend/commits/b1882fdd842) - Change
+  typography token naming to be more verbose.
 
 ## 1.4.0
 
 ### Minor Changes
 
-- [#40254](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/40254) [`9cc7e23c65b`](https://bitbucket.org/atlassian/atlassian-frontend/commits/9cc7e23c65b) - [ux] Adds additional heading types via the `variant` prop. This prop has been added to aid deprecation of the previous `level` prop. The `level` prop will be removed in a future release.
+- [#40254](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/40254)
+  [`9cc7e23c65b`](https://bitbucket.org/atlassian/atlassian-frontend/commits/9cc7e23c65b) - [ux]
+  Adds additional heading types via the `variant` prop. This prop has been added to aid deprecation
+  of the previous `level` prop. The `level` prop will be removed in a future release.
 
 ## 1.3.8
 
 ### Patch Changes
 
-- [#40040](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/40040) [`ff79902b24c`](https://bitbucket.org/atlassian/atlassian-frontend/commits/ff79902b24c) - This package is now onboarded onto the product push model.
+- [#40040](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/40040)
+  [`ff79902b24c`](https://bitbucket.org/atlassian/atlassian-frontend/commits/ff79902b24c) - This
+  package is now onboarded onto the product push model.
 
 ## 1.3.7
 
 ### Patch Changes
 
-- [#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.
+- [#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.
 
 ## 1.3.6
 
 ### Patch Changes
 
-- [#35337](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/35337) [`529814693a1`](https://bitbucket.org/atlassian/atlassian-frontend/commits/529814693a1) - Pin version of @atlaskit/primitives so it resolves to correct version
+- [#35337](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/35337)
+  [`529814693a1`](https://bitbucket.org/atlassian/atlassian-frontend/commits/529814693a1) - Pin
+  version of @atlaskit/primitives so it resolves to correct version
 
 ## 1.3.5
 
 ### Patch Changes
 
-- [#33833](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/33833) [`b8b41649492`](https://bitbucket.org/atlassian/atlassian-frontend/commits/b8b41649492) - Update how certain background colors are referenced by name. Internal changes only.
+- [#33833](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/33833)
+  [`b8b41649492`](https://bitbucket.org/atlassian/atlassian-frontend/commits/b8b41649492) - Update
+  how certain background colors are referenced by name. Internal changes only.
 
 ## 1.3.4
 
 ### Patch Changes
 
-- [#34922](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/34922) [`779727e307a`](https://bitbucket.org/atlassian/atlassian-frontend/commits/779727e307a) - Internal change only. Replace all instances of Box with stable @atlaskit/primitives version.
+- [#34922](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/34922)
+  [`779727e307a`](https://bitbucket.org/atlassian/atlassian-frontend/commits/779727e307a) - Internal
+  change only. Replace all instances of Box with stable @atlaskit/primitives version.
 
 ## 1.3.3
 
 ### Patch Changes
 
-- [#34443](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/34443) [`61cb5313358`](https://bitbucket.org/atlassian/atlassian-frontend/commits/61cb5313358) - Removing unused dependencies and dev dependencies
+- [#34443](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/34443)
+  [`61cb5313358`](https://bitbucket.org/atlassian/atlassian-frontend/commits/61cb5313358) - Removing
+  unused dependencies and dev dependencies
 
 ## 1.3.2
 
 ### Patch Changes
 
-- [#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
+- [#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
 
 ## 1.3.1
 
 ### Patch Changes
 
-- [#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`
+- [#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`
 
 ## 1.3.0
 
 ### Minor Changes
 
-- [#33258](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/33258) [`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
 
@@ -185,25 +263,33 @@
 
 ### Patch Changes
 
-- [#32294](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/32294) [`e0460d5d989`](https://bitbucket.org/atlassian/atlassian-frontend/commits/e0460d5d989) - Usages of `process` are now guarded by a `typeof` check.
+- [#32294](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/32294)
+  [`e0460d5d989`](https://bitbucket.org/atlassian/atlassian-frontend/commits/e0460d5d989) - Usages
+  of `process` are now guarded by a `typeof` check.
 
 ## 1.2.0
 
 ### Minor Changes
 
-- [#31206](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/31206) [`261420360ec`](https://bitbucket.org/atlassian/atlassian-frontend/commits/261420360ec) - Upgrades component types to support React 18.
+- [#31206](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/31206)
+  [`261420360ec`](https://bitbucket.org/atlassian/atlassian-frontend/commits/261420360ec) - Upgrades
+  component types to support React 18.
 
 ## 1.1.4
 
 ### Patch Changes
 
-- [#31242](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/31242) [`cfe48bb7ece`](https://bitbucket.org/atlassian/atlassian-frontend/commits/cfe48bb7ece) - Internal change only. Replace usages of Inline/Stack with stable version from `@atlaskit/primitives`.
+- [#31242](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/31242)
+  [`cfe48bb7ece`](https://bitbucket.org/atlassian/atlassian-frontend/commits/cfe48bb7ece) - Internal
+  change only. Replace usages of Inline/Stack with stable version from `@atlaskit/primitives`.
 
 ## 1.1.3
 
 ### Patch Changes
 
-- [#31185](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/31185) [`b6c5779d358`](https://bitbucket.org/atlassian/atlassian-frontend/commits/b6c5779d358) - Internal changes only to restrict usage of `Box` from the primitives package.
+- [#31185](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/31185)
+  [`b6c5779d358`](https://bitbucket.org/atlassian/atlassian-frontend/commits/b6c5779d358) - Internal
+  changes only to restrict usage of `Box` from the primitives package.
 
 ## 1.1.2
 
@@ -215,13 +301,17 @@
 
 ### Patch Changes
 
-- [#29390](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/29390) [`18aeca8c199`](https://bitbucket.org/atlassian/atlassian-frontend/commits/18aeca8c199) - Internal change to update token references. There is no expected behaviour or visual change.
+- [#29390](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/29390)
+  [`18aeca8c199`](https://bitbucket.org/atlassian/atlassian-frontend/commits/18aeca8c199) - Internal
+  change to update token references. There is no expected behaviour or visual change.
 
 ## 1.1.0
 
 ### Minor Changes
 
-- [#28493](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/28493) [`fce52a022f5`](https://bitbucket.org/atlassian/atlassian-frontend/commits/fce52a022f5) - Adds typography tokens to @atlaskit/heading.
+- [#28493](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/28493)
+  [`fce52a022f5`](https://bitbucket.org/atlassian/atlassian-frontend/commits/fce52a022f5) - Adds
+  typography tokens to @atlaskit/heading.
 
 ## 1.0.4
 
@@ -239,7 +329,9 @@
 
 ### Patch Changes
 
-- [#27341](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/27341) [`95fdae34c94`](https://bitbucket.org/atlassian/atlassian-frontend/commits/95fdae34c94) - Revert experimental change to `@compiled/react` from `@emotion/react`.
+- [#27341](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/27341)
+  [`95fdae34c94`](https://bitbucket.org/atlassian/atlassian-frontend/commits/95fdae34c94) - Revert
+  experimental change to `@compiled/react` from `@emotion/react`.
 
 ## 1.0.1
 
@@ -251,49 +343,65 @@
 
 ### Major Changes
 
-- [#27238](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/27238) [`7d92ed50264`](https://bitbucket.org/atlassian/atlassian-frontend/commits/7d92ed50264) - [ux] This package is still considered to be in an experimental state and is discouraged for use in production. The major is to simplify consumption and versioning in product.
+- [#27238](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/27238)
+  [`7d92ed50264`](https://bitbucket.org/atlassian/atlassian-frontend/commits/7d92ed50264) - [ux]
+  This package is still considered to be in an experimental state and is discouraged for use in
+  production. The major is to simplify consumption and versioning in product.
 
   Other changes:
 
-  - Introduction of a `HeadingContext` provider to aid with creating the right semantic structure for headings.
+  - Introduction of a `HeadingContext` provider to aid with creating the right semantic structure
+    for headings.
   - Migrated internals to use `@compiled/react` from `@emotion/react`.
 
 ## 0.1.18
 
 ### Patch Changes
 
-- [#26488](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/26488) [`bc989043572`](https://bitbucket.org/atlassian/atlassian-frontend/commits/bc989043572) - Internal changes to apply spacing tokens. This should be a no-op change.
+- [#26488](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/26488)
+  [`bc989043572`](https://bitbucket.org/atlassian/atlassian-frontend/commits/bc989043572) - Internal
+  changes to apply spacing tokens. This should be a no-op change.
 
 ## 0.1.17
 
 ### Patch Changes
 
-- [#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`
+- [#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`
 
 ## 0.1.16
 
 ### Patch Changes
 
-- [#24004](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/24004) [`30b11aab9fb`](https://bitbucket.org/atlassian/atlassian-frontend/commits/30b11aab9fb) - Updates `@emotion/core` to `@emotion/react`; v10 to v11. There is no expected behavior change.
+- [#24004](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/24004)
+  [`30b11aab9fb`](https://bitbucket.org/atlassian/atlassian-frontend/commits/30b11aab9fb) - Updates
+  `@emotion/core` to `@emotion/react`; v10 to v11. There is no expected behavior change.
 - Updated dependencies
 
 ## 0.1.15
 
 ### Patch Changes
 
-- [#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`.
+- [#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`.
 
 ## 0.1.14
 
 ### Patch Changes
 
-- [#23381](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/23381) [`47b01007f27`](https://bitbucket.org/atlassian/atlassian-frontend/commits/47b01007f27) - Introduces color prop with values default and inverse.
+- [#23381](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/23381)
+  [`47b01007f27`](https://bitbucket.org/atlassian/atlassian-frontend/commits/47b01007f27) -
+  Introduces color prop with values default and inverse.
 
 ## 0.1.13
 
 ### Patch Changes
 
-- [#22642](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/22642) [`354050b68da`](https://bitbucket.org/atlassian/atlassian-frontend/commits/354050b68da) - Revert font size calculations to raw pixels.
+- [#22642](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/22642)
+  [`354050b68da`](https://bitbucket.org/atlassian/atlassian-frontend/commits/354050b68da) - Revert
+  font size calculations to raw pixels.
 
 ## 0.1.12
 
@@ -305,7 +413,9 @@
 
 ### Patch Changes
 
-- [#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
+- [#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
 
 ## 0.1.10
 
@@ -329,7 +439,10 @@
 
 ### Patch 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
+- [#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
 
 ## 0.1.6
@@ -342,7 +455,10 @@
 
 ### Patch Changes
 
-- [#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.
+- [#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
 
 ## 0.1.4
@@ -367,20 +483,27 @@
 
 ### Patch Changes
 
-- [#13864](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/13864) [`d7a9a4ff7ec`](https://bitbucket.org/atlassian/atlassian-frontend/commits/d7a9a4ff7ec) - Instrumented heading with the new theming package, `@atlaskit/tokens`.
-  New tokens will be visible only in applications configured to use the new Tokens API (currently in alpha).
-  These changes are intended to be interoperable with the legacy theme implementation.
-  Legacy dark mode users should expect no visual or breaking changes.
+- [#13864](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/13864)
+  [`d7a9a4ff7ec`](https://bitbucket.org/atlassian/atlassian-frontend/commits/d7a9a4ff7ec) -
+  Instrumented heading with the new theming package, `@atlaskit/tokens`. New tokens will be visible
+  only in applications configured to use the new Tokens API (currently in alpha). These changes are
+  intended to be interoperable with the legacy theme implementation. Legacy dark mode users should
+  expect no visual or breaking changes.
 - Updated dependencies
 
 ## 0.1.0
 
 ### Minor Changes
 
-- [#12837](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/12837) [`ee15e59ba60`](https://bitbucket.org/atlassian/atlassian-frontend/commits/ee15e59ba60) - This is the initial release of the Heading package. Typography styles have been duplicated from the `@atlaskit/theme` package as standalone components.
+- [#12837](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/12837)
+  [`ee15e59ba60`](https://bitbucket.org/atlassian/atlassian-frontend/commits/ee15e59ba60) - This is
+  the initial release of the Heading package. Typography styles have been duplicated from the
+  `@atlaskit/theme` package as standalone components.
 
 ### Patch Changes
 
-- [`46816ee8526`](https://bitbucket.org/atlassian/atlassian-frontend/commits/46816ee8526) - Changes heading element mappings to match '@atlaskit/css-reset'.
-- [`f9cd2065648`](https://bitbucket.org/atlassian/atlassian-frontend/commits/f9cd2065648) - Removed redundant styles for text-transform, moved font-size to `rem` insteda of `em`.
+- [`46816ee8526`](https://bitbucket.org/atlassian/atlassian-frontend/commits/46816ee8526) - Changes
+  heading element mappings to match '@atlaskit/css-reset'.
+- [`f9cd2065648`](https://bitbucket.org/atlassian/atlassian-frontend/commits/f9cd2065648) - Removed
+  redundant styles for text-transform, moved font-size to `rem` insteda of `em`.
 - Updated dependencies

package/codemods/1.6.0-level-to-size.tsx

@@ -1,6 +1,7 @@
-import core, {
+import type {
   API,
   ASTPath,
+  default as core,
   FileInfo,
   ImportDeclaration,
   Options,

package/dist/cjs/heading.js

@@ -11,7 +11,8 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 var _react = require("@emotion/react");
 var _headingContext = require("./heading-context");
 var _heading = _interopRequireDefault(require("./heading.partial"));
-var _excluded = ["level", "size"];
+var _excluded = ["level"];
+/* eslint-disable @atlaskit/design-system/no-deprecated-design-token-usage */
 /** @jsx jsx */
 // https://atlassian.design/foundations/typography
 var levelMap = {
@@ -155,7 +156,6 @@ var OldHeading = function OldHeading(_ref) {
  */
 var Heading = function Heading(_ref2) {
   var level = _ref2.level,
-    size = _ref2.size,
     props = (0, _objectWithoutProperties2.default)(_ref2, _excluded);
   return level ?
   // eslint-disable-next-line jsx-a11y/heading-has-content, @repo/internal/react/no-unsafe-spread-props
@@ -163,8 +163,6 @@ var Heading = function Heading(_ref2) {
     level: level
   }, props)) :
   // eslint-disable-next-line jsx-a11y/heading-has-content, @repo/internal/react/no-unsafe-spread-props
-  (0, _react.jsx)(_heading.default, (0, _extends2.default)({
-    size: size
-  }, props));
+  (0, _react.jsx)(_heading.default, props);
 };
 var _default = exports.default = Heading;

package/dist/cjs/heading.partial.js

@@ -4,9 +4,10 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.headingColorStylesMap = exports.default = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = require("@emotion/react");
+var _primitives = require("@atlaskit/primitives");
 var _headingContext = require("./heading-context");
 /** @jsx jsx */
 
@@ -20,14 +21,22 @@ var sizeTagMap = {
   xxsmall: 'h6'
 };
 var headingResetStyles = (0, _react.css)({
-  color: "var(--ds-text, #172B4D)",
   letterSpacing: 'normal',
   marginBlock: 0,
   textTransform: 'none'
 });
-var inverseStyles = (0, _react.css)({
-  color: "var(--ds-text-inverse, #FFF)"
-});
+var useColor = function useColor(colorProp) {
+  var surface = (0, _primitives.UNSAFE_useSurface)();
+
+  /**
+   * Where the color of the surface is inverted we always override the color
+   * as there is no valid choice that is not covered by the override.
+   */
+  if (_primitives.UNSAFE_inverseColorMap.hasOwnProperty(surface)) {
+    return _primitives.UNSAFE_inverseColorMap[surface];
+  }
+  return colorProp || 'color.text';
+};
 
 /**
  * __Heading__
@@ -46,8 +55,7 @@ var Heading = function Heading(_ref) {
     id = _ref.id,
     testId = _ref.testId,
     as = _ref.as,
-    _ref$color = _ref.color,
-    color = _ref$color === void 0 ? 'default' : _ref$color;
+    colorProp = _ref.color;
   if (typeof process !== 'undefined' && process.env.NODE_ENV !== 'production' && as && typeof as !== 'string') {
     throw new Error('`as` prop should be a string.');
   }
@@ -60,18 +68,32 @@ var Heading = function Heading(_ref) {
     inferredElement = _useHeading2[1];
   var Component = as || inferredElement;
   var needsAriaRole = Component === 'div' && hLevel;
+  var color = useColor(colorProp);
   return (0, _react.jsx)(Component, {
     id: id,
     "data-testid": testId,
     role: needsAriaRole ? 'heading' : undefined,
     "aria-level": needsAriaRole ? hLevel : undefined,
-    css: [headingResetStyles, size && headingSizeStylesMap[size], color === 'inverse' && inverseStyles]
+    css: [headingResetStyles, size && headingSizeStylesMap[size], headingColorStylesMap[color]]
   }, children);
 };
 
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css
+var headingColorStylesMap = exports.headingColorStylesMap = {
+  'color.text': (0, _react.css)({
+    color: "var(--ds-text, #172B4D)"
+  }),
+  'color.text.inverse': (0, _react.css)({
+    color: "var(--ds-text-inverse, #FFFFFF)"
+  }),
+  'color.text.warning.inverse': (0, _react.css)({
+    color: "var(--ds-text-warning-inverse, #172B4D)"
+  })
+};
+
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::057c0fe2015c2071afe3d694c5afcc0e>>
+ * @codegen <<SignedSource::d7d7bb136aa9b7935c15f8e85d0916d7>>
  * @codegenId typography
  * @codegenCommand yarn workspace @atlaskit/heading codegen
  */

package/dist/es2019/heading.js

@@ -1,4 +1,5 @@
 import _extends from "@babel/runtime/helpers/extends";
+/* eslint-disable @atlaskit/design-system/no-deprecated-design-token-usage */
 /** @jsx jsx */
 import { css, jsx } from '@emotion/react';
 import { useHeading } from './heading-context';
@@ -142,7 +143,6 @@ const OldHeading = ({
  */
 const Heading = ({
   level,
-  size,
   ...props
 }) => {
   return level ?
@@ -151,8 +151,6 @@ const Heading = ({
     level: level
   }, props)) :
   // eslint-disable-next-line jsx-a11y/heading-has-content, @repo/internal/react/no-unsafe-spread-props
-  jsx(NewHeading, _extends({
-    size: size
-  }, props));
+  jsx(NewHeading, props);
 };
 export default Heading;

package/dist/es2019/heading.partial.js

@@ -1,5 +1,6 @@
 /** @jsx jsx */
 import { css, jsx } from '@emotion/react';
+import { UNSAFE_inverseColorMap, UNSAFE_useSurface } from '@atlaskit/primitives';
 import { useHeading } from './heading-context';
 const sizeTagMap = {
   xxlarge: 'h1',
@@ -11,14 +12,22 @@ const sizeTagMap = {
   xxsmall: 'h6'
 };
 const headingResetStyles = css({
-  color: "var(--ds-text, #172B4D)",
   letterSpacing: 'normal',
   marginBlock: 0,
   textTransform: 'none'
 });
-const inverseStyles = css({
-  color: "var(--ds-text-inverse, #FFF)"
-});
+const useColor = colorProp => {
+  const surface = UNSAFE_useSurface();
+
+  /**
+   * Where the color of the surface is inverted we always override the color
+   * as there is no valid choice that is not covered by the override.
+   */
+  if (UNSAFE_inverseColorMap.hasOwnProperty(surface)) {
+    return UNSAFE_inverseColorMap[surface];
+  }
+  return colorProp || 'color.text';
+};
 
 /**
  * __Heading__
@@ -37,7 +46,7 @@ const Heading = ({
   id,
   testId,
   as,
-  color = 'default'
+  color: colorProp
 }) => {
   if (typeof process !== 'undefined' && process.env.NODE_ENV !== 'production' && as && typeof as !== 'string') {
     throw new Error('`as` prop should be a string.');
@@ -48,18 +57,32 @@ const Heading = ({
   const [hLevel, inferredElement] = useHeading(sizeTagMap[size]);
   const Component = as || inferredElement;
   const needsAriaRole = Component === 'div' && hLevel;
+  const color = useColor(colorProp);
   return jsx(Component, {
     id: id,
     "data-testid": testId,
     role: needsAriaRole ? 'heading' : undefined,
     "aria-level": needsAriaRole ? hLevel : undefined,
-    css: [headingResetStyles, size && headingSizeStylesMap[size], color === 'inverse' && inverseStyles]
+    css: [headingResetStyles, size && headingSizeStylesMap[size], headingColorStylesMap[color]]
   }, children);
 };
 
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css
+export const headingColorStylesMap = {
+  'color.text': css({
+    color: "var(--ds-text, #172B4D)"
+  }),
+  'color.text.inverse': css({
+    color: "var(--ds-text-inverse, #FFFFFF)"
+  }),
+  'color.text.warning.inverse': css({
+    color: "var(--ds-text-warning-inverse, #172B4D)"
+  })
+};
+
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::057c0fe2015c2071afe3d694c5afcc0e>>
+ * @codegen <<SignedSource::d7d7bb136aa9b7935c15f8e85d0916d7>>
  * @codegenId typography
  * @codegenCommand yarn workspace @atlaskit/heading codegen
  */

package/dist/esm/heading.js

@@ -1,7 +1,8 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-var _excluded = ["level", "size"];
+var _excluded = ["level"];
+/* eslint-disable @atlaskit/design-system/no-deprecated-design-token-usage */
 /** @jsx jsx */
 import { css, jsx } from '@emotion/react';
 import { useHeading } from './heading-context';
@@ -148,7 +149,6 @@ var OldHeading = function OldHeading(_ref) {
  */
 var Heading = function Heading(_ref2) {
   var level = _ref2.level,
-    size = _ref2.size,
     props = _objectWithoutProperties(_ref2, _excluded);
   return level ?
   // eslint-disable-next-line jsx-a11y/heading-has-content, @repo/internal/react/no-unsafe-spread-props
@@ -156,8 +156,6 @@ var Heading = function Heading(_ref2) {
     level: level
   }, props)) :
   // eslint-disable-next-line jsx-a11y/heading-has-content, @repo/internal/react/no-unsafe-spread-props
-  jsx(NewHeading, _extends({
-    size: size
-  }, props));
+  jsx(NewHeading, props);
 };
 export default Heading;

package/dist/esm/heading.partial.js

@@ -1,6 +1,7 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 /** @jsx jsx */
 import { css, jsx } from '@emotion/react';
+import { UNSAFE_inverseColorMap, UNSAFE_useSurface } from '@atlaskit/primitives';
 import { useHeading } from './heading-context';
 var sizeTagMap = {
   xxlarge: 'h1',
@@ -12,14 +13,22 @@ var sizeTagMap = {
   xxsmall: 'h6'
 };
 var headingResetStyles = css({
-  color: "var(--ds-text, #172B4D)",
   letterSpacing: 'normal',
   marginBlock: 0,
   textTransform: 'none'
 });
-var inverseStyles = css({
-  color: "var(--ds-text-inverse, #FFF)"
-});
+var useColor = function useColor(colorProp) {
+  var surface = UNSAFE_useSurface();
+
+  /**
+   * Where the color of the surface is inverted we always override the color
+   * as there is no valid choice that is not covered by the override.
+   */
+  if (UNSAFE_inverseColorMap.hasOwnProperty(surface)) {
+    return UNSAFE_inverseColorMap[surface];
+  }
+  return colorProp || 'color.text';
+};
 
 /**
  * __Heading__
@@ -38,8 +47,7 @@ var Heading = function Heading(_ref) {
     id = _ref.id,
     testId = _ref.testId,
     as = _ref.as,
-    _ref$color = _ref.color,
-    color = _ref$color === void 0 ? 'default' : _ref$color;
+    colorProp = _ref.color;
   if (typeof process !== 'undefined' && process.env.NODE_ENV !== 'production' && as && typeof as !== 'string') {
     throw new Error('`as` prop should be a string.');
   }
@@ -52,18 +60,32 @@ var Heading = function Heading(_ref) {
     inferredElement = _useHeading2[1];
   var Component = as || inferredElement;
   var needsAriaRole = Component === 'div' && hLevel;
+  var color = useColor(colorProp);
   return jsx(Component, {
     id: id,
     "data-testid": testId,
     role: needsAriaRole ? 'heading' : undefined,
     "aria-level": needsAriaRole ? hLevel : undefined,
-    css: [headingResetStyles, size && headingSizeStylesMap[size], color === 'inverse' && inverseStyles]
+    css: [headingResetStyles, size && headingSizeStylesMap[size], headingColorStylesMap[color]]
   }, children);
 };
 
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css
+export var headingColorStylesMap = {
+  'color.text': css({
+    color: "var(--ds-text, #172B4D)"
+  }),
+  'color.text.inverse': css({
+    color: "var(--ds-text-inverse, #FFFFFF)"
+  }),
+  'color.text.warning.inverse': css({
+    color: "var(--ds-text-warning-inverse, #172B4D)"
+  })
+};
+
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::057c0fe2015c2071afe3d694c5afcc0e>>
+ * @codegen <<SignedSource::d7d7bb136aa9b7935c15f8e85d0916d7>>
  * @codegenId typography
  * @codegenCommand yarn workspace @atlaskit/heading codegen
  */

package/dist/types/heading-context.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import { type ReactNode } from 'react';
 type HeadingLevel = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9;
 type HeadingElement = `h${1 | 2 | 3 | 4 | 5 | 6}` | 'div';
 /**

package/dist/types/heading.d.ts

@@ -20,5 +20,5 @@ import type { HeadingProps } from './types';
  * );
  * ```
  */
-declare const Heading: ({ level, size, ...props }: HeadingProps) => jsx.JSX.Element;
+declare const Heading: ({ level, ...props }: HeadingProps) => jsx.JSX.Element;
 export default Heading;

package/dist/types/heading.partial.d.ts

@@ -1,6 +1,6 @@
 /** @jsx jsx */
-import { jsx } from '@emotion/react';
-import type { HeadingProps } from './types';
+import { jsx, type SerializedStyles } from '@emotion/react';
+import type { HeadingColor, NewHeadingProps } from './types';
 /**
  * __Heading__
  *
@@ -12,21 +12,22 @@ import type { HeadingProps } from './types';
  * <Heading size="xxlarge">Page title</Heading>
  * ```
  */
-declare const Heading: ({ children, size, id, testId, as, color, }: HeadingProps) => jsx.JSX.Element;
+declare const Heading: ({ children, size, id, testId, as, color: colorProp, }: NewHeadingProps) => jsx.JSX.Element;
+export declare const headingColorStylesMap: Record<HeadingColor, SerializedStyles>;
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::057c0fe2015c2071afe3d694c5afcc0e>>
+ * @codegen <<SignedSource::d7d7bb136aa9b7935c15f8e85d0916d7>>
  * @codegenId typography
  * @codegenCommand yarn workspace @atlaskit/heading codegen
  */
 declare const headingSizeStylesMap: {
-    xxlarge: import("@emotion/react").SerializedStyles;
-    xlarge: import("@emotion/react").SerializedStyles;
-    large: import("@emotion/react").SerializedStyles;
-    medium: import("@emotion/react").SerializedStyles;
-    small: import("@emotion/react").SerializedStyles;
-    xsmall: import("@emotion/react").SerializedStyles;
-    xxsmall: import("@emotion/react").SerializedStyles;
+    xxlarge: SerializedStyles;
+    xlarge: SerializedStyles;
+    large: SerializedStyles;
+    medium: SerializedStyles;
+    small: SerializedStyles;
+    xsmall: SerializedStyles;
+    xxsmall: SerializedStyles;
 };
 export type HeadingSize = keyof typeof headingSizeStylesMap;
 /**

package/dist/types/types.d.ts

@@ -1,6 +1,6 @@
-import { ReactNode } from 'react';
-import { HeadingSize } from './heading.partial';
-export type HeadingProps = {
+import { type ReactNode } from 'react';
+import { type HeadingSize } from './heading.partial';
+type HeadingPropsBase = {
     /**
      * 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,
@@ -19,12 +19,13 @@ export type HeadingProps = {
      * Allows the component to be rendered as the specified DOM element, overriding a default element set by `level` prop.
      */
     as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'div' | 'span';
+};
+export type OldHeadingProps = HeadingPropsBase & {
     /**
      * Text color of the heading. Use `"inverse"` option for a light text color over a dark background.
      * Defaults to `"default"`.
      */
     color?: 'inverse' | 'default';
-} & ({
     /**
      * @private
      * @deprecated Use `size` prop instead.
@@ -52,13 +53,22 @@ export type HeadingProps = {
      * Heading size. Use instead of the deprecated `level` prop.
      */
     size?: never;
-} | {
-    level?: never;
+};
+export type HeadingColor = 'color.text' | 'color.text.inverse' | 'color.text.warning.inverse';
+export type NewHeadingProps = HeadingPropsBase & {
+    /**
+     * Token representing text color with a built-in fallback value.
+     * Will apply inverse text color automatically if placed within a Box with bold background color.
+     * Defaults to `color.text`.
+     */
+    color?: HeadingColor;
     /**
      * Heading size. This value is detached from the specific heading level applied to allow for more flexibility.
      * Use instead of the deprecated `level` prop.
      *
-     * This prop will only work if the typography tokens theme is applied on the page.
      */
     size: HeadingSize;
-});
+    level?: never;
+};
+export type HeadingProps = OldHeadingProps | NewHeadingProps;
+export {};

package/dist/types-ts4.5/heading-context.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import { type ReactNode } from 'react';
 type HeadingLevel = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9;
 type HeadingElement = `h${1 | 2 | 3 | 4 | 5 | 6}` | 'div';
 /**

package/dist/types-ts4.5/heading.d.ts

@@ -20,5 +20,5 @@ import type { HeadingProps } from './types';
  * );
  * ```
  */
-declare const Heading: ({ level, size, ...props }: HeadingProps) => jsx.JSX.Element;
+declare const Heading: ({ level, ...props }: HeadingProps) => jsx.JSX.Element;
 export default Heading;

package/dist/types-ts4.5/heading.partial.d.ts

@@ -1,6 +1,6 @@
 /** @jsx jsx */
-import { jsx } from '@emotion/react';
-import type { HeadingProps } from './types';
+import { jsx, type SerializedStyles } from '@emotion/react';
+import type { HeadingColor, NewHeadingProps } from './types';
 /**
  * __Heading__
  *
@@ -12,21 +12,22 @@ import type { HeadingProps } from './types';
  * <Heading size="xxlarge">Page title</Heading>
  * ```
  */
-declare const Heading: ({ children, size, id, testId, as, color, }: HeadingProps) => jsx.JSX.Element;
+declare const Heading: ({ children, size, id, testId, as, color: colorProp, }: NewHeadingProps) => jsx.JSX.Element;
+export declare const headingColorStylesMap: Record<HeadingColor, SerializedStyles>;
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::057c0fe2015c2071afe3d694c5afcc0e>>
+ * @codegen <<SignedSource::d7d7bb136aa9b7935c15f8e85d0916d7>>
  * @codegenId typography
  * @codegenCommand yarn workspace @atlaskit/heading codegen
  */
 declare const headingSizeStylesMap: {
-    xxlarge: import("@emotion/react").SerializedStyles;
-    xlarge: import("@emotion/react").SerializedStyles;
-    large: import("@emotion/react").SerializedStyles;
-    medium: import("@emotion/react").SerializedStyles;
-    small: import("@emotion/react").SerializedStyles;
-    xsmall: import("@emotion/react").SerializedStyles;
-    xxsmall: import("@emotion/react").SerializedStyles;
+    xxlarge: SerializedStyles;
+    xlarge: SerializedStyles;
+    large: SerializedStyles;
+    medium: SerializedStyles;
+    small: SerializedStyles;
+    xsmall: SerializedStyles;
+    xxsmall: SerializedStyles;
 };
 export type HeadingSize = keyof typeof headingSizeStylesMap;
 /**

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

@@ -1,6 +1,6 @@
-import { ReactNode } from 'react';
-import { HeadingSize } from './heading.partial';
-export type HeadingProps = {
+import { type ReactNode } from 'react';
+import { type HeadingSize } from './heading.partial';
+type HeadingPropsBase = {
     /**
      * 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,
@@ -19,12 +19,13 @@ export type HeadingProps = {
      * Allows the component to be rendered as the specified DOM element, overriding a default element set by `level` prop.
      */
     as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'div' | 'span';
+};
+export type OldHeadingProps = HeadingPropsBase & {
     /**
      * Text color of the heading. Use `"inverse"` option for a light text color over a dark background.
      * Defaults to `"default"`.
      */
     color?: 'inverse' | 'default';
-} & ({
     /**
      * @private
      * @deprecated Use `size` prop instead.
@@ -52,13 +53,22 @@ export type HeadingProps = {
      * Heading size. Use instead of the deprecated `level` prop.
      */
     size?: never;
-} | {
-    level?: never;
+};
+export type HeadingColor = 'color.text' | 'color.text.inverse' | 'color.text.warning.inverse';
+export type NewHeadingProps = HeadingPropsBase & {
+    /**
+     * Token representing text color with a built-in fallback value.
+     * Will apply inverse text color automatically if placed within a Box with bold background color.
+     * Defaults to `color.text`.
+     */
+    color?: HeadingColor;
     /**
      * Heading size. This value is detached from the specific heading level applied to allow for more flexibility.
      * Use instead of the deprecated `level` prop.
      *
-     * This prop will only work if the typography tokens theme is applied on the page.
      */
     size: HeadingSize;
-});
+    level?: never;
+};
+export type HeadingProps = OldHeadingProps | NewHeadingProps;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/heading",
-  "version": "2.2.0",
+  "version": "2.3.1",
   "description": "A heading is a typography component used to display text in different sizes and formats.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -33,7 +33,8 @@
     "codegen": "ts-node ./scripts/codegen.tsx"
   },
   "dependencies": {
-    "@atlaskit/tokens": "^1.43.0",
+    "@atlaskit/primitives": "^7.0.0",
+    "@atlaskit/tokens": "^1.49.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1"
   },
@@ -42,14 +43,14 @@
   },
   "devDependencies": {
     "@af/accessibility-testing": "*",
+    "@af/formatting": "*",
     "@atlaskit/ds-lib": "^2.3.0",
     "@atlaskit/ssr": "*",
+    "@atlaskit/toggle": "^13.1.0",
     "@atlaskit/visual-regression": "*",
-    "@atlassian/atlassian-frontend-prettier-config-1.0.0": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.0",
     "@atlassian/codegen": "^0.1.0",
     "@testing-library/react": "^12.1.5",
     "jscodeshift": "^0.13.0",
-    "prettier": "^2.8.0",
     "react-dom": "^16.8.0",
     "ts-node": "^10.9.1",
     "typescript": "~5.4.2"
@@ -85,6 +86,5 @@
   "af:exports": {
     ".": "./src/index.tsx"
   },
-  "homepage": "https://atlassian.design/components/heading/",
-  "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.0"
+  "homepage": "https://atlassian.design/components/heading/"
 }

package/scripts/codegen.tsx

@@ -1,17 +1,15 @@
 import { writeFileSync } from 'fs';
 import { join } from 'path';
 
-import prettier from 'prettier';
-import parserTypeScript from 'prettier/parser-typescript';
-
+import format from '@af/formatting/sync';
 // eslint-disable-next-line import/order
 import { createPartialSignedArtifact } from '@atlassian/codegen';
 
 // eslint-disable-next-line import/order
 import { typographyAdg3 as tokens } from '@atlaskit/tokens/tokens-raw';
 
-const constructTokenFunctionCall = (tokenName: string, fallback: string) => {
-  return `token('${tokenName}', '${fallback}')`;
+const constructTokenFunctionCall = (tokenName: string) => {
+  return `token('${tokenName}')`;
 };
 
 const headingTokens = tokens
@@ -24,7 +22,7 @@ const removeVerbosity = (name: string): string => {
 
 export const createTypographyStylesFromTemplate = () => {
   return (
-    prettier.format(
+    format(
       `
 const headingSizeStylesMap = {
   ${headingTokens
@@ -32,20 +30,12 @@ const headingSizeStylesMap = {
       return `
         '${removeVerbosity(
           token.name,
-        )}': css({ font: ${constructTokenFunctionCall(
-        token.cleanName,
-        token.value,
-      )} })
+        )}': css({ font: ${constructTokenFunctionCall(token.cleanName)} })
       `.trim();
     })
     .join(',\n\t')}
 };`,
-      {
-        singleQuote: true,
-        trailingComma: 'all',
-        parser: 'typescript',
-        plugins: [parserTypeScript],
-      },
+      'typescript',
     ) + `\nexport type HeadingSize = keyof typeof headingSizeStylesMap;\n`
   );
 };

package/codemods/__tests__/1.6.0-level-to-size.tsx

@@ -1,80 +0,0 @@
-jest.autoMockOff();
-
-import transformer from '../1.6.0-level-to-size';
-
-import { check } from './_framework';
-
-check({
-  transformer,
-  it: 'should replace level with size only on Heading component',
-  original: `
-    import Heading from '@atlaskit/heading';
-
-    function App() {
-      return <>
-        <Heading level="h700" as="h3">hello</Heading>
-        <SomethingElse level="h700">still here</SomethingElse>
-      </>;
-    }
-  `,
-  expected: `
-    import Heading from '@atlaskit/heading';
-
-    function App() {
-      return <>
-        <Heading size="large" as="h3">hello</Heading>
-        <SomethingElse level="h700">still here</SomethingElse>
-      </>;
-    }
-  `,
-});
-
-check({
-  transformer,
-  it: 'should do nothing if level is h200 or h100',
-  original: `
-    import Heading from '@atlaskit/heading';
-
-    function App() {
-      return <>
-        <Heading level="h300">hello</Heading>
-        <Heading level="h200">hello</Heading>
-        <Heading level="h100">hello</Heading>
-      </>;
-    }
-  `,
-  expected: `
-    import Heading from '@atlaskit/heading';
-
-    function App() {
-      return <>
-        <Heading size="xxsmall">hello</Heading>
-        <Heading level="h200">hello</Heading>
-        <Heading level="h100">hello</Heading>
-      </>;
-    }
-  `,
-});
-
-check({
-  transformer,
-  it: 'should do nothing if size already exists',
-  original: `
-    import Heading from '@atlaskit/heading';
-
-    function App() {
-      return <>
-        <Heading size="large">hello</Heading>
-      </>;
-    }
-  `,
-  expected: `
-    import Heading from '@atlaskit/heading';
-
-    function App() {
-      return <>
-        <Heading size="large">hello</Heading>
-      </>;
-    }
-  `,
-});

package/codemods/__tests__/_framework.tsx

@@ -1,46 +0,0 @@
-import { API, FileInfo, Options } from 'jscodeshift';
-
-import noop from '@atlaskit/ds-lib/noop';
-
-const applyTransform = require('jscodeshift/dist/testUtils').applyTransform;
-
-type Transformer = (file: FileInfo, jscodeshift: API, options: Options) => void;
-
-type TestArgs = {
-  it: string;
-  original: string;
-  expected: string;
-  transformer: Transformer;
-  mode?: 'only' | 'skip' | 'standard';
-  before?: () => void;
-  after?: () => void;
-};
-
-export function check({
-  it: name,
-  original,
-  expected,
-  transformer,
-  before = noop,
-  after = noop,
-  mode = 'standard',
-}: TestArgs) {
-  const run = mode === 'only' ? it.only : mode === 'skip' ? it.skip : it;
-  run(name, () => {
-    before();
-    try {
-      const output: string = applyTransform(
-        { default: transformer, parser: 'tsx' },
-        {},
-        { source: original },
-      );
-      expect(output).toBe(expected.trim());
-    } catch (e) {
-      // a failed assertion will throw
-      after();
-      throw e;
-    }
-    // will only be hit if we don't throw
-    after();
-  });
-}