@atlaskit/tokens 1.36.0 → 1.37.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 (29) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/codemods/css-to-design-tokens/__tests__/css-to-design-tokens.test.tsx +489 -0
  3. package/codemods/css-to-design-tokens/__tests__/utils.test.tsx +145 -0
  4. package/codemods/css-to-design-tokens/lib/colors.tsx +71 -0
  5. package/codemods/css-to-design-tokens/lib/declaration.tsx +43 -0
  6. package/codemods/css-to-design-tokens/lib/legacy-colors.tsx +336 -0
  7. package/codemods/css-to-design-tokens/lib/meta.tsx +173 -0
  8. package/codemods/css-to-design-tokens/lib/tokens.tsx +54 -0
  9. package/codemods/css-to-design-tokens/lib/value.tsx +85 -0
  10. package/codemods/css-to-design-tokens/transform.tsx +99 -0
  11. package/codemods/hypermod.config.tsx +9 -0
  12. package/codemods/theme-to-design-tokens/__tests__/theme-to-design-tokens.test.tsx +1104 -0
  13. package/codemods/theme-to-design-tokens/transform.tsx +628 -0
  14. package/codemods/theme-to-design-tokens/utils/ast-meta.tsx +159 -0
  15. package/codemods/theme-to-design-tokens/utils/ast.tsx +46 -0
  16. package/codemods/theme-to-design-tokens/utils/color.tsx +45 -0
  17. package/codemods/theme-to-design-tokens/utils/css-utils.tsx +38 -0
  18. package/codemods/theme-to-design-tokens/utils/fuzzy-search.tsx +326 -0
  19. package/codemods/theme-to-design-tokens/utils/legacy-colors.tsx +232 -0
  20. package/codemods/theme-to-design-tokens/utils/named-colors.tsx +150 -0
  21. package/codemods/theme-to-design-tokens/utils/string-utils.tsx +22 -0
  22. package/codemods/utils/tokens.tsx +376 -0
  23. package/dist/cjs/get-token-value.js +1 -1
  24. package/dist/cjs/get-token.js +1 -1
  25. package/dist/es2019/get-token-value.js +1 -1
  26. package/dist/es2019/get-token.js +1 -1
  27. package/dist/esm/get-token-value.js +1 -1
  28. package/dist/esm/get-token.js +1 -1
  29. package/package.json +5 -1
