` included, as a string or a promise of one. ## Keep it safe [Section titled “Keep it safe”](#keep-it-safe) 
```ts
import DOMPurify from 'dompurify';
import { aparteGlobalConfig } from '@aparte/core';

aparteGlobalConfig.setHtmlSanitizer((html) => DOMPurify.sanitize(html));
```
 What marked and a highlighter return goes through the chat’s HTML sanitizer before it reaches the page, and so does a streamed reply once it finishes, so the Markdown a model writes cannot run script. While a reply streams, a link or an image with an unsafe address is dropped, and a link to another site opens in a new tab. The built-in sanitizer needs no dependency; [`setHtmlSanitizer`](/reference/core/config/#sethtmlsanitizer) swaps in one of yours, such as DOMPurify. ## Route the links a model writes [Section titled “Route the links a model writes”](#route-the-links-a-model-writes) 
```ts
declare const router: { push(path: string): void };   // your app's router

const chat = document.querySelector('aparte-chat');

chat?.addEventListener('aparte-link-click', (event) => {
  const url = new URL(event.detail.href, location.href);
  if (url.origin !== location.origin) return;   // another site: let the browser open it
  event.preventDefault();                       // this one is yours
  router.push(url.pathname + url.search);
});
```
 Before the browser follows a link in a reply, the message fires `aparte-link-click`. It bubbles, so one listener on the chat covers every message, and it can be cancelled: call `preventDefault()` and the navigation is yours — your router, a webview, a question first. The detail is `{ href, anchor, messageId }`. ## Two chats, two setups [Section titled “Two chats, two setups”](#two-chats-two-setups) 
```ts
import { AparteConfig, attachConfig } from '@aparte/core';
import { setupStreamingMarkdownProvider } from '@aparte/plugin-streaming-markdown';
import { setupMarkedProvider } from '@aparte/plugin-marked';
import { setupShikiProvider } from '@aparte/plugin-shiki';

const support = new AparteConfig();
setupStreamingMarkdownProvider(support);
setupMarkedProvider({ breaks: true }, support);
setupShikiProvider({ theme: 'github-dark' }, support);

const chat = document.querySelector('#support-chat');
if (chat) attachConfig(chat, support);
```
 Every setup takes a configuration as its last argument, the page-wide one by default. A configuration of your own starts from the built-in defaults and reads nothing the page-wide one registered, so set up on it every formatter that chat uses; attached to a chat, it formats that chat alone. The framework packages take it as their `config` prop. ## Next [Section titled “Next”](#next) * [Response The formatted reply, its variants and its options.](/components/response/) * [Code block Code as its own part of a reply, with its language and copy button.](/components/code-block/) * [Customization Your own way to draw a part of a message.](/guides/customization/)

# Theme the chat to your brand, in light and dark

> Restyle the whole chat with CSS variables — your brand colours, light and dark, density and shape — on the page, on one part of it, or on one chat.

[The chat in a brand of its own](/preview/demo/theme-brand/) 
```html




  
    
      
      
    
    
      

        

          
          
        
      
    
  

```
 Eight variables on a wrapper, and every part of the chat follows them. ## Set your brand colours [Section titled “Set your brand colours”](#set-your-brand-colours) 
```css
:root,
[data-aparte-theme="light"] {
  --aparte-primary: #b45309;        /* the accent: send button, links, the user's bubble */
  --aparte-primary-hover: #92400e;
  --aparte-bg: #fbf7f0;             /* your page's background */
  --aparte-surface-1: #ffffff;      /* cards, code blocks, the composer */
  --aparte-surface-2: #f4ece0;      /* headers, inline code */
  --aparte-text: #241a12;
  --aparte-text-muted: #7c6f60;
  --aparte-border: #e7dccb;
}
```
 The chat’s colours follow these eight: 241 of core’s variables read another one, such as `--aparte-input-bg`, which is `var(--aparte-surface-1)`, or `--aparte-avatar-bg-user`, which is `var(--aparte-primary)`. Set the bases, not each value they feed. The block wins whichever stylesheet loads first, and its second selector keeps it on an element [forced light](#light-and-dark). A few do not follow them. The status colours — `--aparte-info`, `--aparte-success`, `--aparte-warning`, `--aparte-error` — and `--aparte-secondary` are yours to set in the same block if your brand has an opinion, and so is `--aparte-neutral`, which draws the focus ring, the scrollbar and the neutral buttons. The chat paints no background of its own, so your page shows through it: `--aparte-bg` only tints the progress track and the loading skeleton, and is there for your page too (`body { background: var(--aparte-bg); }`). ### The text on a fill [Section titled “The text on a fill”](#the-text-on-a-fill) 
```css
:root {
  --aparte-primary: #1a1a2e;
  --aparte-on-primary: #f8fafc;
}
```
 The label on a filled button, badge or checkbox is worked out from the fill’s lightness, so it stays readable whatever colour you choose. Set its pair to choose it yourself: `--aparte-on-primary`, `--aparte-on-secondary`, `--aparte-on-neutral`, `--aparte-on-info`, `--aparte-on-success`, `--aparte-on-warning` and `--aparte-on-error`. Two numbers tune the worked-out ink: `--aparte-ink-flip`, the fill lightness where it turns from light to dark, and `--aparte-ink-dark`, how dark it gets. ## Light and dark [Section titled “Light and dark”](#light-and-dark) 
```html







…
```
 With no attribute, the system’s `prefers-color-scheme` decides. `data-aparte-theme` forces either way, on the chat or on any ancestor, so a light panel inside a dark page stays light. The attribute puts core’s palette on the element that carries it, which is why your light block names `[data-aparte-theme="light"]` beside `:root`. ## Give dark its own colours [Section titled “Give dark its own colours”](#give-dark-its-own-colours) 
```css
/* light */
:root,
[data-aparte-theme="light"] {
  --aparte-primary: #087ea4;
  /* …the rest of your light palette */
}

/* dark, when your toggle sets the attribute */
[data-aparte-theme="dark"] {
  --aparte-primary: #58c4dc;
  /* …the same tokens, in dark */
}

/* dark, when the system decides */
@media (prefers-color-scheme: dark) {
  :root:not([data-aparte-theme="light"]) {
    --aparte-primary: #58c4dc;
    /* …the same tokens, in dark */
  }
}
```
 Without a dark block, a dark system shows core’s dark palette rather than your light colours. Give each dark block every token your light block sets. Core’s dark palette has a value for the eight, `--aparte-neutral`, the shadows, the scrim behind dialogs and the error colours (`--aparte-error-bg`, `--aparte-error-text`, `--aparte-error-border`, `--aparte-error-solid`), and any of those you leave out takes core’s dark value rather than yours. Keep the selector of the third block as it is: a bare `:root` inside the media query loses to core’s dark palette. ## Theme one chat, or part of the page [Section titled “Theme one chat, or part of the page”](#theme-one-chat-or-part-of-the-page) 
```html




```
 A variable set on an element reaches everything inside it: one [chat](/components/chat/), a sidebar, a section of the page. A token that reads another one, such as `--aparte-avatar-bg-user` or `--aparte-radius-bubble`, is worked out again on every `aparte-chat`, every `[data-aparte-chat]` root the React, Vue and Svelte components render, and every `[data-aparte-theme]` element, so a chat given its own `--aparte-primary` gets its own user bubble and avatar too. The same rule stops a value you give such a token on `:root` at the chat: set it on the chat, in a rule with a class as above, which outweighs core’s own declaration there whatever order the stylesheets load in. The [CSS variables](/reference/css-variables/) reference marks those tokens **anchored**. In React, Vue and Svelte, the chat’s root is a `
`, and the same tokens are worked out again there: give it a class and write `[data-aparte-chat].sales { … }`. ## Make it denser, squarer or larger [Section titled “Make it denser, squarer or larger”](#make-it-denser-squarer-or-larger) 
```css
:root {
  --aparte-space-unit: 1.5px;   /* every gap and padding, tighter */
  --aparte-radius-unit: 2px;    /* every corner, squarer */
  --aparte-font-scale: 1;       /* every text size, a notch smaller */
  --aparte-btn-size-md: 28px;   /* the medium control, and every size read from it */
}
```
 The sizes are scales, each a base times a step, so one base moves a whole family: | Scale | Tokens | Base | | -------- | --------------------------------------------------- | ---------------------- | | Spacing | `--aparte-space-1` … `--aparte-space-8` | `--aparte-space-unit` | | Corners | `--aparte-radius-xs` … `--aparte-radius-xl` | `--aparte-radius-unit` | | Text | `--aparte-font-size-2xs` … `--aparte-font-size-2xl` | `--aparte-font-scale` | | Controls | `--aparte-btn-size-sm`, `-md`, `-lg`, `-xl` | each its own | `--aparte-radius-full`, the pill, stays a pill whatever the unit. A single step can be set too, on the chat with a class: `aparte-chat.chat { --aparte-space-6: 8px; }` pulls in the paddings that use it and leaves the rest of the scale alone. The kit’s controls read the same tokens, so a page of [buttons](/components/button/) and [fields](/components/field/) moves with the chat. ## Small recipes [Section titled “Small recipes”](#small-recipes) They set tokens on ``. In React, Vue and Svelte, give the chat’s root the class with `className` and write `[data-aparte-chat].chat`. ### Give the assistant a bubble too [Section titled “Give the assistant a bubble too”](#give-the-assistant-a-bubble-too) 
```css
aparte-chat.chat { --aparte-message-content-bg-assistant: var(--aparte-surface-2); }
.aparte-message[data-role="assistant"] .aparte-message-content {
  width: fit-content;
  padding: var(--aparte-message-content-padding);
}
```
 The assistant’s reply is plain text across the column by default, and only the person’s words sit in a bubble. The token colours the reply; the rule gives it the user bubble’s shape. ### Resize the composer [Section titled “Resize the composer”](#resize-the-composer) 
```css
aparte-chat.chat { --aparte-composer-control-size: 52px; }
```
 The input’s height and every button in the composer follow it. On a touch screen they take `--aparte-touch-target-size` instead. ### Change the code font [Section titled “Change the code font”](#change-the-code-font) 
```css
:root { --aparte-code-font-family: 'JetBrains Mono', ui-monospace, monospace; }
```
 ### Mark a row as chosen [Section titled “Mark a row as chosen”](#mark-a-row-as-chosen) 
```css
:root {
  --aparte-mark-tint: 12%;   /* a quieter ground, for marked rows and the user's bubble */
  --aparte-mark-bar: 3px;    /* a bar on the start edge, which has none by default */
}
```
 
```html
Chosen
Accepted
Declined
```
 The [mark](/components/mark/) is how the chat shows what was chosen: a select’s option, a checked choice in a question, the answer a question kept. The same class marks a row of yours. `--success`, `--danger` and `--neutral` change the intent; `--quiet` is the one that did not happen, with no tint and muted text. ### Type a theme in TypeScript [Section titled “Type a theme in TypeScript”](#type-a-theme-in-typescript) 
```ts
import type { AparteThemeVariables } from '@aparte/core';

export const brand: AparteThemeVariables = {
  '--aparte-primary': '#b45309',
  '--aparte-surface-1': '#ffffff',
};

for (const [name, value] of Object.entries(brand)) {
  if (value) document.documentElement.style.setProperty(name, value);
}
```
 A key that does not start with `--aparte-` is a compile error. The name after the prefix is not checked, which is what the next recipe is for. ### Check that every token you use exists [Section titled “Check that every token you use exists”](#check-that-every-token-you-use-exists) A `var(--aparte-text-primary)` that names a token the library does not have fails without a word: the property falls back to its inherited or initial value, and the page looks almost right. The stylesheet you import names every token it declares or reads, so a script can check your CSS against it: 
```js
// aparte-tokens.mjs — node aparte-tokens.mjs src/**/*.css
import { readFileSync } from 'node:fs';
import { createRequire } from 'node:module';

const sheet = readFileSync(createRequire(import.meta.url).resolve('@aparte/core/styles.css'), 'utf8');
const known = new Set(sheet.match(/--aparte-[\w-]+/g));
let bad = 0;
for (const file of process.argv.slice(2)) {
  for (const name of new Set(readFileSync(file, 'utf8').match(/--aparte-[\w-]+/g) ?? [])) {
    if (!known.has(name)) { bad++; console.log(`${file}: ${name} is not an @aparte/core token`); }
  }
}
process.exit(bad ? 1 : 0);
```
 Run it with your tests. A name it reports that you declared yourself is fine, though a token of your own reads better under a prefix of your own. ## Inside a shadow root of your own [Section titled “Inside a shadow root of your own”](#inside-a-shadow-root-of-your-own) Load `@aparte/core/styles.css` inside the shadow root — a `` in it, or `adoptedStyleSheets` — since a document’s stylesheet does not cross into it. The stylesheet declares its tokens on `:host` as well as `:root`, so the chat themes the same way: set the variables on the host or on any element inside, and put `data-aparte-theme` on the host itself, since an attribute on an element outside the shadow root does not reach the chat. `` and `` look their partner up in the document; inside a shadow root, put them in the chat and leave `target` out. ## Next [Section titled “Next”](#next) * [Customization Past colours and sizes: your own icons, avatars, buttons and parts of a message.](/guides/customization/) * [CSS variables Every token, its default, and whether it is anchored.](/reference/css-variables/) * [Layouts A reading column, a full-width feed, a side panel, a floating composer.](/guides/layout/) * [The kit The controls around the chat, in the same theme.](/kit/)

# UI Kit for an AI Chat App — plain CSS classes, 25 families

> 25 families of plain CSS classes for the chrome around a chat — buttons, fields, tabs, dialogs, avatars, the sidebar — themed by the same variables as the chat itself.

Every recipe here is **plain classes on plain elements**: no component to import, no framework, no shadow DOM — copy the markup, restyle it with the same [CSS variables](/reference/css-variables/) the chat reads. Each family has one page, its live preview first; every class of the kit on one page is the [classes reference](/reference/classes/). ## Controls [Section titled “Controls”](#controls) * **[Button](/components/button/)** — The button. Ready-made classes; nothing to configure. * **[Field](/components/field/)** — Form fields. Ready-made classes; nothing to configure. ## Display [Section titled “Display”](#display) * **[Avatar](/components/avatar/)** — Sizes, shape, image + initials fallback * **[Icon](/components/icon/)** — The icon. Every glyph the library draws carries this class. * **[Badge](/components/badge/)** — Small count or status pill * **[Tag](/components/tag/)** — A removable chip * **[Thumbnail](/components/thumbnail/)** — The thumbnail. A media tile: a fixed square that clips whatever is dropped * **[Spinner](/components/spinner/)** — A rotating indicator * **[Progress](/components/progress/)** — Determinate bar + indeterminate variant * **[Skeleton](/components/skeleton/)** — A loading placeholder * **[Divider](/components/divider/)** — Horizontal, vertical, optionally labelled * **[Alert](/components/alert/)** — A callout * **[Card](/components/card/)** — A surface with optional header/body/footer * **[Kbd](/components/kbd/)** — A keyboard key * **[Mark](/components/mark/)** — The mark: a row a list has settled on. ## Surfaces [Section titled “Surfaces”](#surfaces) * **[Tabs](/components/tabs/)** — One row of tabs, and the panel under it * **[Accordion](/components/accordion/)** — Stacked disclosures * **[Menu](/components/menu/)** — A floating list of commands * **[Popover](/components/popover/)** — A floating box, and nothing else * **[Dialog](/components/dialog/)** — A modal, drawn on the native \
. * **[Tooltip](/components/tooltip/)** — A short label, with an arrow ## Shell [Section titled “Shell”](#shell) * **[Sidebar](/components/sidebar/)** — The column beside the chat. * **[App Header](/components/header/)** — The bar above the chat. * **[App Shell](/components/app-shell/)** — Sidebar beside, header above, the chat in the rest. * **[Split](/components/split/)** — Two panes and a draggable seam.

# CSS classes

> Every ready-made class aparté ships — buttons, fields, tags, icons, alerts and the rest — generated from the stylesheets that define them.

Core is **light DOM**: it writes ordinary classes onto ordinary elements, and so can you. The classes below are the ones aparté styles for its own use *and leaves available* — put `aparte-btn` on a button of yours and it looks like the send button, with no component to mount and no framework involved. Your own class stays on the element for events and for targeting. It just stops carrying the look. Everything here is themed by the [CSS variables](/reference/css-variables/); the recipes read those tokens, so a rebrand reaches your buttons and aparté’s at the same time. ## Controls [Section titled “Controls”](#controls) Things a person operates. Each is one base class plus modifiers that compose — an intent says what the control means, a fill says how loudly to say it, and the two axes do not know about each other. ### Button [Section titled “Button”](#button) aparté — the button. Ready-made classes; nothing to configure. TWO AXES, and keeping them apart is the whole design. An INTENT says which colour the button means; a FILL says what to do with that colour. Seven intents times five fills is thirty-five buttons out of twelve classes, and every combination works because neither axis knows about the other. An intent on its own is a ghost — the quietest form, and the one a chat uses most. Add a fill when the button has to carry more weight. `.aparte-btn-group` fuses adjacent buttons into ONE control: the inner corners drop, the shared borders overlap, and only the group’s ends keep the radius. Give the wrapper `role="group"` and a name — visually one control, it should read as one too. A SEGMENTED control is the same group with one segment selected: mark it `aria-pressed="true"` (or `aria-selected="true"` under `role="tablist"`) and it is painted solid in the group’s intent, at rest — not only under the pointer. This layer is NEUTRAL: it is what a UI library offers, not a summary of what this repo happens to use. A variant nothing wears still ships, because the plugin that needs it is not written yet, and its absence is what makes an author invent a seventh shade of orange. Your own class stays on the element, for events and for targeting. It just stops carrying the look. [Live preview of the Button classes](/preview/class/button/) The classes below, on plain markup, in their own document — so what you are looking at is core's stylesheet and nothing else. 
```html
Send
Delete

  


  
  1 / 2
  


  Chat
  Preview

