added component-level design tokens for badge + added $modes values + updated CSS styling to use them

Author: didoo

packages/components/src/styles/components/badge.scss

@@ -9,46 +9,16 @@
 
 @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: var(--token-badge-border-width) solid transparent;
 }
 
 .hds-badge__icon {
@@ -64,116 +34,39 @@ $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-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});
+        }
+      }
     }
   }
 }