# 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

```ts
import "elements-kit/ui/styles.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

```html
<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`).

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