Code

Inline <code> styling for code references in body text. Monospace font, tinted background, scales with the typography scale. Class + data-attribute API: one .x-code class plus data-variant, data-size, data-accent.

Install

import "elements-kit/ui/styles/theme.css";
import "elements-kit/ui/styles/scaling.css";
import "elements-kit/ui/styles/radius.css";
import "elements-kit/ui/styles/typography.css";
import "elements-kit/ui/styles/palette/gray.css";
import "elements-kit/ui/styles/neutral/gray.css";
import "elements-kit/ui/styles/palette/mint.css";
import "elements-kit/ui/styles/accent/mint.css";

import "elements-kit/ui/code/code.css";

API

<p>
  Install with <code class="x-code" data-variant="soft">npm install</code>.
</p>

Attribute	Values
data-variant	soft (default), solid, outline, text
data-size	1–9 (default: inherits parent text size)
data-accent	any imported color scale
data-high-contrast	modifier

unset is not required on <code> — it has no native styling that bleeds through. Add it on <a> / <button> wrappers.

Sizing

data-size tracks the text scale (--font-size-1 through --font-size-9). Each variant uses font-size: calc(var(--font-size-N) * 0.95) so code reads slightly smaller than surrounding body text. The text variant skips this scaling — 1em exactly.

Variants

• soft (default) — --accent-a3 background, --accent-a11 text.
• solid — --accent-9 fill, --accent-contrast text. For emphasis (rare for inline code).
• outline — 1px --accent-a8 inset border, transparent background.
• text — no background, no padding. Tinted text only — use inside dense content where backgrounds would compete.

Theming

Set data-accent for variant tints. Without data-accent, the variant falls back to --accent-a* which reads from the inherited accent (set on a parent via data-accent).

<div data-accent="iris">
  Run <code class="x-code">npm run dev</code> to start.
</div>