@quieto/design-tokens 0.2.0 → 0.3.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 (11) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/dist/css/qds.css +82 -0
  3. package/dist/css/qds.dark.css +80 -0
  4. package/dist/css/qds.light.css +80 -0
  5. package/dist/js/tokens.js +5464 -2802
  6. package/dist/nomenclature.json +1 -0
  7. package/dist/tokens.json +5464 -2802
  8. package/docs/nomenclature.md +11 -1
  9. package/nomenclature.js +7 -2
  10. package/package.json +1 -1
  11. package/tokens.json +497 -3
package/CHANGELOG.md CHANGED
@@ -1,5 +1,11 @@
1
1
  # @quieto/design-tokens
2
2
 
3
+ ## 0.3.0
4
+
5
+ ### Minor Changes
6
+
7
+ - 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`.
8
+
3
9
  ## 0.2.0
4
10
 
5
11
  ### Minor Changes
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,35 @@
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);
317
350
  --qds-semantic-typography-display-font-family: var(--qds-typography-font-family-sans); /** Largest type. Marketing headers and hero sections only. */
318
351
  --qds-semantic-typography-display-font-size: var(--qds-typography-font-size-900); /** Largest type. Marketing headers and hero sections only. */
319
352
  --qds-semantic-typography-display-font-weight: var(--qds-typography-font-weight-bold); /** Largest type. Marketing headers and hero sections only. */
@@ -501,6 +534,53 @@
501
534
  --qds-component-modal-color-background-rest: var(--qds-semantic-color-background-raised);
502
535
  --qds-component-modal-color-border-rest: var(--qds-semantic-color-border-subtle);
503
536
  --qds-component-modal-color-content-rest: var(--qds-semantic-color-content-default);
537
+ --qds-component-select-duration: var(--qds-semantic-animation-default);
538
+ --qds-component-select-label-color-content-rest: var(--qds-semantic-color-content-default);
539
+ --qds-component-select-label-color-content-disabled: var(--qds-semantic-color-content-subtle);
540
+ --qds-component-select-hint-color-content-rest: var(--qds-semantic-color-content-subtle);
541
+ --qds-component-select-error-color-content-rest: var(--qds-semantic-color-content-error);
542
+ --qds-component-select-control-border-radius: var(--qds-semantic-radius-default);
543
+ --qds-component-select-control-border-width: var(--qds-semantic-border-default);
544
+ --qds-component-select-control-color-background-rest: var(--qds-semantic-color-background-default);
545
+ --qds-component-select-control-color-background-disabled: var(--qds-semantic-color-background-subtle);
546
+ --qds-component-select-control-color-border-rest: var(--qds-semantic-color-border-control);
547
+ --qds-component-select-control-color-border-focus: var(--qds-semantic-color-border-primary);
548
+ --qds-component-select-control-color-border-disabled: var(--qds-semantic-color-border-subtle);
549
+ --qds-component-select-control-color-content-rest: var(--qds-semantic-color-content-default);
550
+ --qds-component-select-control-color-content-disabled: var(--qds-semantic-color-content-subtle);
551
+ --qds-component-select-invalid-color-border-rest: var(--qds-semantic-color-border-error);
552
+ --qds-component-select-placeholder-color-content-rest: var(--qds-semantic-color-content-subtle);
553
+ --qds-component-select-icon-color-content-rest: var(--qds-semantic-color-content-subtle);
554
+ --qds-component-alert-border-radius: var(--qds-semantic-radius-default);
555
+ --qds-component-alert-border-width: var(--qds-semantic-border-default);
556
+ --qds-component-alert-color-content-rest: var(--qds-semantic-color-content-default);
557
+ --qds-component-alert-info-color-background-rest: var(--qds-semantic-color-background-info);
558
+ --qds-component-alert-info-color-border-rest: var(--qds-semantic-color-border-info);
559
+ --qds-component-alert-info-color-content-rest: var(--qds-semantic-color-content-info);
560
+ --qds-component-alert-success-color-background-rest: var(--qds-semantic-color-background-success);
561
+ --qds-component-alert-success-color-border-rest: var(--qds-semantic-color-border-success);
562
+ --qds-component-alert-success-color-content-rest: var(--qds-semantic-color-content-success);
563
+ --qds-component-alert-warning-color-background-rest: var(--qds-semantic-color-background-warning);
564
+ --qds-component-alert-warning-color-border-rest: var(--qds-semantic-color-border-warning);
565
+ --qds-component-alert-warning-color-content-rest: var(--qds-semantic-color-content-warning);
566
+ --qds-component-alert-error-color-background-rest: var(--qds-semantic-color-background-error);
567
+ --qds-component-alert-error-color-border-rest: var(--qds-semantic-color-border-error);
568
+ --qds-component-alert-error-color-content-rest: var(--qds-semantic-color-content-error);
569
+ --qds-component-tooltip-border-radius: var(--qds-semantic-radius-subtle);
570
+ --qds-component-tooltip-duration: var(--qds-semantic-animation-default);
571
+ --qds-component-tooltip-color-background-rest: var(--qds-semantic-color-background-inverse);
572
+ --qds-component-tooltip-color-content-rest: var(--qds-semantic-color-content-inverse);
573
+ --qds-component-menu-border-radius: var(--qds-semantic-radius-default);
574
+ --qds-component-menu-border-width: var(--qds-semantic-border-default);
575
+ --qds-component-menu-box-shadow: var(--qds-semantic-elevation-default);
576
+ --qds-component-menu-color-background-rest: var(--qds-semantic-color-background-raised);
577
+ --qds-component-menu-color-border-rest: var(--qds-semantic-color-border-subtle);
578
+ --qds-component-menu-item-border-radius: var(--qds-semantic-radius-subtle);
579
+ --qds-component-menu-item-color-background-hover: var(--qds-semantic-color-background-subtle);
580
+ --qds-component-menu-item-color-content-rest: var(--qds-semantic-color-content-default);
581
+ --qds-component-menu-item-color-content-disabled: var(--qds-semantic-color-content-subtle);
582
+ --qds-component-menu-item-icon-color-content-rest: var(--qds-semantic-color-content-subtle);
583
+ --qds-component-menu-item-danger-color-content-rest: var(--qds-semantic-color-content-danger);
504
584
  }
505
585
 
506
586
  [data-theme="dark"] {
@@ -524,6 +604,7 @@
524
604
  --qds-semantic-color-background-info: var(--qds-color-blue-900);
525
605
  --qds-semantic-color-background-error: var(--qds-color-red-900);
526
606
  --qds-semantic-color-background-raised: var(--qds-color-neutral-800);
607
+ --qds-semantic-color-background-inverse: var(--qds-color-neutral-100);
527
608
  --qds-semantic-color-content-default: var(--qds-color-neutral-50);
528
609
  --qds-semantic-color-content-subtle: var(--qds-color-neutral-400);
529
610
  --qds-semantic-color-content-primary-rest: var(--qds-color-blue-300);
@@ -571,6 +652,7 @@
571
652
  --qds-semantic-color-background-info: var(--qds-color-blue-900);
572
653
  --qds-semantic-color-background-error: var(--qds-color-red-900);
573
654
  --qds-semantic-color-background-raised: var(--qds-color-neutral-800);
655
+ --qds-semantic-color-background-inverse: var(--qds-color-neutral-100);
574
656
  --qds-semantic-color-content-default: var(--qds-color-neutral-50);
575
657
  --qds-semantic-color-content-subtle: var(--qds-color-neutral-400);
576
658
  --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,35 @@
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);
317
350
  --qds-semantic-typography-display-font-family: var(--qds-typography-font-family-sans); /** Largest type. Marketing headers and hero sections only. */
318
351
  --qds-semantic-typography-display-font-size: var(--qds-typography-font-size-900); /** Largest type. Marketing headers and hero sections only. */
319
352
  --qds-semantic-typography-display-font-weight: var(--qds-typography-font-weight-bold); /** Largest type. Marketing headers and hero sections only. */
@@ -501,4 +534,51 @@
501
534
  --qds-component-modal-color-background-rest: var(--qds-semantic-color-background-raised);
502
535
  --qds-component-modal-color-border-rest: var(--qds-semantic-color-border-subtle);
503
536
  --qds-component-modal-color-content-rest: var(--qds-semantic-color-content-default);
537
+ --qds-component-select-duration: var(--qds-semantic-animation-default);
538
+ --qds-component-select-label-color-content-rest: var(--qds-semantic-color-content-default);
539
+ --qds-component-select-label-color-content-disabled: var(--qds-semantic-color-content-subtle);
540
+ --qds-component-select-hint-color-content-rest: var(--qds-semantic-color-content-subtle);
541
+ --qds-component-select-error-color-content-rest: var(--qds-semantic-color-content-error);
542
+ --qds-component-select-control-border-radius: var(--qds-semantic-radius-default);
543
+ --qds-component-select-control-border-width: var(--qds-semantic-border-default);
544
+ --qds-component-select-control-color-background-rest: var(--qds-semantic-color-background-default);
545
+ --qds-component-select-control-color-background-disabled: var(--qds-semantic-color-background-subtle);
546
+ --qds-component-select-control-color-border-rest: var(--qds-semantic-color-border-control);
547
+ --qds-component-select-control-color-border-focus: var(--qds-semantic-color-border-primary);
548
+ --qds-component-select-control-color-border-disabled: var(--qds-semantic-color-border-subtle);
549
+ --qds-component-select-control-color-content-rest: var(--qds-semantic-color-content-default);
550
+ --qds-component-select-control-color-content-disabled: var(--qds-semantic-color-content-subtle);
551
+ --qds-component-select-invalid-color-border-rest: var(--qds-semantic-color-border-error);
552
+ --qds-component-select-placeholder-color-content-rest: var(--qds-semantic-color-content-subtle);
553
+ --qds-component-select-icon-color-content-rest: var(--qds-semantic-color-content-subtle);
554
+ --qds-component-alert-border-radius: var(--qds-semantic-radius-default);
555
+ --qds-component-alert-border-width: var(--qds-semantic-border-default);
556
+ --qds-component-alert-color-content-rest: var(--qds-semantic-color-content-default);
557
+ --qds-component-alert-info-color-background-rest: var(--qds-semantic-color-background-info);
558
+ --qds-component-alert-info-color-border-rest: var(--qds-semantic-color-border-info);
559
+ --qds-component-alert-info-color-content-rest: var(--qds-semantic-color-content-info);
560
+ --qds-component-alert-success-color-background-rest: var(--qds-semantic-color-background-success);
561
+ --qds-component-alert-success-color-border-rest: var(--qds-semantic-color-border-success);
562
+ --qds-component-alert-success-color-content-rest: var(--qds-semantic-color-content-success);
563
+ --qds-component-alert-warning-color-background-rest: var(--qds-semantic-color-background-warning);
564
+ --qds-component-alert-warning-color-border-rest: var(--qds-semantic-color-border-warning);
565
+ --qds-component-alert-warning-color-content-rest: var(--qds-semantic-color-content-warning);
566
+ --qds-component-alert-error-color-background-rest: var(--qds-semantic-color-background-error);
567
+ --qds-component-alert-error-color-border-rest: var(--qds-semantic-color-border-error);
568
+ --qds-component-alert-error-color-content-rest: var(--qds-semantic-color-content-error);
569
+ --qds-component-tooltip-border-radius: var(--qds-semantic-radius-subtle);
570
+ --qds-component-tooltip-duration: var(--qds-semantic-animation-default);
571
+ --qds-component-tooltip-color-background-rest: var(--qds-semantic-color-background-inverse);
572
+ --qds-component-tooltip-color-content-rest: var(--qds-semantic-color-content-inverse);
573
+ --qds-component-menu-border-radius: var(--qds-semantic-radius-default);
574
+ --qds-component-menu-border-width: var(--qds-semantic-border-default);
575
+ --qds-component-menu-box-shadow: var(--qds-semantic-elevation-default);
576
+ --qds-component-menu-color-background-rest: var(--qds-semantic-color-background-raised);
577
+ --qds-component-menu-color-border-rest: var(--qds-semantic-color-border-subtle);
578
+ --qds-component-menu-item-border-radius: var(--qds-semantic-radius-subtle);
579
+ --qds-component-menu-item-color-background-hover: var(--qds-semantic-color-background-subtle);
580
+ --qds-component-menu-item-color-content-rest: var(--qds-semantic-color-content-default);
581
+ --qds-component-menu-item-color-content-disabled: var(--qds-semantic-color-content-subtle);
582
+ --qds-component-menu-item-icon-color-content-rest: var(--qds-semantic-color-content-subtle);
583
+ --qds-component-menu-item-danger-color-content-rest: var(--qds-semantic-color-content-danger);
504
584
  }
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,35 @@
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);
317
350
  --qds-semantic-typography-display-font-family: var(--qds-typography-font-family-sans); /** Largest type. Marketing headers and hero sections only. */
318
351
  --qds-semantic-typography-display-font-size: var(--qds-typography-font-size-900); /** Largest type. Marketing headers and hero sections only. */
319
352
  --qds-semantic-typography-display-font-weight: var(--qds-typography-font-weight-bold); /** Largest type. Marketing headers and hero sections only. */
@@ -501,4 +534,51 @@
501
534
  --qds-component-modal-color-background-rest: var(--qds-semantic-color-background-raised);
502
535
  --qds-component-modal-color-border-rest: var(--qds-semantic-color-border-subtle);
503
536
  --qds-component-modal-color-content-rest: var(--qds-semantic-color-content-default);
537
+ --qds-component-select-duration: var(--qds-semantic-animation-default);
538
+ --qds-component-select-label-color-content-rest: var(--qds-semantic-color-content-default);
539
+ --qds-component-select-label-color-content-disabled: var(--qds-semantic-color-content-subtle);
540
+ --qds-component-select-hint-color-content-rest: var(--qds-semantic-color-content-subtle);
541
+ --qds-component-select-error-color-content-rest: var(--qds-semantic-color-content-error);
542
+ --qds-component-select-control-border-radius: var(--qds-semantic-radius-default);
543
+ --qds-component-select-control-border-width: var(--qds-semantic-border-default);
544
+ --qds-component-select-control-color-background-rest: var(--qds-semantic-color-background-default);
545
+ --qds-component-select-control-color-background-disabled: var(--qds-semantic-color-background-subtle);
546
+ --qds-component-select-control-color-border-rest: var(--qds-semantic-color-border-control);
547
+ --qds-component-select-control-color-border-focus: var(--qds-semantic-color-border-primary);
548
+ --qds-component-select-control-color-border-disabled: var(--qds-semantic-color-border-subtle);
549
+ --qds-component-select-control-color-content-rest: var(--qds-semantic-color-content-default);
550
+ --qds-component-select-control-color-content-disabled: var(--qds-semantic-color-content-subtle);
551
+ --qds-component-select-invalid-color-border-rest: var(--qds-semantic-color-border-error);
552
+ --qds-component-select-placeholder-color-content-rest: var(--qds-semantic-color-content-subtle);
553
+ --qds-component-select-icon-color-content-rest: var(--qds-semantic-color-content-subtle);
554
+ --qds-component-alert-border-radius: var(--qds-semantic-radius-default);
555
+ --qds-component-alert-border-width: var(--qds-semantic-border-default);
556
+ --qds-component-alert-color-content-rest: var(--qds-semantic-color-content-default);
557
+ --qds-component-alert-info-color-background-rest: var(--qds-semantic-color-background-info);
558
+ --qds-component-alert-info-color-border-rest: var(--qds-semantic-color-border-info);
559
+ --qds-component-alert-info-color-content-rest: var(--qds-semantic-color-content-info);
560
+ --qds-component-alert-success-color-background-rest: var(--qds-semantic-color-background-success);
561
+ --qds-component-alert-success-color-border-rest: var(--qds-semantic-color-border-success);
562
+ --qds-component-alert-success-color-content-rest: var(--qds-semantic-color-content-success);
563
+ --qds-component-alert-warning-color-background-rest: var(--qds-semantic-color-background-warning);
564
+ --qds-component-alert-warning-color-border-rest: var(--qds-semantic-color-border-warning);
565
+ --qds-component-alert-warning-color-content-rest: var(--qds-semantic-color-content-warning);
566
+ --qds-component-alert-error-color-background-rest: var(--qds-semantic-color-background-error);
567
+ --qds-component-alert-error-color-border-rest: var(--qds-semantic-color-border-error);
568
+ --qds-component-alert-error-color-content-rest: var(--qds-semantic-color-content-error);
569
+ --qds-component-tooltip-border-radius: var(--qds-semantic-radius-subtle);
570
+ --qds-component-tooltip-duration: var(--qds-semantic-animation-default);
571
+ --qds-component-tooltip-color-background-rest: var(--qds-semantic-color-background-inverse);
572
+ --qds-component-tooltip-color-content-rest: var(--qds-semantic-color-content-inverse);
573
+ --qds-component-menu-border-radius: var(--qds-semantic-radius-default);
574
+ --qds-component-menu-border-width: var(--qds-semantic-border-default);
575
+ --qds-component-menu-box-shadow: var(--qds-semantic-elevation-default);
576
+ --qds-component-menu-color-background-rest: var(--qds-semantic-color-background-raised);
577
+ --qds-component-menu-color-border-rest: var(--qds-semantic-color-border-subtle);
578
+ --qds-component-menu-item-border-radius: var(--qds-semantic-radius-subtle);
579
+ --qds-component-menu-item-color-background-hover: var(--qds-semantic-color-background-subtle);
580
+ --qds-component-menu-item-color-content-rest: var(--qds-semantic-color-content-default);
581
+ --qds-component-menu-item-color-content-disabled: var(--qds-semantic-color-content-subtle);
582
+ --qds-component-menu-item-icon-color-content-rest: var(--qds-semantic-color-content-subtle);
583
+ --qds-component-menu-item-danger-color-content-rest: var(--qds-semantic-color-content-danger);
504
584
  }