@atlaskit/tokens 1.11.3 → 1.13.0

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 (181) hide show
  1. package/CHANGELOG.md +30 -0
  2. package/dist/cjs/artifacts/atlassian-dark-token-value-for-contrast-check.js +25 -0
  3. package/dist/cjs/artifacts/atlassian-light-token-value-for-contrast-check.js +25 -0
  4. package/dist/cjs/artifacts/generated-pairs.js +2 -2
  5. package/dist/cjs/artifacts/themes/atlassian-dark.js +2 -2
  6. package/dist/cjs/artifacts/themes/atlassian-legacy-dark.js +2 -2
  7. package/dist/cjs/artifacts/themes/atlassian-legacy-light.js +2 -2
  8. package/dist/cjs/artifacts/themes/atlassian-light.js +2 -2
  9. package/dist/cjs/artifacts/token-default-values.js +7 -1
  10. package/dist/cjs/artifacts/token-names.js +7 -1
  11. package/dist/cjs/artifacts/tokens-raw/atlassian-dark.js +137 -5
  12. package/dist/cjs/artifacts/tokens-raw/atlassian-legacy-dark.js +137 -5
  13. package/dist/cjs/artifacts/tokens-raw/atlassian-legacy-light.js +137 -5
  14. package/dist/cjs/artifacts/tokens-raw/atlassian-light.js +137 -5
  15. package/dist/cjs/constants.js +3 -1
  16. package/dist/cjs/custom-theme.js +108 -0
  17. package/dist/cjs/get-token-value.js +1 -1
  18. package/dist/cjs/get-token.js +1 -1
  19. package/dist/cjs/set-global-theme.js +156 -59
  20. package/dist/cjs/tokens/atlassian-dark/color/background.js +22 -0
  21. package/dist/cjs/tokens/atlassian-legacy-dark/color/background.js +22 -0
  22. package/dist/cjs/tokens/atlassian-legacy-light/color/background.js +22 -0
  23. package/dist/cjs/tokens/atlassian-light/color/background.js +22 -0
  24. package/dist/cjs/tokens/default/color/background.js +54 -2
  25. package/dist/cjs/utils/color-utils.js +178 -0
  26. package/dist/cjs/utils/custom-theme-loading-utils.js +47 -0
  27. package/dist/cjs/utils/custom-theme-token-contrast-check.js +74 -0
  28. package/dist/cjs/utils/generate-custom-color-ramp.js +222 -0
  29. package/dist/cjs/utils/hash.js +17 -0
  30. package/dist/cjs/utils/hct-color-utils/color-utils.js +310 -0
  31. package/dist/cjs/utils/hct-color-utils/contrast.js +188 -0
  32. package/dist/cjs/utils/hct-color-utils/hct.js +1036 -0
  33. package/dist/cjs/utils/hct-color-utils/index.js +32 -0
  34. package/dist/cjs/utils/hct-color-utils/math-utils.js +159 -0
  35. package/dist/cjs/utils/theme-loading.js +1 -1
  36. package/dist/cjs/utils/theme-state-transformer.js +1 -1
  37. package/dist/cjs/version.json +1 -1
  38. package/dist/es2019/artifacts/atlassian-dark-token-value-for-contrast-check.js +18 -0
  39. package/dist/es2019/artifacts/atlassian-light-token-value-for-contrast-check.js +18 -0
  40. package/dist/es2019/artifacts/generated-pairs.js +2 -2
  41. package/dist/es2019/artifacts/themes/atlassian-dark.js +7 -1
  42. package/dist/es2019/artifacts/themes/atlassian-legacy-dark.js +7 -1
  43. package/dist/es2019/artifacts/themes/atlassian-legacy-light.js +7 -1
  44. package/dist/es2019/artifacts/themes/atlassian-light.js +7 -1
  45. package/dist/es2019/artifacts/token-default-values.js +7 -1
  46. package/dist/es2019/artifacts/token-names.js +7 -1
  47. package/dist/es2019/artifacts/tokens-raw/atlassian-dark.js +137 -5
  48. package/dist/es2019/artifacts/tokens-raw/atlassian-legacy-dark.js +137 -5
  49. package/dist/es2019/artifacts/tokens-raw/atlassian-legacy-light.js +137 -5
  50. package/dist/es2019/artifacts/tokens-raw/atlassian-light.js +137 -5
  51. package/dist/es2019/constants.js +1 -0
  52. package/dist/es2019/custom-theme.js +77 -0
  53. package/dist/es2019/get-token-value.js +1 -1
  54. package/dist/es2019/get-token.js +1 -1
  55. package/dist/es2019/set-global-theme.js +67 -13
  56. package/dist/es2019/tokens/atlassian-dark/color/background.js +22 -0
  57. package/dist/es2019/tokens/atlassian-legacy-dark/color/background.js +22 -0
  58. package/dist/es2019/tokens/atlassian-legacy-light/color/background.js +22 -0
  59. package/dist/es2019/tokens/atlassian-light/color/background.js +22 -0
  60. package/dist/es2019/tokens/default/color/background.js +54 -2
  61. package/dist/es2019/utils/color-utils.js +154 -0
  62. package/dist/es2019/utils/custom-theme-loading-utils.js +31 -0
  63. package/dist/es2019/utils/custom-theme-token-contrast-check.js +68 -0
  64. package/dist/es2019/utils/generate-custom-color-ramp.js +198 -0
  65. package/dist/es2019/utils/hash.js +10 -0
  66. package/dist/es2019/utils/hct-color-utils/color-utils.js +286 -0
  67. package/dist/es2019/utils/hct-color-utils/contrast.js +161 -0
  68. package/dist/es2019/utils/hct-color-utils/hct.js +931 -0
  69. package/dist/es2019/utils/hct-color-utils/index.js +3 -0
  70. package/dist/es2019/utils/hct-color-utils/math-utils.js +145 -0
  71. package/dist/es2019/utils/theme-loading.js +2 -2
  72. package/dist/es2019/utils/theme-state-transformer.js +3 -1
  73. package/dist/es2019/version.json +1 -1
  74. package/dist/esm/artifacts/atlassian-dark-token-value-for-contrast-check.js +18 -0
  75. package/dist/esm/artifacts/atlassian-light-token-value-for-contrast-check.js +18 -0
  76. package/dist/esm/artifacts/generated-pairs.js +2 -2
  77. package/dist/esm/artifacts/themes/atlassian-dark.js +2 -2
  78. package/dist/esm/artifacts/themes/atlassian-legacy-dark.js +2 -2
  79. package/dist/esm/artifacts/themes/atlassian-legacy-light.js +2 -2
  80. package/dist/esm/artifacts/themes/atlassian-light.js +2 -2
  81. package/dist/esm/artifacts/token-default-values.js +7 -1
  82. package/dist/esm/artifacts/token-names.js +7 -1
  83. package/dist/esm/artifacts/tokens-raw/atlassian-dark.js +137 -5
  84. package/dist/esm/artifacts/tokens-raw/atlassian-legacy-dark.js +137 -5
  85. package/dist/esm/artifacts/tokens-raw/atlassian-legacy-light.js +137 -5
  86. package/dist/esm/artifacts/tokens-raw/atlassian-light.js +137 -5
  87. package/dist/esm/constants.js +1 -0
  88. package/dist/esm/custom-theme.js +98 -0
  89. package/dist/esm/get-token-value.js +1 -1
  90. package/dist/esm/get-token.js +1 -1
  91. package/dist/esm/set-global-theme.js +149 -60
  92. package/dist/esm/tokens/atlassian-dark/color/background.js +22 -0
  93. package/dist/esm/tokens/atlassian-legacy-dark/color/background.js +22 -0
  94. package/dist/esm/tokens/atlassian-legacy-light/color/background.js +22 -0
  95. package/dist/esm/tokens/atlassian-light/color/background.js +22 -0
  96. package/dist/esm/tokens/default/color/background.js +54 -2
  97. package/dist/esm/utils/color-utils.js +162 -0
  98. package/dist/esm/utils/custom-theme-loading-utils.js +38 -0
  99. package/dist/esm/utils/custom-theme-token-contrast-check.js +65 -0
  100. package/dist/esm/utils/generate-custom-color-ramp.js +211 -0
  101. package/dist/esm/utils/hash.js +10 -0
  102. package/dist/esm/utils/hct-color-utils/color-utils.js +285 -0
  103. package/dist/esm/utils/hct-color-utils/contrast.js +181 -0
  104. package/dist/esm/utils/hct-color-utils/hct.js +1029 -0
  105. package/dist/esm/utils/hct-color-utils/index.js +3 -0
  106. package/dist/esm/utils/hct-color-utils/math-utils.js +145 -0
  107. package/dist/esm/utils/theme-loading.js +2 -2
  108. package/dist/esm/utils/theme-state-transformer.js +1 -1
  109. package/dist/esm/version.json +1 -1
  110. package/dist/types/artifacts/atlassian-dark-token-value-for-contrast-check.d.ts +18 -0
  111. package/dist/types/artifacts/atlassian-light-token-value-for-contrast-check.d.ts +18 -0
  112. package/dist/types/artifacts/generated-pairs.d.ts +1 -1
  113. package/dist/types/artifacts/themes/atlassian-dark.d.ts +2 -2
  114. package/dist/types/artifacts/themes/atlassian-legacy-dark.d.ts +2 -2
  115. package/dist/types/artifacts/themes/atlassian-legacy-light.d.ts +2 -2
  116. package/dist/types/artifacts/themes/atlassian-light.d.ts +2 -2
  117. package/dist/types/artifacts/token-default-values.d.ts +7 -1
  118. package/dist/types/artifacts/token-names.d.ts +13 -1
  119. package/dist/types/artifacts/tokens-raw/atlassian-dark.d.ts +1 -1
  120. package/dist/types/artifacts/tokens-raw/atlassian-legacy-dark.d.ts +1 -1
  121. package/dist/types/artifacts/tokens-raw/atlassian-legacy-light.d.ts +1 -1
  122. package/dist/types/artifacts/tokens-raw/atlassian-light.d.ts +1 -1
  123. package/dist/types/artifacts/types-internal.d.ts +2 -2
  124. package/dist/types/artifacts/types.d.ts +2 -2
  125. package/dist/types/constants.d.ts +1 -0
  126. package/dist/types/custom-theme.d.ts +30 -0
  127. package/dist/types/index.d.ts +1 -0
  128. package/dist/types/set-global-theme.d.ts +9 -3
  129. package/dist/types/types.d.ts +10 -0
  130. package/dist/types/utils/color-utils.d.ts +10 -0
  131. package/dist/types/utils/custom-theme-loading-utils.d.ts +11 -0
  132. package/dist/types/utils/custom-theme-token-contrast-check.d.ts +20 -0
  133. package/dist/types/utils/generate-custom-color-ramp.d.ts +19 -0
  134. package/dist/types/utils/hash.d.ts +1 -0
  135. package/dist/types/utils/hct-color-utils/color-utils.d.ts +131 -0
  136. package/dist/types/utils/hct-color-utils/contrast.d.ts +78 -0
  137. package/dist/types/utils/hct-color-utils/hct.d.ts +137 -0
  138. package/dist/types/utils/hct-color-utils/index.d.ts +3 -0
  139. package/dist/types/utils/hct-color-utils/math-utils.d.ts +86 -0
  140. package/dist/types-ts4.5/artifacts/atlassian-dark-token-value-for-contrast-check.d.ts +18 -0
  141. package/dist/types-ts4.5/artifacts/atlassian-light-token-value-for-contrast-check.d.ts +18 -0
  142. package/dist/types-ts4.5/artifacts/generated-pairs.d.ts +1 -1
  143. package/dist/types-ts4.5/artifacts/themes/atlassian-dark.d.ts +2 -2
  144. package/dist/types-ts4.5/artifacts/themes/atlassian-legacy-dark.d.ts +2 -2
  145. package/dist/types-ts4.5/artifacts/themes/atlassian-legacy-light.d.ts +2 -2
  146. package/dist/types-ts4.5/artifacts/themes/atlassian-light.d.ts +2 -2
  147. package/dist/types-ts4.5/artifacts/token-default-values.d.ts +7 -1
  148. package/dist/types-ts4.5/artifacts/token-names.d.ts +13 -1
  149. package/dist/types-ts4.5/artifacts/tokens-raw/atlassian-dark.d.ts +1 -1
  150. package/dist/types-ts4.5/artifacts/tokens-raw/atlassian-legacy-dark.d.ts +1 -1
  151. package/dist/types-ts4.5/artifacts/tokens-raw/atlassian-legacy-light.d.ts +1 -1
  152. package/dist/types-ts4.5/artifacts/tokens-raw/atlassian-light.d.ts +1 -1
  153. package/dist/types-ts4.5/artifacts/types-internal.d.ts +2 -2
  154. package/dist/types-ts4.5/artifacts/types.d.ts +2 -2
  155. package/dist/types-ts4.5/constants.d.ts +1 -0
  156. package/dist/types-ts4.5/custom-theme.d.ts +30 -0
  157. package/dist/types-ts4.5/index.d.ts +1 -0
  158. package/dist/types-ts4.5/set-global-theme.d.ts +9 -3
  159. package/dist/types-ts4.5/types.d.ts +10 -0
  160. package/dist/types-ts4.5/utils/color-utils.d.ts +27 -0
  161. package/dist/types-ts4.5/utils/custom-theme-loading-utils.d.ts +11 -0
  162. package/dist/types-ts4.5/utils/custom-theme-token-contrast-check.d.ts +20 -0
  163. package/dist/types-ts4.5/utils/generate-custom-color-ramp.d.ts +19 -0
  164. package/dist/types-ts4.5/utils/hash.d.ts +1 -0
  165. package/dist/types-ts4.5/utils/hct-color-utils/color-utils.d.ts +131 -0
  166. package/dist/types-ts4.5/utils/hct-color-utils/contrast.d.ts +78 -0
  167. package/dist/types-ts4.5/utils/hct-color-utils/hct.d.ts +137 -0
  168. package/dist/types-ts4.5/utils/hct-color-utils/index.d.ts +3 -0
  169. package/dist/types-ts4.5/utils/hct-color-utils/math-utils.d.ts +86 -0
  170. package/figma/atlassian-dark.json +56 -2
  171. package/figma/atlassian-legacy-dark.json +56 -2
  172. package/figma/atlassian-legacy-light.json +56 -2
  173. package/figma/atlassian-light.json +56 -2
  174. package/package.json +36 -37
  175. package/report.api.md +48 -1
  176. package/dist/cjs/artifacts/tokens-raw/atlassian-dark-iteration.js +0 -902
  177. package/dist/es2019/artifacts/tokens-raw/atlassian-dark-iteration.js +0 -895
  178. package/dist/esm/artifacts/tokens-raw/atlassian-dark-iteration.js +0 -895
  179. package/dist/types/artifacts/tokens-raw/atlassian-dark-iteration.d.ts +0 -91
  180. package/dist/types-ts4.5/artifacts/tokens-raw/atlassian-dark-iteration.d.ts +0 -91
  181. package/tmp/api-report-tmp.d.ts +0 -1132
