@yahoo/uds-v5-wip 1.36.0 → 1.36.1

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

@@ -148,16 +148,7 @@ function applyPresetToData(base, preset, strategy) {
 	};
 	const mergedExamples = base.examples || preset.examples ? mergeRecordByKey(base.examples ?? {}, preset.examples ?? {}, s.examples) : void 0;
 	const mergedPrinciples = base.designPrinciples || preset.designPrinciples ? [...base.designPrinciples ?? [], ...preset.designPrinciples ?? []] : void 0;
-	const mergedArbitraryTokens = base.arbitraryTokens || preset.arbitraryTokens ? [...base.arbitraryTokens ?? [], ...preset.arbitraryTokens ?? []] : void 0;
 	const mergedVars = base.vars || preset.vars ? mergeRecordByKey(base.vars ?? {}, preset.vars ?? {}, "merge") : void 0;
-	const mergedClassNames = base.classNames || preset.classNames ? {
-		...base.classNames,
-		...preset.classNames
-	} : void 0;
-	const mergedScopes = base.scopes || preset.scopes ? {
-		...base.scopes,
-		...preset.scopes
-	} : void 0;
 	const merged = {
 		...base,
 		modes: mergeModes(base.modes, preset.modes, s.modes),
@@ -171,12 +162,9 @@ function applyPresetToData(base, preset, strategy) {
 		components: mergeRecordByKey(base.components, preset.components, s.components),
 		globalStyles: mergeRecordByKey(base.globalStyles, preset.globalStyles, s.globalStyles),
 		remotion: mergeRemotionConfig(base.remotion, preset.remotion),
-		arbitraryTokens: mergedArbitraryTokens,
 		examples: mergedExamples,
 		designPrinciples: mergedPrinciples,
 		vars: mergedVars,
-		classNames: mergedClassNames,
-		scopes: mergedScopes,
 		presetTokenNames: mergePresetTokenNames(base, preset)
 	};
 	validateComponentVariants(merged.components);

package/dist/config/dist/propertyAcceptedTypes.js

@@ -57,7 +57,10 @@ const CSS_WIDE_KEYWORDS = new Set([
 	"initial",
 	"unset",
 	"revert",
-	"revert-layer"
+	"revert-layer",
+	"transparent",
+	"currentColor",
+	"currentcolor"
 ]);
 const LENGTH_PCT_PROPS = [
 	"gap",
@@ -184,11 +187,21 @@ const PROPERTY_ACCEPTED_TYPES = new Map([
 	] }],
 	["font-family", { types: ["font-family"] }],
 	["transition-timing-function", { types: ["easing-function"] }],
-	["box-shadow", { types: ["shadow"] }],
-	["text-shadow", { types: ["shadow"] }],
+	["box-shadow", {
+		types: ["shadow"],
+		literals: ["none"]
+	}],
+	["text-shadow", {
+		types: ["shadow"],
+		literals: ["none"]
+	}],
 	["list-style-image", { types: ["url", "image"] }],
 	["aspect-ratio", { types: ["ratio", "number"] }],
-	["opacity", { types: ["number", "percentage"] }]
+	["opacity", { types: ["number", "percentage"] }],
+	["z-index", {
+		types: ["integer", "number"],
+		literals: ["auto"]
+	}]
 ]);
 /**
 * Whether a token with the given detected value type AND raw string value

package/dist/config/dist/propertyGroups.d.ts

@@ -1,11 +1 @@
-import { ConfigurableProp } from "@uds/types";
-
-//#region ../config/dist/propertyGroups.d.ts
-//#region src/propertyGroups.d.ts
-type PropertyGroupId = 'textColor' | 'background' | 'borderColor' | 'outlineColor' | 'ringColor' | 'divideColor' | 'shadowColor' | 'svgFill' | 'svgStroke' | 'caretColor' | 'textDecorationColor' | 'opacity' | 'colorOpacity' | 'bgOpacity' | 'borderColorOpacity' | 'divideColorOpacity' | 'outlineColorOpacity' | 'ringColorOpacity' | 'textDecorationColorOpacity' | 'svgFillOpacity' | 'svgStrokeOpacity' | 'shadowColorOpacity' | 'caretColorOpacity' | 'fontFamily' | 'fontSize' | 'fontWeight' | 'lineHeight' | 'letterSpacing' | 'blur' | 'backdropBlur' | 'animation' | 'shadow' | 'textShadow' | 'zIndex' | 'borderWidth' | 'borderRadius' | 'outlineWidth' | 'divideWidth' | 'ringWidth' | 'padding' | 'margin' | 'offset' | 'gap' | 'indent' | 'scrollSnapGap' | 'scrollSnapSpacing' | 'tableBorderSpacing' | 'width' | 'height' | 'aspectRatio' | 'positionPlacement' | 'flex' | 'transform' | 'strokeWidth';
-/**
- * A logical grouping of ConfigurableProps with a human-readable label.
- * Used by the Studio UI to let users scope token groups to specific properties.
- */
-//#endregion
-export { PropertyGroupId };
+import { ConfigurableProp } from "@uds/types";

