Skin

Skin

Wie Dinge gezeichnet werden, nachdem Farbe und Dichte festgelegt sind: die Ecken, die Tiefe, die Linien. Diese Tokens sind die `Skin`-Achse des Themas — die Standard-Skin ist das, was diese Seite zeigt, und eine andere Skin ist eine andere Datei, die dieselben Namen festlegt, ohne dass darunter etwas geändert werden muss.

Eckenradien

Kein Radius, dann vier Schritte, jeweils doppelt so groß wie der darunter, dann eine Pille. Zwei Schritte Abstand sind immer die gleiche Distanz, egal wo man auf der Skala steht, was sie lesbar macht. Der erste Schritt ist absichtlich kaum wahrnehmbar: er ist das, was eine flache Skin will, wenn ein echter rechter Winkel unvollendet wirkt. Alles, was runder ist als der letzte Schritt, ist eine Form, die ein Kreis sein möchte und das selbst sagt — ein Kreis ist keine Entscheidung der Skin.
--radius-0
--radius-1
--radius-2
--radius-3
--radius-4
--radius-pill

Rollen der Eckenradien

Eine Form liest nie die Skala oben: sie liest die Rolle, die sie spielt, und die Skin sagt, welcher Schritt dieser Rolle zugeteilt wird — niemals, was ein Schritt wert ist, was die Skala zwei Bedeutungen auf einmal geben würde. Was etwas hält, ist eine Box, egal ob sie Text, Inhalt oder eine Nachricht hält; was zwei Bereiche einer Seite trennt, ist weder das eine noch das andere und rundet nichts. Wechsle die Skin zu `soft` und beobachte, wie ein Steuerelement sich vom Rest trennt: eine Kapsel ist passend für etwas, das eine Zeile hoch ist, und absurd für ein Textfeld.
--radius-control
eine Zeile hoch, und gedrückt
--radius-box
hält etwas
--radius-media
Bilder und Figuren
--radius-pill
was als Kapsel gelesen wird

Schatten

Vier Tiefen, von einem feinen Lift bis zu einem schwebenden Panel. Eine Skin, die eine flache Welt will, setzt alle vier auf null, und jede erhöhte Fläche folgt.
--shadow-1
--shadow-2
--shadow-3
--shadow-4

Ränder

Die Linie selbst — ihre Breite und ihr Stil. Ihre Farbe ist hier nicht enthalten: die gehört zum Farbschema, das es einer Skin ermöglicht, eine Linie zu entfernen, ohne zu wissen, welche Farbe sie gehabt hätte.
--border-discreet
--border-default
--border-focus
--border-placeholder

Trennlinien und Regionen

Die zwei Linien, die Dinge voneinander unterscheiden: zwischen zwei Reihen einer Sache und zwischen zwei Regionen einer Seite. Zwanzig Formen lesen die erste, weshalb sie ein Token und keine Regel ist.
--border-separator — eine Reihe unter anderen
eine Reihe unter anderen
eine Reihe unter anderen
--border-region — eine Region der Seite, entsprechend begrenzt