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

package/dist/styles/components/alert.scss

@@ -7,6 +7,8 @@
 // ALERT COMPONENT
 //
 
+@use "../mixins/carbonization" as *;
+
 .hds-alert {
   display: flex;
   align-items: flex-start;
@@ -18,7 +20,7 @@
   flex: none;
   width: 20px;
   height: 20px;
-  margin-right: 12px;
+  margin-right: var(--token-alert-icon-margin-right);
 
   .hds-alert--type-compact & {
     width: 14px;
@@ -37,10 +39,15 @@
 .hds-alert__text {
   display: flex;
   flex-direction: column;
-  gap: 4px;
+  gap: var(--token-alert-content-gap);
   justify-content: center;
 }
 
+.hds-alert__title,
+.hds-alert__description {
+  line-height: var(--token-alert-typography-line-height);
+}
+
 .hds-alert__description {
   word-break: break-word;
 
@@ -91,32 +98,69 @@
   align-items: center;
 
   > * {
-    margin-top: 16px;
+    margin-top: var(--token-alert-actions-margin-top);
   }
 }
 
 // DISMISS
 
 .hds-alert__dismiss {
-  margin-top: 2px; // for alignment with the main icon and text
-  margin-left: 16px;
+  // for visual alignment with the main icon and text
+  margin: -2px -4px -4px var(--token-alert-dismiss-margin-left);
 
   .hds-alert--type-compact & {
-    margin-top: 1px;
+    margin-top: -3px;
+  }
+
+  @include hds-apply-only-if-carbon() {
+    .hds-icon {
+      width: 16px;
+      height: 16px;
+    }
   }
 }
 
 // TYPES
-
 .hds-alert--type-page {
-  padding: 16px 48px; // by design
+  padding: var(--token-alert-page-padding-vertical) var(--token-alert-page-padding-horizontal);
+  border-width: 1px;
+  border-bottom-style: solid;
+
+  @include hds-apply-only-if-carbon() {
+    .hds-alert__dismiss {
+      margin: calc(-1 * var(--token-alert-page-padding-vertical)) calc(-1 * var(--token-alert-page-padding-horizontal))
+        0 var(--token-alert-dismiss-margin-left);
+    }
+  }
 }
 
 .hds-alert--type-inline {
-  padding: 16px;
+  padding: var(--token-alert-inline-padding-vertical) var(--token-alert-inline-padding-horizontal);
   border-style: solid;
   border-width: 1px;
   border-radius: var(--token-border-radius-medium);
+
+  @include hds-apply-only-if-carbon() {
+    position: relative;
+    padding-left: calc(var(--token-alert-inline-padding-horizontal) + var(--token-alert-inline-border-left-width));
+    border-left-width: 0;
+
+    // For Carbon theme the left border is placed on top of the alert container using a pseudo element, so that it can have a different color than the main border color
+    // This avoides having angled corners between the border colors if this was done using a regular border with different left color
+    &::before {
+      position: absolute;
+      top: -1px; // Compensate the 1px border-width of the top border
+      left: 0;
+      width: var(--token-alert-inline-border-left-width);
+      height: calc(100% + 2px); // Compensate the 1px border-width of both top and bottom borders
+      content: "";
+    }
+
+    .hds-alert__dismiss {
+      margin-top: calc(-1 * var(--token-alert-page-padding-vertical));
+      margin-right: calc(-1 * var(--token-alert-inline-padding-horizontal));
+    }
+  }
 }
 
 .hds-alert--type-compact {
@@ -136,93 +180,28 @@
 }
 
 // COLORS (& TYPES)
+$hds-alert-colors: ("neutral", "highlight", "success", "warning", "critical");
+
+@each $color in $hds-alert-colors {
+  .hds-alert--color-#{$color} {
+    &.hds-alert--type-page,
+    &.hds-alert--type-inline {
+      background-color: var(--token-alert-surface-color-#{$color});
+      border-color: var(--token-alert-border-color-#{$color});
+    }
 
-.hds-alert--color-neutral {
-  &.hds-alert--type-page {
-    background-color: var(--token-color-surface-faint);
-    box-shadow: 0 1px 0 0 var(--token-color-palette-alpha-300);
-  }
-
-  &.hds-alert--type-inline {
-    background-color: var(--token-color-surface-faint);
-    // notice: in the "neutral" color the "inline" has a slightly darker border color compared to the others to increase contrast (eg. could be used on a light gray background)
-    border-color: var(--token-color-border-strong);
-  }
-
-  // different color by design
-  .hds-alert__icon {
-    color: var(--token-color-foreground-faint);
-  }
-
-  .hds-alert__title {
-    color: var(--token-color-foreground-primary);
-  }
-}
-
-.hds-alert--color-highlight {
-  &.hds-alert--type-page {
-    background-color: var(--token-color-surface-highlight);
-    box-shadow: 0 1px 0 0 var(--token-color-border-highlight);
-  }
-
-  &.hds-alert--type-inline {
-    background-color: var(--token-color-surface-highlight);
-    border-color: var(--token-color-border-highlight);
-  }
-
-  .hds-alert__icon,
-  .hds-alert__title {
-    color: var(--token-color-foreground-highlight-on-surface);
-  }
-}
-
-.hds-alert--color-success {
-  &.hds-alert--type-page {
-    background-color: var(--token-color-surface-success);
-    box-shadow: 0 1px 0 0 var(--token-color-border-success);
-  }
-
-  &.hds-alert--type-inline {
-    background-color: var(--token-color-surface-success);
-    border-color: var(--token-color-border-success);
-  }
-
-  .hds-alert__icon,
-  .hds-alert__title {
-    color: var(--token-color-foreground-success-on-surface);
-  }
-}
-
-.hds-alert--color-warning {
-  &.hds-alert--type-page {
-    background-color: var(--token-color-surface-warning);
-    box-shadow: 0 1px 0 0 var(--token-color-border-warning);
-  }
-
-  &.hds-alert--type-inline {
-    background-color: var(--token-color-surface-warning);
-    border-color: var(--token-color-border-warning);
-  }
-
-  .hds-alert__icon,
-  .hds-alert__title {
-    color: var(--token-color-foreground-warning-on-surface);
-  }
-}
-
-.hds-alert--color-critical {
-  &.hds-alert--type-page {
-    background-color: var(--token-color-surface-critical);
-    box-shadow: 0 1px 0 0 var(--token-color-border-critical);
-  }
+    @include hds-apply-only-if-carbon() {
+      &.hds-alert--type-inline::before {
+        background-color: var(--token-alert-inline-border-left-color-#{$color});
+      }
+    }
 
-  &.hds-alert--type-inline {
-    background-color: var(--token-color-surface-critical);
-    border-color: var(--token-color-border-critical);
-  }
+    .hds-alert__icon {
+      color: var(--token-alert-icon-color-#{$color});
+    }
 
-  .hds-alert__icon,
-  .hds-alert__title {
-    color: var(--token-color-foreground-critical-on-surface);
+    .hds-alert__title {
+      color: var(--token-alert-title-foreground-color-#{$color});
+    }
   }
 }

package/dist/styles/components/app-footer.scss

@@ -123,6 +123,8 @@ $hds-app-footer-icon-text-gap: 6px;
 
 // THEMING
 
+// Note: Custom property values for each theme are defined here vs. in a JSON file as tokens so do not follow --token naming
+
 // Light
 .hds-app-footer--theme-light {
   --app-footer-foreground-color: var(--token-color-foreground-primary);
@@ -130,13 +132,13 @@ $hds-app-footer-icon-text-gap: 6px;
 
   // Overriding default Secondary Link colors
   --app-footer-link-default-color: var(--token-color-foreground-faint);
-  --app-footer-link-hover-color: var(--token-color-palette-neutral-600);
-  --app-footer-link-active-color: var(--token-color-palette-neutral-700);
+  --app-footer-link-hover-color: var(--token-color-foreground-primary);
+  --app-footer-link-active-color: var(--token-color-foreground-strong);
   --app-footer-link-focus-color: var(--token-color-foreground-faint);
-  --app-footer-link-focus-outline-color: var(--token-color-focus-action-internal);
+  --app-footer-link-focus-outline-color: var(--token-app-footer-link-focus-outline-color);
 
   // Copyright
-  --app-footer-copyright-text-color: var(--token-color-foreground-primary);
+  --app-footer-copyright-text-color: var(--token-color-foreground-faint);
   --app-footer-copyright-icon-color: var(--token-color-hashicorp-brand);
 
   // StatusLink icon colors

package/dist/styles/components/app-header.scss

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2021, 2025
+ * Copyright IBM Corp. 2021, 2026
  * SPDX-License-Identifier: MPL-2.0
  */
 
@@ -7,7 +7,92 @@
 // APP-HEADER
 //
 
-@use "../mixins/interactive-dark-theme" as *;
+@use "../mixins/carbonization" as *;
+@use "../mixins/focus-ring" as *;
+@use "../mixins/button" as *;
+
+$hds-interactive-app-header-theme-focus-ring-action-box-shadow:
+  inset 0 0 0 1px var(--token-app-header-interactive-focus-ring-color-action-internal),
+  0 0 0 3px var(--token-app-header-interactive-focus-ring-color-action-external);
+
+// Used for interactive elements such as Button & Dropdown
+@mixin hds-interactive-app-header-theme($add-visible-border: true) {
+  // Override token used in focus ring mixin
+  --token-focus-ring-action-box-shadow: #{$hds-interactive-app-header-theme-focus-ring-action-box-shadow};
+
+  color: var(--token-app-header-interactive-foreground-color-default);
+  background-color: var(--token-app-header-interactive-surface-color-default);
+
+  // Default:
+  border: 1px solid transparent;
+  border-radius: var(--token-button-border-radius);
+  cursor: pointer;
+
+  @if ($add-visible-border) {
+    border-color: var(--token-app-header-interactive-border-color-default);
+  }
+
+  @include hds-apply-only-if-carbon() {
+    height: var(--token-app-header-height);
+  }
+
+  // Hover:
+  &:hover,
+  &.mock-hover {
+    @if ($add-visible-border) {
+      border-color: var(--token-app-header-interactive-border-color-default);
+    }
+
+    color: var(--token-app-header-interactive-foreground-color-hover);
+    background-color: var(--token-app-header-interactive-surface-color-hover);
+  }
+
+  // Focus:
+  &:focus,
+  &.mock-focus {
+    @include hds-focus-ring-with-pseudo-element($top: -1px, $right: -1px, $bottom: -1px, $left: -1px);
+
+    // See: https://sass-lang.com/d/mixed-decls
+    & {
+      color: var(--token-app-header-interactive-foreground-color-default);
+      background-color: var(--token-app-header-interactive-surface-color-default);
+
+      @if ($add-visible-border) {
+        border-color: var(--token-app-header-interactive-focus-ring-color-action-internal);
+      }
+    }
+
+    // focus ring:
+    &::before {
+      color: var(--token-color-foreground-high-contrast);
+      border: none;
+    }
+  }
+
+  // override style removing the focus style
+  &:focus:focus:not(:focus-visible)::before {
+    box-shadow: $hds-interactive-app-header-theme-focus-ring-action-box-shadow;
+  }
+
+  // Active:
+  &:active,
+  &.mock-active {
+    color: var(
+      --token-app-header-interactive-foreground-color-default
+    ); // to avoid overrides by specificity (eg. `a:hover`)
+    background-color: var(--token-app-header-interactive-surface-color-active);
+
+    @if ($add-visible-border) {
+      border-color: var(--token-app-header-interactive-border-color-active);
+    }
+  }
+}
+
+@mixin hds-interactive-app-header-theme-state-disabled() {
+  color: var(--token-app-header-interactive-foreground-color-disabled);
+  background-color: var(--token-app-header-interactive-surface-color-disabled);
+  border-color: var(--token-app-header-interactive-border-color-default);
+}
 
 // ----------------
 
@@ -18,10 +103,9 @@
   align-items: center;
   justify-content: space-between;
   min-height: var(--token-app-header-height);
-  padding: 12px 16px 11px 16px; // bottom padding of 11px is to account for the bottom border
-  color: var(--token-color-foreground-high-contrast);
-  background: var(--token-color-palette-neutral-700);
-  border-bottom: 1px solid var(--token-color-palette-neutral-500);
+  padding: var(--token-app-header-padding-top) 16px var(--token-app-header-padding-bottom) 16px;
+  background: var(--token-app-header-surface-color);
+  border-bottom: 1px solid var(--token-app-header-border-color);
 
   // A11Y-REFOCUS "SKIP LINK"
 
@@ -71,7 +155,7 @@
       align-content: flex-start;
       padding: 16px;
       overflow: auto; // allow users to scroll if the content is too long
-      background: var(--token-color-palette-neutral-700);
+      background: var(--token-app-side-nav-interactive-surface-color-default);
     }
 
     &.hds-app-header--menu-is-closed {
@@ -101,10 +185,30 @@
   .hds-app-header__global-actions,
   .hds-app-header__utility-actions {
     display: flex;
-    gap: inherit;
+    gap: var(--token-app-header-actions-gap);
     align-items: center;
   }
 
+  @include hds-apply-only-if-carbon() {
+    // Override default button and dropdown paddings for Carbon themes
+    .hds-button--is-icon-only {
+      padding: 16px;
+    }
+
+    .hds-dropdown-toggle-button {
+      gap: 8px;
+    }
+
+    .hds-dropdown-toggle-icon {
+      padding: 8px;
+    }
+
+    // Remove chevrons from icon dropdowns for Carbon themes
+    .hds-dropdown-toggle-icon--has-chevron .hds-dropdown-toggle-chevron {
+      display: none;
+    }
+  }
+
   // Dropdown & Button color theming overrides
   // Note: We need to apply dark theme styles to .hds-dropdown-toggle-button & .hds-dropdown-toggle-icon
   // so we use a partial classname selector to cover both cases
@@ -113,7 +217,7 @@
   button[class*="hds-dropdown-toggle"] {
     // Apply dark theme to child interactive components not within a nested content container
     &:not(.hds-dropdown__content *, .ember-basic-dropdown-content *, .hds-dialog-primitive__wrapper *) {
-      @include hds-interactive-dark-theme();
+      @include hds-interactive-app-header-theme();
 
       // disabled state:
       &:disabled,
@@ -125,7 +229,7 @@
       &:disabled:hover,
       &[disabled]:hover,
       &.mock-disabled:hover {
-        @include hds-interactive-dark-theme-state-disabled();
+        @include hds-interactive-app-header-theme-state-disabled();
       }
     }
   }
@@ -147,14 +251,21 @@
 // Logo
 
 .hds-app-header__home-link {
-  @include hds-interactive-dark-theme($add-visible-border: false);
+  @include hds-interactive-app-header-theme($add-visible-border: false);
   display: flex;
   gap: 8px;
   align-items: center;
   justify-content: center;
-  padding: 3px;
+  padding: var(--token-app-header-home-link-padding);
+  color: var(--token-app-header-home-link-foreground-color);
   text-decoration: none;
 
+  @include hds-apply-only-if-carbon() {
+    .hds-text {
+      font-weight: var(--token-typography-font-weight-bold);
+    }
+  }
+
   // disabled state:
   &:disabled,
   &[disabled],
@@ -165,13 +276,13 @@
   &:disabled:hover,
   &[disabled]:hover,
   &.mock-disabled:hover {
-    @include hds-interactive-dark-theme-state-disabled();
+    @include hds-interactive-app-header-theme-state-disabled();
   }
 
   // Set SVG logo size:
   svg {
-    width: var(--token-app-header-logo-size);
-    height: var(--token-app-header-logo-size);
+    width: var(--token-app-header-home-link-logo-width);
+    height: var(--token-app-header-home-link-logo-height);
   }
 }
 
@@ -181,3 +292,11 @@
   flex: 1;
   gap: inherit;
 }
+
+// Menu button
+
+.hds-app-header__menu-button {
+  @include hds-apply-only-if-carbon() {
+    gap: 8px;
+  }
+}

package/dist/styles/components/app-side-nav/content.scss

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2021, 2025
+ * Copyright IBM Corp. 2021, 2026
  * SPDX-License-Identifier: MPL-2.0
  */
 
@@ -8,6 +8,7 @@
 //
 
 @use "../../mixins/focus-ring" as *;
+@use "../../mixins/carbonization" as *;
 
 // PANELS (wrappers used in conjunction with the portal elements)
 
@@ -48,8 +49,9 @@
 .hds-app-side-nav__list-title {
   min-height: var(--token-app-side-nav-body-list-item-height);
   margin-top: var(--token-app-side-nav-body-list-margin-vertical);
-  padding: 9px var(--token-app-side-nav-body-list-item-padding-horizontal); // 8px = (min-height - body-100-line-height) / 2
-  color: var(--token-app-side-nav-color-foreground-faint);
+  padding: var(--token-app-side-nav-body-list-title-padding-vertical)
+    var(--token-app-side-nav-body-list-title-padding-horizontal);
+  color: var(--token-app-side-nav-body-list-title-foreground-color);
   overflow-wrap: break-word;
 
   // Remove margin from title at top of all list-items & lists
@@ -75,20 +77,20 @@
   list-style-type: none;
 
   & + & {
-    margin-top: var(--token-app-side-nav-body-list-item-spacing-vertical);
+    margin-top: var(--token-app-side-nav-body-list-item-margin-top);
   }
 }
 
 // <a>/<button> element (via Hds::Interactive)
 .hds-app-side-nav__list-item-link {
   display: flex;
-  gap: var(--token-app-side-nav-body-list-item-content-spacing-horizontal);
+  gap: var(--token-app-side-nav-body-list-item-content-gap);
   align-items: center;
   width: 100%;
   min-height: var(--token-app-side-nav-body-list-item-height);
   padding: var(--token-app-side-nav-body-list-item-padding-vertical)
     var(--token-app-side-nav-body-list-item-padding-horizontal);
-  color: var(--token-app-side-nav-color-foreground-primary);
+  color: var(--token-app-side-nav-body-list-item-foreground-color-default);
   text-decoration: none;
   // "Link" could render as an HTML button element so these override the default background and border styles in that case
   background: transparent;
@@ -102,25 +104,36 @@
     @include hds-focus-ring-with-pseudo-element();
     // to move the item link above the siblings elements when they have a solid background (eg. active) so that the focus ring is not cut out
     z-index: 1;
+
+    // for carbon themes, inset the pseudo-element so the focus ring renders within
+    // the element bounds and is not clipped by the parent's overflow: hidden
+    @include hds-apply-only-if-carbon() {
+      &::before {
+        top: 3px;
+        right: 3px;
+        bottom: 3px;
+        left: 3px;
+      }
+    }
   }
 
   // :Hover
   &:hover,
   &.mock-hover {
-    background: var(--token-app-side-nav-color-surface-interactive-hover);
+    background: var(--token-app-side-nav-body-list-item-surface-color-hover);
     border-color: transparent;
 
     .hds-app-side-nav__list-item-text,
     .hds-app-side-nav__list-item-icon-leading,
     .hds-app-side-nav__list-item-icon-trailing {
-      color: var(--token-app-side-nav-color-foreground-strong);
+      color: var(--token-app-side-nav-body-list-item-foreground-color-hover);
     }
   }
 
   // :Active
   &:active,
   &.mock-active {
-    background: var(--token-color-surface-interactive-active);
+    background: var(--token-app-side-nav-body-list-item-surface-color-active);
   }
 
   // ".Active" (current page) link
@@ -134,7 +147,7 @@
   &.active,
   &.active:hover:focus {
     position: relative; // for the "active" indicator bar to be correctly positioned
-    background: var(--token-color-surface-strong);
+    background: var(--token-app-side-nav-body-list-item-surface-color-selected);
 
     // indicator bar
     &::after {
@@ -144,14 +157,15 @@
       left: calc(var(--token-app-side-nav-wrapper-padding-horizontal) * -1);
       width: 4px;
       background: var(--token-color-foreground-action);
-      border-radius: 0 2px 2px 0;
+      border-radius: 0 var(--token-app-side-nav-body-list-item-indicator-border-radius)
+        var(--token-app-side-nav-body-list-item-indicator-border-radius) 0;
       content: "";
     }
 
     .hds-app-side-nav__list-item-text,
     .hds-app-side-nav__list-item-icon-leading,
     .hds-app-side-nav__list-item-icon-trailing {
-      color: var(--token-color-foreground-action);
+      color: var(--token-app-side-nav-body-list-item-foreground-color-selected);
     }
   }
 }
@@ -160,12 +174,12 @@
 .hds-app-side-nav__list-item-link--back-link {
   &:active,
   &.mock-active {
-    background: var(--token-app-side-nav-color-surface-primary);
+    background: var(--token-color-surface-faint);
 
     .hds-app-side-nav__list-item-text,
     .hds-app-side-nav__list-item-icon-leading,
     .hds-app-side-nav__list-item-icon-trailing {
-      color: var(--token-app-side-nav-color-foreground-primary);
+      color: var(--token-color-foreground-primary);
     }
   }
 }
@@ -175,7 +189,8 @@
 .hds-app-side-nav__list-item-text {
   min-width: 0;
   max-width: 100%;
-  color: var(--token-color-foreground-strong);
+  color: var(--token-app-side-nav-body-list-item-foreground-color-default);
+  font-weight: var(--token-app-side-nav-body-list-item-typography-font-weight);
   text-align: left;
   overflow-wrap: break-word;
 }

package/dist/styles/components/app-side-nav/main.scss

@@ -70,9 +70,9 @@
   flex-direction: column;
   height: 100%;
   color: var(
-    --token-app-side-nav-color-foreground-primary
+    --token-color-foreground-primary
   ); // we set a default color (in case generic content is added to the body of the appsidenav)
-  background: var(--token-app-side-nav-color-surface-primary);
+  background: var(--token-app-side-nav-wrapper-surface-color);
   border-right: var(--token-app-side-nav-wrapper-border-width) solid var(--token-app-side-nav-wrapper-border-color);
 
   // RESPONSIVENESS - This controls the width of the "sidenav" container, and is independent (bur related) from the parent "sidebar" grid area