@digdir/designsystemet 1.5.0 → 1.6.0

package/configs/test-tokens.config.json

@@ -20,7 +20,21 @@
       "typography": {
         "fontFamily": "Inter"
       },
-      "borderRadius": 8
+      "borderRadius": 8,
+      "overrides": {
+        "colors": {
+          "dominant": {
+            "background-default": {
+              "light": "#ff0000",
+              "dark": "#000fff"
+            },
+            "background-tinted": {
+              "light": "#f0ff00",
+              "dark": "#ff00ff"
+            }
+          }
+        }
+      }
     },
     "other-org": {
       "colors": {

package/dist/bin/config.js

@@ -254,6 +254,7 @@ var colorMetadata = {
   }
 };
 var colorMetadataByNumber = R.indexBy((metadata) => metadata.number, Object.values(colorMetadata));
+var colorNames = Object.keys(colorMetadata);
 
 // src/colors/theme.ts
 import chroma2 from "chroma-js";
@@ -389,6 +390,15 @@ var colorCategorySchema = z.record(
 ).refine((colors) => !Object.keys(colors).some((key) => RESERVED_COLORS.includes(key.toLowerCase())), {
   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 colorModeOverrideSchema = z.object({
+  light: colorSchema.optional(),
+  dark: colorSchema.optional()
+}).describe('Override values for semantic color tokens like "background-subtle", "border-default", etc.');
+var colorWeightOverrideSchema = z.partialRecord(z.enum(colorNames), colorModeOverrideSchema).describe('The name of the color to add overrides for, e.g. "accent"');
+var semanticColorOverrideSchema = z.record(z.string(), colorWeightOverrideSchema).describe("An object with color names as keys");
+var overridesSchema = z.object({
+  colors: semanticColorOverrideSchema.optional()
+}).describe("Overrides for generated design tokens. Currently only supports colors defined in your theme").optional();
 var themeSchema = z.object({
   colors: z.object({
     main: colorCategorySchema,
@@ -398,7 +408,8 @@ var themeSchema = z.object({
   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()
+  borderRadius: z.number().meta({ description: "Defines the border-radius for this theme" }).optional(),
+  overrides: overridesSchema
 }).meta({ description: "An object defining a theme. The property name holding the object becomes the theme name." });
 var commonConfig = z.object({
   clean: z.boolean().meta({ description: "Delete the output directory before building or creating tokens" }).optional()
@@ -468,8 +479,8 @@ async function parseCreateConfig(configFile, options) {
     console.error(pc3.redBright(`In config, all themes must have the same custom color names, but we found:`));
     const themeNames = R8.keys(configParsed.themes ?? {});
     themeColors.forEach((colors, index) => {
-      const colorNames = Array.from(colors);
-      console.log(`  - ${themeNames[index]}: ${colorNames.join(", ")}`);
+      const colorNames2 = Array.from(colors);
+      console.log(`  - ${themeNames[index]}: ${colorNames2.join(", ")}`);
     });
     console.log();
     process.exit(1);

package/dist/bin/designsystemet.js

@@ -257,6 +257,7 @@ var colorMetadata = {
   }
 };
 var colorMetadataByNumber = R.indexBy((metadata) => metadata.number, Object.values(colorMetadata));
+var colorNames = Object.keys(colorMetadata);
 
 // src/colors/theme.ts
 import chroma2 from "chroma-js";
@@ -378,7 +379,7 @@ var cssClassRename = (dictionary) => ({
 var cssVarRename = (dictionary) => ({
   postcssPlugin: `Replaces CSS variables ${hash(dictionary)}`,
   Declaration(decl) {
-    const { value, prop: prop5 } = decl;
+    const { value, prop: prop4 } = decl;
     const deleted = /* @__PURE__ */ new Set();
     for (const [from, to] of Object.entries(dictionary)) {
       if (R3.isNotEmpty(to)) {
@@ -389,8 +390,8 @@ var cssVarRename = (dictionary) => ({
           decl.value = value.replace(from, to);
           continue;
         }
-        if (R3.includes(from, prop5) && decl.variable) {
-          decl.prop = prop5.replace(from, to);
+        if (R3.includes(from, prop4) && decl.variable) {
+          decl.prop = prop4.replace(from, to);
         }
       }
     }
@@ -870,11 +871,11 @@ import pc5 from "picocolors";
 // package.json
 var package_default = {
   name: "@digdir/designsystemet",
-  version: "1.5.0",
+  version: "1.6.0",
   description: "CLI for Designsystemet",
   author: "Designsystemet team",
   engines: {
-    node: ">=22.19.0"
+    node: ">=20 <25"
   },
   repository: {
     type: "git",
@@ -922,7 +923,7 @@ var package_default = {
     "test:tokens-build-config-tailwind": "pnpm run designsystemet tokens build -t ./temp/config/design-tokens -o ./temp/config/build --clean --experimental-tailwind",
     "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",
+    test: "node -v && pnpm test:tokens-create-and-build-options && pnpm test:tokens-create-and-build-config",
     "digdir:tokens-build": "pnpm run designsystemet tokens build -t ../../internal/design-tokens -o ../../packages/theme/brand --clean --experimental-tailwind",
     "digdir:tokens-create": "pnpm run designsystemet tokens create --config ./configs/digdir.config.json",
     "update:template": "tsx ./src/scripts/update-template.ts",
@@ -937,7 +938,7 @@ var package_default = {
     "change-case": "^5.4.4",
     "chroma-js": "^3.1.2",
     "colorjs.io": "^0.6.0-alpha.1",
-    commander: "^14.0.0",
+    commander: "^14.0.1",
     "fast-glob": "^3.3.3",
     hsluv: "^1.0.1",
     "object-hash": "^3.0.0",
@@ -945,18 +946,18 @@ var package_default = {
     postcss: "^8.5.6",
     ramda: "^0.31.3",
     "style-dictionary": "^5.0.4",
-    zod: "^4.1.5",
-    "zod-validation-error": "^4.0.1"
+    zod: "^4.1.11",
+    "zod-validation-error": "^4.0.2"
   },
   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/node": "^22.18.1",
+    "@types/node": "^22.18.6",
     "@types/object-hash": "^3.0.6",
-    "@types/ramda": "^0.31.0",
-    "fs-extra": "^11.3.1",
+    "@types/ramda": "^0.31.1",
+    "fs-extra": "^11.3.2",
     tslib: "^2.8.1",
     tsup: "^8.5.0",
     tsx: "^4.20.5",
@@ -1027,11 +1028,11 @@ function isColorCategoryToken(token, category) {
 var isDigit = (s) => /^\d+$/.test(s);
 function traverseObj(obj, fn) {
   for (const key in obj) {
-    const prop5 = obj[key];
-    if (prop5 != null) {
-      fn.apply(null, [obj, key, prop5]);
-      if (typeof prop5 === "object") {
-        traverseObj(prop5, fn);
+    const prop4 = obj[key];
+    if (prop4 != null) {
+      fn.apply(null, [obj, key, prop4]);
+      if (typeof prop4 === "object") {
+        traverseObj(prop4, fn);
       }
     }
   }
@@ -1470,13 +1471,33 @@ ${content}
 // src/tokens/process/formats/css/type-scale.ts
 import * as R12 from "ramda";
 import { createPropertyFormatter as createPropertyFormatter6 } from "style-dictionary/utils";
-var typographyFontFamilyPredicate2 = R12.allPass([
+var isTypographyFontFamilyToken = R12.allPass([
   R12.pathSatisfies(R12.includes("typography"), ["path"]),
   R12.pathSatisfies(R12.includes("fontFamily"), ["path"])
 ]);
-function formatTypographySizeToken(token) {
-  return { ...token, $value: `calc(${token.$value} * var(--_ds-font-size-factor))` };
-}
+var formatTypographySizeToken = (format, token) => {
+  const [name, value] = format(token).replace(/;$/, "").split(": ");
+  let calc;
+  let round;
+  if (R12.startsWith(["font-size"], token.path)) {
+    calc = `calc(${value} * var(--_ds-font-size-factor))`;
+    round = `round(${calc}, 1px)`;
+  } else {
+    calc = value;
+  }
+  return { name, calc, round: round ?? calc };
+};
+var formatTypographySizeTokens = (format, tokens) => R12.reduce(
+  (acc, token) => {
+    const { name, calc, round } = formatTypographySizeToken(format, token);
+    acc.tokens.push(token);
+    acc.calc.push(`${name}: ${calc};`);
+    acc.round.push(`${name}: ${round};`);
+    return acc;
+  },
+  { tokens: [], calc: [], round: [] },
+  tokens
+);
 var typeScale = {
   name: "ds/css-type-scale",
   format: async ({ dictionary, file, options, platform }) => {
@@ -1489,18 +1510,16 @@ var typeScale = {
       format: "css",
       usesDtcg
     });
-    const filteredTokens = R12.reject(typographyFontFamilyPredicate2, dictionary.allTokens);
-    const tokens = R12.map(formatTypographySizeToken, filteredTokens);
-    const formattedMap = tokens.map((token) => ({
-      token,
-      formatted: format(token)
+    const filteredTokens = R12.reject(R12.anyPass([isTypographyFontFamilyToken]), dictionary.allTokens);
+    const formattedTokens = formatTypographySizeTokens(format, filteredTokens);
+    const formattedMap = formattedTokens.round.map((t, i) => ({
+      token: formattedTokens.tokens[i],
+      formatted: t
     }));
     buildOptions.buildTokenFormats[destination] = formattedMap;
-    const formattedTokens = formattedMap.map(R12.prop("formatted")).join("\n");
     const sizeFactor = `  --_ds-font-size-factor: calc(var(--ds-size-mode-font-size) / (var(--ds-size-base) / ${basePxFontSize}));`;
     const content = `${selector} {
-${sizeFactor}
-${formattedTokens}
+${sizeFactor}${sizingTemplate(formattedTokens)}
 }`;
     const body = R12.isNotNil(layer) ? `@layer ${layer} {
 ${content}
@@ -1713,7 +1732,7 @@ var sizeModeVariables = ({ theme, size: size2 }) => {
 };
 
 // src/tokens/process/configs/type-scale.ts
-var typeScaleVariables = ({ theme, size: size2 }) => {
+var typeScaleVariables = ({ theme }) => {
   const selector = ":root, [data-size]";
   const layer = `ds.theme.type-scale`;
   return {
@@ -3805,18 +3824,51 @@ var getDefaultToken = (tokenPath) => {
 
 // src/tokens/create/generators/color.ts
 import * as R24 from "ramda";
-var generateColor = (colorArray) => {
+var generateColor = (colorArray, overrides) => {
   const obj = {};
   const $type = "color";
   for (const index in colorArray) {
-    obj[Number(index) + 1] = { $type, $value: colorArray[index].hex };
+    const position = Number(index) + 1;
+    const overrideValue = overrides?.[position];
+    obj[position] = {
+      $type,
+      $value: overrideValue || colorArray[index].hex
+    };
   }
   return obj;
 };
-var generateColorScheme = (themeName, colorScheme2, colors2) => {
-  const main = R24.map((color) => generateColor(generateColorScale(color, colorScheme2)), colors2.main);
-  const support = R24.map((color) => generateColor(generateColorScale(color, colorScheme2)), colors2.support);
-  const neutral = generateColor(generateColorScale(colors2.neutral, colorScheme2));
+var generateColorScheme = (themeName, colorScheme2, colors2, overrides) => {
+  const createColorOverrides = (colorName) => {
+    if (!overrides?.colors || !(colorName in overrides.colors)) {
+      return void 0;
+    }
+    const colorOverrides = overrides.colors[colorName];
+    const positionOverrides = {};
+    Object.entries(colorOverrides).forEach(([semanticTokenName, modeOverrides]) => {
+      const position = colorMetadata[semanticTokenName].number;
+      if (position) {
+        let overrideValue;
+        if (colorScheme2 === "light" && modeOverrides.light) {
+          overrideValue = modeOverrides.light;
+        } else if (colorScheme2 === "dark" && modeOverrides.dark) {
+          overrideValue = modeOverrides.dark;
+        }
+        if (overrideValue) {
+          positionOverrides[position] = overrideValue;
+        }
+      }
+    });
+    return Object.keys(positionOverrides).length > 0 ? positionOverrides : void 0;
+  };
+  const main = R24.mapObjIndexed(
+    (color, colorName) => generateColor(generateColorScale(color, colorScheme2), createColorOverrides(colorName)),
+    colors2.main
+  );
+  const support = R24.mapObjIndexed(
+    (color, colorName) => generateColor(generateColorScale(color, colorScheme2), createColorOverrides(colorName)),
+    colors2.support
+  );
+  const neutral = generateColor(generateColorScale(colors2.neutral, colorScheme2), createColorOverrides("neutral"));
   return {
     [themeName]: {
       ...main,
@@ -4281,8 +4333,8 @@ var generateSemantic = (colors2) => {
     ["main-color", mainColorNames],
     ["support-color", supportColorNames]
   ];
-  for (const [colorCategory2, colorNames] of categories) {
-    for (const colorName of colorNames) {
+  for (const [colorCategory2, colorNames2] of categories) {
+    for (const colorName of colorNames2) {
       const category = colorCategory2.replace("-color", "");
       const customColorTokens = {
         color: {
@@ -4538,7 +4590,7 @@ var cliOptions = {
   }
 };
 var createTokens = async (opts) => {
-  const { colors: colors2, typography: typography2, name, borderRadius } = opts;
+  const { colors: colors2, typography: typography2, name, borderRadius, overrides } = opts;
   const colorSchemes = ["light", "dark"];
   const semantic2 = generateSemantic(colors2);
   const tokenSets = new Map([
@@ -4556,7 +4608,7 @@ var createTokens = async (opts) => {
     [`primitives/modes/typography/secondary/${name}`, generateTypography(name, typography2)],
     ...colorSchemes.flatMap((scheme) => [
       [`primitives/modes/color-scheme/${scheme}/global`, generateColorGlobal(scheme)],
-      [`primitives/modes/color-scheme/${scheme}/${name}`, generateColorScheme(name, scheme, colors2)]
+      [`primitives/modes/color-scheme/${scheme}/${name}`, generateColorScheme(name, scheme, colors2, overrides)]
     ]),
     [`themes/${name}`, generateTheme(colors2, name, borderRadius)],
     ["semantic/color", semantic2.color],
@@ -4650,6 +4702,15 @@ var colorCategorySchema = z.record(
 ).refine((colors2) => !Object.keys(colors2).some((key) => RESERVED_COLORS.includes(key.toLowerCase())), {
   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 colorModeOverrideSchema = z.object({
+  light: colorSchema.optional(),
+  dark: colorSchema.optional()
+}).describe('Override values for semantic color tokens like "background-subtle", "border-default", etc.');
+var colorWeightOverrideSchema = z.partialRecord(z.enum(colorNames), colorModeOverrideSchema).describe('The name of the color to add overrides for, e.g. "accent"');
+var semanticColorOverrideSchema = z.record(z.string(), colorWeightOverrideSchema).describe("An object with color names as keys");
+var overridesSchema = z.object({
+  colors: semanticColorOverrideSchema.optional()
+}).describe("Overrides for generated design tokens. Currently only supports colors defined in your theme").optional();
 var themeSchema = z.object({
   colors: z.object({
     main: colorCategorySchema,
@@ -4659,7 +4720,8 @@ var themeSchema = z.object({
   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()
+  borderRadius: z.number().meta({ description: "Defines the border-radius for this theme" }).optional(),
+  overrides: overridesSchema
 }).meta({ description: "An object defining a theme. The property name holding the object becomes the theme name." });
 var commonConfig = z.object({
   clean: z.boolean().meta({ description: "Delete the output directory before building or creating tokens" }).optional()
@@ -4711,8 +4773,8 @@ async function parseCreateConfig(configFile, options) {
     console.error(pc10.redBright(`In config, all themes must have the same custom color names, but we found:`));
     const themeNames = R28.keys(configParsed.themes ?? {});
     themeColors.forEach((colors2, index) => {
-      const colorNames = Array.from(colors2);
-      console.log(`  - ${themeNames[index]}: ${colorNames.join(", ")}`);
+      const colorNames2 = Array.from(colors2);
+      console.log(`  - ${themeNames[index]}: ${colorNames2.join(", ")}`);
     });
     console.log();
     process.exit(1);

package/dist/config.schema.json

@@ -74,6 +74,58 @@
           "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, blue, green, orange, purple, red"
+                      },
+                      "dark": {
+                        "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"
+                      }
+                    },
+                    "additionalProperties": false
+                  }
+                }
+              }
+            },
+            "additionalProperties": false
           }
         },
         "required": [

package/dist/src/colors/colorMetadata.d.ts

@@ -50,4 +50,5 @@ export declare const getColorMetadataByNumber: (number: ColorNumber) => ({
     name: "base-contrast-default";
     number: 16;
 } & import("./types.js").ColorMetadata);
+export declare const colorNames: Array<keyof typeof colorMetadata>;
 //# sourceMappingURL=colorMetadata.d.ts.map

package/dist/src/colors/colorMetadata.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"colorMetadata.d.ts","sourceRoot":"","sources":["../../../src/colors/colorMetadata.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,mBAAmB,EAAE,WAAW,EAAE,QAAQ,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAE3F,eAAO,MAAM,UAAU,EAAE,MAAM,CAAC,YAAY,EAAE,QAAQ,CAMrD,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,mBAiP3B,CAAC;AAIF,eAAO,MAAM,wBAAwB,GAAI,QAAQ,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;uCAE3D,CAAC"}
+{"version":3,"file":"colorMetadata.d.ts","sourceRoot":"","sources":["../../../src/colors/colorMetadata.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,mBAAmB,EAAE,WAAW,EAAE,QAAQ,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAE3F,eAAO,MAAM,UAAU,EAAE,MAAM,CAAC,YAAY,EAAE,QAAQ,CAMrD,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,mBAiP3B,CAAC;AAIF,eAAO,MAAM,wBAAwB,GAAI,QAAQ,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;uCAE3D,CAAC;AAEF,eAAO,MAAM,UAAU,EAAiC,KAAK,CAAC,MAAM,OAAO,aAAa,CAAC,CAAC"}

package/dist/src/colors/colorMetadata.js

@@ -253,8 +253,10 @@ var colorMetadataByNumber = R.indexBy((metadata) => metadata.number, Object.valu
 var getColorMetadataByNumber = (number) => {
   return colorMetadataByNumber[number];
 };
+var colorNames = Object.keys(colorMetadata);
 export {
   baseColors,
   colorMetadata,
+  colorNames,
   getColorMetadataByNumber
 };

package/dist/src/colors/index.js

@@ -253,6 +253,7 @@ var colorMetadataByNumber = R.indexBy((metadata) => metadata.number, Object.valu
 var getColorMetadataByNumber = (number) => {
   return colorMetadataByNumber[number];
 };
+var colorNames = Object.keys(colorMetadata);
 
 // src/colors/theme.ts
 import chroma2 from "chroma-js";
@@ -480,6 +481,7 @@ export {
   baseColors,
   canTextBeUsedOnColors,
   colorMetadata,
+  colorNames,
   convertColor,
   convertToHex,
   generateColorContrast,

package/dist/src/colors/theme.js

@@ -250,6 +250,7 @@ var colorMetadataByNumber = R.indexBy((metadata) => metadata.number, Object.valu
 var getColorMetadataByNumber = (number) => {
   return colorMetadataByNumber[number];
 };
+var colorNames = Object.keys(colorMetadata);
 
 // src/colors/utils.ts
 import chroma from "chroma-js";

package/dist/src/config.d.ts

@@ -11,6 +11,29 @@ import { z } from 'zod';
 export declare function validateConfig<T>(schema: z.ZodType<T>, unvalidatedConfig: Record<string, unknown>, configPath: string): T;
 export declare function parseConfig<T>(configFile: string, configPath: string): T;
 export declare const colorRegex: RegExp;
+declare const overridesSchema: z.ZodOptional<z.ZodObject<{
+    colors: z.ZodOptional<z.ZodRecord<z.ZodString, z.ZodRecord<z.ZodEnum<{
+        "background-default": "background-default";
+        "background-tinted": "background-tinted";
+        "surface-default": "surface-default";
+        "surface-tinted": "surface-tinted";
+        "surface-hover": "surface-hover";
+        "surface-active": "surface-active";
+        "border-subtle": "border-subtle";
+        "border-default": "border-default";
+        "border-strong": "border-strong";
+        "text-subtle": "text-subtle";
+        "text-default": "text-default";
+        "base-default": "base-default";
+        "base-hover": "base-hover";
+        "base-active": "base-active";
+        "base-contrast-subtle": "base-contrast-subtle";
+        "base-contrast-default": "base-contrast-default";
+    }> & z.core.$partial, z.ZodObject<{
+        light: z.ZodOptional<z.ZodPipe<z.ZodString, z.ZodTransform<`#${string}`, string>>>;
+        dark: z.ZodOptional<z.ZodPipe<z.ZodString, z.ZodTransform<`#${string}`, string>>>;
+    }, z.core.$strip>>>>;
+}, z.core.$strip>>;
 declare const themeSchema: z.ZodObject<{
     colors: z.ZodObject<{
         main: z.ZodRecord<z.ZodString, z.ZodPipe<z.ZodString, z.ZodTransform<`#${string}`, string>>>;
@@ -21,6 +44,29 @@ declare const themeSchema: z.ZodObject<{
         fontFamily: z.ZodString;
     }, z.core.$strip>>;
     borderRadius: z.ZodOptional<z.ZodNumber>;
+    overrides: z.ZodOptional<z.ZodObject<{
+        colors: z.ZodOptional<z.ZodRecord<z.ZodString, z.ZodRecord<z.ZodEnum<{
+            "background-default": "background-default";
+            "background-tinted": "background-tinted";
+            "surface-default": "surface-default";
+            "surface-tinted": "surface-tinted";
+            "surface-hover": "surface-hover";
+            "surface-active": "surface-active";
+            "border-subtle": "border-subtle";
+            "border-default": "border-default";
+            "border-strong": "border-strong";
+            "text-subtle": "text-subtle";
+            "text-default": "text-default";
+            "base-default": "base-default";
+            "base-hover": "base-hover";
+            "base-active": "base-active";
+            "base-contrast-subtle": "base-contrast-subtle";
+            "base-contrast-default": "base-contrast-default";
+        }> & z.core.$partial, z.ZodObject<{
+            light: z.ZodOptional<z.ZodPipe<z.ZodString, z.ZodTransform<`#${string}`, string>>>;
+            dark: z.ZodOptional<z.ZodPipe<z.ZodString, z.ZodTransform<`#${string}`, string>>>;
+        }, z.core.$strip>>>>;
+    }, z.core.$strip>>;
 }, z.core.$strip>;
 export declare const commonConfig: z.ZodObject<{
     clean: z.ZodOptional<z.ZodBoolean>;
@@ -40,6 +86,29 @@ export declare const configFileCreateSchema: z.ZodObject<{
             fontFamily: z.ZodString;
         }, z.core.$strip>>;
         borderRadius: z.ZodOptional<z.ZodNumber>;
+        overrides: z.ZodOptional<z.ZodObject<{
+            colors: z.ZodOptional<z.ZodRecord<z.ZodString, z.ZodRecord<z.ZodEnum<{
+                "background-default": "background-default";
+                "background-tinted": "background-tinted";
+                "surface-default": "surface-default";
+                "surface-tinted": "surface-tinted";
+                "surface-hover": "surface-hover";
+                "surface-active": "surface-active";
+                "border-subtle": "border-subtle";
+                "border-default": "border-default";
+                "border-strong": "border-strong";
+                "text-subtle": "text-subtle";
+                "text-default": "text-default";
+                "base-default": "base-default";
+                "base-hover": "base-hover";
+                "base-active": "base-active";
+                "base-contrast-subtle": "base-contrast-subtle";
+                "base-contrast-default": "base-contrast-default";
+            }> & z.core.$partial, z.ZodObject<{
+                light: z.ZodOptional<z.ZodPipe<z.ZodString, z.ZodTransform<`#${string}`, string>>>;
+                dark: z.ZodOptional<z.ZodPipe<z.ZodString, z.ZodTransform<`#${string}`, string>>>;
+            }, z.core.$strip>>>>;
+        }, z.core.$strip>>;
     }, z.core.$strip>>>;
     clean: z.ZodOptional<z.ZodBoolean>;
 }, z.core.$strip>;
@@ -47,5 +116,6 @@ export type CommonConfigSchema = z.infer<typeof commonConfig>;
 export type BuildConfigSchema = z.infer<typeof commonConfig>;
 export type CreateConfigSchema = z.infer<typeof configFileCreateSchema>;
 export type ConfigSchemaTheme = z.infer<typeof themeSchema>;
+export type ColorOverrideSchema = z.infer<typeof overridesSchema>;
 export {};
 //# sourceMappingURL=config.d.ts.map

package/dist/src/config.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"config.d.ts","sourceRoot":"","sources":["../../src/config.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC;AAsCxB;;;;;;;;GAQG;AACH,wBAAgB,cAAc,CAAC,CAAC,EAC9B,MAAM,EAAE,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,EACpB,iBAAiB,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAC1C,UAAU,EAAE,MAAM,GACjB,CAAC,CAUH;AAED,wBAAgB,WAAW,CAAC,CAAC,EAAE,UAAU,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,GAAG,CAAC,CAexE;AAWD,eAAO,MAAM,UAAU,QAA2C,CAAC;AAyBnE,QAAA,MAAM,WAAW;;;;;;;;;;iBAiBmG,CAAC;AAErH,eAAO,MAAM,YAAY;;iBAEvB,CAAC;AAYH;;GAEG;AACH,eAAO,MAAM,sBAAsB;;;;;;;;;;;;;;iBAAqD,CAAC;AACzF,MAAM,MAAM,kBAAkB,GAAG,CAAC,CAAC,KAAK,CAAC,OAAO,YAAY,CAAC,CAAC;AAC9D,MAAM,MAAM,iBAAiB,GAAG,CAAC,CAAC,KAAK,CAAC,OAAO,YAAY,CAAC,CAAC;AAC7D,MAAM,MAAM,kBAAkB,GAAG,CAAC,CAAC,KAAK,CAAC,OAAO,sBAAsB,CAAC,CAAC;AACxE,MAAM,MAAM,iBAAiB,GAAG,CAAC,CAAC,KAAK,CAAC,OAAO,WAAW,CAAC,CAAC"}
+{"version":3,"file":"config.d.ts","sourceRoot":"","sources":["../../src/config.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC;AAuCxB;;;;;;;;GAQG;AACH,wBAAgB,cAAc,CAAC,CAAC,EAC9B,MAAM,EAAE,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,EACpB,iBAAiB,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAC1C,UAAU,EAAE,MAAM,GACjB,CAAC,CAUH;AAED,wBAAgB,WAAW,CAAC,CAAC,EAAE,UAAU,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,GAAG,CAAC,CAexE;AAWD,eAAO,MAAM,UAAU,QAA2C,CAAC;AAwCnE,QAAA,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;kBAKR,CAAC;AAEd,QAAA,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAkBmG,CAAC;AAErH,eAAO,MAAM,YAAY;;iBAEvB,CAAC;AAYH;;GAEG;AACH,eAAO,MAAM,sBAAsB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAAqD,CAAC;AACzF,MAAM,MAAM,kBAAkB,GAAG,CAAC,CAAC,KAAK,CAAC,OAAO,YAAY,CAAC,CAAC;AAC9D,MAAM,MAAM,iBAAiB,GAAG,CAAC,CAAC,KAAK,CAAC,OAAO,YAAY,CAAC,CAAC;AAC7D,MAAM,MAAM,kBAAkB,GAAG,CAAC,CAAC,KAAK,CAAC,OAAO,sBAAsB,CAAC,CAAC;AACxE,MAAM,MAAM,iBAAiB,GAAG,CAAC,CAAC,KAAK,CAAC,OAAO,WAAW,CAAC,CAAC;AAC5D,MAAM,MAAM,mBAAmB,GAAG,CAAC,CAAC,KAAK,CAAC,OAAO,eAAe,CAAC,CAAC"}

package/dist/src/config.js

@@ -249,6 +249,7 @@ var colorMetadata = {
   }
 };
 var colorMetadataByNumber = R.indexBy((metadata) => metadata.number, Object.values(colorMetadata));
+var colorNames = Object.keys(colorMetadata);
 
 // src/colors/theme.ts
 import chroma2 from "chroma-js";
@@ -384,6 +385,15 @@ var colorCategorySchema = z.record(
 ).refine((colors) => !Object.keys(colors).some((key) => RESERVED_COLORS.includes(key.toLowerCase())), {
   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 colorModeOverrideSchema = z.object({
+  light: colorSchema.optional(),
+  dark: colorSchema.optional()
+}).describe('Override values for semantic color tokens like "background-subtle", "border-default", etc.');
+var colorWeightOverrideSchema = z.partialRecord(z.enum(colorNames), colorModeOverrideSchema).describe('The name of the color to add overrides for, e.g. "accent"');
+var semanticColorOverrideSchema = z.record(z.string(), colorWeightOverrideSchema).describe("An object with color names as keys");
+var overridesSchema = z.object({
+  colors: semanticColorOverrideSchema.optional()
+}).describe("Overrides for generated design tokens. Currently only supports colors defined in your theme").optional();
 var themeSchema = z.object({
   colors: z.object({
     main: colorCategorySchema,
@@ -393,7 +403,8 @@ var themeSchema = z.object({
   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()
+  borderRadius: z.number().meta({ description: "Defines the border-radius for this theme" }).optional(),
+  overrides: overridesSchema
 }).meta({ description: "An object defining a theme. The property name holding the object becomes the theme name." });
 var commonConfig = z.object({
   clean: z.boolean().meta({ description: "Delete the output directory before building or creating tokens" }).optional()