@liftkit-vue/theme-css 0.1.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.
Files changed (40) hide show
  1. package/README.md +85 -0
  2. package/css/align-items.css +21 -0
  3. package/css/align-self.css +24 -0
  4. package/css/aspect-ratios.css +35 -0
  5. package/css/background-colors.css +951 -0
  6. package/css/border-color.css +241 -0
  7. package/css/border-radius.css +49 -0
  8. package/css/border-style.css +20 -0
  9. package/css/border-width.css +41 -0
  10. package/css/borders.css +33 -0
  11. package/css/breaks.css +5 -0
  12. package/css/column-span.css +47 -0
  13. package/css/cursor.css +3 -0
  14. package/css/display.css +21 -0
  15. package/css/flexboxes.css +128 -0
  16. package/css/gaps.css +42 -0
  17. package/css/height.css +27 -0
  18. package/css/index.css +689 -0
  19. package/css/index.d.ts +6 -0
  20. package/css/justify-content.css +23 -0
  21. package/css/justify-items.css +20 -0
  22. package/css/liftkit-core.css +537 -0
  23. package/css/liftkitvars.css +378 -0
  24. package/css/margins.css +947 -0
  25. package/css/opacity.css +87 -0
  26. package/css/overflow.css +27 -0
  27. package/css/padding.css +1041 -0
  28. package/css/pointer-events.css +3 -0
  29. package/css/position.css +21 -0
  30. package/css/scale.css +23 -0
  31. package/css/scrim.css +10 -0
  32. package/css/shadows.css +31 -0
  33. package/css/text-alignment.css +19 -0
  34. package/css/text-color.css +721 -0
  35. package/css/text-columns.css +4 -0
  36. package/css/typography.css +490 -0
  37. package/css/whitespace.css +3 -0
  38. package/css/width.css +7 -0
  39. package/css/z-index.css +25 -0
  40. package/package.json +28 -0
