use-wc 1.0.0-pre.42 → 1.0.0-pre.44

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/custom-elements.json +65 -65
  2. package/dist/design-system.css +135 -131
  3. package/dist/tokens.css +22 -17
  4. package/dist/use-wc.d.mts +21 -17
  5. package/dist/use-wc.mjs +254 -197
  6. package/package.json +12 -2
  7. package/vscode.html-custom-data.json +6 -6
package/custom-elements.json CHANGED
@@ -396,6 +396,71 @@
396
396
  }
397
397
  ]
398
398
  },
399
+ {
400
+ "kind": "javascript-module",
401
+ "path": "src/elements/use-calendarday/use-calendarday.ts",
402
+ "declarations": [
403
+ {
404
+ "kind": "class",
405
+ "description": "A helper component for customizing specific days within `use-calendar`.\nContent placed inside this element will replace the default day number display.",
406
+ "name": "UseCalendarday",
407
+ "slots": [
408
+ {
409
+ "description": "slot for custom day content (replaces the day number)",
410
+ "name": "default"
411
+ }
412
+ ],
413
+ "members": [
414
+ {
415
+ "kind": "field",
416
+ "name": "date",
417
+ "type": {
418
+ "text": "string"
419
+ },
420
+ "attribute": "date"
421
+ },
422
+ {
423
+ "kind": "field",
424
+ "name": "day",
425
+ "readonly": true
426
+ }
427
+ ],
428
+ "attributes": [
429
+ {
430
+ "name": "date",
431
+ "type": {
432
+ "text": "string"
433
+ },
434
+ "fieldName": "date"
435
+ }
436
+ ],
437
+ "superclass": {
438
+ "name": "LitElement",
439
+ "package": "lit"
440
+ },
441
+ "tagName": "use-calendarday",
442
+ "customElement": true
443
+ }
444
+ ],
445
+ "exports": [
446
+ {
447
+ "kind": "js",
448
+ "name": "UseCalendarday",
449
+ "declaration": {
450
+ "name": "UseCalendarday",
451
+ "module": "src/elements/use-calendarday/use-calendarday.ts"
452
+ }
453
+ },
454
+ {
455
+ "kind": "custom-element-definition",
456
+ "name": "use-calendarday",
457
+ "declaration": {
458
+ "name": "UseCalendarday",
459
+ "module": "src/elements/use-calendarday/use-calendarday.ts"
460
+ }
461
+ }
462
+ ]
463
+ },
399
464
  {
400
465
  "kind": "javascript-module",
401
466
  "path": "src/elements/use-date-input/use-date-input.ts",
@@ -522,71 +587,6 @@
522
587
  }
523
588
  ]
524
589
  },
525
- {
526
- "kind": "javascript-module",
527
- "path": "src/elements/use-calendarday/use-calendarday.ts",
528
- "declarations": [
529
- {
530
- "kind": "class",
531
- "description": "A helper component for customizing specific days within `use-calendar`.\nContent placed inside this element will replace the default day number display.",
532
- "name": "UseCalendarday",
533
- "slots": [
534
- {
535
- "description": "slot for custom day content (replaces the day number)",
536
- "name": "default"
537
- }
538
- ],
539
- "members": [
540
- {
541
- "kind": "field",
542
- "name": "date",
543
- "type": {
544
- "text": "string"
545
- },
546
- "attribute": "date"
547
- },
548
- {
549
- "kind": "field",
550
- "name": "day",
551
- "readonly": true
552
- }
553
- ],
554
- "attributes": [
555
- {
556
- "name": "date",
557
- "type": {
558
- "text": "string"
559
- },
560
- "fieldName": "date"
561
- }
562
- ],
563
- "superclass": {
564
- "name": "LitElement",
565
- "package": "lit"
566
- },
567
- "tagName": "use-calendarday",
568
- "customElement": true
569
- }
570
- ],
571
- "exports": [
572
- {
573
- "kind": "js",
574
- "name": "UseCalendarday",
575
- "declaration": {
576
- "name": "UseCalendarday",
577
- "module": "src/elements/use-calendarday/use-calendarday.ts"
578
- }
579
- },
580
- {
581
- "kind": "custom-element-definition",
582
- "name": "use-calendarday",
583
- "declaration": {
584
- "name": "UseCalendarday",
585
- "module": "src/elements/use-calendarday/use-calendarday.ts"
586
- }
587
- }
588
- ]
589
- },
590
590
  {
591
591
  "kind": "javascript-module",
592
592
  "path": "src/elements/use-date-picker/use-date-picker.ts",
package/dist/design-system.css CHANGED
@@ -221,19 +221,25 @@
221
221
  display: inline-flex;
222
222
  }
223
223
 
