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

package/dist/src/tokens/process/formats/css/size-mode.d.ts

@@ -0,0 +1,7 @@
+import { Format } from "style-dictionary/types";
+
+//#region src/tokens/process/formats/css/size-mode.d.ts
+declare const sizeMode: Format;
+//#endregion
+export { sizeMode };
+//# sourceMappingURL=size-mode.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"size-mode.d.ts","names":[],"sources":["../../../../../../src/tokens/process/formats/css/size-mode.ts"],"mappings":";;;cAiBa,QAAA,EAAU,MAsDtB"}

package/dist/src/tokens/process/formats/css/size-mode.js

@@ -0,0 +1,52 @@
+import { orderBySize, shortSizeName } from "../../../utils.js";
+import "../../configs/shared.js";
+import { buildOptions } from "../../platform.js";
+import * as R from "ramda";
+import { createPropertyFormatter } from "style-dictionary/utils";
+//#region src/tokens/process/formats/css/size-mode.ts
+const formatBaseSizeToken = (size) => (token) => ({
+	...token,
+	originalName: token.name,
+	name: `${token.name}--${shortSizeName(size)}`,
+	$value: token.$value / 16
+});
+const sizeMode = {
+	name: "ds/css-size-mode",
+	format: async ({ dictionary, file, options, platform }) => {
+		const { outputReferences, usesDtcg } = options;
+		const { selector, layer, size } = platform;
+		const destination = file.destination;
+		const format = createPropertyFormatter({
+			outputReferences,
+			dictionary,
+			format: "css",
+			usesDtcg
+		});
+		const sizeSpecificTokens = dictionary.allTokens.map(formatBaseSizeToken(size));
+		const sizeSpecificVariables = sizeSpecificTokens.map(format).join("\n");
+		const formattedMap = sizeSpecificTokens.map((token) => ({
+			token,
+			formatted: format({
+				...token,
+				name: token.originalName
+			})
+		}));
+		buildOptions.buildTokenFormats[destination] = formattedMap;
+		const body = wrapInLayer(`${selector} /* ${size} */ {\n${sizeSpecificVariables}\n}`, layer);
+		const sizes = orderBySize(buildOptions?.sizeModes ?? []).map(shortSizeName);
+		const sharedContent = `${`:root, [data-size] {
+  --ds-size: var(--ds-size--${shortSizeName(buildOptions?.defaultSize ?? "")});
+${sizes.map((size) => `  --ds-size--${size}: var(--ds-size,);`).join("\n")}
+  --ds-size-mode-font-size:
+${sizes.map((size) => `    var(--ds-size--${size}, var(--ds-size-mode-font-size--${size}))`).join("\n")};
+}`}\n\n${sizes.map((size) => `[data-size='${size}'] { --ds-size: var(--ds-size--${size}); }`).join("\n")}`;
+		return body + (shortSizeName(size) === R.last(sizes) ? `\n${wrapInLayer(sharedContent, layer)}` : "");
+	}
+};
+function wrapInLayer(content, layer) {
+	return R.isNotNil(layer) ? `@layer ${layer} {\n${content}\n}\n` : `${content}\n`;
+}
+//#endregion
+export { sizeMode };
+
+//# sourceMappingURL=size-mode.js.map

