@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/dist/ImageArticle.svelte CHANGED
@@ -208,76 +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;
227
+ --color-yellow: #ffe032;
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 */
231
239
  /* semantic colors */
232
- --color-primary-light: var(--color-green-light);
240
+ --color-primary-light: var(--color-light-green);
233
241
  --color-primary: var(--color-green);
234
- --color-primary-bg: var(--color-green-alpha);
235
- --color-primary-dark: var(--color-green-dark);
236
- --color-secondary-light: #ffffff;
237
- --color-secondary: #f2ebe3;
238
- --color-secondary-dark: #a9a29e;
242
+ --color-secondary: var(--color-beige);
239
243
  /* feedback */
240
- --color-success: #00d692;
241
- --color-success-bg: #00d69280;
242
- --color-danger: #ff504d;
243
- --color-danger-bg: #ff504d80;
244
- --color-warning: #ffe032;
245
- --color-warning-bg: #ffe03280;
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);
248
+ --color-warning: var(--color-yellow);
249
+ --color-warning-bg: var(--color-yellow-op-80);
246
250
  /* typography */
247
- --color-text-light: #ffffff;
248
- --color-text: #f2ebe3;
249
- --color-text-op-50: #f2ebe380;
250
- --color-text-op-60: #f2ebe399;
251
- --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);
252
255
  /* border */
253
- --color-border: #464452;
254
256
  /* body */
255
- --color-body: var(--color-dark-blue);
256
- /* forms */
257
- --form-element-border: var(--color-beige);
258
- --form-element-bg: var(--color-beige);
259
- --form-text-placeholder: #a9a29e;
260
- /* buttons */
261
- --btn-primary-bg: var(--color-beige);
262
- --btn-primary-border: var(--color-night-blue);
263
- --btn-primary-label: var(--color-beige);
264
- --dark-btn-primary-label: var(--color-beige);
265
- --dark-btn-primary-bg: var(--color-night-blue);
266
- --btn-secondary-bg: var(--color-secondary);
267
- --btn-secondary-border: var(--color-night-blue);
268
- --btn-secondary-label: var(--color-night-blue);
269
- --btn-basic-label: var(--color-night-blue);
270
- --btn-basic-bg: var(--color-beige);
271
- --btn-basic-border: var(--color-night-blue);
272
- --btn-disabled-label: var(--color-black-op-60);
273
- --btn-disabled-bg: #a9a29e;
274
- --btn-disabled-border: var(--color-black-op-60);
275
- /* icons */
276
- --color-icon-primary: #a9a29e;
277
- --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
+ }
278
295
  }
279
296
 
280
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);
281
308
  cursor: pointer;
282
309
  -webkit-touch-callout: none;
283
310
  -webkit-user-select: none;
@@ -291,45 +318,34 @@
291
318
  text-transform: uppercase;
292
319
  border-radius: 0.3em;
293
320
  }
294
- .iroco-ui-button--basic {
295
- color: var(--btn-secondary-label);
296
- background: var(--btn-secondary-bg);
297
- border: 1px solid var(--btn-secondary-border);
298
- }
299
- .iroco-ui-button--dark {
300
- background: var(--color-background-darker);
301
- color: var(--color-foreground);
302
- }
303
321
  @media (prefers-color-scheme: dark) {
304
- .iroco-ui-button--dark {
305
- --color-background: var(--color-dark-blue);
306
- --color-background-darker: var(--color-night-blue);
307
- --color-foreground: var(--color-beige);
308
- --color-link: var(--color-success);
322
+ .iroco-ui-button {
323
+ --btn-hover: var(--color-black-op-20);
324
+ --dark-btn-hover: var(--color-white-op-20);
309
325
  }
310
326
  }
311
327
  @media (prefers-color-scheme: light) {
312
- .iroco-ui-button--dark {
313
- --color-background: var(--color-beige-lighter);
314
- --color-background-darker: var(--color-beige-darker);
315
- --color-foreground: var(--color-black);
316
- --color-link: var(--color-primary-dark);
328
+ .iroco-ui-button {
329
+ --btn-hover: var(--color-white-op-20);
330
+ --dark-btn-hover: var(--color-black-op-20);
317
331
  }
318
332
  }
319
- @media (prefers-contrast: more) {
320
- .iroco-ui-button--dark {
321
- --color-background: var(--color-white);
322
- --color-background-darker: var(--color-medium-grey);
323
- --color-foreground: var(--color-black);
324
- --color-link: var(--color-primary-dark);
325
- }
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);
326
341
  }
327
342
  .iroco-ui-button--success {
328
343
  background: var(--color-success);
329
- color: var(--btn-secondary-label);
344
+ color: var(--colored-btn-label);
330
345
  }
331
346
  .iroco-ui-button--danger {
332
347
  background: var(--color-danger);
348
+ color: var(--colored-btn-label);
333
349
  }
334
350
  .iroco-ui-button--regular {
335
351
  padding: 1em 2em;
@@ -337,11 +353,14 @@
337
353
  .iroco-ui-button--small {
338
354
  padding: 0.5em 1em;
339
355
  }
340
- .iroco-ui-button--basic:hover, .iroco-ui-button--success:hover, .iroco-ui-button--danger:hover {
341
- 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);
342
361
  }
343
362
  .iroco-ui-button--dark:hover {
344
- box-shadow: inset 0 0 0 10em var(--color-white-op-20);
363
+ box-shadow: inset 0 0 0 10em var(--dark-btn-hover);
345
364
  }
346
365
  .iroco-ui-button:active {
347
366
  box-shadow: none;
package/dist/IrocoLogo.svelte CHANGED
@@ -66,73 +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;
85
+ --color-yellow: #ffe032;
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 */
89
97
  /* semantic colors */
90
- --color-primary-light: var(--color-green-light);
98
+ --color-primary-light: var(--color-light-green);
91
99
  --color-primary: var(--color-green);
92
- --color-primary-bg: var(--color-green-alpha);
93
- --color-primary-dark: var(--color-green-dark);
94
- --color-secondary-light: #ffffff;
95
- --color-secondary: #f2ebe3;
96
- --color-secondary-dark: #a9a29e;
100
+ --color-secondary: var(--color-beige);
97
101
  /* feedback */
98
- --color-success: #00d692;
99
- --color-success-bg: #00d69280;
100
- --color-danger: #ff504d;
101
- --color-danger-bg: #ff504d80;
102
- --color-warning: #ffe032;
103
- --color-warning-bg: #ffe03280;
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);
106
+ --color-warning: var(--color-yellow);
107
+ --color-warning-bg: var(--color-yellow-op-80);
104
108
  /* typography */
105
- --color-text-light: #ffffff;
106
- --color-text: #f2ebe3;
107
- --color-text-op-50: #f2ebe380;
108
- --color-text-op-60: #f2ebe399;
109
- --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);
110
113
  /* border */
