@public-ui/theme-default 3.0.1-rc.0 → 3.0.2-6ae0104cda0b7b19a5b0d6bbc5f990b9fe544fa0.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.
- package/README.md +54 -31
- package/dist/index.cjs +67 -69
- package/dist/index.cjs.map +1 -1
- package/dist/index.mjs +67 -69
- package/dist/index.mjs.map +1 -1
- package/package.json +19 -17
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
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
###
|
|
39
|
-
|
|
40
|
-
| Variable |
|
|
41
|
-
| --------------------------------- | ------------------------------------------------ |
|
|
42
|
-
| `--kolibri-border-radius` | `5px` | Border
|
|
43
|
-
| `--kolibri-font-family` | `Verdana, Arial, Calibri, Helvetica, sans-serif` |
|
|
44
|
-
| `--kolibri-font-size` | `16px` |
|
|
45
|
-
| `--kolibri-spacing` | `0.25rem` |
|
|
46
|
-
| `--kolibri-border-width` | `1px` |
|
|
47
|
-
| `--kolibri-color-primary` | `#004b76` |
|
|
48
|
-
| `--kolibri-color-primary-variant` | `#0077b6` | Alternative
|
|
49
|
-
| `--kolibri-color-secondary` | `#ccebf7` |
|
|
50
|
-
| `--kolibri-color-danger` | `#c0003c` |
|
|
51
|
-
| `--kolibri-color-warning` | `#c44931` |
|
|
52
|
-
| `--kolibri-color-success` | `#005c45` |
|
|
53
|
-
| `--kolibri-color-subtle` | `#576164` |
|
|
54
|
-
| `--kolibri-color-light` | `#ffffff` |
|
|
55
|
-
| `--kolibri-color-text` | `#202020` |
|
|
56
|
-
| `--kolibri-color-mute` | `#f2f3f4` |
|
|
57
|
-
| `--kolibri-color-mute-variant` | `#bec5c9` |
|
|
58
|
-
|
|
59
|
-
###
|
|
60
|
-
|
|
61
|
-
|
|
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:
|
|
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
|
-
|
|
71
|
+
For more details and options see [Getting started](https://public-ui.github.io/docs/get-started/first-steps#einbinden-in-ein-bestehendes-projekt).
|
|
72
72
|
|
|
73
|
-
|
|
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:
|
|
74
74
|
|
|
75
75
|
```css
|
|
76
76
|
:root {
|
|
@@ -81,3 +81,26 @@ Um die _Design Tokens_ anzupassen, reicht ein einfaches Stylesheet, das die gew
|
|
|
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 |
|