@luminescent/ui 7.0.0 → 7.0.1
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 +3 -7
- package/src/index.css +143 -45
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@luminescent/ui",
|
|
3
|
-
"version": "7.0.
|
|
3
|
+
"version": "7.0.1",
|
|
4
4
|
"description": "Luminescent UI library",
|
|
5
5
|
"exports": {
|
|
6
6
|
".": "./src/index.css",
|
|
@@ -11,10 +11,7 @@
|
|
|
11
11
|
"src/formatting.css"
|
|
12
12
|
],
|
|
13
13
|
"engines": {
|
|
14
|
-
"node": ">=23.11.0"
|
|
15
|
-
"npm": "please-use-pnpm",
|
|
16
|
-
"yarn": "please-use-pnpm",
|
|
17
|
-
"pnpm": ">=10.10.0"
|
|
14
|
+
"node": ">=23.11.0"
|
|
18
15
|
},
|
|
19
16
|
"license": "AGPL-3.0-or-later",
|
|
20
17
|
"private": false,
|
|
@@ -23,12 +20,11 @@
|
|
|
23
20
|
"access": "public"
|
|
24
21
|
},
|
|
25
22
|
"devDependencies": {
|
|
26
|
-
"tailwindcss": "4.1
|
|
23
|
+
"tailwindcss": "4.2.1"
|
|
27
24
|
},
|
|
28
25
|
"scripts": {
|
|
29
26
|
"build": "echo \"No build script specified\" && exit 0",
|
|
30
27
|
"dev": "echo \"No dev script specified\" && exit 0",
|
|
31
|
-
"lint": "eslint",
|
|
32
28
|
"test": "echo \"No test specified\" && exit 0"
|
|
33
29
|
}
|
|
34
30
|
}
|
package/src/index.css
CHANGED
|
@@ -28,28 +28,39 @@
|
|
|
28
28
|
--color-lum-text-secondary: var(--color-gray-400);
|
|
29
29
|
}
|
|
30
30
|
|
|
31
|
+
/* Shared utilities to reduce duplication across background utilities */
|
|
32
|
+
@utility lum-bg-gradient-vars {
|
|
33
|
+
--gradient-color: color-mix(in oklab, var(--color-lum-gradient) var(--lum-gradient-mix), var(--bg-color));
|
|
34
|
+
}
|
|
31
35
|
|
|
32
|
-
@utility lum-depth-
|
|
33
|
-
|
|
36
|
+
@utility lum-depth-shadow {
|
|
37
|
+
box-shadow:
|
|
38
|
+
inset 0 1px 2px var(--border-color),
|
|
39
|
+
0 1px 2px rgba(0, 0, 0, 0.05),
|
|
40
|
+
0 1px 3px rgba(0, 0, 0, 0.1);
|
|
41
|
+
}
|
|
42
|
+
@utility lum-depth-shadow-fade {
|
|
43
|
+
box-shadow:
|
|
44
|
+
inset 0 calc(0.5px * var(--lum-depth)) calc(1px * var(--lum-depth)) var(--border-color),
|
|
45
|
+
0 calc(0.5px * var(--lum-depth)) calc(1px * var(--lum-depth)) rgba(0, 0, 0, 0.05),
|
|
46
|
+
0 calc(0.5px * var(--lum-depth)) calc(1.5px * var(--lum-depth)) rgba(0, 0, 0, 0.1);
|
|
47
|
+
}
|
|
34
48
|
|
|
49
|
+
@utility lum-focus-border {
|
|
35
50
|
&:focus {
|
|
36
51
|
border-color: var(--color-lum-accent);
|
|
37
52
|
}
|
|
53
|
+
}
|
|
38
54
|
|
|
55
|
+
@utility lum-border-fade {
|
|
39
56
|
border-color: color-mix(
|
|
40
57
|
in oklab,
|
|
41
|
-
var(--
|
|
42
|
-
|
|
58
|
+
var(--border-color),
|
|
59
|
+
transparent calc(var(--lum-depth) * 100%)
|
|
43
60
|
);
|
|
44
|
-
|
|
45
|
-
box-shadow:
|
|
46
|
-
inset 0 calc(1px * var(--lum-depth)) calc(2px * var(--lum-depth)) var(--lum-border-color),
|
|
47
|
-
0 calc(1px * var(--lum-depth)) calc(2px * var(--lum-depth)) rgba(0, 0, 0, 0.05),
|
|
48
|
-
0 calc(1px * var(--lum-depth)) calc(3px * var(--lum-depth)) rgba(0, 0, 0, 0.1);
|
|
49
61
|
}
|
|
50
62
|
|
|
51
|
-
@utility lum-
|
|
52
|
-
/* Allow standard color keywords */
|
|
63
|
+
@utility lum-allow-keywords {
|
|
53
64
|
background-color: --value('inherit', 'transparent', 'currentColor');
|
|
54
65
|
border-color: --value('inherit', 'transparent', 'currentColor');
|
|
55
66
|
box-shadow: inset 0 calc(1px * var(--lum-depth)) calc(2px * var(--lum-depth)) --value('inherit', 'transparent', 'currentColor'),
|
|
@@ -57,70 +68,149 @@
|
|
|
57
68
|
0 calc(1px * var(--lum-depth)) calc(3px * var(--lum-depth)) --value('inherit', 'transparent', 'currentColor');
|
|
58
69
|
}
|
|
59
70
|
|
|
71
|
+
|
|
72
|
+
@utility lum-bg {
|
|
73
|
+
/* Inlined base color logic (previously in lum-bg-base) */
|
|
74
|
+
--border-color: color-mix(in oklab, var(--color-lum-border) var(--lum-border-mix), var(--bg-color));
|
|
75
|
+
|
|
76
|
+
@apply border border-transparent outline-none;
|
|
77
|
+
@apply lum-focus-border;
|
|
78
|
+
@apply lum-border-fade;
|
|
79
|
+
@apply lum-depth-shadow-fade;
|
|
80
|
+
|
|
81
|
+
background-color: var(--bg-color);
|
|
82
|
+
}
|
|
83
|
+
|
|
60
84
|
@utility lum-bg-* {
|
|
61
|
-
/*
|
|
85
|
+
/* Inlined base color logic to avoid chaining @apply */
|
|
62
86
|
--alpha: --modifier(integer);
|
|
63
87
|
--bg-color: --alpha(--value([color]) / calc(var(--alpha, 100) * 1%));
|
|
64
88
|
--bg-color: --alpha(--value(--color-*) / calc(var(--alpha, 100) * 1%));
|
|
65
|
-
--
|
|
66
|
-
--lum-surface-color: var(--bg-color);
|
|
89
|
+
--border-color: color-mix(in oklab, var(--color-lum-border) var(--lum-border-mix), var(--bg-color));
|
|
67
90
|
|
|
68
|
-
@apply
|
|
91
|
+
@apply border border-transparent outline-none;
|
|
92
|
+
@apply lum-focus-border;
|
|
93
|
+
@apply lum-border-fade;
|
|
94
|
+
@apply lum-depth-shadow-fade;
|
|
69
95
|
|
|
70
96
|
background-color: var(--bg-color);
|
|
71
|
-
@apply lum-
|
|
97
|
+
@apply lum-allow-keywords;
|
|
72
98
|
}
|
|
73
99
|
|
|
74
100
|
@utility lum-grad-bg-* {
|
|
75
|
-
/*
|
|
101
|
+
/* Inlined base color + gradient vars to avoid chaining @apply */
|
|
76
102
|
--alpha: --modifier(integer);
|
|
77
103
|
--bg-color: --alpha(--value([color]) / calc(var(--alpha, 100) * 1%));
|
|
78
104
|
--bg-color: --alpha(--value(--color-*) / calc(var(--alpha, 100) * 1%));
|
|
79
|
-
--
|
|
105
|
+
--border-color: color-mix(in oklab, var(--color-lum-border) var(--lum-border-mix), var(--bg-color));
|
|
80
106
|
--gradient-color: color-mix(in oklab, var(--color-lum-gradient) var(--lum-gradient-mix), var(--bg-color));
|
|
81
|
-
--lum-surface-color: var(--gradient-color);
|
|
82
107
|
|
|
83
|
-
@apply
|
|
108
|
+
@apply border border-transparent outline-none;
|
|
109
|
+
@apply lum-focus-border;
|
|
110
|
+
@apply lum-border-fade;
|
|
111
|
+
@apply lum-depth-shadow-fade;
|
|
84
112
|
|
|
85
|
-
background:
|
|
86
|
-
|
|
87
|
-
var(--lum-gradient-angle),
|
|
88
|
-
var(--bg-color),
|
|
89
|
-
var(--gradient-color)
|
|
90
|
-
);
|
|
91
|
-
background-clip: border-box;
|
|
92
|
-
@apply lum-surface-keyword-fallback;
|
|
113
|
+
background: linear-gradient(var(--lum-gradient-angle), var(--bg-color), var(--gradient-color));
|
|
114
|
+
@apply lum-allow-keywords;
|
|
93
115
|
}
|
|
94
116
|
|
|
95
|
-
@utility lum-bg {
|
|
96
|
-
/*
|
|
97
|
-
--
|
|
98
|
-
--
|
|
117
|
+
@utility lum-flat-bg-* {
|
|
118
|
+
/* Inlined base color logic */
|
|
119
|
+
--alpha: --modifier(integer);
|
|
120
|
+
--bg-color: --alpha(--value([color]) / calc(var(--alpha, 100) * 1%));
|
|
121
|
+
--bg-color: --alpha(--value(--color-*) / calc(var(--alpha, 100) * 1%));
|
|
122
|
+
--border-color: color-mix(in oklab, var(--color-lum-border) var(--lum-border-mix), var(--bg-color));
|
|
99
123
|
|
|
100
|
-
@apply
|
|
124
|
+
@apply border border-transparent outline-none;
|
|
125
|
+
@apply lum-focus-border;
|
|
101
126
|
|
|
127
|
+
border-color: var(--border-color);
|
|
102
128
|
background-color: var(--bg-color);
|
|
129
|
+
|
|
130
|
+
@apply lum-allow-keywords;
|
|
103
131
|
}
|
|
104
132
|
|
|
105
|
-
@utility lum-
|
|
106
|
-
/*
|
|
133
|
+
@utility lum-flat-grad-bg-* {
|
|
134
|
+
/* Inlined base color + gradient vars */
|
|
107
135
|
--alpha: --modifier(integer);
|
|
108
136
|
--bg-color: --alpha(--value([color]) / calc(var(--alpha, 100) * 1%));
|
|
109
137
|
--bg-color: --alpha(--value(--color-*) / calc(var(--alpha, 100) * 1%));
|
|
110
|
-
--
|
|
111
|
-
--
|
|
112
|
-
|
|
138
|
+
--border-color: color-mix(in oklab, var(--color-lum-border) var(--lum-border-mix), var(--bg-color));
|
|
139
|
+
--gradient-color: color-mix(in oklab, var(--color-lum-gradient) var(--lum-gradient-mix), var(--bg-color));
|
|
140
|
+
|
|
141
|
+
@apply border border-transparent outline-none;
|
|
142
|
+
@apply lum-focus-border;
|
|
143
|
+
|
|
144
|
+
border-color: var(--border-color);
|
|
145
|
+
background: linear-gradient(var(--lum-gradient-angle), var(--bg-color), var(--gradient-color));
|
|
113
146
|
|
|
114
|
-
@apply lum-
|
|
147
|
+
@apply lum-allow-keywords;
|
|
148
|
+
}
|
|
115
149
|
|
|
150
|
+
@utility lum-depth-bg-* {
|
|
151
|
+
/* Inlined base color logic */
|
|
152
|
+
--alpha: --modifier(integer);
|
|
153
|
+
--bg-color: --alpha(--value([color]) / calc(var(--alpha, 100) * 1%));
|
|
154
|
+
--bg-color: --alpha(--value(--color-*) / calc(var(--alpha, 100) * 1%));
|
|
155
|
+
--border-color: color-mix(in oklab, var(--color-lum-border) var(--lum-border-mix), var(--bg-color));
|
|
156
|
+
|
|
157
|
+
@apply lum-depth-shadow;
|
|
158
|
+
|
|
159
|
+
background-color: var(--bg-color);
|
|
160
|
+
|
|
161
|
+
@apply lum-allow-keywords;
|
|
162
|
+
}
|
|
163
|
+
|
|
164
|
+
@utility lum-depth-grad-bg-* {
|
|
165
|
+
/* Inlined base color + gradient vars */
|
|
166
|
+
--alpha: --modifier(integer);
|
|
167
|
+
--bg-color: --alpha(--value([color]) / calc(var(--alpha, 100) * 1%));
|
|
168
|
+
--bg-color: --alpha(--value(--color-*) / calc(var(--alpha, 100) * 1%));
|
|
169
|
+
--border-color: color-mix(in oklab, var(--color-lum-border) var(--lum-border-mix), var(--bg-color));
|
|
170
|
+
--gradient-color: color-mix(in oklab, var(--color-lum-gradient) var(--lum-gradient-mix), var(--bg-color));
|
|
171
|
+
|
|
172
|
+
@apply lum-depth-shadow;
|
|
173
|
+
|
|
174
|
+
background: linear-gradient(var(--lum-gradient-angle), var(--bg-color), var(--gradient-color));
|
|
175
|
+
|
|
176
|
+
@apply lum-allow-keywords;
|
|
177
|
+
}
|
|
178
|
+
|
|
179
|
+
@utility lum-grad-bg {
|
|
180
|
+
/* Inlined base color logic (previously in lum-bg-base) */
|
|
181
|
+
--alpha: --modifier(integer);
|
|
182
|
+
--bg-color: --alpha(--value([color]) / calc(var(--alpha, 100) * 1%));
|
|
183
|
+
--bg-color: --alpha(--value(--color-*) / calc(var(--alpha, 100) * 1%));
|
|
184
|
+
--border-color: color-mix(in oklab, var(--color-lum-border) var(--lum-border-mix), var(--bg-color));
|
|
185
|
+
--gradient-color: color-mix(in oklab, var(--color-lum-gradient) var(--lum-gradient-mix), var(--bg-color));
|
|
186
|
+
|
|
187
|
+
@apply border border-transparent outline-none;
|
|
188
|
+
@apply lum-focus-border;
|
|
189
|
+
@apply lum-border-fade;
|
|
190
|
+
@apply lum-depth-shadow-fade;
|
|
191
|
+
|
|
192
|
+
background: linear-gradient(var(--lum-gradient-angle), var(--bg-color), var(--gradient-color));
|
|
193
|
+
}
|
|
194
|
+
|
|
195
|
+
@utility lum-toggle-bg-* {
|
|
196
|
+
/* Inlined base color logic */
|
|
197
|
+
--alpha: --modifier(integer);
|
|
198
|
+
--bg-color: --alpha(--value([color]) / calc(var(--alpha, 100) * 1%));
|
|
199
|
+
--bg-color: --alpha(--value(--color-*) / calc(var(--alpha, 100) * 1%));
|
|
200
|
+
--border-color: color-mix(in oklab, var(--color-lum-border) var(--lum-border-mix), var(--bg-color));
|
|
201
|
+
|
|
202
|
+
@apply border border-transparent outline-none;
|
|
203
|
+
@apply lum-focus-border;
|
|
204
|
+
@apply lum-border-fade;
|
|
205
|
+
@apply lum-depth-shadow-fade;
|
|
116
206
|
background-color: var(--bg-color);
|
|
117
|
-
@apply lum-
|
|
207
|
+
@apply lum-allow-keywords;
|
|
118
208
|
|
|
119
209
|
&::after, &:hover {
|
|
120
|
-
@apply lum-
|
|
121
|
-
|
|
122
|
-
background-color: var(--
|
|
123
|
-
@apply lum-
|
|
210
|
+
@apply lum-border-fade;
|
|
211
|
+
@apply lum-depth-shadow-fade;
|
|
212
|
+
background-color: --alpha(color-mix(in oklab, white 10%, --value(--color-*)) / calc(var(--alpha, 100) * 1%));
|
|
213
|
+
@apply lum-allow-keywords;
|
|
124
214
|
}
|
|
125
215
|
}
|
|
126
216
|
|
|
@@ -131,7 +221,7 @@
|
|
|
131
221
|
}
|
|
132
222
|
|
|
133
223
|
@utility rounded-lum-* {
|
|
134
|
-
border-radius: calc(var(--lum-border-radius) - calc(var(--spacing) * --value(
|
|
224
|
+
border-radius: calc(var(--lum-border-radius) - calc(var(--spacing) * --value(integer)));
|
|
135
225
|
corner-shape: superellipse(var(--lum-border-superellipse));
|
|
136
226
|
}
|
|
137
227
|
|
|
@@ -180,4 +270,12 @@
|
|
|
180
270
|
@apply flex flex-col gap-3 whitespace-pre-wrap lum-bg-lum-card-bg p-7;
|
|
181
271
|
border-radius: var(--lum-border-radius);
|
|
182
272
|
corner-shape: superellipse(var(--lum-border-superellipse));
|
|
273
|
+
}
|
|
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;
|
|
183
281
|
}
|