@wizco/fenixds-core 1.5.3 → 1.6.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.
- package/package.json +1 -1
- package/styles/core.css +124 -0
- package/styles/scss/forms.scss +191 -8
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@wizco/fenixds-core",
|
|
3
3
|
"description": "Fenix design system é um produto da Wiz com ativos de design e código de front-end para ajudar as equipes na criação dos seus produtos.",
|
|
4
|
-
"version": "1.
|
|
4
|
+
"version": "1.6.0",
|
|
5
5
|
"private": false,
|
|
6
6
|
"sideEffects": false,
|
|
7
7
|
"author": "Raul Melo Fernandez",
|
package/styles/core.css
CHANGED
|
@@ -1270,6 +1270,130 @@ label.form-check, .form-check {
|
|
|
1270
1270
|
--wco-checkbox-default-color-iconunchecked: var(--wco-color-danger-600);
|
|
1271
1271
|
--wco-checkbox-default-color-iconchecked: var(--wco-color-danger-600); }
|
|
1272
1272
|
|
|
1273
|
+
.wco-form-switch {
|
|
1274
|
+
--wco-switch-color-label: var(--wco-switch-custom-color-label, var(--wco-color-neutral-700));
|
|
1275
|
+
--wco-switch-color-bg: var(--wco-switch-custom-color-bg, var(--wco-color-neutral-50));
|
|
1276
|
+
--wco-switch-color-border-color: var(--wco-switch-custom-color-border, var(--wco-color-neutral-600));
|
|
1277
|
+
--wco-switch-color-bullet: var(--wco-switch-custom-color-bullet, var(--wco-color-neutral-600));
|
|
1278
|
+
--wco-switch-color-icon: var(--wco-switch-custom-color-icon, var(--wco-color-neutral-50));
|
|
1279
|
+
--wco-switch-general-spacing: 8px;
|
|
1280
|
+
--wco-switch-radius: calc(var(--wco-radius-md) * 2);
|
|
1281
|
+
--wco-switch-size-max-w: 48px;
|
|
1282
|
+
--wco-switch-size-max-h: 28px;
|
|
1283
|
+
--wco-switch-size-bullet: 18px;
|
|
1284
|
+
--wco-switch-checked-spaceInner: 3px;
|
|
1285
|
+
display: flex;
|
|
1286
|
+
align-items: center;
|
|
1287
|
+
gap: var(--wco-spacing-nano); }
|
|
1288
|
+
.wco-form-switch input[type="checkbox"] {
|
|
1289
|
+
display: none; }
|
|
1290
|
+
.wco-form-switch span.label {
|
|
1291
|
+
color: var(--wco-switch-color-label);
|
|
1292
|
+
font-size: var(--wco-font-size-xs);
|
|
1293
|
+
font-family: var(--wco-font-family);
|
|
1294
|
+
font-weight: 400;
|
|
1295
|
+
letter-spacing: 0.4px; }
|
|
1296
|
+
.wco-form-switch span.toggle {
|
|
1297
|
+
display: inline-flex;
|
|
1298
|
+
min-width: 40px;
|
|
1299
|
+
align-items: center;
|
|
1300
|
+
position: relative;
|
|
1301
|
+
z-index: 1;
|
|
1302
|
+
border-radius: var(--wco-switch-radius);
|
|
1303
|
+
width: calc(var(--wco-switch-size-max-w, 48px) + 4px);
|
|
1304
|
+
background-color: var(--wco-switch-color-bg, #f1f1f1);
|
|
1305
|
+
height: var(--wco-switch-size-max-h, 28px);
|
|
1306
|
+
border: 2px solid var(--wco-switch-color-border-color, #8d9399);
|
|
1307
|
+
padding: var(--wco-switch-checked-spaceInner, 3px);
|
|
1308
|
+
transform-origin: center center;
|
|
1309
|
+
perspective: 1000px; }
|
|
1310
|
+
.wco-form-switch span.toggle:before, .wco-form-switch span.toggle:after, .wco-form-switch span.toggle i {
|
|
1311
|
+
position: absolute;
|
|
1312
|
+
top: 50%;
|
|
1313
|
+
transform: translateY(-50%);
|
|
1314
|
+
transition: all 300ms ease-in-out;
|
|
1315
|
+
display: flex;
|
|
1316
|
+
align-items: center;
|
|
1317
|
+
justify-content: center;
|
|
1318
|
+
pointer-events: none;
|
|
1319
|
+
user-select: none;
|
|
1320
|
+
left: var(--wco-switch-checked-position, 3px);
|
|
1321
|
+
font-size: var(--wco-font-size-xxxs);
|
|
1322
|
+
width: var(--wco-switch-size-bullet, 24px);
|
|
1323
|
+
height: var(--wco-switch-size-bullet, 24px);
|
|
1324
|
+
color: var(--wco-switch-color-icon, #8d9399);
|
|
1325
|
+
line-height: var(--wco-switch-size-bullet, 24px); }
|
|
1326
|
+
.wco-form-switch span.toggle:before, .wco-form-switch span.toggle:after {
|
|
1327
|
+
content: '';
|
|
1328
|
+
border-radius: 100%;
|
|
1329
|
+
background-color: var(--wco-switch-color-bullet, #8d9399);
|
|
1330
|
+
color: var(--wco-switch-color-bullet, #8d9399);
|
|
1331
|
+
z-index: -1; }
|
|
1332
|
+
.wco-form-switch:has(input[type="checkbox"]:checked) {
|
|
1333
|
+
--wco-switch-custom-color-bg: var(--wco-color-primary-600);
|
|
1334
|
+
--wco-switch-custom-color-border: var(--wco-color-primary-600);
|
|
1335
|
+
--wco-switch-custom-color-bullet: var(--wco-color-neutral-50);
|
|
1336
|
+
--wco-switch-custom-color-icon: var(--wco-color-primary-600);
|
|
1337
|
+
--wco-switch-checked-position: calc(100% - var(--wco-switch-size-bullet, 24px) - var(--wco-switch-checked-spaceInner, 3px)); }
|
|
1338
|
+
.wco-form-switch:has(input[type="checkbox"]:not(:disabled)) {
|
|
1339
|
+
cursor: pointer; }
|
|
1340
|
+
.wco-form-switch:has(input[type="checkbox"]:not(:disabled)):has(input[type="checkbox"]:hover):has(input[type="checkbox"]:checked) span.toggle::before {
|
|
1341
|
+
background-color: var(--wco-switch-custom-color-shadow, var(--wco-color-primary-500)); }
|
|
1342
|
+
.wco-form-switch:has(input[type="checkbox"]:not(:disabled)):has(input[type="checkbox"]:hover) span.toggle:before {
|
|
1343
|
+
transform: translateY(-50%) scale(1.8);
|
|
1344
|
+
opacity: 0.3; }
|
|
1345
|
+
.wco-form-switch.form--error {
|
|
1346
|
+
--wco-switch-custom-color-border: var(--wco-color-danger-600);
|
|
1347
|
+
--wco-switch-custom-color-bullet: var(--wco-color-danger-600);
|
|
1348
|
+
--wco-switch-custom-color-icon: var(--wco-color-danger-50);
|
|
1349
|
+
--wco-switch-custom-color-label: var(--wco-color-danger-600); }
|
|
1350
|
+
.wco-form-switch.form--error:has(input[type="checkbox"]:checked) {
|
|
1351
|
+
--wco-switch-custom-color-border: var(--wco-color-danger-600);
|
|
1352
|
+
--wco-switch-custom-color-bullet: var(--wco-color-danger-600);
|
|
1353
|
+
--wco-switch-custom-color-icon: var(--wco-color-danger-50);
|
|
1354
|
+
--wco-switch-custom-color-bg: var(--wco-color-danger-50); }
|
|
1355
|
+
.wco-form-switch.switch-secondary:has(input[type="checkbox"]:checked) {
|
|
1356
|
+
--wco-switch-custom-color-shadow: var(--wco-color-secondary-500);
|
|
1357
|
+
--wco-switch-custom-color-border: var(--wco-color-secondary-600);
|
|
1358
|
+
--wco-switch-custom-color-bullet: var(--wco-color-secondary-50);
|
|
1359
|
+
--wco-switch-custom-color-icon: var(--wco-color-secondary-600);
|
|
1360
|
+
--wco-switch-custom-color-bg: var(--wco-color-secondary-600); }
|
|
1361
|
+
.wco-form-switch.switch-success:has(input[type="checkbox"]:checked) {
|
|
1362
|
+
--wco-switch-custom-color-shadow: var(--wco-color-success-500);
|
|
1363
|
+
--wco-switch-custom-color-border: var(--wco-color-success-600);
|
|
1364
|
+
--wco-switch-custom-color-bullet: var(--wco-color-success-50);
|
|
1365
|
+
--wco-switch-custom-color-icon: var(--wco-color-success-600);
|
|
1366
|
+
--wco-switch-custom-color-bg: var(--wco-color-success-600); }
|
|
1367
|
+
.wco-form-switch.switch-info:has(input[type="checkbox"]:checked) {
|
|
1368
|
+
--wco-switch-custom-color-bg: var(--wco-color-info-500);
|
|
1369
|
+
--wco-switch-custom-color-shadow: var(--wco-color-info-500);
|
|
1370
|
+
--wco-switch-custom-color-border: var(--wco-color-info-600);
|
|
1371
|
+
--wco-switch-custom-color-bullet: var(--wco-color-info-50);
|
|
1372
|
+
--wco-switch-custom-color-icon: var(--wco-color-info-600);
|
|
1373
|
+
--wco-switch-custom-color-bg: var(--wco-color-info-600); }
|
|
1374
|
+
.wco-form-switch.switch-danger:has(input[type="checkbox"]:checked) {
|
|
1375
|
+
--wco-switch-custom-color-bg: var(--wco-color-danger-500);
|
|
1376
|
+
--wco-switch-custom-color-shadow: var(--wco-color-danger-500);
|
|
1377
|
+
--wco-switch-custom-color-border: var(--wco-color-danger-600);
|
|
1378
|
+
--wco-switch-custom-color-bullet: var(--wco-color-danger-50);
|
|
1379
|
+
--wco-switch-custom-color-icon: var(--wco-color-danger-600);
|
|
1380
|
+
--wco-switch-custom-color-bg: var(--wco-color-danger-600); }
|
|
1381
|
+
.wco-form-switch.switch-warning:has(input[type="checkbox"]:checked) {
|
|
1382
|
+
--wco-switch-custom-color-shadow: var(--wco-color-warning-500);
|
|
1383
|
+
--wco-switch-custom-color-border: var(--wco-color-warning-600);
|
|
1384
|
+
--wco-switch-custom-color-bullet: var(--wco-color-warning-50);
|
|
1385
|
+
--wco-switch-custom-color-icon: var(--wco-color-warning-600);
|
|
1386
|
+
--wco-switch-custom-color-bg: var(--wco-color-warning-600); }
|
|
1387
|
+
.wco-form-switch:has(input[type="checkbox"]:disabled), .wco-form-switch.wco-form-disabled {
|
|
1388
|
+
opacity: 0.3; }
|
|
1389
|
+
.wco-form-switch:has(input[type="checkbox"]:disabled) span.toggle, .wco-form-switch.wco-form-disabled span.toggle {
|
|
1390
|
+
filter: grayscale(1); }
|
|
1391
|
+
.wco-form-switch.form--readonly {
|
|
1392
|
+
pointer-events: none;
|
|
1393
|
+
user-select: none; }
|
|
1394
|
+
.wco-form-switch.form--readonly .label {
|
|
1395
|
+
color: var(--wco-color-neutral-900); }
|
|
1396
|
+
|
|
1273
1397
|
.wco-form-upload {
|
|
1274
1398
|
--wco-attachment-default-color-border: var(--wco-color-neutral-500);
|
|
1275
1399
|
--wco-attachment-default-color-bg: var(--wco-color-neutral-50);
|
package/styles/scss/forms.scss
CHANGED
|
@@ -426,9 +426,9 @@ label.form-radio, .form-radio
|
|
|
426
426
|
}
|
|
427
427
|
}
|
|
428
428
|
|
|
429
|
-
|
|
429
|
+
///////////////
|
|
430
430
|
/// Checkbox
|
|
431
|
-
|
|
431
|
+
///////////////
|
|
432
432
|
label.wco-form-check, .wco-form-check,
|
|
433
433
|
label.form-check, .form-check {
|
|
434
434
|
--wco-checkbox-default-color-label: var(--wco-color-neutral-900);
|
|
@@ -577,12 +577,195 @@ label.form-check, .form-check {
|
|
|
577
577
|
input[type="checkbox"]:checked:disabled ~ .label {
|
|
578
578
|
color: var(--wco-checkbox-disabled-color-label);
|
|
579
579
|
}
|
|
580
|
-
|
|
581
|
-
|
|
582
|
-
|
|
583
|
-
|
|
584
|
-
|
|
585
|
-
|
|
580
|
+
&.form--error,
|
|
581
|
+
&.form-field--error {
|
|
582
|
+
--wco-checkbox-default-color-label: var(--wco-color-danger-900);
|
|
583
|
+
--wco-checkbox-default-color-iconunchecked: var(--wco-color-danger-600);
|
|
584
|
+
--wco-checkbox-default-color-iconchecked: var(--wco-color-danger-600);
|
|
585
|
+
}
|
|
586
|
+
}
|
|
587
|
+
|
|
588
|
+
///////////////
|
|
589
|
+
/// Switch
|
|
590
|
+
///////////////
|
|
591
|
+
.wco-form-switch {
|
|
592
|
+
--wco-switch-color-label: var(--wco-switch-custom-color-label, var(--wco-color-neutral-700)); // cor do label
|
|
593
|
+
--wco-switch-color-bg: var(--wco-switch-custom-color-bg, var(--wco-color-neutral-50)); // background do switch
|
|
594
|
+
--wco-switch-color-border-color: var(--wco-switch-custom-color-border, var(--wco-color-neutral-600)); // background do switch
|
|
595
|
+
--wco-switch-color-bullet: var(--wco-switch-custom-color-bullet, var(--wco-color-neutral-600)); // cor do circulo
|
|
596
|
+
--wco-switch-color-icon: var(--wco-switch-custom-color-icon, var(--wco-color-neutral-50));
|
|
597
|
+
--wco-switch-general-spacing: 8px;
|
|
598
|
+
--wco-switch-radius: calc(var(--wco-radius-md) * 2);
|
|
599
|
+
--wco-switch-size-max-w: 48px;
|
|
600
|
+
--wco-switch-size-max-h: 28px;
|
|
601
|
+
--wco-switch-size-bullet: 18px;
|
|
602
|
+
--wco-switch-checked-spaceInner: 3px;
|
|
603
|
+
display: flex;
|
|
604
|
+
align-items: center;
|
|
605
|
+
gap: var(--wco-spacing-nano);
|
|
606
|
+
// input oculto
|
|
607
|
+
input[type="checkbox"] {
|
|
608
|
+
display: none;
|
|
609
|
+
}
|
|
610
|
+
|
|
611
|
+
// text de apoio
|
|
612
|
+
span.label {
|
|
613
|
+
color: var(--wco-switch-color-label);
|
|
614
|
+
font-size: var(--wco-font-size-xs);
|
|
615
|
+
font-family: var(--wco-font-family);
|
|
616
|
+
font-weight: 400;
|
|
617
|
+
letter-spacing: 0.4px;
|
|
618
|
+
}
|
|
619
|
+
// area do sinalizador
|
|
620
|
+
span.toggle {
|
|
621
|
+
display: inline-flex;
|
|
622
|
+
min-width: 40px;
|
|
623
|
+
align-items: center;
|
|
624
|
+
position: relative;
|
|
625
|
+
z-index: 1;
|
|
626
|
+
// tokens
|
|
627
|
+
border-radius: var(--wco-switch-radius);
|
|
628
|
+
width: calc(var(--wco-switch-size-max-w, 48px) + 4px);
|
|
629
|
+
background-color: var(--wco-switch-color-bg, #f1f1f1);
|
|
630
|
+
height: var(--wco-switch-size-max-h, 28px);
|
|
631
|
+
border: 2px solid var(--wco-switch-color-border-color, #8d9399);
|
|
632
|
+
padding: var(--wco-switch-checked-spaceInner, 3px);
|
|
633
|
+
transform-origin: center center;
|
|
634
|
+
perspective: 1000px;
|
|
635
|
+
// circulo e ícone
|
|
636
|
+
&:before, &:after, i {
|
|
637
|
+
position: absolute;
|
|
638
|
+
top: 50%;
|
|
639
|
+
transform: translateY(-50%);
|
|
640
|
+
transition: all 300ms ease-in-out;
|
|
641
|
+
display: flex;
|
|
642
|
+
align-items: center;
|
|
643
|
+
justify-content: center;
|
|
644
|
+
pointer-events: none;
|
|
645
|
+
user-select: none;
|
|
646
|
+
// tokens
|
|
647
|
+
left: var(--wco-switch-checked-position, 3px);
|
|
648
|
+
font-size: var(--wco-font-size-xxxs);
|
|
649
|
+
width: var(--wco-switch-size-bullet, 24px);
|
|
650
|
+
height: var(--wco-switch-size-bullet, 24px);
|
|
651
|
+
color: var(--wco-switch-color-icon, #8d9399);
|
|
652
|
+
line-height: var(--wco-switch-size-bullet, 24px);
|
|
653
|
+
}
|
|
654
|
+
&:before, &:after {
|
|
655
|
+
content: '';
|
|
656
|
+
border-radius: 100%;
|
|
657
|
+
background-color: var(--wco-switch-color-bullet, #8d9399);
|
|
658
|
+
color: var(--wco-switch-color-bullet, #8d9399);
|
|
659
|
+
z-index: -1;
|
|
660
|
+
}
|
|
661
|
+
}
|
|
662
|
+
|
|
663
|
+
&:has(input[type="checkbox"]:checked) {
|
|
664
|
+
--wco-switch-custom-color-bg: var(--wco-color-primary-600);
|
|
665
|
+
--wco-switch-custom-color-border: var(--wco-color-primary-600);
|
|
666
|
+
--wco-switch-custom-color-bullet: var(--wco-color-neutral-50);
|
|
667
|
+
--wco-switch-custom-color-icon: var(--wco-color-primary-600);
|
|
668
|
+
--wco-switch-checked-position: calc(100% - var(--wco-switch-size-bullet, 24px) - var(--wco-switch-checked-spaceInner, 3px));
|
|
669
|
+
}
|
|
670
|
+
|
|
671
|
+
// SE O ESTADO NÃO ESTIVER DESABILITADO
|
|
672
|
+
&:has(input[type="checkbox"]:not(:disabled)) {
|
|
673
|
+
// Checked true
|
|
674
|
+
cursor: pointer;
|
|
675
|
+
&:has(input[type="checkbox"]:hover) {
|
|
676
|
+
// sombra do checkbox é diferente
|
|
677
|
+
&:has(input[type="checkbox"]:checked) span.toggle {
|
|
678
|
+
&::before {
|
|
679
|
+
background-color: var(--wco-switch-custom-color-shadow, var(--wco-color-primary-500));
|
|
680
|
+
}
|
|
681
|
+
}
|
|
682
|
+
// sombra hover
|
|
683
|
+
span.toggle {
|
|
684
|
+
&:before {
|
|
685
|
+
transform: translateY(-50%) scale(1.8);
|
|
686
|
+
opacity: 0.3;
|
|
687
|
+
}
|
|
688
|
+
}
|
|
689
|
+
}
|
|
690
|
+
}
|
|
691
|
+
|
|
692
|
+
// Themas
|
|
693
|
+
&.form--error {
|
|
694
|
+
--wco-switch-custom-color-border: var(--wco-color-danger-600);
|
|
695
|
+
--wco-switch-custom-color-bullet: var(--wco-color-danger-600);
|
|
696
|
+
--wco-switch-custom-color-icon: var(--wco-color-danger-50);
|
|
697
|
+
--wco-switch-custom-color-label: var(--wco-color-danger-600);
|
|
698
|
+
&:has(input[type="checkbox"]:checked) {
|
|
699
|
+
--wco-switch-custom-color-border: var(--wco-color-danger-600);
|
|
700
|
+
--wco-switch-custom-color-bullet: var(--wco-color-danger-600);
|
|
701
|
+
--wco-switch-custom-color-icon: var(--wco-color-danger-50);
|
|
702
|
+
--wco-switch-custom-color-bg: var(--wco-color-danger-50);
|
|
703
|
+
}
|
|
704
|
+
}
|
|
705
|
+
&.switch-secondary {
|
|
706
|
+
&:has(input[type="checkbox"]:checked) {
|
|
707
|
+
--wco-switch-custom-color-shadow: var(--wco-color-secondary-500);
|
|
708
|
+
--wco-switch-custom-color-border: var(--wco-color-secondary-600);
|
|
709
|
+
--wco-switch-custom-color-bullet: var(--wco-color-secondary-50);
|
|
710
|
+
--wco-switch-custom-color-icon: var(--wco-color-secondary-600);
|
|
711
|
+
--wco-switch-custom-color-bg: var(--wco-color-secondary-600);
|
|
712
|
+
}
|
|
713
|
+
}
|
|
714
|
+
&.switch-success {
|
|
715
|
+
&:has(input[type="checkbox"]:checked) {
|
|
716
|
+
--wco-switch-custom-color-shadow: var(--wco-color-success-500);
|
|
717
|
+
--wco-switch-custom-color-border: var(--wco-color-success-600);
|
|
718
|
+
--wco-switch-custom-color-bullet: var(--wco-color-success-50);
|
|
719
|
+
--wco-switch-custom-color-icon: var(--wco-color-success-600);
|
|
720
|
+
--wco-switch-custom-color-bg: var(--wco-color-success-600);
|
|
721
|
+
}
|
|
722
|
+
}
|
|
723
|
+
&.switch-info {
|
|
724
|
+
&:has(input[type="checkbox"]:checked) {
|
|
725
|
+
--wco-switch-custom-color-bg: var(--wco-color-info-500);
|
|
726
|
+
--wco-switch-custom-color-shadow: var(--wco-color-info-500);
|
|
727
|
+
--wco-switch-custom-color-border: var(--wco-color-info-600);
|
|
728
|
+
--wco-switch-custom-color-bullet: var(--wco-color-info-50);
|
|
729
|
+
--wco-switch-custom-color-icon: var(--wco-color-info-600);
|
|
730
|
+
--wco-switch-custom-color-bg: var(--wco-color-info-600);
|
|
731
|
+
}
|
|
732
|
+
}
|
|
733
|
+
&.switch-danger {
|
|
734
|
+
&:has(input[type="checkbox"]:checked) {
|
|
735
|
+
--wco-switch-custom-color-bg: var(--wco-color-danger-500);
|
|
736
|
+
--wco-switch-custom-color-shadow: var(--wco-color-danger-500);
|
|
737
|
+
--wco-switch-custom-color-border: var(--wco-color-danger-600);
|
|
738
|
+
--wco-switch-custom-color-bullet: var(--wco-color-danger-50);
|
|
739
|
+
--wco-switch-custom-color-icon: var(--wco-color-danger-600);
|
|
740
|
+
--wco-switch-custom-color-bg: var(--wco-color-danger-600);
|
|
741
|
+
}
|
|
742
|
+
}
|
|
743
|
+
&.switch-warning {
|
|
744
|
+
&:has(input[type="checkbox"]:checked) {
|
|
745
|
+
--wco-switch-custom-color-shadow: var(--wco-color-warning-500);
|
|
746
|
+
--wco-switch-custom-color-border: var(--wco-color-warning-600);
|
|
747
|
+
--wco-switch-custom-color-bullet: var(--wco-color-warning-50);
|
|
748
|
+
--wco-switch-custom-color-icon: var(--wco-color-warning-600);
|
|
749
|
+
--wco-switch-custom-color-bg: var(--wco-color-warning-600);
|
|
750
|
+
}
|
|
751
|
+
}
|
|
752
|
+
|
|
753
|
+
// SE O ESTADO ESTIVER DESABILITADO
|
|
754
|
+
&:has(input[type="checkbox"]:disabled),
|
|
755
|
+
&.wco-form-disabled {
|
|
756
|
+
opacity: 0.3;
|
|
757
|
+
span.toggle {
|
|
758
|
+
filter: grayscale(1);
|
|
759
|
+
}
|
|
760
|
+
}
|
|
761
|
+
// SE O ESTADO ESTIVER NO MODO LEITURA
|
|
762
|
+
&.form--readonly {
|
|
763
|
+
pointer-events: none;
|
|
764
|
+
user-select: none;
|
|
765
|
+
.label {
|
|
766
|
+
color: var(--wco-color-neutral-900);
|
|
767
|
+
}
|
|
768
|
+
}
|
|
586
769
|
}
|
|
587
770
|
|
|
588
771
|
|