@riverbankcms/sdk 0.108.0 → 0.109.0

package/dist/client/{buttons-EBjyslaX.mjs → buttons-DoFV7KDL.mjs}

@@ -1,5 +1,111 @@
-import { $ as themeColorTokenSchema } from "./propsDecoder-BRWBiH7i.mjs";
+import { t as parseColorTokenParts } from "./colorTokenParts-CMugwvX_.mjs";
+import { $ as themeColorTokenSchema, Q as parseThemeColorToken } from "./propsDecoder-CkXxkdSR.mjs";
 import { z as z$1 } from "zod";
+//#region ../theme-core/src/buttons/effectClassification.ts
+/**
+* Exhaustive live policy for every registered effect id.
+*
+* The resolver consumes the transition payload directly, so adding an effect
+* cannot update classification without also defining its runtime behavior.
+*/
+const BUTTON_EFFECT_POLICIES = {
+	"darken-background": {
+		classification: "colour-transition",
+		transition: {
+			kind: "adjust-shade",
+			direction: "darker"
+		}
+	},
+	"lighten-background": {
+		classification: "colour-transition",
+		transition: {
+			kind: "adjust-shade",
+			direction: "lighter"
+		}
+	},
+	"background-on-hover": {
+		classification: "colour-transition",
+		transition: { kind: "replace-background" }
+	},
+	"background-on-hover-alpha": {
+		classification: "unsupported-colour",
+		reason: "alpha_requires_surface"
+	},
+	"fade-background": {
+		classification: "unsupported-colour",
+		reason: "changes_element_opacity"
+	},
+	"opacity-reduce": {
+		classification: "unsupported-colour",
+		reason: "changes_element_opacity"
+	},
+	"gradient-text": {
+		classification: "unsupported-colour",
+		reason: "changes_foreground"
+	},
+	"text-color-change": {
+		classification: "unsupported-colour",
+		reason: "changes_foreground"
+	},
+	"border-color-change": {
+		classification: "unsupported-colour",
+		reason: "changes_border"
+	},
+	"aurora-glow": {
+		classification: "unsupported-background-overlay",
+		reason: "unresolved_background_overlay"
+	},
+	"cosmic-stardust": {
+		classification: "unsupported-background-overlay",
+		reason: "unresolved_background_overlay"
+	},
+	"gradient-border-fill": {
+		classification: "unsupported-background-overlay",
+		reason: "unresolved_background_overlay"
+	},
+	"animated-gradient-border-fill": {
+		classification: "unsupported-background-overlay",
+		reason: "unresolved_background_overlay"
+	},
+	"nav-underline": {
+		classification: "not-button",
+		reason: "not_button_effect"
+	},
+	"nav-frosted-base": {
+		classification: "not-button",
+		reason: "not_button_effect"
+	},
+	"nav-frosted-hover": {
+		classification: "not-button",
+		reason: "not_button_effect"
+	},
+	"nav-frosted-active": {
+		classification: "not-button",
+		reason: "not_button_effect"
+	},
+	"animated-gradient": { classification: "non-colour" },
+	"border-glow": { classification: "non-colour" },
+	"drop-shadow": { classification: "non-colour" },
+	"inner-shadow": { classification: "non-colour" },
+	"neumorphic-shadow": { classification: "non-colour" },
+	"outer-glow": { classification: "non-colour" },
+	"retro-3d-shadow": { classification: "non-colour" },
+	"scale-up": { classification: "non-colour" },
+	"scale-down": { classification: "non-colour" },
+	lift: { classification: "non-colour" },
+	"press-down": { classification: "non-colour" },
+	pop: { classification: "non-colour" },
+	"border-bottom-grow": { classification: "non-colour" },
+	"sketchy-border": { classification: "non-colour" },
+	"pulse-animation": { classification: "non-colour" }
+};
+function getButtonEffectPolicy(effectId) {
+	return Object.prototype.hasOwnProperty.call(BUTTON_EFFECT_POLICIES, effectId) ? BUTTON_EFFECT_POLICIES[effectId] : null;
+}
+function classifyButtonEffectId(effectId) {
+	return getButtonEffectPolicy(effectId)?.classification ?? "unknown";
+}
+//#endregion
 //#region ../theme-core/src/buttons/types.ts
 /**
 * Standard semantic variant roles a theme exposes.
@@ -16,6 +122,20 @@ const VARIANT_ROLES = [
 	"tertiary",
 	"accent"
 ];
+function parseOpaqueButtonColourToken(value) {
+	const token = parseThemeColorToken(value);
+	if (token === null) return null;
+	const parts = parseColorTokenParts(token);
+	return parts.kind === "token" && parts.opacityPercent === null ? token : null;
+}
+function unsafeAsOpaqueButtonColourToken(value) {
+	return value;
+}
+const opaqueButtonColourTokenSchema = themeColorTokenSchema.refine((value) => parseOpaqueButtonColourToken(value) !== null, "Button colour tokens must be opaque").transform((value) => {
+	const token = parseOpaqueButtonColourToken(value);
+	if (token === null) throw new Error("Invariant: opaque button token passed its schema");
+	return token;
+});
 const cornerStyleSchema = z$1.enum([
 	"square",
 	"rounded",
@@ -117,7 +237,7 @@ const buttonSizesSchema = z$1.object({
 	lg,
 	xl: xl ?? lg
 }));
-const buttonGlobalSettingsSchema = z$1.object({
+const canonicalButtonGlobalSettingsSchema = z$1.object({
 	cornerStyle: cornerStyleSchema,
 	cornerRadius: z$1.number().min(0).max(24).optional(),
 	/**
@@ -148,11 +268,12 @@ const buttonGlobalSettingsSchema = z$1.object({
 	paddingPreset: buttonPaddingPresetSchema.optional(),
 	hoverTransform: hoverTransformSchema,
 	hoverColor: hoverColorSchema,
-	hoverColorToken: themeColorTokenSchema.optional(),
+	hoverColorToken: opaqueButtonColourTokenSchema.optional(),
 	gradientStyle: gradientStyleSchema.optional(),
 	gradientAngle: z$1.number().min(0).max(360).optional(),
 	gradientSharpness: gradientSharpnessSchema.optional()
 });
+const buttonGlobalSettingsSchema = z$1.preprocess(normalizeLegacyButtonGlobalInput, canonicalButtonGlobalSettingsSchema);
 const gradientDirectionSchema = z$1.enum([
 	"to-r",
 	"to-l",
@@ -166,27 +287,33 @@ const gradientDirectionSchema = z$1.enum([
 const buttonBackgroundSchema = z$1.discriminatedUnion("type", [
 	z$1.object({
 		type: z$1.literal("solid"),
-		colorToken: themeColorTokenSchema
+		colorToken: opaqueButtonColourTokenSchema
 	}),
 	z$1.object({
 		type: z$1.literal("gradient"),
-		stops: z$1.array(themeColorTokenSchema).min(2),
-		direction: gradientDirectionSchema
+		stops: z$1.array(opaqueButtonColourTokenSchema).min(2).transform((stops) => {
+			const [first, second, ...rest] = stops;
+			if (first === void 0 || second === void 0) throw new Error("Invariant: gradient stops passed the minimum length schema");
+			return [
+				first,
+				second,
+				...rest
+			];
+		}),
+		direction: gradientDirectionSchema,
+		foregroundToken: opaqueButtonColourTokenSchema
 	}),
-	z$1.object({ type: z$1.literal("transparent") })
+	z$1.object({
+		type: z$1.literal("surface"),
+		role: z$1.literal("link")
+	})
 ]);
 const effectApplicationSchema = z$1.object({
 	effectId: z$1.string(),
-	options: z$1.record(z$1.string(), z$1.any()).optional()
-});
-const buttonBorderSchema = z$1.object({
-	widthClass: z$1.string(),
-	colorToken: themeColorTokenSchema
-});
-const buttonVariantAffordanceSchema = z$1.object({
-	iconId: z$1.string().min(1),
-	colorToken: themeColorTokenSchema.optional()
+	options: z$1.record(z$1.string(), z$1.json()).optional()
 });
+const buttonBorderSchema = z$1.object({ widthClass: z$1.string() });
+const buttonVariantAffordanceSchema = z$1.object({ iconId: z$1.string().min(1) });
 const variantShadowSchema = z$1.object({
 	elevation: z$1.enum([
 		"none",
@@ -227,27 +354,170 @@ const variantSizeOverridesSchema = z$1.object({
 * default (e.g. link-style variants declaring zero horizontal padding at
 * every size).
 */
