@public-ui/theme-default 3.0.2-6ae0104cda0b7b19a5b0d6bbc5f990b9fe544fa0.0 → 3.0.2-ab502d4896d9763f93bb8cce1b07a1b2f8d04439.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/README.md +31 -54
  2. package/package.json +4 -4
package/README.md CHANGED
@@ -30,35 +30,35 @@ register(DEFAULT, defineCustomElements).then(() => {
30
30
 
31
31
  👉 [https://public-ui.github.io](https://public-ui.github.io)
32
32
 
33
- ## Usage
34
-
35
- The default theme is token based and works with minimal adjustments. It already contains all necessary styling and can
36
- be customized with design tokens using _CSS Custom Properties_.
37
-
38
- ### Variables
39
-
40
- | Variable | Default value | Meaning |
41
- | --------------------------------- | ------------------------------------------------ | -------------------------------------- |
42
- | `--kolibri-border-radius` | `5px` | Border radius for rounded elements |
43
- | `--kolibri-font-family` | `Verdana, Arial, Calibri, Helvetica, sans-serif` | Default font family |
44
- | `--kolibri-font-size` | `16px` | Base font size |
45
- | `--kolibri-spacing` | `0.25rem` | Base spacing between elements |
46
- | `--kolibri-border-width` | `1px` | Border width |
47
- | `--kolibri-color-primary` | `#004b76` | Primary color |
48
- | `--kolibri-color-primary-variant` | `#0077b6` | Alternative primary color |
49
- | `--kolibri-color-secondary` | `#ccebf7` | Secondary color |
50
- | `--kolibri-color-danger` | `#c0003c` | Color for errors and dangerous actions |
51
- | `--kolibri-color-warning` | `#c44931` | Warning color |
52
- | `--kolibri-color-success` | `#005c45` | Success color |
53
- | `--kolibri-color-subtle` | `#576164` | Subtle accent color for borders |
54
- | `--kolibri-color-light` | `#ffffff` | Light background color |
55
- | `--kolibri-color-text` | `#202020` | Text color |
56
- | `--kolibri-color-mute` | `#f2f3f4` | Color for disabled elements |
57
- | `--kolibri-color-mute-variant` | `#bec5c9` | Alternate disabled color |
58
-
59
- ### Usage
60
-
61
- Import and register the theme:
33
+ ## Usage (DE)
34
+
35
+ 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
36
+ über Design Tokens, in Form von _CSS Custom Properties_ an das eigene Design angepasst werden.
37
+
38
+ ### Variablen
39
+
40
+ | Variable | Standard-Wert | Bedeutung |
41
+ | --------------------------------- | ------------------------------------------------ | -------------------------------------------------- |
42
+ | `--kolibri-border-radius` | `5px` | Border-Radius für abgerundete Elemente |
43
+ | `--kolibri-font-family` | `Verdana, Arial, Calibri, Helvetica, sans-serif` | Allgemeine Schriftart |
44
+ | `--kolibri-font-size` | `16px` | Allgemeine Schriftgröße |
45
+ | `--kolibri-spacing` | `0.25rem` | Allgemeiner Abstand zwischen Elementen |
46
+ | `--kolibri-border-width` | `1px` | Allgemeine Rahmen-Breite |
47
+ | `--kolibri-color-primary` | `#004b76` | Primärfarbe |
48
+ | `--kolibri-color-primary-variant` | `#0077b6` | Alternative Variante der Primärfarbe |
49
+ | `--kolibri-color-secondary` | `#ccebf7` | Sekundärfarbe |
50
+ | `--kolibri-color-danger` | `#c0003c` | Farbe für Fehlermeldungen und gefährliche Aktionen |
51
+ | `--kolibri-color-warning` | `#c44931` | Farbe für Warnungen |
52
+ | `--kolibri-color-success` | `#005c45` | Farbe für Erfolgsmeldungen |
53
+ | `--kolibri-color-subtle` | `#576164` | Farbe für feine Akzente wie z.B. Rahmen |
54
+ | `--kolibri-color-light` | `#ffffff` | Helle Farbe für z.B. Hintergründe |
55
+ | `--kolibri-color-text` | `#202020` | Textfarbe |
56
+ | `--kolibri-color-mute` | `#f2f3f4` | Farbe für deaktivierte Elemente |
57
+ | `--kolibri-color-mute-variant` | `#bec5c9` | Alternative Farbe für deaktivierte Elemente |
58
+
59
+ ### Verwendung
60
+
61
+ Theme importieren und registrieren:
62
62
 
63
63
  ```js
64
64
  import { register } from '@public-ui/components';
@@ -68,9 +68,9 @@ import { DEFAULT } from '@public-ui/theme-default';
68
68
  register(DEFAULT, defineCustomElements);
69
69
  ```
70
70
 
71
- For more details and options see [Getting started](https://public-ui.github.io/docs/get-started/first-steps#einbinden-in-ein-bestehendes-projekt).
71
+ Für mehr Details und weitere Optionen siehe [Erste Schritte](https://public-ui.github.io/docs/get-started/first-steps#einbinden-in-ein-bestehendes-projekt).
72
72
 
73
- 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:
73
+ 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:
74
74
 
75
75
  ```css
76
76
  :root {
@@ -81,26 +81,3 @@ To adjust the design tokens, create a simple stylesheet that overrides the desir
81
81
  --kolibri-color-primary-variant: #ff64b9;
82
82
  }
83
83
  ```
84
-
85
- ## Design Tokens
86
-
87
- The following tokens are defined in `src/global.scss` and serve as the base for colors, fonts, and spacing across all components.
88
-
89
- | Token | Default value | Meaning |
90
- | ------------------------- | ---------------------------------------------------------------------------- | ---------------------------- |
91
- | `--border-radius` | `var(--kolibri-border-radius, 5px)` | Default border radius |
92
- | `--font-family` | `var(--kolibri-font-family, Verdana, Arial, Calibri, Helvetica, sans-serif)` | Default font |
93
- | `--font-size` | `var(--kolibri-font-size, #{rem(16)})` | Base font size |
94
- | `--spacing` | `var(--kolibri-spacing, #{rem(4)})` | Standard spacing |
95
- | `--border-width` | `var(--kolibri-border-width, 1px)` | Border width |
96
- | `--color-primary` | `var(--kolibri-color-primary, #004b76)` | Primary accent color |
97
- | `--color-primary-variant` | `var(--kolibri-color-primary-variant, #0077b6)` | Variant of the primary color |
98
- | `--color-secondary` | `var(--kolibri-color-secondary, #ccebf7)` | Secondary color |
99
- | `--color-danger` | `var(--kolibri-color-danger, #b4003c)` | Error color |
100
- | `--color-warning` | `var(--kolibri-color-warning, #c44931)` | Warning color |
101
- | `--color-success` | `var(--kolibri-color-success, #005c45)` | Success color |
102
- | `--color-subtle` | `var(--kolibri-color-subtle, #576164)` | Subtle lines and borders |
103
- | `--color-light` | `var(--kolibri-color-light, #ffffff)` | Light surface color |
104
- | `--color-text` | `var(--kolibri-color-text, #202020)` | Standard text color |
105
- | `--color-mute` | `var(--kolibri-color-mute, #f2f3f4)` | Muted color |
106
- | `--color-mute-variant` | `var(--kolibri-color-mute-variant, #bec5c9)` | Alternate muted color |
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@public-ui/theme-default",
3
- "version": "3.0.2-6ae0104cda0b7b19a5b0d6bbc5f990b9fe544fa0.0",
3
+ "version": "3.0.2-ab502d4896d9763f93bb8cce1b07a1b2f8d04439.0",
4
4
  "license": "EUPL-1.2",
5
5
  "homepage": "https://public-ui.github.io",
6
6
  "repository": {
@@ -63,11 +63,11 @@
63
63
  "stylelint-scss": "6.12.1",
64
64
  "typescript": "5.8.3",
65
65
  "unbuild": "3.5.0",
66
- "@public-ui/components": "3.0.2-6ae0104cda0b7b19a5b0d6bbc5f990b9fe544fa0.0",
67
- "@public-ui/visual-tests": "3.0.2-6ae0104cda0b7b19a5b0d6bbc5f990b9fe544fa0.0"
66
+ "@public-ui/components": "3.0.2-ab502d4896d9763f93bb8cce1b07a1b2f8d04439.0",
67
+ "@public-ui/visual-tests": "3.0.2-ab502d4896d9763f93bb8cce1b07a1b2f8d04439.0"
68
68
  },
69
69
  "peerDependencies": {
70
- "@public-ui/components": "3.0.2-6ae0104cda0b7b19a5b0d6bbc5f990b9fe544fa0.0"
70
+ "@public-ui/components": "3.0.2-ab502d4896d9763f93bb8cce1b07a1b2f8d04439.0"
71
71
  },
72
72
  "exports": {
73
73
  ".": {