@hashicorp/design-system-components 4.24.2-rc-20251110175036 → 4.24.2-rc-20251124130751

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 (32) hide show
  1. package/declarations/components/hds/theme-context/index.d.ts +24 -0
  2. package/declarations/components/hds/theme-context/types.d.ts +19 -0
  3. package/declarations/components.d.ts +1 -0
  4. package/declarations/services/hds-theming.d.ts +3 -15
  5. package/declarations/template-registry.d.ts +3 -0
  6. package/dist/_app_/components/hds/theme-context.js +1 -0
  7. package/dist/components/hds/theme-context/index.js +45 -0
  8. package/dist/components/hds/theme-context/index.js.map +1 -0
  9. package/dist/components/hds/theme-context/types.js +27 -0
  10. package/dist/components/hds/theme-context/types.js.map +1 -0
  11. package/dist/components.js +1 -0
  12. package/dist/components.js.map +1 -1
  13. package/dist/services/hds-theming.js +17 -45
  14. package/dist/services/hds-theming.js.map +1 -1
  15. package/dist/services.js +1 -1
  16. package/dist/styles/@hashicorp/design-system-components-common.css +335 -303
  17. package/dist/styles/@hashicorp/design-system-components-common.css.map +1 -1
  18. package/dist/styles/@hashicorp/design-system-components-common.scss +1 -0
  19. package/dist/styles/@hashicorp/design-system-components.css +470 -303
  20. package/dist/styles/@hashicorp/design-system-components.css.map +1 -1
  21. package/dist/styles/components/badge-count.scss +26 -76
  22. package/dist/styles/components/badge.scss +26 -131
  23. package/dist/styles/components/button.scss +5 -0
  24. package/dist/styles/components/dropdown.scss +3 -5
  25. package/dist/styles/components/form/file-input.scss +2 -2
  26. package/dist/styles/components/form/key-value-inputs.scss +2 -4
  27. package/dist/styles/components/index.scss +1 -0
  28. package/dist/styles/components/theme-context.scss +12 -0
  29. package/dist/styles/mixins/_button.scss +82 -129
  30. package/dist/styles/mixins/_carbonization.scss +31 -0
  31. package/dist/styles/mixins/_interactive-dark-theme.scss +1 -1
  32. package/package.json +3 -2
package/dist/styles/@hashicorp/design-system-components-common.css CHANGED
@@ -512,21 +512,21 @@
512
512
  .hds-accordion-item__button--parent-contains-interactive {
513
513
  position: relative;
514
514
  display: flex;
515
- gap: 0.375rem;
515
+ gap: var(--token-button-gap);
516
516
  align-items: center;
517
517
  justify-content: center;
518
518
  width: auto;
519
519
  font-weight: var(--token-typography-font-weight-regular);
520
520
  font-family: var(--token-typography-font-stack-text);
521
521
  text-decoration: none;
522
- border: 1px solid transparent;
523
- border-radius: var(--token-border-radius-small);
522
+ border: var(--token-button-border-width) solid transparent;
523
+ border-radius: var(--token-button-border-radius);
524
524
  outline-style: solid;
525
525
  outline-color: transparent;
526
526
  isolation: isolate;
527
- color: var(--token-color-foreground-primary);
528
- background-color: var(--token-color-surface-faint);
529
- border-color: var(--token-color-border-strong);
527
+ color: var(--token-button-foreground-color-secondary-default);
528
+ background-color: var(--token-button-surface-color-secondary-default);
529
+ border-color: var(--token-button-border-color-secondary-default);
530
530
  box-shadow: var(--token-elevation-low-box-shadow);
531
531
  }
532
532
  .hds-accordion-item__button--parent-contains-interactive:focus, .hds-accordion-item__button--parent-contains-interactive.mock-focus {
@@ -534,33 +534,33 @@
534
534
  }
535
535
  .hds-accordion-item__button--parent-contains-interactive:focus::before, .hds-accordion-item__button--parent-contains-interactive.mock-focus::before {
536
536
  position: absolute;
537
- top: -4px;
538
- right: -4px;
539
- bottom: -4px;
540
- left: -4px;
537
+ top: calc(-1 * (var(--token-button-border-width) + var(--token-button-focus-border-width)));
538
+ right: calc(-1 * (var(--token-button-border-width) + var(--token-button-focus-border-width)));
539
+ bottom: calc(-1 * (var(--token-button-border-width) + var(--token-button-focus-border-width)));
540
+ left: calc(-1 * (var(--token-button-border-width) + var(--token-button-focus-border-width)));
541
541
  z-index: -1;
542
- border: 3px solid transparent;
543
- border-radius: calc(var(--token-border-radius-small) + 3px);
542
+ border: var(--token-button-focus-border-width) solid transparent;
543
+ border-radius: calc(var(--token-button-border-radius) + var(--token-button-focus-border-width));
544
544
  content: "";
545
545
  }
546
546
  .hds-accordion-item__button--parent-contains-interactive:hover, .hds-accordion-item__button--parent-contains-interactive.mock-hover {
547
- color: var(--token-color-foreground-primary);
548
- background-color: var(--token-color-surface-primary);
549
- border-color: var(--token-color-border-strong);
547
+ color: var(--token-button-foreground-color-secondary-hover);
548
+ background-color: var(--token-button-surface-color-secondary-hover);
549
+ border-color: var(--token-button-border-color-secondary-hover);
550
550
  cursor: pointer;
551
551
  }
552
552
  .hds-accordion-item__button--parent-contains-interactive:focus, .hds-accordion-item__button--parent-contains-interactive.mock-focus {
553
- color: var(--token-color-foreground-primary);
554
- background-color: var(--token-color-surface-faint);
555
- border-color: var(--token-color-focus-action-internal);
553
+ color: var(--token-button-foreground-color-secondary-focus);
554
+ background-color: var(--token-button-surface-color-secondary-focus);
555
+ border-color: var(--token-button-border-color-secondary-focus-internal);
556
556
  }
557
557
  .hds-accordion-item__button--parent-contains-interactive:focus::before, .hds-accordion-item__button--parent-contains-interactive.mock-focus::before {
558
- border-color: var(--token-color-focus-action-external);
558
+ border-color: var(--token-button-border-color-secondary-focus-external);
559
559
  }
560
560
  .hds-accordion-item__button--parent-contains-interactive:active, .hds-accordion-item__button--parent-contains-interactive.mock-active {
561
- color: var(--token-color-foreground-primary);
562
- background-color: var(--token-color-surface-interactive-active);
563
- border-color: var(--token-color-border-strong);
561
+ color: var(--token-button-foreground-color-secondary-active);
562
+ background-color: var(--token-button-surface-color-secondary-active);
563
+ border-color: var(--token-button-border-color-secondary-active);
564
564
  box-shadow: none;
565
565
  }
566
566
  .hds-accordion-item__button--parent-contains-interactive:active::before, .hds-accordion-item__button--parent-contains-interactive.mock-active::before {
@@ -1712,7 +1712,7 @@
1712
1712
  border-color: var(--token-color-palette-neutral-500);
1713
1713
  color: var(--token-color-foreground-high-contrast);
1714
1714
  background-color: var(--token-color-palette-neutral-700);
1715
- border-radius: var(--token-border-radius-small);
1715
+ border-radius: var(--token-button-border-radius);
1716
1716
  }
