@hashicorp/design-system-components 4.24.2-rc-20251110174309 → 4.24.2-rc-20251112142624

package/dist/styles/components/badge.scss

@@ -9,25 +9,20 @@
 
 @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: ("neutral", "neutral-dark-mode", "highlight", "success", "warning", "critical");
+$hds-badge-types: ("filled", "inverted", "outlined");
 $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),
   ),
 );
@@ -47,8 +42,8 @@ $hds-badge-colors-props: (
   align-items: center;
   max-width: 100%;
   vertical-align: middle;
-  border: $hds-badge-border-width solid transparent;
-  border-radius: var(--token-border-radius-small);
+  border: var(--token-badge-border-width) solid transparent;
+  border-radius: var(--token-badge-border-radius);
 }
 
 .hds-badge__icon {
@@ -64,116 +59,38 @@ $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));
 
     .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-font-size-#{$size});
+      line-height: var(--token-badge-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});
+        background-color: var(--token-badge-surface-color-#{$color}-#{$type});
+
+        @if $type == "outlined" {
+          border-color: var(--token-badge-border-color-#{$color}-#{$type});
+        }
+      }
     }
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hashicorp/design-system-components",
-  "version": "4.24.2-rc-20251110174309",
+  "version": "4.24.2-rc-20251112142624",
   "description": "Helios Design System Components",
   "keywords": [
     "hashicorp",
@@ -35,7 +35,7 @@
     "@embroider/macros": "^1.18.1",
     "@embroider/util": "^1.13.4",
     "@floating-ui/dom": "^1.6.12",
-    "@hashicorp/design-system-tokens": "4.0.0-rc-20251110174309",
+    "@hashicorp/design-system-tokens": "4.0.0-rc-20251112142624",
     "@hashicorp/flight-icons": "^3.14.0",
     "@lezer/highlight": "^1.2.1",
     "@nullvoxpopuli/ember-composable-helpers": "^5.2.11",