fix: move types to separate package to prevent unnecessary CLI dependencies

.changeset/config.json

@@ -12,6 +12,7 @@
       "@digdir/designsystemet",
       "@digdir/designsystemet-css",
       "@digdir/designsystemet-theme",
+      "@digdir/designsystemet-types",
       "@digdir/designsystemet-react"
     ]
   ],

.changeset/great-kiwis-grow.md

@@ -0,0 +1,12 @@
+---
+"@digdir/designsystemet-react": minor
+"@digdir/designsystemet-theme": minor
+"@digdir/designsystemet-types": minor
+"@digdir/designsystemet": minor
+---
+
+Move submodule `@digdir/designsystemet/types` to a new package `@digdir/designsystemet-types` and change all references.
+
+After re-running `tokens build` downstream, this removes transitive dependencies on runtime dependencies on CLI tools like `commander` and `style-dictionary` which are never used in runtime, but are required for the CLI to function. It also makes code which doesn't use the CLI unaffected by our node version limitations (currently >= 22 due to `style-dictionary`).
+
+`@digdir/designsystemet/types` is preserved for now as a deprecated re-export of `@digdir/designsystemet-types` to avoid breaking people's builds.

.github/workflows/check-cli-node-compatibility.yml

@@ -26,7 +26,7 @@ jobs:
         run: pnpm install
 
       - name: build cli
-        run: pnpm --filter "@digdir/designsystemet" build
+        run: pnpm --filter "@digdir/designsystemet..." build
 
       - name: upload dist
         uses: actions/upload-artifact@ea165f8d65b6e75b540449e92b4886f43607fa02 # v4.6.2

README.md

@@ -80,7 +80,7 @@ import { Button } from '@digdir/designsystemet-react';
 
 #### 1.3 Typescript
 
-Types for your theme can be found under `@digdir/designsystemet/types` when combined with the generated types file, `types.d.ts`, for your theme.
+Types for your theme can be found under `@digdir/designsystemet-types` when combined with the generated types file, `types.d.ts`, for your theme.
 
 Add the following to your `tsconfig.json`
 ```jsonc

packages/cli/package.json

@@ -63,6 +63,7 @@
   },
   "dependencies": {
     "@commander-js/extra-typings": "^14.0.0",
+    "@digdir/designsystemet-types": "workspace:^",
     "@tokens-studio/sd-transforms": "1.3.0",
     "apca-w3": "^0.1.9",
     "change-case": "^5.4.4",

packages/cli/src/tokens/process/output/declarations.ts

@@ -28,10 +28,10 @@ function createColorTypeDeclaration(colors: string[]) {
 
   const typeDeclaration = `
 /* ${defaultFileHeader} */
-import type {} from '@digdir/designsystemet/types';
+import type {} from '@digdir/designsystemet-types';
 
 // Augment types based on theme