@@ -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::31ef83679951d94550dd5a34987f13de>>
3
+ * @codegen <<SignedSource::d3c62439b01fe176b56a1bf1807fc068>>
4
4
  * @codegenCommand yarn build tokens
5
5
  */
6
- export type InternalTokenIds = 'color.text.[default]' | 'color.text.accent.lime.[default]' | 'color.text.accent.lime.bolder' | 'color.text.accent.red.[default]' | 'color.text.accent.red.bolder' | 'color.text.accent.orange.[default]' | 'color.text.accent.orange.bolder' | 'color.text.accent.yellow.[default]' | 'color.text.accent.yellow.bolder' | 'color.text.accent.green.[default]' | 'color.text.accent.green.bolder' | 'color.text.accent.teal.[default]' | 'color.text.accent.teal.bolder' | 'color.text.accent.blue.[default]' | 'color.text.accent.blue.bolder' | 'color.text.accent.purple.[default]' | 'color.text.accent.purple.bolder' | 'color.text.accent.magenta.[default]' | 'color.text.accent.magenta.bolder' | 'color.text.accent.gray.[default]' | 'color.text.accent.gray.bolder' | 'color.text.disabled' | 'color.text.inverse' | 'color.text.selected' | 'color.text.brand' | 'color.text.danger' | 'color.text.warning.[default]' | 'color.text.warning.inverse' | 'color.text.success' | 'color.text.discovery' | 'color.text.information' | 'color.text.subtlest' | 'color.text.subtle' | 'color.link.[default]' | 'color.link.pressed' | 'color.icon.[default]' | 'color.icon.accent.lime' | 'color.icon.accent.red' | 'color.icon.accent.orange' | 'color.icon.accent.yellow' | 'color.icon.accent.green' | 'color.icon.accent.teal' | 'color.icon.accent.blue' | 'color.icon.accent.purple' | 'color.icon.accent.magenta' | 'color.icon.accent.gray' | 'color.icon.disabled' | 'color.icon.inverse' | 'color.icon.selected' | 'color.icon.brand' | 'color.icon.danger' | 'color.icon.warning.[default]' | 'color.icon.warning.inverse' | 'color.icon.success' | 'color.icon.discovery' | 'color.icon.information' | 'color.icon.subtle' | 'color.border.[default]' | 'color.border.accent.lime' | 'color.border.accent.red' | 'color.border.accent.orange' | 'color.border.accent.yellow' | 'color.border.accent.green' | 'color.border.accent.teal' | 'color.border.accent.blue' | 'color.border.accent.purple' | 'color.border.accent.magenta' | 'color.border.accent.gray' | 'color.border.disabled' | 'color.border.focused' | 'color.border.input' | 'color.border.inverse' | 'color.border.selected' | 'color.border.brand' | 'color.border.danger' | 'color.border.warning' | 'color.border.success' | 'color.border.discovery' | 'color.border.information' | 'color.border.bold' | 'color.background.accent.lime.subtlest' | 'color.background.accent.lime.subtler' | 'color.background.accent.lime.subtle' | 'color.background.accent.lime.bolder' | 'color.background.accent.red.subtlest' | 'color.background.accent.red.subtler' | 'color.background.accent.red.subtle' | 'color.background.accent.red.bolder' | 'color.background.accent.orange.subtlest' | 'color.background.accent.orange.subtler' | 'color.background.accent.orange.subtle' | 'color.background.accent.orange.bolder' | 'color.background.accent.yellow.subtlest' | 'color.background.accent.yellow.subtler' | 'color.background.accent.yellow.subtle' | 'color.background.accent.yellow.bolder' | 'color.background.accent.green.subtlest' | 'color.background.accent.green.subtler' | 'color.background.accent.green.subtle' | 'color.background.accent.green.bolder' | 'color.background.accent.teal.subtlest' | 'color.background.accent.teal.subtler' | 'color.background.accent.teal.subtle' | 'color.background.accent.teal.bolder' | 'color.background.accent.blue.subtlest' | 'color.background.accent.blue.subtler' | 'color.background.accent.blue.subtle' | 'color.background.accent.blue.bolder' | 'color.background.accent.purple.subtlest' | 'color.background.accent.purple.subtler' | 'color.background.accent.purple.subtle' | 'color.background.accent.purple.bolder' | 'color.background.accent.magenta.subtlest' | 'color.background.accent.magenta.subtler' | 'color.background.accent.magenta.subtle' | 'color.background.accent.magenta.bolder' | 'color.background.accent.gray.subtlest' | 'color.background.accent.gray.subtler' | 'color.background.accent.gray.subtle' | 'color.background.accent.gray.bolder' | 'color.background.disabled' | 'color.background.input.[default]' | 'color.background.input.hovered' | 'color.background.input.pressed' | 'color.background.inverse.subtle.[default]' | 'color.background.inverse.subtle.hovered' | 'color.background.inverse.subtle.pressed' | 'color.background.neutral.[default].[default]' | 'color.background.neutral.[default].hovered' | 'color.background.neutral.[default].pressed' | 'color.background.neutral.subtle.[default]' | 'color.background.neutral.subtle.hovered' | 'color.background.neutral.subtle.pressed' | 'color.background.neutral.bold.[default]' | 'color.background.neutral.bold.hovered' | 'color.background.neutral.bold.pressed' | 'color.background.selected.[default].[default]' | 'color.background.selected.[default].hovered' | 'color.background.selected.[default].pressed' | 'color.background.selected.bold.[default]' | 'color.background.selected.bold.hovered' | 'color.background.selected.bold.pressed' | 'color.background.brand.bold.[default]' | 'color.background.brand.bold.hovered' | 'color.background.brand.bold.pressed' | 'color.background.danger.[default].[default]' | 'color.background.danger.[default].hovered' | 'color.background.danger.[default].pressed' | 'color.background.danger.bold.[default]' | 'color.background.danger.bold.hovered' | 'color.background.danger.bold.pressed' | 'color.background.warning.[default].[default]' | 'color.background.warning.[default].hovered' | 'color.background.warning.[default].pressed' | 'color.background.warning.bold.[default]' | 'color.background.warning.bold.hovered' | 'color.background.warning.bold.pressed' | 'color.background.success.[default].[default]' | 'color.background.success.[default].hovered' | 'color.background.success.[default].pressed' | 'color.background.success.bold.[default]' | 'color.background.success.bold.hovered' | 'color.background.success.bold.pressed' | 'color.background.discovery.[default].[default]' | 'color.background.discovery.[default].hovered' | 'color.background.discovery.[default].pressed' | 'color.background.discovery.bold.[default]' | 'color.background.discovery.bold.hovered' | 'color.background.discovery.bold.pressed' | 'color.background.information.[default].[default]' | 'color.background.information.[default].hovered' | 'color.background.information.[default].pressed' | 'color.background.information.bold.[default]' | 'color.background.information.bold.hovered' | 'color.background.information.bold.pressed' | 'color.blanket.[default]' | 'color.blanket.selected' | 'color.blanket.danger' | 'color.interaction.hovered' | 'color.interaction.pressed' | 'color.skeleton.[default]' | 'color.skeleton.subtle' | 'color.chart.categorical.1.[default]' | 'color.chart.categorical.1.hovered' | 'color.chart.categorical.2.[default]' | 'color.chart.categorical.2.hovered' | 'color.chart.categorical.3.[default]' | 'color.chart.categorical.3.hovered' | 'color.chart.categorical.4.[default]' | 'color.chart.categorical.4.hovered' | 'color.chart.categorical.5.[default]' | 'color.chart.categorical.5.hovered' | 'color.chart.categorical.6.[default]' | 'color.chart.categorical.6.hovered' | 'color.chart.categorical.7.[default]' | 'color.chart.categorical.7.hovered' | 'color.chart.categorical.8.[default]' | 'color.chart.categorical.8.hovered' | 'color.chart.lime.bold.[default]' | 'color.chart.lime.bold.hovered' | 'color.chart.lime.bolder.[default]' | 'color.chart.lime.bolder.hovered' | 'color.chart.lime.boldest.[default]' | 'color.chart.lime.boldest.hovered' | 'color.chart.neutral.[default]' | 'color.chart.neutral.hovered' | 'color.chart.red.bold.[default]' | 'color.chart.red.bold.hovered' | 'color.chart.red.bolder.[default]' | 'color.chart.red.bolder.hovered' | 'color.chart.red.boldest.[default]' | 'color.chart.red.boldest.hovered' | 'color.chart.orange.bold.[default]' | 'color.chart.orange.bold.hovered' | 'color.chart.orange.bolder.[default]' | 'color.chart.orange.bolder.hovered' | 'color.chart.orange.boldest.[default]' | 'color.chart.orange.boldest.hovered' | 'color.chart.yellow.bold.[default]' | 'color.chart.yellow.bold.hovered' | 'color.chart.yellow.bolder.[default]' | 'color.chart.yellow.bolder.hovered' | 'color.chart.yellow.boldest.[default]' | 'color.chart.yellow.boldest.hovered' | 'color.chart.green.bold.[default]' | 'color.chart.green.bold.hovered' | 'color.chart.green.bolder.[default]' | 'color.chart.green.bolder.hovered' | 'color.chart.green.boldest.[default]' | 'color.chart.green.boldest.hovered' | 'color.chart.teal.bold.[default]' | 'color.chart.teal.bold.hovered' | 'color.chart.teal.bolder.[default]' | 'color.chart.teal.bolder.hovered' | 'color.chart.teal.boldest.[default]' | 'color.chart.teal.boldest.hovered' | 'color.chart.blue.bold.[default]' | 'color.chart.blue.bold.hovered' | 'color.chart.blue.bolder.[default]' | 'color.chart.blue.bolder.hovered' | 'color.chart.blue.boldest.[default]' | 'color.chart.blue.boldest.hovered' | 'color.chart.purple.bold.[default]' | 'color.chart.purple.bold.hovered' | 'color.chart.purple.bolder.[default]' | 'color.chart.purple.bolder.hovered' | 'color.chart.purple.boldest.[default]' | 'color.chart.purple.boldest.hovered' | 'color.chart.magenta.bold.[default]' | 'color.chart.magenta.bold.hovered' | 'color.chart.magenta.bolder.[default]' | 'color.chart.magenta.bolder.hovered' | 'color.chart.magenta.boldest.[default]' | 'color.chart.magenta.boldest.hovered' | 'color.chart.gray.bold.[default]' | 'color.chart.gray.bold.hovered' | 'color.chart.gray.bolder.[default]' | 'color.chart.gray.bolder.hovered' | 'color.chart.gray.boldest.[default]' | 'color.chart.gray.boldest.hovered' | 'color.chart.brand.[default]' | 'color.chart.brand.hovered' | 'color.chart.danger.[default].[default]' | 'color.chart.danger.[default].hovered' | 'color.chart.danger.bold.[default]' | 'color.chart.danger.bold.hovered' | 'color.chart.warning.[default].[default]' | 'color.chart.warning.[default].hovered' | 'color.chart.warning.bold.[default]' | 'color.chart.warning.bold.hovered' | 'color.chart.success.[default].[default]' | 'color.chart.success.[default].hovered' | 'color.chart.success.bold.[default]' | 'color.chart.success.bold.hovered' | 'color.chart.discovery.[default].[default]' | 'color.chart.discovery.[default].hovered' | 'color.chart.discovery.bold.[default]' | 'color.chart.discovery.bold.hovered' | 'color.chart.information.[default].[default]' | 'color.chart.information.[default].hovered' | 'color.chart.information.bold.[default]' | 'color.chart.information.bold.hovered' | 'elevation.surface.[default].[default]' | 'elevation.surface.[default].hovered' | 'elevation.surface.[default].pressed' | 'elevation.surface.overlay.[default]' | 'elevation.surface.overlay.hovered' | 'elevation.surface.overlay.pressed' | 'elevation.surface.raised.[default]' | 'elevation.surface.raised.hovered' | 'elevation.surface.raised.pressed' | 'elevation.surface.sunken' | 'elevation.shadow.overflow.[default]' | 'elevation.shadow.overflow.perimeter' | 'elevation.shadow.overflow.spread' | 'elevation.shadow.overlay' | 'elevation.shadow.raised' | 'opacity.disabled' | 'opacity.loading' | 'utility.UNSAFE.transparent' | 'border.radius.050' | 'border.radius.[default]' | 'border.radius.100' | 'border.radius.200' | 'border.radius.300' | 'border.radius.400' | 'border.radius.circle' | 'border.width.[default]' | 'border.width.indicator' | 'border.width.outline' | 'space.0' | 'space.025' | 'space.050' | 'space.075' | 'space.100' | 'space.150' | 'space.200' | 'space.250' | 'space.300' | 'space.400' | 'space.500' | 'space.600' | 'space.800' | 'space.1000' | 'font.family.monospace' | 'font.family.sans' | 'font.size.050' | 'font.size.075' | 'font.size.100' | 'font.size.200' | 'font.size.300' | 'font.size.400' | 'font.size.500' | 'font.size.600' | 'font.weight.bold' | 'font.weight.medium' | 'font.weight.regular' | 'font.weight.semibold' | 'font.lineHeight.100' | 'font.lineHeight.200' | 'font.lineHeight.300' | 'font.lineHeight.400' | 'font.lineHeight.500' | 'font.lineHeight.600';
6
+ export type InternalTokenIds = 'color.text.[default]' | 'color.text.accent.lime.[default]' | 'color.text.accent.lime.bolder' | 'color.text.accent.red.[default]' | 'color.text.accent.red.bolder' | 'color.text.accent.orange.[default]' | 'color.text.accent.orange.bolder' | 'color.text.accent.yellow.[default]' | 'color.text.accent.yellow.bolder' | 'color.text.accent.green.[default]' | 'color.text.accent.green.bolder' | 'color.text.accent.teal.[default]' | 'color.text.accent.teal.bolder' | 'color.text.accent.blue.[default]' | 'color.text.accent.blue.bolder' | 'color.text.accent.purple.[default]' | 'color.text.accent.purple.bolder' | 'color.text.accent.magenta.[default]' | 'color.text.accent.magenta.bolder' | 'color.text.accent.gray.[default]' | 'color.text.accent.gray.bolder' | 'color.text.disabled' | 'color.text.inverse' | 'color.text.selected' | 'color.text.brand' | 'color.text.danger' | 'color.text.warning.[default]' | 'color.text.warning.inverse' | 'color.text.success' | 'color.text.discovery' | 'color.text.information' | 'color.text.subtlest' | 'color.text.subtle' | 'color.link.[default]' | 'color.link.pressed' | 'color.icon.[default]' | 'color.icon.accent.lime' | 'color.icon.accent.red' | 'color.icon.accent.orange' | 'color.icon.accent.yellow' | 'color.icon.accent.green' | 'color.icon.accent.teal' | 'color.icon.accent.blue' | 'color.icon.accent.purple' | 'color.icon.accent.magenta' | 'color.icon.accent.gray' | 'color.icon.disabled' | 'color.icon.inverse' | 'color.icon.selected' | 'color.icon.brand' | 'color.icon.danger' | 'color.icon.warning.[default]' | 'color.icon.warning.inverse' | 'color.icon.success' | 'color.icon.discovery' | 'color.icon.information' | 'color.icon.subtle' | 'color.border.[default]' | 'color.border.accent.lime' | 'color.border.accent.red' | 'color.border.accent.orange' | 'color.border.accent.yellow' | 'color.border.accent.green' | 'color.border.accent.teal' | 'color.border.accent.blue' | 'color.border.accent.purple' | 'color.border.accent.magenta' | 'color.border.accent.gray' | 'color.border.disabled' | 'color.border.focused' | 'color.border.input' | 'color.border.inverse' | 'color.border.selected' | 'color.border.brand' | 'color.border.danger' | 'color.border.warning' | 'color.border.success' | 'color.border.discovery' | 'color.border.information' | 'color.border.bold' | 'color.background.accent.lime.subtlest' | 'color.background.accent.lime.subtler' | 'color.background.accent.lime.subtle' | 'color.background.accent.lime.bolder' | 'color.background.accent.red.subtlest' | 'color.background.accent.red.subtler' | 'color.background.accent.red.subtle' | 'color.background.accent.red.bolder' | 'color.background.accent.orange.subtlest' | 'color.background.accent.orange.subtler' | 'color.background.accent.orange.subtle' | 'color.background.accent.orange.bolder' | 'color.background.accent.yellow.subtlest' | 'color.background.accent.yellow.subtler' | 'color.background.accent.yellow.subtle' | 'color.background.accent.yellow.bolder' | 'color.background.accent.green.subtlest' | 'color.background.accent.green.subtler' | 'color.background.accent.green.subtle' | 'color.background.accent.green.bolder' | 'color.background.accent.teal.subtlest' | 'color.background.accent.teal.subtler' | 'color.background.accent.teal.subtle' | 'color.background.accent.teal.bolder' | 'color.background.accent.blue.subtlest' | 'color.background.accent.blue.subtler' | 'color.background.accent.blue.subtle' | 'color.background.accent.blue.bolder' | 'color.background.accent.purple.subtlest' | 'color.background.accent.purple.subtler' | 'color.background.accent.purple.subtle' | 'color.background.accent.purple.bolder' | 'color.background.accent.magenta.subtlest' | 'color.background.accent.magenta.subtler' | 'color.background.accent.magenta.subtle' | 'color.background.accent.magenta.bolder' | 'color.background.accent.gray.subtlest' | 'color.background.accent.gray.subtler' | 'color.background.accent.gray.subtle' | 'color.background.accent.gray.bolder' | 'color.background.disabled' | 'color.background.input.[default]' | 'color.background.input.hovered' | 'color.background.input.pressed' | 'color.background.inverse.subtle.[default]' | 'color.background.inverse.subtle.hovered' | 'color.background.inverse.subtle.pressed' | 'color.background.neutral.[default].[default]' | 'color.background.neutral.[default].hovered' | 'color.background.neutral.[default].pressed' | 'color.background.neutral.subtle.[default]' | 'color.background.neutral.subtle.hovered' | 'color.background.neutral.subtle.pressed' | 'color.background.neutral.bold.[default]' | 'color.background.neutral.bold.hovered' | 'color.background.neutral.bold.pressed' | 'color.background.selected.[default].[default]' | 'color.background.selected.[default].hovered' | 'color.background.selected.[default].pressed' | 'color.background.selected.bold.[default]' | 'color.background.selected.bold.hovered' | 'color.background.selected.bold.pressed' | 'color.background.brand.subtlest.[default]' | 'color.background.brand.subtlest.hovered' | 'color.background.brand.subtlest.pressed' | 'color.background.brand.bold.[default]' | 'color.background.brand.bold.hovered' | 'color.background.brand.bold.pressed' | 'color.background.brand.boldest.[default]' | 'color.background.brand.boldest.hovered' | 'color.background.brand.boldest.pressed' | 'color.background.danger.[default].[default]' | 'color.background.danger.[default].hovered' | 'color.background.danger.[default].pressed' | 'color.background.danger.bold.[default]' | 'color.background.danger.bold.hovered' | 'color.background.danger.bold.pressed' | 'color.background.warning.[default].[default]' | 'color.background.warning.[default].hovered' | 'color.background.warning.[default].pressed' | 'color.background.warning.bold.[default]' | 'color.background.warning.bold.hovered' | 'color.background.warning.bold.pressed' | 'color.background.success.[default].[default]' | 'color.background.success.[default].hovered' | 'color.background.success.[default].pressed' | 'color.background.success.bold.[default]' | 'color.background.success.bold.hovered' | 'color.background.success.bold.pressed' | 'color.background.discovery.[default].[default]' | 'color.background.discovery.[default].hovered' | 'color.background.discovery.[default].pressed' | 'color.background.discovery.bold.[default]' | 'color.background.discovery.bold.hovered' | 'color.background.discovery.bold.pressed' | 'color.background.information.[default].[default]' | 'color.background.information.[default].hovered' | 'color.background.information.[default].pressed' | 'color.background.information.bold.[default]' | 'color.background.information.bold.hovered' | 'color.background.information.bold.pressed' | 'color.blanket.[default]' | 'color.blanket.selected' | 'color.blanket.danger' | 'color.interaction.hovered' | 'color.interaction.pressed' | 'color.skeleton.[default]' | 'color.skeleton.subtle' | 'color.chart.categorical.1.[default]' | 'color.chart.categorical.1.hovered' | 'color.chart.categorical.2.[default]' | 'color.chart.categorical.2.hovered' | 'color.chart.categorical.3.[default]' | 'color.chart.categorical.3.hovered' | 'color.chart.categorical.4.[default]' | 'color.chart.categorical.4.hovered' | 'color.chart.categorical.5.[default]' | 'color.chart.categorical.5.hovered' | 'color.chart.categorical.6.[default]' | 'color.chart.categorical.6.hovered' | 'color.chart.categorical.7.[default]' | 'color.chart.categorical.7.hovered' | 'color.chart.categorical.8.[default]' | 'color.chart.categorical.8.hovered' | 'color.chart.lime.bold.[default]' | 'color.chart.lime.bold.hovered' | 'color.chart.lime.bolder.[default]' | 'color.chart.lime.bolder.hovered' | 'color.chart.lime.boldest.[default]' | 'color.chart.lime.boldest.hovered' | 'color.chart.neutral.[default]' | 'color.chart.neutral.hovered' | 'color.chart.red.bold.[default]' | 'color.chart.red.bold.hovered' | 'color.chart.red.bolder.[default]' | 'color.chart.red.bolder.hovered' | 'color.chart.red.boldest.[default]' | 'color.chart.red.boldest.hovered' | 'color.chart.orange.bold.[default]' | 'color.chart.orange.bold.hovered' | 'color.chart.orange.bolder.[default]' | 'color.chart.orange.bolder.hovered' | 'color.chart.orange.boldest.[default]' | 'color.chart.orange.boldest.hovered' | 'color.chart.yellow.bold.[default]' | 'color.chart.yellow.bold.hovered' | 'color.chart.yellow.bolder.[default]' | 'color.chart.yellow.bolder.hovered' | 'color.chart.yellow.boldest.[default]' | 'color.chart.yellow.boldest.hovered' | 'color.chart.green.bold.[default]' | 'color.chart.green.bold.hovered' | 'color.chart.green.bolder.[default]' | 'color.chart.green.bolder.hovered' | 'color.chart.green.boldest.[default]' | 'color.chart.green.boldest.hovered' | 'color.chart.teal.bold.[default]' | 'color.chart.teal.bold.hovered' | 'color.chart.teal.bolder.[default]' | 'color.chart.teal.bolder.hovered' | 'color.chart.teal.boldest.[default]' | 'color.chart.teal.boldest.hovered' | 'color.chart.blue.bold.[default]' | 'color.chart.blue.bold.hovered' | 'color.chart.blue.bolder.[default]' | 'color.chart.blue.bolder.hovered' | 'color.chart.blue.boldest.[default]' | 'color.chart.blue.boldest.hovered' | 'color.chart.purple.bold.[default]' | 'color.chart.purple.bold.hovered' | 'color.chart.purple.bolder.[default]' | 'color.chart.purple.bolder.hovered' | 'color.chart.purple.boldest.[default]' | 'color.chart.purple.boldest.hovered' | 'color.chart.magenta.bold.[default]' | 'color.chart.magenta.bold.hovered' | 'color.chart.magenta.bolder.[default]' | 'color.chart.magenta.bolder.hovered' | 'color.chart.magenta.boldest.[default]' | 'color.chart.magenta.boldest.hovered' | 'color.chart.gray.bold.[default]' | 'color.chart.gray.bold.hovered' | 'color.chart.gray.bolder.[default]' | 'color.chart.gray.bolder.hovered' | 'color.chart.gray.boldest.[default]' | 'color.chart.gray.boldest.hovered' | 'color.chart.brand.[default]' | 'color.chart.brand.hovered' | 'color.chart.danger.[default].[default]' | 'color.chart.danger.[default].hovered' | 'color.chart.danger.bold.[default]' | 'color.chart.danger.bold.hovered' | 'color.chart.warning.[default].[default]' | 'color.chart.warning.[default].hovered' | 'color.chart.warning.bold.[default]' | 'color.chart.warning.bold.hovered' | 'color.chart.success.[default].[default]' | 'color.chart.success.[default].hovered' | 'color.chart.success.bold.[default]' | 'color.chart.success.bold.hovered' | 'color.chart.discovery.[default].[default]' | 'color.chart.discovery.[default].hovered' | 'color.chart.discovery.bold.[default]' | 'color.chart.discovery.bold.hovered' | 'color.chart.information.[default].[default]' | 'color.chart.information.[default].hovered' | 'color.chart.information.bold.[default]' | 'color.chart.information.bold.hovered' | 'elevation.surface.[default].[default]' | 'elevation.surface.[default].hovered' | 'elevation.surface.[default].pressed' | 'elevation.surface.overlay.[default]' | 'elevation.surface.overlay.hovered' | 'elevation.surface.overlay.pressed' | 'elevation.surface.raised.[default]' | 'elevation.surface.raised.hovered' | 'elevation.surface.raised.pressed' | 'elevation.surface.sunken' | 'elevation.shadow.overflow.[default]' | 'elevation.shadow.overflow.perimeter' | 'elevation.shadow.overflow.spread' | 'elevation.shadow.overlay' | 'elevation.shadow.raised' | 'opacity.disabled' | 'opacity.loading' | 'utility.UNSAFE.transparent' | 'border.radius.050' | 'border.radius.[default]' | 'border.radius.100' | 'border.radius.200' | 'border.radius.300' | 'border.radius.400' | 'border.radius.circle' | 'border.width.[default]' | 'border.width.indicator' | 'border.width.outline' | 'space.0' | 'space.025' | 'space.050' | 'space.075' | 'space.100' | 'space.150' | 'space.200' | 'space.250' | 'space.300' | 'space.400' | 'space.500' | 'space.600' | 'space.800' | 'space.1000' | 'font.family.monospace' | 'font.family.sans' | 'font.size.050' | 'font.size.075' | 'font.size.100' | 'font.size.200' | 'font.size.300' | 'font.size.400' | 'font.size.500' | 'font.size.600' | 'font.weight.bold' | 'font.weight.medium' | 'font.weight.regular' | 'font.weight.semibold' | 'font.lineHeight.100' | 'font.lineHeight.200' | 'font.lineHeight.300' | 'font.lineHeight.400' | 'font.lineHeight.500' | 'font.lineHeight.600';
@@ -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::06b290588cae202ee913228aece6214e>>
3
+ * @codegen <<SignedSource::428d20219eed5e70775656c5e02efe21>>
4
4
  * @codegenCommand yarn build tokens
