@qw-ui/tokens 0.3.0-next.40 → 0.3.0-next.43

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 (13) hide show
  1. package/README.md +20 -56
  2. package/dist/color-architecture.d.ts +28 -4
  3. package/dist/derive/index.d.ts +1 -1
  4. package/dist/derive/reference.d.ts +12 -1
  5. package/dist/derive/semantic.d.ts +7 -0
  6. package/dist/index.js +389 -247
  7. package/dist/index.js.map +1 -1
  8. package/dist/tailwind.css +6 -0
  9. package/dist/tokens.css +52 -1
  10. package/dist/tokens.json +96 -2
  11. package/dist/tokens.live.css +52 -1
  12. package/dist/tokens.ts +101 -7
  13. package/package.json +11 -29
package/dist/tailwind.css CHANGED
@@ -10,6 +10,7 @@
10
10
  --color-surface-selected: var(--qw-sem-color-surface-selected);
11
11
  --color-surface-inverse: var(--qw-sem-color-surface-inverse);
12
12
  --color-surface-canvas-subtle: var(--qw-sem-color-surface-canvas-subtle);
13
+ --color-content-danger: var(--qw-sem-color-content-danger);
13
14
  --color-content-primary: var(--qw-sem-color-content-primary);
14
15
  --color-content-secondary: var(--qw-sem-color-content-secondary);
15
16
  --color-content-tertiary: var(--qw-sem-color-content-tertiary);
@@ -20,9 +21,11 @@
20
21
  --color-content-icon-subtle: var(--qw-sem-color-content-icon-subtle);
21
22
  --color-content-inverse: var(--qw-sem-color-content-inverse);
22
23
  --color-content-on-solid: var(--qw-sem-color-content-on-solid);
24
+ --color-content-on-brand: var(--qw-sem-color-content-on-brand);
23
25
  --color-content-on-warning-subtle: var(--qw-sem-color-content-on-warning-subtle);
24
26
  --color-border-default: var(--qw-sem-color-border-default);
25
27
  --color-border-strong: var(--qw-sem-color-border-strong);
28
+ --color-border-control: var(--qw-sem-color-border-control);
26
29
  --color-border-focus: var(--qw-sem-color-border-focus);
27
30
  --color-border-subtle: var(--qw-sem-color-border-subtle);
28
31
  --color-border-disabled: var(--qw-sem-color-border-disabled);
@@ -56,6 +59,7 @@
56
59
  --color-overlay-guide: var(--qw-sem-color-overlay-guide);
57
60
  --color-overlay-media-subtle: var(--qw-sem-color-overlay-media-subtle);
58
61
  --color-overlay-media-strong: var(--qw-sem-color-overlay-media-strong);
62
+ --color-overlay-control-on-media: var(--qw-sem-color-overlay-control-on-media);
59
63
  --color-shadow: var(--qw-sem-color-shadow);
60
64
  --radius-sm: var(--qw-sem-size-radius-sm);
61
65
  --radius-control: var(--qw-sem-size-radius-control);
@@ -76,4 +80,6 @@
76
80
  --shadow-floating: var(--qw-sem-effect-shadow-floating);
77
81
  --shadow-dialog: var(--qw-sem-effect-shadow-dialog);
78
82
  --ease-standard: var(--qw-sem-motion-easing-standard);
83
+ --ease-symmetric: var(--qw-sem-motion-easing-symmetric);
84
+ --ease-linear: var(--qw-sem-motion-easing-linear);
79
85
  }
package/dist/tokens.css CHANGED
@@ -264,6 +264,8 @@
264
264
  --qw-ref-color-brown-800: #542800;
265
265
  --qw-ref-color-brown-900: #200B00;
266
266
  --qw-ref-color-brown-base: #b45e06;
267
+ --qw-ref-color-black-contrast-endpoint: #000000;
268
+ --qw-ref-size-spacing-0: 0px;
267
269
  --qw-ref-size-spacing-1: 4px;
268
270
  --qw-ref-size-spacing-2: 8px;
269
271
  --qw-ref-size-spacing-3: 12px;
@@ -272,6 +274,15 @@
272
274
  --qw-ref-size-spacing-6: 24px;
273
275
  --qw-ref-size-spacing-7: 28px;
274
276
  --qw-ref-size-spacing-8: 32px;
277
+ --qw-ref-size-safe-area-inset-top: env(safe-area-inset-top, 0px);
278
+ --qw-ref-size-safe-area-inset-right: env(safe-area-inset-right, 0px);
279
+ --qw-ref-size-safe-area-inset-bottom: env(safe-area-inset-bottom, 0px);
280
+ --qw-ref-size-safe-area-inset-left: env(safe-area-inset-left, 0px);
281
+ --qw-ref-size-placeholder-text-height-base: 1em;
282
+ --qw-ref-size-placeholder-media-height-base: 120px;
283
+ --qw-ref-size-loading-logo-size-sm: 32px;
284
+ --qw-ref-size-loading-logo-size-md: 48px;
285
+ --qw-ref-size-loading-logo-size-lg: 60px;
275
286
  --qw-ref-size-radius-sm: 4px;
276
287
  --qw-ref-size-radius-md: 8px;
277
288
  --qw-ref-size-radius-lg: 14px;
@@ -299,6 +310,7 @@
299
310
  --qw-ref-size-avatar-diameter-lg: 58px;
300
311
  --qw-ref-typography-line-height-tight: 1.25;
301
312
  --qw-ref-typography-line-height-normal: 1.5;
313
+ --qw-ref-typography-line-height-comfortable: 1.625;
302
314
  --qw-ref-typography-line-height-relaxed: 1.75;
303
315
  --qw-ref-size-opacity-disabled: 0.5;
304
316
  --qw-ref-size-z-index-1: 10;
@@ -327,7 +339,11 @@
327
339
  --qw-ref-motion-duration-fast: 100ms;
328
340
  --qw-ref-motion-duration-base: 200ms;
329
341
  --qw-ref-motion-duration-slow: 320ms;
342
+ --qw-ref-motion-duration-shimmer: 2000ms;
343
+ --qw-ref-motion-easing-linear: linear;
344
+ --qw-ref-motion-easing-symmetric: ease-in-out;
330
345
  --qw-ref-motion-easing-standard: cubic-bezier(0.16, 1, 0.3, 1);
346
+ --qw-ref-effect-blur-sm: 2px;
331
347
  --qw-ref-effect-shadow-sm: 0px 1px 2px 0px rgba(0, 0, 0, 0.08);
