@esri/calcite-design-tokens 1.0.0 → 1.1.0-next.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 (111) hide show
  1. package/.eslintrc.cjs +85 -0
  2. package/.turbo/turbo-build.log +64 -0
  3. package/.turbo/turbo-test.log +14 -0
  4. package/CHANGELOG.md +17 -4
  5. package/CONTRIBUTING.md +41 -0
  6. package/LICENSE.md +13 -0
  7. package/README.md +9 -11
  8. package/dist/css/brand-light.css +1 -1
  9. package/dist/css/calcite-dark.css +1 -1
  10. package/dist/css/calcite-headless.css +2 -1
  11. package/dist/css/calcite-light.css +1 -1
  12. package/dist/scss/brand-light.scss +1 -1
  13. package/dist/scss/calcite-dark.scss +1 -1
  14. package/dist/scss/calcite-headless.scss +3 -1
  15. package/dist/scss/calcite-light.scss +1 -1
  16. package/jest.config.json +16 -0
  17. package/package.json +11 -72
  18. package/src/$metadata.json +76 -0
  19. package/src/$themes.json +2360 -0
  20. package/src/brand/dark.json +1 -0
  21. package/src/brand/global.json +1 -0
  22. package/src/brand/light.json +20 -0
  23. package/src/calcite/dark.json +2488 -0
  24. package/src/calcite/light.json +2508 -0
  25. package/src/component/accordion-item.json +172 -0
  26. package/src/component/accordion.json +192 -0
  27. package/src/component/action-bar-grid.json +66 -0
  28. package/src/component/action-bar.json +66 -0
  29. package/src/component/action-pad-grid.json +80 -0
  30. package/src/component/action-pad.json +80 -0
  31. package/src/component/action.json +156 -0
  32. package/src/component/alert.json +258 -0
  33. package/src/component/avatar.json +140 -0
  34. package/src/component/block-section.json +124 -0
  35. package/src/component/block.json +198 -0
  36. package/src/component/button.json +650 -0
  37. package/src/component/card.json +116 -0
  38. package/src/component/checkbox.json +110 -0
  39. package/src/component/chip.json +382 -0
  40. package/src/component/color-picker.json +148 -0
  41. package/src/component/combobox.json +152 -0
  42. package/src/component/date-picker.json +354 -0
  43. package/src/component/dropdown-item.json +384 -0
  44. package/src/component/dropdown.json +58 -0
  45. package/src/component/fab.json +490 -0
  46. package/src/component/filter.json +174 -0
  47. package/src/component/input-date-picker.json +224 -0
  48. package/src/component/input-datetime-local.json +230 -0
  49. package/src/component/input-email.json +244 -0
  50. package/src/component/input-file.json +244 -0
  51. package/src/component/input-message.json +72 -0
  52. package/src/component/input-month.json +244 -0
  53. package/src/component/input-number.json +244 -0
  54. package/src/component/input-password.json +244 -0
  55. package/src/component/input-search.json +244 -0
  56. package/src/component/input-telephone.json +244 -0
  57. package/src/component/input-text.json +244 -0
  58. package/src/component/input-time.json +1 -0
  59. package/src/component/input-week.json +244 -0
  60. package/src/component/label.json +26 -0
  61. package/src/component/link.json +44 -0
  62. package/src/component/loader.json +130 -0
  63. package/src/component/modal.json +278 -0
  64. package/src/component/notice.json +280 -0
  65. package/src/component/pagination.json +152 -0
  66. package/src/component/panel-header.json +88 -0
  67. package/src/component/popover.json +170 -0
  68. package/src/component/radio.json +124 -0
  69. package/src/component/rating.json +243 -0
  70. package/src/component/scrim.json +18 -0
  71. package/src/component/segmented-control.json +154 -0
  72. package/src/component/slider-histogram-range.json +284 -0
  73. package/src/component/slider-histogram.json +280 -0
  74. package/src/component/slider-range.json +226 -0
  75. package/src/component/slider.json +226 -0
  76. package/src/component/split-button.json +830 -0
  77. package/src/component/stepper-item.json +372 -0
  78. package/src/component/stepper.json +152 -0
  79. package/src/component/switch.json +178 -0
  80. package/src/component/tab-title.json +228 -0
  81. package/src/component/tabs.json +242 -0
  82. package/src/component/textarea.json +200 -0
  83. package/src/component/time-picker.json +138 -0
  84. package/src/component/tip-manager.json +118 -0
  85. package/src/component/tip.json +114 -0
  86. package/src/component/tooltip.json +66 -0
  87. package/src/component/tree-item.json +176 -0
  88. package/src/core.json +1709 -0
  89. package/src/semantic.json +1709 -0
  90. package/support/run.ts +16 -0
  91. package/support/token-transformer/format/scss.ts +81 -0
  92. package/support/token-transformer/getThemes.ts +41 -0
  93. package/support/token-transformer/parse/expandComposites.test.ts +144 -0
  94. package/support/token-transformer/parse/expandComposites.ts +72 -0
  95. package/support/token-transformer/sd-run.ts +147 -0
  96. package/support/token-transformer/transform/nameCamelCase.test.ts +36 -0
  97. package/support/token-transformer/transform/nameCamelCase.ts +15 -0
  98. package/support/token-transformer/transform/nameKebabCase.test.ts +36 -0
  99. package/support/token-transformer/transform/nameKebabCase.ts +26 -0
  100. package/support/token-transformer/utils/compositeTokens.test.ts +133 -0
  101. package/support/token-transformer/utils/compositeTokens.ts +103 -0
  102. package/support/token-transformer/utils/convertTokenToStyleDictionaryFormat.ts +20 -0
  103. package/support/token-transformer/utils/matchList.ts +11 -0
  104. package/support/token-transformer/utils/parseName.ts +18 -0
  105. package/support/token-transformer/utils/parseTokenPath.ts +19 -0
  106. package/support/token-transformer/utils/regex.ts +9 -0
  107. package/support/token-transformer/utils/sortAllTokens.ts +12 -0
  108. package/support/token-transformer/utils/transformOptions.ts +31 -0
  109. package/tsconfig-base.json +17 -0
  110. package/tsconfig-eslint.json +4 -0
  111. package/tsconfig.json +4 -0
