@digdir/designsystemet 0.0.0-deps-tsdown-20260421103939

package/dist/src/tokens/process/configs/size.js

@@ -0,0 +1,34 @@
+import { isDigit, pathStartsWithOneOf } from "../../utils.js";
+import { dsTransformers } from "./shared.js";
+import { formats } from "../formats/css.js";
+import * as R from "ramda";
+import { outputReferencesFilter } from "style-dictionary/utils";
+//#region src/tokens/process/configs/size.ts
+const sizeVariables = ({ theme }) => {
+	return {
+		preprocessors: ["tokens-studio"],
+		platforms: { css: {
+			theme,
+			basePxFontSize: 16,
+			selector: `:root, [data-size]`,
+			layer: `ds.theme.size`,
+			prefix: "ds",
+			buildPath: `${theme}/`,
+			transforms: dsTransformers,
+			files: [{
+				destination: `size.css`,
+				format: formats.size.name,
+				filter: (token) => {
+					const isUwantedToken = R.anyPass([R.includes("primitives/global")])(token.filePath);
+					const isPrivateToken = R.includes("_", token.path);
+					return pathStartsWithOneOf(["size", "_size"], token) && !(isUwantedToken || isPrivateToken);
+				}
+			}],
+			options: { outputReferences: (token, options) => {
+				return pathStartsWithOneOf(["size", "_size"], token) && (isDigit(token.path[1]) || token.path[1] === "unit") && outputReferencesFilter(token, options);
+			} }
+		} }
+	};
+};
+//#endregion
+export { sizeVariables };

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

@@ -0,0 +1,3 @@
+import { type GetStyleDictionaryConfig } from './shared.js';
+export declare const typeScaleVariables: GetStyleDictionaryConfig;
+//# sourceMappingURL=type-scale.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"type-scale.d.ts","sourceRoot":"","sources":["../../../../../src/tokens/process/configs/type-scale.ts"],"names":[],"mappings":"AAGA,OAAO,EAAkB,KAAK,wBAAwB,EAAU,MAAM,aAAa,CAAC;AAEpF,eAAO,MAAM,kBAAkB,EAAE,wBAiDhC,CAAC"}

package/dist/src/tokens/process/configs/type-scale.js

@@ -0,0 +1,49 @@
+import { pathStartsWithOneOf, typeEquals } from "../../utils.js";
+import { sizeRem, typographyName } from "../transformers.js";
+import "./shared.js";
+import { formats } from "../formats/css.js";
+//#region src/tokens/process/configs/type-scale.ts
+const typeScaleVariables = ({ theme }) => {
+	return {
+		usesDtcg: true,
+		preprocessors: ["tokens-studio"],
+		expand: { include: ["typography"] },
+		platforms: { css: {
+			prefix: "ds",
+			selector: ":root, [data-size]",
+			layer: `ds.theme.type-scale`,
+			buildPath: `${theme}/`,
+			basePxFontSize: 16,
+			transforms: [
+				"name/kebab",
+				"ts/size/px",
+				sizeRem.name,
+				"ts/size/lineheight",
+				"ts/typography/fontWeight",
+				typographyName.name
+			],
+			files: [{
+				destination: `type-scale.css`,
+				format: formats.typeScale.name,
+				filter: (token) => {
+					const included = typeEquals([
+						"typography",
+						"dimension",
+						"fontsize"
+					], token);
+					if (/primitives\/modes\/typography\/(primary|secondary)/.test(token.filePath)) return false;
+					return included && !pathStartsWithOneOf([
+						"spacing",
+						"sizing",
+						"size",
+						"border-width",
+						"border-radius"
+					], token) && (pathStartsWithOneOf(["font-size"], token) || token.path.includes("fontSize"));
+				}
+			}],
+			options: { outputReferences: (token) => pathStartsWithOneOf(["typography"], token) && token.path.includes("fontSize") }
+		} }
+	};
+};
+//#endregion
+export { typeScaleVariables };

package/dist/src/tokens/process/configs/typography.d.ts

