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

package/dist/styles/components/app-side-nav/toggle-button.scss

@@ -7,6 +7,8 @@
 // APP-SIDE-NAV > TOGGLE BUTTON
 //
 
+@use "../../mixins/carbonization" as *;
+
 .hds-app-side-nav__toggle-button {
   position: absolute;
   top: var(--token-app-side-nav-wrapper-padding-vertical); // visually align with :header content
@@ -20,7 +22,7 @@
   padding: 0 4px;
   color: var(--token-color-foreground-primary);
   background: none;
-  background-color: var(--token-app-side-nav-color-surface-primary);
+  background-color: var(--token-app-side-nav-wrapper-surface-color);
   border: var(--token-app-side-nav-wrapper-border-width) solid var(--token-app-side-nav-wrapper-border-color);
   border-left-color: transparent;
   border-top-right-radius: var(--token-app-side-nav-toggle-button-border-radius);
@@ -42,8 +44,12 @@
     border-left: var(--token-app-side-nav-wrapper-border-width) solid var(--token-app-side-nav-wrapper-border-color);
     border-bottom-left-radius: var(--token-app-side-nav-toggle-button-border-radius);
     box-shadow: 0 var(--token-app-side-nav-toggle-button-border-radius) 0
-      var(--token-app-side-nav-color-surface-primary);
+      var(--token-app-side-nav-wrapper-surface-color);
     content: "";
+
+    @include hds-apply-only-if-carbon() {
+      top: -1px;
+    }
   }
 
   &::after {
@@ -57,31 +63,33 @@
     border-left: var(--token-app-side-nav-wrapper-border-width) solid var(--token-app-side-nav-wrapper-border-color);
     border-bottom-left-radius: var(--token-app-side-nav-toggle-button-border-radius);
     box-shadow: 0 var(--token-app-side-nav-toggle-button-border-radius) 0
-      var(--token-app-side-nav-color-surface-primary);
+      var(--token-app-side-nav-wrapper-surface-color);
     transform: scaleY(-1); // rotate so same clip path can be used
     content: "";
+
+    @include hds-apply-only-if-carbon() {
+      bottom: -1px;
+    }
   }
 
   &:hover,
   &.mock-hover {
     width: 30px;
-    background-color: var(--token-app-side-nav-color-surface-interactive-hover);
+    background-color: var(--token-color-surface-interactive-hover);
 
     &::before,
     &::after {
-      box-shadow: 0 var(--token-app-side-nav-toggle-button-border-radius) 0
-        var(--token-app-side-nav-color-surface-interactive-hover);
+      box-shadow: 0 var(--token-app-side-nav-toggle-button-border-radius) 0 var(--token-color-surface-interactive-hover);
     }
   }
 
   &:active,
   &.mock-active {
-    background-color: var(--token-app-side-nav-color-surface-interactive-active);
+    background-color: var(--token-color-palette-neutral-300);
 
     &::before,
     &::after {
-      box-shadow: 0 var(--token-app-side-nav-toggle-button-border-radius) 0
-        var(--token-app-side-nav-color-surface-interactive-active);
+      box-shadow: 0 var(--token-app-side-nav-toggle-button-border-radius) 0 var(--token-color-palette-neutral-300);
     }
   }
 

package/dist/styles/components/app-side-nav/vars.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/badge-count.scss

@@ -7,12 +7,9 @@
 // BADGE-COUNT COMPONENT
 //
 
-@use "sass:math";
-@use "sass:map";
-
-$hds-badge-count-types: ("flat", "inverted", "outlined");
 $hds-badge-count-sizes: ("small", "medium", "large");
-$hds-badge-count-border-width: 1px;
+$hds-badge-count-colors: ("neutral", "neutral-dark-mode");
+$hds-badge-count-types: ("filled", "inverted", "outlined");
 
 .hds-badge-count {
   display: inline-flex;
@@ -20,87 +17,41 @@ $hds-badge-count-border-width: 1px;
   max-width: 100%;
   font-weight: var(--token-typography-font-weight-medium);
   font-family: var(--token-typography-font-stack-text);
-  border: $hds-badge-count-border-width solid transparent;
+  border-style: solid;
+  border-width: 1px;
 }
 
 // SIZE
 
