@hashicorp/design-system-components 6.2.0 → 6.3.0-rc-20260514101332

package/dist/styles/components/dialog-primitive.scss

@@ -7,8 +7,7 @@
 // DIALOG PRIMITIVE
 //
 
-$hds-dialog-primitive-horizontal-padding: 24px;
-$hds-dialog-primitive-vertical-padding: 16px;
+@use "../mixins/carbonization" as *;
 
 // WRAPPER CONTAINER (<dialog>)
 
@@ -29,8 +28,9 @@ $hds-dialog-primitive-vertical-padding: 16px;
   height: 100%;
   margin: 0;
   padding: 0;
+  color: var(--token-color-foreground-primary);
   background: var(--token-color-surface-primary);
-  border: none;
+  border: 1px solid var(--token-dialog-primitive-border-color);
 }
 
 // Note: this wraps both .hds-dialog-primitive__header & .hds-dialog-primitive__description
@@ -45,6 +45,10 @@ $hds-dialog-primitive-vertical-padding: 16px;
   &:not(:has(> *)) {
     display: none;
   }
+
+  @include hds-apply-only-if-carbon() {
+    border-bottom: none;
+  }
 }
 
 .hds-dialog-primitive__wrapper-body {
@@ -66,6 +70,10 @@ $hds-dialog-primitive-vertical-padding: 16px;
   &:not(:has(> *)) {
     display: none;
   }
+
+  @include hds-apply-only-if-carbon() {
+    border-top: none;
+  }
 }
 
 // HEADER
@@ -74,10 +82,16 @@ $hds-dialog-primitive-vertical-padding: 16px;
   display: flex;
   gap: 16px;
   align-items: flex-start;
-  padding: $hds-dialog-primitive-vertical-padding $hds-dialog-primitive-horizontal-padding;
-  color: var(--token-color-foreground-strong); // default color (applied to both the title and the icon)
+  padding: var(--token-dialog-primitive-padding-vertical) var(--token-dialog-primitive-padding-horizontal);
+  color: var(--token-color-foreground-strong); // applied to both the title and the icon
   border-top-left-radius: inherit;
   border-top-right-radius: inherit;