package/dist/src/tokens/process/formats/css/size-mode.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"size-mode.js","names":[],"sources":["../../../../../../src/tokens/process/formats/css/size-mode.ts"],"sourcesContent":["import * as R from 'ramda';\nimport type { TransformedToken } from 'style-dictionary';\nimport type { Format } from 'style-dictionary/types';\nimport { createPropertyFormatter } from 'style-dictionary/utils';\nimport { orderBySize, shortSizeName } from '../../../utils.ts';\nimport { basePxFontSize } from '../../configs/shared.ts';\nimport { buildOptions } from '../../platform.ts';\n\nconst formatBaseSizeToken =\n  (size: string) =>\n  (token: TransformedToken): TransformedToken & { originalName: string } => ({\n    ...token,\n    originalName: token.name,\n    name: `${token.name}--${shortSizeName(size)}`,\n    $value: token.$value / basePxFontSize,\n  });\n\nexport const sizeMode: Format = {\n  name: 'ds/css-size-mode',\n  format: async ({ dictionary, file, options, platform }) => {\n    const { outputReferences, usesDtcg } = options;\n    const { selector, layer, size } = platform;\n    const destination = file.destination as string;\n\n    const format = createPropertyFormatter({\n      outputReferences,\n      dictionary,\n      format: 'css',\n      usesDtcg,\n    });\n\n    const sizeSpecificTokens = dictionary.allTokens.map(formatBaseSizeToken(size));\n    const sizeSpecificVariables = sizeSpecificTokens.map(format).join('\\n');\n\n    const formattedMap = sizeSpecificTokens.map((token) => ({\n      token,\n      formatted: format({\n        ...token,\n        // Remove the `--<size>` suffix for the token listing, since that is the only token we actually use\n        name: token.originalName,\n      }),\n    }));\n\n    buildOptions.buildTokenFormats[destination] = formattedMap;\n\n    const content = `${selector} /* ${size} */ {\\n${sizeSpecificVariables}\\n}`;\n    const body = wrapInLayer(content, layer);\n\n    /*\n     * The following CSS is only generated once, not per mode\n     */\n    const sizes = orderBySize(buildOptions?.sizeModes ?? []).map(shortSizeName);\n    const defaultSize = shortSizeName(buildOptions?.defaultSize ?? '');\n\n    const sizingToggles = `:root, [data-size] {\n  --ds-size: var(--ds-size--${defaultSize});\n${sizes.map((size) => `  --ds-size--${size}: var(--ds-size,);`).join('\\n')}\n  --ds-size-mode-font-size:\n${sizes.map((size) => `    var(--ds-size--${size}, var(--ds-size-mode-font-size--${size}))`).join('\\n')};\n}`;\n    const sizingHelpers = sizes\n      .map((size) => `[data-size='${size}'] { --ds-size: var(--ds-size--${size}); }`)\n      .join('\\n');\n    const sharedContent = `${sizingToggles}\\n\\n${sizingHelpers}`;\n    const sharedBody = shortSizeName(size) === R.last(sizes) ? `\\n${wrapInLayer(sharedContent, layer)}` : '';\n    /*\n     * End of generated-once CSS\n     */\n\n    return body + sharedBody;\n  },\n};\n\nfunction wrapInLayer(content: string, layer?: string) {\n  return R.isNotNil(layer) ? `@layer ${layer} {\\n${content}\\n}\\n` : `${content}\\n`;\n}\n"],"mappings":";;;;;;AAQA,MAAM,uBACH,UACA,WAA0E;CACzE,GAAG;CACH,cAAc,MAAM;CACpB,MAAM,GAAG,MAAM,KAAK,IAAI,cAAc,IAAI;CAC1C,QAAQ,MAAM,SAAA;AAChB;AAEF,MAAa,WAAmB;CAC9B,MAAM;CACN,QAAQ,OAAO,EAAE,YAAY,MAAM,SAAS,eAAe;EACzD,MAAM,EAAE,kBAAkB,aAAa;EACvC,MAAM,EAAE,UAAU,OAAO,SAAS;EAClC,MAAM,cAAc,KAAK;EAEzB,MAAM,SAAS,wBAAwB;GACrC;GACA;GACA,QAAQ;GACR;EACF,CAAC;EAED,MAAM,qBAAqB,WAAW,UAAU,IAAI,oBAAoB,IAAI,CAAC;EAC7E,MAAM,wBAAwB,mBAAmB,IAAI,MAAM,CAAC,CAAC,KAAK,IAAI;EAEtE,MAAM,eAAe,mBAAmB,KAAK,WAAW;GACtD;GACA,WAAW,OAAO;IAChB,GAAG;IAEH,MAAM,MAAM;GACd,CAAC;EACH,EAAE;EAEF,aAAa,kBAAkB,eAAe;EAG9C,MAAM,OAAO,YAAY,GADN,SAAS,MAAM,KAAK,SAAS,sBAAsB,MACpC,KAAK;EAKvC,MAAM,QAAQ,YAAY,cAAc,aAAa,CAAC,CAAC,CAAC,CAAC,IAAI,aAAa;EAY1E,MAAM,gBAAgB,GAAG;8BAXL,cAAc,cAAc,eAAe,EAG3B,EAAE;EACxC,MAAM,KAAK,SAAS,gBAAgB,KAAK,mBAAmB,CAAC,CAAC,KAAK,IAAI,EAAE;;EAEzE,MAAM,KAAK,SAAS,sBAAsB,KAAK,kCAAkC,KAAK,GAAG,CAAC,CAAC,KAAK,IAAI,EAAE;GAK7D,MAHjB,MACnB,KAAK,SAAS,eAAe,KAAK,iCAAiC,KAAK,KAAK,CAAC,CAC9E,KAAK,IACiD;EAMzD,OAAO,QALY,cAAc,IAAI,MAAM,EAAE,KAAK,KAAK,IAAI,KAAK,YAAY,eAAe,KAAK,MAAM;CAMxG;AACF;AAEA,SAAS,YAAY,SAAiB,OAAgB;CACpD,OAAO,EAAE,SAAS,KAAK,IAAI,UAAU,MAAM,MAAM,QAAQ,SAAS,GAAG,QAAQ;AAC/E"}

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

@@ -0,0 +1,16 @@
+import { TransformedToken } from "style-dictionary";
+import { Format } from "style-dictionary/types";
+
+//#region src/tokens/process/formats/css/size.d.ts
+declare const isInlineTokens: (t: TransformedToken) => boolean;
+declare const sizingTemplate: ({
+  round,
+  calc
+}: {
+  round: string[];
+  calc: string[];
+}) => string;
+declare const size: Format;
+//#endregion
+export { isInlineTokens, size, sizingTemplate };
+//# sourceMappingURL=size.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"size.d.ts","names":[],"sources":["../../../../../../src/tokens/process/formats/css/size.ts"],"mappings":";;;;cAWa,cAAA,GAAc,CAJ4B,EAAhB,gBAAgB;AAAA,cAwD1C,cAAA;EAAkB,KAAA;EAAA;AAAA;EAAmB,KAAA;EAAiB,IAAA;AAAA;AAAA,cAStD,IAAA,EAAM,MAyClB"}

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

