@atlaskit/tokens 13.1.0 → 13.2.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 (349) hide show
  1. package/CHANGELOG.md +34 -0
  2. package/codemods/css-to-design-tokens/lib/colors.tsx +3 -8
  3. package/codemods/css-to-design-tokens/lib/declaration.tsx +3 -13
  4. package/codemods/css-to-design-tokens/lib/extract-between-parentheses.tsx +4 -0
  5. package/codemods/css-to-design-tokens/lib/extract-less-var-name.tsx +3 -0
  6. package/codemods/css-to-design-tokens/lib/get-css-var-meta.tsx +13 -0
  7. package/codemods/css-to-design-tokens/lib/get-named-color-meta.tsx +5 -0
  8. package/codemods/css-to-design-tokens/lib/get-raw-color-meta.tsx +11 -0
  9. package/codemods/css-to-design-tokens/lib/is-css-declaration.tsx +3 -0
  10. package/codemods/css-to-design-tokens/lib/is-known-css-variable.tsx +5 -0
  11. package/codemods/css-to-design-tokens/lib/known-named-colors.tsx +150 -0
  12. package/codemods/css-to-design-tokens/lib/known-raw-colors.tsx +17 -0
  13. package/codemods/css-to-design-tokens/lib/known-variables.tsx +167 -0
  14. package/codemods/css-to-design-tokens/lib/legacy-colors.tsx +3 -336
  15. package/codemods/css-to-design-tokens/lib/meta.tsx +3 -28
  16. package/codemods/css-to-design-tokens/lib/split-css-value.tsx +4 -0
  17. package/codemods/css-to-design-tokens/lib/value.tsx +6 -9
  18. package/codemods/css-to-design-tokens/transform.tsx +3 -1
  19. package/dist/cjs/artifacts/generated-pairs.js +2 -2
  20. package/dist/cjs/artifacts/palettes-raw/palette.js +35 -1
  21. package/dist/cjs/artifacts/themes/atlassian-dark-increased-contrast.js +2 -2
  22. package/dist/cjs/artifacts/themes/atlassian-dark.js +2 -2
  23. package/dist/cjs/artifacts/themes/atlassian-light-increased-contrast.js +2 -2
  24. package/dist/cjs/artifacts/themes/atlassian-light.js +2 -2
  25. package/dist/cjs/artifacts/token-default-values.js +21 -1
  26. package/dist/cjs/artifacts/token-names.js +21 -1
  27. package/dist/cjs/artifacts/tokens-raw/atlassian-dark-increased-contrast.js +471 -31
  28. package/dist/cjs/artifacts/tokens-raw/atlassian-dark.js +471 -31
  29. package/dist/cjs/artifacts/tokens-raw/atlassian-light-increased-contrast.js +471 -31
  30. package/dist/cjs/artifacts/tokens-raw/atlassian-light.js +471 -31
  31. package/dist/cjs/entry-points/theme-state-transformer.js +4 -3
  32. package/dist/cjs/entry-points/token-metadata.codegen.js +196 -16
  33. package/dist/cjs/get-custom-theme-styles.js +7 -6
  34. package/dist/cjs/get-global-theme.js +2 -2
  35. package/dist/cjs/get-theme-html-attrs.js +2 -2
  36. package/dist/cjs/index.js +4 -3
  37. package/dist/cjs/is-color-mode.js +9 -0
  38. package/dist/cjs/is-theme-ids.js +12 -0
  39. package/dist/cjs/is-theme-kind.js +12 -0
  40. package/dist/cjs/theme-config.js +8 -44
  41. package/dist/cjs/theme-object-to-string.js +42 -0
  42. package/dist/cjs/theme-options-schema.js +1 -0
  43. package/dist/cjs/theme-state-defaults.js +39 -0
  44. package/dist/cjs/theme-state.js +5 -0
  45. package/dist/cjs/theme-string-to-object.js +51 -0
  46. package/dist/cjs/utils/additional-contrast-checker.js +43 -0
  47. package/dist/cjs/utils/custom-theme-loading-utils.js +0 -22
  48. package/dist/cjs/utils/custom-theme-token-contrast-check.js +2 -40
  49. package/dist/cjs/utils/delta-e.js +26 -0
  50. package/dist/cjs/utils/generate-colors.js +47 -0
  51. package/dist/cjs/utils/generate-token-map-with-contrast-check.js +32 -0
  52. package/dist/cjs/utils/{generate-custom-color-ramp.js → generate-token-map.js} +6 -75
  53. package/dist/cjs/utils/get-closest-color-index.js +3 -2
  54. package/dist/cjs/utils/get-contrast-ratio.js +22 -0
  55. package/dist/cjs/utils/hct-color-utils/alpha-from-argb.js +12 -0
  56. package/dist/cjs/utils/hct-color-utils/argb-from-linrgb.js +17 -0
  57. package/dist/cjs/utils/hct-color-utils/argb-from-lstar.js +21 -0
  58. package/dist/cjs/utils/hct-color-utils/argb-from-rgba.js +24 -0
  59. package/dist/cjs/utils/hct-color-utils/argb-from-xyz.js +29 -0
  60. package/dist/cjs/utils/hct-color-utils/blue-from-argb.js +12 -0
  61. package/dist/cjs/utils/hct-color-utils/clamp-component.js +15 -0
  62. package/dist/cjs/utils/hct-color-utils/contrast.js +10 -11
  63. package/dist/cjs/utils/hct-color-utils/green-from-argb.js +12 -0
  64. package/dist/cjs/utils/hct-color-utils/hct.js +18 -12
  65. package/dist/cjs/utils/hct-color-utils/index.js +4 -3
  66. package/dist/cjs/utils/hct-color-utils/lab-f.js +15 -0
  67. package/dist/cjs/utils/hct-color-utils/lab-invf.js +16 -0
  68. package/dist/cjs/utils/hct-color-utils/lstar-from-argb.js +34 -0
  69. package/dist/cjs/utils/hct-color-utils/lstar-from-y.js +21 -0
  70. package/dist/cjs/utils/hct-color-utils/red-from-argb.js +12 -0
  71. package/dist/cjs/utils/hct-color-utils/rgba-from-argb.js +28 -0
  72. package/dist/cjs/utils/hct-color-utils/rgba.js +1 -0
  73. package/dist/cjs/utils/hct-color-utils/viewing-conditions.js +5 -4
  74. package/dist/cjs/utils/hct-color-utils/white-point-d65.js +14 -0
  75. package/dist/cjs/utils/hct-color-utils/y-from-lstar.js +21 -0
  76. package/dist/cjs/utils/hex-to-hsl.js +52 -0
  77. package/dist/cjs/utils/hex-to-rgb-a.js +20 -0
  78. package/dist/cjs/utils/hex-to-rgb.js +19 -0
  79. package/dist/cjs/utils/is-valid-hex.js +10 -0
  80. package/dist/cjs/utils/reduce-token-map.js +18 -0
  81. package/dist/cjs/utils/rgb-to-lab.js +24 -0
  82. package/dist/es2019/artifacts/generated-pairs.js +2 -2
  83. package/dist/es2019/artifacts/palettes-raw/palette.js +35 -1
  84. package/dist/es2019/artifacts/themes/atlassian-dark-increased-contrast.js +21 -1
  85. package/dist/es2019/artifacts/themes/atlassian-dark.js +21 -1
  86. package/dist/es2019/artifacts/themes/atlassian-light-increased-contrast.js +21 -1
  87. package/dist/es2019/artifacts/themes/atlassian-light.js +21 -1
  88. package/dist/es2019/artifacts/token-default-values.js +21 -1
  89. package/dist/es2019/artifacts/token-names.js +21 -1
  90. package/dist/es2019/artifacts/tokens-raw/atlassian-dark-increased-contrast.js +471 -31
  91. package/dist/es2019/artifacts/tokens-raw/atlassian-dark.js +471 -31
  92. package/dist/es2019/artifacts/tokens-raw/atlassian-light-increased-contrast.js +471 -31
  93. package/dist/es2019/artifacts/tokens-raw/atlassian-light.js +471 -31
  94. package/dist/es2019/entry-points/theme-state-transformer.js +2 -1
  95. package/dist/es2019/entry-points/token-metadata.codegen.js +196 -16
  96. package/dist/es2019/get-custom-theme-styles.js +3 -2
  97. package/dist/es2019/get-global-theme.js +1 -1
  98. package/dist/es2019/get-theme-html-attrs.js +1 -1
  99. package/dist/es2019/index.js +2 -1
  100. package/dist/es2019/is-color-mode.js +3 -0
  101. package/dist/es2019/is-theme-ids.js +4 -0
  102. package/dist/es2019/is-theme-kind.js +4 -0
  103. package/dist/es2019/theme-config.js +4 -45
  104. package/dist/es2019/theme-object-to-string.js +28 -0
  105. package/dist/es2019/theme-options-schema.js +0 -0
  106. package/dist/es2019/theme-state-defaults.js +34 -0
  107. package/dist/es2019/theme-state.js +1 -0
  108. package/dist/es2019/theme-string-to-object.js +38 -0
  109. package/dist/es2019/utils/additional-contrast-checker.js +39 -0
  110. package/dist/es2019/utils/custom-theme-loading-utils.js +1 -11
  111. package/dist/es2019/utils/custom-theme-token-contrast-check.js +1 -41
  112. package/dist/es2019/utils/delta-e.js +20 -0
  113. package/dist/es2019/utils/generate-colors.js +39 -0
  114. package/dist/es2019/utils/generate-token-map-with-contrast-check.js +21 -0
  115. package/dist/es2019/utils/{generate-custom-color-ramp.js → generate-token-map.js} +3 -63
  116. package/dist/es2019/utils/get-closest-color-index.js +2 -1
  117. package/dist/es2019/utils/get-contrast-ratio.js +16 -0
  118. package/dist/es2019/utils/hct-color-utils/alpha-from-argb.js +6 -0
  119. package/dist/es2019/utils/hct-color-utils/argb-from-linrgb.js +12 -0
  120. package/dist/es2019/utils/hct-color-utils/argb-from-lstar.js +16 -0
  121. package/dist/es2019/utils/hct-color-utils/argb-from-rgba.js +19 -0
  122. package/dist/es2019/utils/hct-color-utils/argb-from-xyz.js +24 -0
  123. package/dist/es2019/utils/hct-color-utils/blue-from-argb.js +6 -0
  124. package/dist/es2019/utils/hct-color-utils/clamp-component.js +9 -0
  125. package/dist/es2019/utils/hct-color-utils/contrast.js +10 -10
  126. package/dist/es2019/utils/hct-color-utils/green-from-argb.js +6 -0
  127. package/dist/es2019/utils/hct-color-utils/hct.js +19 -12
  128. package/dist/es2019/utils/hct-color-utils/index.js +2 -1
  129. package/dist/es2019/utils/hct-color-utils/lab-f.js +9 -0
  130. package/dist/es2019/utils/hct-color-utils/lab-invf.js +10 -0
  131. package/dist/es2019/utils/hct-color-utils/lstar-from-argb.js +28 -0
  132. package/dist/es2019/utils/hct-color-utils/lstar-from-y.js +16 -0
  133. package/dist/es2019/utils/hct-color-utils/red-from-argb.js +6 -0
  134. package/dist/es2019/utils/hct-color-utils/rgba-from-argb.js +22 -0
  135. package/dist/es2019/utils/hct-color-utils/rgba.js +0 -0
  136. package/dist/es2019/utils/hct-color-utils/viewing-conditions.js +4 -3
  137. package/dist/es2019/utils/hct-color-utils/white-point-d65.js +8 -0
  138. package/dist/es2019/utils/hct-color-utils/y-from-lstar.js +16 -0
  139. package/dist/es2019/utils/hex-to-hsl.js +46 -0
  140. package/dist/es2019/utils/hex-to-rgb-a.js +14 -0
  141. package/dist/es2019/utils/hex-to-rgb.js +13 -0
  142. package/dist/es2019/utils/is-valid-hex.js +2 -0
  143. package/dist/es2019/utils/reduce-token-map.js +7 -0
  144. package/dist/es2019/utils/rgb-to-lab.js +18 -0
  145. package/dist/esm/artifacts/generated-pairs.js +2 -2
  146. package/dist/esm/artifacts/palettes-raw/palette.js +35 -1
  147. package/dist/esm/artifacts/themes/atlassian-dark-increased-contrast.js +2 -2
  148. package/dist/esm/artifacts/themes/atlassian-dark.js +2 -2
  149. package/dist/esm/artifacts/themes/atlassian-light-increased-contrast.js +2 -2
  150. package/dist/esm/artifacts/themes/atlassian-light.js +2 -2
  151. package/dist/esm/artifacts/token-default-values.js +21 -1
  152. package/dist/esm/artifacts/token-names.js +21 -1
  153. package/dist/esm/artifacts/tokens-raw/atlassian-dark-increased-contrast.js +471 -31
  154. package/dist/esm/artifacts/tokens-raw/atlassian-dark.js +471 -31
  155. package/dist/esm/artifacts/tokens-raw/atlassian-light-increased-contrast.js +471 -31
  156. package/dist/esm/artifacts/tokens-raw/atlassian-light.js +471 -31
  157. package/dist/esm/entry-points/theme-state-transformer.js +2 -1
  158. package/dist/esm/entry-points/token-metadata.codegen.js +196 -16
  159. package/dist/esm/get-custom-theme-styles.js +3 -2
  160. package/dist/esm/get-global-theme.js +1 -1
  161. package/dist/esm/get-theme-html-attrs.js +1 -1
  162. package/dist/esm/index.js +2 -1
  163. package/dist/esm/is-color-mode.js +3 -0
  164. package/dist/esm/is-theme-ids.js +6 -0
  165. package/dist/esm/is-theme-kind.js +6 -0
  166. package/dist/esm/theme-config.js +4 -45
  167. package/dist/esm/theme-object-to-string.js +35 -0
  168. package/dist/esm/theme-options-schema.js +0 -0
  169. package/dist/esm/theme-state-defaults.js +34 -0
  170. package/dist/esm/theme-state.js +1 -0
  171. package/dist/esm/theme-string-to-object.js +44 -0
  172. package/dist/esm/utils/additional-contrast-checker.js +36 -0
  173. package/dist/esm/utils/custom-theme-loading-utils.js +1 -15
  174. package/dist/esm/utils/custom-theme-token-contrast-check.js +1 -38
  175. package/dist/esm/utils/delta-e.js +20 -0
  176. package/dist/esm/utils/generate-colors.js +40 -0
  177. package/dist/esm/utils/generate-token-map-with-contrast-check.js +25 -0
  178. package/dist/esm/utils/{generate-custom-color-ramp.js → generate-token-map.js} +3 -67
  179. package/dist/esm/utils/get-closest-color-index.js +2 -1
  180. package/dist/esm/utils/get-contrast-ratio.js +16 -0
  181. package/dist/esm/utils/hct-color-utils/alpha-from-argb.js +6 -0
  182. package/dist/esm/utils/hct-color-utils/argb-from-linrgb.js +12 -0
  183. package/dist/esm/utils/hct-color-utils/argb-from-lstar.js +16 -0
  184. package/dist/esm/utils/hct-color-utils/argb-from-rgba.js +18 -0
  185. package/dist/esm/utils/hct-color-utils/argb-from-xyz.js +24 -0
  186. package/dist/esm/utils/hct-color-utils/blue-from-argb.js +6 -0
  187. package/dist/esm/utils/hct-color-utils/clamp-component.js +9 -0
  188. package/dist/esm/utils/hct-color-utils/contrast.js +10 -10
  189. package/dist/esm/utils/hct-color-utils/green-from-argb.js +6 -0
  190. package/dist/esm/utils/hct-color-utils/hct.js +19 -12
  191. package/dist/esm/utils/hct-color-utils/index.js +2 -1
  192. package/dist/esm/utils/hct-color-utils/lab-f.js +9 -0
  193. package/dist/esm/utils/hct-color-utils/lab-invf.js +10 -0
  194. package/dist/esm/utils/hct-color-utils/lstar-from-argb.js +28 -0
  195. package/dist/esm/utils/hct-color-utils/lstar-from-y.js +16 -0
  196. package/dist/esm/utils/hct-color-utils/red-from-argb.js +6 -0
  197. package/dist/esm/utils/hct-color-utils/rgba-from-argb.js +22 -0
  198. package/dist/esm/utils/hct-color-utils/rgba.js +0 -0
  199. package/dist/esm/utils/hct-color-utils/viewing-conditions.js +5 -4
  200. package/dist/esm/utils/hct-color-utils/white-point-d65.js +8 -0
  201. package/dist/esm/utils/hct-color-utils/y-from-lstar.js +16 -0
  202. package/dist/esm/utils/hex-to-hsl.js +46 -0
  203. package/dist/esm/utils/hex-to-rgb-a.js +14 -0
  204. package/dist/esm/utils/hex-to-rgb.js +13 -0
  205. package/dist/esm/utils/is-valid-hex.js +4 -0
  206. package/dist/esm/utils/reduce-token-map.js +11 -0
  207. package/dist/esm/utils/rgb-to-lab.js +18 -0
  208. package/dist/types/artifacts/generated-pairs.d.ts +1 -1
  209. package/dist/types/artifacts/palettes-raw/palette.d.ts +1 -1
  210. package/dist/types/artifacts/themes/atlassian-dark-increased-contrast.d.ts +2 -2
  211. package/dist/types/artifacts/themes/atlassian-dark.d.ts +2 -2
  212. package/dist/types/artifacts/themes/atlassian-light-increased-contrast.d.ts +2 -2
  213. package/dist/types/artifacts/themes/atlassian-light.d.ts +2 -2
  214. package/dist/types/artifacts/token-default-values.d.ts +21 -1
  215. package/dist/types/artifacts/token-names.d.ts +41 -1
  216. package/dist/types/artifacts/tokens-raw/atlassian-dark-increased-contrast.d.ts +1 -1
  217. package/dist/types/artifacts/tokens-raw/atlassian-dark.d.ts +1 -1
  218. package/dist/types/artifacts/tokens-raw/atlassian-light-increased-contrast.d.ts +1 -1
  219. package/dist/types/artifacts/tokens-raw/atlassian-light.d.ts +1 -1
  220. package/dist/types/artifacts/types-internal.d.ts +2 -2
  221. package/dist/types/artifacts/types.d.ts +2 -2
  222. package/dist/types/entry-points/css-type-schema.codegen.d.ts +3 -3
  223. package/dist/types/entry-points/theme-state-transformer.d.ts +2 -1
  224. package/dist/types/entry-points/token-metadata.codegen.d.ts +1 -1
  225. package/dist/types/index.d.ts +2 -1
  226. package/dist/types/is-color-mode.d.ts +2 -0
  227. package/dist/types/is-theme-ids.d.ts +2 -0
  228. package/dist/types/is-theme-kind.d.ts +4 -0
  229. package/dist/types/theme-color-modes.d.ts +1 -0
  230. package/dist/types/theme-config.d.ts +8 -40
  231. package/dist/types/theme-ids.d.ts +1 -0
  232. package/dist/types/theme-object-to-string.d.ts +13 -0
  233. package/dist/types/theme-options-schema.d.ts +7 -0
  234. package/dist/types/theme-state-defaults.d.ts +14 -0
  235. package/dist/types/theme-state.d.ts +17 -0
  236. package/dist/types/{theme-state-transformer.d.ts → theme-string-to-object.d.ts} +0 -12
  237. package/dist/types/types.d.ts +75 -15
  238. package/dist/types/utils/additional-contrast-checker.d.ts +9 -0
  239. package/dist/types/utils/custom-theme-loading-utils.d.ts +1 -6
  240. package/dist/types/utils/custom-theme-token-contrast-check.d.ts +0 -9
  241. package/dist/types/utils/delta-e.d.ts +1 -0
  242. package/dist/types/utils/generate-colors.d.ts +5 -0
  243. package/dist/types/utils/{generate-custom-color-ramp.d.ts → generate-token-map-with-contrast-check.d.ts} +1 -6
  244. package/dist/types/utils/generate-token-map.d.ts +9 -0
  245. package/dist/types/utils/get-contrast-ratio.d.ts +1 -0
  246. package/dist/types/utils/hct-color-utils/alpha-from-argb.d.ts +4 -0
  247. package/dist/types/utils/hct-color-utils/argb-from-linrgb.d.ts +4 -0
  248. package/dist/types/utils/hct-color-utils/argb-from-lstar.d.ts +8 -0
  249. package/dist/types/utils/hct-color-utils/argb-from-rgba.d.ts +8 -0
  250. package/dist/types/utils/hct-color-utils/argb-from-xyz.d.ts +4 -0
  251. package/dist/types/utils/hct-color-utils/blue-from-argb.d.ts +4 -0
  252. package/dist/types/utils/hct-color-utils/clamp-component.d.ts +1 -0
  253. package/dist/types/utils/hct-color-utils/green-from-argb.d.ts +4 -0
  254. package/dist/types/utils/hct-color-utils/index.d.ts +2 -1
  255. package/dist/types/utils/hct-color-utils/lab-f.d.ts +1 -0
  256. package/dist/types/utils/hct-color-utils/lab-invf.d.ts +1 -0
  257. package/dist/types/utils/hct-color-utils/lstar-from-argb.d.ts +7 -0
  258. package/dist/types/utils/hct-color-utils/lstar-from-y.d.ts +12 -0
  259. package/dist/types/utils/hct-color-utils/red-from-argb.d.ts +4 -0
  260. package/dist/types/utils/hct-color-utils/rgba-from-argb.d.ts +8 -0
  261. package/dist/types/utils/hct-color-utils/rgba.d.ts +14 -0
  262. package/dist/types/utils/hct-color-utils/white-point-d65.d.ts +6 -0
  263. package/dist/types/utils/hct-color-utils/y-from-lstar.d.ts +12 -0
  264. package/dist/types/utils/hex-to-hsl.d.ts +1 -0
  265. package/dist/types/utils/hex-to-rgb-a.d.ts +1 -0
  266. package/dist/types/utils/hex-to-rgb.d.ts +1 -0
  267. package/dist/types/utils/is-valid-hex.d.ts +1 -0
  268. package/dist/types/utils/reduce-token-map.d.ts +6 -0
  269. package/dist/types/utils/rgb-to-lab.d.ts +1 -0
  270. package/dist/types-ts4.5/artifacts/generated-pairs.d.ts +1 -1
  271. package/dist/types-ts4.5/artifacts/palettes-raw/palette.d.ts +1 -1
  272. package/dist/types-ts4.5/artifacts/themes/atlassian-dark-increased-contrast.d.ts +2 -2
  273. package/dist/types-ts4.5/artifacts/themes/atlassian-dark.d.ts +2 -2
  274. package/dist/types-ts4.5/artifacts/themes/atlassian-light-increased-contrast.d.ts +2 -2
  275. package/dist/types-ts4.5/artifacts/themes/atlassian-light.d.ts +2 -2
  276. package/dist/types-ts4.5/artifacts/token-default-values.d.ts +21 -1
  277. package/dist/types-ts4.5/artifacts/token-names.d.ts +41 -1
  278. package/dist/types-ts4.5/artifacts/tokens-raw/atlassian-dark-increased-contrast.d.ts +1 -1
  279. package/dist/types-ts4.5/artifacts/tokens-raw/atlassian-dark.d.ts +1 -1
  280. package/dist/types-ts4.5/artifacts/tokens-raw/atlassian-light-increased-contrast.d.ts +1 -1
  281. package/dist/types-ts4.5/artifacts/tokens-raw/atlassian-light.d.ts +1 -1
  282. package/dist/types-ts4.5/artifacts/types-internal.d.ts +2 -2
  283. package/dist/types-ts4.5/artifacts/types.d.ts +2 -2
  284. package/dist/types-ts4.5/entry-points/css-type-schema.codegen.d.ts +3 -3
  285. package/dist/types-ts4.5/entry-points/theme-state-transformer.d.ts +2 -1
  286. package/dist/types-ts4.5/entry-points/token-metadata.codegen.d.ts +1 -1
  287. package/dist/types-ts4.5/index.d.ts +2 -1
  288. package/dist/types-ts4.5/is-color-mode.d.ts +2 -0
  289. package/dist/types-ts4.5/is-theme-ids.d.ts +2 -0
  290. package/dist/types-ts4.5/is-theme-kind.d.ts +11 -0
  291. package/dist/types-ts4.5/theme-color-modes.d.ts +1 -0
  292. package/dist/types-ts4.5/theme-config.d.ts +8 -40
  293. package/dist/types-ts4.5/theme-ids.d.ts +1 -0
  294. package/dist/types-ts4.5/theme-object-to-string.d.ts +13 -0
  295. package/dist/types-ts4.5/theme-options-schema.d.ts +7 -0
  296. package/dist/types-ts4.5/theme-state-defaults.d.ts +14 -0
  297. package/dist/types-ts4.5/theme-state.d.ts +17 -0
  298. package/dist/types-ts4.5/{theme-state-transformer.d.ts → theme-string-to-object.d.ts} +0 -12
  299. package/dist/types-ts4.5/types.d.ts +75 -15
  300. package/dist/types-ts4.5/utils/additional-contrast-checker.d.ts +9 -0
  301. package/dist/types-ts4.5/utils/custom-theme-loading-utils.d.ts +1 -6
  302. package/dist/types-ts4.5/utils/custom-theme-token-contrast-check.d.ts +0 -9
  303. package/dist/types-ts4.5/utils/delta-e.d.ts +1 -0
  304. package/dist/types-ts4.5/utils/generate-colors.d.ts +5 -0
  305. package/dist/types-ts4.5/utils/{generate-custom-color-ramp.d.ts → generate-token-map-with-contrast-check.d.ts} +1 -8
  306. package/dist/types-ts4.5/utils/generate-token-map.d.ts +11 -0
  307. package/dist/types-ts4.5/utils/get-contrast-ratio.d.ts +1 -0
  308. package/dist/types-ts4.5/utils/hct-color-utils/alpha-from-argb.d.ts +4 -0
  309. package/dist/types-ts4.5/utils/hct-color-utils/argb-from-linrgb.d.ts +4 -0
  310. package/dist/types-ts4.5/utils/hct-color-utils/argb-from-lstar.d.ts +8 -0
  311. package/dist/types-ts4.5/utils/hct-color-utils/argb-from-rgba.d.ts +8 -0
  312. package/dist/types-ts4.5/utils/hct-color-utils/argb-from-xyz.d.ts +4 -0
  313. package/dist/types-ts4.5/utils/hct-color-utils/blue-from-argb.d.ts +4 -0
  314. package/dist/types-ts4.5/utils/hct-color-utils/clamp-component.d.ts +1 -0
  315. package/dist/types-ts4.5/utils/hct-color-utils/green-from-argb.d.ts +4 -0
  316. package/dist/types-ts4.5/utils/hct-color-utils/index.d.ts +2 -1
  317. package/dist/types-ts4.5/utils/hct-color-utils/lab-f.d.ts +1 -0
  318. package/dist/types-ts4.5/utils/hct-color-utils/lab-invf.d.ts +1 -0
  319. package/dist/types-ts4.5/utils/hct-color-utils/lstar-from-argb.d.ts +7 -0
  320. package/dist/types-ts4.5/utils/hct-color-utils/lstar-from-y.d.ts +12 -0
  321. package/dist/types-ts4.5/utils/hct-color-utils/red-from-argb.d.ts +4 -0
  322. package/dist/types-ts4.5/utils/hct-color-utils/rgba-from-argb.d.ts +8 -0
  323. package/dist/types-ts4.5/utils/hct-color-utils/rgba.d.ts +14 -0
  324. package/dist/types-ts4.5/utils/hct-color-utils/white-point-d65.d.ts +6 -0
  325. package/dist/types-ts4.5/utils/hct-color-utils/y-from-lstar.d.ts +12 -0
  326. package/dist/types-ts4.5/utils/hex-to-hsl.d.ts +5 -0
  327. package/dist/types-ts4.5/utils/hex-to-rgb-a.d.ts +6 -0
  328. package/dist/types-ts4.5/utils/hex-to-rgb.d.ts +5 -0
  329. package/dist/types-ts4.5/utils/is-valid-hex.d.ts +1 -0
  330. package/dist/types-ts4.5/utils/reduce-token-map.d.ts +6 -0
  331. package/dist/types-ts4.5/utils/rgb-to-lab.d.ts +5 -0
  332. package/figma/atlassian-dark-increased-contrast.json +180 -0
  333. package/figma/atlassian-dark.json +180 -0
  334. package/figma/atlassian-light-increased-contrast.json +180 -0
  335. package/figma/atlassian-light.json +180 -0
  336. package/package.json +7 -7
  337. package/dist/cjs/theme-state-transformer.js +0 -93
  338. package/dist/cjs/utils/color-utils.js +0 -176
  339. package/dist/cjs/utils/hct-color-utils/color-utils.js +0 -279
  340. package/dist/es2019/theme-state-transformer.js +0 -70
  341. package/dist/es2019/utils/color-utils.js +0 -136
  342. package/dist/es2019/utils/hct-color-utils/color-utils.js +0 -249
  343. package/dist/esm/theme-state-transformer.js +0 -86
  344. package/dist/esm/utils/color-utils.js +0 -138
  345. package/dist/esm/utils/hct-color-utils/color-utils.js +0 -248
  346. package/dist/types/utils/color-utils.d.ts +0 -10
  347. package/dist/types/utils/hct-color-utils/color-utils.d.ts +0 -88
  348. package/dist/types-ts4.5/utils/color-utils.d.ts +0 -23
  349. package/dist/types-ts4.5/utils/hct-color-utils/color-utils.d.ts +0 -88
