@sveltia/ui 0.46.0 → 0.47.0
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/dist/components/text-editor/lexical-root.svelte +1 -1
- package/dist/components/util/app-shell.svelte +25 -34
- package/dist/components/util/font-links.svelte +56 -0
- package/dist/components/util/font-links.svelte.d.ts +26 -0
- package/dist/styles/core.scss +6 -6
- package/dist/styles/variables.scss +14 -14
- package/package.json +1 -1
|
@@ -136,7 +136,7 @@
|
|
|
136
136
|
border: 1px solid var(--sui-textbox-border-color);
|
|
137
137
|
border-radius: var(--sui-textbox-border-radius) !important;
|
|
138
138
|
padding: var(--sui-textbox-multiline-padding);
|
|
139
|
-
min-height:
|
|
139
|
+
min-height: 120px;
|
|
140
140
|
color: var(--sui-textbox-foreground-color);
|
|
141
141
|
background-color: var(--sui-textbox-background-color);
|
|
142
142
|
font-family: var(--sui-textbox-font-family);
|
|
@@ -6,6 +6,7 @@
|
|
|
6
6
|
-->
|
|
7
7
|
<script>
|
|
8
8
|
import { onMount } from 'svelte';
|
|
9
|
+
import FontLinks from './font-links.svelte';
|
|
9
10
|
|
|
10
11
|
/**
|
|
11
12
|
* @import { Snippet } from 'svelte';
|
|
@@ -28,14 +29,6 @@
|
|
|
28
29
|
/* eslint-enable prefer-const */
|
|
29
30
|
} = $props();
|
|
30
31
|
|
|
31
|
-
const stylesheets = [
|
|
32
|
-
// https://fonts.google.com/share?selection.family=Merriweather+Sans:ital,wght@0,300..800;1,300..800|Noto+Sans+Mono:wght@100..900
|
|
33
|
-
'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',
|
|
34
|
-
// https://fonts.google.com/icons?icon.set=Material+Symbols
|
|
35
|
-
// Use `font-display: block;` @see https://stackoverflow.com/q/41710834
|
|
36
|
-
'https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=block',
|
|
37
|
-
];
|
|
38
|
-
|
|
39
32
|
let fontLoaded = $state(false);
|
|
40
33
|
|
|
41
34
|
onMount(() => {
|
|
@@ -80,12 +73,7 @@
|
|
|
80
73
|
].join(', ')}
|
|
81
74
|
/>
|
|
82
75
|
<meta name="google" content="notranslate" />
|
|
83
|
-
<
|
|
84
|
-
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="anonymous" />
|
|
85
|
-
{#each stylesheets as href (href)}
|
|
86
|
-
<link rel="preload" {href} as="style" />
|
|
87
|
-
<link rel="stylesheet" {href} />
|
|
88
|
-
{/each}
|
|
76
|
+
<FontLinks />
|
|
89
77
|
</svelte:head>
|
|
90
78
|
|
|
91
79
|
{#if !fontLoaded}
|
|
@@ -200,21 +188,21 @@
|
|
|
200
188
|
);
|
|
201
189
|
--sui-popup-shadow-color: hsl(var(--sui-shadow-color) / 40%);
|
|
202
190
|
--sui-popup-backdrop-color: hsl(var(--sui-shadow-color) / 40%);
|
|
203
|
-
--sui-font-family-default: "
|
|
204
|
-
--sui-font-size-xxx-large:
|
|
205
|
-
--sui-font-size-xx-large:
|
|
206
|
-
--sui-font-size-x-large:
|
|
207
|
-
--sui-font-size-large:
|
|
208
|
-
--sui-font-size-default:
|
|
209
|
-
--sui-font-size-small:
|
|
210
|
-
--sui-font-size-x-small:
|
|
211
|
-
--sui-font-weight-normal:
|
|
212
|
-
--sui-font-weight-bold:
|
|
213
|
-
--sui-font-family-monospace: "Noto Sans Mono", monospace;
|
|
191
|
+
--sui-font-family-default: "Source Sans 3", system-ui, sans-serif;
|
|
192
|
+
--sui-font-size-xxx-large: 26px;
|
|
193
|
+
--sui-font-size-xx-large: 22px;
|
|
194
|
+
--sui-font-size-x-large: 20px;
|
|
195
|
+
--sui-font-size-large: 18px;
|
|
196
|
+
--sui-font-size-default: 16px;
|
|
197
|
+
--sui-font-size-small: 14px;
|
|
198
|
+
--sui-font-size-x-small: 12px;
|
|
199
|
+
--sui-font-weight-normal: 400;
|
|
200
|
+
--sui-font-weight-bold: 700;
|
|
201
|
+
--sui-font-family-monospace: "Noto Sans Mono", ui-monospace, monospace;
|
|
214
202
|
--sui-font-size-monospace: 0.95em;
|
|
215
|
-
--sui-line-height-default: 1.
|
|
216
|
-
--sui-line-height-compact: 1.
|
|
217
|
-
--sui-line-height-comfortable: 1.
|
|
203
|
+
--sui-line-height-default: 1.2;
|
|
204
|
+
--sui-line-height-compact: 1.4;
|
|
205
|
+
--sui-line-height-comfortable: 1.6;
|
|
218
206
|
--sui-word-spacing-normal: 1px;
|
|
219
207
|
--sui-heading-margin: 0;
|
|
220
208
|
--sui-heading-font-family: var(--sui-font-family-default);
|
|
@@ -489,42 +477,42 @@
|
|
|
489
477
|
}
|
|
490
478
|
:global(h1) {
|
|
491
479
|
margin: var(--sui-h1-margin, var(--sui-heading-margin));
|
|
492
|
-
font-size: var(--sui-h1-font-size,
|
|
480
|
+
font-size: var(--sui-h1-font-size, 34px);
|
|
493
481
|
font-family: var(--sui-h1-font-family, var(--sui-heading-font-family));
|
|
494
482
|
font-weight: var(--sui-h1-font-weight, var(--sui-heading-font-weight));
|
|
495
483
|
line-height: var(--sui-h1-line-height, var(--sui-heading-line-height));
|
|
496
484
|
}
|
|
497
485
|
:global(h2) {
|
|
498
486
|
margin: var(--sui-h2-margin, var(--sui-heading-margin));
|
|
499
|
-
font-size: var(--sui-h2-font-size,
|
|
487
|
+
font-size: var(--sui-h2-font-size, 30px);
|
|
500
488
|
font-family: var(--sui-h2-font-family, var(--sui-heading-font-family));
|
|
501
489
|
font-weight: var(--sui-h2-font-weight, var(--sui-heading-font-weight));
|
|
502
490
|
line-height: var(--sui-h2-line-height, var(--sui-heading-line-height));
|
|
503
491
|
}
|
|
504
492
|
:global(h3) {
|
|
505
493
|
margin: var(--sui-h3-margin, var(--sui-heading-margin));
|
|
506
|
-
font-size: var(--sui-h3-font-size,
|
|
494
|
+
font-size: var(--sui-h3-font-size, 26px);
|
|
507
495
|
font-family: var(--sui-h3-font-family, var(--sui-heading-font-family));
|
|
508
496
|
font-weight: var(--sui-h3-font-weight, var(--sui-heading-font-weight));
|
|
509
497
|
line-height: var(--sui-h3-line-height, var(--sui-heading-line-height));
|
|
510
498
|
}
|
|
511
499
|
:global(h4) {
|
|
512
500
|
margin: var(--sui-h4-margin, var(--sui-heading-margin));
|
|
513
|
-
font-size: var(--sui-h4-font-size,
|
|
501
|
+
font-size: var(--sui-h4-font-size, 22px);
|
|
514
502
|
font-family: var(--sui-h4-font-family, var(--sui-heading-font-family));
|
|
515
503
|
font-weight: var(--sui-h4-font-weight, var(--sui-heading-font-weight));
|
|
516
504
|
line-height: var(--sui-h4-line-height, var(--sui-heading-line-height));
|
|
517
505
|
}
|
|
518
506
|
:global(h5) {
|
|
519
507
|
margin: var(--sui-h5-margin, var(--sui-heading-margin));
|
|
520
|
-
font-size: var(--sui-h5-font-size,
|
|
508
|
+
font-size: var(--sui-h5-font-size, 18px);
|
|
521
509
|
font-family: var(--sui-h5-font-family, var(--sui-heading-font-family));
|
|
522
510
|
font-weight: var(--sui-h5-font-weight, var(--sui-heading-font-weight));
|
|
523
511
|
line-height: var(--sui-h5-line-height, var(--sui-heading-line-height));
|
|
524
512
|
}
|
|
525
513
|
:global(h6) {
|
|
526
514
|
margin: var(--sui-h6-margin, var(--sui-heading-margin));
|
|
527
|
-
font-size: var(--sui-h6-font-size,
|
|
515
|
+
font-size: var(--sui-h6-font-size, 14px);
|
|
528
516
|
font-family: var(--sui-h6-font-family, var(--sui-heading-font-family));
|
|
529
517
|
font-weight: var(--sui-h6-font-weight, var(--sui-heading-font-weight));
|
|
530
518
|
line-height: var(--sui-h6-line-height, var(--sui-heading-line-height));
|
|
@@ -613,6 +601,9 @@
|
|
|
613
601
|
font-size: var(--sui-font-size-default);
|
|
614
602
|
font-weight: var(--sui-font-weight-normal, normal);
|
|
615
603
|
word-spacing: var(--sui-word-spacing-normal);
|
|
604
|
+
font-size-adjust: 0.5;
|
|
605
|
+
-webkit-font-smoothing: antialiased;
|
|
606
|
+
-moz-osx-font-smoothing: grayscale;
|
|
616
607
|
-webkit-user-select: none;
|
|
617
608
|
user-select: none;
|
|
618
609
|
touch-action: none;
|
|
@@ -0,0 +1,56 @@
|
|
|
1
|
+
<link rel="preconnect" href="https://cdn.jsdelivr.net/" />
|
|
2
|
+
|
|
3
|
+
<style>
|
|
4
|
+
/* https://fontsource.org/fonts/source-sans-3/cdn */
|
|
5
|
+
@font-face {
|
|
6
|
+
font-family: 'Source Sans 3';
|
|
7
|
+
font-style: normal;
|
|
8
|
+
font-display: swap;
|
|
9
|
+
font-weight: 200 900;
|
|
10
|
+
src: url(https://cdn.jsdelivr.net/fontsource/fonts/source-sans-3:vf@5.3.0/latin-wght-normal.woff2)
|
|
11
|
+
format('woff2-variations');
|
|
12
|
+
unicode-range:
|
|
13
|
+
U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
|
|
14
|
+
U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
/* https://fontsource.org/fonts/noto-mono/cdn */
|
|
18
|
+
@font-face {
|
|
19
|
+
font-family: 'Noto Mono';
|
|
20
|
+
font-style: normal;
|
|
21
|
+
font-display: swap;
|
|
22
|
+
font-weight: 400;
|
|
23
|
+
src: url(https://cdn.jsdelivr.net/fontsource/fonts/noto-mono@5.3.0/latin-400-normal.woff2)
|
|
24
|
+
format('woff2');
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
/* https://fontsource.org/fonts/material-symbols-outlined/cdn */
|
|
28
|
+
@font-face {
|
|
29
|
+
font-family: 'Material Symbols Outlined';
|
|
30
|
+
font-style: normal;
|
|
31
|
+
font-display: block;
|
|
32
|
+
font-weight: 400;
|
|
33
|
+
src: url(https://cdn.jsdelivr.net/fontsource/fonts/material-symbols-outlined:vf@5.3.1/latin-wght-normal.woff2)
|
|
34
|
+
format('woff2-variations');
|
|
35
|
+
unicode-range:
|
|
36
|
+
U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
|
|
37
|
+
U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
:global(.material-symbols-outlined) {
|
|
41
|
+
/* stylelint-disable-next-line font-family-no-missing-generic-family-keyword */
|
|
42
|
+
font-family: 'Material Symbols Outlined';
|
|
43
|
+
font-weight: normal;
|
|
44
|
+
font-style: normal;
|
|
45
|
+
font-size: 24px;
|
|
46
|
+
line-height: 1;
|
|
47
|
+
letter-spacing: normal;
|
|
48
|
+
text-transform: none;
|
|
49
|
+
display: inline-block;
|
|
50
|
+
white-space: nowrap;
|
|
51
|
+
overflow-wrap: normal;
|
|
52
|
+
direction: ltr;
|
|
53
|
+
-moz-font-feature-settings: 'liga';
|
|
54
|
+
font-feature-settings: 'liga';
|
|
55
|
+
}
|
|
56
|
+
</style>
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
export default FontLinks;
|
|
2
|
+
type FontLinks = SvelteComponent<{
|
|
3
|
+
[x: string]: never;
|
|
4
|
+
}, {
|
|
5
|
+
[evt: string]: CustomEvent<any>;
|
|
6
|
+
}, {}> & {
|
|
7
|
+
$$bindings?: string | undefined;
|
|
8
|
+
};
|
|
9
|
+
declare const FontLinks: $$__sveltets_2_IsomorphicComponent<{
|
|
10
|
+
[x: string]: never;
|
|
11
|
+
}, {
|
|
12
|
+
[evt: string]: CustomEvent<any>;
|
|
13
|
+
}, {}, {}, string>;
|
|
14
|
+
interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
|
|
15
|
+
new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
|
|
16
|
+
$$bindings?: Bindings;
|
|
17
|
+
} & Exports;
|
|
18
|
+
(internal: unknown, props: {
|
|
19
|
+
$$events?: Events;
|
|
20
|
+
$$slots?: Slots;
|
|
21
|
+
}): Exports & {
|
|
22
|
+
$set?: any;
|
|
23
|
+
$on?: any;
|
|
24
|
+
};
|
|
25
|
+
z_$$bindings?: Bindings;
|
|
26
|
+
}
|
package/dist/styles/core.scss
CHANGED
|
@@ -50,7 +50,7 @@
|
|
|
50
50
|
|
|
51
51
|
h1 {
|
|
52
52
|
margin: var(--sui-h1-margin, var(--sui-heading-margin));
|
|
53
|
-
font-size: var(--sui-h1-font-size,
|
|
53
|
+
font-size: var(--sui-h1-font-size, 34px);
|
|
54
54
|
font-family: var(--sui-h1-font-family, var(--sui-heading-font-family));
|
|
55
55
|
font-weight: var(--sui-h1-font-weight, var(--sui-heading-font-weight));
|
|
56
56
|
line-height: var(--sui-h1-line-height, var(--sui-heading-line-height));
|
|
@@ -58,7 +58,7 @@
|
|
|
58
58
|
|
|
59
59
|
h2 {
|
|
60
60
|
margin: var(--sui-h2-margin, var(--sui-heading-margin));
|
|
61
|
-
font-size: var(--sui-h2-font-size,
|
|
61
|
+
font-size: var(--sui-h2-font-size, 30px);
|
|
62
62
|
font-family: var(--sui-h2-font-family, var(--sui-heading-font-family));
|
|
63
63
|
font-weight: var(--sui-h2-font-weight, var(--sui-heading-font-weight));
|
|
64
64
|
line-height: var(--sui-h2-line-height, var(--sui-heading-line-height));
|
|
@@ -66,7 +66,7 @@
|
|
|
66
66
|
|
|
67
67
|
h3 {
|
|
68
68
|
margin: var(--sui-h3-margin, var(--sui-heading-margin));
|
|
69
|
-
font-size: var(--sui-h3-font-size,
|
|
69
|
+
font-size: var(--sui-h3-font-size, 26px);
|
|
70
70
|
font-family: var(--sui-h3-font-family, var(--sui-heading-font-family));
|
|
71
71
|
font-weight: var(--sui-h3-font-weight, var(--sui-heading-font-weight));
|
|
72
72
|
line-height: var(--sui-h3-line-height, var(--sui-heading-line-height));
|
|
@@ -74,7 +74,7 @@
|
|
|
74
74
|
|
|
75
75
|
h4 {
|
|
76
76
|
margin: var(--sui-h4-margin, var(--sui-heading-margin));
|
|
77
|
-
font-size: var(--sui-h4-font-size,
|
|
77
|
+
font-size: var(--sui-h4-font-size, 22px);
|
|
78
78
|
font-family: var(--sui-h4-font-family, var(--sui-heading-font-family));
|
|
79
79
|
font-weight: var(--sui-h4-font-weight, var(--sui-heading-font-weight));
|
|
80
80
|
line-height: var(--sui-h4-line-height, var(--sui-heading-line-height));
|
|
@@ -82,7 +82,7 @@
|
|
|
82
82
|
|
|
83
83
|
h5 {
|
|
84
84
|
margin: var(--sui-h5-margin, var(--sui-heading-margin));
|
|
85
|
-
font-size: var(--sui-h5-font-size,
|
|
85
|
+
font-size: var(--sui-h5-font-size, 18px);
|
|
86
86
|
font-family: var(--sui-h5-font-family, var(--sui-heading-font-family));
|
|
87
87
|
font-weight: var(--sui-h5-font-weight, var(--sui-heading-font-weight));
|
|
88
88
|
line-height: var(--sui-h5-line-height, var(--sui-heading-line-height));
|
|
@@ -90,7 +90,7 @@
|
|
|
90
90
|
|
|
91
91
|
h6 {
|
|
92
92
|
margin: var(--sui-h6-margin, var(--sui-heading-margin));
|
|
93
|
-
font-size: var(--sui-h6-font-size,
|
|
93
|
+
font-size: var(--sui-h6-font-size, 14px);
|
|
94
94
|
font-family: var(--sui-h6-font-family, var(--sui-heading-font-family));
|
|
95
95
|
font-weight: var(--sui-h6-font-weight, var(--sui-heading-font-weight));
|
|
96
96
|
line-height: var(--sui-h6-line-height, var(--sui-heading-line-height));
|
|
@@ -154,21 +154,21 @@
|
|
|
154
154
|
--sui-popup-shadow-color: hsl(var(--sui-shadow-color) / 40%);
|
|
155
155
|
--sui-popup-backdrop-color: hsl(var(--sui-shadow-color) / 40%);
|
|
156
156
|
// Text
|
|
157
|
-
--sui-font-family-default: "
|
|
158
|
-
--sui-font-size-xxx-large:
|
|
159
|
-
--sui-font-size-xx-large:
|
|
160
|
-
--sui-font-size-x-large:
|
|
161
|
-
--sui-font-size-large:
|
|
162
|
-
--sui-font-size-default:
|
|
163
|
-
--sui-font-size-small:
|
|
164
|
-
--sui-font-size-x-small:
|
|
165
|
-
--sui-font-weight-normal:
|
|
166
|
-
--sui-font-weight-bold:
|
|
167
|
-
--sui-font-family-monospace: "Noto Sans Mono", monospace;
|
|
157
|
+
--sui-font-family-default: "Source Sans 3", system-ui, sans-serif;
|
|
158
|
+
--sui-font-size-xxx-large: 26px;
|
|
159
|
+
--sui-font-size-xx-large: 22px;
|
|
160
|
+
--sui-font-size-x-large: 20px;
|
|
161
|
+
--sui-font-size-large: 18px;
|
|
162
|
+
--sui-font-size-default: 16px;
|
|
163
|
+
--sui-font-size-small: 14px;
|
|
164
|
+
--sui-font-size-x-small: 12px;
|
|
165
|
+
--sui-font-weight-normal: 400;
|
|
166
|
+
--sui-font-weight-bold: 700;
|
|
167
|
+
--sui-font-family-monospace: "Noto Sans Mono", ui-monospace, monospace;
|
|
168
168
|
--sui-font-size-monospace: 0.95em;
|
|
169
|
-
--sui-line-height-default: 1.
|
|
170
|
-
--sui-line-height-compact: 1.
|
|
171
|
-
--sui-line-height-comfortable: 1.
|
|
169
|
+
--sui-line-height-default: 1.2;
|
|
170
|
+
--sui-line-height-compact: 1.4;
|
|
171
|
+
--sui-line-height-comfortable: 1.6;
|
|
172
172
|
--sui-word-spacing-normal: 1px;
|
|
173
173
|
--sui-heading-margin: 0;
|
|
174
174
|
--sui-heading-font-family: var(--sui-font-family-default);
|