This is the BWSt theme for the Public UI web component library. You can customize this theme by using css variables or by creating a new theme.
import { register } from '@public-ui/components';
import { defineCustomElements } from '@public-ui/components/dist/loader';
import { BWSt } from '@public-ui/theme-bstw';
register(BWSt, defineCustomElements).then(() => {
ReactDOM.createRoot(document.getElementById('root')!).render(
<React.StrictMode>
<App />
</React.StrictMode>,
);
});- Clone the repo:
git clone https://github.com/public-ui/kolibri-theme-bwst.git - Use the
Git Bash - Install PNPM in Version 9:
npm i -g pnpm^9 - Node-Version:
node -v-> Output:v20.12.2 - PNPM-Version:
pnpm -v-> Output:9.0.6 - Repo irectory:
pnpm i
Packages: +1305
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
Progress: resolved 1305, reused 1304, downloaded 1, added 1305, done
node_modules/.pnpm/[email protected]/node_modules/chromedriver: Running install script, done in 3.2s
devDependencies:
+ @public-ui/components 2.1.1
+ @public-ui/visual-tests 2.1.1
+ @rollup/plugin-commonjs 25.0.8
+ @rollup/plugin-node-resolve 15.2.3
+ @rollup/plugin-typescript 11.1.6
+ @types/node 20.12.8
+ @typescript-eslint/eslint-plugin 7.11.0
+ @typescript-eslint/parser 7.11.0
+ eslint 8.57.0
+ nodemon 3.1.2
+ npm-check-updates 16.14.20
+ postcss 8.4.38
+ prettier 3.2.5
+ rollup 4.18.0
+ rollup-plugin-postcss 4.0.2
+ sass 1.77.3
+ typescript 5.4.5- Start dev:
npm start - Edit files
Das Default-Theme ist ein Token-Based Theme, das mit minimalen Anpassungen sofort verwendet werden kann. Es bringt bereits alle notwendigen Stylings mit und kann über Design Tokens, in Form von CSS Custom Properties an das eigene Design angepasst werden.
| Variable | Standard-Wert | Bedeutung |
|---|---|---|
--kolibri-border-radius |
5px |
Border-Radius für abgerundete Elemente |
--kolibri-font-family |
Calibri, Verdana, Arial, Helvetica, sans-serif |
Allgemeine Schriftart |
--kolibri-font-size |
16px |
Allgemeine Schriftgröße |
--kolibri-spacing |
0.25rem |
Allgemeiner Abstand zwischen Elementen |
--kolibri-border-width |
1px |
Allgemeine Rahmen-Breite |
--kolibri-color-primary |
#004b76 |
Primärfarbe |
--kolibri-color-primary-variant |
#0077b6 |
Alternative Variante der Primärfarbe |
--kolibri-color-danger |
#c0003c |
Farbe für Fehlermeldungen und gefährliche Aktionen |
--kolibri-color-warning |
#c44931 |
Farbe für Warnungen |
--kolibri-color-success |
#005c45 |
Farbe für Erfolgsmeldungen |
--kolibri-color-subtle |
#576164 |
Farbe für feine Akzente wie z.B. Rahmen |
--kolibri-color-light |
#ffffff |
Helle Farbe für z.B. Hintergründe |
--kolibri-color-text |
#202020 |
Textfarbe |
--kolibri-color-mute |
#f2f3f4 |
Farbe für deaktivierte Elemente |
--kolibri-color-mute-variant |
#bec5c9 |
Alternative Farbe für deaktivierte Elemente |
Theme importieren und registrieren:
import { register } from '@public-ui/components';
import { defineCustomElements } from '@public-ui/components/dist/loader';
import { BWSt } from '@public-ui/theme-bstw';
register(BWSt, defineCustomElements);Für mehr Details und weitere Optionen siehe Erste Schritte.
Um die Design Tokens anzupassen, reicht ein einfaches Stylesheet, das die gewünschten Custom Properties überschreibt. Es ist dabei nicht notwendig, alle Properties zu setzen, sondern nur solche, die auch überschrieben werden sollen. Beispiel:
:root {
--kolibri-border-radius: 3px;
--kolibri-font-size: 18px;
--kolibri-spacing: 0.3rem;
--kolibri-color-primary: #cc006e;
--kolibri-color-primary-variant: #ff64b9;
}<!doctype html>
<html lang="de" dir="ltr">
<head>
<title>Code-Samples | KoliBri – Public UI</title>
<meta charset="UTF-8" />
<meta name="description" content="Webanwendung mit der KoliBri-Komponentenbibliothek." />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="shortcut icon" type="image/x-icon" href="assets/kolibri.ico" />
<link rel="stylesheet" href="assets/codicons/codicon.css" />
<!--- <link rel="stylesheet" href="assets/fontawesome-free/css/all.min.css" />-->
<link rel="stylesheet" href="assets/noto-sans/noto-sans.css" />
<link rel="stylesheet" href="main.css" />
<meta name="robots" content="noindex" />
<meta name="kolibri" content="dev-mode=false;experimental-mode=true;" />
</head>
<body>
<div id="app"></div>
<script async src="main.js"></script>
<noscript>Diese Webseite erfordert, dass Sie JavaScript aktivieren.</noscript>
</body>
</html>Die Continuous Integration (CI)-Pipeline beinhaltet automatisierte visuelle Regressionstests mithilfe der React Sample APp.
Beim Einführen visueller Änderungen am Theme werden anfänglich Testfehler erwartet. Um dies zu beheben, sollte die
update-snapshots.yml-Action auf GitHub ausgeführt werden, gefolgt von einer sorgfältigen Überprüfung der Änderungen.
Um unerwartete fehlgeschlagene visuelle Tests zu überprüfen, sind die Test-Berichte als "Artifacts" im Bereich "Summary" der Action "Update Snapshots" verfügbar.
Die folgenden Methoden können verwendet werden, um die Snapshots zu aktualisieren.
- GitHub-Website: Aktualisiere die Snapshots direkt auf der GitHub-Website, indem du die folgenden Schritte befolgst.
- Navigiere zum
Actions-Tab im Repository. - Führe die Action
Update Snapshotsaus. - Wähle den gewünschten Branch aus, in dem du die Snapshots aktualisieren möchtest.
- Der Workflow checkt den Branch aus, aktualisiert alle Snapshot-Dateien und committed die Änderungen in diesen Branch.
- Terminal-Befehl: Verwende das GitHub CLI (gh), um die
update-snapshots.yml-Action vom lokalen Terminal auszuführen. Diese Methode wird empfohlen, um Snapshots im aktuellen Branch zu aktualisieren, ohne zur GitHub-Website navigieren zu müssen. Für die Nutzung im Terminal muss das GitHub CLI (gh) installiert sein.
- Führe den folgenden Befehl im Projektverzeichnis aus, um die Snapshots in deinem ausgecheckten Branch zu aktualisieren:
gh workflow run update-snapshots.yml -r `git rev-parse --abbrev-ref HEAD` - Wenn du alle Snapshots löschen möchtest, bevor sie neu generiert werden, füge
-f purge_snapshots=truezum Befehl hinzu:gh workflow run update-snapshots.yml -r `git rev-parse --abbrev-ref HEAD` -f purge_snapshots=true - Du kannst die Action auch in einem anderen Branch ausführen, indem du mit dem Flag
-r <branch_name>einen anderen Zielbranch angibst. Zum Beispiel, um die Snapshots immain-Branch zu aktualisieren:gh workflow run update-snapshots.yml -r main
Diese Schritte stellen sicher, dass visuelle Snapshots systematisch aktualisiert werden, um die Integrität des Testprozesses zu gewährleisten.