@vaneui/ui 0.3.1-alpha.20251223082222.6676a81 → 0.3.1-alpha.20251223141057.aeb1ff8

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 (12) hide show
  1. package/dist/components/ui/props/appearanceProps.d.ts +3 -3
  2. package/dist/components/ui/props/appearanceProps.d.ts.map +1 -1
  3. package/dist/components/ui/props/keys.d.ts +1 -1
  4. package/dist/components/ui/theme/appearance/appearanceTheme.d.ts +4 -4
  5. package/dist/components/ui/theme/appearance/appearanceTheme.d.ts.map +1 -1
  6. package/dist/components/ui/theme/appearance/shadowAppearanceTheme.d.ts +4 -4
  7. package/dist/components/ui/theme/appearance/shadowAppearanceTheme.d.ts.map +1 -1
  8. package/dist/index.esm.js +34 -34
  9. package/dist/index.js +34 -34
  10. package/dist/ui.css +168 -141
  11. package/dist/vars.css +68 -87
  12. package/package.json +1 -1
package/dist/ui.css CHANGED
@@ -15,30 +15,41 @@
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);
18
19
  --color-orange-500: oklch(70.5% 0.213 47.604);
19
20
  --color-amber-50: oklch(98.7% 0.022 95.277);
20
21
  --color-amber-100: oklch(96.2% 0.059 95.617);
22
+ --color-amber-200: oklch(92.4% 0.12 95.746);
23
+ --color-amber-300: oklch(87.9% 0.169 91.605);
21
24
  --color-amber-600: oklch(66.6% 0.179 58.318);
25
+ --color-amber-700: oklch(55.5% 0.163 48.998);
26
+ --color-amber-800: oklch(47.3% 0.137 46.201);
22
27
  --color-yellow-50: oklch(98.7% 0.026 102.212);
23
28
  --color-yellow-100: oklch(97.3% 0.071 103.193);
24
- --color-yellow-200: oklch(94.5% 0.129 101.54);
25
- --color-yellow-600: oklch(68.1% 0.162 75.834);
26
29
  --color-yellow-800: oklch(47.6% 0.114 61.907);
27
30
  --color-green-50: oklch(98.2% 0.018 155.826);
28
- --color-green-200: oklch(92.5% 0.084 155.995);
29
31
  --color-green-500: oklch(72.3% 0.219 149.579);
30
32
  --color-green-600: oklch(62.7% 0.194 149.214);
31
33
  --color-green-700: oklch(52.7% 0.154 150.069);
32
34
  --color-emerald-50: oklch(97.9% 0.021 166.113);
33
35
  --color-emerald-100: oklch(95% 0.052 163.051);
36
+ --color-emerald-200: oklch(90.5% 0.093 164.15);
37
+ --color-emerald-300: oklch(84.5% 0.143 164.978);
34
38
  --color-emerald-500: oklch(69.6% 0.17 162.48);
35
39
  --color-emerald-600: oklch(59.6% 0.145 163.225);
40
+ --color-emerald-700: oklch(50.8% 0.118 165.612);
41
+ --color-emerald-800: oklch(43.2% 0.095 166.913);
36
42
  --color-cyan-50: oklch(98.4% 0.019 200.873);
37
43
  --color-cyan-100: oklch(95.6% 0.045 203.388);
44
+ --color-cyan-200: oklch(91.7% 0.08 205.041);
45
+ --color-cyan-300: oklch(86.5% 0.127 207.078);
38
46
  --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);
39
49
  --color-blue-50: oklch(97% 0.014 254.604);
40
50
  --color-blue-100: oklch(93.2% 0.032 255.585);
41
51
  --color-blue-200: oklch(88.2% 0.059 254.128);
52
+ --color-blue-300: oklch(80.9% 0.105 251.813);
42
53
  --color-blue-500: oklch(62.3% 0.214 259.815);
43
54
  --color-blue-600: oklch(54.6% 0.245 262.881);
44
55
  --color-blue-700: oklch(48.8% 0.243 264.376);