package/src/component/card.json ADDED
@@ -0,0 +1,116 @@
1
+ {
2
+ "card": {
3
+ "font": {
4
+ "title": {
5
+ "light": {
6
+ "value": "$semantic.ui.color.text.1.light",
7
+ "type": "color"
8
+ },
9
+ "dark": {
10
+ "value": "$semantic.ui.color.text.1.dark",
11
+ "type": "color"
12
+ },
13
+ "md": {
14
+ "value": "$semantic.font.default.medium.-1h",
15
+ "type": "typography"
16
+ }
17
+ },
18
+ "subtile": {
19
+ "md": {
20
+ "value": "$semantic.font.default.regular.-2h",
21
+ "type": "typography"
22
+ }
23
+ },
24
+ "description": {
25
+ "md": {
26
+ "value": "$semantic.font.default.regular.-2h",
27
+ "type": "typography"
28
+ },
29
+ "light": {
30
+ "value": "$semantic.ui.color.text.3.light",
31
+ "type": "color"
32
+ },
33
+ "dark": {
34
+ "value": "$semantic.ui.color.text.3.dark",
35
+ "type": "color"
36
+ }
37
+ },
38
+ "subtitle": {
39
+ "light": {
40
+ "value": "$semantic.ui.color.text.2.light",
41
+ "type": "color"
42
+ },
43
+ "dark": {
44
+ "value": "$semantic.ui.color.text.2.dark",
45
+ "type": "color"
46
+ }
47
+ }
48
+ },
49
+ "border": {
50
+ "default": {
51
+ "light": {
52
+ "value": "$semantic.ui.color.border.2.light",
53
+ "type": "color"
54
+ },
55
+ "dark": {
56
+ "value": "$semantic.ui.color.border.2.dark",
57
+ "type": "color"
58
+ }
59
+ },
60
+ "active": {
61
+ "light": {
62
+ "value": "$semantic.ui.color.brand.default.light",
63
+ "type": "color"
64
+ },
65
+ "dark": {
66
+ "value": "$semantic.ui.color.brand.default.dark",
67
+ "type": "color"
68
+ }
69
+ }
70
+ },
71
+ "background": {
72
+ "default": {
73
+ "light": {
74
+ "value": "$semantic.ui.color.foreground.1.light",
75
+ "type": "color"
76
+ },
77
+ "dark": {
78
+ "value": "$semantic.ui.color.foreground.1.dark",
79
+ "type": "color"
80
+ }
81
+ }
82
+ },
83
+ "space-around": {
84
+ "md": {
85
+ "value": "$core.spacing.5",
86
+ "type": "spacing"
87
+ }
88
+ },
89
+ "space-between": {
90
+ "card": {
91
+ "md": {
92
+ "value": "$core.spacing.7",
93
+ "type": "spacing"
94
+ }
95
+ },
96
+ "title": {
97
+ "md": {
98
+ "value": "$core.spacing.3",
99
+ "type": "spacing"
100
+ }
101
+ }
102
+ },
103
+ "border-radius": {
104
+ "md": {
105
+ "value": "$core.border.border-radius.none",
106
+ "type": "borderRadius"
107
+ }
108
+ },
109
+ "border-width": {
110
+ "md": {
111
+ "value": "$core.border.border-width.0",
112
+ "type": "borderWidth"
113
+ }
114
+ }
115
+ }
116
+ }
package/src/component/checkbox.json ADDED
@@ -0,0 +1,110 @@
1
+ {
2
+ "checkbox": {
3
+ "comp-size": {
4
+ "sm": {
5
+ "value": "$core.sizing.5",
6
+ "type": "sizing"
7
+ },
8
+ "md": {
9
+ "value": "$core.sizing.6",
10
+ "type": "sizing"
11
+ },
12
+ "lg": {
13
+ "value": "$core.sizing.7",
14
+ "type": "sizing"
15
+ }
16
+ },
17
+ "space-between": {
18
+ "sm": {
19
+ "value": "$core.sizing.1",
20
+ "type": "spacing"
21
+ },
22
+ "md": {
23
+ "value": "$core.sizing.3",
24
+ "type": "spacing"
25
+ },
26
+ "lg": {
27
+ "value": "$core.sizing.3",
28
+ "type": "spacing"
29
+ }
30
+ },
31
+ "background": {
32
+ "default": {
33
+ "light": {
34
+ "value": "$semantic.ui.color.foreground.1.light",
35
+ "type": "color"
36
+ },
37
+ "dark": {
38
+ "value": "$semantic.ui.color.foreground.1.dark",
39
+ "type": "color"
40
+ }
41
+ },
42
+ "selected": {
43
+ "light": {
44
+ "value": "$semantic.ui.color.brand.default.light",
45
+ "type": "color"
46
+ },
47
+ "dark": {
48
+ "value": "$semantic.ui.color.brand.default.dark",
49
+ "type": "color"
50
+ }
51
+ }
52
+ },
53
+ "icon": {
54
+ "light": {
55
+ "value": "$semantic.ui.color.text.inverse.light",
56
+ "type": "color"
57
+ },
58
+ "dark": {
59
+ "value": "$semantic.ui.color.text.inverse.dark",
60
+ "type": "color"
61
+ }
62
+ },
63
+ "border-radius": {
64
+ "value": "$semantic.border.border-radius.sharp",
65
+ "type": "borderRadius"
66
+ },
67
+ "border-width": {
68
+ "value": "$core.border.border-width.0",
69
+ "type": "borderWidth"
70
+ },
71
+ "border": {
72
+ "light": {
73
+ "value": "$semantic.ui.color.border.input.light",
74
+ "type": "color"
75
+ },
76
+ "dark": {
77
+ "value": "$semantic.ui.color.border.input.dark",
78
+ "type": "color"
79
+ }
80
+ },
81
+ "font": {
82
+ "sm": {
83
+ "value": "$semantic.font.default.regular.-2h",
84
+ "type": "typography"
85
+ },
86
+ "md": {
87
+ "value": "$semantic.font.default.regular.-1h",
88
+ "type": "typography"
89
+ },
90
+ "lg": {
91
+ "value": "$semantic.font.default.regular.0h",
92
+ "type": "typography"
93
+ },
94
+ "light": {
95
+ "value": "$semantic.ui.color.text.1.light",
96
+ "type": "color"
97
+ },
98
+ "dark": {
99
+ "value": "$semantic.ui.color.text.1.dark",
100
+ "type": "color"
101
+ }
102
+ },
103
+ "space-around": {
104
+ "standard": {
105
+ "value": "$core.spacing.5",
106
+ "type": "spacing"
107
+ }
108
+ }
109
+ }
110
+ }
package/src/component/chip.json ADDED
@@ -0,0 +1,382 @@
1
+ {
2
+ "chip": {
3
+ "font": {
4
+ "clear": {
5
+ "light": {
6
+ "value": "$semantic.ui.color.text.1.light",
7
+ "type": "color"
8
+ },
9
+ "dark": {
10
+ "value": "$semantic.ui.color.text.1.dark",
11
+ "type": "color"
12
+ }
13
+ },
14
+ "sm": {
15
+ "value": "$semantic.font.default.medium.-2h",
16
+ "type": "typography"
17
+ },
18
+ "md": {
19
+ "value": "$semantic.font.default.medium.-1h",
20
+ "type": "typography"
21
+ },
22
+ "lg": {
23
+ "value": "$semantic.font.default.medium.0h",
24
+ "type": "typography"
25
+ },
26
+ "solid": {
27
+ "grey": {
28
+ "light": {
29
+ "value": "$semantic.ui.color.text.1.light",
30
+ "type": "color"
31
+ },
32
+ "dark": {
33
+ "value": "$semantic.ui.color.text.1.dark",
34
+ "type": "color"
35
+ }
36
+ },
37
+ "blue": {
38
+ "light": {
39
+ "value": "$semantic.ui.color.text.inverse.light",
40
+ "type": "color"
41
+ },
42
+ "dark": {
43
+ "value": "$semantic.ui.color.text.inverse.dark",
44
+ "type": "color"
45
+ }
46
+ },
47
+ "red": {
48
+ "light": {
49
+ "value": "$semantic.ui.color.text.inverse.light",
50
+ "type": "color"
51
+ },
52
+ "dark": {
53
+ "value": "$semantic.ui.color.text.inverse.dark",
54
+ "type": "color"
55
+ }
56
+ },
57
+ "yellow": {
58
+ "light": {
59
+ "value": "$semantic.ui.color.text.1.light",
60
+ "type": "color"
61
+ },
62
+ "dark": {
63
+ "value": "$semantic.ui.color.text.inverse.dark",
64
+ "type": "color"
65
+ }
66
+ },
67
+ "green": {
68
+ "light": {
69
+ "value": "$semantic.ui.color.text.1.light",
70
+ "type": "color"
71
+ },
72
+ "dark": {
73
+ "value": "$semantic.ui.color.text.inverse.dark",
74
+ "type": "color"
75
+ }
76
+ }
77
+ }
78
+ },
79
+ "icon": {
80
+ "solid": {
81
+ "grey": {
82
+ "light": {
83
+ "value": "$semantic.ui.color.text.1.light",
84
+ "type": "color"
85
+ },
86
+ "dark": {
87
+ "value": "$semantic.ui.color.text.1.dark",
88
+ "type": "color"
89
+ }
90
+ },
91
+ "blue": {
92
+ "light": {
93
+ "value": "$semantic.ui.color.text.inverse.light",
94
+ "type": "color"
95
+ },
96
+ "dark": {
97
+ "value": "$semantic.ui.color.text.inverse.dark",
98
+ "type": "color"
99
+ }
100
+ },
101
+ "red": {
102
+ "light": {
103
+ "value": "$semantic.ui.color.text.inverse.light",
104
+ "type": "color"
105
+ },
106
+ "dark": {
107
+ "value": "$semantic.ui.color.text.inverse.dark",
108
+ "type": "color"
109
+ }
110
+ },
111
+ "yellow": {
112
+ "light": {
113
+ "value": "$semantic.ui.color.text.1.light",
114
+ "type": "color"
115
+ },
116
+ "dark": {
117
+ "value": "$semantic.ui.color.text.inverse.dark",
118
+ "type": "color"
119
+ }
120
+ },
121
+ "green": {
122
+ "light": {
123
+ "value": "$semantic.ui.color.text.1.light",
124
+ "type": "color"
125
+ },
126
+ "dark": {
127
+ "value": "$semantic.ui.color.text.inverse.dark",
128
+ "type": "color"
129
+ }
130
+ }
131
+ },
132
+ "clear": {
133
+ "light": {
134
+ "value": "$semantic.ui.color.text.1.light",
135
+ "type": "color"
136
+ },
137
+ "dark": {
138
+ "value": "$semantic.ui.color.text.1.dark",
139
+ "type": "color"
140
+ }
141
+ },
142
+ "space-around": {
143
+ "right": {
144
+ "sm": {
145
+ "value": "$core.spacing.none",
146
+ "type": "spacing"
147
+ },
148
+ "md": {
149
+ "value": "$core.spacing.1",
150
+ "type": "spacing"
151
+ },
152
+ "lg": {
153
+ "value": "$core.spacing.1",
154
+ "type": "spacing"
155
+ }
156
+ },
157
+ "left": {
158
+ "sm": {
159
+ "value": "$core.spacing.3",
160
+ "type": "spacing"
161
+ },
162
+ "md": {
163
+ "value": "$core.spacing.3",
164
+ "type": "spacing"
165
+ },
166
+ "lg": {
167
+ "value": "$core.spacing.5",
168
+ "type": "spacing"
169
+ }
170
+ }
171
+ }
172
+ },
173
+ "background": {
174
+ "solid": {
175
+ "grey": {
176
+ "light": {
177
+ "value": "$semantic.ui.color.foreground.2.light",
178
+ "type": "color"
179
+ },
180
+ "dark": {
181
+ "value": "$semantic.ui.color.foreground.2.dark",
182
+ "type": "color"
183
+ }
184
+ },
185
+ "red": {
186
+ "light": {
187
+ "value": "$semantic.ui.color.danger.default.light",
188
+ "type": "color"
189
+ },
190
+ "dark": {
191
+ "value": "$semantic.ui.color.danger.default.dark",
192
+ "type": "color"
193
+ }
194
+ },
195
+ "blue": {
196
+ "light": {
197
+ "value": "$semantic.ui.color.info.default.light",
198
+ "type": "color"
199
+ },
200
+ "dark": {
201
+ "value": "$semantic.ui.color.info.default.dark",
202
+ "type": "color"
203
+ }
204
+ },
205
+ "green": {
206
+ "light": {
207
+ "value": "$semantic.ui.color.success.default.light",
208
+ "type": "color"
209
+ },
210
+ "dark": {
211
+ "value": "$semantic.ui.color.success.default.dark",
212
+ "type": "color"
213
+ }
214
+ },
215
+ "yellow": {
216
+ "light": {
217
+ "value": "$semantic.ui.color.warning.default.light",
218
+ "type": "color"
219
+ },
220
+ "dark": {
221
+ "value": "$semantic.ui.color.warning.default.dark",
222
+ "type": "color"
223
+ }
224
+ }
225
+ }
226
+ },
227
+ "border-radius": {
228
+ "sm": {
229
+ "value": "$core.border.border-radius.4",
230
+ "type": "borderRadius"
231
+ },
232
+ "md": {
233
+ "value": "$core.border.border-radius.5",
234
+ "type": "borderRadius"
235
+ },
236
+ "lg": {
237
+ "value": "$core.border.border-radius.6",
238
+ "type": "borderRadius"
239
+ }
240
+ },
241
+ "icon-size": {
242
+ "sm": {
243
+ "value": "$core.sizing.7",
244
+ "type": "sizing"
245
+ },
246
+ "md": {
247
+ "value": "$core.sizing.7",
248
+ "type": "sizing"
249
+ },
250
+ "lg": {
251
+ "value": "$core.sizing.7",
252
+ "type": "sizing"
253
+ }
254
+ },
255
+ "closable-icon": {
256
+ "light": {
257
+ "value": "$semantic.ui.color.text.3.light",
258
+ "type": "color"
259
+ },
260
+ "dark": {
261
+ "value": "$semantic.ui.color.text.3.dark",
262
+ "type": "color"
263
+ },
264
+ "space-around": {
265
+ "sm": {
266
+ "value": "$core.spacing.1",
267
+ "type": "spacing"
268
+ },
269
+ "md": {
270
+ "value": "$core.spacing.1",
271
+ "type": "spacing"
272
+ },
273
+ "lg": {
274
+ "value": "$core.spacing.1",
275
+ "type": "spacing"
276
+ }
277
+ }
278
+ },
279
+ "border": {
280
+ "clear": {
281
+ "grey": {
282
+ "light": {
283
+ "value": "$semantic.ui.color.border.1.light",
284
+ "type": "color"
285
+ },
286
+ "dark": {
287
+ "value": "$semantic.ui.color.border.1.dark",
288
+ "type": "color"
289
+ }
290
+ },
291
+ "red": {
292
+ "light": {
293
+ "value": "$semantic.ui.color.danger.default.light",
294
+ "type": "color"
295
+ },
296
+ "dark": {
297
+ "value": "$semantic.ui.color.danger.default.dark",
298
+ "type": "color"
299
+ }
300
+ },
301
+ "blue": {
302
+ "light": {
303
+ "value": "$semantic.ui.color.info.default.light",
304
+ "type": "color"
305
+ },
306
+ "dark": {
307
+ "value": "$semantic.ui.color.info.default.dark",
308
+ "type": "color"
309
+ }
310
+ },
311
+ "green": {
312
+ "light": {
313
+ "value": "$semantic.ui.color.success.default.light",
314
+ "type": "color"
315
+ },
316
+ "dark": {
317
+ "value": "$semantic.ui.color.success.default.dark",
318
+ "type": "color"
319
+ }
320
+ },
321
+ "yellow": {
322
+ "light": {
323
+ "value": "$semantic.ui.color.warning.default.light",
324
+ "type": "color"
325
+ },
326
+ "dark": {
327
+ "value": "$semantic.ui.color.warning.default.dark",
328
+ "type": "color"
329
+ }
330
+ }
331
+ }
332
+ },
333
+ "space-around": {
334
+ "sm": {
335
+ "value": "$core.spacing.3",
336
+ "type": "spacing"
337
+ },
338
+ "md": {
339
+ "value": "$core.spacing.5",
340
+ "type": "spacing"
341
+ },
342
+ "lg": {
343
+ "value": "$core.spacing.7",
344
+ "type": "spacing"
345
+ }
346
+ },
347
+ "space-between": {
348
+ "sm": {
349
+ "value": "$core.spacing.3",
350
+ "type": "spacing"
351
+ },
352
+ "md": {
353
+ "value": "$core.spacing.5",
354
+ "type": "spacing"
355
+ },
356
+ "lg": {
357
+ "value": "$core.spacing.7",
358
+ "type": "spacing"
359
+ }
360
+ },
361
+ "border-width": {
362
+ "value": "$core.border.border-width.0",
363
+ "type": "borderWidth"
364
+ },
365
+ "text": {
366
+ "space-around": {
367
+ "sm": {
368
+ "value": "$core.spacing.3",
369
+ "type": "spacing"
370
+ },
371
+ "md": {
372
+ "value": "$core.spacing.3",
373
+ "type": "spacing"
374
+ },
375
+ "lg": {
376
+ "value": "$core.spacing.5",
377
+ "type": "spacing"
378
+ }
379
+ }
380
+ }
381
+ }
382
+ }