yukit-web 0.0.29 → 0.1.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 (12) hide show
  1. package/.npm/_cacache/content-v2/sha512/{ef/18/bb18dafaa926b396d6f0abbdb7e605c613f0b8719ddc87234055ec0521254c44906e937faf752181e95da6cbde04d04fcf409eea3522e147de3bbfd35c2a → 18/b5/a119ec0bb8ef0ba5bc253c80a9abc2f385f5d58a10c2723ea6021cd2200f37dff8f097b60c9109e40870f68f106c3cbf085783377db49c41c33696cef968} +1 -1
  2. package/.npm/_cacache/index-v5/64/dc/73c7a26f2e6eb0c711133d96c247da5ecf0eba708cd37c450a7b3c7cb488 +1 -1
  3. package/.npm/_logs/{2026-09-30T12_38_14_404Z-debug-0.log → 2026-09-30T14_41_18_455Z-debug-0.log} +10 -10
  4. package/.npm/_logs/{2026-09-30T12_38_14_836Z-debug-0.log → 2026-09-30T14_41_18_921Z-debug-0.log} +2 -2
  5. package/README.md +15 -3
  6. package/fesm2022/yukit-web.mjs +62 -42
  7. package/fesm2022/yukit-web.mjs.map +1 -1
  8. package/package.json +1 -1
  9. package/src/lib/theme/tokens/color.css +477 -323
  10. package/src/lib/theme/tokens/component-colors.css +90 -97
  11. package/src/lib/theme/tokens/typography.css +11 -3
  12. package/types/yukit-web.d.ts +13 -9
