@public-ui/theme-bwst 4.1.2-rc.3 → 4.1.4-rc.5

package/README.md

@@ -1,4 +1,4 @@
-# Public UI - BWSt-Theme
+# Public UI – BWSt Theme
 
 [![npm](https://img.shields.io/npm/v/@public-ui/theme-bwst)](https://www.npmjs.com/package/@public-ui/theme-bwst)
 [![license](https://img.shields.io/npm/l/@public-ui/theme-bwst)](https://github.com/public-ui/kolibri/blob/main/LICENSE)
@@ -8,9 +8,15 @@
 [![size](https://img.shields.io/bundlephobia/min/@public-ui/theme-bwst)](https://bundlephobia.com/result?p=@public-ui/theme-bwst)
 ![contributors](https://img.shields.io/github/contributors/public-ui/kolibri)
 
-This is the BWSt theme for the [Public UI web component library](https://public-ui.github.io). You can customize this theme by using `css variables` or by creating a new theme.
+Das BWSt Theme erweitert die [Public UI Web Component Library](https://public-ui.github.io) um ein individuelles Design.
 
-## Integration in React
+## Installation & Integration
+
+```bash
+npm install @public-ui/components @public-ui/theme-bwst
+```
+
+**React-Beispiel:**
 
 ```tsx
 import { register } from '@public-ui/components';
@@ -18,7 +24,7 @@ import { defineCustomElements } from '@public-ui/components/loader';
 import { BWSt } from '@public-ui/theme-bwst';
 
 register(BWSt, defineCustomElements).then(() => {
-	ReactDOM.createRoot(document.getElementById('root')!).render(
+	ReactDOM.createRoot(document.getElementById('root')).render(
 		<React.StrictMode>
 			<App />
 		</React.StrictMode>,
@@ -26,37 +32,69 @@ register(BWSt, defineCustomElements).then(() => {
 });
 ```
 
-## Full documentation
+Weitere Details: [Getting started](https://public-ui.github.io/docs/get-started/first-steps#einbinden-in-ein-bestehendes-projekt)
+
+## Beitrag zum Theme (Contribution)
+
+Du möchtest das BWSt-Theme verbessern oder anpassen? So gehst du vor:
+
+1. **pnpm installieren**
+   - [pnpm](https://pnpm.io/) wird für die Entwicklung benötigt. Installiere pnpm global, falls noch nicht vorhanden:
+
+     ```bash
+     npm install -g pnpm
+     ```
+
+2. **Repository forken**
+   - Klicke auf [Fork](https://github.com/public-ui/kolibri) auf GitHub und erstelle deinen eigenen Fork.
+
+3. **Lokales Setup**
+   - Klone deinen Fork:
+
+     ```bash
+     git clone https://github.com/<DEIN_GITHUB_USER>/kolibri.git
+     cd kolibri/lib/packages/themes/bwst
+     ```
+
+   - Installiere die Abhängigkeiten im Monorepo-Hauptverzeichnis:
 
-👉 [https://public-ui.github.io](https://public-ui.github.io)
+     ```bash
+     pnpm i
+     pnpm build
+     ```
 
-## Usage
+4. **Entwicklung starten**
+   - Wechsle ins Theme-Verzeichnis und starte den Watch-Modus:
 
-The default theme is token based and works with minimal adjustments. It already contains all necessary styling and can
-be customized with design tokens using _CSS Custom Properties_.
+     ```bash
+     cd kolibri/lib/packages/themes/bwst
+     pnpm start
+     ```
 
-### Variables
+   - Passe die Dateien in `src/` nach deinen Wünschen an.
 
-| Variable                          | Default value                                    | Meaning                                |
-| --------------------------------- | ------------------------------------------------ | -------------------------------------- |
-| `--kolibri-border-radius`         | `5px`                                            | Border radius for rounded elements     |
-| `--kolibri-font-family`           | `Verdana, Arial, Calibri, Helvetica, sans-serif` | Default font family                    |
-| `--kolibri-font-size`             | `16px`                                           | Base font size                         |
-| `--kolibri-spacing`               | `0.25rem`                                        | Base spacing between elements          |
-| `--kolibri-border-width`          | `1px`                                            | Border width                           |
-| `--kolibri-color-primary`         | `#004b76`                                        | Primary color                          |
-| `--kolibri-color-primary-variant` | `#0077b6`                                        | Alternative primary color              |
-| `--kolibri-color-secondary`       | `#ccebf7`                                        | Secondary color                        |
-| `--kolibri-color-danger`          | `#c0003c`                                        | Color for errors and dangerous actions |
-| `--kolibri-color-warning`         | `#c44931`                                        | Warning color                          |
-| `--kolibri-color-success`         | `#005c45`                                        | Success color                          |
-| `--kolibri-color-subtle`          | `#576164`                                        | Subtle accent color for borders        |
-| `--kolibri-color-light`           | `#ffffff`                                        | Light background color                 |
-| `--kolibri-color-text`            | `#202020`                                        | Text color                             |
-| `--kolibri-color-mute`            | `#f2f3f4`                                        | Color for disabled elements            |
-| `--kolibri-color-mute-variant`    | `#bec5c9`                                        | Alternate disabled color               |
+5. **Commit & Pull Request**
+   - Committe deine Änderungen und pushe sie in deinen Fork:
 
-### Usage
+     ```bash
+     git add .
+     git commit -m "feat(theme-bwst): <deine Änderung>"
+     git push origin <dein-branch>
+     ```
+
+   - Erstelle einen Pull Request auf <https://github.com/public-ui/kolibri/compare>
+
+**Hinweise:**
+
+- Bitte halte dich an die [Contributing Guidelines](../../../CONTRIBUTING.md).
+- Vor dem Commit immer `pnpm format` und `pnpm lint` ausführen.
+- Für größere Änderungen gerne vorab ein [Issue](https://github.com/public-ui/kolibri/issues/new) eröffnen.
+
+## Weitere Informationen
+
+- [Dokumentation](https://public-ui.github.io)
+- [Issues](https://github.com/public-ui/kolibri/issues)
+- [Pull Requests](https://github.com/public-ui/kolibri/pulls)
 
 Import and register the theme:
 
@@ -67,40 +105,3 @@ import { BWSt } from '@public-ui/theme-bwst';
 
 register(BWSt, defineCustomElements);
 ```
-
-For more details and options see [Getting started](https://public-ui.github.io/docs/get-started/first-steps#einbinden-in-ein-bestehendes-projekt).
-
-To adjust the design tokens, create a simple stylesheet that overrides the desired custom properties. You do not need to set every property—only those you want to change. Example:
-
-```css
-:root {
-	--kolibri-border-radius: 3px;
-	--kolibri-font-size: 18px;
-	--kolibri-spacing: 0.3rem;
-	--kolibri-color-primary: #cc006e;
-	--kolibri-color-primary-variant: #ff64b9;
-}
-```
-
-## Design Tokens
-
-The following tokens are defined in `src/global.scss` and serve as the base for colors, fonts, and spacing across all components.
-
-| Token                     | Default value                                                                | Meaning                      |
-| ------------------------- | ---------------------------------------------------------------------------- | ---------------------------- |
-| `--border-radius`         | `var(--kolibri-border-radius, 5px)`                                          | Default border radius        |
-| `--font-family`           | `var(--kolibri-font-family, Verdana, Arial, Calibri, Helvetica, sans-serif)` | Default font                 |
-| `--font-size`             | `var(--kolibri-font-size, #{to-rem(16)})`                                    | Base font size               |
-| `--spacing`               | `var(--kolibri-spacing, #{to-rem(4)})`                                       | Standard spacing             |
-| `--border-width`          | `var(--kolibri-border-width, 1px)`                                           | Border width                 |
-| `--color-primary`         | `var(--kolibri-color-primary, #004b76)`                                      | Primary accent color         |
-| `--color-primary-variant` | `var(--kolibri-color-primary-variant, #0077b6)`                              | Variant of the primary color |
-| `--color-secondary`       | `var(--kolibri-color-secondary, #ccebf7)`                                    | Secondary color              |
-| `--color-danger`          | `var(--kolibri-color-danger, #b4003c)`                                       | Error color                  |
-| `--color-warning`         | `var(--kolibri-color-warning, #c44931)`                                      | Warning color                |
-| `--color-success`         | `var(--kolibri-color-success, #005c45)`                                      | Success color                |
-| `--color-subtle`          | `var(--kolibri-color-subtle, #576164)`                                       | Subtle lines and borders     |
-| `--color-light`           | `var(--kolibri-color-light, #ffffff)`                                        | Light surface color          |
-| `--color-text`            | `var(--kolibri-color-text, #202020)`                                         | Standard text color          |
-| `--color-mute`            | `var(--kolibri-color-mute, #f2f3f4)`                                         | Muted color                  |
-| `--color-mute-variant`    | `var(--kolibri-color-mute-variant, #bec5c9)`                                 | Alternate muted color        |

package/assets/kolicons/style.css

@@ -1,23 +1,24 @@
-@font-face {
-  font-family: "kolicons";
-  src: url('kolicons.eot?t=1774619801488'); /* IE9*/
-  src: url('kolicons.eot?t=1774619801488#iefix') format('embedded-opentype'), /* IE6-IE8 */
-  url("kolicons.woff2?t=1774619801488") format("woff2"),
-  url("kolicons.woff?t=1774619801488") format("woff"),
-  url('kolicons.ttf?t=1774619801488') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
-  url('kolicons.svg?t=1774619801488#kolicons') format('svg'); /* iOS 4.1- */
-}
+  @font-face {
+    font-family: "kolicons";
+    src: url('kolicons.eot?t=1777363771076'); /* IE9*/
+    src: url('kolicons.eot?t=1777363771076#iefix') format('embedded-opentype'), /* IE6-IE8 */
+    url("kolicons.woff2?t=1777363771076") format("woff2"),
+    url("kolicons.woff?t=1777363771076") format("woff"),
+    url('kolicons.ttf?t=1777363771076') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
+    url('kolicons.svg?t=1777363771076#kolicons') format('svg'); /* iOS 4.1- */
+  }
 
-[class^="kolicon-"], [class*=" kolicon-"] {
-  font-family: 'kolicons';
-  font-style: normal;
-  font-weight: 400;
-  line-height: 1em;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
+@layer kol-component {
+  [class^="kolicon-"], [class*=" kolicon-"] {
+    font-family: 'kolicons';
+    font-style: normal;
+    font-weight: 400;
+    line-height: 1em;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
 
-.kolicon-alert-error::before { content: "\ea01"; }
+  .kolicon-alert-error::before { content: "\ea01"; }
 .kolicon-alert-info::before { content: "\ea02"; }
 .kolicon-alert-success::before { content: "\ea03"; }
 .kolicon-alert-warning::before { content: "\ea04"; }
@@ -45,3 +46,4 @@
 .kolicon-up::before { content: "\ea1a"; }
 .kolicon-version::before { content: "\ea1b"; }
 
+}