@luminescent/ui 7.0.2 → 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 CHANGED
@@ -1,21 +1,30 @@
1
1
  {
2
2
  "name": "@luminescent/ui",
3
- "version": "7.0.2",
3
+ "version": "7.1.0",
4
+ "private": false,
4
5
  "description": "Luminescent UI library",
5
- "exports": {
6
- ".": "./src/index.css",
7
- "./formatting": "./src/formatting.css"
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
  },
@@ -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, a.lum-card {
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 my-4;
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, h2, h3, h4, h5, h6 {
22
- @apply relative text-lg sm:text-xl font-semibold scroll-mt-36;
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 font-extrabold;
42
+ @apply text-4xl font-extrabold sm:text-5xl;
37
43
  }
38
44
 
39
45
  h2 {
40
- @apply text-3xl sm:text-4xl font-bold;
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, ol {
56
- @apply my-4 ml-10 text-lum-text-secondary list-disc;
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 lum-card my-2;
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 bg-transparent;
83
+ @apply border-none bg-transparent select-auto;
77
84
  }
78
85
 
79
86
  code {
80
- @apply bg-lum-card-bg py-0.5 px-1 rounded-lum select-all border-b-2 border-b-lum-border/20 break-all sm:break-normal;
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, td {
94
+ th,
95
+ td {
88
96
  @apply p-2 align-top;
89
97
  }
90
98
 
91
- th:first-child, td:first-child {
99
+ th:first-child,
100
+ td:first-child {
92
101
  @apply pl-0;
93
102
  }
94
103
 
95
- th:last-child, td: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 border-t-lum-border/20;
105
- }
114
+ @apply border-t-lum-border/20 my-8 border-t-1;
115
+ }
package/src/index.css CHANGED
@@ -31,7 +31,11 @@
31
31
 
32
32
  /* Shared utilities to reduce duplication across background utilities */
33
33
  @utility lum-bg-gradient-vars {
34
- --gradient-color: color-mix(in oklab, var(--color-lum-gradient) var(--lum-gradient-mix), var(--bg-color));
34
+ --gradient-color: color-mix(
35
+ in oklab,
36
+ var(--color-lum-gradient) var(--lum-gradient-mix),
37
+ var(--bg-color)
38
+ );
35
39
  }
36
40
 
37
41
  @utility lum-depth-shadow {
@@ -42,18 +46,25 @@
42
46
  }
43
47
  @utility lum-depth-shadow-fade {
44
48
  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);
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);
48
55
  }
49
56
 
50
57
  @utility lum-focus-border {
51
- &:focus {
52
- border-color: var(--color-lum-accent);
58
+ outline: 1px solid transparent;
59
+ outline-offset: -1px;
60
+
61
+ &:focus-visible {
62
+ outline-color: var(--color-lum-accent);
53
63
  }
54
64
  }
55
65
 
56
66
  @utility lum-border-fade {
67
+ border-width: calc(1px * (1 - clamp(0, var(--lum-depth), 1)));
57
68
  border-color: color-mix(
58
69
  in oklab,
59
70
  var(--lum-border-color),
@@ -64,15 +75,22 @@
64
75
  @utility lum-allow-keywords {
65
76
  background-color: --value('inherit', 'transparent', 'currentColor');
66
77
  border-color: --value('inherit', 'transparent', 'currentColor');
67
- box-shadow: inset 0 calc(1px * var(--lum-depth)) calc(2px * var(--lum-depth)) --value('inherit', 'transparent', 'currentColor'),
68
- 0 calc(1px * var(--lum-depth)) calc(2px * var(--lum-depth)) --value('inherit', 'transparent', 'currentColor'),
69
- 0 calc(1px * var(--lum-depth)) calc(3px * var(--lum-depth)) --value('inherit', 'transparent', 'currentColor');
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');
70
85
  }
71
86
 
72
-
73
87
  @utility lum-bg {
74
88
  /* 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));
89
+ --lum-border-color: color-mix(
90
+ in oklab,
91
+ var(--color-lum-border) var(--lum-border-mix),
92
+ var(--bg-color)
93
+ );
76
94
  --lum-surface-color: var(--bg-color);
77
95
 
78
96
  @apply border border-transparent outline-none;
@@ -88,7 +106,11 @@
88
106
  --alpha: --modifier(integer);
89
107
  --bg-color: --alpha(--value([color]) / calc(var(--alpha, 100) * 1%));
90
108
  --bg-color: --alpha(--value(--color-*) / calc(var(--alpha, 100) * 1%));
91
- --lum-border-color: color-mix(in oklab, var(--color-lum-border) var(--lum-border-mix), var(--bg-color));
109
+ --lum-border-color: color-mix(
110
+ in oklab,
111
+ var(--color-lum-border) var(--lum-border-mix),
112
+ var(--bg-color)
113
+ );
92
114
  --lum-surface-color: var(--bg-color);
93
115
 
94
116
  @apply border border-transparent outline-none;
@@ -105,8 +127,16 @@
105
127
  --alpha: --modifier(integer);
106
128
  --bg-color: --alpha(--value([color]) / calc(var(--alpha, 100) * 1%));
107
129
  --bg-color: --alpha(--value(--color-*) / calc(var(--alpha, 100) * 1%));
108
- --lum-border-color: color-mix(in oklab, var(--color-lum-border) var(--lum-border-mix), var(--bg-color));
109
- --gradient-color: color-mix(in oklab, var(--color-lum-gradient) var(--lum-gradient-mix), var(--bg-color));
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
+ );
110
140
  --lum-surface-color: var(--gradient-color);
111
141
 
112
142
  @apply border border-transparent outline-none;
@@ -114,7 +144,11 @@
114
144
  @apply lum-border-fade;
115
145
  @apply lum-depth-shadow-fade;
116
146
 
117
- background: linear-gradient(var(--lum-gradient-angle), var(--bg-color), var(--gradient-color));
147
+ background: linear-gradient(
148
+ var(--lum-gradient-angle),
149
+ var(--bg-color),
150
+ var(--gradient-color)
151
+ );
118
152
  @apply lum-allow-keywords;
119
153
  }
120
154
 
@@ -123,7 +157,11 @@
123
157
  --alpha: --modifier(integer);
124
158
  --bg-color: --alpha(--value([color]) / calc(var(--alpha, 100) * 1%));
125
159
  --bg-color: --alpha(--value(--color-*) / calc(var(--alpha, 100) * 1%));
126
- --lum-border-color: color-mix(in oklab, var(--color-lum-border) var(--lum-border-mix), var(--bg-color));
160
+ --lum-border-color: color-mix(
161
+ in oklab,
162
+ var(--color-lum-border) var(--lum-border-mix),
163
+ var(--bg-color)
164
+ );
127
165
  --lum-surface-color: var(--bg-color);
128
166
 
129
167
  @apply border border-transparent outline-none;
@@ -140,15 +178,27 @@
140
178
  --alpha: --modifier(integer);
141
179
  --bg-color: --alpha(--value([color]) / calc(var(--alpha, 100) * 1%));
142
180
  --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));
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
+ );
145
191
  --lum-surface-color: var(--gradient-color);
146
192
 
147
193
  @apply border border-transparent outline-none;
148
194
  @apply lum-focus-border;
149
195
 
150
196
  border-color: var(--lum-border-color);
151
- background: linear-gradient(var(--lum-gradient-angle), var(--bg-color), var(--gradient-color));
197
+ background: linear-gradient(
198
+ var(--lum-gradient-angle),
199
+ var(--bg-color),
200
+ var(--gradient-color)
201
+ );
152
202
 
153
203
  @apply lum-allow-keywords;
154
204
  }
@@ -158,7 +208,11 @@
158
208
  --alpha: --modifier(integer);
159
209
  --bg-color: --alpha(--value([color]) / calc(var(--alpha, 100) * 1%));
160
210
  --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));
211
+ --lum-border-color: color-mix(
212
+ in oklab,
213
+ var(--color-lum-border) var(--lum-border-mix),
214
+ var(--bg-color)
215
+ );
162
216
  --lum-surface-color: var(--bg-color);
163
217
 
164
218
  @apply lum-depth-shadow;
@@ -173,13 +227,25 @@
173
227
  --alpha: --modifier(integer);
174
228
  --bg-color: --alpha(--value([color]) / calc(var(--alpha, 100) * 1%));
175
229
  --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));
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
+ );
178
240
  --lum-surface-color: var(--gradient-color);
179
241
 
180
242
  @apply lum-depth-shadow;
181
243
 
182
- background: linear-gradient(var(--lum-gradient-angle), var(--bg-color), var(--gradient-color));
244
+ background: linear-gradient(
245
+ var(--lum-gradient-angle),
246
+ var(--bg-color),
247
+ var(--gradient-color)
248
+ );
183
249
 
184
250
  @apply lum-allow-keywords;
185
251
  }
@@ -189,8 +255,16 @@
189
255
  --alpha: --modifier(integer);
190
256
  --bg-color: --alpha(--value([color]) / calc(var(--alpha, 100) * 1%));
191
257
  --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));
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
+ );
194
268
  --lum-surface-color: var(--gradient-color);
195
269
 
196
270
  @apply border border-transparent outline-none;
@@ -198,7 +272,11 @@
198
272
  @apply lum-border-fade;
199
273
  @apply lum-depth-shadow-fade;
200
274
 
201
- background: linear-gradient(var(--lum-gradient-angle), var(--bg-color), var(--gradient-color));
275
+ background: linear-gradient(
276
+ var(--lum-gradient-angle),
277
+ var(--bg-color),
278
+ var(--gradient-color)
279
+ );
202
280
  }
203
281
 
204
282
  @utility lum-toggle-bg-* {
@@ -206,9 +284,16 @@
206
284
  --alpha: --modifier(integer);
207
285
  --bg-color: --alpha(--value([color]) / calc(var(--alpha, 100) * 1%));
208
286
  --bg-color: --alpha(--value(--color-*) / calc(var(--alpha, 100) * 1%));
209
- --lum-border-color: color-mix(in oklab, var(--color-lum-border) var(--lum-border-mix), var(--bg-color));
287
+ --lum-border-color: color-mix(
288
+ in oklab,
289
+ var(--color-lum-border) var(--lum-border-mix),
290
+ var(--bg-color)
291
+ );
210
292
  --lum-surface-color: var(--bg-color);
211
- --lum-toggle-hover-bg: --alpha(color-mix(in oklab, white 10%, --value(--color-*)) / calc(var(--alpha, 100) * 1%));
293
+ --lum-toggle-hover-bg: --alpha(
294
+ color-mix(in oklab, white 25%, --value(--color-*)) /
295
+ calc(var(--alpha, 100) * 1%)
296
+ );
212
297
 
213
298
  @apply border border-transparent outline-none;
214
299
  @apply lum-focus-border;
@@ -217,7 +302,8 @@
217
302
  background-color: var(--bg-color);
218
303
  @apply lum-allow-keywords;
219
304
 
220
- &::after, &:hover {
305
+ &::after,
306
+ &:hover {
221
307
  --lum-surface-color: var(--lum-toggle-hover-bg);
222
308
  background-color: var(--lum-toggle-hover-bg);
223
309
  @apply lum-border-fade;
@@ -226,14 +312,16 @@
226
312
  }
227
313
  }
228
314
 
229
-
230
315
  @utility rounded-lum {
231
316
  border-radius: var(--lum-border-radius);
232
317
  corner-shape: superellipse(var(--lum-border-superellipse));
233
318
  }
234
319
 
235
320
  @utility rounded-lum-* {
236
- border-radius: calc(var(--lum-border-radius) - calc(var(--spacing) * --value(number)));
321
+ border-radius: max(
322
+ 0px,
323
+ calc(var(--lum-border-radius) - calc(var(--spacing) * --value(number)))
324
+ );
237
325
  corner-shape: superellipse(var(--lum-border-superellipse));
238
326
  }
239
327
 
@@ -242,7 +330,7 @@
242
330
  border-width: calc(--value(integer) * 1px);
243
331
  border-color: transparent !important;
244
332
  &::before {
245
- @apply bg-gradient-to-br content-[''] absolute inset-0 z-[-1];
333
+ @apply absolute inset-0 z-[-1] bg-gradient-to-br content-[''];
246
334
  margin: calc(--value(integer) * -1px);
247
335
  border-radius: inherit;
248
336
  }
@@ -250,9 +338,9 @@
250
338
 
251
339
  @utility lum-btn-p-* {
252
340
  padding: calc(var(--spacing) * --value(integer))
253
- calc(var(--spacing) * --value(integer) * var(--lum-btn-p-x))
254
- calc(var(--spacing) * --value(integer))
255
- calc(var(--spacing) * --value(integer) * var(--lum-btn-p-x));
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));
256
344
 
257
345
  gap: calc(
258
346
  var(--spacing) * --value(integer) * clamp(0.65, 4 / --value(integer), 1)
@@ -267,19 +355,19 @@
267
355
  }
268
356
 
269
357
  @utility lum-input {
270
- @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;
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;
271
359
  border-radius: var(--lum-border-radius);
272
360
  corner-shape: superellipse(var(--lum-border-superellipse));
273
361
  }
274
362
 
275
363
  @utility lum-btn {
276
- @apply flex items-center 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;
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;
277
365
  border-radius: var(--lum-border-radius);
278
366
  corner-shape: superellipse(var(--lum-border-superellipse));
279
367
  }
280
368
 
281
369
  @utility lum-card {
282
- @apply flex flex-col gap-3 whitespace-pre-wrap lum-bg-lum-card-bg p-7;
370
+ @apply lum-bg-lum-card-bg flex flex-col gap-3 p-7 whitespace-pre-wrap;
283
371
  border-radius: var(--lum-border-radius);
284
372
  corner-shape: superellipse(var(--lum-border-superellipse));
285
- }
373
+ }