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

package/dist/styles/@hashicorp/design-system-components.css

@@ -227,6 +227,9 @@
   --token-app-side-nav-color-surface-primary: var(--token-color-surface-faint);
   --token-app-side-nav-color-surface-interactive-hover: var(--token-color-surface-interactive-hover);
   --token-app-side-nav-color-surface-interactive-active: var(--token-color-palette-neutral-300);
+  --token-badge-count-padding-horizontal-small: 8px;
+  --token-badge-count-padding-horizontal-medium: 12px;
+  --token-badge-count-padding-horizontal-large: 14px;
   --token-badge-height-small: 20px;
   --token-badge-height-medium: 24px;
   --token-badge-height-large: 32px;
@@ -239,59 +242,126 @@
   --token-badge-gap-small: 4px;
   --token-badge-gap-medium: 4px;
   --token-badge-gap-large: 6px;
-  --token-badge-font-size-small: 0.8125rem;
-  --token-badge-font-size-medium: 0.8125rem;
-  --token-badge-font-size-large: 1rem;
-  --token-badge-line-height-small: 1.2308; /** 16px = 1.2308 */
-  --token-badge-line-height-medium: 1.2308; /** 16px = 1.2308 */
-  --token-badge-line-height-large: 1.5; /** 24px = 1.5 */
+  --token-badge-typography-font-size-small: 0.8125rem;
+  --token-badge-typography-font-size-medium: 0.8125rem;
+  --token-badge-typography-font-size-large: 1rem;
+  --token-badge-typography-line-height-small: 1.2308; /** 16px = 1.2308 */
+  --token-badge-typography-line-height-medium: 1.2308; /** 16px = 1.2308 */
+  --token-badge-typography-line-height-large: 1.5; /** 24px = 1.5 */
   --token-badge-foreground-color-neutral-filled: #3b3d45;
-  --token-badge-foreground-color-neutral-inverted: #ffffff;
+  --token-badge-foreground-color-neutral-inverted: #ffffff; /** TODO validate if this is `TextInverse` or should be `TextOnColor (ask Carbon team too?) */
   --token-badge-foreground-color-neutral-outlined: #3b3d45;
   --token-badge-foreground-color-neutral-dark-mode-filled: #ffffff;
   --token-badge-foreground-color-neutral-dark-mode-inverted: #3b3d45;
   --token-badge-foreground-color-neutral-dark-mode-outlined: #ffffff;
-  --token-badge-foreground-color-highlight-filled: #911ced;
+  --token-badge-foreground-color-highlight-filled: #7b00db; /** we don't use `highlight-on-surface` for accessibility (better contrast) */
   --token-badge-foreground-color-highlight-inverted: #ffffff;
   --token-badge-foreground-color-highlight-outlined: #a737ff;
-  --token-badge-foreground-color-success-filled: #00781e;
+  --token-badge-foreground-color-success-filled: #006619; /** we don't use `success-on-surface` for accessibility (better contrast) */
   --token-badge-foreground-color-success-inverted: #ffffff;
   --token-badge-foreground-color-success-outlined: #008a22;
-  --token-badge-foreground-color-warning-filled: #9e4b00;
+  --token-badge-foreground-color-warning-filled: #803d00; /** we don't use `warning-on-surface` for accessibility (better contrast) */
   --token-badge-foreground-color-warning-inverted: #ffffff;
   --token-badge-foreground-color-warning-outlined: #bb5a00;
-  --token-badge-foreground-color-critical-filled: #c00005;
+  --token-badge-foreground-color-critical-filled: #940004; /** we don't use `critical-on-surface` for accessibility (better contrast) */
   --token-badge-foreground-color-critical-inverted: #ffffff;
   --token-badge-foreground-color-critical-outlined: #e52228;
   --token-badge-surface-color-neutral-filled: #dedfe3;
-  --token-badge-surface-color-neutral-inverted: #656a76;
-  --token-badge-surface-color-neutral-outlined: rgba(0, 0, 0, 0);
-  --token-badge-surface-color-neutral-dark-mode-filled: #656a76;
+  --token-badge-surface-color-neutral-inverted: #656a76; /** TODO - cristiano to ask Carbon team what to do because there is no equivalent color in code for the Tag inverted */
+  --token-badge-surface-color-neutral-dark-mode-filled: #656a76; /** TODO - cristiano to ask Carbon team what to do because there is no high-contrast color in the theme colors for the tag (in code) */
   --token-badge-surface-color-neutral-dark-mode-inverted: #fafafa;
-  --token-badge-surface-color-neutral-dark-mode-outlined: rgba(0, 0, 0, 0);
-  --token-badge-surface-color-highlight-filled: #f9f2ff;
+  --token-badge-surface-color-highlight-filled: #ead2fe; /** we don't use `surface-highlight` for accessibility (better contrast) */
   --token-badge-surface-color-highlight-inverted: #a737ff;
-  --token-badge-surface-color-highlight-outlined: rgba(0, 0, 0, 0);
-  --token-badge-surface-color-success-filled: #f2fbf6;
+  --token-badge-surface-color-success-filled: #cceeda; /** we don't use `surface-success` for accessibility (better contrast) */
   --token-badge-surface-color-success-inverted: #008a22;
-  --token-badge-surface-color-success-outlined: rgba(0, 0, 0, 0);
-  --token-badge-surface-color-warning-filled: #fff9e8;
+  --token-badge-surface-color-warning-filled: #fbeabf; /** we don't use `surface-warning` for accessibility (better contrast) */
   --token-badge-surface-color-warning-inverted: #bb5a00;
-  --token-badge-surface-color-warning-outlined: rgba(0, 0, 0, 0);
-  --token-badge-surface-color-critical-filled: #fff5f5;
+  --token-badge-surface-color-critical-filled: #fbd4d4; /** we don't use `surface-critical` for accessibility (better contrast) */
   --token-badge-surface-color-critical-inverted: #e52228;
-  --token-badge-surface-color-critical-outlined: rgba(0, 0, 0, 0);
-  --token-badge-border-color-neutral-outlined: #656a76;
-  --token-badge-border-color-neutral-dark-mode-outlined: #fafafa;
-  --token-badge-border-color-highlight-outlined: #a737ff;
-  --token-badge-border-color-success-outlined: #008a22;
-  --token-badge-border-color-warning-outlined: #bb5a00;
-  --token-badge-border-color-critical-outlined: #e52228;
   --token-badge-border-width: 1px;
-  --token-badge-border-radius: 5px;
+  --token-badge-border-radius-small: 5px;
+  --token-badge-border-radius-medium: 5px;
+  --token-badge-border-radius-large: 5px;
   --token-badge-icon-size-small: 12px;
   --token-badge-icon-size-medium: 16px;
   --token-badge-icon-size-large: 16px;
