@qw-ui/tokens 0.3.0-next.4 → 0.3.0-next.42

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 (24) hide show
  1. package/README.md +20 -53
  2. package/dist/color-architecture.d.ts +163 -2
  3. package/dist/derive/index.d.ts +3 -3
  4. package/dist/derive/live-css.d.ts +1 -1
  5. package/dist/derive/reference.d.ts +73 -13
  6. package/dist/derive/semantic.d.ts +24 -1
  7. package/dist/derive/tailwind.d.ts +31 -0
  8. package/dist/design-doc.d.ts +1 -1
  9. package/dist/figma/color-contract.d.ts +2 -0
  10. package/dist/figma/color-snapshot.d.ts +4 -0
  11. package/dist/index.d.ts +5 -4
  12. package/dist/index.js +1027 -366
  13. package/dist/index.js.map +1 -1
  14. package/dist/schema.d.ts +3 -3
  15. package/dist/tailwind.css +85 -0
  16. package/dist/tokens.css +308 -218
  17. package/dist/tokens.json +290 -93
  18. package/dist/tokens.live.css +178 -9
  19. package/dist/tokens.ts +293 -131
  20. package/package.json +12 -29
  21. package/dist/compat/build.d.ts +0 -14
  22. package/dist/compat/color.d.ts +0 -8
  23. package/dist/compat/index.d.ts +0 -5
  24. package/dist/compat/schema.d.ts +0 -114
package/dist/tokens.live.css CHANGED
@@ -31,9 +31,6 @@
31
31
  --qw-seed-typography-font-family-text-windows-latin: 'Segoe UI', system-ui, Roboto, 'Noto Sans', 'Helvetica Neue', Arial, sans-serif;
32
32
  --qw-seed-typography-font-family-text-windows-zh: 'Microsoft YaHei', 'Segoe UI', system-ui, Roboto, 'Noto Sans SC', 'Helvetica Neue', Arial, sans-serif;
33
33
  --qw-seed-typography-font-family-text-windows-ja: Meiryo, 'Yu Gothic UI', 'Segoe UI', system-ui, Roboto, 'Noto Sans JP', 'Helvetica Neue', Arial, sans-serif;
34
- --qw-seed-typography-font-weight-regular: 400;
35
- --qw-seed-typography-font-weight-medium: 500;
36
- --qw-seed-typography-font-weight-semibold: 600;
37
34
  --qw-seed-typography-font-size-base: 14px;
38
35
  --qw-seed-typography-line-height-base: 1.5;
39
36
  --qw-seed-typography-letter-spacing-base: 0px;
@@ -307,6 +304,8 @@
307
304
  --qw-ref-color-brown-800: #542800;
308
305
  --qw-ref-color-brown-900: #200B00;
309
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;
310
309
  --qw-ref-size-spacing-1: calc(var(--qw-seed-size-spacing-step) * 1);
311
310
  --qw-ref-size-spacing-2: calc(var(--qw-seed-size-spacing-step) * 2);
312
311
  --qw-ref-size-spacing-3: calc(var(--qw-seed-size-spacing-step) * 3);
@@ -315,9 +314,19 @@
315
314
  --qw-ref-size-spacing-6: calc(var(--qw-seed-size-spacing-step) * 6);
316
315
  --qw-ref-size-spacing-7: calc(var(--qw-seed-size-spacing-step) * 7);
317
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;
318
326
  --qw-ref-size-radius-sm: calc(var(--qw-seed-size-radius-base) * 0.5);
319
327
  --qw-ref-size-radius-md: var(--qw-seed-size-radius-base);
320
328
  --qw-ref-size-radius-lg: calc(var(--qw-seed-size-radius-base) * 1.75);
329
+ --qw-ref-size-radius-xl: calc(var(--qw-seed-size-radius-base) * 2);
321
330
  --qw-ref-size-radius-full: var(--qw-seed-size-radius-full);
322
331
  --qw-ref-size-control-size-sm: calc(var(--qw-seed-size-control-size-base) - var(--qw-seed-size-spacing-step) * 2);
323
332
  --qw-ref-size-control-size-md: var(--qw-seed-size-control-size-base);
@@ -325,9 +334,23 @@
325
334
  --qw-ref-size-icon-size-sm: calc(var(--qw-seed-size-icon-size-base) - var(--qw-seed-size-spacing-step) * 1);
326
335
  --qw-ref-size-icon-size-md: var(--qw-seed-size-icon-size-base);