332
348
  --qw-ref-effect-shadow-md: 0px 4px 12px 0px rgba(0, 0, 0, 0.12);
333
349
  --qw-ref-effect-shadow-lg: 0px 8px 24px 0px rgba(0, 0, 0, 0.16);
@@ -377,6 +393,23 @@
377
393
  --qw-sem-size-avatar-diameter-sm: 40px;
378
394
  --qw-sem-size-avatar-diameter-md: 50px;
379
395
  --qw-sem-size-avatar-diameter-lg: 58px;
396
+ --qw-sem-size-layout-gap-sm: 8px;
397
+ --qw-sem-size-layout-gap-md: 16px;
398
+ --qw-sem-size-layout-gap-lg: 24px;
399
+ --qw-sem-size-safe-area-inset-top: env(safe-area-inset-top, 0px);
400
+ --qw-sem-size-safe-area-inset-right: env(safe-area-inset-right, 0px);
401
+ --qw-sem-size-safe-area-inset-bottom: env(safe-area-inset-bottom, 0px);
402
+ --qw-sem-size-safe-area-inset-left: env(safe-area-inset-left, 0px);
403
+ --qw-sem-size-safe-area-minimum-none: 0px;
404
+ --qw-sem-size-safe-area-minimum-sm: 8px;
405
+ --qw-sem-size-safe-area-minimum-md: 16px;
406
+ --qw-sem-size-safe-area-minimum-lg: 24px;
407
+ --qw-sem-size-loading-sm: 32px;
408
+ --qw-sem-size-loading-md: 48px;
409
+ --qw-sem-size-loading-lg: 60px;
410
+ --qw-sem-size-skeleton-text-height: 1em;
411
+ --qw-sem-size-skeleton-rect-height: 120px;
412
+ --qw-sem-size-skeleton-circle-diameter: 40px;
380
413
  --qw-sem-size-inset-sm: 8px;
381
414
  --qw-sem-size-stack-sm: 8px;
382
415
  --qw-sem-size-inset-md: 16px;
@@ -401,6 +434,11 @@
401
434
  --qw-sem-typography-body-strong-font-weight: 500;
402
435
  --qw-sem-typography-body-strong-line-height: 1.5;
403
436
  --qw-sem-typography-body-strong-letter-spacing: 0px;
437
+ --qw-sem-typography-product-title-font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
438
+ --qw-sem-typography-product-title-font-size: 16px;
439
+ --qw-sem-typography-product-title-font-weight: 600;
440
+ --qw-sem-typography-product-title-line-height: 1.625;
441
+ --qw-sem-typography-product-title-letter-spacing: 0px;
404
442
  --qw-sem-typography-heading-sm-font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
405
443
  --qw-sem-typography-heading-sm-font-size: 16px;
406
444
  --qw-sem-typography-heading-sm-font-weight: 600;
@@ -439,7 +477,12 @@
439
477
  --qw-sem-motion-duration-fast: 100ms;
440
478
  --qw-sem-motion-duration-base: 200ms;
441
479
  --qw-sem-motion-duration-slow: 320ms;
480
+ --qw-sem-motion-duration-shimmer: 2000ms;
481
+ --qw-sem-motion-duration-spin: 2000ms;
442
482
  --qw-sem-motion-easing-standard: cubic-bezier(0.16, 1, 0.3, 1);
483
+ --qw-sem-motion-easing-symmetric: ease-in-out;
484
+ --qw-sem-motion-easing-linear: linear;
485
+ --qw-sem-effect-blur-media-control: 2px;
443
486
  --qw-sem-color-surface-base: #ffffff;
444
487
  --qw-sem-color-surface-subtle: #F6F6F6;
445
488
  --qw-sem-color-surface-elevated: #ffffff;
@@ -450,6 +493,7 @@
450
493
  --qw-sem-color-surface-selected: rgba(34, 34, 34, 0.05);
451
494
  --qw-sem-color-surface-inverse: #353535;
452
495
  --qw-sem-color-surface-canvas-subtle: #F6F6F6;
496
+ --qw-sem-color-content-danger: #CF081E;
453
497
  --qw-sem-color-content-primary: #222222;
454
498
  --qw-sem-color-content-secondary: #666666;
455
499
  --qw-sem-color-content-tertiary: #999999;
@@ -460,9 +504,11 @@
460
504
  --qw-sem-color-content-icon-subtle: rgba(34, 34, 34, 0.05);
461
505
  --qw-sem-color-content-inverse: #ffffff;
462
506
  --qw-sem-color-content-on-solid: #ffffff;
507
+ --qw-sem-color-content-on-brand: #ffffff;
463
508
  --qw-sem-color-content-on-warning-subtle: #453200;
464
509
  --qw-sem-color-border-default: #EEEEEE;
465
510
  --qw-sem-color-border-strong: #CCCCCC;
511
+ --qw-sem-color-border-control: #666666;
466
512
  --qw-sem-color-border-focus: #0011ff;
467
513
  --qw-sem-color-border-subtle: rgba(34, 34, 34, 0.05);
468
514
  --qw-sem-color-border-disabled: rgba(34, 34, 34, 0.1);
@@ -478,7 +524,7 @@
478
524
  --qw-sem-color-action-inverse: #ffffff;
479
525
  --qw-sem-color-control-action-brand-subtle: rgba(0, 17, 255, 0.1);
480
526
  --qw-sem-color-control-action-product-subtle: rgba(13, 83, 255, 0.1);
481
- --qw-sem-color-control-action-danger-default: #FF5745;
527
+ --qw-sem-color-control-action-danger-default: #CF081E;
482
528
  --qw-sem-color-control-action-danger-subtle: rgba(255, 64, 64, 0.1);
483
529
  --qw-sem-color-control-action-neutral-subtle: rgba(34, 34, 34, 0.05);
484
530
  --qw-sem-color-control-selection-brand: rgba(0, 17, 255, 0.1);
@@ -496,6 +542,7 @@
496
542
  --qw-sem-color-overlay-guide: rgba(13, 83, 255, 0.1);
497
543
  --qw-sem-color-overlay-media-subtle: rgba(34, 34, 34, 0.4);
498
544
  --qw-sem-color-overlay-media-strong: rgba(34, 34, 34, 0.5);
545
+ --qw-sem-color-overlay-control-on-media: rgba(34, 34, 34, 0.5);
499
546
  --qw-sem-color-shadow: rgba(34, 34, 34, 0.1);