package/dist/config/dist/propertyGroups.js

@@ -394,7 +394,7 @@ const ALL_PROPERTY_GROUPS = [
 		properties: ["strokeWidth"]
 	}
 ];
-const groupById = new Map(ALL_PROPERTY_GROUPS.map((g) => [g.id, g]));
+new Map(ALL_PROPERTY_GROUPS.map((g) => [g.id, g]));
 const propToGroupId = /* @__PURE__ */ new Map();
 for (const group of ALL_PROPERTY_GROUPS) for (const prop of group.properties) propToGroupId.set(prop, group.id);
 const COLOR_GROUPS = [
@@ -411,22 +411,4 @@ const COLOR_GROUPS = [
 	"textDecorationColor"
 ];
 [...COLOR_GROUPS], [...COLOR_GROUPS], [...COLOR_GROUPS];
-/**
-* Given an array of group IDs, returns the flat union of all their
-* member ConfigurableProps (deduplicated).
-*/
-function expandPropertyGroups(groupIds) {
-	const seen = /* @__PURE__ */ new Set();
-	const result = [];
-	for (const id of groupIds) {
-		const group = groupById.get(id);
-		if (!group) continue;
-		for (const prop of group.properties) if (!seen.has(prop)) {
-			seen.add(prop);
-			result.push(prop);
-		}
-	}
-	return result;
-}
 //#endregion
-export { expandPropertyGroups };

package/dist/config/dist/resolveStyleProp.d.ts

@@ -1,7 +1,6 @@
 import { CssValueTypeName } from "./types/css-values.js";
 import { ArbitrarySpec, StylePropMetadata } from "./defineStyleProp.js";
 //#region ../config/dist/resolveStyleProp.d.ts
-//#region src/resolveStyleProp.d.ts
 interface ResolvedToken {
   /** The token's raw key, e.g. `'brand'`. */
   readonly name: string;
@@ -52,11 +51,5 @@ interface ResolvedStyleProp {
   readonly arbitrary: ArbitrarySpec | undefined;
   readonly metadata: StylePropMetadata;
 }
-/**
- * Structurally-loose input shape for the resolver. Any `StyleProp<P>` from
- * `defineStyleProp` is assignable to this. Defined locally so the
- * resolver's signature doesn't expand `ValuesEntry<P>` over the full CSS
- * property union (TS2590).
- */
 //#endregion
 export { ResolvedStyleProp, ResolvedToken };

package/dist/config/dist/resolveStyleProp.js

@@ -69,8 +69,17 @@ function detectTokenValueType(token, group) {
 		const sniffed = sniffTokenTypeFromValue(token.value);
 		resolved = sniffed ? tokenTypeToValueType(sniffed) : void 0;
 	}
-	if (resolved === "length-percentage") return token.value.trim().endsWith("%") ? "percentage" : "length";
-	if (resolved === "string" && looksLikeShadow(token.value)) return "shadow";
+	if (resolved === "length-percentage") {
+		const trimmed = token.value.trim();
+		if (trimmed.endsWith("%")) return "percentage";
+		if (/(deg|rad|grad|turn)$/.test(trimmed)) return "angle";
+		if (/(ms|s)$/.test(trimmed)) return "time";
+		return "length";
+	}
+	if (resolved === "string") {
+		if (looksLikeShadow(token.value)) return "shadow";
+		if (/^\d+(?:\.\d+)?\s*\/\s*\d+(?:\.\d+)?$/.test(token.value.trim())) return "ratio";
+	}
 	return resolved;
 }
 const REF_RE = /^\{([^.{}]+)(?:\.([^.{}]+))?\}$/;

package/dist/config/dist/serialize.d.ts

@@ -1,8 +1,8 @@
-import { ArbitraryTokenGroup, AtomicToken, ExampleDef, ModeGroup, ModifierDef, MotionPresetsDef, UdsConfig } from "./createConfig.js";
+import { VarsConfig } from "./types.js";
+import { AtomicToken, ExampleDef, ModeGroup, ModifierDef, MotionPresetsDef, UdsConfig } from "./createConfig.js";
 import { CompositeStylesConfig } from "@uds/types";
 
 //#region ../config/dist/serialize.d.ts
-//#region src/serialize.d.ts
 type ModifierNameShape = `_${string}`;
 type TokenRef = {
   $ref: string;
@@ -10,6 +10,14 @@ type TokenRef = {
 interface SerializedConfig {
   modes: ModeGroup[];
   modifiers?: ModifierDef[];
+  /**
+   * Verbatim `defineVars` input. Authoritative source for CSS variable
+   * declarations downstream. `atomic` carries derived (property × token)
+   * data for utility-class generation; `vars` carries the original
+   * namespace-keyed input. New code should rely on `vars`; `atomic` is
+   * still emitted for legacy consumers.
+   */
+  vars?: VarsConfig;
   atomic: AtomicToken<ModifierNameShape>[];
   compositeStyles?: CompositeStylesConfig;
   /**
@@ -18,7 +26,6 @@ interface SerializedConfig {
    * until they're rewritten. New code should populate `compositeStyles`.
    */
   macros?: Record<string, Record<string, Record<string, unknown>>>;
-  arbitraryTokens?: ArbitraryTokenGroup[];
   motion?: MotionPresetsDef;
   components: SerializedComponentsDef;
   globalStyles?: Record<string, Record<string, SerializedValue>>;
@@ -60,6 +67,6 @@ declare function serializeConfig(config: UdsConfig): SerializedConfig;
  * Resolves `$ref` markers back to `var()` strings using the atomic token
  * definitions, then reconstructs the builder chain.
  */
-declare function deserializeConfig(data: SerializedConfig): UdsConfig; //#endregion
+declare function deserializeConfig(data: SerializedConfig): UdsConfig;
 //#endregion
 export { SerializedConfig, TokenRef, buildReverseMap, deserializeConfig, serializeConfig };

package/dist/config/dist/serialize.js

@@ -1,6 +1,6 @@
 import { safeTokenName } from "../../utils/dist/string-utils/cssVar.js";
 import "../../utils/dist/index.js";
-import { getConfigurablePropMapping } from "../../core/dist/propMappings.js";
+import { getConfigurablePropMapping } from "../../core/dist/configurable-prop-helpers.js";
 import "../../core/dist/index.js";
 import { buildTokenReference, createConfigBuilder, resolveConfig } from "./createConfig.js";
 //#region ../config/dist/serialize.js
@@ -107,9 +107,9 @@ function serializeConfig(config) {
 	return {
 		modes: data.modes,
 		modifiers: data.modifiers.length > 0 ? data.modifiers : void 0,
+		vars: data.vars && Object.keys(data.vars).length > 0 ? data.vars : void 0,
 		atomic: data.atomic,
 		compositeStyles: Object.keys(data.compositeStyles).length > 0 ? data.compositeStyles : void 0,
-		arbitraryTokens: data.arbitraryTokens && data.arbitraryTokens.length > 0 ? data.arbitraryTokens : void 0,
 		motion: Object.keys(data.motion).length > 0 ? data.motion : void 0,
 		components,
 		globalStyles: Object.keys(globalStyles).length > 0 ? globalStyles : void 0,
@@ -150,13 +150,13 @@ function deserializeConfig(data) {
 	let config = createConfigBuilder({
 		modes: data.modes,
 		modifiers: data.modifiers ?? [],
+		vars: data.vars,
 		atomic: data.atomic,
 		compositeStyles: data.compositeStyles ?? upgradeLegacyMacros(data.macros),
 		motion: data.motion ?? {},
 		components,
 		preflight: data.preflight,
 		prefix: data.prefix ?? "uds",
-		arbitraryTokens: data.arbitraryTokens,
 		remotion: void 0,
 		globalStyles: {},
 		presetTokenNames: data.presetTokenNames

package/dist/config/dist/types/css-values.d.ts

@@ -1,5 +1,4 @@
 //#region ../config/dist/types/css-values.d.ts
-//#region src/types/css-values.d.ts
 /**
  * CSS value-type primitives — building blocks used by {@link CssPropertyValues}
  * in `./css-properties` and by `defineStyleProp` to constrain authored values.
@@ -56,6 +55,6 @@ type CssValue = {
   ident: string;
   string: string;
 };
-type CssValueTypeName = keyof CssValue; //#endregion
+type CssValueTypeName = keyof CssValue;
 //#endregion
 export { ColorFn, ColorKeyword, CssAngle, CssColor, CssLength, CssPercentage, CssRatio, CssTime, CssValue, CssValueTypeName, HexColor, HslColor, RgbColor };

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

@@ -1,5 +1,4 @@
 //#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
@@ -60,6 +59,6 @@ type VarGroupDef<M extends `_${string}` = `_${string}`> = {
  *   spacing: { $type: 'dimension', 1: { value: '0.25rem' }, 2: { value: '0.5rem' } },
  * }
  */
-type VarsConfig<M extends `_${string}` = `_${string}`> = Record<string, VarGroupDef<M>>; //#endregion
+type VarsConfig<M extends `_${string}` = `_${string}`> = Record<string, VarGroupDef<M>>;
 //#endregion
 export { TokenType, VarGroupDef, VarTokenDef, VarsConfig };