@digdir/designsystemet 0.0.0-chore-remove-cli-tsx-20260701060359

package/dist/src/tokens/process/output/theme.js

@@ -0,0 +1,85 @@
+import { version } from "../../../../package.js";
+import { sizeComparator } from "../../utils.js";
+import pc from "picocolors";
+import * as R from "ramda";
+//#region src/tokens/process/output/theme.ts
+const defaultFileHeader = `build: v${version}`;
+const getFileNameWithoutExtension = (path) => {
+	const pathSegments = path.split("/");
+	return pathSegments[pathSegments.length - 1].split(".").slice(0, -1).join(".");
+};
+/**
+* Generates theme-specific CSS files from Style Dictionary build results.
+*
+* @param processedBuilds - The processed build results containing formatted CSS outputs
+*                          grouped by themes and other permutations.
+* @param fileHeader - Optional header to be included in the generated CSS files.
+* @returns An array of `OutputFile` objects, each representing a theme-specific CSS file
+*          with its destination and content.
+*
+* @remarks
+* - The function groups the build results by theme and ensures a deterministic order
+*   for the sections of the entry CSS file using a predefined sort order.
+* - If a CSS section does not have a defined sort order the section is added to the end of the entry file.
+* - The generated CSS files include a header with metadata and layer definitions.
+*/
+const createThemeCSSFiles = ({ processedBuilds, fileHeader = defaultFileHeader }) => {
+	const groupedByTheme = {};
+	for (const [_, buildResults] of Object.entries(processedBuilds)) for (const buildResult of buildResults) {
+		const themeName = buildResult.permutation.theme;
+		const newOutputs = buildResult.formatted;
+		if (R.isNotEmpty(newOutputs)) {
+			const currentOutputs = groupedByTheme[themeName] ?? [];
+			groupedByTheme[themeName] = R.concat(currentOutputs, newOutputs);
+		}
+	}
+	/**
+	* Defines a sort order for the sections of the entry CSS file.
+	* This ensures a deterministic order, whereas earlier this was nondeterministic
+	*/
+	const sortOrder = [
+		"size-mode/",
+		"type-scale",
+		"color-scheme/light",
+		"typography/secondary",
+		"size",
+		"semantic",
+		"color-scheme/dark",
+		"color-scheme/contrast",
+		"typography/primary",
+		"color/"
+	];
+	const sortByDefinedOrder = R.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(pc.yellow(`WARNING: CSS section does not have a defined sort order: ${filePath.replace(".css", "")}`));
+			console.log(pc.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";
+/*
+${fileHeader}
+*/
+
+`;
+	const sortAlphabetically = R.sort(R.ascend((x) => x.destination || ""));
+	const sortBySize = R.sortBy(R.pipe((s) => getFileNameWithoutExtension(s.destination ?? ""), sizeComparator));
+	const pickOutputs = R.map(R.view(R.lensProp("output")));
+	const themeCSSFile = R.pipe(sortAlphabetically, sortBySize, sortByDefinedOrder, pickOutputs, R.join("\n"), (content) => header + content);
+	return Object.entries(groupedByTheme).map(([theme, files]) => ({
+		destination: `${theme}.css`,
+		output: themeCSSFile(files)
+	}));
+};
+//#endregion
+export { createThemeCSSFiles, defaultFileHeader };
+
+//# sourceMappingURL=theme.js.map

package/dist/src/tokens/process/output/theme.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme.js","names":["pkg.version"],"sources":["../../../../../src/tokens/process/output/theme.ts"],"sourcesContent":["import pc from 'picocolors';\nimport * as R from 'ramda';\nimport pkg from '../../../../package.json' with { type: 'json' };\nimport type { OutputFile } from '../../types.ts';\nimport { sizeComparator } from '../../utils.ts';\nimport type { ProcessReturn } from '../platform.ts';\n\nexport const defaultFileHeader = `build: v${pkg.version}`;\n\ntype CreateThemeCSSFiles = {\n  /** The processed build results containing formatted CSS outputs grouped by themes and other permutations. */\n  processedBuilds: ProcessReturn;\n  /** Optional header to be included in the generated CSS files. */\n  fileHeader?: string;\n};\n\nconst getFileNameWithoutExtension = (path: string) => {\n  const pathSegments = path.split('/');\n  return pathSegments[pathSegments.length - 1].split('.').slice(0, -1).join('.');\n};\n\n/**\n * Generates theme-specific CSS files from Style Dictionary build results.\n *\n * @param processedBuilds - The processed build results containing formatted CSS outputs\n *                          grouped by themes and other permutations.\n * @param fileHeader - Optional header to be included in the generated CSS files.\n * @returns An array of `OutputFile` objects, each representing a theme-specific CSS file\n *          with its destination and content.\n *\n * @remarks\n * - The function groups the build results by theme and ensures a deterministic order\n *   for the sections of the entry CSS file using a predefined sort order.\n * - If a CSS section does not have a defined sort order the section is added to the end of the entry file.\n * - The generated CSS files include a header with metadata and layer definitions.\n */\nexport const createThemeCSSFiles = ({\n  processedBuilds,\n  fileHeader = defaultFileHeader,\n}: CreateThemeCSSFiles): OutputFile[] => {\n  const groupedByTheme: Record<string, OutputFile[]> = {};\n\n  for (const [_, buildResults] of Object.entries(processedBuilds)) {\n    for (const buildResult of buildResults) {\n      const themeName = buildResult.permutation.theme;\n      const newOutputs = buildResult.formatted;\n      if (R.isNotEmpty(newOutputs)) {\n        const currentOutputs = groupedByTheme[themeName] ?? [];\n        groupedByTheme[themeName] = R.concat(currentOutputs, newOutputs);\n      }\n    }\n  }\n\n  /**\n   * Defines a sort order for the sections of the entry CSS file.\n   * This ensures a deterministic order, whereas earlier this was nondeterministic\n   */\n  const sortOrder = [\n    'size-mode/',\n    'type-scale',\n    'color-scheme/light',\n    'typography/secondary',\n    'size',\n    'semantic',\n    'color-scheme/dark',\n    'color-scheme/contrast',\n    'typography/primary',\n    'color/',\n  ];\n\n  const sortByDefinedOrder = R.sortBy<OutputFile>((file) => {\n    const filePath = file.destination || '';\n    const sortIndex = sortOrder.findIndex((sortElement) => {\n      if (sortElement.endsWith('/')) {\n        return filePath.includes(sortElement);\n      }\n      return filePath.includes(`${sortElement}.css`);\n    });\n    if (sortIndex === -1) {\n      // Ensure file names that don't have a specified sort order appear last\n      console.error(\n        pc.yellow(`WARNING: CSS section does not have a defined sort order: ${filePath.replace('.css', '')}`),\n      );\n      console.log(\n        pc.dim(\n          `\nThe section will currently be added to the end of the entry file, but the exact\norder may change due to nondeterminism.`.trim(),\n        ),\n      );\n\n      return Infinity;\n    }\n    return sortIndex;\n  });\n\n  const header = `@charset \"UTF-8\";\n/*\n${fileHeader}\n*/\n\n`;\n\n  const sortAlphabetically = R.sort<OutputFile>(R.ascend((x) => x.destination || ''));\n  const sortBySize = R.sortBy<OutputFile>(\n    R.pipe((s) => getFileNameWithoutExtension(s.destination ?? ''), sizeComparator),\n  );\n  const pickOutputs = R.map<OutputFile, string>(R.view(R.lensProp('output')));\n\n  const themeCSSFile = R.pipe(\n    sortAlphabetically,\n    sortBySize,\n    sortByDefinedOrder,\n    pickOutputs,\n    R.join('\\n'),\n    (content) => header + content,\n  );\n\n  const themeCSSFiles: OutputFile[] = Object.entries(groupedByTheme).map(([theme, files]) => ({\n    destination: `${theme}.css`,\n    output: themeCSSFile(files),\n  }));\n\n  return themeCSSFiles;\n};\n"],"mappings":";;;;;AAOA,MAAa,oBAAoB,WAAWA;AAS5C,MAAM,+BAA+B,SAAiB;CACpD,MAAM,eAAe,KAAK,MAAM,GAAG;CACnC,OAAO,aAAa,aAAa,SAAS,EAAE,CAAC,MAAM,GAAG,CAAC,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC,KAAK,GAAG;AAC/E;;;;;;;;;;;;;;;;AAiBA,MAAa,uBAAuB,EAClC,iBACA,aAAa,wBAC0B;CACvC,MAAM,iBAA+C,CAAC;CAEtD,KAAK,MAAM,CAAC,GAAG,iBAAiB,OAAO,QAAQ,eAAe,GAC5D,KAAK,MAAM,eAAe,cAAc;EACtC,MAAM,YAAY,YAAY,YAAY;EAC1C,MAAM,aAAa,YAAY;EAC/B,IAAI,EAAE,WAAW,UAAU,GAAG;GAC5B,MAAM,iBAAiB,eAAe,cAAc,CAAC;GACrD,eAAe,aAAa,EAAE,OAAO,gBAAgB,UAAU;EACjE;CACF;;;;;CAOF,MAAM,YAAY;EAChB;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF;CAEA,MAAM,qBAAqB,EAAE,QAAoB,SAAS;EACxD,MAAM,WAAW,KAAK,eAAe;EACrC,MAAM,YAAY,UAAU,WAAW,gBAAgB;GACrD,IAAI,YAAY,SAAS,GAAG,GAC1B,OAAO,SAAS,SAAS,WAAW;GAEtC,OAAO,SAAS,SAAS,GAAG,YAAY,KAAK;EAC/C,CAAC;EACD,IAAI,cAAc,IAAI;GAEpB,QAAQ,MACN,GAAG,OAAO,4DAA4D,SAAS,QAAQ,QAAQ,EAAE,GAAG,CACtG;GACA,QAAQ,IACN,GAAG,IACD;;yCAE+B,KAAK,CACtC,CACF;GAEA,OAAO;EACT;EACA,OAAO;CACT,CAAC;CAED,MAAM,SAAS;;EAEf,WAAW;;;;CAKX,MAAM,qBAAqB,EAAE,KAAiB,EAAE,QAAQ,MAAM,EAAE,eAAe,EAAE,CAAC;CAClF,MAAM,aAAa,EAAE,OACnB,EAAE,MAAM,MAAM,4BAA4B,EAAE,eAAe,EAAE,GAAG,cAAc,CAChF;CACA,MAAM,cAAc,EAAE,IAAwB,EAAE,KAAK,EAAE,SAAS,QAAQ,CAAC,CAAC;CAE1E,MAAM,eAAe,EAAE,KACrB,oBACA,YACA,oBACA,aACA,EAAE,KAAK,IAAI,IACV,YAAY,SAAS,OACxB;CAOA,OALoC,OAAO,QAAQ,cAAc,CAAC,CAAC,KAAK,CAAC,OAAO,YAAY;EAC1F,aAAa,GAAG,MAAM;EACtB,QAAQ,aAAa,KAAK;CAC5B,EAEmB;AACrB"}