1717
1717
  .hds-app-header .hds-button:not(.hds-dropdown * *,
1718
1718
  .ember-basic-dropdown-trigger * *,
@@ -2140,7 +2140,7 @@
2140
2140
  cursor: pointer;
2141
2141
  color: var(--token-color-foreground-high-contrast);
2142
2142
  background-color: var(--token-color-palette-neutral-700);
2143
- border-radius: var(--token-border-radius-small);
2143
+ border-radius: var(--token-button-border-radius);
2144
2144
  display: flex;
2145
2145
  gap: 8px;
2146
2146
  align-items: center;
@@ -2628,20 +2628,12 @@
2628
2628
  * SPDX-License-Identifier: MPL-2.0
2629
2629
  */
2630
2630
  .hds-badge {
2631
- --token-color-surface-success: var(--token-color-palette-green-100);
2632
- --token-color-foreground-success-on-surface: var(--token-color-palette-green-400);
2633
- --token-color-surface-warning: var(--token-color-palette-amber-100);
2634
- --token-color-foreground-warning-on-surface: var(--token-color-palette-amber-400);
2635
- --token-color-surface-critical: var(--token-color-palette-red-100);
2636
- --token-color-foreground-critical-on-surface: var(--token-color-palette-red-400);
2637
- --token-color-surface-highlight: var(--token-color-palette-purple-100);
2638
- --token-color-foreground-highlight-on-surface: var(--token-color-palette-purple-400);
2639
2631
  display: inline-flex;
2640
2632
  align-items: center;
2641
2633
  max-width: 100%;
2642
2634
  vertical-align: middle;
2643
- border: 1px solid transparent;
2644
- border-radius: var(--token-border-radius-small);
2635
+ border-style: solid;
2636
+ border-width: var(--token-badge-border-width);
2645
2637
  }
2646
2638
 
2647
2639
  .hds-badge__icon {
@@ -2656,129 +2648,144 @@
2656
2648
  }
2657
2649
 
2658
2650
  .hds-badge--size-small {
2659
- gap: 0.25rem;
2660
- min-height: 1.25rem;
2661
- padding: calc(0.125rem - 1px) calc(0.375rem - 1px);
2651
+ gap: var(--token-badge-gap-small);
2652
+ min-height: var(--token-badge-height-small);
2653
+ padding: calc(var(--token-badge-padding-vertical-small) - var(--token-badge-border-width)) calc(var(--token-badge-padding-horizontal-small) - var(--token-badge-border-width));
2654
+ border-radius: var(--token-badge-border-radius-small);
2662
2655
  }
2663
2656
  .hds-badge--size-small .hds-badge__icon {
2664
- width: 0.75rem;
2665
- height: 0.75rem;
2657
+ width: var(--token-badge-icon-size-small);
2658
+ height: var(--token-badge-icon-size-small);
2666
2659
  }
2667
2660
  .hds-badge--size-small .hds-badge__text {
2668
- font-size: 0.8125rem;
2669
- line-height: 1.2308;
2661
+ font-size: var(--token-badge-typography-font-size-small);
2662
+ line-height: var(--token-badge-typography-line-height-small);
2670
2663
  }
2671
2664
 
2672
2665
  .hds-badge--size-medium {
2673
- gap: 0.25rem;
2674
- min-height: 1.5rem;
2675
- padding: calc(0.25rem - 1px) calc(0.5rem - 1px);
2666
+ gap: var(--token-badge-gap-medium);
2667
+ min-height: var(--token-badge-height-medium);
2668
+ padding: calc(var(--token-badge-padding-vertical-medium) - var(--token-badge-border-width)) calc(var(--token-badge-padding-horizontal-medium) - var(--token-badge-border-width));
2669
+ border-radius: var(--token-badge-border-radius-medium);
2676
2670
  }
2677
2671
  .hds-badge--size-medium .hds-badge__icon {
2678
- width: 1rem;
2679
- height: 1rem;
2672
+ width: var(--token-badge-icon-size-medium);
2673
+ height: var(--token-badge-icon-size-medium);
2680
2674
  }
2681
2675
  .hds-badge--size-medium .hds-badge__text {
2682
- font-size: 0.8125rem;
2683
- line-height: 1.2308;
2676
+ font-size: var(--token-badge-typography-font-size-medium);
2677
+ line-height: var(--token-badge-typography-line-height-medium);
2684
2678
  }
2685
2679
 
2686
2680
  .hds-badge--size-large {
2687
- gap: 0.375rem;
2688
- min-height: 2rem;
2689
- padding: calc(0.25rem - 1px) calc(0.5rem - 1px);
2681
+ gap: var(--token-badge-gap-large);
2682
+ min-height: var(--token-badge-height-large);
2683
+ padding: calc(var(--token-badge-padding-vertical-large) - var(--token-badge-border-width)) calc(var(--token-badge-padding-horizontal-large) - var(--token-badge-border-width));
2684
+ border-radius: var(--token-badge-border-radius-large);
2690
2685
  }
2691
2686
  .hds-badge--size-large .hds-badge__icon {
2692
- width: 1rem;
2693
- height: 1rem;
2687
+ width: var(--token-badge-icon-size-large);
2688
+ height: var(--token-badge-icon-size-large);
2694
2689
  }
2695
2690
  .hds-badge--size-large .hds-badge__text {
2696
- font-size: 1rem;
2697
- line-height: 1.5;
2691
+ font-size: var(--token-badge-typography-font-size-large);
2692
+ line-height: var(--token-badge-typography-line-height-large);
2698
2693
  }
2699
2694
 
2700
2695
  .hds-badge--color-neutral.hds-badge--type-filled {
2701
- color: var(--token-color-foreground-primary);
2702
- background-color: var(--token-color-palette-neutral-200);
2696
+ color: var(--token-badge-foreground-color-neutral-filled);
2697
+ background-color: var(--token-badge-surface-color-neutral-filled);
2698
+ border-color: transparent;
2703
2699
  }
2704
2700
  .hds-badge--color-neutral.hds-badge--type-inverted {
2705
- color: var(--token-color-foreground-high-contrast);
2706
- background-color: var(--token-color-palette-neutral-500);
2701
+ color: var(--token-badge-foreground-color-neutral-inverted);
2702
+ background-color: var(--token-badge-surface-color-neutral-inverted);
2703
+ border-color: transparent;
2707
2704
  }
2708
2705
  .hds-badge--color-neutral.hds-badge--type-outlined {
2709
- color: var(--token-color-foreground-primary);
2706
+ color: var(--token-badge-foreground-color-neutral-outlined);
2710
2707
  background-color: transparent;
2711
- border-color: var(--token-color-palette-neutral-500);
2708
+ border-color: var(--token-badge-foreground-color-neutral-outlined);
2712
2709
  }
2713
2710
 
2714
2711
  .hds-badge--color-neutral-dark-mode.hds-badge--type-filled {
2715
- color: var(--token-color-foreground-high-contrast);
2716
- background-color: var(--token-color-palette-neutral-500);
2712
+ color: var(--token-badge-foreground-color-neutral-dark-mode-filled);
2713
+ background-color: var(--token-badge-surface-color-neutral-dark-mode-filled);
2714
+ border-color: transparent;
2717
2715
  }
2718
2716
  .hds-badge--color-neutral-dark-mode.hds-badge--type-inverted {
2719
- color: var(--token-color-foreground-primary);
2720
- background-color: var(--token-color-surface-faint);
2717
+ color: var(--token-badge-foreground-color-neutral-dark-mode-inverted);
2718
+ background-color: var(--token-badge-surface-color-neutral-dark-mode-inverted);
2719
+ border-color: transparent;
2721
2720
  }
2722
2721
  .hds-badge--color-neutral-dark-mode.hds-badge--type-outlined {
2723
- color: var(--token-color-foreground-high-contrast);
2722
+ color: var(--token-badge-foreground-color-neutral-dark-mode-outlined);
2724
2723
  background-color: transparent;
2725
- border-color: var(--token-color-palette-neutral-50);
2724
+ border-color: var(--token-badge-foreground-color-neutral-dark-mode-outlined);
2726
2725
  }
2727
2726
 
2728
2727
  .hds-badge--color-highlight.hds-badge--type-filled {
2729
- color: var(--token-color-foreground-highlight-on-surface);
2730
- background-color: var(--token-color-surface-highlight);
2728
+ color: var(--token-badge-foreground-color-highlight-filled);
2729
+ background-color: var(--token-badge-surface-color-highlight-filled);
2730
+ border-color: transparent;
2731
2731
  }
2732
2732
  .hds-badge--color-highlight.hds-badge--type-inverted {
2733
- color: var(--token-color-foreground-high-contrast);
2734
- background-color: var(--token-color-palette-purple-200);
2733
+ color: var(--token-badge-foreground-color-highlight-inverted);
2734
+ background-color: var(--token-badge-surface-color-highlight-inverted);
2735
+ border-color: transparent;
2735
2736
  }
2736
2737
  .hds-badge--color-highlight.hds-badge--type-outlined {
2737
- color: var(--token-color-foreground-highlight);
2738
+ color: var(--token-badge-foreground-color-highlight-outlined);
2738
2739
  background-color: transparent;
2739
- border-color: var(--token-color-palette-purple-200);
2740
+ border-color: var(--token-badge-foreground-color-highlight-outlined);
2740
2741
  }
2741
2742
 
2742
2743
  .hds-badge--color-success.hds-badge--type-filled {
2743
- color: var(--token-color-foreground-success-on-surface);
2744
- background-color: var(--token-color-surface-success);
2744
+ color: var(--token-badge-foreground-color-success-filled);
2745
+ background-color: var(--token-badge-surface-color-success-filled);
2746
+ border-color: transparent;
2745
2747
  }
2746
2748
  .hds-badge--color-success.hds-badge--type-inverted {
2747
- color: var(--token-color-foreground-high-contrast);
2748
- background-color: var(--token-color-palette-green-200);
2749
+ color: var(--token-badge-foreground-color-success-inverted);
2750
+ background-color: var(--token-badge-surface-color-success-inverted);
2751
+ border-color: transparent;
2749
2752
  }
2750
2753
  .hds-badge--color-success.hds-badge--type-outlined {
2751
- color: var(--token-color-foreground-success);
2754
+ color: var(--token-badge-foreground-color-success-outlined);
2752
2755
  background-color: transparent;
2753
- border-color: var(--token-color-palette-green-200);
2756
+ border-color: var(--token-badge-foreground-color-success-outlined);
2754
2757
  }
2755
2758
 
2756
2759
  .hds-badge--color-warning.hds-badge--type-filled {
2757
- color: var(--token-color-foreground-warning-on-surface);
2758
- background-color: var(--token-color-surface-warning);
2760
+ color: var(--token-badge-foreground-color-warning-filled);
2761
+ background-color: var(--token-badge-surface-color-warning-filled);
2762
+ border-color: transparent;
2759
2763
  }
2760
2764
  .hds-badge--color-warning.hds-badge--type-inverted {
2761
- color: var(--token-color-foreground-high-contrast);
2762
- background-color: var(--token-color-palette-amber-200);
2765
+ color: var(--token-badge-foreground-color-warning-inverted);
2766
+ background-color: var(--token-badge-surface-color-warning-inverted);
2767
+ border-color: transparent;
2763
2768
  }
2764
2769
  .hds-badge--color-warning.hds-badge--type-outlined {
2765
- color: var(--token-color-foreground-warning);
2770
+ color: var(--token-badge-foreground-color-warning-outlined);
2766
2771
  background-color: transparent;
2767
- border-color: var(--token-color-palette-amber-200);
2772
+ border-color: var(--token-badge-foreground-color-warning-outlined);
2768
2773
  }
2769
2774
 
2770
2775
  .hds-badge--color-critical.hds-badge--type-filled {
2771
- color: var(--token-color-foreground-critical-on-surface);
2772
- background-color: var(--token-color-surface-critical);
2776
+ color: var(--token-badge-foreground-color-critical-filled);
2777
+ background-color: var(--token-badge-surface-color-critical-filled);
2778
+ border-color: transparent;
2773
2779
  }
2774
2780
  .hds-badge--color-critical.hds-badge--type-inverted {
2775
- color: var(--token-color-foreground-high-contrast);
2776
- background-color: var(--token-color-palette-red-200);
2781
+ color: var(--token-badge-foreground-color-critical-inverted);
2782
+ background-color: var(--token-badge-surface-color-critical-inverted);
2783
+ border-color: transparent;
2777
2784
  }
2778
2785
  .hds-badge--color-critical.hds-badge--type-outlined {
2779
- color: var(--token-color-foreground-critical);
2786
+ color: var(--token-badge-foreground-color-critical-outlined);
2780
2787
  background-color: transparent;
2781
- border-color: var(--token-color-palette-red-200);
2788
+ border-color: var(--token-badge-foreground-color-critical-outlined);
2782
2789
  }
2783
2790
 
2784
2791
  /**
@@ -2791,59 +2798,64 @@
2791
2798
  max-width: 100%;
2792
2799
  font-weight: var(--token-typography-font-weight-medium);
2793
2800
  font-family: var(--token-typography-font-stack-text);
2794
- border: 1px solid transparent;
2801
+ border-style: solid;
2802
+ border-width: var(--token-badge-border-width);
2795
2803
  }
2796
2804
 
2797
2805
  .hds-badge-count--size-small {
2798
- min-height: 1.25rem;
2799
- padding: calc(0.125rem - 1px) calc(0.5rem - 1px);
2800
- font-size: 0.8125rem;
2801
- line-height: 1.2308;
2802
- border-radius: 0.625rem;
2806
+ min-height: var(--token-badge-height-small);
2807
+ padding: calc(var(--token-badge-padding-vertical-small) - var(--token-badge-border-width)) calc(var(--token-badge-count-padding-horizontal-small) - var(--token-badge-border-width));
2808
+ font-size: var(--token-badge-typography-font-size-small);
2809
+ line-height: var(--token-badge-typography-line-height-small);
2810
+ border-radius: calc(var(--token-badge-height-small) / 2);
2803
2811
  }
2804
2812
 
2805
2813
  .hds-badge-count--size-medium {
2806
- min-height: 1.5rem;
2807
- padding: calc(0.25rem - 1px) calc(0.75rem - 1px);
2808
- font-size: 0.8125rem;
2809
- line-height: 1.2308;
2810
- border-radius: 0.75rem;
2814
+ min-height: var(--token-badge-height-medium);
2815
+ padding: calc(var(--token-badge-padding-vertical-medium) - var(--token-badge-border-width)) calc(var(--token-badge-count-padding-horizontal-medium) - var(--token-badge-border-width));
2816
+ font-size: var(--token-badge-typography-font-size-medium);
2817
+ line-height: var(--token-badge-typography-line-height-medium);
2818
+ border-radius: calc(var(--token-badge-height-medium) / 2);
2811
2819
  }
2812
2820
 
2813
2821
  .hds-badge-count--size-large {
2814
- min-height: 2rem;
2815
- padding: calc(0.25rem - 1px) calc(0.875rem - 1px);
2816
- font-size: 1rem;
2817
- line-height: 1.5;
2818
- border-radius: 1rem;
2822
+ min-height: var(--token-badge-height-large);
2823
+ padding: calc(var(--token-badge-padding-vertical-large) - var(--token-badge-border-width)) calc(var(--token-badge-count-padding-horizontal-large) - var(--token-badge-border-width));
2824
+ font-size: var(--token-badge-typography-font-size-large);
2825
+ line-height: var(--token-badge-typography-line-height-large);
2826
+ border-radius: calc(var(--token-badge-height-large) / 2);
2819
2827
  }
2820
2828
 
2821
2829
  .hds-badge-count--color-neutral.hds-badge-count--type-filled {
2822
- color: var(--token-color-foreground-primary);
2823
- background-color: var(--token-color-palette-neutral-200);
2830
+ color: var(--token-badge-foreground-color-neutral-filled);
2831
+ background-color: var(--token-badge-surface-color-neutral-filled);
2832
+ border-color: transparent;
2824
2833
  }
2825
2834
  .hds-badge-count--color-neutral.hds-badge-count--type-inverted {
2826
- color: var(--token-color-foreground-high-contrast);
2827
- background-color: var(--token-color-palette-neutral-500);
2835
+ color: var(--token-badge-foreground-color-neutral-inverted);
2836
+ background-color: var(--token-badge-surface-color-neutral-inverted);
2837
+ border-color: transparent;
2828
2838
  }
2829
2839
  .hds-badge-count--color-neutral.hds-badge-count--type-outlined {
2830
- color: var(--token-color-foreground-primary);
2840
+ color: var(--token-badge-foreground-color-neutral-outlined);
2831
2841
  background-color: transparent;
2832
- border-color: var(--token-color-palette-neutral-500);
2842
+ border-color: var(--token-badge-foreground-color-neutral-outlined);
2833
2843
  }
2834
2844
 
2835
2845
  .hds-badge-count--color-neutral-dark-mode.hds-badge-count--type-filled {
2836
- color: var(--token-color-foreground-high-contrast);
2837
- background-color: var(--token-color-palette-neutral-500);
2846
+ color: var(--token-badge-foreground-color-neutral-dark-mode-filled);
2847
+ background-color: var(--token-badge-surface-color-neutral-dark-mode-filled);
2848
+ border-color: transparent;
2838
2849
  }
2839
2850
  .hds-badge-count--color-neutral-dark-mode.hds-badge-count--type-inverted {
2840
- color: var(--token-color-foreground-primary);
2841
- background-color: var(--token-color-surface-faint);
2851
+ color: var(--token-badge-foreground-color-neutral-dark-mode-inverted);
2852
+ background-color: var(--token-badge-surface-color-neutral-dark-mode-inverted);
2853
+ border-color: transparent;
2842
2854
  }
2843
2855
  .hds-badge-count--color-neutral-dark-mode.hds-badge-count--type-outlined {
2844
- color: var(--token-color-foreground-high-contrast);
2856
+ color: var(--token-badge-foreground-color-neutral-dark-mode-outlined);
2845
2857
  background-color: transparent;
2846
- border-color: var(--token-color-palette-neutral-50);
2858
+ border-color: var(--token-badge-foreground-color-neutral-dark-mode-outlined);
2847
2859
  }
2848
2860
 
2849
2861
  /**
@@ -3034,18 +3046,22 @@
3034
3046
  * Copyright (c) HashiCorp, Inc.
3035
3047
  * SPDX-License-Identifier: MPL-2.0
3036
3048
  */
3049
+ /**
3050
+ * Copyright (c) HashiCorp, Inc.
3051
+ * SPDX-License-Identifier: MPL-2.0
3052
+ */
3037
3053
  .hds-button {
3038
3054
  position: relative;
3039
3055
  display: flex;
3040
- gap: 0.375rem;
3056
+ gap: var(--token-button-gap);
3041
3057
  align-items: center;
3042
3058
  justify-content: center;
3043
3059
  width: auto;
3044
3060
  font-weight: var(--token-typography-font-weight-regular);
3045
3061
  font-family: var(--token-typography-font-stack-text);
3046
3062
  text-decoration: none;
3047
- border: 1px solid transparent;
3048
- border-radius: var(--token-border-radius-small);
3063
+ border: var(--token-button-border-width) solid transparent;
3064
+ border-radius: var(--token-button-border-radius);
3049
3065
  outline-style: solid;
3050
3066
  outline-color: transparent;
3051
3067
  isolation: isolate;
@@ -3058,9 +3074,9 @@ a.hds-button:hover, a.hds-button:focus, a.hds-button:active, a.hds-button.mock-h
3058
3074
  }
3059
3075
 
3060
3076
  .hds-button:disabled, .hds-button[disabled], .hds-button.mock-disabled, .hds-button:disabled:focus, .hds-button[disabled]:focus, .hds-button.mock-disabled:focus, .hds-button:disabled:hover, .hds-button[disabled]:hover, .hds-button.mock-disabled:hover {
3061
- color: var(--token-color-foreground-disabled);
3062
- background-color: var(--token-color-surface-faint);
3063
- border-color: var(--token-color-border-primary);
3077
+ color: var(--token-button-foreground-color-disabled);
3078
+ background-color: var(--token-button-surface-color-disabled);
3079
+ border-color: var(--token-button-border-color-disabled);
3064
3080
  box-shadow: none;
3065
3081
  cursor: not-allowed;
3066
3082
  }
@@ -3068,6 +3084,13 @@ a.hds-button:hover, a.hds-button:focus, a.hds-button:active, a.hds-button.mock-h
3068
3084
  width: 100%;
3069
3085
  max-width: 100%;
3070
3086
  }