500
547
  --qw-sem-effect-shadow-card-color: rgba(34, 34, 34, 0.1);
501
548
  --qw-sem-effect-shadow-floating-color: rgba(34, 34, 34, 0.1);
@@ -515,6 +562,7 @@
515
562
  --qw-sem-color-surface-sunken: #2D2D2D;
516
563
  --qw-sem-color-surface-selected: rgba(255, 255, 255, 0.1);
517
564
  --qw-sem-color-surface-canvas-subtle: #121212;
565
+ --qw-sem-color-content-danger: #FFA097;
518
566
  --qw-sem-color-content-primary: #ffffff;
519
567
  --qw-sem-color-content-secondary: #999999;
520
568
  --qw-sem-color-content-tertiary: #666666;
@@ -524,9 +572,11 @@
524
572
  --qw-sem-color-content-link: #3086FF;
525
573
  --qw-sem-color-content-icon-subtle: rgba(255, 255, 255, 0.1);
526
574
  --qw-sem-color-content-inverse: #222222;
575
+ --qw-sem-color-content-on-brand: #000000;
527
576
  --qw-sem-color-content-on-warning-subtle: #F4D38B;
528
577
  --qw-sem-color-border-default: #3A3A3A;
529
578
  --qw-sem-color-border-strong: #666666;
579
+ --qw-sem-color-border-control: #999999;
530
580
  --qw-sem-color-border-focus: #426EFF;
531
581
  --qw-sem-color-border-subtle: rgba(255, 255, 255, 0.05);
532
582
  --qw-sem-color-border-disabled: rgba(255, 255, 255, 0.1);
@@ -552,6 +602,7 @@
552
602
  --qw-sem-color-status-info-subtle: rgba(13, 83, 255, 0.2);
553
603
  --qw-sem-color-overlay-scrim: rgba(34, 34, 34, 0.7);
554
604
  --qw-sem-color-overlay-guide: rgba(13, 83, 255, 0.2);
605
+ --qw-sem-color-overlay-control-on-media: rgba(255, 255, 255, 0.4);
555
606
  --qw-sem-color-shadow: rgba(34, 34, 34, 0.5);
556
607
  --qw-sem-effect-shadow-card-color: rgba(34, 34, 34, 0.5);
557
608
  --qw-sem-effect-shadow-floating-color: rgba(34, 34, 34, 0.5);
package/dist/tokens.json CHANGED
@@ -264,6 +264,8 @@
264
264
  "--qw-ref-color-brown-800": "#542800",
265
265
  "--qw-ref-color-brown-900": "#200B00",
266
266
  "--qw-ref-color-brown-base": "#b45e06",
267
+ "--qw-ref-color-black-contrast-endpoint": "#000000",
268
+ "--qw-ref-size-spacing-0": "0px",
267
269
  "--qw-ref-size-spacing-1": "4px",
268
270
  "--qw-ref-size-spacing-2": "8px",
269
271
  "--qw-ref-size-spacing-3": "12px",
@@ -272,6 +274,15 @@
272
274
  "--qw-ref-size-spacing-6": "24px",
273
275
  "--qw-ref-size-spacing-7": "28px",
274
276
  "--qw-ref-size-spacing-8": "32px",
277
+ "--qw-ref-size-safe-area-inset-top": "env(safe-area-inset-top, 0px)",
278
+ "--qw-ref-size-safe-area-inset-right": "env(safe-area-inset-right, 0px)",
279
+ "--qw-ref-size-safe-area-inset-bottom": "env(safe-area-inset-bottom, 0px)",
280
+ "--qw-ref-size-safe-area-inset-left": "env(safe-area-inset-left, 0px)",
281
+ "--qw-ref-size-placeholder-text-height-base": "1em",
282
+ "--qw-ref-size-placeholder-media-height-base": "120px",
283
+ "--qw-ref-size-loading-logo-size-sm": "32px",
284
+ "--qw-ref-size-loading-logo-size-md": "48px",
285
+ "--qw-ref-size-loading-logo-size-lg": "60px",
275
286
  "--qw-ref-size-radius-sm": "4px",
276
287
  "--qw-ref-size-radius-md": "8px",
277
288
  "--qw-ref-size-radius-lg": "14px",
@@ -299,6 +310,7 @@
299
310
  "--qw-ref-size-avatar-diameter-lg": "58px",
300
311
  "--qw-ref-typography-line-height-tight": "1.25",
301
312
  "--qw-ref-typography-line-height-normal": "1.5",
313
+ "--qw-ref-typography-line-height-comfortable": "1.625",
302
314
  "--qw-ref-typography-line-height-relaxed": "1.75",
303
315
  "--qw-ref-size-opacity-disabled": "0.5",
304
316
  "--qw-ref-size-z-index-1": "10",
@@ -327,7 +339,11 @@
327
339
  "--qw-ref-motion-duration-fast": "100ms",
328
340
  "--qw-ref-motion-duration-base": "200ms",
329
341
  "--qw-ref-motion-duration-slow": "320ms",
342
+ "--qw-ref-motion-duration-shimmer": "2000ms",
343
+ "--qw-ref-motion-easing-linear": "linear",
344
+ "--qw-ref-motion-easing-symmetric": "ease-in-out",
330
345
  "--qw-ref-motion-easing-standard": "cubic-bezier(0.16, 1, 0.3, 1)",
346
+ "--qw-ref-effect-blur-sm": "2px",
331
347
  "--qw-ref-effect-shadow-sm": "0px 1px 2px 0px rgba(0, 0, 0, 0.08)",
332
348
  "--qw-ref-effect-shadow-md": "0px 4px 12px 0px rgba(0, 0, 0, 0.12)",
333
349
  "--qw-ref-effect-shadow-lg": "0px 8px 24px 0px rgba(0, 0, 0, 0.16)",
@@ -377,6 +393,23 @@
377
393
  "--qw-sem-size-avatar-diameter-sm": "40px",
378
394
  "--qw-sem-size-avatar-diameter-md": "50px",
379
395
  "--qw-sem-size-avatar-diameter-lg": "58px",
