@public-ui/theme-ecl 4.1.4-rc.0 → 4.1.4-rc.2

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 (18) hide show
  1. package/README.md +79 -194
  2. package/assets/ecl-icons/ecl-icons.eot +0 -0
  3. package/assets/ecl-icons/ecl-icons.json +93 -0
  4. package/assets/ecl-icons/ecl-icons.svg +285 -0
  5. package/assets/ecl-icons/ecl-icons.ttf +0 -0
  6. package/assets/ecl-icons/ecl-icons.woff +0 -0
  7. package/assets/ecl-icons/ecl-icons.woff2 +0 -0
  8. package/assets/ecl-icons/style.css +113 -0
  9. package/assets/kolicons/kolicons.eot +0 -0
  10. package/assets/kolicons/kolicons.ttf +0 -0
  11. package/assets/kolicons/kolicons.woff +0 -0
  12. package/assets/kolicons/kolicons.woff2 +0 -0
  13. package/assets/kolicons/style.css +9 -9
  14. package/dist/index.cjs +65 -59
  15. package/dist/index.cjs.map +1 -1
  16. package/dist/index.mjs +65 -59
  17. package/dist/index.mjs.map +1 -1
  18. package/package.json +16 -12
package/README.md CHANGED
@@ -1,6 +1,6 @@
1
- # KoliBri - ECL-Themes (Draft)
1
+ # Public UI – ECL Theme
2
2
 
