@luminescent/ui 6.8.2 → 7.0.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.
Files changed (2) hide show
  1. package/package.json +1 -1
  2. package/src/index.css +38 -115
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@luminescent/ui",
3
- "version": "6.8.2",
3
+ "version": "7.0.0",
4
4
  "description": "Luminescent UI library",
5
5
  "exports": {
6
6
  ".": "./src/index.css",
package/src/index.css CHANGED
@@ -29,34 +29,26 @@
29
29
  }
30
30
 
31
31
 
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
-
32
+ @utility lum-depth-surface {
39
33
  @apply border border-transparent outline-none;
40
34
 
41
35
  &:focus {
42
36
  border-color: var(--color-lum-accent);
43
37
  }
44
38
 
45
- /* Border fades out when depth is active */
46
39
  border-color: color-mix(
47
40
  in oklab,
48
- var(--border-color),
49
- transparent calc(var(--lum-depth) * 100%)
41
+ var(--lum-border-color),
42
+ var(--lum-surface-color) calc(var(--lum-depth) * 100%)
50
43
  );
51
44
 
52
- /* Shadow fades in when depth is active */
53
45
  box-shadow:
54
- inset 0 calc(1px * var(--lum-depth)) calc(2px * var(--lum-depth)) var(--border-color),
46
+ inset 0 calc(1px * var(--lum-depth)) calc(2px * var(--lum-depth)) var(--lum-border-color),
55
47
  0 calc(1px * var(--lum-depth)) calc(2px * var(--lum-depth)) rgba(0, 0, 0, 0.05),
56
48
  0 calc(1px * var(--lum-depth)) calc(3px * var(--lum-depth)) rgba(0, 0, 0, 0.1);
49
+ }
57
50
 
58
- background-color: var(--bg-color);
59
-
51
+ @utility lum-surface-keyword-fallback {
60
52
  /* Allow standard color keywords */
61
53
  background-color: --value('inherit', 'transparent', 'currentColor');
62
54
  border-color: --value('inherit', 'transparent', 'currentColor');
@@ -65,72 +57,47 @@
65
57
  0 calc(1px * var(--lum-depth)) calc(3px * var(--lum-depth)) --value('inherit', 'transparent', 'currentColor');
66
58
  }
67
59
 
68
- @utility lum-grad-bg-* {
60
+ @utility lum-bg-* {
69
61
  /* Base color logic */
70
62
  --alpha: --modifier(integer);
71
63
  --bg-color: --alpha(--value([color]) / calc(var(--alpha, 100) * 1%));
72
64
  --bg-color: --alpha(--value(--color-*) / calc(var(--alpha, 100) * 1%));
73
- --border-color: color-mix(in oklab, var(--color-lum-border) var(--lum-border-mix), var(--bg-color));
74
- --gradient-color: color-mix(in oklab, var(--color-lum-gradient) var(--lum-gradient-mix), var(--bg-color));
65
+ --lum-border-color: color-mix(in oklab, var(--color-lum-border) var(--lum-border-mix), var(--bg-color));
66
+ --lum-surface-color: var(--bg-color);
75
67
 
76
- @apply border border-transparent outline-none;
68
+ @apply lum-depth-surface;
77
69
 
78
- &:focus {
79
- border-color: var(--color-lum-accent);
80
- }
70
+ background-color: var(--bg-color);
71
+ @apply lum-surface-keyword-fallback;
72
+ }
81
73
 
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
- );
74
+ @utility lum-grad-bg-* {
75
+ /* Base color logic */
76
+ --alpha: --modifier(integer);
77
+ --bg-color: --alpha(--value([color]) / calc(var(--alpha, 100) * 1%));
78
+ --bg-color: --alpha(--value(--color-*) / calc(var(--alpha, 100) * 1%));
79
+ --lum-border-color: color-mix(in oklab, var(--color-lum-border) var(--lum-border-mix), var(--bg-color));
80
+ --gradient-color: color-mix(in oklab, var(--color-lum-gradient) var(--lum-gradient-mix), var(--bg-color));
81
+ --lum-surface-color: var(--gradient-color);
88
82
 
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);
83
+ @apply lum-depth-surface;
94
84
 
