@digdir/designsystemet 1.0.5 → 1.0.7

package/LICENSE

@@ -0,0 +1,7 @@
+Copyright 2024 Digitaliseringsdirektoratet (Digdir)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/configs/digdir.config.json

@@ -0,0 +1,59 @@
+{
+  "$schema": "../dist/config.schema.json",
+  "outDir": "./temp/digdir/design-tokens",
+  "clean": true,
+  "themes": {
+    "digdir": {
+      "colors": {
+        "main": {
+          "accent": "#0062BA"
+        },
+        "support": {
+          "brand1": "#F45F63",
+          "brand2": "#E5AA20",
+          "brand3": "#1E98F5"
+        },
+        "neutral": "#1E2B3C"
+      }
+    },
+    "altinn": {
+      "colors": {
+        "main": {
+          "accent": "#0062BA"
+        },
+        "support": {
+          "brand1": "#0162BA",
+          "brand2": "#3F3161",
+          "brand3": "#E02F4A"
+        },
+        "neutral": "#1E2B3C"
+      }
+    },
+    "uutilsynet": {
+      "colors": {
+        "main": {
+          "accent": "#0062BA"
+        },
+        "support": {
+          "brand1": "#5B60D1",
+          "brand2": "#FEA769",
+          "brand3": "#5DA290"
+        },
+        "neutral": "#1E2B3C"
+      }
+    },
+    "portal": {
+      "colors": {
+        "main": {
+          "accent": "#38628C"
+        },
+        "support": {
+          "brand1": "#D9ECFF",
+          "brand2": "#FFCA99",
+          "brand3": "#D96C79"
+        },
+        "neutral": "#203040"
+      }
+    }
+  }
+}

package/configs/test-tokens.config.json

@@ -0,0 +1,45 @@
+{
+  "$schema": "../dist/config.schema.json",
+  "outDir": "./temp/config/design-tokens",
+  "clean": true,
+  "themes": {
+    "some-org": {
+      "colors": {
+        "main": {
+          "dominant": "#0062BA",
+          "complimentary": "#94237C"
+        },
+        "support": {
+          "first": "#F45F63",
+          "second": "#E5AA20",
+          "third": "#1E98F5",
+          "fourth": "#F167EC"
+        },
+        "neutral": "#303030"
+      },
+      "typography": {
+        "fontFamily": "Inter"
+      },
+      "borderRadius": 8
+    },
+    "other-org": {
+      "colors": {
+        "main": {
+          "dominant": "#ffaaaa",
+          "complimentary": "#00ff00"
+        },
+        "support": {
+          "first": "#abcdef",
+          "second": "#123456",
+          "third": "#994a22",
+          "fourth": "#3d5f30"
+        },
+        "neutral": "#c05030"
+      },
+      "typography": {
+        "fontFamily": "Roboto"
+      },
+      "borderRadius": 99
+    }
+  }
+}

package/dist/bin/designsystemet.js

@@ -1,7 +1,7 @@
 #!/usr/bin/env node
 
 // bin/designsystemet.ts
-import path4 from "node:path";
+import path4 from "path";
 import { Argument, createCommand, program } from "@commander-js/extra-typings";
 import chalk8 from "chalk";
 import * as R25 from "ramda";
@@ -9,6 +9,7 @@ import { fromError } from "zod-validation-error";
 
 // src/colors/utils.ts
 import chroma from "chroma-js";
