add colors and more styling

digdir · Aug 9, 2024 · d93b8fe · d93b8fe
1 parent d069ada
commit d93b8fe
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 0 deletions.
diff --git 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
@@ -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
@@ -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',
             )}