Badge - Update colors to increase contrast for a11y (HDS-4335) (#2695)

Author: KristinLBradley

.changeset/old-snakes-judge.md

@@ -0,0 +1,7 @@
+---
+"@hashicorp/design-system-components": minor
+---
+
+`Badge` - Update foreground and background colors to improve contrast for a11y
+
+`BadgeCount` - Update foreground color of neutral variant to improve contrast for a11y

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

@@ -67,7 +67,7 @@ $hds-badge-count-size-props: (
 .hds-badge-count--color-neutral {
   &.hds-badge-count--type-filled {
     color: var(--token-color-foreground-primary);
-    background-color: var(--token-color-surface-strong);
+    background-color: var(--token-color-palette-neutral-200);
   }
 
   &.hds-badge-count--type-inverted {

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

@@ -34,6 +34,16 @@ $hds-badge-colors-props: (
 
 
 .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%;
@@ -111,7 +121,7 @@ $hds-badge-size-props: (
 .hds-badge--color-neutral {
   &.hds-badge--type-filled {
     color: var(--token-color-foreground-primary);
-    background-color: var(--token-color-surface-strong);
+    background-color: var(--token-color-palette-neutral-200);
   }
 
   &.hds-badge--type-inverted {