@digdir/designsystemet 0.0.0-deps-tsdown-20260421103939

package/dist/src/tokens/process/formats/css/typography.js

@@ -0,0 +1,29 @@
+import { buildOptions } from "../../platform.js";
+import * as R from "ramda";
+import { createPropertyFormatter } from "style-dictionary/utils";
+//#region src/tokens/process/formats/css/typography.ts
+const typographyFontFamilyPredicate = R.allPass([R.pathSatisfies(R.includes("typography"), ["path"]), R.pathSatisfies(R.includes("fontFamily"), ["path"])]);
+const 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 = createPropertyFormatter({
+			outputReferences,
+			dictionary,
+			format: "css",
+			usesDtcg
+		});
+		const formattedMap = R.reject(typographyFontFamilyPredicate, dictionary.allTokens).map((token) => ({
+			token,
+			formatted: format(token)
+		}));
+		buildOptions.buildTokenFormats[destination] = formattedMap;
+		const formattedTokens = formattedMap.map(R.view(R.lensProp("formatted"))).join("\n");
+		const content = selector ? `${selector} {\n${formattedTokens}\n}` : formattedTokens;
+		return R.isNotNil(layer) ? `@layer ${layer} {\n${content}\n}` : content;
+	}
+};
+//#endregion
+export { typography };

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

@@ -0,0 +1,11 @@
+import type { Format } from 'style-dictionary/types';
+export declare const formats: {
+    colorScheme: Format;
+    colorCategory: Format;
+    semantic: Format;
+    sizeMode: Format;
+    size: Format;
+    typography: Format;
+    typeScale: Format;
+};
+//# sourceMappingURL=css.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"css.d.ts","sourceRoot":"","sources":["../../../../../src/tokens/process/formats/css.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AASrD,eAAO,MAAM,OAAO;;;;;;;;CAQc,CAAC"}

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

@@ -0,0 +1,18 @@
+import { colorCategory, colorScheme } from "./css/color.js";
+import { size } from "./css/size.js";
+import { semantic } from "./css/semantic.js";
+import { sizeMode } from "./css/size-mode.js";
+import { typography } from "./css/typography.js";
+import { typeScale } from "./css/type-scale.js";
+//#region src/tokens/process/formats/css.ts
+const formats = {
+	colorScheme,
+	colorCategory,
+	semantic,
+	sizeMode,
+	size,
+	typography,
+	typeScale
+};
+//#endregion
+export { formats };

package/dist/src/tokens/process/output/declarations.d.ts

@@ -0,0 +1,5 @@
+import type { OutputFile } from '../../types.js';
+import { type ProcessedThemeObject } from '../utils/getMultidimensionalThemes.js';
+export declare const defaultFileHeader: string;
+export declare const createTypeDeclarationFiles: (processed$themes: ProcessedThemeObject[]) => OutputFile[];
+//# sourceMappingURL=declarations.d.ts.map

package/dist/src/tokens/process/output/declarations.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"declarations.d.ts","sourceRoot":"","sources":["../../../../../src/tokens/process/output/declarations.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAEjD,OAAO,EAAmB,KAAK,oBAAoB,EAAE,MAAM,uCAAuC,CAAC;AAEnG,eAAO,MAAM,iBAAiB,QAA2B,CAAC;AAE1D,eAAO,MAAM,0BAA0B,GAAI,kBAAkB,oBAAoB,EAAE,KAAG,UAAU,EAe/F,CAAC"}

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

