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

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 (13) hide show
  1. package/css/fci.css +251 -115
  2. package/css/fci.min.css +1 -1
  3. package/css/styles.css +84 -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 +94 -21
  8. package/scss/components/_input.scss +3 -3
  9. package/scss/components/_tabs.scss +1 -1
  10. package/scss/themes/fci/components/_button.scss +85 -20
  11. package/scss/themes/fci/components/_card.scss +139 -94
  12. package/scss/themes/fci/components/_icon.scss +1 -1
  13. 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 {
@@ -485,7 +485,7 @@ html {
485
485
  }
486
486
 
487
487
  .us-theme-fci .us-button {
488
- --us-button-font-weight: 500;
488
+ --us-button-font-weight: 400;
489
489
  --us-button-font-family: var(--us-font-sans);
490
490
  --us-button-divider-width: 1px;
491
491
  --us-button-divider-color: #fff;
@@ -493,27 +493,27 @@ 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
- --us-button-border-radius: 6px;
509
+ --us-button-border-radius: 8px;
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;
@@ -521,28 +521,39 @@ html {
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: 10px;
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: 10px;
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,6 +612,24 @@ html {
601
612
  --us-outline-border-width: 1px;
602
613
  --us-outline-border-color: transparent;
603
614
  }
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;
620
+ }
621
+ .us-theme-fci .us-button--md.us-button--icon-only .us-icon {
622
+ --us-icon-font-size: 1.25rem;
623
+ }
624
+ .us-theme-fci .us-button--lg.us-button--icon-only .us-icon {
625
+ --us-icon-font-size: 1.5rem;
626
+ }
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;
632
+ }
604
633
  .us-theme-fci .us-button--filled.us-button--inherit {
605
634
  --us-button-background: inherit;
606
635
  }
@@ -637,6 +666,18 @@ html {
637
666
  .us-theme-fci .us-button--text.us-button--secondary {
638
667
  --us-button-color: var(--us-secondary-color);
639
668
  }
669
+ .us-theme-fci .us-button--filled.us-button--secondary {
670
+ --us-button-color: var(--us-secondary-color);
671
+ --us-button-background: transparent;
672
+ }
673
+ .us-theme-fci .us-button--filled.us-button--secondary > .us-overlay {
674
+ --us-overlay-color: inherit;
675
+ --us-overlay-opacity: 0.16;
676
+ --us-_hover-overlay-opacity: 0.24;
677
+ --us-_active-overlay-opacity: 0.32;
678
+ --us-_focus-hover-overlay-opacity: 0.24;
679
+ --us-_focus-active-overlay-opacity: 0.32;
680
+ }
640
681
  .us-theme-fci .us-button--filled.us-button--success {
641
682
  --us-button-background: var(--us-success-color);
642
683
  }
@@ -1263,7 +1304,7 @@ html {
1263
1304
  .us-theme-fci .us-tabs--underlined .us-tab {
1264
1305
  --us-tab-indicator-color: var(--us-primary-action-color);
1265
1306
  --us-tab-indicator-height: 3px;
1266
- --us-tab-indicator-border-radius: 3px 3px 0px 0px;
1307
+ --us-tab-indicator-border-radius: 3px;
1267
1308
  --us-tab-border-radius: 0px;
1268
1309
  }
1269
1310
  .us-theme-fci .us-tabs--underlined .us-tab > .us-overlay {
@@ -1275,6 +1316,79 @@ html {
1275
1316
  .us-theme-fci .us-tabs--underlined .us-tab--selected {
1276
1317
  --us-tab-color: var(--us-primary-action-color);
1277
1318
  }
1319
+ .us-theme-fci .us-tabs--underlined .us-tab {
1320
+ --us-tab-indicator-color: var(--us-primary-action-color);
1321
+ --us-tab-indicator-height: 3px;
1322
+ --us-tab-indicator-border-radius: 3px;
1323
+ --us-tab-border-radius: 0px;
1324
+ }
1325
+ .us-theme-fci .us-tabs--underlined .us-tab > .us-surface {
1326
+ --us-surface-opacity: 0;
1327
+ }
1328
+ .us-theme-fci .us-tabs--underlined .us-tab > .us-overlay {
1329
+ --us-overlay-opacity: 0;
1330
+ --us-overlay-color: inherit;
1331
+ --us-_hover-overlay-opacity: 0.08;
1332
+ --us-_active-overlay-opacity: 0.12;
1333
+ }
1334
+ .us-theme-fci .us-tabs--underlined .us-tab--selected .us-theme-fci .us-tabs--underlined .us-tab__indicator {
1335
+ --us-tab-color: var(--us-primary-action-color);
1336
+ }
1337
+ .us-theme-fci .us-tabs--underlined .us-tab__indicator > .us-surface {
1338
+ --us-surface-opacity: 0;
1339
+ --us-surface-transition: none;
1340
+ }
1341
+ .us-theme-fci .us-tabs--underlined .us-tab__indicator > .us-overlay {
1342
+ --us-overlay-opacity: 0;
1343
+ --us-overlay-transition: none;
1344
+ }
1345
+ .us-theme-fci .us-tabs--underlined .us-tab--selected .us-tab__indicator > .us-surface {
1346
+ --us-surface-opacity: 1;
1347
+ }
1348
+ .us-theme-fci .us-tabs--underlined .us-tab--selected .us-tab__indicator > .us-overlay {
1349
+ --us-overlay-opacity: 0;
1350
+ }
1351
+ .us-theme-fci .us-tabs--pills {
1352
+ --us-tab-indicator-color: var(--us-primary-action-color);
1353
+ --us-tab-indicator-height: 3px;
1354
+ --us-tab-indicator-border-radius: 3px 3px 0px 0px;
1355
+ }
1356
+ .us-theme-fci .us-tabs--pills .us-tab {
1357
+ --us-tab-indicator-height: 100%;
1358
+ --us-tab-indicator-border-radius: 9999px;
1359
+ --us-tab-border-radius: 9999px;
1360
+ }
1361
+ .us-theme-fci .us-tabs--pills .us-tab > .us-surface {
1362
+ --us-surface-opacity: 0;
1363
+ }
1364
+ .us-theme-fci .us-tabs--pills .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--pills .us-tab--selected {
1371
+ --us-tab-color: var(--us-primary-action-color);
1372
+ }
1373
+ .us-theme-fci .us-tabs--pills .us-tab__indicator > .us-surface {
1374
+ --us-surface-opacity: 0;
1375
+ --us-surface-transition: none;
1376
+ }
1377
+ .us-theme-fci .us-tabs--pills .us-tab__indicator > .us-overlay {
1378
+ --us-overlay-opacity: 0;
1379
+ --us-overlay-color: inherit;
1380
+ --us-_hover-overlay-opacity: 0.08;
1381
+ --us-_active-overlay-opacity: 0.12;
1382
+ }
1383
+ .us-theme-fci .us-tabs--pills .us-tab--selected .us-tab__indicator > .us-surface {
1384
+ --us-surface-opacity: 0.12;
1385
+ }
1386
+ .us-theme-fci .us-tabs--pills .us-tab--selected .us-tab__indicator > .us-overlay {
1387
+ --us-overlay-opacity: 0;
1388
+ --us-overlay-color: inherit;
1389
+ --us-_hover-overlay-opacity: 0.08;
1390
+ --us-_active-overlay-opacity: 0.12;
1391
+ }
1278
1392
  .us-theme-fci .us-tab {
1279
1393
  --us-tab-color: var(--us-secondary-action-color);
1280
1394
  --us-tab-padding-y: 0px;
@@ -1285,12 +1399,23 @@ html {
1285
1399
  }
1286
1400
 
1287
1401
  .us-theme-fci .us-card {
1288
- --us-card-border-width: 0px;
1402
+ --us-card-border-width: 1px;
1289
1403
  --us-card-border-style: solid;
1290
1404
  --us-card-border-color: var(--us-border-color);
1291
1405
  --us-card-border-radius: 10px;
1292
1406
  --us-card-box-shadow: rgb(255, 255, 255) 0px 0px 0px 0px, rgba(51, 65, 85, 0.1) 0px 0px 0px 1px,
1293
1407
  rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
1408
+ --us-card-title-font-weight: 700;
1409
+ --us-card-subtitle-font-weight: 400;
1410
+ --us-card-header-title-font-weight: 500;
1411
+ --us-card-header-title-color: var(--us-title-color);
1412
+ --us-card-header-subtitle-font-weight: 400;
1413
+ --us-card-header-subtitle-color: var(--us-subtitle-color);
1414
+ --us-card-body-color: var(--us-body-color);
1415
+ }
1416
+ .us-theme-fci .us-card > .us-surface {
1417
+ --us-surface-color: var(--us-white-color);
1418
+ --us-surface-opacity: 1;
1294
1419
  }
1295
1420
  .us-theme-fci .us-card > .us-overlay {
1296
1421
  --us-overlay-color: inherit;
@@ -1308,118 +1433,129 @@ html {
1308
1433
  --us-_hover-overlay-opacity: 0.12;
1309
1434
  --us-_active-overlay-opacity: 0.16;
1310
1435
  }
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;
1436
+ .us-theme-fci .us-card--xs {
1437
+ --us-card-padding-y: 0.5rem;
1438
+ --us-card-padding-x: 0.75rem;
1439
+ --us-card-gap: 0.5rem;
1440
+ --us-card-header-min-height: 1.75rem;
1441
+ --us-card-header-gap: 0.5rem;
1442
+ --us-card-header-content-gap: 0.25rem;
1334
1443
  --us-card-header-title-font-size: 12px;
1335
- --us-card-header-title-line-height: 18px;
1444
+ --us-card-header-title-font-weight: 500;
1445
+ --us-card-header-title-line-height: 14px;
1336
1446
  --us-card-header-subtitle-font-size: 11px;
1447
+ --us-card-header-subtitle-font-weight: 500;
1337
1448
  --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
1449
  --us-card-body-font-size: 0.75rem;
1343
1450
  --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;
1451
+ --us-card-footer-min-height: 1.75rem;
1452
+ --us-card-footer-gap: 0.5rem;
1453
+ }
1454
+ .us-theme-fci .us-card--xs .us-card-header .us-icon:not(.us-button .us-icon) {
1455
+ --us-icon-font-size-default: 16px;
1456
+ }
1457
+ .us-theme-fci .us-card--sm {
1458
+ --us-card-padding-y: 0.5rem;
1459
+ --us-card-padding-x: 1rem;
1460
+ --us-card-gap: 0.5rem;
1461
+ --us-card-title-padding-y: 0.875rem 0.375rem;
1462
+ --us-card-title-font-size: 1.25rem;
1463
+ --us-card-header-min-height: 2rem;
1464
+ --us-card-header-gap: 0.75rem;
1465
+ --us-card-header-content-gap: 0.5rem;
1466
+ --us-card-header-title-font-size: 13px;
1467
+ --us-card-header-title-font-weight: 500;
1468
+ --us-card-header-title-line-height: 16px;
1469
+ --us-card-header-subtitle-font-size: 12px;
1470
+ --us-card-header-subtitle-font-weight: 500;
1355
1471
  --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
1472
  --us-card-body-font-size: 0.875rem;
1361
1473
  --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;
1474
+ --us-card-footer-min-height: 2rem;
1475
+ --us-card-footer-gap: 0.75rem;
1476
+ }
1477
+ .us-theme-fci .us-card--sm .us-card-header .us-icon:not(.us-button .us-icon) {
1478
+ --us-icon-font-size-default: 20px;
1479
+ }
1480
+ .us-theme-fci .us-card--md {
1481
+ --us-card-padding-y: 0.75rem;
1482
+ --us-card-padding-x: 1.5rem;
1483
+ --us-card-gap: 0.75rem;
1484
+ --us-card-title-padding-y: 1rem 0.5rem;
1485
+ --us-card-title-font-size: 1.25rem;
1486
+ --us-card-header-min-height: 2rem;
1370
1487
  --us-card-header-gap: 1rem;
1371
- --us-card-header-title-font-size: 1rem;
1372
- --us-card-header-title-line-height: 24px;
1488
+ --us-card-header-content-gap: 0.5rem;
1489
+ --us-card-header-title-font-size: 0.875rem;
1490
+ --us-card-header-title-line-height: 16px;
1373
1491
  --us-card-header-subtitle-font-size: 0.8125rem;
1374
- --us-card-header-subtitle-line-height: 18px;
1492
+ --us-card-header-subtitle-line-height: 16px;
1493
+ --us-card-body-font-size: 0.875rem;
1494
+ --us-card-body-line-height: 24px;
1495
+ --us-card-footer-min-height: 2rem;
1496
+ --us-card-footer-gap: 1rem;
1375
1497
  }
1376
1498
  .us-theme-fci .us-card--md .us-card-header .us-icon:not(.us-button .us-icon) {
1377
1499
  --us-icon-font-size-default: 24px;
1378
1500
  }
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;
1501
+ .us-theme-fci .us-card--lg {
1502
+ --us-card-padding-y: 1.125rem;
1503
+ --us-card-padding-x: 1.75rem;
1504
+ --us-card-gap: 1.125rem;
1505
+ --us-card-title-padding-y: 1.25rem 0.75rem;
1506
+ --us-card-title-font-size: 1.5rem;
1507
+ --us-card-header-min-height: 2.25rem;
1392
1508
  --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;
1509
+ --us-card-header-content-gap: 0.75rem;
1510
+ --us-card-header-title-font-size: 1rem;
1511
+ --us-card-header-title-line-height: 18px;
1512
+ --us-card-header-subtitle-font-size: 0.875rem;
1396
1513
  --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
1514
  --us-card-body-font-size: 1rem;
1402
1515
  --us-card-body-line-height: 24px;
1403
- --us-card-body-color: var(--us-body-color);
1516
+ --us-card-footer-min-height: 2.25rem;
1517
+ --us-card-footer-gap: 1rem;
1518
+ }
1519
+ .us-theme-fci .us-card--lg .us-card-header .us-icon:not(.us-button .us-icon) {
1520
+ --us-icon-font-size-default: 28px;
1404
1521
  }
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;
1522
+ .us-theme-fci .us-card--xl {
1523
+ --us-card-padding-y: 1.25rem;
1524
+ --us-card-padding-x: 2rem;
1525
+ --us-card-gap: 1.25rem;
1526
+ --us-card-header-min-height: 2.5rem;
1411
1527
  --us-card-header-gap: 1rem;
1412
- --us-card-header-title-font-size: 1rem;
1528
+ --us-card-header-content-gap: 0.875rem;
1529
+ --us-card-header-title-font-size: 1.125rem;
1530
+ --us-card-header-title-line-height: 20px;
1531
+ --us-card-header-subtitle-font-size: 1rem;
1532
+ --us-card-header-subtitle-line-height: 20px;
1533
+ --us-card-body-font-size: 1.125rem;
1534
+ --us-card-body-line-height: 28px;
1535
+ --us-card-footer-min-height: 2.5rem;
1536
+ --us-card-footer-gap: 1rem;
1537
+ }
1538
+ .us-theme-fci .us-card--xl .us-card-header .us-icon:not(.us-button .us-icon) {
1539
+ --us-icon-font-size-default: 36px;
1540
+ }
1541
+ .us-theme-fci .us-card--xxl {
1542
+ --us-card-padding-y: 1.5rem;
1543
+ --us-card-padding-x: 2rem;
1544
+ --us-card-gap: 1.5rem;
1545
+ --us-card-header-min-height: 3rem;
1546
+ --us-card-header-gap: 1.5em;
1547
+ --us-card-header-content-gap: 1rem;
1548
+ --us-card-header-title-font-size: 1.25rem;
1413
1549
  --us-card-header-title-line-height: 24px;
1414
- --us-card-header-subtitle-font-size: 0.8125rem;
1415
- --us-card-header-subtitle-line-height: 18px;
1416
- }
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);
1550
+ --us-card-header-subtitle-font-size: 1.125rem;
1551
+ --us-card-header-subtitle-line-height: 24px;
1552
+ --us-card-body-font-size: 1.25rem;
1553
+ --us-card-body-line-height: 36px;
1554
+ --us-card-footer-min-height: 2.5rem;
1555
+ --us-card-footer-gap: 1rem;
1556
+ }
1557
+ .us-theme-fci .us-card--xxl .us-card-header .us-icon:not(.us-button .us-icon) {
1558
+ --us-icon-font-size-default: 48px;
1423
1559
  }
1424
1560
 
1425
1561
  .us-theme-fci .us-result--sm {