@@ -0,0 +1,3 @@
+import { type GetStyleDictionaryConfig } from './shared.js';
+export declare const typographyVariables: GetStyleDictionaryConfig;
+//# sourceMappingURL=typography.d.ts.map

package/dist/src/tokens/process/configs/typography.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"typography.d.ts","sourceRoot":"","sources":["../../../../../src/tokens/process/configs/typography.ts"],"names":[],"mappings":"AAKA,OAAO,EAAkB,KAAK,wBAAwB,EAAU,MAAM,aAAa,CAAC;AAEpF,eAAO,MAAM,mBAAmB,EAAE,wBAiDjC,CAAC"}

package/dist/src/tokens/process/configs/typography.js

@@ -0,0 +1,64 @@
+import { pathStartsWithOneOf, typeEquals } from "../../utils.js";
+import { sizeRem, typographyName } from "../transformers.js";
+import "./shared.js";
+import { formats } from "../formats/css.js";
+import { expandTypesMap } from "@tokens-studio/sd-transforms";
+//#region src/tokens/process/configs/typography.ts
+const typographyVariables = ({ theme, typography }) => {
+	const selector = `${typography === "primary" ? ":root, " : ""}[data-typography="${typography}"]`;
+	const layer = `ds.theme.typography.${typography}`;
+	return {
+		usesDtcg: true,
+		preprocessors: ["tokens-studio"],
+		expand: {
+			include: ["typography"],
+			typesMap: {
+				...expandTypesMap,
+				typography: {
+					...expandTypesMap.typography,
+					letterSpacing: "dimension"
+				}
+			}
+		},
+		platforms: { css: {
+			prefix: "ds",
+			typography,
+			selector,
+			layer,
+			buildPath: `${theme}/`,
+			basePxFontSize: 16,
+			transforms: [
+				"name/kebab",
+				"ts/size/px",
+				sizeRem.name,
+				"ts/size/lineheight",
+				"ts/typography/fontWeight",
+				"ts/size/css/letterspacing",
+				typographyName.name
+			],
+			files: [{
+				destination: `typography/${typography}.css`,
+				format: formats.typography.name,
+				filter: (token) => {
+					const included = typeEquals([
+						"fontweight",
+						"fontFamily",
+						"lineHeight",
+						"dimension"
+					], token);
+					if (/primitives\/modes\/typography\/(primary|secondary)/.test(token.filePath)) return false;
+					return included && !pathStartsWithOneOf([
+						"spacing",
+						"sizing",
+						"size",
+						"_size",
+						"border-width",
+						"border-radius"
+					], token) && !(pathStartsWithOneOf(["typography"], token) && token.path.includes("fontSize"));
+				}
+			}]
+		} }
+	};
+};
+//#endregion
+export { typographyVariables };

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

@@ -0,0 +1,20 @@
+import type { GetSDConfigOptions, SDConfigForThemePermutation, ThemeDimension } from '../types.js';
+import type { GetStyleDictionaryConfig } from './configs/shared.js';
+import { type ProcessedThemeObject } from './utils/getMultidimensionalThemes.js';
+export declare const configs: {
+    colorSchemeVariables: GetStyleDictionaryConfig;
+    mainColorVariables: GetStyleDictionaryConfig;
+    supportColorVariables: GetStyleDictionaryConfig;
+    neutralColorVariables: GetStyleDictionaryConfig;
+    successColorVariables: GetStyleDictionaryConfig;
+    dangerColorVariables: GetStyleDictionaryConfig;
+    warningColorVariables: GetStyleDictionaryConfig;
+    infoColorVariables: GetStyleDictionaryConfig;
+    sizeModeVariables: GetStyleDictionaryConfig;
+    sizeVariables: GetStyleDictionaryConfig;
+    typographyVariables: GetStyleDictionaryConfig;
+    typeScaleVariables: GetStyleDictionaryConfig;
+    semanticVariables: GetStyleDictionaryConfig;
+};
+export declare const getConfigsForThemeDimensions: (getConfig: GetStyleDictionaryConfig, processed$themes: ProcessedThemeObject[], dimensions: ThemeDimension[], options: GetSDConfigOptions) => SDConfigForThemePermutation[];
+//# sourceMappingURL=configs.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"configs.d.ts","sourceRoot":"","sources":["../../../../src/tokens/process/configs.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,kBAAkB,EAAE,2BAA2B,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAInG,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,qBAAqB,CAAC;AAQpE,OAAO,EAA6B,KAAK,oBAAoB,EAAE,MAAM,sCAAsC,CAAC;AAa5G,eAAO,MAAM,OAAO;;;;;;;;;;;;;;CAcnB,CAAC;AAEF,eAAO,MAAM,4BAA4B,GACvC,WAAW,wBAAwB,EACnC,kBAAkB,oBAAoB,EAAE,EACxC,YAAY,cAAc,EAAE,EAC5B,SAAS,kBAAkB,KAC1B,2BAA2B,EAoD7B,CAAC"}

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

