@iroco/ui 1.13.0 → 1.14.5
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.
- package/README.md +2 -2
- package/dist/Button.svelte +96 -2
- package/dist/IconIrocoLogo.svelte +15 -5
- package/dist/IconIrocoLogo.svelte.d.ts +1 -1
- package/dist/ImageArticle.svelte +96 -2
- package/dist/IrocoLogo.svelte +110 -11
- package/dist/IrocoLogo.svelte.d.ts +1 -1
- package/dist/NavBar.svelte +96 -2
- package/dist/Navigation.stories.svelte +1 -0
- package/dist/Navigation.svelte +8 -7
- package/dist/Navigation.svelte.d.ts +1 -1
- package/dist/scss/button.scss +4 -2
- package/dist/scss/colors.scss +45 -4
- package/package.json +9 -1
package/README.md
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
# iroco-ui
|
|
2
2
|
|
|
3
|
-
[](https://ci.codeberg.org/repos/15881)
|
|
4
4
|
|
|
5
5
|
Design system for Iroco [based on SvelteKit](https://kit.svelte.dev/docs/packaging).
|
|
6
6
|
|
|
7
|
-
See the [Documentation](https://iroco
|
|
7
|
+
See the online [Documentation](https://iroco.codeberg.page/iroco-ui/).
|
|
8
8
|
|
|
9
9
|
# Install in your svelte application
|
|
10
10
|
|
package/dist/Button.svelte
CHANGED
|
@@ -184,6 +184,76 @@
|
|
|
184
184
|
}
|
|
185
185
|
}
|
|
186
186
|
|
|
187
|
+
:root {
|
|
188
|
+
--color-white-op-20: rgba(255, 255, 255, 0.2);
|
|
189
|
+
--color-white-op-30: rgba(255, 255, 255, 0.3);
|
|
190
|
+
--color-black-op-20: rgba(0, 0, 0, 0.2);
|
|
191
|
+
--color-black-op-40: rgba(0, 0, 0, 0.4);
|
|
192
|
+
--color-black-op-60: rgba(0, 0, 0, 0.6);
|
|
193
|
+
--color-beige-lighter: #fff9f4;
|
|
194
|
+
--color-beige: #f2ebe3;
|
|
195
|
+
--color-beige-darker: #eaddd5;
|
|
196
|
+
--color-dark-grey: #33323a;
|
|
197
|
+
--color-medium-grey: #464452;
|
|
198
|
+
--color-light-grey: #f5f5f5;
|
|
199
|
+
--color-dark-blue: #211d28;
|
|
200
|
+
--color-dark-blue-op-30: #211d284d;
|
|
201
|
+
--color-night-blue: #18151e;
|
|
202
|
+
--color-black: black;
|
|
203
|
+
--color-white: white;
|
|
204
|
+
--color-green: #00d692;
|
|
205
|
+
--color-green-light: #82eec7;
|
|
206
|
+
--color-green-dark: #00704e;
|
|
207
|
+
--color-green-alpha: #00d69280;
|
|
208
|
+
/* semantic colors */
|
|
209
|
+
--color-primary-light: var(--color-green-light);
|
|
210
|
+
--color-primary: var(--color-green);
|
|
211
|
+
--color-primary-bg: var(--color-green-alpha);
|
|
212
|
+
--color-primary-dark: var(--color-green-dark);
|
|
213
|
+
--color-secondary-light: #ffffff;
|
|
214
|
+
--color-secondary: #f2ebe3;
|
|
215
|
+
--color-secondary-dark: #a9a29e;
|
|
216
|
+
/* feedback */
|
|
217
|
+
--color-success: #00d692;
|
|
218
|
+
--color-success-bg: #00d69280;
|
|
219
|
+
--color-danger: #ff504d;
|
|
220
|
+
--color-danger-bg: #ff504d80;
|
|
221
|
+
--color-warning: #ffe032;
|
|
222
|
+
--color-warning-bg: #ffe03280;
|
|
223
|
+
/* typography */
|
|
224
|
+
--color-text-light: #ffffff;
|
|
225
|
+
--color-text: #f2ebe3;
|
|
226
|
+
--color-text-op-50: #f2ebe380;
|
|
227
|
+
--color-text-op-60: #f2ebe399;
|
|
228
|
+
--color-text-dark: #464452;
|
|
229
|
+
/* border */
|
|
230
|
+
--color-border: #464452;
|
|
231
|
+
/* body */
|
|
232
|
+
--color-body: var(--color-dark-blue);
|
|
233
|
+
/* forms */
|
|
234
|
+
--form-element-border: var(--color-beige);
|
|
235
|
+
--form-element-bg: var(--color-beige);
|
|
236
|
+
--form-text-placeholder: #a9a29e;
|
|
237
|
+
/* buttons */
|
|
238
|
+
--btn-primary-bg: var(--color-beige);
|
|
239
|
+
--btn-primary-border: var(--color-night-blue);
|
|
240
|
+
--btn-primary-label: var(--color-beige);
|
|
241
|
+
--dark-btn-primary-label: var(--color-beige);
|
|
242
|
+
--dark-btn-primary-bg: var(--color-night-blue);
|
|
243
|
+
--btn-secondary-bg: var(--color-secondary);
|
|
244
|
+
--btn-secondary-border: var(--color-night-blue);
|
|
245
|
+
--btn-secondary-label: var(--color-night-blue);
|
|
246
|
+
--btn-basic-label: var(--color-night-blue);
|
|
247
|
+
--btn-basic-bg: var(--color-beige);
|
|
248
|
+
--btn-basic-border: var(--color-night-blue);
|
|
249
|
+
--btn-disabled-label: var(--color-black-op-60);
|
|
250
|
+
--btn-disabled-bg: #a9a29e;
|
|
251
|
+
--btn-disabled-border: var(--color-black-op-60);
|
|
252
|
+
/* icons */
|
|
253
|
+
--color-icon-primary: #a9a29e;
|
|
254
|
+
--color-icon-secondary: inherit;
|
|
255
|
+
}
|
|
256
|
+
|
|
187
257
|
.iroco-ui-button {
|
|
188
258
|
cursor: pointer;
|
|
189
259
|
-webkit-touch-callout: none;
|
|
@@ -204,8 +274,32 @@
|
|
|
204
274
|
border: 1px solid var(--btn-secondary-border);
|
|
205
275
|
}
|
|
206
276
|
.iroco-ui-button--dark {
|
|
207
|
-
background: var(--
|
|
208
|
-
color: var(--
|
|
277
|
+
background: var(--color-background-darker);
|
|
278
|
+
color: var(--color-foreground);
|
|
279
|
+
}
|
|
280
|
+
@media (prefers-color-scheme: dark) {
|
|
281
|
+
.iroco-ui-button--dark {
|
|
282
|
+
--color-background: var(--color-dark-blue);
|
|
283
|
+
--color-background-darker: var(--color-night-blue);
|
|
284
|
+
--color-foreground: var(--color-beige);
|
|
285
|
+
--color-link: var(--color-success);
|
|
286
|
+
}
|
|
287
|
+
}
|
|
288
|
+
@media (prefers-color-scheme: light) {
|
|
289
|
+
.iroco-ui-button--dark {
|
|
290
|
+
--color-background: var(--color-beige-lighter);
|
|
291
|
+
--color-background-darker: var(--color-beige-darker);
|
|
292
|
+
--color-foreground: var(--color-black);
|
|
293
|
+
--color-link: var(--color-primary-dark);
|
|
294
|
+
}
|
|
295
|
+
}
|
|
296
|
+
@media (prefers-contrast: more) {
|
|
297
|
+
.iroco-ui-button--dark {
|
|
298
|
+
--color-background: var(--color-white);
|
|
299
|
+
--color-background-darker: var(--color-medium-grey);
|
|
300
|
+
--color-foreground: var(--color-black);
|
|
301
|
+
--color-link: var(--color-primary-dark);
|
|
302
|
+
}
|
|
209
303
|
}
|
|
210
304
|
.iroco-ui-button--success {
|
|
211
305
|
background: var(--color-success);
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
import { Color } from './definition';
|
|
3
3
|
|
|
4
4
|
interface Props {
|
|
5
|
-
href?: string;
|
|
5
|
+
href?: string | null;
|
|
6
6
|
ariaLabel?: string;
|
|
7
7
|
width?: string;
|
|
8
8
|
height?: string;
|
|
@@ -10,15 +10,15 @@
|
|
|
10
10
|
}
|
|
11
11
|
|
|
12
12
|
let {
|
|
13
|
-
href =
|
|
14
|
-
ariaLabel = '
|
|
13
|
+
href = null,
|
|
14
|
+
ariaLabel = 'Iroco Logo',
|
|
15
15
|
width = '5rem',
|
|
16
16
|
height = '5rem',
|
|
17
17
|
color = Color.green
|
|
18
18
|
}: Props = $props();
|
|
19
19
|
</script>
|
|
20
20
|
|
|
21
|
-
|
|
21
|
+
{#snippet irocoSvg()}
|
|
22
22
|
<svg {width} {height} viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
23
23
|
<path
|
|
24
24
|
d="M30.009 29.9999C29.3241 30.0677 28.7761 30.1355 28.4336 30.2033C28.0912 30.3389 27.8857 30.5423 27.7487 30.8812C27.6117 31.2202 27.5432 31.7626 27.5432 32.5084V47.1524C27.5432 47.8982 27.6117 48.4406 27.7487 48.7795C27.8857 49.1185 28.0912 49.3219 28.4336 49.4575C28.7761 49.5931 29.2556 49.6609 30.009 49.6609V50.2711C29.1186 50.2033 27.8172 50.2033 26.2419 50.2033C24.5295 50.2033 23.2282 50.2033 22.4062 50.2711V49.7965C23.0912 49.7287 23.6391 49.6609 23.9816 49.5931C24.3241 49.4575 24.5295 49.2541 24.6665 48.9151C24.8035 48.5762 24.872 48.0338 24.872 47.288V32.5762C24.872 31.8304 24.8035 31.288 24.6665 30.949C24.5295 30.6101 24.3241 30.4067 23.9816 30.2711C23.6391 30.1355 23.1597 30.0677 22.4062 30.0677V29.4575C23.2282 29.5253 24.5295 29.5253 26.2419 29.5253C27.8172 29.5253 29.1186 29.5253 30.009 29.4575V29.9999Z"
|
|
@@ -29,4 +29,14 @@
|
|
|
29
29
|
fill={color}
|
|
30
30
|
/>
|
|
31
31
|
</svg>
|
|
32
|
-
|
|
32
|
+
{/snippet}
|
|
33
|
+
|
|
34
|
+
{#if href != null}
|
|
35
|
+
<a class="iroco-logo" {href} aria-label={ariaLabel}>
|
|
36
|
+
{@render irocoSvg()}
|
|
37
|
+
</a>
|
|
38
|
+
{:else}
|
|
39
|
+
<div class="iroco-logo">
|
|
40
|
+
{@render irocoSvg()}
|
|
41
|
+
</div>
|
|
42
|
+
{/if}
|
package/dist/ImageArticle.svelte
CHANGED
|
@@ -207,6 +207,76 @@
|
|
|
207
207
|
}
|
|
208
208
|
}
|
|
209
209
|
|
|
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
|
+
--color-beige: #f2ebe3;
|
|
218
|
+
--color-beige-darker: #eaddd5;
|
|
219
|
+
--color-dark-grey: #33323a;
|
|
220
|
+
--color-medium-grey: #464452;
|
|
221
|
+
--color-light-grey: #f5f5f5;
|
|
222
|
+
--color-dark-blue: #211d28;
|
|
223
|
+
--color-dark-blue-op-30: #211d284d;
|
|
224
|
+
--color-night-blue: #18151e;
|
|
225
|
+
--color-black: black;
|
|
226
|
+
--color-white: white;
|
|
227
|
+
--color-green: #00d692;
|
|
228
|
+
--color-green-light: #82eec7;
|
|
229
|
+
--color-green-dark: #00704e;
|
|
230
|
+
--color-green-alpha: #00d69280;
|
|
231
|
+
/* semantic colors */
|
|
232
|
+
--color-primary-light: var(--color-green-light);
|
|
233
|
+
--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;
|
|
239
|
+
/* 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;
|
|
246
|
+
/* 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;
|
|
252
|
+
/* border */
|
|
253
|
+
--color-border: #464452;
|
|
254
|
+
/* 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;
|
|
278
|
+
}
|
|
279
|
+
|
|
210
280
|
.iroco-ui-button {
|
|
211
281
|
cursor: pointer;
|
|
212
282
|
-webkit-touch-callout: none;
|
|
@@ -227,8 +297,32 @@
|
|
|
227
297
|
border: 1px solid var(--btn-secondary-border);
|
|
228
298
|
}
|
|
229
299
|
.iroco-ui-button--dark {
|
|
230
|
-
background: var(--
|
|
231
|
-
color: var(--
|
|
300
|
+
background: var(--color-background-darker);
|
|
301
|
+
color: var(--color-foreground);
|
|
302
|
+
}
|
|
303
|
+
@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);
|
|
309
|
+
}
|
|
310
|
+
}
|
|
311
|
+
@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);
|
|
317
|
+
}
|
|
318
|
+
}
|
|
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
|
+
}
|
|
232
326
|
}
|
|
233
327
|
.iroco-ui-button--success {
|
|
234
328
|
background: var(--color-success);
|
package/dist/IrocoLogo.svelte
CHANGED
|
@@ -1,49 +1,49 @@
|
|
|
1
1
|
<script lang="ts">
|
|
2
2
|
interface Props {
|
|
3
|
-
href?: string;
|
|
3
|
+
href?: string | null;
|
|
4
4
|
ariaLabel?: string;
|
|
5
5
|
width?: string;
|
|
6
6
|
height?: string;
|
|
7
7
|
}
|
|
8
8
|
|
|
9
9
|
let {
|
|
10
|
-
href =
|
|
11
|
-
ariaLabel = '
|
|
10
|
+
href = null,
|
|
11
|
+
ariaLabel = 'Iroco Logo',
|
|
12
12
|
width = '10rem',
|
|
13
13
|
height = '10rem'
|
|
14
14
|
}: Props = $props();
|
|
15
15
|
</script>
|
|
16
16
|
|
|
17
|
-
|
|
17
|
+
{#snippet irocoSvg()}
|
|
18
18
|
<svg viewBox="0 0 832.33 249.52" role="img" {width} {height}>
|
|
19
19
|
<title>Iroco Logo</title>
|
|
20
20
|
<path
|
|
21
|
-
|
|
21
|
+
class="prefers-color-scheme"
|
|
22
22
|
d="M412,81.41c-7.34,0-12.07-5.19-12.07-12.37S404.77,56.66,412,56.66,424.17,61.85,424.17,69,419.13,81.41,412,81.41Zm10.7,118.4H401V103.54h21.7Z"
|
|
23
23
|
transform="translate(-0.44 -0.49)"
|
|
24
24
|
/>
|
|
25
25
|
<path
|
|
26
|
-
|
|
26
|
+
class="prefers-color-scheme"
|
|
27
27
|
d="M505.77,123.71h-6.72c-18,0-27.2,8.26-27.2,28.43v47.67h-21.7V103.54h21.7v14.21h.3c5.5-9.32,15.44-15.28,28.43-15.28h5.19Z"
|
|
28
28
|
transform="translate(-0.44 -0.49)"
|
|
29
29
|
/>
|
|
30
30
|
<path
|
|
31
|
-
|
|
31
|
+
class="prefers-color-scheme"
|
|
32
32
|
d="M566.44,201.34c-33,0-49.21-21.54-49.21-49.66S533.43,102,566.44,102s49.35,21.39,49.35,49.66C615.79,179.64,599.29,201.34,566.44,201.34Zm0-80.22c-19.26,0-27.51,12.68-27.51,30.56,0,17.72,8.4,30.56,27.66,30.56s27.5-12.68,27.5-30.56S585.69,121.12,566.44,121.12Z"
|
|
33
33
|
transform="translate(-0.44 -0.49)"
|
|
34
34
|
/>
|
|
35
35
|
<path
|
|
36
|
-
|
|
36
|
+
class="prefers-color-scheme"
|
|
37
37
|
d="M721.23,186.52c-11.77,10.7-24.45,14.82-39.12,14.82-33.62,0-49.51-21.54-49.51-48.9,0-28.11,17.88-50.42,49.81-50.42,15.9,0,28,4.27,38.51,14.21L706.1,131.05c-6.88-6.72-14.21-9.93-23.53-9.93-18.8.15-28.27,13.9-28.27,31.32,0,16.66,8.1,29.8,28,29.8,9.17,0,16.35-2.9,24.3-10.54Z"
|
|
38
38
|
transform="translate(-0.44 -0.49)"
|
|
39
39
|
/>
|
|
40
40
|
<path
|
|
41
|
-
|
|
41
|
+
class="prefers-color-scheme"
|
|
42
42
|
d="M783.42,201.34c-33,0-49.21-21.54-49.21-49.66S750.41,102,783.42,102s49.35,21.39,49.35,49.66C832.77,179.64,816.27,201.34,783.42,201.34Zm0-80.22c-19.26,0-27.51,12.68-27.51,30.56,0,17.72,8.41,30.56,27.66,30.56s27.5-12.68,27.5-30.56S802.67,121.12,783.42,121.12Z"
|
|
43
43
|
transform="translate(-0.44 -0.49)"
|
|
44
44
|
/>
|
|
45
45
|
<path
|
|
46
|
-
|
|
46
|
+
class="prefers-color-scheme"
|
|
47
47
|
d="M122.8,144.26a30.6,30.6,0,0,0-8.07,1.23,5.53,5.53,0,0,0-3.46,3.53,28,28,0,0,0-.92,8.46v76.24a28,28,0,0,0,.92,8.46,5.53,5.53,0,0,0,3.46,3.53,30.18,30.18,0,0,0,8.07,1.23V250q-7.06-.45-19.52-.46-13.22,0-19.67.46v-3.07a30.33,30.33,0,0,0,8.07-1.23,5.49,5.49,0,0,0,3.45-3.53,27.59,27.59,0,0,0,.93-8.46V157.48a27.59,27.59,0,0,0-.93-8.46,5.49,5.49,0,0,0-3.45-3.53,30.75,30.75,0,0,0-8.07-1.23v-3.08q6.45.47,19.67.47,12.3,0,19.52-.47Z"
|
|
48
48
|
transform="translate(-0.44 -0.49)"
|
|
49
49
|
/>
|
|
@@ -53,4 +53,103 @@
|
|
|
53
53
|
transform="translate(-0.44 -0.49)"
|
|
54
54
|
/>
|
|
55
55
|
</svg>
|
|
56
|
-
|
|
56
|
+
{/snippet}
|
|
57
|
+
|
|
58
|
+
{#if href != null}
|
|
59
|
+
<a class="iroco-logo" {href} aria-label={ariaLabel}>
|
|
60
|
+
{@render irocoSvg()}
|
|
61
|
+
</a>
|
|
62
|
+
{:else}
|
|
63
|
+
<div class="iroco-logo">
|
|
64
|
+
{@render irocoSvg()}
|
|
65
|
+
</div>
|
|
66
|
+
{/if}
|
|
67
|
+
|
|
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
|
+
--color-beige: #f2ebe3;
|
|
76
|
+
--color-beige-darker: #eaddd5;
|
|
77
|
+
--color-dark-grey: #33323a;
|
|
78
|
+
--color-medium-grey: #464452;
|
|
79
|
+
--color-light-grey: #f5f5f5;
|
|
80
|
+
--color-dark-blue: #211d28;
|
|
81
|
+
--color-dark-blue-op-30: #211d284d;
|
|
82
|
+
--color-night-blue: #18151e;
|
|
83
|
+
--color-black: black;
|
|
84
|
+
--color-white: white;
|
|
85
|
+
--color-green: #00d692;
|
|
86
|
+
--color-green-light: #82eec7;
|
|
87
|
+
--color-green-dark: #00704e;
|
|
88
|
+
--color-green-alpha: #00d69280;
|
|
89
|
+
/* semantic colors */
|
|
90
|
+
--color-primary-light: var(--color-green-light);
|
|
91
|
+
--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;
|
|
97
|
+
/* 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;
|
|
104
|
+
/* 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;
|
|
110
|
+
/* border */
|
|
111
|
+
--color-border: #464452;
|
|
112
|
+
/* 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;
|
|
136
|
+
}
|
|
137
|
+
|
|
138
|
+
.iroco-logo .prefers-color-scheme {
|
|
139
|
+
fill: var(--color-background);
|
|
140
|
+
}
|
|
141
|
+
@media (prefers-color-scheme: dark) {
|
|
142
|
+
.iroco-logo .prefers-color-scheme {
|
|
143
|
+
--color-background: var(--color-white);
|
|
144
|
+
}
|
|
145
|
+
}
|
|
146
|
+
@media (prefers-color-scheme: light) {
|
|
147
|
+
.iroco-logo .prefers-color-scheme {
|
|
148
|
+
--color-background: var(--color-black);
|
|
149
|
+
}
|
|
150
|
+
}
|
|
151
|
+
@media (prefers-contrast: more) {
|
|
152
|
+
.iroco-logo .prefers-color-scheme {
|
|
153
|
+
--color-background: var(--color-text-light);
|
|
154
|
+
}
|
|
155
|
+
}</style>
|
package/dist/NavBar.svelte
CHANGED
|
@@ -224,6 +224,76 @@
|
|
|
224
224
|
}
|
|
225
225
|
}
|
|
226
226
|
|
|
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
|
+
--color-beige: #f2ebe3;
|
|
235
|
+
--color-beige-darker: #eaddd5;
|
|
236
|
+
--color-dark-grey: #33323a;
|
|
237
|
+
--color-medium-grey: #464452;
|
|
238
|
+
--color-light-grey: #f5f5f5;
|
|
239
|
+
--color-dark-blue: #211d28;
|
|
240
|
+
--color-dark-blue-op-30: #211d284d;
|
|
241
|
+
--color-night-blue: #18151e;
|
|
242
|
+
--color-black: black;
|
|
243
|
+
--color-white: white;
|
|
244
|
+
--color-green: #00d692;
|
|
245
|
+
--color-green-light: #82eec7;
|
|
246
|
+
--color-green-dark: #00704e;
|
|
247
|
+
--color-green-alpha: #00d69280;
|
|
248
|
+
/* semantic colors */
|
|
249
|
+
--color-primary-light: var(--color-green-light);
|
|
250
|
+
--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;
|
|
256
|
+
/* 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;
|
|
263
|
+
/* 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;
|
|
269
|
+
/* border */
|
|
270
|
+
--color-border: #464452;
|
|
271
|
+
/* 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;
|
|
295
|
+
}
|
|
296
|
+
|
|
227
297
|
.iroco-ui-button {
|
|
228
298
|
cursor: pointer;
|
|
229
299
|
-webkit-touch-callout: none;
|
|
@@ -244,8 +314,32 @@
|
|
|
244
314
|
border: 1px solid var(--btn-secondary-border);
|
|
245
315
|
}
|
|
246
316
|
.iroco-ui-button--dark {
|
|
247
|
-
background: var(--
|
|
248
|
-
color: var(--
|
|
317
|
+
background: var(--color-background-darker);
|
|
318
|
+
color: var(--color-foreground);
|
|
319
|
+
}
|
|
320
|
+
@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);
|
|
326
|
+
}
|
|
327
|
+
}
|
|
328
|
+
@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);
|
|
334
|
+
}
|
|
335
|
+
}
|
|
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
|
+
}
|
|
249
343
|
}
|
|
250
344
|
.iroco-ui-button--success {
|
|
251
345
|
background: var(--color-success);
|
|
@@ -38,6 +38,7 @@
|
|
|
38
38
|
<Story name="Sidebar" args={{ type: 'sidebar' }} />
|
|
39
39
|
<Story name="Title" args={{ title: 'Alternative title' }} />
|
|
40
40
|
<Story name="Color" args={{ color: '#ABCDEF' }} />
|
|
41
|
+
<Story name="BaseUrl" args={{ baseUrl: '/' }} />
|
|
41
42
|
<Story
|
|
42
43
|
name="Active"
|
|
43
44
|
args={{
|
package/dist/Navigation.svelte
CHANGED
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
import { IconBurger, IconIrocoLogo, IrocoLogo, NavBar } from './';
|
|
5
5
|
|
|
6
6
|
interface Props {
|
|
7
|
-
baseUrl?: string;
|
|
7
|
+
baseUrl?: string | null;
|
|
8
8
|
navigationItems: Array<NavigationItem>;
|
|
9
9
|
type?: 'sidebar' | 'topbar';
|
|
10
10
|
title?: string | null;
|
|
@@ -14,7 +14,7 @@
|
|
|
14
14
|
}
|
|
15
15
|
|
|
16
16
|
let {
|
|
17
|
-
baseUrl =
|
|
17
|
+
baseUrl = null,
|
|
18
18
|
navigationItems,
|
|
19
19
|
type = 'topbar',
|
|
20
20
|
title = null,
|
|
@@ -24,15 +24,16 @@
|
|
|
24
24
|
}: Props = $props();
|
|
25
25
|
|
|
26
26
|
let showMenu = $state(false);
|
|
27
|
-
let href = $derived(`${baseUrl}/`);
|
|
27
|
+
let href = $derived(baseUrl != null ? `${baseUrl}/` : null);
|
|
28
|
+
let ariaLabel = $derived(baseUrl != null ? 'go to Iroco home' : null);
|
|
28
29
|
</script>
|
|
29
30
|
|
|
30
31
|
<div class="navigation--mobile">
|
|
31
32
|
<div class="navigation--mobile__title-container">
|
|
32
33
|
{#if title == null}
|
|
33
|
-
<IrocoLogo {href} width="10em" height="
|
|
34
|
+
<IrocoLogo {href} {ariaLabel} width="10em" height="3em" />
|
|
34
35
|
{:else}
|
|
35
|
-
<IconIrocoLogo {href} width="3em" height="3em" {color} />
|
|
36
|
+
<IconIrocoLogo {href} {ariaLabel} width="3em" height="3em" {color} />
|
|
36
37
|
<div class="navigation--mobile__title-container__title">{title}</div>
|
|
37
38
|
{/if}
|
|
38
39
|
</div>
|
|
@@ -56,9 +57,9 @@
|
|
|
56
57
|
<div class="navigation">
|
|
57
58
|
<div class="navigation__title-container">
|
|
58
59
|
{#if title == null}
|
|
59
|
-
<IrocoLogo {href} width="10em" height="
|
|
60
|
+
<IrocoLogo {href} {ariaLabel} width="10em" height="3em" />
|
|
60
61
|
{:else}
|
|
61
|
-
<IconIrocoLogo {href} width="3em" height="3em" />
|
|
62
|
+
<IconIrocoLogo {href} {ariaLabel} width="3em" height="3em" />
|
|
62
63
|
<div class="navigation__title-container__title">{title}</div>
|
|
63
64
|
{/if}
|
|
64
65
|
</div>
|
package/dist/scss/button.scss
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
@use './fonts';
|
|
2
2
|
@use './containers';
|
|
3
3
|
@use './constants';
|
|
4
|
+
@use './colors';
|
|
4
5
|
|
|
5
6
|
.iroco-ui-button {
|
|
6
7
|
cursor: pointer;
|
|
@@ -23,8 +24,9 @@
|
|
|
23
24
|
}
|
|
24
25
|
|
|
25
26
|
&--dark {
|
|
26
|
-
|
|
27
|
-
|
|
27
|
+
@include colors.global-colors();
|
|
28
|
+
background: var(--color-background-darker);
|
|
29
|
+
color: var(--color-foreground);
|
|
28
30
|
}
|
|
29
31
|
|
|
30
32
|
&--success {
|
package/dist/scss/colors.scss
CHANGED
|
@@ -9,19 +9,27 @@
|
|
|
9
9
|
--color-black-op-40: rgba(0, 0, 0, 0.4);
|
|
10
10
|
--color-black-op-60: rgba(0, 0, 0, 0.6);
|
|
11
11
|
|
|
12
|
+
--color-beige-lighter: #fff9f4;
|
|
12
13
|
--color-beige: #f2ebe3;
|
|
14
|
+
--color-beige-darker: #eaddd5;
|
|
13
15
|
--color-dark-grey: #33323a;
|
|
14
16
|
--color-medium-grey: #464452;
|
|
15
17
|
--color-light-grey: #f5f5f5;
|
|
16
18
|
--color-dark-blue: #211d28;
|
|
17
19
|
--color-dark-blue-op-30: #211d284d;
|
|
18
20
|
--color-night-blue: #18151e;
|
|
21
|
+
--color-black: black;
|
|
22
|
+
--color-white: white;
|
|
23
|
+
--color-green: #00d692;
|
|
24
|
+
--color-green-light: #82eec7;
|
|
25
|
+
--color-green-dark: #00704e;
|
|
26
|
+
--color-green-alpha: #00d69280;
|
|
19
27
|
|
|
20
28
|
/* semantic colors */
|
|
21
|
-
--color-primary-light:
|
|
22
|
-
--color-primary:
|
|
23
|
-
--color-primary-bg:
|
|
24
|
-
--color-primary-dark:
|
|
29
|
+
--color-primary-light: var(--color-green-light);
|
|
30
|
+
--color-primary: var(--color-green);
|
|
31
|
+
--color-primary-bg: var(--color-green-alpha);
|
|
32
|
+
--color-primary-dark: var(--color-green-dark);
|
|
25
33
|
|
|
26
34
|
--color-secondary-light: #ffffff;
|
|
27
35
|
--color-secondary: #f2ebe3;
|
|
@@ -77,3 +85,36 @@
|
|
|
77
85
|
--color-icon-primary: #a9a29e;
|
|
78
86
|
--color-icon-secondary: inherit;
|
|
79
87
|
}
|
|
88
|
+
|
|
89
|
+
@mixin logo-color() {
|
|
90
|
+
@media (prefers-color-scheme: dark) {
|
|
91
|
+
--color-background: var(--color-white);
|
|
92
|
+
}
|
|
93
|
+
@media (prefers-color-scheme: light) {
|
|
94
|
+
--color-background: var(--color-black);
|
|
95
|
+
}
|
|
96
|
+
@media (prefers-contrast: more) {
|
|
97
|
+
--color-background: var(--color-text-light);
|
|
98
|
+
}
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
@mixin global-colors() {
|
|
102
|
+
@media (prefers-color-scheme: dark) {
|
|
103
|
+
--color-background: var(--color-dark-blue);
|
|
104
|
+
--color-background-darker: var(--color-night-blue);
|
|
105
|
+
--color-foreground: var(--color-beige);
|
|
106
|
+
--color-link: var(--color-success);
|
|
107
|
+
}
|
|
108
|
+
@media (prefers-color-scheme: light) {
|
|
109
|
+
--color-background: var(--color-beige-lighter);
|
|
110
|
+
--color-background-darker: var(--color-beige-darker);
|
|
111
|
+
--color-foreground: var(--color-black);
|
|
112
|
+
--color-link: var(--color-primary-dark);
|
|
113
|
+
}
|
|
114
|
+
@media (prefers-contrast: more) {
|
|
115
|
+
--color-background: var(--color-white);
|
|
116
|
+
--color-background-darker: var(--color-medium-grey);
|
|
117
|
+
--color-foreground: var(--color-black);
|
|
118
|
+
--color-link: var(--color-primary-dark);
|
|
119
|
+
}
|
|
120
|
+
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@iroco/ui",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.14.5",
|
|
4
4
|
"description": "Iroco design system based on Svelte",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"scripts": {
|
|
@@ -276,5 +276,13 @@
|
|
|
276
276
|
"./dist/index.d.ts"
|
|
277
277
|
]
|
|
278
278
|
}
|
|
279
|
+
},
|
|
280
|
+
"release-it": {
|
|
281
|
+
"npm": {
|
|
282
|
+
"publish": false
|
|
283
|
+
},
|
|
284
|
+
"git": {
|
|
285
|
+
"commitMessage": "Release ${version} [skip ci]"
|
|
286
|
+
}
|
|
279
287
|
}
|
|
280
288
|
}
|