svelte-kit-vice/src/uix/eidos/components/mark

Eidos Mark

Inline text highlight primitive. Renders <mark> with a soft background tint per intent color. Inherits the ambient typography so it composes seamlessly inside Text / Heading / Code. For substring highlighting of search-result hits, see the higher-level <Highlight> primitive which scans a string and wraps matches in Mark.

Superficie

<p>Lorem ipsum <Mark>dolor sit</Mark> amet.</p>
<p>This is <Mark color="threat">important</Mark>.</p>
<p>And this is <Mark color="affirm">confirmed</Mark>.</p>

Baseline

Origen: air/components/typography/mark (rama morfo-runtime). Adaptaciones para eidos:

• Palette canonized: air shipped yellow / green / blue / red / purple (literal hue names). Eidos maps to the intent vocabulary (primary / secondary / neutral / affirm / fulfill / risk / threat / loss) so the highlight respects the theme contract and changes with the active theme.
• Default fulfill: closest to the legacy "yellow" — search-hit affordance. Air defaulted to yellow.
• Tokens: --air-mark-bg-{hue} → --color-{intent}-element from the foundation contract.
• Inherits typography: no own font-* declarations. Air did the same — Mark decorates, doesn't replace, the typography of its parent.

Comparativa

Capacidad	UIX Mark	Radix Themes Mark	Chakra Mark	Mantine Mark
Inline <mark> element	Sí	Sí	uses Highlight	Sí
Color palette	Intent (8 roles)	accent + intent	colorScheme	intent
Default color	fulfill	yellow accent	yellow	yellow
Inherits typography	Sí	Sí	Sí	Sí
as polymorphism	Sí	Sí	Sí	Sí

Decisiones

• Intent palette: Mark is a highlight in the design system's vocabulary, not a "color" surface. Locking to ColorRole keeps the contrast contract and lets the highlight follow the theme.
• Default fulfill: the closest semantic to "search result hit" / "found this" affordance. If the user wants a deliberate attention-grab, they pass color="threat" or color="risk".
• color: var(--color-{role}-text): ensures legibility on the tinted background; the contrast contract from the foundation guarantees WCAG AA.
• Tag defaults to <mark>: HTML's native highlight element. Screen readers announce mark content with an "emphasized" hint in some configs — but as a hint only; consumers shouldn't rely on it for meaningful semantics. For required emphasis, use <strong> or <em>.

Eventos Sema

Mark declara 0 eventos. Visual-only — el highlight es un decorador inline.

Gaps

Gap	Disposición	Detalle
Free hex / CSS color	descartar	Rompe contrato de contraste con theme. Escape hatch vía tagStyle.
Underline-only variant (no fill)	diferir	Si emerge demanda, añadir `variant: 'fill'
Strikethrough variant	descartar	No es highlight; usar Text con text-decoration: line-through.
Animated entry (e.g. flash)	diferir	Composable vía sema-driven CSS animations en un componente padre.

Referencias

• Radix Themes (no Mark, but accent docs): https://www.radix-ui.com/themes
• Mantine Mark: https://mantine.dev/core/mark/
• MDN <mark>: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/mark

Passive justification

Visual-only (scope: ['eidos']). Una sola part Provider, marker [data-mark]. Sin estados, sin keyboard, sin ARIA propia. La recipe consume --color-{intent}-element + --color-{intent}-text del foundation contract.