@@ -0,0 +1,95 @@
+import { inlineTokens, isDigit, pathStartsWithOneOf } from "../../../utils.js";
+import { buildOptions } from "../../platform.js";
+import * as R from "ramda";
+import { createPropertyFormatter } from "style-dictionary/utils";
+//#region src/tokens/process/formats/css/size.ts
+const isNumericBorderRadiusToken = (t) => t.path[0] === "border-radius" && isDigit(t.path[1]);
+const isNumericSizeToken = (t) => pathStartsWithOneOf(["size"], t) && isDigit(t.path[1]);
+const isSizeToken = (t) => pathStartsWithOneOf(["size"], t);
+const isInlineTokens = R.anyPass([
+	isNumericBorderRadiusToken,
+	isNumericSizeToken,
+	isSizeToken
+]);
+/**
+* Overrides the default sizing formula with a custom one that supports [round()](https://developer.mozilla.org/en-US/docs/Web/CSS/round) if supported.
+*
+* @param format - Function to format a token into a CSS property string.
+* @param tokens - Array of transformed tokens to format.
+* @returns Object with formatted CSS strings for calc and round.
+*/
+const overrideSizingFormula = (format, token) => {
+	const [name, value] = format(token).replace(/;$/, "").split(": ");
+	let calc;
+	let round;
+	if (token.path[1] === "unit") calc = `calc(1rem * ${value})`;
+	else if (value.startsWith("floor")) {
+		calc = value.replace(/^floor\((.*)\)$/, "calc($1)");
+		round = `round(down, ${calc}, 1px)`;
+	} else calc = value.includes("*") ? `calc(${value})` : value;
+	return {
+		name,
+		round: round ?? calc,
+		calc
+	};
+};
+/**
+* Formats sizing tokens into CSS properties with support for rounding.
+*
+* @param format - Function to format a token into a CSS property string.
+* @param tokens - Array of transformed tokens to format.
+* @returns Formatted CSS string with default calc and [round()](https://developer.mozilla.org/en-US/docs/Web/CSS/round) if supported.
+*/
+const formatSizingTokens = (format, tokens) => R.reduce((acc, token) => {
+	const { round, calc, name } = overrideSizingFormula(format, token);
+	return {
+		tokens: [...acc.tokens, token],
+		round: [...acc.round, `${name}: ${round};`],
+		calc: [...acc.calc, `${name}: ${calc};`]
+	};
+}, {
+	tokens: [],
+	round: [],
+	calc: []
+}, tokens);
+const sizingTemplate = ({ round, calc }) => {
+	const usesRounding = round.filter((val, i) => val !== calc[i]);
+	return `
+${calc.join("\n")}\n
+  @supports (width: round(down, .1em, 1px)) {
+  ${usesRounding.join("\n  ")}
+  }`;
+};
+const size = {
+	name: "ds/css-size",
+	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 tokens = inlineTokens(isInlineTokens, dictionary.allTokens);
+		const filteredTokens = R.reject((token) => R.equals(["_size", "mode-font-size"], token.path), tokens);
+		const [sizingTokens, restTokens] = R.partition((t) => pathStartsWithOneOf(["_size"], t) && (isDigit(t.path[1]) || t.path[1] === "unit"), filteredTokens);
+		const formattedSizingTokens = formatSizingTokens(format, sizingTokens);
+		const formattedMap = restTokens.map((token) => ({
+			token,
+			formatted: format(token)
+		}));
+		const formattedSizingMap = formattedSizingTokens.round.map((t, i) => ({
+			token: formattedSizingTokens.tokens[i],
+			formatted: t
+		}));
+		buildOptions.buildTokenFormats[destination] = [...formattedMap, ...formattedSizingMap];
+		const content = `${selector} {\n${[formattedMap.map(R.prop("formatted")).join("\n"), sizingTemplate(formattedSizingTokens)].join("\n")}\n}\n`;
+		return R.isNotNil(layer) ? `@layer ${layer} {\n${content}\n}\n` : `${content}\n`;
+	}
+};
+//#endregion
+export { isInlineTokens, size, sizingTemplate };
+
+//# sourceMappingURL=size.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"size.js","names":[],"sources":["../../../../../../src/tokens/process/formats/css/size.ts"],"sourcesContent":["import * as R from 'ramda';\nimport type { TransformedToken } from 'style-dictionary';\nimport type { Format } from 'style-dictionary/types';\nimport { createPropertyFormatter } from 'style-dictionary/utils';\nimport { inlineTokens, isDigit, pathStartsWithOneOf } from '../../../utils.ts';\nimport { buildOptions } from '../../platform.ts';\n\nconst isNumericBorderRadiusToken = (t: TransformedToken) => t.path[0] === 'border-radius' && isDigit(t.path[1]);\nconst isNumericSizeToken = (t: TransformedToken) => pathStartsWithOneOf(['size'], t) && isDigit(t.path[1]);\nconst isSizeToken = (t: TransformedToken) => pathStartsWithOneOf(['size'], t);\n\nexport const isInlineTokens = R.anyPass([isNumericBorderRadiusToken, isNumericSizeToken, isSizeToken]);\n\n/**\n * Overrides the default sizing formula with a custom one that supports [round()](https://developer.mozilla.org/en-US/docs/Web/CSS/round) if supported.\n *\n * @param format - Function to format a token into a CSS property string.\n * @param tokens - Array of transformed tokens to format.\n * @returns Object with formatted CSS strings for calc and round.\n */\nconst overrideSizingFormula = (format: (t: TransformedToken) => string, token: TransformedToken) => {\n  const [name, value] = format(token).replace(/;$/, '').split(': ');\n\n  let calc: string;\n  let round: string | undefined;\n  if (token.path[1] === 'unit') {\n    calc = `calc(1rem * ${value})`;\n  } else if (value.startsWith('floor')) {\n    calc = value.replace(/^floor\\((.*)\\)$/, 'calc($1)');\n    round = `round(down, ${calc}, 1px)`;\n  } else {\n    calc = value.includes('*') ? `calc(${value})` : value;\n  }\n\n  return {\n    name,\n    round: round ?? calc,\n    calc,\n  };\n};\n\n/**\n * Formats sizing tokens into CSS properties with support for rounding.\n *\n * @param format - Function to format a token into a CSS property string.\n * @param tokens - Array of transformed tokens to format.\n * @returns Formatted CSS string with default calc and [round()](https://developer.mozilla.org/en-US/docs/Web/CSS/round) if supported.\n */\nconst formatSizingTokens = (format: (t: TransformedToken) => string, tokens: TransformedToken[]) =>\n  R.reduce(\n    (acc, token) => {\n      const { round, calc, name } = overrideSizingFormula(format, token);\n\n      return {\n        tokens: [...acc.tokens, token],\n        round: [...acc.round, `${name}: ${round};`],\n        calc: [...acc.calc, `${name}: ${calc};`],\n      };\n    },\n    { tokens: [], round: [], calc: [] } as { tokens: TransformedToken[]; round: string[]; calc: string[] },\n    tokens,\n  );\n\nexport const sizingTemplate = ({ round, calc }: { round: string[]; calc: string[] }) => {\n  const usesRounding = round.filter((val, i) => val !== calc[i]);\n  return `\n${calc.join('\\n')}\\n\n  @supports (width: round(down, .1em, 1px)) {\n  ${usesRounding.join('\\n  ')}\n  }`;\n};\n\nexport const size: Format = {\n  name: 'ds/css-size',\n  format: async ({ dictionary, file, options, platform }) => {\n    const { outputReferences, usesDtcg } = options;\n    const { selector, layer } = platform;\n    const destination = file.destination as string;\n\n    const format = createPropertyFormatter({\n      outputReferences,\n      dictionary,\n      format: 'css',\n      usesDtcg,\n    });\n\n    const tokens = inlineTokens(isInlineTokens, dictionary.allTokens);\n    const filteredTokens = R.reject((token) => R.equals(['_size', 'mode-font-size'], token.path), tokens);\n    const [sizingTokens, restTokens] = R.partition(\n      (t: TransformedToken) => pathStartsWithOneOf(['_size'], t) && (isDigit(t.path[1]) || t.path[1] === 'unit'),\n      filteredTokens,\n    );\n    const formattedSizingTokens = formatSizingTokens(format, sizingTokens);\n\n    const formattedMap = restTokens.map((token) => ({\n      token,\n      formatted: format(token),\n    }));\n\n    const formattedSizingMap = formattedSizingTokens.round.map((t, i) => ({\n      token: formattedSizingTokens.tokens[i],\n      formatted: t,\n    }));\n\n    buildOptions.buildTokenFormats[destination] = [...formattedMap, ...formattedSizingMap];\n\n    const formattedTokens = [formattedMap.map(R.prop('formatted')).join('\\n'), sizingTemplate(formattedSizingTokens)];\n\n    const content = `${selector} {\\n${formattedTokens.join('\\n')}\\n}\\n`;\n    const body = R.isNotNil(layer) ? `@layer ${layer} {\\n${content}\\n}\\n` : `${content}\\n`;\n\n    return body;\n  },\n};\n"],"mappings":"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"}