396
+ "--qw-sem-size-layout-gap-sm": "8px",
397
+ "--qw-sem-size-layout-gap-md": "16px",
398
+ "--qw-sem-size-layout-gap-lg": "24px",
399
+ "--qw-sem-size-safe-area-inset-top": "env(safe-area-inset-top, 0px)",
400
+ "--qw-sem-size-safe-area-inset-right": "env(safe-area-inset-right, 0px)",
401
+ "--qw-sem-size-safe-area-inset-bottom": "env(safe-area-inset-bottom, 0px)",
402
+ "--qw-sem-size-safe-area-inset-left": "env(safe-area-inset-left, 0px)",
403
+ "--qw-sem-size-safe-area-minimum-none": "0px",
404
+ "--qw-sem-size-safe-area-minimum-sm": "8px",
405
+ "--qw-sem-size-safe-area-minimum-md": "16px",
406
+ "--qw-sem-size-safe-area-minimum-lg": "24px",
407
+ "--qw-sem-size-loading-sm": "32px",
408
+ "--qw-sem-size-loading-md": "48px",
409
+ "--qw-sem-size-loading-lg": "60px",
410
+ "--qw-sem-size-skeleton-text-height": "1em",
411
+ "--qw-sem-size-skeleton-rect-height": "120px",
412
+ "--qw-sem-size-skeleton-circle-diameter": "40px",
380
413
  "--qw-sem-size-inset-sm": "8px",
381
414
  "--qw-sem-size-stack-sm": "8px",
382
415
  "--qw-sem-size-inset-md": "16px",
@@ -401,6 +434,11 @@
401
434
  "--qw-sem-typography-body-strong-font-weight": "500",
402
435
  "--qw-sem-typography-body-strong-line-height": "1.5",
403
436
  "--qw-sem-typography-body-strong-letter-spacing": "0px",
437
+ "--qw-sem-typography-product-title-font-family": "system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif",
438
+ "--qw-sem-typography-product-title-font-size": "16px",
439
+ "--qw-sem-typography-product-title-font-weight": "600",
440
+ "--qw-sem-typography-product-title-line-height": "1.625",
441
+ "--qw-sem-typography-product-title-letter-spacing": "0px",
404
442
  "--qw-sem-typography-heading-sm-font-family": "system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif",
405
443
  "--qw-sem-typography-heading-sm-font-size": "16px",
406
444
  "--qw-sem-typography-heading-sm-font-weight": "600",
@@ -439,7 +477,12 @@
439
477
  "--qw-sem-motion-duration-fast": "100ms",
440
478
  "--qw-sem-motion-duration-base": "200ms",
441
479
  "--qw-sem-motion-duration-slow": "320ms",
480
+ "--qw-sem-motion-duration-shimmer": "2000ms",
481
+ "--qw-sem-motion-duration-spin": "2000ms",
442
482
  "--qw-sem-motion-easing-standard": "cubic-bezier(0.16, 1, 0.3, 1)",
483
+ "--qw-sem-motion-easing-symmetric": "ease-in-out",
484
+ "--qw-sem-motion-easing-linear": "linear",
485
+ "--qw-sem-effect-blur-media-control": "2px",
443
486
  "--qw-sem-color-surface-base": "#ffffff",
444
487
  "--qw-sem-color-surface-subtle": "#F6F6F6",
445
488
  "--qw-sem-color-surface-elevated": "#ffffff",
@@ -450,6 +493,7 @@
450
493
  "--qw-sem-color-surface-selected": "rgba(34, 34, 34, 0.05)",
451
494
  "--qw-sem-color-surface-inverse": "#353535",
452
495
  "--qw-sem-color-surface-canvas-subtle": "#F6F6F6",
496
+ "--qw-sem-color-content-danger": "#CF081E",
453
497
  "--qw-sem-color-content-primary": "#222222",
454
498
  "--qw-sem-color-content-secondary": "#666666",
455
499
  "--qw-sem-color-content-tertiary": "#999999",
@@ -460,9 +504,11 @@
460
504
  "--qw-sem-color-content-icon-subtle": "rgba(34, 34, 34, 0.05)",
461
505
  "--qw-sem-color-content-inverse": "#ffffff",
462
506
  "--qw-sem-color-content-on-solid": "#ffffff",
507
+ "--qw-sem-color-content-on-brand": "#ffffff",
463
508
  "--qw-sem-color-content-on-warning-subtle": "#453200",
464
509
  "--qw-sem-color-border-default": "#EEEEEE",
465
510
  "--qw-sem-color-border-strong": "#CCCCCC",
511
+ "--qw-sem-color-border-control": "#666666",
466
512
  "--qw-sem-color-border-focus": "#0011ff",
467
513
  "--qw-sem-color-border-subtle": "rgba(34, 34, 34, 0.05)",
468
514
  "--qw-sem-color-border-disabled": "rgba(34, 34, 34, 0.1)",
@@ -478,7 +524,7 @@
478
524
  "--qw-sem-color-action-inverse": "#ffffff",
479
525
  "--qw-sem-color-control-action-brand-subtle": "rgba(0, 17, 255, 0.1)",
480
526
  "--qw-sem-color-control-action-product-subtle": "rgba(13, 83, 255, 0.1)",
481
- "--qw-sem-color-control-action-danger-default": "#FF5745",
527
+ "--qw-sem-color-control-action-danger-default": "#CF081E",
482
528
  "--qw-sem-color-control-action-danger-subtle": "rgba(255, 64, 64, 0.1)",
483
529
  "--qw-sem-color-control-action-neutral-subtle": "rgba(34, 34, 34, 0.05)",
484
530
  "--qw-sem-color-control-selection-brand": "rgba(0, 17, 255, 0.1)",
@@ -496,6 +542,7 @@
496
542
  "--qw-sem-color-overlay-guide": "rgba(13, 83, 255, 0.1)",
497
543
  "--qw-sem-color-overlay-media-subtle": "rgba(34, 34, 34, 0.4)",
498
544
  "--qw-sem-color-overlay-media-strong": "rgba(34, 34, 34, 0.5)",
545
+ "--qw-sem-color-overlay-control-on-media": "rgba(34, 34, 34, 0.5)",
499
546
  "--qw-sem-color-shadow": "rgba(34, 34, 34, 0.1)",
500
547
  "--qw-sem-effect-shadow-card-color": "rgba(34, 34, 34, 0.1)",
501
548
  "--qw-sem-effect-shadow-floating-color": "rgba(34, 34, 34, 0.1)",
@@ -769,6 +816,8 @@
769
816
  "--qw-ref-color-brown-800": "#542800",
770
817
  "--qw-ref-color-brown-900": "#200B00",
771
818
  "--qw-ref-color-brown-base": "#b45e06",
819
+ "--qw-ref-color-black-contrast-endpoint": "#000000",
820
+ "--qw-ref-size-spacing-0": "0px",
772
821
  "--qw-ref-size-spacing-1": "4px",