@@ -58,17 +69,21 @@
58
69
  --color-rose-50: oklch(96.9% 0.015 12.422);
59
70
  --color-rose-100: oklch(94.1% 0.03 12.58);
60
71
  --color-rose-200: oklch(89.2% 0.058 10.001);
72
+ --color-rose-300: oklch(81% 0.117 11.638);
61
73
  --color-rose-600: oklch(58.6% 0.253 17.585);
62
74
  --color-rose-700: oklch(51.4% 0.222 16.935);
75
+ --color-rose-800: oklch(45.5% 0.188 13.697);
63
76
  --color-gray-50: oklch(98.5% 0.002 247.839);
64
77
  --color-gray-100: oklch(96.7% 0.003 264.542);
65
78
  --color-gray-200: oklch(92.8% 0.006 264.531);
66
79
  --color-gray-300: oklch(87.2% 0.01 258.338);
80
+ --color-gray-400: oklch(70.7% 0.022 261.325);
67
81
  --color-gray-500: oklch(55.1% 0.027 264.364);
68
82
  --color-gray-600: oklch(44.6% 0.03 256.802);
69
83
  --color-gray-700: oklch(37.3% 0.034 259.733);
70
84
  --color-gray-800: oklch(27.8% 0.033 256.848);
71
85
  --color-gray-900: oklch(21% 0.034 264.665);
86
+ --color-gray-950: oklch(13% 0.028 261.692);
72
87
  --color-white: #fff;
73
88
  --spacing: 0.25rem;
74
89
  --container-sm: 24rem;
@@ -119,16 +134,8 @@
119
134
  --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
120
135
  --default-font-family: var(--font-sans);
121
136
  --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;
130
- --color-text-default: var(--color-gray-900);
131
- --color-text-primary: var(--color-blue-600);
137
+ --color-text-primary: var(--color-gray-900);
138
+ --color-text-brand: var(--color-blue-600);
132
139
  --color-text-secondary: var(--color-gray-600);
133
140
  --color-text-tertiary: var(--color-gray-500);
134
141
  --color-text-link: var(--color-blue-600);
@@ -137,8 +144,8 @@
137
144
  --color-text-danger: var(--color-red-600);
138
145
  --color-text-warning: var(--color-amber-600);
139
146
  --color-text-info: var(--color-cyan-600);
140
- --color-text-filled-default: var(--color-white);
141
- --color-text-filled-primary: var(--color-blue-100);
147
+ --color-text-filled-primary: var(--color-white);
148
+ --color-text-filled-brand: var(--color-blue-100);
142
149
  --color-text-filled-secondary: var(--color-gray-200);
143
150
  --color-text-filled-tertiary: var(--color-gray-300);
144
151
  --color-text-filled-link: var(--color-blue-100);
@@ -147,8 +154,8 @@
147
154
  --color-text-filled-danger: var(--color-red-100);
148
155
  --color-text-filled-warning: var(--color-amber-100);
149
156
  --color-text-filled-info: var(--color-cyan-100);
150
- --color-bg-default: var(--color-white);
151
- --color-bg-primary: var(--color-blue-50);
157
+ --color-bg-primary: var(--color-white);
158
+ --color-bg-brand: var(--color-blue-50);
152
159
  --color-bg-secondary: var(--color-gray-50);
153
160
  --color-bg-tertiary: var(--color-gray-100);
154
161
  --color-bg-accent: var(--color-rose-50);
@@ -156,26 +163,26 @@
156
163
  --color-bg-danger: var(--color-red-50);
157
164
  --color-bg-warning: var(--color-amber-50);