@@ -0,0 +1,90 @@
+import { traverseObj } from "../utils.js";
+import { resolveMath, sizeRem, typographyName, unitless } from "./transformers.js";
+import { formats } from "./formats/css.js";
+import { colorCategoryVariables, colorSchemeVariables } from "./configs/color.js";
+import { semanticVariables } from "./configs/semantic.js";
+import { sizeVariables } from "./configs/size.js";
+import { sizeModeVariables } from "./configs/size-mode.js";
+import { typeScaleVariables } from "./configs/type-scale.js";
+import { typographyVariables } from "./configs/typography.js";
+import { getMultidimensionalThemes } from "./utils/getMultidimensionalThemes.js";
+import { buildOptions } from "./platform.js";
+import * as R from "ramda";
+import StyleDictionary from "style-dictionary";
+import { register } from "@tokens-studio/sd-transforms";
+//#region src/tokens/process/configs.ts
+register(StyleDictionary, { withSDBuiltins: false });
+StyleDictionary.registerTransform(sizeRem);
+StyleDictionary.registerTransform(typographyName);
+StyleDictionary.registerTransform(resolveMath);
+StyleDictionary.registerTransform(unitless);
+for (const format of Object.values(formats)) StyleDictionary.registerFormat(format);
+const configs = {
+	colorSchemeVariables,
+	mainColorVariables: colorCategoryVariables({ category: "main" }),
+	supportColorVariables: colorCategoryVariables({ category: "support" }),
+	neutralColorVariables: colorCategoryVariables({
+		category: "builtin",
+		color: "neutral"
+	}),
+	successColorVariables: colorCategoryVariables({
+		category: "builtin",
+		color: "success"
+	}),
+	dangerColorVariables: colorCategoryVariables({
+		category: "builtin",
+		color: "danger"
+	}),
+	warningColorVariables: colorCategoryVariables({
+		category: "builtin",
+		color: "warning"
+	}),
+	infoColorVariables: colorCategoryVariables({
+		category: "builtin",
+		color: "info"
+	}),
+	sizeModeVariables,
+	sizeVariables,
+	typographyVariables,
+	typeScaleVariables,
+	semanticVariables
+};
+const getConfigsForThemeDimensions = (getConfig, processed$themes, dimensions, options) => {
+	const { tokensDir, tokenSets } = options;
+	return getMultidimensionalThemes(processed$themes, dimensions).flatMap(({ selectedTokenSets, permutation }) => {
+		const tokenSource = {
+			source: void 0,
+			tokens: {}
+		};
+		if (tokenSets) for (const tokenSet of selectedTokenSets) {
+			const tokens = tokenSets.get(tokenSet);
+			if (tokens) {
+				const tokensWithFilePath = traverseObj(tokens, (obj) => {
+					if (Object.hasOwn(obj, `$value`) && !obj.filePath) obj.filePath = tokenSet;
+				});
+				tokenSource.tokens = R.mergeDeepRight(tokenSource.tokens, tokensWithFilePath);
+			}
+		}
+		else tokenSource.source = selectedTokenSets.map((x) => `${tokensDir}/${x}.json`);
+		const configOrConfigs = getConfig(permutation);
+		return (Array.isArray(configOrConfigs) ? configOrConfigs : [{ config: configOrConfigs }]).map(({ config, permutationOverrides }) => {
+			return {
+				permutation: {
+					...permutation,
+					...permutationOverrides
+				},
+				config: {
+					...config,
+					usesDtcg: true,
+					log: {
+						...config?.log,
+						verbosity: buildOptions?.verbose ? "verbose" : "silent"
+					},
+					...tokenSource
+				}
+			};
+		});
+	}).sort();
+};
+//#endregion
+export { configs, getConfigsForThemeDimensions };

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

