@atlaskit/tokens 13.0.3 → 13.1.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 (316) hide show
  1. package/CHANGELOG.md +15 -0
  2. package/codemods/css-to-design-tokens/lib/meta.tsx +1 -1
  3. package/codemods/css-to-design-tokens/lib/tokens.tsx +1 -1
  4. package/codemods/theme-to-design-tokens/transform.tsx +16 -14
  5. package/codemods/theme-to-design-tokens/utils/ast-meta.tsx +2 -151
  6. package/codemods/theme-to-design-tokens/utils/ast.tsx +3 -35
  7. package/codemods/theme-to-design-tokens/utils/clean-meta.tsx +63 -0
  8. package/codemods/theme-to-design-tokens/utils/color.tsx +3 -11
  9. package/codemods/theme-to-design-tokens/utils/contains-replaceable-css-declarations.tsx +13 -0
  10. package/codemods/theme-to-design-tokens/utils/css-utils.tsx +2 -35
  11. package/codemods/theme-to-design-tokens/utils/find-end-index-of-css-expression.tsx +21 -0
  12. package/codemods/theme-to-design-tokens/utils/find-first-nonspace-index-after.tsx +9 -0
  13. package/codemods/theme-to-design-tokens/utils/get-closest-decendant-of-type.tsx +10 -0
  14. package/codemods/theme-to-design-tokens/utils/get-meta-from-ancestors.tsx +87 -0
  15. package/codemods/theme-to-design-tokens/utils/is-bold-color.tsx +4 -0
  16. package/codemods/theme-to-design-tokens/utils/is-decendant-of-token.tsx +14 -0
  17. package/codemods/theme-to-design-tokens/utils/is-legacy-color.tsx +4 -0
  18. package/codemods/theme-to-design-tokens/utils/is-legacy-named-color.tsx +4 -0
  19. package/codemods/theme-to-design-tokens/utils/is-parent-of-token.tsx +13 -0
  20. package/codemods/theme-to-design-tokens/utils/kebabize.tsx +2 -0
  21. package/codemods/theme-to-design-tokens/utils/legacy-color-meta-map.tsx +88 -0
  22. package/codemods/theme-to-design-tokens/utils/legacy-color-mixins.tsx +26 -0
  23. package/codemods/theme-to-design-tokens/utils/legacy-colors.tsx +2 -115
  24. package/codemods/theme-to-design-tokens/utils/split-at-index.tsx +3 -0
  25. package/codemods/theme-to-design-tokens/utils/string-utils.tsx +3 -16
  26. package/codemods/utils/active-tokens.tsx +284 -0
  27. package/codemods/utils/tokens.tsx +2 -376
  28. package/codemods/utils/unique-words-from-tokens.tsx +91 -0
  29. package/dist/cjs/artifacts/replacement-mapping.js +5 -2
  30. package/dist/cjs/artifacts/themes/atlassian-dark-increased-contrast.js +2 -2
  31. package/dist/cjs/artifacts/themes/atlassian-dark.js +2 -2
  32. package/dist/cjs/artifacts/themes/atlassian-light-increased-contrast.js +2 -2
  33. package/dist/cjs/artifacts/themes/atlassian-light.js +2 -2
  34. package/dist/cjs/artifacts/token-default-values.js +2 -2
  35. package/dist/cjs/artifacts/tokens-raw/atlassian-dark-increased-contrast.js +3 -3
  36. package/dist/cjs/artifacts/tokens-raw/atlassian-dark.js +3 -3
  37. package/dist/cjs/artifacts/tokens-raw/atlassian-light-increased-contrast.js +3 -3
  38. package/dist/cjs/artifacts/tokens-raw/atlassian-light.js +3 -3
  39. package/dist/cjs/artifacts/tokens-raw/atlassian-motion.js +3 -3
  40. package/dist/cjs/constants.js +1 -0
  41. package/dist/cjs/custom-theme.js +10 -60
  42. package/dist/cjs/entry-points/token-metadata.codegen.js +2 -11
  43. package/dist/cjs/get-custom-theme-styles.js +57 -0
  44. package/dist/cjs/get-global-theme.js +2 -2
  45. package/dist/cjs/get-theme-html-attrs.js +2 -2
  46. package/dist/cjs/get-theme-styles.js +33 -32
  47. package/dist/cjs/load-custom-theme-styles.js +2 -2
  48. package/dist/cjs/set-global-theme.js +36 -34
  49. package/dist/cjs/theme-color-modes.js +13 -0
  50. package/dist/cjs/theme-config.js +21 -16
  51. package/dist/cjs/theme-ids.js +13 -0
  52. package/dist/cjs/theme-state-transformer.js +3 -2
  53. package/dist/cjs/utils/color-detection.js +9 -12
  54. package/dist/cjs/utils/color-utils.js +45 -46
  55. package/dist/cjs/utils/custom-theme-loading-utils.js +9 -11
  56. package/dist/cjs/utils/custom-theme-token-contrast-check.js +2 -0
  57. package/dist/cjs/utils/generate-custom-color-ramp.js +20 -19
  58. package/dist/cjs/utils/get-alpha.js +13 -0
  59. package/dist/cjs/utils/get-closest-color-index.js +20 -0
  60. package/dist/cjs/utils/get-css-custom-property.js +32 -0
  61. package/dist/cjs/utils/get-fully-qualified-token-id.js +19 -0
  62. package/dist/cjs/utils/get-theme-override-preferences.js +12 -0
  63. package/dist/cjs/utils/get-theme-preferences.js +8 -5
  64. package/dist/cjs/utils/get-token-id.js +26 -0
  65. package/dist/cjs/utils/hct-color-utils/argb-from-rgb.js +12 -0
  66. package/dist/cjs/utils/hct-color-utils/clamp-double.js +20 -0
  67. package/dist/cjs/utils/hct-color-utils/clamp-int.js +20 -0
  68. package/dist/cjs/utils/hct-color-utils/color-utils.js +42 -59
  69. package/dist/cjs/utils/hct-color-utils/delinearized.js +27 -0
  70. package/dist/cjs/utils/hct-color-utils/hct.js +19 -95
  71. package/dist/cjs/utils/hct-color-utils/lerp.js +14 -0
  72. package/dist/cjs/utils/hct-color-utils/linearized.js +22 -0
  73. package/dist/cjs/utils/hct-color-utils/math-utils.js +38 -107
  74. package/dist/cjs/utils/hct-color-utils/matrix-multiply.js +15 -0
  75. package/dist/cjs/utils/hct-color-utils/sanitize-degrees-double.js +19 -0
  76. package/dist/cjs/utils/hct-color-utils/signum.js +20 -0
  77. package/dist/cjs/utils/hct-color-utils/viewing-conditions.js +98 -0
  78. package/dist/cjs/utils/hex-to-rgba-values.js +15 -0
  79. package/dist/cjs/utils/hsl-to-rgb.js +18 -0
  80. package/dist/cjs/utils/is-valid-brand-hex.js +9 -0
  81. package/dist/cjs/utils/limit-size-of-custom-style-elements.js +16 -0
  82. package/dist/cjs/utils/load-theme-css.js +32 -0
  83. package/dist/cjs/utils/relative-luminance-w3-c.js +18 -0
  84. package/dist/cjs/utils/rgb-to-hex.js +9 -0
  85. package/dist/cjs/utils/theme-loading.js +18 -33
  86. package/dist/cjs/utils/token-ids.js +21 -62
  87. package/dist/es2019/artifacts/replacement-mapping.js +5 -2
  88. package/dist/es2019/artifacts/themes/atlassian-dark-increased-contrast.js +2 -2
  89. package/dist/es2019/artifacts/themes/atlassian-dark.js +2 -2
  90. package/dist/es2019/artifacts/themes/atlassian-light-increased-contrast.js +2 -2
  91. package/dist/es2019/artifacts/themes/atlassian-light.js +2 -2
  92. package/dist/es2019/artifacts/token-default-values.js +2 -2
  93. package/dist/es2019/artifacts/tokens-raw/atlassian-dark-increased-contrast.js +3 -3
  94. package/dist/es2019/artifacts/tokens-raw/atlassian-dark.js +3 -3
  95. package/dist/es2019/artifacts/tokens-raw/atlassian-light-increased-contrast.js +3 -3
  96. package/dist/es2019/artifacts/tokens-raw/atlassian-light.js +3 -3
  97. package/dist/es2019/artifacts/tokens-raw/atlassian-motion.js +3 -3
  98. package/dist/es2019/constants.js +1 -0
  99. package/dist/es2019/custom-theme.js +4 -66
  100. package/dist/es2019/entry-points/token-metadata.codegen.js +2 -11
  101. package/dist/es2019/get-custom-theme-styles.js +60 -0
  102. package/dist/es2019/get-global-theme.js +1 -1
  103. package/dist/es2019/get-theme-html-attrs.js +1 -1
  104. package/dist/es2019/get-theme-styles.js +4 -3
  105. package/dist/es2019/load-custom-theme-styles.js +1 -1
  106. package/dist/es2019/set-global-theme.js +3 -2
  107. package/dist/es2019/theme-color-modes.js +7 -0
  108. package/dist/es2019/theme-config.js +6 -16
  109. package/dist/es2019/theme-ids.js +7 -0
  110. package/dist/es2019/theme-state-transformer.js +2 -1
  111. package/dist/es2019/utils/color-detection.js +3 -11
  112. package/dist/es2019/utils/color-utils.js +15 -33
  113. package/dist/es2019/utils/custom-theme-loading-utils.js +4 -8
  114. package/dist/es2019/utils/custom-theme-token-contrast-check.js +2 -0
  115. package/dist/es2019/utils/generate-custom-color-ramp.js +11 -15
  116. package/dist/es2019/utils/get-alpha.js +7 -0
  117. package/dist/es2019/utils/get-closest-color-index.js +14 -0
  118. package/dist/es2019/utils/get-css-custom-property.js +23 -0
  119. package/dist/es2019/utils/get-fully-qualified-token-id.js +11 -0
  120. package/dist/es2019/utils/get-theme-override-preferences.js +4 -0
  121. package/dist/es2019/utils/get-theme-preferences.js +1 -4
  122. package/dist/es2019/utils/get-token-id.js +18 -0
  123. package/dist/es2019/utils/hct-color-utils/argb-from-rgb.js +6 -0
  124. package/dist/es2019/utils/hct-color-utils/clamp-double.js +14 -0
  125. package/dist/es2019/utils/hct-color-utils/clamp-int.js +14 -0
  126. package/dist/es2019/utils/hct-color-utils/color-utils.js +15 -45
  127. package/dist/es2019/utils/hct-color-utils/delinearized.js +20 -0
  128. package/dist/es2019/utils/hct-color-utils/hct.js +3 -76
  129. package/dist/es2019/utils/hct-color-utils/lerp.js +8 -0
  130. package/dist/es2019/utils/hct-color-utils/linearized.js +16 -0
  131. package/dist/es2019/utils/hct-color-utils/math-utils.js +6 -105
  132. package/dist/es2019/utils/hct-color-utils/matrix-multiply.js +9 -0
  133. package/dist/es2019/utils/hct-color-utils/sanitize-degrees-double.js +13 -0
  134. package/dist/es2019/utils/hct-color-utils/signum.js +14 -0
  135. package/dist/es2019/utils/hct-color-utils/viewing-conditions.js +78 -0
  136. package/dist/es2019/utils/hex-to-rgba-values.js +9 -0
  137. package/dist/es2019/utils/hsl-to-rgb.js +8 -0
  138. package/dist/es2019/utils/is-valid-brand-hex.js +1 -0
  139. package/dist/es2019/utils/limit-size-of-custom-style-elements.js +8 -0
  140. package/dist/es2019/utils/load-theme-css.js +7 -0
  141. package/dist/es2019/utils/relative-luminance-w3-c.js +12 -0
  142. package/dist/es2019/utils/rgb-to-hex.js +3 -0
  143. package/dist/es2019/utils/theme-loading.js +3 -8
  144. package/dist/es2019/utils/token-ids.js +3 -54
  145. package/dist/esm/artifacts/replacement-mapping.js +5 -2
  146. package/dist/esm/artifacts/themes/atlassian-dark-increased-contrast.js +2 -2
  147. package/dist/esm/artifacts/themes/atlassian-dark.js +2 -2
  148. package/dist/esm/artifacts/themes/atlassian-light-increased-contrast.js +2 -2
  149. package/dist/esm/artifacts/themes/atlassian-light.js +2 -2
  150. package/dist/esm/artifacts/token-default-values.js +2 -2
  151. package/dist/esm/artifacts/tokens-raw/atlassian-dark-increased-contrast.js +3 -3
  152. package/dist/esm/artifacts/tokens-raw/atlassian-dark.js +3 -3
  153. package/dist/esm/artifacts/tokens-raw/atlassian-light-increased-contrast.js +3 -3
  154. package/dist/esm/artifacts/tokens-raw/atlassian-light.js +3 -3
  155. package/dist/esm/artifacts/tokens-raw/atlassian-motion.js +3 -3
  156. package/dist/esm/constants.js +1 -0
  157. package/dist/esm/custom-theme.js +4 -58
  158. package/dist/esm/entry-points/token-metadata.codegen.js +2 -11
  159. package/dist/esm/get-custom-theme-styles.js +52 -0
  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/get-theme-styles.js +30 -29
  163. package/dist/esm/load-custom-theme-styles.js +1 -1
  164. package/dist/esm/set-global-theme.js +34 -32
  165. package/dist/esm/theme-color-modes.js +7 -0
  166. package/dist/esm/theme-config.js +8 -17
  167. package/dist/esm/theme-ids.js +7 -0
  168. package/dist/esm/theme-state-transformer.js +2 -1
  169. package/dist/esm/utils/color-detection.js +3 -11
  170. package/dist/esm/utils/color-utils.js +15 -39
  171. package/dist/esm/utils/custom-theme-loading-utils.js +4 -11
  172. package/dist/esm/utils/custom-theme-token-contrast-check.js +2 -0
  173. package/dist/esm/utils/generate-custom-color-ramp.js +11 -15
  174. package/dist/esm/utils/get-alpha.js +7 -0
  175. package/dist/esm/utils/get-closest-color-index.js +14 -0
  176. package/dist/esm/utils/get-css-custom-property.js +26 -0
  177. package/dist/esm/utils/get-fully-qualified-token-id.js +13 -0
  178. package/dist/esm/utils/get-theme-override-preferences.js +5 -0
  179. package/dist/esm/utils/get-theme-preferences.js +1 -4
  180. package/dist/esm/utils/get-token-id.js +20 -0
  181. package/dist/esm/utils/hct-color-utils/argb-from-rgb.js +6 -0
  182. package/dist/esm/utils/hct-color-utils/clamp-double.js +14 -0
  183. package/dist/esm/utils/hct-color-utils/clamp-int.js +14 -0
  184. package/dist/esm/utils/hct-color-utils/color-utils.js +15 -45
  185. package/dist/esm/utils/hct-color-utils/delinearized.js +20 -0
  186. package/dist/esm/utils/hct-color-utils/hct.js +5 -87
  187. package/dist/esm/utils/hct-color-utils/lerp.js +8 -0
  188. package/dist/esm/utils/hct-color-utils/linearized.js +16 -0
  189. package/dist/esm/utils/hct-color-utils/math-utils.js +6 -105
  190. package/dist/esm/utils/hct-color-utils/matrix-multiply.js +9 -0
  191. package/dist/esm/utils/hct-color-utils/sanitize-degrees-double.js +13 -0
  192. package/dist/esm/utils/hct-color-utils/signum.js +14 -0
  193. package/dist/esm/utils/hct-color-utils/viewing-conditions.js +89 -0
  194. package/dist/esm/utils/hex-to-rgba-values.js +9 -0
  195. package/dist/esm/utils/hsl-to-rgb.js +12 -0
  196. package/dist/esm/utils/is-valid-brand-hex.js +3 -0
  197. package/dist/esm/utils/limit-size-of-custom-style-elements.js +10 -0
  198. package/dist/esm/utils/load-theme-css.js +25 -0
  199. package/dist/esm/utils/relative-luminance-w3-c.js +12 -0
  200. package/dist/esm/utils/rgb-to-hex.js +3 -0
  201. package/dist/esm/utils/theme-loading.js +11 -32
  202. package/dist/esm/utils/token-ids.js +3 -61
  203. package/dist/types/artifacts/replacement-mapping.d.ts +1 -1
  204. package/dist/types/artifacts/themes/atlassian-dark-increased-contrast.d.ts +2 -2
  205. package/dist/types/artifacts/themes/atlassian-dark.d.ts +2 -2
  206. package/dist/types/artifacts/themes/atlassian-light-increased-contrast.d.ts +2 -2
  207. package/dist/types/artifacts/themes/atlassian-light.d.ts +2 -2
  208. package/dist/types/artifacts/token-default-values.d.ts +2 -2
  209. package/dist/types/artifacts/tokens-raw/atlassian-dark-increased-contrast.d.ts +1 -1
  210. package/dist/types/artifacts/tokens-raw/atlassian-dark.d.ts +1 -1
  211. package/dist/types/artifacts/tokens-raw/atlassian-light-increased-contrast.d.ts +1 -1
  212. package/dist/types/artifacts/tokens-raw/atlassian-light.d.ts +1 -1
  213. package/dist/types/artifacts/tokens-raw/atlassian-motion.d.ts +1 -1
  214. package/dist/types/artifacts/types-internal.d.ts +2 -2
  215. package/dist/types/artifacts/types.d.ts +2 -2
  216. package/dist/types/custom-theme.d.ts +1 -20
  217. package/dist/types/entry-points/token-metadata.codegen.d.ts +1 -1
  218. package/dist/types/get-custom-theme-styles.d.ts +16 -0
  219. package/dist/types/get-global-theme.d.ts +1 -1
  220. package/dist/types/theme-color-modes.d.ts +7 -0
  221. package/dist/types/theme-config.d.ts +4 -14
  222. package/dist/types/theme-ids.d.ts +7 -0
  223. package/dist/types/theme-state-transformer.d.ts +1 -1
  224. package/dist/types/utils/color-detection.d.ts +1 -6
  225. package/dist/types/utils/color-utils.d.ts +5 -5
  226. package/dist/types/utils/custom-theme-loading-utils.d.ts +1 -2
  227. package/dist/types/utils/generate-custom-color-ramp.d.ts +1 -2
  228. package/dist/types/utils/get-alpha.d.ts +1 -0
  229. package/dist/types/utils/get-closest-color-index.d.ts +2 -0
  230. package/dist/types/utils/get-css-custom-property.d.ts +15 -0
  231. package/dist/types/utils/get-fully-qualified-token-id.d.ts +11 -0
  232. package/dist/types/utils/get-theme-override-preferences.d.ts +2 -0
  233. package/dist/types/utils/get-theme-preferences.d.ts +1 -1
  234. package/dist/types/utils/get-token-id.d.ts +15 -0
  235. package/dist/types/utils/hct-color-utils/argb-from-rgb.d.ts +4 -0
  236. package/dist/types/utils/hct-color-utils/clamp-double.d.ts +7 -0
  237. package/dist/types/utils/hct-color-utils/clamp-int.d.ts +7 -0
  238. package/dist/types/utils/hct-color-utils/color-utils.d.ts +3 -23
  239. package/dist/types/utils/hct-color-utils/delinearized.d.ts +9 -0
  240. package/dist/types/utils/hct-color-utils/hct.d.ts +3 -48
  241. package/dist/types/utils/hct-color-utils/lerp.d.ts +6 -0
  242. package/dist/types/utils/hct-color-utils/linearized.d.ts +9 -0
  243. package/dist/types/utils/hct-color-utils/math-utils.d.ts +6 -60
  244. package/dist/types/utils/hct-color-utils/matrix-multiply.d.ts +4 -0
  245. package/dist/types/utils/hct-color-utils/sanitize-degrees-double.d.ts +7 -0
  246. package/dist/types/utils/hct-color-utils/signum.d.ts +6 -0
  247. package/dist/types/utils/hct-color-utils/viewing-conditions.d.ts +47 -0
  248. package/dist/types/utils/hex-to-rgba-values.d.ts +6 -0
  249. package/dist/types/utils/hsl-to-rgb.d.ts +1 -0
  250. package/dist/types/utils/is-valid-brand-hex.d.ts +1 -0
  251. package/dist/types/utils/limit-size-of-custom-style-elements.d.ts +1 -0
  252. package/dist/types/utils/load-theme-css.d.ts +2 -0
  253. package/dist/types/utils/relative-luminance-w3-c.d.ts +1 -0
  254. package/dist/types/utils/rgb-to-hex.d.ts +1 -0
  255. package/dist/types/utils/theme-loading.d.ts +1 -1
  256. package/dist/types/utils/token-ids.d.ts +3 -41
  257. package/dist/types-ts4.5/artifacts/replacement-mapping.d.ts +1 -1
  258. package/dist/types-ts4.5/artifacts/themes/atlassian-dark-increased-contrast.d.ts +2 -2
  259. package/dist/types-ts4.5/artifacts/themes/atlassian-dark.d.ts +2 -2
  260. package/dist/types-ts4.5/artifacts/themes/atlassian-light-increased-contrast.d.ts +2 -2
  261. package/dist/types-ts4.5/artifacts/themes/atlassian-light.d.ts +2 -2
  262. package/dist/types-ts4.5/artifacts/token-default-values.d.ts +2 -2
  263. package/dist/types-ts4.5/artifacts/tokens-raw/atlassian-dark-increased-contrast.d.ts +1 -1
  264. package/dist/types-ts4.5/artifacts/tokens-raw/atlassian-dark.d.ts +1 -1
  265. package/dist/types-ts4.5/artifacts/tokens-raw/atlassian-light-increased-contrast.d.ts +1 -1
  266. package/dist/types-ts4.5/artifacts/tokens-raw/atlassian-light.d.ts +1 -1
  267. package/dist/types-ts4.5/artifacts/tokens-raw/atlassian-motion.d.ts +1 -1
  268. package/dist/types-ts4.5/artifacts/types-internal.d.ts +2 -2
  269. package/dist/types-ts4.5/artifacts/types.d.ts +2 -2
  270. package/dist/types-ts4.5/custom-theme.d.ts +1 -20
  271. package/dist/types-ts4.5/entry-points/token-metadata.codegen.d.ts +1 -1
  272. package/dist/types-ts4.5/get-custom-theme-styles.d.ts +16 -0
  273. package/dist/types-ts4.5/get-global-theme.d.ts +1 -1
  274. package/dist/types-ts4.5/theme-color-modes.d.ts +11 -0
  275. package/dist/types-ts4.5/theme-config.d.ts +4 -29
  276. package/dist/types-ts4.5/theme-ids.d.ts +18 -0
  277. package/dist/types-ts4.5/theme-state-transformer.d.ts +1 -1
  278. package/dist/types-ts4.5/utils/color-detection.d.ts +1 -6
  279. package/dist/types-ts4.5/utils/color-utils.d.ts +5 -9
  280. package/dist/types-ts4.5/utils/custom-theme-loading-utils.d.ts +1 -2
  281. package/dist/types-ts4.5/utils/generate-custom-color-ramp.d.ts +1 -2
  282. package/dist/types-ts4.5/utils/get-alpha.d.ts +1 -0
  283. package/dist/types-ts4.5/utils/get-closest-color-index.d.ts +2 -0
  284. package/dist/types-ts4.5/utils/get-css-custom-property.d.ts +15 -0
  285. package/dist/types-ts4.5/utils/get-fully-qualified-token-id.d.ts +11 -0
  286. package/dist/types-ts4.5/utils/get-theme-override-preferences.d.ts +2 -0
  287. package/dist/types-ts4.5/utils/get-theme-preferences.d.ts +1 -1
  288. package/dist/types-ts4.5/utils/get-token-id.d.ts +15 -0
  289. package/dist/types-ts4.5/utils/hct-color-utils/argb-from-rgb.d.ts +4 -0
  290. package/dist/types-ts4.5/utils/hct-color-utils/clamp-double.d.ts +7 -0
  291. package/dist/types-ts4.5/utils/hct-color-utils/clamp-int.d.ts +7 -0
  292. package/dist/types-ts4.5/utils/hct-color-utils/color-utils.d.ts +3 -23
  293. package/dist/types-ts4.5/utils/hct-color-utils/delinearized.d.ts +9 -0
  294. package/dist/types-ts4.5/utils/hct-color-utils/hct.d.ts +3 -48
  295. package/dist/types-ts4.5/utils/hct-color-utils/lerp.d.ts +6 -0
  296. package/dist/types-ts4.5/utils/hct-color-utils/linearized.d.ts +9 -0
  297. package/dist/types-ts4.5/utils/hct-color-utils/math-utils.d.ts +6 -60
  298. package/dist/types-ts4.5/utils/hct-color-utils/matrix-multiply.d.ts +4 -0
  299. package/dist/types-ts4.5/utils/hct-color-utils/sanitize-degrees-double.d.ts +7 -0
  300. package/dist/types-ts4.5/utils/hct-color-utils/signum.d.ts +6 -0
  301. package/dist/types-ts4.5/utils/hct-color-utils/viewing-conditions.d.ts +47 -0
  302. package/dist/types-ts4.5/utils/hex-to-rgba-values.d.ts +6 -0
  303. package/dist/types-ts4.5/utils/hsl-to-rgb.d.ts +5 -0
  304. package/dist/types-ts4.5/utils/is-valid-brand-hex.d.ts +1 -0
  305. package/dist/types-ts4.5/utils/limit-size-of-custom-style-elements.d.ts +1 -0
  306. package/dist/types-ts4.5/utils/load-theme-css.d.ts +2 -0
  307. package/dist/types-ts4.5/utils/relative-luminance-w3-c.d.ts +1 -0
  308. package/dist/types-ts4.5/utils/rgb-to-hex.d.ts +1 -0
  309. package/dist/types-ts4.5/utils/theme-loading.d.ts +1 -1
  310. package/dist/types-ts4.5/utils/token-ids.d.ts +3 -41
  311. package/figma/atlassian-dark-increased-contrast.json +1 -1
  312. package/figma/atlassian-dark.json +1 -1
  313. package/figma/atlassian-light-increased-contrast.json +1 -1
  314. package/figma/atlassian-light.json +1 -1
  315. package/package.json +12 -12
  316. package/tokens.docs.tsx +48 -46