-const buttonVariantSchema = z$1.object({
+const canonicalButtonVariantSchema = z$1.object({
 	id: z$1.string(),
 	name: z$1.string().min(1).max(20),
 	enabled: z$1.boolean(),
 	priority: prioritySchema,
 	background: buttonBackgroundSchema,
-	textColorToken: themeColorTokenSchema,
 	/** Tailwind radius token (e.g. `'rounded-md'`). Omit to inherit from `global.cornerStyle`. */
 	borderRadius: z$1.string().optional(),
 	shadow: variantShadowSchema.optional(),
 	border: buttonBorderSchema.optional(),
-	hoverBackgroundToken: z$1.string().optional(),
+	hoverBackgroundToken: opaqueButtonColourTokenSchema.optional(),
 	effects: variantEffectsSchema.optional(),
 	sizes: variantSizeOverridesSchema.optional(),
 	affordance: buttonVariantAffordanceSchema.optional()
 });
+/**
+* Temporary persisted-theme admission boundary for issue #1206.
+*
+* Production inventory on 2026-07-22 found 22 rows using the old independent
+* `textColorToken`/border colour shape. New source and all downstream code use
+* only the canonical relationship. Delete this preprocessor after the reviewed
+* production rewrite reports zero legacy rows.
+*/
+const buttonVariantSchema = z$1.preprocess(normalizeLegacyButtonVariantInput, canonicalButtonVariantSchema);
 const buttonSystemSchema = z$1.object({
 	global: buttonGlobalSettingsSchema,
 	variants: z$1.array(buttonVariantSchema).min(1).max(6),
 	sizes: buttonSizesSchema.optional()
 });
+function normalizeLegacyButtonVariantInput(input) {
+	if (!isUnknownRecord(input)) return input;
+	const background = input.background;
+	if (!isUnknownRecord(background)) return input;
+	if (!(background.type === "transparent" || Object.prototype.hasOwnProperty.call(input, "textColorToken") || isUnknownRecord(input.border) && Object.prototype.hasOwnProperty.call(input.border, "colorToken") || hasLegacyButtonEffects(input.effects) || hasLegacyAlphaToken(input, background))) return input;
+	const { textColorToken, ...withoutLegacyText } = input;
+	const normalizedBorder = isUnknownRecord(input.border) && typeof input.border.widthClass === "string" ? { widthClass: input.border.widthClass } : input.border;
+	const normalizedAffordance = isUnknownRecord(input.affordance) && typeof input.affordance.iconId === "string" ? { iconId: input.affordance.iconId } : input.affordance;
+	const normalizedEffects = normalizeLegacyButtonEffects(input.effects, background.type);
+	const hoverBackgroundToken = stripLegacyTokenAlpha(input.hoverBackgroundToken);
+	if (background.type === "transparent") return {
+		...withoutLegacyText,
+		background: {
+			type: "surface",
+			role: "link"
+		},
+		border: normalizedBorder,
+		affordance: normalizedAffordance,
+		effects: normalizedEffects,
+		hoverBackgroundToken
+	};
+	if (background.type === "gradient") {
+		const stops = Array.isArray(background.stops) ? background.stops.map(stripLegacyTokenAlpha) : background.stops;
+		return {
+			...withoutLegacyText,
+			background: {
+				...background,
+				stops,
+				foregroundToken: stripLegacyTokenAlpha(background.foregroundToken ?? textColorToken)
+			},
+			border: normalizedBorder,
+			affordance: normalizedAffordance,
+			effects: normalizedEffects,
+			hoverBackgroundToken
+		};
+	}
+	return {
+		...withoutLegacyText,
+		background: background.type === "solid" ? {
+			...background,
+			colorToken: stripLegacyTokenAlpha(background.colorToken)
+		} : background,
+		border: normalizedBorder,
+		affordance: normalizedAffordance,
+		effects: normalizedEffects,
+		hoverBackgroundToken
+	};
+}
+function normalizeLegacyButtonGlobalInput(input) {
+	if (!isUnknownRecord(input)) return input;
+	const hoverColorToken = stripLegacyTokenAlpha(input.hoverColorToken);
+	return hoverColorToken === input.hoverColorToken ? input : {
+		...input,
+		hoverColorToken
+	};
+}
+function hasLegacyAlphaToken(input, background) {
+	const stops = isUnknownArray(background.stops) ? background.stops : [];
+	return [
+		input.hoverBackgroundToken,
+		background.colorToken,
+		background.foregroundToken,
+		...stops
+	].some((token) => stripLegacyTokenAlpha(token) !== token);
+}
+function stripLegacyTokenAlpha(value) {
+	if (typeof value !== "string") return value;
+	const slashIndex = value.indexOf("/");
+	return slashIndex < 0 ? value : value.slice(0, slashIndex);
+}
+function hasLegacyButtonEffects(input) {
+	if (!isUnknownRecord(input)) return false;
+	return [
+		"base",
+		"hover",
+		"active",
+		"focus"
+	].some((state) => {
+		const effects = input[state];
+		return Array.isArray(effects) && effects.some((effect) => {
+			if (!isUnknownRecord(effect) || typeof effect.effectId !== "string") return true;
+			const classification = classifyButtonEffectId(effect.effectId);
+			if (classification !== "colour-transition" && classification !== "non-colour") return true;
+			return effect.effectId === "background-on-hover" && isUnknownRecord(effect.options) && stripLegacyTokenAlpha(effect.options.colorToken) !== effect.options.colorToken;
+		});
+	});
+}
+function normalizeLegacyButtonEffects(input, backgroundType) {
+	if (!isUnknownRecord(input)) return input;
+	const normalized = {};
+	for (const state of [
+		"base",
+		"hover",
+		"active",
+		"focus"
+	]) {
+		const effects = input[state];
+		if (!Array.isArray(effects)) continue;
+		const safeEffects = effects.flatMap((effect) => {
+			if (!isUnknownRecord(effect) || typeof effect.effectId !== "string") return [];
+			const classification = classifyButtonEffectId(effect.effectId);
+			if (classification === "non-colour") return [effect];
+			if (classification !== "colour-transition") return [];
+			if (effect.effectId === "background-on-hover") {
+				const options = isUnknownRecord(effect.options) ? effect.options : null;
+				const colorToken = options === null ? null : parseOpaqueButtonColourToken(stripLegacyTokenAlpha(options.colorToken));
+				return colorToken === null ? [] : [{
+					...effect,
+					options: {
+						...options,
+						colorToken
+					}
+				}];
+			}
+			if (backgroundType !== "solid") return [];
+			const rawAmount = isUnknownRecord(effect.options) ? effect.options.amount : void 0;
+			const amount = typeof rawAmount === "number" && rawAmount > 0 ? Math.max(100, Math.round(rawAmount / 100) * 100) : 100;
+			return [{
+				...effect,
+				options: {
+					...isUnknownRecord(effect.options) ? effect.options : {},
+					amount
+				}
+			}];
+		});
+		if (safeEffects.length > 0) normalized[state] = safeEffects;
+	}
+	return Object.keys(normalized).length === 0 ? void 0 : normalized;
+}
+function isUnknownRecord(value) {
+	return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+function isUnknownArray(value) {
+	return Array.isArray(value);
+}
 //#endregion
 //#region ../theme-core/src/buttons/classNames.ts
 function themeButtonVariantClassNames(variant) {
@@ -264,6 +534,29 @@ function themeButtonClassName(spec) {
 		spec.extraClassName
 	].filter(Boolean).join(" ");
 }
+//#endregion
+//#region ../theme-core/src/palette/utils/colorConversion.ts
+function hexToRgb(hex) {
+	const h = hex.replace(/^#/, "");
+	const m = h.length === 3 ? h.split("").map((c) => c + c).join("") : h;
+	if (m.length !== 6) throw new Error("Bad hex");
+	const int = parseInt(m, 16);
+	return {
+		r: int >> 16 & 255,
+		g: int >> 8 & 255,
+		b: int & 255
+	};
+}
+function srgbToLinear(u) {
+	const x = u / 255;
+	return x <= .04045 ? x / 12.92 : Math.pow((x + .055) / 1.055, 2.4);
+}
+//#endregion
+//#region ../theme-core/src/palette/utils/contrast.ts
+function relativeLuminance(r, g, b) {
+	const R = srgbToLinear(r), G = srgbToLinear(g), B = srgbToLinear(b);
+	return .2126 * R + .7152 * G + .0722 * B;
+}
 buttonSizeNameSchema.options;
 //#endregion
 //#region ../theme-core/src/site-styles/styleTags.ts
@@ -323,7 +616,7 @@ function defineButtonPersonality(input) {
 		name: input.name,
 		description: input.description,
 		tags: input.tags,
-		buttonSystem: input.buttonSystem
+		buttonSystem: buttonSystemSchema.parse(input.buttonSystem)
 	};
 }
 //#endregion
@@ -376,19 +669,15 @@ const brushedWash = defineButtonPersonality({
 				background: {
 					type: "gradient",
 					stops: ["primary", "accent"],
-					direction: "to-r"
+					direction: "to-r",
+					foregroundToken: "primaryForeground"
 				},
-				textColorToken: "primaryForeground",
 				borderRadius: "rounded-lg",
 				shadow: {
 					elevation: "low",
 					softness: "soft",
 					position: "bottom"
-				},
-				effects: { hover: [{
-					effectId: "opacity-reduce",
-					options: { reduction: -15 }
-				}] }
+				}
 			},
 			{
 				id: "secondary",
@@ -398,32 +687,27 @@ const brushedWash = defineButtonPersonality({
 				background: {
 					type: "gradient",
 					stops: ["secondary", "accent"],
-					direction: "to-br"
+					direction: "to-br",
+					foregroundToken: "primaryForeground"
 				},
-				textColorToken: "primaryForeground",
 				borderRadius: "rounded-lg",
 				shadow: {
 					elevation: "low",
 					softness: "soft",
 					position: "bottom"
-				},
-				effects: { hover: [{
-					effectId: "opacity-reduce",
-					options: { reduction: -15 }
-				}] }
+				}
 			},
 			{
 				id: "outline",
 				name: "Outline",
 				enabled: true,
 				priority: 3,
-				background: { type: "transparent" },
-				textColorToken: "primary",
-				borderRadius: "rounded-lg",
-				border: {
-					widthClass: "border",
-					colorToken: "primary"
+				background: {
+					type: "surface",
+					role: "link"
 				},
+				borderRadius: "rounded-lg",
+				border: { widthClass: "border" },
 				effects: { hover: [{
 					effectId: "background-on-hover",
 					options: { colorToken: "surface" }
@@ -434,8 +718,10 @@ const brushedWash = defineButtonPersonality({
 				name: "Ghost",
 				enabled: true,
 				priority: 3,
-				background: { type: "transparent" },
-				textColorToken: "text",
+				background: {
+					type: "surface",
+					role: "link"
+				},
 				borderRadius: "rounded-lg",
 				effects: { hover: [{
 					effectId: "background-on-hover",
@@ -481,7 +767,6 @@ const confidentChip = defineButtonPersonality({
 					type: "solid",
 					colorToken: "primary"
 				},
-				textColorToken: "primaryForeground",
 				borderRadius: "rounded-md",
 				shadow: {
 					elevation: "medium",
@@ -491,7 +776,7 @@ const confidentChip = defineButtonPersonality({
 				effects: {
 					hover: [{
 						effectId: "darken-background",
-						options: { amount: 60 }
+						options: { amount: 100 }
 					}],
 					active: [{
 						effectId: "scale-down",
@@ -508,12 +793,8 @@ const confidentChip = defineButtonPersonality({
 					type: "solid",
 					colorToken: "surface"
 				},
-				textColorToken: "text",
 				borderRadius: "rounded-md",
-				border: {
-					widthClass: "border",
-					colorToken: "border"
-				},
+				border: { widthClass: "border" },
 				effects: { hover: [{
 					effectId: "background-on-hover",
 					options: { colorToken: "background" }
@@ -524,13 +805,12 @@ const confidentChip = defineButtonPersonality({
 				name: "Outline",
 				enabled: true,
 				priority: 3,
-				background: { type: "transparent" },
-				textColorToken: "primary",
-				borderRadius: "rounded-md",
-				border: {
-					widthClass: "border",
-					colorToken: "primary"
+				background: {
+					type: "surface",
+					role: "link"
 				},
+				borderRadius: "rounded-md",
+				border: { widthClass: "border" },
 				effects: { hover: [{
 					effectId: "background-on-hover",
 					options: { colorToken: "surface" }
@@ -541,8 +821,10 @@ const confidentChip = defineButtonPersonality({
 				name: "Ghost",
 				enabled: true,
 				priority: 3,
-				background: { type: "transparent" },
-				textColorToken: "primary",
+				background: {
+					type: "surface",
+					role: "link"
+				},
 				borderRadius: "rounded-md",
 				effects: { hover: [{
 					effectId: "background-on-hover",
@@ -605,7 +887,6 @@ const earthPill = defineButtonPersonality({
 					type: "solid",
 					colorToken: "primary"
 				},
-				textColorToken: "primaryForeground",
 				borderRadius: "rounded-full",
 				shadow: {
 					elevation: "low",
@@ -631,13 +912,12 @@ const earthPill = defineButtonPersonality({
 				name: "Secondary",
 				enabled: true,
 				priority: 2,
-				background: { type: "transparent" },
-				textColorToken: "primary",
-				borderRadius: "rounded-full",
-				border: {
-					widthClass: "border",
-					colorToken: "primary"
+				background: {
+					type: "surface",
+					role: "link"
 				},
+				borderRadius: "rounded-full",
+				border: { widthClass: "border" },
 				effects: { hover: [{
 					effectId: "background-on-hover",
 					options: { colorToken: "muted" }
@@ -648,13 +928,12 @@ const earthPill = defineButtonPersonality({
 				name: "Outline",
 				enabled: true,
 				priority: 3,
-				background: { type: "transparent" },
-				textColorToken: "text",
-				borderRadius: "rounded-full",
-				border: {
-					widthClass: "border",
-					colorToken: "border"
+				background: {
+					type: "surface",
+					role: "link"
 				},
+				borderRadius: "rounded-full",
+				border: { widthClass: "border" },
 				effects: { hover: [{
 					effectId: "background-on-hover",
 					options: { colorToken: "surfaceAlt" }
@@ -665,8 +944,10 @@ const earthPill = defineButtonPersonality({
 				name: "Ghost",
 				enabled: true,
 				priority: 3,
-				background: { type: "transparent" },
-				textColorToken: "primary",
+				background: {
+					type: "surface",
+					role: "link"
+				},
 				borderRadius: "rounded-full",
 				shadow: {
 					elevation: "none",
@@ -687,11 +968,7 @@ const earthPill = defineButtonPersonality({
 						padding: "0.625rem 0",
 						fontSize: "text-xl"
 					}
-				},
-				effects: { hover: [{
-					effectId: "opacity-reduce",
-					options: { reduction: 25 }
-				}] }
+				}
 			}
 		]
 	}
@@ -727,8 +1004,10 @@ const editorialLink = defineButtonPersonality({
 				name: "Primary",
 				enabled: true,
 				priority: 1,
-				background: { type: "transparent" },
-				textColorToken: "text",
+				background: {
+					type: "surface",
+					role: "link"
+				},
 				borderRadius: "rounded-none",
 				sizes: {
 					sm: { padding: "0.25rem 0" },
@@ -750,8 +1029,10 @@ const editorialLink = defineButtonPersonality({
 				name: "Secondary",
 				enabled: true,
 				priority: 2,
-				background: { type: "transparent" },
-				textColorToken: "mutedText",
+				background: {
+					type: "surface",
+					role: "link"
+				},
 				borderRadius: "rounded-none",
 				sizes: {
 					sm: { padding: "0.25rem 0" },
@@ -773,8 +1054,10 @@ const editorialLink = defineButtonPersonality({
 				name: "Outline",
 				enabled: true,
 				priority: 3,
-				background: { type: "transparent" },
-				textColorToken: "accent",
+				background: {
+					type: "surface",
+					role: "link"
+				},
 				borderRadius: "rounded-none",
 				sizes: {
 					sm: { padding: "0.25rem 0" },
@@ -796,19 +1079,17 @@ const editorialLink = defineButtonPersonality({
 				name: "Ghost",
 				enabled: true,
 				priority: 3,
-				background: { type: "transparent" },
-				textColorToken: "mutedText",
+				background: {
+					type: "surface",
+					role: "link"
+				},
 				borderRadius: "rounded-none",
 				sizes: {
 					sm: { padding: "0.25rem 0" },
 					md: { padding: "0.5rem 0" },
 					lg: { padding: "0.625rem 0" },
 					xl: { padding: "0.75rem 0" }
-				},
-				effects: { hover: [{
-					effectId: "opacity-reduce",
-					options: { reduction: -20 }
-				}] }
+				}
 			}
 		]
 	}
@@ -870,12 +1151,8 @@ const flatInk = defineButtonPersonality({
 					type: "solid",
 					colorToken: "primary"
 				},
-				textColorToken: "primaryForeground",
 				borderRadius: "rounded-lg",
-				affordance: {
-					iconId: "ArrowRight",
-					colorToken: "accent"
-				},
+				affordance: { iconId: "ArrowRight" },
 				effects: { hover: [{
 					effectId: "lift",
 					options: { translateY: "-2px" }
@@ -889,13 +1166,12 @@ const flatInk = defineButtonPersonality({
 				name: "Secondary",
 				enabled: true,
 				priority: 2,
-				background: { type: "transparent" },
-				textColorToken: "primary",
-				borderRadius: "rounded-lg",
-				border: {
-					widthClass: "border",
-					colorToken: "border"
+				background: {
+					type: "surface",
+					role: "link"
 				},
+				borderRadius: "rounded-lg",
+				border: { widthClass: "border" },
 				effects: { hover: [{
 					effectId: "lift",
 					options: { translateY: "-2px" }
@@ -913,12 +1189,8 @@ const flatInk = defineButtonPersonality({
 					type: "solid",
 					colorToken: "accent"
 				},
-				textColorToken: "accentForeground",
 				borderRadius: "rounded-lg",
-				affordance: {
-					iconId: "ArrowRight",
-					colorToken: "accentForeground"
-				},
+				affordance: { iconId: "ArrowRight" },
 				effects: { hover: [{
 					effectId: "lift",
 					options: { translateY: "-2px" }
@@ -981,7 +1253,6 @@ const inkStamp = defineButtonPersonality({
 					type: "solid",
 					colorToken: "primary"
 				},
-				textColorToken: "primaryForeground",
 				borderRadius: "rounded-md",
 				effects: {
 					hover: [{
@@ -1002,13 +1273,12 @@ const inkStamp = defineButtonPersonality({
 				name: "Secondary",
 				enabled: true,
 				priority: 2,
-				background: { type: "transparent" },
-				textColorToken: "primary",
-				borderRadius: "rounded-md",
-				border: {
-					widthClass: "border-2",
-					colorToken: "primary"
+				background: {
+					type: "surface",
+					role: "link"
 				},
+				borderRadius: "rounded-md",
+				border: { widthClass: "border-2" },
 				effects: { hover: [{
 					effectId: "background-on-hover",
 					options: { colorToken: "surface" }
@@ -1019,13 +1289,12 @@ const inkStamp = defineButtonPersonality({
 				name: "Outline",
 				enabled: true,
 				priority: 3,
-				background: { type: "transparent" },
-				textColorToken: "text",
-				borderRadius: "rounded-md",
-				border: {
-					widthClass: "border-2",
-					colorToken: "border"
+				background: {
+					type: "surface",
+					role: "link"
 				},
+				borderRadius: "rounded-md",
+				border: { widthClass: "border-2" },
 				effects: { hover: [{
 					effectId: "background-on-hover",
 					options: { colorToken: "surface" }
@@ -1036,8 +1305,10 @@ const inkStamp = defineButtonPersonality({
 				name: "Ghost",
 				enabled: true,
 				priority: 3,
-				background: { type: "transparent" },
-				textColorToken: "accent",
+				background: {
+					type: "surface",
+					role: "link"
+				},
 				borderRadius: "rounded-none",
 				sizes: {
 					sm: {
@@ -1130,7 +1401,6 @@ const joyStamp = defineButtonPersonality({
 				type: "solid",
 				colorToken: "primary"
 			},
-			textColorToken: "primaryForeground",
 			borderRadius: "rounded-full",
 			shadow: {
 				elevation: "high",
@@ -1144,13 +1414,12 @@ const joyStamp = defineButtonPersonality({
 			name: "Secondary",
 			enabled: true,
 			priority: 2,
-			background: { type: "transparent" },
-			textColorToken: "text",
-			borderRadius: "rounded-full",
-			border: {
-				widthClass: "border-2",
-				colorToken: "text"
+			background: {
+				type: "surface",
+				role: "link"
 			},
+			borderRadius: "rounded-full",
+			border: { widthClass: "border-2" },
 			shadow: {
 				elevation: "high",
 				softness: "hard",
@@ -1215,12 +1484,8 @@ const ornateRitual = defineButtonPersonality({
 					type: "solid",
 					colorToken: "primary"
 				},
-				textColorToken: "primaryForeground",
 				borderRadius: "rounded-md",
-				border: {
-					widthClass: "border",
-					colorToken: "primary"
-				},
+				border: { widthClass: "border" },
 				effects: {
 					hover: [{
 						effectId: "background-on-hover",
@@ -1241,12 +1506,8 @@ const ornateRitual = defineButtonPersonality({
 					type: "solid",
 					colorToken: "secondary"
 				},
-				textColorToken: "primaryForeground",
 				borderRadius: "rounded-md",
-				border: {
-					widthClass: "border",
-					colorToken: "primary"
-				},
+				border: { widthClass: "border" },
 				effects: { hover: [{
 					effectId: "background-on-hover",
 					options: { colorToken: "surface" }
@@ -1257,13 +1518,12 @@ const ornateRitual = defineButtonPersonality({
 				name: "Outline",
 				enabled: true,
 				priority: 3,
-				background: { type: "transparent" },
-				textColorToken: "primary",
-				borderRadius: "rounded-md",
-				border: {
-					widthClass: "border",
-					colorToken: "primary"
+				background: {
+					type: "surface",
+					role: "link"
 				},
+				borderRadius: "rounded-md",
+				border: { widthClass: "border" },
 				effects: { hover: [{
 					effectId: "background-on-hover",
 					options: { colorToken: "muted" }
@@ -1274,8 +1534,10 @@ const ornateRitual = defineButtonPersonality({
 				name: "Ghost",
 				enabled: true,
 				priority: 3,
-				background: { type: "transparent" },
-				textColorToken: "accent",
+				background: {
+					type: "surface",
+					role: "link"
+				},
 				borderRadius: "rounded-none",
 				sizes: {
 					sm: {
@@ -1357,14 +1619,10 @@ const pebble = defineButtonPersonality({
 					type: "solid",
 					colorToken: "primary"
 				},
-				textColorToken: "primaryForeground",
 				borderRadius: "rounded-full",
 				effects: { hover: [{
-					effectId: "background-on-hover-alpha",
-					options: {
-						colorToken: "primary",
-						opacity: 88
-					}
+					effectId: "darken-background",
+					options: { amount: 100 }
 				}] }
 			},
 			{
@@ -1372,13 +1630,12 @@ const pebble = defineButtonPersonality({
 				name: "Secondary",
 				enabled: true,
 				priority: 2,
-				background: { type: "transparent" },
-				textColorToken: "primary",
-				borderRadius: "rounded-full",
-				border: {
-					widthClass: "border-2",
-					colorToken: "accent"
+				background: {
+					type: "surface",
+					role: "link"
 				},
+				borderRadius: "rounded-full",
+				border: { widthClass: "border-2" },
 				effects: { hover: [{
 					effectId: "background-on-hover",
 					options: { colorToken: "accent" }
@@ -1389,13 +1646,12 @@ const pebble = defineButtonPersonality({
 				name: "Outline",
 				enabled: true,
 				priority: 3,
-				background: { type: "transparent" },
-				textColorToken: "text",
-				borderRadius: "rounded-full",
-				border: {
-					widthClass: "border",
-					colorToken: "border"
+				background: {
+					type: "surface",
+					role: "link"
 				},
+				borderRadius: "rounded-full",
+				border: { widthClass: "border" },
 				effects: { hover: [{
 					effectId: "background-on-hover",
 					options: { colorToken: "surface" }
@@ -1406,8 +1662,10 @@ const pebble = defineButtonPersonality({
 				name: "Ghost",
 				enabled: true,
 				priority: 3,
-				background: { type: "transparent" },
-				textColorToken: "primary",
+				background: {
+					type: "surface",
+					role: "link"
+				},
 				borderRadius: "rounded-full",
 				sizes: {
 					sm: {
@@ -1423,11 +1681,7 @@ const pebble = defineButtonPersonality({
 						padding: "0.75rem 1.5rem",
 						fontSize: "text-xl"
 					}
-				},
-				effects: { hover: [{
-					effectId: "opacity-reduce",
-					options: { reduction: 30 }
-				}] }
+				}
 			}
 		]
 	}
@@ -1489,15 +1743,11 @@ const quietArrow = defineButtonPersonality({
 					type: "solid",
 					colorToken: "primary"
 				},
-				textColorToken: "primaryForeground",
 				borderRadius: "rounded-xl",
 				affordance: { iconId: "ArrowRight" },
 				effects: { hover: [{
-					effectId: "background-on-hover-alpha",
-					options: {
-						colorToken: "primary",
-						opacity: 90
-					}
+					effectId: "darken-background",
+					options: { amount: 100 }
 				}] }
 			},
 			{
@@ -1505,13 +1755,12 @@ const quietArrow = defineButtonPersonality({
 				name: "Secondary",
 				enabled: true,
 				priority: 2,
-				background: { type: "transparent" },
-				textColorToken: "primary",
-				borderRadius: "rounded-xl",
-				border: {
-					widthClass: "border",
-					colorToken: "primary"
+				background: {
+					type: "surface",
+					role: "link"
 				},
+				borderRadius: "rounded-xl",
+				border: { widthClass: "border" },
 				affordance: { iconId: "ArrowRight" },
 				effects: { hover: [{
 					effectId: "background-on-hover",
@@ -1523,21 +1772,22 @@ const quietArrow = defineButtonPersonality({
 				name: "Outline",
 				enabled: true,
 				priority: 3,
-				background: { type: "transparent" },
-				textColorToken: "primary",
+				background: {
+					type: "surface",
+					role: "link"
+				},
 				borderRadius: "rounded-xl",
-				border: {
-					widthClass: "border",
-					colorToken: "primary"
-				}
+				border: { widthClass: "border" }
 			},
 			{
 				id: "ghost",
 				name: "Ghost",
 				enabled: true,
 				priority: 3,
-				background: { type: "transparent" },
-				textColorToken: "primary",
+				background: {
+					type: "surface",
+					role: "link"
+				},
 				borderRadius: "rounded-xl"
 			}
 		]
@@ -1601,7 +1851,6 @@ const showtimePill = defineButtonPersonality({
 					type: "solid",
 					colorToken: "primary"
 				},
-				textColorToken: "background",
 				borderRadius: "rounded-full",
 				effects: { hover: [{ effectId: "pop" }] }
 			},
@@ -1610,13 +1859,12 @@ const showtimePill = defineButtonPersonality({
 				name: "Secondary",
 				enabled: true,
 				priority: 2,
-				background: { type: "transparent" },
-				textColorToken: "primary",
-				borderRadius: "rounded-full",
-				border: {
-					widthClass: "border-2",
-					colorToken: "primary"
+				background: {
+					type: "surface",
+					role: "link"
 				},
+				borderRadius: "rounded-full",
+				border: { widthClass: "border-2" },
 				effects: { hover: [{ effectId: "pop" }] }
 			},
 			{
@@ -1628,7 +1876,6 @@ const showtimePill = defineButtonPersonality({
 					type: "solid",
 					colorToken: "secondary"
 				},
-				textColorToken: "primary",
 				borderRadius: "rounded-full",
 				effects: { hover: [{ effectId: "pop" }] }
 			},
@@ -1641,12 +1888,8 @@ const showtimePill = defineButtonPersonality({
 					type: "solid",
 					colorToken: "background"
 				},
-				textColorToken: "primary",
 				borderRadius: "rounded-full",
-				border: {
-					widthClass: "border-2",
-					colorToken: "primary"
-				},
+				border: { widthClass: "border-2" },
 				effects: { hover: [{
 					effectId: "background-on-hover",
 					options: { colorToken: "surface" }
@@ -1657,13 +1900,12 @@ const showtimePill = defineButtonPersonality({
 				name: "Outline",
 				enabled: true,
 				priority: 3,
-				background: { type: "transparent" },
-				textColorToken: "primary",
-				borderRadius: "rounded-full",
-				border: {
-					widthClass: "border-2",
-					colorToken: "primary"
+				background: {
+					type: "surface",
+					role: "link"
 				},
+				borderRadius: "rounded-full",
+				border: { widthClass: "border-2" },
 				effects: { hover: [{
 					effectId: "background-on-hover",
 					options: { colorToken: "background" }
@@ -1674,8 +1916,10 @@ const showtimePill = defineButtonPersonality({
 				name: "Ghost",
 				enabled: true,
 				priority: 3,
-				background: { type: "transparent" },
-				textColorToken: "primary",
+				background: {
+					type: "surface",
+					role: "link"
+				},
 				borderRadius: "rounded-full",
 				effects: { hover: [{
 					effectId: "background-on-hover",
@@ -1721,7 +1965,6 @@ const softPill = defineButtonPersonality({
 					type: "solid",
 					colorToken: "primary"
 				},
-				textColorToken: "primaryForeground",
 				borderRadius: "rounded-full",
 				shadow: {
 					elevation: "low",
@@ -1744,13 +1987,12 @@ const softPill = defineButtonPersonality({
 				name: "Secondary",
 				enabled: true,
 				priority: 2,
-				background: { type: "transparent" },
-				textColorToken: "primary",
-				borderRadius: "rounded-full",
-				border: {
-					widthClass: "border-2",
-					colorToken: "primary"
+				background: {
+					type: "surface",
+					role: "link"
 				},
+				borderRadius: "rounded-full",
+				border: { widthClass: "border-2" },
 				effects: { hover: [{
 					effectId: "background-on-hover",
 					options: { colorToken: "surface" }
@@ -1761,13 +2003,12 @@ const softPill = defineButtonPersonality({
 				name: "Outline",
 				enabled: true,
 				priority: 3,
-				background: { type: "transparent" },
-				textColorToken: "text",
-				borderRadius: "rounded-full",
-				border: {
-					widthClass: "border",
-					colorToken: "border"
+				background: {
+					type: "surface",
+					role: "link"
 				},
+				borderRadius: "rounded-full",
+				border: { widthClass: "border" },
 				effects: { hover: [{
 					effectId: "background-on-hover",
 					options: { colorToken: "surface" }
@@ -1778,8 +2019,10 @@ const softPill = defineButtonPersonality({
 				name: "Ghost",
 				enabled: true,
 				priority: 3,
-				background: { type: "transparent" },
-				textColorToken: "text",
+				background: {
+					type: "surface",
+					role: "link"
+				},
 				borderRadius: "rounded-full",
 				effects: { hover: [{
 					effectId: "background-on-hover",
@@ -1798,9 +2041,8 @@ const solidSecondary = {
 	priority: 2,
 	background: {
 		type: "solid",
-		colorToken: "secondary"
+		colorToken: unsafeAsOpaqueButtonColourToken("secondary")
 	},
-	textColorToken: "onSecondary",
 	borderRadius: "rounded-full",
 	shadow: {
 		elevation: "none",
@@ -1848,5 +2090,26 @@ const buttonPersonalities = [
 	quietArrow
 ];
 new Map(buttonPersonalities.map((p) => [p.id, p]));
+buttonPersonalities.map((personality) => ({
+	id: personality.id,
+	name: personality.name,
+	description: personality.description,
+	category: presetCategory(personality),
+	buttonSystem: personality.buttonSystem,
+	compatibility: {
+		...personality.tags.tone ? { tones: [personality.tags.tone] } : {},
+		...personality.tags.energy ? { energies: [personality.tags.energy] } : {}
+	}
+}));
+function presetCategory(personality) {
+	switch (personality.tags.era) {
+		case "retro": return "retro";
+		case "editorial": return "minimal";
+		case "organic": return "artistic";
+		case "modern": return personality.tags.tone === "bold" ? "modern" : "technical";
+		case "technical": return "technical";
+		case void 0: return "modern";
+	}
+}
 //#endregion
-export { themeButtonClassName as t };
+export { hexToRgb as n, themeButtonClassName as r, relativeLuminance as t };