3087
+ .hds-mode-cds-g0 .hds-button.hds-button--width-full,
3088
+ .hds-mode-cds-g10 .hds-button.hds-button--width-full,
3089
+ .hds-mode-cds-g90 .hds-button.hds-button--width-full,
3090
+ .hds-mode-cds-g100 .hds-button.hds-button--width-full {
3091
+ justify-content: space-between;
3092
+ }
3093
+
3071
3094
  .hds-button.hds-button--width-full .hds-button__text {
3072
3095
  flex: 0 0 auto;
3073
3096
  }
@@ -3076,13 +3099,13 @@ a.hds-button:hover, a.hds-button:focus, a.hds-button:active, a.hds-button.mock-h
3076
3099
  }
3077
3100
  .hds-button:focus::before, .hds-button.mock-focus::before {
3078
3101
  position: absolute;
3079
- top: -4px;
3080
- right: -4px;
3081
- bottom: -4px;
3082
- left: -4px;
3102
+ top: calc(-1 * (var(--token-button-border-width) + var(--token-button-focus-border-width)));
3103
+ right: calc(-1 * (var(--token-button-border-width) + var(--token-button-focus-border-width)));
3104
+ bottom: calc(-1 * (var(--token-button-border-width) + var(--token-button-focus-border-width)));
3105
+ left: calc(-1 * (var(--token-button-border-width) + var(--token-button-focus-border-width)));
3083
3106
  z-index: -1;
3084
- border: 3px solid transparent;
3085
- border-radius: calc(var(--token-border-radius-small) + 3px);
3107
+ border: var(--token-button-focus-border-width) solid transparent;
3108
+ border-radius: calc(var(--token-button-border-radius) + var(--token-button-focus-border-width));
3086
3109
  content: "";
3087
3110
  }
