Sie befinden sich hier: start » de » Interne Dokumentation » DokuWiki-Erweiterungen (WvdS) » Styles-Contract (--wk-*)

Styles-Contract (--wk-*)

Version: 17 (2026-07-18) · Normative Quellen: lib/tpl/wkbizway/css/tokens.css (die Vorlage flat, bis Version 17 als zweite Quelle genannt, ist in diesem Baum nicht installiert — lib/tpl/ führt dokuwiki und wkbizway; ihre Werte sind hier nicht nachprüfbar)

Der Styles-Contract ist die verbindliche CSS-Schnittstelle zwischen Templates und Plugins: ein fester Satz CSS Custom Properties (–wk-*). Seit dem 10.08.2026 besitzt das Design-System-Plugin wkfluentui diese Palette, und eine Vorlage steuert einen Rückfall bei — vorher definierte jede Vorlage den Satz vollständig selbst. Plugins und Snippets konsumieren ausschließlich diese Tokens — dadurch sieht die gesamte Site unter jedem Template „aus einem Haus„ aus, ohne dass Plugin-CSS angepasst werden muss.

Für Plugin-Entwickler (Schnelleinstieg)

Grundregel: Farbe, Schriftart, Fokus-Ring-Optik und Inhaltsbreite kommen nie als eigener Hex-/Pixel-/Font-Wert in Plugin-CSS — immer als var(–wk-…, Fallback-Wert). Layout, Innen-/Außenabstände, eigene Klassennamen, Icons, Komponentenstruktur und JavaScript-Verhalten sind vollständig frei; der Contract schränkt hier nichts ein.

Entscheidungsregel — Token oder frei wählbar?

  • Pflicht-Token aus der Tabelle unten: jede Farbe, die Schriftfamilie/-stack, die Fokus-Ring-Optik, die Inhaltsbreite.
  • Vollständig frei: Layout (Flexbox/Grid), Abstände, eigene Klassennamen, Icons, Komponentenaufbau, JavaScript-Verhalten.
  • Nicht selbst erfinden: Braucht ein Plugin eine Farbe/Schrift ohne passende Token-Semantik, wird sie hier als neuer Pflicht- oder Extension-Token vorgeschlagen (siehe „Regeln“ unten) statt als Ad-hoc-Wert eingeführt — sonst bricht sie beim nächsten Farbschema-Wechsel unbemerkt die Konsistenz.

Folge bei Ignorieren der Grundregel: kein Fehler, kein Absturz — das Plugin verliert nur die Teilnahme am Farbschema-Wechsel (riviera/night/white, s. u.). Ein hartcodiertes Blau bleibt blau, auch wenn der Nutzer das Schema wechselt; token-basiertes CSS wechselt automatisch mit.

/* Wrong - hardcoded colors, ignores the active color scheme and any
   foreign template without this contract */
.my-plugin-button {
    background: #1d86b6;
    color: #ffffff;
    border: 1px solid #148fb9;
}
 