@@ -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::f47a2823b72e16da1663ec36c027bf22>>
3
+ * @codegen <<SignedSource::28f4c07e9bf051eeef207d0ffbb79ed8>>
4
4
  * @codegenCommand yarn build tokens
5
5
  */
6
- export type ActiveTokens = 'motion.avatar.enter' | 'motion.avatar.exit' | 'motion.avatar.hovered' | 'motion.blanket.enter' | 'motion.blanket.exit' | 'motion.duration.instant' | 'motion.duration.long' | 'motion.duration.medium' | 'motion.duration.short' | 'motion.duration.xlong' | 'motion.duration.xshort' | 'motion.duration.xxlong' | 'motion.duration.xxshort' | 'motion.easing.in.practical' | 'motion.easing.inout.bold' | 'motion.easing.out.practical' | 'motion.easing.out.bold' | 'motion.flag.enter' | 'motion.flag.exit' | 'motion.flag.reposition' | 'motion.keyframe.fade.in' | 'motion.keyframe.fade.out' | 'motion.keyframe.scale.in.medium' | 'motion.keyframe.scale.in.small' | 'motion.keyframe.scale.out.medium' | 'motion.keyframe.scale.out.small' | 'motion.keyframe.slide.in.bottom.short' | 'motion.keyframe.slide.in.left.half' | 'motion.keyframe.slide.in.left.short' | 'motion.keyframe.slide.in.right.short' | 'motion.keyframe.slide.in.top.short' | 'motion.keyframe.slide.out.bottom.short' | 'motion.keyframe.slide.out.left.half' | 'motion.keyframe.slide.out.left.short' | 'motion.keyframe.slide.out.right.short' | 'motion.keyframe.slide.out.top.short' | 'motion.modal.enter' | 'motion.modal.exit' | 'motion.popup.enter.bottom' | 'motion.popup.enter.left' | 'motion.popup.enter.right' | 'motion.popup.enter.top' | 'motion.popup.exit.bottom' | 'motion.popup.exit.left' | 'motion.popup.exit.right' | 'motion.popup.exit.top' | 'motion.spotlight.enter' | 'motion.spotlight.exit' | '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.danger.bolder' | 'color.text.warning' | 'color.text.warning.inverse' | 'color.text.warning.bolder' | 'color.text.success' | 'color.text.success.bolder' | 'color.text.discovery' | 'color.text.discovery.bolder' | 'color.text.information' | 'color.text.information.bolder' | 'color.text.subtlest' | 'color.text.subtle' | 'color.link' | 'color.link.pressed' | 'color.link.visited' | 'color.link.visited.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.subtlest' | '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.subtlest.hovered' | 'color.background.accent.lime.subtlest.pressed' | 'color.background.accent.lime.subtler' | 'color.background.accent.lime.subtler.hovered' | 'color.background.accent.lime.subtler.pressed' | 'color.background.accent.lime.subtle' | 'color.background.accent.lime.subtle.hovered' | 'color.background.accent.lime.subtle.pressed' | 'color.background.accent.lime.bolder' | 'color.background.accent.lime.bolder.hovered' | 'color.background.accent.lime.bolder.pressed' | 'color.background.accent.red.subtlest' | 'color.background.accent.red.subtlest.hovered' | 'color.background.accent.red.subtlest.pressed' | 'color.background.accent.red.subtler' | 'color.background.accent.red.subtler.hovered' | 'color.background.accent.red.subtler.pressed' | 'color.background.accent.red.subtle' | 'color.background.accent.red.subtle.hovered' | 'color.background.accent.red.subtle.pressed' | 'color.background.accent.red.bolder' | 'color.background.accent.red.bolder.hovered' | 'color.background.accent.red.bolder.pressed' | 'color.background.accent.orange.subtlest' | 'color.background.accent.orange.subtlest.hovered' | 'color.background.accent.orange.subtlest.pressed' | 'color.background.accent.orange.subtler' | 'color.background.accent.orange.subtler.hovered' | 'color.background.accent.orange.subtler.pressed' | 'color.background.accent.orange.subtle' | 'color.background.accent.orange.subtle.hovered' | 'color.background.accent.orange.subtle.pressed' | 'color.background.accent.orange.bolder' | 'color.background.accent.orange.bolder.hovered' | 'color.background.accent.orange.bolder.pressed' | 'color.background.accent.yellow.subtlest' | 'color.background.accent.yellow.subtlest.hovered' | 'color.background.accent.yellow.subtlest.pressed' | 'color.background.accent.yellow.subtler' | 'color.background.accent.yellow.subtler.hovered' | 'color.background.accent.yellow.subtler.pressed' | 'color.background.accent.yellow.subtle' | 'color.background.accent.yellow.subtle.hovered' | 'color.background.accent.yellow.subtle.pressed' | 'color.background.accent.yellow.bolder' | 'color.background.accent.yellow.bolder.hovered' | 'color.background.accent.yellow.bolder.pressed' | 'color.background.accent.green.subtlest' | 'color.background.accent.green.subtlest.hovered' | 'color.background.accent.green.subtlest.pressed' | 'color.background.accent.green.subtler' | 'color.background.accent.green.subtler.hovered' | 'color.background.accent.green.subtler.pressed' | 'color.background.accent.green.subtle' | 'color.background.accent.green.subtle.hovered' | 'color.background.accent.green.subtle.pressed' | 'color.background.accent.green.bolder' | 'color.background.accent.green.bolder.hovered' | 'color.background.accent.green.bolder.pressed' | 'color.background.accent.teal.subtlest' | 'color.background.accent.teal.subtlest.hovered' | 'color.background.accent.teal.subtlest.pressed' | 'color.background.accent.teal.subtler' | 'color.background.accent.teal.subtler.hovered' | 'color.background.accent.teal.subtler.pressed' | 'color.background.accent.teal.subtle' | 'color.background.accent.teal.subtle.hovered' | 'color.background.accent.teal.subtle.pressed' | 'color.background.accent.teal.bolder' | 'color.background.accent.teal.bolder.hovered' | 'color.background.accent.teal.bolder.pressed' | 'color.background.accent.blue.subtlest' | 'color.background.accent.blue.subtlest.hovered' | 'color.background.accent.blue.subtlest.pressed' | 'color.background.accent.blue.subtler' | 'color.background.accent.blue.subtler.hovered' | 'color.background.accent.blue.subtler.pressed' | 'color.background.accent.blue.subtle' | 'color.background.accent.blue.subtle.hovered' | 'color.background.accent.blue.subtle.pressed' | 'color.background.accent.blue.bolder' | 'color.background.accent.blue.bolder.hovered' | 'color.background.accent.blue.bolder.pressed' | 'color.background.accent.purple.subtlest' | 'color.background.accent.purple.subtlest.hovered' | 'color.background.accent.purple.subtlest.pressed' | 'color.background.accent.purple.subtler' | 'color.background.accent.purple.subtler.hovered' | 'color.background.accent.purple.subtler.pressed' | 'color.background.accent.purple.subtle' | 'color.background.accent.purple.subtle.hovered' | 'color.background.accent.purple.subtle.pressed' | 'color.background.accent.purple.bolder' | 'color.background.accent.purple.bolder.hovered' | 'color.background.accent.purple.bolder.pressed' | 'color.background.accent.magenta.subtlest' | 'color.background.accent.magenta.subtlest.hovered' | 'color.background.accent.magenta.subtlest.pressed' | 'color.background.accent.magenta.subtler' | 'color.background.accent.magenta.subtler.hovered' | 'color.background.accent.magenta.subtler.pressed' | 'color.background.accent.magenta.subtle' | 'color.background.accent.magenta.subtle.hovered' | 'color.background.accent.magenta.subtle.pressed' | 'color.background.accent.magenta.bolder' | 'color.background.accent.magenta.bolder.hovered' | 'color.background.accent.magenta.bolder.pressed' | 'color.background.accent.gray.subtlest' | 'color.background.accent.gray.subtlest.hovered' | 'color.background.accent.gray.subtlest.pressed' | 'color.background.accent.gray.subtler' | 'color.background.accent.gray.subtler.hovered' | 'color.background.accent.gray.subtler.pressed' | 'color.background.accent.gray.subtle' | 'color.background.accent.gray.subtle.hovered' | 'color.background.accent.gray.subtle.pressed' | 'color.background.accent.gray.bolder' | 'color.background.accent.gray.bolder.hovered' | 'color.background.accent.gray.bolder.pressed' | '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.subtler' | 'color.background.danger.subtler.hovered' | 'color.background.danger.subtler.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.subtler' | 'color.background.warning.subtler.hovered' | 'color.background.warning.subtler.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.subtler' | 'color.background.success.subtler.hovered' | 'color.background.success.subtler.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.subtler' | 'color.background.discovery.subtler.hovered' | 'color.background.discovery.subtler.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.subtler' | 'color.background.information.subtler.hovered' | 'color.background.information.subtler.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' | 'utility.elevation.surface.current' | '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' | 'space.negative.025' | 'space.negative.050' | 'space.negative.075' | 'space.negative.100' | 'space.negative.150' | 'space.negative.200' | 'space.negative.250' | 'space.negative.300' | 'space.negative.400' | 'font.heading.xxlarge' | 'font.heading.xlarge' | 'font.heading.large' | 'font.heading.medium' | 'font.heading.small' | 'font.heading.xsmall' | 'font.heading.xxsmall' | 'font.body.large' | 'font.body' | 'font.body.small' | 'font.metric.large' | 'font.metric.medium' | 'font.metric.small' | 'font.code' | 'font.weight.regular' | 'font.weight.medium' | 'font.weight.semibold' | 'font.weight.bold' | 'font.family.heading' | 'font.family.body' | 'font.family.code' | 'font.family.brand.heading' | 'font.family.brand.body' | 'radius.xsmall' | 'radius.small' | 'radius.medium' | 'radius.large' | 'radius.xlarge' | 'radius.xxlarge' | 'radius.full' | 'radius.tile' | 'border.width' | 'border.width.selected' | 'border.width.focused';
6
+ export type ActiveTokens = 'motion.avatar.enter' | 'motion.avatar.exit' | 'motion.avatar.hovered' | 'motion.blanket.enter' | 'motion.blanket.exit' | 'motion.duration.instant' | 'motion.duration.long' | 'motion.duration.medium' | 'motion.duration.short' | 'motion.duration.xlong' | 'motion.duration.xshort' | 'motion.duration.xxlong' | 'motion.duration.xxshort' | 'motion.easing.in.practical' | 'motion.easing.inout.bold' | 'motion.easing.out.practical' | 'motion.easing.out.bold' | 'motion.flag.enter' | 'motion.flag.exit' | 'motion.flag.reposition' | 'motion.keyframe.fade.in' | 'motion.keyframe.fade.out' | 'motion.keyframe.scale.in.medium' | 'motion.keyframe.scale.in.small' | 'motion.keyframe.scale.out.medium' | 'motion.keyframe.scale.out.small' | 'motion.keyframe.slide.in.bottom.short' | 'motion.keyframe.slide.in.left.half' | 'motion.keyframe.slide.in.left.short' | 'motion.keyframe.slide.in.right.short' | 'motion.keyframe.slide.in.top.short' | 'motion.keyframe.slide.out.bottom.short' | 'motion.keyframe.slide.out.left.half' | 'motion.keyframe.slide.out.left.short' | 'motion.keyframe.slide.out.right.short' | 'motion.keyframe.slide.out.top.short' | 'motion.modal.enter' | 'motion.modal.exit' | 'motion.popup.enter.bottom' | 'motion.popup.enter.left' | 'motion.popup.enter.right' | 'motion.popup.enter.top' | 'motion.popup.exit.bottom' | 'motion.popup.exit.left' | 'motion.popup.exit.right' | 'motion.popup.exit.top' | 'motion.spotlight.enter' | 'motion.spotlight.exit' | '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.danger.bolder' | 'color.text.warning' | 'color.text.warning.inverse' | 'color.text.warning.bolder' | 'color.text.success' | 'color.text.success.bolder' | 'color.text.discovery' | 'color.text.discovery.bolder' | 'color.text.information' | 'color.text.information.bolder' | 'color.text.subtlest' | 'color.text.subtle' | 'color.link' | 'color.link.pressed' | 'color.link.visited' | 'color.link.visited.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.subtlest' | 'color.icon.subtle' | 'color.border' | 'color.border.accent.lime' | 'color.border.accent.lime.subtle' | 'color.border.accent.red' | 'color.border.accent.red.subtle' | 'color.border.accent.orange' | 'color.border.accent.orange.subtle' | 'color.border.accent.yellow' | 'color.border.accent.yellow.subtle' | 'color.border.accent.green' | 'color.border.accent.green.subtle' | 'color.border.accent.teal' | 'color.border.accent.teal.subtle' | 'color.border.accent.blue' | 'color.border.accent.blue.subtle' | 'color.border.accent.purple' | 'color.border.accent.purple.subtle' | 'color.border.accent.magenta' | 'color.border.accent.magenta.subtle' | 'color.border.accent.gray' | 'color.border.accent.gray.subtle' | 'color.border.disabled' | 'color.border.focused' | 'color.border.input' | 'color.border.inverse' | 'color.border.selected' | 'color.border.brand' | 'color.border.danger' | 'color.border.danger.subtle' | 'color.border.warning' | 'color.border.warning.subtle' | 'color.border.success' | 'color.border.success.subtle' | 'color.border.discovery' | 'color.border.discovery.subtle' | 'color.border.information' | 'color.border.information.subtle' | 'color.border.bold' | 'color.background.accent.lime.subtlest' | 'color.background.accent.lime.subtlest.hovered' | 'color.background.accent.lime.subtlest.pressed' | 'color.background.accent.lime.subtler' | 'color.background.accent.lime.subtler.hovered' | 'color.background.accent.lime.subtler.pressed' | 'color.background.accent.lime.subtle' | 'color.background.accent.lime.subtle.hovered' | 'color.background.accent.lime.subtle.pressed' | 'color.background.accent.lime.bolder' | 'color.background.accent.lime.bolder.hovered' | 'color.background.accent.lime.bolder.pressed' | 'color.background.accent.red.subtlest' | 'color.background.accent.red.subtlest.hovered' | 'color.background.accent.red.subtlest.pressed' | 'color.background.accent.red.subtler' | 'color.background.accent.red.subtler.hovered' | 'color.background.accent.red.subtler.pressed' | 'color.background.accent.red.subtle' | 'color.background.accent.red.subtle.hovered' | 'color.background.accent.red.subtle.pressed' | 'color.background.accent.red.bolder' | 'color.background.accent.red.bolder.hovered' | 'color.background.accent.red.bolder.pressed' | 'color.background.accent.orange.subtlest' | 'color.background.accent.orange.subtlest.hovered' | 'color.background.accent.orange.subtlest.pressed' | 'color.background.accent.orange.subtler' | 'color.background.accent.orange.subtler.hovered' | 'color.background.accent.orange.subtler.pressed' | 'color.background.accent.orange.subtle' | 'color.background.accent.orange.subtle.hovered' | 'color.background.accent.orange.subtle.pressed' | 'color.background.accent.orange.bolder' | 'color.background.accent.orange.bolder.hovered' | 'color.background.accent.orange.bolder.pressed' | 'color.background.accent.yellow.subtlest' | 'color.background.accent.yellow.subtlest.hovered' | 'color.background.accent.yellow.subtlest.pressed' | 'color.background.accent.yellow.subtler' | 'color.background.accent.yellow.subtler.hovered' | 'color.background.accent.yellow.subtler.pressed' | 'color.background.accent.yellow.subtle' | 'color.background.accent.yellow.subtle.hovered' | 'color.background.accent.yellow.subtle.pressed' | 'color.background.accent.yellow.bolder' | 'color.background.accent.yellow.bolder.hovered' | 'color.background.accent.yellow.bolder.pressed' | 'color.background.accent.green.subtlest' | 'color.background.accent.green.subtlest.hovered' | 'color.background.accent.green.subtlest.pressed' | 'color.background.accent.green.subtler' | 'color.background.accent.green.subtler.hovered' | 'color.background.accent.green.subtler.pressed' | 'color.background.accent.green.subtle' | 'color.background.accent.green.subtle.hovered' | 'color.background.accent.green.subtle.pressed' | 'color.background.accent.green.bolder' | 'color.background.accent.green.bolder.hovered' | 'color.background.accent.green.bolder.pressed' | 'color.background.accent.teal.subtlest' | 'color.background.accent.teal.subtlest.hovered' | 'color.background.accent.teal.subtlest.pressed' | 'color.background.accent.teal.subtler' | 'color.background.accent.teal.subtler.hovered' | 'color.background.accent.teal.subtler.pressed' | 'color.background.accent.teal.subtle' | 'color.background.accent.teal.subtle.hovered' | 'color.background.accent.teal.subtle.pressed' | 'color.background.accent.teal.bolder' | 'color.background.accent.teal.bolder.hovered' | 'color.background.accent.teal.bolder.pressed' | 'color.background.accent.blue.subtlest' | 'color.background.accent.blue.subtlest.hovered' | 'color.background.accent.blue.subtlest.pressed' | 'color.background.accent.blue.subtler' | 'color.background.accent.blue.subtler.hovered' | 'color.background.accent.blue.subtler.pressed' | 'color.background.accent.blue.subtle' | 'color.background.accent.blue.subtle.hovered' | 'color.background.accent.blue.subtle.pressed' | 'color.background.accent.blue.bolder' | 'color.background.accent.blue.bolder.hovered' | 'color.background.accent.blue.bolder.pressed' | 'color.background.accent.purple.subtlest' | 'color.background.accent.purple.subtlest.hovered' | 'color.background.accent.purple.subtlest.pressed' | 'color.background.accent.purple.subtler' | 'color.background.accent.purple.subtler.hovered' | 'color.background.accent.purple.subtler.pressed' | 'color.background.accent.purple.subtle' | 'color.background.accent.purple.subtle.hovered' | 'color.background.accent.purple.subtle.pressed' | 'color.background.accent.purple.bolder' | 'color.background.accent.purple.bolder.hovered' | 'color.background.accent.purple.bolder.pressed' | 'color.background.accent.magenta.subtlest' | 'color.background.accent.magenta.subtlest.hovered' | 'color.background.accent.magenta.subtlest.pressed' | 'color.background.accent.magenta.subtler' | 'color.background.accent.magenta.subtler.hovered' | 'color.background.accent.magenta.subtler.pressed' | 'color.background.accent.magenta.subtle' | 'color.background.accent.magenta.subtle.hovered' | 'color.background.accent.magenta.subtle.pressed' | 'color.background.accent.magenta.bolder' | 'color.background.accent.magenta.bolder.hovered' | 'color.background.accent.magenta.bolder.pressed' | 'color.background.accent.gray.subtlest' | 'color.background.accent.gray.subtlest.hovered' | 'color.background.accent.gray.subtlest.pressed' | 'color.background.accent.gray.subtler' | 'color.background.accent.gray.subtler.hovered' | 'color.background.accent.gray.subtler.pressed' | 'color.background.accent.gray.subtle' | 'color.background.accent.gray.subtle.hovered' | 'color.background.accent.gray.subtle.pressed' | 'color.background.accent.gray.bolder' | 'color.background.accent.gray.bolder.hovered' | 'color.background.accent.gray.bolder.pressed' | '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.subtler' | 'color.background.danger.subtler.hovered' | 'color.background.danger.subtler.pressed' | 'color.background.danger.subtle' | '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.subtler' | 'color.background.warning.subtler.hovered' | 'color.background.warning.subtler.pressed' | 'color.background.warning.subtle' | '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.subtler' | 'color.background.success.subtler.hovered' | 'color.background.success.subtler.pressed' | 'color.background.success.subtle' | '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.subtler' | 'color.background.discovery.subtler.hovered' | 'color.background.discovery.subtler.pressed' | 'color.background.discovery.subtle' | '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.subtler' | 'color.background.information.subtler.hovered' | 'color.background.information.subtler.pressed' | 'color.background.information.subtle' | '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' | 'utility.elevation.surface.current' | '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' | 'space.negative.025' | 'space.negative.050' | 'space.negative.075' | 'space.negative.100' | 'space.negative.150' | 'space.negative.200' | 'space.negative.250' | 'space.negative.300' | 'space.negative.400' | 'font.heading.xxlarge' | 'font.heading.xlarge' | 'font.heading.large' | 'font.heading.medium' | 'font.heading.small' | 'font.heading.xsmall' | 'font.heading.xxsmall' | 'font.body.large' | 'font.body' | 'font.body.small' | 'font.metric.large' | 'font.metric.medium' | 'font.metric.small' | 'font.code' | 'font.weight.regular' | 'font.weight.medium' | 'font.weight.semibold' | 'font.weight.bold' | 'font.family.heading' | 'font.family.body' | 'font.family.code' | 'font.family.brand.heading' | 'font.family.brand.body' | 'radius.xsmall' | 'radius.small' | 'radius.medium' | 'radius.large' | 'radius.xlarge' | 'radius.xxlarge' | 'radius.full' | 'radius.tile' | 'border.width' | 'border.width.selected' | 'border.width.focused';
@@ -3,16 +3,16 @@
3
3
  *