327
336
  --qw-ref-size-icon-size-lg: calc(var(--qw-seed-size-icon-size-base) + var(--qw-seed-size-spacing-step) * 1);
328
- --qw-ref-size-border-width-hairline: var(--qw-seed-size-border-width-hairline);
337
+ --qw-ref-size-stroke-width-half: calc(var(--qw-seed-size-border-width-hairline) * 0.5);
338
+ --qw-ref-size-stroke-width-base: var(--qw-seed-size-border-width-hairline);
339
+ --qw-ref-size-stroke-width-double: calc(var(--qw-seed-size-border-width-hairline) * 2);
340
+ --qw-ref-size-stroke-width-triple: calc(var(--qw-seed-size-border-width-hairline) * 3);
341
+ --qw-ref-size-action-control-height-2xs: 24px;
342
+ --qw-ref-size-action-control-height-xs: 28px;
343
+ --qw-ref-size-action-control-height-sm: 32px;
344
+ --qw-ref-size-action-control-height-md: 36px;
345
+ --qw-ref-size-action-control-height-lg: 42px;
346
+ --qw-ref-size-action-control-height-xl: 50px;
347
+ --qw-ref-size-action-control-icon-2xs: 14px;
348
+ --qw-ref-size-avatar-diameter-sm: 40px;
349
+ --qw-ref-size-avatar-diameter-md: 50px;
350
+ --qw-ref-size-avatar-diameter-lg: 58px;
329
351
  --qw-ref-typography-line-height-tight: calc(var(--qw-seed-typography-line-height-base) - 0.25);
330
352
  --qw-ref-typography-line-height-normal: var(--qw-seed-typography-line-height-base);
353
+ --qw-ref-typography-line-height-comfortable: 1.625;
331
354
  --qw-ref-typography-line-height-relaxed: calc(var(--qw-seed-typography-line-height-base) + 0.25);
332
355
  --qw-ref-size-opacity-disabled: var(--qw-seed-size-opacity-disabled);
333
356
  --qw-ref-size-z-index-1: calc(var(--qw-seed-size-z-index-step) * 1);
@@ -343,10 +366,11 @@
343
366
  --qw-ref-typography-font-family-text-windows-latin: var(--qw-seed-typography-font-family-text-windows-latin);
344
367
  --qw-ref-typography-font-family-text-windows-zh: var(--qw-seed-typography-font-family-text-windows-zh);
345
368
  --qw-ref-typography-font-family-text-windows-ja: var(--qw-seed-typography-font-family-text-windows-ja);
346
- --qw-ref-typography-font-weight-regular: var(--qw-seed-typography-font-weight-regular);
347
- --qw-ref-typography-font-weight-medium: var(--qw-seed-typography-font-weight-medium);
348
- --qw-ref-typography-font-weight-semibold: var(--qw-seed-typography-font-weight-semibold);
369
+ --qw-ref-typography-font-weight-regular: 400;
370
+ --qw-ref-typography-font-weight-medium: 500;
371
+ --qw-ref-typography-font-weight-semibold: 600;
349
372
  --qw-ref-typography-font-size-base: var(--qw-seed-typography-font-size-base);
373
+ --qw-ref-typography-font-size-xs: round(nearest, calc(var(--qw-seed-typography-font-size-base) * 0.786), 1px);
350
374
  --qw-ref-typography-font-size-sm: round(nearest, calc(var(--qw-seed-typography-font-size-base) * 0.857), 1px);
351
375
  --qw-ref-typography-font-size-lg: round(nearest, calc(var(--qw-seed-typography-font-size-base) * 1.143), 1px);
352
376
  --qw-ref-typography-font-size-xl: round(nearest, calc(var(--qw-seed-typography-font-size-base) * 1.429), 1px);
@@ -355,12 +379,18 @@
355
379
  --qw-ref-motion-duration-fast: calc(var(--qw-seed-motion-duration-base) * 0.5);
356
380
  --qw-ref-motion-duration-base: var(--qw-seed-motion-duration-base);
357
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;
358
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);
359
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));
360
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));
361
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));
390
+ --qw-sem-size-radius-sm: var(--qw-ref-size-radius-sm);
362
391
  --qw-sem-size-radius-control: var(--qw-ref-size-radius-md);
363
392
  --qw-sem-size-radius-card: var(--qw-ref-size-radius-lg);