/* Right - token with a sensible fallback for templates without the contract */
.my-plugin-button {
    background: var(--wk-btn-primary, #1d86b6);
    color: var(--wk-btn-text, #ffffff);
    border: 1px solid var(--wk-accent, #148fb9);
}

Der Fallback-Wert (zweites var()-Argument) ist Pflicht, nicht optional: läuft das Plugin unter einem fremden Template ohne diesen Contract, existiert der Token nicht — ohne Fallback bleibt die Eigenschaft leer. Der Fallback muss für sich allein eine akzeptable Optik ergeben.

Tatsächliche Werte stehen ausschließlich in tokens.css bzw. color-palette.css des aktiven Templates — nie aus einem Screenshot ablesen oder raten, Werte unterscheiden sich pro Farbschema (siehe „Farbschemata„ unten).

Wegweiser: wo finde ich was

Diese Seite regelt Tokens und CSS-Konventionen. Alles Übrige — Layout-Muster, Widgets, Verhalten — steht in der Design-System-Bibliothek WvdS FluentUI. Für Entwickler ohne WvdS-Vorwissen in Lesereihenfolge:

Ich will … Seite
von Null ein Admin-Modul im Fluent-Stil bauen (Schritt-für-Schritt) Tutorial: Erste Admin-Oberfläche mit FluentUI bauen
Helper-/Widget-APIs nachschlagen (tree/tabs/drawer/modal/toolbar/propertyGrid/rowActions …) FluentUI: Öffentliche Helper-API
die Admin-UX-Regeln kennen (Aktivitätsleiste, Drawer, Inline-Dialog, Farbsemantik) FluentUI: Admin-Bereich (vertieft)
eine ADS-artige Mehr-Regionen-Shell bauen (Sidebar/Content/Auxbar/Statusbar) FluentUI: Basic Layout (vertieft)
eine panel-füllende, resize-feste Datentabelle bauen FluentUI: Desktop-DataGrid — Demo-Übersicht
ein Objekt als Formular oder Eigenschaften-Liste zeigen (Property/Vertical Grid) FluentUI: Vertical Grid (Property Grid) — Demo-Übersicht
Code anzeigen oder editieren (GeSHi/CodeMirror/EasyMDE) FluentUI: Editoren und Code-Darstellung
die Doku-Shell (Wiki-Bereich) verstehen oder erweitern FluentUI: Wiki Layout (Doku-Shell, vertieft)
Größen-/Radius-/Spacing-/Typo-Skalen nachschlagen FluentUI: Design-Tokens

Wiederverwendbare Komponenten-Klassen (.wk-*)

Site-weit geladene CSS-Bausteine (wkfluentui/css/widgets.css über das CSS_STYLES_INCLUDED-Event) — vor jedem eigenen Bau prüfen, ob eine Klasse schon existiert; Erzeugung bevorzugt über die zugehörige Helper-Methode (api):

Klasse(n) Baustein Erzeugung
.wk-toolbar / __group Command-Bar mit Tastatur-Roving-Tabindex toolbar()
.wk-tabs Registerkarten-Leiste tabs()
.wk-scrim + Drawer-Panel rechtsseitiges Slide-in-Detailpanel drawer()
.wk-modal–normal (+ –workbench, Doku-first) zentrierter Dialog 640px bzw. 1024×768 resizable modal()
.wk-row-actions verstecktes Kontextmenü einer Zeile rowActions() + js/contextmenu.js
.wk-shell-sidebar / -content / -auxbar / -statusbar (+ -commandbar, -banner: Doku-first/Tier 2) Regionen-Primitives für Admin-Shells plugin-lokales Grid, siehe layout und admin-layout
.wk-datagrid (Doku-first) panel-füllende Datentabelle dataGrid(), siehe datagrid
.wk-property-grid / __row / __label / __control zweispaltiges Label/Control-Raster (Property/Vertical Grid) propertyGrid(), siehe property-grid
.wk-btn / –accent / –danger 3-Farben-Aktions-Button (Contract v3, seit Contract v17 mit –wk-control-height) direktes Markup, keine Helper-Methode
.wk-field–file (seit Contract v17) Datei-Upload-Feld-Chrome (nativer „Datei wählen“-Button bleibt unstylbar, umliegender Rahmen/Radius/Background wird gestylt) direktes Markup (Klasse auf <input type="file">); deckt per Selektor auch die zwei Core-Fundstellen ab, die keine eigene Klasse tragen können (UserManager-CSV-Import, Extension-Manager-Upload)

CSS-Compiler-Fallen (sitewide fatal)

DokuWikis lessphp-basierter Compiler (lib/exe/css.php) bricht bei zwei Mustern komplett ab — die gesamte Site verliert ihr Styling, nicht nur die eigene Regel (Browser mit altem tseed-Cache kaschieren den Ausfall zunächst):

  1. */ im Kommentartext — z. B. in Token-Aufzählungen wie a-/b-: das */ beendet den Blockkommentar vorzeitig, der Rest wird als CSS-Müll geparst. Formulierung ohne Schrägstrich wählen (a-* or b-*).
  2. min()/calc() mit gemischten Einheiten — z. B. calc(100% - 2px) in bestimmten Kontexten bzw. min(100%, 40em): einheitengleiche Werte oder minmax()-Grid-Tracks verwenden.

Verifikation nach jeder CSS-Änderung: curl http://localhost:8880/lib/exe/css.php — mehrere hundert KB = ok; wenige hundert Bytes mit roter Fehlermeldung = Compile-Abbruch. Danach conf/local.php touchen (tseed-Rotation, siehe Verifikation).

In 5 Schritten zum contract-konformen Plugin-CSS

  1. Nur Tokens: jede Farbe/Schrift als var(–wk-…, Fallback) (Grundregel oben); Werte-Nachschlag ausschließlich in tokens.css/color-palette.css.
  2. Erst suchen, dann bauen: passende .wk-*-Klasse bzw. Helper-Methode aus der Tabelle oben verwenden statt eigener Duplikate; eigene Klassen mit Plugin-Präfix (<plugin>-…), nie im wk--Namensraum.
  3. Admin-Buttons klassifizieren nach der 3-Farben-Semantik (Contract v3 unten): weiß = gewöhnlich inkl. Speichern, blau = Sonderaktion, rot = destruktiv.
  4. Compiler-Fallen meiden (Abschnitt oben) und nach jedem Edit css.php + tseed prüfen.
  5. Gegen alle drei Farbschemata testen (riviera/night/white, Abschnitt „Farbschemata„) und einmal unter einem fremden Template (Fallback-Werte greifen dann).

Wer darüber hinaus ein komplettes Admin-Modul aufbaut: Tutorial: Erste Admin-Oberfläche mit FluentUI bauen.

Regeln

  1. Das Design-System-Plugin definiert alle Pflicht-Tokens; eine Vorlage deklariert ihren Rückfall auf html und nur das, worauf sie ausdrücklich besteht, auf :root.
  2. Plugins/Snippets schreiben immer var(–wk-…, fallback).
  3. Keine Hex-Farben in Plugin-CSS außerhalb von var()-Fallbacks.
  4. In Template-CSS sind Literalfarben nur für neutrale Effekte erlaubt (Schwarz/Weiß-Schatten und -Overlays wie rgba(0,0,0,.45)), die unter jedem Farbschema funktionieren.
  5. Neue Tokens werden nur über diese Seite eingeführt (Contract-Version erhöhen, beide Template-Dateien ergänzen).
  6. Alpha-Varianten von Token-Farben über color-mix(in srgb, var(–wk-…) N%, transparent) bilden, nicht als eigene rgba-Literale.

Pflicht-Tokens

Token Semantik
–wk-ink Überschriften, betonter Text
–wk-ink-soft Karten-/Posttitel (weicheres Schwarz)
–wk-paper Seitenstreifen (Header, Heading-Strip, Footer)
–wk-accent / -dark / -light Primär-Akzent (Links, Menü, Buttons)
–wk-gold / -dark / -light Sekundär-Akzent-Slot (semantisch, keine Farbe: flat=Amber, wkbizway-Basiswert in tokens.css=Petrol #148fb9, vom Standard-Farbschema riviera überschrieben auf Gold/Bronze #B08A42)
–wk-rule Trennlinien
–wk-surface / -alt / -muted Inhaltsflächen
–wk-text / -alt / -muted / -on-dark / -on-accent Texthierarchie
–wk-link / -hover / -missing Linkfarben
–wk-border / -light / -dotted Rahmen
–wk-highlight Suchtreffer/Markierungen
–wk-sidebar-bg / -bg-alt / -text / -text-muted / -border / -hover Sidebar
–wk-control-height Einheitliche Kontrollhöhe (22px) für Buttons/Tab-Köpfe/Selects/Text-Inputs — schema-invariant (Metrik, keine Farbe), seit Contract v17
–wk-control-gap Waagerechter Abstand zwischen benachbarten Bedienelementen einer Leiste (8px) — Buttons einer Command-Bar-Gruppe, Select plus zugehöriger Ausführen-Button einer Massenaktion, Formular-Aktionszeile. Companion-Metrik zu –wk-control-height, ebenfalls schema-invariant. Verbraucher: .wk-toolbar, .wk-toolbar__group, .wk-shell-commandbar. Nicht für den Abstand ZWISCHEN Gruppen: der kommt aus Trennlinie + padding-left der Regel .wk-toolbargroup + .wk-toolbargroup (~19px) und trägt Bedeutung — er unterscheidet zwei Befehle voneinander. Ein Baustein, der eigene margin-Werte zwischen Bedienelemente setzt, addiert sich zum Gap und kehrt die Staffelung um (so geschehen im Massenaktions-Balken, 2026-07-29 entfernt).
–wk-tabstrip-height Höhe des Arbeitsbereich-Registerstreifens (.wk-editorgroup, die Zeile der geöffneten Admin-Module unter der Topbar) — 35px, die Editor-Tab-Höhe der Referenz-Workbench (VS Code / Azure Data Studio), also ein zitierbarer Wert statt einer Geschmacksentscheidung. Nicht für seiteninterne Tab-Sets: die sind Bedienelemente und bleiben auf –wk-control-height. Eigener Token, weil eine dichtere Button-Leiste die Dokument-Tabs nicht mitschrumpfen darf. Unter body[data-wk-density="compact"] auf 28px (die Höhe vor Einführung des Tokens, also exakt das alte Bild statt eines dritten Werts). Vorher aus der Polsterung des Tab-Links abgeleitet — der aktive Tab war dadurch 1px höher als seine Nachbarn.
–wk-success / -warning / -error + –wk-success-bg / -warning-bg / -error-bg Feedback-Farben + Flächen
–wk-admin-accent / -accent-light / -hover Admin-UI
–wk-focus / -focus-shadow Fokus-Ring (A11y)
–wk-btn-primary / -hover / -text Primär-Button
–wk-font-body Fließtext-Stack (wkbizway: Arimo self-hosted; flat nicht installiert)
–wk-font-heading Überschriften-Stack
–wk-font-display Display-Face (premium-navy-ivory: „Museo 500“-Slot des WP-Originals, nie gebundlet — fällt auf Arimo zurück)
–wk-content-max-width Inhaltsbreite (wkbizway 980px; flat nicht installiert)

Extension-Tokens (template-eigen)

Templates dürfen zusätzliche Tokens für eigene Skin-Details definieren; Plugins dürfen sich nicht darauf verlassen.

Token Template Semantik
–wk-footer-text / -heading / -strip-bg / -strip-border premium-navy-ivory Exakte WP-Grautöne des Footers
–wk-brand-hairline premium-navy-ivory, seit 2026-07-10 Dünne Akzentlinie unter der Wiki-Kopfzeile (nur Area-Profil wiki); Rot (–wk-error) bei riviera/white, transparent bei night — je css/schemes/{riviera,night,white}.css gesetzt, konsumiert von css/brand-accent.css

Der frühere Token –wk-brand-frame (Rahmenfarbe) wurde am 2026-07-10 entfernt (zu viel Gold im Header) — der obere Rahmenstreifen der Site-Seitenhülle ist seitdem ein fester Ivory-Ton, keine schemaabhängige Farbe mehr.

Konsumenten

  • Template-CSS: wkbizway/css/* (vollständig token-basiert), flat/css/customFlat.css, flat/css/accessibility.css
  • wkblog-Template-Sets tpl/wvds + tpl/premiumnavyivory — beide über premium-navy-ivory/css/blog.css
  • Plugins: wvdstheme/style.css, wkacmenu/style.css, wvdsaudit-Badges
  • wksnippet-Snippets (~40 HTML-Bausteine mit Inline-var(–wk-…, fallback))
  • Config-Snippets in conf/local.php (Audit-/Compliance-Badges)

Farbschemata

Ein Farbschema ist eine alternative Belegung der Pflicht-Tokens (css/schemes/<name>.css im Template, nur :root-Overrides). Weil alle Konsumenten über Tokens gehen, wechselt ein Schema die komplette Site-Optik ohne weitere CSS-Änderungen. Drei Marken-Akzente seit 2026-07-10: riviera (Standard), night, white. Die Option colorscheme wirkt nur auf das Area-Profil site — das Area-Profil wiki (und damit jeder do=admin-Bildschirm) rendert ausnahmslos mit white, unabhängig von dieser Einstellung. Details: BizWay (Hausvorlage).

Die Kette hat genau drei Glieder, und jedes sieht nur das vorige:

  1. tokens.css — Basiswerte, alle Pflicht-Tokens
  2. css/schemes/<name>.css:root-Overrides, genau ein Schema aktiv
  3. Konsumenten — Template-CSS, wkblog, wkacmenu, wksnippet und das Admin-CSS-Overlay (_admin-forms.css, _admin-drawer.css)

Ein Konsument liest nie eine Schemadatei, sondern immer nur Tokens. Genau deshalb wechselt ein Schema die ganze Optik, ohne dass eine einzige Konsumentenregel angefasst werden müsste.

Seit 2026-07-11 folgt zusätzlich der davon unabhängige, DokuWiki-native style.ini-[replacements]-Kontrakt (__text__, __link__ usw., konsumiert über @ini_*-LESS-Variablen von jedem Plugin, nicht nur –wk-*-Verbrauchern) automatisch dem jeweils aktiven Farbschema — Details und Platzhalter-Tabelle: Farbschemata.

Admin-Chrome (premium-navy-ivory)

Der do=admin-Bereich rendert über DokuWikis natives Admin-Chrome, nicht über ein eigenes Dashboard (das frühere admin-chrome.css + „BizWay Admin„-Dashboard wurde am 2026-07-09 entfernt). –wk-admin-accent/-accent-light/-hover waren zuvor ungenutzte Pflicht-Tokens; seit 2026-07-09 konsumiert sie css/_admin-forms.css (additives Struktur-Overlay über das native Admin-Markup, keine Core-Plugin-Datei wird verändert) für Karten-Fieldsets, Zeilen-Hover, DataGrid-Tabellen und aktive Elemente (z. B. ACL-Baum). Der Admin-Akzent folgt damit dem gewählten Farbschema. Farblich nicht akzentuiert: „Wert entspricht dem eingebauten Standard“ im Config Manager (Normalfall, keine Ausnahme); akzentuiert: „geschützt„ (nicht änderbar) und Validierungsfehler.

Bild-Assets-Ausnahme: Menüleisten-Textur, Slider-Schatten und Sidebar-/Footer-Grafiken (assets/images/*-blue.png) sind feste Bitmaps aus dem BizWay-Original-Theme, nicht per Token umfärbbar.

Abdeckungsgrenze: _admin-forms.css deckt gezielt die mit DokuWiki mitgelieferten do=admin-Bildschirme ab: acl, config, usermanager, extension, logviewer, styling, popularity, revert, discussion, sqlite (plus die do=admin-Übersicht selbst). Drittanbieter-Plugins außerhalb dieser Liste und eigene wvds*-Admin-Tools (wkvault, wvdsremote, wvdsdwmmx, wksqliteds, wkdoadogit, wvdsmd, wksnippet) sind nicht Teil dieser Abdeckung — sie liegen in der Verantwortung des jeweiligen Plugins, das den Admin-Akzent optional selbst konsumieren kann (wvdsentra, wkblog tun das bereits mit eigener Admin-Optik). Keine _admin-forms.css-Selektor referenziert eine wvds*-Klasse/-ID, nur var(–wk-…)-Tokens — das Template bleibt dadurch unabhängig davon, welche Drittanbieter-/eigenen Plugins installiert sind.

Admin-Aktionsfarben-Semantik (Contract v3, seit 2026-07-11)

Ergänzt die Admin-Chrome-Ausnahme oben um eine dritte Dimension: eine Aktions-Farbsemantik für Buttons im do=admin-Bereich, unabhängig vom sitweiten primär(blau)/sekundär(Outline)-Kontrakt aus css/design.css (der Login/Profil/Wiki-Editor weiterhin bedient und nicht angefasst wird). Eingeführt am 2026-07-11 (Referenzumsetzung: wkidentity), nachgebessert nach Nutzer-Feedback am 2026-07-12.

Farbe Bedeutung Beispiele
neutral/weiß gewöhnliche Aktion, ausdrücklich inklusive Speichern — kein Button ist mehr automatisch „der Haupt-CTA“ eines Admin-Formulars Speichern, Hinzufügen
blau (accent) Sonderaktion Export, Konvertierung, Sync, Test-Verbindung
rot (danger) destruktive/sicherheitsrelevante Aktion Löschen, Zurücksetzen, Widerrufen, Deaktivieren

Die Entscheidung läuft in dieser Reihenfolge, und die erste zutreffende gewinnt: destruktiv oder sicherheitsrelevant → rot; sonst Sonderaktion → blau; sonst weiß, ausdrücklich einschließlich Speichern.

Neue Tokens (tokens.css, zwischen dem Buttons- und dem Extension-Tokens-Block):

Token Semantik
–wk-admin-btn-neutral-bg / -text / -hover-bg / -hover-border Neutraler Admin-Button (Standard)
–wk-admin-btn-neutral-border Seit 2026-07-12 fest #D9D2C0 statt var(–wk-border): ein neutraler Button ist in jedem Schema weiß gefüllt (–wk-surface), ein gewöhnlicher –wk-border-Wert (z. B. #D7D9DB im white-Schema) ergibt dort kaum sichtbare Kontur. Wiederverwendet den in css/schemes/riviera.css bereits validierten warmen Ivory-Grauton statt eines neuen Literals.
–wk-admin-btn-accent-bg / -text / -border Blauer Admin-Button — spiegelt –wk-admin-accent (schema-abhängig)
–wk-admin-btn-danger-bg / -text / -border / -hover-bg Roter Admin-Button — spiegelt –wk-error (schema-invariant)
–wk-admin-btn-hover-darken Halbtransparentes Schwarz-Overlay für den Accent-Hover (kein Schema definiert einen eigenen dunkleren Blauton)
–wk-admin-toolbar-divider Trennlinie zwischen Toolbar-Button-Gruppen
–wk-admin-tab-underline Aktiver-Tab-Unterstrich
–wk-admin-row-selected-bg Zeilen-Tönung bei markierter Grid-Zeile

Eigene Tokens statt Wiederverwendung von –wk-btn-primary: Letzterer ist der sitweite Haupt-Button-Kontrakt (Login/Profil/Editor); eine künftige Bedeutungsänderung dort darf die admin-interne 3-Farben-Semantik nicht ungewollt mit verändern, auch wenn beide aktuell denselben Blauton referenzieren.

Klassennamens-Konvention, nach Editierbarkeit der Quelle:

  • DokuWiki-Core-Plugins (PHP nicht editierbar, s. Abschnitt „Core-Patches„ unten für die enge Ausnahme davon): Farbzuordnung ausschließlich über vorhandene, stabile id-/name-Attribute in _admin-forms.css/_admin-drawer.css, niemals über sichtbare Texte. Referenz: #usrmgr__del, button[name=„fn[export]“]. Ein ID-Präfix ist oft eine Spezifitäts-Notwendigkeit: _admin-forms.css lädt vor design.css.
  • WvdS-eigene Plugins (PHP editierbar): direkte Klassenvergabe im PHP, Muster <plugin-präfix>-btn–danger/–accent (Referenz: wkidentitys wt-btn–danger). CSS-Regeln zeigen per var(–wk-…, Fallback) auf die zentralen Tokens.
  • Generischer Fall: wiederverwendbares Klassenpaar .wk-admin-btn–danger/–accent in _admin-forms.css.
  • Zentral vs. plugin-lokal: zentral (_admin-forms.css), wenn ein Plugin einen einzelnen Root-Selektor und wenige Buttons hat; plugin-lokal (Vorbild wkidentity/admin.css), wenn ein Plugin bereits eigenes CSS mitbringt oder eine so komplexe UI hat, dass ID-Scoping in einer fremden zentralen Datei die Wartbarkeit verschlechtern würde.

Keine lokalen Token-Layer in Plugins: ein Plugin-Stylesheet deklariert keine eigenen –<plugin-präfix>-*-Custom-Properties, die nur einen zentralen Token spiegeln — jede Regel referenziert den zentralen Token direkt (color: var(–wk-admin-accent, #0f6cbd);). Ausnahme: ein @media (prefers-color-scheme: dark)-Block kann den statischen Fallback-Wert eines var()-Aufrufs nicht umschalten — betroffene Selektoren müssen dort mit dunklen Literalen wiederholt werden.

Icon-Priorität für neue Toolbar-/Button-Iconografie: 1. Codicons (passt zur Fluent-/ADO-Formensprache), 2. FontAwesome (bereits selbst gehostet, assets/fonts/fontawesome-webfont.*), 3. DokuWikis eigene Icons (lib/images/), nur wenn weder Codicon noch FontAwesome passt. Reine Prioritätsliste für künftige Symbolwahl, kein Zwang zum Ersetzen bestehender korrekter Icons. Codicon-Vendoring selbst (assets/fonts/codicon.ttf + Subset in css/icons.css) ist offen, zurückgestellt mangels konkretem Verbraucher.

Farb- und Schriftpolitik: aus einer Fluent-/Azure-DevOps-Referenz wird ausschließlich die strukturelle Formensprache übernommen (Radius, Fokusring, Grid-/Toolbar-/Tab-Konventionen, Typo-Größenstufen) — niemals Microsofts konkrete Farb- oder Schriftwerte. Farben bleiben die eigene Marken-Palette (Weiß, Ivory, Navy-Blau, Burgund-Rot, Gold). Schriftarten bleiben die bestehenden, selbst gehosteten Google-Fonts (Arimo/Roboto/Noto Sans).

Ini-Mechanismus: aktuell konsumiert kein @ini_*-Verbraucher im Admin-Bereich eine Danger-/Fehlerfarbe (nur __theme_color__ → accent, bereits gemappt). Braucht ein künftiger LESS-basierter Admin-Screen einen Danger-Ton über @ini_*: einen namespaced Schlüssel __wk_danger__ zur $map in wkbizway_sync_style_ini_replacements() (main.php) ergänzen, gemappt auf error. Kein proaktiver Eintrag ohne Verbraucher.

Abgrenzung zu lib/plugins/wvdsdwui/: ein zweites, unabhängig gewachsenes WvdS-Design-System (eigener Token-/Komponenten-/Icon-Provider-Satz, Repo wk-dw-ui-plugin). Kein hier behandeltes Admin-Plugin nutzt wvdsdwui — diese Admin-Button-/Chrome-Semantik gilt ausschließlich für die premium-navy-ivory-CSS-Overlay-Welt. Bekannter, bewusst nicht aufgelöster Befund.

Core-Patches (Konvention seit 2026-07-12)

Für DokuWiki-Core-Dateien ohne eigene Versionskontrolle (lib/plugins/{acl,extension,usermanager,config,styling,logviewer,discussion,sqlite,…}, inc/*) gilt eine enge Ausnahme vom Grundsatz „Core niemals anfassen“: ein gezielter, dokumentierter Patch statt eines Workarounds, wenn der Fix eng/gezielt ist (keine Refactorings) und außerhalb des Wikis eine Sicherung der Originaldatei samt Begründung abgelegt wird. Editierform im DokuWiki-Quellcode: nichts löschen/ersetzen — Originalzeile(n) auskommentieren, neue Zeile(n) einzeln inline kommentieren, Tag WvdS <YYMMDD>:, Kommentarsprache Englisch. Kein Git-Workflow für die gepatchte Datei selbst möglich (kein Repository) — Nachvollziehbarkeit über WI-Datei, Inline-Kommentare und Backup statt Commits. Ein Abschnitt dieses Namens steht heute in keiner Projektregel mehr – die Konvention ist nur hier beschrieben.

Die Entscheidungskette, wie sie damals formuliert wurde: hat die Datei ein eigenes Repository, gilt der gewöhnliche Git-Ablauf. Hat sie keines, entscheidet die zweite Frage — ist der Fix eng und gezielt, ohne Refactoring, wird gepatcht; sonst wird nicht gefixt, sondern als bekannte Einschränkung dokumentiert.

Als erstes Beispiel nannte diese Seite lib/plugins/extension/GuiAdmin.php: drei catch (Exception $e)-Blöcke fingen wegen fehlender Namespace-Qualifizierung nur die plugin-eigene Exception-Klasse, nicht PHPs globales RuntimeException aus Extension::initFromRemoteData() bei kaputter Repository-Antwort; der Fix sollte auf catch (\Throwable $e) erweitern.

Am 4. August 2026 nachgemessen: auf dieser Installation existiert kein einziger Kernpatch. Das dafür vorgesehene Verzeichnis gibt es nicht, in inc/ und den mitgelieferten Plugins steht kein einziger WvdS <JJMMTT>:-Marker, und GuiAdmin.php trägt weiterhin die drei unqualifizierten catch (Exception $e) — also genau den Zustand, den dieser Abschnitt als behoben beschreibt.

Zwei Lesarten sind möglich, und dieser Abschnitt entscheidet nicht zwischen ihnen: entweder hat eine Kernaktualisierung den Patch überschrieben — genau das Risiko, das eine Konvention ohne Versionskontrolle trägt —, oder er wurde hier nie angewandt. So oder so gilt heute die einfachere Regel des Projekts: der Kern wird nicht verändert, und eine bestätigte DokuWiki-Fehlfunktion wird nach den Richtlinien des Projekts gemeldet statt lokal gepatcht.

Der Abschnitt bleibt stehen, weil er eine Konstruktion beschreibt, die einmal galt, und weil ihr Ausgang die Begründung der heutigen Regel ist.

Ein Nutzer-Vergleich zweier Sidebar-Screenshots (Konfigurations-Manager-TOC vs. Wiki-Doku-Seite) deckte auf, dass die Container-Ebene (Hintergrund, Rahmen) der Sidebar-/Auxbar-Regionen bewusstlos zwischen zwei Bereichen divergierte, obwohl der Contract bereits eine passende, aber ungenutzte –wk-sidebar-*-Token-Familie als Pflicht-Token führte (Tabelle oben, seit Contract-Version 1 unverändert benannt). Diese Ergänzung macht die Token-Familie zur tatsächlich konsumierten gemeinsamen Basis für jede Sidebar-/Auxbar-artige Region der Site — „Dokument vs. App„ bleibt dabei der einzige sanktionierte optische Unterschied, ausgedrückt als zwei benannte Wertesätze für dieselben Tokens, nicht als eigenständige Implementierung je Bereich.

Variante Wo Bedeutung
Dokument Wiki-Lesebereich: Doc-Sidebar, Page-TOC (area-wiki.css) Liest sich wie eine Buchseite — weißer Hintergrund (var(–wk-surface)), kein sichtbarer Rahmen
App Admin-/Studio-Regionen: .wk-shell-sidebar/-auxbar (wkfluentui/style.css) Liest sich wie eine Application-/WebView-Chrome — getönter Hintergrund (var(–wk-surface-muted)), sichtbarer Rahmen (var(–wk-border))

Beide Wertesätze sind in premium-navy-ivory/css/tokens.css definiert: der Dokument-Satz als Basiswert im :root-Block (Wiki ist inc/area.phps globaler Default-Bereichstyp), der App-Satz als Override direkt auf den bestehenden Klassennamen .wk-shell-sidebar/.wk-shell-auxbar (keine neue Marker-Klasse, keine Markup-Änderung nötig). Die Zuweisung ist eine statische Architektur-Entscheidung je Regionstyp — kein Nutzer-Toggle, keine Laufzeit-Umschaltung.

Token Dokument App
–wk-sidebar-bg var(–wk-surface) var(–wk-surface-muted)
–wk-sidebar-bg-alt var(–wk-wiki-mat-bg) var(–wk-surface-alt)
–wk-sidebar-text var(–wk-wiki-nav-text) var(–wk-text)
–wk-sidebar-text-muted var(–wk-wiki-nav-text-muted) var(–wk-text-muted)
–wk-sidebar-border transparent var(–wk-border)
–wk-sidebar-hover var(–wk-wiki-nav-hover-bg) var(–wk-admin-hover)

Konsumenten: area-wiki.css (.premiumnavyivory-doc-sidebar/.premiumnavyivory-page-toc–desktop/–mobile, Hintergrund) und wkfluentui/style.css (.wk-shell-sidebar/-auxbar, Hintergrund + Rahmen, zweiter var()-Fallback-Level statt des vorherigen Ad-hoc-–wk-surface-alt). Der plugin-lokale –wk-surface-muted-Override in wksqliteds/screen.css (ADO Task #898, Studio-spezifischer Fix gegen dieselbe Weiß-auf-Weiß-Flächigkeit im white-Farbschema) entfällt für Sidebar/Auxbar — die Tönung kommt jetzt zentral aus dem Contract und gilt automatisch für jeden .wk-shell-sidebar/-auxbar-Verbraucher, nicht nur Studio. Die Statusbar-/Commandbar-Tönung bleibt vorerst ein lokaler Override (kein Bestandteil dieser Ergänzung — nur die Pflicht-Token-Familie –wk-sidebar-* ist Sidebar/Auxbar-benannt, keine Statusbar-/Commandbar-Variante existiert).

Direkte Folge: der Konfigurations-Manager-TOC (.wk-shell-sidebar premiumnavyivory-admin-toc-sidebar, siehe inc/wiki-shell.php) erbt ab sofort automatisch die App-Tönung + den Rahmen statt der bisherigen unstyled <ul>-Optik — kein eigener CSS-Selektor für diese Seite nötig.

Regionen-Hebung + Klassen-Familien-Zuständigkeit (Contract v17, seit 2026-07-18)

Ein Nutzer-XPath-Vergleich zwischen einer Wiki-Doku-Seite und do=admin&page=wksqliteds deckte auf, dass Admin-Regionen (Objekt-Baum-Sidebar, Modul-Rail) tief in main > .premiumnavyivory-wiki-card > .page.group > … verschachtelt waren, statt wie die Wiki-Doc-Sidebar/TOC-Rail als echte <aside>-Geschwister von <main> zu liegen. Behoben durch einen neuen, generischen Kontrakt statt einer Einzelfall-Lösung:

  • Ein Admin-Plugin, das seine komplette Shell selbst rendert (Content+Auxbar+Statusbar), implementiert eine öffentliche Methode getShellRegions(): ?array (Rückgabeform {sidebarHtml: ?string, railHtml: ?string, auxOpen: bool} oder null), aufrufbar vor tpl_content() — analog zu DokuWikis eigenem getTOC()-Kontrakt, aber template-spezifisch (kein Core-Interface). inc/wiki-shell.php prüft generisch per method_exists(), ob das aktive Admin-Plugin diese Methode anbietet — keine hartcodierte Plugin-Namensliste mehr.
  • Fehlt getShellRegions(), aber liefert das Plugin ein nicht-leeres getTOC(), wird dessen Inhalt (wie bisher) über wkfluentuis tree()-Komponente gerendert — beide Pfade münden in derselben <aside id=„dokuwiki__docsidebar“>-Position wie die Wiki-Doc-Sidebar.
  • railHtml (nur bei eigenschalenbesitzenden Plugins) rendert als eigene <aside id=„dokuwiki__adminmodulerail“> im selben visuellen Slot wie die Wiki-TOC-Rail — bewusst eigene id/aria-label, andere Semantik (Modul-Aktionen, keine Seiten-TOC).
  • Sicherheitsanforderung: getShellRegions() läuft vor DokuWiki-Cores eigener Admin-Zugriffsprüfung (die erst innerhalb von tpl_content()s Dispatch greift) und muss deshalb selbst denselben Capability-Gate wie die eigentliche html()-Methode anwenden — sonst könnte ein nicht autorisierter Deep-Link Verbindungs-/Tabellennamen im Sidebar-Baum sehen, obwohl der Content-Bereich korrekt verweigert würde.
  • sidebar-collapsed/rail-collapsed werden nicht mehr pauschal für jeden do=admin-Bildschirm gesetzt, sondern nur noch, wenn tatsächlich kein Sidebar-/Rail-Inhalt vorhanden ist — dieselbe Logik, die Wiki-Seiten für ihre eigene Sidebar/TOC bereits anwenden.

Klassen-Familien-Zuständigkeit (Befund „vier Klassen, keine dokumentierte Zuständigkeit“): premiumnavyivory-* (Template-Eigentum: Regions-/Bereichs-Hooks, z. B. -doc-sidebar/-action-rail) und wk-shell-*/wk-workbench* (Plugin-Eigentum: Layout/Verhalten, z. B. wk-shell-sidebar/wk-workbench–no-sidebar) dürfen weiterhin gemeinsam auf einem Element stehen (z. B. class=„premiumnavyivory-doc-sidebar premiumnavyivory-doc-sidebar–app wk-shell-sidebar“), aber nicht mehr unkommentiert — jede Familie bleibt für ihre eigene Zuständigkeit (Bereichszugehörigkeit vs. generisches Layout) verantwortlich, keine Familie überschreibt die Zuständigkeit der anderen.

Schema-Palette-Parität (Contract v17, seit 2026-07-18)

Neue verbindliche Regel: jedes Farbschema (riviera/night/white) MUSS entweder jeden Rohpalette-Token definieren, der irgendwo per var() konsumiert wird, oder der Token wird als schema-invariant (:root-only, keine Schema-Datei überschreibt ihn — z. B. die –wk-wiki-card-*-Familie, die bewusst nur einmal in tokens.css gesetzt wird, damit die Wiki-Lesefläche unabhängig vom Akzent immer als weißes Dokument erscheint) explizit dokumentiert. Keine stille dritte Möglichkeit („in zwei von drei Schemata da„).

Konkreter Befund bei Einführung dieser Regel: –wk-steel-azure/-ivory/-ivory-2 waren in riviera.css/white.css als reine Rohpalette-Deklarationen vorhanden, aber (verifiziert per Grep über das gesamte Template und alle wvds*-Plugins) nirgends konsumiert — derselbe Hex-Wert liegt bereits unter den generischen Kontrakt-Namen (–wk-accent, –wk-surface-alt/-muted). Entfernt statt aus Paritätsgründen beibehalten, die Herkunfts-Dokumentation (Marken-Hex-Werte) bleibt als Prosakommentar erhalten.

Kontrast-Nachweis-Pflicht: eine neue Token-Zuweisung, die als UI-Komponentengrenze dient (z. B. ein Button-Rahmen, wenn Button-Füllung == umgebende Fläche), muss WCAG 1.4.11 (Non-Text-Contrast, ≥3:1 gegen die angrenzende Fläche) rechnerisch nachgewiesen werden, nicht nur „sichtbarer als die Alternative“ — bei Einführung dieser Regel wurde rückwirkend –wk-admin-btn-neutral-border geprüft: der bisherige Wert (#D9D2C0, seit Contract v14 als Ivory-Ton „fixiert„) erreichte gegen –wk-surface in allen drei Schemata nur 1,5:1 (riviera/white) bzw. mit einem zwischenzeitlich versuchten Night-eigenen Wert 2,17:1 — beides unter der Schwelle. Korrigiert: der :root-Default referenziert jetzt var(–wk-text-alt) (~5,85:1 in riviera/white), Night erhält einen eigenen, rechnerisch verifizierten Override #557AA3 (~3,27:1), da Nights eigenes –wk-text-alt eine für dunkle Flächen gedachte helle Farbe ist.

Changelog (Kurzfassung)

Version Datum Änderung
17 2026-07-18 Regionen-Hebung: getShellRegions()-Kontrakt (generisch statt Plugin-Namensliste) hebt Admin-Sidebar/-Rail auf echte <aside>-Geschwister von <main>; Klassen-Familien-Zuständigkeit premiumnavyivory-* vs. wk-shell-*/wk-workbench* dokumentiert; neuer Token –wk-control-height; neue Komponenten .wk-btn/.wk-field–file; Schema-Palette-Parität-Regel (jeder konsumierte Rohpalette-Token muss in jedem Schema definiert ODER explizit als schema-invariant dokumentiert sein) + Kontrast-Nachweis-Pflicht (WCAG 1.4.11) für UI-Komponentengrenzen; toter –wk-steel-azure/-ivory/-ivory-2 entfernt; –wk-admin-btn-neutral-border war in allen drei Schemata unter 3:1 — rechnerisch korrigiert.
16 2026-07-17 Sidebar/Auxbar-Kontrakt „Dokument vs. App“: die bereits als Pflicht-Token geführte, aber ungenutzte –wk-sidebar-*-Familie wird zur tatsächlichen gemeinsamen Basis für Wiki-Doc-Sidebar/Page-TOC und Admin/Studio-.wk-shell-sidebar/-auxbar — zwei benannte Wertesätze statt drei divergenter Ad-hoc-Optiken; Studio-lokaler –wk-surface-muted-Override (Task #898) für Sidebar/Auxbar entfällt.
15 2026-07-13 Einstiegs-Ausbau: Abschnitte „Wegweiser„, „Wiederverwendbare Komponenten-Klassen“, „CSS-Compiler-Fallen (sitewide fatal)„ und „In 5 Schritten zum contract-konformen Plugin-CSS“ ergänzt — Ziel: Entwickler ohne WvdS-Vorwissen können effizient contract-konforme Plugins bauen; verweist auf die neuen wvdsfluentui-Referenzseiten (wiki-layout/admin-layout/datagrid/editors/tutorial).
14 2026-07-12 Seite auf Regelkonformität (Zielleser-Annahme, keine lokalen Referenzen, Redundanz) überarbeitet; 3 Mermaid-Diagramme ergänzt; –wk-admin-btn-neutral-border auf Ivory (#D9D2C0) fixiert; Abschnitt „Core-Patches„ ergänzt; die Nutzer-Feedback-Runde (8 Nutzer-Bugmeldungen do=admin, u. a. wvdstotp-Cache-Buster-Fix und sqlite-Page-TOC-Reaktivierung statt vermuteter CSS-/Plugin-Bugs) in die Abdeckungsliste/den Core-Patch-Abschnitt eingearbeitet.
13 2026-07-11 style.ini-[replacements]-Sync dem aktiven Farbschema automatisch nachgeführt.

Nachtrag 2026-07-17: Workbench-Tracks und Dichte

Ergänzungen aus dem „fill the gaps“-Feature (keine Contract-Versionsänderung — rein additive Custom Properties, kein bestehender Konsument ändert sein Verhalten):

  • --wk-workbench-{sidebar,auxbar}-width / -track — Spaltenbreiten des generischen Workbench-Grids; die -track-Wrapper gehören den Breakpoints, die -width-Werte dem Sash (Inline-Style). Konsument: wkfluentui Sektion WORKBENCH GRID.
  • --wk-shell-statusbar-h — bestehendes Token, jetzt zusätzlich Dichte-abhängig: body[data-wk-density="compact"] setzt es auf 20px (Standard 22px).
  • data-wk-density="compact" am body ist der einzige Schalter der Dichte-Wirkschicht (Sektion DENSITY in wkfluentui/style.css); Toast-Statusfarben nutzen die bestehenden Status-Tokens --wk-{success,warning,error}.
de/wiki/dwe/styles-contract.txt · Zuletzt geändert: von 0.0.0.0