@celar-ui/svelte 0.3.3 → 1.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/buttons/styles/base_button.scss +3 -7
- package/dist/buttons/styles/elevated_button.scss +9 -14
- package/dist/buttons/styles/filled_button.scss +5 -12
- package/dist/buttons/styles/icon_button.scss +8 -9
- package/dist/buttons/styles/outlined_button.scss +9 -12
- package/dist/buttons/styles/text_button.scss +8 -9
- package/dist/containment/Breadcrumb.svelte +3 -3
- package/dist/containment/styles/avatar.scss +1 -1
- package/dist/containment/styles/card.scss +3 -3
- package/dist/inputs/Checkbox.svelte +13 -4
- package/dist/inputs/ColorInput.svelte +1 -1
- package/dist/inputs/FileInput.svelte +1 -1
- package/dist/inputs/RadioItem.svelte +9 -5
- package/dist/inputs/Slider.svelte +9 -9
- package/dist/inputs/Switch.svelte +12 -8
- package/dist/inputs/TextInput.svelte +12 -13
- package/dist/misc/DuckSpinner.svelte +1 -1
- package/dist/misc/LinearProgressIndicator.svelte +2 -2
- package/dist/navigation/AppBar.svelte +1 -1
- package/dist/navigation/NavigationBar.svelte +1 -1
- package/dist/navigation/NavigationBarButton.svelte +5 -5
- package/dist/navigation/NavigationDrawer.svelte +5 -5
- package/dist/overlay/styles/command.scss +13 -11
- package/dist/overlay/styles/dialog.scss +4 -4
- package/dist/utils.d.ts +1 -0
- package/dist/utils.js +19 -0
- package/package.json +10 -3
- package/src/styles/colors.scss +28 -63
- package/src/styles/scheme.scss +80 -0
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
padding: 0;
|
|
6
6
|
margin: 0;
|
|
7
7
|
transition-duration: var(--transition-dur);
|
|
8
|
-
transition-
|
|
8
|
+
transition-timing-function: ease-in;
|
|
9
9
|
cursor: pointer;
|
|
10
10
|
border: none;
|
|
11
11
|
width: fit-content;
|
|
@@ -15,15 +15,11 @@
|
|
|
15
15
|
user-select: none;
|
|
16
16
|
text-decoration: none;
|
|
17
17
|
-webkit-tap-highlight-color: transparent;
|
|
18
|
-
color: inherit;
|
|
19
|
-
|
|
20
|
-
&:not(:disabled):active {
|
|
21
|
-
top: 1px;
|
|
22
|
-
}
|
|
23
18
|
|
|
24
19
|
&:not([data-active='true']):disabled,
|
|
25
20
|
&:not([data-active='true'])[aria-disabled='true'] {
|
|
26
|
-
opacity: 0.
|
|
21
|
+
opacity: 0.6;
|
|
22
|
+
filter: grayscale(100%);
|
|
27
23
|
}
|
|
28
24
|
|
|
29
25
|
&:disabled,
|
|
@@ -1,25 +1,20 @@
|
|
|
1
1
|
[data-button-elevated] {
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
transition-property: background-color, box-shadow, opacity, color;
|
|
7
|
-
box-shadow: 0 2px 2px var(--color-shadow);
|
|
8
|
-
background-color: var(--color-primary--lighter);
|
|
2
|
+
transition-property: box-shadow, opacity, filter, background-color;
|
|
3
|
+
box-shadow: 0 1px 1px var(--color-shadow--md);
|
|
4
|
+
background-color: var(--color-primaryContainer);
|
|
5
|
+
color: var(--color-onPrimaryContainer);
|
|
9
6
|
|
|
10
7
|
&:not(:disabled, [data-active='true']):hover {
|
|
11
|
-
box-shadow: 0
|
|
12
|
-
|
|
13
|
-
color: var(--color-hover) !important;
|
|
8
|
+
box-shadow: 0 3px 4px var(--color-shadow--strong);
|
|
9
|
+
filter: brightness(1.05);
|
|
14
10
|
}
|
|
15
11
|
|
|
16
12
|
&:not(:disabled):active {
|
|
17
|
-
box-shadow: 0
|
|
13
|
+
box-shadow: 0 1px 1px var(--color-shadow--strong);
|
|
14
|
+
filter: brightness(1);
|
|
18
15
|
}
|
|
19
16
|
|
|
20
17
|
&[data-active='true'] {
|
|
21
|
-
|
|
22
|
-
background-color: var(--color-alt);
|
|
23
|
-
color: var(--color-active) !important;
|
|
18
|
+
background-color: var(--color-inversePrimary);
|
|
24
19
|
}
|
|
25
20
|
}
|
|
@@ -1,24 +1,17 @@
|
|
|
1
1
|
[data-button-filled] {
|
|
2
|
-
|
|
3
|
-
--color-active: var(--color-bg);
|
|
4
|
-
|
|
5
|
-
transition-duration: var(--transition-dur);
|
|
6
|
-
transition-property: background-color, box-shadow, opacity, color;
|
|
2
|
+
transition-property: opacity, filter;
|
|
7
3
|
background-color: var(--color-primary);
|
|
4
|
+
color: var(--color-onPrimary);
|
|
8
5
|
|
|
9
6
|
&:not(:disabled, [data-active='true']):hover {
|
|
10
|
-
|
|
11
|
-
box-shadow: 0 2px 4px var(--color-shadow--strong);
|
|
12
|
-
color: var(--color-hover) !important;
|
|
7
|
+
filter: brightness(1.2);
|
|
13
8
|
}
|
|
14
9
|
|
|
15
10
|
&:not(:disabled):active {
|
|
16
|
-
|
|
11
|
+
filter: brightness(1);
|
|
17
12
|
}
|
|
18
13
|
|
|
19
14
|
&[data-active='true'] {
|
|
20
|
-
|
|
21
|
-
background-color: var(--color-alt--darker);
|
|
22
|
-
color: var(--color-active) !important;
|
|
15
|
+
filter: brightness(1.3);
|
|
23
16
|
}
|
|
24
17
|
}
|
|
@@ -1,13 +1,10 @@
|
|
|
1
1
|
[data-button-icon] {
|
|
2
|
-
--color-hover: var(--color-text);
|
|
3
|
-
--color-active: var(--color-text);
|
|
4
|
-
|
|
5
2
|
flex-grow: 0;
|
|
6
3
|
flex-shrink: 0;
|
|
7
|
-
transition-
|
|
8
|
-
transition-property: background-color, opacity, color;
|
|
4
|
+
transition-property: background-color, opacity, filter;
|
|
9
5
|
border-radius: 50%;
|
|
10
6
|
background-color: transparent;
|
|
7
|
+
color: var(--color-onPrimaryContainer);
|
|
11
8
|
padding: var(--gap--half);
|
|
12
9
|
aspect-ratio: 1/1;
|
|
13
10
|
line-height: 1;
|
|
@@ -28,12 +25,14 @@
|
|
|
28
25
|
}
|
|
29
26
|
|
|
30
27
|
&:not(:disabled, [data-active='true']):hover {
|
|
31
|
-
background-color: var(--color-
|
|
32
|
-
|
|
28
|
+
background-color: var(--color-primaryContainer);
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
&:not(:disabled):active {
|
|
32
|
+
filter: brightness(0.95);
|
|
33
33
|
}
|
|
34
34
|
|
|
35
35
|
&[data-active='true'] {
|
|
36
|
-
background-color: var(--color-
|
|
37
|
-
color: var(--color-active) !important;
|
|
36
|
+
background-color: var(--color-inversePrimary);
|
|
38
37
|
}
|
|
39
38
|
}
|
|
@@ -1,21 +1,18 @@
|
|
|
1
1
|
[data-button-outlined] {
|
|
2
|
-
|
|
3
|
-
--color-active: var(--color-text);
|
|
4
|
-
|
|
5
|
-
transition-duration: var(--transition-dur);
|
|
6
|
-
transition-property: background-color, border-color, opacity, color;
|
|
2
|
+
transition-property: background-color, opacity, filter;
|
|
7
3
|
background-color: transparent;
|
|
8
|
-
|
|
4
|
+
color: var(--color-onPrimaryContainer);
|
|
5
|
+
border: 1px solid var(--color-onPrimaryContainer);
|
|
9
6
|
|
|
10
7
|
&:not(:disabled, [data-active='true']):hover {
|
|
11
|
-
background-color: var(--color-
|
|
12
|
-
|
|
13
|
-
|
|
8
|
+
background-color: var(--color-primaryContainer);
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
&:not(:disabled):active {
|
|
12
|
+
filter: brightness(0.95);
|
|
14
13
|
}
|
|
15
14
|
|
|
16
15
|
&[data-active='true'] {
|
|
17
|
-
background-color: var(--color-
|
|
18
|
-
border-color: var(--color-primary);
|
|
19
|
-
color: var(--color-active) !important;
|
|
16
|
+
background-color: var(--color-inversePrimary);
|
|
20
17
|
}
|
|
21
18
|
}
|
|
@@ -1,18 +1,17 @@
|
|
|
1
1
|
[data-button-text] {
|
|
2
|
-
|
|
3
|
-
--color-active: var(--color-text);
|
|
4
|
-
|
|
5
|
-
transition-duration: var(--transition-dur);
|
|
6
|
-
transition-property: background-color, opacity, color;
|
|
2
|
+
transition-property: background-color, opacity, filter;
|
|
7
3
|
background-color: transparent;
|
|
4
|
+
color: var(--color-onPrimaryContainer);
|
|
8
5
|
|
|
9
6
|
&:not(:disabled, [data-active='true']):hover {
|
|
10
|
-
background-color: var(--color-
|
|
11
|
-
|
|
7
|
+
background-color: var(--color-primaryContainer);
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
&:not(:disabled):active {
|
|
11
|
+
filter: brightness(0.95);
|
|
12
12
|
}
|
|
13
13
|
|
|
14
14
|
&[data-active='true'] {
|
|
15
|
-
background-color: var(--color-
|
|
16
|
-
color: var(--color-active) !important;
|
|
15
|
+
background-color: var(--color-inversePrimary);
|
|
17
16
|
}
|
|
18
17
|
}
|
|
@@ -20,15 +20,15 @@
|
|
|
20
20
|
:global([data-breadcrumb] > a) {
|
|
21
21
|
padding: 0;
|
|
22
22
|
margin: 0;
|
|
23
|
-
color: var(--color-
|
|
23
|
+
color: var(--color-onInfo);
|
|
24
24
|
text-decoration: none;
|
|
25
25
|
}
|
|
26
26
|
:global([data-breadcrumb] > a):not(:last-child)::after {
|
|
27
27
|
content: "/";
|
|
28
|
-
color: var(--color-
|
|
28
|
+
color: var(--color-onInfo);
|
|
29
29
|
padding: 0 var(--gap--half);
|
|
30
30
|
}
|
|
31
31
|
:global([data-breadcrumb] > a):last-child {
|
|
32
32
|
pointer-events: none;
|
|
33
|
-
color: var(--color-primary
|
|
33
|
+
color: var(--color-primary);
|
|
34
34
|
}</style>
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
[data-card] {
|
|
2
|
-
box-shadow: 0 var(--gap--
|
|
3
|
-
background-color: var(--color-
|
|
4
|
-
}
|
|
2
|
+
box-shadow: 0 var(--gap--xs) var(--gap--sm) var(--color-shadow--soft);
|
|
3
|
+
background-color: var(--color-surface);
|
|
4
|
+
}
|
|
@@ -60,21 +60,26 @@
|
|
|
60
60
|
display: flex;
|
|
61
61
|
justify-content: flex-start;
|
|
62
62
|
align-items: center;
|
|
63
|
+
transition-duration: var(--transition-dur);
|
|
63
64
|
transition-property: background-color;
|
|
65
|
+
transition-timing-function: ease-in;
|
|
64
66
|
border-radius: var(--radius--half);
|
|
65
67
|
padding: var(--gap--sm) 0;
|
|
66
68
|
padding-right: var(--gap);
|
|
67
69
|
width: 100%;
|
|
70
|
+
-webkit-user-select: none;
|
|
71
|
+
-moz-user-select: none;
|
|
72
|
+
user-select: none;
|
|
68
73
|
}
|
|
69
74
|
[data-checkbox]:hover {
|
|
70
|
-
background-color: var(--color-
|
|
75
|
+
background-color: var(--color-primaryContainer);
|
|
71
76
|
}
|
|
72
77
|
[data-checkbox] [data-checkbox-icon] {
|
|
73
78
|
display: flex;
|
|
74
79
|
flex-shrink: 0;
|
|
75
80
|
justify-content: center;
|
|
76
81
|
align-items: center;
|
|
77
|
-
width:
|
|
82
|
+
width: 56px;
|
|
78
83
|
}
|
|
79
84
|
|
|
80
85
|
:global([data-checkbox-root]) {
|
|
@@ -84,11 +89,15 @@
|
|
|
84
89
|
height: 24px;
|
|
85
90
|
width: 32px;
|
|
86
91
|
background-color: transparent;
|
|
92
|
+
color: var(--color-onPrimary);
|
|
87
93
|
outline: none;
|
|
88
|
-
border: 1px solid var(--color-primary
|
|
94
|
+
border: 1px solid var(--color-primary);
|
|
89
95
|
border-radius: var(--radius--half);
|
|
96
|
+
transition-duration: var(--transition-dur);
|
|
97
|
+
transition-property: background-color, color;
|
|
98
|
+
transition-timing-function: ease-in;
|
|
90
99
|
}
|
|
91
100
|
|
|
92
|
-
:global([data-checkbox-root][data-state="
|
|
101
|
+
:global([data-checkbox-root]:not([data-state="unchecked"])) {
|
|
93
102
|
background-color: var(--color-primary);
|
|
94
103
|
}</style>
|
|
@@ -22,30 +22,34 @@
|
|
|
22
22
|
align-items: center;
|
|
23
23
|
transition-property: background-color;
|
|
24
24
|
transition-duration: var(--transition-dur);
|
|
25
|
+
transition-timing-function: ease-in;
|
|
25
26
|
border-radius: var(--radius--half);
|
|
26
27
|
padding: var(--gap--sm) 0;
|
|
27
28
|
padding-right: var(--gap);
|
|
28
29
|
width: 100%;
|
|
30
|
+
-webkit-user-select: none;
|
|
31
|
+
-moz-user-select: none;
|
|
32
|
+
user-select: none;
|
|
29
33
|
}
|
|
30
34
|
[data-radio-item] [data-radio-item-icon] {
|
|
31
|
-
width:
|
|
35
|
+
width: 56px;
|
|
32
36
|
display: flex;
|
|
33
37
|
justify-content: center;
|
|
34
38
|
align-items: center;
|
|
35
39
|
}
|
|
36
40
|
[data-radio-item]:hover {
|
|
37
|
-
background-color: var(--color-
|
|
41
|
+
background-color: var(--color-primaryContainer);
|
|
38
42
|
}
|
|
39
43
|
|
|
40
44
|
:global([data-radio-group-item]) {
|
|
41
45
|
background-color: transparent;
|
|
42
|
-
outline: 1px solid var(--color-primary
|
|
43
|
-
border: 4px solid var(--color-
|
|
46
|
+
outline: 1px solid var(--color-primary);
|
|
47
|
+
border: 4px solid var(--color-surface);
|
|
44
48
|
width: 24px;
|
|
45
49
|
height: 24px;
|
|
46
50
|
border-radius: 50%;
|
|
47
51
|
}
|
|
48
52
|
|
|
49
53
|
:global([data-radio-group-item][data-state="checked"]) {
|
|
50
|
-
background-color: var(--color-primary
|
|
54
|
+
background-color: var(--color-primary);
|
|
51
55
|
}</style>
|
|
@@ -37,18 +37,18 @@
|
|
|
37
37
|
box-sizing: border-box;
|
|
38
38
|
border: none;
|
|
39
39
|
border-radius: var(--radius);
|
|
40
|
-
background: var(--color-
|
|
40
|
+
background: var(--color-surfaceDim);
|
|
41
41
|
width: 100%;
|
|
42
42
|
height: var(--gap--half);
|
|
43
43
|
}
|
|
44
44
|
[data-slider] > input::-webkit-slider-runnable-track {
|
|
45
|
-
background: linear-gradient(var(--color-primary
|
|
45
|
+
background: linear-gradient(var(--color-primary), var(--color-primary)) 0/var(--sx) 100% no-repeat var(--color-surfaceDim);
|
|
46
46
|
}
|
|
47
47
|
[data-slider] > input::-moz-range-track {
|
|
48
48
|
box-sizing: border-box;
|
|
49
49
|
border: none;
|
|
50
50
|
border-radius: var(--radius);
|
|
51
|
-
background: var(--color-
|
|
51
|
+
background: var(--color-surfaceDim);
|
|
52
52
|
width: 100%;
|
|
53
53
|
height: var(--gap--half);
|
|
54
54
|
}
|
|
@@ -56,18 +56,18 @@
|
|
|
56
56
|
box-sizing: border-box;
|
|
57
57
|
border: none;
|
|
58
58
|
border-radius: var(--radius);
|
|
59
|
-
background: var(--color-
|
|
59
|
+
background: var(--color-surfaceDim);
|
|
60
60
|
width: 100%;
|
|
61
61
|
height: var(--gap--half);
|
|
62
62
|
}
|
|
63
63
|
[data-slider] > input::-moz-range-progress {
|
|
64
64
|
border-radius: var(--radius);
|
|
65
|
-
background: var(--color-primary
|
|
65
|
+
background: var(--color-primary);
|
|
66
66
|
height: var(--gap--half);
|
|
67
67
|
}
|
|
68
68
|
[data-slider] > input::-ms-fill-lower {
|
|
69
69
|
border-radius: var(--radius);
|
|
70
|
-
background: var(--color-primary
|
|
70
|
+
background: var(--color-primary);
|
|
71
71
|
height: var(--gap--half);
|
|
72
72
|
}
|
|
73
73
|
[data-slider] > input::-webkit-slider-thumb {
|
|
@@ -75,7 +75,7 @@
|
|
|
75
75
|
box-sizing: border-box;
|
|
76
76
|
border: none;
|
|
77
77
|
border-radius: 50%;
|
|
78
|
-
background: var(--color-primary
|
|
78
|
+
background: var(--color-primary);
|
|
79
79
|
width: 24px;
|
|
80
80
|
height: 24px;
|
|
81
81
|
}
|
|
@@ -83,7 +83,7 @@
|
|
|
83
83
|
box-sizing: border-box;
|
|
84
84
|
border: none;
|
|
85
85
|
border-radius: 50%;
|
|
86
|
-
background: var(--color-primary
|
|
86
|
+
background: var(--color-primary);
|
|
87
87
|
width: 24px;
|
|
88
88
|
height: 24px;
|
|
89
89
|
}
|
|
@@ -92,7 +92,7 @@
|
|
|
92
92
|
box-sizing: border-box;
|
|
93
93
|
border: none;
|
|
94
94
|
border-radius: 50%;
|
|
95
|
-
background: var(--color-primary
|
|
95
|
+
background: var(--color-primary);
|
|
96
96
|
width: 24px;
|
|
97
97
|
height: 24px;
|
|
98
98
|
}
|
|
@@ -25,13 +25,17 @@
|
|
|
25
25
|
align-items: center;
|
|
26
26
|
transition-property: background-color;
|
|
27
27
|
transition-duration: var(--transition-dur);
|
|
28
|
+
transition-timing-function: ease-in;
|
|
28
29
|
border-radius: var(--radius--half);
|
|
29
30
|
padding: var(--gap--sm) 0;
|
|
30
31
|
padding-right: var(--gap);
|
|
31
32
|
width: 100%;
|
|
33
|
+
-webkit-user-select: none;
|
|
34
|
+
-moz-user-select: none;
|
|
35
|
+
user-select: none;
|
|
32
36
|
}
|
|
33
37
|
[data-switch]:hover {
|
|
34
|
-
background-color: var(--color-
|
|
38
|
+
background-color: var(--color-primaryContainer);
|
|
35
39
|
}
|
|
36
40
|
|
|
37
41
|
:global([data-switch-root]) {
|
|
@@ -40,12 +44,13 @@
|
|
|
40
44
|
width: 38px;
|
|
41
45
|
height: 24px;
|
|
42
46
|
border-radius: 24px;
|
|
43
|
-
background-color:
|
|
44
|
-
outline: 1px solid var(--color-primary
|
|
47
|
+
background-color: transparent;
|
|
48
|
+
outline: 1px solid var(--color-primary);
|
|
45
49
|
border: none;
|
|
46
50
|
transition-property: background-color;
|
|
47
51
|
transition-duration: var(--transition-dur);
|
|
48
|
-
|
|
52
|
+
transition-timing-function: ease-out;
|
|
53
|
+
margin: 0 9px;
|
|
49
54
|
}
|
|
50
55
|
|
|
51
56
|
:global([data-switch-thumb]) {
|
|
@@ -57,17 +62,16 @@
|
|
|
57
62
|
height: 20px;
|
|
58
63
|
border-radius: 20px;
|
|
59
64
|
box-sizing: border-box;
|
|
60
|
-
background-color: var(--color-primary
|
|
65
|
+
background-color: var(--color-primary);
|
|
61
66
|
transition-property: background-color, transform, outline-color;
|
|
62
67
|
transition-duration: var(--transition-dur);
|
|
63
68
|
}
|
|
64
69
|
|
|
65
70
|
:global([data-switch-root][data-state="checked"]) {
|
|
66
|
-
background-color: var(--color-primary
|
|
67
|
-
outline-color: var(--color-primary--darker);
|
|
71
|
+
background-color: var(--color-primary);
|
|
68
72
|
}
|
|
69
73
|
|
|
70
74
|
:global([data-switch-thumb][data-state="checked"]) {
|
|
71
|
-
background-color: var(--color-
|
|
75
|
+
background-color: var(--color-primaryContainer);
|
|
72
76
|
transform: translateX(14px);
|
|
73
77
|
}</style>
|
|
@@ -31,6 +31,7 @@
|
|
|
31
31
|
box-sizing: border-box;
|
|
32
32
|
transition-duration: var(--transition-dur);
|
|
33
33
|
transition-property: border-color;
|
|
34
|
+
transition-timing-function: ease-in-out;
|
|
34
35
|
border: 1px solid var(--color-border);
|
|
35
36
|
border-radius: var(--radius);
|
|
36
37
|
background-color: transparent;
|
|
@@ -44,31 +45,28 @@
|
|
|
44
45
|
[data-text-input] input:focus {
|
|
45
46
|
outline: none;
|
|
46
47
|
border: 1px solid var(--color-primary);
|
|
48
|
+
caret-color: var(--color-primary);
|
|
47
49
|
}
|
|
48
50
|
[data-text-input] input:focus + [data-text-input-icon] {
|
|
49
|
-
color: var(--color-primary
|
|
51
|
+
color: var(--color-primary);
|
|
50
52
|
}
|
|
51
53
|
[data-text-input] input:is(:-moz-placeholder) ~ [data-text-input-placeholder] {
|
|
52
|
-
|
|
53
|
-
right: calc(100% - 48px);
|
|
54
|
-
translate: 100%;
|
|
54
|
+
transform: translateY(50%);
|
|
55
55
|
visibility: hidden;
|
|
56
56
|
opacity: 0;
|
|
57
57
|
}
|
|
58
58
|
[data-text-input] input:is(:placeholder-shown) ~ [data-text-input-placeholder] {
|
|
59
|
-
|
|
60
|
-
right: calc(100% - 48px);
|
|
61
|
-
translate: 100%;
|
|
59
|
+
transform: translateY(50%);
|
|
62
60
|
visibility: hidden;
|
|
63
61
|
opacity: 0;
|
|
64
62
|
}
|
|
65
63
|
[data-text-input] input::-moz-placeholder {
|
|
66
64
|
opacity: 1;
|
|
67
|
-
color: rgba(var(--color-
|
|
65
|
+
color: rgba(var(--color-onSurface--rgb), 0.7);
|
|
68
66
|
}
|
|
69
67
|
[data-text-input] input::placeholder {
|
|
70
68
|
opacity: 1;
|
|
71
|
-
color: rgba(var(--color-
|
|
69
|
+
color: rgba(var(--color-onSurface--rgb), 0.7);
|
|
72
70
|
}
|
|
73
71
|
[data-text-input] [data-text-input-icon] {
|
|
74
72
|
display: flex;
|
|
@@ -79,6 +77,7 @@
|
|
|
79
77
|
align-items: center;
|
|
80
78
|
transition-duration: var(--transition-dur);
|
|
81
79
|
transition-property: color;
|
|
80
|
+
transition-timing-function: ease-in-out;
|
|
82
81
|
width: 48px;
|
|
83
82
|
height: 100%;
|
|
84
83
|
pointer-events: none;
|
|
@@ -86,13 +85,13 @@
|
|
|
86
85
|
[data-text-input] [data-text-input-placeholder] {
|
|
87
86
|
position: absolute;
|
|
88
87
|
transition-duration: var(--transition-dur);
|
|
89
|
-
transition-property: visibility, opacity,
|
|
88
|
+
transition-property: visibility, opacity, transform;
|
|
90
89
|
pointer-events: none;
|
|
91
|
-
color: rgba(var(--color-
|
|
92
|
-
font-size:
|
|
90
|
+
color: rgba(var(--color-onSurface--rgb), 0.7);
|
|
91
|
+
font-size: 0.8em;
|
|
93
92
|
top: 0;
|
|
94
93
|
right: var(--gap);
|
|
95
|
-
|
|
94
|
+
transform: translateY(0);
|
|
96
95
|
visibility: visible;
|
|
97
96
|
opacity: 1;
|
|
98
97
|
}</style>
|
|
@@ -12,7 +12,7 @@
|
|
|
12
12
|
--anim-duration: 1.7s;
|
|
13
13
|
display: block;
|
|
14
14
|
position: relative;
|
|
15
|
-
background-color: var(--color-
|
|
15
|
+
background-color: var(--color-surfaceDim);
|
|
16
16
|
width: 100%;
|
|
17
17
|
height: var(--line-height);
|
|
18
18
|
overflow: hidden;
|
|
@@ -22,7 +22,7 @@
|
|
|
22
22
|
top: 0;
|
|
23
23
|
left: 0;
|
|
24
24
|
animation: linear-progress-animation var(--anim-duration) linear infinite;
|
|
25
|
-
background-color: var(--color-primary
|
|
25
|
+
background-color: var(--color-primary);
|
|
26
26
|
width: 0;
|
|
27
27
|
height: 100%;
|
|
28
28
|
}
|
|
@@ -36,7 +36,7 @@
|
|
|
36
36
|
gap: var(--gap--half);
|
|
37
37
|
-webkit-backdrop-filter: blur(var(--blur-length--x2));
|
|
38
38
|
backdrop-filter: blur(var(--blur-length--x2));
|
|
39
|
-
background-color: rgba(var(--color-
|
|
39
|
+
background-color: rgba(var(--color-background--rgb), 0.88);
|
|
40
40
|
padding: 0 var(--gap--half);
|
|
41
41
|
min-height: var(--gap--x3);
|
|
42
42
|
}
|
|
@@ -28,7 +28,7 @@
|
|
|
28
28
|
justify-content: space-evenly;
|
|
29
29
|
border-top-right-radius: var(--radius);
|
|
30
30
|
border-top-left-radius: var(--radius);
|
|
31
|
-
background-color: var(--color-
|
|
31
|
+
background-color: var(--color-surfaceContainerLow);
|
|
32
32
|
width: 100%;
|
|
33
33
|
height: auto;
|
|
34
34
|
}
|
|
@@ -33,7 +33,7 @@
|
|
|
33
33
|
background-color: transparent;
|
|
34
34
|
padding: var(--gap--half) 0;
|
|
35
35
|
width: 100%;
|
|
36
|
-
color: var(--color-
|
|
36
|
+
color: var(--color-onSurface);
|
|
37
37
|
text-align: center;
|
|
38
38
|
font-size: 0.8rem;
|
|
39
39
|
text-decoration: none;
|
|
@@ -43,16 +43,16 @@
|
|
|
43
43
|
top: 0;
|
|
44
44
|
}
|
|
45
45
|
[data-navigation-bar-button]:hover > [data-navigation-bar-button-icon] {
|
|
46
|
-
background-color: var(--color-
|
|
46
|
+
background-color: var(--color-primaryContainer);
|
|
47
47
|
}
|
|
48
48
|
[data-navigation-bar-button][data-active=true] > [data-navigation-bar-button-icon] {
|
|
49
|
-
background-color: var(--color-
|
|
50
|
-
color: var(--color-primary--text);
|
|
49
|
+
background-color: var(--color-inversePrimary);
|
|
51
50
|
}
|
|
52
51
|
[data-navigation-bar-button] > [data-navigation-bar-button-icon] {
|
|
53
52
|
transition-duration: var(--transition-dur);
|
|
54
53
|
transition-property: color, background-color;
|
|
54
|
+
transition-timing-function: ease-in;
|
|
55
55
|
border-radius: var(--radius);
|
|
56
|
-
background-color:
|
|
56
|
+
background-color: transparent;
|
|
57
57
|
padding: var(--gap--xs) var(--gap);
|
|
58
58
|
}</style>
|
|
@@ -44,7 +44,7 @@
|
|
|
44
44
|
style:width
|
|
45
45
|
transition:fly={{
|
|
46
46
|
duration,
|
|
47
|
-
x: position === 'left' ? -
|
|
47
|
+
x: position === 'left' ? '-' + width : width,
|
|
48
48
|
opacity: 0
|
|
49
49
|
}}
|
|
50
50
|
aria-label="Navigation drawer"
|
|
@@ -88,7 +88,7 @@
|
|
|
88
88
|
height: 100%;
|
|
89
89
|
-webkit-backdrop-filter: blur(var(--blur-length));
|
|
90
90
|
backdrop-filter: blur(var(--blur-length));
|
|
91
|
-
background-color: var(--color-
|
|
91
|
+
background-color: rgba(var(--color-onBackground--rgb), 0.2);
|
|
92
92
|
z-index: 100;
|
|
93
93
|
}
|
|
94
94
|
|
|
@@ -99,10 +99,10 @@
|
|
|
99
99
|
top: 0;
|
|
100
100
|
z-index: 100;
|
|
101
101
|
flex-direction: column;
|
|
102
|
-
background-color: var(--color-
|
|
102
|
+
background-color: var(--color-surface);
|
|
103
103
|
height: 100dvh;
|
|
104
104
|
overflow-y: auto;
|
|
105
|
-
box-shadow: 0
|
|
105
|
+
box-shadow: 0 var(--gap--xs) var(--gap--half) var(--color-shadow--md);
|
|
106
106
|
max-width: 85%;
|
|
107
107
|
}
|
|
108
108
|
:global([data-navigation-drawer])[data-position=left] {
|
|
@@ -153,7 +153,7 @@
|
|
|
153
153
|
background-color: var(--color-border);
|
|
154
154
|
}
|
|
155
155
|
:global([data-navigation-drawer])::-webkit-scrollbar-thumb:hover {
|
|
156
|
-
background-color: var(--color-
|
|
156
|
+
background-color: var(--color-primaryContainer);
|
|
157
157
|
}
|
|
158
158
|
|
|
159
159
|
/* Focus management */
|
|
@@ -5,21 +5,21 @@
|
|
|
5
5
|
max-height: calc(75dvh - (var(--gap) * 2));
|
|
6
6
|
|
|
7
7
|
[data-command-input] {
|
|
8
|
-
background-color: var(--color-
|
|
8
|
+
background-color: var(--color-background);
|
|
9
9
|
border: 1px solid var(--color-border);
|
|
10
10
|
border-radius: var(--radius--half);
|
|
11
11
|
padding: var(--gap--half);
|
|
12
12
|
font-size: inherit;
|
|
13
13
|
font-family: inherit;
|
|
14
14
|
line-height: 1.5;
|
|
15
|
-
color: var(--color-
|
|
15
|
+
color: var(--color-onSurface);
|
|
16
16
|
outline: none;
|
|
17
17
|
transition: border-color var(--transition-dur) ease-in-out;
|
|
18
18
|
width: 100%;
|
|
19
19
|
box-sizing: border-box;
|
|
20
20
|
|
|
21
21
|
&::placeholder {
|
|
22
|
-
color: rgba(var(--color-
|
|
22
|
+
color: rgba(var(--color-onSurface--rgb), 0.6);
|
|
23
23
|
}
|
|
24
24
|
|
|
25
25
|
&:focus {
|
|
@@ -53,7 +53,7 @@
|
|
|
53
53
|
[data-command-group-heading] {
|
|
54
54
|
font-weight: 600;
|
|
55
55
|
font-size: 0.8em;
|
|
56
|
-
color: rgba(var(--color-
|
|
56
|
+
color: rgba(var(--color-onSurface--rgb), 0.6);
|
|
57
57
|
text-transform: uppercase;
|
|
58
58
|
letter-spacing: 0.05em;
|
|
59
59
|
margin-bottom: var(--gap--half);
|
|
@@ -74,7 +74,7 @@
|
|
|
74
74
|
border-radius: var(--radius--half);
|
|
75
75
|
cursor: pointer;
|
|
76
76
|
line-height: 1.5;
|
|
77
|
-
color: var(--color-
|
|
77
|
+
color: var(--color-onSurface);
|
|
78
78
|
background-color: transparent;
|
|
79
79
|
border: none;
|
|
80
80
|
text-align: left;
|
|
@@ -83,7 +83,8 @@
|
|
|
83
83
|
box-sizing: border-box;
|
|
84
84
|
|
|
85
85
|
&[data-selected] {
|
|
86
|
-
background-color:
|
|
86
|
+
background-color: var(--color-primaryContainer);
|
|
87
|
+
color: var(--color-onPrimaryContainer);
|
|
87
88
|
}
|
|
88
89
|
|
|
89
90
|
&[data-disabled] {
|
|
@@ -96,14 +97,15 @@
|
|
|
96
97
|
}
|
|
97
98
|
|
|
98
99
|
&:focus-visible {
|
|
99
|
-
background-color:
|
|
100
|
-
|
|
100
|
+
background-color: var(--color-primaryContainer);
|
|
101
|
+
color: var(--color-onPrimaryContainer);
|
|
102
|
+
box-shadow: 0 var(--gap--xs) var(--gap--sm) var(--color-shadow--md);
|
|
101
103
|
}
|
|
102
104
|
|
|
103
105
|
[data-command-item-shortcut] {
|
|
104
106
|
font-size: 0.9rem;
|
|
105
|
-
color:
|
|
106
|
-
background-color: var(--color-
|
|
107
|
+
color: var(--color-onSurface);
|
|
108
|
+
background-color: var(--color-surfaceDim);
|
|
107
109
|
padding: var(--gap--xs) var(--gap--sm);
|
|
108
110
|
border-radius: var(--radius--half);
|
|
109
111
|
border: 1px solid var(--color-border--strong);
|
|
@@ -113,7 +115,7 @@
|
|
|
113
115
|
}
|
|
114
116
|
|
|
115
117
|
[data-command-empty] {
|
|
116
|
-
color: rgba(var(--color-
|
|
118
|
+
color: rgba(var(--color-onSurface--rgb), 0.5);
|
|
117
119
|
text-align: center;
|
|
118
120
|
}
|
|
119
121
|
}
|
|
@@ -12,7 +12,7 @@ $body-max-h: calc($d-max-h - $header-h);
|
|
|
12
12
|
width: 100%;
|
|
13
13
|
height: 100%;
|
|
14
14
|
backdrop-filter: blur(var(--blur-length));
|
|
15
|
-
background-color: var(--color-
|
|
15
|
+
background-color: rgba(var(--color-onBackground--rgb), 0.1);
|
|
16
16
|
z-index: 100;
|
|
17
17
|
}
|
|
18
18
|
|
|
@@ -25,11 +25,11 @@ $body-max-h: calc($d-max-h - $header-h);
|
|
|
25
25
|
max-width: $d-max-w;
|
|
26
26
|
max-height: $d-max-h;
|
|
27
27
|
margin: $gap;
|
|
28
|
-
background-color: var(--color-
|
|
29
|
-
box-shadow: 0
|
|
28
|
+
background-color: var(--color-background);
|
|
29
|
+
box-shadow: 0 var(--gap--xs) var(--gap--half) var(--color-shadow--md);
|
|
30
30
|
border-radius: var(--radius);
|
|
31
31
|
overflow: hidden;
|
|
32
|
-
z-index:
|
|
32
|
+
z-index: 101;
|
|
33
33
|
|
|
34
34
|
&[data-xs='true'] {
|
|
35
35
|
max-width: min($d-max-w, var(--break--xs));
|
package/dist/utils.d.ts
CHANGED
package/dist/utils.js
CHANGED
|
@@ -2,5 +2,24 @@ export function applyPreferredColorScheme(scheme) {
|
|
|
2
2
|
if (scheme === 'auto') {
|
|
3
3
|
scheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
|
|
4
4
|
}
|
|
5
|
+
const enableAnimation = disableAnimation();
|
|
5
6
|
document.documentElement.setAttribute('data-theme', scheme);
|
|
7
|
+
// color-scheme tells browser how to render built-in elements like forms, scrollbars, etc.
|
|
8
|
+
// if color-scheme is null, this will remove the property
|
|
9
|
+
document.documentElement.style.setProperty('color-scheme', scheme);
|
|
10
|
+
enableAnimation();
|
|
11
|
+
}
|
|
12
|
+
// https://github.com/beynar/svelte-themes/blob/18427800b19a7f866f26770dc5bf2c42227e14e3/src/lib/helpers.ts#L14-L32
|
|
13
|
+
export function disableAnimation() {
|
|
14
|
+
const css = document.createElement('style');
|
|
15
|
+
css.appendChild(document.createTextNode(`*{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;-ms-transition:none!important;transition:none!important}`));
|
|
16
|
+
document.head.appendChild(css);
|
|
17
|
+
return () => {
|
|
18
|
+
// Force restyle
|
|
19
|
+
(() => window.getComputedStyle(document.body))();
|
|
20
|
+
// Wait for next tick before removing
|
|
21
|
+
setTimeout(() => {
|
|
22
|
+
document.head.removeChild(css);
|
|
23
|
+
}, 1);
|
|
24
|
+
};
|
|
6
25
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@celar-ui/svelte",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "1.0.0",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"author": {
|
|
6
6
|
"name": "cuikho210",
|
|
@@ -8,6 +8,9 @@
|
|
|
8
8
|
"url": "https://github.com/cuikho210"
|
|
9
9
|
},
|
|
10
10
|
"private": false,
|
|
11
|
+
"publishConfig": {
|
|
12
|
+
"access": "public"
|
|
13
|
+
},
|
|
11
14
|
"scripts": {
|
|
12
15
|
"dev": "vite dev",
|
|
13
16
|
"build": "vite build && npm run prepack",
|
|
@@ -18,7 +21,8 @@
|
|
|
18
21
|
"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
|
|
19
22
|
"format": "prettier --write .",
|
|
20
23
|
"lint": "prettier --check . && eslint .",
|
|
21
|
-
"npm-publish": "bun run build && npm publish --access=public"
|
|
24
|
+
"npm-publish": "bun run build && export $(grep -v '^#' ../../.env | xargs) && npm publish --access=public",
|
|
25
|
+
"gen-colors": "bun run ./scripts/gen-colors.ts"
|
|
22
26
|
},
|
|
23
27
|
"files": [
|
|
24
28
|
"dist",
|
|
@@ -54,6 +58,7 @@
|
|
|
54
58
|
"@sveltejs/kit": "^2.20.5",
|
|
55
59
|
"@sveltejs/package": "^2.3.10",
|
|
56
60
|
"@sveltejs/vite-plugin-svelte": "^5.0.3",
|
|
61
|
+
"@types/bun": "^1.2.20",
|
|
57
62
|
"autoprefixer": "^10.4.21",
|
|
58
63
|
"bits-ui": "^2.8.8",
|
|
59
64
|
"csstype": "^3.1.3",
|
|
@@ -61,6 +66,7 @@
|
|
|
61
66
|
"eslint-config-prettier": "^10.1.2",
|
|
62
67
|
"eslint-plugin-svelte": "^3.5.1",
|
|
63
68
|
"globals": "^16.0.0",
|
|
69
|
+
"material-dynamic-colors": "^1.1.2",
|
|
64
70
|
"prettier": "^3.5.3",
|
|
65
71
|
"prettier-plugin-svelte": "^3.3.3",
|
|
66
72
|
"publint": "^0.3.11",
|
|
@@ -74,5 +80,6 @@
|
|
|
74
80
|
},
|
|
75
81
|
"keywords": [
|
|
76
82
|
"svelte"
|
|
77
|
-
]
|
|
83
|
+
],
|
|
84
|
+
"packageManager": "bun@1.1.0"
|
|
78
85
|
}
|
package/src/styles/colors.scss
CHANGED
|
@@ -1,78 +1,43 @@
|
|
|
1
1
|
@use './utils.scss';
|
|
2
2
|
@use './config.scss';
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
color-
|
|
7
|
-
color-
|
|
8
|
-
color-
|
|
9
|
-
color-
|
|
10
|
-
color-
|
|
11
|
-
|
|
12
|
-
color-alt--text: #481523,
|
|
13
|
-
color-alt--darker: #8f1538,
|
|
14
|
-
color-alt--dark: #c48591,
|
|
15
|
-
color-alt: #f1afbb,
|
|
16
|
-
color-alt--light: #ffe3ec,
|
|
17
|
-
color-alt--lighter: #fff3f7,
|
|
18
|
-
|
|
19
|
-
color-text: #000000,
|
|
20
|
-
color-text-info: #1a3baa,
|
|
21
|
-
color-text-success: #438d75,
|
|
22
|
-
color-text-warning: #c18500,
|
|
23
|
-
color-text-danger: #98000b,
|
|
24
|
-
|
|
25
|
-
color-bg: #ffffff,
|
|
26
|
-
color-bg-info: #faf8ff,
|
|
27
|
-
color-bg-success: #e8fef5,
|
|
28
|
-
color-bg-warning: #fff8ec,
|
|
29
|
-
color-bg-danger: #fff4ef
|
|
3
|
+
@use './scheme.scss';
|
|
4
|
+
|
|
5
|
+
$ext-colors-light: (
|
|
6
|
+
color-info: #e2ffff,
|
|
7
|
+
color-onInfo: #1a3baa,
|
|
8
|
+
color-success: #e8fef5,
|
|
9
|
+
color-onSuccess: #2b5f50,
|
|
10
|
+
color-warning: #fff8ec,
|
|
11
|
+
color-onWarning: #8a5a00
|
|
30
12
|
) !default;
|
|
31
13
|
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
color-
|
|
35
|
-
color-
|
|
36
|
-
color-
|
|
37
|
-
color-
|
|
38
|
-
color-
|
|
39
|
-
color-primary--lighter: #570000,
|
|
40
|
-
|
|
41
|
-
color-alt--text: #fff3f7,
|
|
42
|
-
color-alt--darker: #ffe3ec,
|
|
43
|
-
color-alt--dark: #f1afbb,
|
|
44
|
-
color-alt: #c48591,
|
|
45
|
-
color-alt--light: #8f1538,
|
|
46
|
-
color-alt--lighter: #481523,
|
|
47
|
-
|
|
48
|
-
color-text: #efefef,
|
|
49
|
-
color-text-info: #9191a3,
|
|
50
|
-
color-text-success: #7ab8a3,
|
|
51
|
-
color-text-warning: #bfa060,
|
|
52
|
-
color-text-danger: #b36a6a,
|
|
53
|
-
|
|
54
|
-
color-bg: #1a1a1a,
|
|
55
|
-
color-bg-info: #101a3b,
|
|
56
|
-
color-bg-success: #184d3a,
|
|
57
|
-
color-bg-warning: #4a3700,
|
|
58
|
-
color-bg-danger: #3a0007
|
|
14
|
+
$ext-colors-dark: (
|
|
15
|
+
color-info: #101a3b,
|
|
16
|
+
color-onInfo: #008eff,
|
|
17
|
+
color-success: #184d3a,
|
|
18
|
+
color-onSuccess: #9bdac7,
|
|
19
|
+
color-warning: #4a3700,
|
|
20
|
+
color-onWarning: #bfa060
|
|
59
21
|
) !default;
|
|
60
22
|
|
|
61
23
|
$colors-misc: (
|
|
62
|
-
color-shadow--soft: rgba(var(
|
|
63
|
-
color-shadow--md: rgba(var(
|
|
64
|
-
color-shadow: rgba(var(
|
|
65
|
-
color-
|
|
66
|
-
color-border:
|
|
67
|
-
color-
|
|
68
|
-
color-wrapper: rgba(var(--color-text--rgb), 0.024)
|
|
24
|
+
color-shadow--soft: rgba(var(--#{config.$prefix}color-shadow--rgb), 0.1),
|
|
25
|
+
color-shadow--md: rgba(var(--#{config.$prefix}color-shadow--rgb), 0.15),
|
|
26
|
+
color-shadow--strong: rgba(var(--#{config.$prefix}color-shadow--rgb), 0.2),
|
|
27
|
+
color-border: rgba(var(--#{config.$prefix}color-outline--rgb), 0.8),
|
|
28
|
+
color-border--strong: var(--#{config.$prefix}color-outline),
|
|
29
|
+
color-wrapper: var(--#{config.$prefix}color-outline)
|
|
69
30
|
) !default;
|
|
70
31
|
|
|
71
32
|
:root {
|
|
72
|
-
@include utils.generate_colors(config.$prefix,
|
|
33
|
+
@include utils.generate_colors(config.$prefix, scheme.$scheme-light);
|
|
34
|
+
@include utils.generate_colors(config.$prefix, $ext-colors-light);
|
|
73
35
|
@include utils.add_prefix(config.$prefix, $colors-misc);
|
|
36
|
+
color-scheme: light;
|
|
74
37
|
}
|
|
75
38
|
|
|
76
39
|
:root[data-theme='dark'] {
|
|
77
|
-
@include utils.generate_colors(config.$prefix,
|
|
40
|
+
@include utils.generate_colors(config.$prefix, scheme.$scheme-dark);
|
|
41
|
+
@include utils.generate_colors(config.$prefix, $ext-colors-dark);
|
|
42
|
+
color-scheme: dark;
|
|
78
43
|
}
|
|
@@ -0,0 +1,80 @@
|
|
|
1
|
+
// Generated by gen-material-theme-scss.ts
|
|
2
|
+
// Source color: #ff907f
|
|
3
|
+
|
|
4
|
+
$scheme-light: (
|
|
5
|
+
color-primary: #9c4235,
|
|
6
|
+
color-onPrimary: #ffffff,
|
|
7
|
+
color-primaryContainer: #ffdad4,
|
|
8
|
+
color-onPrimaryContainer: #410000,
|
|
9
|
+
color-secondary: #775651,
|
|
10
|
+
color-onSecondary: #ffffff,
|
|
11
|
+
color-secondaryContainer: #ffdad4,
|
|
12
|
+
color-onSecondaryContainer: #2c1512,
|
|
13
|
+
color-tertiary: #705c2e,
|
|
14
|
+
color-onTertiary: #ffffff,
|
|
15
|
+
color-tertiaryContainer: #fbdfa6,
|
|
16
|
+
color-onTertiaryContainer: #251a00,
|
|
17
|
+
color-error: #ba1a1a,
|
|
18
|
+
color-onError: #ffffff,
|
|
19
|
+
color-errorContainer: #ffdad6,
|
|
20
|
+
color-onErrorContainer: #410002,
|
|
21
|
+
color-background: #fffbff,
|
|
22
|
+
color-onBackground: #201a19,
|
|
23
|
+
color-surface: #fff8f6,
|
|
24
|
+
color-onSurface: #201a19,
|
|
25
|
+
color-surfaceVariant: #f5ddda,
|
|
26
|
+
color-onSurfaceVariant: #534341,
|
|
27
|
+
color-outline: #857370,
|
|
28
|
+
color-outlineVariant: #d8c2be,
|
|
29
|
+
color-shadow: #000000,
|
|
30
|
+
color-scrim: #000000,
|
|
31
|
+
color-inverseSurface: #362f2e,
|
|
32
|
+
color-inverseOnSurface: #fbeeec,
|
|
33
|
+
color-inversePrimary: #ffb4a8,
|
|
34
|
+
color-surfaceDim: #e4d7d5,
|
|
35
|
+
color-surfaceBright: #fff8f6,
|
|
36
|
+
color-surfaceContainerLowest: #ffffff,
|
|
37
|
+
color-surfaceContainerLow: #fef1ee,
|
|
38
|
+
color-surfaceContainer: #f8ebe9,
|
|
39
|
+
color-surfaceContainerHigh: #f3e5e3,
|
|
40
|
+
color-surfaceContainerHighest: #ede0dd
|
|
41
|
+
) !default;
|
|
42
|
+
|
|
43
|
+
$scheme-dark: (
|
|
44
|
+
color-primary: #ffb4a8,
|
|
45
|
+
color-onPrimary: #5f150d,
|
|
46
|
+
color-primaryContainer: #7d2b21,
|
|
47
|
+
color-onPrimaryContainer: #ffdad4,
|
|
48
|
+
color-secondary: #e7bdb6,
|
|
49
|
+
color-onSecondary: #442925,
|
|
50
|
+
color-secondaryContainer: #5d3f3b,
|
|
51
|
+
color-onSecondaryContainer: #ffdad4,
|
|
52
|
+
color-tertiary: #dec48c,
|
|
53
|
+
color-onTertiary: #3e2e04,
|
|
54
|
+
color-tertiaryContainer: #564419,
|
|
55
|
+
color-onTertiaryContainer: #fbdfa6,
|
|
56
|
+
color-error: #ffb4ab,
|
|
57
|
+
color-onError: #690005,
|
|
58
|
+
color-errorContainer: #93000a,
|
|
59
|
+
color-onErrorContainer: #ffb4ab,
|
|
60
|
+
color-background: #201a19,
|
|
61
|
+
color-onBackground: #ede0dd,
|
|
62
|
+
color-surface: #181211,
|
|
63
|
+
color-onSurface: #ede0dd,
|
|
64
|
+
color-surfaceVariant: #534341,
|
|
65
|
+
color-onSurfaceVariant: #d8c2be,
|
|
66
|
+
color-outline: #a08c89,
|
|
67
|
+
color-outlineVariant: #534341,
|
|
68
|
+
color-shadow: #000000,
|
|
69
|
+
color-scrim: #000000,
|
|
70
|
+
color-inverseSurface: #ede0dd,
|
|
71
|
+
color-inverseOnSurface: #362f2e,
|
|
72
|
+
color-inversePrimary: #9c4235,
|
|
73
|
+
color-surfaceDim: #181211,
|
|
74
|
+
color-surfaceBright: #3f3736,
|
|
75
|
+
color-surfaceContainerLowest: #120d0c,
|
|
76
|
+
color-surfaceContainerLow: #201a19,
|
|
77
|
+
color-surfaceContainer: #251e1d,
|
|
78
|
+
color-surfaceContainerHigh: #2f2827,
|
|
79
|
+
color-surfaceContainerHighest: #3b3332
|
|
80
|
+
) !default;
|