+  --token-button-height-small: 28px;
+  --token-button-height-medium: 36px;
+  --token-button-height-large: 48px;
+  --token-button-padding-horizontal-small: 11px; /** here we're taking into account the 1px border */
+  --token-button-padding-horizontal-medium: 15px; /** here we're taking into account the 1px border */
+  --token-button-padding-horizontal-large: 19px; /** here we're taking into account the 1px border */
+  --token-button-padding-vertical-small: 6px; /** here we're taking into account the 1px border */
+  --token-button-padding-vertical-medium: 9px; /** here we're taking into account the 1px border */
+  --token-button-padding-vertical-large: 11px; /** here we're taking into account the 1px border */
+  --token-button-gap: 6px;
+  --token-button-typography-font-size-small: 0.8125rem;
+  --token-button-typography-font-size-medium: 0.875rem;
+  --token-button-typography-font-size-large: 1rem;
+  --token-button-typography-line-height-small: 0.9286; /** 14px ~ 0.9286 - we need to make it even (so we set it slighly larger than the font-size; notice: in Figma is 12px but this would cut some ascendants/descendants) */
+  --token-button-typography-line-height-medium: 1.1429; /** 14px ~ 1.1429 */
+  --token-button-typography-line-height-large: 1.5; /** 24px = 1.5 */
+  --token-button-foreground-color-primary-default: #ffffff;
+  --token-button-foreground-color-primary-hover: #ffffff;
+  --token-button-foreground-color-primary-focus: #ffffff;
+  --token-button-foreground-color-primary-active: #ffffff;
+  --token-button-foreground-color-secondary-default: #3b3d45;
+  --token-button-foreground-color-secondary-hover: #3b3d45;
+  --token-button-foreground-color-secondary-focus: #3b3d45;
+  --token-button-foreground-color-secondary-active: #3b3d45;
+  --token-button-foreground-color-tertiary-default: #1060ff;
+  --token-button-foreground-color-tertiary-hover: #0c56e9;
+  --token-button-foreground-color-tertiary-focus: #1060ff;
+  --token-button-foreground-color-tertiary-active: #0046d1;
+  --token-button-foreground-color-critical-default: #c00005;
+  --token-button-foreground-color-critical-hover: #ffffff;
+  --token-button-foreground-color-critical-focus: #c00005;
+  --token-button-foreground-color-critical-active: #ffffff;
+  --token-button-foreground-color-disabled: #8c909c;
+  --token-button-surface-color-primary-default: #1060ff;
+  --token-button-surface-color-primary-hover: #0c56e9;
+  --token-button-surface-color-primary-focus: #1060ff;
+  --token-button-surface-color-primary-active: #0046d1;
+  --token-button-surface-color-secondary-default: #fafafa;
+  --token-button-surface-color-secondary-hover: #ffffff;
+  --token-button-surface-color-secondary-focus: #fafafa;
+  --token-button-surface-color-secondary-active: #dedfe3;
+  --token-button-surface-color-tertiary-default: rgba(0, 0, 0, 0);
+  --token-button-surface-color-tertiary-hover: #ffffff;
+  --token-button-surface-color-tertiary-focus: rgba(0, 0, 0, 0);
+  --token-button-surface-color-tertiary-active: #dedfe3;
+  --token-button-surface-color-critical-default: #fff5f5;
+  --token-button-surface-color-critical-hover: #c00005;
+  --token-button-surface-color-critical-focus: #fff5f5;
+  --token-button-surface-color-critical-active: #940004;
+  --token-button-surface-color-disabled: #fafafa;
+  --token-button-border-width: 1px;
+  --token-button-border-radius: 5px;
+  --token-button-border-color-primary-default: #0c56e9;
+  --token-button-border-color-primary-hover: #0c56e9;
+  --token-button-border-color-primary-focus-internal: #0c56e9; /** TODO - replace the `pink` values with the correct ones */
+  --token-button-border-color-primary-focus-external: #5990ff;
+  --token-button-border-color-primary-active: #0046d1;
+  --token-button-border-color-secondary-default: #3b3d4566;
+  --token-button-border-color-secondary-hover: #3b3d4566;
+  --token-button-border-color-secondary-focus-internal: #0c56e9; /** TODO - replace the `pink` values with the correct ones */
+  --token-button-border-color-secondary-focus-external: #5990ff; /** TODO - replace the `magenta` values with the correct ones */
+  --token-button-border-color-secondary-active: #3b3d4566;
+  --token-button-border-color-tertiary-default: rgba(0, 0, 0, 0);
+  --token-button-border-color-tertiary-hover: #3b3d4566;
+  --token-button-border-color-tertiary-focus-internal: #0c56e9;
+  --token-button-border-color-tertiary-focus-external: #5990ff;
+  --token-button-border-color-tertiary-active: #3b3d4566;
+  --token-button-border-color-critical-default: #c00005;
+  --token-button-border-color-critical-hover: #940004;
+  --token-button-border-color-critical-focus-internal: #c00005; /** TODO - replace the `pink` values with the correct ones */
+  --token-button-border-color-critical-focus-external: #dd7578; /** TODO - replace the `magenta` values with the correct ones */
+  --token-button-border-color-critical-active: #940004;
+  --token-button-border-color-disabled: #656a7633;
+  --token-button-focus-border-width: 3px;
+  --token-button-icon-size-small: 12px;
+  --token-button-icon-size-medium: 16px;
+  --token-button-icon-size-large: 24px;
   --token-form-label-color: #0c0c0e;
   --token-form-legend-color: #0c0c0e;
   --token-form-helper-text-color: #656a76;
@@ -975,21 +1045,21 @@
 .hds-accordion-item__button--parent-contains-interactive {
   position: relative;
   display: flex;
-  gap: 0.375rem;
+  gap: var(--token-button-gap);
   align-items: center;
   justify-content: center;
   width: auto;
   font-weight: var(--token-typography-font-weight-regular);
   font-family: var(--token-typography-font-stack-text);
   text-decoration: none;
-  border: 1px solid transparent;
-  border-radius: var(--token-border-radius-small);
+  border: var(--token-button-border-width) solid transparent;
+  border-radius: var(--token-button-border-radius);
   outline-style: solid;
   outline-color: transparent;
   isolation: isolate;
-  color: var(--token-color-foreground-primary);
-  background-color: var(--token-color-surface-faint);
-  border-color: var(--token-color-border-strong);
+  color: var(--token-button-foreground-color-secondary-default);
+  background-color: var(--token-button-surface-color-secondary-default);
+  border-color: var(--token-button-border-color-secondary-default);
   box-shadow: var(--token-elevation-low-box-shadow);
 }
 .hds-accordion-item__button--parent-contains-interactive:focus, .hds-accordion-item__button--parent-contains-interactive.mock-focus {
@@ -997,33 +1067,33 @@
 }
 .hds-accordion-item__button--parent-contains-interactive:focus::before, .hds-accordion-item__button--parent-contains-interactive.mock-focus::before {
   position: absolute;
-  top: -4px;
-  right: -4px;
-  bottom: -4px;
-  left: -4px;
+  top: calc(-1 * (var(--token-button-border-width) + var(--token-button-focus-border-width)));
+  right: calc(-1 * (var(--token-button-border-width) + var(--token-button-focus-border-width)));
+  bottom: calc(-1 * (var(--token-button-border-width) + var(--token-button-focus-border-width)));
+  left: calc(-1 * (var(--token-button-border-width) + var(--token-button-focus-border-width)));
   z-index: -1;
-  border: 3px solid transparent;
-  border-radius: calc(var(--token-border-radius-small) + 3px);
+  border: var(--token-button-focus-border-width) solid transparent;
+  border-radius: calc(var(--token-button-border-radius) + var(--token-button-focus-border-width));
   content: "";
 }
 .hds-accordion-item__button--parent-contains-interactive:hover, .hds-accordion-item__button--parent-contains-interactive.mock-hover {
-  color: var(--token-color-foreground-primary);
-  background-color: var(--token-color-surface-primary);
-  border-color: var(--token-color-border-strong);
+  color: var(--token-button-foreground-color-secondary-hover);
+  background-color: var(--token-button-surface-color-secondary-hover);
+  border-color: var(--token-button-border-color-secondary-hover);
   cursor: pointer;
 }
 .hds-accordion-item__button--parent-contains-interactive:focus, .hds-accordion-item__button--parent-contains-interactive.mock-focus {
-  color: var(--token-color-foreground-primary);
-  background-color: var(--token-color-surface-faint);
-  border-color: var(--token-color-focus-action-internal);
+  color: var(--token-button-foreground-color-secondary-focus);
+  background-color: var(--token-button-surface-color-secondary-focus);
+  border-color: var(--token-button-border-color-secondary-focus-internal);
 }
 .hds-accordion-item__button--parent-contains-interactive:focus::before, .hds-accordion-item__button--parent-contains-interactive.mock-focus::before {
-  border-color: var(--token-color-focus-action-external);
+  border-color: var(--token-button-border-color-secondary-focus-external);
 }
 .hds-accordion-item__button--parent-contains-interactive:active, .hds-accordion-item__button--parent-contains-interactive.mock-active {
-  color: var(--token-color-foreground-primary);
-  background-color: var(--token-color-surface-interactive-active);
-  border-color: var(--token-color-border-strong);
+  color: var(--token-button-foreground-color-secondary-active);
+  background-color: var(--token-button-surface-color-secondary-active);
+  border-color: var(--token-button-border-color-secondary-active);
   box-shadow: none;
 }
 .hds-accordion-item__button--parent-contains-interactive:active::before, .hds-accordion-item__button--parent-contains-interactive.mock-active::before {
@@ -2175,7 +2245,7 @@
   border-color: var(--token-color-palette-neutral-500);
   color: var(--token-color-foreground-high-contrast);
   background-color: var(--token-color-palette-neutral-700);
-  border-radius: var(--token-border-radius-small);
+  border-radius: var(--token-button-border-radius);
 }
 .hds-app-header .hds-button:not(.hds-dropdown * *,
 .ember-basic-dropdown-trigger * *,
@@ -2603,7 +2673,7 @@
   cursor: pointer;
   color: var(--token-color-foreground-high-contrast);
   background-color: var(--token-color-palette-neutral-700);
-  border-radius: var(--token-border-radius-small);
+  border-radius: var(--token-button-border-radius);
   display: flex;
   gap: 8px;
   align-items: center;
@@ -3091,20 +3161,12 @@
  * SPDX-License-Identifier: MPL-2.0
  */
 .hds-badge {
-  --token-color-surface-success: var(--token-color-palette-green-100);
-  --token-color-foreground-success-on-surface: var(--token-color-palette-green-400);
-  --token-color-surface-warning: var(--token-color-palette-amber-100);
-  --token-color-foreground-warning-on-surface: var(--token-color-palette-amber-400);
-  --token-color-surface-critical: var(--token-color-palette-red-100);
-  --token-color-foreground-critical-on-surface: var(--token-color-palette-red-400);
-  --token-color-surface-highlight: var(--token-color-palette-purple-100);
-  --token-color-foreground-highlight-on-surface: var(--token-color-palette-purple-400);
   display: inline-flex;
   align-items: center;
   max-width: 100%;
   vertical-align: middle;
-  border: var(--token-badge-border-width) solid transparent;
-  border-radius: var(--token-badge-border-radius);
+  border-style: solid;
+  border-width: var(--token-badge-border-width);
 }
 
 .hds-badge__icon {
@@ -3122,126 +3184,141 @@
   gap: var(--token-badge-gap-small);
   min-height: var(--token-badge-height-small);
   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));
