@atlaskit/tokens 13.1.0 → 13.1.1

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 (277) hide show
  1. package/CHANGELOG.md +8 -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 -335
  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/palettes-raw/palette.js +35 -1
  20. package/dist/cjs/entry-points/theme-state-transformer.js +4 -3
  21. package/dist/cjs/get-custom-theme-styles.js +7 -6
  22. package/dist/cjs/get-global-theme.js +2 -2
  23. package/dist/cjs/get-theme-html-attrs.js +2 -2
  24. package/dist/cjs/index.js +4 -3
  25. package/dist/cjs/is-color-mode.js +9 -0
  26. package/dist/cjs/is-theme-ids.js +12 -0
  27. package/dist/cjs/is-theme-kind.js +12 -0
  28. package/dist/cjs/theme-config.js +8 -44
  29. package/dist/cjs/theme-object-to-string.js +42 -0
  30. package/dist/cjs/theme-options-schema.js +1 -0
  31. package/dist/cjs/theme-state-defaults.js +39 -0
  32. package/dist/cjs/theme-state.js +5 -0
  33. package/dist/cjs/theme-string-to-object.js +51 -0
  34. package/dist/cjs/utils/additional-contrast-checker.js +43 -0
  35. package/dist/cjs/utils/custom-theme-loading-utils.js +0 -22
  36. package/dist/cjs/utils/custom-theme-token-contrast-check.js +2 -40
  37. package/dist/cjs/utils/delta-e.js +26 -0
  38. package/dist/cjs/utils/generate-colors.js +47 -0
  39. package/dist/cjs/utils/generate-token-map-with-contrast-check.js +32 -0
  40. package/dist/cjs/utils/{generate-custom-color-ramp.js → generate-token-map.js} +6 -75
  41. package/dist/cjs/utils/get-closest-color-index.js +3 -2
  42. package/dist/cjs/utils/get-contrast-ratio.js +22 -0
  43. package/dist/cjs/utils/hct-color-utils/alpha-from-argb.js +12 -0
  44. package/dist/cjs/utils/hct-color-utils/argb-from-linrgb.js +17 -0
  45. package/dist/cjs/utils/hct-color-utils/argb-from-lstar.js +21 -0
  46. package/dist/cjs/utils/hct-color-utils/argb-from-rgba.js +24 -0
  47. package/dist/cjs/utils/hct-color-utils/argb-from-xyz.js +29 -0
  48. package/dist/cjs/utils/hct-color-utils/blue-from-argb.js +12 -0
  49. package/dist/cjs/utils/hct-color-utils/clamp-component.js +15 -0
  50. package/dist/cjs/utils/hct-color-utils/contrast.js +10 -11
  51. package/dist/cjs/utils/hct-color-utils/green-from-argb.js +12 -0
  52. package/dist/cjs/utils/hct-color-utils/hct.js +18 -12
  53. package/dist/cjs/utils/hct-color-utils/index.js +4 -3
  54. package/dist/cjs/utils/hct-color-utils/lab-f.js +15 -0
  55. package/dist/cjs/utils/hct-color-utils/lab-invf.js +16 -0
  56. package/dist/cjs/utils/hct-color-utils/lstar-from-argb.js +34 -0
  57. package/dist/cjs/utils/hct-color-utils/lstar-from-y.js +21 -0
  58. package/dist/cjs/utils/hct-color-utils/red-from-argb.js +12 -0
  59. package/dist/cjs/utils/hct-color-utils/rgba-from-argb.js +28 -0
  60. package/dist/cjs/utils/hct-color-utils/rgba.js +1 -0
  61. package/dist/cjs/utils/hct-color-utils/viewing-conditions.js +5 -4
  62. package/dist/cjs/utils/hct-color-utils/white-point-d65.js +14 -0
  63. package/dist/cjs/utils/hct-color-utils/y-from-lstar.js +21 -0
  64. package/dist/cjs/utils/hex-to-hsl.js +52 -0
  65. package/dist/cjs/utils/hex-to-rgb-a.js +20 -0
  66. package/dist/cjs/utils/hex-to-rgb.js +19 -0
  67. package/dist/cjs/utils/is-valid-hex.js +10 -0
  68. package/dist/cjs/utils/reduce-token-map.js +18 -0
  69. package/dist/cjs/utils/rgb-to-lab.js +24 -0
  70. package/dist/es2019/artifacts/palettes-raw/palette.js +35 -1
  71. package/dist/es2019/entry-points/theme-state-transformer.js +2 -1
  72. package/dist/es2019/get-custom-theme-styles.js +3 -2
  73. package/dist/es2019/get-global-theme.js +1 -1
  74. package/dist/es2019/get-theme-html-attrs.js +1 -1
  75. package/dist/es2019/index.js +2 -1
  76. package/dist/es2019/is-color-mode.js +3 -0
  77. package/dist/es2019/is-theme-ids.js +4 -0
  78. package/dist/es2019/is-theme-kind.js +4 -0
  79. package/dist/es2019/theme-config.js +4 -45
  80. package/dist/es2019/theme-object-to-string.js +28 -0
  81. package/dist/es2019/theme-options-schema.js +0 -0
  82. package/dist/es2019/theme-state-defaults.js +34 -0
  83. package/dist/es2019/theme-state.js +1 -0
  84. package/dist/es2019/theme-string-to-object.js +38 -0
  85. package/dist/es2019/utils/additional-contrast-checker.js +39 -0
  86. package/dist/es2019/utils/custom-theme-loading-utils.js +1 -11
  87. package/dist/es2019/utils/custom-theme-token-contrast-check.js +1 -41
  88. package/dist/es2019/utils/delta-e.js +20 -0
  89. package/dist/es2019/utils/generate-colors.js +39 -0
  90. package/dist/es2019/utils/generate-token-map-with-contrast-check.js +21 -0
  91. package/dist/es2019/utils/{generate-custom-color-ramp.js → generate-token-map.js} +3 -63
  92. package/dist/es2019/utils/get-closest-color-index.js +2 -1
  93. package/dist/es2019/utils/get-contrast-ratio.js +16 -0
  94. package/dist/es2019/utils/hct-color-utils/alpha-from-argb.js +6 -0
  95. package/dist/es2019/utils/hct-color-utils/argb-from-linrgb.js +12 -0
  96. package/dist/es2019/utils/hct-color-utils/argb-from-lstar.js +16 -0
  97. package/dist/es2019/utils/hct-color-utils/argb-from-rgba.js +19 -0
  98. package/dist/es2019/utils/hct-color-utils/argb-from-xyz.js +24 -0
  99. package/dist/es2019/utils/hct-color-utils/blue-from-argb.js +6 -0
  100. package/dist/es2019/utils/hct-color-utils/clamp-component.js +9 -0
  101. package/dist/es2019/utils/hct-color-utils/contrast.js +10 -10
  102. package/dist/es2019/utils/hct-color-utils/green-from-argb.js +6 -0
  103. package/dist/es2019/utils/hct-color-utils/hct.js +19 -12
  104. package/dist/es2019/utils/hct-color-utils/index.js +2 -1
  105. package/dist/es2019/utils/hct-color-utils/lab-f.js +9 -0
  106. package/dist/es2019/utils/hct-color-utils/lab-invf.js +10 -0
  107. package/dist/es2019/utils/hct-color-utils/lstar-from-argb.js +28 -0
  108. package/dist/es2019/utils/hct-color-utils/lstar-from-y.js +16 -0
  109. package/dist/es2019/utils/hct-color-utils/red-from-argb.js +6 -0
  110. package/dist/es2019/utils/hct-color-utils/rgba-from-argb.js +22 -0
  111. package/dist/es2019/utils/hct-color-utils/rgba.js +0 -0
  112. package/dist/es2019/utils/hct-color-utils/viewing-conditions.js +4 -3
  113. package/dist/es2019/utils/hct-color-utils/white-point-d65.js +8 -0
  114. package/dist/es2019/utils/hct-color-utils/y-from-lstar.js +16 -0
  115. package/dist/es2019/utils/hex-to-hsl.js +46 -0
  116. package/dist/es2019/utils/hex-to-rgb-a.js +14 -0
  117. package/dist/es2019/utils/hex-to-rgb.js +13 -0
  118. package/dist/es2019/utils/is-valid-hex.js +2 -0
  119. package/dist/es2019/utils/reduce-token-map.js +7 -0
  120. package/dist/es2019/utils/rgb-to-lab.js +18 -0
  121. package/dist/esm/artifacts/palettes-raw/palette.js +35 -1
  122. package/dist/esm/entry-points/theme-state-transformer.js +2 -1
  123. package/dist/esm/get-custom-theme-styles.js +3 -2
  124. package/dist/esm/get-global-theme.js +1 -1
  125. package/dist/esm/get-theme-html-attrs.js +1 -1
  126. package/dist/esm/index.js +2 -1
  127. package/dist/esm/is-color-mode.js +3 -0
  128. package/dist/esm/is-theme-ids.js +6 -0
  129. package/dist/esm/is-theme-kind.js +6 -0
  130. package/dist/esm/theme-config.js +4 -45
  131. package/dist/esm/theme-object-to-string.js +35 -0
  132. package/dist/esm/theme-options-schema.js +0 -0
  133. package/dist/esm/theme-state-defaults.js +34 -0
  134. package/dist/esm/theme-state.js +1 -0
  135. package/dist/esm/theme-string-to-object.js +44 -0
  136. package/dist/esm/utils/additional-contrast-checker.js +36 -0
  137. package/dist/esm/utils/custom-theme-loading-utils.js +1 -15
  138. package/dist/esm/utils/custom-theme-token-contrast-check.js +1 -38
  139. package/dist/esm/utils/delta-e.js +20 -0
  140. package/dist/esm/utils/generate-colors.js +40 -0
  141. package/dist/esm/utils/generate-token-map-with-contrast-check.js +25 -0
  142. package/dist/esm/utils/{generate-custom-color-ramp.js → generate-token-map.js} +3 -67
  143. package/dist/esm/utils/get-closest-color-index.js +2 -1
  144. package/dist/esm/utils/get-contrast-ratio.js +16 -0
  145. package/dist/esm/utils/hct-color-utils/alpha-from-argb.js +6 -0
  146. package/dist/esm/utils/hct-color-utils/argb-from-linrgb.js +12 -0
  147. package/dist/esm/utils/hct-color-utils/argb-from-lstar.js +16 -0
  148. package/dist/esm/utils/hct-color-utils/argb-from-rgba.js +18 -0
  149. package/dist/esm/utils/hct-color-utils/argb-from-xyz.js +24 -0
  150. package/dist/esm/utils/hct-color-utils/blue-from-argb.js +6 -0
  151. package/dist/esm/utils/hct-color-utils/clamp-component.js +9 -0
  152. package/dist/esm/utils/hct-color-utils/contrast.js +10 -10
  153. package/dist/esm/utils/hct-color-utils/green-from-argb.js +6 -0
  154. package/dist/esm/utils/hct-color-utils/hct.js +19 -12
  155. package/dist/esm/utils/hct-color-utils/index.js +2 -1
  156. package/dist/esm/utils/hct-color-utils/lab-f.js +9 -0
  157. package/dist/esm/utils/hct-color-utils/lab-invf.js +10 -0
  158. package/dist/esm/utils/hct-color-utils/lstar-from-argb.js +28 -0
  159. package/dist/esm/utils/hct-color-utils/lstar-from-y.js +16 -0
  160. package/dist/esm/utils/hct-color-utils/red-from-argb.js +6 -0
  161. package/dist/esm/utils/hct-color-utils/rgba-from-argb.js +22 -0
  162. package/dist/esm/utils/hct-color-utils/rgba.js +0 -0
  163. package/dist/esm/utils/hct-color-utils/viewing-conditions.js +5 -4
  164. package/dist/esm/utils/hct-color-utils/white-point-d65.js +8 -0
  165. package/dist/esm/utils/hct-color-utils/y-from-lstar.js +16 -0
  166. package/dist/esm/utils/hex-to-hsl.js +46 -0
  167. package/dist/esm/utils/hex-to-rgb-a.js +14 -0
  168. package/dist/esm/utils/hex-to-rgb.js +13 -0
  169. package/dist/esm/utils/is-valid-hex.js +4 -0
  170. package/dist/esm/utils/reduce-token-map.js +11 -0
  171. package/dist/esm/utils/rgb-to-lab.js +18 -0
  172. package/dist/types/artifacts/palettes-raw/palette.d.ts +1 -1
  173. package/dist/types/entry-points/theme-state-transformer.d.ts +2 -1
  174. package/dist/types/index.d.ts +2 -1
  175. package/dist/types/is-color-mode.d.ts +2 -0
  176. package/dist/types/is-theme-ids.d.ts +2 -0
  177. package/dist/types/is-theme-kind.d.ts +4 -0
  178. package/dist/types/theme-color-modes.d.ts +1 -0
  179. package/dist/types/theme-config.d.ts +8 -40
  180. package/dist/types/theme-ids.d.ts +1 -0
  181. package/dist/types/theme-object-to-string.d.ts +13 -0
  182. package/dist/types/theme-options-schema.d.ts +7 -0
  183. package/dist/types/theme-state-defaults.d.ts +14 -0
  184. package/dist/types/theme-state.d.ts +17 -0
  185. package/dist/types/{theme-state-transformer.d.ts → theme-string-to-object.d.ts} +0 -12
  186. package/dist/types/utils/additional-contrast-checker.d.ts +9 -0
  187. package/dist/types/utils/custom-theme-loading-utils.d.ts +1 -6
  188. package/dist/types/utils/custom-theme-token-contrast-check.d.ts +0 -9
  189. package/dist/types/utils/delta-e.d.ts +1 -0
  190. package/dist/types/utils/generate-colors.d.ts +5 -0
  191. package/dist/types/utils/{generate-custom-color-ramp.d.ts → generate-token-map-with-contrast-check.d.ts} +1 -6
  192. package/dist/types/utils/generate-token-map.d.ts +9 -0
  193. package/dist/types/utils/get-contrast-ratio.d.ts +1 -0
  194. package/dist/types/utils/hct-color-utils/alpha-from-argb.d.ts +4 -0
  195. package/dist/types/utils/hct-color-utils/argb-from-linrgb.d.ts +4 -0
  196. package/dist/types/utils/hct-color-utils/argb-from-lstar.d.ts +8 -0
  197. package/dist/types/utils/hct-color-utils/argb-from-rgba.d.ts +8 -0
  198. package/dist/types/utils/hct-color-utils/argb-from-xyz.d.ts +4 -0
  199. package/dist/types/utils/hct-color-utils/blue-from-argb.d.ts +4 -0
  200. package/dist/types/utils/hct-color-utils/clamp-component.d.ts +1 -0
  201. package/dist/types/utils/hct-color-utils/green-from-argb.d.ts +4 -0
  202. package/dist/types/utils/hct-color-utils/index.d.ts +2 -1
  203. package/dist/types/utils/hct-color-utils/lab-f.d.ts +1 -0
  204. package/dist/types/utils/hct-color-utils/lab-invf.d.ts +1 -0
  205. package/dist/types/utils/hct-color-utils/lstar-from-argb.d.ts +7 -0
  206. package/dist/types/utils/hct-color-utils/lstar-from-y.d.ts +12 -0
  207. package/dist/types/utils/hct-color-utils/red-from-argb.d.ts +4 -0
  208. package/dist/types/utils/hct-color-utils/rgba-from-argb.d.ts +8 -0
  209. package/dist/types/utils/hct-color-utils/rgba.d.ts +14 -0
  210. package/dist/types/utils/hct-color-utils/white-point-d65.d.ts +6 -0
  211. package/dist/types/utils/hct-color-utils/y-from-lstar.d.ts +12 -0
  212. package/dist/types/utils/hex-to-hsl.d.ts +1 -0
  213. package/dist/types/utils/hex-to-rgb-a.d.ts +1 -0
  214. package/dist/types/utils/hex-to-rgb.d.ts +1 -0
  215. package/dist/types/utils/is-valid-hex.d.ts +1 -0
  216. package/dist/types/utils/reduce-token-map.d.ts +6 -0
  217. package/dist/types/utils/rgb-to-lab.d.ts +1 -0
  218. package/dist/types-ts4.5/artifacts/palettes-raw/palette.d.ts +1 -1
  219. package/dist/types-ts4.5/entry-points/theme-state-transformer.d.ts +2 -1
  220. package/dist/types-ts4.5/index.d.ts +2 -1
  221. package/dist/types-ts4.5/is-color-mode.d.ts +2 -0
  222. package/dist/types-ts4.5/is-theme-ids.d.ts +2 -0
  223. package/dist/types-ts4.5/is-theme-kind.d.ts +11 -0
  224. package/dist/types-ts4.5/theme-color-modes.d.ts +1 -0
  225. package/dist/types-ts4.5/theme-config.d.ts +8 -40
  226. package/dist/types-ts4.5/theme-ids.d.ts +1 -0
  227. package/dist/types-ts4.5/theme-object-to-string.d.ts +13 -0
  228. package/dist/types-ts4.5/theme-options-schema.d.ts +7 -0
  229. package/dist/types-ts4.5/theme-state-defaults.d.ts +14 -0
  230. package/dist/types-ts4.5/theme-state.d.ts +17 -0
  231. package/dist/types-ts4.5/{theme-state-transformer.d.ts → theme-string-to-object.d.ts} +0 -12
  232. package/dist/types-ts4.5/utils/additional-contrast-checker.d.ts +9 -0
  233. package/dist/types-ts4.5/utils/custom-theme-loading-utils.d.ts +1 -6
  234. package/dist/types-ts4.5/utils/custom-theme-token-contrast-check.d.ts +0 -9
  235. package/dist/types-ts4.5/utils/delta-e.d.ts +1 -0
  236. package/dist/types-ts4.5/utils/generate-colors.d.ts +5 -0
  237. package/dist/types-ts4.5/utils/{generate-custom-color-ramp.d.ts → generate-token-map-with-contrast-check.d.ts} +1 -8
  238. package/dist/types-ts4.5/utils/generate-token-map.d.ts +11 -0
  239. package/dist/types-ts4.5/utils/get-contrast-ratio.d.ts +1 -0
  240. package/dist/types-ts4.5/utils/hct-color-utils/alpha-from-argb.d.ts +4 -0
  241. package/dist/types-ts4.5/utils/hct-color-utils/argb-from-linrgb.d.ts +4 -0
  242. package/dist/types-ts4.5/utils/hct-color-utils/argb-from-lstar.d.ts +8 -0
  243. package/dist/types-ts4.5/utils/hct-color-utils/argb-from-rgba.d.ts +8 -0
  244. package/dist/types-ts4.5/utils/hct-color-utils/argb-from-xyz.d.ts +4 -0
  245. package/dist/types-ts4.5/utils/hct-color-utils/blue-from-argb.d.ts +4 -0
  246. package/dist/types-ts4.5/utils/hct-color-utils/clamp-component.d.ts +1 -0
  247. package/dist/types-ts4.5/utils/hct-color-utils/green-from-argb.d.ts +4 -0
  248. package/dist/types-ts4.5/utils/hct-color-utils/index.d.ts +2 -1
  249. package/dist/types-ts4.5/utils/hct-color-utils/lab-f.d.ts +1 -0
  250. package/dist/types-ts4.5/utils/hct-color-utils/lab-invf.d.ts +1 -0
  251. package/dist/types-ts4.5/utils/hct-color-utils/lstar-from-argb.d.ts +7 -0
  252. package/dist/types-ts4.5/utils/hct-color-utils/lstar-from-y.d.ts +12 -0
  253. package/dist/types-ts4.5/utils/hct-color-utils/red-from-argb.d.ts +4 -0
  254. package/dist/types-ts4.5/utils/hct-color-utils/rgba-from-argb.d.ts +8 -0
  255. package/dist/types-ts4.5/utils/hct-color-utils/rgba.d.ts +14 -0
  256. package/dist/types-ts4.5/utils/hct-color-utils/white-point-d65.d.ts +6 -0
  257. package/dist/types-ts4.5/utils/hct-color-utils/y-from-lstar.d.ts +12 -0
  258. package/dist/types-ts4.5/utils/hex-to-hsl.d.ts +5 -0
  259. package/dist/types-ts4.5/utils/hex-to-rgb-a.d.ts +6 -0
  260. package/dist/types-ts4.5/utils/hex-to-rgb.d.ts +5 -0
  261. package/dist/types-ts4.5/utils/is-valid-hex.d.ts +1 -0
  262. package/dist/types-ts4.5/utils/reduce-token-map.d.ts +6 -0
  263. package/dist/types-ts4.5/utils/rgb-to-lab.d.ts +5 -0
  264. package/package.json +5 -5
  265. package/dist/cjs/theme-state-transformer.js +0 -93
  266. package/dist/cjs/utils/color-utils.js +0 -176
  267. package/dist/cjs/utils/hct-color-utils/color-utils.js +0 -279
  268. package/dist/es2019/theme-state-transformer.js +0 -70
  269. package/dist/es2019/utils/color-utils.js +0 -136
  270. package/dist/es2019/utils/hct-color-utils/color-utils.js +0 -249
  271. package/dist/esm/theme-state-transformer.js +0 -86
  272. package/dist/esm/utils/color-utils.js +0 -138
  273. package/dist/esm/utils/hct-color-utils/color-utils.js +0 -248
  274. package/dist/types/utils/color-utils.d.ts +0 -10
  275. package/dist/types/utils/hct-color-utils/color-utils.d.ts +0 -88
  276. package/dist/types-ts4.5/utils/color-utils.d.ts +0 -23
  277. package/dist/types-ts4.5/utils/hct-color-utils/color-utils.d.ts +0 -88
