Merge branch 'next' into chore/understanding-color-scale

digdir · Feb 27, 2025 · c11ca25 · c11ca25
2 parents 05eff94 + a0fa160
commit c11ca25
Show file tree

Hide file tree

Showing 17 changed files with 151 additions and 383 deletions.
diff --git a/.changeset/breezy-walls-change.md 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/.github/workflows/check-changeset b/.github/workflows/check-changeset
diff --git a/.github/workflows/check-changeset.yml b/.github/workflows/check-changeset.yml
@@ -1,12 +1,12 @@
 name: Check changeset
 on:
   workflow_dispatch:
-  pull_request:
-    paths:
-      - 'packages/cli/**'
-      - 'packages/css/**'
-      - 'packages/react/**'
-      - 'packages/theme/**'
+  # pull_request:
+  #   paths:
+  #     - 'packages/cli/**'
+  #     - 'packages/css/**'
+  #     - 'packages/react/**'
+  #     - 'packages/theme/**'
 jobs:
   checks:
     name: Check if changeset is present

diff --git a/apps/theme/store.ts b/apps/theme/store.ts
@@ -67,12 +67,14 @@ export const useThemeStore = create(
     baseBorderRadius: 4,
     colorScheme: 'light',
     colors: {
-      main: [{ name: 'accent', colors: generateColorSchemes('#0062BA') }],
+      main: [
+        { name: 'primary', colors: generateColorSchemes('#0062BA') },
+        { name: 'accent', colors: generateColorSchemes('#1E98F5') },
+      ],
       neutral: [{ name: 'neutral', colors: generateColorSchemes('#1E2B3C') }],
       support: [
-        { name: 'brand1', colors: generateColorSchemes('#F45F63') },
-        { name: 'brand2', colors: generateColorSchemes('#E5AA20') },
-        { name: 'brand3', colors: generateColorSchemes('#1E98F5') },
+        { name: 'extra1', colors: generateColorSchemes('#F45F63') },
+        { name: 'extra2', colors: generateColorSchemes('#E5AA20') },
       ],
     },
     themeTab: 'overview',

diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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.

diff --git a/plugins/figma/package.json b/plugins/figma/package.json
@@ -1,7 +1,7 @@
 {
   "name": "figma-plugin",
   "private": true,
-  "version": "0.3.0",
+  "version": "0.4.0",
   "type": "module",
   "scripts": {
     "dev": "run-s watch",