@digdir/designsystemet 1.0.4 → 1.0.5

package/dist/bin/designsystemet.js

@@ -4,7 +4,7 @@
 import path4 from "node:path";
 import { Argument, createCommand, program } from "@commander-js/extra-typings";
 import chalk8 from "chalk";
-import * as R24 from "ramda";
+import * as R25 from "ramda";
 import { fromError } from "zod-validation-error";
 
 // src/colors/utils.ts
@@ -2678,15 +2678,16 @@ var migrations_default = {
 // src/tokens/build.ts
 import path2 from "node:path";
 import chalk6 from "chalk";
+import * as R23 from "ramda";
 
-// src/tokens/format.ts
-import * as R22 from "ramda";
-import chalk5 from "chalk";
+// src/tokens/process/theme.ts
+import * as R10 from "ramda";
+import chalk3 from "chalk";
 
 // package.json
 var package_default = {
   name: "@digdir/designsystemet",
-  version: "1.0.4",
+  version: "1.0.5",
   description: "CLI for Designsystemet",
   author: "Designsystemet team",
   engines: {
@@ -2726,11 +2727,12 @@ var package_default = {
     "build:types": "tsc --emitDeclarationOnly --declaration",
     "build:json-schema": "tsx ./src/scripts/createJsonSchema.ts",
     types: "tsc --noEmit",
-    "test:tokens-create-options": "yarn designsystemet tokens create -m dominant:#007682  -n #003333 -b 99 -o ./test-tokens-create --theme options-test --clean",
-    "test:tokens-create-config": "yarn designsystemet tokens create --config ./test-tokens-create-complex.config.json",
-    "test:tokens-build": "yarn designsystemet tokens build -t ./test-tokens-create -o ./test-tokens-build --clean",
+    "test:tokens-create-options": "yarn designsystemet tokens create -m dominant:#007682  -n #003333 -b 99 -o ./test-tokens/options --theme options --clean",
+    "test:tokens-create-config": "yarn designsystemet tokens create --config ./test/test-tokens.config.json",
+    "test:tokens-build": "yarn designsystemet tokens build -t ./test-tokens/options -o ./test-tokens/options-build --clean",
+    "test:tokens-build-config": "yarn designsystemet tokens build -t ./test-tokens/config -o ./test-tokens/config-build --clean",
     "test:tokens-create-and-build-options": "yarn test:tokens-create-options && yarn test:tokens-build",
-    "test:tokens-create-and-build-config": "yarn test:tokens-create-config && yarn test:tokens-build",
+    "test:tokens-create-and-build-config": "yarn test:tokens-create-config && yarn test:tokens-build-config",
     test: "yarn test:tokens-create-and-build-options && yarn test:tokens-create-and-build-config",
     "internal:tokens-create": "yarn designsystemet tokens create --config ./internal.config.json",
     "update:template": "tsx ./src/scripts/update-template.ts",
@@ -2773,378 +2775,121 @@ var package_default = {
   }
 };
 
-// ../../node_modules/@tokens-studio/types/dist/constants/BoxShadowTypes.js
-var BoxShadowTypes;
-(function(BoxShadowTypes2) {
-  BoxShadowTypes2["DROP_SHADOW"] = "dropShadow";
-  BoxShadowTypes2["INNER_SHADOW"] = "innerShadow";
-})(BoxShadowTypes || (BoxShadowTypes = {}));
-
-// ../../node_modules/@tokens-studio/types/dist/constants/ColorModifierTypes.js
-var ColorModifierTypes;
-(function(ColorModifierTypes2) {
-  ColorModifierTypes2["LIGHTEN"] = "lighten";
-  ColorModifierTypes2["DARKEN"] = "darken";
-  ColorModifierTypes2["MIX"] = "mix";
-  ColorModifierTypes2["ALPHA"] = "alpha";
-})(ColorModifierTypes || (ColorModifierTypes = {}));
-
-// ../../node_modules/@tokens-studio/types/dist/constants/ColorSpaceTypes.js
-var ColorSpaceTypes;
-(function(ColorSpaceTypes2) {
-  ColorSpaceTypes2["LCH"] = "lch";
-  ColorSpaceTypes2["SRGB"] = "srgb";
-  ColorSpaceTypes2["P3"] = "p3";
-  ColorSpaceTypes2["HSL"] = "hsl";
-})(ColorSpaceTypes || (ColorSpaceTypes = {}));
-
-// ../../node_modules/@tokens-studio/types/dist/constants/Properties.js
-var Properties;
-(function(Properties2) {
-  Properties2["sizing"] = "sizing";
-  Properties2["height"] = "height";
-  Properties2["width"] = "width";
-  Properties2["spacing"] = "spacing";
-  Properties2["verticalPadding"] = "verticalPadding";
-  Properties2["horizontalPadding"] = "horizontalPadding";
-  Properties2["paddingTop"] = "paddingTop";
-  Properties2["paddingRight"] = "paddingRight";
-  Properties2["paddingBottom"] = "paddingBottom";
-  Properties2["paddingLeft"] = "paddingLeft";
-  Properties2["itemSpacing"] = "itemSpacing";
-  Properties2["fill"] = "fill";
-  Properties2["backgroundBlur"] = "backgroundBlur";
-  Properties2["border"] = "border";
-  Properties2["borderTop"] = "borderTop";
-  Properties2["borderRight"] = "borderRight";
-  Properties2["borderBottom"] = "borderBottom";
-  Properties2["borderLeft"] = "borderLeft";
-  Properties2["borderColor"] = "borderColor";
-  Properties2["borderRadius"] = "borderRadius";
-  Properties2["borderRadiusTopLeft"] = "borderRadiusTopLeft";
-  Properties2["borderRadiusTopRight"] = "borderRadiusTopRight";
-  Properties2["borderRadiusBottomRight"] = "borderRadiusBottomRight";
-  Properties2["borderRadiusBottomLeft"] = "borderRadiusBottomLeft";
-  Properties2["borderWidth"] = "borderWidth";
-  Properties2["borderWidthTop"] = "borderWidthTop";
-  Properties2["borderWidthRight"] = "borderWidthRight";
-  Properties2["borderWidthBottom"] = "borderWidthBottom";
-  Properties2["borderWidthLeft"] = "borderWidthLeft";
-  Properties2["boxShadow"] = "boxShadow";
-  Properties2["opacity"] = "opacity";
-  Properties2["fontFamilies"] = "fontFamilies";
-  Properties2["fontWeights"] = "fontWeights";
-  Properties2["fontSizes"] = "fontSizes";
-  Properties2["lineHeights"] = "lineHeights";
-  Properties2["typography"] = "typography";
-  Properties2["composition"] = "composition";
-  Properties2["letterSpacing"] = "letterSpacing";
-  Properties2["paragraphSpacing"] = "paragraphSpacing";
-  Properties2["textCase"] = "textCase";
-  Properties2["dimension"] = "dimension";
-  Properties2["textDecoration"] = "textDecoration";
-  Properties2["asset"] = "asset";
-  Properties2["tokenValue"] = "tokenValue";
-  Properties2["value"] = "value";
-  Properties2["tokenName"] = "tokenName";
-  Properties2["description"] = "description";
-})(Properties || (Properties = {}));
+// src/tokens/process/theme.ts
+var defaultFileHeader = `build: v${package_default.version}`;
+var createThemeCSSFiles = ({
+  processedBuilds,
+  fileHeader: fileHeader2 = defaultFileHeader
+}) => {
+  const groupedByTheme = {};
+  for (const [_, buildResults] of Object.entries(R10.dissoc("types", processedBuilds))) {
+    for (const buildResult of buildResults) {
+      const themeName = buildResult.permutation.theme;
+      const newOutputs = buildResult.formatted;
+      if (R10.isNotEmpty(newOutputs)) {
+        const currentOutputs = groupedByTheme[themeName] ?? [];
+        groupedByTheme[themeName] = R10.concat(currentOutputs, newOutputs);
+      }
+    }
+  }
+  const sortOrder = [
+    "color-scheme/light",
+    "typography/secondary",
+    "semantic",
+    "color-scheme/dark",
+    "color-scheme/contrast",
+    "typography/primary",
+    "color/"
+  ];
+  const sortByDefinedOrder = R10.sortBy((file) => {
+    const filePath = file.destination || "";
+    const sortIndex = sortOrder.findIndex((sortElement) => {
+      if (sortElement.endsWith("/")) {
+        return filePath.includes(sortElement);
+      }
+      return filePath.includes(`${sortElement}.css`);
+    });
+    if (sortIndex === -1) {
+      console.error(
+        chalk3.yellow("WARNING: CSS section does not have a defined sort order:", filePath.replace(".css", ""))
+      );
+      console.log(
+        chalk3.dim(
+          `
+The section will currently be added to the end of the entry file, but the exact
+order may change due to nondeterminism.`.trim()
+        )
+      );
+      return Infinity;
+    }
+    return sortIndex;
+  });
+  const header = `@charset "UTF-8";
 
-// ../../node_modules/@tokens-studio/types/dist/constants/TokenSetStatus.js
-var TokenSetStatus;
-(function(TokenSetStatus2) {
-  TokenSetStatus2["DISABLED"] = "disabled";
-  TokenSetStatus2["SOURCE"] = "source";
-  TokenSetStatus2["ENABLED"] = "enabled";
-})(TokenSetStatus || (TokenSetStatus = {}));
+@layer ds.theme, ds.base, ds.utilities, ds.components;
 
-// ../../node_modules/@tokens-studio/types/dist/constants/TokenTypes.js
-var TokenTypes;
-(function(TokenTypes2) {
-  TokenTypes2["OTHER"] = "other";
-  TokenTypes2["COLOR"] = "color";
-  TokenTypes2["BORDER_RADIUS"] = "borderRadius";
-  TokenTypes2["SIZING"] = "sizing";
-  TokenTypes2["SPACING"] = "spacing";
-  TokenTypes2["TEXT"] = "text";
-  TokenTypes2["TYPOGRAPHY"] = "typography";
-  TokenTypes2["OPACITY"] = "opacity";
-  TokenTypes2["BORDER_WIDTH"] = "borderWidth";
-  TokenTypes2["STROKE_STYLE"] = "strokeStyle";
-  TokenTypes2["BOX_SHADOW"] = "boxShadow";
-  TokenTypes2["FONT_FAMILIES"] = "fontFamilies";
-  TokenTypes2["FONT_WEIGHTS"] = "fontWeights";
-  TokenTypes2["LINE_HEIGHTS"] = "lineHeights";
-  TokenTypes2["FONT_SIZES"] = "fontSizes";
-  TokenTypes2["LETTER_SPACING"] = "letterSpacing";
-  TokenTypes2["PARAGRAPH_SPACING"] = "paragraphSpacing";
-  TokenTypes2["PARAGRAPH_INDENT"] = "paragraphIndent";
-  TokenTypes2["TEXT_DECORATION"] = "textDecoration";
-  TokenTypes2["TEXT_CASE"] = "textCase";
-  TokenTypes2["COMPOSITION"] = "composition";
-  TokenTypes2["DIMENSION"] = "dimension";
-  TokenTypes2["BORDER"] = "border";
-  TokenTypes2["ASSET"] = "asset";
-  TokenTypes2["BOOLEAN"] = "boolean";
-  TokenTypes2["NUMBER"] = "number";
-})(TokenTypes || (TokenTypes = {}));
+/*
+${fileHeader2}
+*/
 
-// ../../node_modules/@tokens-studio/types/dist/constants/BorderValues.js
-var BorderValues;
-(function(BorderValues2) {
-  BorderValues2["BORDER_COLOR"] = "color";
-  BorderValues2["BORDER_WIDTH"] = "width";
-  BorderValues2["BORDER_STYLE"] = "style";
-})(BorderValues || (BorderValues = {}));
+`;
+  const sortAlphabetically = R10.sort(R10.ascend((x) => x.destination || ""));
+  const pickOutputs = R10.map(R10.view(R10.lensProp("output")));
+  const themeCSSFile = R10.pipe(
+    sortAlphabetically,
+    sortByDefinedOrder,
+    pickOutputs,
+    R10.join("\n"),
+    (content) => header + content
+  );
+  const themeCSSFiles = Object.entries(groupedByTheme).map(([theme, files]) => ({
+    destination: `${theme}.css`,
+    output: themeCSSFile(files)
+  }));
+  return themeCSSFiles;
+};
 
-// ../../node_modules/@tokens-studio/types/dist/constants/StrokeStyleValues.js
-var StrokeStyleValues;
-(function(StrokeStyleValues2) {
-  StrokeStyleValues2["SOLID"] = "solid";
-  StrokeStyleValues2["DASHED"] = "dashed";
-  StrokeStyleValues2["DOTTED"] = "dotted";
-  StrokeStyleValues2["DOUBLE"] = "double";
-  StrokeStyleValues2["GROOVE"] = "groove";
-  StrokeStyleValues2["RIDGE"] = "ridge";
-  StrokeStyleValues2["OUTSET"] = "outset";
-  StrokeStyleValues2["INSET"] = "inset";
-})(StrokeStyleValues || (StrokeStyleValues = {}));
+// src/tokens/process/platform.ts
+import chalk5 from "chalk";
+import * as R22 from "ramda";
+import StyleDictionary2 from "style-dictionary";
 
-// ../../node_modules/@tokens-studio/types/dist/constants/BoxShadowValues.js
-var BoxShadowValues;
-(function(BoxShadowValues2) {
-  BoxShadowValues2["TYPE"] = "type";
-  BoxShadowValues2["COLOR"] = "color";
-  BoxShadowValues2["X"] = "x";
-  BoxShadowValues2["Y"] = "y";
-  BoxShadowValues2["BLUR"] = "blur";
-  BoxShadowValues2["SPREAD"] = "spread";
-  BoxShadowValues2["BLEND_MODE"] = "blendMode";
-})(BoxShadowValues || (BoxShadowValues = {}));
+// src/tokens/types.ts
+var colorCategories = {
+  main: "main",
+  support: "support"
+};
 
-// ../../node_modules/@tokens-studio/types/dist/constants/TypographyValues.js
-var TypographyValues;
-(function(TypographyValues2) {
-  TypographyValues2["FONT_FAMILY"] = "fontFamily";
-  TypographyValues2["FONT_WEIGHT"] = "fontWeight";
-  TypographyValues2["LINE_HEIGHT"] = "lineHeight";
-  TypographyValues2["FONT_SIZE"] = "fontSize";
-  TypographyValues2["LETTER_SPACING"] = "letterSpacing";
-  TypographyValues2["PARAGRAPH_SPACING"] = "paragraphSpacing";
-  TypographyValues2["PARAGRAPH_INDENT"] = "paragraphIndent";
-  TypographyValues2["TEXT_DECORATION"] = "textDecoration";
-  TypographyValues2["TEXT_CASE"] = "textCase";
-})(TypographyValues || (TypographyValues = {}));
+// src/tokens/process/configs.ts
+import { register } from "@tokens-studio/sd-transforms";
+import * as R21 from "ramda";
+import StyleDictionary from "style-dictionary";
 
-// src/tokens/create/generators/$themes.ts
-var capitalize = (word) => word.charAt(0).toUpperCase() + word.slice(1);
-async function createHash(text, algo = "SHA-1") {
-  const crypto = globalThis.crypto;
-  return Array.from(
-    new Uint8Array(await crypto.subtle.digest(algo, new TextEncoder().encode(text))),
-    (byte) => byte.toString(16).padStart(2, "0")
-  ).join("");
+// src/tokens/utils.ts
+import * as R11 from "ramda";
+var mapToLowerCase = R11.map(R11.toLower);
+var hasAnyTruth = R11.any(R11.equals(true));
+var getType = (token) => (token.$type ?? token.type) || "";
+var getValue = (token) => token.$value ?? token.value;
+var typeEquals = R11.curry((types, token) => {
+  if (R11.isNil(token)) {
+    return false;
+  }
+  return R11.includes(R11.toLower(getType(token)), R11.map(R11.toLower, Array.isArray(types) ? types : [types]));
+});
+var pathStartsWithOneOf = R11.curry((paths, token) => {
+  if (R11.isNil(token)) {
+    return false;
+  }
+  const tokenPath = mapToLowerCase(token.path);
+  const matchPathsStartingWith = R11.map((path5) => R11.startsWith([path5], tokenPath), mapToLowerCase(paths));
+  return hasAnyTruth(matchPathsStartingWith);
+});
+function isSemanticToken(token) {
+  return token.filePath.includes("semantic/");
 }
-async function generate$Themes(colorSchemes, themes, colors2) {
-  return [
-    ...generateSizeGroup(),
-    ...await generateThemesGroup(themes),
-    ...generateTypographyGroup(themes),
-    ...generateColorSchemesGroup(colorSchemes, themes),
-    generateSemanticGroup(),
-    ...await generateColorGroup("main", colors2),
-    ...await generateColorGroup("support", colors2)
-  ];
-}
-function generateSizeGroup() {
-  return [
-    {
-      id: "8b2c8cc86611a34b135cb22948666779361fd729",
-      name: "medium",
-      $figmaStyleReferences: {},
-      selectedTokenSets: {
-        "primitives/modes/size/medium": TokenSetStatus.SOURCE,
-        "primitives/modes/size/global": TokenSetStatus.ENABLED,
-        "primitives/modes/typography/size/medium": TokenSetStatus.ENABLED
-      },
-      $figmaCollectionId: "VariableCollectionId:36248:20757",
-      $figmaModeId: "41630:1",
-      group: "Size"
-    },
-    {
-      id: "d49b9eebeb48a4f165a74b7261733d0a73370f0e",
-      name: "large",
-      $figmaStyleReferences: {},
-      selectedTokenSets: {
-        "primitives/modes/size/large": TokenSetStatus.SOURCE,
-        "primitives/modes/size/global": TokenSetStatus.ENABLED,
-        "primitives/modes/typography/size/large": TokenSetStatus.ENABLED
-      },
-      $figmaCollectionId: "VariableCollectionId:36248:20757",
-      $figmaModeId: "41630:2",
-      group: "Size"
-    },
-    {
-      id: "fb11567729c298ca37c9da4e3a27716a23480824",
-      name: "small",
-      $figmaStyleReferences: {},
-      selectedTokenSets: {
-        "primitives/modes/size/small": TokenSetStatus.SOURCE,
-        "primitives/modes/size/global": TokenSetStatus.ENABLED,
-        "primitives/modes/typography/size/small": TokenSetStatus.ENABLED
-      },
-      $figmaCollectionId: "VariableCollectionId:36248:20757",
-      $figmaModeId: "41630:3",
-      group: "Size"
-    }
-  ];
-}
-var colorSchemeDefaults = {
-  light: {
-    name: "Light",
-    selectedTokenSets: {},
-    id: "0daa3ca0b427b9349da7e7dc00101b5668972926",
-    $figmaCollectionId: "VariableCollectionId:34811:5472",
-    $figmaModeId: "34811:0"
-  },
-  dark: {
-    name: "Dark",
-    selectedTokenSets: {},
-    id: "9ebd8aed52afbffc17e2666e8b4653a53498b257",
-    $figmaCollectionId: "VariableCollectionId:34811:5472",
-    $figmaModeId: "34811:1"
-  },
-  contrast: {
-    name: "Contrast",
-    selectedTokenSets: {},
-    id: "9ebd8aed52afbffc17e2666e8b4653a53498b123",
-    $figmaCollectionId: "VariableCollectionId:34811:5472",
-    $figmaModeId: "34811:2"
-  }
-};
-function generateColorSchemesGroup(colorSchemes, themes) {
-  return colorSchemes.map(
-    (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"
-    })
-  );
-}
-async function generateThemesGroup(themes) {
-  return Promise.all(
-    themes.map(
-      async (theme, index) => ({
-        id: await createHash(theme),
-        $figmaCollectionId: "VariableCollectionId:36528:61712",
-        $figmaModeId: `40960:${index + 6}`,
-        // Start on 6 in Token Studio and Community file for some reason
-        name: theme,
-        selectedTokenSets: {
-          [`themes/${theme}`]: TokenSetStatus.ENABLED
-        },
-        group: "Theme"
-      })
-    )
-  );
-}
-function generateSemanticGroup() {
-  return {
-    id: "541629445ef90ad5363f9e88f52a1ccb617e6f84",
-    name: "Semantic",
-    selectedTokenSets: {
-      "semantic/style": TokenSetStatus.ENABLED,
-      "semantic/color": TokenSetStatus.ENABLED,
-      "primitives/globals": TokenSetStatus.SOURCE
-    },
-    $figmaCollectionId: "VariableCollectionId:34811:5976",
-    $figmaModeId: "34811:5",
-    group: "Semantic"
-  };
-}
-async function generateColorGroup(group, colors2) {
-  return Promise.all(
-    Object.entries(colors2[group]).map(
-      async ([color]) => ({
-        id: await createHash(`${group}-${color}`),
-        name: color,
-        selectedTokenSets: {
-          [`semantic/modes/${group}-color/${color}`]: TokenSetStatus.ENABLED
-        },
-        group: `${capitalize(group)} color`
-      })
-    )
-  );
-}
-function generateTypographyGroup(themes) {
-  return [
-    {
-      id: "368d753fcac4455f289500eaa42e70dc0a03522f",
-      $figmaCollectionId: "VariableCollectionId:36248:20769",
-      $figmaModeId: "36248:2",
-      name: "Primary",
-      selectedTokenSets: Object.fromEntries(
-        themes.map((theme) => [`primitives/modes/typography/primary/${theme}`, TokenSetStatus.ENABLED])
-      ),
-      group: "Typography"
-    },
-    {
-      id: "264b8bd1d40b364e1ea3acf09e49795ddd4c513c",
-      $figmaCollectionId: "VariableCollectionId:36248:20769",
-      $figmaModeId: "36248:3",
-      name: "Secondary",
-      selectedTokenSets: Object.fromEntries(
-        themes.map((theme) => [`primitives/modes/typography/secondary/${theme}`, TokenSetStatus.ENABLED])
-      ),
-      group: "Typography"
-    }
-  ];
-}
-
-// src/tokens/process/platform.ts
-import chalk4 from "chalk";
-import * as R21 from "ramda";
-import StyleDictionary2 from "style-dictionary";
-
-// src/tokens/types.ts
-var colorCategories = {
-  main: "main",
-  support: "support"
-};
-
-// src/tokens/process/configs.ts
-import { register } from "@tokens-studio/sd-transforms";
-import * as R20 from "ramda";
-import StyleDictionary from "style-dictionary";
-
-// src/tokens/utils.ts
-import * as R10 from "ramda";
-var mapToLowerCase = R10.map(R10.toLower);
-var hasAnyTruth = R10.any(R10.equals(true));
-var getType = (token) => (token.$type ?? token.type) || "";
-var getValue = (token) => token.$value ?? token.value;
-var typeEquals = R10.curry((types, token) => {
-  if (R10.isNil(token)) {
-    return false;
-  }
-  return R10.includes(R10.toLower(getType(token)), R10.map(R10.toLower, Array.isArray(types) ? types : [types]));
-});
-var pathStartsWithOneOf = R10.curry((paths, token) => {
-  if (R10.isNil(token)) {
-    return false;
-  }
-  const tokenPath = mapToLowerCase(token.path);
-  const matchPathsStartingWith = R10.map((path5) => R10.startsWith([path5], tokenPath), mapToLowerCase(paths));
-  return hasAnyTruth(matchPathsStartingWith);
-});
-function isSemanticToken(token) {
-  return token.filePath.includes("semantic/");
-}
-function isSemanticColorToken(token, color) {
-  return token.filePath.includes("semantic/") && R10.startsWith(["color", color], token.path);
+function isSemanticColorToken(token, color) {
+  return token.filePath.includes("semantic/") && R11.startsWith(["color", color], token.path);
 }
 function isGlobalColorToken(token) {
   return typeEquals("color", token) && pathStartsWithOneOf(["global"], token);
@@ -3153,7 +2898,7 @@ function isColorCategoryToken(token, category) {
   if (!category) {
     return ["main", "support"].some((c) => isColorCategoryToken(token, c));
   }
-  return R10.startsWith(["color", category], token.path);
+  return R11.startsWith(["color", category], token.path);
 }
 var isDigit = (s) => /^\d+$/.test(s);
 function traverseObj(obj, fn) {
@@ -3169,7 +2914,7 @@ function traverseObj(obj, fn) {
   return obj;
 }
 function inlineTokens(shouldInline, tokens) {
-  const [inlineableTokens, otherTokens] = R10.partition(shouldInline, tokens);
+  const [inlineableTokens, otherTokens] = R11.partition(shouldInline, tokens);
   return otherTokens.map((token) => {
     let transformed = getValue(token.original);
     for (const ref of inlineableTokens) {
@@ -3178,16 +2923,16 @@ function inlineTokens(shouldInline, tokens) {
         transformed = transformed.replaceAll(`{${refName}}`, getValue(ref.original));
       }
     }
-    const tokenWithInlinedRefs = R10.set(R10.lensPath(["original", "$value"]), transformed, token);
+    const tokenWithInlinedRefs = R11.set(R11.lensPath(["original", "$value"]), transformed, token);
     return tokenWithInlinedRefs;
   });
 }
 
 // src/tokens/process/configs/color.ts
-import * as R15 from "ramda";
+import * as R16 from "ramda";
 
 // src/tokens/process/formats/css/color.ts
-import * as R11 from "ramda";
+import * as R12 from "ramda";
 import { createPropertyFormatter } from "style-dictionary/utils";
 var prefersColorScheme = (colorScheme2, content) => `
 @media (prefers-color-scheme: ${colorScheme2}) {
@@ -3211,8 +2956,8 @@ var colorScheme = {
   color-scheme: ${colorScheme_};
 ` : "";
     const filteredAllTokens = allTokens.filter(
-      R11.allPass([
-        R11.anyPass([
+      R12.allPass([
+        R12.anyPass([
           // Include semantic tokens in the output
           isSemanticToken,
           // Include global color tokens
@@ -3228,7 +2973,7 @@ ${formattedTokens}
 ${colorSchemeProperty}}
 `;
     const autoSelectorContent = ["light", "dark"].includes(colorScheme_) ? prefersColorScheme(colorScheme_, content) : "";
-    const body = R11.isNotNil(layer) ? `@layer ${layer} {
+    const body = R12.isNotNil(layer) ? `@layer ${layer} {
 ${selector} ${content} ${autoSelectorContent}
 }
 ` : `${selector} ${content} ${autoSelectorContent}
@@ -3241,7 +2986,7 @@ var colorCategory = {
   format: async ({ dictionary, file, options, platform }) => {
     const { outputReferences, usesDtcg } = options;
     const { selector, layer } = platform;
-    const format = R11.compose(
+    const format = R12.compose(
       createPropertyFormatter({
         outputReferences,
         dictionary,
@@ -3262,7 +3007,7 @@ var colorCategory = {
 ${formattedTokens}
 }
 `;
-    const body = R11.isNotNil(layer) ? `@layer ${layer} {
+    const body = R12.isNotNil(layer) ? `@layer ${layer} {
 ${selector} ${content}
 }
 ` : `${selector} ${content}
@@ -3272,12 +3017,12 @@ ${selector} ${content}
 };
 
 // src/tokens/process/formats/css/semantic.ts
-import * as R12 from "ramda";
+import * as R13 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 = R12.anyPass([isNumericBorderRadiusToken, isNumericSizeToken, isSizeToken]);
+var isInlineTokens = R13.anyPass([isNumericBorderRadiusToken, isNumericSizeToken, isSizeToken]);
 var overrideSizingFormula = (format, token) => {
   const [name, value] = format(token).split(":");
   const calc = value.replace(`var(--ds-size-mode-font-size)`, "1em").replace(/floor\((.*)\);/, "calc($1)");
@@ -3289,7 +3034,7 @@ var overrideSizingFormula = (format, token) => {
   };
 };
 var formatSizingTokens = (format, tokens) => {
-  const { round, calc } = R12.reduce(
+  const { round, calc } = R13.reduce(
     (acc, token) => {
       const { round: round2, calc: calc2, name } = overrideSizingFormula(format, token);
       return {
@@ -3319,17 +3064,17 @@ var semantic = {
       usesDtcg
     });
     const tokens = inlineTokens(isInlineTokens, dictionary.allTokens);
-    const filteredTokens = R12.reject((token) => token.name.includes("ds-size-mode-font-size"), tokens);
-    const [sizingTokens, restTokens] = R12.partition(
+    const filteredTokens = R13.reject((token) => token.name.includes("ds-size-mode-font-size"), tokens);
+    const [sizingTokens, restTokens] = R13.partition(
       (t) => pathStartsWithOneOf(["_size"], t) && isDigit(t.path[1]),
       filteredTokens
     );
-    const formattedTokens = [R12.map(format, restTokens).join("\n"), formatSizingTokens(format, sizingTokens)];
+    const formattedTokens = [R13.map(format, restTokens).join("\n"), formatSizingTokens(format, sizingTokens)];
     const content = `{
 ${formattedTokens.join("\n")}
 }
 `;
-    const body = R12.isNotNil(layer) ? `@layer ${layer} {
+    const body = R13.isNotNil(layer) ? `@layer ${layer} {
 ${selector} ${content}
 }
 ` : `${selector} ${content}
@@ -3339,11 +3084,11 @@ ${selector} ${content}
 };
 
 // src/tokens/process/formats/css/typography.ts
-import * as R13 from "ramda";
+import * as R14 from "ramda";
 import { createPropertyFormatter as createPropertyFormatter3 } from "style-dictionary/utils";
-var typographyFontFamilyPredicate = R13.allPass([
-  R13.pathSatisfies(R13.includes("typography"), ["path"]),
-  R13.pathSatisfies(R13.includes("fontFamily"), ["path"])
+var typographyFontFamilyPredicate = R14.allPass([
+  R14.pathSatisfies(R14.includes("typography"), ["path"]),
+  R14.pathSatisfies(R14.includes("fontFamily"), ["path"])
 ]);
 var typography = {
   name: "ds/css-typography",
@@ -3356,12 +3101,12 @@ var typography = {
       format: "css",
       usesDtcg
     });
-    const filteredTokens = R13.reject(typographyFontFamilyPredicate, dictionary.allTokens);
-    const formattedTokens = R13.pipe(R13.map(format), R13.join("\n"))(filteredTokens);
+    const filteredTokens = R14.reject(typographyFontFamilyPredicate, dictionary.allTokens);
+    const formattedTokens = R14.pipe(R14.map(format), R14.join("\n"))(filteredTokens);
     const content = selector ? `${selector} {
 ${formattedTokens}
 }` : formattedTokens;
-    const body = R13.isNotNil(layer) ? `@layer ${layer} {
+    const body = R14.isNotNil(layer) ? `@layer ${layer} {
 ${content}
 }` : content;
     return body;
@@ -3378,8 +3123,8 @@ var formats = {
 
 // src/tokens/process/transformers.ts
 import { checkAndEvaluateMath } from "@tokens-studio/sd-transforms";
-import * as R14 from "ramda";
-var isPx = R14.test(/\b\d+px\b/g);
+import * as R15 from "ramda";
+var isPx = R15.test(/\b\d+px\b/g);
 var sizeRem = {
   name: "ds/size/toRem",
   type: "value",
@@ -3469,7 +3214,7 @@ var colorSchemeVariables = ({ "color-scheme": colorScheme2 = "light", theme }) =
           {
             destination: `color-scheme/${colorScheme2}.css`,
             format: formats.colorScheme.name,
-            filter: (token) => typeEquals("color", token) && !R15.startsWith(["global"], token.path)
+            filter: (token) => typeEquals("color", token) && !R16.startsWith(["global"], token.path)
           }
         ],
         options: {
@@ -3520,7 +3265,7 @@ var colorCategoryVariables = (opts) => ({ "color-scheme": colorScheme2, theme, .
 };
 
 // src/tokens/process/configs/semantic.ts
-import * as R16 from "ramda";
+import * as R17 from "ramda";
 import { outputReferencesFilter } from "style-dictionary/utils";
 var semanticVariables = ({ theme }) => {
   const selector = `:root`;
@@ -3543,8 +3288,8 @@ var semanticVariables = ({ theme }) => {
             destination: `semantic.css`,
             format: formats.semantic.name,
             filter: (token) => {
-              const isUwantedToken = R16.anyPass([R16.includes("primitives/global")])(token.filePath);
-              const isPrivateToken = R16.includes("_", token.path);
+              const isUwantedToken = R17.anyPass([R17.includes("primitives/global")])(token.filePath);
+              const isPrivateToken = R17.includes("_", token.path);
               const unwantedPaths = pathStartsWithOneOf(["font-size", "line-height", "letter-spacing"], token);
               const unwantedTypes = typeEquals(["color", "fontWeight", "fontFamily", "typography"], token);
               const unwantedTokens = !(unwantedPaths || unwantedTypes || isPrivateToken || isUwantedToken);
@@ -3565,20 +3310,20 @@ var semanticVariables = ({ theme }) => {
 };
 
 // src/tokens/process/configs/storefront.ts
-import * as R18 from "ramda";
+import * as R19 from "ramda";
 import { outputReferencesFilter as outputReferencesFilter2 } from "style-dictionary/utils";
 
 // src/tokens/process/formats/js-tokens.ts
-import * as R17 from "ramda";
+import * as R18 from "ramda";
 import { createPropertyFormatter as createPropertyFormatter4, fileHeader } from "style-dictionary/utils";
-var groupByType = R17.groupBy((token) => getType(token));
-var removeUnwatedTokens = R17.pipe(
-  R17.reject((token) => isColorCategoryToken(token)),
-  R17.reject((token) => R17.any((path5) => path5.startsWith("_"))(token.path))
+var groupByType = R18.groupBy((token) => getType(token));
+var removeUnwatedTokens = R18.pipe(
+  R18.reject((token) => isColorCategoryToken(token)),
+  R18.reject((token) => R18.any((path5) => path5.startsWith("_"))(token.path))
 );
-var dissocExtensions = R17.pipe(R17.dissoc("$extensions"), R17.dissocPath(["original", "$extensions"]));
-var removeUnwatedProps = R17.map((token) => dissocExtensions(token));
-var toCssVarName = R17.pipe(R17.split(":"), R17.head, R17.trim);
+var dissocExtensions = R18.pipe(R18.dissoc("$extensions"), R18.dissocPath(["original", "$extensions"]));
+var removeUnwatedProps = R18.map((token) => dissocExtensions(token));
+var toCssVarName = R18.pipe(R18.split(":"), R18.head, R18.trim);
 var jsTokens = {
   name: "ds/js-tokens",
   format: async ({ dictionary, file, options }) => {
@@ -3589,7 +3334,7 @@ var jsTokens = {
       format: "css",
       usesDtcg
     });
-    const formatTokens = R17.map((token) => {
+    const formatTokens = R18.map((token) => {
       if (pathStartsWithOneOf(["size", "_size"], token)) {
         const { calc, name } = overrideSizingFormula(format, token);
         return {
@@ -3603,7 +3348,7 @@ var jsTokens = {
         name: toCssVarName(format(token))
       };
     });
-    const processTokens = R17.pipe(removeUnwatedTokens, removeUnwatedProps, formatTokens, groupByType);
+    const processTokens = R18.pipe(removeUnwatedTokens, removeUnwatedProps, formatTokens, groupByType);
     const tokens = processTokens(inlineTokens(isInlineTokens, dictionary.allTokens));
     const content = Object.entries(tokens).map(
       ([name, token]) => `export const  ${name} = ${JSON.stringify(token, null, 2).replace(/"([^"]+)":/g, "$1:")} 
@@ -3628,9 +3373,9 @@ var typescriptTokens = ({ "color-scheme": colorScheme2, theme }) => {
             destination: `${colorScheme2}.ts`,
             format: jsTokens.name,
             filter: (token) => {
-              if (pathStartsWithOneOf(["border-width", "letter-spacing", "border-radius"], token) && !R18.includes("semantic", token.filePath))
+              if (pathStartsWithOneOf(["border-width", "letter-spacing", "border-radius"], token) && !R19.includes("semantic", token.filePath))
                 return false;
-              const isSemanticColor = R18.includes("semantic", token.filePath) && typeEquals(["color"], token);
+              const isSemanticColor = R19.includes("semantic", token.filePath) && typeEquals(["color"], token);
               const wantedTypes = typeEquals(["shadow", "dimension", "typography", "opacity"], token);
               return isSemanticColor || wantedTypes;
             }
@@ -3695,68 +3440,231 @@ var typographyVariables = ({ theme, typography: typography2 }) => {
   };
 };
 
-// src/tokens/process/utils/getMultidimensionalThemes.ts
-import chalk3 from "chalk";
-import { kebabCase } from "change-case";
-import * as R19 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 keys3 = R19.keys(grouped$themes);
-  const nonDependentKeys = keys3.filter((x) => ![...ALL_DEPENDENT_ON, ...dimensions].includes(x));
-  if (verboseLogging) {
-    console.log(chalk3.cyan(`\u{1F50E} Finding theme permutations for ${dimensions}`));
-    console.log(chalk3.cyan(`   (ignoring permutations for ${nonDependentKeys})`));
-  }
-  return permutations.filter((val) => {
-    const filters = nonDependentKeys.map((x) => val.permutation[x] === grouped$themes[x][0].name);
-    return filters.every((x) => x);
-  });
-};
-var processed = Symbol("Type brand for ProcessedThemeObject");
-function isProcessed(theme) {
-  return Boolean(theme[processed]);
-}
-function processThemeObject(theme) {
-  if (isProcessed(theme)) {
-    return theme;
-  }
-  const result = { ...theme, [processed]: true };
-  if (result.group) {
-    result.group = kebabCase(result.group);
-  }
-  result.name = kebabCase(result.name);
-  return result;
-}
-function groupThemes(themes) {
-  const groups = {};
-  for (const rawTheme of themes) {
-    const theme = processThemeObject(rawTheme);
-    if (theme.group) {
-      const groupKey = theme.group;
-      groups[groupKey] = [...groups[groupKey] ?? [], theme];
-    } else {
-      throw new Error(
-        `Theme ${theme.name} does not have a group property, which is required for multi-dimensional theming.`
-      );
-    }
-  }
-  return groups;
-}
-var hasUnknownProps = R19.pipe(R19.values, R19.none(R19.equals("unknown")), R19.not);
-function permutateThemes(groups) {
-  const separator = "_";
-  const permutations = cartesian(Object.values(groups));
-  const permutatedThemes = permutations.map((perm) => {
-    const permutatedTheme = perm.reduce(
-      (acc, theme) => {
-        const { group, name, selectedTokenSets } = theme;
+// ../../node_modules/@tokens-studio/types/dist/constants/BoxShadowTypes.js
+var BoxShadowTypes;
+(function(BoxShadowTypes2) {
+  BoxShadowTypes2["DROP_SHADOW"] = "dropShadow";
+  BoxShadowTypes2["INNER_SHADOW"] = "innerShadow";
+})(BoxShadowTypes || (BoxShadowTypes = {}));
+
+// ../../node_modules/@tokens-studio/types/dist/constants/ColorModifierTypes.js
+var ColorModifierTypes;
+(function(ColorModifierTypes2) {
+  ColorModifierTypes2["LIGHTEN"] = "lighten";
+  ColorModifierTypes2["DARKEN"] = "darken";
+  ColorModifierTypes2["MIX"] = "mix";
+  ColorModifierTypes2["ALPHA"] = "alpha";
+})(ColorModifierTypes || (ColorModifierTypes = {}));
+
+// ../../node_modules/@tokens-studio/types/dist/constants/ColorSpaceTypes.js
+var ColorSpaceTypes;
+(function(ColorSpaceTypes2) {
+  ColorSpaceTypes2["LCH"] = "lch";
+  ColorSpaceTypes2["SRGB"] = "srgb";
+  ColorSpaceTypes2["P3"] = "p3";
+  ColorSpaceTypes2["HSL"] = "hsl";
+})(ColorSpaceTypes || (ColorSpaceTypes = {}));
+
+// ../../node_modules/@tokens-studio/types/dist/constants/Properties.js
+var Properties;
+(function(Properties2) {
+  Properties2["sizing"] = "sizing";
+  Properties2["height"] = "height";
+  Properties2["width"] = "width";
+  Properties2["spacing"] = "spacing";
+  Properties2["verticalPadding"] = "verticalPadding";
+  Properties2["horizontalPadding"] = "horizontalPadding";
+  Properties2["paddingTop"] = "paddingTop";
+  Properties2["paddingRight"] = "paddingRight";
+  Properties2["paddingBottom"] = "paddingBottom";
+  Properties2["paddingLeft"] = "paddingLeft";
+  Properties2["itemSpacing"] = "itemSpacing";
+  Properties2["fill"] = "fill";
+  Properties2["backgroundBlur"] = "backgroundBlur";
+  Properties2["border"] = "border";
+  Properties2["borderTop"] = "borderTop";
+  Properties2["borderRight"] = "borderRight";
+  Properties2["borderBottom"] = "borderBottom";
+  Properties2["borderLeft"] = "borderLeft";
+  Properties2["borderColor"] = "borderColor";
+  Properties2["borderRadius"] = "borderRadius";
+  Properties2["borderRadiusTopLeft"] = "borderRadiusTopLeft";
+  Properties2["borderRadiusTopRight"] = "borderRadiusTopRight";
+  Properties2["borderRadiusBottomRight"] = "borderRadiusBottomRight";
+  Properties2["borderRadiusBottomLeft"] = "borderRadiusBottomLeft";
+  Properties2["borderWidth"] = "borderWidth";
+  Properties2["borderWidthTop"] = "borderWidthTop";
+  Properties2["borderWidthRight"] = "borderWidthRight";
+  Properties2["borderWidthBottom"] = "borderWidthBottom";
+  Properties2["borderWidthLeft"] = "borderWidthLeft";
+  Properties2["boxShadow"] = "boxShadow";
+  Properties2["opacity"] = "opacity";
+  Properties2["fontFamilies"] = "fontFamilies";
+  Properties2["fontWeights"] = "fontWeights";
+  Properties2["fontSizes"] = "fontSizes";
+  Properties2["lineHeights"] = "lineHeights";
+  Properties2["typography"] = "typography";
+  Properties2["composition"] = "composition";
+  Properties2["letterSpacing"] = "letterSpacing";
+  Properties2["paragraphSpacing"] = "paragraphSpacing";
+  Properties2["textCase"] = "textCase";
+  Properties2["dimension"] = "dimension";
+  Properties2["textDecoration"] = "textDecoration";
+  Properties2["asset"] = "asset";
+  Properties2["tokenValue"] = "tokenValue";
+  Properties2["value"] = "value";
+  Properties2["tokenName"] = "tokenName";
+  Properties2["description"] = "description";
+})(Properties || (Properties = {}));
+
+// ../../node_modules/@tokens-studio/types/dist/constants/TokenSetStatus.js
+var TokenSetStatus;
+(function(TokenSetStatus2) {
+  TokenSetStatus2["DISABLED"] = "disabled";
+  TokenSetStatus2["SOURCE"] = "source";
+  TokenSetStatus2["ENABLED"] = "enabled";
+})(TokenSetStatus || (TokenSetStatus = {}));
+
+// ../../node_modules/@tokens-studio/types/dist/constants/TokenTypes.js
+var TokenTypes;
+(function(TokenTypes2) {
+  TokenTypes2["OTHER"] = "other";
+  TokenTypes2["COLOR"] = "color";
+  TokenTypes2["BORDER_RADIUS"] = "borderRadius";
+  TokenTypes2["SIZING"] = "sizing";
+  TokenTypes2["SPACING"] = "spacing";
+  TokenTypes2["TEXT"] = "text";
+  TokenTypes2["TYPOGRAPHY"] = "typography";
+  TokenTypes2["OPACITY"] = "opacity";
+  TokenTypes2["BORDER_WIDTH"] = "borderWidth";
+  TokenTypes2["STROKE_STYLE"] = "strokeStyle";
+  TokenTypes2["BOX_SHADOW"] = "boxShadow";
+  TokenTypes2["FONT_FAMILIES"] = "fontFamilies";
+  TokenTypes2["FONT_WEIGHTS"] = "fontWeights";
+  TokenTypes2["LINE_HEIGHTS"] = "lineHeights";
+  TokenTypes2["FONT_SIZES"] = "fontSizes";
+  TokenTypes2["LETTER_SPACING"] = "letterSpacing";
+  TokenTypes2["PARAGRAPH_SPACING"] = "paragraphSpacing";
+  TokenTypes2["PARAGRAPH_INDENT"] = "paragraphIndent";
+  TokenTypes2["TEXT_DECORATION"] = "textDecoration";
+  TokenTypes2["TEXT_CASE"] = "textCase";
+  TokenTypes2["COMPOSITION"] = "composition";
+  TokenTypes2["DIMENSION"] = "dimension";
+  TokenTypes2["BORDER"] = "border";
+  TokenTypes2["ASSET"] = "asset";
+  TokenTypes2["BOOLEAN"] = "boolean";
+  TokenTypes2["NUMBER"] = "number";
+})(TokenTypes || (TokenTypes = {}));
+
+// ../../node_modules/@tokens-studio/types/dist/constants/BorderValues.js
+var BorderValues;
+(function(BorderValues2) {
+  BorderValues2["BORDER_COLOR"] = "color";
+  BorderValues2["BORDER_WIDTH"] = "width";
+  BorderValues2["BORDER_STYLE"] = "style";
+})(BorderValues || (BorderValues = {}));
+
+// ../../node_modules/@tokens-studio/types/dist/constants/StrokeStyleValues.js
+var StrokeStyleValues;
+(function(StrokeStyleValues2) {
+  StrokeStyleValues2["SOLID"] = "solid";
+  StrokeStyleValues2["DASHED"] = "dashed";
+  StrokeStyleValues2["DOTTED"] = "dotted";
+  StrokeStyleValues2["DOUBLE"] = "double";
+  StrokeStyleValues2["GROOVE"] = "groove";
+  StrokeStyleValues2["RIDGE"] = "ridge";
+  StrokeStyleValues2["OUTSET"] = "outset";
+  StrokeStyleValues2["INSET"] = "inset";
+})(StrokeStyleValues || (StrokeStyleValues = {}));
+
+// ../../node_modules/@tokens-studio/types/dist/constants/BoxShadowValues.js
+var BoxShadowValues;
+(function(BoxShadowValues2) {
+  BoxShadowValues2["TYPE"] = "type";
+  BoxShadowValues2["COLOR"] = "color";
+  BoxShadowValues2["X"] = "x";
+  BoxShadowValues2["Y"] = "y";
+  BoxShadowValues2["BLUR"] = "blur";
+  BoxShadowValues2["SPREAD"] = "spread";
+  BoxShadowValues2["BLEND_MODE"] = "blendMode";
+})(BoxShadowValues || (BoxShadowValues = {}));
+
+// ../../node_modules/@tokens-studio/types/dist/constants/TypographyValues.js
+var TypographyValues;
+(function(TypographyValues2) {
+  TypographyValues2["FONT_FAMILY"] = "fontFamily";
+  TypographyValues2["FONT_WEIGHT"] = "fontWeight";
+  TypographyValues2["LINE_HEIGHT"] = "lineHeight";
+  TypographyValues2["FONT_SIZE"] = "fontSize";
+  TypographyValues2["LETTER_SPACING"] = "letterSpacing";
+  TypographyValues2["PARAGRAPH_SPACING"] = "paragraphSpacing";
+  TypographyValues2["PARAGRAPH_INDENT"] = "paragraphIndent";
+  TypographyValues2["TEXT_DECORATION"] = "textDecoration";
+  TypographyValues2["TEXT_CASE"] = "textCase";
+})(TypographyValues || (TypographyValues = {}));
+
+// src/tokens/process/utils/getMultidimensionalThemes.ts
+import chalk4 from "chalk";
+import { kebabCase } from "change-case";
+import * as R20 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 keys3 = R20.keys(grouped$themes);
+  const nonDependentKeys = keys3.filter((x) => ![...ALL_DEPENDENT_ON, ...dimensions].includes(x));
+  if (verboseLogging) {
+    console.log(chalk4.cyan(`\u{1F50E} Finding theme permutations for ${dimensions}`));
+    console.log(chalk4.cyan(`   (ignoring permutations for ${nonDependentKeys})`));
+  }
+  return permutations.filter((val) => {
+    const filters = nonDependentKeys.map((x) => val.permutation[x] === grouped$themes[x][0].name);
+    return filters.every((x) => x);
+  });
+};
+var processed = Symbol("Type brand for ProcessedThemeObject");
+function isProcessed(theme) {
+  return Boolean(theme[processed]);
+}
+function processThemeObject(theme) {
+  if (isProcessed(theme)) {
+    return theme;
+  }
+  const result = { ...theme, [processed]: true };
+  if (result.group) {
+    result.group = kebabCase(result.group);
+  }
+  result.name = kebabCase(result.name);
+  return result;
+}
+function groupThemes(themes) {
+  const groups = {};
+  for (const rawTheme of themes) {
+    const theme = processThemeObject(rawTheme);
+    if (theme.group) {
+      const groupKey = theme.group;
+      groups[groupKey] = [...groups[groupKey] ?? [], theme];
+    } else {
+      throw new Error(
+        `Theme ${theme.name} does not have a group property, which is required for multi-dimensional theming.`
+      );
+    }
+  }
+  return groups;
+}
+var hasUnknownProps = R20.pipe(R20.values, R20.none(R20.equals("unknown")), R20.not);
+function permutateThemes(groups) {
+  const separator = "_";
+  const permutations = cartesian(Object.values(groups));
+  const permutatedThemes = permutations.map((perm) => {
+    const permutatedTheme = perm.reduce(
+      (acc, theme) => {
+        const { group, name, selectedTokenSets } = theme;
         let updatedPermutation = acc.permutation;
         if (group) {
-          const groupProp = R19.lensProp(group);
-          updatedPermutation = R19.set(groupProp, name, updatedPermutation);
+          const groupProp = R20.lensProp(group);
+          updatedPermutation = R20.set(groupProp, name, updatedPermutation);
         }
         const updatedName = `${String(acc.name)}${acc ? separator : ""}${name}`;
         const sets = [...acc.selectedTokenSets, ...filterTokenSets(selectedTokenSets)];
@@ -3840,7 +3748,7 @@ var getConfigsForThemeDimensions = (getConfig, processed$themes, dimensions, opt
               obj.filePath = tokenSet;
             }
           });
-          tokenSource.tokens = R20.mergeDeepRight(tokenSource.tokens, tokensWithFilePath);
+          tokenSource.tokens = R21.mergeDeepRight(tokenSource.tokens, tokensWithFilePath);
         }
       }
     } else {
@@ -3927,19 +3835,19 @@ var buildConfigs = {
   // },
 };
 async function processPlatform(options) {
-  const { dry, process: process2, $themes } = options;
+  const { process: process2, $themes } = options;
   const platform = "css";
   const tokenSets = process2 === "format" ? options.tokenSets : void 0;
   const tokensDir = process2 === "build" ? options.tokensDir : void 0;
   buildOptions = options;
-  const processed$themes = $themes.map(processThemeObject).filter((theme) => R21.not(theme.group === "size" && theme.name !== "medium"));
+  const processed$themes = $themes.map(processThemeObject).filter((theme) => R22.not(theme.group === "size" && theme.name !== "medium"));
   const customColors = getCustomColors(processed$themes);
   if (!buildOptions.rootColor) {
-    const firstMainColor = R21.head(customColors);
+    const firstMainColor = R22.head(customColors);
     buildOptions.rootColor = firstMainColor;
-    console.log(`Using first main color; ${chalk4.blue(firstMainColor)}, as ${chalk4.green(`":root"`)} color`);
+    console.log(`Using first main color; ${chalk5.blue(firstMainColor)}, as ${chalk5.green(`":root"`)} color`);
   }
-  const buildAndSdConfigs = R21.map((buildConfig) => {
+  const buildAndSdConfigs = R22.map((buildConfig) => {
     const sdConfigs = getConfigsForThemeDimensions(buildConfig.getConfig, processed$themes, buildConfig.dimensions, {
       tokensDir,
       tokenSets
@@ -3971,19 +3879,19 @@ async function processPlatform(options) {
     types: [initResult]
   };
   try {
-    for (const [buildName, { buildConfig, sdConfigs }] of R21.toPairs(buildAndSdConfigs)) {
+    for (const [buildName, { buildConfig, sdConfigs }] of R22.toPairs(buildAndSdConfigs)) {
       if (!(buildConfig.enabled?.() ?? true)) {
         continue;
       }
       if (sdConfigs.length > 0) {
         console.log(`
-\u{1F371} Building ${chalk4.green(buildConfig.name ?? buildName)}`);
+\u{1F371} Building ${chalk5.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 = R21.isNil(buildConfig.log) ? modeMessage : buildConfig?.log(sdConfig);
+            const logMessage = R22.isNil(buildConfig.log) ? modeMessage : buildConfig?.log(sdConfig);
             console.log(logMessage);
             const sdOptions = { cache: true };
             const sdExtended = await sd.extend(config);
@@ -4015,7 +3923,7 @@ async function processPlatform(options) {
 }
 async function createColorTypeDeclaration(colors2) {
   console.log(`
-\u{1F371} Building ${chalk4.green("type declarations")}`);
+\u{1F371} Building ${chalk5.green("type declarations")}`);
   const typeDeclaration = `
 import type {} from '@digdir/designsystemet-react/colors';
 
@@ -4028,70 +3936,6 @@ ${colors2.map((color) => `    ${color}: never;`).join("\n")}
   return typeDeclaration;
 }
 
-// src/tokens/format.ts
-var createThemeCSSFiles = (processedBuilds) => {
-  const groupedByTheme = {};
-  for (const [_, buildResults] of Object.entries(R22.dissoc("types", processedBuilds))) {
-    for (const buildResult of buildResults) {
-      const previous = groupedByTheme[buildResult.permutation.theme] ?? [];
-      groupedByTheme[buildResult.permutation.theme] = R22.concat(previous, buildResult.formatted);
-    }
-  }
-  const sortOrder = [
-    "color-scheme/light",
-    "typography/secondary",
-    "semantic",
-    "color-scheme/dark",
-    "color-scheme/contrast",
-    "typography/primary",
-    "color/"
-  ];
-  const sortByDefinedOrder = R22.sortBy((file) => {
-    const filePath = file.destination || "";
-    const sortIndex = sortOrder.findIndex((sortElement) => {
-      if (sortElement.endsWith("/")) {
-        return filePath.includes(sortElement);
-      }
-      return filePath.includes(`${sortElement}.css`);
-    });
-    if (sortIndex === -1) {
-      console.error(
-        chalk5.yellow("WARNING: CSS section does not have a defined sort order:", filePath.replace(".css", ""))
-      );
-      console.log(
-        chalk5.dim(
-          `
-The section will currently be added to the end of the entry file, but the exact
-order may change due to nondeterminism.`.trim()
-        )
-      );
-      return Infinity;
-    }
-    return sortIndex;
-  });
-  const header = `@charset "UTF-8";
-
-@layer ds.theme, ds.base, ds.utilities, ds.components;
-
-/* This file is generated by ${package_default.name}@${package_default.version} */
-
-`;
-  const sortAlphabetically = R22.sort(R22.ascend((x) => x.destination || ""));
-  const pickOutputs = R22.map(R22.view(R22.lensProp("output")));
-  const themeCSSFile = R22.pipe(
-    sortAlphabetically,
-    sortByDefinedOrder,
-    pickOutputs,
-    R22.join("\n"),
-    (content) => header + content
-  );
-  const themeCSSFiles = Object.entries(groupedByTheme).map(([theme, files]) => ({
-    destination: `${theme}.css`,
-    output: themeCSSFile(files)
-  }));
-  return themeCSSFiles;
-};
-
 // src/tokens/build.ts
 async function write(files, outDir, dry) {
   for (const { destination, output } of files) {
@@ -4108,6 +3952,12 @@ var buildTokens = async (options) => {
   const outDir = path2.resolve(options.outDir);
   const tokensDir = path2.resolve(options.tokensDir);
   const $themes = JSON.parse(await readFile(`${tokensDir}/$themes.json`));
+  let $designsystemet;
+  try {
+    const $designsystemetContent = await readFile(`${tokensDir}/$designsystemet.json`);
+    $designsystemet = JSON.parse($designsystemetContent);
+  } catch (error) {
+  }
   console.log(`
 \u{1F3D7}\uFE0F Start building tokens in ${chalk6.green(tokensDir)}`);
   const processedBuilds = await processPlatform({
@@ -4125,7 +3975,12 @@ var buildTokens = async (options) => {
   for (const { formatted } of processedBuilds.types) {
     await write(formatted, outDir, options.dry);
   }
-  await write(createThemeCSSFiles(processedBuilds), outDir, options.dry);
+  const fileHeader2 = R23.join("")([
+    defaultFileHeader,
+    $designsystemet ? `
+design-tokens: v${$designsystemet.version} ` : ""
+  ]);
+  await write(createThemeCSSFiles({ processedBuilds, fileHeader: fileHeader2 }), outDir, options.dry);
   console.log(`
 \u2705 Finished building tokens!`);
   return processedBuilds;
@@ -4134,7 +3989,7 @@ var buildTokens = async (options) => {
 // src/tokens/create/write.ts
 import path3 from "node:path";
 import chalk7 from "chalk";
-import * as R23 from "ramda";
+import * as R24 from "ramda";
 
 // src/tokens/create/generators/$designsystemet.ts
 function generate$Designsystemet() {
@@ -4171,6 +4026,174 @@ function generate$Metadata(schemes, themes, colors2) {
   };
 }
 
+// src/tokens/create/generators/$themes.ts
+var capitalize = (word) => word.charAt(0).toUpperCase() + word.slice(1);
+async function createHash(text, algo = "SHA-1") {
+  const crypto = globalThis.crypto;
+  return Array.from(
+    new Uint8Array(await crypto.subtle.digest(algo, new TextEncoder().encode(text))),
+    (byte) => byte.toString(16).padStart(2, "0")
+  ).join("");
+}
+async function generate$Themes(colorSchemes, themes, colors2) {
+  return [
+    ...generateSizeGroup(),
+    ...await generateThemesGroup(themes),
+    ...generateTypographyGroup(themes),
+    ...generateColorSchemesGroup(colorSchemes, themes),
+    generateSemanticGroup(),
+    ...await generateColorGroup("main", colors2),
+    ...await generateColorGroup("support", colors2)
+  ];
+}
+function generateSizeGroup() {
+  return [
+    {
+      id: "8b2c8cc86611a34b135cb22948666779361fd729",
+      name: "medium",
+      $figmaStyleReferences: {},
+      selectedTokenSets: {
+        "primitives/modes/size/medium": TokenSetStatus.SOURCE,
+        "primitives/modes/size/global": TokenSetStatus.ENABLED,
+        "primitives/modes/typography/size/medium": TokenSetStatus.ENABLED
+      },
+      $figmaCollectionId: "VariableCollectionId:36248:20757",
+      $figmaModeId: "41630:1",
+      group: "Size"
+    },
+    {
+      id: "d49b9eebeb48a4f165a74b7261733d0a73370f0e",
+      name: "large",
+      $figmaStyleReferences: {},
+      selectedTokenSets: {
+        "primitives/modes/size/large": TokenSetStatus.SOURCE,
+        "primitives/modes/size/global": TokenSetStatus.ENABLED,
+        "primitives/modes/typography/size/large": TokenSetStatus.ENABLED
+      },
+      $figmaCollectionId: "VariableCollectionId:36248:20757",
+      $figmaModeId: "41630:2",
+      group: "Size"
+    },
+    {
+      id: "fb11567729c298ca37c9da4e3a27716a23480824",
+      name: "small",
+      $figmaStyleReferences: {},
+      selectedTokenSets: {
+        "primitives/modes/size/small": TokenSetStatus.SOURCE,
+        "primitives/modes/size/global": TokenSetStatus.ENABLED,
+        "primitives/modes/typography/size/small": TokenSetStatus.ENABLED
+      },
+      $figmaCollectionId: "VariableCollectionId:36248:20757",
+      $figmaModeId: "41630:3",
+      group: "Size"
+    }
+  ];
+}
+var colorSchemeDefaults = {
+  light: {
+    name: "Light",
+    selectedTokenSets: {},
+    id: "0daa3ca0b427b9349da7e7dc00101b5668972926",
+    $figmaCollectionId: "VariableCollectionId:34811:5472",
+    $figmaModeId: "34811:0"
+  },
+  dark: {
+    name: "Dark",
+    selectedTokenSets: {},
+    id: "9ebd8aed52afbffc17e2666e8b4653a53498b257",
+    $figmaCollectionId: "VariableCollectionId:34811:5472",
+    $figmaModeId: "34811:1"
+  },
+  contrast: {
+    name: "Contrast",
+    selectedTokenSets: {},
+    id: "9ebd8aed52afbffc17e2666e8b4653a53498b123",
+    $figmaCollectionId: "VariableCollectionId:34811:5472",
+    $figmaModeId: "34811:2"
+  }
+};
+function generateColorSchemesGroup(colorSchemes, themes) {
+  return colorSchemes.map(
+    (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"
+    })
+  );
+}
+async function generateThemesGroup(themes) {
+  return Promise.all(
+    themes.map(
+      async (theme, index) => ({
+        id: await createHash(theme),
+        $figmaCollectionId: "VariableCollectionId:36528:61712",
+        $figmaModeId: `40960:${index + 6}`,
+        // Start on 6 in Token Studio and Community file for some reason
+        name: theme,
+        selectedTokenSets: {
+          [`themes/${theme}`]: TokenSetStatus.ENABLED
+        },
+        group: "Theme"
+      })
+    )
+  );
+}
+function generateSemanticGroup() {
+  return {
+    id: "541629445ef90ad5363f9e88f52a1ccb617e6f84",
+    name: "Semantic",
+    selectedTokenSets: {
+      "semantic/style": TokenSetStatus.ENABLED,
+      "semantic/color": TokenSetStatus.ENABLED,
+      "primitives/globals": TokenSetStatus.SOURCE
+    },
+    $figmaCollectionId: "VariableCollectionId:34811:5976",
+    $figmaModeId: "34811:5",
+    group: "Semantic"
+  };
+}
+async function generateColorGroup(group, colors2) {
+  return Promise.all(
+    Object.entries(colors2[group]).map(
+      async ([color]) => ({
+        id: await createHash(`${group}-${color}`),
+        name: color,
+        selectedTokenSets: {
+          [`semantic/modes/${group}-color/${color}`]: TokenSetStatus.ENABLED
+        },
+        group: `${capitalize(group)} color`
+      })
+    )
+  );
+}
+function generateTypographyGroup(themes) {
+  return [
+    {
+      id: "368d753fcac4455f289500eaa42e70dc0a03522f",
+      $figmaCollectionId: "VariableCollectionId:36248:20769",
+      $figmaModeId: "36248:2",
+      name: "Primary",
+      selectedTokenSets: Object.fromEntries(
+        themes.map((theme) => [`primitives/modes/typography/primary/${theme}`, TokenSetStatus.ENABLED])
+      ),
+      group: "Typography"
+    },
+    {
+      id: "264b8bd1d40b364e1ea3acf09e49795ddd4c513c",
+      $figmaCollectionId: "VariableCollectionId:36248:20769",
+      $figmaModeId: "36248:3",
+      name: "Secondary",
+      selectedTokenSets: Object.fromEntries(
+        themes.map((theme) => [`primitives/modes/typography/secondary/${theme}`, TokenSetStatus.ENABLED])
+      ),
+      group: "Typography"
+    }
+  ];
+}
+
 // src/tokens/create/write.ts
 var stringify = (data) => JSON.stringify(data, null, 2);
 var writeTokens = async (options) => {
@@ -4193,12 +4216,12 @@ var writeTokens = async (options) => {
     }
   } catch (error) {
   }
-  const concatThemeNames = R23.pipe(
-    R23.filter((obj) => R23.toLower(obj.group || "") === "theme"),
-    R23.map(R23.prop("name")),
+  const concatThemeNames = R24.pipe(
+    R24.filter((obj) => R24.toLower(obj.group || "") === "theme"),
+    R24.map(R24.prop("name")),
     // New theme is added to the end of the list so we keep the same order from config and Token Studio
-    R23.append(themeName),
-    R23.uniq
+    R24.append(themeName),
+    R24.uniq
   );
   const themes = concatThemeNames(themeObjects);
   console.log(`
@@ -4275,15 +4298,15 @@ function makeTokenCommands() {
     const propsFromJson = configFile?.config;
     if (propsFromJson) {
       const themeColors = Object.values(propsFromJson?.themes ?? {}).map(
-        (x) => /* @__PURE__ */ new Set([...R24.keys(x.colors.main), ...R24.keys(x.colors.support)])
+        (x) => /* @__PURE__ */ new Set([...R25.keys(x.colors.main), ...R25.keys(x.colors.support)])
       );
-      if (!R24.all(R24.equals(R24.__, themeColors[0]), themeColors)) {
+      if (!R25.all(R25.equals(R25.__, themeColors[0]), themeColors)) {
         console.error(
           chalk8.redBright(
             `In config ${configFile.path}, all themes must have the same custom color names, but we found:`
           )
         );
-        const themeNames = R24.keys(propsFromJson.themes ?? {});
+        const themeNames = R25.keys(propsFromJson.themes ?? {});
         themeColors.forEach((colors2, index) => {
           const colorNames = Array.from(colors2);
           console.log(`  - ${themeNames[index]}: ${colorNames.join(", ")}`);
@@ -4292,7 +4315,7 @@ function makeTokenCommands() {
         process.exit(1);
       }
     }
-    const noUndefined = R24.reject(R24.isNil);
+    const noUndefined = R25.reject(R25.isNil);
     const getThemeOptions = (optionGetter) => noUndefined({
       colors: noUndefined({
         main: optionGetter(cmd, "mainColors"),
@@ -4307,10 +4330,10 @@ function makeTokenCommands() {
     const unvalidatedConfig = noUndefined({
       outDir: propsFromJson?.outDir ?? getCliOption(cmd, "outDir"),
       clean: propsFromJson?.clean ?? getCliOption(cmd, "clean"),
-      themes: propsFromJson?.themes ? R24.map((jsonThemeValues) => {
+      themes: propsFromJson?.themes ? R25.map((jsonThemeValues) => {
         const defaultThemeValues = getThemeOptions(getDefaultCliOption);
         const cliThemeValues = getThemeOptions(getSuppliedCliOption);
-        return R24.mergeDeepRight(defaultThemeValues, R24.mergeDeepRight(jsonThemeValues, cliThemeValues));
+        return R25.mergeDeepRight(defaultThemeValues, R25.mergeDeepRight(jsonThemeValues, cliThemeValues));
       }, propsFromJson.themes) : (
         // If there are no themes specified in the JSON config, we use both explicit
         // and default theme options from the CLI.