@maggioli-design-system/styles 17.0.1 → 17.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.
@@ -0,0 +1,722 @@
1
+ {
2
+ "magma": {
3
+ "pref": {
4
+ "$extensions": {
5
+ "it.maggioli.magma": {
6
+ "cssOnly": [
7
+ {
8
+ "css": "--magma-pref-mode",
9
+ "value": "light"
10
+ },
11
+ {
12
+ "css": "--magma-pref-theme-scheme",
13
+ "value": "light"
14
+ },
15
+ {
16
+ "css": "--magma-pref-theme",
17
+ "value": "default"
18
+ },
19
+ {
20
+ "css": "--magma-pref-consumption",
21
+ "value": "high"
22
+ },
23
+ {
24
+ "css": "--magma-pref-animation",
25
+ "value": "no-preference"
26
+ },
27
+ {
28
+ "css": "--magma-pref-contrast",
29
+ "value": "no-preference"
30
+ }
31
+ ]
32
+ }
33
+ }
34
+ },
35
+ "backdrop": {
36
+ "animation-duration": {
37
+ "$type": "duration",
38
+ "$value": {
39
+ "value": 300,
40
+ "unit": "ms"
41
+ },
42
+ "$extensions": {
43
+ "it.maggioli.magma": {
44
+ "css": "--magma-backdrop-animation-duration",
45
+ "tier": "semantic"
46
+ }
47
+ }
48
+ },
49
+ "opacity": {
50
+ "$type": "number",
51
+ "$value": 0.1,
52
+ "$extensions": {
53
+ "it.maggioli.magma": {
54
+ "css": "--magma-backdrop-opacity",
55
+ "tier": "semantic"
56
+ }
57
+ }
58
+ },
59
+ "blur": {
60
+ "$type": "dimension",
61
+ "$value": {
62
+ "value": 4,
63
+ "unit": "px"
64
+ },
65
+ "$extensions": {
66
+ "it.maggioli.magma": {
67
+ "css": "--magma-backdrop-blur",
68
+ "tier": "semantic"
69
+ }
70
+ }
71
+ },
72
+ "color": {
73
+ "$type": "color",
74
+ "$value": {
75
+ "colorSpace": "srgb",
76
+ "components": [
77
+ 0,
78
+ 0,
79
+ 0
80
+ ],
81
+ "hex": "#000000"
82
+ },
83
+ "$extensions": {
84
+ "it.maggioli.magma": {
85
+ "css": "--magma-backdrop-color",
86
+ "tier": "semantic"
87
+ }
88
+ }
89
+ },
90
+ "z-index": {
91
+ "$type": "number",
92
+ "$value": 4000,
93
+ "$extensions": {
94
+ "it.maggioli.magma": {
95
+ "css": "--magma-backdrop-z-index",
96
+ "tier": "semantic"
97
+ }
98
+ }
99
+ },
100
+ "$root": {
101
+ "$type": "color",
102
+ "$value": {
103
+ "colorSpace": "srgb",
104
+ "components": [
105
+ 0,
106
+ 0,
107
+ 0
108
+ ],
109
+ "hex": "#000000",
110
+ "alpha": 0.1
111
+ },
112
+ "$extensions": {
113
+ "it.maggioli.magma": {
114
+ "css": "--magma-backdrop",
115
+ "tier": "semantic",
116
+ "cssValue": "rgb(var(--magma-backdrop-color) / var(--magma-backdrop-opacity))"
117
+ }
118
+ }
119
+ }
120
+ },
121
+ "outline": {
122
+ "animation-duration": {
123
+ "$type": "duration",
124
+ "$value": {
125
+ "value": 1.5,
126
+ "unit": "s"
127
+ },
128
+ "$extensions": {
129
+ "it.maggioli.magma": {
130
+ "css": "--magma-outline-animation-duration",
131
+ "tier": "semantic"
132
+ }
133
+ }
134
+ },
135
+ "blur-offset": {
136
+ "$type": "dimension",
137
+ "$value": {
138
+ "value": 6,
139
+ "unit": "px"
140
+ },
141
+ "$extensions": {
142
+ "it.maggioli.magma": {
143
+ "css": "--magma-outline-blur-offset",
144
+ "tier": "semantic"
145
+ }
146
+ }
147
+ },
148
+ "focus-offset": {
149
+ "$type": "dimension",
150
+ "$value": {
151
+ "value": 2,
152
+ "unit": "px"
153
+ },
154
+ "$extensions": {
155
+ "it.maggioli.magma": {
156
+ "css": "--magma-outline-focus-offset",
157
+ "tier": "semantic"
158
+ }
159
+ }
160
+ },
161
+ "blur-color": {
162
+ "$type": "color",
163
+ "$value": {
164
+ "colorSpace": "srgb",
165
+ "components": [
166
+ 0,
167
+ 0,
168
+ 0
169
+ ],
170
+ "hex": "#000000",
171
+ "alpha": 0
172
+ },
173
+ "$extensions": {
174
+ "it.maggioli.magma": {
175
+ "css": "--magma-outline-blur-color",
176
+ "tier": "semantic"
177
+ }
178
+ }
179
+ },
180
+ "focus-color": {
181
+ "$type": "color",
182
+ "$value": "{palette.tone.neutral.05}",
183
+ "$extensions": {
184
+ "it.maggioli.magma": {
185
+ "css": "--magma-outline-focus-color",
186
+ "tier": "semantic"
187
+ }
188
+ }
189
+ },
190
+ "blur": {
191
+ "$type": "border",
192
+ "$value": {
193
+ "color": "{magma.outline.blur-color}",
194
+ "width": {
195
+ "value": 2,
196
+ "unit": "px"
197
+ },
198
+ "style": "solid"
199
+ },
200
+ "$extensions": {
201
+ "it.maggioli.magma": {
202
+ "css": "--magma-outline-blur",
203
+ "tier": "semantic"
204
+ }
205
+ }
206
+ },
207
+ "focus": {
208
+ "$type": "border",
209
+ "$value": {
210
+ "color": "{magma.outline.focus-color}",
211
+ "width": {
212
+ "value": 2,
213
+ "unit": "px"
214
+ },
215
+ "style": "solid"
216
+ },
217
+ "$extensions": {
218
+ "it.maggioli.magma": {
219
+ "css": "--magma-outline-focus",
220
+ "tier": "semantic"
221
+ }
222
+ }
223
+ }
224
+ },
225
+ "disabled": {
226
+ "opacity": {
227
+ "$type": "number",
228
+ "$value": 0.5,
229
+ "$extensions": {
230
+ "it.maggioli.magma": {
231
+ "css": "--magma-disabled-opacity",
232
+ "tier": "semantic"
233
+ }
234
+ }
235
+ }
236
+ },
237
+ "overlay": {
238
+ "opacity": {
239
+ "$type": "number",
240
+ "$value": 0.5,
241
+ "$extensions": {
242
+ "it.maggioli.magma": {
243
+ "css": "--magma-overlay-opacity",
244
+ "tier": "semantic"
245
+ }
246
+ }
247
+ },
248
+ "color": {
249
+ "$type": "color",
250
+ "$value": "{magma.backdrop.color}",
251
+ "$extensions": {
252
+ "it.maggioli.magma": {
253
+ "css": "--magma-overlay-color",
254
+ "tier": "semantic"
255
+ }
256
+ }
257
+ },
258
+ "blur": {
259
+ "$type": "dimension",
260
+ "$value": "{magma.backdrop.blur}",
261
+ "$extensions": {
262
+ "it.maggioli.magma": {
263
+ "css": "--magma-overlay-blur",
264
+ "tier": "semantic"
265
+ }
266
+ }
267
+ },
268
+ "$root": {
269
+ "$type": "color",
270
+ "$value": {
271
+ "colorSpace": "srgb",
272
+ "components": [
273
+ 0,
274
+ 0,
275
+ 0
276
+ ],
277
+ "hex": "#000000",
278
+ "alpha": 0.5
279
+ },
280
+ "$extensions": {
281
+ "it.maggioli.magma": {
282
+ "css": "--magma-overlay",
283
+ "tier": "semantic",
284
+ "cssValue": "rgb(var(--magma-overlay-color) / var(--magma-overlay-opacity))"
285
+ }
286
+ }
287
+ }
288
+ },
289
+ "on": {
290
+ "backdrop": {
291
+ "$type": "color",
292
+ "$value": {
293
+ "colorSpace": "srgb",
294
+ "components": [
295
+ 0.9882,
296
+ 0.9882,
297
+ 0.9882
298
+ ],
299
+ "hex": "#fcfcfc"
300
+ },
301
+ "$extensions": {
302
+ "it.maggioli.magma": {
303
+ "css": "--magma-on-backdrop",
304
+ "tier": "semantic"
305
+ }
306
+ }
307
+ }
308
+ },
309
+ "selection": {
310
+ "background": {
311
+ "$type": "color",
312
+ "$value": "{palette.label.sky.09}",
313
+ "$extensions": {
314
+ "it.maggioli.magma": {
315
+ "css": "--magma-selection-background",
316
+ "tier": "semantic"
317
+ }
318
+ }
319
+ },
320
+ "color": {
321
+ "$type": "color",
322
+ "$value": "{palette.label.sky.01}",
323
+ "$extensions": {
324
+ "it.maggioli.magma": {
325
+ "css": "--magma-selection-color",
326
+ "tier": "semantic"
327
+ }
328
+ }
329
+ }
330
+ },
331
+ "corner": {
332
+ "$extensions": {
333
+ "it.maggioli.magma": {
334
+ "cssOnly": [
335
+ {
336
+ "css": "--magma-corner-shape",
337
+ "value": "squircle"
338
+ }
339
+ ]
340
+ }
341
+ }
342
+ },
343
+ "header": {
344
+ "z-index": {
345
+ "$type": "number",
346
+ "$value": 1000,
347
+ "$extensions": {
348
+ "it.maggioli.magma": {
349
+ "css": "--magma-header-z-index",
350
+ "tier": "semantic"
351
+ }
352
+ }
353
+ }
354
+ },
355
+ "notification": {
356
+ "z-index": {
357
+ "$type": "number",
358
+ "$value": 2000,
359
+ "$extensions": {
360
+ "it.maggioli.magma": {
361
+ "css": "--magma-notification-z-index",
362
+ "tier": "semantic"
363
+ }
364
+ }
365
+ }
366
+ },
367
+ "modal": {
368
+ "z-index": {
369
+ "$type": "number",
370
+ "$value": 3000,
371
+ "$extensions": {
372
+ "it.maggioli.magma": {
373
+ "css": "--magma-modal-z-index",
374
+ "tier": "semantic"
375
+ }
376
+ }
377
+ }
378
+ },
379
+ "dropdown": {
380
+ "z-index": {
381
+ "$type": "number",
382
+ "$value": 5000,
383
+ "$extensions": {
384
+ "it.maggioli.magma": {
385
+ "css": "--magma-dropdown-z-index",
386
+ "tier": "semantic"
387
+ }
388
+ }
389
+ }
390
+ },
391
+ "tooltip": {
392
+ "z-index": {
393
+ "$type": "number",
394
+ "$value": 6000,
395
+ "$extensions": {
396
+ "it.maggioli.magma": {
397
+ "css": "--magma-tooltip-z-index",
398
+ "tier": "semantic"
399
+ }
400
+ }
401
+ }
402
+ },
403
+ "theme": {
404
+ "overlay-z-index": {
405
+ "$type": "number",
406
+ "$value": 7000,
407
+ "$extensions": {
408
+ "it.maggioli.magma": {
409
+ "css": "--magma-theme-overlay-z-index",
410
+ "tier": "semantic"
411
+ }
412
+ }
413
+ }
414
+ },
415
+ "context": {
416
+ "menu-z-index": {
417
+ "$type": "number",
418
+ "$value": 8000,
419
+ "$extensions": {
420
+ "it.maggioli.magma": {
421
+ "css": "--magma-context-menu-z-index",
422
+ "tier": "semantic"
423
+ }
424
+ }
425
+ }
426
+ },
427
+ "view": {
428
+ "$extensions": {
429
+ "it.maggioli.magma": {
430
+ "cssOnly": [
431
+ {
432
+ "css": "--magma-view-transition-navigation",
433
+ "value": "auto"
434
+ }
435
+ ]
436
+ }
437
+ }
438
+ },
439
+ "radius": {
440
+ "none": {
441
+ "$type": "dimension",
442
+ "$value": "{radius.none}",
443
+ "$extensions": {
444
+ "it.maggioli.magma": {
445
+ "css": "--magma-radius-none",
446
+ "tier": "semantic"
447
+ }
448
+ }
449
+ },
450
+ "3xs": {
451
+ "$type": "dimension",
452
+ "$value": "{radius.squircle-3xs}",
453
+ "$extensions": {
454
+ "it.maggioli.magma": {
455
+ "css": "--magma-radius-3xs",
456
+ "tier": "semantic"
457
+ }
458
+ }
459
+ },
460
+ "2xs": {
461
+ "$type": "dimension",
462
+ "$value": "{radius.squircle-2xs}",
463
+ "$extensions": {
464
+ "it.maggioli.magma": {
465
+ "css": "--magma-radius-2xs",
466
+ "tier": "semantic"
467
+ }
468
+ }
469
+ },
470
+ "xs": {
471
+ "$type": "dimension",
472
+ "$value": "{radius.squircle-xs}",
473
+ "$extensions": {
474
+ "it.maggioli.magma": {
475
+ "css": "--magma-radius-xs",
476
+ "tier": "semantic"
477
+ }
478
+ }
479
+ },
480
+ "sm": {
481
+ "$type": "dimension",
482
+ "$value": "{radius.squircle-sm}",
483
+ "$extensions": {
484
+ "it.maggioli.magma": {
485
+ "css": "--magma-radius-sm",
486
+ "tier": "semantic"
487
+ }
488
+ }
489
+ },
490
+ "md": {
491
+ "$type": "dimension",
492
+ "$value": "{radius.squircle-md}",
493
+ "$extensions": {
494
+ "it.maggioli.magma": {
495
+ "css": "--magma-radius-md",
496
+ "tier": "semantic"
497
+ }
498
+ }
499
+ },
500
+ "lg": {
501
+ "$type": "dimension",
502
+ "$value": "{radius.squircle-lg}",
503
+ "$extensions": {
504
+ "it.maggioli.magma": {
505
+ "css": "--magma-radius-lg",
506
+ "tier": "semantic"
507
+ }
508
+ }
509
+ },
510
+ "xl": {
511
+ "$type": "dimension",
512
+ "$value": "{radius.squircle-xl}",
513
+ "$extensions": {
514
+ "it.maggioli.magma": {
515
+ "css": "--magma-radius-xl",
516
+ "tier": "semantic"
517
+ }
518
+ }
519
+ },
520
+ "2xl": {
521
+ "$type": "dimension",
522
+ "$value": "{radius.squircle-2xl}",
523
+ "$extensions": {
524
+ "it.maggioli.magma": {
525
+ "css": "--magma-radius-2xl",
526
+ "tier": "semantic"
527
+ }
528
+ }
529
+ },
530
+ "3xl": {
531
+ "$type": "dimension",
532
+ "$value": "{radius.squircle-3xl}",
533
+ "$extensions": {
534
+ "it.maggioli.magma": {
535
+ "css": "--magma-radius-3xl",
536
+ "tier": "semantic"
537
+ }
538
+ }
539
+ },
540
+ "4xl": {
541
+ "$type": "dimension",
542
+ "$value": "{radius.squircle-4xl}",
543
+ "$extensions": {
544
+ "it.maggioli.magma": {
545
+ "css": "--magma-radius-4xl",
546
+ "tier": "semantic"
547
+ }
548
+ }
549
+ },
550
+ "5xl": {
551
+ "$type": "dimension",
552
+ "$value": "{radius.squircle-5xl}",
553
+ "$extensions": {
554
+ "it.maggioli.magma": {
555
+ "css": "--magma-radius-5xl",
556
+ "tier": "semantic"
557
+ }
558
+ }
559
+ },
560
+ "full": {
561
+ "$type": "dimension",
562
+ "$value": "{radius.full}",
563
+ "$extensions": {
564
+ "it.maggioli.magma": {
565
+ "css": "--magma-radius-full",
566
+ "tier": "semantic"
567
+ }
568
+ }
569
+ }
570
+ }
571
+ },
572
+ "depth": {
573
+ "$type": "number",
574
+ "$value": 1,
575
+ "$extensions": {
576
+ "it.maggioli.magma": {
577
+ "css": "--depth",
578
+ "tier": "semantic"
579
+ }
580
+ }
581
+ },
582
+ "mds": {
583
+ "elevation": {
584
+ "raised": {
585
+ "$type": "shadow",
586
+ "$value": [
587
+ {
588
+ "color": {
589
+ "colorSpace": "srgb",
590
+ "components": [
591
+ 0,
592
+ 0,
593
+ 0
594
+ ],
595
+ "hex": "#000000",
596
+ "alpha": 0.06
597
+ },
598
+ "offsetX": {
599
+ "value": 0,
600
+ "unit": "px"
601
+ },
602
+ "offsetY": {
603
+ "value": 1,
604
+ "unit": "px"
605
+ },
606
+ "blur": {
607
+ "value": 2,
608
+ "unit": "px"
609
+ },
610
+ "spread": {
611
+ "value": 0,
612
+ "unit": "px"
613
+ }
614
+ },
615
+ {
616
+ "color": {
617
+ "colorSpace": "srgb",
618
+ "components": [
619
+ 0,
620
+ 0,
621
+ 0
622
+ ],
623
+ "hex": "#000000",
624
+ "alpha": 0.08
625
+ },
626
+ "offsetX": {
627
+ "value": 0,
628
+ "unit": "px"
629
+ },
630
+ "offsetY": {
631
+ "value": 2,
632
+ "unit": "px"
633
+ },
634
+ "blur": {
635
+ "value": 8,
636
+ "unit": "px"
637
+ },
638
+ "spread": {
639
+ "value": 0,
640
+ "unit": "px"
641
+ }
642
+ }
643
+ ],
644
+ "$extensions": {
645
+ "it.maggioli.magma": {
646
+ "css": "--mds-elevation-raised",
647
+ "tier": "semantic",
648
+ "cssValue": "0 calc(1px * var(--depth)) calc(2px * var(--depth)) rgb(var(--magma-backdrop-color) / calc(0.06 * var(--depth))), 0 calc(2px * var(--depth)) calc(8px * var(--depth)) rgb(var(--magma-backdrop-color) / calc(0.08 * var(--depth)))"
649
+ }
650
+ }
651
+ },
652
+ "overlay": {
653
+ "$type": "shadow",
654
+ "$value": [
655
+ {
656
+ "color": {
657
+ "colorSpace": "srgb",
658
+ "components": [
659
+ 0,
660
+ 0,
661
+ 0
662
+ ],
663
+ "hex": "#000000",
664
+ "alpha": 0.12
665
+ },
666
+ "offsetX": {
667
+ "value": 0,
668
+ "unit": "px"
669
+ },
670
+ "offsetY": {
671
+ "value": 4,
672
+ "unit": "px"
673
+ },
674
+ "blur": {
675
+ "value": 12,
676
+ "unit": "px"
677
+ },
678
+ "spread": {
679
+ "value": 0,
680
+ "unit": "px"
681
+ }
682
+ },
683
+ {
684
+ "color": {
685
+ "colorSpace": "srgb",
686
+ "components": [
687
+ 0,
688
+ 0,
689
+ 0
690
+ ],
691
+ "hex": "#000000",
692
+ "alpha": 0.16
693
+ },
694
+ "offsetX": {
695
+ "value": 0,
696
+ "unit": "px"
697
+ },
698
+ "offsetY": {
699
+ "value": 8,
700
+ "unit": "px"
701
+ },
702
+ "blur": {
703
+ "value": 24,
704
+ "unit": "px"
705
+ },
706
+ "spread": {
707
+ "value": 0,
708
+ "unit": "px"
709
+ }
710
+ }
711
+ ],
712
+ "$extensions": {
713
+ "it.maggioli.magma": {
714
+ "css": "--mds-elevation-overlay",
715
+ "tier": "semantic",
716
+ "cssValue": "0 calc(4px * var(--depth)) calc(12px * var(--depth)) rgb(var(--magma-backdrop-color) / calc(0.12 * var(--depth))), 0 calc(8px * var(--depth)) calc(24px * var(--depth)) rgb(var(--magma-backdrop-color) / calc(0.16 * var(--depth)))"
717
+ }
718
+ }
719
+ }
720
+ }
721
+ }
722
+ }