package/src/lib/theme/tokens/color.css CHANGED
@@ -1,163 +1,277 @@
1
1
  :root {
2
2
  color-scheme: light;
3
3
 
4
- /** || Gradients || */
5
- --gradient-primary-button: linear-gradient(0deg, var(--accent-primary) 50%, var(--accent-primary-dark) 100%);
6
- --gradient-primary-button-hover: linear-gradient(
7
- 0deg,
8
- var(--accent-primary-dark) 50%,
9
- var(--accent-primary-darker) 100%
10
- );
11
- --neutrals-element-high-gradient: linear-gradient(
12
- to bottom,
13
- var(--neutrals-element-high-gradient-start) 50%,
14
- var(--neutrals-element-high) 100%
15
- );
16
- --neutrals-element-high-gradient-hover: linear-gradient(
17
- to bottom,
18
- var(--neutrals-element-high-gradient-start-hover) 50%,
19
- var(--neutrals-black) 100%
20
- );
21
-
22
- /** || accent || */
23
- --accent-primary-darker-ext: oklch(0.27 0.145 281.565);
24
- /* #220C69 */
25
- --accent-primary-darker-2: oklch(0.363 0.189 284.595);
26
- /* #3C189A */
27
- --accent-primary-darker: oklch(0.56 0.184 24.752);
28
- /* #CA3739 */
29
- --accent-primary-dark: oklch(63.79% 0.2094 24.6);
30
- /* #F14346 */
31
- --accent-primary: oklch(0.679 0.195 23.187);
32
- /* #F95A5C */
33
- --accent-primary-light: oklch(0.721 0.174 21.609);
34
- /* #FF7173 */
35
- --accent-primary-lighter: oklch(0.815 0.101 18.717);
36
- /* #FDA8A9 */
37
- --accent-primary-lighter-2: oklch(0.958 0.021 17.519);
38
- /* #FFECEC */
39
- --accent-primary-lighter-ext: oklch(0.978 0.011 17.34);
40
- /* #FFF5F5 */
4
+ /** || primary || */
5
+ --primary-1: #fff4f3;
6
+ --primary-2: #ffe2df;
7
+ --primary-3: #ffc1bc;
8
+ --primary-4: #ff928d;
9
+ --primary-5: #f95a5c;
10
+ --primary-6: #d53c41;
11
+ --primary-7: #ac2b31;
12
+ --primary-8: #831e23;
13
+ --primary-9: #5c1216;
14
+ --primary-text-strong: var(--primary-9);
15
+ --primary-text: var(--primary-8);
16
+ --primary-fill-pressed: var(--primary-7);
17
+ --primary-fill-hover: var(--primary-6);
18
+ --primary-fill-cta: var(--primary-5);
19
+ --primary-border: var(--primary-5);
20
+ --primary-border-light: var(--primary-3);
21
+ --primary-subtle-hover: var(--primary-2);
22
+ --primary-subtle: var(--primary-1);
23
+ --primary-on-fill: var(--neutrals-on-fill);
24
+
25
+ /** || secondary || */
26
+ --secondary-1: #f5f6fe;
27
+ --secondary-2: #e4e9fb;
28
+ --secondary-3: #cad1f1;
29
+ --secondary-4: #aab3de;
30
+ --secondary-5: #8b95c5;
31
+ --secondary-6: #6f78a9;
32
+ --secondary-7: #4f5783;
33
+ --secondary-8: #30375e;
34
+ --secondary-9: #161a3d;
35
+ --secondary-text-strong: var(--secondary-9);
36
+ --secondary-text: var(--secondary-8);
37
+ --secondary-fill-pressed: var(--secondary-9);
38
+ --secondary-fill: var(--secondary-8);
39
+ --secondary-fill-hover: var(--secondary-7);
40
+ --secondary-border: var(--secondary-6);
41
+ --secondary-border-light: var(--secondary-3);
42
+ --secondary-subtle-hover: var(--secondary-2);
43
+ --secondary-subtle: var(--secondary-1);
44
+ --secondary-on-fill: var(--neutrals-on-fill);
41
45
 
42
46
  /** || neutrals || */
43
- --neutrals-element-high: oklch(0.239 0 0);
44
- /* #1F1F1F */
45
- --neutrals-element-high-gradient-start: oklch(32.11% 0 89.9);
46
- /* #1F1F1F */
47
- --neutrals-element-high-gradient-start-hover: oklch(21.342% 0.00002 271.152);
48
- /* #191919 */
49
- --neutrals-element-mid: oklch(0.51 0 0);
50
- /* #666666 */
51
- --neutrals-element-low: oklch(0.65 0 0);
52
- /* #8F8F8F */
53
- --neutrals-element-disabled: oklch(0.783 0 0);
54
- /* #B8B8B8 */
55
- --neutrals-outline-accent: oklch(0.891 0 0);
56
- /* #DBDBDB */
57
- --neutrals-outline: oklch(0.94 0 0);
58
- /* #EBEBEB */
59
- --neutrals-overlay-accent: oklch(0.955 0 0);
60
- /* #F0F0F0 */
61
- --neutrals-overlay: oklch(0.97 0 0);
62
- /* #F5F5F5 */
63
- --neutrals-surface-accent: oklch(0.985 0 0);
64
- /* #FAFAFA */
65
- --neutrals-surface: oklch(1 0 0);
66
- /* #FFFFFF */
67
- --neutrals-background-accent: oklch(0.961 0 0);
68
- /* #F2F2F2 */
69
- --neutrals-background: oklch(0.985 0 0);
70
- /* #FAFAFA */
71
- --neutrals-black-opacity-high: oklch(0.239 0 0 / 0.8);
72
- /* rgba(31,31,31,0.8) */
73
- --neutrals-black-opacity-mid: oklch(0.239 0 0 / 0.4);
74
- /* rgba(31,31,31,0.4) */
75
- --neutrals-black-opacity-low: oklch(0.239 0 0 / 0.16);
76
- /* rgba(31,31,31,0.16) */
77
- --neutrals-white: oklch(1 0 0);
78
- /* #FFFFFF */
79
- --neutrals-black: oklch(0.239 0 0);
80
- /* #1F1F1F */
81
- --neutrals-white-opacity-high: oklch(1 0 0 / 0.8);
82
- /* rgba(255,255,255,0.8) */
83
- --neutrals-white-opacity-mid: oklch(1 0 0 / 0.4);
84
- /* rgba(255,255,255,0.4) */
85
- --neutrals-white-opacity-low: oklch(1 0 0 / 0.16);
86
- /* rgba(255,255,255,0.16) */
87
-
88
- /** || feedback || */
89
- --feedback-success-darker-ext: oklch(0.262 0.049 172.552);
90
- /* #022C22 */
91
- --feedback-success-dark: oklch(0.571 0.129 159.74);
92
- /* #028E5C */
93
- --feedback-success: oklch(0.696 0.149 162.48);
94
- /* #10B981 */
95
- --feedback-success-light: oklch(0.773 0.153 163.223);
96
- /* #34D399 */
97
- --feedback-success-lighter-2: oklch(0.978 0.025 152.894);
98
- /* #ECFDF0 */
99
- --feedback-success-lighter-ext: oklch(0.978 0.025 152.894);
100
- /* #ECFDF0 */
101
- --feedback-error-darker-ext: oklch(0.259 0.091 24.823);
102
- /* #46090B */
103
- --feedback-error-dark: oklch(0.446 0.164 25.919);
104
- /* #9B191D */
105
- --feedback-error: oklch(0.528 0.201 26.757);
106
- /* #C51B20 */
107
- --feedback-error-light: oklch(0.711 0.17 20.711);
108
- /* #FA6F73 */
109
- --feedback-error-lighter-2: oklch(0.972 0.012 23.703);
110
- /* #FEF3F2 */
111
- --feedback-error-lighter-ext: oklch(0.972 0.012 23.703);
112
- /* #FEF3F2 */
113
- --feedback-warning-darker-ext: oklch(0.279 0.074 45.635);
114
- /* #451A03 */
115
- --feedback-warning-dark: oklch(0.666 0.157 58.318);
116
- /* #D97706 */
117
- --feedback-warning: oklch(0.769 0.165 70.08);
118
- /* #F59E0B */
119
- --feedback-warning-light: oklch(0.839 0.165 84.957);
120
- /* #FBC024 */
121
- --feedback-warning-lighter-2: oklch(0.987 0.021 95.277);
122
- /* #FFFBEB */
123
- --feedback-warning-lighter-ext: oklch(0.987 0.021 95.277);
124
- /* #FFFBEB */
125
- --feedback-info-darker-ext: oklch(0.282 0.087 267.935);
126
- /* #172554 */
127
- --feedback-info-dark: oklch(0.546 0.215 262.881);
128
- /* #2563EB */
129
- --feedback-info: oklch(0.623 0.188 259.815);
130
- /* #3B82F6 */
131
- --feedback-info-light: oklch(0.714 0.143 254.624);
132
- /* #60A5FA */
133
- --feedback-info-lighter-2: oklch(0.97 0.014 254.604);
134
- /* #EFF6FF */
135
- --feedback-info-lighter-ext: oklch(0.97 0.014 254.604);
136
- /* #EFF6FF */
137
- --feedback-additional-darker-ext: oklch(0.276 0.126 286.035);
138
- /* #271461 */
139
- --feedback-additional-dark: oklch(0.475 0.226 286.967);
140
- /* #5D30D1 */
141
- --feedback-additional: oklch(0.6 0.201 287.963);
142
- /* #7F63EF */
143
- --feedback-additional-light: oklch(0.812 0.092 289.02);
144
- /* #BFB8FA */
145
- --feedback-additional-lighter-2: oklch(0.971 0.013 290.754);
146
- /* #F5F4FE */
147
- --feedback-additional-lighter-ext: oklch(0.971 0.013 290.754);
148
- /* #F5F4FE */
149
-
150
- /** || communications || */
151
- --comm-chat: oklch(0.659 0.17 287.387);
152
- /* #8E7DF3 */
153
- --comm-fault: oklch(0.732 0.167 51.879);
154
- /* #F88532 */
155
- --comm-notice: oklch(0.644 0.188 262.101);
156
- /* #4A87FE */
157
- --comm-list: oklch(0.846 0.148 80.685);
158
- /* #FEC14A */
159
-
160
- /** || Page and text || */
47
+ --neutrals-white: #fdfdfd;
48
+ --gray-1: #f7f7f8;
49
+ --gray-2: #f1f2f4;
50
+ --gray-3: #ecedef;
51
+ --gray-4: #e4e6e9;
52
+ --gray-5: #d8dce0;
53
+ --gray-6: #c5c9d0;
54
+ --gray-7: #a0a5b1;
55
+ --gray-8: #7e8695;
56
+ --gray-9: #636a79;
57
+ --gray-10: #494f5a;
58
+ --gray-11: #32363e;
59
+ --gray-12: #1c1e22;
60
+
61
+ --neutrals-dark: #101114;
62
+ --neutrals-on-fill: #ffffff;
63
+ --neutrals-background-accent: var(--neutrals-white);
64
+ --neutrals-background: var(--gray-1);
65
+ --neutrals-surface: var(--neutrals-white);
66
+ --neutrals-surface-accent: var(--gray-1);
67
+ --neutrals-overlay: var(--gray-2);
68
+ --neutrals-overlay-accent: var(--gray-3);
69
+ --neutrals-element-high: var(--gray-12);
70
+ --neutrals-element-mid: var(--gray-9);
71
+ --neutrals-element-low: var(--gray-8);
72
+ --neutrals-element-disabled: var(--gray-6);
73
+ --neutrals-outline: var(--gray-4);
74
+ --neutrals-outline-accent: var(--gray-6);
75
+ --neutrals-outline-input: var(--gray-7);
76
+ --neutrals-outline-input-hover: var(--gray-8);
77
+ --neutrals-fill: var(--gray-3);
78
+ --neutrals-fill-hover: var(--gray-4);
79
+ --neutrals-fill-active: var(--gray-5);
80
+ --neutrals-black-4: rgb(16 17 20 / 0.04);
81
+ --neutrals-black-8: rgb(16 17 20 / 0.08);
82
+ --neutrals-black-12: rgb(16 17 20 / 0.12);
83
+ --neutrals-black-24: rgb(16 17 20 / 0.24);
84
+ --neutrals-black-48: rgb(16 17 20 / 0.48);
85
+ --neutrals-white-4: rgb(255 255 255 / 0.04);
86
+ --neutrals-white-8: rgb(255 255 255 / 0.08);
87
+ --neutrals-white-12: rgb(255 255 255 / 0.12);
88
+ --neutrals-white-24: rgb(255 255 255 / 0.24);
89
+ --neutrals-white-48: rgb(255 255 255 / 0.48);
90
+
91
+ /** || error || */
92
+ --error-subtle: var(--red-1);
93
+ --error-subtle-hover: var(--red-2);
94
+ --error-border-light: var(--red-3);
95
+ --error-border: var(--red-4);
96
+ --error-icon: var(--red-4);
97
+ --error-fill: var(--red-4);
98
+ --error-fill-hover: var(--red-5);
99
+ --error-text: var(--red-5);
100
+ --error-text-strong: var(--red-6);
101
+ --error-on-fill: var(--neutrals-on-fill);
102
+
103
+ /** || warning || */
104
+ --warning-subtle: var(--yellow-1);
105
+ --warning-subtle-hover: var(--yellow-2);
106
+ --warning-border-light: var(--yellow-3);
107
+ --warning-border: var(--yellow-5);
108
+ --warning-icon: var(--yellow-5);
109
+ --warning-fill: var(--yellow-4);
110
+ --warning-fill-hover: var(--yellow-3);
111
+ --warning-text: var(--yellow-6);
112
+ --warning-text-strong: var(--yellow-7);
113
+ --warning-on-fill: var(--neutrals-dark);
114
+
115
+ /** || success || */
116
+ --success-subtle: var(--green-1);
117
+ --success-subtle-hover: var(--green-2);
118
+ --success-border-light: var(--green-3);
119
+ --success-border: var(--green-4);
120
+ --success-icon: var(--green-4);
121
+ --success-fill: var(--green-4);
122
+ --success-fill-hover: var(--green-5);
123
+ --success-text: var(--green-5);
124
+ --success-text-strong: var(--green-6);
125
+ --success-on-fill: var(--neutrals-on-fill);
126
+
127
+ /** || info || */
128
+ --info-subtle: var(--blue-1);
129
+ --info-subtle-hover: var(--blue-2);
130
+ --info-border-light: var(--blue-3);
131
+ --info-border: var(--blue-4);
132
+ --info-icon: var(--blue-4);
133
+ --info-fill: var(--blue-4);
134
+ --info-fill-hover: var(--blue-5);
135
+ --info-text: var(--blue-5);
136
+ --info-text-strong: var(--blue-6);
137
+ --info-on-fill: var(--neutrals-on-fill);
138
+
139
+ /** || red || */
140
+ --red-1: #ffe9e5;
141
+ --red-2: #ffd1ca;
142
+ --red-3: #ffa296;
143
+ --red-4: #b91c1c;
144
+ --red-5: #941616;
145
+ --red-6: #71100f;
146
+ --red-7: #4f0b09;
147
+
148
+ /** || yellow || */
149
+ --yellow-1: #fff4e2;
150
+ --yellow-2: #ffe4b9;
151
+ --yellow-3: #ffc97c;
152
+ --yellow-4: #f59e0b;
153
+ --yellow-5: #c26e12;
154
+ --yellow-6: #964d09;
155
+ --yellow-7: #67320a;
156
+
157
+ /** || green || */
158
+ --green-1: #e2f9e6;
159
+ --green-2: #c3f1ca;
160
+ --green-3: #83dc96;
161
+ --green-4: #008628;
162
+ --green-5: #006924;
163
+ --green-6: #004f1c;
164
+ --green-7: #013613;
165
+
166
+ /** || blue || */
167
+ --blue-1: #e9f5ff;
168
+ --blue-2: #cce9ff;
169
+ --blue-3: #91cbfb;
170
+ --blue-4: #0072b2;
171
+ --blue-5: #005d95;
172
+ --blue-6: #004673;
173
+ --blue-7: #003150;
174
+
175
+ /** || orange || */
176
+ --orange-1: #ffeee7;
177
+ --orange-2: #ffd9c9;
178
+ --orange-3: #ffaf8f;
179
+ --orange-4: #ea580c;
180
+ --orange-5: #a52e00;
181
+ --orange-6: #7e2100;
182
+ --orange-7: #5a1500;
183
+ --orange-on-fill: var(--neutrals-dark);
184
+
185
+ /** || pink || */
186
+ --pink-1: #ffedf2;
187
+ --pink-2: #ffd6e3;
188
+ --pink-3: #ffa9c3;
189
+ --pink-4: #db2777;
190
+ --pink-5: #a81158;
191
+ --pink-6: #810a42;
192
+ --pink-7: #5c052d;
193
+ --pink-on-fill: var(--neutrals-on-fill);
194
+
195
+ /** || teal || */
196
+ --teal-1: #e2f9f5;
197
+ --teal-2: #bcf1e9;
198
+ --teal-3: #67dfd0;
199
+ --teal-4: #15978b;
200
+ --teal-5: #006d64;
201
+ --teal-6: #00534b;
202
+ --teal-7: #003934;
203
+ --teal-on-fill: var(--neutrals-dark);
204
+
205
+ /** || violet || */
206
+ --violet-1: #f3f1ff;
207
+ --violet-2: #e5dfff;
208
+ --violet-3: #c9baff;
209
+ --violet-4: #8555ef;
210
+ --violet-5: #653dbb;
211
+ --violet-6: #4c2d8f;
212
+ --violet-7: #351d66;
213
+ --violet-on-fill: var(--neutrals-on-fill);
214
+
215
+ /** || allergen || */
216
+ --allergen-gluten: #c08052;
217
+ --allergen-crustaceos: #4895cd;
218
+ --allergen-huevos: #be8236;
219
+ --allergen-pescado: #3e478b;
220
+ --allergen-cacahuetes: #af8667;
221
+ --allergen-soja: #529e60;
222
+ --allergen-lacteos: #76573f;
223
+ --allergen-frutos-de-cascara: #b57366;
224
+ --allergen-apio: #729b31;
225
+ --allergen-mostaza: #a28d51;
226
+ --allergen-sesamo: #978e7c;
227
+ --allergen-sulfitos: #7a3558;
228
+ --allergen-moluscos: #5498ab;
229
+ --allergen-altramuces: #a18f28;
230
+
231
+ /** || violet || */
232
+ --violet-fill: var(--violet-4);
233
+ --violet-fill-hover: var(--violet-5);
234
+ --violet-subtle: var(--violet-1);
235
+ --violet-subtle-hover: var(--violet-2);
236
+ --violet-border: var(--violet-4);
237
+ --violet-border-light: var(--violet-3);
238
+ --violet-text: var(--violet-5);
239
+ --violet-text-strong: var(--violet-6);
240
+
241
+ /** || orange || */
242
+ --orange-fill: var(--orange-4);
243
+ --orange-fill-hover: var(--orange-5);
244
+ --orange-subtle: var(--orange-1);
245
+ --orange-subtle-hover: var(--orange-2);
246
+ --orange-border: var(--orange-4);
247
+ --orange-border-light: var(--orange-3);
248
+ --orange-text: var(--orange-5);
249
+ --orange-text-strong: var(--orange-6);
250
+
251
+ /** || pink || */
252
+ --pink-fill: var(--pink-4);
253
+ --pink-fill-hover: var(--pink-5);
254
+ --pink-subtle: var(--pink-1);
255
+ --pink-subtle-hover: var(--pink-2);
256
+ --pink-border: var(--pink-4);
257
+ --pink-border-light: var(--pink-3);
258
+ --pink-text: var(--pink-5);
259
+ --pink-text-strong: var(--pink-6);
260
+
261
+ /** || teal || */
262
+ --teal-fill: var(--teal-4);
263
+ --teal-fill-hover: var(--teal-5);
264
+ --teal-subtle: var(--teal-1);
265
+ --teal-subtle-hover: var(--teal-2);
266
+ --teal-border: var(--teal-4);
267
+ --teal-border-light: var(--teal-3);
268
+ --teal-text: var(--teal-5);
269
+ --teal-text-strong: var(--teal-6);
270
+
271
+ /** || Legacy alias || */
272
+ --neutrals-black: var(--neutrals-dark);
273
+
274
+ /** || Page and text || */
161
275
  --background: var(--neutrals-background);
162
276
  --foreground: var(--neutrals-element-high);
163
277
 
@@ -168,196 +282,236 @@
168
282
  --popover-foreground: var(--neutrals-element-high);
169
283
 
170
284
  /** || Brand || */
171
- --primary: var(--accent-primary);
172
- --primary-foreground: var(--neutrals-white);
285
+ --primary: var(--primary-fill-cta);
286
+ --primary-foreground: var(--primary-on-fill);
287
+ --secondary: var(--secondary-subtle-hover);
288
+ --secondary-foreground: var(--secondary-text);
173
289
 
174
- /** || Neutral fills */
175
- --secondary: var(--accent-primary-lighter);
176
- --secondary-foreground: var(--neutrals-element-high);
290
+ /** || Neutral fills || */
177
291
  --muted: var(--neutrals-overlay);
178
292
  --muted-foreground: var(--neutrals-element-mid);
179
293
  --accent: var(--neutrals-overlay-accent);
180
294
  --accent-foreground: var(--neutrals-element-high);
181
- --destructive: var(--feedback-error);
182
- --destructive-foreground: var(--neutrals-white);
295
+ --destructive: var(--error-fill);
296
+ --destructive-foreground: var(--error-on-fill);
183
297
 
184
298
  /** || Lines and focus || */
185
299
  --border: var(--neutrals-outline);
186
- --input: var(--neutrals-outline-accent);
300
+ --input: var(--neutrals-outline-input);
187
301
  --ring: var(--neutrals-element-low);
188
302
 
189
- /** || Sidebar || */
303
+ /** || Sidebar || */
190
304
  --sidebar: var(--neutrals-surface);
191
305
  --sidebar-foreground: var(--neutrals-element-high);
192
- --sidebar-primary: var(--accent-primary);
193
- --sidebar-primary-foreground: var(--neutrals-white);
194
- --sidebar-accent: var(--accent-primary-lighter-2);
195
- --sidebar-accent-foreground: var(--accent-primary);
306
+ --sidebar-primary: var(--primary-fill-cta);
307
+ --sidebar-primary-foreground: var(--primary-on-fill);
308
+ --sidebar-accent: var(--primary-subtle-hover);
309
+ --sidebar-accent-foreground: var(--primary-text);
196
310
  --sidebar-border: var(--neutrals-outline);
197
- --sidebar-ring: var(--accent-primary);
311
+ --sidebar-ring: var(--primary-fill-cta);
198
312
 
199
- --success: var(--feedback-success);
200
- --success-foreground: var(--neutrals-white);
201
- --warning: var(--feedback-warning);
202
- --warning-foreground: var(--neutrals-white);
203
- --info: var(--feedback-info);
204
- --info-foreground: var(--neutrals-white);
313
+ /** || Feedback || */
314
+ --success: var(--success-fill);
315
+ --success-foreground: var(--success-on-fill);
316
+ --warning: var(--warning-fill);
317
+ --warning-foreground: var(--warning-on-fill);
318
+ --info: var(--info-fill);
319
+ --info-foreground: var(--info-on-fill);
205
320
 
206
- --additional: var(--feedback-additional);
207
- --additional-foreground: var(--neutrals-white);
321
+ --additional: var(--violet-fill);
322
+ --additional-foreground: var(--violet-on-fill);
208
323
 
209
- --black: var(--neutrals-black);
210
- --black-foreground: var(--neutrals-white);
324
+ --black: var(--neutrals-dark);
325
+ --black-foreground: var(--neutrals-on-fill);
211
326
  }
