@luminescent/ui 7.0.0 → 7.0.2
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 +133 -31
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@luminescent/ui",
|
|
3
|
-
"version": "7.0.
|
|
3
|
+
"version": "7.0.2",
|
|
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
|
@@ -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%;
|
|
@@ -28,28 +29,39 @@
|
|
|
28
29
|
--color-lum-text-secondary: var(--color-gray-400);
|
|
29
30
|
}
|
|
30
31
|
|
|
32
|
+
/* Shared utilities to reduce duplication across background utilities */
|
|
33
|
+
@utility lum-bg-gradient-vars {
|
|
34
|
+
--gradient-color: color-mix(in oklab, var(--color-lum-gradient) var(--lum-gradient-mix), var(--bg-color));
|
|
35
|
+
}
|
|
31
36
|
|
|
32
|
-
@utility lum-depth-
|
|
33
|
-
|
|
37
|
+
@utility lum-depth-shadow {
|
|
38
|
+
box-shadow:
|
|
39
|
+
inset 0 1px 2px var(--lum-border-color),
|
|
40
|
+
0 1px 2px rgba(0, 0, 0, 0.05),
|
|
41
|
+
0 1px 3px rgba(0, 0, 0, 0.1);
|
|
42
|
+
}
|
|
43
|
+
@utility lum-depth-shadow-fade {
|
|
44
|
+
box-shadow:
|
|
45
|
+
inset 0 calc(0.5px * var(--lum-depth)) calc(1px * var(--lum-depth)) var(--lum-border-color),
|
|
46
|
+
0 calc(0.5px * var(--lum-depth)) calc(1px * var(--lum-depth)) rgba(0, 0, 0, 0.05),
|
|
47
|
+
0 calc(0.5px * var(--lum-depth)) calc(1.5px * var(--lum-depth)) rgba(0, 0, 0, 0.1);
|
|
48
|
+
}
|
|
34
49
|
|
|
50
|
+
@utility lum-focus-border {
|
|
35
51
|
&:focus {
|
|
36
52
|
border-color: var(--color-lum-accent);
|
|
37
53
|
}
|
|
54
|
+
}
|
|
38
55
|
|
|
56
|
+
@utility lum-border-fade {
|
|
39
57
|
border-color: color-mix(
|
|
40
58
|
in oklab,
|
|
41
59
|
var(--lum-border-color),
|
|
42
60
|
var(--lum-surface-color) calc(var(--lum-depth) * 100%)
|
|
43
61
|
);
|
|
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
62
|
}
|
|
50
63
|
|
|
51
|
-
@utility lum-
|
|
52
|
-
/* Allow standard color keywords */
|
|
64
|
+
@utility lum-allow-keywords {
|
|
53
65
|
background-color: --value('inherit', 'transparent', 'currentColor');
|
|
54
66
|
border-color: --value('inherit', 'transparent', 'currentColor');
|
|
55
67
|
box-shadow: inset 0 calc(1px * var(--lum-depth)) calc(2px * var(--lum-depth)) --value('inherit', 'transparent', 'currentColor'),
|
|
@@ -57,22 +69,39 @@
|
|
|
57
69
|
0 calc(1px * var(--lum-depth)) calc(3px * var(--lum-depth)) --value('inherit', 'transparent', 'currentColor');
|
|
58
70
|
}
|
|
59
71
|
|
|
72
|
+
|
|
73
|
+
@utility lum-bg {
|
|
74
|
+
/* Inlined base color logic (previously in lum-bg-base) */
|
|
75
|
+
--lum-border-color: color-mix(in oklab, var(--color-lum-border) var(--lum-border-mix), var(--bg-color));
|
|
76
|
+
--lum-surface-color: var(--bg-color);
|
|
77
|
+
|
|
78
|
+
@apply border border-transparent outline-none;
|
|
79
|
+
@apply lum-focus-border;
|
|
80
|
+
@apply lum-border-fade;
|
|
81
|
+
@apply lum-depth-shadow-fade;
|
|
82
|
+
|
|
83
|
+
background-color: var(--bg-color);
|
|
84
|
+
}
|
|
85
|
+
|
|
60
86
|
@utility lum-bg-* {
|
|
61
|
-
/*
|
|
87
|
+
/* Inlined base color logic to avoid chaining @apply */
|
|
62
88
|
--alpha: --modifier(integer);
|
|
63
89
|
--bg-color: --alpha(--value([color]) / calc(var(--alpha, 100) * 1%));
|
|
64
90
|
--bg-color: --alpha(--value(--color-*) / calc(var(--alpha, 100) * 1%));
|
|
65
91
|
--lum-border-color: color-mix(in oklab, var(--color-lum-border) var(--lum-border-mix), var(--bg-color));
|
|
66
92
|
--lum-surface-color: var(--bg-color);
|
|
67
93
|
|
|
68
|
-
@apply
|
|
94
|
+
@apply border border-transparent outline-none;
|
|
95
|
+
@apply lum-focus-border;
|
|
96
|
+
@apply lum-border-fade;
|
|
97
|
+
@apply lum-depth-shadow-fade;
|
|
69
98
|
|
|
70
99
|
background-color: var(--bg-color);
|
|
71
|
-
@apply lum-
|
|
100
|
+
@apply lum-allow-keywords;
|
|
72
101
|
}
|
|
73
102
|
|
|
74
103
|
@utility lum-grad-bg-* {
|
|
75
|
-
/*
|
|
104
|
+
/* Inlined base color + gradient vars to avoid chaining @apply */
|
|
76
105
|
--alpha: --modifier(integer);
|
|
77
106
|
--bg-color: --alpha(--value([color]) / calc(var(--alpha, 100) * 1%));
|
|
78
107
|
--bg-color: --alpha(--value(--color-*) / calc(var(--alpha, 100) * 1%));
|
|
@@ -80,30 +109,100 @@
|
|
|
80
109
|
--gradient-color: color-mix(in oklab, var(--color-lum-gradient) var(--lum-gradient-mix), var(--bg-color));
|
|
81
110
|
--lum-surface-color: var(--gradient-color);
|
|
82
111
|
|
|
83
|
-
@apply
|
|
112
|
+
@apply border border-transparent outline-none;
|
|
113
|
+
@apply lum-focus-border;
|
|
114
|
+
@apply lum-border-fade;
|
|
115
|
+
@apply lum-depth-shadow-fade;
|
|
84
116
|
|
|
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;
|
|
117
|
+
background: linear-gradient(var(--lum-gradient-angle), var(--bg-color), var(--gradient-color));
|
|
118
|
+
@apply lum-allow-keywords;
|
|
93
119
|
}
|
|
94
120
|
|
|
95
|
-
@utility lum-bg {
|
|
96
|
-
/*
|
|
121
|
+
@utility lum-flat-bg-* {
|
|
122
|
+
/* Inlined base color logic */
|
|
123
|
+
--alpha: --modifier(integer);
|
|
124
|
+
--bg-color: --alpha(--value([color]) / calc(var(--alpha, 100) * 1%));
|
|
125
|
+
--bg-color: --alpha(--value(--color-*) / calc(var(--alpha, 100) * 1%));
|
|
97
126
|
--lum-border-color: color-mix(in oklab, var(--color-lum-border) var(--lum-border-mix), var(--bg-color));
|
|
98
127
|
--lum-surface-color: var(--bg-color);
|
|
99
128
|
|
|
100
|
-
@apply
|
|
129
|
+
@apply border border-transparent outline-none;
|
|
130
|
+
@apply lum-focus-border;
|
|
101
131
|
|
|
132
|
+
border-color: var(--lum-border-color);
|
|
102
133
|
background-color: var(--bg-color);
|
|
134
|
+
|
|
135
|
+
@apply lum-allow-keywords;
|
|
136
|
+
}
|
|
137
|
+
|
|
138
|
+
@utility lum-flat-grad-bg-* {
|
|
139
|
+
/* Inlined base color + gradient vars */
|
|
140
|
+
--alpha: --modifier(integer);
|
|
141
|
+
--bg-color: --alpha(--value([color]) / calc(var(--alpha, 100) * 1%));
|
|
142
|
+
--bg-color: --alpha(--value(--color-*) / calc(var(--alpha, 100) * 1%));
|
|
143
|
+
--lum-border-color: color-mix(in oklab, var(--color-lum-border) var(--lum-border-mix), var(--bg-color));
|
|
144
|
+
--gradient-color: color-mix(in oklab, var(--color-lum-gradient) var(--lum-gradient-mix), var(--bg-color));
|
|
145
|
+
--lum-surface-color: var(--gradient-color);
|
|
146
|
+
|
|
147
|
+
@apply border border-transparent outline-none;
|
|
148
|
+
@apply lum-focus-border;
|
|
149
|
+
|
|
150
|
+
border-color: var(--lum-border-color);
|
|
151
|
+
background: linear-gradient(var(--lum-gradient-angle), var(--bg-color), var(--gradient-color));
|
|
152
|
+
|
|
153
|
+
@apply lum-allow-keywords;
|
|
154
|
+
}
|
|
155
|
+
|
|
156
|
+
@utility lum-depth-bg-* {
|
|
157
|
+
/* Inlined base color logic */
|
|
158
|
+
--alpha: --modifier(integer);
|
|
159
|
+
--bg-color: --alpha(--value([color]) / calc(var(--alpha, 100) * 1%));
|
|
160
|
+
--bg-color: --alpha(--value(--color-*) / calc(var(--alpha, 100) * 1%));
|
|
161
|
+
--lum-border-color: color-mix(in oklab, var(--color-lum-border) var(--lum-border-mix), var(--bg-color));
|
|
162
|
+
--lum-surface-color: var(--bg-color);
|
|
163
|
+
|
|
164
|
+
@apply lum-depth-shadow;
|
|
165
|
+
|
|
166
|
+
background-color: var(--bg-color);
|
|
167
|
+
|
|
168
|
+
@apply lum-allow-keywords;
|
|
169
|
+
}
|
|
170
|
+
|
|
171
|
+
@utility lum-depth-grad-bg-* {
|
|
172
|
+
/* Inlined base color + gradient vars */
|
|
173
|
+
--alpha: --modifier(integer);
|
|
174
|
+
--bg-color: --alpha(--value([color]) / calc(var(--alpha, 100) * 1%));
|
|
175
|
+
--bg-color: --alpha(--value(--color-*) / calc(var(--alpha, 100) * 1%));
|
|
176
|
+
--lum-border-color: color-mix(in oklab, var(--color-lum-border) var(--lum-border-mix), var(--bg-color));
|
|
177
|
+
--gradient-color: color-mix(in oklab, var(--color-lum-gradient) var(--lum-gradient-mix), var(--bg-color));
|
|
178
|
+
--lum-surface-color: var(--gradient-color);
|
|
179
|
+
|
|
180
|
+
@apply lum-depth-shadow;
|
|
181
|
+
|
|
182
|
+
background: linear-gradient(var(--lum-gradient-angle), var(--bg-color), var(--gradient-color));
|
|
183
|
+
|
|
184
|
+
@apply lum-allow-keywords;
|
|
185
|
+
}
|
|
186
|
+
|
|
187
|
+
@utility lum-grad-bg {
|
|
188
|
+
/* Inlined base color logic (previously in lum-bg-base) */
|
|
189
|
+
--alpha: --modifier(integer);
|
|
190
|
+
--bg-color: --alpha(--value([color]) / calc(var(--alpha, 100) * 1%));
|
|
191
|
+
--bg-color: --alpha(--value(--color-*) / calc(var(--alpha, 100) * 1%));
|
|
192
|
+
--lum-border-color: color-mix(in oklab, var(--color-lum-border) var(--lum-border-mix), var(--bg-color));
|
|
193
|
+
--gradient-color: color-mix(in oklab, var(--color-lum-gradient) var(--lum-gradient-mix), var(--bg-color));
|
|
194
|
+
--lum-surface-color: var(--gradient-color);
|
|
195
|
+
|
|
196
|
+
@apply border border-transparent outline-none;
|
|
197
|
+
@apply lum-focus-border;
|
|
198
|
+
@apply lum-border-fade;
|
|
199
|
+
@apply lum-depth-shadow-fade;
|
|
200
|
+
|
|
201
|
+
background: linear-gradient(var(--lum-gradient-angle), var(--bg-color), var(--gradient-color));
|
|
103
202
|
}
|
|
104
203
|
|
|
105
204
|
@utility lum-toggle-bg-* {
|
|
106
|
-
/*
|
|
205
|
+
/* Inlined base color logic */
|
|
107
206
|
--alpha: --modifier(integer);
|
|
108
207
|
--bg-color: --alpha(--value([color]) / calc(var(--alpha, 100) * 1%));
|
|
109
208
|
--bg-color: --alpha(--value(--color-*) / calc(var(--alpha, 100) * 1%));
|
|
@@ -111,16 +210,19 @@
|
|
|
111
210
|
--lum-surface-color: var(--bg-color);
|
|
112
211
|
--lum-toggle-hover-bg: --alpha(color-mix(in oklab, white 10%, --value(--color-*)) / calc(var(--alpha, 100) * 1%));
|
|
113
212
|
|
|
114
|
-
@apply
|
|
115
|
-
|
|
213
|
+
@apply border border-transparent outline-none;
|
|
214
|
+
@apply lum-focus-border;
|
|
215
|
+
@apply lum-border-fade;
|
|
216
|
+
@apply lum-depth-shadow-fade;
|
|
116
217
|
background-color: var(--bg-color);
|
|
117
|
-
@apply lum-
|
|
218
|
+
@apply lum-allow-keywords;
|
|
118
219
|
|
|
119
220
|
&::after, &:hover {
|
|
120
|
-
@apply lum-depth-surface;
|
|
121
221
|
--lum-surface-color: var(--lum-toggle-hover-bg);
|
|
122
222
|
background-color: var(--lum-toggle-hover-bg);
|
|
123
|
-
@apply lum-
|
|
223
|
+
@apply lum-border-fade;
|
|
224
|
+
@apply lum-depth-shadow-fade;
|
|
225
|
+
@apply lum-allow-keywords;
|
|
124
226
|
}
|
|
125
227
|
}
|
|
126
228
|
|