Application

Application primitives

Components

The few shapes an application window is made of, as opposed to a document: a floating pane, a list of rows, a row, a hairline between groups. They were born in the macOS theme (Reveal’s sidebar) and lived there, so an app on any other theme got them by accident, through the global theme bundle. They belong to the framework: every value below is an existing token (styles README, roles §4, “Sidebar that floats” = .pane).

<nav class="pane">
  <ul class="list">
    <li><a class="item" href="/stations" aria-current="page">Stations</a></li>
    <li><a class="item" href="/carte">Carte</a></li>
  </ul>
  <hr class="divider" />
</nav>

Live

All classes

Studio ↗

Other

Studio ↗

Class	Declares
`.pane`	`margin: var(--window-inset)`
`.list`	`display: flex`
`.list.divided > :not(:last-child)`	`border-bottom: var(--border)`
`.item`	`display: flex`
`.divider`	`flex-shrink: 0`