393
+ --qw-sem-size-radius-xl: var(--qw-ref-size-radius-xl);
364
394
  --qw-sem-size-radius-pill: var(--qw-ref-size-radius-full);
365
395
  --qw-sem-size-radius-full: var(--qw-ref-size-radius-full);
366
396
  --qw-sem-size-control-height-sm: var(--qw-ref-size-control-size-sm);
@@ -369,6 +399,57 @@
369
399
  --qw-sem-size-icon-size-sm: var(--qw-ref-size-icon-size-sm);
370
400
  --qw-sem-size-icon-size-md: var(--qw-ref-size-icon-size-md);
371
401
  --qw-sem-size-icon-size-lg: var(--qw-ref-size-icon-size-lg);
402
+ --qw-sem-size-action-control-height-2xs: var(--qw-ref-size-action-control-height-2xs);
403
+ --qw-sem-size-action-control-height-xs: var(--qw-ref-size-action-control-height-xs);
404
+ --qw-sem-size-action-control-height-sm: var(--qw-ref-size-action-control-height-sm);
405
+ --qw-sem-size-action-control-height-md: var(--qw-ref-size-action-control-height-md);
406
+ --qw-sem-size-action-control-height-lg: var(--qw-ref-size-action-control-height-lg);
407
+ --qw-sem-size-action-control-height-xl: var(--qw-ref-size-action-control-height-xl);
408
+ --qw-sem-size-action-control-padding-inline-2xs: var(--qw-ref-size-spacing-2);
409
+ --qw-sem-size-action-control-padding-inline-xs: var(--qw-ref-size-spacing-2);
410
+ --qw-sem-size-action-control-padding-inline-sm: var(--qw-ref-size-spacing-4);
411
+ --qw-sem-size-action-control-padding-inline-md: var(--qw-ref-size-spacing-4);
412
+ --qw-sem-size-action-control-padding-inline-lg: var(--qw-ref-size-spacing-5);
413
+ --qw-sem-size-action-control-padding-inline-xl: var(--qw-ref-size-spacing-8);
414
+ --qw-sem-size-action-control-icon-2xs: var(--qw-ref-size-action-control-icon-2xs);
415
+ --qw-sem-size-action-control-icon-xs: var(--qw-ref-size-icon-size-sm);
416
+ --qw-sem-size-action-control-icon-sm: var(--qw-ref-size-icon-size-sm);
417
+ --qw-sem-size-action-control-icon-md: var(--qw-ref-size-icon-size-sm);
418
+ --qw-sem-size-action-control-icon-lg: var(--qw-ref-size-icon-size-sm);
419
+ --qw-sem-size-action-control-icon-xl: var(--qw-ref-size-icon-size-md);
420
+ --qw-sem-size-action-control-gap-2xs: var(--qw-ref-size-spacing-1);
421
+ --qw-sem-size-action-control-gap-xs: var(--qw-ref-size-spacing-1);
422
+ --qw-sem-size-action-control-gap-sm: var(--qw-ref-size-spacing-2);
423
+ --qw-sem-size-action-control-gap-md: var(--qw-ref-size-spacing-2);
424
+ --qw-sem-size-action-control-gap-lg: var(--qw-ref-size-spacing-2);
425
+ --qw-sem-size-action-control-gap-xl: var(--qw-ref-size-spacing-2);
426
+ --qw-sem-size-border-width-default: var(--qw-ref-size-stroke-width-base);
427
+ --qw-sem-size-border-width-strong: var(--qw-ref-size-stroke-width-double);
428
+ --qw-sem-size-divider-width-thin: var(--qw-ref-size-stroke-width-half);
429
+ --qw-sem-size-divider-width-default: var(--qw-ref-size-stroke-width-base);
430
+ --qw-sem-size-focus-ring-width: var(--qw-ref-size-stroke-width-double);
431
+ --qw-sem-size-focus-ring-offset: var(--qw-ref-size-stroke-width-double);
432
+ --qw-sem-size-indicator-loading: var(--qw-ref-size-stroke-width-double);
433
+ --qw-sem-size-avatar-diameter-sm: var(--qw-ref-size-avatar-diameter-sm);
434
+ --qw-sem-size-avatar-diameter-md: var(--qw-ref-size-avatar-diameter-md);
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);
372
453
  --qw-sem-size-inset-sm: var(--qw-ref-size-spacing-2);
373
454
  --qw-sem-size-stack-sm: var(--qw-ref-size-spacing-2);
