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