ds
Components
Island toolbar

Island toolbar

Floating editor chrome from topo.

topo

100%

topo's editor chrome: four islands over the canvas

Islands float over a full-screen canvas. They are the only surfaces in the system with a shadow, because they sit on top of work. Buttons inside an island are ghost buttons; the one accent button is the main action. The small letter in a tool's corner is its shortcut.

<div class="island bar">
  <button class="btn icon tool on" aria-label="Select">…<kbd>V</kbd></button>
  <button class="btn icon tool" aria-label="Pan">…<kbd>H</kbd></button>
  <span class="sep"></span>
  <button class="btn icon" aria-label="Library">…</button>
</div>

Class	On	What it does
`.island`	div	Floating surface with --shadow. Buttons inside become ghost.
`.bar`	.island	The main toolbar: taller buttons, bigger icons.
`.sep`	span	Vertical divider.
`.tool + kbd`	.btn	Tool button with its shortcut in the corner.
`.brand`	span	Product name in an island.

Position islands yourself (position: absolute in the stage). In topo the chrome also scales with a --ui zoom factor so it follows the reader's text size while the canvas does not.