374
455
  --qw-sem-size-inset-md: var(--qw-ref-size-spacing-4);
@@ -393,6 +474,11 @@
393
474
  --qw-sem-typography-body-strong-font-weight: var(--qw-ref-typography-font-weight-medium);
394
475
  --qw-sem-typography-body-strong-line-height: var(--qw-ref-typography-line-height-normal);
395
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);
396
482
  --qw-sem-typography-heading-sm-font-family: var(--qw-ref-typography-font-family-text);
397
483
  --qw-sem-typography-heading-sm-font-size: var(--qw-ref-typography-font-size-lg);
398
484
  --qw-sem-typography-heading-sm-font-weight: var(--qw-ref-typography-font-weight-semibold);
@@ -413,6 +499,16 @@
413
499
  --qw-sem-typography-caption-font-weight: var(--qw-ref-typography-font-weight-regular);
414
500
  --qw-sem-typography-caption-line-height: var(--qw-ref-typography-line-height-normal);
415
501
  --qw-sem-typography-caption-letter-spacing: var(--qw-ref-typography-letter-spacing-base);
502
+ --qw-sem-typography-body-lg-font-family: var(--qw-ref-typography-font-family-text);
503
+ --qw-sem-typography-body-lg-font-size: var(--qw-ref-typography-font-size-lg);
504
+ --qw-sem-typography-body-lg-font-weight: var(--qw-ref-typography-font-weight-regular);
505
+ --qw-sem-typography-body-lg-line-height: var(--qw-ref-typography-line-height-normal);
506
+ --qw-sem-typography-body-lg-letter-spacing: var(--qw-ref-typography-letter-spacing-base);
507
+ --qw-sem-typography-label-sm-font-family: var(--qw-ref-typography-font-family-text);
508
+ --qw-sem-typography-label-sm-font-size: var(--qw-ref-typography-font-size-xs);
509
+ --qw-sem-typography-label-sm-font-weight: var(--qw-ref-typography-font-weight-medium);
510
+ --qw-sem-typography-label-sm-line-height: var(--qw-ref-typography-line-height-normal);
511
+ --qw-sem-typography-label-sm-letter-spacing: var(--qw-ref-typography-letter-spacing-base);
416
512
  --qw-sem-typography-code-font-family: var(--qw-ref-typography-font-family-code);
417
513
  --qw-sem-typography-code-font-size: var(--qw-ref-typography-font-size-sm);
418
514
  --qw-sem-typography-code-font-weight: var(--qw-ref-typography-font-weight-regular);
@@ -421,36 +517,79 @@
421
517
  --qw-sem-motion-duration-fast: var(--qw-ref-motion-duration-fast);
422
518
  --qw-sem-motion-duration-base: var(--qw-ref-motion-duration-base);
423
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);
424
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);
425
526
  --qw-sem-color-surface-base: var(--qw-ref-color-white-base);
426
527
  --qw-sem-color-surface-subtle: var(--qw-ref-color-gray-50);
427
528
  --qw-sem-color-surface-elevated: var(--qw-ref-color-white-base);
428
529
  --qw-sem-color-surface-header: var(--qw-ref-color-gray-100);
429
530
  --qw-sem-color-surface-brand-subtle: var(--qw-ref-color-blue-50);
531
+ --qw-sem-color-surface-canvas: var(--qw-ref-color-white-base);
532
+ --qw-sem-color-surface-sunken: var(--qw-ref-color-gray-100);
533
+ --qw-sem-color-surface-selected: var(--qw-ref-color-black-a5);
534
+ --qw-sem-color-surface-inverse: var(--qw-ref-color-black-800);
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);
430
537
  --qw-sem-color-content-primary: var(--qw-ref-color-black-base);
431
538
  --qw-sem-color-content-secondary: var(--qw-ref-color-gray-600);
432
539
  --qw-sem-color-content-tertiary: var(--qw-ref-color-gray-base);
433
540
  --qw-sem-color-content-placeholder: var(--qw-ref-color-gray-300);
434
541
  --qw-sem-color-content-intro: var(--qw-ref-color-gray-400);
542
+ --qw-sem-color-content-disabled: var(--qw-ref-color-black-a30);
543
+ --qw-sem-color-content-link: var(--qw-ref-color-blue-700);
544
+ --qw-sem-color-content-icon-subtle: var(--qw-ref-color-black-a5);
545
+ --qw-sem-color-content-inverse: var(--qw-ref-color-white-base);
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);
548
+ --qw-sem-color-content-on-warning-subtle: var(--qw-ref-color-yellow-800);
435
549
  --qw-sem-color-border-default: var(--qw-ref-color-gray-100);
