@digdir/designsystemet 1.0.0-next.34 → 1.0.0-next.36

package/dist/src/tokens/build/configs.js

@@ -2,27 +2,28 @@ import { expandTypesMap, register } from "@tokens-studio/sd-transforms";
 import * as R from "ramda";
 import StyleDictionary from "style-dictionary";
 import { outputReferencesFilter } from "style-dictionary/utils";
-import * as formats from "./formats/css.js";
+import { DEFAULT_COLOR, buildOptions } from "../build.js";
+import { formats } from "./formats/css.js";
 import { jsTokens } from "./formats/js-tokens.js";
-import { nameKebab, sizeRem, typographyName } from "./transformers.js";
-import { permutateThemes as permutateThemes_ } from "./utils/permutateThemes.js";
-import { pathStartsWithOneOf, typeEquals } from "./utils/utils.js";
+import { nameKebab, resolveMath, sizeRem, typographyName } from "./transformers.js";
+import { getMultidimensionalThemes } from "./utils/getMultidimensionalThemes.js";
+import { isColorCategoryToken, pathStartsWithOneOf, typeEquals } from "./utils/utils.js";
 void register(StyleDictionary, { withSDBuiltins: false });
 const usesDtcg = true;
 const prefix = "ds";
 const basePxFontSize = 16;
-const separator = "_";
 const fileHeader = () => [`These files are generated from design tokens defind using Token Studio`];
 StyleDictionary.registerTransform(sizeRem);
 StyleDictionary.registerTransform(nameKebab);
 StyleDictionary.registerTransform(typographyName);
+StyleDictionary.registerTransform(resolveMath);
 StyleDictionary.registerFormat(jsTokens);