158
165
  --color-bg-info: var(--color-cyan-50);
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);
177
- --color-bg-filled-default: var(--color-gray-800);
178
- --color-bg-filled-primary: var(--color-blue-600);
166
+ --color-bg-hover-primary: var(--color-gray-50);
167
+ --color-bg-hover-brand: var(--color-blue-100);
168
+ --color-bg-hover-secondary: var(--color-gray-100);
169
+ --color-bg-hover-tertiary: var(--color-gray-200);
170
+ --color-bg-hover-accent: var(--color-rose-100);
171
+ --color-bg-hover-success: var(--color-emerald-100);
172
+ --color-bg-hover-danger: var(--color-red-100);
173
+ --color-bg-hover-warning: var(--color-amber-100);
174
+ --color-bg-hover-info: var(--color-cyan-100);
175
+ --color-bg-active-primary: var(--color-gray-100);
176
+ --color-bg-active-brand: var(--color-blue-200);
177
+ --color-bg-active-secondary: var(--color-gray-200);
178
+ --color-bg-active-tertiary: var(--color-gray-300);
179
+ --color-bg-active-accent: var(--color-rose-200);
180
+ --color-bg-active-success: var(--color-emerald-200);
181
+ --color-bg-active-danger: var(--color-red-200);
182
+ --color-bg-active-warning: var(--color-amber-200);
183
+ --color-bg-active-info: var(--color-cyan-200);
184
+ --color-bg-filled-primary: var(--color-gray-800);
185
+ --color-bg-filled-brand: var(--color-blue-600);
179
186
  --color-bg-filled-secondary: var(--color-gray-600);
180
187
  --color-bg-filled-tertiary: var(--color-gray-500);
181
188
  --color-bg-filled-accent: var(--color-rose-600);
@@ -183,26 +190,26 @@
183
190
  --color-bg-filled-danger: var(--color-red-600);
184
191
  --color-bg-filled-warning: var(--color-amber-600);
185
192
  --color-bg-filled-info: var(--color-cyan-600);
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);
204
- --color-bg-layout-default: var(--color-white);
193
+ --color-bg-filled-hover-primary: var(--color-gray-900);
194
+ --color-bg-filled-hover-brand: var(--color-blue-700);
195
+ --color-bg-filled-hover-secondary: var(--color-gray-700);
196
+ --color-bg-filled-hover-tertiary: var(--color-gray-600);
197
+ --color-bg-filled-hover-accent: var(--color-rose-700);
198
+ --color-bg-filled-hover-success: var(--color-emerald-700);
199
+ --color-bg-filled-hover-danger: var(--color-red-700);
200
+ --color-bg-filled-hover-warning: var(--color-amber-700);
201
+ --color-bg-filled-hover-info: var(--color-cyan-700);
202
+ --color-bg-filled-active-primary: var(--color-gray-950);
203
+ --color-bg-filled-active-brand: var(--color-blue-800);
204
+ --color-bg-filled-active-secondary: var(--color-gray-800);
205
+ --color-bg-filled-active-tertiary: var(--color-gray-700);
206
+ --color-bg-filled-active-accent: var(--color-rose-800);
207
+ --color-bg-filled-active-success: var(--color-emerald-800);
208
+ --color-bg-filled-active-danger: var(--color-red-800);
209
+ --color-bg-filled-active-warning: var(--color-amber-800);
210
+ --color-bg-filled-active-info: var(--color-cyan-800);
205
211
  --color-bg-layout-primary: var(--color-white);
212
+ --color-bg-layout-brand: var(--color-blue-50);
206
213
  --color-bg-layout-secondary: var(--color-gray-50);
207
214
  --color-bg-layout-tertiary: var(--color-gray-100);
208
215
  --color-bg-layout-accent: var(--color-indigo-50);
@@ -210,8 +217,8 @@
210
217
  --color-bg-layout-danger: var(--color-red-50);
211
218
  --color-bg-layout-warning: var(--color-yellow-50);
212
219
  --color-bg-layout-info: var(--color-blue-50);
213
- --color-bg-filled-layout-default: var(--color-gray-700);
214
- --color-bg-filled-layout-primary: var(--color-blue-800);
220
+ --color-bg-filled-layout-primary: var(--color-gray-700);
221
+ --color-bg-filled-layout-brand: var(--color-blue-800);
215
222
  --color-bg-filled-layout-secondary: var(--color-gray-800);
216
223
  --color-bg-filled-layout-tertiary: var(--color-gray-900);