436
550
  --qw-sem-color-border-strong: var(--qw-ref-color-gray-300);
551
+ --qw-sem-color-border-control: var(--qw-ref-color-gray-600);
437
552
  --qw-sem-color-border-focus: var(--qw-ref-color-brand-base);
553
+ --qw-sem-color-border-subtle: var(--qw-ref-color-black-a5);
554
+ --qw-sem-color-border-disabled: var(--qw-ref-color-black-a10);
555
+ --qw-sem-color-border-on-media: var(--qw-ref-color-white-base);
438
556
  --qw-sem-color-fill-subtle: var(--qw-ref-color-gray-50);
439
557
  --qw-sem-color-fill-hover: var(--qw-ref-color-gray-100);
440
558
  --qw-sem-color-fill-active: var(--qw-ref-color-blue-50);
441
559
  --qw-sem-color-fill-disabled: var(--qw-ref-color-gray-50);
560
+ --qw-sem-color-fill-track: var(--qw-ref-color-black-a10);
442
561
  --qw-sem-color-action-brand: var(--qw-ref-color-brand-base);
443
562
  --qw-sem-color-action-product: var(--qw-ref-color-blue-base);
444
563
  --qw-sem-color-action-selected: var(--qw-ref-color-blue-a20);
445
564
  --qw-sem-color-action-inverse: var(--qw-ref-color-white-base);
565
+ --qw-sem-color-control-action-brand-subtle: var(--qw-ref-color-brand-a10);
566
+ --qw-sem-color-control-action-product-subtle: var(--qw-ref-color-blue-a10);
567
+ --qw-sem-color-control-action-danger-default: var(--qw-ref-color-red-600);
568
+ --qw-sem-color-control-action-danger-subtle: var(--qw-ref-color-red-a10);
569
+ --qw-sem-color-control-action-neutral-subtle: var(--qw-ref-color-black-a5);
570
+ --qw-sem-color-control-selection-brand: var(--qw-ref-color-brand-a10);
571
+ --qw-sem-color-control-selection-product: var(--qw-ref-color-blue-a10);
572
+ --qw-sem-color-selection-text-background: var(--qw-ref-color-blue-a20);
446
573
  --qw-sem-color-status-success: var(--qw-ref-color-green-base);
447
574
  --qw-sem-color-status-warning: var(--qw-ref-color-yellow-base);
448
575
  --qw-sem-color-status-danger: var(--qw-ref-color-red-400);
449
576
  --qw-sem-color-status-info: var(--qw-ref-color-blue-base);
577
+ --qw-sem-color-status-success-subtle: var(--qw-ref-color-green-a10);
578
+ --qw-sem-color-status-warning-subtle: var(--qw-ref-color-yellow-a20);
579
+ --qw-sem-color-status-danger-subtle: var(--qw-ref-color-red-a10);
580
+ --qw-sem-color-status-info-subtle: var(--qw-ref-color-blue-a10);
450
581
  --qw-sem-color-overlay-scrim: var(--qw-ref-color-black-a50);
451
- --qw-sem-color-overlay-guide: var(--qw-ref-color-black-a70);
582
+ --qw-sem-color-overlay-guide: var(--qw-ref-color-blue-a10);
583
+ --qw-sem-color-overlay-media-subtle: var(--qw-ref-color-black-a40);
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);
452
586
  --qw-sem-color-shadow: var(--qw-ref-color-black-a10);
453
- --qw-sem-effect-shadow-dialog: 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) var(--qw-sem-color-shadow);
587
+ --qw-sem-effect-shadow-card-color: var(--qw-ref-color-black-a10);
588
+ --qw-sem-effect-shadow-floating-color: var(--qw-ref-color-black-a10);
589
+ --qw-sem-effect-shadow-dialog-color: var(--qw-ref-color-black-a10);
590
+ --qw-sem-effect-shadow-card: 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) var(--qw-sem-effect-shadow-card-color);
591
+ --qw-sem-effect-shadow-floating: 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) var(--qw-sem-effect-shadow-floating-color);
592
+ --qw-sem-effect-shadow-dialog: 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) var(--qw-sem-effect-shadow-dialog-color);
454
593
  }
455
594
 
