@digdir/designsystemet 1.6.1 → 1.7.0

package/dist/src/index.js

@@ -1,12 +1,12 @@
 // src/colors/colorMetadata.ts
 import * as R from "ramda";
 var baseColors = {
-  blue: "#0A71C0",
-  green: "#068718",
-  orange: "#EA9B1B",
-  purple: "#663299",
-  red: "#C01B1B"
+  info: "#0A71C0",
+  success: "#068718",
+  warning: "#EA9B1B",
+  danger: "#C01B1B"
 };
+var dsLinkColor = "#663299";
 var colorMetadata = {
   "background-default": {
     number: 1,
@@ -254,6 +254,7 @@ var getColorMetadataByNumber = (number) => {
   return colorMetadataByNumber[number];
 };
 var colorNames = Object.keys(colorMetadata);
+var baseColorNames = Object.keys(baseColors);
 
 // src/colors/theme.ts
 import chroma2 from "chroma-js";
@@ -399,18 +400,7 @@ var convertColor = (cssColor, format) => {
 };
 
 // src/colors/theme.ts
-var RESERVED_COLORS = [
-  "neutral",
-  "success",
-  "warning",
-  "danger",
-  "info",
-  "blue",
-  "green",
-  "orange",
-  "purple",
-  "red"
-];
+var RESERVED_COLORS = ["neutral", "success", "warning", "danger", "info"];
 var generateColorScale = (color, colorScheme2) => {
   let interpolationColor = color;
   if (colorScheme2 === "dark") {
@@ -475,6 +465,12 @@ var getCssVariable = (colorType, colorNumber) => {
   return `--ds-color-${colorType}-${getColorMetadataByNumber(colorNumber).displayName.toLowerCase().replace(/\s/g, "-")}`;
 };
 
+// src/config.ts
+import pc from "picocolors";
+import * as R7 from "ramda";
+import { z } from "zod";
+import { fromError } from "zod-validation-error";
+
 // src/tokens/create/defaults.ts
 import * as R3 from "ramda";
 
@@ -1517,27 +1513,24 @@ var generateColorScheme = (themeName, colorScheme2, colors, overrides) => {
     colors.support
   );
   const neutral = generateColor(generateColorScale(colors.neutral, colorScheme2), createColorOverrides("neutral"));
+  const baseColorsWithOverrides = {
+    ...baseColors,
+    ...overrides?.severity
+  };
+  const globalColors = R4.mapObjIndexed(
+    (color, colorName) => generateColor(generateColorScale(color, colorScheme2), createColorOverrides(colorName)),
+    baseColorsWithOverrides
+  );
+  const linkColor = generateColor(generateColorScale(dsLinkColor, colorScheme2));
   return {
     [themeName]: {
       ...main,
       ...support,
-      neutral
-    }
-  };
-};
-var generateColorGlobal = (colorScheme2) => {
-  const blueScale = generateColorScale(baseColors.blue, colorScheme2);
-  const greenScale = generateColorScale(baseColors.green, colorScheme2);
-  const orangeScale = generateColorScale(baseColors.orange, colorScheme2);
-  const purpleScale = generateColorScale(baseColors.purple, colorScheme2);
-  const redScale = generateColorScale(baseColors.red, colorScheme2);
-  return {
-    global: {
-      blue: generateColor(blueScale),
-      green: generateColor(greenScale),
-      orange: generateColor(orangeScale),
-      purple: generateColor(purpleScale),
-      red: generateColor(redScale)
+      neutral,
+      ...globalColors,
+      link: {
+        visited: linkColor[12]
+      }
     }
   };
 };
@@ -1548,270 +1541,6 @@ import * as R5 from "ramda";
 // src/tokens/template/design-tokens/semantic/color.base.template.json with { type: 'json' }
 var color_base_template_default = {
   color: {
-    success: {
-      "background-default": {
-        $type: "color",
-        $value: "{global.green.1}"
-      },
-      "background-tinted": {
-        $type: "color",
-        $value: "{global.green.2}"
-      },
-      "surface-default": {
-        $type: "color",
-        $value: "{global.green.3}"
-      },
-      "surface-tinted": {
-        $type: "color",
-        $value: "{global.green.4}"
-      },
-      "surface-hover": {
-        $type: "color",
-        $value: "{global.green.5}"
-      },
-      "surface-active": {
-        $type: "color",
-        $value: "{global.green.6}"
-      },
-      "border-subtle": {
-        $type: "color",
-        $value: "{global.green.7}"
-      },
-      "border-default": {
-        $type: "color",
-        $value: "{global.green.8}"
-      },
-      "border-strong": {
-        $type: "color",
-        $value: "{global.green.9}"
-      },
-      "text-subtle": {
-        $type: "color",
-        $value: "{global.green.10}"
-      },
-      "text-default": {
-        $type: "color",
-        $value: "{global.green.11}"
-      },
-      "base-default": {
-        $type: "color",
-        $value: "{global.green.12}"
-      },
-      "base-hover": {
-        $type: "color",
-        $value: "{global.green.13}"
-      },
-      "base-active": {
-        $type: "color",
-        $value: "{global.green.14}"
-      },
-      "base-contrast-subtle": {
-        $type: "color",
-        $value: "{global.green.15}"
-      },
-      "base-contrast-default": {
-        $type: "color",
-        $value: "{global.green.16}"
-      }
-    },
-    danger: {
-      "background-default": {
-        $type: "color",
-        $value: "{global.red.1}"
-      },
-      "background-tinted": {
-        $type: "color",
-        $value: "{global.red.2}"
-      },
-      "surface-default": {
-        $type: "color",
-        $value: "{global.red.3}"
-      },
-      "surface-tinted": {
-        $type: "color",
-        $value: "{global.red.4}"
-      },
-      "surface-hover": {
-        $type: "color",
-        $value: "{global.red.5}"
-      },
-      "surface-active": {
-        $type: "color",
-        $value: "{global.red.6}"
-      },
-      "border-subtle": {
-        $type: "color",
-        $value: "{global.red.7}"
-      },
-      "border-default": {
-        $type: "color",
-        $value: "{global.red.8}"
-      },
-      "border-strong": {
-        $type: "color",
-        $value: "{global.red.9}"
-      },
-      "text-subtle": {
-        $type: "color",
-        $value: "{global.red.10}"
-      },
-      "text-default": {
-        $type: "color",
-        $value: "{global.red.11}"
-      },
-      "base-default": {
-        $type: "color",
-        $value: "{global.red.12}"
-      },
-      "base-hover": {
-        $type: "color",
-        $value: "{global.red.13}"
-      },
-      "base-active": {
-        $type: "color",
-        $value: "{global.red.14}"
-      },
-      "base-contrast-subtle": {
-        $type: "color",
-        $value: "{global.red.15}"
-      },
-      "base-contrast-default": {
-        $type: "color",
-        $value: "{global.red.16}"
-      }
-    },
-    info: {
-      "background-default": {
-        $type: "color",
-        $value: "{global.blue.1}"
-      },
-      "background-tinted": {
-        $type: "color",
-        $value: "{global.blue.2}"
-      },
-      "surface-default": {
-        $type: "color",
-        $value: "{global.blue.3}"
-      },
-      "surface-tinted": {
-        $type: "color",
-        $value: "{global.blue.4}"
-      },
-      "surface-hover": {
-        $type: "color",
-        $value: "{global.blue.5}"
-      },
-      "surface-active": {
-        $type: "color",
-        $value: "{global.blue.6}"
-      },
-      "border-subtle": {
-        $type: "color",
-        $value: "{global.blue.7}"
-      },
-      "border-default": {
-        $type: "color",
-        $value: "{global.blue.8}"
-      },
-      "border-strong": {
-        $type: "color",
-        $value: "{global.blue.9}"
-      },
-      "text-subtle": {
-        $type: "color",
-        $value: "{global.blue.10}"
-      },
-      "text-default": {
-        $type: "color",
-        $value: "{global.blue.11}"
-      },
-      "base-default": {
-        $type: "color",
-        $value: "{global.blue.12}"
-      },
-      "base-hover": {
-        $type: "color",
-        $value: "{global.blue.13}"
-      },
-      "base-active": {
-        $type: "color",
-        $value: "{global.blue.14}"
-      },
-      "base-contrast-subtle": {
-        $type: "color",
-        $value: "{global.blue.15}"
-      },
-      "base-contrast-default": {
-        $type: "color",
-        $value: "{global.blue.16}"
-      }
-    },
-    warning: {
-      "background-default": {
-        $type: "color",
-        $value: "{global.orange.1}"
-      },
-      "background-tinted": {
-        $type: "color",
-        $value: "{global.orange.2}"
-      },
-      "surface-default": {
-        $type: "color",
-        $value: "{global.orange.3}"
-      },
-      "surface-tinted": {
-        $type: "color",
-        $value: "{global.orange.4}"
-      },
-      "surface-hover": {
-        $type: "color",
-        $value: "{global.orange.5}"
-      },
-      "surface-active": {
-        $type: "color",
-        $value: "{global.orange.6}"
-      },
-      "border-subtle": {
-        $type: "color",
-        $value: "{global.orange.7}"
-      },
-      "border-default": {
-        $type: "color",
-        $value: "{global.orange.8}"
-      },
-      "border-strong": {
-        $type: "color",
-        $value: "{global.orange.9}"
-      },
-      "text-subtle": {
-        $type: "color",
-        $value: "{global.orange.10}"
-      },
-      "text-default": {
-        $type: "color",
-        $value: "{global.orange.11}"
-      },
-      "base-default": {
-        $type: "color",
-        $value: "{global.orange.12}"
-      },
-      "base-hover": {
-        $type: "color",
-        $value: "{global.orange.13}"
-      },
-      "base-active": {
-        $type: "color",
-        $value: "{global.orange.14}"
-      },
-      "base-contrast-subtle": {
-        $type: "color",
-        $value: "{global.orange.15}"
-      },
-      "base-contrast-default": {
-        $type: "color",
-        $value: "{global.orange.16}"
-      }
-    },
     focus: {
       inner: {
         $type: "color",
@@ -1827,7 +1556,7 @@ var color_base_template_default = {
     color: {
       visited: {
         $type: "color",
-        $value: "{global.purple.12}"
+        $value: "{color.link.visited}"
       }
     }
   }
@@ -1970,7 +1699,7 @@ var color_template_default2 = {
 };
 
 // src/tokens/create/generators/semantic.ts
-var generateSemantic = (colors) => {
+var generateSemantic = (colors, _themeName) => {
   const mainColorNames = Object.keys(colors.main);
   const supportColorNames = Object.keys(colors.support);
   const modes = {
@@ -2004,7 +1733,8 @@ var generateSemantic = (colors) => {
     }
   }
   const customColors = [...mainColorNames, "neutral", ...supportColorNames];
-  const semanticColorTokens = customColors.map(
+  const allColors = [...customColors, ...baseColorNames];
+  const semanticColorTokens = allColors.map(
     (colorName) => [
       colorName,
       R5.map((x) => ({ ...x, $value: x.$value.replace("<color>", colorName) }), color_template_default)
@@ -2155,7 +1885,7 @@ var theme_template_default = {
 var generateTheme = (colors, themeName, borderRadius) => {
   const mainColorNames = Object.keys(colors.main);
   const supportColorNames = Object.keys(colors.support);
-  const customColors = [...mainColorNames, "neutral", ...supportColorNames];
+  const customColors = [...mainColorNames, "neutral", ...supportColorNames, ...baseColorNames];
   const themeColorTokens = Object.fromEntries(
     customColors.map(
       (colorName) => [
@@ -2168,7 +1898,13 @@ var generateTheme = (colors, themeName, borderRadius) => {
   const themeFile = {
     color: {
       ...themeColorTokens,
-      ...themeBaseFileColor
+      ...themeBaseFileColor,
+      link: {
+        visited: {
+          $type: "color",
+          $value: `{${themeName}.link.visited}`
+        }
+      }
     },
     ...remainingThemeFile
   };
@@ -2240,7 +1976,7 @@ var cliOptions = {
 var createTokens = async (opts) => {
   const { colors, typography: typography2, name, borderRadius, overrides } = opts;
   const colorSchemes = ["light", "dark"];
-  const semantic2 = generateSemantic(colors);
+  const semantic2 = generateSemantic(colors, name);
   const tokenSets = new Map([
     ...getDefaultTokens([
       "primitives/globals",
@@ -2255,7 +1991,6 @@ var createTokens = async (opts) => {
     [`primitives/modes/typography/primary/${name}`, generateTypography(name, typography2)],
     [`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, colors, overrides)]
     ]),
     [`themes/${name}`, generateTheme(colors, name, borderRadius)],
@@ -2269,8 +2004,66 @@ var createTokens = async (opts) => {
   return { tokenSets };
 };
 
+// src/config.ts
+var hexPatterns = [
+  // Hex colors: #000, #0000, #000000, #00000000
+  `#[0-9a-fA-F]{3}`,
+  `#[0-9a-fA-F]{4}`,
+  `#[0-9a-fA-F]{6}`,
+  `#[0-9a-fA-F]{8}`
+];
+var reservedColorsPattern = `^(?!(?:${RESERVED_COLORS.join("|")})$)`;
+var colorRegex = new RegExp(`^${hexPatterns.join("|")}$`);
+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"), {
+    error: `Color names cannot include reserved names: ${RESERVED_COLORS.join(", ")}`
+  }),
+  colorSchema,
+  {
+    error: "Color definitions must be hex color values"
+  }
+).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 severityColorOverrideSchema = z.partialRecord(z.enum(baseColorNames), colorSchema.describe("A hex color, which is used for creating a color scale")).optional().describe("An object with severity color names as keys");
+var overridesSchema = z.object({
+  colors: semanticColorOverrideSchema.optional(),
+  severity: severityColorOverrideSchema.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,
+    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(),
+  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()
+});
+var _configFileCreateSchema = z.object({
+  outDir: z.string().meta({ description: "Path to the output directory for the created design tokens" }),
+  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."
+  })
+}).required();
+var configFileCreateSchema = _configFileCreateSchema.extend(commonConfig.shape);
+
 // src/tokens/format.ts
-import * as R23 from "ramda";
+import * as R24 from "ramda";
 
 // ../../node_modules/.pnpm/@tokens-studio+types@0.5.2/node_modules/@tokens-studio/types/dist/constants/BoxShadowTypes.js
 var BoxShadowTypes;
@@ -2526,7 +2319,6 @@ function generateColorSchemesGroup(colorSchemes, themes) {
     (scheme) => ({
       ...colorSchemeDefaults[scheme],
       selectedTokenSets: Object.fromEntries([
-        [`primitives/modes/color-scheme/${scheme}/global`, TokenSetStatus.ENABLED],
         ...themes.map((theme) => [`primitives/modes/color-scheme/${scheme}/${theme}`, TokenSetStatus.ENABLED])
       ]),
       group: "Color scheme"
@@ -2604,13 +2396,13 @@ function generateTypographyGroup(themes) {
 }
 
 // src/tokens/process/output/theme.ts
-import pc from "picocolors";
-import * as R8 from "ramda";
+import pc2 from "picocolors";
+import * as R9 from "ramda";
 
 // package.json
 var package_default = {
   name: "@digdir/designsystemet",
-  version: "1.6.1",
+  version: "1.7.0",
   description: "CLI for Designsystemet",
   author: "Designsystemet team",
   engines: {
@@ -2683,9 +2475,9 @@ var package_default = {
     "object-hash": "^3.0.0",
     picocolors: "^1.1.1",
     postcss: "^8.5.6",
-    ramda: "^0.31.3",
-    "style-dictionary": "^5.1.0",
-    zod: "^4.1.11",
+    ramda: "^0.32.0",
+    "style-dictionary": "^5.1.1",
+    zod: "^4.1.12",
     "zod-validation-error": "^4.0.2"
   },
   devDependencies: {
@@ -2693,7 +2485,7 @@ var package_default = {
     "@types/apca-w3": "^0.1.3",
     "@types/chroma-js": "^3.1.1",
     "@types/fs-extra": "^11.0.4",
-    "@types/node": "^22.18.8",
+    "@types/node": "^22.18.11",
     "@types/object-hash": "^3.0.6",
     "@types/ramda": "^0.31.1",
     "fs-extra": "^11.3.2",
@@ -2705,7 +2497,7 @@ var package_default = {
 };
 
 // src/tokens/utils.ts
-import * as R7 from "ramda";
+import * as R8 from "ramda";
 
 // src/tokens/types.ts
 var colorCategories = {
@@ -2714,27 +2506,27 @@ var colorCategories = {
 };
 
 // src/tokens/utils.ts
-var mapToLowerCase = R7.map(R7.toLower);
-var hasAnyTruth = R7.any(R7.equals(true));
+var mapToLowerCase = R8.map(R8.toLower);
+var hasAnyTruth = R8.any(R8.equals(true));
 var getType = (token) => (token.$type ?? token.type) || "";
 var getValue = (token) => token.$value ?? token.value;
-var typeEquals = R7.curry(
+var typeEquals = R8.curry(
   (types, token) => {
-    if (R7.isNil(token)) {
+    if (R8.isNil(token)) {
       return false;
     }
-    return R7.includes(R7.toLower(getType(token)), R7.map(R7.toLower, Array.isArray(types) ? types : [types]));
+    return R8.includes(R8.toLower(getType(token)), R8.map(R8.toLower, Array.isArray(types) ? types : [types]));
   }
 );
-var pathStartsWithOneOf = R7.curry(
+var pathStartsWithOneOf = R8.curry(
   (paths, token) => {
-    if (R7.isNil(token)) {
+    if (R8.isNil(token)) {
       return false;
     }
     const tokenPath = mapToLowerCase(token.path);
-    const matchPathsStartingWith = R7.map((pathOrString) => {
-      const path = typeof pathOrString === "string" ? [pathOrString] : pathOrString;
-      return R7.startsWith(mapToLowerCase(path), tokenPath);
+    const matchPathsStartingWith = R8.map((pathOrString) => {
+      const path2 = typeof pathOrString === "string" ? [pathOrString] : pathOrString;
+      return R8.startsWith(mapToLowerCase(path2), tokenPath);
     }, paths);
     return hasAnyTruth(matchPathsStartingWith);
   }
@@ -2743,7 +2535,7 @@ function isSemanticToken(token) {
   return token.filePath.includes("semantic/");
 }
 function isSemanticColorToken(token, color) {
-  return token.filePath.includes("semantic/") && R7.startsWith(["color", color], token.path);
+  return token.filePath.includes("semantic/") && R8.startsWith(["color", color], token.path);
 }
 function isGlobalColorToken(token) {
   return typeEquals("color", token) && pathStartsWithOneOf(["global"], token);
@@ -2754,7 +2546,7 @@ function isColorCategoryToken(token, category) {
       (colorCategory2) => isColorCategoryToken(token, colorCategory2)
     );
   }
-  return R7.startsWith(["color", category], token.path);
+  return R8.startsWith(["color", category], token.path);
 }
 var isDigit = (s) => /^\d+$/.test(s);
 function traverseObj(obj, fn) {
@@ -2770,7 +2562,7 @@ function traverseObj(obj, fn) {
   return obj;
 }
 function inlineTokens(shouldInline, tokens) {
-  const [inlineableTokens, otherTokens] = R7.partition(shouldInline, tokens);
+  const [inlineableTokens, otherTokens] = R8.partition(shouldInline, tokens);
   return otherTokens.map((token) => {
     let transformed = getValue(token.original);
     for (const ref of inlineableTokens) {
@@ -2779,7 +2571,7 @@ function inlineTokens(shouldInline, tokens) {
         transformed = transformed.replaceAll(`{${refName}}`, getValue(ref.original));
       }
     }
-    const tokenWithInlinedRefs = R7.set(R7.lensPath(["original", "$value"]), transformed, token);
+    const tokenWithInlinedRefs = R8.set(R8.lensPath(["original", "$value"]), transformed, token);
     return tokenWithInlinedRefs;
   });
 }
@@ -2798,13 +2590,13 @@ var sizeComparator = (size2) => {
   return sortIndex ?? 0;
 };
 function orderBySize(sizes) {
-  return R7.sortBy(sizeComparator, sizes);
+  return R8.sortBy(sizeComparator, sizes);
 }
 
 // src/tokens/process/output/theme.ts
 var defaultFileHeader = `build: v${package_default.version}`;
-var getFileNameWithoutExtension = (path) => {
-  const pathSegments = path.split("/");
+var getFileNameWithoutExtension = (path2) => {
+  const pathSegments = path2.split("/");
   return pathSegments[pathSegments.length - 1].split(".").slice(0, -1).join(".");
 };
 var createThemeCSSFiles = ({
@@ -2816,9 +2608,9 @@ var createThemeCSSFiles = ({
     for (const buildResult of buildResults) {
       const themeName = buildResult.permutation.theme;
       const newOutputs = buildResult.formatted;
-      if (R8.isNotEmpty(newOutputs)) {
+      if (R9.isNotEmpty(newOutputs)) {
         const currentOutputs = groupedByTheme[themeName] ?? [];
-        groupedByTheme[themeName] = R8.concat(currentOutputs, newOutputs);
+        groupedByTheme[themeName] = R9.concat(currentOutputs, newOutputs);
       }
     }
   }
@@ -2834,7 +2626,7 @@ var createThemeCSSFiles = ({
     "typography/primary",
     "color/"
   ];
-  const sortByDefinedOrder = R8.sortBy((file) => {
+  const sortByDefinedOrder = R9.sortBy((file) => {
     const filePath = file.destination || "";
     const sortIndex = sortOrder.findIndex((sortElement) => {
       if (sortElement.endsWith("/")) {
@@ -2844,10 +2636,10 @@ var createThemeCSSFiles = ({
     });
     if (sortIndex === -1) {
       console.error(
-        pc.yellow(`WARNING: CSS section does not have a defined sort order: ${filePath.replace(".css", "")}`)
+        pc2.yellow(`WARNING: CSS section does not have a defined sort order: ${filePath.replace(".css", "")}`)
       );
       console.log(
-        pc.dim(
+        pc2.dim(
           `
 The section will currently be added to the end of the entry file, but the exact
 order may change due to nondeterminism.`.trim()
@@ -2863,17 +2655,17 @@ ${fileHeader}
 */
 
 `;
-  const sortAlphabetically = R8.sort(R8.ascend((x) => x.destination || ""));
-  const sortBySize = R8.sortBy(
-    R8.pipe((s) => getFileNameWithoutExtension(s.destination ?? ""), sizeComparator)
+  const sortAlphabetically = R9.sort(R9.ascend((x) => x.destination || ""));
+  const sortBySize = R9.sortBy(
+    R9.pipe((s) => getFileNameWithoutExtension(s.destination ?? ""), sizeComparator)
   );
-  const pickOutputs = R8.map(R8.view(R8.lensProp("output")));
-  const themeCSSFile = R8.pipe(
+  const pickOutputs = R9.map(R9.view(R9.lensProp("output")));
+  const themeCSSFile = R9.pipe(
     sortAlphabetically,
     sortBySize,
     sortByDefinedOrder,
     pickOutputs,
-    R8.join("\n"),
+    R9.join("\n"),
     (content) => header + content
   );
   const themeCSSFiles = Object.entries(groupedByTheme).map(([theme, files]) => ({
@@ -2884,20 +2676,20 @@ ${fileHeader}
 };
 
 // src/tokens/process/platform.ts
-import pc3 from "picocolors";
-import * as R22 from "ramda";
+import pc4 from "picocolors";
+import * as R23 from "ramda";
 import StyleDictionary2 from "style-dictionary";
 
 // src/tokens/process/configs.ts
 import { register } from "@tokens-studio/sd-transforms";
-import * as R21 from "ramda";
+import * as R22 from "ramda";
 import StyleDictionary from "style-dictionary";
 
 // src/tokens/process/configs/color.ts
-import * as R16 from "ramda";
+import * as R17 from "ramda";
 
 // src/tokens/process/formats/css/color.ts
-import * as R9 from "ramda";
+import * as R10 from "ramda";
 import { createPropertyFormatter } from "style-dictionary/utils";
 var prefersColorScheme = (colorScheme2, content) => `
 @media (prefers-color-scheme: ${colorScheme2}) {
@@ -2921,8 +2713,8 @@ var colorScheme = {
   color-scheme: ${colorScheme_};
 ` : "";
     const filteredAllTokens = allTokens.filter(
-      R9.allPass([
-        R9.anyPass([
+      R10.allPass([
+        R10.anyPass([
           // Include semantic tokens in the output
           isSemanticToken,
           // Include global color tokens
@@ -2936,13 +2728,13 @@ var colorScheme = {
       token,
       formatted: format(token)
     }));
-    const formattedTokens = formattedMap.map(R9.view(R9.lensProp("formatted"))).join("\n");
+    const formattedTokens = formattedMap.map(R10.view(R10.lensProp("formatted"))).join("\n");
     const content = `{
 ${formattedTokens}
 ${colorSchemeProperty}}
 `;
     const autoSelectorContent = ["light", "dark"].includes(colorScheme_) ? prefersColorScheme(colorScheme_, content) : "";
-    const body = R9.isNotNil(layer) ? `@layer ${layer} {
+    const body = R10.isNotNil(layer) ? `@layer ${layer} {
 ${selector} ${content} ${autoSelectorContent}
 }
 ` : `${selector} ${content} ${autoSelectorContent}
@@ -2956,7 +2748,7 @@ var colorCategory = {
     const { outputReferences, usesDtcg } = options;
     const { selector, layer } = platform;
     const destination = file.destination;
-    const format = R9.compose(
+    const format = R10.compose(
       createPropertyFormatter({
         outputReferences,
         dictionary,
@@ -2977,12 +2769,12 @@ var colorCategory = {
       formatted: format(token)
     }));
     buildOptions.buildTokenFormats[destination] = formattedMap;
-    const formattedTokens = formattedMap.map(R9.view(R9.lensProp("formatted"))).join("\n");
+    const formattedTokens = formattedMap.map(R10.view(R10.lensProp("formatted"))).join("\n");
     const content = `{
 ${formattedTokens}
 }
 `;
-    const body = R9.isNotNil(layer) ? `@layer ${layer} {
+    const body = R10.isNotNil(layer) ? `@layer ${layer} {
 ${selector} ${content}
 }
 ` : `${selector} ${content}
@@ -2992,16 +2784,16 @@ ${selector} ${content}
 };
 
 // src/tokens/process/formats/css/semantic.ts
-import * as R11 from "ramda";
+import * as R12 from "ramda";
 import { createPropertyFormatter as createPropertyFormatter3 } from "style-dictionary/utils";
 
 // src/tokens/process/formats/css/size.ts
-import * as R10 from "ramda";
+import * as R11 from "ramda";
 import { createPropertyFormatter as createPropertyFormatter2 } from "style-dictionary/utils";
 var isNumericBorderRadiusToken = (t) => t.path[0] === "border-radius" && isDigit(t.path[1]);
 var isNumericSizeToken = (t) => pathStartsWithOneOf(["size"], t) && isDigit(t.path[1]);
 var isSizeToken = (t) => pathStartsWithOneOf(["size"], t);
-var isInlineTokens = R10.anyPass([isNumericBorderRadiusToken, isNumericSizeToken, isSizeToken]);
+var isInlineTokens = R11.anyPass([isNumericBorderRadiusToken, isNumericSizeToken, isSizeToken]);
 var overrideSizingFormula = (format, token) => {
   const [name, value] = format(token).replace(/;$/, "").split(": ");
   let calc;
@@ -3020,7 +2812,7 @@ var overrideSizingFormula = (format, token) => {
     calc
   };
 };
-var formatSizingTokens = (format, tokens) => R10.reduce(
+var formatSizingTokens = (format, tokens) => R11.reduce(
   (acc, token) => {
     const { round, calc, name } = overrideSizingFormula(format, token);
     return {
@@ -3054,8 +2846,8 @@ var size = {
       usesDtcg
     });
     const tokens = inlineTokens(isInlineTokens, dictionary.allTokens);
-    const filteredTokens = R10.reject((token) => R10.equals(["_size", "mode-font-size"], token.path), tokens);
-    const [sizingTokens, restTokens] = R10.partition(
+    const filteredTokens = R11.reject((token) => R11.equals(["_size", "mode-font-size"], token.path), tokens);
+    const [sizingTokens, restTokens] = R11.partition(
       (t) => pathStartsWithOneOf(["_size"], t) && (isDigit(t.path[1]) || t.path[1] === "unit"),
       filteredTokens
     );
@@ -3069,12 +2861,12 @@ var size = {
       formatted: t
     }));
     buildOptions.buildTokenFormats[destination] = [...formattedMap, ...formattedSizingMap];
-    const formattedTokens = [formattedMap.map(R10.prop("formatted")).join("\n"), sizingTemplate(formattedSizingTokens)];
+    const formattedTokens = [formattedMap.map(R11.prop("formatted")).join("\n"), sizingTemplate(formattedSizingTokens)];
     const content = `${selector} {
 ${formattedTokens.join("\n")}
 }
 `;
-    const body = R10.isNotNil(layer) ? `@layer ${layer} {
+    const body = R11.isNotNil(layer) ? `@layer ${layer} {
 ${content}
 }
 ` : `${content}
@@ -3102,12 +2894,12 @@ var semantic = {
       formatted: format(token)
     }));
     buildOptions.buildTokenFormats[destination] = formattedMap;
-    const formattedTokens = formattedMap.map(R11.prop("formatted")).join("\n");
+    const formattedTokens = formattedMap.map(R12.prop("formatted")).join("\n");
     const content = `${selector} {
 ${formattedTokens}
 }
 `;
-    const body = R11.isNotNil(layer) ? `@layer ${layer} {
+    const body = R12.isNotNil(layer) ? `@layer ${layer} {
 ${content}
 }
 ` : `${content}
@@ -3117,13 +2909,13 @@ ${content}
 };
 
 // src/tokens/process/formats/css/size-mode.ts
-import * as R13 from "ramda";
+import * as R14 from "ramda";
 import { createPropertyFormatter as createPropertyFormatter4 } from "style-dictionary/utils";
 
 // src/tokens/process/transformers.ts
 import { checkAndEvaluateMath } from "@tokens-studio/sd-transforms";
-import * as R12 from "ramda";
-var isPx = R12.test(/\b\d+px\b/g);
+import * as R13 from "ramda";
+var isPx = R13.test(/\b\d+px\b/g);
 var sizeRem = {
   name: "ds/size/toRem",
   type: "value",
@@ -3242,13 +3034,13 @@ ${sizes.map((size3) => `    var(--ds-size--${size3}, var(--ds-size-mode-font-siz
     const sharedContent = `${sizingToggles}
 
 ${sizingHelpers}`;
-    const sharedBody = shortSizeName(size2) === R13.last(sizes) ? `
+    const sharedBody = shortSizeName(size2) === R14.last(sizes) ? `
 ${wrapInLayer(sharedContent, layer)}` : "";
     return body + sharedBody;
   }
 };
 function wrapInLayer(content, layer) {
-  return R13.isNotNil(layer) ? `@layer ${layer} {
+  return R14.isNotNil(layer) ? `@layer ${layer} {
 ${content}
 }
 ` : `${content}
@@ -3256,11 +3048,11 @@ ${content}
 }
 
 // src/tokens/process/formats/css/typography.ts
-import * as R14 from "ramda";
+import * as R15 from "ramda";
 import { createPropertyFormatter as createPropertyFormatter5 } from "style-dictionary/utils";
-var typographyFontFamilyPredicate = R14.allPass([
-  R14.pathSatisfies(R14.includes("typography"), ["path"]),
-  R14.pathSatisfies(R14.includes("fontFamily"), ["path"])
+var typographyFontFamilyPredicate = R15.allPass([
+  R15.pathSatisfies(R15.includes("typography"), ["path"]),
+  R15.pathSatisfies(R15.includes("fontFamily"), ["path"])
 ]);
 var typography = {
   name: "ds/css-typography",
@@ -3274,17 +3066,17 @@ var typography = {
       format: "css",
       usesDtcg
     });
-    const filteredTokens = R14.reject(typographyFontFamilyPredicate, dictionary.allTokens);
+    const filteredTokens = R15.reject(typographyFontFamilyPredicate, dictionary.allTokens);
     const formattedMap = filteredTokens.map((token) => ({
       token,
       formatted: format(token)
     }));
     buildOptions.buildTokenFormats[destination] = formattedMap;
-    const formattedTokens = formattedMap.map(R14.view(R14.lensProp("formatted"))).join("\n");
+    const formattedTokens = formattedMap.map(R15.view(R15.lensProp("formatted"))).join("\n");
     const content = selector ? `${selector} {
 ${formattedTokens}
 }` : formattedTokens;
-    const body = R14.isNotNil(layer) ? `@layer ${layer} {
+    const body = R15.isNotNil(layer) ? `@layer ${layer} {
 ${content}
 }` : content;
     return body;
@@ -3292,17 +3084,17 @@ ${content}
 };
 
 // src/tokens/process/formats/css/type-scale.ts
-import * as R15 from "ramda";
+import * as R16 from "ramda";
 import { createPropertyFormatter as createPropertyFormatter6 } from "style-dictionary/utils";
-var isTypographyFontFamilyToken = R15.allPass([
-  R15.pathSatisfies(R15.includes("typography"), ["path"]),
-  R15.pathSatisfies(R15.includes("fontFamily"), ["path"])
+var isTypographyFontFamilyToken = R16.allPass([
+  R16.pathSatisfies(R16.includes("typography"), ["path"]),
+  R16.pathSatisfies(R16.includes("fontFamily"), ["path"])
 ]);
 var formatTypographySizeToken = (format, token) => {
   const [name, value] = format(token).replace(/;$/, "").split(": ");
   let calc;
   let round;
-  if (R15.startsWith(["font-size"], token.path)) {
+  if (R16.startsWith(["font-size"], token.path)) {
     calc = `calc(${value} * var(--_ds-font-size-factor))`;
     round = `round(${calc}, 1px)`;
   } else {
@@ -3310,7 +3102,7 @@ var formatTypographySizeToken = (format, token) => {
   }
   return { name, calc, round: round ?? calc };
 };
-var formatTypographySizeTokens = (format, tokens) => R15.reduce(
+var formatTypographySizeTokens = (format, tokens) => R16.reduce(
   (acc, token) => {
     const { name, calc, round } = formatTypographySizeToken(format, token);
     acc.tokens.push(token);
@@ -3333,7 +3125,7 @@ var typeScale = {
       format: "css",
       usesDtcg
     });
-    const filteredTokens = R15.reject(R15.anyPass([isTypographyFontFamilyToken]), dictionary.allTokens);
+    const filteredTokens = R16.reject(R16.anyPass([isTypographyFontFamilyToken]), dictionary.allTokens);
     const formattedTokens = formatTypographySizeTokens(format, filteredTokens);
     const formattedMap = formattedTokens.round.map((t, i) => ({
       token: formattedTokens.tokens[i],
@@ -3344,7 +3136,7 @@ var typeScale = {
     const content = `${selector} {
 ${sizeFactor}${sizingTemplate(formattedTokens)}
 }`;
-    const body = R15.isNotNil(layer) ? `@layer ${layer} {
+    const body = R16.isNotNil(layer) ? `@layer ${layer} {
 ${content}
 }` : content;
     return body;
@@ -3383,7 +3175,7 @@ var colorSchemeVariables = ({ "color-scheme": colorScheme2 = "light", theme }) =
           {
             destination: `color-scheme/${colorScheme2}.css`,
             format: formats.colorScheme.name,
-            filter: (token) => typeEquals("color", token) && !R16.startsWith(["global"], token.path)
+            filter: (token) => typeEquals("color", token) && !R17.startsWith(["global"], token.path)
           }
         ],
         options: {
@@ -3434,7 +3226,7 @@ var colorCategoryVariables = (opts) => ({ "color-scheme": colorScheme2, theme, .
 };
 
 // src/tokens/process/configs/semantic.ts
-import * as R17 from "ramda";
+import * as R18 from "ramda";
 import { outputReferencesFilter } from "style-dictionary/utils";
 var semanticVariables = ({ theme }) => {
   const selector = `:root`;
@@ -3457,8 +3249,8 @@ var semanticVariables = ({ theme }) => {
             destination: `semantic.css`,
             format: formats.semantic.name,
             filter: (token) => {
-              const isUwantedToken = R17.anyPass([R17.includes("primitives/global")])(token.filePath);
-              const isPrivateToken = R17.includes("_", token.path);
+              const isUwantedToken = R18.anyPass([R18.includes("primitives/global")])(token.filePath);
+              const isPrivateToken = R18.includes("_", token.path);
               const unwantedPaths = pathStartsWithOneOf(
                 ["size", "_size", "font-size", "line-height", "letter-spacing"],
                 token
@@ -3481,7 +3273,7 @@ var semanticVariables = ({ theme }) => {
 };
 
 // src/tokens/process/configs/size.ts
-import * as R18 from "ramda";
+import * as R19 from "ramda";
 import { outputReferencesFilter as outputReferencesFilter2 } from "style-dictionary/utils";
 var sizeVariables = ({ theme }) => {
   const selector = `:root, [data-size]`;
@@ -3504,8 +3296,8 @@ var sizeVariables = ({ theme }) => {
             destination: `size.css`,
             format: formats.size.name,
             filter: (token) => {
-              const isUwantedToken = R18.anyPass([R18.includes("primitives/global")])(token.filePath);
-              const isPrivateToken = R18.includes("_", token.path);
+              const isUwantedToken = R19.anyPass([R19.includes("primitives/global")])(token.filePath);
+              const isPrivateToken = R19.includes("_", token.path);
               return pathStartsWithOneOf(["size", "_size"], token) && !(isUwantedToken || isPrivateToken);
             }
           }
@@ -3522,7 +3314,7 @@ var sizeVariables = ({ theme }) => {
 };
 
 // src/tokens/process/configs/size-mode.ts
-import * as R19 from "ramda";
+import * as R20 from "ramda";
 var sizeModeVariables = ({ theme, size: size2 }) => {
   const selector = `:root`;
   const layer = `ds.theme.size-mode`;
@@ -3545,7 +3337,7 @@ var sizeModeVariables = ({ theme, size: size2 }) => {
             destination: `size-mode/${size2}.css`,
             format: formats.sizeMode.name,
             filter: (token) => {
-              return R19.equals(["_size", "mode-font-size"], token.path);
+              return R20.equals(["_size", "mode-font-size"], token.path);
             }
           }
         ]
@@ -3645,18 +3437,18 @@ var typographyVariables = ({ theme, typography: typography2 }) => {
 
 // src/tokens/process/utils/getMultidimensionalThemes.ts
 import { kebabCase } from "change-case";
-import pc2 from "picocolors";
-import * as R20 from "ramda";
+import pc3 from "picocolors";
+import * as R21 from "ramda";
 var getMultidimensionalThemes = (processed$themes, dimensions) => {
   const verboseLogging = buildOptions?.verbose;
   const grouped$themes = groupThemes(processed$themes);
   const permutations = permutateThemes(grouped$themes);
   const ALL_DEPENDENT_ON = ["theme"];
-  const keys2 = R20.keys(grouped$themes);
+  const keys2 = R21.keys(grouped$themes);
   const nonDependentKeys = keys2.filter((x) => ![...ALL_DEPENDENT_ON, ...dimensions].includes(x));
   if (verboseLogging) {
-    console.log(pc2.cyan(`\u{1F50E} Finding theme permutations for ${dimensions}`));
-    console.log(pc2.cyan(`   (ignoring permutations for ${nonDependentKeys})`));
+    console.log(pc3.cyan(`\u{1F50E} Finding theme permutations for ${dimensions}`));
+    console.log(pc3.cyan(`   (ignoring permutations for ${nonDependentKeys})`));
   }
   return permutations.filter((val) => {
     const filters = nonDependentKeys.map((x) => val.permutation[x] === grouped$themes[x][0].name);
@@ -3692,7 +3484,7 @@ function groupThemes(themes) {
   }
   return groups;
 }
-var hasUnknownProps = R20.pipe(R20.values, R20.none(R20.equals("unknown")), R20.not);
+var hasUnknownProps = R21.pipe(R21.values, R21.none(R21.equals("unknown")), R21.not);
 function permutateThemes(groups) {
   const separator = "_";
   const permutations = cartesian(Object.values(groups));
@@ -3702,8 +3494,8 @@ function permutateThemes(groups) {
         const { group, name, selectedTokenSets } = theme;
         let updatedPermutation = acc.permutation;
         if (group) {
-          const groupProp = R20.lensProp(group);
-          updatedPermutation = R20.set(groupProp, name, updatedPermutation);
+          const groupProp = R21.lensProp(group);
+          updatedPermutation = R21.set(groupProp, name, updatedPermutation);
         }
         const updatedName = `${String(acc.name)}${acc ? separator : ""}${name}`;
         const sets = [...acc.selectedTokenSets, ...filterTokenSets(selectedTokenSets)];
@@ -3794,7 +3586,7 @@ var getConfigsForThemeDimensions = (getConfig, processed$themes, dimensions, opt
               obj.filePath = tokenSet;
             }
           });
-          tokenSource.tokens = R21.mergeDeepRight(tokenSource.tokens, tokensWithFilePath);
+          tokenSource.tokens = R22.mergeDeepRight(tokenSource.tokens, tokensWithFilePath);
         }
       }
     } else {
@@ -3886,18 +3678,18 @@ async function processPlatform(options) {
   const UNSAFE_DEFAULT_COLOR = process.env.UNSAFE_DEFAULT_COLOR ?? "";
   if (UNSAFE_DEFAULT_COLOR) {
     console.warn(
-      pc3.yellow(
+      pc4.yellow(
         `
-\u26A0\uFE0F UNSAFE_DEFAULT_COLOR is set to ${pc3.blue(UNSAFE_DEFAULT_COLOR)}. This will override the default color.`
+\u26A0\uFE0F UNSAFE_DEFAULT_COLOR is set to ${pc4.blue(UNSAFE_DEFAULT_COLOR)}. This will override the default color.`
       )
     );
   }
   const UNSAFE_COLOR_GROUPS = Array.from(process.env.UNSAFE_COLOR_GROUPS?.split(",") ?? []);
   if (UNSAFE_COLOR_GROUPS.length > 0) {
     console.warn(
-      pc3.yellow(
+      pc4.yellow(
         `
-\u26A0\uFE0F UNSAFE_COLOR_GROUPS is set to ${pc3.blue(`[${UNSAFE_COLOR_GROUPS.join(", ")}]`)}. This will override the default color groups.`
+\u26A0\uFE0F UNSAFE_COLOR_GROUPS is set to ${pc4.blue(`[${UNSAFE_COLOR_GROUPS.join(", ")}]`)}. This will override the default color groups.`
       )
     );
   }
@@ -3907,24 +3699,24 @@ async function processPlatform(options) {
   buildOptions.colorGroups = colorGroups;
   if (!buildOptions.defaultColor) {
     const customColors = getCustomColors(processed$themes, colorGroups);
-    const firstMainColor = R22.head(customColors);
+    const firstMainColor = R23.head(customColors);
     buildOptions.defaultColor = firstMainColor;
   }
   if (buildOptions.defaultColor) {
     console.log(`
-\u{1F3A8} Using ${pc3.blue(buildOptions.defaultColor)} as default color`);
+\u{1F3A8} Using ${pc4.blue(buildOptions.defaultColor)} as default color`);
   }
   const sizeModes = processed$themes.filter((x) => x.group === "size").map((x) => x.name);
   buildOptions.sizeModes = sizeModes;
   if (!buildOptions.defaultSize) {
-    const defaultSize = R22.head(sizeModes);
+    const defaultSize = R23.head(sizeModes);
     buildOptions.defaultSize = defaultSize;
   }
   if (buildOptions.defaultSize) {
     console.log(`
-\u{1F4CF} Using ${pc3.blue(buildOptions.defaultSize)} as default size`);
+\u{1F4CF} Using ${pc4.blue(buildOptions.defaultSize)} as default size`);
   }
-  const buildAndSdConfigs = R22.map((buildConfig) => {
+  const buildAndSdConfigs = R23.map((buildConfig) => {
     const sdConfigs = getConfigsForThemeDimensions(buildConfig.getConfig, processed$themes, buildConfig.dimensions, {
       tokensDir,
       tokenSets
@@ -3958,19 +3750,19 @@ async function processPlatform(options) {
     typeScale: [initResult]
   };
   try {
-    for (const [buildName, { buildConfig, sdConfigs }] of R22.toPairs(buildAndSdConfigs)) {
+    for (const [buildName, { buildConfig, sdConfigs }] of R23.toPairs(buildAndSdConfigs)) {
       if (!(buildConfig.enabled?.() ?? true)) {
         continue;
       }
       if (sdConfigs.length > 0) {
         console.log(`
-\u{1F371} Building ${pc3.green(buildConfig.name ?? buildName)}`);
+\u{1F371} Building ${pc4.green(buildConfig.name ?? buildName)}`);
         const results = await Promise.all(
           sdConfigs.map(async (sdConfig) => {
             const { config, permutation } = sdConfig;
             const modes = ["theme", ...buildConfig.dimensions];
             const modeMessage = modes.map((x) => permutation[x]).join(" - ");
-            const logMessage = R22.isNil(buildConfig.log) ? modeMessage : buildConfig?.log(sdConfig);
+            const logMessage = R23.isNil(buildConfig.log) ? modeMessage : buildConfig?.log(sdConfig);
             console.log(logMessage);
             const sdOptions = { cache: true };
             const sdExtended = await sd.extend(config);
@@ -4019,20 +3811,23 @@ var formatTheme = async (themeConfig) => {
 var formatThemeCSS = async (themeConfig) => {
   const processedBuilds = await formatTheme(themeConfig);
   const themeCSSFiles = createThemeCSSFiles({ processedBuilds });
-  return R23.head(themeCSSFiles)?.output ?? "";
+  return R24.head(themeCSSFiles)?.output ?? "";
 };
 export {
   HSLToHex,
   RESERVED_COLORS,
   areColorsContrasting,
+  baseColorNames,
   baseColors,
   canTextBeUsedOnColors,
   cliOptions,
   colorMetadata,
   colorNames,
+  configFileCreateSchema as configSchema,
   convertColor,
   convertToHex,
   createTokens,
+  dsLinkColor,
   formatThemeCSS,
   formatTokens,
   generateColorContrast,