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

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

@@ -29,7 +29,7 @@ $hds-super-select-item-height: 36px;
     padding-right: calc(var(--token-form-control-padding) + 21px); // extra space for the icon
     padding-bottom: 4px;
     padding-left: 11px;
-    color: var(--token-form-control-base-foreground-value-color);
+    color: var(--token-form-control-base-foreground-color);
     line-height: var(--token-typography-body-200-line-height);
     background-color: var(--token-form-control-base-surface-color-default);
     background-image: var(--token-form-select-background-image-data-url);
@@ -75,7 +75,7 @@ $hds-super-select-item-height: 36px;
     }
 
     .ember-power-select-placeholder {
-      color: var(--token-form-control-base-foreground-placeholder-color);
+      color: var(--token-form-control-base-placeholder-foreground-color);
       font-size: var(--token-typography-body-200-font-size);
       font-family: var(--token-typography-body-200-font-family);
       line-height: var(--token-typography-body-200-line-height);
@@ -165,7 +165,7 @@ $hds-super-select-item-height: 36px;
 
     // states
     &[aria-current="true"] {
-      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);
     }
 
@@ -246,7 +246,7 @@ $hds-super-select-item-height: 36px;
     width: 100%;
     min-height: $hds-super-select-item-height;
     padding: var(--token-form-control-padding);
-    color: var(--token-form-control-base-foreground-value-color);
+    color: var(--token-form-control-base-foreground-color);
     font-size: var(--token-typography-body-200-font-size);
     font-family: var(--token-typography-body-200-font-family);
     line-height: 1rem;
@@ -257,7 +257,7 @@ $hds-super-select-item-height: 36px;
 
     // placeholder
     &::placeholder {
-      color: var(--token-form-control-base-foreground-placeholder-color);
+      color: var(--token-form-control-base-placeholder-foreground-color);
     }
 
     // status
@@ -327,7 +327,7 @@ $hds-super-select-item-height: 36px;
 
   // Cancel button
   .ember-power-select-trigger-multiple-input {
-    color: var(--token-form-control-base-foreground-value-color);
+    color: var(--token-form-control-base-foreground-color);
     font-size: var(--token-typography-body-200-font-size);
     font-family: var(--token-typography-body-200-font-family);
 

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

@@ -13,7 +13,7 @@
   width: 100%;
   max-width: 100%;
   padding: var(--token-form-control-padding);
-  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);
   border: var(--token-form-control-border-width) solid var(--token-form-control-base-border-color-default);
   border-radius: var(--token-form-control-border-radius);
@@ -22,7 +22,7 @@
   // PLACEHOLDER
 
   ::placeholder {
-    color: var(--token-form-control-base-foreground-placeholder-color);
+    color: var(--token-form-control-base-placeholder-foreground-color);
   }
 
   // STATUS

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

@@ -14,7 +14,7 @@
   max-width: 100%;
   min-height: 36px;
   padding: var(--token-form-control-padding);
-  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);
   border: var(--token-form-control-border-width) solid var(--token-form-control-base-border-color-default);
   border-radius: var(--token-form-control-border-radius);
@@ -24,7 +24,7 @@
   // PLACEHOLDER
 
   ::placeholder {
-    color: var(--token-form-control-base-foreground-placeholder-color);
+    color: var(--token-form-control-base-placeholder-foreground-color);
   }
 
   // STATUS

package/dist/styles/components/icon-tile.scss

@@ -39,14 +39,15 @@ $hds-icon-tile-border-width: 1px;
   margin: auto;
 }
 
