@quieto/design-tokens 0.2.0 → 1.0.0

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 (12) hide show
  1. package/CHANGELOG.md +16 -0
  2. package/README.md +5 -4
  3. package/dist/css/qds.css +145 -0
  4. package/dist/css/qds.dark.css +143 -0
  5. package/dist/css/qds.light.css +143 -0
  6. package/dist/js/tokens.js +7561 -2807
  7. package/dist/nomenclature.json +1 -0
  8. package/dist/tokens.json +7561 -2807
  9. package/docs/nomenclature.md +11 -1
  10. package/nomenclature.js +7 -2
  11. package/package.json +1 -1
  12. package/tokens.json +908 -3
package/CHANGELOG.md CHANGED
@@ -1,5 +1,21 @@
1
1
  # @quieto/design-tokens
2
2
 
3
+ ## 1.0.0
4
+
5
+ ### Major Changes
6
+
7
+ - ceb2d11: 1.0.0: the first stable release. Nothing is removed or renamed in this release; the major version marks the start of semantic versioning's promise. From here, removing or renaming a token, element, attribute, event, slot, or CSS part waits for the next major version, and the READMEs set out exactly what is public API.
8
+
9
+ ### Minor Changes
10
+
11
+ - f67627c: Add component token sets for the Tier 2 components: `qds-toast`, `qds-checkbox-group`, `qds-spinner`, `qds-avatar`, `qds-breadcrumbs`, and `qds-pagination`.
12
+
13
+ ## 0.3.0
14
+
15
+ ### Minor Changes
16
+
17
+ - 106e35b: Add the tokens the Tier 1 components need: icon sizes (`--qds-size-icon-sm`, `-md`, `-lg`), an inverse background role (`--qds-semantic-color-background-inverse`, dark in light mode and light in dark) for surfaces such as tooltips, and component token sets for `qds-icon`, `qds-select`, `qds-alert`, `qds-tooltip`, and `qds-menu`.
18
+
3
19
  ## 0.2.0
4
20
 
5
21
  ### Minor Changes
package/README.md CHANGED
@@ -128,11 +128,12 @@ Load Inter and JetBrains Mono yourself, or accept the system fallbacks.
128
128
 
129
129
  ## Versioning
130
130
 