3
- [![npm](https://img.shields.io/npm/v/@public-ui/theme-ecl)](https://www.npmjs.com/package/@public-ui/components)
3
+ [![npm](https://img.shields.io/npm/v/@public-ui/theme-ecl)](https://www.npmjs.com/package/@public-ui/theme-ecl)
4
4
  [![license](https://img.shields.io/npm/l/@public-ui/theme-ecl)](https://github.com/public-ui/kolibri/blob/main/LICENSE)
5
5
  [![downloads](https://img.shields.io/npm/dt/@public-ui/theme-ecl)](https://www.npmjs.com/package/@public-ui/theme-ecl)
6
6
  [![issues](https://img.shields.io/github/issues/public-ui/kolibri)](https://github.com/public-ui/kolibri/issues)
@@ -8,206 +8,91 @@
8
8
  [![size](https://img.shields.io/bundlephobia/min/@public-ui/theme-ecl)](https://bundlephobia.com/result?p=@public-ui/theme-ecl)
9
9
  ![contributors](https://img.shields.io/github/contributors/public-ui/kolibri)
10
10
 
11
- ## Motivation
11
+ The ECL Theme provides a design based on the style guides of the European Commission (EC) and European Union (EU) for the [Public UI Web Component Library](https://public-ui.github.io).
12
12
 
13
- The ECL themes provide styling according to the Styleguides of the European Commission and European Union for KoliBri-Components.
14
-
15
- ## Installation
16
-
17
- You can install the KoliBri themes with `npm`, `pnpm` or `yarn`:
13
+ ## Installation & Integration
18
14
 
19
15
  ```bash
20
- npm i @public-ui/theme-ecl
21
- pnpm i @public-ui/theme-ecl
22
- yarn add @public-ui/theme-ecl
16
+ npm install @public-ui/components @public-ui/theme-ecl
23
17
  ```
24
18
 
25
- ## Usage
26
-
27
- Register the theme like this:
19
+ **React Example:**
28
20
 
29
21
  ```tsx
30
22
  import { register } from '@public-ui/components';
31
23
  import { defineCustomElements } from '@public-ui/components/loader';
32
- import {
33
- ECL_EC, // or ECL_EU
34
- } from '@public-ui/theme-ecl';
35
-
36
- register(
37
- ECL_EC, // or ECL_EU
38
- defineCustomElements,
39
- )
40
- .then(() => {
41
- /* KoliBri ready */
42
- })
43
- .catch((error) => {
44
- /* Handle errors */
45
- });
24
+ import { ECL_EC, ECL_EU } from '@public-ui/theme-ecl';
25
+
26
+ register(ECL_EC, defineCustomElements).then(() => {
27
+ ReactDOM.createRoot(document.getElementById('root')).render(
28
+ <React.StrictMode>
29
+ <App />
30
+ </React.StrictMode>,
31
+ );
32
+ });
33
+ // Alternativ: register(ECL_EU, defineCustomElements)
46
34
  ```
47
35
 
48
- ## Design Tokens
49
-
50
- The token values are read from `src/ecl-ec/global.scss` and `src/ecl-eu/global.scss` and control the colors, fonts and spacing of the components.
51
-
52
- ### ECL EC Theme
53
-
54
- | Token | Default value | Meaning |
55
- | ----------------------- | --------------------- | ----------------------- |
56
- | `--color-blue` | `#004494` | Primary blue tone |
57
- | `--color-yellow` | `#ffd617` | Primary yellow tone |
58
- | `--color-grey` | `#404040` | Base gray |
59
- | `--color-blue-130` | `#002f67` | Darker blue shade |
60
- | `--color-blue-120` | `#003776` | Darker blue shade |
61
- | `--color-blue-110` | `#003d84` | Darker blue shade |
62
- | `--color-blue-100` | `var(--color-blue)` | Base blue |
63
- | `--color-blue-75` | `#4073af` | Lighter blue shade |
64
- | `--color-blue-50` | `#bfd0e4` | Very light blue shade |
65
- | `--color-blue-25` | `#bfd0e4` | Very light blue shade |
66
- | `--color-blue-5` | `#f2f5f9` | Almost white |
67
- | `--color-yellow-120` | `#f8ae21` | Darker yellow shade |
68
- | `--color-yellow-110` | `#fbc11d` | Darker yellow shade |
69
- | `--color-yellow-100` | `var(--color-yellow)` | Base yellow |
70
- | `--color-yellow-75` | `#ffde39` | Lighter yellow shade |
71
- | `--color-yellow-50` | `#ffe879` | Lighter yellow shade |
72
- | `--color-yellow-25` | `#fff4bb` | Very light yellow shade |
73
- | `--color-grey-100` | `var(--color-grey)` | Base gray |
74
- | `--color-grey-75` | `#707070` | Medium gray |
75
- | `--color-grey-50` | `#9f9f9f` | Light gray |
76
- | `--color-grey-25` | `#cfcfcf` | Light gray |
77
- | `--color-grey-20` | `#d9d9d9` | Very light gray |
78
- | `--color-grey-15` | `#e3e3e3` | Very light gray |
79
- | `--color-grey-10` | `#ebebeb` | Very light gray |
80
- | `--color-grey-5` | `#f5f5f5` | Almost white |
81
- | `--color-grey-3` | `#f9f9f9` | Almost white |
82
- | `--color-blue-n` | `#006fb4` | Additional blue tone |
83
- | `--color-orange` | `#f29527` | Orange for notices |
84
- | `--color-green` | `#467a39` | Green for success |
85
- | `--color-red` | `#da2131` | Red for errors |
86
- | `--color-red-1xx` | `#981722` | Dark red tone |
87
- | `--color-black` | `#000` | Black |
88
- | `--color-white` | `#fff` | White |
89
- | `--font-family` | `Arial, sans-serif` | Default font |
90
- | `--font-size` | `#{to-rem(16)}` | Base font size |
91
- | `--font-weight` | `400` | Regular font weight |
92
- | `--font-weight-bold` | `600` | Bold font |
93
- | `--line-height-regular` | `1.5` | Line height text |
94
- | `--line-height-heading` | `1.2` | Line height headings |
95
- | `--spacing-4xl` | `#{to-rem(64)}` | Largest spacing |
96
- | `--spacing-3xl` | `#{to-rem(48)}` | Very large spacing |
97
- | `--spacing-2xl` | `#{to-rem(40)}` | Very large spacing |
98
- | `--spacing-xl` | `#{to-rem(32)}` | Large spacing |
99
- | `--spacing-l` | `#{to-rem(24)}` | Large spacing |
100
- | `--spacing-m` | `#{to-rem(16)}` | Standard spacing |
101
- | `--spacing-s` | `#{to-rem(12)}` | Small spacing |
102
- | `--spacing-xs` | `#{to-rem(8)}` | Very small spacing |
103
- | `--spacing-2xs` | `#{to-rem(4)}` | Tiny spacing |
104
-
105
- ### ECL EU Theme
106
-
107
- | Token | Default value | Meaning |
108
- | ------------------------- | ------------------- | ----------------------- |
109
- | `--color-blue` | `#0e47cb` | Primary blue tone |
110
- | `--color-blue-140` | `#082b7a` | Very dark blue shade |
111
- | `--color-blue-130` | `#082b7a` | Very dark blue shade |
112
- | `--color-blue-120` | `#0b39a2` | Darker blue shade |
113
- | `--color-blue-110` | `#0d40b7` | Darker blue shade |
114
- | `--color-blue-100` | `#0e47cb` | Base blue |
115
- | `--color-blue-80` | `#3e6cd5` | Lighter blue shade |
116
- | `--color-blue-60` | `#6e91e0` | Lighter blue shade |
117
- | `--color-blue-40` | `#9fb5ea` | Very light blue shade |
118
- | `--color-blue-20` | `#cfdaf5` | Very light blue shade |
119
- | `--color-blue-10` | `#e7edfa` | Very light blue shade |
120
- | `--color-blue-5` | `#f3f6fc` | Almost white |
121
- | `--color-yellow` | `#ffcc00` | Primary yellow tone |
122
- | `--color-yellow-140` | `#997a00` | Very dark yellow shade |
123
- | `--color-yellow-130` | `#b38f00` | Very dark yellow shade |
124
- | `--color-yellow-120` | `#cca300` | Darker yellow shade |
125
- | `--color-yellow-110` | `#e6b800` | Darker yellow shade |
126
- | `--color-yellow-100` | `#ffcc00` | Base yellow |
127
- | `--color-yellow-80` | `#ffd633` | Lighter yellow shade |
128
- | `--color-yellow-60` | `#ffe066` | Lighter yellow shade |
129
- | `--color-yellow-40` | `#ffeb99` | Very light yellow shade |
130
- | `--color-yellow-20` | `#fff5cc` | Very light yellow shade |
131
- | `--color-yellow-10` | `#fffae6` | Very light yellow shade |
132
- | `--color-yellow-5` | `#fffcf2` | Almost white |
133
- | `--color-grey` | `#262b38` | Dark gray |
134
- | `--color-grey-140` | `#171a22` | Very dark gray |
135
- | `--color-grey-130` | `#1b1e27` | Very dark gray |
136
- | `--color-grey-120` | `#1e222d` | Darker gray |
137
- | `--color-grey-110` | `#222732` | Darker gray |
138
- | `--color-grey-100` | `#262b38` | Base gray |
139
- | `--color-grey-80` | `#515560` | Medium gray |
140
- | `--color-grey-75` | `#515560` | Medium gray |
141
- | `--color-grey-60` | `#7d8088` | Light gray |
142
- | `--color-grey-40` | `#a8aaaf` | Light gray |
143
- | `--color-grey-20` | `#d4d5d7` | Very light gray |
144
- | `--color-grey-10` | `#e9eaeb` | Very light gray |
145
- | `--color-grey-5` | `#f4f5f5` | Almost white |
146
- | `--color-grey-3` | `#f9f9f9` | Almost white |
147
- | `--color-orange` | `#ff6200` | Orange tone |
148
- | `--color-orange-140` | `#993b00` | Very dark orange |
149
- | `--color-orange-130` | `#b34500` | Very dark orange |
150
- | `--color-orange-120` | `#cc4e00` | Darker orange |
151
- | `--color-orange-110` | `#e65800` | Darker orange |
152
- | `--color-orange-100` | `#e65800` | Base orange |
153
- | `--color-orange-80` | `#ff8133` | Light orange |
154
- | `--color-orange-60` | `#ff914d` | Light orange |
155
- | `--color-orange-40` | `#ffb180` | Very light orange |
156
- | `--color-orange-20` | `#ffd0b3` | Very light orange |
157
- | `--color-orange-10` | `#ffefe6` | Very light orange |
158
- | `--color-orange-5` | `#fff7f2` | Almost white |
159
- | `--color-green` | `#00c991` | Green for success |
160
- | `--color-green-140` | `#007957` | Very dark green |
161
- | `--color-green-130` | `#008d66` | Very dark green |
162
- | `--color-green-120` | `#008d66` | Darker green |
163
- | `--color-green-110` | `#00b583` | Darker green |
164
- | `--color-green-100` | `#00c991` | Base green |
165
- | `--color-green-80` | `#00c991` | Light green |
166
- | `--color-green-60` | `#66dfbd` | Light green |
167
- | `--color-green-40` | `#99e9d3` | Very light green |
168
- | `--color-green-20` | `#ccf4e9` | Very light green |
169
- | `--color-green-10` | `#e6faf4` | Very light green |
170
- | `--color-green-5` | `#f2fcf9` | Almost white |
171
- | `--color-red` | `#ef0044` | Red for errors |
172
- | `--color-red-140` | `#8f0029` | Very dark red |
173
- | `--color-red-130` | `#a70030` | Very dark red |
174
- | `--color-red-120` | `#bf0036` | Darker red |
175
- | `--color-red-110` | `#d7003d` | Darker red |
176
- | `--color-red-100` | `#ef0044` | Base red |
177
- | `--color-red-80` | `#f23369` | Helles Rot |
178
- | `--color-red-60` | `#f5668f` | Helles Rot |
179
- | `--color-red-40` | `#f999b4` | Very light red |
180
- | `--color-red-20` | `#fcccda` | Very light red |
181
- | `--color-red-10` | `#fde6ec` | Very light red |
182
- | `--color-red-5` | `#fef2f5` | Almost white |
183
- | `--color-accent-blue-100` | `#00e9ff` | Blue accent color |
184
- | `--color-accent-blue-30` | `#b3f8ff` | Very light accent color |
185
- | `--color-purple` | `#510dcd` | Purple accent |
186
- | `--color-purple-140` | `#31087b` | Very dark purple |
187
- | `--color-purple-130` | `#390990` | Very dark purple |
188
- | `--color-purple-120` | `#410aa4` | Darker purple |
189
- | `--color-purple-110` | `#490cb9` | Darker purple |
190
- | `--color-purple-100` | `#510dcd` | Base purple |
191
- | `--color-purple-80` | `#743dd7` | Lighter purple |
192
- | `--color-purple-60` | `#976ee1` | Lighter purple |
193
- | `--color-purple-40` | `#bf9af1` | Very light purple |
194
- | `--color-purple-20` | `#dccff5` | Very light purple |
195
- | `--color-purple-10` | `#eee7fa` | Very light purple |
196
- | `--color-purple-5` | `#eee7fa` | Very light purple |
197
- | `--color-white` | `#fff` | White |
198
- | `--color-black` | `#000` | Black |
199
- | `--font-family` | `Arial, sans-serif` | Default font |
200
- | `--font-size` | `#{to-rem(16)}` | Base font size |
201
- | `--font-weight-regular` | `400` | Regular font weight |
202
- | `--font-weight-bold` | `700` | Bold font |
203
- | `--line-height-regular` | `1.5` | Line height text |
204
- | `--line-height-heading` | `1.2` | Line height headings |
205
- | `--spacing-4xl` | `#{to-rem(64)}` | Largest spacing |
206
- | `--spacing-3xl` | `#{to-rem(48)}` | Very large spacing |
207
- | `--spacing-2xl` | `#{to-rem(40)}` | Very large spacing |
208
- | `--spacing-xl` | `#{to-rem(32)}` | Large spacing |
209
- | `--spacing-l` | `#{to-rem(24)}` | Large spacing |
210
- | `--spacing-m` | `#{to-rem(16)}` | Standard spacing |
211
- | `--spacing-s` | `#{to-rem(12)}` | Small spacing |
212
- | `--spacing-xs` | `#{to-rem(8)}` | Very small spacing |
213
- | `--spacing-2xs` | `#{to-rem(4)}` | Tiny spacing |
36
+ For more details: [Getting started](https://public-ui.github.io/docs/get-started/first-steps)
37
+
38
+ ## Contributing to the Theme
39
+
40
+ Want to improve or customize the ECL Theme? Here’s how:
41
+
42
+ 1. **Install pnpm**
43
+ - [pnpm](https://pnpm.io/) is required for development. Install pnpm globally if you don’t have it yet:
44
+
45
+ ```bash
46
+ npm install -g pnpm
47
+ ```
48
+
49
+ 2. **Fork the repository**
50
+ - Click [Fork](https://github.com/public-ui/kolibri) on GitHub to create your own fork.
51
+
52
+ 3. **Local setup**
53
+ - Clone your fork:
54
+
55
+ ```bash
56
+ git clone https://github.com/<YOUR_GITHUB_USER>/kolibri.git
57
+ cd kolibri/lib/packages/themes/ecl
58
+ ```
59
+
60
+ - Install dependencies in the monorepo root:
61
+
62
+ ```bash
63
+ pnpm i
64
+ pnpm build
65
+ ```
66
+
67
+ 4. **Start development**
68
+ - Switch to the theme directory and start the watch mode:
69
+
70
+ ```bash
71
+ cd kolibri/lib/packages/themes/ecl
72
+ pnpm start
73
+ ```
74
+
75
+ - Edit the files in `src/` as needed.
76
+
77
+ 5. **Commit & Pull Request**
78
+ - Commit your changes and push them to your fork:
79
+
80
+ ```bash
81
+ git add .
82
+ git commit -m "feat(theme-ecl): <your change>"
83
+ git push origin <your-branch>
84
+ ```
85
+
86
+ - Create a Pull Request at <https://github.com/public-ui/kolibri/compare>
87
+
88
+ **Notes:**
89
+
90
+ - Please follow the [Contributing Guidelines](../../../CONTRIBUTING.md).
91
+ - Always run `pnpm format` and `pnpm lint` before committing.
92
+ - For larger changes, feel free to open an [issue](https://github.com/public-ui/kolibri/issues/new) first.
93
+
94
+ ## More Information
95
+
96
+ - [Documentation](https://public-ui.github.io)
97
+ - [Issues](https://github.com/public-ui/kolibri/issues)
98
+ - [Pull Requests](https://github.com/public-ui/kolibri/pulls)
package/assets/ecl-icons/ecl-icons.eot ADDED
Binary file