@@ -0,0 +1,7 @@
1
+ /**
2
+ * Sanitizes a degree measure as a floating-point number.
3
+ *
4
+ * @return a degree measure between 0.0 (inclusive) and 360.0
5
+ * (exclusive).
6
+ */
7
+ export declare function sanitizeDegreesDouble(degrees: number): number;
@@ -0,0 +1,6 @@
1
+ /**
2
+ * The signum function.
3
+ *
4
+ * @return 1 if num > 0, -1 if num < 0, and 0 if num = 0
5
+ */
6
+ export declare function signum(num: number): number;
@@ -0,0 +1,47 @@
1
+ export declare class ViewingConditions {
2
+ /**
3
+ * sRGB-like viewing conditions.
4
+ */
5
+ static DEFAULT: ViewingConditions;
6
+ /**
7
+ * Create ViewingConditions from a simple, physically relevant, set of
8
+ * parameters.
9
+ *
10
+ * @param whitePoint White point, measured in the XYZ color space.
11
+ * default = D65, or sunny day afternoon
12
+ * @param adaptingLuminance The luminance of the adapting field. Informally,
13
+ * how bright it is in the room where the color is viewed. Can be
14
+ * calculated from lux by multiplying lux by 0.0586. default = 11.72,
15
+ * or 200 lux.
16
+ * @param backgroundLstar The lightness of the area surrounding the color.
17
+ * measured by L* in L*a*b*. default = 50.0
18
+ * @param surround A general description of the lighting surrounding the
19
+ * color. 0 is pitch dark, like watching a movie in a theater. 1.0 is a
20
+ * dimly light room, like watching TV at home at night. 2.0 means there
21
+ * is no difference between the lighting on the color and around it.
22
+ * default = 2.0
23
+ * @param discountingIlluminant Whether the eye accounts for the tint of the
24
+ * ambient lighting, such as knowing an apple is still red in green light.
25
+ * default = false, the eye does not perform this process on
26
+ * self-luminous objects like displays.
27
+ */
28
+ static make(whitePoint?: number[], adaptingLuminance?: number, backgroundLstar?: number, surround?: number, discountingIlluminant?: boolean): ViewingConditions;
29
+ /**
30
+ * Parameters are intermediate values of the CAM16 conversion process. Their
31
+ * names are shorthand for technical color science terminology, this class
32
+ * would not benefit from documenting them individually. A brief overview
33
+ * is available in the CAM16 specification, and a complete overview requires
34
+ * a color science textbook, such as Fairchild's Color Appearance Models.
35
+ */
36
+ n: number;
37
+ aw: number;
38
+ nbb: number;
39
+ ncb: number;
40
+ c: number;
41
+ nc: number;
42
+ rgbD: number[];
43
+ fl: number;
44
+ fLRoot: number;
45
+ z: number;
46
+ private constructor();
47
+ }
@@ -0,0 +1,6 @@
1
+ export declare const hexToRGBAValues: (hex: string) => {
2
+ r: number;
3
+ g: number;
4
+ b: number;
5
+ a: number;
6
+ };
@@ -0,0 +1,5 @@
1
+ export declare function HSLToRGB(h: number, s: number, l: number): [
2
+ number,
3
+ number,
4
+ number
5
+ ];
@@ -0,0 +1 @@
1
+ export declare const isValidBrandHex: (hex: string) => boolean;
@@ -0,0 +1 @@
1
+ export declare function limitSizeOfCustomStyleElements(sizeThreshold: number): void;
@@ -0,0 +1,2 @@
1
+ import { type ThemeIdsWithOverrides } from '../theme-config';
2
+ export declare const loadThemeCss: (themeId: ThemeIdsWithOverrides) => Promise<string>;
@@ -0,0 +1 @@
1
+ export declare function relativeLuminanceW3C(r: number, g: number, b: number): number;
@@ -0,0 +1 @@
1
+ export declare function rgbToHex(r: number, g: number, b: number): string;
@@ -1,5 +1,5 @@
1
1
  import { type ThemeIdsWithOverrides } from '../theme-config';
