@atlaskit/tokens 1.13.0 → 1.13.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (96) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/dist/cjs/artifacts/themes/atlassian-legacy-light.js +2 -2
  3. package/dist/cjs/artifacts/tokens-raw/atlassian-legacy-light.js +3 -3
  4. package/dist/cjs/custom-theme.js +17 -13
  5. package/dist/cjs/get-global-theme.js +4 -3
  6. package/dist/cjs/get-ssr-auto-script.js +21 -0
  7. package/dist/cjs/get-theme-html-attrs.js +76 -0
  8. package/dist/cjs/get-theme-styles.js +139 -0
  9. package/dist/cjs/get-token-value.js +1 -1
  10. package/dist/cjs/get-token.js +1 -1
  11. package/dist/cjs/index.js +15 -15
  12. package/dist/cjs/set-global-theme.js +9 -242
  13. package/dist/cjs/theme-config.js +23 -1
  14. package/dist/cjs/theme-mutation-observer.js +4 -4
  15. package/dist/cjs/{utils/theme-state-transformer.js → theme-state-transformer.js} +1 -1
  16. package/dist/cjs/tokens/atlassian-legacy-light/color/border.js +1 -1
  17. package/dist/cjs/use-theme-observer.js +7 -6
  18. package/dist/cjs/utils/get-theme-preferences.js +35 -0
  19. package/dist/cjs/utils/theme-loading.js +4 -2
  20. package/dist/cjs/version.json +1 -1
  21. package/dist/es2019/artifacts/themes/atlassian-legacy-light.js +2 -2
  22. package/dist/es2019/artifacts/tokens-raw/atlassian-legacy-light.js +3 -3
  23. package/dist/es2019/custom-theme.js +10 -10
  24. package/dist/es2019/get-global-theme.js +4 -3
  25. package/dist/es2019/get-ssr-auto-script.js +23 -0
  26. package/dist/es2019/get-theme-html-attrs.js +62 -0
  27. package/dist/es2019/get-theme-styles.js +72 -0
  28. package/dist/es2019/get-token-value.js +1 -1
  29. package/dist/es2019/get-token.js +1 -1
  30. package/dist/es2019/index.js +9 -6
  31. package/dist/es2019/set-global-theme.js +5 -185
  32. package/dist/es2019/theme-config.js +21 -0
  33. package/dist/es2019/theme-mutation-observer.js +2 -2
  34. package/dist/es2019/{utils/theme-state-transformer.js → theme-state-transformer.js} +1 -1
  35. package/dist/es2019/tokens/atlassian-legacy-light/color/border.js +1 -1
  36. package/dist/es2019/use-theme-observer.js +5 -4
  37. package/dist/es2019/utils/get-theme-preferences.js +28 -0
  38. package/dist/es2019/utils/theme-loading.js +2 -1
  39. package/dist/es2019/version.json +1 -1
  40. package/dist/esm/artifacts/themes/atlassian-legacy-light.js +2 -2
  41. package/dist/esm/artifacts/tokens-raw/atlassian-legacy-light.js +3 -3
  42. package/dist/esm/custom-theme.js +15 -11
  43. package/dist/esm/get-global-theme.js +4 -3
  44. package/dist/esm/get-ssr-auto-script.js +15 -0
  45. package/dist/esm/get-theme-html-attrs.js +68 -0
  46. package/dist/esm/get-theme-styles.js +126 -0
  47. package/dist/esm/get-token-value.js +1 -1
  48. package/dist/esm/get-token.js +1 -1
  49. package/dist/esm/index.js +9 -6
  50. package/dist/esm/set-global-theme.js +6 -233
  51. package/dist/esm/theme-config.js +21 -0
  52. package/dist/esm/theme-mutation-observer.js +4 -3
  53. package/dist/esm/{utils/theme-state-transformer.js → theme-state-transformer.js} +1 -1
  54. package/dist/esm/tokens/atlassian-legacy-light/color/border.js +1 -1
  55. package/dist/esm/use-theme-observer.js +5 -4
  56. package/dist/esm/utils/get-theme-preferences.js +27 -0
  57. package/dist/esm/utils/theme-loading.js +2 -1
  58. package/dist/esm/version.json +1 -1
  59. package/dist/types/artifacts/themes/atlassian-legacy-light.d.ts +2 -2
  60. package/dist/types/artifacts/tokens-raw/atlassian-legacy-light.d.ts +1 -1
  61. package/dist/types/custom-theme.d.ts +4 -9
  62. package/dist/types/get-global-theme.d.ts +2 -1
  63. package/dist/types/get-ssr-auto-script.d.ts +11 -0
  64. package/dist/types/get-theme-html-attrs.d.ts +17 -0
  65. package/dist/types/get-theme-styles.d.ts +24 -0
  66. package/dist/types/index.d.ts +10 -9
  67. package/dist/types/set-global-theme.d.ts +1 -58
  68. package/dist/types/theme-config.d.ts +24 -0
  69. package/dist/types/theme-mutation-observer.d.ts +1 -1
  70. package/dist/{types-ts4.5/utils → types}/theme-state-transformer.d.ts +1 -1
  71. package/dist/types/use-theme-observer.d.ts +2 -1
  72. package/dist/types/utils/custom-theme-loading-utils.d.ts +2 -3
  73. package/dist/types/utils/generate-custom-color-ramp.d.ts +1 -2
  74. package/dist/types/utils/get-theme-preferences.d.ts +2 -0
  75. package/dist/types/utils/theme-loading.d.ts +1 -0
  76. package/dist/types-ts4.5/artifacts/themes/atlassian-legacy-light.d.ts +2 -2
  77. package/dist/types-ts4.5/artifacts/tokens-raw/atlassian-legacy-light.d.ts +1 -1
  78. package/dist/types-ts4.5/custom-theme.d.ts +4 -9
  79. package/dist/types-ts4.5/get-global-theme.d.ts +2 -1
  80. package/dist/types-ts4.5/get-ssr-auto-script.d.ts +11 -0
  81. package/dist/types-ts4.5/get-theme-html-attrs.d.ts +17 -0
  82. package/dist/types-ts4.5/get-theme-styles.d.ts +24 -0
  83. package/dist/types-ts4.5/index.d.ts +10 -9
  84. package/dist/types-ts4.5/set-global-theme.d.ts +1 -58
  85. package/dist/types-ts4.5/theme-config.d.ts +24 -0
  86. package/dist/types-ts4.5/theme-mutation-observer.d.ts +1 -1
  87. package/dist/{types/utils → types-ts4.5}/theme-state-transformer.d.ts +1 -1
  88. package/dist/types-ts4.5/use-theme-observer.d.ts +2 -1
  89. package/dist/types-ts4.5/utils/custom-theme-loading-utils.d.ts +2 -3
  90. package/dist/types-ts4.5/utils/generate-custom-color-ramp.d.ts +1 -2
  91. package/dist/types-ts4.5/utils/get-theme-preferences.d.ts +2 -0
  92. package/dist/types-ts4.5/utils/theme-loading.d.ts +1 -0
  93. package/figma/atlassian-legacy-light.json +1 -1
  94. package/package.json +1 -1
  95. package/report.api.md +8 -8
  96. package/tmp/api-report-tmp.d.ts +1158 -0
