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

package/dist/styles/components/reveal.scss

@@ -7,6 +7,8 @@
 // REVEAL COMPONENT
 //
 
+@use "../mixins/carbonization" as *;
+
 .hds-reveal {
   width: fit-content;
 }
@@ -15,6 +17,32 @@
   // overriding some styles of the tertiary button, per design specs
   min-height: 1.75rem; // 28px, Override default so padding difference will be visible
   padding: 0.313rem 0.313rem 0.313rem 0.188rem; // 6px 6px 6px 4px, taking into account the 1px border & icon spacing
+  color: var(--token-reveal-foreground-color-default);
+
+  @include hds-apply-only-if-carbon() {
+    gap: 6px; // we override the default, per design
+    border-color: transparent;
+  }
+
+  // states
+  &:hover,
+  &.mock-hover {
+    color: var(--token-reveal-foreground-color-hover);
+    background-color: var(--token-reveal-surface-color-hover);
+  }
+
+  &:focus,
+  &.mock-focus {
+    // The focus state color is the same as the default's
+    color: var(--token-reveal-foreground-color-default);
+    background-color: var(--token-reveal-surface-color-focus);
+  }
+
+  &:active,
+  &.mock-active {
+    color: var(--token-reveal-foreground-color-active);
+    background-color: var(--token-reveal-surface-color-active);
+  }
 
   .hds-icon-chevron-down {
     @media (prefers-reduced-motion: no-preference) {

package/dist/styles/components/rich-tooltip.scss

@@ -8,6 +8,7 @@
 //
 
 @use "../mixins/focus-ring" as *;
+@use "../mixins/carbonization" as *;
 
 .hds-rich-tooltip {
   display: contents;
@@ -38,19 +39,19 @@
   // we don't want to apply styles to the yielded content
   // so we use these variables that allow us to target only
   // the (decorated) text and the icon
-  --text-color: var(--token-color-foreground-strong);
-  --icon-color: var(--token-color-foreground-strong);
+  --text-color: var(--token-rich-tooltip-toggle-foreground-color-default);
+  --icon-color: var(--token-rich-tooltip-toggle-foreground-color-default);
 
   &:hover,
   &.mock-hover {
-    --text-color: var(--token-color-foreground-primary);
-    --icon-color: var(--token-color-foreground-primary);
+    --text-color: var(--token-rich-tooltip-toggle-foreground-color-hover);
+    --icon-color: var(--token-rich-tooltip-toggle-foreground-color-hover);
   }
 
   &:active,
   &.mock-active {
-    --text-color: var(--token-color-foreground-faint);
-    --icon-color: var(--token-color-foreground-faint);
+    --text-color: var(--token-rich-tooltip-toggle-foreground-color-active);
+    --icon-color: var(--token-rich-tooltip-toggle-foreground-color-active);
   }
 
   @include hds-focus-ring-with-pseudo-element($top: -2px, $right: -2px, $bottom: -2px, $left: -2px);
@@ -64,22 +65,26 @@
   text-decoration: underline;
   text-decoration-style: dotted;
   text-underline-offset: 2px;
+
+  @include hds-apply-only-if-carbon() {
+    text-decoration: none;
+  }
 }
 
 // icon
 
 .hds-rich-tooltip__toggle-icon {
   flex: none;
-  width: 1em;
-  height: 1em;
+  width: var(--token-rich-tooltip-toggle-icon-size);
+  height: var(--token-rich-tooltip-toggle-icon-size);
   color: var(--icon-color);
 
   &:first-child:not(:only-child) {
-    margin-right: 0.25rem;
+    margin-right: var(--token-rich-tooltip-toggle-gap-horizontal);
   }
 
   &:last-child:not(:only-child) {
-    margin-left: 0.25rem;
+    margin-left: var(--token-rich-tooltip-toggle-gap-horizontal);
   }
 }
 
@@ -131,12 +136,12 @@
 .hds-rich-tooltip__bubble {
   position: relative;
   width: fit-content;
-  max-width: var(--token-tooltip-max-width);
+  max-width: var(--token-rich-tooltip-bubble-max-width);
   height: fit-content;
   max-height: none;
   padding: 16px;
-  background: var(--token-color-surface-primary);
-  border-radius: var(--token-border-radius-small);
+  background-color: var(--token-color-surface-primary);
+  border-radius: var(--token-rich-tooltip-bubble-border-radius);
   box-shadow: var(--token-surface-higher-box-shadow);
 
   // fade-in animation (we can't do fade-out because `isOpen` removes the content of the bubble immediately from the DOM)
@@ -145,6 +150,12 @@
   transition: opacity 0.3s;
   will-change: opacity;
 
+  @include hds-apply-only-if-carbon() {
+    border: 1px solid var(--token-rich-tooltip-bubble-border-color);
+    box-shadow: none;
+    transition: none;
+  }
+
   // the "popover" attributes comes with pre-defined styling so we need to override it
   :where(&[popover]) {
     width: fit-content;
@@ -162,34 +173,53 @@
 // arrow
 
 .hds-rich-tooltip__bubble-arrow {
-  // notice: floating-ui assumes the "arrow" container is square
-  $arrow-size: 20px;
   position: absolute;
   z-index: 1;
   display: block;
-  width: $arrow-size;
-  height: $arrow-size;
+  width: var(--token-rich-tooltip-bubble-arrow-size);
+  height: var(--token-rich-tooltip-bubble-arrow-size);
   background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none"><path fill="%23fff" d="M9.056 11.607.398 20h19.091l-8.37-8.393S10.69 11 10.089 11c-.602 0-1.032.608-1.032.608Z"/><path fill="%23656A76" fill-opacity=".2" fill-rule="evenodd" d="M9.359 11.308 1.423 19H0l8.674-8.417.342.362-.342-.362v-.001l.002-.001.003-.003.007-.007a1.622 1.622 0 0 1 .103-.087c.066-.053.16-.122.277-.191.224-.134.571-.293.977-.293a2.158 2.158 0 0 1 1.374.492 1.658 1.658 0 0 1 .107.098l.004.004L20 19h-1.518l-7.665-7.707-.004-.003-.002-.002a1.069 1.069 0 0 0-.18-.131 1.167 1.167 0 0 0-.588-.157.958.958 0 0 0-.47.153 1.527 1.527 0 0 0-.208.15l-.006.005Z" clip-rule="evenodd"/></svg>')
-    no-repeat 0 0 / #{$arrow-size} #{$arrow-size};
+    no-repeat 0 0 / var(--token-rich-tooltip-bubble-arrow-size) var(--token-rich-tooltip-bubble-arrow-size);
   pointer-events: none;
 
+  @include hds-apply-only-if-carbon() {
+    background-image: none;
+
+    &::before {
+      position: absolute;
+      inset: 0;
+      background-color: var(--token-rich-tooltip-bubble-border-color);
+      content: "";
+      clip-path: polygon(0 12px, 6px 6px, 12px 12px);
+    }
+
+    &::after {
+      position: absolute;
+      inset: 0;
+      background-color: var(--token-color-surface-primary);
+      transform: translateY(1px);
+      content: "";
+      clip-path: polygon(0 12px, 6px 6px, 12px 12px);
+    }
+  }
+
   &[data-hds-anchored-arrow-placement^="top"] {
-    bottom: (-1 * $arrow-size);
+    bottom: calc(-1 * var(--token-rich-tooltip-bubble-arrow-size));
     transform: rotate(180deg);
   }
 
   &[data-hds-anchored-arrow-placement^="right"] {
-    left: (-1 * $arrow-size);
+    left: calc(-1 * var(--token-rich-tooltip-bubble-arrow-size));
     transform: rotate(-90deg);
   }
 
   &[data-hds-anchored-arrow-placement^="bottom"] {
-    top: (-1 * $arrow-size);
+    top: calc(-1 * var(--token-rich-tooltip-bubble-arrow-size));
     transform: rotate(0deg); // this fixes a rendering issue in Safari
   }
 
   &[data-hds-anchored-arrow-placement^="left"] {
-    right: (-1 * $arrow-size);
+    right: calc(-1 * var(--token-rich-tooltip-bubble-arrow-size));
     transform: rotate(90deg);
   }
 }
@@ -203,6 +233,7 @@
   // see: https://hashicorp.slack.com/archives/C025N5V4PFZ/p1715247858351399
   display: contents;
   box-sizing: border-box;
+  color: var(--token-color-foreground-primary);
 
   *,
   *::before,

package/dist/styles/components/tabs.scss

@@ -11,6 +11,7 @@ $hds-tabs-sizes: ("medium", "large");
 
 @use "sass:map";
 @use "../mixins/focus-ring" as *;
+@use "../mixins/carbonization" as *;
 
 // Sub-components:
 .hds-tabs__tablist-wrapper {
@@ -25,6 +26,10 @@ $hds-tabs-sizes: ("medium", "large");
     display: block;
     border-top: var(--token-tabs-divider-height) solid var(--token-color-border-primary);
     content: "";
+
+    @include hds-apply-only-if-carbon() {
+      display: none;
+    }
   }
 }
 
@@ -36,6 +41,10 @@ $hds-tabs-sizes: ("medium", "large");
   overflow-x: auto;
   isolation: isolate;
   -webkit-overflow-scrolling: touch;
+
+  @include hds-apply-only-if-carbon() {
+    gap: 1px;
+  }
 }
 
 .hds-tabs__tab {
@@ -43,24 +52,38 @@ $hds-tabs-sizes: ("medium", "large");
   display: flex;
   align-items: center;
   margin: 0;
-  color: var(--token-color-foreground-primary);
+  color: var(--token-tabs-tab-foreground-color-default);
   white-space: nowrap;
   text-decoration: none;
   list-style: none;
 
+  @include hds-apply-only-if-carbon() {
+    border-bottom: var(--token-tabs-indicator-height) solid var(--token-tabs-tab-border-color-default);
+    transition:
+      border 70ms cubic-bezier(0.2, 0, 0.38, 0.9),
+      outline 70ms cubic-bezier(0.2, 0, 0.38, 0.9);
+  }
+
   &:hover,
   &.mock-hover {
-    color: var(--token-color-foreground-action);
+    color: var(--token-tabs-tab-foreground-color-hover);
+    border-color: var(--token-tabs-tab-border-color-hover);
   }
 
   &.hds-tabs__tab--is-selected {
-    color: var(--token-color-foreground-action);
+    color: var(--token-tabs-tab-selected-foreground-color-default);
+
+    @include hds-apply-only-if-carbon() {
+      border-color: var(--token-tabs-tab-selected-border-color-default);
+    }
 
     &:hover {
-      color: var(--token-color-foreground-action-hover);
+      color: var(--token-tabs-tab-selected-foreground-color-hover);
+    }
 
-      & ~ .hds-tabs__tab-indicator {
-        background: var(--token-color-foreground-action-hover);
+    .hds-tabs__tab-button {
+      @include hds-apply-only-if-carbon() {
+        font-weight: var(--token-typography-font-weight-semibold);
       }
     }
   }
@@ -73,6 +96,13 @@ $hds-tabs-sizes: ("medium", "large");
     $bottom: var(--token-tabs-tab-focus-inset),
     $left: var(--token-tabs-tab-focus-inset)
   );
+
+  @include hds-apply-only-if-carbon() {
+    &::before {
+      inset: 3px 3px 1px 3px;
+    }
+  }
+
   position: static;
   display: flex;
   gap: var(--token-tabs-tab-gutter);
@@ -94,6 +124,7 @@ $hds-tabs-sizes: ("medium", "large");
   }
 }
 
+// the underline under the current selected Tab
 .hds-tabs__tab-indicator {
   position: absolute;
   right: 0;
@@ -105,11 +136,17 @@ $hds-tabs-sizes: ("medium", "large");
   // notice: this custom prop is set dynamically via JavaScript
   width: var(--indicator-width, 0);
   height: var(--token-tabs-indicator-height);
-  background-color: var(--token-color-foreground-action);
+  background-color: var(--token-tabs-tab-selected-foreground-color-default);
   border-radius: var(--token-tabs-indicator-height);
 
+  // Note: HDS default theme uses an li element for the indicator to make animating its position possible
+  // Carbon themes instead change the color of a border on the Tab to indicate it's selected
+  @include hds-apply-only-if-carbon() {
+    display: none;
+  }
+
   @media screen and (prefers-reduced-motion: no-preference) {
-    transition-timing-function: var(--token-tabs-indicator-transition-function);
+    transition-timing-function: var(--token-tabs-indicator-transition-timing-function);
     transition-duration: var(--token-tabs-indicator-transition-duration);
     transition-property: left, width;
   }

package/dist/styles/components/tag.scss

@@ -8,9 +8,7 @@
 //
 
 @use "../mixins/focus-ring" as *;
-
-// we set a higher value than the line-height (~13px) to accommodate cases where the text wraps
-$hds-tag-border-radius: 50px;
+@use "../mixins/carbonization" as *;
 
 .hds-tag {
   display: inline-flex;
@@ -18,16 +16,15 @@ $hds-tag-border-radius: 50px;
   width: fit-content;
   max-width: 100%;
   vertical-align: middle;
-  background-color: var(--token-color-surface-interactive);
-  border: 1px solid var(--token-color-border-strong);
-  border-radius: $hds-tag-border-radius;
+  border-style: solid;
+  border-width: 1px;
+  border-radius: var(--token-tag-border-radius);
 }
 
 .hds-tag__dismiss {
   flex: 0 0 auto;
   margin: 0; // reset default button margin
-  padding: 6px 4px 6px 8px;
-  background-color: var(--token-color-surface-interactive);
+  padding: 5px 4px 5px 8px;
   border: none; // reset default button border
   border-radius: inherit;
   border-top-right-radius: 0;
@@ -39,24 +36,27 @@ $hds-tag-border-radius: 50px;
   height: 12px;
 }
 
-.hds-tag__dismiss-icon,
-.hds-tag__text {
-  color: var(--token-color-foreground-primary);
-}
-
 .hds-tag__text,
 .hds-tag__link {
   flex: 1 0 0;
-  max-width: 166px; // account for excess horizontal padding of text in non-dismissible variant
-  padding: 3px 10px 5px 10px;
-  background-color: var(--token-color-surface-interactive);
+  max-width: var(--token-tag-max-width);
+  padding: var(--token-tag-padding-top) var(--token-tag-padding-right) var(--token-tag-padding-bottom)
+    var(--token-tag-padding-left);
   border-radius: inherit;
 }
 
+.hds-tag__link {
+  @include hds-apply-only-if-carbon() {
+    text-decoration: none;
+  }
+}
+
 .hds-tag__text-container {
   display: -webkit-box;
   overflow: hidden;
-  line-height: 1rem; // 16px - override `body-100`
+  font-weight: var(--token-tag-typography-font-weight);
+  font-size: var(--token-tag-typography-font-size);
+  line-height: var(--token-tag-typography-line-height);
   word-break: break-all;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 1;
@@ -65,8 +65,9 @@ $hds-tag-border-radius: 50px;
 
 .hds-tag__dismiss ~ .hds-tag__text,
 .hds-tag__dismiss ~ .hds-tag__link {
-  max-width: 160px;
-  padding: 3px 8px 5px 6px;
+  max-width: var(--token-tag-dismissible-max-width);
+  padding: var(--token-tag-padding-top) var(--token-tag-dismissible-padding-right) var(--token-tag-padding-bottom)
+    var(--token-tag-dismissible-padding-left);
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
 }
@@ -77,16 +78,6 @@ $hds-tag-border-radius: 50px;
 .hds-tag__link {
   cursor: pointer;
 
-  &:hover,
-  &.mock-hover {
-    background-color: var(--token-color-surface-interactive-hover);
-  }
-
-  &:active,
-  &.mock-active {
-    background-color: var(--token-color-surface-interactive-active);
-  }
-
   &:focus,
   &.mock-focus {
     @include hds-focus-ring-basic();
@@ -109,26 +100,97 @@ $hds-tag-border-radius: 50px;
   }
 }
 
-// COLORS (FOR LINK)
+// STATIC COLORS
+
+.hds-tag--is-static {
+  background-color: var(--token-tag-static-surface-color-default);
+  border-color: var(--token-tag-static-border-color);
+
+  .hds-tag__text {
+    color: var(--token-tag-static-foreground-color-default);
+  }
+
+  .hds-tag__dismiss {
+    background-color: var(--token-tag-static-surface-color-default);
+
+    &:hover,
+    &.mock-hover {
+      background-color: var(--token-tag-static-surface-color-hover);
+    }
+
+    &:active,
+    &.mock-active {
+      background-color: var(--token-tag-static-surface-color-active);
+    }
+  }
+
+  .hds-tag__dismiss-icon {
+    color: var(--token-tag-static-icon-color);
+  }
+}
+
+// LINK COLORS
 
 .hds-tag--color-primary {
+  border-color: var(--token-tag-link-border-color-primary);
+
+  .hds-tag__link,
+  .hds-tag__dismiss {
+    background-color: var(--token-tag-link-surface-color-primary-default);
+
+    &:hover,
+    &.mock-hover {
+      background-color: var(--token-tag-link-surface-color-primary-hover);
+    }
+
+    &:active,
+    &.mock-active {
+      background-color: var(--token-tag-link-surface-color-primary-active);
+    }
+  }
+
   .hds-tag__link {
-    color: var(--token-color-foreground-action);
+    color: var(--token-tag-link-foreground-color-primary-default);
 
     &:hover,
     &.mock-hover {
-      color: var(--token-color-foreground-action-hover);
+      color: var(--token-tag-link-foreground-color-primary-hover);
     }
 
     &:active,
     &.mock-active {
-      color: var(--token-color-foreground-action-active);
+      color: var(--token-tag-link-foreground-color-primary-active);
     }
   }
+
+  .hds-tag__dismiss-icon {
+    color: var(--token-tag-link-icon-color-primary);
+  }
 }
 
 .hds-tag--color-secondary {
+  border-color: var(--token-tag-link-border-color-secondary);
+
+  .hds-tag__link,
+  .hds-tag__dismiss {
+    background-color: var(--token-tag-link-surface-color-secondary-default);
+
+    &:hover,
+    &.mock-hover {
+      background-color: var(--token-tag-link-surface-color-secondary-hover);
+    }
+
+    &:active,
+    &.mock-active {
+      background-color: var(--token-tag-link-surface-color-secondary-active);
+    }
+  }
+
   .hds-tag__link {
-    color: var(--token-color-foreground-strong);
+    color: var(--token-tag-link-foreground-color-secondary-default);
+  }
+
+  .hds-tag__dismiss-icon {
+    color: var(--token-tag-link-icon-color-secondary);
   }
 }

package/dist/styles/components/theme-context.scss

@@ -0,0 +1,12 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+//
+// THEME CONTEXT
+//
+
+.hds-theme-context {
+  display: contents;
+}

package/dist/styles/components/tooltip.scss

@@ -8,6 +8,7 @@
 //
 
 @use "../mixins/focus-ring" as *;
+@use "../mixins/carbonization" as *;
 
 .hds-tooltip-button {
   @include hds-focus-ring-with-pseudo-element(
@@ -50,23 +51,27 @@
 
 .tippy-box[data-theme~="hds"] {
   padding: var(--token-tooltip-padding-vertical) var(--token-tooltip-padding-horizontal);
-  color: var(--token-tooltip-color-foreground-primary);
+  color: var(--token-color-foreground-high-contrast);
   font-weight: var(--token-typography-font-weight-regular);
   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);
   overflow-wrap: break-word;
-  background-color: var(--token-tooltip-color-surface-primary);
+  background-color: var(--token-color-surface-high-contrast);
   border-radius: var(--token-tooltip-border-radius);
   box-shadow: var(--token-elevation-higher-box-shadow);
   transition-property: transform, visibility, opacity;
 
+  @include hds-apply-only-if-carbon() {
+    transition: none;
+  }
+
   &[data-animation="fade"][data-state="hidden"] {
     opacity: 0;
   }
 
   &[data-inertia][data-state="visible"] {
-    transition-timing-function: var(--token-tooltip-transition-function);
+    transition-timing-function: var(--token-tooltip-transition-timing-function);
   }
 
   .tippy-content {
@@ -83,56 +88,81 @@
   }
 
   // works with Tippy's custom SVG arrow variation:
-  .tippy-svg-arrow {
-    width: 16px;
-    height: 16px;
+  .tippy-arrow {
+    position: relative;
+    width: var(--token-tooltip-caret-width);
+    height: var(--token-tooltip-caret-height);
     text-align: initial;
-    fill: var(--token-tooltip-color-surface-primary);
 
-    &,
-    & > svg {
+    &::before {
       position: absolute;
+      width: var(--token-tooltip-caret-width);
+      height: var(--token-tooltip-caret-height);
+      background-color: var(--token-color-surface-high-contrast);
+      content: "";
+      clip-path: var(--token-tooltip-caret-clip-path);
     }
   }
 
   // Arrow positioning styles taken from tippy.js (tippy.js/dist/svg-arrow.css)
-  &[data-placement^="top"] > .tippy-svg-arrow {
+  &[data-placement^="left"] > .tippy-arrow,
+  &[data-placement^="right"] > .tippy-arrow {
+    width: var(--token-tooltip-caret-height);
+    height: var(--token-tooltip-caret-width);
+  }
+
+  &[data-placement^="left"] > .tippy-arrow::before,
+  &[data-placement^="right"] > .tippy-arrow::before {
+    transform-origin: calc(var(--token-tooltip-caret-width) / 2) calc(var(--token-tooltip-caret-width) / 2);
+  }
+
+  &[data-placement="left-start"] > .tippy-arrow::before,
+  &[data-placement="right-start"] > .tippy-arrow::before {
+    top: calc(var(--token-tooltip-caret-height) / 2);
+  }
+
+  &[data-placement="left-end"] > .tippy-arrow::before,
+  &[data-placement="right-end"] > .tippy-arrow::before {
+    top: calc(-1 * var(--token-tooltip-caret-height) / 2);
+  }
+
+  &[data-placement^="top"] > .tippy-arrow::before,
+  &[data-placement^="bottom"] > .tippy-arrow::before {
+    transform-origin: unset;
+  }
+
+  &[data-placement^="top"] > .tippy-arrow {
     bottom: 0;
   }
 
-  &[data-placement^="top"] > .tippy-svg-arrow::after,
-  &[data-placement^="top"] > .tippy-svg-arrow > svg {
-    top: 16px;
+  &[data-placement^="top"] > .tippy-arrow::before {
+    bottom: calc(-1 * var(--token-tooltip-caret-height));
     transform: rotate(180deg);
   }
 
-  &[data-placement^="bottom"] > .tippy-svg-arrow {
+  &[data-placement^="bottom"] > .tippy-arrow {
     top: 0;
   }
 
-  &[data-placement^="bottom"] > .tippy-svg-arrow > svg {
-    bottom: 16px;
+  &[data-placement^="bottom"] > .tippy-arrow::before {
+    top: calc(-1 * var(--token-tooltip-caret-height));
   }
 
-  &[data-placement^="left"] > .tippy-svg-arrow {
+  &[data-placement^="left"] > .tippy-arrow {
     right: 0;
   }
 
-  &[data-placement^="left"] > .tippy-svg-arrow::after,
-  &[data-placement^="left"] > .tippy-svg-arrow > svg {
-    top: calc(50% - 3px);
-    left: 11px;
+  &[data-placement^="left"] > .tippy-arrow::before {
+    right: calc(-1 * var(--token-tooltip-caret-height));
     transform: rotate(90deg);
   }
 
-  &[data-placement^="right"] > .tippy-svg-arrow {
+  &[data-placement^="right"] > .tippy-arrow {
     left: 0;
   }
 
-  &[data-placement^="right"] > .tippy-svg-arrow::after,
-  &[data-placement^="right"] > .tippy-svg-arrow > svg {
-    top: calc(50% - 3px);
-    right: 11px;
+  &[data-placement^="right"] > .tippy-arrow::before {
+    left: calc(-1 * var(--token-tooltip-caret-height));
     transform: rotate(-90deg);
   }
 }