package/dist/src/tokens/process/platform.d.ts

@@ -0,0 +1,69 @@
+import { GetStyleDictionaryConfig } from "./configs/shared.js";
+import { OutputFile, ThemePermutation, TokenSet } from "../types.js";
+import { ProcessedThemeObject } from "./utils/getMultidimensionalThemes.js";
+import { TransformedToken } from "style-dictionary/types";
+
+//#region src/tokens/process/platform.d.ts
+type SharedOptions = {
+  /** Enable verbose output */verbose: boolean; /** Set the default color for ":root" */
+  defaultColor?: string; /** Set the default size mode */
+  defaultSize?: string; /** Set the available size modes */
+  sizeModes?: string[]; /** Token Studio `$themes.json` content */
+  processed$themes: ProcessedThemeObject[]; /** Build token format map */
+  buildTokenFormats: Record<string, {
+    token: TransformedToken;
+    formatted: string;
+  }[]>;
+};
+type BuildOptions = {
+  type: 'build'; /** Design tokens path */
+  tokensDir: string; /** Tailwind CSS configuration */
+  tailwind?: boolean;
+} & SharedOptions;
+type FormatOptions = {
+  type: 'format'; /** Tokensets */
+  tokenSets: Map<string, TokenSet>;
+} & SharedOptions;
+type ProcessOptions = BuildOptions | FormatOptions;
+type ProcessedBuildConfigs<T> = Record<keyof typeof buildConfigs, T>;
+type ProcessReturn = ProcessedBuildConfigs<BuildResult[]>;
+type BuildResult = {
+  permutation: ThemePermutation;
+  formatted: OutputFile[];
+  tokens: TransformedToken[];
+};
+declare let buildOptions: SharedOptions;
+declare const buildConfigs: {
+  typography: {
+    getConfig: GetStyleDictionaryConfig;
+    dimensions: "typography"[];
+  };
+  sizeMode: {
+    getConfig: GetStyleDictionaryConfig;
+    dimensions: "size"[];
+  };
+  size: {
+    getConfig: GetStyleDictionaryConfig;
+    dimensions: "semantic"[];
+  };
+  typeScale: {
+    getConfig: GetStyleDictionaryConfig;
+    dimensions: "semantic"[];
+  };
+  'color-scheme': {
+    getConfig: GetStyleDictionaryConfig;
+    dimensions: "color-scheme"[];
+  };
+  color: {
+    getConfig: GetStyleDictionaryConfig;
+    dimensions: "color"[];
+  };
+  semantic: {
+    getConfig: GetStyleDictionaryConfig;
+    dimensions: "semantic"[];
+  };
+};
+declare function processPlatform(options: ProcessOptions): Promise<ProcessReturn>;
+//#endregion
+export { BuildOptions, FormatOptions, ProcessReturn, buildOptions, processPlatform };
+//# sourceMappingURL=platform.d.ts.map

