Blaupause

blueprint ist eine technische Zeichnung: Haarlinien auf einem fast schwarzen Blatt, scharfe Ecken und eine Passermarke – ein kleines Kreuz – an jeder Ecke einer Karte, eines Dialogs und einer Reihe von Kennzahlen. Alles, was etwas benennt oder bedient – ein Button, die Beschriftung eines Felds, ein Tab, ein Tag, ein Spaltenkopf, ein Link in der Leiste –, steht in einer Monospace-Schrift, in gesperrten Versalien, während Überschriften und Fließtext in einer Grotesk bleiben, eng gesetzt. Eine durchgezogene Linie ist eine Kante, eine gestrichelte teilt, was darin liegt, so wie eine Zeichnung eine verdeckte Kante markiert: die Zeilen einer Tabelle, ein Trenner, die Strecke zu einem Schritt, der noch kommt. Es bleibt bei wenigen Farben. Der Solid-Button, ein angehaktes Kästchen, ein gefüllter Balken und alles Ausgewählte sind Tinte, invertiert gedruckt; ein einziges Blaupausenblau markiert den Fokus und das Tag über einer Überschrift; Erfolg, Warnung und Gefahr behalten ihre Farben für das, was sie sagen. Nichts wirft einen Schatten. Der Dunkelmodus ist der ursprüngliche Look; der Hellmodus behält jede Linie und jede Marke und druckt sie in Tinte auf weißes Papier.

Verwendung

import { iconSet, styles } from 'sitelo/ui'

iconSet('square')

head(
  title('Meine Website'),
  styles({ preset: 'blueprint' }),
)
// <link rel="stylesheet" href="/su/ui-c9428b65.css">
// <link rel="stylesheet" href="/su/blueprint-4d1f8a20.css">

iconSet('square') zeichnet die Icons passend dazu – gerade Haarlinien mit eckigen Enden und scharfen Ecken, wie in der Vorschau oben –, auch die, die Komponenten selbst zeichnen. Ruf es einmal auf, aus einem Modul, das deine Seiten importieren.

Gib der Seite var(--su-bp-backdrop) als Hintergrund, dann liegt sie auf dem Grund des Presets mit einem zarten Raster darüber – oder einfach var(--su-bg). Das Preset nutzt Geist oder Inter und Geist Mono, JetBrains Mono oder IBM Plex Mono, wenn die Seite sie lädt, sonst die Schriften des Systems; es lädt nichts herunter.

body {
  background: var(--su-bp-backdrop);
  color: var(--su-text);
  font-family: var(--su-font-sans);
}

Eigene Farben

theme() funktioniert weiterhin obendrauf, ein Preset ist also ein Ausgangspunkt und kein Fork. Die Primärpalette ist die Tinte – der Solid-Button, ein angehaktes Kästchen, ein gefüllter Balken, alles Ausgewählte –, also färbt primary alles auf einmal um. Die übrigen Tokens gehören dem Preset selbst: --su-bp-accent, das Blau, das den Fokus zeichnet und eine Überschrift markiert; --su-bp-mark, die Passermarken, die transparent verschwinden lässt; --su-bp-field, die Linie um ein Feld; --su-bp-track, die Bahn, in der ein Fortschrittsbalken läuft; --su-bp-grid und --su-bp-cell, die Linien des Hintergrunds und die Größe seiner Kästchen; und --su-bp-tracking, wie weit die Versalien einer Beschriftung gesperrt sind. Hier wird das Blau zu Signalorange, und die Marken mit ihm.

head(
  styles({ preset: 'blueprint' }),
  theme(
    { bpAccent: '#c2410c', bpMark: '#c2410c' },
    { dark: { bpAccent: '#ff7a3d', bpMark: '#ff7a3d' } },
  ),
)