131
- This package is pre-1.0, so **token names can change in any minor release.** On `0.x`, npm's
132
- caret range does not cross a minor version: `^0.1.0` installs `0.1.x` but never `0.2.0`, so a
133
- rename will not reach you without an explicit upgrade. The
131
+ This package follows [semantic versioning](https://semver.org). A token's name is its API:
132
+ removing or renaming a token waits for a major version, and new tokens arrive in minor versions. A
133
+ token's value can change in a minor version, since that is a design change rather than an API one —
134
+ a step of the palette retuned for contrast, say — and the
134
135
  [changelog](https://github.com/dillonschultz93/qds/blob/main/packages/design-tokens/CHANGELOG.md)
135
- lists every rename.
136
+ says so whenever one does.
136
137
 
137
138
  ## License
138
139
 
package/dist/css/qds.css CHANGED
@@ -149,6 +149,9 @@
149
149
  --qds-size-md: 32rem; /** Container width: the default dialog. */
150
150
  --qds-size-lg: 48rem; /** Container width: wide dialogs and forms. */
151
151
  --qds-size-xl: 64rem; /** Container width: page-level content. */
152
+ --qds-size-icon-sm: 1rem; /** Icon: inline with small text, and inside compact controls. */
153
+ --qds-size-icon-md: 1.25rem; /** Icon: the default, beside body text and in buttons. */
154
+ --qds-size-icon-lg: 1.5rem; /** Icon: standalone, or leading a message. */
152
155
  --qds-opacity-0: 0;
153
156
  --qds-opacity-25: 0.25;
154
157
  --qds-opacity-50: 0.5;
@@ -174,6 +177,7 @@
174
177
  --qds-semantic-color-background-info: var(--qds-color-blue-100);
175
178
  --qds-semantic-color-background-error: var(--qds-color-red-100);
176
179
  --qds-semantic-color-background-raised: var(--qds-color-neutral-50);
180
+ --qds-semantic-color-background-inverse: var(--qds-color-neutral-900);
177
181
  --qds-semantic-color-content-default: var(--qds-color-neutral-900);
178
182
  --qds-semantic-color-content-subtle: var(--qds-color-neutral-500);
179
183
  --qds-semantic-color-content-primary-rest: var(--qds-color-blue-700);
@@ -314,6 +318,66 @@
314
318
  --qds-component-modal-sm-max-width: var(--qds-size-sm);
315
319
  --qds-component-modal-md-max-width: var(--qds-size-md);
316
320
  --qds-component-modal-lg-max-width: var(--qds-size-lg);
321
+ --qds-component-icon-sm-width: var(--qds-size-icon-sm);
322
+ --qds-component-icon-md-width: var(--qds-size-icon-md);
323
+ --qds-component-icon-lg-width: var(--qds-size-icon-lg);
324
+ --qds-component-select-gap: var(--qds-spacing-100);
325
+ --qds-component-select-label-font-size: var(--qds-typography-font-size-200);
326
+ --qds-component-select-label-font-weight: var(--qds-typography-font-weight-medium);
327
+ --qds-component-select-hint-font-size: var(--qds-typography-font-size-100);
328
+ --qds-component-select-control-padding-block: var(--qds-spacing-200);
329
+ --qds-component-select-control-padding-inline: var(--qds-spacing-300);
330
+ --qds-component-select-control-font-size: var(--qds-typography-font-size-200);
331
+ --qds-component-select-control-line-height: var(--qds-typography-line-height-normal);
332
+ --qds-component-alert-gap: var(--qds-spacing-300);
333
+ --qds-component-alert-padding: var(--qds-spacing-400);
334
+ --qds-component-alert-font-size: var(--qds-typography-font-size-200);
335
+ --qds-component-alert-line-height: var(--qds-typography-line-height-normal);
336
+ --qds-component-alert-heading-font-weight: var(--qds-typography-font-weight-semibold);
337
+ --qds-component-tooltip-gap: var(--qds-spacing-200);
338
+ --qds-component-tooltip-padding-block: var(--qds-spacing-100);
339
+ --qds-component-tooltip-padding-inline: var(--qds-spacing-200);
340
+ --qds-component-tooltip-max-width: var(--qds-size-sm);
341
+ --qds-component-tooltip-font-size: var(--qds-typography-font-size-100);
342
+ --qds-component-tooltip-line-height: var(--qds-typography-line-height-snug);
343
+ --qds-component-menu-gap: var(--qds-spacing-100);
344
+ --qds-component-menu-padding: var(--qds-spacing-100);
345
+ --qds-component-menu-item-gap: var(--qds-spacing-200);
346
+ --qds-component-menu-item-padding-block: var(--qds-spacing-200);
347
+ --qds-component-menu-item-padding-inline: var(--qds-spacing-300);
348
+ --qds-component-menu-item-font-size: var(--qds-typography-font-size-200);
349
+ --qds-component-menu-item-line-height: var(--qds-typography-line-height-normal);
350
+ --qds-component-toast-gap: var(--qds-spacing-300);
351
+ --qds-component-toast-padding: var(--qds-spacing-400);
352
+ --qds-component-toast-margin: var(--qds-spacing-400); /** Distance from the edge of the viewport to the stack of toasts. */
353
+ --qds-component-toast-max-width: var(--qds-size-sm);
354
+ --qds-component-toast-font-size: var(--qds-typography-font-size-200);
355
+ --qds-component-toast-line-height: var(--qds-typography-line-height-normal);
356
+ --qds-component-toast-heading-font-weight: var(--qds-typography-font-weight-semibold);
357
+ --qds-component-checkbox-group-gap: var(--qds-spacing-200);
358
+ --qds-component-checkbox-group-label-font-size: var(--qds-typography-font-size-200);
359
+ --qds-component-checkbox-group-label-font-weight: var(--qds-typography-font-weight-semibold);
360
+ --qds-component-checkbox-group-hint-font-size: var(--qds-typography-font-size-100);
361
+ --qds-component-spinner-sm-width: var(--qds-size-icon-sm);
362
+ --qds-component-spinner-md-width: var(--qds-size-icon-md);
363
+ --qds-component-spinner-lg-width: var(--qds-size-icon-lg);
364
+ --qds-component-avatar-border-radius: var(--qds-border-radius-full);
365
+ --qds-component-avatar-font-weight: var(--qds-typography-font-weight-medium);
366
+ --qds-component-avatar-sm-width: var(--qds-spacing-500); /** Square, from the spacing scale, whose steps these sizes match: there is no size step this small. */
367
+ --qds-component-avatar-sm-font-size: var(--qds-typography-font-size-100);
368
+ --qds-component-avatar-md-width: var(--qds-spacing-600); /** Square, from the spacing scale, whose steps these sizes match: there is no size step this small. */
369
+ --qds-component-avatar-md-font-size: var(--qds-typography-font-size-200);
370
+ --qds-component-avatar-lg-width: var(--qds-spacing-700); /** Square, from the spacing scale, whose steps these sizes match: there is no size step this small. */
371
+ --qds-component-avatar-lg-font-size: var(--qds-typography-font-size-400);
372
+ --qds-component-breadcrumbs-gap: var(--qds-spacing-200);
373
+ --qds-component-breadcrumbs-font-size: var(--qds-typography-font-size-200);
374
+ --qds-component-breadcrumbs-line-height: var(--qds-typography-line-height-normal);
375
+ --qds-component-pagination-gap: var(--qds-spacing-100);
376
+ --qds-component-pagination-min-width: var(--qds-spacing-600); /** A page button is at least this wide, so single digits make a square. */
377
+ --qds-component-pagination-height: var(--qds-spacing-600);
378
+ --qds-component-pagination-padding-inline: var(--qds-spacing-200);
379
+ --qds-component-pagination-font-size: var(--qds-typography-font-size-200);
380
+ --qds-component-pagination-font-weight: var(--qds-typography-font-weight-medium);
317
381
  --qds-semantic-typography-display-font-family: var(--qds-typography-font-family-sans); /** Largest type. Marketing headers and hero sections only. */
318
382
  --qds-semantic-typography-display-font-size: var(--qds-typography-font-size-900); /** Largest type. Marketing headers and hero sections only. */
319
383
  --qds-semantic-typography-display-font-weight: var(--qds-typography-font-weight-bold); /** Largest type. Marketing headers and hero sections only. */
@@ -501,6 +565,85 @@
501
565
  --qds-component-modal-color-background-rest: var(--qds-semantic-color-background-raised);
502
566
  --qds-component-modal-color-border-rest: var(--qds-semantic-color-border-subtle);
503
567
  --qds-component-modal-color-content-rest: var(--qds-semantic-color-content-default);
568
+ --qds-component-select-duration: var(--qds-semantic-animation-default);
569
+ --qds-component-select-label-color-content-rest: var(--qds-semantic-color-content-default);
570
+ --qds-component-select-label-color-content-disabled: var(--qds-semantic-color-content-subtle);
571
+ --qds-component-select-hint-color-content-rest: var(--qds-semantic-color-content-subtle);
572
+ --qds-component-select-error-color-content-rest: var(--qds-semantic-color-content-error);
573
+ --qds-component-select-control-border-radius: var(--qds-semantic-radius-default);
574
+ --qds-component-select-control-border-width: var(--qds-semantic-border-default);
575
+ --qds-component-select-control-color-background-rest: var(--qds-semantic-color-background-default);
576
+ --qds-component-select-control-color-background-disabled: var(--qds-semantic-color-background-subtle);
577
+ --qds-component-select-control-color-border-rest: var(--qds-semantic-color-border-control);
578
+ --qds-component-select-control-color-border-focus: var(--qds-semantic-color-border-primary);
579
+ --qds-component-select-control-color-border-disabled: var(--qds-semantic-color-border-subtle);
580
+ --qds-component-select-control-color-content-rest: var(--qds-semantic-color-content-default);
581
+ --qds-component-select-control-color-content-disabled: var(--qds-semantic-color-content-subtle);
582
+ --qds-component-select-invalid-color-border-rest: var(--qds-semantic-color-border-error);
583
+ --qds-component-select-placeholder-color-content-rest: var(--qds-semantic-color-content-subtle);
584
+ --qds-component-select-icon-color-content-rest: var(--qds-semantic-color-content-subtle);
585
+ --qds-component-alert-border-radius: var(--qds-semantic-radius-default);
586
+ --qds-component-alert-border-width: var(--qds-semantic-border-default);
587
+ --qds-component-alert-color-content-rest: var(--qds-semantic-color-content-default);
588
+ --qds-component-alert-info-color-background-rest: var(--qds-semantic-color-background-info);
589
+ --qds-component-alert-info-color-border-rest: var(--qds-semantic-color-border-info);
590
+ --qds-component-alert-info-color-content-rest: var(--qds-semantic-color-content-info);
591
+ --qds-component-alert-success-color-background-rest: var(--qds-semantic-color-background-success);
592
+ --qds-component-alert-success-color-border-rest: var(--qds-semantic-color-border-success);
593
+ --qds-component-alert-success-color-content-rest: var(--qds-semantic-color-content-success);
594
+ --qds-component-alert-warning-color-background-rest: var(--qds-semantic-color-background-warning);
595
+ --qds-component-alert-warning-color-border-rest: var(--qds-semantic-color-border-warning);
596
+ --qds-component-alert-warning-color-content-rest: var(--qds-semantic-color-content-warning);
597
+ --qds-component-alert-error-color-background-rest: var(--qds-semantic-color-background-error);
598
+ --qds-component-alert-error-color-border-rest: var(--qds-semantic-color-border-error);
599
+ --qds-component-alert-error-color-content-rest: var(--qds-semantic-color-content-error);
600
+ --qds-component-tooltip-border-radius: var(--qds-semantic-radius-subtle);
601
+ --qds-component-tooltip-duration: var(--qds-semantic-animation-default);
602
+ --qds-component-tooltip-color-background-rest: var(--qds-semantic-color-background-inverse);
603
+ --qds-component-tooltip-color-content-rest: var(--qds-semantic-color-content-inverse);
604
+ --qds-component-menu-border-radius: var(--qds-semantic-radius-default);
605
+ --qds-component-menu-border-width: var(--qds-semantic-border-default);
606
+ --qds-component-menu-box-shadow: var(--qds-semantic-elevation-default);
607
+ --qds-component-menu-color-background-rest: var(--qds-semantic-color-background-raised);
608
+ --qds-component-menu-color-border-rest: var(--qds-semantic-color-border-subtle);
609
+ --qds-component-menu-item-border-radius: var(--qds-semantic-radius-subtle);
610
+ --qds-component-menu-item-color-background-hover: var(--qds-semantic-color-background-subtle);
611
+ --qds-component-menu-item-color-content-rest: var(--qds-semantic-color-content-default);
612
+ --qds-component-menu-item-color-content-disabled: var(--qds-semantic-color-content-subtle);
613
+ --qds-component-menu-item-icon-color-content-rest: var(--qds-semantic-color-content-subtle);
614
+ --qds-component-menu-item-danger-color-content-rest: var(--qds-semantic-color-content-danger);
615
+ --qds-component-toast-border-radius: var(--qds-semantic-radius-default);
616
+ --qds-component-toast-border-width: var(--qds-semantic-border-default);
617
+ --qds-component-toast-box-shadow: var(--qds-semantic-elevation-default);
618
+ --qds-component-toast-duration: var(--qds-semantic-animation-subtle);
619
+ --qds-component-toast-color-background-rest: var(--qds-semantic-color-background-raised);
620
+ --qds-component-toast-color-border-rest: var(--qds-semantic-color-border-subtle);
621
+ --qds-component-toast-color-content-rest: var(--qds-semantic-color-content-default);
622
+ --qds-component-toast-info-color-content-rest: var(--qds-semantic-color-content-info);
623
+ --qds-component-toast-success-color-content-rest: var(--qds-semantic-color-content-success);
624
+ --qds-component-toast-warning-color-content-rest: var(--qds-semantic-color-content-warning);
625
+ --qds-component-toast-error-color-content-rest: var(--qds-semantic-color-content-error);
626
+ --qds-component-checkbox-group-label-color-content-rest: var(--qds-semantic-color-content-default);
627
+ --qds-component-checkbox-group-label-color-content-disabled: var(--qds-semantic-color-content-subtle);
628
+ --qds-component-checkbox-group-hint-color-content-rest: var(--qds-semantic-color-content-subtle);
629
+ --qds-component-checkbox-group-error-color-content-rest: var(--qds-semantic-color-content-error);
630
+ --qds-component-spinner-border-width: var(--qds-semantic-border-primary);
631
+ --qds-component-spinner-color-content-rest: var(--qds-semantic-color-content-primary-rest);
632
+ --qds-component-spinner-color-border-rest: var(--qds-semantic-color-border-subtle);
633
+ --qds-component-avatar-color-background-rest: var(--qds-semantic-color-background-neutral);
634
+ --qds-component-avatar-color-content-rest: var(--qds-semantic-color-content-default);
635
+ --qds-component-breadcrumbs-color-content-rest: var(--qds-semantic-color-content-primary-rest);
636
+ --qds-component-breadcrumbs-color-content-hover: var(--qds-semantic-color-content-primary-hover);
637
+ --qds-component-breadcrumbs-current-color-content-rest: var(--qds-semantic-color-content-default);
638
+ --qds-component-breadcrumbs-separator-color-content-rest: var(--qds-semantic-color-content-subtle);
639
+ --qds-component-pagination-border-radius: var(--qds-semantic-radius-default);
640
+ --qds-component-pagination-duration: var(--qds-semantic-animation-default);
641
+ --qds-component-pagination-color-background-hover: var(--qds-semantic-color-background-subtle);
642
+ --qds-component-pagination-color-content-rest: var(--qds-semantic-color-content-default);
643
+ --qds-component-pagination-color-content-disabled: var(--qds-semantic-color-content-subtle);
644
+ --qds-component-pagination-current-color-background-rest: var(--qds-semantic-color-background-primary-rest);
645
+ --qds-component-pagination-current-color-content-rest: var(--qds-semantic-color-content-inverse);
646
+ --qds-component-pagination-ellipsis-color-content-rest: var(--qds-semantic-color-content-subtle);
504
647
  }
505
648
 
506
649
  [data-theme="dark"] {
@@ -524,6 +667,7 @@
524
667
  --qds-semantic-color-background-info: var(--qds-color-blue-900);
525
668
  --qds-semantic-color-background-error: var(--qds-color-red-900);
526
669
  --qds-semantic-color-background-raised: var(--qds-color-neutral-800);
670
+ --qds-semantic-color-background-inverse: var(--qds-color-neutral-100);
527
671
  --qds-semantic-color-content-default: var(--qds-color-neutral-50);
528
672
  --qds-semantic-color-content-subtle: var(--qds-color-neutral-400);
529
673
  --qds-semantic-color-content-primary-rest: var(--qds-color-blue-300);
@@ -571,6 +715,7 @@
571
715
  --qds-semantic-color-background-info: var(--qds-color-blue-900);
572
716
  --qds-semantic-color-background-error: var(--qds-color-red-900);
573
717
  --qds-semantic-color-background-raised: var(--qds-color-neutral-800);
718
+ --qds-semantic-color-background-inverse: var(--qds-color-neutral-100);
574
719
  --qds-semantic-color-content-default: var(--qds-color-neutral-50);
575
720
  --qds-semantic-color-content-subtle: var(--qds-color-neutral-400);
576
721
  --qds-semantic-color-content-primary-rest: var(--qds-color-blue-300);
package/dist/css/qds.dark.css CHANGED
@@ -149,6 +149,9 @@
149
149
  --qds-size-md: 32rem; /** Container width: the default dialog. */
150
150
  --qds-size-lg: 48rem; /** Container width: wide dialogs and forms. */
151
151
  --qds-size-xl: 64rem; /** Container width: page-level content. */
152
+ --qds-size-icon-sm: 1rem; /** Icon: inline with small text, and inside compact controls. */
153
+ --qds-size-icon-md: 1.25rem; /** Icon: the default, beside body text and in buttons. */
154
+ --qds-size-icon-lg: 1.5rem; /** Icon: standalone, or leading a message. */
152
155
  --qds-opacity-0: 0;
153
156
  --qds-opacity-25: 0.25;
154
157
  --qds-opacity-50: 0.5;
@@ -174,6 +177,7 @@
174
177
  --qds-semantic-color-background-info: var(--qds-color-blue-900);
175
178
  --qds-semantic-color-background-error: var(--qds-color-red-900);
176
179
  --qds-semantic-color-background-raised: var(--qds-color-neutral-800);
180
+ --qds-semantic-color-background-inverse: var(--qds-color-neutral-100);
177
181
  --qds-semantic-color-content-default: var(--qds-color-neutral-50);
178
182
  --qds-semantic-color-content-subtle: var(--qds-color-neutral-400);
179
183
  --qds-semantic-color-content-primary-rest: var(--qds-color-blue-300);
@@ -314,6 +318,66 @@
314
318
  --qds-component-modal-sm-max-width: var(--qds-size-sm);
315
319
  --qds-component-modal-md-max-width: var(--qds-size-md);
316
320
  --qds-component-modal-lg-max-width: var(--qds-size-lg);
321
+ --qds-component-icon-sm-width: var(--qds-size-icon-sm);
322
+ --qds-component-icon-md-width: var(--qds-size-icon-md);
323
+ --qds-component-icon-lg-width: var(--qds-size-icon-lg);
324
+ --qds-component-select-gap: var(--qds-spacing-100);
325
+ --qds-component-select-label-font-size: var(--qds-typography-font-size-200);
326
+ --qds-component-select-label-font-weight: var(--qds-typography-font-weight-medium);
327
+ --qds-component-select-hint-font-size: var(--qds-typography-font-size-100);
328
+ --qds-component-select-control-padding-block: var(--qds-spacing-200);
329
+ --qds-component-select-control-padding-inline: var(--qds-spacing-300);
330
+ --qds-component-select-control-font-size: var(--qds-typography-font-size-200);
331
+ --qds-component-select-control-line-height: var(--qds-typography-line-height-normal);
332
+ --qds-component-alert-gap: var(--qds-spacing-300);
333
+ --qds-component-alert-padding: var(--qds-spacing-400);
334
+ --qds-component-alert-font-size: var(--qds-typography-font-size-200);
335
+ --qds-component-alert-line-height: var(--qds-typography-line-height-normal);
336
+ --qds-component-alert-heading-font-weight: var(--qds-typography-font-weight-semibold);
337
+ --qds-component-tooltip-gap: var(--qds-spacing-200);
338
+ --qds-component-tooltip-padding-block: var(--qds-spacing-100);
339
+ --qds-component-tooltip-padding-inline: var(--qds-spacing-200);
340
+ --qds-component-tooltip-max-width: var(--qds-size-sm);
341
+ --qds-component-tooltip-font-size: var(--qds-typography-font-size-100);
342
+ --qds-component-tooltip-line-height: var(--qds-typography-line-height-snug);
343
+ --qds-component-menu-gap: var(--qds-spacing-100);
344
+ --qds-component-menu-padding: var(--qds-spacing-100);
345
+ --qds-component-menu-item-gap: var(--qds-spacing-200);
346
+ --qds-component-menu-item-padding-block: var(--qds-spacing-200);
347
+ --qds-component-menu-item-padding-inline: var(--qds-spacing-300);
348
+ --qds-component-menu-item-font-size: var(--qds-typography-font-size-200);
349
+ --qds-component-menu-item-line-height: var(--qds-typography-line-height-normal);
350
+ --qds-component-toast-gap: var(--qds-spacing-300);
351
+ --qds-component-toast-padding: var(--qds-spacing-400);
352
+ --qds-component-toast-margin: var(--qds-spacing-400); /** Distance from the edge of the viewport to the stack of toasts. */
353
+ --qds-component-toast-max-width: var(--qds-size-sm);
354
+ --qds-component-toast-font-size: var(--qds-typography-font-size-200);
355
+ --qds-component-toast-line-height: var(--qds-typography-line-height-normal);
356
+ --qds-component-toast-heading-font-weight: var(--qds-typography-font-weight-semibold);
357
+ --qds-component-checkbox-group-gap: var(--qds-spacing-200);
358
+ --qds-component-checkbox-group-label-font-size: var(--qds-typography-font-size-200);
359
+ --qds-component-checkbox-group-label-font-weight: var(--qds-typography-font-weight-semibold);
360
+ --qds-component-checkbox-group-hint-font-size: var(--qds-typography-font-size-100);
361
+ --qds-component-spinner-sm-width: var(--qds-size-icon-sm);
362
+ --qds-component-spinner-md-width: var(--qds-size-icon-md);
363
+ --qds-component-spinner-lg-width: var(--qds-size-icon-lg);
364
+ --qds-component-avatar-border-radius: var(--qds-border-radius-full);
365
+ --qds-component-avatar-font-weight: var(--qds-typography-font-weight-medium);
366
+ --qds-component-avatar-sm-width: var(--qds-spacing-500); /** Square, from the spacing scale, whose steps these sizes match: there is no size step this small. */
367
+ --qds-component-avatar-sm-font-size: var(--qds-typography-font-size-100);
368
+ --qds-component-avatar-md-width: var(--qds-spacing-600); /** Square, from the spacing scale, whose steps these sizes match: there is no size step this small. */
369
+ --qds-component-avatar-md-font-size: var(--qds-typography-font-size-200);
370
+ --qds-component-avatar-lg-width: var(--qds-spacing-700); /** Square, from the spacing scale, whose steps these sizes match: there is no size step this small. */
371
+ --qds-component-avatar-lg-font-size: var(--qds-typography-font-size-400);
372
+ --qds-component-breadcrumbs-gap: var(--qds-spacing-200);
373
+ --qds-component-breadcrumbs-font-size: var(--qds-typography-font-size-200);
374
+ --qds-component-breadcrumbs-line-height: var(--qds-typography-line-height-normal);
375
+ --qds-component-pagination-gap: var(--qds-spacing-100);
376
+ --qds-component-pagination-min-width: var(--qds-spacing-600); /** A page button is at least this wide, so single digits make a square. */
377
+ --qds-component-pagination-height: var(--qds-spacing-600);
378
+ --qds-component-pagination-padding-inline: var(--qds-spacing-200);
379
+ --qds-component-pagination-font-size: var(--qds-typography-font-size-200);
380
+ --qds-component-pagination-font-weight: var(--qds-typography-font-weight-medium);
317
381
  --qds-semantic-typography-display-font-family: var(--qds-typography-font-family-sans); /** Largest type. Marketing headers and hero sections only. */
318
382
  --qds-semantic-typography-display-font-size: var(--qds-typography-font-size-900); /** Largest type. Marketing headers and hero sections only. */
319
383
  --qds-semantic-typography-display-font-weight: var(--qds-typography-font-weight-bold); /** Largest type. Marketing headers and hero sections only. */
@@ -501,4 +565,83 @@
501
565
  --qds-component-modal-color-background-rest: var(--qds-semantic-color-background-raised);
502
566
  --qds-component-modal-color-border-rest: var(--qds-semantic-color-border-subtle);
503
567
  --qds-component-modal-color-content-rest: var(--qds-semantic-color-content-default);
568
+ --qds-component-select-duration: var(--qds-semantic-animation-default);
569
+ --qds-component-select-label-color-content-rest: var(--qds-semantic-color-content-default);
570
+ --qds-component-select-label-color-content-disabled: var(--qds-semantic-color-content-subtle);
571
+ --qds-component-select-hint-color-content-rest: var(--qds-semantic-color-content-subtle);
572
+ --qds-component-select-error-color-content-rest: var(--qds-semantic-color-content-error);
573
+ --qds-component-select-control-border-radius: var(--qds-semantic-radius-default);
574
+ --qds-component-select-control-border-width: var(--qds-semantic-border-default);
575
+ --qds-component-select-control-color-background-rest: var(--qds-semantic-color-background-default);
576
+ --qds-component-select-control-color-background-disabled: var(--qds-semantic-color-background-subtle);
577
+ --qds-component-select-control-color-border-rest: var(--qds-semantic-color-border-control);
578
+ --qds-component-select-control-color-border-focus: var(--qds-semantic-color-border-primary);
579
+ --qds-component-select-control-color-border-disabled: var(--qds-semantic-color-border-subtle);
580
+ --qds-component-select-control-color-content-rest: var(--qds-semantic-color-content-default);
581
+ --qds-component-select-control-color-content-disabled: var(--qds-semantic-color-content-subtle);
582
+ --qds-component-select-invalid-color-border-rest: var(--qds-semantic-color-border-error);
583
+ --qds-component-select-placeholder-color-content-rest: var(--qds-semantic-color-content-subtle);
584
+ --qds-component-select-icon-color-content-rest: var(--qds-semantic-color-content-subtle);
585
+ --qds-component-alert-border-radius: var(--qds-semantic-radius-default);
586
+ --qds-component-alert-border-width: var(--qds-semantic-border-default);
587
+ --qds-component-alert-color-content-rest: var(--qds-semantic-color-content-default);
588
+ --qds-component-alert-info-color-background-rest: var(--qds-semantic-color-background-info);
589
+ --qds-component-alert-info-color-border-rest: var(--qds-semantic-color-border-info);
590
+ --qds-component-alert-info-color-content-rest: var(--qds-semantic-color-content-info);
591
+ --qds-component-alert-success-color-background-rest: var(--qds-semantic-color-background-success);
592
+ --qds-component-alert-success-color-border-rest: var(--qds-semantic-color-border-success);
593
+ --qds-component-alert-success-color-content-rest: var(--qds-semantic-color-content-success);
594
+ --qds-component-alert-warning-color-background-rest: var(--qds-semantic-color-background-warning);
595
+ --qds-component-alert-warning-color-border-rest: var(--qds-semantic-color-border-warning);
596
+ --qds-component-alert-warning-color-content-rest: var(--qds-semantic-color-content-warning);
597
+ --qds-component-alert-error-color-background-rest: var(--qds-semantic-color-background-error);
598
+ --qds-component-alert-error-color-border-rest: var(--qds-semantic-color-border-error);
599
+ --qds-component-alert-error-color-content-rest: var(--qds-semantic-color-content-error);
600
+ --qds-component-tooltip-border-radius: var(--qds-semantic-radius-subtle);
601
+ --qds-component-tooltip-duration: var(--qds-semantic-animation-default);
602
+ --qds-component-tooltip-color-background-rest: var(--qds-semantic-color-background-inverse);
603
+ --qds-component-tooltip-color-content-rest: var(--qds-semantic-color-content-inverse);
604
+ --qds-component-menu-border-radius: var(--qds-semantic-radius-default);
605
+ --qds-component-menu-border-width: var(--qds-semantic-border-default);
606
+ --qds-component-menu-box-shadow: var(--qds-semantic-elevation-default);
607
+ --qds-component-menu-color-background-rest: var(--qds-semantic-color-background-raised);
608
+ --qds-component-menu-color-border-rest: var(--qds-semantic-color-border-subtle);
609
+ --qds-component-menu-item-border-radius: var(--qds-semantic-radius-subtle);
610
+ --qds-component-menu-item-color-background-hover: var(--qds-semantic-color-background-subtle);
611
+ --qds-component-menu-item-color-content-rest: var(--qds-semantic-color-content-default);
612
+ --qds-component-menu-item-color-content-disabled: var(--qds-semantic-color-content-subtle);
613
+ --qds-component-menu-item-icon-color-content-rest: var(--qds-semantic-color-content-subtle);
614
+ --qds-component-menu-item-danger-color-content-rest: var(--qds-semantic-color-content-danger);
615
+ --qds-component-toast-border-radius: var(--qds-semantic-radius-default);
616
+ --qds-component-toast-border-width: var(--qds-semantic-border-default);
617
+ --qds-component-toast-box-shadow: var(--qds-semantic-elevation-default);
618
+ --qds-component-toast-duration: var(--qds-semantic-animation-subtle);
619
+ --qds-component-toast-color-background-rest: var(--qds-semantic-color-background-raised);
620
+ --qds-component-toast-color-border-rest: var(--qds-semantic-color-border-subtle);
621
+ --qds-component-toast-color-content-rest: var(--qds-semantic-color-content-default);
622
+ --qds-component-toast-info-color-content-rest: var(--qds-semantic-color-content-info);
623
+ --qds-component-toast-success-color-content-rest: var(--qds-semantic-color-content-success);
624
+ --qds-component-toast-warning-color-content-rest: var(--qds-semantic-color-content-warning);
625
+ --qds-component-toast-error-color-content-rest: var(--qds-semantic-color-content-error);
626
+ --qds-component-checkbox-group-label-color-content-rest: var(--qds-semantic-color-content-default);
627
+ --qds-component-checkbox-group-label-color-content-disabled: var(--qds-semantic-color-content-subtle);
628
+ --qds-component-checkbox-group-hint-color-content-rest: var(--qds-semantic-color-content-subtle);
629
+ --qds-component-checkbox-group-error-color-content-rest: var(--qds-semantic-color-content-error);
630
+ --qds-component-spinner-border-width: var(--qds-semantic-border-primary);
631
+ --qds-component-spinner-color-content-rest: var(--qds-semantic-color-content-primary-rest);
632
+ --qds-component-spinner-color-border-rest: var(--qds-semantic-color-border-subtle);
633
+ --qds-component-avatar-color-background-rest: var(--qds-semantic-color-background-neutral);
634
+ --qds-component-avatar-color-content-rest: var(--qds-semantic-color-content-default);
635
+ --qds-component-breadcrumbs-color-content-rest: var(--qds-semantic-color-content-primary-rest);
636
+ --qds-component-breadcrumbs-color-content-hover: var(--qds-semantic-color-content-primary-hover);
637
+ --qds-component-breadcrumbs-current-color-content-rest: var(--qds-semantic-color-content-default);
638
+ --qds-component-breadcrumbs-separator-color-content-rest: var(--qds-semantic-color-content-subtle);
639
+ --qds-component-pagination-border-radius: var(--qds-semantic-radius-default);
640
+ --qds-component-pagination-duration: var(--qds-semantic-animation-default);
641
+ --qds-component-pagination-color-background-hover: var(--qds-semantic-color-background-subtle);
642
+ --qds-component-pagination-color-content-rest: var(--qds-semantic-color-content-default);
643
+ --qds-component-pagination-color-content-disabled: var(--qds-semantic-color-content-subtle);
644
+ --qds-component-pagination-current-color-background-rest: var(--qds-semantic-color-background-primary-rest);
645
+ --qds-component-pagination-current-color-content-rest: var(--qds-semantic-color-content-inverse);
646
+ --qds-component-pagination-ellipsis-color-content-rest: var(--qds-semantic-color-content-subtle);
504
647
  }
package/dist/css/qds.light.css CHANGED
@@ -149,6 +149,9 @@
149
149
  --qds-size-md: 32rem; /** Container width: the default dialog. */
150
150
  --qds-size-lg: 48rem; /** Container width: wide dialogs and forms. */
151
151
  --qds-size-xl: 64rem; /** Container width: page-level content. */
152
+ --qds-size-icon-sm: 1rem; /** Icon: inline with small text, and inside compact controls. */
153
+ --qds-size-icon-md: 1.25rem; /** Icon: the default, beside body text and in buttons. */
154
+ --qds-size-icon-lg: 1.5rem; /** Icon: standalone, or leading a message. */
152
155
  --qds-opacity-0: 0;
153
156
  --qds-opacity-25: 0.25;
154
157
  --qds-opacity-50: 0.5;
@@ -174,6 +177,7 @@
174
177
  --qds-semantic-color-background-info: var(--qds-color-blue-100);
175
178
  --qds-semantic-color-background-error: var(--qds-color-red-100);
176
179
  --qds-semantic-color-background-raised: var(--qds-color-neutral-50);
180
+ --qds-semantic-color-background-inverse: var(--qds-color-neutral-900);
177
181
  --qds-semantic-color-content-default: var(--qds-color-neutral-900);
178
182
  --qds-semantic-color-content-subtle: var(--qds-color-neutral-500);
179
183
  --qds-semantic-color-content-primary-rest: var(--qds-color-blue-700);
@@ -314,6 +318,66 @@
314
318
  --qds-component-modal-sm-max-width: var(--qds-size-sm);
315
319
  --qds-component-modal-md-max-width: var(--qds-size-md);
316
320
  --qds-component-modal-lg-max-width: var(--qds-size-lg);
321
+ --qds-component-icon-sm-width: var(--qds-size-icon-sm);
322
+ --qds-component-icon-md-width: var(--qds-size-icon-md);
323
+ --qds-component-icon-lg-width: var(--qds-size-icon-lg);
324
+ --qds-component-select-gap: var(--qds-spacing-100);
325
+ --qds-component-select-label-font-size: var(--qds-typography-font-size-200);
326
+ --qds-component-select-label-font-weight: var(--qds-typography-font-weight-medium);
327
+ --qds-component-select-hint-font-size: var(--qds-typography-font-size-100);
328
+ --qds-component-select-control-padding-block: var(--qds-spacing-200);
329
+ --qds-component-select-control-padding-inline: var(--qds-spacing-300);
330
+ --qds-component-select-control-font-size: var(--qds-typography-font-size-200);
331
+ --qds-component-select-control-line-height: var(--qds-typography-line-height-normal);
332
+ --qds-component-alert-gap: var(--qds-spacing-300);
333
+ --qds-component-alert-padding: var(--qds-spacing-400);
334
+ --qds-component-alert-font-size: var(--qds-typography-font-size-200);
335
+ --qds-component-alert-line-height: var(--qds-typography-line-height-normal);
336
+ --qds-component-alert-heading-font-weight: var(--qds-typography-font-weight-semibold);
337
+ --qds-component-tooltip-gap: var(--qds-spacing-200);
338
+ --qds-component-tooltip-padding-block: var(--qds-spacing-100);
339
+ --qds-component-tooltip-padding-inline: var(--qds-spacing-200);
340
+ --qds-component-tooltip-max-width: var(--qds-size-sm);
341
+ --qds-component-tooltip-font-size: var(--qds-typography-font-size-100);
342
+ --qds-component-tooltip-line-height: var(--qds-typography-line-height-snug);
343
+ --qds-component-menu-gap: var(--qds-spacing-100);
344
+ --qds-component-menu-padding: var(--qds-spacing-100);
345
+ --qds-component-menu-item-gap: var(--qds-spacing-200);
346
+ --qds-component-menu-item-padding-block: var(--qds-spacing-200);
347
+ --qds-component-menu-item-padding-inline: var(--qds-spacing-300);
348
+ --qds-component-menu-item-font-size: var(--qds-typography-font-size-200);
349
+ --qds-component-menu-item-line-height: var(--qds-typography-line-height-normal);
350
+ --qds-component-toast-gap: var(--qds-spacing-300);
351
+ --qds-component-toast-padding: var(--qds-spacing-400);
352
+ --qds-component-toast-margin: var(--qds-spacing-400); /** Distance from the edge of the viewport to the stack of toasts. */
353
+ --qds-component-toast-max-width: var(--qds-size-sm);
354
+ --qds-component-toast-font-size: var(--qds-typography-font-size-200);
355
+ --qds-component-toast-line-height: var(--qds-typography-line-height-normal);
356
+ --qds-component-toast-heading-font-weight: var(--qds-typography-font-weight-semibold);
357
+ --qds-component-checkbox-group-gap: var(--qds-spacing-200);
358
+ --qds-component-checkbox-group-label-font-size: var(--qds-typography-font-size-200);
359
+ --qds-component-checkbox-group-label-font-weight: var(--qds-typography-font-weight-semibold);
360
+ --qds-component-checkbox-group-hint-font-size: var(--qds-typography-font-size-100);
361
+ --qds-component-spinner-sm-width: var(--qds-size-icon-sm);
362
+ --qds-component-spinner-md-width: var(--qds-size-icon-md);
363
+ --qds-component-spinner-lg-width: var(--qds-size-icon-lg);
364
+ --qds-component-avatar-border-radius: var(--qds-border-radius-full);
365
+ --qds-component-avatar-font-weight: var(--qds-typography-font-weight-medium);
366
+ --qds-component-avatar-sm-width: var(--qds-spacing-500); /** Square, from the spacing scale, whose steps these sizes match: there is no size step this small. */
367
+ --qds-component-avatar-sm-font-size: var(--qds-typography-font-size-100);
368
+ --qds-component-avatar-md-width: var(--qds-spacing-600); /** Square, from the spacing scale, whose steps these sizes match: there is no size step this small. */
369
+ --qds-component-avatar-md-font-size: var(--qds-typography-font-size-200);
370
+ --qds-component-avatar-lg-width: var(--qds-spacing-700); /** Square, from the spacing scale, whose steps these sizes match: there is no size step this small. */
371
+ --qds-component-avatar-lg-font-size: var(--qds-typography-font-size-400);
372
+ --qds-component-breadcrumbs-gap: var(--qds-spacing-200);
373
+ --qds-component-breadcrumbs-font-size: var(--qds-typography-font-size-200);
374
+ --qds-component-breadcrumbs-line-height: var(--qds-typography-line-height-normal);
375
+ --qds-component-pagination-gap: var(--qds-spacing-100);
376
+ --qds-component-pagination-min-width: var(--qds-spacing-600); /** A page button is at least this wide, so single digits make a square. */
377
+ --qds-component-pagination-height: var(--qds-spacing-600);
378
+ --qds-component-pagination-padding-inline: var(--qds-spacing-200);
379
+ --qds-component-pagination-font-size: var(--qds-typography-font-size-200);
380
+ --qds-component-pagination-font-weight: var(--qds-typography-font-weight-medium);
317
381
  --qds-semantic-typography-display-font-family: var(--qds-typography-font-family-sans); /** Largest type. Marketing headers and hero sections only. */
318
382
  --qds-semantic-typography-display-font-size: var(--qds-typography-font-size-900); /** Largest type. Marketing headers and hero sections only. */
319
383
  --qds-semantic-typography-display-font-weight: var(--qds-typography-font-weight-bold); /** Largest type. Marketing headers and hero sections only. */
@@ -501,4 +565,83 @@
501
565
  --qds-component-modal-color-background-rest: var(--qds-semantic-color-background-raised);
502
566
  --qds-component-modal-color-border-rest: var(--qds-semantic-color-border-subtle);
503
567
  --qds-component-modal-color-content-rest: var(--qds-semantic-color-content-default);
568
+ --qds-component-select-duration: var(--qds-semantic-animation-default);
569
+ --qds-component-select-label-color-content-rest: var(--qds-semantic-color-content-default);
570
+ --qds-component-select-label-color-content-disabled: var(--qds-semantic-color-content-subtle);
571
+ --qds-component-select-hint-color-content-rest: var(--qds-semantic-color-content-subtle);
572
+ --qds-component-select-error-color-content-rest: var(--qds-semantic-color-content-error);
573
+ --qds-component-select-control-border-radius: var(--qds-semantic-radius-default);
574
+ --qds-component-select-control-border-width: var(--qds-semantic-border-default);
575
+ --qds-component-select-control-color-background-rest: var(--qds-semantic-color-background-default);
576
+ --qds-component-select-control-color-background-disabled: var(--qds-semantic-color-background-subtle);
577
+ --qds-component-select-control-color-border-rest: var(--qds-semantic-color-border-control);
578
+ --qds-component-select-control-color-border-focus: var(--qds-semantic-color-border-primary);
579
+ --qds-component-select-control-color-border-disabled: var(--qds-semantic-color-border-subtle);
580
+ --qds-component-select-control-color-content-rest: var(--qds-semantic-color-content-default);
581
+ --qds-component-select-control-color-content-disabled: var(--qds-semantic-color-content-subtle);
582
+ --qds-component-select-invalid-color-border-rest: var(--qds-semantic-color-border-error);
583
+ --qds-component-select-placeholder-color-content-rest: var(--qds-semantic-color-content-subtle);
584
+ --qds-component-select-icon-color-content-rest: var(--qds-semantic-color-content-subtle);
585
+ --qds-component-alert-border-radius: var(--qds-semantic-radius-default);
586
+ --qds-component-alert-border-width: var(--qds-semantic-border-default);
587
+ --qds-component-alert-color-content-rest: var(--qds-semantic-color-content-default);
588
+ --qds-component-alert-info-color-background-rest: var(--qds-semantic-color-background-info);
589
+ --qds-component-alert-info-color-border-rest: var(--qds-semantic-color-border-info);
590
+ --qds-component-alert-info-color-content-rest: var(--qds-semantic-color-content-info);
591
+ --qds-component-alert-success-color-background-rest: var(--qds-semantic-color-background-success);
592
+ --qds-component-alert-success-color-border-rest: var(--qds-semantic-color-border-success);
593
+ --qds-component-alert-success-color-content-rest: var(--qds-semantic-color-content-success);
594
+ --qds-component-alert-warning-color-background-rest: var(--qds-semantic-color-background-warning);
595
+ --qds-component-alert-warning-color-border-rest: var(--qds-semantic-color-border-warning);
596
+ --qds-component-alert-warning-color-content-rest: var(--qds-semantic-color-content-warning);
597
+ --qds-component-alert-error-color-background-rest: var(--qds-semantic-color-background-error);
598
+ --qds-component-alert-error-color-border-rest: var(--qds-semantic-color-border-error);
599
+ --qds-component-alert-error-color-content-rest: var(--qds-semantic-color-content-error);
600
+ --qds-component-tooltip-border-radius: var(--qds-semantic-radius-subtle);
601
+ --qds-component-tooltip-duration: var(--qds-semantic-animation-default);
602
+ --qds-component-tooltip-color-background-rest: var(--qds-semantic-color-background-inverse);
603
+ --qds-component-tooltip-color-content-rest: var(--qds-semantic-color-content-inverse);
604
+ --qds-component-menu-border-radius: var(--qds-semantic-radius-default);
605
+ --qds-component-menu-border-width: var(--qds-semantic-border-default);
606
+ --qds-component-menu-box-shadow: var(--qds-semantic-elevation-default);
607
+ --qds-component-menu-color-background-rest: var(--qds-semantic-color-background-raised);
608
+ --qds-component-menu-color-border-rest: var(--qds-semantic-color-border-subtle);
609
+ --qds-component-menu-item-border-radius: var(--qds-semantic-radius-subtle);
610
+ --qds-component-menu-item-color-background-hover: var(--qds-semantic-color-background-subtle);
611
+ --qds-component-menu-item-color-content-rest: var(--qds-semantic-color-content-default);
612
+ --qds-component-menu-item-color-content-disabled: var(--qds-semantic-color-content-subtle);
613
+ --qds-component-menu-item-icon-color-content-rest: var(--qds-semantic-color-content-subtle);
614
+ --qds-component-menu-item-danger-color-content-rest: var(--qds-semantic-color-content-danger);
615
+ --qds-component-toast-border-radius: var(--qds-semantic-radius-default);
616
+ --qds-component-toast-border-width: var(--qds-semantic-border-default);
617
+ --qds-component-toast-box-shadow: var(--qds-semantic-elevation-default);
618
+ --qds-component-toast-duration: var(--qds-semantic-animation-subtle);
619
+ --qds-component-toast-color-background-rest: var(--qds-semantic-color-background-raised);
620
+ --qds-component-toast-color-border-rest: var(--qds-semantic-color-border-subtle);
621
+ --qds-component-toast-color-content-rest: var(--qds-semantic-color-content-default);
622
+ --qds-component-toast-info-color-content-rest: var(--qds-semantic-color-content-info);
623
+ --qds-component-toast-success-color-content-rest: var(--qds-semantic-color-content-success);
624
+ --qds-component-toast-warning-color-content-rest: var(--qds-semantic-color-content-warning);
625
+ --qds-component-toast-error-color-content-rest: var(--qds-semantic-color-content-error);
626
+ --qds-component-checkbox-group-label-color-content-rest: var(--qds-semantic-color-content-default);
627
+ --qds-component-checkbox-group-label-color-content-disabled: var(--qds-semantic-color-content-subtle);
628
+ --qds-component-checkbox-group-hint-color-content-rest: var(--qds-semantic-color-content-subtle);
629
+ --qds-component-checkbox-group-error-color-content-rest: var(--qds-semantic-color-content-error);
630
+ --qds-component-spinner-border-width: var(--qds-semantic-border-primary);
631
+ --qds-component-spinner-color-content-rest: var(--qds-semantic-color-content-primary-rest);
632
+ --qds-component-spinner-color-border-rest: var(--qds-semantic-color-border-subtle);
633
+ --qds-component-avatar-color-background-rest: var(--qds-semantic-color-background-neutral);
634
+ --qds-component-avatar-color-content-rest: var(--qds-semantic-color-content-default);
635
+ --qds-component-breadcrumbs-color-content-rest: var(--qds-semantic-color-content-primary-rest);
636
+ --qds-component-breadcrumbs-color-content-hover: var(--qds-semantic-color-content-primary-hover);
637
+ --qds-component-breadcrumbs-current-color-content-rest: var(--qds-semantic-color-content-default);
638
+ --qds-component-breadcrumbs-separator-color-content-rest: var(--qds-semantic-color-content-subtle);
639
+ --qds-component-pagination-border-radius: var(--qds-semantic-radius-default);
640
+ --qds-component-pagination-duration: var(--qds-semantic-animation-default);
641
+ --qds-component-pagination-color-background-hover: var(--qds-semantic-color-background-subtle);
642
+ --qds-component-pagination-color-content-rest: var(--qds-semantic-color-content-default);
643
+ --qds-component-pagination-color-content-disabled: var(--qds-semantic-color-content-subtle);
644
+ --qds-component-pagination-current-color-background-rest: var(--qds-semantic-color-background-primary-rest);
645
+ --qds-component-pagination-current-color-content-rest: var(--qds-semantic-color-content-inverse);
646
+ --qds-component-pagination-ellipsis-color-content-rest: var(--qds-semantic-color-content-subtle);
504
647
  }