package/dist/src/tokens/process/platform.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"platform.d.ts","names":[],"sources":["../../../../src/tokens/process/platform.ts"],"mappings":";;;;;;KAQK,aAAA;8BAEH,OAAA,WAFG;EAIH,YAAA;EAEA,WAAA,WAM2C;EAJ3C,SAAA,aAIyB;EAFzB,gBAAA,EAAkB,oBAAA,IARlB;EAUA,iBAAA,EAAmB,MAAA;IAAiB,KAAA,EAAO,gBAAA;IAAkB,SAAA;EAAA;AAAA;AAAA,KAGnD,YAAA;EACV,IAAA,WAJoC;EAMpC,SAAA,UAN6D;EAQ7D,QAAA;AAAA,IACE,aAAa;AAAA,KAEL,aAAA;EACV,IAAA;EAEA,SAAA,EAAW,GAAA,SAAY,QAAA;AAAA,IACrB,aAAA;AAAA,KAEC,cAAA,GAAiB,YAAA,GAAe,aAAa;AAAA,KAE7C,qBAAA,MAA2B,MAAA,cAAoB,YAAA,EAAc,CAAA;AAAA,KAEtD,aAAA,GAAgB,qBAAqB,CAAC,WAAA;AAAA,KAE7C,WAAA;EACH,WAAA,EAAa,gBAAA;EACb,SAAA,EAAW,UAAA;EACX,MAAA,EAAQ,gBAAA;AAAA;AAAA,YAgBC,YAAA,EAAc,aAIxB;AAAA,cAOK,YAAA;;eAQiC,wBAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAEjB,eAAA,CAAgB,OAAA,EAAS,cAAA,GAAiB,OAAA,CAAQ,aAAA"}

package/dist/src/tokens/process/platform.js

@@ -0,0 +1,128 @@
+import { configs, getConfigsForThemeDimensions } from "./configs.js";
+import { getThemeColors } from "./utils/getMultidimensionalThemes.js";
+import pc from "picocolors";
+import * as R from "ramda";
+import StyleDictionary from "style-dictionary";
+//#region src/tokens/process/platform.ts
+const initResult = {
+	formatted: [],
+	tokens: [],
+	permutation: {
+		"color-scheme": "",
+		color: "",
+		semantic: "",
+		size: "",
+		theme: "",
+		typography: ""
+	}
+};
+let buildOptions = {
+	verbose: false,
+	processed$themes: [],
+	buildTokenFormats: {}
+};
+const sd = new StyleDictionary();
+const 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"]
+	},
+	color: {
+		getConfig: configs.colorVariables,
+		dimensions: ["color"]
+	},
+	semantic: {
+		getConfig: configs.semanticVariables,
+		dimensions: ["semantic"]
+	}
+};
+async function processPlatform(options) {
+	const { type, processed$themes } = options;
+	const platform = "css";
+	const tokenSets = type === "format" ? options.tokenSets : void 0;
+	const tokensDir = type === "build" ? options.tokensDir : void 0;
+	const UNSAFE_DEFAULT_COLOR = process.env.UNSAFE_DEFAULT_COLOR ?? "";
+	if (UNSAFE_DEFAULT_COLOR) console.warn(pc.yellow(`\n⚠️ UNSAFE_DEFAULT_COLOR is set to ${pc.blue(UNSAFE_DEFAULT_COLOR)}. This will override the default color.`));
+	/** For sharing build options in other files */
+	buildOptions = options;
+	buildOptions.defaultColor = UNSAFE_DEFAULT_COLOR;
+	if (!buildOptions.defaultColor) {
+		const customColors = getThemeColors(processed$themes);
+		buildOptions.defaultColor = R.head(customColors);
+	}
+	if (buildOptions.defaultColor) console.log(`\n🎨 Using ${pc.blue(buildOptions.defaultColor)} as default color`);
+	const sizeModes = processed$themes.filter((x) => x.group === "size").map((x) => x.name);
+	buildOptions.sizeModes = sizeModes;
+	if (!buildOptions.defaultSize) {
+		const defaultSize = R.head(sizeModes);
+		buildOptions.defaultSize = defaultSize;
+	}
+	if (buildOptions.defaultSize) console.log(`\n📏 Using ${pc.blue(buildOptions.defaultSize)} as default size`);
+	const buildAndSdConfigs = R.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"));
+		for (const unknowns of unknownConfigs) if (unknowns.length === sdConfigs.length) buildConfig.enabled = () => false;
+		return {
+			buildConfig,
+			sdConfigs
+		};
+	}, buildConfigs);
+	const processedBuilds = {
+		"color-scheme": [initResult],
+		color: [initResult],
+		semantic: [initResult],
+		typography: [initResult],
+		sizeMode: [initResult],
+		size: [initResult],
+		typeScale: [initResult]
+	};
+	try {
+		for (const [buildName, { buildConfig, sdConfigs }] of R.toPairs(buildAndSdConfigs)) {
+			if (!(buildConfig.enabled?.() ?? true)) continue;
+			if (sdConfigs.length > 0) {
+				console.log(`\n🍱 Building ${pc.green(buildConfig.name ?? buildName)}`);
+				processedBuilds[buildName] = await Promise.all(sdConfigs.map(async (sdConfig) => {
+					const { config, permutation } = sdConfig;
+					const modeMessage = ["theme", ...buildConfig.dimensions].map((x) => permutation[x]).join(" - ");
+					const logMessage = R.isNil(buildConfig.log) ? modeMessage : buildConfig?.log(sdConfig);
+					console.log(logMessage);
+					const sdOptions = { cache: true };
+					const sdExtended = await sd.extend(config);
+					const result = {
+						permutation,
+						formatted: await sdExtended.formatPlatform(platform, sdOptions),
+						tokens: (await sdExtended.getPlatformTokens(platform, sdOptions)).allTokens
+					};
+					return Promise.resolve(result);
+				}));
+			}
+		}
+	} catch (err) {
+		if (err instanceof Error) err.message = err.message.replace("log.verbosity \"verbose\" or use ", "");
+		throw err;
+	}
+	return processedBuilds;
+}
+//#endregion
+export { buildOptions, processPlatform };
+
+//# sourceMappingURL=platform.js.map

