@yahoo/uds-v5-wip 1.14.0 → 1.15.0

package/dist/config/dist/createConfig.d.ts

@@ -1,5 +1,5 @@
 import { PropertyGroupId } from "./propertyGroups.js";
-import { VarsConfig } from "./types.js";
+import { TokenType, VarsConfig } from "./types.js";
 import { BaseModifierProp, ComponentsConfig, ConfigurableProp, MacroConfig, ModifierProp, MotionPreset, RemotionComponentDef, RemotionConfig, RemotionTransitionDef, StyleProp } from "@uds/types";
 
 //#region ../config/dist/createConfig.d.ts
@@ -48,11 +48,23 @@ interface ArbitraryTokenGroup {
 type AtomicTokenValue<M extends ModifierNameShape> = {
   name: string;
   value: string;
+  /**
+   * Resolved DTCG-aligned token type. Populated per-token only when the
+   * token overrides the group-level `type` (e.g. a `'string'`-typed
+   * `transparent` sitting inside a `'color'` namespace).
+   */
+  type?: TokenType;
   modifiers?: Partial<Record<M, string>>;
 };
 interface AtomicToken<M extends ModifierNameShape = ModifierNameShape> {
   properties: ConfigurableProp[];
   tokens: AtomicTokenValue<M>[];
+  /**
+   * Resolved DTCG-aligned token type for the whole group. Set from
+   * `$type` on `defineVars`, or inferred from `defineScopes` / value sniff
+   * during config resolution.
+   */
+  type?: TokenType;
   /**
    * Optional CSS variable prefix override
    *
@@ -83,7 +95,7 @@ type MergeTokens<A, B> = { [K in keyof A | keyof B]: K extends keyof B ? K exten
  * in addition to var-namespace access (e.g., `tokens.radius`).
  * Used by `defineScopes` to populate tokens without an explicit utility mapping.
  */
-type VarsToTokens<TVars extends VarsConfig> = { [K in keyof TVars]: { [T in keyof TVars[K]]: string } } & Record<string, Record<string, string>>;
+type VarsToTokens<TVars extends VarsConfig> = { [K in keyof TVars]: { [T in Exclude<keyof TVars[K], '$type'>]: string } } & Record<string, Record<string, string>>;
 /** Empty tokens type for initial state */
 type EmptyTokens = {};
 /** Empty vars type for initial state */

package/dist/config/dist/createConfig.js

@@ -4,8 +4,9 @@ import "../../utils/dist/index.js";
 import { getConfigurablePropMapping } from "../../core/dist/propMappings.js";
 import "../../core/dist/index.js";
 import { buildMotionReference, resolveComponentMotionAliases, validateComponentVariants } from "./component-resolution.js";
-import { applyPresetToData, deepMerge, mergeAtomic } from "./preset-merge.js";
 import { expandPropertyGroups } from "./propertyGroups.js";
+import { resolveTokenType, sniffTokenTypeFromValue } from "./resolveTokenTypes.js";
+import { applyPresetToData, deepMerge, mergeAtomic } from "./preset-merge.js";
 //#region ../config/dist/createConfig.js
 /** biome-ignore-all lint/suspicious/noExplicitAny: necessary for dynamic builder to work correctly */
 /** Build a structured token reference object from atomic tokens */
@@ -39,22 +40,41 @@ function buildMacroReference(macros) {
 	}
 	return result;
 }
-/** Convert a VarGroupDef into AtomicToken tokens, extracting modifier overrides. */
+/**
+* Convert a VarGroupDef into AtomicToken tokens, extracting modifier overrides.
+*
+* Also extracts `$type` metadata:
+* - A top-level `$type` on the group → `groupType`
+* - A `$type` on an individual token → `type` on that token (overrides group)
+*
+* `$type` is filtered out of the emitted tokens; it is metadata only.
+*/
 function varGroupToTokens(varGroup, knownModifiers) {
+	let groupType;
 	const tokens = [];
-	for (const [tokenName, tokenDef] of Object.entries(varGroup)) {
+	for (const [tokenName, rawDef] of Object.entries(varGroup)) {
+		if (tokenName === "$type") {
+			if (typeof rawDef === "string") groupType = rawDef;
+			continue;
+		}
+		if (rawDef == null || typeof rawDef !== "object") continue;
+		const tokenDef = rawDef;
 		const modifiers = {};
 		for (const [key, val] of Object.entries(tokenDef)) {
-			if (key === "value" || val === void 0) continue;
+			if (key === "value" || key === "$type" || val === void 0) continue;
 			if (key.startsWith("_") && knownModifiers.has(key)) modifiers[key] = val;
 		}
 		tokens.push({
 			name: tokenName,
 			value: tokenDef.value,
+			...tokenDef.$type ? { type: tokenDef.$type } : {},
 			...Object.keys(modifiers).length > 0 ? { modifiers } : {}
 		});
 	}
-	return tokens;
+	return {
+		tokens,
+		groupType
+	};
 }
 /**
 * Sort properties so the one matching the cssPrefix comes last.
@@ -82,13 +102,22 @@ function synthesizeAtomicFromScopesAndVars(vars, scopes, modes) {
 		if (!varGroup) continue;
 		const properties = expandPropertyGroups(groupIds);
 		if (properties.length === 0) continue;
-		const tokens = varGroupToTokens(varGroup, knownModifiers);
+		const { tokens, groupType } = varGroupToTokens(varGroup, knownModifiers);
 		const cssPfx = (properties.includes(namespace) ? getConfigurablePropMapping(namespace) : void 0)?.defaultVarPrefix ?? kebabCase(namespace);
 		const sorted = sortPropertiesByPrefixMatch(properties, namespace, cssPfx);
+		const resolvedGroupType = resolveTokenType({
+			explicit: groupType,
+			scopes: groupIds
+		});
+		if (resolvedGroupType && resolvedGroupType !== "string") for (const token of tokens) {
+			if (token.type) continue;
+			if (sniffTokenTypeFromValue(token.value) === "string") token.type = "string";
+		}
 		result.push({
 			properties: sorted,
 			tokens,
-			cssPrefix: cssPfx
+			cssPrefix: cssPfx,
+			...resolvedGroupType ? { type: resolvedGroupType } : {}
 		});
 	}
 	return disambiguateOverlappingProperties(result, scopes);

package/dist/config/dist/index.d.ts

@@ -1,6 +1,6 @@
 import { defaultColors } from "./consts/defaultColors.js";
 import { PropertyGroupId } from "./propertyGroups.js";
-import { VarGroupDef, VarTokenDef, VarsConfig } from "./types.js";
+import { TokenType, VarGroupDef, VarTokenDef, VarsConfig } from "./types.js";
 import { ArbitraryTokenGroup, AtomicToken, BuildOptions, ComponentConfig, DefineComponentInput, DefineComponentMotionInput, ExampleDef, ExampleEntryDef, ExampleLayoutStyles, GlobalStylesDef, InterpolateMarker, ModeGroup, ModifierDef, MotionPresetsDef, UdsConfig, UdsConfigData, buildTokenReference, createConfigBuilder, darker, lighter, resolveConfig } from "./createConfig.js";
 import { SerializedConfig, TokenRef, buildReverseMap, deserializeConfig, serializeConfig } from "./serialize.js";
 import { ComponentsConfig as ComponentsConfig$1 } from "@uds/types";

package/dist/config/dist/index.js

@@ -1,5 +1,6 @@
 import "./consts/defaultColors.js";
 import "./component-resolution.js";
 import "./propertyGroups.js";
+import "./resolveTokenTypes.js";
 import "./createConfig.js";
 import "./serialize.js";

package/dist/config/dist/preset-merge.js

@@ -14,6 +14,7 @@ function flattenAtomic(atomic) {
 	for (const group of atomic) for (const property of group.properties) for (const token of group.tokens) entries.push({
 		property,
 		cssPrefix: group.cssPrefix,
+		groupType: group.type,
 		token
 	});
 	return entries;
@@ -39,11 +40,13 @@ function mergeAtomic(base, incoming, mode) {
 		const existing = regrouped.get(groupKey);
 		if (existing) {
 			existing.tokens.push(entry.token);
+			if (entry.groupType) existing.type = entry.groupType;
 			continue;
 		}
 		regrouped.set(groupKey, {
 			properties: [entry.property],
 			...entry.cssPrefix ? { cssPrefix: entry.cssPrefix } : {},
+			...entry.groupType ? { type: entry.groupType } : {},
 			tokens: [entry.token]
 		});
 	}

package/dist/config/dist/resolveTokenTypes.d.ts

@@ -0,0 +1 @@
+export { };

package/dist/config/dist/resolveTokenTypes.js

@@ -0,0 +1,149 @@
+//#region ../config/dist/resolveTokenTypes.js
+/**
+* Default `TokenType` for each property group. Used to infer a var
+* namespace's type when no explicit `$type` is declared — e.g. a namespace
+* scoped to `['textColor', 'background']` is clearly a `color` namespace.
+*
+* Property groups that hold composite values (`shadow`, `textShadow`) or
+* mixed-kind values (`transform` — mixes rotate/scale/translate/skew) are
+* intentionally omitted; they fall through to `undefined` until the
+* Composite Tokens RFC lands.
+*/
+const propertyGroupDefaultType = {
+	textColor: "color",
+	background: "color",
+	borderColor: "color",
+	outlineColor: "color",
+	ringColor: "color",
+	divideColor: "color",
+	shadowColor: "color",
+	svgFill: "color",
+	svgStroke: "color",
+	caretColor: "color",
+	textDecorationColor: "color",
+	opacity: "number",
+	colorOpacity: "number",
+	bgOpacity: "number",
+	borderColorOpacity: "number",
+	divideColorOpacity: "number",
+	outlineColorOpacity: "number",
+	ringColorOpacity: "number",
+	textDecorationColorOpacity: "number",
+	svgFillOpacity: "number",
+	svgStrokeOpacity: "number",
+	shadowColorOpacity: "number",
+	caretColorOpacity: "number",
+	fontFamily: "fontFamily",
+	fontSize: "dimension",
+	fontWeight: "fontWeight",
+	lineHeight: "number",
+	letterSpacing: "dimension",
+	blur: "dimension",
+	backdropBlur: "dimension",
+	animation: "duration",
+	zIndex: "number",
+	borderWidth: "dimension",
+	borderRadius: "dimension",
+	outlineWidth: "dimension",
+	divideWidth: "dimension",
+	ringWidth: "dimension",
+	padding: "dimension",
+	margin: "dimension",
+	offset: "dimension",
+	gap: "dimension",
+	indent: "dimension",
+	scrollSnapGap: "dimension",
+	scrollSnapSpacing: "dimension",
+	tableBorderSpacing: "dimension",
+	width: "dimension",
+	height: "dimension",
+	aspectRatio: "number",
+	positionPlacement: "dimension",
+	flex: "number",
+	strokeWidth: "dimension"
+};
+/**
+* Resolve a token's `TokenType` in priority order:
+*
+* 1. Explicit `$type` (from the token or its group)
+* 2. Derived from `defineScopes` — when all scopes agree on a default type
+* 3. Value sniff (last resort) — regex-matches obvious value shapes
+*
+* Returns `undefined` when none of the strategies produce a confident answer.
+* Consumers (Studio, tooling) should treat `undefined` as "render a plain
+* string input" — never guess wrong.
+*/
+function resolveTokenType(input) {
+	if (input.explicit) return input.explicit;
+	if (input.scopes && input.scopes.length > 0) {
+		const types = /* @__PURE__ */ new Set();
+		for (const scope of input.scopes) {
+			const t = propertyGroupDefaultType[scope];
+			if (t) types.add(t);
+		}
+		if (types.size === 1) {
+			const [only] = types;
+			return only;
+		}
+	}
+	if (typeof input.value === "string") {
+		const sniffed = sniffTokenTypeFromValue(input.value);
+		if (sniffed) return sniffed;
+	}
+}
+/**
+* Heuristic last-resort classifier for a raw CSS value. Returns `undefined`
+* when no confident match is possible (e.g. `var(...)` references).
+*
+* Exported for testing; prefer `resolveTokenType` in most call sites.
+*/
+function sniffTokenTypeFromValue(value) {
+	const v = value.trim();
+	if (v.length === 0) return void 0;
+	if (CSS_WIDE_KEYWORDS.has(v)) return "string";
+	if (v.startsWith("var(")) return void 0;
+	if (COLOR_FUNCTION_RE.test(v)) return "color";
+	if (HEX_COLOR_RE.test(v)) return "color";
+	if (NAMED_COLOR_KEYWORDS.has(v.toLowerCase())) return "color";
+	if (DURATION_RE.test(v)) return "duration";
+	if (DIMENSION_RE.test(v)) return "dimension";
+	if (PURE_NUMBER_RE.test(v)) return "number";
+}
+const CSS_WIDE_KEYWORDS = new Set([
+	"inherit",
+	"initial",
+	"unset",
+	"revert",
+	"revert-layer",
+	"auto",
+	"none",
+	"currentColor",
+	"currentcolor",
+	"transparent"
+]);
+const HEX_COLOR_RE = /^#(?:[0-9a-fA-F]{3,4}|[0-9a-fA-F]{6}|[0-9a-fA-F]{8})$/;
+const COLOR_FUNCTION_RE = /^(?:rgb|rgba|hsl|hsla|hwb|lab|lch|oklab|oklch|color|color-mix|light-dark)\s*\(/i;
+const NUMBER_RE_SRC = "(?:\\d+(?:\\.\\d+)?|\\.\\d+)";
+const DIMENSION_RE = new RegExp(`^-?${NUMBER_RE_SRC}(?:px|rem|em|%|vh|vw|vmin|vmax|vi|vb|svh|svw|lvh|lvw|dvh|dvw|ch|ex|cap|ic|lh|rlh|pt|pc|in|cm|mm|q|fr|deg|turn|rad|grad)$`, "i");
+const DURATION_RE = new RegExp(`^-?${NUMBER_RE_SRC}(?:ms|s)$`, "i");
+const PURE_NUMBER_RE = new RegExp(`^-?${NUMBER_RE_SRC}$`);
+const NAMED_COLOR_KEYWORDS = new Set([
+	"black",
+	"white",
+	"red",
+	"green",
+	"blue",
+	"yellow",
+	"orange",
+	"purple",
+	"pink",
+	"gray",
+	"grey",
+	"brown",
+	"cyan",
+	"magenta",
+	"silver",
+	"gold"
+]);
+//#endregion
+export { propertyGroupDefaultType, resolveTokenType, sniffTokenTypeFromValue };

package/dist/config/dist/types.d.ts

@@ -1,5 +1,16 @@
 //#region ../config/dist/types.d.ts
 //#region src/types.d.ts
+/**
+ * Scalar DTCG-aligned token types. Composite types (shadow, gradient,
+ * typography, border, transition, cubicBezier) are intentionally deferred
+ * to a future RFC — they require structured (non-string) value shapes.
+ *
+ * `string` is the catch-all for raw CSS values (keywords like `inherit`,
+ * `currentColor`, `transparent`, and anything else that does not fit a
+ * more specific type). It is also the graceful fallback when no type
+ * can be determined.
+ */
+type TokenType = 'color' | 'dimension' | 'number' | 'fontFamily' | 'fontWeight' | 'duration' | 'strokeStyle' | 'string';
 /**
  * A single design token definition with a base value and optional modifier overrides.
  * Modifier keys use the `_` prefix convention (e.g., `_dark`, `_hover`).
@@ -7,28 +18,44 @@
  * When `M` is narrowed (e.g., `'_dark' | '_light'`), only those modifier keys are
  * accepted — TypeScript will flag unknown modifiers like `_eggs` at compile time.
  *
+ * The optional `$type` annotation lets individual tokens override the group-level
+ * type (e.g. a `keyword`-valued token inside a `color` namespace).
+ *
  * @example
  * { value: '#1167f4', _dark: '#88bcfb' }
+ * { value: 'transparent', $type: 'string' }
  */
 type VarTokenDef<M extends `_${string}` = `_${string}`> = {
   value: string;
+  $type?: TokenType;
 } & { [K in M]?: string };
 /**
  * A group of named tokens within a var namespace.
  *
+ * The group may declare a `$type` that applies to all tokens in the group;
+ * individual tokens may override it with their own `$type`.
+ *
  * @example
- * { brand: { value: '#1167f4', _dark: '#88bcfb' }, accent: { value: '#7c3aed' } }
+ * {
+ *   $type: 'color',
+ *   brand: { value: '#1167f4', _dark: '#88bcfb' },
+ *   accent: { value: '#7c3aed' },
+ * }
  */
-type VarGroupDef<M extends `_${string}` = `_${string}`> = Record<string, VarTokenDef<M>>;
+type VarGroupDef<M extends `_${string}` = `_${string}`> = {
+  $type?: TokenType;
+} & {
+  [tokenName: string]: VarTokenDef<M> | TokenType | undefined;
+};
 /**
  * Top-level vars config — namespaces to groups of tokens.
  *
  * @example
  * {
- *   color: { brand: { value: '#1167f4', _dark: '#88bcfb' } },
- *   spacing: { 1: { value: '0.25rem' }, 2: { value: '0.5rem' } },
+ *   color:   { $type: 'color', brand: { value: '#1167f4', _dark: '#88bcfb' } },
+ *   spacing: { $type: 'dimension', 1: { value: '0.25rem' }, 2: { value: '0.5rem' } },
  * }
  */
 type VarsConfig<M extends `_${string}` = `_${string}`> = Record<string, VarGroupDef<M>>; //#endregion
 //#endregion
-export { VarGroupDef, VarTokenDef, VarsConfig };
+export { TokenType, VarGroupDef, VarTokenDef, VarsConfig };

package/dist/config.d.ts

@@ -1,5 +1,5 @@
 import { defaultColors } from "./config/dist/consts/defaultColors.js";
-import { VarGroupDef, VarTokenDef, VarsConfig } from "./config/dist/types.js";
+import { TokenType, VarGroupDef, VarTokenDef, VarsConfig } from "./config/dist/types.js";
 import { GlobalStylesDef, UdsConfig, UdsConfigData, buildTokenReference, createConfigBuilder, darker, lighter, resolveConfig } from "./config/dist/createConfig.js";
 import { SerializedConfig, TokenRef, buildReverseMap, deserializeConfig, serializeConfig } from "./config/dist/serialize.js";
 import { ComponentsConfig } from "./config/dist/index.js";
@@ -11,6 +11,7 @@ declare const defaultPreset: UdsConfig<_$_uds_types0.ModifierProp | "_light" | "
   [x: string]: Record<string, string>;
 }, {}, {}, {}, "_light" | "_dark" | "_sm" | "_md" | "_lg" | "_xl" | "_2xl", {
   readonly color: {
+    readonly $type: "color";
     readonly inherit: {
       readonly value: "inherit";
     };
@@ -100,6 +101,7 @@ declare const defaultPreset: UdsConfig<_$_uds_types0.ModifierProp | "_light" | "
     };
   };
   readonly bg: {
+    readonly $type: "color";
     readonly brand: {
       readonly value: "#1e6ff5";
       readonly _dark: "#71affb";
@@ -178,6 +180,7 @@ declare const defaultPreset: UdsConfig<_$_uds_types0.ModifierProp | "_light" | "
     };
   };
   readonly borderColor: {
+    readonly $type: "color";
     readonly brand: {
       readonly value: "#1e6ff5";
       readonly _dark: "#71affb";
@@ -240,6 +243,7 @@ declare const defaultPreset: UdsConfig<_$_uds_types0.ModifierProp | "_light" | "
     };
   };
   readonly borderWidth: {
+    readonly $type: "dimension";
     readonly none: {
       readonly value: "0px";
     };
@@ -254,6 +258,7 @@ declare const defaultPreset: UdsConfig<_$_uds_types0.ModifierProp | "_light" | "
     };
   };
   readonly outlineWidth: {
+    readonly $type: "dimension";
     readonly 0: {
       readonly value: "0px";
     };
@@ -271,6 +276,7 @@ declare const defaultPreset: UdsConfig<_$_uds_types0.ModifierProp | "_light" | "
     };
   };
   readonly outlineOffset: {
+    readonly $type: "dimension";
     readonly 0: {
       readonly value: "0px";
     };
@@ -288,6 +294,7 @@ declare const defaultPreset: UdsConfig<_$_uds_types0.ModifierProp | "_light" | "
     };
   };
   readonly divideWidth: {
+    readonly $type: "dimension";
     readonly 0: {
       readonly value: "0px";
     };
@@ -302,9 +309,11 @@ declare const defaultPreset: UdsConfig<_$_uds_types0.ModifierProp | "_light" | "
     };
     readonly reverse: {
       readonly value: "reverse";
+      readonly $type: "string";
     };
   };
   readonly ringWidth: {
+    readonly $type: "dimension";
     readonly 0: {
       readonly value: "0px";
     };
@@ -322,9 +331,11 @@ declare const defaultPreset: UdsConfig<_$_uds_types0.ModifierProp | "_light" | "
     };
     readonly inset: {
       readonly value: "inset";
+      readonly $type: "string";
     };
   };
   readonly ringOffsetWidth: {
+    readonly $type: "dimension";
     readonly 0: {
       readonly value: "0px";
     };
@@ -342,6 +353,7 @@ declare const defaultPreset: UdsConfig<_$_uds_types0.ModifierProp | "_light" | "
     };
   };
   readonly fontWeight: {
+    readonly $type: "fontWeight";
     readonly thin: {
       readonly value: "100";
     };
@@ -371,6 +383,7 @@ declare const defaultPreset: UdsConfig<_$_uds_types0.ModifierProp | "_light" | "
     };
   };
   readonly lineHeight: {
+    readonly $type: "number";
     readonly none: {
       readonly value: "1";
     };
@@ -385,6 +398,7 @@ declare const defaultPreset: UdsConfig<_$_uds_types0.ModifierProp | "_light" | "
     };
   };
   readonly letterSpacing: {
+    readonly $type: "dimension";
     readonly tighter: {
       readonly value: "-0.05em";
     };
@@ -405,6 +419,7 @@ declare const defaultPreset: UdsConfig<_$_uds_types0.ModifierProp | "_light" | "
     };
   };
   readonly spacing: {
+    readonly $type: "dimension";
     readonly px: {
       readonly value: "1px";
     };
@@ -512,8 +527,10 @@ declare const defaultPreset: UdsConfig<_$_uds_types0.ModifierProp | "_light" | "
     };
   };
   readonly position: {
+    readonly $type: "dimension";
     readonly auto: {
       readonly value: "auto";
+      readonly $type: "string";
     };
     readonly full: {
       readonly value: "100%";
@@ -538,6 +555,7 @@ declare const defaultPreset: UdsConfig<_$_uds_types0.ModifierProp | "_light" | "
     };
   };
   readonly aspectRatio: {
+    readonly $type: "string";
     readonly square: {
       readonly value: "1 / 1";
     };
@@ -558,6 +576,7 @@ declare const defaultPreset: UdsConfig<_$_uds_types0.ModifierProp | "_light" | "
     };
   };
   readonly flex: {
+    readonly $type: "string";
     readonly 1: {
       readonly value: "1 1 0%";
     };
@@ -572,6 +591,7 @@ declare const defaultPreset: UdsConfig<_$_uds_types0.ModifierProp | "_light" | "
     };
   };
   readonly flexGrow: {
+    readonly $type: "number";
     readonly 0: {
       readonly value: "0";
     };
@@ -580,11 +600,13 @@ declare const defaultPreset: UdsConfig<_$_uds_types0.ModifierProp | "_light" | "
     };
   };
   readonly flexShrink: {
+    readonly $type: "number";
     readonly 0: {
       readonly value: "0";
     };
   };
   readonly opacity: {
+    readonly $type: "number";
     readonly 0: {
       readonly value: "0";
     };
@@ -632,6 +654,7 @@ declare const defaultPreset: UdsConfig<_$_uds_types0.ModifierProp | "_light" | "
     };
   };
   readonly radius: {
+    readonly $type: "dimension";
     readonly none: {
       readonly value: "0px";
     };
@@ -655,6 +678,7 @@ declare const defaultPreset: UdsConfig<_$_uds_types0.ModifierProp | "_light" | "
     };
   };
   readonly animation: {
+    readonly $type: "string";
     readonly none: {
       readonly value: "none";
     };
@@ -666,6 +690,7 @@ declare const defaultPreset: UdsConfig<_$_uds_types0.ModifierProp | "_light" | "
     };
   };
   readonly shadow: {
+    readonly $type: "string";
     readonly "2xs": {
       readonly value: "0 1px rgb(0 0 0 / 0.05)";
     };
@@ -695,6 +720,7 @@ declare const defaultPreset: UdsConfig<_$_uds_types0.ModifierProp | "_light" | "
     };
   };
   readonly blur: {
+    readonly $type: "string";
     readonly none: {
       readonly value: "blur(0)";
     };
@@ -718,6 +744,7 @@ declare const defaultPreset: UdsConfig<_$_uds_types0.ModifierProp | "_light" | "
     };
   };
   readonly textShadow: {
+    readonly $type: "string";
     readonly "2xs": {
       readonly value: "0 1px 0 rgb(0 0 0 / 0.15)";
     };
@@ -738,8 +765,10 @@ declare const defaultPreset: UdsConfig<_$_uds_types0.ModifierProp | "_light" | "
     };
   };
   readonly zIndex: {
+    readonly $type: "number";
     readonly auto: {
       readonly value: "auto";
+      readonly $type: "string";
     };
     readonly 0: {
       readonly value: "0";
@@ -761,20 +790,25 @@ declare const defaultPreset: UdsConfig<_$_uds_types0.ModifierProp | "_light" | "
     };
   };
   readonly size: {
+    readonly $type: "dimension";
     readonly auto: {
       readonly value: "auto";
+      readonly $type: "string";
     };
     readonly full: {
       readonly value: "100%";
     };
     readonly min: {
       readonly value: "min-content";
+      readonly $type: "string";
     };
     readonly max: {
       readonly value: "max-content";
+      readonly $type: "string";
     };
     readonly fit: {
       readonly value: "fit-content";
+      readonly $type: "string";
     };
     readonly "1/2": {
       readonly value: "50%";
@@ -823,6 +857,7 @@ declare const defaultPreset: UdsConfig<_$_uds_types0.ModifierProp | "_light" | "
     };
   };
   readonly w: {
+    readonly $type: "dimension";
     readonly screen: {
       readonly value: "100vw";
     };
@@ -837,6 +872,7 @@ declare const defaultPreset: UdsConfig<_$_uds_types0.ModifierProp | "_light" | "
     };
   };
   readonly h: {
+    readonly $type: "dimension";
     readonly screen: {
       readonly value: "100vh";
     };
@@ -851,6 +887,7 @@ declare const defaultPreset: UdsConfig<_$_uds_types0.ModifierProp | "_light" | "
     };
   };
   readonly rotate: {
+    readonly $type: "dimension";
     readonly 0: {
       readonly value: "0deg";
     };
@@ -880,6 +917,7 @@ declare const defaultPreset: UdsConfig<_$_uds_types0.ModifierProp | "_light" | "
     };
   };
   readonly scale: {
+    readonly $type: "number";
     readonly 0: {
       readonly value: "0";
     };
@@ -915,6 +953,7 @@ declare const defaultPreset: UdsConfig<_$_uds_types0.ModifierProp | "_light" | "
     };
   };
   readonly skew: {
+    readonly $type: "dimension";
     readonly 0: {
       readonly value: "0deg";
     };
@@ -935,6 +974,7 @@ declare const defaultPreset: UdsConfig<_$_uds_types0.ModifierProp | "_light" | "
     };
   };
   readonly translate: {
+    readonly $type: "dimension";
     readonly 0: {
       readonly value: "0px";
     };
@@ -1057,6 +1097,7 @@ declare const defaultPreset: UdsConfig<_$_uds_types0.ModifierProp | "_light" | "
     };
   };
   readonly strokeWidth: {
+    readonly $type: "dimension";
     readonly 0: {
       readonly value: "0px";
     };
@@ -1068,6 +1109,7 @@ declare const defaultPreset: UdsConfig<_$_uds_types0.ModifierProp | "_light" | "
     };
   };
   readonly fontFamily: {
+    readonly $type: "fontFamily";
     readonly sans: {
       readonly value: "var(--uds-font-family-geist, ui-sans-serif, system-ui, sans-serif)";
     };
@@ -1080,4 +1122,4 @@ declare const defaultPreset: UdsConfig<_$_uds_types0.ModifierProp | "_light" | "
   };
 }>;
 //#endregion
-export { type ComponentsConfig, type GlobalStylesDef, type SerializedConfig, type TokenRef, type UdsConfig, type UdsConfigData, type VarGroupDef, type VarTokenDef, type VarsConfig, buildReverseMap, buildTokenReference, createConfigBuilder, darker, defaultColors, defaultPreset, deserializeConfig, lighter, resolveConfig, serializeConfig, uds };
+export { type ComponentsConfig, type GlobalStylesDef, type SerializedConfig, type TokenRef, type TokenType, type UdsConfig, type UdsConfigData, type VarGroupDef, type VarTokenDef, type VarsConfig, buildReverseMap, buildTokenReference, createConfigBuilder, darker, defaultColors, defaultPreset, deserializeConfig, lighter, resolveConfig, serializeConfig, uds };