@liftkit-vue/core 0.1.0 → 0.2.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/LICENSE +21 -0
- package/package.json +10 -7
- package/src/css/index.css +3 -1
- package/src/css/liftkit-core.css +5 -464
- package/src/css/liftkit-reset.css +74 -0
- package/src/css/liftkit-tokens.css +375 -0
package/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2024-2026 annrie
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@liftkit-vue/core",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.2.0",
|
|
4
4
|
"description": "Material Design 3 inspired Vue 3 component library with dynamic theming and golden-ratio design tokens",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"license": "MIT",
|
|
@@ -34,11 +34,10 @@
|
|
|
34
34
|
},
|
|
35
35
|
"./css/*": "./src/css/*"
|
|
36
36
|
},
|
|
37
|
-
"files": [
|
|
38
|
-
|
|
39
|
-
"
|
|
40
|
-
|
|
41
|
-
},
|
|
37
|
+
"files": [
|
|
38
|
+
"dist",
|
|
39
|
+
"src/css"
|
|
40
|
+
],
|
|
42
41
|
"dependencies": {
|
|
43
42
|
"@material/material-color-utilities": "^0.3.0",
|
|
44
43
|
"material-dynamic-colors": "^1.1.2",
|
|
@@ -54,5 +53,9 @@
|
|
|
54
53
|
},
|
|
55
54
|
"peerDependencies": {
|
|
56
55
|
"vue": "^3.5.0"
|
|
56
|
+
},
|
|
57
|
+
"scripts": {
|
|
58
|
+
"build": "vite build",
|
|
59
|
+
"typecheck": "vue-tsc --noEmit"
|
|
57
60
|
}
|
|
58
|
-
}
|
|
61
|
+
}
|
package/src/css/index.css
CHANGED
package/src/css/liftkit-core.css
CHANGED
|
@@ -1,465 +1,6 @@
|
|
|
1
|
-
/*
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
:root {
|
|
6
|
-
font-size: 1rem;
|
|
7
|
-
--lk-scalefactor: 1.618;
|
|
8
|
-
/* these are the only two you set manually */
|
|
9
|
-
|
|
10
|
-
--lk-wholestep: var(--lk-scalefactor);
|
|
11
|
-
/* equals scalefactor */
|
|
12
|
-
/* 1.272 */
|
|
13
|
-
--lk-halfstep: calc(round(pow(var(--lk-scalefactor), 0.5), 0.001));
|
|
14
|
-
/* sqrt wholestep 1.128 */
|
|
15
|
-
--lk-quarterstep: round(pow(var(--lk-scalefactor), 0.25), 0.001);
|
|
16
|
-
/* sqrt halfstep 1.062*/
|
|
17
|
-
--lk-eighthstep: round(pow(var(--lk-scalefactor), 0.125), 0.001);
|
|
18
|
-
/* sqrt quarterstep: */
|
|
19
|
-
--lk-wholestep-dec: calc(var(--lk-wholestep) - 1);
|
|
20
|
-
/* wholestep -1 */
|
|
21
|
-
--lk-halfstep-dec: calc(var(--lk-halfstep) - 1);
|
|
22
|
-
/* halfstep -1 */
|
|
23
|
-
--lk-quarterstep-dec: calc(var(--lk-quarterstep) - 1);
|
|
24
|
-
/* quarterstep -1 */
|
|
25
|
-
--lk-eighthstep-dec: calc(var(--lk-eighthstep) - 1);
|
|
26
|
-
/* eighthstep -1 */
|
|
27
|
-
|
|
28
|
-
--lk-size-md: 1em;
|
|
29
|
-
/* It's okay to use em here because the root font size
|
|
30
|
-
has been manually set to 1rem */
|
|
31
|
-
--lk-size-sm: calc(1em / var(--lk-scalefactor));
|
|
32
|
-
--lk-size-xs: calc(1em * round(pow(var(--lk-scalefactor), -1), 0.001));
|
|
33
|
-
--lk-size-2xs: calc(1em * round(pow(var(--lk-scalefactor), -2), 0.001));
|
|
34
|
-
--lk-size-3xs: calc(1em * round(pow(var(--lk-scalefactor), -3), 0.001));
|
|
35
|
-
--lk-size-lg: calc(1em * var(--lk-scalefactor));
|
|
36
|
-
--lk-size-xl: calc(1em * round(pow(var(--lk-scalefactor), 2), 0.001));
|
|
37
|
-
--lk-size-2xl: calc(1em * round(pow(var(--lk-scalefactor), 3), 0.001));
|
|
38
|
-
--lk-size-3xl: calc(1em * round(pow(var(--lk-scalefactor), 4), 0.001));
|
|
39
|
-
--lk-size-4xl: calc(1em * round(pow(var(--lk-scalefactor), 5), 0.001));
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
/* Unitless sizes; required for adhoc calculations (division and multiplication in calc() require unitless numbers */
|
|
43
|
-
/* NOTE: in calc() with multiplication or division the right side must be a unitless number */
|
|
44
|
-
|
|
45
|
-
--lk-size-sm-unitless: calc(1 / var(--lk-scalefactor));
|
|
46
|
-
--lk-size-xs-unitless: calc(var(--lk-size-sm-unitless) / var(--lk-scalefactor));
|
|
47
|
-
--lk-size-2xs-unitless: calc(var(--lk-size-xs-unitless) / var(--lk-scalefactor));
|
|
48
|
-
--lk-size-lg-unitless: calc(1 * var(--lk-scalefactor));
|
|
49
|
-
--lk-size-xl-unitless: calc(var(--lk-size-lg-unitless) * var(--lk-scalefactor));
|
|
50
|
-
--lk-size-2xl-unitless: calc(var(--lk-size-xl-unitless) * var(--lk-scalefactor));
|
|
51
|
-
|
|
52
|
-
/*Increments*/
|
|
53
|
-
|
|
54
|
-
/* Colors */
|
|
55
|
-
|
|
56
|
-
--light__primary_lkv: #0051e0;
|
|
57
|
-
--light__onprimary_lkv: #faf8ff;
|
|
58
|
-
--light__primarycontainer_lkv: #dbe1ff;
|
|
59
|
-
--light__onprimarycontainer_lkv: #00174d;
|
|
60
|
-
--light__secondary_lkv: #40617f;
|
|
61
|
-
--light__onsecondary_lkv: #f7f9ff;
|
|
62
|
-
--light__secondarycontainer_lkv: #cde5ff;
|
|
63
|
-
--light__onsecondarycontainer_lkv: #001d32;
|
|
64
|
-
--light__tertiary_lkv: #006878;
|
|
65
|
-
--light__ontertiary_lkv: #f0fbff;
|
|
66
|
-
--light__tertiarycontainer_lkv: #a8edff;
|
|
67
|
-
--light__ontertiarycontainer_lkv: #001f25;
|
|
68
|
-
--light__error_lkv: #bb0e45;
|
|
69
|
-
--light__onerror_lkv: #fff8f7;
|
|
70
|
-
--light__errorcontainer_lkv: #ffd9dc;
|
|
71
|
-
--light__onerrorcontainer_lkv: #400012;
|
|
72
|
-
--light__background_lkv: #fefbff;
|
|
73
|
-
--light__onbackground_lkv: #171b27;
|
|
74
|
-
--light__surface_lkv: #faf8ff;
|
|
75
|
-
--light__onsurface_lkv: #171b27;
|
|
76
|
-
--light__surfacevariant_lkv: #c8c6c6;
|
|
77
|
-
--light__onsurfacevariant_lkv: #464747;
|
|
78
|
-
--light__outline_lkv: #777777;
|
|
79
|
-
--light__outlinevariant_lkv: #c8c6c6;
|
|
80
|
-
--light__shadow_lkv: #000000;
|
|
81
|
-
--light__scrim_lkv: #000000;
|
|
82
|
-
--light__inversesurface_lkv: #2c303c;
|
|
83
|
-
--light__inverseonsurface_lkv: #eef0ff;
|
|
84
|
-
--light__inverseprimary_lkv: #b5c4ff;
|
|
85
|
-
--light__surfacedim_lkv: #d7d9ea;
|
|
86
|
-
--light__surfacebright_lkv: #faf8ff;
|
|
87
|
-
--light__surfacecontainerlowest_lkv: white;
|
|
88
|
-
--light__surfacecontainerlow_lkv: #f2f3ff;
|
|
89
|
-
--light__surfacecontainer_lkv: #ebedfe;
|
|
90
|
-
--light__surfacecontainerhigh_lkv: #e5e7f8;
|
|
91
|
-
--light__surfacecontainerhighest_lkv: #dfe2f2;
|
|
92
|
-
--light__warning_lkv: #7d5800;
|
|
93
|
-
--light__onwarning_lkv: #fff8f3;
|
|
94
|
-
--light__warningcontainer_lkv: #ffdea9;
|
|
95
|
-
--light__onwarningcontainer_lkv: #271900;
|
|
96
|
-
--light__success_lkv: #006b55;
|
|
97
|
-
--light__onsuccess_lkv: #e6fff4;
|
|
98
|
-
--light__successcontainer_lkv: #20ffce;
|
|
99
|
-
--light__onsuccesscontainer_lkv: #002118;
|
|
100
|
-
--light__info_lkv: #004ee7;
|
|
101
|
-
--light__oninfo_lkv: #faf8ff;
|
|
102
|
-
--light__infocontainer_lkv: #dce1ff;
|
|
103
|
-
--light__oninfocontainer_lkv: #001550;
|
|
104
|
-
--dark__primary_lkv: #b5c4ff;
|
|
105
|
-
--dark__onprimary_lkv: #00297a;
|
|
106
|
-
--dark__primarycontainer_lkv: #003cac;
|
|
107
|
-
--dark__onprimarycontainer_lkv: #dbe1ff;
|
|
108
|
-
--dark__secondary_lkv: #a8caec;
|
|
109
|
-
--dark__onsecondary_lkv: #0b334f;
|
|
110
|
-
--dark__secondarycontainer_lkv: #274a66;
|
|
111
|
-
--dark__onsecondarycontainer_lkv: #cde5ff;
|
|
112
|
-
--dark__tertiary_lkv: #00d9fa;
|
|
113
|
-
--dark__ontertiary_lkv: #00363f;
|
|
114
|
-
--dark__tertiarycontainer_lkv: #004e5b;
|
|
115
|
-
--dark__ontertiarycontainer_lkv: #a8edff;
|
|
116
|
-
--dark__error_lkv: #ffb2bb;
|
|
117
|
-
--dark__onerror_lkv: #670021;
|
|
118
|
-
--dark__errorcontainer_lkv: #910032;
|
|
119
|
-
--dark__onerrorcontainer_lkv: #ffd9dc;
|
|
120
|
-
--dark__background_lkv: #171b27;
|
|
121
|
-
--dark__onbackground_lkv: #d1d4e4;
|
|
122
|
-
--dark__surface_lkv: #222531;
|
|
123
|
-
--dark__onsurface_lkv: #c3c6d6;
|
|
124
|
-
--dark__surfacevariant_lkv: #303030;
|
|
125
|
-
--dark__onsurfacevariant_lkv: #acabab;
|
|
126
|
-
--dark__outline_lkv: #464747;
|
|
127
|
-
--dark__outlinevariant_lkv: #303030;
|
|
128
|
-
--dark__shadow_lkv: #000000;
|
|
129
|
-
--dark__scrim_lkv: #000000;
|
|
130
|
-
--dark__inversesurface_lkv: #faf8ff;
|
|
131
|
-
--dark__inverseonsurface_lkv: #171b27;
|
|
132
|
-
--dark__inverseprimary_lkv: #b5c4ff;
|
|
133
|
-
--dark__surfacedim_lkv: #20232f;
|
|
134
|
-
--dark__surfacebright_lkv: #434653;
|
|
135
|
-
--dark__surfacecontainerlowest_lkv: #1b1f2b;
|
|
136
|
-
--dark__surfacecontainerlow_lkv: #262a36;
|
|
137
|
-
--dark__surfacecontainer_lkv: #2c303c;
|
|
138
|
-
--dark__surfacecontainerhigh_lkv: #353945;
|
|
139
|
-
--dark__surfacecontainerhighest_lkv: #3e424f;
|
|
140
|
-
--dark__warning_lkv: #ffba28;
|
|
141
|
-
--dark__onwarning_lkv: #422c00;
|
|
142
|
-
--dark__warningcontainer_lkv: #5e4100;
|
|
143
|
-
--dark__onwarningcontainer_lkv: #ffdea9;
|
|
144
|
-
--dark__success_lkv: #00e0b4;
|
|
145
|
-
--dark__onsuccess_lkv: #00382b;
|
|
146
|
-
--dark__successcontainer_lkv: #00513f;
|
|
147
|
-
--dark__onsuccesscontainer_lkv: #20ffce;
|
|
148
|
-
--dark__info_lkv: #b6c4ff;
|
|
149
|
-
--dark__oninfo_lkv: #00277f;
|
|
150
|
-
--dark__infocontainer_lkv: #003ab1;
|
|
151
|
-
--dark__oninfocontainer_lkv: #dce1ff;
|
|
152
|
-
--light__primaryfixed_lkv: #dbe1ff;
|
|
153
|
-
--light__primaryfixeddim_lkv: #b5c4ff;
|
|
154
|
-
--light__onprimaryfixed_lkv: #00174d;
|
|
155
|
-
--light__onprimaryfixedvariant_lkv: #003cac;
|
|
156
|
-
--light__secondaryfixed_lkv: #cde5ff;
|
|
157
|
-
--light__secondaryfixeddim_lkv: #a8caec;
|
|
158
|
-
--light__onsecondaryfixed_lkv: #001d32;
|
|
159
|
-
--light__onsecondaryfixedvariant_lkv: #274a66;
|
|
160
|
-
--light__tertiaryfixed_lkv: #a8edff;
|
|
161
|
-
--light__tertiaryfixeddim_lkv: #00d9fa;
|
|
162
|
-
--light__ontertiaryfixed_lkv: #001f25;
|
|
163
|
-
--light__ontertiaryfixedvariant_lkv: #004e5b;
|
|
164
|
-
--dark__primaryfixed_lkv: #dbe1ff;
|
|
165
|
-
--dark__primaryfixeddim_lkv: #b5c4ff;
|
|
166
|
-
--dark__onprimaryfixed_lkv: #00174d;
|
|
167
|
-
--dark__onprimaryfixedvariant_lkv: #003cac;
|
|
168
|
-
--dark__secondaryfixed_lkv: #cde5ff;
|
|
169
|
-
--dark__secondaryfixeddim_lkv: #a8caec;
|
|
170
|
-
--dark__onsecondaryfixed_lkv: #001d32;
|
|
171
|
-
--dark__onsecondaryfixedvariant_lkv: #274a66;
|
|
172
|
-
--dark__tertiaryfixed_lkv: #a8edff;
|
|
173
|
-
--dark__tertiaryfixeddim_lkv: #00d9fa;
|
|
174
|
-
--dark__ontertiaryfixed_lkv: #001f25;
|
|
175
|
-
--dark__ontertiaryfixedvariant_lkv: #004e5b;
|
|
176
|
-
|
|
177
|
-
--lk-onprimary: var(--light__onprimary_lkv);
|
|
178
|
-
--lk-primarycontainer: var(--light__primarycontainer_lkv);
|
|
179
|
-
--lk-onprimarycontainer: var(--light__onprimarycontainer_lkv);
|
|
180
|
-
--lk-secondary: var(--light__secondary_lkv);
|
|
181
|
-
--lk-onsecondary: var(--light__onsecondary_lkv);
|
|
182
|
-
--lk-secondarycontainer: var(--light__secondarycontainer_lkv);
|
|
183
|
-
--lk-onsecondarycontainer: var(--light__onsecondarycontainer_lkv);
|
|
184
|
-
--lk-tertiary: var(--light__tertiary_lkv);
|
|
185
|
-
--lk-ontertiary: var(--light__ontertiary_lkv);
|
|
186
|
-
--lk-tertiarycontainer: var(--light__tertiarycontainer_lkv);
|
|
187
|
-
--lk-ontertiarycontainer: var(--light__ontertiarycontainer_lkv);
|
|
188
|
-
--lk-onerror: var(--light__onerror_lkv);
|
|
189
|
-
--lk-errorcontainer: var(--light__errorcontainer_lkv);
|
|
190
|
-
--lk-onerrorcontainer: var(--light__onerrorcontainer_lkv);
|
|
191
|
-
--lk-background: var(--light__background_lkv);
|
|
192
|
-
--lk-onbackground: var(--light__onbackground_lkv);
|
|
193
|
-
--lk-surface: var(--light__surface_lkv);
|
|
194
|
-
--lk-onsurface: var(--light__onsurface_lkv);
|
|
195
|
-
--lk-onsurfacevariant: var(--light__onsurfacevariant_lkv);
|
|
196
|
-
--lk-surfacevariant: var(--light__surfacevariant_lkv);
|
|
197
|
-
--lk-shadow: var(--light__shadow_lkv);
|
|
198
|
-
--lk-inversesurface: var(--light__inversesurface_lkv);
|
|
199
|
-
--lk-scrim: var(--light__scrim_lkv);
|
|
200
|
-
--lk-inverseonsurface: var(--light__inverseonsurface_lkv);
|
|
201
|
-
--lk-inverseprimary: var(--light__inverseprimary_lkv);
|
|
202
|
-
--lk-success: var(--light__success_lkv);
|
|
203
|
-
--lk-onsuccess: var(--light__onsuccess_lkv);
|
|
204
|
-
--lk-successcontainer: var(--light__successcontainer_lkv);
|
|
205
|
-
--lk-onsuccesscontainer: var(--light__onsuccesscontainer_lkv);
|
|
206
|
-
--lk-warning: var(--light__warning_lkv);
|
|
207
|
-
--lk-onwarning: var(--light__onwarning_lkv);
|
|
208
|
-
--lk-warningcontainer: var(--light__warningcontainer_lkv);
|
|
209
|
-
--lk-onwarningcontainer: var(--light__onwarningcontainer_lkv);
|
|
210
|
-
--lk-info: var(--light__info_lkv);
|
|
211
|
-
--lk-oninfo: var(--light__oninfo_lkv);
|
|
212
|
-
--lk-infocontainer: var(--light__infocontainer_lkv);
|
|
213
|
-
--lk-oninfocontainer: var(--light__oninfocontainer_lkv);
|
|
214
|
-
--lk-primaryfixed: var(--light__primaryfixed_lkv);
|
|
215
|
-
--lk-onprimaryfixed: var(--light__onprimaryfixed_lkv);
|
|
216
|
-
--lk-primaryfixeddim: var(--light__primaryfixeddim_lkv);
|
|
217
|
-
--lk-onprimaryfixedvariant: var(--light__onprimaryfixedvariant_lkv);
|
|
218
|
-
--lk-secondaryfixed: var(--light__secondaryfixed_lkv);
|
|
219
|
-
--lk-secondaryfixeddim: var(--light__secondaryfixeddim_lkv);
|
|
220
|
-
--lk-onsecondaryfixed: var(--light__onsecondaryfixed_lkv);
|
|
221
|
-
--lk-onsecondaryfixedvariant: var(--light__onsecondaryfixedvariant_lkv);
|
|
222
|
-
--lk-tertiaryfixed: var(--light__tertiaryfixed_lkv);
|
|
223
|
-
--lk-ontertiaryfixed: var(--light__ontertiaryfixed_lkv);
|
|
224
|
-
--lk-tertiaryfixeddim: var(--light__tertiaryfixeddim_lkv);
|
|
225
|
-
--lk-ontertiaryfixedvariant: var(--light__ontertiaryfixedvariant_lkv);
|
|
226
|
-
--lk-surfacedim: var(--light__surfacedim_lkv);
|
|
227
|
-
--lk-surfacebright: var(--light__surfacebright_lkv);
|
|
228
|
-
--lk-surfacecontainerlowest: var(--light__surfacecontainerlowest_lkv);
|
|
229
|
-
--lk-surfacecontainer: var(--light__surfacecontainer_lkv);
|
|
230
|
-
--lk-surfacecontainerhigh: var(--light__surfacecontainerhigh_lkv);
|
|
231
|
-
--lk-surfacecontainerhighest: var(--light__surfacecontainerhighest_lkv);
|
|
232
|
-
--lk-surfacecontainerlow: var(--light__surfacecontainerlow_lkv);
|
|
233
|
-
--lk-outlinevariant: var(--light__outlinevariant_lkv);
|
|
234
|
-
--lk-outline: var(--light__outline_lkv);
|
|
235
|
-
--lk-error: var(--light__error_lkv);
|
|
236
|
-
--lk-primary: var(--light__primary_lkv);
|
|
237
|
-
|
|
238
|
-
/* Make text look sharper */
|
|
239
|
-
|
|
240
|
-
-webkit-font-smoothing: antialiased;
|
|
241
|
-
-moz-osx-font-smoothing: grayscale;
|
|
242
|
-
font-smooth: never;
|
|
243
|
-
|
|
244
|
-
/************ Font Size Vars ************/
|
|
245
|
-
|
|
246
|
-
/* DEBUGGING TIP: The CSS rules for calc() define unique laws for adding, subtracating, multiplying, and dividing.
|
|
247
|
-
* In addition and subtraction, both sides must have the same unit.
|
|
248
|
-
* In multiplication, one side must be unitless.
|
|
249
|
-
* In division, the right side must be unitless.
|
|
250
|
-
*/
|
|
251
|
-
|
|
252
|
-
--display1-font-size: calc(1em * pow(var(--lk-wholestep), 3));
|
|
253
|
-
--display2-font-size: calc(1em * pow(var(--lk-wholestep), 2));
|
|
254
|
-
--title1-font-size: calc(1em * var(--lk-wholestep) * var(--lk-halfstep));
|
|
255
|
-
--title2-font-size: calc(1em * var(--lk-wholestep));
|
|
256
|
-
--title3-font-size: calc(1em * var(--lk-halfstep));
|
|
257
|
-
--heading-font-size: calc(1em * var(--lk-quarterstep));
|
|
258
|
-
--subheading-font-size: calc(1em / var(--lk-quarterstep));
|
|
259
|
-
--body-font-size: 1em;
|
|
260
|
-
--callout-font-size: calc(1em / var(--lk-eighthstep));
|
|
261
|
-
--label-font-size: calc((1em / var(--lk-quarterstep)) / var(--lk-eighthstep));
|
|
262
|
-
--caption-font-size: calc(1em / var(--lk-halfstep));
|
|
263
|
-
--capline-font-size: calc(1em / var(--lk-halfstep));
|
|
264
|
-
|
|
265
|
-
/* Font Line Height Vars (UNITLESS!) */
|
|
266
|
-
|
|
267
|
-
--display1-line-height: var(--lk-quarterstep);
|
|
268
|
-
--display2-line-height: var(--lk-halfstep);
|
|
269
|
-
--title1-line-height: var(--lk-halfstep);
|
|
270
|
-
--title2-line-height: var(--lk-halfstep);
|
|
271
|
-
--title3-line-height: var(--lk-halfstep);
|
|
272
|
-
--heading-line-height: var(--lk-halfstep);
|
|
273
|
-
--subheading-line-height: var(--lk-halfstep);
|
|
274
|
-
--body-line-height: var(--lk-wholestep);
|
|
275
|
-
--callout-line-height: var(--lk-halfstep);
|
|
276
|
-
--label-line-height: var(--lk-halfstep);
|
|
277
|
-
--caption-line-height: var(--lk-halfstep);
|
|
278
|
-
--capline-line-height: var(--lk-halfstep);
|
|
279
|
-
|
|
280
|
-
/* Optical Top Padding Offsets and Border Radii for Cards */
|
|
281
|
-
/* Produce padding values for the insides of cards or other containers on sides that
|
|
282
|
-
optically look imbalanced even though mathematically they're symmetrical. Like in the first liftkit video. */
|
|
283
|
-
|
|
284
|
-
--display1-offset: calc(var(--display1-font-size) * calc(var(--display1-line-height) / var(--lk-wholestep)));
|
|
285
|
-
--display2-offset: calc(var(--display2-font-size) * calc(var(--display2-line-height) / var(--lk-wholestep)));
|
|
286
|
-
--title1-offset: calc(var(--title1-font-size) * calc(var(--title1-line-height) / var(--lk-wholestep)));
|
|
287
|
-
--title2-offset: calc(var(--title2-font-size) * calc(var(--title2-line-height) / var(--lk-wholestep)));
|
|
288
|
-
--title3-offset: calc(var(--title3-font-size) * calc(var(--title3-line-height) / var(--lk-wholestep)));
|
|
289
|
-
--heading-offset: calc(var(--heading-font-size) * calc(var(--heading-line-height) / var(--lk-wholestep)));
|
|
290
|
-
--subheading-offset: calc(var(--subheading-font-size) * calc(var(--subheading-line-height) / var(--lk-wholestep)));
|
|
291
|
-
--body-offset: calc(var(--body-font-size) / var(--lk-wholestep));
|
|
292
|
-
--callout-offset: calc(var(--callout-font-size) * calc(var(--callout-line-height) / var(--lk-wholestep)));
|
|
293
|
-
--label-offset: calc(var(--label-font-size) * calc(var(--label-line-height) / var(--lk-wholestep)));
|
|
294
|
-
--caption-offset: calc(var(--caption-font-size) * calc(var(--caption-line-height) / var(--lk-wholestep)));
|
|
295
|
-
--capline-offset: calc(var(--capline-font-size) * calc(var(--capline-line-height) / var(--lk-wholestep)));
|
|
296
|
-
|
|
297
|
-
/* shadows */
|
|
298
|
-
--shadow-sm: 0 0 1px 0 var(--lk-shadow);
|
|
299
|
-
--shadow-md: 0 4px 6px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.11),
|
|
300
|
-
0 0 1px rgba(0, 0, 0, 0.4);
|
|
301
|
-
--shadow-lg: 0 11px 15px -3px rgba(0, 0, 0, 0.11),
|
|
302
|
-
0 2px 6px rgba(0, 0, 0, 0.07), 0 0 1px rgba(0, 0, 0, 0.4);
|
|
303
|
-
--shadow-xl: 0px 0px 1px 0px var(--lk-outline),
|
|
304
|
-
0px 50px 100px 0px rgba(0, 0, 0, 0.15);
|
|
305
|
-
--shadow-2xl: 0 25px 50px rgba(0, 0, 0, 0.23), 0 9px 18px rgba(0, 0, 0, 0.1),
|
|
306
|
-
0 0 1px rgba(0, 0, 0, 0.4);
|
|
307
|
-
|
|
308
|
-
/* Global Scale Factors - Used for ad hoc calculations in the component tree leaves */
|
|
309
|
-
|
|
310
|
-
--display1BoxHeight: calc(var(--display1-font-size) * var(--display1-line-height));
|
|
311
|
-
--display2BoxHeight: calc(var(--display2-font-size) * var(--display2-line-height));
|
|
312
|
-
--title1BoxHeight: calc(var(--title1-font-size) * var(--title1-line-height));
|
|
313
|
-
--title2BoxHeight: calc(var(--title2-font-size) * var(--title2-line-height));
|
|
314
|
-
--title3BoxHeight: calc(var(--title3-font-size) * var(--title3-line-height));
|
|
315
|
-
--headingBoxHeight: calc(var(--heading-font-size) * var(--heading-line-height));
|
|
316
|
-
--subheadingBoxHeight: calc(var(--subheading-font-size) * var(--subheading-line-height));
|
|
317
|
-
--bodyBoxHeight: calc(var(--body-font-size) * var(--body-line-height));
|
|
318
|
-
--calloutBoxHeight: calc(var(--callout-font-size) * var(--callout-line-height));
|
|
319
|
-
--labelBoxHeight: calc(var(--label-font-size) * var(--label-line-height));
|
|
320
|
-
--captionBoxHeight: calc(var(--caption-font-size) * var(--caption-line-height));
|
|
321
|
-
--caplineBoxHeight: calc(var(--capline-font-size) * var(--capline-line-height));
|
|
322
|
-
}
|
|
323
|
-
|
|
324
|
-
@media (prefers-color-scheme: dark) {
|
|
325
|
-
html {
|
|
326
|
-
color-scheme: dark;
|
|
327
|
-
}
|
|
328
|
-
|
|
329
|
-
:root {
|
|
330
|
-
--lk-onprimary: var(--dark__onprimary_lkv);
|
|
331
|
-
--lk-primarycontainer: var(--dark__primarycontainer_lkv);
|
|
332
|
-
--lk-onprimarycontainer: var(--dark__onprimarycontainer_lkv);
|
|
333
|
-
--lk-secondary: var(--dark__secondary_lkv);
|
|
334
|
-
--lk-onsecondary: var(--dark__onsecondary_lkv);
|
|
335
|
-
--lk-secondarycontainer: var(--dark__secondarycontainer_lkv);
|
|
336
|
-
--lk-onsecondarycontainer: var(--dark__onsecondarycontainer_lkv);
|
|
337
|
-
--lk-tertiary: var(--dark__tertiary_lkv);
|
|
338
|
-
--lk-ontertiary: var(--dark__ontertiary_lkv);
|
|
339
|
-
--lk-tertiarycontainer: var(--dark__tertiarycontainer_lkv);
|
|
340
|
-
--lk-ontertiarycontainer: var(--dark__ontertiarycontainer_lkv);
|
|
341
|
-
--lk-onerror: var(--dark__onerror_lkv);
|
|
342
|
-
--lk-errorcontainer: var(--dark__errorcontainer_lkv);
|
|
343
|
-
--lk-onerrorcontainer: var(--dark__onerrorcontainer_lkv);
|
|
344
|
-
--lk-background: var(--dark__background_lkv);
|
|
345
|
-
--lk-onbackground: var(--dark__onbackground_lkv);
|
|
346
|
-
--lk-surface: var(--dark__surface_lkv);
|
|
347
|
-
--lk-onsurface: var(--dark__onsurface_lkv);
|
|
348
|
-
--lk-onsurfacevariant: var(--dark__onsurfacevariant_lkv);
|
|
349
|
-
--lk-surfacevariant: var(--dark__surfacevariant_lkv);
|
|
350
|
-
--lk-shadow: var(--dark__shadow_lkv);
|
|
351
|
-
--lk-inversesurface: var(--dark__inversesurface_lkv);
|
|
352
|
-
--lk-scrim: var(--dark__scrim_lkv);
|
|
353
|
-
--lk-inverseonsurface: var(--dark__inverseonsurface_lkv);
|
|
354
|
-
--lk-inverseprimary: var(--dark__inverseprimary_lkv);
|
|
355
|
-
--lk-success: var(--dark__success_lkv);
|
|
356
|
-
--lk-onsuccess: var(--dark__onsuccess_lkv);
|
|
357
|
-
--lk-successcontainer: var(--dark__successcontainer_lkv);
|
|
358
|
-
--lk-onsuccesscontainer: var(--dark__onsuccesscontainer_lkv);
|
|
359
|
-
--lk-warning: var(--dark__warning_lkv);
|
|
360
|
-
--lk-onwarning: var(--dark__onwarning_lkv);
|
|
361
|
-
--lk-warningcontainer: var(--dark__warningcontainer_lkv);
|
|
362
|
-
--lk-onwarningcontainer: var(--dark__onwarningcontainer_lkv);
|
|
363
|
-
--lk-info: var(--dark__info_lkv);
|
|
364
|
-
--lk-oninfo: var(--dark__oninfo_lkv);
|
|
365
|
-
--lk-infocontainer: var(--dark__infocontainer_lkv);
|
|
366
|
-
--lk-oninfocontainer: var(--dark__oninfocontainer_lkv);
|
|
367
|
-
--lk-primaryfixed: var(--dark__primaryfixed_lkv);
|
|
368
|
-
--lk-onprimaryfixed: var(--dark__onprimaryfixed_lkv);
|
|
369
|
-
--lk-primaryfixeddim: var(--dark__primaryfixeddim_lkv);
|
|
370
|
-
--lk-onprimaryfixedvariant: var(--dark__onprimaryfixedvariant_lkv);
|
|
371
|
-
--lk-secondaryfixed: var(--dark__secondaryfixed_lkv);
|
|
372
|
-
--lk-secondaryfixeddim: var(--dark__secondaryfixeddim_lkv);
|
|
373
|
-
--lk-onsecondaryfixed: var(--dark__onsecondaryfixed_lkv);
|
|
374
|
-
--lk-onsecondaryfixedvariant: var(--dark__onsecondaryfixedvariant_lkv);
|
|
375
|
-
--lk-tertiaryfixed: var(--dark__tertiaryfixed_lkv);
|
|
376
|
-
--lk-ontertiaryfixed: var(--dark__ontertiaryfixed_lkv);
|
|
377
|
-
--lk-tertiaryfixeddim: var(--dark__tertiaryfixeddim_lkv);
|
|
378
|
-
--lk-ontertiaryfixedvariant: var(--dark__ontertiaryfixedvariant_lkv);
|
|
379
|
-
--lk-surfacedim: var(--dark__surfacedim_lkv);
|
|
380
|
-
--lk-surfacebright: var(--dark__surfacebright_lkv);
|
|
381
|
-
--lk-surfacecontainerlowest: var(--dark__surfacecontainerlowest_lkv);
|
|
382
|
-
--lk-surfacecontainer: var(--dark__surfacecontainer_lkv);
|
|
383
|
-
--lk-surfacecontainerhigh: var(--dark__surfacecontainerhigh_lkv);
|
|
384
|
-
--lk-surfacecontainerhighest: var(--dark__surfacecontainerhighest_lkv);
|
|
385
|
-
--lk-surfacecontainerlow: var(--dark__surfacecontainerlow_lkv);
|
|
386
|
-
--lk-outlinevariant: var(--dark__outlinevariant_lkv);
|
|
387
|
-
--lk-outline: var(--dark__outline_lkv);
|
|
388
|
-
--lk-error: var(--dark__error_lkv);
|
|
389
|
-
--lk-primary: var(--dark__primary_lkv);
|
|
390
|
-
}
|
|
391
|
-
}
|
|
392
|
-
|
|
393
|
-
/* Everything from here is done to disable native display behavior of HTML elements
|
|
394
|
-
|
|
395
|
-
/* TODO: Consider a more robust noramlizing solution. there's gotta be open source solutions to this.
|
|
396
|
-
|
|
1
|
+
/* LiftKit Core - 後方互換ラッパー
|
|
2
|
+
トークン（CSS変数）とリセット（要素セレクタ）の両方をインポート。
|
|
3
|
+
トークンのみが必要な場合は liftkit-tokens.css を直接インポートすること。
|
|
397
4
|
*/
|
|
398
|
-
|
|
399
|
-
|
|
400
|
-
body {
|
|
401
|
-
max-width: 100vw;
|
|
402
|
-
color: var(--lk-onbackground);
|
|
403
|
-
background: var(--lk-background);
|
|
404
|
-
color-scheme: dark;
|
|
405
|
-
}
|
|
406
|
-
|
|
407
|
-
input:focus-visible {
|
|
408
|
-
outline: none;
|
|
409
|
-
}
|
|
410
|
-
|
|
411
|
-
body {
|
|
412
|
-
color: var(--lk-onbackground);
|
|
413
|
-
background: var(--lk-background);
|
|
414
|
-
-webkit-font-smoothing: antialiased;
|
|
415
|
-
-moz-osx-font-smoothing: grayscale;
|
|
416
|
-
font-size: 16px;
|
|
417
|
-
line-height: 1.5;
|
|
418
|
-
color: var(--lk-onbackground);
|
|
419
|
-
background-color: var(--lk-background);
|
|
420
|
-
}
|
|
421
|
-
|
|
422
|
-
* {
|
|
423
|
-
box-sizing: border-box;
|
|
424
|
-
padding: 0;
|
|
425
|
-
margin: 0;
|
|
426
|
-
}
|
|
427
|
-
|
|
428
|
-
a {
|
|
429
|
-
color: inherit;
|
|
430
|
-
text-decoration: none;
|
|
431
|
-
}
|
|
432
|
-
|
|
433
|
-
.swatch {
|
|
434
|
-
padding: calc(1.272em / var(--lk-size-xl-unitless)) var(--lk-size-sm);
|
|
435
|
-
border-radius: var(--lk-size-xs);
|
|
436
|
-
margin: var(--lk-size-sm) 0;
|
|
437
|
-
}
|
|
438
|
-
|
|
439
|
-
/* Make Buttons into Inline Elements */
|
|
440
|
-
|
|
441
|
-
button {
|
|
442
|
-
--button-font-size: var(--lk-size-md);
|
|
443
|
-
--button-line-height: var(--lk-halfstep);
|
|
444
|
-
--button-padX-default: var(--lk-size-md);
|
|
445
|
-
--button-padX-sideWithIcon: calc(1em * calc(var(--lk-wholestep) / var(--lk-size-xl-unitless)));
|
|
446
|
-
--button-padY: calc(var(--button-font-size) * calc(var(--lk-halfstep) / var(--lk-size-xl-unitless)));
|
|
447
|
-
--button-gap: var(--button-padX-sideWithIcon);
|
|
448
|
-
/* In division, the second value MUST be unitless */
|
|
449
|
-
display: inline-block;
|
|
450
|
-
border: 1px solid rgba(0, 0, 0, 0);
|
|
451
|
-
border-radius: 100em;
|
|
452
|
-
position: relative;
|
|
453
|
-
text-decoration: none;
|
|
454
|
-
white-space: normal;
|
|
455
|
-
word-break: keep-all;
|
|
456
|
-
overflow: hidden;
|
|
457
|
-
padding: var(--button-padY) 1em;
|
|
458
|
-
font-weight: 500;
|
|
459
|
-
font-size: var(--button-font-size);
|
|
460
|
-
line-height: var(--button-line-height);
|
|
461
|
-
}
|
|
462
|
-
|
|
463
|
-
button span {
|
|
464
|
-
text-transform: capitalize;
|
|
465
|
-
}
|
|
5
|
+
@import "./liftkit-tokens.css";
|
|
6
|
+
@import "./liftkit-reset.css";
|
|
@@ -0,0 +1,74 @@
|
|
|
1
|
+
/* LiftKit Reset - 要素レベルセレクタ
|
|
2
|
+
HTML要素のネイティブ表示をリセットするスタイル。
|
|
3
|
+
外部UIフレームワーク（Nuxt UI等）と併用する場合は、このファイルを読み込まないこと。
|
|
4
|
+
|
|
5
|
+
TODO: Consider a more robust normalizing solution. there's gotta be open source solutions to this.
|
|
6
|
+
*/
|
|
7
|
+
|
|
8
|
+
html,
|
|
9
|
+
body {
|
|
10
|
+
max-width: 100vw;
|
|
11
|
+
color: var(--lk-onbackground);
|
|
12
|
+
background: var(--lk-background);
|
|
13
|
+
color-scheme: dark;
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
input:focus-visible {
|
|
17
|
+
outline: none;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
body {
|
|
21
|
+
color: var(--lk-onbackground);
|
|
22
|
+
background: var(--lk-background);
|
|
23
|
+
-webkit-font-smoothing: antialiased;
|
|
24
|
+
-moz-osx-font-smoothing: grayscale;
|
|
25
|
+
font-size: 16px;
|
|
26
|
+
line-height: 1.5;
|
|
27
|
+
color: var(--lk-onbackground);
|
|
28
|
+
background-color: var(--lk-background);
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
* {
|
|
32
|
+
box-sizing: border-box;
|
|
33
|
+
padding: 0;
|
|
34
|
+
margin: 0;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
a {
|
|
38
|
+
color: inherit;
|
|
39
|
+
text-decoration: none;
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
.swatch {
|
|
43
|
+
padding: calc(1.272em / var(--lk-size-xl-unitless)) var(--lk-size-sm);
|
|
44
|
+
border-radius: var(--lk-size-xs);
|
|
45
|
+
margin: var(--lk-size-sm) 0;
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
/* Make Buttons into Inline Elements */
|
|
49
|
+
|
|
50
|
+
button {
|
|
51
|
+
--button-font-size: var(--lk-size-md);
|
|
52
|
+
--button-line-height: var(--lk-halfstep);
|
|
53
|
+
--button-padX-default: var(--lk-size-md);
|
|
54
|
+
--button-padX-sideWithIcon: calc(1em * calc(var(--lk-wholestep) / var(--lk-size-xl-unitless)));
|
|
55
|
+
--button-padY: calc(var(--button-font-size) * calc(var(--lk-halfstep) / var(--lk-size-xl-unitless)));
|
|
56
|
+
--button-gap: var(--button-padX-sideWithIcon);
|
|
57
|
+
/* In division, the second value MUST be unitless */
|
|
58
|
+
display: inline-block;
|
|
59
|
+
border: 1px solid rgba(0, 0, 0, 0);
|
|
60
|
+
border-radius: 100em;
|
|
61
|
+
position: relative;
|
|
62
|
+
text-decoration: none;
|
|
63
|
+
white-space: normal;
|
|
64
|
+
word-break: keep-all;
|
|
65
|
+
overflow: hidden;
|
|
66
|
+
padding: var(--button-padY) 1em;
|
|
67
|
+
font-weight: 500;
|
|
68
|
+
font-size: var(--button-font-size);
|
|
69
|
+
line-height: var(--button-line-height);
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
button span {
|
|
73
|
+
text-transform: capitalize;
|
|
74
|
+
}
|
|
@@ -0,0 +1,375 @@
|
|
|
1
|
+
/*
|
|
2
|
+
* LiftKit Design Tokens
|
|
3
|
+
*
|
|
4
|
+
* CSS custom properties only — no element selectors.
|
|
5
|
+
* Safe to use alongside any UI framework (Nuxt UI, Vuetify, etc.)
|
|
6
|
+
*
|
|
7
|
+
* Contains:
|
|
8
|
+
* - Golden ratio scale factors
|
|
9
|
+
* - MD3 color tokens (light/dark)
|
|
10
|
+
* - Typography size/line-height variables
|
|
11
|
+
* - Shadow definitions
|
|
12
|
+
* - Box height calculations
|
|
13
|
+
*/
|
|
14
|
+
|
|
15
|
+
:root {
|
|
16
|
+
font-size: 1rem;
|
|
17
|
+
--lk-scalefactor: 1.618;
|
|
18
|
+
|
|
19
|
+
--lk-wholestep: var(--lk-scalefactor);
|
|
20
|
+
--lk-halfstep: calc(round(pow(var(--lk-scalefactor), 0.5), 0.001));
|
|
21
|
+
--lk-quarterstep: round(pow(var(--lk-scalefactor), 0.25), 0.001);
|
|
22
|
+
--lk-eighthstep: round(pow(var(--lk-scalefactor), 0.125), 0.001);
|
|
23
|
+
--lk-wholestep-dec: calc(var(--lk-wholestep) - 1);
|
|
24
|
+
--lk-halfstep-dec: calc(var(--lk-halfstep) - 1);
|
|
25
|
+
--lk-quarterstep-dec: calc(var(--lk-quarterstep) - 1);
|
|
26
|
+
--lk-eighthstep-dec: calc(var(--lk-eighthstep) - 1);
|
|
27
|
+
|
|
28
|
+
--lk-size-md: 1em;
|
|
29
|
+
--lk-size-sm: calc(1em / var(--lk-scalefactor));
|
|
30
|
+
--lk-size-xs: calc(1em * round(pow(var(--lk-scalefactor), -1), 0.001));
|
|
31
|
+
--lk-size-2xs: calc(1em * round(pow(var(--lk-scalefactor), -2), 0.001));
|
|
32
|
+
--lk-size-3xs: calc(1em * round(pow(var(--lk-scalefactor), -3), 0.001));
|
|
33
|
+
--lk-size-lg: calc(1em * var(--lk-scalefactor));
|
|
34
|
+
--lk-size-xl: calc(1em * round(pow(var(--lk-scalefactor), 2), 0.001));
|
|
35
|
+
--lk-size-2xl: calc(1em * round(pow(var(--lk-scalefactor), 3), 0.001));
|
|
36
|
+
--lk-size-3xl: calc(1em * round(pow(var(--lk-scalefactor), 4), 0.001));
|
|
37
|
+
--lk-size-4xl: calc(1em * round(pow(var(--lk-scalefactor), 5), 0.001));
|
|
38
|
+
|
|
39
|
+
/* Unitless sizes; required for adhoc calculations (division and multiplication in calc() require unitless numbers */
|
|
40
|
+
--lk-size-sm-unitless: calc(1 / var(--lk-scalefactor));
|
|
41
|
+
--lk-size-xs-unitless: calc(var(--lk-size-sm-unitless) / var(--lk-scalefactor));
|
|
42
|
+
--lk-size-2xs-unitless: calc(var(--lk-size-xs-unitless) / var(--lk-scalefactor));
|
|
43
|
+
--lk-size-lg-unitless: calc(1 * var(--lk-scalefactor));
|
|
44
|
+
--lk-size-xl-unitless: calc(var(--lk-size-lg-unitless) * var(--lk-scalefactor));
|
|
45
|
+
--lk-size-2xl-unitless: calc(var(--lk-size-xl-unitless) * var(--lk-scalefactor));
|
|
46
|
+
|
|
47
|
+
/* Colors - Light */
|
|
48
|
+
--light__primary_lkv: #0051e0;
|
|
49
|
+
--light__onprimary_lkv: #faf8ff;
|
|
50
|
+
--light__primarycontainer_lkv: #dbe1ff;
|
|
51
|
+
--light__onprimarycontainer_lkv: #00174d;
|
|
52
|
+
--light__secondary_lkv: #40617f;
|
|
53
|
+
--light__onsecondary_lkv: #f7f9ff;
|
|
54
|
+
--light__secondarycontainer_lkv: #cde5ff;
|
|
55
|
+
--light__onsecondarycontainer_lkv: #001d32;
|
|
56
|
+
--light__tertiary_lkv: #006878;
|
|
57
|
+
--light__ontertiary_lkv: #f0fbff;
|
|
58
|
+
--light__tertiarycontainer_lkv: #a8edff;
|
|
59
|
+
--light__ontertiarycontainer_lkv: #001f25;
|
|
60
|
+
--light__error_lkv: #bb0e45;
|
|
61
|
+
--light__onerror_lkv: #fff8f7;
|
|
62
|
+
--light__errorcontainer_lkv: #ffd9dc;
|
|
63
|
+
--light__onerrorcontainer_lkv: #400012;
|
|
64
|
+
--light__background_lkv: #fefbff;
|
|
65
|
+
--light__onbackground_lkv: #171b27;
|
|
66
|
+
--light__surface_lkv: #faf8ff;
|
|
67
|
+
--light__onsurface_lkv: #171b27;
|
|
68
|
+
--light__surfacevariant_lkv: #c8c6c6;
|
|
69
|
+
--light__onsurfacevariant_lkv: #464747;
|
|
70
|
+
--light__outline_lkv: #777777;
|
|
71
|
+
--light__outlinevariant_lkv: #c8c6c6;
|
|
72
|
+
--light__shadow_lkv: #000000;
|
|
73
|
+
--light__scrim_lkv: #000000;
|
|
74
|
+
--light__inversesurface_lkv: #2c303c;
|
|
75
|
+
--light__inverseonsurface_lkv: #eef0ff;
|
|
76
|
+
--light__inverseprimary_lkv: #b5c4ff;
|
|
77
|
+
--light__surfacedim_lkv: #d7d9ea;
|
|
78
|
+
--light__surfacebright_lkv: #faf8ff;
|
|
79
|
+
--light__surfacecontainerlowest_lkv: white;
|
|
80
|
+
--light__surfacecontainerlow_lkv: #f2f3ff;
|
|
81
|
+
--light__surfacecontainer_lkv: #ebedfe;
|
|
82
|
+
--light__surfacecontainerhigh_lkv: #e5e7f8;
|
|
83
|
+
--light__surfacecontainerhighest_lkv: #dfe2f2;
|
|
84
|
+
--light__warning_lkv: #7d5800;
|
|
85
|
+
--light__onwarning_lkv: #fff8f3;
|
|
86
|
+
--light__warningcontainer_lkv: #ffdea9;
|
|
87
|
+
--light__onwarningcontainer_lkv: #271900;
|
|
88
|
+
--light__success_lkv: #006b55;
|
|
89
|
+
--light__onsuccess_lkv: #e6fff4;
|
|
90
|
+
--light__successcontainer_lkv: #20ffce;
|
|
91
|
+
--light__onsuccesscontainer_lkv: #002118;
|
|
92
|
+
--light__info_lkv: #004ee7;
|
|
93
|
+
--light__oninfo_lkv: #faf8ff;
|
|
94
|
+
--light__infocontainer_lkv: #dce1ff;
|
|
95
|
+
--light__oninfocontainer_lkv: #001550;
|
|
96
|
+
|
|
97
|
+
/* Colors - Dark */
|
|
98
|
+
--dark__primary_lkv: #b5c4ff;
|
|
99
|
+
--dark__onprimary_lkv: #00297a;
|
|
100
|
+
--dark__primarycontainer_lkv: #003cac;
|
|
101
|
+
--dark__onprimarycontainer_lkv: #dbe1ff;
|
|
102
|
+
--dark__secondary_lkv: #a8caec;
|
|
103
|
+
--dark__onsecondary_lkv: #0b334f;
|
|
104
|
+
--dark__secondarycontainer_lkv: #274a66;
|
|
105
|
+
--dark__onsecondarycontainer_lkv: #cde5ff;
|
|
106
|
+
--dark__tertiary_lkv: #00d9fa;
|
|
107
|
+
--dark__ontertiary_lkv: #00363f;
|
|
108
|
+
--dark__tertiarycontainer_lkv: #004e5b;
|
|
109
|
+
--dark__ontertiarycontainer_lkv: #a8edff;
|
|
110
|
+
--dark__error_lkv: #ffb2bb;
|
|
111
|
+
--dark__onerror_lkv: #670021;
|
|
112
|
+
--dark__errorcontainer_lkv: #910032;
|
|
113
|
+
--dark__onerrorcontainer_lkv: #ffd9dc;
|
|
114
|
+
--dark__background_lkv: #171b27;
|
|
115
|
+
--dark__onbackground_lkv: #d1d4e4;
|
|
116
|
+
--dark__surface_lkv: #222531;
|
|
117
|
+
--dark__onsurface_lkv: #c3c6d6;
|
|
118
|
+
--dark__surfacevariant_lkv: #303030;
|
|
119
|
+
--dark__onsurfacevariant_lkv: #acabab;
|
|
120
|
+
--dark__outline_lkv: #464747;
|
|
121
|
+
--dark__outlinevariant_lkv: #303030;
|
|
122
|
+
--dark__shadow_lkv: #000000;
|
|
123
|
+
--dark__scrim_lkv: #000000;
|
|
124
|
+
--dark__inversesurface_lkv: #faf8ff;
|
|
125
|
+
--dark__inverseonsurface_lkv: #171b27;
|
|
126
|
+
--dark__inverseprimary_lkv: #b5c4ff;
|
|
127
|
+
--dark__surfacedim_lkv: #20232f;
|
|
128
|
+
--dark__surfacebright_lkv: #434653;
|
|
129
|
+
--dark__surfacecontainerlowest_lkv: #1b1f2b;
|
|
130
|
+
--dark__surfacecontainerlow_lkv: #262a36;
|
|
131
|
+
--dark__surfacecontainer_lkv: #2c303c;
|
|
132
|
+
--dark__surfacecontainerhigh_lkv: #353945;
|
|
133
|
+
--dark__surfacecontainerhighest_lkv: #3e424f;
|
|
134
|
+
--dark__warning_lkv: #ffba28;
|
|
135
|
+
--dark__onwarning_lkv: #422c00;
|
|
136
|
+
--dark__warningcontainer_lkv: #5e4100;
|
|
137
|
+
--dark__onwarningcontainer_lkv: #ffdea9;
|
|
138
|
+
--dark__success_lkv: #00e0b4;
|
|
139
|
+
--dark__onsuccess_lkv: #00382b;
|
|
140
|
+
--dark__successcontainer_lkv: #00513f;
|
|
141
|
+
--dark__onsuccesscontainer_lkv: #20ffce;
|
|
142
|
+
--dark__info_lkv: #b6c4ff;
|
|
143
|
+
--dark__oninfo_lkv: #00277f;
|
|
144
|
+
--dark__infocontainer_lkv: #003ab1;
|
|
145
|
+
--dark__oninfocontainer_lkv: #dce1ff;
|
|
146
|
+
--light__primaryfixed_lkv: #dbe1ff;
|
|
147
|
+
--light__primaryfixeddim_lkv: #b5c4ff;
|
|
148
|
+
--light__onprimaryfixed_lkv: #00174d;
|
|
149
|
+
--light__onprimaryfixedvariant_lkv: #003cac;
|
|
150
|
+
--light__secondaryfixed_lkv: #cde5ff;
|
|
151
|
+
--light__secondaryfixeddim_lkv: #a8caec;
|
|
152
|
+
--light__onsecondaryfixed_lkv: #001d32;
|
|
153
|
+
--light__onsecondaryfixedvariant_lkv: #274a66;
|
|
154
|
+
--light__tertiaryfixed_lkv: #a8edff;
|
|
155
|
+
--light__tertiaryfixeddim_lkv: #00d9fa;
|
|
156
|
+
--light__ontertiaryfixed_lkv: #001f25;
|
|
157
|
+
--light__ontertiaryfixedvariant_lkv: #004e5b;
|
|
158
|
+
--dark__primaryfixed_lkv: #dbe1ff;
|
|
159
|
+
--dark__primaryfixeddim_lkv: #b5c4ff;
|
|
160
|
+
--dark__onprimaryfixed_lkv: #00174d;
|
|
161
|
+
--dark__onprimaryfixedvariant_lkv: #003cac;
|
|
162
|
+
--dark__secondaryfixed_lkv: #cde5ff;
|
|
163
|
+
--dark__secondaryfixeddim_lkv: #a8caec;
|
|
164
|
+
--dark__onsecondaryfixed_lkv: #001d32;
|
|
165
|
+
--dark__onsecondaryfixedvariant_lkv: #274a66;
|
|
166
|
+
--dark__tertiaryfixed_lkv: #a8edff;
|
|
167
|
+
--dark__tertiaryfixeddim_lkv: #00d9fa;
|
|
168
|
+
--dark__ontertiaryfixed_lkv: #001f25;
|
|
169
|
+
--dark__ontertiaryfixedvariant_lkv: #004e5b;
|
|
170
|
+
|
|
171
|
+
/* Semantic color aliases - Light mode defaults */
|
|
172
|
+
--lk-onprimary: var(--light__onprimary_lkv);
|
|
173
|
+
--lk-primarycontainer: var(--light__primarycontainer_lkv);
|
|
174
|
+
--lk-onprimarycontainer: var(--light__onprimarycontainer_lkv);
|
|
175
|
+
--lk-secondary: var(--light__secondary_lkv);
|
|
176
|
+
--lk-onsecondary: var(--light__onsecondary_lkv);
|
|
177
|
+
--lk-secondarycontainer: var(--light__secondarycontainer_lkv);
|
|
178
|
+
--lk-onsecondarycontainer: var(--light__onsecondarycontainer_lkv);
|
|
179
|
+
--lk-tertiary: var(--light__tertiary_lkv);
|
|
180
|
+
--lk-ontertiary: var(--light__ontertiary_lkv);
|
|
181
|
+
--lk-tertiarycontainer: var(--light__tertiarycontainer_lkv);
|
|
182
|
+
--lk-ontertiarycontainer: var(--light__ontertiarycontainer_lkv);
|
|
183
|
+
--lk-onerror: var(--light__onerror_lkv);
|
|
184
|
+
--lk-errorcontainer: var(--light__errorcontainer_lkv);
|
|
185
|
+
--lk-onerrorcontainer: var(--light__onerrorcontainer_lkv);
|
|
186
|
+
--lk-background: var(--light__background_lkv);
|
|
187
|
+
--lk-onbackground: var(--light__onbackground_lkv);
|
|
188
|
+
--lk-surface: var(--light__surface_lkv);
|
|
189
|
+
--lk-onsurface: var(--light__onsurface_lkv);
|
|
190
|
+
--lk-onsurfacevariant: var(--light__onsurfacevariant_lkv);
|
|
191
|
+
--lk-surfacevariant: var(--light__surfacevariant_lkv);
|
|
192
|
+
--lk-shadow: var(--light__shadow_lkv);
|
|
193
|
+
--lk-inversesurface: var(--light__inversesurface_lkv);
|
|
194
|
+
--lk-scrim: var(--light__scrim_lkv);
|
|
195
|
+
--lk-inverseonsurface: var(--light__inverseonsurface_lkv);
|
|
196
|
+
--lk-inverseprimary: var(--light__inverseprimary_lkv);
|
|
197
|
+
--lk-success: var(--light__success_lkv);
|
|
198
|
+
--lk-onsuccess: var(--light__onsuccess_lkv);
|
|
199
|
+
--lk-successcontainer: var(--light__successcontainer_lkv);
|
|
200
|
+
--lk-onsuccesscontainer: var(--light__onsuccesscontainer_lkv);
|
|
201
|
+
--lk-warning: var(--light__warning_lkv);
|
|
202
|
+
--lk-onwarning: var(--light__onwarning_lkv);
|
|
203
|
+
--lk-warningcontainer: var(--light__warningcontainer_lkv);
|
|
204
|
+
--lk-onwarningcontainer: var(--light__onwarningcontainer_lkv);
|
|
205
|
+
--lk-info: var(--light__info_lkv);
|
|
206
|
+
--lk-oninfo: var(--light__oninfo_lkv);
|
|
207
|
+
--lk-infocontainer: var(--light__infocontainer_lkv);
|
|
208
|
+
--lk-oninfocontainer: var(--light__oninfocontainer_lkv);
|
|
209
|
+
--lk-primaryfixed: var(--light__primaryfixed_lkv);
|
|
210
|
+
--lk-onprimaryfixed: var(--light__onprimaryfixed_lkv);
|
|
211
|
+
--lk-primaryfixeddim: var(--light__primaryfixeddim_lkv);
|
|
212
|
+
--lk-onprimaryfixedvariant: var(--light__onprimaryfixedvariant_lkv);
|
|
213
|
+
--lk-secondaryfixed: var(--light__secondaryfixed_lkv);
|
|
214
|
+
--lk-secondaryfixeddim: var(--light__secondaryfixeddim_lkv);
|
|
215
|
+
--lk-onsecondaryfixed: var(--light__onsecondaryfixed_lkv);
|
|
216
|
+
--lk-onsecondaryfixedvariant: var(--light__onsecondaryfixedvariant_lkv);
|
|
217
|
+
--lk-tertiaryfixed: var(--light__tertiaryfixed_lkv);
|
|
218
|
+
--lk-ontertiaryfixed: var(--light__ontertiaryfixed_lkv);
|
|
219
|
+
--lk-tertiaryfixeddim: var(--light__tertiaryfixeddim_lkv);
|
|
220
|
+
--lk-ontertiaryfixedvariant: var(--light__ontertiaryfixedvariant_lkv);
|
|
221
|
+
--lk-surfacedim: var(--light__surfacedim_lkv);
|
|
222
|
+
--lk-surfacebright: var(--light__surfacebright_lkv);
|
|
223
|
+
--lk-surfacecontainerlowest: var(--light__surfacecontainerlowest_lkv);
|
|
224
|
+
--lk-surfacecontainer: var(--light__surfacecontainer_lkv);
|
|
225
|
+
--lk-surfacecontainerhigh: var(--light__surfacecontainerhigh_lkv);
|
|
226
|
+
--lk-surfacecontainerhighest: var(--light__surfacecontainerhighest_lkv);
|
|
227
|
+
--lk-surfacecontainerlow: var(--light__surfacecontainerlow_lkv);
|
|
228
|
+
--lk-outlinevariant: var(--light__outlinevariant_lkv);
|
|
229
|
+
--lk-outline: var(--light__outline_lkv);
|
|
230
|
+
--lk-error: var(--light__error_lkv);
|
|
231
|
+
--lk-primary: var(--light__primary_lkv);
|
|
232
|
+
|
|
233
|
+
/* Font smoothing */
|
|
234
|
+
-webkit-font-smoothing: antialiased;
|
|
235
|
+
-moz-osx-font-smoothing: grayscale;
|
|
236
|
+
font-smooth: never;
|
|
237
|
+
|
|
238
|
+
/************ Font Size Vars ************/
|
|
239
|
+
|
|
240
|
+
--display1-font-size: calc(1em * pow(var(--lk-wholestep), 3));
|
|
241
|
+
--display2-font-size: calc(1em * pow(var(--lk-wholestep), 2));
|
|
242
|
+
--title1-font-size: calc(1em * var(--lk-wholestep) * var(--lk-halfstep));
|
|
243
|
+
--title2-font-size: calc(1em * var(--lk-wholestep));
|
|
244
|
+
--title3-font-size: calc(1em * var(--lk-halfstep));
|
|
245
|
+
--heading-font-size: calc(1em * var(--lk-quarterstep));
|
|
246
|
+
--subheading-font-size: calc(1em / var(--lk-quarterstep));
|
|
247
|
+
--body-font-size: 1em;
|
|
248
|
+
--callout-font-size: calc(1em / var(--lk-eighthstep));
|
|
249
|
+
--label-font-size: calc((1em / var(--lk-quarterstep)) / var(--lk-eighthstep));
|
|
250
|
+
--caption-font-size: calc(1em / var(--lk-halfstep));
|
|
251
|
+
--capline-font-size: calc(1em / var(--lk-halfstep));
|
|
252
|
+
|
|
253
|
+
/* Font Line Height Vars (UNITLESS!) */
|
|
254
|
+
--display1-line-height: var(--lk-quarterstep);
|
|
255
|
+
--display2-line-height: var(--lk-halfstep);
|
|
256
|
+
--title1-line-height: var(--lk-halfstep);
|
|
257
|
+
--title2-line-height: var(--lk-halfstep);
|
|
258
|
+
--title3-line-height: var(--lk-halfstep);
|
|
259
|
+
--heading-line-height: var(--lk-halfstep);
|
|
260
|
+
--subheading-line-height: var(--lk-halfstep);
|
|
261
|
+
--body-line-height: var(--lk-wholestep);
|
|
262
|
+
--callout-line-height: var(--lk-halfstep);
|
|
263
|
+
--label-line-height: var(--lk-halfstep);
|
|
264
|
+
--caption-line-height: var(--lk-halfstep);
|
|
265
|
+
--capline-line-height: var(--lk-halfstep);
|
|
266
|
+
|
|
267
|
+
/* Optical Top Padding Offsets */
|
|
268
|
+
--display1-offset: calc(var(--display1-font-size) * calc(var(--display1-line-height) / var(--lk-wholestep)));
|
|
269
|
+
--display2-offset: calc(var(--display2-font-size) * calc(var(--display2-line-height) / var(--lk-wholestep)));
|
|
270
|
+
--title1-offset: calc(var(--title1-font-size) * calc(var(--title1-line-height) / var(--lk-wholestep)));
|
|
271
|
+
--title2-offset: calc(var(--title2-font-size) * calc(var(--title2-line-height) / var(--lk-wholestep)));
|
|
272
|
+
--title3-offset: calc(var(--title3-font-size) * calc(var(--title3-line-height) / var(--lk-wholestep)));
|
|
273
|
+
--heading-offset: calc(var(--heading-font-size) * calc(var(--heading-line-height) / var(--lk-wholestep)));
|
|
274
|
+
--subheading-offset: calc(var(--subheading-font-size) * calc(var(--subheading-line-height) / var(--lk-wholestep)));
|
|
275
|
+
--body-offset: calc(var(--body-font-size) / var(--lk-wholestep));
|
|
276
|
+
--callout-offset: calc(var(--callout-font-size) * calc(var(--callout-line-height) / var(--lk-wholestep)));
|
|
277
|
+
--label-offset: calc(var(--label-font-size) * calc(var(--label-line-height) / var(--lk-wholestep)));
|
|
278
|
+
--caption-offset: calc(var(--caption-font-size) * calc(var(--caption-line-height) / var(--lk-wholestep)));
|
|
279
|
+
--capline-offset: calc(var(--capline-font-size) * calc(var(--capline-line-height) / var(--lk-wholestep)));
|
|
280
|
+
|
|
281
|
+
/* Shadows */
|
|
282
|
+
--shadow-sm: 0 0 1px 0 var(--lk-shadow);
|
|
283
|
+
--shadow-md: 0 4px 6px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.11),
|
|
284
|
+
0 0 1px rgba(0, 0, 0, 0.4);
|
|
285
|
+
--shadow-lg: 0 11px 15px -3px rgba(0, 0, 0, 0.11),
|
|
286
|
+
0 2px 6px rgba(0, 0, 0, 0.07), 0 0 1px rgba(0, 0, 0, 0.4);
|
|
287
|
+
--shadow-xl: 0px 0px 1px 0px var(--lk-outline),
|
|
288
|
+
0px 50px 100px 0px rgba(0, 0, 0, 0.15);
|
|
289
|
+
--shadow-2xl: 0 25px 50px rgba(0, 0, 0, 0.23), 0 9px 18px rgba(0, 0, 0, 0.1),
|
|
290
|
+
0 0 1px rgba(0, 0, 0, 0.4);
|
|
291
|
+
|
|
292
|
+
/* Box Heights */
|
|
293
|
+
--display1BoxHeight: calc(var(--display1-font-size) * var(--display1-line-height));
|
|
294
|
+
--display2BoxHeight: calc(var(--display2-font-size) * var(--display2-line-height));
|
|
295
|
+
--title1BoxHeight: calc(var(--title1-font-size) * var(--title1-line-height));
|
|
296
|
+
--title2BoxHeight: calc(var(--title2-font-size) * var(--title2-line-height));
|
|
297
|
+
--title3BoxHeight: calc(var(--title3-font-size) * var(--title3-line-height));
|
|
298
|
+
--headingBoxHeight: calc(var(--heading-font-size) * var(--heading-line-height));
|
|
299
|
+
--subheadingBoxHeight: calc(var(--subheading-font-size) * var(--subheading-line-height));
|
|
300
|
+
--bodyBoxHeight: calc(var(--body-font-size) * var(--body-line-height));
|
|
301
|
+
--calloutBoxHeight: calc(var(--callout-font-size) * var(--callout-line-height));
|
|
302
|
+
--labelBoxHeight: calc(var(--label-font-size) * var(--label-line-height));
|
|
303
|
+
--captionBoxHeight: calc(var(--caption-font-size) * var(--caption-line-height));
|
|
304
|
+
--caplineBoxHeight: calc(var(--capline-font-size) * var(--capline-line-height));
|
|
305
|
+
}
|
|
306
|
+
|
|
307
|
+
/* Dark mode: prefers-color-scheme */
|
|
308
|
+
@media (prefers-color-scheme: dark) {
|
|
309
|
+
html {
|
|
310
|
+
color-scheme: dark;
|
|
311
|
+
}
|
|
312
|
+
|
|
313
|
+
:root {
|
|
314
|
+
--lk-onprimary: var(--dark__onprimary_lkv);
|
|
315
|
+
--lk-primarycontainer: var(--dark__primarycontainer_lkv);
|
|
316
|
+
--lk-onprimarycontainer: var(--dark__onprimarycontainer_lkv);
|
|
317
|
+
--lk-secondary: var(--dark__secondary_lkv);
|
|
318
|
+
--lk-onsecondary: var(--dark__onsecondary_lkv);
|
|
319
|
+
--lk-secondarycontainer: var(--dark__secondarycontainer_lkv);
|
|
320
|
+
--lk-onsecondarycontainer: var(--dark__onsecondarycontainer_lkv);
|
|
321
|
+
--lk-tertiary: var(--dark__tertiary_lkv);
|
|
322
|
+
--lk-ontertiary: var(--dark__ontertiary_lkv);
|
|
323
|
+
--lk-tertiarycontainer: var(--dark__tertiarycontainer_lkv);
|
|
324
|
+
--lk-ontertiarycontainer: var(--dark__ontertiarycontainer_lkv);
|
|
325
|
+
--lk-onerror: var(--dark__onerror_lkv);
|
|
326
|
+
--lk-errorcontainer: var(--dark__errorcontainer_lkv);
|
|
327
|
+
--lk-onerrorcontainer: var(--dark__onerrorcontainer_lkv);
|
|
328
|
+
--lk-background: var(--dark__background_lkv);
|
|
329
|
+
--lk-onbackground: var(--dark__onbackground_lkv);
|
|
330
|
+
--lk-surface: var(--dark__surface_lkv);
|
|
331
|
+
--lk-onsurface: var(--dark__onsurface_lkv);
|
|
332
|
+
--lk-onsurfacevariant: var(--dark__onsurfacevariant_lkv);
|
|
333
|
+
--lk-surfacevariant: var(--dark__surfacevariant_lkv);
|
|
334
|
+
--lk-shadow: var(--dark__shadow_lkv);
|
|
335
|
+
--lk-inversesurface: var(--dark__inversesurface_lkv);
|
|
336
|
+
--lk-scrim: var(--dark__scrim_lkv);
|
|
337
|
+
--lk-inverseonsurface: var(--dark__inverseonsurface_lkv);
|
|
338
|
+
--lk-inverseprimary: var(--dark__inverseprimary_lkv);
|
|
339
|
+
--lk-success: var(--dark__success_lkv);
|
|
340
|
+
--lk-onsuccess: var(--dark__onsuccess_lkv);
|
|
341
|
+
--lk-successcontainer: var(--dark__successcontainer_lkv);
|
|
342
|
+
--lk-onsuccesscontainer: var(--dark__onsuccesscontainer_lkv);
|
|
343
|
+
--lk-warning: var(--dark__warning_lkv);
|
|
344
|
+
--lk-onwarning: var(--dark__onwarning_lkv);
|
|
345
|
+
--lk-warningcontainer: var(--dark__warningcontainer_lkv);
|
|
346
|
+
--lk-onwarningcontainer: var(--dark__onwarningcontainer_lkv);
|
|
347
|
+
--lk-info: var(--dark__info_lkv);
|
|
348
|
+
--lk-oninfo: var(--dark__oninfo_lkv);
|
|
349
|
+
--lk-infocontainer: var(--dark__infocontainer_lkv);
|
|
350
|
+
--lk-oninfocontainer: var(--dark__oninfocontainer_lkv);
|
|
351
|
+
--lk-primaryfixed: var(--dark__primaryfixed_lkv);
|
|
352
|
+
--lk-onprimaryfixed: var(--dark__onprimaryfixed_lkv);
|
|
353
|
+
--lk-primaryfixeddim: var(--dark__primaryfixeddim_lkv);
|
|
354
|
+
--lk-onprimaryfixedvariant: var(--dark__onprimaryfixedvariant_lkv);
|
|
355
|
+
--lk-secondaryfixed: var(--dark__secondaryfixed_lkv);
|
|
356
|
+
--lk-secondaryfixeddim: var(--dark__secondaryfixeddim_lkv);
|
|
357
|
+
--lk-onsecondaryfixed: var(--dark__onsecondaryfixed_lkv);
|
|
358
|
+
--lk-onsecondaryfixedvariant: var(--dark__onsecondaryfixedvariant_lkv);
|
|
359
|
+
--lk-tertiaryfixed: var(--dark__tertiaryfixed_lkv);
|
|
360
|
+
--lk-ontertiaryfixed: var(--dark__ontertiaryfixed_lkv);
|
|
361
|
+
--lk-tertiaryfixeddim: var(--dark__tertiaryfixeddim_lkv);
|
|
362
|
+
--lk-ontertiaryfixedvariant: var(--dark__ontertiaryfixedvariant_lkv);
|
|
363
|
+
--lk-surfacedim: var(--dark__surfacedim_lkv);
|
|
364
|
+
--lk-surfacebright: var(--dark__surfacebright_lkv);
|
|
365
|
+
--lk-surfacecontainerlowest: var(--dark__surfacecontainerlowest_lkv);
|
|
366
|
+
--lk-surfacecontainer: var(--dark__surfacecontainer_lkv);
|
|
367
|
+
--lk-surfacecontainerhigh: var(--dark__surfacecontainerhigh_lkv);
|
|
368
|
+
--lk-surfacecontainerhighest: var(--dark__surfacecontainerhighest_lkv);
|
|
369
|
+
--lk-surfacecontainerlow: var(--dark__surfacecontainerlow_lkv);
|
|
370
|
+
--lk-outlinevariant: var(--dark__outlinevariant_lkv);
|
|
371
|
+
--lk-outline: var(--dark__outline_lkv);
|
|
372
|
+
--lk-error: var(--dark__error_lkv);
|
|
373
|
+
--lk-primary: var(--dark__primary_lkv);
|
|
374
|
+
}
|
|
375
|
+
}
|