217
224
  --color-bg-filled-layout-accent: var(--color-indigo-700);
@@ -219,24 +226,24 @@
219
226
  --color-bg-filled-layout-danger: var(--color-red-700);
220
227
  --color-bg-filled-layout-warning: var(--color-yellow-800);
221
228
  --color-bg-filled-layout-info: var(--color-blue-700);
222
- --color-border-default: var(--color-gray-200);
223
- --color-border-primary: var(--color-blue-200);
224
- --color-border-secondary: var(--color-gray-200);
225
- --color-border-tertiary: var(--color-gray-300);
226
- --color-border-accent: var(--color-rose-200);
227
- --color-border-success: var(--color-green-200);
228
- --color-border-danger: var(--color-red-200);
229
- --color-border-warning: var(--color-yellow-200);
230
- --color-border-info: var(--color-blue-200);
231
- --color-border-filled-default: var(--color-gray-600);
232
- --color-border-filled-primary: var(--color-blue-600);
229
+ --color-border-primary: var(--color-gray-200);
230
+ --color-border-brand: var(--color-blue-300);
231
+ --color-border-secondary: var(--color-gray-300);
232
+ --color-border-tertiary: var(--color-gray-400);
233
+ --color-border-accent: var(--color-rose-300);
234
+ --color-border-success: var(--color-emerald-300);
235
+ --color-border-danger: var(--color-red-300);
236
+ --color-border-warning: var(--color-amber-300);
237
+ --color-border-info: var(--color-cyan-300);
238
+ --color-border-filled-primary: var(--color-gray-600);
239
+ --color-border-filled-brand: var(--color-blue-600);
233
240
  --color-border-filled-secondary: var(--color-gray-700);
234
- --color-border-filled-tertiary: var(--color-gray-800);
241
+ --color-border-filled-tertiary: var(--color-gray-600);
235
242
  --color-border-filled-accent: var(--color-rose-600);
236
- --color-border-filled-success: var(--color-green-600);
243
+ --color-border-filled-success: var(--color-emerald-600);
237
244
  --color-border-filled-danger: var(--color-red-600);
238
- --color-border-filled-warning: var(--color-yellow-600);
239
- --color-border-filled-info: var(--color-blue-600);
245
+ --color-border-filled-warning: var(--color-amber-600);
246
+ --color-border-filled-info: var(--color-cyan-600);
240
247
  --layout-spacing: var(--spacing);
241
248
  --ui-spacing: var(--spacing);
242
249
  --br-base: var(--spacing);
@@ -675,6 +682,9 @@
675
682
  .gap-0 {
676
683
  gap: calc(var(--spacing) * 0);
677
684
  }
685
+ .gap-1 {
686
+ gap: calc(var(--spacing) * 1);
687
+ }
678
688
  .gap-unit {
679
689
  gap: var(--gap-unit);
680
690
  }
@@ -692,6 +702,11 @@
692
702
  margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)));
693
703
  }
694
704
  }
705
+ .truncate {
706
+ overflow: hidden;
707
+ text-overflow: ellipsis;
708
+ white-space: nowrap;
709
+ }
695
710
  .overflow-auto {
696
711
  overflow: auto;
697
712
  }
@@ -791,6 +806,9 @@
791
806
  .border-\(--color-border-accent\) {
792
807
  border-color: var(--color-border-accent);
793
808
  }
809
+ .border-\(--color-border-brand\) {
810
+ border-color: var(--color-border-brand);
811
+ }
794
812
  .border-\(--color-border-danger\) {
795
813
  border-color: var(--color-border-danger);
796
814
  }
@@ -800,12 +818,12 @@
800
818
  .border-\(--color-border-filled-accent\) {
801
819
  border-color: var(--color-border-filled-accent);
802
820
  }
821
+ .border-\(--color-border-filled-brand\) {
822
+ border-color: var(--color-border-filled-brand);
823
+ }
803
824
  .border-\(--color-border-filled-danger\) {
804
825
  border-color: var(--color-border-filled-danger);
805
826
  }
