@public-ui/theme-ecl 3.0.2-f97556ada8a20e9abe2dbb519562bad234f7191b.0 → 3.0.2-rc.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 (2) hide show
  1. package/README.md +170 -3
  2. package/package.json +4 -4
package/README.md CHANGED
@@ -17,9 +17,9 @@ The ECL themes provide styling according to the Styleguides of the European Comm
17
17
  You can install the KoliBri themes with `npm`, `pnpm` or `yarn`:
18
18
 
19
19
  ```bash
20
- npm i -g @public-ui/theme-ecl
21
- pnpm i -g @public-ui/theme-ecl
22
- yarn add -g @public-ui/theme-ecl
20
+ npm i @public-ui/theme-ecl
21
+ pnpm i @public-ui/theme-ecl
22
+ yarn add @public-ui/theme-ecl
23
23
  ```
24
24
 
25
25
  ## Usage
@@ -44,3 +44,170 @@ register(
44
44
  /* Handle errors */
45
45
  });
46
46
  ```
47
+
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` | `#{rem(16)}` | Base font size |
91
+ | `--font-weight` | `400` | Regular font weight |
92
+ | `--font-weight-bold` | `600` | Bold font |
93
+ | `--line-height` | `1.5` | Line height text |
94
+ | `--line-height-heading` | `1.2` | Line height headings |
95
+ | `--spacing-4xl` | `#{rem(64)}` | Largest spacing |
96
+ | `--spacing-3xl` | `#{rem(48)}` | Very large spacing |
97
+ | `--spacing-2xl` | `#{rem(40)}` | Very large spacing |
98
+ | `--spacing-xl` | `#{rem(32)}` | Large spacing |
99
+ | `--spacing-l` | `#{rem(24)}` | Large spacing |
100
+ | `--spacing-m` | `#{rem(16)}` | Standard spacing |
101
+ | `--spacing-s` | `#{rem(12)}` | Small spacing |
102
+ | `--spacing-xs` | `#{rem(8)}` | Very small spacing |
103
+ | `--spacing-2xs` | `#{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` | `#{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` | `#{rem(64)}` | Largest spacing |
206
+ | `--spacing-3xl` | `#{rem(48)}` | Very large spacing |
207
+ | `--spacing-2xl` | `#{rem(40)}` | Very large spacing |
208
+ | `--spacing-xl` | `#{rem(32)}` | Large spacing |
209
+ | `--spacing-l` | `#{rem(24)}` | Large spacing |
210
+ | `--spacing-m` | `#{rem(16)}` | Standard spacing |
211
+ | `--spacing-s` | `#{rem(12)}` | Small spacing |
212
+ | `--spacing-xs` | `#{rem(8)}` | Very small spacing |
213
+ | `--spacing-2xs` | `#{rem(4)}` | Tiny spacing |
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@public-ui/theme-ecl",
3
- "version": "3.0.2-f97556ada8a20e9abe2dbb519562bad234f7191b.0",
3
+ "version": "3.0.2-rc.0",
4
4
  "license": "EUPL-1.2",
5
5
  "homepage": "https://public-ui.github.io",
6
6
  "repository": {
@@ -63,11 +63,11 @@
63
63
  "stylelint-scss": "6.12.1",
64
64
  "typescript": "5.8.3",
65
65
  "unbuild": "3.5.0",
66
- "@public-ui/components": "3.0.2-f97556ada8a20e9abe2dbb519562bad234f7191b.0",
67
- "@public-ui/visual-tests": "3.0.2-f97556ada8a20e9abe2dbb519562bad234f7191b.0"
66
+ "@public-ui/components": "3.0.2-rc.0",
67
+ "@public-ui/visual-tests": "3.0.2-rc.0"
68
68
  },
69
69
  "peerDependencies": {
70
- "@public-ui/components": "3.0.2-f97556ada8a20e9abe2dbb519562bad234f7191b.0"
70
+ "@public-ui/components": "3.0.2-rc.0"
71
71
  },
72
72
  "exports": {
73
73
  ".": {