@@ -17,11 +17,17 @@ Object.defineProperty(exports, "themeIds", {
17
17
  return _themeIds.themeIds;
18
18
  }
19
19
  });
20
- exports.themeStateDefaults = exports.themeIdsWithOverrides = void 0;
20
+ exports.themeIdsWithOverrides = void 0;
21
+ Object.defineProperty(exports, "themeStateDefaults", {
22
+ enumerable: true,
23
+ get: function get() {
24
+ return _themeStateDefaults.themeStateDefaults;
25
+ }
26
+ });
21
27
  var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
22
- var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
23
28
  var _themeIds = require("./theme-ids");
24
29
  var _themeColorModes = require("./theme-color-modes");
30
+ var _themeStateDefaults = require("./theme-state-defaults");
25
31
  /**
26
32
  * This file contains the source of truth for themes and all associated meta data.
27
33
  */
@@ -168,48 +174,6 @@ var themeConfig = {
168
174
  }
169
175
  };
170
176
 
171
- /**
172
- * ThemeOptionsSchema: additional configuration options used to customize Atlassian's themes
173
- */
174
-
175
- /**
176
- * ThemeState: the standard representation of an app's current theme and preferences
177
- */
178
-
179
- /**
180
- * Can't evaluate typography feature flags at the module level,
181
- * it will always resolve to false when server side rendered or when flags are loaded async.
182
- */
183
-
184
- function getShapeDefault() {
185
- if ((0, _platformFeatureFlags.fg)('platform-dst-shape-theme-default')) {
186
- return 'shape';
187
- }
188
- return undefined;
189
- }
190
- function getMotionDefault() {
191
- if ((0, _platformFeatureFlags.fg)('platform-dst-motion-theme-default')) {
192
- return 'motion';
193
- }
194
- return undefined;
195
- }
196
-
197
- /**
198
- * themeStateDefaults: the default values for ThemeState used by theming utilities
199
- */
200
- // eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
201
- var themeStateDefaults = exports.themeStateDefaults = {
202
- colorMode: 'auto',
203
- contrastMode: 'auto',
204
- dark: 'dark',
205
- light: 'light',
206
- shape: getShapeDefault,
207
- spacing: 'spacing',
208
- typography: 'typography',
209
- motion: getMotionDefault,
210
- UNSAFE_themeOptions: undefined
211
- };
212
-
213
177
  /**
214
178
  * Represents theme state once mounted to the page
215
179
  * (the page doesn't have an "auto" color mode, it's either light or dark)
@@ -0,0 +1,42 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
+ Object.defineProperty(exports, "__esModule", {
5
+ value: true
6
+ });
7
+ exports.themeObjectToString = void 0;
8
+ var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
9
+ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
10
+ var _isColorMode = require("./is-color-mode");
11
+ var _isThemeIds = require("./is-theme-ids");
12
+ var _isThemeKind = require("./is-theme-kind");
13
+ var customThemeOptions = 'UNSAFE_themeOptions';
14
+
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
+ var themeObjectToString = exports.themeObjectToString = function themeObjectToString(themeState) {
27
+ return Object.entries(themeState).reduce(function (themeString, _ref) {
28
+ var _ref2 = (0, _slicedToArray2.default)(_ref, 2),
29
+ kind = _ref2[0],
30
+ id = _ref2[1];
31
+ if (
32
+ // colorMode theme state
33
+ kind === 'colorMode' && typeof id === 'string' && (0, _isColorMode.isColorMode)(id) ||
34
+ // custom theme state
35
+ kind === customThemeOptions && (0, _typeof2.default)(id) === 'object' ||
36
+ // other theme states
37
+ (0, _isThemeKind.isThemeKind)(kind) && typeof id === 'string' && (0, _isThemeIds.isThemeIds)(id)) {
38
+ return themeString + "".concat(themeString ? ' ' : '') + "".concat(kind, ":").concat((0, _typeof2.default)(id) === 'object' ? JSON.stringify(id) : id);
39
+ }
40
+ return themeString;
41
+ }, '');
42
+ };
@@ -0,0 +1 @@
1
+ "use strict";
@@ -0,0 +1,39 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.themeStateDefaults = void 0;
7
+ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
8
+ /**
9
+ * Can't evaluate typography feature flags at the module level,
10
+ * it will always resolve to false when server side rendered or when flags are loaded async.
11
+ */
12
+
13
+ function getShapeDefault() {
14
+ if ((0, _platformFeatureFlags.fg)('platform-dst-shape-theme-default')) {
15
+ return 'shape';
16
+ }
17
+ return undefined;
18
+ }
19
+ function getMotionDefault() {
20
+ if ((0, _platformFeatureFlags.fg)('platform-dst-motion-theme-default')) {
21
+ return 'motion';
22
+ }
23
+ return undefined;
24
+ }
25
+
26
+ /**
27
+ * themeStateDefaults: the default values for ThemeState used by theming utilities
28
+ */
29
+ var themeStateDefaults = exports.themeStateDefaults = {
30
+ colorMode: 'auto',
31
+ contrastMode: 'auto',
32
+ dark: 'dark',
33
+ light: 'light',
34
+ shape: getShapeDefault,
35
+ spacing: 'spacing',
36
+ typography: 'typography',
37
+ motion: getMotionDefault,
38
+ UNSAFE_themeOptions: undefined
39
+ };
@@ -0,0 +1,5 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
@@ -0,0 +1,51 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
+ Object.defineProperty(exports, "__esModule", {
5
+ value: true
6
+ });
7
+ exports.themeStringToObject = void 0;
8
+ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
9
+ var _isColorMode = require("./is-color-mode");
10
+ var _isThemeIds = require("./is-theme-ids");
11
+ var _isThemeKind = require("./is-theme-kind");
12
+ var customThemeOptions = 'UNSAFE_themeOptions';
13
+
14
+ /**
15
+ * Converts a string that is formatted for the `data-theme` HTML attribute
16
+ * to an object that can be passed to `setGlobalTheme`.
17
+ *
18
+ * @param {string} themes The themes that should be applied.
19
+ *
20
+ * @example
21
+ * ```
22
+ * themeStringToObject('dark:dark light:light spacing:spacing');
23
+ * // returns { dark: 'dark', light: 'light', spacing: 'spacing' }
24
+ * ```
25
+ */
26
+ var themeStringToObject = exports.themeStringToObject = function themeStringToObject(themeState) {
27
+ return themeState.split(' ')
28
+ // @ts-ignore - TS1501 TypeScript 5.9.2 upgrade
29
+ .map(function (theme) {
30
+ return theme.split(/:([^]*)/);
31
+ }).reduce(function (themeObject, _ref) {
32
+ var _ref2 = (0, _slicedToArray2.default)(_ref, 2),
33
+ kind = _ref2[0],
34
+ id = _ref2[1];
35
+ if (kind === 'colorMode' && (0, _isColorMode.isColorMode)(id)) {
36
+ themeObject[kind] = id;
37
+ }
38
+ if ((0, _isThemeKind.isThemeKind)(kind) && (0, _isThemeIds.isThemeIds)(id)) {
39
+ // @ts-expect-error FIXME - this is a valid ts error
40
+ themeObject[kind] = id;
41
+ }
42
+ if (kind === customThemeOptions) {
43
+ try {
44
+ themeObject[customThemeOptions] = JSON.parse(id);
45
+ } catch (_unused) {
46
+ new Error('Invalid custom theme string');
47
+ }
48
+ }
49
+ return themeObject;
50
+ }, {});
51
+ };
@@ -0,0 +1,43 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
+ Object.defineProperty(exports, "__esModule", {
5
+ value: true
6
+ });
7
+ exports.additionalContrastChecker = void 0;
8
+ var _atlassianDarkTokenValueForContrastCheck = _interopRequireDefault(require("../artifacts/atlassian-dark-token-value-for-contrast-check"));
9
+ var _atlassianLightTokenValueForContrastCheck = _interopRequireDefault(require("../artifacts/atlassian-light-token-value-for-contrast-check"));
10
+ var _customThemeTokenContrastCheck = require("./custom-theme-token-contrast-check");
11
+ var _getContrastRatio = require("./get-contrast-ratio");
12
+ var getColorFromTokenRaw = function getColorFromTokenRaw(tokenName, mode) {
13
+ return mode === 'light' ? _atlassianLightTokenValueForContrastCheck.default[tokenName] : _atlassianDarkTokenValueForContrastCheck.default[tokenName];
14
+ };
15
+ var additionalContrastChecker = exports.additionalContrastChecker = function additionalContrastChecker(_ref) {
16
+ var customThemeTokenMap = _ref.customThemeTokenMap,
17
+ mode = _ref.mode,
18
+ themeRamp = _ref.themeRamp;
19
+ var updatedCustomThemeTokenMap = {};
20
+ var brandTokens = Object.keys(customThemeTokenMap);
21
+ _customThemeTokenContrastCheck.additionalChecks.forEach(function (pairing) {
22
+ var backgroundLight = pairing.backgroundLight,
23
+ backgroundDark = pairing.backgroundDark,
24
+ foreground = pairing.foreground,
25
+ desiredContrast = pairing.desiredContrast,
26
+ updatedTokens = pairing.updatedTokens;
27
+ var background = mode === 'light' ? backgroundLight : backgroundDark;
28
+ var foregroundTokenValue = customThemeTokenMap[foreground];
29
+ var backgroundTokenValue = customThemeTokenMap[background];
30
+ var foregroundColor = brandTokens.includes(foreground) ? typeof foregroundTokenValue === 'string' ? foregroundTokenValue : themeRamp[foregroundTokenValue] : getColorFromTokenRaw(foreground, mode);
31
+ var backgroundColor = brandTokens.includes(background) ? typeof backgroundTokenValue === 'string' ? backgroundTokenValue : themeRamp[backgroundTokenValue] : getColorFromTokenRaw(background, mode);
32
+ var contrast = (0, _getContrastRatio.getContrastRatio)(foregroundColor, backgroundColor);
33
+ if (contrast <= desiredContrast) {
34
+ updatedTokens.forEach(function (token) {
35
+ var rampValue = customThemeTokenMap[token];
36
+ if (typeof rampValue === 'number') {
37
+ updatedCustomThemeTokenMap[token] = mode === 'light' ? rampValue + 1 : rampValue - 1;
38
+ }
39
+ });
40
+ }
41
+ });
42
+ return updatedCustomThemeTokenMap;
43
+ };
@@ -1,22 +1,11 @@
1
1
  "use strict";
