apple-svelte
3 |UI component library for Svelte based on Apple's Human Interface design language.
4 |
7 |
9 |
10 |
24 |
--------------------------------------------------------------------------------
/src/lib/index.js:
--------------------------------------------------------------------------------
1 | export { default as ActionSheet } from './action-sheet/ActionSheet.svelte';
2 | export { default as ActionSheetButton } from './action-sheet/ActionSheetButton.svelte';
3 | export { default as Alert } from './alert/Alert.svelte';
4 | export { default as AlertButton } from './alert/AlertButton.svelte';
5 | export { default as AlertTextField } from './alert/AlertTextField.svelte';
6 | export { default as Button } from './button/Button.svelte';
7 | export { default as Collection } from './collection/Collection.svelte';
8 | export { default as List } from './list/List.svelte';
9 | export { default as ListButtonRow } from './list/ListButtonRow.svelte';
10 | export { default as ListRow } from './list/ListRow.svelte';
11 | export { default as ListRowButtonTrailing } from './list/ListRowButtonTrailing.svelte';
12 | export { default as ListRowDefaultTrailing } from './list/ListRowDefaultTrailing.svelte';
13 | export { default as ListRowDisclosureTrailing } from './list/ListRowDisclosureTrailing.svelte';
14 | export { default as ListRowImage } from './list/ListRowImage.svelte';
15 | export { default as ListRowStepperTrailing } from './list/ListRowStepperTrailing.svelte';
16 | export { default as ListRowToggleTrailing } from './list/ListRowToggleTrailing.svelte';
17 | export { default as ListSliderRow } from './list/ListSliderRow.svelte';
18 | export { default as ListTextFieldRow } from './list/ListTextFieldRow.svelte';
19 | export { default as NavigationBar } from './navigation-bar/NavigationBar.svelte';
20 | export { default as NavigationBarLeading } from './navigation-bar/NavigationBarLeading.svelte';
21 | export { default as NavigationBarSearchField } from './navigation-bar/NavigationBarSearchField.svelte';
22 | export { default as NavigationBarTrailing } from './navigation-bar/NavigationBarTrailing.svelte';
23 | export { default as PageControl } from './page-control/PageControl.svelte';
24 | export { default as PageControlButton } from './page-control/PageControlButton.svelte';
25 | export { default as RegularProgressIndicator } from './progress-indicator/RegularProgressIndicator.svelte';
26 | export { default as SmallProgressIndicator } from './progress-indicator/SmallProgressIndicator.svelte';
27 | export { default as SegmentedControl } from './segmented-control/SegmentedControl.svelte';
28 | export { default as SegmentedControlButton } from './segmented-control/SegmentedControlButton.svelte';
29 | export { default as Sidebar } from './sidebar/Sidebar.svelte';
30 | export { default as SidebarNavigationBar } from './sidebar/SidebarNavigationBar.svelte';
31 | export { default as SidebarNavigationBarLeading } from './sidebar/SidebarNavigationBarLeading.svelte';
32 | export { default as SidebarNavigationBarTrailing } from './sidebar/SidebarNavigationBarTrailing.svelte';
33 | export { default as SidebarSection } from './sidebar/SidebarSection.svelte';
34 | export { default as SidebarSectionAddItemButton } from './sidebar/SidebarSectionAddItemButton.svelte';
35 | export { default as SidebarSectionItem } from './sidebar/SidebarSectionItem.svelte';
36 | export { default as TabBar } from './tab-bar/TabBar.svelte';
37 | export { default as TabBarButton } from './tab-bar/TabBarButton.svelte';
38 | export { default as Toolbar } from './toolbar/Toolbar.svelte';
39 | export { default as ToolbarButton } from './toolbar/ToolbarButton.svelte';
40 |
--------------------------------------------------------------------------------
/src/lib/list/List.svelte:
--------------------------------------------------------------------------------
1 |
29 |
30 |
31 | {#if showHeader}
32 | {#if headerType === 'default'}
33 |
50 |
51 |
93 |
--------------------------------------------------------------------------------
/src/lib/list/ListButtonRow.svelte:
--------------------------------------------------------------------------------
1 |
33 |
34 |
39 |
40 |
82 |
--------------------------------------------------------------------------------
/src/lib/list/ListRow.svelte:
--------------------------------------------------------------------------------
1 |
55 |
56 |
109 |
110 |
209 |
--------------------------------------------------------------------------------
/src/lib/list/ListRowButtonTrailing.svelte:
--------------------------------------------------------------------------------
1 |
17 |
18 |
19 |
20 |
41 |
--------------------------------------------------------------------------------
/src/lib/list/ListRowDefaultTrailing.svelte:
--------------------------------------------------------------------------------
1 |
66 |
67 | {header}
34 | {:else if headerType === 'plain'} 35 |{header}
36 | {:else} 37 | 41 | {/if} 42 | {/if} 43 |
44 |
46 | {#if showFooter}
47 |
48 | {/if}
49 |
68 | {#if showDetail}
69 |
72 | {/if}
73 | {#if showSymbol}
74 |
77 | {/if}
78 | {#if showInfo}
79 |
82 | {/if}
83 | {#if showCheckmark}
84 |
90 | {/if}
91 | {#if showDisclosure}
92 |
98 | {/if}
99 |
100 |
101 |
160 |
--------------------------------------------------------------------------------
/src/lib/list/ListRowDisclosureTrailing.svelte:
--------------------------------------------------------------------------------
1 |
29 |
30 |
31 | {#if showDetail}
32 |
35 | {/if}
36 |
39 |
40 |
41 |
80 |
--------------------------------------------------------------------------------
/src/lib/list/ListRowImage.svelte:
--------------------------------------------------------------------------------
1 |
29 |
30 | {#if type === 'symbol'}
31 | {symbol}
32 | {:else} 33 |
30 |
33 |
34 |
37 |
38 |
39 |
85 |
--------------------------------------------------------------------------------
/src/lib/list/ListRowToggleTrailing.svelte:
--------------------------------------------------------------------------------
1 |
33 |
34 |
55 |
56 |
91 |
--------------------------------------------------------------------------------
/src/lib/list/ListSliderRow.svelte:
--------------------------------------------------------------------------------
1 |
18 |
19 |
39 |
40 |
129 |
--------------------------------------------------------------------------------
/src/lib/list/ListTextFieldRow.svelte:
--------------------------------------------------------------------------------
1 |
10 |
11 |
17 |
18 |
52 |
--------------------------------------------------------------------------------
/src/lib/navigation-bar/NavigationBar.svelte:
--------------------------------------------------------------------------------
1 |
23 |
24 |
48 |
49 |
91 |
--------------------------------------------------------------------------------
/src/lib/navigation-bar/NavigationBarLeading.svelte:
--------------------------------------------------------------------------------
1 |
31 |
32 |
36 |
37 |
72 |
--------------------------------------------------------------------------------
/src/lib/navigation-bar/NavigationBarSearchField.svelte:
--------------------------------------------------------------------------------
1 |
20 |
21 |
22 |
32 |
33 |
34 |
35 |
114 |
--------------------------------------------------------------------------------
/src/lib/navigation-bar/NavigationBarTrailing.svelte:
--------------------------------------------------------------------------------
1 |
34 |
35 |
44 |
45 |
80 |
--------------------------------------------------------------------------------
/src/lib/page-control/PageControl.svelte:
--------------------------------------------------------------------------------
1 |
15 |
16 |
17 |
24 |
25 |
43 |
--------------------------------------------------------------------------------
/src/lib/page-control/PageControlButton.svelte:
--------------------------------------------------------------------------------
1 |
19 |
20 |
42 |
43 |
64 |
--------------------------------------------------------------------------------
/src/lib/progress-indicator/RegularProgressIndicator.svelte:
--------------------------------------------------------------------------------
1 |
22 |
23 |
21 |
23 |
24 |
50 |
51 |
147 |
--------------------------------------------------------------------------------
/src/lib/progress-indicator/SmallProgressIndicator.svelte:
--------------------------------------------------------------------------------
1 |
22 |
23 |
25 |
46 | {#if showLabel}
47 |
26 |
35 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
36 |
45 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 | {label}
48 | {/if} 49 |
24 |
50 |
51 |
150 |
--------------------------------------------------------------------------------
/src/lib/segmented-control/SegmentedControl.svelte:
--------------------------------------------------------------------------------
1 |
5 |
6 |
25 |
46 | {#if showLabel}
47 |
26 |
35 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
36 |
45 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 | {label}
48 | {/if} 49 |
7 |
9 |
10 |
21 |
--------------------------------------------------------------------------------
/src/lib/segmented-control/SegmentedControlButton.svelte:
--------------------------------------------------------------------------------
1 |
20 |
21 |
47 |
48 |
176 |
--------------------------------------------------------------------------------
/src/lib/sidebar/Sidebar.svelte:
--------------------------------------------------------------------------------
1 |
87 |
88 |
28 |
34 | {#if scrollPosition === 'top'}
35 | {title}
31 | {/if} 32 |{title}
36 | {/if} 37 |
60 |
62 |
166 |
168 |
169 |
307 |
--------------------------------------------------------------------------------
/src/lib/styles.css:
--------------------------------------------------------------------------------
1 | :root {
2 | color-scheme: light dark;
3 | /* Font families: */
4 | --sans-serif-font-family: ui-sans-serif, 'SF Pro', Roboto, 'Fira Sans', Oxygen, Ubuntu, 'Segoe UI',
5 | 'Helvetica Neue', 'Noto Sans', Arial, sans-serif;
6 | --monospace-font-family: ui-monospace, 'SF Mono', 'Roboto Mono', 'Fira Mono', 'Oxygen Mono',
7 | 'Ubuntu Mono', 'Cascadia Code', Menlo, 'Noto Sans Mono', Consolas, monospace;
8 | --symbol-font-family: 'Material Symbols Rounded';
9 |
10 | /* Symbol sizes: */
11 | --small-symbol-font-size-multiplier: 1.01680672269;
12 | --medium-symbol-font-size-multiplier: 1.2840336134;
13 | --large-symbol-font-size-multiplier: 1.6394957983;
14 |
15 | /* Materials: */
16 | --materials-background-blend-mode: color-dodge;
17 | --materials-thick: rgb(239, 239, 239, 0.97);
18 | --materials-regular: rgb(229, 229, 229, 0.82);
19 | --materials-thin: rgb(207, 207, 207, 0.7);
20 | --materials-ultrathin: rgb(201, 201, 201, 0.44);
21 | --materials-chrome-background-blend-mode: hard-light;
22 | --materials-chrome: rgb(255, 255, 255, 0.75);
23 |
24 | /* Overlays: */
25 | --hover-opacity: 80%;
26 | --press-overlay: rgb(0, 0, 0, 0.1);
27 | --symbol-press-opacity: 20%;
28 |
29 | /* Colors: */
30 | --colors-accent: var(--colors-blue);
31 | --colors-accent-2: var(--colors-blue-2);
32 | --colors-red: #ff3b30;
33 | --colors-red-2: rgb(255, 59, 48, 0.15);
34 | --colors-orange: #ff9500;
35 | --colors-orange-2: rgb(255, 149, 0, 0.15);
36 | --colors-yellow: #fc0;
37 | --colors-yellow-2: rgb(255, 204, 0, 0.15);
38 | --colors-green: #34c759;
39 | --colors-green-2: rgb(52, 199, 89, 0.15);
40 | --colors-mint: #00c7be;
41 | --colors-mint-2: rgb(0, 199, 190, 0.15);
42 | --colors-teal: #30b0c7;
43 | --colors-teal-2: rgb(48, 176, 199, 0.15);
44 | --colors-cyan: #32ade6;
45 | --colors-cyan-2: rgb(50, 173, 230, 0.15);
46 | --colors-blue: #007aff;
47 | --colors-blue-2: rgb(0, 122, 255, 0.15);
48 | --colors-indigo: #5856d6;
49 | --colors-indigo-2: rgb(88, 86, 214, 0.15);
50 | --colors-purple: #af52de;
51 | --colors-purple-2: rgb(175, 82, 222, 0.15);
52 | --colors-pink: #ff2d55;
53 | --colors-pink-2: rgb(255, 45, 85, 0.15);
54 | --colors-brown: #a2845e;
55 | --colors-brown-2: rgb(162, 132, 94, 0.15);
56 |
57 | /* Grays: */
58 | --grays-black: #000;
59 | --grays-gray: #8e8e93;
60 | --grays-gray-2: #aeaeb2;
61 | --grays-gray-3: #c7c7cc;
62 | --grays-gray-4: #d1d1d6;
63 | --grays-gray-5: #e5e5ea;
64 | --grays-gray-6: #f2f2f7;
65 | --grays-white: #fff;
66 |
67 | /* Backgrounds: */
68 | --bg-primary: #fff;
69 | --bg-secondary: #f2f2f7;
70 | --bg-tertiary: #fff;
71 |
72 | /* Labels: */
73 | --labels-primary: #000;
74 | --labels-secondary: rgb(60, 60, 67, 0.6);
75 | --labels-tertiary: rgb(60, 60, 67, 0.3);
76 | --labels-quaternary: rgb(60, 60, 67, 0.18);
77 |
78 | /* Separators: */
79 | --separators-opaque: #c6c6c8;
80 | --separators-non-opaque: rgb(60, 60, 67, 0.36);
81 |
82 | /* Grouped backgrounds: */
83 | --bg-grouped-primary: #f2f2f7;
84 | --bg-grouped-secondary: #fff;
85 | --bg-grouped-tertiary: #f2f2f7;
86 |
87 | /* Fills: */
88 | --fills-primary: rgb(120, 120, 128, 0.2);
89 | --fills-secondary: rgb(120, 120, 128, 0.16);
90 | --fills-tertiary: rgb(118, 118, 128, 0.12);
91 | --fills-quaternary: rgb(116, 116, 128, 0.08);
92 | }
93 |
94 | @media (prefers-color-scheme: dark) {
95 | :root {
96 | /* Materials: */
97 | --materials-background-blend-mode: overlay;
98 | --materials-thick: rgb(36, 36, 36, 0.9);
99 | --materials-regular: rgb(41, 41, 41, 0.82);
100 | --materials-thin: rgb(47, 47, 47, 0.7);
101 | --materials-ultrathin: rgb(47, 47, 47, 0.55);
102 | --materials-chrome: rgb(0, 0, 0, 0.75);
103 |
104 | /* Overlays: */
105 | --hover-opacity: 74%;
106 | --press-overlay: rgb(255, 255, 255, 0.07);
107 | --symbol-press-opacity: 40%;
108 |
109 | /* Colors: */
110 | --colors-red: #ff453a;
111 | --colors-red-2: rgb(255, 69, 58, 0.15);
112 | --colors-orange: #ff9f0a;
113 | --colors-orange-2: rgb(255, 159, 10, 0.15);
114 | --colors-yellow: #ffd60a;
115 | --colors-yellow-2: rgb(255, 214, 10, 0.15);
116 | --colors-green: #30d158;
117 | --colors-green-2: rgb(48, 209, 88, 0.15);
118 | --colors-mint: #63e6e2;
119 | --colors-mint-2: rgb(99, 230, 226, 0.15);
120 | --colors-teal: #40cbe0;
121 | --colors-teal-2: rgb(64, 203, 224, 0.15);
122 | --colors-cyan: #64d2ff;
123 | --colors-cyan-2: rgb(100, 210, 255, 0.15);
124 | --colors-blue: #0a84ff;
125 | --colors-blue-2: rgb(10, 132, 255, 0.15);
126 | --colors-indigo: #5e5ce6;
127 | --colors-indigo-2: rgb(94, 92, 230, 0.15);
128 | --colors-purple: #bf5af2;
129 | --colors-purple-2: rgb(191, 90, 242, 0.15);
130 | --colors-pink: #ff375f;
131 | --colors-pink-2: rgb(255, 55, 95, 0.15);
132 | --colors-brown: #ac8e68;
133 | --colors-brown-2: rgb(172, 142, 104, 0.15);
134 |
135 | /* Grays: */
136 | --grays-black: #000;
137 | --grays-gray: #8e8e93;
138 | --grays-gray-2: #636366;
139 | --grays-gray-3: #48484a;
140 | --grays-gray-4: #3a3a3c;
141 | --grays-gray-5: #2c2c2e;
142 | --grays-gray-6: #1c1c1e;
143 | --grays-white: #fff;
144 |
145 | /* Backgrounds: */
146 | --bg-primary-elevated: #1c1c1e;
147 | --bg-secondary-elevated: #2c2c2e;
148 | --bg-tertiary-elevated: #3a3a3c;
149 | --bg-primary: #000;
150 | --bg-secondary: #1c1c1e;
151 | --bg-tertiary: #2c2c2e;
152 |
153 | /* Labels: */
154 | --labels-primary: #fff;
155 | --labels-secondary: rgb(235, 235, 245, 0.6);
156 | --labels-tertiary: rgb(235, 235, 245, 0.3);
157 | --labels-quaternary: rgb(235, 235, 245, 0.16);
158 |
159 | /* Separators: */
160 | --separators-opaque: #38383a;
161 | --separators-non-opaque: rgb(84, 84, 88, 0.65);
162 |
163 | /* Grouped backgrounds: */
164 | --bg-grouped-primary-elevated: #1c1c1e;
165 | --bg-grouped-secondary-elevated: #2c2c2e;
166 | --bg-grouped-tertiary-elevated: #3a3a3c;
167 | --bg-grouped-primary: #000;
168 | --bg-grouped-secondary: #1c1c1e;
169 | --bg-grouped-tertiary: #2c2c2e;
170 |
171 | /* Fills: */
172 | --fills-primary: rgb(120, 120, 128, 0.36);
173 | --fills-secondary: rgb(120, 120, 128, 0.32);
174 | --fills-tertiary: rgb(118, 118, 128, 0.24);
175 | --fills-quaternary: rgb(116, 116, 128, 0.18);
176 | }
177 | }
178 |
179 | /* Body styles: */
180 |
181 | * {
182 | margin-block-end: 0px;
183 | margin-inline-end: 0px;
184 | margin-block-start: 0px;
185 | margin-inline-start: 0px;
186 | text-size-adjust: none;
187 | -webkit-tap-highlight-color: transparent;
188 | }
189 |
190 | *:focus {
191 | outline: unset;
192 | }
193 |
194 | a {
195 | color: var(--colors-accent);
196 | text-decoration: none;
197 | }
198 |
199 | a:active,
200 | a:focus {
201 | opacity: var(--symbol-press-opacity) !important;
202 | text-decoration: underline;
203 | }
204 |
205 | a:hover {
206 | opacity: var(--hover-opacity);
207 | text-decoration: underline;
208 | }
209 |
210 | body {
211 | background: var(--bg-grouped-primary);
212 | color: var(--labels-primary);
213 | /* font: 400 17px/22px; */
214 | font-family: var(--sans-serif-font-family);
215 | font-size: 17px;
216 | font-weight: 400;
217 | line-height: 22px;
218 | user-select: none;
219 | -webkit-user-select: none;
220 | }
221 |
222 | button {
223 | background: transparent;
224 | border: none;
225 | cursor: pointer;
226 | padding: 0px;
227 | text-align: left;
228 | }
229 |
230 | code {
231 | font-family: var(--monospace-font-family);
232 | }
233 |
234 | .hidden-input {
235 | clip: rect(1px, 1px, 1px, 1px);
236 | height: 1px;
237 | overflow: hidden;
238 | position: absolute;
239 | width: 1px;
240 | }
241 |
242 | input {
243 | background: transparent;
244 | border: none;
245 | }
246 |
247 | input:focus {
248 | background: transparent;
249 | outline: none;
250 | }
251 |
252 | label {
253 | cursor: pointer;
254 | }
255 |
256 | /* Text styles: */
257 |
258 | h1,
259 | p {
260 | user-select: text;
261 | text-size-adjust: none;
262 | -webkit-user-select: text;
263 | }
264 |
265 | .large-title {
266 | /* font: 400 34px/41px; */
267 | font-size: 34px;
268 | font-weight: 400;
269 | line-height: 41px;
270 | text-size-adjust: none;
271 | }
272 |
273 | .large-title-emphasized {
274 | /* font: 700 34px/41px; */
275 | font-size: 34px;
276 | font-weight: 700;
277 | line-height: 41px;
278 | text-size-adjust: none;
279 | }
280 |
281 | .title1 {
282 | /* font: 400 28px/34px; */
283 | font-size: 28px;
284 | font-weight: 400;
285 | line-height: 34px;
286 | text-size-adjust: none;
287 | }
288 |
289 | .title1-emphasized {
290 | /* font: 700 28px/34px; */
291 | font-size: 28px;
292 | font-weight: 700;
293 | line-height: 34px;
294 | text-size-adjust: none;
295 | }
296 |
297 | .title2 {
298 | /* font: 400 22px/28px; */
299 | font-size: 22px;
300 | font-weight: 400;
301 | line-height: 28px;
302 | text-size-adjust: none;
303 | }
304 |
305 | .title2-emphasized {
306 | /* font: 700 22px/28px; */
307 | font-size: 22px;
308 | font-weight: 700;
309 | line-height: 28px;
310 | text-size-adjust: none;
311 | }
312 |
313 | .title3 {
314 | /* font: 400 20px/25px; */
315 | font-size: 20px;
316 | font-weight: 400;
317 | line-height: 25px;
318 | text-size-adjust: none;
319 | }
320 |
321 | .title3-emphasized {
322 | /* font: 590 20px/25px; */
323 | font-size: 20px;
324 | font-weight: 590;
325 | line-height: 25px;
326 | text-size-adjust: none;
327 | }
328 |
329 | .headline {
330 | /* font: 590 17px/22px; */
331 | font-size: 17px;
332 | font-weight: 590;
333 | line-height: 22px;
334 | text-size-adjust: none;
335 | }
336 |
337 | .headline-italic {
338 | /* font: italic 590 17px/22px; */
339 | font-size: 17px;
340 | font-style: italic;
341 | font-weight: 590;
342 | line-height: 22px;
343 | text-size-adjust: none;
344 | }
345 |
346 | .body {
347 | /* font: 400 17px/22px; */
348 | font-size: 17px;
349 | font-weight: 400;
350 | line-height: 22px;
351 | text-size-adjust: none;
352 | }
353 |
354 | .body-emphasized {
355 | /* font: 590 17px/22px; */
356 | font-size: 17px;
357 | font-weight: 590;
358 | line-height: 22px;
359 | text-size-adjust: none;
360 | }
361 |
362 | .body-italic {
363 | /* font: italic 400 17px/22px; */
364 | font-size: 17px;
365 | font-style: italic;
366 | font-weight: 400;
367 | line-height: 22px;
368 | text-size-adjust: none;
369 | }
370 |
371 | .body-emphasized-italic {
372 | /* font: italic 590 17px/22px; */
373 | font-size: 17px;
374 | font-style: italic;
375 | font-weight: 590;
376 | line-height: 22px;
377 | text-size-adjust: none;
378 | }
379 |
380 | .callout {
381 | /* font: 400 16px/21px; */
382 | font-size: 16px;
383 | font-weight: 400;
384 | line-height: 21px;
385 | text-size-adjust: none;
386 | }
387 |
388 | .callout-emphasized {
389 | /* font: 590 16px/21px; */
390 | font-size: 16px;
391 | font-weight: 590;
392 | line-height: 21px;
393 | text-size-adjust: none;
394 | }
395 |
396 | .callout-italic {
397 | /* font: italic 400 16px/21px; */
398 | font-size: 16px;
399 | font-style: italic;
400 | font-weight: 400;
401 | line-height: 21px;
402 | text-size-adjust: none;
403 | }
404 |
405 | .callout--emphasized-italic {
406 | /* font: italic 590 16px/21px; */
407 | font-size: 16px;
408 | font-style: italic;
409 | font-weight: 590;
410 | line-height: 21px;
411 | text-size-adjust: none;
412 | }
413 |
414 | .subheadline {
415 | /* font: 400 15px/20px; */
416 | font-size: 15px;
417 | font-weight: 400;
418 | line-height: 20px;
419 | text-size-adjust: none;
420 | }
421 |
422 | .subheadline-emphasized {
423 | /* font: 590 15px/20px; */
424 | font-size: 15px;
425 | font-weight: 590;
426 | line-height: 20px;
427 | text-size-adjust: none;
428 | }
429 |
430 | .subheadline-italic {
431 | /* font: italic 400 15px/20px; */
432 | font-size: 15px;
433 | font-style: italic;
434 | font-weight: 400;
435 | line-height: 20px;
436 | text-size-adjust: none;
437 | }
438 |
439 | .subheadline-emphasized-italic {
440 | /* font: italic 590 15px/20px; */
441 | font-size: 15px;
442 | font-style: italic;
443 | font-weight: 590;
444 | line-height: 20px;
445 | text-size-adjust: none;
446 | }
447 |
448 | .footnote {
449 | /* font: 400 13px/18px; */
450 | font-size: 13px;
451 | font-weight: 400;
452 | line-height: 18px;
453 | text-size-adjust: none;
454 | }
455 |
456 | .footnote-emphasized {
457 | /* font: 590 13px/18px; */
458 | font-size: 13px;
459 | font-weight: 590;
460 | line-height: 18px;
461 | text-size-adjust: none;
462 | }
463 |
464 | .footnote-italic {
465 | /* font: italic 400 13px/18px; */
466 | font-size: 13px;
467 | font-style: italic;
468 | font-weight: 400;
469 | line-height: 18px;
470 | text-size-adjust: none;
471 | }
472 |
473 | .footnote-emphasized-italic {
474 | /* font: italic 590 13px/18px; */
475 | font-size: 13px;
476 | font-style: italic;
477 | font-weight: 590;
478 | line-height: 18px;
479 | text-size-adjust: none;
480 | }
481 |
482 | .caption1 {
483 | /* font: 400 12px/16px; */
484 | font-size: 12px;
485 | font-weight: 400;
486 | line-height: 16px;
487 | text-size-adjust: none;
488 | }
489 |
490 | .caption1-emphasized {
491 | /* font: 510 12px/16px; */
492 | font-size: 12px;
493 | font-weight: 510;
494 | line-height: 16px;
495 | text-size-adjust: none;
496 | }
497 |
498 | .caption1-italic {
499 | /* font: italic 400 12px/16px; */
500 | font-size: 12px;
501 | font-style: italic;
502 | font-weight: 400;
503 | line-height: 16px;
504 | text-size-adjust: none;
505 | }
506 |
507 | .caption1-emphasized-italic {
508 | /* font: italic 508 12px/16px; */
509 | font-size: 12px;
510 | font-style: italic;
511 | font-weight: 508;
512 | line-height: 16px;
513 | text-size-adjust: none;
514 | }
515 |
516 | .caption2 {
517 | /* font: 400 11px/13px; */
518 | font-size: 11px;
519 | font-weight: 400;
520 | line-height: 13px;
521 | text-size-adjust: none;
522 | }
523 |
524 | .caption2-emphasized {
525 | /* font: 590 11px/13px; */
526 | font-size: 11px;
527 | font-weight: 590;
528 | line-height: 13px;
529 | text-size-adjust: none;
530 | }
531 |
532 | .caption2-italic {
533 | /* font: italic 400 11px/13px; */
534 | font-size: 11px;
535 | font-style: italic;
536 | font-weight: 400;
537 | line-height: 13px;
538 | text-size-adjust: none;
539 | }
540 |
541 | .caption2-emphasized-italic {
542 | /* font: italic 590 11px/13px; */
543 | font-size: 11px;
544 | font-style: italic;
545 | font-weight: 590;
546 | line-height: 13px;
547 | text-size-adjust: none;
548 | }
549 |
550 | .symbol {
551 | font-family: var(--symbol-font-family);
552 | user-select: none;
553 | text-size-adjust: none;
554 | -webkit-user-select: none;
555 | }
556 |
--------------------------------------------------------------------------------
/src/lib/tab-bar/TabBar.svelte:
--------------------------------------------------------------------------------
1 |
5 |
6 |
7 |
9 |
10 |
30 |
--------------------------------------------------------------------------------
/src/lib/tab-bar/TabBarButton.svelte:
--------------------------------------------------------------------------------
1 |
31 |
32 |
58 |
59 |
120 |
--------------------------------------------------------------------------------
/src/lib/toolbar/Toolbar.svelte:
--------------------------------------------------------------------------------
1 |
5 |
6 |
7 |
9 |
10 |
30 |
--------------------------------------------------------------------------------
/src/lib/toolbar/ToolbarButton.svelte:
--------------------------------------------------------------------------------
1 |
20 |
21 |
28 |
29 |
64 |
--------------------------------------------------------------------------------
/src/routes/+page.svelte:
--------------------------------------------------------------------------------
1 |