package/dist/esm/tokens/atlassian-legacy-light/color/border.js CHANGED
@@ -11,7 +11,7 @@ var color = {
11
11
  value: 'N0'
12
12
  },
13
13
  focused: {
14
- value: 'B100'
14
+ value: 'B200'
15
15
  },
16
16
  input: {
17
17
  value: 'N10'
package/dist/esm/use-theme-observer.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
2
2
  import { useEffect, useState } from 'react';
3
- import { getGlobalTheme } from './get-global-theme';
4
- import { ThemeMutationObserver } from './theme-mutation-observer';
3
+ import getGlobalTheme from './get-global-theme';
4
+ import ThemeMutationObserver from './theme-mutation-observer';
5
5
 
6
6
  /**
7
7
  * A React hook which returns the current themes and color-mode set on `<html>`.
@@ -16,7 +16,7 @@ import { ThemeMutationObserver } from './theme-mutation-observer';
16
16
  * }, [theme.colorMode]);
17
17
  * ```
18
18
  */
19
- export var useThemeObserver = function useThemeObserver() {
19
+ var useThemeObserver = function useThemeObserver() {
20
20
  var _useState = useState(getGlobalTheme()),
21
21
  _useState2 = _slicedToArray(_useState, 2),
22
22
  theme = _useState2[0],
@@ -31,4 +31,5 @@ export var useThemeObserver = function useThemeObserver() {
31
31
  };
32
32
  }, []);
33
33
  return theme;
34
- };
34
+ };
35
+ export default useThemeObserver;
package/dist/esm/utils/get-theme-preferences.js ADDED
@@ -0,0 +1,27 @@
1
+ import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
2
+ import { getBooleanFF } from '@atlaskit/platform-feature-flags';
3
+ export var getThemePreferences = function getThemePreferences(themeState) {
4
+ var colorMode = themeState.colorMode,
5
+ dark = themeState.dark,
6
+ light = themeState.light,
7
+ shape = themeState.shape,
8
+ spacing = themeState.spacing,
9
+ typography = themeState.typography;
10
+ var themePreferences = colorMode === 'auto' ? [light, dark] : [themeState[colorMode]];
11
+ [shape, spacing, typography].forEach(function (themeId) {
12
+ if (themeId) {
13
+ themePreferences.push(themeId);
14
+ }
15
+ });
16
+ if (getBooleanFF('platform.design-system-team.border-checkbox_nyoiu')) {
17
+ themePreferences.push("".concat(themePreferences.includes('dark') ? 'dark' : 'light', "-new-input-border"));
18
+ }
19
+
20
+ // Load shape and spacing by default, currently behind a feature flag
21
+ if (getBooleanFF('platform.design-system-team.space-and-shape-tokens_q5me6')) {
22
+ if (!themePreferences.includes('spacing')) {
23
+ themePreferences.push('spacing');
24
+ }
25
+ }
26
+ return _toConsumableArray(new Set(themePreferences));
27
+ };
package/dist/esm/utils/theme-loading.js CHANGED
@@ -53,4 +53,5 @@ export var loadThemeCss = /*#__PURE__*/function () {
53
53
  return function loadThemeCss(_x2) {
54
54
  return _ref2.apply(this, arguments);
55
55
  };
56
- }();
56
+ }();
57
+ export var darkModeMediaQuery = '(prefers-color-scheme: dark)';
package/dist/esm/version.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/tokens",
3
- "version": "1.13.0",
3
+ "version": "1.13.2",
4
4
  "sideEffects": [
5
5
  "**/*.css"
6
6
  ]