4
4
  * Strict design token based typedef representing a subset of safe CSS properties.
5
5
  *
6
- * @codegen <<SignedSource::26cd14173782b5329f576f0f33e340ce>>
6
+ * @codegen <<SignedSource::84f11e137ffd220e1be3ae63fd7fe5fb>>
7
7
  * @codegenCommand yarn build tokens
8
8
  */
9
9
  export type BackgroundColorHovered = 'var(--ds-background-accent-lime-subtlest-hovered)' | 'var(--ds-background-accent-lime-subtler-hovered)' | 'var(--ds-background-accent-lime-subtle-hovered)' | 'var(--ds-background-accent-lime-bolder-hovered)' | 'var(--ds-background-accent-red-subtlest-hovered)' | 'var(--ds-background-accent-red-subtler-hovered)' | 'var(--ds-background-accent-red-subtle-hovered)' | 'var(--ds-background-accent-red-bolder-hovered)' | 'var(--ds-background-accent-orange-subtlest-hovered)' | 'var(--ds-background-accent-orange-subtler-hovered)' | 'var(--ds-background-accent-orange-subtle-hovered)' | 'var(--ds-background-accent-orange-bolder-hovered)' | 'var(--ds-background-accent-yellow-subtlest-hovered)' | 'var(--ds-background-accent-yellow-subtler-hovered)' | 'var(--ds-background-accent-yellow-subtle-hovered)' | 'var(--ds-background-accent-yellow-bolder-hovered)' | 'var(--ds-background-accent-green-subtlest-hovered)' | 'var(--ds-background-accent-green-subtler-hovered)' | 'var(--ds-background-accent-green-subtle-hovered)' | 'var(--ds-background-accent-green-bolder-hovered)' | 'var(--ds-background-accent-teal-subtlest-hovered)' | 'var(--ds-background-accent-teal-subtler-hovered)' | 'var(--ds-background-accent-teal-subtle-hovered)' | 'var(--ds-background-accent-teal-bolder-hovered)' | 'var(--ds-background-accent-blue-subtlest-hovered)' | 'var(--ds-background-accent-blue-subtler-hovered)' | 'var(--ds-background-accent-blue-subtle-hovered)' | 'var(--ds-background-accent-blue-bolder-hovered)' | 'var(--ds-background-accent-purple-subtlest-hovered)' | 'var(--ds-background-accent-purple-subtler-hovered)' | 'var(--ds-background-accent-purple-subtle-hovered)' | 'var(--ds-background-accent-purple-bolder-hovered)' | 'var(--ds-background-accent-magenta-subtlest-hovered)' | 'var(--ds-background-accent-magenta-subtler-hovered)' | 'var(--ds-background-accent-magenta-subtle-hovered)' | 'var(--ds-background-accent-magenta-bolder-hovered)' | 'var(--ds-background-accent-gray-subtlest-hovered)' | 'var(--ds-background-accent-gray-subtler-hovered)' | 'var(--ds-background-accent-gray-subtle-hovered)' | 'var(--ds-background-accent-gray-bolder-hovered)' | 'var(--ds-background-input-hovered)' | 'var(--ds-background-inverse-subtle-hovered)' | 'var(--ds-background-neutral-hovered)' | 'var(--ds-background-neutral-subtle-hovered)' | 'var(--ds-background-neutral-bold-hovered)' | 'var(--ds-background-selected-hovered)' | 'var(--ds-background-selected-bold-hovered)' | 'var(--ds-background-brand-subtlest-hovered)' | 'var(--ds-background-brand-bold-hovered)' | 'var(--ds-background-brand-boldest-hovered)' | 'var(--ds-background-danger-hovered)' | 'var(--ds-background-danger-subtler-hovered)' | 'var(--ds-background-danger-bold-hovered)' | 'var(--ds-background-warning-hovered)' | 'var(--ds-background-warning-subtler-hovered)' | 'var(--ds-background-warning-bold-hovered)' | 'var(--ds-background-success-hovered)' | 'var(--ds-background-success-subtler-hovered)' | 'var(--ds-background-success-bold-hovered)' | 'var(--ds-background-discovery-hovered)' | 'var(--ds-background-discovery-subtler-hovered)' | 'var(--ds-background-discovery-bold-hovered)' | 'var(--ds-background-information-hovered)' | 'var(--ds-background-information-subtler-hovered)' | 'var(--ds-background-information-bold-hovered)' | 'var(--ds-surface-hovered)' | 'var(--ds-surface-overlay-hovered)' | 'var(--ds-surface-raised-hovered)';
