Color Scale
Token-backed OKLab ramps with a fixed seed. Sequential scales stay monotonic in lightness; pairs that collapse lightness are marked unsafe for choropleths.
One component source, shown everywhere.
Every component below is rendered from its dedicated HTML file. Edit place-card.html and the Place Card preview here changes too; edit a token in global.css and both standalone components and this documentation shell update together.
Single source of truth
The index does not copy component markup. Each preview is the corresponding standalone HTML file in embed mode, while shared visual rules remain in global.css.
Documentation page anatomy
The reference template keeps stable deep links on desktop and mobile. Nested navigation can be collapsed without removing the section link itself.
Desktop: sticky left navigation stays visible while the main document scrolls.
Mobile: the same navigation becomes an off-canvas drawer.
Nested sections: the section label jumps to content while the adjacent chevron only expands or collapses its children.
Live references: component examples come from the same HTML files you edit directly.
Foundations
Design tokens
Tokens are shared by the documentation shell and every standalone component. The section can collapse without changing its #tokens deep link.
Spacing scale
The original 12px+ scale remains intact. The audit adds only 2px, 4px, and 8px utility steps for compact controls and panel chrome.
--space-01252px
--space-0254px
--space-058px
--space-112px
--space-224px
--space-330px
--space-439px
--space-563px
--space-696px
Color
Semantic tokens are theme-aware. Toggle the theme in the top bar and the embedded components receive the same theme state. --accent stays blue for links, selection, and focus. Primary buttons use --btn-primary.
--bgBackground
--surfaceSurface
--textText
--accentAccent
--btn-primaryPrimary button
--on-btn-primaryOn primary
Type
Type tokens are fixed sizes. Component labels, titles, controls, and this page use the same steps.
| Token | Use | Sample |
|---|---|---|
--text-xs | Metadata and compact labels | Reference label |
--text-sm | Controls and supporting copy | Supporting copy |
--text-base | Body and form content | Body content |
--text-lg | Component headings | Component heading |
--text-xl | Page and panel titles | Page title |
--text-2xl | Documentation title | Documentation title |
Radius
The token values remain aligned with the original system. The audit makes --radius-sm (6px) the default component radius; 12px is reserved for deliberately larger surfaces.
| Token | Value | Use |
|---|---|---|
--radius-sm | 6px | Panels, inputs, buttons, tiles, menus, previews |
--radius | 12px | Large surfaces such as modal dialogs |
--radius-full | 9999px | Pills, chips, switches, circular controls |
Control sizing
Editor panels size hex, opacity, and weight with .combo at --control-height-sm. The .input--* utilities are for a lone field, not a substitute for that combo.
| Token / utility | Value | Use |
|---|---|---|
--control-height-xs / --icon-btn-size | 28px | .icon-btn and default .btn--icon. .input--xs is the lone-field height. |
--control-height-sm / .input--sm | 32px | .combo segments. .btn--icon.btn--md uses this height. |
--control-height-md | 36px | Default text and select. .btn--icon.btn--lg uses this height. |
--control-width-hex / .input--hex | 88px | .combo__hex. Do not use .input--hex alone inside a panel. |
--control-width-compact / .input--compact | 56px | .combo__opacity and .combo__width. |
Components
Map editor
Every component is shown here from its standalone HTML file. Shared chrome is in global.css. The nested navigation links directly to each preview, and the filename beside each preview opens that same source as a standalone page.
Edit the source file, not this index. For example, change place-card.html and reload this page; the Place Card preview below is that exact file.
color-scale.html
Color + Icon Library
Static picker anatomy, a swatch grid, an .input-group search, icon tiles, and combos whose swatch matches the hex.
Place Card
Icon trigger, name, description, and shared panel anatomy.
Map Layers
Drag a row handle to reorder. Fill and border combos, pattern tiles, and visibility. Places and Design use the shared tabs.
Button
Primary, secondary, ghost, danger, link, icon, disabled, and size variants.
Form Inputs
Text, select, textarea, checkbox, radio, switch, help, and error states.
Modal / Dialog
Confirm and form dialog examples built on the shared panel shell.
Tabs
Underline and pill tab treatments with interactive states.
Toast / Alert
Inline banners and transient floating feedback.
Badge / Chip
Statuses, counts, filter chips, swatches, and removable values.
Tooltip
Hover and focus helper text for compact actions.
Dropdown / Menu
Sort and overflow action menus using the shared popover panel.
Single-source component pattern
Keep each component editable as a normal HTML file. The index references it instead of duplicating its markup.
<!-- place-card.html: edit this file directly -->
<link rel="stylesheet" href="global.css">
...
<script src="component-embed.js"></script>
<!-- index.html: render that same source file -->
<iframe
class="component-preview"
src="place-card.html?embed=1"
title="Place Card live component reference">
</iframe>component-embed.js only changes presentation when the file is embedded: it hides demo-page chrome, reports its content height to the index, and receives the documentation theme. It does not contain component markup.
Responsive behavior
The information architecture remains the same across breakpoints, including every component anchor.
- Desktop keeps the navigation sticky and independently scrollable.
- Below 860px, navigation becomes an off-canvas drawer with overlay and Escape-key support.
- Nested navigation trees can collapse independently from the content sections they link to.
- Design Tokens and Map editor can also collapse in the document; following a deep link reopens the relevant section automatically.
- Component iframes resize to their own content to avoid nested scrolling.