3088
3111
 
@@ -3097,34 +3120,34 @@ a.hds-button:hover, a.hds-button:focus, a.hds-button:active, a.hds-button.mock-h
3097
3120
  }
3098
3121
 
3099
3122
  .hds-button--color-primary {
3100
- color: var(--token-color-foreground-high-contrast);
3101
- background-color: var(--token-color-palette-blue-200);
3102
- border-color: var(--token-color-palette-blue-300);
3123
+ color: var(--token-button-foreground-color-primary-default);
3124
+ background-color: var(--token-button-surface-color-primary-default);
3125
+ border-color: var(--token-button-border-color-primary-default);
3103
3126
  box-shadow: var(--token-elevation-low-box-shadow);
3104
3127
  }
3105
3128
  .hds-button--color-primary:hover, .hds-button--color-primary.mock-hover {
3106
- color: var(--token-color-foreground-high-contrast);
3107
- background-color: var(--token-color-palette-blue-300);
3108
- border-color: var(--token-color-palette-blue-400);
3129
+ color: var(--token-button-foreground-color-primary-hover);
3130
+ background-color: var(--token-button-surface-color-primary-hover);
3131
+ border-color: var(--token-button-border-color-primary-hover);
3109
3132
  cursor: pointer;
3110
3133
  }
3111
3134
  .hds-button--color-primary:focus, .hds-button--color-primary.mock-focus {
3112
- color: var(--token-color-foreground-high-contrast);
3113
- background-color: var(--token-color-palette-blue-200);
3114
- border-color: var(--token-color-focus-action-internal);
3135
+ color: var(--token-button-foreground-color-primary-focus);
3136
+ background-color: var(--token-button-surface-color-primary-focus);
3137
+ border-color: var(--token-button-border-color-primary-focus-internal);
3115
3138
  }
3116
3139
  .hds-button--color-primary:focus::before, .hds-button--color-primary.mock-focus::before {
3117
- top: -6px;
3118
- right: -6px;
3119
- bottom: -6px;
3120
- left: -6px;
3121
- border-color: var(--token-color-focus-action-external);
3122
- border-radius: calc(var(--token-border-radius-small) + 3px + 2px);
3140
+ top: calc(-1 * (var(--token-button-border-width) + var(--token-button-focus-border-width) + 2px));
3141
+ right: calc(-1 * (var(--token-button-border-width) + var(--token-button-focus-border-width) + 2px));
3142
+ bottom: calc(-1 * (var(--token-button-border-width) + var(--token-button-focus-border-width) + 2px));
3143
+ left: calc(-1 * (var(--token-button-border-width) + var(--token-button-focus-border-width) + 2px));
3144
+ border-color: var(--token-button-border-color-primary-focus-external);
3145
+ border-radius: calc(var(--token-button-border-radius) + var(--token-button-focus-border-width) + 2px);
3123
3146
  }
3124
3147
  .hds-button--color-primary:active, .hds-button--color-primary.mock-active {
3125
- color: var(--token-color-foreground-high-contrast);
3126
- background-color: var(--token-color-palette-blue-400);
3127
- border-color: var(--token-color-palette-blue-400);
3148
+ color: var(--token-button-foreground-color-primary-active);
3149
+ background-color: var(--token-button-surface-color-primary-active);
3150
+ border-color: var(--token-button-border-color-primary-active);
3128
3151
  box-shadow: none;
3129
3152
  }
3130
3153
  .hds-button--color-primary:active::before, .hds-button--color-primary.mock-active::before {
@@ -3132,29 +3155,29 @@ a.hds-button:hover, a.hds-button:focus, a.hds-button:active, a.hds-button.mock-h
3132
3155
  }
3133
3156
 