+// secondary overlay icon
 .hds-icon-tile__extra {
   position: absolute;
   right: -6px;
   bottom: -6px;
   display: flex;
   box-sizing: content-box; // the border is outside
-  background-color: var(--token-color-surface-primary);
-  border: 1px solid var(--token-color-border-primary);
+  background-color: var(--token-icon-tile-surface-color-overlay);
+  border: 1px solid var(--token-icon-tile-border-color-overlay);
 }
 
 .hds-icon-tile__extra-icon {
@@ -62,41 +63,41 @@ $hds-icon-tile-size-props: (
   "small": (
     // 28px = 1.75rem
     "size": 1.75rem,
-    "border-radius": 5px,
+    "border-radius": var(--token-border-radius-small),
     // 16px = 1rem
     "icon-size": 1rem,
     // 18px = 1.125rem
     "logo-size": 1.125rem,
     // 18px = 1.125rem
     "extra-size": 1.125rem,
-    "extra-border-radius": 4px,
+    "extra-border-radius": var(--token-border-radius-small),
     "extra-icon-size": 0.75rem,
   ),
   "medium": (
     // 40px = 2.5rem
     "size": 2.5rem,
-    "border-radius": 6px,
+    "border-radius": var(--token-border-radius-medium),
     // 24px = 1.5rem
     "icon-size": 1.5rem,
     // 28px = 1.75rem
     "logo-size": 1.75rem,
     // 20px = 1.25rem
     "extra-size": 1.25rem,
-    "extra-border-radius": 5px,
+    "extra-border-radius": var(--token-border-radius-small),
     // 12px = .75rem
     "extra-icon-size": 0.75rem,
   ),
   "large": (
     // 48px = 3rem
     "size": 3rem,
-    "border-radius": 6px,
+    "border-radius": var(--token-border-radius-medium),
     // 24px = 1.5rem
     "icon-size": 1.5rem,
     // 32px = 2rem
     "logo-size": 2rem,
     // 24px = 1.5rem
     "extra-size": 1.5rem,
-    "extra-border-radius": 5px,
+    "extra-border-radius": var(--token-border-radius-small),
     "extra-icon-size": 1rem,
   ),
 );
@@ -133,9 +134,15 @@ $hds-icon-tile-size-props: (
 // LOGO - COLOR
 
 .hds-icon-tile--logo {
-  // notice: we are using colored icons so we don't need to set the "color" property here
   background-color: var(--token-color-surface-primary);
-  border-color: var(--token-color-border-primary);
+  border-color: var(--token-icon-tile-border-color-logo);
+
+  // We use the non-colored logos and apply the brand color via CSS
+  @each $product in $hds-icon-tile-colors-products {
+    &.hds-icon-tile--color-#{$product} {
+      color: var(--token-color-#{$product}-brand);
+    }
+  }
 }
 
 // ICON - COLOR
@@ -150,7 +157,7 @@ $hds-icon-tile-size-props: (
     @if ($product == "hcp") {
       // exception for HCP (we use neutral colors, we don't have specific product colors for foreground/background)
       &.hds-icon-tile--color-hcp {
-        color: var(--token-color-palette-#{$product}-brand);
+        color: var(--token-color-#{$product}-brand);
         background-color: var(--token-color-surface-strong);
       }
     } @else {

package/dist/styles/components/index.scss

@@ -1,5 +1,5 @@
 /**
- * Copyright (c) HashiCorp, Inc.
+ * Copyright IBM Corp. 2021, 2026
  * SPDX-License-Identifier: MPL-2.0
  */
 
@@ -45,6 +45,7 @@
 @use "./tabs";
 @use "./tag";
 @use "./text";
+@use "./theme-context";
 @use "./time";
 @use "./toast";
 @use "./tooltip";

package/dist/styles/components/layout/grid.scss

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2021, 2025
+ * Copyright IBM Corp. 2021, 2026
  * SPDX-License-Identifier: MPL-2.0
  */
 

package/dist/styles/components/link/inline.scss

@@ -10,16 +10,22 @@
 // see https://github.com/hashicorp/design-system-components/issues/132
 //
 
+@use "../../mixins/carbonization" as *;
+
 .hds-link-inline {
-  border-radius: 2px; // this is used by the outline too
+  border-radius: var(--token-border-radius-x-small); // this is used by the outline too
 
   &:focus,
   &.mock-focus,
   &:focus-visible {
     text-decoration: none;
-    outline: 2px solid var(--token-color-focus-action-internal);
+    outline: var(--token-link-inline-outline-width) solid var(--token-link-inline-outline-color);
     outline-offset: 1px;
   }
+
+  @include hds-apply-only-if-carbon() {
+    text-decoration: underline;
+  }
 }
 
 .hds-link-inline__icon {
@@ -29,11 +35,11 @@
   vertical-align: text-bottom; // don't use "middle" here or it will extend beyond the focus ring
 
   .hds-link-inline--icon-leading > & {
-    margin-right: 0.25em;
+    margin-right: var(--token-link-inline-icon-margin-horizontal);
   }
 
   .hds-link-inline--icon-trailing > & {
-    margin-left: 0.25em;
+    margin-left: var(--token-link-inline-icon-margin-horizontal);
   }
 }
 

package/dist/styles/components/link/standalone.scss

@@ -11,25 +11,23 @@
 
 @use "sass:map";
 @use "../../mixins/focus-ring" as *;
+@use "../../mixins/carbonization" as *;
 
 $hds-link-standalone-sizes: ("small", "medium", "large");
-$hds-link-standalone-focus-border-radius: var(--token-border-radius-small);
-$hds-link-standalone-border-width: 1px;
 
 .hds-link-standalone {
   display: flex;
-  gap: 0.375rem;
+  gap: var(--token-link-standalone-gap);
   align-items: center;
   justify-content: center;
   width: fit-content;
-  padding-top: 4px;
-  padding-bottom: 4px;
+  padding: var(--token-link-standalone-padding-vertical) 0;
   font-weight: var(--token-typography-font-weight-regular);
   font-family: var(--token-typography-font-stack-text);
-  background-color: transparent; // needs to exist for a11y
-  border: $hds-link-standalone-border-width solid transparent; // needs to exist AND be transparent for a11y
   // notice: the text decoration is applied directly to the "text" container because of a bug in Safari (see https://github.com/hashicorp/design-system-components/issues/159)
   text-decoration-color: transparent;
+
+  @include hds-focus-ring-with-pseudo-element($left: -2px, $right: -2px, $radius: var(--token-border-radius-small));
 }
 
 .hds-link-standalone__icon {
@@ -42,55 +40,30 @@ $hds-link-standalone-border-width: 1px;
   text-decoration: underline;
   text-decoration-color: transparent;
   transition: text-decoration-color 0.25s ease-in;
+
+  @include hds-apply-only-if-carbon() {
+    transition: none;
+  }
 }
 
 // SIZE
 
-// these values later may come from the design tokens
-$hds-link-standalone-size-props: (
-  "small": (
-    // 13px = 0.8125rem
-    "font-size": 0.8125rem,
-    // 12px = 0.75rem
-    "icon-size": 0.75rem,
-    // 16px ~= 1.231
-    "line-height": 1.231,
-  ),
-  "medium": (
-    // 14px = 0.875rem
-    "font-size": 0.875rem,
-    // 16px = 1rem
-    "icon-size": 1rem,
-    // 16px ~= 1.143
-    "line-height": 1.143,
-  ),
-  "large": (
-    // 16px = 1rem
-    "font-size": 1rem,
-    // 24px = 1.5rem
-    "icon-size": 1.5rem,
-    // 24px = 1.5
-    "line-height": 1.5,
-  ),
-);
-
 @each $size in $hds-link-standalone-sizes {
   .hds-link-standalone--size-#{$size} {
     .hds-link-standalone__icon {
-      width: map.get($hds-link-standalone-size-props, $size, "icon-size");
-      height: map.get($hds-link-standalone-size-props, $size, "icon-size");
+      width: var(--token-link-standalone-icon-size-#{$size});
+      height: var(--token-link-standalone-icon-size-#{$size});
     }
 
     .hds-link-standalone__text {
-      font-size: map.get($hds-link-standalone-size-props, $size, "font-size");
-      line-height: map.get($hds-link-standalone-size-props, $size, "line-height");
+      font-size: var(--token-link-standalone-typography-font-size-#{$size});
+      line-height: var(--token-link-standalone-typography-line-height-#{$size});
     }
   }
 }
 
 // COLORS & STATES
 // The "primary" and "secondary" variants share a lot of styles for the interactive states
-// Note: the order of the pseuo-selectors need to stay the way they are
 
 .hds-link-standalone--color-primary {
   color: var(--token-color-foreground-action);
@@ -100,7 +73,7 @@ $hds-link-standalone-size-props: (
     color: var(--token-color-foreground-action-hover);
 
     .hds-link-standalone__text {
-      text-decoration-color: #4e81e8; // custom color by design
+      text-decoration-color: var(--token-color-foreground-action-hover);
     }
   }
 
@@ -109,11 +82,7 @@ $hds-link-standalone-size-props: (
     color: var(--token-color-foreground-action-active);
 
     .hds-link-standalone__text {
-      text-decoration-color: #396ed6; // custom color by design
-    }
-
-    &::before {
-      background-color: var(--token-color-surface-action);
+      text-decoration-color: var(--token-color-foreground-action-active);
     }
   }
 }
@@ -124,7 +93,7 @@ $hds-link-standalone-size-props: (
   &:hover,
   &.mock-hover {
     .hds-link-standalone__text {
-      text-decoration-color: #4d4d4f; // custom color by design
+      text-decoration-color: var(--token-color-foreground-strong);
     }
   }
 
@@ -133,39 +102,7 @@ $hds-link-standalone-size-props: (
     color: var(--token-color-foreground-primary);
 
     .hds-link-standalone__text {
-      text-decoration-color: #6e7075; // custom color by design
-    }
-
-    &::before {
-      background-color: var(--token-color-surface-interactive-active);
+      text-decoration-color: var(--token-color-foreground-primary);
     }
   }
 }
-
-// this is how much the focus is visually "shifted" from the bounding box of the
-// notice: you have to take in account also the inset shadow of the focus (see Figma file and also "focus-ring" mixin)
-$hds-link-standalone-focus-shift: 4px;
-
-.hds-link-standalone {
-  // the position absolute of an element is computed from the inside of the border of the container
-  // so we have to take in account the border width of the pseudo-element container itself
-  $hds-shift: $hds-link-standalone-focus-shift + $hds-link-standalone-border-width;
-  // for visual/optical balance we add an extra 2px to the "shift" near the text (opposite the icon)
-  $hds-shift-extra: $hds-shift + 2px;
-
-  // notice: this is used not only for the focus, but also to increase the clickable area
-  @include hds-focus-ring-with-pseudo-element(
-    $right: -$hds-shift,
-    $left: -$hds-shift,
-    $radius: $hds-link-standalone-focus-border-radius
-  );
-
-  // we need to override a couple of values for better visual alignment
-  &.hds-link-standalone--icon-position-leading::before {
-    right: -$hds-shift-extra;
-  }
-
-  &.hds-link-standalone--icon-position-trailing::before {
-    left: -$hds-shift-extra;
-  }
-}

package/dist/styles/components/modal.scss

@@ -45,28 +45,32 @@
 
 // color variants
 
-// Note ".hds-modal--color-neutral" uses default color and background-color styles from the dialog-primitive
-
 .hds-modal--color-warning {
   .hds-dialog-primitive__wrapper-header {
-    background: var(--token-color-surface-warning);
-    border-bottom: 1px solid var(--token-color-border-warning);
+    background: var(--token-modal-header-surface-color-warning);
+    border-bottom-color: var(--token-modal-header-border-color-critical);
+  }
+
+  .hds-dialog-primitive__header {
+    color: var(--token-modal-header-foreground-color-warning);
   }
 
-  .hds-dialog-primitive__header,
   .hds-dialog-primitive__tagline {
-    color: var(--token-color-foreground-warning-on-surface);
+    color: var(--token-modal-header-tagline-warning);
   }
 }
 
 .hds-modal--color-critical {
   .hds-dialog-primitive__wrapper-header {
-    background: var(--token-color-surface-critical);
-    border-bottom: 1px solid var(--token-color-border-critical);
+    background: var(--token-modal-header-surface-color-critical);
+    border-bottom-color: var(--token-modal-header-border-color-critical);
+  }
+
+  .hds-dialog-primitive__header {
+    color: var(--token-modal-header-foreground-color-critical);
   }
 
-  .hds-dialog-primitive__header,
   .hds-dialog-primitive__tagline {
-    color: var(--token-color-foreground-critical-on-surface);
+    color: var(--token-modal-header-tagline-critical);
   }
 }

package/dist/styles/components/pagination.scss

@@ -9,6 +9,10 @@
 
 @use "../mixins/focus-ring" as *;
 @use "../mixins/breakpoints" as *;
+@use "../mixins/carbonization" as *;
+
+// Note: the equivalent token was removed in Figma so we are now using a Sass variable for this value
+$pagination-nav-control-padding-horizontal: 12px;
 
 // * Pagination Parent (wrapper) component
 // -------------------------------------------------------------------
@@ -21,6 +25,7 @@
   align-items: center;
   margin: 0 auto;
 
+  // Responsive layout styles
   @include hds-breakpoint-below("lg") {
     display: flex;
     flex-wrap: wrap;
@@ -33,6 +38,7 @@
     justify-self: flex-start;
     margin-right: var(--token-pagination-child-spacing-horizontal);
 
+    // Responsive layout styles
     @include hds-breakpoint-below("lg") {
       margin-top: var(--token-pagination-child-spacing-vertical);
       margin-left: var(--token-pagination-child-spacing-horizontal);
@@ -42,6 +48,7 @@
   .hds-pagination-nav {
     grid-area: nav;
 
+    // Responsive layout styles
     @include hds-breakpoint-below("lg") {
       justify-content: center;
       order: -1;
@@ -55,10 +62,55 @@
     justify-self: flex-end;
     margin-left: var(--token-pagination-child-spacing-horizontal);
 
+    // Responsive layout styles
     @include hds-breakpoint-below("lg") {
       margin-top: var(--token-pagination-child-spacing-vertical);
       margin-right: var(--token-pagination-child-spacing-horizontal);
     }
+
+    @include hds-apply-only-if-carbon() {
+      height: 100%;
+      // Override responsive layout styles for Carbon themes
+      margin-top: 0;
+      margin-right: 0;
+    }
+  }
+}
+
+// Pagination component variants
+
+// Pagination Compact (equivalent to Carbon Pagination)
+.hds-pagination--compact {
+  background-color: var(--token-pagination-bar-surface-color);
+
+  @include hds-apply-only-if-carbon() {
+    border-top: 1px solid var(--token-pagination-bar-border-color);
+
+    // Override responsive layout styles for Carbon themes for Compact pagination
+    @include hds-breakpoint-below("lg") {
+      display: grid;
+      flex-wrap: nowrap;
+      justify-content: initial;
+    }
+
+    .hds-pagination-nav {
+      // Override responsive layout styles for Carbon themes
+      order: 0;
+      width: auto;
+    }
+
+    .hds-pagination-nav__control {
+      border-left: 1px solid var(--token-pagination-bar-border-color);
+    }
+
+    .hds-pagination-nav__arrow--direction-next {
+      border-right: 1px solid var(--token-pagination-bar-border-color);
+    }
+
+    .hds-pagination-size-selector {
+      padding-left: 16px;
+      border-left: 1px solid var(--token-pagination-bar-border-color);
+    }
   }
 }
 
@@ -91,12 +143,14 @@
   align-items: center;
   height: var(--token-pagination-nav-control-height);
   // border width is subtracted from padding:
-  padding: 0 calc(var(--token-pagination-nav-control-padding-horizontal) - 1px);
+  padding: 0 calc(#{$pagination-nav-control-padding-horizontal} - 1px);
   color: var(--token-color-foreground-primary);
   text-decoration: none;
   background-color: transparent;
   border: 1px solid transparent;
 
+  // NOTE: The "focus-ring" currently included a 1px white solid box-shadow (--token-focus-ring-action-box-shadow).
+  // The white color could possibly be replaced with a transparent color for carbon themes.
   @include hds-focus-ring-with-pseudo-element(
     $top: var(--token-pagination-nav-control-focus-inset),
     $right: var(--token-pagination-nav-control-focus-inset),
@@ -104,14 +158,33 @@
     $left: var(--token-pagination-nav-control-focus-inset)
   );
 
+  @include hds-apply-only-if-carbon() {
+    // Adjust positioning of focus ring for Carbon themes
+    &::before {
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+    }
+  }
+
   &:hover,
   &.mock-hover {
-    color: var(--token-color-foreground-action-hover);
+    color: var(--token-pagination-nav-control-foreground-color-hover);
+  }
+
+  &:not(.hds-pagination-nav__number--is-selected, [disabled]) {
+    &:hover,
+    &.mock-hover,
+    &:active,
+    &.mock-active {
+      background-color: var(--token-pagination-nav-surface-color-hover);
+    }
   }
 
   &:active,
   &.mock-active {
-    color: var(--token-color-foreground-action-active);
+    color: var(--token-pagination-nav-control-foreground-color-active);
   }
 }
 
@@ -139,14 +212,14 @@
 
 .hds-pagination-nav__number--is-selected {
   position: relative;
-  color: var(--token-color-foreground-action);
+  color: var(--token-pagination-nav-control-foreground-color-default);
 
   &:hover {
-    color: var(--token-color-foreground-action-hover);
+    color: var(--token-pagination-nav-control-foreground-color-hover);
   }
 
   &:active {
-    color: var(--token-color-foreground-action-active);
+    color: var(--token-pagination-nav-control-foreground-color-active);
   }
 
   // indicator underline
@@ -159,17 +232,23 @@
     left: calc(var(--token-pagination-nav-indicator-spacing) - 1px);
     height: var(--token-pagination-nav-indicator-height);
     margin: 0 auto;
+    color: var(--token-color-foreground-action);
     background-color: currentColor;
-    border-radius: 2px;
+    border-radius: var(--token-border-radius-x-small);
     content: "";
   }
+
+  // Note: We set the font-weight here to work with the carbon themes
+  .hds-pagination-nav__number-content {
+    font-weight: var(--token-pagination-nav-control-typography-font-weight-active);
+  }
 }
 
 .hds-pagination-nav__ellipsis {
   display: flex;
   align-items: center;
   height: var(--token-pagination-nav-control-height);
-  padding: 0 var(--token-pagination-nav-control-padding-horizontal);
+  padding: 0 $pagination-nav-control-padding-horizontal;
   color: var(--token-color-foreground-faint);
 }
 
@@ -181,6 +260,12 @@
 
   > label {
     white-space: nowrap;
+
+    @include hds-apply-only-if-carbon() {
+      &::after {
+        content: ":";
+      }
+    }
   }
 
   // notice: this is an `Form::Select::Base` component, slightly customized
@@ -192,6 +277,17 @@
     font-size: var(--token-typography-body-100-font-size);
     font-family: var(--token-typography-body-100-font-family);
     line-height: var(--token-typography-body-100-line-height);
+    // TODO: Test simplifying value in select.scss
+    // from: background-position: right var(--token-form-select-background-image-position-right-x) top
+    // var(--token-form-select-background-image-position-top-y);
+    // to: background-position: center right var(--token-form-select-background-image-position-right-x);
+    // (Check in various browsers)
     background-position: center right 5px;
+
+    @include hds-apply-only-if-carbon() {
+      margin-left: 0;
+      background-color: transparent;
+      border: 0;
+    }
   }
 }