+  border-radius: var(--token-badge-border-radius-small);
 }
 .hds-badge--size-small .hds-badge__icon {
   width: var(--token-badge-icon-size-small);
   height: var(--token-badge-icon-size-small);
 }
 .hds-badge--size-small .hds-badge__text {
-  font-size: var(--token-badge-font-size-small);
-  line-height: var(--token-badge-line-height-small);
+  font-size: var(--token-badge-typography-font-size-small);
+  line-height: var(--token-badge-typography-line-height-small);
 }
 
 .hds-badge--size-medium {
   gap: var(--token-badge-gap-medium);
   min-height: var(--token-badge-height-medium);
   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));
+  border-radius: var(--token-badge-border-radius-medium);
 }
 .hds-badge--size-medium .hds-badge__icon {
   width: var(--token-badge-icon-size-medium);
   height: var(--token-badge-icon-size-medium);
 }
 .hds-badge--size-medium .hds-badge__text {
-  font-size: var(--token-badge-font-size-medium);
-  line-height: var(--token-badge-line-height-medium);
+  font-size: var(--token-badge-typography-font-size-medium);
+  line-height: var(--token-badge-typography-line-height-medium);
 }
 
 .hds-badge--size-large {
   gap: var(--token-badge-gap-large);
   min-height: var(--token-badge-height-large);
   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));
