@iroco/ui 1.14.10 → 1.14.13

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 (15) hide show
  1. package/dist/Alert.svelte +90 -1
  2. package/dist/Button.svelte +96 -83
  3. package/dist/Highlight.stories.svelte +2 -2
  4. package/dist/IconIrocoLogo.svelte +108 -2
  5. package/dist/ImageArticle.svelte +96 -83
  6. package/dist/IrocoLogo.svelte +64 -50
  7. package/dist/NavBar.svelte +99 -84
  8. package/dist/Navigation.svelte +128 -3
  9. package/dist/NumberInput.svelte +2 -2
  10. package/dist/RadioButton.svelte +2 -2
  11. package/dist/TextInput.svelte +2 -2
  12. package/dist/scss/button.scss +14 -10
  13. package/dist/scss/colors.scss +86 -78
  14. package/dist/scss/forms.scss +2 -2
  15. package/package.json +1 -1
package/dist/ImageArticle.svelte CHANGED
@@ -208,79 +208,103 @@
208
208
  }
209
209
 
210
210
  :root {
211
- --color-white-op-20: rgba(255, 255, 255, 0.2);
212
- --color-white-op-30: rgba(255, 255, 255, 0.3);
213
- --color-black-op-20: rgba(0, 0, 0, 0.2);
214
- --color-black-op-40: rgba(0, 0, 0, 0.4);
215
- --color-black-op-60: rgba(0, 0, 0, 0.6);
216
- --color-beige-lighter: #fff9f4;
217
211
  --color-beige: #f2ebe3;
218
- --color-beige-darker: #eaddd5;
212
+ --color-light-beige: #fff9f4;
213
+ --color-dark-beige: #eaddd5;
219
214
  --color-dark-grey: #33323a;
220
215
  --color-medium-grey: #464452;
216
+ --color-medium-light-grey: #a9a29e;
221
217
  --color-light-grey: #f5f5f5;
222
218
  --color-dark-blue: #211d28;
223
219
  --color-dark-blue-op-30: #211d284d;
224
220
  --color-night-blue: #18151e;
225
221
  --color-black: black;
226
222
  --color-white: white;
223
+ --color-red: #ff504d;
227
224
  --color-green: #00d692;
228
- --color-green-light: #82eec7;
229
- --color-green-dark: #00704e;
230
- --color-green-alpha: #00d69280;
225
+ --color-light-green: #82eec7;
226
+ --color-dark-green: #00704e;
231
227
  --color-yellow: #ffe032;
232
- --color-yellow-op-80: #ffe03280;
233
228
  --color-blue: #001fcd;
229
+ /* Caution !!! Hover doesn't work with --color-white-op-20: rgba(var(--color-white), 0.2)); */
230
+ --color-white-op-20: rgba(255, 255, 255, 0.2);
231
+ --color-white-op-30: rgba(255, 255, 255, 0.3);
232
+ --color-black-op-20: rgba(0, 0, 0, 0.2);
233
+ --color-black-op-40: rgba(0, 0, 0, 0.4);
234
+ --color-black-op-60: rgba(0, 0, 0, 0.6);
235
+ --color-red-op-80: rgba(var(--color-red), 0.8);
236
+ --color-green-op-80: rgba(var(--color-green), 0.8);
237
+ --color-yellow-op-80: rgba(var(--color-yellow), 0.8);
238
+ /* global colors */
234
239
  /* semantic colors */
235
- --color-primary-light: var(--color-green-light);
240
+ --color-primary-light: var(--color-light-green);
236
241
  --color-primary: var(--color-green);
237
- --color-primary-bg: var(--color-green-alpha);
238
- --color-primary-dark: var(--color-green-dark);
239
- --color-secondary-light: #ffffff;
240
- --color-secondary: #f2ebe3;
241
- --color-secondary-dark: #a9a29e;
242
+ --color-secondary: var(--color-beige);
242
243
  /* feedback */
243
- --color-success: #00d692;
244
- --color-success-bg: #00d69280;
245
- --color-danger: #ff504d;
246
- --color-danger-bg: #ff504d80;
244
+ --color-success: var(--color-green);
245
+ --color-success-bg: var(--color-green-op-80);
246
+ --color-danger: var(--color-red);
247
+ --color-danger-bg: var(--color-red-op-80);
247
248
  --color-warning: var(--color-yellow);
248
249
  --color-warning-bg: var(--color-yellow-op-80);
249
250
  /* typography */
250
- --color-text-light: #ffffff;
251
- --color-text: #f2ebe3;
252
- --color-text-op-50: #f2ebe380;
253
- --color-text-op-60: #f2ebe399;
254
- --color-text-dark: #464452;
251
+ --color-text: var(--color-foreground);
252
+ --color-text-dark: var(--color-medium-grey);
253
+ --color-text-op-80: rgba(var(--color-text), 0.8);
254
+ --color-text-op-99: rgba(var(--color-text), 0.99);
255
255
  /* border */
256
- --color-border: #464452;
257
256
  /* body */
258
- --color-body: var(--color-dark-blue);
259
- /* forms */
260
- --form-element-border: var(--color-beige);
261
- --form-element-bg: var(--color-beige);
262
- --form-text-placeholder: #a9a29e;
263
- /* buttons */
264
- --btn-primary-bg: var(--color-beige);
265
- --btn-primary-border: var(--color-night-blue);
266
- --btn-primary-label: var(--color-beige);
267
- --dark-btn-primary-label: var(--color-beige);
268
- --dark-btn-primary-bg: var(--color-night-blue);
269
- --btn-secondary-bg: var(--color-secondary);
270
- --btn-secondary-border: var(--color-night-blue);
271
- --btn-secondary-label: var(--color-night-blue);
272
- --btn-basic-label: var(--color-night-blue);
273
- --btn-basic-bg: var(--color-beige);
274
- --btn-basic-border: var(--color-night-blue);
275
- --btn-disabled-label: var(--color-black-op-60);
276
- --btn-disabled-bg: #a9a29e;
277
- --btn-disabled-border: var(--color-black-op-60);
278
- /* icons */
279
- --color-icon-primary: #a9a29e;
280
- --color-icon-secondary: inherit;
257
+ --color-body: var(--color-background);
258
+ }
259
+ @media (prefers-color-scheme: dark) {
260
+ :root {
261
+ --color-background: var(--color-dark-blue);
262
+ --color-background-darker: var(--color-night-blue);
263
+ --color-foreground: var(--color-beige);
264
+ --color-link: var(--color-green);
265
+ --color-highlight: var(--color-yellow);
266
+ }
267
+ }
268
+ @media (prefers-color-scheme: light) {
269
+ :root {
270
+ --color-background: var(--color-light-beige);
271
+ --color-background-darker: var(--color-dark-beige);
272
+ --color-foreground: var(--color-black);
273
+ --color-link: var(--color-dark-green);
274
+ --color-highlight: var(--color-blue);
275
+ }
276
+ }
277
+ @media (prefers-contrast: more) {
278
+ :root {
279
+ --color-background: var(--color-white);
280
+ --color-background-darker: var(--color-dark-beige);
281
+ --color-foreground: var(--color-black);
282
+ --color-link: var(--color-dark-green);
283
+ --color-highlight: var(--color-blue);
284
+ }
285
+ }
286
+ @media (prefers-color-scheme: dark) {
287
+ :root {
288
+ --color-border: var(--color-medium-grey);
289
+ }
290
+ }
291
+ @media (prefers-color-scheme: light) {
292
+ :root {
293
+ --color-border: var(--color-medium-light-grey);
294
+ }
281
295
  }
