@iroco/ui 1.14.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.
Files changed (9) hide show
  1. package/README.md +2 -2
  2. package/dist/Button.svelte +96 -2
  3. package/dist/IconIrocoLogo.svelte +3 -1
  4. package/dist/ImageArticle.svelte +96 -2
  5. package/dist/IrocoLogo.svelte +98 -7
  6. package/dist/NavBar.svelte +96 -2
  7. package/dist/scss/button.scss +4 -2
  8. package/dist/scss/colors.scss +45 -4
  9. package/package.json +9 -1
package/README.md CHANGED
@@ -1,10 +1,10 @@
1
1
  # iroco-ui
2
2
 
3
- [![CircleCI](https://dl.circleci.com/status-badge/img/gh/iroco-co/iroco-ui/tree/main.svg?style=svg)](https://dl.circleci.com/status-badge/redirect/gh/iroco-co/iroco-ui/tree/main)
3
+ [![status-badge](https://ci.codeberg.org/api/badges/15881/status.svg)](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-co.github.io/iroco-ui/).
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(--dark-btn-primary-bg);
208
- color: var(--dark-btn-primary-label);
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);
package/dist/IconIrocoLogo.svelte CHANGED
@@ -36,5 +36,7 @@
36
36
  {@render irocoSvg()}
37
37
  </a>
38
38
  {:else}
39
- {@render irocoSvg()}
39
+ <div class="iroco-logo">
40
+ {@render irocoSvg()}
41
+ </div>
40
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(--dark-btn-primary-bg);
231
- color: var(--dark-btn-primary-label);
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
@@ -18,32 +18,32 @@
18
18
  <svg viewBox="0 0 832.33 249.52" role="img" {width} {height}>
19
19
  <title>Iroco Logo</title>
20
20
  <path
21
- fill="white"
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
- fill="white"
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
- fill="white"
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
- fill="white"
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
- fill="white"
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
- fill="white"
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
  />
@@ -60,5 +60,96 @@
60
60
  {@render irocoSvg()}
61
61
  </a>
62
62
  {:else}
63
- {@render irocoSvg()}
63
+ <div class="iroco-logo">
64
+ {@render irocoSvg()}
65
+ </div>
64
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(--dark-btn-primary-bg);
248
- color: var(--dark-btn-primary-label);
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);
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
- background: var(--dark-btn-primary-bg);
27
- color: var(--dark-btn-primary-label);
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: #82eec7;
22
- --color-primary: #00d692;
23
- --color-primary-bg: #00d69280;
24
- --color-primary-dark: #00a873;
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.14.0",
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
  }