2
2
 
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
3
  Object.defineProperty(exports, "__esModule", {
5
4
  value: true
6
5
  });
7
6
  exports.findMissingCustomStyleElements = findMissingCustomStyleElements;
8
- Object.defineProperty(exports, "limitSizeOfCustomStyleElements", {
9
- enumerable: true,
10
- get: function get() {
11
- return _limitSizeOfCustomStyleElements.limitSizeOfCustomStyleElements;
12
- }
13
- });
14
- exports.reduceTokenMap = reduceTokenMap;
15
- var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
16
- var _tokenNames = _interopRequireDefault(require("../artifacts/token-names"));
17
7
  var _constants = require("../constants");
18
8
  var _hash = require("./hash");
19
- var _limitSizeOfCustomStyleElements = require("./limit-size-of-custom-style-elements");
20
9
  function findMissingCustomStyleElements(UNSAFE_themeOptions, mode) {
21
10
  var optionString = JSON.stringify(UNSAFE_themeOptions);
22
11
  var uniqueId = (0, _hash.hash)(optionString);
@@ -31,15 +20,4 @@ function findMissingCustomStyleElements(UNSAFE_themeOptions, mode) {
31
20
  }
32
21
  });
33
22
  return attrOfMissingCustomStyles;
34
- }
35
-
36
- // eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
37
- function reduceTokenMap(tokenMap, themeRamp) {
38
- return Object.entries(tokenMap).reduce(function (acc, _ref) {
39
- var _ref2 = (0, _slicedToArray2.default)(_ref, 2),
40
- key = _ref2[0],
41
- value = _ref2[1];
42
- var cssVar = _tokenNames.default[key];
43
- return cssVar ? "".concat(acc, "\n ").concat(cssVar, ": ").concat(typeof value === 'string' ? value : themeRamp[value], ";") : acc;
44
- }, '');
45
23
  }