95
- background:
85
+ background:
96
86
  linear-gradient(
97
87
  var(--lum-gradient-angle),
98
88
  var(--bg-color),
99
89
  var(--gradient-color)
100
90
  );
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');
91
+ background-clip: border-box;
92
+ @apply lum-surface-keyword-fallback;
108
93
  }
109
94
 
110
95
  @utility lum-bg {
111
96
  /* Base color logic */
112
- --alpha: --modifier(integer);
113
- --border-color: color-mix(in oklab, var(--color-lum-border) var(--lum-border-mix), var(--bg-color));
97
+ --lum-border-color: color-mix(in oklab, var(--color-lum-border) var(--lum-border-mix), var(--bg-color));
98
+ --lum-surface-color: var(--bg-color);
114
99
 
115
- @apply border border-transparent outline-none;
116
-
117
- &:focus {
118
- /* Border fades out when depth is active */
119
- border-color: var(--color-lum-accent);
120
- }
121
-
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
- );
128
-
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);
100
+ @apply lum-depth-surface;
134
101
 
135
102
  background-color: var(--bg-color);
136
103
  }
@@ -140,56 +107,20 @@
140
107
  --alpha: --modifier(integer);
141
108
  --bg-color: --alpha(--value([color]) / calc(var(--alpha, 100) * 1%));
142
109
  --bg-color: --alpha(--value(--color-*) / calc(var(--alpha, 100) * 1%));
143
- --border-color: color-mix(in oklab, var(--color-lum-border) var(--lum-border-mix), var(--bg-color));
144
-
145
- @apply border border-transparent outline-none;
146
- &:focus {
147
- @apply border-lum-accent;
148
- }
149
-
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
- );
110
+ --lum-border-color: color-mix(in oklab, var(--color-lum-border) var(--lum-border-mix), var(--bg-color));
111
+ --lum-surface-color: var(--bg-color);
112
+ --lum-toggle-hover-bg: --alpha(color-mix(in oklab, white 10%, --value(--color-*)) / calc(var(--alpha, 100) * 1%));
156
113
 
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);
114
+ @apply lum-depth-surface;
162
115
 
163
116
  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');
117
+ @apply lum-surface-keyword-fallback;
171
118
 
172
119
  &::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
-
185
- 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');
120
+ @apply lum-depth-surface;
121
+ --lum-surface-color: var(--lum-toggle-hover-bg);
122
+ background-color: var(--lum-toggle-hover-bg);
123
+ @apply lum-surface-keyword-fallback;
193
124
  }
194
125
  }
195
126
 
@@ -200,7 +131,7 @@
200
131
  }
201
132
 
202
133
  @utility rounded-lum-* {
203
- border-radius: calc(var(--lum-border-radius) - calc(var(--spacing) * --value(integer)));
134
+ border-radius: calc(var(--lum-border-radius) - calc(var(--spacing) * --value(number)));
204
135
  corner-shape: superellipse(var(--lum-border-superellipse));
205
136
  }
206
137
 
@@ -249,12 +180,4 @@
249
180
  @apply flex flex-col gap-3 whitespace-pre-wrap lum-bg-lum-card-bg p-7;
250
181
  border-radius: var(--lum-border-radius);
251
182
  corner-shape: superellipse(var(--lum-border-superellipse));
252
- }
253
-
254
- @utility lum-hoverable {
255
- @apply transition hover:scale-102 active:scale-102 hover:drop-shadow-lg active:drop-shadow-lg hover:duration-75 active:duration-75 ease-out;
256
- }
257
-
258
- @utility lum-loading {
259
- @apply animate-spin border-transparent border-l-current border-t-current border-3 rounded-full;
260
183
  }