@@ -0,0 +1,4 @@
+import type { Format } from 'style-dictionary/types';
+export declare const colorScheme: Format;
+export declare const colorCategory: Format;
+//# sourceMappingURL=color.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"color.d.ts","sourceRoot":"","sources":["../../../../../../src/tokens/process/formats/css/color.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAarD,eAAO,MAAM,WAAW,EAAE,MAgDzB,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,MAwC3B,CAAC"}

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

@@ -0,0 +1,63 @@
+import { colorCategories } from "../../../types.js";
+import { isColorCategoryToken, isGlobalColorToken, isSemanticToken } 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/color.ts
+const prefersColorScheme = (colorScheme, content) => `
+@media (prefers-color-scheme: ${colorScheme}) {
+  [data-color-scheme="auto"] ${content}
+}
+`;
+const colorScheme = {
+	name: "ds/css-colorscheme",
+	format: async ({ dictionary, options, platform }) => {
+		const { allTokens } = dictionary;
+		const { outputReferences, usesDtcg } = options;
+		const { selector, colorScheme, layer } = platform;
+		const colorScheme_ = colorScheme;
+		const format = createPropertyFormatter({
+			outputReferences,
+			dictionary,
+			format: "css",
+			usesDtcg
+		});
+		const colorSchemeProperty = colorScheme_ === "dark" || colorScheme_ === "light" ? `\n  color-scheme: ${colorScheme_};\n` : "";
+		const content = `{\n${allTokens.filter(R.allPass([R.anyPass([isSemanticToken, isGlobalColorToken]), (t) => !isColorCategoryToken(t)])).map((token) => ({
+			token,
+			formatted: format(token)
+		})).map(R.view(R.lensProp("formatted"))).join("\n")}\n${colorSchemeProperty}}\n`;
+		const autoSelectorContent = ["light", "dark"].includes(colorScheme_) ? prefersColorScheme(colorScheme_, content) : "";
+		return R.isNotNil(layer) ? `@layer ${layer} {\n${selector} ${content} ${autoSelectorContent}\n}\n` : `${selector} ${content} ${autoSelectorContent}\n`;
+	}
+};
+const colorCategory = {
+	name: "ds/css-colorcategory",
+	format: async ({ dictionary, file, options, platform }) => {
+		const { outputReferences, usesDtcg } = options;
+		const { selector, layer } = platform;
+		const destination = file.destination;
+		const format = R.compose(createPropertyFormatter({
+			outputReferences,
+			dictionary,
+			format: "css",
+			usesDtcg
+		}), (token) => ({
+			...token,
+			name: token.name.replace(/color-\w+-/, "color-"),
+			original: {
+				...token.original,
+				$value: new RegExp(`color-(${colorCategories.main}|${colorCategories.support})-`).test(token.name) ? token.original.$value : `{${token.path.join(".")}}`
+			}
+		}));
+		const formattedMap = dictionary.allTokens.map((token) => ({
+			token,
+			formatted: format(token)
+		}));
+		buildOptions.buildTokenFormats[destination] = formattedMap;
+		const content = `{\n${formattedMap.map(R.view(R.lensProp("formatted"))).join("\n")}\n}\n`;
+		return R.isNotNil(layer) ? `@layer ${layer} {\n${selector} ${content}\n}\n` : `${selector} ${content}\n`;
+	}
+};
+//#endregion
+export { colorCategory, colorScheme };

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