@@ -0,0 +1,376 @@
1
+ export const activeTokens = [
2
+ 'color.text',
3
+ 'color.text.accent.lime',
4
+ 'color.text.accent.lime.bolder',
5
+ 'color.text.accent.red',
6
+ 'color.text.accent.red.bolder',
7
+ 'color.text.accent.orange',
8
+ 'color.text.accent.orange.bolder',
9
+ 'color.text.accent.yellow',
10
+ 'color.text.accent.yellow.bolder',
11
+ 'color.text.accent.green',
12
+ 'color.text.accent.green.bolder',
13
+ 'color.text.accent.teal',
14
+ 'color.text.accent.teal.bolder',
15
+ 'color.text.accent.blue',
16
+ 'color.text.accent.blue.bolder',
17
+ 'color.text.accent.purple',
18
+ 'color.text.accent.purple.bolder',
19
+ 'color.text.accent.magenta',
20
+ 'color.text.accent.magenta.bolder',
21
+ 'color.text.accent.gray',
22
+ 'color.text.accent.gray.bolder',
23
+ 'color.text.disabled',
24
+ 'color.text.inverse',
25
+ 'color.text.selected',
26
+ 'color.text.brand',
27
+ 'color.text.danger',
28
+ 'color.text.warning',
29
+ 'color.text.warning.inverse',
30
+ 'color.text.success',
31
+ 'color.text.discovery',
32
+ 'color.text.information',
33
+ 'color.text.subtlest',
34
+ 'color.text.subtle',
35
+ 'color.link',
36
+ 'color.link.pressed',
37
+ 'color.link.visited',
38
+ 'color.icon',
39
+ 'color.icon.accent.lime',
40
+ 'color.icon.accent.red',
41
+ 'color.icon.accent.orange',
42
+ 'color.icon.accent.yellow',
43
+ 'color.icon.accent.green',
44
+ 'color.icon.accent.teal',
45
+ 'color.icon.accent.blue',
46
+ 'color.icon.accent.purple',
47
+ 'color.icon.accent.magenta',
48
+ 'color.icon.accent.gray',
49
+ 'color.icon.disabled',
50
+ 'color.icon.inverse',
51
+ 'color.icon.selected',
52
+ 'color.icon.brand',
53
+ 'color.icon.danger',
54
+ 'color.icon.warning',
55
+ 'color.icon.warning.inverse',
56
+ 'color.icon.success',
57
+ 'color.icon.discovery',
58
+ 'color.icon.information',
59
+ 'color.icon.subtle',
60
+ 'color.border',
61
+ 'color.border.accent.lime',
62
+ 'color.border.accent.red',
63
+ 'color.border.accent.orange',
64
+ 'color.border.accent.yellow',
65
+ 'color.border.accent.green',
66
+ 'color.border.accent.teal',
67
+ 'color.border.accent.blue',
68
+ 'color.border.accent.purple',
69
+ 'color.border.accent.magenta',
70
+ 'color.border.accent.gray',
71
+ 'color.border.disabled',
72
+ 'color.border.focused',
73
+ 'color.border.input',
74
+ 'color.border.inverse',
75
+ 'color.border.selected',
76
+ 'color.border.brand',
77
+ 'color.border.danger',
78
+ 'color.border.warning',
79
+ 'color.border.success',
80
+ 'color.border.discovery',
81
+ 'color.border.information',
82
+ 'color.border.bold',
83
+ 'color.background.accent.lime.subtlest',
84
+ 'color.background.accent.lime.subtlest.hovered',
85
+ 'color.background.accent.lime.subtlest.pressed',
86
+ 'color.background.accent.lime.subtler',
87
+ 'color.background.accent.lime.subtler.hovered',
88
+ 'color.background.accent.lime.subtler.pressed',
89
+ 'color.background.accent.lime.subtle',
90
+ 'color.background.accent.lime.subtle.hovered',
91
+ 'color.background.accent.lime.subtle.pressed',
92
+ 'color.background.accent.lime.bolder',
93
+ 'color.background.accent.lime.bolder.hovered',
94
+ 'color.background.accent.lime.bolder.pressed',
95
+ 'color.background.accent.red.subtlest',
96
+ 'color.background.accent.red.subtlest.hovered',
97
+ 'color.background.accent.red.subtlest.pressed',
98
+ 'color.background.accent.red.subtler',
99
+ 'color.background.accent.red.subtler.hovered',
100
+ 'color.background.accent.red.subtler.pressed',
101
+ 'color.background.accent.red.subtle',
102
+ 'color.background.accent.red.subtle.hovered',
103
+ 'color.background.accent.red.subtle.pressed',
104
+ 'color.background.accent.red.bolder',
105
+ 'color.background.accent.red.bolder.hovered',
106
+ 'color.background.accent.red.bolder.pressed',
107
+ 'color.background.accent.orange.subtlest',
108
+ 'color.background.accent.orange.subtlest.hovered',
109
+ 'color.background.accent.orange.subtlest.pressed',
110
+ 'color.background.accent.orange.subtler',
111
+ 'color.background.accent.orange.subtler.hovered',
112
+ 'color.background.accent.orange.subtler.pressed',
113
+ 'color.background.accent.orange.subtle',
114
+ 'color.background.accent.orange.subtle.hovered',
115
+ 'color.background.accent.orange.subtle.pressed',
116
+ 'color.background.accent.orange.bolder',
117
+ 'color.background.accent.orange.bolder.hovered',
118
+ 'color.background.accent.orange.bolder.pressed',
119
+ 'color.background.accent.yellow.subtlest',
120
+ 'color.background.accent.yellow.subtlest.hovered',
121
+ 'color.background.accent.yellow.subtlest.pressed',
122
+ 'color.background.accent.yellow.subtler',
123
+ 'color.background.accent.yellow.subtler.hovered',
124
+ 'color.background.accent.yellow.subtler.pressed',
125
+ 'color.background.accent.yellow.subtle',
126
+ 'color.background.accent.yellow.subtle.hovered',
127
+ 'color.background.accent.yellow.subtle.pressed',
128
+ 'color.background.accent.yellow.bolder',
129
+ 'color.background.accent.yellow.bolder.hovered',
130
+ 'color.background.accent.yellow.bolder.pressed',
131
+ 'color.background.accent.green.subtlest',
132
+ 'color.background.accent.green.subtlest.hovered',
133
+ 'color.background.accent.green.subtlest.pressed',
134
+ 'color.background.accent.green.subtler',
135
+ 'color.background.accent.green.subtler.hovered',
136
+ 'color.background.accent.green.subtler.pressed',
137
+ 'color.background.accent.green.subtle',
138
+ 'color.background.accent.green.subtle.hovered',
139
+ 'color.background.accent.green.subtle.pressed',
140
+ 'color.background.accent.green.bolder',
141
+ 'color.background.accent.green.bolder.hovered',
142
+ 'color.background.accent.green.bolder.pressed',
143
+ 'color.background.accent.teal.subtlest',
144
+ 'color.background.accent.teal.subtlest.hovered',
145
+ 'color.background.accent.teal.subtlest.pressed',
146
+ 'color.background.accent.teal.subtler',
147
+ 'color.background.accent.teal.subtler.hovered',
148
+ 'color.background.accent.teal.subtler.pressed',
149
+ 'color.background.accent.teal.subtle',
150
+ 'color.background.accent.teal.subtle.hovered',
151
+ 'color.background.accent.teal.subtle.pressed',
152
+ 'color.background.accent.teal.bolder',
153
+ 'color.background.accent.teal.bolder.hovered',
154
+ 'color.background.accent.teal.bolder.pressed',
155
+ 'color.background.accent.blue.subtlest',
156
+ 'color.background.accent.blue.subtlest.hovered',
157
+ 'color.background.accent.blue.subtlest.pressed',
158
+ 'color.background.accent.blue.subtler',
159
+ 'color.background.accent.blue.subtler.hovered',
160
+ 'color.background.accent.blue.subtler.pressed',
161
+ 'color.background.accent.blue.subtle',
162
+ 'color.background.accent.blue.subtle.hovered',
163
+ 'color.background.accent.blue.subtle.pressed',
164
+ 'color.background.accent.blue.bolder',
165
+ 'color.background.accent.blue.bolder.hovered',
166
+ 'color.background.accent.blue.bolder.pressed',
167
+ 'color.background.accent.purple.subtlest',
168
+ 'color.background.accent.purple.subtlest.hovered',
169
+ 'color.background.accent.purple.subtlest.pressed',
170
+ 'color.background.accent.purple.subtler',
171
+ 'color.background.accent.purple.subtler.hovered',
172
+ 'color.background.accent.purple.subtler.pressed',
173
+ 'color.background.accent.purple.subtle',
174
+ 'color.background.accent.purple.subtle.hovered',
175
+ 'color.background.accent.purple.subtle.pressed',
176
+ 'color.background.accent.purple.bolder',
177
+ 'color.background.accent.purple.bolder.hovered',
178
+ 'color.background.accent.purple.bolder.pressed',
179
+ 'color.background.accent.magenta.subtlest',
180
+ 'color.background.accent.magenta.subtlest.hovered',
181
+ 'color.background.accent.magenta.subtlest.pressed',
182
+ 'color.background.accent.magenta.subtler',
183
+ 'color.background.accent.magenta.subtler.hovered',
184
+ 'color.background.accent.magenta.subtler.pressed',
185
+ 'color.background.accent.magenta.subtle',
186
+ 'color.background.accent.magenta.subtle.hovered',
187
+ 'color.background.accent.magenta.subtle.pressed',
188
+ 'color.background.accent.magenta.bolder',
189
+ 'color.background.accent.magenta.bolder.hovered',
190
+ 'color.background.accent.magenta.bolder.pressed',
191
+ 'color.background.accent.gray.subtlest',
192
+ 'color.background.accent.gray.subtlest.hovered',
193
+ 'color.background.accent.gray.subtlest.pressed',
194
+ 'color.background.accent.gray.subtler',
195
+ 'color.background.accent.gray.subtler.hovered',
196
+ 'color.background.accent.gray.subtler.pressed',
197
+ 'color.background.accent.gray.subtle',
198
+ 'color.background.accent.gray.subtle.hovered',
199
+ 'color.background.accent.gray.subtle.pressed',
200
+ 'color.background.accent.gray.bolder',
201
+ 'color.background.accent.gray.bolder.hovered',
202
+ 'color.background.accent.gray.bolder.pressed',
203
+ 'color.background.disabled',
204
+ 'color.background.input',
205
+ 'color.background.input.hovered',
206
+ 'color.background.input.pressed',
207
+ 'color.background.inverse.subtle',
208
+ 'color.background.inverse.subtle.hovered',
209
+ 'color.background.inverse.subtle.pressed',
210
+ 'color.background.neutral',
211
+ 'color.background.neutral.hovered',
212
+ 'color.background.neutral.pressed',
213
+ 'color.background.neutral.subtle',
214
+ 'color.background.neutral.subtle.hovered',
215
+ 'color.background.neutral.subtle.pressed',
216
+ 'color.background.neutral.bold',
217
+ 'color.background.neutral.bold.hovered',
218
+ 'color.background.neutral.bold.pressed',
219
+ 'color.background.selected',
220
+ 'color.background.selected.hovered',
221
+ 'color.background.selected.pressed',
222
+ 'color.background.selected.bold',
223
+ 'color.background.selected.bold.hovered',
224
+ 'color.background.selected.bold.pressed',
225
+ 'color.background.brand.subtlest',
226
+ 'color.background.brand.subtlest.hovered',
227
+ 'color.background.brand.subtlest.pressed',
228
+ 'color.background.brand.bold',
229
+ 'color.background.brand.bold.hovered',
230
+ 'color.background.brand.bold.pressed',
231
+ 'color.background.brand.boldest',
232
+ 'color.background.brand.boldest.hovered',
233
+ 'color.background.brand.boldest.pressed',
234
+ 'color.background.danger',
235
+ 'color.background.danger.hovered',
236
+ 'color.background.danger.pressed',
237
+ 'color.background.danger.bold',
238
+ 'color.background.danger.bold.hovered',
239
+ 'color.background.danger.bold.pressed',
240
+ 'color.background.warning',
241
+ 'color.background.warning.hovered',
242
+ 'color.background.warning.pressed',
243
+ 'color.background.warning.bold',
244
+ 'color.background.warning.bold.hovered',
245
+ 'color.background.warning.bold.pressed',
246
+ 'color.background.success',
247
+ 'color.background.success.hovered',
248
+ 'color.background.success.pressed',
249
+ 'color.background.success.bold',
250
+ 'color.background.success.bold.hovered',
251
+ 'color.background.success.bold.pressed',
252
+ 'color.background.discovery',
253
+ 'color.background.discovery.hovered',
254
+ 'color.background.discovery.pressed',
255
+ 'color.background.discovery.bold',
256
+ 'color.background.discovery.bold.hovered',
257
+ 'color.background.discovery.bold.pressed',
258
+ 'color.background.information',
259
+ 'color.background.information.hovered',
260
+ 'color.background.information.pressed',
261
+ 'color.background.information.bold',
262
+ 'color.background.information.bold.hovered',
263
+ 'color.background.information.bold.pressed',
264
+ 'color.blanket',
265
+ 'color.blanket.selected',
266
+ 'color.blanket.danger',
267
+ 'color.skeleton',
268
+ 'color.skeleton.subtle',
269
+ 'elevation.surface',
270
+ 'elevation.surface.hovered',
271
+ 'elevation.surface.pressed',
272
+ 'elevation.surface.overlay',
273
+ 'elevation.surface.overlay.hovered',
274
+ 'elevation.surface.overlay.pressed',
275
+ 'elevation.surface.raised',
276
+ 'elevation.surface.raised.hovered',
277
+ 'elevation.surface.raised.pressed',
278
+ 'elevation.surface.sunken',
279
+ 'elevation.shadow.overlay',
280
+ 'elevation.shadow.raised',
281
+ 'opacity.disabled',
282
+ 'opacity.loading',
283
+ 'utility.elevation.surface.current',
284
+ ];
285
+
286
+ export const uniqueWordsFromTokens = [
287
+ 'color',
288
+ 'text',
289
+ 'accent',
290
+ 'lime',
291
+ 'bolder',
292
+ 'red',
293
+ 'orange',
294
+ 'yellow',
295
+ 'green',
296
+ 'teal',
297
+ 'blue',
298
+ 'purple',
299
+ 'magenta',
300
+ 'gray',
301
+ 'disabled',
302
+ 'inverse',
303
+ 'selected',
304
+ 'brand',
305
+ 'danger',
306
+ 'warning',
307
+ 'success',
308
+ 'discovery',
309
+ 'information',
310
+ 'subtlest',
311
+ 'subtle',
312
+ 'link',
313
+ 'pressed',
314
+ 'visited',
315
+ 'icon',
316
+ 'border',
317
+ 'focused',
318
+ 'input',
319
+ 'bold',
320
+ 'background',
321
+ 'hovered',
322
+ 'subtler',
323
+ 'neutral',
324
+ 'boldest',
325
+ 'blanket',
326
+ 'interaction',
327
+ 'skeleton',
328
+ 'chart',
329
+ 'categorical',
330
+ 'elevation',
331
+ 'surface',
332
+ 'overlay',
333
+ 'raised',
334
+ 'sunken',
335
+ 'shadow',
336
+ 'overflow',
337
+ 'perimeter',
338
+ 'spread',
339
+ 'opacity',
340
+ 'loading',
341
+ 'utility',
342
+ 'transform',
343
+ 'uppercase',
344
+ 'transparent',
345
+ 'current',
346
+ 'radius',
347
+ 'circle',
348
+ 'width',
349
+ 'indicator',
350
+ 'outline',
351
+ 'space',
352
+ 'negative',
353
+ 'font',
354
+ 'heading',
355
+ 'xxlarge',
356
+ 'xlarge',
357
+ 'large',
358
+ 'medium',
359
+ 'small',
360
+ 'xsmall',
361
+ 'xxsmall',
362
+ 'body',
363
+ 'ui',
364
+ 'code',
365
+ 'letter',
366
+ 'spacing',
367
+ 'family',
368
+ 'monospace',
369
+ 'sans',
370
+ 'size',
371
+ 'weight',
372
+ 'regular',
373
+ 'semibold',
374
+ 'line',
375
+ 'height',
376
+ ];
@@ -8,7 +8,7 @@ exports.default = void 0;
8
8
  var _warnOnce = _interopRequireDefault(require("@atlaskit/ds-lib/warn-once"));
