From d93b8fe9b04192f605fc9e7bb2ce23893c5fb522 Mon Sep 17 00:00:00 2001
From: barsnes <tobias.barsnes@digdir.no>
Date: Fri, 9 Aug 2024 10:45:33 +0200
Subject: [PATCH] add colors and more styling

---
 packages/css/badge.css                        | 30 +++++++++++++++++++
 .../src/components/Badge/Badge.stories.tsx    |  1 +
 packages/react/src/components/Badge/Badge.tsx |  1 +
 3 files changed, 32 insertions(+)

diff --git a/packages/css/badge.css b/packages/css/badge.css
index 93077a1709..45c9c47ba3 100644
--- a/packages/css/badge.css
+++ b/packages/css/badge.css
@@ -28,6 +28,36 @@
   transform: translateX(50%) translateY(-50%);
 }
 
+.ds-bade--accent {
+  --dsc-badge-background: var(--ds-color-accent-base-default);
+  --dsc-badge-color: var(--ds-color-accent-contrast-default);
+}
+
+.ds-badge--info {
+  --dsc-badge-background: var(--ds-color-info-base-default);
+  --dsc-badge-color: var(--ds-color-info-contrast-default);
+}
+
+.ds-badge--success {
+  --dsc-badge-background: var(--ds-color-success-base-default);
+  --dsc-badge-color: var(--ds-color-success-contrast-default);
+}
+
+.ds-badge--warning {
+  --dsc-badge-background: var(--ds-color-warning-base-default);
+  --dsc-badge-color: var(--ds-color-warning-contrast-default);
+}
+
+.ds-badge--danger {
+  --dsc-badge-background: var(--ds-color-danger-base-default);
+  --dsc-badge-color: var(--ds-color-danger-contrast-default);
+}
+
+.ds-badge--neutral {
+  --dsc-badge-background: var(--ds-color-neutral-base-default);
+  --dsc-badge-color: var(--ds-color-neutral-contrast-default);
+}
+
 .ds-badge--sm {
   --dsc-badge-height: var(--ds-sizing-3);
   --dsc-badge-width: var(--ds-sizing-3);
diff --git a/packages/react/src/components/Badge/Badge.stories.tsx b/packages/react/src/components/Badge/Badge.stories.tsx
index 9c03994c3e..7e21401891 100644
--- a/packages/react/src/components/Badge/Badge.stories.tsx
+++ b/packages/react/src/components/Badge/Badge.stories.tsx
@@ -19,4 +19,5 @@ Preview.args = {
   /* children: <CogIcon fontSize='2rem' />, */
   count: 10,
   maxCount: 9,
+  color: 'accent',
 };
diff --git a/packages/react/src/components/Badge/Badge.tsx b/packages/react/src/components/Badge/Badge.tsx
index 363b5be583..7d1759d9ed 100644
--- a/packages/react/src/components/Badge/Badge.tsx
+++ b/packages/react/src/components/Badge/Badge.tsx
@@ -54,6 +54,7 @@ export const Badge = forwardRef<HTMLSpanElement, BadgeProps>(
             className={cl(
               'ds-badge',
               `ds-badge--${size}`,
+              `ds-badge--${color}`,
               count && 'ds-badge--count',
               children && 'ds-badge--float',
             )}