@atlaskit/tokens 1.13.0 → 1.13.2

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/tokens
 
+## 1.13.2
+
+### Patch Changes
+
+- [`f29001ccc8c`](https://bitbucket.org/atlassian/atlassian-frontend/commits/f29001ccc8c) - Renamed type "CustomBrandSchema" to "ThemeOptionsSchema" for experimental custom theming API
+
+## 1.13.1
+
+### Patch Changes
+
+- [`74f7af9882b`](https://bitbucket.org/atlassian/atlassian-frontend/commits/74f7af9882b) - [ux] correct fallback color of token color.border.focused to meet contrast requirement
+
 ## 1.13.0
 
 ### Minor Changes

package/dist/cjs/artifacts/themes/atlassian-legacy-light.js

@@ -6,8 +6,8 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::9bf19250d90797c5238589fae51defe5>>
+ * @codegen <<SignedSource::6c33e244168e3fd752767b58505680ca>>
  * @codegenCommand yarn build tokens
  */
-var _default = "\nhtml[data-color-mode=\"light\"][data-theme~=\"light:legacy-light\"],\nhtml[data-color-mode=\"dark\"][data-theme~=\"dark:legacy-light\"] {\n  color-scheme: light;\n  --ds-text: #172B4D;\n  --ds-text-accent-lime: #4C6B1F;\n  --ds-text-accent-lime-bolder: #37471F;\n  --ds-text-accent-red: #DE350B;\n  --ds-text-accent-red-bolder: #BF2600;\n  --ds-text-accent-orange: #F18D13;\n  --ds-text-accent-orange-bolder: #B65C02;\n  --ds-text-accent-yellow: #FF991F;\n  --ds-text-accent-yellow-bolder: #FF8B00;\n  --ds-text-accent-green: #00875A;\n  --ds-text-accent-green-bolder: #006644;\n  --ds-text-accent-teal: #00A3BF;\n  --ds-text-accent-teal-bolder: #008DA6;\n  --ds-text-accent-blue: #0052CC;\n  --ds-text-accent-blue-bolder: #0747A6;\n  --ds-text-accent-purple: #5243AA;\n  --ds-text-accent-purple-bolder: #403294;\n  --ds-text-accent-magenta: #E774BB;\n  --ds-text-accent-magenta-bolder: #DA62AC;\n  --ds-text-accent-gray: #505F79;\n  --ds-text-accent-gray-bolder: #172B4D;\n  --ds-text-disabled: #A5ADBA;\n  --ds-text-inverse: #FFFFFF;\n  --ds-text-selected: #0052CC;\n  --ds-text-brand: #0065FF;\n  --ds-text-danger: #DE350B;\n  --ds-text-warning: #974F0C;\n  --ds-text-warning-inverse: #172B4D;\n  --ds-text-success: #006644;\n  --ds-text-discovery: #403294;\n  --ds-text-information: #0052CC;\n  --ds-text-subtlest: #7A869A;\n  --ds-text-subtle: #42526E;\n  --ds-link: #0052CC;\n  --ds-link-pressed: #0747A6;\n  --ds-icon: #505F79;\n  --ds-icon-accent-lime: #6A9A23;\n  --ds-icon-accent-red: #FF5630;\n  --ds-icon-accent-orange: #D94008;\n  --ds-icon-accent-yellow: #FFAB00;\n  --ds-icon-accent-green: #36B37E;\n  --ds-icon-accent-teal: #00B8D9;\n  --ds-icon-accent-blue: #0065FF;\n  --ds-icon-accent-purple: #6554C0;\n  --ds-icon-accent-magenta: #CD519D;\n  --ds-icon-accent-gray: #5E6C84;\n  --ds-icon-disabled: #8993A4;\n  --ds-icon-inverse: #FFFFFF;\n  --ds-icon-selected: #0052CC;\n  --ds-icon-brand: #0065FF;\n  --ds-icon-danger: #DE350B;\n  --ds-icon-warning: #FFC400;\n  --ds-icon-warning-inverse: #253858;\n  --ds-icon-success: #00875A;\n  --ds-icon-discovery: #8777D9;\n  --ds-icon-information: #0747A6;\n  --ds-icon-subtle: #6B778C;\n  --ds-border: #091e4221;\n  --ds-border-accent-lime: #6A9A23;\n  --ds-border-accent-red: #FF5630;\n  --ds-border-accent-orange: #D94008;\n  --ds-border-accent-yellow: #FFAB00;\n  --ds-border-accent-green: #36B37E;\n  --ds-border-accent-teal: #00B8D9;\n  --ds-border-accent-blue: #0065FF;\n  --ds-border-accent-purple: #6554C0;\n  --ds-border-accent-magenta: #CD519D;\n  --ds-border-accent-gray: #5E6C84;\n  --ds-border-disabled: #FAFBFC;\n  --ds-border-focused: #4C9AFF;\n  --ds-border-input: #FAFBFC;\n  --ds-border-inverse: #FFFFFF;\n  --ds-border-selected: #0052CC;\n  --ds-border-brand: #0052CC;\n  --ds-border-danger: #FF5630;\n  --ds-border-warning: #FFC400;\n  --ds-border-success: #00875A;\n  --ds-border-discovery: #998DD9;\n  --ds-border-information: #0065FF;\n  --ds-border-bold: #344563;\n  --ds-background-accent-lime-subtlest: #EEFBDA;\n  --ds-background-accent-lime-subtler: #D3F1A7;\n  --ds-background-accent-lime-subtle: #94C748;\n  --ds-background-accent-lime-bolder: #5B7F24;\n  --ds-background-accent-red-subtlest: #FF8F73;\n  --ds-background-accent-red-subtler: #FF7452;\n  --ds-background-accent-red-subtle: #DE350B;\n  --ds-background-accent-red-bolder: #DE350B;\n  --ds-background-accent-orange-subtlest: #F18D13;\n  --ds-background-accent-orange-subtler: #B65C02;\n  --ds-background-accent-orange-subtle: #5F3811;\n  --ds-background-accent-orange-bolder: #43290F;\n  --ds-background-accent-yellow-subtlest: #FFE380;\n  --ds-background-accent-yellow-subtler: #FFC400;\n  --ds-background-accent-yellow-subtle: #FF991F;\n  --ds-background-accent-yellow-bolder: #FF991F;\n  --ds-background-accent-green-subtlest: #79F2C0;\n  --ds-background-accent-green-subtler: #57D9A3;\n  --ds-background-accent-green-subtle: #00875A;\n  --ds-background-accent-green-bolder: #00875A;\n  --ds-background-accent-teal-subtlest: #79E2F2;\n  --ds-background-accent-teal-subtler: #00C7E6;\n  --ds-background-accent-teal-subtle: #00A3BF;\n  --ds-background-accent-teal-bolder: #00A3BF;\n  --ds-background-accent-blue-subtlest: #4C9AFF;\n  --ds-background-accent-blue-subtler: #2684FF;\n  --ds-background-accent-blue-subtle: #0052CC;\n  --ds-background-accent-blue-bolder: #0052CC;\n  --ds-background-accent-purple-subtlest: #998DD9;\n  --ds-background-accent-purple-subtler: #8777D9;\n  --ds-background-accent-purple-subtle: #5243AA;\n  --ds-background-accent-purple-bolder: #5243AA;\n  --ds-background-accent-magenta-subtlest: #E774BB;\n  --ds-background-accent-magenta-subtler: #E774BB;\n  --ds-background-accent-magenta-subtle: #E774BB;\n  --ds-background-accent-magenta-bolder: #E774BB;\n  --ds-background-accent-gray-subtlest: #6B778C;\n  --ds-background-accent-gray-subtler: #5E6C84;\n  --ds-background-accent-gray-subtle: #42526E;\n  --ds-background-accent-gray-bolder: #505F79;\n  --ds-background-disabled: #091e4289;\n  --ds-background-input: #FAFBFC;\n  --ds-background-input-hovered: #EBECF0;\n  --ds-background-input-pressed: #FFFFFF;\n  --ds-background-inverse-subtle: #00000029;\n  --ds-background-inverse-subtle-hovered: #0000003D;\n  --ds-background-inverse-subtle-pressed: #00000052;\n  --ds-background-neutral: #DFE1E6;\n  --ds-background-neutral-hovered: #091e4214;\n  --ds-background-neutral-pressed: #B3D4FF;\n  --ds-background-neutral-subtle: transparent;\n  --ds-background-neutral-subtle-hovered: #091e4214;\n  --ds-background-neutral-subtle-pressed: #B3D4FF;\n  --ds-background-neutral-bold: #42526E;\n  --ds-background-neutral-bold-hovered: #505F79;\n  --ds-background-neutral-bold-pressed: #344563;\n  --ds-background-selected: #DEEBFF;\n  --ds-background-selected-hovered: #B3D4FF;\n  --ds-background-selected-pressed: #4C9AFF;\n  --ds-background-selected-bold: #0052CC;\n  --ds-background-selected-bold-hovered: #2684FF;\n  --ds-background-selected-bold-pressed: #0052CC;\n  --ds-background-brand-subtlest: #B3D4FF;\n  --ds-background-brand-subtlest-hovered: #DEEBFF;\n  --ds-background-brand-subtlest-pressed: #4C9AFF;\n  --ds-background-brand-bold: #0052CC;\n  --ds-background-brand-bold-hovered: #0065FF;\n  --ds-background-brand-bold-pressed: #0747A6;\n  --ds-background-brand-boldest: #0747A6;\n  --ds-background-brand-boldest-hovered: #0052CC;\n  --ds-background-brand-boldest-pressed: #0747A6;\n  --ds-background-danger: #FFEBE6;\n  --ds-background-danger-hovered: #FFBDAD;\n  --ds-background-danger-pressed: #FF8F73;\n  --ds-background-danger-bold: #DE350B;\n  --ds-background-danger-bold-hovered: #FF5630;\n  --ds-background-danger-bold-pressed: #BF2600;\n  --ds-background-warning: #FFFAE6;\n  --ds-background-warning-hovered: #FFF0B3;\n  --ds-background-warning-pressed: #FFE380;\n  --ds-background-warning-bold: #FFAB00;\n  --ds-background-warning-bold-hovered: #FFC400;\n  --ds-background-warning-bold-pressed: #FF991F;\n  --ds-background-success: #E3FCEF;\n  --ds-background-success-hovered: #ABF5D1;\n  --ds-background-success-pressed: #79F2C0;\n  --ds-background-success-bold: #00875A;\n  --ds-background-success-bold-hovered: #57D9A3;\n  --ds-background-success-bold-pressed: #00875A;\n  --ds-background-discovery: #EAE6FF;\n  --ds-background-discovery-hovered: #C0B6F2;\n  --ds-background-discovery-pressed: #998DD9;\n  --ds-background-discovery-bold: #5243AA;\n  --ds-background-discovery-bold-hovered: #8777D9;\n  --ds-background-discovery-bold-pressed: #5243AA;\n  --ds-background-information: #DEEBFF;\n  --ds-background-information-hovered: #B3D4FF;\n  --ds-background-information-pressed: #4C9AFF;\n  --ds-background-information-bold: #0052CC;\n  --ds-background-information-bold-hovered: #2684FF;\n  --ds-background-information-bold-pressed: #0052CC;\n  --ds-blanket: #091e4289;\n  --ds-blanket-selected: #388BFF14;\n  --ds-blanket-danger: #EF5C4814;\n  --ds-interaction-hovered: #00000029;\n  --ds-interaction-pressed: #00000052;\n  --ds-skeleton: #F4F5F7;\n  --ds-skeleton-subtle: #091e420a;\n  --ds-chart-categorical-1: #00B8D9;\n  --ds-chart-categorical-1-hovered: #00A3BF;\n  --ds-chart-categorical-2: #5243AA;\n  --ds-chart-categorical-2-hovered: #403294;\n  --ds-chart-categorical-3: #D94008;\n  --ds-chart-categorical-3-hovered: #B65C02;\n  --ds-chart-categorical-4: #943D73;\n  --ds-chart-categorical-4-hovered: #50253F;\n  --ds-chart-categorical-5: #0052CC;\n  --ds-chart-categorical-5-hovered: #0747A6;\n  --ds-chart-categorical-6: #5243AA;\n  --ds-chart-categorical-6-hovered: #403294;\n  --ds-chart-categorical-7: #50253F;\n  --ds-chart-categorical-7-hovered: #341829;\n  --ds-chart-categorical-8: #974F0C;\n  --ds-chart-categorical-8-hovered: #5F3811;\n  --ds-chart-lime-bold: #6A9A23;\n  --ds-chart-lime-bold-hovered: #5B7F24;\n  --ds-chart-lime-bolder: #5B7F24;\n  --ds-chart-lime-bolder-hovered: #4C6B1F;\n  --ds-chart-lime-boldest: #4C6B1F;\n  --ds-chart-lime-boldest-hovered: #37471F;\n  --ds-chart-neutral: #5E6C84;\n  --ds-chart-neutral-hovered: #505F79;\n  --ds-chart-red-bold: #FF5630;\n  --ds-chart-red-bold-hovered: #DE350B;\n  --ds-chart-red-bolder: #DE350B;\n  --ds-chart-red-bolder-hovered: #BF2600;\n  --ds-chart-red-boldest: #BF2600;\n  --ds-chart-red-boldest-hovered: #BF2600;\n  --ds-chart-orange-bold: #D97008;\n  --ds-chart-orange-bold-hovered: #B65C02;\n  --ds-chart-orange-bolder: #B65C02;\n  --ds-chart-orange-bolder-hovered: #974F0C;\n  --ds-chart-orange-boldest: #974F0C;\n  --ds-chart-orange-boldest-hovered: #5F3811;\n  --ds-chart-yellow-bold: #FFAB00;\n  --ds-chart-yellow-bold-hovered: #FF991F;\n  --ds-chart-yellow-bolder: #FF991F;\n  --ds-chart-yellow-bolder-hovered: #FF8B00;\n  --ds-chart-yellow-boldest: #FF8B00;\n  --ds-chart-yellow-boldest-hovered: #FF8B00;\n  --ds-chart-green-bold: #36B37E;\n  --ds-chart-green-bold-hovered: #00875A;\n  --ds-chart-green-bolder: #00875A;\n  --ds-chart-green-bolder-hovered: #006644;\n  --ds-chart-green-boldest: #006644;\n  --ds-chart-green-boldest-hovered: #006644;\n  --ds-chart-teal-bold: #00B8D9;\n  --ds-chart-teal-bold-hovered: #00A3BF;\n  --ds-chart-teal-bolder: #00A3BF;\n  --ds-chart-teal-bolder-hovered: #008DA6;\n  --ds-chart-teal-boldest: #008DA6;\n  --ds-chart-teal-boldest-hovered: #008DA6;\n  --ds-chart-blue-bold: #0065FF;\n  --ds-chart-blue-bold-hovered: #0052CC;\n  --ds-chart-blue-bolder: #0052CC;\n  --ds-chart-blue-bolder-hovered: #0747A6;\n  --ds-chart-blue-boldest: #0747A6;\n  --ds-chart-blue-boldest-hovered: #0747A6;\n  --ds-chart-purple-bold: #6554C0;\n  --ds-chart-purple-bold-hovered: #5243AA;\n  --ds-chart-purple-bolder: #5243AA;\n  --ds-chart-purple-bolder-hovered: #403294;\n  --ds-chart-purple-boldest: #403294;\n  --ds-chart-purple-boldest-hovered: #403294;\n  --ds-chart-magenta-bold: #DA62AC;\n  --ds-chart-magenta-bold-hovered: #CD519D;\n  --ds-chart-magenta-bolder: #CD519D;\n  --ds-chart-magenta-bolder-hovered: #AE4787;\n  --ds-chart-magenta-boldest: #943D73;\n  --ds-chart-magenta-boldest-hovered: #50253F;\n  --ds-chart-gray-bold: #5E6C84;\n  --ds-chart-gray-bold-hovered: #505F79;\n  --ds-chart-gray-bolder: #505F79;\n  --ds-chart-gray-bolder-hovered: #42526E;\n  --ds-chart-gray-boldest: #42526E;\n  --ds-chart-gray-boldest-hovered: #42526E;\n  --ds-chart-brand: #0065FF;\n  --ds-chart-brand-hovered: #0052CC;\n  --ds-chart-danger: #FF5630;\n  --ds-chart-danger-hovered: #DE350B;\n  --ds-chart-danger-bold: #DE350B;\n  --ds-chart-danger-bold-hovered: #BF2600;\n  --ds-chart-warning: #FFAB00;\n  --ds-chart-warning-hovered: #FF991F;\n  --ds-chart-warning-bold: #FF991F;\n  --ds-chart-warning-bold-hovered: #FF8B00;\n  --ds-chart-success: #36B37E;\n  --ds-chart-success-hovered: #00875A;\n  --ds-chart-success-bold: #00875A;\n  --ds-chart-success-bold-hovered: #006644;\n  --ds-chart-discovery: #6554C0;\n  --ds-chart-discovery-hovered: #5243AA;\n  --ds-chart-discovery-bold: #5243AA;\n  --ds-chart-discovery-bold-hovered: #403294;\n  --ds-chart-information: #0065FF;\n  --ds-chart-information-hovered: #0052CC;\n  --ds-chart-information-bold: #0052CC;\n  --ds-chart-information-bold-hovered: #0747A6;\n  --ds-surface: #FFFFFF;\n  --ds-surface-hovered: #FAFBFC;\n  --ds-surface-pressed: #F4F5F7;\n  --ds-surface-overlay: #FFFFFF;\n  --ds-surface-overlay-hovered: #FAFBFC;\n  --ds-surface-overlay-pressed: #F4F5F7;\n  --ds-surface-raised: #FFFFFF;\n  --ds-surface-raised-hovered: #FAFBFC;\n  --ds-surface-raised-pressed: #F4F5F7;\n  --ds-surface-sunken: #F4F5F7;\n  --ds-shadow-overflow: 0px 0px 8px #091e4229, 0px 0px 1px #091e421F;\n  --ds-shadow-overflow-perimeter: #091e421f;\n  --ds-shadow-overflow-spread: #091e4229;\n  --ds-shadow-overlay: 0px 8px 12px #091e4226, 0px 0px 1px #091e424F;\n  --ds-shadow-raised: 0px 1px 1px #091e4240, 0px 0px 1px #091e424F;\n  --ds-opacity-disabled: 0.4;\n  --ds-opacity-loading: 0.2;\n  --ds-UNSAFE-transparent: transparent;\n}\n";
+var _default = "\nhtml[data-color-mode=\"light\"][data-theme~=\"light:legacy-light\"],\nhtml[data-color-mode=\"dark\"][data-theme~=\"dark:legacy-light\"] {\n  color-scheme: light;\n  --ds-text: #172B4D;\n  --ds-text-accent-lime: #4C6B1F;\n  --ds-text-accent-lime-bolder: #37471F;\n  --ds-text-accent-red: #DE350B;\n  --ds-text-accent-red-bolder: #BF2600;\n  --ds-text-accent-orange: #F18D13;\n  --ds-text-accent-orange-bolder: #B65C02;\n  --ds-text-accent-yellow: #FF991F;\n  --ds-text-accent-yellow-bolder: #FF8B00;\n  --ds-text-accent-green: #00875A;\n  --ds-text-accent-green-bolder: #006644;\n  --ds-text-accent-teal: #00A3BF;\n  --ds-text-accent-teal-bolder: #008DA6;\n  --ds-text-accent-blue: #0052CC;\n  --ds-text-accent-blue-bolder: #0747A6;\n  --ds-text-accent-purple: #5243AA;\n  --ds-text-accent-purple-bolder: #403294;\n  --ds-text-accent-magenta: #E774BB;\n  --ds-text-accent-magenta-bolder: #DA62AC;\n  --ds-text-accent-gray: #505F79;\n  --ds-text-accent-gray-bolder: #172B4D;\n  --ds-text-disabled: #A5ADBA;\n  --ds-text-inverse: #FFFFFF;\n  --ds-text-selected: #0052CC;\n  --ds-text-brand: #0065FF;\n  --ds-text-danger: #DE350B;\n  --ds-text-warning: #974F0C;\n  --ds-text-warning-inverse: #172B4D;\n  --ds-text-success: #006644;\n  --ds-text-discovery: #403294;\n  --ds-text-information: #0052CC;\n  --ds-text-subtlest: #7A869A;\n  --ds-text-subtle: #42526E;\n  --ds-link: #0052CC;\n  --ds-link-pressed: #0747A6;\n  --ds-icon: #505F79;\n  --ds-icon-accent-lime: #6A9A23;\n  --ds-icon-accent-red: #FF5630;\n  --ds-icon-accent-orange: #D94008;\n  --ds-icon-accent-yellow: #FFAB00;\n  --ds-icon-accent-green: #36B37E;\n  --ds-icon-accent-teal: #00B8D9;\n  --ds-icon-accent-blue: #0065FF;\n  --ds-icon-accent-purple: #6554C0;\n  --ds-icon-accent-magenta: #CD519D;\n  --ds-icon-accent-gray: #5E6C84;\n  --ds-icon-disabled: #8993A4;\n  --ds-icon-inverse: #FFFFFF;\n  --ds-icon-selected: #0052CC;\n  --ds-icon-brand: #0065FF;\n  --ds-icon-danger: #DE350B;\n  --ds-icon-warning: #FFC400;\n  --ds-icon-warning-inverse: #253858;\n  --ds-icon-success: #00875A;\n  --ds-icon-discovery: #8777D9;\n  --ds-icon-information: #0747A6;\n  --ds-icon-subtle: #6B778C;\n  --ds-border: #091e4221;\n  --ds-border-accent-lime: #6A9A23;\n  --ds-border-accent-red: #FF5630;\n  --ds-border-accent-orange: #D94008;\n  --ds-border-accent-yellow: #FFAB00;\n  --ds-border-accent-green: #36B37E;\n  --ds-border-accent-teal: #00B8D9;\n  --ds-border-accent-blue: #0065FF;\n  --ds-border-accent-purple: #6554C0;\n  --ds-border-accent-magenta: #CD519D;\n  --ds-border-accent-gray: #5E6C84;\n  --ds-border-disabled: #FAFBFC;\n  --ds-border-focused: #2684FF;\n  --ds-border-input: #FAFBFC;\n  --ds-border-inverse: #FFFFFF;\n  --ds-border-selected: #0052CC;\n  --ds-border-brand: #0052CC;\n  --ds-border-danger: #FF5630;\n  --ds-border-warning: #FFC400;\n  --ds-border-success: #00875A;\n  --ds-border-discovery: #998DD9;\n  --ds-border-information: #0065FF;\n  --ds-border-bold: #344563;\n  --ds-background-accent-lime-subtlest: #EEFBDA;\n  --ds-background-accent-lime-subtler: #D3F1A7;\n  --ds-background-accent-lime-subtle: #94C748;\n  --ds-background-accent-lime-bolder: #5B7F24;\n  --ds-background-accent-red-subtlest: #FF8F73;\n  --ds-background-accent-red-subtler: #FF7452;\n  --ds-background-accent-red-subtle: #DE350B;\n  --ds-background-accent-red-bolder: #DE350B;\n  --ds-background-accent-orange-subtlest: #F18D13;\n  --ds-background-accent-orange-subtler: #B65C02;\n  --ds-background-accent-orange-subtle: #5F3811;\n  --ds-background-accent-orange-bolder: #43290F;\n  --ds-background-accent-yellow-subtlest: #FFE380;\n  --ds-background-accent-yellow-subtler: #FFC400;\n  --ds-background-accent-yellow-subtle: #FF991F;\n  --ds-background-accent-yellow-bolder: #FF991F;\n  --ds-background-accent-green-subtlest: #79F2C0;\n  --ds-background-accent-green-subtler: #57D9A3;\n  --ds-background-accent-green-subtle: #00875A;\n  --ds-background-accent-green-bolder: #00875A;\n  --ds-background-accent-teal-subtlest: #79E2F2;\n  --ds-background-accent-teal-subtler: #00C7E6;\n  --ds-background-accent-teal-subtle: #00A3BF;\n  --ds-background-accent-teal-bolder: #00A3BF;\n  --ds-background-accent-blue-subtlest: #4C9AFF;\n  --ds-background-accent-blue-subtler: #2684FF;\n  --ds-background-accent-blue-subtle: #0052CC;\n  --ds-background-accent-blue-bolder: #0052CC;\n  --ds-background-accent-purple-subtlest: #998DD9;\n  --ds-background-accent-purple-subtler: #8777D9;\n  --ds-background-accent-purple-subtle: #5243AA;\n  --ds-background-accent-purple-bolder: #5243AA;\n  --ds-background-accent-magenta-subtlest: #E774BB;\n  --ds-background-accent-magenta-subtler: #E774BB;\n  --ds-background-accent-magenta-subtle: #E774BB;\n  --ds-background-accent-magenta-bolder: #E774BB;\n  --ds-background-accent-gray-subtlest: #6B778C;\n  --ds-background-accent-gray-subtler: #5E6C84;\n  --ds-background-accent-gray-subtle: #42526E;\n  --ds-background-accent-gray-bolder: #505F79;\n  --ds-background-disabled: #091e4289;\n  --ds-background-input: #FAFBFC;\n  --ds-background-input-hovered: #EBECF0;\n  --ds-background-input-pressed: #FFFFFF;\n  --ds-background-inverse-subtle: #00000029;\n  --ds-background-inverse-subtle-hovered: #0000003D;\n  --ds-background-inverse-subtle-pressed: #00000052;\n  --ds-background-neutral: #DFE1E6;\n  --ds-background-neutral-hovered: #091e4214;\n  --ds-background-neutral-pressed: #B3D4FF;\n  --ds-background-neutral-subtle: transparent;\n  --ds-background-neutral-subtle-hovered: #091e4214;\n  --ds-background-neutral-subtle-pressed: #B3D4FF;\n  --ds-background-neutral-bold: #42526E;\n  --ds-background-neutral-bold-hovered: #505F79;\n  --ds-background-neutral-bold-pressed: #344563;\n  --ds-background-selected: #DEEBFF;\n  --ds-background-selected-hovered: #B3D4FF;\n  --ds-background-selected-pressed: #4C9AFF;\n  --ds-background-selected-bold: #0052CC;\n  --ds-background-selected-bold-hovered: #2684FF;\n  --ds-background-selected-bold-pressed: #0052CC;\n  --ds-background-brand-subtlest: #B3D4FF;\n  --ds-background-brand-subtlest-hovered: #DEEBFF;\n  --ds-background-brand-subtlest-pressed: #4C9AFF;\n  --ds-background-brand-bold: #0052CC;\n  --ds-background-brand-bold-hovered: #0065FF;\n  --ds-background-brand-bold-pressed: #0747A6;\n  --ds-background-brand-boldest: #0747A6;\n  --ds-background-brand-boldest-hovered: #0052CC;\n  --ds-background-brand-boldest-pressed: #0747A6;\n  --ds-background-danger: #FFEBE6;\n  --ds-background-danger-hovered: #FFBDAD;\n  --ds-background-danger-pressed: #FF8F73;\n  --ds-background-danger-bold: #DE350B;\n  --ds-background-danger-bold-hovered: #FF5630;\n  --ds-background-danger-bold-pressed: #BF2600;\n  --ds-background-warning: #FFFAE6;\n  --ds-background-warning-hovered: #FFF0B3;\n  --ds-background-warning-pressed: #FFE380;\n  --ds-background-warning-bold: #FFAB00;\n  --ds-background-warning-bold-hovered: #FFC400;\n  --ds-background-warning-bold-pressed: #FF991F;\n  --ds-background-success: #E3FCEF;\n  --ds-background-success-hovered: #ABF5D1;\n  --ds-background-success-pressed: #79F2C0;\n  --ds-background-success-bold: #00875A;\n  --ds-background-success-bold-hovered: #57D9A3;\n  --ds-background-success-bold-pressed: #00875A;\n  --ds-background-discovery: #EAE6FF;\n  --ds-background-discovery-hovered: #C0B6F2;\n  --ds-background-discovery-pressed: #998DD9;\n  --ds-background-discovery-bold: #5243AA;\n  --ds-background-discovery-bold-hovered: #8777D9;\n  --ds-background-discovery-bold-pressed: #5243AA;\n  --ds-background-information: #DEEBFF;\n  --ds-background-information-hovered: #B3D4FF;\n  --ds-background-information-pressed: #4C9AFF;\n  --ds-background-information-bold: #0052CC;\n  --ds-background-information-bold-hovered: #2684FF;\n  --ds-background-information-bold-pressed: #0052CC;\n  --ds-blanket: #091e4289;\n  --ds-blanket-selected: #388BFF14;\n  --ds-blanket-danger: #EF5C4814;\n  --ds-interaction-hovered: #00000029;\n  --ds-interaction-pressed: #00000052;\n  --ds-skeleton: #F4F5F7;\n  --ds-skeleton-subtle: #091e420a;\n  --ds-chart-categorical-1: #00B8D9;\n  --ds-chart-categorical-1-hovered: #00A3BF;\n  --ds-chart-categorical-2: #5243AA;\n  --ds-chart-categorical-2-hovered: #403294;\n  --ds-chart-categorical-3: #D94008;\n  --ds-chart-categorical-3-hovered: #B65C02;\n  --ds-chart-categorical-4: #943D73;\n  --ds-chart-categorical-4-hovered: #50253F;\n  --ds-chart-categorical-5: #0052CC;\n  --ds-chart-categorical-5-hovered: #0747A6;\n  --ds-chart-categorical-6: #5243AA;\n  --ds-chart-categorical-6-hovered: #403294;\n  --ds-chart-categorical-7: #50253F;\n  --ds-chart-categorical-7-hovered: #341829;\n  --ds-chart-categorical-8: #974F0C;\n  --ds-chart-categorical-8-hovered: #5F3811;\n  --ds-chart-lime-bold: #6A9A23;\n  --ds-chart-lime-bold-hovered: #5B7F24;\n  --ds-chart-lime-bolder: #5B7F24;\n  --ds-chart-lime-bolder-hovered: #4C6B1F;\n  --ds-chart-lime-boldest: #4C6B1F;\n  --ds-chart-lime-boldest-hovered: #37471F;\n  --ds-chart-neutral: #5E6C84;\n  --ds-chart-neutral-hovered: #505F79;\n  --ds-chart-red-bold: #FF5630;\n  --ds-chart-red-bold-hovered: #DE350B;\n  --ds-chart-red-bolder: #DE350B;\n  --ds-chart-red-bolder-hovered: #BF2600;\n  --ds-chart-red-boldest: #BF2600;\n  --ds-chart-red-boldest-hovered: #BF2600;\n  --ds-chart-orange-bold: #D97008;\n  --ds-chart-orange-bold-hovered: #B65C02;\n  --ds-chart-orange-bolder: #B65C02;\n  --ds-chart-orange-bolder-hovered: #974F0C;\n  --ds-chart-orange-boldest: #974F0C;\n  --ds-chart-orange-boldest-hovered: #5F3811;\n  --ds-chart-yellow-bold: #FFAB00;\n  --ds-chart-yellow-bold-hovered: #FF991F;\n  --ds-chart-yellow-bolder: #FF991F;\n  --ds-chart-yellow-bolder-hovered: #FF8B00;\n  --ds-chart-yellow-boldest: #FF8B00;\n  --ds-chart-yellow-boldest-hovered: #FF8B00;\n  --ds-chart-green-bold: #36B37E;\n  --ds-chart-green-bold-hovered: #00875A;\n  --ds-chart-green-bolder: #00875A;\n  --ds-chart-green-bolder-hovered: #006644;\n  --ds-chart-green-boldest: #006644;\n  --ds-chart-green-boldest-hovered: #006644;\n  --ds-chart-teal-bold: #00B8D9;\n  --ds-chart-teal-bold-hovered: #00A3BF;\n  --ds-chart-teal-bolder: #00A3BF;\n  --ds-chart-teal-bolder-hovered: #008DA6;\n  --ds-chart-teal-boldest: #008DA6;\n  --ds-chart-teal-boldest-hovered: #008DA6;\n  --ds-chart-blue-bold: #0065FF;\n  --ds-chart-blue-bold-hovered: #0052CC;\n  --ds-chart-blue-bolder: #0052CC;\n  --ds-chart-blue-bolder-hovered: #0747A6;\n  --ds-chart-blue-boldest: #0747A6;\n  --ds-chart-blue-boldest-hovered: #0747A6;\n  --ds-chart-purple-bold: #6554C0;\n  --ds-chart-purple-bold-hovered: #5243AA;\n  --ds-chart-purple-bolder: #5243AA;\n  --ds-chart-purple-bolder-hovered: #403294;\n  --ds-chart-purple-boldest: #403294;\n  --ds-chart-purple-boldest-hovered: #403294;\n  --ds-chart-magenta-bold: #DA62AC;\n  --ds-chart-magenta-bold-hovered: #CD519D;\n  --ds-chart-magenta-bolder: #CD519D;\n  --ds-chart-magenta-bolder-hovered: #AE4787;\n  --ds-chart-magenta-boldest: #943D73;\n  --ds-chart-magenta-boldest-hovered: #50253F;\n  --ds-chart-gray-bold: #5E6C84;\n  --ds-chart-gray-bold-hovered: #505F79;\n  --ds-chart-gray-bolder: #505F79;\n  --ds-chart-gray-bolder-hovered: #42526E;\n  --ds-chart-gray-boldest: #42526E;\n  --ds-chart-gray-boldest-hovered: #42526E;\n  --ds-chart-brand: #0065FF;\n  --ds-chart-brand-hovered: #0052CC;\n  --ds-chart-danger: #FF5630;\n  --ds-chart-danger-hovered: #DE350B;\n  --ds-chart-danger-bold: #DE350B;\n  --ds-chart-danger-bold-hovered: #BF2600;\n  --ds-chart-warning: #FFAB00;\n  --ds-chart-warning-hovered: #FF991F;\n  --ds-chart-warning-bold: #FF991F;\n  --ds-chart-warning-bold-hovered: #FF8B00;\n  --ds-chart-success: #36B37E;\n  --ds-chart-success-hovered: #00875A;\n  --ds-chart-success-bold: #00875A;\n  --ds-chart-success-bold-hovered: #006644;\n  --ds-chart-discovery: #6554C0;\n  --ds-chart-discovery-hovered: #5243AA;\n  --ds-chart-discovery-bold: #5243AA;\n  --ds-chart-discovery-bold-hovered: #403294;\n  --ds-chart-information: #0065FF;\n  --ds-chart-information-hovered: #0052CC;\n  --ds-chart-information-bold: #0052CC;\n  --ds-chart-information-bold-hovered: #0747A6;\n  --ds-surface: #FFFFFF;\n  --ds-surface-hovered: #FAFBFC;\n  --ds-surface-pressed: #F4F5F7;\n  --ds-surface-overlay: #FFFFFF;\n  --ds-surface-overlay-hovered: #FAFBFC;\n  --ds-surface-overlay-pressed: #F4F5F7;\n  --ds-surface-raised: #FFFFFF;\n  --ds-surface-raised-hovered: #FAFBFC;\n  --ds-surface-raised-pressed: #F4F5F7;\n  --ds-surface-sunken: #F4F5F7;\n  --ds-shadow-overflow: 0px 0px 8px #091e4229, 0px 0px 1px #091e421F;\n  --ds-shadow-overflow-perimeter: #091e421f;\n  --ds-shadow-overflow-spread: #091e4229;\n  --ds-shadow-overlay: 0px 8px 12px #091e4226, 0px 0px 1px #091e424F;\n  --ds-shadow-raised: 0px 1px 1px #091e4240, 0px 0px 1px #091e424F;\n  --ds-opacity-disabled: 0.4;\n  --ds-opacity-loading: 0.2;\n  --ds-UNSAFE-transparent: transparent;\n}\n";
 exports.default = _default;

package/dist/cjs/artifacts/tokens-raw/atlassian-legacy-light.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::8b7aab21b157bced2314e03774c8445e>>
+ * @codegen <<SignedSource::309519b3d309ba66f31d019788cc5ef0>>
  * @codegenCommand yarn build tokens
  */
 var tokens = [{
@@ -1534,7 +1534,7 @@ var tokens = [{
     "introduced": "0.6.0",
     "description": "Use for focus rings of elements in a focus state."
   },
-  "value": "#4C9AFF",
+  "value": "#2684FF",
   "filePath": "src/tokens/atlassian-legacy-light/color/border.tsx",
   "isSource": true,
   "original": {
@@ -1544,7 +1544,7 @@ var tokens = [{
       "introduced": "0.6.0",
       "description": "Use for focus rings of elements in a focus state."
     },
-    "value": "B100"
+    "value": "B200"
   },
   "name": "color.border.focused",
   "path": ["color", "border", "focused"],

package/dist/cjs/custom-theme.js

@@ -10,12 +10,12 @@ exports.loadAndAppendCustomThemeCss = loadAndAppendCustomThemeCss;
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 var _constants = require("./constants");
-var _setGlobalTheme = require("./set-global-theme");
+var _themeConfig = require("./theme-config");
 var _customThemeLoadingUtils = require("./utils/custom-theme-loading-utils");
 var _generateCustomColorRamp = require("./utils/generate-custom-color-ramp");
 var _hash = require("./utils/hash");
 var CUSTOM_STYLE_ELEMENTS_SIZE_THRESHOLD = 10;
-exports.CUSTOM_STYLE_ELEMENTS_SIZE_THRESHOLD = CUSTOM_STYLE_ELEMENTS_SIZE_THRESHOLD;
+
 /**
  *
  * @param themeSchema The schema of available themes
@@ -32,6 +32,7 @@ exports.CUSTOM_STYLE_ELEMENTS_SIZE_THRESHOLD = CUSTOM_STYLE_ELEMENTS_SIZE_THRESH
  * @returns A Promise of an object array, containing theme IDs, data-attributes to attach to the theme, and the theme CSS.
  * If an error is encountered while loading themes, the themes array will be empty.
  */
+exports.CUSTOM_STYLE_ELEMENTS_SIZE_THRESHOLD = CUSTOM_STYLE_ELEMENTS_SIZE_THRESHOLD;
 function getCustomThemeStyles(_x) {
   return _getCustomThemeStyles.apply(this, arguments);
 }
@@ -43,7 +44,7 @@ function _getCustomThemeStyles() {
       while (1) switch (_context.prev = _context.next) {
         case 0:
           brandColor = themeState === null || themeState === void 0 ? void 0 : (_themeState$UNSAFE_th = themeState.UNSAFE_themeOptions) === null || _themeState$UNSAFE_th === void 0 ? void 0 : _themeState$UNSAFE_th.brandColor;
-          mode = (themeState === null || themeState === void 0 ? void 0 : themeState.colorMode) || _setGlobalTheme.themeStateDefaults['colorMode'];
+          mode = (themeState === null || themeState === void 0 ? void 0 : themeState.colorMode) || _themeConfig.themeStateDefaults['colorMode'];
           optionString = JSON.stringify(themeState === null || themeState === void 0 ? void 0 : themeState.UNSAFE_themeOptions);
           uniqueId = (0, _hash.hash)(optionString);
           themeRamp = (0, _generateCustomColorRamp.generateColors)(brandColor); // outputs object to generate to CSS from
@@ -85,20 +86,23 @@ function loadAndAppendCustomThemeCss(_x2) {
 }
 function _loadAndAppendCustomThemeCss() {
   _loadAndAppendCustomThemeCss = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2(themeState) {
+    var themes;
     return _regenerator.default.wrap(function _callee2$(_context2) {
       while (1) switch (_context2.prev = _context2.next) {
         case 0:
-          getCustomThemeStyles(themeState).then(function (themes) {
-            (0, _customThemeLoadingUtils.limitSizeOfCustomStyleElements)(CUSTOM_STYLE_ELEMENTS_SIZE_THRESHOLD);
-            themes.map(function (theme) {
-              var styleTag = document.createElement('style');
-              document.head.appendChild(styleTag);
-              styleTag.dataset.theme = theme.attrs['data-theme'];
-              styleTag.dataset.customTheme = theme.attrs['data-custom-theme'];
-              styleTag.textContent = theme.css;
-            });
+          _context2.next = 2;
+          return getCustomThemeStyles(themeState);
+        case 2:
+          themes = _context2.sent;
+          (0, _customThemeLoadingUtils.limitSizeOfCustomStyleElements)(CUSTOM_STYLE_ELEMENTS_SIZE_THRESHOLD);
+          themes.map(function (theme) {
+            var styleTag = document.createElement('style');
+            document.head.appendChild(styleTag);
+            styleTag.dataset.theme = theme.attrs['data-theme'];
+            styleTag.dataset.customTheme = theme.attrs['data-custom-theme'];
+            styleTag.textContent = theme.css;
           });
-        case 1:
+        case 5:
         case "end":
           return _context2.stop();
       }

package/dist/cjs/get-global-theme.js

@@ -4,11 +4,11 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getGlobalTheme = void 0;
+exports.default = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _constants = require("./constants");
 var _themeConfig = require("./theme-config");
-var _themeStateTransformer = require("./utils/theme-state-transformer");
+var _themeStateTransformer = require("./theme-state-transformer");
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var isThemeColorMode = function isThemeColorMode(colorMode) {
@@ -27,4 +27,5 @@ var getGlobalTheme = function getGlobalTheme() {
     colorMode: colorMode
   });
 };
-exports.getGlobalTheme = getGlobalTheme;
+var _default = getGlobalTheme;
+exports.default = _default;

package/dist/cjs/get-ssr-auto-script.js

@@ -0,0 +1,21 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _constants = require("./constants");
+var _themeLoading = require("./utils/theme-loading");
+/**
+ * Provides a script that, when executed before paint, sets the `data-color-mode` attribute based on the current system theme,
+ * to enable SSR support for automatic theme switching, avoid a flash of un-themed content on first paint.
+ *
+ * @param {string} colorMode Determines which color theme is applied. If set to `auto`, the theme applied will be determined by the OS setting.
+ *
+ * @returns {string} A string to be added to the innerHTML of a script tag in the document head
+ */
+var getSSRAutoScript = function getSSRAutoScript(colorMode) {
+  return colorMode === 'auto' ? "(\n  () => {\n    try {\n      const mql = window.matchMedia('".concat(_themeLoading.darkModeMediaQuery, "');\n      const colorMode = mql.matches ? 'dark' : 'light';\n      document.documentElement.setAttribute('").concat(_constants.COLOR_MODE_ATTRIBUTE, "', colorMode);\n    } catch (e) {}\n  }\n)()") : undefined;
+};
+var _default = getSSRAutoScript;
+exports.default = _default;

package/dist/cjs/get-theme-html-attrs.js

@@ -0,0 +1,76 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _constants = require("./constants");
+var _themeConfig = require("./theme-config");
+var _themeStateTransformer = require("./theme-state-transformer");
+var _colorUtils = require("./utils/color-utils");
+var _hash = require("./utils/hash");
+var defaultColorMode = 'light';
+
+/**
+ * Server-side rendering utility. Generates the valid HTML attributes for a given theme.
+ * Note: this utility does not handle automatic theme switching.
+ *
+ * @param {Object<string, string>} themeOptions - Theme options object
+ * @param {string} themeState.colorMode Determines which color theme is applied. If set to `auto`, the theme applied will be determined by the OS setting.
+ * @param {string} themeState.dark The color theme to be applied when the color mode resolves to 'dark'.
+ * @param {string} themeState.light The color theme to be applied when the color mode resolves to 'light'.
+ * @param {string} themeState.spacing The spacing theme to be applied.
+ * @param {string} themeState.typography The typography theme to be applied.
+ * @param {Object} themeState.UNSAFE_themeOptions The custom branding options to be used for custom theme generation
+ *
+ * @returns {Object} Object of HTML attributes to be applied to the document root
+ */
+var getThemeHtmlAttrs = function getThemeHtmlAttrs() {
+  var _result;
+  var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+    _ref$colorMode = _ref.colorMode,
+    colorMode = _ref$colorMode === void 0 ? _themeConfig.themeStateDefaults['colorMode'] : _ref$colorMode,
+    _ref$dark = _ref.dark,
+    dark = _ref$dark === void 0 ? _themeConfig.themeStateDefaults['dark'] : _ref$dark,
+    _ref$light = _ref.light,
+    light = _ref$light === void 0 ? _themeConfig.themeStateDefaults['light'] : _ref$light,
+    _ref$shape = _ref.shape,
+    shape = _ref$shape === void 0 ? _themeConfig.themeStateDefaults['shape'] : _ref$shape,
+    _ref$spacing = _ref.spacing,
+    spacing = _ref$spacing === void 0 ? _themeConfig.themeStateDefaults['spacing'] : _ref$spacing,
+    _ref$typography = _ref.typography,
+    typography = _ref$typography === void 0 ? _themeConfig.themeStateDefaults['typography'] : _ref$typography,
+    _ref$UNSAFE_themeOpti = _ref.UNSAFE_themeOptions,
+    UNSAFE_themeOptions = _ref$UNSAFE_themeOpti === void 0 ? _themeConfig.themeStateDefaults['UNSAFE_themeOptions'] : _ref$UNSAFE_themeOpti;
+  var themePreferences = {
+    dark: dark,
+    light: light,
+    shape: shape,
+    spacing: spacing,
+    typography: typography
+  };
+
+  // Load spacing by default, currently behind a feature flag
+  if ((0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.space-and-shape-tokens_q5me6')) {
+    themePreferences = {
+      dark: dark,
+      light: light,
+      shape: shape,
+      spacing: 'spacing',
+      typography: typography
+    };
+  }
+  var themeAttribute = (0, _themeStateTransformer.themeObjectToString)(themePreferences);
+  var result = (_result = {}, (0, _defineProperty2.default)(_result, _constants.THEME_DATA_ATTRIBUTE, themeAttribute), (0, _defineProperty2.default)(_result, _constants.COLOR_MODE_ATTRIBUTE, colorMode === 'auto' ? defaultColorMode : colorMode), _result);
+  if (UNSAFE_themeOptions && (0, _colorUtils.isValidBrandHex)(UNSAFE_themeOptions.brandColor)) {
+    var optionString = JSON.stringify(UNSAFE_themeOptions);
+    var uniqueId = (0, _hash.hash)(optionString);
+    result[_constants.CUSTOM_THEME_ATTRIBUTE] = uniqueId;
+  }
+  return result;
+};
+var _default = getThemeHtmlAttrs;
+exports.default = _default;

package/dist/cjs/get-theme-styles.js

@@ -0,0 +1,139 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _themeConfig = require("./theme-config");
+var _colorUtils = require("./utils/color-utils");
+var _getThemePreferences = require("./utils/get-theme-preferences");
+var _themeLoading = require("./utils/theme-loading");
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+/**
+ * Takes an object containing theme preferences, and returns an array of objects for use in applying styles to the document head.
+ * Only supplies the color themes necessary for initial render, based on the current themeState. I.e. if in light mode, dark mode themes are not returned.
+ *
+ * @param {Object<string, string>} themeState The themes and color mode that should be applied.
+ * @param {string} themeState.colorMode Determines which color theme is applied. If set to `auto`, the theme applied will be determined by the OS setting.
+ * @param {string} themeState.dark The color theme to be applied when the color mode resolves to 'dark'.
+ * @param {string} themeState.light The color theme to be applied when the color mode resolves to 'light'.
+ * @param {string} themeState.shape The shape theme to be applied.
+ * @param {string} themeState.spacing The spacing theme to be applied.
+ * @param {string} themeState.typography The typography theme to be applied.
+ * @param {Object} themeState.UNSAFE_themeOptions The custom branding options to be used for custom theme generation
+ *
+ * @returns A Promise of an object array, containing theme IDs, data-attributes to attach to the theme, and the theme CSS.
+ * If an error is encountered while loading themes, the themes array will be empty.
+ */
+var getThemeStyles = /*#__PURE__*/function () {
+  var _ref = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee3(preferences) {
+    var themePreferences, results;
+    return _regenerator.default.wrap(function _callee3$(_context3) {
+      while (1) switch (_context3.prev = _context3.next) {
+        case 0:
+          if (preferences === 'all') {
+            themePreferences = _themeConfig.themeIdsWithOverrides;
+          } else {
+            themePreferences = (0, _getThemePreferences.getThemePreferences)({
+              colorMode: (preferences === null || preferences === void 0 ? void 0 : preferences.colorMode) || _themeConfig.themeStateDefaults['colorMode'],
+              dark: (preferences === null || preferences === void 0 ? void 0 : preferences.dark) || _themeConfig.themeStateDefaults['dark'],
+              light: (preferences === null || preferences === void 0 ? void 0 : preferences.light) || _themeConfig.themeStateDefaults['light'],
+              shape: (preferences === null || preferences === void 0 ? void 0 : preferences.shape) || _themeConfig.themeStateDefaults['shape'],
+              spacing: (preferences === null || preferences === void 0 ? void 0 : preferences.spacing) || _themeConfig.themeStateDefaults['spacing'],
+              typography: (preferences === null || preferences === void 0 ? void 0 : preferences.typography) || _themeConfig.themeStateDefaults['typography']
+            });
+          }
+          _context3.next = 3;
+          return Promise.all([].concat((0, _toConsumableArray2.default)(themePreferences.map( /*#__PURE__*/function () {
+            var _ref2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(themeId) {
+              var css;
+              return _regenerator.default.wrap(function _callee$(_context) {
+                while (1) switch (_context.prev = _context.next) {
+                  case 0:
+                    _context.prev = 0;
+                    _context.next = 3;
+                    return (0, _themeLoading.loadThemeCss)(themeId);
+                  case 3:
+                    css = _context.sent;
+                    return _context.abrupt("return", {
+                      id: themeId,
+                      attrs: {
+                        'data-theme': themeId
+                      },
+                      css: css
+                    });
+                  case 7:
+                    _context.prev = 7;
+                    _context.t0 = _context["catch"](0);
+                    return _context.abrupt("return", undefined);
+                  case 10:
+                  case "end":
+                    return _context.stop();
+                }
+              }, _callee, null, [[0, 7]]);
+            }));
+            return function (_x2) {
+              return _ref2.apply(this, arguments);
+            };
+          }())), [
+          // Add custom themes if they're present
+          (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2() {
+            var _preferences$UNSAFE_t;
+            var _yield$import, getCustomThemeStyles, customThemeStyles;
+            return _regenerator.default.wrap(function _callee2$(_context2) {
+              while (1) switch (_context2.prev = _context2.next) {
+                case 0:
+                  if (!(preferences !== 'all' && preferences !== null && preferences !== void 0 && preferences.UNSAFE_themeOptions && (0, _colorUtils.isValidBrandHex)(preferences === null || preferences === void 0 ? void 0 : (_preferences$UNSAFE_t = preferences.UNSAFE_themeOptions) === null || _preferences$UNSAFE_t === void 0 ? void 0 : _preferences$UNSAFE_t.brandColor))) {
+                    _context2.next = 15;
+                    break;
+                  }
+                  _context2.prev = 1;
+                  _context2.next = 4;
+                  return Promise.resolve().then(function () {
+                    return _interopRequireWildcard(require( /* webpackChunkName: "@atlaskit-internal_atlassian-custom-theme" */
+                    './custom-theme'));
+                  });
+                case 4:
+                  _yield$import = _context2.sent;
+                  getCustomThemeStyles = _yield$import.getCustomThemeStyles;
+                  _context2.next = 8;
+                  return getCustomThemeStyles({
+                    colorMode: (preferences === null || preferences === void 0 ? void 0 : preferences.colorMode) || _themeConfig.themeStateDefaults['colorMode'],
+                    UNSAFE_themeOptions: preferences === null || preferences === void 0 ? void 0 : preferences.UNSAFE_themeOptions
+                  });
+                case 8:
+                  customThemeStyles = _context2.sent;
+                  return _context2.abrupt("return", customThemeStyles);
+                case 12:
+                  _context2.prev = 12;
+                  _context2.t0 = _context2["catch"](1);
+                  return _context2.abrupt("return", undefined);
+                case 15:
+                case "end":
+                  return _context2.stop();
+              }
+            }, _callee2, null, [[1, 12]]);
+          }))()]));
+        case 3:
+          results = _context3.sent;
+          return _context3.abrupt("return", results.flat().filter(function (theme) {
+            return theme !== undefined;
+          }));
+        case 5:
+        case "end":
+          return _context3.stop();
+      }
+    }, _callee3);
+  }));
+  return function getThemeStyles(_x) {
+    return _ref.apply(this, arguments);
+  };
+}();
+var _default = getThemeStyles;
+exports.default = _default;

package/dist/cjs/get-token-value.js

@@ -8,7 +8,7 @@ exports.default = void 0;
 var _warnOnce = _interopRequireDefault(require("@atlaskit/ds-lib/warn-once"));
 var _tokenNames = _interopRequireDefault(require("./artifacts/token-names"));
 var name = "@atlaskit/tokens";
-var version = "0.0.0-development";
+var version = "1.13.2";
 /**
  * Takes a dot-separated token name and and an optional fallback, and returns the current computed CSS value for the
  * resulting CSS Custom Property.

package/dist/cjs/get-token.js

@@ -9,7 +9,7 @@ var _warnOnce = _interopRequireDefault(require("@atlaskit/ds-lib/warn-once"));
 var _tokenNames = _interopRequireDefault(require("./artifacts/token-names"));
 var _constants = require("./constants");
 var name = "@atlaskit/tokens";
-var version = "0.0.0-development";
+var version = "1.13.2";
 /**
  * Takes a dot-separated token name and an optional fallback, and returns the CSS custom property for the corresponding token.
  * This should be used to implement design decisions throughout your application.

package/dist/cjs/index.js

@@ -1,38 +1,37 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 Object.defineProperty(exports, "ThemeMutationObserver", {
   enumerable: true,
   get: function get() {
-    return _themeMutationObserver.ThemeMutationObserver;
+    return _themeMutationObserver.default;
   }
 });
 Object.defineProperty(exports, "getGlobalTheme", {
   enumerable: true,
   get: function get() {
-    return _getGlobalTheme.getGlobalTheme;
+    return _getGlobalTheme.default;
   }
 });
 Object.defineProperty(exports, "getSSRAutoScript", {
   enumerable: true,
   get: function get() {
-    return _setGlobalTheme.getSSRAutoScript;
+    return _getSsrAutoScript.default;
   }
 });
 Object.defineProperty(exports, "getThemeHtmlAttrs", {
   enumerable: true,
   get: function get() {
-    return _setGlobalTheme.getThemeHtmlAttrs;
+    return _getThemeHtmlAttrs.default;
   }
 });
 Object.defineProperty(exports, "getThemeStyles", {
   enumerable: true,
   get: function get() {
-    return _setGlobalTheme.getThemeStyles;
+    return _getThemeStyles.default;
   }
 });
 Object.defineProperty(exports, "getTokenValue", {
@@ -74,16 +73,17 @@ Object.defineProperty(exports, "token", {
 Object.defineProperty(exports, "useThemeObserver", {
   enumerable: true,
   get: function get() {
-    return _useThemeObserver.useThemeObserver;
+    return _useThemeObserver.default;
   }
 });
+var _themeConfig = _interopRequireDefault(require("./theme-config"));
 var _getToken = _interopRequireDefault(require("./get-token"));
 var _getTokenValue = _interopRequireDefault(require("./get-token-value"));
-var _setGlobalTheme = _interopRequireWildcard(require("./set-global-theme"));
-var _themeConfig = _interopRequireDefault(require("./theme-config"));
-var _useThemeObserver = require("./use-theme-observer");
-var _themeMutationObserver = require("./theme-mutation-observer");
-var _getGlobalTheme = require("./get-global-theme");
-var _themeStateTransformer = require("./utils/theme-state-transformer");
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+var _setGlobalTheme = _interopRequireDefault(require("./set-global-theme"));
+var _getThemeStyles = _interopRequireDefault(require("./get-theme-styles"));
+var _getThemeHtmlAttrs = _interopRequireDefault(require("./get-theme-html-attrs"));
+var _getSsrAutoScript = _interopRequireDefault(require("./get-ssr-auto-script"));
+var _useThemeObserver = _interopRequireDefault(require("./use-theme-observer"));
+var _themeMutationObserver = _interopRequireDefault(require("./theme-mutation-observer"));
+var _getGlobalTheme = _interopRequireDefault(require("./get-global-theme"));
+var _themeStateTransformer = require("./theme-state-transformer");