773
822
  "--qw-ref-size-spacing-2": "8px",
774
823
  "--qw-ref-size-spacing-3": "12px",
@@ -777,6 +826,15 @@
777
826
  "--qw-ref-size-spacing-6": "24px",
778
827
  "--qw-ref-size-spacing-7": "28px",
779
828
  "--qw-ref-size-spacing-8": "32px",
829
+ "--qw-ref-size-safe-area-inset-top": "env(safe-area-inset-top, 0px)",
830
+ "--qw-ref-size-safe-area-inset-right": "env(safe-area-inset-right, 0px)",
831
+ "--qw-ref-size-safe-area-inset-bottom": "env(safe-area-inset-bottom, 0px)",
832
+ "--qw-ref-size-safe-area-inset-left": "env(safe-area-inset-left, 0px)",
833
+ "--qw-ref-size-placeholder-text-height-base": "1em",
834
+ "--qw-ref-size-placeholder-media-height-base": "120px",
835
+ "--qw-ref-size-loading-logo-size-sm": "32px",
836
+ "--qw-ref-size-loading-logo-size-md": "48px",
837
+ "--qw-ref-size-loading-logo-size-lg": "60px",
780
838
  "--qw-ref-size-radius-sm": "4px",
781
839
  "--qw-ref-size-radius-md": "8px",
782
840
  "--qw-ref-size-radius-lg": "14px",
@@ -804,6 +862,7 @@
804
862
  "--qw-ref-size-avatar-diameter-lg": "58px",
805
863
  "--qw-ref-typography-line-height-tight": "1.25",
806
864
  "--qw-ref-typography-line-height-normal": "1.5",
865
+ "--qw-ref-typography-line-height-comfortable": "1.625",
807
866
  "--qw-ref-typography-line-height-relaxed": "1.75",
808
867
  "--qw-ref-size-opacity-disabled": "0.5",
809
868
  "--qw-ref-size-z-index-1": "10",
@@ -832,7 +891,11 @@
832
891
  "--qw-ref-motion-duration-fast": "100ms",
833
892
  "--qw-ref-motion-duration-base": "200ms",
834
893
  "--qw-ref-motion-duration-slow": "320ms",
894
+ "--qw-ref-motion-duration-shimmer": "2000ms",
895
+ "--qw-ref-motion-easing-linear": "linear",
896
+ "--qw-ref-motion-easing-symmetric": "ease-in-out",
835
897
  "--qw-ref-motion-easing-standard": "cubic-bezier(0.16, 1, 0.3, 1)",
898
+ "--qw-ref-effect-blur-sm": "2px",
836
899
  "--qw-ref-effect-shadow-sm": "0px 1px 2px 0px rgba(0, 0, 0, 0.08)",
837
900
  "--qw-ref-effect-shadow-md": "0px 4px 12px 0px rgba(0, 0, 0, 0.12)",
838
901
  "--qw-ref-effect-shadow-lg": "0px 8px 24px 0px rgba(0, 0, 0, 0.16)",
@@ -882,6 +945,23 @@
882
945
  "--qw-sem-size-avatar-diameter-sm": "40px",
883
946
  "--qw-sem-size-avatar-diameter-md": "50px",
884
947
  "--qw-sem-size-avatar-diameter-lg": "58px",
948
+ "--qw-sem-size-layout-gap-sm": "8px",
949
+ "--qw-sem-size-layout-gap-md": "16px",
950
+ "--qw-sem-size-layout-gap-lg": "24px",
951
+ "--qw-sem-size-safe-area-inset-top": "env(safe-area-inset-top, 0px)",
952
+ "--qw-sem-size-safe-area-inset-right": "env(safe-area-inset-right, 0px)",
953
+ "--qw-sem-size-safe-area-inset-bottom": "env(safe-area-inset-bottom, 0px)",
954
+ "--qw-sem-size-safe-area-inset-left": "env(safe-area-inset-left, 0px)",
955
+ "--qw-sem-size-safe-area-minimum-none": "0px",
956
+ "--qw-sem-size-safe-area-minimum-sm": "8px",
957
+ "--qw-sem-size-safe-area-minimum-md": "16px",
958
+ "--qw-sem-size-safe-area-minimum-lg": "24px",
959
+ "--qw-sem-size-loading-sm": "32px",
960
+ "--qw-sem-size-loading-md": "48px",
961
+ "--qw-sem-size-loading-lg": "60px",
962
+ "--qw-sem-size-skeleton-text-height": "1em",
963
+ "--qw-sem-size-skeleton-rect-height": "120px",
964
+ "--qw-sem-size-skeleton-circle-diameter": "40px",
885
965
  "--qw-sem-size-inset-sm": "8px",
886
966
  "--qw-sem-size-stack-sm": "8px",
887
967
  "--qw-sem-size-inset-md": "16px",
@@ -906,6 +986,11 @@
906
986
  "--qw-sem-typography-body-strong-font-weight": "500",
907
987
  "--qw-sem-typography-body-strong-line-height": "1.5",
908
988
  "--qw-sem-typography-body-strong-letter-spacing": "0px",
989
+ "--qw-sem-typography-product-title-font-family": "system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif",
990
+ "--qw-sem-typography-product-title-font-size": "16px",
991
+ "--qw-sem-typography-product-title-font-weight": "600",
992
+ "--qw-sem-typography-product-title-line-height": "1.625",
993
+ "--qw-sem-typography-product-title-letter-spacing": "0px",
909
994
  "--qw-sem-typography-heading-sm-font-family": "system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif",
910
995
  "--qw-sem-typography-heading-sm-font-size": "16px",
911
996
  "--qw-sem-typography-heading-sm-font-weight": "600",
@@ -944,7 +1029,12 @@
944
1029
  "--qw-sem-motion-duration-fast": "100ms",
945
1030
  "--qw-sem-motion-duration-base": "200ms",
946
1031
  "--qw-sem-motion-duration-slow": "320ms",
1032
+ "--qw-sem-motion-duration-shimmer": "2000ms",
1033
+ "--qw-sem-motion-duration-spin": "2000ms",
947
1034
  "--qw-sem-motion-easing-standard": "cubic-bezier(0.16, 1, 0.3, 1)",
1035
+ "--qw-sem-motion-easing-symmetric": "ease-in-out",
1036
+ "--qw-sem-motion-easing-linear": "linear",
1037
+ "--qw-sem-effect-blur-media-control": "2px",
948
1038
  "--qw-sem-color-surface-base": "#222222",