806
- .border-\(--color-border-filled-default\) {
807
- border-color: var(--color-border-filled-default);
808
- }
809
827
  .border-\(--color-border-filled-info\) {
810
828
  border-color: var(--color-border-filled-info);
811
829
  }
@@ -863,33 +881,33 @@
863
881
  .bg-\(--color-bg-accent\) {
864
882
  background-color: var(--color-bg-accent);
865
883
  }
884
+ .bg-\(--color-bg-brand\) {
885
+ background-color: var(--color-bg-brand);
886
+ }
866
887
  .bg-\(--color-bg-danger\) {
867
888
  background-color: var(--color-bg-danger);
868
889
  }
869
- .bg-\(--color-bg-default\) {
870
- background-color: var(--color-bg-default);
871
- }
872
890
  .bg-\(--color-bg-filled-accent\) {
873
891
  background-color: var(--color-bg-filled-accent);
874
892
  }
893
+ .bg-\(--color-bg-filled-brand\) {
894
+ background-color: var(--color-bg-filled-brand);
895
+ }
875
896
  .bg-\(--color-bg-filled-danger\) {
876
897
  background-color: var(--color-bg-filled-danger);
877
898
  }
878
- .bg-\(--color-bg-filled-default\) {
879
- background-color: var(--color-bg-filled-default);
880
- }
881
899
  .bg-\(--color-bg-filled-info\) {
882
900
  background-color: var(--color-bg-filled-info);
883
901
  }
884
902
  .bg-\(--color-bg-filled-layout-accent\) {
885
903
  background-color: var(--color-bg-filled-layout-accent);
886
904
  }
905
+ .bg-\(--color-bg-filled-layout-brand\) {
906
+ background-color: var(--color-bg-filled-layout-brand);
907
+ }
887
908
  .bg-\(--color-bg-filled-layout-danger\) {
888
909
  background-color: var(--color-bg-filled-layout-danger);
889
910
  }
890
- .bg-\(--color-bg-filled-layout-default\) {
891
- background-color: var(--color-bg-filled-layout-default);
892
- }
893
911
  .bg-\(--color-bg-filled-layout-info\) {
894
912
  background-color: var(--color-bg-filled-layout-info);
895
913
  }
@@ -929,12 +947,12 @@
929
947
  .bg-\(--color-bg-layout-accent\) {
930
948
  background-color: var(--color-bg-layout-accent);
931
949
  }
950
+ .bg-\(--color-bg-layout-brand\) {
951
+ background-color: var(--color-bg-layout-brand);
952
+ }
932
953
  .bg-\(--color-bg-layout-danger\) {
933
954
  background-color: var(--color-bg-layout-danger);
934
955
  }
935
- .bg-\(--color-bg-layout-default\) {
936
- background-color: var(--color-bg-layout-default);
937
- }
938
956
  .bg-\(--color-bg-layout-info\) {
939
957
  background-color: var(--color-bg-layout-info);
940
958
  }
@@ -971,12 +989,12 @@
971
989
  .bg-\(--color-border-accent\) {
972
990
  background-color: var(--color-border-accent);
973
991
  }
992
+ .bg-\(--color-border-brand\) {
993
+ background-color: var(--color-border-brand);
994
+ }
974
995
  .bg-\(--color-border-danger\) {
975
996
  background-color: var(--color-border-danger);
976
997
  }
977
- .bg-\(--color-border-default\) {
978
- background-color: var(--color-border-default);
979
- }
980
998
  .bg-\(--color-border-info\) {
981
999
  background-color: var(--color-border-info);
982
1000
  }
@@ -1049,6 +1067,9 @@
1049
1067
  .px-\(--ui-px\) {
1050
1068
  padding-inline: var(--ui-px);
1051
1069
  }
1070
+ .px-1 {
1071
+ padding-inline: calc(var(--spacing) * 1);
1072
+ }
1052
1073
  .px-4 {
1053
1074
  padding-inline: calc(var(--spacing) * 4);
1054
1075
  }