224
- /* Base color */
225
- --usewc-theme-color-button-text-static: var(--usewc-color-button-base-text-static);
226
- --usewc-theme-color-button-text-static-auxiliary: var(--usewc-color-button-base-text-static-auxiliary);
227
- --usewc-theme-color-button-background-static: var(--usewc-color-button-base-background-static);
228
- --usewc-theme-color-button-background-static-auxiliary: var(--usewc-color-button-base-background-static-auxiliary);
229
- --usewc-theme-color-button-border-static: var(--usewc-color-button-base-border-static);
230
- --usewc-theme-color-button-border-static-auxiliary: var(--usewc-color-button-base-border-static-auxiliary);
231
- --usewc-theme-color-button-text-hover: var(--usewc-color-button-base-text-hover);
232
- --usewc-theme-color-button-background-hover: var(--usewc-color-button-base-background-hover);
233
- --usewc-theme-color-button-border-hover: var(--usewc-color-button-base-border-hover);
234
- --usewc-theme-color-button-text-active: var(--usewc-color-button-base-text-active);
235
- --usewc-theme-color-button-background-active: var(--usewc-color-button-base-background-active);
236
- --usewc-theme-color-button-border-active: var(--usewc-color-button-base-border-active);
224
+ /* Scoped color tokens — default to base, remapped by variant classes */
225
+ --usewc-color-button-text-static: var(--usewc-color-button-base-text-static);
226
+ --usewc-color-button-text-static-auxiliary: var(--usewc-color-button-base-text-static-auxiliary);
227
+ --usewc-color-button-background-static: var(--usewc-color-button-base-background-static);
228
+ --usewc-color-button-background-static-auxiliary: var(--usewc-color-button-base-background-static-auxiliary);
229
+ --usewc-color-button-border-static: var(--usewc-color-button-base-border-static);
230
+ --usewc-color-button-border-static-auxiliary: var(--usewc-color-button-base-border-static-auxiliary);
231
+ --usewc-color-button-text-hover: var(--usewc-color-button-base-text-hover);
232
+ --usewc-color-button-background-hover: var(--usewc-color-button-base-background-hover);
233
+ --usewc-color-button-border-hover: var(--usewc-color-button-base-border-hover);
234
+ --usewc-color-button-text-active: var(--usewc-color-button-base-text-active);
235
+ --usewc-color-button-background-active: var(--usewc-color-button-base-background-active);
236
+ --usewc-color-button-border-active: var(--usewc-color-button-base-border-active);
237
+
238
+ /* Scoped layout tokens — default to base, remapped by size classes */
239
+ --usewc-layout-button-padding-block: var(--usewc-layout-button-base-padding-block);
240
+ --usewc-layout-button-padding-inline: var(--usewc-layout-button-base-padding-inline);
241
+ --usewc-layout-button-gap: var(--usewc-layout-button-base-gap);
242
+ --usewc-font-button-size: var(--usewc-font-button-base-size);
237
243
 
238
244
  &::part(trigger),
239
245
  &:not([type="file"], use-dropdown),
@@ -241,23 +247,23 @@
241
247
  display: inline-flex;
242
248
  align-items: center;
243
249
  justify-content: center;
244
- gap: var(--usewc-layout-button-base-gap);
250
+ gap: var(--usewc-layout-button-gap);
245
251
  border-radius: var(--usewc-effect-input-border-radius);
246
252
  line-height: var(--usewc-layout-button-line-height);
247
- padding-block: var(--usewc-layout-button-base-padding-block);
248
- padding-inline: var(--usewc-layout-button-base-padding-inline);
249
- font-family: var(--usewc-font-input-family);
250
- font-size: var(--usewc-layout-button-base-font-size);
251
- font-weight: var(--usewc-font-weight-normal);
253
+ padding-block: var(--usewc-layout-button-padding-block);
254
+ padding-inline: var(--usewc-layout-button-padding-inline);
255
+ font-family: var(--usewc-font-button-family);
256
+ font-size: var(--usewc-font-button-size);
257
+ font-weight: var(--usewc-font-button-weight);
252
258
  white-space: nowrap;
253
259
  cursor: default;
254
- color: var(--usewc-theme-color-button-text-static);
255
- background: var(--usewc-theme-color-button-background-static);
256
- background-size: var(--usewc-layout-button-background-size);
257
- background-position: var(--usewc-layout-button-background-position);
258
- background-repeat: var(--usewc-layout-button-background-repeat);
260
+ color: var(--usewc-color-button-text-static);
261
+ background: var(--usewc-color-button-background-static);
262
+ background-size: var(--usewc-effect-button-background-size);
263
+ background-position: var(--usewc-effect-button-background-position);
264
+ background-repeat: var(--usewc-effect-button-background-repeat);
259
265
  border: var(--usewc-layout-button-border) var(--usewc-effect-input-border-style)
