@luminescent/ui 6.1.1 → 6.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/package.json +1 -1
- package/src/index.css +16 -3
package/package.json
CHANGED
package/src/index.css
CHANGED
|
@@ -37,6 +37,19 @@
|
|
|
37
37
|
|
|
38
38
|
&:focus {
|
|
39
39
|
@apply border-lum-accent;
|
|
40
|
+
|
|
41
|
+
/* Border fades out when depth is active */
|
|
42
|
+
border-color: color-mix(
|
|
43
|
+
in oklab,
|
|
44
|
+
var(--color-lum-accent),
|
|
45
|
+
transparent calc(var(--lum-depth) * 100%)
|
|
46
|
+
);
|
|
47
|
+
|
|
48
|
+
/* Shadow fades in when depth is active */
|
|
49
|
+
box-shadow:
|
|
50
|
+
inset 0 calc(1px * var(--lum-depth)) calc(2px * var(--lum-depth)) var(--border-color),
|
|
51
|
+
0 calc(4px * var(--lum-depth)) calc(2px * var(--lum-depth)) color-mix(in oklab, var(--color-lum-accent), transparent 70%),
|
|
52
|
+
0 calc(1px * var(--lum-depth)) calc(3px * var(--lum-depth)) color-mix(in oklab, var(--color-lum-accent), transparent 70%);
|
|
40
53
|
}
|
|
41
54
|
|
|
42
55
|
/* Border fades out when depth is active */
|
|
@@ -155,12 +168,12 @@
|
|
|
155
168
|
}
|
|
156
169
|
|
|
157
170
|
@utility lum-input {
|
|
158
|
-
@apply flex motion-safe:transition duration-300 hover:duration-75 ease-out disabled:opacity-50 hover:drop-shadow-lg whitespace-nowrap touch-manipulation select-none lum-input-p-2 lum-bg-lum-input-bg hover:lum-bg-lum-input-hover-bg;
|
|
171
|
+
@apply flex motion-safe:transition duration-300 hover:duration-75 active:duration-75 ease-out disabled:opacity-50 hover:drop-shadow-lg active:drop-shadow-lg whitespace-nowrap touch-manipulation select-none lum-input-p-2 lum-bg-lum-input-bg hover:lum-bg-lum-input-hover-bg active:lum-bg-lum-input-hover-bg;
|
|
159
172
|
border-radius: var(--lum-border-radius);
|
|
160
173
|
}
|
|
161
174
|
|
|
162
175
|
@utility lum-btn {
|
|
163
|
-
@apply flex items-center gap-3 motion-safe:transition duration-300 hover:duration-75 ease-out disabled:opacity-50 hover:drop-shadow-lg motion-safe:active:scale-95 whitespace-nowrap touch-manipulation select-none lum-btn-p-2 text-base lum-bg-lum-input-bg hover:lum-bg-lum-input-hover-bg;
|
|
176
|
+
@apply flex items-center gap-3 motion-safe:transition duration-300 hover:duration-75 active:duration-75 ease-out disabled:opacity-50 hover:drop-shadow-lg active:drop-shadow-lg motion-safe:active:scale-95 whitespace-nowrap touch-manipulation select-none lum-btn-p-2 text-base lum-bg-lum-input-bg hover:lum-bg-lum-input-hover-bg active:lum-bg-lum-input-hover-bg;
|
|
164
177
|
border-radius: var(--lum-border-radius);
|
|
165
178
|
}
|
|
166
179
|
|
|
@@ -170,7 +183,7 @@
|
|
|
170
183
|
}
|
|
171
184
|
|
|
172
185
|
@utility lum-hoverable {
|
|
173
|
-
@apply transition hover:scale-102 hover:drop-shadow-lg hover:duration-75 ease-out;
|
|
186
|
+
@apply transition hover:scale-102 active:scale-102 hover:drop-shadow-lg active:drop-shadow-lg hover:duration-75 active:duration-75 ease-out;
|
|
174
187
|
}
|
|
175
188
|
|
|
176
189
|
@utility lum-loading {
|