2
2
  export declare const loadAndAppendThemeCss: (themeId: ThemeIdsWithOverrides) => Promise<void>;
3
- export declare const loadThemeCss: (themeId: ThemeIdsWithOverrides) => Promise<string>;
4
3
  export declare const darkModeMediaQuery = "(prefers-color-scheme: dark)";
5
4
  export declare const moreContrastMediaQuery = "(prefers-contrast: more)";
5
+ export { loadThemeCss } from './load-theme-css';
@@ -1,41 +1,3 @@
1
- /**
2
- * Transforms a style dictionary token path to a CSS custom property.
3
- *
4
- * A css prefix will be prepended and all [default] key words will be omitted
5
- * from the path
6
- *
7
- * @example <caption>Passing a path as an array</caption>
8
- * // Returns ds-background-bold
9
- * getCSSCustomProperty(['color', 'background', 'bold', '[default]'])
10
- *
11
- * @example <caption>Passing a path as a string</caption>
12
- * // Returns ds-background-bold
13
- * getCSSCustomProperty('color.background.bold.[default]')
14
- */
15
- export declare const getCSSCustomProperty: (path: string | string[]) => string;
16
- /**
17
- * Transforms a style dictionary token path to a shorthand token id
18
- * These ids will be typically be how tokens are interacted with via typescript and css
19
- *
20
- * All [default] key words will be omitted from the path
21
- *
22
- * @example <caption>Passing a path as an array</caption>
23
- * // Returns color.background.bold
24
- * getTokenId(['color', 'background', 'bold', '[default]'])
25
- *
26
- * @example <caption>Passing a path as a string</caption>
27
- * // Returns color.background.bold
28
- * getTokenId('color.background.bold.[default]')
29
- */
30
- export declare const getTokenId: (path: string | string[]) => string;
31
- /**
32
- * Transforms a style dictionary token path to a fully qualified token id
33
- * These Ids are intended to be used internal to this package by style-dictionary
34
- *
35
- * [default] key words will NOT be omitted from the path
36
- *
37
- * @example <caption>Passing a path as a string</caption>
38
- * // Returns color.background.bold.[default]
39
- * getFullyQualifiedTokenId(['color', 'background', 'bold', '[default]'])
40
- */
41
- export declare const getFullyQualifiedTokenId: (path: string[]) => string;
1
+ export { getCSSCustomProperty } from './get-css-custom-property';
2
+ export { getTokenId } from './get-token-id';
3
+ export { getFullyQualifiedTokenId } from './get-fully-qualified-token-id';
@@ -1874,7 +1874,7 @@
1874
1874
  }
