Design-Tokens¶

Alle Gestaltungswerte stehen in der theme.json des Themes. Sie ist die einzige Quelle — WordPress erzeugt daraus CSS-Variablen, die im Editor und im Frontend identisch verfügbar sind.

Das Namensschema:

--wp--preset--color--primary
--wp--preset--spacing--lg
--wp--preset--font-size--base

Der Parent liefert absichtlich eine neutrale Palette und einen System-Schriftstack. Markenfarben und Webfonts gehören ins Child-Theme — wie das geht und welche Falle dabei lauert, steht unter Child-Theme.

Farben¶

Slug	Name	Wert
`primary`	Primary	`#2f6fed`
`primary-200`	Primary 200	`#e6eefd`
`secondary`	Secondary	`#1a1d21`
`dark`	Dark	`#1a1d21`
`grey`	Grey	`#4a5058`
`light`	Light	`#eef1f5`
`light-600`	Light 600	`#7d8794`
`white`	White	`#ffffff`
`danger`	Danger	`#d64545`

Die Standardpalette von WordPress ist abgeschaltet, eigene Farben im Editor sind erlaubt.

Diese neun Slugs sind der stabile Teil des Vertrags: Ein Child darf ihre Werte ändern, sollte aber keinen Slug entfernen. Blöcke und Stylesheets verweisen darauf.

Abstände¶

Slug	Name	Wert
`xs`	XS	`0.25rem`
`sm`	SM	`0.5rem`
`md`	MD	`1rem`
`lg`	LG	`2rem`
`xl`	XL	`3.5rem`
`2xl`	2XL	`6rem`
`section`	Section	`10rem`

Die Standardabstände von WordPress sind abgeschaltet. Erlaubte Einheiten sind px, rem, %, vw und vh.

Schriftgrößen¶

Feste Größen:

Slug	Name	Wert
`sm`	Small	`0.8rem`
`base`	Base	`1rem`
`lg`	Large	`1.3rem`
`xl`	XL	`1.85rem`
`tw-lead`	Lead	`clamp(1rem, 1rem + ((1vw - 0.2rem) * 0.375), 1.3rem)`

Mitwachsende Größen für Überschriften. Der angegebene Wert ist der Ausgangswert, min und max die Grenzen:

Slug	Name	Wert	min	max
`heading-fluid-h-1`	Heading Fluid H1	`3.35rem`	`2.1rem`	`4.2rem`
`heading-fluid-h-2`	Heading Fluid H2	`2.5rem`	`1.7rem`	`3.15rem`
`heading-fluid-h-3`	Heading Fluid H3	`1.35rem`	`1.08rem`	`1.7rem`
`heading-fluid-h-4`	Heading Fluid H4	`1.15rem`	`0.9rem`	`1.48rem`
`heading-fluid-h-5`	Heading Fluid H5	`1.25rem`	`1rem`	`1.5rem`
`heading-fluid-h-6`	Heading Fluid H6	`1rem`	`0.85rem`	`1.18rem`
`sidebar-heading`	Sidebar Heading	`1rem`	`0.85rem`	`1.18rem`

Schriftarten¶

Slug	Name	Stack
`base`	Base	`system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif`

Ein einziger Systemschriftstack, ohne externe Schriftdateien. Ein Projekt, das eine eigene Schrift braucht, ergänzt sie im Child-Theme.

Schriftgewichte¶

Slug	Name	Wert
`light`	Light	`300`
`normal`	Normal	`400`
`semibold`	Semibold	`600`
`bold`	Bold	`700`

Freie Zahlenwerte sind bewusst nicht erlaubt — es soll bei diesen vier bleiben.

Layout¶

Einstellung	Wert
Inhaltsbreite	`min(100%, calc(var(--wp--style--global--wide-size) * 0.79))`
Breite Ausrichtung	`min(96rem, calc(100vw - 1.25rem))`
Randabstände in der Ausrichtung berücksichtigen	ja
Gestaltungswerkzeuge im Editor	ja

Die Inhaltsbreite ist von der breiten Ausrichtung abgeleitet, nicht fest gesetzt. Ändert ein Child die breite Ausrichtung, wandert die Inhaltsbreite automatisch mit.

Seitenverhältnisse¶

Slug	Name	Verhältnis
`card-preview`	Card preview - 16:10	`16/10`

Die Standardverhältnisse von WordPress bleiben zusätzlich verfügbar.

Typografie-Werkzeuge¶

Im Editor freigegeben sind Schriftgröße, Schriftart, Schriftgewicht, Schriftstil, Zeilenhöhe, Laufweite, Groß- und Kleinschreibung sowie Textdekoration. Mitwachsende Schriftgrößen sind global aktiv.

Drei Blöcke haben eigene Typografie-Einstellungen: twtheme/icon, twtheme/post-type-label und twtheme/meta.

Blockstile in der theme.json¶

Diese Blöcke bekommen ihre Grundgestaltung direkt aus der theme.json:

Block	Was gesetzt wird
`core/columns`	Abstand zwischen Spalten: `50px`
`core/paragraph`	Variationen `tw-display`, `tw-lead`, `tw-text-small`
`core/heading`	Variationen `tw-display`, `tw-lead`, `tw-text-small`
`core/query-pagination`	Außenabstand oben, Typografie, Linkgestaltung
`twtheme/icon`	Typografie-Standardwerte
`twtheme/post-type-label`	die drei Textvariationen
`twtheme/query-load-more`	Schaltflächengestaltung
`twtheme/query-archive-link`	Link- und Schaltflächengestaltung

Global gestaltet werden außerdem Überschriften h1 bis h6, Links und Schaltflächen.

Blockstil-Variationen als eigene Datei¶

Datei	Slug	Beschriftung	Für
`styles/blocks/tw-text.json`	`tw-text`	Text	`core/button`

Der Stil macht aus einem Button einen unterstrichenen Textlink: transparenter Hintergrund, Schriftgewicht 600, kein Eckenradius.

Kein settings.custom¶

Die theme.json enthält keinen settings.custom-Bereich. Es entstehen daher keine --wp--custom--*-Variablen. Eigene Variablen des Themes tragen das Präfix --tw- und kommen aus dem Stylesheet, nicht aus der theme.json — siehe CSS-Architektur.