digdir · Barsnes · Oct 31, 2025 · Oct 30, 2025 · Oct 30, 2025 · Oct 30, 2025
@@ -0,0 +1,8 @@
+---
+"@digdir/designsystemet": patch
+---
+
+For your config file, you can now get the schema file from designsystemet.no
+```json
+"$schema": "https://designsystemet.no/schemas/cli/[VERSION].json"
+```
@@ -0,0 +1,147 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "type": "object",
+  "properties": {
+    "$schema": {
+      "type": "string"
+    },
+    "outDir": {
+      "description": "Path to the output directory for the created design tokens",
+      "type": "string"
+    },
+    "themes": {
+      "description": "An object with one or more themes. Each property defines a theme, and the property name is used as the theme name.",
+      "type": "object",
+      "propertyNames": {
+        "type": "string"
+      },
+      "additionalProperties": {
+        "description": "An object defining a theme. The property name holding the object becomes the theme name.",
+        "type": "object",
+        "properties": {
+          "colors": {
+            "description": "Defines the colors for this theme",
+            "type": "object",
+            "properties": {
+              "main": {
+                "description": "An object with one or more color definitions. The property name is used as the color name.",
+                "type": "object",
+                "propertyNames": {
+                  "type": "string",
+                  "pattern": "^(?!(?:neutral|success|warning|danger|info)$)"
+                },
+                "additionalProperties": {
+                  "description": "A hex color, which is used for creating a color scale. Invalid color names: neutral, success, warning, danger, info"
+                }
+              },
+              "support": {
+                "default": {},
+                "description": "An object with one or more color definitions. The property name is used as the color name.",
+                "type": "object",
+                "propertyNames": {
+                  "type": "string",
+                  "pattern": "^(?!(?:neutral|success|warning|danger|info)$)"
+                },
+                "additionalProperties": {
+                  "description": "A hex color, which is used for creating a color scale. Invalid color names: neutral, success, warning, danger, info"
+                }
+              },
+              "neutral": {
+                "description": "A hex color, which is used for creating a color scale. Invalid color names: neutral, success, warning, danger, info"
+              }
+            },
+            "required": ["main", "support", "neutral"],
+            "additionalProperties": false
+          },
+          "typography": {
+            "description": "Defines the typography for a given theme",
+            "type": "object",
+            "properties": {
+              "fontFamily": {
+                "description": "Sets the font-family for this theme",
+                "type": "string"
+              }
+            },
+            "required": ["fontFamily"],
+            "additionalProperties": false
+          },
+          "borderRadius": {
+            "description": "Defines the border-radius for this theme",
+            "type": "number"
+          },
+          "overrides": {
+            "description": "Overrides for generated design tokens. Currently only supports colors defined in your theme",
+            "type": "object",
+            "properties": {
+              "colors": {
+                "description": "An object with color names as keys",
+                "type": "object",
+                "propertyNames": {
+                  "type": "string"
+                },
+                "additionalProperties": {
+                  "description": "The name of the color to add overrides for, e.g. \"accent\"",
+                  "type": "object",
+                  "propertyNames": {
+                    "type": "string",
+                    "enum": [
+                      "background-default",
+                      "background-tinted",
+                      "surface-default",
+                      "surface-tinted",
+                      "surface-hover",
+                      "surface-active",
+                      "border-subtle",
+                      "border-default",
+                      "border-strong",
+                      "text-subtle",
+                      "text-default",
+                      "base-default",
+                      "base-hover",
+                      "base-active",
+                      "base-contrast-subtle",
+                      "base-contrast-default"
+                    ]
+                  },
+                  "additionalProperties": {
+                    "description": "Override values for semantic color tokens like \"background-subtle\", \"border-default\", etc.",
+                    "type": "object",
+                    "properties": {
+                      "light": {
+                        "description": "A hex color, which is used for creating a color scale. Invalid color names: neutral, success, warning, danger, info"
+                      },
+                      "dark": {
+                        "description": "A hex color, which is used for creating a color scale. Invalid color names: neutral, success, warning, danger, info"
+                      }
+                    },
+                    "additionalProperties": false
+                  }
+                }
+              },
+              "severity": {
+                "description": "An object with severity color names as keys",
+                "type": "object",
+                "propertyNames": {
+                  "type": "string",
+                  "enum": ["info", "success", "warning", "danger"]
+                },
+                "additionalProperties": {
+                  "description": "A hex color, which is used for creating a color scale"
+                }
+              }
+            },
+            "additionalProperties": false
+          }
+        },
+        "required": ["colors"],
+        "additionalProperties": false
+      }
+    },
+    "clean": {
+      "description": "Delete the output directory before building or creating tokens",
+      "type": "boolean"
+    }
+  },
+  "required": ["outDir", "themes"],
+  "additionalProperties": false
+}
@@ -10,6 +10,11 @@ export default [
   route('/slack', 'routes/slack.tsx', {
     id: 'slack-redirect',
   }),
+  ...prefix('/schemas', [
+    route('/cli/:version', 'routes/cli-schema.tsx', {
+      id: 'schemas-cli',
+    }),
+  ]),
   layout('./layouts/root/layout.tsx', [
     ...prefix('/:lang', [
       index('routes/home/home.tsx', {

@@ -0,0 +1,19 @@
+import { data } from 'react-router';
+import { getFileFromContentDir } from '~/_utils/files.server';
+import type { Route } from './+types/cli-schema';
+
+export const loader = async ({ params: { version } }: Route.LoaderArgs) => {
+  /* get JSON schema from /content/schemas/cli/{VERSION} */
+  const file = getFileFromContentDir(`schemas/cli/${version}`);
+
+  if (!file) {
+    throw new Response('File not found', { status: 404 });
+  }
+
+  return data(JSON.parse(file), {
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    status: 200,
+  });
+};
@@ -21,7 +21,8 @@
       "!**/tsconfig.*.json", // https://github.com/biomejs/biome/issues/1151
       "!**/.react-router/",
       "!**/package.json", // changeset wants the files to be formatted differently
-      "!**/wc/public"
+      "!**/wc/public",
+      "!**/apps/www/content/schemas/**/*"
     ]
   },
   "formatter": {

@@ -26,7 +26,7 @@
     "build:themebuilder": "pnpm --filter @web/themebuilder build",
     "types": "pnpm -r types",
     "types:react": "pnpm --filter @digdir/designsystemet-react types",
-    "version-packages": "changeset version && node scripts/sync-changelogs.js && git add apps/www/content/changelogs && git commit -m \"sync www changelogs\" || true",
+    "version-packages": "changeset version && node scripts/sync-changelogs.js && pnpm build:cli && node scripts/sync-cli-schema.js && git add apps/www/content/changelogs && git add apps/www/content/schemas/cli && git commit -m \"sync www changelogs and schema\" || true",
     "publish-packages": "pnpm build && changeset publish",
     "chromatic": "pnpm --filter @web/storybook chromatic",
     "update:template": "pnpm --filter @digdir/designsystemet update:template",

@@ -0,0 +1,40 @@
+import { promises as fs } from 'node:fs';
+import path from 'node:path';
+
+const ROOT = process.cwd();
+const SCHEMAS_DIR = path.join(ROOT, 'apps/www/app/content/schemas/cli');
+const CLI_ROOT = path.join(ROOT, 'packages/cli');
+
+// find the current schema file from dist
+async function findCurrentSchema() {
+  const entries = await fs.readdir(CLI_ROOT + '/dist');
+
+  const schema = entries.find((entry) => entry.endsWith('config.schema.json'));
+
+  return schema;
+}
+
+async function getCurrentVersion() {
+  const pkgJsonPath = path.join(CLI_ROOT, 'package.json');
+  const pkgJsonContent = await fs.readFile(pkgJsonPath, 'utf8');
+  const pkg = JSON.parse(pkgJsonContent);
+  return pkg.version;
+}
+
+async function main() {
+  await fs.mkdir(SCHEMAS_DIR, { recursive: true });
+  const schemaFile = await findCurrentSchema();
+  if (!schemaFile) {
+    console.error('No schema file found in dist directory');
+    process.exit(1);
+  }
+  const src = path.join(CLI_ROOT, 'dist', schemaFile);
+  const dst = path.join(SCHEMAS_DIR, `${await getCurrentVersion()}.json`);
+  await fs.copyFile(src, dst);
+  console.log(`Copied schema file to ${dst}`);
+}
+
+main().catch((err) => {
+  console.error(err);
+  process.exit(1);
+});