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

Eidos Code

Inline monospace text primitive. Renders <code> by default applying the foundation's --style-code-* tokens. Sits inline within prose — for keywords, identifiers, file names. Multi-line code blocks use the separate <CodeBlock> primitive.

Superficie

<p>Run <Code>npm install</Code> to install dependencies.</p>
<p>Press <Code variant="outline" size="sm">Ctrl+K</Code> to open search.</p>
<Code variant="soft" language="ts">readonly id: string</Code>

Baseline

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

• Split inline vs block: air shipped a single <Code> with variant: 'inline' | 'block'. Eidos splits them — <Code> is inline only, <CodeBlock> is the multi-line surface with optional copy. This matches Radix Themes' Code/CodeBlock split and avoids the runtime if (variant === 'block') branch.
• Sizes: air 1..12 → eidos xxs..xl. The foundation already emits --style-code-font-size (defaults to sm); overrides go through var(--font-size-{key}).
• Visual variant added: plain (default, no chrome), soft (subtle pill), outline. Air's inline was always plain; the soft pill is a Radix Themes / Chakra convenience for surfacing inline code from surrounding prose.
• Color content-role slot: same contract as Text.
• language retained: stamped as data-language for future syntax-highlighting hooks. No highlighting in this version.

Comparativa

Capacidad	UIX Code	Radix Themes Code	Chakra Code	Mantine Code
Inline-only primitive	Sí	Sí	Sí	Sí
Visual variants	plain / soft / outline	size + variant (solid / soft / outline / surface)	colorScheme + variant	block boolean
Size override	Sí (size)	Sí (size)	Sí (fontSize)	Sí (size)
Color override	Sí (content-role)	Sí (color)	Sí (free)	Sí (free)
Language hint	Sí (language, reserved)	No	No	No
Syntax highlighting	No (reserved hook)	No	No	No (Mantine has separate Highlight)

Decisiones

• <Code> is inline only: matches Radix Themes' split. The block surface is <CodeBlock> with its own chrome (copy button, header). Keeps the inline primitive a single CSS rule per variant.
• Default variant plain: respect ambient typography. The soft pill is opt-in when the consumer wants the code to surface from prose.
• Background uses --color-neutral-element: neutral palette so Code doesn't accidentally inherit primary tints from a colored ancestor. Consumer can override with tagStyle.
• Language hint is reserved: stamped as data-language so a future syntax-highlighting hook (a Svelte action or a layout-level hydration pass) can target <Code[data-language]> without re-rendering the primitive.

Eventos Sema

Code declara 0 eventos. Visual-only primitive — no estado interactivo.

Gaps

Gap	Disposición	Detalle
Syntax highlighting	diferir	Reservado vía language prop + data-language. Capa de tooling separada (Shiki / Prism) integrada vía Svelte action.
Click-to-copy on inline code	descartar	El primitive es passive. Si necesitas copy, usa <CodeBlock> (que ya lo lleva).
Free color (hex/CSS)	descartar	Mantiene contrato de contraste; usar tagStyle.
Diff coloring (added/removed line markers)	diferir	Pertenece a <CodeBlock> cuando llegue.

Referencias

• Radix Themes Code: https://www.radix-ui.com/themes/docs/components/code
• Chakra UI Code: https://chakra-ui.com/docs/components/code
• Mantine Code: https://mantine.dev/core/code/
• MDN <code>: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/code

Passive justification

Visual-only (scope: ['eidos']). Una sola part Provider, marker [data-code]. Sin estados, sin keyboard, sin ARIA propia (la semántica viene del tag <code> que AT entienden nativamente). La recipe consume --style-code-* del foundation + --_code-{axis} overrides inline.