@hashicorp/design-system-components 5.2.0 → 5.2.1-rc-20260109114755

package/dist/styles/components/badge.scss

@@ -7,48 +7,17 @@
 // 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: var(--token-badge-border-width);
 }
 
 .hds-badge__icon {
@@ -64,116 +33,42 @@ $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});
+    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});
 
     .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" {
+          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/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;
     }

package/dist/styles/components/dropdown.scss

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

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

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

package/dist/styles/components/index.scss

@@ -0,0 +1,52 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+// 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 "./accordion";
+@use "./advanced-table";
+@use "./alert";
+@use "./app-footer";
+@use "./app-frame";
+@use "./app-header";
+@use "./app-side-nav";
+@use "./application-state";
+@use "./badge";
+@use "./badge-count";
+@use "./breadcrumb";
+@use "./button";
+@use "./button-set";
+@use "./card";
+@use "./code-block";
+@use "./code-editor";
+@use "./copy";
+@use "./dialog-primitive";
+@use "./disclosure-primitive";
+@use "./dismiss-button";
+@use "./dropdown";
+@use "./flyout";
+@use "./form"; // multiple components
+@use "./icon";
+@use "./icon-tile";
+@use "./layout"; // multiple components
+@use "./link"; // multiple components
+@use "./modal";
+@use "./page-header";
+@use "./pagination";
+@use "./reveal";
+@use "./rich-tooltip";
+@use "./segmented-group";
+@use "./separator";
+@use "./side-nav";
+@use "./stepper";
+@use "./table";
+@use "./tabs";
+@use "./tag";
+@use "./text";
+@use "./theme-context";
+@use "./time";
+@use "./toast";
+@use "./tooltip";
+// END COMPONENT CSS FILES IMPORTS

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;
+}