5
5
  */
6
- export type ActiveTokens = 'color.text' | 'color.text.accent.lime' | 'color.text.accent.lime.bolder' | 'color.text.accent.red' | 'color.text.accent.red.bolder' | 'color.text.accent.orange' | 'color.text.accent.orange.bolder' | 'color.text.accent.yellow' | 'color.text.accent.yellow.bolder' | 'color.text.accent.green' | 'color.text.accent.green.bolder' | 'color.text.accent.teal' | 'color.text.accent.teal.bolder' | 'color.text.accent.blue' | 'color.text.accent.blue.bolder' | 'color.text.accent.purple' | 'color.text.accent.purple.bolder' | 'color.text.accent.magenta' | 'color.text.accent.magenta.bolder' | 'color.text.accent.gray' | 'color.text.accent.gray.bolder' | 'color.text.disabled' | 'color.text.inverse' | 'color.text.selected' | 'color.text.brand' | 'color.text.danger' | 'color.text.warning' | 'color.text.warning.inverse' | 'color.text.success' | 'color.text.discovery' | 'color.text.information' | 'color.text.subtlest' | 'color.text.subtle' | 'color.link' | 'color.link.pressed' | 'color.icon' | 'color.icon.accent.lime' | 'color.icon.accent.red' | 'color.icon.accent.orange' | 'color.icon.accent.yellow' | 'color.icon.accent.green' | 'color.icon.accent.teal' | 'color.icon.accent.blue' | 'color.icon.accent.purple' | 'color.icon.accent.magenta' | 'color.icon.accent.gray' | 'color.icon.disabled' | 'color.icon.inverse' | 'color.icon.selected' | 'color.icon.brand' | 'color.icon.danger' | 'color.icon.warning' | 'color.icon.warning.inverse' | 'color.icon.success' | 'color.icon.discovery' | 'color.icon.information' | 'color.icon.subtle' | 'color.border' | 'color.border.accent.lime' | 'color.border.accent.red' | 'color.border.accent.orange' | 'color.border.accent.yellow' | 'color.border.accent.green' | 'color.border.accent.teal' | 'color.border.accent.blue' | 'color.border.accent.purple' | 'color.border.accent.magenta' | 'color.border.accent.gray' | 'color.border.disabled' | 'color.border.focused' | 'color.border.input' | 'color.border.inverse' | 'color.border.selected' | 'color.border.brand' | 'color.border.danger' | 'color.border.warning' | 'color.border.success' | 'color.border.discovery' | 'color.border.information' | 'color.border.bold' | 'color.background.accent.lime.subtlest' | 'color.background.accent.lime.subtler' | 'color.background.accent.lime.subtle' | 'color.background.accent.lime.bolder' | 'color.background.accent.red.subtlest' | 'color.background.accent.red.subtler' | 'color.background.accent.red.subtle' | 'color.background.accent.red.bolder' | 'color.background.accent.orange.subtlest' | 'color.background.accent.orange.subtler' | 'color.background.accent.orange.subtle' | 'color.background.accent.orange.bolder' | 'color.background.accent.yellow.subtlest' | 'color.background.accent.yellow.subtler' | 'color.background.accent.yellow.subtle' | 'color.background.accent.yellow.bolder' | 'color.background.accent.green.subtlest' | 'color.background.accent.green.subtler' | 'color.background.accent.green.subtle' | 'color.background.accent.green.bolder' | 'color.background.accent.teal.subtlest' | 'color.background.accent.teal.subtler' | 'color.background.accent.teal.subtle' | 'color.background.accent.teal.bolder' | 'color.background.accent.blue.subtlest' | 'color.background.accent.blue.subtler' | 'color.background.accent.blue.subtle' | 'color.background.accent.blue.bolder' | 'color.background.accent.purple.subtlest' | 'color.background.accent.purple.subtler' | 'color.background.accent.purple.subtle' | 'color.background.accent.purple.bolder' | 'color.background.accent.magenta.subtlest' | 'color.background.accent.magenta.subtler' | 'color.background.accent.magenta.subtle' | 'color.background.accent.magenta.bolder' | 'color.background.accent.gray.subtlest' | 'color.background.accent.gray.subtler' | 'color.background.accent.gray.subtle' | 'color.background.accent.gray.bolder' | 'color.background.disabled' | 'color.background.input' | 'color.background.input.hovered' | 'color.background.input.pressed' | 'color.background.inverse.subtle' | 'color.background.inverse.subtle.hovered' | 'color.background.inverse.subtle.pressed' | 'color.background.neutral' | 'color.background.neutral.hovered' | 'color.background.neutral.pressed' | 'color.background.neutral.subtle' | 'color.background.neutral.subtle.hovered' | 'color.background.neutral.subtle.pressed' | 'color.background.neutral.bold' | 'color.background.neutral.bold.hovered' | 'color.background.neutral.bold.pressed' | 'color.background.selected' | 'color.background.selected.hovered' | 'color.background.selected.pressed' | 'color.background.selected.bold' | 'color.background.selected.bold.hovered' | 'color.background.selected.bold.pressed' | 'color.background.brand.bold' | 'color.background.brand.bold.hovered' | 'color.background.brand.bold.pressed' | 'color.background.danger' | 'color.background.danger.hovered' | 'color.background.danger.pressed' | 'color.background.danger.bold' | 'color.background.danger.bold.hovered' | 'color.background.danger.bold.pressed' | 'color.background.warning' | 'color.background.warning.hovered' | 'color.background.warning.pressed' | 'color.background.warning.bold' | 'color.background.warning.bold.hovered' | 'color.background.warning.bold.pressed' | 'color.background.success' | 'color.background.success.hovered' | 'color.background.success.pressed' | 'color.background.success.bold' | 'color.background.success.bold.hovered' | 'color.background.success.bold.pressed' | 'color.background.discovery' | 'color.background.discovery.hovered' | 'color.background.discovery.pressed' | 'color.background.discovery.bold' | 'color.background.discovery.bold.hovered' | 'color.background.discovery.bold.pressed' | 'color.background.information' | 'color.background.information.hovered' | 'color.background.information.pressed' | 'color.background.information.bold' | 'color.background.information.bold.hovered' | 'color.background.information.bold.pressed' | 'color.blanket' | 'color.blanket.selected' | 'color.blanket.danger' | 'color.interaction.hovered' | 'color.interaction.pressed' | 'color.skeleton' | 'color.skeleton.subtle' | 'color.chart.categorical.1' | 'color.chart.categorical.1.hovered' | 'color.chart.categorical.2' | 'color.chart.categorical.2.hovered' | 'color.chart.categorical.3' | 'color.chart.categorical.3.hovered' | 'color.chart.categorical.4' | 'color.chart.categorical.4.hovered' | 'color.chart.categorical.5' | 'color.chart.categorical.5.hovered' | 'color.chart.categorical.6' | 'color.chart.categorical.6.hovered' | 'color.chart.categorical.7' | 'color.chart.categorical.7.hovered' | 'color.chart.categorical.8' | 'color.chart.categorical.8.hovered' | 'color.chart.lime.bold' | 'color.chart.lime.bold.hovered' | 'color.chart.lime.bolder' | 'color.chart.lime.bolder.hovered' | 'color.chart.lime.boldest' | 'color.chart.lime.boldest.hovered' | 'color.chart.neutral' | 'color.chart.neutral.hovered' | 'color.chart.red.bold' | 'color.chart.red.bold.hovered' | 'color.chart.red.bolder' | 'color.chart.red.bolder.hovered' | 'color.chart.red.boldest' | 'color.chart.red.boldest.hovered' | 'color.chart.orange.bold' | 'color.chart.orange.bold.hovered' | 'color.chart.orange.bolder' | 'color.chart.orange.bolder.hovered' | 'color.chart.orange.boldest' | 'color.chart.orange.boldest.hovered' | 'color.chart.yellow.bold' | 'color.chart.yellow.bold.hovered' | 'color.chart.yellow.bolder' | 'color.chart.yellow.bolder.hovered' | 'color.chart.yellow.boldest' | 'color.chart.yellow.boldest.hovered' | 'color.chart.green.bold' | 'color.chart.green.bold.hovered' | 'color.chart.green.bolder' | 'color.chart.green.bolder.hovered' | 'color.chart.green.boldest' | 'color.chart.green.boldest.hovered' | 'color.chart.teal.bold' | 'color.chart.teal.bold.hovered' | 'color.chart.teal.bolder' | 'color.chart.teal.bolder.hovered' | 'color.chart.teal.boldest' | 'color.chart.teal.boldest.hovered' | 'color.chart.blue.bold' | 'color.chart.blue.bold.hovered' | 'color.chart.blue.bolder' | 'color.chart.blue.bolder.hovered' | 'color.chart.blue.boldest' | 'color.chart.blue.boldest.hovered' | 'color.chart.purple.bold' | 'color.chart.purple.bold.hovered' | 'color.chart.purple.bolder' | 'color.chart.purple.bolder.hovered' | 'color.chart.purple.boldest' | 'color.chart.purple.boldest.hovered' | 'color.chart.magenta.bold' | 'color.chart.magenta.bold.hovered' | 'color.chart.magenta.bolder' | 'color.chart.magenta.bolder.hovered' | 'color.chart.magenta.boldest' | 'color.chart.magenta.boldest.hovered' | 'color.chart.gray.bold' | 'color.chart.gray.bold.hovered' | 'color.chart.gray.bolder' | 'color.chart.gray.bolder.hovered' | 'color.chart.gray.boldest' | 'color.chart.gray.boldest.hovered' | 'color.chart.brand' | 'color.chart.brand.hovered' | 'color.chart.danger' | 'color.chart.danger.hovered' | 'color.chart.danger.bold' | 'color.chart.danger.bold.hovered' | 'color.chart.warning' | 'color.chart.warning.hovered' | 'color.chart.warning.bold' | 'color.chart.warning.bold.hovered' | 'color.chart.success' | 'color.chart.success.hovered' | 'color.chart.success.bold' | 'color.chart.success.bold.hovered' | 'color.chart.discovery' | 'color.chart.discovery.hovered' | 'color.chart.discovery.bold' | 'color.chart.discovery.bold.hovered' | 'color.chart.information' | 'color.chart.information.hovered' | 'color.chart.information.bold' | 'color.chart.information.bold.hovered' | 'elevation.surface' | 'elevation.surface.hovered' | 'elevation.surface.pressed' | 'elevation.surface.overlay' | 'elevation.surface.overlay.hovered' | 'elevation.surface.overlay.pressed' | 'elevation.surface.raised' | 'elevation.surface.raised.hovered' | 'elevation.surface.raised.pressed' | 'elevation.surface.sunken' | 'elevation.shadow.overflow' | 'elevation.shadow.overflow.perimeter' | 'elevation.shadow.overflow.spread' | 'elevation.shadow.overlay' | 'elevation.shadow.raised' | 'opacity.disabled' | 'opacity.loading' | 'utility.UNSAFE.transparent' | 'border.radius.050' | 'border.radius' | 'border.radius.100' | 'border.radius.200' | 'border.radius.300' | 'border.radius.400' | 'border.radius.circle' | 'border.width' | 'border.width.indicator' | 'border.width.outline' | 'space.0' | 'space.025' | 'space.050' | 'space.075' | 'space.100' | 'space.150' | 'space.200' | 'space.250' | 'space.300' | 'space.400' | 'space.500' | 'space.600' | 'space.800' | 'space.1000' | 'font.family.monospace' | 'font.family.sans' | 'font.size.050' | 'font.size.075' | 'font.size.100' | 'font.size.200' | 'font.size.300' | 'font.size.400' | 'font.size.500' | 'font.size.600' | 'font.weight.bold' | 'font.weight.medium' | 'font.weight.regular' | 'font.weight.semibold' | 'font.lineHeight.100' | 'font.lineHeight.200' | 'font.lineHeight.300' | 'font.lineHeight.400' | 'font.lineHeight.500' | 'font.lineHeight.600';
6
+ export type ActiveTokens = 'color.text' | 'color.text.accent.lime' | 'color.text.accent.lime.bolder' | 'color.text.accent.red' | 'color.text.accent.red.bolder' | 'color.text.accent.orange' | 'color.text.accent.orange.bolder' | 'color.text.accent.yellow' | 'color.text.accent.yellow.bolder' | 'color.text.accent.green' | 'color.text.accent.green.bolder' | 'color.text.accent.teal' | 'color.text.accent.teal.bolder' | 'color.text.accent.blue' | 'color.text.accent.blue.bolder' | 'color.text.accent.purple' | 'color.text.accent.purple.bolder' | 'color.text.accent.magenta' | 'color.text.accent.magenta.bolder' | 'color.text.accent.gray' | 'color.text.accent.gray.bolder' | 'color.text.disabled' | 'color.text.inverse' | 'color.text.selected' | 'color.text.brand' | 'color.text.danger' | 'color.text.warning' | 'color.text.warning.inverse' | 'color.text.success' | 'color.text.discovery' | 'color.text.information' | 'color.text.subtlest' | 'color.text.subtle' | 'color.link' | 'color.link.pressed' | 'color.icon' | 'color.icon.accent.lime' | 'color.icon.accent.red' | 'color.icon.accent.orange' | 'color.icon.accent.yellow' | 'color.icon.accent.green' | 'color.icon.accent.teal' | 'color.icon.accent.blue' | 'color.icon.accent.purple' | 'color.icon.accent.magenta' | 'color.icon.accent.gray' | 'color.icon.disabled' | 'color.icon.inverse' | 'color.icon.selected' | 'color.icon.brand' | 'color.icon.danger' | 'color.icon.warning' | 'color.icon.warning.inverse' | 'color.icon.success' | 'color.icon.discovery' | 'color.icon.information' | 'color.icon.subtle' | 'color.border' | 'color.border.accent.lime' | 'color.border.accent.red' | 'color.border.accent.orange' | 'color.border.accent.yellow' | 'color.border.accent.green' | 'color.border.accent.teal' | 'color.border.accent.blue' | 'color.border.accent.purple' | 'color.border.accent.magenta' | 'color.border.accent.gray' | 'color.border.disabled' | 'color.border.focused' | 'color.border.input' | 'color.border.inverse' | 'color.border.selected' | 'color.border.brand' | 'color.border.danger' | 'color.border.warning' | 'color.border.success' | 'color.border.discovery' | 'color.border.information' | 'color.border.bold' | 'color.background.accent.lime.subtlest' | 'color.background.accent.lime.subtler' | 'color.background.accent.lime.subtle' | 'color.background.accent.lime.bolder' | 'color.background.accent.red.subtlest' | 'color.background.accent.red.subtler' | 'color.background.accent.red.subtle' | 'color.background.accent.red.bolder' | 'color.background.accent.orange.subtlest' | 'color.background.accent.orange.subtler' | 'color.background.accent.orange.subtle' | 'color.background.accent.orange.bolder' | 'color.background.accent.yellow.subtlest' | 'color.background.accent.yellow.subtler' | 'color.background.accent.yellow.subtle' | 'color.background.accent.yellow.bolder' | 'color.background.accent.green.subtlest' | 'color.background.accent.green.subtler' | 'color.background.accent.green.subtle' | 'color.background.accent.green.bolder' | 'color.background.accent.teal.subtlest' | 'color.background.accent.teal.subtler' | 'color.background.accent.teal.subtle' | 'color.background.accent.teal.bolder' | 'color.background.accent.blue.subtlest' | 'color.background.accent.blue.subtler' | 'color.background.accent.blue.subtle' | 'color.background.accent.blue.bolder' | 'color.background.accent.purple.subtlest' | 'color.background.accent.purple.subtler' | 'color.background.accent.purple.subtle' | 'color.background.accent.purple.bolder' | 'color.background.accent.magenta.subtlest' | 'color.background.accent.magenta.subtler' | 'color.background.accent.magenta.subtle' | 'color.background.accent.magenta.bolder' | 'color.background.accent.gray.subtlest' | 'color.background.accent.gray.subtler' | 'color.background.accent.gray.subtle' | 'color.background.accent.gray.bolder' | 'color.background.disabled' | 'color.background.input' | 'color.background.input.hovered' | 'color.background.input.pressed' | 'color.background.inverse.subtle' | 'color.background.inverse.subtle.hovered' | 'color.background.inverse.subtle.pressed' | 'color.background.neutral' | 'color.background.neutral.hovered' | 'color.background.neutral.pressed' | 'color.background.neutral.subtle' | 'color.background.neutral.subtle.hovered' | 'color.background.neutral.subtle.pressed' | 'color.background.neutral.bold' | 'color.background.neutral.bold.hovered' | 'color.background.neutral.bold.pressed' | 'color.background.selected' | 'color.background.selected.hovered' | 'color.background.selected.pressed' | 'color.background.selected.bold' | 'color.background.selected.bold.hovered' | 'color.background.selected.bold.pressed' | 'color.background.brand.subtlest' | 'color.background.brand.subtlest.hovered' | 'color.background.brand.subtlest.pressed' | 'color.background.brand.bold' | 'color.background.brand.bold.hovered' | 'color.background.brand.bold.pressed' | 'color.background.brand.boldest' | 'color.background.brand.boldest.hovered' | 'color.background.brand.boldest.pressed' | 'color.background.danger' | 'color.background.danger.hovered' | 'color.background.danger.pressed' | 'color.background.danger.bold' | 'color.background.danger.bold.hovered' | 'color.background.danger.bold.pressed' | 'color.background.warning' | 'color.background.warning.hovered' | 'color.background.warning.pressed' | 'color.background.warning.bold' | 'color.background.warning.bold.hovered' | 'color.background.warning.bold.pressed' | 'color.background.success' | 'color.background.success.hovered' | 'color.background.success.pressed' | 'color.background.success.bold' | 'color.background.success.bold.hovered' | 'color.background.success.bold.pressed' | 'color.background.discovery' | 'color.background.discovery.hovered' | 'color.background.discovery.pressed' | 'color.background.discovery.bold' | 'color.background.discovery.bold.hovered' | 'color.background.discovery.bold.pressed' | 'color.background.information' | 'color.background.information.hovered' | 'color.background.information.pressed' | 'color.background.information.bold' | 'color.background.information.bold.hovered' | 'color.background.information.bold.pressed' | 'color.blanket' | 'color.blanket.selected' | 'color.blanket.danger' | 'color.interaction.hovered' | 'color.interaction.pressed' | 'color.skeleton' | 'color.skeleton.subtle' | 'color.chart.categorical.1' | 'color.chart.categorical.1.hovered' | 'color.chart.categorical.2' | 'color.chart.categorical.2.hovered' | 'color.chart.categorical.3' | 'color.chart.categorical.3.hovered' | 'color.chart.categorical.4' | 'color.chart.categorical.4.hovered' | 'color.chart.categorical.5' | 'color.chart.categorical.5.hovered' | 'color.chart.categorical.6' | 'color.chart.categorical.6.hovered' | 'color.chart.categorical.7' | 'color.chart.categorical.7.hovered' | 'color.chart.categorical.8' | 'color.chart.categorical.8.hovered' | 'color.chart.lime.bold' | 'color.chart.lime.bold.hovered' | 'color.chart.lime.bolder' | 'color.chart.lime.bolder.hovered' | 'color.chart.lime.boldest' | 'color.chart.lime.boldest.hovered' | 'color.chart.neutral' | 'color.chart.neutral.hovered' | 'color.chart.red.bold' | 'color.chart.red.bold.hovered' | 'color.chart.red.bolder' | 'color.chart.red.bolder.hovered' | 'color.chart.red.boldest' | 'color.chart.red.boldest.hovered' | 'color.chart.orange.bold' | 'color.chart.orange.bold.hovered' | 'color.chart.orange.bolder' | 'color.chart.orange.bolder.hovered' | 'color.chart.orange.boldest' | 'color.chart.orange.boldest.hovered' | 'color.chart.yellow.bold' | 'color.chart.yellow.bold.hovered' | 'color.chart.yellow.bolder' | 'color.chart.yellow.bolder.hovered' | 'color.chart.yellow.boldest' | 'color.chart.yellow.boldest.hovered' | 'color.chart.green.bold' | 'color.chart.green.bold.hovered' | 'color.chart.green.bolder' | 'color.chart.green.bolder.hovered' | 'color.chart.green.boldest' | 'color.chart.green.boldest.hovered' | 'color.chart.teal.bold' | 'color.chart.teal.bold.hovered' | 'color.chart.teal.bolder' | 'color.chart.teal.bolder.hovered' | 'color.chart.teal.boldest' | 'color.chart.teal.boldest.hovered' | 'color.chart.blue.bold' | 'color.chart.blue.bold.hovered' | 'color.chart.blue.bolder' | 'color.chart.blue.bolder.hovered' | 'color.chart.blue.boldest' | 'color.chart.blue.boldest.hovered' | 'color.chart.purple.bold' | 'color.chart.purple.bold.hovered' | 'color.chart.purple.bolder' | 'color.chart.purple.bolder.hovered' | 'color.chart.purple.boldest' | 'color.chart.purple.boldest.hovered' | 'color.chart.magenta.bold' | 'color.chart.magenta.bold.hovered' | 'color.chart.magenta.bolder' | 'color.chart.magenta.bolder.hovered' | 'color.chart.magenta.boldest' | 'color.chart.magenta.boldest.hovered' | 'color.chart.gray.bold' | 'color.chart.gray.bold.hovered' | 'color.chart.gray.bolder' | 'color.chart.gray.bolder.hovered' | 'color.chart.gray.boldest' | 'color.chart.gray.boldest.hovered' | 'color.chart.brand' | 'color.chart.brand.hovered' | 'color.chart.danger' | 'color.chart.danger.hovered' | 'color.chart.danger.bold' | 'color.chart.danger.bold.hovered' | 'color.chart.warning' | 'color.chart.warning.hovered' | 'color.chart.warning.bold' | 'color.chart.warning.bold.hovered' | 'color.chart.success' | 'color.chart.success.hovered' | 'color.chart.success.bold' | 'color.chart.success.bold.hovered' | 'color.chart.discovery' | 'color.chart.discovery.hovered' | 'color.chart.discovery.bold' | 'color.chart.discovery.bold.hovered' | 'color.chart.information' | 'color.chart.information.hovered' | 'color.chart.information.bold' | 'color.chart.information.bold.hovered' | 'elevation.surface' | 'elevation.surface.hovered' | 'elevation.surface.pressed' | 'elevation.surface.overlay' | 'elevation.surface.overlay.hovered' | 'elevation.surface.overlay.pressed' | 'elevation.surface.raised' | 'elevation.surface.raised.hovered' | 'elevation.surface.raised.pressed' | 'elevation.surface.sunken' | 'elevation.shadow.overflow' | 'elevation.shadow.overflow.perimeter' | 'elevation.shadow.overflow.spread' | 'elevation.shadow.overlay' | 'elevation.shadow.raised' | 'opacity.disabled' | 'opacity.loading' | 'utility.UNSAFE.transparent' | 'border.radius.050' | 'border.radius' | 'border.radius.100' | 'border.radius.200' | 'border.radius.300' | 'border.radius.400' | 'border.radius.circle' | 'border.width' | 'border.width.indicator' | 'border.width.outline' | 'space.0' | 'space.025' | 'space.050' | 'space.075' | 'space.100' | 'space.150' | 'space.200' | 'space.250' | 'space.300' | 'space.400' | 'space.500' | 'space.600' | 'space.800' | 'space.1000' | 'font.family.monospace' | 'font.family.sans' | 'font.size.050' | 'font.size.075' | 'font.size.100' | 'font.size.200' | 'font.size.300' | 'font.size.400' | 'font.size.500' | 'font.size.600' | 'font.weight.bold' | 'font.weight.medium' | 'font.weight.regular' | 'font.weight.semibold' | 'font.lineHeight.100' | 'font.lineHeight.200' | 'font.lineHeight.300' | 'font.lineHeight.400' | 'font.lineHeight.500' | 'font.lineHeight.600';
@@ -1,5 +1,6 @@
1
1
  export declare const THEME_DATA_ATTRIBUTE = "data-theme";