+import Colorjs from "colorjs.io";
 import { Hsluv } from "hsluv";
 var getLuminanceFromLightness = (lightness) => {
   const conv = new Hsluv();
@@ -360,7 +361,7 @@ var generateColorContrast = (color, type) => {
 
 // src/config.ts
 import * as R7 from "ramda";
-import { z } from "zod";
+import { z } from "zod/v4";
 
 // src/tokens/create/defaults.ts
 import * as R3 from "ramda";
@@ -2136,45 +2137,35 @@ var hexPatterns = [
 ];
 var reservedColorsPattern = `^(?!(?:${RESERVED_COLORS.join("|")})$)`;
 var colorRegex = new RegExp(`^${hexPatterns.join("|")}$`);
-var colorSchema = z.string({
-  description: `A hex color, which is used for creating a color scale. Invalid color names: ${RESERVED_COLORS.join(", ")}`
-}).regex(colorRegex).transform(convertToHex);
+var colorSchema = z.string().regex(colorRegex).transform(convertToHex).describe(
+  `A hex color, which is used for creating a color scale. Invalid color names: ${RESERVED_COLORS.join(", ")}`
+);
 var colorCategorySchema = z.record(
   z.string().regex(new RegExp(reservedColorsPattern, "i"), {
-    message: `Color names cannot include reserved names: ${RESERVED_COLORS.join(", ")}`
+    error: `Color names cannot include reserved names: ${RESERVED_COLORS.join(", ")}`
   }),
   colorSchema,
   {
-    description: "One or more color definitions",
-    invalid_type_error: "Color definitions must be hex color values"
+    error: "Color definitions must be hex color values"
   }
 ).refine((colors2) => !Object.keys(colors2).some((key) => RESERVED_COLORS.includes(key.toLowerCase())), {
-  message: `Color names cannot include reserved names: ${RESERVED_COLORS.join(", ")}`
-});
-var themeSchema = z.object(
-  {
-    colors: z.object(
-      {
-        main: colorCategorySchema,
-        support: colorCategorySchema.optional().default({}),
-        neutral: colorSchema
-      },
-      { description: "Defines the colors for this theme" }
-    ),
-    typography: z.object(
-      {
-        fontFamily: z.string({ description: "Sets the font-family for this theme" })
-      },
-      { description: "Defines the typography for a given theme" }
-    ).optional(),
-    borderRadius: z.number({ description: "Defines the border-radius for this theme" }).optional()
-  },
-  { description: "An object defining a theme. The property name holding the object becomes the theme name." }
-);
+  error: `Color names cannot include reserved names: ${RESERVED_COLORS.join(", ")}`
+}).describe("An object with one or more color definitions. The property name is used as the color name.");
+var themeSchema = z.object({
+  colors: z.object({
+    main: colorCategorySchema,
+    support: colorCategorySchema.optional().default({}),
+    neutral: colorSchema
+  }).meta({ description: "Defines the colors for this theme" }),
+  typography: z.object({
+    fontFamily: z.string().meta({ description: "Sets the font-family for this theme" })
+  }).describe("Defines the typography for a given theme").optional(),
+  borderRadius: z.number().meta({ description: "Defines the border-radius for this theme" }).optional()
+}).meta({ description: "An object defining a theme. The property name holding the object becomes the theme name." });
 var configFileSchema = z.object({
-  outDir: z.string({ description: "Path to the output directory for the created design tokens" }).optional(),
-  clean: z.boolean({ description: "Delete the output directory before building or creating tokens" }).optional(),
-  themes: z.record(themeSchema, {
+  outDir: z.string().meta({ description: "Path to the output directory for the created design tokens" }).optional(),
+  clean: z.boolean().meta({ description: "Delete the output directory before building or creating tokens" }).optional(),
+  themes: z.record(z.string(), themeSchema).meta({
     description: "An object with one or more themes. Each property defines a theme, and the property name is used as the theme name."
   })
 });
@@ -2224,12 +2215,12 @@ var cssVarRename = (dictionary) => ({
 });
 
 // src/migrations/codemods/css/run.ts
-import fs2 from "node:fs";
+import fs2 from "fs";
 import glob from "fast-glob";
 import postcss from "postcss";
 
 // src/utils.ts
-import fs from "node:fs/promises";
+import fs from "fs/promises";
 import chalk2 from "chalk";
 var mkdir = async (dir, dry) => {
   if (dry) {
@@ -2676,7 +2667,7 @@ var migrations_default = {
 };
 
 // src/tokens/build.ts
-import path2 from "node:path";
+import path2 from "path";
 import chalk6 from "chalk";
 import * as R23 from "ramda";
 
@@ -2687,11 +2678,11 @@ import chalk3 from "chalk";
 // package.json
 var package_default = {
   name: "@digdir/designsystemet",
-  version: "1.0.5",
+  version: "1.0.7",
   description: "CLI for Designsystemet",
   author: "Designsystemet team",
   engines: {
-    node: ">=22.14.0"
+    node: ">=22.16.0"
   },
   repository: {
     type: "git",
@@ -2702,7 +2693,8 @@ var package_default = {
   type: "module",
   main: "./dist/src/index.js",
   files: [
-    "./dist/**"
+    "./dist/**",
+    "./configs/**"
   ],
   bin: "dist/bin/designsystemet.js",
   exports: {
@@ -2721,57 +2713,58 @@ var package_default = {
   },
   scripts: {
     designsystemet: "tsx ./bin/designsystemet.ts",
-    "build:tokens": "yarn designsystemet tokens build -p -t ../../design-tokens -o ../../packages/theme/brand --clean",
-    "build:tokens:debug": "tsx --inspect-brk ./bin/designsystemet.ts tokens build -p -t ../../design-tokens -o ../../packages/theme/brand --clean",
-    build: "tsup && yarn build:types && yarn build:json-schema",
+    "build:tokens": "pnpm run designsystemet tokens build -p -t ../../internal/design-tokens -o ../../packages/theme/brand --clean",
+    "build:tokens:debug": "tsx --inspect-brk ./bin/designsystemet.ts tokens build -p -t ../../internal/design-tokens -o ../../packages/theme/brand --clean",
+    build: "tsup && pnpm build:types && pnpm build:json-schema",
     "build:types": "tsc --emitDeclarationOnly --declaration",
     "build:json-schema": "tsx ./src/scripts/createJsonSchema.ts",
     types: "tsc --noEmit",
-    "test:tokens-create-options": "yarn designsystemet tokens create -m dominant:#007682  -n #003333 -b 99 -o ./test-tokens/options --theme options --clean",
-    "test:tokens-create-config": "yarn designsystemet tokens create --config ./test/test-tokens.config.json",
-    "test:tokens-build": "yarn designsystemet tokens build -t ./test-tokens/options -o ./test-tokens/options-build --clean",
-    "test:tokens-build-config": "yarn designsystemet tokens build -t ./test-tokens/config -o ./test-tokens/config-build --clean",
-    "test:tokens-create-and-build-options": "yarn test:tokens-create-options && yarn test:tokens-build",
-    "test:tokens-create-and-build-config": "yarn test:tokens-create-config && yarn test:tokens-build-config",
-    test: "yarn test:tokens-create-and-build-options && yarn test:tokens-create-and-build-config",
-    "internal:tokens-create": "yarn designsystemet tokens create --config ./internal.config.json",
+    "test:tokens-create-options": 'pnpm run designsystemet tokens create -m dominant:"#007682" -n "#003333" -b 99 -o ./temp/options/design-tokens --theme options --clean',
+    "test:tokens-create-config": "pnpm run designsystemet tokens create --config ./configs/test-tokens.config.json",
+    "test:tokens-build": "pnpm run designsystemet tokens build -t ./temp/options/design-tokens -o ./temp/options/build --clean",
+    "test:tokens-build-config": "pnpm run designsystemet tokens build -t ./temp/config/design-tokens -o ./temp/config/build --clean",
+    "test:tokens-create-and-build-options": "pnpm test:tokens-create-options && pnpm test:tokens-build",
+    "test:tokens-create-and-build-config": "pnpm test:tokens-create-config && pnpm test:tokens-build-config",
+    test: "pnpm test:tokens-create-and-build-options && pnpm test:tokens-create-and-build-config",
+    "digdir:tokens-create": "pnpm run designsystemet tokens create --config ./configs/digdir.config.json",
     "update:template": "tsx ./src/scripts/update-template.ts",
-    "update:design-tokens": "yarn internal:tokens-create && tsx ./src/scripts/update-design-tokens.ts",
-    verify: "yarn test && yarn update:template && yarn update:design-tokens"
+    "update:design-tokens": "pnpm digdir:tokens-create && tsx ./src/scripts/update-design-tokens.ts",
+    verify: "pnpm test && pnpm update:template && pnpm update:design-tokens"
   },
   dependencies: {
     "@commander-js/extra-typings": "^13.1.0",
-    "@tokens-studio/sd-transforms": "1.2.12",
+    "@tokens-studio/sd-transforms": "1.3.0",
     "apca-w3": "^0.1.9",
     chalk: "^5.4.1",
     "change-case": "^5.4.4",
     "chroma-js": "^3.1.2",
+    "colorjs.io": "^0.6.0-alpha.1",
     commander: "^13.1.0",
     "fast-glob": "^3.3.3",
     hsluv: "^1.0.1",
     "object-hash": "^3.0.0",
     postcss: "^8.5.3",
     ramda: "^0.30.1",
-    "style-dictionary": "^4.3.3",
-    zod: "^3.24.2",
-    "zod-validation-error": "^3.4.0"
+    "style-dictionary": "^4.4.0",
+    zod: "^3.25.30",
+    "zod-validation-error": "^3.4.1"
   },
   devDependencies: {
+    "@tokens-studio/types": "0.5.2",
     "@types/apca-w3": "^0.1.3",
     "@types/chroma-js": "^3.1.1",
     "@types/fs-extra": "^11.0.4",
     "@types/glob": "^8.1.0",
     "@types/jscodeshift": "^0.12.0",
-    "@types/node": "^22.14.0",
+    "@types/node": "^22.15.21",
     "@types/object-hash": "^3.0.6",
     "@types/ramda": "^0.30.2",
     "fs-extra": "^11.3.0",
     "ts-toolbelt": "^9.6.0",
     tslib: "^2.8.1",
-    tsup: "^8.4.0",
-    tsx: "^4.19.3",
-    typescript: "^5.8.2",
-    "zod-to-json-schema": "^3.24.5"
+    tsup: "^8.5.0",
+    tsx: "^4.19.4",
+    typescript: "^5.8.3"
   }
 };
 
@@ -2825,9 +2818,6 @@ order may change due to nondeterminism.`.trim()
     return sortIndex;
   });
   const header = `@charset "UTF-8";
-
-@layer ds.theme, ds.base, ds.utilities, ds.components;
-
 /*
 ${fileHeader2}
 */
@@ -2871,20 +2861,24 @@ var mapToLowerCase = R11.map(R11.toLower);
 var hasAnyTruth = R11.any(R11.equals(true));
 var getType = (token) => (token.$type ?? token.type) || "";
 var getValue = (token) => token.$value ?? token.value;
-var typeEquals = R11.curry((types, token) => {
-  if (R11.isNil(token)) {
-    return false;
+var typeEquals = R11.curry(
+  (types, token) => {
+    if (R11.isNil(token)) {
+      return false;
+    }
+    return R11.includes(R11.toLower(getType(token)), R11.map(R11.toLower, Array.isArray(types) ? types : [types]));
   }
-  return R11.includes(R11.toLower(getType(token)), R11.map(R11.toLower, Array.isArray(types) ? types : [types]));
-});
-var pathStartsWithOneOf = R11.curry((paths, token) => {
-  if (R11.isNil(token)) {
-    return false;
+);
+var pathStartsWithOneOf = R11.curry(
+  (paths, token) => {
+    if (R11.isNil(token)) {
+      return false;
+    }
+    const tokenPath = mapToLowerCase(token.path);
+    const matchPathsStartingWith = R11.map((path5) => R11.startsWith([path5], tokenPath), mapToLowerCase(paths));
+    return hasAnyTruth(matchPathsStartingWith);
   }
-  const tokenPath = mapToLowerCase(token.path);
-  const matchPathsStartingWith = R11.map((path5) => R11.startsWith([path5], tokenPath), mapToLowerCase(paths));
-  return hasAnyTruth(matchPathsStartingWith);
-});
+);
 function isSemanticToken(token) {
   return token.filePath.includes("semantic/");
 }
@@ -3440,14 +3434,14 @@ var typographyVariables = ({ theme, typography: typography2 }) => {
   };
 };
 
-// ../../node_modules/@tokens-studio/types/dist/constants/BoxShadowTypes.js
+// ../../node_modules/.pnpm/@tokens-studio+types@0.5.2/node_modules/@tokens-studio/types/dist/constants/BoxShadowTypes.js
 var BoxShadowTypes;
 (function(BoxShadowTypes2) {
   BoxShadowTypes2["DROP_SHADOW"] = "dropShadow";
   BoxShadowTypes2["INNER_SHADOW"] = "innerShadow";
 })(BoxShadowTypes || (BoxShadowTypes = {}));
 
-// ../../node_modules/@tokens-studio/types/dist/constants/ColorModifierTypes.js
+// ../../node_modules/.pnpm/@tokens-studio+types@0.5.2/node_modules/@tokens-studio/types/dist/constants/ColorModifierTypes.js
 var ColorModifierTypes;
 (function(ColorModifierTypes2) {
   ColorModifierTypes2["LIGHTEN"] = "lighten";
@@ -3456,7 +3450,7 @@ var ColorModifierTypes;
   ColorModifierTypes2["ALPHA"] = "alpha";
 })(ColorModifierTypes || (ColorModifierTypes = {}));
 
-// ../../node_modules/@tokens-studio/types/dist/constants/ColorSpaceTypes.js
+// ../../node_modules/.pnpm/@tokens-studio+types@0.5.2/node_modules/@tokens-studio/types/dist/constants/ColorSpaceTypes.js
 var ColorSpaceTypes;
 (function(ColorSpaceTypes2) {
   ColorSpaceTypes2["LCH"] = "lch";
@@ -3465,7 +3459,7 @@ var ColorSpaceTypes;
   ColorSpaceTypes2["HSL"] = "hsl";
 })(ColorSpaceTypes || (ColorSpaceTypes = {}));
 
-// ../../node_modules/@tokens-studio/types/dist/constants/Properties.js
+// ../../node_modules/.pnpm/@tokens-studio+types@0.5.2/node_modules/@tokens-studio/types/dist/constants/Properties.js
 var Properties;
 (function(Properties2) {
   Properties2["sizing"] = "sizing";
@@ -3517,7 +3511,7 @@ var Properties;
   Properties2["description"] = "description";
 })(Properties || (Properties = {}));
 
-// ../../node_modules/@tokens-studio/types/dist/constants/TokenSetStatus.js
+// ../../node_modules/.pnpm/@tokens-studio+types@0.5.2/node_modules/@tokens-studio/types/dist/constants/TokenSetStatus.js
 var TokenSetStatus;
 (function(TokenSetStatus2) {
   TokenSetStatus2["DISABLED"] = "disabled";
@@ -3525,7 +3519,7 @@ var TokenSetStatus;
   TokenSetStatus2["ENABLED"] = "enabled";
 })(TokenSetStatus || (TokenSetStatus = {}));
 
-// ../../node_modules/@tokens-studio/types/dist/constants/TokenTypes.js
+// ../../node_modules/.pnpm/@tokens-studio+types@0.5.2/node_modules/@tokens-studio/types/dist/constants/TokenTypes.js
 var TokenTypes;
 (function(TokenTypes2) {
   TokenTypes2["OTHER"] = "other";
@@ -3556,7 +3550,7 @@ var TokenTypes;
   TokenTypes2["NUMBER"] = "number";
 })(TokenTypes || (TokenTypes = {}));
 
-// ../../node_modules/@tokens-studio/types/dist/constants/BorderValues.js
+// ../../node_modules/.pnpm/@tokens-studio+types@0.5.2/node_modules/@tokens-studio/types/dist/constants/BorderValues.js
 var BorderValues;
 (function(BorderValues2) {
   BorderValues2["BORDER_COLOR"] = "color";
@@ -3564,7 +3558,7 @@ var BorderValues;
   BorderValues2["BORDER_STYLE"] = "style";
 })(BorderValues || (BorderValues = {}));
 
-// ../../node_modules/@tokens-studio/types/dist/constants/StrokeStyleValues.js
+// ../../node_modules/.pnpm/@tokens-studio+types@0.5.2/node_modules/@tokens-studio/types/dist/constants/StrokeStyleValues.js
 var StrokeStyleValues;
 (function(StrokeStyleValues2) {
   StrokeStyleValues2["SOLID"] = "solid";
@@ -3577,7 +3571,7 @@ var StrokeStyleValues;
   StrokeStyleValues2["INSET"] = "inset";
 })(StrokeStyleValues || (StrokeStyleValues = {}));
 
-// ../../node_modules/@tokens-studio/types/dist/constants/BoxShadowValues.js
+// ../../node_modules/.pnpm/@tokens-studio+types@0.5.2/node_modules/@tokens-studio/types/dist/constants/BoxShadowValues.js
 var BoxShadowValues;
 (function(BoxShadowValues2) {
   BoxShadowValues2["TYPE"] = "type";
@@ -3589,7 +3583,7 @@ var BoxShadowValues;
   BoxShadowValues2["BLEND_MODE"] = "blendMode";
 })(BoxShadowValues || (BoxShadowValues = {}));
 
-// ../../node_modules/@tokens-studio/types/dist/constants/TypographyValues.js
+// ../../node_modules/.pnpm/@tokens-studio+types@0.5.2/node_modules/@tokens-studio/types/dist/constants/TypographyValues.js
 var TypographyValues;
 (function(TypographyValues2) {
   TypographyValues2["FONT_FAMILY"] = "fontFamily";
@@ -3978,7 +3972,7 @@ var buildTokens = async (options) => {
   const fileHeader2 = R23.join("")([
     defaultFileHeader,
     $designsystemet ? `
-design-tokens: v${$designsystemet.version} ` : ""
+design-tokens: v${$designsystemet.version}` : ""
   ]);
   await write(createThemeCSSFiles({ processedBuilds, fileHeader: fileHeader2 }), outDir, options.dry);
   console.log(`
@@ -3987,7 +3981,7 @@ design-tokens: v${$designsystemet.version} ` : ""
 };
 
 // src/tokens/create/write.ts
-import path3 from "node:path";
+import path3 from "path";
 import chalk7 from "chalk";
 import * as R24 from "ramda";
 

package/dist/config.schema.json

@@ -1,83 +1,94 @@
 {
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
   "type": "object",
   "properties": {
     "$schema": {
       "type": "string"
     },
     "outDir": {
-      "type": "string",
-      "description": "Path to the output directory for the created design tokens"
+      "description": "Path to the output directory for the created design tokens",
+      "type": "string"
     },
     "clean": {
-      "type": "boolean",
-      "description": "Delete the output directory before building or creating tokens"
+      "description": "Delete the output directory before building or creating tokens",
+      "type": "boolean"
     },
     "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",
-                "additionalProperties": {
-                  "type": "string",
-                  "pattern": "^#[0-9a-fA-F]{3}|#[0-9a-fA-F]{4}|#[0-9a-fA-F]{6}|#[0-9a-fA-F]{8}$",
-                  "description": "A hex color, which is used for creating a color scale. Invalid color names: neutral, success, warning, danger, info, blue, green, orange, purple, red"
-                },
                 "propertyNames": {
+                  "type": "string",
                   "pattern": "^(?!(?:neutral|success|warning|danger|info|blue|green|orange|purple|red)$)"
                 },
-                "description": "One or more color definitions"
+                "additionalProperties": {
+                  "description": "A hex color, which is used for creating a color scale. Invalid color names: neutral, success, warning, danger, info, blue, green, orange, purple, red"
+                }
               },
               "support": {
-                "$ref": "#/properties/themes/additionalProperties/properties/colors/properties/main",
-                "default": {}
+                "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|blue|green|orange|purple|red)$)"
+                },
+                "additionalProperties": {
+                  "description": "A hex color, which is used for creating a color scale. Invalid color names: neutral, success, warning, danger, info, blue, green, orange, purple, red"
+                }
               },
               "neutral": {
-                "$ref": "#/properties/themes/additionalProperties/properties/colors/properties/main/additionalProperties"
+                "description": "A hex color, which is used for creating a color scale. Invalid color names: neutral, success, warning, danger, info, blue, green, orange, purple, red"
               }
             },
             "required": [
               "main",
+              "support",
               "neutral"
             ],
-            "additionalProperties": false,
-            "description": "Defines the colors for this theme"
+            "additionalProperties": false
           },
           "typography": {
+            "description": "Defines the typography for a given theme",
             "type": "object",
             "properties": {
               "fontFamily": {
-                "type": "string",
-                "description": "Sets the font-family for this theme"
+                "description": "Sets the font-family for this theme",
+                "type": "string"
               }
             },
             "required": [
               "fontFamily"
             ],
-            "additionalProperties": false,
-            "description": "Defines the typography for a given theme"
+            "additionalProperties": false
           },
           "borderRadius": {
-            "type": "number",
-            "description": "Defines the border-radius for this theme"
+            "description": "Defines the border-radius for this theme",
+            "type": "number"
           }
         },
         "required": [
           "colors"
         ],
-        "additionalProperties": false,
-        "description": "An object defining a theme. The property name holding the object becomes the theme name."
-      },
-      "description": "An object with one or more themes. Each property defines a theme, and the property name is used as the theme name."
+        "additionalProperties": false
+      }
     }
   },
   "required": [
     "themes"
   ],
-  "additionalProperties": false,
-  "$schema": "http://json-schema.org/draft-07/schema#"
+  "additionalProperties": false
 }