260
- var(--usewc-theme-color-button-border-static);
266
+ var(--usewc-color-button-border-static);
261
267
  }
262
268
 
263
269
  &:is(use-dropdown) {
@@ -271,17 +277,17 @@
271
277
  &:is(:hover, :focus-visible):not([type="file"], use-dropdown),
272
278
  &::part(trigger):is(:hover, :focus-visible),
273
279
  &:is(:hover, :focus-visible)::file-selector-button {
274
- background: var(--usewc-theme-color-button-background-hover);
275
- border-color: var(--usewc-theme-color-button-border-hover);
276
- color: var(--usewc-theme-color-button-text-hover);
280
+ background: var(--usewc-color-button-background-hover);
281
+ border-color: var(--usewc-color-button-border-hover);
282
+ color: var(--usewc-color-button-text-hover);
277
283
  }
278
284
 
279
285
  &:active:not([type="file"], use-dropdown),
280
286
  &:active::part(trigger),
281
287
  &:active::file-selector-button {
282
- background: var(--usewc-theme-color-button-background-active);
283
- border-color: var(--usewc-theme-color-button-border-active);
284
- color: var(--usewc-theme-color-button-text-active);
288
+ background: var(--usewc-color-button-background-active);
289
+ border-color: var(--usewc-color-button-border-active);
290
+ color: var(--usewc-color-button-text-active);
285
291
  }
286
292
 
287
293
  &:disabled,
@@ -291,129 +297,127 @@
291
297
  }
292
298
 
293
299
  &.primary {
294
- --usewc-theme-color-button-text-static: var(--usewc-color-button-primary-text-static);
295
- --usewc-theme-color-button-text-static-auxiliary: var(--usewc-color-button-primary-text-static-auxiliary);
296
- --usewc-theme-color-button-background-static: var(--usewc-color-button-primary-background-static);
297
- --usewc-theme-color-button-background-static-auxiliary: var(
298
- --usewc-color-button-primary-background-static-auxiliary
299
- );
300
- --usewc-theme-color-button-border-static: var(--usewc-color-button-primary-border-static);
301
- --usewc-theme-color-button-border-static-auxiliary: var(--usewc-color-button-primary-border-static-auxiliary);
302
- --usewc-theme-color-button-text-hover: var(--usewc-color-button-primary-text-hover);
303
- --usewc-theme-color-button-background-hover: var(--usewc-color-button-primary-background-hover);
304
- --usewc-theme-color-button-border-hover: var(--usewc-color-button-primary-border-hover);
305
- --usewc-theme-color-button-text-active: var(--usewc-color-button-primary-text-active);
306
- --usewc-theme-color-button-background-active: var(--usewc-color-button-primary-background-active);
307
- --usewc-theme-color-button-border-active: var(--usewc-color-button-primary-border-active);
300
+ --usewc-color-button-text-static: var(--usewc-color-button-primary-text-static);
301
+ --usewc-color-button-text-static-auxiliary: var(--usewc-color-button-primary-text-static-auxiliary);
302
+ --usewc-color-button-background-static: var(--usewc-color-button-primary-background-static);
303
+ --usewc-color-button-background-static-auxiliary: var(--usewc-color-button-primary-background-static-auxiliary);
304
+ --usewc-color-button-border-static: var(--usewc-color-button-primary-border-static);
305
+ --usewc-color-button-border-static-auxiliary: var(--usewc-color-button-primary-border-static-auxiliary);
306
+ --usewc-color-button-text-hover: var(--usewc-color-button-primary-text-hover);
307
+ --usewc-color-button-background-hover: var(--usewc-color-button-primary-background-hover);
308
+ --usewc-color-button-border-hover: var(--usewc-color-button-primary-border-hover);
309
+ --usewc-color-button-text-active: var(--usewc-color-button-primary-text-active);
310
+ --usewc-color-button-background-active: var(--usewc-color-button-primary-background-active);
311
+ --usewc-color-button-border-active: var(--usewc-color-button-primary-border-active);
308
312
  }
309
313
 