+  border-radius: var(--token-badge-border-radius-large);
 }
 .hds-badge--size-large .hds-badge__icon {
   width: var(--token-badge-icon-size-large);
   height: var(--token-badge-icon-size-large);
 }
 .hds-badge--size-large .hds-badge__text {
-  font-size: var(--token-badge-font-size-large);
-  line-height: var(--token-badge-line-height-large);
+  font-size: var(--token-badge-typography-font-size-large);
+  line-height: var(--token-badge-typography-line-height-large);
 }
 
 .hds-badge--color-neutral.hds-badge--type-filled {
   color: var(--token-badge-foreground-color-neutral-filled);
   background-color: var(--token-badge-surface-color-neutral-filled);
+  border-color: transparent;
 }
 .hds-badge--color-neutral.hds-badge--type-inverted {
   color: var(--token-badge-foreground-color-neutral-inverted);
   background-color: var(--token-badge-surface-color-neutral-inverted);
+  border-color: transparent;
 }
 .hds-badge--color-neutral.hds-badge--type-outlined {
   color: var(--token-badge-foreground-color-neutral-outlined);
-  background-color: var(--token-badge-surface-color-neutral-outlined);
-  border-color: var(--token-badge-border-color-neutral-outlined);
+  background-color: transparent;
+  border-color: var(--token-badge-foreground-color-neutral-outlined);
 }
 
 .hds-badge--color-neutral-dark-mode.hds-badge--type-filled {
   color: var(--token-badge-foreground-color-neutral-dark-mode-filled);
   background-color: var(--token-badge-surface-color-neutral-dark-mode-filled);
+  border-color: transparent;
 }
 .hds-badge--color-neutral-dark-mode.hds-badge--type-inverted {
   color: var(--token-badge-foreground-color-neutral-dark-mode-inverted);
   background-color: var(--token-badge-surface-color-neutral-dark-mode-inverted);
+  border-color: transparent;
 }
 .hds-badge--color-neutral-dark-mode.hds-badge--type-outlined {
   color: var(--token-badge-foreground-color-neutral-dark-mode-outlined);
-  background-color: var(--token-badge-surface-color-neutral-dark-mode-outlined);
-  border-color: var(--token-badge-border-color-neutral-dark-mode-outlined);
+  background-color: transparent;
+  border-color: var(--token-badge-foreground-color-neutral-dark-mode-outlined);
 }
 
 .hds-badge--color-highlight.hds-badge--type-filled {
   color: var(--token-badge-foreground-color-highlight-filled);
   background-color: var(--token-badge-surface-color-highlight-filled);
+  border-color: transparent;
 }
 .hds-badge--color-highlight.hds-badge--type-inverted {
   color: var(--token-badge-foreground-color-highlight-inverted);
   background-color: var(--token-badge-surface-color-highlight-inverted);
+  border-color: transparent;
 }
 .hds-badge--color-highlight.hds-badge--type-outlined {
   color: var(--token-badge-foreground-color-highlight-outlined);
-  background-color: var(--token-badge-surface-color-highlight-outlined);
-  border-color: var(--token-badge-border-color-highlight-outlined);
+  background-color: transparent;
+  border-color: var(--token-badge-foreground-color-highlight-outlined);
 }
 
 .hds-badge--color-success.hds-badge--type-filled {
   color: var(--token-badge-foreground-color-success-filled);
   background-color: var(--token-badge-surface-color-success-filled);
+  border-color: transparent;
 }
 .hds-badge--color-success.hds-badge--type-inverted {
   color: var(--token-badge-foreground-color-success-inverted);
   background-color: var(--token-badge-surface-color-success-inverted);
+  border-color: transparent;
 }
 .hds-badge--color-success.hds-badge--type-outlined {
   color: var(--token-badge-foreground-color-success-outlined);
-  background-color: var(--token-badge-surface-color-success-outlined);
-  border-color: var(--token-badge-border-color-success-outlined);
+  background-color: transparent;
+  border-color: var(--token-badge-foreground-color-success-outlined);
 }
 
 .hds-badge--color-warning.hds-badge--type-filled {
   color: var(--token-badge-foreground-color-warning-filled);
   background-color: var(--token-badge-surface-color-warning-filled);
+  border-color: transparent;
 }
 .hds-badge--color-warning.hds-badge--type-inverted {
   color: var(--token-badge-foreground-color-warning-inverted);
   background-color: var(--token-badge-surface-color-warning-inverted);
+  border-color: transparent;
 }
 .hds-badge--color-warning.hds-badge--type-outlined {
   color: var(--token-badge-foreground-color-warning-outlined);
-  background-color: var(--token-badge-surface-color-warning-outlined);
-  border-color: var(--token-badge-border-color-warning-outlined);
+  background-color: transparent;
+  border-color: var(--token-badge-foreground-color-warning-outlined);
 }
 
 .hds-badge--color-critical.hds-badge--type-filled {
   color: var(--token-badge-foreground-color-critical-filled);
   background-color: var(--token-badge-surface-color-critical-filled);
+  border-color: transparent;
 }
 .hds-badge--color-critical.hds-badge--type-inverted {
   color: var(--token-badge-foreground-color-critical-inverted);
   background-color: var(--token-badge-surface-color-critical-inverted);
+  border-color: transparent;
 }
 .hds-badge--color-critical.hds-badge--type-outlined {
   color: var(--token-badge-foreground-color-critical-outlined);
-  background-color: var(--token-badge-surface-color-critical-outlined);
-  border-color: var(--token-badge-border-color-critical-outlined);
+  background-color: transparent;
+  border-color: var(--token-badge-foreground-color-critical-outlined);
 }
 
 /**
@@ -3254,59 +3331,64 @@
   max-width: 100%;
   font-weight: var(--token-typography-font-weight-medium);
   font-family: var(--token-typography-font-stack-text);
-  border: 1px solid transparent;
+  border-style: solid;
+  border-width: var(--token-badge-border-width);
 }
 
 .hds-badge-count--size-small {
-  min-height: 1.25rem;
-  padding: calc(0.125rem - 1px) calc(0.5rem - 1px);
-  font-size: 0.8125rem;
-  line-height: 1.2308;
-  border-radius: 0.625rem;
+  min-height: var(--token-badge-height-small);
+  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));
+  font-size: var(--token-badge-typography-font-size-small);
+  line-height: var(--token-badge-typography-line-height-small);
+  border-radius: calc(var(--token-badge-height-small) / 2);
 }
 
 .hds-badge-count--size-medium {
-  min-height: 1.5rem;
-  padding: calc(0.25rem - 1px) calc(0.75rem - 1px);
-  font-size: 0.8125rem;
-  line-height: 1.2308;
-  border-radius: 0.75rem;
+  min-height: var(--token-badge-height-medium);
+  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));
+  font-size: var(--token-badge-typography-font-size-medium);
+  line-height: var(--token-badge-typography-line-height-medium);
+  border-radius: calc(var(--token-badge-height-medium) / 2);
 }
 
 .hds-badge-count--size-large {
-  min-height: 2rem;
-  padding: calc(0.25rem - 1px) calc(0.875rem - 1px);
-  font-size: 1rem;
-  line-height: 1.5;
-  border-radius: 1rem;
+  min-height: var(--token-badge-height-large);
+  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));
+  font-size: var(--token-badge-typography-font-size-large);
+  line-height: var(--token-badge-typography-line-height-large);
+  border-radius: calc(var(--token-badge-height-large) / 2);
 }
 
 .hds-badge-count--color-neutral.hds-badge-count--type-filled {
-  color: var(--token-color-foreground-primary);
-  background-color: var(--token-color-palette-neutral-200);
+  color: var(--token-badge-foreground-color-neutral-filled);
+  background-color: var(--token-badge-surface-color-neutral-filled);
+  border-color: transparent;
 }
 .hds-badge-count--color-neutral.hds-badge-count--type-inverted {
-  color: var(--token-color-foreground-high-contrast);
-  background-color: var(--token-color-palette-neutral-500);
+  color: var(--token-badge-foreground-color-neutral-inverted);
+  background-color: var(--token-badge-surface-color-neutral-inverted);
+  border-color: transparent;
 }
 .hds-badge-count--color-neutral.hds-badge-count--type-outlined {
-  color: var(--token-color-foreground-primary);
+  color: var(--token-badge-foreground-color-neutral-outlined);
   background-color: transparent;
-  border-color: var(--token-color-palette-neutral-500);
+  border-color: var(--token-badge-foreground-color-neutral-outlined);
 }
 
 .hds-badge-count--color-neutral-dark-mode.hds-badge-count--type-filled {
-  color: var(--token-color-foreground-high-contrast);
-  background-color: var(--token-color-palette-neutral-500);
+  color: var(--token-badge-foreground-color-neutral-dark-mode-filled);
+  background-color: var(--token-badge-surface-color-neutral-dark-mode-filled);
+  border-color: transparent;
 }
 .hds-badge-count--color-neutral-dark-mode.hds-badge-count--type-inverted {
-  color: var(--token-color-foreground-primary);
-  background-color: var(--token-color-surface-faint);
+  color: var(--token-badge-foreground-color-neutral-dark-mode-inverted);
+  background-color: var(--token-badge-surface-color-neutral-dark-mode-inverted);
+  border-color: transparent;
 }
 .hds-badge-count--color-neutral-dark-mode.hds-badge-count--type-outlined {
-  color: var(--token-color-foreground-high-contrast);
+  color: var(--token-badge-foreground-color-neutral-dark-mode-outlined);
   background-color: transparent;
-  border-color: var(--token-color-palette-neutral-50);
+  border-color: var(--token-badge-foreground-color-neutral-dark-mode-outlined);
 }
 
 /**
@@ -3497,18 +3579,22 @@
  * Copyright (c) HashiCorp, Inc.
  * SPDX-License-Identifier: MPL-2.0
  */
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
 .hds-button {
   position: relative;
   display: flex;
-  gap: 0.375rem;
+  gap: var(--token-button-gap);
   align-items: center;
   justify-content: center;
   width: auto;
   font-weight: var(--token-typography-font-weight-regular);
   font-family: var(--token-typography-font-stack-text);
   text-decoration: none;
-  border: 1px solid transparent;
-  border-radius: var(--token-border-radius-small);
+  border: var(--token-button-border-width) solid transparent;
+  border-radius: var(--token-button-border-radius);
   outline-style: solid;
   outline-color: transparent;
   isolation: isolate;
@@ -3521,9 +3607,9 @@ a.hds-button:hover, a.hds-button:focus, a.hds-button:active, a.hds-button.mock-h
 }
 
 .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 {
-  color: var(--token-color-foreground-disabled);
-  background-color: var(--token-color-surface-faint);
-  border-color: var(--token-color-border-primary);
+  color: var(--token-button-foreground-color-disabled);
+  background-color: var(--token-button-surface-color-disabled);
+  border-color: var(--token-button-border-color-disabled);
   box-shadow: none;
   cursor: not-allowed;
 }
@@ -3531,6 +3617,13 @@ a.hds-button:hover, a.hds-button:focus, a.hds-button:active, a.hds-button.mock-h
   width: 100%;
   max-width: 100%;
 }
