@iroco/ui 1.14.14 → 1.14.16

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/dist/Alert.svelte +24 -17
  2. package/dist/Button.svelte +38 -29
  3. package/dist/IconIrocoLogo.stories.svelte +1 -0
  4. package/dist/IconIrocoLogo.svelte +27 -20
  5. package/dist/ImageArticle.svelte +38 -29
  6. package/dist/IrocoLogo.stories.svelte +1 -0
  7. package/dist/IrocoLogo.svelte +27 -20
  8. package/dist/NavBar.svelte +38 -29
  9. package/dist/Navigation.svelte +30 -23
  10. package/dist/NumberInput.svelte +1 -0
  11. package/dist/RadioButton.svelte +1 -0
  12. package/dist/TextInput.svelte +1 -0
  13. package/dist/scss/button.scss +14 -12
  14. package/dist/scss/colors.scss +26 -21
  15. package/dist/scss/forms.scss +1 -0
  16. 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.stories.svelte CHANGED
@@ -32,3 +32,4 @@
32
32
  {/snippet}
33
33
 
34
34
  <Story name="Default" />
35
+ <Story name="Linked" args={{ href: '#' }} />
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.stories.svelte CHANGED
@@ -31,3 +31,4 @@
31
31
  {/snippet}
32
32
 
33
33
  <Story name="Default" />
34
+ <Story name="Linked" args={{ href: '#' }} />
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
@@ -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/NumberInput.svelte CHANGED
@@ -102,6 +102,7 @@
102
102
  width: 1em;
103
103
  background-color: var(--form-element-bg);
104
104
  border-radius: 50%;
105
+ border: 1px solid;
105
106
  }
106
107
 
107
108
  .iroco-ui-radio input:checked ~ .radio-button-color {
package/dist/RadioButton.svelte CHANGED
@@ -98,6 +98,7 @@
98
98
  width: 1em;
99
99
  background-color: var(--form-element-bg);
100
100
  border-radius: 50%;
101
+ border: 1px solid;
101
102
  }
102
103
 
103
104
  .iroco-ui-radio input:checked ~ .radio-button-color {
package/dist/TextInput.svelte CHANGED
@@ -160,6 +160,7 @@
160
160
  width: 1em;
161
161
  background-color: var(--form-element-bg);
162
162
  border-radius: 50%;
163
+ border: 1px solid;
163
164
  }
164
165
 
165
166
  .iroco-ui-radio input:checked ~ .radio-button-color {
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); // color for specific text background
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/dist/scss/forms.scss CHANGED
@@ -95,6 +95,7 @@
95
95
  width: 1em;
96
96
  background-color: var(--form-element-bg);
97
97
  border-radius: 50%;
98
+ border: 1px solid;
98
99
  }
99
100
 
100
101
  .iroco-ui-radio input:checked ~ .radio-button-color {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@iroco/ui",
3
- "version": "1.14.14",
3
+ "version": "1.14.16",
4
4
  "description": "Iroco design system based on Svelte",
5
5
  "main": "dist/index.js",
6
6
  "scripts": {