package/dist/src/tokens/process/formats/css/type-scale.d.ts

@@ -0,0 +1,7 @@
+import { Format } from "style-dictionary/types";
+
+//#region src/tokens/process/formats/css/type-scale.d.ts
+declare const typeScale: Format;
+//#endregion
+export { typeScale };
+//# sourceMappingURL=type-scale.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"type-scale.d.ts","names":[],"sources":["../../../../../../src/tokens/process/formats/css/type-scale.ts"],"mappings":";;;cA4Ca,SAAA,EAAW,MA8BvB"}

package/dist/src/tokens/process/formats/css/type-scale.js

@@ -0,0 +1,57 @@
+import { sizingTemplate } from "./size.js";
+import "../../configs/shared.js";
+import { buildOptions } from "../../platform.js";
+import * as R from "ramda";
+import { createPropertyFormatter } from "style-dictionary/utils";
+//#region src/tokens/process/formats/css/type-scale.ts
+const isTypographyFontFamilyToken = R.allPass([R.pathSatisfies(R.includes("typography"), ["path"]), R.pathSatisfies(R.includes("fontFamily"), ["path"])]);
+const formatTypographySizeToken = (format, token) => {
+	const [name, value] = format(token).replace(/;$/, "").split(": ");
+	let calc;
+	let round;
+	if (R.startsWith(["font-size"], token.path)) {
+		calc = `calc(${value} * var(--_ds-font-size-factor))`;
+		round = `round(${calc}, 1px)`;
+	} else calc = value;
+	return {
+		name,
+		calc,
+		round: round ?? calc
+	};
+};
+const formatTypographySizeTokens = (format, tokens) => R.reduce((acc, token) => {
+	const { name, calc, round } = formatTypographySizeToken(format, token);
+	acc.tokens.push(token);
+	acc.calc.push(`${name}: ${calc};`);
+	acc.round.push(`${name}: ${round};`);
+	return acc;
+}, {
+	tokens: [],
+	calc: [],
+	round: []
+}, tokens);
+const typeScale = {
+	name: "ds/css-type-scale",
+	format: async ({ dictionary, file, options, platform }) => {
+		const { outputReferences, usesDtcg } = options;
+		const { selector, layer } = platform;
+		const destination = file.destination;
+		const formattedTokens = formatTypographySizeTokens(createPropertyFormatter({
+			outputReferences,
+			dictionary,
+			format: "css",
+			usesDtcg
+		}), R.reject(R.anyPass([isTypographyFontFamilyToken]), dictionary.allTokens));
+		const formattedMap = formattedTokens.round.map((t, i) => ({
+			token: formattedTokens.tokens[i],
+			formatted: t
+		}));
+		buildOptions.buildTokenFormats[destination] = formattedMap;
+		const content = `${selector} {\n  --_ds-font-size-factor: calc(var(--ds-size-mode-font-size) / (var(--ds-size-base) / 16));${sizingTemplate(formattedTokens)}\n}`;
+		return R.isNotNil(layer) ? `@layer ${layer} {\n${content}\n}` : content;
+	}
+};
+//#endregion
+export { typeScale };
+
+//# sourceMappingURL=type-scale.js.map

