@esri/calcite-design-tokens 3.0.1 → 3.0.2-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.
@@ -1,362 +1,357 @@
1
1
  /**
2
- * Do not edit directly
3
- * Generated on Wed, 26 Mar 2025 15:53:09 GMT
2
+ * Calcite Design System
3
+ * File to be deprecated in next major release
4
+ * Do not edit directly, this file was auto-generated.
4
5
  */
5
6
 
6
7
  export default tokens;
7
8
 
8
9
  declare interface DesignToken {
9
- value: any;
10
- name?: string;
10
+ value?: any;
11
+ type?: string;
11
12
  comment?: string;
13
+ name?: string;
12
14
  themeable?: boolean;
13
- attributes?: {
14
- category?: string;
15
- type?: string;
16
- item?: string;
17
- subitem?: string;
18
- state?: string;
19
- [key: string]: any;
20
- };
15
+ attributes?: Record<string, unknown>;
21
16
  [key: string]: any;
22
17
  }
23
18
 
24
19
  declare const tokens: {
25
- "semantic": {
26
- "border": {
27
- "width": {
28
- "none": DesignToken,
29
- "sm": DesignToken,
30
- "md": DesignToken,
31
- "lg": DesignToken
32
- }
33
- },
34
- "color": {
35
- "background": {
36
- "default": DesignToken,
37
- "none": DesignToken
38
- },
39
- "foreground": {
40
- "1": DesignToken,
41
- "2": DesignToken,
42
- "3": DesignToken,
43
- "current": DesignToken
44
- },
45
- "transparent": {
46
- "default": {
47
- "default": DesignToken,
48
- "hover": DesignToken,
49
- "press": DesignToken
50
- },
51
- "scrim": DesignToken,
52
- "tint": DesignToken
53
- },
54
- "brand": {
55
- "default": {
56
- "default": DesignToken,
57
- "hover": DesignToken,
58
- "press": DesignToken
59
- },
60
- "underline": DesignToken
61
- },
62
- "status": {
63
- "info": {
64
- "default": DesignToken,
65
- "hover": DesignToken,
66
- "press": DesignToken
67
- },
68
- "success": {
69
- "default": DesignToken,
70
- "hover": DesignToken,
71
- "press": DesignToken
72
- },
73
- "warning": {
74
- "default": DesignToken,
75
- "hover": DesignToken,
76
- "press": DesignToken
77
- },
78
- "danger": {
79
- "default": DesignToken,
80
- "hover": DesignToken,
81
- "press": DesignToken
82
- }
83
- },
84
- "inverse": {
85
- "default": DesignToken,
86
- "hover": DesignToken,
87
- "press": DesignToken
88
- },
89
- "text": {
90
- "1": DesignToken,
91
- "2": DesignToken,
92
- "3": DesignToken,
93
- "inverse": DesignToken,
94
- "link": DesignToken
95
- },
96
- "border": {
97
- "1": DesignToken,
98
- "2": DesignToken,
99
- "3": DesignToken,
100
- "input": DesignToken,
101
- "ghost": DesignToken,
102
- "white": DesignToken
103
- }
104
- },
20
+ semantic: {
21
+ border: {
22
+ width: {
23
+ none: DesignToken;
24
+ sm: DesignToken;
25
+ md: DesignToken;
26
+ lg: DesignToken;
27
+ };
28
+ };
29
+ color: {
30
+ background: {
31
+ default: DesignToken;
32
+ none: DesignToken;
33
+ };
34
+ foreground: {
35
+ "1": DesignToken;
36
+ "2": DesignToken;
37
+ "3": DesignToken;
38
+ current: DesignToken;
39
+ };
40
+ transparent: {
41
+ default: {
42
+ default: DesignToken;
43
+ hover: DesignToken;
44
+ press: DesignToken;
45
+ };
46
+ scrim: DesignToken;
47
+ tint: DesignToken;
48
+ };
49
+ brand: {
50
+ default: {
51
+ default: DesignToken;
52
+ hover: DesignToken;
53
+ press: DesignToken;
54
+ };
55
+ underline: DesignToken;
56
+ };
57
+ status: {
58
+ info: {
59
+ default: DesignToken;
60
+ hover: DesignToken;
61
+ press: DesignToken;
62
+ };
63
+ success: {
64
+ default: DesignToken;
65
+ hover: DesignToken;
66
+ press: DesignToken;
67
+ };
68
+ warning: {
69
+ default: DesignToken;
70
+ hover: DesignToken;
71
+ press: DesignToken;
72
+ };
73
+ danger: {
74
+ default: DesignToken;
75
+ hover: DesignToken;
76
+ press: DesignToken;
77
+ };
78
+ };
79
+ inverse: {
80
+ default: DesignToken;
81
+ hover: DesignToken;
82
+ press: DesignToken;
83
+ };
84
+ text: {
85
+ "1": DesignToken;
86
+ "2": DesignToken;
87
+ "3": DesignToken;
88
+ inverse: DesignToken;
89
+ link: DesignToken;
90
+ };
91
+ border: {
92
+ "1": DesignToken;
93
+ "2": DesignToken;
94
+ "3": DesignToken;
95
+ input: DesignToken;
96
+ ghost: DesignToken;
97
+ white: DesignToken;
98
+ };
99
+ };
105
100
  "container-size": {
106
- "height": {
107
- "xxs": DesignToken,
108
- "xs": DesignToken,
109
- "sm": DesignToken,
110
- "md": DesignToken,
111
- "lg": DesignToken,
112
- "xl": DesignToken
113
- },
114
- "width": {
115
- "xxs": DesignToken,
116
- "xs": DesignToken,
117
- "sm": DesignToken,
118
- "md": DesignToken,
119
- "lg": DesignToken,
120
- "xl": DesignToken
121
- },
122
- "margin": DesignToken,
123
- "gutter": DesignToken,
124
- "content": {
125
- "fluid": DesignToken,
126
- "fixed": DesignToken
127
- }
128
- },
129
- "corner": {
130
- "radius": {
131
- "default": DesignToken,
132
- "sharp": DesignToken,
133
- "round": DesignToken,
134
- "pill": DesignToken
135
- }
136
- },
137
- "font": {
138
- "family": {
139
- "default": DesignToken,
140
- "code": DesignToken
141
- },
142
- "weight": {
143
- "light": DesignToken,
144
- "normal": DesignToken,
145
- "regular": DesignToken,
146
- "medium": DesignToken,
147
- "semibold": DesignToken,
148
- "bold": DesignToken
149
- },
150
- "size": {
151
- "xs": DesignToken,
152
- "sm": DesignToken,
153
- "default": DesignToken,
154
- "md": DesignToken,
155
- "lg": DesignToken,
156
- "xl": DesignToken,
157
- "xxl": DesignToken
158
- },
159
- "style": {
160
- "emphasis": DesignToken
161
- },
101
+ height: {
102
+ xxs: DesignToken;
103
+ xs: DesignToken;
104
+ sm: DesignToken;
105
+ md: DesignToken;
106
+ lg: DesignToken;
107
+ xl: DesignToken;
108
+ };
109
+ width: {
110
+ xxs: DesignToken;
111
+ xs: DesignToken;
112
+ sm: DesignToken;
113
+ md: DesignToken;
114
+ lg: DesignToken;
115
+ xl: DesignToken;
116
+ };
117
+ margin: DesignToken;
118
+ gutter: DesignToken;
119
+ content: {
120
+ fluid: DesignToken;
121
+ fixed: DesignToken;
122
+ };
123
+ };
124
+ corner: {
125
+ radius: {
126
+ default: DesignToken;
127
+ sharp: DesignToken;
128
+ round: DesignToken;
129
+ pill: DesignToken;
130
+ };
131
+ };
132
+ font: {
133
+ family: {
134
+ default: DesignToken;
135
+ code: DesignToken;
136
+ };
137
+ weight: {
138
+ light: DesignToken;
139
+ normal: DesignToken;
140
+ regular: DesignToken;
141
+ medium: DesignToken;
142
+ semibold: DesignToken;
143
+ bold: DesignToken;
144
+ };
145
+ size: {
146
+ xs: DesignToken;
147
+ sm: DesignToken;
148
+ default: DesignToken;
149
+ md: DesignToken;
150
+ lg: DesignToken;
151
+ xl: DesignToken;
152
+ xxl: DesignToken;
153
+ };
154
+ style: {
155
+ emphasis: DesignToken;
156
+ };
162
157
  "line-height": {
163
- "fixed": {
164
- "sm": DesignToken,
165
- "base": DesignToken,
166
- "lg": DesignToken,
167
- "xl": DesignToken
168
- },
169
- "relative": {
170
- "default": DesignToken,
171
- "tight": DesignToken,
172
- "snug": DesignToken,
173
- "normal": DesignToken,
174
- "relaxed": DesignToken,
175
- "loose": DesignToken
176
- }
177
- },
158
+ fixed: {
159
+ sm: DesignToken;
160
+ base: DesignToken;
161
+ lg: DesignToken;
162
+ xl: DesignToken;
163
+ };
164
+ relative: {
165
+ default: DesignToken;
166
+ tight: DesignToken;
167
+ snug: DesignToken;
168
+ normal: DesignToken;
169
+ relaxed: DesignToken;
170
+ loose: DesignToken;
171
+ };
172
+ };
178
173
  "letter-spacing": {
179
- "tight": DesignToken,
180
- "normal": DesignToken,
181
- "wide": DesignToken
182
- },
174
+ tight: DesignToken;
175
+ normal: DesignToken;
176
+ wide: DesignToken;
177
+ };
183
178
  "paragraph-spacing": {
184
- "normal": DesignToken
185
- },
179
+ normal: DesignToken;
180
+ };
186
181
  "text-decoration": {
187
- "none": DesignToken,
188
- "underline": DesignToken
189
- },
182
+ none: DesignToken;
183
+ underline: DesignToken;
184
+ };
190
185
  "text-case": {
191
- "none": DesignToken,
192
- "uppercase": DesignToken,
193
- "lowercase": DesignToken,
194
- "capitalize": DesignToken
195
- }
196
- },
197
- "opacity": {
198
- "light": DesignToken,
199
- "half": DesignToken,
200
- "dark": DesignToken,
201
- "full": DesignToken,
202
- "disabled": DesignToken
203
- },
204
- "shadow": {
205
- "none": DesignToken,
206
- "sm": DesignToken,
207
- "md": DesignToken
208
- },
209
- "size": {
210
- "fixed": {
211
- "xxxs": DesignToken,
212
- "xxs": DesignToken,
213
- "xs": DesignToken,
214
- "sm": DesignToken,
215
- "sm+": DesignToken,
216
- "md": DesignToken,
217
- "md+": DesignToken,
218
- "lg": DesignToken,
219
- "xl": DesignToken,
220
- "xxl": DesignToken,
221
- "xxxl": DesignToken
222
- },
223
- "default": {
224
- "px": DesignToken,
225
- "xxxs": DesignToken,
226
- "xxs": DesignToken,
227
- "xs": DesignToken,
228
- "sm": DesignToken,
229
- "md": DesignToken,
230
- "lg": DesignToken,
231
- "xl": DesignToken,
232
- "xxl": DesignToken,
233
- "xxxl": DesignToken
234
- }
235
- },
236
- "spacing": {
237
- "fixed": {
238
- "xxs": DesignToken,
239
- "xs": DesignToken,
240
- "sm": DesignToken,
241
- "md": DesignToken,
242
- "lg": DesignToken,
243
- "xl": DesignToken,
244
- "xxl": DesignToken,
245
- "xxxl": DesignToken
246
- },
247
- "default": {
248
- "none": DesignToken,
249
- "px": DesignToken,
250
- "base": DesignToken,
251
- "xxs": DesignToken,
252
- "xs": DesignToken,
253
- "sm": DesignToken,
254
- "sm+": DesignToken,
255
- "md": DesignToken,
256
- "md+": DesignToken,
257
- "lg": DesignToken,
258
- "xl": DesignToken,
259
- "xxl": DesignToken,
260
- "xxxl": DesignToken
261
- }
262
- },
263
- "typography": {
264
- "default": {
265
- "default": DesignToken,
266
- "light": {
267
- "-3h": DesignToken,
268
- "-2h": DesignToken,
269
- "-1h": DesignToken,
270
- "0h": DesignToken,
271
- "1h": DesignToken
272
- },
273
- "regular": {
274
- "-3h": DesignToken,
275
- "-2h": DesignToken,
276
- "-1h": DesignToken,
277
- "0h": DesignToken,
278
- "1h": DesignToken
279
- },
280
- "medium": {
281
- "-3h": DesignToken,
282
- "-2h": DesignToken,
283
- "-1h": DesignToken,
284
- "0h": DesignToken,
285
- "1h": DesignToken
286
- },
287
- "bold": {
288
- "-3h": DesignToken,
289
- "-2h": DesignToken,
290
- "-1h": DesignToken,
291
- "0h": DesignToken,
292
- "1h": DesignToken
293
- }
294
- },
295
- "wrap": {
296
- "light": {
297
- "0": DesignToken,
298
- "1": DesignToken,
299
- "2": DesignToken,
300
- "3": DesignToken,
301
- "-2": DesignToken,
302
- "-1": DesignToken
303
- },
304
- "regular": {
305
- "0": DesignToken,
306
- "1": DesignToken,
307
- "2": DesignToken,
308
- "3": DesignToken,
309
- "-2": DesignToken,
310
- "-1": DesignToken
311
- },
312
- "medium": {
313
- "0": DesignToken,
314
- "1": DesignToken,
315
- "2": DesignToken,
316
- "3": DesignToken,
317
- "-2": DesignToken,
318
- "-1": DesignToken
319
- },
320
- "bold": {
321
- "0": DesignToken,
322
- "1": DesignToken,
323
- "2": DesignToken,
324
- "3": DesignToken,
325
- "-2": DesignToken,
326
- "-1": DesignToken
327
- }
328
- },
329
- "hierarchy": {
330
- "display": {
331
- "1": DesignToken,
332
- "2": DesignToken
333
- },
334
- "heading": {
335
- "1": DesignToken,
336
- "2": DesignToken,
337
- "3": DesignToken,
338
- "4": DesignToken,
339
- "5": DesignToken
340
- },
341
- "body": {
342
- "snug": DesignToken,
343
- "default": DesignToken
344
- },
345
- "overline": DesignToken,
346
- "caption": DesignToken
347
- }
348
- },
186
+ none: DesignToken;
187
+ uppercase: DesignToken;
188
+ lowercase: DesignToken;
189
+ capitalize: DesignToken;
190
+ };
191
+ };
192
+ opacity: {
193
+ light: DesignToken;
194
+ half: DesignToken;
195
+ dark: DesignToken;
196
+ full: DesignToken;
197
+ disabled: DesignToken;
198
+ };
199
+ shadow: {
200
+ none: DesignToken;
201
+ sm: DesignToken;
202
+ md: DesignToken;
203
+ };
204
+ size: {
205
+ fixed: {
206
+ xxxs: DesignToken;
207
+ xxs: DesignToken;
208
+ xs: DesignToken;
209
+ sm: DesignToken;
210
+ "sm+": DesignToken;
211
+ md: DesignToken;
212
+ "md+": DesignToken;
213
+ lg: DesignToken;
214
+ xl: DesignToken;
215
+ xxl: DesignToken;
216
+ xxxl: DesignToken;
217
+ };
218
+ default: {
219
+ px: DesignToken;
220
+ xxxs: DesignToken;
221
+ xxs: DesignToken;
222
+ xs: DesignToken;
223
+ sm: DesignToken;
224
+ md: DesignToken;
225
+ lg: DesignToken;
226
+ xl: DesignToken;
227
+ xxl: DesignToken;
228
+ xxxl: DesignToken;
229
+ };
230
+ };
231
+ spacing: {
232
+ fixed: {
233
+ xxs: DesignToken;
234
+ xs: DesignToken;
235
+ sm: DesignToken;
236
+ md: DesignToken;
237
+ lg: DesignToken;
238
+ xl: DesignToken;
239
+ xxl: DesignToken;
240
+ xxxl: DesignToken;
241
+ };
242
+ default: {
243
+ none: DesignToken;
244
+ px: DesignToken;
245
+ base: DesignToken;
246
+ xxs: DesignToken;
247
+ xs: DesignToken;
248
+ sm: DesignToken;
249
+ "sm+": DesignToken;
250
+ md: DesignToken;
251
+ "md+": DesignToken;
252
+ lg: DesignToken;
253
+ xl: DesignToken;
254
+ xxl: DesignToken;
255
+ xxxl: DesignToken;
256
+ };
257
+ };
258
+ typography: {
259
+ default: {
260
+ default: DesignToken;
261
+ light: {
262
+ "-3h": DesignToken;
263
+ "-2h": DesignToken;
264
+ "-1h": DesignToken;
265
+ "0h": DesignToken;
266
+ "1h": DesignToken;
267
+ };
268
+ regular: {
269
+ "-3h": DesignToken;
270
+ "-2h": DesignToken;
271
+ "-1h": DesignToken;
272
+ "0h": DesignToken;
273
+ "1h": DesignToken;
274
+ };
275
+ medium: {
276
+ "-3h": DesignToken;
277
+ "-2h": DesignToken;
278
+ "-1h": DesignToken;
279
+ "0h": DesignToken;
280
+ "1h": DesignToken;
281
+ };
282
+ bold: {
283
+ "-3h": DesignToken;
284
+ "-2h": DesignToken;
285
+ "-1h": DesignToken;
286
+ "0h": DesignToken;
287
+ "1h": DesignToken;
288
+ };
289
+ };
290
+ wrap: {
291
+ light: {
292
+ "0": DesignToken;
293
+ "1": DesignToken;
294
+ "2": DesignToken;
295
+ "3": DesignToken;
296
+ "-2": DesignToken;
297
+ "-1": DesignToken;
298
+ };
299
+ regular: {
300
+ "0": DesignToken;
301
+ "1": DesignToken;
302
+ "2": DesignToken;
303
+ "3": DesignToken;
304
+ "-2": DesignToken;
305
+ "-1": DesignToken;
306
+ };
307
+ medium: {
308
+ "0": DesignToken;
309
+ "1": DesignToken;
310
+ "2": DesignToken;
311
+ "3": DesignToken;
312
+ "-2": DesignToken;
313
+ "-1": DesignToken;
314
+ };
315
+ bold: {
316
+ "0": DesignToken;
317
+ "1": DesignToken;
318
+ "2": DesignToken;
319
+ "3": DesignToken;
320
+ "-2": DesignToken;
321
+ "-1": DesignToken;
322
+ };
323
+ };
324
+ hierarchy: {
325
+ display: {
326
+ "1": DesignToken;
327
+ "2": DesignToken;
328
+ };
329
+ heading: {
330
+ "1": DesignToken;
331
+ "2": DesignToken;
332
+ "3": DesignToken;
333
+ "4": DesignToken;
334
+ "5": DesignToken;
335
+ };
336
+ body: {
337
+ snug: DesignToken;
338
+ default: DesignToken;
339
+ };
340
+ overline: DesignToken;
341
+ caption: DesignToken;
342
+ };
343
+ };
349
344
  "z-index": {
350
- "deep": DesignToken,
351
- "default": DesignToken,
352
- "sticky": DesignToken,
353
- "header": DesignToken,
354
- "toast": DesignToken,
355
- "dropdown": DesignToken,
356
- "overlay": DesignToken,
357
- "modal": DesignToken,
358
- "popup": DesignToken,
359
- "tooltip": DesignToken
360
- }
361
- }
362
- }
345
+ deep: DesignToken;
346
+ default: DesignToken;
347
+ sticky: DesignToken;
348
+ header: DesignToken;
349
+ toast: DesignToken;
350
+ dropdown: DesignToken;
351
+ overlay: DesignToken;
352
+ modal: DesignToken;
353
+ popup: DesignToken;
354
+ tooltip: DesignToken;
355
+ };
356
+ };
357
+ };