```
 `.aparte-btn` · `.aparte-btn--block` · `.aparte-btn--circle` · `.aparte-btn--danger` · `.aparte-btn--ghost` · `.aparte-btn--icon` · `.aparte-btn--info` · `.aparte-btn--lg` · `.aparte-btn--neutral` · `.aparte-btn--outline` · `.aparte-btn--pill` · `.aparte-btn--primary` · `.aparte-btn--secondary` · `.aparte-btn--sm` · `.aparte-btn--soft` · `.aparte-btn--solid` · `.aparte-btn--success` · `.aparte-btn--surface` · `.aparte-btn--warning` · `.aparte-btn--xl` · `.aparte-btn-group` · `.aparte-btn__icon` · `.aparte-icon` ### Field [Section titled “Field”](#field) aparté — form fields. Ready-made classes; nothing to configure. Every input control a UI library offers: text entry, textarea, select, checkbox, radio, switch, range. The library renders into the LIGHT DOM — there is no shadow root and no ::part() — so a class is the only handle a consumer has onto a native form control, and `appearance: none` is how this file takes the browser’s own chrome off a checkbox/radio/switch/range so these classes can repaint it. `.aparte-field` is ONE shared recipe — border, background, radius, padding, focus ring, placeholder — applied to \, \ and \<select> alike, so a form built from all three still reads as one control family. Checkbox, radio and switch are drawn from the native control itself (`appearance: none` plus a pseudo-element), never a div standing in for one, so the browser’s own focus/keyboard/AT handling stays intact — only the paint changes. Checkbox, radio, switch and range carry an INTENT axis, exactly like the button: a checked checkbox can be success or danger, not only primary. Unlike the button there is no separate FILL axis here — a checkbox has exactly one filled look, not five — so intent is the only modifier each of these needs. This layer is NEUTRAL: it is what a UI library offers, not a summary of what this repo happens to use. A control nothing wears yet still ships, because the form the repo hasn’t built is not a reason to leave it out. [Live preview of the Field classes](/preview/class/field/) The classes below, on plain markup, in their own document — so what you are looking at is core's stylesheet and nothing else. 
```html
<label class="aparte-field-label" for="email">
  Email <span class="aparte-field-required" aria-hidden="true">*</span>
</label>
<input id="email" class="aparte-field" type="email" placeholder="you@example.com" />
<p class="aparte-field-hint">We only use this to send a receipt.</p>
<p class="aparte-field-warning">Changing it signs you out of other devices.</p>
<div class="aparte-field-group">
  <span class="aparte-field-group__prefix">https://</span>
  <input class="aparte-field" placeholder="example.com" />
</div>
<p><label><input type="checkbox" class="aparte-checkbox aparte-checkbox--danger" /> Delete my account</label></p>
<p><label><input type="checkbox" role="switch" class="aparte-switch aparte-switch--success" checked /> Email notifications</label></p>
```
 `.aparte-btn` · `.aparte-checkbox` · `.aparte-checkbox--danger` · `.aparte-checkbox--info` · `.aparte-checkbox--neutral` · `.aparte-checkbox--primary` · `.aparte-checkbox--secondary` · `.aparte-checkbox--success` · `.aparte-checkbox--warning` · `.aparte-color` · `.aparte-field` · `.aparte-field--lg` · `.aparte-field--sm` · `.aparte-field--textarea` · `.aparte-field-choice` · `.aparte-field-choice--boxed` · `.aparte-field-choice--selected` · `.aparte-field-choice__body` · `.aparte-field-error` · `.aparte-field-group` · `.aparte-field-group__prefix` · `.aparte-field-group__suffix` · `.aparte-field-hint` · `.aparte-field-label` · `.aparte-field-required` · `.aparte-field-row` · `.aparte-field-warning` · `.aparte-fieldset` · `.aparte-meter` · `.aparte-output` · `.aparte-radio` · `.aparte-radio--danger` · `.aparte-radio--info` · `.aparte-radio--neutral` · `.aparte-radio--primary` · `.aparte-radio--secondary` · `.aparte-radio--success` · `.aparte-radio--warning` · `.aparte-range` · `.aparte-range--danger` · `.aparte-range--info` · `.aparte-range--neutral` · `.aparte-range--primary` · `.aparte-range--secondary` · `.aparte-range--success` · `.aparte-range--warning` · `.aparte-switch` · `.aparte-switch--danger` · `.aparte-switch--info` · `.aparte-switch--neutral` · `.aparte-switch--primary` · `.aparte-switch--secondary` · `.aparte-switch--success` · `.aparte-switch--warning` ## Display [Section titled “Display”](#display) aparté — Display primitives: the non-interactive pieces a UI library offers. Ready-made classes; nothing to configure. This layer is NEUTRAL: it is what a UI library offers, not a summary of what this repo happens to use. A class nothing wears today still ships, because the plugin that needs it is not written yet. Badge and alert repeat the button’s two-axis shape — an intent class sets a local custom property, a fill (or the intent alone) reads it — for the same reason: colour meaning and paint style are independent questions, and collapsing them into one flat list of classes is what produces a ninth accidental shade of orange. [Live preview of the Display classes](/preview/class/display-overview/) The classes below, on plain markup, in their own document — so what you are looking at is core's stylesheet and nothing else. 
```html
<span class="aparte-badge aparte-badge--success aparte-badge--solid">Live</span>
<div class="aparte-progress" style="--aparte-progress-value: 60">
  <div class="aparte-progress__bar"></div>
</div>
<div class="aparte-alert aparte-alert--warning" role="alert">
  <span class="aparte-alert__icon"><aparte-icon name="alertTriangle"></aparte-icon></span>
  <div class="aparte-alert__body">
    <p class="aparte-alert__title">Heads up</p>
    <p class="aparte-alert__message">Your session expires soon.</p>
  </div>
</div>
```
 ### Avatar [Section titled “Avatar”](#avatar) aparte-avatar — sizes, shape, image + initials fallback `--aparte-avatar-size` is NOT invented here: it already exists centrally for the message avatar (bubble.css), and this component reads the same one — a generic avatar and a chat-message avatar are the same object, and a size modifier applied here resizes a role-coloured message avatar too. The corner, the initials and the group’s overlap are FRACTIONS of that size (`--aparte-avatar-radius-ratio`, `--aparte-avatar-initials-ratio`, `--aparte-avatar-overlap-ratio`), computed on the element so a size modifier moves them: as absolute tokens the 40px avatar drew the same 11px initials as the 32px one, the corner drifted from squircle to square up the ramp, and a 6px overlap was a fifth of a small avatar and a tenth of a large one. [Live preview of the Avatar classes](/preview/class/avatar/) The classes below, on plain markup, in their own document — so what you are looking at is core's stylesheet and nothing else. 
```html
<span class="aparte-avatar aparte-avatar--sm">AP</span>
<span class="aparte-avatar">JD</span>
<span class="aparte-avatar aparte-avatar--lg aparte-avatar--square">MK</span>
<span class="aparte-avatar-group">
  <span class="aparte-avatar">AP</span>
  <span class="aparte-avatar">JD</span>
  <span class="aparte-avatar">+3</span>
</span>
```
 `.aparte-avatar` · `.aparte-avatar--circle` · `.aparte-avatar--lg` · `.aparte-avatar--sm` · `.aparte-avatar--square` · `.aparte-avatar--xl` · `.aparte-avatar--xs` · `.aparte-avatar-group` · `.aparte-avatar__image` ### Icon [Section titled “Icon”](#icon) aparté — the icon. Every glyph the library draws carries this class. The glyph does NOT carry its own size. It used to — `width="14"`, `width="16"`, `width="20"` baked into the markup — and that is precisely what kept the same drawing from being shared: an ✕ sized for a remove button could not also be the ✕ of a tool call, so the library ended up with three of them, on three grids, at three stroke widths. Size is a property of the PLACE an icon sits in, so it is declared by the container and inherited down. `--aparte-icon-size` is therefore the one knob, and it inherits: set it on any ancestor and every glyph below follows. A container with a rule of its own (`.aparte-action-button svg`, `.aparte-tool-icon svg`) still wins on specificity — those already expressed size in CSS and are left alone. [Live preview of the Icon classes](/preview/class/icon/) The classes below, on plain markup, in their own document — so what you are looking at is core's stylesheet and nothing else. 
```html
<aparte-icon name="check"></aparte-icon>
```
 `.aparte-icon` · `.aparte-icon--lg` · `.aparte-icon--sm` · `.aparte-icon--xl` · `.aparte-icon-spin` ### Badge [Section titled “Badge”](#badge) aparte-badge — small count or status pill Two axes like the button’s: an intent says what it means, a fill says how loudly. `--dot` is the third form — no label, so it is always painted solid. [Live preview of the Badge classes](/preview/class/badge/) The classes below, on plain markup, in their own document — so what you are looking at is core's stylesheet and nothing else. 
```html
<span class="aparte-badge aparte-badge--success aparte-badge--solid">Live</span>
<span class="aparte-badge aparte-badge--warning">Draft</span>
<span class="aparte-badge aparte-badge--danger aparte-badge--outline">Failed</span>
<span class="aparte-badge aparte-badge--info aparte-badge--sm">12</span>
<!-- A dot has no text: role="img" lets its label be read. -->
<span class="aparte-badge aparte-badge--danger aparte-badge--dot" role="img" aria-label="Unread"></span>
```
 `.aparte-badge` · `.aparte-badge--danger` · `.aparte-badge--dot` · `.aparte-badge--info` · `.aparte-badge--lg` · `.aparte-badge--neutral` · `.aparte-badge--outline` · `.aparte-badge--primary` · `.aparte-badge--secondary` · `.aparte-badge--sm` · `.aparte-badge--soft` · `.aparte-badge--solid` · `.aparte-badge--success` · `.aparte-badge--warning` ### Tag [Section titled “Tag”](#tag) aparte-tag — a removable chip [Live preview of the Tag classes](/preview/class/tag/) The classes below, on plain markup, in their own document — so what you are looking at is core's stylesheet and nothing else. 
```html
<span class="aparte-tag">
  <span class="aparte-tag__label">typescript</span>
  <button class="aparte-tag__remove" aria-label="Remove typescript"><aparte-icon name="close"></aparte-icon></button>
</span>
<span class="aparte-tag aparte-tag--sm"><span class="aparte-tag__label">draft</span></span>
```
 `.aparte-tag` · `.aparte-tag--sm` · `.aparte-tag__label` · `.aparte-tag__remove` ### Thumbnail [Section titled “Thumbnail”](#thumbnail) aparté — the thumbnail. A media tile: a fixed square that clips whatever is dropped into it, with room for a control in a corner. Distinct from `.aparte-avatar`, which is the same shape for a different reason: an avatar stands for a PERSON and falls back to initials, so it carries type styling and a text colour. A thumbnail stands for a FILE and falls back to an icon or a label, so it carries none of that — and it is `position: relative` because a remove button or a badge sits on it, which an avatar never has. [Live preview of the Thumbnail classes](/preview/class/thumbnail/) The classes below, on plain markup, in their own document — so what you are looking at is core's stylesheet and nothing else. 
```html
<span class="aparte-thumbnail aparte-thumbnail--lg"><img class="aparte-thumbnail__image"
      src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2 3'%3E%3Crect width='2' height='3' fill='%23b07d33'/%3E%3C/svg%3E"
      alt="A screenshot"></span>
<span class="aparte-thumbnail"><span class="aparte-thumbnail__label">PDF</span></span>
<span class="aparte-thumbnail aparte-thumbnail--sm"><span class="aparte-thumbnail__label">MD</span></span>
```
 `.aparte-attachments` · `.aparte-thumb` · `.aparte-thumb--file` · `.aparte-thumb--image` · `.aparte-thumb__name` · `.aparte-thumbnail` · `.aparte-thumbnail--lg` · `.aparte-thumbnail--sm` · `.aparte-thumbnail__image` · `.aparte-thumbnail__label` ### Spinner [Section titled “Spinner”](#spinner) aparte-spinner — a rotating indicator [Live preview of the Spinner classes](/preview/class/spinner/) The classes below, on plain markup, in their own document — so what you are looking at is core's stylesheet and nothing else. 
```html
<span class="aparte-spinner aparte-spinner--sm" role="status" aria-label="Loading"></span>
<span class="aparte-spinner" role="status" aria-label="Loading"></span>
<span class="aparte-spinner aparte-spinner--lg" role="status" aria-label="Loading"></span>
```
 `.aparte-spinner` · `.aparte-spinner--lg` · `.aparte-spinner--sm` ### Progress [Section titled “Progress”](#progress) aparte-progress — determinate bar + indeterminate variant The consumer owns the ARIA: role=“progressbar” and a name on both forms, aria-valuenow/min/max on the determinate one, and aria-valuetext (or nothing, per platform convention) on the indeterminate one — this file only paints what those attributes mean. [Live preview of the Progress classes](/preview/class/progress/) The classes below, on plain markup, in their own document — so what you are looking at is core's stylesheet and nothing else. 
```html
<div class="aparte-progress" role="progressbar" aria-label="Uploading" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
     style="--aparte-progress-value: 60">
  <div class="aparte-progress__bar"></div>
</div>
<div class="aparte-progress aparte-progress--indeterminate" role="progressbar" aria-label="Working">
  <div class="aparte-progress__bar"></div>
</div>
```
 `.aparte-progress` · `.aparte-progress--indeterminate` · `.aparte-progress__bar` ### Skeleton [Section titled “Skeleton”](#skeleton) aparte-skeleton — a loading placeholder Decorative: give the element aria-hidden=“true” (or wrap the group behind a single aria-busy region) so a screen reader does not read out an empty box. A skeleton is a block with no margin of its own: the recipe spaces consecutive text lines and nothing else, so a GROUP is laid out by its container — a grid with a gap, the way the real card it stands in for is. Four lines glued edge to edge is what the example used to show. The last line is shorter because the last line of a paragraph is, and the block sits in the text column, under the lines it stands for — not across the avatar’s. The rect’s height is the family’s token (`--aparte-skeleton-rect-height`), not an inline value that contradicts it. [Live preview of the Skeleton classes](/preview/class/skeleton/) The classes below, on plain markup, in their own document — so what you are looking at is core's stylesheet and nothing else. 
```html
<div style="display: grid; grid-template-columns: auto 1fr; gap: var(--aparte-space-3); align-items: start" aria-busy="true">
  <span class="aparte-skeleton aparte-skeleton--circle" aria-hidden="true"></span>
  <div>
    <span class="aparte-skeleton aparte-skeleton--text" aria-hidden="true"></span>
    <span class="aparte-skeleton aparte-skeleton--text" aria-hidden="true"></span>
    <span class="aparte-skeleton aparte-skeleton--text" style="max-inline-size: 60%" aria-hidden="true"></span>
  </div>
  <span class="aparte-skeleton aparte-skeleton--rect" style="grid-column: 2" aria-hidden="true"></span>
</div>
```
 `.aparte-skeleton` · `.aparte-skeleton--circle` · `.aparte-skeleton--rect` · `.aparte-skeleton--text` ### Divider [Section titled “Divider”](#divider) aparte-divider — horizontal, vertical, optionally labelled The line is a BORDER, not a background — see the progress bar’s comment above for why: a background disappears under forced-colors, a border does not. [Live preview of the Divider classes](/preview/class/divider/) The classes below, on plain markup, in their own document — so what you are looking at is core's stylesheet and nothing else. 
```html
<hr class="aparte-divider">
<div class="aparte-divider aparte-divider--label">
  <span class="aparte-divider__label">or</span>
</div>
```
 `.aparte-divider` · `.aparte-divider--label` · `.aparte-divider--vertical` · `.aparte-divider__label` ### Alert [Section titled “Alert”](#alert) aparte-alert — a callout [Live preview of the Alert classes](/preview/class/alert/) The classes below, on plain markup, in their own document — so what you are looking at is core's stylesheet and nothing else. 
```html
<div class="aparte-alert aparte-alert--info" role="status">
  <span class="aparte-alert__icon"><aparte-icon name="info"></aparte-icon></span>
  <div class="aparte-alert__body">
    <p class="aparte-alert__title">Model switched</p>
    <p class="aparte-alert__message">The next reply uses the model you just picked.</p>
  </div>
  <button class="aparte-alert__dismiss" aria-label="Dismiss"><aparte-icon name="close"></aparte-icon></button>
</div>
<div class="aparte-alert aparte-alert--danger" role="alert">
  <span class="aparte-alert__icon"><aparte-icon name="alertTriangle"></aparte-icon></span>
  <div class="aparte-alert__body">
    <p class="aparte-alert__message">The request was refused: no API key is set.</p>
  </div>
</div>
```
 `.aparte-alert` · `.aparte-alert--danger` · `.aparte-alert--info` · `.aparte-alert--neutral` · `.aparte-alert--primary` · `.aparte-alert--secondary` · `.aparte-alert--success` · `.aparte-alert--warning` · `.aparte-alert__body` · `.aparte-alert__dismiss` · `.aparte-alert__icon` · `.aparte-alert__message` · `.aparte-alert__title` ### Card [Section titled “Card”](#card) aparte-card — a surface with optional header/body/footer [Live preview of the Card classes](/preview/class/card/) The classes below, on plain markup, in their own document — so what you are looking at is core's stylesheet and nothing else. 
```html
<div class="aparte-card">
  <div class="aparte-card__header">Usage this month</div>
  <div class="aparte-card__body">
    <p>412 000 tokens across 38 conversations.</p>
  </div>
  <div class="aparte-card__footer">Resets on the 1st.</div>
