@luminescent/ui 7.0.1 → 7.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.
- package/package.json +18 -9
- package/src/formatting.css +27 -17
- package/src/index.css +143 -51
package/package.json
CHANGED
|
@@ -1,21 +1,30 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@luminescent/ui",
|
|
3
|
-
"version": "7.0
|
|
3
|
+
"version": "7.1.0",
|
|
4
|
+
"private": false,
|
|
4
5
|
"description": "Luminescent UI library",
|
|
5
|
-
"
|
|
6
|
-
|
|
7
|
-
"
|
|
6
|
+
"homepage": "https://ui.luminescent.dev",
|
|
7
|
+
"bugs": {
|
|
8
|
+
"url": "https://github.com/LuminescentDev/ui/issues"
|
|
9
|
+
},
|
|
10
|
+
"license": "AGPL-3.0-or-later",
|
|
11
|
+
"author": {
|
|
12
|
+
"name": "saboooor",
|
|
13
|
+
"url": "https://saboor.ca"
|
|
14
|
+
},
|
|
15
|
+
"repository": {
|
|
16
|
+
"type": "git",
|
|
17
|
+
"url": "https://github.com/LuminescentDev/ui.git"
|
|
8
18
|
},
|
|
9
19
|
"files": [
|
|
10
20
|
"src/index.css",
|
|
11
21
|
"src/formatting.css"
|
|
12
22
|
],
|
|
13
|
-
"engines": {
|
|
14
|
-
"node": ">=23.11.0"
|
|
15
|
-
},
|
|
16
|
-
"license": "AGPL-3.0-or-later",
|
|
17
|
-
"private": false,
|
|
18
23
|
"type": "module",
|
|
24
|
+
"exports": {
|
|
25
|
+
".": "./src/index.css",
|
|
26
|
+
"./formatting": "./src/formatting.css"
|
|
27
|
+
},
|
|
19
28
|
"publishConfig": {
|
|
20
29
|
"access": "public"
|
|
21
30
|
},
|
package/src/formatting.css
CHANGED
|
@@ -2,24 +2,30 @@ a {
|
|
|
2
2
|
@apply text-blue-400 no-underline hover:text-blue-500 hover:underline;
|
|
3
3
|
}
|
|
4
4
|
|
|
5
|
-
a.lum-btn,
|
|
5
|
+
a.lum-btn,
|
|
6
|
+
a.lum-card {
|
|
6
7
|
@apply text-lum-text! hover:no-underline!;
|
|
7
8
|
}
|
|
8
9
|
|
|
9
10
|
blockquote {
|
|
10
|
-
@apply lum-card border-l-6 border-l-blue-400
|
|
11
|
+
@apply lum-card my-4 border-l-6 border-l-blue-400;
|
|
11
12
|
}
|
|
12
13
|
|
|
13
14
|
blockquote p:first-child {
|
|
14
|
-
@apply mt-0
|
|
15
|
+
@apply mt-0;
|
|
15
16
|
}
|
|
16
17
|
|
|
17
18
|
blockquote p:last-child {
|
|
18
19
|
@apply mb-0;
|
|
19
20
|
}
|
|
20
21
|
|
|
21
|
-
h1,
|
|
22
|
-
|
|
22
|
+
h1,
|
|
23
|
+
h2,
|
|
24
|
+
h3,
|
|
25
|
+
h4,
|
|
26
|
+
h5,
|
|
27
|
+
h6 {
|
|
28
|
+
@apply relative scroll-mt-36 text-lg font-semibold sm:text-xl;
|
|
23
29
|
}
|
|
24
30
|
|
|
25
31
|
h1,
|
|
@@ -33,11 +39,11 @@ h6 {
|
|
|
33
39
|
}
|
|
34
40
|
|
|
35
41
|
h1 {
|
|
36
|
-
@apply text-4xl sm:text-5xl
|
|
42
|
+
@apply text-4xl font-extrabold sm:text-5xl;
|
|
37
43
|
}
|
|
38
44
|
|
|
39
45
|
h2 {
|
|
40
|
-
@apply text-3xl sm:text-4xl
|
|
46
|
+
@apply text-3xl font-bold sm:text-4xl;
|
|
41
47
|
}
|
|
42
48
|
|
|
43
49
|
h3 {
|
|
@@ -52,8 +58,9 @@ p {
|
|
|
52
58
|
@apply text-lum-text-secondary;
|
|
53
59
|
}
|
|
54
60
|
|
|
55
|
-
ul,
|
|
56
|
-
|
|
61
|
+
ul,
|
|
62
|
+
ol {
|
|
63
|
+
@apply text-lum-text-secondary my-4 ml-10 list-disc;
|
|
57
64
|
}
|
|
58
65
|
|
|
59
66
|
ol {
|
|
@@ -65,7 +72,7 @@ li {
|
|
|
65
72
|
}
|
|
66
73
|
|
|
67
74
|
pre {
|
|
68
|
-
@apply overflow-auto p-4
|
|
75
|
+
@apply lum-card my-2 overflow-auto p-4;
|
|
69
76
|
}
|
|
70
77
|
|
|
71
78
|
pre.shiki {
|
|
@@ -73,26 +80,29 @@ pre.shiki {
|
|
|
73
80
|
}
|
|
74
81
|
|
|
75
82
|
pre code {
|
|
76
|
-
@apply border-none select-auto
|
|
83
|
+
@apply border-none bg-transparent select-auto;
|
|
77
84
|
}
|
|
78
85
|
|
|
79
86
|
code {
|
|
80
|
-
@apply bg-lum-card-bg
|
|
87
|
+
@apply bg-lum-card-bg rounded-lum border-b-lum-border/20 border-b-2 px-1 py-0.5 break-all select-all sm:break-normal;
|
|
81
88
|
}
|
|
82
89
|
|
|
83
90
|
table {
|
|
84
91
|
@apply my-5;
|
|
85
92
|
}
|
|
86
93
|
|
|
87
|
-
th,
|
|
94
|
+
th,
|
|
95
|
+
td {
|
|
88
96
|
@apply p-2 align-top;
|
|
89
97
|
}
|
|
90
98
|
|
|
91
|
-
th:first-child,
|
|
99
|
+
th:first-child,
|
|
100
|
+
td:first-child {
|
|
92
101
|
@apply pl-0;
|
|
93
102
|
}
|
|
94
103
|
|
|
95
|
-
th:last-child,
|
|
104
|
+
th:last-child,
|
|
105
|
+
td:last-child {
|
|
96
106
|
@apply pr-0;
|
|
97
107
|
}
|
|
98
108
|
|
|
@@ -101,5 +111,5 @@ img {
|
|
|
101
111
|
}
|
|
102
112
|
|
|
103
113
|
hr {
|
|
104
|
-
@apply my-8 border-t-1
|
|
105
|
-
}
|
|
114
|
+
@apply border-t-lum-border/20 my-8 border-t-1;
|
|
115
|
+
}
|
package/src/index.css
CHANGED
|
@@ -12,6 +12,7 @@
|
|
|
12
12
|
--color-luminescent-950: oklch(28.4% 0.109 327.907);
|
|
13
13
|
--lum-btn-p-x: 2;
|
|
14
14
|
--lum-input-p-x: 1.5;
|
|
15
|
+
--lum-label-gap: 0.25rem;
|
|
15
16
|
--lum-border-radius: var(--radius-lg);
|
|
16
17
|
--lum-border-superellipse: 1;
|
|
17
18
|
--lum-border-mix: 20%;
|
|
@@ -30,48 +31,67 @@
|
|
|
30
31
|
|
|
31
32
|
/* Shared utilities to reduce duplication across background utilities */
|
|
32
33
|
@utility lum-bg-gradient-vars {
|
|
33
|
-
--gradient-color: color-mix(
|
|
34
|
+
--gradient-color: color-mix(
|
|
35
|
+
in oklab,
|
|
36
|
+
var(--color-lum-gradient) var(--lum-gradient-mix),
|
|
37
|
+
var(--bg-color)
|
|
38
|
+
);
|
|
34
39
|
}
|
|
35
40
|
|
|
36
41
|
@utility lum-depth-shadow {
|
|
37
42
|
box-shadow:
|
|
38
|
-
inset 0 1px 2px var(--border-color),
|
|
43
|
+
inset 0 1px 2px var(--lum-border-color),
|
|
39
44
|
0 1px 2px rgba(0, 0, 0, 0.05),
|
|
40
45
|
0 1px 3px rgba(0, 0, 0, 0.1);
|
|
41
46
|
}
|
|
42
47
|
@utility lum-depth-shadow-fade {
|
|
43
48
|
box-shadow:
|
|
44
|
-
inset 0 calc(0.5px * var(--lum-depth)) calc(1px * var(--lum-depth))
|
|
45
|
-
|
|
46
|
-
0 calc(0.5px * var(--lum-depth)) calc(
|
|
49
|
+
inset 0 calc(0.5px * var(--lum-depth)) calc(1px * var(--lum-depth))
|
|
50
|
+
var(--lum-border-color),
|
|
51
|
+
0 calc(0.5px * var(--lum-depth)) calc(1px * var(--lum-depth))
|
|
52
|
+
rgba(0, 0, 0, 0.05),
|
|
53
|
+
0 calc(0.5px * var(--lum-depth)) calc(1.5px * var(--lum-depth))
|
|
54
|
+
rgba(0, 0, 0, 0.1);
|
|
47
55
|
}
|
|
48
56
|
|
|
49
57
|
@utility lum-focus-border {
|
|
50
|
-
|
|
51
|
-
|
|
58
|
+
outline: 1px solid transparent;
|
|
59
|
+
outline-offset: -1px;
|
|
60
|
+
|
|
61
|
+
&:focus-visible {
|
|
62
|
+
outline-color: var(--color-lum-accent);
|
|
52
63
|
}
|
|
53
64
|
}
|
|
54
65
|
|
|
55
66
|
@utility lum-border-fade {
|
|
67
|
+
border-width: calc(1px * (1 - clamp(0, var(--lum-depth), 1)));
|
|
56
68
|
border-color: color-mix(
|
|
57
69
|
in oklab,
|
|
58
|
-
var(--border-color),
|
|
59
|
-
|
|
70
|
+
var(--lum-border-color),
|
|
71
|
+
var(--lum-surface-color) calc(var(--lum-depth) * 100%)
|
|
60
72
|
);
|
|
61
73
|
}
|
|
62
74
|
|
|
63
75
|
@utility lum-allow-keywords {
|
|
64
76
|
background-color: --value('inherit', 'transparent', 'currentColor');
|
|
65
77
|
border-color: --value('inherit', 'transparent', 'currentColor');
|
|
66
|
-
box-shadow:
|
|
67
|
-
0 calc(1px * var(--lum-depth)) calc(2px * var(--lum-depth))
|
|
68
|
-
|
|
78
|
+
box-shadow:
|
|
79
|
+
inset 0 calc(1px * var(--lum-depth)) calc(2px * var(--lum-depth))
|
|
80
|
+
--value('inherit', 'transparent', 'currentColor'),
|
|
81
|
+
0 calc(1px * var(--lum-depth)) calc(2px * var(--lum-depth))
|
|
82
|
+
--value('inherit', 'transparent', 'currentColor'),
|
|
83
|
+
0 calc(1px * var(--lum-depth)) calc(3px * var(--lum-depth))
|
|
84
|
+
--value('inherit', 'transparent', 'currentColor');
|
|
69
85
|
}
|
|
70
86
|
|
|
71
|
-
|
|
72
87
|
@utility lum-bg {
|
|
73
88
|
/* Inlined base color logic (previously in lum-bg-base) */
|
|
74
|
-
--border-color: color-mix(
|
|
89
|
+
--lum-border-color: color-mix(
|
|
90
|
+
in oklab,
|
|
91
|
+
var(--color-lum-border) var(--lum-border-mix),
|
|
92
|
+
var(--bg-color)
|
|
93
|
+
);
|
|
94
|
+
--lum-surface-color: var(--bg-color);
|
|
75
95
|
|
|
76
96
|
@apply border border-transparent outline-none;
|
|
77
97
|
@apply lum-focus-border;
|
|
@@ -86,7 +106,12 @@
|
|
|
86
106
|
--alpha: --modifier(integer);
|
|
87
107
|
--bg-color: --alpha(--value([color]) / calc(var(--alpha, 100) * 1%));
|
|
88
108
|
--bg-color: --alpha(--value(--color-*) / calc(var(--alpha, 100) * 1%));
|
|
89
|
-
--border-color: color-mix(
|
|
109
|
+
--lum-border-color: color-mix(
|
|
110
|
+
in oklab,
|
|
111
|
+
var(--color-lum-border) var(--lum-border-mix),
|
|
112
|
+
var(--bg-color)
|
|
113
|
+
);
|
|
114
|
+
--lum-surface-color: var(--bg-color);
|
|
90
115
|
|
|
91
116
|
@apply border border-transparent outline-none;
|
|
92
117
|
@apply lum-focus-border;
|
|
@@ -102,15 +127,28 @@
|
|
|
102
127
|
--alpha: --modifier(integer);
|
|
103
128
|
--bg-color: --alpha(--value([color]) / calc(var(--alpha, 100) * 1%));
|
|
104
129
|
--bg-color: --alpha(--value(--color-*) / calc(var(--alpha, 100) * 1%));
|
|
105
|
-
--border-color: color-mix(
|
|
106
|
-
|
|
130
|
+
--lum-border-color: color-mix(
|
|
131
|
+
in oklab,
|
|
132
|
+
var(--color-lum-border) var(--lum-border-mix),
|
|
133
|
+
var(--bg-color)
|
|
134
|
+
);
|
|
135
|
+
--gradient-color: color-mix(
|
|
136
|
+
in oklab,
|
|
137
|
+
var(--color-lum-gradient) var(--lum-gradient-mix),
|
|
138
|
+
var(--bg-color)
|
|
139
|
+
);
|
|
140
|
+
--lum-surface-color: var(--gradient-color);
|
|
107
141
|
|
|
108
142
|
@apply border border-transparent outline-none;
|
|
109
143
|
@apply lum-focus-border;
|
|
110
144
|
@apply lum-border-fade;
|
|
111
145
|
@apply lum-depth-shadow-fade;
|
|
112
146
|
|
|
113
|
-
background: linear-gradient(
|
|
147
|
+
background: linear-gradient(
|
|
148
|
+
var(--lum-gradient-angle),
|
|
149
|
+
var(--bg-color),
|
|
150
|
+
var(--gradient-color)
|
|
151
|
+
);
|
|
114
152
|
@apply lum-allow-keywords;
|
|
115
153
|
}
|
|
116
154
|
|
|
@@ -119,12 +157,17 @@
|
|
|
119
157
|
--alpha: --modifier(integer);
|
|
120
158
|
--bg-color: --alpha(--value([color]) / calc(var(--alpha, 100) * 1%));
|
|
121
159
|
--bg-color: --alpha(--value(--color-*) / calc(var(--alpha, 100) * 1%));
|
|
122
|
-
--border-color: color-mix(
|
|
160
|
+
--lum-border-color: color-mix(
|
|
161
|
+
in oklab,
|
|
162
|
+
var(--color-lum-border) var(--lum-border-mix),
|
|
163
|
+
var(--bg-color)
|
|
164
|
+
);
|
|
165
|
+
--lum-surface-color: var(--bg-color);
|
|
123
166
|
|
|
124
167
|
@apply border border-transparent outline-none;
|
|
125
168
|
@apply lum-focus-border;
|
|
126
169
|
|
|
127
|
-
border-color: var(--border-color);
|
|
170
|
+
border-color: var(--lum-border-color);
|
|
128
171
|
background-color: var(--bg-color);
|
|
129
172
|
|
|
130
173
|
@apply lum-allow-keywords;
|
|
@@ -135,14 +178,27 @@
|
|
|
135
178
|
--alpha: --modifier(integer);
|
|
136
179
|
--bg-color: --alpha(--value([color]) / calc(var(--alpha, 100) * 1%));
|
|
137
180
|
--bg-color: --alpha(--value(--color-*) / calc(var(--alpha, 100) * 1%));
|
|
138
|
-
--border-color: color-mix(
|
|
139
|
-
|
|
181
|
+
--lum-border-color: color-mix(
|
|
182
|
+
in oklab,
|
|
183
|
+
var(--color-lum-border) var(--lum-border-mix),
|
|
184
|
+
var(--bg-color)
|
|
185
|
+
);
|
|
186
|
+
--gradient-color: color-mix(
|
|
187
|
+
in oklab,
|
|
188
|
+
var(--color-lum-gradient) var(--lum-gradient-mix),
|
|
189
|
+
var(--bg-color)
|
|
190
|
+
);
|
|
191
|
+
--lum-surface-color: var(--gradient-color);
|
|
140
192
|
|
|
141
193
|
@apply border border-transparent outline-none;
|
|
142
194
|
@apply lum-focus-border;
|
|
143
195
|
|
|
144
|
-
border-color: var(--border-color);
|
|
145
|
-
background: linear-gradient(
|
|
196
|
+
border-color: var(--lum-border-color);
|
|
197
|
+
background: linear-gradient(
|
|
198
|
+
var(--lum-gradient-angle),
|
|
199
|
+
var(--bg-color),
|
|
200
|
+
var(--gradient-color)
|
|
201
|
+
);
|
|
146
202
|
|
|
147
203
|
@apply lum-allow-keywords;
|
|
148
204
|
}
|
|
@@ -152,7 +208,12 @@
|
|
|
152
208
|
--alpha: --modifier(integer);
|
|
153
209
|
--bg-color: --alpha(--value([color]) / calc(var(--alpha, 100) * 1%));
|
|
154
210
|
--bg-color: --alpha(--value(--color-*) / calc(var(--alpha, 100) * 1%));
|
|
155
|
-
--border-color: color-mix(
|
|
211
|
+
--lum-border-color: color-mix(
|
|
212
|
+
in oklab,
|
|
213
|
+
var(--color-lum-border) var(--lum-border-mix),
|
|
214
|
+
var(--bg-color)
|
|
215
|
+
);
|
|
216
|
+
--lum-surface-color: var(--bg-color);
|
|
156
217
|
|
|
157
218
|
@apply lum-depth-shadow;
|
|
158
219
|
|
|
@@ -166,12 +227,25 @@
|
|
|
166
227
|
--alpha: --modifier(integer);
|
|
167
228
|
--bg-color: --alpha(--value([color]) / calc(var(--alpha, 100) * 1%));
|
|
168
229
|
--bg-color: --alpha(--value(--color-*) / calc(var(--alpha, 100) * 1%));
|
|
169
|
-
--border-color: color-mix(
|
|
170
|
-
|
|
230
|
+
--lum-border-color: color-mix(
|
|
231
|
+
in oklab,
|
|
232
|
+
var(--color-lum-border) var(--lum-border-mix),
|
|
233
|
+
var(--bg-color)
|
|
234
|
+
);
|
|
235
|
+
--gradient-color: color-mix(
|
|
236
|
+
in oklab,
|
|
237
|
+
var(--color-lum-gradient) var(--lum-gradient-mix),
|
|
238
|
+
var(--bg-color)
|
|
239
|
+
);
|
|
240
|
+
--lum-surface-color: var(--gradient-color);
|
|
171
241
|
|
|
172
242
|
@apply lum-depth-shadow;
|
|
173
243
|
|
|
174
|
-
background: linear-gradient(
|
|
244
|
+
background: linear-gradient(
|
|
245
|
+
var(--lum-gradient-angle),
|
|
246
|
+
var(--bg-color),
|
|
247
|
+
var(--gradient-color)
|
|
248
|
+
);
|
|
175
249
|
|
|
176
250
|
@apply lum-allow-keywords;
|
|
177
251
|
}
|
|
@@ -181,15 +255,28 @@
|
|
|
181
255
|
--alpha: --modifier(integer);
|
|
182
256
|
--bg-color: --alpha(--value([color]) / calc(var(--alpha, 100) * 1%));
|
|
183
257
|
--bg-color: --alpha(--value(--color-*) / calc(var(--alpha, 100) * 1%));
|
|
184
|
-
--border-color: color-mix(
|
|
185
|
-
|
|
258
|
+
--lum-border-color: color-mix(
|
|
259
|
+
in oklab,
|
|
260
|
+
var(--color-lum-border) var(--lum-border-mix),
|
|
261
|
+
var(--bg-color)
|
|
262
|
+
);
|
|
263
|
+
--gradient-color: color-mix(
|
|
264
|
+
in oklab,
|
|
265
|
+
var(--color-lum-gradient) var(--lum-gradient-mix),
|
|
266
|
+
var(--bg-color)
|
|
267
|
+
);
|
|
268
|
+
--lum-surface-color: var(--gradient-color);
|
|
186
269
|
|
|
187
270
|
@apply border border-transparent outline-none;
|
|
188
271
|
@apply lum-focus-border;
|
|
189
272
|
@apply lum-border-fade;
|
|
190
273
|
@apply lum-depth-shadow-fade;
|
|
191
274
|
|
|
192
|
-
background: linear-gradient(
|
|
275
|
+
background: linear-gradient(
|
|
276
|
+
var(--lum-gradient-angle),
|
|
277
|
+
var(--bg-color),
|
|
278
|
+
var(--gradient-color)
|
|
279
|
+
);
|
|
193
280
|
}
|
|
194
281
|
|
|
195
282
|
@utility lum-toggle-bg-* {
|
|
@@ -197,7 +284,16 @@
|
|
|
197
284
|
--alpha: --modifier(integer);
|
|
198
285
|
--bg-color: --alpha(--value([color]) / calc(var(--alpha, 100) * 1%));
|
|
199
286
|
--bg-color: --alpha(--value(--color-*) / calc(var(--alpha, 100) * 1%));
|
|
200
|
-
--border-color: color-mix(
|
|
287
|
+
--lum-border-color: color-mix(
|
|
288
|
+
in oklab,
|
|
289
|
+
var(--color-lum-border) var(--lum-border-mix),
|
|
290
|
+
var(--bg-color)
|
|
291
|
+
);
|
|
292
|
+
--lum-surface-color: var(--bg-color);
|
|
293
|
+
--lum-toggle-hover-bg: --alpha(
|
|
294
|
+
color-mix(in oklab, white 25%, --value(--color-*)) /
|
|
295
|
+
calc(var(--alpha, 100) * 1%)
|
|
296
|
+
);
|
|
201
297
|
|
|
202
298
|
@apply border border-transparent outline-none;
|
|
203
299
|
@apply lum-focus-border;
|
|
@@ -206,22 +302,26 @@
|
|
|
206
302
|
background-color: var(--bg-color);
|
|
207
303
|
@apply lum-allow-keywords;
|
|
208
304
|
|
|
209
|
-
&::after,
|
|
305
|
+
&::after,
|
|
306
|
+
&:hover {
|
|
307
|
+
--lum-surface-color: var(--lum-toggle-hover-bg);
|
|
308
|
+
background-color: var(--lum-toggle-hover-bg);
|
|
210
309
|
@apply lum-border-fade;
|
|
211
310
|
@apply lum-depth-shadow-fade;
|
|
212
|
-
background-color: --alpha(color-mix(in oklab, white 10%, --value(--color-*)) / calc(var(--alpha, 100) * 1%));
|
|
213
311
|
@apply lum-allow-keywords;
|
|
214
312
|
}
|
|
215
313
|
}
|
|
216
314
|
|
|
217
|
-
|
|
218
315
|
@utility rounded-lum {
|
|
219
316
|
border-radius: var(--lum-border-radius);
|
|
220
317
|
corner-shape: superellipse(var(--lum-border-superellipse));
|
|
221
318
|
}
|
|
222
319
|
|
|
223
320
|
@utility rounded-lum-* {
|
|
224
|
-
border-radius:
|
|
321
|
+
border-radius: max(
|
|
322
|
+
0px,
|
|
323
|
+
calc(var(--lum-border-radius) - calc(var(--spacing) * --value(number)))
|
|
324
|
+
);
|
|
225
325
|
corner-shape: superellipse(var(--lum-border-superellipse));
|
|
226
326
|
}
|
|
227
327
|
|
|
@@ -230,7 +330,7 @@
|
|
|
230
330
|
border-width: calc(--value(integer) * 1px);
|
|
231
331
|
border-color: transparent !important;
|
|
232
332
|
&::before {
|
|
233
|
-
@apply bg-gradient-to-br content-['']
|
|
333
|
+
@apply absolute inset-0 z-[-1] bg-gradient-to-br content-[''];
|
|
234
334
|
margin: calc(--value(integer) * -1px);
|
|
235
335
|
border-radius: inherit;
|
|
236
336
|
}
|
|
@@ -238,9 +338,9 @@
|
|
|
238
338
|
|
|
239
339
|
@utility lum-btn-p-* {
|
|
240
340
|
padding: calc(var(--spacing) * --value(integer))
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
341
|
+
calc(var(--spacing) * --value(integer) * var(--lum-btn-p-x))
|
|
342
|
+
calc(var(--spacing) * --value(integer))
|
|
343
|
+
calc(var(--spacing) * --value(integer) * var(--lum-btn-p-x));
|
|
244
344
|
|
|
245
345
|
gap: calc(
|
|
246
346
|
var(--spacing) * --value(integer) * clamp(0.65, 4 / --value(integer), 1)
|
|
@@ -255,27 +355,19 @@
|
|
|
255
355
|
}
|
|
256
356
|
|
|
257
357
|
@utility lum-input {
|
|
258
|
-
@apply
|
|
358
|
+
@apply lum-input-p-2 lum-bg-lum-input-bg hover:lum-bg-lum-input-hover-bg active:lum-bg-lum-input-hover-bg flex touch-manipulation whitespace-nowrap duration-300 ease-out select-none hover:drop-shadow-lg hover:duration-75 active:drop-shadow-lg active:duration-75 disabled:opacity-50 motion-safe:transition;
|
|
259
359
|
border-radius: var(--lum-border-radius);
|
|
260
360
|
corner-shape: superellipse(var(--lum-border-superellipse));
|
|
261
361
|
}
|
|
262
362
|
|
|
263
363
|
@utility lum-btn {
|
|
264
|
-
@apply
|
|
364
|
+
@apply lum-btn-p-2 lum-bg-lum-input-bg hover:lum-bg-lum-input-hover-bg active:lum-bg-lum-input-hover-bg flex touch-manipulation items-center text-base whitespace-nowrap duration-300 ease-out select-none hover:drop-shadow-lg hover:duration-75 active:drop-shadow-lg active:duration-75 disabled:opacity-50 motion-safe:transition motion-safe:active:scale-95;
|
|
265
365
|
border-radius: var(--lum-border-radius);
|
|
266
366
|
corner-shape: superellipse(var(--lum-border-superellipse));
|
|
267
367
|
}
|
|
268
368
|
|
|
269
369
|
@utility lum-card {
|
|
270
|
-
@apply flex flex-col gap-3 whitespace-pre-wrap
|
|
370
|
+
@apply lum-bg-lum-card-bg flex flex-col gap-3 p-7 whitespace-pre-wrap;
|
|
271
371
|
border-radius: var(--lum-border-radius);
|
|
272
372
|
corner-shape: superellipse(var(--lum-border-superellipse));
|
|
273
373
|
}
|
|
274
|
-
|
|
275
|
-
@utility lum-hoverable {
|
|
276
|
-
@apply transition hover:scale-102 active:scale-102 hover:drop-shadow-lg active:drop-shadow-lg hover:duration-75 active:duration-75 ease-out;
|
|
277
|
-
}
|
|
278
|
-
|
|
279
|
-
@utility lum-loading {
|
|
280
|
-
@apply animate-spin border-transparent border-l-current border-t-current border-3 rounded-full;
|
|
281
|
-
}
|