@geoffcox/sterling-svelte 0.0.18 → 0.0.19
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/Dropdown.svelte +241 -0
- package/Dropdown.svelte.d.ts +58 -0
- package/Slider.svelte +15 -3
- package/Slider.svelte.d.ts +4 -3
- package/Switch.svelte +24 -18
- package/Switch.svelte.d.ts +4 -4
- package/index.d.ts +3 -2
- package/index.js +3 -2
- package/package.json +2 -1
- package/theme/colors.d.ts +53 -1
- package/theme/colors.js +53 -1
- package/theme/darkTheme.js +62 -62
- package/theme/lightTheme.js +62 -62
package/Dropdown.svelte
ADDED
|
@@ -0,0 +1,241 @@
|
|
|
1
|
+
<script>import { computePosition, flip, offset, shift, autoUpdate } from "@floating-ui/dom";
|
|
2
|
+
import { createEventDispatcher, onMount, tick } from "svelte";
|
|
3
|
+
import { v4 as uuid } from "uuid";
|
|
4
|
+
import { clickOutside } from "./actions/clickOutside";
|
|
5
|
+
const popupId = uuid();
|
|
6
|
+
export let composed = false;
|
|
7
|
+
export let disabled = false;
|
|
8
|
+
export let open = false;
|
|
9
|
+
export let stayOpenOnClickAway = false;
|
|
10
|
+
let dropdownRef;
|
|
11
|
+
let popupRef;
|
|
12
|
+
let popupPosition = {
|
|
13
|
+
x: void 0,
|
|
14
|
+
y: void 0
|
|
15
|
+
};
|
|
16
|
+
const dispatch = createEventDispatcher();
|
|
17
|
+
const raiseOpen = (open2) => {
|
|
18
|
+
dispatch("open", { open: open2 });
|
|
19
|
+
};
|
|
20
|
+
$: {
|
|
21
|
+
raiseOpen(open);
|
|
22
|
+
}
|
|
23
|
+
let mounted = false;
|
|
24
|
+
onMount(() => {
|
|
25
|
+
mounted = true;
|
|
26
|
+
const cleanup = autoUpdate(dropdownRef, popupRef, async () => {
|
|
27
|
+
const { x, y } = await computePosition(dropdownRef, popupRef, {
|
|
28
|
+
placement: "bottom-end",
|
|
29
|
+
middleware: [offset({ mainAxis: 2 }), flip(), shift({ padding: 0 })]
|
|
30
|
+
});
|
|
31
|
+
if (open) {
|
|
32
|
+
popupPosition = { x, y };
|
|
33
|
+
}
|
|
34
|
+
});
|
|
35
|
+
return cleanup;
|
|
36
|
+
});
|
|
37
|
+
const onClick = (event) => {
|
|
38
|
+
if (!disabled && mounted) {
|
|
39
|
+
const targetNode = event.target;
|
|
40
|
+
const withinPopup = popupRef?.contains(targetNode);
|
|
41
|
+
if (!withinPopup) {
|
|
42
|
+
open = !open;
|
|
43
|
+
event.preventDefault();
|
|
44
|
+
event.stopPropagation();
|
|
45
|
+
}
|
|
46
|
+
}
|
|
47
|
+
};
|
|
48
|
+
const onKeydown = (event) => {
|
|
49
|
+
if (!event.altKey && !event.ctrlKey && !event.shiftKey) {
|
|
50
|
+
switch (event.key) {
|
|
51
|
+
case "Escape":
|
|
52
|
+
open = false;
|
|
53
|
+
event.preventDefault();
|
|
54
|
+
return false;
|
|
55
|
+
}
|
|
56
|
+
}
|
|
57
|
+
};
|
|
58
|
+
const onClickOutside = (event) => {
|
|
59
|
+
if (!stayOpenOnClickAway) {
|
|
60
|
+
open = false;
|
|
61
|
+
}
|
|
62
|
+
};
|
|
63
|
+
</script>
|
|
64
|
+
|
|
65
|
+
<div
|
|
66
|
+
bind:this={dropdownRef}
|
|
67
|
+
aria-controls={popupId}
|
|
68
|
+
aria-haspopup={true}
|
|
69
|
+
aria-expanded={open}
|
|
70
|
+
class="sterling-dropdown"
|
|
71
|
+
class:composed
|
|
72
|
+
class:disabled
|
|
73
|
+
role="combobox"
|
|
74
|
+
tabindex="0"
|
|
75
|
+
use:clickOutside
|
|
76
|
+
on:blur
|
|
77
|
+
on:click
|
|
78
|
+
on:click={onClick}
|
|
79
|
+
on:copy
|
|
80
|
+
on:cut
|
|
81
|
+
on:dblclick
|
|
82
|
+
on:focus
|
|
83
|
+
on:focusin
|
|
84
|
+
on:focusout
|
|
85
|
+
on:keydown
|
|
86
|
+
on:keydown={onKeydown}
|
|
87
|
+
on:keypress
|
|
88
|
+
on:keyup
|
|
89
|
+
on:mousedown
|
|
90
|
+
on:mouseenter
|
|
91
|
+
on:mouseleave
|
|
92
|
+
on:mousemove
|
|
93
|
+
on:mouseover
|
|
94
|
+
on:mouseout
|
|
95
|
+
on:mouseup
|
|
96
|
+
on:wheel
|
|
97
|
+
on:paste
|
|
98
|
+
on:click_outside={onClickOutside}
|
|
99
|
+
{...$$restProps}
|
|
100
|
+
>
|
|
101
|
+
<slot name="value" {composed} {disabled} {open} />
|
|
102
|
+
<slot name="button" {composed} {disabled} {open}>
|
|
103
|
+
<div class="button">
|
|
104
|
+
<div class="chevron" />
|
|
105
|
+
</div>
|
|
106
|
+
</slot>
|
|
107
|
+
|
|
108
|
+
<div
|
|
109
|
+
bind:this={popupRef}
|
|
110
|
+
class="popup"
|
|
111
|
+
class:open
|
|
112
|
+
id={popupId}
|
|
113
|
+
style="left:{popupPosition.x}px; top:{popupPosition.y}px"
|
|
114
|
+
>
|
|
115
|
+
<slot {composed} {disabled} {open} />
|
|
116
|
+
</div>
|
|
117
|
+
</div>
|
|
118
|
+
|
|
119
|
+
<style>
|
|
120
|
+
.sterling-dropdown {
|
|
121
|
+
align-content: stretch;
|
|
122
|
+
align-items: stretch;
|
|
123
|
+
background-color: var(--stsv-Input__background-color);
|
|
124
|
+
border-color: var(--stsv-Input__border-color);
|
|
125
|
+
border-radius: var(--stsv-Input__border-radius);
|
|
126
|
+
border-style: var(--stsv-Input__border-style);
|
|
127
|
+
border-width: var(--stsv-Input__border-width);
|
|
128
|
+
color: var(--stsv-Input__color);
|
|
129
|
+
display: grid;
|
|
130
|
+
grid-template-columns: 1fr 2em;
|
|
131
|
+
grid-template-rows: auto;
|
|
132
|
+
outline: none;
|
|
133
|
+
padding: 0;
|
|
134
|
+
transition: background-color 250ms, color 250ms, border-color 250ms;
|
|
135
|
+
}
|
|
136
|
+
|
|
137
|
+
.sterling-dropdown:hover {
|
|
138
|
+
background-color: var(--stsv-Input__background-color--hover);
|
|
139
|
+
border-color: var(--stsv-Input__border-color--hover);
|
|
140
|
+
color: var(--stsv-Input__color--hover);
|
|
141
|
+
}
|
|
142
|
+
|
|
143
|
+
.sterling-dropdown:focus {
|
|
144
|
+
background-color: var(--stsv-Input__background-color--focus);
|
|
145
|
+
border-color: var(--stsv-Input__border-color--focus);
|
|
146
|
+
color: var(--stsv-Input__color--focus);
|
|
147
|
+
outline-color: var(--stsv-Common__outline-color);
|
|
148
|
+
outline-offset: var(--stsv-Common__outline-offset);
|
|
149
|
+
outline-style: var(--stsv-Common__outline-style);
|
|
150
|
+
outline-width: var(--stsv-Common__outline-width);
|
|
151
|
+
}
|
|
152
|
+
|
|
153
|
+
.sterling-dropdown.disabled {
|
|
154
|
+
background-color: var(--stsv-Common__background-color--disabled);
|
|
155
|
+
border-color: var(--stsv--Common__border-color--disabled);
|
|
156
|
+
color: var(--stsv-Common__color--disabled);
|
|
157
|
+
cursor: not-allowed;
|
|
158
|
+
outline: none;
|
|
159
|
+
}
|
|
160
|
+
|
|
161
|
+
.sterling-dropdown.composed,
|
|
162
|
+
.sterling-dropdown.composed:hover,
|
|
163
|
+
.sterling-dropdown.composed.focus,
|
|
164
|
+
.sterling-dropdown.composed.disabled {
|
|
165
|
+
background: none;
|
|
166
|
+
border: none;
|
|
167
|
+
outline: none;
|
|
168
|
+
}
|
|
169
|
+
|
|
170
|
+
.button {
|
|
171
|
+
grid-column-start: 2;
|
|
172
|
+
grid-row-start: 1;
|
|
173
|
+
cursor: pointer;
|
|
174
|
+
}
|
|
175
|
+
|
|
176
|
+
.chevron {
|
|
177
|
+
display: block;
|
|
178
|
+
position: relative;
|
|
179
|
+
border: none;
|
|
180
|
+
background: none;
|
|
181
|
+
margin: 0;
|
|
182
|
+
height: 100%;
|
|
183
|
+
width: 32px;
|
|
184
|
+
}
|
|
185
|
+
|
|
186
|
+
.chevron::after {
|
|
187
|
+
position: absolute;
|
|
188
|
+
content: '';
|
|
189
|
+
top: 50%;
|
|
190
|
+
left: 50%;
|
|
191
|
+
width: 7px;
|
|
192
|
+
height: 7px;
|
|
193
|
+
border-right: 3px solid currentColor;
|
|
194
|
+
border-top: 3px solid currentColor;
|
|
195
|
+
/*
|
|
196
|
+
The chevron is a right triangle, rotated to face down.
|
|
197
|
+
It should be moved up so it is centered vertically after rotation.
|
|
198
|
+
The amount to move is the hypotenuse of the right triangle of the chevron.
|
|
199
|
+
For a right triangle with equal a and b where c=1
|
|
200
|
+
a^2 + b^2 = c^2
|
|
201
|
+
a^2 + a^2 = c^2
|
|
202
|
+
2a^2 = c^2
|
|
203
|
+
2a^2 = 1
|
|
204
|
+
a^2 = 0.5
|
|
205
|
+
a = sqrt(0.5)
|
|
206
|
+
a = 0.707
|
|
207
|
+
*/
|
|
208
|
+
transform: translate(-50%, calc(-50% / 0.707)) rotate(135deg);
|
|
209
|
+
transform-origin: 50% 50%;
|
|
210
|
+
}
|
|
211
|
+
|
|
212
|
+
.popup {
|
|
213
|
+
background-color: var(--stsv-Common__background-color);
|
|
214
|
+
border-color: var(--stsv-Common__border-color);
|
|
215
|
+
border-radius: var(--stsv-Common__border-radius);
|
|
216
|
+
border-style: var(--stsv-Common__border-style);
|
|
217
|
+
border-width: var(--stsv-Common__border-width);
|
|
218
|
+
box-sizing: border-box;
|
|
219
|
+
color: var(--stsv-Common__color);
|
|
220
|
+
display: none;
|
|
221
|
+
overflow: visible;
|
|
222
|
+
outline: none;
|
|
223
|
+
position: absolute;
|
|
224
|
+
box-shadow: rgba(0, 0, 0, 0.4) 2px 2px 4px -1px;
|
|
225
|
+
width: fit-content;
|
|
226
|
+
height: fit-content;
|
|
227
|
+
z-index: 1;
|
|
228
|
+
}
|
|
229
|
+
|
|
230
|
+
.popup.open {
|
|
231
|
+
display: grid;
|
|
232
|
+
grid-template-columns: 1fr;
|
|
233
|
+
grid-template-rows: 1fr;
|
|
234
|
+
}
|
|
235
|
+
|
|
236
|
+
@media (prefers-reduced-motion) {
|
|
237
|
+
.sterling-dropdown {
|
|
238
|
+
transition: none;
|
|
239
|
+
}
|
|
240
|
+
}
|
|
241
|
+
</style>
|
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
import { SvelteComponentTyped } from "svelte";
|
|
2
|
+
declare const __propDef: {
|
|
3
|
+
props: {
|
|
4
|
+
[x: string]: any;
|
|
5
|
+
composed?: boolean | undefined;
|
|
6
|
+
disabled?: boolean | undefined;
|
|
7
|
+
open?: boolean | undefined;
|
|
8
|
+
stayOpenOnClickAway?: boolean | undefined;
|
|
9
|
+
};
|
|
10
|
+
events: {
|
|
11
|
+
blur: FocusEvent;
|
|
12
|
+
click: MouseEvent;
|
|
13
|
+
copy: ClipboardEvent;
|
|
14
|
+
cut: ClipboardEvent;
|
|
15
|
+
dblclick: MouseEvent;
|
|
16
|
+
focus: FocusEvent;
|
|
17
|
+
focusin: FocusEvent;
|
|
18
|
+
focusout: FocusEvent;
|
|
19
|
+
keydown: KeyboardEvent;
|
|
20
|
+
keypress: KeyboardEvent;
|
|
21
|
+
keyup: KeyboardEvent;
|
|
22
|
+
mousedown: MouseEvent;
|
|
23
|
+
mouseenter: MouseEvent;
|
|
24
|
+
mouseleave: MouseEvent;
|
|
25
|
+
mousemove: MouseEvent;
|
|
26
|
+
mouseover: MouseEvent;
|
|
27
|
+
mouseout: MouseEvent;
|
|
28
|
+
mouseup: MouseEvent;
|
|
29
|
+
wheel: WheelEvent;
|
|
30
|
+
paste: ClipboardEvent;
|
|
31
|
+
open: CustomEvent<any>;
|
|
32
|
+
} & {
|
|
33
|
+
[evt: string]: CustomEvent<any>;
|
|
34
|
+
};
|
|
35
|
+
slots: {
|
|
36
|
+
value: {
|
|
37
|
+
composed: boolean;
|
|
38
|
+
disabled: boolean;
|
|
39
|
+
open: boolean;
|
|
40
|
+
};
|
|
41
|
+
button: {
|
|
42
|
+
composed: boolean;
|
|
43
|
+
disabled: boolean;
|
|
44
|
+
open: boolean;
|
|
45
|
+
};
|
|
46
|
+
default: {
|
|
47
|
+
composed: boolean;
|
|
48
|
+
disabled: boolean;
|
|
49
|
+
open: boolean;
|
|
50
|
+
};
|
|
51
|
+
};
|
|
52
|
+
};
|
|
53
|
+
export type DropdownProps = typeof __propDef.props;
|
|
54
|
+
export type DropdownEvents = typeof __propDef.events;
|
|
55
|
+
export type DropdownSlots = typeof __propDef.slots;
|
|
56
|
+
export default class Dropdown extends SvelteComponentTyped<DropdownProps, DropdownEvents, DropdownSlots> {
|
|
57
|
+
}
|
|
58
|
+
export {};
|
package/Slider.svelte
CHANGED
|
@@ -1,12 +1,13 @@
|
|
|
1
1
|
<script>import { createEventDispatcher } from "svelte";
|
|
2
2
|
import { round } from "lodash-es";
|
|
3
|
-
export let
|
|
3
|
+
export let composed = false;
|
|
4
|
+
export let disabled = false;
|
|
4
5
|
export let min = 0;
|
|
5
6
|
export let max = 100;
|
|
6
|
-
export let step = void 0;
|
|
7
7
|
export let precision = 0;
|
|
8
|
+
export let step = void 0;
|
|
9
|
+
export let value = 0;
|
|
8
10
|
export let vertical = false;
|
|
9
|
-
export let disabled = false;
|
|
10
11
|
let sliderRef;
|
|
11
12
|
const dispatch = createEventDispatcher();
|
|
12
13
|
const raiseChange = (newValue) => {
|
|
@@ -127,6 +128,7 @@ Slider lets the user chose a value within a min/max range by dragging a thumb bu
|
|
|
127
128
|
aria-valuenow={value}
|
|
128
129
|
aria-valuemax={max}
|
|
129
130
|
class="sterling-slider"
|
|
131
|
+
class:composed
|
|
130
132
|
class:disabled
|
|
131
133
|
class:horizontal={!vertical}
|
|
132
134
|
class:vertical
|
|
@@ -307,6 +309,7 @@ Slider lets the user chose a value within a min/max range by dragging a thumb bu
|
|
|
307
309
|
outline-style: var(--stsv-Common__outline-style);
|
|
308
310
|
outline-width: var(--stsv-Common__outline-width);
|
|
309
311
|
}
|
|
312
|
+
|
|
310
313
|
/* ----- disabled ----- */
|
|
311
314
|
|
|
312
315
|
.sterling-slider.disabled .track {
|
|
@@ -324,6 +327,15 @@ Slider lets the user chose a value within a min/max range by dragging a thumb bu
|
|
|
324
327
|
cursor: not-allowed;
|
|
325
328
|
}
|
|
326
329
|
|
|
330
|
+
.sterling-slider.composed,
|
|
331
|
+
.sterling-slider.composed:hover,
|
|
332
|
+
.sterling-slider.composed.focus,
|
|
333
|
+
.sterling-slider.composed.disabled {
|
|
334
|
+
background: none;
|
|
335
|
+
border: none;
|
|
336
|
+
outline: none;
|
|
337
|
+
}
|
|
338
|
+
|
|
327
339
|
@media (prefers-reduced-motion) {
|
|
328
340
|
.sterling-slider,
|
|
329
341
|
.track,
|
package/Slider.svelte.d.ts
CHANGED
|
@@ -2,13 +2,14 @@ import { SvelteComponentTyped } from "svelte";
|
|
|
2
2
|
declare const __propDef: {
|
|
3
3
|
props: {
|
|
4
4
|
[x: string]: any;
|
|
5
|
-
|
|
5
|
+
composed?: boolean | undefined;
|
|
6
|
+
disabled?: boolean | undefined;
|
|
6
7
|
min?: number | undefined;
|
|
7
8
|
max?: number | undefined;
|
|
8
|
-
step?: number | undefined;
|
|
9
9
|
precision?: number | undefined;
|
|
10
|
+
step?: number | undefined;
|
|
11
|
+
value?: number | undefined;
|
|
10
12
|
vertical?: boolean | undefined;
|
|
11
|
-
disabled?: boolean | undefined;
|
|
12
13
|
};
|
|
13
14
|
events: {
|
|
14
15
|
blur: FocusEvent;
|
package/Switch.svelte
CHANGED
|
@@ -3,8 +3,8 @@ import Label from "./Label.svelte";
|
|
|
3
3
|
export let checked = false;
|
|
4
4
|
export let disabled = false;
|
|
5
5
|
export let vertical = false;
|
|
6
|
-
export let onText =
|
|
7
|
-
export let offText =
|
|
6
|
+
export let onText = void 0;
|
|
7
|
+
export let offText = void 0;
|
|
8
8
|
const inputId = uuid();
|
|
9
9
|
let switchWidth = 0;
|
|
10
10
|
let switchHeight = 0;
|
|
@@ -19,7 +19,9 @@ $:
|
|
|
19
19
|
$:
|
|
20
20
|
valueOffset = (switchSize - thumbSize) * ratio;
|
|
21
21
|
$:
|
|
22
|
-
|
|
22
|
+
hasOffLabel = $$slots.offLabel || offText !== void 0 && offText.length > 0;
|
|
23
|
+
$:
|
|
24
|
+
hasOnLabel = $$slots.onLabel || onText !== void 0 && onText.length > 0;
|
|
23
25
|
</script>
|
|
24
26
|
|
|
25
27
|
<!--
|
|
@@ -54,13 +56,15 @@ $:
|
|
|
54
56
|
on:wheel
|
|
55
57
|
{...$$restProps}
|
|
56
58
|
/>
|
|
57
|
-
|
|
58
|
-
<
|
|
59
|
-
{
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
59
|
+
{#if hasOffLabel}
|
|
60
|
+
<div class="off-label">
|
|
61
|
+
<slot name="offLabel" {checked} {disabled} {inputId} {offText} {vertical}>
|
|
62
|
+
{#if offText}
|
|
63
|
+
<Label for={inputId} {disabled}>{offText}</Label>
|
|
64
|
+
{/if}
|
|
65
|
+
</slot>
|
|
66
|
+
</div>
|
|
67
|
+
{/if}
|
|
64
68
|
<!-- svelte-ignore a11y-click-events-have-key-events -->
|
|
65
69
|
<div class="switch" bind:offsetWidth={switchWidth} bind:offsetHeight={switchHeight}>
|
|
66
70
|
<div
|
|
@@ -70,13 +74,15 @@ $:
|
|
|
70
74
|
style={`--thumb-offset: ${valueOffset}px`}
|
|
71
75
|
/>
|
|
72
76
|
</div>
|
|
73
|
-
|
|
74
|
-
<
|
|
75
|
-
{
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
77
|
+
{#if hasOnLabel}
|
|
78
|
+
<div class="on-label">
|
|
79
|
+
<slot name="onLabel" {checked} {disabled} {inputId} {onText} {vertical}>
|
|
80
|
+
{#if onText}
|
|
81
|
+
<Label for={inputId} {disabled}>{onText}</Label>
|
|
82
|
+
{/if}
|
|
83
|
+
</slot>
|
|
84
|
+
</div>
|
|
85
|
+
{/if}
|
|
80
86
|
</div>
|
|
81
87
|
|
|
82
88
|
<style>
|
|
@@ -89,7 +95,7 @@ $:
|
|
|
89
95
|
.sterling-switch:not(.vertical) {
|
|
90
96
|
align-items: center;
|
|
91
97
|
column-gap: 0.5em;
|
|
92
|
-
grid-template-columns: auto
|
|
98
|
+
grid-template-columns: auto 1fr auto;
|
|
93
99
|
grid-template-rows: auto;
|
|
94
100
|
justify-items: stretch;
|
|
95
101
|
}
|
package/Switch.svelte.d.ts
CHANGED
|
@@ -33,18 +33,18 @@ declare const __propDef: {
|
|
|
33
33
|
[evt: string]: CustomEvent<any>;
|
|
34
34
|
};
|
|
35
35
|
slots: {
|
|
36
|
-
|
|
36
|
+
offLabel: {
|
|
37
37
|
checked: boolean;
|
|
38
38
|
disabled: boolean;
|
|
39
39
|
inputId: string;
|
|
40
|
-
offText: string;
|
|
40
|
+
offText: string | undefined;
|
|
41
41
|
vertical: boolean;
|
|
42
42
|
};
|
|
43
|
-
|
|
43
|
+
onLabel: {
|
|
44
44
|
checked: boolean;
|
|
45
45
|
disabled: boolean;
|
|
46
46
|
inputId: string;
|
|
47
|
-
onText: string;
|
|
47
|
+
onText: string | undefined;
|
|
48
48
|
vertical: boolean;
|
|
49
49
|
};
|
|
50
50
|
};
|
package/index.d.ts
CHANGED
|
@@ -7,7 +7,7 @@ export { applyLightTheme } from './theme/applyLightTheme';
|
|
|
7
7
|
export { applyTheme } from './theme/applyTheme';
|
|
8
8
|
export { darkTheme } from './theme/darkTheme';
|
|
9
9
|
export { lightTheme } from './theme/lightTheme';
|
|
10
|
-
export {
|
|
10
|
+
export { neutralColors, lightStatusColors, darkStatusColors } from './theme/colors';
|
|
11
11
|
export { toggleDarkTheme } from './theme/toggleDarkTheme';
|
|
12
12
|
export { menuBarContextKey, menuItemContextKey } from './Menus.constants';
|
|
13
13
|
export type { ButtonVariant, ButtonShape } from './Button.types';
|
|
@@ -25,6 +25,7 @@ export { treeContextKey, treeItemContextKey } from './Tree.constants';
|
|
|
25
25
|
import Button from './Button.svelte';
|
|
26
26
|
import Checkbox from './Checkbox.svelte';
|
|
27
27
|
import Dialog from './Dialog.svelte';
|
|
28
|
+
import Dropdown from './Dropdown.svelte';
|
|
28
29
|
import Field from './Field.svelte';
|
|
29
30
|
import Input from './Input.svelte';
|
|
30
31
|
import Label from './Label.svelte';
|
|
@@ -49,4 +50,4 @@ import Tree from './Tree.svelte';
|
|
|
49
50
|
import TreeChevron from './TreeChevron.svelte';
|
|
50
51
|
import TreeItem from './TreeItem.svelte';
|
|
51
52
|
import TreeItemDisplay from './TreeItemDisplay.svelte';
|
|
52
|
-
export { Button, Checkbox, Dialog, Field, Input, Label, List, ListItem, Menu, MenuBar, MenuButton, MenuItem, MenuItemDisplay, MenuSeparator, Progress, Radio, Select, Slider, Switch, Tab, TabList, TextArea, Tooltip, Tree, TreeChevron, TreeItem, TreeItemDisplay };
|
|
53
|
+
export { Button, Checkbox, Dialog, Dropdown, Field, Input, Label, List, ListItem, Menu, MenuBar, MenuButton, MenuItem, MenuItemDisplay, MenuSeparator, Progress, Radio, Select, Slider, Switch, Tab, TabList, TextArea, Tooltip, Tree, TreeChevron, TreeItem, TreeItemDisplay };
|
package/index.js
CHANGED
|
@@ -9,7 +9,7 @@ export { applyLightTheme } from './theme/applyLightTheme';
|
|
|
9
9
|
export { applyTheme } from './theme/applyTheme';
|
|
10
10
|
export { darkTheme } from './theme/darkTheme';
|
|
11
11
|
export { lightTheme } from './theme/lightTheme';
|
|
12
|
-
export {
|
|
12
|
+
export { neutralColors, lightStatusColors, darkStatusColors } from './theme/colors';
|
|
13
13
|
export { toggleDarkTheme } from './theme/toggleDarkTheme';
|
|
14
14
|
// ----- Button ----- //
|
|
15
15
|
export { menuBarContextKey, menuItemContextKey } from './Menus.constants';
|
|
@@ -21,6 +21,7 @@ export { treeContextKey, treeItemContextKey } from './Tree.constants';
|
|
|
21
21
|
import Button from './Button.svelte';
|
|
22
22
|
import Checkbox from './Checkbox.svelte';
|
|
23
23
|
import Dialog from './Dialog.svelte';
|
|
24
|
+
import Dropdown from './Dropdown.svelte';
|
|
24
25
|
import Field from './Field.svelte';
|
|
25
26
|
import Input from './Input.svelte';
|
|
26
27
|
import Label from './Label.svelte';
|
|
@@ -45,4 +46,4 @@ import Tree from './Tree.svelte';
|
|
|
45
46
|
import TreeChevron from './TreeChevron.svelte';
|
|
46
47
|
import TreeItem from './TreeItem.svelte';
|
|
47
48
|
import TreeItemDisplay from './TreeItemDisplay.svelte';
|
|
48
|
-
export { Button, Checkbox, Dialog, Field, Input, Label, List, ListItem, Menu, MenuBar, MenuButton, MenuItem, MenuItemDisplay, MenuSeparator, Progress, Radio, Select, Slider, Switch, Tab, TabList, TextArea, Tooltip, Tree, TreeChevron, TreeItem, TreeItemDisplay };
|
|
49
|
+
export { Button, Checkbox, Dialog, Dropdown, Field, Input, Label, List, ListItem, Menu, MenuBar, MenuButton, MenuItem, MenuItemDisplay, MenuSeparator, Progress, Radio, Select, Slider, Switch, Tab, TabList, TextArea, Tooltip, Tree, TreeChevron, TreeItem, TreeItemDisplay };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@geoffcox/sterling-svelte",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.19",
|
|
4
4
|
"author": "Geoff Cox",
|
|
5
5
|
"description": "A modern, accessible, and lightweight component library for Svelte.",
|
|
6
6
|
"license": "MIT",
|
|
@@ -55,6 +55,7 @@
|
|
|
55
55
|
"./Button.types": "./Button.types.js",
|
|
56
56
|
"./Checkbox.svelte": "./Checkbox.svelte",
|
|
57
57
|
"./Dialog.svelte": "./Dialog.svelte",
|
|
58
|
+
"./Dropdown.svelte": "./Dropdown.svelte",
|
|
58
59
|
"./Field.svelte": "./Field.svelte",
|
|
59
60
|
"./Field.types": "./Field.types.js",
|
|
60
61
|
"./Input.svelte": "./Input.svelte",
|
package/theme/colors.d.ts
CHANGED
|
@@ -1 +1,53 @@
|
|
|
1
|
-
export declare const
|
|
1
|
+
export declare const neutralColors: Record<string, string>;
|
|
2
|
+
/**
|
|
3
|
+
* Status colors for a light theme.
|
|
4
|
+
* These are carefully chosen colors to meet the minimum 4.5:1 accessibility contrast ratio.
|
|
5
|
+
*/
|
|
6
|
+
export declare const lightStatusColors: {
|
|
7
|
+
info: {
|
|
8
|
+
backgroundColor: string;
|
|
9
|
+
borderColor: string;
|
|
10
|
+
color: string;
|
|
11
|
+
};
|
|
12
|
+
success: {
|
|
13
|
+
backgroundColor: string;
|
|
14
|
+
borderColor: string;
|
|
15
|
+
color: string;
|
|
16
|
+
};
|
|
17
|
+
warning: {
|
|
18
|
+
backgroundColor: string;
|
|
19
|
+
borderColor: string;
|
|
20
|
+
color: string;
|
|
21
|
+
};
|
|
22
|
+
error: {
|
|
23
|
+
backgroundColor: string;
|
|
24
|
+
borderColor: string;
|
|
25
|
+
color: string;
|
|
26
|
+
};
|
|
27
|
+
};
|
|
28
|
+
/**
|
|
29
|
+
* Status colors for a dark theme.
|
|
30
|
+
* These are carefully chosen colors to meet the minimum 4.5:1 accessibility contrast ratio.
|
|
31
|
+
*/
|
|
32
|
+
export declare const darkStatusColors: {
|
|
33
|
+
info: {
|
|
34
|
+
backgroundColor: string;
|
|
35
|
+
borderColor: string;
|
|
36
|
+
color: string;
|
|
37
|
+
};
|
|
38
|
+
success: {
|
|
39
|
+
backgroundColor: string;
|
|
40
|
+
borderColor: string;
|
|
41
|
+
color: string;
|
|
42
|
+
};
|
|
43
|
+
warning: {
|
|
44
|
+
backgroundColor: string;
|
|
45
|
+
borderColor: string;
|
|
46
|
+
color: string;
|
|
47
|
+
};
|
|
48
|
+
error: {
|
|
49
|
+
backgroundColor: string;
|
|
50
|
+
borderColor: string;
|
|
51
|
+
color: string;
|
|
52
|
+
};
|
|
53
|
+
};
|
package/theme/colors.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export const
|
|
1
|
+
export const neutralColors = {
|
|
2
2
|
neutral0: 'hsl(0, 0%, 0%)',
|
|
3
3
|
neutral10: 'hsl(0, 0%, 12%)',
|
|
4
4
|
neutral15: 'hsl(0, 0%, 15%)',
|
|
@@ -13,3 +13,55 @@ export const neutrals = {
|
|
|
13
13
|
neutral98: 'hsl(0, 0%, 98%)',
|
|
14
14
|
neutral100: 'hsl(0, 0%, 100%)'
|
|
15
15
|
};
|
|
16
|
+
/**
|
|
17
|
+
* Status colors for a light theme.
|
|
18
|
+
* These are carefully chosen colors to meet the minimum 4.5:1 accessibility contrast ratio.
|
|
19
|
+
*/
|
|
20
|
+
export const lightStatusColors = {
|
|
21
|
+
info: {
|
|
22
|
+
backgroundColor: 'hsl(198, 100%, 90%)',
|
|
23
|
+
borderColor: 'hsl(198, 100%, 40%)',
|
|
24
|
+
color: 'hsl(198, 100%, 40%)'
|
|
25
|
+
},
|
|
26
|
+
success: {
|
|
27
|
+
backgroundColor: 'hsl(146, 100%, 90%)',
|
|
28
|
+
borderColor: 'hsl(146, 100%, 30%)',
|
|
29
|
+
color: 'hsl(146, 80%, 25%)'
|
|
30
|
+
},
|
|
31
|
+
warning: {
|
|
32
|
+
backgroundColor: 'hsl(39, 100%, 80%)',
|
|
33
|
+
borderColor: 'hsl(39, 100%, 45%)',
|
|
34
|
+
color: 'hsl(39, 100%, 25%)'
|
|
35
|
+
},
|
|
36
|
+
error: {
|
|
37
|
+
backgroundColor: 'hsl(5, 100%, 90%)',
|
|
38
|
+
borderColor: 'hsl(5, 100%, 40%)',
|
|
39
|
+
color: 'hsl(5, 80%, 40%)'
|
|
40
|
+
}
|
|
41
|
+
};
|
|
42
|
+
/**
|
|
43
|
+
* Status colors for a dark theme.
|
|
44
|
+
* These are carefully chosen colors to meet the minimum 4.5:1 accessibility contrast ratio.
|
|
45
|
+
*/
|
|
46
|
+
export const darkStatusColors = {
|
|
47
|
+
info: {
|
|
48
|
+
backgroundColor: 'hsl(198, 100%, 10%)',
|
|
49
|
+
borderColor: 'hsl(198, 100%, 40%)',
|
|
50
|
+
color: 'hsl(198, 80%, 50%)'
|
|
51
|
+
},
|
|
52
|
+
success: {
|
|
53
|
+
backgroundColor: 'hsl(146, 100%, 10%)',
|
|
54
|
+
borderColor: 'hsl(146, 100%, 30%)',
|
|
55
|
+
color: 'hsl(146, 100%, 40%)'
|
|
56
|
+
},
|
|
57
|
+
warning: {
|
|
58
|
+
backgroundColor: 'hsl(39, 100%, 10%)',
|
|
59
|
+
borderColor: 'hsl(39, 100%, 45%)',
|
|
60
|
+
color: 'hsl(39, 100%, 50%)'
|
|
61
|
+
},
|
|
62
|
+
error: {
|
|
63
|
+
backgroundColor: 'hsl(5, 100%, 10%)',
|
|
64
|
+
borderColor: 'hsl(5, 100%, 40%)',
|
|
65
|
+
color: 'hsl(5, 100%, 50%)'
|
|
66
|
+
}
|
|
67
|
+
};
|
package/theme/darkTheme.js
CHANGED
|
@@ -1,91 +1,91 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { darkStatusColors, neutralColors } from './colors';
|
|
2
2
|
export const darkTheme = {
|
|
3
3
|
// ----- Common ---- //
|
|
4
|
-
'--stsv-Common__background-color':
|
|
5
|
-
'--stsv-Common__border-color':
|
|
4
|
+
'--stsv-Common__background-color': neutralColors.neutral15,
|
|
5
|
+
'--stsv-Common__border-color': neutralColors.neutral92,
|
|
6
6
|
'--stsv-Common__border-radius': '0',
|
|
7
7
|
'--stsv-Common__border-style': 'solid',
|
|
8
8
|
'--stsv-Common__border-width': '2px',
|
|
9
|
-
'--stsv-Common__color':
|
|
9
|
+
'--stsv-Common__color': neutralColors.neutral100,
|
|
10
10
|
// hover
|
|
11
|
-
'--stsv-Common__background-color--hover':
|
|
12
|
-
'--stsv-Common__border-color--hover':
|
|
13
|
-
'--stsv-Common__color--hover':
|
|
11
|
+
'--stsv-Common__background-color--hover': neutralColors.neutral15,
|
|
12
|
+
'--stsv-Common__border-color--hover': neutralColors.neutral96,
|
|
13
|
+
'--stsv-Common__color--hover': neutralColors.neutral100,
|
|
14
14
|
// focus
|
|
15
|
-
'--stsv-Common__background-color--focus':
|
|
16
|
-
'--stsv-Common__border-color--focus':
|
|
17
|
-
'--stsv-Common__color--focus':
|
|
15
|
+
'--stsv-Common__background-color--focus': neutralColors.neutral45,
|
|
16
|
+
'--stsv-Common__border-color--focus': neutralColors.neutral100,
|
|
17
|
+
'--stsv-Common__color--focus': neutralColors.neutral100,
|
|
18
18
|
// outline
|
|
19
|
-
'--stsv-Common__outline-color':
|
|
19
|
+
'--stsv-Common__outline-color': neutralColors.neutral100,
|
|
20
20
|
'--stsv-Common__outline-offset': '0',
|
|
21
21
|
'--stsv-Common__outline-style': 'solid',
|
|
22
22
|
'--stsv-Common__outline-width': '2px',
|
|
23
23
|
// disabled
|
|
24
|
-
'--stsv-Common__background-color--disabled':
|
|
25
|
-
'--stsv-Common__border-color--disabled':
|
|
26
|
-
'--stsv-Common__color--disabled':
|
|
24
|
+
'--stsv-Common__background-color--disabled': neutralColors.neutral45,
|
|
25
|
+
'--stsv-Common__border-color--disabled': neutralColors.neutral92,
|
|
26
|
+
'--stsv-Common__color--disabled': neutralColors.neutral60,
|
|
27
27
|
// ----- Layer ---- //
|
|
28
|
-
'--stsv-Layer__background-color--1':
|
|
29
|
-
'--stsv-Layer__color--1':
|
|
30
|
-
'--stsv-Layer__background-color--2':
|
|
31
|
-
'--stsv-Layer__color--2':
|
|
32
|
-
'--stsv-Layer__background-color--3':
|
|
33
|
-
'--stsv-Layer__color--3':
|
|
28
|
+
'--stsv-Layer__background-color--1': neutralColors.neutral20,
|
|
29
|
+
'--stsv-Layer__color--1': neutralColors.neutral100,
|
|
30
|
+
'--stsv-Layer__background-color--2': neutralColors.neutral10,
|
|
31
|
+
'--stsv-Layer__color--2': neutralColors.neutral100,
|
|
32
|
+
'--stsv-Layer__background-color--3': neutralColors.neutral45,
|
|
33
|
+
'--stsv-Layer__color--3': neutralColors.neutral100,
|
|
34
34
|
// ----- Button ----- //
|
|
35
|
-
'--stsv-Button__background-color':
|
|
36
|
-
'--stsv-Button__border-color':
|
|
35
|
+
'--stsv-Button__background-color': neutralColors.neutral30,
|
|
36
|
+
'--stsv-Button__border-color': neutralColors.neutral92,
|
|
37
37
|
'--stsv-Button__border-radius': '8px',
|
|
38
38
|
'--stsv-Button__border-style': 'solid',
|
|
39
39
|
'--stsv-Button__border-width': '2px',
|
|
40
|
-
'--stsv-Button__color':
|
|
40
|
+
'--stsv-Button__color': neutralColors.neutral100,
|
|
41
41
|
// hover
|
|
42
|
-
'--stsv-Button__background-color--hover':
|
|
43
|
-
'--stsv-Button__border-color--hover':
|
|
44
|
-
'--stsv-Button__color--hover':
|
|
42
|
+
'--stsv-Button__background-color--hover': neutralColors.neutral45,
|
|
43
|
+
'--stsv-Button__border-color--hover': neutralColors.neutral96,
|
|
44
|
+
'--stsv-Button__color--hover': neutralColors.neutral100,
|
|
45
45
|
// active
|
|
46
|
-
'--stsv-Button__background-color--active':
|
|
47
|
-
'--stsv-Button__border-color--active':
|
|
48
|
-
'--stsv-Button__color--active':
|
|
46
|
+
'--stsv-Button__background-color--active': neutralColors.neutral60,
|
|
47
|
+
'--stsv-Button__border-color--active': neutralColors.neutral98,
|
|
48
|
+
'--stsv-Button__color--active': neutralColors.neutral98,
|
|
49
49
|
// focus
|
|
50
|
-
'--stsv-Button__background-color--focus':
|
|
51
|
-
'--stsv-Button__border-color--focus':
|
|
52
|
-
'--stsv-Button__color--focus':
|
|
50
|
+
'--stsv-Button__background-color--focus': neutralColors.neutral45,
|
|
51
|
+
'--stsv-Button__border-color--focus': neutralColors.neutral100,
|
|
52
|
+
'--stsv-Button__color--focus': neutralColors.neutral100,
|
|
53
53
|
// ----- Input ----- //
|
|
54
|
-
'--stsv-Input__background-color':
|
|
55
|
-
'--stsv-Input__border-color':
|
|
54
|
+
'--stsv-Input__background-color': neutralColors.neutral30,
|
|
55
|
+
'--stsv-Input__border-color': neutralColors.neutral92,
|
|
56
56
|
'--stsv-Input__border-radius': '3px',
|
|
57
57
|
'--stsv-Input__border-style': 'solid',
|
|
58
58
|
'--stsv-Input__border-width': '2px',
|
|
59
|
-
'--stsv-Input__color':
|
|
59
|
+
'--stsv-Input__color': neutralColors.neutral100,
|
|
60
60
|
// hover
|
|
61
|
-
'--stsv-Input__background-color--hover':
|
|
62
|
-
'--stsv-Input__border-color--hover':
|
|
63
|
-
'--stsv-Input__color--hover':
|
|
61
|
+
'--stsv-Input__background-color--hover': neutralColors.neutral15,
|
|
62
|
+
'--stsv-Input__border-color--hover': neutralColors.neutral96,
|
|
63
|
+
'--stsv-Input__color--hover': neutralColors.neutral100,
|
|
64
64
|
// focus
|
|
65
|
-
'--stsv-Input__background-color--focus':
|
|
66
|
-
'--stsv-Input__border-color--focus':
|
|
67
|
-
'--stsv-Input__color--focus':
|
|
65
|
+
'--stsv-Input__background-color--focus': neutralColors.neutral15,
|
|
66
|
+
'--stsv-Input__border-color--focus': neutralColors.neutral100,
|
|
67
|
+
'--stsv-Input__color--focus': neutralColors.neutral100,
|
|
68
68
|
// selected
|
|
69
|
-
'--stsv-Input__background-color--selected':
|
|
70
|
-
'--stsv-Input__border-color--selected':
|
|
71
|
-
'--stsv-Input__color--selected':
|
|
69
|
+
'--stsv-Input__background-color--selected': neutralColors.neutral60,
|
|
70
|
+
'--stsv-Input__border-color--selected': neutralColors.neutral98,
|
|
71
|
+
'--stsv-Input__color--selected': neutralColors.neutral100,
|
|
72
72
|
// ----- Display ----- //
|
|
73
|
-
'--stsv-Display__background-color':
|
|
74
|
-
'--stsv-Display__border-color':
|
|
75
|
-
'--stsv-Display__color':
|
|
76
|
-
'--stsv-Display__color--subtle':
|
|
77
|
-
'--stsv-Display__color--faint':
|
|
78
|
-
'--stsv-Display__color--disabled':
|
|
79
|
-
'--stsv-Info__background-color':
|
|
80
|
-
'--stsv-Info__border-color':
|
|
81
|
-
'--stsv-Info__color':
|
|
82
|
-
'--stsv-Success__background-color':
|
|
83
|
-
'--stsv-Success__border-color':
|
|
84
|
-
'--stsv-Success__color':
|
|
85
|
-
'--stsv-Warning__background-color':
|
|
86
|
-
'--stsv-Warning__border-color':
|
|
87
|
-
'--stsv-Warning__color':
|
|
88
|
-
'--stsv-Error__background-color':
|
|
89
|
-
'--stsv-Error__border-color':
|
|
90
|
-
'--stsv-Error__color':
|
|
73
|
+
'--stsv-Display__background-color': neutralColors.neutral20,
|
|
74
|
+
'--stsv-Display__border-color': neutralColors.neutral92,
|
|
75
|
+
'--stsv-Display__color': neutralColors.neutral80,
|
|
76
|
+
'--stsv-Display__color--subtle': neutralColors.neutral96,
|
|
77
|
+
'--stsv-Display__color--faint': neutralColors.neutral45,
|
|
78
|
+
'--stsv-Display__color--disabled': neutralColors.neutral45,
|
|
79
|
+
'--stsv-Info__background-color': darkStatusColors.info.backgroundColor,
|
|
80
|
+
'--stsv-Info__border-color': darkStatusColors.info.borderColor,
|
|
81
|
+
'--stsv-Info__color': darkStatusColors.info.color,
|
|
82
|
+
'--stsv-Success__background-color': darkStatusColors.success.backgroundColor,
|
|
83
|
+
'--stsv-Success__border-color': darkStatusColors.success.borderColor,
|
|
84
|
+
'--stsv-Success__color': darkStatusColors.success.color,
|
|
85
|
+
'--stsv-Warning__background-color': darkStatusColors.warning.backgroundColor,
|
|
86
|
+
'--stsv-Warning__border-color': darkStatusColors.warning.borderColor,
|
|
87
|
+
'--stsv-Warning__color': darkStatusColors.warning.color,
|
|
88
|
+
'--stsv-Error__background-color': darkStatusColors.error.backgroundColor,
|
|
89
|
+
'--stsv-Error__border-color': darkStatusColors.error.borderColor,
|
|
90
|
+
'--stsv-Error__color': darkStatusColors.error.color
|
|
91
91
|
};
|
package/theme/lightTheme.js
CHANGED
|
@@ -1,91 +1,91 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { lightStatusColors, neutralColors } from './colors';
|
|
2
2
|
export const lightTheme = {
|
|
3
3
|
// ----- Common (18) ---- //
|
|
4
|
-
'--stsv-Common__background-color':
|
|
5
|
-
'--stsv-Common__border-color':
|
|
4
|
+
'--stsv-Common__background-color': neutralColors.neutral100,
|
|
5
|
+
'--stsv-Common__border-color': neutralColors.neutral60,
|
|
6
6
|
'--stsv-Common__border-radius': '0',
|
|
7
7
|
'--stsv-Common__border-style': 'solid',
|
|
8
8
|
'--stsv-Common__border-width': '2px',
|
|
9
|
-
'--stsv-Common__color':
|
|
9
|
+
'--stsv-Common__color': neutralColors.neutral15,
|
|
10
10
|
// hover
|
|
11
|
-
'--stsv-Common__background-color--hover':
|
|
12
|
-
'--stsv-Common__border-color--hover':
|
|
13
|
-
'--stsv-Common__color--hover':
|
|
11
|
+
'--stsv-Common__background-color--hover': neutralColors.neutral100,
|
|
12
|
+
'--stsv-Common__border-color--hover': neutralColors.neutral45,
|
|
13
|
+
'--stsv-Common__color--hover': neutralColors.neutral15,
|
|
14
14
|
// focus
|
|
15
|
-
'--stsv-Common__background-color--focus':
|
|
16
|
-
'--stsv-Common__border-color--focus':
|
|
17
|
-
'--stsv-Common__color--focus':
|
|
15
|
+
'--stsv-Common__background-color--focus': neutralColors.neutral96,
|
|
16
|
+
'--stsv-Common__border-color--focus': neutralColors.neutral0,
|
|
17
|
+
'--stsv-Common__color--focus': neutralColors.neutral15,
|
|
18
18
|
// outline
|
|
19
|
-
'--stsv-Common__outline-color':
|
|
19
|
+
'--stsv-Common__outline-color': neutralColors.neutral15,
|
|
20
20
|
'--stsv-Common__outline-offset': '0',
|
|
21
21
|
'--stsv-Common__outline-style': 'solid',
|
|
22
22
|
'--stsv-Common__outline-width': '2px',
|
|
23
23
|
// disabled
|
|
24
|
-
'--stsv-Common__background-color--disabled':
|
|
25
|
-
'--stsv-Common__border-color--disabled':
|
|
26
|
-
'--stsv-Common__color--disabled':
|
|
24
|
+
'--stsv-Common__background-color--disabled': neutralColors.neutral96,
|
|
25
|
+
'--stsv-Common__border-color--disabled': neutralColors.neutral75,
|
|
26
|
+
'--stsv-Common__color--disabled': neutralColors.neutral75,
|
|
27
27
|
// ----- Layer ---- //
|
|
28
|
-
'--stsv-Layer__background-color--1':
|
|
29
|
-
'--stsv-Layer__color--1':
|
|
30
|
-
'--stsv-Layer__background-color--2':
|
|
31
|
-
'--stsv-Layer__color--2':
|
|
32
|
-
'--stsv-Layer__background-color--3':
|
|
33
|
-
'--stsv-Layer__color--3':
|
|
28
|
+
'--stsv-Layer__background-color--1': neutralColors.neutral98,
|
|
29
|
+
'--stsv-Layer__color--1': neutralColors.neutral15,
|
|
30
|
+
'--stsv-Layer__background-color--2': neutralColors.neutral96,
|
|
31
|
+
'--stsv-Layer__color--2': neutralColors.neutral15,
|
|
32
|
+
'--stsv-Layer__background-color--3': neutralColors.neutral92,
|
|
33
|
+
'--stsv-Layer__color--3': neutralColors.neutral15,
|
|
34
34
|
// ----- Button (15) ----- //
|
|
35
|
-
'--stsv-Button__background-color':
|
|
36
|
-
'--stsv-Button__border-color':
|
|
35
|
+
'--stsv-Button__background-color': neutralColors.neutral96,
|
|
36
|
+
'--stsv-Button__border-color': neutralColors.neutral60,
|
|
37
37
|
'--stsv-Button__border-radius': '8px',
|
|
38
38
|
'--stsv-Button__border-style': 'solid',
|
|
39
39
|
'--stsv-Button__border-width': '2px',
|
|
40
|
-
'--stsv-Button__color':
|
|
40
|
+
'--stsv-Button__color': neutralColors.neutral15,
|
|
41
41
|
// hover
|
|
42
|
-
'--stsv-Button__background-color--hover':
|
|
43
|
-
'--stsv-Button__border-color--hover':
|
|
44
|
-
'--stsv-Button__color--hover':
|
|
42
|
+
'--stsv-Button__background-color--hover': neutralColors.neutral96,
|
|
43
|
+
'--stsv-Button__border-color--hover': neutralColors.neutral45,
|
|
44
|
+
'--stsv-Button__color--hover': neutralColors.neutral15,
|
|
45
45
|
// active
|
|
46
|
-
'--stsv-Button__background-color--active':
|
|
47
|
-
'--stsv-Button__border-color--active':
|
|
48
|
-
'--stsv-Button__color--active':
|
|
46
|
+
'--stsv-Button__background-color--active': neutralColors.neutral92,
|
|
47
|
+
'--stsv-Button__border-color--active': neutralColors.neutral30,
|
|
48
|
+
'--stsv-Button__color--active': neutralColors.neutral30,
|
|
49
49
|
// focus
|
|
50
|
-
'--stsv-Button__background-color--focus':
|
|
51
|
-
'--stsv-Button__border-color--focus':
|
|
52
|
-
'--stsv-Button__color--focus':
|
|
50
|
+
'--stsv-Button__background-color--focus': neutralColors.neutral96,
|
|
51
|
+
'--stsv-Button__border-color--focus': neutralColors.neutral0,
|
|
52
|
+
'--stsv-Button__color--focus': neutralColors.neutral15,
|
|
53
53
|
// ----- Input (15) ----- //
|
|
54
|
-
'--stsv-Input__background-color':
|
|
55
|
-
'--stsv-Input__border-color':
|
|
54
|
+
'--stsv-Input__background-color': neutralColors.neutral98,
|
|
55
|
+
'--stsv-Input__border-color': neutralColors.neutral60,
|
|
56
56
|
'--stsv-Input__border-radius': '3px',
|
|
57
57
|
'--stsv-Input__border-style': 'solid',
|
|
58
58
|
'--stsv-Input__border-width': '2px',
|
|
59
|
-
'--stsv-Input__color':
|
|
59
|
+
'--stsv-Input__color': neutralColors.neutral15,
|
|
60
60
|
// hover
|
|
61
|
-
'--stsv-Input__background-color--hover':
|
|
62
|
-
'--stsv-Input__border-color--hover':
|
|
63
|
-
'--stsv-Input__color--hover':
|
|
61
|
+
'--stsv-Input__background-color--hover': neutralColors.neutral100,
|
|
62
|
+
'--stsv-Input__border-color--hover': neutralColors.neutral45,
|
|
63
|
+
'--stsv-Input__color--hover': neutralColors.neutral15,
|
|
64
64
|
// focus
|
|
65
|
-
'--stsv-Input__background-color--focus':
|
|
66
|
-
'--stsv-Input__border-color--focus':
|
|
67
|
-
'--stsv-Input__color--focus':
|
|
65
|
+
'--stsv-Input__background-color--focus': neutralColors.neutral100,
|
|
66
|
+
'--stsv-Input__border-color--focus': neutralColors.neutral15,
|
|
67
|
+
'--stsv-Input__color--focus': neutralColors.neutral15,
|
|
68
68
|
// selected
|
|
69
|
-
'--stsv-Input__background-color--selected':
|
|
70
|
-
'--stsv-Input__border-color--selected':
|
|
71
|
-
'--stsv-Input__color--selected':
|
|
69
|
+
'--stsv-Input__background-color--selected': neutralColors.neutral92,
|
|
70
|
+
'--stsv-Input__border-color--selected': neutralColors.neutral30,
|
|
71
|
+
'--stsv-Input__color--selected': neutralColors.neutral15,
|
|
72
72
|
// ----- Display ----- //
|
|
73
|
-
'--stsv-Display__background-color':
|
|
74
|
-
'--stsv-Display__border-color':
|
|
75
|
-
'--stsv-Display__color':
|
|
76
|
-
'--stsv-Display__color--subtle':
|
|
77
|
-
'--stsv-Display__color--faint':
|
|
78
|
-
'--stsv-Display__color--disabled':
|
|
79
|
-
'--stsv-Info__background-color':
|
|
80
|
-
'--stsv-Info__border-color':
|
|
81
|
-
'--stsv-Info__color':
|
|
82
|
-
'--stsv-Success__background-color':
|
|
83
|
-
'--stsv-Success__border-color':
|
|
84
|
-
'--stsv-Success__color':
|
|
85
|
-
'--stsv-Warning__background-color':
|
|
86
|
-
'--stsv-Warning__border-color':
|
|
87
|
-
'--stsv-Warning__color':
|
|
88
|
-
'--stsv-Error__background-color':
|
|
89
|
-
'--stsv-Error__border-color':
|
|
90
|
-
'--stsv-Error__color':
|
|
73
|
+
'--stsv-Display__background-color': neutralColors.neutral92,
|
|
74
|
+
'--stsv-Display__border-color': neutralColors.neutral30,
|
|
75
|
+
'--stsv-Display__color': neutralColors.neutral15,
|
|
76
|
+
'--stsv-Display__color--subtle': neutralColors.neutral45,
|
|
77
|
+
'--stsv-Display__color--faint': neutralColors.neutral85,
|
|
78
|
+
'--stsv-Display__color--disabled': neutralColors.neutral85,
|
|
79
|
+
'--stsv-Info__background-color': lightStatusColors.info.backgroundColor,
|
|
80
|
+
'--stsv-Info__border-color': lightStatusColors.info.borderColor,
|
|
81
|
+
'--stsv-Info__color': lightStatusColors.info.color,
|
|
82
|
+
'--stsv-Success__background-color': lightStatusColors.success.backgroundColor,
|
|
83
|
+
'--stsv-Success__border-color': lightStatusColors.success.borderColor,
|
|
84
|
+
'--stsv-Success__color': lightStatusColors.success.color,
|
|
85
|
+
'--stsv-Warning__background-color': lightStatusColors.warning.backgroundColor,
|
|
86
|
+
'--stsv-Warning__border-color': lightStatusColors.warning.borderColor,
|
|
87
|
+
'--stsv-Warning__color': lightStatusColors.warning.color,
|
|
88
|
+
'--stsv-Error__background-color': lightStatusColors.error.backgroundColor,
|
|
89
|
+
'--stsv-Error__border-color': lightStatusColors.error.borderColor,
|
|
90
|
+
'--stsv-Error__color': lightStatusColors.error.color
|
|
91
91
|
};
|