@atlaskit/tokens 13.0.2 → 13.0.4

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 (263) hide show
  1. package/CHANGELOG.md +18 -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/tokens-raw/atlassian-motion.js +3 -3
  31. package/dist/cjs/custom-theme.js +10 -60
  32. package/dist/cjs/entry-points/token-metadata.codegen.js +1 -10
  33. package/dist/cjs/get-custom-theme-styles.js +57 -0
  34. package/dist/cjs/get-global-theme.js +2 -2
  35. package/dist/cjs/get-theme-html-attrs.js +2 -2
  36. package/dist/cjs/get-theme-styles.js +6 -5
  37. package/dist/cjs/load-custom-theme-styles.js +2 -2
  38. package/dist/cjs/set-global-theme.js +4 -3
  39. package/dist/cjs/theme-color-modes.js +13 -0
  40. package/dist/cjs/theme-config.js +19 -16
  41. package/dist/cjs/theme-ids.js +13 -0
  42. package/dist/cjs/theme-state-transformer.js +2 -2
  43. package/dist/cjs/utils/color-detection.js +9 -12
  44. package/dist/cjs/utils/color-utils.js +38 -47
  45. package/dist/cjs/utils/custom-theme-loading-utils.js +7 -11
  46. package/dist/cjs/utils/generate-custom-color-ramp.js +16 -19
  47. package/dist/cjs/utils/get-alpha.js +13 -0
  48. package/dist/cjs/utils/get-closest-color-index.js +20 -0
  49. package/dist/cjs/utils/get-css-custom-property.js +32 -0
  50. package/dist/cjs/utils/get-fully-qualified-token-id.js +19 -0
  51. package/dist/cjs/utils/get-theme-override-preferences.js +12 -0
  52. package/dist/cjs/utils/get-theme-preferences.js +8 -5
  53. package/dist/cjs/utils/get-token-id.js +26 -0
  54. package/dist/cjs/utils/hct-color-utils/argb-from-rgb.js +12 -0
  55. package/dist/cjs/utils/hct-color-utils/clamp-double.js +20 -0
  56. package/dist/cjs/utils/hct-color-utils/clamp-int.js +20 -0
  57. package/dist/cjs/utils/hct-color-utils/color-utils.js +34 -59
  58. package/dist/cjs/utils/hct-color-utils/delinearized.js +27 -0
  59. package/dist/cjs/utils/hct-color-utils/hct.js +19 -95
  60. package/dist/cjs/utils/hct-color-utils/lerp.js +14 -0
  61. package/dist/cjs/utils/hct-color-utils/linearized.js +22 -0
  62. package/dist/cjs/utils/hct-color-utils/math-utils.js +38 -107
  63. package/dist/cjs/utils/hct-color-utils/matrix-multiply.js +15 -0
  64. package/dist/cjs/utils/hct-color-utils/sanitize-degrees-double.js +19 -0
  65. package/dist/cjs/utils/hct-color-utils/signum.js +20 -0
  66. package/dist/cjs/utils/hct-color-utils/viewing-conditions.js +98 -0
  67. package/dist/cjs/utils/hex-to-rgba-values.js +15 -0
  68. package/dist/cjs/utils/hsl-to-rgb.js +18 -0
  69. package/dist/cjs/utils/is-valid-brand-hex.js +9 -0
  70. package/dist/cjs/utils/limit-size-of-custom-style-elements.js +16 -0
  71. package/dist/cjs/utils/load-theme-css.js +32 -0
  72. package/dist/cjs/utils/relative-luminance-w3-c.js +18 -0
  73. package/dist/cjs/utils/rgb-to-hex.js +9 -0
  74. package/dist/cjs/utils/theme-loading.js +10 -25
  75. package/dist/cjs/utils/token-ids.js +21 -62
  76. package/dist/es2019/artifacts/replacement-mapping.js +5 -2
  77. package/dist/es2019/artifacts/tokens-raw/atlassian-motion.js +3 -3
  78. package/dist/es2019/custom-theme.js +4 -66
  79. package/dist/es2019/entry-points/token-metadata.codegen.js +1 -10
  80. package/dist/es2019/get-custom-theme-styles.js +60 -0
  81. package/dist/es2019/get-global-theme.js +1 -1
  82. package/dist/es2019/get-theme-html-attrs.js +1 -1
  83. package/dist/es2019/get-theme-styles.js +4 -3
  84. package/dist/es2019/load-custom-theme-styles.js +1 -1
  85. package/dist/es2019/set-global-theme.js +3 -2
  86. package/dist/es2019/theme-color-modes.js +7 -0
  87. package/dist/es2019/theme-config.js +4 -16
  88. package/dist/es2019/theme-ids.js +7 -0
  89. package/dist/es2019/theme-state-transformer.js +1 -1
  90. package/dist/es2019/utils/color-detection.js +3 -11
  91. package/dist/es2019/utils/color-utils.js +8 -34
  92. package/dist/es2019/utils/custom-theme-loading-utils.js +2 -8
  93. package/dist/es2019/utils/generate-custom-color-ramp.js +7 -15
  94. package/dist/es2019/utils/get-alpha.js +7 -0
  95. package/dist/es2019/utils/get-closest-color-index.js +14 -0
  96. package/dist/es2019/utils/get-css-custom-property.js +23 -0
  97. package/dist/es2019/utils/get-fully-qualified-token-id.js +11 -0
  98. package/dist/es2019/utils/get-theme-override-preferences.js +4 -0
  99. package/dist/es2019/utils/get-theme-preferences.js +1 -4
  100. package/dist/es2019/utils/get-token-id.js +18 -0
  101. package/dist/es2019/utils/hct-color-utils/argb-from-rgb.js +6 -0
  102. package/dist/es2019/utils/hct-color-utils/clamp-double.js +14 -0
  103. package/dist/es2019/utils/hct-color-utils/clamp-int.js +14 -0
  104. package/dist/es2019/utils/hct-color-utils/color-utils.js +7 -45
  105. package/dist/es2019/utils/hct-color-utils/delinearized.js +20 -0
  106. package/dist/es2019/utils/hct-color-utils/hct.js +3 -76
  107. package/dist/es2019/utils/hct-color-utils/lerp.js +8 -0
  108. package/dist/es2019/utils/hct-color-utils/linearized.js +16 -0
  109. package/dist/es2019/utils/hct-color-utils/math-utils.js +6 -105
  110. package/dist/es2019/utils/hct-color-utils/matrix-multiply.js +9 -0
  111. package/dist/es2019/utils/hct-color-utils/sanitize-degrees-double.js +13 -0
  112. package/dist/es2019/utils/hct-color-utils/signum.js +14 -0
  113. package/dist/es2019/utils/hct-color-utils/viewing-conditions.js +78 -0
  114. package/dist/es2019/utils/hex-to-rgba-values.js +9 -0
  115. package/dist/es2019/utils/hsl-to-rgb.js +8 -0
  116. package/dist/es2019/utils/is-valid-brand-hex.js +1 -0
  117. package/dist/es2019/utils/limit-size-of-custom-style-elements.js +8 -0
  118. package/dist/es2019/utils/load-theme-css.js +7 -0
  119. package/dist/es2019/utils/relative-luminance-w3-c.js +12 -0
  120. package/dist/es2019/utils/rgb-to-hex.js +3 -0
  121. package/dist/es2019/utils/theme-loading.js +3 -8
  122. package/dist/es2019/utils/token-ids.js +3 -54
  123. package/dist/esm/artifacts/replacement-mapping.js +5 -2
  124. package/dist/esm/artifacts/tokens-raw/atlassian-motion.js +3 -3
  125. package/dist/esm/custom-theme.js +4 -58
  126. package/dist/esm/entry-points/token-metadata.codegen.js +1 -10
  127. package/dist/esm/get-custom-theme-styles.js +52 -0
  128. package/dist/esm/get-global-theme.js +1 -1
  129. package/dist/esm/get-theme-html-attrs.js +1 -1
  130. package/dist/esm/get-theme-styles.js +4 -3
  131. package/dist/esm/load-custom-theme-styles.js +1 -1
  132. package/dist/esm/set-global-theme.js +3 -2
  133. package/dist/esm/theme-color-modes.js +7 -0
  134. package/dist/esm/theme-config.js +6 -17
  135. package/dist/esm/theme-ids.js +7 -0
  136. package/dist/esm/theme-state-transformer.js +1 -1
  137. package/dist/esm/utils/color-detection.js +3 -11
  138. package/dist/esm/utils/color-utils.js +8 -40
  139. package/dist/esm/utils/custom-theme-loading-utils.js +2 -11
  140. package/dist/esm/utils/generate-custom-color-ramp.js +7 -15
  141. package/dist/esm/utils/get-alpha.js +7 -0
  142. package/dist/esm/utils/get-closest-color-index.js +14 -0
  143. package/dist/esm/utils/get-css-custom-property.js +26 -0
  144. package/dist/esm/utils/get-fully-qualified-token-id.js +13 -0
  145. package/dist/esm/utils/get-theme-override-preferences.js +5 -0
  146. package/dist/esm/utils/get-theme-preferences.js +1 -4
  147. package/dist/esm/utils/get-token-id.js +20 -0
  148. package/dist/esm/utils/hct-color-utils/argb-from-rgb.js +6 -0
  149. package/dist/esm/utils/hct-color-utils/clamp-double.js +14 -0
  150. package/dist/esm/utils/hct-color-utils/clamp-int.js +14 -0
  151. package/dist/esm/utils/hct-color-utils/color-utils.js +7 -45
  152. package/dist/esm/utils/hct-color-utils/delinearized.js +20 -0
  153. package/dist/esm/utils/hct-color-utils/hct.js +5 -87
  154. package/dist/esm/utils/hct-color-utils/lerp.js +8 -0
  155. package/dist/esm/utils/hct-color-utils/linearized.js +16 -0
  156. package/dist/esm/utils/hct-color-utils/math-utils.js +6 -105
  157. package/dist/esm/utils/hct-color-utils/matrix-multiply.js +9 -0
  158. package/dist/esm/utils/hct-color-utils/sanitize-degrees-double.js +13 -0
  159. package/dist/esm/utils/hct-color-utils/signum.js +14 -0
  160. package/dist/esm/utils/hct-color-utils/viewing-conditions.js +89 -0
  161. package/dist/esm/utils/hex-to-rgba-values.js +9 -0
  162. package/dist/esm/utils/hsl-to-rgb.js +12 -0
  163. package/dist/esm/utils/is-valid-brand-hex.js +3 -0
  164. package/dist/esm/utils/limit-size-of-custom-style-elements.js +10 -0
  165. package/dist/esm/utils/load-theme-css.js +25 -0
  166. package/dist/esm/utils/relative-luminance-w3-c.js +12 -0
  167. package/dist/esm/utils/rgb-to-hex.js +3 -0
  168. package/dist/esm/utils/theme-loading.js +3 -24
  169. package/dist/esm/utils/token-ids.js +3 -61
  170. package/dist/types/artifacts/replacement-mapping.d.ts +1 -1
  171. package/dist/types/artifacts/tokens-raw/atlassian-motion.d.ts +1 -1
  172. package/dist/types/artifacts/types-internal.d.ts +2 -2
  173. package/dist/types/artifacts/types.d.ts +2 -2
  174. package/dist/types/custom-theme.d.ts +1 -20
  175. package/dist/types/entry-points/css-type-schema.codegen.d.ts +2 -2
  176. package/dist/types/entry-points/token-metadata.codegen.d.ts +1 -1
  177. package/dist/types/get-custom-theme-styles.d.ts +16 -0
  178. package/dist/types/get-global-theme.d.ts +1 -1
  179. package/dist/types/theme-color-modes.d.ts +7 -0
  180. package/dist/types/theme-config.d.ts +4 -14
  181. package/dist/types/theme-ids.d.ts +7 -0
  182. package/dist/types/theme-state-transformer.d.ts +1 -1
  183. package/dist/types/utils/color-detection.d.ts +1 -6
  184. package/dist/types/utils/color-utils.d.ts +5 -5
  185. package/dist/types/utils/custom-theme-loading-utils.d.ts +1 -2
  186. package/dist/types/utils/generate-custom-color-ramp.d.ts +1 -2
  187. package/dist/types/utils/get-alpha.d.ts +1 -0
  188. package/dist/types/utils/get-closest-color-index.d.ts +2 -0
  189. package/dist/types/utils/get-css-custom-property.d.ts +15 -0
  190. package/dist/types/utils/get-fully-qualified-token-id.d.ts +11 -0
  191. package/dist/types/utils/get-theme-override-preferences.d.ts +2 -0
  192. package/dist/types/utils/get-theme-preferences.d.ts +1 -1
  193. package/dist/types/utils/get-token-id.d.ts +15 -0
  194. package/dist/types/utils/hct-color-utils/argb-from-rgb.d.ts +4 -0
  195. package/dist/types/utils/hct-color-utils/clamp-double.d.ts +7 -0
  196. package/dist/types/utils/hct-color-utils/clamp-int.d.ts +7 -0
  197. package/dist/types/utils/hct-color-utils/color-utils.d.ts +3 -23
  198. package/dist/types/utils/hct-color-utils/delinearized.d.ts +9 -0
  199. package/dist/types/utils/hct-color-utils/hct.d.ts +3 -48
  200. package/dist/types/utils/hct-color-utils/lerp.d.ts +6 -0
  201. package/dist/types/utils/hct-color-utils/linearized.d.ts +9 -0
  202. package/dist/types/utils/hct-color-utils/math-utils.d.ts +6 -60
  203. package/dist/types/utils/hct-color-utils/matrix-multiply.d.ts +4 -0
  204. package/dist/types/utils/hct-color-utils/sanitize-degrees-double.d.ts +7 -0
  205. package/dist/types/utils/hct-color-utils/signum.d.ts +6 -0
  206. package/dist/types/utils/hct-color-utils/viewing-conditions.d.ts +47 -0
  207. package/dist/types/utils/hex-to-rgba-values.d.ts +6 -0
  208. package/dist/types/utils/hsl-to-rgb.d.ts +1 -0
  209. package/dist/types/utils/is-valid-brand-hex.d.ts +1 -0
  210. package/dist/types/utils/limit-size-of-custom-style-elements.d.ts +1 -0
  211. package/dist/types/utils/load-theme-css.d.ts +2 -0
  212. package/dist/types/utils/relative-luminance-w3-c.d.ts +1 -0
  213. package/dist/types/utils/rgb-to-hex.d.ts +1 -0
  214. package/dist/types/utils/theme-loading.d.ts +1 -1
  215. package/dist/types/utils/token-ids.d.ts +3 -41
  216. package/dist/types-ts4.5/artifacts/replacement-mapping.d.ts +1 -1
  217. package/dist/types-ts4.5/artifacts/tokens-raw/atlassian-motion.d.ts +1 -1
  218. package/dist/types-ts4.5/artifacts/types-internal.d.ts +2 -2
  219. package/dist/types-ts4.5/artifacts/types.d.ts +2 -2
  220. package/dist/types-ts4.5/custom-theme.d.ts +1 -20
  221. package/dist/types-ts4.5/entry-points/css-type-schema.codegen.d.ts +2 -2
  222. package/dist/types-ts4.5/entry-points/token-metadata.codegen.d.ts +1 -1
  223. package/dist/types-ts4.5/get-custom-theme-styles.d.ts +16 -0
  224. package/dist/types-ts4.5/get-global-theme.d.ts +1 -1
  225. package/dist/types-ts4.5/theme-color-modes.d.ts +11 -0
  226. package/dist/types-ts4.5/theme-config.d.ts +4 -29
  227. package/dist/types-ts4.5/theme-ids.d.ts +18 -0
  228. package/dist/types-ts4.5/theme-state-transformer.d.ts +1 -1
  229. package/dist/types-ts4.5/utils/color-detection.d.ts +1 -6
  230. package/dist/types-ts4.5/utils/color-utils.d.ts +5 -9
  231. package/dist/types-ts4.5/utils/custom-theme-loading-utils.d.ts +1 -2
  232. package/dist/types-ts4.5/utils/generate-custom-color-ramp.d.ts +1 -2
  233. package/dist/types-ts4.5/utils/get-alpha.d.ts +1 -0
  234. package/dist/types-ts4.5/utils/get-closest-color-index.d.ts +2 -0
  235. package/dist/types-ts4.5/utils/get-css-custom-property.d.ts +15 -0
  236. package/dist/types-ts4.5/utils/get-fully-qualified-token-id.d.ts +11 -0
  237. package/dist/types-ts4.5/utils/get-theme-override-preferences.d.ts +2 -0
  238. package/dist/types-ts4.5/utils/get-theme-preferences.d.ts +1 -1
  239. package/dist/types-ts4.5/utils/get-token-id.d.ts +15 -0
  240. package/dist/types-ts4.5/utils/hct-color-utils/argb-from-rgb.d.ts +4 -0
  241. package/dist/types-ts4.5/utils/hct-color-utils/clamp-double.d.ts +7 -0
  242. package/dist/types-ts4.5/utils/hct-color-utils/clamp-int.d.ts +7 -0
  243. package/dist/types-ts4.5/utils/hct-color-utils/color-utils.d.ts +3 -23
  244. package/dist/types-ts4.5/utils/hct-color-utils/delinearized.d.ts +9 -0
  245. package/dist/types-ts4.5/utils/hct-color-utils/hct.d.ts +3 -48
  246. package/dist/types-ts4.5/utils/hct-color-utils/lerp.d.ts +6 -0
  247. package/dist/types-ts4.5/utils/hct-color-utils/linearized.d.ts +9 -0
  248. package/dist/types-ts4.5/utils/hct-color-utils/math-utils.d.ts +6 -60
  249. package/dist/types-ts4.5/utils/hct-color-utils/matrix-multiply.d.ts +4 -0
  250. package/dist/types-ts4.5/utils/hct-color-utils/sanitize-degrees-double.d.ts +7 -0
  251. package/dist/types-ts4.5/utils/hct-color-utils/signum.d.ts +6 -0
  252. package/dist/types-ts4.5/utils/hct-color-utils/viewing-conditions.d.ts +47 -0
  253. package/dist/types-ts4.5/utils/hex-to-rgba-values.d.ts +6 -0
  254. package/dist/types-ts4.5/utils/hsl-to-rgb.d.ts +5 -0
  255. package/dist/types-ts4.5/utils/is-valid-brand-hex.d.ts +1 -0
  256. package/dist/types-ts4.5/utils/limit-size-of-custom-style-elements.d.ts +1 -0
  257. package/dist/types-ts4.5/utils/load-theme-css.d.ts +2 -0
  258. package/dist/types-ts4.5/utils/relative-luminance-w3-c.d.ts +1 -0
  259. package/dist/types-ts4.5/utils/rgb-to-hex.d.ts +1 -0
  260. package/dist/types-ts4.5/utils/theme-loading.d.ts +1 -1
  261. package/dist/types-ts4.5/utils/token-ids.d.ts +3 -41
  262. package/package.json +7 -7
  263. package/offerings.json +0 -44
