@public-ui/theme-default 3.0.1 → 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.
Files changed (6) hide show
  1. package/README.md +54 -31
  2. package/dist/index.cjs +1 -1
  3. package/dist/index.cjs.map +1 -1
  4. package/dist/index.mjs +1 -1
  5. package/dist/index.mjs.map +1 -1
  6. 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 (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:
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
- 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).
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
- 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:
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 |
package/dist/index.cjs CHANGED
@@ -1058,7 +1058,7 @@ var css_248z$x = "@layer kol-theme-component {\n .kol-alert {\n display: fle
1058
1058
 
1059
1059
  var css_248z$w = "@layer kol-theme-component {\n .kol-details {\n width: 100%;\n height: 100%;\n display: grid;\n }\n .kol-details__content.indented-text {\n border-left: 2px solid var(--color-primary-variant);\n padding: 0 calc(18rem / var(--kolibri-root-font-size, 16)) 0 calc(8rem / var(--kolibri-root-font-size, 16));\n margin-left: calc(-2rem / var(--kolibri-root-font-size, 16));\n width: 100%;\n margin: calc(4rem / var(--kolibri-root-font-size, 16)) 0 0 calc(10.4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-details__heading {\n margin: 0;\n }\n .kol-details__heading-button .kol-icon {\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n .kol-details__heading-button .kol-span__container {\n display: flex;\n text-align: left;\n gap: 0;\n }\n .kol-details__heading-button .kol-span__label {\n border-bottom-color: #000;\n }\n .kol-details__heading-button .kol-button:focus-within {\n border-radius: var(--border-radius);\n outline-offset: 2px;\n outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n transition: 200ms outline-offset linear;\n cursor: pointer;\n }\n}";
1060
1060
 
1061
- var css_248z$v = "@layer kol-theme-component {\n .kol-drawer__wrapper {\n box-shadow: 0 0 4px var(--color-subtle);\n }\n .kol-drawer__wrapper--left {\n animation: slideInLeft 0.4s forwards;\n }\n .kol-drawer__wrapper--left.kol-drawer__wrapper--is-closing {\n animation: slideOutLeft 0.4s forwards;\n }\n .kol-drawer__wrapper--right {\n animation: slideInRight 0.4s forwards;\n }\n .kol-drawer__wrapper--right.kol-drawer__wrapper--is-closing {\n animation: slideOutRight 0.4s forwards;\n }\n .kol-drawer__wrapper--top {\n animation: slideInTop 0.4s forwards;\n }\n .kol-drawer__wrapper--top.kol-drawer__wrapper--is-closing {\n animation: slideOutTop 0.4s forwards;\n }\n .kol-drawer__wrapper--bottom {\n animation: slideInBottom 0.4s forwards;\n }\n .kol-drawer__wrapper--bottom.kol-drawer__wrapper--is-closing {\n animation: slideOutBottom 0.4s forwards;\n }\n}\n@keyframes slideInLeft {\n from {\n transform: translateX(-100%);\n }\n to {\n transform: translateX(0);\n }\n}\n@keyframes slideInRight {\n from {\n transform: translateX(100%);\n }\n to {\n transform: translateX(0);\n }\n}\n@keyframes slideInTop {\n from {\n transform: translateY(-100%);\n }\n to {\n transform: translateY(0);\n }\n}\n@keyframes slideInBottom {\n from {\n transform: translateY(100%);\n }\n to {\n transform: translateY(0);\n }\n}\n@keyframes slideOutLeft {\n from {\n transform: translateX(0);\n }\n to {\n transform: translateX(-100%);\n }\n}\n@keyframes slideOutRight {\n from {\n transform: translateX(0);\n }\n to {\n transform: translateX(100%);\n }\n}\n@keyframes slideOutTop {\n from {\n transform: translateY(0);\n }\n to {\n transform: translateY(-100%);\n }\n}\n@keyframes slideOutBottom {\n from {\n transform: translateY(0);\n }\n to {\n transform: translateY(100%);\n }\n}";
1061
+ var css_248z$v = "@layer kol-theme-component {\n .kol-card {\n display: grid;\n width: 100%;\n height: 100%;\n background-color: var(--color-light);\n grid-template-rows: min-content 2fr min-content;\n box-shadow: 0 0 4px color-mix(in srgb, black 80%, var(--color-subtle));\n border-radius: var(--border-radius);\n }\n .kol-card__header {\n padding: calc(16rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16)) calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-card__content {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n overflow: hidden;\n }\n .kol-card__headline {\n line-height: 1.75;\n }\n .kol-drawer__wrapper {\n box-shadow: 0 0 4px var(--color-subtle);\n }\n .kol-drawer__wrapper--left {\n animation: slideInLeft 0.4s forwards;\n }\n .kol-drawer__wrapper--left.kol-drawer__wrapper--is-closing {\n animation: slideOutLeft 0.4s forwards;\n }\n .kol-drawer__wrapper--right {\n animation: slideInRight 0.4s forwards;\n }\n .kol-drawer__wrapper--right.kol-drawer__wrapper--is-closing {\n animation: slideOutRight 0.4s forwards;\n }\n .kol-drawer__wrapper--top {\n animation: slideInTop 0.4s forwards;\n }\n .kol-drawer__wrapper--top.kol-drawer__wrapper--is-closing {\n animation: slideOutTop 0.4s forwards;\n }\n .kol-drawer__wrapper--bottom {\n animation: slideInBottom 0.4s forwards;\n }\n .kol-drawer__wrapper--bottom.kol-drawer__wrapper--is-closing {\n animation: slideOutBottom 0.4s forwards;\n }\n .kol-card {\n border-radius: 0;\n }\n}\n@keyframes slideInLeft {\n from {\n transform: translateX(-100%);\n }\n to {\n transform: translateX(0);\n }\n}\n@keyframes slideInRight {\n from {\n transform: translateX(100%);\n }\n to {\n transform: translateX(0);\n }\n}\n@keyframes slideInTop {\n from {\n transform: translateY(-100%);\n }\n to {\n transform: translateY(0);\n }\n}\n@keyframes slideInBottom {\n from {\n transform: translateY(100%);\n }\n to {\n transform: translateY(0);\n }\n}\n@keyframes slideOutLeft {\n from {\n transform: translateX(0);\n }\n to {\n transform: translateX(-100%);\n }\n}\n@keyframes slideOutRight {\n from {\n transform: translateX(0);\n }\n to {\n transform: translateX(100%);\n }\n}\n@keyframes slideOutTop {\n from {\n transform: translateY(0);\n }\n to {\n transform: translateY(-100%);\n }\n}\n@keyframes slideOutBottom {\n from {\n transform: translateY(0);\n }\n to {\n transform: translateY(100%);\n }\n}";
1062
1062
 