949
1039
  "--qw-sem-color-surface-subtle": "#202020",
950
1040
  "--qw-sem-color-surface-elevated": "#2D2D2D",
@@ -955,6 +1045,7 @@
955
1045
  "--qw-sem-color-surface-selected": "rgba(255, 255, 255, 0.1)",
956
1046
  "--qw-sem-color-surface-inverse": "#353535",
957
1047
  "--qw-sem-color-surface-canvas-subtle": "#121212",
1048
+ "--qw-sem-color-content-danger": "#FFA097",
958
1049
  "--qw-sem-color-content-primary": "#ffffff",
959
1050
  "--qw-sem-color-content-secondary": "#999999",
960
1051
  "--qw-sem-color-content-tertiary": "#666666",
@@ -965,9 +1056,11 @@
965
1056
  "--qw-sem-color-content-icon-subtle": "rgba(255, 255, 255, 0.1)",
966
1057
  "--qw-sem-color-content-inverse": "#222222",
967
1058
  "--qw-sem-color-content-on-solid": "#ffffff",
1059
+ "--qw-sem-color-content-on-brand": "#000000",
968
1060
  "--qw-sem-color-content-on-warning-subtle": "#F4D38B",
969
1061
  "--qw-sem-color-border-default": "#3A3A3A",
970
1062
  "--qw-sem-color-border-strong": "#666666",
1063
+ "--qw-sem-color-border-control": "#999999",
971
1064
  "--qw-sem-color-border-focus": "#426EFF",
972
1065
  "--qw-sem-color-border-subtle": "rgba(255, 255, 255, 0.05)",
973
1066
  "--qw-sem-color-border-disabled": "rgba(255, 255, 255, 0.1)",
@@ -983,7 +1076,7 @@
983
1076
  "--qw-sem-color-action-inverse": "#222222",
984
1077
  "--qw-sem-color-control-action-brand-subtle": "rgba(0, 17, 255, 0.2)",
985
1078
  "--qw-sem-color-control-action-product-subtle": "rgba(13, 83, 255, 0.2)",
986
- "--qw-sem-color-control-action-danger-default": "#FF5745",
1079
+ "--qw-sem-color-control-action-danger-default": "#CF081E",
987
1080
  "--qw-sem-color-control-action-danger-subtle": "rgba(255, 64, 64, 0.2)",
988
1081
  "--qw-sem-color-control-action-neutral-subtle": "rgba(255, 255, 255, 0.1)",
989
1082
  "--qw-sem-color-control-selection-brand": "rgba(0, 17, 255, 0.2)",
@@ -1001,6 +1094,7 @@
1001
1094
  "--qw-sem-color-overlay-guide": "rgba(13, 83, 255, 0.2)",
1002
1095
  "--qw-sem-color-overlay-media-subtle": "rgba(34, 34, 34, 0.4)",
1003
1096
  "--qw-sem-color-overlay-media-strong": "rgba(34, 34, 34, 0.5)",
1097
+ "--qw-sem-color-overlay-control-on-media": "rgba(255, 255, 255, 0.4)",
1004
1098
  "--qw-sem-color-shadow": "rgba(34, 34, 34, 0.5)",
1005
1099
  "--qw-sem-effect-shadow-card-color": "rgba(34, 34, 34, 0.5)",
1006
1100
  "--qw-sem-effect-shadow-floating-color": "rgba(34, 34, 34, 0.5)",
package/dist/tokens.live.css CHANGED
@@ -304,6 +304,8 @@
304
304
  --qw-ref-color-brown-800: #542800;
305
305
  --qw-ref-color-brown-900: #200B00;
306
306
  --qw-ref-color-brown-base: var(--qw-seed-color-brown);
307
+ --qw-ref-color-black-contrast-endpoint: #000000;
308
+ --qw-ref-size-spacing-0: 0px;
307
309
  --qw-ref-size-spacing-1: calc(var(--qw-seed-size-spacing-step) * 1);
308
310
  --qw-ref-size-spacing-2: calc(var(--qw-seed-size-spacing-step) * 2);
309
311
  --qw-ref-size-spacing-3: calc(var(--qw-seed-size-spacing-step) * 3);
@@ -312,6 +314,15 @@
312
314
  --qw-ref-size-spacing-6: calc(var(--qw-seed-size-spacing-step) * 6);
313
315
  --qw-ref-size-spacing-7: calc(var(--qw-seed-size-spacing-step) * 7);
314
316
  --qw-ref-size-spacing-8: calc(var(--qw-seed-size-spacing-step) * 8);
317
+ --qw-ref-size-safe-area-inset-top: env(safe-area-inset-top, 0px);
318
+ --qw-ref-size-safe-area-inset-right: env(safe-area-inset-right, 0px);
319
+ --qw-ref-size-safe-area-inset-bottom: env(safe-area-inset-bottom, 0px);
320
+ --qw-ref-size-safe-area-inset-left: env(safe-area-inset-left, 0px);
321
+ --qw-ref-size-placeholder-text-height-base: 1em;
322
+ --qw-ref-size-placeholder-media-height-base: 120px;
323
+ --qw-ref-size-loading-logo-size-sm: 32px;
324
+ --qw-ref-size-loading-logo-size-md: 48px;
325
+ --qw-ref-size-loading-logo-size-lg: 60px;
315
326
  --qw-ref-size-radius-sm: calc(var(--qw-seed-size-radius-base) * 0.5);
316
327
  --qw-ref-size-radius-md: var(--qw-seed-size-radius-base);
317
328
  --qw-ref-size-radius-lg: calc(var(--qw-seed-size-radius-base) * 1.75);
@@ -339,6 +350,7 @@
339
350
  --qw-ref-size-avatar-diameter-lg: 58px;
340
351
  --qw-ref-typography-line-height-tight: calc(var(--qw-seed-typography-line-height-base) - 0.25);
341
352
  --qw-ref-typography-line-height-normal: var(--qw-seed-typography-line-height-base);
353
+ --qw-ref-typography-line-height-comfortable: 1.625;
342
354
  --qw-ref-typography-line-height-relaxed: calc(var(--qw-seed-typography-line-height-base) + 0.25);
343
355
  --qw-ref-size-opacity-disabled: var(--qw-seed-size-opacity-disabled);
344
356
  --qw-ref-size-z-index-1: calc(var(--qw-seed-size-z-index-step) * 1);