111
- --color-border: #464452;
112
114
  /* body */
113
- --color-body: var(--color-dark-blue);
114
- /* forms */
115
- --form-element-border: var(--color-beige);
116
- --form-element-bg: var(--color-beige);
117
- --form-text-placeholder: #a9a29e;
118
- /* buttons */
119
- --btn-primary-bg: var(--color-beige);
120
- --btn-primary-border: var(--color-night-blue);
121
- --btn-primary-label: var(--color-beige);
122
- --dark-btn-primary-label: var(--color-beige);
123
- --dark-btn-primary-bg: var(--color-night-blue);
124
- --btn-secondary-bg: var(--color-secondary);
125
- --btn-secondary-border: var(--color-night-blue);
126
- --btn-secondary-label: var(--color-night-blue);
127
- --btn-basic-label: var(--color-night-blue);
128
- --btn-basic-bg: var(--color-beige);
129
- --btn-basic-border: var(--color-night-blue);
130
- --btn-disabled-label: var(--color-black-op-60);
131
- --btn-disabled-bg: #a9a29e;
132
- --btn-disabled-border: var(--color-black-op-60);
133
- /* icons */
134
- --color-icon-primary: #a9a29e;
135
- --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
+ }
136
153
  }
137
154
 
138
155
  .iroco-logo .prefers-color-scheme {
@@ -150,6 +167,6 @@
150
167
  }
151
168
  @media (prefers-contrast: more) {
152
169
  .iroco-logo .prefers-color-scheme {
153
- --color-background: var(--color-text-light);
170
+ --color-background: var(--color-black);
154
171
  }
155
172
  }</style>
package/dist/NavBar.svelte CHANGED
@@ -225,76 +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;
244
+ --color-yellow: #ffe032;
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 */
248
256
  /* semantic colors */
249
- --color-primary-light: var(--color-green-light);
257
+ --color-primary-light: var(--color-light-green);
250
258
  --color-primary: var(--color-green);
251
- --color-primary-bg: var(--color-green-alpha);
252
- --color-primary-dark: var(--color-green-dark);
253
- --color-secondary-light: #ffffff;
254
- --color-secondary: #f2ebe3;
255
- --color-secondary-dark: #a9a29e;
259
+ --color-secondary: var(--color-beige);
256
260
  /* feedback */
257
- --color-success: #00d692;
258
- --color-success-bg: #00d69280;
259
- --color-danger: #ff504d;
260
- --color-danger-bg: #ff504d80;
261
- --color-warning: #ffe032;
262
- --color-warning-bg: #ffe03280;
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);
265
+ --color-warning: var(--color-yellow);
266
+ --color-warning-bg: var(--color-yellow-op-80);
263
267
  /* typography */
264
- --color-text-light: #ffffff;
265
- --color-text: #f2ebe3;
266
- --color-text-op-50: #f2ebe380;
267
- --color-text-op-60: #f2ebe399;
268
- --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);
269
272
  /* border */