+
+  @include hds-apply-only-if-carbon() {
+    position: relative;
+    // we increase the right padding to avoid that the content ends up below the dismiss button (which is absolutely positioned)
+    padding-right: calc(var(--token-dialog-primitive-padding-horizontal) + 32px);
+  }
 }
 
 .hds-dialog-primitive__icon {
@@ -88,34 +102,60 @@ $hds-dialog-primitive-vertical-padding: 16px;
 .hds-dialog-primitive__title {
   flex-grow: 1;
   margin: 0;
+  // we need a mix of component-level and semantic tokens, to account for the difference in font-weight between HDS and CDS for the title
+  font-weight: var(--token-dialog-primitive-header-title-typography-font-weight);
+  font-size: var(--token-typography-display-300-font-size);
+  font-family: var(--token-typography-display-300-font-family);
+  line-height: var(--token-typography-display-300-line-height);
 }
 
 .hds-dialog-primitive__tagline {
   margin-bottom: 4px;
-  color: var(--token-color-foreground-faint); // default color
+  // note: in Carbon's Modal the color of the tagline is "textSecondary", but in the SidePanel it's "textPrimary";
+  // to keep things simple and consistent and avoid extra tokens, we've decided to use this semantic color
+  color: var(--token-color-foreground-faint);
+  // we need a mix of component-level and semantic tokens, to account for the difference in font-size/line-height between HDS and CDS for the title
+  font-weight: var(--token-typography-font-weight-regular);
+  font-size: var(--token-dialog-primitive-header-tagline-typography-font-size);
+  font-family: var(--token-typography-font-stack-text);
+  line-height: var(--token-dialog-primitive-header-tagline-typography-line-height);
 }
 
 .hds-dialog-primitive__dismiss {
   align-self: flex-start;
+  // for visual alignment
+  margin: -4px;
+
+  @include hds-apply-only-if-carbon() {
+    position: absolute;
+    top: 0;
+    right: 0;
+    margin: 0;
+  }
 }
 
 // DESCRIPTION
 // (currently used only in Flyout, not in Modal)
 
 .hds-dialog-primitive__description {
-  padding: 0 $hds-dialog-primitive-horizontal-padding $hds-dialog-primitive-vertical-padding;
+  padding: 0 var(--token-dialog-primitive-padding-horizontal) var(--token-dialog-primitive-padding-vertical);
 }
 
 // BODY
 
 .hds-dialog-primitive__body {
-  padding: $hds-dialog-primitive-horizontal-padding;
+  // by design, the vertical padding for the "body" element is the same value as the horizontal one
+  padding: var(--token-dialog-primitive-padding-horizontal);
+
+  @include hds-apply-only-if-carbon() {
+    padding-top: 0;
+  }
 }
 
 // FOOTER
 
 .hds-dialog-primitive__footer {
-  padding: $hds-dialog-primitive-vertical-padding $hds-dialog-primitive-horizontal-padding;
+  padding: var(--token-dialog-primitive-padding-vertical) var(--token-dialog-primitive-padding-horizontal);
   background: var(--token-color-surface-faint);
   border-bottom-right-radius: inherit;
   border-bottom-left-radius: inherit;
@@ -135,5 +175,5 @@ $hds-dialog-primitive-vertical-padding: 16px;
   inset: 0;
   z-index: 49;
   background: var(--token-color-palette-neutral-700);
-  opacity: 0.5;
+  opacity: 0.6;
 }

package/dist/styles/components/dismiss-button.scss

@@ -10,31 +10,36 @@
 @use "../mixins/focus-ring" as *;
 
 .hds-dismiss-button {
+  display: inline-flex;
   flex: none;
+  align-items: center;
+  justify-content: center;
+  width: var(--token-dismiss-button-size);
+  height: var(--token-dismiss-button-size);
   padding: 0;
-  color: var(--token-color-foreground-faint);
+  color: var(--token-dismiss-button-foreground-color-default);
   background-color: transparent;
-  border: none;
+  border: 1px solid transparent;
+  border-radius: var(--token-border-radius-medium);
   cursor: pointer;
 
+  .hds-icon {
+    width: var(--token-dismiss-button-icon-size);
+    height: var(--token-dismiss-button-icon-size);
+  }
+
   &:hover,
   &.mock-hover {
-    // we re-use the pseudo-element created by the "focus-ring" mixin
-    &::before {
-      background-color: rgba(#dedfe3, 0.4);
-    }
+    background-color: var(--token-dismiss-button-surface-color-hover);
   }
 
-  // notice: this is used not only for the focus, but also to increase the clickable area
-  @include hds-focus-ring-with-pseudo-element($top: -4px, $right: -4px, $bottom: -4px, $left: -4px);
+  // we use `-1px` here so the dark blue line seems the border of the button
+  @include hds-focus-ring-with-pseudo-element($top: -1px, $right: -1px, $bottom: -1px, $left: -1px);
 
   &:active,
   &.mock-active {
-    color: var(--token-color-foreground-secondary);
-
-    &::before {
-      background-color: rgba(#dedfe3, 0.4);
-      border: 1px solid var(--token-color-border-strong);
-    }
+    color: var(--token-dismiss-button-foreground-color-active);
+    background-color: var(--token-dismiss-button-surface-color-active);
+    border-color: var(--token-dismiss-button-border-color-active);
   }
 }

package/dist/styles/components/dropdown.scss

@@ -11,11 +11,22 @@
 
 @use "../mixins/button" as *;
 @use "../mixins/focus-ring" as *;
+@use "../mixins/carbonization" as *;
 
-$hds-dropdown-toggle-border-radius: $hds-button-border-radius;
+$hds-dropdown-toggle-button-carbon-gap: 6px;
 
 // DROPDOWN
 
+.hds-dropdown {
+  .hds-dropdown__content {
+    display: none;
+
+    &[popover]:popover-open {
+      display: flex;
+    }
+  }
+}
+
 .hds-dropdown--is-inline {
   display: inline-block;
 
@@ -30,40 +41,46 @@ $hds-dropdown-toggle-border-radius: $hds-button-border-radius;
 .hds-dropdown-toggle-icon {
   position: relative;
   display: flex;
-  gap: 2px;
+  gap: var(--token-dropdown-toggle-icon-gap);
   align-items: center;
   justify-content: center;
-  padding: 1px;
+  padding: var(--token-dropdown-toggle-icon-padding);
   // this variant mimics the secondary button, but not entirely (eg. it doesn't have an elevation shadow)
   // so we need to provide the same color values but without using the `hds-button-color-secondary()` mixin
-  color: var(--token-color-foreground-primary);
-  background-color: var(--token-color-surface-faint);
-  border: 1px solid var(--token-color-border-strong);
-  border-radius: $hds-dropdown-toggle-border-radius;
+  color: var(--token-button-foreground-color-secondary-default);
+  background-color: var(--token-button-surface-color-secondary-default);
+  border: 1px solid var(--token-button-border-color-secondary-default);
+  border-radius: var(--token-button-border-radius);
   outline-style: solid; // used to avoid double outline+focus-ring in Safari (see https://github.com/hashicorp/design-system-components/issues/161#issuecomment-1031548656)
   outline-color: transparent; // We need this to be transparent for a11y
   isolation: isolate; // used to create a new stacking context (needed to have the pseudo element below text/icon but not the parent container)
 
   &:hover,
   &.mock-hover {
-    background-color: var(--token-color-surface-interactive);
+    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;
   }
 
   &:focus,
   &.mock-focus {
     @include hds-button-state-focus();
-    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);
 
     &::before {
-      border-color: var(--token-color-focus-action-external);
+      border-color: var(--token-button-border-color-secondary-focus-external);
     }
   }
 
   &:active,
   &.mock-active {
-    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);
 
     &::before {
       border-color: transparent;
@@ -81,8 +98,8 @@ $hds-dropdown-toggle-border-radius: $hds-button-border-radius;
   align-items: center;
   justify-content: center;
   border-radius: calc(
-    #{$hds-dropdown-toggle-border-radius} - 2px
-  ); // $hds-dropdown-toggle-border-radius - (1px padding + 1px border) (= 3px)
+    var(--token-button-border-radius) - 2px
+  ); // var(--token-button-border-radius) - (1px padding + 1px border) (= 3px)
 
   img {
     width: 100%;
@@ -128,10 +145,10 @@ $hds-dropdown-toggle-border-radius: $hds-button-border-radius;
 
   &:disabled,
   &.mock-disabled,
-  &:disabled:focus,
-  &.mock-disabled:focus,
   &:disabled:hover,
-  &.mock-disabled:hover {
+  &.mock-disabled:hover,
+  &:disabled:focus,
+  &.mock-disabled:focus {
     @include hds-button-state-disabled();
 
     .hds-dropdown-toggle-button__badge,
@@ -140,12 +157,16 @@ $hds-dropdown-toggle-border-radius: $hds-button-border-radius;
       background-color: var(--token-color-surface-strong);
     }
   }
+
+  @include hds-apply-only-if-carbon() {
+    gap: $hds-dropdown-toggle-button-carbon-gap;
+  }
 }
 
 @include hds-button-size-classes("hds-dropdown-toggle-button");
 
 .hds-dropdown-toggle-button--size-small {
-  padding-right: 0.375rem;
+  padding-right: var(--token-dropdown-toggle-button-padding-right-small); // was 0.375rem
 
   // For small variant with chevron, force the icon size to custom (even if the SGV size is `16px`)
   .hds-dropdown-toggle-chevron .hds-icon {
@@ -155,7 +176,7 @@ $hds-dropdown-toggle-border-radius: $hds-button-border-radius;
 }
 
 .hds-dropdown-toggle-button--size-medium {
-  padding-right: 0.5625rem;
+  padding-right: var(--token-dropdown-toggle-button-padding-right-medium); // was 0.5625rem
 }
 
 .hds-dropdown-toggle-button--color-primary {
@@ -164,6 +185,15 @@ $hds-dropdown-toggle-border-radius: $hds-button-border-radius;
 
 .hds-dropdown-toggle-button--color-secondary {
   @include hds-button-color-secondary();
+
+  @include hds-apply-only-if-carbon() {
+    .hds-dropdown-toggle-button__badge,
+    .hds-dropdown-toggle-button__count {
+      color: var(--token-badge-foreground-color-neutral-filled);
+      background-color: var(--token-badge-surface-color-neutral-filled);
+      border-color: transparent;
+    }
+  }
 }
 
 .hds-dropdown-toggle-button--width-full {
@@ -191,6 +221,13 @@ $hds-dropdown-toggle-border-radius: $hds-button-border-radius;
   margin-left: auto;
   padding-left: 2px;
 
+  // We add extra spacing only when used within a toggle button vs. in a toggle icon
+  .hds-dropdown-toggle-button & {
+    @include hds-apply-only-if-carbon() {
+      padding-left: calc(32px - #{$hds-dropdown-toggle-button-carbon-gap});
+    }
+  }
+
   .hds-icon-chevron-down {
     @media (prefers-reduced-motion: no-preference) {
       transition: transform 0.3s;
@@ -205,21 +242,24 @@ $hds-dropdown-toggle-border-radius: $hds-button-border-radius;
   }
 }
 
-// LIST
-// UL ELEMENT
-// GOES INSIDE HDS::PopoverPrimitive's popover element
+// CONTENT
 
 .hds-dropdown__content {
   position: relative;
   display: flex;
   flex-direction: column;
-  width: max-content; // notice: this is important because being in a position absolute means the layout algorithm assigns a width of 0 and this impacts on the flex algorithm of the children (in some cases they don't use the full width)
+  width: max-content; // Important: in position absolute the layout algorithm assigns a width of 0 which impacts the flex algorithm of the children (in some cases they don't use the full width)
   min-width: 200px;
   max-width: 400px;
-  background-color: var(--token-color-surface-primary);
+  background-color: var(--token-dropdown-surface-color-primary);
   border-radius: var(--token-border-radius-medium);
   box-shadow: var(--token-surface-high-box-shadow);
 
+  @include hds-apply-only-if-carbon() {
+    border-radius: 0;
+    box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 30%);
+  }
+
   // the "popover" attributes comes with pre-defined styling so we need to override it
   :where(&[popover]) {
     width: fit-content;
@@ -234,21 +274,15 @@ $hds-dropdown-toggle-border-radius: $hds-button-border-radius;
   }
 }
 
-.hds-dropdown {
-  .hds-dropdown__content {
-    display: none;
-
-    &[popover]:popover-open {
-      display: flex;
-    }
-  }
-}
-
 .hds-dropdown__content--fixed-width {
   min-width: initial;
   max-width: initial;
 }
 
+// LIST
+// UL ELEMENT
+// GOES INSIDE CONTENT & HDS::PopoverPrimitive's popover element
+
 .hds-dropdown__list {
   flex: 1 1 auto;
   margin: 0;
@@ -256,8 +290,14 @@ $hds-dropdown-toggle-border-radius: $hds-button-border-radius;
   overflow-y: auto;
   list-style: none;
   overscroll-behavior: contain;
+
+  @include hds-apply-only-if-carbon() {
+    padding: 0;
+  }
 }
 
+// HEADER & FOOTER
+
 .hds-dropdown__header,
 .hds-dropdown__footer {
   position: relative;
@@ -307,6 +347,17 @@ $hds-dropdown-toggle-border-radius: $hds-button-border-radius;
 .hds-dropdown-list-item--variant-copy-item {
   width: 100%;
   padding: 10px 16px 12px;
+
+  @include hds-apply-only-if-carbon() {
+    // We add an outline to make the hover state visible for Carbon themes
+    // (outline is used vs. border to avoid increasing height)
+    .hds-copy-snippet--color-secondary {
+      &:hover,
+      &.mock-hover {
+        outline: 1px solid var(--token-color-border-strong);
+      }
+    }
+  }
 }
 
 // HDS::DROPDOWN::LIST-ITEM::DESCRIPTION
@@ -351,6 +402,10 @@ $hds-dropdown-toggle-border-radius: $hds-button-border-radius;
     outline-style: solid; // used to avoid double outline+focus-ring in Safari (see https://github.com/hashicorp/design-system-components/issues/161#issuecomment-1031548656)
     outline-color: transparent;
 
+    @include hds-apply-only-if-carbon() {
+      padding: 11px 16px;
+    }
+
     // this is used for the left "hover" indicator
     &::before {
       position: absolute;
@@ -374,6 +429,11 @@ $hds-dropdown-toggle-border-radius: $hds-button-border-radius;
       z-index: -1;
       border-radius: var(--token-border-radius-small);
       content: "";
+
+      @include hds-apply-only-if-carbon() {
+        top: 3px;
+        bottom: 3px;
+      }
     }
 
     // Notice: to avoid too much duplication we define two local CSS variables
@@ -435,6 +495,17 @@ $hds-dropdown-toggle-border-radius: $hds-button-border-radius;
       }
     }
   }
+
+  @include hds-apply-only-if-carbon() {
+    button,
+    a,
+    input {
+      // Hide the side highlight border for interactive children
+      &::before {
+        display: none;
+      }
+    }
+  }
 }
 
 .hds-dropdown-list-item__interactive-icon {
@@ -456,37 +527,54 @@ $hds-dropdown-toggle-border-radius: $hds-button-border-radius;
   text-align: left; // the button element was centering text
 }
 
+// Interactive List Item color variants
+
+// Action color (default)
 .hds-dropdown-list-item--color-action {
   a,
   button {
-    color: var(--token-color-foreground-primary);
+    color: var(--token-dropdown-list-item-foreground-color-action-default);
 
     // assign the values to the local CSS variables used above
-    --current-color-hover: var(--token-color-foreground-action-hover);
-    --current-color-focus: var(--token-color-foreground-action-active);
-    --current-color-active: var(--token-color-foreground-action-active);
+    --current-color-hover: var(--token-dropdown-list-item-foreground-color-action-hover);
+    --current-color-focus: var(--token-dropdown-list-item-foreground-color-action-focus);
+    --current-color-active: var(--token-dropdown-list-item-foreground-color-action-active);
 
     &::after {
       --current-focus-ring-box-shadow: var(--token-focus-ring-action-box-shadow);
     }
   }
+
+  // Selects item containing an interactive child which is hovered
+  &:has(button:hover, button.mock-hover, a:hover, a.mock-hover, input:hover, input.mock-hover) {
+    background-color: var(--token-dropdown-list-item-surface-color-action-hover);
+  }
 }
 
+// Critical color
 .hds-dropdown-list-item--color-critical {
   a,
   button {
-    color: var(--token-color-foreground-critical);
+    color: var(--token-dropdown-list-item-foreground-color-critical-default);
 
     // assign the values to the local CSS variables used above
-    --current-color-hover: var(--token-color-palette-red-300);
-    --current-color-focus: var(--token-color-palette-red-400);
-    --current-color-active: var(--token-color-palette-red-400);
+    --current-color-hover: var(--token-dropdown-list-item-foreground-color-critical-hover);
+    --current-color-focus: var(--token-dropdown-list-item-foreground-color-critical-focus);
+    --current-color-active: var(--token-dropdown-list-item-foreground-color-critical-active);
 
     &::after {
       --current-background-color: var(--token-color-surface-critical);
       --current-focus-ring-box-shadow: var(--token-focus-ring-critical-box-shadow);
     }
   }
+
+  // Selects item containing an interactive child which has a particular state
+  // focus, active & focus use the same colors
+  &:has(button:hover, button.mock-hover, a:hover, a.mock-hover, input:hover, input.mock-hover),
+  &:has(button:focus, button.mock-focus, a:focus, a.mock-focus, input:focus, input.mock-focus),
+  &:has(button:active, button.mock-active, a:active, a.mock-active, input:active, input.mock-active) {
+    background-color: var(--token-dropdown-list-item-surface-color-critical-hover);
+  }
 }
 
 .hds-dropdown-list-item__interactive-loading-wrapper {
@@ -494,6 +582,10 @@ $hds-dropdown-toggle-border-radius: $hds-button-border-radius;
   align-items: center;
   padding: 8px 10px 8px 16px;
 
+  @include hds-apply-only-if-carbon() {
+    padding: 11px 16px;
+  }
+
   .hds-dropdown-list-item__interactive-text {
     color: var(--token-color-foreground-faint);
   }
@@ -510,12 +602,18 @@ $hds-dropdown-toggle-border-radius: $hds-button-border-radius;
   width: 100%;
   height: 4px;
 
+  // Remove extra spacing around separator
+  @include hds-apply-only-if-carbon() {
+    height: 1px;
+    margin: 4px 0;
+  }
+
   &::before {
     position: absolute;
     right: 6px;
     bottom: 0;
     left: 6px;
-    border-bottom: 1px solid var(--token-color-border-primary);
+    border-bottom: 1px solid var(--token-dropdown-separator-border-color);
     content: "";
   }
 }
@@ -560,6 +658,10 @@ $hds-dropdown-toggle-border-radius: $hds-button-border-radius;
   align-items: self-start;
   padding: 8px 16px;
 
+  @include hds-apply-only-if-carbon() {
+    padding: 11px 16px;
+  }
+
   .hds-dropdown-list-item__control {
     flex-shrink: 0;
     margin-top: 2px;

package/dist/styles/components/filter-bar.scss

@@ -1,5 +1,5 @@
 /**
- * Copyright (c) HashiCorp, Inc.
+ * Copyright IBM Corp. 2021, 2026
  * SPDX-License-Identifier: MPL-2.0
  */
 

package/dist/styles/components/flyout.scss

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2021, 2025
+ * Copyright IBM Corp. 2021, 2026
  * SPDX-License-Identifier: MPL-2.0
  */
 
@@ -24,11 +24,8 @@ $hds-flyout-max-width: calc(100vw - var(--hds-app-side-nav-width-minimized) / 2)
   inset: 0;
   height: 100vh;
   max-height: 100vh;
-  background: var(--token-color-surface-primary);
   border: none;
-  box-shadow:
-    0 2px 3px 0 #3b3d4540,
-    0 12px 24px 0 #3b3d4559; // TODO: convert to token
+  box-shadow: var(--token-elevation-overlay-box-shadow);
 
   // the `<dialog>` element uses a special "open" attribute to determine its visibility status
   &:not([open]) {

package/dist/styles/components/form/file-input.scss

@@ -37,8 +37,8 @@
   background-repeat: no-repeat;
   background-position: 15px 50%;
   background-size: var(--token-form-text-input-background-image-size);
-  border: $hds-button-border-width solid var(--token-color-border-strong);
-  border-radius: $hds-button-border-radius;
+  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;
 }

package/dist/styles/components/form/key-value-inputs.scss

@@ -12,9 +12,6 @@
 @use "../../mixins/button" as *;
 @use "../../mixins/screen-reader-only" as *;
 
-// this is the width of the icon-only button
-$hds-delete-button-width: map.get($hds-button-size-props, "medium", "min-height");
-
 // notice: this is a <fieldset> element
 .hds-form-key-value-inputs {
   display: flex;
@@ -43,7 +40,8 @@ $hds-delete-button-width: map.get($hds-button-size-props, "medium", "min-height"
   @include hds-breakpoint-above("md") {
     display: grid;
     flex-grow: 1;
-    grid-template-columns: var(--hds-key-value-inputs-columns, 1fr 1fr $hds-delete-button-width);
+    // `var(--token-button-height-medium)` is the width/height of the icon-only button
+    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;

package/dist/styles/components/form/radio-card.scss

@@ -58,7 +58,7 @@
   &:focus-within,
   &.mock-focus {
     border-color: var(--token-color-focus-action-internal);
-    box-shadow: 0 0 0 3px var(--token-color-focus-action-external);
+    outline: 3px solid var(--token-color-focus-action-external);
   }
 
   &.hds-form-radio-card--checked {

package/dist/styles/components/form/select.scss

@@ -13,7 +13,7 @@
   max-width: 100%;
   padding: var(--token-form-control-padding);
   padding-right: calc(var(--token-form-control-padding) + 24px); // extra space for the icon
-  color: var(--token-form-control-base-foreground-value-color);
+  color: var(--token-form-control-base-foreground-color);
   background-color: var(--token-form-control-base-surface-color-default);
   background-image: var(--token-form-select-background-image-data-url);
   background-repeat: no-repeat;