@@ -367,7 +379,11 @@
367
379
  --qw-ref-motion-duration-fast: calc(var(--qw-seed-motion-duration-base) * 0.5);
368
380
  --qw-ref-motion-duration-base: var(--qw-seed-motion-duration-base);
369
381
  --qw-ref-motion-duration-slow: calc(var(--qw-seed-motion-duration-base) * 1.6);
382
+ --qw-ref-motion-duration-shimmer: calc(var(--qw-seed-motion-duration-base) * 10);
383
+ --qw-ref-motion-easing-linear: linear;
384
+ --qw-ref-motion-easing-symmetric: ease-in-out;
370
385
  --qw-ref-motion-easing-standard: var(--qw-seed-motion-easing-standard);
386
+ --qw-ref-effect-blur-sm: calc(var(--qw-seed-size-spacing-step) * 0.5);
371
387
  --qw-ref-effect-shadow-sm: calc(var(--qw-seed-effect-shadow-base-offset-x) * 0.5) calc(var(--qw-seed-effect-shadow-base-offset-y) * 0.5) calc(var(--qw-seed-effect-shadow-base-blur) * 0.5) calc(var(--qw-seed-effect-shadow-base-spread) * 0.5) rgb(0 0 0 / calc(var(--qw-seed-size-opacity-alpha-step) * 2));
372
388
  --qw-ref-effect-shadow-md: calc(var(--qw-seed-effect-shadow-base-offset-x) * 2) calc(var(--qw-seed-effect-shadow-base-offset-y) * 2) calc(var(--qw-seed-effect-shadow-base-blur) * 3) calc(var(--qw-seed-effect-shadow-base-spread) * 2) rgb(0 0 0 / calc(var(--qw-seed-size-opacity-alpha-step) * 3));
373
389
  --qw-ref-effect-shadow-lg: calc(var(--qw-seed-effect-shadow-base-offset-x) * 4) calc(var(--qw-seed-effect-shadow-base-offset-y) * 4) calc(var(--qw-seed-effect-shadow-base-blur) * 6) calc(var(--qw-seed-effect-shadow-base-spread) * 4) rgb(0 0 0 / calc(var(--qw-seed-size-opacity-alpha-step) * 4));
@@ -417,6 +433,23 @@
417
433
  --qw-sem-size-avatar-diameter-sm: var(--qw-ref-size-avatar-diameter-sm);
418
434
  --qw-sem-size-avatar-diameter-md: var(--qw-ref-size-avatar-diameter-md);
419
435
  --qw-sem-size-avatar-diameter-lg: var(--qw-ref-size-avatar-diameter-lg);
436
+ --qw-sem-size-layout-gap-sm: var(--qw-ref-size-spacing-2);
437
+ --qw-sem-size-layout-gap-md: var(--qw-ref-size-spacing-4);
438
+ --qw-sem-size-layout-gap-lg: var(--qw-ref-size-spacing-6);
439
+ --qw-sem-size-safe-area-inset-top: var(--qw-ref-size-safe-area-inset-top);
440
+ --qw-sem-size-safe-area-inset-right: var(--qw-ref-size-safe-area-inset-right);
441
+ --qw-sem-size-safe-area-inset-bottom: var(--qw-ref-size-safe-area-inset-bottom);
442
+ --qw-sem-size-safe-area-inset-left: var(--qw-ref-size-safe-area-inset-left);
443
+ --qw-sem-size-safe-area-minimum-none: var(--qw-ref-size-spacing-0);
444
+ --qw-sem-size-safe-area-minimum-sm: var(--qw-ref-size-spacing-2);
445
+ --qw-sem-size-safe-area-minimum-md: var(--qw-ref-size-spacing-4);
446
+ --qw-sem-size-safe-area-minimum-lg: var(--qw-ref-size-spacing-6);
447
+ --qw-sem-size-loading-sm: var(--qw-ref-size-loading-logo-size-sm);
448
+ --qw-sem-size-loading-md: var(--qw-ref-size-loading-logo-size-md);
449
+ --qw-sem-size-loading-lg: var(--qw-ref-size-loading-logo-size-lg);
450
+ --qw-sem-size-skeleton-text-height: var(--qw-ref-size-placeholder-text-height-base);
451
+ --qw-sem-size-skeleton-rect-height: var(--qw-ref-size-placeholder-media-height-base);
452
+ --qw-sem-size-skeleton-circle-diameter: var(--qw-ref-size-avatar-diameter-sm);
420
453
  --qw-sem-size-inset-sm: var(--qw-ref-size-spacing-2);
421
454
  --qw-sem-size-stack-sm: var(--qw-ref-size-spacing-2);
422
455
  --qw-sem-size-inset-md: var(--qw-ref-size-spacing-4);
@@ -441,6 +474,11 @@
441
474
  --qw-sem-typography-body-strong-font-weight: var(--qw-ref-typography-font-weight-medium);
442
475
  --qw-sem-typography-body-strong-line-height: var(--qw-ref-typography-line-height-normal);
443
476
  --qw-sem-typography-body-strong-letter-spacing: var(--qw-ref-typography-letter-spacing-base);
477
+ --qw-sem-typography-product-title-font-family: var(--qw-ref-typography-font-family-text);
478
+ --qw-sem-typography-product-title-font-size: var(--qw-ref-typography-font-size-lg);
479
+ --qw-sem-typography-product-title-font-weight: var(--qw-ref-typography-font-weight-semibold);
480
+ --qw-sem-typography-product-title-line-height: var(--qw-ref-typography-line-height-comfortable);
481
+ --qw-sem-typography-product-title-letter-spacing: var(--qw-ref-typography-letter-spacing-base);
444
482
  --qw-sem-typography-heading-sm-font-family: var(--qw-ref-typography-font-family-text);
445
483
  --qw-sem-typography-heading-sm-font-size: var(--qw-ref-typography-font-size-lg);
446
484
  --qw-sem-typography-heading-sm-font-weight: var(--qw-ref-typography-font-weight-semibold);
@@ -479,7 +517,12 @@
479
517
  --qw-sem-motion-duration-fast: var(--qw-ref-motion-duration-fast);
480
518
  --qw-sem-motion-duration-base: var(--qw-ref-motion-duration-base);
481
519
  --qw-sem-motion-duration-slow: var(--qw-ref-motion-duration-slow);
520
+ --qw-sem-motion-duration-shimmer: var(--qw-ref-motion-duration-shimmer);
521
+ --qw-sem-motion-duration-spin: var(--qw-ref-motion-duration-shimmer);
482
522
  --qw-sem-motion-easing-standard: var(--qw-ref-motion-easing-standard);