2
2
  export declare const COLOR_MODE_ATTRIBUTE = "data-color-mode";
3
+ export declare const CUSTOM_THEME_ATTRIBUTE = "data-custom-theme";
3
4
  export declare const DEFAULT_THEME = "light";
4
5
  export declare const CSS_PREFIX = "ds";
5
6
  export declare const CSS_VAR_FULL: string[];
@@ -0,0 +1,30 @@
1
+ import { ThemeState, ThemeStyles } from './set-global-theme';
2
+ 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
+ /**
9
+ *
10
+ * @param themeSchema The schema of available themes
11
+ * @returns a string with the CSS for the custom theme
12
+ */
13
+ /**
14
+ * Takes a color mode and custom branding options, and returns an array of objects for use in applying custom styles to the document head.
15
+ * 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.
16
+ *
17
+ * @param {Object<string, string>} themeState The themes and color mode that should be applied.
18
+ * @param {string} themeState.colorMode Determines which color theme is applied
19
+ * @param {Object} themeState.UNSAFE_themeOptions The custom branding options to be used for custom theme generation
20
+ *
21
+ * @returns A Promise of an object array, containing theme IDs, data-attributes to attach to the theme, and the theme CSS.
22
+ * If an error is encountered while loading themes, the themes array will be empty.
23
+ */
24
+ export declare function getCustomThemeStyles(themeState: Partial<ThemeState> & {
25
+ UNSAFE_themeOptions: CustomBrandSchema;
26
+ }): Promise<ThemeStyles[]>;
27
+ export declare function loadAndAppendCustomThemeCss(themeState: Partial<ThemeState> & {
28
+ UNSAFE_themeOptions: CustomBrandSchema;
29
+ }): Promise<void>;
30
+ export {};
@@ -6,6 +6,7 @@ export type { CSSToken } from './artifacts/token-names';
6
6
  export type { ActiveTokens } from './artifacts/types';
