@atlaskit/tokens 0.13.5 → 1.0.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 (187) hide show
  1. package/CHANGELOG.md +289 -0
  2. package/README.md +7 -16
  3. package/dist/cjs/artifacts/palettes-raw/legacy-palette.js +0 -1
  4. package/dist/cjs/artifacts/palettes-raw/palette.js +0 -1
  5. package/dist/cjs/artifacts/palettes-raw/spacing-scale.js +0 -1
  6. package/dist/cjs/artifacts/palettes-raw/typography-palette.js +0 -1
  7. package/dist/cjs/artifacts/replacement-mapping.js +2 -402
  8. package/dist/cjs/artifacts/theme-import-map.js +56 -0
  9. package/dist/cjs/artifacts/themes/atlassian-dark.js +13 -0
  10. package/dist/cjs/artifacts/themes/atlassian-legacy-dark.js +13 -0
  11. package/dist/cjs/artifacts/themes/atlassian-legacy-light.js +13 -0
  12. package/dist/cjs/artifacts/themes/atlassian-light.js +13 -0
  13. package/dist/cjs/artifacts/themes/atlassian-spacing.js +13 -0
  14. package/dist/cjs/artifacts/themes/atlassian-typography.js +13 -0
  15. package/dist/cjs/artifacts/token-default-values.js +2 -104
  16. package/dist/cjs/artifacts/token-names.js +2 -104
  17. package/dist/cjs/artifacts/tokens-raw/atlassian-dark.js +1354 -4261
  18. package/dist/cjs/artifacts/tokens-raw/atlassian-legacy-dark.js +1352 -4259
  19. package/dist/cjs/artifacts/tokens-raw/atlassian-legacy-light.js +1396 -4283
  20. package/dist/cjs/artifacts/tokens-raw/atlassian-light.js +1365 -4252
  21. package/dist/cjs/artifacts/tokens-raw/atlassian-spacing.js +0 -1
  22. package/dist/cjs/artifacts/tokens-raw/atlassian-typography.js +0 -1
  23. package/dist/cjs/artifacts/typescript/atlassian-dark-token-names.js +0 -1
  24. package/dist/cjs/artifacts/typescript/atlassian-light-token-names.js +0 -1
  25. package/dist/cjs/babel-plugin/index.js +0 -2
  26. package/dist/cjs/babel-plugin/plugin.js +17 -43
  27. package/dist/cjs/entry-points/babel-plugin.js +0 -2
  28. package/dist/cjs/entry-points/palettes-raw.js +0 -2
  29. package/dist/cjs/entry-points/rename-mapping.js +0 -2
  30. package/dist/cjs/entry-points/token-ids.js +0 -1
  31. package/dist/cjs/entry-points/token-names.js +0 -2
  32. package/dist/cjs/entry-points/tokens-raw.js +0 -5
  33. package/dist/cjs/get-global-theme.js +30 -0
  34. package/dist/cjs/get-token-value.js +1 -10
  35. package/dist/cjs/get-token.js +3 -13
  36. package/dist/cjs/index.js +46 -10
  37. package/dist/cjs/palettes/legacy-palette.js +1 -1
  38. package/dist/cjs/palettes/spacing-scale.js +1 -1
  39. package/dist/cjs/palettes/typography-palette.js +0 -5
  40. package/dist/cjs/set-global-theme.js +265 -39
  41. package/dist/cjs/theme-config.js +8 -23
  42. package/dist/cjs/{theme-change-observer.js → theme-mutation-observer.js} +5 -57
  43. package/dist/cjs/tokens/atlassian-dark/utility/utility.js +1 -4
  44. package/dist/cjs/tokens/atlassian-legacy-dark/utility/utility.js +1 -4
  45. package/dist/cjs/tokens/atlassian-legacy-light/utility/utility.js +1 -4
  46. package/dist/cjs/tokens/atlassian-light/utility/utility.js +1 -4
  47. package/dist/cjs/tokens/atlassian-spacing/spacing.js +0 -1
  48. package/dist/cjs/tokens/default/spacing/spacing.js +0 -1
  49. package/dist/cjs/tokens/default/utility/utility.js +1 -9
  50. package/dist/cjs/use-theme-observer.js +41 -0
  51. package/dist/cjs/utils/color-detection.js +23 -43
  52. package/dist/cjs/utils/theme-loading.js +69 -0
  53. package/dist/cjs/utils/theme-state-transformer.js +73 -0
  54. package/dist/cjs/utils/token-ids.js +4 -12
  55. package/dist/cjs/version.json +1 -1
  56. package/dist/es2019/artifacts/replacement-mapping.js +2 -401
  57. package/dist/es2019/artifacts/theme-import-map.js +27 -0
  58. package/dist/es2019/artifacts/themes/atlassian-dark.js +296 -0
  59. package/dist/es2019/artifacts/themes/atlassian-legacy-dark.js +296 -0
  60. package/dist/es2019/artifacts/themes/atlassian-legacy-light.js +296 -0
  61. package/dist/es2019/artifacts/themes/atlassian-light.js +296 -0
  62. package/{css/atlassian-spacing.css → dist/es2019/artifacts/themes/atlassian-spacing.js} +4 -2
  63. package/{css/atlassian-typography.css → dist/es2019/artifacts/themes/atlassian-typography.js} +4 -2
  64. package/dist/es2019/artifacts/token-default-values.js +2 -103
  65. package/dist/es2019/artifacts/token-names.js +2 -103
  66. package/dist/es2019/artifacts/tokens-raw/atlassian-dark.js +1354 -4260
  67. package/dist/es2019/artifacts/tokens-raw/atlassian-legacy-dark.js +1349 -4255
  68. package/dist/es2019/artifacts/tokens-raw/atlassian-legacy-light.js +1397 -4283
  69. package/dist/es2019/artifacts/tokens-raw/atlassian-light.js +1360 -4246
  70. package/dist/es2019/babel-plugin/plugin.js +17 -37
  71. package/dist/es2019/get-global-theme.js +20 -0
  72. package/dist/es2019/get-token-value.js +1 -6
  73. package/dist/es2019/get-token.js +3 -8
  74. package/dist/es2019/index.js +5 -2
  75. package/dist/es2019/palettes/legacy-palette.js +1 -0
  76. package/dist/es2019/palettes/spacing-scale.js +1 -0
  77. package/dist/es2019/palettes/typography-palette.js +2 -1
  78. package/dist/es2019/set-global-theme.js +162 -32
  79. package/dist/es2019/theme-config.js +5 -21
  80. package/dist/es2019/{theme-change-observer.js → theme-mutation-observer.js} +4 -37
  81. package/dist/es2019/tokens/atlassian-dark/utility/utility.js +1 -4
  82. package/dist/es2019/tokens/atlassian-legacy-dark/utility/utility.js +1 -4
  83. package/dist/es2019/tokens/atlassian-legacy-light/utility/utility.js +1 -4
  84. package/dist/es2019/tokens/atlassian-light/utility/utility.js +1 -4
  85. package/dist/es2019/tokens/default/utility/utility.js +1 -9
  86. package/dist/es2019/use-theme-observer.js +26 -0
  87. package/dist/es2019/utils/color-detection.js +3 -5
  88. package/dist/es2019/utils/theme-loading.js +18 -0
  89. package/dist/es2019/utils/theme-state-transformer.js +47 -0
  90. package/dist/es2019/utils/token-ids.js +5 -4
  91. package/dist/es2019/version.json +1 -1
  92. package/dist/esm/artifacts/replacement-mapping.js +2 -401
  93. package/dist/esm/artifacts/theme-import-map.js +39 -0
  94. package/dist/esm/artifacts/themes/atlassian-dark.js +6 -0
  95. package/dist/esm/artifacts/themes/atlassian-legacy-dark.js +6 -0
  96. package/dist/esm/artifacts/themes/atlassian-legacy-light.js +6 -0
  97. package/dist/esm/artifacts/themes/atlassian-light.js +6 -0
  98. package/dist/esm/artifacts/themes/atlassian-spacing.js +6 -0
  99. package/dist/esm/artifacts/themes/atlassian-typography.js +6 -0
  100. package/dist/esm/artifacts/token-default-values.js +2 -103
  101. package/dist/esm/artifacts/token-names.js +2 -103
  102. package/dist/esm/artifacts/tokens-raw/atlassian-dark.js +1354 -4260
  103. package/dist/esm/artifacts/tokens-raw/atlassian-legacy-dark.js +1349 -4255
  104. package/dist/esm/artifacts/tokens-raw/atlassian-legacy-light.js +1397 -4283
  105. package/dist/esm/artifacts/tokens-raw/atlassian-light.js +1360 -4246
  106. package/dist/esm/babel-plugin/plugin.js +17 -35
  107. package/dist/esm/get-global-theme.js +22 -0
  108. package/dist/esm/get-token-value.js +1 -6
  109. package/dist/esm/get-token.js +3 -8
  110. package/dist/esm/index.js +5 -2
  111. package/dist/esm/palettes/legacy-palette.js +1 -0
  112. package/dist/esm/palettes/spacing-scale.js +1 -0
  113. package/dist/esm/palettes/typography-palette.js +0 -3
  114. package/dist/esm/set-global-theme.js +263 -37
  115. package/dist/esm/theme-config.js +5 -21
  116. package/dist/esm/{theme-change-observer.js → theme-mutation-observer.js} +4 -49
  117. package/dist/esm/tokens/atlassian-dark/utility/utility.js +1 -4
  118. package/dist/esm/tokens/atlassian-legacy-dark/utility/utility.js +1 -4
  119. package/dist/esm/tokens/atlassian-legacy-light/utility/utility.js +1 -4
  120. package/dist/esm/tokens/atlassian-light/utility/utility.js +1 -4
  121. package/dist/esm/tokens/default/utility/utility.js +1 -9
  122. package/dist/esm/use-theme-observer.js +34 -0
  123. package/dist/esm/utils/color-detection.js +23 -30
  124. package/dist/esm/utils/theme-loading.js +60 -0
  125. package/dist/esm/utils/theme-state-transformer.js +64 -0
  126. package/dist/esm/utils/token-ids.js +5 -4
  127. package/dist/esm/version.json +1 -1
  128. package/dist/types/artifacts/replacement-mapping.d.ts +1 -1
  129. package/dist/types/artifacts/theme-import-map.d.ts +16 -0
  130. package/dist/types/artifacts/themes/atlassian-dark.d.ts +7 -0
  131. package/dist/types/artifacts/themes/atlassian-legacy-dark.d.ts +7 -0
  132. package/dist/types/artifacts/themes/atlassian-legacy-light.d.ts +7 -0
  133. package/dist/types/artifacts/themes/atlassian-light.d.ts +7 -0
  134. package/dist/types/artifacts/themes/atlassian-spacing.d.ts +7 -0
  135. package/dist/types/artifacts/themes/atlassian-typography.d.ts +7 -0
  136. package/dist/types/artifacts/token-default-values.d.ts +2 -103
  137. package/dist/types/artifacts/token-names.d.ts +3 -205
  138. package/dist/types/artifacts/tokens-raw/atlassian-dark.d.ts +1 -115
  139. package/dist/types/artifacts/tokens-raw/atlassian-legacy-dark.d.ts +1 -115
  140. package/dist/types/artifacts/tokens-raw/atlassian-legacy-light.d.ts +1 -91
  141. package/dist/types/artifacts/tokens-raw/atlassian-light.d.ts +1 -91
  142. package/dist/types/artifacts/types-internal.d.ts +2 -2
  143. package/dist/types/artifacts/types.d.ts +2 -2
  144. package/dist/types/get-global-theme.d.ts +2 -0
  145. package/dist/types/index.d.ts +7 -3
  146. package/dist/types/set-global-theme.d.ts +63 -7
  147. package/dist/types/theme-config.d.ts +10 -7
  148. package/dist/types/{theme-change-observer.d.ts → theme-mutation-observer.d.ts} +2 -16
  149. package/dist/types/types.d.ts +1 -180
  150. package/dist/types/use-theme-observer.d.ts +15 -0
  151. package/dist/types/utils/theme-loading.d.ts +3 -0
  152. package/dist/types/utils/theme-state-transformer.d.ts +26 -0
  153. package/figma/atlassian-dark.json +1 -102
  154. package/figma/atlassian-legacy-dark.json +1 -102
  155. package/figma/atlassian-legacy-light.json +1 -102
  156. package/figma/atlassian-light.json +1 -102
  157. package/package.json +5 -8
  158. package/report.api.md +85 -219
  159. package/tmp/api-report-tmp.d.ts +58 -210
  160. package/css/atlassian-dark.css +0 -786
  161. package/css/atlassian-legacy-dark.css +0 -786
  162. package/css/atlassian-legacy-light.css +0 -786
  163. package/css/atlassian-light.css +0 -786
  164. package/dist/cjs/artifacts/typescript/atlassian-light-token-default-values.js +0 -407
  165. package/dist/cjs/tokens/atlassian-dark/deprecated/deprecated.js +0 -435
  166. package/dist/cjs/tokens/atlassian-legacy-dark/deprecated/deprecated.js +0 -532
  167. package/dist/cjs/tokens/atlassian-legacy-light/deprecated/deprecated.js +0 -523
  168. package/dist/cjs/tokens/atlassian-light/deprecated/deprecated.js +0 -421
  169. package/dist/cjs/tokens/default/deprecated/deprecated.js +0 -1186
  170. package/dist/es2019/artifacts/typescript/atlassian-light-token-default-values.js +0 -399
  171. package/dist/es2019/tokens/atlassian-dark/deprecated/deprecated.js +0 -428
  172. package/dist/es2019/tokens/atlassian-legacy-dark/deprecated/deprecated.js +0 -525
  173. package/dist/es2019/tokens/atlassian-legacy-light/deprecated/deprecated.js +0 -516
  174. package/dist/es2019/tokens/atlassian-light/deprecated/deprecated.js +0 -414
  175. package/dist/es2019/tokens/default/deprecated/deprecated.js +0 -1217
  176. package/dist/esm/artifacts/typescript/atlassian-light-token-default-values.js +0 -399
  177. package/dist/esm/tokens/atlassian-dark/deprecated/deprecated.js +0 -428
  178. package/dist/esm/tokens/atlassian-legacy-dark/deprecated/deprecated.js +0 -525
  179. package/dist/esm/tokens/atlassian-legacy-light/deprecated/deprecated.js +0 -516
  180. package/dist/esm/tokens/atlassian-light/deprecated/deprecated.js +0 -414
  181. package/dist/esm/tokens/default/deprecated/deprecated.js +0 -1179
  182. package/dist/types/artifacts/typescript/atlassian-light-token-default-values.d.ts +0 -399
  183. package/dist/types/tokens/atlassian-dark/deprecated/deprecated.d.ts +0 -4
  184. package/dist/types/tokens/atlassian-legacy-dark/deprecated/deprecated.d.ts +0 -4
  185. package/dist/types/tokens/atlassian-legacy-light/deprecated/deprecated.d.ts +0 -4
  186. package/dist/types/tokens/atlassian-light/deprecated/deprecated.d.ts +0 -4
  187. package/dist/types/tokens/default/deprecated/deprecated.d.ts +0 -4