package/dist/src/tokens/process/platform.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"platform.js","names":[],"sources":["../../../../src/tokens/process/platform.ts"],"sourcesContent":["import pc from 'picocolors';\nimport * as R from 'ramda';\nimport StyleDictionary from 'style-dictionary';\nimport type { TransformedToken } from 'style-dictionary/types';\nimport type { BuildConfig, OutputFile, ThemePermutation, TokenSet } from '../types.ts';\nimport { configs, getConfigsForThemeDimensions } from './configs.ts';\nimport { getThemeColors, type ProcessedThemeObject } from './utils/getMultidimensionalThemes.ts';\n\ntype SharedOptions = {\n  /** Enable verbose output */\n  verbose: boolean;\n  /** Set the default color for \":root\" */\n  defaultColor?: string;\n  /** Set the default size mode */\n  defaultSize?: string;\n  /** Set the available size modes */\n  sizeModes?: string[];\n  /** Token Studio `$themes.json` content */\n  processed$themes: ProcessedThemeObject[];\n  /** Build token format map */\n  buildTokenFormats: Record<string, { token: TransformedToken; formatted: string }[]>;\n};\n\nexport type BuildOptions = {\n  type: 'build';\n  /** Design tokens path */\n  tokensDir: string;\n  /** Tailwind CSS configuration */\n  tailwind?: boolean;\n} & SharedOptions;\n\nexport type FormatOptions = {\n  type: 'format';\n  /** Tokensets */\n  tokenSets: Map<string, TokenSet>;\n} & SharedOptions;\n\ntype ProcessOptions = BuildOptions | FormatOptions;\n\ntype ProcessedBuildConfigs<T> = Record<keyof typeof buildConfigs, T>;\n\nexport type ProcessReturn = ProcessedBuildConfigs<BuildResult[]>;\n\ntype BuildResult = {\n  permutation: ThemePermutation;\n  formatted: OutputFile[];\n  tokens: TransformedToken[];\n};\n\nconst initResult: BuildResult = {\n  formatted: [],\n  tokens: [],\n  permutation: {\n    'color-scheme': '',\n    color: '',\n    semantic: '',\n    size: '',\n    theme: '',\n    typography: '',\n  },\n};\n\nexport let buildOptions: SharedOptions = {\n  verbose: false,\n  processed$themes: [],\n  buildTokenFormats: {},\n};\n\nconst sd = new StyleDictionary();\n\n/*\n * Declarative configuration of the build output\n */\nconst buildConfigs = {\n  typography: { getConfig: configs.typographyVariables, dimensions: ['typography'] },\n  sizeMode: { getConfig: configs.sizeModeVariables, dimensions: ['size'] },\n  size: { getConfig: configs.sizeVariables, dimensions: ['semantic'] },\n  typeScale: { getConfig: configs.typeScaleVariables, dimensions: ['semantic'] },\n  'color-scheme': { getConfig: configs.colorSchemeVariables, dimensions: ['color-scheme'] },\n  color: { getConfig: configs.colorVariables, dimensions: ['color'] },\n  semantic: { getConfig: configs.semanticVariables, dimensions: ['semantic'] },\n} satisfies Record<string, BuildConfig>;\n\nexport async function processPlatform(options: ProcessOptions): Promise<ProcessReturn> {\n  const { type, processed$themes } = options;\n  const platform = 'css';\n  const tokenSets = type === 'format' ? options.tokenSets : undefined;\n  const tokensDir = type === 'build' ? options.tokensDir : undefined;\n\n  const UNSAFE_DEFAULT_COLOR = process.env.UNSAFE_DEFAULT_COLOR ?? '';\n  if (UNSAFE_DEFAULT_COLOR) {\n    console.warn(\n      pc.yellow(\n        `\\n⚠️ UNSAFE_DEFAULT_COLOR is set to ${pc.blue(UNSAFE_DEFAULT_COLOR)}. This will override the default color.`,\n      ),\n    );\n  }\n\n  /** For sharing build options in other files */\n  buildOptions = options;\n  buildOptions.defaultColor = UNSAFE_DEFAULT_COLOR;\n\n  if (!buildOptions.defaultColor) {\n    const customColors = getThemeColors(processed$themes);\n    buildOptions.defaultColor = R.head(customColors);\n  }\n\n  if (buildOptions.defaultColor) {\n    console.log(`\\n🎨 Using ${pc.blue(buildOptions.defaultColor)} as default color`);\n  }\n\n  const sizeModes = processed$themes.filter((x) => x.group === 'size').map((x) => x.name);\n  buildOptions.sizeModes = sizeModes;\n  if (!buildOptions.defaultSize) {\n    const defaultSize = R.head(sizeModes);\n    buildOptions.defaultSize = defaultSize;\n  }\n  if (buildOptions.defaultSize) {\n    console.log(`\\n📏 Using ${pc.blue(buildOptions.defaultSize)} as default size`);\n  }\n\n  const buildAndSdConfigs = R.map((buildConfig: BuildConfig) => {\n    const sdConfigs = getConfigsForThemeDimensions(buildConfig.getConfig, processed$themes, buildConfig.dimensions, {\n      tokensDir,\n      tokenSets,\n    });\n\n    // Disable build if all sdConfigs dimensions permutation are unknown\n    const unknownConfigs = buildConfig.dimensions.map((dimension) =>\n      sdConfigs.filter((x) => x.permutation[dimension] === 'unknown'),\n    );\n    for (const unknowns of unknownConfigs) {\n      if (unknowns.length === sdConfigs.length) {\n        buildConfig.enabled = () => false;\n      }\n    }\n\n    return {\n      buildConfig,\n      sdConfigs,\n    };\n  }, buildConfigs);\n\n  const processedBuilds: ProcessedBuildConfigs<Array<BuildResult>> = {\n    'color-scheme': [initResult],\n    color: [initResult],\n    semantic: [initResult],\n    typography: [initResult],\n    sizeMode: [initResult],\n    size: [initResult],\n    typeScale: [initResult],\n  };\n\n  try {\n    for (const [buildName, { buildConfig, sdConfigs }] of R.toPairs(buildAndSdConfigs)) {\n      if (!(buildConfig.enabled?.() ?? true)) {\n        continue;\n      }\n\n      if (sdConfigs.length > 0) {\n        console.log(`\\n🍱 Building ${pc.green(buildConfig.name ?? buildName)}`);\n\n        const results = await Promise.all(\n          sdConfigs.map(async (sdConfig) => {\n            const { config, permutation } = sdConfig;\n\n            const modes: Array<keyof ThemePermutation> = ['theme', ...buildConfig.dimensions];\n            const modeMessage = modes.map((x) => permutation[x]).join(' - ');\n            const logMessage = R.isNil(buildConfig.log) ? modeMessage : buildConfig?.log(sdConfig);\n            console.log(logMessage);\n\n            const sdOptions = { cache: true };\n            const sdExtended = await sd.extend(config);\n            const formatted = await sdExtended.formatPlatform(platform, sdOptions);\n            const tokens = (await sdExtended.getPlatformTokens(platform, sdOptions)).allTokens;\n\n            const result: BuildResult = {\n              permutation,\n              formatted: formatted as OutputFile[],\n              tokens,\n            };\n\n            return Promise.resolve(result);\n          }),\n        );\n\n        processedBuilds[buildName] = results;\n      }\n    }\n  } catch (err) {\n    // Fix crash error message from StyleDictionary from\n    //   > Use log.verbosity \"verbose\" or use CLI option --verbose for more details.\n    // to\n    //   > Use CLI option --verbose for more details.\n    if (err instanceof Error) {\n      err.message = err.message.replace('log.verbosity \"verbose\" or use ', '');\n    }\n    throw err;\n  }\n\n  return processedBuilds;\n}\n"],"mappings":"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"}