-// these values later may come from the design tokens
-$hds-badge-count-size-props: (
-  "small": (
-    // 13px = 0.8125rem
-    "font-size": 0.8125rem,
-    "height": 1.25rem,
-    // 16px = 1.2308
-    "line-height": 1.2308,
-    "padding-vertical": 0.125rem,
-    "padding-horizontal": 0.5rem,
-  ),
-  "medium": (
-    // 13px = 0.8125rem
-    "font-size": 0.8125rem,
-    "height": 1.5rem,
-    // 16px = 1.2308
-    "line-height": 1.2308,
-    "padding-vertical": 0.25rem,
-    "padding-horizontal": 0.75rem,
-  ),
-  "large": (
-    // 16px = 1rem
-    "font-size": 1rem,
-    "height": 2rem,
-    // 24px = 1.5
-    "line-height": 1.5,
-    "padding-vertical": 0.25rem,
-    "padding-horizontal": 0.875rem,
-  ),
-);
-
 @each $size in $hds-badge-count-sizes {
   .hds-badge-count--size-#{$size} {
-    min-height: map.get($hds-badge-count-size-props, $size, "height");
-    padding: calc(#{map.get($hds-badge-count-size-props, $size, "padding-vertical")} - #{$hds-badge-count-border-width})
-      calc(#{map.get($hds-badge-count-size-props, $size, "padding-horizontal")} - #{$hds-badge-count-border-width});
-    font-size: map.get($hds-badge-count-size-props, $size, "font-size");
-    line-height: map.get($hds-badge-count-size-props, $size, "line-height");
-    border-radius: math.div(map.get($hds-badge-count-size-props, $size, "height"), 2);
+    min-height: var(--token-badge-height-#{$size});
+    // we need to account for the `1px` border when calculating the actual padding
+    padding: calc(var(--token-badge-padding-vertical-#{$size}) - 1px)
+      // note: for the horizontal padding, we're using a specific design token for the `BadgeCount` component
+      calc(var(--token-badge-count-padding-horizontal-#{$size}) - 1px);
+    font-size: var(--token-badge-typography-font-size-#{$size});
+    line-height: var(--token-badge-typography-line-height-#{$size});
+    border-radius: calc(var(--token-badge-height-#{$size}) / 2);
   }
 }
 
 // COLOR + TYPE COMBINATIONS
 
-.hds-badge-count--color-neutral {
-  &.hds-badge-count--type-filled {
-    color: var(--token-color-foreground-primary);
-    background-color: var(--token-color-palette-neutral-200);
-  }
-
-  &.hds-badge-count--type-inverted {
-    color: var(--token-color-foreground-high-contrast);
-    background-color: var(--token-color-palette-neutral-500);
-  }
-
-  &.hds-badge-count--type-outlined {
-    color: var(--token-color-foreground-primary);
-    background-color: transparent;
-    border-color: var(--token-color-palette-neutral-500);
-  }
-}
-
-.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);
-  }
-
-  &.hds-badge-count--type-inverted {
-    color: var(--token-color-foreground-primary);
-    background-color: var(--token-color-surface-faint);
-  }
-
-  &.hds-badge-count--type-outlined {
-    color: var(--token-color-foreground-high-contrast);
-    background-color: transparent;
-    border-color: var(--token-color-palette-neutral-50);
+@each $color in $hds-badge-count-colors {
+  .hds-badge-count--color-#{$color} {
+    @each $type in $hds-badge-count-types {
+      &.hds-badge-count--type-#{$type} {
+        color: var(--token-badge-foreground-color-#{$color}-#{$type});
+
+        @if $type == "outlined" {
+          background-color: transparent;
+          border-color: var(--token-badge-foreground-color-#{$color}-#{$type});
+        } @else {
+          background-color: var(--token-badge-surface-color-#{$color}-#{$type});
+          border-color: transparent;
+        }
+      }
+    }
   }
 }

package/dist/styles/components/badge.scss

@@ -7,48 +7,18 @@
 // BADGE COMPONENT
 //
 
-@use "sass:map";
-
-$hds-badge-types: ("flat", "inverted", "outlined");
-$hds-badge-colors-accents: ("highlight", "success", "warning", "critical");
 $hds-badge-sizes: ("small", "medium", "large");
-$hds-badge-border-width: 1px;
-$hds-badge-colors-props: (
-  "highlight": (
-    "inverted-background-color": var(--token-color-palette-purple-200),
-    "outlined-border-color": var(--token-color-palette-purple-200),
-  ),
-  "success": (
-    "inverted-background-color": var(--token-color-palette-green-200),
-    "outlined-border-color": var(--token-color-palette-green-200),
-  ),
-  "warning": (
-    "inverted-background-color": var(--token-color-palette-amber-200),
-    "outlined-border-color": var(--token-color-palette-amber-200),
-  ),
-  "critical": (
-    "inverted-background-color": var(--token-color-palette-red-200),
-    "outlined-border-color": var(--token-color-palette-red-200),
-  ),
-);
+$hds-badge-colors: ("neutral", "neutral-dark-mode", "highlight", "success", "warning", "critical");
+$hds-badge-types: ("filled", "inverted", "outlined");
 
 .hds-badge {
-  // Redefine color values to increase contrast
-  --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: $hds-badge-border-width solid transparent;
-  border-radius: var(--token-border-radius-small);
+  border-style: solid;
+  border-width: 1px;
+  border-radius: var(--token-badge-border-radius);
 }
 
 .hds-badge__icon {
@@ -64,116 +34,47 @@ $hds-badge-colors-props: (
 
 // SIZE
 
-// these values later may come from the design tokens
-$hds-badge-size-props: (
-  "small": (
-    // 13px = 0.8125rem
-    "font-size": 0.8125rem,
-    "gap": 0.25rem,
-    "height": 1.25rem,
-    "icon-size": 0.75rem,
-    // 16px = 1.2308
-    "line-height": 1.2308,
-    "padding-vertical": 0.125rem,
-    "padding-horizontal": 0.375rem,
-  ),
-  "medium": (
-    // 13px = 0.8125rem
-    "font-size": 0.8125rem,
-    "gap": 0.25rem,
-    "height": 1.5rem,
-    "icon-size": 1rem,
-    // 16px = 1.2308
-    "line-height": 1.2308,
-    "padding-vertical": 0.25rem,
-    "padding-horizontal": 0.5rem,
-  ),
-  "large": (
-    // 16px = 1rem
-    "font-size": 1rem,
-    "gap": 0.375rem,
-    "height": 2rem,
-    "icon-size": 1rem,
-    // 24px = 1.5
-    "line-height": 1.5,
-    "padding-vertical": 0.25rem,
-    "padding-horizontal": 0.5rem,
-  ),
-);
-
 @each $size in $hds-badge-sizes {
   .hds-badge--size-#{$size} {
-    gap: map.get($hds-badge-size-props, $size, "gap");
-    min-height: map.get($hds-badge-size-props, $size, "height");
-    padding: calc(#{map.get($hds-badge-size-props, $size, "padding-vertical")} - #{$hds-badge-border-width})
-      calc(#{map.get($hds-badge-size-props, $size, "padding-horizontal")} - #{$hds-badge-border-width});
+    gap: var(--token-badge-gap-#{$size});
+    min-height: var(--token-badge-height-#{$size});
+    // we need to account for the `1px` border when calculating the actual padding
+    padding: calc(var(--token-badge-padding-vertical-#{$size}) - 1px)
+      calc(var(--token-badge-padding-horizontal-#{$size}) - 1px);
 
     .hds-badge__icon {
-      width: map.get($hds-badge-size-props, $size, "icon-size");
-      height: map.get($hds-badge-size-props, $size, "icon-size");
+      width: var(--token-badge-icon-size-#{$size});
+      height: var(--token-badge-icon-size-#{$size});
     }
 
     .hds-badge__text {
-      font-size: map.get($hds-badge-size-props, $size, "font-size");
-      line-height: map.get($hds-badge-size-props, $size, "line-height");
+      font-size: var(--token-badge-typography-font-size-#{$size});
+      line-height: var(--token-badge-typography-line-height-#{$size});
     }
   }
 }
 
 // COLOR + TYPE COMBINATIONS
 
-.hds-badge--color-neutral {
-  &.hds-badge--type-filled {
-    color: var(--token-color-foreground-primary);
-    background-color: var(--token-color-palette-neutral-200);
-  }
-
-  &.hds-badge--type-inverted {
-    color: var(--token-color-foreground-high-contrast);
-    background-color: var(--token-color-palette-neutral-500);
-  }
-
-  &.hds-badge--type-outlined {
-    color: var(--token-color-foreground-primary);
-    background-color: transparent;
-    border-color: var(--token-color-palette-neutral-500);
-  }
-}
-
-.hds-badge--color-neutral-dark-mode {
-  &.hds-badge--type-filled {
-    color: var(--token-color-foreground-high-contrast);
-    background-color: var(--token-color-palette-neutral-500);
-  }
-
-  &.hds-badge--type-inverted {
-    color: var(--token-color-foreground-primary);
-    background-color: var(--token-color-surface-faint);
-  }
-
-  &.hds-badge--type-outlined {
-    color: var(--token-color-foreground-high-contrast);
-    background-color: transparent;
-    border-color: var(--token-color-palette-neutral-50);
-  }
-}
-
-@each $color in $hds-badge-colors-accents {
+@each $color in $hds-badge-colors {
   .hds-badge--color-#{$color} {
-    &.hds-badge--type-filled {
-      color: var(--token-color-foreground-#{$color}-on-surface);
-      background-color: var(--token-color-surface-#{$color});
-    }
-
-    &.hds-badge--type-inverted {
-      color: var(--token-color-foreground-high-contrast);
-      background-color: map.get($hds-badge-colors-props, $color, "inverted-background-color");
-    }
-
-    &.hds-badge--type-outlined {
-      color: var(--token-color-foreground-#{$color});
-      background-color: transparent;
-      border-color: map.get($hds-badge-colors-props, $color, "outlined-border-color");
+    @each $type in $hds-badge-types {
+      &.hds-badge--type-#{$type} {
+        color: var(--token-badge-foreground-color-#{$color}-#{$type});
+
+        @if $type == "outlined" {
+          // only the `neutral` and `neutral-dark-mode` have explicit backgrounds
+          @if ($color == "neutral" or $color == "neutral-dark-mode") {
+            background-color: var(--token-badge-surface-color-#{$color}-#{$type});
+          } @else {
+            background-color: transparent;
+          }
+          border-color: var(--token-badge-foreground-color-#{$color}-#{$type});
+        } @else {
+          background-color: var(--token-badge-surface-color-#{$color}-#{$type});
+          border-color: transparent;
+        }
+      }
     }
   }
 }

package/dist/styles/components/breadcrumb.scss

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2021, 2025
+ * Copyright IBM Corp. 2021, 2026
  * SPDX-License-Identifier: MPL-2.0
  */
 
@@ -10,9 +10,9 @@
 //
 
 @use "../mixins/focus-ring" as *;
+@use "../mixins/carbonization" as *;
 
 $hds-breadcrumb-item-height: 28px;
-$hds-breadcrumb-item-border-radius: var(--token-border-radius-small);
 $hds-breadcrumb-item-visual-horizontal-padding: 4px;
 
 // MAIN CONTAINER (NAV)
@@ -51,9 +51,17 @@ $hds-breadcrumb-item-visual-horizontal-padding: 4px;
   .hds-breadcrumb__list > & {
     &:not(:last-child)::after {
       padding: 0 8px;
-      color: var(--token-color-palette-neutral-300);
+      color: var(--token-breadcrumb-divider-color);
       content: "/";
     }
+
+    @include hds-apply-only-if-carbon() {
+      &:last-child::after {
+        padding: 0 8px;
+        color: var(--token-breadcrumb-divider-color);
+        content: "/";
+      }
+    }
   }
 
   .hds-breadcrumb__sublist > & + & {
@@ -74,17 +82,18 @@ $hds-breadcrumb-item-visual-horizontal-padding: 4px;
   min-width: 0;
   margin: 0 (-$hds-breadcrumb-item-visual-horizontal-padding); // we use a negative horizontal margin to counter-balance the horizonal padding (used to shift the focus from the content)
   padding: 0 $hds-breadcrumb-item-visual-horizontal-padding;
-  color: var(--token-color-foreground-faint);
+  color: var(--token-breadcrumb-link-foreground-color-default);
+  text-align: left;
   background: none;
   border: none;
-  border-radius: $hds-breadcrumb-item-border-radius;
+  border-radius: var(--token-border-radius-small);
+  cursor: pointer;
   // 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;
-  cursor: pointer;
 
   &:hover,
   &.mock-hover {
-    color: var(--token-color-palette-neutral-600);
+    color: var(--token-breadcrumb-link-foreground-color-hover);
 
     > .hds-breadcrumb__text {
       text-decoration-color: currentColor;
@@ -96,12 +105,19 @@ $hds-breadcrumb-item-visual-horizontal-padding: 4px;
 
   &:active,
   &.mock-active {
-    color: var(--token-color-foreground-secondary);
+    color: var(--token-breadcrumb-link-foreground-color-active);
 
     > .hds-breadcrumb__text {
       text-decoration-color: currentColor;
     }
   }
+
+  @include hds-apply-only-if-carbon() {
+    &:focus,
+    &.mock-focus {
+      text-decoration: underline;
+    }
+  }
 }
 
 // CURRENT
@@ -127,11 +143,11 @@ $hds-breadcrumb-item-visual-horizontal-padding: 4px;
 
 .hds-breadcrumb__text {
   // we use the extra vertical padding to force the height of the parent item to be exactly $hds-breadcrumb-item-height
-  padding: calc((#{$hds-breadcrumb-item-height} - 1rem) / 2) 0;
+  padding: calc((#{$hds-breadcrumb-item-height} - 1rem) / 2) 0; // line height = 16px / 1rem
   overflow: hidden;
-  font-size: 0.8125rem; // 13px
-  font-family: var(--token-typography-font-stack-text);
-  line-height: 1rem; // 16px
+  font-size: var(--token-typography-body-100-font-size);
+  font-family: var(--token-typography-body-100-font-family);
+  line-height: var(--token-breadcrumb-typography-line-height);
   white-space: nowrap;
   text-decoration: underline;
   text-overflow: ellipsis;
@@ -140,6 +156,10 @@ $hds-breadcrumb-item-visual-horizontal-padding: 4px;
   .hds-breadcrumb__sublist & {
     white-space: normal;
   }
+
+  @include hds-apply-only-if-carbon() {
+    padding: calc((#{$hds-breadcrumb-item-height} - 1.125rem) / 2) 0; // line height = 18px / 1.125rem
+  }
 }
 
 // TRUNCATION
@@ -153,17 +173,32 @@ $hds-breadcrumb-item-visual-horizontal-padding: 4px;
   height: $hds-breadcrumb-item-height;
   margin: 0 (-$hds-breadcrumb-item-visual-horizontal-padding); // the horizontal negative margin applied here is for visual balance of the spacing between items
   padding: 0;
-  color: var(--token-color-foreground-faint);
-  background-color: transparent;
+  color: var(--token-breadcrumb-truncation-toggle-foreground-color-default);
+  background-color: var(--token-breadcrumb-truncation-toggle-surface-color-default);
   border: 1px solid transparent; // We need this to be transparent for a11y
-  border-radius: $hds-breadcrumb-item-border-radius;
-  outline: none; // TODO check with @melanie
+  border-radius: var(--token-border-radius-small);
+  outline: none;
   cursor: pointer;
 
+  @include hds-apply-only-if-carbon() {
+    align-items: end;
+    padding-bottom: 3px;
+    border: none;
+
+    &::after {
+      position: absolute;
+      bottom: 8px;
+      width: 14px;
+      height: 1px;
+      background-color: transparent;
+      content: "";
+    }
+  }
+
   &:hover,
   &.mock-hover {
-    color: var(--token-color-foreground-faint);
-    background-color: var(--token-color-surface-interactive);
+    color: var(--token-breadcrumb-truncation-toggle-foreground-color-hover);
+    background-color: var(--token-breadcrumb-truncation-toggle-surface-color-hover);
     border-color: var(--token-color-border-strong);
   }
 
@@ -178,10 +213,27 @@ $hds-breadcrumb-item-visual-horizontal-padding: 4px;
 
   &:active,
   &.mock-active {
-    color: var(--token-color-foreground-primary);
-    background-color: var(--token-color-surface-interactive-active);
+    color: var(--token-breadcrumb-truncation-toggle-foreground-color-active);
+    background-color: var(--token-breadcrumb-truncation-toggle-surface-color-active);
     border-color: var(--token-color-border-strong);
   }
+
+  @include hds-apply-only-if-carbon() {
+    &:hover::after,
+    &.mock-hover::after {
+      background-color: var(--token-breadcrumb-truncation-toggle-foreground-color-hover);
+    }
+
+    &:focus::after,
+    &.mock-focus::after {
+      background-color: var(--token-breadcrumb-truncation-toggle-foreground-color-default);
+    }
+
+    &:active::after,
+    &.mock-active::after {
+      background-color: var(--token-breadcrumb-truncation-toggle-foreground-color-active);
+    }
+  }
 }
 
 .hds-breadcrumb__truncation-content {
@@ -191,7 +243,15 @@ $hds-breadcrumb-item-visual-horizontal-padding: 4px;
   padding: 6px 12px;
   background-color: var(--token-color-surface-primary);
   border-radius: var(--token-border-radius-medium);
-  box-shadow: var(--token-surface-high-box-shadow);
+  box-shadow: var(--token-breadcrumb-truncation-content-box-shadow);
+
+  @include hds-apply-only-if-carbon() {
+    padding: 0;
+
+    .hds-breadcrumb__sublist > .hds-breadcrumb__item + .hds-breadcrumb__item {
+      margin-top: 0;
+    }
+  }
 
   // the "popover" attributes comes with pre-defined styling so we need to override it
   :where(&[popover]) {
@@ -205,4 +265,31 @@ $hds-breadcrumb-item-visual-horizontal-padding: 4px;
     border: none;
     inset: 0;
   }
+
+  .hds-breadcrumb__link {
+    width: 100%;
+    color: var(--token-color-foreground-faint);
+
+    &:hover,
+    &.mock-hover {
+      color: var(--token-color-foreground-primary);
+    }
+
+    @include hds-apply-only-if-carbon() {
+      margin: 0;
+      padding: 11px 16px;
+      text-decoration: none;
+      background-color: var(--token-color-surface-interactive);
+
+      &:hover,
+      &.mock-hover {
+        background-color: var(--token-color-surface-interactive-hover);
+      }
+
+      .hds-breadcrumb__text {
+        padding: 0;
+        text-decoration: none;
+      }
+    }
+  }
 }

package/dist/styles/components/button.scss

@@ -10,6 +10,7 @@
 //
 
 @use "../mixins/button" as *;
+@use "../mixins/carbonization" as *;
 
 .hds-button {
   @include hds-button();
@@ -51,6 +52,10 @@
     width: 100%;
     max-width: 100%;
 
+    @include hds-apply-only-if-carbon() {
+      justify-content: space-between;
+    }
+
     .hds-button__text {
       flex: 0 0 auto;
     }