@@ -1,428 +0,0 @@
1
- const color = {
2
- color: {
3
- accent: {
4
- boldBlue: {
5
- value: 'Blue700'
6
- },
7
- boldGreen: {
8
- value: 'Green700'
9
- },
10
- boldOrange: {
11
- value: 'Orange700'
12
- },
13
- boldPurple: {
14
- value: 'Purple700'
15
- },
16
- boldRed: {
17
- value: 'Red700'
18
- },
19
- boldTeal: {
20
- value: 'Teal700'
21
- },
22
- subtleBlue: {
23
- value: 'Blue900'
24
- },
25
- subtleGreen: {
26
- value: 'Green900'
27
- },
28
- subtleMagenta: {
29
- value: 'Magenta900'
30
- },
31
- subtleOrange: {
32
- value: 'Orange900'
33
- },
34
- subtlePurple: {
35
- value: 'Purple900'
36
- },
37
- subtleRed: {
38
- value: 'Red900'
39
- },
40
- subtleTeal: {
41
- value: 'Teal900'
42
- }
43
- },
44
- background: {
45
- accent: {
46
- blue: {
47
- '[default]': {
48
- value: 'Blue900'
49
- },
50
- bold: {
51
- value: 'Blue700'
52
- }
53
- },
54
- red: {
55
- '[default]': {
56
- value: 'Red900'
57
- },
58
- bold: {
59
- value: 'Red700'
60
- }
61
- },
62
- orange: {
63
- '[default]': {
64
- value: 'Orange900'
65
- },
66
- bold: {
67
- value: 'Orange700'
68
- }
69
- },
70
- yellow: {
71
- '[default]': {
72
- value: 'Yellow900'
73
- },
74
- bold: {
75
- value: 'Yellow700'
76
- }
77
- },
78
- green: {
79
- '[default]': {
80
- value: 'Green900'
81
- },
82
- bold: {
83
- value: 'Green700'
84
- }
85
- },
86
- purple: {
87
- '[default]': {
88
- value: 'Purple900'
89
- },
90
- bold: {
91
- value: 'Purple700'
92
- }
93
- },
94
- teal: {
95
- '[default]': {
96
- value: 'Teal900'
97
- },
98
- bold: {
99
- value: 'Teal700'
100
- }
101
- },
102
- magenta: {
103
- '[default]': {
104
- value: 'Magenta900'
105
- },
106
- bold: {
107
- value: 'Magenta700'
108
- }
109
- }
110
- },
111
- blanket: {
112
- value: 'DarkNeutral-100A'
113
- },
114
- brand: {
115
- '[default]': {
116
- '[default]': {
117
- value: 'Blue1000'
118
- },
119
- hovered: {
120
- value: 'Blue900'
121
- },
122
- pressed: {
123
- value: 'Blue800'
124
- }
125
- }
126
- },
127
- boldBrand: {
128
- resting: {
129
- value: 'Blue400'
130
- },
131
- hover: {
132
- value: 'Blue300'
133
- },
134
- pressed: {
135
- value: 'Blue200'
136
- }
137
- },
138
- boldDanger: {
139
- resting: {
140
- value: 'Red400'
141
- },
142
- hover: {
143
- value: 'Red300'
144
- },
145
- pressed: {
146
- value: 'Red200'
147
- }
148
- },
149
- boldDiscovery: {
150
- resting: {
151
- value: 'Purple400'
152
- },
153
- hover: {
154
- value: 'Purple300'
155
- },
156
- pressed: {
157
- value: 'Purple200'
158
- }
159
- },
160
- boldNeutral: {
161
- resting: {
162
- value: 'DarkNeutral800'
163
- },
164
- hover: {
165
- value: 'DarkNeutral900'
166
- },
167
- pressed: {
168
- value: 'DarkNeutral1000'
169
- }
170
- },
171
- boldSuccess: {
172
- resting: {
173
- value: 'Green400'
174
- },
175
- hover: {
176
- value: 'Green300'
177
- },
178
- pressed: {
179
- value: 'Green200'
180
- }
181
- },
182
- boldWarning: {
183
- resting: {
184
- value: 'Yellow400'
185
- },
186
- hover: {
187
- value: 'Yellow300'
188
- },
189
- pressed: {
190
- value: 'Yellow200'
191
- }
192
- },
193
- default: {
194
- value: 'DarkNeutral0'
195
- },
196
- card: {
197
- value: 'DarkNeutral100'
198
- },
199
- inverse: {
200
- // @ts-ignore temporary until a palette colour exists for it
201
- '[default]': {
202
- value: '#00000029'
203
- }
204
- },
205
- overlay: {
206
- value: 'DarkNeutral200'
207
- },
208
- selected: {
209
- resting: {
210
- value: 'DarkNeutral200A'
211
- },
212
- hover: {
213
- value: 'DarkNeutral300A'
214
- }
215
- },
216
- subtleBorderedNeutral: {
217
- resting: {
218
- value: 'DarkNeutral100A'
219
- },
220
- pressed: {
221
- value: 'DarkNeutral200A'
222
- }
223
- },
224
- subtleBrand: {
225
- resting: {
226
- value: 'Blue1000'
227
- },
228
- hover: {
229
- value: 'Blue900'
230
- },
231
- pressed: {
232
- value: 'Blue800'
233
- }
234
- },
235
- subtleDanger: {
236
- resting: {
237
- value: 'Red1000'
238
- },
239
- hover: {
240
- value: 'Red900'
241
- },
242
- pressed: {
243
- value: 'Red800'
244
- }
245
- },
246
- subtleDiscovery: {
247
- resting: {
248
- value: 'Purple1000'
249
- },
250
- hover: {
251
- value: 'Purple900'
252
- },
253
- pressed: {
254
- value: 'Purple800'
255
- }
256
- },
257
- subtleNeutral: {
258
- resting: {
259
- value: 'DarkNeutral200A'
260
- },
261
- hover: {
262
- value: 'DarkNeutral300A'
263
- },
264
- pressed: {
265
- value: 'DarkNeutral400A'
266
- }
267
- },
268
- subtleSuccess: {
269
- resting: {
270
- value: 'Green1000'
271
- },
272
- hover: {
273
- value: 'Green900'
274
- },
275
- pressed: {
276
- value: 'Green800'
277
- }
278
- },
279
- subtleWarning: {
280
- resting: {
281
- value: 'Yellow1000'
282
- },
283
- hover: {
284
- value: 'Yellow900'
285
- },
286
- pressed: {
287
- value: 'Yellow800'
288
- }
289
- },
290
- sunken: {
291
- value: 'DarkNeutral-100A'
292
- },
293
- transparentNeutral: {
294
- hover: {
295
- value: 'DarkNeutral200A'
296
- },
297
- pressed: {
298
- value: 'DarkNeutral300A'
299
- }
300
- }
301
- },
302
- text: {
303
- highEmphasis: {
304
- value: 'DarkNeutral1000'
305
- },
306
- mediumEmphasis: {
307
- value: 'DarkNeutral800'
308
- },
309
- lowEmphasis: {
310
- value: 'DarkNeutral700'
311
- },
312
- link: {
313
- resting: {
314
- value: 'Blue400'
315
- },
316
- pressed: {
317
- value: 'Blue300'
318
- }
319
- },
320
- onBold: {
321
- value: 'DarkNeutral0'
322
- },
323
- onBoldWarning: {
324
- value: 'DarkNeutral0'
325
- }
326
- },
327
- border: {
328
- focus: {
329
- value: 'Blue300'
330
- },
331
- neutral: {
332
- value: 'DarkNeutral300A'
333
- }
334
- },
335
- iconBorder: {
336
- brand: {
337
- value: 'Blue500'
338
- },
339
- danger: {
340
- value: 'Red500'
341
- },
342
- warning: {
343
- value: 'Yellow500'
344
- },
345
- success: {
346
- value: 'Green500'
347
- },
348
- discovery: {
349
- value: 'Purple500'
350
- }
351
- },
352
- overlay: {
353
- hover: {
354
- value: 'DarkNeutral400A'
355
- },
356
- pressed: {
357
- value: 'DarkNeutral500A'
358
- }
359
- },
360
- interaction: {
361
- inverse: {
362
- hovered: {
363
- // @ts-ignore temporary values
364
- value: '#ffffff33'
365
- },
366
- pressed: {
367
- // @ts-ignore temporary values
368
- value: '#ffffff5c'
369
- }
370
- }
371
- }
372
- },
373
- shadow: {
374
- card: {
375
- value: [{
376
- radius: 1,
377
- offset: {
378
- x: 0,
379
- y: 1
380
- },
381
- color: 'DarkNeutral-100A',
382
- // This opacity overrides the color alpha.
383
- opacity: 0.5
384
- }, {
385
- radius: 1,
386
- offset: {
387
- x: 0,
388
- y: 0
389
- },
390
- color: 'DarkNeutral-100A',
391
- // This opacity overrides the color alpha.
392
- opacity: 0.5
393
- }]
394
- },
395
- overlay: {
396
- value: [{
397
- radius: 0,
398
- spread: 1,
399
- color: 'DarkNeutral100A',
400
- offset: {
401
- x: 0,
402
- y: 0
403
- },
404
- opacity: 0.04,
405
- inset: true
406
- }, {
407
- radius: 12,
408
- offset: {
409
- x: 0,
410
- y: 8
411
- },
412
- color: 'DarkNeutral-100A',
413
- // This opacity overrides the color alpha.
414
- opacity: 0.36
415
- }, {
416
- radius: 1,
417
- offset: {
418
- x: 0,
419
- y: 0
420
- },
421
- color: 'DarkNeutral-100A',
422
- // This opacity overrides the color alpha.
423
- opacity: 0.5
424
- }]
425
- }
426
- }
427
- };
428
- export default color;