10
10
  export type BackgroundColorPressed = 'var(--ds-background-accent-lime-subtlest-pressed)' | 'var(--ds-background-accent-lime-subtler-pressed)' | 'var(--ds-background-accent-lime-subtle-pressed)' | 'var(--ds-background-accent-lime-bolder-pressed)' | 'var(--ds-background-accent-red-subtlest-pressed)' | 'var(--ds-background-accent-red-subtler-pressed)' | 'var(--ds-background-accent-red-subtle-pressed)' | 'var(--ds-background-accent-red-bolder-pressed)' | 'var(--ds-background-accent-orange-subtlest-pressed)' | 'var(--ds-background-accent-orange-subtler-pressed)' | 'var(--ds-background-accent-orange-subtle-pressed)' | 'var(--ds-background-accent-orange-bolder-pressed)' | 'var(--ds-background-accent-yellow-subtlest-pressed)' | 'var(--ds-background-accent-yellow-subtler-pressed)' | 'var(--ds-background-accent-yellow-subtle-pressed)' | 'var(--ds-background-accent-yellow-bolder-pressed)' | 'var(--ds-background-accent-green-subtlest-pressed)' | 'var(--ds-background-accent-green-subtler-pressed)' | 'var(--ds-background-accent-green-subtle-pressed)' | 'var(--ds-background-accent-green-bolder-pressed)' | 'var(--ds-background-accent-teal-subtlest-pressed)' | 'var(--ds-background-accent-teal-subtler-pressed)' | 'var(--ds-background-accent-teal-subtle-pressed)' | 'var(--ds-background-accent-teal-bolder-pressed)' | 'var(--ds-background-accent-blue-subtlest-pressed)' | 'var(--ds-background-accent-blue-subtler-pressed)' | 'var(--ds-background-accent-blue-subtle-pressed)' | 'var(--ds-background-accent-blue-bolder-pressed)' | 'var(--ds-background-accent-purple-subtlest-pressed)' | 'var(--ds-background-accent-purple-subtler-pressed)' | 'var(--ds-background-accent-purple-subtle-pressed)' | 'var(--ds-background-accent-purple-bolder-pressed)' | 'var(--ds-background-accent-magenta-subtlest-pressed)' | 'var(--ds-background-accent-magenta-subtler-pressed)' | 'var(--ds-background-accent-magenta-subtle-pressed)' | 'var(--ds-background-accent-magenta-bolder-pressed)' | 'var(--ds-background-accent-gray-subtlest-pressed)' | 'var(--ds-background-accent-gray-subtler-pressed)' | 'var(--ds-background-accent-gray-subtle-pressed)' | 'var(--ds-background-accent-gray-bolder-pressed)' | 'var(--ds-background-input-pressed)' | 'var(--ds-background-inverse-subtle-pressed)' | 'var(--ds-background-neutral-pressed)' | 'var(--ds-background-neutral-subtle-pressed)' | 'var(--ds-background-neutral-bold-pressed)' | 'var(--ds-background-selected-pressed)' | 'var(--ds-background-selected-bold-pressed)' | 'var(--ds-background-brand-subtlest-pressed)' | 'var(--ds-background-brand-bold-pressed)' | 'var(--ds-background-brand-boldest-pressed)' | 'var(--ds-background-danger-pressed)' | 'var(--ds-background-danger-subtler-pressed)' | 'var(--ds-background-danger-bold-pressed)' | 'var(--ds-background-warning-pressed)' | 'var(--ds-background-warning-subtler-pressed)' | 'var(--ds-background-warning-bold-pressed)' | 'var(--ds-background-success-pressed)' | 'var(--ds-background-success-subtler-pressed)' | 'var(--ds-background-success-bold-pressed)' | 'var(--ds-background-discovery-pressed)' | 'var(--ds-background-discovery-subtler-pressed)' | 'var(--ds-background-discovery-bold-pressed)' | 'var(--ds-background-information-pressed)' | 'var(--ds-background-information-subtler-pressed)' | 'var(--ds-background-information-bold-pressed)' | 'var(--ds-surface-pressed)' | 'var(--ds-surface-overlay-pressed)' | 'var(--ds-surface-raised-pressed)';
