@arbor-css/preset 0.0.65 → 0.0.66
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.
- package/dist/arborPreset.d.ts +1005 -258
- package/dist/arborPreset.d.ts.map +1 -1
- package/dist/arborPreset.js +170 -49
- package/dist/arborPreset.js.map +1 -1
- package/package.json +12 -12
package/dist/arborPreset.d.ts
CHANGED
|
@@ -6,95 +6,245 @@ import { CreateToken } from '@arbor-css/tokens';
|
|
|
6
6
|
export declare const arborModeDefinition: {
|
|
7
7
|
color: {
|
|
8
8
|
main: {
|
|
9
|
-
$root:
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
9
|
+
$root: {
|
|
10
|
+
purpose: "color";
|
|
11
|
+
description: string;
|
|
12
|
+
};
|
|
13
|
+
paper: {
|
|
14
|
+
purpose: "color";
|
|
15
|
+
description: "A very light shade, good for backgrounds and surfaces";
|
|
16
|
+
};
|
|
17
|
+
wash: {
|
|
18
|
+
purpose: "color";
|
|
19
|
+
description: "A very faint but colorful shade, good for backgrounds and surfaces";
|
|
20
|
+
};
|
|
21
|
+
light: {
|
|
22
|
+
purpose: "color";
|
|
23
|
+
description: "A light shade of the mode's main color, good for emphasized surfaces.";
|
|
24
|
+
};
|
|
25
|
+
mid: {
|
|
26
|
+
purpose: "color";
|
|
27
|
+
description: "The main shade of the mode's main color, good for primary actions and decoration.";
|
|
28
|
+
};
|
|
29
|
+
heavy: {
|
|
30
|
+
purpose: "color";
|
|
31
|
+
description: "A heavy shade of the mode's main color, good for text emphasis and accents.";
|
|
32
|
+
};
|
|
33
|
+
ink: {
|
|
34
|
+
purpose: "color";
|
|
35
|
+
description: "A very dark but still colorful shade of the mode's main color, good for text and high contrast elements.";
|
|
36
|
+
};
|
|
16
37
|
};
|
|
17
38
|
neutral: {
|
|
18
|
-
$root:
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
39
|
+
$root: {
|
|
40
|
+
purpose: "color";
|
|
41
|
+
description: string;
|
|
42
|
+
};
|
|
43
|
+
paper: {
|
|
44
|
+
purpose: "color";
|
|
45
|
+
description: "A very light neutral shade, good for backgrounds and surfaces";
|
|
46
|
+
};
|
|
47
|
+
wash: {
|
|
48
|
+
purpose: "color";
|
|
49
|
+
description: "A faint neutral shade, good for backgrounds and surfaces";
|
|
50
|
+
};
|
|
51
|
+
light: {
|
|
52
|
+
purpose: "color";
|
|
53
|
+
description: "A light neutral shade, good for emphasized surfaces";
|
|
54
|
+
};
|
|
55
|
+
mid: {
|
|
56
|
+
purpose: "color";
|
|
57
|
+
description: "The main neutral shade, good for primary actions and decoration";
|
|
58
|
+
};
|
|
59
|
+
heavy: {
|
|
60
|
+
purpose: "color";
|
|
61
|
+
description: "A heavy neutral shade, good for low-emphasis text and accents";
|
|
62
|
+
};
|
|
63
|
+
ink: {
|
|
64
|
+
purpose: "color";
|
|
65
|
+
description: "A very dark neutral shade, good for text and high contrast elements";
|
|
66
|
+
};
|
|
25
67
|
};
|
|
26
68
|
};
|
|
27
69
|
action: {
|
|
28
70
|
padding: {
|
|
29
|
-
$root:
|
|
30
|
-
|
|
31
|
-
|
|
71
|
+
$root: {
|
|
72
|
+
purpose: "other";
|
|
73
|
+
description: string;
|
|
74
|
+
};
|
|
75
|
+
inline: {
|
|
76
|
+
purpose: "spacing";
|
|
77
|
+
description: "Inline (horizontal, usually) padding";
|
|
78
|
+
};
|
|
79
|
+
block: {
|
|
80
|
+
purpose: "spacing";
|
|
81
|
+
description: "Block (vertical, usually) padding";
|
|
82
|
+
};
|
|
83
|
+
};
|
|
84
|
+
roundness: {
|
|
85
|
+
purpose: "other";
|
|
86
|
+
description: "This token controls the overall roundness of actions and stacks with the root roundness token";
|
|
87
|
+
};
|
|
88
|
+
borderRadius: {
|
|
89
|
+
purpose: "border-radius";
|
|
90
|
+
description: "This token captures the border-radius of actions, taking into account the overall roundness";
|
|
32
91
|
};
|
|
33
|
-
roundness: "other";
|
|
34
|
-
borderRadius: "border-radius";
|
|
35
92
|
primary: {
|
|
36
93
|
color: {
|
|
37
|
-
fg:
|
|
38
|
-
|
|
39
|
-
|
|
94
|
+
fg: {
|
|
95
|
+
purpose: "color";
|
|
96
|
+
description: "Intended for use as the foreground color";
|
|
97
|
+
};
|
|
98
|
+
bg: {
|
|
99
|
+
purpose: "color";
|
|
100
|
+
description: "Intended for use as the background color";
|
|
101
|
+
};
|
|
102
|
+
border: {
|
|
103
|
+
purpose: "color";
|
|
104
|
+
description: "Intended for use as the border color, if desired";
|
|
105
|
+
};
|
|
40
106
|
};
|
|
41
107
|
};
|
|
42
108
|
secondary: {
|
|
43
109
|
color: {
|
|
44
|
-
fg:
|
|
45
|
-
|
|
46
|
-
|
|
110
|
+
fg: {
|
|
111
|
+
purpose: "color";
|
|
112
|
+
description: "Intended for use as the foreground color";
|
|
113
|
+
};
|
|
114
|
+
bg: {
|
|
115
|
+
purpose: "color";
|
|
116
|
+
description: "Intended for use as the background color";
|
|
117
|
+
};
|
|
118
|
+
border: {
|
|
119
|
+
purpose: "color";
|
|
120
|
+
description: "Intended for use as the border color, if desired";
|
|
121
|
+
};
|
|
47
122
|
};
|
|
48
123
|
};
|
|
49
124
|
ambient: {
|
|
50
125
|
color: {
|
|
51
|
-
fg:
|
|
52
|
-
|
|
53
|
-
|
|
126
|
+
fg: {
|
|
127
|
+
purpose: "color";
|
|
128
|
+
description: "Intended for use as the foreground color";
|
|
129
|
+
};
|
|
130
|
+
bg: {
|
|
131
|
+
purpose: "color";
|
|
132
|
+
description: "Intended for use as the background color";
|
|
133
|
+
};
|
|
134
|
+
border: {
|
|
135
|
+
purpose: "color";
|
|
136
|
+
description: "Intended for use as the border color, if desired";
|
|
137
|
+
};
|
|
54
138
|
};
|
|
55
139
|
};
|
|
56
140
|
};
|
|
57
141
|
control: {
|
|
58
142
|
padding: {
|
|
59
|
-
$root:
|
|
60
|
-
|
|
61
|
-
|
|
143
|
+
$root: {
|
|
144
|
+
purpose: "other";
|
|
145
|
+
description: string;
|
|
146
|
+
};
|
|
147
|
+
inline: {
|
|
148
|
+
purpose: "spacing";
|
|
149
|
+
description: "Inline (horizontal, usually) padding";
|
|
150
|
+
};
|
|
151
|
+
block: {
|
|
152
|
+
purpose: "spacing";
|
|
153
|
+
description: "Block (vertical, usually) padding";
|
|
154
|
+
};
|
|
155
|
+
};
|
|
156
|
+
roundness: {
|
|
157
|
+
purpose: "other";
|
|
158
|
+
description: "This token controls the overall roundness of controls and stacks with the root roundness token";
|
|
159
|
+
};
|
|
160
|
+
borderRadius: {
|
|
161
|
+
purpose: "border-radius";
|
|
162
|
+
description: "This token captures the border-radius of controls, taking into account the overall roundness";
|
|
62
163
|
};
|
|
63
|
-
roundness: "other";
|
|
64
|
-
borderRadius: "border-radius";
|
|
65
164
|
color: {
|
|
66
|
-
fg:
|
|
67
|
-
|
|
68
|
-
|
|
165
|
+
fg: {
|
|
166
|
+
purpose: "color";
|
|
167
|
+
description: "Intended for use as the foreground color";
|
|
168
|
+
};
|
|
169
|
+
bg: {
|
|
170
|
+
purpose: "color";
|
|
171
|
+
description: "Intended for use as the background color";
|
|
172
|
+
};
|
|
173
|
+
border: {
|
|
174
|
+
purpose: "color";
|
|
175
|
+
description: "Intended for use as the border color, if desired";
|
|
176
|
+
};
|
|
69
177
|
};
|
|
70
178
|
};
|
|
71
179
|
surface: {
|
|
72
180
|
padding: {
|
|
73
|
-
$root:
|
|
74
|
-
|
|
75
|
-
|
|
181
|
+
$root: {
|
|
182
|
+
purpose: "other";
|
|
183
|
+
description: string;
|
|
184
|
+
};
|
|
185
|
+
inline: {
|
|
186
|
+
purpose: "spacing";
|
|
187
|
+
description: "Inline (horizontal, usually) padding";
|
|
188
|
+
};
|
|
189
|
+
block: {
|
|
190
|
+
purpose: "spacing";
|
|
191
|
+
description: "Block (vertical, usually) padding";
|
|
192
|
+
};
|
|
193
|
+
};
|
|
194
|
+
roundness: {
|
|
195
|
+
purpose: "other";
|
|
196
|
+
description: "This token controls the overall roundness of surfaces and stacks with the root roundness token";
|
|
197
|
+
};
|
|
198
|
+
borderRadius: {
|
|
199
|
+
purpose: "border-radius";
|
|
200
|
+
description: "This token captures the border-radius of surfaces, taking into account the overall roundness";
|
|
76
201
|
};
|
|
77
|
-
roundness: "other";
|
|
78
|
-
borderRadius: "border-radius";
|
|
79
202
|
primary: {
|
|
80
203
|
color: {
|
|
81
|
-
fg:
|
|
82
|
-
|
|
83
|
-
|
|
204
|
+
fg: {
|
|
205
|
+
purpose: "color";
|
|
206
|
+
description: "Intended for use as the foreground color";
|
|
207
|
+
};
|
|
208
|
+
bg: {
|
|
209
|
+
purpose: "color";
|
|
210
|
+
description: "Intended for use as the background color";
|
|
211
|
+
};
|
|
212
|
+
border: {
|
|
213
|
+
purpose: "color";
|
|
214
|
+
description: "Intended for use as the border color, if desired";
|
|
215
|
+
};
|
|
84
216
|
};
|
|
85
217
|
};
|
|
86
218
|
secondary: {
|
|
87
219
|
color: {
|
|
88
|
-
fg:
|
|
89
|
-
|
|
90
|
-
|
|
220
|
+
fg: {
|
|
221
|
+
purpose: "color";
|
|
222
|
+
description: "Intended for use as the foreground color";
|
|
223
|
+
};
|
|
224
|
+
bg: {
|
|
225
|
+
purpose: "color";
|
|
226
|
+
description: "Intended for use as the background color";
|
|
227
|
+
};
|
|
228
|
+
border: {
|
|
229
|
+
purpose: "color";
|
|
230
|
+
description: "Intended for use as the border color, if desired";
|
|
231
|
+
};
|
|
91
232
|
};
|
|
92
233
|
};
|
|
93
234
|
ambient: {
|
|
94
235
|
color: {
|
|
95
|
-
fg:
|
|
96
|
-
|
|
97
|
-
|
|
236
|
+
fg: {
|
|
237
|
+
purpose: "color";
|
|
238
|
+
description: "Intended for use as the foreground color";
|
|
239
|
+
};
|
|
240
|
+
bg: {
|
|
241
|
+
purpose: "color";
|
|
242
|
+
description: "Intended for use as the background color";
|
|
243
|
+
};
|
|
244
|
+
border: {
|
|
245
|
+
purpose: "color";
|
|
246
|
+
description: "Intended for use as the border color, if desired";
|
|
247
|
+
};
|
|
98
248
|
};
|
|
99
249
|
};
|
|
100
250
|
};
|
|
@@ -103,24 +253,30 @@ export declare const arborModeDefinition: {
|
|
|
103
253
|
size: "font-size";
|
|
104
254
|
weight: "font-weight";
|
|
105
255
|
lineHeight: "line-height";
|
|
106
|
-
font: "
|
|
256
|
+
font: "font-family";
|
|
107
257
|
};
|
|
108
258
|
secondary: {
|
|
109
259
|
size: "font-size";
|
|
110
260
|
weight: "font-weight";
|
|
111
261
|
lineHeight: "line-height";
|
|
112
|
-
font: "
|
|
262
|
+
font: "font-family";
|
|
113
263
|
};
|
|
114
264
|
ambient: {
|
|
115
265
|
size: "font-size";
|
|
116
266
|
weight: "font-weight";
|
|
117
267
|
lineHeight: "line-height";
|
|
118
|
-
font: "
|
|
268
|
+
font: "font-family";
|
|
119
269
|
};
|
|
120
270
|
};
|
|
121
|
-
density:
|
|
271
|
+
density: {
|
|
272
|
+
purpose: "other";
|
|
273
|
+
description: "A scaling factor for density. Higher density means smaller, tighter spacing and size";
|
|
274
|
+
};
|
|
122
275
|
spacing: {
|
|
123
|
-
$root:
|
|
276
|
+
$root: {
|
|
277
|
+
purpose: "spacing";
|
|
278
|
+
description: string;
|
|
279
|
+
};
|
|
124
280
|
xs: "spacing";
|
|
125
281
|
sm: "spacing";
|
|
126
282
|
md: "spacing";
|
|
@@ -128,13 +284,28 @@ export declare const arborModeDefinition: {
|
|
|
128
284
|
xl: "spacing";
|
|
129
285
|
};
|
|
130
286
|
borderWidth: {
|
|
131
|
-
$root:
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
287
|
+
$root: {
|
|
288
|
+
purpose: "border-width";
|
|
289
|
+
description: string;
|
|
290
|
+
};
|
|
291
|
+
sm: {
|
|
292
|
+
purpose: "border-width";
|
|
293
|
+
description: "A hairline border width. Always >= 1px. If the global border width is small, this may be the same as \"md\"";
|
|
294
|
+
};
|
|
295
|
+
md: {
|
|
296
|
+
purpose: "border-width";
|
|
297
|
+
description: "A general-purpose border width";
|
|
298
|
+
};
|
|
299
|
+
lg: {
|
|
300
|
+
purpose: "border-width";
|
|
301
|
+
description: "A thicker border, good for emphasis";
|
|
302
|
+
};
|
|
135
303
|
};
|
|
136
304
|
borderRadius: {
|
|
137
|
-
$root:
|
|
305
|
+
$root: {
|
|
306
|
+
purpose: "border-radius";
|
|
307
|
+
description: string;
|
|
308
|
+
};
|
|
138
309
|
xs: "border-radius";
|
|
139
310
|
sm: "border-radius";
|
|
140
311
|
md: "border-radius";
|
|
@@ -142,39 +313,117 @@ export declare const arborModeDefinition: {
|
|
|
142
313
|
xl: "border-radius";
|
|
143
314
|
};
|
|
144
315
|
shadow: {
|
|
145
|
-
$root:
|
|
146
|
-
|
|
316
|
+
$root: {
|
|
317
|
+
purpose: "shadow";
|
|
318
|
+
description: string;
|
|
319
|
+
};
|
|
320
|
+
color: {
|
|
321
|
+
purpose: "color";
|
|
322
|
+
description: "If specified, this token overrides shadow colors from primitives";
|
|
323
|
+
};
|
|
147
324
|
sm: {
|
|
148
|
-
x:
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
325
|
+
x: {
|
|
326
|
+
purpose: "size";
|
|
327
|
+
description: "Horizontal offset of the shadow";
|
|
328
|
+
};
|
|
329
|
+
y: {
|
|
330
|
+
purpose: "size";
|
|
331
|
+
description: "Vertical offset of the shadow";
|
|
332
|
+
};
|
|
333
|
+
blur: {
|
|
334
|
+
purpose: "size";
|
|
335
|
+
description: "Blur radius of the shadow";
|
|
336
|
+
};
|
|
337
|
+
spread: {
|
|
338
|
+
purpose: "size";
|
|
339
|
+
description: "Spread radius of the shadow";
|
|
340
|
+
};
|
|
341
|
+
color: {
|
|
342
|
+
purpose: "color";
|
|
343
|
+
description: "Color of the shadow";
|
|
344
|
+
};
|
|
345
|
+
$root: {
|
|
346
|
+
purpose: "shadow";
|
|
347
|
+
description: string;
|
|
348
|
+
};
|
|
154
349
|
};
|
|
155
350
|
md: {
|
|
156
|
-
x:
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
351
|
+
x: {
|
|
352
|
+
purpose: "size";
|
|
353
|
+
description: "Horizontal offset of the shadow";
|
|
354
|
+
};
|
|
355
|
+
y: {
|
|
356
|
+
purpose: "size";
|
|
357
|
+
description: "Vertical offset of the shadow";
|
|
358
|
+
};
|
|
359
|
+
blur: {
|
|
360
|
+
purpose: "size";
|
|
361
|
+
description: "Blur radius of the shadow";
|
|
362
|
+
};
|
|
363
|
+
spread: {
|
|
364
|
+
purpose: "size";
|
|
365
|
+
description: "Spread radius of the shadow";
|
|
366
|
+
};
|
|
367
|
+
color: {
|
|
368
|
+
purpose: "color";
|
|
369
|
+
description: "Color of the shadow";
|
|
370
|
+
};
|
|
371
|
+
$root: {
|
|
372
|
+
purpose: "shadow";
|
|
373
|
+
description: string;
|
|
374
|
+
};
|
|
162
375
|
};
|
|
163
376
|
lg: {
|
|
164
|
-
x:
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
377
|
+
x: {
|
|
378
|
+
purpose: "size";
|
|
379
|
+
description: "Horizontal offset of the shadow";
|
|
380
|
+
};
|
|
381
|
+
y: {
|
|
382
|
+
purpose: "size";
|
|
383
|
+
description: "Vertical offset of the shadow";
|
|
384
|
+
};
|
|
385
|
+
blur: {
|
|
386
|
+
purpose: "size";
|
|
387
|
+
description: "Blur radius of the shadow";
|
|
388
|
+
};
|
|
389
|
+
spread: {
|
|
390
|
+
purpose: "size";
|
|
391
|
+
description: "Spread radius of the shadow";
|
|
392
|
+
};
|
|
393
|
+
color: {
|
|
394
|
+
purpose: "color";
|
|
395
|
+
description: "Color of the shadow";
|
|
396
|
+
};
|
|
397
|
+
$root: {
|
|
398
|
+
purpose: "shadow";
|
|
399
|
+
description: string;
|
|
400
|
+
};
|
|
170
401
|
};
|
|
171
402
|
xl: {
|
|
172
|
-
x:
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
403
|
+
x: {
|
|
404
|
+
purpose: "size";
|
|
405
|
+
description: "Horizontal offset of the shadow";
|
|
406
|
+
};
|
|
407
|
+
y: {
|
|
408
|
+
purpose: "size";
|
|
409
|
+
description: "Vertical offset of the shadow";
|
|
410
|
+
};
|
|
411
|
+
blur: {
|
|
412
|
+
purpose: "size";
|
|
413
|
+
description: "Blur radius of the shadow";
|
|
414
|
+
};
|
|
415
|
+
spread: {
|
|
416
|
+
purpose: "size";
|
|
417
|
+
description: "Spread radius of the shadow";
|
|
418
|
+
};
|
|
419
|
+
color: {
|
|
420
|
+
purpose: "color";
|
|
421
|
+
description: "Color of the shadow";
|
|
422
|
+
};
|
|
423
|
+
$root: {
|
|
424
|
+
purpose: "shadow";
|
|
425
|
+
description: string;
|
|
426
|
+
};
|
|
178
427
|
};
|
|
179
428
|
};
|
|
180
429
|
};
|
|
@@ -183,95 +432,245 @@ export declare function createArborModeSchema({ createToken, }: {
|
|
|
183
432
|
}): ModeSchema<{
|
|
184
433
|
color: {
|
|
185
434
|
main: {
|
|
186
|
-
$root:
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
435
|
+
$root: {
|
|
436
|
+
purpose: "color";
|
|
437
|
+
description: string;
|
|
438
|
+
};
|
|
439
|
+
paper: {
|
|
440
|
+
purpose: "color";
|
|
441
|
+
description: "A very light shade, good for backgrounds and surfaces";
|
|
442
|
+
};
|
|
443
|
+
wash: {
|
|
444
|
+
purpose: "color";
|
|
445
|
+
description: "A very faint but colorful shade, good for backgrounds and surfaces";
|
|
446
|
+
};
|
|
447
|
+
light: {
|
|
448
|
+
purpose: "color";
|
|
449
|
+
description: "A light shade of the mode's main color, good for emphasized surfaces.";
|
|
450
|
+
};
|
|
451
|
+
mid: {
|
|
452
|
+
purpose: "color";
|
|
453
|
+
description: "The main shade of the mode's main color, good for primary actions and decoration.";
|
|
454
|
+
};
|
|
455
|
+
heavy: {
|
|
456
|
+
purpose: "color";
|
|
457
|
+
description: "A heavy shade of the mode's main color, good for text emphasis and accents.";
|
|
458
|
+
};
|
|
459
|
+
ink: {
|
|
460
|
+
purpose: "color";
|
|
461
|
+
description: "A very dark but still colorful shade of the mode's main color, good for text and high contrast elements.";
|
|
462
|
+
};
|
|
193
463
|
};
|
|
194
464
|
neutral: {
|
|
195
|
-
$root:
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
465
|
+
$root: {
|
|
466
|
+
purpose: "color";
|
|
467
|
+
description: string;
|
|
468
|
+
};
|
|
469
|
+
paper: {
|
|
470
|
+
purpose: "color";
|
|
471
|
+
description: "A very light neutral shade, good for backgrounds and surfaces";
|
|
472
|
+
};
|
|
473
|
+
wash: {
|
|
474
|
+
purpose: "color";
|
|
475
|
+
description: "A faint neutral shade, good for backgrounds and surfaces";
|
|
476
|
+
};
|
|
477
|
+
light: {
|
|
478
|
+
purpose: "color";
|
|
479
|
+
description: "A light neutral shade, good for emphasized surfaces";
|
|
480
|
+
};
|
|
481
|
+
mid: {
|
|
482
|
+
purpose: "color";
|
|
483
|
+
description: "The main neutral shade, good for primary actions and decoration";
|
|
484
|
+
};
|
|
485
|
+
heavy: {
|
|
486
|
+
purpose: "color";
|
|
487
|
+
description: "A heavy neutral shade, good for low-emphasis text and accents";
|
|
488
|
+
};
|
|
489
|
+
ink: {
|
|
490
|
+
purpose: "color";
|
|
491
|
+
description: "A very dark neutral shade, good for text and high contrast elements";
|
|
492
|
+
};
|
|
202
493
|
};
|
|
203
494
|
};
|
|
204
495
|
action: {
|
|
205
496
|
padding: {
|
|
206
|
-
$root:
|
|
207
|
-
|
|
208
|
-
|
|
497
|
+
$root: {
|
|
498
|
+
purpose: "other";
|
|
499
|
+
description: string;
|
|
500
|
+
};
|
|
501
|
+
inline: {
|
|
502
|
+
purpose: "spacing";
|
|
503
|
+
description: "Inline (horizontal, usually) padding";
|
|
504
|
+
};
|
|
505
|
+
block: {
|
|
506
|
+
purpose: "spacing";
|
|
507
|
+
description: "Block (vertical, usually) padding";
|
|
508
|
+
};
|
|
509
|
+
};
|
|
510
|
+
roundness: {
|
|
511
|
+
purpose: "other";
|
|
512
|
+
description: "This token controls the overall roundness of actions and stacks with the root roundness token";
|
|
513
|
+
};
|
|
514
|
+
borderRadius: {
|
|
515
|
+
purpose: "border-radius";
|
|
516
|
+
description: "This token captures the border-radius of actions, taking into account the overall roundness";
|
|
209
517
|
};
|
|
210
|
-
roundness: "other";
|
|
211
|
-
borderRadius: "border-radius";
|
|
212
518
|
primary: {
|
|
213
519
|
color: {
|
|
214
|
-
fg:
|
|
215
|
-
|
|
216
|
-
|
|
520
|
+
fg: {
|
|
521
|
+
purpose: "color";
|
|
522
|
+
description: "Intended for use as the foreground color";
|
|
523
|
+
};
|
|
524
|
+
bg: {
|
|
525
|
+
purpose: "color";
|
|
526
|
+
description: "Intended for use as the background color";
|
|
527
|
+
};
|
|
528
|
+
border: {
|
|
529
|
+
purpose: "color";
|
|
530
|
+
description: "Intended for use as the border color, if desired";
|
|
531
|
+
};
|
|
217
532
|
};
|
|
218
533
|
};
|
|
219
534
|
secondary: {
|
|
220
535
|
color: {
|
|
221
|
-
fg:
|
|
222
|
-
|
|
223
|
-
|
|
536
|
+
fg: {
|
|
537
|
+
purpose: "color";
|
|
538
|
+
description: "Intended for use as the foreground color";
|
|
539
|
+
};
|
|
540
|
+
bg: {
|
|
541
|
+
purpose: "color";
|
|
542
|
+
description: "Intended for use as the background color";
|
|
543
|
+
};
|
|
544
|
+
border: {
|
|
545
|
+
purpose: "color";
|
|
546
|
+
description: "Intended for use as the border color, if desired";
|
|
547
|
+
};
|
|
224
548
|
};
|
|
225
549
|
};
|
|
226
550
|
ambient: {
|
|
227
551
|
color: {
|
|
228
|
-
fg:
|
|
229
|
-
|
|
230
|
-
|
|
552
|
+
fg: {
|
|
553
|
+
purpose: "color";
|
|
554
|
+
description: "Intended for use as the foreground color";
|
|
555
|
+
};
|
|
556
|
+
bg: {
|
|
557
|
+
purpose: "color";
|
|
558
|
+
description: "Intended for use as the background color";
|
|
559
|
+
};
|
|
560
|
+
border: {
|
|
561
|
+
purpose: "color";
|
|
562
|
+
description: "Intended for use as the border color, if desired";
|
|
563
|
+
};
|
|
231
564
|
};
|
|
232
565
|
};
|
|
233
566
|
};
|
|
234
567
|
control: {
|
|
235
568
|
padding: {
|
|
236
|
-
$root:
|
|
237
|
-
|
|
238
|
-
|
|
569
|
+
$root: {
|
|
570
|
+
purpose: "other";
|
|
571
|
+
description: string;
|
|
572
|
+
};
|
|
573
|
+
inline: {
|
|
574
|
+
purpose: "spacing";
|
|
575
|
+
description: "Inline (horizontal, usually) padding";
|
|
576
|
+
};
|
|
577
|
+
block: {
|
|
578
|
+
purpose: "spacing";
|
|
579
|
+
description: "Block (vertical, usually) padding";
|
|
580
|
+
};
|
|
581
|
+
};
|
|
582
|
+
roundness: {
|
|
583
|
+
purpose: "other";
|
|
584
|
+
description: "This token controls the overall roundness of controls and stacks with the root roundness token";
|
|
585
|
+
};
|
|
586
|
+
borderRadius: {
|
|
587
|
+
purpose: "border-radius";
|
|
588
|
+
description: "This token captures the border-radius of controls, taking into account the overall roundness";
|
|
239
589
|
};
|
|
240
|
-
roundness: "other";
|
|
241
|
-
borderRadius: "border-radius";
|
|
242
590
|
color: {
|
|
243
|
-
fg:
|
|
244
|
-
|
|
245
|
-
|
|
591
|
+
fg: {
|
|
592
|
+
purpose: "color";
|
|
593
|
+
description: "Intended for use as the foreground color";
|
|
594
|
+
};
|
|
595
|
+
bg: {
|
|
596
|
+
purpose: "color";
|
|
597
|
+
description: "Intended for use as the background color";
|
|
598
|
+
};
|
|
599
|
+
border: {
|
|
600
|
+
purpose: "color";
|
|
601
|
+
description: "Intended for use as the border color, if desired";
|
|
602
|
+
};
|
|
246
603
|
};
|
|
247
604
|
};
|
|
248
605
|
surface: {
|
|
249
606
|
padding: {
|
|
250
|
-
$root:
|
|
251
|
-
|
|
252
|
-
|
|
607
|
+
$root: {
|
|
608
|
+
purpose: "other";
|
|
609
|
+
description: string;
|
|
610
|
+
};
|
|
611
|
+
inline: {
|
|
612
|
+
purpose: "spacing";
|
|
613
|
+
description: "Inline (horizontal, usually) padding";
|
|
614
|
+
};
|
|
615
|
+
block: {
|
|
616
|
+
purpose: "spacing";
|
|
617
|
+
description: "Block (vertical, usually) padding";
|
|
618
|
+
};
|
|
619
|
+
};
|
|
620
|
+
roundness: {
|
|
621
|
+
purpose: "other";
|
|
622
|
+
description: "This token controls the overall roundness of surfaces and stacks with the root roundness token";
|
|
623
|
+
};
|
|
624
|
+
borderRadius: {
|
|
625
|
+
purpose: "border-radius";
|
|
626
|
+
description: "This token captures the border-radius of surfaces, taking into account the overall roundness";
|
|
253
627
|
};
|
|
254
|
-
roundness: "other";
|
|
255
|
-
borderRadius: "border-radius";
|
|
256
628
|
primary: {
|
|
257
629
|
color: {
|
|
258
|
-
fg:
|
|
259
|
-
|
|
260
|
-
|
|
630
|
+
fg: {
|
|
631
|
+
purpose: "color";
|
|
632
|
+
description: "Intended for use as the foreground color";
|
|
633
|
+
};
|
|
634
|
+
bg: {
|
|
635
|
+
purpose: "color";
|
|
636
|
+
description: "Intended for use as the background color";
|
|
637
|
+
};
|
|
638
|
+
border: {
|
|
639
|
+
purpose: "color";
|
|
640
|
+
description: "Intended for use as the border color, if desired";
|
|
641
|
+
};
|
|
261
642
|
};
|
|
262
643
|
};
|
|
263
644
|
secondary: {
|
|
264
645
|
color: {
|
|
265
|
-
fg:
|
|
266
|
-
|
|
267
|
-
|
|
646
|
+
fg: {
|
|
647
|
+
purpose: "color";
|
|
648
|
+
description: "Intended for use as the foreground color";
|
|
649
|
+
};
|
|
650
|
+
bg: {
|
|
651
|
+
purpose: "color";
|
|
652
|
+
description: "Intended for use as the background color";
|
|
653
|
+
};
|
|
654
|
+
border: {
|
|
655
|
+
purpose: "color";
|
|
656
|
+
description: "Intended for use as the border color, if desired";
|
|
657
|
+
};
|
|
268
658
|
};
|
|
269
659
|
};
|
|
270
660
|
ambient: {
|
|
271
661
|
color: {
|
|
272
|
-
fg:
|
|
273
|
-
|
|
274
|
-
|
|
662
|
+
fg: {
|
|
663
|
+
purpose: "color";
|
|
664
|
+
description: "Intended for use as the foreground color";
|
|
665
|
+
};
|
|
666
|
+
bg: {
|
|
667
|
+
purpose: "color";
|
|
668
|
+
description: "Intended for use as the background color";
|
|
669
|
+
};
|
|
670
|
+
border: {
|
|
671
|
+
purpose: "color";
|
|
672
|
+
description: "Intended for use as the border color, if desired";
|
|
673
|
+
};
|
|
275
674
|
};
|
|
276
675
|
};
|
|
277
676
|
};
|
|
@@ -280,24 +679,30 @@ export declare function createArborModeSchema({ createToken, }: {
|
|
|
280
679
|
size: "font-size";
|
|
281
680
|
weight: "font-weight";
|
|
282
681
|
lineHeight: "line-height";
|
|
283
|
-
font: "
|
|
682
|
+
font: "font-family";
|
|
284
683
|
};
|
|
285
684
|
secondary: {
|
|
286
685
|
size: "font-size";
|
|
287
686
|
weight: "font-weight";
|
|
288
687
|
lineHeight: "line-height";
|
|
289
|
-
font: "
|
|
688
|
+
font: "font-family";
|
|
290
689
|
};
|
|
291
690
|
ambient: {
|
|
292
691
|
size: "font-size";
|
|
293
692
|
weight: "font-weight";
|
|
294
693
|
lineHeight: "line-height";
|
|
295
|
-
font: "
|
|
694
|
+
font: "font-family";
|
|
296
695
|
};
|
|
297
696
|
};
|
|
298
|
-
density:
|
|
697
|
+
density: {
|
|
698
|
+
purpose: "other";
|
|
699
|
+
description: "A scaling factor for density. Higher density means smaller, tighter spacing and size";
|
|
700
|
+
};
|
|
299
701
|
spacing: {
|
|
300
|
-
$root:
|
|
702
|
+
$root: {
|
|
703
|
+
purpose: "spacing";
|
|
704
|
+
description: string;
|
|
705
|
+
};
|
|
301
706
|
xs: "spacing";
|
|
302
707
|
sm: "spacing";
|
|
303
708
|
md: "spacing";
|
|
@@ -305,13 +710,28 @@ export declare function createArborModeSchema({ createToken, }: {
|
|
|
305
710
|
xl: "spacing";
|
|
306
711
|
};
|
|
307
712
|
borderWidth: {
|
|
308
|
-
$root:
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
713
|
+
$root: {
|
|
714
|
+
purpose: "border-width";
|
|
715
|
+
description: string;
|
|
716
|
+
};
|
|
717
|
+
sm: {
|
|
718
|
+
purpose: "border-width";
|
|
719
|
+
description: "A hairline border width. Always >= 1px. If the global border width is small, this may be the same as \"md\"";
|
|
720
|
+
};
|
|
721
|
+
md: {
|
|
722
|
+
purpose: "border-width";
|
|
723
|
+
description: "A general-purpose border width";
|
|
724
|
+
};
|
|
725
|
+
lg: {
|
|
726
|
+
purpose: "border-width";
|
|
727
|
+
description: "A thicker border, good for emphasis";
|
|
728
|
+
};
|
|
312
729
|
};
|
|
313
730
|
borderRadius: {
|
|
314
|
-
$root:
|
|
731
|
+
$root: {
|
|
732
|
+
purpose: "border-radius";
|
|
733
|
+
description: string;
|
|
734
|
+
};
|
|
315
735
|
xs: "border-radius";
|
|
316
736
|
sm: "border-radius";
|
|
317
737
|
md: "border-radius";
|
|
@@ -319,134 +739,362 @@ export declare function createArborModeSchema({ createToken, }: {
|
|
|
319
739
|
xl: "border-radius";
|
|
320
740
|
};
|
|
321
741
|
shadow: {
|
|
322
|
-
$root:
|
|
323
|
-
|
|
742
|
+
$root: {
|
|
743
|
+
purpose: "shadow";
|
|
744
|
+
description: string;
|
|
745
|
+
};
|
|
746
|
+
color: {
|
|
747
|
+
purpose: "color";
|
|
748
|
+
description: "If specified, this token overrides shadow colors from primitives";
|
|
749
|
+
};
|
|
324
750
|
sm: {
|
|
325
|
-
x:
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
|
|
751
|
+
x: {
|
|
752
|
+
purpose: "size";
|
|
753
|
+
description: "Horizontal offset of the shadow";
|
|
754
|
+
};
|
|
755
|
+
y: {
|
|
756
|
+
purpose: "size";
|
|
757
|
+
description: "Vertical offset of the shadow";
|
|
758
|
+
};
|
|
759
|
+
blur: {
|
|
760
|
+
purpose: "size";
|
|
761
|
+
description: "Blur radius of the shadow";
|
|
762
|
+
};
|
|
763
|
+
spread: {
|
|
764
|
+
purpose: "size";
|
|
765
|
+
description: "Spread radius of the shadow";
|
|
766
|
+
};
|
|
767
|
+
color: {
|
|
768
|
+
purpose: "color";
|
|
769
|
+
description: "Color of the shadow";
|
|
770
|
+
};
|
|
771
|
+
$root: {
|
|
772
|
+
purpose: "shadow";
|
|
773
|
+
description: string;
|
|
774
|
+
};
|
|
331
775
|
};
|
|
332
776
|
md: {
|
|
333
|
-
x:
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
|
|
777
|
+
x: {
|
|
778
|
+
purpose: "size";
|
|
779
|
+
description: "Horizontal offset of the shadow";
|
|
780
|
+
};
|
|
781
|
+
y: {
|
|
782
|
+
purpose: "size";
|
|
783
|
+
description: "Vertical offset of the shadow";
|
|
784
|
+
};
|
|
785
|
+
blur: {
|
|
786
|
+
purpose: "size";
|
|
787
|
+
description: "Blur radius of the shadow";
|
|
788
|
+
};
|
|
789
|
+
spread: {
|
|
790
|
+
purpose: "size";
|
|
791
|
+
description: "Spread radius of the shadow";
|
|
792
|
+
};
|
|
793
|
+
color: {
|
|
794
|
+
purpose: "color";
|
|
795
|
+
description: "Color of the shadow";
|
|
796
|
+
};
|
|
797
|
+
$root: {
|
|
798
|
+
purpose: "shadow";
|
|
799
|
+
description: string;
|
|
800
|
+
};
|
|
339
801
|
};
|
|
340
802
|
lg: {
|
|
341
|
-
x:
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
|
|
803
|
+
x: {
|
|
804
|
+
purpose: "size";
|
|
805
|
+
description: "Horizontal offset of the shadow";
|
|
806
|
+
};
|
|
807
|
+
y: {
|
|
808
|
+
purpose: "size";
|
|
809
|
+
description: "Vertical offset of the shadow";
|
|
810
|
+
};
|
|
811
|
+
blur: {
|
|
812
|
+
purpose: "size";
|
|
813
|
+
description: "Blur radius of the shadow";
|
|
814
|
+
};
|
|
815
|
+
spread: {
|
|
816
|
+
purpose: "size";
|
|
817
|
+
description: "Spread radius of the shadow";
|
|
818
|
+
};
|
|
819
|
+
color: {
|
|
820
|
+
purpose: "color";
|
|
821
|
+
description: "Color of the shadow";
|
|
822
|
+
};
|
|
823
|
+
$root: {
|
|
824
|
+
purpose: "shadow";
|
|
825
|
+
description: string;
|
|
826
|
+
};
|
|
347
827
|
};
|
|
348
828
|
xl: {
|
|
349
|
-
x:
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
|
|
353
|
-
|
|
354
|
-
|
|
829
|
+
x: {
|
|
830
|
+
purpose: "size";
|
|
831
|
+
description: "Horizontal offset of the shadow";
|
|
832
|
+
};
|
|
833
|
+
y: {
|
|
834
|
+
purpose: "size";
|
|
835
|
+
description: "Vertical offset of the shadow";
|
|
836
|
+
};
|
|
837
|
+
blur: {
|
|
838
|
+
purpose: "size";
|
|
839
|
+
description: "Blur radius of the shadow";
|
|
840
|
+
};
|
|
841
|
+
spread: {
|
|
842
|
+
purpose: "size";
|
|
843
|
+
description: "Spread radius of the shadow";
|
|
844
|
+
};
|
|
845
|
+
color: {
|
|
846
|
+
purpose: "color";
|
|
847
|
+
description: "Color of the shadow";
|
|
848
|
+
};
|
|
849
|
+
$root: {
|
|
850
|
+
purpose: "shadow";
|
|
851
|
+
description: string;
|
|
852
|
+
};
|
|
355
853
|
};
|
|
356
854
|
};
|
|
357
855
|
}>;
|
|
358
856
|
export declare const arborModeSchema: ModeSchema<{
|
|
359
857
|
color: {
|
|
360
858
|
main: {
|
|
361
|
-
$root:
|
|
362
|
-
|
|
363
|
-
|
|
364
|
-
|
|
365
|
-
|
|
366
|
-
|
|
367
|
-
|
|
859
|
+
$root: {
|
|
860
|
+
purpose: "color";
|
|
861
|
+
description: string;
|
|
862
|
+
};
|
|
863
|
+
paper: {
|
|
864
|
+
purpose: "color";
|
|
865
|
+
description: "A very light shade, good for backgrounds and surfaces";
|
|
866
|
+
};
|
|
867
|
+
wash: {
|
|
868
|
+
purpose: "color";
|
|
869
|
+
description: "A very faint but colorful shade, good for backgrounds and surfaces";
|
|
870
|
+
};
|
|
871
|
+
light: {
|
|
872
|
+
purpose: "color";
|
|
873
|
+
description: "A light shade of the mode's main color, good for emphasized surfaces.";
|
|
874
|
+
};
|
|
875
|
+
mid: {
|
|
876
|
+
purpose: "color";
|
|
877
|
+
description: "The main shade of the mode's main color, good for primary actions and decoration.";
|
|
878
|
+
};
|
|
879
|
+
heavy: {
|
|
880
|
+
purpose: "color";
|
|
881
|
+
description: "A heavy shade of the mode's main color, good for text emphasis and accents.";
|
|
882
|
+
};
|
|
883
|
+
ink: {
|
|
884
|
+
purpose: "color";
|
|
885
|
+
description: "A very dark but still colorful shade of the mode's main color, good for text and high contrast elements.";
|
|
886
|
+
};
|
|
368
887
|
};
|
|
369
888
|
neutral: {
|
|
370
|
-
$root:
|
|
371
|
-
|
|
372
|
-
|
|
373
|
-
|
|
374
|
-
|
|
375
|
-
|
|
376
|
-
|
|
889
|
+
$root: {
|
|
890
|
+
purpose: "color";
|
|
891
|
+
description: string;
|
|
892
|
+
};
|
|
893
|
+
paper: {
|
|
894
|
+
purpose: "color";
|
|
895
|
+
description: "A very light neutral shade, good for backgrounds and surfaces";
|
|
896
|
+
};
|
|
897
|
+
wash: {
|
|
898
|
+
purpose: "color";
|
|
899
|
+
description: "A faint neutral shade, good for backgrounds and surfaces";
|
|
900
|
+
};
|
|
901
|
+
light: {
|
|
902
|
+
purpose: "color";
|
|
903
|
+
description: "A light neutral shade, good for emphasized surfaces";
|
|
904
|
+
};
|
|
905
|
+
mid: {
|
|
906
|
+
purpose: "color";
|
|
907
|
+
description: "The main neutral shade, good for primary actions and decoration";
|
|
908
|
+
};
|
|
909
|
+
heavy: {
|
|
910
|
+
purpose: "color";
|
|
911
|
+
description: "A heavy neutral shade, good for low-emphasis text and accents";
|
|
912
|
+
};
|
|
913
|
+
ink: {
|
|
914
|
+
purpose: "color";
|
|
915
|
+
description: "A very dark neutral shade, good for text and high contrast elements";
|
|
916
|
+
};
|
|
377
917
|
};
|
|
378
918
|
};
|
|
379
919
|
action: {
|
|
380
920
|
padding: {
|
|
381
|
-
$root:
|
|
382
|
-
|
|
383
|
-
|
|
921
|
+
$root: {
|
|
922
|
+
purpose: "other";
|
|
923
|
+
description: string;
|
|
924
|
+
};
|
|
925
|
+
inline: {
|
|
926
|
+
purpose: "spacing";
|
|
927
|
+
description: "Inline (horizontal, usually) padding";
|
|
928
|
+
};
|
|
929
|
+
block: {
|
|
930
|
+
purpose: "spacing";
|
|
931
|
+
description: "Block (vertical, usually) padding";
|
|
932
|
+
};
|
|
933
|
+
};
|
|
934
|
+
roundness: {
|
|
935
|
+
purpose: "other";
|
|
936
|
+
description: "This token controls the overall roundness of actions and stacks with the root roundness token";
|
|
937
|
+
};
|
|
938
|
+
borderRadius: {
|
|
939
|
+
purpose: "border-radius";
|
|
940
|
+
description: "This token captures the border-radius of actions, taking into account the overall roundness";
|
|
384
941
|
};
|
|
385
|
-
roundness: "other";
|
|
386
|
-
borderRadius: "border-radius";
|
|
387
942
|
primary: {
|
|
388
943
|
color: {
|
|
389
|
-
fg:
|
|
390
|
-
|
|
391
|
-
|
|
944
|
+
fg: {
|
|
945
|
+
purpose: "color";
|
|
946
|
+
description: "Intended for use as the foreground color";
|
|
947
|
+
};
|
|
948
|
+
bg: {
|
|
949
|
+
purpose: "color";
|
|
950
|
+
description: "Intended for use as the background color";
|
|
951
|
+
};
|
|
952
|
+
border: {
|
|
953
|
+
purpose: "color";
|
|
954
|
+
description: "Intended for use as the border color, if desired";
|
|
955
|
+
};
|
|
392
956
|
};
|
|
393
957
|
};
|
|
394
958
|
secondary: {
|
|
395
959
|
color: {
|
|
396
|
-
fg:
|
|
397
|
-
|
|
398
|
-
|
|
960
|
+
fg: {
|
|
961
|
+
purpose: "color";
|
|
962
|
+
description: "Intended for use as the foreground color";
|
|
963
|
+
};
|
|
964
|
+
bg: {
|
|
965
|
+
purpose: "color";
|
|
966
|
+
description: "Intended for use as the background color";
|
|
967
|
+
};
|
|
968
|
+
border: {
|
|
969
|
+
purpose: "color";
|
|
970
|
+
description: "Intended for use as the border color, if desired";
|
|
971
|
+
};
|
|
399
972
|
};
|
|
400
973
|
};
|
|
401
974
|
ambient: {
|
|
402
975
|
color: {
|
|
403
|
-
fg:
|
|
404
|
-
|
|
405
|
-
|
|
976
|
+
fg: {
|
|
977
|
+
purpose: "color";
|
|
978
|
+
description: "Intended for use as the foreground color";
|
|
979
|
+
};
|
|
980
|
+
bg: {
|
|
981
|
+
purpose: "color";
|
|
982
|
+
description: "Intended for use as the background color";
|
|
983
|
+
};
|
|
984
|
+
border: {
|
|
985
|
+
purpose: "color";
|
|
986
|
+
description: "Intended for use as the border color, if desired";
|
|
987
|
+
};
|
|
406
988
|
};
|
|
407
989
|
};
|
|
408
990
|
};
|
|
409
991
|
control: {
|
|
410
992
|
padding: {
|
|
411
|
-
$root:
|
|
412
|
-
|
|
413
|
-
|
|
993
|
+
$root: {
|
|
994
|
+
purpose: "other";
|
|
995
|
+
description: string;
|
|
996
|
+
};
|
|
997
|
+
inline: {
|
|
998
|
+
purpose: "spacing";
|
|
999
|
+
description: "Inline (horizontal, usually) padding";
|
|
1000
|
+
};
|
|
1001
|
+
block: {
|
|
1002
|
+
purpose: "spacing";
|
|
1003
|
+
description: "Block (vertical, usually) padding";
|
|
1004
|
+
};
|
|
1005
|
+
};
|
|
1006
|
+
roundness: {
|
|
1007
|
+
purpose: "other";
|
|
1008
|
+
description: "This token controls the overall roundness of controls and stacks with the root roundness token";
|
|
1009
|
+
};
|
|
1010
|
+
borderRadius: {
|
|
1011
|
+
purpose: "border-radius";
|
|
1012
|
+
description: "This token captures the border-radius of controls, taking into account the overall roundness";
|
|
414
1013
|
};
|
|
415
|
-
roundness: "other";
|
|
416
|
-
borderRadius: "border-radius";
|
|
417
1014
|
color: {
|
|
418
|
-
fg:
|
|
419
|
-
|
|
420
|
-
|
|
1015
|
+
fg: {
|
|
1016
|
+
purpose: "color";
|
|
1017
|
+
description: "Intended for use as the foreground color";
|
|
1018
|
+
};
|
|
1019
|
+
bg: {
|
|
1020
|
+
purpose: "color";
|
|
1021
|
+
description: "Intended for use as the background color";
|
|
1022
|
+
};
|
|
1023
|
+
border: {
|
|
1024
|
+
purpose: "color";
|
|
1025
|
+
description: "Intended for use as the border color, if desired";
|
|
1026
|
+
};
|
|
421
1027
|
};
|
|
422
1028
|
};
|
|
423
1029
|
surface: {
|
|
424
1030
|
padding: {
|
|
425
|
-
$root:
|
|
426
|
-
|
|
427
|
-
|
|
1031
|
+
$root: {
|
|
1032
|
+
purpose: "other";
|
|
1033
|
+
description: string;
|
|
1034
|
+
};
|
|
1035
|
+
inline: {
|
|
1036
|
+
purpose: "spacing";
|
|
1037
|
+
description: "Inline (horizontal, usually) padding";
|
|
1038
|
+
};
|
|
1039
|
+
block: {
|
|
1040
|
+
purpose: "spacing";
|
|
1041
|
+
description: "Block (vertical, usually) padding";
|
|
1042
|
+
};
|
|
1043
|
+
};
|
|
1044
|
+
roundness: {
|
|
1045
|
+
purpose: "other";
|
|
1046
|
+
description: "This token controls the overall roundness of surfaces and stacks with the root roundness token";
|
|
1047
|
+
};
|
|
1048
|
+
borderRadius: {
|
|
1049
|
+
purpose: "border-radius";
|
|
1050
|
+
description: "This token captures the border-radius of surfaces, taking into account the overall roundness";
|
|
428
1051
|
};
|
|
429
|
-
roundness: "other";
|
|
430
|
-
borderRadius: "border-radius";
|
|
431
1052
|
primary: {
|
|
432
1053
|
color: {
|
|
433
|
-
fg:
|
|
434
|
-
|
|
435
|
-
|
|
1054
|
+
fg: {
|
|
1055
|
+
purpose: "color";
|
|
1056
|
+
description: "Intended for use as the foreground color";
|
|
1057
|
+
};
|
|
1058
|
+
bg: {
|
|
1059
|
+
purpose: "color";
|
|
1060
|
+
description: "Intended for use as the background color";
|
|
1061
|
+
};
|
|
1062
|
+
border: {
|
|
1063
|
+
purpose: "color";
|
|
1064
|
+
description: "Intended for use as the border color, if desired";
|
|
1065
|
+
};
|
|
436
1066
|
};
|
|
437
1067
|
};
|
|
438
1068
|
secondary: {
|
|
439
1069
|
color: {
|
|
440
|
-
fg:
|
|
441
|
-
|
|
442
|
-
|
|
1070
|
+
fg: {
|
|
1071
|
+
purpose: "color";
|
|
1072
|
+
description: "Intended for use as the foreground color";
|
|
1073
|
+
};
|
|
1074
|
+
bg: {
|
|
1075
|
+
purpose: "color";
|
|
1076
|
+
description: "Intended for use as the background color";
|
|
1077
|
+
};
|
|
1078
|
+
border: {
|
|
1079
|
+
purpose: "color";
|
|
1080
|
+
description: "Intended for use as the border color, if desired";
|
|
1081
|
+
};
|
|
443
1082
|
};
|
|
444
1083
|
};
|
|
445
1084
|
ambient: {
|
|
446
1085
|
color: {
|
|
447
|
-
fg:
|
|
448
|
-
|
|
449
|
-
|
|
1086
|
+
fg: {
|
|
1087
|
+
purpose: "color";
|
|
1088
|
+
description: "Intended for use as the foreground color";
|
|
1089
|
+
};
|
|
1090
|
+
bg: {
|
|
1091
|
+
purpose: "color";
|
|
1092
|
+
description: "Intended for use as the background color";
|
|
1093
|
+
};
|
|
1094
|
+
border: {
|
|
1095
|
+
purpose: "color";
|
|
1096
|
+
description: "Intended for use as the border color, if desired";
|
|
1097
|
+
};
|
|
450
1098
|
};
|
|
451
1099
|
};
|
|
452
1100
|
};
|
|
@@ -455,24 +1103,30 @@ export declare const arborModeSchema: ModeSchema<{
|
|
|
455
1103
|
size: "font-size";
|
|
456
1104
|
weight: "font-weight";
|
|
457
1105
|
lineHeight: "line-height";
|
|
458
|
-
font: "
|
|
1106
|
+
font: "font-family";
|
|
459
1107
|
};
|
|
460
1108
|
secondary: {
|
|
461
1109
|
size: "font-size";
|
|
462
1110
|
weight: "font-weight";
|
|
463
1111
|
lineHeight: "line-height";
|
|
464
|
-
font: "
|
|
1112
|
+
font: "font-family";
|
|
465
1113
|
};
|
|
466
1114
|
ambient: {
|
|
467
1115
|
size: "font-size";
|
|
468
1116
|
weight: "font-weight";
|
|
469
1117
|
lineHeight: "line-height";
|
|
470
|
-
font: "
|
|
1118
|
+
font: "font-family";
|
|
471
1119
|
};
|
|
472
1120
|
};
|
|
473
|
-
density:
|
|
1121
|
+
density: {
|
|
1122
|
+
purpose: "other";
|
|
1123
|
+
description: "A scaling factor for density. Higher density means smaller, tighter spacing and size";
|
|
1124
|
+
};
|
|
474
1125
|
spacing: {
|
|
475
|
-
$root:
|
|
1126
|
+
$root: {
|
|
1127
|
+
purpose: "spacing";
|
|
1128
|
+
description: string;
|
|
1129
|
+
};
|
|
476
1130
|
xs: "spacing";
|
|
477
1131
|
sm: "spacing";
|
|
478
1132
|
md: "spacing";
|
|
@@ -480,13 +1134,28 @@ export declare const arborModeSchema: ModeSchema<{
|
|
|
480
1134
|
xl: "spacing";
|
|
481
1135
|
};
|
|
482
1136
|
borderWidth: {
|
|
483
|
-
$root:
|
|
484
|
-
|
|
485
|
-
|
|
486
|
-
|
|
1137
|
+
$root: {
|
|
1138
|
+
purpose: "border-width";
|
|
1139
|
+
description: string;
|
|
1140
|
+
};
|
|
1141
|
+
sm: {
|
|
1142
|
+
purpose: "border-width";
|
|
1143
|
+
description: "A hairline border width. Always >= 1px. If the global border width is small, this may be the same as \"md\"";
|
|
1144
|
+
};
|
|
1145
|
+
md: {
|
|
1146
|
+
purpose: "border-width";
|
|
1147
|
+
description: "A general-purpose border width";
|
|
1148
|
+
};
|
|
1149
|
+
lg: {
|
|
1150
|
+
purpose: "border-width";
|
|
1151
|
+
description: "A thicker border, good for emphasis";
|
|
1152
|
+
};
|
|
487
1153
|
};
|
|
488
1154
|
borderRadius: {
|
|
489
|
-
$root:
|
|
1155
|
+
$root: {
|
|
1156
|
+
purpose: "border-radius";
|
|
1157
|
+
description: string;
|
|
1158
|
+
};
|
|
490
1159
|
xs: "border-radius";
|
|
491
1160
|
sm: "border-radius";
|
|
492
1161
|
md: "border-radius";
|
|
@@ -494,39 +1163,117 @@ export declare const arborModeSchema: ModeSchema<{
|
|
|
494
1163
|
xl: "border-radius";
|
|
495
1164
|
};
|
|
496
1165
|
shadow: {
|
|
497
|
-
$root:
|
|
498
|
-
|
|
1166
|
+
$root: {
|
|
1167
|
+
purpose: "shadow";
|
|
1168
|
+
description: string;
|
|
1169
|
+
};
|
|
1170
|
+
color: {
|
|
1171
|
+
purpose: "color";
|
|
1172
|
+
description: "If specified, this token overrides shadow colors from primitives";
|
|
1173
|
+
};
|
|
499
1174
|
sm: {
|
|
500
|
-
x:
|
|
501
|
-
|
|
502
|
-
|
|
503
|
-
|
|
504
|
-
|
|
505
|
-
|
|
1175
|
+
x: {
|
|
1176
|
+
purpose: "size";
|
|
1177
|
+
description: "Horizontal offset of the shadow";
|
|
1178
|
+
};
|
|
1179
|
+
y: {
|
|
1180
|
+
purpose: "size";
|
|
1181
|
+
description: "Vertical offset of the shadow";
|
|
1182
|
+
};
|
|
1183
|
+
blur: {
|
|
1184
|
+
purpose: "size";
|
|
1185
|
+
description: "Blur radius of the shadow";
|
|
1186
|
+
};
|
|
1187
|
+
spread: {
|
|
1188
|
+
purpose: "size";
|
|
1189
|
+
description: "Spread radius of the shadow";
|
|
1190
|
+
};
|
|
1191
|
+
color: {
|
|
1192
|
+
purpose: "color";
|
|
1193
|
+
description: "Color of the shadow";
|
|
1194
|
+
};
|
|
1195
|
+
$root: {
|
|
1196
|
+
purpose: "shadow";
|
|
1197
|
+
description: string;
|
|
1198
|
+
};
|
|
506
1199
|
};
|
|
507
1200
|
md: {
|
|
508
|
-
x:
|
|
509
|
-
|
|
510
|
-
|
|
511
|
-
|
|
512
|
-
|
|
513
|
-
|
|
1201
|
+
x: {
|
|
1202
|
+
purpose: "size";
|
|
1203
|
+
description: "Horizontal offset of the shadow";
|
|
1204
|
+
};
|
|
1205
|
+
y: {
|
|
1206
|
+
purpose: "size";
|
|
1207
|
+
description: "Vertical offset of the shadow";
|
|
1208
|
+
};
|
|
1209
|
+
blur: {
|
|
1210
|
+
purpose: "size";
|
|
1211
|
+
description: "Blur radius of the shadow";
|
|
1212
|
+
};
|
|
1213
|
+
spread: {
|
|
1214
|
+
purpose: "size";
|
|
1215
|
+
description: "Spread radius of the shadow";
|
|
1216
|
+
};
|
|
1217
|
+
color: {
|
|
1218
|
+
purpose: "color";
|
|
1219
|
+
description: "Color of the shadow";
|
|
1220
|
+
};
|
|
1221
|
+
$root: {
|
|
1222
|
+
purpose: "shadow";
|
|
1223
|
+
description: string;
|
|
1224
|
+
};
|
|
514
1225
|
};
|
|
515
1226
|
lg: {
|
|
516
|
-
x:
|
|
517
|
-
|
|
518
|
-
|
|
519
|
-
|
|
520
|
-
|
|
521
|
-
|
|
1227
|
+
x: {
|
|
1228
|
+
purpose: "size";
|
|
1229
|
+
description: "Horizontal offset of the shadow";
|
|
1230
|
+
};
|
|
1231
|
+
y: {
|
|
1232
|
+
purpose: "size";
|
|
1233
|
+
description: "Vertical offset of the shadow";
|
|
1234
|
+
};
|
|
1235
|
+
blur: {
|
|
1236
|
+
purpose: "size";
|
|
1237
|
+
description: "Blur radius of the shadow";
|
|
1238
|
+
};
|
|
1239
|
+
spread: {
|
|
1240
|
+
purpose: "size";
|
|
1241
|
+
description: "Spread radius of the shadow";
|
|
1242
|
+
};
|
|
1243
|
+
color: {
|
|
1244
|
+
purpose: "color";
|
|
1245
|
+
description: "Color of the shadow";
|
|
1246
|
+
};
|
|
1247
|
+
$root: {
|
|
1248
|
+
purpose: "shadow";
|
|
1249
|
+
description: string;
|
|
1250
|
+
};
|
|
522
1251
|
};
|
|
523
1252
|
xl: {
|
|
524
|
-
x:
|
|
525
|
-
|
|
526
|
-
|
|
527
|
-
|
|
528
|
-
|
|
529
|
-
|
|
1253
|
+
x: {
|
|
1254
|
+
purpose: "size";
|
|
1255
|
+
description: "Horizontal offset of the shadow";
|
|
1256
|
+
};
|
|
1257
|
+
y: {
|
|
1258
|
+
purpose: "size";
|
|
1259
|
+
description: "Vertical offset of the shadow";
|
|
1260
|
+
};
|
|
1261
|
+
blur: {
|
|
1262
|
+
purpose: "size";
|
|
1263
|
+
description: "Blur radius of the shadow";
|
|
1264
|
+
};
|
|
1265
|
+
spread: {
|
|
1266
|
+
purpose: "size";
|
|
1267
|
+
description: "Spread radius of the shadow";
|
|
1268
|
+
};
|
|
1269
|
+
color: {
|
|
1270
|
+
purpose: "color";
|
|
1271
|
+
description: "Color of the shadow";
|
|
1272
|
+
};
|
|
1273
|
+
$root: {
|
|
1274
|
+
purpose: "shadow";
|
|
1275
|
+
description: string;
|
|
1276
|
+
};
|
|
530
1277
|
};
|
|
531
1278
|
};
|
|
532
1279
|
}>;
|