-declare module '@digdir/designsystemet/types' {
+declare module '@digdir/designsystemet-types' {
   export interface ColorDefinitions {
 ${colors.map((color) => `    ${color.includes('-') ? `'${color}'` : color}: never;`).join('\n')}
   }

packages/cli/src/types.ts

@@ -1,55 +1,6 @@
-// This file defines public types used in the Designsystemet
-
-// EmptyObject implementation from https://github.com/sindresorhus/type-fest/blob/main/source/empty-object.d.ts
-declare const emptyObjectSymbol: unique symbol;
-type EmptyObject = { [emptyObjectSymbol]?: never };
-
-/**
- * Base interface for available colors in Designsystemet.
- * The CLI will generate augmentations of this interface to allow
- * type safety of custom color names.
- */
-
-// biome-ignore lint/suspicious/noEmptyInterface: used for interface augmentation
-export interface ColorDefinitions {}
-// biome-ignore lint/suspicious/noEmptyInterface: used for interface augmentation
-export interface SeverityColorDefinitions {}
-
-/**
- * If {@link ColorDefinitions} or {@link SeverityColorDefinitions} has been extended to include color names, return T,
- * otherwise return the arbitrary string type.
+/*!
+ * This file is deprecated and will be removed in a future release.
+ * Use @digdir/designsystemet-types instead
  */
-type ColorWithFallback<T> = ColorDefinitions extends EmptyObject ? string : T;
 
-/**
- * Represents the available severity colors for the Designsystemet variables.
- * These are predefined colors that can be used to indicate different levels of severity.
- *  - `'info'`: Use the info color.
- *  - `'success'`: Use the success color.
- *  - `'warning'`: Use the warning color.
- *  - `'danger'`: Use the danger color.
- */
-export type SeverityColors = ColorWithFallback<keyof SeverityColorDefinitions>;
-/**
- * Represents the available color options for the Designsystemet variables.
- *
- * These are augmented based on your theme configuration.
- *
- * Consist of both main and support colors
- * @link https://theme.designsystemet.no
- */
-export type Color = ColorWithFallback<keyof ColorDefinitions>;
-/**
- * Represents the recommended size options for the Designsystemet variables.
- * - `'sm'`: Use the small size.
- * - `'md'`: Use the medium size.
- * - `'lg'`: Use the large size.
- */
-export type Size = 'sm' | 'md' | 'lg';
-/**
- * Represents the available color scheme options for the Designsystemet variables.
- * - `'light'`: Use the light color scheme.
- * - `'dark'`: Use the dark color scheme.
- * - `'auto'`: Automatically select the color scheme based on system preferences.
- */
-export type ColorScheme = 'light' | 'dark' | 'auto';
+export * from '@digdir/designsystemet-types';

packages/react/package.json

@@ -42,6 +42,7 @@
     "access": "public"
   },
   "dependencies": {
+    "@digdir/designsystemet-types": "workspace:^",
     "@floating-ui/dom": "^1.7.4",
     "@floating-ui/react": "0.26.23",
     "@navikt/aksel-icons": "^7.33.3",

packages/react/react-types.d.ts

@@ -1,4 +1,4 @@
-import type { Color, ColorScheme, Size } from '@digdir/designsystemet/types';
+import type { Color, ColorScheme, Size } from '@digdir/designsystemet-types';
 
 declare global {
   namespace React {

packages/react/src/colors.ts

@@ -1,4 +1,4 @@
 export type {
   Color,
   SeverityColors,
-} from '@digdir/designsystemet/types';
+} from '@digdir/designsystemet-types';

packages/react/src/components/Combobox/useFormField/useFormField.ts

@@ -1,4 +1,4 @@
-import type { Size } from '@digdir/designsystemet/types';
+import type { Size } from '@digdir/designsystemet-types';
 import cl from 'clsx/lite';
 import type { HTMLAttributes, InputHTMLAttributes, ReactNode } from 'react';
 import { useContext, useId } from 'react';

packages/react/src/components/alert/alert.tsx

@@ -1,4 +1,4 @@
-import type { SeverityColors } from '@digdir/designsystemet/types';
+import type { SeverityColors } from '@digdir/designsystemet-types';
 import cl from 'clsx/lite';
 import type { HTMLAttributes } from 'react';
 import { forwardRef } from 'react';

packages/react/src/components/avatar/avatar.tsx

@@ -1,4 +1,4 @@
-import type { Size } from '@digdir/designsystemet/types';
+import type { Size } from '@digdir/designsystemet-types';
 import { Slot } from '@radix-ui/react-slot';
 import cl from 'clsx/lite';
 import type { HTMLAttributes, ReactNode } from 'react';

packages/react/src/components/badge/badge.tsx

@@ -1,4 +1,4 @@
-import type { Color, SeverityColors } from '@digdir/designsystemet/types';
+import type { Color, SeverityColors } from '@digdir/designsystemet-types';
 import cl from 'clsx/lite';
 import { forwardRef, type HTMLAttributes } from 'react';
 import type { DefaultProps } from '../../types';

packages/react/src/components/button/button.tsx

@@ -1,4 +1,4 @@
-import type { Color, SeverityColors } from '@digdir/designsystemet/types';
+import type { Color, SeverityColors } from '@digdir/designsystemet-types';
 import { Slot, Slottable } from '@radix-ui/react-slot';
 import cl from 'clsx/lite';
 import type { ButtonHTMLAttributes, ReactNode } from 'react';

packages/react/src/components/input/input.stories.tsx

@@ -1,4 +1,4 @@
-import type { Size } from '@digdir/designsystemet/types';
+import type { Size } from '@digdir/designsystemet-types';
 import type { Meta, StoryFn, StoryObj } from '@storybook/react-vite';
 import { useEffect, useState } from 'react';
 import {

packages/react/src/components/popover/popover.tsx

@@ -1,4 +1,4 @@
-import type { Color, SeverityColors } from '@digdir/designsystemet/types';
+import type { Color, SeverityColors } from '@digdir/designsystemet-types';
 import type { MiddlewareState, Placement } from '@floating-ui/dom';
 import {
   autoUpdate,

packages/react/src/components/tag/tag.tsx

@@ -1,4 +1,4 @@
-import type { Color, SeverityColors } from '@digdir/designsystemet/types';
+import type { Color, SeverityColors } from '@digdir/designsystemet-types';
 import cl from 'clsx/lite';
 import type { HTMLAttributes } from 'react';
 import { forwardRef } from 'react';

packages/react/src/components/validation-message/validation-message.tsx

@@ -1,4 +1,4 @@
-import type { SeverityColors } from '@digdir/designsystemet/types';
+import type { SeverityColors } from '@digdir/designsystemet-types';
 import { Slot } from '@radix-ui/react-slot';
 import cl from 'clsx/lite';
 import type { HTMLAttributes } from 'react';

packages/react/src/index.ts

@@ -1,7 +1,7 @@
 export type {
-  /** @deprecated This export is deprecated. Use `Size` from `@digdir/designsystemet/types` */
+  /** @deprecated This export is deprecated. Use `Size` from `@digdir/designsystemet-types` */
   Size,
-} from '@digdir/designsystemet/types';
+} from '@digdir/designsystemet-types';
 export * from './components';
 export { omit } from './components/Combobox/omit/omit'; //deprecated
 export type { LabelRequired } from './types';

packages/react/src/types.ts

@@ -1,4 +1,4 @@
-import type { Size } from '@digdir/designsystemet/types';
+import type { Size } from '@digdir/designsystemet-types';
 import type { ReactNode } from 'react';
 import type { Color } from './colors';
 

packages/react/stories/testing.stories.tsx

@@ -1,4 +1,4 @@
-import type { Size } from '@digdir/designsystemet/types';
+import type { Size } from '@digdir/designsystemet-types';
 import { PrinterSmallIcon } from '@navikt/aksel-icons';
 import type { Meta, StoryFn } from '@storybook/react-vite';
 import { useState } from 'react';

packages/react/stories/typography.stories.tsx

@@ -1,4 +1,4 @@
-import type { Size } from '@digdir/designsystemet/types';
+import type { Size } from '@digdir/designsystemet-types';
 import type { Meta, StoryFn } from '@storybook/react-vite';
 import { useState } from 'react';
 import { Fieldset, Heading, Paragraph, ToggleGroup } from '../src';

packages/theme/brand/colors.d.ts

@@ -1,9 +1,9 @@
 /* This file is deprecated and will be removed in a future release. Use types.d.ts instead */
 /* build: v1.7.1 */
-import type {} from '@digdir/designsystemet/types';
+import type {} from '@digdir/designsystemet-types';
 
 // Augment types based on theme
-declare module '@digdir/designsystemet/types' {
+declare module '@digdir/designsystemet-types' {
   export interface ColorDefinitions {
     accent: never;
     brand1: never;

packages/theme/brand/types.d.ts

@@ -1,8 +1,8 @@
 /* build: v1.7.1 */
-import type {} from '@digdir/designsystemet/types';
+import type {} from '@digdir/designsystemet-types';
 
 // Augment types based on theme
-declare module '@digdir/designsystemet/types' {
+declare module '@digdir/designsystemet-types' {
   export interface ColorDefinitions {
     accent: never;
     brand1: never;

packages/theme/package.json

@@ -36,6 +36,9 @@
     "designsystemet:tokens-preview": "pnpm --filter @digdir/designsystemet run update:preview-tokens",
     "update:theme": "pnpm designsystemet:tokens-create && pnpm designsystemet:tokens-build && pnpm designsystemet:tokens-preview"
   },
+  "dependencies": {
+    "@digdir/designsystemet-types": "workspace:^"
+  },
   "devDependencies": {
     "rimraf": "^6.1.0",
     "@digdir/designsystemet": "workspace:^"

packages/theme/src/themes/colors.d.ts

@@ -1,9 +1,9 @@
 /* This file is deprecated and will be removed in a future release. Use types.d.ts instead */
 /* build: v1.6.1 */
-import type {} from '@digdir/designsystemet/types';
+import type {} from '@digdir/designsystemet-types';
 
 // Augment types based on theme
-declare module '@digdir/designsystemet/types' {
+declare module '@digdir/designsystemet-types' {
   export interface ColorDefinitions {
     accent: never;
     brand1: never;

packages/theme/src/themes/types.d.ts

@@ -1,8 +1,8 @@
 /* build: v1.6.1 */
-import type {} from '@digdir/designsystemet/types';
+import type {} from '@digdir/designsystemet-types';
 
 // Augment types based on theme
-declare module '@digdir/designsystemet/types' {
+declare module '@digdir/designsystemet-types' {
   export interface ColorDefinitions {
     accent: never;
     brand1: never;

packages/types/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "@digdir/designsystemet-types",
+  "version": "1.7.3",
+  "description": "Types used by Designsystemet themes",
+  "author": "Designsystemet team",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/digdir/designsystemet.git"
+  },
+  "homepage": "https://github.com/digdir/designsystemet/tree/main/packages/types",
+  "license": "MIT",
+  "exports": {
+    ".": {
+      "types": "./dist/types.d.ts"
+    }
+  },
+  "files": [
+    "./dist"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "tsc"
+  }
+}

packages/types/src/types.ts

@@ -0,0 +1,55 @@
+// This file defines public types used in the Designsystemet
+
+// EmptyObject implementation from https://github.com/sindresorhus/type-fest/blob/main/source/empty-object.d.ts
+declare const emptyObjectSymbol: unique symbol;
+type EmptyObject = { [emptyObjectSymbol]?: never };
+
+/**
+ * Base interface for available colors in Designsystemet.
+ * The CLI will generate augmentations of this interface to allow
+ * type safety of custom color names.
+ */
+
+// biome-ignore lint/suspicious/noEmptyInterface: used for interface augmentation
+export interface ColorDefinitions {}
+// biome-ignore lint/suspicious/noEmptyInterface: used for interface augmentation
+export interface SeverityColorDefinitions {}
+
+/**
+ * If {@link ColorDefinitions} or {@link SeverityColorDefinitions} has been extended to include color names, return T,
+ * otherwise return the arbitrary string type.
+ */
+type ColorWithFallback<T> = ColorDefinitions extends EmptyObject ? string : T;
+
+/**
+ * Represents the available severity colors for the Designsystemet variables.
+ * These are predefined colors that can be used to indicate different levels of severity.
+ *  - `'info'`: Use the info color.
+ *  - `'success'`: Use the success color.
+ *  - `'warning'`: Use the warning color.
+ *  - `'danger'`: Use the danger color.
+ */
+export type SeverityColors = ColorWithFallback<keyof SeverityColorDefinitions>;
+/**
+ * Represents the available color options for the Designsystemet variables.
+ *
+ * These are augmented based on your theme configuration.
+ *
+ * Consist of both main and support colors
+ * @link https://theme.designsystemet.no
+ */
+export type Color = ColorWithFallback<keyof ColorDefinitions>;
+/**
+ * Represents the recommended size options for the Designsystemet variables.
+ * - `'sm'`: Use the small size.
+ * - `'md'`: Use the medium size.
+ * - `'lg'`: Use the large size.
+ */
+export type Size = 'sm' | 'md' | 'lg';
+/**
+ * Represents the available color scheme options for the Designsystemet variables.
+ * - `'light'`: Use the light color scheme.
+ * - `'dark'`: Use the dark color scheme.
+ * - `'auto'`: Automatically select the color scheme based on system preferences.
+ */
+export type ColorScheme = 'light' | 'dark' | 'auto';

packages/types/tsconfig.json

@@ -0,0 +1,13 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "rootDir": "./src",
+    "outDir": "./dist",
+    "allowSyntheticDefaultImports": true,
+    "composite": true,
+    "noEmit": false,
+    "emitDeclarationOnly": true,
+    "incremental": true
+  },
+  "include": ["src"]
+}