@yahoo/uds-v5-wip 1.48.0 → 1.50.0

package/dist/components/dist/presets/index.js

@@ -2,8 +2,8 @@ import { textConfig } from "../text.config.js";
 import { accordionConfig } from "../accordion.config.js";
 import { alertConfig } from "../alert.config.js";
 import { anchorConfig } from "../anchor.config.js";
-import { avatarGroupConfig } from "../avatar-group.config.js";
 import { avatarConfig } from "../avatar.config.js";
+import { avatarGroupConfig } from "../avatar-group.config.js";
 import { badgeConfig } from "../badge.config.js";
 import { breadcrumbConfig } from "../breadcrumb.config.js";
 import { buttonConfig } from "../button.config.js";

package/dist/components/presets/index.js

@@ -2,8 +2,8 @@ import { textConfig } from "../dist/text.config.js";
 import { accordionConfig } from "../dist/accordion.config.js";
 import { alertConfig } from "../dist/alert.config.js";
 import { anchorConfig } from "../dist/anchor.config.js";
-import { avatarGroupConfig } from "../dist/avatar-group.config.js";
 import { avatarConfig } from "../dist/avatar.config.js";
+import { avatarGroupConfig } from "../dist/avatar-group.config.js";
 import { badgeConfig } from "../dist/badge.config.js";
 import { breadcrumbConfig } from "../dist/breadcrumb.config.js";
 import { buttonConfig } from "../dist/button.config.js";

package/dist/config/dist/createConfig.js

