@iroco/ui 1.14.9 → 1.14.12

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 (16) hide show
  1. package/README.md +11 -1
  2. package/dist/Alert.svelte +90 -1
  3. package/dist/Button.svelte +100 -81
  4. package/dist/Highlight.stories.svelte +2 -2
  5. package/dist/IconIrocoLogo.svelte +108 -2
  6. package/dist/ImageArticle.svelte +100 -81
  7. package/dist/IrocoLogo.svelte +69 -52
  8. package/dist/NavBar.svelte +103 -82
  9. package/dist/Navigation.svelte +127 -2
  10. package/dist/NumberInput.svelte +2 -2
  11. package/dist/RadioButton.svelte +2 -2
  12. package/dist/TextInput.svelte +2 -2
  13. package/dist/scss/button.scss +14 -10
  14. package/dist/scss/colors.scss +91 -77
  15. package/dist/scss/forms.scss +2 -2
  16. 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/Alert.svelte CHANGED
@@ -28,7 +28,96 @@
28
28
  {@render children?.()}
29
29
  </div>
30
30
 
31
- <style>.alert {
31
+ <style>:root {
32
+ --color-beige: #f2ebe3;
33
+ --color-light-beige: #fff9f4;
34
+ --color-dark-beige: #eaddd5;
35
+ --color-dark-grey: #33323a;
36
+ --color-medium-grey: #464452;
37
+ --color-medium-light-grey: #a9a29e;
38
+ --color-light-grey: #f5f5f5;
39
+ --color-dark-blue: #211d28;
40
+ --color-dark-blue-op-30: #211d284d;
41
+ --color-night-blue: #18151e;
42
+ --color-black: black;
43
+ --color-white: white;
44
+ --color-red: #ff504d;
45
+ --color-green: #00d692;
46
+ --color-light-green: #82eec7;
47
+ --color-dark-green: #00704e;
48
+ --color-yellow: #ffe032;
49
+ --color-blue: #001fcd;
50
+ /* Caution !!! Hover doesn't work with --color-white-op-20: rgba(var(--color-white), 0.2)); */
51
+ --color-white-op-20: rgba(255, 255, 255, 0.2);
52
+ --color-white-op-30: rgba(255, 255, 255, 0.3);
53
+ --color-black-op-20: rgba(0, 0, 0, 0.2);
54
+ --color-black-op-40: rgba(0, 0, 0, 0.4);
55
+ --color-black-op-60: rgba(0, 0, 0, 0.6);
56
+ --color-red-op-80: rgba(var(--color-red), 0.8);
57
+ --color-green-op-80: rgba(var(--color-green), 0.8);
58
+ --color-yellow-op-80: rgba(var(--color-yellow), 0.8);
59
+ /* global colors */
60
+ /* semantic colors */
61
+ --color-primary-light: var(--color-light-green);
62
+ --color-primary: var(--color-green);
63
+ --color-secondary: var(--color-beige);
64
+ /* feedback */
65
+ --color-success: var(--color-green);
66
+ --color-success-bg: var(--color-green-op-80);
67
+ --color-danger: var(--color-red);
68
+ --color-danger-bg: var(--color-red-op-80);
69
+ --color-warning: var(--color-yellow);
70
+ --color-warning-bg: var(--color-yellow-op-80);
71
+ /* typography */
72
+ --color-text: var(--color-foreground);
73
+ --color-text-dark: var(--color-medium-grey);
74
+ --color-text-op-80: rgba(var(--color-text), 0.8);
75
+ --color-text-op-99: rgba(var(--color-text), 0.99);
76
+ /* border */
77
+ /* body */
78
+ --color-body: var(--color-background);
79
+ }
80
+ @media (prefers-color-scheme: dark) {
81
+ :root {
82
+ --color-background: var(--color-dark-blue);
83
+ --color-background-darker: var(--color-night-blue);
84
+ --color-foreground: var(--color-beige);
85
+ --color-link: var(--color-green);
86
+ --color-highlight: var(--color-yellow);
87
+ }
88
+ }
89
+ @media (prefers-color-scheme: light) {
90
+ :root {
91
+ --color-background: var(--color-light-beige);
92
+ --color-background-darker: var(--color-dark-beige);
93
+ --color-foreground: var(--color-black);
94
+ --color-link: var(--color-dark-green);
95
+ --color-highlight: var(--color-blue);
96
+ }
97
+ }
98
+ @media (prefers-contrast: more) {
99
+ :root {
100
+ --color-background: var(--color-white);
101
+ --color-background-darker: var(--color-dark-beige);
102
+ --color-foreground: var(--color-black);
103
+ --color-link: var(--color-dark-green);
104
+ --color-highlight: var(--color-blue);
105
+ }
106
+ }
107
+ @media (prefers-color-scheme: dark) {
108
+ :root {
109
+ --color-border: var(--color-medium-grey);
110
+ }
111
+ }
112
+ @media (prefers-color-scheme: light) {
113
+ :root {
114
+ --color-border: var(--color-medium-light-grey);
115
+ }
116
+ }
117
+
118
+ .alert {
119
+ --color-icon-primary: var(--color-medium-light-grey);
120
+ --color-icon-secondary: inherit;
32
121
  flex-direction: column;
33
122
  position: relative;
34
123
  min-height: 2em;
package/dist/Button.svelte CHANGED
@@ -185,76 +185,103 @@
185
185
  }
186
186
 
187
187
  :root {
188
- --color-white-op-20: rgba(255, 255, 255, 0.2);
189
- --color-white-op-30: rgba(255, 255, 255, 0.3);
190
- --color-black-op-20: rgba(0, 0, 0, 0.2);
191
- --color-black-op-40: rgba(0, 0, 0, 0.4);
192
- --color-black-op-60: rgba(0, 0, 0, 0.6);
193
- --color-beige-lighter: #fff9f4;
194
188
  --color-beige: #f2ebe3;
195
- --color-beige-darker: #eaddd5;
189
+ --color-light-beige: #fff9f4;
190
+ --color-dark-beige: #eaddd5;
196
191
  --color-dark-grey: #33323a;
197
192
  --color-medium-grey: #464452;
193
+ --color-medium-light-grey: #a9a29e;
198
194
  --color-light-grey: #f5f5f5;
199
195
  --color-dark-blue: #211d28;
200
196
  --color-dark-blue-op-30: #211d284d;
201
197
  --color-night-blue: #18151e;
202
198
  --color-black: black;
203
199
  --color-white: white;
200
+ --color-red: #ff504d;
204
201
  --color-green: #00d692;
205
- --color-green-light: #82eec7;
206
- --color-green-dark: #00704e;
207
- --color-green-alpha: #00d69280;
202
+ --color-light-green: #82eec7;
203
+ --color-dark-green: #00704e;
204
+ --color-yellow: #ffe032;
205
+ --color-blue: #001fcd;
206
+ /* Caution !!! Hover doesn't work with --color-white-op-20: rgba(var(--color-white), 0.2)); */
207
+ --color-white-op-20: rgba(255, 255, 255, 0.2);
208
+ --color-white-op-30: rgba(255, 255, 255, 0.3);
209
+ --color-black-op-20: rgba(0, 0, 0, 0.2);
210
+ --color-black-op-40: rgba(0, 0, 0, 0.4);
211
+ --color-black-op-60: rgba(0, 0, 0, 0.6);
212
+ --color-red-op-80: rgba(var(--color-red), 0.8);
213
+ --color-green-op-80: rgba(var(--color-green), 0.8);
214
+ --color-yellow-op-80: rgba(var(--color-yellow), 0.8);
215
+ /* global colors */
208
216
  /* semantic colors */
209
- --color-primary-light: var(--color-green-light);
217
+ --color-primary-light: var(--color-light-green);
210
218
  --color-primary: var(--color-green);
211
- --color-primary-bg: var(--color-green-alpha);
212
- --color-primary-dark: var(--color-green-dark);
213
- --color-secondary-light: #ffffff;
214
- --color-secondary: #f2ebe3;
215
- --color-secondary-dark: #a9a29e;
219
+ --color-secondary: var(--color-beige);
216
220
  /* feedback */
217
- --color-success: #00d692;
218
- --color-success-bg: #00d69280;
219
- --color-danger: #ff504d;
220
- --color-danger-bg: #ff504d80;
221
- --color-warning: #ffe032;
222
- --color-warning-bg: #ffe03280;
221
+ --color-success: var(--color-green);
222
+ --color-success-bg: var(--color-green-op-80);
223
+ --color-danger: var(--color-red);
224
+ --color-danger-bg: var(--color-red-op-80);
225
+ --color-warning: var(--color-yellow);
226
+ --color-warning-bg: var(--color-yellow-op-80);
223
227
  /* typography */
224
- --color-text-light: #ffffff;
225
- --color-text: #f2ebe3;
226
- --color-text-op-50: #f2ebe380;
227
- --color-text-op-60: #f2ebe399;
228
- --color-text-dark: #464452;
228
+ --color-text: var(--color-foreground);
229
+ --color-text-dark: var(--color-medium-grey);
230
+ --color-text-op-80: rgba(var(--color-text), 0.8);
231
+ --color-text-op-99: rgba(var(--color-text), 0.99);
229
232
  /* border */
230
- --color-border: #464452;
231
233
  /* body */
232
- --color-body: var(--color-dark-blue);
233
- /* forms */
234
- --form-element-border: var(--color-beige);
235
- --form-element-bg: var(--color-beige);
236
- --form-text-placeholder: #a9a29e;
237
- /* buttons */
238
- --btn-primary-bg: var(--color-beige);
239
- --btn-primary-border: var(--color-night-blue);
240
- --btn-primary-label: var(--color-beige);
241
- --dark-btn-primary-label: var(--color-beige);
242
- --dark-btn-primary-bg: var(--color-night-blue);
243
- --btn-secondary-bg: var(--color-secondary);
244
- --btn-secondary-border: var(--color-night-blue);
245
- --btn-secondary-label: var(--color-night-blue);
246
- --btn-basic-label: var(--color-night-blue);
247
- --btn-basic-bg: var(--color-beige);
248
- --btn-basic-border: var(--color-night-blue);
249
- --btn-disabled-label: var(--color-black-op-60);
250
- --btn-disabled-bg: #a9a29e;
251
- --btn-disabled-border: var(--color-black-op-60);
252
- /* icons */
253
- --color-icon-primary: #a9a29e;
254
- --color-icon-secondary: inherit;
234
+ --color-body: var(--color-background);
235
+ }
236
+ @media (prefers-color-scheme: dark) {
237
+ :root {
238
+ --color-background: var(--color-dark-blue);
239
+ --color-background-darker: var(--color-night-blue);
240
+ --color-foreground: var(--color-beige);
241
+ --color-link: var(--color-green);
242
+ --color-highlight: var(--color-yellow);
243
+ }
244
+ }
245
+ @media (prefers-color-scheme: light) {
246
+ :root {
247
+ --color-background: var(--color-light-beige);
248
+ --color-background-darker: var(--color-dark-beige);
249
+ --color-foreground: var(--color-black);
250
+ --color-link: var(--color-dark-green);
251
+ --color-highlight: var(--color-blue);
252
+ }
253
+ }
254
+ @media (prefers-contrast: more) {
255
+ :root {
256
+ --color-background: var(--color-white);
257
+ --color-background-darker: var(--color-dark-beige);
258
+ --color-foreground: var(--color-black);
259
+ --color-link: var(--color-dark-green);
260
+ --color-highlight: var(--color-blue);
261
+ }
262
+ }
263
+ @media (prefers-color-scheme: dark) {
264
+ :root {
265
+ --color-border: var(--color-medium-grey);
266
+ }
267
+ }
268
+ @media (prefers-color-scheme: light) {
269
+ :root {
270
+ --color-border: var(--color-medium-light-grey);
271
+ }
255
272
  }
256
273
 
257
274
  .iroco-ui-button {
275
+ --btn-bg: var(--color-foreground);
276
+ --btn-border: var(--color-background-darker);
277
+ --btn-label: var(--color-background-darker);
278
+ --colored-btn-label: var(--color-black);
279
+ --colored-btn-hover: var(--color-black-op-20);
280
+ --dark-btn-label: var(--color-foreground);
281
+ --dark-btn-bg: var(--color-background-darker);
282
+ --btn-disabled-label: var(--color-black-op-60);
283
+ --btn-disabled-bg: var(--color-medium-light-grey);
284
+ --btn-disabled-border: var(--color-black-op-60);
258
285
  cursor: pointer;
259
286
  -webkit-touch-callout: none;
260
287
  -webkit-user-select: none;
@@ -268,45 +295,34 @@
268
295
  text-transform: uppercase;
269
296
  border-radius: 0.3em;
270
297
  }
271
- .iroco-ui-button--basic {
272
- color: var(--btn-secondary-label);
273
- background: var(--btn-secondary-bg);
274
- border: 1px solid var(--btn-secondary-border);
275
- }
276
- .iroco-ui-button--dark {
277
- background: var(--color-background-darker);
278
- color: var(--color-foreground);
279
- }
280
298
  @media (prefers-color-scheme: dark) {
281
- .iroco-ui-button--dark {
282
- --color-background: var(--color-dark-blue);
283
- --color-background-darker: var(--color-night-blue);
284
- --color-foreground: var(--color-beige);
285
- --color-link: var(--color-success);
299
+ .iroco-ui-button {
300
+ --btn-hover: var(--color-black-op-20);
301
+ --dark-btn-hover: var(--color-white-op-20);
286
302
  }
287
303
  }
288
304
  @media (prefers-color-scheme: light) {
289
- .iroco-ui-button--dark {
290
- --color-background: var(--color-beige-lighter);
291
- --color-background-darker: var(--color-beige-darker);
292
- --color-foreground: var(--color-black);
293
- --color-link: var(--color-primary-dark);
305
+ .iroco-ui-button {
306
+ --btn-hover: var(--color-white-op-20);
307
+ --dark-btn-hover: var(--color-black-op-20);
294
308
  }
295
309
  }
296
- @media (prefers-contrast: more) {
297
- .iroco-ui-button--dark {
298
- --color-background: var(--color-white);
299
- --color-background-darker: var(--color-medium-grey);
300
- --color-foreground: var(--color-black);
301
- --color-link: var(--color-primary-dark);
302
- }
310
+ .iroco-ui-button--basic {
311
+ color: var(--btn-label);
312
+ background: var(--btn-bg);
313
+ border: 1px solid var(--btn-border);
314
+ }
315
+ .iroco-ui-button--dark {
316
+ background: var(--dark-btn-bg);
317
+ color: var(--dark-btn-label);
303
318
  }
304
319
  .iroco-ui-button--success {
305
320
  background: var(--color-success);
306
- color: var(--btn-secondary-label);
321
+ color: var(--colored-btn-label);
307
322
  }
308
323
  .iroco-ui-button--danger {
309
324
  background: var(--color-danger);
325
+ color: var(--colored-btn-label);
310
326
  }
311
327
  .iroco-ui-button--regular {
312
328
  padding: 1em 2em;
@@ -314,11 +330,14 @@
314
330
  .iroco-ui-button--small {
315
331
  padding: 0.5em 1em;
316
332
  }
317
- .iroco-ui-button--basic:hover, .iroco-ui-button--success:hover, .iroco-ui-button--danger:hover {
318
- box-shadow: inset 0 0 0 10em var(--color-black-op-20);
333
+ .iroco-ui-button--basic:hover {
334
+ box-shadow: inset 0 0 0 10em var(--btn-hover);
335
+ }
336
+ .iroco-ui-button--success:hover, .iroco-ui-button--danger:hover {
337
+ box-shadow: inset 0 0 0 10em var(--colored-btn-hover);
319
338
  }
320
339
  .iroco-ui-button--dark:hover {
321
- box-shadow: inset 0 0 0 10em var(--color-white-op-20);
340
+ box-shadow: inset 0 0 0 10em var(--dark-btn-hover);
322
341
  }
323
342
  .iroco-ui-button:active {
324
343
  box-shadow: none;
package/dist/Highlight.stories.svelte CHANGED
@@ -29,5 +29,5 @@
29
29
  <Story name="Default" />
30
30
  <Story name="Secondary" args={{ kind: 'secondary' }} />
31
31
  <Story name="Danger" args={{ kind: 'danger' }} />
32
- <Story name="Flash" args={{ kind: 'flash' }} />
33
- <Story name="Success" args={{ kind: 'success' }} />
32
+ <Story name="Warning" args={{ kind: 'warning' }} />
33
+ <Story name="Primary" args={{ kind: 'primary' }} />
package/dist/IconIrocoLogo.svelte CHANGED
@@ -19,10 +19,10 @@
19
19
  </script>
20
20
 
21
21
  {#snippet irocoSvg()}
22
- <svg {width} {height} viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
22
+ <svg {width} {height} viewBox="0 0 50 50" xmlns="http://www.w3.org/2000/svg">
23
23
  <path
24
+ class="prefers-color-scheme"
24
25
  d="M30.009 29.9999C29.3241 30.0677 28.7761 30.1355 28.4336 30.2033C28.0912 30.3389 27.8857 30.5423 27.7487 30.8812C27.6117 31.2202 27.5432 31.7626 27.5432 32.5084V47.1524C27.5432 47.8982 27.6117 48.4406 27.7487 48.7795C27.8857 49.1185 28.0912 49.3219 28.4336 49.4575C28.7761 49.5931 29.2556 49.6609 30.009 49.6609V50.2711C29.1186 50.2033 27.8172 50.2033 26.2419 50.2033C24.5295 50.2033 23.2282 50.2033 22.4062 50.2711V49.7965C23.0912 49.7287 23.6391 49.6609 23.9816 49.5931C24.3241 49.4575 24.5295 49.2541 24.6665 48.9151C24.8035 48.5762 24.872 48.0338 24.872 47.288V32.5762C24.872 31.8304 24.8035 31.288 24.6665 30.949C24.5295 30.6101 24.3241 30.4067 23.9816 30.2711C23.6391 30.1355 23.1597 30.0677 22.4062 30.0677V29.4575C23.2282 29.5253 24.5295 29.5253 26.2419 29.5253C27.8172 29.5253 29.1186 29.5253 30.009 29.4575V29.9999Z"
25
- fill="white"
26
26
  />
27
27
  <path
28
28
  d="M18.7079 40.4406C11.1737 37.3897 6.24219 30.2033 6.24219 22.1355C6.24219 11.2202 15.2148 2.33887 26.2422 2.33887C37.2696 2.33887 46.2422 11.2202 46.2422 22.1355C46.2422 30.2033 41.3107 37.4575 33.7764 40.4406L32.2696 36.9151C38.3655 34.4745 42.3381 28.6439 42.3381 22.0677C42.3381 13.2541 35.0778 6.06768 26.1737 6.06768C17.2696 6.06768 10.0093 13.2541 10.0093 22.0677C10.0093 28.5762 13.9819 34.4067 20.0778 36.9151L18.7079 40.4406Z"
@@ -40,3 +40,109 @@
40
40
  {@render irocoSvg()}
41
41
  </div>
42
42
  {/if}
43
+
44
+ <style>:root {
45
+ --color-beige: #f2ebe3;
46
+ --color-light-beige: #fff9f4;
47
+ --color-dark-beige: #eaddd5;
48
+ --color-dark-grey: #33323a;
49
+ --color-medium-grey: #464452;
50
+ --color-medium-light-grey: #a9a29e;
51
+ --color-light-grey: #f5f5f5;
52
+ --color-dark-blue: #211d28;
53
+ --color-dark-blue-op-30: #211d284d;
54
+ --color-night-blue: #18151e;
55
+ --color-black: black;
56
+ --color-white: white;
57
+ --color-red: #ff504d;
58
+ --color-green: #00d692;
59
+ --color-light-green: #82eec7;
60
+ --color-dark-green: #00704e;
61
+ --color-yellow: #ffe032;
62
+ --color-blue: #001fcd;
63
+ /* Caution !!! Hover doesn't work with --color-white-op-20: rgba(var(--color-white), 0.2)); */
64
+ --color-white-op-20: rgba(255, 255, 255, 0.2);
65
+ --color-white-op-30: rgba(255, 255, 255, 0.3);
66
+ --color-black-op-20: rgba(0, 0, 0, 0.2);
67
+ --color-black-op-40: rgba(0, 0, 0, 0.4);
68
+ --color-black-op-60: rgba(0, 0, 0, 0.6);
69
+ --color-red-op-80: rgba(var(--color-red), 0.8);
70
+ --color-green-op-80: rgba(var(--color-green), 0.8);
71
+ --color-yellow-op-80: rgba(var(--color-yellow), 0.8);
72
+ /* global colors */
73
+ /* semantic colors */
74
+ --color-primary-light: var(--color-light-green);
75
+ --color-primary: var(--color-green);
76
+ --color-secondary: var(--color-beige);
77
+ /* feedback */
78
+ --color-success: var(--color-green);
79
+ --color-success-bg: var(--color-green-op-80);
80
+ --color-danger: var(--color-red);
81
+ --color-danger-bg: var(--color-red-op-80);
82
+ --color-warning: var(--color-yellow);
83
+ --color-warning-bg: var(--color-yellow-op-80);
84
+ /* typography */
85
+ --color-text: var(--color-foreground);
86
+ --color-text-dark: var(--color-medium-grey);
87
+ --color-text-op-80: rgba(var(--color-text), 0.8);
88
+ --color-text-op-99: rgba(var(--color-text), 0.99);
89
+ /* border */
90
+ /* body */
91
+ --color-body: var(--color-background);
92
+ }
93
+ @media (prefers-color-scheme: dark) {
94
+ :root {
95
+ --color-background: var(--color-dark-blue);
96
+ --color-background-darker: var(--color-night-blue);
97
+ --color-foreground: var(--color-beige);
98
+ --color-link: var(--color-green);
99
+ --color-highlight: var(--color-yellow);
100
+ }
101
+ }
102
+ @media (prefers-color-scheme: light) {
103
+ :root {
104
+ --color-background: var(--color-light-beige);
105
+ --color-background-darker: var(--color-dark-beige);
106
+ --color-foreground: var(--color-black);
107
+ --color-link: var(--color-dark-green);
108
+ --color-highlight: var(--color-blue);
109
+ }
110
+ }
111
+ @media (prefers-contrast: more) {
112
+ :root {
113
+ --color-background: var(--color-white);
114
+ --color-background-darker: var(--color-dark-beige);
115
+ --color-foreground: var(--color-black);
116
+ --color-link: var(--color-dark-green);
117
+ --color-highlight: var(--color-blue);
118
+ }
119
+ }
120
+ @media (prefers-color-scheme: dark) {
121
+ :root {
122
+ --color-border: var(--color-medium-grey);
123
+ }
124
+ }
125
+ @media (prefers-color-scheme: light) {
126
+ :root {
127
+ --color-border: var(--color-medium-light-grey);
128
+ }
129
+ }
130
+
131
+ .iroco-logo .prefers-color-scheme {
132
+ fill: var(--color-background);
133
+ }
134
+ @media (prefers-color-scheme: dark) {
135
+ .iroco-logo .prefers-color-scheme {
136
+ --color-background: var(--color-white);
137
+ }
138
+ }
139
+ @media (prefers-color-scheme: light) {
140
+ .iroco-logo .prefers-color-scheme {
141
+ --color-background: var(--color-black);
142
+ }
143
+ }
144
+ @media (prefers-contrast: more) {
145
+ .iroco-logo .prefers-color-scheme {
146
+ --color-background: var(--color-black);
147
+ }
148
+ }</style>