@@ -1,6 +1,3 @@
1
- export declare const isValidBrandHex: (hex: string) => boolean;
2
- export declare function rgbToHex(r: number, g: number, b: number): string;
3
- export declare function getAlpha(hex: string): number;
4
1
  export declare function hexToRgbA(hex: string): [
5
2
  number,
6
3
  number,
@@ -17,11 +14,10 @@ export declare function hexToHSL(hex: string): [
17
14
  number,
18
15
  number
19
16
  ];
20
- export declare function HSLToRGB(h: number, s: number, l: number): [
21
- number,
22
- number,
23
- number
24
- ];
25
- export declare function relativeLuminanceW3C(r: number, g: number, b: number): number;
26
17
  export declare function getContrastRatio(foreground: string, background: string): number;
27
18
  export declare function deltaE(rgbA: number[], rgbB: number[]): number;
19
+ export { isValidBrandHex } from './is-valid-brand-hex';
20
+ export { rgbToHex } from './rgb-to-hex';
21
+ export { getAlpha } from './get-alpha';
22
+ export { HSLToRGB } from './hsl-to-rgb';
23
+ export { relativeLuminanceW3C } from './relative-luminance-w3-c';
@@ -3,8 +3,7 @@ import { type ThemeColorModes, type ThemeOptionsSchema } from '../theme-config';
3
3
  type Token = keyof typeof tokens;
4
4
  type ThemeAttributeId = 'light' | 'dark';
5
5
  export declare function findMissingCustomStyleElements(UNSAFE_themeOptions: ThemeOptionsSchema, mode: ThemeColorModes): ThemeAttributeId[];
6
- export declare function limitSizeOfCustomStyleElements(sizeThreshold: number): void;
7
6
  export declare function reduceTokenMap(tokenMap: {
8
7
  [key in Token]?: number | string;
9
8
  }, themeRamp: string[]): string;
10
- export {};
9
+ export { limitSizeOfCustomStyleElements } from './limit-size-of-custom-style-elements';
@@ -5,7 +5,6 @@ type TokenMap = {
5
5
  [key in Token]?: number | string;
6
6
  };
7
7
  type Mode = 'light' | 'dark';
8
- export declare const getClosestColorIndex: (themeRamp: CSSColor[], brandColor: CSSColor) => number;
9
8
  export declare const generateColors: (brandColor: CSSColor) => {
10
9
  ramp: CSSColor[];
11
10
  replacedColor: CSSColor;
@@ -16,4 +15,4 @@ export declare const generateTokenMap: (brandColor: CSSColor, mode: ThemeColorMo
16
15
  export declare const generateTokenMapWithContrastCheck: (brandColor: CSSColor, mode: ThemeColorModes, themeRamp?: CSSColor[]) => {
17
16
  [mode in Mode]?: TokenMap;
18
17
  };
19
- export {};
18
+ export { getClosestColorIndex } from './get-closest-color-index';
@@ -0,0 +1 @@
1
+ export declare function getAlpha(hex: string): number;
@@ -0,0 +1,2 @@
1
+ import { type CSSColor } from '../theme-config';
2
+ export declare const getClosestColorIndex: (themeRamp: CSSColor[], brandColor: CSSColor) => number;
@@ -0,0 +1,15 @@
1
+ /**
2
+ * Transforms a style dictionary token path to a CSS custom property.
3
+ *
4
+ * A css prefix will be prepended and all [default] key words will be omitted
5
+ * from the path
6
+ *
7
+ * @example <caption>Passing a path as an array</caption>
8
+ * // Returns ds-background-bold
9
+ * getCSSCustomProperty(['color', 'background', 'bold', '[default]'])
10
+ *
11
+ * @example <caption>Passing a path as a string</caption>
12
+ * // Returns ds-background-bold
13
+ * getCSSCustomProperty('color.background.bold.[default]')
14
+ */
15
+ export declare const getCSSCustomProperty: (path: string | string[]) => string;
@@ -0,0 +1,11 @@
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 declare const getFullyQualifiedTokenId: (path: string[]) => string;
@@ -0,0 +1,2 @@
1
+ import { type ThemeIdsWithOverrides, type ThemeState } from '../theme-config';
2
+ export declare const getThemeOverridePreferences: (_themeState: ThemeState) => ThemeIdsWithOverrides[];
@@ -1,3 +1,3 @@
1
1
  import { type ThemeIdsWithOverrides, type ThemeState } from '../theme-config';
2
2
  export declare const getThemePreferences: (themeState: ThemeState) => ThemeIdsWithOverrides[];
3
- export declare const getThemeOverridePreferences: (_themeState: ThemeState) => ThemeIdsWithOverrides[];
3
+ export { getThemeOverridePreferences } from './get-theme-override-preferences';
@@ -0,0 +1,15 @@
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 declare const getTokenId: (path: string | string[]) => string;
@@ -0,0 +1,4 @@
1
+ /**
2
+ * Converts a color from RGB components to ARGB format.
3
+ */
4
+ export declare function argbFromRgb(red: number, green: number, blue: number): number;
@@ -0,0 +1,7 @@
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 declare function clampDouble(min: number, max: number, input: number): number;
@@ -0,0 +1,7 @@
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 declare function clampInt(min: number, max: number, input: number): number;
@@ -2,10 +2,6 @@
2
2
  * Below lines are copied from @material/material-color-utilities.
3
3
  * Do not modify it.
4
4
  */
5
- /**
6
- * Converts a color from RGB components to ARGB format.
7
- */
8
- export declare function argbFromRgb(red: number, green: number, blue: number): number;
9
5
  /**
10
6
  * Converts a color from linear RGB components to ARGB format.
11
7
  */
@@ -53,24 +49,6 @@ export declare function yFromLstar(lstar: number): number;
53
49
  * @return L* in L*a*b*
54
50
  */
55
51
  export declare function lstarFromY(y: number): number;
56
- /**
57
- * Linearizes an RGB component.
58
- *
59
- * @param rgbComponent 0 <= rgb_component <= 255, represents R/G/B
60
- * channel
61
- * @return 0.0 <= output <= 100.0, color channel converted to
62
- * linear RGB space
63
- */
64
- export declare function linearized(rgbComponent: number): number;
65
- /**
66
- * Delinearizes an RGB component.
67
- *
68
- * @param rgbComponent 0.0 <= rgb_component <= 100.0, represents
69
- * linear R/G/B channel
70
- * @return 0 <= output <= 255, color channel converted to regular
71
- * RGB space
72
- */
73
- export declare function delinearized(rgbComponent: number): number;
74
52
  /**
75
53
  * Returns the standard white point; white on a sunny day.
76
54
  *
@@ -105,4 +83,6 @@ export declare function rgbaFromArgb(argb: number): Rgba;
105
83
  * @returns ARGB representation of a int32 color.
106
84
  */
107
85
  export declare function argbFromRgba({ r, g, b, a }: Rgba): number;
108
- export {};
86
+ export { argbFromRgb } from './argb-from-rgb';
87
+ export { linearized } from './linearized';
88
+ export { delinearized } from './delinearized';
@@ -0,0 +1,9 @@
1
+ /**
2
+ * Delinearizes an RGB component.
3
+ *
4
+ * @param rgbComponent 0.0 <= rgb_component <= 100.0, represents
5
+ * linear R/G/B channel
6
+ * @return 0 <= output <= 255, color channel converted to regular
7
+ * RGB space
8
+ */
9
+ export declare function delinearized(rgbComponent: number): number;
@@ -2,6 +2,7 @@
2
2
  * Below lines are copied from @material/material-color-utilities.
3
3
  * Do not modify it.
4
4
  */
5
+ import { ViewingConditions } from './viewing-conditions';
5
6
  /**
6
7
  * A color system built using CAM16 hue and chroma, and L* from
7
8
  * L*a*b*.
@@ -23,7 +24,6 @@
23
24
  * will appear as in different lighting environments.
24
25
  */
25
26
  export declare class Hct {
26
- private argb;
27
27
  /**
28
28
  * @param hue 0 <= hue < 360; invalid values are corrected.
29
29
  * @param chroma 0 <= chroma < ?; Informally, colorfulness. The color
@@ -35,6 +35,7 @@ export declare class Hct {
35
35
  internalHue: number;
36
36
  internalChroma: number;
37
37
  internalTone: number;
38
+ private argb;
38
39
  static from(hue: number, chroma: number, tone: number): Hct;
39
40
  /**
40
41
  * @param argb ARGB representation of a color.
@@ -88,50 +89,4 @@ export declare class Hct {
88
89
  */
89
90
  inViewingConditions(vc: ViewingConditions): Hct;
90
91
  }
91
- export declare class ViewingConditions {
92
- n: number;
93
- aw: number;
94
- nbb: number;
95
- ncb: number;
96
- c: number;
97
- nc: number;
98
- rgbD: number[];
99
- fl: number;
100
- fLRoot: number;
101
- z: number;
102
- /**
103
- * sRGB-like viewing conditions.
104
- */
105
- static DEFAULT: ViewingConditions;
106
- /**
107
- * Create ViewingConditions from a simple, physically relevant, set of
108
- * parameters.
109
- *
110
- * @param whitePoint White point, measured in the XYZ color space.
111
- * default = D65, or sunny day afternoon
112
- * @param adaptingLuminance The luminance of the adapting field. Informally,
113
- * how bright it is in the room where the color is viewed. Can be
114
- * calculated from lux by multiplying lux by 0.0586. default = 11.72,
115
- * or 200 lux.
116
- * @param backgroundLstar The lightness of the area surrounding the color.
117
- * measured by L* in L*a*b*. default = 50.0
118
- * @param surround A general description of the lighting surrounding the
119
- * color. 0 is pitch dark, like watching a movie in a theater. 1.0 is a
120
- * dimly light room, like watching TV at home at night. 2.0 means there
121
- * is no difference between the lighting on the color and around it.
122
- * default = 2.0
123
- * @param discountingIlluminant Whether the eye accounts for the tint of the
124
- * ambient lighting, such as knowing an apple is still red in green light.
125
- * default = false, the eye does not perform this process on
126
- * self-luminous objects like displays.
127
- */
128
- static make(whitePoint?: number[], adaptingLuminance?: number, backgroundLstar?: number, surround?: number, discountingIlluminant?: boolean): ViewingConditions;
129
- /**
130
- * Parameters are intermediate values of the CAM16 conversion process. Their
131
- * names are shorthand for technical color science terminology, this class
132
- * would not benefit from documenting them individually. A brief overview
133
- * is available in the CAM16 specification, and a complete overview requires
134
- * a color science textbook, such as Fairchild's Color Appearance Models.
135
- */
136
- private constructor();
137
- }
92
+ export { ViewingConditions } from './viewing-conditions';
@@ -0,0 +1,6 @@
1
+ /**
2
+ * The linear interpolation function.
3
+ *
4
+ * @return start if amount = 0 and stop if amount = 1
5
+ */
6
+ export declare function lerp(start: number, stop: number, amount: number): number;
@@ -0,0 +1,9 @@
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 declare function linearized(rgbComponent: number): number;
@@ -1,60 +1,6 @@
1
- /**
2
- * Below lines are copied from @material/material-color-utilities.
3
- * Do not modify it.
4
- */
5
- /**
6
- * @license
7
- * Copyright 2021 Google LLC
8
- *
9
- * Licensed under the Apache License, Version 2.0 (the "License");
10
- * you may not use this file except in compliance with the License.
11
- * You may obtain a copy of the License at
12
- *
13
- * http://www.apache.org/licenses/LICENSE-2.0
14
- *
15
- * Unless required by applicable law or agreed to in writing, software
16
- * distributed under the License is distributed on an "AS IS" BASIS,
17
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
18
- * See the License for the specific language governing permissions and
19
- * limitations under the License.
20
- */
21
- /**
22
- * Utility methods for mathematical operations.
23
- */
24
- /**
25
- * The signum function.
26
- *
27
- * @return 1 if num > 0, -1 if num < 0, and 0 if num = 0
28
- */
29
- export declare function signum(num: number): number;
30
- /**
31
- * The linear interpolation function.
32
- *
33
- * @return start if amount = 0 and stop if amount = 1
34
- */
35
- export declare function lerp(start: number, stop: number, amount: number): number;
36
- /**
37
- * Clamps an integer between two integers.
38
- *
39
- * @return input when min <= input <= max, and either min or max
40
- * otherwise.
41
- */
42
- export declare function clampInt(min: number, max: number, input: number): number;
43
- /**
44
- * Clamps an integer between two floating-point numbers.
45
- *
46
- * @return input when min <= input <= max, and either min or max
47
- * otherwise.
48
- */
49
- export declare function clampDouble(min: number, max: number, input: number): number;
50
- /**
51
- * Sanitizes a degree measure as a floating-point number.
52
- *
53
- * @return a degree measure between 0.0 (inclusive) and 360.0
54
- * (exclusive).
55
- */
56
- export declare function sanitizeDegreesDouble(degrees: number): number;
57
- /**
58
- * Multiplies a 1x3 row vector with a 3x3 matrix.
59
- */
60
- export declare function matrixMultiply(row: number[], matrix: number[][]): number[];
1
+ export { signum } from './signum';
2
+ export { lerp } from './lerp';
3
+ export { clampInt } from './clamp-int';
4
+ export { clampDouble } from './clamp-double';
5
+ export { sanitizeDegreesDouble } from './sanitize-degrees-double';
6
+ export { matrixMultiply } from './matrix-multiply';
@@ -0,0 +1,4 @@
1
+ /**
2
+ * Multiplies a 1x3 row vector with a 3x3 matrix.
3
+ */
4
+ export declare function matrixMultiply(row: number[], matrix: number[][]): number[];
@@ -0,0 +1,7 @@
1
+ /**
2
+ * Sanitizes a degree measure as a floating-point number.
3
+ *
4
+ * @return a degree measure between 0.0 (inclusive) and 360.0
5
+ * (exclusive).
6
+ */
7
+ export declare function sanitizeDegreesDouble(degrees: number): number;
@@ -0,0 +1,6 @@
1
+ /**
2
+ * The signum function.
3
+ *
4
+ * @return 1 if num > 0, -1 if num < 0, and 0 if num = 0
5
+ */
6
+ export declare function signum(num: number): number;
@@ -0,0 +1,47 @@
1
+ export declare class ViewingConditions {
2
+ /**
3
+ * sRGB-like viewing conditions.
4
+ */
5
+ static DEFAULT: ViewingConditions;
6
+ /**
7
+ * Create ViewingConditions from a simple, physically relevant, set of
8
+ * parameters.
9
+ *
10
+ * @param whitePoint White point, measured in the XYZ color space.
11
+ * default = D65, or sunny day afternoon
12
+ * @param adaptingLuminance The luminance of the adapting field. Informally,
13
+ * how bright it is in the room where the color is viewed. Can be
14
+ * calculated from lux by multiplying lux by 0.0586. default = 11.72,
15
+ * or 200 lux.
16
+ * @param backgroundLstar The lightness of the area surrounding the color.
17
+ * measured by L* in L*a*b*. default = 50.0
18
+ * @param surround A general description of the lighting surrounding the
19
+ * color. 0 is pitch dark, like watching a movie in a theater. 1.0 is a
20
+ * dimly light room, like watching TV at home at night. 2.0 means there
21
+ * is no difference between the lighting on the color and around it.
22
+ * default = 2.0
23
+ * @param discountingIlluminant Whether the eye accounts for the tint of the
24
+ * ambient lighting, such as knowing an apple is still red in green light.
25
+ * default = false, the eye does not perform this process on
26
+ * self-luminous objects like displays.
27
+ */
28
+ static make(whitePoint?: number[], adaptingLuminance?: number, backgroundLstar?: number, surround?: number, discountingIlluminant?: boolean): ViewingConditions;
29
+ /**
30
+ * Parameters are intermediate values of the CAM16 conversion process. Their
31
+ * names are shorthand for technical color science terminology, this class
32
+ * would not benefit from documenting them individually. A brief overview
33
+ * is available in the CAM16 specification, and a complete overview requires
34
+ * a color science textbook, such as Fairchild's Color Appearance Models.
35
+ */
36
+ n: number;
37
+ aw: number;
38
+ nbb: number;
39
+ ncb: number;
40
+ c: number;
41
+ nc: number;
42
+ rgbD: number[];
43
+ fl: number;
44
+ fLRoot: number;
45
+ z: number;
46
+ private constructor();
47
+ }
@@ -0,0 +1,6 @@
1
+ export declare const hexToRGBAValues: (hex: string) => {
2
+ r: number;
3
+ g: number;
4
+ b: number;
5
+ a: number;
6
+ };
@@ -0,0 +1,5 @@
1
+ export declare function HSLToRGB(h: number, s: number, l: number): [
2
+ number,
3
+ number,
4
+ number
5
+ ];
@@ -0,0 +1 @@
1
+ export declare const isValidBrandHex: (hex: string) => boolean;
@@ -0,0 +1 @@
1
+ export declare function limitSizeOfCustomStyleElements(sizeThreshold: number): void;
@@ -0,0 +1,2 @@
1
+ import { type ThemeIdsWithOverrides } from '../theme-config';
2
+ export declare const loadThemeCss: (themeId: ThemeIdsWithOverrides) => Promise<string>;
@@ -0,0 +1 @@
1
+ export declare function relativeLuminanceW3C(r: number, g: number, b: number): number;
@@ -0,0 +1 @@
1
+ export declare function rgbToHex(r: number, g: number, b: number): string;
@@ -1,5 +1,5 @@
1
1
  import { type ThemeIdsWithOverrides } from '../theme-config';
2
2
  export declare const loadAndAppendThemeCss: (themeId: ThemeIdsWithOverrides) => Promise<void>;
3
- export declare const loadThemeCss: (themeId: ThemeIdsWithOverrides) => Promise<string>;
4
3
  export declare const darkModeMediaQuery = "(prefers-color-scheme: dark)";
5
4
  export declare const moreContrastMediaQuery = "(prefers-contrast: more)";
5
+ export { loadThemeCss } from './load-theme-css';
@@ -1,41 +1,3 @@
1
- /**
2
- * Transforms a style dictionary token path to a CSS custom property.
3
- *
4
- * A css prefix will be prepended and all [default] key words will be omitted
5
- * from the path
6
- *
7
- * @example <caption>Passing a path as an array</caption>
8
- * // Returns ds-background-bold
9
- * getCSSCustomProperty(['color', 'background', 'bold', '[default]'])
10
- *
11
- * @example <caption>Passing a path as a string</caption>
12
- * // Returns ds-background-bold
13
- * getCSSCustomProperty('color.background.bold.[default]')
14
- */
15
- export declare const getCSSCustomProperty: (path: string | string[]) => string;
16
- /**
17
- * Transforms a style dictionary token path to a shorthand token id
18
- * These ids will be typically be how tokens are interacted with via typescript and css
19
- *
20
- * All [default] key words will be omitted from the path
21
- *
22
- * @example <caption>Passing a path as an array</caption>
23
- * // Returns color.background.bold
24
- * getTokenId(['color', 'background', 'bold', '[default]'])
25
- *
26
- * @example <caption>Passing a path as a string</caption>
27
- * // Returns color.background.bold
28
- * getTokenId('color.background.bold.[default]')
29
- */
30
- export declare const getTokenId: (path: string | string[]) => string;
31
- /**
32
- * Transforms a style dictionary token path to a fully qualified token id
33
- * These Ids are intended to be used internal to this package by style-dictionary
34
- *
35
- * [default] key words will NOT be omitted from the path
36
- *
37
- * @example <caption>Passing a path as a string</caption>
38
- * // Returns color.background.bold.[default]
39
- * getFullyQualifiedTokenId(['color', 'background', 'bold', '[default]'])
40
- */
41
- export declare const getFullyQualifiedTokenId: (path: string[]) => string;
1
+ export { getCSSCustomProperty } from './get-css-custom-property';
2
+ export { getTokenId } from './get-token-id';
3
+ export { getFullyQualifiedTokenId } from './get-fully-qualified-token-id';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/tokens",
3
- "version": "13.0.2",
3
+ "version": "13.0.4",
4
4
  "description": "Design tokens are the single source of truth to name and store design decisions.",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -54,29 +54,29 @@
54
54
  "@atlaskit/button": "^23.11.0",
55
55
  "@atlaskit/calendar": "^17.2.0",
56
56
  "@atlaskit/checkbox": "^17.3.0",
57
- "@atlaskit/code": "^17.4.0",
57
+ "@atlaskit/code": "^17.5.0",
58
58
  "@atlaskit/css": "^0.19.0",
59
59
  "@atlaskit/docs": "^11.8.0",
60
60
  "@atlaskit/dropdown-menu": "^16.8.0",
61
61
  "@atlaskit/dynamic-table": "^18.4.0",
62
62
  "@atlaskit/form": "^15.5.0",
63
63
  "@atlaskit/heading": "^5.4.0",
64
- "@atlaskit/icon": "^34.3.0",
64
+ "@atlaskit/icon": "^34.4.0",
65
65
  "@atlaskit/inline-message": "^15.6.0",
66
66
  "@atlaskit/link": "^3.4.0",
67
67
  "@atlaskit/lozenge": "^13.8.0",
68
68
  "@atlaskit/popup": "^4.17.0",
69
69
  "@atlaskit/primitives": "^19.0.0",
70
- "@atlaskit/radio": "^8.5.0",
70
+ "@atlaskit/radio": "^8.6.0",
71
71
  "@atlaskit/section-message": "^8.12.0",
72
72
  "@atlaskit/select": "^21.10.0",
73
- "@atlaskit/tag": "^14.12.0",
73
+ "@atlaskit/tag": "^14.13.0",
74
74
  "@atlaskit/textarea": "^8.3.0",
75
75
  "@atlaskit/textfield": "^8.3.0",
76
76
  "@atlaskit/theme": "^23.2.0",
77
- "@atlaskit/tooltip": "^21.2.0",
77
+ "@atlaskit/tooltip": "^22.0.0",
78
78
  "@atlassian/codegen": "^0.2.0",
79
- "@atlassian/feature-flags-test-utils": "^1.0.0",
79
+ "@atlassian/feature-flags-test-utils": "^1.1.0",
80
80
  "@atlassian/react-compiler-gating": "workspace:^",
81
81
  "@atlassian/structured-docs-types": "workspace:^",
82
82
  "@atlassian/ts-loader": "^0.1.0",
package/offerings.json DELETED
@@ -1,44 +0,0 @@
1
- [
2
- {
3
- "name": "token",
4
- "package": "@atlaskit/tokens",
5
- "import": {
6
- "name": "token",
7
- "package": "@atlaskit/tokens",
8
- "type": "named"
9
- },
10
- "type": "function",
11
- "keywords": [
12
- "token",
13
- "design",
14
- "system",
15
- "color",
16
- "spacing",
17
- "typography",
18
- "radius",
19
- "theme",
20
- "css",
21
- "style",
22
- "variable"
23
- ],
24
- "categories": ["tokens"],
25
- "shortDescription": "Design tokens provide consistent, semantic values for colors, spacing, typography, and other design properties across the Atlassian Design System. Use tokens instead of hardcoded values to ensure consistency and proper theming.",
26
- "status": "general-availability",
27
- "accessibilityGuidelines": [
28
- "Use color tokens to ensure proper contrast ratios",
29
- "Test color combinations for accessibility compliance",
30
- "Use semantic color names (success, warning, danger) for better meaning"
31
- ],
32
- "usageGuidelines": [
33
- "AVOID hardcoding any CSS values where a token exists for that type; in many cases you may be forced to use a token",
34
- "Use the `token()` function with CSS-in-JS",
35
- "Use semantic token names for better maintainability"
36
- ],
37
- "generativeInstructions": [
38
- "./docs/ai/color-instructions.md",
39
- "./docs/ai/spacing-instructions.md",
40
- "./docs/ai/border-radius-instructions.md"
41
- ],
42
- "examples": ["./examples/ai/basic.tsx"]
43
- }
44
- ]