Vitre CSS Documentation

Element Coverage

Vitre includes defaults for common document and interface elements.

Typography: headings, paragraphs, links, lists, blockquotes, marks, edits, metadata, and rules
Forms: labels, buttons, inputs, textareas, selects, outputs, fieldsets, radios, and checkboxes
Data: tables, captions, code, keyboard hints, progress, and meters
Structure: article cards, nested asides, definition lists, and role-based alerts
Interactive and embedded elements: details, summary, dialog, audio, objects, and dialog-like regions

Use the kitchen sink test page during development to review broader element coverage.

Install

Use Vitre directly from npm, a CDN, or a local copy.

npm install vitre-css

<link rel="stylesheet" href="https://unpkg.com/vitre-css/vitre.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vitre-css/vitre.css">

For local use, copy `vitre.css` and link it from your page:

<link rel="stylesheet" href="vitre.css">

Usage

Write ordinary semantic HTML. Vitre styles elements directly.

<main>
  <section>
    <h1>Account settings</h1>
    <p>Manage your profile and notification preferences.</p>

    <form>
      <label>
        Email
        <input type="email" placeholder="you@example.com">
      </label>

      <button>Save changes</button>
    </form>
  </section>
</main>

CSS Variables

Customize Vitre by overriding `--vitre-*` variables after importing the stylesheet.

:root {
  --vitre-hue: 168;
  --vitre-primary: hsl(var(--vitre-hue) 76% 42%);
  --vitre-font-weight: 400;
  --vitre-radius: 0.5rem;
  --vitre-measure: 80ch;
  --vitre-button-bg-angle: 180deg;
}

Button gradients are controlled by variables and common button treatments are available with data-variant.

:root {
  --vitre-button-bg-start: color-mix(in oklab, var(--vitre-primary), white 24%);
  --vitre-button-bg-end: color-mix(in oklab, var(--vitre-primary), black 8%);
  --vitre-button-bg-image: none;
}

<button type="button" data-variant="flat">Flat button</button>
<button type="button" data-variant="outline">Outline button</button>
<button type="button" data-variant="ghost">Ghost button</button>
<button type="button" data-variant="plain">Plain button</button>

Token	Preview	Role
`--vitre-primary`		Links, focus, and primary actions
`--vitre-bg`		Page background
`--vitre-surface`		Panels and elevated surfaces
`--vitre-text`		Primary text
`--vitre-muted`		Secondary text
`--vitre-font-weight`		Base document text weight
`--vitre-nav-gap`		Default spacing between items in navigation regions
`--vitre-button-bg-image`		Button background gradient; used by the default and flat button treatments
`--vitre-button-hover-shadow`		Button hover glow and drop shadow
`--vitre-button-hover-glow-shadow`		Glow portion of the button hover shadow

Role-based alerts use semantic ARIA roles and get matching borders, backgrounds, and left accents.

<div role="status">Saved successfully.</div>
<div role="note">Review this note.</div>
<div role="alert">Action required.</div>

Themes

Vitre follows the user's system preference by default. Use `data-theme` on the root element to force light or dark mode.

<html data-theme="dark">