@@ -1,13 +1,9 @@
1
1
  "use strict";
2
2
 
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
3
  Object.defineProperty(exports, "__esModule", {
5
4
  value: true
6
5
  });
7
- exports.additionalContrastChecker = exports.additionalChecks = void 0;
8
- var _atlassianDarkTokenValueForContrastCheck = _interopRequireDefault(require("../artifacts/atlassian-dark-token-value-for-contrast-check"));
9
- var _atlassianLightTokenValueForContrastCheck = _interopRequireDefault(require("../artifacts/atlassian-light-token-value-for-contrast-check"));
10
- var _colorUtils = require("./color-utils");
6
+ exports.additionalChecks = void 0;
11
7
  var additionalChecks = exports.additionalChecks = [{
12
8
  foreground: 'color.text.brand',
13
9
  backgroundLight: 'elevation.surface.sunken',
@@ -49,38 +45,4 @@ var additionalChecks = exports.additionalChecks = [{
49
45
  // In light mode: darken the following tokens by one base token
50
46
  // In dark mode: lighten the following tokens by one base token
51
47
  updatedTokens: ['color.chart.brand', 'color.chart.brand.hovered']
52
- }];
53
- var getColorFromTokenRaw = function getColorFromTokenRaw(tokenName, mode) {
54
- return mode === 'light' ? _atlassianLightTokenValueForContrastCheck.default[tokenName] : _atlassianDarkTokenValueForContrastCheck.default[tokenName];
55
- };
56
-
57
- // eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
58
- var additionalContrastChecker = exports.additionalContrastChecker = function additionalContrastChecker(_ref) {
59
- var customThemeTokenMap = _ref.customThemeTokenMap,
60
- mode = _ref.mode,
61
- themeRamp = _ref.themeRamp;
62
- var updatedCustomThemeTokenMap = {};
63
- var brandTokens = Object.keys(customThemeTokenMap);
64
- additionalChecks.forEach(function (pairing) {
65
- var backgroundLight = pairing.backgroundLight,
66
- backgroundDark = pairing.backgroundDark,
67
- foreground = pairing.foreground,
68
- desiredContrast = pairing.desiredContrast,
69
- updatedTokens = pairing.updatedTokens;
70
- var background = mode === 'light' ? backgroundLight : backgroundDark;
71
- var foregroundTokenValue = customThemeTokenMap[foreground];
72
- var backgroundTokenValue = customThemeTokenMap[background];
73
- var foregroundColor = brandTokens.includes(foreground) ? typeof foregroundTokenValue === 'string' ? foregroundTokenValue : themeRamp[foregroundTokenValue] : getColorFromTokenRaw(foreground, mode);
74
- var backgroundColor = brandTokens.includes(background) ? typeof backgroundTokenValue === 'string' ? backgroundTokenValue : themeRamp[backgroundTokenValue] : getColorFromTokenRaw(background, mode);
75
- var contrast = (0, _colorUtils.getContrastRatio)(foregroundColor, backgroundColor);
76
- if (contrast <= desiredContrast) {
77
- updatedTokens.forEach(function (token) {
78
- var rampValue = customThemeTokenMap[token];
79
- if (typeof rampValue === 'number') {
80
- updatedCustomThemeTokenMap[token] = mode === 'light' ? rampValue + 1 : rampValue - 1;
81
- }
82
- });
83
- }
84
- });
85
- return updatedCustomThemeTokenMap;
86
- };
48
+ }];
@@ -0,0 +1,26 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.deltaE = deltaE;
7
+ var _rgbToLab = require("./rgb-to-lab");
8
+ function deltaE(rgbA, rgbB) {
9
+ var labA = (0, _rgbToLab.rgbToLab)(rgbA);
10
+ var labB = (0, _rgbToLab.rgbToLab)(rgbB);
11
+ var deltaL = labA[0] - labB[0];
12
+ var deltaA = labA[1] - labB[1];
13
+ var deltaB = labA[2] - labB[2];
14
+ var c1 = Math.sqrt(labA[1] * labA[1] + labA[2] * labA[2]);
15
+ var c2 = Math.sqrt(labB[1] * labB[1] + labB[2] * labB[2]);
16
+ var deltaC = c1 - c2;
17
+ var deltaH = deltaA * deltaA + deltaB * deltaB - deltaC * deltaC;
18
+ deltaH = deltaH < 0 ? 0 : Math.sqrt(deltaH);
19
+ var sc = 1.0 + 0.045 * c1;
20
+ var sh = 1.0 + 0.015 * c1;
21
+ var deltaLKlsl = deltaL / 1.0;
22
+ var deltaCkcsc = deltaC / sc;
23
+ var deltaHkhsh = deltaH / sh;
24
+ var i = deltaLKlsl * deltaLKlsl + deltaCkcsc * deltaCkcsc + deltaHkhsh * deltaHkhsh;
25
+ return i < 0 ? 0 : Math.sqrt(i);
26
+ }
@@ -0,0 +1,47 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
+ Object.defineProperty(exports, "__esModule", {
5
+ value: true
6
+ });
7
+ exports.generateColors = void 0;
8
+ var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
9
+ var _getClosestColorIndex = require("./get-closest-color-index");
10
+ var _hctColorUtils = require("./hct-color-utils");
11
+ var _hexToHsl = require("./hex-to-hsl");
12
+ var _hexToRgbA = require("./hex-to-rgb-a");
13
+ var _hslToRgb = require("./hsl-to-rgb");
14
+ var _relativeLuminanceW3C = require("./relative-luminance-w3-c");
15
+ var _rgbToHex = require("./rgb-to-hex");
16
+ var lowLuminanceContrastRatios = [1.12, 1.33, 2.03, 2.73, 3.33, 4.27, 5.2, 6.62, 12.46, 14.25];
17
+ var highLuminanceContrastRatios = [1.08, 1.24, 1.55, 1.99, 2.45, 3.34, 4.64, 6.1, 10.19, 12.6];
18
+ var generateColors = exports.generateColors = function generateColors(brandColor) {
19
+ // Determine luminance
20
+ var HSLBrandColorHue = (0, _hexToHsl.hexToHSL)(brandColor)[0];
21
+ var baseRgb = (0, _hslToRgb.HSLToRGB)(HSLBrandColorHue, 100, 60);
22
+ var isLowLuminance = (0, _relativeLuminanceW3C.relativeLuminanceW3C)(baseRgb[0], baseRgb[1], baseRgb[2]) < 0.4;
23
+ // Choose right palette
24
+ var themeRatios = isLowLuminance ? lowLuminanceContrastRatios : highLuminanceContrastRatios;
25
+ var brandRgba = (0, _hexToRgbA.hexToRgbA)(brandColor);
26
+ var hctColor = _hctColorUtils.Hct.fromInt((0, _hctColorUtils.argbFromRgba)({
27
+ r: brandRgba[0],
28
+ g: brandRgba[1],
29
+ b: brandRgba[2],
30
+ a: brandRgba[3]
31
+ }));
32
+ var themeRamp = themeRatios.map(function (contrast) {
33
+ var rgbaColor = (0, _hctColorUtils.rgbaFromArgb)(_hctColorUtils.Hct.from(hctColor.hue, hctColor.chroma, _hctColorUtils.Contrast.darker(100, contrast) + 0.25 // Material's utils provide an offset
34
+ ).toInt());
35
+ return (0, _rgbToHex.rgbToHex)(rgbaColor.r, rgbaColor.g, rgbaColor.b);
36
+ });
37
+ var closestColorIndex = (0, _getClosestColorIndex.getClosestColorIndex)(themeRamp, brandColor);
38
+
39
+ // Replace closet color with brandColor
40
+ var updatedThemeRamp = (0, _toConsumableArray2.default)(themeRamp);
41
+ updatedThemeRamp[closestColorIndex] = brandColor;
42
+ return {
43
+ ramp: updatedThemeRamp,
44
+ // add the replaced color into the result
45
+ replacedColor: themeRamp[closestColorIndex]
46
+ };
47
+ };
@@ -0,0 +1,32 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
+ Object.defineProperty(exports, "__esModule", {
5
+ value: true
6
+ });
7
+ exports.generateTokenMapWithContrastCheck = void 0;
8
+ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
9
+ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
10
+ var _additionalContrastChecker = require("./additional-contrast-checker");
11
+ var _generateColors = require("./generate-colors");
12
+ var _generateTokenMap = require("./generate-token-map");
13
+ 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; }
14
+ 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) { (0, _defineProperty2.default)(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; }
15
+ var generateTokenMapWithContrastCheck = exports.generateTokenMapWithContrastCheck = function generateTokenMapWithContrastCheck(brandColor, mode, themeRamp) {
16
+ var colors = themeRamp || (0, _generateColors.generateColors)(brandColor).ramp;
17
+ var tokenMaps = (0, _generateTokenMap.generateTokenMap)(brandColor, mode, colors);
18
+ var result = {};
19
+ Object.entries(tokenMaps).forEach(function (_ref) {
20
+ var _ref2 = (0, _slicedToArray2.default)(_ref, 2),
21
+ mode = _ref2[0],
22
+ map = _ref2[1];
23
+ if (mode === 'light' || mode === 'dark') {
24
+ result[mode] = _objectSpread(_objectSpread({}, map), (0, _additionalContrastChecker.additionalContrastChecker)({
25
+ customThemeTokenMap: map,
26
+ mode: mode,
27
+ themeRamp: colors
28
+ }));
29
+ }
30
+ });
31
+ return result;
32
+ };
@@ -4,59 +4,12 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
4
4
  Object.defineProperty(exports, "__esModule", {
5
5
  value: true
6
6
  });
7
- exports.generateTokenMapWithContrastCheck = exports.generateTokenMap = exports.generateColors = void 0;
8
- Object.defineProperty(exports, "getClosestColorIndex", {
9
- enumerable: true,
10
- get: function get() {
11
- return _getClosestColorIndex.getClosestColorIndex;
12
- }
13
- });
14
- var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
7
+ exports.generateTokenMap = void 0;
15
8
  var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
16
- var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
17
9
  var _atlassianDarkTokenValueForContrastCheck = _interopRequireDefault(require("../artifacts/atlassian-dark-token-value-for-contrast-check"));
18
- var _colorUtils = require("./color-utils");
19
- var _customThemeTokenContrastCheck = require("./custom-theme-token-contrast-check");
10
+ var _generateColors2 = require("./generate-colors");
20
11
  var _getClosestColorIndex = require("./get-closest-color-index");
21
- var _hctColorUtils = require("./hct-color-utils");
22
- var _hslToRgb = require("./hsl-to-rgb");
23
- var _relativeLuminanceW3C = require("./relative-luminance-w3-c");
24
- var _rgbToHex = require("./rgb-to-hex");
25
- 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; }
26
- 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) { (0, _defineProperty2.default)(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; }
27
- var lowLuminanceContrastRatios = [1.12, 1.33, 2.03, 2.73, 3.33, 4.27, 5.2, 6.62, 12.46, 14.25];
28
- var highLuminanceContrastRatios = [1.08, 1.24, 1.55, 1.99, 2.45, 3.34, 4.64, 6.1, 10.19, 12.6];
29
- var generateColors = exports.generateColors = function generateColors(brandColor) {
30
- // Determine luminance
31
- var HSLBrandColorHue = (0, _colorUtils.hexToHSL)(brandColor)[0];
32
- var baseRgb = (0, _hslToRgb.HSLToRGB)(HSLBrandColorHue, 100, 60);
33
- var isLowLuminance = (0, _relativeLuminanceW3C.relativeLuminanceW3C)(baseRgb[0], baseRgb[1], baseRgb[2]) < 0.4;
34
- // Choose right palette
35
- var themeRatios = isLowLuminance ? lowLuminanceContrastRatios : highLuminanceContrastRatios;
36
- var brandRgba = (0, _colorUtils.hexToRgbA)(brandColor);
37
- var hctColor = _hctColorUtils.Hct.fromInt((0, _hctColorUtils.argbFromRgba)({
38
- r: brandRgba[0],
39
- g: brandRgba[1],
40
- b: brandRgba[2],
41
- a: brandRgba[3]
42
- }));
43
- var themeRamp = themeRatios.map(function (contrast) {
44
- var rgbaColor = (0, _hctColorUtils.rgbaFromArgb)(_hctColorUtils.Hct.from(hctColor.hue, hctColor.chroma, _hctColorUtils.Contrast.darker(100, contrast) + 0.25 // Material's utils provide an offset
45
- ).toInt());
46
- return (0, _rgbToHex.rgbToHex)(rgbaColor.r, rgbaColor.g, rgbaColor.b);
47
- });
48
- var closestColorIndex = (0, _getClosestColorIndex.getClosestColorIndex)(themeRamp, brandColor);
49
-
50
- // Replace closet color with brandColor
51
- var updatedThemeRamp = (0, _toConsumableArray2.default)(themeRamp);
52
- updatedThemeRamp[closestColorIndex] = brandColor;
53
- return {
54
- ramp: updatedThemeRamp,
55
- // add the replaced color into the result
56
- replacedColor: themeRamp[closestColorIndex]
57
- };
58
- };
59
-
12
+ var _getContrastRatio = require("./get-contrast-ratio");
60
13
  /**
61
14
  * Return the interaction tokens for a color, given its ramp position and the number of
62
15
  * needed interaction states. Use higher-indexed colors (i.e. darker colors) if possible;
@@ -76,17 +29,15 @@ function getInteractionStates(rampPosition, number, colors) {
76
29
  }
77
30
  return result;
78
31
  }
79
-
80
- // eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
81
32
  var generateTokenMap = exports.generateTokenMap = function generateTokenMap(brandColor, mode, themeRamp) {
82
- var _generateColors = generateColors(brandColor),
33
+ var _generateColors = (0, _generateColors2.generateColors)(brandColor),
83
34
  ramp = _generateColors.ramp,
84
35
  replacedColor = _generateColors.replacedColor;
85
36
  var colors = themeRamp || ramp;
86
37
  var closestColorIndex = (0, _getClosestColorIndex.getClosestColorIndex)(colors, brandColor);
87
38
  var customThemeTokenMapLight = {};
88
39
  var customThemeTokenMapDark = {};
89
- var inputContrast = (0, _colorUtils.getContrastRatio)(brandColor, '#FFFFFF');
40
+ var inputContrast = (0, _getContrastRatio.getContrastRatio)(brandColor, '#FFFFFF');
90
41
  // Branch based on brandColor's contrast against white
91
42
  if (inputContrast >= 4.5) {
92
43
  /**
@@ -201,7 +152,7 @@ var generateTokenMap = exports.generateTokenMap = function generateTokenMap(bran
201
152
  */
202
153
  if (inputContrast < 4.5) {
203
154
  var inverseTextColor = _atlassianDarkTokenValueForContrastCheck.default['color.text.inverse'];
204
- if ((0, _colorUtils.getContrastRatio)(inverseTextColor, brandColor) >= 4.5 && closestColorIndex >= 2) {
155
+ if ((0, _getContrastRatio.getContrastRatio)(inverseTextColor, brandColor) >= 4.5 && closestColorIndex >= 2) {
205
156
  customThemeTokenMapDark['color.background.brand.bold'] = closestColorIndex;
206
157
  customThemeTokenMapDark['color.background.brand.bold.hovered'] = closestColorIndex - 1;
207
158
  customThemeTokenMapDark['color.background.brand.bold.pressed'] = closestColorIndex - 2;
@@ -216,24 +167,4 @@ var generateTokenMap = exports.generateTokenMap = function generateTokenMap(bran
216
167
  light: customThemeTokenMapLight,
217
168
  dark: customThemeTokenMapDark
218
169
  };
219
- };
220
-
221
- // eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
222
- var generateTokenMapWithContrastCheck = exports.generateTokenMapWithContrastCheck = function generateTokenMapWithContrastCheck(brandColor, mode, themeRamp) {
223
- var colors = themeRamp || generateColors(brandColor).ramp;
224
- var tokenMaps = generateTokenMap(brandColor, mode, colors);
225
- var result = {};
226
- Object.entries(tokenMaps).forEach(function (_ref3) {
227
- var _ref4 = (0, _slicedToArray2.default)(_ref3, 2),
228
- mode = _ref4[0],
229
- map = _ref4[1];
230
- if (mode === 'light' || mode === 'dark') {
231
- result[mode] = _objectSpread(_objectSpread({}, map), (0, _customThemeTokenContrastCheck.additionalContrastChecker)({
232
- customThemeTokenMap: map,
233
- mode: mode,
234
- themeRamp: colors
235
- }));
236
- }
237
- });
238
- return result;
239
170
  };
@@ -4,13 +4,14 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
  exports.getClosestColorIndex = void 0;
7
- var _colorUtils = require("./color-utils");
7
+ var _deltaE = require("./delta-e");
8
+ var _hexToRgb = require("./hex-to-rgb");
8
9
  var getClosestColorIndex = exports.getClosestColorIndex = function getClosestColorIndex(themeRamp, brandColor) {
9
10
  // Iterate over themeRamp and find whichever color is closest to brandColor
10
11
  var closestColorIndex = 0;
11
12
  var closestColorDistance = null;
12
13
  themeRamp.forEach(function (value, index) {
13
- var distance = (0, _colorUtils.deltaE)((0, _colorUtils.hexToRgb)(value), (0, _colorUtils.hexToRgb)(brandColor));
14
+ var distance = (0, _deltaE.deltaE)((0, _hexToRgb.hexToRgb)(value), (0, _hexToRgb.hexToRgb)(brandColor));
14
15
  if (closestColorDistance === null || distance < closestColorDistance) {
15
16
  closestColorIndex = index;
16
17
  closestColorDistance = distance;
@@ -0,0 +1,22 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.getContrastRatio = getContrastRatio;
7
+ var _hexToRgb = require("./hex-to-rgb");
8
+ var _isValidHex = require("./is-valid-hex");
9
+ var _relativeLuminanceW3C = require("./relative-luminance-w3-c");
10
+ function getContrastRatio(foreground, background) {
11
+ if (!(0, _isValidHex.isValidHex)(foreground) || !(0, _isValidHex.isValidHex)(background)) {
12
+ throw new Error('Invalid HEX');
13
+ }
14
+ var foregroundRgb = (0, _hexToRgb.hexToRgb)(foreground);
15
+ var backgroundRgb = (0, _hexToRgb.hexToRgb)(background);
16
+ var foregroundLuminance = (0, _relativeLuminanceW3C.relativeLuminanceW3C)(foregroundRgb[0], foregroundRgb[1], foregroundRgb[2]);
17
+ var backgroundLuminance = (0, _relativeLuminanceW3C.relativeLuminanceW3C)(backgroundRgb[0], backgroundRgb[1], backgroundRgb[2]);
18
+ // calculate the color contrast ratio
19
+ var brightest = Math.max(foregroundLuminance, backgroundLuminance);
20
+ var darkest = Math.min(foregroundLuminance, backgroundLuminance);
21
+ return (brightest + 0.05) / (darkest + 0.05);
22
+ }
@@ -0,0 +1,12 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.alphaFromArgb = alphaFromArgb;
7
+ /**
8
+ * Returns the alpha component of a color in ARGB format.
9
+ */
10
+ function alphaFromArgb(argb) {
11
+ return argb >> 24 & 255;
12
+ }
@@ -0,0 +1,17 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.argbFromLinrgb = argbFromLinrgb;
7
+ var _argbFromRgb = require("./argb-from-rgb");
8
+ var _delinearized = require("./delinearized");
9
+ /**
10
+ * Converts a color from linear RGB components to ARGB format.
11
+ */
12
+ function argbFromLinrgb(linrgb) {
13
+ var r = (0, _delinearized.delinearized)(linrgb[0]);
14
+ var g = (0, _delinearized.delinearized)(linrgb[1]);
15
+ var b = (0, _delinearized.delinearized)(linrgb[2]);
16
+ return (0, _argbFromRgb.argbFromRgb)(r, g, b);
17
+ }