package/dist/src/tokens/process/formats/css/type-scale.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"type-scale.js","names":[],"sources":["../../../../../../src/tokens/process/formats/css/type-scale.ts"],"sourcesContent":["import * as R from 'ramda';\nimport type { Format, TransformedToken } from 'style-dictionary/types';\nimport { createPropertyFormatter } from 'style-dictionary/utils';\nimport { basePxFontSize } from '../../configs/shared.ts';\nimport { buildOptions } from '../../platform.ts';\nimport { sizingTemplate } from './size.ts';\n\n// Predicate to filter tokens with .path array that includes both typography and fontFamily\nconst isTypographyFontFamilyToken = R.allPass([\n  R.pathSatisfies(R.includes('typography'), ['path']),\n  R.pathSatisfies(R.includes('fontFamily'), ['path']),\n]);\n\ntype TokensWithCalcAndRoundFormatting = { tokens: TransformedToken[]; calc: string[]; round: string[] };\n\nconst formatTypographySizeToken = (\n  format: (t: TransformedToken) => string,\n  token: TransformedToken,\n): { name: string; calc: string; round: string } => {\n  const [name, value] = format(token).replace(/;$/, '').split(': ');\n  let calc: string;\n  let round: string | undefined;\n  if (R.startsWith(['font-size'], token.path)) {\n    calc = `calc(${value} * var(--_ds-font-size-factor))`;\n    round = `round(${calc}, 1px)`;\n  } else {\n    calc = value;\n  }\n  return { name, calc, round: round ?? calc };\n};\n\nconst formatTypographySizeTokens = (format: (t: TransformedToken) => string, tokens: TransformedToken[]) =>\n  R.reduce<TransformedToken, TokensWithCalcAndRoundFormatting>(\n    (acc, token) => {\n      const { name, calc, round } = formatTypographySizeToken(format, token);\n      acc.tokens.push(token);\n      acc.calc.push(`${name}: ${calc};`);\n      acc.round.push(`${name}: ${round};`);\n      return acc;\n    },\n    { tokens: [], calc: [], round: [] },\n    tokens,\n  );\n\nexport const typeScale: Format = {\n  name: 'ds/css-type-scale',\n  format: async ({ dictionary, file, options, platform }) => {\n    const { outputReferences, usesDtcg } = options;\n    const { selector, layer } = platform as { selector: string; layer: string };\n    const destination = file.destination as string;\n\n    const format = createPropertyFormatter({\n      outputReferences,\n      dictionary,\n      format: 'css',\n      usesDtcg,\n    });\n\n    const filteredTokens = R.reject(R.anyPass([isTypographyFontFamilyToken]), dictionary.allTokens);\n    const formattedTokens = formatTypographySizeTokens(format, filteredTokens);\n\n    const formattedMap = formattedTokens.round.map((t, i) => ({\n      token: formattedTokens.tokens[i],\n      formatted: t,\n    }));\n\n    buildOptions.buildTokenFormats[destination] = formattedMap;\n\n    const sizeFactor = `  --_ds-font-size-factor: calc(var(--ds-size-mode-font-size) / (var(--ds-size-base) / ${basePxFontSize}));`;\n    const content = `${selector} {\\n${sizeFactor}${sizingTemplate(formattedTokens)}\\n}`;\n    const body = R.isNotNil(layer) ? `@layer ${layer} {\\n${content}\\n}` : content;\n\n    return body;\n  },\n};\n"],"mappings":";;;;;;AAQA,MAAM,8BAA8B,EAAE,QAAQ,CAC5C,EAAE,cAAc,EAAE,SAAS,YAAY,GAAG,CAAC,MAAM,CAAC,GAClD,EAAE,cAAc,EAAE,SAAS,YAAY,GAAG,CAAC,MAAM,CAAC,CACpD,CAAC;AAID,MAAM,6BACJ,QACA,UACkD;CAClD,MAAM,CAAC,MAAM,SAAS,OAAO,KAAK,CAAC,CAAC,QAAQ,MAAM,EAAE,CAAC,CAAC,MAAM,IAAI;CAChE,IAAI;CACJ,IAAI;CACJ,IAAI,EAAE,WAAW,CAAC,WAAW,GAAG,MAAM,IAAI,GAAG;EAC3C,OAAO,QAAQ,MAAM;EACrB,QAAQ,SAAS,KAAK;CACxB,OACE,OAAO;CAET,OAAO;EAAE;EAAM;EAAM,OAAO,SAAS;CAAK;AAC5C;AAEA,MAAM,8BAA8B,QAAyC,WAC3E,EAAE,QACC,KAAK,UAAU;CACd,MAAM,EAAE,MAAM,MAAM,UAAU,0BAA0B,QAAQ,KAAK;CACrE,IAAI,OAAO,KAAK,KAAK;CACrB,IAAI,KAAK,KAAK,GAAG,KAAK,IAAI,KAAK,EAAE;CACjC,IAAI,MAAM,KAAK,GAAG,KAAK,IAAI,MAAM,EAAE;CACnC,OAAO;AACT,GACA;CAAE,QAAQ,CAAC;CAAG,MAAM,CAAC;CAAG,OAAO,CAAC;AAAE,GAClC,MACF;AAEF,MAAa,YAAoB;CAC/B,MAAM;CACN,QAAQ,OAAO,EAAE,YAAY,MAAM,SAAS,eAAe;EACzD,MAAM,EAAE,kBAAkB,aAAa;EACvC,MAAM,EAAE,UAAU,UAAU;EAC5B,MAAM,cAAc,KAAK;EAUzB,MAAM,kBAAkB,2BART,wBAAwB;GACrC;GACA;GACA,QAAQ;GACR;EACF,CAGwD,GADjC,EAAE,OAAO,EAAE,QAAQ,CAAC,2BAA2B,CAAC,GAAG,WAAW,SACb,CAAC;EAEzE,MAAM,eAAe,gBAAgB,MAAM,KAAK,GAAG,OAAO;GACxD,OAAO,gBAAgB,OAAO;GAC9B,WAAW;EACb,EAAE;EAEF,aAAa,kBAAkB,eAAe;EAG9C,MAAM,UAAU,GAAG,SAAS,iGAAmB,eAAe,eAAe,EAAE;EAG/E,OAFa,EAAE,SAAS,KAAK,IAAI,UAAU,MAAM,MAAM,QAAQ,OAAO;CAGxE;AACF"}

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

@@ -0,0 +1,7 @@
+import { Format } from "style-dictionary/types";
+
+//#region src/tokens/process/formats/css/typography.d.ts
+declare const typography: Format;
+//#endregion
+export { typography };
+//# sourceMappingURL=typography.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"typography.d.ts","names":[],"sources":["../../../../../../src/tokens/process/formats/css/typography.ts"],"mappings":";;;cAWa,UAAA,EAAY,MA8BxB"}

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