3134
3157
  .hds-button--color-secondary {
3135
- color: var(--token-color-foreground-primary);
3136
- background-color: var(--token-color-surface-faint);
3137
- border-color: var(--token-color-border-strong);
3158
+ color: var(--token-button-foreground-color-secondary-default);
3159
+ background-color: var(--token-button-surface-color-secondary-default);
3160
+ border-color: var(--token-button-border-color-secondary-default);
3138
3161
  box-shadow: var(--token-elevation-low-box-shadow);
3139
3162
  }
3140
3163
  .hds-button--color-secondary:hover, .hds-button--color-secondary.mock-hover {
3141
- color: var(--token-color-foreground-primary);
3142
- background-color: var(--token-color-surface-primary);
3143
- border-color: var(--token-color-border-strong);
3164
+ color: var(--token-button-foreground-color-secondary-hover);
3165
+ background-color: var(--token-button-surface-color-secondary-hover);
3166
+ border-color: var(--token-button-border-color-secondary-hover);
3144
3167
  cursor: pointer;
3145
3168
  }
3146
3169
  .hds-button--color-secondary:focus, .hds-button--color-secondary.mock-focus {
3147
- color: var(--token-color-foreground-primary);
3148
- background-color: var(--token-color-surface-faint);
3149
- border-color: var(--token-color-focus-action-internal);
3170
+ color: var(--token-button-foreground-color-secondary-focus);
3171
+ background-color: var(--token-button-surface-color-secondary-focus);
3172
+ border-color: var(--token-button-border-color-secondary-focus-internal);
3150
3173
  }
3151
3174
  .hds-button--color-secondary:focus::before, .hds-button--color-secondary.mock-focus::before {
3152
- border-color: var(--token-color-focus-action-external);
3175
+ border-color: var(--token-button-border-color-secondary-focus-external);
3153
3176
  }
3154
3177
  .hds-button--color-secondary:active, .hds-button--color-secondary.mock-active {
3155
- color: var(--token-color-foreground-primary);
3156
- background-color: var(--token-color-surface-interactive-active);
3157
- border-color: var(--token-color-border-strong);
3178
+ color: var(--token-button-foreground-color-secondary-active);
3179
+ background-color: var(--token-button-surface-color-secondary-active);
3180
+ border-color: var(--token-button-border-color-secondary-active);
3158
3181
  box-shadow: none;
3159
3182
  }
3160
3183
  .hds-button--color-secondary:active::before, .hds-button--color-secondary.mock-active::before {
@@ -3162,27 +3185,28 @@ a.hds-button:hover, a.hds-button:focus, a.hds-button:active, a.hds-button.mock-h
3162
3185
  }
3163
3186
 
3164
3187
  .hds-button--color-tertiary {
3165
- color: var(--token-color-foreground-action);
3166
- background-color: transparent;
3167
- border-color: transparent;
3188
+ color: var(--token-button-foreground-color-tertiary-default);
3189
+ background-color: var(--token-button-surface-color-tertiary-default);
3190
+ border-color: var(--token-button-border-color-tertiary-default);
3168
3191
  }
3169
3192
  .hds-button--color-tertiary:hover, .hds-button--color-tertiary.mock-hover {
3170
- color: var(--token-color-foreground-action-hover);
3171
- background-color: var(--token-color-surface-primary);
3172
- border-color: var(--token-color-border-strong);
3193
+ color: var(--token-button-foreground-color-tertiary-hover);
3194
+ background-color: var(--token-button-surface-color-tertiary-hover);
3195
+ border-color: var(--token-button-border-color-tertiary-hover);
3173
3196
  cursor: pointer;
3174
3197
  }
3175
3198
  .hds-button--color-tertiary:focus, .hds-button--color-tertiary.mock-focus {
3176
- color: var(--token-color-foreground-action);
3177
- border-color: var(--token-color-focus-action-internal);
3199
+ color: var(--token-button-foreground-color-tertiary-focus);
3200
+ background-color: var(--token-button-surface-color-tertiary-focus);
3201
+ border-color: var(--token-button-border-color-tertiary-focus-internal);
3178
3202
  }
3179
3203
  .hds-button--color-tertiary:focus::before, .hds-button--color-tertiary.mock-focus::before {
3180
- border-color: var(--token-color-focus-action-external);
3204
+ border-color: var(--token-button-border-color-tertiary-focus-external);
3181
3205
  }
3182
3206
  .hds-button--color-tertiary:active, .hds-button--color-tertiary.mock-active {
3183
- color: var(--token-color-foreground-action-active);
3184
- background-color: var(--token-color-surface-interactive-active);
3185
- border-color: var(--token-color-border-strong);
3207
+ color: var(--token-button-foreground-color-tertiary-active);
3208
+ background-color: var(--token-button-surface-color-tertiary-active);
3209
+ border-color: var(--token-button-border-color-tertiary-active);
3186
3210
  box-shadow: none;
3187
3211
  }
3188
3212
  .hds-button--color-tertiary:active::before, .hds-button--color-tertiary.mock-active::before {
@@ -3197,29 +3221,29 @@ a.hds-button:hover, a.hds-button:focus, a.hds-button:active, a.hds-button.mock-h
3197
3221
  }
3198
3222
 
3199
3223
  .hds-button--color-critical {
3200
- color: var(--token-color-foreground-critical-on-surface);
3201
- background-color: var(--token-color-surface-critical);
3202
- border-color: var(--token-color-foreground-critical-on-surface);
3224
+ color: var(--token-button-foreground-color-critical-default);
3225
+ background-color: var(--token-button-surface-color-critical-default);
3226
+ border-color: var(--token-button-border-color-critical-default);
3203
3227
  box-shadow: var(--token-elevation-low-box-shadow);
3204
3228
  }
3205
3229
  .hds-button--color-critical:hover, .hds-button--color-critical.mock-hover {
3206
- color: var(--token-color-foreground-high-contrast);
3207
- background-color: var(--token-color-palette-red-300);
3208
- border-color: var(--token-color-palette-red-400);
3230
+ color: var(--token-button-foreground-color-critical-hover);
3231
+ background-color: var(--token-button-surface-color-critical-hover);
3232
+ border-color: var(--token-button-border-color-critical-hover);
3209
3233
  cursor: pointer;
3210
3234
  }
3211
3235
  .hds-button--color-critical:focus, .hds-button--color-critical.mock-focus {
3212
- color: var(--token-color-foreground-critical-on-surface);
3213
- background-color: var(--token-color-surface-critical);
3214
- border-color: var(--token-color-focus-critical-internal);
3236
+ color: var(--token-button-foreground-color-critical-focus);
3237
+ background-color: var(--token-button-surface-color-critical-focus);
3238
+ border-color: var(--token-button-border-color-critical-focus-internal);
3215
3239
  }
3216
3240
  .hds-button--color-critical:focus::before, .hds-button--color-critical.mock-focus::before {
3217
- border-color: var(--token-color-focus-critical-external);
3241
+ border-color: var(--token-button-border-color-critical-focus-external);
3218
3242
  }
3219
3243
  .hds-button--color-critical:active, .hds-button--color-critical.mock-active {
3220
- color: var(--token-color-foreground-high-contrast);
3221
- background-color: var(--token-color-palette-red-400);
3222
- border-color: var(--token-color-palette-red-400);
3244
+ color: var(--token-button-foreground-color-critical-active);
3245
+ background-color: var(--token-button-surface-color-critical-active);
3246
+ border-color: var(--token-button-border-color-critical-active);
3223
3247
  box-shadow: none;
3224
3248
  }
3225
3249
  .hds-button--color-critical:active::before, .hds-button--color-critical.mock-active::before {
@@ -3227,57 +3251,57 @@ a.hds-button:hover, a.hds-button:focus, a.hds-button:active, a.hds-button.mock-h
3227
3251
  }
3228
3252
 
3229
3253
  .hds-button--size-small {
3230
- min-height: 1.75rem;
3231
- padding: 0.375rem 0.6875rem;
3254
+ min-height: var(--token-button-height-small);
3255
+ padding: var(--token-button-padding-vertical-small) var(--token-button-padding-horizontal-small);
3232
3256
  }
3233
3257
  .hds-button--size-small .hds-button__icon {
3234
- width: 0.75rem;
3235
- height: 0.75rem;
3258
+ width: var(--token-button-icon-size-small);
3259
+ height: var(--token-button-icon-size-small);
3236
3260
  }