package/css/typography.css ADDED
@@ -0,0 +1,490 @@
1
+ @import "./liftkitvars.css";
2
+
3
+ /* Regular families */
4
+ .display1 {
5
+ --lineHeightInEms: calc(1em * var(--lk-quarterstep));
6
+ --lk-size-md: var(--lineHeightInEms);
7
+
8
+ --lk-size-sm: calc(var(--lineHeightInEms) * var(--lk-wholestep-dec));
9
+ --lk-size-xs: calc(var(--lineHeightInEms) * var(--lk-halfstep-dec));
10
+ --lk-size-2xs: calc(var(--lineHeightInEms) * var(--lk-quarterstep-dec));
11
+
12
+ --lk-size-lg: calc(var(--lineHeightInEms) * var(--lk-wholestep));
13
+ --lk-size-xl: calc(var(--lk-size-lg) * var(--lk-wholestep));
14
+ --lk-size-2xl: calc(var(--lk-size-xl) * var(--lk-wholestep));
15
+
16
+ letter-spacing: -0.022em;
17
+ font-size: var(--display1-font-size);
18
+ font-weight: 400;
19
+ line-height: var(--lk-quarterstep);
20
+ }
21
+
22
+ .display2 {
23
+ --lineHeightInEms: calc(1em * var(--lk-quarterstep));
24
+ --lk-size-md: var(--lineHeightInEms);
25
+
26
+ --lk-size-sm: calc(var(--lineHeightInEms) * var(--lk-wholestep-dec));
27
+ --lk-size-xs: calc(var(--lineHeightInEms) * var(--lk-halfstep-dec));
28
+ --lk-size-2xs: calc(var(--lineHeightInEms) * var(--lk-quarterstep-dec));
29
+
30
+ --lk-size-lg: calc(var(--lineHeightInEms) * var(--lk-wholestep));
31
+ --lk-size-xl: calc(var(--lk-size-lg) * var(--lk-wholestep));
32
+ --lk-size-2xl: calc(var(--lk-size-xl) * var(--lk-wholestep));
33
+
34
+ letter-spacing: -0.022em;
35
+ font-size: var(--display2-font-size);
36
+ font-weight: 400;
37
+ line-height: var(--lk-halfstep);
38
+ }
39
+
40
+ .title1 {
41
+ --lineHeightInEms: calc(1em * var(--lk-halfstep));
42
+ --lk-size-md: var(--lineHeightInEms);
43
+
44
+ --lk-size-sm: calc(var(--lineHeightInEms) * var(--lk-wholestep-dec));
45
+ --lk-size-xs: calc(var(--lineHeightInEms) * var(--lk-halfstep-dec));
46
+ --lk-size-2xs: calc(var(--lineHeightInEms) * var(--lk-quarterstep-dec));
47
+
48
+ --lk-size-lg: calc(var(--lineHeightInEms) * var(--lk-wholestep));
49
+ --lk-size-xl: calc(var(--lk-size-lg) * var(--lk-wholestep));
50
+ --lk-size-2xl: calc(var(--lk-size-xl) * var(--lk-wholestep));
51
+
52
+ letter-spacing: -0.022em;
53
+ font-size: var(--title1-font-size);
54
+ font-weight: 400;
55
+ line-height: var(--lk-halfstep);
56
+ }
57
+
58
+ .title2 {
59
+ --lineHeightInEms: calc(1em * var(--lk-halfstep));
60
+ --lk-size-md: var(--lineHeightInEms);
61
+
62
+ --lk-size-sm: calc(var(--lineHeightInEms) * var(--lk-wholestep-dec));
63
+ --lk-size-xs: calc(var(--lineHeightInEms) * var(--lk-halfstep-dec));
64
+ --lk-size-2xs: calc(var(--lineHeightInEms) * var(--lk-quarterstep-dec));
65
+
66
+ --lk-size-lg: calc(var(--lineHeightInEms) * var(--lk-wholestep));
67
+ --lk-size-xl: calc(var(--lk-size-lg) * var(--lk-wholestep));
68
+ --lk-size-2xl: calc(var(--lk-size-xl) * var(--lk-wholestep));
69
+
70
+ letter-spacing: -0.02em;
71
+ font-size: var(--title2-font-size);
72
+ font-weight: 400;
73
+ line-height: var(--lk-halfstep);
74
+ }
75
+
76
+ .title3 {
77
+ --lineHeightInEms: calc(1em * var(--lk-halfstep));
78
+ --lk-size-md: var(--lineHeightInEms);
79
+
80
+ --lk-size-sm: calc(var(--lineHeightInEms) * var(--lk-wholestep-dec));
81
+ --lk-size-xs: calc(var(--lineHeightInEms) * var(--lk-halfstep-dec));
82
+ --lk-size-2xs: calc(var(--lineHeightInEms) * var(--lk-quarterstep-dec));
83
+
84
+ --lk-size-lg: calc(var(--lineHeightInEms) * var(--lk-wholestep));
85
+ --lk-size-xl: calc(var(--lk-size-lg) * var(--lk-wholestep));
86
+ --lk-size-2xl: calc(var(--lk-size-xl) * var(--lk-wholestep));
87
+
88
+ letter-spacing: -0.017em;
89
+ font-size: var(--title3-font-size);
90
+ font-weight: 400;
91
+ line-height: var(--lk-halfstep);
92
+ }
93
+
94
+ .heading {
95
+ --lineHeightInEms: calc(1em * var(--lk-halfstep));
96
+ --lk-size-md: var(--lineHeightInEms);
97
+
98
+ --lk-size-sm: calc(var(--lineHeightInEms) * var(--lk-wholestep-dec));
99
+ --lk-size-xs: calc(var(--lineHeightInEms) * var(--lk-halfstep-dec));
100
+ --lk-size-2xs: calc(var(--lineHeightInEms) * var(--lk-quarterstep-dec));
101
+
102
+ --lk-size-lg: calc(var(--lineHeightInEms) * var(--lk-wholestep));
103
+ --lk-size-xl: calc(var(--lk-size-lg) * var(--lk-wholestep));
104
+ --lk-size-2xl: calc(var(--lk-size-xl) * var(--lk-wholestep));
105
+
106
+ letter-spacing: -0.014em;
107
+ font-size: var(--heading-font-size);
108
+ font-weight: 600;
109
+ line-height: var(--lk-halfstep);
110
+ }
111
+
112
+ .subheading {
113
+ --lineHeightInEms: calc(1em * var(--lk-halfstep));
114
+ --lk-size-md: var(--lineHeightInEms);
115
+
116
+ --lk-size-sm: calc(var(--lineHeightInEms) * var(--lk-wholestep-dec));
117
+ --lk-size-xs: calc(var(--lineHeightInEms) * var(--lk-halfstep-dec));
118
+ --lk-size-2xs: calc(var(--lineHeightInEms) * var(--lk-quarterstep-dec));
119
+
120
+ --lk-size-lg: calc(var(--lineHeightInEms) * var(--lk-wholestep));
121
+ --lk-size-xl: calc(var(--lk-size-lg) * var(--lk-wholestep));
122
+ --lk-size-2xl: calc(var(--lk-size-xl) * var(--lk-wholestep));
123
+
124
+ letter-spacing: -0.007em;
125
+ font-size: var(--subheading-font-size);
126
+ font-weight: 400;
127
+ line-height: var(--lk-halfstep);
128
+ }
129
+
130
+ .body {
131
+ --lineHeightInEms: var(--title2-font-size);
132
+ --lk-size-md: 1em;
133
+ --lk-size-sm: calc(var(--lineHeightInEms) * var(--lk-wholestep-dec));
134
+ --lk-size-xs: calc(var(--lineHeightInEms) * var(--lk-halfstep-dec));
135
+ --lk-size-2xs: calc(var(--lineHeightInEms) * var(--lk-quarterstep-dec));
136
+
137
+ --lk-size-lg: calc(1em * var(--lk-wholestep));
138
+ --lk-size-xl: calc(var(--lk-size-lg) * var(--lk-wholestep));
139
+ --lk-size-2xl: calc(var(--lk-size-xl) * var(--lk-wholestep));
140
+
141
+ letter-spacing: -0.011em;
142
+ font-size: 1em;
143
+ font-weight: 400;
144
+ line-height: var(--lk-wholestep);
145
+ }
146
+
147
+ .callout {
148
+ --lineHeightInEms: calc(1em * var(--lk-halfstep));
149
+ --lk-size-md: var(--lineHeightInEms);
150
+
151
+ --lk-size-sm: calc(var(--lineHeightInEms) * var(--lk-wholestep-dec));
152
+ --lk-size-xs: calc(var(--lineHeightInEms) * var(--lk-halfstep-dec));
153
+ --lk-size-2xs: calc(var(--lineHeightInEms) * var(--lk-quarterstep-dec));
154
+
155
+ --lk-size-lg: calc(var(--lineHeightInEms) * var(--lk-wholestep));
156
+ --lk-size-xl: calc(var(--lk-size-lg) * var(--lk-wholestep));
157
+ --lk-size-2xl: calc(var(--lk-size-xl) * var(--lk-wholestep));
158
+
159
+ letter-spacing: -0.009em;
160
+ font-size: var(--callout-font-size);
161
+ font-weight: 400;
162
+ line-height: var(--lk-halfstep);
163
+ }
164
+
165
+ .label {
166
+ --lineHeightInEms: calc(1em * var(--lk-halfstep));
167
+ --lk-size-md: var(--lineHeightInEms);
168
+
169
+ --lk-size-sm: calc(var(--lineHeightInEms) * var(--lk-wholestep-dec));
170
+ --lk-size-xs: calc(var(--lineHeightInEms) * var(--lk-halfstep-dec));
171
+ --lk-size-2xs: calc(var(--lineHeightInEms) * var(--lk-quarterstep-dec));
172
+
173
+ --lk-size-lg: calc(var(--lineHeightInEms) * var(--lk-wholestep));
174
+ --lk-size-xl: calc(var(--lk-size-lg) * var(--lk-wholestep));
175
+ --lk-size-2xl: calc(var(--lk-size-xl) * var(--lk-wholestep));
176
+
177
+ letter-spacing: -0.004em;
178
+ font-size: var(--label-font-size);
179
+ font-weight: 600;
180
+ line-height: var(--lk-halfstep);
181
+ }
182
+
183
+ .caption {
184
+ --lineHeightInEms: calc(1em * var(--lk-halfstep));
185
+ --lk-size-md: var(--lineHeightInEms);
186
+
187
+ --lk-size-sm: calc(var(--lineHeightInEms) * var(--lk-wholestep-dec));
188
+ --lk-size-xs: calc(var(--lineHeightInEms) * var(--lk-halfstep-dec));
189
+ --lk-size-2xs: calc(var(--lineHeightInEms) * var(--lk-quarterstep-dec));
190
+
191
+ --lk-size-lg: calc(var(--lineHeightInEms) * var(--lk-wholestep));
192
+ --lk-size-xl: calc(var(--lk-size-lg) * var(--lk-wholestep));
193
+ --lk-size-2xl: calc(var(--lk-size-xl) * var(--lk-wholestep));
194
+
195
+ letter-spacing: -0.007em;
196
+ font-size: var(--caption-font-size);
197
+ font-weight: 400;
198
+ line-height: var(--lk-halfstep);
199
+ }
200
+
201
+ .capline {
202
+ --lineHeightInEms: calc(1em * var(--lk-halfstep));
203
+ --lk-size-md: var(--lineHeightInEms);
204
+
205
+ --lk-size-sm: calc(var(--lineHeightInEms) * var(--lk-wholestep-dec));
206
+ --lk-size-xs: calc(var(--lineHeightInEms) * var(--lk-halfstep-dec));
207
+ --lk-size-2xs: calc(var(--lineHeightInEms) * var(--lk-quarterstep-dec));
208
+
209
+ --lk-size-lg: calc(var(--lineHeightInEms) * var(--lk-wholestep));
210
+ --lk-size-xl: calc(var(--lk-size-lg) * var(--lk-wholestep));
211
+ --lk-size-2xl: calc(var(--lk-size-xl) * var(--lk-wholestep));
212
+
213
+ letter-spacing: 0.0618em;
214
+ text-transform: uppercase;
215
+ font-size: var(--capline-font-size);
216
+ font-weight: 400;
217
+ line-height: var(--lk-halfstep);
218
+ }
219
+
220
+ /* Bold Families */
221
+
222
+ .display1-bold {
223
+ --lineHeightInEms: calc(1em * var(--lk-quarterstep));
224
+ --lk-size-md: calc(1em / var(--lk-wholestep));
225
+ --lk-size-sm: calc(var(--lineHeightInEms) * var(--lk-wholestep-dec));
226
+ --lk-size-xs: calc(var(--lineHeightInEms) * var(--lk-halfstep-dec));
227
+ --lk-size-2xs: calc(var(--lineHeightInEms) * var(--lk-quarterstep-dec));
228
+
229
+ --lk-size-lg: calc(1em * var(--lk-wholestep));
230
+ --lk-size-xl: calc(var(--lk-size-lg) * var(--lk-wholestep));
231
+ --lk-size-2xl: calc(var(--lk-size-xl) * var(--lk-wholestep));
232
+
233
+ letter-spacing: -0.022em;
234
+ font-size: var(--display1-font-size);
235
+ font-weight: 700;
236
+ line-height: var(--lk-quarterstep);
237
+ }
238
+
239
+ .display2-bold {
240
+ --lineHeightInEms: calc(1em * var(--lk-halfstep));
241
+ --lk-size-md: var(--lineHeightInEms);
242
+
243
+ --lk-size-sm: calc(var(--lineHeightInEms) * var(--lk-wholestep-dec));
244
+ --lk-size-xs: calc(var(--lineHeightInEms) * var(--lk-halfstep-dec));
245
+ --lk-size-2xs: calc(var(--lineHeightInEms) * var(--lk-quarterstep-dec));
246
+
247
+ --lk-size-lg: calc(var(--lineHeightInEms) * var(--lk-wholestep));
248
+ --lk-size-xl: calc(var(--lk-size-lg) * var(--lk-wholestep));
249
+ --lk-size-2xl: calc(var(--lk-size-xl) * var(--lk-wholestep));
250
+
251
+ letter-spacing: -0.022em;
252
+ font-size: var(--display2-font-size);
253
+ font-weight: 700;
254
+ line-height: var(--lk-halfstep);
255
+ }
256
+
257
+ .title1-bold {
258
+ --lineHeightInEms: calc(1em * var(--lk-halfstep));
259
+ --lk-size-md: var(--lineHeightInEms);
260
+
261
+ --lk-size-sm: calc(var(--lineHeightInEms) * var(--lk-wholestep-dec));
262
+ --lk-size-xs: calc(var(--lineHeightInEms) * var(--lk-halfstep-dec));
263
+ --lk-size-2xs: calc(var(--lineHeightInEms) * var(--lk-quarterstep-dec));
264
+
265
+ --lk-size-lg: calc(var(--lineHeightInEms) * var(--lk-wholestep));
266
+ --lk-size-xl: calc(var(--lk-size-lg) * var(--lk-wholestep));
267
+ --lk-size-2xl: calc(var(--lk-size-xl) * var(--lk-wholestep));
268
+
269
+ letter-spacing: -0.022em;
270
+ font-size: var(--title1-font-size);
271
+ font-weight: 600;
272
+ line-height: var(--lk-halfstep);
273
+ }
274
+
275
+ .title2-bold {
276
+ --lineHeightInEms: calc(1em * var(--lk-halfstep));
277
+ --lk-size-md: var(--lineHeightInEms);
278
+
279
+ --lk-size-sm: calc(var(--lineHeightInEms) * var(--lk-wholestep-dec));
280
+ --lk-size-xs: calc(var(--lineHeightInEms) * var(--lk-halfstep-dec));
281
+ --lk-size-2xs: calc(var(--lineHeightInEms) * var(--lk-quarterstep-dec));
282
+
283
+ --lk-size-lg: calc(var(--lineHeightInEms) * var(--lk-wholestep));
284
+ --lk-size-xl: calc(var(--lk-size-lg) * var(--lk-wholestep));
285
+ --lk-size-2xl: calc(var(--lk-size-xl) * var(--lk-wholestep));
286
+
287
+ letter-spacing: -0.02em;
288
+ font-size: var(--title2-font-size);
289
+ font-weight: 600;
290
+ line-height: var(--lk-halfstep);
291
+ }
292
+
293
+ .title3-bold {
294
+ --lineHeightInEms: calc(1em * var(--lk-halfstep));
295
+ --lk-size-md: var(--lineHeightInEms);
296
+
297
+ --lk-size-sm: calc(var(--lineHeightInEms) * var(--lk-wholestep-dec));
298
+ --lk-size-xs: calc(var(--lineHeightInEms) * var(--lk-halfstep-dec));
299
+ --lk-size-2xs: calc(var(--lineHeightInEms) * var(--lk-quarterstep-dec));
300
+
301
+ --lk-size-lg: calc(var(--lineHeightInEms) * var(--lk-wholestep));
302
+ --lk-size-xl: calc(var(--lk-size-lg) * var(--lk-wholestep));
303
+ --lk-size-2xl: calc(var(--lk-size-xl) * var(--lk-wholestep));
304
+
305
+ letter-spacing: -0.017em;
306
+ font-size: var(--title3-font-size);
307
+ font-weight: 600;
308
+ line-height: var(--lk-halfstep);
309
+ }
310
+
311
+ .heading-bold {
312
+ --lineHeightInEms: calc(1em * var(--lk-halfstep));
313
+ --lk-size-md: var(--lineHeightInEms);
314
+
315
+ --lk-size-sm: calc(var(--lineHeightInEms) * var(--lk-wholestep-dec));
316
+ --lk-size-xs: calc(var(--lineHeightInEms) * var(--lk-halfstep-dec));
317
+ --lk-size-2xs: calc(var(--lineHeightInEms) * var(--lk-quarterstep-dec));
318
+
319
+ --lk-size-lg: calc(var(--lineHeightInEms) * var(--lk-wholestep));
320
+ --lk-size-xl: calc(var(--lk-size-lg) * var(--lk-wholestep));
321
+ --lk-size-2xl: calc(var(--lk-size-xl) * var(--lk-wholestep));
322
+
323
+ letter-spacing: -0.014em;
324
+ font-size: var(--heading-font-size);
325
+ font-weight: 700;
326
+ line-height: var(--lk-halfstep);
327
+ }
328
+
329
+ .subheading-bold {
330
+ --lineHeightInEms: calc(1em * var(--lk-halfstep));
331
+ --lk-size-md: var(--lineHeightInEms);
332
+ --lk-size-sm: calc(var(--lineHeightInEms) * var(--lk-wholestep-dec));
333
+ --lk-size-xs: calc(var(--lineHeightInEms) * var(--lk-halfstep-dec));
334
+ --lk-size-2xs: calc(var(--lineHeightInEms) * var(--lk-quarterstep-dec));
335
+
336
+ --lk-size-lg: calc(var(--lineHeightInEms) * var(--lk-wholestep));
337
+ --lk-size-xl: calc(var(--lk-size-lg) * var(--lk-wholestep));
338
+ --lk-size-2xl: calc(var(--lk-size-xl) * var(--lk-wholestep));
339
+
340
+
341
+ letter-spacing: -0.007em;
342
+ font-size: var(--subheading-font-size);
343
+ font-weight: 600;
344
+ line-height: var(--lk-halfstep);
345
+ }
346
+
347
+ .body-bold {
348
+ --lineHeightInEms: calc(1em * var(--lk-wholestep));
349
+ --lk-size-md: var(--lineHeightInEms);
350
+ --lk-size-sm: calc(var(--lineHeightInEms) * var(--lk-wholestep-dec));
351
+ --lk-size-xs: calc(var(--lineHeightInEms) * var(--lk-halfstep-dec));
352
+ --lk-size-2xs: calc(var(--lineHeightInEms) * var(--lk-quarterstep-dec));
353
+
354
+ --lk-size-lg: calc(var(--lineHeightInEms) * var(--lk-wholestep));
355
+ --lk-size-xl: calc(var(--lk-size-lg) * var(--lk-wholestep));
356
+ --lk-size-2xl: calc(var(--lk-size-xl) * var(--lk-wholestep));
357
+
358
+ letter-spacing: -0.011em;
359
+ padding: 0;
360
+ font-size: 1em;
361
+ font-weight: 600;
362
+ line-height: var(--lk-wholestep);
363
+ }
364
+
365
+ .callout-bold {
366
+ --lineHeightInEms: calc(1em * var(--lk-halfstep));
367
+ --lk-size-md: var(--lineHeightInEms);
368
+
369
+ --lk-size-sm: calc(var(--lineHeightInEms) * var(--lk-wholestep-dec));
370
+ --lk-size-xs: calc(var(--lineHeightInEms) * var(--lk-halfstep-dec));
371
+ --lk-size-2xs: calc(var(--lineHeightInEms) * var(--lk-quarterstep-dec));
372
+
373
+ --lk-size-lg: calc(var(--lineHeightInEms) * var(--lk-wholestep));
374
+ --lk-size-xl: calc(var(--lk-size-lg) * var(--lk-wholestep));
375
+ --lk-size-2xl: calc(var(--lk-size-xl) * var(--lk-wholestep));
376
+
377
+ letter-spacing: -0.009em;
378
+ font-size: var(--callout-font-size);
379
+ font-weight: 600;
380
+ line-height: var(--lk-halfstep);
381
+ text-decoration: none;
382
+ }
383
+
384
+ .label-bold {
385
+ --lineHeightInEms: calc(1em * var(--lk-halfstep));
386
+ --lk-size-md: var(--lineHeightInEms);
387
+
388
+ --lk-size-sm: calc(var(--lineHeightInEms) * var(--lk-wholestep-dec));
389
+ --lk-size-xs: calc(var(--lineHeightInEms) * var(--lk-halfstep-dec));
390
+ --lk-size-2xs: calc(var(--lineHeightInEms) * var(--lk-quarterstep-dec));
391
+
392
+ --lk-size-lg: calc(var(--lineHeightInEms) * var(--lk-wholestep));
393
+ --lk-size-xl: calc(var(--lk-size-lg) * var(--lk-wholestep));
394
+ --lk-size-2xl: calc(var(--lk-size-xl) * var(--lk-wholestep));
395
+
396
+ letter-spacing: -0.004em;
397
+ font-size: var(--label-font-size);
398
+ font-weight: 700;
399
+ line-height: var(--lk-halfstep);
400
+ }
401
+
402
+ .caption-bold {
403
+ --lineHeightInEms: calc(1em * var(--lk-halfstep));
404
+ --lk-size-md: var(--lineHeightInEms);
405
+
406
+ --lk-size-sm: calc(var(--lineHeightInEms) * var(--lk-wholestep-dec));
407
+ --lk-size-xs: calc(var(--lineHeightInEms) * var(--lk-halfstep-dec));
408
+ --lk-size-2xs: calc(var(--lineHeightInEms) * var(--lk-quarterstep-dec));
409
+
410
+ --lk-size-lg: calc(var(--lineHeightInEms) * var(--lk-wholestep));
411
+ --lk-size-xl: calc(var(--lk-size-lg) * var(--lk-wholestep));
412
+ --lk-size-2xl: calc(var(--lk-size-xl) * var(--lk-wholestep));
413
+
414
+ letter-spacing: -0.007em;
415
+ font-size: var(--caption-font-size);
416
+ font-weight: 600;
417
+ line-height: var(--lk-halfstep);
418
+ }
419
+
420
+ .capline-bold {
421
+ --lineHeightInEms: calc(1em * var(--lk-halfstep));
422
+ --lk-size-md: var(--lineHeightInEms);
423
+
424
+ --lk-size-sm: calc(var(--lineHeightInEms) * var(--lk-wholestep-dec));
425
+ --lk-size-xs: calc(var(--lineHeightInEms) * var(--lk-halfstep-dec));
426
+ --lk-size-2xs: calc(var(--lineHeightInEms) * var(--lk-quarterstep-dec));
427
+
428
+ --lk-size-lg: calc(var(--lineHeightInEms) * var(--lk-wholestep));
429
+ --lk-size-xl: calc(var(--lk-size-lg) * var(--lk-wholestep));
430
+ --lk-size-2xl: calc(var(--lk-size-xl) * var(--lk-wholestep));
431
+
432
+ letter-spacing: 0.0618em;
433
+ text-transform: uppercase;
434
+ font-size: var(--capline-font-size);
435
+ font-weight: 600;
436
+ line-height: var(--lk-halfstep);
437
+ }
438
+
439
+ @media screen and (max-width: 767px) {
440
+
441
+ .display1-bold,
442
+ .display1 {
443
+ font-size: 3.3301em;
444
+ }
445
+ }
446
+
447
+ @media screen and (max-width: 479px) {
448
+ .display1 {
449
+ font-size: 2.61743em;
450
+ }
451
+
452
+ .display1-bold {
453
+ font-size: 2.61743em;
454
+ }
455
+
456
+ .display2 {
457
+ font-size: 2.05818em;
458
+ }
459
+
460
+ .display2-bold {
461
+ font-size: 2.05818em;
462
+ }
463
+
464
+ .title1-bold,
465
+ .title1 {
466
+ font-size: 1.82285em;
467
+ }
468
+ }
469
+
470
+
471
+ .weight-400 {
472
+ font-weight: 400;
473
+ }
474
+
475
+ .italic {
476
+ font-style: italic;
477
+ }
478
+
479
+ .is-link {
480
+ transition: opacity 0.2s ease;
481
+ cursor: pointer;
482
+ }
483
+
484
+ .is-link:hover {
485
+ opacity: 0.6;
486
+ }
487
+
488
+ .mono {
489
+ font-family: monospace;
490
+ }
package/css/whitespace.css ADDED
@@ -0,0 +1,3 @@
1
+ .whitespace-pre {
2
+ white-space: pre;
3
+ }
package/css/width.css ADDED
@@ -0,0 +1,7 @@
1
+ .w-full {
2
+ width: 100%;
3
+ }
4
+
5
+ .max-w-full {
6
+ max-width: 100%;
7
+ }
package/css/z-index.css ADDED
@@ -0,0 +1,25 @@
1
+ .z-neg1 {
2
+ z-index: 1;
3
+ }
4
+ .z-0 {
5
+ z-index: 0;
6
+ }
7
+
8
+ .z-1 {
9
+ z-index: 1;
10
+ }
11
+ .z-2 {
12
+ z-index: 2;
13
+ }
14
+ .z-3 {
15
+ z-index: 3;
16
+ }
17
+ .z-4 {
18
+ z-index: 4;
19
+ }
20
+ .z-5 {
21
+ z-index: 5;
22
+ }
23
+ .z-99 {
24
+ z-index: 99;
25
+ }
package/package.json ADDED
@@ -0,0 +1,28 @@
1
+ {
2
+ "name": "@liftkit-vue/theme-css",
3
+ "version": "0.1.0",
4
+ "description": "LiftKit pure CSS theme with golden-ratio design tokens - Tailwind v4 compatible",
5
+ "license": "MIT",
6
+ "author": "annrie",
7
+ "repository": {
8
+ "type": "git",
9
+ "url": "https://github.com/annrie/liftkit-vue",
10
+ "directory": "packages/theme-css"
11
+ },
12
+ "homepage": "https://github.com/annrie/liftkit-vue/tree/main/packages/theme-css",
13
+ "bugs": "https://github.com/annrie/liftkit-vue/issues",
14
+ "keywords": [
15
+ "css",
16
+ "design-tokens",
17
+ "tailwind",
18
+ "material-design",
19
+ "golden-ratio",
20
+ "theme",
21
+ "liftkit"
22
+ ],
23
+ "style": "css/index.css",
24
+ "exports": {
25
+ ".": "./css/index.css"
26
+ },
27
+ "files": ["css"]
28
+ }