+.hds-mode-cds-g0 .hds-button.hds-button--width-full,
+.hds-mode-cds-g10 .hds-button.hds-button--width-full,
+.hds-mode-cds-g90 .hds-button.hds-button--width-full,
+.hds-mode-cds-g100 .hds-button.hds-button--width-full {
+  justify-content: space-between;
+}
+
 .hds-button.hds-button--width-full .hds-button__text {
   flex: 0 0 auto;
 }
@@ -3539,13 +3632,13 @@ a.hds-button:hover, a.hds-button:focus, a.hds-button:active, a.hds-button.mock-h
 }
 .hds-button:focus::before, .hds-button.mock-focus::before {
   position: absolute;
-  top: -4px;
-  right: -4px;
-  bottom: -4px;
-  left: -4px;
+  top: calc(-1 * (var(--token-button-border-width) + var(--token-button-focus-border-width)));
+  right: calc(-1 * (var(--token-button-border-width) + var(--token-button-focus-border-width)));
+  bottom: calc(-1 * (var(--token-button-border-width) + var(--token-button-focus-border-width)));
+  left: calc(-1 * (var(--token-button-border-width) + var(--token-button-focus-border-width)));
   z-index: -1;
-  border: 3px solid transparent;
-  border-radius: calc(var(--token-border-radius-small) + 3px);
+  border: var(--token-button-focus-border-width) solid transparent;
+  border-radius: calc(var(--token-button-border-radius) + var(--token-button-focus-border-width));
   content: "";
 }
 