@@ -0,0 +1,38 @@
+import { version } from "../../../../package.js";
+import { getCustomColors } from "../utils/getMultidimensionalThemes.js";
+import { buildOptions } from "../platform.js";
+import pc from "picocolors";
+//#region src/tokens/process/output/declarations.ts
+const defaultFileHeader = `build: v${version}`;
+const createTypeDeclarationFiles = (processed$themes) => {
+	const typeDeclaration = createColorTypeDeclaration([...getCustomColors(processed$themes, buildOptions?.colorGroups || []), "neutral"]);
+	return [{
+		output: `/* This file is deprecated and will be removed in a future release. Use types.d.ts instead */\n${typeDeclaration}`,
+		destination: "colors.d.ts"
+	}, {
+		output: typeDeclaration,
+		destination: "types.d.ts"
+	}];
+};
+function createColorTypeDeclaration(colors) {
+	console.log(`\n🍱 Building ${pc.green("type declarations")}`);
+	return `
+/* ${defaultFileHeader} */
+import type {} from '@digdir/designsystemet-types';
+
+// Augment types based on theme
+declare module '@digdir/designsystemet-types' {
+  export interface ColorDefinitions {
+${colors.map((color) => `    ${color.includes("-") ? `'${color}'` : color}: never;`).join("\n")}
+  }
+  export interface SeverityColorDefinitions {
+    info: never;
+    success: never;
+    warning: never;
+    danger: never;
+  }
+}
+`.trimStart();
+}
+//#endregion
+export { createTypeDeclarationFiles, defaultFileHeader };

package/dist/src/tokens/process/output/tailwind.d.ts

@@ -0,0 +1,3 @@
+import type { OutputFile } from '../../types.js';
+export declare const createTailwindCSSFiles: (cssFiles: OutputFile[]) => OutputFile[];
+//# sourceMappingURL=tailwind.d.ts.map

package/dist/src/tokens/process/output/tailwind.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tailwind.d.ts","sourceRoot":"","sources":["../../../../../src/tokens/process/output/tailwind.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAEjD,eAAO,MAAM,sBAAsB,GAAI,UAAU,UAAU,EAAE,KAAG,UAAU,EAezE,CAAC"}

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

@@ -0,0 +1,45 @@
+//#region src/tokens/process/output/tailwind.ts
+const createTailwindCSSFiles = (cssFiles) => {
+	console.log("\n🍱 Creating Tailwind Config");
+	return cssFiles.map((file) => {
+		if (file.destination) {
+			const tailwindConfig = generateTailwind(file.output);
+			return {
+				destination: file.destination.replace(".css", ".tailwind.css"),
+				output: tailwindConfig
+			};
+		}
+	}).filter((item) => item !== void 0);
+};
+const generateTailwind = (css) => {
+	const tailwind = ["--font-sans: var(--ds-font-family)"];
+	const tokens = Array.from(new Set(css.match(/--ds-[^:)]+/g)), (m) => m).sort((a, b) => a.localeCompare(b, void 0, {
+		numeric: true,
+		sensitivity: "base"
+	}));
+	for (const token of tokens) if (token.startsWith("--ds-color-") && !token.startsWith("--ds-color-focus")) tailwind.push(`--color-${token.replace("--ds-color-", "")}: var(${token})`);
+	else if (token.startsWith("--ds-font-weight-")) tailwind.push(`--font-weight-${token.replace("--ds-font-weight-", "")}: var(${token})`);
+	else if (token.match(/--ds-border-radius-(sm|md|lg|xl)/)) tailwind.push(`--radius-${token.replace("--ds-border-radius-", "")}: var(${token})`);
+	else if (token.match(/--ds-body-(sm|mg|lg)-body-font-size/)) tailwind.push(`--text-${token.replace("--ds-body-", "").replace("-font-size", "")}: var(${token})`);
+	else if (token.match(/^--ds-size-\d+$/)) tailwind.push(`--spacing-${token.replace("--ds-size-", "")}: var(${token})`);
+	return `@theme {${tailwind.map((str) => `\n  ${str};`).join("")}\n}\n[data-color] {
+      --color-background-default: var(--ds-color-background-default);
+      --color-background-tinted: var(--ds-color-background-tinted);
+      --color-surface-default: var(--ds-color-surface-default);
+      --color-surface-tinted: var(--ds-color-surface-tinted);
+      --color-surface-hover: var(--ds-color-surface-hover);
+      --color-surface-active: var(--ds-color-surface-active);
+      --color-border-subtle: var(--ds-color-border-subtle);
+      --color-border-default: var(--ds-color-border-default);
+      --color-border-strong: var(--ds-color-border-strong);
+      --color-text-subtle: var(--ds-color-text-subtle);
+      --color-text-default: var(--ds-color-text-default);
+      --color-base-default: var(--ds-color-base-default);
+      --color-base-hover: var(--ds-color-base-hover);
+      --color-base-active: var(--ds-color-base-active);
+      --color-base-contrast-subtle: var(--ds-color-base-contrast-subtle);
+      --color-base-contrast-default: var(--ds-color-base-contrast-default);
+    }`;
+};
+//#endregion
+export { createTailwindCSSFiles };

