From 763f55f2f48813e42e47dabd3258256d29f3bc15 Mon Sep 17 00:00:00 2001
From: Une Sofie Kinn Ekroll <une.kinn.ekroll@bekk.no>
Date: Wed, 26 Feb 2025 21:08:46 +0100
Subject: [PATCH] feat: remove severity colors from default 'data-color' type
 (#3223)

Co-authored-by: Michael Marszalek <mimarz@gmail.com>
---
 .changeset/breezy-walls-change.md              |  5 +++++
 packages/react/src/colors.ts                   | 18 +++++++++++-------
 packages/react/src/components/Badge/Badge.tsx  |  8 ++++++++
 .../react/src/components/Button/Button.tsx     |  8 ++++++++
 .../react/src/components/Popover/Popover.tsx   |  8 ++++++++
 packages/react/src/components/Tag/Tag.tsx      | 15 ++++++++++++++-
 6 files changed, 54 insertions(+), 8 deletions(-)
 create mode 100644 .changeset/breezy-walls-change.md

diff --git a/.changeset/breezy-walls-change.md b/.changeset/breezy-walls-change.md
new file mode 100644
index 0000000000..4eaf174b81
--- /dev/null
+++ b/.changeset/breezy-walls-change.md
@@ -0,0 +1,5 @@
+---
+"@digdir/designsystemet-react": minor
+---
+
+`SeverityColors` is removed from `Color` type. Components where we deem severity to be relevant, now explicitly have SeverityColors added to `data-color`. `Button` component only allows `"danger"`.
diff --git a/packages/react/src/colors.ts b/packages/react/src/colors.ts
index b07294e26c..366eb0f5dd 100644
--- a/packages/react/src/colors.ts
+++ b/packages/react/src/colors.ts
@@ -16,13 +16,17 @@ export interface MainAndSupportColors {}
  * otherwise return the arbitrary string type.
  */
 type ColorWithFallback<T> = MainAndSupportColors extends EmptyObject
-  ? string & {}
+  ? string
   : T;
 
-export type SeverityColors = 'info' | 'success' | 'warning' | 'danger';
+export type SeverityInfo = 'info';
+export type SeveritySuccess = 'success';
+export type SeverityWarning = 'warning';
+export type SeverityDanger = 'danger';
+export type SeverityColors =
+  | SeverityInfo
+  | SeveritySuccess
+  | SeverityWarning
+  | SeverityDanger;
 
-export type CustomColors = ColorWithFallback<
-  'neutral' | keyof MainAndSupportColors
->;
-
-export type Color = CustomColors | ColorWithFallback<SeverityColors>;
+export type Color = ColorWithFallback<'neutral' | keyof MainAndSupportColors>;
diff --git a/packages/react/src/components/Badge/Badge.tsx b/packages/react/src/components/Badge/Badge.tsx
index f9414c8b1f..f5a9a4d288 100644
--- a/packages/react/src/components/Badge/Badge.tsx
+++ b/packages/react/src/components/Badge/Badge.tsx
@@ -1,3 +1,7 @@
+import type {
+  Color,
+  SeverityColors,
+} from '@digdir/designsystemet-react/colors';
 import cl from 'clsx/lite';
 import { type HTMLAttributes, forwardRef } from 'react';
 import type { DefaultProps } from '../../types';
@@ -20,6 +24,10 @@ export type BadgeProps = MergeRight<
      * @default 'base'
      */
     'data-variant'?: 'base' | 'tinted';
+    /**
+     * Change the color scheme of the badge
+     */
+    'data-color'?: Color | SeverityColors;
     children?: never;
   }
 >;
diff --git a/packages/react/src/components/Button/Button.tsx b/packages/react/src/components/Button/Button.tsx
index 390ad451ad..42971b3031 100644
--- a/packages/react/src/components/Button/Button.tsx
+++ b/packages/react/src/components/Button/Button.tsx
@@ -1,3 +1,7 @@
+import type {
+  Color,
+  SeverityDanger,
+} from '@digdir/designsystemet-react/colors';
 import { Slot, Slottable } from '@radix-ui/react-slot';
 import cl from 'clsx/lite';
 import { forwardRef } from 'react';
@@ -14,6 +18,10 @@ export type ButtonProps = MergeRight<
      * @default 'primary'
      */
     variant?: 'primary' | 'secondary' | 'tertiary';
+    /**
+     * Change the color scheme of the button
+     */
+    'data-color'?: Color | SeverityDanger;
     /**
      * Toggle icon only styling, pass icon as children
      * @default false
diff --git a/packages/react/src/components/Popover/Popover.tsx b/packages/react/src/components/Popover/Popover.tsx
index 1da5ba885b..31dc5340cb 100644
--- a/packages/react/src/components/Popover/Popover.tsx
+++ b/packages/react/src/components/Popover/Popover.tsx
@@ -1,3 +1,7 @@
+import type {
+  Color,
+  SeverityColors,
+} from '@digdir/designsystemet-react/colors';
 import {
   autoUpdate,
   computePosition,
@@ -54,6 +58,10 @@ export type PopoverProps = MergeRight<
      * @default 'default'
      */
     'data-variant'?: 'default' | 'tinted';
+    /**
+     * Change the color scheme of the popover
+     */
+    'data-color'?: Color | SeverityColors;
     /**
      * Callback when the popover wants to open.
      */
diff --git a/packages/react/src/components/Tag/Tag.tsx b/packages/react/src/components/Tag/Tag.tsx
index 7b9117dcc5..6b4ad632fa 100644
--- a/packages/react/src/components/Tag/Tag.tsx
+++ b/packages/react/src/components/Tag/Tag.tsx
@@ -1,9 +1,22 @@
+import type {
+  Color,
+  SeverityColors,
+} from '@digdir/designsystemet-react/colors';
 import cl from 'clsx/lite';
 import type { HTMLAttributes } from 'react';
 import { forwardRef } from 'react';
 import type { DefaultProps } from '../../types';
+import type { MergeRight } from '../../utilities';
 
-export type TagProps = DefaultProps & HTMLAttributes<HTMLSpanElement>;
+export type TagProps = MergeRight<
+  DefaultProps & HTMLAttributes<HTMLSpanElement>,
+  {
+    /**
+     * Change the color scheme of the tag
+     */
+    'data-color'?: Color | SeverityColors;
+  }
+>;
 
 /**
  * Use `Tag` to display categories or statuses.