1063
1063
  var css_248z$u = "@layer kol-theme-component {\n .kol-link {\n color: var(--color-primary);\n font-style: normal;\n font-weight: 400;\n }\n .kol-link:focus {\n outline: none;\n }\n .kol-link:visited {\n color: var(--visited);\n }\n .kol-link:focus .kol-link__text {\n border-radius: var(--border-radius);\n outline: var(--border-width) solid;\n position: relative;\n }\n .kol-link:is(:focus, :hover):not([aria-disabled], [disabled]) .kol-link__text .kol-span__label {\n text-decoration-thickness: 0.25em;\n }\n .kol-alert {\n display: flex;\n width: 100%;\n overflow: unset;\n background-color: var(--color-light);\n }\n .kol-alert--variant-msg {\n align-items: start;\n }\n .kol-alert--variant-card {\n border-radius: var(--border-radius);\n border: var(--border-width) solid var(--alert-accent-color);\n filter: drop-shadow(0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n flex-direction: column;\n }\n .kol-alert--type-default {\n --alert-accent-color: var(--color-subtle);\n }\n .kol-alert--type-error {\n --alert-accent-color: var(--color-danger);\n }\n .kol-alert--type-info {\n --alert-accent-color: var(--color-primary);\n }\n .kol-alert--type-success {\n --alert-accent-color: var(--color-success);\n }\n .kol-alert--type-warning {\n --alert-accent-color: var(--color-warning);\n }\n .kol-alert__container {\n display: flex;\n gap: 0.5em;\n place-items: center;\n }\n .kol-alert--variant-card .kol-alert__container {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n background-color: var(--alert-accent-color);\n }\n .kol-alert__container-content {\n display: grid;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--variant-card .kol-alert__container-content {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert__closer {\n place-self: center;\n }\n .kol-alert__closer .kol-button {\n border-radius: 50%;\n cursor: pointer;\n height: var(--a11y-min-size);\n width: var(--a11y-min-size);\n }\n .kol-alert--variant-msg .kol-alert__closer .kol-button {\n color: var(--alert-accent-color);\n }\n .kol-alert--variant-card .kol-alert__closer .kol-button {\n color: var(--color-light);\n }\n .kol-alert__closer .kol-icon {\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--variant-msg .kol-alert__heading {\n color: var(--alert-accent-color);\n padding-top: calc(--var-spacing / 2);\n }\n .kol-alert--variant-card .kol-alert__heading {\n width: 100%;\n color: var(--color-light);\n display: flex;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n }\n .kol-alert__icon {\n color: var(--color-light);\n padding: 0;\n }\n .kol-alert:not(.kol-alert--type-default) .kol-alert__icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--variant-msg .kol-alert__icon {\n color: var(--alert-accent-color);\n place-items: baseline;\n }\n .kol-alert--variant-card .kol-alert__icon {\n justify-self: right;\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--variant-card .kol-alert__content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-form__link {\n display: inline-block;\n }\n .kol-form__mandatory-fields-hint {\n border-left: 2px solid var(--color-primary-variant);\n padding: 0 calc(18rem / var(--kolibri-root-font-size, 16)) 0 calc(8rem / var(--kolibri-root-font-size, 16));\n margin-left: calc(-2rem / var(--kolibri-root-font-size, 16));\n width: 100%;\n }\n}";
1064
1064