@iroco/ui 1.14.7 → 1.14.10

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 +11 -1
  2. package/dist/Button.svelte +9 -3
  3. package/dist/ImageArticle.svelte +9 -3
  4. package/dist/IrocoLogo.svelte +6 -3
  5. package/dist/NavBar.svelte +9 -3
  6. package/dist/scss/colors.scss +10 -4
  7. package/package.json +1 -1
package/README.md CHANGED
@@ -92,7 +92,17 @@ Building :
92
92
  npm run build
93
93
  ```
94
94
 
95
- Releasing (tags and releases to npm):
95
+ ## Releasing (tags and releases to npm):
96
+
97
+ Releases are just made with
98
+
99
+ ```shell
100
+ npm run release
101
+ ```
102
+
103
+ Then choose the appropriate tag ([semantic versionning](https://semver.org/)), it will push the tag. Then the npm publish is done by the CI. To do so, we are using fine grain token that expires every 3 months. If you have a `ENEEDAUTH` error the token may be deprecated. To create a new one connect to npm and renew the token. It will display it, copy it then replace the secret in iroco-ui codeberg ci settings.
104
+
105
+ To publish manually you can do:
96
106
 
97
107
  ```shell
98
108
  npm publish
package/dist/Button.svelte CHANGED
@@ -205,6 +205,9 @@
205
205
  --color-green-light: #82eec7;
206
206
  --color-green-dark: #00704e;
207
207
  --color-green-alpha: #00d69280;
208
+ --color-yellow: #ffe032;
209
+ --color-yellow-op-80: #ffe03280;
210
+ --color-blue: #001fcd;
208
211
  /* semantic colors */
209
212
  --color-primary-light: var(--color-green-light);
210
213
  --color-primary: var(--color-green);
@@ -218,8 +221,8 @@
218
221
  --color-success-bg: #00d69280;
219
222
  --color-danger: #ff504d;
220
223
  --color-danger-bg: #ff504d80;
221
- --color-warning: #ffe032;
222
- --color-warning-bg: #ffe03280;
224
+ --color-warning: var(--color-yellow);
225
+ --color-warning-bg: var(--color-yellow-op-80);
223
226
  /* typography */
224
227
  --color-text-light: #ffffff;
225
228
  --color-text: #f2ebe3;
@@ -283,6 +286,7 @@
283
286
  --color-background-darker: var(--color-night-blue);
284
287
  --color-foreground: var(--color-beige);
285
288
  --color-link: var(--color-success);
289
+ --color-highlight: var(--color-yellow);
286
290
  }
287
291
  }
288
292
  @media (prefers-color-scheme: light) {
@@ -291,14 +295,16 @@
291
295
  --color-background-darker: var(--color-beige-darker);
292
296
  --color-foreground: var(--color-black);
293
297
  --color-link: var(--color-primary-dark);
298
+ --color-highlight: var(--color-blue);
294
299
  }
295
300
  }
296
301
  @media (prefers-contrast: more) {
297
302
  .iroco-ui-button--dark {
298
303
  --color-background: var(--color-white);
299
- --color-background-darker: var(--color-medium-grey);
304
+ --color-background-darker: var(--color-beige-darker);
300
305
  --color-foreground: var(--color-black);
301
306
  --color-link: var(--color-primary-dark);
307
+ --color-highlight: var(--color-blue);
302
308
  }
303
309
  }