11
- export type BackgroundColor = 'transparent' | 'currentcolor' | BackgroundColorHovered | BackgroundColorPressed | 'var(--ds-background-accent-lime-subtlest)' | 'var(--ds-background-accent-lime-subtler)' | 'var(--ds-background-accent-lime-subtle)' | 'var(--ds-background-accent-lime-bolder)' | 'var(--ds-background-accent-red-subtlest)' | 'var(--ds-background-accent-red-subtler)' | 'var(--ds-background-accent-red-subtle)' | 'var(--ds-background-accent-red-bolder)' | 'var(--ds-background-accent-orange-subtlest)' | 'var(--ds-background-accent-orange-subtler)' | 'var(--ds-background-accent-orange-subtle)' | 'var(--ds-background-accent-orange-bolder)' | 'var(--ds-background-accent-yellow-subtlest)' | 'var(--ds-background-accent-yellow-subtler)' | 'var(--ds-background-accent-yellow-subtle)' | 'var(--ds-background-accent-yellow-bolder)' | 'var(--ds-background-accent-green-subtlest)' | 'var(--ds-background-accent-green-subtler)' | 'var(--ds-background-accent-green-subtle)' | 'var(--ds-background-accent-green-bolder)' | 'var(--ds-background-accent-teal-subtlest)' | 'var(--ds-background-accent-teal-subtler)' | 'var(--ds-background-accent-teal-subtle)' | 'var(--ds-background-accent-teal-bolder)' | 'var(--ds-background-accent-blue-subtlest)' | 'var(--ds-background-accent-blue-subtler)' | 'var(--ds-background-accent-blue-subtle)' | 'var(--ds-background-accent-blue-bolder)' | 'var(--ds-background-accent-purple-subtlest)' | 'var(--ds-background-accent-purple-subtler)' | 'var(--ds-background-accent-purple-subtle)' | 'var(--ds-background-accent-purple-bolder)' | 'var(--ds-background-accent-magenta-subtlest)' | 'var(--ds-background-accent-magenta-subtler)' | 'var(--ds-background-accent-magenta-subtle)' | 'var(--ds-background-accent-magenta-bolder)' | 'var(--ds-background-accent-gray-subtlest)' | 'var(--ds-background-accent-gray-subtler)' | 'var(--ds-background-accent-gray-subtle)' | 'var(--ds-background-accent-gray-bolder)' | 'var(--ds-background-disabled)' | 'var(--ds-background-input)' | 'var(--ds-background-inverse-subtle)' | 'var(--ds-background-neutral)' | 'var(--ds-background-neutral-subtle)' | 'var(--ds-background-neutral-bold)' | 'var(--ds-background-selected)' | 'var(--ds-background-selected-bold)' | 'var(--ds-background-brand-subtlest)' | 'var(--ds-background-brand-bold)' | 'var(--ds-background-brand-boldest)' | 'var(--ds-background-danger)' | 'var(--ds-background-danger-subtler)' | 'var(--ds-background-danger-bold)' | 'var(--ds-background-warning)' | 'var(--ds-background-warning-subtler)' | 'var(--ds-background-warning-bold)' | 'var(--ds-background-success)' | 'var(--ds-background-success-subtler)' | 'var(--ds-background-success-bold)' | 'var(--ds-background-discovery)' | 'var(--ds-background-discovery-subtler)' | 'var(--ds-background-discovery-bold)' | 'var(--ds-background-information)' | 'var(--ds-background-information-subtler)' | 'var(--ds-background-information-bold)' | 'var(--ds-skeleton)' | 'var(--ds-skeleton-subtle)' | 'var(--ds-surface)' | 'var(--ds-surface-overlay)' | 'var(--ds-surface-raised)' | 'var(--ds-surface-sunken)' | 'var(--ds-elevation-surface-current)';
11
+ export type BackgroundColor = 'transparent' | 'currentcolor' | BackgroundColorHovered | BackgroundColorPressed | 'var(--ds-background-accent-lime-subtlest)' | 'var(--ds-background-accent-lime-subtler)' | 'var(--ds-background-accent-lime-subtle)' | 'var(--ds-background-accent-lime-bolder)' | 'var(--ds-background-accent-red-subtlest)' | 'var(--ds-background-accent-red-subtler)' | 'var(--ds-background-accent-red-subtle)' | 'var(--ds-background-accent-red-bolder)' | 'var(--ds-background-accent-orange-subtlest)' | 'var(--ds-background-accent-orange-subtler)' | 'var(--ds-background-accent-orange-subtle)' | 'var(--ds-background-accent-orange-bolder)' | 'var(--ds-background-accent-yellow-subtlest)' | 'var(--ds-background-accent-yellow-subtler)' | 'var(--ds-background-accent-yellow-subtle)' | 'var(--ds-background-accent-yellow-bolder)' | 'var(--ds-background-accent-green-subtlest)' | 'var(--ds-background-accent-green-subtler)' | 'var(--ds-background-accent-green-subtle)' | 'var(--ds-background-accent-green-bolder)' | 'var(--ds-background-accent-teal-subtlest)' | 'var(--ds-background-accent-teal-subtler)' | 'var(--ds-background-accent-teal-subtle)' | 'var(--ds-background-accent-teal-bolder)' | 'var(--ds-background-accent-blue-subtlest)' | 'var(--ds-background-accent-blue-subtler)' | 'var(--ds-background-accent-blue-subtle)' | 'var(--ds-background-accent-blue-bolder)' | 'var(--ds-background-accent-purple-subtlest)' | 'var(--ds-background-accent-purple-subtler)' | 'var(--ds-background-accent-purple-subtle)' | 'var(--ds-background-accent-purple-bolder)' | 'var(--ds-background-accent-magenta-subtlest)' | 'var(--ds-background-accent-magenta-subtler)' | 'var(--ds-background-accent-magenta-subtle)' | 'var(--ds-background-accent-magenta-bolder)' | 'var(--ds-background-accent-gray-subtlest)' | 'var(--ds-background-accent-gray-subtler)' | 'var(--ds-background-accent-gray-subtle)' | 'var(--ds-background-accent-gray-bolder)' | 'var(--ds-background-disabled)' | 'var(--ds-background-input)' | 'var(--ds-background-inverse-subtle)' | 'var(--ds-background-neutral)' | 'var(--ds-background-neutral-subtle)' | 'var(--ds-background-neutral-bold)' | 'var(--ds-background-selected)' | 'var(--ds-background-selected-bold)' | 'var(--ds-background-brand-subtlest)' | 'var(--ds-background-brand-bold)' | 'var(--ds-background-brand-boldest)' | 'var(--ds-background-danger)' | 'var(--ds-background-danger-subtler)' | 'var(--ds-background-danger-subtle)' | 'var(--ds-background-danger-bold)' | 'var(--ds-background-warning)' | 'var(--ds-background-warning-subtler)' | 'var(--ds-background-warning-subtle)' | 'var(--ds-background-warning-bold)' | 'var(--ds-background-success)' | 'var(--ds-background-success-subtler)' | 'var(--ds-background-success-subtle)' | 'var(--ds-background-success-bold)' | 'var(--ds-background-discovery)' | 'var(--ds-background-discovery-subtler)' | 'var(--ds-background-discovery-subtle)' | 'var(--ds-background-discovery-bold)' | 'var(--ds-background-information)' | 'var(--ds-background-information-subtler)' | 'var(--ds-background-information-subtle)' | 'var(--ds-background-information-bold)' | 'var(--ds-skeleton)' | 'var(--ds-skeleton-subtle)' | 'var(--ds-surface)' | 'var(--ds-surface-overlay)' | 'var(--ds-surface-raised)' | 'var(--ds-surface-sunken)' | 'var(--ds-elevation-surface-current)';
12
12
  export type FontShorthand = 'var(--ds-font-heading-xxlarge)' | 'var(--ds-font-heading-xlarge)' | 'var(--ds-font-heading-large)' | 'var(--ds-font-heading-medium)' | 'var(--ds-font-heading-small)' | 'var(--ds-font-heading-xsmall)' | 'var(--ds-font-heading-xxsmall)' | 'var(--ds-font-body-large)' | 'var(--ds-font-body)' | 'var(--ds-font-body-small)' | 'var(--ds-font-metric-large)' | 'var(--ds-font-metric-medium)' | 'var(--ds-font-metric-small)' | 'var(--ds-font-code)';
