@luminescent/ui 7.0.1 → 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.
Files changed (2) hide show
  1. package/package.json +1 -1
  2. package/src/index.css +29 -25
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@luminescent/ui",
3
- "version": "7.0.1",
3
+ "version": "7.0.2",
4
4
  "description": "Luminescent UI library",
5
5
  "exports": {
6
6
  ".": "./src/index.css",
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%;
@@ -35,13 +36,13 @@
35
36
 
36
37
  @utility lum-depth-shadow {
37
38
  box-shadow:
38
- inset 0 1px 2px var(--border-color),
39
+ inset 0 1px 2px var(--lum-border-color),
39
40
  0 1px 2px rgba(0, 0, 0, 0.05),
40
41
  0 1px 3px rgba(0, 0, 0, 0.1);
41
42
  }
42
43
  @utility lum-depth-shadow-fade {
43
44
  box-shadow:
44
- inset 0 calc(0.5px * var(--lum-depth)) calc(1px * var(--lum-depth)) var(--border-color),
45
+ inset 0 calc(0.5px * var(--lum-depth)) calc(1px * var(--lum-depth)) var(--lum-border-color),
45
46
  0 calc(0.5px * var(--lum-depth)) calc(1px * var(--lum-depth)) rgba(0, 0, 0, 0.05),
46
47
  0 calc(0.5px * var(--lum-depth)) calc(1.5px * var(--lum-depth)) rgba(0, 0, 0, 0.1);
47
48
  }
@@ -55,8 +56,8 @@
55
56
  @utility lum-border-fade {
56
57
  border-color: color-mix(
57
58
  in oklab,
58
- var(--border-color),
59
- transparent calc(var(--lum-depth) * 100%)
59
+ var(--lum-border-color),
60
+ var(--lum-surface-color) calc(var(--lum-depth) * 100%)
60
61
  );
61
62
  }
62
63
 
@@ -71,7 +72,8 @@
71
72
 
72
73
  @utility lum-bg {
73
74
  /* 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
+ --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);
75
77
 
76
78
  @apply border border-transparent outline-none;
77
79
  @apply lum-focus-border;
@@ -86,7 +88,8 @@
86
88
  --alpha: --modifier(integer);
87
89
  --bg-color: --alpha(--value([color]) / calc(var(--alpha, 100) * 1%));
88
90
  --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));
91
+ --lum-border-color: color-mix(in oklab, var(--color-lum-border) var(--lum-border-mix), var(--bg-color));
92
+ --lum-surface-color: var(--bg-color);
90
93
 
91
94
  @apply border border-transparent outline-none;
92
95
  @apply lum-focus-border;
@@ -102,8 +105,9 @@
102
105
  --alpha: --modifier(integer);
103
106
  --bg-color: --alpha(--value([color]) / calc(var(--alpha, 100) * 1%));
104
107
  --bg-color: --alpha(--value(--color-*) / calc(var(--alpha, 100) * 1%));
105
- --border-color: color-mix(in oklab, var(--color-lum-border) var(--lum-border-mix), var(--bg-color));
108
+ --lum-border-color: color-mix(in oklab, var(--color-lum-border) var(--lum-border-mix), var(--bg-color));
106
109
  --gradient-color: color-mix(in oklab, var(--color-lum-gradient) var(--lum-gradient-mix), var(--bg-color));
110
+ --lum-surface-color: var(--gradient-color);
107
111
 
108
112
  @apply border border-transparent outline-none;
109
113
  @apply lum-focus-border;
@@ -119,12 +123,13 @@
119
123
  --alpha: --modifier(integer);
120
124
  --bg-color: --alpha(--value([color]) / calc(var(--alpha, 100) * 1%));
121
125
  --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));
126
+ --lum-border-color: color-mix(in oklab, var(--color-lum-border) var(--lum-border-mix), var(--bg-color));
127
+ --lum-surface-color: var(--bg-color);
123
128
 
124
129
  @apply border border-transparent outline-none;
125
130
  @apply lum-focus-border;
126
131
 
127
- border-color: var(--border-color);
132
+ border-color: var(--lum-border-color);
128
133
  background-color: var(--bg-color);
129
134
 
130
135
  @apply lum-allow-keywords;
@@ -135,13 +140,14 @@
135
140
  --alpha: --modifier(integer);
136
141
  --bg-color: --alpha(--value([color]) / calc(var(--alpha, 100) * 1%));
137
142
  --bg-color: --alpha(--value(--color-*) / calc(var(--alpha, 100) * 1%));
138
- --border-color: color-mix(in oklab, var(--color-lum-border) var(--lum-border-mix), var(--bg-color));
143
+ --lum-border-color: color-mix(in oklab, var(--color-lum-border) var(--lum-border-mix), var(--bg-color));
139
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);
140
146
 
141
147
  @apply border border-transparent outline-none;
142
148
  @apply lum-focus-border;
143
149
 
144
- border-color: var(--border-color);
150
+ border-color: var(--lum-border-color);
145
151
  background: linear-gradient(var(--lum-gradient-angle), var(--bg-color), var(--gradient-color));
146
152
 
147
153
  @apply lum-allow-keywords;
@@ -152,7 +158,8 @@
152
158
  --alpha: --modifier(integer);
153
159
  --bg-color: --alpha(--value([color]) / calc(var(--alpha, 100) * 1%));
154
160
  --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));
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);
156
163
 
157
164
  @apply lum-depth-shadow;
158
165
 
@@ -166,8 +173,9 @@
166
173
  --alpha: --modifier(integer);
167
174
  --bg-color: --alpha(--value([color]) / calc(var(--alpha, 100) * 1%));
168
175
  --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));
176
+ --lum-border-color: color-mix(in oklab, var(--color-lum-border) var(--lum-border-mix), var(--bg-color));
170
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);
171
179
 
172
180
  @apply lum-depth-shadow;
173
181
 
@@ -181,8 +189,9 @@
181
189
  --alpha: --modifier(integer);
182
190
  --bg-color: --alpha(--value([color]) / calc(var(--alpha, 100) * 1%));
183
191
  --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));
192
+ --lum-border-color: color-mix(in oklab, var(--color-lum-border) var(--lum-border-mix), var(--bg-color));
185
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);
186
195
 
187
196
  @apply border border-transparent outline-none;
188
197
  @apply lum-focus-border;
@@ -197,7 +206,9 @@
197
206
  --alpha: --modifier(integer);
198
207
  --bg-color: --alpha(--value([color]) / calc(var(--alpha, 100) * 1%));
199
208
  --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));
209
+ --lum-border-color: color-mix(in oklab, var(--color-lum-border) var(--lum-border-mix), var(--bg-color));
210
+ --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%));
201
212
 
202
213
  @apply border border-transparent outline-none;
203
214
  @apply lum-focus-border;
@@ -207,9 +218,10 @@
207
218
  @apply lum-allow-keywords;
208
219
 
209
220
  &::after, &:hover {
221
+ --lum-surface-color: var(--lum-toggle-hover-bg);
222
+ background-color: var(--lum-toggle-hover-bg);
210
223
  @apply lum-border-fade;
211
224
  @apply lum-depth-shadow-fade;
212
- background-color: --alpha(color-mix(in oklab, white 10%, --value(--color-*)) / calc(var(--alpha, 100) * 1%));
213
225
  @apply lum-allow-keywords;
214
226
  }
215
227
  }
@@ -221,7 +233,7 @@
221
233
  }
222
234
 
223
235
  @utility rounded-lum-* {
224
- border-radius: calc(var(--lum-border-radius) - calc(var(--spacing) * --value(integer)));
236
+ border-radius: calc(var(--lum-border-radius) - calc(var(--spacing) * --value(number)));
225
237
  corner-shape: superellipse(var(--lum-border-superellipse));
226
238
  }
227
239
 
@@ -270,12 +282,4 @@
270
282
  @apply flex flex-col gap-3 whitespace-pre-wrap lum-bg-lum-card-bg p-7;
271
283
  border-radius: var(--lum-border-radius);
272
284
  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;
281
285
  }