@unifiedsoftware/styles 2.0.0-alpha.1 → 2.0.0-alpha.3

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 (14) hide show
  1. package/css/fci.css +302 -127
  2. package/css/fci.min.css +1 -1
  3. package/css/styles.css +81 -23
  4. package/css/styles.min.css +1 -1
  5. package/package.json +1 -1
  6. package/scss/_utilities.scss +2 -8
  7. package/scss/components/_card.scss +92 -21
  8. package/scss/components/_input.scss +3 -3
  9. package/scss/components/_tabs.scss +1 -1
  10. package/scss/themes/fci/_tokens.scss +8 -5
  11. package/scss/themes/fci/components/_button.scss +135 -37
  12. package/scss/themes/fci/components/_card.scss +140 -95
  13. package/scss/themes/fci/components/_icon.scss +1 -1
  14. package/scss/themes/fci/components/_tabs.scss +99 -1
package/css/fci.css CHANGED
@@ -252,7 +252,7 @@
252
252
  }
253
253
 
254
254
  .us-theme-fci .us-icon {
255
- --us-icon-font-size: 1.5rem;
255
+ --us-icon-font-size-default: 1.5rem;
256
256
  --us-icon-color: inherit;
257
257
  }
258
258
  .us-theme-fci .us-icon--xs {
@@ -493,56 +493,67 @@ html {
493
493
  .us-theme-fci .us-button--xs {
494
494
  --us-button-height: 24px;
495
495
  --us-button-padding-y: 0;
496
- --us-button-padding-x: 0.625rem;
496
+ --us-button-padding-x: 0.75rem;
497
497
  --us-button-font-size: 0.75rem;
498
498
  --us-button-border-radius: 6px;
499
499
  --us-button-gap: 0.25rem;
500
500
  }
501
501
  .us-theme-fci .us-button--xs .us-icon {
502
- --us-icon-font-size: 0.875rem;
502
+ --us-icon-font-size: 0.75rem;
503
503
  }
504
504
  .us-theme-fci .us-button--sm {
505
505
  --us-button-height: 28px;
506
506
  --us-button-padding-y: 0;
507
- --us-button-padding-x: 0.75rem;
507
+ --us-button-padding-x: 0.875rem;
508
508
  --us-button-font-size: 0.75rem;
509
509
  --us-button-border-radius: 6px;
510
510
  --us-button-gap: 0.25rem;
511
511
  }
512
512
  .us-theme-fci .us-button--sm .us-icon {
513
- --us-icon-font-size: 1rem;
513
+ --us-icon-font-size: 0.875rem;
514
514
  }
515
515
  .us-theme-fci .us-button--md {
516
- --us-button-height: 36px;
516
+ --us-button-height: 32px;
517
517
  --us-button-padding-y: 0;
518
518
  --us-button-padding-x: 1rem;
519
519
  --us-button-font-size: 0.875rem;
520
- --us-button-border-radius: 8px;
520
+ --us-button-border-radius: 6px;
521
521
  --us-button-gap: 0.375rem;
522
522
  }
523
523
  .us-theme-fci .us-button--md .us-icon {
524
- --us-icon-font-size: 1.125rem;
524
+ --us-icon-font-size: 1rem;
525
525
  }
526
526
  .us-theme-fci .us-button--lg {
527
- --us-button-height: 36px;
527
+ --us-button-height: 40px;
528
528
  --us-button-padding-y: 0;
529
- --us-button-padding-x: 1rem;
530
- --us-button-font-size: 1rem;
531
- --us-button-border-radius: 6px;
529
+ --us-button-padding-x: 1.25rem;
530
+ --us-button-font-size: 0.875rem;
531
+ --us-button-border-radius: 8px;
532
532
  --us-button-gap: 0.5rem;
533
533
  }
534
534
  .us-theme-fci .us-button--lg .us-icon {
535
- --us-icon-font-size: 1.25rem;
535
+ --us-icon-font-size: 1.125rem;
536
536
  }
537
537
  .us-theme-fci .us-button--xl {
538
- --us-button-height: 40px;
538
+ --us-button-height: 48px;
539
539
  --us-button-padding-y: 0;
540
- --us-button-padding-x: 1.125rem;
541
- --us-button-font-size: 1.125rem;
542
- --us-button-border-radius: 6px;
540
+ --us-button-padding-x: 1.25rem;
541
+ --us-button-font-size: 1rem;
542
+ --us-button-border-radius: 8px;
543
543
  --us-button-gap: 0.5rem;
544
544
  }
545
545
  .us-theme-fci .us-button--xl .us-icon {
546
+ --us-icon-font-size: 1.25rem;
547
+ }
548
+ .us-theme-fci .us-button--xxl {
549
+ --us-button-height: 56px;
550
+ --us-button-padding-y: 0;
551
+ --us-button-padding-x: 1.75rem;
552
+ --us-button-font-size: 1.125rem;
553
+ --us-button-border-radius: 10px;
554
+ --us-button-gap: 0.75rem;
555
+ }
556
+ .us-theme-fci .us-button--xxl .us-icon {
546
557
  --us-icon-font-size: 1.5rem;
547
558
  }
548
559
  .us-theme-fci .us-button--filled {
@@ -568,18 +579,18 @@ html {
568
579
  .us-theme-fci .us-button--outlined > .us-overlay {
569
580
  --us-overlay-color: inherit;
570
581
  --us-overlay-opacity: 0;
571
- --us-_hover-overlay-opacity: 0.12;
582
+ --us-_hover-overlay-opacity: 0.16;
572
583
  --us-_active-overlay-opacity: 0.24;
573
584
  --us-_focus-hover-overlay-opacity: 0.12;
574
585
  --us-_focus-active-overlay-opacity: 0.24;
575
586
  }
576
587
  .us-theme-fci .us-button--outlined > .us-outline {
577
- --us-outline-border-width: 2px;
588
+ --us-outline-border-width: 1px;
578
589
  --us-outline-border-color: currentColor;
579
590
  }
580
591
  .us-theme-fci .us-button--flat > .us-overlay {
581
592
  --us-overlay-color: inherit;
582
- --us-overlay-opacity: 0.12;
593
+ --us-overlay-opacity: 0.16;
583
594
  --us-_hover-overlay-opacity: 0.24;
584
595
  --us-_active-overlay-opacity: 0.32;
585
596
  --us-_focus-hover-overlay-opacity: 0.24;
@@ -592,7 +603,7 @@ html {
592
603
  .us-theme-fci .us-button--text > .us-overlay {
593
604
  --us-overlay-color: inherit;
594
605
  --us-overlay-opacity: 0;
595
- --us-_hover-overlay-opacity: 0.12;
606
+ --us-_hover-overlay-opacity: 0.16;
596
607
  --us-_active-overlay-opacity: 0.24;
597
608
  --us-_focus-hover-overlay-opacity: 0.12;
598
609
  --us-_focus-active-overlay-opacity: 0.24;
@@ -601,17 +612,23 @@ html {
601
612
  --us-outline-border-width: 1px;
602
613
  --us-outline-border-color: transparent;
603
614
  }
604
- .us-theme-fci .us-button--filled.us-button--inherit {
605
- --us-button-background: inherit;
615
+ .us-theme-fci .us-button--xs.us-button--icon-only .us-icon {
616
+ --us-icon-font-size: 0.875rem;
617
+ }
618
+ .us-theme-fci .us-button--sm.us-button--icon-only .us-icon {
619
+ --us-icon-font-size: 1rem;
606
620
  }
607
- .us-theme-fci .us-button--outlined.us-button--inherit {
608
- --us-button-color: inherit;
621
+ .us-theme-fci .us-button--md.us-button--icon-only .us-icon {
622
+ --us-icon-font-size: 1.25rem;
609
623
  }
610
- .us-theme-fci .us-button--flat.us-button--inherit {
611
- --us-button-color: inherit;
624
+ .us-theme-fci .us-button--lg.us-button--icon-only .us-icon {
625
+ --us-icon-font-size: 1.5rem;
612
626
  }
613
- .us-theme-fci .us-button--text.us-button--inherit {
614
- --us-button-color: inherit;
627
+ .us-theme-fci .us-button--xl.us-button--icon-only .us-icon {
628
+ --us-icon-font-size: 1.75rem;
629
+ }
630
+ .us-theme-fci .us-button--xxl.us-button--icon-only .us-icon {
631
+ --us-icon-font-size: 1.875rem;
615
632
  }
616
633
  .us-theme-fci .us-button--filled.us-button--primary {
617
634
  --us-button-background: var(--us-primary-color);
@@ -637,6 +654,18 @@ html {
637
654
  .us-theme-fci .us-button--text.us-button--secondary {
638
655
  --us-button-color: var(--us-secondary-color);
639
656
  }
657
+ .us-theme-fci .us-button--filled.us-button--secondary {
658
+ --us-button-color: var(--us-secondary-color);
659
+ --us-button-background: transparent;
660
+ }
661
+ .us-theme-fci .us-button--filled.us-button--secondary > .us-overlay {
662
+ --us-overlay-color: inherit;
663
+ --us-overlay-opacity: 0.16;
664
+ --us-_hover-overlay-opacity: 0.24;
665
+ --us-_active-overlay-opacity: 0.32;
666
+ --us-_focus-hover-overlay-opacity: 0.24;
667
+ --us-_focus-active-overlay-opacity: 0.32;
668
+ }
640
669
  .us-theme-fci .us-button--filled.us-button--success {
641
670
  --us-button-background: var(--us-success-color);
642
671
  }
@@ -649,6 +678,24 @@ html {
649
678
  .us-theme-fci .us-button--text.us-button--success {
650
679
  --us-button-color: var(--us-success-color);
651
680
  }
681
+ .us-theme-fci .us-button--outlined.us-button--success {
682
+ --us-button-color: var(--us-success-dark-color);
683
+ }
684
+ .us-theme-fci .us-button--outlined.us-button--success > .us-overlay {
685
+ --us-overlay-color: var(--us-success-color);
686
+ }
687
+ .us-theme-fci .us-button--flat.us-button--success {
688
+ --us-button-color: var(--us-success-dark-color);
689
+ }
690
+ .us-theme-fci .us-button--flat.us-button--success > .us-overlay {
691
+ --us-overlay-color: var(--us-success-color);
692
+ }
693
+ .us-theme-fci .us-button--text.us-button--success {
694
+ --us-button-color: var(--us-success-dark-color);
695
+ }
696
+ .us-theme-fci .us-button--text.us-button--success > .us-overlay {
697
+ --us-overlay-color: var(--us-success-color);
698
+ }
652
699
  .us-theme-fci .us-button--filled.us-button--info {
653
700
  --us-button-background: var(--us-info-color);
654
701
  }
@@ -661,6 +708,18 @@ html {
661
708
  .us-theme-fci .us-button--text.us-button--info {
662
709
  --us-button-color: var(--us-info-color);
663
710
  }
711
+ .us-theme-fci .us-button--flat.us-button--info {
712
+ --us-button-color: var(--us-info-dark-color);
713
+ }
714
+ .us-theme-fci .us-button--flat.us-button--info > .us-overlay {
715
+ --us-overlay-color: var(--us-info-color);
716
+ }
717
+ .us-theme-fci .us-button--text.us-button--info {
718
+ --us-button-color: var(--us-info-dark-color);
719
+ }
720
+ .us-theme-fci .us-button--text.us-button--info > .us-overlay {
721
+ --us-overlay-color: var(--us-info-color);
722
+ }
664
723
  .us-theme-fci .us-button--filled.us-button--warning {
665
724
  --us-button-background: var(--us-warning-color);
666
725
  }
@@ -673,6 +732,24 @@ html {
673
732
  .us-theme-fci .us-button--text.us-button--warning {
674
733
  --us-button-color: var(--us-warning-color);
675
734
  }
735
+ .us-theme-fci .us-button--outlined.us-button--warning {
736
+ --us-button-color: var(--us-warning-dark-color);
737
+ }
738
+ .us-theme-fci .us-button--outlined.us-button--warning > .us-overlay {
739
+ --us-overlay-color: var(--us-warning-color);
740
+ }
741
+ .us-theme-fci .us-button--flat.us-button--warning {
742
+ --us-button-color: var(--us-warning-dark-color);
743
+ }
744
+ .us-theme-fci .us-button--flat.us-button--warning > .us-overlay {
745
+ --us-overlay-color: var(--us-warning-color);
746
+ }
747
+ .us-theme-fci .us-button--text.us-button--warning {
748
+ --us-button-color: var(--us-warning-dark-color);
749
+ }
750
+ .us-theme-fci .us-button--text.us-button--warning > .us-overlay {
751
+ --us-overlay-color: var(--us-warning-color);
752
+ }
676
753
  .us-theme-fci .us-button--filled.us-button--danger {
677
754
  --us-button-background: var(--us-danger-color);
678
755
  }
@@ -1263,7 +1340,7 @@ html {
1263
1340
  .us-theme-fci .us-tabs--underlined .us-tab {
1264
1341
  --us-tab-indicator-color: var(--us-primary-action-color);
1265
1342
  --us-tab-indicator-height: 3px;
1266
- --us-tab-indicator-border-radius: 3px 3px 0px 0px;
1343
+ --us-tab-indicator-border-radius: 3px;
1267
1344
  --us-tab-border-radius: 0px;
1268
1345
  }
1269
1346
  .us-theme-fci .us-tabs--underlined .us-tab > .us-overlay {
@@ -1275,6 +1352,79 @@ html {
1275
1352
  .us-theme-fci .us-tabs--underlined .us-tab--selected {
1276
1353
  --us-tab-color: var(--us-primary-action-color);
1277
1354
  }
1355
+ .us-theme-fci .us-tabs--underlined .us-tab {
1356
+ --us-tab-indicator-color: var(--us-primary-action-color);
1357
+ --us-tab-indicator-height: 3px;
1358
+ --us-tab-indicator-border-radius: 3px;
1359
+ --us-tab-border-radius: 0px;
1360
+ }
1361
+ .us-theme-fci .us-tabs--underlined .us-tab > .us-surface {
1362
+ --us-surface-opacity: 0;
1363
+ }
1364
+ .us-theme-fci .us-tabs--underlined .us-tab > .us-overlay {
1365
+ --us-overlay-opacity: 0;
1366
+ --us-overlay-color: inherit;
1367
+ --us-_hover-overlay-opacity: 0.08;
1368
+ --us-_active-overlay-opacity: 0.12;
1369
+ }
1370
+ .us-theme-fci .us-tabs--underlined .us-tab--selected .us-theme-fci .us-tabs--underlined .us-tab__indicator {
1371
+ --us-tab-color: var(--us-primary-action-color);
1372
+ }
1373
+ .us-theme-fci .us-tabs--underlined .us-tab__indicator > .us-surface {
1374
+ --us-surface-opacity: 0;
1375
+ --us-surface-transition: none;
1376
+ }
1377
+ .us-theme-fci .us-tabs--underlined .us-tab__indicator > .us-overlay {
1378
+ --us-overlay-opacity: 0;
1379
+ --us-overlay-transition: none;
1380
+ }
1381
+ .us-theme-fci .us-tabs--underlined .us-tab--selected .us-tab__indicator > .us-surface {
1382
+ --us-surface-opacity: 1;
1383
+ }
1384
+ .us-theme-fci .us-tabs--underlined .us-tab--selected .us-tab__indicator > .us-overlay {
1385
+ --us-overlay-opacity: 0;
1386
+ }
1387
+ .us-theme-fci .us-tabs--pills {
1388
+ --us-tab-indicator-color: var(--us-primary-action-color);
1389
+ --us-tab-indicator-height: 3px;
1390
+ --us-tab-indicator-border-radius: 3px 3px 0px 0px;
1391
+ }
1392
+ .us-theme-fci .us-tabs--pills .us-tab {
1393
+ --us-tab-indicator-height: 100%;
1394
+ --us-tab-indicator-border-radius: 9999px;
1395
+ --us-tab-border-radius: 9999px;
1396
+ }
1397
+ .us-theme-fci .us-tabs--pills .us-tab > .us-surface {
1398
+ --us-surface-opacity: 0;
1399
+ }
1400
+ .us-theme-fci .us-tabs--pills .us-tab > .us-overlay {
1401
+ --us-overlay-opacity: 0;
1402
+ --us-overlay-color: inherit;
1403
+ --us-_hover-overlay-opacity: 0.08;
1404
+ --us-_active-overlay-opacity: 0.12;
1405
+ }
1406
+ .us-theme-fci .us-tabs--pills .us-tab--selected {
1407
+ --us-tab-color: var(--us-primary-action-color);
1408
+ }
1409
+ .us-theme-fci .us-tabs--pills .us-tab__indicator > .us-surface {
1410
+ --us-surface-opacity: 0;
1411
+ --us-surface-transition: none;
1412
+ }
1413
+ .us-theme-fci .us-tabs--pills .us-tab__indicator > .us-overlay {
1414
+ --us-overlay-opacity: 0;
1415
+ --us-overlay-color: inherit;
1416
+ --us-_hover-overlay-opacity: 0.08;
1417
+ --us-_active-overlay-opacity: 0.12;
1418
+ }
1419
+ .us-theme-fci .us-tabs--pills .us-tab--selected .us-tab__indicator > .us-surface {
1420
+ --us-surface-opacity: 0.12;
1421
+ }
1422
+ .us-theme-fci .us-tabs--pills .us-tab--selected .us-tab__indicator > .us-overlay {
1423
+ --us-overlay-opacity: 0;
1424
+ --us-overlay-color: inherit;
1425
+ --us-_hover-overlay-opacity: 0.08;
1426
+ --us-_active-overlay-opacity: 0.12;
1427
+ }
1278
1428
  .us-theme-fci .us-tab {
1279
1429
  --us-tab-color: var(--us-secondary-action-color);
1280
1430
  --us-tab-padding-y: 0px;
@@ -1285,12 +1435,23 @@ html {
1285
1435
  }
1286
1436
 
1287
1437
  .us-theme-fci .us-card {
1288
- --us-card-border-width: 0px;
1438
+ --us-card-border-width: 1px;
1289
1439
  --us-card-border-style: solid;
1290
1440
  --us-card-border-color: var(--us-border-color);
1291
- --us-card-border-radius: 10px;
1441
+ --us-card-border-radius: 8px;
1292
1442
  --us-card-box-shadow: rgb(255, 255, 255) 0px 0px 0px 0px, rgba(51, 65, 85, 0.1) 0px 0px 0px 1px,
1293
1443
  rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
1444
+ --us-card-title-font-weight: 700;
1445
+ --us-card-subtitle-font-weight: 400;
1446
+ --us-card-header-title-font-weight: 500;
1447
+ --us-card-header-title-color: var(--us-title-color);
1448
+ --us-card-header-subtitle-font-weight: 400;
1449
+ --us-card-header-subtitle-color: var(--us-subtitle-color);
1450
+ --us-card-body-color: var(--us-body-color);
1451
+ }
1452
+ .us-theme-fci .us-card > .us-surface {
1453
+ --us-surface-color: var(--us-white-color);
1454
+ --us-surface-opacity: 1;
1294
1455
  }
1295
1456
  .us-theme-fci .us-card > .us-overlay {
1296
1457
  --us-overlay-color: inherit;
@@ -1308,118 +1469,129 @@ html {
1308
1469
  --us-_hover-overlay-opacity: 0.12;
1309
1470
  --us-_active-overlay-opacity: 0.16;
1310
1471
  }
1311
- .us-theme-fci .us-card-header {
1312
- --us-card-header-border-color: var(--us-card-border-color);
1313
- --us-card-header-title-font-weight: 500;
1314
- --us-card-header-title-color: var(--us-title-color);
1315
- --us-card-header-subtitle-font-weight: 400;
1316
- --us-card-header-subtitle-color: var(--us-subtitle-color);
1317
- }
1318
- .us-theme-fci .us-card-body {
1319
- --us-card-body-color: var(--us-body-color);
1320
- }
1321
- .us-theme-fci .us-card-footer {
1322
- --us-card-footer-min-height: 48px;
1323
- --us-card-footer-padding-y: 0.5rem;
1324
- --us-card-footer-padding-x: 1rem;
1325
- --us-card-footer-border-color: rgba(9, 30, 66, 0.14);
1326
- }
1327
- .us-theme-fci .us-card--xs .us-card-header {
1328
- --us-card-header-min-height: 36px;
1329
- --us-card-header-padding-y: 0.685rem;
1330
- --us-card-header-padding-x: 1rem;
1331
- --us-card-header-padding-level: 1.25rem;
1332
- --us-card-header-font-size: 12px;
1333
- --us-card-header-gap: 1rem;
1472
+ .us-theme-fci .us-card--xs {
1473
+ --us-card-padding-y: 0.5rem;
1474
+ --us-card-padding-x: 0.75rem;
1475
+ --us-card-gap: 0.5rem;
1476
+ --us-card-header-min-height: 1.75rem;
1477
+ --us-card-header-gap: 0.5rem;
1478
+ --us-card-header-content-gap: 0.25rem;
1334
1479
  --us-card-header-title-font-size: 12px;
1335
- --us-card-header-title-line-height: 18px;
1480
+ --us-card-header-title-font-weight: 500;
1481
+ --us-card-header-title-line-height: 14px;
1336
1482
  --us-card-header-subtitle-font-size: 11px;
1483
+ --us-card-header-subtitle-font-weight: 500;
1337
1484
  --us-card-header-subtitle-line-height: 14px;
1338
- }
1339
- .us-theme-fci .us-card--xs .us-card-body {
1340
- --us-card-body-padding-y: 1rem;
1341
- --us-card-body-padding-x: 1rem;
1342
1485
  --us-card-body-font-size: 0.75rem;
1343
1486
  --us-card-body-line-height: 18px;
1344
- --us-card-body-color: var(--us-body-color);
1345
- }
1346
- .us-theme-fci .us-card--sm .us-card-header {
1347
- --us-card-header-min-height: 48px;
1348
- --us-card-header-padding-y: 0.625rem;
1349
- --us-card-header-padding-x: 1rem;
1350
- --us-card-header-padding-level: 1.25rem;
1351
- --us-card-header-gap: 1rem;
1352
- --us-card-header-title-font-size: 0.875rem;
1353
- --us-card-header-title-line-height: 20px;
1354
- --us-card-header-subtitle-font-size: 0.75rem;
1487
+ --us-card-footer-min-height: 1.75rem;
1488
+ --us-card-footer-gap: 0.5rem;
1489
+ }
1490
+ .us-theme-fci .us-card--xs .us-card-header .us-icon:not(.us-button .us-icon) {
1491
+ --us-icon-font-size-default: 16px;
1492
+ }
1493
+ .us-theme-fci .us-card--sm {
1494
+ --us-card-padding-y: 0.5rem;
1495
+ --us-card-padding-x: 1rem;
1496
+ --us-card-gap: 0.5rem;
1497
+ --us-card-title-padding-y: 0.875rem 0.375rem;
1498
+ --us-card-title-font-size: 1.25rem;
1499
+ --us-card-header-min-height: 2rem;
1500
+ --us-card-header-gap: 0.75rem;
1501
+ --us-card-header-content-gap: 0.5rem;
1502
+ --us-card-header-title-font-size: 13px;
1503
+ --us-card-header-title-font-weight: 500;
1504
+ --us-card-header-title-line-height: 16px;
1505
+ --us-card-header-subtitle-font-size: 12px;
1506
+ --us-card-header-subtitle-font-weight: 500;
1355
1507
  --us-card-header-subtitle-line-height: 16px;
1356
- }
1357
- .us-theme-fci .us-card--sm .us-card-body {
1358
- --us-card-body-padding-y: 1.25rem;
1359
- --us-card-body-padding-x: 1rem;
1360
1508
  --us-card-body-font-size: 0.875rem;
1361
1509
  --us-card-body-line-height: 20px;
1362
- --us-card-body-color: var(--us-body-color);
1363
- }
1364
- .us-theme-fci .us-card--md .us-card-header {
1365
- --us-card-header-min-height: 56px;
1366
- --us-card-header-padding-y: 0.625rem;
1367
- --us-card-header-padding-x: 1rem;
1368
- --us-card-header-padding-level: 1.25rem;
1369
- --us-card-header-font-size: 0.75rem;
1510
+ --us-card-footer-min-height: 2rem;
1511
+ --us-card-footer-gap: 0.75rem;
1512
+ }
1513
+ .us-theme-fci .us-card--sm .us-card-header .us-icon:not(.us-button .us-icon) {
1514
+ --us-icon-font-size-default: 20px;
1515
+ }
1516
+ .us-theme-fci .us-card--md {
1517
+ --us-card-padding-y: 0.75rem;
1518
+ --us-card-padding-x: 1.5rem;
1519
+ --us-card-gap: 0.75rem;
1520
+ --us-card-title-padding-y: 1rem 0.5rem;
1521
+ --us-card-title-font-size: 1.25rem;
1522
+ --us-card-header-min-height: 2rem;
1370
1523
  --us-card-header-gap: 1rem;
1371
- --us-card-header-title-font-size: 1rem;
1372
- --us-card-header-title-line-height: 24px;
1524
+ --us-card-header-content-gap: 0.5rem;
1525
+ --us-card-header-title-font-size: 0.875rem;
1526
+ --us-card-header-title-line-height: 16px;
1373
1527
  --us-card-header-subtitle-font-size: 0.8125rem;
1374
- --us-card-header-subtitle-line-height: 18px;
1528
+ --us-card-header-subtitle-line-height: 16px;
1529
+ --us-card-body-font-size: 0.875rem;
1530
+ --us-card-body-line-height: 24px;
1531
+ --us-card-footer-min-height: 2rem;
1532
+ --us-card-footer-gap: 1rem;
1375
1533
  }
1376
1534
  .us-theme-fci .us-card--md .us-card-header .us-icon:not(.us-button .us-icon) {
1377
1535
  --us-icon-font-size-default: 24px;
1378
1536
  }
1379
- .us-theme-fci .us-card--md .us-card-body {
1380
- --us-card-body-padding-y: 1.5rem;
1381
- --us-card-body-padding-x: 1rem;
1382
- --us-card-body-font-size: 1rem;
1383
- --us-card-body-line-height: 24px;
1384
- --us-card-body-color: var(--us-body-color);
1385
- }
1386
- .us-theme-fci .us-card--lg .us-card-header {
1387
- --us-card-header-min-height: 64px;
1388
- --us-card-header-padding-y: 0.625rem;
1389
- --us-card-header-padding-x: 1rem;
1390
- --us-card-header-padding-level: 1.25rem;
1391
- --us-card-header-font-size: 0.75rem;
1537
+ .us-theme-fci .us-card--lg {
1538
+ --us-card-padding-y: 1.125rem;
1539
+ --us-card-padding-x: 1.75rem;
1540
+ --us-card-gap: 1.125rem;
1541
+ --us-card-title-padding-y: 1.25rem 0.75rem;
1542
+ --us-card-title-font-size: 1.5rem;
1543
+ --us-card-header-min-height: 2.25rem;
1392
1544
  --us-card-header-gap: 1rem;
1393
- --us-card-header-title-font-size: 0.875rem;
1394
- --us-card-header-title-line-height: 24px;
1395
- --us-card-header-subtitle-font-size: 1rem;
1545
+ --us-card-header-content-gap: 0.75rem;
1546
+ --us-card-header-title-font-size: 1rem;
1547
+ --us-card-header-title-line-height: 18px;
1548
+ --us-card-header-subtitle-font-size: 0.875rem;
1396
1549
  --us-card-header-subtitle-line-height: 18px;
1397
- }
1398
- .us-theme-fci .us-card--lg .us-card-body {
1399
- --us-card-body-padding-y: 1.5rem;
1400
- --us-card-body-padding-x: 1rem;
1401
1550
  --us-card-body-font-size: 1rem;
1402
1551
  --us-card-body-line-height: 24px;
1403
- --us-card-body-color: var(--us-body-color);
1552
+ --us-card-footer-min-height: 2.25rem;
1553
+ --us-card-footer-gap: 1rem;
1554
+ }
1555
+ .us-theme-fci .us-card--lg .us-card-header .us-icon:not(.us-button .us-icon) {
1556
+ --us-icon-font-size-default: 28px;
1404
1557
  }
1405
- .us-theme-fci .us-card--xl .us-card-header {
1406
- --us-card-header-min-height: 72px;
1407
- --us-card-header-padding-y: 0.625rem;
1408
- --us-card-header-padding-x: 1rem;
1409
- --us-card-header-padding-level: 1.25rem;
1410
- --us-card-header-font-size: 0.75rem;
1558
+ .us-theme-fci .us-card--xl {
1559
+ --us-card-padding-y: 1.25rem;
1560
+ --us-card-padding-x: 2rem;
1561
+ --us-card-gap: 1.25rem;
1562
+ --us-card-header-min-height: 2.5rem;
1411
1563
  --us-card-header-gap: 1rem;
1412
- --us-card-header-title-font-size: 1rem;
1564
+ --us-card-header-content-gap: 0.875rem;
1565
+ --us-card-header-title-font-size: 1.125rem;
1566
+ --us-card-header-title-line-height: 20px;
1567
+ --us-card-header-subtitle-font-size: 1rem;
1568
+ --us-card-header-subtitle-line-height: 20px;
1569
+ --us-card-body-font-size: 1.125rem;
1570
+ --us-card-body-line-height: 28px;
1571
+ --us-card-footer-min-height: 2.5rem;
1572
+ --us-card-footer-gap: 1rem;
1573
+ }
1574
+ .us-theme-fci .us-card--xl .us-card-header .us-icon:not(.us-button .us-icon) {
1575
+ --us-icon-font-size-default: 36px;
1576
+ }
1577
+ .us-theme-fci .us-card--xxl {
1578
+ --us-card-padding-y: 1.5rem;
1579
+ --us-card-padding-x: 2rem;
1580
+ --us-card-gap: 1.5rem;
1581
+ --us-card-header-min-height: 3rem;
1582
+ --us-card-header-gap: 1.5em;
1583
+ --us-card-header-content-gap: 1rem;
1584
+ --us-card-header-title-font-size: 1.25rem;
1413
1585
  --us-card-header-title-line-height: 24px;
1414
- --us-card-header-subtitle-font-size: 0.8125rem;
1415
- --us-card-header-subtitle-line-height: 18px;
1586
+ --us-card-header-subtitle-font-size: 1.125rem;
1587
+ --us-card-header-subtitle-line-height: 24px;
1588
+ --us-card-body-font-size: 1.25rem;
1589
+ --us-card-body-line-height: 36px;
1590
+ --us-card-footer-min-height: 2.5rem;
1591
+ --us-card-footer-gap: 1rem;
1416
1592
  }
1417
- .us-theme-fci .us-card--xl .us-card-body {
1418
- --us-card-body-padding-y: 1.5rem;
1419
- --us-card-body-padding-x: 1rem;
1420
- --us-card-body-font-size: 1rem;
1421
- --us-card-body-line-height: 24px;
1422
- --us-card-body-color: var(--us-body-color);
1593
+ .us-theme-fci .us-card--xxl .us-card-header .us-icon:not(.us-button .us-icon) {
1594
+ --us-icon-font-size-default: 48px;
1423
1595
  }
1424
1596
 
1425
1597
  .us-theme-fci .us-result--sm {
@@ -1561,11 +1733,14 @@ html {
1561
1733
  .us-theme-fci {
1562
1734
  --us-primary-rgb: 153 0 0;
1563
1735
  --us-primary-color: hsl(0, 100%, 30%);
1564
- --us-secondary-color: hsl(217, 33%, 17%);
1565
- --us-success-color: hsl(150, 100%, 30%);
1566
- --us-info-color: rgb(120, 40, 200);
1567
- --us-warning-color: rgb(245, 165, 36);
1568
- --us-danger-color: rgb(243, 18, 18);
1736
+ --us-secondary-color: #0f172a;
1737
+ --us-success-color: #16a34a;
1738
+ --us-success-dark-color: #15803d;
1739
+ --us-info-color: #7c3aed;
1740
+ --us-info-dark-color: #5b21b6;
1741
+ --us-warning-color: #f59e0b;
1742
+ --us-warning-dark-color: #b45309;
1743
+ --us-danger-color: #dc2626;
1569
1744
  --us-black-color: #000;
1570
1745
  --us-white-color: #fff;
1571
1746
  --us-border-color: rgba(0, 0, 0, 0.12);