310
314
  &.danger {
311
- --usewc-theme-color-button-text-static: var(--usewc-color-button-danger-text-static);
312
- --usewc-theme-color-button-text-static-auxiliary: var(--usewc-color-button-danger-text-static-auxiliary);
313
- --usewc-theme-color-button-background-static: var(--usewc-color-button-danger-background-static);
314
- --usewc-theme-color-button-background-static-auxiliary: var(
315
- --usewc-color-button-danger-background-static-auxiliary
316
- );
317
- --usewc-theme-color-button-border-static: var(--usewc-color-button-danger-border-static);
318
- --usewc-theme-color-button-border-static-auxiliary: var(--usewc-color-button-danger-border-static-auxiliary);
319
- --usewc-theme-color-button-text-hover: var(--usewc-color-button-danger-text-hover);
320
- --usewc-theme-color-button-background-hover: var(--usewc-color-button-danger-background-hover);
321
- --usewc-theme-color-button-border-hover: var(--usewc-color-button-danger-border-hover);
322
- --usewc-theme-color-button-text-active: var(--usewc-color-button-danger-text-active);
323
- --usewc-theme-color-button-background-active: var(--usewc-color-button-danger-background-active);
324
- --usewc-theme-color-button-border-active: var(--usewc-color-button-danger-border-active);
315
+ --usewc-color-button-text-static: var(--usewc-color-button-danger-text-static);
316
+ --usewc-color-button-text-static-auxiliary: var(--usewc-color-button-danger-text-static-auxiliary);
317
+ --usewc-color-button-background-static: var(--usewc-color-button-danger-background-static);
318
+ --usewc-color-button-background-static-auxiliary: var(--usewc-color-button-danger-background-static-auxiliary);
319
+ --usewc-color-button-border-static: var(--usewc-color-button-danger-border-static);
320
+ --usewc-color-button-border-static-auxiliary: var(--usewc-color-button-danger-border-static-auxiliary);
321
+ --usewc-color-button-text-hover: var(--usewc-color-button-danger-text-hover);
322
+ --usewc-color-button-background-hover: var(--usewc-color-button-danger-background-hover);
323
+ --usewc-color-button-border-hover: var(--usewc-color-button-danger-border-hover);
324
+ --usewc-color-button-text-active: var(--usewc-color-button-danger-text-active);
325
+ --usewc-color-button-background-active: var(--usewc-color-button-danger-background-active);
326
+ --usewc-color-button-border-active: var(--usewc-color-button-danger-border-active);
325
327
  }
326
328
 
327
329
  &.clear {
328
- --usewc-theme-color-button-text-static: var(--usewc-color-button-clear-text-static);
329
- --usewc-theme-color-button-text-static-auxiliary: var(--usewc-color-button-clear-text-static-auxiliary);
330
- --usewc-theme-color-button-background-static: var(--usewc-color-button-clear-background-static);
331
- --usewc-theme-color-button-background-static-auxiliary: var(
332
- --usewc-color-button-clear-background-static-auxiliary
333
- );
334
- --usewc-theme-color-button-border-static: var(--usewc-color-button-clear-border-static);
335
- --usewc-theme-color-button-border-static-auxiliary: var(--usewc-color-button-clear-border-static-auxiliary);
336
- --usewc-theme-color-button-text-hover: var(--usewc-color-button-clear-text-hover);
337
- --usewc-theme-color-button-background-hover: var(--usewc-color-button-clear-background-hover);
338
- --usewc-theme-color-button-border-hover: var(--usewc-color-button-clear-border-hover);
339
- --usewc-theme-color-button-text-active: var(--usewc-color-button-clear-text-active);
340
- --usewc-theme-color-button-background-active: var(--usewc-color-button-clear-background-active);
341
- --usewc-theme-color-button-border-active: var(--usewc-color-button-clear-border-active);
330
+ --usewc-color-button-text-static: var(--usewc-color-button-clear-text-static);
331
+ --usewc-color-button-text-static-auxiliary: var(--usewc-color-button-clear-text-static-auxiliary);
332
+ --usewc-color-button-background-static: var(--usewc-color-button-clear-background-static);
333
+ --usewc-color-button-background-static-auxiliary: var(--usewc-color-button-clear-background-static-auxiliary);
334
+ --usewc-color-button-border-static: var(--usewc-color-button-clear-border-static);
335
+ --usewc-color-button-border-static-auxiliary: var(--usewc-color-button-clear-border-static-auxiliary);
336
+ --usewc-color-button-text-hover: var(--usewc-color-button-clear-text-hover);
337
+ --usewc-color-button-background-hover: var(--usewc-color-button-clear-background-hover);
338
+ --usewc-color-button-border-hover: var(--usewc-color-button-clear-border-hover);
339
+ --usewc-color-button-text-active: var(--usewc-color-button-clear-text-active);
340
+ --usewc-color-button-background-active: var(--usewc-color-button-clear-background-active);
341
+ --usewc-color-button-border-active: var(--usewc-color-button-clear-border-active);
342
342
  }
343
343
 
344
344
  &.auxiliary:not(:is(:hover, :focus-visible, :active)) {
345
345
  background: transparent;
346
- color: var(--usewc-theme-color-button-text-static-auxiliary);
347
- border-color: var(--usewc-theme-color-button-border-static-auxiliary);
346
+ color: var(--usewc-color-button-text-static-auxiliary);
347
+ border-color: var(--usewc-color-button-border-static-auxiliary);
348
348
  }