-StyleDictionary.registerFormat(formats.colormode);
-StyleDictionary.registerFormat(formats.semantic);
-StyleDictionary.registerFormat(formats.typography);
+for (const format of Object.values(formats)) {
+  StyleDictionary.registerFormat(format);
+}
 const dsTransformers = [
   nameKebab.name,
-  `ts/resolveMath`,
+  resolveMath.name,
   "ts/size/px",
   sizeRem.name,
   "ts/typography/fontWeight",
@@ -33,22 +34,17 @@ const dsTransformers = [
   "shadow/css/shorthand"
 ];
 const paritionPrimitives = R.partition(R.test(/(?!.*global\.json).*primitives.*/));
-const hasUnknownProps = R.pipe(R.values, R.none(R.equals("unknown")), R.not);
 const outputColorReferences = (token) => {
   if (R.test(/accent|neutral|brand1|brand2|brand3|success|danger|warning/, token.name) && R.includes("semantic/color", token.filePath)) {
     return true;
   }
   return false;
 };
-const permutateThemes = ($themes) => permutateThemes_($themes, {
-  separator
-});
-const colorModeVariables = ({ mode = "light", outPath, theme }) => {
+const colorModeVariables = ({ mode = "light", theme }, { outPath }) => {
   const selector = `${mode === "light" ? ":root, " : ""}[data-ds-color-mode="${mode}"]`;
   const layer = `ds.theme.color-mode.${mode}`;
   return {
     usesDtcg,
-    log: { verbosity: "silent" },
     preprocessors: ["tokens-studio"],
     platforms: {
       css: {
@@ -71,19 +67,76 @@ const colorModeVariables = ({ mode = "light", outPath, theme }) => {
         ],
         options: {
           fileHeader,
-          outputReferences: (token, options) => outputColorReferences(token) && outputReferencesFilter(token, options)
+          outputReferences: false
         }
       }
     }
   };
 };
-const semanticVariables = ({ outPath, theme }) => {
+const colorCategoryVariables = (category) => ({ mode, theme, [`${category}-color`]: color }, { outPath }) => {
+  const layer = `ds.theme.color`;
+  const isDefault = color === buildOptions?.accentColor;
+  const selector = `${isDefault ? ":root, " : ""}[data-color="${color}"]`;
+  const config = {
+    usesDtcg,
+    preprocessors: ["tokens-studio"],
+    platforms: {
+      css: {
+        // custom
+        outPath,
+        mode,
+        theme,
+        selector,
+        layer,
+        //
+        prefix,
+        buildPath: `${outPath}/${theme}/`,
+        transforms: dsTransformers,
+        files: [
+          {
+            destination: `color/${color}.css`,
+            format: formats.colorcategory.name,
+            filter: (token) => isColorCategoryToken(token, category)
+          }
+        ],
+        options: {
+          fileHeader,
+          outputReferences: true
+        }
+      }
+    }
+  };
+  if (isDefault && color !== DEFAULT_COLOR) {
+    console.log(
+      `Creating "${DEFAULT_COLOR}" color variables pointing to "${color}", since a color named "${DEFAULT_COLOR}" is not defined`
+    );
+    const defaultColorConfig = R.mergeDeepRight(config, {
+      platforms: {
+        css: {
+          selector: ":root",
+          files: [
+            {
+              ...config.platforms?.css?.files?.[0],
+              destination: `color/${DEFAULT_COLOR}.css`
+            }
+          ],
+          options: { replaceCategoryWith: DEFAULT_COLOR }
+        }
+      }
+    });
+    return [
+      { config },
+      { config: defaultColorConfig, permutationOverrides: { "main-color": `${DEFAULT_COLOR} \u2192 ${color}` } }
+    ];
+  }
+  return config;
+};
+const semanticVariables = ({ theme }, { outPath }) => {
   const selector = `:root`;
   const layer = `ds.theme.semantic`;
-  const isCalculatedToken = (token) => pathStartsWithOneOf(["spacing", "sizing", "border-radius"], token);
+  const isCalculatedToken = (token) => pathStartsWithOneOf(["spacing", "sizing"], token);
   return {
     usesDtcg,
-    log: { verbosity: "silent" },
     preprocessors: ["tokens-studio"],
     platforms: {
       css: {
@@ -107,16 +160,18 @@ const semanticVariables = ({ outPath, theme }) => {
         ],
         options: {
           fileHeader,
-          outputReferences: (token, options) => isCalculatedToken(token) && outputReferencesFilter(token, options)
+          outputReferences: (token, options) => {
+            const include = pathStartsWithOneOf(["border-radius"], token);
+            return (include || isCalculatedToken(token)) && outputReferencesFilter(token, options);
+          }
         }
       }
     }
   };
 };
-const typescriptTokens = ({ mode = "unknown", outPath, theme }) => {
+const typescriptTokens = ({ mode, theme }, { outPath }) => {
   return {
     usesDtcg,
-    log: { verbosity: "silent" },
     preprocessors: ["tokens-studio"],
     platforms: {
       ts: {
@@ -146,12 +201,11 @@ const typescriptTokens = ({ mode = "unknown", outPath, theme }) => {
     }
   };
 };
-const typographyVariables = ({ outPath, theme, typography }) => {
+const typographyVariables = ({ theme, typography }, { outPath }) => {
   const selector = `${typography === "primary" ? ":root, " : ""}[data-ds-typography="${typography}"]`;
   const layer = `ds.theme.typography.${typography}`;
   return {
     usesDtcg: true,
-    log: { verbosity: "silent" },
     preprocessors: ["tokens-studio"],
     expand: {
       include: ["typography"],
@@ -196,43 +250,42 @@ const typographyVariables = ({ outPath, theme, typography }) => {
     }
   };
 };
-const getConfigs = (getConfig, outPath, tokensDir, permutatedThemes) => permutatedThemes.map((permutatedTheme) => {
-  const {
-    selectedTokenSets = [],
-    mode = "unknown",
-    theme = "unknown",
-    semantic = "unknown",
-    size = "unknown",
-    typography = "unknown"
-  } = permutatedTheme;
-  if (hasUnknownProps(permutatedTheme)) {
-    throw Error(`Theme ${permutatedTheme.name} has unknown props: ${JSON.stringify(permutatedTheme)}`);
-  }
-  const setsWithPaths = selectedTokenSets.map((x) => `${tokensDir}/${x}.json`);
-  const [source, include] = paritionPrimitives(setsWithPaths);
-  const config_ = getConfig({
-    outPath,
-    theme,
-    mode,
-    semantic,
-    size,
-    typography
-  });
-  const config = {
-    ...config_,
-    source,
-    include
-  };
-  return { mode, theme, semantic, size, typography, config };
-}).sort();
-export {
-  basePxFontSize,
+const configs = {
   colorModeVariables,
-  getConfigs,
-  permutateThemes,
-  prefix,
+  mainColorVariables: colorCategoryVariables("main"),
+  supportColorVariables: colorCategoryVariables("support"),
+  typographyVariables,
   semanticVariables,
-  separator,
-  typescriptTokens,
-  typographyVariables
+  typescriptTokens
+};
+const getConfigsForThemeDimensions = (getConfig, themes, dimensions, options) => {
+  const { outPath, tokensDir } = options;
+  const permutations = getMultidimensionalThemes(themes, dimensions);
+  return permutations.flatMap(({ selectedTokenSets, permutation }) => {
+    const setsWithPaths = selectedTokenSets.map((x) => `${tokensDir}/${x}.json`);
+    const [source, include] = paritionPrimitives(setsWithPaths);
+    const configOrConfigs = getConfig(permutation, { outPath });
+    const configs_ = Array.isArray(configOrConfigs) ? configOrConfigs : [{ config: configOrConfigs }];
+    const configs2 = configs_.map(({ config, permutationOverrides }) => {
+      return {
+        permutation: { ...permutation, ...permutationOverrides },
+        config: {
+          ...config,
+          log: {
+            ...config?.log,
+            verbosity: buildOptions?.verbose ? "verbose" : "silent"
+          },
+          source,
+          include
+        }
+      };
+    });
+    return configs2;
+  }).sort();
+};
+export {
+  basePxFontSize,
+  configs,
+  getConfigsForThemeDimensions,
+  prefix
 };

package/dist/src/tokens/build/formats/css.d.ts

@@ -0,0 +1,13 @@
+import type { Format } from 'style-dictionary/types';
+declare module 'style-dictionary/types' {
+    interface LocalOptions {
+        replaceCategoryWith?: string;
+    }
+}
+export declare const formats: {
+    colormode: Format;
+    colorcategory: Format;
+    semantic: Format;
+    typography: Format;
+};
+//# sourceMappingURL=css.d.ts.map

package/dist/src/tokens/build/formats/css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"css.d.ts","sourceRoot":"","sources":["../../../../../src/tokens/build/formats/css.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAuDrD,OAAO,QAAQ,wBAAwB,CAAC;IACtC,UAAiB,YAAY;QAC3B,mBAAmB,CAAC,EAAE,MAAM,CAAC;KAC9B;CACF;AA2GD,eAAO,MAAM,OAAO;;;;;CAKc,CAAC"}

package/dist/src/tokens/build/formats/css.js

@@ -1,6 +1,7 @@
 import * as R from "ramda";
 import { createPropertyFormatter, fileHeader, usesReferences } from "style-dictionary/utils";
-import { getValue } from "../utils/utils.js";
+import { colorCategories } from "../types.js";
+import { getValue, isColorCategoryToken, isGlobalColorToken, isSemanticToken } from "../utils/utils.js";
 const prefersColorScheme = (mode, content) => `
 @media (prefers-color-scheme: ${mode}) {
   [data-ds-color-mode="auto"] ${content}
@@ -23,7 +24,19 @@ const colormode = {
     const colorSchemeProperty = mode_ === "dark" || mode_ === "light" ? `
   color-scheme: ${mode_};
 ` : "";
-    const formattedTokens = dictionary.allTokens.map(format).join("\n");
+    const filteredAllTokens = allTokens.filter(
+      R.allPass([
+        R.anyPass([
+          // Include semantic tokens in the output
+          isSemanticToken,
+          // Include global color tokens
+          isGlobalColorToken
+        ]),
+        // Don't include color category tokens -- they are exported separately
+        (t) => !isColorCategoryToken(t)
+      ])
+    );
+    const formattedTokens = filteredAllTokens.map(format).join("\n");
     const content = `{
 ${formattedTokens}
 ${colorSchemeProperty}}
@@ -37,6 +50,40 @@ ${selector} ${content} ${autoSelectorContent}
     return header + body;
   }
 };
+const colorcategory = {
+  name: "ds/css-colorcategory",
+  format: async ({ dictionary, file, options, platform }) => {
+    const { outputReferences, usesDtcg, replaceCategoryWith = "" } = options;
+    const { selector, layer } = platform;
+    const header = await fileHeader({ file });
+    const format = R.compose(
+      createPropertyFormatter({
+        outputReferences,
+        dictionary,
+        format: "css",
+        usesDtcg
+      }),
+      (token) => ({
+        ...token,
+        name: token.name.replace(
+          new RegExp(`-(${colorCategories.main}|${colorCategories.support})-`),
+          replaceCategoryWith ? `-${replaceCategoryWith}-` : "-"
+        )
+      })
+    );
+    const formattedTokens = dictionary.allTokens.map(format).join("\n");
+    const content = `{
+${formattedTokens}
+}
+`;
+    const body = R.isNotNil(layer) ? `@layer ${layer} {
+${selector} ${content}
+}
+` : `${selector} ${content}
+`;
+    return header + body;
+  }
+};
 const calculatedVariable = R.pipe(R.split(/:(.*?);/g), (split) => `${split[0]}: calc(${R.trim(split[1])});`);
 const semantic = {
   name: "ds/css-semantic",
@@ -56,6 +103,7 @@ const semantic = {
         if (isCalculatedToken?.(token, options)) {
           return calculatedVariable(format(token));
         }
+        return format(token);
       }
       return format(token);
     }, dictionary.allTokens);
@@ -87,7 +135,6 @@ const typography = {
       format: "css",
       usesDtcg
     });
-    console.log("dictionary.allTokens", dictionary.allTokens);
     const filteredTokens = R.reject(typographyFontFamilyPredicate, dictionary.allTokens);
     const formattedTokens = R.pipe(R.map(format), R.join("\n"))(filteredTokens);
     const content = selector ? `${selector} {
@@ -99,8 +146,12 @@ ${content}
     return header + body;
   }
 };
-export {
+const formats = {
   colormode,
+  colorcategory,
   semantic,
   typography
 };
+export {
+  formats
+};

package/dist/src/tokens/build/formats/js-tokens.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"js-tokens.d.ts","sourceRoot":"","sources":["../../../../../src/tokens/build/formats/js-tokens.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,MAAM,EAAoB,MAAM,wBAAwB,CAAC;AAmBvE;;GAEG;AACH,eAAO,MAAM,QAAQ,EAAE,MA2BtB,CAAC"}

package/dist/src/tokens/build/formats/js-tokens.js

@@ -1,9 +1,9 @@
 import * as R from "ramda";
 import { createPropertyFormatter, fileHeader } from "style-dictionary/utils";
-import { getType } from "../utils/utils.js";
+import { getType, isColorCategoryToken } from "../utils/utils.js";
 const groupByType = R.groupBy((token) => getType(token));
 const removeUnwatedTokens = R.filter(
-  (token) => !["ds-base-spacing", "ds-base-sizing"].includes(token.name)
+  (token) => !["ds-base-spacing", "ds-base-sizing"].includes(token.name) && !isColorCategoryToken(token)
 );
 const dissocExtensions = R.pipe(R.dissoc("$extensions"), R.dissocPath(["original", "$extensions"]));
 const removeUnwatedProps = R.map((token) => dissocExtensions(token));

package/dist/{types/src → src}/tokens/build/transformers.d.ts

@@ -2,4 +2,5 @@ import type { Transform } from 'style-dictionary/types';
 export declare const sizeRem: Transform;
 export declare const nameKebab: Transform;
 export declare const typographyName: Transform;
+export declare const resolveMath: Transform;
 //# sourceMappingURL=transformers.d.ts.map

package/dist/src/tokens/build/transformers.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"transformers.d.ts","sourceRoot":"","sources":["../../../../src/tokens/build/transformers.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAOxD,eAAO,MAAM,OAAO,EAAE,SAyBrB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,SASvB,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,SAS5B,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,SAWzB,CAAC"}

package/dist/src/tokens/build/transformers.js

@@ -1,3 +1,4 @@
+import { checkAndEvaluateMath } from "@tokens-studio/sd-transforms";
 import * as R from "ramda";
 import { noCase } from "./utils/noCase.js";
 import { getValue, pathStartsWithOneOf, typeEquals } from "./utils/utils.js";
@@ -44,8 +45,20 @@ const typographyName = {
     return token.name.replace("-typography", "");
   }
 };
+const resolveMath = {
+  name: "ds/resolveMath",
+  type: "value",
+  transitive: true,
+  filter: (token) => {
+    const isValidValue = ["string", "object"].includes(typeof (token.$value ?? token.value));
+    const isTokenOfInterest = !pathStartsWithOneOf(["border-radius"], token);
+    return isValidValue && isTokenOfInterest;
+  },
+  transform: (token, platformCfg) => checkAndEvaluateMath(token, platformCfg.mathFractionDigits)
+};
 export {
   nameKebab,
+  resolveMath,
   sizeRem,
   typographyName
 };

package/dist/src/tokens/build/types.d.ts

@@ -0,0 +1,44 @@
+import type { Config as StyleDictionaryConfig, TransformedToken } from 'style-dictionary/types';
+import type { GetStyleDictionaryConfig } from './configs';
+export declare const colorCategories: {
+    readonly main: "main";
+    readonly support: "support";
+};
+export type ColorCategories = keyof typeof colorCategories;
+/**
+ * A multi-dimensional theme is a concrete permutation of the possible theme dimensions
+ */
+export type ThemePermutation = {
+    mode: string;
+    'main-color': string;
+    'support-color': string;
+    semantic: string;
+    size: string;
+    theme: string;
+    typography: string;
+};
+export type ThemeDimension = keyof ThemePermutation;
+export type IsCalculatedToken = (token: TransformedToken, options?: StyleDictionaryConfig) => boolean;
+export type GetSdConfigOptions = {
+    outPath: string;
+    tokensDir: string;
+};
+export type BuildConfig = {
+    /** Optional name of the build config - only used in the console output */
+    name?: string;
+    /** Style Dictionary configuration creator */
+    getConfig: GetStyleDictionaryConfig;
+    /** Which theme dimensions to include. `theme` (e.g. digdir/altinn) is always included. */
+    dimensions: ThemeDimension[];
+    /** Custom options used when creating Style Dictionary configs. If not supplied, the default is used */
+    options?: Partial<GetSdConfigOptions>;
+    /** Custom build function. If not supplied, the default is used. */
+    build?: (sdConfigs: SDConfigForThemePermutation[], options: GetSdConfigOptions) => Promise<void>;
+    /** Whether the build config is enabled. @default () => true */
+    enabled?: () => boolean;
+};
+export type SDConfigForThemePermutation = {
+    permutation: ThemePermutation;
+    config: StyleDictionaryConfig;
+};
+//# sourceMappingURL=types.d.ts.map

package/dist/src/tokens/build/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/tokens/build/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,IAAI,qBAAqB,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAChG,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,WAAW,CAAC;AAE1D,eAAO,MAAM,eAAe;;;CAGlB,CAAC;AACX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,eAAe,CAAC;AAE3D;;GAEG;AACH,MAAM,MAAM,gBAAgB,GAAG;IAC7B,IAAI,EAAE,MAAM,CAAC;IACb,YAAY,EAAE,MAAM,CAAC;IACrB,eAAe,EAAE,MAAM,CAAC;IACxB,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG,MAAM,gBAAgB,CAAC;AAEpD,MAAM,MAAM,iBAAiB,GAAG,CAAC,KAAK,EAAE,gBAAgB,EAAE,OAAO,CAAC,EAAE,qBAAqB,KAAK,OAAO,CAAC;AAEtG,MAAM,MAAM,kBAAkB,GAAG;IAC/B,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,EAAE,MAAM,CAAC;CACnB,CAAC;AAEF,MAAM,MAAM,WAAW,GAAG;IACxB,0EAA0E;IAC1E,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,6CAA6C;IAC7C,SAAS,EAAE,wBAAwB,CAAC;IACpC,0FAA0F;IAC1F,UAAU,EAAE,cAAc,EAAE,CAAC;IAC7B,uGAAuG;IACvG,OAAO,CAAC,EAAE,OAAO,CAAC,kBAAkB,CAAC,CAAC;IACtC,mEAAmE;IACnE,KAAK,CAAC,EAAE,CAAC,SAAS,EAAE,2BAA2B,EAAE,EAAE,OAAO,EAAE,kBAAkB,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IACjG,+DAA+D;IAC/D,OAAO,CAAC,EAAE,MAAM,OAAO,CAAC;CACzB,CAAC;AAEF,MAAM,MAAM,2BAA2B,GAAG;IAAE,WAAW,EAAE,gBAAgB,CAAC;IAAC,MAAM,EAAE,qBAAqB,CAAA;CAAE,CAAC"}

package/dist/src/tokens/build/types.js

@@ -0,0 +1,7 @@
+const colorCategories = {
+  main: "main",
+  support: "support"
+};
+export {
+  colorCategories
+};

package/dist/src/tokens/build/utils/entryfile.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"entryfile.d.ts","sourceRoot":"","sources":["../../../../../src/tokens/build/utils/entryfile.ts"],"names":[],"mappings":"AAkEA,KAAK,SAAS,GAAG,CAAC,OAAO,EAAE;IACzB,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;CACf,KAAK,OAAO,CAAC,SAAS,CAAC,CAAC;AAEzB;;GAEG;AACH,eAAO,MAAM,aAAa,EAAE,SAS3B,CAAC"}

package/dist/src/tokens/build/utils/entryfile.js

@@ -1,14 +1,47 @@
+import chalk from "chalk";
 import glob from "fast-glob";
 import fs from "fs-extra";
 import * as R from "ramda";
-const sortLightmodeFirst = R.sortWith([R.descend(R.includes("light")), R.descend(R.includes("secondary"))]);
+const sortOrder = [
+  "color-mode/light",
+  "typography/secondary",
+  "semantic",
+  "color-mode/dark",
+  "color-mode/contrast",
+  "typography/primary",
+  "color/",
+  "builtin-colors"
+];
+const sortByDefinedOrder = R.sortBy((fileName) => {
+  const sortIndex = sortOrder.findIndex((sortElement) => {
+    if (sortElement.endsWith("/")) {
+      return fileName.includes(sortElement);
+    }
+    return fileName.includes(`${sortElement}.css`);
+  });
+  if (sortIndex === -1) {
+    console.error(
+      chalk.yellow("WARNING: CSS section does not have a defined sort order:", fileName.replace(".css", ""))
+    );
+    console.log(
+      chalk.dim(
+        `
+A Digdir developer should define its order in the sortOrder array in entryfile.ts.
+The section will currently be added to the end of the entry file, but the exact
+order may change due to nondeterminism.`.trim()
+      )
+    );
+    console.log();
+    return Infinity;
+  }
+  return sortIndex;
+});
 const header = `@charset "UTF-8";
 
 @layer ds.reset, ds.theme, ds.base, ds.utilities, ds.components;
 
 `;
-const sortAndConcat = R.pipe(
-  sortLightmodeFirst,
+const concat = R.pipe(
   R.map((file) => {
     try {
       const content = fs.readFileSync(file, "utf-8").toString();
@@ -23,7 +56,9 @@ const sortAndConcat = R.pipe(
 const makeEntryFile = async ({ outPath, buildPath, theme }) => {
   const writePath = `${outPath}/${theme}.css`;
   const files = await glob(`**/*`, { cwd: buildPath });
-  const content = header + sortAndConcat(files.map((file) => `${buildPath}/${file}`));
+  const sortAlphabetically = R.sort(R.ascend((x) => x));
+  const sortedFileNames = R.pipe(sortAlphabetically, sortByDefinedOrder)(files);
+  const content = header + concat(sortedFileNames.map((file) => `${buildPath}/${file}`));
   await fs.writeFile(writePath, content);
 };
 export {

package/dist/src/tokens/build/utils/getMultidimensionalThemes.d.ts

@@ -0,0 +1,35 @@
+import type { ThemeObject } from '@tokens-studio/types';
+import type { ThemeDimension, ThemePermutation } from '../types';
+/**
+ * Find the theme permutations that are relevant for the given theme dimensions.
+ *
+ * Technically, for the given dimensions all permutations are included, while for other
+ * dimensions the first permutation is used.
+ *
+ * @param themes Theme objects from $themes.json (Tokens Studio)
+ * @param dimensions Which theme dimensions to return permutations for.
+ *    'theme' (e.g. altinn/digdir/uutilsynet) is always implicitly included.
+ * @returns the relevant theme permutations
+ */
+export declare const getMultidimensionalThemes: (themes: ProcessedThemeObject[], dimensions: ThemeDimension[]) => PermutatedTheme[];
+export type PermutatedTheme = {
+    name: string;
+    selectedTokenSets: string[];
+    permutation: ThemePermutation;
+};
+declare const processed: unique symbol;
+/**
+ * A Tokens Studio {@link ThemeObject} which has been processed for easier use in code
+ */
+export type ProcessedThemeObject = ThemeObject & {
+    [processed]: true;
+};
+/**
+ * Normalise theme names and theme group names for easier use in code
+ * @param theme A theme object from $themes.json
+ * @returns Processed theme object
+ */
+export declare function processThemeObject(theme: ThemeObject | ProcessedThemeObject): ProcessedThemeObject;
+export type GroupedThemes = Record<keyof ThemePermutation, ProcessedThemeObject[]>;
+export {};
+//# sourceMappingURL=getMultidimensionalThemes.d.ts.map

package/dist/src/tokens/build/utils/getMultidimensionalThemes.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"getMultidimensionalThemes.d.ts","sourceRoot":"","sources":["../../../../../src/tokens/build/utils/getMultidimensionalThemes.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAMxD,OAAO,KAAK,EAAE,cAAc,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAC;AAEjE;;;;;;;;;;GAUG;AACH,eAAO,MAAM,yBAAyB,WAAY,oBAAoB,EAAE,cAAc,cAAc,EAAE,sBAerG,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG;IAC5B,IAAI,EAAE,MAAM,CAAC;IACb,iBAAiB,EAAE,MAAM,EAAE,CAAC;IAC5B,WAAW,EAAE,gBAAgB,CAAC;CAC/B,CAAC;AAEF,QAAA,MAAM,SAAS,EAAE,OAAO,MAAsD,CAAC;AAC/E;;GAEG;AACH,MAAM,MAAM,oBAAoB,GAAG,WAAW,GAAG;IAAE,CAAC,SAAS,CAAC,EAAE,IAAI,CAAA;CAAE,CAAC;AAMvE;;;;GAIG;AACH,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,WAAW,GAAG,oBAAoB,GAAG,oBAAoB,CAUlG;AAED,MAAM,MAAM,aAAa,GAAG,MAAM,CAAC,MAAM,gBAAgB,EAAE,oBAAoB,EAAE,CAAC,CAAC"}