package/dist/src/tokens/process/transformers.d.ts

@@ -0,0 +1,10 @@
+import { Transform } from "style-dictionary/types";
+
+//#region src/tokens/process/transformers.d.ts
+declare const sizeRem: Transform;
+declare const typographyName: Transform;
+declare const resolveMath: Transform;
+declare const unitless: Transform;
+//#endregion
+export { resolveMath, sizeRem, typographyName, unitless };
+//# sourceMappingURL=transformers.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"transformers.d.ts","names":[],"sources":["../../../../src/tokens/process/transformers.ts"],"mappings":";;;cAQa,OAAA,EAAS,SAyBrB;AAAA,cAEY,cAAA,EAAgB,SAS5B;AAAA,cAEY,WAAA,EAAa,SAWzB;AAAA,cAEY,QAAA,EAAU,SAMtB"}

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

@@ -0,0 +1,56 @@
+import { getValue, pathStartsWithOneOf, typeEquals } from "../utils.js";
+import * as R from "ramda";
+import { checkAndEvaluateMath } from "@tokens-studio/sd-transforms";
+//#region src/tokens/process/transformers.ts
+const isPx = R.test(/\b\d+px\b/g);
+const sizeRem = {
+	name: "ds/size/toRem",
+	type: "value",
+	transitive: true,
+	filter: (token) => {
+		const hasWantedType = typeEquals(["dimension", "fontsize"], token);
+		const hasWantedPath = pathStartsWithOneOf(["border-radius", "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) return "0";
+			return `${size / baseFont}rem`;
+		}
+		return value;
+	}
+};
+const typographyName = {
+	name: "name/typography",
+	type: "name",
+	transitive: true,
+	filter: (token) => pathStartsWithOneOf(["typography"], token),
+	transform: (token) => {
+		return token.name.replace("-typography", "");
+	}
+};
+const resolveMath = {
+	name: "ds/resolveMath",
+	type: "value",
+	transitive: true,
+	filter: (token) => {
+		const isValidValue = ["string", "object"].includes(typeof getValue(token));
+		const isTokenOfInterest = !pathStartsWithOneOf(["border-radius"], token);
+		return isValidValue && isTokenOfInterest;
+	},
+	transform: (token, platformCfg) => checkAndEvaluateMath(token, platformCfg.mathFractionDigits)
+};
+const unitless = {
+	name: "ds/unitless",
+	type: "value",
+	transitive: true,
+	filter: (token) => pathStartsWithOneOf(["size", "_size"], token),
+	transform: (token) => parseInt(getValue(token), 10)
+};
+//#endregion
+export { resolveMath, sizeRem, typographyName, unitless };
+
+//# sourceMappingURL=transformers.js.map

package/dist/src/tokens/process/transformers.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"transformers.js","names":[],"sources":["../../../../src/tokens/process/transformers.ts"],"sourcesContent":["import { checkAndEvaluateMath } from '@tokens-studio/sd-transforms';\nimport * as R from 'ramda';\nimport type { Transform } from 'style-dictionary/types';\n\nimport { getValue, pathStartsWithOneOf, typeEquals } from '../utils.ts';\n\nconst isPx = R.test(/\\b\\d+px\\b/g);\n\nexport const sizeRem: Transform = {\n  name: 'ds/size/toRem',\n  type: 'value',\n  transitive: true,\n  filter: (token) => {\n    const hasWantedType = typeEquals(['dimension', 'fontsize'], token);\n    const hasWantedPath = pathStartsWithOneOf(['border-radius', 'font-size' /*, ['_size', 'mode-font-size']*/], token);\n\n    return hasWantedType && hasWantedPath;\n  },\n  transform: (token, config) => {\n    const value = getValue<string>(token);\n\n    if (isPx(value)) {\n      const baseFont = (config.basePxFontSize as unknown as number) || 16;\n      const size = parseInt(value, 10);\n\n      if (size === 0) {\n        return '0';\n      }\n\n      return `${size / baseFont}rem`;\n    }\n    return value;\n  },\n};\n\nexport const typographyName: Transform = {\n  name: 'name/typography',\n  type: 'name',\n  transitive: true,\n  // expanded tokens have different type so we match on path instead\n  filter: (token) => pathStartsWithOneOf(['typography'], token),\n  transform: (token) => {\n    return token.name.replace('-typography', '');\n  },\n};\n\nexport const resolveMath: Transform = {\n  name: 'ds/resolveMath',\n  type: 'value',\n  transitive: true,\n  filter: (token) => {\n    const isValidValue = ['string', 'object'].includes(typeof getValue(token));\n    const isTokenOfInterest = !pathStartsWithOneOf(['border-radius'], token);\n\n    return isValidValue && isTokenOfInterest;\n  },\n  transform: (token, platformCfg) => checkAndEvaluateMath(token, platformCfg.mathFractionDigits),\n};\n\nexport const unitless: Transform = {\n  name: 'ds/unitless',\n  type: 'value',\n  transitive: true,\n  filter: (token) => pathStartsWithOneOf(['size', '_size'], token),\n  transform: (token) => parseInt(getValue<string>(token), 10),\n};\n"],"mappings":";;;;AAMA,MAAM,OAAO,EAAE,KAAK,YAAY;AAEhC,MAAa,UAAqB;CAChC,MAAM;CACN,MAAM;CACN,YAAY;CACZ,SAAS,UAAU;EACjB,MAAM,gBAAgB,WAAW,CAAC,aAAa,UAAU,GAAG,KAAK;EACjE,MAAM,gBAAgB,oBAAoB,CAAC,iBAAiB,WAA6C,GAAG,KAAK;EAEjH,OAAO,iBAAiB;CAC1B;CACA,YAAY,OAAO,WAAW;EAC5B,MAAM,QAAQ,SAAiB,KAAK;EAEpC,IAAI,KAAK,KAAK,GAAG;GACf,MAAM,WAAY,OAAO,kBAAwC;GACjE,MAAM,OAAO,SAAS,OAAO,EAAE;GAE/B,IAAI,SAAS,GACX,OAAO;GAGT,OAAO,GAAG,OAAO,SAAS;EAC5B;EACA,OAAO;CACT;AACF;AAEA,MAAa,iBAA4B;CACvC,MAAM;CACN,MAAM;CACN,YAAY;CAEZ,SAAS,UAAU,oBAAoB,CAAC,YAAY,GAAG,KAAK;CAC5D,YAAY,UAAU;EACpB,OAAO,MAAM,KAAK,QAAQ,eAAe,EAAE;CAC7C;AACF;AAEA,MAAa,cAAyB;CACpC,MAAM;CACN,MAAM;CACN,YAAY;CACZ,SAAS,UAAU;EACjB,MAAM,eAAe,CAAC,UAAU,QAAQ,CAAC,CAAC,SAAS,OAAO,SAAS,KAAK,CAAC;EACzE,MAAM,oBAAoB,CAAC,oBAAoB,CAAC,eAAe,GAAG,KAAK;EAEvE,OAAO,gBAAgB;CACzB;CACA,YAAY,OAAO,gBAAgB,qBAAqB,OAAO,YAAY,kBAAkB;AAC/F;AAEA,MAAa,WAAsB;CACjC,MAAM;CACN,MAAM;CACN,YAAY;CACZ,SAAS,UAAU,oBAAoB,CAAC,QAAQ,OAAO,GAAG,KAAK;CAC/D,YAAY,UAAU,SAAS,SAAiB,KAAK,GAAG,EAAE;AAC5D"}

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

