@digdir/designsystemet 1.11.1 → 1.12.0

package/dist/bin/designsystemet.js

@@ -348,10 +348,33 @@ var generateColorContrast = (color, type) => {
   return color;
 };
 
+// src/colors/types.ts
+import * as R3 from "ramda";
+var semanticColorMap = {
+  "background-default": 1,
+  "background-tinted": 2,
+  "surface-default": 3,
+  "surface-tinted": 4,
+  "surface-hover": 5,
+  "surface-active": 6,
+  "border-subtle": 7,
+  "border-default": 8,
+  "border-strong": 9,
+  "text-subtle": 10,
+  "text-default": 11,
+  "base-default": 12,
+  "base-hover": 13,
+  "base-active": 14,
+  "base-contrast-subtle": 15,
+  "base-contrast-default": 16
+};
+var semanticColorNames = R3.keys(semanticColorMap);
+var semanticColorNumbers = R3.values(semanticColorMap);
+
 // src/migrations/codemods/css/plugins.ts
 import hash from "object-hash";
 import pc from "picocolors";
-import * as R3 from "ramda";
+import * as R4 from "ramda";
 var printDelete = (text) => console.log(`${pc.red("Deleted:")} ${text}`.replace(/"|'/g, ""));
 var deleteMsg = (decl, from) => `${pc.yellow(from)} @ ${pc.gray(`${JSON.stringify(decl.source?.input.file)}:${decl.source?.start?.line}:${decl.source?.start?.column}`)}`;
 var cssClassRename = (dictionary) => ({
@@ -372,15 +395,15 @@ var cssVarRename = (dictionary) => ({
     const { value, prop: prop4 } = decl;
     const deleted = /* @__PURE__ */ new Set();
     for (const [from, to] of Object.entries(dictionary)) {
-      if (R3.isNotEmpty(to)) {
+      if (R4.isNotEmpty(to)) {
         if (to === "[delete]") {
           deleted.add(deleteMsg(decl, from));
         }
-        if (R3.includes(from, value)) {
+        if (R4.includes(from, value)) {
           decl.value = value.replace(from, to);
           continue;
         }
-        if (R3.includes(from, prop4) && decl.variable) {
+        if (R4.includes(from, prop4) && decl.variable) {
           decl.prop = prop4.replace(from, to);
         }
       }
@@ -810,8 +833,8 @@ var beta_to_v1_default = (glob2) => runCssCodemod({
 });
 
 // src/migrations/color-rename-next49.ts
-import * as R4 from "ramda";
-var replace = (oldTemplate, newTemplate, colors2, placeholder = "[color]") => R4.reduce(
+import * as R5 from "ramda";
+var replace = (oldTemplate, newTemplate, colors2, placeholder = "[color]") => R5.reduce(
   (acc, color) => {
     acc[oldTemplate.replace(placeholder, color)] = newTemplate.replace(placeholder, color);
     return acc;
@@ -853,7 +876,7 @@ var migrations_default = {
 // src/tokens/build.ts
 import path from "path";
 import pc7 from "picocolors";
-import * as R21 from "ramda";
+import * as R22 from "ramda";
 
 // src/tokens/process/output/declarations.ts
 import pc5 from "picocolors";
@@ -861,7 +884,7 @@ import pc5 from "picocolors";
 // package.json
 var package_default = {
   name: "@digdir/designsystemet",
-  version: "1.11.1",
+  version: "1.12.0",
   description: "CLI for Designsystemet",
   author: "Designsystemet team",
   engines: {
@@ -913,9 +936,8 @@ 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:generate-config-from-tokens": "pnpm run designsystemet generate-config-from-tokens -d ../../internal/digdir/design-tokens --dry",
+    "test:generate-config-from-tokens": "pnpm run designsystemet generate-config-from-tokens -d ../../design-tokens --dry",
     test: "node -v && pnpm test:tokens-create-and-build-options && pnpm test:generate-config-from-tokens && pnpm test:tokens-create-and-build-config",
-    "update:template": "tsx ./src/scripts/update-template.ts",
     "update:preview-tokens": "tsx ./src/scripts/update-preview-tokens.ts",
     verify: "pnpm test && pnpm update:template && pnpm --filter @internal/digdir update:theme-digdir"
   },
@@ -932,14 +954,14 @@ var package_default = {
     picocolors: "^1.1.1",
     postcss: "^8.5.6",
     ramda: "^0.32.0",
-    "style-dictionary": "^5.2.0",
+    "style-dictionary": "^5.3.0",
     zod: "^4.3.6",
     "zod-validation-error": "^5.0.0"
   },
   devDependencies: {
     "@tokens-studio/types": "0.5.2",
     "@types/chroma-js": "^3.1.2",
-    "@types/node": "^24.10.9",
+    "@types/node": "^24.10.13",
     "@types/object-hash": "^3.0.6",
     "@types/ramda": "^0.31.1",
     tsup: "^8.5.1",
@@ -950,7 +972,7 @@ var package_default = {
 
 // src/tokens/process/platform.ts
 import pc4 from "picocolors";
-import * as R19 from "ramda";
+import * as R20 from "ramda";
 import StyleDictionary2 from "style-dictionary";
 
 // src/tokens/types.ts
@@ -961,32 +983,32 @@ var colorCategories = {
 
 // src/tokens/process/configs.ts
 import { register } from "@tokens-studio/sd-transforms";
-import * as R18 from "ramda";
+import * as R19 from "ramda";
 import StyleDictionary from "style-dictionary";
 
 // src/tokens/utils.ts
-import * as R5 from "ramda";
-var mapToLowerCase = R5.map(R5.toLower);
-var hasAnyTruth = R5.any(R5.equals(true));
+import * as R6 from "ramda";
+var mapToLowerCase = R6.map(R6.toLower);
+var hasAnyTruth = R6.any(R6.equals(true));
 var getType = (token) => (token.$type ?? token.type) || "";
 var getValue = (token) => token.$value ?? token.value;
-var typeEquals = R5.curry(
+var typeEquals = R6.curry(
   (types, token) => {
-    if (R5.isNil(token)) {
+    if (R6.isNil(token)) {
       return false;
     }
-    return R5.includes(R5.toLower(getType(token)), R5.map(R5.toLower, Array.isArray(types) ? types : [types]));
+    return R6.includes(R6.toLower(getType(token)), R6.map(R6.toLower, Array.isArray(types) ? types : [types]));
   }
 );
-var pathStartsWithOneOf = R5.curry(
+var pathStartsWithOneOf = R6.curry(
   (paths, token) => {
-    if (R5.isNil(token)) {
+    if (R6.isNil(token)) {
       return false;
     }
     const tokenPath = mapToLowerCase(token.path);
-    const matchPathsStartingWith = R5.map((pathOrString) => {
+    const matchPathsStartingWith = R6.map((pathOrString) => {
       const path6 = typeof pathOrString === "string" ? [pathOrString] : pathOrString;
-      return R5.startsWith(mapToLowerCase(path6), tokenPath);
+      return R6.startsWith(mapToLowerCase(path6), tokenPath);
     }, paths);
     return hasAnyTruth(matchPathsStartingWith);
   }
@@ -995,7 +1017,7 @@ function isSemanticToken(token) {
   return token.filePath.includes("semantic/");
 }
 function isSemanticColorToken(token, color) {
-  return token.filePath.includes("semantic/") && R5.startsWith(["color", color], token.path);
+  return token.filePath.includes("semantic/") && R6.startsWith(["color", color], token.path);
 }
 function isGlobalColorToken(token) {
   return typeEquals("color", token) && pathStartsWithOneOf(["global"], token);
@@ -1006,7 +1028,7 @@ function isColorCategoryToken(token, category) {
       (colorCategory2) => isColorCategoryToken(token, colorCategory2)
     );
   }
-  return R5.startsWith(["color", category], token.path);
+  return R6.startsWith(["color", category], token.path);
 }
 var isDigit = (s) => /^\d+$/.test(s);
 function traverseObj(obj, fn) {
@@ -1022,7 +1044,7 @@ function traverseObj(obj, fn) {
   return obj;
 }
 function inlineTokens(shouldInline, tokens) {
-  const [inlineableTokens, otherTokens] = R5.partition(shouldInline, tokens);
+  const [inlineableTokens, otherTokens] = R6.partition(shouldInline, tokens);
   return otherTokens.map((token) => {
     let transformed = getValue(token.original);
     for (const ref of inlineableTokens) {
@@ -1031,7 +1053,7 @@ function inlineTokens(shouldInline, tokens) {
         transformed = transformed.replaceAll(`{${refName}}`, getValue(ref.original));
       }
     }
-    const tokenWithInlinedRefs = R5.set(R5.lensPath(["original", "$value"]), transformed, token);
+    const tokenWithInlinedRefs = R6.set(R6.lensPath(["original", "$value"]), transformed, token);
     return tokenWithInlinedRefs;
   });
 }
@@ -1050,14 +1072,14 @@ var sizeComparator = (size2) => {
   return sortIndex ?? 0;
 };
 function orderBySize(sizes) {
-  return R5.sortBy(sizeComparator, sizes);
+  return R6.sortBy(sizeComparator, sizes);
 }
 
 // src/tokens/process/configs/color.ts
-import * as R13 from "ramda";
+import * as R14 from "ramda";
 
 // src/tokens/process/formats/css/color.ts
-import * as R6 from "ramda";
+import * as R7 from "ramda";
 import { createPropertyFormatter } from "style-dictionary/utils";
 var prefersColorScheme = (colorScheme2, content) => `
 @media (prefers-color-scheme: ${colorScheme2}) {
@@ -1081,8 +1103,8 @@ var colorScheme = {
   color-scheme: ${colorScheme_};
 ` : "";
     const filteredAllTokens = allTokens.filter(
-      R6.allPass([
-        R6.anyPass([
+      R7.allPass([
+        R7.anyPass([
           // Include semantic tokens in the output
           isSemanticToken,
           // Include global color tokens
@@ -1096,13 +1118,13 @@ var colorScheme = {
       token,
       formatted: format(token)
     }));
-    const formattedTokens = formattedMap.map(R6.view(R6.lensProp("formatted"))).join("\n");
+    const formattedTokens = formattedMap.map(R7.view(R7.lensProp("formatted"))).join("\n");
     const content = `{
 ${formattedTokens}
 ${colorSchemeProperty}}
 `;
     const autoSelectorContent = ["light", "dark"].includes(colorScheme_) ? prefersColorScheme(colorScheme_, content) : "";
-    const body = R6.isNotNil(layer) ? `@layer ${layer} {
+    const body = R7.isNotNil(layer) ? `@layer ${layer} {
 ${selector} ${content} ${autoSelectorContent}
 }
 ` : `${selector} ${content} ${autoSelectorContent}
@@ -1116,7 +1138,7 @@ var colorCategory = {
     const { outputReferences, usesDtcg } = options;
     const { selector, layer } = platform;
     const destination = file.destination;
-    const format = R6.compose(
+    const format = R7.compose(
       createPropertyFormatter({
         outputReferences,
         dictionary,
@@ -1137,12 +1159,12 @@ var colorCategory = {
       formatted: format(token)
     }));
     buildOptions.buildTokenFormats[destination] = formattedMap;
-    const formattedTokens = formattedMap.map(R6.view(R6.lensProp("formatted"))).join("\n");
+    const formattedTokens = formattedMap.map(R7.view(R7.lensProp("formatted"))).join("\n");
     const content = `{
 ${formattedTokens}
 }
 `;
-    const body = R6.isNotNil(layer) ? `@layer ${layer} {
+    const body = R7.isNotNil(layer) ? `@layer ${layer} {
 ${selector} ${content}
 }
 ` : `${selector} ${content}
@@ -1152,16 +1174,16 @@ ${selector} ${content}
 };
 
 // src/tokens/process/formats/css/semantic.ts
-import * as R8 from "ramda";
+import * as R9 from "ramda";
 import { createPropertyFormatter as createPropertyFormatter3 } from "style-dictionary/utils";
 
 // src/tokens/process/formats/css/size.ts
-import * as R7 from "ramda";
+import * as R8 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 = R7.anyPass([isNumericBorderRadiusToken, isNumericSizeToken, isSizeToken]);
+var isInlineTokens = R8.anyPass([isNumericBorderRadiusToken, isNumericSizeToken, isSizeToken]);
 var overrideSizingFormula = (format, token) => {
   const [name, value] = format(token).replace(/;$/, "").split(": ");
   let calc;
@@ -1180,7 +1202,7 @@ var overrideSizingFormula = (format, token) => {
     calc
   };
 };
-var formatSizingTokens = (format, tokens) => R7.reduce(
+var formatSizingTokens = (format, tokens) => R8.reduce(
   (acc, token) => {
     const { round, calc, name } = overrideSizingFormula(format, token);
     return {
@@ -1214,8 +1236,8 @@ var size = {
       usesDtcg
     });
     const tokens = inlineTokens(isInlineTokens, dictionary.allTokens);
-    const filteredTokens = R7.reject((token) => R7.equals(["_size", "mode-font-size"], token.path), tokens);
-    const [sizingTokens, restTokens] = R7.partition(
+    const filteredTokens = R8.reject((token) => R8.equals(["_size", "mode-font-size"], token.path), tokens);
+    const [sizingTokens, restTokens] = R8.partition(
       (t) => pathStartsWithOneOf(["_size"], t) && (isDigit(t.path[1]) || t.path[1] === "unit"),
       filteredTokens
     );
@@ -1229,12 +1251,12 @@ var size = {
       formatted: t
     }));
     buildOptions.buildTokenFormats[destination] = [...formattedMap, ...formattedSizingMap];
-    const formattedTokens = [formattedMap.map(R7.prop("formatted")).join("\n"), sizingTemplate(formattedSizingTokens)];
+    const formattedTokens = [formattedMap.map(R8.prop("formatted")).join("\n"), sizingTemplate(formattedSizingTokens)];
     const content = `${selector} {
 ${formattedTokens.join("\n")}
 }
 `;
-    const body = R7.isNotNil(layer) ? `@layer ${layer} {
+    const body = R8.isNotNil(layer) ? `@layer ${layer} {
 ${content}
 }
 ` : `${content}
@@ -1262,12 +1284,12 @@ var semantic = {
       formatted: format(token)
     }));
     buildOptions.buildTokenFormats[destination] = formattedMap;
-    const formattedTokens = formattedMap.map(R8.prop("formatted")).join("\n");
+    const formattedTokens = formattedMap.map(R9.prop("formatted")).join("\n");
     const content = `${selector} {
 ${formattedTokens}
 }
 `;
-    const body = R8.isNotNil(layer) ? `@layer ${layer} {
+    const body = R9.isNotNil(layer) ? `@layer ${layer} {
 ${content}
 }
 ` : `${content}
@@ -1277,13 +1299,13 @@ ${content}
 };
 
 // src/tokens/process/formats/css/size-mode.ts
-import * as R10 from "ramda";
+import * as R11 from "ramda";
 import { createPropertyFormatter as createPropertyFormatter4 } from "style-dictionary/utils";
 
 // src/tokens/process/transformers.ts
 import { checkAndEvaluateMath } from "@tokens-studio/sd-transforms";
-import * as R9 from "ramda";
-var isPx = R9.test(/\b\d+px\b/g);
+import * as R10 from "ramda";
+var isPx = R10.test(/\b\d+px\b/g);
 var sizeRem = {
   name: "ds/size/toRem",
   type: "value",
@@ -1402,13 +1424,13 @@ ${sizes.map((size3) => `    var(--ds-size--${size3}, var(--ds-size-mode-font-siz
     const sharedContent = `${sizingToggles}
 
 ${sizingHelpers}`;
-    const sharedBody = shortSizeName(size2) === R10.last(sizes) ? `
+    const sharedBody = shortSizeName(size2) === R11.last(sizes) ? `
 ${wrapInLayer(sharedContent, layer)}` : "";
     return body + sharedBody;
   }
 };
 function wrapInLayer(content, layer) {
-  return R10.isNotNil(layer) ? `@layer ${layer} {
+  return R11.isNotNil(layer) ? `@layer ${layer} {
 ${content}
 }
 ` : `${content}
@@ -1416,11 +1438,11 @@ ${content}
 }
 
 // src/tokens/process/formats/css/typography.ts
-import * as R11 from "ramda";
+import * as R12 from "ramda";
 import { createPropertyFormatter as createPropertyFormatter5 } from "style-dictionary/utils";
-var typographyFontFamilyPredicate = R11.allPass([
-  R11.pathSatisfies(R11.includes("typography"), ["path"]),
-  R11.pathSatisfies(R11.includes("fontFamily"), ["path"])
+var typographyFontFamilyPredicate = R12.allPass([
+  R12.pathSatisfies(R12.includes("typography"), ["path"]),
+  R12.pathSatisfies(R12.includes("fontFamily"), ["path"])
 ]);
 var typography = {
   name: "ds/css-typography",
@@ -1434,17 +1456,17 @@ var typography = {
       format: "css",
       usesDtcg
     });
-    const filteredTokens = R11.reject(typographyFontFamilyPredicate, dictionary.allTokens);
+    const filteredTokens = R12.reject(typographyFontFamilyPredicate, dictionary.allTokens);
     const formattedMap = filteredTokens.map((token) => ({
       token,
       formatted: format(token)
     }));
     buildOptions.buildTokenFormats[destination] = formattedMap;
-    const formattedTokens = formattedMap.map(R11.view(R11.lensProp("formatted"))).join("\n");
+    const formattedTokens = formattedMap.map(R12.view(R12.lensProp("formatted"))).join("\n");
     const content = selector ? `${selector} {
 ${formattedTokens}
 }` : formattedTokens;
-    const body = R11.isNotNil(layer) ? `@layer ${layer} {
+    const body = R12.isNotNil(layer) ? `@layer ${layer} {
 ${content}
 }` : content;
     return body;
@@ -1452,17 +1474,17 @@ ${content}
 };
 
 // src/tokens/process/formats/css/type-scale.ts
-import * as R12 from "ramda";
+import * as R13 from "ramda";
 import { createPropertyFormatter as createPropertyFormatter6 } from "style-dictionary/utils";
-var isTypographyFontFamilyToken = R12.allPass([
-  R12.pathSatisfies(R12.includes("typography"), ["path"]),
-  R12.pathSatisfies(R12.includes("fontFamily"), ["path"])
+var isTypographyFontFamilyToken = R13.allPass([
+  R13.pathSatisfies(R13.includes("typography"), ["path"]),
+  R13.pathSatisfies(R13.includes("fontFamily"), ["path"])
 ]);
 var formatTypographySizeToken = (format, token) => {
   const [name, value] = format(token).replace(/;$/, "").split(": ");
   let calc;
   let round;
-  if (R12.startsWith(["font-size"], token.path)) {
+  if (R13.startsWith(["font-size"], token.path)) {
     calc = `calc(${value} * var(--_ds-font-size-factor))`;
     round = `round(${calc}, 1px)`;
   } else {
@@ -1470,7 +1492,7 @@ var formatTypographySizeToken = (format, token) => {
   }
   return { name, calc, round: round ?? calc };
 };
-var formatTypographySizeTokens = (format, tokens) => R12.reduce(
+var formatTypographySizeTokens = (format, tokens) => R13.reduce(
   (acc, token) => {
     const { name, calc, round } = formatTypographySizeToken(format, token);
     acc.tokens.push(token);
@@ -1493,7 +1515,7 @@ var typeScale = {
       format: "css",
       usesDtcg
     });
-    const filteredTokens = R12.reject(R12.anyPass([isTypographyFontFamilyToken]), dictionary.allTokens);
+    const filteredTokens = R13.reject(R13.anyPass([isTypographyFontFamilyToken]), dictionary.allTokens);
     const formattedTokens = formatTypographySizeTokens(format, filteredTokens);
     const formattedMap = formattedTokens.round.map((t, i) => ({
       token: formattedTokens.tokens[i],
@@ -1504,7 +1526,7 @@ var typeScale = {
     const content = `${selector} {
 ${sizeFactor}${sizingTemplate(formattedTokens)}
 }`;
-    const body = R12.isNotNil(layer) ? `@layer ${layer} {
+    const body = R13.isNotNil(layer) ? `@layer ${layer} {
 ${content}
 }` : content;
     return body;
@@ -1543,7 +1565,7 @@ var colorSchemeVariables = ({ "color-scheme": colorScheme2 = "light", theme }) =
           {
             destination: `color-scheme/${colorScheme2}.css`,
             format: formats.colorScheme.name,
-            filter: (token) => typeEquals("color", token) && !R13.startsWith(["global"], token.path)
+            filter: (token) => typeEquals("color", token) && !R14.startsWith(["global"], token.path)
           }
         ],
         options: {
@@ -1594,7 +1616,7 @@ var colorCategoryVariables = (opts) => ({ "color-scheme": colorScheme2, theme, .
 };
 
 // src/tokens/process/configs/semantic.ts
-import * as R14 from "ramda";
+import * as R15 from "ramda";
 import { outputReferencesFilter } from "style-dictionary/utils";
 var semanticVariables = ({ theme }) => {
   const selector = `:root`;
@@ -1617,8 +1639,8 @@ var semanticVariables = ({ theme }) => {
             destination: `semantic.css`,
             format: formats.semantic.name,
             filter: (token) => {
-              const isUwantedToken = R14.anyPass([R14.includes("primitives/global")])(token.filePath);
-              const isPrivateToken = R14.includes("_", token.path);
+              const isUwantedToken = R15.anyPass([R15.includes("primitives/global")])(token.filePath);
+              const isPrivateToken = R15.includes("_", token.path);
               const unwantedPaths = pathStartsWithOneOf(
                 ["size", "_size", "font-size", "line-height", "letter-spacing"],
                 token
@@ -1641,7 +1663,7 @@ var semanticVariables = ({ theme }) => {
 };
 
 // src/tokens/process/configs/size.ts
-import * as R15 from "ramda";
+import * as R16 from "ramda";
 import { outputReferencesFilter as outputReferencesFilter2 } from "style-dictionary/utils";
 var sizeVariables = ({ theme }) => {
   const selector = `:root, [data-size]`;
@@ -1664,8 +1686,8 @@ var sizeVariables = ({ theme }) => {
             destination: `size.css`,
             format: formats.size.name,
             filter: (token) => {
-              const isUwantedToken = R15.anyPass([R15.includes("primitives/global")])(token.filePath);
-              const isPrivateToken = R15.includes("_", token.path);
+              const isUwantedToken = R16.anyPass([R16.includes("primitives/global")])(token.filePath);
+              const isPrivateToken = R16.includes("_", token.path);
               return pathStartsWithOneOf(["size", "_size"], token) && !(isUwantedToken || isPrivateToken);
             }
           }
@@ -1682,7 +1704,7 @@ var sizeVariables = ({ theme }) => {
 };
 
 // src/tokens/process/configs/size-mode.ts
-import * as R16 from "ramda";
+import * as R17 from "ramda";
 var sizeModeVariables = ({ theme, size: size2 }) => {
   const selector = `:root`;
   const layer = `ds.theme.size-mode`;
@@ -1705,7 +1727,7 @@ var sizeModeVariables = ({ theme, size: size2 }) => {
             destination: `size-mode/${size2}.css`,
             format: formats.sizeMode.name,
             filter: (token) => {
-              return R16.equals(["_size", "mode-font-size"], token.path);
+              return R17.equals(["_size", "mode-font-size"], token.path);
             }
           }
         ]
@@ -1968,7 +1990,7 @@ var TypographyValues;
 
 // src/tokens/process/utils/getMultidimensionalThemes.ts
 import pc3 from "picocolors";
-import * as R17 from "ramda";
+import * as R18 from "ramda";
 
 // src/tokens/process/utils/kebab-case.ts
 function kebabCase(str) {
@@ -1981,8 +2003,8 @@ var getMultidimensionalThemes = (processed$themes, dimensions) => {
   const grouped$themes = groupThemes(processed$themes);
   const permutations = permutateThemes(grouped$themes);
   const ALL_DEPENDENT_ON = ["theme"];
-  const keys3 = R17.keys(grouped$themes);
-  const nonDependentKeys = keys3.filter((x) => ![...ALL_DEPENDENT_ON, ...dimensions].includes(x));
+  const keys4 = R18.keys(grouped$themes);
+  const nonDependentKeys = keys4.filter((x) => ![...ALL_DEPENDENT_ON, ...dimensions].includes(x));
   if (verboseLogging) {
     console.log(pc3.cyan(`\u{1F50E} Finding theme permutations for ${dimensions}`));
     console.log(pc3.cyan(`   (ignoring permutations for ${nonDependentKeys})`));
@@ -2021,7 +2043,7 @@ function groupThemes(themes) {
   }
   return groups;
 }
-var hasUnknownProps = R17.pipe(R17.values, R17.none(R17.equals("unknown")), R17.not);
+var hasUnknownProps = R18.pipe(R18.values, R18.none(R18.equals("unknown")), R18.not);
 function permutateThemes(groups) {
   const separator = "_";
   const permutations = cartesian(Object.values(groups));
@@ -2031,8 +2053,8 @@ function permutateThemes(groups) {
         const { group, name, selectedTokenSets } = theme;
         let updatedPermutation = acc.permutation;
         if (group) {
-          const groupProp = R17.lensProp(group);
-          updatedPermutation = R17.set(groupProp, name, updatedPermutation);
+          const groupProp = R18.lensProp(group);
+          updatedPermutation = R18.set(groupProp, name, updatedPermutation);
         }
         const updatedName = `${String(acc.name)}${acc ? separator : ""}${name}`;
         const sets = [...acc.selectedTokenSets, ...filterTokenSets(selectedTokenSets)];
@@ -2123,7 +2145,7 @@ var getConfigsForThemeDimensions = (getConfig, processed$themes, dimensions, opt
               obj.filePath = tokenSet;
             }
           });
-          tokenSource.tokens = R18.mergeDeepRight(tokenSource.tokens, tokensWithFilePath);
+          tokenSource.tokens = R19.mergeDeepRight(tokenSource.tokens, tokensWithFilePath);
         }
       }
     } else {
@@ -2236,24 +2258,24 @@ async function processPlatform(options) {
   buildOptions.colorGroups = colorGroups;
   if (!buildOptions.defaultColor) {
     const customColors = getCustomColors(processed$themes, colorGroups);
-    const firstMainColor = R19.head(customColors);
+    const firstMainColor = R20.head(customColors);
     buildOptions.defaultColor = firstMainColor;
   }
   if (buildOptions.defaultColor) {
     console.log(`
 \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;
+  const sizeModes2 = processed$themes.filter((x) => x.group === "size").map((x) => x.name);
+  buildOptions.sizeModes = sizeModes2;
   if (!buildOptions.defaultSize) {
-    const defaultSize = R19.head(sizeModes);
+    const defaultSize = R20.head(sizeModes2);
     buildOptions.defaultSize = defaultSize;
   }
   if (buildOptions.defaultSize) {
     console.log(`
 \u{1F4CF} Using ${pc4.blue(buildOptions.defaultSize)} as default size`);
   }
-  const buildAndSdConfigs = R19.map((buildConfig) => {
+  const buildAndSdConfigs = R20.map((buildConfig) => {
     const sdConfigs = getConfigsForThemeDimensions(buildConfig.getConfig, processed$themes, buildConfig.dimensions, {
       tokensDir,
       tokenSets
@@ -2287,7 +2309,7 @@ async function processPlatform(options) {
     typeScale: [initResult]
   };
   try {
-    for (const [buildName, { buildConfig, sdConfigs }] of R19.toPairs(buildAndSdConfigs)) {
+    for (const [buildName, { buildConfig, sdConfigs }] of R20.toPairs(buildAndSdConfigs)) {
       if (!(buildConfig.enabled?.() ?? true)) {
         continue;
       }
@@ -2299,7 +2321,7 @@ async function processPlatform(options) {
             const { config, permutation } = sdConfig;
             const modes = ["theme", ...buildConfig.dimensions];
             const modeMessage = modes.map((x) => permutation[x]).join(" - ");
-            const logMessage = R19.isNil(buildConfig.log) ? modeMessage : buildConfig?.log(sdConfig);
+            const logMessage = R20.isNil(buildConfig.log) ? modeMessage : buildConfig?.log(sdConfig);
             console.log(logMessage);
             const sdOptions = { cache: true };
             const sdExtended = await sd.extend(config);
@@ -2425,7 +2447,7 @@ ${dynamicColors}`;
 
 // src/tokens/process/output/theme.ts
 import pc6 from "picocolors";
-import * as R20 from "ramda";
+import * as R21 from "ramda";
 var defaultFileHeader2 = `build: v${package_default.version}`;
 var getFileNameWithoutExtension = (path6) => {
   const pathSegments = path6.split("/");
@@ -2440,9 +2462,9 @@ var createThemeCSSFiles = ({
     for (const buildResult of buildResults) {
       const themeName = buildResult.permutation.theme;
       const newOutputs = buildResult.formatted;
-      if (R20.isNotEmpty(newOutputs)) {
+      if (R21.isNotEmpty(newOutputs)) {
         const currentOutputs = groupedByTheme[themeName] ?? [];
-        groupedByTheme[themeName] = R20.concat(currentOutputs, newOutputs);
+        groupedByTheme[themeName] = R21.concat(currentOutputs, newOutputs);
       }
     }
   }
@@ -2458,7 +2480,7 @@ var createThemeCSSFiles = ({
     "typography/primary",
     "color/"
   ];
-  const sortByDefinedOrder = R20.sortBy((file) => {
+  const sortByDefinedOrder = R21.sortBy((file) => {
     const filePath = file.destination || "";
     const sortIndex = sortOrder.findIndex((sortElement) => {
       if (sortElement.endsWith("/")) {
@@ -2487,17 +2509,17 @@ ${fileHeader}
 */
 
 `;
-  const sortAlphabetically = R20.sort(R20.ascend((x) => x.destination || ""));
-  const sortBySize = R20.sortBy(
-    R20.pipe((s) => getFileNameWithoutExtension(s.destination ?? ""), sizeComparator)
+  const sortAlphabetically = R21.sort(R21.ascend((x) => x.destination || ""));
+  const sortBySize = R21.sortBy(
+    R21.pipe((s) => getFileNameWithoutExtension(s.destination ?? ""), sizeComparator)
   );
-  const pickOutputs = R20.map(R20.view(R20.lensProp("output")));
-  const themeCSSFile = R20.pipe(
+  const pickOutputs = R21.map(R21.view(R21.lensProp("output")));
+  const themeCSSFile = R21.pipe(
     sortAlphabetically,
     sortBySize,
     sortByDefinedOrder,
     pickOutputs,
-    R20.join("\n"),
+    R21.join("\n"),
     (content) => header + content
   );
   const themeCSSFiles = Object.entries(groupedByTheme).map(([theme, files]) => ({
@@ -2540,7 +2562,7 @@ var buildTokens = async (options) => {
     processed$themes,
     buildTokenFormats: {}
   });
-  const fileHeader = R21.join("")([
+  const fileHeader = R22.join("")([
     defaultFileHeader2,
     $designsystemet ? `
 design-tokens: v${$designsystemet.version}` : ""
@@ -2564,7 +2586,7 @@ design-tokens: v${$designsystemet.version}` : ""
 // src/tokens/create/write.ts
 import path2 from "path";
 import pc8 from "picocolors";
-import * as R22 from "ramda";
+import * as R23 from "ramda";
 
 // src/tokens/create/generators/$designsystemet.ts
 function generate$Designsystemet() {
@@ -2575,17 +2597,13 @@ function generate$Designsystemet() {
 }
 
 // src/tokens/create/generators/$metadata.ts
-function generate$Metadata(schemes, themes, colors2) {
+function generate$Metadata(schemes, themes, colors2, sizeModes2) {
   return {
     tokenSetOrder: [
       "primitives/globals",
-      "primitives/modes/size/small",
-      "primitives/modes/size/medium",
-      "primitives/modes/size/large",
+      ...sizeModes2.map((size2) => `primitives/modes/size/${size2}`),
       "primitives/modes/size/global",
-      "primitives/modes/typography/size/small",
-      "primitives/modes/typography/size/medium",
-      "primitives/modes/typography/size/large",
+      ...sizeModes2.map((size2) => `primitives/modes/typography/size/${size2}`),
       ...themes.map((theme) => `primitives/modes/typography/primary/${theme}`),
       ...themes.map((theme) => `primitives/modes/typography/secondary/${theme}`),
       ...schemes.flatMap((scheme) => [...themes.map((theme) => `primitives/modes/color-scheme/${scheme}/${theme}`)]),
@@ -2607,9 +2625,9 @@ async function createHash(text, algo = "SHA-1") {
     (byte) => byte.toString(16).padStart(2, "0")
   ).join("");
 }
-async function generate$Themes(colorSchemes, themes, colors2) {
+async function generate$Themes(colorSchemes, themes, colors2, sizeModes2) {
   return [
-    ...generateSizeGroup(),
+    ...generateSizeGroup(sizeModes2),
     ...await generateThemesGroup(themes),
     ...generateTypographyGroup(themes),
     ...generateColorSchemesGroup(colorSchemes, themes),
@@ -2618,7 +2636,7 @@ async function generate$Themes(colorSchemes, themes, colors2) {
     ...await generateColorGroup("support", colors2)
   ];
 }
-function generateSizeGroup() {
+function generateSizeGroup(_sizes) {
   return [
     {
       id: "8b2c8cc86611a34b135cb22948666779361fd729",
@@ -2779,6 +2797,7 @@ var writeTokens = async (options) => {
   const $metadataPath = path2.join(targetDir, "$metadata.json");
   const $designsystemetPath = path2.join(targetDir, "$designsystemet.jsonc");
   let themeObjects = [];
+  const sizeModes2 = ["small", "medium", "large"];
   await mkdir(targetDir, dry);
   try {
     const $themes2 = await readFile($themesPath);
@@ -2787,18 +2806,18 @@ var writeTokens = async (options) => {
     }
   } catch (_error) {
   }
-  const concatThemeNames = R22.pipe(
-    R22.filter((obj) => R22.toLower(obj.group || "") === "theme"),
-    R22.map(R22.prop("name")),
+  const concatThemeNames = R23.pipe(
+    R23.filter((obj) => R23.toLower(obj.group || "") === "theme"),
+    R23.map(R23.prop("name")),
     // New theme is added to the end of the list so we keep the same order from config and Token Studio
-    R22.append(themeName),
-    R22.uniq
+    R23.append(themeName),
+    R23.uniq
   );
   const themes = concatThemeNames(themeObjects);
   console.log(`
 Themes: ${pc8.blue(themes.join(", "))}`);
-  const $themes = await generate$Themes(["dark", "light"], themes, colors2);
-  const $metadata = generate$Metadata(["dark", "light"], themes, colors2);
+  const $themes = await generate$Themes(["dark", "light"], themes, colors2, sizeModes2);
+  const $metadata = generate$Metadata(["dark", "light"], themes, colors2, sizeModes2);
   const $designsystemet = generate$Designsystemet();
   await writeFile($themesPath, stringify($themes), dry);
   await writeFile($metadataPath, stringify($metadata), dry);
@@ -2812,11 +2831,94 @@ Themes: ${pc8.blue(themes.join(", "))}`);
   console.log(`Finished creating Designsystem design tokens in ${pc8.green(outDir)} for theme ${pc8.blue(themeName)}`);
 };
 
-// src/tokens/create/defaults.ts
-import * as R23 from "ramda";
+// src/tokens/create/generators/primitives/color-scheme.ts
+import * as R24 from "ramda";
+var generateColor = (colorArray, overrides) => {
+  const obj = {};
+  const $type = "color";
+  for (const index in colorArray) {
+    const position = Number(index) + 1;
+    const overrideValue = overrides?.[position];
+    obj[position] = {
+      $type,
+      $value: overrideValue || colorArray[index].hex
+    };
+  }
+  return obj;
+};
+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 neutralColorScale = generateColorScale(colors2.neutral, colorScheme2);
+  const neutral = generateColor(neutralColorScale, createColorOverrides("neutral"));
+  const baseColorsWithOverrides = {
+    ...baseColors,
+    ...overrides?.severity
+  };
+  const globalColors = R24.mapObjIndexed(
+    (color, colorName) => generateColor(generateColorScale(color, colorScheme2), createColorOverrides(colorName)),
+    baseColorsWithOverrides
+  );
+  const linkColor = generateColor(generateColorScale(dsLinkColor, colorScheme2));
+  const defaultLinkVisited = linkColor[12];
+  const linkOverride = overrides?.linkVisited?.[colorScheme2] ? { $type: "color", $value: overrides.linkVisited[colorScheme2] } : void 0;
+  const defaultFocusInner = neutralColorScale[0].hex;
+  const defaultFocusOuter = neutralColorScale[10].hex;
+  const focusInnerOverride = overrides?.focus?.inner?.[colorScheme2];
+  const focusOuterOverride = overrides?.focus?.outer?.[colorScheme2];
+  return {
+    [themeName]: {
+      ...main,
+      ...support,
+      neutral,
+      ...globalColors,
+      link: {
+        visited: linkOverride || defaultLinkVisited
+      },
+      focus: {
+        inner: {
+          $type: "color",
+          $value: focusInnerOverride || defaultFocusInner
+        },
+        outer: {
+          $type: "color",
+          $value: focusOuterOverride || defaultFocusOuter
+        }
+      }
+    }
+  };
+};
 
-// src/tokens/template/design-tokens/primitives/globals.json with { type: 'json' }
-var globals_default = {
+// src/tokens/create/generators/primitives/globals.ts
+var globals = {
   "border-width": {
     "1": {
       $type: "borderWidth",
@@ -2959,9 +3061,10 @@ var globals_default = {
     }
   }
 };
+var generateGlobals = () => globals;
 
-// src/tokens/template/design-tokens/primitives/modes/size/global.json with { type: 'json' }
-var global_default = {
+// src/tokens/create/generators/primitives/size.ts
+var global = {
   _size: {
     "0": {
       $type: "dimension",
@@ -3061,540 +3164,444 @@ var global_default = {
     }
   }
 };
-
-// src/tokens/template/design-tokens/primitives/modes/size/large.json with { type: 'json' }
-var large_default = {
-  size: {
-    "_mode-font-size": {
-      $type: "dimension",
-      $value: "21"
-    },
-    _base: {
-      $type: "dimension",
-      $value: "18"
-    },
-    _step: {
-      $type: "dimension",
-      $value: "4"
+var sizeModes = {
+  large: {
+    size: {
+      "_mode-font-size": {
+        $type: "dimension",
+        $value: "21"
+      },
+      _base: {
+        $type: "dimension",
+        $value: "18"
+      },
+      _step: {
+        $type: "dimension",
+        $value: "4"
+      }
+    }
+  },
+  medium: {
+    size: {
+      "_mode-font-size": {
+        $type: "dimension",
+        $value: "18"
+      },
+      _base: {
+        $type: "dimension",
+        $value: "18"
+      },
+      _step: {
+        $type: "dimension",
+        $value: "4"
+      }
+    }
+  },
+  small: {
+    size: {
+      "_mode-font-size": {
+        $type: "dimension",
+        $value: "16"
+      },
+      _base: {
+        $type: "dimension",
+        $value: "18"
+      },
+      _step: {
+        $type: "dimension",
+        $value: "4"
+      }
     }
   }
 };
+var generateSize = (size2) => sizeModes[size2];
+var generateSizeGlobal = () => global;
 
-// src/tokens/template/design-tokens/primitives/modes/size/medium.json with { type: 'json' }
-var medium_default = {
-  size: {
-    "_mode-font-size": {
-      $type: "dimension",
-      $value: "18"
-    },
-    _base: {
-      $type: "dimension",
-      $value: "18"
+// src/tokens/create/generators/primitives/typography.ts
+var generateTypography = (themeName, { fontFamily }) => ({
+  [themeName]: {
+    "font-family": {
+      $type: "fontFamilies",
+      $value: fontFamily
     },
-    _step: {
-      $type: "dimension",
-      $value: "4"
+    "font-weight": {
+      medium: {
+        $type: "fontWeights",
+        $value: "Medium"
+      },
+      semibold: {
+        $type: "fontWeights",
+        $value: "Semi bold"
+      },
+      regular: {
+        $type: "fontWeights",
+        $value: "Regular"
+      }
     }
   }
+});
+var generateFontSizes = (size2) => fontSizes[size2];
+var lineHeights = {
+  sm: {
+    $type: "lineHeights",
+    $value: "130%"
+  },
+  md: {
+    $type: "lineHeights",
+    $value: "150%"
+  },
+  lg: {
+    $type: "lineHeights",
+    $value: "170%"
+  }
 };
-
-// src/tokens/template/design-tokens/primitives/modes/size/small.json with { type: 'json' }
-var small_default = {
-  size: {
-    "_mode-font-size": {
-      $type: "dimension",
-      $value: "16"
-    },
-    _base: {
-      $type: "dimension",
-      $value: "18"
-    },
-    _step: {
-      $type: "dimension",
-      $value: "4"
-    }
+var letterSpacings = {
+  "1": {
+    $type: "letterSpacing",
+    $value: "-1%"
+  },
+  "2": {
+    $type: "letterSpacing",
+    $value: "-0.5%"
+  },
+  "3": {
+    $type: "letterSpacing",
+    $value: "-0.25%"
+  },
+  "4": {
+    $type: "letterSpacing",
+    $value: "-0.15%"
+  },
+  "5": {
+    $type: "letterSpacing",
+    $value: "0%"
+  },
+  "6": {
+    $type: "letterSpacing",
+    $value: "0.15%"
+  },
+  "7": {
+    $type: "letterSpacing",
+    $value: "0.25%"
+  },
+  "8": {
+    $type: "letterSpacing",
+    $value: "0.5%"
+  },
+  "9": {
+    $type: "letterSpacing",
+    $value: "1.5%"
   }
 };
-
-// src/tokens/template/design-tokens/primitives/modes/typography/size/large.json with { type: 'json' }
-var large_default2 = {
-  "line-height": {
-    sm: {
-      $type: "lineHeights",
-      $value: "130%"
-    },
-    md: {
-      $type: "lineHeights",
-      $value: "150%"
+var fontSizes = {
+  large: {
+    "line-height": lineHeights,
+    "font-size": {
+      "1": {
+        $type: "fontSizes",
+        $value: "13"
+      },
+      "2": {
+        $type: "fontSizes",
+        $value: "16"
+      },
+      "3": {
+        $type: "fontSizes",
+        $value: "18"
+      },
+      "4": {
+        $type: "fontSizes",
+        $value: "21"
+      },
+      "5": {
+        $type: "fontSizes",
+        $value: "24"
+      },
+      "6": {
+        $type: "fontSizes",
+        $value: "30"
+      },
+      "7": {
+        $type: "fontSizes",
+        $value: "36"
+      },
+      "8": {
+        $type: "fontSizes",
+        $value: "48"
+      },
+      "9": {
+        $type: "fontSizes",
+        $value: "60"
+      },
+      "10": {
+        $type: "fontSizes",
+        $value: "72"
+      }
     },
-    lg: {
-      $type: "lineHeights",
-      $value: "170%"
-    }
+    "letter-spacing": letterSpacings
   },
-  "font-size": {
-    "1": {
-      $type: "fontSizes",
-      $value: "13"
-    },
-    "2": {
-      $type: "fontSizes",
-      $value: "16"
-    },
-    "3": {
-      $type: "fontSizes",
-      $value: "18"
-    },
-    "4": {
-      $type: "fontSizes",
-      $value: "21"
-    },
-    "5": {
-      $type: "fontSizes",
-      $value: "24"
-    },
-    "6": {
-      $type: "fontSizes",
-      $value: "30"
-    },
-    "7": {
-      $type: "fontSizes",
-      $value: "36"
-    },
-    "8": {
-      $type: "fontSizes",
-      $value: "48"
-    },
-    "9": {
-      $type: "fontSizes",
-      $value: "60"
+  medium: {
+    "line-height": lineHeights,
+    "font-size": {
+      "1": {
+        $type: "fontSizes",
+        $value: "12"
+      },
+      "2": {
+        $type: "fontSizes",
+        $value: "14"
+      },
+      "3": {
+        $type: "fontSizes",
+        $value: "16"
+      },
+      "4": {
+        $type: "fontSizes",
+        $value: "18"
+      },
+      "5": {
+        $type: "fontSizes",
+        $value: "21"
+      },
+      "6": {
+        $type: "fontSizes",
+        $value: "24"
+      },
+      "7": {
+        $type: "fontSizes",
+        $value: "30"
+      },
+      "8": {
+        $type: "fontSizes",
+        $value: "36"
+      },
+      "9": {
+        $type: "fontSizes",
+        $value: "48"
+      },
+      "10": {
+        $type: "fontSizes",
+        $value: "60"
+      }
     },
-    "10": {
-      $type: "fontSizes",
-      $value: "72"
-    }
+    "letter-spacing": letterSpacings
   },
-  "letter-spacing": {
-    "1": {
-      $type: "letterSpacing",
-      $value: "-1%"
-    },
-    "2": {
-      $type: "letterSpacing",
-      $value: "-0.5%"
-    },
-    "3": {
-      $type: "letterSpacing",
-      $value: "-0.25%"
-    },
-    "4": {
-      $type: "letterSpacing",
-      $value: "-0.15%"
-    },
-    "5": {
-      $type: "letterSpacing",
-      $value: "0%"
-    },
-    "6": {
-      $type: "letterSpacing",
-      $value: "0.15%"
-    },
-    "7": {
-      $type: "letterSpacing",
-      $value: "0.25%"
-    },
-    "8": {
-      $type: "letterSpacing",
-      $value: "0.5%"
+  small: {
+    "line-height": lineHeights,
+    "font-size": {
+      "1": {
+        $type: "fontSizes",
+        $value: "11"
+      },
+      "2": {
+        $type: "fontSizes",
+        $value: "13"
+      },
+      "3": {
+        $type: "fontSizes",
+        $value: "14"
+      },
+      "4": {
+        $type: "fontSizes",
+        $value: "16"
+      },
+      "5": {
+        $type: "fontSizes",
+        $value: "18"
+      },
+      "6": {
+        $type: "fontSizes",
+        $value: "21"
+      },
+      "7": {
+        $type: "fontSizes",
+        $value: "24"
+      },
+      "8": {
+        $type: "fontSizes",
+        $value: "30"
+      },
+      "9": {
+        $type: "fontSizes",
+        $value: "36"
+      },
+      "10": {
+        $type: "fontSizes",
+        $value: "48"
+      }
     },
-    "9": {
-      $type: "letterSpacing",
-      $value: "1.5%"
-    }
+    "letter-spacing": letterSpacings
   }
 };
 
-// src/tokens/template/design-tokens/primitives/modes/typography/size/medium.json with { type: 'json' }
-var medium_default2 = {
-  "line-height": {
-    sm: {
-      $type: "lineHeights",
-      $value: "130%"
-    },
-    md: {
-      $type: "lineHeights",
-      $value: "150%"
-    },
-    lg: {
-      $type: "lineHeights",
-      $value: "170%"
+// src/tokens/create/generators/semantic/color.ts
+import * as R25 from "ramda";
+var generateSemanticColors = (colors2, _themeName) => {
+  const mainColorNames = Object.keys(colors2.main);
+  const supportColorNames = Object.keys(colors2.support);
+  const customColors = [...mainColorNames, "neutral", ...supportColorNames];
+  const allColors = [...customColors, ...baseColorNames];
+  const semanticColorTokens = allColors.map((colorName) => [colorName, generateColorScaleTokens(colorName)]);
+  return {
+    ...baseColorTemplate,
+    color: {
+      ...Object.fromEntries(semanticColorTokens),
+      ...baseColorTemplate.color
     }
-  },
-  "font-size": {
-    "1": {
-      $type: "fontSizes",
-      $value: "12"
-    },
-    "2": {
-      $type: "fontSizes",
-      $value: "14"
-    },
-    "3": {
-      $type: "fontSizes",
-      $value: "16"
-    },
-    "4": {
-      $type: "fontSizes",
-      $value: "18"
-    },
-    "5": {
-      $type: "fontSizes",
-      $value: "21"
-    },
-    "6": {
-      $type: "fontSizes",
-      $value: "24"
-    },
-    "7": {
-      $type: "fontSizes",
-      $value: "30"
-    },
-    "8": {
-      $type: "fontSizes",
-      $value: "36"
-    },
-    "9": {
-      $type: "fontSizes",
-      $value: "48"
-    },
-    "10": {
-      $type: "fontSizes",
-      $value: "60"
+  };
+};
+var baseColorTemplate = {
+  color: {
+    focus: {
+      inner: {
+        $type: "color",
+        $value: "{color.focus.inner-color}"
+      },
+      outer: {
+        $type: "color",
+        $value: "{color.focus.outer-color}"
+      }
     }
   },
-  "letter-spacing": {
-    "1": {
-      $type: "letterSpacing",
-      $value: "-1%"
-    },
-    "2": {
-      $type: "letterSpacing",
-      $value: "-0.5%"
-    },
-    "3": {
-      $type: "letterSpacing",
-      $value: "-0.25%"
-    },
-    "4": {
-      $type: "letterSpacing",
-      $value: "-0.15%"
-    },
-    "5": {
-      $type: "letterSpacing",
-      $value: "0%"
-    },
-    "6": {
-      $type: "letterSpacing",
-      $value: "0.15%"
-    },
-    "7": {
-      $type: "letterSpacing",
-      $value: "0.25%"
-    },
-    "8": {
-      $type: "letterSpacing",
-      $value: "0.5%"
-    },
-    "9": {
-      $type: "letterSpacing",
-      $value: "1.5%"
+  link: {
+    color: {
+      visited: {
+        $type: "color",
+        $value: "{color.link.visited}"
+      }
     }
   }
 };
+var generateColorScaleTokens = (colorName) => {
+  const colorScale = {};
+  for (const [colorSemantic, colorNumber] of R25.toPairs(semanticColorMap)) {
+    colorScale[colorSemantic] = {
+      $type: "color",
+      $value: `{color.${colorName}.${colorNumber}}`
+    };
+  }
+  return colorScale;
+};
 
-// src/tokens/template/design-tokens/primitives/modes/typography/size/small.json with { type: 'json' }
-var small_default2 = {
-  "line-height": {
-    sm: {
-      $type: "lineHeights",
-      $value: "130%"
-    },
-    md: {
-      $type: "lineHeights",
-      $value: "150%"
-    },
-    lg: {
-      $type: "lineHeights",
-      $value: "170%"
-    }
-  },
-  "font-size": {
-    "1": {
-      $type: "fontSizes",
-      $value: "11"
-    },
-    "2": {
-      $type: "fontSizes",
-      $value: "13"
-    },
-    "3": {
-      $type: "fontSizes",
-      $value: "14"
-    },
-    "4": {
-      $type: "fontSizes",
-      $value: "16"
-    },
-    "5": {
-      $type: "fontSizes",
-      $value: "18"
-    },
-    "6": {
-      $type: "fontSizes",
-      $value: "21"
-    },
-    "7": {
-      $type: "fontSizes",
-      $value: "24"
-    },
-    "8": {
-      $type: "fontSizes",
-      $value: "30"
-    },
-    "9": {
-      $type: "fontSizes",
-      $value: "36"
-    },
-    "10": {
-      $type: "fontSizes",
-      $value: "48"
-    }
-  },
-  "letter-spacing": {
-    "1": {
-      $type: "letterSpacing",
-      $value: "-1%"
-    },
-    "2": {
-      $type: "letterSpacing",
-      $value: "-0.5%"
-    },
-    "3": {
-      $type: "letterSpacing",
-      $value: "-0.25%"
-    },
-    "4": {
-      $type: "letterSpacing",
-      $value: "-0.15%"
-    },
-    "5": {
-      $type: "letterSpacing",
-      $value: "0%"
-    },
-    "6": {
-      $type: "letterSpacing",
-      $value: "0.15%"
-    },
-    "7": {
-      $type: "letterSpacing",
-      $value: "0.25%"
-    },
-    "8": {
-      $type: "letterSpacing",
-      $value: "0.5%"
-    },
-    "9": {
-      $type: "letterSpacing",
-      $value: "1.5%"
+// src/tokens/create/generators/semantic/color-modes.ts
+var generateColorModes = (colors2, _themeName) => {
+  const mainColorNames = Object.keys(colors2.main);
+  const supportColorNames = Object.keys(colors2.support);
+  const modes = {
+    "main-color": {},
+    "support-color": {}
+  };
+  const categories = [
+    ["main-color", mainColorNames],
+    ["support-color", supportColorNames]
+  ];
+  for (const [colorCategory2, colorNames2] of categories) {
+    for (const colorName of colorNames2) {
+      const category = colorCategory2.replace("-color", "");
+      const customColorTokens = {
+        color: {
+          [category]: generateColorScaleTokens2(colorName)
+        }
+      };
+      modes[colorCategory2][colorName] = customColorTokens;
     }
   }
+  return modes;
+};
+var generateColorScaleTokens2 = (colorName) => {
+  const colorScale = {};
+  for (const colorSemantic of semanticColorNames) {
+    colorScale[colorSemantic] = {
+      $type: "color",
+      $value: `{color.${colorName}.${colorSemantic}}`
+    };
+  }
+  return colorScale;
 };
 
-// src/tokens/template/design-tokens/semantic/style.json with { type: 'json' }
-var style_default = {
-  typography: {
-    heading: {
-      "2xl": {
-        $type: "typography",
-        $value: {
-          fontFamily: "{font-family}",
-          fontWeight: "{font-weight.medium}",
-          lineHeight: "{line-height.sm}",
-          fontSize: "{font-size.10}",
-          letterSpacing: "{letter-spacing.1}"
-        }
-      },
-      xl: {
-        $type: "typography",
-        $value: {
-          fontFamily: "{font-family}",
-          fontWeight: "{font-weight.medium}",
-          lineHeight: "{line-height.sm}",
-          fontSize: "{font-size.9}",
-          letterSpacing: "{letter-spacing.1}"
-        }
-      },
-      lg: {
-        $type: "typography",
-        $value: {
-          fontFamily: "{font-family}",
-          fontWeight: "{font-weight.medium}",
-          lineHeight: "{line-height.sm}",
-          fontSize: "{font-size.8}",
-          letterSpacing: "{letter-spacing.2}"
-        }
-      },
-      md: {
-        $type: "typography",
-        $value: {
-          fontFamily: "{font-family}",
-          fontWeight: "{font-weight.medium}",
-          lineHeight: "{line-height.sm}",
-          fontSize: "{font-size.7}",
-          letterSpacing: "{letter-spacing.3}"
-        }
-      },
-      sm: {
-        $type: "typography",
-        $value: {
-          fontFamily: "{font-family}",
-          fontWeight: "{font-weight.medium}",
-          lineHeight: "{line-height.sm}",
-          fontSize: "{font-size.6}",
-          letterSpacing: "{letter-spacing.5}"
-        }
-      },
-      xs: {
-        $type: "typography",
-        $value: {
-          fontFamily: "{font-family}",
-          fontWeight: "{font-weight.medium}",
-          lineHeight: "{line-height.sm}",
-          fontSize: "{font-size.5}",
-          letterSpacing: "{letter-spacing.6}"
-        }
-      },
-      "2xs": {
-        $type: "typography",
-        $value: {
-          fontFamily: "{font-family}",
-          fontWeight: "{font-weight.medium}",
-          lineHeight: "{line-height.sm}",
-          fontSize: "{font-size.4}",
-          letterSpacing: "{letter-spacing.6}"
-        }
-      }
-    },
-    body: {
-      xl: {
-        $type: "typography",
-        $value: {
-          fontFamily: "{font-family}",
-          fontWeight: "{font-weight.regular}",
-          lineHeight: "{line-height.md}",
-          fontSize: "{font-size.6}",
-          letterSpacing: "{letter-spacing.8}"
-        }
-      },
-      lg: {
-        $type: "typography",
-        $value: {
-          fontFamily: "{font-family}",
-          fontWeight: "{font-weight.regular}",
-          lineHeight: "{line-height.md}",
-          fontSize: "{font-size.5}",
-          letterSpacing: "{letter-spacing.8}"
-        }
-      },
-      md: {
-        $type: "typography",
-        $value: {
-          fontFamily: "{font-family}",
-          fontWeight: "{font-weight.regular}",
-          lineHeight: "{line-height.md}",
-          fontSize: "{font-size.4}",
-          letterSpacing: "{letter-spacing.8}"
-        }
-      },
-      sm: {
-        $type: "typography",
-        $value: {
-          fontFamily: "{font-family}",
-          fontWeight: "{font-weight.regular}",
-          lineHeight: "{line-height.md}",
-          fontSize: "{font-size.3}",
-          letterSpacing: "{letter-spacing.7}"
-        }
-      },
-      xs: {
-        $type: "typography",
-        $value: {
-          fontFamily: "{font-family}",
-          fontWeight: "{font-weight.regular}",
-          lineHeight: "{line-height.md}",
-          fontSize: "{font-size.2}",
-          letterSpacing: "{letter-spacing.6}"
-        }
-      },
-      short: {
+// src/tokens/create/generators/semantic/style.ts
+function generateSemanticStyle() {
+  return {
+    typography: {
+      heading: {
+        "2xl": {
+          $type: "typography",
+          $value: {
+            fontFamily: "{font-family}",
+            fontWeight: "{font-weight.medium}",
+            lineHeight: "{line-height.sm}",
+            fontSize: "{font-size.10}",
+            letterSpacing: "{letter-spacing.1}"
+          }
+        },
         xl: {
           $type: "typography",
           $value: {
             fontFamily: "{font-family}",
-            fontWeight: "{font-weight.regular}",
+            fontWeight: "{font-weight.medium}",
             lineHeight: "{line-height.sm}",
-            fontSize: "{font-size.6}",
-            letterSpacing: "{letter-spacing.8}"
+            fontSize: "{font-size.9}",
+            letterSpacing: "{letter-spacing.1}"
           }
         },
         lg: {
           $type: "typography",
           $value: {
             fontFamily: "{font-family}",
-            fontWeight: "{font-weight.regular}",
+            fontWeight: "{font-weight.medium}",
             lineHeight: "{line-height.sm}",
-            fontSize: "{font-size.5}",
-            letterSpacing: "{letter-spacing.8}"
+            fontSize: "{font-size.8}",
+            letterSpacing: "{letter-spacing.2}"
           }
         },
         md: {
           $type: "typography",
           $value: {
             fontFamily: "{font-family}",
-            fontWeight: "{font-weight.regular}",
+            fontWeight: "{font-weight.medium}",
             lineHeight: "{line-height.sm}",
-            fontSize: "{font-size.4}",
-            letterSpacing: "{letter-spacing.8}"
+            fontSize: "{font-size.7}",
+            letterSpacing: "{letter-spacing.3}"
           }
         },
         sm: {
           $type: "typography",
           $value: {
             fontFamily: "{font-family}",
-            fontWeight: "{font-weight.regular}",
+            fontWeight: "{font-weight.medium}",
             lineHeight: "{line-height.sm}",
-            fontSize: "{font-size.3}",
-            letterSpacing: "{letter-spacing.7}"
+            fontSize: "{font-size.6}",
+            letterSpacing: "{letter-spacing.5}"
           }
         },
         xs: {
           $type: "typography",
           $value: {
             fontFamily: "{font-family}",
-            fontWeight: "{font-weight.regular}",
+            fontWeight: "{font-weight.medium}",
             lineHeight: "{line-height.sm}",
-            fontSize: "{font-size.2}",
+            fontSize: "{font-size.5}",
+            letterSpacing: "{letter-spacing.6}"
+          }
+        },
+        "2xs": {
+          $type: "typography",
+          $value: {
+            fontFamily: "{font-family}",
+            fontWeight: "{font-weight.medium}",
+            lineHeight: "{line-height.sm}",
+            fontSize: "{font-size.4}",
             letterSpacing: "{letter-spacing.6}"
           }
         }
       },
-      long: {
+      body: {
         xl: {
           $type: "typography",
           $value: {
             fontFamily: "{font-family}",
             fontWeight: "{font-weight.regular}",
-            lineHeight: "{line-height.lg}",
+            lineHeight: "{line-height.md}",
             fontSize: "{font-size.6}",
             letterSpacing: "{letter-spacing.8}"
           }
@@ -3604,7 +3611,7 @@ var style_default = {
           $value: {
             fontFamily: "{font-family}",
             fontWeight: "{font-weight.regular}",
-            lineHeight: "{line-height.lg}",
+            lineHeight: "{line-height.md}",
             fontSize: "{font-size.5}",
             letterSpacing: "{letter-spacing.8}"
           }
@@ -3614,7 +3621,7 @@ var style_default = {
           $value: {
             fontFamily: "{font-family}",
             fontWeight: "{font-weight.regular}",
-            lineHeight: "{line-height.lg}",
+            lineHeight: "{line-height.md}",
             fontSize: "{font-size.4}",
             letterSpacing: "{letter-spacing.8}"
           }
@@ -3624,7 +3631,7 @@ var style_default = {
           $value: {
             fontFamily: "{font-family}",
             fontWeight: "{font-weight.regular}",
-            lineHeight: "{line-height.lg}",
+            lineHeight: "{line-height.md}",
             fontSize: "{font-size.3}",
             letterSpacing: "{letter-spacing.7}"
           }
@@ -3634,505 +3641,333 @@ var style_default = {
           $value: {
             fontFamily: "{font-family}",
             fontWeight: "{font-weight.regular}",
-            lineHeight: "{line-height.lg}",
+            lineHeight: "{line-height.md}",
             fontSize: "{font-size.2}",
             letterSpacing: "{letter-spacing.6}"
           }
+        },
+        short: {
+          xl: {
+            $type: "typography",
+            $value: {
+              fontFamily: "{font-family}",
+              fontWeight: "{font-weight.regular}",
+              lineHeight: "{line-height.sm}",
+              fontSize: "{font-size.6}",
+              letterSpacing: "{letter-spacing.8}"
+            }
+          },
+          lg: {
+            $type: "typography",
+            $value: {
+              fontFamily: "{font-family}",
+              fontWeight: "{font-weight.regular}",
+              lineHeight: "{line-height.sm}",
+              fontSize: "{font-size.5}",
+              letterSpacing: "{letter-spacing.8}"
+            }
+          },
+          md: {
+            $type: "typography",
+            $value: {
+              fontFamily: "{font-family}",
+              fontWeight: "{font-weight.regular}",
+              lineHeight: "{line-height.sm}",
+              fontSize: "{font-size.4}",
+              letterSpacing: "{letter-spacing.8}"
+            }
+          },
+          sm: {
+            $type: "typography",
+            $value: {
+              fontFamily: "{font-family}",
+              fontWeight: "{font-weight.regular}",
+              lineHeight: "{line-height.sm}",
+              fontSize: "{font-size.3}",
+              letterSpacing: "{letter-spacing.7}"
+            }
+          },
+          xs: {
+            $type: "typography",
+            $value: {
+              fontFamily: "{font-family}",
+              fontWeight: "{font-weight.regular}",
+              lineHeight: "{line-height.sm}",
+              fontSize: "{font-size.2}",
+              letterSpacing: "{letter-spacing.6}"
+            }
+          }
+        },
+        long: {
+          xl: {
+            $type: "typography",
+            $value: {
+              fontFamily: "{font-family}",
+              fontWeight: "{font-weight.regular}",
+              lineHeight: "{line-height.lg}",
+              fontSize: "{font-size.6}",
+              letterSpacing: "{letter-spacing.8}"
+            }
+          },
+          lg: {
+            $type: "typography",
+            $value: {
+              fontFamily: "{font-family}",
+              fontWeight: "{font-weight.regular}",
+              lineHeight: "{line-height.lg}",
+              fontSize: "{font-size.5}",
+              letterSpacing: "{letter-spacing.8}"
+            }
+          },
+          md: {
+            $type: "typography",
+            $value: {
+              fontFamily: "{font-family}",
+              fontWeight: "{font-weight.regular}",
+              lineHeight: "{line-height.lg}",
+              fontSize: "{font-size.4}",
+              letterSpacing: "{letter-spacing.8}"
+            }
+          },
+          sm: {
+            $type: "typography",
+            $value: {
+              fontFamily: "{font-family}",
+              fontWeight: "{font-weight.regular}",
+              lineHeight: "{line-height.lg}",
+              fontSize: "{font-size.3}",
+              letterSpacing: "{letter-spacing.7}"
+            }
+          },
+          xs: {
+            $type: "typography",
+            $value: {
+              fontFamily: "{font-family}",
+              fontWeight: "{font-weight.regular}",
+              lineHeight: "{line-height.lg}",
+              fontSize: "{font-size.2}",
+              letterSpacing: "{letter-spacing.6}"
+            }
+          }
         }
       }
-    }
-  },
-  opacity: {
-    disabled: {
-      $type: "opacity",
-      $value: "{opacity.30}"
-    }
-  },
-  "border-width": {
-    default: {
-      $type: "borderWidth",
-      $value: "{border-width.1}"
     },
-    focus: {
-      $type: "borderWidth",
-      $value: "{border-width.3}"
-    }
-  },
-  shadow: {
-    xs: {
-      $type: "boxShadow",
-      $value: "{shadow.100}"
-    },
-    sm: {
-      $type: "boxShadow",
-      $value: "{shadow.200}"
-    },
-    md: {
-      $type: "boxShadow",
-      $value: "{shadow.300}"
-    },
-    lg: {
-      $type: "boxShadow",
-      $value: "{shadow.400}"
-    },
-    xl: {
-      $type: "boxShadow",
-      $value: "{shadow.500}"
-    }
-  },
-  "border-radius": {
-    sm: {
-      $type: "dimension",
-      $value: "{border-radius.1}"
-    },
-    md: {
-      $type: "dimension",
-      $value: "{border-radius.2}"
-    },
-    lg: {
-      $type: "dimension",
-      $value: "{border-radius.3}"
-    },
-    xl: {
-      $type: "dimension",
-      $value: "{border-radius.4}"
-    },
-    default: {
-      $type: "dimension",
-      $value: "{border-radius.5}"
-    },
-    full: {
-      $type: "dimension",
-      $value: "{border-radius.6}"
-    }
-  },
-  size: {
-    "0": {
-      $type: "dimension",
-      $value: "{_size.0}"
-    },
-    "1": {
-      $type: "dimension",
-      $value: "{_size.1}"
-    },
-    "2": {
-      $type: "dimension",
-      $value: "{_size.2}"
-    },
-    "3": {
-      $type: "dimension",
-      $value: "{_size.3}"
-    },
-    "4": {
-      $type: "dimension",
-      $value: "{_size.4}"
-    },
-    "5": {
-      $type: "dimension",
-      $value: "{_size.5}"
-    },
-    "6": {
-      $type: "dimension",
-      $value: "{_size.6}"
-    },
-    "7": {
-      $type: "dimension",
-      $value: "{_size.7}"
-    },
-    "8": {
-      $type: "dimension",
-      $value: "{_size.8}"
-    },
-    "9": {
-      $type: "dimension",
-      $value: "{_size.9}"
-    },
-    "10": {
-      $type: "dimension",
-      $value: "{_size.10}"
-    },
-    "11": {
-      $type: "dimension",
-      $value: "{_size.11}"
-    },
-    "12": {
-      $type: "dimension",
-      $value: "{_size.12}"
-    },
-    "13": {
-      $type: "dimension",
-      $value: "{_size.13}"
-    },
-    "14": {
-      $type: "dimension",
-      $value: "{_size.14}"
-    },
-    "15": {
-      $type: "dimension",
-      $value: "{_size.15}"
+    opacity: {
+      disabled: {
+        $type: "opacity",
+        $value: "{opacity.30}"
+      }
     },
-    "18": {
-      $type: "dimension",
-      $value: "{_size.18}"
+    "border-width": {
+      default: {
+        $type: "borderWidth",
+        $value: "{border-width.1}"
+      },
+      focus: {
+        $type: "borderWidth",
+        $value: "{border-width.3}"
+      }
     },
-    "22": {
-      $type: "dimension",
-      $value: "{_size.22}"
+    shadow: {
+      xs: {
+        $type: "boxShadow",
+        $value: "{shadow.100}"
+      },
+      sm: {
+        $type: "boxShadow",
+        $value: "{shadow.200}"
+      },
+      md: {
+        $type: "boxShadow",
+        $value: "{shadow.300}"
+      },
+      lg: {
+        $type: "boxShadow",
+        $value: "{shadow.400}"
+      },
+      xl: {
+        $type: "boxShadow",
+        $value: "{shadow.500}"
+      }
     },
-    "26": {
-      $type: "dimension",
-      $value: "{_size.26}"
+    "border-radius": {
+      sm: {
+        $type: "dimension",
+        $value: "{border-radius.1}"
+      },
+      md: {
+        $type: "dimension",
+        $value: "{border-radius.2}"
+      },
+      lg: {
+        $type: "dimension",
+        $value: "{border-radius.3}"
+      },
+      xl: {
+        $type: "dimension",
+        $value: "{border-radius.4}"
+      },
+      default: {
+        $type: "dimension",
+        $value: "{border-radius.5}"
+      },
+      full: {
+        $type: "dimension",
+        $value: "{border-radius.6}"
+      }
     },
-    "30": {
-      $type: "dimension",
-      $value: "{_size.30}"
-    }
-  }
-};
-
-// src/tokens/create/defaults.ts
-var defaultTokens = {
-  "primitives/globals": globals_default,
-  "primitives/modes/size/small": small_default,
-  "primitives/modes/size/medium": medium_default,
-  "primitives/modes/size/large": large_default,
-  "primitives/modes/size/global": global_default,
-  "primitives/modes/typography/size/small": small_default2,
-  "primitives/modes/typography/size/medium": medium_default2,
-  "primitives/modes/typography/size/large": large_default2,
-  "semantic/style": style_default
-};
-var getDefaultTokens = (tokenSets) => Object.entries(R23.pick(tokenSets, defaultTokens));
-var getDefaultToken = (tokenPath) => {
-  return [tokenPath, defaultTokens[tokenPath]];
-};
-
-// src/tokens/create/generators/color.ts
-import * as R24 from "ramda";
-var generateColor = (colorArray, overrides) => {
-  const obj = {};
-  const $type = "color";
-  for (const index in colorArray) {
-    const position = Number(index) + 1;
-    const overrideValue = overrides?.[position];
-    obj[position] = {
-      $type,
-      $value: overrideValue || colorArray[index].hex
-    };
-  }
-  return obj;
-};
-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;
-        }
+    size: {
+      "0": {
+        $type: "dimension",
+        $value: "{_size.0}"
+      },
+      "1": {
+        $type: "dimension",
+        $value: "{_size.1}"
+      },
+      "2": {
+        $type: "dimension",
+        $value: "{_size.2}"
+      },
+      "3": {
+        $type: "dimension",
+        $value: "{_size.3}"
+      },
+      "4": {
+        $type: "dimension",
+        $value: "{_size.4}"
+      },
+      "5": {
+        $type: "dimension",
+        $value: "{_size.5}"
+      },
+      "6": {
+        $type: "dimension",
+        $value: "{_size.6}"
+      },
+      "7": {
+        $type: "dimension",
+        $value: "{_size.7}"
+      },
+      "8": {
+        $type: "dimension",
+        $value: "{_size.8}"
+      },
+      "9": {
+        $type: "dimension",
+        $value: "{_size.9}"
+      },
+      "10": {
+        $type: "dimension",
+        $value: "{_size.10}"
+      },
+      "11": {
+        $type: "dimension",
+        $value: "{_size.11}"
+      },
+      "12": {
+        $type: "dimension",
+        $value: "{_size.12}"
+      },
+      "13": {
+        $type: "dimension",
+        $value: "{_size.13}"
+      },
+      "14": {
+        $type: "dimension",
+        $value: "{_size.14}"
+      },
+      "15": {
+        $type: "dimension",
+        $value: "{_size.15}"
+      },
+      "18": {
+        $type: "dimension",
+        $value: "{_size.18}"
+      },
+      "22": {
+        $type: "dimension",
+        $value: "{_size.22}"
+      },
+      "26": {
+        $type: "dimension",
+        $value: "{_size.26}"
+      },
+      "30": {
+        $type: "dimension",
+        $value: "{_size.30}"
       }
-    });
-    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 neutralColorScale = generateColorScale(colors2.neutral, colorScheme2);
-  const neutral = generateColor(neutralColorScale, createColorOverrides("neutral"));
-  const baseColorsWithOverrides = {
-    ...baseColors,
-    ...overrides?.severity
+    }
   };
-  const globalColors = R24.mapObjIndexed(
-    (color, colorName) => generateColor(generateColorScale(color, colorScheme2), createColorOverrides(colorName)),
-    baseColorsWithOverrides
+}
+
+// src/tokens/create/generators/themes/theme.ts
+import * as R26 from "ramda";
+var generateTheme = (colors2, themeName, borderRadius) => {
+  const mainColorNames = Object.keys(colors2.main);
+  const supportColorNames = Object.keys(colors2.support);
+  const customColors = [...mainColorNames, "neutral", ...supportColorNames, ...baseColorNames];
+  const themeColorTokens = Object.fromEntries(
+    customColors.map((colorName) => [colorName, generateColorScaleTokens3(colorName, themeName)])
   );
-  const linkColor = generateColor(generateColorScale(dsLinkColor, colorScheme2));
-  const defaultLinkVisited = linkColor[12];
-  const linkOverride = overrides?.linkVisited?.[colorScheme2] ? { $type: "color", $value: overrides.linkVisited[colorScheme2] } : void 0;
-  const defaultFocusInner = neutralColorScale[0].hex;
-  const defaultFocusOuter = neutralColorScale[10].hex;
-  const focusInnerOverride = overrides?.focus?.inner?.[colorScheme2];
-  const focusOuterOverride = overrides?.focus?.outer?.[colorScheme2];
-  return {
-    [themeName]: {
-      ...main,
-      ...support,
-      neutral,
-      ...globalColors,
+  const { color: themeBaseFileColor, ...remainingThemeFile } = generateBase(themeName);
+  const themeFile = {
+    color: {
+      ...themeColorTokens,
+      ...themeBaseFileColor,
       link: {
-        visited: linkOverride || defaultLinkVisited
+        visited: {
+          $type: "color",
+          $value: `{${themeName}.link.visited}`
+        }
       },
       focus: {
-        inner: {
+        "inner-color": {
           $type: "color",
-          $value: focusInnerOverride || defaultFocusInner
+          $value: `{${themeName}.focus.inner}`
         },
-        outer: {
+        "outer-color": {
           $type: "color",
-          $value: focusOuterOverride || defaultFocusOuter
+          $value: `{${themeName}.focus.outer}`
         }
       }
-    }
-  };
-};
-
-// src/tokens/create/generators/semantic.ts
-import * as R25 from "ramda";
-
-// src/tokens/template/design-tokens/semantic/color.base.template.json with { type: 'json' }
-var color_base_template_default = {
-  color: {
-    focus: {
-      inner: {
-        $type: "color",
-        $value: "{color.focus.inner-color}"
-      },
-      outer: {
-        $type: "color",
-        $value: "{color.focus.outer-color}"
-      }
-    }
-  },
-  link: {
-    color: {
-      visited: {
-        $type: "color",
-        $value: "{color.link.visited}"
-      }
-    }
-  }
-};
-
-// src/tokens/template/design-tokens/semantic/color.template.json with { type: 'json' }
-var color_template_default = {
-  "background-default": {
-    $type: "color",
-    $value: "{color.<color>.1}"
-  },
-  "background-tinted": {
-    $type: "color",
-    $value: "{color.<color>.2}"
-  },
-  "surface-default": {
-    $type: "color",
-    $value: "{color.<color>.3}"
-  },
-  "surface-tinted": {
-    $type: "color",
-    $value: "{color.<color>.4}"
-  },
-  "surface-hover": {
-    $type: "color",
-    $value: "{color.<color>.5}"
-  },
-  "surface-active": {
-    $type: "color",
-    $value: "{color.<color>.6}"
-  },
-  "border-subtle": {
-    $type: "color",
-    $value: "{color.<color>.7}"
-  },
-  "border-default": {
-    $type: "color",
-    $value: "{color.<color>.8}"
-  },
-  "border-strong": {
-    $type: "color",
-    $value: "{color.<color>.9}"
-  },
-  "text-subtle": {
-    $type: "color",
-    $value: "{color.<color>.10}"
-  },
-  "text-default": {
-    $type: "color",
-    $value: "{color.<color>.11}"
-  },
-  "base-default": {
-    $type: "color",
-    $value: "{color.<color>.12}"
-  },
-  "base-hover": {
-    $type: "color",
-    $value: "{color.<color>.13}"
-  },
-  "base-active": {
-    $type: "color",
-    $value: "{color.<color>.14}"
-  },
-  "base-contrast-subtle": {
-    $type: "color",
-    $value: "{color.<color>.15}"
-  },
-  "base-contrast-default": {
-    $type: "color",
-    $value: "{color.<color>.16}"
-  }
-};
-
-// src/tokens/template/design-tokens/semantic/modes/color.template.json with { type: 'json' }
-var color_template_default2 = {
-  "background-default": {
-    $type: "color",
-    $value: "{color.<color>.background-default}"
-  },
-  "background-tinted": {
-    $type: "color",
-    $value: "{color.<color>.background-tinted}"
-  },
-  "surface-default": {
-    $type: "color",
-    $value: "{color.<color>.surface-default}"
-  },
-  "surface-tinted": {
-    $type: "color",
-    $value: "{color.<color>.surface-tinted}"
-  },
-  "surface-hover": {
-    $type: "color",
-    $value: "{color.<color>.surface-hover}"
-  },
-  "surface-active": {
-    $type: "color",
-    $value: "{color.<color>.surface-active}"
-  },
-  "border-subtle": {
-    $type: "color",
-    $value: "{color.<color>.border-subtle}"
-  },
-  "border-default": {
-    $type: "color",
-    $value: "{color.<color>.border-default}"
-  },
-  "border-strong": {
-    $type: "color",
-    $value: "{color.<color>.border-strong}"
-  },
-  "text-subtle": {
-    $type: "color",
-    $value: "{color.<color>.text-subtle}"
-  },
-  "text-default": {
-    $type: "color",
-    $value: "{color.<color>.text-default}"
-  },
-  "base-default": {
-    $type: "color",
-    $value: "{color.<color>.base-default}"
-  },
-  "base-hover": {
-    $type: "color",
-    $value: "{color.<color>.base-hover}"
-  },
-  "base-active": {
-    $type: "color",
-    $value: "{color.<color>.base-active}"
-  },
-  "base-contrast-subtle": {
-    $type: "color",
-    $value: "{color.<color>.base-contrast-subtle}"
-  },
-  "base-contrast-default": {
-    $type: "color",
-    $value: "{color.<color>.base-contrast-default}"
-  }
-};
-
-// src/tokens/create/generators/semantic.ts
-var generateSemantic = (colors2, _themeName) => {
-  const mainColorNames = Object.keys(colors2.main);
-  const supportColorNames = Object.keys(colors2.support);
-  const modes = {
-    "main-color": {},
-    "support-color": {}
+    },
+    ...remainingThemeFile
   };
-  const categories = [
-    ["main-color", mainColorNames],
-    ["support-color", supportColorNames]
-  ];
-  for (const [colorCategory2, colorNames2] of categories) {
-    for (const colorName of colorNames2) {
-      const category = colorCategory2.replace("-color", "");
-      const customColorTokens = {
-        color: {
-          [category]: JSON.parse(
-            JSON.stringify(
-              color_template_default2,
-              (key, value) => {
-                if (key === "$value") {
-                  return value.replace("<color>", colorName);
-                }
-                return value;
-              },
-              2
-            )
-          )
+  const baseBorderRadius = R26.lensPath(["border-radius", "base", "$value"]);
+  const updatedThemeFile = R26.set(baseBorderRadius, String(borderRadius), themeFile);
+  const token = JSON.parse(
+    JSON.stringify(
+      updatedThemeFile,
+      (key, value) => {
+        if (key === "$value") {
+          return value.replace("<theme>", themeName);
         }
-      };
-      modes[colorCategory2][colorName] = customColorTokens;
-    }
-  }
-  const customColors = [...mainColorNames, "neutral", ...supportColorNames];
-  const allColors = [...customColors, ...baseColorNames];
-  const semanticColorTokens = allColors.map(
-    (colorName) => [
-      colorName,
-      R25.map((x) => ({ ...x, $value: x.$value.replace("<color>", colorName) }), color_template_default)
-    ]
+        return value;
+      },
+      2
+    )
   );
-  const color = {
-    ...color_base_template_default,
-    color: {
-      ...Object.fromEntries(semanticColorTokens),
-      ...color_base_template_default.color
-    }
-  };
-  return {
-    modes,
-    color
-  };
+  return token;
 };
-
-// src/tokens/create/generators/theme.ts
-import * as R26 from "ramda";
-
-// src/tokens/template/design-tokens/themes/theme.base.template.json with { type: 'json' }
-var theme_base_template_default = {
+var generateBase = (themeName) => ({
   color: {},
   "font-family": {
     $type: "fontFamilies",
-    $value: "{<theme>.font-family}"
+    $value: `{${themeName}.font-family}`
   },
   "font-weight": {
     medium: {
       $type: "fontWeights",
-      $value: "{<theme>.font-weight.medium}"
+      $value: `{${themeName}.font-weight.medium}`
     },
     semibold: {
       $type: "fontWeights",
-      $value: "{<theme>.font-weight.semibold}"
+      $value: `{${themeName}.font-weight.semibold}`
     },
     regular: {
       $type: "fontWeights",
-      $value: "{<theme>.font-weight.regular}"
+      $value: `{${themeName}.font-weight.regular}`
     }
   },
   "border-radius": {
@@ -4169,159 +4004,16 @@ var theme_base_template_default = {
       $value: "4"
     }
   }
-};
-
-// src/tokens/template/design-tokens/themes/theme.template.json with { type: 'json' }
-var theme_template_default = {
-  "1": {
-    $type: "color",
-    $value: "{<theme>.<color>.1}"
-  },
-  "2": {
-    $type: "color",
-    $value: "{<theme>.<color>.2}"
-  },
-  "3": {
-    $type: "color",
-    $value: "{<theme>.<color>.3}"
-  },
-  "4": {
-    $type: "color",
-    $value: "{<theme>.<color>.4}"
-  },
-  "5": {
-    $type: "color",
-    $value: "{<theme>.<color>.5}"
-  },
-  "6": {
-    $type: "color",
-    $value: "{<theme>.<color>.6}"
-  },
-  "7": {
-    $type: "color",
-    $value: "{<theme>.<color>.7}"
-  },
-  "8": {
-    $type: "color",
-    $value: "{<theme>.<color>.8}"
-  },
-  "9": {
-    $type: "color",
-    $value: "{<theme>.<color>.9}"
-  },
-  "10": {
-    $type: "color",
-    $value: "{<theme>.<color>.10}"
-  },
-  "11": {
-    $type: "color",
-    $value: "{<theme>.<color>.11}"
-  },
-  "12": {
-    $type: "color",
-    $value: "{<theme>.<color>.12}"
-  },
-  "13": {
-    $type: "color",
-    $value: "{<theme>.<color>.13}"
-  },
-  "14": {
-    $type: "color",
-    $value: "{<theme>.<color>.14}"
-  },
-  "15": {
-    $type: "color",
-    $value: "{<theme>.<color>.15}"
-  },
-  "16": {
-    $type: "color",
-    $value: "{<theme>.<color>.16}"
-  }
-};
-
-// src/tokens/create/generators/theme.ts
-var generateTheme = (colors2, themeName, borderRadius) => {
-  const mainColorNames = Object.keys(colors2.main);
-  const supportColorNames = Object.keys(colors2.support);
-  const customColors = [...mainColorNames, "neutral", ...supportColorNames, ...baseColorNames];
-  const themeColorTokens = Object.fromEntries(
-    customColors.map(
-      (colorName) => [
-        colorName,
-        R26.map((x) => ({ ...x, $value: x.$value.replace("<color>", colorName) }), theme_template_default)
-      ]
-    )
-  );
-  const { color: themeBaseFileColor, ...remainingThemeFile } = theme_base_template_default;
-  const themeFile = {
-    color: {
-      ...themeColorTokens,
-      ...themeBaseFileColor,
-      link: {
-        visited: {
-          $type: "color",
-          $value: `{${themeName}.link.visited}`
-        }
-      },
-      focus: {
-        "inner-color": {
-          $type: "color",
-          $value: `{${themeName}.focus.inner}`
-        },
-        "outer-color": {
-          $type: "color",
-          $value: `{${themeName}.focus.outer}`
-        }
-      }
-    },
-    ...remainingThemeFile
-  };
-  const baseBorderRadius = R26.lensPath(["border-radius", "base", "$value"]);
-  const updatedThemeFile = R26.set(baseBorderRadius, String(borderRadius), themeFile);
-  const token = JSON.parse(
-    JSON.stringify(
-      updatedThemeFile,
-      (key, value) => {
-        if (key === "$value") {
-          return value.replace("<theme>", themeName);
-        }
-        return value;
-      },
-      2
-    )
-  );
-  return token;
-};
-
-// src/tokens/template/design-tokens/primitives/modes/typography/typography.template.json with { type: 'json' }
-var typography_template_default = {
-  "<theme>": {
-    "font-family": {
-      $type: "fontFamilies",
-      $value: "<font-family>"
-    },
-    "font-weight": {
-      medium: {
-        $type: "fontWeights",
-        $value: "Medium"
-      },
-      semibold: {
-        $type: "fontWeights",
-        $value: "Semi bold"
-      },
-      regular: {
-        $type: "fontWeights",
-        $value: "Regular"
-      }
-    }
+});
+var generateColorScaleTokens3 = (colorName, themeName) => {
+  const colorScale = {};
+  for (const [_, colorNumber] of R26.toPairs(semanticColorMap)) {
+    colorScale[colorNumber] = {
+      $type: "color",
+      $value: `{${themeName}.${colorName}.${colorNumber}}`
+    };
   }
-};
-
-// src/tokens/create/generators/typography.ts
-var generateTypography = (themeName, { fontFamily }) => {
-  return JSON.parse(
-    JSON.stringify(typography_template_default).replaceAll(/<font-family>/g, fontFamily).replaceAll(/<theme>/g, themeName)
-  );
+  return colorScale;
 };
 
 // src/tokens/create.ts
@@ -4341,20 +4033,17 @@ var cliOptions = {
     borderRadius: "border-radius"
   }
 };
-var createTokens = async (opts) => {
-  const { colors: colors2, typography: typography2, name, borderRadius, overrides } = opts;
+var createTokens = async (theme) => {
+  const { colors: colors2, typography: typography2, name, borderRadius, overrides } = theme;
   const colorSchemes = ["light", "dark"];
-  const semantic2 = generateSemantic(colors2, name);
+  const sizeModes2 = ["small", "medium", "large"];
   const tokenSets = new Map([
-    ...getDefaultTokens([
-      "primitives/globals",
-      "primitives/modes/size/small",
-      "primitives/modes/size/medium",
-      "primitives/modes/size/large",
-      "primitives/modes/size/global",
-      "primitives/modes/typography/size/small",
-      "primitives/modes/typography/size/medium",
-      "primitives/modes/typography/size/large"
+    ["primitives/globals", generateGlobals()],
+    ...sizeModes2.map((size2) => [`primitives/modes/size/${size2}`, generateSize(size2)]),
+    ["primitives/modes/size/global", generateSizeGlobal()],
+    ...sizeModes2.map((size2) => [
+      `primitives/modes/typography/size/${size2}`,
+      generateFontSizes(size2)
     ]),
     [`primitives/modes/typography/primary/${name}`, generateTypography(name, typography2)],
     [`primitives/modes/typography/secondary/${name}`, generateTypography(name, typography2)],
@@ -4362,12 +4051,12 @@ var createTokens = async (opts) => {
       [`primitives/modes/color-scheme/${scheme}/${name}`, generateColorScheme(name, scheme, colors2, overrides)]
     ]),
     [`themes/${name}`, generateTheme(colors2, name, borderRadius)],
-    ["semantic/color", semantic2.color],
+    ["semantic/color", generateSemanticColors(colors2, name)],
     // maps out semantic modes, ieg 'semantic/modes/main-color/accent', and 'semantic/modes/support-color/brand1'
-    ...Object.entries(semantic2.modes).flatMap(
+    ...Object.entries(generateColorModes(colors2, name)).flatMap(
       ([mode, colors3]) => Object.entries(colors3).map(([key, colorSet]) => [`semantic/modes/${mode}/${key}`, colorSet])
     ),
-    getDefaultToken("semantic/style")
+    [`semantic/style`, generateSemanticStyle()]
   ]);
   return { tokenSets };
 };