fix: colors to match figma

Author: shleewhite

.changeset/popular-shoes-tease.md

@@ -0,0 +1,5 @@
+---
+"@hashicorp/design-system-components": patch
+---
+
+`Badge`: update the color tokens to be more accurate token for the usage.

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

@@ -8,7 +8,6 @@
 //
 
 $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;
 
@@ -96,20 +95,20 @@ $hds-badge-size-props: (
 
   &.hds-badge--type-inverted {
     color: var(--token-color-foreground-high-contrast);
-    background-color: var(--token-color-foreground-faint);
+    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-foreground-faint);
+    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-foreground-faint);
+    background-color: var(--token-color-palette-neutral-500);
   }
 
   &.hds-badge--type-inverted {
@@ -120,26 +119,78 @@ $hds-badge-size-props: (
   &.hds-badge--type-outlined {
     color: var(--token-color-foreground-high-contrast);
     background-color: transparent;
-    border-color: var(--token-color-palette-neutral-100);
+    border-color: var(--token-color-palette-neutral-50);
   }
 }
 
-@each $color in $hds-badge-colors-accents {
-  .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--color-highlight {
+  &.hds-badge--type-filled {
+    color: var(--token-color-foreground-highlight-on-surface);
+    background-color: var(--token-color-surface-highlight);
+  }
 
-    &.hds-badge--type-inverted {
-      color: var(--token-color-foreground-high-contrast);
-      background-color: var(--token-color-foreground-#{$color});
-    }
+  &.hds-badge--type-inverted {
+    color: var(--token-color-foreground-high-contrast);
+    background-color: var(--token-color-palette-purple-200);
+  }
 
-    &.hds-badge--type-outlined {
-      color: var(--token-color-foreground-#{$color});
-      background-color: transparent;
-      border-color: currentColor;
-    }
+  &.hds-badge--type-outlined {
+    color: var(--token-color-foreground-highlight);
+    background-color: transparent;
+    border-color: var(--token-color-palette-purple-200);
+  }
+}
+
+.hds-badge--color-success {
+  &.hds-badge--type-filled {
+    color: var(--token-color-foreground-success-on-surface);
+    background-color: var(--token-color-surface-success);
+  }
+
+  &.hds-badge--type-inverted {
+    color: var(--token-color-foreground-high-contrast);
+    background-color: var(--token-color-palette-green-200);
+  }
+
+  &.hds-badge--type-outlined {
+    color: var(--token-color-foreground-success);
+    background-color: transparent;
+    border-color: var(--token-color-palette-green-200);
+  }
+}
+
+.hds-badge--color-warning {
+  &.hds-badge--type-filled {
+    color: var(--token-color-foreground-warning-on-surface);
+    background-color: var(--token-color-surface-warning);
+  }
+
+  &.hds-badge--type-inverted {
+    color: var(--token-color-foreground-high-contrast);
+    background-color: var(--token-color-palette-amber-200);
+  }
+
+  &.hds-badge--type-outlined {
+    color: var(--token-color-foreground-warning);
+    background-color: transparent;
+    border-color: var(--token-color-palette-amber-200);
+  }
+}
+
+.hds-badge--color-critical {
+  &.hds-badge--type-filled {
+    color: var(--token-color-foreground-critical-on-surface);
+    background-color: var(--token-color-surface-critical);
+  }
+
+  &.hds-badge--type-inverted {
+    color: var(--token-color-foreground-high-contrast);
+    background-color: var(--token-color-palette-red-200);
+  }
+
+  &.hds-badge--type-outlined {
+    color: var(--token-color-foreground-critical);
+    background-color: transparent;
+    border-color: var(--token-color-palette-red-200);
   }
 }