@@ -0,0 +1,38 @@
+import { ThemeDimension, ThemePermutation } from "../../types.js";
+import { ThemeObject } from "../../../../node_modules/.pnpm/@tokens-studio_types@0.5.2/node_modules/@tokens-studio/types/dist/types/ThemeObject.js";
+
+//#region src/tokens/process/utils/getMultidimensionalThemes.d.ts
+/**
+ * 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 processed$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
+ */
+declare const getMultidimensionalThemes: (processed$themes: ProcessedThemeObject[], dimensions: ThemeDimension[]) => PermutatedTheme[];
+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
+ */
+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
+ */
+declare function processThemeObject(theme: ThemeObject | ProcessedThemeObject): ProcessedThemeObject;
+declare const getThemeColors: (processed$themes: ProcessedThemeObject[]) => string[];
+//#endregion
+export { ProcessedThemeObject, getMultidimensionalThemes, getThemeColors, processThemeObject };
+//# sourceMappingURL=getMultidimensionalThemes.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"getMultidimensionalThemes.d.ts","names":[],"sources":["../../../../../src/tokens/process/utils/getMultidimensionalThemes.ts"],"mappings":";;;;;;AAmBA;;;;;;;;;cAAa,yBAAA,GAA6B,gBAAA,EAAkB,oBAAA,IAAwB,UAAA,EAAY,cAAA,OAAgB,eAAA;AAAA,KAiB3G,eAAA;EACH,IAAA;EACA,iBAAA;EACA,WAAA,EAAa,gBAAgB;AAAA;AAAA,cAGzB,SAAA;;;;KAIM,oBAAA,GAAuB,WAAA;EAAA,CAAiB,SAAS;AAAA;;;AAP9B;AAAA;;iBAkBf,kBAAA,CAAmB,KAAA,EAAO,WAAA,GAAc,oBAAA,GAAuB,oBAAA;AAAA,cAyGlE,cAAA,GAAkB,gBAAwC,EAAtB,oBAAoB"}

package/dist/src/tokens/process/utils/getMultidimensionalThemes.js