</div>
```
 `.aparte-card` · `.aparte-card__body` · `.aparte-card__footer` · `.aparte-card__header` ### Kbd [Section titled “Kbd”](#kbd) aparte-kbd — a keyboard key The monospace stack is —aparte-code-font-family, reused rather than declared again: it is already the library’s one answer to “what font is code”, and a key label is exactly that question asked a second time. [Live preview of the Kbd classes](/preview/class/kbd/) The classes below, on plain markup, in their own document — so what you are looking at is core's stylesheet and nothing else. 
```html
Press <kbd class="aparte-kbd">Ctrl</kbd> + <kbd class="aparte-kbd">K</kbd> to search,
or <kbd class="aparte-kbd">Esc</kbd> to close.
```
 `.aparte-kbd` ### Mark [Section titled “Mark”](#mark) aparté — The mark: a row a list has settled on. One of the sheets split out of aparte.css. Order matters: src/index.ts imports them in the order listed there, and check:derived-vars reads them concatenated in that same order, the way a browser does. WHAT IT IS. A chosen option, an accepted answer, the conversation you are in: the one item among its peers that a decision landed on. Before this sheet the select drew it one way (an accent tint plus an inset bar on the start edge), the field choice another (a primary border), the conversation list a third (its own background and weight), and the ask-user receipt none at all — four vocabularies for one meaning, measured in the UI audit of 2026-08-28. The market agrees on two signals: a tint on the ground (Radix, shadcn, Material’s state layer) and a bar on the row’s start edge (GitHub Primer’s ActionList). This recipe is both, on one intent axis, and every row that means “this one” wears it. THE AXIS. `--aparte-mark-intent` is the fill, primary by default: chosen. The modifiers set it to the theme’s other masters — success for an answer that was given or a call that was approved, danger for a destructive outcome, neutral for the item you are merely in. `--quiet` is the outcome that did NOT happen: a declined request, a version superseded — no tint, no bar, the muted voice. The market never strikes through; neither does this. THE BAR IS DRAWN IN INK. The tint is the fill at 18%, which carries almost no contrast by itself (1.2:1 in the light theme); the bar is the whole non-text signal, so it reads `--aparte-mark-intent-ink` — the master’s ink, the one the button and the badge already derive for text on a ground. The raw success fill measured 2.27:1 on the light surface, under the 3:1 WCAG asks of a graphic; its ink is 7.1:1. THE BAR IS A PSEUDO-ELEMENT, NOT A SHADOW. An inset shadow knows only left and right, so a right-to-left row got its bar on the wrong edge unless a document-level `[dir="rtl"]` rule caught it — which a `dir` on the row itself, or `dir="auto"`, escapes. `inset-inline-start` is the start edge whatever the direction, at any level. Nothing shifts: the pseudo-element is out of the flow. THE MEASURES. `--aparte-mark-tint` and `--aparte-mark-bar` live in theme.css so a theme moves every mark at once. `.aparte-mark` · `.aparte-mark--danger` · `.aparte-mark--neutral` · `.aparte-mark--quiet` · `.aparte-mark--success` ## Surfaces [Section titled “Surfaces”](#surfaces) aparté — layered surfaces. Ready-made classes for the things that float ABOVE the transcript: tabs, an accordion, a dropdown menu, a popover, a tooltip. Drawer and toast are deliberately NOT here: each needs a stack manager — something that owns the order of what floats over the page — and that is the consuming application’s job, not a component stylesheet’s. The dialog was on that list until 0.16.0; it has its own recipe now (`dialog.css`), because the browser’s `<dialog>` brings the top layer, the focus trap and Escape with it. Everything below is the LOOK only. Where and when a surface opens is markup and script the caller owns: a \<details open> toggling itself, a positioning library placing a menu next to its trigger. Nothing here reaches for position:fixed on your behalf. `.aparte-popover` and `.aparte-tooltip` are single boxes: drop content straight in and position the element yourself, however the app already places floating things (an absolutely-placed div, a floating-UI anchor, a JS library’s own logic). This layer is NEUTRAL: it is what a UI library offers, not a summary of what this repo happens to use. A class nothing wears today still ships, because the plugin that needs it is not written yet. [Live preview of the Surfaces classes](/preview/class/surfaces-overview/) The classes below, on plain markup, in their own document — so what you are looking at is core's stylesheet and nothing else. 
```html
<div class="aparte-tabs" role="tablist" aria-label="Result view">
  <button class="aparte-tabs__tab" role="tab" type="button" id="tabs-a-preview" aria-controls="tabs-a-preview-panel" aria-selected="true" tabindex="0">Preview</button>
  <button class="aparte-tabs__tab" role="tab" type="button" id="tabs-a-code" aria-controls="tabs-a-code-panel" aria-selected="false" tabindex="-1">Code</button>
</div>
<div class="aparte-tabs__panel" role="tabpanel" id="tabs-a-preview-panel" aria-labelledby="tabs-a-preview">The panel for the selected tab.</div>
<div class="aparte-tabs__panel" role="tabpanel" id="tabs-a-code-panel" aria-labelledby="tabs-a-code" hidden>The panel the other tab opens.</div>
<div class="aparte-accordion">
  <details class="aparte-accordion__item" open>
    <summary class="aparte-accordion__header">Section title
      <aparte-icon name="expand"></aparte-icon>
    </summary>
    <div class="aparte-accordion__panel">What the section says once it is open.</div>
  </details>
</div>
<div class="aparte-menu" role="menu">
  <div class="aparte-menu__label">Export as</div>
  <button class="aparte-menu__item" role="menuitem">PNG</button>
  <div class="aparte-menu__separator"></div>
  <button class="aparte-menu__item" role="menuitemcheckbox" aria-checked="true">
    Include metadata
  </button>
</div>
```
 ### Tabs [Section titled “Tabs”](#tabs) aparte-tabs — one row of tabs, and the panel under it Two looks, one behaviour. `--underline` marks the current tab with a rule beneath it and is the quieter of the two; `--segmented` puts the whole row in a track and fills the current tab, which reads as a control rather than as navigation. Neither moves anything: `aria-selected` is what says which tab is current, and the app owns it. The markup below is the whole contract of the role, and all of it is yours to write: ONE tab stop for the list (`tabindex="0"` on the selected tab, `-1` on the rest), `aria-controls` from each tab to its `role="tabpanel"`, and `aria-labelledby` back. The app also owns the ArrowLeft/ArrowRight/Home/End handler that moves the selection and the stop together — `@aparte/plugin-artifacts`’ card has a working one to copy. A tablist without those is louder than plain buttons and says less: every tab a tab stop, and none of them naming what it opens. [Live preview of the Tabs classes](/preview/class/tabs/) The classes below, on plain markup, in their own document — so what you are looking at is core's stylesheet and nothing else. 
```html
<div class="aparte-tabs aparte-tabs--underline" role="tablist" aria-label="Result view">
  <button class="aparte-tabs__tab" role="tab" type="button" id="tabs-u-preview" aria-controls="tabs-u-preview-panel" aria-selected="true" tabindex="0">Preview</button>
  <button class="aparte-tabs__tab" role="tab" type="button" id="tabs-u-code" aria-controls="tabs-u-code-panel" aria-selected="false" tabindex="-1">Code</button>
</div>
<div class="aparte-tabs__panel" role="tabpanel" id="tabs-u-preview-panel" aria-labelledby="tabs-u-preview">What the selected tab shows.</div>
<div class="aparte-tabs__panel" role="tabpanel" id="tabs-u-code-panel" aria-labelledby="tabs-u-code" hidden>What the other tab shows.</div>
<div class="aparte-tabs aparte-tabs--segmented" role="tablist" aria-label="Theme">
  <button class="aparte-tabs__tab" role="tab" type="button" id="tabs-s-light" aria-controls="tabs-s-light-panel" aria-selected="true" tabindex="0">Light</button>
  <button class="aparte-tabs__tab" role="tab" type="button" id="tabs-s-dark" aria-controls="tabs-s-dark-panel" aria-selected="false" tabindex="-1">Dark</button>
  <button class="aparte-tabs__tab" role="tab" type="button" id="tabs-s-system" aria-controls="tabs-s-system-panel" aria-selected="false" tabindex="-1">System</button>
</div>
<div class="aparte-tabs__panel" role="tabpanel" id="tabs-s-light-panel" aria-labelledby="tabs-s-light">The light theme's settings.</div>
<div class="aparte-tabs__panel" role="tabpanel" id="tabs-s-dark-panel" aria-labelledby="tabs-s-dark" hidden>The dark theme's settings.</div>
<div class="aparte-tabs__panel" role="tabpanel" id="tabs-s-system-panel" aria-labelledby="tabs-s-system" hidden>Whatever the system asks for.</div>
```
 `.aparte-tabs` · `.aparte-tabs--segmented` · `.aparte-tabs--underline` · `.aparte-tabs__panel` · `.aparte-tabs__tab` ### Accordion [Section titled “Accordion”](#accordion) aparte-accordion — stacked disclosures A column of items, each a header you press and a panel it reveals. The header works as a native `<summary>` inside `<details>` OR as a `<div role="button" aria-expanded>` — that choice decides whether the open state is the browser’s or yours, and the CSS does not care either way. It is the whole clickable row, so it takes the same reset a button does. The chevron turns 180° when the item is open, and there are two selectors for it because there are two ways to be open: `aria-expanded` on the header for the ARIA pattern, `details[open]` on the ancestor for the native one. Nothing here opens or closes anything — this is a stylesheet, and the disclosure is the element’s job or yours. [Live preview of the Accordion classes](/preview/class/accordion/) The classes below, on plain markup, in their own document — so what you are looking at is core's stylesheet and nothing else. 
```html
<div class="aparte-accordion">
  <details class="aparte-accordion__item" open>
    <summary class="aparte-accordion__header">
      Shipping
      <aparte-icon name="expand"></aparte-icon>
    </summary>
    <div class="aparte-accordion__panel">Free above 50 €, otherwise 4,90 €. Two to four working days.</div>
  </details>
  <details class="aparte-accordion__item">
    <summary class="aparte-accordion__header">
      Returns
      <aparte-icon name="expand"></aparte-icon>
    </summary>
    <div class="aparte-accordion__panel">Thirty days, in the original packaging.</div>
  </details>
  <details class="aparte-accordion__item">
    <summary class="aparte-accordion__header">
      Payment
      <aparte-icon name="expand"></aparte-icon>
    </summary>
    <div class="aparte-accordion__panel">Card, PayPal, or an invoice for a company account.</div>
  </details>
</div>
```
 `.aparte-accordion` · `.aparte-accordion__header` · `.aparte-accordion__icon` · `.aparte-accordion__item` · `.aparte-accordion__panel` · `.aparte-icon` ### Menu [Section titled “Menu”](#menu) aparte-menu — a floating list of commands The surface a dropdown, a context menu or an overflow menu is drawn on: a bordered, elevated column of rows. Items are the pressable ones, a label groups them, a separator divides them. The check mark is DRAWN HERE, not by you: an item carrying `aria-checked` (a `menuitemradio` or `menuitemcheckbox`) reserves a gutter, and the glyph shows when the value is `"true"` — so set the attribute and do not add a ”✓” of your own, or the row shows two. A two-line item wraps its name and its `__description` in a `__body`; the gutter then spans both lines. WHERE it sits is yours. There is no positioning here and no anchoring logic — floating a box next to a trigger needs collision detection and a scroll listener, which is an interaction library’s job, not a stylesheet’s. Same split as the popover and the tooltip below it. The roles above are not decoration either: this draws a menu, it does not announce one. `role="menu"` / `role="menuitem"` and the arrow-key handling that pattern requires are yours to add. [Live preview of the Menu classes](/preview/class/menu/) The classes below, on plain markup, in their own document — so what you are looking at is core's stylesheet and nothing else. 
```html
<div class="aparte-menu" role="menu">
  <span class="aparte-menu__label">Message</span>
  <button class="aparte-menu__item" role="menuitem">Copy</button>
  <button class="aparte-menu__item" role="menuitem">Retry</button>
  <div class="aparte-menu__separator" role="separator"></div>
  <button class="aparte-menu__item" role="menuitem" disabled>Delete</button>
  <div class="aparte-menu__separator" role="separator"></div>
  <span class="aparte-menu__label">Mode</span>
  <button class="aparte-menu__item" role="menuitemradio" aria-checked="true">
    <span class="aparte-menu__body">
      Ask
      <span class="aparte-menu__description">Every tool call waits for you</span>
    </span>
  </button>
  <button class="aparte-menu__item" role="menuitemradio" aria-checked="false">
    <span class="aparte-menu__body">
      Auto
      <span class="aparte-menu__description">Runs everything, reports after</span>
    </span>
  </button>
</div>
```
 `.aparte-menu` · `.aparte-menu__body` · `.aparte-menu__description` · `.aparte-menu__item` · `.aparte-menu__label` · `.aparte-menu__separator` ### Popover [Section titled “Popover”](#popover) aparte-popover — a floating box, and nothing else Deliberately just a box. A popover’s content is arbitrary — a form, a colour picker, a card of details — so this supplies the surface, border and elevation that say “this is floating above the page” and leaves the layout of what is inside, and where the box itself sits, entirely to the caller. `--aparte-popover-max-width` is the one cap it imposes, so arbitrary content cannot grow the box unbounded. [Live preview of the Popover classes](/preview/class/popover/) The classes below, on plain markup, in their own document — so what you are looking at is core's stylesheet and nothing else. 
```html
<div class="aparte-popover" role="dialog" aria-label="Filters">
  <label class="aparte-field-label" for="q">Search</label>
  <input class="aparte-field" id="q" />
  <button class="aparte-btn aparte-btn--primary aparte-btn--solid">Apply</button>
</div>
```
 `.aparte-popover` ### Dialog [Section titled “Dialog”](#dialog) aparte-dialog — a modal, drawn on the native \<dialog>. The kit said for a year that a dialog was “deliberately absent — a modal needs a portal and a stack manager”. The browser has had both since 2022: `<dialog>` with `showModal()` puts the box in the top layer above everything, traps focus, closes on Escape, hands the focus back, and draws a `::backdrop`. So this recipe styles THAT element, and core’s one addition is the wiring — a `data-aparte-dialog-open` on any control opens the dialog it names, a `data-aparte-dialog-close` inside one closes it, and a click on the backdrop closes it unless the dialog carries `data-aparte-dialog-static`. Nothing here reaches for position:fixed on your behalf: the top layer is the browser’s. Sizes: `--sm` (24rem), the default (32rem), `--lg` (48rem); under 30rem of window every size becomes a full-screen sheet, which is what a settings hub is on a phone. The value passed to `data-aparte-dialog-close="…"` becomes the dialog’s `returnValue`, read in its native `close` event. [Live preview of the Dialog classes](/preview/class/dialog/) The classes below, on plain markup, in their own document — so what you are looking at is core's stylesheet and nothing else. 
```html
<dialog class="aparte-dialog" id="settings" aria-labelledby="settings-title">
  <div class="aparte-dialog__header">
    <h2 class="aparte-dialog__title" id="settings-title">Settings</h2>
    <button class="aparte-btn aparte-btn--icon aparte-btn--sm aparte-dialog__close" type="button" aria-label="Close" data-aparte-dialog-close>
      <aparte-icon name="close"></aparte-icon>
    </button>
  </div>
  <div class="aparte-dialog__body">
    <label class="aparte-field-label" for="endpoint">Endpoint</label>
    <input class="aparte-field" id="endpoint" value="http://localhost:11434/v1">
  </div>
  <div class="aparte-dialog__footer">
    <button class="aparte-btn aparte-btn--ghost" type="button" data-aparte-dialog-close>Cancel</button>
    <button class="aparte-btn aparte-btn--primary aparte-btn--solid" type="button" data-aparte-dialog-close="saved">Save</button>
  </div>
</dialog>
<button class="aparte-btn aparte-btn--surface" type="button" data-aparte-dialog-open="settings">Open settings</button>
```
 `.aparte-dialog` · `.aparte-dialog--lg` · `.aparte-dialog--sm` · `.aparte-dialog__body` · `.aparte-dialog__close` · `.aparte-dialog__footer` · `.aparte-dialog__header` · `.aparte-dialog__title` ### Tooltip [Section titled “Tooltip”](#tooltip) aparte-tooltip — a short label, with an arrow A tooltip has to be legible against whatever it happens to sit on top of — a bright image, a dark code block, either app theme — so its colours are fixed literals rather than the themed surface/text tokens. This box does NOT follow the palette, on purpose, and skips the dark-theme override block for that reason; the artifact “paper” tokens are the same decision made for the same reason. `data-side` places it — `top`, `bottom`, `start` or `end` — against the `.aparte-tooltip-anchor` that wraps the trigger, `--aparte-tooltip-gap` away, and turns the arrow to match. The two inline styles that used to do this in the example were a knob missing, not a division of labour: a demo that needs inline styles to work is a recipe with a parameter it forgot. What stays yours is the viewport: nothing here flips a tooltip that would leave the screen — that needs script, a positioning library’s job. Without `data-side` the box is not positioned at all, as before, and its placement is yours (the one inline style left in the example is the demo’s own margin). `pointer-events: none` is not a detail: a tooltip describes what the pointer is over, so it must never itself become that thing, or hovering it re-triggers the hover that produced it. [Live preview of the Tooltip classes](/preview/class/tooltip/) The classes below, on plain markup, in their own document — so what you are looking at is core's stylesheet and nothing else. 
```html
<span class="aparte-tooltip-anchor" style="margin-block-start: 2.5rem; margin-inline-start: 5rem">
  <div class="aparte-tooltip" data-side="top" role="tooltip">
    Copy to clipboard
    <span class="aparte-tooltip__arrow"></span>
  </div>
  <button class="aparte-btn aparte-btn--icon" aria-label="Copy"><aparte-icon name="copy"></aparte-icon></button>