@@ -0,0 +1,31 @@
+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 };
+
+//# sourceMappingURL=typography.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"typography.js","names":[],"sources":["../../../../../../src/tokens/process/formats/css/typography.ts"],"sourcesContent":["import * as R from 'ramda';\nimport type { Format, TransformedToken } from 'style-dictionary/types';\nimport { createPropertyFormatter } from 'style-dictionary/utils';\nimport { buildOptions } from '../../platform.ts';\n\n// Predicate to filter tokens with .path array that includes both typography and fontFamily\nconst typographyFontFamilyPredicate = R.allPass([\n  R.pathSatisfies(R.includes('typography'), ['path']),\n  R.pathSatisfies(R.includes('fontFamily'), ['path']),\n]);\n\nexport const typography: Format = {\n  name: 'ds/css-typography',\n  format: async ({ dictionary, file, options, platform }) => {\n    const { outputReferences, usesDtcg } = options;\n    const { selector, layer } = platform;\n    const destination = file.destination as string;\n\n    const format = createPropertyFormatter({\n      outputReferences,\n      dictionary,\n      format: 'css',\n      usesDtcg,\n    });\n\n    const filteredTokens = R.reject(typographyFontFamilyPredicate, dictionary.allTokens);\n\n    const formattedMap = filteredTokens.map((token: TransformedToken) => ({\n      token,\n      formatted: format(token),\n    }));\n\n    buildOptions.buildTokenFormats[destination] = formattedMap;\n\n    const formattedTokens = formattedMap.map(R.view(R.lensProp('formatted'))).join('\\n');\n\n    const content = selector ? `${selector} {\\n${formattedTokens}\\n}` : formattedTokens;\n    const body = R.isNotNil(layer) ? `@layer ${layer} {\\n${content}\\n}` : content;\n\n    return body;\n  },\n};\n"],"mappings":";;;;AAMA,MAAM,gCAAgC,EAAE,QAAQ,CAC9C,EAAE,cAAc,EAAE,SAAS,YAAY,GAAG,CAAC,MAAM,CAAC,GAClD,EAAE,cAAc,EAAE,SAAS,YAAY,GAAG,CAAC,MAAM,CAAC,CACpD,CAAC;AAED,MAAa,aAAqB;CAChC,MAAM;CACN,QAAQ,OAAO,EAAE,YAAY,MAAM,SAAS,eAAe;EACzD,MAAM,EAAE,kBAAkB,aAAa;EACvC,MAAM,EAAE,UAAU,UAAU;EAC5B,MAAM,cAAc,KAAK;EAEzB,MAAM,SAAS,wBAAwB;GACrC;GACA;GACA,QAAQ;GACR;EACF,CAAC;EAID,MAAM,eAFiB,EAAE,OAAO,+BAA+B,WAAW,SAExC,CAAC,CAAC,KAAK,WAA6B;GACpE;GACA,WAAW,OAAO,KAAK;EACzB,EAAE;EAEF,aAAa,kBAAkB,eAAe;EAE9C,MAAM,kBAAkB,aAAa,IAAI,EAAE,KAAK,EAAE,SAAS,WAAW,CAAC,CAAC,CAAC,CAAC,KAAK,IAAI;EAEnF,MAAM,UAAU,WAAW,GAAG,SAAS,MAAM,gBAAgB,OAAO;EAGpE,OAFa,EAAE,SAAS,KAAK,IAAI,UAAU,MAAM,MAAM,QAAQ,OAAO;CAGxE;AACF"}

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

@@ -0,0 +1,15 @@
+import { Format } from "style-dictionary/types";
+
+//#region src/tokens/process/formats/css.d.ts
+declare const formats: {
+  colorScheme: Format;
+  colorCategory: Format;
+  semantic: Format;
+  sizeMode: Format;
+  size: Format;
+  typography: Format;
+  typeScale: Format;
+};
+//#endregion
+export { formats };
+//# sourceMappingURL=css.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"css.d.ts","names":[],"sources":["../../../../../src/tokens/process/formats/css.ts"],"mappings":";;;cASa,OAAA"}

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

@@ -0,0 +1,20 @@
+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 };
+
+//# sourceMappingURL=css.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"css.js","names":[],"sources":["../../../../../src/tokens/process/formats/css.ts"],"sourcesContent":["import type { Format } from 'style-dictionary/types';\n\nimport { colorCategory, colorScheme } from '../formats/css/color.ts';\nimport { semantic } from '../formats/css/semantic.ts';\nimport { size } from '../formats/css/size.ts';\nimport { sizeMode } from '../formats/css/size-mode.ts';\nimport { typography } from '../formats/css/typography.ts';\nimport { typeScale } from './css/type-scale.ts';\n\nexport const formats = {\n  colorScheme,\n  colorCategory,\n  semantic,\n  sizeMode,\n  size,\n  typography,\n  typeScale,\n} satisfies Record<string, Format>;\n"],"mappings":";;;;;;;AASA,MAAa,UAAU;CACrB;CACA;CACA;CACA;CACA;CACA;CACA;AACF"}

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

@@ -0,0 +1,9 @@
+import { OutputFile } from "../../types.js";
+import { ProcessedThemeObject } from "../utils/getMultidimensionalThemes.js";
+
+//#region src/tokens/process/output/declarations.d.ts
+declare const defaultFileHeader: string;
+declare const createTypeDeclarationFiles: (processed$themes: ProcessedThemeObject[]) => OutputFile[];
+//#endregion
+export { createTypeDeclarationFiles, defaultFileHeader };
+//# sourceMappingURL=declarations.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"declarations.d.ts","names":[],"sources":["../../../../../src/tokens/process/output/declarations.ts"],"mappings":";;;;cAMa,iBAAA;AAAA,cAEA,0BAAA,GAA8B,gBAAA,EAAkB,oBAAA,OAAyB,UAAU"}

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

