@vaneui/ui 0.3.1-alpha.20251222151356.4f77437 → 0.3.1-alpha.20251223082222.6676a81
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/dist/components/themeContext.d.ts +2 -2
- package/dist/components/themeContext.d.ts.map +1 -1
- package/dist/components/ui/classes/appearanceClasses.d.ts.map +1 -1
- package/dist/components/ui/classes/typographyClasses.d.ts.map +1 -1
- package/dist/components/ui/props/appearanceProps.d.ts +0 -2
- package/dist/components/ui/props/appearanceProps.d.ts.map +1 -1
- package/dist/components/ui/props/keys.d.ts +1 -1
- package/dist/components/ui/theme/appearance/linkVariantTheme.d.ts +17 -0
- package/dist/components/ui/theme/appearance/linkVariantTheme.d.ts.map +1 -0
- package/dist/components/ui/theme/defaults.d.ts.map +1 -1
- package/dist/components/ui/theme/typographyTheme.d.ts +12 -1
- package/dist/components/ui/theme/typographyTheme.d.ts.map +1 -1
- package/dist/index.esm.js +29 -25
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +29 -25
- package/dist/index.js.map +1 -1
- package/dist/ui.css +69 -135
- package/dist/vars.css +64 -55
- package/package.json +1 -1
package/dist/ui.css
CHANGED
|
@@ -15,14 +15,10 @@
|
|
|
15
15
|
--color-red-500: oklch(63.7% 0.237 25.331);
|
|
16
16
|
--color-red-600: oklch(57.7% 0.245 27.325);
|
|
17
17
|
--color-red-700: oklch(50.5% 0.213 27.518);
|
|
18
|
-
--color-red-800: oklch(44.4% 0.177 26.899);
|
|
19
18
|
--color-orange-500: oklch(70.5% 0.213 47.604);
|
|
20
19
|
--color-amber-50: oklch(98.7% 0.022 95.277);
|
|
21
20
|
--color-amber-100: oklch(96.2% 0.059 95.617);
|
|
22
|
-
--color-amber-200: oklch(92.4% 0.12 95.746);
|
|
23
21
|
--color-amber-600: oklch(66.6% 0.179 58.318);
|
|
24
|
-
--color-amber-700: oklch(55.5% 0.163 48.998);
|
|
25
|
-
--color-amber-800: oklch(47.3% 0.137 46.201);
|
|
26
22
|
--color-yellow-50: oklch(98.7% 0.026 102.212);
|
|
27
23
|
--color-yellow-100: oklch(97.3% 0.071 103.193);
|
|
28
24
|
--color-yellow-200: oklch(94.5% 0.129 101.54);
|
|
@@ -35,17 +31,11 @@
|
|
|
35
31
|
--color-green-700: oklch(52.7% 0.154 150.069);
|
|
36
32
|
--color-emerald-50: oklch(97.9% 0.021 166.113);
|
|
37
33
|
--color-emerald-100: oklch(95% 0.052 163.051);
|
|
38
|
-
--color-emerald-200: oklch(90.5% 0.093 164.15);
|
|
39
34
|
--color-emerald-500: oklch(69.6% 0.17 162.48);
|
|
40
35
|
--color-emerald-600: oklch(59.6% 0.145 163.225);
|
|
41
|
-
--color-emerald-700: oklch(50.8% 0.118 165.612);
|
|
42
|
-
--color-emerald-800: oklch(43.2% 0.095 166.913);
|
|
43
36
|
--color-cyan-50: oklch(98.4% 0.019 200.873);
|
|
44
37
|
--color-cyan-100: oklch(95.6% 0.045 203.388);
|
|
45
|
-
--color-cyan-200: oklch(91.7% 0.08 205.041);
|
|
46
38
|
--color-cyan-600: oklch(60.9% 0.126 221.723);
|
|
47
|
-
--color-cyan-700: oklch(52% 0.105 223.128);
|
|
48
|
-
--color-cyan-800: oklch(45% 0.085 224.283);
|
|
49
39
|
--color-blue-50: oklch(97% 0.014 254.604);
|
|
50
40
|
--color-blue-100: oklch(93.2% 0.032 255.585);
|
|
51
41
|
--color-blue-200: oklch(88.2% 0.059 254.128);
|
|
@@ -61,6 +51,7 @@
|
|
|
61
51
|
--color-indigo-700: oklch(45.7% 0.24 277.023);
|
|
62
52
|
--color-violet-400: oklch(70.2% 0.183 293.541);
|
|
63
53
|
--color-violet-600: oklch(54.1% 0.281 293.009);
|
|
54
|
+
--color-purple-100: oklch(94.6% 0.033 307.174);
|
|
64
55
|
--color-purple-600: oklch(55.8% 0.288 302.321);
|
|
65
56
|
--color-purple-700: oklch(49.6% 0.265 301.924);
|
|
66
57
|
--color-pink-600: oklch(59.2% 0.249 0.584);
|
|
@@ -69,7 +60,6 @@
|
|
|
69
60
|
--color-rose-200: oklch(89.2% 0.058 10.001);
|
|
70
61
|
--color-rose-600: oklch(58.6% 0.253 17.585);
|
|
71
62
|
--color-rose-700: oklch(51.4% 0.222 16.935);
|
|
72
|
-
--color-rose-800: oklch(45.5% 0.188 13.697);
|
|
73
63
|
--color-gray-50: oklch(98.5% 0.002 247.839);
|
|
74
64
|
--color-gray-100: oklch(96.7% 0.003 264.542);
|
|
75
65
|
--color-gray-200: oklch(92.8% 0.006 264.531);
|
|
@@ -79,7 +69,6 @@
|
|
|
79
69
|
--color-gray-700: oklch(37.3% 0.034 259.733);
|
|
80
70
|
--color-gray-800: oklch(27.8% 0.033 256.848);
|
|
81
71
|
--color-gray-900: oklch(21% 0.034 264.665);
|
|
82
|
-
--color-gray-950: oklch(13% 0.028 261.692);
|
|
83
72
|
--color-white: #fff;
|
|
84
73
|
--spacing: 0.25rem;
|
|
85
74
|
--container-sm: 24rem;
|
|
@@ -130,6 +119,14 @@
|
|
|
130
119
|
--default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
131
120
|
--default-font-family: var(--font-sans);
|
|
132
121
|
--default-mono-font-family: var(--font-mono);
|
|
122
|
+
--lightness-hover-outline: 0.02;
|
|
123
|
+
--lightness-active-outline: 0.04;
|
|
124
|
+
--lightness-hover-filled: 0.03;
|
|
125
|
+
--lightness-active-filled: 0.06;
|
|
126
|
+
--chroma-boost-hover-outline: 3.2;
|
|
127
|
+
--chroma-boost-active-outline: 5.2;
|
|
128
|
+
--chroma-boost-hover-filled: 1.1;
|
|
129
|
+
--chroma-boost-active-filled: 1.15;
|
|
133
130
|
--color-text-default: var(--color-gray-900);
|
|
134
131
|
--color-text-primary: var(--color-blue-600);
|
|
135
132
|
--color-text-secondary: var(--color-gray-600);
|
|
@@ -159,27 +156,24 @@
|
|
|
159
156
|
--color-bg-danger: var(--color-red-50);
|
|
160
157
|
--color-bg-warning: var(--color-amber-50);
|
|
161
158
|
--color-bg-info: var(--color-cyan-50);
|
|
162
|
-
--color-bg-
|
|
163
|
-
--color-bg-hover-
|
|
164
|
-
--color-bg-hover-
|
|
165
|
-
--color-bg-hover-
|
|
166
|
-
--color-bg-hover-
|
|
167
|
-
--color-bg-hover-
|
|
168
|
-
--color-bg-hover-
|
|
169
|
-
--color-bg-hover-
|
|
170
|
-
--color-bg-hover-
|
|
171
|
-
--color-bg-
|
|
172
|
-
--color-bg-
|
|
173
|
-
--color-bg-active-
|
|
174
|
-
--color-bg-active-
|
|
175
|
-
--color-bg-active-
|
|
176
|
-
--color-bg-active-
|
|
177
|
-
--color-bg-active-
|
|
178
|
-
--color-bg-active-
|
|
179
|
-
--color-bg-active-
|
|
180
|
-
--color-bg-active-warning: var(--color-amber-200);
|
|
181
|
-
--color-bg-active-info: var(--color-cyan-200);
|
|
182
|
-
--color-bg-active-link: var(--color-blue-200);
|
|
159
|
+
--color-bg-hover-default: oklch(from var(--color-bg-default) calc(l - var(--lightness-hover-outline)) calc(c * var(--chroma-boost-hover-outline)) h);
|
|
160
|
+
--color-bg-hover-primary: oklch(from var(--color-bg-primary) calc(l - var(--lightness-hover-outline)) calc(c * var(--chroma-boost-hover-outline)) h);
|
|
161
|
+
--color-bg-hover-secondary: oklch(from var(--color-bg-secondary) calc(l - var(--lightness-hover-outline)) calc(c * var(--chroma-boost-hover-outline)) h);
|
|
162
|
+
--color-bg-hover-tertiary: oklch(from var(--color-bg-tertiary) calc(l - var(--lightness-hover-outline)) calc(c * var(--chroma-boost-hover-outline)) h);
|
|
163
|
+
--color-bg-hover-accent: oklch(from var(--color-bg-accent) calc(l - var(--lightness-hover-outline)) calc(c * var(--chroma-boost-hover-outline)) h);
|
|
164
|
+
--color-bg-hover-success: oklch(from var(--color-bg-success) calc(l - var(--lightness-hover-outline)) calc(c * var(--chroma-boost-hover-outline)) h);
|
|
165
|
+
--color-bg-hover-danger: oklch(from var(--color-bg-danger) calc(l - var(--lightness-hover-outline)) calc(c * var(--chroma-boost-hover-outline)) h);
|
|
166
|
+
--color-bg-hover-warning: oklch(from var(--color-bg-warning) calc(l - var(--lightness-hover-outline)) calc(c * var(--chroma-boost-hover-outline)) h);
|
|
167
|
+
--color-bg-hover-info: oklch(from var(--color-bg-info) calc(l - var(--lightness-hover-outline)) calc(c * var(--chroma-boost-hover-outline)) h);
|
|
168
|
+
--color-bg-active-default: oklch(from var(--color-bg-default) calc(l - var(--lightness-active-outline)) calc(c * var(--chroma-boost-active-outline)) h);
|
|
169
|
+
--color-bg-active-primary: oklch(from var(--color-bg-primary) calc(l - var(--lightness-active-outline)) calc(c * var(--chroma-boost-active-outline)) h);
|
|
170
|
+
--color-bg-active-secondary: oklch(from var(--color-bg-secondary) calc(l - var(--lightness-active-outline)) calc(c * var(--chroma-boost-active-outline)) h);
|
|
171
|
+
--color-bg-active-tertiary: oklch(from var(--color-bg-tertiary) calc(l - var(--lightness-active-outline)) calc(c * var(--chroma-boost-active-outline)) h);
|
|
172
|
+
--color-bg-active-accent: oklch(from var(--color-bg-accent) calc(l - var(--lightness-active-outline)) calc(c * var(--chroma-boost-active-outline)) h);
|
|
173
|
+
--color-bg-active-success: oklch(from var(--color-bg-success) calc(l - var(--lightness-active-outline)) calc(c * var(--chroma-boost-active-outline)) h);
|
|
174
|
+
--color-bg-active-danger: oklch(from var(--color-bg-danger) calc(l - var(--lightness-active-outline)) calc(c * var(--chroma-boost-active-outline)) h);
|
|
175
|
+
--color-bg-active-warning: oklch(from var(--color-bg-warning) calc(l - var(--lightness-active-outline)) calc(c * var(--chroma-boost-active-outline)) h);
|
|
176
|
+
--color-bg-active-info: oklch(from var(--color-bg-info) calc(l - var(--lightness-active-outline)) calc(c * var(--chroma-boost-active-outline)) h);
|
|
183
177
|
--color-bg-filled-default: var(--color-gray-800);
|
|
184
178
|
--color-bg-filled-primary: var(--color-blue-600);
|
|
185
179
|
--color-bg-filled-secondary: var(--color-gray-600);
|
|
@@ -189,27 +183,24 @@
|
|
|
189
183
|
--color-bg-filled-danger: var(--color-red-600);
|
|
190
184
|
--color-bg-filled-warning: var(--color-amber-600);
|
|
191
185
|
--color-bg-filled-info: var(--color-cyan-600);
|
|
192
|
-
--color-bg-filled-
|
|
193
|
-
--color-bg-filled-hover-
|
|
194
|
-
--color-bg-filled-hover-
|
|
195
|
-
--color-bg-filled-hover-
|
|
196
|
-
--color-bg-filled-hover-
|
|
197
|
-
--color-bg-filled-hover-
|
|
198
|
-
--color-bg-filled-hover-
|
|
199
|
-
--color-bg-filled-hover-
|
|
200
|
-
--color-bg-filled-hover-
|
|
201
|
-
--color-bg-filled-
|
|
202
|
-
--color-bg-filled-
|
|
203
|
-
--color-bg-filled-active-
|
|
204
|
-
--color-bg-filled-active-
|
|
205
|
-
--color-bg-filled-active-
|
|
206
|
-
--color-bg-filled-active-
|
|
207
|
-
--color-bg-filled-active-
|
|
208
|
-
--color-bg-filled-active-
|
|
209
|
-
--color-bg-filled-active-
|
|
210
|
-
--color-bg-filled-active-warning: var(--color-amber-800);
|
|
211
|
-
--color-bg-filled-active-info: var(--color-cyan-800);
|
|
212
|
-
--color-bg-filled-active-link: var(--color-blue-800);
|
|
186
|
+
--color-bg-filled-hover-default: oklch(from var(--color-bg-filled-default) calc(l - var(--lightness-hover-filled)) calc(c * var(--chroma-boost-hover-filled)) h);
|
|
187
|
+
--color-bg-filled-hover-primary: oklch(from var(--color-bg-filled-primary) calc(l - var(--lightness-hover-filled)) calc(c * var(--chroma-boost-hover-filled)) h);
|
|
188
|
+
--color-bg-filled-hover-secondary: oklch(from var(--color-bg-filled-secondary) calc(l - var(--lightness-hover-filled)) calc(c * var(--chroma-boost-hover-filled)) h);
|
|
189
|
+
--color-bg-filled-hover-tertiary: oklch(from var(--color-bg-filled-tertiary) calc(l - var(--lightness-hover-filled)) calc(c * var(--chroma-boost-hover-filled)) h);
|
|
190
|
+
--color-bg-filled-hover-accent: oklch(from var(--color-bg-filled-accent) calc(l - var(--lightness-hover-filled)) calc(c * var(--chroma-boost-hover-filled)) h);
|
|
191
|
+
--color-bg-filled-hover-success: oklch(from var(--color-bg-filled-success) calc(l - var(--lightness-hover-filled)) calc(c * var(--chroma-boost-hover-filled)) h);
|
|
192
|
+
--color-bg-filled-hover-danger: oklch(from var(--color-bg-filled-danger) calc(l - var(--lightness-hover-filled)) calc(c * var(--chroma-boost-hover-filled)) h);
|
|
193
|
+
--color-bg-filled-hover-warning: oklch(from var(--color-bg-filled-warning) calc(l - var(--lightness-hover-filled)) calc(c * var(--chroma-boost-hover-filled)) h);
|
|
194
|
+
--color-bg-filled-hover-info: oklch(from var(--color-bg-filled-info) calc(l - var(--lightness-hover-filled)) calc(c * var(--chroma-boost-hover-filled)) h);
|
|
195
|
+
--color-bg-filled-active-default: oklch(from var(--color-bg-filled-default) calc(l - var(--lightness-active-filled)) calc(c * var(--chroma-boost-active-filled)) h);
|
|
196
|
+
--color-bg-filled-active-primary: oklch(from var(--color-bg-filled-primary) calc(l - var(--lightness-active-filled)) calc(c * var(--chroma-boost-active-filled)) h);
|
|
197
|
+
--color-bg-filled-active-secondary: oklch(from var(--color-bg-filled-secondary) calc(l - var(--lightness-active-filled)) calc(c * var(--chroma-boost-active-filled)) h);
|
|
198
|
+
--color-bg-filled-active-tertiary: oklch(from var(--color-bg-filled-tertiary) calc(l - var(--lightness-active-filled)) calc(c * var(--chroma-boost-active-filled)) h);
|
|
199
|
+
--color-bg-filled-active-accent: oklch(from var(--color-bg-filled-accent) calc(l - var(--lightness-active-filled)) calc(c * var(--chroma-boost-active-filled)) h);
|
|
200
|
+
--color-bg-filled-active-success: oklch(from var(--color-bg-filled-success) calc(l - var(--lightness-active-filled)) calc(c * var(--chroma-boost-active-filled)) h);
|
|
201
|
+
--color-bg-filled-active-danger: oklch(from var(--color-bg-filled-danger) calc(l - var(--lightness-active-filled)) calc(c * var(--chroma-boost-active-filled)) h);
|
|
202
|
+
--color-bg-filled-active-warning: oklch(from var(--color-bg-filled-warning) calc(l - var(--lightness-active-filled)) calc(c * var(--chroma-boost-active-filled)) h);
|
|
203
|
+
--color-bg-filled-active-info: oklch(from var(--color-bg-filled-info) calc(l - var(--lightness-active-filled)) calc(c * var(--chroma-boost-active-filled)) h);
|
|
213
204
|
--color-bg-layout-default: var(--color-white);
|
|
214
205
|
--color-bg-layout-primary: var(--color-white);
|
|
215
206
|
--color-bg-layout-secondary: var(--color-gray-50);
|
|
@@ -219,7 +210,6 @@
|
|
|
219
210
|
--color-bg-layout-danger: var(--color-red-50);
|
|
220
211
|
--color-bg-layout-warning: var(--color-yellow-50);
|
|
221
212
|
--color-bg-layout-info: var(--color-blue-50);
|
|
222
|
-
--color-bg-layout-link: var(--color-blue-50);
|
|
223
213
|
--color-bg-filled-layout-default: var(--color-gray-700);
|
|
224
214
|
--color-bg-filled-layout-primary: var(--color-blue-800);
|
|
225
215
|
--color-bg-filled-layout-secondary: var(--color-gray-800);
|
|
@@ -229,12 +219,10 @@
|
|
|
229
219
|
--color-bg-filled-layout-danger: var(--color-red-700);
|
|
230
220
|
--color-bg-filled-layout-warning: var(--color-yellow-800);
|
|
231
221
|
--color-bg-filled-layout-info: var(--color-blue-700);
|
|
232
|
-
--color-bg-filled-layout-link: var(--color-blue-700);
|
|
233
222
|
--color-border-default: var(--color-gray-200);
|
|
234
223
|
--color-border-primary: var(--color-blue-200);
|
|
235
224
|
--color-border-secondary: var(--color-gray-200);
|
|
236
225
|
--color-border-tertiary: var(--color-gray-300);
|
|
237
|
-
--color-border-link: var(--color-blue-200);
|
|
238
226
|
--color-border-accent: var(--color-rose-200);
|
|
239
227
|
--color-border-success: var(--color-green-200);
|
|
240
228
|
--color-border-danger: var(--color-red-200);
|
|
@@ -249,7 +237,6 @@
|
|
|
249
237
|
--color-border-filled-danger: var(--color-red-600);
|
|
250
238
|
--color-border-filled-warning: var(--color-yellow-600);
|
|
251
239
|
--color-border-filled-info: var(--color-blue-600);
|
|
252
|
-
--color-border-filled-link: var(--color-blue-600);
|
|
253
240
|
--layout-spacing: var(--spacing);
|
|
254
241
|
--ui-spacing: var(--spacing);
|
|
255
242
|
--br-base: var(--spacing);
|
|
@@ -483,6 +470,12 @@
|
|
|
483
470
|
.mb-2 {
|
|
484
471
|
margin-bottom: calc(var(--spacing) * 2);
|
|
485
472
|
}
|
|
473
|
+
.mb-3 {
|
|
474
|
+
margin-bottom: calc(var(--spacing) * 3);
|
|
475
|
+
}
|
|
476
|
+
.mb-6 {
|
|
477
|
+
margin-bottom: calc(var(--spacing) * 6);
|
|
478
|
+
}
|
|
486
479
|
.block {
|
|
487
480
|
display: block;
|
|
488
481
|
}
|
|
@@ -523,6 +516,9 @@
|
|
|
523
516
|
width: var(--ui-size);
|
|
524
517
|
height: var(--ui-size);
|
|
525
518
|
}
|
|
519
|
+
.h-10 {
|
|
520
|
+
height: calc(var(--spacing) * 10);
|
|
521
|
+
}
|
|
526
522
|
.h-\[calc\(var\(--lh\)\*var\(--fs\)\)\] {
|
|
527
523
|
height: calc(var(--lh) * var(--fs));
|
|
528
524
|
}
|
|
@@ -607,6 +603,9 @@
|
|
|
607
603
|
.grid-cols-1 {
|
|
608
604
|
grid-template-columns: repeat(1, minmax(0, 1fr));
|
|
609
605
|
}
|
|
606
|
+
.grid-cols-6 {
|
|
607
|
+
grid-template-columns: repeat(6, minmax(0, 1fr));
|
|
608
|
+
}
|
|
610
609
|
.flex-col {
|
|
611
610
|
flex-direction: column;
|
|
612
611
|
}
|
|
@@ -810,9 +809,6 @@
|
|
|
810
809
|
.border-\(--color-border-filled-info\) {
|
|
811
810
|
border-color: var(--color-border-filled-info);
|
|
812
811
|
}
|
|
813
|
-
.border-\(--color-border-filled-link\) {
|
|
814
|
-
border-color: var(--color-border-filled-link);
|
|
815
|
-
}
|
|
816
812
|
.border-\(--color-border-filled-primary\) {
|
|
817
813
|
border-color: var(--color-border-filled-primary);
|
|
818
814
|
}
|
|
@@ -831,9 +827,6 @@
|
|
|
831
827
|
.border-\(--color-border-info\) {
|
|
832
828
|
border-color: var(--color-border-info);
|
|
833
829
|
}
|
|
834
|
-
.border-\(--color-border-link\) {
|
|
835
|
-
border-color: var(--color-border-link);
|
|
836
|
-
}
|
|
837
830
|
.border-\(--color-border-primary\) {
|
|
838
831
|
border-color: var(--color-border-primary);
|
|
839
832
|
}
|
|
@@ -900,9 +893,6 @@
|
|
|
900
893
|
.bg-\(--color-bg-filled-layout-info\) {
|
|
901
894
|
background-color: var(--color-bg-filled-layout-info);
|
|
902
895
|
}
|
|
903
|
-
.bg-\(--color-bg-filled-layout-link\) {
|
|
904
|
-
background-color: var(--color-bg-filled-layout-link);
|
|
905
|
-
}
|
|
906
896
|
.bg-\(--color-bg-filled-layout-primary\) {
|
|
907
897
|
background-color: var(--color-bg-filled-layout-primary);
|
|
908
898
|
}
|
|
@@ -918,9 +908,6 @@
|
|
|
918
908
|
.bg-\(--color-bg-filled-layout-warning\) {
|
|
919
909
|
background-color: var(--color-bg-filled-layout-warning);
|
|
920
910
|
}
|
|
921
|
-
.bg-\(--color-bg-filled-link\) {
|
|
922
|
-
background-color: var(--color-bg-filled-link);
|
|
923
|
-
}
|
|
924
911
|
.bg-\(--color-bg-filled-primary\) {
|
|
925
912
|
background-color: var(--color-bg-filled-primary);
|
|
926
913
|
}
|
|
@@ -951,9 +938,6 @@
|
|
|
951
938
|
.bg-\(--color-bg-layout-info\) {
|
|
952
939
|
background-color: var(--color-bg-layout-info);
|
|
953
940
|
}
|
|
954
|
-
.bg-\(--color-bg-layout-link\) {
|
|
955
|
-
background-color: var(--color-bg-layout-link);
|
|
956
|
-
}
|
|
957
941
|
.bg-\(--color-bg-layout-primary\) {
|
|
958
942
|
background-color: var(--color-bg-layout-primary);
|
|
959
943
|
}
|
|
@@ -969,9 +953,6 @@
|
|
|
969
953
|
.bg-\(--color-bg-layout-warning\) {
|
|
970
954
|
background-color: var(--color-bg-layout-warning);
|
|
971
955
|
}
|
|
972
|
-
.bg-\(--color-bg-link\) {
|
|
973
|
-
background-color: var(--color-bg-link);
|
|
974
|
-
}
|
|
975
956
|
.bg-\(--color-bg-primary\) {
|
|
976
957
|
background-color: var(--color-bg-primary);
|
|
977
958
|
}
|
|
@@ -999,9 +980,6 @@
|
|
|
999
980
|
.bg-\(--color-border-info\) {
|
|
1000
981
|
background-color: var(--color-border-info);
|
|
1001
982
|
}
|
|
1002
|
-
.bg-\(--color-border-link\) {
|
|
1003
|
-
background-color: var(--color-border-link);
|
|
1004
|
-
}
|
|
1005
983
|
.bg-\(--color-border-primary\) {
|
|
1006
984
|
background-color: var(--color-border-primary);
|
|
1007
985
|
}
|
|
@@ -1302,6 +1280,12 @@
|
|
|
1302
1280
|
.text-blue-500 {
|
|
1303
1281
|
color: var(--color-blue-500);
|
|
1304
1282
|
}
|
|
1283
|
+
.text-gray-500 {
|
|
1284
|
+
color: var(--color-gray-500);
|
|
1285
|
+
}
|
|
1286
|
+
.text-gray-700 {
|
|
1287
|
+
color: var(--color-gray-700);
|
|
1288
|
+
}
|
|
1305
1289
|
.text-green-500 {
|
|
1306
1290
|
color: var(--color-green-500);
|
|
1307
1291
|
}
|
|
@@ -1311,6 +1295,12 @@
|
|
|
1311
1295
|
.text-pink-600 {
|
|
1312
1296
|
color: var(--color-pink-600);
|
|
1313
1297
|
}
|
|
1298
|
+
.text-purple-100 {
|
|
1299
|
+
color: var(--color-purple-100);
|
|
1300
|
+
}
|
|
1301
|
+
.text-purple-600 {
|
|
1302
|
+
color: var(--color-purple-600);
|
|
1303
|
+
}
|
|
1314
1304
|
.text-red-500 {
|
|
1315
1305
|
color: var(--color-red-500);
|
|
1316
1306
|
}
|
|
@@ -1377,9 +1367,6 @@
|
|
|
1377
1367
|
.accent-\(--color-bg-filled-info\) {
|
|
1378
1368
|
accent-color: var(--color-bg-filled-info);
|
|
1379
1369
|
}
|
|
1380
|
-
.accent-\(--color-bg-filled-link\) {
|
|
1381
|
-
accent-color: var(--color-bg-filled-link);
|
|
1382
|
-
}
|
|
1383
1370
|
.accent-\(--color-bg-filled-primary\) {
|
|
1384
1371
|
accent-color: var(--color-bg-filled-primary);
|
|
1385
1372
|
}
|
|
@@ -1398,9 +1385,6 @@
|
|
|
1398
1385
|
.accent-\(--color-bg-info\) {
|
|
1399
1386
|
accent-color: var(--color-bg-info);
|
|
1400
1387
|
}
|
|
1401
|
-
.accent-\(--color-bg-link\) {
|
|
1402
|
-
accent-color: var(--color-bg-link);
|
|
1403
|
-
}
|
|
1404
1388
|
.accent-\(--color-bg-primary\) {
|
|
1405
1389
|
accent-color: var(--color-bg-primary);
|
|
1406
1390
|
}
|
|
@@ -1494,9 +1478,6 @@
|
|
|
1494
1478
|
.ring-\(--color-border-filled-info\) {
|
|
1495
1479
|
--tw-ring-color: var(--color-border-filled-info);
|
|
1496
1480
|
}
|
|
1497
|
-
.ring-\(--color-border-filled-link\) {
|
|
1498
|
-
--tw-ring-color: var(--color-border-filled-link);
|
|
1499
|
-
}
|
|
1500
1481
|
.ring-\(--color-border-filled-primary\) {
|
|
1501
1482
|
--tw-ring-color: var(--color-border-filled-primary);
|
|
1502
1483
|
}
|
|
@@ -1515,9 +1496,6 @@
|
|
|
1515
1496
|
.ring-\(--color-border-info\) {
|
|
1516
1497
|
--tw-ring-color: var(--color-border-info);
|
|
1517
1498
|
}
|
|
1518
|
-
.ring-\(--color-border-link\) {
|
|
1519
|
-
--tw-ring-color: var(--color-border-link);
|
|
1520
|
-
}
|
|
1521
1499
|
.ring-\(--color-border-primary\) {
|
|
1522
1500
|
--tw-ring-color: var(--color-border-primary);
|
|
1523
1501
|
}
|
|
@@ -1824,11 +1802,6 @@
|
|
|
1824
1802
|
background-color: var(--color-bg-filled-info);
|
|
1825
1803
|
}
|
|
1826
1804
|
}
|
|
1827
|
-
.checked\:bg-\(--color-bg-filled-link\) {
|
|
1828
|
-
&:checked {
|
|
1829
|
-
background-color: var(--color-bg-filled-link);
|
|
1830
|
-
}
|
|
1831
|
-
}
|
|
1832
1805
|
.checked\:bg-\(--color-bg-filled-primary\) {
|
|
1833
1806
|
&:checked {
|
|
1834
1807
|
background-color: var(--color-bg-filled-primary);
|
|
@@ -1859,11 +1832,6 @@
|
|
|
1859
1832
|
background-color: var(--color-bg-info);
|
|
1860
1833
|
}
|
|
1861
1834
|
}
|
|
1862
|
-
.checked\:bg-\(--color-bg-link\) {
|
|
1863
|
-
&:checked {
|
|
1864
|
-
background-color: var(--color-bg-link);
|
|
1865
|
-
}
|
|
1866
|
-
}
|
|
1867
1835
|
.checked\:bg-\(--color-bg-primary\) {
|
|
1868
1836
|
&:checked {
|
|
1869
1837
|
background-color: var(--color-bg-primary);
|
|
@@ -1939,13 +1907,6 @@
|
|
|
1939
1907
|
}
|
|
1940
1908
|
}
|
|
1941
1909
|
}
|
|
1942
|
-
.hover\:bg-\(--color-bg-filled-hover-link\) {
|
|
1943
|
-
&:hover {
|
|
1944
|
-
@media (hover: hover) {
|
|
1945
|
-
background-color: var(--color-bg-filled-hover-link);
|
|
1946
|
-
}
|
|
1947
|
-
}
|
|
1948
|
-
}
|
|
1949
1910
|
.hover\:bg-\(--color-bg-filled-hover-primary\) {
|
|
1950
1911
|
&:hover {
|
|
1951
1912
|
@media (hover: hover) {
|
|
@@ -2009,13 +1970,6 @@
|
|
|
2009
1970
|
}
|
|
2010
1971
|
}
|
|
2011
1972
|
}
|
|
2012
|
-
.hover\:bg-\(--color-bg-hover-link\) {
|
|
2013
|
-
&:hover {
|
|
2014
|
-
@media (hover: hover) {
|
|
2015
|
-
background-color: var(--color-bg-hover-link);
|
|
2016
|
-
}
|
|
2017
|
-
}
|
|
2018
|
-
}
|
|
2019
1973
|
.hover\:bg-\(--color-bg-hover-primary\) {
|
|
2020
1974
|
&:hover {
|
|
2021
1975
|
@media (hover: hover) {
|
|
@@ -2201,11 +2155,6 @@
|
|
|
2201
2155
|
outline-color: var(--color-border-filled-info);
|
|
2202
2156
|
}
|
|
2203
2157
|
}
|
|
2204
|
-
.focus-visible\:outline-\(--color-border-filled-link\) {
|
|
2205
|
-
&:focus-visible {
|
|
2206
|
-
outline-color: var(--color-border-filled-link);
|
|
2207
|
-
}
|
|
2208
|
-
}
|
|
2209
2158
|
.focus-visible\:outline-\(--color-border-filled-primary\) {
|
|
2210
2159
|
&:focus-visible {
|
|
2211
2160
|
outline-color: var(--color-border-filled-primary);
|
|
@@ -2236,11 +2185,6 @@
|
|
|
2236
2185
|
outline-color: var(--color-border-info);
|
|
2237
2186
|
}
|
|
2238
2187
|
}
|
|
2239
|
-
.focus-visible\:outline-\(--color-border-link\) {
|
|
2240
|
-
&:focus-visible {
|
|
2241
|
-
outline-color: var(--color-border-link);
|
|
2242
|
-
}
|
|
2243
|
-
}
|
|
2244
2188
|
.focus-visible\:outline-\(--color-border-primary\) {
|
|
2245
2189
|
&:focus-visible {
|
|
2246
2190
|
outline-color: var(--color-border-primary);
|
|
@@ -2296,11 +2240,6 @@
|
|
|
2296
2240
|
background-color: var(--color-bg-active-info);
|
|
2297
2241
|
}
|
|
2298
2242
|
}
|
|
2299
|
-
.active\:bg-\(--color-bg-active-link\) {
|
|
2300
|
-
&:active {
|
|
2301
|
-
background-color: var(--color-bg-active-link);
|
|
2302
|
-
}
|
|
2303
|
-
}
|
|
2304
2243
|
.active\:bg-\(--color-bg-active-primary\) {
|
|
2305
2244
|
&:active {
|
|
2306
2245
|
background-color: var(--color-bg-active-primary);
|
|
@@ -2346,11 +2285,6 @@
|
|
|
2346
2285
|
background-color: var(--color-bg-filled-active-info);
|
|
2347
2286
|
}
|
|
2348
2287
|
}
|
|
2349
|
-
.active\:bg-\(--color-bg-filled-active-link\) {
|
|
2350
|
-
&:active {
|
|
2351
|
-
background-color: var(--color-bg-filled-active-link);
|
|
2352
|
-
}
|
|
2353
|
-
}
|
|
2354
2288
|
.active\:bg-\(--color-bg-filled-active-primary\) {
|
|
2355
2289
|
&:active {
|
|
2356
2290
|
background-color: var(--color-bg-filled-active-primary);
|
package/dist/vars.css
CHANGED
|
@@ -1,4 +1,23 @@
|
|
|
1
1
|
@theme {
|
|
2
|
+
/* Lightness Adjustment Variables for Hover/Active States */
|
|
3
|
+
/* These control how much darker elements become on interaction */
|
|
4
|
+
/* Outline/Default variants (light backgrounds - darken on interaction) */
|
|
5
|
+
--lightness-hover-outline: 0.02;
|
|
6
|
+
--lightness-active-outline: 0.04;
|
|
7
|
+
|
|
8
|
+
/* Filled variants (dark backgrounds - darken on interaction) */
|
|
9
|
+
--lightness-hover-filled: 0.03;
|
|
10
|
+
--lightness-active-filled: 0.06;
|
|
11
|
+
|
|
12
|
+
/* Chroma Boost Variables - increase saturation to maintain vibrancy when darkening */
|
|
13
|
+
/* Outline/Default variants */
|
|
14
|
+
--chroma-boost-hover-outline: 3.2;
|
|
15
|
+
--chroma-boost-active-outline: 5.2;
|
|
16
|
+
|
|
17
|
+
/* Filled variants */
|
|
18
|
+
--chroma-boost-hover-filled: 1.1;
|
|
19
|
+
--chroma-boost-active-filled: 1.15;
|
|
20
|
+
|
|
2
21
|
/* Text Colors */
|
|
3
22
|
--color-text-default: var(--color-gray-900);
|
|
4
23
|
--color-text-primary: var(--color-blue-600);
|
|
@@ -34,31 +53,28 @@
|
|
|
34
53
|
--color-bg-danger: var(--color-red-50);
|
|
35
54
|
--color-bg-warning: var(--color-amber-50);
|
|
36
55
|
--color-bg-info: var(--color-cyan-50);
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
--color-bg-hover-
|
|
41
|
-
--color-bg-hover-
|
|
42
|
-
--color-bg-hover-
|
|
43
|
-
--color-bg-hover-
|
|
44
|
-
--color-bg-hover-
|
|
45
|
-
--color-bg-hover-
|
|
46
|
-
--color-bg-hover-
|
|
47
|
-
--color-bg-hover-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
--color-bg-active-
|
|
53
|
-
--color-bg-active-
|
|
54
|
-
--color-bg-active-
|
|
55
|
-
--color-bg-active-
|
|
56
|
-
--color-bg-active-
|
|
57
|
-
--color-bg-active-
|
|
58
|
-
--color-bg-active-
|
|
59
|
-
--color-bg-active-warning: var(--color-amber-200);
|
|
60
|
-
--color-bg-active-info: var(--color-cyan-200);
|
|
61
|
-
--color-bg-active-link: var(--color-blue-200);
|
|
56
|
+
|
|
57
|
+
/* UI Background Hover Colors - Calculated from base using oklch with chroma boost */
|
|
58
|
+
--color-bg-hover-default: oklch(from var(--color-bg-default) calc(l - var(--lightness-hover-outline)) calc(c * var(--chroma-boost-hover-outline)) h);
|
|
59
|
+
--color-bg-hover-primary: oklch(from var(--color-bg-primary) calc(l - var(--lightness-hover-outline)) calc(c * var(--chroma-boost-hover-outline)) h);
|
|
60
|
+
--color-bg-hover-secondary: oklch(from var(--color-bg-secondary) calc(l - var(--lightness-hover-outline)) calc(c * var(--chroma-boost-hover-outline)) h);
|
|
61
|
+
--color-bg-hover-tertiary: oklch(from var(--color-bg-tertiary) calc(l - var(--lightness-hover-outline)) calc(c * var(--chroma-boost-hover-outline)) h);
|
|
62
|
+
--color-bg-hover-accent: oklch(from var(--color-bg-accent) calc(l - var(--lightness-hover-outline)) calc(c * var(--chroma-boost-hover-outline)) h);
|
|
63
|
+
--color-bg-hover-success: oklch(from var(--color-bg-success) calc(l - var(--lightness-hover-outline)) calc(c * var(--chroma-boost-hover-outline)) h);
|
|
64
|
+
--color-bg-hover-danger: oklch(from var(--color-bg-danger) calc(l - var(--lightness-hover-outline)) calc(c * var(--chroma-boost-hover-outline)) h);
|
|
65
|
+
--color-bg-hover-warning: oklch(from var(--color-bg-warning) calc(l - var(--lightness-hover-outline)) calc(c * var(--chroma-boost-hover-outline)) h);
|
|
66
|
+
--color-bg-hover-info: oklch(from var(--color-bg-info) calc(l - var(--lightness-hover-outline)) calc(c * var(--chroma-boost-hover-outline)) h);
|
|
67
|
+
|
|
68
|
+
/* UI Background Active Colors - Calculated from base using oklch with chroma boost */
|
|
69
|
+
--color-bg-active-default: oklch(from var(--color-bg-default) calc(l - var(--lightness-active-outline)) calc(c * var(--chroma-boost-active-outline)) h);
|
|
70
|
+
--color-bg-active-primary: oklch(from var(--color-bg-primary) calc(l - var(--lightness-active-outline)) calc(c * var(--chroma-boost-active-outline)) h);
|
|
71
|
+
--color-bg-active-secondary: oklch(from var(--color-bg-secondary) calc(l - var(--lightness-active-outline)) calc(c * var(--chroma-boost-active-outline)) h);
|
|
72
|
+
--color-bg-active-tertiary: oklch(from var(--color-bg-tertiary) calc(l - var(--lightness-active-outline)) calc(c * var(--chroma-boost-active-outline)) h);
|
|
73
|
+
--color-bg-active-accent: oklch(from var(--color-bg-accent) calc(l - var(--lightness-active-outline)) calc(c * var(--chroma-boost-active-outline)) h);
|
|
74
|
+
--color-bg-active-success: oklch(from var(--color-bg-success) calc(l - var(--lightness-active-outline)) calc(c * var(--chroma-boost-active-outline)) h);
|
|
75
|
+
--color-bg-active-danger: oklch(from var(--color-bg-danger) calc(l - var(--lightness-active-outline)) calc(c * var(--chroma-boost-active-outline)) h);
|
|
76
|
+
--color-bg-active-warning: oklch(from var(--color-bg-warning) calc(l - var(--lightness-active-outline)) calc(c * var(--chroma-boost-active-outline)) h);
|
|
77
|
+
--color-bg-active-info: oklch(from var(--color-bg-info) calc(l - var(--lightness-active-outline)) calc(c * var(--chroma-boost-active-outline)) h);
|
|
62
78
|
|
|
63
79
|
/* Filled UI Background Colors */
|
|
64
80
|
--color-bg-filled-default: var(--color-gray-800);
|
|
@@ -70,31 +86,28 @@
|
|
|
70
86
|
--color-bg-filled-danger: var(--color-red-600);
|
|
71
87
|
--color-bg-filled-warning: var(--color-amber-600);
|
|
72
88
|
--color-bg-filled-info: var(--color-cyan-600);
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
--color-bg-filled-hover-
|
|
77
|
-
--color-bg-filled-hover-
|
|
78
|
-
--color-bg-filled-hover-
|
|
79
|
-
--color-bg-filled-hover-
|
|
80
|
-
--color-bg-filled-hover-
|
|
81
|
-
--color-bg-filled-hover-
|
|
82
|
-
--color-bg-filled-hover-
|
|
83
|
-
--color-bg-filled-hover-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
--color-bg-filled-active-
|
|
89
|
-
--color-bg-filled-active-
|
|
90
|
-
--color-bg-filled-active-
|
|
91
|
-
--color-bg-filled-active-
|
|
92
|
-
--color-bg-filled-active-
|
|
93
|
-
--color-bg-filled-active-
|
|
94
|
-
--color-bg-filled-active-
|
|
95
|
-
--color-bg-filled-active-warning: var(--color-amber-800);
|
|
96
|
-
--color-bg-filled-active-info: var(--color-cyan-800);
|
|
97
|
-
--color-bg-filled-active-link: var(--color-blue-800);
|
|
89
|
+
|
|
90
|
+
/* Filled UI Hover Background Colors - Calculated from base using oklch with chroma boost */
|
|
91
|
+
--color-bg-filled-hover-default: oklch(from var(--color-bg-filled-default) calc(l - var(--lightness-hover-filled)) calc(c * var(--chroma-boost-hover-filled)) h);
|
|
92
|
+
--color-bg-filled-hover-primary: oklch(from var(--color-bg-filled-primary) calc(l - var(--lightness-hover-filled)) calc(c * var(--chroma-boost-hover-filled)) h);
|
|
93
|
+
--color-bg-filled-hover-secondary: oklch(from var(--color-bg-filled-secondary) calc(l - var(--lightness-hover-filled)) calc(c * var(--chroma-boost-hover-filled)) h);
|
|
94
|
+
--color-bg-filled-hover-tertiary: oklch(from var(--color-bg-filled-tertiary) calc(l - var(--lightness-hover-filled)) calc(c * var(--chroma-boost-hover-filled)) h);
|
|
95
|
+
--color-bg-filled-hover-accent: oklch(from var(--color-bg-filled-accent) calc(l - var(--lightness-hover-filled)) calc(c * var(--chroma-boost-hover-filled)) h);
|
|
96
|
+
--color-bg-filled-hover-success: oklch(from var(--color-bg-filled-success) calc(l - var(--lightness-hover-filled)) calc(c * var(--chroma-boost-hover-filled)) h);
|
|
97
|
+
--color-bg-filled-hover-danger: oklch(from var(--color-bg-filled-danger) calc(l - var(--lightness-hover-filled)) calc(c * var(--chroma-boost-hover-filled)) h);
|
|
98
|
+
--color-bg-filled-hover-warning: oklch(from var(--color-bg-filled-warning) calc(l - var(--lightness-hover-filled)) calc(c * var(--chroma-boost-hover-filled)) h);
|
|
99
|
+
--color-bg-filled-hover-info: oklch(from var(--color-bg-filled-info) calc(l - var(--lightness-hover-filled)) calc(c * var(--chroma-boost-hover-filled)) h);
|
|
100
|
+
|
|
101
|
+
/* Filled UI Active Background Colors - Calculated from base using oklch with chroma boost */
|
|
102
|
+
--color-bg-filled-active-default: oklch(from var(--color-bg-filled-default) calc(l - var(--lightness-active-filled)) calc(c * var(--chroma-boost-active-filled)) h);
|
|
103
|
+
--color-bg-filled-active-primary: oklch(from var(--color-bg-filled-primary) calc(l - var(--lightness-active-filled)) calc(c * var(--chroma-boost-active-filled)) h);
|
|
104
|
+
--color-bg-filled-active-secondary: oklch(from var(--color-bg-filled-secondary) calc(l - var(--lightness-active-filled)) calc(c * var(--chroma-boost-active-filled)) h);
|
|
105
|
+
--color-bg-filled-active-tertiary: oklch(from var(--color-bg-filled-tertiary) calc(l - var(--lightness-active-filled)) calc(c * var(--chroma-boost-active-filled)) h);
|
|
106
|
+
--color-bg-filled-active-accent: oklch(from var(--color-bg-filled-accent) calc(l - var(--lightness-active-filled)) calc(c * var(--chroma-boost-active-filled)) h);
|
|
107
|
+
--color-bg-filled-active-success: oklch(from var(--color-bg-filled-success) calc(l - var(--lightness-active-filled)) calc(c * var(--chroma-boost-active-filled)) h);
|
|
108
|
+
--color-bg-filled-active-danger: oklch(from var(--color-bg-filled-danger) calc(l - var(--lightness-active-filled)) calc(c * var(--chroma-boost-active-filled)) h);
|
|
109
|
+
--color-bg-filled-active-warning: oklch(from var(--color-bg-filled-warning) calc(l - var(--lightness-active-filled)) calc(c * var(--chroma-boost-active-filled)) h);
|
|
110
|
+
--color-bg-filled-active-info: oklch(from var(--color-bg-filled-info) calc(l - var(--lightness-active-filled)) calc(c * var(--chroma-boost-active-filled)) h);
|
|
98
111
|
|
|
99
112
|
/* Layout Background Colors */
|
|
100
113
|
--color-bg-layout-default: var(--color-white);
|
|
@@ -107,7 +120,6 @@
|
|
|
107
120
|
--color-bg-layout-warning: var(--color-yellow-50);
|
|
108
121
|
--color-bg-layout-info: var(--color-blue-50);
|
|
109
122
|
--color-bg-layout-transparent: transparent;
|
|
110
|
-
--color-bg-layout-link: var(--color-blue-50);
|
|
111
123
|
|
|
112
124
|
/* Layout Filled Background Colors */
|
|
113
125
|
--color-bg-filled-layout-default: var(--color-gray-700);
|
|
@@ -120,14 +132,12 @@
|
|
|
120
132
|
--color-bg-filled-layout-warning: var(--color-yellow-800);
|
|
121
133
|
--color-bg-filled-layout-info: var(--color-blue-700);
|
|
122
134
|
--color-bg-filled-layout-transparent: transparent;
|
|
123
|
-
--color-bg-filled-layout-link: var(--color-blue-700);
|
|
124
135
|
|
|
125
136
|
/* Border Colors */
|
|
126
137
|
--color-border-default: var(--color-gray-200);
|
|
127
138
|
--color-border-primary: var(--color-blue-200);
|
|
128
139
|
--color-border-secondary: var(--color-gray-200);
|
|
129
140
|
--color-border-tertiary: var(--color-gray-300);
|
|
130
|
-
--color-border-link: var(--color-blue-200);
|
|
131
141
|
--color-border-accent: var(--color-rose-200);
|
|
132
142
|
--color-border-success: var(--color-green-200);
|
|
133
143
|
--color-border-danger: var(--color-red-200);
|
|
@@ -144,7 +154,6 @@
|
|
|
144
154
|
--color-border-filled-danger: var(--color-red-600);
|
|
145
155
|
--color-border-filled-warning: var(--color-yellow-600);
|
|
146
156
|
--color-border-filled-info: var(--color-blue-600);
|
|
147
|
-
--color-border-filled-link: var(--color-blue-600);
|
|
148
157
|
|
|
149
158
|
--layout-spacing: var(--spacing);
|
|
150
159
|
--ui-spacing: var(--spacing);
|
|
@@ -182,4 +191,4 @@
|
|
|
182
191
|
|
|
183
192
|
--fs: calc(var(--fs-unit) * var(--fs-base));
|
|
184
193
|
}
|
|
185
|
-
}
|
|
194
|
+
}
|
package/package.json
CHANGED