</span>
```
 `.aparte-tabs--segmented` · `.aparte-tabs__tab` · `.aparte-tooltip` · `.aparte-tooltip-anchor` · `.aparte-tooltip__arrow` ## Shell [Section titled “Shell”](#shell) aparté — the shell: the chrome a whole application puts around the chat. A sidebar of conversations, a header, and the grid that holds them beside the transcript — what a ChatGPT-style page is made of, so a site can be built on aparté alone. One of the sheets src/index.ts imports in cascade order; check:derived-vars reads them concatenated in that same order, the way a browser does. ### Sidebar [Section titled “Sidebar”](#sidebar) aparte-sidebar — the column beside the chat. A sized column that becomes a drawer under 48rem of window. The recipe draws the column and its four regions; `<aparte-sidebar>` adds the behaviour (collapse, the drawer, the search filter) and sets `data-drawer` on itself from the media query, which is the one attribute the rules below read. The element wears the same class and adds the behaviour; `<aside class="aparte-sidebar">` is the look alone, which is what this page shows. [Live preview of the Sidebar classes](/preview/class/sidebar/) The classes below, on plain markup, in their own document — so what you are looking at is core's stylesheet and nothing else. 
```html
<aside class="aparte-sidebar">
  <div class="aparte-sidebar__header">
    <span class="aparte-sidebar__brand">aparté</span>
    <button class="aparte-btn aparte-btn--icon aparte-btn--sm" type="button" aria-label="New chat">
      <aparte-icon name="edit"></aparte-icon>
    </button>
  </div>
  <div class="aparte-sidebar__search aparte-field-group">
    <input class="aparte-field aparte-field--sm" type="search" placeholder="Search" data-aparte-sidebar-search>
  </div>
  <div class="aparte-sidebar__body">
    <aparte-conversation-list></aparte-conversation-list>
  </div>
  <div class="aparte-sidebar__footer">
    <span class="aparte-avatar aparte-avatar--sm">P</span> Paul
  </div>
</aside>
```
 `.aparte-sidebar` · `.aparte-sidebar__body` · `.aparte-sidebar__brand` · `.aparte-sidebar__footer` · `.aparte-sidebar__header` · `.aparte-sidebar__scrim` · `.aparte-sidebar__search` ### App Header [Section titled “App Header”](#app-header) aparte-app-header — the bar above the chat. A recipe and nothing more, because a header has no behaviour of its own: a toggle for the sidebar (which `<aparte-sidebar>` wires from the `data-aparte-sidebar-toggle` attribute), the conversation’s title, and an actions zone pushed to the end — a model selector, a share button, whatever the page needs. The toggle shows under 48rem, where the sidebar is a drawer, and at any width while the sidebar is collapsed — the one control left that can open it again. [Live preview of the App Header classes](/preview/class/app-header/) The classes below, on plain markup, in their own document — so what you are looking at is core's stylesheet and nothing else. 
```html
<header class="aparte-app-header">
  <button class="aparte-btn aparte-btn--icon aparte-app-header__toggle" type="button" aria-label="Toggle the sidebar" data-aparte-sidebar-toggle><aparte-icon name="menu"></aparte-icon></button>
  <span class="aparte-app-header__title">Deploy checklist</span>
  <div class="aparte-app-header__actions">
    <span class="aparte-tag">gpt-4.1</span>
    <button class="aparte-btn aparte-btn--sm aparte-btn--ghost" type="button">Share</button>
  </div>
</header>
```
 `.aparte-app-header` · `.aparte-app-header__actions` · `.aparte-app-header__title` · `.aparte-app-header__toggle` ### App Shell [Section titled “App Shell”](#app-shell) aparte-app-shell — sidebar beside, header above, the chat in the rest. A recipe: two columns and two rows, the sidebar spanning both rows, the header and the main area stacked in the second column. The chat fills `__main`, which is what gives it the height it needs to scroll (see the layout guide). Size the shell — `height: 100dvh` for a page — and everything inside follows. Under 48rem the sidebar leaves the grid to become a drawer, and the header’s toggle appears. [Live preview of the App Shell classes](/preview/class/app-shell/) The classes below, on plain markup, in their own document — so what you are looking at is core's stylesheet and nothing else. 
```html
<div class="aparte-app-shell" style="height: 24rem">
  <aside class="aparte-sidebar">
    <div class="aparte-sidebar__header">
      <span class="aparte-sidebar__brand">aparté</span>
      <button class="aparte-btn aparte-btn--icon aparte-btn--sm" type="button" aria-label="New chat"><aparte-icon name="edit"></aparte-icon></button>
    </div>
    <div class="aparte-sidebar__search aparte-field-group">
      <input class="aparte-field aparte-field--sm" type="search" placeholder="Search">
    </div>
    <div class="aparte-sidebar__body">
      <div class="aparte-conv-group" role="group" aria-label="Today">
        <div class="aparte-menu__label aparte-conv-group__label" aria-hidden="true">Today</div>
        <div class="aparte-menu__item aparte-conv-item aparte-conv-item--active"><button class="aparte-conv-item__select" type="button"><span class="aparte-conv-item__title">Deploy checklist</span></button></div>
        <div class="aparte-menu__item aparte-conv-item"><button class="aparte-conv-item__select" type="button"><span class="aparte-conv-item__title">Rename the staging bucket</span></button></div>
      </div>
      <div class="aparte-conv-group" role="group" aria-label="Yesterday">
        <div class="aparte-menu__label aparte-conv-group__label" aria-hidden="true">Yesterday</div>
        <div class="aparte-menu__item aparte-conv-item"><button class="aparte-conv-item__select" type="button"><span class="aparte-conv-item__title">Why is total a float?</span></button></div>
      </div>
    </div>
    <div class="aparte-sidebar__footer"><span class="aparte-avatar aparte-avatar--sm">P</span> Paul</div>
  </aside>
  <header class="aparte-app-header">
    <span class="aparte-app-header__title">Deploy checklist</span>
    <div class="aparte-app-header__actions"><span class="aparte-tag">gpt-4.1</span></div>
  </header>
  <main class="aparte-app-shell__main">
    <aparte-chat>
      <aparte-chat-viewport>
        <aparte-chat-bubble message-id="u1" data-role="user" content="Walk me through the deploy."></aparte-chat-bubble>
        <aparte-chat-bubble message-id="a1" data-role="assistant" name="Assistant" content="Build, run the gate, tag, then push the tag — the workflow publishes from it."></aparte-chat-bubble>
      </aparte-chat-viewport>
      <aparte-composer>
        <div class="aparte-composer-shell">
          <div class="aparte-composer-row">
            <aparte-composer-input></aparte-composer-input>
            <aparte-composer-send></aparte-composer-send>
          </div>
        </div>
      </aparte-composer>
    </aparte-chat>
  </main>
</div>
```
 `.aparte-app-header` · `.aparte-app-shell` · `.aparte-app-shell__main` · `.aparte-sidebar` · `.aparte-split` ### Split [Section titled “Split”](#split) aparte-split — two panes and a draggable seam. The chat in one, your pane in the other: a preview frame, an editor, an artifact card. The grid is the whole mechanism. `--aparte-split-position` is the primary pane’s size; `--aparte-split-min` and `--aparte-split-max` are clamp bounds, so the browser does the clamping and nothing in JS parses a unit — px, %, rem and ch all work. Used without `<aparte-split>` this is a static split: set the position from your own media query and there is no drag, which is the Canvas shape. A pane CONTAINS a chat; a chat never contains a split. The element wears the same class and adds the behaviour (drag, arrow keys, the APG separator’s ARIA, one pane at a time under a breakpoint); `<div class="aparte-split">` is the look alone, which is what this page shows. [Live preview of the Split classes](/preview/class/split/) The classes below, on plain markup, in their own document — so what you are looking at is core's stylesheet and nothing else. 
```html
<div class="aparte-split" style="height: 18rem">
  <div>the chat</div>
  <div class="aparte-split__handle"></div>
  <div class="aparte-split__pane">the pane</div>