304
310
  .iroco-ui-button--success {
package/dist/ImageArticle.svelte CHANGED
@@ -228,6 +228,9 @@
228
228
  --color-green-light: #82eec7;
229
229
  --color-green-dark: #00704e;
230
230
  --color-green-alpha: #00d69280;
231
+ --color-yellow: #ffe032;
232
+ --color-yellow-op-80: #ffe03280;
233
+ --color-blue: #001fcd;
231
234
  /* semantic colors */
232
235
  --color-primary-light: var(--color-green-light);
233
236
  --color-primary: var(--color-green);
@@ -241,8 +244,8 @@
241
244
  --color-success-bg: #00d69280;
242
245
  --color-danger: #ff504d;
243
246
  --color-danger-bg: #ff504d80;
244
- --color-warning: #ffe032;
245
- --color-warning-bg: #ffe03280;
247
+ --color-warning: var(--color-yellow);
248
+ --color-warning-bg: var(--color-yellow-op-80);
246
249
  /* typography */
247
250
  --color-text-light: #ffffff;
248
251
  --color-text: #f2ebe3;
@@ -306,6 +309,7 @@
306
309
  --color-background-darker: var(--color-night-blue);
307
310
  --color-foreground: var(--color-beige);
308
311
  --color-link: var(--color-success);
312
+ --color-highlight: var(--color-yellow);
309
313
  }
310
314
  }
311
315
  @media (prefers-color-scheme: light) {
@@ -314,14 +318,16 @@
314
318
  --color-background-darker: var(--color-beige-darker);
315
319
  --color-foreground: var(--color-black);
316
320
  --color-link: var(--color-primary-dark);
321
+ --color-highlight: var(--color-blue);
317
322
  }
318
323
  }
319
324
  @media (prefers-contrast: more) {
320
325
  .iroco-ui-button--dark {
321
326
  --color-background: var(--color-white);
322
- --color-background-darker: var(--color-medium-grey);
327
+ --color-background-darker: var(--color-beige-darker);
323
328
  --color-foreground: var(--color-black);
324
329
  --color-link: var(--color-primary-dark);
330
+ --color-highlight: var(--color-blue);
325
331
  }
326
332
  }
327
333
  .iroco-ui-button--success {
package/dist/IrocoLogo.svelte CHANGED
@@ -86,6 +86,9 @@
86
86
  --color-green-light: #82eec7;
87
87
  --color-green-dark: #00704e;
88
88
  --color-green-alpha: #00d69280;
89
+ --color-yellow: #ffe032;
90
+ --color-yellow-op-80: #ffe03280;
91
+ --color-blue: #001fcd;
89
92
  /* semantic colors */
90
93
  --color-primary-light: var(--color-green-light);
91
94
  --color-primary: var(--color-green);
@@ -99,8 +102,8 @@
99
102
  --color-success-bg: #00d69280;
100
103
  --color-danger: #ff504d;
101
104
  --color-danger-bg: #ff504d80;
102
- --color-warning: #ffe032;
103
- --color-warning-bg: #ffe03280;
105
+ --color-warning: var(--color-yellow);
106
+ --color-warning-bg: var(--color-yellow-op-80);
104
107
  /* typography */
105
108
  --color-text-light: #ffffff;
106
109
  --color-text: #f2ebe3;
@@ -150,6 +153,6 @@
150
153
  }
151
154
  @media (prefers-contrast: more) {
152
155
  .iroco-logo .prefers-color-scheme {
153
- --color-background: var(--color-text-light);
156
+ --color-background: var(--color-black);
154
157
  }
155
158
  }</style>
package/dist/NavBar.svelte CHANGED
@@ -245,6 +245,9 @@
245
245
  --color-green-light: #82eec7;
246
246
  --color-green-dark: #00704e;
247
247
  --color-green-alpha: #00d69280;
248
+ --color-yellow: #ffe032;
249
+ --color-yellow-op-80: #ffe03280;
250
+ --color-blue: #001fcd;
248
251
  /* semantic colors */
249
252
  --color-primary-light: var(--color-green-light);
250
253
  --color-primary: var(--color-green);
@@ -258,8 +261,8 @@
258
261
  --color-success-bg: #00d69280;
259
262
  --color-danger: #ff504d;
260
263
  --color-danger-bg: #ff504d80;
