@public-ui/theme-default 4.1.4-rc.1 → 4.1.4-rc.3

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 (7) hide show
  1. package/README.md +75 -49
  2. package/assets/kolicons/kolicons.eot +0 -0
  3. package/assets/kolicons/kolicons.ttf +0 -0
  4. package/assets/kolicons/kolicons.woff +0 -0
  5. package/assets/kolicons/kolicons.woff2 +0 -0
  6. package/assets/kolicons/style.css +9 -9
  7. package/package.json +5 -5
package/README.md CHANGED
@@ -1,6 +1,6 @@
1
- # Public UI - Default-Theme
1
+ # Public UI – Default Theme
2
2
 
3
- [![npm](https://img.shields.io/npm/v/@public-ui/theme-default)](https://www.npmjs.com/package/@public-ui/components)
3
+ [![npm](https://img.shields.io/npm/v/@public-ui/theme-default)](https://www.npmjs.com/package/@public-ui/theme-default)
4
4
  [![license](https://img.shields.io/npm/l/@public-ui/theme-default)](https://github.com/public-ui/kolibri/blob/main/LICENSE)
5
5
  [![downloads](https://img.shields.io/npm/dt/@public-ui/theme-default)](https://www.npmjs.com/package/@public-ui/theme-default)
6
6
  [![issues](https://img.shields.io/github/issues/public-ui/kolibri)](https://github.com/public-ui/kolibri/issues)
@@ -8,9 +8,15 @@
8
8
  [![size](https://img.shields.io/bundlephobia/min/@public-ui/theme-default)](https://bundlephobia.com/result?p=@public-ui/theme-default)
9
9
  ![contributors](https://img.shields.io/github/contributors/public-ui/kolibri)
10
10
 
11
- This is the default 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.
11
+ The Default Theme is the standard theme of the [Public UI Web Component Library](https://public-ui.github.io) and can be customized using CSS Custom Properties (Design Tokens).
12
12
 
13
- ## Integration in React
13
+ ## Installation & Integration
14
+
15
+ ```bash
16
+ npm install @public-ui/components @public-ui/theme-default
17
+ ```
18
+
19
+ **React-Beispiel:**
14
20
 
15
21
  ```tsx
16
22
  import { register } from '@public-ui/components';
@@ -18,7 +24,7 @@ import { defineCustomElements } from '@public-ui/components/loader';
18
24
  import { DEFAULT } from '@public-ui/theme-default';
19
25
 
20
26
  register(DEFAULT, defineCustomElements).then(() => {
21
- ReactDOM.createRoot(document.getElementById('root')!).render(
27
+ ReactDOM.createRoot(document.getElementById('root')).render(
22
28
  <React.StrictMode>
23
29
  <App />
24
30
  </React.StrictMode>,
@@ -26,65 +32,67 @@ register(DEFAULT, defineCustomElements).then(() => {
26
32
  });
27
33
  ```
28
34
 
29
- ## Full documentation
35
+ For more details: [Getting started](https://public-ui.github.io/docs/get-started/first-steps)
30
36
 
31
- 👉 [https://public-ui.github.io](https://public-ui.github.io)
37
+ ## Contributing to the Theme
32
38
 
33
- ## Usage
39
+ Want to improve or customize the Default Theme? Here’s how:
34
40
 
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_.
41
+ 1. **Install pnpm**
42
+ - [pnpm](https://pnpm.io/) is required for development. Install pnpm globally if you don’t have it yet:
37
43
 
38
- ### Variables
44
+ ```bash
45
+ npm install -g pnpm
46
+ ```
39
47
 
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 |
48
+ 2. **Fork the repository**
49
+ - Click [Fork](https://github.com/public-ui/kolibri) on GitHub to create your own fork.
58
50
 
59
- ### Usage
51
+ 3. **Local setup**
52
+ - Clone your fork:
60
53
 
61
- Import and register the theme:
54
+ ```bash
55
+ git clone https://github.com/<YOUR_GITHUB_USER>/kolibri.git
56
+ cd kolibri/lib/packages/themes/default
57
+ ```
62
58
 
63
- ```js
64
- import { register } from '@public-ui/components';
65
- import { defineCustomElements } from '@public-ui/components/loader';
66
- import { DEFAULT } from '@public-ui/theme-default';
59
+ - Install dependencies in the monorepo root:
67
60
 
68
- register(DEFAULT, defineCustomElements);
69
- ```
61
+ ```bash
62
+ pnpm i
63
+ pnpm build
64
+ ```
70
65
 
71
- For more details and options see [Getting started](https://public-ui.github.io/docs/get-started/first-steps#einbinden-in-ein-bestehendes-projekt).
66
+ 4. **Start development**
67
+ - Switch to the theme directory and start the watch mode:
72
68
 
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:
69
+ ```bash
70
+ cd kolibri/lib/packages/themes/default
71
+ pnpm start
72
+ ```
74
73
 
75
- ```css
76
- :root {
77
- --kolibri-border-radius: 3px;
78
- --kolibri-font-size: 18px;
79
- --kolibri-spacing: 0.3rem;
80
- --kolibri-color-primary: #cc006e;
81
- --kolibri-color-primary-variant: #ff64b9;
82
- }
83
- ```
74
+ - Edit the files in `src/` as needed.
75
+
76
+ 5. **Commit & Pull Request**
77
+ - Commit your changes and push them to your fork:
78
+
79
+ ```bash
80
+ git add .
81
+ git commit -m "feat(theme-default): <your change>"
82
+ git push origin <your-branch>
83
+ ```
84
+
85
+ - Create a Pull Request at <https://github.com/public-ui/kolibri/compare>
86
+
87
+ **Notes:**
88
+
89
+ - Please follow the [Contributing Guidelines](../../../CONTRIBUTING.md).
90
+ - Always run `pnpm format` and `pnpm lint` before committing.
91
+ - For larger changes, feel free to open an [issue](https://github.com/public-ui/kolibri/issues/new) first.
84
92
 
85
93
  ## Design Tokens
86
94
 
87
- The following tokens are defined in `src/global.scss` and serve as the base for colors, fonts, and spacing across all components.
95
+ The following tokens are defined in `src/global.scss` and serve as the base for colors, fonts, and spacing across all components. You can override them via CSS:
88
96
 
89
97
  | Token | Default value | Meaning |
90
98
  | ------------------------- | ---------------------------------------------------------------------------- | ---------------------------- |
@@ -104,3 +112,21 @@ The following tokens are defined in `src/global.scss` and serve as the base for
104
112
  | `--color-text` | `var(--kolibri-color-text, #202020)` | Standard text color |
105
113
  | `--color-mute` | `var(--kolibri-color-mute, #f2f3f4)` | Muted color |
106
114
  | `--color-mute-variant` | `var(--kolibri-color-mute-variant, #bec5c9)` | Alternate muted color |
115
+
116
+ To adjust the design tokens, create a stylesheet that overrides the desired custom properties. Example:
117
+
118
+ ```css
119
+ :root {
120
+ --kolibri-border-radius: 3px;
121
+ --kolibri-font-size: 18px;
122
+ --kolibri-spacing: 0.3rem;
123
+ --kolibri-color-primary: #cc006e;
124
+ --kolibri-color-primary-variant: #ff64b9;
125
+ }
126
+ ```
127
+
128
+ ## More Information
129
+
130
+ - [Documentation](https://public-ui.github.io)
131
+ - [Issues](https://github.com/public-ui/kolibri/issues)
132
+ - [Pull Requests](https://github.com/public-ui/kolibri/pulls)
package/assets/kolicons/kolicons.eot CHANGED
Binary file
package/assets/kolicons/kolicons.ttf CHANGED
Binary file
package/assets/kolicons/kolicons.woff CHANGED
Binary file
package/assets/kolicons/kolicons.woff2 CHANGED
Binary file
package/assets/kolicons/style.css CHANGED
@@ -1,12 +1,12 @@
1
- @font-face {
2
- font-family: "kolicons";
3
- src: url('kolicons.eot?t=1777029041506'); /* IE9*/
4
- src: url('kolicons.eot?t=1777029041506#iefix') format('embedded-opentype'), /* IE6-IE8 */
5
- url("kolicons.woff2?t=1777029041506") format("woff2"),
6
- url("kolicons.woff?t=1777029041506") format("woff"),
7
- url('kolicons.ttf?t=1777029041506') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
8
- url('kolicons.svg?t=1777029041506#kolicons') format('svg'); /* iOS 4.1- */
9
- }
1
+ @font-face {
2
+ font-family: "kolicons";
3
+ src: url('kolicons.eot?t=1777089109826'); /* IE9*/
4
+ src: url('kolicons.eot?t=1777089109826#iefix') format('embedded-opentype'), /* IE6-IE8 */
5
+ url("kolicons.woff2?t=1777089109826") format("woff2"),
6
+ url("kolicons.woff?t=1777089109826") format("woff"),
7
+ url('kolicons.ttf?t=1777089109826') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
8
+ url('kolicons.svg?t=1777089109826#kolicons') format('svg'); /* iOS 4.1- */
9
+ }
10
10
 
11
11
  @layer kol-component {
12
12
  [class^="kolicon-"], [class*=" kolicon-"] {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@public-ui/theme-default",
3
- "version": "4.1.4-rc.1",
3
+ "version": "4.1.4-rc.3",
4
4
  "license": "EUPL-1.2",
5
5
  "homepage": "https://public-ui.github.io",
6
6
  "repository": {
@@ -65,12 +65,12 @@
65
65
  "stylelint": "17.9.0",
66
66
  "typescript": "5.9.3",
67
67
  "unbuild": "3.6.1",
68
- "@public-ui/components": "4.1.4-rc.1",
69
- "@public-ui/visual-tests": "4.1.4-rc.1",
70
- "@public-ui/stylelint-rules": "4.1.2-rc.1"
68
+ "@public-ui/stylelint-rules": "4.1.2-rc.1",
69
+ "@public-ui/visual-tests": "4.1.4-rc.3",
70
+ "@public-ui/components": "4.1.4-rc.3"
71
71
  },
72
72
  "peerDependencies": {
73
- "@public-ui/components": "4.1.4-rc.1"
73
+ "@public-ui/components": "4.1.4-rc.3"
74
74
  },
75
75
  "exports": {
76
76
  ".": {