package/dist/src/tokens/process/output/theme.d.ts

@@ -0,0 +1,27 @@
+import type { OutputFile } from '../../types.js';
+import type { ProcessReturn } from '../platform.js';
+export declare const defaultFileHeader: string;
+type CreateThemeCSSFiles = {
+    /** The processed build results containing formatted CSS outputs grouped by themes and other permutations. */
+    processedBuilds: ProcessReturn;
+    /** Optional header to be included in the generated CSS files. */
+    fileHeader?: string;
+};
+/**
+ * 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.
+ */
+export declare const createThemeCSSFiles: ({ processedBuilds, fileHeader, }: CreateThemeCSSFiles) => OutputFile[];
+export {};
+//# sourceMappingURL=theme.d.ts.map

package/dist/src/tokens/process/output/theme.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../../../../src/tokens/process/output/theme.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAEjD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAEpD,eAAO,MAAM,iBAAiB,QAA2B,CAAC;AAE1D,KAAK,mBAAmB,GAAG;IACzB,6GAA6G;IAC7G,eAAe,EAAE,aAAa,CAAC;IAC/B,iEAAiE;IACjE,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,CAAC;AAOF;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,mBAAmB,GAAI,kCAGjC,mBAAmB,KAAG,UAAU,EAqFlC,CAAC"}

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

@@ -0,0 +1,83 @@
+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 };

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