261
- --color-warning: #ffe032;
262
- --color-warning-bg: #ffe03280;
264
+ --color-warning: var(--color-yellow);
265
+ --color-warning-bg: var(--color-yellow-op-80);
263
266
  /* typography */
264
267
  --color-text-light: #ffffff;
265
268
  --color-text: #f2ebe3;
@@ -323,6 +326,7 @@
323
326
  --color-background-darker: var(--color-night-blue);
324
327
  --color-foreground: var(--color-beige);
325
328
  --color-link: var(--color-success);
329
+ --color-highlight: var(--color-yellow);
326
330
  }
327
331
  }
328
332
  @media (prefers-color-scheme: light) {
@@ -331,14 +335,16 @@
331
335
  --color-background-darker: var(--color-beige-darker);
332
336
  --color-foreground: var(--color-black);
333
337
  --color-link: var(--color-primary-dark);
338
+ --color-highlight: var(--color-blue);
334
339
  }
335
340
  }
336
341
  @media (prefers-contrast: more) {
337
342
  .iroco-ui-button--dark {
338
343
  --color-background: var(--color-white);
339
- --color-background-darker: var(--color-medium-grey);
344
+ --color-background-darker: var(--color-beige-darker);
340
345
  --color-foreground: var(--color-black);
341
346
  --color-link: var(--color-primary-dark);
347
+ --color-highlight: var(--color-blue);
342
348
  }
343
349
  }
344
350
  .iroco-ui-button--success {
package/dist/scss/colors.scss CHANGED
@@ -24,6 +24,9 @@
24
24
  --color-green-light: #82eec7;
25
25
  --color-green-dark: #00704e;
26
26
  --color-green-alpha: #00d69280;
27
+ --color-yellow: #ffe032;
28
+ --color-yellow-op-80: #ffe03280;
29
+ --color-blue: #001fcd; // yellow complementary color
27
30
 
28
31
  /* semantic colors */
29
32
  --color-primary-light: var(--color-green-light);
@@ -40,8 +43,8 @@
40
43
  --color-success-bg: #00d69280;
41
44
  --color-danger: #ff504d;
42
45
  --color-danger-bg: #ff504d80;
43
- --color-warning: #ffe032;
44
- --color-warning-bg: #ffe03280;
46
+ --color-warning: var(--color-yellow);
47
+ --color-warning-bg: var(--color-yellow-op-80);
45
48
 
46
49
  /* typography */
47
50
  --color-text-light: #ffffff;
@@ -94,7 +97,7 @@
94
97
  --color-background: var(--color-black);
95
98
  }
96
99
  @media (prefers-contrast: more) {
97
- --color-background: var(--color-text-light);
100
+ --color-background: var(--color-black);
98
101
  }
99
102
  }
100
103
 
@@ -104,17 +107,20 @@
104
107
  --color-background-darker: var(--color-night-blue);
105
108
  --color-foreground: var(--color-beige);
106
109
  --color-link: var(--color-success);
110
+ --color-highlight: var(--color-yellow);
107
111
  }
108
112
  @media (prefers-color-scheme: light) {
109
113
  --color-background: var(--color-beige-lighter);
110
114
  --color-background-darker: var(--color-beige-darker);
111
115
  --color-foreground: var(--color-black);
112
116
  --color-link: var(--color-primary-dark);
117
+ --color-highlight: var(--color-blue);
113
118
  }
114
119
  @media (prefers-contrast: more) {
115
120
  --color-background: var(--color-white);
116
- --color-background-darker: var(--color-medium-grey);
121
+ --color-background-darker: var(--color-beige-darker);
117
122
  --color-foreground: var(--color-black);
118
123
  --color-link: var(--color-primary-dark);
124
+ --color-highlight: var(--color-blue);
119
125
  }
120
126
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@iroco/ui",
3
- "version": "1.14.7",
3
+ "version": "1.14.10",
4
4
  "description": "Iroco design system based on Svelte",
5
5
  "main": "dist/index.js",
6
6
  "scripts": {