@@ -0,0 +1,112 @@
+import { TokenSetStatus } from "../../../../node_modules/.pnpm/@tokens-studio_types@0.5.2/node_modules/@tokens-studio/types/dist/constants/TokenSetStatus.js";
+import "../../../../node_modules/.pnpm/@tokens-studio_types@0.5.2/node_modules/@tokens-studio/types/dist/types/index.js";
+import { buildOptions } from "../platform.js";
+import { kebabCase } from "./kebab-case.js";
+import pc from "picocolors";
+import * as R from "ramda";
+//#region src/tokens/process/utils/getMultidimensionalThemes.ts
+/**
+* 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 processed$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
+*/
+const 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 nonDependentKeys = R.keys(grouped$themes).filter((x) => ![...ALL_DEPENDENT_ON, ...dimensions].includes(x));
+	if (verboseLogging) {
+		console.log(pc.cyan(`🔎 Finding theme permutations for ${dimensions}`));
+		console.log(pc.cyan(`   (ignoring permutations for ${nonDependentKeys})`));
+	}
+	return permutations.filter((val) => {
+		return nonDependentKeys.map((x) => val.permutation[x] === grouped$themes[x][0].name).every((x) => x);
+	});
+};
+const processed = Symbol("Type brand for ProcessedThemeObject");
+function isProcessed(theme) {
+	return Boolean(theme[processed]);
+}
+/**
+* Normalise theme names and theme group names for easier use in code
+* @param theme A theme object from $themes.json
+* @returns Processed theme object
+*/
+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 theme of themes) 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;
+}
+const hasUnknownProps = R.pipe(R.values, R.none(R.equals("unknown")), R.not);
+function permutateThemes(groups) {
+	const separator = "_";
+	return cartesian(Object.values(groups)).map((perm) => {
+		const permutatedTheme = perm.reduce((acc, theme) => {
+			const { group, name, selectedTokenSets } = theme;
+			let updatedPermutation = acc.permutation;
+			if (group) {
+				const groupProp = R.lensProp(group);
+				updatedPermutation = R.set(groupProp, name, updatedPermutation);
+			}
+			const updatedName = `${String(acc.name)}${acc ? separator : ""}${name}`;
+			const sets = [...acc.selectedTokenSets, ...filterTokenSets(selectedTokenSets)];
+			return {
+				permutation: updatedPermutation,
+				name: updatedName,
+				selectedTokenSets: sets
+			};
+		}, {
+			name: "",
+			selectedTokenSets: [],
+			permutation: {
+				"color-scheme": "unknown",
+				color: "unknown",
+				theme: "unknown",
+				semantic: "unknown",
+				size: "unknown",
+				typography: "unknown"
+			}
+		});
+		if (hasUnknownProps(permutatedTheme)) throw Error(`Theme ${permutatedTheme.name} has unknown props: ${JSON.stringify(permutatedTheme)}`);
+		const uniqueTokenSets = new Set(permutatedTheme.selectedTokenSets);
+		return {
+			...permutatedTheme,
+			selectedTokenSets: Array.from(uniqueTokenSets)
+		};
+	});
+}
+function filterTokenSets(tokensets) {
+	return Object.entries(tokensets).filter(([, val]) => val !== TokenSetStatus.DISABLED).sort((a, b) => {
+		if (a[1] === TokenSetStatus.SOURCE && b[1] === TokenSetStatus.ENABLED) return -1;
+		if (a[1] === TokenSetStatus.ENABLED && b[1] === TokenSetStatus.SOURCE) return 1;
+		return 0;
+	}).map((entry) => entry[0]);
+}
+function cartesian(a) {
+	return a.reduce((a, b) => a.flatMap((d) => b.map((e) => [d, e].flat())));
+}
+const getThemeColors = (processed$themes) => Array.from(new Set(processed$themes.filter((x) => x.group === "color").map((x) => x.name)));
+//#endregion
+export { getMultidimensionalThemes, getThemeColors, processThemeObject };
+
+//# sourceMappingURL=getMultidimensionalThemes.js.map

