@yahoo/uds-v5-wip 1.3.0 → 1.5.0

package/dist/foundational-presets/dist/defaultPreset.js

@@ -41,1653 +41,1151 @@ const defaultFoundationPreset = uds.defineModes([{
 			media: "(min-width: 1536px)"
 		}
 	]
-}]).defineAtomicTokens([
-	{
-		cssPrefix: "color",
-		properties: [
-			"color",
-			"bg",
-			"borderColor",
-			"caretColor",
-			"ringColor",
-			"ringOffsetColor",
-			"textDecorationColor",
-			"fillColor",
-			"strokeColor",
-			"shadowColor"
-		],
-		tokens: [
-			{
-				name: "inherit",
-				value: "inherit"
-			},
-			{
-				name: "current",
-				value: "currentColor"
-			},
-			{
-				name: "transparent",
-				value: "transparent"
-			},
-			{
-				name: "always/black",
-				value: "#000"
-			},
-			{
-				name: "always/white",
-				value: "#fff"
-			}
-		]
+}]).defineVars({
+	color: {
+		inherit: { value: "inherit" },
+		current: { value: "currentColor" },
+		transparent: { value: "transparent" },
+		"always/black": { value: "#000" },
+		"always/white": { value: "#fff" },
+		brand: {
+			value: "#1167f4",
+			_dark: "#88bcfb"
+		},
+		"on-brand": {
+			value: "#ffffff",
+			_dark: "#09090b"
+		},
+		accent: {
+			value: "#da1c46",
+			_dark: "#fc9aa8"
+		},
+		"on-accent": {
+			value: "#ffffff",
+			_dark: "#09090b"
+		},
+		alert: {
+			value: "#df1313",
+			_dark: "#fa9b9b"
+		},
+		"on-alert": {
+			value: "#ffffff",
+			_dark: "#09090b"
+		},
+		positive: {
+			value: "#17843f",
+			_dark: "#4ade80"
+		},
+		"on-positive": {
+			value: "#ffffff",
+			_dark: "#09090b"
+		},
+		warning: {
+			value: "#bf5105",
+			_dark: "#fca156"
+		},
+		"on-warning": {
+			value: "#ffffff",
+			_dark: "#09090b"
+		},
+		primary: {
+			value: "#52525b",
+			_dark: "#09090b"
+		},
+		"on-primary": {
+			value: "#18181b",
+			_dark: "#fafafa"
+		},
+		secondary: {
+			value: "#a1a1aa",
+			_dark: "#a1a1aa"
+		},
+		"on-secondary": {
+			value: "#6f6f78",
+			_dark: "#b7b7bd"
+		},
+		tertiary: {
+			value: "#fafafa",
+			_dark: "#18181b"
+		},
+		"on-tertiary": {
+			value: "#71717a",
+			_dark: "#b2b2b9"
+		},
+		inverse: {
+			value: "#18181b",
+			_dark: "#fafafa"
+		},
+		"on-inverse": {
+			value: "#fafafa",
+			_dark: "#09090b"
+		}
 	},
-	{
-		properties: ["color"],
-		tokens: [
-			{
-				name: "brand",
-				value: "#1167f4",
-				modifiers: { _dark: "#88bcfb" }
-			},
-			{
-				name: "on-brand",
-				value: "#ffffff",
-				modifiers: { _dark: "#09090b" }
-			},
-			{
-				name: "accent",
-				value: "#da1c46",
-				modifiers: { _dark: "#fc9aa8" }
-			},
-			{
-				name: "on-accent",
-				value: "#ffffff",
-				modifiers: { _dark: "#09090b" }
-			},
-			{
-				name: "alert",
-				value: "#df1313",
-				modifiers: { _dark: "#fa9b9b" }
-			},
-			{
-				name: "on-alert",
-				value: "#ffffff",
-				modifiers: { _dark: "#09090b" }
-			},
-			{
-				name: "positive",
-				value: "#17843f",
-				modifiers: { _dark: "#4ade80" }
-			},
-			{
-				name: "on-positive",
-				value: "#ffffff",
-				modifiers: { _dark: "#09090b" }
-			},
-			{
-				name: "warning",
-				value: "#bf5105",
-				modifiers: { _dark: "#fca156" }
-			},
-			{
-				name: "on-warning",
-				value: "#ffffff",
-				modifiers: { _dark: "#09090b" }
-			},
-			{
-				name: "primary",
-				value: "#52525b",
-				modifiers: { _dark: "#09090b" }
-			},
-			{
-				name: "on-primary",
-				value: "#18181b",
-				modifiers: { _dark: "#fafafa" }
-			},
-			{
-				name: "secondary",
-				value: "#a1a1aa",
-				modifiers: { _dark: "#a1a1aa" }
-			},
-			{
-				name: "on-secondary",
-				value: "#6f6f78",
-				modifiers: { _dark: "#b7b7bd" }
-			},
-			{
-				name: "tertiary",
-				value: "#fafafa",
-				modifiers: { _dark: "#18181b" }
-			},
-			{
-				name: "on-tertiary",
-				value: "#71717a",
-				modifiers: { _dark: "#b2b2b9" }
-			},
-			{
-				name: "inverse",
-				value: "#18181b",
-				modifiers: { _dark: "#fafafa" }
-			},
-			{
-				name: "on-inverse",
-				value: "#fafafa",
-				modifiers: { _dark: "#09090b" }
-			}
-		]
+	bg: {
+		brand: {
+			value: "#1e6ff5",
+			_dark: "#71affb"
+		},
+		surface: {
+			value: "#fafafa",
+			_dark: "#09090b"
+		},
+		accent: {
+			value: "#e11d48",
+			_dark: "#fc8a9a"
+		},
+		alert: {
+			value: "#eb1616",
+			_dark: "#f98d8d"
+		},
+		positive: {
+			value: "#188841",
+			_dark: "#4ade80"
+		},
+		warning: {
+			value: "#c55405",
+			_dark: "#fb923c"
+		},
+		primary: {
+			value: "#fff",
+			_dark: "#09090b"
+		},
+		"elevation-1": {
+			value: "#fff",
+			_dark: "#18181b"
+		},
+		"elevation-2": {
+			value: "#fff",
+			_dark: "#27272a"
+		},
+		"elevation-3": {
+			value: "#fff",
+			_dark: "#3f3f46"
+		},
+		secondary: {
+			value: "#f4f4f5",
+			_dark: "#27272a"
+		},
+		tertiary: {
+			value: "#fafafa",
+			_dark: "#18181b"
+		},
+		inverse: {
+			value: "#18181b",
+			_dark: "#fafafa"
+		},
+		"brand-wash": {
+			value: "#eff6ff",
+			_dark: "#172554"
+		},
+		"accent-wash": {
+			value: "#fff1f2",
+			_dark: "#4c0519"
+		},
+		"alert-wash": {
+			value: "#fef2f2",
+			_dark: "#450a0a"
+		},
+		"positive-wash": {
+			value: "#f0fdf4",
+			_dark: "#052e16"
+		},
+		"warning-wash": {
+			value: "#fff7ed",
+			_dark: "#431407"
+		},
+		overlay: {
+			value: "rgba(0,0,0,0.5)",
+			_dark: "rgba(0,0,0,0.7)"
+		}
 	},
-	{
-		properties: ["bg"],
-		tokens: [
-			{
-				name: "brand",
-				value: "#1e6ff5",
-				modifiers: { _dark: "#71affb" }
-			},
-			{
-				name: "surface",
-				value: "#fafafa",
-				modifiers: { _dark: "#09090b" }
-			},
-			{
-				name: "accent",
-				value: "#e11d48",
-				modifiers: { _dark: "#fc8a9a" }
-			},
-			{
-				name: "alert",
-				value: "#eb1616",
-				modifiers: { _dark: "#f98d8d" }
-			},
-			{
-				name: "positive",
-				value: "#188841",
-				modifiers: { _dark: "#4ade80" }
-			},
-			{
-				name: "warning",
-				value: "#c55405",
-				modifiers: { _dark: "#fb923c" }
-			},
-			{
-				name: "primary",
-				value: "#fff",
-				modifiers: { _dark: "#09090b" }
-			},
-			{
-				name: "elevation-1",
-				value: "#fff",
-				modifiers: { _dark: "#18181b" }
-			},
-			{
-				name: "elevation-2",
-				value: "#fff",
-				modifiers: { _dark: "#27272a" }
-			},
-			{
-				name: "elevation-3",
-				value: "#fff",
-				modifiers: { _dark: "#3f3f46" }
-			},
-			{
-				name: "secondary",
-				value: "#f4f4f5",
-				modifiers: { _dark: "#27272a" }
-			},
-			{
-				name: "tertiary",
-				value: "#fafafa",
-				modifiers: { _dark: "#18181b" }
-			},
-			{
-				name: "inverse",
-				value: "#18181b",
-				modifiers: { _dark: "#fafafa" }
-			},
-			{
-				name: "brand-wash",
-				value: "#eff6ff",
-				modifiers: { _dark: "#172554" }
-			},
-			{
-				name: "accent-wash",
-				value: "#fff1f2",
-				modifiers: { _dark: "#4c0519" }
-			},
-			{
-				name: "alert-wash",
-				value: "#fef2f2",
-				modifiers: { _dark: "#450a0a" }
-			},
-			{
-				name: "positive-wash",
-				value: "#f0fdf4",
-				modifiers: { _dark: "#052e16" }
-			},
-			{
-				name: "warning-wash",
-				value: "#fff7ed",
-				modifiers: { _dark: "#431407" }
-			},
-			{
-				name: "overlay",
-				value: "rgba(0,0,0,0.5)",
-				modifiers: { _dark: "rgba(0,0,0,0.7)" }
-			}
-		]
+	borderColor: {
+		brand: {
+			value: "#1e6ff5",
+			_dark: "#71affb"
+		},
+		surface: {
+			value: "#fafafa",
+			_dark: "#09090b"
+		},
+		accent: {
+			value: "#e11d48",
+			_dark: "#fc8a9a"
+		},
+		alert: {
+			value: "#eb1616",
+			_dark: "#f98d8d"
+		},
+		positive: {
+			value: "#188841",
+			_dark: "#4ade80"
+		},
+		warning: {
+			value: "#c55405",
+			_dark: "#fb923c"
+		},
+		primary: {
+			value: "#fff",
+			_dark: "#09090b"
+		},
+		secondary: {
+			value: "#f4f4f5",
+			_dark: "#27272a"
+		},
+		tertiary: {
+			value: "#fafafa",
+			_dark: "#18181b"
+		},
+		inverse: {
+			value: "#18181b",
+			_dark: "#fafafa"
+		},
+		"brand-wash": {
+			value: "#eff6ff",
+			_dark: "#172554"
+		},
+		"accent-wash": {
+			value: "#fff1f2",
+			_dark: "#4c0519"
+		},
+		"alert-wash": {
+			value: "#fef2f2",
+			_dark: "#450a0a"
+		},
+		"positive-wash": {
+			value: "#f0fdf4",
+			_dark: "#052e16"
+		},
+		"warning-wash": {
+			value: "#fff7ed",
+			_dark: "#431407"
+		}
 	},
-	{
-		properties: [
-			"borderColor",
-			"borderYColor",
-			"borderXColor",
-			"borderStartColor",
-			"borderLeftColor",
-			"borderEndColor",
-			"borderRightColor",
-			"borderTopColor",
-			"borderBottomColor"
-		],
-		tokens: [
-			{
-				name: "brand",
-				value: "#1e6ff5",
-				modifiers: { _dark: "#71affb" }
-			},
-			{
-				name: "surface",
-				value: "#fafafa",
-				modifiers: { _dark: "#09090b" }
-			},
-			{
-				name: "accent",
-				value: "#e11d48",
-				modifiers: { _dark: "#fc8a9a" }
-			},
-			{
-				name: "alert",
-				value: "#eb1616",
-				modifiers: { _dark: "#f98d8d" }
-			},
-			{
-				name: "positive",
-				value: "#188841",
-				modifiers: { _dark: "#4ade80" }
-			},
-			{
-				name: "warning",
-				value: "#c55405",
-				modifiers: { _dark: "#fb923c" }
-			},
-			{
-				name: "primary",
-				value: "#fff",
-				modifiers: { _dark: "#09090b" }
-			},
-			{
-				name: "secondary",
-				value: "#f4f4f5",
-				modifiers: { _dark: "#27272a" }
-			},
-			{
-				name: "tertiary",
-				value: "#fafafa",
-				modifiers: { _dark: "#18181b" }
-			},
-			{
-				name: "inverse",
-				value: "#18181b",
-				modifiers: { _dark: "#fafafa" }
-			},
-			{
-				name: "brand-wash",
-				value: "#eff6ff",
-				modifiers: { _dark: "#172554" }
-			},
-			{
-				name: "accent-wash",
-				value: "#fff1f2",
-				modifiers: { _dark: "#4c0519" }
-			},
-			{
-				name: "alert-wash",
-				value: "#fef2f2",
-				modifiers: { _dark: "#450a0a" }
-			},
-			{
-				name: "positive-wash",
-				value: "#f0fdf4",
-				modifiers: { _dark: "#052e16" }
-			},
-			{
-				name: "warning-wash",
-				value: "#fff7ed",
-				modifiers: { _dark: "#431407" }
-			}
-		]
+	borderWidth: {
+		none: { value: "0px" },
+		thin: { value: "1px" },
+		medium: { value: "2px" },
+		thick: { value: "4px" }
 	},
-	{
-		properties: [
-			"borderWidth",
-			"borderYWidth",
-			"borderXWidth",
-			"borderStartWidth",
-			"borderLeftWidth",
-			"borderEndWidth",
-			"borderRightWidth",
-			"borderTopWidth",
-			"borderBottomWidth"
-		],
-		tokens: [
-			{
-				name: "none",
-				value: "0px"
-			},
-			{
-				name: "thin",
-				value: "1px"
-			},
-			{
-				name: "medium",
-				value: "2px"
-			},
-			{
-				name: "thick",
-				value: "4px"
-			}
-		]
+	outlineWidth: {
+		0: { value: "0px" },
+		1: { value: "1px" },
+		2: { value: "2px" },
+		4: { value: "4px" },
+		8: { value: "8px" }
 	},
-	{
-		properties: ["outlineWidth"],
-		tokens: [
-			{
-				name: "0",
-				value: "0px"
-			},
-			{
-				name: "1",
-				value: "1px"
-			},
-			{
-				name: "2",
-				value: "2px"
-			},
-			{
-				name: "4",
-				value: "4px"
-			},
-			{
-				name: "8",
-				value: "8px"
-			}
-		]
+	outlineOffset: {
+		0: { value: "0px" },
+		1: { value: "1px" },
+		2: { value: "2px" },
+		4: { value: "4px" },
+		8: { value: "8px" }
 	},
-	{
-		properties: ["outlineOffset"],
-		tokens: [
-			{
-				name: "0",
-				value: "0px"
-			},
-			{
-				name: "1",
-				value: "1px"
-			},
-			{
-				name: "2",
-				value: "2px"
-			},
-			{
-				name: "4",
-				value: "4px"
-			},
-			{
-				name: "8",
-				value: "8px"
-			}
-		]
+	divideWidth: {
+		0: { value: "0px" },
+		2: { value: "2px" },
+		4: { value: "4px" },
+		8: { value: "8px" },
+		reverse: { value: "reverse" }
 	},
-	{
-		properties: ["divideWidth"],
-		tokens: [
-			{
-				name: "0",
-				value: "0px"
-			},
-			{
-				name: "2",
-				value: "2px"
-			},
-			{
-				name: "4",
-				value: "4px"
-			},
-			{
-				name: "8",
-				value: "8px"
-			},
-			{
-				name: "reverse",
-				value: "reverse"
-			}
-		]
+	ringWidth: {
+		0: { value: "0px" },
+		1: { value: "1px" },
+		2: { value: "2px" },
+		4: { value: "4px" },
+		8: { value: "8px" },
+		inset: { value: "inset" }
 	},
-	{
-		properties: ["ringWidth"],
-		tokens: [
-			{
-				name: "0",
-				value: "0px"
-			},
-			{
-				name: "1",
-				value: "1px"
-			},
-			{
-				name: "2",
-				value: "2px"
-			},
-			{
-				name: "4",
-				value: "4px"
-			},
-			{
-				name: "8",
-				value: "8px"
-			},
-			{
-				name: "inset",
-				value: "inset"
-			}
-		]
+	ringOffsetWidth: {
+		0: { value: "0px" },
+		1: { value: "1px" },
+		2: { value: "2px" },
+		4: { value: "4px" },
+		8: { value: "8px" }
 	},
-	{
-		properties: ["ringOffsetWidth"],
-		tokens: [
-			{
-				name: "0",
-				value: "0px"
-			},
-			{
-				name: "1",
-				value: "1px"
-			},
-			{
-				name: "2",
-				value: "2px"
-			},
-			{
-				name: "4",
-				value: "4px"
-			},
-			{
-				name: "8",
-				value: "8px"
-			}
-		]
+	fontWeight: {
+		thin: { value: "100" },
+		extralight: { value: "200" },
+		light: { value: "300" },
+		normal: { value: "400" },
+		medium: { value: "500" },
+		semibold: { value: "600" },
+		bold: { value: "700" },
+		extrabold: { value: "800" },
+		black: { value: "900" }
 	},
-	{
-		properties: ["fontWeight"],
-		tokens: [
-			{
-				name: "thin",
-				value: "100"
-			},
-			{
-				name: "extralight",
-				value: "200"
-			},
-			{
-				name: "light",
-				value: "300"
-			},
-			{
-				name: "normal",
-				value: "400"
-			},
-			{
-				name: "medium",
-				value: "500"
-			},
-			{
-				name: "semibold",
-				value: "600"
-			},
-			{
-				name: "bold",
-				value: "700"
-			},
-			{
-				name: "extrabold",
-				value: "800"
-			},
-			{
-				name: "black",
-				value: "900"
-			}
-		]
+	lineHeight: {
+		none: { value: "1" },
+		tight: { value: "1.25" },
+		normal: { value: "1.5" },
+		relaxed: { value: "1.75" }
 	},
-	{
-		properties: ["lineHeight"],
-		tokens: [
-			{
-				name: "none",
-				value: "1"
-			},
-			{
-				name: "tight",
-				value: "1.25"
-			},
-			{
-				name: "normal",
-				value: "1.5"
-			},
-			{
-				name: "relaxed",
-				value: "1.75"
-			}
-		]
+	letterSpacing: {
+		tighter: { value: "-0.05em" },
+		tight: { value: "-0.025em" },
+		normal: { value: "0em" },
+		wide: { value: "0.025em" },
+		wider: { value: "0.05em" },
+		widest: { value: "0.1em" }
 	},
-	{
-		properties: ["letterSpacing"],
-		tokens: [
-			{
-				name: "tighter",
-				value: "-0.05em"
-			},
-			{
-				name: "tight",
-				value: "-0.025em"
-			},
-			{
-				name: "normal",
-				value: "0em"
-			},
-			{
-				name: "wide",
-				value: "0.025em"
-			},
-			{
-				name: "wider",
-				value: "0.05em"
-			},
-			{
-				name: "widest",
-				value: "0.1em"
-			}
-		]
+	spacing: {
+		px: { value: "1px" },
+		0: { value: "0px" },
+		.5: { value: "0.125rem" },
+		1: { value: "0.25rem" },
+		1.5: { value: "0.375rem" },
+		2: { value: "0.5rem" },
+		2.5: { value: "0.625rem" },
+		3: { value: "0.75rem" },
+		3.5: { value: "0.875rem" },
+		4: { value: "1rem" },
+		5: { value: "1.25rem" },
+		6: { value: "1.5rem" },
+		7: { value: "1.75rem" },
+		8: { value: "2rem" },
+		9: { value: "2.25rem" },
+		10: { value: "2.5rem" },
+		11: { value: "2.75rem" },
+		12: { value: "3rem" },
+		14: { value: "3.5rem" },
+		16: { value: "4rem" },
+		20: { value: "5rem" },
+		24: { value: "6rem" },
+		28: { value: "7rem" },
+		32: { value: "8rem" },
+		36: { value: "9rem" },
+		40: { value: "10rem" },
+		44: { value: "11rem" },
+		48: { value: "12rem" },
+		52: { value: "13rem" },
+		56: { value: "14rem" },
+		60: { value: "15rem" },
+		64: { value: "16rem" },
+		72: { value: "18rem" },
+		80: { value: "20rem" },
+		96: { value: "24rem" }
 	},
-	{
-		properties: [
-			"spacing",
-			"spacingX",
-			"spacingY",
-			"spacingTop",
-			"spacingBottom",
-			"spacingLeft",
-			"spacingRight",
-			"spacingStart",
-			"spacingEnd",
-			"width",
-			"minWidth",
-			"maxWidth",
-			"height",
-			"minHeight",
-			"maxHeight",
-			"gap",
-			"gapX",
-			"gapY",
-			"offset",
-			"offsetX",
-			"offsetY",
-			"offsetTop",
-			"offsetBottom",
-			"offsetLeft",
-			"offsetRight",
-			"offsetStart",
-			"offsetEnd",
-			"margin",
-			"marginX",
-			"marginY",
-			"marginTop",
-			"marginBottom",
-			"marginLeft",
-			"marginRight",
-			"marginStart",
-			"marginEnd",
-			"inset",
-			"top",
-			"right",
-			"bottom",
-			"left",
-			"insetX",
-			"insetY",
-			"indent",
-			"scrollSnapGap",
-			"scrollSnapGapTop",
-			"scrollSnapGapBottom",
-			"scrollSnapGapStart",
-			"scrollSnapGapEnd",
-			"scrollSnapGapX",
-			"scrollSnapGapY",
-			"scrollSnapSpacing",
-			"scrollSnapSpacingTop",
-			"scrollSnapSpacingBottom",
-			"scrollSnapSpacingStart",
-			"scrollSnapSpacingEnd",
-			"scrollSnapSpacingX",
-			"scrollSnapSpacingY",
-			"tableBorderSpacing",
-			"tableBorderSpacingX",
-			"tableBorderSpacingY"
-		],
-		tokens: [
-			{
-				name: "px",
-				value: "1px"
-			},
-			{
-				name: "0",
-				value: "0px"
-			},
-			{
-				name: "0.5",
-				value: "0.125rem"
-			},
-			{
-				name: "1",
-				value: "0.25rem"
-			},
-			{
-				name: "1.5",
-				value: "0.375rem"
-			},
-			{
-				name: "2",
-				value: "0.5rem"
-			},
-			{
-				name: "2.5",
-				value: "0.625rem"
-			},
-			{
-				name: "3",
-				value: "0.75rem"
-			},
-			{
-				name: "3.5",
-				value: "0.875rem"
-			},
-			{
-				name: "4",
-				value: "1rem"
-			},
-			{
-				name: "5",
-				value: "1.25rem"
-			},
-			{
-				name: "6",
-				value: "1.5rem"
-			},
-			{
-				name: "7",
-				value: "1.75rem"
-			},
-			{
-				name: "8",
-				value: "2rem"
-			},
-			{
-				name: "9",
-				value: "2.25rem"
-			},
-			{
-				name: "10",
-				value: "2.5rem"
-			},
-			{
-				name: "11",
-				value: "2.75rem"
-			},
-			{
-				name: "12",
-				value: "3rem"
-			},
-			{
-				name: "14",
-				value: "3.5rem"
-			},
-			{
-				name: "16",
-				value: "4rem"
-			},
-			{
-				name: "20",
-				value: "5rem"
-			},
-			{
-				name: "24",
-				value: "6rem"
-			},
-			{
-				name: "28",
-				value: "7rem"
-			},
-			{
-				name: "32",
-				value: "8rem"
-			},
-			{
-				name: "36",
-				value: "9rem"
-			},
-			{
-				name: "40",
-				value: "10rem"
-			},
-			{
-				name: "44",
-				value: "11rem"
-			},
-			{
-				name: "48",
-				value: "12rem"
-			},
-			{
-				name: "52",
-				value: "13rem"
-			},
-			{
-				name: "56",
-				value: "14rem"
-			},
-			{
-				name: "60",
-				value: "15rem"
-			},
-			{
-				name: "64",
-				value: "16rem"
-			},
-			{
-				name: "72",
-				value: "18rem"
-			},
-			{
-				name: "80",
-				value: "20rem"
-			},
-			{
-				name: "96",
-				value: "24rem"
-			}
-		]
+	position: {
+		auto: { value: "auto" },
+		full: { value: "100%" },
+		"1/2": { value: "50%" },
+		"1/3": { value: "33.333333%" },
+		"2/3": { value: "66.666667%" },
+		"1/4": { value: "25%" },
+		"2/4": { value: "50%" },
+		"3/4": { value: "75%" }
 	},
-	{
-		cssPrefix: "position",
-		properties: [
-			"inset",
-			"top",
-			"right",
-			"bottom",
-			"left",
-			"insetX",
-			"insetY"
-		],
-		tokens: [
-			{
-				name: "auto",
-				value: "auto"
-			},
-			{
-				name: "full",
-				value: "100%"
-			},
-			{
-				name: "1/2",
-				value: "50%"
-			},
-			{
-				name: "1/3",
-				value: "33.333333%"
-			},
-			{
-				name: "2/3",
-				value: "66.666667%"
-			},
-			{
-				name: "1/4",
-				value: "25%"
-			},
-			{
-				name: "2/4",
-				value: "50%"
-			},
-			{
-				name: "3/4",
-				value: "75%"
-			}
-		]
+	aspectRatio: {
+		square: { value: "1 / 1" },
+		landscape: { value: "4 / 3" },
+		portrait: { value: "3 / 4" },
+		widescreen: { value: "16 / 9" },
+		ultrawide: { value: "21 / 9" },
+		golden: { value: "1.618 / 1" }
 	},
-	{
-		properties: ["aspectRatio"],
-		tokens: [
-			{
-				name: "square",
-				value: "1 / 1"
-			},
-			{
-				name: "landscape",
-				value: "4 / 3"
-			},
-			{
-				name: "portrait",
-				value: "3 / 4"
-			},
-			{
-				name: "widescreen",
-				value: "16 / 9"
-			},
-			{
-				name: "ultrawide",
-				value: "21 / 9"
-			},
-			{
-				name: "golden",
-				value: "1.618 / 1"
-			}
-		]
+	flex: {
+		1: { value: "1 1 0%" },
+		auto: { value: "1 1 auto" },
+		initial: { value: "0 1 auto" },
+		none: { value: "none" }
 	},
-	{
-		properties: ["flex"],
-		tokens: [
-			{
-				name: "1",
-				value: "1 1 0%"
-			},
-			{
-				name: "auto",
-				value: "1 1 auto"
-			},
-			{
-				name: "initial",
-				value: "0 1 auto"
-			},
-			{
-				name: "none",
-				value: "none"
-			}
-		]
+	flexGrow: {
+		0: { value: "0" },
+		1: { value: "1" }
 	},
-	{
-		properties: ["flexGrow"],
-		tokens: [{
-			name: "0",
-			value: "0"
-		}, {
-			name: "1",
-			value: "1"
-		}]
-	},
-	{
-		properties: ["flexShrink"],
-		tokens: [{
-			name: "0",
-			value: "0"
-		}]
-	},
-	{
-		properties: [
-			"opacity",
-			"colorOpacity",
-			"bgOpacity",
-			"borderColorOpacity",
-			"borderYColorOpacity",
-			"borderXColorOpacity",
-			"borderStartColorOpacity",
-			"borderLeftColorOpacity",
-			"borderEndColorOpacity",
-			"borderRightColorOpacity",
-			"borderTopColorOpacity",
-			"borderBottomColorOpacity",
-			"divideColorOpacity",
-			"outlineColorOpacity",
-			"ringColorOpacity",
-			"ringOffsetColorOpacity",
-			"textDecorationColorOpacity",
-			"fillColorOpacity",
-			"strokeColorOpacity",
-			"shadowColorOpacity",
-			"caretColorOpacity"
-		],
-		tokens: [
-			{
-				name: "0",
-				value: "0"
-			},
-			{
-				name: "5",
-				value: "5"
-			},
-			{
-				name: "10",
-				value: "10"
-			},
-			{
-				name: "20",
-				value: "20"
-			},
-			{
-				name: "25",
-				value: "25"
-			},
-			{
-				name: "30",
-				value: "30"
-			},
-			{
-				name: "40",
-				value: "40"
-			},
-			{
-				name: "50",
-				value: "50"
-			},
-			{
-				name: "60",
-				value: "60"
-			},
-			{
-				name: "70",
-				value: "70"
-			},
-			{
-				name: "75",
-				value: "75"
-			},
-			{
-				name: "80",
-				value: "80"
-			},
-			{
-				name: "90",
-				value: "90"
-			},
-			{
-				name: "95",
-				value: "95"
-			},
-			{
-				name: "100",
-				value: "100"
-			}
-		]
+	flexShrink: { 0: { value: "0" } },
+	opacity: {
+		0: { value: "0" },
+		5: { value: "5" },
+		10: { value: "10" },
+		20: { value: "20" },
+		25: { value: "25" },
+		30: { value: "30" },
+		40: { value: "40" },
+		50: { value: "50" },
+		60: { value: "60" },
+		70: { value: "70" },
+		75: { value: "75" },
+		80: { value: "80" },
+		90: { value: "90" },
+		95: { value: "95" },
+		100: { value: "100" }
 	},
-	{
-		properties: [
-			"borderRadius",
-			"borderRadiusTop",
-			"borderRadiusBottom",
-			"borderRadiusStart",
-			"borderRadiusEnd",
-			"borderRadiusTopStart",
-			"borderRadiusTopEnd",
-			"borderRadiusBottomStart",
-			"borderRadiusBottomEnd"
-		],
-		tokens: [
-			{
-				name: "none",
-				value: "0px"
-			},
-			{
-				name: "xs",
-				value: "2px"
-			},
-			{
-				name: "sm",
-				value: "4px"
-			},
-			{
-				name: "md",
-				value: "6px"
-			},
-			{
-				name: "lg",
-				value: "16px"
-			},
-			{
-				name: "xl",
-				value: "32px"
-			},
-			{
-				name: "full",
-				value: "1e5px"
-			}
-		]
+	radius: {
+		none: { value: "0px" },
+		xs: { value: "2px" },
+		sm: { value: "4px" },
+		md: { value: "6px" },
+		lg: { value: "16px" },
+		xl: { value: "32px" },
+		full: { value: "1e5px" }
 	},
-	{
-		properties: ["animation"],
-		tokens: [
-			{
-				name: "none",
-				value: "none"
-			},
-			{
-				name: "spin",
-				value: "spin 1s linear infinite"
-			},
-			{
-				name: "ping",
-				value: "ping 1s cubic-bezier(0, 0, 0.2, 1) infinite"
-			}
-		]
+	animation: {
+		none: { value: "none" },
+		spin: { value: "spin 1s linear infinite" },
+		ping: { value: "ping 1s cubic-bezier(0, 0, 0.2, 1) infinite" }
 	},
-	{
-		properties: ["shadow"],
-		tokens: [
-			{
-				name: "2xs",
-				value: "0 1px rgb(0 0 0 / 0.05)"
-			},
-			{
-				name: "xs",
-				value: "0 1px 2px 0 rgb(0 0 0 / 0.05)"
-			},
-			{
-				name: "sm",
-				value: "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)"
-			},
-			{
-				name: "md",
-				value: "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)"
-			},
-			{
-				name: "lg",
-				value: "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)"
-			},
-			{
-				name: "xl",
-				value: "0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)"
-			},
-			{
-				name: "2xl",
-				value: "0 25px 50px -12px rgb(0 0 0 / 0.25)"
-			},
-			{
-				name: "inner",
-				value: "inset 0 2px 4px 0 rgb(0 0 0 / 0.05)"
-			},
-			{
-				name: "none",
-				value: "none"
-			}
-		]
+	shadow: {
+		"2xs": { value: "0 1px rgb(0 0 0 / 0.05)" },
+		xs: { value: "0 1px 2px 0 rgb(0 0 0 / 0.05)" },
+		sm: { value: "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)" },
+		md: { value: "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)" },
+		lg: { value: "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)" },
+		xl: { value: "0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)" },
+		"2xl": { value: "0 25px 50px -12px rgb(0 0 0 / 0.25)" },
+		inner: { value: "inset 0 2px 4px 0 rgb(0 0 0 / 0.05)" },
+		none: { value: "none" }
 	},
-	{
-		cssPrefix: "blur",
-		properties: ["blur", "backdropBlur"],
-		tokens: [
-			{
-				name: "none",
-				value: "blur(0)"
-			},
-			{
-				name: "sm",
-				value: "blur(4px)"
-			},
-			{
-				name: "md",
-				value: "blur(12px)"
-			},
-			{
-				name: "lg",
-				value: "blur(16px)"
-			},
-			{
-				name: "xl",
-				value: "blur(24px)"
-			},
-			{
-				name: "2xl",
-				value: "blur(40px)"
-			},
-			{
-				name: "3xl",
-				value: "blur(64px)"
-			}
-		]
+	blur: {
+		none: { value: "blur(0)" },
+		sm: { value: "blur(4px)" },
+		md: { value: "blur(12px)" },
+		lg: { value: "blur(16px)" },
+		xl: { value: "blur(24px)" },
+		"2xl": { value: "blur(40px)" },
+		"3xl": { value: "blur(64px)" }
 	},
-	{
-		properties: ["textShadow"],
-		tokens: [
-			{
-				name: "2xs",
-				value: "0 1px 0 rgb(0 0 0 / 0.15)"
-			},
-			{
-				name: "xs",
-				value: "0 1px 1px rgb(0 0 0 / 0.2)"
-			},
-			{
-				name: "sm",
-				value: "0 1px 2px rgb(0 0 0 / 0.25)"
-			},
-			{
-				name: "md",
-				value: "0 2px 4px rgb(0 0 0 / 0.25)"
-			},
-			{
-				name: "lg",
-				value: "0 4px 8px rgb(0 0 0 / 0.25)"
-			},
-			{
-				name: "none",
-				value: "none"
-			}
-		]
+	textShadow: {
+		"2xs": { value: "0 1px 0 rgb(0 0 0 / 0.15)" },
+		xs: { value: "0 1px 1px rgb(0 0 0 / 0.2)" },
+		sm: { value: "0 1px 2px rgb(0 0 0 / 0.25)" },
+		md: { value: "0 2px 4px rgb(0 0 0 / 0.25)" },
+		lg: { value: "0 4px 8px rgb(0 0 0 / 0.25)" },
+		none: { value: "none" }
 	},
-	{
-		properties: ["zIndex"],
-		tokens: [
-			{
-				name: "auto",
-				value: "auto"
-			},
-			{
-				name: "0",
-				value: "0"
-			},
-			{
-				name: "10",
-				value: "10"
-			},
-			{
-				name: "20",
-				value: "20"
-			},
-			{
-				name: "30",
-				value: "30"
-			},
-			{
-				name: "40",
-				value: "40"
-			},
-			{
-				name: "50",
-				value: "50"
-			}
-		]
+	zIndex: {
+		auto: { value: "auto" },
+		0: { value: "0" },
+		10: { value: "10" },
+		20: { value: "20" },
+		30: { value: "30" },
+		40: { value: "40" },
+		50: { value: "50" }
 	},
-	{
-		cssPrefix: "size",
-		properties: [
-			"width",
-			"height",
-			"minWidth",
-			"minHeight",
-			"maxWidth",
-			"maxHeight"
-		],
-		tokens: [
-			{
-				name: "auto",
-				value: "auto"
-			},
-			{
-				name: "full",
-				value: "100%"
-			},
-			{
-				name: "min",
-				value: "min-content"
-			},
-			{
-				name: "max",
-				value: "max-content"
-			},
-			{
-				name: "fit",
-				value: "fit-content"
-			},
-			{
-				name: "1/2",
-				value: "50%"
-			},
-			{
-				name: "1/3",
-				value: "33.333333%"
-			},
-			{
-				name: "2/3",
-				value: "66.666667%"
-			},
-			{
-				name: "1/4",
-				value: "25%"
-			},
-			{
-				name: "2/4",
-				value: "50%"
-			},
-			{
-				name: "3/4",
-				value: "75%"
-			},
-			{
-				name: "1/5",
-				value: "20%"
-			},
-			{
-				name: "2/5",
-				value: "40%"
-			},
-			{
-				name: "3/5",
-				value: "60%"
-			},
-			{
-				name: "4/5",
-				value: "80%"
-			},
-			{
-				name: "1/6",
-				value: "16.666667%"
-			},
-			{
-				name: "2/6",
-				value: "33.333333%"
-			},
-			{
-				name: "3/6",
-				value: "50%"
-			},
-			{
-				name: "4/6",
-				value: "66.666667%"
-			},
-			{
-				name: "5/6",
-				value: "83.333333%"
-			}
-		]
+	size: {
+		auto: { value: "auto" },
+		full: { value: "100%" },
+		min: { value: "min-content" },
+		max: { value: "max-content" },
+		fit: { value: "fit-content" },
+		"1/2": { value: "50%" },
+		"1/3": { value: "33.333333%" },
+		"2/3": { value: "66.666667%" },
+		"1/4": { value: "25%" },
+		"2/4": { value: "50%" },
+		"3/4": { value: "75%" },
+		"1/5": { value: "20%" },
+		"2/5": { value: "40%" },
+		"3/5": { value: "60%" },
+		"4/5": { value: "80%" },
+		"1/6": { value: "16.666667%" },
+		"2/6": { value: "33.333333%" },
+		"3/6": { value: "50%" },
+		"4/6": { value: "66.666667%" },
+		"5/6": { value: "83.333333%" }
 	},
-	{
-		cssPrefix: "w",
-		properties: [
-			"width",
-			"minWidth",
-			"maxWidth"
-		],
-		tokens: [
-			{
-				name: "screen",
-				value: "100vw"
-			},
-			{
-				name: "svw",
-				value: "100svw"
-			},
-			{
-				name: "lvw",
-				value: "100lvw"
-			},
-			{
-				name: "dvw",
-				value: "100dvw"
-			}
-		]
+	w: {
+		screen: { value: "100vw" },
+		svw: { value: "100svw" },
+		lvw: { value: "100lvw" },
+		dvw: { value: "100dvw" }
 	},
-	{
-		cssPrefix: "h",
-		properties: [
-			"height",
-			"minHeight",
-			"maxHeight"
-		],
-		tokens: [
-			{
-				name: "screen",
-				value: "100vh"
-			},
-			{
-				name: "svh",
-				value: "100svh"
-			},
-			{
-				name: "lvh",
-				value: "100lvh"
-			},
-			{
-				name: "dvh",
-				value: "100dvh"
-			}
-		]
+	h: {
+		screen: { value: "100vh" },
+		svh: { value: "100svh" },
+		lvh: { value: "100lvh" },
+		dvh: { value: "100dvh" }
 	},
-	{
-		properties: ["rotate"],
-		tokens: [
-			{
-				name: "0",
-				value: "0deg"
-			},
-			{
-				name: "1",
-				value: "1deg"
-			},
-			{
-				name: "2",
-				value: "2deg"
-			},
-			{
-				name: "3",
-				value: "3deg"
-			},
-			{
-				name: "6",
-				value: "6deg"
-			},
-			{
-				name: "12",
-				value: "12deg"
-			},
-			{
-				name: "45",
-				value: "45deg"
-			},
-			{
-				name: "90",
-				value: "90deg"
-			},
-			{
-				name: "180",
-				value: "180deg"
-			}
-		]
+	rotate: {
+		0: { value: "0deg" },
+		1: { value: "1deg" },
+		2: { value: "2deg" },
+		3: { value: "3deg" },
+		6: { value: "6deg" },
+		12: { value: "12deg" },
+		45: { value: "45deg" },
+		90: { value: "90deg" },
+		180: { value: "180deg" }
+	},
+	scale: {
+		0: { value: "0" },
+		50: { value: ".5" },
+		75: { value: ".75" },
+		90: { value: ".9" },
+		95: { value: ".95" },
+		100: { value: "1" },
+		105: { value: "1.05" },
+		110: { value: "1.1" },
+		125: { value: "1.25" },
+		150: { value: "1.5" },
+		200: { value: "2" }
+	},
+	skew: {
+		0: { value: "0deg" },
+		1: { value: "1deg" },
+		2: { value: "2deg" },
+		3: { value: "3deg" },
+		6: { value: "6deg" },
+		12: { value: "12deg" }
+	},
+	translate: {
+		0: { value: "0px" },
+		.5: { value: "0.125rem" },
+		1: { value: "0.25rem" },
+		1.5: { value: "0.375rem" },
+		2: { value: "0.5rem" },
+		2.5: { value: "0.625rem" },
+		3: { value: "0.75rem" },
+		3.5: { value: "0.875rem" },
+		4: { value: "1rem" },
+		5: { value: "1.25rem" },
+		6: { value: "1.5rem" },
+		7: { value: "1.75rem" },
+		8: { value: "2rem" },
+		9: { value: "2.25rem" },
+		10: { value: "2.5rem" },
+		11: { value: "2.75rem" },
+		12: { value: "3rem" },
+		14: { value: "3.5rem" },
+		16: { value: "4rem" },
+		20: { value: "5rem" },
+		24: { value: "6rem" },
+		28: { value: "7rem" },
+		32: { value: "8rem" },
+		36: { value: "9rem" },
+		40: { value: "10rem" },
+		44: { value: "11rem" },
+		48: { value: "12rem" },
+		52: { value: "13rem" },
+		56: { value: "14rem" },
+		60: { value: "15rem" },
+		64: { value: "16rem" },
+		72: { value: "18rem" },
+		80: { value: "20rem" },
+		96: { value: "24rem" },
+		"1/2": { value: "50%" },
+		"1/3": { value: "33.333333%" },
+		"2/3": { value: "66.666667%" },
+		"1/4": { value: "25%" },
+		"3/4": { value: "75%" },
+		full: { value: "100%" }
+	},
+	strokeWidth: {
+		0: { value: "0px" },
+		1: { value: "1px" },
+		2: { value: "2px" }
+	},
+	fontFamily: {
+		sans: { value: "var(--uds-font-family-geist, ui-sans-serif, system-ui, sans-serif)" },
+		serif: { value: "Georgia, Times, Times New Roman, serif" },
+		mono: { value: "var(--uds-font-family-geist-mono, Menlo, Monaco, Courier New, monospace)" }
+	}
+}).defineUtilities({
+	color: {
+		className: "text",
+		values: "{color}"
+	},
+	bg: {
+		className: "bg",
+		values: ["{color}", "{bg}"]
+	},
+	borderColor: {
+		className: "border-color",
+		values: ["{color}", "{borderColor}"]
+	},
+	borderYColor: {
+		className: "border-y-color",
+		values: ["{color}", "{borderColor}"]
+	},
+	borderXColor: {
+		className: "border-x-color",
+		values: ["{color}", "{borderColor}"]
+	},
+	borderStartColor: {
+		className: "border-s-color",
+		values: ["{color}", "{borderColor}"]
+	},
+	borderLeftColor: {
+		className: "border-l-color",
+		values: ["{color}", "{borderColor}"]
+	},
+	borderEndColor: {
+		className: "border-e-color",
+		values: ["{color}", "{borderColor}"]
+	},
+	borderRightColor: {
+		className: "border-r-color",
+		values: ["{color}", "{borderColor}"]
+	},
+	borderTopColor: {
+		className: "border-t-color",
+		values: ["{color}", "{borderColor}"]
+	},
+	borderBottomColor: {
+		className: "border-b-color",
+		values: ["{color}", "{borderColor}"]
+	},
+	caretColor: {
+		className: "caret",
+		values: "{color}"
+	},
+	ringColor: {
+		className: "ring-color",
+		values: "{color}"
+	},
+	ringOffsetColor: {
+		className: "ring-offset-color",
+		values: "{color}"
+	},
+	textDecorationColor: {
+		className: "decoration",
+		values: "{color}"
+	},
+	fillColor: {
+		className: "fill",
+		values: "{color}"
+	},
+	strokeColor: {
+		className: "stroke",
+		values: "{color}"
+	},
+	shadowColor: {
+		className: "shadow-color",
+		values: "{color}"
+	},
+	borderWidth: {
+		className: "border-w",
+		values: "{borderWidth}"
+	},
+	borderYWidth: {
+		className: "border-y-w",
+		values: "{borderWidth}"
+	},
+	borderXWidth: {
+		className: "border-x-w",
+		values: "{borderWidth}"
+	},
+	borderStartWidth: {
+		className: "border-s-w",
+		values: "{borderWidth}"
+	},
+	borderLeftWidth: {
+		className: "border-l-w",
+		values: "{borderWidth}"
+	},
+	borderEndWidth: {
+		className: "border-e-w",
+		values: "{borderWidth}"
+	},
+	borderRightWidth: {
+		className: "border-r-w",
+		values: "{borderWidth}"
+	},
+	borderTopWidth: {
+		className: "border-t-w",
+		values: "{borderWidth}"
+	},
+	borderBottomWidth: {
+		className: "border-b-w",
+		values: "{borderWidth}"
+	},
+	outlineWidth: {
+		className: "outline-w",
+		values: "{outlineWidth}"
 	},
-	{
-		properties: [
-			"scale",
-			"scaleX",
-			"scaleY"
-		],
-		tokens: [
-			{
-				name: "0",
-				value: "0"
-			},
-			{
-				name: "50",
-				value: ".5"
-			},
-			{
-				name: "75",
-				value: ".75"
-			},
-			{
-				name: "90",
-				value: ".9"
-			},
-			{
-				name: "95",
-				value: ".95"
-			},
-			{
-				name: "100",
-				value: "1"
-			},
-			{
-				name: "105",
-				value: "1.05"
-			},
-			{
-				name: "110",
-				value: "1.1"
-			},
-			{
-				name: "125",
-				value: "1.25"
-			},
-			{
-				name: "150",
-				value: "1.5"
-			},
-			{
-				name: "200",
-				value: "2"
-			}
+	outlineOffset: {
+		className: "outline-offset",
+		values: "{outlineOffset}"
+	},
+	divideWidth: {
+		className: "divide",
+		values: "{divideWidth}"
+	},
+	ringWidth: {
+		className: "ring-w",
+		values: "{ringWidth}"
+	},
+	ringOffsetWidth: {
+		className: "ring-offset-w",
+		values: "{ringOffsetWidth}"
+	},
+	fontWeight: {
+		className: "font",
+		values: "{fontWeight}"
+	},
+	lineHeight: {
+		className: "leading",
+		values: "{lineHeight}"
+	},
+	letterSpacing: {
+		className: "tracking",
+		values: "{letterSpacing}"
+	},
+	spacing: {
+		className: "p",
+		values: "{spacing}"
+	},
+	spacingX: {
+		className: "px",
+		values: "{spacing}"
+	},
+	spacingY: {
+		className: "py",
+		values: "{spacing}"
+	},
+	spacingTop: {
+		className: "pt",
+		values: "{spacing}"
+	},
+	spacingBottom: {
+		className: "pb",
+		values: "{spacing}"
+	},
+	spacingLeft: {
+		className: "pl",
+		values: "{spacing}"
+	},
+	spacingRight: {
+		className: "pr",
+		values: "{spacing}"
+	},
+	spacingStart: {
+		className: "ps",
+		values: "{spacing}"
+	},
+	spacingEnd: {
+		className: "pe",
+		values: "{spacing}"
+	},
+	width: {
+		className: "w",
+		values: [
+			"{spacing}",
+			"{size}",
+			"{w}"
 		]
 	},
-	{
-		properties: ["skewX", "skewY"],
-		tokens: [
-			{
-				name: "0",
-				value: "0deg"
-			},
-			{
-				name: "1",
-				value: "1deg"
-			},
-			{
-				name: "2",
-				value: "2deg"
-			},
-			{
-				name: "3",
-				value: "3deg"
-			},
-			{
-				name: "6",
-				value: "6deg"
-			},
-			{
-				name: "12",
-				value: "12deg"
-			}
+	minWidth: {
+		className: "min-w",
+		values: [
+			"{spacing}",
+			"{size}",
+			"{w}"
 		]
 	},
-	{
-		cssPrefix: "translate",
-		properties: ["translateX", "translateY"],
-		tokens: [
-			{
-				name: "0",
-				value: "0px"
-			},
-			{
-				name: "0.5",
-				value: "0.125rem"
-			},
-			{
-				name: "1",
-				value: "0.25rem"
-			},
-			{
-				name: "1.5",
-				value: "0.375rem"
-			},
-			{
-				name: "2",
-				value: "0.5rem"
-			},
-			{
-				name: "2.5",
-				value: "0.625rem"
-			},
-			{
-				name: "3",
-				value: "0.75rem"
-			},
-			{
-				name: "3.5",
-				value: "0.875rem"
-			},
-			{
-				name: "4",
-				value: "1rem"
-			},
-			{
-				name: "5",
-				value: "1.25rem"
-			},
-			{
-				name: "6",
-				value: "1.5rem"
-			},
-			{
-				name: "7",
-				value: "1.75rem"
-			},
-			{
-				name: "8",
-				value: "2rem"
-			},
-			{
-				name: "9",
-				value: "2.25rem"
-			},
-			{
-				name: "10",
-				value: "2.5rem"
-			},
-			{
-				name: "11",
-				value: "2.75rem"
-			},
-			{
-				name: "12",
-				value: "3rem"
-			},
-			{
-				name: "14",
-				value: "3.5rem"
-			},
-			{
-				name: "16",
-				value: "4rem"
-			},
-			{
-				name: "20",
-				value: "5rem"
-			},
-			{
-				name: "24",
-				value: "6rem"
-			},
-			{
-				name: "28",
-				value: "7rem"
-			},
-			{
-				name: "32",
-				value: "8rem"
-			},
-			{
-				name: "36",
-				value: "9rem"
-			},
-			{
-				name: "40",
-				value: "10rem"
-			},
-			{
-				name: "44",
-				value: "11rem"
-			},
-			{
-				name: "48",
-				value: "12rem"
-			},
-			{
-				name: "52",
-				value: "13rem"
-			},
-			{
-				name: "56",
-				value: "14rem"
-			},
-			{
-				name: "60",
-				value: "15rem"
-			},
-			{
-				name: "64",
-				value: "16rem"
-			},
-			{
-				name: "72",
-				value: "18rem"
-			},
-			{
-				name: "80",
-				value: "20rem"
-			},
-			{
-				name: "96",
-				value: "24rem"
-			},
-			{
-				name: "1/2",
-				value: "50%"
-			},
-			{
-				name: "1/3",
-				value: "33.333333%"
-			},
-			{
-				name: "2/3",
-				value: "66.666667%"
-			},
-			{
-				name: "1/4",
-				value: "25%"
-			},
-			{
-				name: "3/4",
-				value: "75%"
-			},
-			{
-				name: "full",
-				value: "100%"
-			}
+	maxWidth: {
+		className: "max-w",
+		values: [
+			"{spacing}",
+			"{size}",
+			"{w}"
 		]
 	},
-	{
-		properties: ["strokeWidth"],
-		tokens: [
-			{
-				name: "0",
-				value: "0px"
-			},
-			{
-				name: "1",
-				value: "1px"
-			},
-			{
-				name: "2",
-				value: "2px"
-			}
+	height: {
+		className: "h",
+		values: [
+			"{spacing}",
+			"{size}",
+			"{h}"
 		]
 	},
-	{
-		properties: ["fontFamily"],
-		tokens: [
-			{
-				name: "sans",
-				value: "var(--uds-font-family-geist, ui-sans-serif, system-ui, sans-serif)"
-			},
-			{
-				name: "serif",
-				value: "Georgia, Times, Times New Roman, serif"
-			},
-			{
-				name: "mono",
-				value: "var(--uds-font-family-geist-mono, Menlo, Monaco, Courier New, monospace)"
-			}
+	minHeight: {
+		className: "min-h",
+		values: [
+			"{spacing}",
+			"{size}",
+			"{h}"
 		]
+	},
+	maxHeight: {
+		className: "max-h",
+		values: ["{size}", "{h}"]
+	},
+	gap: {
+		className: "gap",
+		values: "{spacing}"
+	},
+	gapX: {
+		className: "gap-x",
+		values: "{spacing}"
+	},
+	gapY: {
+		className: "gap-y",
+		values: "{spacing}"
+	},
+	offset: {
+		className: "offset",
+		values: "{spacing}"
+	},
+	offsetX: {
+		className: "offset-x",
+		values: "{spacing}"
+	},
+	offsetY: {
+		className: "offset-y",
+		values: "{spacing}"
+	},
+	offsetTop: {
+		className: "offset-t",
+		values: "{spacing}"
+	},
+	offsetBottom: {
+		className: "offset-b",
+		values: "{spacing}"
+	},
+	offsetLeft: {
+		className: "offset-l",
+		values: "{spacing}"
+	},
+	offsetRight: {
+		className: "offset-r",
+		values: "{spacing}"
+	},
+	offsetStart: {
+		className: "offset-s",
+		values: "{spacing}"
+	},
+	offsetEnd: {
+		className: "offset-e",
+		values: "{spacing}"
+	},
+	margin: {
+		className: "m",
+		values: "{spacing}"
+	},
+	marginX: {
+		className: "mx",
+		values: "{spacing}"
+	},
+	marginY: {
+		className: "my",
+		values: "{spacing}"
+	},
+	marginTop: {
+		className: "mt",
+		values: "{spacing}"
+	},
+	marginBottom: {
+		className: "mb",
+		values: "{spacing}"
+	},
+	marginLeft: {
+		className: "ml",
+		values: "{spacing}"
+	},
+	marginRight: {
+		className: "mr",
+		values: "{spacing}"
+	},
+	marginStart: {
+		className: "ms",
+		values: "{spacing}"
+	},
+	marginEnd: {
+		className: "me",
+		values: "{spacing}"
+	},
+	inset: {
+		className: "inset",
+		values: ["{spacing}", "{position}"]
+	},
+	top: {
+		className: "top",
+		values: ["{spacing}", "{position}"]
+	},
+	right: {
+		className: "right",
+		values: ["{spacing}", "{position}"]
+	},
+	bottom: {
+		className: "bottom",
+		values: ["{spacing}", "{position}"]
+	},
+	left: {
+		className: "left",
+		values: ["{spacing}", "{position}"]
+	},
+	insetX: {
+		className: "inset-x",
+		values: ["{spacing}", "{position}"]
+	},
+	insetY: {
+		className: "inset-y",
+		values: ["{spacing}", "{position}"]
+	},
+	indent: {
+		className: "indent",
+		values: "{spacing}"
+	},
+	scrollSnapGap: {
+		className: "snap-gap",
+		values: "{spacing}"
+	},
+	scrollSnapGapTop: {
+		className: "snap-gap-t",
+		values: "{spacing}"
+	},
+	scrollSnapGapBottom: {
+		className: "snap-gap-b",
+		values: "{spacing}"
+	},
+	scrollSnapGapStart: {
+		className: "snap-gap-s",
+		values: "{spacing}"
+	},
+	scrollSnapGapEnd: {
+		className: "snap-gap-e",
+		values: "{spacing}"
+	},
+	scrollSnapGapX: {
+		className: "snap-gap-x",
+		values: "{spacing}"
+	},
+	scrollSnapGapY: {
+		className: "snap-gap-y",
+		values: "{spacing}"
+	},
+	scrollSnapSpacing: {
+		className: "snap-p",
+		values: "{spacing}"
+	},
+	scrollSnapSpacingTop: {
+		className: "snap-pt",
+		values: "{spacing}"
+	},
+	scrollSnapSpacingBottom: {
+		className: "snap-pb",
+		values: "{spacing}"
+	},
+	scrollSnapSpacingStart: {
+		className: "snap-ps",
+		values: "{spacing}"
+	},
+	scrollSnapSpacingEnd: {
+		className: "snap-pe",
+		values: "{spacing}"
+	},
+	scrollSnapSpacingX: {
+		className: "snap-px",
+		values: "{spacing}"
+	},
+	scrollSnapSpacingY: {
+		className: "snap-py",
+		values: "{spacing}"
+	},
+	tableBorderSpacing: {
+		className: "table-spacing",
+		values: "{spacing}"
+	},
+	tableBorderSpacingX: {
+		className: "table-spacing-x",
+		values: "{spacing}"
+	},
+	tableBorderSpacingY: {
+		className: "table-spacing-y",
+		values: "{spacing}"
+	},
+	aspectRatio: {
+		className: "aspect",
+		values: "{aspectRatio}"
+	},
+	flex: {
+		className: "flex",
+		values: "{flex}"
+	},
+	flexGrow: {
+		className: "grow",
+		values: "{flexGrow}"
+	},
+	flexShrink: {
+		className: "shrink",
+		values: "{flexShrink}"
+	},
+	opacity: {
+		className: "opacity",
+		values: "{opacity}"
+	},
+	colorOpacity: {
+		className: "text-opacity",
+		values: "{opacity}"
+	},
+	bgOpacity: {
+		className: "bg-opacity",
+		values: "{opacity}"
+	},
+	borderColorOpacity: {
+		className: "border-opacity",
+		values: "{opacity}"
+	},
+	borderYColorOpacity: {
+		className: "border-y-opacity",
+		values: "{opacity}"
+	},
+	borderXColorOpacity: {
+		className: "border-x-opacity",
+		values: "{opacity}"
+	},
+	borderStartColorOpacity: {
+		className: "border-s-opacity",
+		values: "{opacity}"
+	},
+	borderLeftColorOpacity: {
+		className: "border-l-opacity",
+		values: "{opacity}"
+	},
+	borderEndColorOpacity: {
+		className: "border-e-opacity",
+		values: "{opacity}"
+	},
+	borderRightColorOpacity: {
+		className: "border-r-opacity",
+		values: "{opacity}"
+	},
+	borderTopColorOpacity: {
+		className: "border-t-opacity",
+		values: "{opacity}"
+	},
+	borderBottomColorOpacity: {
+		className: "border-b-opacity",
+		values: "{opacity}"
+	},
+	divideColorOpacity: {
+		className: "divide-opacity",
+		values: "{opacity}"
+	},
+	outlineColorOpacity: {
+		className: "outline-opacity",
+		values: "{opacity}"
+	},
+	ringColorOpacity: {
+		className: "ring-opacity",
+		values: "{opacity}"
+	},
+	ringOffsetColorOpacity: {
+		className: "ring-offset-opacity",
+		values: "{opacity}"
+	},
+	textDecorationColorOpacity: {
+		className: "decoration-opacity",
+		values: "{opacity}"
+	},
+	fillColorOpacity: {
+		className: "fill-opacity",
+		values: "{opacity}"
+	},
+	strokeColorOpacity: {
+		className: "stroke-opacity",
+		values: "{opacity}"
+	},
+	shadowColorOpacity: {
+		className: "shadow-opacity",
+		values: "{opacity}"
+	},
+	caretColorOpacity: {
+		className: "caret-opacity",
+		values: "{opacity}"
+	},
+	borderRadius: {
+		className: "rounded",
+		values: "{radius}"
+	},
+	borderRadiusTop: {
+		className: "rounded-t",
+		values: "{radius}"
+	},
+	borderRadiusBottom: {
+		className: "rounded-b",
+		values: "{radius}"
+	},
+	borderRadiusStart: {
+		className: "rounded-s",
+		values: "{radius}"
+	},
+	borderRadiusEnd: {
+		className: "rounded-e",
+		values: "{radius}"
+	},
+	borderRadiusTopStart: {
+		className: "rounded-ss",
+		values: "{radius}"
+	},
+	borderRadiusTopEnd: {
+		className: "rounded-se",
+		values: "{radius}"
+	},
+	borderRadiusBottomStart: {
+		className: "rounded-es",
+		values: "{radius}"
+	},
+	borderRadiusBottomEnd: {
+		className: "rounded-ee",
+		values: "{radius}"
+	},
+	animation: {
+		className: "animation",
+		values: "{animation}"
+	},
+	shadow: {
+		className: "shadow",
+		values: "{shadow}"
+	},
+	blur: {
+		className: "blur",
+		values: "{blur}"
+	},
+	backdropBlur: {
+		className: "backdrop-blur",
+		values: "{blur}"
+	},
+	textShadow: {
+		className: "text-shadow",
+		values: "{textShadow}"
+	},
+	zIndex: {
+		className: "z",
+		values: "{zIndex}"
+	},
+	rotate: {
+		className: "rotate",
+		values: "{rotate}"
+	},
+	scale: {
+		className: "scale",
+		values: "{scale}"
+	},
+	scaleX: {
+		className: "scale-x",
+		values: "{scale}"
+	},
+	scaleY: {
+		className: "scale-y",
+		values: "{scale}"
+	},
+	skewX: {
+		className: "skew-x",
+		values: "{skew}"
+	},
+	skewY: {
+		className: "skew-y",
+		values: "{skew}"
+	},
+	translateX: {
+		className: "translate-x",
+		values: "{translate}"
+	},
+	translateY: {
+		className: "translate-y",
+		values: "{translate}"
+	},
+	strokeWidth: {
+		className: "stroke-w",
+		values: "{strokeWidth}"
+	},
+	fontFamily: {
+		className: "font-family",
+		values: "{fontFamily}"
 	}
-]).defineArbitraryTokens([{
+}).defineArbitraryTokens([{
 	properties: [
 		"color",
 		"bg",