282
296
 
283
297
  .iroco-ui-button {
298
+ --btn-bg: var(--color-foreground);
299
+ --btn-border: var(--color-background-darker);
300
+ --btn-label: var(--color-background-darker);
301
+ --colored-btn-label: var(--color-black);
302
+ --colored-btn-hover: var(--color-black-op-20);
303
+ --dark-btn-label: var(--color-foreground);
304
+ --dark-btn-bg: var(--color-background-darker);
305
+ --btn-disabled-label: var(--color-black-op-60);
306
+ --btn-disabled-bg: var(--color-medium-light-grey);
307
+ --btn-disabled-border: var(--color-black-op-60);
284
308
  cursor: pointer;
285
309
  -webkit-touch-callout: none;
286
310
  -webkit-user-select: none;
@@ -294,48 +318,34 @@
294
318
  text-transform: uppercase;
295
319
  border-radius: 0.3em;
296
320
  }
297
- .iroco-ui-button--basic {
298
- color: var(--btn-secondary-label);
299
- background: var(--btn-secondary-bg);
300
- border: 1px solid var(--btn-secondary-border);
301
- }
302
- .iroco-ui-button--dark {
303
- background: var(--color-background-darker);
304
- color: var(--color-foreground);
305
- }
306
321
  @media (prefers-color-scheme: dark) {
307
- .iroco-ui-button--dark {
308
- --color-background: var(--color-dark-blue);
309
- --color-background-darker: var(--color-night-blue);
310
- --color-foreground: var(--color-beige);
311
- --color-link: var(--color-success);
312
- --color-highlight: var(--color-yellow);
322
+ .iroco-ui-button {
323
+ --btn-hover: var(--color-black-op-20);
324
+ --dark-btn-hover: var(--color-white-op-20);
313
325
  }
314
326
  }
315
327
  @media (prefers-color-scheme: light) {
316
- .iroco-ui-button--dark {
317
- --color-background: var(--color-beige-lighter);
318
- --color-background-darker: var(--color-beige-darker);
319
- --color-foreground: var(--color-black);
320
- --color-link: var(--color-primary-dark);
321
- --color-highlight: var(--color-blue);
328
+ .iroco-ui-button {
329
+ --btn-hover: var(--color-white-op-20);
330
+ --dark-btn-hover: var(--color-black-op-20);
322
331
  }
323
332
  }
324
- @media (prefers-contrast: more) {
325
- .iroco-ui-button--dark {
326
- --color-background: var(--color-white);
327
- --color-background-darker: var(--color-beige-darker);
328
- --color-foreground: var(--color-black);
329
- --color-link: var(--color-primary-dark);
330
- --color-highlight: var(--color-blue);
331
- }
333
+ .iroco-ui-button--basic {
334
+ color: var(--btn-label);
335
+ background: var(--btn-bg);
336
+ border: 1px solid var(--btn-border);
337
+ }
338
+ .iroco-ui-button--dark {
339
+ background: var(--dark-btn-bg);
340
+ color: var(--dark-btn-label);
332
341
  }
333
342
  .iroco-ui-button--success {
334
343
  background: var(--color-success);
335
- color: var(--btn-secondary-label);
344
+ color: var(--colored-btn-label);
336
345
  }
337
346
  .iroco-ui-button--danger {
338
347
  background: var(--color-danger);
348
+ color: var(--colored-btn-label);
339
349
  }
340
350
  .iroco-ui-button--regular {
341
351
  padding: 1em 2em;
@@ -343,11 +353,14 @@
343
353
  .iroco-ui-button--small {
344
354
  padding: 0.5em 1em;
345
355
  }
346
- .iroco-ui-button--basic:hover, .iroco-ui-button--success:hover, .iroco-ui-button--danger:hover {
347
- box-shadow: inset 0 0 0 10em var(--color-black-op-20);
356
+ .iroco-ui-button--basic:hover {
357
+ box-shadow: inset 0 0 0 10em var(--btn-hover);
358
+ }
359
+ .iroco-ui-button--success:hover, .iroco-ui-button--danger:hover {
360
+ box-shadow: inset 0 0 0 10em var(--colored-btn-hover);
348
361
  }
349
362
  .iroco-ui-button--dark:hover {
350
- box-shadow: inset 0 0 0 10em var(--color-white-op-20);
363
+ box-shadow: inset 0 0 0 10em var(--dark-btn-hover);
351
364
  }
352
365
  .iroco-ui-button:active {
353
366
  box-shadow: none;
package/dist/IrocoLogo.svelte CHANGED
@@ -66,76 +66,90 @@
66
66
  {/if}
67
67
 
68
68
  <style>:root {
69
- --color-white-op-20: rgba(255, 255, 255, 0.2);
70
- --color-white-op-30: rgba(255, 255, 255, 0.3);
71
- --color-black-op-20: rgba(0, 0, 0, 0.2);
72
- --color-black-op-40: rgba(0, 0, 0, 0.4);
73
- --color-black-op-60: rgba(0, 0, 0, 0.6);
74
- --color-beige-lighter: #fff9f4;
75
69
  --color-beige: #f2ebe3;
76
- --color-beige-darker: #eaddd5;
70
+ --color-light-beige: #fff9f4;
71
+ --color-dark-beige: #eaddd5;
77
72
  --color-dark-grey: #33323a;
78
73
  --color-medium-grey: #464452;
74
+ --color-medium-light-grey: #a9a29e;
79
75
  --color-light-grey: #f5f5f5;
80
76
  --color-dark-blue: #211d28;
81
77
  --color-dark-blue-op-30: #211d284d;
82
78
  --color-night-blue: #18151e;
83
79
  --color-black: black;
84
80
  --color-white: white;
81
+ --color-red: #ff504d;
85
82
  --color-green: #00d692;
86
- --color-green-light: #82eec7;
87
- --color-green-dark: #00704e;
88
- --color-green-alpha: #00d69280;
83
+ --color-light-green: #82eec7;
84
+ --color-dark-green: #00704e;
89
85
  --color-yellow: #ffe032;
90
- --color-yellow-op-80: #ffe03280;
91
86
  --color-blue: #001fcd;
87
+ /* Caution !!! Hover doesn't work with --color-white-op-20: rgba(var(--color-white), 0.2)); */
88
+ --color-white-op-20: rgba(255, 255, 255, 0.2);
89
+ --color-white-op-30: rgba(255, 255, 255, 0.3);
90
+ --color-black-op-20: rgba(0, 0, 0, 0.2);
91
+ --color-black-op-40: rgba(0, 0, 0, 0.4);
92
+ --color-black-op-60: rgba(0, 0, 0, 0.6);
93
+ --color-red-op-80: rgba(var(--color-red), 0.8);
94
+ --color-green-op-80: rgba(var(--color-green), 0.8);
95
+ --color-yellow-op-80: rgba(var(--color-yellow), 0.8);
96
+ /* global colors */
92
97
  /* semantic colors */
93
- --color-primary-light: var(--color-green-light);
98
+ --color-primary-light: var(--color-light-green);
94
99
  --color-primary: var(--color-green);
95
- --color-primary-bg: var(--color-green-alpha);
96
- --color-primary-dark: var(--color-green-dark);
97
- --color-secondary-light: #ffffff;
98
- --color-secondary: #f2ebe3;
99
- --color-secondary-dark: #a9a29e;
100
+ --color-secondary: var(--color-beige);
100
101
  /* feedback */
101
- --color-success: #00d692;
102
- --color-success-bg: #00d69280;
103
- --color-danger: #ff504d;
104
- --color-danger-bg: #ff504d80;
102
+ --color-success: var(--color-green);
103
+ --color-success-bg: var(--color-green-op-80);
104
+ --color-danger: var(--color-red);
105
+ --color-danger-bg: var(--color-red-op-80);
105
106
  --color-warning: var(--color-yellow);
106
107
  --color-warning-bg: var(--color-yellow-op-80);
107
108
  /* typography */
108
- --color-text-light: #ffffff;
109
- --color-text: #f2ebe3;
110
- --color-text-op-50: #f2ebe380;
111
- --color-text-op-60: #f2ebe399;
112
- --color-text-dark: #464452;
109
+ --color-text: var(--color-foreground);
110
+ --color-text-dark: var(--color-medium-grey);
111
+ --color-text-op-80: rgba(var(--color-text), 0.8);
112
+ --color-text-op-99: rgba(var(--color-text), 0.99);
113
113
  /* border */
114
- --color-border: #464452;
115
114
  /* body */
116
- --color-body: var(--color-dark-blue);
117
- /* forms */
118
- --form-element-border: var(--color-beige);
119
- --form-element-bg: var(--color-beige);
120
- --form-text-placeholder: #a9a29e;
121
- /* buttons */
122
- --btn-primary-bg: var(--color-beige);
123
- --btn-primary-border: var(--color-night-blue);
124
- --btn-primary-label: var(--color-beige);
125
- --dark-btn-primary-label: var(--color-beige);
126
- --dark-btn-primary-bg: var(--color-night-blue);
127
- --btn-secondary-bg: var(--color-secondary);
128
- --btn-secondary-border: var(--color-night-blue);
129
- --btn-secondary-label: var(--color-night-blue);
130
- --btn-basic-label: var(--color-night-blue);
131
- --btn-basic-bg: var(--color-beige);
132
- --btn-basic-border: var(--color-night-blue);
133
- --btn-disabled-label: var(--color-black-op-60);
134
- --btn-disabled-bg: #a9a29e;
135
- --btn-disabled-border: var(--color-black-op-60);
136
- /* icons */
137
- --color-icon-primary: #a9a29e;
138
- --color-icon-secondary: inherit;
115
+ --color-body: var(--color-background);
116
+ }
117
+ @media (prefers-color-scheme: dark) {
118
+ :root {
119
+ --color-background: var(--color-dark-blue);
120
+ --color-background-darker: var(--color-night-blue);
121
+ --color-foreground: var(--color-beige);
122
+ --color-link: var(--color-green);
123
+ --color-highlight: var(--color-yellow);
124
+ }
125
+ }
126
+ @media (prefers-color-scheme: light) {
127
+ :root {
128
+ --color-background: var(--color-light-beige);
129
+ --color-background-darker: var(--color-dark-beige);
130
+ --color-foreground: var(--color-black);
131
+ --color-link: var(--color-dark-green);
132
+ --color-highlight: var(--color-blue);
133
+ }
134
+ }
135
+ @media (prefers-contrast: more) {
136
+ :root {
137
+ --color-background: var(--color-white);
138
+ --color-background-darker: var(--color-dark-beige);
139
+ --color-foreground: var(--color-black);
140
+ --color-link: var(--color-dark-green);
141
+ --color-highlight: var(--color-blue);
142
+ }
143
+ }
144
+ @media (prefers-color-scheme: dark) {
145
+ :root {
146
+ --color-border: var(--color-medium-grey);
147
+ }
148
+ }
149
+ @media (prefers-color-scheme: light) {
150
+ :root {
151
+ --color-border: var(--color-medium-light-grey);
152
+ }
139
153
  }
140
154
 
141
155
  .iroco-logo .prefers-color-scheme {
package/dist/NavBar.svelte CHANGED
@@ -225,79 +225,103 @@
225
225
  }
226
226
 
227
227
  :root {
228
- --color-white-op-20: rgba(255, 255, 255, 0.2);
229
- --color-white-op-30: rgba(255, 255, 255, 0.3);
230
- --color-black-op-20: rgba(0, 0, 0, 0.2);
231
- --color-black-op-40: rgba(0, 0, 0, 0.4);
232
- --color-black-op-60: rgba(0, 0, 0, 0.6);
233
- --color-beige-lighter: #fff9f4;
234
228
  --color-beige: #f2ebe3;
235
- --color-beige-darker: #eaddd5;
229
+ --color-light-beige: #fff9f4;
230
+ --color-dark-beige: #eaddd5;
236
231
  --color-dark-grey: #33323a;
237
232
  --color-medium-grey: #464452;
233
+ --color-medium-light-grey: #a9a29e;
238
234
  --color-light-grey: #f5f5f5;
239
235
  --color-dark-blue: #211d28;
240
236
  --color-dark-blue-op-30: #211d284d;
241
237
  --color-night-blue: #18151e;
242
238
  --color-black: black;
243
239
  --color-white: white;
240
+ --color-red: #ff504d;
244
241
  --color-green: #00d692;
245
- --color-green-light: #82eec7;
246
- --color-green-dark: #00704e;
247
- --color-green-alpha: #00d69280;
242
+ --color-light-green: #82eec7;
243
+ --color-dark-green: #00704e;
248
244
  --color-yellow: #ffe032;
249
- --color-yellow-op-80: #ffe03280;
250
245
  --color-blue: #001fcd;
246
+ /* Caution !!! Hover doesn't work with --color-white-op-20: rgba(var(--color-white), 0.2)); */
247
+ --color-white-op-20: rgba(255, 255, 255, 0.2);
248
+ --color-white-op-30: rgba(255, 255, 255, 0.3);
249
+ --color-black-op-20: rgba(0, 0, 0, 0.2);
250
+ --color-black-op-40: rgba(0, 0, 0, 0.4);
251
+ --color-black-op-60: rgba(0, 0, 0, 0.6);
252
+ --color-red-op-80: rgba(var(--color-red), 0.8);
253
+ --color-green-op-80: rgba(var(--color-green), 0.8);
254
+ --color-yellow-op-80: rgba(var(--color-yellow), 0.8);
255
+ /* global colors */
251
256
  /* semantic colors */
252
- --color-primary-light: var(--color-green-light);
257
+ --color-primary-light: var(--color-light-green);
253
258
  --color-primary: var(--color-green);
254
- --color-primary-bg: var(--color-green-alpha);
255
- --color-primary-dark: var(--color-green-dark);
256
- --color-secondary-light: #ffffff;
257
- --color-secondary: #f2ebe3;
258
- --color-secondary-dark: #a9a29e;
259
+ --color-secondary: var(--color-beige);
259
260
  /* feedback */
260
- --color-success: #00d692;
261
- --color-success-bg: #00d69280;
262
- --color-danger: #ff504d;
263
- --color-danger-bg: #ff504d80;
261
+ --color-success: var(--color-green);
262
+ --color-success-bg: var(--color-green-op-80);
263
+ --color-danger: var(--color-red);
264
+ --color-danger-bg: var(--color-red-op-80);
264
265
  --color-warning: var(--color-yellow);
265
266
  --color-warning-bg: var(--color-yellow-op-80);
266
267
  /* typography */
267
- --color-text-light: #ffffff;
268
- --color-text: #f2ebe3;
269
- --color-text-op-50: #f2ebe380;
270
- --color-text-op-60: #f2ebe399;
271
- --color-text-dark: #464452;
268
+ --color-text: var(--color-foreground);
269
+ --color-text-dark: var(--color-medium-grey);
270
+ --color-text-op-80: rgba(var(--color-text), 0.8);
271
+ --color-text-op-99: rgba(var(--color-text), 0.99);
272
272
  /* border */
273
- --color-border: #464452;
274
273
  /* body */
275
- --color-body: var(--color-dark-blue);
276
- /* forms */
277
- --form-element-border: var(--color-beige);
278
- --form-element-bg: var(--color-beige);
279
- --form-text-placeholder: #a9a29e;
280
- /* buttons */
281
- --btn-primary-bg: var(--color-beige);
282
- --btn-primary-border: var(--color-night-blue);
283
- --btn-primary-label: var(--color-beige);
284
- --dark-btn-primary-label: var(--color-beige);
285
- --dark-btn-primary-bg: var(--color-night-blue);
286
- --btn-secondary-bg: var(--color-secondary);
287
- --btn-secondary-border: var(--color-night-blue);
288
- --btn-secondary-label: var(--color-night-blue);
289
- --btn-basic-label: var(--color-night-blue);
290
- --btn-basic-bg: var(--color-beige);
291
- --btn-basic-border: var(--color-night-blue);
292
- --btn-disabled-label: var(--color-black-op-60);
293
- --btn-disabled-bg: #a9a29e;
294
- --btn-disabled-border: var(--color-black-op-60);
295
- /* icons */
296
- --color-icon-primary: #a9a29e;
297
- --color-icon-secondary: inherit;
274
+ --color-body: var(--color-background);
275
+ }
276
+ @media (prefers-color-scheme: dark) {
277
+ :root {
278
+ --color-background: var(--color-dark-blue);
279
+ --color-background-darker: var(--color-night-blue);
280
+ --color-foreground: var(--color-beige);
281
+ --color-link: var(--color-green);
282
+ --color-highlight: var(--color-yellow);
283
+ }
284
+ }
285
+ @media (prefers-color-scheme: light) {
286
+ :root {
287
+ --color-background: var(--color-light-beige);
288
+ --color-background-darker: var(--color-dark-beige);
289
+ --color-foreground: var(--color-black);
290
+ --color-link: var(--color-dark-green);
291
+ --color-highlight: var(--color-blue);
292
+ }
293
+ }
294
+ @media (prefers-contrast: more) {
295
+ :root {
296
+ --color-background: var(--color-white);
297
+ --color-background-darker: var(--color-dark-beige);
298
+ --color-foreground: var(--color-black);
299
+ --color-link: var(--color-dark-green);
300
+ --color-highlight: var(--color-blue);
301
+ }
302
+ }
303
+ @media (prefers-color-scheme: dark) {
304
+ :root {
305
+ --color-border: var(--color-medium-grey);
306
+ }
307
+ }
308
+ @media (prefers-color-scheme: light) {
309
+ :root {
310
+ --color-border: var(--color-medium-light-grey);
311
+ }
298
312
  }
299
313
 
300
314
  .iroco-ui-button {
315
+ --btn-bg: var(--color-foreground);
316
+ --btn-border: var(--color-background-darker);
317
+ --btn-label: var(--color-background-darker);
318
+ --colored-btn-label: var(--color-black);
319
+ --colored-btn-hover: var(--color-black-op-20);
320
+ --dark-btn-label: var(--color-foreground);
321
+ --dark-btn-bg: var(--color-background-darker);
322
+ --btn-disabled-label: var(--color-black-op-60);
323
+ --btn-disabled-bg: var(--color-medium-light-grey);
324
+ --btn-disabled-border: var(--color-black-op-60);
301
325
  cursor: pointer;
302
326
  -webkit-touch-callout: none;
303
327
  -webkit-user-select: none;
@@ -311,48 +335,34 @@
311
335
  text-transform: uppercase;
312
336
  border-radius: 0.3em;
313
337
  }
314
- .iroco-ui-button--basic {
315
- color: var(--btn-secondary-label);
316
- background: var(--btn-secondary-bg);
317
- border: 1px solid var(--btn-secondary-border);
318
- }
319
- .iroco-ui-button--dark {
320
- background: var(--color-background-darker);
321
- color: var(--color-foreground);
322
- }
323
338
  @media (prefers-color-scheme: dark) {
324
- .iroco-ui-button--dark {
325
- --color-background: var(--color-dark-blue);
326
- --color-background-darker: var(--color-night-blue);
327
- --color-foreground: var(--color-beige);
328
- --color-link: var(--color-success);
329
- --color-highlight: var(--color-yellow);
339
+ .iroco-ui-button {
340
+ --btn-hover: var(--color-black-op-20);
341
+ --dark-btn-hover: var(--color-white-op-20);
330
342
  }
331
343
  }
332
344
  @media (prefers-color-scheme: light) {
333
- .iroco-ui-button--dark {
334
- --color-background: var(--color-beige-lighter);
335
- --color-background-darker: var(--color-beige-darker);
336
- --color-foreground: var(--color-black);
337
- --color-link: var(--color-primary-dark);
338
- --color-highlight: var(--color-blue);
345
+ .iroco-ui-button {
346
+ --btn-hover: var(--color-white-op-20);
347
+ --dark-btn-hover: var(--color-black-op-20);
339
348
  }
340
349
  }
341
- @media (prefers-contrast: more) {
342
- .iroco-ui-button--dark {
343
- --color-background: var(--color-white);
344
- --color-background-darker: var(--color-beige-darker);
345
- --color-foreground: var(--color-black);
346
- --color-link: var(--color-primary-dark);
347
- --color-highlight: var(--color-blue);
348
- }
350
+ .iroco-ui-button--basic {
351
+ color: var(--btn-label);
352
+ background: var(--btn-bg);
353
+ border: 1px solid var(--btn-border);
354
+ }
355
+ .iroco-ui-button--dark {
356
+ background: var(--dark-btn-bg);
357
+ color: var(--dark-btn-label);
349
358
  }
350
359
  .iroco-ui-button--success {
351
360
  background: var(--color-success);
352
- color: var(--btn-secondary-label);
361
+ color: var(--colored-btn-label);
353
362
  }
354
363
  .iroco-ui-button--danger {
355
364
  background: var(--color-danger);
365
+ color: var(--colored-btn-label);
356
366
  }
357
367
  .iroco-ui-button--regular {
358
368
  padding: 1em 2em;
@@ -360,11 +370,14 @@
360
370
  .iroco-ui-button--small {
361
371
  padding: 0.5em 1em;
362
372
  }
363
- .iroco-ui-button--basic:hover, .iroco-ui-button--success:hover, .iroco-ui-button--danger:hover {
364
- box-shadow: inset 0 0 0 10em var(--color-black-op-20);
373
+ .iroco-ui-button--basic:hover {
374
+ box-shadow: inset 0 0 0 10em var(--btn-hover);
375
+ }
376
+ .iroco-ui-button--success:hover, .iroco-ui-button--danger:hover {
377
+ box-shadow: inset 0 0 0 10em var(--colored-btn-hover);
365
378
  }
366
379
  .iroco-ui-button--dark:hover {
367
- box-shadow: inset 0 0 0 10em var(--color-white-op-20);
380
+ box-shadow: inset 0 0 0 10em var(--dark-btn-hover);
368
381
  }
369
382
  .iroco-ui-button:active {
370
383
  box-shadow: none;
@@ -406,7 +419,7 @@
406
419
  height: 100%;
407
420
  width: 300px;
408
421
  position: absolute;
409
- top: 4.45em;
422
+ top: 4.5em;
410
423
  left: 0;
411
424
  overflow-x: hidden;
412
425
  display: flex;
@@ -472,6 +485,8 @@
472
485
  display: block;
473
486
  }
474
487
  .nav__sidebar__close, .nav__topbar__close {
488
+ --color-icon-primary: var(--color-medium-light-grey);
489
+ --color-icon-secondary: inherit;
475
490
  display: block;
476
491
  position: absolute;
477
492
  right: 0;