@iroco/ui 1.14.13 → 1.14.15

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 (10) hide show
  1. package/dist/Alert.svelte +24 -17
  2. package/dist/Button.svelte +38 -29
  3. package/dist/IconIrocoLogo.svelte +27 -20
  4. package/dist/ImageArticle.svelte +38 -29
  5. package/dist/IrocoLogo.svelte +27 -20
  6. package/dist/NavBar.svelte +38 -29
  7. package/dist/Navigation.svelte +31 -24
  8. package/dist/scss/button.scss +14 -12
  9. package/dist/scss/colors.scss +26 -21
  10. package/package.json +1 -1
package/dist/Alert.svelte CHANGED
@@ -57,30 +57,14 @@
57
57
  --color-green-op-80: rgba(var(--color-green), 0.8);
58
58
  --color-yellow-op-80: rgba(var(--color-yellow), 0.8);
59
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
60
  /* border */
77
61
  /* body */
78
- --color-body: var(--color-background);
79
62
  }
80
63
  @media (prefers-color-scheme: dark) {
81
64
  :root {
82
65
  --color-background: var(--color-dark-blue);
83
66
  --color-background-darker: var(--color-night-blue);
67
+ --color-background-grey: var(--color-dark-grey);
84
68
  --color-foreground: var(--color-beige);
85
69
  --color-link: var(--color-green);
86
70
  --color-highlight: var(--color-yellow);
@@ -90,6 +74,7 @@
90
74
  :root {
91
75
  --color-background: var(--color-light-beige);
92
76
  --color-background-darker: var(--color-dark-beige);
77
+ --color-background-grey: var(--color-light-grey);
93
78
  --color-foreground: var(--color-black);
94
79
  --color-link: var(--color-dark-green);
95
80
  --color-highlight: var(--color-blue);
@@ -99,11 +84,30 @@
99
84
  :root {
100
85
  --color-background: var(--color-white);
101
86
  --color-background-darker: var(--color-dark-beige);
87
+ --color-background-grey: var(--color-light-grey);
102
88
  --color-foreground: var(--color-black);
103
89
  --color-link: var(--color-dark-green);
104
90
  --color-highlight: var(--color-blue);
105
91
  }
106
92
  }
93
+ :root {
94
+ /* semantic colors */
95
+ --color-primary-light: var(--color-light-green);
96
+ --color-primary: var(--color-green);
97
+ --color-secondary: var(--color-beige);
98
+ /* feedback */
99
+ --color-success: var(--color-green);
100
+ --color-success-bg: var(--color-green-op-80);
101
+ --color-danger: var(--color-red);
102
+ --color-danger-bg: var(--color-red-op-80);
103
+ --color-warning: var(--color-yellow);
104
+ --color-warning-bg: var(--color-yellow-op-80);
105
+ /* typography */
106
+ --color-text: var(--color-foreground);
107
+ --color-text-dark: var(--color-medium-grey);
108
+ --color-text-op-80: rgba(var(--color-text), 0.8);
109
+ --color-text-op-99: rgba(var(--color-text), 0.99);
110
+ }
107
111
  @media (prefers-color-scheme: dark) {
108
112
  :root {
109
113
  --color-border: var(--color-medium-grey);
@@ -114,6 +118,9 @@
114
118
  --color-border: var(--color-medium-light-grey);
115
119
  }
116
120
  }
121
+ :root {
122
+ --color-body: var(--color-background);
123
+ }
117
124
 
118
125
  .alert {
119
126
  --color-icon-primary: var(--color-medium-light-grey);
package/dist/Button.svelte CHANGED
@@ -213,30 +213,14 @@
213
213
  --color-green-op-80: rgba(var(--color-green), 0.8);
214
214
  --color-yellow-op-80: rgba(var(--color-yellow), 0.8);
215
215
  /* global colors */
216
- /* semantic colors */
217
- --color-primary-light: var(--color-light-green);
218
- --color-primary: var(--color-green);
219
- --color-secondary: var(--color-beige);
220
- /* feedback */
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);
227
- /* typography */
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);
232
216
  /* border */
233
217
  /* body */
234
- --color-body: var(--color-background);
235
218
  }
