@digdir/designsystemet 1.4.0 → 1.5.0

package/dist/bin/designsystemet.js

@@ -3,7 +3,7 @@
 // bin/designsystemet.ts
 import { Argument, createCommand, program } from "@commander-js/extra-typings";
 import pc11 from "picocolors";
-import * as R24 from "ramda";
+import * as R29 from "ramda";
 
 // src/colors/colorMetadata.ts
 import * as R from "ramda";
@@ -378,7 +378,7 @@ var cssClassRename = (dictionary) => ({
 var cssVarRename = (dictionary) => ({
   postcssPlugin: `Replaces CSS variables ${hash(dictionary)}`,
   Declaration(decl) {
-    const { value, prop: prop2 } = decl;
+    const { value, prop: prop5 } = decl;
     const deleted = /* @__PURE__ */ new Set();
     for (const [from, to] of Object.entries(dictionary)) {
       if (R3.isNotEmpty(to)) {
@@ -389,8 +389,8 @@ var cssVarRename = (dictionary) => ({
           decl.value = value.replace(from, to);
           continue;
         }
-        if (R3.includes(from, prop2) && decl.variable) {
-          decl.prop = prop2.replace(from, to);
+        if (R3.includes(from, prop5) && decl.variable) {
+          decl.prop = prop5.replace(from, to);
         }
       }
     }
@@ -862,7 +862,7 @@ var migrations_default = {
 // src/tokens/build.ts
 import path from "path";
 import pc7 from "picocolors";
-import * as R16 from "ramda";
+import * as R21 from "ramda";
 
 // src/tokens/process/output/declarations.ts
 import pc5 from "picocolors";
@@ -870,7 +870,7 @@ import pc5 from "picocolors";
 // package.json
 var package_default = {
   name: "@digdir/designsystemet",
-  version: "1.4.0",
+  version: "1.5.0",
   description: "CLI for Designsystemet",
   author: "Designsystemet team",
   engines: {
@@ -953,7 +953,7 @@ var package_default = {
     "@types/apca-w3": "^0.1.3",
     "@types/chroma-js": "^3.1.1",
     "@types/fs-extra": "^11.0.4",
-    "@types/node": "^22.18.0",
+    "@types/node": "^22.18.1",
     "@types/object-hash": "^3.0.6",
     "@types/ramda": "^0.31.0",
     "fs-extra": "^11.3.1",
@@ -966,7 +966,7 @@ var package_default = {
 
 // src/tokens/process/platform.ts
 import pc4 from "picocolors";
-import * as R14 from "ramda";
+import * as R19 from "ramda";
 import StyleDictionary2 from "style-dictionary";
 
 // src/tokens/types.ts
@@ -977,7 +977,7 @@ var colorCategories = {
 
 // src/tokens/process/configs.ts
 import { register } from "@tokens-studio/sd-transforms";
-import * as R13 from "ramda";
+import * as R18 from "ramda";
 import StyleDictionary from "style-dictionary";
 
 // src/tokens/utils.ts
@@ -1000,7 +1000,10 @@ var pathStartsWithOneOf = R5.curry(
       return false;
     }
     const tokenPath = mapToLowerCase(token.path);
-    const matchPathsStartingWith = R5.map((path5) => R5.startsWith([path5], tokenPath), mapToLowerCase(paths));
+    const matchPathsStartingWith = R5.map((pathOrString) => {
+      const path5 = typeof pathOrString === "string" ? [pathOrString] : pathOrString;
+      return R5.startsWith(mapToLowerCase(path5), tokenPath);
+    }, paths);
     return hasAnyTruth(matchPathsStartingWith);
   }
 );
@@ -1024,11 +1027,11 @@ function isColorCategoryToken(token, category) {
 var isDigit = (s) => /^\d+$/.test(s);
 function traverseObj(obj, fn) {
   for (const key in obj) {
-    const prop2 = obj[key];
-    if (prop2 != null) {
-      fn.apply(null, [obj, key, prop2]);
-      if (typeof prop2 === "object") {
-        traverseObj(prop2, fn);
+    const prop5 = obj[key];
+    if (prop5 != null) {
+      fn.apply(null, [obj, key, prop5]);
+      if (typeof prop5 === "object") {
+        traverseObj(prop5, fn);
       }
     }
   }
@@ -1048,9 +1051,26 @@ function inlineTokens(shouldInline, tokens) {
     return tokenWithInlinedRefs;
   });
 }
+var sizeMap = {
+  xsmall: "xs",
+  small: "sm",
+  medium: "md",
+  large: "lg",
+  xlarge: "xl"
+};
+function shortSizeName(size2) {
+  return sizeMap[size2] ?? size2;
+}
+var sizeComparator = (size2) => {
+  const sortIndex = Object.entries(sizeMap).findIndex(([key, val]) => key === size2 || val === size2);
+  return sortIndex ?? 0;
+};
+function orderBySize(sizes) {
+  return R5.sortBy(sizeComparator, sizes);
+}
 
 // src/tokens/process/configs/color.ts
-import * as R10 from "ramda";
+import * as R13 from "ramda";
 
 // src/tokens/process/formats/css/color.ts
 import * as R6 from "ramda";
@@ -1108,10 +1128,10 @@ ${selector} ${content} ${autoSelectorContent}
 };
 var colorCategory = {
   name: "ds/css-colorcategory",
-  format: async ({ dictionary, options, platform }) => {
+  format: async ({ dictionary, file, options, platform }) => {
     const { outputReferences, usesDtcg } = options;
-    const { selector, layer, files } = platform;
-    const destination = files?.[0]?.destination;
+    const { selector, layer } = platform;
+    const destination = file.destination;
     const format = R6.compose(
       createPropertyFormatter({
         outputReferences,
@@ -1148,6 +1168,10 @@ ${selector} ${content}
 };
 
 // src/tokens/process/formats/css/semantic.ts
+import * as R8 from "ramda";
+import { createPropertyFormatter as createPropertyFormatter3 } from "style-dictionary/utils";
+
+// src/tokens/process/formats/css/size.ts
 import * as R7 from "ramda";
 import { createPropertyFormatter as createPropertyFormatter2 } from "style-dictionary/utils";
 var isNumericBorderRadiusToken = (t) => t.path[0] === "border-radius" && isDigit(t.path[1]);
@@ -1155,12 +1179,20 @@ var isNumericSizeToken = (t) => pathStartsWithOneOf(["size"], t) && isDigit(t.pa
 var isSizeToken = (t) => pathStartsWithOneOf(["size"], t);
 var isInlineTokens = R7.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)");
-  const round = `round(down, ${calc}, 1px)`;
+  const [name, value] = format(token).replace(/;$/, "").split(": ");
+  let calc;
+  let round;
+  if (token.path[1] === "unit") {
+    calc = `calc(1rem * ${value})`;
+  } else if (value.startsWith("floor")) {
+    calc = value.replace(/^floor\((.*)\)$/, "calc($1)");
+    round = `round(down, ${calc}, 1px)`;
+  } else {
+    calc = value.includes("*") ? `calc(${value})` : value;
+  }
   return {
     name,
-    round,
+    round: round ?? calc,
     calc
   };
 };
@@ -1176,18 +1208,21 @@ var formatSizingTokens = (format, tokens) => R7.reduce(
   { tokens: [], round: [], calc: [] },
   tokens
 );
-var sizingTemplate = ({ round, calc }) => `
+var sizingTemplate = ({ round, calc }) => {
+  const usesRounding = round.filter((val, i) => val !== calc[i]);
+  return `
 ${calc.join("\n")}
 
   @supports (width: round(down, .1em, 1px)) {
-${round.join("\n")}
+  ${usesRounding.join("\n  ")}
   }`;
-var semantic = {
-  name: "ds/css-semantic",
-  format: async ({ dictionary, options, platform }) => {
+};
+var size = {
+  name: "ds/css-size",
+  format: async ({ dictionary, file, options, platform }) => {
     const { outputReferences, usesDtcg } = options;
-    const { selector, layer, files } = platform;
-    const destination = files?.[0]?.destination;
+    const { selector, layer } = platform;
+    const destination = file.destination;
     const format = createPropertyFormatter2({
       outputReferences,
       dictionary,
@@ -1195,9 +1230,9 @@ var semantic = {
       usesDtcg
     });
     const tokens = inlineTokens(isInlineTokens, dictionary.allTokens);
-    const filteredTokens = R7.reject((token) => token.name.includes("ds-size-mode-font-size"), tokens);
+    const filteredTokens = R7.reject((token) => R7.equals(["_size", "mode-font-size"], token.path), tokens);
     const [sizingTokens, restTokens] = R7.partition(
-      (t) => pathStartsWithOneOf(["_size"], t) && isDigit(t.path[1]),
+      (t) => pathStartsWithOneOf(["_size"], t) && (isDigit(t.path[1]) || t.path[1] === "unit"),
       filteredTokens
     );
     const formattedSizingTokens = formatSizingTokens(format, sizingTokens);
@@ -1210,64 +1245,56 @@ var semantic = {
       formatted: t
     }));
     buildOptions.buildTokenFormats[destination] = [...formattedMap, ...formattedSizingMap];
-    const sizingSnippet = sizingTemplate(formattedSizingTokens);
-    const formattedTokens = formattedMap.map(R7.view(R7.lensProp("formatted"))).concat(sizingSnippet);
-    const content = `{
+    const formattedTokens = [formattedMap.map(R7.prop("formatted")).join("\n"), sizingTemplate(formattedSizingTokens)];
+    const content = `${selector} {
 ${formattedTokens.join("\n")}
 }
 `;
     const body = R7.isNotNil(layer) ? `@layer ${layer} {
-${selector} ${content}
+${content}
 }
-` : `${selector} ${content}
+` : `${content}
 `;
     return body;
   }
 };
 
-// src/tokens/process/formats/css/typography.ts
-import * as R8 from "ramda";
-import { createPropertyFormatter as createPropertyFormatter3 } from "style-dictionary/utils";
-var typographyFontFamilyPredicate = R8.allPass([
-  R8.pathSatisfies(R8.includes("typography"), ["path"]),
-  R8.pathSatisfies(R8.includes("fontFamily"), ["path"])
-]);
-var typography = {
-  name: "ds/css-typography",
-  format: async ({ dictionary, options, platform }) => {
+// src/tokens/process/formats/css/semantic.ts
+var semantic = {
+  name: "ds/css-semantic",
+  format: async ({ dictionary, file, options, platform }) => {
     const { outputReferences, usesDtcg } = options;
-    const { selector, layer, files } = platform;
-    const destination = files?.[0]?.destination;
+    const { selector, layer } = platform;
+    const destination = file.destination;
     const format = createPropertyFormatter3({
       outputReferences,
       dictionary,
       format: "css",
       usesDtcg
     });
-    const filteredTokens = R8.reject(typographyFontFamilyPredicate, dictionary.allTokens);
-    const formattedMap = filteredTokens.map((token) => ({
+    const tokens = inlineTokens(isInlineTokens, dictionary.allTokens);
+    const formattedMap = tokens.map((token) => ({
       token,
       formatted: format(token)
     }));
     buildOptions.buildTokenFormats[destination] = formattedMap;
-    const formattedTokens = formattedMap.map(R8.view(R8.lensProp("formatted"))).join("\n");
-    const content = selector ? `${selector} {
+    const formattedTokens = formattedMap.map(R8.prop("formatted")).join("\n");
+    const content = `${selector} {
 ${formattedTokens}
-}` : formattedTokens;
+}
+`;
     const body = R8.isNotNil(layer) ? `@layer ${layer} {
 ${content}
-}` : content;
+}
+` : `${content}
+`;
     return body;
   }
 };
 
-// src/tokens/process/formats/css.ts
-var formats = {
-  colorScheme,
-  colorCategory,
-  semantic,
-  typography
-};
+// src/tokens/process/formats/css/size-mode.ts
+import * as R10 from "ramda";
+import { createPropertyFormatter as createPropertyFormatter4 } from "style-dictionary/utils";
 
 // src/tokens/process/transformers.ts
 import { checkAndEvaluateMath } from "@tokens-studio/sd-transforms";
@@ -1279,18 +1306,22 @@ var sizeRem = {
   transitive: true,
   filter: (token) => {
     const hasWantedType = typeEquals(["dimension", "fontsize"], token);
-    const hasWantedPath = pathStartsWithOneOf(["spacing", "sizing", "border-radius", "font-size"], token);
+    const hasWantedPath = pathStartsWithOneOf([
+      "border-radius",
+      "font-size"
+      /*, ['_size', 'mode-font-size']*/
+    ], token);
     return hasWantedType && hasWantedPath;
   },
   transform: (token, config) => {
     const value = getValue(token);
     if (isPx(value)) {
       const baseFont = config.basePxFontSize || 16;
-      const size = parseInt(value, 10);
-      if (size === 0) {
+      const size2 = parseInt(value, 10);
+      if (size2 === 0) {
         return "0";
       }
-      return `${size / baseFont}rem`;
+      return `${size2 / baseFont}rem`;
     }
     return value;
   }
@@ -1341,6 +1372,154 @@ var dsTransformers = [
   "shadow/css/shorthand"
 ];
 
+// src/tokens/process/formats/css/size-mode.ts
+var formatBaseSizeToken = (size2) => (token) => ({
+  ...token,
+  originalName: token.name,
+  name: `${token.name}--${shortSizeName(size2)}`,
+  $value: token.$value / basePxFontSize
+});
+var sizeMode = {
+  name: "ds/css-size-mode",
+  format: async ({ dictionary, file, options, platform }) => {
+    const { outputReferences, usesDtcg } = options;
+    const { selector, layer, size: size2 } = platform;
+    const destination = file.destination;
+    const format = createPropertyFormatter4({
+      outputReferences,
+      dictionary,
+      format: "css",
+      usesDtcg
+    });
+    const sizeSpecificTokens = dictionary.allTokens.map(formatBaseSizeToken(size2));
+    const sizeSpecificVariables = sizeSpecificTokens.map(format).join("\n");
+    const formattedMap = sizeSpecificTokens.map((token) => ({
+      token,
+      formatted: format({
+        ...token,
+        // Remove the `--<size>` suffix for the token listing, since that is the only token we actually use
+        name: token.originalName
+      })
+    }));
+    buildOptions.buildTokenFormats[destination] = formattedMap;
+    const content = `${selector} /* ${size2} */ {
+${sizeSpecificVariables}
+}`;
+    const body = wrapInLayer(content, layer);
+    const sizes = orderBySize(buildOptions?.sizeModes ?? []).map(shortSizeName);
+    const defaultSize = shortSizeName(buildOptions?.defaultSize ?? "");
+    const sizingToggles = `:root, [data-size] {
+  --ds-size: var(--ds-size--${defaultSize});
+${sizes.map((size3) => `  --ds-size--${size3}: var(--ds-size,);`).join("\n")}
+  --ds-size-mode-font-size:
+${sizes.map((size3) => `    var(--ds-size--${size3}, var(--ds-size-mode-font-size--${size3}))`).join("\n")};
+}`;
+    const sizingHelpers = sizes.map((size3) => `[data-size='${size3}'] { --ds-size: var(--ds-size--${size3}); }`).join("\n");
+    const sharedContent = `${sizingToggles}
+
+${sizingHelpers}`;
+    const sharedBody = shortSizeName(size2) === R10.last(sizes) ? `
+${wrapInLayer(sharedContent, layer)}` : "";
+    return body + sharedBody;
+  }
+};
+function wrapInLayer(content, layer) {
+  return R10.isNotNil(layer) ? `@layer ${layer} {
+${content}
+}
+` : `${content}
+`;
+}
+
+// src/tokens/process/formats/css/typography.ts
+import * as R11 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 typography = {
+  name: "ds/css-typography",
+  format: async ({ dictionary, file, options, platform }) => {
+    const { outputReferences, usesDtcg } = options;
+    const { selector, layer } = platform;
+    const destination = file.destination;
+    const format = createPropertyFormatter5({
+      outputReferences,
+      dictionary,
+      format: "css",
+      usesDtcg
+    });
+    const filteredTokens = R11.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 content = selector ? `${selector} {
+${formattedTokens}
+}` : formattedTokens;
+    const body = R11.isNotNil(layer) ? `@layer ${layer} {
+${content}
+}` : content;
+    return body;
+  }
+};
+
+// src/tokens/process/formats/css/type-scale.ts
+import * as R12 from "ramda";
+import { createPropertyFormatter as createPropertyFormatter6 } from "style-dictionary/utils";
+var typographyFontFamilyPredicate2 = R12.allPass([
+  R12.pathSatisfies(R12.includes("typography"), ["path"]),
+  R12.pathSatisfies(R12.includes("fontFamily"), ["path"])
+]);
+function formatTypographySizeToken(token) {
+  return { ...token, $value: `calc(${token.$value} * var(--_ds-font-size-factor))` };
+}
+var typeScale = {
+  name: "ds/css-type-scale",
+  format: async ({ dictionary, file, options, platform }) => {
+    const { outputReferences, usesDtcg } = options;
+    const { selector, layer } = platform;
+    const destination = file.destination;
+    const format = createPropertyFormatter6({
+      outputReferences,
+      dictionary,
+      format: "css",
+      usesDtcg
+    });
+    const filteredTokens = R12.reject(typographyFontFamilyPredicate2, dictionary.allTokens);
+    const tokens = R12.map(formatTypographySizeToken, filteredTokens);
+    const formattedMap = tokens.map((token) => ({
+      token,
+      formatted: format(token)
+    }));
+    buildOptions.buildTokenFormats[destination] = formattedMap;
+    const formattedTokens = formattedMap.map(R12.prop("formatted")).join("\n");
+    const sizeFactor = `  --_ds-font-size-factor: calc(var(--ds-size-mode-font-size) / (var(--ds-size-base) / ${basePxFontSize}));`;
+    const content = `${selector} {
+${sizeFactor}
+${formattedTokens}
+}`;
+    const body = R12.isNotNil(layer) ? `@layer ${layer} {
+${content}
+}` : content;
+    return body;
+  }
+};
+
+// src/tokens/process/formats/css.ts
+var formats = {
+  colorScheme,
+  colorCategory,
+  semantic,
+  sizeMode,
+  size,
+  typography,
+  typeScale
+};
+
 // src/tokens/process/configs/color.ts
 var colorSchemeVariables = ({ "color-scheme": colorScheme2 = "light", theme }) => {
   const selector = `${colorScheme2 === "light" ? ":root, " : ""}[data-color-scheme="${colorScheme2}"]`;
@@ -1362,7 +1541,7 @@ var colorSchemeVariables = ({ "color-scheme": colorScheme2 = "light", theme }) =
           {
             destination: `color-scheme/${colorScheme2}.css`,
             format: formats.colorScheme.name,
-            filter: (token) => typeEquals("color", token) && !R10.startsWith(["global"], token.path)
+            filter: (token) => typeEquals("color", token) && !R13.startsWith(["global"], token.path)
           }
         ],
         options: {
@@ -1413,7 +1592,7 @@ var colorCategoryVariables = (opts) => ({ "color-scheme": colorScheme2, theme, .
 };
 
 // src/tokens/process/configs/semantic.ts
-import * as R11 from "ramda";
+import * as R14 from "ramda";
 import { outputReferencesFilter } from "style-dictionary/utils";
 var semanticVariables = ({ theme }) => {
   const selector = `:root`;
@@ -1436,9 +1615,12 @@ var semanticVariables = ({ theme }) => {
             destination: `semantic.css`,
             format: formats.semantic.name,
             filter: (token) => {
-              const isUwantedToken = R11.anyPass([R11.includes("primitives/global")])(token.filePath);
-              const isPrivateToken = R11.includes("_", token.path);
-              const unwantedPaths = pathStartsWithOneOf(["font-size", "line-height", "letter-spacing"], token);
+              const isUwantedToken = R14.anyPass([R14.includes("primitives/global")])(token.filePath);
+              const isPrivateToken = R14.includes("_", token.path);
+              const unwantedPaths = pathStartsWithOneOf(
+                ["size", "_size", "font-size", "line-height", "letter-spacing"],
+                token
+              );
               const unwantedTypes = typeEquals(["color", "fontWeight", "fontFamily", "typography"], token);
               const unwantedTokens = !(unwantedPaths || unwantedTypes || isPrivateToken || isUwantedToken);
               return unwantedTokens;
@@ -1448,9 +1630,126 @@ var semanticVariables = ({ theme }) => {
         options: {
           outputReferences: (token, options) => {
             const include = pathStartsWithOneOf(["border-radius"], token);
-            const isWantedSize = pathStartsWithOneOf(["size", "_size"], token) && isDigit(token.path[1]);
-            return (include || isWantedSize) && outputReferencesFilter(token, options);
+            return include && outputReferencesFilter(token, options);
+          }
+        }
+      }
+    }
+  };
+};
+
+// src/tokens/process/configs/size.ts
+import * as R15 from "ramda";
+import { outputReferencesFilter as outputReferencesFilter2 } from "style-dictionary/utils";
+var sizeVariables = ({ theme }) => {
+  const selector = `:root, [data-size]`;
+  const layer = `ds.theme.size`;
+  return {
+    preprocessors: ["tokens-studio"],
+    platforms: {
+      css: {
+        // custom
+        theme,
+        basePxFontSize,
+        selector,
+        layer,
+        //
+        prefix,
+        buildPath: `${theme}/`,
+        transforms: dsTransformers,
+        files: [
+          {
+            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);
+              return pathStartsWithOneOf(["size", "_size"], token) && !(isUwantedToken || isPrivateToken);
+            }
+          }
+        ],
+        options: {
+          outputReferences: (token, options) => {
+            const isWantedSize = pathStartsWithOneOf(["size", "_size"], token) && (isDigit(token.path[1]) || token.path[1] === "unit");
+            return isWantedSize && outputReferencesFilter2(token, options);
+          }
+        }
+      }
+    }
+  };
+};
+
+// src/tokens/process/configs/size-mode.ts
+import * as R16 from "ramda";
+var sizeModeVariables = ({ theme, size: size2 }) => {
+  const selector = `:root`;
+  const layer = `ds.theme.size-mode`;
+  return {
+    preprocessors: ["tokens-studio"],
+    platforms: {
+      css: {
+        // custom
+        size: size2,
+        theme,
+        basePxFontSize,
+        selector,
+        layer,
+        //
+        prefix,
+        buildPath: `${theme}/`,
+        transforms: dsTransformers,
+        files: [
+          {
+            destination: `size-mode/${size2}.css`,
+            format: formats.sizeMode.name,
+            filter: (token) => {
+              return R16.equals(["_size", "mode-font-size"], token.path);
+            }
+          }
+        ]
+      }
+    }
+  };
+};
+
+// src/tokens/process/configs/type-scale.ts
+var typeScaleVariables = ({ theme, size: size2 }) => {
+  const selector = ":root, [data-size]";
+  const layer = `ds.theme.type-scale`;
+  return {
+    usesDtcg: true,
+    preprocessors: ["tokens-studio"],
+    expand: {
+      include: ["typography"]
+    },
+    platforms: {
+      css: {
+        prefix,
+        selector,
+        layer,
+        buildPath: `${theme}/`,
+        basePxFontSize,
+        transforms: [
+          "name/kebab",
+          "ts/size/px",
+          sizeRem.name,
+          "ts/size/lineheight",
+          "ts/typography/fontWeight",
+          typographyName.name
+        ],
+        files: [
+          {
+            destination: `type-scale.css`,
+            format: formats.typeScale.name,
+            filter: (token) => {
+              const included = typeEquals(["typography", "dimension", "fontsize"], token);
+              if (/primitives\/modes\/typography\/(primary|secondary)/.test(token.filePath)) return false;
+              return included && !pathStartsWithOneOf(["spacing", "sizing", "size", "border-width", "border-radius"], token) && (pathStartsWithOneOf(["font-size"], token) || token.path.includes("fontSize"));
+            }
           }
+        ],
+        options: {
+          outputReferences: (token) => pathStartsWithOneOf(["typography"], token) && token.path.includes("fontSize")
         }
       }
     }
@@ -1491,12 +1790,9 @@ var typographyVariables = ({ theme, typography: typography2 }) => {
             destination: `typography/${typography2}.css`,
             format: formats.typography.name,
             filter: (token) => {
-              const included = typeEquals(
-                ["typography", "fontweight", "fontFamily", "lineHeight", "dimension", "font", "fontsize"],
-                token
-              );
+              const included = typeEquals(["fontweight", "fontFamily", "lineHeight", "dimension"], token);
               if (/primitives\/modes\/typography\/(primary|secondary)/.test(token.filePath)) return false;
-              return included && !pathStartsWithOneOf(["spacing", "sizing", "size", "_size", "border-width", "border-radius"], token);
+              return included && !pathStartsWithOneOf(["spacing", "sizing", "size", "_size", "border-width", "border-radius"], token) && !(pathStartsWithOneOf(["typography"], token) && token.path.includes("fontSize"));
             }
           }
         ]
@@ -1671,13 +1967,13 @@ var TypographyValues;
 // src/tokens/process/utils/getMultidimensionalThemes.ts
 import { kebabCase } from "change-case";
 import pc3 from "picocolors";
-import * as R12 from "ramda";
+import * as R17 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 = R12.keys(grouped$themes);
+  const keys3 = R17.keys(grouped$themes);
   const nonDependentKeys = keys3.filter((x) => ![...ALL_DEPENDENT_ON, ...dimensions].includes(x));
   if (verboseLogging) {
     console.log(pc3.cyan(`\u{1F50E} Finding theme permutations for ${dimensions}`));
@@ -1717,7 +2013,7 @@ function groupThemes(themes) {
   }
   return groups;
 }
-var hasUnknownProps = R12.pipe(R12.values, R12.none(R12.equals("unknown")), R12.not);
+var hasUnknownProps = R17.pipe(R17.values, R17.none(R17.equals("unknown")), R17.not);
 function permutateThemes(groups) {
   const separator = "_";
   const permutations = cartesian(Object.values(groups));
@@ -1727,8 +2023,8 @@ function permutateThemes(groups) {
         const { group, name, selectedTokenSets } = theme;
         let updatedPermutation = acc.permutation;
         if (group) {
-          const groupProp = R12.lensProp(group);
-          updatedPermutation = R12.set(groupProp, name, updatedPermutation);
+          const groupProp = R17.lensProp(group);
+          updatedPermutation = R17.set(groupProp, name, updatedPermutation);
         }
         const updatedName = `${String(acc.name)}${acc ? separator : ""}${name}`;
         const sets = [...acc.selectedTokenSets, ...filterTokenSets(selectedTokenSets)];
@@ -1799,7 +2095,10 @@ var configs = {
   dangerColorVariables: colorCategoryVariables({ category: "builtin", color: "danger" }),
   warningColorVariables: colorCategoryVariables({ category: "builtin", color: "warning" }),
   infoColorVariables: colorCategoryVariables({ category: "builtin", color: "info" }),
+  sizeModeVariables,
+  sizeVariables,
   typographyVariables,
+  typeScaleVariables,
   semanticVariables
 };
 var getConfigsForThemeDimensions = (getConfig, processed$themes, dimensions, options) => {
@@ -1816,7 +2115,7 @@ var getConfigsForThemeDimensions = (getConfig, processed$themes, dimensions, opt
               obj.filePath = tokenSet;
             }
           });
-          tokenSource.tokens = R13.mergeDeepRight(tokenSource.tokens, tokensWithFilePath);
+          tokenSource.tokens = R18.mergeDeepRight(tokenSource.tokens, tokensWithFilePath);
         }
       }
     } else {
@@ -1867,6 +2166,9 @@ var buildOptions = {
 var sd = new StyleDictionary2();
 var buildConfigs = {
   typography: { getConfig: configs.typographyVariables, dimensions: ["typography"] },
+  sizeMode: { getConfig: configs.sizeModeVariables, dimensions: ["size"] },
+  size: { getConfig: configs.sizeVariables, dimensions: ["semantic"] },
+  typeScale: { getConfig: configs.typeScaleVariables, dimensions: ["semantic"] },
   "color-scheme": { getConfig: configs.colorSchemeVariables, dimensions: ["color-scheme"] },
   "main-color": { getConfig: configs.mainColorVariables, dimensions: ["main-color"] },
   "support-color": { getConfig: configs.supportColorVariables, dimensions: ["support-color"] },
@@ -1902,9 +2204,6 @@ async function processPlatform(options) {
   const platform = "css";
   const tokenSets = type === "format" ? options.tokenSets : void 0;
   const tokensDir = type === "build" ? options.tokensDir : void 0;
-  const filteredProcessed$themes = processed$themes.filter(
-    (theme) => R14.not(theme.group === "size" && theme.name !== "medium")
-  );
   const UNSAFE_DEFAULT_COLOR = process.env.UNSAFE_DEFAULT_COLOR ?? "";
   if (UNSAFE_DEFAULT_COLOR) {
     console.warn(
@@ -1928,24 +2227,29 @@ async function processPlatform(options) {
   buildOptions.defaultColor = UNSAFE_DEFAULT_COLOR;
   buildOptions.colorGroups = colorGroups;
   if (!buildOptions.defaultColor) {
-    const customColors = getCustomColors(filteredProcessed$themes, colorGroups);
-    const firstMainColor = R14.head(customColors);
+    const customColors = getCustomColors(processed$themes, colorGroups);
+    const firstMainColor = R19.head(customColors);
     buildOptions.defaultColor = firstMainColor;
   }
   if (buildOptions.defaultColor) {
     console.log(`
 \u{1F3A8} Using ${pc4.blue(buildOptions.defaultColor)} as default color`);
   }
-  const buildAndSdConfigs = R14.map((buildConfig) => {
-    const sdConfigs = getConfigsForThemeDimensions(
-      buildConfig.getConfig,
-      filteredProcessed$themes,
-      buildConfig.dimensions,
-      {
-        tokensDir,
-        tokenSets
-      }
-    );
+  const sizeModes = processed$themes.filter((x) => x.group === "size").map((x) => x.name);
+  buildOptions.sizeModes = sizeModes;
+  if (!buildOptions.defaultSize) {
+    const defaultSize = R19.head(sizeModes);
+    buildOptions.defaultSize = defaultSize;
+  }
+  if (buildOptions.defaultSize) {
+    console.log(`
+\u{1F4CF} Using ${pc4.blue(buildOptions.defaultSize)} as default size`);
+  }
+  const buildAndSdConfigs = R19.map((buildConfig) => {
+    const sdConfigs = getConfigsForThemeDimensions(buildConfig.getConfig, processed$themes, buildConfig.dimensions, {
+      tokensDir,
+      tokenSets
+    });
     const unknownConfigs = buildConfig.dimensions.map(
       (dimension) => sdConfigs.filter((x) => x.permutation[dimension] === "unknown")
     );
@@ -1969,10 +2273,13 @@ async function processPlatform(options) {
     "warning-color": [initResult],
     "info-color": [initResult],
     semantic: [initResult],
-    typography: [initResult]
+    typography: [initResult],
+    sizeMode: [initResult],
+    size: [initResult],
+    typeScale: [initResult]
   };
   try {
-    for (const [buildName, { buildConfig, sdConfigs }] of R14.toPairs(buildAndSdConfigs)) {
+    for (const [buildName, { buildConfig, sdConfigs }] of R19.toPairs(buildAndSdConfigs)) {
       if (!(buildConfig.enabled?.() ?? true)) {
         continue;
       }
@@ -1984,7 +2291,7 @@ async function processPlatform(options) {
             const { config, permutation } = sdConfig;
             const modes = ["theme", ...buildConfig.dimensions];
             const modeMessage = modes.map((x) => permutation[x]).join(" - ");
-            const logMessage = R14.isNil(buildConfig.log) ? modeMessage : buildConfig?.log(sdConfig);
+            const logMessage = R19.isNil(buildConfig.log) ? modeMessage : buildConfig?.log(sdConfig);
             console.log(logMessage);
             const sdOptions = { cache: true };
             const sdExtended = await sd.extend(config);
@@ -2110,8 +2417,12 @@ ${dynamicColors}`;
 
 // src/tokens/process/output/theme.ts
 import pc6 from "picocolors";
-import * as R15 from "ramda";
+import * as R20 from "ramda";
 var defaultFileHeader2 = `build: v${package_default.version}`;
+var getFileNameWithoutExtension = (path5) => {
+  const pathSegments = path5.split("/");
+  return pathSegments[pathSegments.length - 1].split(".").slice(0, -1).join(".");
+};
 var createThemeCSSFiles = ({
   processedBuilds,
   fileHeader = defaultFileHeader2
@@ -2121,22 +2432,25 @@ var createThemeCSSFiles = ({
     for (const buildResult of buildResults) {
       const themeName = buildResult.permutation.theme;
       const newOutputs = buildResult.formatted;
-      if (R15.isNotEmpty(newOutputs)) {
+      if (R20.isNotEmpty(newOutputs)) {
         const currentOutputs = groupedByTheme[themeName] ?? [];
-        groupedByTheme[themeName] = R15.concat(currentOutputs, newOutputs);
+        groupedByTheme[themeName] = R20.concat(currentOutputs, newOutputs);
       }
     }
   }
   const sortOrder = [
+    "size-mode/",
+    "type-scale",
     "color-scheme/light",
     "typography/secondary",
+    "size",
     "semantic",
     "color-scheme/dark",
     "color-scheme/contrast",
     "typography/primary",
     "color/"
   ];
-  const sortByDefinedOrder = R15.sortBy((file) => {
+  const sortByDefinedOrder = R20.sortBy((file) => {
     const filePath = file.destination || "";
     const sortIndex = sortOrder.findIndex((sortElement) => {
       if (sortElement.endsWith("/")) {
@@ -2165,13 +2479,17 @@ ${fileHeader}
 */
 
 `;
-  const sortAlphabetically = R15.sort(R15.ascend((x) => x.destination || ""));
-  const pickOutputs = R15.map(R15.view(R15.lensProp("output")));
-  const themeCSSFile = R15.pipe(
+  const sortAlphabetically = R20.sort(R20.ascend((x) => x.destination || ""));
+  const sortBySize = R20.sortBy(
+    R20.pipe((s) => getFileNameWithoutExtension(s.destination ?? ""), sizeComparator)
+  );
+  const pickOutputs = R20.map(R20.view(R20.lensProp("output")));
+  const themeCSSFile = R20.pipe(
     sortAlphabetically,
+    sortBySize,
     sortByDefinedOrder,
     pickOutputs,
-    R15.join("\n"),
+    R20.join("\n"),
     (content) => header + content
   );
   const themeCSSFiles = Object.entries(groupedByTheme).map(([theme, files]) => ({
@@ -2214,7 +2532,7 @@ var buildTokens = async (options) => {
     processed$themes,
     buildTokenFormats: {}
   });
-  const fileHeader = R16.join("")([
+  const fileHeader = R21.join("")([
     defaultFileHeader2,
     $designsystemet ? `
 design-tokens: v${$designsystemet.version}` : ""
@@ -2238,7 +2556,7 @@ design-tokens: v${$designsystemet.version}` : ""
 // src/tokens/create/write.ts
 import path2 from "path";
 import pc8 from "picocolors";
-import * as R17 from "ramda";
+import * as R22 from "ramda";
 
 // src/tokens/create/generators/$designsystemet.ts
 function generate$Designsystemet() {
@@ -2465,12 +2783,12 @@ var writeTokens = async (options) => {
     }
   } catch (_error) {
   }
-  const concatThemeNames = R17.pipe(
-    R17.filter((obj) => R17.toLower(obj.group || "") === "theme"),
-    R17.map(R17.prop("name")),
+  const concatThemeNames = R22.pipe(
+    R22.filter((obj) => R22.toLower(obj.group || "") === "theme"),
+    R22.map(R22.prop("name")),
     // New theme is added to the end of the list so we keep the same order from config and Token Studio
-    R17.append(themeName),
-    R17.uniq
+    R22.append(themeName),
+    R22.uniq
   );
   const themes = concatThemeNames(themeObjects);
   console.log(`
@@ -2491,7 +2809,7 @@ Themes: ${pc8.blue(themes.join(", "))}`);
 };
 
 // src/tokens/create/defaults.ts
-import * as R18 from "ramda";
+import * as R23 from "ramda";
 
 // src/tokens/template/design-tokens/primitives/globals.json with { type: 'json' }
 var globals_default = {
@@ -2643,95 +2961,99 @@ var global_default = {
   _size: {
     "0": {
       $type: "dimension",
-      $value: "floor({_size.step} / {_size.base} * {_size.mode-font-size} *0)"
+      $value: "floor({_size.unit} * 0)"
     },
     "1": {
       $type: "dimension",
-      $value: "floor({_size.step} / {_size.base} * {_size.mode-font-size} *1)"
+      $value: "floor({_size.unit} * 1)"
     },
     "2": {
       $type: "dimension",
-      $value: "floor({_size.step} / {_size.base} * {_size.mode-font-size} *2)"
+      $value: "floor({_size.unit} * 2)"
     },
     "3": {
       $type: "dimension",
-      $value: "floor({_size.step} / {_size.base} * {_size.mode-font-size} *3)"
+      $value: "floor({_size.unit} * 3)"
     },
     "4": {
       $type: "dimension",
-      $value: "floor({_size.step} / {_size.base} * {_size.mode-font-size} *4)"
+      $value: "floor({_size.unit} * 4)"
     },
     "5": {
       $type: "dimension",
-      $value: "floor({_size.step} / {_size.base} * {_size.mode-font-size} *5)"
+      $value: "floor({_size.unit} * 5)"
     },
     "6": {
       $type: "dimension",
-      $value: "floor({_size.step} / {_size.base} * {_size.mode-font-size} *6)"
+      $value: "floor({_size.unit} * 6)"
     },
     "7": {
       $type: "dimension",
-      $value: "floor({_size.step} / {_size.base} * {_size.mode-font-size} *7)"
+      $value: "floor({_size.unit} * 7)"
     },
     "8": {
       $type: "dimension",
-      $value: "floor({_size.step} / {_size.base} * {_size.mode-font-size} *8)"
+      $value: "floor({_size.unit} * 8)"
     },
     "9": {
       $type: "dimension",
-      $value: "floor({_size.step} / {_size.base} * {_size.mode-font-size} *9)"
+      $value: "floor({_size.unit} * 9)"
     },
     "10": {
       $type: "dimension",
-      $value: "floor({_size.step} / {_size.base} * {_size.mode-font-size} *10)"
+      $value: "floor({_size.unit} * 10)"
     },
     "11": {
       $type: "dimension",
-      $value: "floor({_size.step} / {_size.base} * {_size.mode-font-size} *11)"
+      $value: "floor({_size.unit} * 11)"
     },
     "12": {
       $type: "dimension",
-      $value: "floor({_size.step} / {_size.base} * {_size.mode-font-size} *12)"
+      $value: "floor({_size.unit} * 12)"
     },
     "13": {
       $type: "dimension",
-      $value: "floor({_size.step} / {_size.base} * {_size.mode-font-size} *13)"
+      $value: "floor({_size.unit} * 13)"
     },
     "14": {
       $type: "dimension",
-      $value: "floor({_size.step} / {_size.base} * {_size.mode-font-size} *14)"
+      $value: "floor({_size.unit} * 14)"
     },
     "15": {
       $type: "dimension",
-      $value: "floor({_size.step} / {_size.base} * {_size.mode-font-size} *15)"
+      $value: "floor({_size.unit} * 15)"
     },
     "18": {
       $type: "dimension",
-      $value: "floor({_size.step} / {_size.base} * {_size.mode-font-size} *18)"
+      $value: "floor({_size.unit} * 18)"
     },
     "22": {
       $type: "dimension",
-      $value: "floor({_size.step} / {_size.base} * {_size.mode-font-size} *22)"
+      $value: "floor({_size.unit} * 22)"
     },
     "26": {
       $type: "dimension",
-      $value: "floor({_size.step} / {_size.base} * {_size.mode-font-size} *26)"
+      $value: "floor({_size.unit} * 26)"
     },
     "30": {
       $type: "dimension",
-      $value: "floor({_size.step} / {_size.base} * {_size.mode-font-size} *30)"
+      $value: "floor({_size.unit} * 30)"
     },
     "mode-font-size": {
-      $type: "dimension",
+      $type: "number",
       $value: "{size._mode-font-size}"
     },
     base: {
-      $type: "dimension",
+      $type: "number",
       $value: "{size._base}"
     },
     step: {
-      $type: "dimension",
+      $type: "number",
       $value: "{size._step}"
+    },
+    unit: {
+      $type: "number",
+      $value: "{_size.step} / {_size.base} * {_size.mode-font-size}"
     }
   }
 };
@@ -3476,13 +3798,13 @@ var defaultTokens = {
   "primitives/modes/typography/size/large": large_default2,
   "semantic/style": style_default
 };
-var getDefaultTokens = (tokenSets) => Object.entries(R18.pick(tokenSets, defaultTokens));
+var getDefaultTokens = (tokenSets) => Object.entries(R23.pick(tokenSets, defaultTokens));
 var getDefaultToken = (tokenPath) => {
   return [tokenPath, defaultTokens[tokenPath]];
 };
 
 // src/tokens/create/generators/color.ts
-import * as R19 from "ramda";
+import * as R24 from "ramda";
 var generateColor = (colorArray) => {
   const obj = {};
   const $type = "color";
@@ -3492,8 +3814,8 @@ var generateColor = (colorArray) => {
   return obj;
 };
 var generateColorScheme = (themeName, colorScheme2, colors2) => {
-  const main = R19.map((color) => generateColor(generateColorScale(color, colorScheme2)), colors2.main);
-  const support = R19.map((color) => generateColor(generateColorScale(color, colorScheme2)), colors2.support);
+  const main = R24.map((color) => generateColor(generateColorScale(color, colorScheme2)), colors2.main);
+  const support = R24.map((color) => generateColor(generateColorScale(color, colorScheme2)), colors2.support);
   const neutral = generateColor(generateColorScale(colors2.neutral, colorScheme2));
   return {
     [themeName]: {
@@ -3521,7 +3843,7 @@ var generateColorGlobal = (colorScheme2) => {
 };
 
 // src/tokens/create/generators/semantic.ts
-import * as R20 from "ramda";
+import * as R25 from "ramda";
 
 // src/tokens/template/design-tokens/semantic/color.base.template.json with { type: 'json' }
 var color_base_template_default = {
@@ -3985,7 +4307,7 @@ var generateSemantic = (colors2) => {
   const semanticColorTokens = customColors.map(
     (colorName) => [
       colorName,
-      R20.map((x) => ({ ...x, $value: x.$value.replace("<color>", colorName) }), color_template_default)
+      R25.map((x) => ({ ...x, $value: x.$value.replace("<color>", colorName) }), color_template_default)
     ]
   );
   const color = {
@@ -4002,7 +4324,7 @@ var generateSemantic = (colors2) => {
 };
 
 // src/tokens/create/generators/theme.ts
-import * as R21 from "ramda";
+import * as R26 from "ramda";
 
 // src/tokens/template/design-tokens/themes/theme.base.template.json with { type: 'json' }
 var theme_base_template_default = {
@@ -4138,7 +4460,7 @@ var generateTheme = (colors2, themeName, borderRadius) => {
     customColors.map(
       (colorName) => [
         colorName,
-        R21.map((x) => ({ ...x, $value: x.$value.replace("<color>", colorName) }), theme_template_default)
+        R26.map((x) => ({ ...x, $value: x.$value.replace("<color>", colorName) }), theme_template_default)
       ]
     )
   );
@@ -4150,8 +4472,8 @@ var generateTheme = (colors2, themeName, borderRadius) => {
     },
     ...remainingThemeFile
   };
-  const baseBorderRadius = R21.lensPath(["border-radius", "base", "$value"]);
-  const updatedThemeFile = R21.set(baseBorderRadius, String(borderRadius), themeFile);
+  const baseBorderRadius = R26.lensPath(["border-radius", "base", "$value"]);
+  const updatedThemeFile = R26.set(baseBorderRadius, String(borderRadius), themeFile);
   const token = JSON.parse(
     JSON.stringify(
       updatedThemeFile,
@@ -4250,16 +4572,16 @@ var createTokens = async (opts) => {
 // bin/config.ts
 import path4 from "path";
 import pc10 from "picocolors";
-import * as R23 from "ramda";
+import * as R28 from "ramda";
 
 // src/config.ts
 import pc9 from "picocolors";
-import * as R22 from "ramda";
+import * as R27 from "ramda";
 import { z } from "zod";
 import { fromError } from "zod-validation-error";
 function mapPathToOptionName(path5) {
-  const normalisedPath = path5[0] === "themes" ? ["theme", ...R22.drop(2, path5)] : path5;
-  const option = R22.path(normalisedPath, cliOptions);
+  const normalisedPath = path5[0] === "themes" ? ["theme", ...R27.drop(2, path5)] : path5;
+  const option = R27.path(normalisedPath, cliOptions);
   if (typeof option !== "string") {
     return;
   }
@@ -4383,11 +4705,11 @@ async function parseCreateConfig(configFile, options) {
   const { cmd, theme = "theme", configPath } = options;
   const configParsed = parseConfig(configFile, configPath);
   const themeColors = Object.values(configParsed?.themes ?? {}).map(
-    (x) => /* @__PURE__ */ new Set([...R23.keys(x.colors.main), ...R23.keys(x.colors.support)])
+    (x) => /* @__PURE__ */ new Set([...R28.keys(x.colors.main), ...R28.keys(x.colors.support)])
   );
-  if (!R23.all(R23.equals(R23.__, themeColors[0]), themeColors)) {
+  if (!R28.all(R28.equals(R28.__, themeColors[0]), themeColors)) {
     console.error(pc10.redBright(`In config, all themes must have the same custom color names, but we found:`));
-    const themeNames = R23.keys(configParsed.themes ?? {});
+    const themeNames = R28.keys(configParsed.themes ?? {});
     themeColors.forEach((colors2, index) => {
       const colorNames = Array.from(colors2);
       console.log(`  - ${themeNames[index]}: ${colorNames.join(", ")}`);
@@ -4395,7 +4717,7 @@ async function parseCreateConfig(configFile, options) {
     console.log();
     process.exit(1);
   }
-  const noUndefined = R23.reject(R23.isNil);
+  const noUndefined = R28.reject(R28.isNil);
   const getThemeOptions = (optionGetter) => noUndefined({
     colors: noUndefined({
       main: optionGetter(cmd, "mainColors"),
@@ -4411,10 +4733,10 @@ async function parseCreateConfig(configFile, options) {
   const unvalidatedConfig = noUndefined({
     outDir: configParsed?.outDir ?? getCliOption(cmd, "outDir"),
     clean: configParsed?.clean ?? getCliOption(cmd, "clean"),
-    themes: configParsed?.themes ? R23.map((jsonThemeValues) => {
+    themes: configParsed?.themes ? R28.map((jsonThemeValues) => {
       const defaultThemeValues = getThemeOptions(getDefaultCliOption);
       const cliThemeValues = getThemeOptions(getSuppliedCliOption);
-      const mergedConfigs = R23.mergeDeepRight(defaultThemeValues, R23.mergeDeepRight(jsonThemeValues, cliThemeValues));
+      const mergedConfigs = R28.mergeDeepRight(defaultThemeValues, R28.mergeDeepRight(jsonThemeValues, cliThemeValues));
       return mergedConfigs;
     }, configParsed.themes) : (
       // If there are no themes specified in the JSON config, we use both explicit
@@ -4520,7 +4842,7 @@ function parseBoolean(value) {
   return value === "true" || value === true;
 }
 async function getConfigFile(config) {
-  const allowFileNotFound = R24.isNil(config) || config === DEFAULT_CONFIG_FILE;
+  const allowFileNotFound = R29.isNil(config) || config === DEFAULT_CONFIG_FILE;
   const configPath = config ?? DEFAULT_CONFIG_FILE;
   const configFile = await readConfigFile(configPath, allowFileNotFound);
   return { configFile, configPath };