@@ -0,0 +1,106 @@
+import type { TransformedToken } from 'style-dictionary/types';
+import type { OutputFile, TokenSet } from '../types.js';
+import { type ThemePermutation } from '../types.js';
+import { type ProcessedThemeObject } from './utils/getMultidimensionalThemes.js';
+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[];
+    /** Color groups */
+    colorGroups?: string[];
+    /** Build token format map */
+    buildTokenFormats: Record<string, {
+        token: TransformedToken;
+        formatted: string;
+    }[]>;
+};
+export type BuildOptions = {
+    type: 'build';
+    /** Design tokens path */
+    tokensDir: string;
+    /** Tailwind CSS configuration */
+    tailwind?: boolean;
+} & SharedOptions;
+export type FormatOptions = {
+    type: 'format';
+    /** Tokensets */
+    tokenSets: Map<string, TokenSet>;
+} & SharedOptions;
+export type ProcessOptions = BuildOptions | FormatOptions;
+type ProcessedBuildConfigs<T> = Record<keyof typeof buildConfigs, T>;
+export type ProcessReturn = ProcessedBuildConfigs<BuildResult[]>;
+type BuildResult = {
+    permutation: ThemePermutation;
+    formatted: OutputFile[];
+    tokens: TransformedToken[];
+};
+export declare let buildOptions: SharedOptions;
+declare const buildConfigs: {
+    typography: {
+        getConfig: import("./configs/shared.js").GetStyleDictionaryConfig;
+        dimensions: "typography"[];
+    };
+    sizeMode: {
+        getConfig: import("./configs/shared.js").GetStyleDictionaryConfig;
+        dimensions: "size"[];
+    };
+    size: {
+        getConfig: import("./configs/shared.js").GetStyleDictionaryConfig;
+        dimensions: "semantic"[];
+    };
+    typeScale: {
+        getConfig: import("./configs/shared.js").GetStyleDictionaryConfig;
+        dimensions: "semantic"[];
+    };
+    'color-scheme': {
+        getConfig: import("./configs/shared.js").GetStyleDictionaryConfig;
+        dimensions: "color-scheme"[];
+    };
+    'main-color': {
+        getConfig: import("./configs/shared.js").GetStyleDictionaryConfig;
+        dimensions: "main-color"[];
+    };
+    'support-color': {
+        getConfig: import("./configs/shared.js").GetStyleDictionaryConfig;
+        dimensions: "support-color"[];
+    };
+    'neutral-color': {
+        getConfig: import("./configs/shared.js").GetStyleDictionaryConfig;
+        dimensions: "semantic"[];
+        log: ({ permutation: { theme } }: import("../types.js").SDConfigForThemePermutation) => string;
+    };
+    'success-color': {
+        getConfig: import("./configs/shared.js").GetStyleDictionaryConfig;
+        dimensions: "semantic"[];
+        log: ({ permutation: { theme } }: import("../types.js").SDConfigForThemePermutation) => string;
+    };
+    'danger-color': {
+        getConfig: import("./configs/shared.js").GetStyleDictionaryConfig;
+        dimensions: "semantic"[];
+        log: ({ permutation: { theme } }: import("../types.js").SDConfigForThemePermutation) => string;
+    };
+    'warning-color': {
+        getConfig: import("./configs/shared.js").GetStyleDictionaryConfig;
+        dimensions: "semantic"[];
+        log: ({ permutation: { theme } }: import("../types.js").SDConfigForThemePermutation) => string;
+    };
+    'info-color': {
+        getConfig: import("./configs/shared.js").GetStyleDictionaryConfig;
+        dimensions: "semantic"[];
+        log: ({ permutation: { theme } }: import("../types.js").SDConfigForThemePermutation) => string;
+    };
+    semantic: {
+        getConfig: import("./configs/shared.js").GetStyleDictionaryConfig;
+        dimensions: "semantic"[];
+    };
+};
+export declare function processPlatform(options: ProcessOptions): Promise<ProcessReturn>;
+export {};
+//# sourceMappingURL=platform.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"platform.d.ts","sourceRoot":"","sources":["../../../../src/tokens/process/platform.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAC/D,OAAO,KAAK,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACxD,OAAO,EAAqC,KAAK,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAEvF,OAAO,EAAmB,KAAK,oBAAoB,EAAE,MAAM,sCAAsC,CAAC;AAElG,KAAK,aAAa,GAAG;IACnB,4BAA4B;IAC5B,OAAO,EAAE,OAAO,CAAC;IACjB,wCAAwC;IACxC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,gCAAgC;IAChC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,mCAAmC;IACnC,SAAS,CAAC,EAAE,MAAM,EAAE,CAAC;IACrB,0CAA0C;IAC1C,gBAAgB,EAAE,oBAAoB,EAAE,CAAC;IACzC,mBAAmB;IACnB,WAAW,CAAC,EAAE,MAAM,EAAE,CAAC;IACvB,6BAA6B;IAC7B,iBAAiB,EAAE,MAAM,CAAC,MAAM,EAAE;QAAE,KAAK,EAAE,gBAAgB,CAAC;QAAC,SAAS,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC,CAAC;CACrF,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG;IACzB,IAAI,EAAE,OAAO,CAAC;IACd,yBAAyB;IACzB,SAAS,EAAE,MAAM,CAAC;IAClB,iCAAiC;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,GAAG,aAAa,CAAC;AAElB,MAAM,MAAM,aAAa,GAAG;IAC1B,IAAI,EAAE,QAAQ,CAAC;IACf,gBAAgB;IAChB,SAAS,EAAE,GAAG,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC;CAClC,GAAG,aAAa,CAAC;AAElB,MAAM,MAAM,cAAc,GAAG,YAAY,GAAG,aAAa,CAAC;AAE1D,KAAK,qBAAqB,CAAC,CAAC,IAAI,MAAM,CAAC,MAAM,OAAO,YAAY,EAAE,CAAC,CAAC,CAAC;AAErE,MAAM,MAAM,aAAa,GAAG,qBAAqB,CAAC,WAAW,EAAE,CAAC,CAAC;AAEjE,KAAK,WAAW,GAAG;IACjB,WAAW,EAAE,gBAAgB,CAAC;IAC9B,SAAS,EAAE,UAAU,EAAE,CAAC;IACxB,MAAM,EAAE,gBAAgB,EAAE,CAAC;CAC5B,CAAC;AAgBF,eAAO,IAAI,YAAY,EAAE,aAIxB,CAAC;AAOF,QAAA,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkCqB,CAAC;AAExC,wBAAsB,eAAe,CAAC,OAAO,EAAE,cAAc,GAAG,OAAO,CAAC,aAAa,CAAC,CA2IrF"}

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

