Code (inline)

Default (copyable on hover)

Run npm install malevich to install the design system. Then start the dev server with pnpm dev.

Opt out

A placeholder identifier like PROJECT_ROOT doesn't need a copy button.

Variants

Default name, accent accent, danger --no-verify, muted deprecated. 


  
/*
 * Code (inline) — element (display)
 *
 * Inline code styling. Uses native <code>. Copyable by default via
 * the copyable behavior modifier — opt out with data-copyable="false".
 *
 *   <code class="code">npm install malevich</code>
 *   <code class="code" data-copyable="false">no copy button</code>
 *   <code class="code -accent">highlighted</code>
 */

@layer malevich.components {
  .code {
    display: inline-flex;
    align-items: center;

    padding-block: var(--space-inset-element-s);
    padding-inline: var(--space-inset-element-m);

    background-color: var(--color-surface-raised);
    color: var(--color-ink-strong);

    border: var(--border-width-hairline) solid var(--color-border-muted);
    border-radius: var(--radius-tag);

    font-family: var(--font-mono-m-family);
    font-size: var(--font-mono-m-size);
    font-weight: var(--font-mono-m-weight);
    line-height: var(--font-mono-m-line-height);
    letter-spacing: var(--font-mono-m-letter-spacing);

    white-space: nowrap;
  }

  /* Copy button slot reservation. When data-copyable="true", the
   * runtime appends a button positioned by the shared copyable CSS.
   * The padding-inline-end below leaves room so long code text
   * doesn't slide under the button on hover.
   */
  .code[data-copyable="true"] {
    padding-inline-end: var(--space-inset-element-l);
  }

  .code.-accent {
    background-color: var(--color-accent-muted);
    color: var(--color-accent-strong);
    border-color: var(--color-accent-muted);
  }

  .code.-danger {
    background-color: var(--color-surface-raised);
    color: var(--color-danger);
    border-color: var(--color-danger);
  }

  .code.-muted {
    background-color: var(--color-surface-canvas);
    color: var(--color-ink-regular);
    border-color: var(--color-border-muted);
  }
}


  
This component is pure CSS — no JavaScript required.

  
# Code — AGENTS.md

> Auto-generated from `code.docs.md` + the modifier applicability matrix.
> Edit those source files; this file regenerates on build.

## Identity

- **Component:** `code`
- **Layer:** elements
- **Status:** stable
- **Last updated:** 2026-05-18

## Summary

- Inline references to identifiers, commands, file paths inside prose.

## Variants

| Variant | Class             | Use for                                   |
|---------|-------------------|-------------------------------------------|
| Default | `.code`           | Standard inline code                      |
| Accent  | `.code.-accent`   | Highlighted reference (e.g. a key term)   |
| Danger  | `.code.-danger`   | Removed/forbidden value, error references |
| Muted   | `.code.-muted`    | De-emphasized within muted prose          |

## Modifier applicability

Per ADR-0007. Modifiers attach via `data-{category}="value"` attributes.

| Category | Accepts |
|---|---|
| `background` | — |
| `surface` | `flat` |
| `effect` | — |
| `shader` | — |
| `rhythm` | — |
| `motion` | any value |
| `behavior` | `copyable` |

## Anatomy

```html
<!-- Default: copyable on hover -->
<code class="code">npm install malevich</code>

<!-- Inside a paragraph -->
<p>Run <code class="code">pnpm dev</code> to start the dev server.</p>

<!-- Opted out of copy -->
<code class="code" data-copyable="false">just a label</code>

<!-- Variants -->
<code class="code -accent">malevich</code>
<code class="code -danger">--no-verify</code>
<code class="code -muted">deprecated-flag</code>
```

The runtime injects an overlay button:

```html
<code class="code" data-copyable="true" data-malevich-copyable-ready="true">
  npm install malevich
  <button class="malevich-copyable__button" type="button" aria-label="Copy to clipboard">
    <svg>…</svg>
  </button>
  <span class="malevich-copyable__live" aria-live="polite" aria-atomic="true"></span>
</code>
```

Authors should not pre-author the button; it is the runtime's
responsibility.

## Tokens consumed

### From semantic tier
- `--color-surface-raised` — background
- `--color-surface-canvas` — muted variant background
- `--color-accent-muted` — accent variant background + border
- `--color-accent-strong` — accent variant text
- `--color-ink-strong` — default text
- `--color-ink-regular` — muted variant text
- `--color-danger` — danger variant text + border
- `--color-border-muted` — default and muted borders
- `--space-inset-element-s` / `-m` / `-l` — padding
- `--radius-tag` — corner radius
- `--border-width-hairline` — border thickness
- `--font-mono-m-*` — typography

## Accessibility contract

`<code>` carries an implicit semantic role and is the correct element
for inline code.

The copy button is fully keyboard accessible: it receives focus via
tab order, has `aria-label="Copy to clipboard"`, and triggers on
Enter/Space (browser default for `<button>`). After a successful copy,
its label updates to `"Copied"` and a polite `aria-live` region
announces the result.

The button is visible only on hover, focus-within, or when the button
itself has focus — so keyboard users discover it via tabbing.

The host's `data-copied="true"` attribute is removed after 1.5s; CSS
applies a success color tint during that window.

## Guidance

### Do

- Use `<code>` as the tag.
- Let the runtime own the copy button — don't author it manually.
- Use `data-copyable="false"` for cases where the code is illustrative
  and the copy button would clutter (very short tokens inside dense
  prose, sidebar references).

### Don't

- Don't use `<code>` for keyboard shortcuts. Use `<kbd>` instead — see
  `kbd.docs.md`.
- Don't override the monospace font. It is a recognition cue.
- Don't combine `.code` with `<pre>`. For multi-line code use Code
  block (a separate component).




\n  ";