@sveltia/ui 0.20.1 → 0.20.2

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 (4) hide show
  1. package/package/components/util/app-shell.svelte +469 -2
  2. package/package/styles/core.scss +151 -149
  3. package/package/styles/variables.scss +198 -196
  4. package/package.json +3 -3
package/package/components/util/app-shell.svelte CHANGED
@@ -6,7 +6,6 @@
6
6
  -->
7
7
  <script>
8
8
  import { onMount } from 'svelte';
9
- import '../../styles/core.scss';
10
9
 
11
10
  /**
12
11
  * @typedef {object} Props
@@ -99,7 +98,475 @@
99
98
  {@render children?.()}
100
99
  </div>
101
100
 
102
- <style>.font-loader {
101
+ <style>@import url("https://fonts.googleapis.com/css2?family=Merriweather+Sans:ital,wght@0,300..800;1,300..800&family=Noto+Sans+Mono:wght@100..900&display=swap");
102
+ @import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=block");
103
+ :global(:root),
104
+ :global(:host) {
105
+ --sui-base-hue: 210;
106
+ --sui-highlight-foreground-color: hsl(var(--sui-foreground-color-1-hsl));
107
+ --sui-primary-foreground-color: hsl(var(--sui-foreground-color-2-hsl));
108
+ --sui-secondary-foreground-color: hsl(var(--sui-foreground-color-3-hsl));
109
+ --sui-tertiary-foreground-color: hsl(var(--sui-foreground-color-4-hsl));
110
+ --sui-disabled-foreground-color: hsl(var(--sui-foreground-color-5-hsl));
111
+ --sui-error-foreground-color: hsl(
112
+ var(--sui-error-color-hue) var(--sui-alert-foreground-color-saturation)
113
+ var(--sui-alert-foreground-color-lightness)
114
+ );
115
+ --sui-warning-foreground-color: hsl(
116
+ var(--sui-warning-color-hue) var(--sui-alert-foreground-color-saturation)
117
+ var(--sui-alert-foreground-color-lightness)
118
+ );
119
+ --sui-info-foreground-color: hsl(
120
+ var(--sui-info-color-hue) var(--sui-alert-foreground-color-saturation)
121
+ var(--sui-alert-foreground-color-lightness)
122
+ );
123
+ --sui-success-foreground-color: hsl(
124
+ var(--sui-success-color-hue) var(--sui-alert-foreground-color-saturation)
125
+ var(--sui-alert-foreground-color-lightness)
126
+ );
127
+ --sui-hover-background-color: hsl(var(--sui-background-color-5-hsl) / 35%);
128
+ --sui-selected-background-color: hsl(var(--sui-background-color-5-hsl) / 75%);
129
+ --sui-active-background-color: hsl(var(--sui-background-color-5-hsl) / 100%);
130
+ --sui-content-background-color: hsl(var(--sui-background-color-1-hsl));
131
+ --sui-code-background-color: hsl(var(--sui-background-color-4-hsl));
132
+ --sui-primary-background-color: hsl(var(--sui-background-color-2-hsl));
133
+ --sui-primary-background-color-translucent: hsl(var(--sui-background-color-2-hsl) / 80%);
134
+ --sui-secondary-background-color: hsl(var(--sui-background-color-3-hsl));
135
+ --sui-secondary-background-color-translucent: hsl(var(--sui-background-color-3-hsl) / 80%);
136
+ --sui-tertiary-background-color: hsl(var(--sui-background-color-4-hsl));
137
+ --sui-tertiary-background-color-translucent: hsl(var(--sui-background-color-4-hsl) / 80%);
138
+ --sui-disabled-background-color: hsl(var(--sui-background-color-4-hsl));
139
+ --sui-error-background-color: hsl(
140
+ var(--sui-error-color-hue) var(--sui-alert-background-color-saturation)
141
+ var(--sui-alert-background-color-lightness)
142
+ );
143
+ --sui-warning-background-color: hsl(
144
+ var(--sui-warning-color-hue) var(--sui-alert-background-color-saturation)
145
+ var(--sui-alert-background-color-lightness)
146
+ );
147
+ --sui-info-background-color: hsl(
148
+ var(--sui-info-color-hue) var(--sui-alert-background-color-saturation)
149
+ var(--sui-alert-background-color-lightness)
150
+ );
151
+ --sui-success-background-color: hsl(
152
+ var(--sui-success-color-hue) var(--sui-alert-background-color-saturation)
153
+ var(--sui-alert-background-color-lightness)
154
+ );
155
+ --sui-focus-ring-width: 4px;
156
+ --sui-primary-border-color: hsl(var(--sui-border-color-2-hsl));
157
+ --sui-secondary-border-color: hsl(var(--sui-border-color-3-hsl));
158
+ --sui-error-border-color: hsl(
159
+ var(--sui-error-color-hue) var(--sui-alert-border-color-saturation)
160
+ var(--sui-alert-border-color-lightness)
161
+ );
162
+ --sui-warning-border-color: hsl(
163
+ var(--sui-warning-color-hue) var(--sui-alert-border-color-saturation)
164
+ var(--sui-alert-border-color-lightness)
165
+ );
166
+ --sui-info-border-color: hsl(
167
+ var(--sui-info-color-hue) var(--sui-alert-border-color-saturation)
168
+ var(--sui-alert-border-color-lightness)
169
+ );
170
+ --sui-success-border-color: hsl(
171
+ var(--sui-success-color-hue) var(--sui-alert-border-color-saturation)
172
+ var(--sui-alert-border-color-lightness)
173
+ );
174
+ --sui-popup-shadow-color: hsl(var(--sui-shadow-color) / 40%);
175
+ --sui-popup-backdrop-color: hsl(var(--sui-shadow-color) / 40%);
176
+ --sui-font-family-default: "Merriweather Sans", sans-serif;
177
+ --sui-font-size-xxx-large: 23px;
178
+ --sui-font-size-xx-large: 19px;
179
+ --sui-font-size-x-large: 17px;
180
+ --sui-font-size-large: 15px;
181
+ --sui-font-size-default: 13px;
182
+ --sui-font-size-small: 11px;
183
+ --sui-font-size-x-small: 9px;
184
+ --sui-font-weight-normal: 325;
185
+ --sui-font-weight-bold: 625;
186
+ --sui-font-family-monospace: "Noto Sans Mono", monospace;
187
+ --sui-font-size-monospace: 0.9em;
188
+ --sui-line-height-default: 1.25;
189
+ --sui-line-height-compact: 1.5;
190
+ --sui-line-height-comfortable: 1.75;
191
+ --sui-word-spacing-normal: 0.1ex;
192
+ --sui-paragraph-margin: 1.75em;
193
+ --sui-control-small-border-width: 1px;
194
+ --sui-control-small-border-radius: calc(var(--sui-control-small-height) / 8);
195
+ --sui-control-small-padding: 0 calc((var(--sui-control-small-height) / 5));
196
+ --sui-control-small-height: 24px;
197
+ --sui-control-medium-border-width: 1px;
198
+ --sui-control-medium-border-radius: calc(var(--sui-control-medium-height) / 8);
199
+ --sui-control-medium-padding: 0 calc((var(--sui-control-medium-height) / 4));
200
+ --sui-control-medium-height: 32px;
201
+ --sui-control-large-border-width: 1px;
202
+ --sui-control-large-border-radius: calc(var(--sui-control-large-height) / 8);
203
+ --sui-control-large-padding: 0 calc((var(--sui-control-large-height) / 3));
204
+ --sui-control-large-height: 48px;
205
+ --sui-control-border-color: hsl(var(--sui-border-color-2-hsl));
206
+ --sui-control-foreground-color: var(--sui-primary-foreground-color);
207
+ --sui-control-background-color: hsl(var(--sui-background-color-4-hsl));
208
+ --sui-control-font-family: var(--sui-font-family-default);
209
+ --sui-control-font-size: var(--sui-font-size-default);
210
+ --sui-control-line-height: var(--sui-line-height-compact);
211
+ --sui-button-small-border-radius: var(--sui-control-small-border-radius);
212
+ --sui-button-small-padding: var(--sui-control-small-padding);
213
+ --sui-button-small-height: var(--sui-control-small-height);
214
+ --sui-button-medium-border-radius: var(--sui-control-medium-border-radius);
215
+ --sui-button-medium-padding: var(--sui-control-medium-padding);
216
+ --sui-button-medium-height: var(--sui-control-medium-height);
217
+ --sui-button-large-border-radius: var(--sui-control-large-border-radius);
218
+ --sui-button-large-padding: var(--sui-control-large-padding);
219
+ --sui-button-large-height: var(--sui-control-large-height);
220
+ --sui-button-border-color: var(--sui-control-border-color);
221
+ --sui-button-background-color: var(--sui-control-background-color);
222
+ --sui-checkbox-border-radius: var(--sui-control-medium-border-radius);
223
+ --sui-checkbox-height: 20px;
224
+ --sui-checkbox-border-color: hsl(var(--sui-border-color-1-hsl));
225
+ --sui-checkbox-background-color: var(--sui-control-background-color);
226
+ --sui-option-border-radius: var(--sui-control-medium-border-radius);
227
+ --sui-option-padding: calc((var(--sui-control-medium-height) / 6))
228
+ calc((var(--sui-control-medium-height) / 5));
229
+ --sui-option-height: var(--sui-control-medium-height);
230
+ --sui-listbox-border-radius: var(--sui-control-medium-border-radius);
231
+ --sui-listbox-border-color: var(--sui-control-border-color);
232
+ --sui-listbox-foreground-color: var(--sui-control-foreground-color);
233
+ --sui-listbox-background-color: hsl(var(--sui-background-color-1-hsl));
234
+ --sui-textbox-border-radius: var(--sui-control-medium-border-radius);
235
+ --sui-textbox-height: var(--sui-control-medium-height);
236
+ --sui-textbox-border-color: var(--sui-control-border-color);
237
+ --sui-textbox-foreground-color: var(--sui-control-foreground-color);
238
+ --sui-textbox-background-color: hsl(var(--sui-background-color-1-hsl));
239
+ --sui-textbox-font-family: var(--sui-font-family-default);
240
+ --sui-textbox-font-size: var(--sui-font-size-default);
241
+ --sui-textbox-singleline-padding: 0 8px;
242
+ --sui-textbox-singleline-min-width: 240px;
243
+ --sui-textbox-singleline-line-height: var(--sui-line-height-compact);
244
+ --sui-textbox-multiline-padding: 16px;
245
+ --sui-textbox-multiline-min-width: 480px;
246
+ --sui-textbox-multiline-line-height: var(--sui-line-height-comfortable);
247
+ --sui-tab-height: var(--sui-control-medium-height);
248
+ --sui-tab-small-height: var(--sui-control-small-height);
249
+ --sui-tab-medium-height: var(--sui-control-medium-height);
250
+ --sui-tab-large-height: var(--sui-control-large-height);
251
+ --sui-primary-toolbar-size: 48px;
252
+ --sui-secondary-toolbar-size: 40px;
253
+ --sui-primary-row-height: 48px;
254
+ --sui-secondary-row-height: 40px;
255
+ }
256
+ @media (pointer: coarse) {
257
+ :global(:root),
258
+ :global(:host) {
259
+ --sui-control-small-height: 30px;
260
+ --sui-control-medium-height: 40px;
261
+ --sui-control-large-height: 60px;
262
+ --sui-checkbox-height: 24px;
263
+ --sui-primary-toolbar-size: 56px;
264
+ --sui-secondary-toolbar-size: 48px;
265
+ --sui-primary-row-height: 56px;
266
+ --sui-secondary-row-height: 48px;
267
+ }
268
+ }
269
+ @media (prefers-reduced-transparency) {
270
+ :global(:root),
271
+ :global(:host) {
272
+ --sui-primary-background-color-translucent: hsl(var(--sui-background-color-2-hsl));
273
+ --sui-secondary-background-color-translucent: hsl(var(--sui-background-color-3-hsl));
274
+ --sui-tertiary-background-color-translucent: hsl(var(--sui-background-color-4-hsl));
275
+ }
276
+ }
277
+ :global(:root[data-theme=light]),
278
+ :global(:host[data-theme=light]) {
279
+ color-scheme: light;
280
+ --sui-foreground-color-1-hsl: var(--sui-base-hue) 5% 5%;
281
+ --sui-foreground-color-2-hsl: var(--sui-base-hue) 5% 25%;
282
+ --sui-foreground-color-3-hsl: var(--sui-base-hue) 5% 35%;
283
+ --sui-foreground-color-4-hsl: var(--sui-base-hue) 5% 45%;
284
+ --sui-foreground-color-5-hsl: var(--sui-base-hue) 5% 65%;
285
+ --sui-background-color-1-hsl: var(--sui-base-hue) 5% 100%;
286
+ --sui-background-color-2-hsl: var(--sui-base-hue) 5% 98%;
287
+ --sui-background-color-3-hsl: var(--sui-base-hue) 5% 96%;
288
+ --sui-background-color-4-hsl: var(--sui-base-hue) 5% 94%;
289
+ --sui-background-color-5-hsl: var(--sui-base-hue) 5% 84%;
290
+ --sui-border-color-1-hsl: var(--sui-base-hue) 5% 65%;
291
+ --sui-border-color-2-hsl: var(--sui-base-hue) 5% 84%;
292
+ --sui-border-color-3-hsl: var(--sui-base-hue) 5% 88%;
293
+ --sui-shadow-color: var(--sui-base-hue) 10% 0%;
294
+ --sui-primary-accent-color-text: hsl(var(--sui-base-hue) 80% 40%);
295
+ --sui-primary-accent-color-light: hsl(var(--sui-base-hue) 80% 45%);
296
+ --sui-primary-accent-color: hsl(var(--sui-base-hue) 80% 40%);
297
+ --sui-primary-accent-color-dark: hsl(var(--sui-base-hue) 80% 35%);
298
+ --sui-primary-accent-color-inverted: hsl(var(--sui-base-hue) 10% 100%);
299
+ --sui-primary-accent-color-translucent: hsl(var(--sui-base-hue) 80% 50% / 40%);
300
+ --sui-error-color-hue: 0;
301
+ --sui-warning-color-hue: 40;
302
+ --sui-info-color-hue: 210;
303
+ --sui-success-color-hue: 100;
304
+ --sui-alert-foreground-color-saturation: 85%;
305
+ --sui-alert-foreground-color-lightness: 25%;
306
+ --sui-alert-background-color-saturation: 65%;
307
+ --sui-alert-background-color-lightness: 90%;
308
+ --sui-alert-border-color-saturation: 48%;
309
+ --sui-alert-border-color-lightness: 68%;
310
+ }
311
+ :global(:root[data-theme=dark]),
312
+ :global(:host[data-theme=dark]) {
313
+ color-scheme: dark;
314
+ --sui-foreground-color-1-hsl: var(--sui-base-hue) 10% 95%;
315
+ --sui-foreground-color-2-hsl: var(--sui-base-hue) 10% 75%;
316
+ --sui-foreground-color-3-hsl: var(--sui-base-hue) 10% 65%;
317
+ --sui-foreground-color-4-hsl: var(--sui-base-hue) 10% 55%;
318
+ --sui-foreground-color-5-hsl: var(--sui-base-hue) 10% 35%;
319
+ --sui-background-color-1-hsl: var(--sui-base-hue) 10% 10%;
320
+ --sui-background-color-2-hsl: var(--sui-base-hue) 10% 12%;
321
+ --sui-background-color-3-hsl: var(--sui-base-hue) 10% 14%;
322
+ --sui-background-color-4-hsl: var(--sui-base-hue) 10% 16%;
323
+ --sui-background-color-5-hsl: var(--sui-base-hue) 10% 26%;
324
+ --sui-border-color-1-hsl: var(--sui-base-hue) 10% 45%;
325
+ --sui-border-color-2-hsl: var(--sui-base-hue) 10% 26%;
326
+ --sui-border-color-3-hsl: var(--sui-base-hue) 10% 22%;
327
+ --sui-shadow-color: var(--sui-base-hue) 10% 0%;
328
+ --sui-primary-accent-color-text: hsl(var(--sui-base-hue) 100% 60%);
329
+ --sui-primary-accent-color-light: hsl(var(--sui-base-hue) 100% 45%);
330
+ --sui-primary-accent-color: hsl(var(--sui-base-hue) 100% 40%);
331
+ --sui-primary-accent-color-dark: hsl(var(--sui-base-hue) 100% 35%);
332
+ --sui-primary-accent-color-inverted: hsl(var(--sui-base-hue) 10% 100%);
333
+ --sui-primary-accent-color-translucent: hsl(var(--sui-base-hue) 80% 50% / 40%);
334
+ --sui-error-color-hue: 0;
335
+ --sui-warning-color-hue: 40;
336
+ --sui-info-color-hue: 210;
337
+ --sui-success-color-hue: 100;
338
+ --sui-alert-foreground-color-saturation: 85%;
339
+ --sui-alert-foreground-color-lightness: 75%;
340
+ --sui-alert-background-color-saturation: 40%;
341
+ --sui-alert-background-color-lightness: 10%;
342
+ --sui-alert-border-color-saturation: 38%;
343
+ --sui-alert-border-color-lightness: 18%;
344
+ }
345
+ @media (prefers-color-scheme: light) {
346
+ :global(:root:not([data-theme])),
347
+ :global(:host:not([data-theme])) {
348
+ color-scheme: light;
349
+ --sui-foreground-color-1-hsl: var(--sui-base-hue) 5% 5%;
350
+ --sui-foreground-color-2-hsl: var(--sui-base-hue) 5% 25%;
351
+ --sui-foreground-color-3-hsl: var(--sui-base-hue) 5% 35%;
352
+ --sui-foreground-color-4-hsl: var(--sui-base-hue) 5% 45%;
353
+ --sui-foreground-color-5-hsl: var(--sui-base-hue) 5% 65%;
354
+ --sui-background-color-1-hsl: var(--sui-base-hue) 5% 100%;
355
+ --sui-background-color-2-hsl: var(--sui-base-hue) 5% 98%;
356
+ --sui-background-color-3-hsl: var(--sui-base-hue) 5% 96%;
357
+ --sui-background-color-4-hsl: var(--sui-base-hue) 5% 94%;
358
+ --sui-background-color-5-hsl: var(--sui-base-hue) 5% 84%;
359
+ --sui-border-color-1-hsl: var(--sui-base-hue) 5% 65%;
360
+ --sui-border-color-2-hsl: var(--sui-base-hue) 5% 84%;
361
+ --sui-border-color-3-hsl: var(--sui-base-hue) 5% 88%;
362
+ --sui-shadow-color: var(--sui-base-hue) 10% 0%;
363
+ --sui-primary-accent-color-text: hsl(var(--sui-base-hue) 80% 40%);
364
+ --sui-primary-accent-color-light: hsl(var(--sui-base-hue) 80% 45%);
365
+ --sui-primary-accent-color: hsl(var(--sui-base-hue) 80% 40%);
366
+ --sui-primary-accent-color-dark: hsl(var(--sui-base-hue) 80% 35%);
367
+ --sui-primary-accent-color-inverted: hsl(var(--sui-base-hue) 10% 100%);
368
+ --sui-primary-accent-color-translucent: hsl(var(--sui-base-hue) 80% 50% / 40%);
369
+ --sui-error-color-hue: 0;
370
+ --sui-warning-color-hue: 40;
371
+ --sui-info-color-hue: 210;
372
+ --sui-success-color-hue: 100;
373
+ --sui-alert-foreground-color-saturation: 85%;
374
+ --sui-alert-foreground-color-lightness: 25%;
375
+ --sui-alert-background-color-saturation: 65%;
376
+ --sui-alert-background-color-lightness: 90%;
377
+ --sui-alert-border-color-saturation: 48%;
378
+ --sui-alert-border-color-lightness: 68%;
379
+ }
380
+ }
381
+ @media (prefers-color-scheme: dark) {
382
+ :global(:root:not([data-theme])),
383
+ :global(:host:not([data-theme])) {
384
+ color-scheme: dark;
385
+ --sui-foreground-color-1-hsl: var(--sui-base-hue) 10% 95%;
386
+ --sui-foreground-color-2-hsl: var(--sui-base-hue) 10% 75%;
387
+ --sui-foreground-color-3-hsl: var(--sui-base-hue) 10% 65%;
388
+ --sui-foreground-color-4-hsl: var(--sui-base-hue) 10% 55%;
389
+ --sui-foreground-color-5-hsl: var(--sui-base-hue) 10% 35%;
390
+ --sui-background-color-1-hsl: var(--sui-base-hue) 10% 10%;
391
+ --sui-background-color-2-hsl: var(--sui-base-hue) 10% 12%;
392
+ --sui-background-color-3-hsl: var(--sui-base-hue) 10% 14%;
393
+ --sui-background-color-4-hsl: var(--sui-base-hue) 10% 16%;
394
+ --sui-background-color-5-hsl: var(--sui-base-hue) 10% 26%;
395
+ --sui-border-color-1-hsl: var(--sui-base-hue) 10% 45%;
396
+ --sui-border-color-2-hsl: var(--sui-base-hue) 10% 26%;
397
+ --sui-border-color-3-hsl: var(--sui-base-hue) 10% 22%;
398
+ --sui-shadow-color: var(--sui-base-hue) 10% 0%;
399
+ --sui-primary-accent-color-text: hsl(var(--sui-base-hue) 100% 60%);
400
+ --sui-primary-accent-color-light: hsl(var(--sui-base-hue) 100% 45%);
401
+ --sui-primary-accent-color: hsl(var(--sui-base-hue) 100% 40%);
402
+ --sui-primary-accent-color-dark: hsl(var(--sui-base-hue) 100% 35%);
403
+ --sui-primary-accent-color-inverted: hsl(var(--sui-base-hue) 10% 100%);
404
+ --sui-primary-accent-color-translucent: hsl(var(--sui-base-hue) 80% 50% / 40%);
405
+ --sui-error-color-hue: 0;
406
+ --sui-warning-color-hue: 40;
407
+ --sui-info-color-hue: 210;
408
+ --sui-success-color-hue: 100;
409
+ --sui-alert-foreground-color-saturation: 85%;
410
+ --sui-alert-foreground-color-lightness: 75%;
411
+ --sui-alert-background-color-saturation: 40%;
412
+ --sui-alert-background-color-lightness: 10%;
413
+ --sui-alert-border-color-saturation: 38%;
414
+ --sui-alert-border-color-lightness: 18%;
415
+ }
416
+ }
417
+
418
+ :global(.material-symbols-outlined) {
419
+ font-variation-settings: "FILL" 0, "wght" 300, "GRAD" 0, "opsz" 24;
420
+ }
421
+ :global(*),
422
+ :global(::before),
423
+ :global(::after) {
424
+ overflow-anchor: none;
425
+ scroll-behavior: smooth;
426
+ box-sizing: border-box;
427
+ outline-offset: 0px;
428
+ outline-width: var(--sui-focus-ring-width) !important;
429
+ outline-style: solid;
430
+ outline-color: transparent;
431
+ border-width: 0;
432
+ border-style: solid;
433
+ vertical-align: top;
434
+ }
435
+ @media (prefers-reduced-motion) {
436
+ :global(*),
437
+ :global(::before),
438
+ :global(::after) {
439
+ scroll-behavior: auto;
440
+ transition-duration: 1ms !important;
441
+ }
442
+ }
443
+ :global(::selection) {
444
+ background-color: var(--sui-primary-accent-color-translucent);
445
+ }
446
+ :global(*) {
447
+ -webkit-tap-highlight-color: transparent;
448
+ }
449
+ :global(:focus) {
450
+ z-index: 1;
451
+ outline-width: 0;
452
+ }
453
+ :global(:focus-visible) {
454
+ outline-color: var(--sui-primary-accent-color-translucent);
455
+ z-index: 2;
456
+ }
457
+ :global(h1),
458
+ :global(h2),
459
+ :global(h3),
460
+ :global(h4),
461
+ :global(h5),
462
+ :global(h6) {
463
+ margin: 0;
464
+ font-weight: var(--sui-font-weight-bold, bold);
465
+ line-height: var(--sui-line-height-default);
466
+ }
467
+ :global(h1) {
468
+ font-size: 32px;
469
+ }
470
+ :global(h2) {
471
+ font-size: 28px;
472
+ }
473
+ :global(h3) {
474
+ font-size: 24px;
475
+ }
476
+ :global(h4) {
477
+ font-size: 20px;
478
+ }
479
+ :global(h5) {
480
+ font-size: 16px;
481
+ }
482
+ :global(h6) {
483
+ font-size: 12px;
484
+ }
485
+ :global(strong) {
486
+ font-weight: var(--sui-font-weight-bold, bold);
487
+ }
488
+ :global(a) {
489
+ color: var(--sui-primary-accent-color-text);
490
+ text-decoration: none;
491
+ text-underline-offset: 2px;
492
+ }
493
+ :global(a:hover), :global(a:focus), :global(a:active) {
494
+ text-decoration: underline;
495
+ }
496
+ :global(:root[data-underline-links="true"]) :global(a), :global(:host[data-underline-links="true"]) :global(a) {
497
+ text-decoration: underline;
498
+ }
499
+ :global(p),
500
+ :global(ul),
501
+ :global(ol),
502
+ :global(dl) {
503
+ margin: var(--sui-paragraph-margin) 0;
504
+ line-height: var(--sui-line-height-comfortable);
505
+ }
506
+ :global(ul),
507
+ :global(ol) {
508
+ padding-inline: 2em;
509
+ }
510
+ :global(code),
511
+ :global(pre) {
512
+ border-radius: 4px;
513
+ background-color: var(--sui-code-background-color);
514
+ font-family: var(--sui-font-family-monospace);
515
+ font-size: var(--sui-font-size-monospace);
516
+ vertical-align: -0.05em;
517
+ }
518
+ :global(pre) {
519
+ padding: 8px;
520
+ line-height: var(--sui-line-height-compact);
521
+ -webkit-user-select: text;
522
+ user-select: text;
523
+ }
524
+ :global(code) {
525
+ padding: 2px 4px;
526
+ }
527
+ :global(table) {
528
+ border-collapse: collapse;
529
+ }
530
+ :global(th),
531
+ :global(td) {
532
+ border: 1px solid var(--sui-textbox-border-color);
533
+ padding: 8px;
534
+ }
535
+ :global(blockquote) {
536
+ margin-inline: 16px 0;
537
+ border-inline-start: 4px solid var(--sui-textbox-border-color);
538
+ padding-inline-start: 12px;
539
+ }
540
+ :global(.disabled),
541
+ :global(.readonly),
542
+ :global([aria-disabled=true]),
543
+ :global([aria-readonly=true]),
544
+ :global([inert]:not(body)) {
545
+ cursor: default;
546
+ pointer-events: none;
547
+ -webkit-user-select: none;
548
+ user-select: none;
549
+ filter: grayscale(1) opacity(0.35);
550
+ }
551
+ :global(.disabled) :global(*),
552
+ :global(.readonly) :global(*),
553
+ :global([aria-disabled=true]) :global(*),
554
+ :global([aria-readonly=true]) :global(*),
555
+ :global([inert]:not(body)) :global(*) {
556
+ filter: grayscale(0) opacity(1);
557
+ }
558
+ :global(.disabled) :global(*),
559
+ :global(.readonly) :global(*),
560
+ :global([aria-disabled=true]) :global(*),
561
+ :global([aria-readonly=true]) :global(*),
562
+ :global([inert]) :global(*) {
563
+ cursor: default;
564
+ pointer-events: none;
565
+ -webkit-user-select: none;
566
+ user-select: none;
567
+ }
568
+
569
+ .font-loader {
103
570
  position: absolute;
104
571
  left: -99999px;
105
572
  font-family: var(--sui-font-family-default);
package/package/styles/core.scss CHANGED
@@ -6,181 +6,183 @@
6
6
  // Use `font-display: block;` @see https://stackoverflow.com/q/41710834
7
7
  @import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=block");
8
8
 
9
- .material-symbols-outlined {
10
- font-variation-settings:
11
- "FILL" 0,
12
- "wght" 300,
13
- "GRAD" 0,
14
- "opsz" 24;
15
- }
16
-
17
- *,
18
- ::before,
19
- ::after {
20
- overflow-anchor: none;
21
- scroll-behavior: smooth;
22
- box-sizing: border-box;
23
- outline-offset: 0px;
24
- outline-width: var(--sui-focus-ring-width) !important;
25
- outline-style: solid;
26
- outline-color: transparent;
27
- border-width: 0;
28
- border-style: solid;
29
- vertical-align: top;
30
-
31
- @media (prefers-reduced-motion) {
32
- scroll-behavior: auto;
33
- // Disable transition but make sure the `transitionend` event works
34
- transition-duration: 1ms !important;
9
+ :global {
10
+ .material-symbols-outlined {
11
+ font-variation-settings:
12
+ "FILL" 0,
13
+ "wght" 300,
14
+ "GRAD" 0,
15
+ "opsz" 24;
35
16
  }
36
- }
37
-
38
- ::selection {
39
- background-color: var(--sui-primary-accent-color-translucent);
40
- }
41
-
42
- * {
43
- -webkit-tap-highlight-color: transparent;
44
- }
45
17
 
46
- :focus {
47
- z-index: 1;
48
- outline-width: 0;
49
- }
18
+ *,
19
+ ::before,
20
+ ::after {
21
+ overflow-anchor: none;
22
+ scroll-behavior: smooth;
23
+ box-sizing: border-box;
24
+ outline-offset: 0px;
25
+ outline-width: var(--sui-focus-ring-width) !important;
26
+ outline-style: solid;
27
+ outline-color: transparent;
28
+ border-width: 0;
29
+ border-style: solid;
30
+ vertical-align: top;
31
+
32
+ @media (prefers-reduced-motion) {
33
+ scroll-behavior: auto;
34
+ // Disable transition but make sure the `transitionend` event works
35
+ transition-duration: 1ms !important;
36
+ }
37
+ }
50
38
 
51
- :focus-visible {
52
- outline-color: var(--sui-primary-accent-color-translucent);
53
- z-index: 2;
54
- }
39
+ ::selection {
40
+ background-color: var(--sui-primary-accent-color-translucent);
41
+ }
55
42
 
56
- h1,
57
- h2,
58
- h3,
59
- h4,
60
- h5,
61
- h6 {
62
- margin: 0;
63
- font-weight: var(--sui-font-weight-bold, bold);
64
- line-height: var(--sui-line-height-default);
65
- }
43
+ * {
44
+ -webkit-tap-highlight-color: transparent;
45
+ }
66
46
 
67
- h1 {
68
- font-size: 32px;
69
- }
47
+ :focus {
48
+ z-index: 1;
49
+ outline-width: 0;
50
+ }
70
51
 
71
- h2 {
72
- font-size: 28px;
73
- }
52
+ :focus-visible {
53
+ outline-color: var(--sui-primary-accent-color-translucent);
54
+ z-index: 2;
55
+ }
74
56
 
75
- h3 {
76
- font-size: 24px;
77
- }
57
+ h1,
58
+ h2,
59
+ h3,
60
+ h4,
61
+ h5,
62
+ h6 {
63
+ margin: 0;
64
+ font-weight: var(--sui-font-weight-bold, bold);
65
+ line-height: var(--sui-line-height-default);
66
+ }
78
67
 
79
- h4 {
80
- font-size: 20px;
81
- }
68
+ h1 {
69
+ font-size: 32px;
70
+ }
82
71
 
83
- h5 {
84
- font-size: 16px;
85
- }
72
+ h2 {
73
+ font-size: 28px;
74
+ }
86
75
 
87
- h6 {
88
- font-size: 12px;
89
- }
76
+ h3 {
77
+ font-size: 24px;
78
+ }
90
79
 
91
- strong {
92
- font-weight: var(--sui-font-weight-bold, bold);
93
- }
80
+ h4 {
81
+ font-size: 20px;
82
+ }
94
83
 
95
- a {
96
- color: var(--sui-primary-accent-color-text);
97
- text-decoration: none;
98
- text-underline-offset: 2px;
84
+ h5 {
85
+ font-size: 16px;
86
+ }
99
87
 
100
- &:hover,
101
- &:focus,
102
- &:active {
103
- text-decoration: underline;
88
+ h6 {
89
+ font-size: 12px;
104
90
  }
105
91
 
106
- :root[data-underline-links="true"] &,
107
- :host[data-underline-links="true"] & {
108
- text-decoration: underline;
92
+ strong {
93
+ font-weight: var(--sui-font-weight-bold, bold);
109
94
  }
110
- }
111
95
 
112
- p,
113
- ul,
114
- ol,
115
- dl {
116
- margin: var(--sui-paragraph-margin) 0;
117
- line-height: var(--sui-line-height-comfortable);
118
- }
96
+ a {
97
+ color: var(--sui-primary-accent-color-text);
98
+ text-decoration: none;
99
+ text-underline-offset: 2px;
100
+
101
+ &:hover,
102
+ &:focus,
103
+ &:active {
104
+ text-decoration: underline;
105
+ }
106
+
107
+ :global(:root[data-underline-links="true"]) &,
108
+ :global(:host[data-underline-links="true"]) & {
109
+ text-decoration: underline;
110
+ }
111
+ }
119
112
 
120
- ul,
121
- ol {
122
- padding-inline: 2em;
123
- }
113
+ p,
114
+ ul,
115
+ ol,
116
+ dl {
117
+ margin: var(--sui-paragraph-margin) 0;
118
+ line-height: var(--sui-line-height-comfortable);
119
+ }
124
120
 
125
- code,
126
- pre {
127
- border-radius: 4px;
128
- background-color: var(--sui-code-background-color);
129
- font-family: var(--sui-font-family-monospace);
130
- font-size: var(--sui-font-size-monospace);
131
- vertical-align: -0.05em;
132
- }
121
+ ul,
122
+ ol {
123
+ padding-inline: 2em;
124
+ }
133
125
 
134
- pre {
135
- padding: 8px;
136
- line-height: var(--sui-line-height-compact);
137
- -webkit-user-select: text;
138
- user-select: text;
139
- }
126
+ code,
127
+ pre {
128
+ border-radius: 4px;
129
+ background-color: var(--sui-code-background-color);
130
+ font-family: var(--sui-font-family-monospace);
131
+ font-size: var(--sui-font-size-monospace);
132
+ vertical-align: -0.05em;
133
+ }
140
134
 
141
- code {
142
- padding: 2px 4px;
143
- }
135
+ pre {
136
+ padding: 8px;
137
+ line-height: var(--sui-line-height-compact);
138
+ -webkit-user-select: text;
139
+ user-select: text;
140
+ }
144
141
 
145
- table {
146
- border-collapse: collapse;
147
- }
142
+ code {
143
+ padding: 2px 4px;
144
+ }
148
145
 
149
- th,
150
- td {
151
- border: 1px solid var(--sui-textbox-border-color);
152
- padding: 8px;
153
- }
146
+ table {
147
+ border-collapse: collapse;
148
+ }
154
149
 
155
- blockquote {
156
- margin-inline: 16px 0;
157
- border-inline-start: 4px solid var(--sui-textbox-border-color);
158
- padding-inline-start: 12px;
159
- }
150
+ th,
151
+ td {
152
+ border: 1px solid var(--sui-textbox-border-color);
153
+ padding: 8px;
154
+ }
160
155
 
161
- .disabled,
162
- .readonly,
163
- [aria-disabled="true"],
164
- [aria-readonly="true"],
165
- [inert]:not(body) {
166
- cursor: default;
167
- pointer-events: none;
168
- -webkit-user-select: none;
169
- user-select: none;
170
- filter: grayscale(1) opacity(0.35);
156
+ blockquote {
157
+ margin-inline: 16px 0;
158
+ border-inline-start: 4px solid var(--sui-textbox-border-color);
159
+ padding-inline-start: 12px;
160
+ }
171
161
 
172
- :global(*) {
173
- filter: grayscale(0) opacity(1); // Maintain the opacity on child nodes
162
+ .disabled,
163
+ .readonly,
164
+ [aria-disabled="true"],
165
+ [aria-readonly="true"],
166
+ [inert]:not(body) {
167
+ cursor: default;
168
+ pointer-events: none;
169
+ -webkit-user-select: none;
170
+ user-select: none;
171
+ filter: grayscale(1) opacity(0.35);
172
+
173
+ :global(*) {
174
+ filter: grayscale(0) opacity(1); // Maintain the opacity on child nodes
175
+ }
174
176
  }
175
- }
176
177
 
177
- .disabled *,
178
- .readonly *,
179
- [aria-disabled="true"] *,
180
- [aria-readonly="true"] *,
181
- [inert] * {
182
- cursor: default;
183
- pointer-events: none;
184
- -webkit-user-select: none;
185
- user-select: none;
178
+ .disabled *,
179
+ .readonly *,
180
+ [aria-disabled="true"] *,
181
+ [aria-readonly="true"] *,
182
+ [inert] * {
183
+ cursor: default;
184
+ pointer-events: none;
185
+ -webkit-user-select: none;
186
+ user-select: none;
187
+ }
186
188
  }
package/package/styles/variables.scss CHANGED
@@ -70,209 +70,211 @@
70
70
  --sui-alert-border-color-lightness: 18%;
71
71
  }
72
72
 
73
- :root,
74
- :host {
75
- // Base HSL values
76
- --sui-base-hue: 210;
77
- // Foreground
78
- --sui-highlight-foreground-color: hsl(var(--sui-foreground-color-1-hsl));
79
- --sui-primary-foreground-color: hsl(var(--sui-foreground-color-2-hsl));
80
- --sui-secondary-foreground-color: hsl(var(--sui-foreground-color-3-hsl));
81
- --sui-tertiary-foreground-color: hsl(var(--sui-foreground-color-4-hsl));
82
- --sui-disabled-foreground-color: hsl(var(--sui-foreground-color-5-hsl));
83
- --sui-error-foreground-color: hsl(
84
- var(--sui-error-color-hue) var(--sui-alert-foreground-color-saturation)
85
- var(--sui-alert-foreground-color-lightness)
86
- );
87
- --sui-warning-foreground-color: hsl(
88
- var(--sui-warning-color-hue) var(--sui-alert-foreground-color-saturation)
89
- var(--sui-alert-foreground-color-lightness)
90
- );
91
- --sui-info-foreground-color: hsl(
92
- var(--sui-info-color-hue) var(--sui-alert-foreground-color-saturation)
93
- var(--sui-alert-foreground-color-lightness)
94
- );
95
- --sui-success-foreground-color: hsl(
96
- var(--sui-success-color-hue) var(--sui-alert-foreground-color-saturation)
97
- var(--sui-alert-foreground-color-lightness)
98
- );
99
- // Background
100
- --sui-hover-background-color: hsl(var(--sui-background-color-5-hsl) / 35%);
101
- --sui-selected-background-color: hsl(var(--sui-background-color-5-hsl) / 75%);
102
- --sui-active-background-color: hsl(var(--sui-background-color-5-hsl) / 100%);
103
- --sui-content-background-color: hsl(var(--sui-background-color-1-hsl));
104
- --sui-code-background-color: hsl(var(--sui-background-color-4-hsl));
105
- --sui-primary-background-color: hsl(var(--sui-background-color-2-hsl));
106
- --sui-primary-background-color-translucent: hsl(var(--sui-background-color-2-hsl) / 80%);
107
- --sui-secondary-background-color: hsl(var(--sui-background-color-3-hsl));
108
- --sui-secondary-background-color-translucent: hsl(var(--sui-background-color-3-hsl) / 80%);
109
- --sui-tertiary-background-color: hsl(var(--sui-background-color-4-hsl));
110
- --sui-tertiary-background-color-translucent: hsl(var(--sui-background-color-4-hsl) / 80%);
111
- --sui-disabled-background-color: hsl(var(--sui-background-color-4-hsl));
112
- --sui-error-background-color: hsl(
113
- var(--sui-error-color-hue) var(--sui-alert-background-color-saturation)
114
- var(--sui-alert-background-color-lightness)
115
- );
116
- --sui-warning-background-color: hsl(
117
- var(--sui-warning-color-hue) var(--sui-alert-background-color-saturation)
118
- var(--sui-alert-background-color-lightness)
119
- );
120
- --sui-info-background-color: hsl(
121
- var(--sui-info-color-hue) var(--sui-alert-background-color-saturation)
122
- var(--sui-alert-background-color-lightness)
123
- );
124
- --sui-success-background-color: hsl(
125
- var(--sui-success-color-hue) var(--sui-alert-background-color-saturation)
126
- var(--sui-alert-background-color-lightness)
127
- );
128
- // Outline
129
- --sui-focus-ring-width: 4px;
130
- // Borders
131
- --sui-primary-border-color: hsl(var(--sui-border-color-2-hsl));
132
- --sui-secondary-border-color: hsl(var(--sui-border-color-3-hsl));
133
- --sui-error-border-color: hsl(
134
- var(--sui-error-color-hue) var(--sui-alert-border-color-saturation)
135
- var(--sui-alert-border-color-lightness)
136
- );
137
- --sui-warning-border-color: hsl(
138
- var(--sui-warning-color-hue) var(--sui-alert-border-color-saturation)
139
- var(--sui-alert-border-color-lightness)
140
- );
141
- --sui-info-border-color: hsl(
142
- var(--sui-info-color-hue) var(--sui-alert-border-color-saturation)
143
- var(--sui-alert-border-color-lightness)
144
- );
145
- --sui-success-border-color: hsl(
146
- var(--sui-success-color-hue) var(--sui-alert-border-color-saturation)
147
- var(--sui-alert-border-color-lightness)
148
- );
149
- // Shadows
150
- --sui-popup-shadow-color: hsl(var(--sui-shadow-color) / 40%);
151
- --sui-popup-backdrop-color: hsl(var(--sui-shadow-color) / 40%);
152
- // Text
153
- --sui-font-family-default: "Merriweather Sans", sans-serif;
154
- --sui-font-size-xxx-large: 23px;
155
- --sui-font-size-xx-large: 19px;
156
- --sui-font-size-x-large: 17px;
157
- --sui-font-size-large: 15px;
158
- --sui-font-size-default: 13px;
159
- --sui-font-size-small: 11px;
160
- --sui-font-size-x-small: 9px;
161
- --sui-font-weight-normal: 325; // Merriweather Sans is a little bit bold, so we need to adjust the weight
162
- --sui-font-weight-bold: 625; // ditto
163
- --sui-font-family-monospace: "Noto Sans Mono", monospace;
164
- --sui-font-size-monospace: 0.9em;
165
- --sui-line-height-default: 1.25;
166
- --sui-line-height-compact: 1.5;
167
- --sui-line-height-comfortable: 1.75;
168
- --sui-word-spacing-normal: 0.1ex;
169
- --sui-paragraph-margin: 1.75em;
170
- // Controls
171
- --sui-control-small-border-width: 1px;
172
- --sui-control-small-border-radius: calc(var(--sui-control-small-height) / 8);
173
- --sui-control-small-padding: 0 calc((var(--sui-control-small-height) / 5));
174
- --sui-control-small-height: 24px;
175
- --sui-control-medium-border-width: 1px;
176
- --sui-control-medium-border-radius: calc(var(--sui-control-medium-height) / 8);
177
- --sui-control-medium-padding: 0 calc((var(--sui-control-medium-height) / 4));
178
- --sui-control-medium-height: 32px;
179
- --sui-control-large-border-width: 1px;
180
- --sui-control-large-border-radius: calc(var(--sui-control-large-height) / 8);
181
- --sui-control-large-padding: 0 calc((var(--sui-control-large-height) / 3));
182
- --sui-control-large-height: 48px;
183
- --sui-control-border-color: hsl(var(--sui-border-color-2-hsl));
184
- --sui-control-foreground-color: var(--sui-primary-foreground-color);
185
- --sui-control-background-color: hsl(var(--sui-background-color-4-hsl));
186
- --sui-control-font-family: var(--sui-font-family-default);
187
- --sui-control-font-size: var(--sui-font-size-default);
188
- --sui-control-line-height: var(--sui-line-height-compact);
189
- // Button
190
- --sui-button-small-border-radius: var(--sui-control-small-border-radius);
191
- --sui-button-small-padding: var(--sui-control-small-padding);
192
- --sui-button-small-height: var(--sui-control-small-height);
193
- --sui-button-medium-border-radius: var(--sui-control-medium-border-radius);
194
- --sui-button-medium-padding: var(--sui-control-medium-padding);
195
- --sui-button-medium-height: var(--sui-control-medium-height);
196
- --sui-button-large-border-radius: var(--sui-control-large-border-radius);
197
- --sui-button-large-padding: var(--sui-control-large-padding);
198
- --sui-button-large-height: var(--sui-control-large-height);
199
- --sui-button-border-color: var(--sui-control-border-color);
200
- --sui-button-background-color: var(--sui-control-background-color);
201
- // Checkbox, radio button, switch
202
- --sui-checkbox-border-radius: var(--sui-control-medium-border-radius);
203
- --sui-checkbox-height: 20px;
204
- --sui-checkbox-border-color: hsl(var(--sui-border-color-1-hsl));
205
- --sui-checkbox-background-color: var(--sui-control-background-color);
206
- // Option & menu item
207
- --sui-option-border-radius: var(--sui-control-medium-border-radius);
208
- --sui-option-padding: calc((var(--sui-control-medium-height) / 6))
209
- calc((var(--sui-control-medium-height) / 5));
210
- --sui-option-height: var(--sui-control-medium-height);
211
- // Listbox
212
- --sui-listbox-border-radius: var(--sui-control-medium-border-radius);
213
- --sui-listbox-border-color: var(--sui-control-border-color);
214
- --sui-listbox-foreground-color: var(--sui-control-foreground-color);
215
- --sui-listbox-background-color: hsl(var(--sui-background-color-1-hsl));
216
- // Textbox: singleline & multiline text fields
217
- --sui-textbox-border-radius: var(--sui-control-medium-border-radius);
218
- --sui-textbox-height: var(--sui-control-medium-height);
219
- --sui-textbox-border-color: var(--sui-control-border-color);
220
- --sui-textbox-foreground-color: var(--sui-control-foreground-color);
221
- --sui-textbox-background-color: hsl(var(--sui-background-color-1-hsl));
222
- --sui-textbox-font-family: var(--sui-font-family-default);
223
- --sui-textbox-font-size: var(--sui-font-size-default);
224
- --sui-textbox-singleline-padding: 0 8px;
225
- --sui-textbox-singleline-min-width: 240px;
226
- --sui-textbox-singleline-line-height: var(--sui-line-height-compact);
227
- --sui-textbox-multiline-padding: 16px;
228
- --sui-textbox-multiline-min-width: 480px;
229
- --sui-textbox-multiline-line-height: var(--sui-line-height-comfortable);
230
- // Tab
231
- --sui-tab-height: var(--sui-control-medium-height);
232
- --sui-tab-small-height: var(--sui-control-small-height);
233
- --sui-tab-medium-height: var(--sui-control-medium-height);
234
- --sui-tab-large-height: var(--sui-control-large-height);
235
- // Toolbar
236
- --sui-primary-toolbar-size: 48px;
237
- --sui-secondary-toolbar-size: 40px;
238
- // table
239
- --sui-primary-row-height: 48px;
240
- --sui-secondary-row-height: 40px;
73
+ :global {
74
+ :root,
75
+ :host {
76
+ // Base HSL values
77
+ --sui-base-hue: 210;
78
+ // Foreground
79
+ --sui-highlight-foreground-color: hsl(var(--sui-foreground-color-1-hsl));
80
+ --sui-primary-foreground-color: hsl(var(--sui-foreground-color-2-hsl));
81
+ --sui-secondary-foreground-color: hsl(var(--sui-foreground-color-3-hsl));
82
+ --sui-tertiary-foreground-color: hsl(var(--sui-foreground-color-4-hsl));
83
+ --sui-disabled-foreground-color: hsl(var(--sui-foreground-color-5-hsl));
84
+ --sui-error-foreground-color: hsl(
85
+ var(--sui-error-color-hue) var(--sui-alert-foreground-color-saturation)
86
+ var(--sui-alert-foreground-color-lightness)
87
+ );
88
+ --sui-warning-foreground-color: hsl(
89
+ var(--sui-warning-color-hue) var(--sui-alert-foreground-color-saturation)
90
+ var(--sui-alert-foreground-color-lightness)
91
+ );
92
+ --sui-info-foreground-color: hsl(
93
+ var(--sui-info-color-hue) var(--sui-alert-foreground-color-saturation)
94
+ var(--sui-alert-foreground-color-lightness)
95
+ );
96
+ --sui-success-foreground-color: hsl(
97
+ var(--sui-success-color-hue) var(--sui-alert-foreground-color-saturation)
98
+ var(--sui-alert-foreground-color-lightness)
99
+ );
100
+ // Background
101
+ --sui-hover-background-color: hsl(var(--sui-background-color-5-hsl) / 35%);
102
+ --sui-selected-background-color: hsl(var(--sui-background-color-5-hsl) / 75%);
103
+ --sui-active-background-color: hsl(var(--sui-background-color-5-hsl) / 100%);
104
+ --sui-content-background-color: hsl(var(--sui-background-color-1-hsl));
105
+ --sui-code-background-color: hsl(var(--sui-background-color-4-hsl));
106
+ --sui-primary-background-color: hsl(var(--sui-background-color-2-hsl));
107
+ --sui-primary-background-color-translucent: hsl(var(--sui-background-color-2-hsl) / 80%);
108
+ --sui-secondary-background-color: hsl(var(--sui-background-color-3-hsl));
109
+ --sui-secondary-background-color-translucent: hsl(var(--sui-background-color-3-hsl) / 80%);
110
+ --sui-tertiary-background-color: hsl(var(--sui-background-color-4-hsl));
111
+ --sui-tertiary-background-color-translucent: hsl(var(--sui-background-color-4-hsl) / 80%);
112
+ --sui-disabled-background-color: hsl(var(--sui-background-color-4-hsl));
113
+ --sui-error-background-color: hsl(
114
+ var(--sui-error-color-hue) var(--sui-alert-background-color-saturation)
115
+ var(--sui-alert-background-color-lightness)
116
+ );
117
+ --sui-warning-background-color: hsl(
118
+ var(--sui-warning-color-hue) var(--sui-alert-background-color-saturation)
119
+ var(--sui-alert-background-color-lightness)
120
+ );
121
+ --sui-info-background-color: hsl(
122
+ var(--sui-info-color-hue) var(--sui-alert-background-color-saturation)
123
+ var(--sui-alert-background-color-lightness)
124
+ );
125
+ --sui-success-background-color: hsl(
126
+ var(--sui-success-color-hue) var(--sui-alert-background-color-saturation)
127
+ var(--sui-alert-background-color-lightness)
128
+ );
129
+ // Outline
130
+ --sui-focus-ring-width: 4px;
131
+ // Borders
132
+ --sui-primary-border-color: hsl(var(--sui-border-color-2-hsl));
133
+ --sui-secondary-border-color: hsl(var(--sui-border-color-3-hsl));
134
+ --sui-error-border-color: hsl(
135
+ var(--sui-error-color-hue) var(--sui-alert-border-color-saturation)
136
+ var(--sui-alert-border-color-lightness)
137
+ );
138
+ --sui-warning-border-color: hsl(
139
+ var(--sui-warning-color-hue) var(--sui-alert-border-color-saturation)
140
+ var(--sui-alert-border-color-lightness)
141
+ );
142
+ --sui-info-border-color: hsl(
143
+ var(--sui-info-color-hue) var(--sui-alert-border-color-saturation)
144
+ var(--sui-alert-border-color-lightness)
145
+ );
146
+ --sui-success-border-color: hsl(
147
+ var(--sui-success-color-hue) var(--sui-alert-border-color-saturation)
148
+ var(--sui-alert-border-color-lightness)
149
+ );
150
+ // Shadows
151
+ --sui-popup-shadow-color: hsl(var(--sui-shadow-color) / 40%);
152
+ --sui-popup-backdrop-color: hsl(var(--sui-shadow-color) / 40%);
153
+ // Text
154
+ --sui-font-family-default: "Merriweather Sans", sans-serif;
155
+ --sui-font-size-xxx-large: 23px;
156
+ --sui-font-size-xx-large: 19px;
157
+ --sui-font-size-x-large: 17px;
158
+ --sui-font-size-large: 15px;
159
+ --sui-font-size-default: 13px;
160
+ --sui-font-size-small: 11px;
161
+ --sui-font-size-x-small: 9px;
162
+ --sui-font-weight-normal: 325; // Merriweather Sans is a little bit bold, so we need to adjust the weight
163
+ --sui-font-weight-bold: 625; // ditto
164
+ --sui-font-family-monospace: "Noto Sans Mono", monospace;
165
+ --sui-font-size-monospace: 0.9em;
166
+ --sui-line-height-default: 1.25;
167
+ --sui-line-height-compact: 1.5;
168
+ --sui-line-height-comfortable: 1.75;
169
+ --sui-word-spacing-normal: 0.1ex;
170
+ --sui-paragraph-margin: 1.75em;
171
+ // Controls
172
+ --sui-control-small-border-width: 1px;
173
+ --sui-control-small-border-radius: calc(var(--sui-control-small-height) / 8);
174
+ --sui-control-small-padding: 0 calc((var(--sui-control-small-height) / 5));
175
+ --sui-control-small-height: 24px;
176
+ --sui-control-medium-border-width: 1px;
177
+ --sui-control-medium-border-radius: calc(var(--sui-control-medium-height) / 8);
178
+ --sui-control-medium-padding: 0 calc((var(--sui-control-medium-height) / 4));
179
+ --sui-control-medium-height: 32px;
180
+ --sui-control-large-border-width: 1px;
181
+ --sui-control-large-border-radius: calc(var(--sui-control-large-height) / 8);
182
+ --sui-control-large-padding: 0 calc((var(--sui-control-large-height) / 3));
183
+ --sui-control-large-height: 48px;
184
+ --sui-control-border-color: hsl(var(--sui-border-color-2-hsl));
185
+ --sui-control-foreground-color: var(--sui-primary-foreground-color);
186
+ --sui-control-background-color: hsl(var(--sui-background-color-4-hsl));
187
+ --sui-control-font-family: var(--sui-font-family-default);
188
+ --sui-control-font-size: var(--sui-font-size-default);
189
+ --sui-control-line-height: var(--sui-line-height-compact);
190
+ // Button
191
+ --sui-button-small-border-radius: var(--sui-control-small-border-radius);
192
+ --sui-button-small-padding: var(--sui-control-small-padding);
193
+ --sui-button-small-height: var(--sui-control-small-height);
194
+ --sui-button-medium-border-radius: var(--sui-control-medium-border-radius);
195
+ --sui-button-medium-padding: var(--sui-control-medium-padding);
196
+ --sui-button-medium-height: var(--sui-control-medium-height);
197
+ --sui-button-large-border-radius: var(--sui-control-large-border-radius);
198
+ --sui-button-large-padding: var(--sui-control-large-padding);
199
+ --sui-button-large-height: var(--sui-control-large-height);
200
+ --sui-button-border-color: var(--sui-control-border-color);
201
+ --sui-button-background-color: var(--sui-control-background-color);
202
+ // Checkbox, radio button, switch
203
+ --sui-checkbox-border-radius: var(--sui-control-medium-border-radius);
204
+ --sui-checkbox-height: 20px;
205
+ --sui-checkbox-border-color: hsl(var(--sui-border-color-1-hsl));
206
+ --sui-checkbox-background-color: var(--sui-control-background-color);
207
+ // Option & menu item
208
+ --sui-option-border-radius: var(--sui-control-medium-border-radius);
209
+ --sui-option-padding: calc((var(--sui-control-medium-height) / 6))
210
+ calc((var(--sui-control-medium-height) / 5));
211
+ --sui-option-height: var(--sui-control-medium-height);
212
+ // Listbox
213
+ --sui-listbox-border-radius: var(--sui-control-medium-border-radius);
214
+ --sui-listbox-border-color: var(--sui-control-border-color);
215
+ --sui-listbox-foreground-color: var(--sui-control-foreground-color);
216
+ --sui-listbox-background-color: hsl(var(--sui-background-color-1-hsl));
217
+ // Textbox: singleline & multiline text fields
218
+ --sui-textbox-border-radius: var(--sui-control-medium-border-radius);
219
+ --sui-textbox-height: var(--sui-control-medium-height);
220
+ --sui-textbox-border-color: var(--sui-control-border-color);
221
+ --sui-textbox-foreground-color: var(--sui-control-foreground-color);
222
+ --sui-textbox-background-color: hsl(var(--sui-background-color-1-hsl));
223
+ --sui-textbox-font-family: var(--sui-font-family-default);
224
+ --sui-textbox-font-size: var(--sui-font-size-default);
225
+ --sui-textbox-singleline-padding: 0 8px;
226
+ --sui-textbox-singleline-min-width: 240px;
227
+ --sui-textbox-singleline-line-height: var(--sui-line-height-compact);
228
+ --sui-textbox-multiline-padding: 16px;
229
+ --sui-textbox-multiline-min-width: 480px;
230
+ --sui-textbox-multiline-line-height: var(--sui-line-height-comfortable);
231
+ // Tab
232
+ --sui-tab-height: var(--sui-control-medium-height);
233
+ --sui-tab-small-height: var(--sui-control-small-height);
234
+ --sui-tab-medium-height: var(--sui-control-medium-height);
235
+ --sui-tab-large-height: var(--sui-control-large-height);
236
+ // Toolbar
237
+ --sui-primary-toolbar-size: 48px;
238
+ --sui-secondary-toolbar-size: 40px;
239
+ // table
240
+ --sui-primary-row-height: 48px;
241
+ --sui-secondary-row-height: 40px;
241
242
 
242
- // Make controls larger on touch devices, e.g. mobile & tablet
243
- @media (pointer: coarse) {
244
- --sui-control-small-height: 30px;
245
- --sui-control-medium-height: 40px;
246
- --sui-control-large-height: 60px;
247
- --sui-checkbox-height: 24px;
248
- --sui-primary-toolbar-size: 56px;
249
- --sui-secondary-toolbar-size: 48px;
250
- --sui-primary-row-height: 56px;
251
- --sui-secondary-row-height: 48px;
252
- }
253
-
254
- @media (prefers-reduced-transparency) {
255
- --sui-primary-background-color-translucent: hsl(var(--sui-background-color-2-hsl));
256
- --sui-secondary-background-color-translucent: hsl(var(--sui-background-color-3-hsl));
257
- --sui-tertiary-background-color-translucent: hsl(var(--sui-background-color-4-hsl));
258
- }
259
-
260
- &[data-theme="light"] {
261
- @include light-theme;
262
- }
243
+ // Make controls larger on touch devices, e.g. mobile & tablet
244
+ @media (pointer: coarse) {
245
+ --sui-control-small-height: 30px;
246
+ --sui-control-medium-height: 40px;
247
+ --sui-control-large-height: 60px;
248
+ --sui-checkbox-height: 24px;
249
+ --sui-primary-toolbar-size: 56px;
250
+ --sui-secondary-toolbar-size: 48px;
251
+ --sui-primary-row-height: 56px;
252
+ --sui-secondary-row-height: 48px;
253
+ }
263
254
 
264
- &[data-theme="dark"] {
265
- @include dark-theme;
266
- }
255
+ @media (prefers-reduced-transparency) {
256
+ --sui-primary-background-color-translucent: hsl(var(--sui-background-color-2-hsl));
257
+ --sui-secondary-background-color-translucent: hsl(var(--sui-background-color-3-hsl));
258
+ --sui-tertiary-background-color-translucent: hsl(var(--sui-background-color-4-hsl));
259
+ }
267
260
 
268
- // Follow the system appearance setting when the `data-theme` attribute is not set (yet)
269
- &:not([data-theme]) {
270
- @media (prefers-color-scheme: light) {
261
+ &[data-theme="light"] {
271
262
  @include light-theme;
272
263
  }
273
264
 
274
- @media (prefers-color-scheme: dark) {
265
+ &[data-theme="dark"] {
275
266
  @include dark-theme;
276
267
  }
268
+
269
+ // Follow the system appearance setting when the `data-theme` attribute is not set (yet)
270
+ &:not([data-theme]) {
271
+ @media (prefers-color-scheme: light) {
272
+ @include light-theme;
273
+ }
274
+
275
+ @media (prefers-color-scheme: dark) {
276
+ @include dark-theme;
277
+ }
278
+ }
277
279
  }
278
280
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sveltia/ui",
3
- "version": "0.20.1",
3
+ "version": "0.20.2",
4
4
  "license": "MIT",
5
5
  "type": "module",
6
6
  "repository": {
@@ -65,12 +65,12 @@
65
65
  "stylelint": "^16.11.0",
66
66
  "stylelint-config-recommended-scss": "^14.1.0",
67
67
  "stylelint-scss": "^6.10.0",
68
- "svelte": "5.6.2",
68
+ "svelte": "5.7.1",
69
69
  "svelte-check": "^4.1.1",
70
70
  "svelte-i18n": "^4.0.1",
71
71
  "svelte-preprocess": "^6.0.3",
72
72
  "tslib": "^2.8.1",
73
- "vite": "^6.0.2",
73
+ "vite": "^6.0.3",
74
74
  "vitest": "^2.1.8"
75
75
  },
76
76
  "exports": {