@@ -3560,34 +3653,34 @@ a.hds-button:hover, a.hds-button:focus, a.hds-button:active, a.hds-button.mock-h
 }
 
 .hds-button--color-primary {
-  color: var(--token-color-foreground-high-contrast);
-  background-color: var(--token-color-palette-blue-200);
-  border-color: var(--token-color-palette-blue-300);
+  color: var(--token-button-foreground-color-primary-default);
+  background-color: var(--token-button-surface-color-primary-default);
+  border-color: var(--token-button-border-color-primary-default);
   box-shadow: var(--token-elevation-low-box-shadow);
 }
 .hds-button--color-primary:hover, .hds-button--color-primary.mock-hover {
-  color: var(--token-color-foreground-high-contrast);
-  background-color: var(--token-color-palette-blue-300);
-  border-color: var(--token-color-palette-blue-400);
+  color: var(--token-button-foreground-color-primary-hover);
+  background-color: var(--token-button-surface-color-primary-hover);
+  border-color: var(--token-button-border-color-primary-hover);
   cursor: pointer;
 }
 .hds-button--color-primary:focus, .hds-button--color-primary.mock-focus {
-  color: var(--token-color-foreground-high-contrast);
-  background-color: var(--token-color-palette-blue-200);
-  border-color: var(--token-color-focus-action-internal);
+  color: var(--token-button-foreground-color-primary-focus);
+  background-color: var(--token-button-surface-color-primary-focus);
+  border-color: var(--token-button-border-color-primary-focus-internal);
 }
 .hds-button--color-primary:focus::before, .hds-button--color-primary.mock-focus::before {
-  top: -6px;
-  right: -6px;
-  bottom: -6px;
-  left: -6px;
-  border-color: var(--token-color-focus-action-external);
-  border-radius: calc(var(--token-border-radius-small) + 3px + 2px);
+  top: calc(-1 * (var(--token-button-border-width) + var(--token-button-focus-border-width) + 2px));
+  right: calc(-1 * (var(--token-button-border-width) + var(--token-button-focus-border-width) + 2px));
+  bottom: calc(-1 * (var(--token-button-border-width) + var(--token-button-focus-border-width) + 2px));
+  left: calc(-1 * (var(--token-button-border-width) + var(--token-button-focus-border-width) + 2px));
+  border-color: var(--token-button-border-color-primary-focus-external);
+  border-radius: calc(var(--token-button-border-radius) + var(--token-button-focus-border-width) + 2px);
 }
 .hds-button--color-primary:active, .hds-button--color-primary.mock-active {
-  color: var(--token-color-foreground-high-contrast);
-  background-color: var(--token-color-palette-blue-400);
-  border-color: var(--token-color-palette-blue-400);
+  color: var(--token-button-foreground-color-primary-active);
+  background-color: var(--token-button-surface-color-primary-active);
+  border-color: var(--token-button-border-color-primary-active);
   box-shadow: none;
 }
 .hds-button--color-primary:active::before, .hds-button--color-primary.mock-active::before {
@@ -3595,29 +3688,29 @@ a.hds-button:hover, a.hds-button:focus, a.hds-button:active, a.hds-button.mock-h
 }
 
 .hds-button--color-secondary {
-  color: var(--token-color-foreground-primary);
-  background-color: var(--token-color-surface-faint);
-  border-color: var(--token-color-border-strong);
+  color: var(--token-button-foreground-color-secondary-default);
+  background-color: var(--token-button-surface-color-secondary-default);
+  border-color: var(--token-button-border-color-secondary-default);
   box-shadow: var(--token-elevation-low-box-shadow);
 }
 .hds-button--color-secondary:hover, .hds-button--color-secondary.mock-hover {
-  color: var(--token-color-foreground-primary);
-  background-color: var(--token-color-surface-primary);
-  border-color: var(--token-color-border-strong);
+  color: var(--token-button-foreground-color-secondary-hover);
+  background-color: var(--token-button-surface-color-secondary-hover);
+  border-color: var(--token-button-border-color-secondary-hover);
   cursor: pointer;
 }
 .hds-button--color-secondary:focus, .hds-button--color-secondary.mock-focus {
-  color: var(--token-color-foreground-primary);
-  background-color: var(--token-color-surface-faint);
-  border-color: var(--token-color-focus-action-internal);
+  color: var(--token-button-foreground-color-secondary-focus);
+  background-color: var(--token-button-surface-color-secondary-focus);
+  border-color: var(--token-button-border-color-secondary-focus-internal);
 }
 .hds-button--color-secondary:focus::before, .hds-button--color-secondary.mock-focus::before {
-  border-color: var(--token-color-focus-action-external);
+  border-color: var(--token-button-border-color-secondary-focus-external);
 }
 .hds-button--color-secondary:active, .hds-button--color-secondary.mock-active {
-  color: var(--token-color-foreground-primary);
-  background-color: var(--token-color-surface-interactive-active);
-  border-color: var(--token-color-border-strong);
+  color: var(--token-button-foreground-color-secondary-active);
+  background-color: var(--token-button-surface-color-secondary-active);
+  border-color: var(--token-button-border-color-secondary-active);
   box-shadow: none;
 }
 .hds-button--color-secondary:active::before, .hds-button--color-secondary.mock-active::before {
@@ -3625,27 +3718,28 @@ a.hds-button:hover, a.hds-button:focus, a.hds-button:active, a.hds-button.mock-h
 }
 
 .hds-button--color-tertiary {
-  color: var(--token-color-foreground-action);
-  background-color: transparent;
-  border-color: transparent;
+  color: var(--token-button-foreground-color-tertiary-default);
+  background-color: var(--token-button-surface-color-tertiary-default);
+  border-color: var(--token-button-border-color-tertiary-default);
 }
 .hds-button--color-tertiary:hover, .hds-button--color-tertiary.mock-hover {
-  color: var(--token-color-foreground-action-hover);
-  background-color: var(--token-color-surface-primary);
-  border-color: var(--token-color-border-strong);
+  color: var(--token-button-foreground-color-tertiary-hover);
+  background-color: var(--token-button-surface-color-tertiary-hover);
+  border-color: var(--token-button-border-color-tertiary-hover);
   cursor: pointer;
 }
 .hds-button--color-tertiary:focus, .hds-button--color-tertiary.mock-focus {
-  color: var(--token-color-foreground-action);
-  border-color: var(--token-color-focus-action-internal);
+  color: var(--token-button-foreground-color-tertiary-focus);
+  background-color: var(--token-button-surface-color-tertiary-focus);
+  border-color: var(--token-button-border-color-tertiary-focus-internal);
 }
 .hds-button--color-tertiary:focus::before, .hds-button--color-tertiary.mock-focus::before {
-  border-color: var(--token-color-focus-action-external);
+  border-color: var(--token-button-border-color-tertiary-focus-external);
 }
 .hds-button--color-tertiary:active, .hds-button--color-tertiary.mock-active {
-  color: var(--token-color-foreground-action-active);
-  background-color: var(--token-color-surface-interactive-active);
-  border-color: var(--token-color-border-strong);
+  color: var(--token-button-foreground-color-tertiary-active);
+  background-color: var(--token-button-surface-color-tertiary-active);
+  border-color: var(--token-button-border-color-tertiary-active);
   box-shadow: none;
 }
 .hds-button--color-tertiary:active::before, .hds-button--color-tertiary.mock-active::before {
@@ -3660,29 +3754,29 @@ a.hds-button:hover, a.hds-button:focus, a.hds-button:active, a.hds-button.mock-h
 }
 
 .hds-button--color-critical {
-  color: var(--token-color-foreground-critical-on-surface);
-  background-color: var(--token-color-surface-critical);
-  border-color: var(--token-color-foreground-critical-on-surface);
+  color: var(--token-button-foreground-color-critical-default);
+  background-color: var(--token-button-surface-color-critical-default);
+  border-color: var(--token-button-border-color-critical-default);
   box-shadow: var(--token-elevation-low-box-shadow);
 }
 .hds-button--color-critical:hover, .hds-button--color-critical.mock-hover {
-  color: var(--token-color-foreground-high-contrast);
-  background-color: var(--token-color-palette-red-300);
-  border-color: var(--token-color-palette-red-400);
+  color: var(--token-button-foreground-color-critical-hover);
+  background-color: var(--token-button-surface-color-critical-hover);
+  border-color: var(--token-button-border-color-critical-hover);
   cursor: pointer;
 }
 .hds-button--color-critical:focus, .hds-button--color-critical.mock-focus {
-  color: var(--token-color-foreground-critical-on-surface);
-  background-color: var(--token-color-surface-critical);
-  border-color: var(--token-color-focus-critical-internal);
+  color: var(--token-button-foreground-color-critical-focus);
+  background-color: var(--token-button-surface-color-critical-focus);
+  border-color: var(--token-button-border-color-critical-focus-internal);
 }
 .hds-button--color-critical:focus::before, .hds-button--color-critical.mock-focus::before {
-  border-color: var(--token-color-focus-critical-external);
+  border-color: var(--token-button-border-color-critical-focus-external);
 }
 .hds-button--color-critical:active, .hds-button--color-critical.mock-active {
-  color: var(--token-color-foreground-high-contrast);
-  background-color: var(--token-color-palette-red-400);
-  border-color: var(--token-color-palette-red-400);
+  color: var(--token-button-foreground-color-critical-active);
+  background-color: var(--token-button-surface-color-critical-active);
+  border-color: var(--token-button-border-color-critical-active);
   box-shadow: none;
 }
 .hds-button--color-critical:active::before, .hds-button--color-critical.mock-active::before {
@@ -3690,57 +3784,57 @@ a.hds-button:hover, a.hds-button:focus, a.hds-button:active, a.hds-button.mock-h
 }
 
 .hds-button--size-small {
-  min-height: 1.75rem;
-  padding: 0.375rem 0.6875rem;
+  min-height: var(--token-button-height-small);
+  padding: var(--token-button-padding-vertical-small) var(--token-button-padding-horizontal-small);
 }
 .hds-button--size-small .hds-button__icon {
-  width: 0.75rem;
-  height: 0.75rem;
+  width: var(--token-button-icon-size-small);
+  height: var(--token-button-icon-size-small);
 }
 .hds-button--size-small .hds-button__text {
-  font-size: 0.8125rem;
-  line-height: 0.875rem;
+  font-size: var(--token-button-typography-font-size-small);
+  line-height: var(--token-button-typography-line-height-small);
 }
 .hds-button--size-small.hds-button--is-icon-only {
-  min-width: 1.75rem;
-  padding-right: 0.375rem;
-  padding-left: 0.375rem;
+  min-width: var(--token-button-height-small);
+  padding-right: var(--token-button-padding-vertical-small);
+  padding-left: var(--token-button-padding-vertical-small);
 }
 
 .hds-button--size-medium {
-  min-height: 2.25rem;
-  padding: 0.5625rem 0.9375rem;
+  min-height: var(--token-button-height-medium);
+  padding: var(--token-button-padding-vertical-medium) var(--token-button-padding-horizontal-medium);
 }
 .hds-button--size-medium .hds-button__icon {
-  width: 1rem;
-  height: 1rem;
+  width: var(--token-button-icon-size-medium);
+  height: var(--token-button-icon-size-medium);
 }
 .hds-button--size-medium .hds-button__text {
-  font-size: 0.875rem;
-  line-height: 1rem;
+  font-size: var(--token-button-typography-font-size-medium);
+  line-height: var(--token-button-typography-line-height-medium);
 }
 .hds-button--size-medium.hds-button--is-icon-only {
-  min-width: 2.25rem;
-  padding-right: 0.5625rem;
-  padding-left: 0.5625rem;
+  min-width: var(--token-button-height-medium);
+  padding-right: var(--token-button-padding-vertical-medium);
+  padding-left: var(--token-button-padding-vertical-medium);
 }
 
 .hds-button--size-large {
-  min-height: 3rem;
-  padding: 0.6875rem 1.1875rem;
+  min-height: var(--token-button-height-large);
+  padding: var(--token-button-padding-vertical-large) var(--token-button-padding-horizontal-large);
 }
 .hds-button--size-large .hds-button__icon {
-  width: 1.5rem;
-  height: 1.5rem;
+  width: var(--token-button-icon-size-large);
+  height: var(--token-button-icon-size-large);
 }
 .hds-button--size-large .hds-button__text {
-  font-size: 1rem;
-  line-height: 1.5rem;
+  font-size: var(--token-button-typography-font-size-large);
+  line-height: var(--token-button-typography-line-height-large);
 }
 .hds-button--size-large.hds-button--is-icon-only {
-  min-width: 3rem;
-  padding-right: 0.6875rem;
-  padding-left: 0.6875rem;
+  min-width: var(--token-button-height-large);
+  padding-right: var(--token-button-padding-vertical-large);
+  padding-left: var(--token-button-padding-vertical-large);
 }
 
 .hds-button--is-inline {
@@ -4837,7 +4931,7 @@ button.hds-button[href]::after {
   color: var(--token-color-foreground-primary);
   background-color: var(--token-color-surface-faint);
   border: 1px solid var(--token-color-border-strong);
-  border-radius: var(--token-border-radius-small);
+  border-radius: var(--token-button-border-radius);
   outline-style: solid;
   outline-color: transparent;
   isolation: isolate;
@@ -4852,13 +4946,13 @@ button.hds-button[href]::after {
 }
 .hds-dropdown-toggle-icon:focus::before, .hds-dropdown-toggle-icon.mock-focus::before {
   position: absolute;
-  top: -4px;
-  right: -4px;
-  bottom: -4px;
-  left: -4px;
+  top: calc(-1 * (var(--token-button-border-width) + var(--token-button-focus-border-width)));
+  right: calc(-1 * (var(--token-button-border-width) + var(--token-button-focus-border-width)));
+  bottom: calc(-1 * (var(--token-button-border-width) + var(--token-button-focus-border-width)));
+  left: calc(-1 * (var(--token-button-border-width) + var(--token-button-focus-border-width)));
   z-index: -1;
-  border: 3px solid transparent;
-  border-radius: calc(var(--token-border-radius-small) + 3px);
+  border: var(--token-button-focus-border-width) solid transparent;
+  border-radius: calc(var(--token-button-border-radius) + var(--token-button-focus-border-width));
   content: "";
 }
 .hds-dropdown-toggle-icon:focus::before, .hds-dropdown-toggle-icon.mock-focus::before {
@@ -4872,9 +4966,9 @@ button.hds-button[href]::after {
   border-color: transparent;
 }
 .hds-dropdown-toggle-icon:disabled, .hds-dropdown-toggle-icon.mock-disabled {
-  color: var(--token-color-foreground-disabled);
-  background-color: var(--token-color-surface-faint);
-  border-color: var(--token-color-border-primary);
+  color: var(--token-button-foreground-color-disabled);
+  background-color: var(--token-button-surface-color-disabled);
+  border-color: var(--token-button-border-color-disabled);
   box-shadow: none;
   cursor: not-allowed;
 }
@@ -4883,7 +4977,7 @@ button.hds-button[href]::after {
   display: flex;
   align-items: center;
   justify-content: center;
-  border-radius: calc(var(--token-border-radius-small) - 2px);
+  border-radius: calc(var(--token-button-border-radius) - 2px);
 }
 .hds-dropdown-toggle-icon__wrapper img {
   width: 100%;
@@ -4909,15 +5003,15 @@ button.hds-button[href]::after {
 .hds-dropdown-toggle-button {
   position: relative;
   display: flex;
-  gap: 0.375rem;
+  gap: var(--token-button-gap);
   align-items: center;
   justify-content: center;
   width: auto;
   font-weight: var(--token-typography-font-weight-regular);
   font-family: var(--token-typography-font-stack-text);
   text-decoration: none;
-  border: 1px solid transparent;
-  border-radius: var(--token-border-radius-small);
+  border: var(--token-button-border-width) solid transparent;
+  border-radius: var(--token-button-border-radius);
   outline-style: solid;
   outline-color: transparent;
   isolation: isolate;
@@ -4927,19 +5021,19 @@ button.hds-button[href]::after {
 }
 .hds-dropdown-toggle-button:focus::before, .hds-dropdown-toggle-button.mock-focus::before {
   position: absolute;
-  top: -4px;
-  right: -4px;
-  bottom: -4px;
-  left: -4px;
+  top: calc(-1 * (var(--token-button-border-width) + var(--token-button-focus-border-width)));
+  right: calc(-1 * (var(--token-button-border-width) + var(--token-button-focus-border-width)));
+  bottom: calc(-1 * (var(--token-button-border-width) + var(--token-button-focus-border-width)));
+  left: calc(-1 * (var(--token-button-border-width) + var(--token-button-focus-border-width)));
   z-index: -1;
-  border: 3px solid transparent;
-  border-radius: calc(var(--token-border-radius-small) + 3px);
+  border: var(--token-button-focus-border-width) solid transparent;
+  border-radius: calc(var(--token-button-border-radius) + var(--token-button-focus-border-width));
   content: "";
 }
 .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 {
-  color: var(--token-color-foreground-disabled);
-  background-color: var(--token-color-surface-faint);
-  border-color: var(--token-color-border-primary);
+  color: var(--token-button-foreground-color-disabled);
+  background-color: var(--token-button-surface-color-disabled);
+  border-color: var(--token-button-border-color-disabled);
   box-shadow: none;
   cursor: not-allowed;
 }
@@ -4955,57 +5049,57 @@ button.hds-button[href]::after {
 }
 
 .hds-dropdown-toggle-button--size-small {
-  min-height: 1.75rem;
-  padding: 0.375rem 0.6875rem;
+  min-height: var(--token-button-height-small);
+  padding: var(--token-button-padding-vertical-small) var(--token-button-padding-horizontal-small);
 }
 .hds-dropdown-toggle-button--size-small .hds-dropdown-toggle-button__icon {
-  width: 0.75rem;
-  height: 0.75rem;
+  width: var(--token-button-icon-size-small);
+  height: var(--token-button-icon-size-small);
 }
 .hds-dropdown-toggle-button--size-small .hds-dropdown-toggle-button__text {
-  font-size: 0.8125rem;
-  line-height: 0.875rem;
+  font-size: var(--token-button-typography-font-size-small);
+  line-height: var(--token-button-typography-line-height-small);
 }
 .hds-dropdown-toggle-button--size-small.hds-dropdown-toggle-button--is-icon-only {
-  min-width: 1.75rem;
-  padding-right: 0.375rem;
-  padding-left: 0.375rem;
+  min-width: var(--token-button-height-small);
+  padding-right: var(--token-button-padding-vertical-small);
+  padding-left: var(--token-button-padding-vertical-small);
 }
 
 .hds-dropdown-toggle-button--size-medium {
-  min-height: 2.25rem;
-  padding: 0.5625rem 0.9375rem;
+  min-height: var(--token-button-height-medium);
+  padding: var(--token-button-padding-vertical-medium) var(--token-button-padding-horizontal-medium);
 }
 .hds-dropdown-toggle-button--size-medium .hds-dropdown-toggle-button__icon {
-  width: 1rem;
-  height: 1rem;
+  width: var(--token-button-icon-size-medium);
+  height: var(--token-button-icon-size-medium);
 }
 .hds-dropdown-toggle-button--size-medium .hds-dropdown-toggle-button__text {
-  font-size: 0.875rem;
-  line-height: 1rem;
+  font-size: var(--token-button-typography-font-size-medium);
+  line-height: var(--token-button-typography-line-height-medium);
 }
 .hds-dropdown-toggle-button--size-medium.hds-dropdown-toggle-button--is-icon-only {
-  min-width: 2.25rem;
-  padding-right: 0.5625rem;
-  padding-left: 0.5625rem;
+  min-width: var(--token-button-height-medium);
+  padding-right: var(--token-button-padding-vertical-medium);
+  padding-left: var(--token-button-padding-vertical-medium);
 }
 
 .hds-dropdown-toggle-button--size-large {
-  min-height: 3rem;
-  padding: 0.6875rem 1.1875rem;
+  min-height: var(--token-button-height-large);
+  padding: var(--token-button-padding-vertical-large) var(--token-button-padding-horizontal-large);
 }
 .hds-dropdown-toggle-button--size-large .hds-dropdown-toggle-button__icon {
-  width: 1.5rem;
-  height: 1.5rem;
+  width: var(--token-button-icon-size-large);
+  height: var(--token-button-icon-size-large);
 }
 .hds-dropdown-toggle-button--size-large .hds-dropdown-toggle-button__text {
-  font-size: 1rem;
-  line-height: 1.5rem;
+  font-size: var(--token-button-typography-font-size-large);
+  line-height: var(--token-button-typography-line-height-large);
 }
 .hds-dropdown-toggle-button--size-large.hds-dropdown-toggle-button--is-icon-only {
-  min-width: 3rem;
-  padding-right: 0.6875rem;
-  padding-left: 0.6875rem;
+  min-width: var(--token-button-height-large);
+  padding-right: var(--token-button-padding-vertical-large);
+  padding-left: var(--token-button-padding-vertical-large);
 }
 
 .hds-dropdown-toggle-button--size-small {
@@ -5021,34 +5115,34 @@ button.hds-button[href]::after {
 }
 
 .hds-dropdown-toggle-button--color-primary {
-  color: var(--token-color-foreground-high-contrast);
-  background-color: var(--token-color-palette-blue-200);
-  border-color: var(--token-color-palette-blue-300);
+  color: var(--token-button-foreground-color-primary-default);
+  background-color: var(--token-button-surface-color-primary-default);
+  border-color: var(--token-button-border-color-primary-default);
   box-shadow: var(--token-elevation-low-box-shadow);
 }
 .hds-dropdown-toggle-button--color-primary:hover, .hds-dropdown-toggle-button--color-primary.mock-hover {
-  color: var(--token-color-foreground-high-contrast);
-  background-color: var(--token-color-palette-blue-300);
-  border-color: var(--token-color-palette-blue-400);
+  color: var(--token-button-foreground-color-primary-hover);
+  background-color: var(--token-button-surface-color-primary-hover);
+  border-color: var(--token-button-border-color-primary-hover);
   cursor: pointer;
 }
 .hds-dropdown-toggle-button--color-primary:focus, .hds-dropdown-toggle-button--color-primary.mock-focus {
-  color: var(--token-color-foreground-high-contrast);
-  background-color: var(--token-color-palette-blue-200);
-  border-color: var(--token-color-focus-action-internal);
+  color: var(--token-button-foreground-color-primary-focus);
+  background-color: var(--token-button-surface-color-primary-focus);
+  border-color: var(--token-button-border-color-primary-focus-internal);
 }
 .hds-dropdown-toggle-button--color-primary:focus::before, .hds-dropdown-toggle-button--color-primary.mock-focus::before {
-  top: -6px;
-  right: -6px;
-  bottom: -6px;
-  left: -6px;
-  border-color: var(--token-color-focus-action-external);
-  border-radius: calc(var(--token-border-radius-small) + 3px + 2px);
+  top: calc(-1 * (var(--token-button-border-width) + var(--token-button-focus-border-width) + 2px));
+  right: calc(-1 * (var(--token-button-border-width) + var(--token-button-focus-border-width) + 2px));
+  bottom: calc(-1 * (var(--token-button-border-width) + var(--token-button-focus-border-width) + 2px));
+  left: calc(-1 * (var(--token-button-border-width) + var(--token-button-focus-border-width) + 2px));
+  border-color: var(--token-button-border-color-primary-focus-external);
+  border-radius: calc(var(--token-button-border-radius) + var(--token-button-focus-border-width) + 2px);
 }
 .hds-dropdown-toggle-button--color-primary:active, .hds-dropdown-toggle-button--color-primary.mock-active {
-  color: var(--token-color-foreground-high-contrast);
-  background-color: var(--token-color-palette-blue-400);
-  border-color: var(--token-color-palette-blue-400);
+  color: var(--token-button-foreground-color-primary-active);
+  background-color: var(--token-button-surface-color-primary-active);
+  border-color: var(--token-button-border-color-primary-active);
   box-shadow: none;
 }
 .hds-dropdown-toggle-button--color-primary:active::before, .hds-dropdown-toggle-button--color-primary.mock-active::before {
@@ -5056,29 +5150,29 @@ button.hds-button[href]::after {
 }
 
 .hds-dropdown-toggle-button--color-secondary {
-  color: var(--token-color-foreground-primary);
-  background-color: var(--token-color-surface-faint);
-  border-color: var(--token-color-border-strong);
+  color: var(--token-button-foreground-color-secondary-default);
+  background-color: var(--token-button-surface-color-secondary-default);
+  border-color: var(--token-button-border-color-secondary-default);
   box-shadow: var(--token-elevation-low-box-shadow);
 }
 .hds-dropdown-toggle-button--color-secondary:hover, .hds-dropdown-toggle-button--color-secondary.mock-hover {
-  color: var(--token-color-foreground-primary);
-  background-color: var(--token-color-surface-primary);
-  border-color: var(--token-color-border-strong);
+  color: var(--token-button-foreground-color-secondary-hover);
+  background-color: var(--token-button-surface-color-secondary-hover);
+  border-color: var(--token-button-border-color-secondary-hover);
   cursor: pointer;
 }
 .hds-dropdown-toggle-button--color-secondary:focus, .hds-dropdown-toggle-button--color-secondary.mock-focus {
-  color: var(--token-color-foreground-primary);
-  background-color: var(--token-color-surface-faint);
-  border-color: var(--token-color-focus-action-internal);
+  color: var(--token-button-foreground-color-secondary-focus);
+  background-color: var(--token-button-surface-color-secondary-focus);
+  border-color: var(--token-button-border-color-secondary-focus-internal);
 }
 .hds-dropdown-toggle-button--color-secondary:focus::before, .hds-dropdown-toggle-button--color-secondary.mock-focus::before {
-  border-color: var(--token-color-focus-action-external);
+  border-color: var(--token-button-border-color-secondary-focus-external);
 }
 .hds-dropdown-toggle-button--color-secondary:active, .hds-dropdown-toggle-button--color-secondary.mock-active {
-  color: var(--token-color-foreground-primary);
-  background-color: var(--token-color-surface-interactive-active);
-  border-color: var(--token-color-border-strong);
+  color: var(--token-button-foreground-color-secondary-active);
+  background-color: var(--token-button-surface-color-secondary-active);
+  border-color: var(--token-button-border-color-secondary-active);
   box-shadow: none;
 }
 .hds-dropdown-toggle-button--color-secondary:active::before, .hds-dropdown-toggle-button--color-secondary.mock-active::before {
@@ -5749,8 +5843,8 @@ button.hds-button[href]::after {
   background-repeat: no-repeat;
   background-position: 15px 50%;
   background-size: var(--token-form-text-input-background-image-size);
-  border: 1px solid var(--token-color-border-strong);
-  border-radius: var(--token-border-radius-small);
+  border: var(--token-button-border-width) solid var(--token-color-border-strong);
+  border-radius: var(--token-button-border-radius);
   box-shadow: var(--token-elevation-low-box-shadow);
   cursor: pointer;
 }
@@ -5787,9 +5881,9 @@ button.hds-button[href]::after {
   color: var(--token-color-foreground-disabled);
 }
 .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 {
-  color: var(--token-color-foreground-disabled);
-  background-color: var(--token-color-surface-faint);
-  border-color: var(--token-color-border-primary);
+  color: var(--token-button-foreground-color-disabled);
+  background-color: var(--token-button-surface-color-disabled);
+  border-color: var(--token-button-border-color-disabled);
   box-shadow: none;
   cursor: not-allowed;
   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");
@@ -6936,7 +7030,7 @@ button.hds-button[href]::after {
   .hds-form-key-value-inputs__row {
     display: grid;
     flex-grow: 1;
-    grid-template-columns: var(--hds-key-value-inputs-columns, 1fr 1fr 2.25rem);
+    grid-template-columns: var(--hds-key-value-inputs-columns, 1fr 1fr var(--token-button-height-medium));
     align-items: flex-end;
     column-gap: 8px;
     row-gap: 0;
@@ -8587,7 +8681,7 @@ button.hds-button[href]::after {
   border-color: var(--token-color-palette-neutral-500);
   color: var(--token-color-foreground-high-contrast);
   background-color: var(--token-color-palette-neutral-700);
-  border-radius: var(--token-border-radius-small);
+  border-radius: var(--token-button-border-radius);
 }
 .hds-side-nav__dropdown .hds-button:not(.hds-dropdown * *,
 .ember-basic-dropdown-trigger * *,
@@ -9770,7 +9864,7 @@ button.hds-button[href]::after {
   border-color: var(--token-color-palette-neutral-500);
   color: var(--token-color-foreground-high-contrast);
   background-color: var(--token-color-palette-neutral-700);
-  border-radius: var(--token-border-radius-small);
+  border-radius: var(--token-button-border-radius);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -11317,6 +11411,14 @@ button.hds-button[href]::after {
   text-align: right;
 }
 
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+.hds-theme-context {
+  display: contents;
+}
+
 /**
  * Copyright (c) HashiCorp, Inc.
  * SPDX-License-Identifier: MPL-2.0