@arbor-css/core 0.0.117 → 0.0.118
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/cli/introspection.js +6 -6
- package/dist/cli/introspection.js.map +1 -1
- package/dist/getStructuredTokensMap.test.js +4 -4
- package/dist/getStructuredTokensMap.test.js.map +1 -1
- package/dist/presets/arborPreset/modeSchema/global.d.ts +32 -0
- package/dist/presets/arborPreset/modeSchema/global.d.ts.map +1 -1
- package/dist/presets/arborPreset/modeSchema/global.js +32 -0
- package/dist/presets/arborPreset/modeSchema/global.js.map +1 -1
- package/dist/presets/arborPreset/modeSchema/modeSchema.d.ts +157 -393
- package/dist/presets/arborPreset/modeSchema/modeSchema.d.ts.map +1 -1
- package/dist/presets/arborPreset/modeSchema/modeSchema.js +3 -16
- package/dist/presets/arborPreset/modeSchema/modeSchema.js.map +1 -1
- package/dist/presets/arborPreset/modeSchema/modeSchema.test.js +2 -2
- package/dist/presets/arborPreset/modeSchema/modeSchema.test.js.map +1 -1
- package/dist/presets/arborPreset/modeSchema/semantics/color.d.ts +61 -1
- package/dist/presets/arborPreset/modeSchema/semantics/color.d.ts.map +1 -1
- package/dist/presets/arborPreset/modeSchema/semantics/color.js +8 -1
- package/dist/presets/arborPreset/modeSchema/semantics/color.js.map +1 -1
- package/dist/presets/arborPreset/modeSchema/semantics/radius.d.ts +0 -1
- package/dist/presets/arborPreset/modeSchema/semantics/radius.d.ts.map +1 -1
- package/dist/presets/arborPreset/modeSchema/semantics/radius.js +0 -1
- package/dist/presets/arborPreset/modeSchema/semantics/radius.js.map +1 -1
- package/dist/presets/arborPreset/modeSchema/semantics/typography.d.ts +75 -0
- package/dist/presets/arborPreset/modeSchema/semantics/typography.d.ts.map +1 -0
- package/dist/presets/arborPreset/modeSchema/semantics/typography.js +76 -0
- package/dist/presets/arborPreset/modeSchema/semantics/typography.js.map +1 -0
- package/dist/presets/arborPreset/modeValues/intents.d.ts +51 -51
- package/dist/presets/arborPreset/modeValues/intents.d.ts.map +1 -1
- package/dist/presets/arborPreset/modeValues/intents.js +16 -10
- package/dist/presets/arborPreset/modeValues/intents.js.map +1 -1
- package/dist/presets/arborPreset/modeValues/semantics.d.ts +315 -1294
- package/dist/presets/arborPreset/modeValues/semantics.d.ts.map +1 -1
- package/dist/presets/arborPreset/modeValues/semantics.js +107 -43
- package/dist/presets/arborPreset/modeValues/semantics.js.map +1 -1
- package/dist/presets/arborPreset/modeValues/typography/index.d.ts.map +1 -1
- package/dist/presets/arborPreset/modeValues/typography/index.js +0 -14
- package/dist/presets/arborPreset/modeValues/typography/index.js.map +1 -1
- package/dist/presets/arborPreset/preset.d.ts +301 -675
- package/dist/presets/arborPreset/preset.d.ts.map +1 -1
- package/dist/presets/arborPreset/preset.js +21 -40
- package/dist/presets/arborPreset/preset.js.map +1 -1
- package/dist/presets/arborPreset/preset.test.js +1 -1
- package/dist/presets/arborPreset/preset.test.js.map +1 -1
- package/dist/presets/basicPreset/mixins.d.ts +69 -69
- package/dist/presets/basicPreset/mixins.d.ts.map +1 -1
- package/dist/presets/basicPreset/preset.d.ts +82 -62
- package/dist/presets/basicPreset/preset.d.ts.map +1 -1
- package/dist/presets/basicPreset/preset.js +33 -1
- package/dist/presets/basicPreset/preset.js.map +1 -1
- package/dist/rendering/generateDesignTokens.js +1 -1
- package/dist/rendering/generateDesignTokens.js.map +1 -1
- package/dist/rendering/generateStylesheet.test.js +1 -1
- package/dist/rendering/generateStylesheet.test.js.map +1 -1
- package/dist/runtime/components/FunctionsList.js +4 -4
- package/dist/runtime/components/MixinsList.js +4 -4
- package/dist/runtime/components/ModeGraph.js +4 -4
- package/dist/runtime/components/Outputs.d.ts.map +1 -1
- package/dist/runtime/components/Outputs.js +0 -6
- package/dist/runtime/components/Outputs.js.map +1 -1
- package/dist/runtime/tokenGroups.d.ts +3 -3
- package/dist/runtime/tokenGroups.d.ts.map +1 -1
- package/dist/util/buildModeTokenGraph.test.js +1 -1
- package/dist/util/buildModeTokenGraph.test.js.map +1 -1
- package/dist/util/resolveComputedTokenValue.test.js +0 -4
- package/dist/util/resolveComputedTokenValue.test.js.map +1 -1
- package/package.json +8 -8
- package/dist/presets/arborPreset/modeSchema/primitives/typography.d.ts +0 -165
- package/dist/presets/arborPreset/modeSchema/primitives/typography.d.ts.map +0 -1
- package/dist/presets/arborPreset/modeSchema/primitives/typography.js +0 -36
- package/dist/presets/arborPreset/modeSchema/primitives/typography.js.map +0 -1
|
@@ -56,6 +56,10 @@ export declare function createArborModeSchema<TColorName extends string>(options
|
|
|
56
56
|
purpose: "font-size";
|
|
57
57
|
description: "Defines the root font size used to derive typography tokens.";
|
|
58
58
|
};
|
|
59
|
+
size: {
|
|
60
|
+
purpose: "scalar";
|
|
61
|
+
description: "A global parameter to influence the overall font size of all typography tokens.";
|
|
62
|
+
};
|
|
59
63
|
weightStep: {
|
|
60
64
|
purpose: "scalar";
|
|
61
65
|
description: "The amount of font weight change between each typography level. This is multiplied by the level index to determine how much to adjust font weight at each level.";
|
|
@@ -124,407 +128,34 @@ export declare function createArborModeSchema<TColorName extends string>(options
|
|
|
124
128
|
purpose: "scalar";
|
|
125
129
|
description: "An adjustment applied to font weight when in dark mode to compensate for the irradiation illusion. This is typically a negative value to reduce font weight in dark mode, but it can be positive if your theme has very light text and you want to increase weight in dark mode.";
|
|
126
130
|
};
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
color: Record<TColorName, {
|
|
131
|
-
$neutral: {
|
|
132
|
-
$root: {
|
|
133
|
-
purpose: "color";
|
|
134
|
-
description: string;
|
|
135
|
-
};
|
|
136
|
-
paper: {
|
|
137
|
-
purpose: "color";
|
|
138
|
-
description: "An extremely light shade, good for backgrounds and surfaces";
|
|
139
|
-
};
|
|
140
|
-
wash: {
|
|
141
|
-
purpose: "color";
|
|
142
|
-
description: "A very faint but slightly vibrant shade, good for backgrounds and surfaces";
|
|
143
|
-
};
|
|
144
|
-
light: {
|
|
145
|
-
purpose: "color";
|
|
146
|
-
description: "A light shade, good for emphasized surfaces.";
|
|
147
|
-
};
|
|
148
|
-
mid: {
|
|
149
|
-
purpose: "color";
|
|
150
|
-
description: "The main shade, good for primary actions and decoration.";
|
|
151
|
-
};
|
|
152
|
-
heavy: {
|
|
153
|
-
purpose: "color";
|
|
154
|
-
description: "A heavy shade, good for text emphasis and accents.";
|
|
155
|
-
};
|
|
156
|
-
ink: {
|
|
157
|
-
purpose: "color";
|
|
158
|
-
description: "A very dark but still slightly vibrant shade, good for text and high contrast elements.";
|
|
159
|
-
};
|
|
160
|
-
};
|
|
161
|
-
$root: {
|
|
162
|
-
purpose: "color";
|
|
163
|
-
description: string;
|
|
164
|
-
};
|
|
165
|
-
paper: {
|
|
166
|
-
purpose: "color";
|
|
167
|
-
description: "An extremely light shade, good for backgrounds and surfaces";
|
|
168
|
-
};
|
|
169
|
-
wash: {
|
|
170
|
-
purpose: "color";
|
|
171
|
-
description: "A very faint but slightly vibrant shade, good for backgrounds and surfaces";
|
|
172
|
-
};
|
|
173
|
-
light: {
|
|
174
|
-
purpose: "color";
|
|
175
|
-
description: "A light shade, good for emphasized surfaces.";
|
|
176
|
-
};
|
|
177
|
-
mid: {
|
|
178
|
-
purpose: "color";
|
|
179
|
-
description: "The main shade, good for primary actions and decoration.";
|
|
180
|
-
};
|
|
181
|
-
heavy: {
|
|
182
|
-
purpose: "color";
|
|
183
|
-
description: "A heavy shade, good for text emphasis and accents.";
|
|
184
|
-
};
|
|
185
|
-
ink: {
|
|
186
|
-
purpose: "color";
|
|
187
|
-
description: "A very dark but still slightly vibrant shade, good for text and high contrast elements.";
|
|
188
|
-
};
|
|
189
|
-
}>;
|
|
190
|
-
spacing: {
|
|
191
|
-
$root: {
|
|
192
|
-
purpose: "spacing";
|
|
193
|
-
description: string;
|
|
131
|
+
boldness: {
|
|
132
|
+
purpose: "scalar";
|
|
133
|
+
description: "An overall scaling factor for how heavy font weight tokens are.";
|
|
194
134
|
};
|
|
195
|
-
'2xs': "spacing";
|
|
196
|
-
xs: "spacing";
|
|
197
|
-
sm: "spacing";
|
|
198
|
-
md: "spacing";
|
|
199
|
-
lg: "spacing";
|
|
200
|
-
xl: "spacing";
|
|
201
|
-
'2xl': "spacing";
|
|
202
135
|
};
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
normal: "font-weight";
|
|
208
|
-
semiBold: "font-weight";
|
|
209
|
-
bold: "font-weight";
|
|
210
|
-
black: "font-weight";
|
|
211
|
-
};
|
|
212
|
-
xs: {
|
|
213
|
-
size: {
|
|
214
|
-
purpose: "font-size";
|
|
215
|
-
description: "The size of the font used in this typography level";
|
|
216
|
-
};
|
|
217
|
-
lineHeight: {
|
|
218
|
-
purpose: "line-height";
|
|
219
|
-
description: "The line height of the font used in this typography level";
|
|
220
|
-
};
|
|
221
|
-
letterSpacing: {
|
|
222
|
-
purpose: "letter-spacing";
|
|
223
|
-
description: "The letter spacing of the font used in this typography level";
|
|
224
|
-
};
|
|
225
|
-
};
|
|
226
|
-
sm: {
|
|
227
|
-
size: {
|
|
228
|
-
purpose: "font-size";
|
|
229
|
-
description: "The size of the font used in this typography level";
|
|
230
|
-
};
|
|
231
|
-
lineHeight: {
|
|
232
|
-
purpose: "line-height";
|
|
233
|
-
description: "The line height of the font used in this typography level";
|
|
234
|
-
};
|
|
235
|
-
letterSpacing: {
|
|
236
|
-
purpose: "letter-spacing";
|
|
237
|
-
description: "The letter spacing of the font used in this typography level";
|
|
238
|
-
};
|
|
239
|
-
};
|
|
240
|
-
md: {
|
|
241
|
-
size: {
|
|
242
|
-
purpose: "font-size";
|
|
243
|
-
description: "The size of the font used in this typography level";
|
|
244
|
-
};
|
|
245
|
-
lineHeight: {
|
|
246
|
-
purpose: "line-height";
|
|
247
|
-
description: "The line height of the font used in this typography level";
|
|
248
|
-
};
|
|
249
|
-
letterSpacing: {
|
|
250
|
-
purpose: "letter-spacing";
|
|
251
|
-
description: "The letter spacing of the font used in this typography level";
|
|
252
|
-
};
|
|
253
|
-
};
|
|
254
|
-
lg: {
|
|
255
|
-
size: {
|
|
256
|
-
purpose: "font-size";
|
|
257
|
-
description: "The size of the font used in this typography level";
|
|
258
|
-
};
|
|
259
|
-
lineHeight: {
|
|
260
|
-
purpose: "line-height";
|
|
261
|
-
description: "The line height of the font used in this typography level";
|
|
262
|
-
};
|
|
263
|
-
letterSpacing: {
|
|
264
|
-
purpose: "letter-spacing";
|
|
265
|
-
description: "The letter spacing of the font used in this typography level";
|
|
266
|
-
};
|
|
267
|
-
};
|
|
268
|
-
xl: {
|
|
269
|
-
size: {
|
|
270
|
-
purpose: "font-size";
|
|
271
|
-
description: "The size of the font used in this typography level";
|
|
272
|
-
};
|
|
273
|
-
lineHeight: {
|
|
274
|
-
purpose: "line-height";
|
|
275
|
-
description: "The line height of the font used in this typography level";
|
|
276
|
-
};
|
|
277
|
-
letterSpacing: {
|
|
278
|
-
purpose: "letter-spacing";
|
|
279
|
-
description: "The letter spacing of the font used in this typography level";
|
|
280
|
-
};
|
|
281
|
-
};
|
|
282
|
-
'2xl': {
|
|
283
|
-
size: {
|
|
284
|
-
purpose: "font-size";
|
|
285
|
-
description: "The size of the font used in this typography level";
|
|
286
|
-
};
|
|
287
|
-
lineHeight: {
|
|
288
|
-
purpose: "line-height";
|
|
289
|
-
description: "The line height of the font used in this typography level";
|
|
290
|
-
};
|
|
291
|
-
letterSpacing: {
|
|
292
|
-
purpose: "letter-spacing";
|
|
293
|
-
description: "The letter spacing of the font used in this typography level";
|
|
294
|
-
};
|
|
295
|
-
};
|
|
296
|
-
'3xl': {
|
|
297
|
-
size: {
|
|
298
|
-
purpose: "font-size";
|
|
299
|
-
description: "The size of the font used in this typography level";
|
|
300
|
-
};
|
|
301
|
-
lineHeight: {
|
|
302
|
-
purpose: "line-height";
|
|
303
|
-
description: "The line height of the font used in this typography level";
|
|
304
|
-
};
|
|
305
|
-
letterSpacing: {
|
|
306
|
-
purpose: "letter-spacing";
|
|
307
|
-
description: "The letter spacing of the font used in this typography level";
|
|
308
|
-
};
|
|
309
|
-
};
|
|
310
|
-
'4xl': {
|
|
311
|
-
size: {
|
|
312
|
-
purpose: "font-size";
|
|
313
|
-
description: "The size of the font used in this typography level";
|
|
314
|
-
};
|
|
315
|
-
lineHeight: {
|
|
316
|
-
purpose: "line-height";
|
|
317
|
-
description: "The line height of the font used in this typography level";
|
|
318
|
-
};
|
|
319
|
-
letterSpacing: {
|
|
320
|
-
purpose: "letter-spacing";
|
|
321
|
-
description: "The letter spacing of the font used in this typography level";
|
|
322
|
-
};
|
|
323
|
-
};
|
|
324
|
-
'5xl': {
|
|
325
|
-
size: {
|
|
326
|
-
purpose: "font-size";
|
|
327
|
-
description: "The size of the font used in this typography level";
|
|
328
|
-
};
|
|
329
|
-
lineHeight: {
|
|
330
|
-
purpose: "line-height";
|
|
331
|
-
description: "The line height of the font used in this typography level";
|
|
332
|
-
};
|
|
333
|
-
letterSpacing: {
|
|
334
|
-
purpose: "letter-spacing";
|
|
335
|
-
description: "The letter spacing of the font used in this typography level";
|
|
336
|
-
};
|
|
337
|
-
};
|
|
338
|
-
'6xl': {
|
|
339
|
-
size: {
|
|
340
|
-
purpose: "font-size";
|
|
341
|
-
description: "The size of the font used in this typography level";
|
|
342
|
-
};
|
|
343
|
-
lineHeight: {
|
|
344
|
-
purpose: "line-height";
|
|
345
|
-
description: "The line height of the font used in this typography level";
|
|
346
|
-
};
|
|
347
|
-
letterSpacing: {
|
|
348
|
-
purpose: "letter-spacing";
|
|
349
|
-
description: "The letter spacing of the font used in this typography level";
|
|
350
|
-
};
|
|
136
|
+
easing: {
|
|
137
|
+
bounciness: {
|
|
138
|
+
purpose: "scalar";
|
|
139
|
+
description: "Controls the bounciness of easing functions. Higher values result in more overshoot and bounce.";
|
|
351
140
|
};
|
|
352
141
|
};
|
|
353
|
-
|
|
354
|
-
|
|
355
|
-
|
|
356
|
-
|
|
357
|
-
description: string;
|
|
358
|
-
};
|
|
359
|
-
x: {
|
|
360
|
-
purpose: "shadow-x";
|
|
361
|
-
description: "Horizontal offset of the shadow";
|
|
362
|
-
};
|
|
363
|
-
y: {
|
|
364
|
-
purpose: "shadow-y";
|
|
365
|
-
description: "Vertical offset of the shadow";
|
|
366
|
-
};
|
|
367
|
-
blur: {
|
|
368
|
-
purpose: "shadow-blur";
|
|
369
|
-
description: "Blur radius of the shadow";
|
|
370
|
-
};
|
|
371
|
-
spread: {
|
|
372
|
-
purpose: "shadow-spread";
|
|
373
|
-
description: "Spread radius of the shadow";
|
|
374
|
-
};
|
|
375
|
-
color: {
|
|
376
|
-
purpose: "shadow-color";
|
|
377
|
-
description: "Color of the shadow";
|
|
378
|
-
};
|
|
379
|
-
};
|
|
380
|
-
xs: {
|
|
381
|
-
$root: {
|
|
382
|
-
purpose: "shadow";
|
|
383
|
-
description: string;
|
|
384
|
-
};
|
|
385
|
-
x: {
|
|
386
|
-
purpose: "shadow-x";
|
|
387
|
-
description: "Horizontal offset of the shadow";
|
|
388
|
-
};
|
|
389
|
-
y: {
|
|
390
|
-
purpose: "shadow-y";
|
|
391
|
-
description: "Vertical offset of the shadow";
|
|
392
|
-
};
|
|
393
|
-
blur: {
|
|
394
|
-
purpose: "shadow-blur";
|
|
395
|
-
description: "Blur radius of the shadow";
|
|
396
|
-
};
|
|
397
|
-
spread: {
|
|
398
|
-
purpose: "shadow-spread";
|
|
399
|
-
description: "Spread radius of the shadow";
|
|
400
|
-
};
|
|
401
|
-
color: {
|
|
402
|
-
purpose: "shadow-color";
|
|
403
|
-
description: "Color of the shadow";
|
|
404
|
-
};
|
|
405
|
-
};
|
|
406
|
-
sm: {
|
|
407
|
-
$root: {
|
|
408
|
-
purpose: "shadow";
|
|
409
|
-
description: string;
|
|
410
|
-
};
|
|
411
|
-
x: {
|
|
412
|
-
purpose: "shadow-x";
|
|
413
|
-
description: "Horizontal offset of the shadow";
|
|
414
|
-
};
|
|
415
|
-
y: {
|
|
416
|
-
purpose: "shadow-y";
|
|
417
|
-
description: "Vertical offset of the shadow";
|
|
418
|
-
};
|
|
419
|
-
blur: {
|
|
420
|
-
purpose: "shadow-blur";
|
|
421
|
-
description: "Blur radius of the shadow";
|
|
422
|
-
};
|
|
423
|
-
spread: {
|
|
424
|
-
purpose: "shadow-spread";
|
|
425
|
-
description: "Spread radius of the shadow";
|
|
426
|
-
};
|
|
427
|
-
color: {
|
|
428
|
-
purpose: "shadow-color";
|
|
429
|
-
description: "Color of the shadow";
|
|
430
|
-
};
|
|
431
|
-
};
|
|
432
|
-
md: {
|
|
433
|
-
$root: {
|
|
434
|
-
purpose: "shadow";
|
|
435
|
-
description: string;
|
|
436
|
-
};
|
|
437
|
-
x: {
|
|
438
|
-
purpose: "shadow-x";
|
|
439
|
-
description: "Horizontal offset of the shadow";
|
|
440
|
-
};
|
|
441
|
-
y: {
|
|
442
|
-
purpose: "shadow-y";
|
|
443
|
-
description: "Vertical offset of the shadow";
|
|
444
|
-
};
|
|
445
|
-
blur: {
|
|
446
|
-
purpose: "shadow-blur";
|
|
447
|
-
description: "Blur radius of the shadow";
|
|
448
|
-
};
|
|
449
|
-
spread: {
|
|
450
|
-
purpose: "shadow-spread";
|
|
451
|
-
description: "Spread radius of the shadow";
|
|
452
|
-
};
|
|
453
|
-
color: {
|
|
454
|
-
purpose: "shadow-color";
|
|
455
|
-
description: "Color of the shadow";
|
|
456
|
-
};
|
|
457
|
-
};
|
|
458
|
-
lg: {
|
|
459
|
-
$root: {
|
|
460
|
-
purpose: "shadow";
|
|
461
|
-
description: string;
|
|
462
|
-
};
|
|
463
|
-
x: {
|
|
464
|
-
purpose: "shadow-x";
|
|
465
|
-
description: "Horizontal offset of the shadow";
|
|
466
|
-
};
|
|
467
|
-
y: {
|
|
468
|
-
purpose: "shadow-y";
|
|
469
|
-
description: "Vertical offset of the shadow";
|
|
470
|
-
};
|
|
471
|
-
blur: {
|
|
472
|
-
purpose: "shadow-blur";
|
|
473
|
-
description: "Blur radius of the shadow";
|
|
474
|
-
};
|
|
475
|
-
spread: {
|
|
476
|
-
purpose: "shadow-spread";
|
|
477
|
-
description: "Spread radius of the shadow";
|
|
478
|
-
};
|
|
479
|
-
color: {
|
|
480
|
-
purpose: "shadow-color";
|
|
481
|
-
description: "Color of the shadow";
|
|
482
|
-
};
|
|
142
|
+
duration: {
|
|
143
|
+
slowness: {
|
|
144
|
+
purpose: "scalar";
|
|
145
|
+
description: "Controls the overall slowness of durations. Higher values result in longer durations.";
|
|
483
146
|
};
|
|
484
|
-
|
|
485
|
-
|
|
486
|
-
|
|
487
|
-
description: string;
|
|
488
|
-
};
|
|
489
|
-
x: {
|
|
490
|
-
purpose: "shadow-x";
|
|
491
|
-
description: "Horizontal offset of the shadow";
|
|
492
|
-
};
|
|
493
|
-
y: {
|
|
494
|
-
purpose: "shadow-y";
|
|
495
|
-
description: "Vertical offset of the shadow";
|
|
496
|
-
};
|
|
497
|
-
blur: {
|
|
498
|
-
purpose: "shadow-blur";
|
|
499
|
-
description: "Blur radius of the shadow";
|
|
500
|
-
};
|
|
501
|
-
spread: {
|
|
502
|
-
purpose: "shadow-spread";
|
|
503
|
-
description: "Spread radius of the shadow";
|
|
504
|
-
};
|
|
505
|
-
color: {
|
|
506
|
-
purpose: "shadow-color";
|
|
507
|
-
description: "Color of the shadow";
|
|
508
|
-
};
|
|
147
|
+
base: {
|
|
148
|
+
purpose: "duration";
|
|
149
|
+
description: "The base duration used to derive all other durations. This can be thought of as the \"medium\" duration, and other durations are calculated as multiples or fractions of this base.";
|
|
509
150
|
};
|
|
510
|
-
|
|
511
|
-
|
|
512
|
-
|
|
513
|
-
purpose: "easing-function";
|
|
514
|
-
description: string;
|
|
151
|
+
min: {
|
|
152
|
+
purpose: "duration";
|
|
153
|
+
description: "The minimum duration to use in the duration scale.";
|
|
515
154
|
};
|
|
516
|
-
|
|
517
|
-
medium: "easing-function";
|
|
518
|
-
loose: "easing-function";
|
|
519
|
-
};
|
|
520
|
-
duration: {
|
|
521
|
-
$root: {
|
|
155
|
+
max: {
|
|
522
156
|
purpose: "duration";
|
|
523
|
-
description:
|
|
157
|
+
description: "The maximum duration to use in the duration scale.";
|
|
524
158
|
};
|
|
525
|
-
short: "duration";
|
|
526
|
-
medium: "duration";
|
|
527
|
-
long: "duration";
|
|
528
159
|
};
|
|
529
160
|
};
|
|
530
161
|
action: {
|
|
@@ -872,6 +503,66 @@ export declare function createArborModeSchema<TColorName extends string>(options
|
|
|
872
503
|
description: "A very dark but still slightly vibrant shade, good for text and high contrast elements.";
|
|
873
504
|
};
|
|
874
505
|
};
|
|
506
|
+
palette: Record<TColorName, {
|
|
507
|
+
$neutral: {
|
|
508
|
+
$root: {
|
|
509
|
+
purpose: "color";
|
|
510
|
+
description: string;
|
|
511
|
+
};
|
|
512
|
+
paper: {
|
|
513
|
+
purpose: "color";
|
|
514
|
+
description: "An extremely light shade, good for backgrounds and surfaces";
|
|
515
|
+
};
|
|
516
|
+
wash: {
|
|
517
|
+
purpose: "color";
|
|
518
|
+
description: "A very faint but slightly vibrant shade, good for backgrounds and surfaces";
|
|
519
|
+
};
|
|
520
|
+
light: {
|
|
521
|
+
purpose: "color";
|
|
522
|
+
description: "A light shade, good for emphasized surfaces.";
|
|
523
|
+
};
|
|
524
|
+
mid: {
|
|
525
|
+
purpose: "color";
|
|
526
|
+
description: "The main shade, good for primary actions and decoration.";
|
|
527
|
+
};
|
|
528
|
+
heavy: {
|
|
529
|
+
purpose: "color";
|
|
530
|
+
description: "A heavy shade, good for text emphasis and accents.";
|
|
531
|
+
};
|
|
532
|
+
ink: {
|
|
533
|
+
purpose: "color";
|
|
534
|
+
description: "A very dark but still slightly vibrant shade, good for text and high contrast elements.";
|
|
535
|
+
};
|
|
536
|
+
};
|
|
537
|
+
$root: {
|
|
538
|
+
purpose: "color";
|
|
539
|
+
description: string;
|
|
540
|
+
};
|
|
541
|
+
paper: {
|
|
542
|
+
purpose: "color";
|
|
543
|
+
description: "An extremely light shade, good for backgrounds and surfaces";
|
|
544
|
+
};
|
|
545
|
+
wash: {
|
|
546
|
+
purpose: "color";
|
|
547
|
+
description: "A very faint but slightly vibrant shade, good for backgrounds and surfaces";
|
|
548
|
+
};
|
|
549
|
+
light: {
|
|
550
|
+
purpose: "color";
|
|
551
|
+
description: "A light shade, good for emphasized surfaces.";
|
|
552
|
+
};
|
|
553
|
+
mid: {
|
|
554
|
+
purpose: "color";
|
|
555
|
+
description: "The main shade, good for primary actions and decoration.";
|
|
556
|
+
};
|
|
557
|
+
heavy: {
|
|
558
|
+
purpose: "color";
|
|
559
|
+
description: "A heavy shade, good for text emphasis and accents.";
|
|
560
|
+
};
|
|
561
|
+
ink: {
|
|
562
|
+
purpose: "color";
|
|
563
|
+
description: "A very dark but still slightly vibrant shade, good for text and high contrast elements.";
|
|
564
|
+
};
|
|
565
|
+
}>;
|
|
875
566
|
};
|
|
876
567
|
spacing: {
|
|
877
568
|
$root: {
|
|
@@ -911,7 +602,6 @@ export declare function createArborModeSchema<TColorName extends string>(options
|
|
|
911
602
|
sm: "border-radius";
|
|
912
603
|
md: "border-radius";
|
|
913
604
|
lg: "border-radius";
|
|
914
|
-
xl: "border-radius";
|
|
915
605
|
};
|
|
916
606
|
shadow: {
|
|
917
607
|
$root: {
|
|
@@ -1089,6 +779,80 @@ export declare function createArborModeSchema<TColorName extends string>(options
|
|
|
1089
779
|
description: "A long, relaxed duration, good for slow interactions and animations";
|
|
1090
780
|
};
|
|
1091
781
|
};
|
|
782
|
+
typography: {
|
|
783
|
+
weight: {
|
|
784
|
+
$root: {
|
|
785
|
+
purpose: "font-weight";
|
|
786
|
+
description: string;
|
|
787
|
+
};
|
|
788
|
+
thin: {
|
|
789
|
+
purpose: "font-weight";
|
|
790
|
+
description: "A thin font weight, good for large or de-emphasized text";
|
|
791
|
+
};
|
|
792
|
+
normal: {
|
|
793
|
+
purpose: "font-weight";
|
|
794
|
+
description: "A normal font weight, good for general use";
|
|
795
|
+
};
|
|
796
|
+
bold: {
|
|
797
|
+
purpose: "font-weight";
|
|
798
|
+
description: "A bold font weight, good for small or emphasized text";
|
|
799
|
+
};
|
|
800
|
+
};
|
|
801
|
+
size: {
|
|
802
|
+
$root: {
|
|
803
|
+
purpose: "font-size";
|
|
804
|
+
description: string;
|
|
805
|
+
};
|
|
806
|
+
sm: {
|
|
807
|
+
purpose: "font-size";
|
|
808
|
+
description: "A small font size, good for captions and fine print";
|
|
809
|
+
};
|
|
810
|
+
md: {
|
|
811
|
+
purpose: "font-size";
|
|
812
|
+
description: "A medium font size, good for general use";
|
|
813
|
+
};
|
|
814
|
+
lg: {
|
|
815
|
+
purpose: "font-size";
|
|
816
|
+
description: "A large font size, good for headings and emphasis";
|
|
817
|
+
};
|
|
818
|
+
};
|
|
819
|
+
lineHeight: {
|
|
820
|
+
$root: {
|
|
821
|
+
purpose: "line-height";
|
|
822
|
+
description: string;
|
|
823
|
+
};
|
|
824
|
+
tight: {
|
|
825
|
+
purpose: "line-height";
|
|
826
|
+
description: "A tight line height, good for large text or when space is limited";
|
|
827
|
+
};
|
|
828
|
+
normal: {
|
|
829
|
+
purpose: "line-height";
|
|
830
|
+
description: "A normal line height, good for general use";
|
|
831
|
+
};
|
|
832
|
+
loose: {
|
|
833
|
+
purpose: "line-height";
|
|
834
|
+
description: "A loose line height, good for small text or when readability is a concern";
|
|
835
|
+
};
|
|
836
|
+
};
|
|
837
|
+
letterSpacing: {
|
|
838
|
+
$root: {
|
|
839
|
+
purpose: "letter-spacing";
|
|
840
|
+
description: string;
|
|
841
|
+
};
|
|
842
|
+
tight: {
|
|
843
|
+
purpose: "letter-spacing";
|
|
844
|
+
description: "A tight letter spacing, good for large text or when space is limited";
|
|
845
|
+
};
|
|
846
|
+
normal: {
|
|
847
|
+
purpose: "letter-spacing";
|
|
848
|
+
description: "A normal letter spacing, good for general use";
|
|
849
|
+
};
|
|
850
|
+
loose: {
|
|
851
|
+
purpose: "letter-spacing";
|
|
852
|
+
description: "A loose letter spacing, good for small text or when readability is a concern";
|
|
853
|
+
};
|
|
854
|
+
};
|
|
855
|
+
};
|
|
1092
856
|
};
|
|
1093
857
|
export type ArborModeSchema<TColorName extends string = string> = ReturnType<typeof createArborModeSchema<TColorName>>;
|
|
1094
858
|
//# sourceMappingURL=modeSchema.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"modeSchema.d.ts","sourceRoot":"","sources":["../../../../src/presets/arborPreset/modeSchema/modeSchema.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"modeSchema.d.ts","sourceRoot":"","sources":["../../../../src/presets/arborPreset/modeSchema/modeSchema.ts"],"names":[],"mappings":"AAeA,MAAM,WAAW,sBAAsB,CAAC,UAAU,SAAS,WAAW;IACrE,UAAU,EAAE,UAAU,EAAE,CAAC;CACzB;AAED,wBAAgB,qBAAqB,CAAC,UAAU,SAAS,MAAM,EAC9D,OAAO,EAAE,sBAAsB,CAAC,UAAU,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAsB3C;AAED,MAAM,MAAM,eAAe,CAAC,UAAU,SAAS,MAAM,GAAG,MAAM,IAAI,UAAU,CAC3E,OAAO,qBAAqB,CAAC,UAAU,CAAC,CACxC,CAAC"}
|
|
@@ -3,12 +3,6 @@ import { actionIntents } from './intents/action.js';
|
|
|
3
3
|
import { controlIntents } from './intents/control.js';
|
|
4
4
|
import { surfaceIntents } from './intents/surface.js';
|
|
5
5
|
import { textIntents } from './intents/text.js';
|
|
6
|
-
import { createColorPrimitives } from './primitives/color.js';
|
|
7
|
-
import { durationPrimitives } from './primitives/duration.js';
|
|
8
|
-
import { easingPrimitives } from './primitives/easing.js';
|
|
9
|
-
import { shadowPrimitives } from './primitives/shadow.js';
|
|
10
|
-
import { spacingPrimitives } from './primitives/spacing.js';
|
|
11
|
-
import { typographyPrimitives } from './primitives/typography.js';
|
|
12
6
|
import { mainColorSemantics } from './semantics/color.js';
|
|
13
7
|
import { durationSemantics } from './semantics/duration.js';
|
|
14
8
|
import { easingSemantics } from './semantics/easing.js';
|
|
@@ -16,32 +10,25 @@ import { lineWidthSemantics } from './semantics/lines.js';
|
|
|
16
10
|
import { radiusSemantics } from './semantics/radius.js';
|
|
17
11
|
import { shadowSemantics } from './semantics/shadow.js';
|
|
18
12
|
import { spacingSemantics } from './semantics/spacing.js';
|
|
13
|
+
import { typographySemantics } from './semantics/typography.js';
|
|
19
14
|
export function createArborModeSchema(options) {
|
|
20
15
|
return {
|
|
21
16
|
// these influence all sorts of things
|
|
22
17
|
global,
|
|
23
|
-
// primitive values
|
|
24
|
-
primitive: {
|
|
25
|
-
color: createColorPrimitives(options.colorNames),
|
|
26
|
-
spacing: spacingPrimitives,
|
|
27
|
-
typography: typographyPrimitives,
|
|
28
|
-
shadow: shadowPrimitives,
|
|
29
|
-
easing: easingPrimitives,
|
|
30
|
-
duration: durationPrimitives,
|
|
31
|
-
},
|
|
32
18
|
// intents
|
|
33
19
|
action: actionIntents,
|
|
34
20
|
control: controlIntents,
|
|
35
21
|
surface: surfaceIntents,
|
|
36
22
|
text: textIntents,
|
|
37
23
|
// semantic ranges
|
|
38
|
-
color: mainColorSemantics,
|
|
24
|
+
color: mainColorSemantics(options.colorNames),
|
|
39
25
|
spacing: spacingSemantics,
|
|
40
26
|
lineWidth: lineWidthSemantics,
|
|
41
27
|
radius: radiusSemantics,
|
|
42
28
|
shadow: shadowSemantics,
|
|
43
29
|
easing: easingSemantics,
|
|
44
30
|
duration: durationSemantics,
|
|
31
|
+
typography: typographySemantics,
|
|
45
32
|
};
|
|
46
33
|
}
|
|
47
34
|
//# sourceMappingURL=modeSchema.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"modeSchema.js","sourceRoot":"","sources":["../../../../src/presets/arborPreset/modeSchema/modeSchema.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AACrC,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AACpD,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AACtD,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AACtD,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"modeSchema.js","sourceRoot":"","sources":["../../../../src/presets/arborPreset/modeSchema/modeSchema.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AACrC,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AACpD,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AACtD,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AACtD,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAC5D,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AACxD,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AACxD,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AACxD,OAAO,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAC1D,OAAO,EAAE,mBAAmB,EAAE,MAAM,2BAA2B,CAAC;AAMhE,MAAM,UAAU,qBAAqB,CACpC,OAA2C;IAE3C,OAAO;QACN,sCAAsC;QACtC,MAAM;QAEN,UAAU;QACV,MAAM,EAAE,aAAa;QACrB,OAAO,EAAE,cAAc;QACvB,OAAO,EAAE,cAAc;QACvB,IAAI,EAAE,WAAW;QAEjB,kBAAkB;QAClB,KAAK,EAAE,kBAAkB,CAAC,OAAO,CAAC,UAAU,CAAC;QAC7C,OAAO,EAAE,gBAAgB;QACzB,SAAS,EAAE,kBAAkB;QAC7B,MAAM,EAAE,eAAe;QACvB,MAAM,EAAE,eAAe;QACvB,MAAM,EAAE,eAAe;QACvB,QAAQ,EAAE,iBAAiB;QAC3B,UAAU,EAAE,mBAAmB;KACH,CAAC;AAC/B,CAAC"}
|
|
@@ -4,7 +4,7 @@ it('adds input colors to schema color typings and shape', () => {
|
|
|
4
4
|
const schema = createArborModeSchema({
|
|
5
5
|
colorNames: ['red', 'blue', 'green'],
|
|
6
6
|
});
|
|
7
|
-
expect(schema.
|
|
8
|
-
expect(schema.
|
|
7
|
+
expect(schema.color.palette.red.mid.purpose).toBe('color');
|
|
8
|
+
expect(schema.color.palette.red.$neutral.mid.purpose).toBe('color');
|
|
9
9
|
});
|
|
10
10
|
//# sourceMappingURL=modeSchema.test.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"modeSchema.test.js","sourceRoot":"","sources":["../../../../src/presets/arborPreset/modeSchema/modeSchema.test.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,QAAQ,CAAC;AACpC,OAAO,EAAE,qBAAqB,EAAE,MAAM,iBAAiB,CAAC;AAExD,EAAE,CAAC,qDAAqD,EAAE,GAAG,EAAE;IAC9D,MAAM,MAAM,GAAG,qBAAqB,CAAC;QACpC,UAAU,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,OAAO,CAAC;KACpC,CAAC,CAAC;IAEH,MAAM,CAAC,MAAM,CAAC,
|
|
1
|
+
{"version":3,"file":"modeSchema.test.js","sourceRoot":"","sources":["../../../../src/presets/arborPreset/modeSchema/modeSchema.test.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,QAAQ,CAAC;AACpC,OAAO,EAAE,qBAAqB,EAAE,MAAM,iBAAiB,CAAC;AAExD,EAAE,CAAC,qDAAqD,EAAE,GAAG,EAAE;IAC9D,MAAM,MAAM,GAAG,qBAAqB,CAAC;QACpC,UAAU,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,OAAO,CAAC;KACpC,CAAC,CAAC;IAEH,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IAC3D,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC,QAAQ,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;AACrE,CAAC,CAAC,CAAC"}
|