9
9
  var _tokenNames = _interopRequireDefault(require("./artifacts/token-names"));
10
10
  var name = "@atlaskit/tokens";
11
- var version = "1.36.0";
11
+ var version = "1.37.0";
12
12
  /**
13
13
  * Takes a dot-separated token name and and an optional fallback, and returns the current computed CSS value for the
14
14
  * resulting CSS Custom Property.
@@ -9,7 +9,7 @@ var _warnOnce = _interopRequireDefault(require("@atlaskit/ds-lib/warn-once"));
9
9
  var _tokenNames = _interopRequireDefault(require("./artifacts/token-names"));
10
10
  var _constants = require("./constants");
11
11
  var name = "@atlaskit/tokens";
12
- var version = "1.36.0";
12
+ var version = "1.37.0";
13
13
  /**
14
14
  * Takes a dot-separated token name and an optional fallback, and returns the CSS custom property for the corresponding token.
15
15
  * This should be used to implement design decisions throughout your application.
@@ -1,7 +1,7 @@
1
1
  import warnOnce from '@atlaskit/ds-lib/warn-once';
2
2
  import tokens from './artifacts/token-names';
3
3
  const name = "@atlaskit/tokens";
4
- const version = "1.36.0";
4
+ const version = "1.37.0";
5
5
  /**
6
6
  * Takes a dot-separated token name and and an optional fallback, and returns the current computed CSS value for the
7
7
  * resulting CSS Custom Property.
@@ -2,7 +2,7 @@ import warnOnce from '@atlaskit/ds-lib/warn-once';
2
2
  import tokens from './artifacts/token-names';
3
3
  import { TOKEN_NOT_FOUND_CSS_VAR } from './constants';
4
4
  const name = "@atlaskit/tokens";
5
- const version = "1.36.0";
5
+ const version = "1.37.0";
6
6
  /**
7
7
  * Takes a dot-separated token name and an optional fallback, and returns the CSS custom property for the corresponding token.
8
8
  * This should be used to implement design decisions throughout your application.
@@ -1,7 +1,7 @@
1
1
  import warnOnce from '@atlaskit/ds-lib/warn-once';
2
2
  import tokens from './artifacts/token-names';
3
3
  var name = "@atlaskit/tokens";
4
- var version = "1.36.0";
4
+ var version = "1.37.0";
5
5
  /**
6
6
  * Takes a dot-separated token name and and an optional fallback, and returns the current computed CSS value for the
7
7
  * resulting CSS Custom Property.
@@ -2,7 +2,7 @@ import warnOnce from '@atlaskit/ds-lib/warn-once';
2
2
  import tokens from './artifacts/token-names';
3
3
  import { TOKEN_NOT_FOUND_CSS_VAR } from './constants';
4
4
  var name = "@atlaskit/tokens";
5
- var version = "1.36.0";
5
+ var version = "1.37.0";
6
6
  /**
7
7
  * Takes a dot-separated token name and an optional fallback, and returns the CSS custom property for the corresponding token.
8
8
  * This should be used to implement design decisions throughout your application.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/tokens",
3
- "version": "1.36.0",
3
+ "version": "1.37.0",
4
4
  "description": "Design tokens are the single source of truth to name and store design decisions.",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -51,6 +51,7 @@
51
51
  "@atlassian/feature-flags-test-utils": "*",
52
52
  "@babel/core": "^7.20.0",
53
53
  "@emotion/react": "^11.7.1",
54
+ "@hypermod/utils": "^0.4.2",
54
55
  "@testing-library/dom": "^8.17.1",
55
56
  "@testing-library/react": "^12.1.5",
56
57
  "@testing-library/react-hooks": "^8.0.1",
@@ -61,7 +62,10 @@
61
62
  "echarts": "^5.4.1",
62
63
  "echarts-for-react": "^3.0.2",
63
64
  "fuse.js": "^6.6.2",
65
+ "jscodeshift": "^0.13.0",
64
66
  "lodash": "^4.17.21",
67
+ "postcss": "^8.4.7",
68
+ "postcss-less": "^6.0.0",
65
69
  "prettier": "^2.8.0",
66
70
  "react": "^16.8.0",
67
71
  "react-use-clipboard": "^1.0.0",