</div>
```
 `.aparte-split` · `.aparte-split--only-end` · `.aparte-split--only-start` · `.aparte-split--primary-end` · `.aparte-split--vertical` · `.aparte-split__handle` · `.aparte-split__pane` · `.aparte-split__scrim` ## What core writes for itself [Section titled “What core writes for itself”](#what-core-writes-for-itself) These are on the elements aparté renders. They are listed so that nothing it emits is a surprise in your inspector, and so a theme can target one — but what each region *is* is explained on its element’s page, not here. | Sheet | Classes | | --------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `styles/base.css` | `.aparte-bottom-spacer` `.aparte-dot` `.aparte-dots` `.aparte-footer` `.aparte-header` `.aparte-link` `.aparte-link--muted` `.aparte-sr-only` | | `primitives/select.css` | `.aparte-optgroup-chevron` `.aparte-optgroup-header` `.aparte-optgroup-loader` `.aparte-select-chevron` `.aparte-select-dropdown` `.aparte-select-label` `.aparte-select-label-sizer` `.aparte-select-label-text` `.aparte-select-options` `.aparte-select-search` `.aparte-select-trigger` `.aparte-spinner-small` `.aparte-status-dot` | | `primitives/progress-spinner.css` | `.aparte-spinner-fill` `.aparte-spinner-track` | | `components/shell.css` | `.aparte-chat-container` `.aparte-chat-container--auto-center` `.aparte-composer-shell` `.aparte-scroll-btn` `.aparte-scroll-btn--hidden` `.aparte-status-container` `.aparte-status-content` `.aparte-status-text` `.aparte-viewport--framework` `.aparte-viewport-container` `.aparte-viewport-loading` `.aparte-viewport-loading__last` `.aparte-viewport-loading__user` | | `components/bubble.css` | `.aparte-action-bar` `.aparte-action-btn` `.aparte-action-button` `.aparte-action-edit-cancel` `.aparte-action-edit-save` `.aparte-avatar` `.aparte-body` `.aparte-branch-label` `.aparte-branch-next` `.aparte-branch-picker` `.aparte-branch-prev` `.aparte-footer` `.aparte-header` `.aparte-message` `.aparte-message-content` `.aparte-message-streaming` `.aparte-messages-wrapper` `.aparte-name` `.aparte-timestamp` | | `components/composer.css` | `.aparte-cc-button` `.aparte-chat-container--auto-center` `.aparte-ci-editor` `.aparte-composer-footer` `.aparte-composer-row` `.aparte-composer-shell` `.aparte-is-dragover` `.aparte-message` `.aparte-model-selector` `.aparte-send-button` `.aparte-thumb` `.aparte-thumb__remove` `.aparte-viewport--framework` `.aparte-viewport-container` | | `segment/thinking.css` | `.aparte-dot` `.aparte-dots` `.aparte-segment-thinking` `.aparte-segments` `.aparte-thinking-header` `.aparte-waiting` | | `segment/code.css` | `.aparte-code-copy` `.aparte-code-filename` `.aparte-code-header` `.aparte-code-header-filler` `.aparte-code-language` | | `segment/tool-call.css` | `.aparte-segment-tool-call` `.aparte-tool-detail` `.aparte-tool-icon` `.aparte-tool-label` `.aparte-tool-name` `.aparte-tool-part-body` `.aparte-tool-part-label` `.aparte-tool-spinner` `.aparte-tool-state` `.aparte-tool-summary` `.aparte-tool-target` `.aparte-tool-toggle` | | `segment/error.css` | `.aparte-segment-error__details` | | `segment/text.css` | `.aparte-segment-code` `.aparte-segment-error` `.aparte-segment-text` | | `components/elicitation.css` | `.aparte-approval-args` `.aparte-approval-args-label` `.aparte-approval-instruction` `.aparte-approval-option` `.aparte-approval-options` `.aparte-elic-body` `.aparte-elic-control` `.aparte-elic-desc` `.aparte-elic-dismiss` `.aparte-elic-field` `.aparte-elic-message` `.aparte-elic-option` `.aparte-elic-option--command` `.aparte-elic-option--recommended` `.aparte-elic-option-badge` `.aparte-elic-option-body` `.aparte-elic-option-desc` `.aparte-elic-option-title` `.aparte-elic-options` `.aparte-elic-other-input` `.aparte-elic-panel` `.aparte-elic-panel--stepped` `.aparte-elic-skip` `.aparte-elic-step` `.aparte-elic-step__mark` `.aparte-elic-steps` `.aparte-elic-text` `.aparte-elic-title` `.aparte-field-choice--selected` | | `components/conversation.css` | `.aparte-conv-group` `.aparte-conv-item` `.aparte-conv-item--active` `.aparte-conv-item--archived` `.aparte-conv-item__input` `.aparte-conv-item__more` `.aparte-conv-item__select` `.aparte-conv-item__title` `.aparte-conv-list-loading` `.aparte-conv-menu` `.aparte-conv-menu__actions` `.aparte-conv-menu__confirm` `.aparte-conv-menu__item--danger` `.aparte-conv-menu__question` `.aparte-skeleton--text` | | `components/suggestions.css` | `.aparte-suggestion` `.aparte-suggestions` | | `components/context.css` | `.aparte-context` `.aparte-context--ring` `.aparte-context__ring` `.aparte-context__text` `.aparte-context__track` `.aparte-context__value` `.aparte-context__value--empty` `.aparte-progress` `.aparte-progress__bar` | | `components/scroll-rail.css` | `.aparte-chat-container` `.aparte-scroll-rail__list` `.aparte-scroll-rail__tick` | | `styles/prose.css` | `.aparte-code-content-wrapper` `.aparte-content` `.aparte-segment-content` `.aparte-thinking-content` | | `styles/responsive.css` | `.aparte-action-bar` `.aparte-action-button` `.aparte-avatar` `.aparte-composer-row` `.aparte-conv-item__more` `.aparte-message` `.aparte-messages-wrapper` `.aparte-scroll-btn` `.aparte-send-button` `.aparte-split__handle` `.aparte-thumb__remove` |

# CSS variables

> The complete, generated reference of every --aparte-* theme variable.

Every `--aparte-*` variable aparté declares or reads — **464** in total: 169 declared once on `:root`, 241 declared on the **anchored layer** (`:root, :host, [data-aparte-theme], [data-aparte-host], [data-aparte-chat], aparte-chat`) and 54 read by a component with a built-in default. A row marked **anchored** must be overridden on `aparte-chat` or a theme boundary, not on `:root` — see [Theming](/guides/theming/). Both halves are swept from the source on every build. A row marked **palette only** is declared but read by nothing in aparté: it is there for your own CSS to reference (`--aparte-bg` is the page background *your app* paints — core deliberately leaves the chat transparent), or it is a step of a scale nothing happens to use yet. Setting one changes nothing on its own. ## Base Colors [Section titled “Base Colors”](#base-colors) | Variable | Default | Notes | | ------------------------ | --------- | ----- | | `--aparte-primary` | `#b07d33` | | | `--aparte-primary-hover` | `#a06f28` | | | `--aparte-secondary` | `#9a8fb0` | | | `--aparte-neutral` | `#6d6479` | | ## Backgrounds & Surfaces [Section titled “Backgrounds & Surfaces”](#backgrounds--surfaces) `--aparte-surface-3` (code blocks, headers) and `--aparte-text-inverse` are no longer literals here: both are derived from the masters in the anchored layer below, so the eight-line rebrand the theming guide documents actually covers them. They were the two palette hexes that survived a rebrand — a consumer on a blue brand kept the brass palette’s cream for its tooltip ink and its code headers. | Variable | Default | Notes | | -------------------- | --------- | -------------- | | `--aparte-bg` | `#f6f2ea` | | | `--aparte-surface-1` | `#fffdf8` | | | `--aparte-surface-2` | `#f1ebdf` | Bubbles, cards | ## Text [Section titled “Text”](#text) | Variable | Default | Notes | | --------------------- | --------- | ----- | | `--aparte-text` | `#241f2b` | | | `--aparte-text-muted` | `#6d6479` | | ## Borders [Section titled “Borders”](#borders) | Variable | Default | Notes | | ----------------------- | ----------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `--aparte-border` | `#e5ddce` | | | `--aparte-border-width` | `1px` | | | `--aparte-border-focus` | `var(--aparte-neutral)` | Neutral, not the accent: an accent ring on every focused control turned the page into a frame gallery (2026-09-05, the chat-site review). The ring is a contrast step on the neutral, which clears 3:1 on both grounds; the accent stays for actions. — **anchored** | ## Status Colors [Section titled “Status Colors”](#status-colors) | Variable | Default | Notes | | ------------------ | --------- | ----- | | `--aparte-info` | `#3b82f6` | | | `--aparte-success` | `#10b981` | | | `--aparte-warning` | `#f59e0b` | | | `--aparte-error` | `#ef4444` | | ## THE SAME FIVE, AS TEXT ON THE PAGE — and DERIVED, not written down [Section titled “THE SAME FIVE, AS TEXT ON THE PAGE — and DERIVED, not written down”](#the-same-five-as-text-on-the-page--and-derived-not-written-down) The five fills above are for a solid button, a badge, a wash. Read as text on `--aparte-bg` they measured 3.23 (primary), 3.29 (info), 2.27 (success), 1.92 (warning) and 3.37 (error) against the 4.5:1 AA asks of body text, and every ghost, outline and soft button, the tool-call status, the form error and every link core renders was reading the fill. These used to be ten hand-picked hexes — five here, five in the dark block — each measured against THIS repo’s `--aparte-bg`. Same defect the solid ink had: a consumer’s palette got a colour computed for someone else’s page. Each is now the accent with its own hue and chroma kept and its LIGHTNESS forced to `--aparte-ink-l`, which is the one value that has to flip with the theme. Why forced rather than mixed: pulling the accent toward `--aparte-text` reads well and fails on an accent already close to the background — measured 3.41 on a navy brand primary, which cannot be rescued by moving toward the text since it has to move PAST it. Setting the lightness outright has no such blind spot. Measured across 80 combinations — 5 intents x 4 palettes (ours light, ours dark, and two invented) x 4 grounds (bg, surface-1/2/3) — the worst case is 4.80. | Variable | Default | Notes | | ---------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------- | | `--aparte-ink-l` | `0.40` | The target lightness itself is a literal and stays here; the inks that read it are derived, so they live on the anchored layer below. | ## Masters — one knob each [Section titled “Masters — one knob each”](#masters--one-knob-each) Every step of every scale is COMPUTED from these (see the anchored block below), so moving one moves the whole family. That is the property a scale written out as literals cannot have. Spacing and radius are px, type is rem, and the split is deliberate: rem type follows the reader’s browser font size, which is the one accessibility setting a chat has to honour. Compounding that into every gap as well makes a large-type page grow twice over. Wanting rem spacing anyway is now a one-line change here — which is the point of having a master at all. | Variable | Default | Notes | | ---------------------- | -------- | -------------------------------------------------------------- | | `--aparte-space-unit` | `2px` | | | `--aparte-radius-unit` | `3px` | | | `--aparte-font-scale` | `1.08` | | | `--aparte-radius-full` | `9999px` | Not a step of the radius scale: a pill is a shape, not a size. | ## Font-weight scale — every font-weight references these (no raw weights) [Section titled “Font-weight scale — every font-weight references these (no raw weights)”](#font-weight-scale--every-font-weight-references-these-no-raw-weights) | Variable | Default | Notes | | ------------------------------- | ------- | ----- | | `--aparte-font-weight-normal` | `400` | | | `--aparte-font-weight-medium` | `500` | | | `--aparte-font-weight-semibold` | `600` | | | `--aparte-font-weight-bold` | `700` | | ## Line-height scale — every line-height references these (no raw values) [Section titled “Line-height scale — every line-height references these (no raw values)”](#line-height-scale--every-line-height-references-these-no-raw-values) WHERE THE INK ON A COLOURED FILL COMES FROM, and why there is no literal here. `--aparte-btn-on-intent` / `--aparte-badge-on-intent` / `--aparte-checkbox-on-intent` are DERIVED from their own fill, in a `@supports` block in each recipe — see the long note in `button.css`. `--aparte-on-intent` below survives only as the fallback for a browser without relative colour syntax. THE PAIR IS THE CONTRACT. Every intent has two names — the fill and the ink that goes on it — and a theme may declare either half: —aparte-primary / —aparte-on-primary —aparte-secondary / —aparte-on-secondary —aparte-neutral / —aparte-on-neutral —aparte-info / —aparte-on-info —aparte-success / —aparte-on-success —aparte-warning / —aparte-on-warning —aparte-error / —aparte-on-error None of the seven `--aparte-on-*` is declared here, and that is the point: an undeclared partner means “core, work it out”, and the recipes derive it from the fill. Declare one and it wins, everywhere that intent is used. So a theme author decides where they have an opinion and stays silent where they do not, and nothing is guessed behind their back — which is what the old single frozen constant did. This is the shape shadcn uses (`--primary` / `--primary-foreground`), with Bootstrap’s computed default behind it. Before, one hex served all seven and only `neutral` had an escape, hardcoded. | Variable | Default | Notes | | --------------------------------------- | -------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | `--aparte-line-height-none` | `1` | | | `--aparte-line-height-tight` | `1.25` | | | `--aparte-line-height-normal` | `1.5` | | | `--aparte-line-height-relaxed` | `1.6` | | | `--aparte-line-height-loose` | `1.7` | | | `--aparte-font-family` | `system-ui, -apple-system, sans-serif` | Typography | | `--aparte-ink-flip` | `0.57` | The lightness at which the derived ink flips from light to dark. One knob, read by all three recipes, so the threshold is tunable in one place instead of three. 0.57 sits in a wide gap: on this palette the only fill wanting light ink measures 0.519 and the lowest wanting dark measures 0.623. | | `--aparte-ink-dark` | `0.176` | And how dark the dark end goes. NOT 0: at a lightness of zero OKLCH ignores chroma entirely, so the ink came out pure #000000 on every fill and the hue this derivation carries was thrown away — the first version of it claimed a warm black on brass and shipped a flat one. 0.176 is the lightness of `#14100a`, the ink that was hand-picked here before, so the brass keeps the warm near-black it had and a blue fill gets a cool one, each from its own hue. | | `--aparte-on-intent` | `#14100a` | FALLBACK ONLY — a browser without relative colour syntax (Firefox before 128). Everywhere else the ink is derived from the fill and this value is never read. It is a hex chosen by measuring against THIS repo’s own five fills, which is exactly why it stopped being the default path: it made core’s rendering depend on core’s palette, in a library whose consumers bring their own. Our theming guide teaches an eight-line rebrand and a one-attribute `<aparte-chat style="--aparte-primary: …">`, and names this token in neither — so a consumer with a dark brand primary got near-black on it and no signal (1.11:1 measured on `#1a1a2e`). Kept as the fallback because a degraded old browser is better than an unstyled one; it is not the contract. It does not flip with the theme, and in a themed system that anomaly was the tell I wrote a paragraph justifying instead of reading. | | `--aparte-focus-outline-width` | `1px` | Outline width for keyboard focus + drag-over indicators. | | `--aparte-focus-outline-offset` | `0px` | Flush with the box since 2026-09-05 (it was one spacing step outside). A literal, so it lives here with the width rather than in the derived layer. | | `--aparte-scrollbar-width` | `6px` | Scrollbars rendered by the library. | | `--aparte-scrollbar-track` | `transparent` | The transcript’s scrollbar track; the thumb is derived from the neutral, in the derived layer. A host page with a scrollbar of its own (the docs site has one) sets both so the chat’s does not read as a second, foreign scrollbar. | | `--aparte-touch-target-size` | `44px` | Comfortable hit-area on coarse (touch) pointers. | | `--aparte-message-max-width` | `800px` | Messages | | `--aparte-message-content-bg-assistant` | `transparent` | Bubbles. The user’s bubble tint is DERIVED from the accent in the anchored layer below (it was a frozen plum hex that outlived every rebrand); the assistant is plain prose (AI-chat convention) — flip it to get a two-bubble chat-app look. | ## Aliases used by some segment renderers (artifact card, tool pill) [Section titled “Aliases used by some segment renderers (artifact card, tool pill)”](#aliases-used-by-some-segment-renderers-artifact-card-tool-pill) Mapped to existing tokens so consumers that override —aparte-surface-1/2 get cohesive results without touching every rule. | Variable | Default | Notes | | --------------------------- | ----------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------- | | `--aparte-code-font-family` | `ui-monospace, 'Cascadia Code', 'JetBrains Mono', 'Geist Mono', SFMono-Regular, Consolas, 'Liberation Mono', monospace` | Code typography — exposed so apps can swap in Geist Mono / Cascadia / … | ## Attachments [Section titled “Attachments”](#attachments) | Variable | Default | Notes | | --------------------------------- | ------------------------- | ------------------------------- | | `--aparte-attachment-image-size` | `72px` | | | `--aparte-attachments-max-height` | `140px` | | | `--aparte-attachment-chip-bg` | `var(--aparte-surface-2)` | **anchored** | | `--aparte-attachment-chip-border` | `var(--aparte-border)` | **anchored** | | `--aparte-attachment-chip-radius` | `var(--aparte-radius-sm)` | **palette only** — **anchored** | | `--aparte-attachment-chip-color` | `var(--aparte-text)` | **palette only** — **anchored** | ## Attachment thumbnail tile (composer preview + sent-message strip) [Section titled “Attachment thumbnail tile (composer preview + sent-message strip)”](#attachment-thumbnail-tile-composer-preview--sent-message-strip) | Variable | Default | Notes | | ---------------------------------------- | ---------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | `--aparte-thumb-name-color` | `#ffffff` | | | `--aparte-thumb-name-scrim` | `linear-gradient(to top, rgba(0, 0, 0, 0.82), rgba(0, 0, 0, 0))` | | | `--aparte-thumb-name-padding` | `14px 5px 4px` | | | `--aparte-thumb-remove-size` | `18px` | | | `--aparte-thumb-remove-inset` | `3px` | | | `--aparte-thumb-remove-bg` | `rgba(0, 0, 0, 0.6)` | | | `--aparte-thumb-remove-bg-hover` | `rgba(0, 0, 0, 0.85)` | | | `--aparte-thumb-remove-color` | `#ffffff` | | | `--aparte-mark-tint` | `18%` | The mark (display/mark.css): how much of its intent a marked row’s ground takes, and how wide the bar on its start edge is. One pair for the select’s chosen option, the checked field choice, the active conversation and an answered question. | | `--aparte-mark-bar` | `0px` | No bar since 2026-09-05: the start-edge bar read as a dated motif on the chat-site review; the tint and the text weight carry the mark. A theme can put it back. | | `--aparte-branch-picker-label-min-width` | `32px` | Branch Picker | | `--aparte-avatar-size` | `32px` | Avatars | | `--aparte-thumb-radius` | `var(--aparte-radius-lg)` | **anchored** | ## Fractions of the size, computed on the element (display/avatar.css) [Section titled “Fractions of the size, computed on the element (display/avatar.css)”](#fractions-of-the-size-computed-on-the-element-displayavatarcss) The initials’ type, the corner and the group’s overlap follow the ramp instead of sitting at one absolute value for 20px and 56px alike. | Variable | Default | Notes | | --------------------------------- | ------- | ----- | | `--aparte-avatar-initials-ratio` | `0.34` | | | `--aparte-avatar-radius-ratio` | `0.28` | | | `--aparte-avatar-overlap-ratio` | `0.28` | | | `--aparte-avatar-image-user` | `none` | | | `--aparte-avatar-image-assistant` | `none` | | | `--aparte-avatar-image-size` | `90%` | | ## Icons [Section titled “Icons”](#icons) One knob, inherited — a container declares `--aparte-icon-size` and every glyph below follows. The steps are on the type scale, in the derived layer. | Variable | Default | Notes | | ------------------------------------- | ------- | ------------------------------------------------------------------------------------- | | `--aparte-input-action-btn-icon-size` | `20px` | Send button + inline action buttons (their size is the lg step, in the derived layer) | ## Status Indicator [Section titled “Status Indicator”](#status-indicator) | Variable | Default | Notes | | -------------------------- | -------------------------- | ------------------------------------------------------------------------- | | `--aparte-status-bg` | `transparent` | **palette only** | | `--aparte-status-dot-size` | `6px` | | | `--aparte-pulse-floor` | `0.55` | The floor of every pulsing dot’s opacity: above the perception threshold. | | `--aparte-waiting-height` | `1.5em` | Waiting Indicator (the bubble’s own dots, before the first token) | | `--aparte-status-color` | `var(--aparte-text-muted)` | **anchored** | ## Thinking Segment [Section titled “Thinking Segment”](#thinking-segment) The two backgrounds are literals, not derived, because transparent is what the block IS: an understated left rail, never a filled card. They are declared here so a theme that wants the card has a name to set — before this the two rules hard-coded `transparent` and setting either token did nothing. | Variable | Default | Notes | | --------------------------------------- | -------------------------- | ------------ | | `--aparte-thinking-bg` | `transparent` | | | `--aparte-thinking-content-bg` | `transparent` | | | `--aparte-thinking-content-max-height` | `300px` | | | `--aparte-thinking-content-line-height` | `1.55` | | | `--aparte-thinking-rail-width` | `2px` | | | `--aparte-thinking-border` | `var(--aparte-border)` | **anchored** | | `--aparte-thinking-text` | `var(--aparte-text-muted)` | **anchored** | | `--aparte-thinking-content` | `var(--aparte-text)` | **anchored** | ## Elicitation — the panel a tool’s question is asked in [Section titled “Elicitation — the panel a tool’s question is asked in”](#elicitation--the-panel-a-tools-question-is-asked-in) These exist because the panel’s CSS used to be a \<style> injected from JS with every value hardcoded, so it was the one surface in the library that could not be themed and did not appear in the generated CSS reference. | Variable | Default | Notes | | ----------------------------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `--aparte-elic-max-height` | `50vh` | | | `--aparte-elic-control-size` | `15px` | | | `--aparte-elic-textarea-min-height` | `64px` | The tool-call row’s corner. Declared here rather than left as an inline fallback in the renderer: an undeclared custom property still WORKS, which is what makes it dangerous — it is absent from the generated CSS reference, so a consumer has no way to discover the knob exists. | | `--aparte-elic-step-underline` | `2px` | Tabs, not pills. Two passes to get here, both wrong for the same reason — decorating a control instead of choosing what it IS. First a fully-round pill filled with the primary colour: the only 9999px thing in a panel built from 4/6/8px corners, and it read as a second send button. Then a small bordered rectangle: still a button. A step indicator is a TAB — text on a rail, and the current one carries a thick underline. No box, no fill, no border. | | `--aparte-elic-dismiss-room` | `72px` | Space kept clear at the end of the tab rail for the corner escape. | ## Code Blocks [Section titled “Code Blocks”](#code-blocks) | Variable | Default | Notes | | -------------------------------- | ------------------------------- | ----------------------------------------------------------------------- | | `--aparte-code-copy-hover-bg` | `rgba(0, 0, 0, 0.05)` | | | `--aparte-code-copy-icon-size` | `14px` | | | `--aparte-code-inline-font-size` | `0.875em` | | | `--aparte-scroll-btn-shadow` | `0 2px 8px rgba(0, 0, 0, 0.12)` | Scroll-to-bottom button (its size is the lg step, in the derived layer) | | `--aparte-code-bg` | `var(--aparte-surface-1)` | **anchored** | | `--aparte-code-header-bg` | `var(--aparte-surface-2)` | **anchored** | | `--aparte-code-border` | `var(--aparte-border)` | **anchored** | | `--aparte-code-header-text` | `var(--aparte-text-muted)` | **anchored** | ## Error segment [Section titled “Error segment”](#error-segment) | Variable | Default | Notes | | --------------------------- | --------- | ----- | | `--aparte-error-bg` | `#fef2f2` | | | `--aparte-error-border` | `#fecaca` | | | `--aparte-error-solid` | `#dc2626` | | | `--aparte-error-text` | `#991b1b` | | | `--aparte-error-rail-width` | `4px` | | ## Prose (aparte-segment-content) [Section titled “Prose (aparte-segment-content)”](#prose-aparte-segment-content) Heading and block margins, in em so they scale with the heading’s own size — the one place em beats the px scale. The family already named its sizes and weights; these were the only members still written out in the rules. | Variable | Default | Notes | | ---------------------------------------- | ------------------------- | ------------ | | `--aparte-prose-p-margin` | `0.4em 0` | | | `--aparte-prose-h1-size` | `1.4em` | | | `--aparte-prose-h2-size` | `1.25em` | | | `--aparte-prose-h3-size` | `1.1em` | | | `--aparte-prose-list-indent` | `1.5em` | | | `--aparte-prose-list-margin` | `0.4em 0` | | | `--aparte-prose-li-margin` | `0.15em 0` | | | `--aparte-prose-h1-margin` | `0.6em 0 0.2em` | | | `--aparte-prose-h2-margin` | `0.5em 0 0.2em` | | | `--aparte-prose-h3-margin` | `0.4em 0 0.15em` | | | `--aparte-prose-h4-margin` | `0.3em 0 0.1em` | | | `--aparte-prose-blockquote-margin` | `0.4em 0` | | | `--aparte-prose-blockquote-indent` | `1em` | | | `--aparte-prose-hr-margin` | `0.75em 0` | | | `--aparte-prose-code-padding` | `0.1em 0.3em` | | | `--aparte-prose-blockquote-border-width` | `3px` | | | `--aparte-prose-blockquote-border` | `var(--aparte-border)` | **anchored** | | `--aparte-prose-code-bg` | `var(--aparte-surface-2)` | **anchored** | ## Viewport [Section titled “Viewport”](#viewport) Breathing room UNDER the composer, so it does not sit flush against the bottom edge of a full-height chat. Same 16px the viewport already puts between the last bubble and the composer — this restores the symmetry rather than inventing a value. Set it to 0 for a flush composer (a full-bleed mobile shell with a docked keyboard is the legitimate case). | Variable | Default | Notes | | -------------------------- | ----------------------- | ------------ | | `--aparte-chat-bottom-gap` | `var(--aparte-space-8)` | **anchored** | ## Input (composer) [Section titled “Input (composer)”](#input-composer) | Variable | Default | Notes | | ---------------------------- | ---------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | `--aparte-input-line-height` | `var(--aparte-line-height-normal)` | **anchored** | | `--aparte-sidebar-bg` | `var(--aparte-surface-2)` | Shell — **anchored** | | `--aparte-sidebar-inset` | `var(--aparte-space-3)` | The one inline inset of the column’s four regions — header, search, body, footer. They used to carry three (16 / 12 / 12 / 16) and the content sat on two axes. — **anchored** | ## Scroll rail — the ticks beside the transcript [Section titled “Scroll rail — the ticks beside the transcript”](#scroll-rail--the-ticks-beside-the-transcript) Off-scale on purpose: a 2px line and a 14px mark are a minimap’s measures, not spacing steps. | Variable | Default | Notes | | ------------------------------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `--aparte-scroll-rail-tick-size` | `14px` | | | `--aparte-scroll-rail-tick-thickness` | `2px` | | | `--aparte-scroll-rail-hit-size` | `24px` | What a tick is to a POINTER, as opposed to what it is to the eye: WCAG 2.5.8’s 24px minimum. The drawn line stays 14×2 — this sizes the pseudo-element around it, and the gap below derives from it so the pitch rises with the zone. The rail is `display: none` under `(pointer: coarse)`, so 2.5.8’s 24px is the bar here and not 2.5.5’s 44px. | | `--aparte-scroll-rail-share` | `.6` | The share of the transcript’s height the rail may take: a list of ticks, not a minimap, so it is the height of its list up to this, centred, and scrolls past it. | | `--aparte-context-ring-size` | `22px` | Context gauge, ring variant — a diameter, and a stroke in the ring’s own 36-unit box. Literals like the rail’s: a 22px ring is a toolbar’s measure, not a spacing step. | ## Shell — the sidebar’s column, the header’s row and the split’s seam [Section titled “Shell — the sidebar’s column, the header’s row and the split’s seam”](#shell--the-sidebars-column-the-headers-row-and-the-splits-seam) | Variable | Default | Notes | | ---------------------------- | --------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | `--aparte-sidebar-width` | `260px` | | | `--aparte-app-header-height` | `48px` | | | `--aparte-scrim` | `rgba(0, 0, 0, 0.35)` | | | `--aparte-split-position` | `38%` | The split’s primary pane and the bounds it moves between. Any length or percentage: the browser clamps them in the grid template, so nothing in JS parses a unit. The seam is 4px because that is a seam; the grab zone around it is 12px because that is a target, and it grows to the touch target on a coarse pointer (responsive.css). | ## Never more than the container has [Section titled “Never more than the container has”](#never-more-than-the-container-has) At 320px this floor was wider than a phone, so the primary pane took everything and the end pane was annihilated to 0. | Variable | Default | Notes | | -------------------- | ------------------ | ----- | | `--aparte-split-min` | `min(20rem, 100%)` | | | `--aparte-split-max` | `60%` | | ## The seam’s TRACK — the grab zone, and what the grid reserves [Section titled “The seam’s TRACK — the grab zone, and what the grid reserves”](#the-seams-track--the-grab-zone-and-what-the-grid-reserves) The painted line inside it is `--aparte-split-seam-width` (derived layer): one token used to size both, so the line could not be thinned without moving the layout, and at 4px it was four times the kit’s rule with no grip — an interaction drawn as a decoration. | Variable | Default | Notes | | ---------------------------- | ------- | ----- | | `--aparte-split-handle-size` | `12px` | | | `--aparte-split-hit-area` | `12px` | | ## Sizes that are not steps of a scale [Section titled “Sizes that are not steps of a scale”](#sizes-that-are-not-steps-of-a-scale) Each is off-scale on purpose — a 40px file tile is a tile, not fourteen spacing units — so each gets a name rather than sitting as a magic number in a rule. Literal, like every other size token here (`--aparte-send-btn-size`, `--aparte-avatar-size`): deriving the control sizes from —aparte-space-unit is a separate decision, not a side effect of naming them. ## Motion [Section titled “Motion”](#motion) Four durations because the sheet actually uses four — 0.12s and 0.15s were doing the same job on the same properties, which is drift; both are named here rather than collapsed, so the choice is visible and stays yours. `spin` and `pulse` are loop lengths, not state changes. | Variable | Default | Notes | | -------------------------- | ------- | -------------------------------------- | | `--aparte-duration-fast` | `0.12s` | | | `--aparte-duration-base` | `0.15s` | | | `--aparte-duration-slow` | `0.2s` | | | `--aparte-duration-slower` | `0.3s` | | | `--aparte-duration-spin` | `0.7s` | | | `--aparte-duration-pulse` | `1.2s` | | | `--aparte-ease` | `ease` | | | `--aparte-slide-distance` | `8px` | How far a panel travels as it appears. | ## Stacking [Section titled “Stacking”](#stacking) Two names because the sheet has exactly two stacked things: the dismiss control that must clear its own row, and the scroll button floating over the transcript. No invented elevation scale — a host that needs its modal above the button raises it here. | Variable | Default | Notes | | --------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `--aparte-z-raised` | `1` | | | `--aparte-z-dropdown` | `1000` | | | `--aparte-z-floating` | `10` | | | `--aparte-line-height-snug` | `1.4` | Select. Its dropdown shadow used to live as a fallback inside select.css, which meant it had no dark value at all — rgba(0,0,0,0.1) over a dark surface is no shadow. Declared here, it themes like every other. | | `--aparte-disabled-opacity` | `0.5` | One value for “this control is disabled”. It was seven states carrying five different opacities — 0.3, 0.45, 0.5, 0.5, 0.55, 0.6, 0.6 — and not one of them had a comment saying why, so there was nothing to preserve in keeping them. Deliberately ONE knob and not Material’s content/container pair: that split tints a container’s background apart from its text, and every case here is a whole control fading. Not Bootstrap’s per-component variable either — that is the drift we just removed, with names on it. | ## Elevation for the layered surfaces [Section titled “Elevation for the layered surfaces”](#elevation-for-the-layered-surfaces) Literal, and each has a dark value below — a shadow tuned for a light ground is no shadow at all on a dark one, which is how the select’s dropdown lost its lift in dark mode until it was caught. | Variable | Default | Notes | | ------------------------- | ---------------------------------------------------------------- | ----- | | `--aparte-menu-shadow` | `0 4px 12px rgba(0, 0, 0, 0.1)` | | | `--aparte-popover-shadow` | `0 1px 3px rgba(0, 0, 0, 0.08), 0 10px 28px rgba(0, 0, 0, 0.16)` | | | `--aparte-tooltip-shadow` | `0 2px 8px rgba(0, 0, 0, 0.12)` | | ## The composer laid over the transcript (overlay-composer) [Section titled “The composer laid over the transcript (overlay-composer)”](#the-composer-laid-over-the-transcript-overlay-composer) A thing that floats has to be seen floating, and its ground is the transcript’s own. | Variable | Default | Notes | | ------------------------------------- | ---------------------------------------------------------------- | ----- | | `--aparte-composer-overlay-shadow` | `0 -4px 16px rgba(0, 0, 0, 0.06)` | | | `--aparte-switch-thumb-shadow` | `0 1px 2px rgba(0, 0, 0, 0.15)` | | | `--aparte-range-thumb-shadow` | `0 1px 2px rgba(0, 0, 0, 0.15)` | | | `--aparte-select-shadow` | `0 1px 3px rgba(0, 0, 0, 0.08), 0 10px 28px rgba(0, 0, 0, 0.16)` | | | `--aparte-select-min-width` | `200px` | | | `--aparte-select-dropdown-max-height` | `300px` | | | `--aparte-select-status-dot-size` | `8px` | | | `--aparte-select-spinner-size` | `12px` | | ## Button sizes [Section titled “Button sizes”](#button-sizes) Literal like every other control size: tightening the spacing scale must not shrink a button. The three are the three this library already uses — a conversation action, an action-bar button, a send button. ## Display primitives — sizes [Section titled “Display primitives — sizes”](#display-primitives--sizes) Literal like every other control size: tightening the spacing scale must not shrink an avatar or a spinner. ## Sizes for the five native controls the field sheet dresses [Section titled “Sizes for the five native controls the field sheet dresses”](#sizes-for-the-five-native-controls-the-field-sheet-dresses) Literal, like every other control size. The date minimum width exists because a date field otherwise collapses to the intrinsic width of its digits, which differs per locale. | Variable | Default | Notes | | --------------------------------------- | ------- | ----- | | `--aparte-color-size` | `32px` | | | `--aparte-datetime-min-width` | `160px` | | | `--aparte-meter-height` | `8px` | | | `--aparte-datetime-indicator-opacity` | `0.6` | | | `--aparte-thumbnail-size` | `56px` | | | `--aparte-thumbnail-size-sm` | `40px` | | | `--aparte-thumbnail-size-lg` | `72px` | | | `--aparte-avatar-size-xs` | `20px` | | | `--aparte-avatar-size-sm` | `24px` | | | `--aparte-avatar-size-lg` | `40px` | | | `--aparte-avatar-size-xl` | `56px` | | | `--aparte-spinner-size-sm` | `12px` | | | `--aparte-spinner-size-md` | `16px` | | | `--aparte-spinner-size-lg` | `24px` | | | `--aparte-skeleton-rect-height` | `5rem` | | | `--aparte-skeleton-text-last-width` | `60%` | | | `--aparte-progress-indeterminate-width` | `40%` | | ## The control height scale [Section titled “The control height scale”](#the-control-height-scale) Four steps, and EVERY control reads one: a text button used to have no height (23px of padding and line-height) beside 24, 29, 32, 36 and 44px neighbours, and the 36px family (send, the input’s action button, the scroll button) lived off the scale as literals. sm is the small control (action bar, branch arrows, a row’s ⋯), md the default button, lg the field and the composer’s controls at rest, xl the large button. | Variable | Default | Notes | | ---------------------- | ------- | ----- | | `--aparte-btn-size-sm` | `24px` | | | `--aparte-btn-size-md` | `32px` | | | `--aparte-btn-size-lg` | `36px` | | | `--aparte-btn-size-xl` | `40px` | | ## The field family’s literal sizes, beside the button’s [Section titled “The field family’s literal sizes, beside the button’s”](#the-field-familys-literal-sizes-beside-the-buttons) The derived knobs (paddings, radius) sit in the anchored layer below, like the button’s own. | Variable | Default | Notes | | ------------------------------------ | ------- | ----- | | `--aparte-field-textarea-min-height` | `80px` | | | `--aparte-checkbox-size` | `18px` | | | `--aparte-radio-size` | `18px` | | | `--aparte-radio-dot-size` | `8px` | | | `--aparte-switch-width` | `40px` | | | `--aparte-switch-height` | `22px` | | | `--aparte-switch-thumb-inset` | `2px` | | | `--aparte-range-thumb-size` | `16px` | | | `--aparte-range-track-height` | `4px` | | | `--aparte-tool-spinner-size` | `10px` | | ## The five accents AS TEXT, each derived from its own fill [Section titled “The five accents AS TEXT, each derived from its own fill”](#the-five-accents-as-text-each-derived-from-its-own-fill) See the long note in the literal block. Anchored, not declared once on `:root`, for the reason this whole layer exists: an \<aparte-chat> that sets its own `--aparte-primary` only gets a matching ink if the ink is declared on that element too. | Variable | Default | Notes | | ---------------------- | -------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------- | | `--aparte-primary-ink` | `color-mix(in oklab, var(--aparte-primary) 40%, var(--aparte-text))` | **anchored** — the fallback: under `@supports (color: oklch(from red l c h))` it is `oklch(from var(--aparte-primary) var(--aparte-ink-l) c h)` | | `--aparte-info-ink` | `color-mix(in oklab, var(--aparte-info) 40%, var(--aparte-text))` | **anchored** — the fallback: under `@supports (color: oklch(from red l c h))` it is `oklch(from var(--aparte-info) var(--aparte-ink-l) c h)` | | `--aparte-success-ink` | `color-mix(in oklab, var(--aparte-success) 40%, var(--aparte-text))` | **anchored** — the fallback: under `@supports (color: oklch(from red l c h))` it is `oklch(from var(--aparte-success) var(--aparte-ink-l) c h)` | | `--aparte-warning-ink` | `color-mix(in oklab, var(--aparte-warning) 40%, var(--aparte-text))` | **anchored** — the fallback: under `@supports (color: oklch(from red l c h))` it is `oklch(from var(--aparte-warning) var(--aparte-ink-l) c h)` | | `--aparte-error-ink` | `color-mix(in oklab, var(--aparte-error) 40%, var(--aparte-text))` | **anchored** — the fallback: under `@supports (color: oklch(from red l c h))` it is `oklch(from var(--aparte-error) var(--aparte-ink-l) c h)` | ## Secondary and neutral as text too, for the same reason [Section titled “Secondary and neutral as text too, for the same reason”](#secondary-and-neutral-as-text-too-for-the-same-reason) A ghost, outline or soft button paints its label with its intent, and those two were reading their fill — 2.71:1 for secondary on the page, 4.19:1 for neutral on its own soft wash. | Variable | Default | Notes | | ------------------------ | ---------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------- | | `--aparte-secondary-ink` | `color-mix(in oklab, var(--aparte-secondary) 40%, var(--aparte-text))` | **anchored** — the fallback: under `@supports (color: oklch(from red l c h))` it is `oklch(from var(--aparte-secondary) var(--aparte-ink-l) c h)` | | `--aparte-neutral-ink` | `color-mix(in oklab, var(--aparte-neutral) 40%, var(--aparte-text))` | **anchored** — the fallback: under `@supports (color: oklch(from red l c h))` it is `oklch(from var(--aparte-neutral) var(--aparte-ink-l) c h)` | ## The scales, computed from the masters above [Section titled “The scales, computed from the masters above”](#the-scales-computed-from-the-masters-above) They live in the ANCHORED block and not with the literals because a value that reads a var is substituted where it is DECLARED: an \<aparte-chat> that sets its own —aparte-space-unit only follows it if the steps are declared on that element too. `scripts/check-derived-vars.mjs` holds that rule. Rem, so the reader’s browser font size is honoured; times the scale, so an app can size the whole chat down or up without restating six values. | Variable | Default | Notes | | ------------------------- | -------------------------------------------- | ------------ | | `--aparte-space-1` | `calc(var(--aparte-space-unit) * 1)` | **anchored** | | `--aparte-space-2` | `calc(var(--aparte-space-unit) * 2)` | **anchored** | | `--aparte-space-3` | `calc(var(--aparte-space-unit) * 3)` | **anchored** | | `--aparte-space-4` | `calc(var(--aparte-space-unit) * 4)` | **anchored** | | `--aparte-space-5` | `calc(var(--aparte-space-unit) * 5)` | **anchored** | | `--aparte-space-6` | `calc(var(--aparte-space-unit) * 6)` | **anchored** | | `--aparte-space-7` | `calc(var(--aparte-space-unit) * 7)` | **anchored** | | `--aparte-space-8` | `calc(var(--aparte-space-unit) * 8)` | **anchored** | | `--aparte-radius-xs` | `calc(var(--aparte-radius-unit) * 1)` | **anchored** | | `--aparte-radius-sm` | `calc(var(--aparte-radius-unit) * 2)` | **anchored** | | `--aparte-radius-md` | `calc(var(--aparte-radius-unit) * 3)` | **anchored** | | `--aparte-radius-lg` | `calc(var(--aparte-radius-unit) * 4)` | **anchored** | | `--aparte-radius-xl` | `calc(var(--aparte-radius-unit) * 6)` | **anchored** | | `--aparte-font-size-2xs` | `calc(0.625rem * var(--aparte-font-scale))` | **anchored** | | `--aparte-font-size-xs` | `calc(0.6875rem * var(--aparte-font-scale))` | **anchored** | | `--aparte-font-size-sm` | `calc(0.75rem * var(--aparte-font-scale))` | **anchored** | | `--aparte-font-size-md` | `calc(0.8125rem * var(--aparte-font-scale))` | **anchored** | | `--aparte-font-size-base` | `calc(0.9375rem * var(--aparte-font-scale))` | **anchored** | ## Above the body, in the order the names say [Section titled “Above the body, in the order the names say”](#above-the-body-in-the-order-the-names-say) `lg` used to be 0.875rem — SMALLER than `base` — with nothing above it, so a title and a placeholder shared a size and a card’s title was smaller than its body. A scale whose name lies is worse than a short one. | Variable | Default | Notes | | ------------------------ | -------------------------------------------- | ------------------------------- | | `--aparte-font-size-lg` | `calc(1.0625rem * var(--aparte-font-scale))` | **anchored** | | `--aparte-font-size-xl` | `calc(1.25rem * var(--aparte-font-scale))` | **palette only** — **anchored** | | `--aparte-font-size-2xl` | `calc(1.5rem * var(--aparte-font-scale))` | **palette only** — **anchored** | ## Elicitation and the conversation item, on the scale [Section titled “Elicitation and the conversation item, on the scale”](#elicitation-and-the-conversation-item-on-the-scale) They were literals off every step — 0.76 / 0.78 / 0.8 / 0.82rem and a `7px 10px` padding written twice — so two panels sat outside the type and spacing systems and neither followed —aparte-font-scale. Each lands on its nearest step; the largest move is under half a pixel. Derived, so they live here. Split, because the action bar’s offset below a message is computed from the vertical half (#56) — a shorthand cannot be read by parts. | Variable | Default | Notes | | ---------------------------------- | --------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `--aparte-message-gap` | `var(--aparte-space-6)` | The component tier, on the scales. These were literals whose values already WERE steps — `--aparte-message-gap` was 12px, which is space-6 — so a master reached the scale and stopped there: a chat at —aparte-space-unit:3px grew its gaps and kept its message padding at 16px. The line drawn here, and it is a line: the spacing scale governs gutters, padding and margin; the radius scale governs corners; the type scale governs text. None of them governs a STROKE width or a CONTROL size. —aparte-thinking-rail-width stays 2px because loosening spacing must not thicken a rule, and —aparte-avatar-size stays 32px because tightening it must not shrink an avatar. The eight text sizes were px and are rem now, like the rest of the typography: identical at a 16px root, and following the reader’s setting elsewhere. — **anchored** | | `--aparte-message-padding-block` | `var(--aparte-space-8)` | **anchored** | | `--aparte-message-padding-inline` | `var(--aparte-space-6)` | **anchored** | | `--aparte-message-content-padding` | `var(--aparte-space-5) var(--aparte-space-7)` | **anchored** | | `--aparte-action-bar-gap` | `var(--aparte-space-2)` | **anchored** | | `--aparte-branch-picker-gap` | `var(--aparte-space-2)` | **anchored** | | `--aparte-waiting-dot-gap` | `var(--aparte-space-2)` | **anchored** | | `--aparte-elic-gap` | `var(--aparte-space-3)` | **anchored** | | `--aparte-elic-padding` | `var(--aparte-space-3) var(--aparte-space-2)` | **anchored** | | `--aparte-elic-field-gap` | `var(--aparte-space-4)` | **anchored** | | `--aparte-elic-step-padding` | `var(--aparte-space-2) var(--aparte-space-1)` | **anchored** | | `--aparte-elic-step-gap` | `var(--aparte-space-7)` | **anchored** | | `--aparte-viewport-padding` | `var(--aparte-space-8)` | **anchored** | | `--aparte-scrollbar-thumb` | `var(--aparte-neutral)` | **anchored** | | `--aparte-input-padding-x` | `var(--aparte-space-6)` | **anchored** | ## The editor at rest is the control height [Section titled “The editor at rest is the control height”](#the-editor-at-rest-is-the-control-height) Half of what the control size leaves once one line of its own text is taken out. It used to be a flat 10px, which made the editor 44px beside 36px buttons and, the row aligning at the end, sat the send button 4px below the editor’s centre. Derived from the editor’s own line (1lh), so a coarse pointer’s 44 and a changed font both keep the editor and its buttons on one centre. | Variable | Default | Notes | | ----------------------------- | ----------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------- | | `--aparte-input-padding-y` | `calc((var(--aparte-composer-control-size) - var(--aparte-input-line-height) * 1em) / 2)` | **anchored** — the fallback: under `@supports (height: 1lh)` it is `calc((var(--aparte-composer-control-size) - 1lh) / 2)` | | `--aparte-conv-list-gap` | `var(--aparte-space-1)` | **anchored** | | `--aparte-conv-item-gap` | `var(--aparte-space-3)` | **anchored** | | `--aparte-elic-option-radius` | `var(--aparte-radius-md)` | **anchored** | | `--aparte-elic-input-radius` | `var(--aparte-radius-md)` | **anchored** | | `--aparte-tool-row-radius` | `var(--aparte-radius-md)` | **anchored** | ## The split’s painted seam: the kit’s rule, inside a 12px track [Section titled “The split’s painted seam: the kit’s rule, inside a 12px track”](#the-splits-painted-seam-the-kits-rule-inside-a-12px-track) | Variable | Default | Notes | | ----------------------------------- | ------------------------------ | ------------ | | `--aparte-split-seam-width` | `var(--aparte-border-width)` | **anchored** | | `--aparte-name-font-size` | `var(--aparte-font-size-md)` | **anchored** | | `--aparte-timestamp-font-size` | `var(--aparte-font-size-sm)` | **anchored** | | `--aparte-branch-picker-label-size` | `var(--aparte-font-size-sm)` | **anchored** | | `--aparte-input-font-size` | `var(--aparte-font-size-base)` | **anchored** | | `--aparte-content-font-size` | `var(--aparte-font-size-base)` | **anchored** | | `--aparte-status-font-size` | `var(--aparte-font-size-md)` | **anchored** | ## The button recipe’s knobs [Section titled “The button recipe’s knobs”](#the-button-recipes-knobs) Derived, so a chat that moves —aparte-space-unit or —aparte-font-scale takes its buttons with it. Defaults are what the 33 control rules already measured agree on: a muted ghost that fills on hover. ## Display primitives [Section titled “Display primitives”](#display-primitives) Every one composed from a scale or the palette, so a chat that moves —aparte-space-unit or —aparte-font-scale carries them along. ## A tooltip is an INVERTED surface [Section titled “A tooltip is an INVERTED surface”](#a-tooltip-is-an-inverted-surface) Dark on a light theme, light on a dark one. Reading the text pair gives exactly that, and for free — no third palette. ## The distance between a placed tooltip (`data-side`) and its anchor [Section titled “The distance between a placed tooltip (data-side) and its anchor”](#the-distance-between-a-placed-tooltip-data-side-and-its-anchor) The arrow’s half-diagonal, so the tip lands on the trigger rather than 2px short of it. A meter is judged against a range, so its three bands take the three status colours rather than one accent. | Variable | Default | Notes | | ------------------------ | ------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `--aparte-tooltip-gap` | `var(--aparte-space-3)` | **anchored** | | `--aparte-tooltip-bg` | `var(--aparte-text)` | **anchored** | | `--aparte-tooltip-color` | `var(--aparte-text-inverse)` | **anchored** | | `--aparte-spinner-size` | `var(--aparte-spinner-size-md)` | Shared by both spinners the library ships — the display recipe and the \<aparte-progress-spinner> element. Declared here rather than on one of them, so the other can resolve it too. — **anchored** | ## A choice row [Section titled “A choice row”](#a-choice-row) The whole line is the target, so it carries the padding a control alone would not. | Variable | Default | Notes | | ----------------------------------- | --------------------------------------------- | ------------ | | `--aparte-field-choice-gap` | `var(--aparte-space-5)` | **anchored** | | `--aparte-field-choice-padding` | `var(--aparte-space-4) var(--aparte-space-5)` | **anchored** | | `--aparte-field-choice-radius` | `var(--aparte-radius-lg)` | **anchored** | | `--aparte-meter-track` | `var(--aparte-surface-3)` | **anchored** | | `--aparte-meter-optimum` | `var(--aparte-success)` | **anchored** | | `--aparte-meter-suboptimum` | `var(--aparte-warning)` | **anchored** | | `--aparte-meter-poor` | `var(--aparte-error)` | **anchored** | | `--aparte-output-padding` | `var(--aparte-space-1) var(--aparte-space-2)` | **anchored** | | `--aparte-output-bg` | `var(--aparte-surface-2)` | **anchored** | | `--aparte-link-color` | `var(--aparte-primary-ink)` | **anchored** | | `--aparte-link-color-hover` | `var(--aparte-primary-hover)` | **anchored** | | `--aparte-link-underline-thickness` | `var(--aparte-border-width)` | **anchored** | | `--aparte-link-underline-offset` | `var(--aparte-space-1)` | **anchored** | | `--aparte-thumbnail-bg` | `var(--aparte-surface-2)` | **anchored** | | `--aparte-thumbnail-border` | `var(--aparte-border)` | **anchored** | | `--aparte-thumbnail-radius` | `var(--aparte-radius-lg)` | **anchored** | | `--aparte-alert-gap` | `var(--aparte-space-3)` | **anchored** | | `--aparte-alert-padding` | `var(--aparte-space-4) var(--aparte-space-5)` | **anchored** | | `--aparte-alert-radius` | `var(--aparte-radius-md)` | **anchored** | | `--aparte-alert-rail-width` | `var(--aparte-space-1)` | **anchored** | ## The icon scale, in rem times the type factor [Section titled “The icon scale, in rem times the type factor”](#the-icon-scale-in-rem-times-the-type-factor) The one scale in the theme that was pinned in px while every type size followed `--aparte-font-scale`, so a glyph beside text shrank optically the moment a reader enlarged the text. The loose default is 16 (it was 14, and its documentation already said 16). | Variable | Default | Notes | | ---------------------------------- | --------------------------------------------- | ------------ | | `--aparte-icon-size` | `calc(1rem * var(--aparte-font-scale))` | **anchored** | | `--aparte-icon-size-sm` | `calc(0.75rem * var(--aparte-font-scale))` | **anchored** | | `--aparte-icon-size-lg` | `calc(1.125rem * var(--aparte-font-scale))` | **anchored** | | `--aparte-icon-size-xl` | `calc(1.25rem * var(--aparte-font-scale))` | **anchored** | | `--aparte-alert-icon-size` | `var(--aparte-space-8)` | **anchored** | | `--aparte-alert-dismiss-size` | `var(--aparte-btn-size-sm)` | **anchored** | | `--aparte-alert-title-font-size` | `var(--aparte-font-size-md)` | **anchored** | | `--aparte-alert-message-font-size` | `var(--aparte-font-size-sm)` | **anchored** | | `--aparte-avatar-fallback-bg` | `var(--aparte-surface-3)` | **anchored** | | `--aparte-avatar-fallback-color` | `var(--aparte-text)` | **anchored** | | `--aparte-avatar-group-ring-width` | `calc(var(--aparte-border-width) * 2)` | **anchored** | | `--aparte-avatar-group-ring-color` | `var(--aparte-surface-1)` | **anchored** | | `--aparte-badge-font-size` | `var(--aparte-font-size-2xs)` | **anchored** | | `--aparte-badge-gap` | `var(--aparte-space-1)` | **anchored** | | `--aparte-badge-padding` | `var(--aparte-space-1) var(--aparte-space-2)` | **anchored** | | `--aparte-badge-radius` | `var(--aparte-radius-full)` | **anchored** | | `--aparte-badge-min-width` | `var(--aparte-space-8)` | **anchored** | | `--aparte-badge-dot-size` | `var(--aparte-space-4)` | **anchored** | | `--aparte-tag-font-size` | `var(--aparte-font-size-sm)` | **anchored** | | `--aparte-tag-gap` | `var(--aparte-space-2)` | **anchored** | | `--aparte-tag-padding` | `var(--aparte-space-1) var(--aparte-space-3)` | **anchored** | | `--aparte-tag-radius` | `var(--aparte-radius-sm)` | **anchored** | | `--aparte-tag-remove-size` | `var(--aparte-space-6)` | **anchored** | | `--aparte-tag-remove-icon-size` | `var(--aparte-space-5)` | **anchored** | | `--aparte-card-radius` | `var(--aparte-radius-xl)` | **anchored** | | `--aparte-card-header-padding` | `var(--aparte-space-4) var(--aparte-space-5)` | **anchored** | | `--aparte-card-body-padding` | `var(--aparte-space-5)` | **anchored** | | `--aparte-card-footer-padding` | `var(--aparte-space-4) var(--aparte-space-5)` | **anchored** | | `--aparte-card-header-font-size` | `var(--aparte-font-size-base)` | **anchored** | | `--aparte-divider-margin` | `var(--aparte-space-5)` | **anchored** | | `--aparte-divider-label-gap` | `var(--aparte-space-4)` | **anchored** | | `--aparte-divider-label-font-size` | `var(--aparte-font-size-sm)` | **anchored** | | `--aparte-kbd-bg` | `var(--aparte-surface-2)` | **anchored** | | `--aparte-kbd-radius` | `var(--aparte-radius-sm)` | **anchored** | | `--aparte-kbd-padding` | `var(--aparte-space-1) var(--aparte-space-2)` | **anchored** | | `--aparte-kbd-font-size` | `var(--aparte-font-size-2xs)` | **anchored** | | `--aparte-kbd-min-width` | `var(--aparte-space-8)` | **anchored** | | `--aparte-kbd-border-bottom-width` | `var(--aparte-space-1)` | **anchored** | | `--aparte-progress-height` | `var(--aparte-space-2)` | **anchored** | | `--aparte-progress-fill` | `var(--aparte-primary)` | **anchored** | ## The ground of a gauge or a placeholder [Section titled “The ground of a gauge or a placeholder”](#the-ground-of-a-gauge-or-a-placeholder) The thing a value is read against, so it has to be seen. Derived RELATIVE to the page, not a surface level: a level sat at two different distances from the ground in light and dark. | Variable | Default | Notes | | ---------------------------- | ------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `--aparte-track` | `color-mix(in srgb, var(--aparte-text) 8%, var(--aparte-bg))` | **anchored** | | `--aparte-skeleton-base` | `var(--aparte-track)` | **anchored** | | `--aparte-scroll-rail-width` | `max(var(--aparte-scroll-rail-hit-size), calc(var(--aparte-scroll-rail-tick-size) * 1.6))` | The rail is as wide as its widest tick (the current one is 1.6× the resting size); it used to be a 20px literal clipping a 22.4px tick. The floor is one tick’s pressable zone: the rail clips, so a column narrower than the zone would cut the target back below 24px on the very edge a reader aims at. — **anchored** | ## The distance between two ticks IS the zone minus the line [Section titled “The distance between two ticks IS the zone minus the line”](#the-distance-between-two-ticks-is-the-zone-minus-the-line) Gap + thickness = the 24px pitch, so the zones tile edge to edge. Growing the zone alone would have overlapped them by 14px and left the z-order to decide every press. | Variable | Default | Notes | | -------------------------- | ------------------------------------------------------------------------------------- | ------------ | | `--aparte-scroll-rail-gap` | `calc(var(--aparte-scroll-rail-hit-size) - var(--aparte-scroll-rail-tick-thickness))` | **anchored** | | `--aparte-skeleton-shine` | `var(--aparte-surface-3)` | **anchored** | ## The line it stands for [Section titled “The line it stands for”](#the-line-it-stands-for) As tall as the content type, and a gap that is the rest of the content line, so the text that replaces it lands where it was (T21). It was 12px on an 18px step for a 16px line on a 27px step — a third of a line of jump per line. | Variable | Default | Notes | | ------------------------------- | --------------------------------------------------------------------------------- | ------------ | | `--aparte-skeleton-text-height` | `var(--aparte-content-font-size)` | **anchored** | | `--aparte-skeleton-text-gap` | `calc(var(--aparte-content-font-size) * (var(--aparte-content-line-height) - 1))` | **anchored** | | `--aparte-skeleton-circle-size` | `var(--aparte-avatar-size)` | **anchored** | | `--aparte-spinner-thickness` | `var(--aparte-space-1)` | **anchored** | ## The field family’s knobs, beside the button’s [Section titled “The field family’s knobs, beside the button’s”](#the-field-familys-knobs-beside-the-buttons) They used to be declared on `.aparte-field` itself, which is why `.aparte-field-group` (their PARENT) and `.aparte-color` (a sibling recipe) read a property that did not exist there and rendered SQUARE: a custom property is substituted where it is declared and only inherits downwards. Same reason they belong here rather than there: the theming guide sends a consumer to `:root`, and every other family’s knobs are here. The *channels* stay local on purpose (`--aparte-checkbox-intent` and friends are filled by a modifier, not set by a theme). The field’s resting height is the lg step of the control scale, one step above the default button and level with the composer’s controls; `--sm` and `--lg` sit one step either side. It used to be padding plus line-height, \~29px, the second tallest thing in a row of five different heights. | Variable | Default | Notes | | --------------------------- | --------------------------------------------- | ------------ | | `--aparte-field-padding` | `var(--aparte-space-2) var(--aparte-space-3)` | **anchored** | | `--aparte-field-padding-sm` | `var(--aparte-space-1) var(--aparte-space-2)` | **anchored** | | `--aparte-field-padding-lg` | `var(--aparte-space-3) var(--aparte-space-4)` | **anchored** | | `--aparte-field-radius` | `var(--aparte-radius-md)` | **anchored** | | `--aparte-field-size` | `var(--aparte-btn-size-lg)` | **anchored** | | `--aparte-field-size-sm` | `var(--aparte-btn-size-md)` | **anchored** | | `--aparte-field-size-lg` | `var(--aparte-btn-size-xl)` | **anchored** | ## The 36px family, on the scale: named, not literal [Section titled “The 36px family, on the scale: named, not literal”](#the-36px-family-on-the-scale-named-not-literal) | Variable | Default | Notes | | -------------------------------- | --------------------------------------------- | ------------ | | `--aparte-send-btn-size` | `var(--aparte-btn-size-lg)` | **anchored** | | `--aparte-input-action-btn-size` | `var(--aparte-btn-size-lg)` | **anchored** | | `--aparte-scroll-btn-size` | `var(--aparte-btn-size-lg)` | **anchored** | | `--aparte-btn-gap` | `var(--aparte-space-2)` | **anchored** | | `--aparte-btn-padding` | `var(--aparte-space-2) var(--aparte-space-3)` | **anchored** | | `--aparte-btn-radius` | `var(--aparte-radius-md)` | **anchored** | ## Control text is the md step (14px) [Section titled “Control text is the md step (14px)”](#control-text-is-the-md-step-14px) One step lower was the origin of the “poor” look: 13px labels in 32px boxes, beside 15px prose. | Variable | Default | Notes | | ---------------------------- | --------------------------------------------- | ------------ | | `--aparte-btn-font-size` | `var(--aparte-font-size-md)` | **anchored** | | `--aparte-btn-bg-hover` | `var(--aparte-surface-2)` | **anchored** | | `--aparte-btn-bg-active` | `var(--aparte-surface-3)` | **anchored** | | `--aparte-btn-bg-toggled` | `var(--aparte-surface-2)` | **anchored** | | `--aparte-btn-color-toggled` | `var(--aparte-text)` | **anchored** | | `--aparte-btn-size` | `var(--aparte-btn-size-md)` | **anchored** | | `--aparte-btn-ink` | `var(--aparte-on-intent)` | **anchored** | | `--aparte-btn-icon-size` | `var(--aparte-icon-size-lg)` | **anchored** | | `--aparte-btn-padding-sm` | `var(--aparte-space-1) var(--aparte-space-2)` | **anchored** | | `--aparte-btn-padding-lg` | `var(--aparte-space-3) var(--aparte-space-5)` | **anchored** | ## One knob for the composer’s control set [Section titled “One knob for the composer’s control set”](#one-knob-for-the-composers-control-set) The send button, the input’s action buttons, the editor’s single-line height: the lg step at rest, the touch target under a coarse pointer (responsive.css). It used to be undeclared, with `44px` written as a fallback at every reader, so a desktop composer was a 62px bar around 15px of text and the coarse-pointer block had nothing left to enlarge. | Variable | Default | Notes | | --------------------------------- | --------------------------------------------- | ------------ | | `--aparte-composer-control-size` | `var(--aparte-btn-size-lg)` | **anchored** | | `--aparte-elic-message-size` | `var(--aparte-font-size-base)` | **anchored** | | `--aparte-elic-title-size` | `var(--aparte-font-size-base)` | **anchored** | | `--aparte-elic-desc-size` | `var(--aparte-font-size-sm)` | **anchored** | | `--aparte-elic-option-title-size` | `var(--aparte-font-size-md)` | **anchored** | | `--aparte-elic-option-desc-size` | `var(--aparte-font-size-sm)` | **anchored** | | `--aparte-elic-skip-size` | `var(--aparte-font-size-md)` | **anchored** | | `--aparte-elic-step-size` | `var(--aparte-font-size-sm)` | **anchored** | | `--aparte-elic-option-padding` | `var(--aparte-space-4) var(--aparte-space-5)` | **anchored** | | `--aparte-conv-item-padding` | `var(--aparte-space-4) var(--aparte-space-5)` | **anchored** | | `--aparte-conv-item-font-size` | `var(--aparte-font-size-md)` | **anchored** | ## THE focus ring [Section titled “THE focus ring”](#the-focus-ring) A 2px outline in this colour, one spacing step OUTSIDE the box, on every control. It used to be drawn two ways — this outline on seventeen recipes and a soft box-shadow wash (30 % of the accent, 1.39:1 against the page) on five — and the offset was −2px, inside the box, so on a bordered row the ring sat as a second concentric line and the next row painted over its edge. | Variable | Default | Notes | | ------------------------- | --------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `--aparte-border-control` | `color-mix(in srgb, var(--aparte-text) 30%, var(--aparte-surface-1))` | The edge of a CONTROL — a field, a choice box, the select’s trigger. `--aparte-border` separates two regions and is right to be faint; a thing someone can touch has to be seen, and six previews showed a control with no visible edge. Derived from the ink and the ground so both schemes follow; the mix is a first setting. — **anchored** | ## Component-specific radius (overridable per app) [Section titled “Component-specific radius (overridable per app)”](#component-specific-radius-overridable-per-app) | Variable | Default | Notes | | ------------------------------ | ------------------------- | ------------------------------- | | `--aparte-radius-input` | `var(--aparte-radius-lg)` | **anchored** | | `--aparte-radius-input-footer` | `var(--aparte-radius-lg)` | **palette only** — **anchored** | | `--aparte-radius-send-btn` | `var(--aparte-radius-md)` | **anchored** | | `--aparte-radius-action-btn` | `var(--aparte-radius-sm)` | **anchored** | | `--aparte-radius-select` | `var(--aparte-radius-md)` | **anchored** | | `--aparte-radius-bubble` | `var(--aparte-radius-lg)` | **anchored** | ## The bubble’s corner IS the bubble radius above [Section titled “The bubble’s corner IS the bubble radius above”](#the-bubbles-corner-is-the-bubble-radius-above) It was a 14px literal off the scale, the most visible corner of the transcript, and the knob named for it drove nothing. | Variable | Default | Notes | | --------------------------------- | ----------------------------- | ------------------------------- | | `--aparte-message-content-radius` | `var(--aparte-radius-bubble)` | **anchored** | | `--aparte-radius-code` | `var(--aparte-radius-lg)` | **anchored** | | `--aparte-radius-thinking` | `var(--aparte-radius-lg)` | **palette only** — **anchored** | | `--aparte-radius-error` | `var(--aparte-radius-md)` | **palette only** — **anchored** | ## The floating surfaces [Section titled “The floating surfaces”](#the-floating-surfaces) They read a step of the scale directly, so a theme that wanted square menus and round bubbles had to move the step — and every other reader of it. | Variable | Default | Notes | | ---------------------------- | ------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------- | | `--aparte-radius-menu` | `var(--aparte-radius-lg)` | **anchored** | | `--aparte-radius-popover` | `var(--aparte-radius-lg)` | **anchored** | | `--aparte-radius-dialog` | `var(--aparte-radius-xl)` | **anchored** | | `--aparte-radius-tooltip` | `var(--aparte-radius-sm)` | **anchored** | | `--aparte-avatar-error-ring` | `0 0 0 2px var(--aparte-error-solid)` | The error ring on an avatar. A full shadow value, like —aparte-scroll-btn-shadow: the whole ring is the knob, not its width. — **anchored** | ## Messages [Section titled “Messages”](#messages) | Variable | Default | Notes | | ----------------------------------------- | -------------------- | ------------ | | `--aparte-message-content-text-user` | `var(--aparte-text)` | **anchored** | | `--aparte-message-content-text-assistant` | `var(--aparte-text)` | **anchored** | ## The user’s bubble: a wash of the accent over the card surface [Section titled “The user’s bubble: a wash of the accent over the card surface”](#the-users-bubble-a-wash-of-the-accent-over-the-card-surface) It was a literal (`#efe7f6` light / `#2f2740` dark) — the one palette colour a consumer’s eight-line rebrand could not reach, so a chat moved to a blue brand kept a plum bubble. Mixed in sRGB rather than derived with `oklch(from …)`, because a wash has to keep the SURFACE’s lightness, not the accent’s; 12 % is where the default palette reads as a tint, not a fill, on both grounds. | Variable | Default | Notes | | ---------------------------------- | -------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `--aparte-message-content-bg-user` | `color-mix(in srgb, var(--aparte-primary) var(--aparte-mark-tint), var(--aparte-surface-1))` | The mark’s own tint: at 12 % the user bubble — the one mark that says “this turn is yours” — sat at 1.03:1 on the light page. — **anchored** | | `--aparte-surface-3` | `color-mix(in srgb, var(--aparte-text) 6%, var(--aparte-surface-2))` | The third surface: the second, pulled 6 % toward the text. Close to what the old literals encoded (`#e7dfce` from `#f1ebdf` light, `#342a40` from `#2a2333` dark — 5 to 9 % per channel, not one figure), now one rule that follows the masters. — **anchored** | ## Text on the text colour used as a fill (the tooltip, the avatar) [Section titled “Text on the text colour used as a fill (the tooltip, the avatar)”](#text-on-the-text-colour-used-as-a-fill-the-tooltip-the-avatar) The card surface is the lightest tone in light and the darkest-but-one in dark, which is what the two literals were. | Variable | Default | Notes | | ---------------------------- | ------------------------------------------------------------- | ------------------------------- | | `--aparte-text-inverse` | `var(--aparte-surface-1)` | **anchored** | | `--aparte-surface` | `var(--aparte-surface-1)` | **anchored** | | `--aparte-surface-hover` | `var(--aparte-surface-2)` | **anchored** | | `--aparte-text-secondary` | `var(--aparte-text-muted)` | **anchored** | | `--aparte-accent` | `var(--aparte-primary)` | **anchored** | | `--aparte-success-border` | `var(--aparte-success)` | **palette only** — **anchored** | | `--aparte-success-surface` | `color-mix(in oklch, var(--aparte-success) 12%, transparent)` | **anchored** | | `--aparte-error-border-soft` | `var(--aparte-error)` | **palette only** — **anchored** | | `--aparte-error-surface` | `color-mix(in oklch, var(--aparte-error) 12%, transparent)` | **anchored** | ## Action Bar [Section titled “Action Bar”](#action-bar) The small controls of a turn and of a conversation row are the recipe’s small step (24px, the WCAG 2.5.8 floor). The action bar used to feed 28 with a 24 exception for the last user turn, the branch arrows redrew 20 over their own `--sm`, the row’s `⋯` redrew 20: three control heights in one 14px row. | Variable | Default | Notes | | ------------------------------------- | --------------------------- | ------------ | | `--aparte-action-bar-btn-size` | `var(--aparte-btn-size-sm)` | **anchored** | | `--aparte-conv-action-btn-size` | `var(--aparte-btn-size-sm)` | **anchored** | | `--aparte-action-bar-btn-color` | `var(--aparte-text-muted)` | **anchored** | | `--aparte-action-bar-btn-hover-bg` | `var(--aparte-surface-2)` | **anchored** | | `--aparte-action-bar-btn-hover-color` | `var(--aparte-text)` | **anchored** | ## Branch Picker [Section titled “Branch Picker”](#branch-picker) | Variable | Default | Notes | | ---------------------------------------- | -------------------------- | ------------ | | `--aparte-branch-picker-btn-color` | `var(--aparte-text-muted)` | **anchored** | | `--aparte-branch-picker-btn-hover-color` | `var(--aparte-text)` | **anchored** | | `--aparte-branch-picker-label-color` | `var(--aparte-text-muted)` | **anchored** | ## Avatars [Section titled “Avatars”](#avatars) | Variable | Default | Notes | | -------------------------------- | ---------------------------- | ------------ | | `--aparte-avatar-bg-user` | `var(--aparte-primary)` | **anchored** | | `--aparte-avatar-text-user` | `var(--aparte-text-inverse)` | **anchored** | | `--aparte-avatar-bg-assistant` | `var(--aparte-surface-3)` | **anchored** | | `--aparte-avatar-text-assistant` | `var(--aparte-text)` | **anchored** | ## Text Sizes [Section titled “Text Sizes”](#text-sizes) | Variable | Default | Notes | | -------------------------- | -------------------------- | ------------ | | `--aparte-name-color` | `var(--aparte-text)` | **anchored** | | `--aparte-timestamp-color` | `var(--aparte-text-muted)` | **anchored** | | `--aparte-content-color` | `var(--aparte-text)` | **anchored** | ## Input [Section titled “Input”](#input) | Variable | Default | Notes | | ----------------------------- | ---------------------------- | ------------ | | `--aparte-input-bg` | `var(--aparte-surface-1)` | **anchored** | | `--aparte-input-border` | `var(--aparte-border)` | **anchored** | | `--aparte-input-placeholder` | `var(--aparte-text-muted)` | **anchored** | | `--aparte-input-focus-border` | `var(--aparte-border-focus)` | **anchored** | ## The block’s own type [Section titled “The block’s own type”](#the-blocks-own-type) It used to inherit the prose’s size and leading (16px on 1.7) under the browser’s generic monospace — the largest, airiest text in the message. | Variable | Default | Notes | | --------------------------------- | ---------------------------------- | ------------ | | `--aparte-code-block-font-size` | `var(--aparte-font-size-md)` | **anchored** | | `--aparte-code-block-line-height` | `var(--aparte-line-height-normal)` | **anchored** | ## Content [Section titled “Content”](#content) | Variable | Default | Notes | | ------------------------------ | --------------------------------- | ------------------------------- | | `--aparte-content-line-height` | `var(--aparte-line-height-loose)` | **anchored** | | `--aparte-cursor-color` | `var(--aparte-primary)` | **palette only** — **anchored** | ## Conversation List [Section titled “Conversation List”](#conversation-list) | Variable | Default | Notes | | --------------------------------------- | ---------------------------------- | ------------ | | `--aparte-conv-item-radius` | `var(--aparte-radius-md)` | **anchored** | | `--aparte-conv-item-color` | `var(--aparte-text)` | **anchored** | | `--aparte-conv-item-color-active` | `var(--aparte-text)` | **anchored** | | `--aparte-conv-item-bg-hover` | `var(--aparte-surface-3)` | **anchored** | | `--aparte-conv-item-bg-active` | `var(--aparte-surface-3)` | **anchored** | | `--aparte-conv-item-font-weight-active` | `var(--aparte-font-weight-medium)` | **anchored** | ## Component tokens [Section titled “Component tokens”](#component-tokens) Read by a component with a built-in default rather than declared in `:root`. Custom properties inherit, so you set them exactly like the others — on `:root`, on a theme class, or on one `<aparte-chat>` to scope them to that chat. The default is what applies when you do not. | Variable | Default | Read by | | -------------------------------------- | -------------------------------------------------------------------------------- | ---------------------------------------------------------------- | | `--aparte-alert-intent` | — | styles/display/alert.css | | `--aparte-approval-args-max-height` | `8.5rem` | styles/components/elicitation.css | | `--aparte-approval-args-size` | `var(--aparte-font-size-sm)` | styles/components/elicitation.css | | `--aparte-approval-gap` | `4px` | styles/components/elicitation.css | | `--aparte-approval-option-padding` | `8px 10px` | styles/components/elicitation.css | | `--aparte-approval-option-radius` | `8px` | styles/components/elicitation.css | | `--aparte-approval-option-size` | `0.85rem` | styles/components/elicitation.css | | `--aparte-badge-intent` | — | styles/display/badge.css | | `--aparte-badge-intent-ink` | — | styles/display/badge.css | | `--aparte-badge-on-intent` | — | styles/display/badge.css | | `--aparte-btn-intent` | — | styles/button.css | | `--aparte-btn-intent-ink` | — | styles/button.css | | `--aparte-btn-on-intent` | — | styles/button.css | | `--aparte-checkbox-intent` | — | styles/field.css | | `--aparte-checkbox-on-intent` | — | styles/field.css | | `--aparte-composer-row-control-size` | `var(--aparte-input-action-btn-size)` | styles/components/bubble.css, styles/components/composer.css | | `--aparte-derived-ink` | — | styles/button.css, styles/display/badge.css, styles/field.css | | `--aparte-dialog-width` | — | styles/surface/dialog.css | | `--aparte-elic-input-size` | `0.85rem` | styles/components/elicitation.css | | `--aparte-elic-ring-room` | — | styles/components/elicitation.css | | `--aparte-mark-intent` | — | styles/display/mark.css | | `--aparte-mark-intent-ink` | — | styles/display/mark.css | | `--aparte-menu-max-width` | — | styles/surface/menu.css | | `--aparte-menu-min-width` | — | styles/surface/menu.css | | `--aparte-on-error` | `var(--aparte-derived-ink)` | styles/button.css, styles/display/badge.css, styles/field.css | | `--aparte-on-info` | `var(--aparte-derived-ink)` | styles/button.css, styles/display/badge.css, styles/field.css | | `--aparte-on-neutral` | `var(--aparte-derived-ink)` | styles/button.css, styles/display/badge.css, styles/field.css | | `--aparte-on-primary` | `var(--aparte-derived-ink)` | styles/button.css, styles/display/badge.css, styles/field.css | | `--aparte-on-secondary` | `var(--aparte-derived-ink)` | styles/button.css, styles/display/badge.css, styles/field.css | | `--aparte-on-success` | `var(--aparte-derived-ink)` | styles/button.css, styles/display/badge.css, styles/field.css | | `--aparte-on-warning` | `var(--aparte-derived-ink)` | styles/button.css, styles/display/badge.css, styles/field.css | | `--aparte-popover-max-width` | — | styles/surface/popover.css | | `--aparte-radio-intent` | — | styles/field.css | | `--aparte-range-intent` | — | styles/field.css | | `--aparte-scroll-rail-bar` | `0px` | styles/components/scroll-rail.css | | `--aparte-scroll-rail-block-end` | `0px` | styles/components/scroll-rail.css | | `--aparte-scroll-rail-block-start` | `0px` | styles/components/scroll-rail.css | | `--aparte-select-bg` | `<default>` | interop/element-props.ts, styles/primitives/select.css | | `--aparte-select-border` | `var(--aparte-border-control)` | styles/primitives/select.css | | `--aparte-select-border-hover` | `var(--aparte-border-control)` | styles/primitives/select.css | | `--aparte-select-chevron` | `var(--aparte-text-muted)` | styles/primitives/select.css | | `--aparte-select-dropdown-bg` | `var(--aparte-surface-1)` | styles/primitives/select.css | | `--aparte-select-option-hover` | `var(--aparte-surface-2)` | styles/primitives/select.css | | `--aparte-select-option-selected` | `color-mix(in srgb, var(--aparte-primary) var(--aparte-mark-tint), transparent)` | styles/primitives/select.css | | `--aparte-select-option-selected-text` | `var(--aparte-select-text, var(--aparte-text))` | styles/primitives/select.css | | `--aparte-select-text` | `var(--aparte-text)` | primitives/select/aparte-option.ts, styles/primitives/select.css | | `--aparte-select-z` | `var(--aparte-z-dropdown)` | styles/primitives/select.css | | `--aparte-send-disabled-bg` | `var(--aparte-surface-2)` | styles/components/composer.css | | `--aparte-spinner-color` | `currentColor` | styles/primitives/progress-spinner.css | | `--aparte-spinner-track` | `var(--aparte-border-control)` | styles/primitives/progress-spinner.css | | `--aparte-switch-intent` | — | styles/field.css | | `--aparte-switch-thumb-size` | — | styles/field.css | | `--aparte-switch-track` | — | styles/field.css | | `--aparte-tooltip-max-width` | — | styles/surface/tooltip.css |