270
- --color-border: #464452;
271
273
  /* body */
272
- --color-body: var(--color-dark-blue);
273
- /* forms */
274
- --form-element-border: var(--color-beige);
275
- --form-element-bg: var(--color-beige);
276
- --form-text-placeholder: #a9a29e;
277
- /* buttons */
278
- --btn-primary-bg: var(--color-beige);
279
- --btn-primary-border: var(--color-night-blue);
280
- --btn-primary-label: var(--color-beige);
281
- --dark-btn-primary-label: var(--color-beige);
282
- --dark-btn-primary-bg: var(--color-night-blue);
283
- --btn-secondary-bg: var(--color-secondary);
284
- --btn-secondary-border: var(--color-night-blue);
285
- --btn-secondary-label: var(--color-night-blue);
286
- --btn-basic-label: var(--color-night-blue);
287
- --btn-basic-bg: var(--color-beige);
288
- --btn-basic-border: var(--color-night-blue);
289
- --btn-disabled-label: var(--color-black-op-60);
290
- --btn-disabled-bg: #a9a29e;
291
- --btn-disabled-border: var(--color-black-op-60);
292
- /* icons */
293
- --color-icon-primary: #a9a29e;
294
- --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
+ }
295
312
  }
296
313
 
297
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);
298
325
  cursor: pointer;
299
326
  -webkit-touch-callout: none;
300
327
  -webkit-user-select: none;
@@ -308,45 +335,34 @@
308
335
  text-transform: uppercase;
309
336
  border-radius: 0.3em;
310
337
  }
311
- .iroco-ui-button--basic {
312
- color: var(--btn-secondary-label);
313
- background: var(--btn-secondary-bg);
314
- border: 1px solid var(--btn-secondary-border);
315
- }
316
- .iroco-ui-button--dark {
317
- background: var(--color-background-darker);
318
- color: var(--color-foreground);
319
- }
320
338
  @media (prefers-color-scheme: dark) {
321
- .iroco-ui-button--dark {
322
- --color-background: var(--color-dark-blue);
323
- --color-background-darker: var(--color-night-blue);
324
- --color-foreground: var(--color-beige);
325
- --color-link: var(--color-success);
339
+ .iroco-ui-button {
340
+ --btn-hover: var(--color-black-op-20);
341
+ --dark-btn-hover: var(--color-white-op-20);
326
342
  }
327
343
  }
328
344
  @media (prefers-color-scheme: light) {
329
- .iroco-ui-button--dark {
330
- --color-background: var(--color-beige-lighter);
331
- --color-background-darker: var(--color-beige-darker);
332
- --color-foreground: var(--color-black);
333
- --color-link: var(--color-primary-dark);
345
+ .iroco-ui-button {
346
+ --btn-hover: var(--color-white-op-20);
347
+ --dark-btn-hover: var(--color-black-op-20);
334
348
  }
335
349
  }
336
- @media (prefers-contrast: more) {
337
- .iroco-ui-button--dark {
338
- --color-background: var(--color-white);
339
- --color-background-darker: var(--color-medium-grey);
340
- --color-foreground: var(--color-black);
341
- --color-link: var(--color-primary-dark);
342
- }
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);
343
358
  }
344
359
  .iroco-ui-button--success {
345
360
  background: var(--color-success);
346
- color: var(--btn-secondary-label);
361
+ color: var(--colored-btn-label);
347
362
  }
348
363
  .iroco-ui-button--danger {
349
364
  background: var(--color-danger);
365
+ color: var(--colored-btn-label);
350
366
  }
351
367
  .iroco-ui-button--regular {
352
368
  padding: 1em 2em;
@@ -354,11 +370,14 @@
354
370
  .iroco-ui-button--small {
355
371
  padding: 0.5em 1em;
356
372
  }
357
- .iroco-ui-button--basic:hover, .iroco-ui-button--success:hover, .iroco-ui-button--danger:hover {
358
- 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);
359
378
  }
360
379
  .iroco-ui-button--dark:hover {
361
- box-shadow: inset 0 0 0 10em var(--color-white-op-20);
380
+ box-shadow: inset 0 0 0 10em var(--dark-btn-hover);
362
381
  }
363
382
  .iroco-ui-button:active {
364
383
  box-shadow: none;
@@ -400,7 +419,7 @@
400
419
  height: 100%;
401
420
  width: 300px;
402
421
  position: absolute;
403
- top: 4.45em;
422
+ top: 4.5em;
404
423
  left: 0;
405
424
  overflow-x: hidden;
406
425
  display: flex;
@@ -466,6 +485,8 @@
466
485
  display: block;
467
486
  }
468
487
  .nav__sidebar__close, .nav__topbar__close {
488
+ --color-icon-primary: var(--color-medium-light-grey);
489
+ --color-icon-secondary: inherit;
469
490
  display: block;
470
491
  position: absolute;
471
492
  right: 0;