Theming

Ein Theme ist eine konkrete Umsetzung einer zentralen Design-Vorlage innerhalb von KoliBri. Es steuert das visuelle Erscheinungsbild aller Oberflächenelemente. So können verschiedene Designvorgaben auf einer einheitlichen technischen Basis umgesetzt werden.

Das Einzigartige an KoliBri ist die Referenzimplementierung von Komponenten, die von Grund auf semantisch W3C- und WCAG-konform und damit vollständig barrierefrei bezüglich der assistiven Unterstützung sind. Alle Komponenten werden dabei als umgesetzt und sind somit in allen webbasierten Projekten wiederverwendbar. In der folgenden Abbildung werden diese Komponenten durch die grau-gestrichelten Formen in der Mitte dargestellt.

1. KoliBri-Komponenten könnten als Basis für alle Design Systeme oder Komponenten-Bibliotheken wiederverwendet werden.

Im ersten Release (v1.0) hatte KoliBri noch direkt das Individualisieren des Standard-Designs mittels sogenannter

(

, ) umgesetzt. Mit der Umsetzung weiterer Themes haben wir jedoch festgestellt, dass wir immer mehr CSS-Properties einführen müssten, um die Flexiblität für das gewünschte Design/UX (Corporate Design/Styleguide) umsetzen zu können. Im Zweifel müsste für jede Anpassbarkeit ein separates Property vorgesehen werden. Am Beispiel des ist gut erkennbar, wie die CSS-Properties (Design Token) immer mehr werden.

2. Wir haben das ganze CSS vollständig von den Komponenten entkoppelt (wie ).

Die Komponenten können einzeln und vollständig unabhängig voneinander mit der gesamten CSS-Freiheit gestalten. Innerhalb eines Themes können eigene CSS-Properties eingeführt werden. Die Nutzung von CSS-Properties (Design-Tokens) bleibt somit auf Theme-Ebene erhalten, jedoch mit einem viel kleineren und pflegbaren Scope.

3. KoliBri ermöglicht die Wiederverwendung getesteter, barrierefreier und robuster Komponenten(-konstruktionen) bei nahezu individuellem Design und stellt damit einen im Rahmen der Barrierefreiheit frei gestaltbaren HTML-Standard dar.

Im folgenden Diagramm wird ein beispielhafter Design-Prozess mit KoliBri dargestellt, der vollkommen unabhängig vom KoliBri-Team angewendet werden kann.

stateDiagram-v2 direction LR %% Zustände mit Titel + Untertitel s1: Spezifikation s1: UI/UX-Team s2: Design-Tokens s2: JSON s3: Style-Files s3: CSS s4: Theme s4: KoliBri %% Notizen zu den Zuständen note right of s1 Tools: Adobe XD, Figma, Sketch u.a. Technik: CSS-Properties, Design-Tokens end note note right of s2 Export-Plugin end note note right of s3 Set of CSS-Properties end note note right of s4 Shareble NPM-Paket end note %% Übergänge [*] --> s1 s1 --> s2 : Plugin s2 --> s3 : Script s3 --> s4 s4 --> [*]

Das UI/UX-Team spezifiziert beispielsweise mit Figma die Komponenten ihres Design-Systems. Bei der Überführung der Spezifikation in die Realisierung wird das Design in Form von reinem CSS auf die Basis-Komponenten „übertragen“. Wenn im eigenen Design-System eine Individualisierbarkeit gewünscht ist, können dafür CSS-Properties oder Design-Tokens definiert werden. Damit das eigene Theme über Projekte hinweg geteilt werden kann, wird das Theme in ein NPM-Paket paketiert und kann über eine beliebige Registry bereitgestellt werden.

Optional können beispielsweise aus Figma, mittels Design-Tokens, Design-Schemata exportiert werden. Diese können dann in separate CSS-Dateien überführt werden, die die jeweiligen Werte zu den CSS-Properties enthalten. Später wird eine dieser CSS-Dateien verwendet, um das konkrete Design in Kombination mit den Web Components und dem Theme in der Webseite anzuwenden.

Optional kann auch ein "Dark-Mode"-Theme umgesetzt werden. Hierzu kann das erforderliche CSS in den Globals des KoliBri-Themes hinterlegt werden.

Eigene spezifische Komponenten, die nicht von KoliBri bereitgestellt werden und leider nicht zu den KoliBri-Komponenten passen, können in eigenen Komponenten-Bibliotheken aufgebaut und unabhängig gepflegt werden. Hierfür bieten wir die sogenannte KoliBri-Factory (Stack) an (siehe

).