236
219
  @media (prefers-color-scheme: dark) {
237
220
  :root {
238
221
  --color-background: var(--color-dark-blue);
239
222
  --color-background-darker: var(--color-night-blue);
223
+ --color-background-grey: var(--color-dark-grey);
240
224
  --color-foreground: var(--color-beige);
241
225
  --color-link: var(--color-green);
242
226
  --color-highlight: var(--color-yellow);
@@ -246,6 +230,7 @@
246
230
  :root {
247
231
  --color-background: var(--color-light-beige);
248
232
  --color-background-darker: var(--color-dark-beige);
233
+ --color-background-grey: var(--color-light-grey);
249
234
  --color-foreground: var(--color-black);
250
235
  --color-link: var(--color-dark-green);
251
236
  --color-highlight: var(--color-blue);
@@ -255,11 +240,30 @@
255
240
  :root {
256
241
  --color-background: var(--color-white);
257
242
  --color-background-darker: var(--color-dark-beige);
243
+ --color-background-grey: var(--color-light-grey);
258
244
  --color-foreground: var(--color-black);
259
245
  --color-link: var(--color-dark-green);
260
246
  --color-highlight: var(--color-blue);
261
247
  }
262
248
  }
249
+ :root {
250
+ /* semantic colors */
251
+ --color-primary-light: var(--color-light-green);
252
+ --color-primary: var(--color-green);
253
+ --color-secondary: var(--color-beige);
254
+ /* feedback */
255
+ --color-success: var(--color-green);
256
+ --color-success-bg: var(--color-green-op-80);
257
+ --color-danger: var(--color-red);
258
+ --color-danger-bg: var(--color-red-op-80);
259
+ --color-warning: var(--color-yellow);
260
+ --color-warning-bg: var(--color-yellow-op-80);
261
+ /* typography */
262
+ --color-text: var(--color-foreground);
263
+ --color-text-dark: var(--color-medium-grey);
264
+ --color-text-op-80: rgba(var(--color-text), 0.8);
265
+ --color-text-op-99: rgba(var(--color-text), 0.99);
266
+ }
263
267
  @media (prefers-color-scheme: dark) {
264
268
  :root {
265
269
  --color-border: var(--color-medium-grey);
@@ -270,6 +274,9 @@
270
274
  --color-border: var(--color-medium-light-grey);
271
275
  }
272
276
  }
277
+ :root {
278
+ --color-body: var(--color-background);
279
+ }
273
280
 
274
281
  .iroco-ui-button {
275
282
  --btn-bg: var(--color-foreground);
@@ -282,18 +289,6 @@
282
289
  --btn-disabled-label: var(--color-black-op-60);
283
290
  --btn-disabled-bg: var(--color-medium-light-grey);
284
291
  --btn-disabled-border: var(--color-black-op-60);
285
- cursor: pointer;
286
- -webkit-touch-callout: none;
287
- -webkit-user-select: none;
288
- -moz-user-select: none;
289
- -ms-user-select: none;
290
- user-select: none;
291
- border: none;
292
- flex-shrink: 0;
293
- margin: 1em 0;
294
- position: relative;
295
- text-transform: uppercase;
296
- border-radius: 0.3em;
297
292
  }
298
293
  @media (prefers-color-scheme: dark) {
299
294
  .iroco-ui-button {
@@ -307,6 +302,20 @@
307
302
  --dark-btn-hover: var(--color-black-op-20);
308
303
  }
309
304
  }
305
+ .iroco-ui-button {
306
+ cursor: pointer;
307
+ -webkit-touch-callout: none;
308
+ -webkit-user-select: none;
309
+ -moz-user-select: none;
310
+ -ms-user-select: none;
311
+ user-select: none;
312
+ border: none;
313
+ flex-shrink: 0;
314
+ margin: 1em 0;
315
+ position: relative;
316
+ text-transform: uppercase;
317
+ border-radius: 0.3em;
318
+ }
310
319
  .iroco-ui-button--basic {
311
320
  color: var(--btn-label);
312
321
  background: var(--btn-bg);
package/dist/IconIrocoLogo.svelte CHANGED
@@ -70,30 +70,14 @@
70
70
  --color-green-op-80: rgba(var(--color-green), 0.8);
71
71
  --color-yellow-op-80: rgba(var(--color-yellow), 0.8);
72
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
73
  /* border */
90
74
  /* body */
91
- --color-body: var(--color-background);
92
75
  }
93
76
  @media (prefers-color-scheme: dark) {
94
77
  :root {
95
78
  --color-background: var(--color-dark-blue);
96
79
  --color-background-darker: var(--color-night-blue);
80
+ --color-background-grey: var(--color-dark-grey);
97
81
  --color-foreground: var(--color-beige);
98
82
  --color-link: var(--color-green);
99
83
  --color-highlight: var(--color-yellow);
@@ -103,6 +87,7 @@
103
87
  :root {
104
88
  --color-background: var(--color-light-beige);
105
89
  --color-background-darker: var(--color-dark-beige);
90
+ --color-background-grey: var(--color-light-grey);
106
91
  --color-foreground: var(--color-black);
107
92
  --color-link: var(--color-dark-green);
108
93
  --color-highlight: var(--color-blue);
@@ -112,11 +97,30 @@
112
97
  :root {
113
98
  --color-background: var(--color-white);
114
99
  --color-background-darker: var(--color-dark-beige);
100
+ --color-background-grey: var(--color-light-grey);
115
101
  --color-foreground: var(--color-black);
116
102
  --color-link: var(--color-dark-green);
117
103
  --color-highlight: var(--color-blue);
118
104
  }
119
105
  }
106
+ :root {
107
+ /* semantic colors */
108
+ --color-primary-light: var(--color-light-green);
109
+ --color-primary: var(--color-green);
110
+ --color-secondary: var(--color-beige);
111
+ /* feedback */
112
+ --color-success: var(--color-green);
113
+ --color-success-bg: var(--color-green-op-80);
114
+ --color-danger: var(--color-red);
115
+ --color-danger-bg: var(--color-red-op-80);
116
+ --color-warning: var(--color-yellow);
117
+ --color-warning-bg: var(--color-yellow-op-80);
118
+ /* typography */
119
+ --color-text: var(--color-foreground);
120
+ --color-text-dark: var(--color-medium-grey);
121
+ --color-text-op-80: rgba(var(--color-text), 0.8);
122
+ --color-text-op-99: rgba(var(--color-text), 0.99);
123
+ }
120
124
  @media (prefers-color-scheme: dark) {
121
125
  :root {
122
126
  --color-border: var(--color-medium-grey);
@@ -127,10 +131,10 @@
127
131
  --color-border: var(--color-medium-light-grey);
128
132
  }
129
133
  }
130
-
131
- .iroco-logo .prefers-color-scheme {
132
- fill: var(--color-background);
134
+ :root {
135
+ --color-body: var(--color-background);
133
136
  }
137
+
134
138
  @media (prefers-color-scheme: dark) {
135
139
  .iroco-logo .prefers-color-scheme {
136
140
  --color-background: var(--color-white);
@@ -145,4 +149,7 @@
145
149
  .iroco-logo .prefers-color-scheme {
146
150
  --color-background: var(--color-black);
147
151
  }
152
+ }
153
+ .iroco-logo .prefers-color-scheme {
154
+ fill: var(--color-background);
148
155
  }</style>
package/dist/ImageArticle.svelte CHANGED
@@ -236,30 +236,14 @@
236
236
  --color-green-op-80: rgba(var(--color-green), 0.8);
237
237
  --color-yellow-op-80: rgba(var(--color-yellow), 0.8);
238
238
  /* global colors */
239
- /* semantic colors */
240
- --color-primary-light: var(--color-light-green);
241
- --color-primary: var(--color-green);
242
- --color-secondary: var(--color-beige);
243
- /* feedback */
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);
250
- /* typography */
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
239
  /* border */
256
240
  /* body */
257
- --color-body: var(--color-background);
258
241
  }
259
242
  @media (prefers-color-scheme: dark) {
260
243
  :root {
261
244
  --color-background: var(--color-dark-blue);
262
245
  --color-background-darker: var(--color-night-blue);
246
+ --color-background-grey: var(--color-dark-grey);
263
247
  --color-foreground: var(--color-beige);
264
248
  --color-link: var(--color-green);
265
249
  --color-highlight: var(--color-yellow);
@@ -269,6 +253,7 @@
269
253
  :root {
270
254
  --color-background: var(--color-light-beige);
271
255
  --color-background-darker: var(--color-dark-beige);
256
+ --color-background-grey: var(--color-light-grey);
272
257
  --color-foreground: var(--color-black);
273
258
  --color-link: var(--color-dark-green);
274
259
  --color-highlight: var(--color-blue);
@@ -278,11 +263,30 @@
278
263
  :root {
279
264
  --color-background: var(--color-white);
280
265
  --color-background-darker: var(--color-dark-beige);
266
+ --color-background-grey: var(--color-light-grey);
281
267
  --color-foreground: var(--color-black);
282
268
  --color-link: var(--color-dark-green);
283
269
  --color-highlight: var(--color-blue);
284
270
  }
285
271
  }
272
+ :root {
273
+ /* semantic colors */
274
+ --color-primary-light: var(--color-light-green);
275
+ --color-primary: var(--color-green);
276
+ --color-secondary: var(--color-beige);
277
+ /* feedback */
278
+ --color-success: var(--color-green);
279
+ --color-success-bg: var(--color-green-op-80);
280
+ --color-danger: var(--color-red);
281
+ --color-danger-bg: var(--color-red-op-80);
282
+ --color-warning: var(--color-yellow);
283
+ --color-warning-bg: var(--color-yellow-op-80);
284
+ /* typography */
285
+ --color-text: var(--color-foreground);
286
+ --color-text-dark: var(--color-medium-grey);
287
+ --color-text-op-80: rgba(var(--color-text), 0.8);
288
+ --color-text-op-99: rgba(var(--color-text), 0.99);
289
+ }
286
290
  @media (prefers-color-scheme: dark) {
287
291
  :root {
288
292
  --color-border: var(--color-medium-grey);
@@ -293,6 +297,9 @@
293
297
  --color-border: var(--color-medium-light-grey);
294
298
  }
295
299
  }
300
+ :root {
301
+ --color-body: var(--color-background);
302
+ }
296
303
 
297
304
  .iroco-ui-button {
298
305
  --btn-bg: var(--color-foreground);
@@ -305,18 +312,6 @@
305
312
  --btn-disabled-label: var(--color-black-op-60);
306
313
  --btn-disabled-bg: var(--color-medium-light-grey);
307
314
  --btn-disabled-border: var(--color-black-op-60);
308
- cursor: pointer;
309
- -webkit-touch-callout: none;
310
- -webkit-user-select: none;
311
- -moz-user-select: none;
312
- -ms-user-select: none;
313
- user-select: none;
314
- border: none;
315
- flex-shrink: 0;
316
- margin: 1em 0;
317
- position: relative;
318
- text-transform: uppercase;
319
- border-radius: 0.3em;
320
315
  }
321
316
  @media (prefers-color-scheme: dark) {
322
317
  .iroco-ui-button {
@@ -330,6 +325,20 @@
330
325
  --dark-btn-hover: var(--color-black-op-20);
331
326
  }
332
327
  }
328
+ .iroco-ui-button {
329
+ cursor: pointer;
330
+ -webkit-touch-callout: none;
331
+ -webkit-user-select: none;
332
+ -moz-user-select: none;
333
+ -ms-user-select: none;
334
+ user-select: none;
335
+ border: none;
336
+ flex-shrink: 0;
337
+ margin: 1em 0;
338
+ position: relative;
339
+ text-transform: uppercase;
340
+ border-radius: 0.3em;
341
+ }
333
342
  .iroco-ui-button--basic {
334
343
  color: var(--btn-label);
335
344
  background: var(--btn-bg);
package/dist/IrocoLogo.svelte CHANGED
@@ -94,30 +94,14 @@
94
94
  --color-green-op-80: rgba(var(--color-green), 0.8);
95
95
  --color-yellow-op-80: rgba(var(--color-yellow), 0.8);
96
96
  /* global colors */
97
- /* semantic colors */
98
- --color-primary-light: var(--color-light-green);
99
- --color-primary: var(--color-green);
100
- --color-secondary: var(--color-beige);
101
- /* feedback */
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);
108
- /* typography */
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
97
  /* border */
114
98
  /* body */
115
- --color-body: var(--color-background);
116
99
  }
117
100
  @media (prefers-color-scheme: dark) {
118
101
  :root {
119
102
  --color-background: var(--color-dark-blue);
120
103
  --color-background-darker: var(--color-night-blue);
104
+ --color-background-grey: var(--color-dark-grey);
121
105
  --color-foreground: var(--color-beige);
122
106
  --color-link: var(--color-green);
123
107
  --color-highlight: var(--color-yellow);
@@ -127,6 +111,7 @@
127
111
  :root {
128
112
  --color-background: var(--color-light-beige);
129
113
  --color-background-darker: var(--color-dark-beige);
114
+ --color-background-grey: var(--color-light-grey);
130
115
  --color-foreground: var(--color-black);
131
116
  --color-link: var(--color-dark-green);
132
117
  --color-highlight: var(--color-blue);
@@ -136,11 +121,30 @@
136
121
  :root {
137
122
  --color-background: var(--color-white);
138
123
  --color-background-darker: var(--color-dark-beige);
124
+ --color-background-grey: var(--color-light-grey);
139
125
  --color-foreground: var(--color-black);
140
126
  --color-link: var(--color-dark-green);
141
127
  --color-highlight: var(--color-blue);
142
128
  }
143
129
  }
130
+ :root {
131
+ /* semantic colors */
132
+ --color-primary-light: var(--color-light-green);
133
+ --color-primary: var(--color-green);
134
+ --color-secondary: var(--color-beige);
135
+ /* feedback */
136
+ --color-success: var(--color-green);
137
+ --color-success-bg: var(--color-green-op-80);
138
+ --color-danger: var(--color-red);
139
+ --color-danger-bg: var(--color-red-op-80);
140
+ --color-warning: var(--color-yellow);
141
+ --color-warning-bg: var(--color-yellow-op-80);
142
+ /* typography */
143
+ --color-text: var(--color-foreground);
144
+ --color-text-dark: var(--color-medium-grey);
145
+ --color-text-op-80: rgba(var(--color-text), 0.8);
146
+ --color-text-op-99: rgba(var(--color-text), 0.99);
147
+ }
144
148
  @media (prefers-color-scheme: dark) {
145
149
  :root {
146
150
  --color-border: var(--color-medium-grey);
@@ -151,10 +155,10 @@
151
155
  --color-border: var(--color-medium-light-grey);
152
156
  }
153
157
  }
154
-
155
- .iroco-logo .prefers-color-scheme {
156
- fill: var(--color-background);
158
+ :root {
159
+ --color-body: var(--color-background);
157
160
  }
161
+
158
162
  @media (prefers-color-scheme: dark) {
159
163
  .iroco-logo .prefers-color-scheme {
160
164
  --color-background: var(--color-white);
@@ -169,4 +173,7 @@
169
173
  .iroco-logo .prefers-color-scheme {
170
174
  --color-background: var(--color-black);
171
175
  }
176
+ }
177
+ .iroco-logo .prefers-color-scheme {
178
+ fill: var(--color-background);
172
179
  }</style>
package/dist/NavBar.svelte CHANGED
@@ -253,30 +253,14 @@
253
253
  --color-green-op-80: rgba(var(--color-green), 0.8);
254
254
  --color-yellow-op-80: rgba(var(--color-yellow), 0.8);
255
255
  /* global colors */
256
- /* semantic colors */
257
- --color-primary-light: var(--color-light-green);
258
- --color-primary: var(--color-green);
259
- --color-secondary: var(--color-beige);
260
- /* feedback */
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);
267
- /* typography */
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
256
  /* border */
273
257
  /* body */
274
- --color-body: var(--color-background);
275
258
  }
276
259
  @media (prefers-color-scheme: dark) {
277
260
  :root {
278
261
  --color-background: var(--color-dark-blue);
279
262
  --color-background-darker: var(--color-night-blue);
263
+ --color-background-grey: var(--color-dark-grey);
280
264
  --color-foreground: var(--color-beige);
281
265
  --color-link: var(--color-green);
282
266
  --color-highlight: var(--color-yellow);
@@ -286,6 +270,7 @@
286
270
  :root {
287
271
  --color-background: var(--color-light-beige);
288
272
  --color-background-darker: var(--color-dark-beige);
273
+ --color-background-grey: var(--color-light-grey);
289
274
  --color-foreground: var(--color-black);
290
275
  --color-link: var(--color-dark-green);
291
276
  --color-highlight: var(--color-blue);
@@ -295,11 +280,30 @@
295
280
  :root {
296
281
  --color-background: var(--color-white);
297
282
  --color-background-darker: var(--color-dark-beige);
283
+ --color-background-grey: var(--color-light-grey);
298
284
  --color-foreground: var(--color-black);
299
285
  --color-link: var(--color-dark-green);
300
286
  --color-highlight: var(--color-blue);
301
287
  }
302
288
  }
289
+ :root {
290
+ /* semantic colors */
291
+ --color-primary-light: var(--color-light-green);
292
+ --color-primary: var(--color-green);
293
+ --color-secondary: var(--color-beige);
294
+ /* feedback */
295
+ --color-success: var(--color-green);
296
+ --color-success-bg: var(--color-green-op-80);
297
+ --color-danger: var(--color-red);
298
+ --color-danger-bg: var(--color-red-op-80);
299
+ --color-warning: var(--color-yellow);
300
+ --color-warning-bg: var(--color-yellow-op-80);
301
+ /* typography */
302
+ --color-text: var(--color-foreground);
303
+ --color-text-dark: var(--color-medium-grey);
304
+ --color-text-op-80: rgba(var(--color-text), 0.8);
305
+ --color-text-op-99: rgba(var(--color-text), 0.99);
306
+ }
303
307
  @media (prefers-color-scheme: dark) {
304
308
  :root {
305
309
  --color-border: var(--color-medium-grey);
@@ -310,6 +314,9 @@
310
314
  --color-border: var(--color-medium-light-grey);
311
315
  }
312
316
  }
317
+ :root {
318
+ --color-body: var(--color-background);
319
+ }
313
320
 
314
321
  .iroco-ui-button {
315
322
  --btn-bg: var(--color-foreground);
@@ -322,18 +329,6 @@
322
329
  --btn-disabled-label: var(--color-black-op-60);
323
330
  --btn-disabled-bg: var(--color-medium-light-grey);
324
331
  --btn-disabled-border: var(--color-black-op-60);
325
- cursor: pointer;
326
- -webkit-touch-callout: none;
327
- -webkit-user-select: none;
328
- -moz-user-select: none;
329
- -ms-user-select: none;
330
- user-select: none;
331
- border: none;
332
- flex-shrink: 0;
333
- margin: 1em 0;
334
- position: relative;
335
- text-transform: uppercase;
336
- border-radius: 0.3em;
337
332
  }
338
333
  @media (prefers-color-scheme: dark) {
339
334
  .iroco-ui-button {
@@ -347,6 +342,20 @@
347
342
  --dark-btn-hover: var(--color-black-op-20);
348
343
  }
349
344
  }
345
+ .iroco-ui-button {
346
+ cursor: pointer;
347
+ -webkit-touch-callout: none;
348
+ -webkit-user-select: none;
349
+ -moz-user-select: none;
350
+ -ms-user-select: none;
351
+ user-select: none;
352
+ border: none;
353
+ flex-shrink: 0;
354
+ margin: 1em 0;
355
+ position: relative;
356
+ text-transform: uppercase;
357
+ border-radius: 0.3em;
358
+ }
350
359
  .iroco-ui-button--basic {
351
360
  color: var(--btn-label);
352
361
  background: var(--btn-bg);
package/dist/Navigation.svelte CHANGED
@@ -28,7 +28,7 @@
28
28
  let ariaLabel = $derived(baseUrl != null ? 'go to Iroco home' : null);
29
29
  </script>
30
30
 
31
- <div class="navigation--mobile">
31
+ <div class="navigation--mobile" role="banner">
32
32
  <div class="navigation--mobile__title-container">
33
33
  {#if title == null}
34
34
  <IrocoLogo {href} {ariaLabel} width="10em" height="3em" />
@@ -252,30 +252,14 @@
252
252
  --color-green-op-80: rgba(var(--color-green), 0.8);
253
253
  --color-yellow-op-80: rgba(var(--color-yellow), 0.8);
254
254
  /* global colors */
255
- /* semantic colors */
256
- --color-primary-light: var(--color-light-green);
257
- --color-primary: var(--color-green);
258
- --color-secondary: var(--color-beige);
259
- /* feedback */
260
- --color-success: var(--color-green);
261
- --color-success-bg: var(--color-green-op-80);
262
- --color-danger: var(--color-red);
263
- --color-danger-bg: var(--color-red-op-80);
264
- --color-warning: var(--color-yellow);
265
- --color-warning-bg: var(--color-yellow-op-80);
266
- /* typography */
267
- --color-text: var(--color-foreground);
268
- --color-text-dark: var(--color-medium-grey);
269
- --color-text-op-80: rgba(var(--color-text), 0.8);
270
- --color-text-op-99: rgba(var(--color-text), 0.99);
271
255
  /* border */
272
256
  /* body */
273
- --color-body: var(--color-background);
274
257
  }
275
258
  @media (prefers-color-scheme: dark) {
276
259
  :root {
277
260
  --color-background: var(--color-dark-blue);
278
261
  --color-background-darker: var(--color-night-blue);
262
+ --color-background-grey: var(--color-dark-grey);
279
263
  --color-foreground: var(--color-beige);
280
264
  --color-link: var(--color-green);
281
265
  --color-highlight: var(--color-yellow);
@@ -285,6 +269,7 @@
285
269
  :root {
286
270
  --color-background: var(--color-light-beige);
287
271
  --color-background-darker: var(--color-dark-beige);
272
+ --color-background-grey: var(--color-light-grey);
288
273
  --color-foreground: var(--color-black);
289
274
  --color-link: var(--color-dark-green);
290
275
  --color-highlight: var(--color-blue);
@@ -294,11 +279,30 @@
294
279
  :root {
295
280
  --color-background: var(--color-white);
296
281
  --color-background-darker: var(--color-dark-beige);
282
+ --color-background-grey: var(--color-light-grey);
297
283
  --color-foreground: var(--color-black);
298
284
  --color-link: var(--color-dark-green);
299
285
  --color-highlight: var(--color-blue);
300
286
  }
301
287
  }
288
+ :root {
289
+ /* semantic colors */
290
+ --color-primary-light: var(--color-light-green);
291
+ --color-primary: var(--color-green);
292
+ --color-secondary: var(--color-beige);
293
+ /* feedback */
294
+ --color-success: var(--color-green);
295
+ --color-success-bg: var(--color-green-op-80);
296
+ --color-danger: var(--color-red);
297
+ --color-danger-bg: var(--color-red-op-80);
298
+ --color-warning: var(--color-yellow);
299
+ --color-warning-bg: var(--color-yellow-op-80);
300
+ /* typography */
301
+ --color-text: var(--color-foreground);
302
+ --color-text-dark: var(--color-medium-grey);
303
+ --color-text-op-80: rgba(var(--color-text), 0.8);
304
+ --color-text-op-99: rgba(var(--color-text), 0.99);
305
+ }
302
306
  @media (prefers-color-scheme: dark) {
303
307
  :root {
304
308
  --color-border: var(--color-medium-grey);
@@ -309,6 +313,9 @@
309
313
  --color-border: var(--color-medium-light-grey);
310
314
  }
311
315
  }
316
+ :root {
317
+ --color-body: var(--color-background);
318
+ }
312
319
 
313
320
  .navigation {
314
321
  display: flex;
@@ -377,12 +384,6 @@
377
384
  padding-left: 0.5em;
378
385
  }
379
386
  }
380
- .navigation__title-container__title,
381
- .navigation--mobile__title-container__title {
382
- color: var(--color-background);
383
- font-weight: bold;
384
- font-size: 2em;
385
- }
386
387
  @media (prefers-color-scheme: dark) {
387
388
  .navigation__title-container__title,
388
389
  .navigation--mobile__title-container__title {
@@ -400,4 +401,10 @@
400
401
  .navigation--mobile__title-container__title {
401
402
  --color-background: var(--color-black);
402
403
  }
404
+ }
405
+ .navigation__title-container__title,
406
+ .navigation--mobile__title-container__title {
407
+ color: var(--color-background);
408
+ font-weight: bold;
409
+ font-size: 2em;
403
410
  }</style>
package/dist/scss/button.scss CHANGED
@@ -5,18 +5,20 @@
5
5
 
6
6
  .iroco-ui-button {
7
7
  @include colors.button-colors;
8
- cursor: pointer;
9
- -webkit-touch-callout: none;
10
- -webkit-user-select: none;
11
- -moz-user-select: none;
12
- -ms-user-select: none;
13
- user-select: none;
14
- border: none;
15
- flex-shrink: 0;
16
- margin: 1em 0;
17
- position: relative;
18
- text-transform: uppercase;
19
- border-radius: constants.$border-radius;
8
+ & {
9
+ cursor: pointer;
10
+ -webkit-touch-callout: none;
11
+ -webkit-user-select: none;
12
+ -moz-user-select: none;
13
+ -ms-user-select: none;
14
+ user-select: none;
15
+ border: none;
16
+ flex-shrink: 0;
17
+ margin: 1em 0;
18
+ position: relative;
19
+ text-transform: uppercase;
20
+ border-radius: constants.$border-radius;
21
+ }
20
22
 
21
23
  &--basic {
22
24
  color: var(--btn-label);
package/dist/scss/colors.scss CHANGED
@@ -35,6 +35,7 @@
35
35
  @media (prefers-color-scheme: dark) {
36
36
  --color-background: var(--color-dark-blue);
37
37
  --color-background-darker: var(--color-night-blue);
38
+ --color-background-grey: var(--color-dark-grey);
38
39
  --color-foreground: var(--color-beige);
39
40
  --color-link: var(--color-green);
40
41
  --color-highlight: var(--color-yellow);
@@ -42,6 +43,7 @@
42
43
  @media (prefers-color-scheme: light) {
43
44
  --color-background: var(--color-light-beige);
44
45
  --color-background-darker: var(--color-dark-beige);
46
+ --color-background-grey: var(--color-light-grey);
45
47
  --color-foreground: var(--color-black);
46
48
  --color-link: var(--color-dark-green);
47
49
  --color-highlight: var(--color-blue);
@@ -49,30 +51,31 @@
49
51
  @media (prefers-contrast: more) {
50
52
  --color-background: var(--color-white);
51
53
  --color-background-darker: var(--color-dark-beige);
54
+ --color-background-grey: var(--color-light-grey);
52
55
  --color-foreground: var(--color-black);
53
56
  --color-link: var(--color-dark-green);
54
57
  --color-highlight: var(--color-blue);
55
58
  }
56
-
57
- /* semantic colors */
58
- --color-primary-light: var(--color-light-green); // only use in mookup landing
59
- --color-primary: var(--color-green);
60
- --color-secondary: var(--color-beige);
61
-
62
- /* feedback */
63
- --color-success: var(--color-green);
64
- --color-success-bg: var(--color-green-op-80);
65
- --color-danger: var(--color-red);
66
- --color-danger-bg: var(--color-red-op-80);
67
- --color-warning: var(--color-yellow);
68
- --color-warning-bg: var(--color-yellow-op-80);
69
-
70
- /* typography */
71
- --color-text: var(--color-foreground);
72
- --color-text-dark: var(--color-medium-grey);
73
- --color-text-op-80: rgba(var(--color-text), 0.8);
74
- --color-text-op-99: rgba(var(--color-text), 0.99);
75
-
59
+ & {
60
+ /* semantic colors */
61
+ --color-primary-light: var(--color-light-green); // only use in mookup landing
62
+ --color-primary: var(--color-green);
63
+ --color-secondary: var(--color-beige);
64
+
65
+ /* feedback */
66
+ --color-success: var(--color-green);
67
+ --color-success-bg: var(--color-green-op-80);
68
+ --color-danger: var(--color-red);
69
+ --color-danger-bg: var(--color-red-op-80);
70
+ --color-warning: var(--color-yellow);
71
+ --color-warning-bg: var(--color-yellow-op-80);
72
+
73
+ /* typography */
74
+ --color-text: var(--color-foreground);
75
+ --color-text-dark: var(--color-medium-grey);
76
+ --color-text-op-80: rgba(var(--color-text), 0.8);
77
+ --color-text-op-99: rgba(var(--color-text), 0.99);
78
+ }
76
79
  /* border */
77
80
  @media (prefers-color-scheme: dark) {
78
81
  --color-border: var(--color-medium-grey);
@@ -82,7 +85,9 @@
82
85
  }
83
86
 
84
87
  /* body */
85
- --color-body: var(--color-background);
88
+ & {
89
+ --color-body: var(--color-background);
90
+ }
86
91
  }
87
92
 
88
93
  @mixin logo-color() {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@iroco/ui",
3
- "version": "1.14.13",
3
+ "version": "1.14.15",
4
4
  "description": "Iroco design system based on Svelte",
5
5
  "main": "dist/index.js",
6
6
  "scripts": {