1875
1875
  },
1876
1876
  "Dark increased-contrast/color.background.disabled": {
1877
- "value": "#BDBDBD0A",
1877
+ "value": "#E3E4F21F",
1878
1878
  "attributes": {
1879
1879
  "group": "paint",
1880
1880
  "state": "active",
@@ -1880,7 +1880,7 @@
1880
1880
  "introduced": "0.0.15",
1881
1881
  "description": "Use for backgrounds of elements in a disabled state."
1882
1882
  },
1883
- "value": "#BDBDBD0A"
1883
+ "value": "#E3E4F21F"
1884
1884
  },
1885
1885
  "Dark/color.background.input": {
1886
1886
  "attributes": {
@@ -1874,7 +1874,7 @@
1874
1874
  }
1875
1875
  },
1876
1876
  "Light increased-contrast/color.background.disabled": {
1877
- "value": "#17171708",
1877
+ "value": "#0515240F",
1878
1878
  "attributes": {
1879
1879
  "group": "paint",
1880
1880
  "state": "active",
@@ -1880,7 +1880,7 @@
1880
1880
  "introduced": "0.0.15",
1881
1881
  "description": "Use for backgrounds of elements in a disabled state."
1882
1882
  },
1883
- "value": "#17171708"
1883
+ "value": "#0515240F"
1884
1884
  },
