@sveltia/ui 0.6.0 → 0.6.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.
- package/package/components/button/button.svelte +5 -2
- package/package/components/checkbox/checkbox.svelte +4 -1
- package/package/components/listbox/listbox.svelte +5 -1
- package/package/components/radio/radio.svelte +4 -1
- package/package/components/select/combobox.svelte +6 -1
- package/package/components/switch/switch.svelte +4 -2
- package/package/components/text-field/number-input.svelte +1 -1
- package/package/components/text-field/password-input.svelte +1 -1
- package/package/components/text-field/text-area.svelte +36 -70
- package/package/components/text-field/text-area.svelte.d.ts +2 -1
- package/package/components/text-field/text-input.svelte +9 -9
- package/package/components/util/app-shell.svelte +25 -22
- package/package/styles/core.scss +9 -14
- package/package/styles/variables.scss +22 -9
- package/package.json +25 -25
|
@@ -119,10 +119,13 @@
|
|
|
119
119
|
border-style: solid;
|
|
120
120
|
border-color: transparent;
|
|
121
121
|
padding: 0;
|
|
122
|
-
color:
|
|
122
|
+
color: var(--sui-control-foreground-color);
|
|
123
123
|
background-color: transparent;
|
|
124
124
|
box-shadow: none;
|
|
125
|
-
font:
|
|
125
|
+
font-family: var(--sui-control-font-family);
|
|
126
|
+
font-size: var(--sui-control-font-size);
|
|
127
|
+
line-height: var(--sui-control-line-height);
|
|
128
|
+
font-weight: normal;
|
|
126
129
|
text-align: left;
|
|
127
130
|
cursor: pointer;
|
|
128
131
|
transition: all 200ms;
|
|
@@ -94,7 +94,10 @@
|
|
|
94
94
|
display: inline-flex;
|
|
95
95
|
align-items: center;
|
|
96
96
|
gap: 8px;
|
|
97
|
-
color:
|
|
97
|
+
color: var(--sui-control-foreground-color);
|
|
98
|
+
font-family: var(--sui-control-font-family);
|
|
99
|
+
font-size: var(--sui-control-font-size);
|
|
100
|
+
line-height: var(--sui-control-line-height);
|
|
98
101
|
cursor: pointer;
|
|
99
102
|
-webkit-user-select: none;
|
|
100
103
|
user-select: none;
|
|
@@ -41,13 +41,17 @@
|
|
|
41
41
|
<style>[role=listbox] {
|
|
42
42
|
display: flex;
|
|
43
43
|
flex-direction: column;
|
|
44
|
-
color: inherit;
|
|
45
44
|
margin: 0;
|
|
46
45
|
border-width: 1px;
|
|
47
46
|
border-color: var(--sui-control-border-color);
|
|
48
47
|
border-radius: 4px;
|
|
49
48
|
padding: 4px;
|
|
50
49
|
min-width: 160px;
|
|
50
|
+
color: var(--sui-control-foreground-color);
|
|
51
|
+
background-color: var(--sui-control-background-color);
|
|
52
|
+
font-family: var(--sui-control-font-family);
|
|
53
|
+
font-size: var(--sui-control-font-size);
|
|
54
|
+
line-height: var(--sui-control-line-height);
|
|
51
55
|
}
|
|
52
56
|
[role=listbox] :global([role="separator"]) {
|
|
53
57
|
margin: 4px;
|
|
@@ -83,7 +83,10 @@
|
|
|
83
83
|
display: inline-flex;
|
|
84
84
|
align-items: center;
|
|
85
85
|
gap: 8px;
|
|
86
|
-
color:
|
|
86
|
+
color: var(--sui-control-foreground-color);
|
|
87
|
+
font-family: var(--sui-control-font-family);
|
|
88
|
+
font-size: var(--sui-control-font-size);
|
|
89
|
+
line-height: var(--sui-control-line-height);
|
|
87
90
|
cursor: pointer;
|
|
88
91
|
-webkit-user-select: none;
|
|
89
92
|
user-select: none;
|
|
@@ -167,8 +167,12 @@
|
|
|
167
167
|
border-radius: 4px;
|
|
168
168
|
padding: 0 32px 0 8px;
|
|
169
169
|
width: 100%;
|
|
170
|
-
height: var(--sui-
|
|
170
|
+
height: var(--sui-textbox-medium-height);
|
|
171
|
+
color: var(--sui-control-foreground-color);
|
|
171
172
|
background-color: var(--sui-disabled-background-color);
|
|
173
|
+
font-family: var(--sui-control-font-family);
|
|
174
|
+
font-size: var(--sui-control-font-size);
|
|
175
|
+
line-height: var(--sui-control-line-height);
|
|
172
176
|
-webkit-user-select: none;
|
|
173
177
|
user-select: none;
|
|
174
178
|
cursor: pointer;
|
|
@@ -204,6 +208,7 @@
|
|
|
204
208
|
overflow: auto;
|
|
205
209
|
background-color: var(--sui-secondary-background-color);
|
|
206
210
|
backdrop-filter: blur(16px);
|
|
211
|
+
/* Add .1s delay before the position can be determined */
|
|
207
212
|
transition: opacity 100ms 100ms;
|
|
208
213
|
}
|
|
209
214
|
.combobox + :global([role="listbox"]:not(.open)) {
|
|
@@ -47,10 +47,12 @@
|
|
|
47
47
|
border-style: solid;
|
|
48
48
|
border-color: transparent;
|
|
49
49
|
padding: 0;
|
|
50
|
-
color:
|
|
50
|
+
color: var(--sui-control-foreground-color);
|
|
51
51
|
background-color: transparent;
|
|
52
52
|
box-shadow: none;
|
|
53
|
-
font:
|
|
53
|
+
font-family: var(--sui-control-font-family);
|
|
54
|
+
font-size: var(--sui-control-font-size);
|
|
55
|
+
line-height: var(--sui-control-line-height);
|
|
54
56
|
text-align: left;
|
|
55
57
|
cursor: pointer;
|
|
56
58
|
-webkit-user-select: none;
|
|
@@ -114,7 +114,7 @@
|
|
|
114
114
|
border-width: 1px;
|
|
115
115
|
border-color: var(--sui-control-border-color);
|
|
116
116
|
width: 32px;
|
|
117
|
-
height: var(--sui-
|
|
117
|
+
height: var(--sui-textbox-medium-height);
|
|
118
118
|
}
|
|
119
119
|
.number-input :global(button):first-of-type {
|
|
120
120
|
border-radius: 0;
|
|
@@ -1,14 +1,13 @@
|
|
|
1
1
|
<!--
|
|
2
2
|
@component
|
|
3
|
-
A multi-line text field
|
|
3
|
+
A multi-line text field based on the HTML `<textarea>` element, providing the auto-resize support.
|
|
4
4
|
@see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea
|
|
5
5
|
@see https://w3c.github.io/aria/#textbox
|
|
6
|
+
@see https://css-tricks.com/the-cleanest-trick-for-autogrowing-textareas/
|
|
6
7
|
-->
|
|
7
8
|
<svelte:options accessors={true} />
|
|
8
9
|
|
|
9
10
|
<script>
|
|
10
|
-
import { onMount, tick } from 'svelte';
|
|
11
|
-
|
|
12
11
|
/**
|
|
13
12
|
* CSS class name on the button.
|
|
14
13
|
* @type {string}
|
|
@@ -26,104 +25,71 @@
|
|
|
26
25
|
export let value = undefined;
|
|
27
26
|
|
|
28
27
|
export let autoResize = false;
|
|
29
|
-
|
|
30
|
-
/** @type {string?} */
|
|
31
|
-
let height;
|
|
32
|
-
/** @type {HTMLElement?} */
|
|
33
|
-
let outer = undefined;
|
|
34
|
-
let resizing = false;
|
|
35
|
-
let lastWidth = 0;
|
|
36
|
-
|
|
37
|
-
/**
|
|
38
|
-
* Resize the `<textarea>` based on the filled text content.
|
|
39
|
-
*/
|
|
40
|
-
const resizeTextarea = async () => {
|
|
41
|
-
resizing = true;
|
|
42
|
-
height = 'auto';
|
|
43
|
-
|
|
44
|
-
await tick();
|
|
45
|
-
|
|
46
|
-
height = value && element?.scrollHeight ? `${element.scrollHeight + 4}px` : undefined;
|
|
47
|
-
resizing = false;
|
|
48
|
-
};
|
|
49
|
-
|
|
50
|
-
/**
|
|
51
|
-
* Call {@link resizeTextarea} whenever the text content is updated.
|
|
52
|
-
*/
|
|
53
|
-
$: {
|
|
54
|
-
if (autoResize) {
|
|
55
|
-
// @ts-ignore
|
|
56
|
-
resizeTextarea(value);
|
|
57
|
-
}
|
|
58
|
-
}
|
|
59
|
-
|
|
60
|
-
/**
|
|
61
|
-
* Call {@link resizeTextarea} whenever it’s horizontally resized.
|
|
62
|
-
*/
|
|
63
|
-
onMount(() => {
|
|
64
|
-
const observer = new ResizeObserver(([{ contentRect }]) => {
|
|
65
|
-
const { width } = contentRect;
|
|
66
|
-
|
|
67
|
-
if (autoResize && lastWidth !== width) {
|
|
68
|
-
lastWidth = width;
|
|
69
|
-
resizeTextarea();
|
|
70
|
-
}
|
|
71
|
-
});
|
|
72
|
-
|
|
73
|
-
observer.observe(outer);
|
|
74
|
-
|
|
75
|
-
// onUnmount
|
|
76
|
-
return () => {
|
|
77
|
-
observer.disconnect();
|
|
78
|
-
};
|
|
79
|
-
});
|
|
80
28
|
</script>
|
|
81
29
|
|
|
82
|
-
<div class="sui text-area {className}"
|
|
30
|
+
<div class="sui text-area {className}">
|
|
83
31
|
<textarea
|
|
84
32
|
name={name || undefined}
|
|
85
33
|
{...$$restProps}
|
|
86
|
-
|
|
87
|
-
class:resizing
|
|
34
|
+
class:auto-resize={autoResize}
|
|
88
35
|
bind:this={element}
|
|
89
36
|
bind:value
|
|
90
37
|
on:click
|
|
91
38
|
on:input
|
|
92
39
|
on:keypress
|
|
93
40
|
/>
|
|
41
|
+
{#if autoResize}
|
|
42
|
+
<div class="clone" aria-hidden="true">{value}</div>
|
|
43
|
+
{/if}
|
|
94
44
|
</div>
|
|
95
45
|
|
|
96
46
|
<style>.text-area {
|
|
47
|
+
display: inline-grid;
|
|
97
48
|
width: 100%;
|
|
98
|
-
display: inline-flex;
|
|
99
|
-
align-items: center;
|
|
100
49
|
}
|
|
101
50
|
|
|
102
|
-
textarea
|
|
51
|
+
textarea,
|
|
52
|
+
.clone {
|
|
53
|
+
grid-area: 1/1/2/2;
|
|
103
54
|
display: block;
|
|
104
55
|
margin: 0;
|
|
105
56
|
border-width: 1px;
|
|
106
57
|
border-color: var(--sui-control-border-color);
|
|
107
|
-
border-radius: var(--sui-
|
|
108
|
-
background-color: var(--sui-control-background-color);
|
|
58
|
+
border-radius: var(--sui-textbox-medium-border-radius);
|
|
109
59
|
padding: 8px;
|
|
110
60
|
width: 100%;
|
|
111
61
|
min-height: 8em;
|
|
112
|
-
color:
|
|
113
|
-
|
|
114
|
-
font-
|
|
115
|
-
|
|
116
|
-
|
|
62
|
+
color: var(--sui-textbox-foreground-color);
|
|
63
|
+
background-color: var(--sui-textbox-background-color);
|
|
64
|
+
font-family: var(--sui-textbox-font-family);
|
|
65
|
+
font-size: var(--sui-textbox-font-size);
|
|
66
|
+
line-height: var(--sui-textbox-multiline-line-height);
|
|
117
67
|
transition: all 200ms;
|
|
118
68
|
}
|
|
119
|
-
textarea.resizing
|
|
69
|
+
textarea.resizing,
|
|
70
|
+
.clone.resizing {
|
|
120
71
|
transition-duration: 0ms;
|
|
121
72
|
}
|
|
122
|
-
textarea:focus
|
|
73
|
+
textarea:focus,
|
|
74
|
+
.clone:focus {
|
|
123
75
|
border-color: var(--sui-primary-accent-color);
|
|
124
76
|
}
|
|
125
|
-
textarea:disabled
|
|
77
|
+
textarea:disabled,
|
|
78
|
+
.clone:disabled {
|
|
126
79
|
background-color: var(--sui-disabled-background-color);
|
|
127
80
|
opacity: 0.4;
|
|
128
81
|
cursor: default;
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
textarea {
|
|
85
|
+
resize: vertical;
|
|
86
|
+
}
|
|
87
|
+
textarea.auto-resize {
|
|
88
|
+
overflow: hidden;
|
|
89
|
+
resize: none;
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
.clone {
|
|
93
|
+
visibility: hidden;
|
|
94
|
+
white-space: pre-wrap;
|
|
129
95
|
}</style>
|
|
@@ -2,9 +2,10 @@
|
|
|
2
2
|
/** @typedef {typeof __propDef.events} TextAreaEvents */
|
|
3
3
|
/** @typedef {typeof __propDef.slots} TextAreaSlots */
|
|
4
4
|
/**
|
|
5
|
-
* A multi-line text field
|
|
5
|
+
* A multi-line text field based on the HTML `<textarea>` element, providing the auto-resize support.
|
|
6
6
|
* @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea
|
|
7
7
|
* @see https://w3c.github.io/aria/#textbox
|
|
8
|
+
* @see https://css-tricks.com/the-cleanest-trick-for-autogrowing-textareas/
|
|
8
9
|
*/
|
|
9
10
|
export default class TextArea extends SvelteComponent<{
|
|
10
11
|
[x: string]: any;
|
|
@@ -87,15 +87,15 @@ input {
|
|
|
87
87
|
flex: auto;
|
|
88
88
|
border-width: 1px;
|
|
89
89
|
border-color: var(--sui-control-border-color);
|
|
90
|
-
border-radius: var(--sui-
|
|
90
|
+
border-radius: var(--sui-textbox-medium-border-radius);
|
|
91
91
|
padding: 0 8px;
|
|
92
92
|
min-width: 0;
|
|
93
|
-
height: var(--sui-
|
|
94
|
-
|
|
95
|
-
color:
|
|
96
|
-
font-family:
|
|
97
|
-
font-size:
|
|
98
|
-
line-height:
|
|
93
|
+
height: var(--sui-textbox-medium-height);
|
|
94
|
+
color: var(--sui-textbox-foreground-color);
|
|
95
|
+
background-color: var(--sui-textbox-background-color);
|
|
96
|
+
font-family: var(--sui-textbox-font-family);
|
|
97
|
+
font-size: var(--sui-textbox-font-size);
|
|
98
|
+
line-height: var(--sui-textbox-singleline-line-height);
|
|
99
99
|
transition: all 200ms;
|
|
100
100
|
}
|
|
101
101
|
input:focus {
|
|
@@ -118,7 +118,7 @@ input ~ :global(button) {
|
|
|
118
118
|
margin-left: -1px;
|
|
119
119
|
border-width: 1px;
|
|
120
120
|
border-color: var(--sui-control-border-color);
|
|
121
|
-
height: var(--sui-
|
|
121
|
+
height: var(--sui-textbox-medium-height);
|
|
122
122
|
aspect-ratio: 1/1;
|
|
123
123
|
}
|
|
124
124
|
input ~ :global(button):last-child {
|
|
@@ -133,7 +133,7 @@ input ~ :global(button) :global(.icon) {
|
|
|
133
133
|
inset: 0 8px;
|
|
134
134
|
z-index: 2;
|
|
135
135
|
display: flex;
|
|
136
|
-
justify-content: var(--sui-
|
|
136
|
+
justify-content: var(--sui-textbox-label-align, flex-start);
|
|
137
137
|
align-items: center;
|
|
138
138
|
color: var(--sui-primary-foreground-color);
|
|
139
139
|
opacity: 0.5;
|
|
@@ -144,7 +144,6 @@
|
|
|
144
144
|
--sui-secondary-background-color-translucent: hsl(var(--sui-background-color-3-hsl) / 80%);
|
|
145
145
|
--sui-tertiary-background-color: hsl(var(--sui-background-color-4-hsl));
|
|
146
146
|
--sui-tertiary-background-color-translucent: hsl(var(--sui-background-color-4-hsl) / 80%);
|
|
147
|
-
--sui-control-background-color: hsl(var(--sui-background-color-1-hsl));
|
|
148
147
|
--sui-disabled-background-color: hsl(var(--sui-background-color-4-hsl));
|
|
149
148
|
--sui-error-background-color: hsl(
|
|
150
149
|
var(--sui-error-color-hue) var(--sui-alert-background-color-saturation)
|
|
@@ -164,7 +163,6 @@
|
|
|
164
163
|
);
|
|
165
164
|
--sui-primary-border-color: hsl(var(--sui-border-color-1-hsl));
|
|
166
165
|
--sui-secondary-border-color: hsl(var(--sui-border-color-2-hsl));
|
|
167
|
-
--sui-control-border-color: hsl(var(--sui-border-color-2-hsl));
|
|
168
166
|
--sui-checkbox-border-color: hsl(var(--sui-foreground-color-3-hsl));
|
|
169
167
|
--sui-error-border-color: hsl(
|
|
170
168
|
var(--sui-error-color-hue) var(--sui-alert-border-color-saturation)
|
|
@@ -196,6 +194,9 @@
|
|
|
196
194
|
--sui-font-weight-bold: 600;
|
|
197
195
|
--sui-font-family-monospace: "Noto Sans Mono", monospace;
|
|
198
196
|
--sui-font-size-monospace: 13px;
|
|
197
|
+
--sui-line-height-default: 1.25;
|
|
198
|
+
--sui-line-height-compact: 1.5;
|
|
199
|
+
--sui-line-height-comfortable: 1.75;
|
|
199
200
|
--sui-control-small-border-width: 1px;
|
|
200
201
|
--sui-control-small-border-radius: 2px;
|
|
201
202
|
--sui-control-small-height: 24px;
|
|
@@ -205,6 +206,12 @@
|
|
|
205
206
|
--sui-control-large-border-width: 1px;
|
|
206
207
|
--sui-control-large-border-radius: 8px;
|
|
207
208
|
--sui-control-large-height: 40px;
|
|
209
|
+
--sui-control-border-color: hsl(var(--sui-border-color-2-hsl));
|
|
210
|
+
--sui-control-foreground-color: var(--sui-primary-foreground-color);
|
|
211
|
+
--sui-control-background-color: hsl(var(--sui-background-color-1-hsl));
|
|
212
|
+
--sui-control-font-family: var(--sui-font-family-default);
|
|
213
|
+
--sui-control-font-size: var(--sui-font-size-default);
|
|
214
|
+
--sui-control-line-height: var(--sui-line-height-default);
|
|
208
215
|
--sui-button-small-border-radius: var(--sui-control-small-border-radius);
|
|
209
216
|
--sui-button-small-height: var(--sui-control-small-height);
|
|
210
217
|
--sui-button-medium-border-radius: var(--sui-control-medium-border-radius);
|
|
@@ -217,12 +224,18 @@
|
|
|
217
224
|
--sui-option-medium-height: var(--sui-control-medium-height);
|
|
218
225
|
--sui-option-large-border-radius: var(--sui-control-large-border-radius);
|
|
219
226
|
--sui-option-large-height: var(--sui-control-large-height);
|
|
220
|
-
--sui-
|
|
221
|
-
--sui-
|
|
222
|
-
--sui-
|
|
223
|
-
--sui-
|
|
224
|
-
--sui-
|
|
225
|
-
--sui-
|
|
227
|
+
--sui-textbox-small-border-radius: var(--sui-control-small-border-radius);
|
|
228
|
+
--sui-textbox-small-height: var(--sui-control-small-height);
|
|
229
|
+
--sui-textbox-medium-border-radius: var(--sui-control-medium-border-radius);
|
|
230
|
+
--sui-textbox-medium-height: var(--sui-control-medium-height);
|
|
231
|
+
--sui-textbox-large-border-radius: var(--sui-control-large-border-radius);
|
|
232
|
+
--sui-textbox-large-height: var(--sui-control-large-height);
|
|
233
|
+
--sui-textbox-foreground-color: var(--sui-control-foreground-color);
|
|
234
|
+
--sui-textbox-background-color: var(--sui-control-background-color);
|
|
235
|
+
--sui-textbox-font-family: var(--sui-font-family-default);
|
|
236
|
+
--sui-textbox-font-size: var(--sui-font-size-default);
|
|
237
|
+
--sui-textbox-singleline-line-height: var(--sui-line-height-compact);
|
|
238
|
+
--sui-textbox-multiline-line-height: var(--sui-line-height-comfortable);
|
|
226
239
|
--sui-tab-small-height: var(--sui-control-small-height);
|
|
227
240
|
--sui-tab-medium-height: var(--sui-control-medium-height);
|
|
228
241
|
--sui-tab-large-height: var(--sui-control-large-height);
|
|
@@ -233,6 +246,7 @@
|
|
|
233
246
|
}
|
|
234
247
|
|
|
235
248
|
:global(*) {
|
|
249
|
+
overflow-anchor: none;
|
|
236
250
|
scroll-behavior: smooth;
|
|
237
251
|
box-sizing: border-box;
|
|
238
252
|
outline-offset: 1px;
|
|
@@ -277,19 +291,9 @@
|
|
|
277
291
|
vertical-align: top;
|
|
278
292
|
}
|
|
279
293
|
|
|
280
|
-
:global(button),
|
|
281
|
-
:global(input),
|
|
282
|
-
:global(textarea),
|
|
283
|
-
:global(select),
|
|
284
|
-
:global(option) {
|
|
285
|
-
font-family: inherit;
|
|
286
|
-
font-size: inherit;
|
|
287
|
-
color: inherit;
|
|
288
|
-
}
|
|
289
|
-
|
|
290
294
|
:global(p),
|
|
291
295
|
:global(li) {
|
|
292
|
-
line-height:
|
|
296
|
+
line-height: var(--sui-line-height-comfortable);
|
|
293
297
|
}
|
|
294
298
|
|
|
295
299
|
:global(code),
|
|
@@ -298,7 +302,7 @@
|
|
|
298
302
|
}
|
|
299
303
|
|
|
300
304
|
:global(pre) {
|
|
301
|
-
line-height:
|
|
305
|
+
line-height: var(--sui-line-height-compact);
|
|
302
306
|
-webkit-user-select: text;
|
|
303
307
|
user-select: text;
|
|
304
308
|
}
|
|
@@ -314,7 +318,7 @@
|
|
|
314
318
|
max-width: 100%;
|
|
315
319
|
height: 100%;
|
|
316
320
|
max-height: 100%;
|
|
317
|
-
color:
|
|
321
|
+
color: var(--sui-primary-foreground-color);
|
|
318
322
|
background: transparent;
|
|
319
323
|
-webkit-user-select: none;
|
|
320
324
|
user-select: none;
|
|
@@ -339,6 +343,5 @@
|
|
|
339
343
|
-webkit-user-select: none;
|
|
340
344
|
user-select: none;
|
|
341
345
|
touch-action: none;
|
|
342
|
-
overflow-anchor: none;
|
|
343
346
|
cursor: default;
|
|
344
347
|
}</style>
|
package/package/styles/core.scss
CHANGED
|
@@ -7,10 +7,15 @@
|
|
|
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
9
|
.material-symbols-outlined {
|
|
10
|
-
font-variation-settings:
|
|
10
|
+
font-variation-settings:
|
|
11
|
+
"FILL" 0,
|
|
12
|
+
"wght" 300,
|
|
13
|
+
"GRAD" 0,
|
|
14
|
+
"opsz" 24;
|
|
11
15
|
}
|
|
12
16
|
|
|
13
17
|
* {
|
|
18
|
+
overflow-anchor: none;
|
|
14
19
|
scroll-behavior: smooth;
|
|
15
20
|
box-sizing: border-box;
|
|
16
21
|
outline-offset: 1px;
|
|
@@ -55,19 +60,9 @@ iframe {
|
|
|
55
60
|
vertical-align: top;
|
|
56
61
|
}
|
|
57
62
|
|
|
58
|
-
button,
|
|
59
|
-
input,
|
|
60
|
-
textarea,
|
|
61
|
-
select,
|
|
62
|
-
option {
|
|
63
|
-
font-family: inherit;
|
|
64
|
-
font-size: inherit;
|
|
65
|
-
color: inherit;
|
|
66
|
-
}
|
|
67
|
-
|
|
68
63
|
p,
|
|
69
64
|
li {
|
|
70
|
-
line-height:
|
|
65
|
+
line-height: var(--sui-line-height-comfortable);
|
|
71
66
|
}
|
|
72
67
|
|
|
73
68
|
code,
|
|
@@ -76,7 +71,7 @@ pre {
|
|
|
76
71
|
}
|
|
77
72
|
|
|
78
73
|
pre {
|
|
79
|
-
line-height:
|
|
74
|
+
line-height: var(--sui-line-height-compact);
|
|
80
75
|
-webkit-user-select: text;
|
|
81
76
|
user-select: text;
|
|
82
77
|
}
|
|
@@ -92,7 +87,7 @@ dialog {
|
|
|
92
87
|
max-width: 100%;
|
|
93
88
|
height: 100%;
|
|
94
89
|
max-height: 100%;
|
|
95
|
-
color:
|
|
90
|
+
color: var(--sui-primary-foreground-color);
|
|
96
91
|
background: transparent;
|
|
97
92
|
-webkit-user-select: none;
|
|
98
93
|
user-select: none;
|
|
@@ -97,7 +97,6 @@
|
|
|
97
97
|
--sui-secondary-background-color-translucent: hsl(var(--sui-background-color-3-hsl) / 80%);
|
|
98
98
|
--sui-tertiary-background-color: hsl(var(--sui-background-color-4-hsl));
|
|
99
99
|
--sui-tertiary-background-color-translucent: hsl(var(--sui-background-color-4-hsl) / 80%);
|
|
100
|
-
--sui-control-background-color: hsl(var(--sui-background-color-1-hsl));
|
|
101
100
|
--sui-disabled-background-color: hsl(var(--sui-background-color-4-hsl));
|
|
102
101
|
--sui-error-background-color: hsl(
|
|
103
102
|
var(--sui-error-color-hue) var(--sui-alert-background-color-saturation)
|
|
@@ -118,7 +117,6 @@
|
|
|
118
117
|
// Borders
|
|
119
118
|
--sui-primary-border-color: hsl(var(--sui-border-color-1-hsl));
|
|
120
119
|
--sui-secondary-border-color: hsl(var(--sui-border-color-2-hsl));
|
|
121
|
-
--sui-control-border-color: hsl(var(--sui-border-color-2-hsl));
|
|
122
120
|
--sui-checkbox-border-color: hsl(var(--sui-foreground-color-3-hsl));
|
|
123
121
|
--sui-error-border-color: hsl(
|
|
124
122
|
var(--sui-error-color-hue) var(--sui-alert-border-color-saturation)
|
|
@@ -152,6 +150,9 @@
|
|
|
152
150
|
--sui-font-weight-bold: 600;
|
|
153
151
|
--sui-font-family-monospace: "Noto Sans Mono", monospace;
|
|
154
152
|
--sui-font-size-monospace: 13px;
|
|
153
|
+
--sui-line-height-default: 1.25;
|
|
154
|
+
--sui-line-height-compact: 1.5;
|
|
155
|
+
--sui-line-height-comfortable: 1.75;
|
|
155
156
|
// Controls
|
|
156
157
|
--sui-control-small-border-width: 1px;
|
|
157
158
|
--sui-control-small-border-radius: 2px;
|
|
@@ -162,6 +163,12 @@
|
|
|
162
163
|
--sui-control-large-border-width: 1px;
|
|
163
164
|
--sui-control-large-border-radius: 8px;
|
|
164
165
|
--sui-control-large-height: 40px;
|
|
166
|
+
--sui-control-border-color: hsl(var(--sui-border-color-2-hsl));
|
|
167
|
+
--sui-control-foreground-color: var(--sui-primary-foreground-color);
|
|
168
|
+
--sui-control-background-color: hsl(var(--sui-background-color-1-hsl));
|
|
169
|
+
--sui-control-font-family: var(--sui-font-family-default);
|
|
170
|
+
--sui-control-font-size: var(--sui-font-size-default);
|
|
171
|
+
--sui-control-line-height: var(--sui-line-height-default);
|
|
165
172
|
// Buttons
|
|
166
173
|
--sui-button-small-border-radius: var(--sui-control-small-border-radius);
|
|
167
174
|
--sui-button-small-height: var(--sui-control-small-height);
|
|
@@ -176,13 +183,19 @@
|
|
|
176
183
|
--sui-option-medium-height: var(--sui-control-medium-height);
|
|
177
184
|
--sui-option-large-border-radius: var(--sui-control-large-border-radius);
|
|
178
185
|
--sui-option-large-height: var(--sui-control-large-height);
|
|
179
|
-
//
|
|
180
|
-
--sui-
|
|
181
|
-
--sui-
|
|
182
|
-
--sui-
|
|
183
|
-
--sui-
|
|
184
|
-
--sui-
|
|
185
|
-
--sui-
|
|
186
|
+
// Textbox: singleline & multiline text fields
|
|
187
|
+
--sui-textbox-small-border-radius: var(--sui-control-small-border-radius);
|
|
188
|
+
--sui-textbox-small-height: var(--sui-control-small-height);
|
|
189
|
+
--sui-textbox-medium-border-radius: var(--sui-control-medium-border-radius);
|
|
190
|
+
--sui-textbox-medium-height: var(--sui-control-medium-height);
|
|
191
|
+
--sui-textbox-large-border-radius: var(--sui-control-large-border-radius);
|
|
192
|
+
--sui-textbox-large-height: var(--sui-control-large-height);
|
|
193
|
+
--sui-textbox-foreground-color: var(--sui-control-foreground-color);
|
|
194
|
+
--sui-textbox-background-color: var(--sui-control-background-color);
|
|
195
|
+
--sui-textbox-font-family: var(--sui-font-family-default);
|
|
196
|
+
--sui-textbox-font-size: var(--sui-font-size-default);
|
|
197
|
+
--sui-textbox-singleline-line-height: var(--sui-line-height-compact);
|
|
198
|
+
--sui-textbox-multiline-line-height: var(--sui-line-height-comfortable);
|
|
186
199
|
// Tab
|
|
187
200
|
--sui-tab-small-height: var(--sui-control-small-height);
|
|
188
201
|
--sui-tab-medium-height: var(--sui-control-medium-height);
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@sveltia/ui",
|
|
3
|
-
"version": "0.6.
|
|
3
|
+
"version": "0.6.2",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"publishConfig": {
|
|
@@ -12,47 +12,47 @@
|
|
|
12
12
|
"build:watch": "svelte-kit sync && svelte-package -o package --watch",
|
|
13
13
|
"preview": "vite preview",
|
|
14
14
|
"prepublishOnly": "npm run build",
|
|
15
|
-
"format": "prettier --plugin-
|
|
15
|
+
"format": "prettier --plugin prettier-plugin-svelte --write .",
|
|
16
16
|
"lint": "npm-run-all lint:*",
|
|
17
17
|
"lint:cspell": "cspell --no-progress",
|
|
18
18
|
"lint:svelte": "svelte-kit sync && svelte-check --tsconfig ./jsconfig.json",
|
|
19
|
-
"lint:prettier": "prettier --check --plugin-
|
|
19
|
+
"lint:prettier": "prettier --check --plugin prettier-plugin-svelte .",
|
|
20
20
|
"lint:eslint": "eslint .",
|
|
21
21
|
"lint:stylelint": "stylelint '**/*.{css,scss,svelte}'",
|
|
22
22
|
"test": "playwright test",
|
|
23
23
|
"test:unit": "vitest"
|
|
24
24
|
},
|
|
25
25
|
"dependencies": {
|
|
26
|
-
"svelte": "^4.0
|
|
26
|
+
"svelte": "^4.2.0"
|
|
27
27
|
},
|
|
28
28
|
"devDependencies": {
|
|
29
|
-
"@playwright/test": "^1.
|
|
29
|
+
"@playwright/test": "^1.38.0",
|
|
30
30
|
"@sveltejs/adapter-auto": "2.1.0",
|
|
31
|
-
"@sveltejs/kit": "^1.
|
|
32
|
-
"@sveltejs/package": "^2.2.
|
|
33
|
-
"cspell": "^
|
|
34
|
-
"eslint": "^8.
|
|
31
|
+
"@sveltejs/kit": "^1.25.0",
|
|
32
|
+
"@sveltejs/package": "^2.2.2",
|
|
33
|
+
"cspell": "^7.3.6",
|
|
34
|
+
"eslint": "^8.49.0",
|
|
35
35
|
"eslint-config-airbnb-base": "^15.0.0",
|
|
36
|
-
"eslint-config-prettier": "^
|
|
37
|
-
"eslint-plugin-import": "^2.
|
|
38
|
-
"eslint-plugin-jsdoc": "^46.
|
|
39
|
-
"eslint-plugin-svelte": "^2.
|
|
36
|
+
"eslint-config-prettier": "^9.0.0",
|
|
37
|
+
"eslint-plugin-import": "^2.28.1",
|
|
38
|
+
"eslint-plugin-jsdoc": "^46.8.1",
|
|
39
|
+
"eslint-plugin-svelte": "^2.33.1",
|
|
40
40
|
"npm-run-all": "^4.1.5",
|
|
41
|
-
"postcss": "^8.4.
|
|
41
|
+
"postcss": "^8.4.29",
|
|
42
42
|
"postcss-html": "^1.5.0",
|
|
43
|
-
"prettier": "^
|
|
44
|
-
"prettier-plugin-svelte": "^
|
|
45
|
-
"sass": "^1.
|
|
46
|
-
"stylelint": "^15.10.
|
|
47
|
-
"stylelint-config-recommended-scss": "^
|
|
48
|
-
"stylelint-scss": "^5.
|
|
49
|
-
"svelte-check": "^3.
|
|
50
|
-
"svelte-i18n": "^3.7.
|
|
43
|
+
"prettier": "^3.0.3",
|
|
44
|
+
"prettier-plugin-svelte": "^3.0.3",
|
|
45
|
+
"sass": "^1.67.0",
|
|
46
|
+
"stylelint": "^15.10.3",
|
|
47
|
+
"stylelint-config-recommended-scss": "^13.0.0",
|
|
48
|
+
"stylelint-scss": "^5.2.1",
|
|
49
|
+
"svelte-check": "^3.5.1",
|
|
50
|
+
"svelte-i18n": "^3.7.4",
|
|
51
51
|
"svelte-migrate": "^1.2.6",
|
|
52
52
|
"svelte-preprocess": "^5.0.4",
|
|
53
|
-
"tslib": "^2.6.
|
|
54
|
-
"vite": "^4.4.
|
|
55
|
-
"vitest": "^0.
|
|
53
|
+
"tslib": "^2.6.2",
|
|
54
|
+
"vite": "^4.4.9",
|
|
55
|
+
"vitest": "^0.34.4"
|
|
56
56
|
},
|
|
57
57
|
"exports": {
|
|
58
58
|
"./package.json": "./package.json",
|