fix: move types to separate package to prevent unnecessary CLI dependencies (#4241)

Author: unekinn

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