From 9f1466dc57728a5176ff39906e79c269dd375369 Mon Sep 17 00:00:00 2001 From: dev Date: Tue, 26 May 2026 21:23:42 +0200 Subject: [PATCH] fix(avatar): data-color severity optional to acknowledge custom-color escape hatch MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Audit caught 4 'missing data-color' violations on the Avatar Provider — the demo includes consumers passing non-canonical CSS color strings (`#7c3aed`, `oklch(70% 0.15 220)`, `rgb(245 158 11)`) which the wrapper correctly routes through `data-color-custom=""` + an inline `--avatar-color-custom` CSS variable instead of the enum attr. The morfo enum can't represent arbitrary CSS color strings, so the `data-color` attr is legitimately absent in those cases. The contract should reflect that: severity becomes `optional`. Symmetric with the `Avatar.Badge` part which already declared this attr as optional. Behaviour unchanged. Only the morfo's severity flag changes. After this fix `morfo:check`: 6 issues / 3 components → 2 issues / 2 components. Co-Authored-By: Claude Opus 4.7 (1M context) --- src/uix/morfo/components/avatar.ts | 14 +++++++++++++- 1 file changed, 13 insertions(+), 1 deletion(-) diff --git a/src/uix/morfo/components/avatar.ts b/src/uix/morfo/components/avatar.ts index b6772a349..b149b1af3 100644 --- a/src/uix/morfo/components/avatar.ts +++ b/src/uix/morfo/components/avatar.ts @@ -25,6 +25,17 @@ export const avatarMorfo = { value: v.propRef('variant') }, { + // Optional severity acknowledges the documented escape + // hatch: the wrapper accepts any CSS color string + // (hex, oklch, rgb, etc.) and routes non-canonical + // values through `data-color-custom` + a + // `--avatar-color-custom` inline CSS variable instead. + // When the consumer passes a canonical role + // (`primary`, `affirm`, etc.) the enum value lands + // here; when they pass a custom color, this attr is + // absent by design (the recipe knows to fall through + // to the custom path). Symmetric with `Avatar.Badge`, + // which already declared this attr as optional. attr: 'data-color', values: [ 'primary', @@ -36,7 +47,8 @@ export const avatarMorfo = { 'threat', 'loss' ], - value: v.propRef('color') + value: v.propRef('color'), + severity: 'optional' }, { attr: 'data-radius',