Solel//dev docs

Icons and tokens

Every colour, size, radius, shadow, duration and easing in Daybreak is a token. Use the token, never the raw value, and your app follows light and Flare, reduced motion and reduced transparency by itself.

Tokens

The tokens live in brand/tokens/ in the repository:

File What it's for
tokens.css CSS variables. Load it after brand/fonts/fonts.css and before your own styles
tokens.json The same tokens in the W3C design tokens format, for Tokens Studio and similar tools
daybreak.tailwind.cjs A Tailwind preset. It still needs tokens.css loaded for roles and shadows 
// tailwind.config.js
module.exports = { presets: [require('./daybreak.tailwind.cjs')] };

The kinds you'll use most:

  • Roles such as --bg, --bg-raised, --text, --text-2, --text-accent, --border and --accent. Build with these, not the --color-* palette.
  • Type as --type-* shorthands for font:, like font: var(--type-body), with helper classes such as .type-h1.
  • Space from --space-1 (4 px) to --space-7 (48 px), and radii such as --radius-button and --radius-card.
  • Motion as --duration-fast, --duration-base and the rest, with --ease-out, --ease-in-out and --ease-sun.

Light and Flare

Light is the default. Flare, the dark mode, follows the device's setting, or data-theme="dark" on <html>. solel.ready() sets data-theme for you from the person's choice, and keeps it in step.

Reduced motion and transparency

  • --motion is 1, and 0 when the device asks for reduced motion. Scale and move by calc(… * var(--motion)), and fades stay.
  • Glass turns solid when the device asks for reduced transparency.

UI icons

Icon draws Daybreak's UI icons on the 24 grid, in the text colour:

<Icon name="folder" />
<Icon name="trash" size="sm" label="Delete" />
  • name is one of iconNames, such as folder, mail, search or settings.
  • size is sm (16 px), md (20 px, the default) or lg (24 px).
  • label names it for screen readers. Leave it out when a visible label sits next to it, and give icon-only buttons an aria-label.

App icons

AppIcon puts a glyph or a picture in Daybreak's squircle, the way the desktop shows apps:

<AppIcon icon="folder" tone="neutral" size={30} />
<AppIcon src="icon.svg" size={48} label="Notes" />

tone is flare (the default), neutral, sun, ink or twilight, and size is in pixels. tile draws one of Solel's own tiles, for its built-in apps and Settings pages. Your app's own icon is the one in its manifest, and the desktop gives it the same shape.

Brand marks

Mark places one of Solel's marks, such as split-sun, frame or blocks, from the sprite in brand/logos/solel-marks.svg. Serve it at /solel-marks.svg, or pass its address as sprite. Never draw or change a mark.