package/dist/src/tokens/process/utils/getMultidimensionalThemes.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"getMultidimensionalThemes.js","names":[],"sources":["../../../../../src/tokens/process/utils/getMultidimensionalThemes.ts"],"sourcesContent":["import type { ThemeObject } from '@tokens-studio/types';\nimport { TokenSetStatus } from '@tokens-studio/types';\nimport pc from 'picocolors';\nimport * as R from 'ramda';\nimport type { ThemeDimension, ThemePermutation } from '../../types.ts';\nimport { buildOptions } from '../platform.ts';\nimport { kebabCase } from './kebab-case.ts';\n\n/**\n * Find the theme permutations that are relevant for the given theme dimensions.\n *\n * Technically, for the given dimensions all permutations are included, while for other\n * dimensions the first permutation is used.\n *\n * @param processed$themes Theme objects from $themes.json (Tokens Studio)\n * @param dimensions Which theme dimensions to return permutations for.\n *    'theme' (e.g. altinn/digdir/uutilsynet) is always implicitly included.\n * @returns the relevant theme permutations\n */\nexport const getMultidimensionalThemes = (processed$themes: ProcessedThemeObject[], dimensions: ThemeDimension[]) => {\n  const verboseLogging = buildOptions?.verbose;\n  const grouped$themes = groupThemes(processed$themes);\n  const permutations = permutateThemes(grouped$themes);\n  const ALL_DEPENDENT_ON: ThemeDimension[] = ['theme'];\n  const keys = R.keys(grouped$themes);\n  const nonDependentKeys = keys.filter((x) => ![...ALL_DEPENDENT_ON, ...dimensions].includes(x));\n  if (verboseLogging) {\n    console.log(pc.cyan(`🔎 Finding theme permutations for ${dimensions}`));\n    console.log(pc.cyan(`   (ignoring permutations for ${nonDependentKeys})`));\n  }\n  return permutations.filter((val: PermutatedTheme) => {\n    const filters = nonDependentKeys.map((x) => val.permutation[x] === grouped$themes[x][0].name);\n    return filters.every((x) => x);\n  });\n};\n\ntype PermutatedTheme = {\n  name: string;\n  selectedTokenSets: string[];\n  permutation: ThemePermutation;\n};\n\nconst processed: unique symbol = Symbol('Type brand for ProcessedThemeObject');\n/**\n * A Tokens Studio {@link ThemeObject} which has been processed for easier use in code\n */\nexport type ProcessedThemeObject = ThemeObject & { [processed]: true };\n\nfunction isProcessed(theme: ThemeObject): theme is ProcessedThemeObject {\n  return Boolean((theme as ProcessedThemeObject)[processed]);\n}\n\n/**\n * Normalise theme names and theme group names for easier use in code\n * @param theme A theme object from $themes.json\n * @returns Processed theme object\n */\nexport function processThemeObject(theme: ThemeObject | ProcessedThemeObject): ProcessedThemeObject {\n  if (isProcessed(theme)) {\n    return theme;\n  }\n  const result: ProcessedThemeObject = { ...theme, [processed]: true };\n  if (result.group) {\n    result.group = kebabCase(result.group);\n  }\n  result.name = kebabCase(result.name);\n  return result;\n}\n\ntype GroupedThemes = Record<keyof ThemePermutation, ProcessedThemeObject[]>;\n\nfunction groupThemes(themes: ProcessedThemeObject[]): GroupedThemes {\n  const groups = {} as GroupedThemes;\n  for (const theme of themes) {\n    if (theme.group) {\n      const groupKey = theme.group as keyof GroupedThemes;\n      groups[groupKey] = [...(groups[groupKey] ?? []), theme];\n    } else {\n      throw new Error(\n        `Theme ${theme.name} does not have a group property, which is required for multi-dimensional theming.`,\n      );\n    }\n  }\n  return groups;\n}\n\nconst hasUnknownProps = R.pipe(R.values, R.none(R.equals('unknown')), R.not);\n\nfunction permutateThemes(groups: GroupedThemes): PermutatedTheme[] {\n  const separator = '_';\n  // Create theme permutations\n  const permutations = cartesian(Object.values(groups)) as Array<ThemeObject[]>;\n\n  const permutatedThemes = permutations.map((perm) => {\n    const permutatedTheme = perm.reduce(\n      (acc, theme) => {\n        const { group, name, selectedTokenSets } = theme;\n        let updatedPermutation = acc.permutation;\n\n        if (group) {\n          const groupProp = R.lensProp<ThemePermutation>(group as keyof ThemePermutation);\n          updatedPermutation = R.set(groupProp, name, updatedPermutation);\n        }\n\n        const updatedName = `${String(acc.name)}${acc ? separator : ''}${name}`;\n        const sets = [...acc.selectedTokenSets, ...filterTokenSets(selectedTokenSets)];\n\n        return {\n          permutation: updatedPermutation,\n          name: updatedName,\n          selectedTokenSets: sets,\n        };\n      },\n      {\n        name: '',\n        selectedTokenSets: [],\n        permutation: {\n          'color-scheme': 'unknown',\n          color: 'unknown',\n          theme: 'unknown',\n          semantic: 'unknown',\n          size: 'unknown',\n          typography: 'unknown',\n        },\n      } as PermutatedTheme,\n    );\n\n    if (hasUnknownProps(permutatedTheme)) {\n      throw Error(`Theme ${permutatedTheme.name} has unknown props: ${JSON.stringify(permutatedTheme)}`);\n    }\n\n    const uniqueTokenSets = new Set(permutatedTheme.selectedTokenSets);\n\n    return { ...permutatedTheme, selectedTokenSets: Array.from(uniqueTokenSets) };\n  });\n\n  return permutatedThemes;\n}\n\nfunction filterTokenSets(tokensets: Record<string, TokenSetStatus>) {\n  return (\n    Object.entries(tokensets)\n      .filter(([, val]) => val !== TokenSetStatus.DISABLED)\n      // ensure source type sets are always ordered before enabled type sets\n      .sort((a, b) => {\n        if (a[1] === TokenSetStatus.SOURCE && b[1] === TokenSetStatus.ENABLED) {\n          return -1;\n        }\n        if (a[1] === TokenSetStatus.ENABLED && b[1] === TokenSetStatus.SOURCE) {\n          return 1;\n        }\n        return 0;\n      })\n      .map((entry) => entry[0])\n  );\n}\n\n// cartesian permutations: [[1,2], [3,4]] -> [[1,3], [1,4], [2,3], [2,4]]\nfunction cartesian(a: Array<unknown[]>) {\n  return a.reduce((a, b) => a.flatMap((d) => b.map((e) => [d, e].flat())));\n}\n\nexport const getThemeColors = (processed$themes: ProcessedThemeObject[]) =>\n  Array.from(new Set<string>(processed$themes.filter((x) => x.group === 'color').map((x) => x.name)));\n"],"mappings":"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"}

package/dist/src/tokens/process/utils/kebab-case.d.ts

@@ -0,0 +1,8 @@
+//#region src/tokens/process/utils/kebab-case.d.ts
+/**
+ * Function to convert a string to kebab-case.
+ */
+declare function kebabCase(str: string): string;
+//#endregion
+export { kebabCase };
+//# sourceMappingURL=kebab-case.d.ts.map

package/dist/src/tokens/process/utils/kebab-case.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"kebab-case.d.ts","names":[],"sources":["../../../../../src/tokens/process/utils/kebab-case.ts"],"mappings":";;AAGA;;iBAAgB,SAAA,CAAU,GAAW"}

package/dist/src/tokens/process/utils/kebab-case.js

@@ -0,0 +1,11 @@
+//#region src/tokens/process/utils/kebab-case.ts
+/**
+* Function to convert a string to kebab-case.
+*/
+function kebabCase(str) {
+	return str.replace(/([a-z])([A-Z])/g, "$1-$2").replace(/[\s_]+/g, "-").toLowerCase();
+}
+//#endregion
+export { kebabCase };
+
+//# sourceMappingURL=kebab-case.js.map

package/dist/src/tokens/process/utils/kebab-case.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"kebab-case.js","names":[],"sources":["../../../../../src/tokens/process/utils/kebab-case.ts"],"sourcesContent":["/**\n * Function to convert a string to kebab-case.\n */\nexport function kebabCase(str: string): string {\n  return str\n    .replace(/([a-z])([A-Z])/g, '$1-$2') // Handle camelCase\n    .replace(/[\\s_]+/g, '-') // Replace spaces and underscores with hyphens\n    .toLowerCase();\n}\n"],"mappings":";;;;AAGA,SAAgB,UAAU,KAAqB;CAC7C,OAAO,IACJ,QAAQ,mBAAmB,OAAO,CAAC,CACnC,QAAQ,WAAW,GAAG,CAAC,CACvB,YAAY;AACjB"}