@public-ui/themes 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.
- package/README.md +16 -14
- package/dist/index.cjs +1 -1
- package/dist/index.cjs.map +1 -1
- package/dist/index.mjs +1 -1
- package/dist/index.mjs.map +1 -1
- package/package.json +3 -3
package/README.md
CHANGED
|
@@ -19,9 +19,9 @@ More about the **project** can be found in the [documentation](https://public-ui
|
|
|
19
19
|
You can install the KoliBri themes with `npm`, `pnpm` or `yarn`:
|
|
20
20
|
|
|
21
21
|
```bash
|
|
22
|
-
npm i
|
|
23
|
-
pnpm i
|
|
24
|
-
yarn add
|
|
22
|
+
npm i @public-ui/themes
|
|
23
|
+
pnpm i @public-ui/themes
|
|
24
|
+
yarn add @public-ui/themes
|
|
25
25
|
```
|
|
26
26
|
|
|
27
27
|
## Usage
|
|
@@ -34,26 +34,28 @@ import { defineCustomElements } from '@public-ui/components/dist/loader';
|
|
|
34
34
|
import { DEFAULT, ECL_EC, ECL_EU } from '@public-ui/themes';
|
|
35
35
|
|
|
36
36
|
register(
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
37
|
+
DEFAULT,
|
|
38
|
+
// or provide an array to register multiple themes:
|
|
39
|
+
// [DEFAULT, ECL_EC, ECL_EU]
|
|
40
|
+
defineCustomElements,
|
|
41
41
|
)
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
42
|
+
.then(() => {
|
|
43
|
+
/* KoliBri ready */
|
|
44
|
+
})
|
|
45
|
+
.catch((error) => {
|
|
46
|
+
/* Handle errors */
|
|
47
|
+
});
|
|
48
48
|
```
|
|
49
49
|
|
|
50
|
+
Override theme tokens in your own stylesheet as needed. The [default theme README](./default/README.md) lists all available variables.
|
|
51
|
+
|
|
50
52
|
## Important settings
|
|
51
53
|
|
|
52
54
|
### Usage of pnpm
|
|
53
55
|
|
|
54
56
|
We use **pnpm** as package manager and there is a tiny typing issue with the default typescript setup.
|
|
55
57
|
|
|
56
|
-
**What
|
|
58
|
+
**What do we know?**
|
|
57
59
|
|
|
58
60
|
This seems to be a general issue:
|
|
59
61
|
|
package/dist/index.cjs
CHANGED
|
@@ -1058,7 +1058,7 @@ var css_248z$1S = "@layer kol-theme-component {\n .kol-alert {\n display: fl
|
|
|
1058
1058
|
|
|
1059
1059
|
var css_248z$1R = "@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$1Q = "@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$1Q = "@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$1P = "@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
|
|