7
7
  export type { ThemeColorModes, Themes, ThemeIds } from './theme-config';
8
8
  export type { Groups, OpacityToken, PaintToken, RawToken, ShadowToken, SpacingToken, ShapeToken, } from './types';
9
+ export type { CustomBrandSchema } from './custom-theme';
9
10
  export { default as themeConfig } from './theme-config';
10
11
  export { useThemeObserver } from './use-theme-observer';
11
12
  export { ThemeMutationObserver } from './theme-mutation-observer';
@@ -1,4 +1,5 @@
1
1
  import { UnbindFn } from 'bind-event-listener';
2
+ import { CustomBrandSchema } from './custom-theme';
2
3
  import { ThemeColorModes, ThemeIds, ThemeIdsWithOverrides } from './theme-config';
3
4
  export interface ThemeState {
4
5
  light: Extract<ThemeIds, 'light' | 'dark' | 'legacy-dark' | 'legacy-light'>;
@@ -7,10 +8,12 @@ export interface ThemeState {
7
8
  shape?: Extract<ThemeIds, 'shape'>;
8
9
  spacing?: Extract<ThemeIds, 'spacing'>;
9
10
  typography?: Extract<ThemeIds, 'typography'>;
11
+ UNSAFE_themeOptions?: CustomBrandSchema;
10
12
  }
11
13
  export interface ActiveThemeState extends ThemeState {
12
14
  colorMode: Exclude<ThemeColorModes, 'auto'>;
13
15
  }
16
+ export declare const themeStateDefaults: ThemeState;
14
17
  /**
15
18
  * Sets the theme globally at runtime. This updates the `data-theme` and `data-color-mode` attributes on your page's <html> tag.
16
19
  *
@@ -21,6 +24,7 @@ export interface ActiveThemeState extends ThemeState {
21
24
  * @param {string} themeState.shape The shape theme to be applied.
22
25
  * @param {string} themeState.spacing The spacing theme to be applied.
23
26
  * @param {string} themeState.typography The typography theme to be applied.
27
+ * @param {Object} themeState.UNSAFE_themeOptions The custom branding options to be used for custom theme generation
24
28
  * @param {function} themeLoader Callback function used to override the default theme loading functionality.
25
29
  *
26
30
  * @returns A Promise of an unbind function, that can be used to stop listening for changes to system theme.
@@ -30,7 +34,7 @@ export interface ActiveThemeState extends ThemeState {
30
34
  * setGlobalTheme({colorMode: 'auto', light: 'light', dark: 'dark', spacing: 'spacing'});
31
35
  * ```
32
36
  */
33
- declare const setGlobalTheme: ({ colorMode, dark, light, shape, spacing, typography, }?: Partial<ThemeState>, themeLoader?: ((id: ThemeIdsWithOverrides) => void | Promise<void>) | undefined) => Promise<UnbindFn>;
37
+ declare const setGlobalTheme: ({ colorMode, dark, light, shape, spacing, typography, UNSAFE_themeOptions, }?: Partial<ThemeState>, themeLoader?: ((id: ThemeIdsWithOverrides) => void | Promise<void>) | undefined) => Promise<UnbindFn>;
34
38
  export interface ThemeStyles {
35
39
  id: ThemeIdsWithOverrides;
36
40
  attrs: Record<string, string>;
@@ -47,9 +51,10 @@ export interface ThemeStyles {
47
51
  * @param {string} themeState.shape The shape theme to be applied.
48
52
  * @param {string} themeState.spacing The spacing theme to be applied.
49
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
50
55
  *
51
56
  * @returns A Promise of an object array, containing theme IDs, data-attributes to attach to the theme, and the theme CSS.
52
- * If an error is encountered while loading themes, the themes arrav will be emptv.
57
+ * If an error is encountered while loading themes, the themes array will be empty.
53
58
  */
54
59
  export declare const getThemeStyles: (preferences?: Partial<ThemeState> | 'all') => Promise<ThemeStyles[]>;
55
60
  /**
@@ -62,10 +67,11 @@ export declare const getThemeStyles: (preferences?: Partial<ThemeState> | 'all')
62
67
  * @param {string} themeState.light The color theme to be applied when the color mode resolves to 'light'.
63
68
  * @param {string} themeState.spacing The spacing theme to be applied.
64
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
65
71
  *
66
72
  * @returns {Object} Object of HTML attributes to be applied to the document root
67
73
  */
68
- export declare const getThemeHtmlAttrs: ({ colorMode, dark, light, shape, spacing, typography, }?: Partial<ThemeState>) => Record<string, string>;
74
+ export declare const getThemeHtmlAttrs: ({ colorMode, dark, light, shape, spacing, typography, UNSAFE_themeOptions, }?: Partial<ThemeState>) => Record<string, string>;
69
75
  /**
70
76
  * Provides a script that, when executed before paint, sets the `data-color-mode` attribute based on the current system theme,
71
77
  * to enable SSR support for automatic theme switching, avoid a flash of un-themed content on first paint.
@@ -184,11 +184,21 @@ export interface BackgroundColorTokenSchema<BaseToken> {
184
184
  };
185
185
  };
186
186
  brand: {
187
+ subtlest: {
188
+ '[default]': PaintToken<BaseToken>;
189
+ hovered: PaintToken<BaseToken>;
190
+ pressed: PaintToken<BaseToken>;
191
+ };
187
192
  bold: {
188
193
  '[default]': PaintToken<BaseToken>;
189
194
  hovered: PaintToken<BaseToken>;
190
195
  pressed: PaintToken<BaseToken>;
191
196
  };
197
+ boldest: {
198
+ '[default]': PaintToken<BaseToken>;
199
+ hovered: PaintToken<BaseToken>;
200
+ pressed: PaintToken<BaseToken>;
201
+ };
192
202
  };
193
203
  selected: {
194
204
  '[default]': {
@@ -0,0 +1,10 @@
1
+ export declare const isValidBrandHex: (hex: string) => boolean;
2
+ export declare function rgbToHex(r: number, g: number, b: number): string;
3
+ export declare function getAlpha(hex: string): number;
4
+ export declare function hexToRgbA(hex: string): [number, number, number, number];
5
+ export declare function hexToRgb(hex: string): [number, number, number];
6
+ export declare function hexToHSL(hex: string): [number, number, number];
7
+ export declare function HSLToRGB(h: number, s: number, l: number): [number, number, number];
8
+ export declare function relativeLuminanceW3C(r: number, g: number, b: number): number;
9
+ export declare function getContrastRatio(foreground: string, background: string): number;
10
+ export declare function deltaE(rgbA: number[], rgbB: number[]): number;
@@ -0,0 +1,11 @@
1
+ import tokens from '../artifacts/token-names';
2
+ import { CustomBrandSchema } from '../custom-theme';
3
+ import { ThemeColorModes } from '../theme-config';
4
+ type Token = keyof typeof tokens;
5
+ type ThemeAttributeId = 'light' | 'dark';
6
+ export declare function findMissingCustomStyleElements(UNSAFE_themeOptions: CustomBrandSchema, mode: ThemeColorModes): ThemeAttributeId[];
7
+ export declare function limitSizeOfCustomStyleElements(sizeThreshold: number): void;
8
+ export declare function reduceTokenMap(tokenMap: {
9
+ [key in Token]?: number;
10
+ }, themeRamp: string[]): string;
11
+ export {};
@@ -0,0 +1,20 @@
1
+ import tokens from '../artifacts/token-names';
2
+ type Token = keyof typeof tokens;
3
+ interface AdditionalContrastCheck {
4
+ foreground: Token;
5
+ backgroundLight: Token;
6
+ backgroundDark: Token;
7
+ desiredContrast: number;
8
+ updatedTokens: Token[];
9
+ }
10
+ export declare const additionalChecks: AdditionalContrastCheck[];
11
+ export declare const additionalContrastChecker: ({ customThemeTokenMap, mode, themeRamp, }: {
12
+ customThemeTokenMap: {
13
+ [key: string]: number;
14
+ };
15
+ mode: 'light' | 'dark';
16
+ themeRamp: string[];
17
+ }) => {
18
+ [key: string]: number;
19
+ };
20
+ export {};
@@ -0,0 +1,19 @@
1
+ import tokens from '../artifacts/token-names';
2
+ import { CSSColor } from '../custom-theme';
3
+ import { ThemeColorModes } from '../theme-config';
4
+ type Token = keyof typeof tokens;
5
+ type TokenMap = {
6
+ [key in Token]?: number;
7
+ };
8
+ type Mode = 'light' | 'dark';
9
+ export declare const getClosestColorIndex: (themeRamp: CSSColor[], brandColor: CSSColor) => number;
10
+ export declare const generateColors: (brandColor: CSSColor) => CSSColor[];
11
+ export declare const generateTokenMap: (brandColor: CSSColor, mode: ThemeColorModes, themeRamp?: CSSColor[]) => {
12
+ light?: TokenMap | undefined;
13
+ dark?: TokenMap | undefined;
14
+ };
15
+ export declare const generateTokenMapWithContrastCheck: (brandColor: CSSColor, mode: ThemeColorModes, themeRamp?: CSSColor[]) => {
16
+ light?: TokenMap | undefined;
17
+ dark?: TokenMap | undefined;
18
+ };
19
+ export {};
@@ -0,0 +1 @@
1
+ export declare const hash: (str: string) => string;
@@ -0,0 +1,131 @@
1
+ /**
2
+ * Below lines are copied from @material/material-color-utilities.
3
+ * Do not modify it.
4
+ */
5
+ /**
6
+ * Converts a color from RGB components to ARGB format.
7
+ */
8
+ export declare function argbFromRgb(red: number, green: number, blue: number): number;
9
+ /**
10
+ * Converts a color from linear RGB components to ARGB format.
11
+ */
12
+ export declare function argbFromLinrgb(linrgb: number[]): number;
13
+ /**
14
+ * Returns the alpha component of a color in ARGB format.
15
+ */
16
+ export declare function alphaFromArgb(argb: number): number;
17
+ /**
18
+ * Returns the red component of a color in ARGB format.
19
+ */
20
+ export declare function redFromArgb(argb: number): number;
21
+ /**
22
+ * Returns the green component of a color in ARGB format.
23
+ */
24
+ export declare function greenFromArgb(argb: number): number;
25
+ /**
26
+ * Returns the blue component of a color in ARGB format.
27
+ */
28
+ export declare function blueFromArgb(argb: number): number;
29
+ /**
30
+ * Returns whether a color in ARGB format is opaque.
31
+ */
32
+ export declare function isOpaque(argb: number): boolean;
33
+ /**
34
+ * Converts a color from ARGB to XYZ.
35
+ */
36
+ export declare function argbFromXyz(x: number, y: number, z: number): number;
37
+ /**
38
+ * Converts a color from XYZ to ARGB.
39
+ */
40
+ export declare function xyzFromArgb(argb: number): number[];
41
+ /**
42
+ * Converts an L* value to an ARGB representation.
43
+ *
44
+ * @param lstar L* in L*a*b*
45
+ * @return ARGB representation of grayscale color with lightness
46
+ * matching L*
47
+ */
48
+ export declare function argbFromLstar(lstar: number): number;
49
+ /**
50
+ * Computes the L* value of a color in ARGB representation.
51
+ *
52
+ * @param argb ARGB representation of a color
53
+ * @return L*, from L*a*b*, coordinate of the color
54
+ */
55
+ export declare function lstarFromArgb(argb: number): number;
56
+ /**
57
+ * Converts an L* value to a Y value.
58
+ *
59
+ * L* in L*a*b* and Y in XYZ measure the same quantity, luminance.
60
+ *
61
+ * L* measures perceptual luminance, a linear scale. Y in XYZ
62
+ * measures relative luminance, a logarithmic scale.
63
+ *
64
+ * @param lstar L* in L*a*b*
65
+ * @return Y in XYZ
66
+ */
67
+ export declare function yFromLstar(lstar: number): number;
68
+ /**
69
+ * Converts a Y value to an L* value.
70
+ *
71
+ * L* in L*a*b* and Y in XYZ measure the same quantity, luminance.
72
+ *
73
+ * L* measures perceptual luminance, a linear scale. Y in XYZ
74
+ * measures relative luminance, a logarithmic scale.
75
+ *
76
+ * @param y Y in XYZ
77
+ * @return L* in L*a*b*
78
+ */
79
+ export declare function lstarFromY(y: number): number;
80
+ /**
81
+ * Linearizes an RGB component.
82
+ *
83
+ * @param rgbComponent 0 <= rgb_component <= 255, represents R/G/B
84
+ * channel
85
+ * @return 0.0 <= output <= 100.0, color channel converted to
86
+ * linear RGB space
87
+ */
88
+ export declare function linearized(rgbComponent: number): number;
89
+ /**
90
+ * Delinearizes an RGB component.
91
+ *
92
+ * @param rgbComponent 0.0 <= rgb_component <= 100.0, represents
93
+ * linear R/G/B channel
94
+ * @return 0 <= output <= 255, color channel converted to regular
95
+ * RGB space
96
+ */
97
+ export declare function delinearized(rgbComponent: number): number;
98
+ /**
99
+ * Returns the standard white point; white on a sunny day.
100
+ *
101
+ * @return The white point
102
+ */
103
+ export declare function whitePointD65(): number[];
104
+ /**
105
+ * RGBA component
106
+ *
107
+ * @param r Red value should be between 0-255
108
+ * @param g Green value should be between 0-255
109
+ * @param b Blue value should be between 0-255
110
+ * @param a Alpha value should be between 0-255
111
+ */
112
+ export interface Rgba {
113
+ r: number;
114
+ g: number;
115
+ b: number;
116
+ a: number;
117
+ }
118
+ /**
119
+ * Return RGBA from a given int32 color
120
+ *
121
+ * @param argb ARGB representation of a int32 color.
122
+ * @return RGBA representation of a int32 color.
123
+ */
124
+ export declare function rgbaFromArgb(argb: number): Rgba;
125
+ /**
126
+ * Return int32 color from a given RGBA component
127
+ *
128
+ * @param rgba RGBA representation of a int32 color.
129
+ * @returns ARGB representation of a int32 color.
130
+ */
131
+ export declare function argbFromRgba({ r, g, b, a }: Rgba): number;
@@ -0,0 +1,78 @@
1
+ /**
2
+ * Below lines are copied from @material/material-color-utilities.
3
+ * Do not modify it.
4
+ */
5
+ /**
6
+ * Utility methods for calculating contrast given two colors, or calculating a
7
+ * color given one color and a contrast ratio.
8
+ *
9
+ * Contrast ratio is calculated using XYZ's Y. When linearized to match human
10
+ * perception, Y becomes HCT's tone and L*a*b*'s' L*. Informally, this is the
11
+ * lightness of a color.
12
+ *
13
+ * Methods refer to tone, T in the the HCT color space.
14
+ * Tone is equivalent to L* in the L*a*b* color space, or L in the LCH color
15
+ * space.
16
+ */
17
+ export declare class Contrast {
18
+ /**
19
+ * Returns a contrast ratio, which ranges from 1 to 21.
20
+ *
21
+ * @param toneA Tone between 0 and 100. Values outside will be clamped.
22
+ * @param toneB Tone between 0 and 100. Values outside will be clamped.
23
+ */
24
+ static ratioOfTones(toneA: number, toneB: number): number;
25
+ static ratioOfYs(y1: number, y2: number): number;
26
+ /**
27
+ * Returns a tone >= tone parameter that ensures ratio parameter.
28
+ * Return value is between 0 and 100.
29
+ * Returns -1 if ratio cannot be achieved with tone parameter.
30
+ *
31
+ * @param tone Tone return value must contrast with.
32
+ * Range is 0 to 100. Invalid values will result in -1 being returned.
33
+ * @param ratio Contrast ratio of return value and tone.
34
+ * Range is 1 to 21, invalid values have undefined behavior.
35
+ */
36
+ static lighter(tone: number, ratio: number): number;
37
+ /**
38
+ * Returns a tone <= tone parameter that ensures ratio parameter.
39
+ * Return value is between 0 and 100.
40
+ * Returns -1 if ratio cannot be achieved with tone parameter.
41
+ *
42
+ * @param tone Tone return value must contrast with.
43
+ * Range is 0 to 100. Invalid values will result in -1 being returned.
44
+ * @param ratio Contrast ratio of return value and tone.
45
+ * Range is 1 to 21, invalid values have undefined behavior.
46
+ */
47
+ static darker(tone: number, ratio: number): number;
48
+ /**
49
+ * Returns a tone >= tone parameter that ensures ratio parameter.
50
+ * Return value is between 0 and 100.
51
+ * Returns 100 if ratio cannot be achieved with tone parameter.
52
+ *
53
+ * This method is unsafe because the returned value is guaranteed to be in
54
+ * bounds for tone, i.e. between 0 and 100. However, that value may not reach
55
+ * the ratio with tone. For example, there is no color lighter than T100.
56
+ *
57
+ * @param tone Tone return value must contrast with.
58
+ * Range is 0 to 100. Invalid values will result in 100 being returned.
59
+ * @param ratio Desired contrast ratio of return value and tone parameter.
60
+ * Range is 1 to 21, invalid values have undefined behavior.
61
+ */
62
+ static lighterUnsafe(tone: number, ratio: number): number;
63
+ /**
64
+ * Returns a tone >= tone parameter that ensures ratio parameter.
65
+ * Return value is between 0 and 100.
66
+ * Returns 100 if ratio cannot be achieved with tone parameter.
67
+ *
68
+ * This method is unsafe because the returned value is guaranteed to be in
69
+ * bounds for tone, i.e. between 0 and 100. However, that value may not reach
70
+ * the [ratio with [tone]. For example, there is no color darker than T0.
71
+ *
72
+ * @param tone Tone return value must contrast with.
73
+ * Range is 0 to 100. Invalid values will result in 0 being returned.
74
+ * @param ratio Desired contrast ratio of return value and tone parameter.
75
+ * Range is 1 to 21, invalid values have undefined behavior.
76
+ */
77
+ static darkerUnsafe(tone: number, ratio: number): number;
78
+ }