@@ -1156,6 +1177,9 @@
1156
1177
  .text-\(length\:--fs\) {
1157
1178
  font-size: var(--fs);
1158
1179
  }
1180
+ .text-\[10px\] {
1181
+ font-size: 10px;
1182
+ }
1159
1183
  .leading-\(--lh\) {
1160
1184
  --tw-leading: var(--lh);
1161
1185
  line-height: var(--lh);
@@ -1217,21 +1241,21 @@
1217
1241
  .text-\(--color-text-accent\) {
1218
1242
  color: var(--color-text-accent);
1219
1243
  }
1244
+ .text-\(--color-text-brand\) {
1245
+ color: var(--color-text-brand);
1246
+ }
1220
1247
  .text-\(--color-text-danger\) {
1221
1248
  color: var(--color-text-danger);
1222
1249
  }
1223
- .text-\(--color-text-default\) {
1224
- color: var(--color-text-default);
1225
- }
1226
1250
  .text-\(--color-text-filled-accent\) {
1227
1251
  color: var(--color-text-filled-accent);
1228
1252
  }
1253
+ .text-\(--color-text-filled-brand\) {
1254
+ color: var(--color-text-filled-brand);
1255
+ }
1229
1256
  .text-\(--color-text-filled-danger\) {
1230
1257
  color: var(--color-text-filled-danger);
1231
1258
  }
1232
- .text-\(--color-text-filled-default\) {
1233
- color: var(--color-text-filled-default);
1234
- }
1235
1259
  .text-\(--color-text-filled-info\) {
1236
1260
  color: var(--color-text-filled-info);
1237
1261
  }
@@ -1283,6 +1307,9 @@
1283
1307
  .text-gray-500 {
1284
1308
  color: var(--color-gray-500);
1285
1309
  }
1310
+ .text-gray-600 {
1311
+ color: var(--color-gray-600);
1312
+ }
1286
1313
  .text-gray-700 {
1287
1314
  color: var(--color-gray-700);
1288
1315
  }
@@ -1349,21 +1376,21 @@
1349
1376
  .accent-\(--color-bg-accent\) {
1350
1377
  accent-color: var(--color-bg-accent);
1351
1378
  }
1379
+ .accent-\(--color-bg-brand\) {
1380
+ accent-color: var(--color-bg-brand);
1381
+ }
1352
1382
  .accent-\(--color-bg-danger\) {
1353
1383
  accent-color: var(--color-bg-danger);
1354
1384
  }
1355
- .accent-\(--color-bg-default\) {
1356
- accent-color: var(--color-bg-default);
1357
- }
1358
1385
  .accent-\(--color-bg-filled-accent\) {
1359
1386
  accent-color: var(--color-bg-filled-accent);
1360
1387
  }
1388
+ .accent-\(--color-bg-filled-brand\) {
1389
+ accent-color: var(--color-bg-filled-brand);
1390
+ }
1361
1391
  .accent-\(--color-bg-filled-danger\) {
1362
1392
  accent-color: var(--color-bg-filled-danger);
1363
1393
  }
1364
- .accent-\(--color-bg-filled-default\) {
1365
- accent-color: var(--color-bg-filled-default);
1366
- }
1367
1394
  .accent-\(--color-bg-filled-info\) {
1368
1395
  accent-color: var(--color-bg-filled-info);
1369
1396
  }
@@ -1460,21 +1487,21 @@
1460
1487
  .ring-\(--color-border-accent\) {
1461
1488
  --tw-ring-color: var(--color-border-accent);
1462
1489
  }
1490
+ .ring-\(--color-border-brand\) {
1491
+ --tw-ring-color: var(--color-border-brand);
1492
+ }
1463
1493
  .ring-\(--color-border-danger\) {
1464
1494
  --tw-ring-color: var(--color-border-danger);
1465
1495
  }
1466
- .ring-\(--color-border-default\) {
1467
- --tw-ring-color: var(--color-border-default);
1468
- }
1469
1496
  .ring-\(--color-border-filled-accent\) {
1470
1497
  --tw-ring-color: var(--color-border-filled-accent);
1471
1498
  }
1499
+ .ring-\(--color-border-filled-brand\) {
1500
+ --tw-ring-color: var(--color-border-filled-brand);
1501
+ }
1472
1502
  .ring-\(--color-border-filled-danger\) {
1473
1503
  --tw-ring-color: var(--color-border-filled-danger);
1474
1504
  }
1475
- .ring-\(--color-border-filled-default\) {
1476
- --tw-ring-color: var(--color-border-filled-default);
1477
- }
1478
1505
  .ring-\(--color-border-filled-info\) {
1479
1506
  --tw-ring-color: var(--color-border-filled-info);
1480
1507
  }
@@ -1772,14 +1799,14 @@
1772
1799
  background-color: var(--color-bg-accent);
1773
1800
  }