13
13
  export type IconColorPressed = 'var(--ds-link-pressed)' | 'var(--ds-link-visited-pressed)';
14
14
  export type IconColor = IconColorPressed | 'var(--ds-link)' | 'var(--ds-link-visited)' | 'var(--ds-icon)' | 'var(--ds-icon-accent-lime)' | 'var(--ds-icon-accent-red)' | 'var(--ds-icon-accent-orange)' | 'var(--ds-icon-accent-yellow)' | 'var(--ds-icon-accent-green)' | 'var(--ds-icon-accent-teal)' | 'var(--ds-icon-accent-blue)' | 'var(--ds-icon-accent-purple)' | 'var(--ds-icon-accent-magenta)' | 'var(--ds-icon-accent-gray)' | 'var(--ds-icon-disabled)' | 'var(--ds-icon-inverse)' | 'var(--ds-icon-selected)' | 'var(--ds-icon-brand)' | 'var(--ds-icon-danger)' | 'var(--ds-icon-warning)' | 'var(--ds-icon-warning-inverse)' | 'var(--ds-icon-success)' | 'var(--ds-icon-discovery)' | 'var(--ds-icon-information)' | 'var(--ds-icon-subtlest)' | 'var(--ds-icon-subtle)';
15
- export type BorderColor = 'transparent' | 'var(--ds-border)' | 'var(--ds-border-accent-lime)' | 'var(--ds-border-accent-red)' | 'var(--ds-border-accent-orange)' | 'var(--ds-border-accent-yellow)' | 'var(--ds-border-accent-green)' | 'var(--ds-border-accent-teal)' | 'var(--ds-border-accent-blue)' | 'var(--ds-border-accent-purple)' | 'var(--ds-border-accent-magenta)' | 'var(--ds-border-accent-gray)' | 'var(--ds-border-disabled)' | 'var(--ds-border-focused)' | 'var(--ds-border-input)' | 'var(--ds-border-inverse)' | 'var(--ds-border-selected)' | 'var(--ds-border-brand)' | 'var(--ds-border-danger)' | 'var(--ds-border-warning)' | 'var(--ds-border-success)' | 'var(--ds-border-discovery)' | 'var(--ds-border-information)' | 'var(--ds-border-bold)';
15
+ export type BorderColor = 'transparent' | 'var(--ds-border)' | 'var(--ds-border-accent-lime)' | 'var(--ds-border-accent-lime-subtle)' | 'var(--ds-border-accent-red)' | 'var(--ds-border-accent-red-subtle)' | 'var(--ds-border-accent-orange)' | 'var(--ds-border-accent-orange-subtle)' | 'var(--ds-border-accent-yellow)' | 'var(--ds-border-accent-yellow-subtle)' | 'var(--ds-border-accent-green)' | 'var(--ds-border-accent-green-subtle)' | 'var(--ds-border-accent-teal)' | 'var(--ds-border-accent-teal-subtle)' | 'var(--ds-border-accent-blue)' | 'var(--ds-border-accent-blue-subtle)' | 'var(--ds-border-accent-purple)' | 'var(--ds-border-accent-purple-subtle)' | 'var(--ds-border-accent-magenta)' | 'var(--ds-border-accent-magenta-subtle)' | 'var(--ds-border-accent-gray)' | 'var(--ds-border-accent-gray-subtle)' | 'var(--ds-border-disabled)' | 'var(--ds-border-focused)' | 'var(--ds-border-input)' | 'var(--ds-border-inverse)' | 'var(--ds-border-selected)' | 'var(--ds-border-brand)' | 'var(--ds-border-danger)' | 'var(--ds-border-danger-subtle)' | 'var(--ds-border-warning)' | 'var(--ds-border-warning-subtle)' | 'var(--ds-border-success)' | 'var(--ds-border-success-subtle)' | 'var(--ds-border-discovery)' | 'var(--ds-border-discovery-subtle)' | 'var(--ds-border-information)' | 'var(--ds-border-information-subtle)' | 'var(--ds-border-bold)';
16
16
  export type BorderRadius = 'var(--ds-radius-xsmall)' | 'var(--ds-radius-small)' | 'var(--ds-radius-medium)' | 'var(--ds-radius-large)' | 'var(--ds-radius-xlarge)' | 'var(--ds-radius-xxlarge)' | 'var(--ds-radius-full)' | 'var(--ds-radius-tile)' | 0 | '0' | 'inherit';