349
349
 
350
- &.extra-small::part(trigger),
351
- &.extra-small:not([type="file"], use-dropdown),
352
- &.extra-small::file-selector-button {
353
- padding-block: var(--usewc-layout-button-extra-small-padding-block);
354
- padding-inline: var(--usewc-layout-button-extra-small-padding-inline);
355
- font-size: var(--usewc-layout-button-extra-small-font-size);
356
- line-height: var(--usewc-layout-button-extra-small-line-height);
350
+ &.extra-small {
351
+ --usewc-layout-button-padding-block: var(--usewc-layout-button-extra-small-padding-block);
352
+ --usewc-layout-button-padding-inline: var(--usewc-layout-button-extra-small-padding-inline);
353
+ --usewc-font-button-size: var(--usewc-font-button-extra-small-size);
354
+ --usewc-layout-button-line-height: var(--usewc-layout-button-extra-small-line-height);
357
355
  }
358
356
 
359
- &.small::part(trigger),
360
- &.small:not([type="file"], use-dropdown),
361
- &.small::file-selector-button {
362
- padding-block: var(--usewc-layout-button-small-padding-block);
363
- padding-inline: var(--usewc-layout-button-small-padding-inline);
364
- font-size: var(--usewc-layout-button-small-font-size);
365
- line-height: var(--usewc-layout-button-small-line-height);
357
+ &.small {
358
+ --usewc-layout-button-padding-block: var(--usewc-layout-button-small-padding-block);
359
+ --usewc-layout-button-padding-inline: var(--usewc-layout-button-small-padding-inline);
360
+ --usewc-font-button-size: var(--usewc-font-button-small-size);
361
+ --usewc-layout-button-line-height: var(--usewc-layout-button-small-line-height);
366
362
  }
367
363
 
368
- &.large::part(trigger),
369
- &.large:not([type="file"], use-dropdown),
370
- &.large::file-selector-button {
371
- padding-block: var(--usewc-layout-button-large-padding-block);
372
- padding-inline: var(--usewc-layout-button-large-padding-inline);
373
- font-size: var(--usewc-layout-button-large-font-size);
374
- line-height: var(--usewc-layout-button-large-line-height);
364
+ &.large {
365
+ --usewc-layout-button-padding-block: var(--usewc-layout-button-large-padding-block);
366
+ --usewc-layout-button-padding-inline: var(--usewc-layout-button-large-padding-inline);
367
+ --usewc-font-button-size: var(--usewc-font-button-large-size);
368
+ --usewc-layout-button-line-height: var(--usewc-layout-button-large-line-height);
375
369
  }
376
370
 
377
- &.extra-large::part(trigger),
378
- &.extra-large:not([type="file"], use-dropdown),
379
- &.extra-large::file-selector-button {
380
- padding-block: var(--usewc-layout-button-extra-large-padding-block);
381
- padding-inline: var(--usewc-layout-button-extra-large-padding-inline);
382
- font-size: var(--usewc-layout-button-extra-large-font-size);
383
- line-height: var(--usewc-layout-button-extra-large-line-height);
371
+ &.extra-large {
372
+ --usewc-layout-button-padding-block: var(--usewc-layout-button-extra-large-padding-block);
373
+ --usewc-layout-button-padding-inline: var(--usewc-layout-button-extra-large-padding-inline);
374
+ --usewc-font-button-size: var(--usewc-font-button-extra-large-size);
375
+ --usewc-layout-button-line-height: var(--usewc-layout-button-extra-large-line-height);
384
376
  }
385
377
  }
386
378
 
387
379
  /* Sizing-only: use-select-input's trigger looks like a button but is not a
388
- member of the button group above (no color/base styling), so the size
389
- classes are wired through to its trigger separately. */
380
+ member of the button group above (no color styling), so it gets its own
381
+ scoped layout tokens defaulting to the button base sizing. */
390
382
  use-select-input {
391
- &.extra-small::part(trigger) {
392
- padding-block: var(--usewc-layout-button-extra-small-padding-block);
393
- padding-inline: var(--usewc-layout-button-extra-small-padding-inline);
394
- font-size: var(--usewc-layout-button-extra-small-font-size);
395
- line-height: var(--usewc-layout-button-extra-small-line-height);
383
+ --usewc-layout-select-trigger-padding-block: var(--usewc-layout-button-base-padding-block);
384
+ --usewc-layout-select-trigger-padding-inline: var(--usewc-layout-button-base-padding-inline);
385
+ --usewc-font-select-trigger-size: var(--usewc-font-button-base-size);
386
+ --usewc-layout-select-trigger-line-height: var(--usewc-layout-button-line-height);
387
+
388
+ &::part(trigger) {
389
+ padding-block: var(--usewc-layout-select-trigger-padding-block);
390
+ padding-inline: var(--usewc-layout-select-trigger-padding-inline);
391
+ font-size: var(--usewc-font-select-trigger-size);
392
+ line-height: var(--usewc-layout-select-trigger-line-height);
393
+ }
394
+
395
+ &.extra-small {
396
+ --usewc-layout-select-trigger-padding-block: var(--usewc-layout-button-extra-small-padding-block);
397
+ --usewc-layout-select-trigger-padding-inline: var(--usewc-layout-button-extra-small-padding-inline);
398
+ --usewc-font-select-trigger-size: var(--usewc-font-button-extra-small-size);
399
+ --usewc-layout-select-trigger-line-height: var(--usewc-layout-button-extra-small-line-height);
396
400
  }
397
401
 
398
- &.small::part(trigger) {
399
- padding-block: var(--usewc-layout-button-small-padding-block);
400
- padding-inline: var(--usewc-layout-button-small-padding-inline);
401
- font-size: var(--usewc-layout-button-small-font-size);
402
- line-height: var(--usewc-layout-button-small-line-height);
402
+ &.small {
403
+ --usewc-layout-select-trigger-padding-block: var(--usewc-layout-button-small-padding-block);
404
+ --usewc-layout-select-trigger-padding-inline: var(--usewc-layout-button-small-padding-inline);
405
+ --usewc-font-select-trigger-size: var(--usewc-font-button-small-size);
406
+ --usewc-layout-select-trigger-line-height: var(--usewc-layout-button-small-line-height);
403
407
  }
404
408
 
405
- &.large::part(trigger) {
406
- padding-block: var(--usewc-layout-button-large-padding-block);
407
- padding-inline: var(--usewc-layout-button-large-padding-inline);
408
- font-size: var(--usewc-layout-button-large-font-size);
409
- line-height: var(--usewc-layout-button-large-line-height);
409
+ &.large {
410
+ --usewc-layout-select-trigger-padding-block: var(--usewc-layout-button-large-padding-block);
411
+ --usewc-layout-select-trigger-padding-inline: var(--usewc-layout-button-large-padding-inline);
412
+ --usewc-font-select-trigger-size: var(--usewc-font-button-large-size);
413
+ --usewc-layout-select-trigger-line-height: var(--usewc-layout-button-large-line-height);
410
414
  }
411
415
 
412
- &.extra-large::part(trigger) {
413
- padding-block: var(--usewc-layout-button-extra-large-padding-block);
414
- padding-inline: var(--usewc-layout-button-extra-large-padding-inline);
415
- font-size: var(--usewc-layout-button-extra-large-font-size);
416
- line-height: var(--usewc-layout-button-extra-large-line-height);
416
+ &.extra-large {
417
+ --usewc-layout-select-trigger-padding-block: var(--usewc-layout-button-extra-large-padding-block);
418
+ --usewc-layout-select-trigger-padding-inline: var(--usewc-layout-button-extra-large-padding-inline);
419
+ --usewc-font-select-trigger-size: var(--usewc-font-button-extra-large-size);
420
+ --usewc-layout-select-trigger-line-height: var(--usewc-layout-button-extra-large-line-height);
417
421
  }
418
422
  }
419
423
 
@@ -457,14 +461,14 @@
457
461
  label {
458
462
  grid-area: label;
459
463
  color: var(--usewc-color-form-label-text);
460
- font-size: var(--usewc-layout-form-label-font-size);
464
+ font-size: var(--usewc-font-form-label-size);
461
465
  }
462
466
 
463
467
  > *:not(label) {
464
468
  margin: 0;
465
469
  grid-area: description;
466
470
  color: var(--usewc-color-form-helper-text);
467
- font-size: var(--usewc-layout-form-helper-text-font-size);
471
+ font-size: var(--usewc-font-form-helper-text-size);
468
472
  }
469
473
  }
470
474
 
@@ -476,14 +480,14 @@
476
480
 
477
481
  label {
478
482
  color: var(--usewc-color-form-label-text);
479
- font-size: var(--usewc-layout-form-label-font-size);
483
+ font-size: var(--usewc-font-form-label-size);
480
484
  line-height: var(--usewc-layout-form-label-line-height);
481
485
  }
482
486
 
483
487
  > *:not(label, input) {
484
488
  margin: 0;
485
489
  color: var(--usewc-color-form-helper-text);
486
- font-size: var(--usewc-layout-form-helper-text-font-size);
490
+ font-size: var(--usewc-font-form-helper-text-size);
487
491
  line-height: var(--usewc-layout-form-helper-text-line-height);
488
492
  }
489
493
 
@@ -765,14 +769,14 @@
765
769
  &::before {
766
770
  content: attr(aria-label);
767
771
  padding: var(--usewc-layout-popover-menu-padding);
768
- font-size: var(--usewc-layout-popover-menu-header-font-size);
772
+ font-size: var(--usewc-font-popover-menu-header-size);
769
773
  font-weight: var(--usewc-font-popover-menu-header-weight);
770
774
  color: var(--usewc-color-popover-menu-header-text);
771
775
  }
772
776
  }
773
777
 
774
778
  kbd {
775
- font-family: var(--usewc-font-popover-menu-shortcut);
779
+ font-family: var(--usewc-font-popover-menu-shortcut-family);
776
780
  color: var(--usewc-color-popover-menu-shortcut);
777
781
  margin-inline-start: auto;
778
782
  }
package/dist/tokens.css CHANGED
@@ -114,20 +114,24 @@
114
114
  }
115
115
 
116
116
  :root {
117
- /* Layout */
118
- --usewc-font-document-size: var(--usewc-font-size-16);
117
+ /* Document */
118
+ /* - Color */
119
119
  --usewc-color-document-text: var(--usewc-color-gray-700);
120
120
  --usewc-color-document-text-muted: var(--usewc-color-gray-500);
121
121
  --usewc-color-document-background: var(--usewc-color-white);
122
122
  --usewc-color-canvas-background: var(--usewc-color-white);
123
123
 
124
124
  /* Typography */
125
+ --usewc-font-document-size: var(--usewc-font-size-16);
125
126
  --usewc-font-document-family: var(--usewc-font-family-sans-serif);
126
127
  --usewc-font-code-family: var(--usewc-font-family-monospace);
127
128
  --usewc-font-quote-family: var(--usewc-font-family-serif);
128
129
  --usewc-font-input-family: inherit;
130
+ --usewc-font-button-family: inherit;
129
131
 
130
132
  /* Controls */
133
+ /* - Disabled */
134
+ --usewc-effect-form-opacity-disabled: 0.5;
131
135
  /* - Outline (focus indicator) */
132
136
  --usewc-color-outline: var(--usewc-color-blue-500);
133
137
  --usewc-effect-outline-size: var(--usewc-space-2);
@@ -135,7 +139,6 @@
135
139
  --usewc-effect-outline-offset-flush: var(--usewc-space-none);
136
140
  --usewc-effect-outline-style: solid;
137
141
  --usewc-effect-outline-transition: outline 0.05s ease-in-out;
138
- --usewc-effect-form-opacity-disabled: 0.5;
139
142
  /* - Link */
140
143
  --usewc-color-link-text-static: var(--usewc-color-blue-500);
141
144
  --usewc-color-link-text-hover: var(--usewc-color-blue-600);
@@ -150,12 +153,13 @@
150
153
  --usewc-color-form-helper-text: var(--usewc-color-gray-500);
151
154
  --usewc-color-form-helper-text-invalid: var(--usewc-color-red-500);
152
155
  --usewc-color-form-label-text: var(--usewc-color-gray-700);
156
+ /* - Font */
157
+ --usewc-font-form-helper-text-size: var(--usewc-font-size-14);
158
+ --usewc-font-form-label-size: var(--usewc-font-size-16);
153
159
  /* - Layout */
154
- --usewc-layout-form-helper-text-font-size: var(--usewc-font-size-14);
155
160
  --usewc-layout-form-helper-text-line-height: var(--usewc-line-height-24);
156
- --usewc-layout-form-label-font-size: var(--usewc-font-size-16);
157
161
  --usewc-layout-form-label-line-height: var(--usewc-line-height-24);
158
- --usewc-layout-form-selector-margin-inline: 0;
162
+ --usewc-layout-form-selector-margin-inline: var(--usewc-space-none);
159
163
  --usewc-layout-form-selector-margin-block: calc((1lh - 1em) / 2);
160
164
  --usewc-layout-form-selector-gap: var(--usewc-space-4);
161
165
  --usewc-layout-form-field-gap: var(--usewc-space-4);
@@ -279,43 +283,44 @@
279
283
  --usewc-color-button-clear-text-active: var(--usewc-color-gray-700);
280
284
  /* - Layout */
281
285
  --usewc-layout-button-border: var(--usewc-space-1);
282
- --usewc-layout-button-background-size: calc(100% + var(--usewc-layout-button-border) * 2)
283
- calc(100% + var(--usewc-layout-button-border) * 2);
284
- --usewc-layout-button-background-position: center;
285
- --usewc-layout-button-background-repeat: no-repeat;
286
286
  --usewc-layout-button-line-height: var(--usewc-line-height-24);
287
287
  /* - Effect */
288
288
  --usewc-effect-button-border-radius: var(--usewc-effect-border-radius-4);
289
289
  --usewc-effect-button-border-style: solid;
290
+ --usewc-effect-button-background-size: calc(100% + var(--usewc-layout-button-border) * 2)
291
+ calc(100% + var(--usewc-layout-button-border) * 2);
292
+ --usewc-effect-button-background-position: center;
293
+ --usewc-effect-button-background-repeat: no-repeat;
290
294
  /* - Sizes */
291
295
  /* -- Base size */
292
296
  --usewc-layout-button-base-padding-block: calc(var(--usewc-space-4) - var(--usewc-layout-button-border));
293
297
  --usewc-layout-button-base-padding-inline: calc(var(--usewc-space-12) - var(--usewc-layout-button-border));
294
298
  --usewc-layout-button-base-gap: var(--usewc-space-4);
295
- --usewc-layout-button-base-font-size: var(--usewc-font-size-16);
299
+ --usewc-font-button-base-size: var(--usewc-font-size-16);
300
+ --usewc-font-button-weight: var(--usewc-font-weight-medium);
296
301
  /* -- Extra small size */
297
302
  --usewc-layout-button-extra-small-padding-block: var(--usewc-space-none);
298
303
  --usewc-layout-button-extra-small-padding-inline: calc(var(--usewc-space-8) - var(--usewc-layout-button-border));
299
304
  --usewc-layout-button-extra-small-gap: var(--usewc-space-2);
300
- --usewc-layout-button-extra-small-font-size: var(--usewc-font-size-12);
305
+ --usewc-font-button-extra-small-size: var(--usewc-font-size-12);
301
306
  --usewc-layout-button-extra-small-line-height: var(--usewc-line-height-18);
302
307
  /* -- Small size */
303
308
  --usewc-layout-button-small-padding-block: calc(var(--usewc-space-2) - var(--usewc-layout-button-border));
304
309
  --usewc-layout-button-small-padding-inline: calc(var(--usewc-space-8) - var(--usewc-layout-button-border));
305
310
  --usewc-layout-button-small-gap: var(--usewc-space-2);
306
- --usewc-layout-button-small-font-size: var(--usewc-font-size-14);
311
+ --usewc-font-button-small-size: var(--usewc-font-size-14);
307
312
  --usewc-layout-button-small-line-height: var(--usewc-line-height-20);
308
313
  /* -- Large size */
309
314
  --usewc-layout-button-large-padding-block: calc(var(--usewc-space-4) - var(--usewc-layout-button-border));
310
315
  --usewc-layout-button-large-padding-inline: calc(var(--usewc-space-16) - var(--usewc-layout-button-border));
311
316
  --usewc-layout-button-large-gap: var(--usewc-space-4);
312
- --usewc-layout-button-large-font-size: var(--usewc-font-size-18);
317
+ --usewc-font-button-large-size: var(--usewc-font-size-18);
313
318
  --usewc-layout-button-large-line-height: var(--usewc-line-height-28);
314
319
  /* -- Extra large size */
315
320
  --usewc-layout-button-extra-large-padding-block: calc(var(--usewc-space-8) - var(--usewc-layout-button-border));
316
321
  --usewc-layout-button-extra-large-padding-inline: calc(var(--usewc-space-24) - var(--usewc-layout-button-border));
317
322
  --usewc-layout-button-extra-large-gap: var(--usewc-space-8);
318
- --usewc-layout-button-extra-large-font-size: var(--usewc-font-size-24);
323
+ --usewc-font-button-extra-large-size: var(--usewc-font-size-24);
319
324
  --usewc-layout-button-extra-large-line-height: var(--usewc-line-height-28);
320
325
 
321
326
  /* Menu */
@@ -333,10 +338,10 @@
333
338
  --usewc-color-popover-menu-background: var(--usewc-color-canvas-background);
334
339
  --usewc-color-popover-menu-border: var(--usewc-color-gray-600);
335
340
  --usewc-effect-popover-menu-border-radius: var(--usewc-effect-border-radius-8);
336
- --usewc-layout-popover-menu-header-font-size: var(--usewc-font-size-14);
341
+ --usewc-font-popover-menu-header-size: var(--usewc-font-size-14);
337
342
  --usewc-font-popover-menu-header-weight: var(--usewc-font-weight-medium);
338
343
  --usewc-color-popover-menu-header-text: var(--usewc-color-gray-400);
339
- --usewc-font-popover-menu-shortcut: var(--usewc-font-family-monospace);
344
+ --usewc-font-popover-menu-shortcut-family: var(--usewc-font-family-monospace);
340
345
  --usewc-color-popover-menu-shortcut: var(--usewc-color-gray-400);
341
346
  --usewc-color-popover-menu-item-text-static: var(--usewc-color-button-base-text-static);
342
347
  --usewc-color-popover-menu-item-text-hover: var(--usewc-color-button-base-text-static);