@@ -0,0 +1,3 @@
+import type { Format } from 'style-dictionary/types';
+export declare const semantic: Format;
+//# sourceMappingURL=semantic.d.ts.map

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

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

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

@@ -0,0 +1,29 @@
+import { inlineTokens } from "../../../utils.js";
+import { isInlineTokens } from "./size.js";
+import { buildOptions } from "../../platform.js";
+import * as R from "ramda";
+import { createPropertyFormatter } from "style-dictionary/utils";
+//#region src/tokens/process/formats/css/semantic.ts
+const semantic = {
+	name: "ds/css-semantic",
+	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 = inlineTokens(isInlineTokens, dictionary.allTokens).map((token) => ({
+			token,
+			formatted: format(token)
+		}));
+		buildOptions.buildTokenFormats[destination] = formattedMap;
+		const content = `${selector} {\n${formattedMap.map(R.prop("formatted")).join("\n")}\n}\n`;
+		return R.isNotNil(layer) ? `@layer ${layer} {\n${content}\n}\n` : `${content}\n`;
+	}
+};
+//#endregion
+export { semantic };

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

@@ -0,0 +1,4 @@
+import type { Format } from 'style-dictionary/types';
+export declare const sizeMode: Format;
+export declare function wrapInLayer(content: string, layer?: string): string;
+//# 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","sourceRoot":"","sources":["../../../../../../src/tokens/process/formats/css/size-mode.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAerD,eAAO,MAAM,QAAQ,EAAE,MAsDtB,CAAC;AAEF,wBAAgB,WAAW,CAAC,OAAO,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,MAAM,UAE1D"}

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

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

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

@@ -0,0 +1,21 @@
+import type { TransformedToken } from 'style-dictionary';
+import type { Format } from 'style-dictionary/types';
+export declare const isInlineTokens: (t: TransformedToken) => boolean;
+/**
+ * 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.
+ */
+export declare const overrideSizingFormula: (format: (t: TransformedToken) => string, token: TransformedToken) => {
+    name: string;
+    round: string;
+    calc: string;
+};
+export declare const sizingTemplate: ({ round, calc }: {
+    round: string[];
+    calc: string[];
+}) => string;
+export declare const size: Format;
+//# 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","sourceRoot":"","sources":["../../../../../../src/tokens/process/formats/css/size.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AACzD,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AASrD,eAAO,MAAM,cAAc,MAJY,gBAAgB,YAI+C,CAAC;AAEvG;;;;;;GAMG;AACH,eAAO,MAAM,qBAAqB,GAAI,QAAQ,CAAC,CAAC,EAAE,gBAAgB,KAAK,MAAM,EAAE,OAAO,gBAAgB;;;;CAmBrG,CAAC;AAwBF,eAAO,MAAM,cAAc,GAAI,iBAAiB;IAAE,KAAK,EAAE,MAAM,EAAE,CAAC;IAAC,IAAI,EAAE,MAAM,EAAE,CAAA;CAAE,WAOlF,CAAC;AAEF,eAAO,MAAM,IAAI,EAAE,MAyClB,CAAC"}

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

@@ -0,0 +1,93 @@
+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, overrideSizingFormula, size, sizingTemplate };

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

@@ -0,0 +1,3 @@
+import type { Format } from 'style-dictionary/types';
+export declare const typeScale: Format;
+//# 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","sourceRoot":"","sources":["../../../../../../src/tokens/process/formats/css/type-scale.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,MAAM,EAAoB,MAAM,wBAAwB,CAAC;AA2CvE,eAAO,MAAM,SAAS,EAAE,MA8BvB,CAAC"}

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

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

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

@@ -0,0 +1,3 @@
+import type { Format } from 'style-dictionary/types';
+export declare const typography: Format;
+//# 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","sourceRoot":"","sources":["../../../../../../src/tokens/process/formats/css/typography.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,MAAM,EAAoB,MAAM,wBAAwB,CAAC;AAUvE,eAAO,MAAM,UAAU,EAAE,MA8BxB,CAAC"}