@@ -0,0 +1,38 @@
+import { baseColors } from "../../../colors/colorMetadata.js";
+import { version } from "../../../../package.js";
+import { getThemeColors } from "../utils/getMultidimensionalThemes.js";
+import pc from "picocolors";
+//#region src/tokens/process/output/declarations.ts
+const defaultFileHeader = `build: v${version}`;
+const createTypeDeclarationFiles = (processed$themes) => {
+	const typeDeclaration = createColorTypeDeclaration(getThemeColors(processed$themes));
+	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")}`);
+	const severityColors = Object.keys(baseColors);
+	return `
+/* ${defaultFileHeader} */
+import type {} from '@digdir/designsystemet-types';
+
+// Augment types based on theme
+declare module '@digdir/designsystemet-types' {
+  export interface ColorDefinitions {
+${colors.filter((color) => !severityColors.includes(color)).map((color) => `    ${color.includes("-") ? `'${color}'` : color}: never;`).join("\n")}
+  }
+  export interface SeverityColorDefinitions {
+${severityColors.map((color) => `    ${color}: never;`).join("\n")}
+  }
+}
+`.trimStart();
+}
+//#endregion
+export { createTypeDeclarationFiles, defaultFileHeader };
+
+//# sourceMappingURL=declarations.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"declarations.js","names":["pkg.version"],"sources":["../../../../../src/tokens/process/output/declarations.ts"],"sourcesContent":["import pc from 'picocolors';\nimport pkg from '../../../../package.json' with { type: 'json' };\nimport { baseColors } from '../../../colors/colorMetadata.ts';\nimport type { OutputFile } from '../../types.ts';\nimport { getThemeColors, type ProcessedThemeObject } from '../utils/getMultidimensionalThemes.ts';\n\nexport const defaultFileHeader = `build: v${pkg.version}`;\n\nexport const createTypeDeclarationFiles = (processed$themes: ProcessedThemeObject[]): OutputFile[] => {\n  const colors = getThemeColors(processed$themes);\n  const typeDeclaration = createColorTypeDeclaration(colors);\n  return [\n    {\n      output: `/* This file is deprecated and will be removed in a future release. Use types.d.ts instead */\\n${typeDeclaration}`,\n      destination: 'colors.d.ts',\n    },\n    {\n      output: typeDeclaration,\n      destination: 'types.d.ts',\n    },\n  ];\n};\n\nfunction createColorTypeDeclaration(colors: string[]) {\n  console.log(`\\n🍱 Building ${pc.green('type declarations')}`);\n\n  const severityColors = Object.keys(baseColors);\n  const colorsWithoutSeverity = colors.filter((color) => !severityColors.includes(color));\n\n  const typeDeclaration = `\n/* ${defaultFileHeader} */\nimport type {} from '@digdir/designsystemet-types';\n\n// Augment types based on theme\ndeclare module '@digdir/designsystemet-types' {\n  export interface ColorDefinitions {\n${colorsWithoutSeverity.map((color) => `    ${color.includes('-') ? `'${color}'` : color}: never;`).join('\\n')}\n  }\n  export interface SeverityColorDefinitions {\n${severityColors.map((color) => `    ${color}: never;`).join('\\n')}\n  }\n}\n`.trimStart();\n\n  return typeDeclaration;\n}\n"],"mappings":";;;;;AAMA,MAAa,oBAAoB,WAAWA;AAE5C,MAAa,8BAA8B,qBAA2D;CAEpG,MAAM,kBAAkB,2BADT,eAAe,gBAC0B,CAAC;CACzD,OAAO,CACL;EACE,QAAQ,kGAAkG;EAC1G,aAAa;CACf,GACA;EACE,QAAQ;EACR,aAAa;CACf,CACF;AACF;AAEA,SAAS,2BAA2B,QAAkB;CACpD,QAAQ,IAAI,iBAAiB,GAAG,MAAM,mBAAmB,GAAG;CAE5D,MAAM,iBAAiB,OAAO,KAAK,UAAU;CAkB7C,OAfwB;KACrB,kBAAkB;;;;;;EAHS,OAAO,QAAQ,UAAU,CAAC,eAAe,SAAS,KAAK,CASjE,CAAC,CAAC,KAAK,UAAU,OAAO,MAAM,SAAS,GAAG,IAAI,IAAI,MAAM,KAAK,MAAM,SAAS,CAAC,CAAC,KAAK,IAAI,EAAE;;;EAG7G,eAAe,KAAK,UAAU,OAAO,MAAM,SAAS,CAAC,CAAC,KAAK,IAAI,EAAE;;;EAGjE,UAEqB;AACvB"}

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

@@ -0,0 +1,7 @@
+import { OutputFile } from "../../types.js";
+
+//#region src/tokens/process/output/tailwind.d.ts
+declare const createTailwindCSSFiles: (cssFiles: OutputFile[]) => OutputFile[];
+//#endregion
+export { createTailwindCSSFiles };
+//# sourceMappingURL=tailwind.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tailwind.d.ts","names":[],"sources":["../../../../../src/tokens/process/output/tailwind.ts"],"mappings":";;;cAEa,sBAAA,GAA0B,QAAA,EAAU,UAAA,OAAe,UAAU"}

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

