@menumalsuite/design-system 0.1.8 → 0.1.10
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/app/assets/css/main.css +280 -11
- package/package.json +1 -1
package/app/assets/css/main.css
CHANGED
|
@@ -1,6 +1,14 @@
|
|
|
1
1
|
@import "tailwindcss";
|
|
2
2
|
@import "@nuxt/ui";
|
|
3
3
|
|
|
4
|
+
/* Manrope è un font variabile (asse opsz 200–800). Attivando l'optical sizing
|
|
5
|
+
sull'utility .font-sans (= var(--font-sans) = Manrope) si sblocca l'intera
|
|
6
|
+
scala di pesi, valori intermedi (es. 370) inclusi — scoped solo a Manrope,
|
|
7
|
+
non a tutto l'html. */
|
|
8
|
+
.font-sans {
|
|
9
|
+
font-optical-sizing: auto;
|
|
10
|
+
}
|
|
11
|
+
|
|
4
12
|
@theme static {
|
|
5
13
|
/* --- Fonts --- */
|
|
6
14
|
--font-mono: "JetBrains Mono", monospace;
|
|
@@ -11,13 +19,13 @@
|
|
|
11
19
|
STATUS COLORS (semantic overrides)
|
|
12
20
|
================================================ */
|
|
13
21
|
/* Error */
|
|
14
|
-
--color-error-50: #
|
|
15
|
-
--color-error-100: #
|
|
22
|
+
--color-error-50: #fcf8f8;
|
|
23
|
+
--color-error-100: #fcf8f8;
|
|
16
24
|
--color-error-200: #eda497;
|
|
17
25
|
--color-error-300: #d87464;
|
|
18
26
|
--color-error-400: #c44c3b;
|
|
19
27
|
--color-error-450: #b23f2e;
|
|
20
|
-
--color-error-500: #
|
|
28
|
+
--color-error-500: #a52418;
|
|
21
29
|
--color-error-600: #8e1409;
|
|
22
30
|
--color-error-700: #6f0c05;
|
|
23
31
|
--color-error-800: #510502;
|
|
@@ -25,8 +33,8 @@
|
|
|
25
33
|
--color-error-950: #1b0000;
|
|
26
34
|
|
|
27
35
|
/* Success */
|
|
28
|
-
--color-success-50: #
|
|
29
|
-
--color-success-100: #
|
|
36
|
+
--color-success-50: #fcfdfc;
|
|
37
|
+
--color-success-100: #ddeedf;
|
|
30
38
|
--color-success-200: #93ca99;
|
|
31
39
|
--color-success-300: #67a96c;
|
|
32
40
|
--color-success-400: #3b863e;
|
|
@@ -38,8 +46,8 @@
|
|
|
38
46
|
--color-success-950: #001a00;
|
|
39
47
|
|
|
40
48
|
/* Warning */
|
|
41
|
-
--color-warning-50: #
|
|
42
|
-
--color-warning-100: #
|
|
49
|
+
--color-warning-50: #fdf9ed;
|
|
50
|
+
--color-warning-100: #fdf9ed;
|
|
43
51
|
--color-warning-200: #decb90;
|
|
44
52
|
--color-warning-300: #c5ac63;
|
|
45
53
|
--color-warning-400: #977a20;
|
|
@@ -51,20 +59,20 @@
|
|
|
51
59
|
--color-warning-950: #110d00;
|
|
52
60
|
|
|
53
61
|
/* Info */
|
|
54
|
-
--color-info-50: #
|
|
62
|
+
--color-info-50: #eef4f6;
|
|
55
63
|
--color-info-100: #d7e5ea;
|
|
56
64
|
--color-info-200: #afc7cf;
|
|
57
65
|
--color-info-300: #658a97;
|
|
58
66
|
--color-info-400: #3b626d;
|
|
59
67
|
--color-info-500: #355762;
|
|
60
68
|
--color-info-600: #2b4650;
|
|
61
|
-
--color-info-700: #
|
|
69
|
+
--color-info-700: #1c3c4a;
|
|
62
70
|
--color-info-800: #1d2428;
|
|
63
71
|
--color-info-900: #131719;
|
|
64
72
|
--color-info-950: #090b0d;
|
|
65
73
|
|
|
66
74
|
/* Focus */
|
|
67
|
-
--color-focus-50: #
|
|
75
|
+
--color-focus-50: #edf9fd;
|
|
68
76
|
--color-focus-100: #c8ecf9;
|
|
69
77
|
--color-focus-200: #99d2e6;
|
|
70
78
|
--color-focus-300: #409bbb;
|
|
@@ -201,8 +209,10 @@
|
|
|
201
209
|
--color-cream-100: #f5f2ee;
|
|
202
210
|
--color-cream-150: #efebe6;
|
|
203
211
|
--color-cream-200: #e9e2dc;
|
|
204
|
-
--color-cream-300: #
|
|
212
|
+
--color-cream-300: #d2c5bc;
|
|
213
|
+
--color-cream-350: #c0aea0;
|
|
205
214
|
--color-cream-400: #a99a93;
|
|
215
|
+
--color-cream-450: #8a7d75;
|
|
206
216
|
--color-cream-500: #736962;
|
|
207
217
|
--color-cream-600: #57514b;
|
|
208
218
|
--color-cream-700: #3b3634;
|
|
@@ -223,3 +233,262 @@
|
|
|
223
233
|
--color-coffee-900: #2f1f1d;
|
|
224
234
|
--color-coffee-950: #1b1212;
|
|
225
235
|
}
|
|
236
|
+
|
|
237
|
+
/* Override light dove il designer devia dal default Nuxt UI */
|
|
238
|
+
:root {
|
|
239
|
+
--ui-text-highlighted: var(--color-cream-950);
|
|
240
|
+
--ui-bg-inverted: var(--color-cream-800);
|
|
241
|
+
--ui-border-inverted: var(--color-cream-800);
|
|
242
|
+
--ui-border-accented: var(--color-cream-350);
|
|
243
|
+
}
|
|
244
|
+
|
|
245
|
+
/* ================================================
|
|
246
|
+
DARK MODE PALETTE
|
|
247
|
+
Overrides the palette scales when the `.dark` class
|
|
248
|
+
is active (Nuxt UI color mode). Utilities such as
|
|
249
|
+
`bg-cream-500` reference these vars, so they flip
|
|
250
|
+
automatically. Values exported from Figma
|
|
251
|
+
(dark-families-update.tokens.json).
|
|
252
|
+
================================================ */
|
|
253
|
+
.dark {
|
|
254
|
+
/* Error */
|
|
255
|
+
--color-error-50: #1d0e0c;
|
|
256
|
+
--color-error-100: #341b19;
|
|
257
|
+
--color-error-200: #4b1f1b;
|
|
258
|
+
--color-error-300: #7e2d25;
|
|
259
|
+
--color-error-400: #ac4439;
|
|
260
|
+
--color-error-450: #c65d53;
|
|
261
|
+
--color-error-500: #e96e62;
|
|
262
|
+
--color-error-600: #e48a81;
|
|
263
|
+
--color-error-700: #dfa59f;
|
|
264
|
+
--color-error-800: #ecc8c6;
|
|
265
|
+
--color-error-900: #f0dddb;
|
|
266
|
+
--color-error-950: #f6efef;
|
|
267
|
+
|
|
268
|
+
/* Success */
|
|
269
|
+
--color-success-50: #081408;
|
|
270
|
+
--color-success-100: #0c1d0c;
|
|
271
|
+
--color-success-200: #223922;
|
|
272
|
+
--color-success-300: #2e4c2e;
|
|
273
|
+
--color-success-400: #3d5b3d;
|
|
274
|
+
--color-success-500: #538b53;
|
|
275
|
+
--color-success-600: #619261;
|
|
276
|
+
--color-success-700: #96b696;
|
|
277
|
+
--color-success-800: #b3cdb3;
|
|
278
|
+
--color-success-900: #d3e1d3;
|
|
279
|
+
--color-success-950: #ecf2ec;
|
|
280
|
+
|
|
281
|
+
/* Warning */
|
|
282
|
+
--color-warning-50: #161109;
|
|
283
|
+
--color-warning-100: #292112;
|
|
284
|
+
--color-warning-200: #41331b;
|
|
285
|
+
--color-warning-300: #564321;
|
|
286
|
+
--color-warning-400: #765d32;
|
|
287
|
+
--color-warning-500: #b98d3e;
|
|
288
|
+
--color-warning-600: #ba975d;
|
|
289
|
+
--color-warning-700: #c7ac7e;
|
|
290
|
+
--color-warning-800: #e2cea9;
|
|
291
|
+
--color-warning-900: #eae0ce;
|
|
292
|
+
--color-warning-950: #f4f0eb;
|
|
293
|
+
|
|
294
|
+
/* Info */
|
|
295
|
+
--color-info-50: #101214;
|
|
296
|
+
--color-info-100: #1e262e;
|
|
297
|
+
--color-info-200: #2c3d49;
|
|
298
|
+
--color-info-300: #3a4957;
|
|
299
|
+
--color-info-400: #52687b;
|
|
300
|
+
--color-info-500: #8499aa;
|
|
301
|
+
--color-info-600: #96a5b3;
|
|
302
|
+
--color-info-700: #a9b4bf;
|
|
303
|
+
--color-info-800: #cdd4d7;
|
|
304
|
+
--color-info-900: #dfe1e4;
|
|
305
|
+
--color-info-950: #f0f0f1;
|
|
306
|
+
|
|
307
|
+
/* Focus */
|
|
308
|
+
--color-focus-50: #091317;
|
|
309
|
+
--color-focus-100: #14252a;
|
|
310
|
+
--color-focus-200: #183944;
|
|
311
|
+
--color-focus-300: #1c4e5e;
|
|
312
|
+
--color-focus-400: #276d85;
|
|
313
|
+
--color-focus-500: #39a1c4;
|
|
314
|
+
--color-focus-600: #54afce;
|
|
315
|
+
--color-focus-700: #7abdd3;
|
|
316
|
+
--color-focus-800: #aed7e4;
|
|
317
|
+
--color-focus-900: #d0e4eb;
|
|
318
|
+
--color-focus-950: #ebf2f4;
|
|
319
|
+
|
|
320
|
+
/* Mustard */
|
|
321
|
+
--color-mustard-50: #1d1b13;
|
|
322
|
+
--color-mustard-100: #2f2c23;
|
|
323
|
+
--color-mustard-200: #46402f;
|
|
324
|
+
--color-mustard-300: #62593c;
|
|
325
|
+
--color-mustard-400: #82744a;
|
|
326
|
+
--color-mustard-500: #9f8e5b;
|
|
327
|
+
--color-mustard-600: #ada076;
|
|
328
|
+
--color-mustard-700: #bab091;
|
|
329
|
+
--color-mustard-800: #c6bfa9;
|
|
330
|
+
--color-mustard-900: #d3cfc0;
|
|
331
|
+
--color-mustard-950: #dfdcd3;
|
|
332
|
+
|
|
333
|
+
/* Apricot */
|
|
334
|
+
--color-apricot-50: #221916;
|
|
335
|
+
--color-apricot-100: #2f2622;
|
|
336
|
+
--color-apricot-200: #46352f;
|
|
337
|
+
--color-apricot-300: #63453b;
|
|
338
|
+
--color-apricot-400: #835749;
|
|
339
|
+
--color-apricot-500: #a16b59;
|
|
340
|
+
--color-apricot-600: #af8374;
|
|
341
|
+
--color-apricot-700: #bc9b90;
|
|
342
|
+
--color-apricot-800: #c7b0a8;
|
|
343
|
+
--color-apricot-900: #d4c4bf;
|
|
344
|
+
--color-apricot-950: #dfd5d2;
|
|
345
|
+
|
|
346
|
+
/* Beet */
|
|
347
|
+
--color-beet-50: #23171f;
|
|
348
|
+
--color-beet-100: #2e242a;
|
|
349
|
+
--color-beet-200: #44323e;
|
|
350
|
+
--color-beet-300: #5e4054;
|
|
351
|
+
--color-beet-400: #7d4f6d;
|
|
352
|
+
--color-beet-500: #996186;
|
|
353
|
+
--color-beet-600: #a87b99;
|
|
354
|
+
--color-beet-700: #b795ab;
|
|
355
|
+
--color-beet-800: #c4acbc;
|
|
356
|
+
--color-beet-900: #d2c1cc;
|
|
357
|
+
--color-beet-950: #ded4da;
|
|
358
|
+
|
|
359
|
+
/* Blueberry */
|
|
360
|
+
--color-blueberry-50: #1a1926;
|
|
361
|
+
--color-blueberry-100: #25242e;
|
|
362
|
+
--color-blueberry-200: #333243;
|
|
363
|
+
--color-blueberry-300: #43405e;
|
|
364
|
+
--color-blueberry-400: #54517b;
|
|
365
|
+
--color-blueberry-500: #676397;
|
|
366
|
+
--color-blueberry-600: #807ca7;
|
|
367
|
+
--color-blueberry-700: #9896b6;
|
|
368
|
+
--color-blueberry-800: #aeacc3;
|
|
369
|
+
--color-blueberry-900: #c3c2d1;
|
|
370
|
+
--color-blueberry-950: #d5d4de;
|
|
371
|
+
|
|
372
|
+
/* Juniper */
|
|
373
|
+
--color-juniper-50: #161b20;
|
|
374
|
+
--color-juniper-100: #23292f;
|
|
375
|
+
--color-juniper-200: #303b46;
|
|
376
|
+
--color-juniper-300: #3c4f62;
|
|
377
|
+
--color-juniper-400: #4a6682;
|
|
378
|
+
--color-juniper-500: #5b7d9f;
|
|
379
|
+
--color-juniper-600: #7692ad;
|
|
380
|
+
--color-juniper-700: #91a6ba;
|
|
381
|
+
--color-juniper-800: #a9b8c6;
|
|
382
|
+
--color-juniper-900: #c0cad3;
|
|
383
|
+
--color-juniper-950: #d3d9df;
|
|
384
|
+
|
|
385
|
+
/* Mint */
|
|
386
|
+
--color-mint-50: #131d1b;
|
|
387
|
+
--color-mint-100: #242e2c;
|
|
388
|
+
--color-mint-200: #324441;
|
|
389
|
+
--color-mint-300: #405e59;
|
|
390
|
+
--color-mint-400: #4f7d75;
|
|
391
|
+
--color-mint-500: #61998f;
|
|
392
|
+
--color-mint-600: #7ba8a0;
|
|
393
|
+
--color-mint-700: #95b7b1;
|
|
394
|
+
--color-mint-800: #acc4bf;
|
|
395
|
+
--color-mint-900: #c1d1cf;
|
|
396
|
+
--color-mint-950: #d4dedc;
|
|
397
|
+
|
|
398
|
+
/* Pistachio */
|
|
399
|
+
--color-pistachio-50: #191c13;
|
|
400
|
+
--color-pistachio-100: #2a2e24;
|
|
401
|
+
--color-pistachio-200: #3d4332;
|
|
402
|
+
--color-pistachio-300: #545e40;
|
|
403
|
+
--color-pistachio-400: #6d7c50;
|
|
404
|
+
--color-pistachio-500: #869862;
|
|
405
|
+
--color-pistachio-600: #98a77c;
|
|
406
|
+
--color-pistachio-700: #abb696;
|
|
407
|
+
--color-pistachio-800: #bbc3ac;
|
|
408
|
+
--color-pistachio-900: #ccd1c2;
|
|
409
|
+
--color-pistachio-950: #daded4;
|
|
410
|
+
|
|
411
|
+
/* Plum */
|
|
412
|
+
--color-plum-50: #211824;
|
|
413
|
+
--color-plum-100: #2b242e;
|
|
414
|
+
--color-plum-200: #3f3243;
|
|
415
|
+
--color-plum-300: #56405e;
|
|
416
|
+
--color-plum-400: #71507c;
|
|
417
|
+
--color-plum-500: #8a6298;
|
|
418
|
+
--color-plum-600: #9c7ca7;
|
|
419
|
+
--color-plum-700: #ae96b6;
|
|
420
|
+
--color-plum-800: #bdacc3;
|
|
421
|
+
--color-plum-900: #cdc2d1;
|
|
422
|
+
--color-plum-950: #dbd4de;
|
|
423
|
+
|
|
424
|
+
/* Radish */
|
|
425
|
+
--color-radish-50: #241819;
|
|
426
|
+
--color-radish-100: #2f2324;
|
|
427
|
+
--color-radish-200: #453032;
|
|
428
|
+
--color-radish-300: #613d40;
|
|
429
|
+
--color-radish-400: #814b4f;
|
|
430
|
+
--color-radish-500: #9e5c61;
|
|
431
|
+
--color-radish-600: #ac777b;
|
|
432
|
+
--color-radish-700: #ba9295;
|
|
433
|
+
--color-radish-800: #c6a9ac;
|
|
434
|
+
--color-radish-900: #d3c0c1;
|
|
435
|
+
--color-radish-950: #dfd3d4;
|
|
436
|
+
|
|
437
|
+
/* Cream */
|
|
438
|
+
--color-cream-50: #110f0e;
|
|
439
|
+
--color-cream-100: #1c1917;
|
|
440
|
+
--color-cream-150: #26221f;
|
|
441
|
+
--color-cream-200: #2f2b27;
|
|
442
|
+
--color-cream-300: #47423d;
|
|
443
|
+
--color-cream-350: #524c47;
|
|
444
|
+
--color-cream-400: #726a64;
|
|
445
|
+
--color-cream-450: #8a7d75;
|
|
446
|
+
--color-cream-500: #8a827a;
|
|
447
|
+
--color-cream-600: #9f9993;
|
|
448
|
+
--color-cream-700: #c3bebb;
|
|
449
|
+
--color-cream-800: #d0cbc8;
|
|
450
|
+
--color-cream-900: #ded7d4;
|
|
451
|
+
--color-cream-950: #eae4e1;
|
|
452
|
+
|
|
453
|
+
/* Coffee */
|
|
454
|
+
--color-coffee-50: #1a1211;
|
|
455
|
+
--color-coffee-100: #291c19;
|
|
456
|
+
--color-coffee-200: #402a26;
|
|
457
|
+
--color-coffee-300: #5c3e38;
|
|
458
|
+
--color-coffee-400: #7e544e;
|
|
459
|
+
--color-coffee-500: #a26f67;
|
|
460
|
+
--color-coffee-600: #b7948f;
|
|
461
|
+
--color-coffee-700: #cab3af;
|
|
462
|
+
--color-coffee-800: #dbcecc;
|
|
463
|
+
--color-coffee-900: #e9e3e2;
|
|
464
|
+
--color-coffee-950: #f4f1f1;
|
|
465
|
+
|
|
466
|
+
/* Semantici dark = MIRROR del light: stessa shade in light e dark.
|
|
467
|
+
Il flip della scala .dark produce il valore dark corretto.
|
|
468
|
+
Verificato contro Figma (node 4709:7495): sidebar=cream-100(elevated),
|
|
469
|
+
pill attivo=cream-200(accented), testo attivo=cream-900(highlighted),
|
|
470
|
+
icone nav=cream-700(default), avatar/back-admin=cream-900(inverted). */
|
|
471
|
+
|
|
472
|
+
/* Backgrounds */
|
|
473
|
+
--ui-bg: var(--color-cream-50);
|
|
474
|
+
--ui-bg-muted: var(--color-cream-100);
|
|
475
|
+
--ui-bg-elevated: var(--color-cream-100); /* Figma sidebar */
|
|
476
|
+
--ui-bg-accented: var(--color-cream-200); /* Figma pill attivo */
|
|
477
|
+
--ui-bg-inverted: var(--color-cream-900);
|
|
478
|
+
|
|
479
|
+
/* Text — mirror light */
|
|
480
|
+
--ui-text-dimmed: var(--color-cream-400);
|
|
481
|
+
--ui-text-muted: var(--color-cream-500);
|
|
482
|
+
--ui-text-toned: var(--color-cream-600);
|
|
483
|
+
--ui-text: var(--color-cream-700); /* Figma icone/testo nav */
|
|
484
|
+
--ui-text-highlighted: var(--color-cream-950);
|
|
485
|
+
--ui-text-inverted: var(--color-cream-50); /* testo scuro su superficie inverted */
|
|
486
|
+
|
|
487
|
+
/* Borders — mirror light */
|
|
488
|
+
--ui-border: var(--color-cream-200);
|
|
489
|
+
--ui-border-muted: var(--color-cream-200);
|
|
490
|
+
--ui-border-accented: var(--color-cream-350);
|
|
491
|
+
--ui-border-inverted: var(--color-cream-900);
|
|
492
|
+
|
|
493
|
+
--ui-error: var(--color-error-500);
|
|
494
|
+
}
|