pswex-design-system 7.0.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,694 @@
1
+ {
2
+ "$description": "Design tokens da PSWEX, extraidos do CSS de producao. Quatro familias: marca nao muda com o tema, tema inverte inteiro no escuro, sobre-cor e texto que fica em cima de cor de marca, layout e medida.",
3
+ "$extensions": {
4
+ "com.pswex.versao": "7.0.0"
5
+ },
6
+ "marca": {
7
+ "$description": "Cor da marca, igual nos dois temas",
8
+ "principal": {
9
+ "navy": {
10
+ "$value": "#232F3E",
11
+ "$type": "color",
12
+ "$description": "Navy",
13
+ "$extensions": {
14
+ "com.pswex.css": "--navy",
15
+ "com.pswex.grupo": "marca/principal",
16
+ "com.figma.scopes": [
17
+ "FRAME_FILL",
18
+ "SHAPE_FILL",
19
+ "STROKE_COLOR"
20
+ ]
21
+ }
22
+ },
23
+ "red": {
24
+ "$value": "#C7273E",
25
+ "$type": "color",
26
+ "$description": "Vermelho",
27
+ "$extensions": {
28
+ "com.pswex.css": "--red",
29
+ "com.pswex.grupo": "marca/principal",
30
+ "com.figma.scopes": [
31
+ "FRAME_FILL",
32
+ "SHAPE_FILL",
33
+ "STROKE_COLOR"
34
+ ]
35
+ }
36
+ },
37
+ "teal": {
38
+ "$value": "#1F4768",
39
+ "$type": "color",
40
+ "$description": "Teal",
41
+ "$extensions": {
42
+ "com.pswex.css": "--teal",
43
+ "com.pswex.grupo": "marca/principal",
44
+ "com.figma.scopes": [
45
+ "FRAME_FILL",
46
+ "SHAPE_FILL",
47
+ "STROKE_COLOR"
48
+ ]
49
+ }
50
+ }
51
+ },
52
+ "secundaria": {
53
+ "mint": {
54
+ "$value": "#C1EDCC",
55
+ "$type": "color",
56
+ "$description": "Mint",
57
+ "$extensions": {
58
+ "com.pswex.css": "--mint",
59
+ "com.pswex.grupo": "marca/secundaria",
60
+ "com.figma.scopes": [
61
+ "FRAME_FILL",
62
+ "SHAPE_FILL",
63
+ "STROKE_COLOR"
64
+ ]
65
+ }
66
+ },
67
+ "sky": {
68
+ "$value": "#7CCFDB",
69
+ "$type": "color",
70
+ "$description": "Sky",
71
+ "$extensions": {
72
+ "com.pswex.css": "--sky",
73
+ "com.pswex.grupo": "marca/secundaria",
74
+ "com.figma.scopes": [
75
+ "FRAME_FILL",
76
+ "SHAPE_FILL",
77
+ "STROKE_COLOR"
78
+ ]
79
+ }
80
+ },
81
+ "leaf": {
82
+ "$value": "#669933",
83
+ "$type": "color",
84
+ "$description": "Leaf",
85
+ "$extensions": {
86
+ "com.pswex.css": "--leaf",
87
+ "com.pswex.grupo": "marca/secundaria",
88
+ "com.figma.scopes": [
89
+ "FRAME_FILL",
90
+ "SHAPE_FILL",
91
+ "STROKE_COLOR"
92
+ ],
93
+ "com.pswex.semUso": true
94
+ }
95
+ },
96
+ "lime": {
97
+ "$value": "#99CC33",
98
+ "$type": "color",
99
+ "$description": "Lime, o CTA",
100
+ "$extensions": {
101
+ "com.pswex.css": "--lime",
102
+ "com.pswex.grupo": "marca/secundaria",
103
+ "com.figma.scopes": [
104
+ "FRAME_FILL",
105
+ "SHAPE_FILL",
106
+ "STROKE_COLOR"
107
+ ]
108
+ }
109
+ }
110
+ },
111
+ "variacao": {
112
+ "navy-700": {
113
+ "$value": "#35485F",
114
+ "$type": "color",
115
+ "$description": "Navy 700",
116
+ "$extensions": {
117
+ "com.pswex.css": "--navy-700",
118
+ "com.pswex.grupo": "marca/variacao",
119
+ "com.figma.scopes": [
120
+ "FRAME_FILL",
121
+ "SHAPE_FILL",
122
+ "STROKE_COLOR"
123
+ ],
124
+ "com.pswex.semUso": true
125
+ }
126
+ },
127
+ "navy-800": {
128
+ "$value": "#2B3A4D",
129
+ "$type": "color",
130
+ "$description": "Navy 800",
131
+ "$extensions": {
132
+ "com.pswex.css": "--navy-800",
133
+ "com.pswex.grupo": "marca/variacao",
134
+ "com.figma.scopes": [
135
+ "FRAME_FILL",
136
+ "SHAPE_FILL",
137
+ "STROKE_COLOR"
138
+ ]
139
+ }
140
+ },
141
+ "navy-900": {
142
+ "$value": "#1B2531",
143
+ "$type": "color",
144
+ "$description": "Navy 900",
145
+ "$extensions": {
146
+ "com.pswex.css": "--navy-900",
147
+ "com.pswex.grupo": "marca/variacao",
148
+ "com.figma.scopes": [
149
+ "FRAME_FILL",
150
+ "SHAPE_FILL",
151
+ "STROKE_COLOR"
152
+ ],
153
+ "com.pswex.semUso": true
154
+ }
155
+ },
156
+ "navy-950": {
157
+ "$value": "#19212C",
158
+ "$type": "color",
159
+ "$description": "Navy 950",
160
+ "$extensions": {
161
+ "com.pswex.css": "--navy-950",
162
+ "com.pswex.grupo": "marca/variacao",
163
+ "com.figma.scopes": [
164
+ "FRAME_FILL",
165
+ "SHAPE_FILL",
166
+ "STROKE_COLOR"
167
+ ]
168
+ }
169
+ },
170
+ "red-600": {
171
+ "$value": "#A92135",
172
+ "$type": "color",
173
+ "$description": "Vermelho 600",
174
+ "$extensions": {
175
+ "com.pswex.css": "--red-600",
176
+ "com.pswex.grupo": "marca/variacao",
177
+ "com.figma.scopes": [
178
+ "FRAME_FILL",
179
+ "SHAPE_FILL",
180
+ "STROKE_COLOR"
181
+ ]
182
+ }
183
+ },
184
+ "red-700": {
185
+ "$value": "#941D2E",
186
+ "$type": "color",
187
+ "$description": "Vermelho 700",
188
+ "$extensions": {
189
+ "com.pswex.css": "--red-700",
190
+ "com.pswex.grupo": "marca/variacao",
191
+ "com.figma.scopes": [
192
+ "FRAME_FILL",
193
+ "SHAPE_FILL",
194
+ "STROKE_COLOR"
195
+ ]
196
+ }
197
+ },
198
+ "sky-800": {
199
+ "$value": "#267F8C",
200
+ "$type": "color",
201
+ "$description": "Sky 800",
202
+ "$extensions": {
203
+ "com.pswex.css": "--sky-800",
204
+ "com.pswex.grupo": "marca/variacao",
205
+ "com.figma.scopes": [
206
+ "FRAME_FILL",
207
+ "SHAPE_FILL",
208
+ "STROKE_COLOR"
209
+ ]
210
+ }
211
+ },
212
+ "leaf-800": {
213
+ "$value": "#4A6F25",
214
+ "$type": "color",
215
+ "$description": "Leaf 800",
216
+ "$extensions": {
217
+ "com.pswex.css": "--leaf-800",
218
+ "com.pswex.grupo": "marca/variacao",
219
+ "com.figma.scopes": [
220
+ "FRAME_FILL",
221
+ "SHAPE_FILL",
222
+ "STROKE_COLOR"
223
+ ],
224
+ "com.pswex.semUso": true
225
+ }
226
+ }
227
+ },
228
+ "neutro": {
229
+ "charcoal": {
230
+ "$value": "#353437",
231
+ "$type": "color",
232
+ "$description": "Carvão",
233
+ "$extensions": {
234
+ "com.pswex.css": "--charcoal",
235
+ "com.pswex.grupo": "marca/neutro",
236
+ "com.figma.scopes": [
237
+ "FRAME_FILL",
238
+ "SHAPE_FILL",
239
+ "STROKE_COLOR"
240
+ ],
241
+ "com.pswex.semUso": true
242
+ }
243
+ },
244
+ "gray-dark": {
245
+ "$value": "#4D4D4C",
246
+ "$type": "color",
247
+ "$description": "Cinza escuro",
248
+ "$extensions": {
249
+ "com.pswex.css": "--gray-dark",
250
+ "com.pswex.grupo": "marca/neutro",
251
+ "com.figma.scopes": [
252
+ "FRAME_FILL",
253
+ "SHAPE_FILL",
254
+ "STROKE_COLOR"
255
+ ]
256
+ }
257
+ },
258
+ "gray-mid": {
259
+ "$value": "#656565",
260
+ "$type": "color",
261
+ "$description": "Cinza médio",
262
+ "$extensions": {
263
+ "com.pswex.css": "--gray-mid",
264
+ "com.pswex.grupo": "marca/neutro",
265
+ "com.figma.scopes": [
266
+ "FRAME_FILL",
267
+ "SHAPE_FILL",
268
+ "STROKE_COLOR"
269
+ ]
270
+ }
271
+ },
272
+ "ice": {
273
+ "$value": "#FFFCF1",
274
+ "$type": "color",
275
+ "$description": "Gelo",
276
+ "$extensions": {
277
+ "com.pswex.css": "--ice",
278
+ "com.pswex.grupo": "marca/neutro",
279
+ "com.figma.scopes": [
280
+ "FRAME_FILL",
281
+ "SHAPE_FILL",
282
+ "STROKE_COLOR"
283
+ ],
284
+ "com.pswex.semUso": true
285
+ }
286
+ },
287
+ "offwhite": {
288
+ "$value": "#F4F4EE",
289
+ "$type": "color",
290
+ "$description": "Off-white",
291
+ "$extensions": {
292
+ "com.pswex.css": "--offwhite",
293
+ "com.pswex.grupo": "marca/neutro",
294
+ "com.figma.scopes": [
295
+ "FRAME_FILL",
296
+ "SHAPE_FILL",
297
+ "STROKE_COLOR"
298
+ ],
299
+ "com.pswex.semUso": true
300
+ }
301
+ }
302
+ }
303
+ },
304
+ "tema": {
305
+ "$description": "Inverte inteira no tema escuro",
306
+ "fundo": {
307
+ "bg": {
308
+ "$value": "var(--snow)",
309
+ "$type": "color",
310
+ "$description": "Fundo",
311
+ "$extensions": {
312
+ "com.pswex.css": "--bg",
313
+ "com.pswex.grupo": "tema/fundo",
314
+ "com.figma.scopes": [
315
+ "FRAME_FILL",
316
+ "SHAPE_FILL",
317
+ "STROKE_COLOR"
318
+ ],
319
+ "com.pswex.resolvido": "#FFFAFA",
320
+ "com.pswex.escuro": "#12181F"
321
+ }
322
+ },
323
+ "surface": {
324
+ "$value": "var(--paper)",
325
+ "$type": "color",
326
+ "$description": "Superfície",
327
+ "$extensions": {
328
+ "com.pswex.css": "--surface",
329
+ "com.pswex.grupo": "tema/fundo",
330
+ "com.figma.scopes": [
331
+ "FRAME_FILL",
332
+ "SHAPE_FILL",
333
+ "STROKE_COLOR"
334
+ ],
335
+ "com.pswex.resolvido": "#FFFFFF",
336
+ "com.pswex.escuro": "#1B242F",
337
+ "com.pswex.semUso": true
338
+ }
339
+ },
340
+ "paper": {
341
+ "$value": "#FFFFFF",
342
+ "$type": "color",
343
+ "$description": "Papel, superfície de card",
344
+ "$extensions": {
345
+ "com.pswex.css": "--paper",
346
+ "com.pswex.grupo": "tema/fundo",
347
+ "com.figma.scopes": [
348
+ "FRAME_FILL",
349
+ "SHAPE_FILL",
350
+ "STROKE_COLOR"
351
+ ],
352
+ "com.pswex.escuro": "#1B242F"
353
+ }
354
+ },
355
+ "snow": {
356
+ "$value": "#FFFAFA",
357
+ "$type": "color",
358
+ "$description": "Snow",
359
+ "$extensions": {
360
+ "com.pswex.css": "--snow",
361
+ "com.pswex.grupo": "tema/fundo",
362
+ "com.figma.scopes": [
363
+ "FRAME_FILL",
364
+ "SHAPE_FILL",
365
+ "STROKE_COLOR"
366
+ ],
367
+ "com.pswex.escuro": "#151D26"
368
+ }
369
+ },
370
+ "beige": {
371
+ "$value": "#F8F4E3",
372
+ "$type": "color",
373
+ "$description": "Bege",
374
+ "$extensions": {
375
+ "com.pswex.css": "--beige",
376
+ "com.pswex.grupo": "tema/fundo",
377
+ "com.figma.scopes": [
378
+ "FRAME_FILL",
379
+ "SHAPE_FILL",
380
+ "STROKE_COLOR"
381
+ ],
382
+ "com.pswex.escuro": "#1E2732"
383
+ }
384
+ },
385
+ "light": {
386
+ "$value": "#F2F3F4",
387
+ "$type": "color",
388
+ "$description": "Light",
389
+ "$extensions": {
390
+ "com.pswex.css": "--light",
391
+ "com.pswex.grupo": "tema/fundo",
392
+ "com.figma.scopes": [
393
+ "FRAME_FILL",
394
+ "SHAPE_FILL",
395
+ "STROKE_COLOR"
396
+ ],
397
+ "com.pswex.escuro": "#1A222C",
398
+ "com.pswex.semUso": true
399
+ }
400
+ },
401
+ "teal-50": {
402
+ "$value": "#E9F0F7",
403
+ "$type": "color",
404
+ "$description": "Teal claro",
405
+ "$extensions": {
406
+ "com.pswex.css": "--teal-50",
407
+ "com.pswex.grupo": "tema/fundo",
408
+ "com.figma.scopes": [
409
+ "FRAME_FILL",
410
+ "SHAPE_FILL",
411
+ "STROKE_COLOR"
412
+ ],
413
+ "com.pswex.escuro": "#17222E"
414
+ }
415
+ }
416
+ },
417
+ "texto": {
418
+ "fg": {
419
+ "$value": "var(--navy)",
420
+ "$type": "color",
421
+ "$description": "Texto principal",
422
+ "$extensions": {
423
+ "com.pswex.css": "--fg",
424
+ "com.pswex.grupo": "tema/texto",
425
+ "com.figma.scopes": [
426
+ "TEXT_FILL"
427
+ ],
428
+ "com.pswex.resolvido": "#232F3E",
429
+ "com.pswex.escuro": "#EEF3F8"
430
+ }
431
+ },
432
+ "ink": {
433
+ "$value": "var(--navy)",
434
+ "$type": "color",
435
+ "$description": "Título",
436
+ "$extensions": {
437
+ "com.pswex.css": "--ink",
438
+ "com.pswex.grupo": "tema/texto",
439
+ "com.figma.scopes": [
440
+ "TEXT_FILL"
441
+ ],
442
+ "com.pswex.resolvido": "#232F3E",
443
+ "com.pswex.escuro": "#EEF3F8"
444
+ }
445
+ },
446
+ "ink-2": {
447
+ "$value": "var(--gray-dark)",
448
+ "$type": "color",
449
+ "$description": "Texto de apoio",
450
+ "$extensions": {
451
+ "com.pswex.css": "--ink-2",
452
+ "com.pswex.grupo": "tema/texto",
453
+ "com.figma.scopes": [
454
+ "TEXT_FILL"
455
+ ],
456
+ "com.pswex.resolvido": "#4D4D4C",
457
+ "com.pswex.escuro": "#C3CFDC"
458
+ }
459
+ },
460
+ "ink-3": {
461
+ "$value": "var(--gray-mid)",
462
+ "$type": "color",
463
+ "$description": "Texto terciário",
464
+ "$extensions": {
465
+ "com.pswex.css": "--ink-3",
466
+ "com.pswex.grupo": "tema/texto",
467
+ "com.figma.scopes": [
468
+ "TEXT_FILL"
469
+ ],
470
+ "com.pswex.resolvido": "#656565",
471
+ "com.pswex.escuro": "#A3B2C2",
472
+ "com.pswex.semUso": true
473
+ }
474
+ },
475
+ "muted": {
476
+ "$value": "var(--gray-mid)",
477
+ "$type": "color",
478
+ "$description": "Texto discreto",
479
+ "$extensions": {
480
+ "com.pswex.css": "--muted",
481
+ "com.pswex.grupo": "tema/texto",
482
+ "com.figma.scopes": [
483
+ "TEXT_FILL"
484
+ ],
485
+ "com.pswex.resolvido": "#656565",
486
+ "com.pswex.escuro": "#9FB0C2"
487
+ }
488
+ }
489
+ },
490
+ "acento": {
491
+ "accent-txt": {
492
+ "$value": "var(--red)",
493
+ "$type": "color",
494
+ "$description": "Acento",
495
+ "$extensions": {
496
+ "com.pswex.css": "--accent-txt",
497
+ "com.pswex.grupo": "tema/acento",
498
+ "com.figma.scopes": [
499
+ "TEXT_FILL"
500
+ ],
501
+ "com.pswex.resolvido": "#C7273E",
502
+ "com.pswex.escuro": "#F4808F"
503
+ }
504
+ },
505
+ "accent-2-txt": {
506
+ "$value": "var(--teal)",
507
+ "$type": "color",
508
+ "$description": "Acento secundário",
509
+ "$extensions": {
510
+ "com.pswex.css": "--accent-2-txt",
511
+ "com.pswex.grupo": "tema/acento",
512
+ "com.figma.scopes": [
513
+ "TEXT_FILL"
514
+ ],
515
+ "com.pswex.resolvido": "#1F4768",
516
+ "com.pswex.escuro": "#8FC5DE"
517
+ }
518
+ }
519
+ },
520
+ "linha": {
521
+ "line": {
522
+ "$value": "#D5DBE2",
523
+ "$type": "color",
524
+ "$description": "Linha",
525
+ "$extensions": {
526
+ "com.pswex.css": "--line",
527
+ "com.pswex.grupo": "tema/linha",
528
+ "com.figma.scopes": [
529
+ "STROKE_COLOR"
530
+ ],
531
+ "com.pswex.escuro": "#2C3947"
532
+ }
533
+ },
534
+ "line-300": {
535
+ "$value": "#9CA7B4",
536
+ "$type": "color",
537
+ "$description": "Linha 300",
538
+ "$extensions": {
539
+ "com.pswex.css": "--line-300",
540
+ "com.pswex.grupo": "tema/linha",
541
+ "com.figma.scopes": [
542
+ "STROKE_COLOR"
543
+ ],
544
+ "com.pswex.escuro": "#44566A"
545
+ }
546
+ }
547
+ }
548
+ },
549
+ "sobre-cor": {
550
+ "$description": "Texto e borda em cima de cor de marca, nao inverte",
551
+ "texto": {
552
+ "lime-ink": {
553
+ "$value": "#232F3E",
554
+ "$type": "color",
555
+ "$description": "Sobre lime e mint",
556
+ "$extensions": {
557
+ "com.pswex.css": "--lime-ink",
558
+ "com.pswex.grupo": "sobre-cor/texto",
559
+ "com.figma.scopes": [
560
+ "TEXT_FILL"
561
+ ]
562
+ }
563
+ },
564
+ "on-bright": {
565
+ "$value": "#232F3E",
566
+ "$type": "color",
567
+ "$description": "Sobre cor clara da marca",
568
+ "$extensions": {
569
+ "com.pswex.css": "--on-bright",
570
+ "com.pswex.grupo": "sobre-cor/texto",
571
+ "com.figma.scopes": [
572
+ "TEXT_FILL"
573
+ ]
574
+ }
575
+ },
576
+ "ondark-200": {
577
+ "$value": "#AFBCCC",
578
+ "$type": "color",
579
+ "$description": "Apoio sobre fundo escuro",
580
+ "$extensions": {
581
+ "com.pswex.css": "--ondark-200",
582
+ "com.pswex.grupo": "sobre-cor/texto",
583
+ "com.figma.scopes": [
584
+ "TEXT_FILL"
585
+ ]
586
+ }
587
+ },
588
+ "ondark-400": {
589
+ "$value": "#94A6BC",
590
+ "$type": "color",
591
+ "$description": "Texto menor sobre fundo escuro",
592
+ "$extensions": {
593
+ "com.pswex.css": "--ondark-400",
594
+ "com.pswex.grupo": "sobre-cor/texto",
595
+ "com.figma.scopes": [
596
+ "TEXT_FILL"
597
+ ]
598
+ }
599
+ },
600
+ "red-ondark": {
601
+ "$value": "#F4808F",
602
+ "$type": "color",
603
+ "$description": "Vermelho sobre escuro",
604
+ "$extensions": {
605
+ "com.pswex.css": "--red-ondark",
606
+ "com.pswex.grupo": "sobre-cor/texto",
607
+ "com.figma.scopes": [
608
+ "TEXT_FILL"
609
+ ]
610
+ }
611
+ }
612
+ },
613
+ "linha": {
614
+ "line-inv": {
615
+ "$value": "rgba(196,219,241,.24)",
616
+ "$type": "color",
617
+ "$description": "Linha sobre fundo escuro",
618
+ "$extensions": {
619
+ "com.pswex.css": "--line-inv",
620
+ "com.pswex.grupo": "sobre-cor/linha",
621
+ "com.figma.scopes": [
622
+ "STROKE_COLOR"
623
+ ]
624
+ }
625
+ }
626
+ }
627
+ },
628
+ "layout": {
629
+ "$description": "Medida, raio e sombra",
630
+ "medida": {
631
+ "shell": {
632
+ "$value": "1200px",
633
+ "$type": "dimension",
634
+ "$description": "Largura máxima do conteúdo",
635
+ "$extensions": {
636
+ "com.pswex.css": "--shell",
637
+ "com.pswex.grupo": "layout/medida",
638
+ "com.figma.scopes": [
639
+ "WIDTH_HEIGHT",
640
+ "GAP"
641
+ ]
642
+ }
643
+ }
644
+ },
645
+ "raio": {
646
+ "r": {
647
+ "$value": "14px",
648
+ "$type": "dimension",
649
+ "$description": "Raio padrão",
650
+ "$extensions": {
651
+ "com.pswex.css": "--r",
652
+ "com.pswex.grupo": "layout/raio",
653
+ "com.figma.scopes": [
654
+ "CORNER_RADIUS"
655
+ ]
656
+ }
657
+ },
658
+ "r-lg": {
659
+ "$value": "22px",
660
+ "$type": "dimension",
661
+ "$description": "Raio grande",
662
+ "$extensions": {
663
+ "com.pswex.css": "--r-lg",
664
+ "com.pswex.grupo": "layout/raio",
665
+ "com.figma.scopes": [
666
+ "CORNER_RADIUS"
667
+ ]
668
+ }
669
+ }
670
+ },
671
+ "sombra": {
672
+ "shadow": {
673
+ "$value": "0 1px 3px rgba(35,47,62,.08),0 6px 14px -8px rgba(35,47,62,.12)",
674
+ "$type": "shadow",
675
+ "$description": "Sombra padrão",
676
+ "$extensions": {
677
+ "com.pswex.css": "--shadow",
678
+ "com.pswex.grupo": "layout/sombra",
679
+ "com.figma.scopes": []
680
+ }
681
+ },
682
+ "shadow-lg": {
683
+ "$value": "0 2px 6px rgba(35,47,62,.10),0 14px 28px -14px rgba(35,47,62,.18)",
684
+ "$type": "shadow",
685
+ "$description": "Sombra elevada",
686
+ "$extensions": {
687
+ "com.pswex.css": "--shadow-lg",
688
+ "com.pswex.grupo": "layout/sombra",
689
+ "com.figma.scopes": []
690
+ }
691
+ }
692
+ }
693
+ }
694
+ }