@@ -0,0 +1,168 @@
+import { colorCategories } from "../types.js";
+import { getCustomColors } from "./utils/getMultidimensionalThemes.js";
+import { configs, getConfigsForThemeDimensions } from "./configs.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": "",
+		"main-color": "",
+		"support-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"]
+	},
+	"main-color": {
+		getConfig: configs.mainColorVariables,
+		dimensions: ["main-color"]
+	},
+	"support-color": {
+		getConfig: configs.supportColorVariables,
+		dimensions: ["support-color"]
+	},
+	"neutral-color": {
+		getConfig: configs.neutralColorVariables,
+		dimensions: ["semantic"],
+		log: ({ permutation: { theme } }) => `${theme} - neutral`
+	},
+	"success-color": {
+		getConfig: configs.successColorVariables,
+		dimensions: ["semantic"],
+		log: ({ permutation: { theme } }) => `${theme} - success`
+	},
+	"danger-color": {
+		getConfig: configs.dangerColorVariables,
+		dimensions: ["semantic"],
+		log: ({ permutation: { theme } }) => `${theme} - danger`
+	},
+	"warning-color": {
+		getConfig: configs.warningColorVariables,
+		dimensions: ["semantic"],
+		log: ({ permutation: { theme } }) => `${theme} - warning`
+	},
+	"info-color": {
+		getConfig: configs.infoColorVariables,
+		dimensions: ["semantic"],
+		log: ({ permutation: { theme } }) => `${theme} - info`
+	},
+	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.`));
+	const UNSAFE_COLOR_GROUPS = Array.from(process.env.UNSAFE_COLOR_GROUPS?.split(",") ?? []);
+	if (UNSAFE_COLOR_GROUPS.length > 0) console.warn(pc.yellow(`\n⚠️ UNSAFE_COLOR_GROUPS is set to ${pc.blue(`[${UNSAFE_COLOR_GROUPS.join(", ")}]`)}. This will override the default color groups.`));
+	const colorGroups = UNSAFE_COLOR_GROUPS.length > 0 ? UNSAFE_COLOR_GROUPS : [colorCategories.main, colorCategories.support].map((c) => `${c}-color`);
+	/** For sharing build options in other files */
+	buildOptions = options;
+	buildOptions.defaultColor = UNSAFE_DEFAULT_COLOR;
+	buildOptions.colorGroups = colorGroups;
+	if (!buildOptions.defaultColor) {
+		const customColors = getCustomColors(processed$themes, colorGroups);
+		const firstMainColor = R.head(customColors);
+		buildOptions.defaultColor = firstMainColor;
+	}
+	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],
+		"main-color": [initResult],
+		"support-color": [initResult],
+		"neutral-color": [initResult],
+		"success-color": [initResult],
+		"danger-color": [initResult],
+		"warning-color": [initResult],
+		"info-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 };

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

@@ -0,0 +1,6 @@
+import type { Transform } from 'style-dictionary/types';
+export declare const sizeRem: Transform;
+export declare const typographyName: Transform;
+export declare const resolveMath: Transform;
+export declare const unitless: Transform;
+//# sourceMappingURL=transformers.d.ts.map

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

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

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

@@ -0,0 +1,54 @@
+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 };