17
17
  export type BorderWidth = 'var(--ds-border-width)' | 'var(--ds-border-width-selected)' | 'var(--ds-border-width-focused)' | 0 | '0';
18
18
  export type BorderShorthand = 'none' | `${BorderWidth} solid ${BorderColor}`;
@@ -1 +1,2 @@
1
- export { themeStringToObject, themeObjectToString } from '../theme-state-transformer';
1
+ export { themeStringToObject } from '../theme-string-to-object';
2
+ export { themeObjectToString } from '../theme-object-to-string';
@@ -3,7 +3,7 @@
3
3
  *
4
4
  * Metadata for generation of `@atlaskit/ads-mcp` and https://atlassian.design/llms-tokens.txt.
5
5
  *
6
- * @codegen <<SignedSource::ecdf4f84ae7b36849943b200af52ee54>>
6
+ * @codegen <<SignedSource::620de1bdd9882e214dcc9ae141009ae7>>
7
7
  * @codegenCommand yarn build tokens
8
8
  */
9
9
  export interface Token {
@@ -9,7 +9,8 @@ export { default as getSSRAutoScript } from './get-ssr-auto-script';
9
9
  export { default as useThemeObserver } from './use-theme-observer';
10
10
  export { default as ThemeMutationObserver } from './theme-mutation-observer';
11
11
  export { default as getGlobalTheme } from './get-global-theme';
12
- export { themeStringToObject, themeObjectToString } from './theme-state-transformer';
12
+ export { themeStringToObject } from './theme-string-to-object';
13
+ export { themeObjectToString } from './theme-object-to-string';
13
14
  export { default as themeImportMap } from './artifacts/theme-import-map';
14
15
  export type { CSSToken } from './artifacts/token-names';
15
16
  export type { ActiveTokens } from './artifacts/types';
@@ -0,0 +1,2 @@
1
+ import type { ThemeColorModes } from './theme-color-modes';
2
+ export declare const isColorMode: (modeId: string) => modeId is ThemeColorModes;
@@ -0,0 +1,2 @@
1
+ import type { ThemeIds } from './theme-config';
2
+ export declare const isThemeIds: (themeId: string) => themeId is ThemeIds;
@@ -0,0 +1,4 @@
1
+ declare const themeKinds: readonly ["light", "dark", "spacing", "typography", "shape", "motion"];
2
+ type ThemeKind = (typeof themeKinds)[number];
3
+ export declare const isThemeKind: (themeKind: string) => themeKind is ThemeKind;
4
+ export {};
@@ -5,3 +5,4 @@
5
5
  * The idea is there may exist many color themes, but every theme must either fit into light or dark.
6
6
  */
7
7
  export declare const themeColorModes: readonly ["light", "dark", "auto"];
8
+ export type ThemeColorModes = (typeof themeColorModes)[number];
@@ -1,8 +1,9 @@
1
- import { type themeColorModes } from './theme-color-modes';
2
- import { themeIds } from './theme-ids';
3
1
  /**
4
2
  * This file contains the source of truth for themes and all associated meta data.
5
3
  */
4
+ import type { ThemeColorModes } from './theme-color-modes';
5
+ import { type ThemeIds } from './theme-ids';
6
+ import type { ThemeState } from './theme-state';
6
7
  /**
7
8
  * Themes: The internal identifier of a theme.
8
9
  * These ids are what the actual theme files/folders are called.
@@ -23,7 +24,6 @@ export type ThemeOverrides = Themes;
23
24
  * In the future other types may be introduced such as typography.
24
25
  */
25
26
  type ThemeKinds = 'color' | 'spacing' | 'typography' | 'shape' | 'motion';
26
- export type ThemeColorModes = (typeof themeColorModes)[number];
27
27
  export type DataColorModes = Exclude<ThemeColorModes, 'auto'>;
28
28
  /**
29
29
  * Contrast preferences: The system contrast preference
@@ -31,7 +31,6 @@ export type DataColorModes = Exclude<ThemeColorModes, 'auto'>;
31
31
  declare const themeContrastModes: readonly ["more", "no-preference", "auto"];
32
32
  export type ThemeContrastModes = (typeof themeContrastModes)[number];
33
33
  export type DataContrastModes = 'more' | 'no-preference' | 'auto';
34
- export type ThemeIds = (typeof themeIds)[number];
35
34
  /**
36
35
  * Theme override ids: the equivalent of themeIds for theme overrides.
37
36
  * Theme overrides are temporary and there may not be any defined at times.
@@ -102,40 +101,6 @@ interface ThemeConfig {
102
101
  increasesContrastFor?: ThemeIds;
103
102
  }
104
103
  declare const themeConfig: Record<Themes | ThemeOverrides, ThemeConfig>;
105
- type HEX = `#${string}`;
106
- export type CSSColor = HEX;
107
- /**
108
- * ThemeOptionsSchema: additional configuration options used to customize Atlassian's themes
109
- */
110
- export interface ThemeOptionsSchema {
111
- brandColor: CSSColor;
112
- }
113
- /**
114
- * ThemeState: the standard representation of an app's current theme and preferences
115
- */
116
- export interface ThemeState {
117
- light: Extract<ThemeIds, 'light' | 'light-future' | 'dark' | 'dark-future' | 'light-increased-contrast' | 'dark-increased-contrast'>;
118
- dark: Extract<ThemeIds, 'light' | 'light-future' | 'dark' | 'dark-future' | 'light-increased-contrast' | 'dark-increased-contrast'>;
119
- colorMode: ThemeColorModes;
120
- contrastMode: ThemeContrastModes;
121
- shape?: Extract<ThemeIds, 'shape'>;
122
- spacing: Extract<ThemeIds, 'spacing'>;
123
- typography: Extract<ThemeIds, 'typography'>;
124
- motion?: Extract<ThemeIds, 'motion'>;
125
- UNSAFE_themeOptions?: ThemeOptionsSchema;
126
- }
127
- /**
128
- * Can't evaluate typography feature flags at the module level,
129
- * it will always resolve to false when server side rendered or when flags are loaded async.
130
- */
131
- interface ThemeStateDefaults extends Omit<ThemeState, 'shape' | 'motion'> {
132
- shape: () => ThemeState['shape'];
133
- motion: () => ThemeState['motion'];
134
- }
135
- /**
136
- * themeStateDefaults: the default values for ThemeState used by theming utilities
137
- */
138
- export declare const themeStateDefaults: ThemeStateDefaults;
139
104
  /**
140
105
  * Represents theme state once mounted to the page
141
106
  * (the page doesn't have an "auto" color mode, it's either light or dark)
@@ -144,5 +109,8 @@ export interface ActiveThemeState extends ThemeState {
144
109
  colorMode: DataColorModes;
145
110
  }
146
111
  export default themeConfig;
147
- export { themeColorModes } from './theme-color-modes';
148
- export { themeIds } from './theme-ids';
112
+ export { themeColorModes, type ThemeColorModes } from './theme-color-modes';
113
+ export { themeIds, type ThemeIds } from './theme-ids';
114
+ export { themeStateDefaults } from './theme-state-defaults';
115
+ export { type ThemeOptionsSchema, type CSSColor } from './theme-options-schema';
116
+ export { type ThemeState } from './theme-state';
@@ -1,3 +1,4 @@
1
+ export type ThemeIds = (typeof themeIds)[number];
1
2
  /**
2
3
  * Theme ids: The value that will be mounted to the DOM as a data attr
3
4
  * For example: `data-theme="light:light dark:dark spacing:spacing"
@@ -0,0 +1,13 @@
1
+ import type { ThemeState } from './theme-state';
2
+ /**
3
+ * Converts a theme object to a string formatted for the `data-theme` HTML attribute.
4
+ *
5
+ * @param {object} themes The themes that should be applied.
6
+ *
7
+ * @example
8
+ * ```
9
+ * themeObjectToString({ dark: 'dark', light: 'light', spacing: 'spacing' });
10
+ * // returns 'dark:dark light:light spacing:spacing'
11
+ * ```
12
+ */
13
+ export declare const themeObjectToString: (themeState: Partial<ThemeState>) => string;
@@ -0,0 +1,7 @@
1
+ export type CSSColor = `#${string}`;
2
+ /**
3
+ * ThemeOptionsSchema: additional configuration options used to customize Atlassian's themes
4
+ */
5
+ export interface ThemeOptionsSchema {
6
+ brandColor: CSSColor;
7
+ }
@@ -0,0 +1,14 @@
1
+ import type { ThemeState } from './theme-state';
2
+ /**
3
+ * Can't evaluate typography feature flags at the module level,
4
+ * it will always resolve to false when server side rendered or when flags are loaded async.
5
+ */
6
+ interface ThemeStateDefaults extends Omit<ThemeState, 'shape' | 'motion'> {
7
+ shape: () => ThemeState['shape'];
8
+ motion: () => ThemeState['motion'];
9
+ }
10
+ /**
11
+ * themeStateDefaults: the default values for ThemeState used by theming utilities
12
+ */
13
+ export declare const themeStateDefaults: ThemeStateDefaults;
14
+ export {};
@@ -0,0 +1,17 @@
1
+ import type { ThemeColorModes } from './theme-color-modes';
2
+ import type { ThemeContrastModes, ThemeOptionsSchema } from './theme-config';
3
+ import type { ThemeIds } from './theme-ids';
4
+ /**
5
+ * ThemeState: the standard representation of an app's current theme and preferences
6
+ */
7
+ export interface ThemeState {
8
+ light: Extract<ThemeIds, 'light' | 'light-future' | 'dark' | 'dark-future' | 'light-increased-contrast' | 'dark-increased-contrast'>;
9
+ dark: Extract<ThemeIds, 'light' | 'light-future' | 'dark' | 'dark-future' | 'light-increased-contrast' | 'dark-increased-contrast'>;
10
+ colorMode: ThemeColorModes;
11
+ contrastMode: ThemeContrastModes;
12
+ shape?: Extract<ThemeIds, 'shape'>;
13
+ spacing: Extract<ThemeIds, 'spacing'>;
14
+ typography: Extract<ThemeIds, 'typography'>;
15
+ motion?: Extract<ThemeIds, 'motion'>;
16
+ UNSAFE_themeOptions?: ThemeOptionsSchema;
17
+ }
@@ -12,15 +12,3 @@ import type { ThemeState } from './theme-config';
12
12
  * ```
13
13
  */
14
14
  export declare const themeStringToObject: (themeState: string) => Partial<ThemeState>;
15
- /**
16
- * Converts a theme object to a string formatted for the `data-theme` HTML attribute.
17
- *
18
- * @param {object} themes The themes that should be applied.
19
- *
20
- * @example
21
- * ```
22
- * themeObjectToString({ dark: 'dark', light: 'light', spacing: 'spacing' });
23
- * // returns 'dark:dark light:light spacing:spacing'
24
- * ```
25
- */
26
- export declare const themeObjectToString: (themeState: Partial<ThemeState>) => string;
@@ -240,6 +240,9 @@ export interface BackgroundColorTokenSchema<BaseToken> {
240
240
  hovered: PaintToken<BaseToken>;
241
241
  pressed: PaintToken<BaseToken>;
242
242
  };
243
+ subtle: {
244
+ '[default]': PaintToken<BaseToken>;
245
+ };
243
246
  };
244
247
  warning: {
245
248
  '[default]': {
@@ -257,6 +260,9 @@ export interface BackgroundColorTokenSchema<BaseToken> {
257
260
  hovered: PaintToken<BaseToken>;
258
261
  pressed: PaintToken<BaseToken>;
259
262
  };
263
+ subtle: {
264
+ '[default]': PaintToken<BaseToken>;
265
+ };
260
266
  };
261
267
  success: {
262
268
  '[default]': {
@@ -274,6 +280,9 @@ export interface BackgroundColorTokenSchema<BaseToken> {
274
280
  hovered: PaintToken<BaseToken>;
275
281
  pressed: PaintToken<BaseToken>;
276
282
  };
283
+ subtle: {
284
+ '[default]': PaintToken<BaseToken>;
285
+ };
277
286
  };
278
287
  discovery: {
279
288
  '[default]': {
@@ -291,6 +300,9 @@ export interface BackgroundColorTokenSchema<BaseToken> {
291
300
  hovered: PaintToken<BaseToken>;
292
301
  pressed: PaintToken<BaseToken>;
293
302
  };
303
+ subtle: {
304
+ '[default]': PaintToken<BaseToken>;
305
+ };
294
306
  };
295
307
  information: {
296
308
  '[default]': {
@@ -308,6 +320,9 @@ export interface BackgroundColorTokenSchema<BaseToken> {
308
320
  hovered: PaintToken<BaseToken>;
309
321
  pressed: PaintToken<BaseToken>;
310
322
  };
323
+ subtle: {
324
+ '[default]': PaintToken<BaseToken>;
325
+ };
311
326
  };
312
327
  };
313
328
  };
@@ -323,11 +338,26 @@ export interface BorderColorTokenSchema<BaseToken> {
323
338
  disabled: PaintToken<BaseToken>;
324
339
  brand: PaintToken<BaseToken>;
325
340
  selected: PaintToken<BaseToken>;
326
- danger: PaintToken<BaseToken>;
327
- warning: PaintToken<BaseToken>;
328
- success: PaintToken<BaseToken>;
329
- discovery: PaintToken<BaseToken>;
330
- information: PaintToken<BaseToken>;
341
+ danger: {
342
+ '[default]': PaintToken<BaseToken>;
343
+ subtle: PaintToken<BaseToken>;
344
+ };
345
+ warning: {
346
+ '[default]': PaintToken<BaseToken>;
347
+ subtle: PaintToken<BaseToken>;
348
+ };
349
+ success: {
350
+ '[default]': PaintToken<BaseToken>;
351
+ subtle: PaintToken<BaseToken>;
352
+ };
353
+ discovery: {
354
+ '[default]': PaintToken<BaseToken>;
355
+ subtle: PaintToken<BaseToken>;
356
+ };
357
+ information: {
358
+ '[default]': PaintToken<BaseToken>;
359
+ subtle: PaintToken<BaseToken>;
360
+ };
331
361
  };
332
362
  };
333
363
  }
@@ -456,16 +486,46 @@ export interface AccentColorTokenSchema<BaseToken> {
456
486
  };
457
487
  border: {
458
488
  accent: {
459
- blue: PaintToken<BaseToken>;
460
- red: PaintToken<BaseToken>;
461
- orange: PaintToken<BaseToken>;
462
- yellow: PaintToken<BaseToken>;
463
- green: PaintToken<BaseToken>;
464
- purple: PaintToken<BaseToken>;
465
- teal: PaintToken<BaseToken>;
466
- magenta: PaintToken<BaseToken>;
467
- lime: PaintToken<BaseToken>;
468
- gray: PaintToken<BaseToken>;
489
+ blue: {
490
+ '[default]': PaintToken<BaseToken>;
491
+ subtle: PaintToken<BaseToken>;
492
+ };
493
+ red: {
494
+ '[default]': PaintToken<BaseToken>;
495
+ subtle: PaintToken<BaseToken>;
496
+ };
497
+ orange: {
498
+ '[default]': PaintToken<BaseToken>;
499
+ subtle: PaintToken<BaseToken>;
500
+ };
501
+ yellow: {
502
+ '[default]': PaintToken<BaseToken>;
503
+ subtle: PaintToken<BaseToken>;
504
+ };
505
+ green: {
506
+ '[default]': PaintToken<BaseToken>;
507
+ subtle: PaintToken<BaseToken>;
508
+ };
509
+ purple: {
510
+ '[default]': PaintToken<BaseToken>;
511
+ subtle: PaintToken<BaseToken>;
512
+ };
513
+ teal: {
514
+ '[default]': PaintToken<BaseToken>;
515
+ subtle: PaintToken<BaseToken>;
516
+ };
517
+ magenta: {
518
+ '[default]': PaintToken<BaseToken>;
519
+ subtle: PaintToken<BaseToken>;
520
+ };
521
+ lime: {
522
+ '[default]': PaintToken<BaseToken>;
523
+ subtle: PaintToken<BaseToken>;
524
+ };
525
+ gray: {
526
+ '[default]': PaintToken<BaseToken>;
527
+ subtle: PaintToken<BaseToken>;
528
+ };
469
529
  };
470
530
  };
471
531
  background: {
@@ -0,0 +1,9 @@
1
+ export declare const additionalContrastChecker: ({ customThemeTokenMap, mode, themeRamp, }: {
2
+ customThemeTokenMap: {
3
+ [key: string]: number | string;
4
+ };
5
+ mode: "light" | "dark";
6
+ themeRamp: string[];
7
+ }) => {
8
+ [key: string]: number;
9
+ };
@@ -1,9 +1,4 @@
1
- import tokens from '../artifacts/token-names';
2
1
  import { type ThemeColorModes, type ThemeOptionsSchema } from '../theme-config';
3
- type Token = keyof typeof tokens;
4
2
  type ThemeAttributeId = 'light' | 'dark';
5
3
  export declare function findMissingCustomStyleElements(UNSAFE_themeOptions: ThemeOptionsSchema, mode: ThemeColorModes): ThemeAttributeId[];
6
- export declare function reduceTokenMap(tokenMap: {
7
- [key in Token]?: number | string;
8
- }, themeRamp: string[]): string;
9
- export { limitSizeOfCustomStyleElements } from './limit-size-of-custom-style-elements';
4
+ export {};
@@ -8,13 +8,4 @@ interface AdditionalContrastCheck {
8
8
  updatedTokens: Token[];
9
9
  }
10
10
  export declare const additionalChecks: AdditionalContrastCheck[];
11
- export declare const additionalContrastChecker: ({ customThemeTokenMap, mode, themeRamp, }: {
12
- customThemeTokenMap: {
13
- [key: string]: number | string;
14
- };
15
- mode: "light" | "dark";
16
- themeRamp: string[];
17
- }) => {
18
- [key: string]: number;
19
- };
20
11
  export {};
@@ -0,0 +1 @@
1
+ export declare function deltaE(rgbA: number[], rgbB: number[]): number;
@@ -0,0 +1,5 @@
1
+ import { type CSSColor } from '../theme-config';
2
+ export declare const generateColors: (brandColor: CSSColor) => {
3
+ ramp: CSSColor[];
4
+ replacedColor: CSSColor;
5
+ };
@@ -5,10 +5,5 @@ type TokenMap = {
5
5
  [key in Token]?: number | string;
6
6
  };
7
7
  type Mode = 'light' | 'dark';
8
- export declare const generateColors: (brandColor: CSSColor) => {
9
- ramp: CSSColor[];
10
- replacedColor: CSSColor;
11
- };
12
- export declare const generateTokenMap: (brandColor: CSSColor, mode: ThemeColorModes, themeRamp?: CSSColor[]) => { [mode in Mode]?: TokenMap; };
13
8
  export declare const generateTokenMapWithContrastCheck: (brandColor: CSSColor, mode: ThemeColorModes, themeRamp?: CSSColor[]) => { [mode in Mode]?: TokenMap; };
14
- export { getClosestColorIndex } from './get-closest-color-index';
9
+ export {};
@@ -0,0 +1,9 @@
1
+ import type tokens from '../artifacts/token-names';
2
+ import { type CSSColor, type ThemeColorModes } from '../theme-config';
3
+ type Token = keyof typeof tokens;
4
+ type TokenMap = {
5
+ [key in Token]?: number | string;
6
+ };
7
+ type Mode = 'light' | 'dark';
8
+ export declare const generateTokenMap: (brandColor: CSSColor, mode: ThemeColorModes, themeRamp?: CSSColor[]) => { [mode in Mode]?: TokenMap; };
9
+ export {};
@@ -0,0 +1 @@
1
+ export declare function getContrastRatio(foreground: string, background: string): number;
@@ -0,0 +1,4 @@
1
+ /**
2
+ * Returns the alpha component of a color in ARGB format.
3
+ */
4
+ export declare function alphaFromArgb(argb: number): number;
@@ -0,0 +1,4 @@
1
+ /**
2
+ * Converts a color from linear RGB components to ARGB format.
3
+ */
4
+ export declare function argbFromLinrgb(linrgb: number[]): number;
@@ -0,0 +1,8 @@
1
+ /**
2
+ * Converts an L* value to an ARGB representation.
3
+ *
4
+ * @param lstar L* in L*a*b*
5
+ * @return ARGB representation of grayscale color with lightness
6
+ * matching L*
7
+ */
8
+ export declare function argbFromLstar(lstar: number): number;