@@ -421,9 +421,27 @@ function createConfigBuilder(data, extensions) {
 			}, extensions);
 		},
 		registerStyleProps(props) {
+			const expanded = {};
+			for (const [propName, prop] of Object.entries(props)) {
+				expanded[propName] = prop;
+				if (prop.opacityPair) {
+					const sibling = {
+						kind: "styleProp",
+						cssProperty: prop.cssProperty,
+						classPrefix: "",
+						values: prop.opacityPair.values,
+						arbitrary: void 0,
+						cssType: prop.cssType,
+						metadata: { label: prop.metadata?.label ? `${prop.metadata.label} opacity` : void 0 },
+						_pairedWith: propName,
+						_separator: prop.opacityPair.separator
+					};
+					expanded[prop.opacityPair.as] = sibling;
+				}
+			}
 			const mergedStyleProps = {
 				...data.styleProps ?? {},
-				...props
+				...expanded
 			};
 			const updates = { styleProps: mergedStyleProps };
 			if (data.vars) updates.atomic = mergeAtomic([], synthesizeAtomicFromVarsAndStyleProps(data.vars, mergedStyleProps, data.modes ?? []), "override");

package/dist/config/dist/defineStyleProp.d.ts

@@ -47,6 +47,23 @@ type StylePropMetadata = {
  * (`Array.isArray(p) ? p : [p]`); readers that only need the primary
  * use the string directly or `Array.isArray(p) ? p[0] : p`.
  */
+/**
+ * Internal shape attached to a {@link StyleProp} by `.withOpacity()`.
+ * The resolver inspects this at `resolveConfig` time to synthesize a
+ * second {@link ResolvedStyleProp} for the opacity sibling.
+ */
+interface OpacityPairSpec {
+  /** JSX-prop name for the opacity sibling, e.g. `'bgOpacity'`. */
+  readonly as: string;
+  /** Token-group refs the opacity sibling accepts as values. */
+  readonly values: readonly unknown[];
+  /**
+   * Separator between the parent's value-token suffix and the opacity
+   * value in the emitted class name (`bg-primary_75` vs.
+   * `bg-primary/75`). Defaults to `_`.
+   */
+  readonly separator: string;
+}
 /**
  * Structurally-loose form of {@link StyleProp}. Any concrete `StyleProp<P>`
  * is assignable to this. Used at registration / resolution boundaries where
@@ -61,6 +78,7 @@ interface AnyStyleProp {
   readonly arbitrary?: ArbitrarySpec;
   readonly cssType?: CssValueTypeName;
   readonly metadata: StylePropMetadata;
+  readonly opacityPair?: OpacityPairSpec;
 }
 /**
  * Return shape of {@link defineStyleProp}. The `metadata` field doubles as

package/dist/config/dist/defineStyleProp.js

@@ -35,14 +35,26 @@ function defineStyleProp(spec) {
 		arbitrary,
 		cssType
 	};
-	const metadata = (meta = {}) => ({
-		...baseFields,
-		metadata: meta
-	});
-	return {
-		...baseFields,
-		metadata
+	const buildChainable = (fields) => {
+		const metadata = (meta = {}) => ({
+			...fields,
+			metadata: meta
+		});
+		const withOpacity = (spec) => buildChainable({
+			...fields,
+			opacityPair: {
+				as: spec.as,
+				values: spec.values,
+				separator: spec.separator ?? "_"
+			}
+		});
+		return {
+			...fields,
+			metadata,
+			withOpacity
+		};
 	};
+	return buildChainable(baseFields);
 }
 //#endregion
 export { defineStyleProp };

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

@@ -52,6 +52,20 @@ interface ResolvedStyleProp {
    *  (`Array.isArray(p) ? p : [p]`) when iteration matters. */
   readonly cssProperty: string | readonly string[];
   readonly classPrefix: string;
+  /**
+   * Set on opacity-sibling entries to the JSX-prop name of the parent
+   * color prop they compose with (`bg` for `bgOpacity`). Authored via
+   * `.withOpacity({ as })` on the parent's `defineStyleProp`. Consumers
+   * use this to merge `bg="primary"` + `bgOpacity="75"` into a single
+   * `bg-primary_75` class.
+   */
+  readonly pairedWith?: string;
+  /**
+   * Class-name separator between the parent's token suffix and the
+   * opacity value (`bg-primary_75` vs. `bg-primary/75`). Only set when
+   * `pairedWith` is set. Defaults to `'_'` at the authoring layer.
+   */
+  readonly separator?: string;
   readonly tokens: readonly ResolvedToken[];
   readonly literals: readonly (string | number | boolean)[];
   /** Alias → CSS-value map for `{ alias, value }` entries in `values`.

package/dist/config/dist/resolveStyleProp.js

@@ -124,13 +124,13 @@ function isNamespacedRef(entry) {
 function buildCssVar(configPrefix, varPrefix, safeName) {
 	return configPrefix ? `--${configPrefix}-${varPrefix}-${safeName}` : `--${varPrefix}-${safeName}`;
 }
-function resolveGroupTokens(group, cssProperty, configPrefix, namespace) {
+function resolveGroupTokens(group, cssProperty, configPrefix, namespace, skipPropertyFilter = false) {
 	const groupName = group.namespace ?? group.cssPrefix ?? "";
 	const varPrefix = group.cssPrefix ?? group.namespace ?? "";
 	const out = [];
 	for (const token of group.tokens) {
 		const valueType = detectTokenValueType(token, group);
-		if (!isTokenAcceptedByProperty(cssProperty, valueType, token.value)) continue;
+		if (!skipPropertyFilter && !isTokenAcceptedByProperty(cssProperty, valueType, token.value)) continue;
 		const safeName = safeTokenName(token.name);
 		out.push({
 			name: token.name,
@@ -156,6 +156,8 @@ function resolveGroupTokens(group, cssProperty, configPrefix, namespace) {
 */
 function resolveStyleProp(propName, styleProp, config) {
 	const { cssProperty, classPrefix, values, arbitrary, metadata } = styleProp;
+	const pairedWith = styleProp._pairedWith;
+	const separator = styleProp._separator;
 	const primaryCssProperty = Array.isArray(cssProperty) ? cssProperty[0] : cssProperty;
 	const configPrefix = config.prefix;
 	const tokens = [];
@@ -179,7 +181,7 @@ function resolveStyleProp(propName, styleProp, config) {
 				const token = group.tokens.find((t) => t.name === parsed.key);
 				if (!token) continue;
 				const valueType = detectTokenValueType(token, group);
-				if (!isTokenAcceptedByProperty(primaryCssProperty, valueType, token.value)) continue;
+				if (!pairedWith && !isTokenAcceptedByProperty(primaryCssProperty, valueType, token.value)) continue;
 				const safeName = safeTokenName(token.name);
 				const varPrefix = group.cssPrefix ?? group.namespace ?? parsed.group;
 				tokens.push({
@@ -192,7 +194,7 @@ function resolveStyleProp(propName, styleProp, config) {
 					cssVar: buildCssVar(configPrefix, varPrefix, safeName),
 					modifiers: token.modifiers
 				});
-			} else tokens.push(...resolveGroupTokens(group, primaryCssProperty, configPrefix));
+			} else tokens.push(...resolveGroupTokens(group, primaryCssProperty, configPrefix, void 0, pairedWith !== void 0));
 			continue;
 		}
 		if (isNamespacedRef(entry)) {
@@ -200,7 +202,7 @@ function resolveStyleProp(propName, styleProp, config) {
 			if (!parsed || parsed.key !== void 0) continue;
 			const group = findGroup(config.atomic, parsed.group);
 			if (!group) continue;
-			tokens.push(...resolveGroupTokens(group, primaryCssProperty, configPrefix, entry.namespace));
+			tokens.push(...resolveGroupTokens(group, primaryCssProperty, configPrefix, entry.namespace, pairedWith !== void 0));
 			continue;
 		}
 		if (typeof entry === "object" && entry !== null && "alias" in entry && "value" in entry) {
@@ -218,6 +220,10 @@ function resolveStyleProp(propName, styleProp, config) {
 		propName,
 		cssProperty,
 		classPrefix,
+		...pairedWith !== void 0 ? {
+			pairedWith,
+			separator
+		} : {},
 		tokens,
 		literals,
 		...Object.keys(literalAliases).length > 0 ? { literalAliases } : {},

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

@@ -15,6 +15,12 @@ type TokenType = 'color' | 'dimension' | 'number' | 'fontFamily' | 'fontWeight'
  * A single design token definition with a base value and optional modifier overrides.
  * Modifier keys use the `_` prefix convention (e.g., `_dark`, `_hover`).
  *
+ * Modifier values can be flat strings (`_dark: '#88bcfb'`) or nested token defs
+ * that introduce further modifiers — useful for stacking modes from different
+ * sets (e.g. `_slate: { value: '#1167f4', _dark: '#88bcfb' }` for the slate
+ * theme's dark variant). The emitter joins each level's selector to form a
+ * compound CSS selector (`[data-theme="slate"].dark`).
+ *
  * When `M` is narrowed (e.g., `'_dark' | '_light'`), only those modifier keys are
  * accepted — TypeScript will flag unknown modifiers like `_eggs` at compile time.
  *
@@ -24,11 +30,12 @@ type TokenType = 'color' | 'dimension' | 'number' | 'fontFamily' | 'fontWeight'
  * @example
  * { value: '#1167f4', _dark: '#88bcfb' }
  * { value: 'transparent', $type: 'string' }
+ * { value: '#1167f4', _slate: { value: '#1167f4', _dark: '#88bcfb' } }
  */
 type VarTokenDef<M extends `_${string}` = `_${string}`> = {
   value: string;
   $type?: TokenType;
-} & { [K in M]?: string };
+} & { [K in M]?: string | VarTokenDef<M> };
 /**
  * A group of named tokens within a var namespace.
  *

package/dist/core/dist/getStyles.js

@@ -1,10 +1,10 @@
-import { colorPropToOpacityProp } from "./color-opacity-map.js";
 import { componentSlotClass } from "../../utils/dist/string-utils/componentClassName.js";
 import "../../utils/dist/index.js";
 import { expandCompositeStyles, getCompositeStylesConfig } from "./compositeStyles.js";
 import { propMappings } from "./style-prop-data.js";
 import { stylePropsTwMap } from "./generated/stylePropsTwMap.js";
 import { modifierMappings } from "./modifier-mappings.js";
+import { colorPropToOpacityProp } from "./color-opacity-map.js";
 import { clsx } from "clsx";
 //#region ../core/dist/getStyles.js
 /** Convert kebab-case CSS property to camelCase for React inline styles.

package/dist/core/dist/index.d.ts

@@ -1,4 +1,3 @@
-import { colorPropToOpacityProp } from "./color-opacity-map.js";
 import { expandCompositeStyles, getCompositeStylesConfig, setCompositeStylesConfig } from "./compositeStyles.js";
 import { PropMapping, propMappings } from "./style-prop-data.js";
 import { ConfigurablePropertyEntry, CssVariablePrefixEntry, getConfigurablePropMapping, getConfigurableProperties, getCssVariablePrefixes } from "./configurable-prop-helpers.js";

package/dist/core/dist/index.js

@@ -1,4 +1,3 @@
-import "./color-opacity-map.js";
 import "./compositeStyles.js";
 import "./style-prop-data.js";
 import "./configurable-prop-helpers.js";

package/dist/core.d.ts

@@ -1,4 +1,3 @@
-import { colorPropToOpacityProp } from "./core/dist/color-opacity-map.js";
 import { expandCompositeStyles, getCompositeStylesConfig, setCompositeStylesConfig } from "./core/dist/compositeStyles.js";
 import { PropMapping, propMappings } from "./core/dist/style-prop-data.js";
 import { ConfigurablePropertyEntry, CssVariablePrefixEntry, getConfigurablePropMapping, getConfigurableProperties, getCssVariablePrefixes } from "./core/dist/configurable-prop-helpers.js";
@@ -12,4 +11,4 @@ import { ModifierEntry, modifierMappings } from "./core/dist/modifier-mappings.j
 import { resolveMotionState } from "./core/dist/resolveMotionState.js";
 import { TransformedMotionProps, transformPreset } from "./core/dist/transformPreset.js";
 import { withDefaultStyleProps } from "./core/dist/withDefaultStyleProps.js";
-export { ComponentExample, ConfigurablePropertyEntry, CssVariablePrefixEntry, ModifierEntry, PropMapping, TransformedMotionProps, colorPropToOpacityProp, createComponent, createComponentExample, createComponentStyler, createProvider, createVariants, cx, expandCompositeStyles, getCompositeStylesConfig, getConfigurablePropMapping, getConfigurableProperties, getCssVariablePrefixes, getStyles, getVariantClassName, modifierMappings, processStyleProps, propMappings, resolveMotionState, setCompositeStylesConfig, stylePropsTwMap, toCamelCase, transformPreset, withDefaultStyleProps };
+export { ComponentExample, ConfigurablePropertyEntry, CssVariablePrefixEntry, ModifierEntry, PropMapping, TransformedMotionProps, createComponent, createComponentExample, createComponentStyler, createProvider, createVariants, cx, expandCompositeStyles, getCompositeStylesConfig, getConfigurablePropMapping, getConfigurableProperties, getCssVariablePrefixes, getStyles, getVariantClassName, modifierMappings, processStyleProps, propMappings, resolveMotionState, setCompositeStylesConfig, stylePropsTwMap, toCamelCase, transformPreset, withDefaultStyleProps };

package/dist/core.js

@@ -1,4 +1,3 @@
-import { colorPropToOpacityProp } from "./core/dist/color-opacity-map.js";
 import { expandCompositeStyles, getCompositeStylesConfig, setCompositeStylesConfig } from "./core/dist/compositeStyles.js";
 import { propMappings } from "./core/dist/style-prop-data.js";
 import { getConfigurablePropMapping, getConfigurableProperties, getCssVariablePrefixes } from "./core/dist/configurable-prop-helpers.js";
@@ -13,4 +12,4 @@ import { resolveMotionState } from "./core/dist/resolveMotionState.js";
 import { transformPreset } from "./core/dist/transformPreset.js";
 import { withDefaultStyleProps } from "./core/dist/withDefaultStyleProps.js";
 import "./core/dist/index.js";
-export { colorPropToOpacityProp, createComponent, createComponentExample, createComponentStyler, createProvider, createVariants, cx, expandCompositeStyles, getCompositeStylesConfig, getConfigurablePropMapping, getConfigurableProperties, getCssVariablePrefixes, getStyles, getVariantClassName, modifierMappings, processStyleProps, propMappings, resolveMotionState, setCompositeStylesConfig, stylePropsTwMap, toCamelCase, transformPreset, withDefaultStyleProps };
+export { createComponent, createComponentExample, createComponentStyler, createProvider, createVariants, cx, expandCompositeStyles, getCompositeStylesConfig, getConfigurablePropMapping, getConfigurableProperties, getCssVariablePrefixes, getStyles, getVariantClassName, modifierMappings, processStyleProps, propMappings, resolveMotionState, setCompositeStylesConfig, stylePropsTwMap, toCamelCase, transformPreset, withDefaultStyleProps };

package/dist/foundational-presets/dist/index.d.ts

@@ -1,19 +1 @@
-import { boldVibrantFoundationPreset } from "./boldVibrant.js";
-import { brutalistFoundationPreset } from "./brutalist.js";
-import { candyFoundationPreset } from "./candy.js";
-import { cleanMinimalistFoundationPreset } from "./cleanMinimalist.js";
-import { corporateFoundationPreset } from "./corporate.js";
-import { darkMoodyFoundationPreset } from "./darkMoody.js";
-import { defaultFoundationPreset } from "./defaultPreset.js";
-import { forestFoundationPreset } from "./forest.js";
-import { highContrastFoundationPreset } from "./highContrast.js";
-import { lavenderFoundationPreset } from "./lavender.js";
-import { luxuryFoundationPreset } from "./luxury.js";
-import { monochromeFoundationPreset } from "./monochrome.js";
-import { neonCyberFoundationPreset } from "./neonCyber.js";
-import { newspaperFoundationPreset } from "./newspaper.js";
-import { oceanFoundationPreset } from "./ocean.js";
-import { slateFoundationPreset } from "./slate.js";
-import { sunsetFoundationPreset } from "./sunset.js";
-import { terminalFoundationPreset } from "./terminal.js";
-import { warmOrganicFoundationPreset } from "./warmOrganic.js";
+import { defaultFoundationPreset } from "./defaultPreset.js";

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

@@ -1,19 +1 @@
 import "./defaultPreset.js";
-import "./boldVibrant.js";
-import "./brutalist.js";
-import "./candy.js";
-import "./cleanMinimalist.js";
-import "./corporate.js";
-import "./darkMoody.js";
-import "./forest.js";
-import "./highContrast.js";
-import "./lavender.js";
-import "./luxury.js";
-import "./monochrome.js";
-import "./neonCyber.js";
-import "./newspaper.js";
-import "./ocean.js";
-import "./slate.js";
-import "./sunset.js";
-import "./terminal.js";
-import "./warmOrganic.js";

package/dist/foundational-presets/dist/style-props.js

@@ -239,6 +239,9 @@ const bg = defineStyleProp({
 	classPrefix: "bg",
 	values: ["{color}", "{bg}"],
 	arbitrary: "color"
+}).withOpacity({
+	as: "bgOpacity",
+	values: ["{opacity}"]
 }).metadata({ label: "Background" });
 const borderRadius = defineStyleProp({
 	cssProperty: "border-radius",
@@ -299,54 +302,81 @@ const borderColor = defineStyleProp({
 	classPrefix: "border-color",
 	values: ["{color}", "{borderColor}"],
 	arbitrary: "color"
+}).withOpacity({
+	as: "borderColorOpacity",
+	values: ["{opacity}"]
 }).metadata({ label: "Border color" });
 const borderYColor = defineStyleProp({
 	cssProperty: "border-block-color",
 	classPrefix: "border-y-color",
 	values: ["{color}", "{borderColor}"],
 	arbitrary: "color"
+}).withOpacity({
+	as: "borderYColorOpacity",
+	values: ["{opacity}"]
 }).metadata({ label: "Border Y color" });
 const borderXColor = defineStyleProp({
 	cssProperty: "border-inline-color",
 	classPrefix: "border-x-color",
 	values: ["{color}", "{borderColor}"],
 	arbitrary: "color"
+}).withOpacity({
+	as: "borderXColorOpacity",
+	values: ["{opacity}"]
 }).metadata({ label: "Border X color" });
 const borderStartColor = defineStyleProp({
 	cssProperty: "border-inline-start-color",
 	classPrefix: "border-s-color",
 	values: ["{color}", "{borderColor}"],
 	arbitrary: "color"
+}).withOpacity({
+	as: "borderStartColorOpacity",
+	values: ["{opacity}"]
 }).metadata({ label: "Border start color" });
 const borderLeftColor = defineStyleProp({
 	cssProperty: "border-left-color",
 	classPrefix: "border-l-color",
 	values: ["{color}", "{borderColor}"],
 	arbitrary: "color"
+}).withOpacity({
+	as: "borderLeftColorOpacity",
+	values: ["{opacity}"]
 }).metadata({ label: "Border left color" });
 const borderEndColor = defineStyleProp({
 	cssProperty: "border-inline-end-color",
 	classPrefix: "border-e-color",
 	values: ["{color}", "{borderColor}"],
 	arbitrary: "color"
+}).withOpacity({
+	as: "borderEndColorOpacity",
+	values: ["{opacity}"]
 }).metadata({ label: "Border end color" });
 const borderRightColor = defineStyleProp({
 	cssProperty: "border-right-color",
 	classPrefix: "border-r-color",
 	values: ["{color}", "{borderColor}"],
 	arbitrary: "color"
+}).withOpacity({
+	as: "borderRightColorOpacity",
+	values: ["{opacity}"]
 }).metadata({ label: "Border right color" });
 const borderTopColor = defineStyleProp({
 	cssProperty: "border-top-color",
 	classPrefix: "border-t-color",
 	values: ["{color}", "{borderColor}"],
 	arbitrary: "color"
+}).withOpacity({
+	as: "borderTopColorOpacity",
+	values: ["{opacity}"]
 }).metadata({ label: "Border top color" });
 const borderBottomColor = defineStyleProp({
 	cssProperty: "border-bottom-color",
 	classPrefix: "border-b-color",
 	values: ["{color}", "{borderColor}"],
 	arbitrary: "color"
+}).withOpacity({
+	as: "borderBottomColorOpacity",
+	values: ["{opacity}"]
 }).metadata({ label: "Border bottom color" });
 const border = defineStyleProp({
 	cssProperty: "border-width",
@@ -435,6 +465,9 @@ const color = defineStyleProp({
 	classPrefix: "color",
 	values: ["{color}"],
 	arbitrary: "color"
+}).withOpacity({
+	as: "colorOpacity",
+	values: ["{opacity}"]
 }).metadata({ label: "Color" });
 const divideWidth = defineStyleProp({
 	cssProperty: "border-width",
@@ -446,6 +479,9 @@ const divideColor = defineStyleProp({
 	classPrefix: "divide-color",
 	values: ["{color}", "{borderColor}"],
 	arbitrary: "color"
+}).withOpacity({
+	as: "divideColorOpacity",
+	values: ["{opacity}"]
 }).metadata({ label: "Divide color" });
 const divideStyle = defineStyleProp({
 	cssProperty: "border-style",
@@ -578,6 +614,9 @@ const caretColor = defineStyleProp({
 	classPrefix: "caret-color",
 	values: ["{color}"],
 	arbitrary: "color"
+}).withOpacity({
+	as: "caretColorOpacity",
+	values: ["{opacity}"]
 }).metadata({ label: "Caret color" });
 const pointerEvents = defineStyleProp({
 	cssProperty: "pointer-events",
@@ -832,6 +871,9 @@ const outlineColor = defineStyleProp({
 	classPrefix: "outline-color",
 	values: ["{color}"],
 	arbitrary: "color"
+}).withOpacity({
+	as: "outlineColorOpacity",
+	values: ["{opacity}"]
 }).metadata({ label: "Outline color" });
 const outlineStyle = defineStyleProp({
 	cssProperty: "outline-style",
@@ -854,6 +896,9 @@ const ringColor = defineStyleProp({
 	classPrefix: "ring-color",
 	values: ["{color}"],
 	arbitrary: "color"
+}).withOpacity({
+	as: "ringColorOpacity",
+	values: ["{opacity}"]
 }).metadata({ label: "Ring color" });
 const ringOffsetWidth = defineStyleProp({
 	cssProperty: "--tw-ring-offset-width",
@@ -867,6 +912,9 @@ const ringOffsetColor = defineStyleProp({
 	classPrefix: "ring-offset-color",
 	values: ["{color}"],
 	arbitrary: "color"
+}).withOpacity({
+	as: "ringOffsetColorOpacity",
+	values: ["{opacity}"]
 }).metadata({ label: "Ring offset color" });
 const ringInset = defineStyleProp({
 	cssProperty: "--tw-ring-inset",
@@ -885,6 +933,9 @@ const shadowColor = defineStyleProp({
 	classPrefix: "shadow-color",
 	values: ["{color}"],
 	arbitrary: "color"
+}).withOpacity({
+	as: "shadowColorOpacity",
+	values: ["{opacity}"]
 }).metadata({ label: "Shadow color" });
 const height = defineStyleProp({
 	cssProperty: "height",
@@ -1131,12 +1182,18 @@ const fillColor = defineStyleProp({
 	classPrefix: "fill",
 	values: ["{color}"],
 	arbitrary: "color"
+}).withOpacity({
+	as: "fillColorOpacity",
+	values: ["{opacity}"]
 }).metadata({ label: "Fill color" });
 const strokeColor = defineStyleProp({
 	cssProperty: "stroke",
 	classPrefix: "stroke-color",
 	values: ["{color}"],
 	arbitrary: "color"
+}).withOpacity({
+	as: "strokeColorOpacity",
+	values: ["{opacity}"]
 }).metadata({ label: "Stroke color" });
 const strokeWidth = defineStyleProp({
 	cssProperty: "stroke-width",
@@ -1321,6 +1378,9 @@ const textDecorationColor = defineStyleProp({
 	classPrefix: "decoration-color",
 	values: ["{color}"],
 	arbitrary: "color"
+}).withOpacity({
+	as: "textDecorationColorOpacity",
+	values: ["{opacity}"]
 }).metadata({ label: "Text decoration color" });
 const textDecorationStyle = defineStyleProp({
 	cssProperty: "text-decoration-style",

package/dist/loader/dist/loader/style-transform.js

@@ -2,7 +2,6 @@ import { applyComponentStyleDefaults } from "../../../utils/dist/component-style
 import { kebabCase } from "../../../utils/dist/string-utils/kebabCase.js";
 import { componentVariantClass } from "../../../utils/dist/string-utils/componentClassName.js";
 import "../../../utils/dist/index.js";
-import { colorPropToOpacityProp } from "../packages/core/dist/color-opacity-map.js";
 import { expandCompositeStyles } from "../packages/core/dist/compositeStyles.js";
 import { propMappings } from "../packages/core/dist/style-prop-data.js";
 import { toCamelCase } from "../packages/core/dist/getStyles.js";
@@ -163,9 +162,9 @@ function createStyleTransformRuntime(transformData, manifest) {
 			effectiveProps = expanded;
 			if (markerClasses.length > 0) effectiveProps.__compositeStyleMarkers = markerClasses;
 		}
-		for (const [colorProp, opacityPropName] of Object.entries(colorPropToOpacityProp)) if (effectiveProps[opacityPropName] !== void 0 && effectiveProps[colorProp] !== void 0) {
-			effectiveProps[colorProp] = `${effectiveProps[colorProp]}_${effectiveProps[opacityPropName]}`;
-			delete effectiveProps[opacityPropName];
+		for (const { colorProp, opacityProp, separator } of transformData?.colorOpacityPairs ?? []) if (effectiveProps[opacityProp] !== void 0 && effectiveProps[colorProp] !== void 0) {
+			effectiveProps[colorProp] = `${effectiveProps[colorProp]}${separator}${effectiveProps[opacityProp]}`;
+			delete effectiveProps[opacityProp];
 		}
 		const classParts = [];
 		if (Array.isArray(effectiveProps.__compositeStyleMarkers)) {

package/dist/loader/dist/packages/core/dist/getStyles.js

@@ -1,9 +1,9 @@
 import "../../../../../utils/dist/index.js";
-import { colorPropToOpacityProp } from "./color-opacity-map.js";
 import "./compositeStyles.js";
 import { propMappings } from "./style-prop-data.js";
 import { stylePropsTwMap } from "./generated/stylePropsTwMap.js";
 import { modifierMappings } from "./modifier-mappings.js";
+import { colorPropToOpacityProp } from "./color-opacity-map.js";
 //#region ../loader/dist/packages/core/dist/getStyles.js
 /** Convert kebab-case CSS property to camelCase for React inline styles.
 *  CSS custom properties (--*) are kept as-is since React supports them verbatim. */

package/dist/presets/dist/defaultPreset.js

@@ -4,8 +4,8 @@ import { textConfig } from "../../components/dist/text.config.js";
 import { accordionConfig } from "../../components/dist/accordion.config.js";
 import { alertConfig } from "../../components/dist/alert.config.js";
 import { anchorConfig } from "../../components/dist/anchor.config.js";
-import { avatarGroupConfig } from "../../components/dist/avatar-group.config.js";
 import { avatarConfig } from "../../components/dist/avatar.config.js";
+import { avatarGroupConfig } from "../../components/dist/avatar-group.config.js";
 import { badgeConfig } from "../../components/dist/badge.config.js";
 import { breadcrumbConfig } from "../../components/dist/breadcrumb.config.js";
 import { buttonConfig } from "../../components/dist/button.config.js";

package/dist/presets/dist/index.d.ts

@@ -1,19 +1 @@
-import { boldVibrantPreset } from "./boldVibrant.js";
-import { brutalistPreset } from "./brutalist.js";
-import { candyPreset } from "./candy.js";
-import { cleanMinimalistPreset } from "./cleanMinimalist.js";
-import { corporatePreset } from "./corporate.js";
-import { darkMoodyPreset } from "./darkMoody.js";
-import { defaultPreset } from "./defaultPreset.js";
-import { forestPreset } from "./forest.js";
-import { highContrastPreset } from "./highContrast.js";
-import { lavenderPreset } from "./lavender.js";
-import { luxuryPreset } from "./luxury.js";
-import { monochromePreset } from "./monochrome.js";
-import { neonCyberPreset } from "./neonCyber.js";
-import { newspaperPreset } from "./newspaper.js";
-import { oceanPreset } from "./ocean.js";
-import { slatePreset } from "./slate.js";
-import { sunsetPreset } from "./sunset.js";
-import { terminalPreset } from "./terminal.js";
-import { warmOrganicPreset } from "./warmOrganic.js";
+import { defaultPreset } from "./defaultPreset.js";

package/dist/presets/dist/index.js

@@ -1,19 +1 @@
-import "./boldVibrant.js";
-import "./brutalist.js";
-import "./candy.js";
-import "./cleanMinimalist.js";
-import "./corporate.js";
-import "./darkMoody.js";
 import "./defaultPreset.js";
-import "./forest.js";
-import "./highContrast.js";
-import "./lavender.js";
-import "./luxury.js";
-import "./monochrome.js";
-import "./neonCyber.js";
-import "./newspaper.js";
-import "./ocean.js";
-import "./slate.js";
-import "./sunset.js";
-import "./terminal.js";
-import "./warmOrganic.js";

package/dist/presets.d.ts

@@ -1,20 +1,2 @@
-import { boldVibrantPreset } from "./presets/dist/boldVibrant.js";
-import { brutalistPreset } from "./presets/dist/brutalist.js";
-import { candyPreset } from "./presets/dist/candy.js";
-import { cleanMinimalistPreset } from "./presets/dist/cleanMinimalist.js";
-import { corporatePreset } from "./presets/dist/corporate.js";
-import { darkMoodyPreset } from "./presets/dist/darkMoody.js";
 import { defaultPreset } from "./presets/dist/defaultPreset.js";
-import { forestPreset } from "./presets/dist/forest.js";
-import { highContrastPreset } from "./presets/dist/highContrast.js";
-import { lavenderPreset } from "./presets/dist/lavender.js";
-import { luxuryPreset } from "./presets/dist/luxury.js";
-import { monochromePreset } from "./presets/dist/monochrome.js";
-import { neonCyberPreset } from "./presets/dist/neonCyber.js";
-import { newspaperPreset } from "./presets/dist/newspaper.js";
-import { oceanPreset } from "./presets/dist/ocean.js";
-import { slatePreset } from "./presets/dist/slate.js";
-import { sunsetPreset } from "./presets/dist/sunset.js";
-import { terminalPreset } from "./presets/dist/terminal.js";
-import { warmOrganicPreset } from "./presets/dist/warmOrganic.js";
-export { boldVibrantPreset, brutalistPreset, candyPreset, cleanMinimalistPreset, corporatePreset, darkMoodyPreset, defaultPreset, forestPreset, highContrastPreset, lavenderPreset, luxuryPreset, monochromePreset, neonCyberPreset, newspaperPreset, oceanPreset, slatePreset, sunsetPreset, terminalPreset, warmOrganicPreset };
+export { defaultPreset };

package/dist/presets.js

@@ -1,21 +1,3 @@
-import { boldVibrantPreset } from "./presets/dist/boldVibrant.js";
-import { brutalistPreset } from "./presets/dist/brutalist.js";
-import { candyPreset } from "./presets/dist/candy.js";
-import { cleanMinimalistPreset } from "./presets/dist/cleanMinimalist.js";
-import { corporatePreset } from "./presets/dist/corporate.js";
-import { darkMoodyPreset } from "./presets/dist/darkMoody.js";
 import { defaultPreset } from "./presets/dist/defaultPreset.js";
-import { forestPreset } from "./presets/dist/forest.js";
-import { highContrastPreset } from "./presets/dist/highContrast.js";
-import { lavenderPreset } from "./presets/dist/lavender.js";
-import { luxuryPreset } from "./presets/dist/luxury.js";
-import { monochromePreset } from "./presets/dist/monochrome.js";
-import { neonCyberPreset } from "./presets/dist/neonCyber.js";
-import { newspaperPreset } from "./presets/dist/newspaper.js";
-import { oceanPreset } from "./presets/dist/ocean.js";
-import { slatePreset } from "./presets/dist/slate.js";
-import { sunsetPreset } from "./presets/dist/sunset.js";
-import { terminalPreset } from "./presets/dist/terminal.js";
-import { warmOrganicPreset } from "./presets/dist/warmOrganic.js";
 import "./presets/dist/index.js";
-export { boldVibrantPreset, brutalistPreset, candyPreset, cleanMinimalistPreset, corporatePreset, darkMoodyPreset, defaultPreset, forestPreset, highContrastPreset, lavenderPreset, luxuryPreset, monochromePreset, neonCyberPreset, newspaperPreset, oceanPreset, slatePreset, sunsetPreset, terminalPreset, warmOrganicPreset };
+export { defaultPreset };