1774
1801
  }
1775
- .checked\:bg-\(--color-bg-danger\) {
1802
+ .checked\:bg-\(--color-bg-brand\) {
1776
1803
  &:checked {
1777
- background-color: var(--color-bg-danger);
1804
+ background-color: var(--color-bg-brand);
1778
1805
  }
1779
1806
  }
1780
- .checked\:bg-\(--color-bg-default\) {
1807
+ .checked\:bg-\(--color-bg-danger\) {
1781
1808
  &:checked {
1782
- background-color: var(--color-bg-default);
1809
+ background-color: var(--color-bg-danger);
1783
1810
  }
1784
1811
  }
1785
1812
  .checked\:bg-\(--color-bg-filled-accent\) {
@@ -1787,14 +1814,14 @@
1787
1814
  background-color: var(--color-bg-filled-accent);
1788
1815
  }
1789
1816
  }
1790
- .checked\:bg-\(--color-bg-filled-danger\) {
1817
+ .checked\:bg-\(--color-bg-filled-brand\) {
1791
1818
  &:checked {
1792
- background-color: var(--color-bg-filled-danger);
1819
+ background-color: var(--color-bg-filled-brand);
1793
1820
  }
1794
1821
  }
1795
- .checked\:bg-\(--color-bg-filled-default\) {
1822
+ .checked\:bg-\(--color-bg-filled-danger\) {
1796
1823
  &:checked {
1797
- background-color: var(--color-bg-filled-default);
1824
+ background-color: var(--color-bg-filled-danger);
1798
1825
  }
1799
1826
  }
1800
1827
  .checked\:bg-\(--color-bg-filled-info\) {
@@ -1886,17 +1913,17 @@
1886
1913
  }
1887
1914
  }
1888
1915
  }
1889
- .hover\:bg-\(--color-bg-filled-hover-danger\) {
1916
+ .hover\:bg-\(--color-bg-filled-hover-brand\) {
1890
1917
  &:hover {
1891
1918
  @media (hover: hover) {
1892
- background-color: var(--color-bg-filled-hover-danger);
1919
+ background-color: var(--color-bg-filled-hover-brand);
1893
1920
  }
1894
1921
  }
1895
1922
  }
1896
- .hover\:bg-\(--color-bg-filled-hover-default\) {
1923
+ .hover\:bg-\(--color-bg-filled-hover-danger\) {
1897
1924
  &:hover {
1898
1925
  @media (hover: hover) {
1899
- background-color: var(--color-bg-filled-hover-default);
1926
+ background-color: var(--color-bg-filled-hover-danger);
1900
1927
  }
1901
1928
  }
1902
1929
  }
@@ -1949,17 +1976,17 @@
1949
1976
  }
1950
1977
  }
1951
1978
  }