523
+ --qw-sem-motion-easing-symmetric: var(--qw-ref-motion-easing-symmetric);
524
+ --qw-sem-motion-easing-linear: var(--qw-ref-motion-easing-linear);
525
+ --qw-sem-effect-blur-media-control: var(--qw-ref-effect-blur-sm);
483
526
  --qw-sem-color-surface-base: var(--qw-ref-color-white-base);
484
527
  --qw-sem-color-surface-subtle: var(--qw-ref-color-gray-50);
485
528
  --qw-sem-color-surface-elevated: var(--qw-ref-color-white-base);
@@ -490,6 +533,7 @@
490
533
  --qw-sem-color-surface-selected: var(--qw-ref-color-black-a5);
491
534
  --qw-sem-color-surface-inverse: var(--qw-ref-color-black-800);
492
535
  --qw-sem-color-surface-canvas-subtle: var(--qw-ref-color-gray-50);
536
+ --qw-sem-color-content-danger: var(--qw-ref-color-red-600);
493
537
  --qw-sem-color-content-primary: var(--qw-ref-color-black-base);
494
538
  --qw-sem-color-content-secondary: var(--qw-ref-color-gray-600);
495
539
  --qw-sem-color-content-tertiary: var(--qw-ref-color-gray-base);
@@ -500,9 +544,11 @@
500
544
  --qw-sem-color-content-icon-subtle: var(--qw-ref-color-black-a5);
501
545
  --qw-sem-color-content-inverse: var(--qw-ref-color-white-base);
502
546
  --qw-sem-color-content-on-solid: var(--qw-ref-color-white-base);
547
+ --qw-sem-color-content-on-brand: var(--qw-ref-color-white-base);
503
548
  --qw-sem-color-content-on-warning-subtle: var(--qw-ref-color-yellow-800);
504
549
  --qw-sem-color-border-default: var(--qw-ref-color-gray-100);
505
550
  --qw-sem-color-border-strong: var(--qw-ref-color-gray-300);
551
+ --qw-sem-color-border-control: var(--qw-ref-color-gray-600);
506
552
  --qw-sem-color-border-focus: var(--qw-ref-color-brand-base);
507
553
  --qw-sem-color-border-subtle: var(--qw-ref-color-black-a5);
508
554
  --qw-sem-color-border-disabled: var(--qw-ref-color-black-a10);
@@ -518,7 +564,7 @@
518
564
  --qw-sem-color-action-inverse: var(--qw-ref-color-white-base);
519
565
  --qw-sem-color-control-action-brand-subtle: var(--qw-ref-color-brand-a10);
520
566
  --qw-sem-color-control-action-product-subtle: var(--qw-ref-color-blue-a10);
521
- --qw-sem-color-control-action-danger-default: var(--qw-ref-color-red-400);
567
+ --qw-sem-color-control-action-danger-default: var(--qw-ref-color-red-600);
522
568
  --qw-sem-color-control-action-danger-subtle: var(--qw-ref-color-red-a10);
523
569
  --qw-sem-color-control-action-neutral-subtle: var(--qw-ref-color-black-a5);
524
570
  --qw-sem-color-control-selection-brand: var(--qw-ref-color-brand-a10);
@@ -536,6 +582,7 @@
536
582
  --qw-sem-color-overlay-guide: var(--qw-ref-color-blue-a10);
537
583
  --qw-sem-color-overlay-media-subtle: var(--qw-ref-color-black-a40);
538
584
  --qw-sem-color-overlay-media-strong: var(--qw-ref-color-black-a50);
585
+ --qw-sem-color-overlay-control-on-media: var(--qw-ref-color-black-a50);
539
586
  --qw-sem-color-shadow: var(--qw-ref-color-black-a10);
540
587
  --qw-sem-effect-shadow-card-color: var(--qw-ref-color-black-a10);
541
588
  --qw-sem-effect-shadow-floating-color: var(--qw-ref-color-black-a10);
@@ -555,6 +602,7 @@
555
602
  --qw-sem-color-surface-sunken: var(--qw-ref-color-gray-800);
556
603
  --qw-sem-color-surface-selected: var(--qw-ref-color-white-a10);
557
604
  --qw-sem-color-surface-canvas-subtle: var(--qw-ref-color-black-900);
605
+ --qw-sem-color-content-danger: var(--qw-ref-color-red-300);
558
606
  --qw-sem-color-content-primary: var(--qw-ref-color-white-base);
559
607
  --qw-sem-color-content-secondary: var(--qw-ref-color-gray-base);
560
608
  --qw-sem-color-content-tertiary: var(--qw-ref-color-gray-600);
@@ -564,9 +612,11 @@
564
612
  --qw-sem-color-content-link: var(--qw-ref-color-blue-400);
565
613
  --qw-sem-color-content-icon-subtle: var(--qw-ref-color-white-a10);
566
614
  --qw-sem-color-content-inverse: var(--qw-ref-color-black-base);
615
+ --qw-sem-color-content-on-brand: var(--qw-ref-color-black-contrast-endpoint);
567
616
  --qw-sem-color-content-on-warning-subtle: var(--qw-ref-color-yellow-200);
568
617
  --qw-sem-color-border-default: var(--qw-ref-color-gray-700);
569
618
  --qw-sem-color-border-strong: var(--qw-ref-color-gray-600);
619
+ --qw-sem-color-border-control: var(--qw-ref-color-gray-base);
570
620
  --qw-sem-color-border-focus: var(--qw-ref-color-brand-500);
571
621
  --qw-sem-color-border-subtle: var(--qw-ref-color-white-a5);
572
622
  --qw-sem-color-border-disabled: var(--qw-ref-color-white-a10);
@@ -592,6 +642,7 @@
592
642
  --qw-sem-color-status-info-subtle: var(--qw-ref-color-blue-a20);
593
643
  --qw-sem-color-overlay-scrim: var(--qw-ref-color-black-a70);
594
644
  --qw-sem-color-overlay-guide: var(--qw-ref-color-blue-a20);
645
+ --qw-sem-color-overlay-control-on-media: var(--qw-ref-color-white-a40);
595
646
  --qw-sem-color-shadow: var(--qw-ref-color-black-a50);
596
647
  --qw-sem-effect-shadow-card-color: var(--qw-ref-color-black-a50);
597
648
  --qw-sem-effect-shadow-floating-color: var(--qw-ref-color-black-a50);