@@ -0,0 +1,47 @@
+//#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 };
+
+//# sourceMappingURL=tailwind.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tailwind.js","names":[],"sources":["../../../../../src/tokens/process/output/tailwind.ts"],"sourcesContent":["import type { OutputFile } from '../../types.ts';\n\nexport const createTailwindCSSFiles = (cssFiles: OutputFile[]): OutputFile[] => {\n  console.log('\\n🍱 Creating Tailwind Config');\n  return cssFiles\n    .map((file) => {\n      if (file.destination) {\n        const tailwindConfig = generateTailwind(file.output);\n        const tailwindFile = {\n          destination: file.destination.replace('.css', '.tailwind.css'),\n          output: tailwindConfig,\n        };\n        return tailwindFile;\n      }\n      return undefined;\n    })\n    .filter((item) => item !== undefined);\n};\n\nconst generateTailwind = (css: string): string => {\n  const tailwind: string[] = ['--font-sans: var(--ds-font-family)'];\n  const tokens = Array.from(new Set(css.match(/--ds-[^:)]+/g)), (m) => m).sort((a, b) =>\n    a.localeCompare(b, undefined, { numeric: true, sensitivity: 'base' }),\n  );\n\n  // Scrape tokens relevant for Tailwind\n  for (const token of tokens) {\n    if (token.startsWith('--ds-color-') && !token.startsWith('--ds-color-focus')) {\n      tailwind.push(`--color-${token.replace('--ds-color-', '')}: var(${token})`);\n    } else if (token.startsWith('--ds-font-weight-')) {\n      tailwind.push(`--font-weight-${token.replace('--ds-font-weight-', '')}: var(${token})`);\n    } else if (token.match(/--ds-border-radius-(sm|md|lg|xl)/)) {\n      // Not including \"full\" as this crashes with Tailwind\n      tailwind.push(`--radius-${token.replace('--ds-border-radius-', '')}: var(${token})`);\n    } else if (token.match(/--ds-body-(sm|mg|lg)-body-font-size/)) {\n      tailwind.push(`--text-${token.replace('--ds-body-', '').replace('-font-size', '')}: var(${token})`);\n    } else if (token.match(/^--ds-size-\\d+$/)) {\n      tailwind.push(`--spacing-${token.replace('--ds-size-', '')}: var(${token})`);\n    }\n  }\n\n  // Make [data-colors] dynamically change also Tailwind colors\n  const dynamicColors = `[data-color] {\n      --color-background-default: var(--ds-color-background-default);\n      --color-background-tinted: var(--ds-color-background-tinted);\n      --color-surface-default: var(--ds-color-surface-default);\n      --color-surface-tinted: var(--ds-color-surface-tinted);\n      --color-surface-hover: var(--ds-color-surface-hover);\n      --color-surface-active: var(--ds-color-surface-active);\n      --color-border-subtle: var(--ds-color-border-subtle);\n      --color-border-default: var(--ds-color-border-default);\n      --color-border-strong: var(--ds-color-border-strong);\n      --color-text-subtle: var(--ds-color-text-subtle);\n      --color-text-default: var(--ds-color-text-default);\n      --color-base-default: var(--ds-color-base-default);\n      --color-base-hover: var(--ds-color-base-hover);\n      --color-base-active: var(--ds-color-base-active);\n      --color-base-contrast-subtle: var(--ds-color-base-contrast-subtle);\n      --color-base-contrast-default: var(--ds-color-base-contrast-default);\n    }`;\n\n  return `@theme {${tailwind.map((str) => `\\n  ${str};`).join('')}\\n}\\n${dynamicColors}`;\n};\n"],"mappings":";AAEA,MAAa,0BAA0B,aAAyC;CAC9E,QAAQ,IAAI,+BAA+B;CAC3C,OAAO,SACJ,KAAK,SAAS;EACb,IAAI,KAAK,aAAa;GACpB,MAAM,iBAAiB,iBAAiB,KAAK,MAAM;GAKnD,OAAO;IAHL,aAAa,KAAK,YAAY,QAAQ,QAAQ,eAAe;IAC7D,QAAQ;GAEQ;EACpB;CAEF,CAAC,CAAC,CACD,QAAQ,SAAS,SAAS,KAAA,CAAS;AACxC;AAEA,MAAM,oBAAoB,QAAwB;CAChD,MAAM,WAAqB,CAAC,oCAAoC;CAChE,MAAM,SAAS,MAAM,KAAK,IAAI,IAAI,IAAI,MAAM,cAAc,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,MAAM,GAAG,MAC/E,EAAE,cAAc,GAAG,KAAA,GAAW;EAAE,SAAS;EAAM,aAAa;CAAO,CAAC,CACtE;CAGA,KAAK,MAAM,SAAS,QAClB,IAAI,MAAM,WAAW,aAAa,KAAK,CAAC,MAAM,WAAW,kBAAkB,GACzE,SAAS,KAAK,WAAW,MAAM,QAAQ,eAAe,EAAE,EAAE,QAAQ,MAAM,EAAE;MACrE,IAAI,MAAM,WAAW,mBAAmB,GAC7C,SAAS,KAAK,iBAAiB,MAAM,QAAQ,qBAAqB,EAAE,EAAE,QAAQ,MAAM,EAAE;MACjF,IAAI,MAAM,MAAM,kCAAkC,GAEvD,SAAS,KAAK,YAAY,MAAM,QAAQ,uBAAuB,EAAE,EAAE,QAAQ,MAAM,EAAE;MAC9E,IAAI,MAAM,MAAM,qCAAqC,GAC1D,SAAS,KAAK,UAAU,MAAM,QAAQ,cAAc,EAAE,CAAC,CAAC,QAAQ,cAAc,EAAE,EAAE,QAAQ,MAAM,EAAE;MAC7F,IAAI,MAAM,MAAM,iBAAiB,GACtC,SAAS,KAAK,aAAa,MAAM,QAAQ,cAAc,EAAE,EAAE,QAAQ,MAAM,EAAE;CAwB/E,OAAO,WAAW,SAAS,KAAK,QAAQ,OAAO,IAAI,EAAE,CAAC,CAAC,KAAK,EAAE,EAAE;;;;;;;;;;;;;;;;;;AAClE"}

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

@@ -0,0 +1,31 @@
+import { OutputFile } from "../../types.js";
+import { ProcessReturn } from "../platform.js";
+
+//#region src/tokens/process/output/theme.d.ts
+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.
+ */
+declare const createThemeCSSFiles: ({
+  processedBuilds,
+  fileHeader
+}: CreateThemeCSSFiles) => OutputFile[];
+//#endregion
+export { createThemeCSSFiles, defaultFileHeader };
+//# sourceMappingURL=theme.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"theme.d.ts","names":[],"sources":["../../../../../src/tokens/process/output/theme.ts"],"mappings":";;;;cAOa,iBAAA;AAAA,KAER,mBAAA;EAFQ,6GAIX,eAAA,EAAiB,aAAa;EAE9B,UAAA;AAAA;AANwD;;;;;;;;AAM9C;AAuBZ;;;;;;AA7B0D,cA6B7C,mBAAA;EAAuB,eAAA;EAAA;AAAA,GAGjC,mBAAA,KAAsB,UAAA"}