@digdir/designsystemet 1.16.1 → 1.18.0

package/dist/src/tokens/create/generators/semantic/style.js

@@ -1,6 +1,49 @@
+import { semanticColorMap } from "../../../../colors/types.js";
+import * as R from "ramda";
 //#region src/tokens/create/generators/semantic/style.ts
-function generateSemanticStyle() {
+function generateSemanticStyle(colorNames) {
 	return {
+		...generateColors(colorNames),
+		"border-width": {
+			default: {
+				$type: "borderWidth",
+				$value: "{border-width.1}"
+			},
+			focus: {
+				$type: "borderWidth",
+				$value: "{border-width.3}"
+			}
+		},
+		"border-radius": {
+			sm: {
+				$type: "dimension",
+				$value: "{border-radius.1}"
+			},
+			md: {
+				$type: "dimension",
+				$value: "{border-radius.2}"
+			},
+			lg: {
+				$type: "dimension",
+				$value: "{border-radius.3}"
+			},
+			xl: {
+				$type: "dimension",
+				$value: "{border-radius.4}"
+			},
+			default: {
+				$type: "dimension",
+				$value: "{border-radius.5}"
+			},
+			full: {
+				$type: "dimension",
+				$value: "{border-radius.6}"
+			}
+		},
+		opacity: { disabled: {
+			$type: "opacity",
+			$value: "{opacity.30}"
+		} },
 		typography: {
 			heading: {
 				"2xl": {
@@ -231,20 +274,6 @@ function generateSemanticStyle() {
 				}
 			}
 		},
-		opacity: { disabled: {
-			$type: "opacity",
-			$value: "{opacity.30}"
-		} },
-		"border-width": {
-			default: {
-				$type: "borderWidth",
-				$value: "{border-width.1}"
-			},
-			focus: {
-				$type: "borderWidth",
-				$value: "{border-width.3}"
-			}
-		},
 		shadow: {
 			xs: {
 				$type: "boxShadow",
@@ -267,32 +296,6 @@ function generateSemanticStyle() {
 				$value: "{shadow.500}"
 			}
 		},
-		"border-radius": {
-			sm: {
-				$type: "dimension",
-				$value: "{border-radius.1}"
-			},
-			md: {
-				$type: "dimension",
-				$value: "{border-radius.2}"
-			},
-			lg: {
-				$type: "dimension",
-				$value: "{border-radius.3}"
-			},
-			xl: {
-				$type: "dimension",
-				$value: "{border-radius.4}"
-			},
-			default: {
-				$type: "dimension",
-				$value: "{border-radius.5}"
-			},
-			full: {
-				$type: "dimension",
-				$value: "{border-radius.6}"
-			}
-		},
 		size: {
 			"0": {
 				$type: "dimension",
@@ -377,5 +380,39 @@ function generateSemanticStyle() {
 		}
 	};
 }
+const generateColors = (colorNames) => {
+	const semanticColorTokens = colorNames.map((colorName) => [colorName, generateColorScaleTokens(colorName)]);
+	return {
+		...baseColorTemplate,
+		color: {
+			...Object.fromEntries(semanticColorTokens),
+			...baseColorTemplate.color
+		}
+	};
+};
+const baseColorTemplate = {
+	color: { focus: {
+		inner: {
+			$type: "color",
+			$value: "{color.focus.inner-color}"
+		},
+		outer: {
+			$type: "color",
+			$value: "{color.focus.outer-color}"
+		}
+	} },
+	link: { color: { visited: {
+		$type: "color",
+		$value: "{color.link.visited}"
+	} } }
+};
+const generateColorScaleTokens = (colorName) => {
+	const colorScale = {};
+	for (const [colorSemantic, colorNumber] of R.toPairs(semanticColorMap)) colorScale[colorSemantic] = {
+		$type: "color",
+		$value: `{color.${colorName}.${colorNumber}}`
+	};
+	return colorScale;
+};
 //#endregion
 export { generateSemanticStyle };

package/dist/src/tokens/create/generators/themes/theme.d.ts

@@ -1,3 +1,3 @@
-import type { Colors, TokenSet } from '../../../types.js';
-export declare const generateTheme: (colors: Colors, themeName: string, borderRadius: number) => TokenSet;
+import type { TokenSet } from '../../../types.js';
+export declare const generateTheme: (colorNames: string[], themeName: string, borderRadius: number) => TokenSet;
 //# sourceMappingURL=theme.d.ts.map

package/dist/src/tokens/create/generators/themes/theme.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../../../../../src/tokens/create/generators/themes/theme.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,MAAM,EAAS,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAEjE,eAAO,MAAM,aAAa,GAAI,QAAQ,MAAM,EAAE,WAAW,MAAM,EAAE,cAAc,MAAM,aAmDpF,CAAC"}
+{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../../../../../src/tokens/create/generators/themes/theme.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAS,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAEzD,eAAO,MAAM,aAAa,GAAI,YAAY,MAAM,EAAE,EAAE,WAAW,MAAM,EAAE,cAAc,MAAM,aA+C1F,CAAC"}

package/dist/src/tokens/create/generators/themes/theme.js

@@ -1,17 +1,8 @@
-import { baseColorNames } from "../../../../colors/colorMetadata.js";
 import { semanticColorMap } from "../../../../colors/types.js";
 import * as R from "ramda";
 //#region src/tokens/create/generators/themes/theme.ts
-const generateTheme = (colors, themeName, borderRadius) => {
-	const mainColorNames = Object.keys(colors.main);
-	const supportColorNames = Object.keys(colors.support);
-	const customColors = [
-		...mainColorNames,
-		"neutral",
-		...supportColorNames,
-		...baseColorNames
-	];
-	const themeColorTokens = Object.fromEntries(customColors.map((colorName) => [colorName, generateColorScaleTokens(colorName, themeName)]));
+const generateTheme = (colorNames, themeName, borderRadius) => {
+	const themeColorTokens = Object.fromEntries(colorNames.map((colorName) => [colorName, generateColorScaleTokens(colorName, themeName)]));
 	const { color: themeBaseFileColor, ...remainingThemeFile } = generateBase(themeName);
 	const themeFile = {
 		color: {

package/dist/src/tokens/create.d.ts

@@ -1,21 +1,5 @@
 import type { Theme, TokenSetDimensions, TokenSets } from './types.js';
 export declare const tokenSetDimensions: TokenSetDimensions;
-export declare const cliOptions: {
-    readonly outDir: "out-dir";
-    readonly clean: "clean";
-    readonly tailwind: "tailwind";
-    readonly theme: {
-        readonly colors: {
-            readonly main: "main-colors";
-            readonly support: "support-colors";
-            readonly neutral: "neutral-color";
-        };
-        readonly typography: {
-            readonly fontFamily: "font-family";
-        };
-        readonly borderRadius: "border-radius";
-    };
-};
 export declare const createTokens: (theme: Theme) => Promise<{
     tokenSets: TokenSets;
 }>;

package/dist/src/tokens/create.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"create.d.ts","sourceRoot":"","sources":["../../../src/tokens/create.ts"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,KAAK,EAAY,kBAAkB,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AAEjF,eAAO,MAAM,kBAAkB,EAAE,kBAGhC,CAAC;AAEF,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;CAeb,CAAC;AAEX,eAAO,MAAM,YAAY,GAAU,OAAO,KAAK;;EA2B9C,CAAC"}
+{"version":3,"file":"create.d.ts","sourceRoot":"","sources":["../../../src/tokens/create.ts"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,KAAK,EAAY,kBAAkB,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AAGjF,eAAO,MAAM,kBAAkB,EAAE,kBAGhC,CAAC;AAEF,eAAO,MAAM,YAAY,GAAU,OAAO,KAAK;;EA8B9C,CAAC"}

package/dist/src/tokens/create.js

@@ -1,9 +1,9 @@
+import { addSeverityColors, toColorNames } from "./utils.js";
 import { generateColorScheme } from "./create/generators/primitives/color-scheme.js";
 import { generateGlobals } from "./create/generators/primitives/globals.js";
 import { generateSize, generateSizeGlobal } from "./create/generators/primitives/size.js";
 import { generateFontSizes, generateTypography } from "./create/generators/primitives/typography.js";
-import { generateSemanticColors } from "./create/generators/semantic/color.js";
-import { generateColorModes } from "./create/generators/semantic/color-modes.js";
+import { generateColorTokens } from "./create/generators/semantic/color.js";
 import { generateSemanticStyle } from "./create/generators/semantic/style.js";
 import { generateTheme } from "./create/generators/themes/theme.js";
 //#region src/tokens/create.ts
@@ -15,23 +15,12 @@ const tokenSetDimensions = {
 		"large"
 	]
 };
-const cliOptions = {
-	outDir: "out-dir",
-	clean: "clean",
-	tailwind: "tailwind",
-	theme: {
-		colors: {
-			main: "main-colors",
-			support: "support-colors",
-			neutral: "neutral-color"
-		},
-		typography: { fontFamily: "font-family" },
-		borderRadius: "border-radius"
-	}
-};
 const createTokens = async (theme) => {
-	const { colors, typography, name, borderRadius, overrides } = theme;
+	const { typography, name, borderRadius, overrides } = theme;
 	const { colorSchemes, sizeModes } = tokenSetDimensions;
+	const colors = addSeverityColors(theme.colors);
+	const colorNames = toColorNames(colors);
+	const colorTokens = Object.entries(generateColorTokens(colorNames, name));
 	return { tokenSets: new Map([
 		["primitives/globals", generateGlobals()],
 		...sizeModes.map((size) => [`primitives/modes/size/${size}`, generateSize(size)]),
@@ -40,11 +29,10 @@ const createTokens = async (theme) => {
 		[`primitives/modes/typography/primary/${name}`, generateTypography(name, typography)],
 		[`primitives/modes/typography/secondary/${name}`, generateTypography(name, typography)],
 		...colorSchemes.flatMap((scheme) => [[`primitives/modes/color-scheme/${scheme}/${name}`, generateColorScheme(name, scheme, colors, overrides)]]),
-		[`themes/${name}`, generateTheme(colors, name, borderRadius)],
-		["semantic/color", generateSemanticColors(colors, name)],
-		...Object.entries(generateColorModes(colors, name)).flatMap(([mode, colors]) => Object.entries(colors).map(([key, colorSet]) => [`semantic/modes/${mode}/${key}`, colorSet])),
-		[`semantic/style`, generateSemanticStyle()]
+		[`themes/${name}`, generateTheme(colorNames, name, borderRadius)],
+		...colorTokens.map(([colorName, colorSetTokens]) => [`semantic/color/${colorName}`, colorSetTokens]),
+		[`semantic/style`, generateSemanticStyle(colorNames)]
 	]) };
 };
 //#endregion
-export { cliOptions, createTokens, tokenSetDimensions };
+export { createTokens, tokenSetDimensions };

package/dist/src/tokens/format.js

@@ -1,9 +1,9 @@
-import { createTokens, tokenSetDimensions } from "./create.js";
-import { colorNamesByCategory } from "./utils.js";
-import { processThemeObject } from "./process/utils/getMultidimensionalThemes.js";
+import { toColorNames } from "./utils.js";
 import { processPlatform } from "./process/platform.js";
+import { processThemeObject } from "./process/utils/getMultidimensionalThemes.js";
 import { createThemeCSSFiles } from "./process/output/theme.js";
 import { generate$Themes } from "./create/generators/$themes.js";
+import { createTokens, tokenSetDimensions } from "./create.js";
 import * as R from "ramda";
 //#region src/tokens/format.ts
 const formatTokens = async (options) => {
@@ -14,10 +14,12 @@ const formatTokens = async (options) => {
 	});
 };
 const formatTheme = async (themeConfig) => {
+	const themeNames = [themeConfig.name];
+	const colorNames = toColorNames(themeConfig.colors);
 	const { tokenSets } = await createTokens(themeConfig);
 	return await formatTokens({
 		tokenSets,
-		processed$themes: (await generate$Themes(tokenSetDimensions, [themeConfig.name], colorNamesByCategory(themeConfig.colors))).map(processThemeObject),
+		processed$themes: (await generate$Themes(tokenSetDimensions, themeNames, colorNames)).map(processThemeObject),
 		verbose: false
 	});
 };

package/dist/src/tokens/generate-config.d.ts

@@ -1,5 +1,5 @@
-import type { CreateConfigSchema } from '../config.js';
-export type GenerateConfigOptions = {
+import type { CreateConfigSchema } from '../schemas/v1.1/schema.js';
+type GenerateConfigOptions = {
     tokensDir: string;
     outFile?: string;
 };
@@ -7,4 +7,5 @@ export type GenerateConfigOptions = {
  * Generates a config file from existing design tokens
  */
 export declare function generateConfigFromTokens(options: GenerateConfigOptions): Promise<CreateConfigSchema>;
+export {};
 //# sourceMappingURL=generate-config.d.ts.map

package/dist/src/tokens/generate-config.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"generate-config.d.ts","sourceRoot":"","sources":["../../../src/tokens/generate-config.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,cAAc,CAAC;AA6MvD,MAAM,MAAM,qBAAqB,GAAG;IAClC,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF;;GAEG;AACH,wBAAsB,wBAAwB,CAAC,OAAO,EAAE,qBAAqB,GAAG,OAAO,CAAC,kBAAkB,CAAC,CA6E1G"}
+{"version":3,"file":"generate-config.d.ts","sourceRoot":"","sources":["../../../src/tokens/generate-config.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,2BAA2B,CAAC;AA0LpE,KAAK,qBAAqB,GAAG;IAC3B,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF;;GAEG;AACH,wBAAsB,wBAAwB,CAAC,OAAO,EAAE,qBAAqB,GAAG,OAAO,CAAC,kBAAkB,CAAC,CA8D1G"}

package/dist/src/tokens/generate-config.js

@@ -96,40 +96,21 @@ function extractFontFamilyFromPrimitives(typographyConfig, themeName) {
 	if (typeof fontFamily === "object" && "$value" in fontFamily) return fontFamily.$value;
 }
 /**
-* Categorizes colors into main, support, and neutral based on color names
+* Extracts colors from the theme tokens, excluding reserved colors and extracting base colors from color scales.
 */
-function categorizeColors(themeTokens, themeName) {
-	const main = {};
-	const support = {};
-	let neutral = null;
-	const builtInColors = [
-		"neutral",
-		"info",
-		"success",
-		"warning",
-		"danger"
-	];
+function extractColors(themeTokens, themeName) {
+	const colors = {};
 	const specialKeys = ["link"];
 	const themeColors = themeTokens[themeName];
-	if (!themeColors) return {
-		main,
-		support,
-		neutral
-	};
+	if (!themeColors) return colors;
 	for (const [colorName, colorValue] of Object.entries(themeColors)) {
 		if (specialKeys.includes(colorName)) continue;
 		if (typeof colorValue === "object" && !("$value" in colorValue)) {
 			const baseColor = extractBaseColor(colorValue);
-			if (baseColor) if (colorName === "neutral") neutral = baseColor;
-			else if (builtInColors.includes(colorName)) {} else if (colorName === "accent") main[colorName] = baseColor;
-			else support[colorName] = baseColor;
+			if (baseColor) colors[colorName] = baseColor;
 		}
 	}
-	return {
-		main,
-		support,
-		neutral
-	};
+	return colors;
 }
 /**
 * Generates a config file from existing design tokens
@@ -149,26 +130,19 @@ async function generateConfigFromTokens(options) {
 		const themeTokens = await readThemeTokens(tokensDir, themeName);
 		const themeConfig = await readThemeConfig(tokensDir, themeName);
 		const typographyConfig = await readTypographyConfig(tokensDir, themeName);
-		const { main, support, neutral } = categorizeColors(themeTokens, themeName);
-		if (Object.keys(main).length === 0) console.warn(pc.yellow(`\nWarning: No main colors found for theme ${themeName}`));
-		if (!neutral) {
+		const colors = extractColors(themeTokens, themeName);
+		if (!colors.neutral) {
 			console.warn(pc.yellow(`\nWarning: No neutral color found for theme ${themeName}`));
 			continue;
 		}
 		const borderRadius = extractBorderRadius(themeConfig);
 		const fontFamily = extractFontFamily(themeConfig) ?? extractFontFamilyFromPrimitives(typographyConfig, themeName);
 		config.themes[themeName] = {
-			colors: {
-				main,
-				support,
-				neutral
-			},
+			colors,
 			borderRadius,
 			typography: fontFamily ? { fontFamily } : void 0
 		};
-		console.log(`\n✅ Main colors: ${Object.keys(main).map((c) => pc.cyan(c)).join(", ") || pc.dim("none")}`);
-		console.log(`\n✅ Support colors: ${Object.keys(support).map((c) => pc.cyan(c)).join(", ") || pc.dim("none")}`);
-		console.log(`\n✅ Neutral: ${pc.cyan(neutral)}`);
+		console.log(`\n✅ Colors: ${Object.keys(colors).map((c) => pc.cyan(c)).join(", ") || pc.dim("none")}`);
 		if (borderRadius !== void 0) console.log(`\n✅ Border radius: ${pc.cyan(String(borderRadius))}`);
 		if (fontFamily) console.log(`\n✅ Font family: ${pc.cyan(fontFamily)}`);
 	}

package/dist/src/tokens/index.d.ts

@@ -1,4 +1,5 @@
-export { cliOptions, createTokens } from './create.js';
+export { deprecatedCLIOptions as cliOptions } from '../schemas/helpers.js';
+export { createTokens } from './create.js';
 export { formatThemeCSS, formatTokens } from './format.js';
 export type { Theme as CreateTokensOptions } from './types.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/src/tokens/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/tokens/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AACvD,OAAO,EAAE,cAAc,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAC3D,YAAY,EAAE,KAAK,IAAI,mBAAmB,EAAE,MAAM,YAAY,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/tokens/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,IAAI,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAC3E,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAC3C,OAAO,EAAE,cAAc,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAC3D,YAAY,EAAE,KAAK,IAAI,mBAAmB,EAAE,MAAM,YAAY,CAAC"}

package/dist/src/tokens/index.js

@@ -1,3 +1,4 @@
-import { cliOptions, createTokens } from "./create.js";
+import { deprecatedCLIOptions } from "../schemas/helpers.js";
+import { createTokens } from "./create.js";
 import { formatThemeCSS, formatTokens } from "./format.js";
-export { cliOptions, createTokens, formatThemeCSS, formatTokens };
+export { deprecatedCLIOptions as cliOptions, createTokens, formatThemeCSS, formatTokens };

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

@@ -1,12 +1,4 @@
-import type { BuiltInColors, ColorCategories } from '../../types.js';
 import { type GetStyleDictionaryConfig } from './shared.js';
 export declare const colorSchemeVariables: GetStyleDictionaryConfig;
-type ColorCategoryOpts = {
-    category: ColorCategories;
-} | {
-    category: 'builtin';
-    color: BuiltInColors;
-};
-export declare const colorCategoryVariables: (opts: ColorCategoryOpts) => GetStyleDictionaryConfig;
-export {};
+export declare const colorVariables: GetStyleDictionaryConfig;
 //# sourceMappingURL=color.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"color.d.ts","sourceRoot":"","sources":["../../../../../src/tokens/process/configs/color.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAKrE,OAAO,EAAkB,KAAK,wBAAwB,EAAU,MAAM,aAAa,CAAC;AAEpF,eAAO,MAAM,oBAAoB,EAAE,wBA8BlC,CAAC;AAEF,KAAK,iBAAiB,GAAG;IAAE,QAAQ,EAAE,eAAe,CAAA;CAAE,GAAG;IAAE,QAAQ,EAAE,SAAS,CAAC;IAAC,KAAK,EAAE,aAAa,CAAA;CAAE,CAAC;AAEvG,eAAO,MAAM,sBAAsB,GAChC,MAAM,iBAAiB,KAAG,wBAgD1B,CAAC"}
+{"version":3,"file":"color.d.ts","sourceRoot":"","sources":["../../../../../src/tokens/process/configs/color.ts"],"names":[],"mappings":"AAKA,OAAO,EAAkB,KAAK,wBAAwB,EAAU,MAAM,aAAa,CAAC;AAEpF,eAAO,MAAM,oBAAoB,EAAE,wBA8BlC,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,wBAqC5B,CAAC"}

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

@@ -1,8 +1,7 @@
-import { isColorCategoryToken, isSemanticColorToken, typeEquals } from "../../utils.js";
+import { isSemanticColorToken, pathStartsWithOneOf } from "../../utils.js";
 import { dsTransformers } from "./shared.js";
 import { formats } from "../formats/css.js";
 import { buildOptions } from "../platform.js";
-import * as R from "ramda";
 //#region src/tokens/process/configs/color.ts
 const colorSchemeVariables = ({ "color-scheme": colorScheme = "light", theme }) => {
 	return {
@@ -18,16 +17,14 @@ const colorSchemeVariables = ({ "color-scheme": colorScheme = "light", theme })
 			files: [{
 				destination: `color-scheme/${colorScheme}.css`,
 				format: formats.colorScheme.name,
-				filter: (token) => typeEquals("color", token) && !R.startsWith(["global"], token.path)
+				filter: (token) => pathStartsWithOneOf(["color"], token) || token.path[1] === "color"
 			}],
 			options: { outputReferences: false }
 		} }
 	};
 };
-const colorCategoryVariables = (opts) => ({ "color-scheme": colorScheme, theme, ...permutation }) => {
-	const category = opts.category;
-	const color = category === "builtin" ? opts.color : permutation[`${category}-color`];
-	if (!color) throw new Error(category === "builtin" ? `Missing color for built-in color ${opts.color}` : `Missing color for category ${category}`);
+const colorVariables = ({ "color-scheme": colorScheme, theme, ...permutation }) => {
+	const color = permutation.color;
 	return {
 		preprocessors: ["tokens-studio"],
 		platforms: { css: {
@@ -41,11 +38,11 @@ const colorCategoryVariables = (opts) => ({ "color-scheme": colorScheme, theme,
 			files: [{
 				destination: `color/${color}.css`,
 				format: formats.colorCategory.name,
-				filter: (token) => category === "builtin" ? isSemanticColorToken(token, color) : isColorCategoryToken(token, category)
+				filter: (token) => isSemanticColorToken(token, color)
 			}],
 			options: { outputReferences: true }
 		} }
 	};
 };
 //#endregion
-export { colorCategoryVariables, colorSchemeVariables };
+export { colorSchemeVariables, colorVariables };

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

@@ -3,13 +3,7 @@ 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;
+    colorVariables: GetStyleDictionaryConfig;
     sizeModeVariables: GetStyleDictionaryConfig;
     sizeVariables: GetStyleDictionaryConfig;
     typographyVariables: GetStyleDictionaryConfig;

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

@@ -1 +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"}
+{"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;;;;;;;;CAQnB,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

@@ -1,14 +1,14 @@
 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 { colorSchemeVariables, colorVariables } 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 { getMultidimensionalThemes } from "./utils/getMultidimensionalThemes.js";
 import * as R from "ramda";
 import StyleDictionary from "style-dictionary";
 import { register } from "@tokens-studio/sd-transforms";
@@ -21,28 +21,7 @@ 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"
-	}),
+	colorVariables,
 	sizeModeVariables,
 	sizeVariables,
 	typographyVariables,

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

@@ -1 +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"}
+{"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;AAYrD,eAAO,MAAM,WAAW,EAAE,MA2CzB,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,MAwC3B,CAAC"}

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

@@ -1,5 +1,4 @@
-import { colorCategories } from "../../../types.js";
-import { isColorCategoryToken, isGlobalColorToken, isSemanticToken } from "../../../utils.js";
+import { isSemanticToken } from "../../../utils.js";
 import { buildOptions } from "../../platform.js";
 import * as R from "ramda";
 import { createPropertyFormatter } from "style-dictionary/utils";
@@ -23,7 +22,7 @@ const colorScheme = {
 			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) => ({
+		const content = `{\n${allTokens.filter(R.allPass([R.anyPass([isSemanticToken])])).map((token) => ({
 			token,
 			formatted: format(token)
 		})).map(R.view(R.lensProp("formatted"))).join("\n")}\n${colorSchemeProperty}}\n`;
@@ -44,10 +43,10 @@ const colorCategory = {
 			usesDtcg
 		}), (token) => ({
 			...token,
-			name: token.name.replace(/color-\w+-/, "color-"),
+			name: token.name.replace(`color-${token.path[1]}-`, "color-"),
 			original: {
 				...token.original,
-				$value: new RegExp(`color-(${colorCategories.main}|${colorCategories.support})-`).test(token.name) ? token.original.$value : `{${token.path.join(".")}}`
+				$value: `{${token.path.join(".")}}`
 			}
 		}));
 		const formattedMap = dictionary.allTokens.map((token) => ({

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

@@ -1,4 +1,3 @@
 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

@@ -1 +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"}
+{"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"}

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

@@ -47,4 +47,4 @@ function wrapInLayer(content, layer) {
 	return R.isNotNil(layer) ? `@layer ${layer} {\n${content}\n}\n` : `${content}\n`;
 }
 //#endregion
-export { sizeMode, wrapInLayer };
+export { sizeMode };

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

@@ -1,18 +1,6 @@
 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[];

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

@@ -1 +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"}
+{"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;AAoDvG,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

@@ -90,4 +90,4 @@ const size = {
 	}
 };
 //#endregion
-export { isInlineTokens, overrideSizingFormula, size, sizingTemplate };
+export { isInlineTokens, size, sizingTemplate };

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

@@ -1 +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"}
+{"version":3,"file":"declarations.d.ts","sourceRoot":"","sources":["../../../../../src/tokens/process/output/declarations.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AACjD,OAAO,EAAkB,KAAK,oBAAoB,EAAE,MAAM,uCAAuC,CAAC;AAElG,eAAO,MAAM,iBAAiB,QAA2B,CAAC;AAE1D,eAAO,MAAM,0BAA0B,GAAI,kBAAkB,oBAAoB,EAAE,KAAG,UAAU,EAa/F,CAAC"}