1952
- .hover\:bg-\(--color-bg-hover-danger\) {
1979
+ .hover\:bg-\(--color-bg-hover-brand\) {
1953
1980
  &:hover {
1954
1981
  @media (hover: hover) {
1955
- background-color: var(--color-bg-hover-danger);
1982
+ background-color: var(--color-bg-hover-brand);
1956
1983
  }
1957
1984
  }
1958
1985
  }
1959
- .hover\:bg-\(--color-bg-hover-default\) {
1986
+ .hover\:bg-\(--color-bg-hover-danger\) {
1960
1987
  &:hover {
1961
1988
  @media (hover: hover) {
1962
- background-color: var(--color-bg-hover-default);
1989
+ background-color: var(--color-bg-hover-danger);
1963
1990
  }
1964
1991
  }
1965
1992
  }
@@ -2125,14 +2152,14 @@
2125
2152
  outline-color: var(--color-border-accent);
2126
2153
  }
2127
2154
  }
2128
- .focus-visible\:outline-\(--color-border-danger\) {
2155
+ .focus-visible\:outline-\(--color-border-brand\) {
2129
2156
  &:focus-visible {
2130
- outline-color: var(--color-border-danger);
2157
+ outline-color: var(--color-border-brand);
2131
2158
  }
2132
2159
  }
2133
- .focus-visible\:outline-\(--color-border-default\) {
2160
+ .focus-visible\:outline-\(--color-border-danger\) {
2134
2161
  &:focus-visible {
2135
- outline-color: var(--color-border-default);
2162
+ outline-color: var(--color-border-danger);
2136
2163
  }
2137
2164
  }
2138
2165
  .focus-visible\:outline-\(--color-border-filled-accent\) {
@@ -2140,14 +2167,14 @@
2140
2167
  outline-color: var(--color-border-filled-accent);
2141
2168
  }
2142
2169
  }
2143
- .focus-visible\:outline-\(--color-border-filled-danger\) {
2170
+ .focus-visible\:outline-\(--color-border-filled-brand\) {
2144
2171
  &:focus-visible {
2145
- outline-color: var(--color-border-filled-danger);
2172
+ outline-color: var(--color-border-filled-brand);
2146
2173
  }
2147
2174
  }
2148
- .focus-visible\:outline-\(--color-border-filled-default\) {
2175
+ .focus-visible\:outline-\(--color-border-filled-danger\) {
2149
2176
  &:focus-visible {
2150
- outline-color: var(--color-border-filled-default);
2177
+ outline-color: var(--color-border-filled-danger);
2151
2178
  }
2152
2179
  }
2153
2180
  .focus-visible\:outline-\(--color-border-filled-info\) {
@@ -2225,14 +2252,14 @@
2225
2252
  background-color: var(--color-bg-active-accent);
2226
2253
  }
2227
2254
  }
2228
- .active\:bg-\(--color-bg-active-danger\) {
2255
+ .active\:bg-\(--color-bg-active-brand\) {
2229
2256
  &:active {
2230
- background-color: var(--color-bg-active-danger);
2257
+ background-color: var(--color-bg-active-brand);
2231
2258
  }
2232
2259
  }
2233
- .active\:bg-\(--color-bg-active-default\) {
2260
+ .active\:bg-\(--color-bg-active-danger\) {
2234
2261
  &:active {
2235
- background-color: var(--color-bg-active-default);
2262
+ background-color: var(--color-bg-active-danger);
2236
2263
  }
2237
2264
  }
2238
2265
  .active\:bg-\(--color-bg-active-info\) {
@@ -2270,14 +2297,14 @@
2270
2297
  background-color: var(--color-bg-filled-active-accent);
2271
2298
  }
2272
2299
  }
2273
- .active\:bg-\(--color-bg-filled-active-danger\) {
2300
+ .active\:bg-\(--color-bg-filled-active-brand\) {
2274
2301
  &:active {
2275
- background-color: var(--color-bg-filled-active-danger);
2302
+ background-color: var(--color-bg-filled-active-brand);
2276
2303
  }
2277
2304
  }
2278
- .active\:bg-\(--color-bg-filled-active-default\) {
2305
+ .active\:bg-\(--color-bg-filled-active-danger\) {
2279
2306
  &:active {
2280
- background-color: var(--color-bg-filled-active-default);
2307
+ background-color: var(--color-bg-filled-active-danger);
2281
2308
  }
2282
2309
  }
2283
2310
  .active\:bg-\(--color-bg-filled-active-info\) {