@hashicorp/design-system-components 5.2.0-rc-20260108162959 → 5.2.0

package/dist/styles/@hashicorp/design-system-components.scss

@@ -3,8 +3,66 @@
  * SPDX-License-Identifier: MPL-2.0
  */
 
-// these are the "standard" HDS tokens (the file comes from `packages/tokens/dist/`)
-@use "products/css/tokens";
+// these files come from the 'design-system-tokens' package
+@use "tokens";
+@use "helpers/color";
+@use "helpers/elevation";
+@use "helpers/focus-ring";
+@use "helpers/typography";
 
-// these are the styles specific (and only) for the HDS components
-@use "./design-system-components-common";
+// Vendor styles
+@use "./design-system-ember-a11y-refocus";
+
+// Notice: this list can be automatically edited by the Ember blueprint, please don't remove the start/end comments
+// START COMPONENTS CSS FILES IMPORTS
+@use "../components/accordion";
+@use "../components/advanced-table";
+@use "../components/alert";
+@use "../components/app-footer";
+@use "../components/app-frame";
+@use "../components/app-header";
+@use "../components/app-side-nav";
+@use "../components/application-state";
+@use "../components/badge";
+@use "../components/badge-count";
+@use "../components/breadcrumb";
+@use "../components/button";
+@use "../components/button-set";
+@use "../components/card";
+@use "../components/code-block";
+@use "../components/code-editor";
+@use "../components/copy";
+@use "../components/dialog-primitive";
+@use "../components/disclosure-primitive";
+@use "../components/dismiss-button";
+@use "../components/dropdown";
+@use "../components/flyout";
+@use "../components/form"; // multiple components
+@use "../components/icon";
+@use "../components/icon-tile";
+@use "../components/layout"; // multiple components
+@use "../components/link"; // multiple components
+@use "../components/modal";
+@use "../components/page-header";
+@use "../components/pagination";
+@use "../components/reveal";
+@use "../components/rich-tooltip";
+@use "../components/segmented-group";
+@use "../components/separator";
+@use "../components/side-nav";
+@use "../components/stepper";
+@use "../components/table";
+@use "../components/tabs";
+@use "../components/tag";
+@use "../components/text";
+@use "../components/time";
+@use "../components/toast";
+@use "../components/tooltip";
+// END COMPONENT CSS FILES IMPORTS
+
+@use "../mixins/screen-reader-only" as *;
+
+// stylelint-disable-next-line selector-class-pattern
+.sr-only {
+  @include screen-reader-only();
+}

package/dist/styles/@hashicorp/design-system-components.scss.map

@@ -0,0 +1 @@
+{"version":3,"file":"design-system-components.scss","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/styles/components/badge-count.scss

@@ -7,9 +7,12 @@
 // 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-colors: ("neutral", "neutral-dark-mode");
-$hds-badge-count-types: ("filled", "inverted", "outlined");
+$hds-badge-count-border-width: 1px;
 
 .hds-badge-count {
   display: inline-flex;
@@ -17,40 +20,87 @@ $hds-badge-count-types: ("filled", "inverted", "outlined");
   max-width: 100%;
   font-weight: var(--token-typography-font-weight-medium);
   font-family: var(--token-typography-font-stack-text);
-  border-style: solid;
-  border-width: var(--token-badge-border-width);
+  border: $hds-badge-count-border-width solid transparent;
 }
 
 // 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: var(--token-badge-height-#{$size});
-    // note: for the horizontal padding, we're using a specific design token for the `BadgeCount` component
-    padding: calc(var(--token-badge-padding-vertical-#{$size}) - var(--token-badge-border-width))
-      calc(var(--token-badge-count-padding-horizontal-#{$size}) - var(--token-badge-border-width));
-    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);
+    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);
   }
 }
 
 // COLOR + TYPE COMBINATIONS
 
-@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;
-        }
-      }
-    }
+.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);
   }
 }

package/dist/styles/components/badge.scss

@@ -7,17 +7,48 @@
 // 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-colors: ("neutral", "neutral-dark-mode", "highlight", "success", "warning", "critical");
-$hds-badge-types: ("filled", "inverted", "outlined");
+$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 {
+  // 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-style: solid;
-  border-width: var(--token-badge-border-width);
+  border: $hds-badge-border-width solid transparent;
+  border-radius: var(--token-border-radius-small);
 }
 
 .hds-badge__icon {
@@ -33,42 +64,116 @@ $hds-badge-types: ("filled", "inverted", "outlined");
 
 // 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: var(--token-badge-gap-#{$size});
-    min-height: var(--token-badge-height-#{$size});
-    padding: calc(var(--token-badge-padding-vertical-#{$size}) - var(--token-badge-border-width))
-      calc(var(--token-badge-padding-horizontal-#{$size}) - var(--token-badge-border-width));
-    border-radius: var(--token-badge-border-radius-#{$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});
 
     .hds-badge__icon {
-      width: var(--token-badge-icon-size-#{$size});
-      height: var(--token-badge-icon-size-#{$size});
+      width: map.get($hds-badge-size-props, $size, "icon-size");
+      height: map.get($hds-badge-size-props, $size, "icon-size");
     }
 
     .hds-badge__text {
-      font-size: var(--token-badge-typography-font-size-#{$size});
-      line-height: var(--token-badge-typography-line-height-#{$size});
+      font-size: map.get($hds-badge-size-props, $size, "font-size");
+      line-height: map.get($hds-badge-size-props, $size, "line-height");
     }
   }
 }
 
 // COLOR + TYPE COMBINATIONS
 
-@each $color in $hds-badge-colors {
+.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 {
   .hds-badge--color-#{$color} {
-    @each $type in $hds-badge-types {
-      &.hds-badge--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;
-        }
-      }
+    &.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");
     }
   }
 }

package/dist/styles/components/button.scss

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

package/dist/styles/components/dropdown.scss

@@ -12,6 +12,8 @@
 @use "../mixins/button" as *;
 @use "../mixins/focus-ring" as *;
 
+$hds-dropdown-toggle-border-radius: $hds-button-border-radius;
+
 // DROPDOWN
 
 .hds-dropdown--is-inline {
@@ -37,7 +39,7 @@
   color: var(--token-color-foreground-primary);
   background-color: var(--token-color-surface-faint);
   border: 1px solid var(--token-color-border-strong);
-  border-radius: var(--token-button-border-radius);
+  border-radius: $hds-dropdown-toggle-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)
@@ -79,8 +81,8 @@
   align-items: center;
   justify-content: center;
   border-radius: calc(
-    var(--token-button-border-radius) - 2px
-  ); // var(--token-button-border-radius) - (1px padding + 1px border) (= 3px)
+    #{$hds-dropdown-toggle-border-radius} - 2px
+  ); // $hds-dropdown-toggle-border-radius - (1px padding + 1px border) (= 3px)
 
   img {
     width: 100%;

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: var(--token-button-border-width) solid var(--token-color-border-strong);
-  border-radius: var(--token-button-border-radius);
+  border: $hds-button-border-width solid var(--token-color-border-strong);
+  border-radius: $hds-button-border-radius;
   box-shadow: var(--token-elevation-low-box-shadow);
   cursor: pointer;
 }

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

@@ -12,6 +12,9 @@
 @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;
@@ -40,8 +43,7 @@
   @include hds-breakpoint-above("md") {
     display: grid;
     flex-grow: 1;
-    // `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));
+    grid-template-columns: var(--hds-key-value-inputs-columns, 1fr 1fr $hds-delete-button-width);
     align-items: flex-end;
     column-gap: 8px;
     row-gap: 0;