feat: remove severity colors from default 'data-color' type

.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"`.

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>;

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;
   }
 >;

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

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.
      */

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.