@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
@@ -1,22 +1,9 @@
1
- // valid hex color with 6 digits
2
- export var isValidBrandHex = function isValidBrandHex(hex) {
3
- return /^#[0-9A-F]{6}$/i.test(hex);
4
- };
5
-
1
+ import { getAlpha } from './get-alpha';
2
+ import { relativeLuminanceW3C } from './relative-luminance-w3-c';
6
3
  // valid hex color with 4, 6 or 8 digits
7
4
  var isValidHex = function isValidHex(hex) {
8
5
  return /^#([A-Fa-f0-9]{3,4}){1,2}$/.test(hex);
9
6
  };
10
- export function rgbToHex(r, g, b) {
11
- return '#' + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
12
- }
13
- export function getAlpha(hex) {
14
- if (hex.length === 9) {
15
- var int = parseInt(hex.slice(7, 9), 16) / 255;
16
- return Number(parseFloat(int.toString()).toFixed(2));
17
- }
18
- return 1;
19
- }
20
7
  export function hexToRgbA(hex) {
21
8
  if (!isValidHex(hex)) {
22
9
  throw new Error('Invalid HEX');
@@ -29,6 +16,8 @@ export function hexToRgbA(hex) {
29
16
  c = '0x' + c.join('');
30
17
  return [c >> 16 & 255, c >> 8 & 255, c & 255, getAlpha(hex)];
31
18
  }
19
+
20
+ // eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
32
21
  export function hexToRgb(hex) {
33
22
  if (!isValidHex(hex)) {
34
23
  throw new Error('Invalid HEX');
@@ -41,6 +30,8 @@ export function hexToRgb(hex) {
41
30
  c = '0x' + c.join('');
42
31
  return [c >> 16 & 255, c >> 8 & 255, c & 255];
43
32
  }
33
+
34
+ // eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
44
35
  export function hexToHSL(hex) {
45
36
  if (!isValidHex(hex)) {
46
37
  throw new Error('Invalid HEX');
@@ -86,30 +77,8 @@ export function hexToHSL(hex) {
86
77
  l = +(l * 100).toFixed(1);
87
78
  return [h, s, l];
88
79
  }
89
- export function HSLToRGB(h, s, l) {
90
- s /= 100;
91
- l /= 100;
92
- var k = function k(n) {
93
- return (n + h / 30) % 12;
94
- };
95
- var a = s * Math.min(l, 1 - l);
96
- var f = function f(n) {
97
- return l - a * Math.max(-1, Math.min(k(n) - 3, Math.min(9 - k(n), 1)));
98
- };
99
- return [255 * f(0), 255 * f(8), 255 * f(4)];
100
- }
101
- export function relativeLuminanceW3C(r, g, b) {
102
- var RsRGB = r / 255;
103
- var GsRGB = g / 255;
104
- var BsRGB = b / 255;
105
- var R = RsRGB <= 0.03928 ? RsRGB / 12.92 : Math.pow((RsRGB + 0.055) / 1.055, 2.4);
106
- var G = GsRGB <= 0.03928 ? GsRGB / 12.92 : Math.pow((GsRGB + 0.055) / 1.055, 2.4);
107
- var B = BsRGB <= 0.03928 ? BsRGB / 12.92 : Math.pow((BsRGB + 0.055) / 1.055, 2.4);
108
80
 
109
- // For the sRGB colorspace, the relative luminance of a color is defined as:
110
- var L = 0.2126 * R + 0.7152 * G + 0.0722 * B;
111
- return L;
112
- }
81
+ // eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
113
82
  export function getContrastRatio(foreground, background) {
114
83
  if (!isValidHex(foreground) || !isValidHex(background)) {
115
84
  throw new Error('Invalid HEX');
@@ -123,6 +92,8 @@ export function getContrastRatio(foreground, background) {
123
92
  var darkest = Math.min(foregroundLuminance, backgroundLuminance);
124
93
  return (brightest + 0.05) / (darkest + 0.05);
125
94
  }
95
+
96
+ // eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
126
97
  export function deltaE(rgbA, rgbB) {
127
98
  var labA = rgbToLab(rgbA);
128
99
  var labB = rgbToLab(rgbB);
@@ -159,4 +130,9 @@ function rgbToLab(rgb) {
159
130
  y = y > 0.008856 ? Math.pow(y, 1 / 3) : 7.787 * y + 16 / 116;
160
131
  z = z > 0.008856 ? Math.pow(z, 1 / 3) : 7.787 * z + 16 / 116;
161
132
  return [116 * y - 16, 500 * (x - y), 200 * (y - z)];
162
- }
133
+ }
134
+ export { isValidBrandHex } from './is-valid-brand-hex';
135
+ export { rgbToHex } from './rgb-to-hex';
136
+ export { getAlpha } from './get-alpha';
137
+ export { HSLToRGB } from './hsl-to-rgb';
138
+ export { relativeLuminanceW3C } from './relative-luminance-w3-c';
@@ -1,5 +1,4 @@
1
1
  import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
2
- import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
3
2
  import tokens from '../artifacts/token-names';
4
3
  import { CUSTOM_THEME_ATTRIBUTE, THEME_DATA_ATTRIBUTE } from '../constants';
5
4
  import { hash } from './hash';
@@ -18,15 +17,8 @@ export function findMissingCustomStyleElements(UNSAFE_themeOptions, mode) {
18
17
  });
19
18
  return attrOfMissingCustomStyles;
20
19
  }
21
- export function limitSizeOfCustomStyleElements(sizeThreshold) {
22
- var styleTags = _toConsumableArray(Array.from(document.head.querySelectorAll("style[".concat(CUSTOM_THEME_ATTRIBUTE, "][").concat(THEME_DATA_ATTRIBUTE, "]"))));
23
- if (styleTags.length < sizeThreshold) {
24
- return;
25
- }
26
- styleTags.slice(0, styleTags.length - (sizeThreshold - 1)).forEach(function (element) {
27
- return element.remove();
28
- });
29
- }
20
+
21
+ // eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
30
22
  export function reduceTokenMap(tokenMap, themeRamp) {
31
23
  return Object.entries(tokenMap).reduce(function (acc, _ref) {
32
24
  var _ref2 = _slicedToArray(_ref, 2),
@@ -35,4 +27,5 @@ export function reduceTokenMap(tokenMap, themeRamp) {
35
27
  var cssVar = tokens[key];
36
28
  return cssVar ? "".concat(acc, "\n ").concat(cssVar, ": ").concat(typeof value === 'string' ? value : themeRamp[value], ";") : acc;
37
29
  }, '');
38
- }
30
+ }
31
+ export { limitSizeOfCustomStyleElements } from './limit-size-of-custom-style-elements';
@@ -46,6 +46,8 @@ export var additionalChecks = [{
46
46
  var getColorFromTokenRaw = function getColorFromTokenRaw(tokenName, mode) {
47
47
  return mode === 'light' ? tokenValuesLight[tokenName] : tokenValuesDark[tokenName];
48
48
  };
49
+
50
+ // eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
49
51
  export var additionalContrastChecker = function additionalContrastChecker(_ref) {
50
52
  var customThemeTokenMap = _ref.customThemeTokenMap,
51
53
  mode = _ref.mode,
@@ -4,24 +4,15 @@ import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
4
4
  function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
5
5
  function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
6
6
  import rawTokensDark from '../artifacts/atlassian-dark-token-value-for-contrast-check';
7
- import { deltaE, getContrastRatio, hexToHSL, hexToRgb, hexToRgbA, HSLToRGB, relativeLuminanceW3C, rgbToHex } from './color-utils';
7
+ import { getContrastRatio, hexToHSL, hexToRgbA } from './color-utils';
8
8
  import { additionalContrastChecker } from './custom-theme-token-contrast-check';
9
+ import { getClosestColorIndex } from './get-closest-color-index';
9
10
  import { argbFromRgba, Contrast, Hct, rgbaFromArgb } from './hct-color-utils';
11
+ import { HSLToRGB } from './hsl-to-rgb';
12
+ import { relativeLuminanceW3C } from './relative-luminance-w3-c';
13
+ import { rgbToHex } from './rgb-to-hex';
10
14
  var lowLuminanceContrastRatios = [1.12, 1.33, 2.03, 2.73, 3.33, 4.27, 5.2, 6.62, 12.46, 14.25];
11
15
  var highLuminanceContrastRatios = [1.08, 1.24, 1.55, 1.99, 2.45, 3.34, 4.64, 6.1, 10.19, 12.6];
12
- export var getClosestColorIndex = function getClosestColorIndex(themeRamp, brandColor) {
13
- // Iterate over themeRamp and find whichever color is closest to brandColor
14
- var closestColorIndex = 0;
15
- var closestColorDistance = null;
16
- themeRamp.forEach(function (value, index) {
17
- var distance = deltaE(hexToRgb(value), hexToRgb(brandColor));
18
- if (closestColorDistance === null || distance < closestColorDistance) {
19
- closestColorIndex = index;
20
- closestColorDistance = distance;
21
- }
22
- });
23
- return closestColorIndex;
24
- };
25
16
  export var generateColors = function generateColors(brandColor) {
26
17
  // Determine luminance
27
18
  var HSLBrandColorHue = hexToHSL(brandColor)[0];
@@ -72,6 +63,8 @@ function getInteractionStates(rampPosition, number, colors) {
72
63
  }
73
64
  return result;
74
65
  }
66
+
67
+ // eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
75
68
  export var generateTokenMap = function generateTokenMap(brandColor, mode, themeRamp) {
76
69
  var _generateColors = generateColors(brandColor),
77
70
  ramp = _generateColors.ramp,
@@ -211,6 +204,8 @@ export var generateTokenMap = function generateTokenMap(brandColor, mode, themeR
211
204
  dark: customThemeTokenMapDark
212
205
  };
213
206
  };
207
+
208
+ // eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
214
209
  export var generateTokenMapWithContrastCheck = function generateTokenMapWithContrastCheck(brandColor, mode, themeRamp) {
215
210
  var colors = themeRamp || generateColors(brandColor).ramp;
216
211
  var tokenMaps = generateTokenMap(brandColor, mode, colors);
@@ -228,4 +223,5 @@ export var generateTokenMapWithContrastCheck = function generateTokenMapWithCont
228
223
  }
229
224
  });
230
225
  return result;
231
- };
226
+ };
227
+ export { getClosestColorIndex } from './get-closest-color-index';
@@ -0,0 +1,7 @@
1
+ export function getAlpha(hex) {
2
+ if (hex.length === 9) {
3
+ var int = parseInt(hex.slice(7, 9), 16) / 255;
4
+ return Number(parseFloat(int.toString()).toFixed(2));
5
+ }
6
+ return 1;
7
+ }
@@ -0,0 +1,14 @@
1
+ import { deltaE, hexToRgb } from './color-utils';
2
+ export var getClosestColorIndex = function getClosestColorIndex(themeRamp, brandColor) {
3
+ // Iterate over themeRamp and find whichever color is closest to brandColor
4
+ var closestColorIndex = 0;
5
+ var closestColorDistance = null;
6
+ themeRamp.forEach(function (value, index) {
7
+ var distance = deltaE(hexToRgb(value), hexToRgb(brandColor));
8
+ if (closestColorDistance === null || distance < closestColorDistance) {
9
+ closestColorIndex = index;
10
+ closestColorDistance = distance;
11
+ }
12
+ });
13
+ return closestColorIndex;
14
+ };
@@ -0,0 +1,26 @@
1
+ import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
2
+ import { CSS_PREFIX, CSS_VAR_FULL } from '../constants';
3
+
4
+ /**
5
+ * Transforms a style dictionary token path to a CSS custom property.
6
+ *
7
+ * A css prefix will be prepended and all [default] key words will be omitted
8
+ * from the path
9
+ *
10
+ * @example <caption>Passing a path as an array</caption>
11
+ * // Returns ds-background-bold
12
+ * getCSSCustomProperty(['color', 'background', 'bold', '[default]'])
13
+ *
14
+ * @example <caption>Passing a path as a string</caption>
15
+ * // Returns ds-background-bold
16
+ * getCSSCustomProperty('color.background.bold.[default]')
17
+ */
18
+ export var getCSSCustomProperty = function getCSSCustomProperty(path) {
19
+ var normalizedPath = typeof path === 'string' ? path.split('.') : path;
20
+
21
+ // Opacity and other 'shallow' groups are more readable when not trimmed
22
+ var slice = CSS_VAR_FULL.includes(normalizedPath[0]) ? 0 : 1;
23
+ return "--".concat([CSS_PREFIX].concat(_toConsumableArray(normalizedPath.slice(slice))).filter(function (el) {
24
+ return el !== '[default]';
25
+ }).join('-'));
26
+ };
@@ -0,0 +1,13 @@
1
+ /**
2
+ * Transforms a style dictionary token path to a fully qualified token id
3
+ * These Ids are intended to be used internal to this package by style-dictionary
4
+ *
5
+ * [default] key words will NOT be omitted from the path
6
+ *
7
+ * @example <caption>Passing a path as a string</caption>
8
+ * // Returns color.background.bold.[default]
9
+ * getFullyQualifiedTokenId(['color', 'background', 'bold', '[default]'])
10
+ */
11
+ export var getFullyQualifiedTokenId = function getFullyQualifiedTokenId(path) {
12
+ return path.join('.');
13
+ };
@@ -0,0 +1,5 @@
1
+ import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
2
+ export var getThemeOverridePreferences = function getThemeOverridePreferences(_themeState) {
3
+ var themeOverridePreferences = [];
4
+ return _toConsumableArray(new Set(themeOverridePreferences));
5
+ };
@@ -38,7 +38,4 @@ export var getThemePreferences = function getThemePreferences(themeState) {
38
38
  });
39
39
  return _toConsumableArray(new Set(themePreferences));
40
40
  };
41
- export var getThemeOverridePreferences = function getThemeOverridePreferences(_themeState) {
42
- var themeOverridePreferences = [];
43
- return _toConsumableArray(new Set(themeOverridePreferences));
44
- };
41
+ export { getThemeOverridePreferences } from './get-theme-override-preferences';
@@ -0,0 +1,20 @@
1
+ /**
2
+ * Transforms a style dictionary token path to a shorthand token id
3
+ * These ids will be typically be how tokens are interacted with via typescript and css
4
+ *
5
+ * All [default] key words will be omitted from the path
6
+ *
7
+ * @example <caption>Passing a path as an array</caption>
8
+ * // Returns color.background.bold
9
+ * getTokenId(['color', 'background', 'bold', '[default]'])
10
+ *
11
+ * @example <caption>Passing a path as a string</caption>
12
+ * // Returns color.background.bold
13
+ * getTokenId('color.background.bold.[default]')
14
+ */
15
+ export var getTokenId = function getTokenId(path) {
16
+ var normalizedPath = typeof path === 'string' ? path.split('.') : path;
17
+ return normalizedPath.filter(function (el) {
18
+ return el !== '[default]';
19
+ }).join('.');
20
+ };
@@ -0,0 +1,6 @@
1
+ /**
2
+ * Converts a color from RGB components to ARGB format.
3
+ */
4
+ export function argbFromRgb(red, green, blue) {
5
+ return (255 << 24 | (red & 255) << 16 | (green & 255) << 8 | blue & 255) >>> 0;
6
+ }
@@ -0,0 +1,14 @@
1
+ /**
2
+ * Clamps an integer between two floating-point numbers.
3
+ *
4
+ * @return input when min <= input <= max, and either min or max
5
+ * otherwise.
6
+ */
7
+ export function clampDouble(min, max, input) {
8
+ if (input < min) {
9
+ return min;
10
+ } else if (input > max) {
11
+ return max;
12
+ }
13
+ return input;
14
+ }
@@ -0,0 +1,14 @@
1
+ /**
2
+ * Clamps an integer between two integers.
3
+ *
4
+ * @return input when min <= input <= max, and either min or max
5
+ * otherwise.
6
+ */
7
+ export function clampInt(min, max, input) {
8
+ if (input < min) {
9
+ return min;
10
+ } else if (input > max) {
11
+ return max;
12
+ }
13
+ return input;
14
+ }
@@ -22,8 +22,10 @@
22
22
 
23
23
  // This file is automatically generated. Do not modify it.
24
24
 
25
+ import { argbFromRgb } from './argb-from-rgb';
26
+ import { delinearized } from './delinearized';
27
+ import { linearized } from './linearized';
25
28
  import * as mathUtils from './math-utils';
26
-
27
29
  /**
28
30
  * Color science utilities.
29
31
  *
@@ -35,13 +37,6 @@ var SRGB_TO_XYZ = [[0.41233895, 0.35762064, 0.18051042], [0.2126, 0.7152, 0.0722
35
37
  var XYZ_TO_SRGB = [[3.2413774792388685, -1.5376652402851851, -0.49885366846268053], [-0.9691452513005321, 1.8758853451067872, 0.04156585616912061], [0.05562093689691305, -0.20395524564742123, 1.0571799111220335]];
36
38
  var WHITE_POINT_D65 = [95.047, 100.0, 108.883];
37
39
 
38
- /**
39
- * Converts a color from RGB components to ARGB format.
40
- */
41
- export function argbFromRgb(red, green, blue) {
42
- return (255 << 24 | (red & 255) << 16 | (green & 255) << 8 | blue & 255) >>> 0;
43
- }
44
-
45
40
  /**
46
41
  * Converts a color from linear RGB components to ARGB format.
47
42
  */
@@ -83,6 +78,7 @@ function blueFromArgb(argb) {
83
78
  /**
84
79
  * Converts a color from ARGB to XYZ.
85
80
  */
81
+ // eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
86
82
  export function argbFromXyz(x, y, z) {
87
83
  var matrix = XYZ_TO_SRGB;
88
84
  var linearR = matrix[0][0] * x + matrix[0][1] * y + matrix[0][2] * z;
@@ -111,6 +107,7 @@ function xyzFromArgb(argb) {
111
107
  * @return ARGB representation of grayscale color with lightness
112
108
  * matching L*
113
109
  */
110
+ // eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
114
111
  export function argbFromLstar(lstar) {
115
112
  var y = yFromLstar(lstar);
116
113
  var component = delinearized(y);
@@ -123,6 +120,7 @@ export function argbFromLstar(lstar) {
123
120
  * @param argb ARGB representation of a color
124
121
  * @return L*, from L*a*b*, coordinate of the color
125
122
  */
123
+ // eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
126
124
  export function lstarFromArgb(argb) {
127
125
  var y = xyzFromArgb(argb)[1];
128
126
  return 116.0 * labF(y / 100.0) - 16.0;
@@ -139,6 +137,7 @@ export function lstarFromArgb(argb) {
139
137
  * @param lstar L* in L*a*b*
140
138
  * @return Y in XYZ
141
139
  */
140
+ // eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
142
141
  export function yFromLstar(lstar) {
143
142
  return 100.0 * labInvf((lstar + 16.0) / 116.0);
144
143
  }
@@ -154,51 +153,17 @@ export function yFromLstar(lstar) {
154
153
  * @param y Y in XYZ
155
154
  * @return L* in L*a*b*
156
155
  */
156
+ // eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
157
157
  export function lstarFromY(y) {
158
158
  return labF(y / 100.0) * 116.0 - 16.0;
159
159
  }
160
160
 
161
- /**
162
- * Linearizes an RGB component.
163
- *
164
- * @param rgbComponent 0 <= rgb_component <= 255, represents R/G/B
165
- * channel
166
- * @return 0.0 <= output <= 100.0, color channel converted to
167
- * linear RGB space
168
- */
169
- export function linearized(rgbComponent) {
170
- var normalized = rgbComponent / 255.0;
171
- if (normalized <= 0.040449936) {
172
- return normalized / 12.92 * 100.0;
173
- } else {
174
- return Math.pow((normalized + 0.055) / 1.055, 2.4) * 100.0;
175
- }
176
- }
177
-
178
- /**
179
- * Delinearizes an RGB component.
180
- *
181
- * @param rgbComponent 0.0 <= rgb_component <= 100.0, represents
182
- * linear R/G/B channel
183
- * @return 0 <= output <= 255, color channel converted to regular
184
- * RGB space
185
- */
186
- export function delinearized(rgbComponent) {
187
- var normalized = rgbComponent / 100.0;
188
- var delinearized = 0.0;
189
- if (normalized <= 0.0031308) {
190
- delinearized = normalized * 12.92;
191
- } else {
192
- delinearized = 1.055 * Math.pow(normalized, 1.0 / 2.4) - 0.055;
193
- }
194
- return mathUtils.clampInt(0, 255, Math.round(delinearized * 255.0));
195
- }
196
-
197
161
  /**
198
162
  * Returns the standard white point; white on a sunny day.
199
163
  *
200
164
  * @return The white point
201
165
  */
166
+ // eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
202
167
  export function whitePointD65() {
203
168
  return WHITE_POINT_D65;
204
169
  }
@@ -218,6 +183,7 @@ export function whitePointD65() {
218
183
  * @param argb ARGB representation of a int32 color.
219
184
  * @return RGBA representation of a int32 color.
220
185
  */
186
+ // eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
221
187
  export function rgbaFromArgb(argb) {
222
188
  var r = redFromArgb(argb);
223
189
  var g = greenFromArgb(argb);
@@ -237,6 +203,7 @@ export function rgbaFromArgb(argb) {
237
203
  * @param rgba RGBA representation of a int32 color.
238
204
  * @returns ARGB representation of a int32 color.
239
205
  */
206
+ // eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
240
207
  export function argbFromRgba(_ref) {
241
208
  var r = _ref.r,
242
209
  g = _ref.g,
@@ -275,4 +242,7 @@ function labInvf(ft) {
275
242
  } else {
276
243
  return (116 * ft - 16) / kappa;
277
244
  }
278
- }
245
+ }
246
+ export { argbFromRgb } from './argb-from-rgb';
247
+ export { linearized } from './linearized';
248
+ export { delinearized } from './delinearized';
@@ -0,0 +1,20 @@
1
+ import * as mathUtils from './math-utils';
2
+
3
+ /**
4
+ * Delinearizes an RGB component.
5
+ *
6
+ * @param rgbComponent 0.0 <= rgb_component <= 100.0, represents
7
+ * linear R/G/B channel
8
+ * @return 0 <= output <= 255, color channel converted to regular
9
+ * RGB space
10
+ */
11
+ export function delinearized(rgbComponent) {
12
+ var normalized = rgbComponent / 100.0;
13
+ var delinearized = 0.0;
14
+ if (normalized <= 0.0031308) {
15
+ delinearized = normalized * 12.92;
16
+ } else {
17
+ delinearized = 1.055 * Math.pow(normalized, 1.0 / 2.4) - 0.055;
18
+ }
19
+ return mathUtils.clampInt(0, 255, Math.round(delinearized * 255.0));
20
+ }
@@ -1,7 +1,6 @@
1
1
  import _defineProperty from "@babel/runtime/helpers/defineProperty";
2
2
  import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
3
3
  import _createClass from "@babel/runtime/helpers/createClass";
4
- var _ViewingConditions;
5
4
  /**
6
5
  * Below lines are copied from @material/material-color-utilities.
7
6
  * Do not modify it.
@@ -26,7 +25,7 @@ var _ViewingConditions;
26
25
 
27
26
  import * as utils from './color-utils';
28
27
  import * as math from './math-utils';
29
-
28
+ import { ViewingConditions } from './viewing-conditions';
30
29
  /**
31
30
  * A color system built using CAM16 hue and chroma, and L* from
32
31
  * L*a*b*.
@@ -56,7 +55,6 @@ export var Hct = /*#__PURE__*/function () {
56
55
  this.internalHue = cam.hue;
57
56
  this.internalChroma = cam.chroma;
58
57
  this.internalTone = utils.lstarFromArgb(argb);
59
- this.argb = argb;
60
58
  }
61
59
  return _createClass(Hct, [{
62
60
  key: "toInt",
@@ -220,6 +218,7 @@ var Cam16 = /*#__PURE__*/function () {
220
218
  * @param astar CAM16-UCS a coordinate
221
219
  * @param bstar CAM16-UCS b coordinate
222
220
  */
221
+
223
222
  function Cam16(hue, chroma, j, q, m, s, jstar, astar, bstar) {
224
223
  _classCallCheck(this, Cam16);
225
224
  this.hue = hue;
@@ -724,8 +723,8 @@ var HctSolver = /*#__PURE__*/function () {
724
723
  var rightHue = 0.0;
725
724
  var initialized = false;
726
725
  var uncut = true;
727
- for (var _n = 0; _n < 12; _n++) {
728
- var mid = HctSolver.nthVertex(y, _n);
726
+ for (var n = 0; n < 12; n++) {
727
+ var mid = HctSolver.nthVertex(y, n);
729
728
  if (mid[0] < 0) {
730
729
  continue;
731
730
  }
@@ -943,85 +942,4 @@ _defineProperty(HctSolver, "SCALED_DISCOUNT_FROM_LINRGB", [[0.001200833568784504
943
942
  _defineProperty(HctSolver, "LINRGB_FROM_SCALED_DISCOUNT", [[1373.2198709594231, -1100.4251190754821, -7.278681089101213], [-271.815969077903, 559.6580465940733, -32.46047482791194], [1.9622899599665666, -57.173814538844006, 308.7233197812385]]);
944
943
  _defineProperty(HctSolver, "Y_FROM_LINRGB", [0.2126, 0.7152, 0.0722]);
945
944
  _defineProperty(HctSolver, "CRITICAL_PLANES", [0.015176349177441876, 0.045529047532325624, 0.07588174588720938, 0.10623444424209313, 0.13658714259697685, 0.16693984095186062, 0.19729253930674434, 0.2276452376616281, 0.2579979360165119, 0.28835063437139563, 0.3188300904430532, 0.350925934958123, 0.3848314933096426, 0.42057480301049466, 0.458183274052838, 0.4976837250274023, 0.5391024159806381, 0.5824650784040898, 0.6277969426914107, 0.6751227633498623, 0.7244668422128921, 0.775853049866786, 0.829304845476233, 0.8848452951698498, 0.942497089126609, 1.0022825574869039, 1.0642236851973577, 1.1283421258858297, 1.1946592148522128, 1.2631959812511864, 1.3339731595349034, 1.407011200216447, 1.4823302800086415, 1.5599503113873272, 1.6398909516233677, 1.7221716113234105, 1.8068114625156377, 1.8938294463134073, 1.9832442801866852, 2.075074464868551, 2.1693382909216234, 2.2660538449872063, 2.36523901573795, 2.4669114995532007, 2.5710888059345764, 2.6777882626779785, 2.7870270208169257, 2.898822059350997, 3.0131901897720907, 3.1301480604002863, 3.2497121605402226, 3.3718988244681087, 3.4967242352587946, 3.624204428461639, 3.754355295633311, 3.887192587735158, 4.022731918402185, 4.160988767090289, 4.301978482107941, 4.445716283538092, 4.592217266055746, 4.741496401646282, 4.893568542229298, 5.048448422192488, 5.20615066083972, 5.3666897647573375, 5.5300801301023865, 5.696336044816294, 5.865471690767354, 6.037501145825082, 6.212438385869475, 6.390297286737924, 6.571091626112461, 6.7548350853498045, 6.941541251256611, 7.131223617812143, 7.323895587840543, 7.5195704746346665, 7.7182615035334345, 7.919981813454504, 8.124744458384042, 8.332562408825165, 8.543448553206703, 8.757415699253682, 8.974476575321063, 9.194643831691977, 9.417930041841839, 9.644347703669503, 9.873909240696694, 10.106627003236781, 10.342513269534024, 10.58158024687427, 10.8238400726681, 11.069304815507364, 11.317986476196008, 11.569896988756009, 11.825048221409341, 12.083451977536606, 12.345119996613247, 12.610063955123938, 12.878295467455942, 13.149826086772048, 13.42466730586372, 13.702830557985108, 13.984327217668513, 14.269168601521828, 14.55736596900856, 14.848930523210871, 15.143873411576273, 15.44220572664832, 15.743938506781891, 16.04908273684337, 16.35764934889634, 16.66964922287304, 16.985093187232053, 17.30399201960269, 17.62635644741625, 17.95219714852476, 18.281524751807332, 18.614349837764564, 18.95068293910138, 19.290534541298456, 19.633915083172692, 19.98083495742689, 20.331304511189067, 20.685334046541502, 21.042933821039977, 21.404114048223256, 21.76888489811322, 22.137256497705877, 22.50923893145328, 22.884842241736916, 23.264076429332462, 23.6469514538663, 24.033477234264016, 24.42366364919083, 24.817520537484558, 25.21505769858089, 25.61628489293138, 26.021211842414342, 26.429848230738664, 26.842203703840827, 27.258287870275353, 27.678110301598522, 28.10168053274597, 28.529008062403893, 28.96010235337422, 29.39497283293396, 29.83362889318845, 30.276079891419332, 30.722335150426627, 31.172403958865512, 31.62629557157785, 32.08401920991837, 32.54558406207592, 33.010999283389665, 33.4802739966603, 33.953417292456834, 34.430438229418264, 34.911345834551085, 35.39614910352207, 35.88485700094671, 36.37747846067349, 36.87402238606382, 37.37449765026789, 37.87891309649659, 38.38727753828926, 38.89959975977785, 39.41588851594697, 39.93615253289054, 40.460400508064545, 40.98864111053629, 41.520882981230194, 42.05713473317016, 42.597404951718396, 43.141702194811224, 43.6900349931913, 44.24241185063697, 44.798841244188324, 45.35933162437017, 45.92389141541209, 46.49252901546552, 47.065252796817916, 47.64207110610409, 48.22299226451468, 48.808024568002054, 49.3971762874833, 49.9904556690408, 50.587870934119984, 51.189430279724725, 51.79514187861014, 52.40501387947288, 53.0190544071392, 53.637271562750364, 54.259673423945976, 54.88626804504493, 55.517063457223934, 56.15206766869424, 56.79128866487574, 57.43473440856916, 58.08241284012621, 58.734331877617365, 59.39049941699807, 60.05092333227251, 60.715611475655585, 61.38457167773311, 62.057811747619894, 62.7353394731159, 63.417162620860914, 64.10328893648692, 64.79372614476921, 65.48848194977529, 66.18756403501224, 66.89098006357258, 67.59873767827808, 68.31084450182222, 69.02730813691093, 69.74813616640164, 70.47333615344107, 71.20291564160104, 71.93688215501312, 72.67524319850172, 73.41800625771542, 74.16517879925733, 74.9167682708136, 75.67278210128072, 76.43322770089146, 77.1981124613393, 77.96744375590167, 78.74122893956174, 79.51947534912904, 80.30219030335869, 81.08938110306934, 81.88105503125999, 82.67721935322541, 83.4778813166706, 84.28304815182372, 85.09272707154808, 85.90692527145302, 86.72564993000343, 87.54890820862819, 88.3767072518277, 89.2090541872801, 90.04595612594655, 90.88742016217518, 91.73345337380438, 92.58406282226491, 93.43925555268066, 94.29903859396902, 95.16341895893969, 96.03240364439274, 96.9059996312159, 97.78421388448044, 98.6670533535366, 99.55452497210776]);
946
- export var ViewingConditions = /*#__PURE__*/function () {
947
- /**
948
- * Parameters are intermediate values of the CAM16 conversion process. Their
949
- * names are shorthand for technical color science terminology, this class
950
- * would not benefit from documenting them individually. A brief overview
951
- * is available in the CAM16 specification, and a complete overview requires
952
- * a color science textbook, such as Fairchild's Color Appearance Models.
953
- */
954
- function ViewingConditions(n, aw, nbb, ncb, c, nc, rgbD, fl, fLRoot, z) {
955
- _classCallCheck(this, ViewingConditions);
956
- this.n = n;
957
- this.aw = aw;
958
- this.nbb = nbb;
959
- this.ncb = ncb;
960
- this.c = c;
961
- this.nc = nc;
962
- this.rgbD = rgbD;
963
- this.fl = fl;
964
- this.fLRoot = fLRoot;
965
- this.z = z;
966
- }
967
- return _createClass(ViewingConditions, null, [{
968
- key: "make",
969
- value:
970
- /**
971
- * Create ViewingConditions from a simple, physically relevant, set of
972
- * parameters.
973
- *
974
- * @param whitePoint White point, measured in the XYZ color space.
975
- * default = D65, or sunny day afternoon
976
- * @param adaptingLuminance The luminance of the adapting field. Informally,
977
- * how bright it is in the room where the color is viewed. Can be
978
- * calculated from lux by multiplying lux by 0.0586. default = 11.72,
979
- * or 200 lux.
980
- * @param backgroundLstar The lightness of the area surrounding the color.
981
- * measured by L* in L*a*b*. default = 50.0
982
- * @param surround A general description of the lighting surrounding the
983
- * color. 0 is pitch dark, like watching a movie in a theater. 1.0 is a
984
- * dimly light room, like watching TV at home at night. 2.0 means there
985
- * is no difference between the lighting on the color and around it.
986
- * default = 2.0
987
- * @param discountingIlluminant Whether the eye accounts for the tint of the
988
- * ambient lighting, such as knowing an apple is still red in green light.
989
- * default = false, the eye does not perform this process on
990
- * self-luminous objects like displays.
991
- */
992
- function make() {
993
- var whitePoint = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : utils.whitePointD65();
994
- var adaptingLuminance = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 200.0 / Math.PI * utils.yFromLstar(50.0) / 100.0;
995
- var backgroundLstar = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 50.0;
996
- var surround = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 2.0;
997
- var discountingIlluminant = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : false;
998
- var xyz = whitePoint;
999
- var rW = xyz[0] * 0.401288 + xyz[1] * 0.650173 + xyz[2] * -0.051461;
1000
- var gW = xyz[0] * -0.250268 + xyz[1] * 1.204414 + xyz[2] * 0.045854;
1001
- var bW = xyz[0] * -0.002079 + xyz[1] * 0.048952 + xyz[2] * 0.953127;
1002
- var f = 0.8 + surround / 10.0;
1003
- var c = f >= 0.9 ? math.lerp(0.59, 0.69, (f - 0.9) * 10.0) : math.lerp(0.525, 0.59, (f - 0.8) * 10.0);
1004
- var d = discountingIlluminant ? 1.0 : f * (1.0 - 1.0 / 3.6 * Math.exp((-adaptingLuminance - 42.0) / 92.0));
1005
- d = d > 1.0 ? 1.0 : d < 0.0 ? 0.0 : d;
1006
- var nc = f;
1007
- var rgbD = [d * (100.0 / rW) + 1.0 - d, d * (100.0 / gW) + 1.0 - d, d * (100.0 / bW) + 1.0 - d];
1008
- var k = 1.0 / (5.0 * adaptingLuminance + 1.0);
1009
- var k4 = k * k * k * k;
1010
- var k4F = 1.0 - k4;
1011
- var fl = k4 * adaptingLuminance + 0.1 * k4F * k4F * Math.cbrt(5.0 * adaptingLuminance);
1012
- var n = utils.yFromLstar(backgroundLstar) / whitePoint[1];
1013
- var z = 1.48 + Math.sqrt(n);
1014
- var nbb = 0.725 / Math.pow(n, 0.2);
1015
- var ncb = nbb;
1016
- var rgbAFactors = [Math.pow(fl * rgbD[0] * rW / 100.0, 0.42), Math.pow(fl * rgbD[1] * gW / 100.0, 0.42), Math.pow(fl * rgbD[2] * bW / 100.0, 0.42)];
1017
- var rgbA = [400.0 * rgbAFactors[0] / (rgbAFactors[0] + 27.13), 400.0 * rgbAFactors[1] / (rgbAFactors[1] + 27.13), 400.0 * rgbAFactors[2] / (rgbAFactors[2] + 27.13)];
1018
- var aw = (2.0 * rgbA[0] + rgbA[1] + 0.05 * rgbA[2]) * nbb;
1019
- return new ViewingConditions(n, aw, nbb, ncb, c, nc, rgbD, fl, Math.pow(fl, 0.25), z);
1020
- }
1021
- }]);
1022
- }();
1023
- _ViewingConditions = ViewingConditions;
1024
- /**
1025
- * sRGB-like viewing conditions.
1026
- */
1027
- _defineProperty(ViewingConditions, "DEFAULT", _ViewingConditions.make());
945
+ export { ViewingConditions } from './viewing-conditions';
@@ -0,0 +1,8 @@
1
+ /**
2
+ * The linear interpolation function.
3
+ *
4
+ * @return start if amount = 0 and stop if amount = 1
5
+ */
6
+ export function lerp(start, stop, amount) {
7
+ return (1.0 - amount) * start + amount * stop;
8
+ }
@@ -0,0 +1,16 @@
1
+ /**
2
+ * Linearizes an RGB component.
3
+ *
4
+ * @param rgbComponent 0 <= rgb_component <= 255, represents R/G/B
5
+ * channel
6
+ * @return 0.0 <= output <= 100.0, color channel converted to
7
+ * linear RGB space
8
+ */
9
+ export function linearized(rgbComponent) {
10
+ var normalized = rgbComponent / 255.0;
11
+ if (normalized <= 0.040449936) {
12
+ return normalized / 12.92 * 100.0;
13
+ } else {
14
+ return Math.pow((normalized + 0.055) / 1.055, 2.4) * 100.0;
15
+ }
16
+ }