3237
3261
  .hds-button--size-small .hds-button__text {
3238
- font-size: 0.8125rem;
3239
- line-height: 0.875rem;
3262
+ font-size: var(--token-button-typography-font-size-small);
3263
+ line-height: var(--token-button-typography-line-height-small);
3240
3264
  }
3241
3265
  .hds-button--size-small.hds-button--is-icon-only {
3242
- min-width: 1.75rem;
3243
- padding-right: 0.375rem;
3244
- padding-left: 0.375rem;
3266
+ min-width: var(--token-button-height-small);
3267
+ padding-right: var(--token-button-padding-vertical-small);
3268
+ padding-left: var(--token-button-padding-vertical-small);
3245
3269
  }
3246
3270
 
3247
3271
  .hds-button--size-medium {
3248
- min-height: 2.25rem;
3249
- padding: 0.5625rem 0.9375rem;
3272
+ min-height: var(--token-button-height-medium);
3273
+ padding: var(--token-button-padding-vertical-medium) var(--token-button-padding-horizontal-medium);
3250
3274
  }
3251
3275
  .hds-button--size-medium .hds-button__icon {
3252
- width: 1rem;
3253
- height: 1rem;
3276
+ width: var(--token-button-icon-size-medium);
3277
+ height: var(--token-button-icon-size-medium);
3254
3278
  }
3255
3279
  .hds-button--size-medium .hds-button__text {
3256
- font-size: 0.875rem;
3257
- line-height: 1rem;
3280
+ font-size: var(--token-button-typography-font-size-medium);
3281
+ line-height: var(--token-button-typography-line-height-medium);
3258
3282
  }
3259
3283
  .hds-button--size-medium.hds-button--is-icon-only {
3260
- min-width: 2.25rem;
3261
- padding-right: 0.5625rem;
3262
- padding-left: 0.5625rem;
3284
+ min-width: var(--token-button-height-medium);
3285
+ padding-right: var(--token-button-padding-vertical-medium);
3286
+ padding-left: var(--token-button-padding-vertical-medium);
3263
3287
  }
3264
3288
 
3265
3289
  .hds-button--size-large {
3266
- min-height: 3rem;
3267
- padding: 0.6875rem 1.1875rem;
3290
+ min-height: var(--token-button-height-large);
3291
+ padding: var(--token-button-padding-vertical-large) var(--token-button-padding-horizontal-large);
3268
3292
  }
3269
3293
  .hds-button--size-large .hds-button__icon {
3270
- width: 1.5rem;
3271
- height: 1.5rem;
3294
+ width: var(--token-button-icon-size-large);
3295
+ height: var(--token-button-icon-size-large);
3272
3296
  }
3273
3297
  .hds-button--size-large .hds-button__text {
3274
- font-size: 1rem;
3275
- line-height: 1.5rem;
3298
+ font-size: var(--token-button-typography-font-size-large);
3299
+ line-height: var(--token-button-typography-line-height-large);
3276
3300
  }
3277
3301
  .hds-button--size-large.hds-button--is-icon-only {
3278
- min-width: 3rem;
3279
- padding-right: 0.6875rem;
3280
- padding-left: 0.6875rem;
3302
+ min-width: var(--token-button-height-large);
3303
+ padding-right: var(--token-button-padding-vertical-large);
3304
+ padding-left: var(--token-button-padding-vertical-large);
3281
3305
  }
3282
3306
 