212
327
 
213
328
  .dark {
214
329
  color-scheme: dark;
215
- --neutrals-element-high-gradient-hover: linear-gradient(
216
- to bottom,
217
- var(--neutrals-element-high-gradient-start-hover) 50%,
218
- var(--neutrals-white) 100%
219
- );
220
-
221
- /** || Sidebar || */
222
- --sidebar-accent: #3a1f22;
223
- --sidebar-accent-foreground: #ff7a7c;
224
-
225
- /** || Accent || */
226
- --accent-primary-darker-ext: oklch(0.27 0.145 281.565);
227
- /* #220C69 */
228
- --accent-primary-darker-2: oklch(0.363 0.189 284.595);
229
- /* #3C189A */
230
- --accent-primary-darker: oklch(0.668 0.209 24.258);
231
- /* #FB4E50 */
232
- --accent-primary-dark: oklch(0.668 0.209 24.258);
233
- /* #FB4E50 */
234
- --accent-primary: oklch(0.679 0.195 23.187);
235
- /* #F95A5C */
236
- --accent-primary-light: oklch(0.721 0.174 21.609);
237
- /* #FF7173 */
238
- --accent-primary-lighter: oklch(0.815 0.101 18.717);
239
- /* #FDA8A9 */
240
- --accent-primary-lighter-2: oklch(0.679 0.195 23.187 / 0.4);
241
- /* rgba(249,90,92,0.4) */
242
- --accent-primary-lighter-ext: oklch(0.679 0.195 23.187 / 0.16);
243
- /* rgba(249,90,92,0.16) */
330
+
331
+ --primary-on-fill: var(--neutrals-dark);
332
+
333
+ /** || primary || */
334
+ --primary-1: #382221;
335
+ --primary-2: #502826;
336
+ --primary-3: #7a3332;
337
+ --primary-4: #de4548;
338
+ --primary-6: #ff7e7a;
339
+ --primary-7: #ffaba5;
340
+ --primary-8: #fed2ce;
341
+ --primary-9: #ffedeb;
342
+ --primary-border: var(--primary-4);
343
+
344
+ /** || secondary || */
345
+ --secondary-1: #161a3d;
346
+ --secondary-2: #2f334d;
347
+ --secondary-3: #444a6e;
348
+ --secondary-4: #757fb3;
349
+ --secondary-5: #8994ca;
350
+ --secondary-6: #9da8db;
351
+ --secondary-7: #b8c2ec;
352
+ --secondary-8: #d7ddf6;
353
+ --secondary-9: #eff1fc;
354
+ --secondary-fill-pressed: var(--secondary-7);
355
+ --secondary-fill: var(--secondary-5);
356
+ --secondary-fill-hover: var(--secondary-6);
357
+ --secondary-border: var(--secondary-4);
358
+ --secondary-on-fill: var(--neutrals-dark);
359
+ --gray-1: #101114;
360
+ --gray-2: #1c1e22;
361
+ --gray-3: #25272d;
362
+ --gray-4: #30343b;
363
+ --gray-5: #3c4049;
364
+ --gray-6: #474c57;
365
+ --gray-7: #535965;
366
+ --gray-8: #5e6573;
367
+ --gray-9: #767d8b;
368
+ --gray-10: #8f96a3;
369
+ --gray-11: #a9afb9;
370
+ --gray-12: #c4c8cf;
244
371
 
245
372
  /** || neutrals || */
246
- --neutrals-element-high: oklch(96% 0 0);
247
- --neutrals-element-high-gradient-start: oklch(91.8% 0 89.9);
248
- /* #1F1F1F */
249
- --neutrals-element-high-gradient-start-hover: oklch(85.3% 0 89.9);
250
- /* #FFFFFF */
251
- --neutrals-element-mid: oklch(0.845 0 0);
252
- /* #CCCCCC */
253
- --neutrals-element-low: oklch(0.748 0 0);
254
- /* #ADADAD */
255
- --neutrals-element-disabled: oklch(0.58 0 0);
256
- /* #7A7A7A */
257
- --neutrals-outline-accent: oklch(0.475 0 0);
258
- /* #5C5C5C */
259
- --neutrals-outline: oklch(0.36 0 0);
260
- /* #3D3D3D */
261
- --neutrals-overlay-accent: oklch(0.42 0 0);
262
- /* #4D4D4D */
263
- --neutrals-overlay: oklch(0.301 0 0);
264
- /* #2E2E2E */
265
- --neutrals-surface-accent: oklch(0.239 0 0);
266
- /* #1F1F1F */
267
- --neutrals-surface: oklch(0.191 0 0);
268
- /* #141414 */
269
- --neutrals-background-accent: oklch(0.191 0 0);
270
- /* #141414 */
271
- --neutrals-background: oklch(0.115 0 0);
272
- /* #050505 */
273
- --neutrals-black-opacity-high: oklch(0.239 0 0 / 0.8);
274
- /* rgba(31,31,31,0.8) */
275
- --neutrals-black-opacity-mid: oklch(0.239 0 0 / 0.4);
276
- /* rgba(31,31,31,0.4) */
277
- --neutrals-black-opacity-low: oklch(0.239 0 0 / 0.16);
278
- /* rgba(31,31,31,0.16) */
279
- --neutrals-white: oklch(1 0 0);
280
- /* #FFFFFF */
281
- --neutrals-black: oklch(0.239 0 0);
282
- /* #1F1F1F */
283
- --neutrals-white-opacity-high: oklch(1 0 0 / 0.8);
284
- /* rgba(255,255,255,0.8) */
285
- --neutrals-white-opacity-mid: oklch(1 0 0 / 0.4);
286
- /* rgba(255,255,255,0.4) */
287
- --neutrals-white-opacity-low: oklch(1 0 0 / 0.16);
288
- /* rgba(255,255,255,0.16) */
289
-
290
- /** || feedback || */
291
- --feedback-success-darker-ext: oklch(0.262 0.049 172.552);
292
- /* #022C22 */
293
- --feedback-success-dark: oklch(0.596 0.127 163.225);
294
- /* #059669 */
295
- --feedback-success: oklch(0.696 0.149 162.48);
296
- /* #10B981 */
297
- --feedback-success-light: oklch(0.773 0.153 163.223);
298
- /* #34D399 */
299
- --feedback-success-lighter-2: oklch(0.696 0.149 162.48 / 0.32);
300
- /* rgba(16,185,129,0.32) */
301
- --feedback-success-lighter-ext: oklch(0.696 0.149 162.48 / 0.16);
302
- /* rgba(16,185,129,0.16) */
303
- --feedback-error-darker-ext: oklch(0.259 0.091 24.823);
304
- /* #46090B */
305
- --feedback-error-dark: oklch(0.446 0.164 25.919);
306
- /* #9B191D */
307
- --feedback-error: oklch(0.528 0.201 26.757);
308
- /* #C51B20 */
309
- --feedback-error-light: oklch(0.711 0.17 20.711);
310
- /* #FA6F73 */
311
- --feedback-error-lighter-2: oklch(0.528 0.201 26.757 / 0.32);
312
- /* rgba(197,27,32,0.32) */
313
- --feedback-error-lighter-ext: oklch(0.528 0.201 26.757 / 0.16);
314
- /* rgba(197,27,32,0.16) */
315
- --feedback-warning-darker-ext: oklch(0.279 0.074 45.635);
316
- /* #451A03 */
317
- --feedback-warning-dark: oklch(0.666 0.157 58.318);
318
- /* #D97706 */
319
- --feedback-warning: oklch(0.769 0.165 70.08);
320
- /* #F59E0B */
321
- --feedback-warning-light: oklch(0.839 0.165 84.957);
322
- /* #FBC024 */
323
- --feedback-warning-lighter-2: oklch(0.769 0.165 70.08 / 0.32);
324
- /* rgba(245,158,11,0.32) */
325
- --feedback-warning-lighter-ext: oklch(0.769 0.165 70.08 / 0.16);
326
- /* rgba(245,158,11,0.16) */
327
- --feedback-info-darker-ext: oklch(0.282 0.087 267.935);
328
- /* #172554 */
329
- --feedback-info-dark: oklch(0.546 0.215 262.881);
330
- /* #2563EB */
331
- --feedback-info: oklch(0.623 0.188 259.815);
332
- /* #3B82F6 */
333
- --feedback-info-light: oklch(0.714 0.143 254.624);
334
- /* #60A5FA */
335
- --feedback-info-lighter-2: oklch(0.623 0.188 259.815 / 0.32);
336
- /* rgba(59,130,246,0.32) */
337
- --feedback-info-lighter-ext: oklch(0.623 0.188 259.815 / 0.16);
338
- /* rgba(59,130,246,0.16) */
339
- --feedback-additional-darker-ext: oklch(0.276 0.126 286.035);
340
- /* #271461 */
341
- --feedback-additional-dark: oklch(0.475 0.226 286.967);
342
- /* #5D30D1 */
343
- --feedback-additional: oklch(0.6 0.201 287.963);
344
- /* #7F63EF */
345
- --feedback-additional-light: oklch(0.812 0.092 289.02);
346
- /* #BFB8FA */
347
- --feedback-additional-lighter-2: oklch(0.971 0.013 290.754 / 0.32);
348
- /* rgba(245,244,254,0.32) */
349
- --feedback-additional-lighter-ext: oklch(0.971 0.013 290.754 / 0.16);
350
- /* rgba(245,244,254,0.16) */
351
-
352
- /** || communications || */
353
- --comm-chat: oklch(0.659 0.17 287.387);
354
- /* #8E7DF3 */
355
- --comm-fault: oklch(0.732 0.167 51.879);
356
- /* #F88532 */
357
- --comm-notice: oklch(0.644 0.188 262.101);
358
- /* #4A87FE */
359
- --comm-list: oklch(0.846 0.148 80.685);
360
- /* #FEC14A */
373
+ --neutrals-background-accent: var(--gray-2);
374
+ --neutrals-surface: var(--gray-2);
375
+ --neutrals-surface-accent: var(--gray-3);
376
+ --neutrals-overlay: var(--gray-4);
377
+ --neutrals-overlay-accent: var(--gray-5);
378
+ --neutrals-element-mid: var(--gray-11);
379
+ --neutrals-element-low: var(--gray-9);
380
+ --neutrals-element-disabled: var(--gray-7);
381
+ --neutrals-outline: var(--gray-6);
382
+ --neutrals-outline-accent: var(--gray-8);
383
+ --neutrals-outline-input: var(--gray-9);
384
+ --neutrals-outline-input-hover: var(--gray-10);
385
+
386
+ /** || error || */
387
+ --error-subtle: var(--red-7);
388
+ --error-subtle-hover: var(--red-6);
389
+ --error-border-light: var(--red-5);
390
+ --error-border: var(--red-3);
391
+ --error-icon: var(--red-3);
392
+ --error-text: var(--red-2);
393
+ --error-text-strong: var(--red-1);
394
+
395
+ /** || warning || */
396
+ --warning-subtle: var(--yellow-7);
397
+ --warning-subtle-hover: var(--yellow-6);
398
+ --warning-border-light: var(--yellow-5);
399
+ --warning-border: var(--yellow-3);
400
+ --warning-icon: var(--yellow-3);
401
+ --warning-text: var(--yellow-2);
402
+ --warning-text-strong: var(--yellow-1);
403
+
404
+ /** || success || */
405
+ --success-subtle: var(--green-7);
406
+ --success-subtle-hover: var(--green-6);
407
+ --success-border-light: var(--green-5);
408
+ --success-border: var(--green-3);
409
+ --success-icon: var(--green-3);
410
+ --success-text: var(--green-2);
411
+ --success-text-strong: var(--green-1);
412
+
413
+ /** || info || */
414
+ --info-subtle: var(--blue-7);
415
+ --info-subtle-hover: var(--blue-6);
416
+ --info-border-light: var(--blue-5);
417
+ --info-border: var(--blue-3);
418
+ --info-icon: var(--blue-3);
419
+ --info-text: var(--blue-2);
420
+ --info-text-strong: var(--blue-1);
421
+
422
+ /** || red || */
423
+ --red-1: #fed7d1;
424
+ --red-2: #fdb1a7;
425
+ --red-3: #f87f72;
426
+ --red-5: #831a17;
427
+ --red-6: #4d2621;
428
+ --red-7: #38221f;
429
+
430
+ /** || yellow || */
431
+ --yellow-1: #ffe1b6;
432
+ --yellow-2: #ffc679;
433
+ --yellow-3: #ffb040;
434
+ --yellow-5: #7f4413;
435
+ --yellow-6: #492f1a;
436
+ --yellow-7: #34251a;
437
+
438
+ /** || green || */
439
+ --green-1: #c5f2cc;
440
+ --green-2: #8ae29c;
441
+ --green-3: #49c86d;
442
+ --green-5: #125628;
443
+ --green-6: #1f3a25;
444
+ --green-7: #1e2d21;
445
+
446
+ /** || blue || */
447
+ --blue-1: #cce9ff;
448
+ --blue-2: #98d2ff;
449
+ --blue-3: #5bb3f7;
450
+ --blue-5: #0f4c74;
451
+ --blue-6: #1e3548;
452
+ --blue-7: #1c2b37;
453
+
454
+ /** || orange || */
455
+ --orange-1: #ffdacb;
456
+ --orange-2: #ffb699;
457
+ --orange-3: #ff8758;
458
+ --orange-5: #792b07;
459
+ --orange-6: #482a1e;
460
+ --orange-7: #36241d;
461
+
462
+ /** || pink || */
463
+ --pink-1: #ffd7e3;
464
+ --pink-2: #ffb1c9;
465
+ --pink-3: #fd7ea9;
466
+ --pink-5: #7b1e44;
467
+ --pink-6: #482831;
468
+ --pink-7: #352328;
469
+
470
+ /** || teal || */
471
+ --teal-1: #c0f0e9;
472
+ --teal-2: #79e2d4;
473
+ --teal-3: #53c3b6;
474
+ --teal-5: #14524c;
475
+ --teal-6: #0c3b36;
476
+ --teal-7: #172e2b;
477
+
478
+ /** || violet || */
479
+ --violet-1: #e5dfff;
480
+ --violet-2: #cec0ff;
481
+ --violet-3: #b298ff;
482
+ --violet-5: #4c3587;
483
+ --violet-6: #342e4a;
484
+ --violet-7: #292637;
485
+ --violet-subtle: var(--violet-7);
486
+ --violet-subtle-hover: var(--violet-6);
487
+ --violet-border: var(--violet-3);
488
+ --violet-border-light: var(--violet-5);
489
+ --violet-text: var(--violet-2);
490
+ --violet-text-strong: var(--violet-1);
491
+
492
+ /** || orange || */
493
+ --orange-subtle: var(--orange-7);
494
+ --orange-subtle-hover: var(--orange-6);
495
+ --orange-border: var(--orange-3);
496
+ --orange-border-light: var(--orange-5);
497
+ --orange-text: var(--orange-2);
498
+ --orange-text-strong: var(--orange-1);
499
+
500
+ /** || pink || */
501
+ --pink-subtle: var(--pink-7);
502
+ --pink-subtle-hover: var(--pink-6);
503
+ --pink-border: var(--pink-3);
504
+ --pink-border-light: var(--pink-5);
505
+ --pink-text: var(--pink-2);
506
+ --pink-text-strong: var(--pink-1);
507
+
508
+ /** || teal || */
509
+ --teal-subtle: var(--teal-7);
510
+ --teal-subtle-hover: var(--teal-6);
511
+ --teal-border: var(--teal-3);
512
+ --teal-border-light: var(--teal-5);
513
+ --teal-text: var(--teal-2);
514
+ --teal-text-strong: var(--teal-1);
361
515
  }
362
516
 
363
517
  @theme inline {