package/dist/types/artifacts/themes/atlassian-legacy-light.d.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  /**
2
2
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
3
- * @codegen <<SignedSource::9bf19250d90797c5238589fae51defe5>>
3
+ * @codegen <<SignedSource::6c33e244168e3fd752767b58505680ca>>
4
4
  * @codegenCommand yarn build tokens
5
5
  */
6
- declare const _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";
6
+ declare const _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";
7
7
  export default _default;
package/dist/types/artifacts/tokens-raw/atlassian-legacy-light.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
3
- * @codegen <<SignedSource::8b7aab21b157bced2314e03774c8445e>>
3
+ * @codegen <<SignedSource::309519b3d309ba66f31d019788cc5ef0>>
4
4
  * @codegenCommand yarn build tokens
5
5
  */
6
6
  declare const tokens: ({
package/dist/types/custom-theme.d.ts CHANGED
@@ -1,10 +1,6 @@
1
- import { ThemeState, ThemeStyles } from './set-global-theme';
1
+ import { ThemeStyles } from './get-theme-styles';
2
+ import { ThemeOptionsSchema, ThemeState } from './theme-config';
2
3
  export declare const CUSTOM_STYLE_ELEMENTS_SIZE_THRESHOLD = 10;
3
- type HEX = `#${string}`;
4
- export type CSSColor = HEX;
5
- export interface CustomBrandSchema {
6
- brandColor: CSSColor;
7
- }
8
4
  /**
9
5
  *
10
6
  * @param themeSchema The schema of available themes
@@ -22,9 +18,8 @@ export interface CustomBrandSchema {
22
18
  * If an error is encountered while loading themes, the themes array will be empty.
23
19
  */
24
20
  export declare function getCustomThemeStyles(themeState: Partial<ThemeState> & {
25
- UNSAFE_themeOptions: CustomBrandSchema;
21
+ UNSAFE_themeOptions: ThemeOptionsSchema;
26
22
  }): Promise<ThemeStyles[]>;
27
23
  export declare function loadAndAppendCustomThemeCss(themeState: Partial<ThemeState> & {
28
- UNSAFE_themeOptions: CustomBrandSchema;
24
+ UNSAFE_themeOptions: ThemeOptionsSchema;
29
25
  }): Promise<void>;
30
- export {};
package/dist/types/get-global-theme.d.ts CHANGED
@@ -1,2 +1,3 @@
1
1
  import { ActiveThemeState } from './set-global-theme';
2
- export declare const getGlobalTheme: () => Partial<ActiveThemeState>;
2
+ declare const getGlobalTheme: () => Partial<ActiveThemeState>;
3
+ export default getGlobalTheme;
package/dist/types/get-ssr-auto-script.d.ts ADDED
@@ -0,0 +1,11 @@
1
+ import { ThemeState } from './theme-config';
2
+ /**
3
+ * Provides a script that, when executed before paint, sets the `data-color-mode` attribute based on the current system theme,
4
+ * to enable SSR support for automatic theme switching, avoid a flash of un-themed content on first paint.
5
+ *
6
+ * @param {string} colorMode Determines which color theme is applied. If set to `auto`, the theme applied will be determined by the OS setting.
7
+ *
8
+ * @returns {string} A string to be added to the innerHTML of a script tag in the document head
9
+ */
10
+ declare const getSSRAutoScript: (colorMode: ThemeState['colorMode']) => string | undefined;
11
+ export default getSSRAutoScript;
package/dist/types/get-theme-html-attrs.d.ts ADDED
@@ -0,0 +1,17 @@
1
+ import { ThemeState } from './theme-config';
2
+ /**
3
+ * Server-side rendering utility. Generates the valid HTML attributes for a given theme.
4
+ * Note: this utility does not handle automatic theme switching.
5
+ *
6
+ * @param {Object<string, string>} themeOptions - Theme options object
7
+ * @param {string} themeState.colorMode Determines which color theme is applied. If set to `auto`, the theme applied will be determined by the OS setting.
8
+ * @param {string} themeState.dark The color theme to be applied when the color mode resolves to 'dark'.
9
+ * @param {string} themeState.light The color theme to be applied when the color mode resolves to 'light'.
10
+ * @param {string} themeState.spacing The spacing theme to be applied.
11
+ * @param {string} themeState.typography The typography theme to be applied.
12
+ * @param {Object} themeState.UNSAFE_themeOptions The custom branding options to be used for custom theme generation
13
+ *
14
+ * @returns {Object} Object of HTML attributes to be applied to the document root
15
+ */
16
+ declare const getThemeHtmlAttrs: ({ colorMode, dark, light, shape, spacing, typography, UNSAFE_themeOptions, }?: Partial<ThemeState>) => Record<string, string>;
17
+ export default getThemeHtmlAttrs;
package/dist/types/get-theme-styles.d.ts ADDED
@@ -0,0 +1,24 @@
1
+ import { ThemeIdsWithOverrides, ThemeState } from './theme-config';
2
+ export interface ThemeStyles {
3
+ id: ThemeIdsWithOverrides;
4
+ attrs: Record<string, string>;
5
+ css: string;
6
+ }
7
+ /**
8
+ * Takes an object containing theme preferences, and returns an array of objects for use in applying styles to the document head.
9
+ * 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.
10
+ *
11
+ * @param {Object<string, string>} themeState The themes and color mode that should be applied.
12
+ * @param {string} themeState.colorMode Determines which color theme is applied. If set to `auto`, the theme applied will be determined by the OS setting.
13
+ * @param {string} themeState.dark The color theme to be applied when the color mode resolves to 'dark'.
14
+ * @param {string} themeState.light The color theme to be applied when the color mode resolves to 'light'.
15
+ * @param {string} themeState.shape The shape theme to be applied.
16
+ * @param {string} themeState.spacing The spacing theme to be applied.
17
+ * @param {string} themeState.typography The typography theme to be applied.
18
+ * @param {Object} themeState.UNSAFE_themeOptions The custom branding options to be used for custom theme generation
19
+ *
20
+ * @returns A Promise of an object array, containing theme IDs, data-attributes to attach to the theme, and the theme CSS.
21
+ * If an error is encountered while loading themes, the themes array will be empty.
22
+ */
23
+ declare const getThemeStyles: (preferences?: Partial<ThemeState> | 'all') => Promise<ThemeStyles[]>;
24
+ export default getThemeStyles;
package/dist/types/index.d.ts CHANGED
@@ -1,14 +1,15 @@
1
+ export { default as themeConfig } from './theme-config';
1
2
  export { default as token } from './get-token';
2
3
  export { default as getTokenValue } from './get-token-value';
3
- export { default as setGlobalTheme, getThemeStyles, getThemeHtmlAttrs, getSSRAutoScript, } from './set-global-theme';
4
- export type { ThemeState } from './set-global-theme';
4
+ export { default as setGlobalTheme } from './set-global-theme';
5
+ export { default as getThemeStyles } from './get-theme-styles';
6
+ export { default as getThemeHtmlAttrs } from './get-theme-html-attrs';
7
+ export { default as getSSRAutoScript } from './get-ssr-auto-script';
8
+ export { default as useThemeObserver } from './use-theme-observer';
9
+ export { default as ThemeMutationObserver } from './theme-mutation-observer';
10
+ export { default as getGlobalTheme } from './get-global-theme';
11
+ export { themeStringToObject, themeObjectToString, } from './theme-state-transformer';
5
12
  export type { CSSToken } from './artifacts/token-names';
6
13
  export type { ActiveTokens } from './artifacts/types';
7
- export type { ThemeColorModes, Themes, ThemeIds } from './theme-config';
14
+ export type { ThemeColorModes, Themes, ThemeIds, ThemeOptionsSchema, ThemeState, } from './theme-config';
8
15
  export type { Groups, OpacityToken, PaintToken, RawToken, ShadowToken, SpacingToken, ShapeToken, } from './types';
9
- export type { CustomBrandSchema } from './custom-theme';
10
- export { default as themeConfig } from './theme-config';
11
- export { useThemeObserver } from './use-theme-observer';
12
- export { ThemeMutationObserver } from './theme-mutation-observer';
13
- export { getGlobalTheme } from './get-global-theme';
14
- export { themeStringToObject, themeObjectToString, } from './utils/theme-state-transformer';
package/dist/types/set-global-theme.d.ts CHANGED
@@ -1,19 +1,8 @@
1
1
  import { UnbindFn } from 'bind-event-listener';
2
- import { CustomBrandSchema } from './custom-theme';
3
- import { ThemeColorModes, ThemeIds, ThemeIdsWithOverrides } from './theme-config';
4
- export interface ThemeState {
5
- light: Extract<ThemeIds, 'light' | 'dark' | 'legacy-dark' | 'legacy-light'>;
6
- dark: Extract<ThemeIds, 'light' | 'dark' | 'legacy-dark' | 'legacy-light'>;
7
- colorMode: ThemeColorModes;
8
- shape?: Extract<ThemeIds, 'shape'>;
9
- spacing?: Extract<ThemeIds, 'spacing'>;
10
- typography?: Extract<ThemeIds, 'typography'>;
11
- UNSAFE_themeOptions?: CustomBrandSchema;
12
- }
2
+ import { ThemeColorModes, ThemeIdsWithOverrides, ThemeState } from './theme-config';
13
3
  export interface ActiveThemeState extends ThemeState {
14
4
  colorMode: Exclude<ThemeColorModes, 'auto'>;
15
5
  }
16
- export declare const themeStateDefaults: ThemeState;
17
6
  /**
18
7
  * Sets the theme globally at runtime. This updates the `data-theme` and `data-color-mode` attributes on your page's <html> tag.
19
8
  *
@@ -35,50 +24,4 @@ export declare const themeStateDefaults: ThemeState;
35
24
  * ```
36
25
  */
37
26
  declare const setGlobalTheme: ({ colorMode, dark, light, shape, spacing, typography, UNSAFE_themeOptions, }?: Partial<ThemeState>, themeLoader?: ((id: ThemeIdsWithOverrides) => void | Promise<void>) | undefined) => Promise<UnbindFn>;
38
- export interface ThemeStyles {
39
- id: ThemeIdsWithOverrides;
40
- attrs: Record<string, string>;
41
- css: string;
42
- }
43
- /**
44
- * Takes an object containing theme preferences, and returns an array of objects for use in applying styles to the document head.
45
- * 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.
46
- *
47
- * @param {Object<string, string>} themeState The themes and color mode that should be applied.
48
- * @param {string} themeState.colorMode Determines which color theme is applied. If set to `auto`, the theme applied will be determined by the OS setting.
49
- * @param {string} themeState.dark The color theme to be applied when the color mode resolves to 'dark'.
50
- * @param {string} themeState.light The color theme to be applied when the color mode resolves to 'light'.
51
- * @param {string} themeState.shape The shape theme to be applied.
52
- * @param {string} themeState.spacing The spacing theme to be applied.
53
- * @param {string} themeState.typography The typography theme to be applied.
54
- * @param {Object} themeState.UNSAFE_themeOptions The custom branding options to be used for custom theme generation
55
- *
56
- * @returns A Promise of an object array, containing theme IDs, data-attributes to attach to the theme, and the theme CSS.
57
- * If an error is encountered while loading themes, the themes array will be empty.
58
- */
59
- export declare const getThemeStyles: (preferences?: Partial<ThemeState> | 'all') => Promise<ThemeStyles[]>;
60
- /**
61
- * Server-side rendering utility. Generates the valid HTML attributes for a given theme.
62
- * Note: this utility does not handle automatic theme switching.
63
- *
64
- * @param {Object<string, string>} themeOptions - Theme options object
65
- * @param {string} themeState.colorMode Determines which color theme is applied. If set to `auto`, the theme applied will be determined by the OS setting.
66
- * @param {string} themeState.dark The color theme to be applied when the color mode resolves to 'dark'.
67
- * @param {string} themeState.light The color theme to be applied when the color mode resolves to 'light'.
68
- * @param {string} themeState.spacing The spacing theme to be applied.
69
- * @param {string} themeState.typography The typography theme to be applied.
70
- * @param {Object} themeState.UNSAFE_themeOptions The custom branding options to be used for custom theme generation
71
- *
72
- * @returns {Object} Object of HTML attributes to be applied to the document root
73
- */
74
- export declare const getThemeHtmlAttrs: ({ colorMode, dark, light, shape, spacing, typography, UNSAFE_themeOptions, }?: Partial<ThemeState>) => Record<string, string>;
75
- /**
76
- * Provides a script that, when executed before paint, sets the `data-color-mode` attribute based on the current system theme,
77
- * to enable SSR support for automatic theme switching, avoid a flash of un-themed content on first paint.
78
- *
79
- * @param {string} colorMode Determines which color theme is applied. If set to `auto`, the theme applied will be determined by the OS setting.
80
- *
81
- * @returns {string} A string to be added to the innerHTML of a script tag in the document head
82
- */
83
- export declare const getSSRAutoScript: (colorMode: ThemeState['colorMode']) => string | undefined;
84
27
  export default setGlobalTheme;
package/dist/types/theme-config.d.ts CHANGED
@@ -77,4 +77,28 @@ interface ThemeConfig {
77
77
  override?: ThemeIds;
78
78
  }
79
79
  declare const themeConfig: Record<Themes | ThemeOverrides, ThemeConfig>;
80
+ type HEX = `#${string}`;
81
+ export type CSSColor = HEX;
82
+ /**
83
+ * ThemeOptionsSchema: additional configuration options used to customize Atlassian's themes
84
+ */
85
+ export interface ThemeOptionsSchema {
86
+ brandColor: CSSColor;
87
+ }
88
+ /**
89
+ * ThemeState: the standard representation of an app's current theme and preferences
90
+ */
91
+ export interface ThemeState {
92
+ light: Extract<ThemeIds, 'light' | 'dark' | 'legacy-dark' | 'legacy-light'>;
93
+ dark: Extract<ThemeIds, 'light' | 'dark' | 'legacy-dark' | 'legacy-light'>;
94
+ colorMode: ThemeColorModes;
95
+ shape?: Extract<ThemeIds, 'shape'>;
96
+ spacing?: Extract<ThemeIds, 'spacing'>;
97
+ typography?: Extract<ThemeIds, 'typography'>;
98
+ UNSAFE_themeOptions?: ThemeOptionsSchema;
99
+ }
100
+ /**
101
+ * themeStateDefaults: the default values for ThemeState used by theming utilities
102
+ */
103
+ export declare const themeStateDefaults: ThemeState;
80
104
  export default themeConfig;
package/dist/types/theme-mutation-observer.d.ts CHANGED
@@ -12,7 +12,7 @@ import { ActiveThemeState } from './set-global-theme';
12
12
  * observer.observe();
13
13
  * ```
14
14
  */
15
- export declare class ThemeMutationObserver {
15
+ export default class ThemeMutationObserver {
16
16
  private callback;
17
17
  observer: MutationObserver | null;
18
18
  mediaObserver: any;
package/dist/{types-ts4.5/utils → types}/theme-state-transformer.d.ts RENAMED
@@ -1,4 +1,4 @@
1
- import type { ThemeState } from '../set-global-theme';
1
+ import { ThemeState } from './theme-config';
2
2
  /**
3
3
  * Converts a string that is formatted for the `data-theme` HTML attribute
4
4
  * to an object that can be passed to `setGlobalTheme`.
package/dist/types/use-theme-observer.d.ts CHANGED
@@ -12,4 +12,5 @@ import { ActiveThemeState } from './set-global-theme';
12
12
  * }, [theme.colorMode]);
13
13
  * ```
14
14
  */
15
- export declare const useThemeObserver: () => Partial<ActiveThemeState>;
15
+ declare const useThemeObserver: () => Partial<ActiveThemeState>;
16
+ export default useThemeObserver;
package/dist/types/utils/custom-theme-loading-utils.d.ts CHANGED
@@ -1,9 +1,8 @@
1
1
  import tokens from '../artifacts/token-names';
2
- import { CustomBrandSchema } from '../custom-theme';
3
- import { ThemeColorModes } from '../theme-config';
2
+ import { ThemeColorModes, ThemeOptionsSchema } from '../theme-config';
4
3
  type Token = keyof typeof tokens;
5
4
  type ThemeAttributeId = 'light' | 'dark';
6
- export declare function findMissingCustomStyleElements(UNSAFE_themeOptions: CustomBrandSchema, mode: ThemeColorModes): ThemeAttributeId[];
5
+ export declare function findMissingCustomStyleElements(UNSAFE_themeOptions: ThemeOptionsSchema, mode: ThemeColorModes): ThemeAttributeId[];
7
6
  export declare function limitSizeOfCustomStyleElements(sizeThreshold: number): void;
8
7
  export declare function reduceTokenMap(tokenMap: {
9
8
  [key in Token]?: number;
package/dist/types/utils/generate-custom-color-ramp.d.ts CHANGED
@@ -1,6 +1,5 @@
1
1
  import tokens from '../artifacts/token-names';
2
- import { CSSColor } from '../custom-theme';
3
- import { ThemeColorModes } from '../theme-config';
2
+ import { CSSColor, ThemeColorModes } from '../theme-config';
4
3
  type Token = keyof typeof tokens;
5
4
  type TokenMap = {
6
5
  [key in Token]?: number;
package/dist/types/utils/get-theme-preferences.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ import { ThemeIdsWithOverrides, ThemeState } from '../theme-config';
2
+ export declare const getThemePreferences: (themeState: ThemeState) => ThemeIdsWithOverrides[];
package/dist/types/utils/theme-loading.d.ts CHANGED
@@ -1,3 +1,4 @@
1
1
  import { ThemeIdsWithOverrides } from '../theme-config';
2
2
  export declare const loadAndAppendThemeCss: (themeId: ThemeIdsWithOverrides) => Promise<void>;
3
3
  export declare const loadThemeCss: (themeId: ThemeIdsWithOverrides) => Promise<string>;
4
+ export declare const darkModeMediaQuery = "(prefers-color-scheme: dark)";
package/dist/types-ts4.5/artifacts/themes/atlassian-legacy-light.d.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  /**
2
2
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
3
- * @codegen <<SignedSource::9bf19250d90797c5238589fae51defe5>>
3
+ * @codegen <<SignedSource::6c33e244168e3fd752767b58505680ca>>
4
4
  * @codegenCommand yarn build tokens
5
5
  */
6
- declare const _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";
6
+ declare const _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";
7
7
  export default _default;
package/dist/types-ts4.5/artifacts/tokens-raw/atlassian-legacy-light.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
3
- * @codegen <<SignedSource::8b7aab21b157bced2314e03774c8445e>>
3
+ * @codegen <<SignedSource::309519b3d309ba66f31d019788cc5ef0>>
4
4
  * @codegenCommand yarn build tokens
5
5
  */
6
6
  declare const tokens: ({
package/dist/types-ts4.5/custom-theme.d.ts CHANGED
@@ -1,10 +1,6 @@
1
- import { ThemeState, ThemeStyles } from './set-global-theme';
1
+ import { ThemeStyles } from './get-theme-styles';
2
+ import { ThemeOptionsSchema, ThemeState } from './theme-config';
2
3
  export declare const CUSTOM_STYLE_ELEMENTS_SIZE_THRESHOLD = 10;
3
- type HEX = `#${string}`;
4
- export type CSSColor = HEX;
5
- export interface CustomBrandSchema {
6
- brandColor: CSSColor;
7
- }
8
4
  /**
9
5
  *
10
6
  * @param themeSchema The schema of available themes
@@ -22,9 +18,8 @@ export interface CustomBrandSchema {
22
18
  * If an error is encountered while loading themes, the themes array will be empty.
23
19
  */
24
20
  export declare function getCustomThemeStyles(themeState: Partial<ThemeState> & {
25
- UNSAFE_themeOptions: CustomBrandSchema;
21
+ UNSAFE_themeOptions: ThemeOptionsSchema;
26
22
  }): Promise<ThemeStyles[]>;
27
23
  export declare function loadAndAppendCustomThemeCss(themeState: Partial<ThemeState> & {
28
- UNSAFE_themeOptions: CustomBrandSchema;
24
+ UNSAFE_themeOptions: ThemeOptionsSchema;
29
25
  }): Promise<void>;
30
- export {};
package/dist/types-ts4.5/get-global-theme.d.ts CHANGED
@@ -1,2 +1,3 @@
1
1
  import { ActiveThemeState } from './set-global-theme';
2
- export declare const getGlobalTheme: () => Partial<ActiveThemeState>;
2
+ declare const getGlobalTheme: () => Partial<ActiveThemeState>;
3
+ export default getGlobalTheme;
package/dist/types-ts4.5/get-ssr-auto-script.d.ts ADDED
@@ -0,0 +1,11 @@
1
+ import { ThemeState } from './theme-config';
2
+ /**
3
+ * Provides a script that, when executed before paint, sets the `data-color-mode` attribute based on the current system theme,
4
+ * to enable SSR support for automatic theme switching, avoid a flash of un-themed content on first paint.
5
+ *
6
+ * @param {string} colorMode Determines which color theme is applied. If set to `auto`, the theme applied will be determined by the OS setting.
7
+ *
8
+ * @returns {string} A string to be added to the innerHTML of a script tag in the document head
9
+ */
10
+ declare const getSSRAutoScript: (colorMode: ThemeState['colorMode']) => string | undefined;
11
+ export default getSSRAutoScript;
package/dist/types-ts4.5/get-theme-html-attrs.d.ts ADDED
@@ -0,0 +1,17 @@
1
+ import { ThemeState } from './theme-config';
2
+ /**
3
+ * Server-side rendering utility. Generates the valid HTML attributes for a given theme.
4
+ * Note: this utility does not handle automatic theme switching.
5
+ *
6
+ * @param {Object<string, string>} themeOptions - Theme options object
7
+ * @param {string} themeState.colorMode Determines which color theme is applied. If set to `auto`, the theme applied will be determined by the OS setting.
8
+ * @param {string} themeState.dark The color theme to be applied when the color mode resolves to 'dark'.
9
+ * @param {string} themeState.light The color theme to be applied when the color mode resolves to 'light'.
10
+ * @param {string} themeState.spacing The spacing theme to be applied.
11
+ * @param {string} themeState.typography The typography theme to be applied.
12
+ * @param {Object} themeState.UNSAFE_themeOptions The custom branding options to be used for custom theme generation
13
+ *
14
+ * @returns {Object} Object of HTML attributes to be applied to the document root
15
+ */
16
+ declare const getThemeHtmlAttrs: ({ colorMode, dark, light, shape, spacing, typography, UNSAFE_themeOptions, }?: Partial<ThemeState>) => Record<string, string>;
17
+ export default getThemeHtmlAttrs;
package/dist/types-ts4.5/get-theme-styles.d.ts ADDED
@@ -0,0 +1,24 @@
1
+ import { ThemeIdsWithOverrides, ThemeState } from './theme-config';
2
+ export interface ThemeStyles {
3
+ id: ThemeIdsWithOverrides;
4
+ attrs: Record<string, string>;
5
+ css: string;
6
+ }
7
+ /**
8
+ * Takes an object containing theme preferences, and returns an array of objects for use in applying styles to the document head.
9
+ * 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.
10
+ *
11
+ * @param {Object<string, string>} themeState The themes and color mode that should be applied.
12
+ * @param {string} themeState.colorMode Determines which color theme is applied. If set to `auto`, the theme applied will be determined by the OS setting.
13
+ * @param {string} themeState.dark The color theme to be applied when the color mode resolves to 'dark'.
14
+ * @param {string} themeState.light The color theme to be applied when the color mode resolves to 'light'.
15
+ * @param {string} themeState.shape The shape theme to be applied.
16
+ * @param {string} themeState.spacing The spacing theme to be applied.
17
+ * @param {string} themeState.typography The typography theme to be applied.
18
+ * @param {Object} themeState.UNSAFE_themeOptions The custom branding options to be used for custom theme generation
19
+ *
20
+ * @returns A Promise of an object array, containing theme IDs, data-attributes to attach to the theme, and the theme CSS.
21
+ * If an error is encountered while loading themes, the themes array will be empty.
22
+ */
23
+ declare const getThemeStyles: (preferences?: Partial<ThemeState> | 'all') => Promise<ThemeStyles[]>;
24
+ export default getThemeStyles;