456
595
  [data-qw-mode="dark"] {
@@ -459,23 +598,53 @@
459
598
  --qw-sem-color-surface-elevated: var(--qw-ref-color-gray-800);
460
599
  --qw-sem-color-surface-header: var(--qw-ref-color-gray-700);
461
600
  --qw-sem-color-surface-brand-subtle: var(--qw-ref-color-blue-800);
601
+ --qw-sem-color-surface-canvas: var(--qw-ref-color-black-900);
602
+ --qw-sem-color-surface-sunken: var(--qw-ref-color-gray-800);
603
+ --qw-sem-color-surface-selected: var(--qw-ref-color-white-a10);
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);
462
606
  --qw-sem-color-content-primary: var(--qw-ref-color-white-base);
463
607
  --qw-sem-color-content-secondary: var(--qw-ref-color-gray-base);
464
608
  --qw-sem-color-content-tertiary: var(--qw-ref-color-gray-600);
465
609
  --qw-sem-color-content-placeholder: var(--qw-ref-color-white-a30);
466
610
  --qw-sem-color-content-intro: var(--qw-ref-color-gray-500);
611
+ --qw-sem-color-content-disabled: var(--qw-ref-color-white-a30);
612
+ --qw-sem-color-content-link: var(--qw-ref-color-blue-400);
613
+ --qw-sem-color-content-icon-subtle: var(--qw-ref-color-white-a10);
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);
616
+ --qw-sem-color-content-on-warning-subtle: var(--qw-ref-color-yellow-200);
467
617
  --qw-sem-color-border-default: var(--qw-ref-color-gray-700);
468
618
  --qw-sem-color-border-strong: var(--qw-ref-color-gray-600);
619
+ --qw-sem-color-border-control: var(--qw-ref-color-gray-base);
469
620
  --qw-sem-color-border-focus: var(--qw-ref-color-brand-500);
621
+ --qw-sem-color-border-subtle: var(--qw-ref-color-white-a5);
622
+ --qw-sem-color-border-disabled: var(--qw-ref-color-white-a10);
470
623
  --qw-sem-color-fill-subtle: var(--qw-ref-color-white-a20);
471
624
  --qw-sem-color-fill-hover: var(--qw-ref-color-gray-800);
472
625
  --qw-sem-color-fill-active: var(--qw-ref-color-blue-800);
473
626
  --qw-sem-color-fill-disabled: var(--qw-ref-color-gray-900);
627
+ --qw-sem-color-fill-track: var(--qw-ref-color-white-a20);
474
628
  --qw-sem-color-action-brand: var(--qw-ref-color-brand-500);
475
629
  --qw-sem-color-action-product: var(--qw-ref-color-blue-600);
476
630
  --qw-sem-color-action-selected: var(--qw-ref-color-blue-a40);
477
631
  --qw-sem-color-action-inverse: var(--qw-ref-color-black-base);
632
+ --qw-sem-color-control-action-brand-subtle: var(--qw-ref-color-brand-a20);
633
+ --qw-sem-color-control-action-product-subtle: var(--qw-ref-color-blue-a20);
634
+ --qw-sem-color-control-action-danger-subtle: var(--qw-ref-color-red-a20);
635
+ --qw-sem-color-control-action-neutral-subtle: var(--qw-ref-color-white-a10);
636
+ --qw-sem-color-control-selection-brand: var(--qw-ref-color-brand-a20);
637
+ --qw-sem-color-control-selection-product: var(--qw-ref-color-blue-a20);
638
+ --qw-sem-color-selection-text-background: var(--qw-ref-color-blue-a40);
478
639
  --qw-sem-color-status-info: var(--qw-ref-color-blue-600);
640
+ --qw-sem-color-status-success-subtle: var(--qw-ref-color-green-a20);
641
+ --qw-sem-color-status-danger-subtle: var(--qw-ref-color-red-a20);
642
+ --qw-sem-color-status-info-subtle: var(--qw-ref-color-blue-a20);
479
643
  --qw-sem-color-overlay-scrim: var(--qw-ref-color-black-a70);
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);
480
646
  --qw-sem-color-shadow: var(--qw-ref-color-black-a50);
647
+ --qw-sem-effect-shadow-card-color: var(--qw-ref-color-black-a50);
648
+ --qw-sem-effect-shadow-floating-color: var(--qw-ref-color-black-a50);
649
+ --qw-sem-effect-shadow-dialog-color: var(--qw-ref-color-black-a50);
481
650
  }