3283
3307
  .hds-button--is-inline {
@@ -4374,7 +4398,7 @@ button.hds-button[href]::after {
4374
4398
  color: var(--token-color-foreground-primary);
4375
4399
  background-color: var(--token-color-surface-faint);
4376
4400
  border: 1px solid var(--token-color-border-strong);
4377
- border-radius: var(--token-border-radius-small);
4401
+ border-radius: var(--token-button-border-radius);
4378
4402
  outline-style: solid;
4379
4403
  outline-color: transparent;
4380
4404
  isolation: isolate;
@@ -4389,13 +4413,13 @@ button.hds-button[href]::after {
4389
4413
  }
4390
4414
  .hds-dropdown-toggle-icon:focus::before, .hds-dropdown-toggle-icon.mock-focus::before {
4391
4415
  position: absolute;
4392
- top: -4px;
4393
- right: -4px;
4394
- bottom: -4px;
4395
- left: -4px;
4416
+ top: calc(-1 * (var(--token-button-border-width) + var(--token-button-focus-border-width)));
4417
+ right: calc(-1 * (var(--token-button-border-width) + var(--token-button-focus-border-width)));
4418
+ bottom: calc(-1 * (var(--token-button-border-width) + var(--token-button-focus-border-width)));
4419
+ left: calc(-1 * (var(--token-button-border-width) + var(--token-button-focus-border-width)));
4396
4420
  z-index: -1;
4397
- border: 3px solid transparent;
4398
- border-radius: calc(var(--token-border-radius-small) + 3px);
4421
+ border: var(--token-button-focus-border-width) solid transparent;
4422
+ border-radius: calc(var(--token-button-border-radius) + var(--token-button-focus-border-width));
4399
4423
  content: "";
4400
4424
  }
4401
4425
  .hds-dropdown-toggle-icon:focus::before, .hds-dropdown-toggle-icon.mock-focus::before {
@@ -4409,9 +4433,9 @@ button.hds-button[href]::after {
4409
4433
  border-color: transparent;
4410
4434
  }
4411
4435
  .hds-dropdown-toggle-icon:disabled, .hds-dropdown-toggle-icon.mock-disabled {
4412
- color: var(--token-color-foreground-disabled);
4413
- background-color: var(--token-color-surface-faint);
4414
- border-color: var(--token-color-border-primary);
4436
+ color: var(--token-button-foreground-color-disabled);
4437
+ background-color: var(--token-button-surface-color-disabled);
4438
+ border-color: var(--token-button-border-color-disabled);
4415
4439
  box-shadow: none;
4416
4440
  cursor: not-allowed;
4417
4441
  }
@@ -4420,7 +4444,7 @@ button.hds-button[href]::after {
4420
4444
  display: flex;
4421
4445
  align-items: center;
4422
4446
  justify-content: center;
4423
- border-radius: calc(var(--token-border-radius-small) - 2px);
4447
+ border-radius: calc(var(--token-button-border-radius) - 2px);
4424
4448
  }
4425
4449
  .hds-dropdown-toggle-icon__wrapper img {
4426
4450
  width: 100%;
@@ -4446,15 +4470,15 @@ button.hds-button[href]::after {
4446
4470
  .hds-dropdown-toggle-button {
4447
4471
  position: relative;
4448
4472
  display: flex;
4449
- gap: 0.375rem;
4473
+ gap: var(--token-button-gap);
4450
4474
  align-items: center;
4451
4475
  justify-content: center;
4452
4476
  width: auto;
4453
4477
  font-weight: var(--token-typography-font-weight-regular);
4454
4478
  font-family: var(--token-typography-font-stack-text);
4455
4479
  text-decoration: none;
4456
- border: 1px solid transparent;
4457
- border-radius: var(--token-border-radius-small);
4480
+ border: var(--token-button-border-width) solid transparent;
4481
+ border-radius: var(--token-button-border-radius);
4458
4482
  outline-style: solid;
4459
4483
  outline-color: transparent;
4460
4484
  isolation: isolate;
@@ -4464,19 +4488,19 @@ button.hds-button[href]::after {
4464
4488
  }
4465
4489
  .hds-dropdown-toggle-button:focus::before, .hds-dropdown-toggle-button.mock-focus::before {
4466
4490
  position: absolute;
4467
- top: -4px;
4468
- right: -4px;
4469
- bottom: -4px;
4470
- left: -4px;
4491
+ top: calc(-1 * (var(--token-button-border-width) + var(--token-button-focus-border-width)));
4492
+ right: calc(-1 * (var(--token-button-border-width) + var(--token-button-focus-border-width)));
4493
+ bottom: calc(-1 * (var(--token-button-border-width) + var(--token-button-focus-border-width)));
4494
+ left: calc(-1 * (var(--token-button-border-width) + var(--token-button-focus-border-width)));
4471
4495
  z-index: -1;
4472
- border: 3px solid transparent;
4473
- border-radius: calc(var(--token-border-radius-small) + 3px);
4496
+ border: var(--token-button-focus-border-width) solid transparent;
4497
+ border-radius: calc(var(--token-button-border-radius) + var(--token-button-focus-border-width));
4474
4498
  content: "";
4475
4499
  }
4476
4500
  .hds-dropdown-toggle-button:disabled, .hds-dropdown-toggle-button.mock-disabled, .hds-dropdown-toggle-button:disabled:focus, .hds-dropdown-toggle-button.mock-disabled:focus, .hds-dropdown-toggle-button:disabled:hover, .hds-dropdown-toggle-button.mock-disabled:hover {
4477
- color: var(--token-color-foreground-disabled);
4478
- background-color: var(--token-color-surface-faint);
4479
- border-color: var(--token-color-border-primary);
4501
+ color: var(--token-button-foreground-color-disabled);
4502
+ background-color: var(--token-button-surface-color-disabled);
4503
+ border-color: var(--token-button-border-color-disabled);
4480
4504
  box-shadow: none;
4481
4505
  cursor: not-allowed;
4482
4506
  }
@@ -4492,57 +4516,57 @@ button.hds-button[href]::after {
4492
4516
  }
4493
4517
 
4494
4518
  .hds-dropdown-toggle-button--size-small {
4495
- min-height: 1.75rem;
4496
- padding: 0.375rem 0.6875rem;
4519
+ min-height: var(--token-button-height-small);
4520
+ padding: var(--token-button-padding-vertical-small) var(--token-button-padding-horizontal-small);
4497
4521
  }
4498
4522
  .hds-dropdown-toggle-button--size-small .hds-dropdown-toggle-button__icon {
4499
- width: 0.75rem;
4500
- height: 0.75rem;
4523
+ width: var(--token-button-icon-size-small);
4524
+ height: var(--token-button-icon-size-small);
4501
4525
  }
4502
4526
  .hds-dropdown-toggle-button--size-small .hds-dropdown-toggle-button__text {
4503
- font-size: 0.8125rem;
4504
- line-height: 0.875rem;
4527
+ font-size: var(--token-button-typography-font-size-small);
4528
+ line-height: var(--token-button-typography-line-height-small);
4505
4529
  }
4506
4530
  .hds-dropdown-toggle-button--size-small.hds-dropdown-toggle-button--is-icon-only {
4507
- min-width: 1.75rem;
4508
- padding-right: 0.375rem;
4509
- padding-left: 0.375rem;
4531
+ min-width: var(--token-button-height-small);
4532
+ padding-right: var(--token-button-padding-vertical-small);
4533
+ padding-left: var(--token-button-padding-vertical-small);
4510
4534
  }
4511
4535
 
4512
4536
  .hds-dropdown-toggle-button--size-medium {
4513
- min-height: 2.25rem;
4514
- padding: 0.5625rem 0.9375rem;
4537
+ min-height: var(--token-button-height-medium);
4538
+ padding: var(--token-button-padding-vertical-medium) var(--token-button-padding-horizontal-medium);
4515
4539
  }
4516
4540
  .hds-dropdown-toggle-button--size-medium .hds-dropdown-toggle-button__icon {
4517
- width: 1rem;
4518
- height: 1rem;
4541
+ width: var(--token-button-icon-size-medium);
4542
+ height: var(--token-button-icon-size-medium);
4519
4543
  }
4520
4544
  .hds-dropdown-toggle-button--size-medium .hds-dropdown-toggle-button__text {
4521
- font-size: 0.875rem;
4522
- line-height: 1rem;
4545
+ font-size: var(--token-button-typography-font-size-medium);
4546
+ line-height: var(--token-button-typography-line-height-medium);
4523
4547
  }
4524
4548
  .hds-dropdown-toggle-button--size-medium.hds-dropdown-toggle-button--is-icon-only {
4525
- min-width: 2.25rem;
4526
- padding-right: 0.5625rem;
4527
- padding-left: 0.5625rem;
4549
+ min-width: var(--token-button-height-medium);
4550
+ padding-right: var(--token-button-padding-vertical-medium);
4551
+ padding-left: var(--token-button-padding-vertical-medium);
4528
4552
  }
4529
4553
 
4530
4554
  .hds-dropdown-toggle-button--size-large {
4531
- min-height: 3rem;
4532
- padding: 0.6875rem 1.1875rem;
4555
+ min-height: var(--token-button-height-large);
4556
+ padding: var(--token-button-padding-vertical-large) var(--token-button-padding-horizontal-large);
4533
4557
  }
4534
4558
  .hds-dropdown-toggle-button--size-large .hds-dropdown-toggle-button__icon {
4535
- width: 1.5rem;
4536
- height: 1.5rem;
4559
+ width: var(--token-button-icon-size-large);
4560
+ height: var(--token-button-icon-size-large);
4537
4561
  }
4538
4562
  .hds-dropdown-toggle-button--size-large .hds-dropdown-toggle-button__text {
4539
- font-size: 1rem;
4540
- line-height: 1.5rem;
4563
+ font-size: var(--token-button-typography-font-size-large);
4564
+ line-height: var(--token-button-typography-line-height-large);
4541
4565
  }
4542
4566
  .hds-dropdown-toggle-button--size-large.hds-dropdown-toggle-button--is-icon-only {
4543
- min-width: 3rem;
4544
- padding-right: 0.6875rem;
4545
- padding-left: 0.6875rem;
4567
+ min-width: var(--token-button-height-large);
4568
+ padding-right: var(--token-button-padding-vertical-large);
4569
+ padding-left: var(--token-button-padding-vertical-large);
4546
4570
  }
4547
4571
 
4548
4572
  .hds-dropdown-toggle-button--size-small {
@@ -4558,34 +4582,34 @@ button.hds-button[href]::after {
4558
4582
  }
4559
4583
 
4560
4584
  .hds-dropdown-toggle-button--color-primary {
4561
- color: var(--token-color-foreground-high-contrast);
4562
- background-color: var(--token-color-palette-blue-200);
4563
- border-color: var(--token-color-palette-blue-300);
4585
+ color: var(--token-button-foreground-color-primary-default);
4586
+ background-color: var(--token-button-surface-color-primary-default);
4587
+ border-color: var(--token-button-border-color-primary-default);
4564
4588
  box-shadow: var(--token-elevation-low-box-shadow);
4565
4589
  }
4566
4590
  .hds-dropdown-toggle-button--color-primary:hover, .hds-dropdown-toggle-button--color-primary.mock-hover {
4567
- color: var(--token-color-foreground-high-contrast);
4568
- background-color: var(--token-color-palette-blue-300);
4569
- border-color: var(--token-color-palette-blue-400);
4591
+ color: var(--token-button-foreground-color-primary-hover);
4592
+ background-color: var(--token-button-surface-color-primary-hover);
4593
+ border-color: var(--token-button-border-color-primary-hover);
4570
4594
  cursor: pointer;
4571
4595
  }
4572
4596
  .hds-dropdown-toggle-button--color-primary:focus, .hds-dropdown-toggle-button--color-primary.mock-focus {
4573
- color: var(--token-color-foreground-high-contrast);
4574
- background-color: var(--token-color-palette-blue-200);
4575
- border-color: var(--token-color-focus-action-internal);
4597
+ color: var(--token-button-foreground-color-primary-focus);
4598
+ background-color: var(--token-button-surface-color-primary-focus);
4599
+ border-color: var(--token-button-border-color-primary-focus-internal);
4576
4600
  }
4577
4601
  .hds-dropdown-toggle-button--color-primary:focus::before, .hds-dropdown-toggle-button--color-primary.mock-focus::before {
4578
- top: -6px;
4579
- right: -6px;
4580
- bottom: -6px;
4581
- left: -6px;
4582
- border-color: var(--token-color-focus-action-external);
4583
- border-radius: calc(var(--token-border-radius-small) + 3px + 2px);
4602
+ top: calc(-1 * (var(--token-button-border-width) + var(--token-button-focus-border-width) + 2px));
4603
+ right: calc(-1 * (var(--token-button-border-width) + var(--token-button-focus-border-width) + 2px));
4604
+ bottom: calc(-1 * (var(--token-button-border-width) + var(--token-button-focus-border-width) + 2px));
4605
+ left: calc(-1 * (var(--token-button-border-width) + var(--token-button-focus-border-width) + 2px));
4606
+ border-color: var(--token-button-border-color-primary-focus-external);
4607
+ border-radius: calc(var(--token-button-border-radius) + var(--token-button-focus-border-width) + 2px);
4584
4608
  }
4585
4609
  .hds-dropdown-toggle-button--color-primary:active, .hds-dropdown-toggle-button--color-primary.mock-active {
4586
- color: var(--token-color-foreground-high-contrast);
4587
- background-color: var(--token-color-palette-blue-400);
4588
- border-color: var(--token-color-palette-blue-400);
4610
+ color: var(--token-button-foreground-color-primary-active);
4611
+ background-color: var(--token-button-surface-color-primary-active);
4612
+ border-color: var(--token-button-border-color-primary-active);
4589
4613
  box-shadow: none;
4590
4614
  }
4591
4615
  .hds-dropdown-toggle-button--color-primary:active::before, .hds-dropdown-toggle-button--color-primary.mock-active::before {
@@ -4593,29 +4617,29 @@ button.hds-button[href]::after {
4593
4617
  }
4594
4618
 
4595
4619
  .hds-dropdown-toggle-button--color-secondary {
4596
- color: var(--token-color-foreground-primary);
4597
- background-color: var(--token-color-surface-faint);
4598
- border-color: var(--token-color-border-strong);
4620
+ color: var(--token-button-foreground-color-secondary-default);
4621
+ background-color: var(--token-button-surface-color-secondary-default);
4622
+ border-color: var(--token-button-border-color-secondary-default);
4599
4623
  box-shadow: var(--token-elevation-low-box-shadow);
4600
4624
  }
4601
4625
  .hds-dropdown-toggle-button--color-secondary:hover, .hds-dropdown-toggle-button--color-secondary.mock-hover {
4602
- color: var(--token-color-foreground-primary);
4603
- background-color: var(--token-color-surface-primary);
4604
- border-color: var(--token-color-border-strong);
4626
+ color: var(--token-button-foreground-color-secondary-hover);
4627
+ background-color: var(--token-button-surface-color-secondary-hover);
4628
+ border-color: var(--token-button-border-color-secondary-hover);
4605
4629
  cursor: pointer;
4606
4630
  }
4607
4631
  .hds-dropdown-toggle-button--color-secondary:focus, .hds-dropdown-toggle-button--color-secondary.mock-focus {
4608
- color: var(--token-color-foreground-primary);
4609
- background-color: var(--token-color-surface-faint);
4610
- border-color: var(--token-color-focus-action-internal);
4632
+ color: var(--token-button-foreground-color-secondary-focus);
4633
+ background-color: var(--token-button-surface-color-secondary-focus);
4634
+ border-color: var(--token-button-border-color-secondary-focus-internal);
4611
4635
  }
4612
4636
  .hds-dropdown-toggle-button--color-secondary:focus::before, .hds-dropdown-toggle-button--color-secondary.mock-focus::before {
4613
- border-color: var(--token-color-focus-action-external);
4637
+ border-color: var(--token-button-border-color-secondary-focus-external);
4614
4638
  }
4615
4639
  .hds-dropdown-toggle-button--color-secondary:active, .hds-dropdown-toggle-button--color-secondary.mock-active {
4616
- color: var(--token-color-foreground-primary);
4617
- background-color: var(--token-color-surface-interactive-active);
4618
- border-color: var(--token-color-border-strong);
4640
+ color: var(--token-button-foreground-color-secondary-active);
4641
+ background-color: var(--token-button-surface-color-secondary-active);
4642
+ border-color: var(--token-button-border-color-secondary-active);
4619
4643
  box-shadow: none;
4620
4644
  }
4621
4645
  .hds-dropdown-toggle-button--color-secondary:active::before, .hds-dropdown-toggle-button--color-secondary.mock-active::before {
@@ -5286,8 +5310,8 @@ button.hds-button[href]::after {
5286
5310
  background-repeat: no-repeat;
5287
5311
  background-position: 15px 50%;
5288
5312
  background-size: var(--token-form-text-input-background-image-size);
5289
- border: 1px solid var(--token-color-border-strong);
5290
- border-radius: var(--token-border-radius-small);
5313
+ border: var(--token-button-border-width) solid var(--token-color-border-strong);
5314
+ border-radius: var(--token-button-border-radius);
5291
5315
  box-shadow: var(--token-elevation-low-box-shadow);
5292
5316
  cursor: pointer;
5293
5317
  }
@@ -5324,9 +5348,9 @@ button.hds-button[href]::after {
5324
5348
  color: var(--token-color-foreground-disabled);
5325
5349
  }
5326
5350
  .hds-form-file-input:disabled::file-selector-button, .hds-form-file-input[disabled]::file-selector-button, .hds-form-file-input.mock-disabled::file-selector-button, .hds-form-file-input:disabled:focus::file-selector-button, .hds-form-file-input[disabled]:focus::file-selector-button, .hds-form-file-input.mock-disabled:focus::file-selector-button, .hds-form-file-input:disabled:hover::file-selector-button, .hds-form-file-input[disabled]:hover::file-selector-button, .hds-form-file-input.mock-disabled:hover::file-selector-button {
5327
- color: var(--token-color-foreground-disabled);
5328
- background-color: var(--token-color-surface-faint);
5329
- border-color: var(--token-color-border-primary);
5351
+ color: var(--token-button-foreground-color-disabled);
5352
+ background-color: var(--token-button-surface-color-disabled);
5353
+ border-color: var(--token-button-border-color-disabled);
5330
5354
  box-shadow: none;
5331
5355
  cursor: not-allowed;
5332
5356
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' viewBox='0 0 16 16'%3E%3Cg fill='%238c909c'%3E%3Cpath d='M4.24 5.8a.75.75 0 001.06-.04l1.95-2.1v6.59a.75.75 0 001.5 0V3.66l1.95 2.1a.75.75 0 101.1-1.02l-3.25-3.5a.75.75 0 00-1.101.001L4.2 4.74a.75.75 0 00.04 1.06z'/%3E%3Cpath d='M1.75 9a.75.75 0 01.75.75v3c0 .414.336.75.75.75h9.5a.75.75 0 00.75-.75v-3a.75.75 0 011.5 0v3A2.25 2.25 0 0112.75 15h-9.5A2.25 2.25 0 011 12.75v-3A.75.75 0 011.75 9z'/%3E%3C/g%3E%3C/svg%3E");
@@ -6473,7 +6497,7 @@ button.hds-button[href]::after {
6473
6497
  .hds-form-key-value-inputs__row {
6474
6498
  display: grid;
6475
6499
  flex-grow: 1;
6476
- grid-template-columns: var(--hds-key-value-inputs-columns, 1fr 1fr 2.25rem);
6500
+ grid-template-columns: var(--hds-key-value-inputs-columns, 1fr 1fr var(--token-button-height-medium));
6477
6501
  align-items: flex-end;
6478
6502
  column-gap: 8px;
6479
6503
  row-gap: 0;
@@ -8124,7 +8148,7 @@ button.hds-button[href]::after {
8124
8148
  border-color: var(--token-color-palette-neutral-500);
8125
8149
  color: var(--token-color-foreground-high-contrast);
8126
8150
  background-color: var(--token-color-palette-neutral-700);
8127
- border-radius: var(--token-border-radius-small);
8151
+ border-radius: var(--token-button-border-radius);
8128
8152
  }
8129
8153
  .hds-side-nav__dropdown .hds-button:not(.hds-dropdown * *,
8130
8154
  .ember-basic-dropdown-trigger * *,
@@ -9307,7 +9331,7 @@ button.hds-button[href]::after {
9307
9331
  border-color: var(--token-color-palette-neutral-500);
9308
9332
  color: var(--token-color-foreground-high-contrast);
9309
9333
  background-color: var(--token-color-palette-neutral-700);
9310
- border-radius: var(--token-border-radius-small);
9334
+ border-radius: var(--token-button-border-radius);
9311
9335
  display: flex;
9312
9336
  align-items: center;
9313
9337
  justify-content: center;
@@ -10854,6 +10878,14 @@ button.hds-button[href]::after {
10854
10878
  text-align: right;
10855
10879
  }
10856
10880
 
10881
+ /**
10882
+ * Copyright (c) HashiCorp, Inc.
10883
+ * SPDX-License-Identifier: MPL-2.0
10884
+ */
10885
+ .hds-theme-context {
10886
+ display: contents;
10887
+ }
10888
+
10857
10889
  /**
10858
10890
  * Copyright (c) HashiCorp, Inc.
10859
10891
  * SPDX-License-Identifier: MPL-2.0