1885
1885
  "Light/color.background.input": {
1886
1886
  "attributes": {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/tokens",
3
- "version": "13.0.3",
3
+ "version": "13.1.0",
4
4
  "description": "Design tokens are the single source of truth to name and store design decisions.",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -50,33 +50,33 @@
50
50
  "devDependencies": {
51
51
  "@af/formatting": "workspace:^",
52
52
  "@af/visual-regression": "workspace:^",
53
- "@atlaskit/avatar": "^25.14.0",
53
+ "@atlaskit/avatar": "^25.15.0",
54
54
  "@atlaskit/button": "^23.11.0",
55
55
  "@atlaskit/calendar": "^17.2.0",
56
56
  "@atlaskit/checkbox": "^17.3.0",
57
57
  "@atlaskit/code": "^17.5.0",
58
58
  "@atlaskit/css": "^0.19.0",
59
59
  "@atlaskit/docs": "^11.8.0",
60
- "@atlaskit/dropdown-menu": "^16.8.0",
60
+ "@atlaskit/dropdown-menu": "^16.9.0",
61
61
  "@atlaskit/dynamic-table": "^18.4.0",
62
62
  "@atlaskit/form": "^15.5.0",
63
63
  "@atlaskit/heading": "^5.4.0",
64
- "@atlaskit/icon": "^34.3.0",
64
+ "@atlaskit/icon": "^35.3.0",
65
65
  "@atlaskit/inline-message": "^15.6.0",
66
66
  "@atlaskit/link": "^3.4.0",
67
67
  "@atlaskit/lozenge": "^13.8.0",
68
- "@atlaskit/popup": "^4.17.0",
68
+ "@atlaskit/popup": "^4.22.0",
69
69
  "@atlaskit/primitives": "^19.0.0",
70
70
  "@atlaskit/radio": "^8.6.0",
71
- "@atlaskit/section-message": "^8.12.0",
72
- "@atlaskit/select": "^21.10.0",
73
- "@atlaskit/tag": "^14.13.0",
71
+ "@atlaskit/section-message": "^8.13.0",
72
+ "@atlaskit/select": "^21.12.0",
73
+ "@atlaskit/tag": "^14.14.0",
74
74
  "@atlaskit/textarea": "^8.3.0",
75
75
  "@atlaskit/textfield": "^8.3.0",
76
- "@atlaskit/theme": "^23.2.0",
77
- "@atlaskit/tooltip": "^21.2.0",
76
+ "@atlaskit/theme": "^25.0.0",
77
+ "@atlaskit/tooltip": "^22.4.0",
78
78
  "@atlassian/codegen": "^0.2.0",
79
- "@atlassian/feature-flags-test-utils": "^1.0.0",
79
+ "@atlassian/feature-flags-test-utils": "^1.1.0",
80
80
  "@atlassian/react-compiler-gating": "workspace:^",
81
81
  "@atlassian/structured-docs-types": "workspace:^",
82
82
  "@atlassian/ts-loader": "^0.1.0",
@@ -92,7 +92,7 @@
92
92
  "lodash": "^4.17.21",
93
93
  "postcss": "^8.4.7",
94
94
  "postcss-less": "^6.0.0",
95
- "react": "^18.2.0",
95
+ "react": "^19.0.0",
96
96
  "react-window": "^1.8.8",
97
97
  "style-dictionary": "^3.8.0"
98
98
  },
package/tokens.docs.tsx CHANGED
@@ -1,53 +1,55 @@
1
1
  import path from 'path';
2
2
 
3
- import type { ComponentStructuredContentSource } from '@atlassian/structured-docs-types';
3
+ import type { StructuredContentSource } from '@atlassian/structured-docs-types/types';
4
4
 
5
- const documentation: ComponentStructuredContentSource[] = [
6
- {
7
- name: 'token',
8
- description:
9
- 'Design tokens provide consistent, semantic values for colors, spacing, typography, motion, and other design properties across the Atlassian Design System. Use tokens instead of hardcoded values to ensure consistency and proper theming.',
10
- status: 'general-availability',
11
- import: {
5
+ const documentation: StructuredContentSource = {
6
+ components: [
7
+ {
12
8
  name: 'token',
13
- package: '@atlaskit/tokens',
14
- type: 'named',
15
- packagePath: path.resolve(__dirname),
16
- packageJson: require('./package.json'),
17
- },
18
- usageGuidelines: [
19
- 'AVOID hardcoding any CSS values where a token exists for that type; in many cases you may be forced to use a token',
20
- 'Use the `token()` function with CSS-in-JS',
21
- 'Use semantic token names for better maintainability',
22
- ],
23
- accessibilityGuidelines: [
24
- 'Use color tokens to ensure proper contrast ratios',
25
- 'Test color combinations for accessibility compliance',
26
- 'Use semantic color names (success, warning, danger) for better meaning',
27
- ],
28
- examples: [
29
- {
30
- name: 'Basic',
31
- description: 'Basic example',
32
- source: path.resolve(__dirname, './examples/ai/basic.tsx'),
9
+ description:
10
+ 'Design tokens provide consistent, semantic values for colors, spacing, typography, motion, and other design properties across the Atlassian Design System. Use tokens instead of hardcoded values to ensure consistency and proper theming.',
11
+ status: 'general-availability',
12
+ import: {
13
+ name: 'token',
14
+ package: '@atlaskit/tokens',
15
+ type: 'named',
16
+ packagePath: path.resolve(__dirname),
17
+ packageJson: require('./package.json'),
33
18
  },
34
- ],
35
- keywords: [
36
- 'token',
37
- 'design',
38
- 'system',
39
- 'color',
40
- 'motion',
41
- 'spacing',
42
- 'typography',
43
- 'radius',
44
- 'theme',
45
- 'css',
46
- 'style',
47
- 'variable',
48
- ],
49
- categories: ['tokens'],
50
- },
51
- ];
19
+ usageGuidelines: [
20
+ 'AVOID hardcoding any CSS values where a token exists for that type; in many cases you may be forced to use a token',
21
+ 'Use the `token()` function with CSS-in-JS',
22
+ 'Use semantic token names for better maintainability',
23
+ ],
24
+ accessibilityGuidelines: [
25
+ 'Use color tokens to ensure proper contrast ratios',
26
+ 'Test color combinations for accessibility compliance',
27
+ 'Use semantic color names (success, warning, danger) for better meaning',
28
+ ],
29
+ examples: [
30
+ {
31
+ name: 'Basic',
32
+ description: 'Basic example',
33
+ source: path.resolve(__dirname, './examples/ai/basic.tsx'),
34
+ },
35
+ ],
36
+ keywords: [
37
+ 'token',
38
+ 'design',
39
+ 'system',
40
+ 'color',
41
+ 'motion',
42
+ 'spacing',
43
+ 'typography',
44
+ 'radius',
45
+ 'theme',
46
+ 'css',
47
+ 'style',
48
+ 'variable',
49
+ ],
50
+ categories: ['tokens'],
51
+ },
52
+ ],
53
+ };
52
54
 
53
55
  export default documentation;