@design-factory/design-factory 17.0.0 → 17.0.1

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.
@@ -1207,17 +1207,17 @@ $spacers: (
1207
1207
  //
1208
1208
  // Settings for the `<body>` element.
1209
1209
 
1210
- $body-bg: var(--#{$prefix}white) !default;
1211
- $body-color: var(--#{$prefix}gray-900) !default;
1212
1210
  // $body-text-align: null !default;
1211
+ $body-color: $gray-900 !default;
1212
+ $body-bg: $white !default;
1213
1213
 
1214
- // $body-secondary-color: rgba($body-color, .75) !default;
1215
- // $body-secondary-bg: $gray-200 !default;
1214
+ $body-secondary-color: $gray-700 !default;
1215
+ $body-secondary-bg: $gray-200 !default;
1216
1216
 
1217
1217
  // $body-tertiary-color: rgba($body-color, .5) !default;
1218
- // $body-tertiary-bg: $gray-100 !default;
1218
+ $body-tertiary-bg: $gray-100 !default;
1219
1219
 
1220
- // $body-emphasis-color: $black !default;
1220
+ $body-emphasis-color: $black !default;
1221
1221
 
1222
1222
  // Links
1223
1223
  //
@@ -1427,7 +1427,7 @@ $headings-font-family: 'Amadeus', sans-serif !default;
1427
1427
  // $headings-font-style: null !default;
1428
1428
  $headings-font-weight: 400 !default;
1429
1429
  $headings-line-height: 1.5 !default;
1430
- // $headings-color: null !default;
1430
+ // $headings-color: inherit !default;
1431
1431
  // scss-docs-end headings-variables
1432
1432
 
1433
1433
  // scss-docs-start display-headings
@@ -1454,7 +1454,9 @@ $display-line-height: 1.1 !default;
1454
1454
 
1455
1455
  // $sub-sup-font-size: .75em !default;
1456
1456
 
1457
- $text-muted: $gray-700 !default;
1457
+ // fusv-disable
1458
+ $text-muted: var(--#{$prefix}secondary-color) !default; // Deprecated in 5.3.0
1459
+ // fusv-enable
1458
1460
 
1459
1461
  // $initialism-font-size: $small-font-size !default;
1460
1462
 
@@ -1472,9 +1474,13 @@ $hr-margin-y: 1.5rem !default;
1472
1474
  // fusv-enable
1473
1475
 
1474
1476
  // $hr-border-color: null !default; // Allows for inherited colors
1475
- // $hr-border-width: $border-width !default;
1477
+ // $hr-border-width: var(--#{$prefix}border-width) !default;
1476
1478
  // $hr-opacity: .25 !default;
1477
1479
 
1480
+ // scss-docs-start vr-variables
1481
+ // $vr-border-width: var(--#{$prefix}border-width) !default;
1482
+ // scss-docs-end vr-variables
1483
+
1478
1484
  // $legend-margin-bottom: .5rem !default;
1479
1485
  // $legend-font-size: 1.5rem !default;
1480
1486
  // $legend-font-weight: null !default;
@@ -1485,7 +1491,7 @@ $hr-margin-y: 1.5rem !default;
1485
1491
 
1486
1492
  // $mark-padding: .1875em !default;
1487
1493
  // $mark-color: $body-color !default;
1488
- $mark-bg: $gray-600 !default;
1494
+ $mark-bg: var(--#{$prefix}gray-600) !default;
1489
1495
  // scss-docs-end type-variables
1490
1496
 
1491
1497
  // Tables
@@ -1500,34 +1506,34 @@ $table-cell-padding-x-sm: 0.3rem !default;
1500
1506
 
1501
1507
  // $table-cell-vertical-align: top !default;
1502
1508
 
1503
- // $table-color: var(--#{$prefix}body-color) !default;
1504
- // $table-bg: transparent !default;
1509
+ $table-color: var(--#{$prefix}body-color) !default;
1510
+ $table-bg: transparent !default;
1505
1511
  // $table-accent-bg: transparent !default;
1506
1512
 
1507
1513
  $table-th-font-weight: 500 !default;
1508
1514
 
1509
1515
  // $table-striped-color: $table-color !default;
1510
1516
  // $table-striped-bg-factor: .05 !default;
1511
- // $table-striped-bg: rgba($black, $table-striped-bg-factor) !default;
1517
+ // $table-striped-bg: rgba(var(--#{$prefix}emphasis-color-rgb), $table-striped-bg-factor) !default;
1512
1518
 
1513
1519
  // $table-active-color: $table-color !default;
1514
1520
  // $table-active-bg-factor: .1 !default;
1515
- // $table-active-bg: rgba($black, $table-active-bg-factor) !default;
1521
+ // $table-active-bg: rgba(var(--#{$prefix}emphasis-color-rgb), $table-active-bg-factor) !default;
1516
1522
 
1517
1523
  // $table-hover-color: $table-color !default;
1518
1524
  // $table-hover-bg-factor: .075 !default;
1519
- // $table-hover-bg: rgba($black, $table-hover-bg-factor) !default;
1525
+ // $table-hover-bg: rgba(var(--#{$prefix}emphasis-color-rgb), $table-hover-bg-factor) !default;
1520
1526
 
1521
1527
  // $table-border-factor: .1 !default;
1522
- // $table-border-width: $border-width !default;
1523
- // $table-border-color: $border-color !default;
1528
+ // $table-border-width: var(--#{$prefix}border-width) !default;
1529
+ // $table-border-color: var(--#{$prefix}border-color) !default;
1524
1530
 
1525
1531
  // $table-striped-order: odd !default;
1526
1532
  // $table-striped-columns-order: even !default;
1527
1533
 
1528
1534
  $table-group-separator-color: var(--#{$prefix}gray-400) !default;
1529
1535
 
1530
- // $table-caption-color: $text-muted !default;
1536
+ // $table-caption-color: var(--#{$prefix}secondary-color) !default;
1531
1537
 
1532
1538
  // $table-bg-scale: -80% !default;
1533
1539
  // scss-docs-end table-variables
@@ -1560,7 +1566,7 @@ $input-btn-padding-x: 1rem !default;
1560
1566
  // $input-btn-focus-color-opacity: $focus-ring-opacity !default;
1561
1567
  // $input-btn-focus-color: $focus-ring-color !default;
1562
1568
  // $input-btn-focus-blur: $focus-ring-blur !default;
1563
- // $input-btn-focus-box-shadow: $focus-ring-box-shadow !default;
1569
+ $input-btn-focus-box-shadow: $focus-ring-box-shadow !default;
1564
1570
 
1565
1571
  $input-btn-padding-y-sm: $input-btn-padding-y * map.get($df-sizing-ratios, 'sm') !default;
1566
1572
  $input-btn-padding-x-sm: $input-btn-padding-x * map.get($df-sizing-ratios, 'sm') !default;
@@ -1570,7 +1576,7 @@ $input-btn-padding-y-lg: $input-btn-padding-y * map.get($df-sizing-ratios, 'lg')
1570
1576
  $input-btn-padding-x-lg: $input-btn-padding-x * map.get($df-sizing-ratios, 'lg') !default;
1571
1577
  // $input-btn-font-size-lg: $font-size-lg !default;
1572
1578
 
1573
- // $input-btn-border-width: $border-width !default;
1579
+ // $input-btn-border-width: var(--#{$prefix}border-width) !default;
1574
1580
  // scss-docs-end input-btn-variables
1575
1581
 
1576
1582
  // Buttons
@@ -1603,8 +1609,8 @@ $btn-font-weight: $font-weight-semibold !default;
1603
1609
  $btn-disabled-opacity: 1 !default;
1604
1610
  // $btn-active-box-shadow: inset 0 3px 5px rgba($black, .125) !default;
1605
1611
 
1606
- // $btn-link-color: $link-color !default;
1607
- // $btn-link-hover-color: $link-hover-color !default;
1612
+ // $btn-link-color: var(--#{$prefix}link-color) !default;
1613
+ // $btn-link-hover-color: var(--#{$prefix}link-hover-color) !default;
1608
1614
  $btn-link-disabled-color: var(--#{$prefix}gray-400) !default; // default $gray-600 but we align with $df-disabled-color
1609
1615
  $btn-link-focus-shadow-rgb: rgba(var(--#{$prefix}btn-focus-shadow-rgb), 0.5) !default;
1610
1616
 
@@ -1632,7 +1638,7 @@ $btn-link-focus-shadow-rgb: rgba(var(--#{$prefix}btn-focus-shadow-rgb), 0.5) !de
1632
1638
  // $form-text-font-size: $small-font-size !default;
1633
1639
  // $form-text-font-style: null !default;
1634
1640
  // $form-text-font-weight: null !default;
1635
- $form-text-color: $body-color !default;
1641
+ $form-text-color: var(--#{$prefix}body-color) !default;
1636
1642
  // scss-docs-end form-text-variables
1637
1643
 
1638
1644
  // scss-docs-start form-label-variables
@@ -1659,30 +1665,30 @@ $input-padding-x-sm: $input-padding-x * map.get($df-size-ratios, 'sm') !default;
1659
1665
  $input-padding-x-lg: $input-padding-x * map.get($df-size-ratios, 'lg') !default;
1660
1666
  // $input-font-size-lg: $input-btn-font-size-lg !default;
1661
1667
 
1662
- // $input-bg: $body-bg !default;
1668
+ // $input-bg: var(--#{$prefix}body-bg) !default;
1663
1669
  // $input-disabled-color: null !default;
1664
- $input-disabled-bg: $gray-100 !default;
1670
+ $input-disabled-bg: var(--#{$prefix}gray-100) !default;
1665
1671
  // $input-disabled-border-color: null !default;
1666
1672
 
1667
- // $input-color: $body-color !default;
1668
- // $input-border-color: $gray-400 !default;
1673
+ // $input-color: var(--#{$prefix}body-color) !default;
1674
+ $input-border-color: var(--#{$prefix}gray-400) !default;
1669
1675
  // $input-border-width: $input-btn-border-width !default;
1670
- // $input-box-shadow: $box-shadow-inset !default;
1676
+ // $input-box-shadow: var(--#{$prefix}box-shadow-inset) !default;
1671
1677
 
1672
- // $input-border-radius: $border-radius !default;
1673
- // $input-border-radius-sm: $border-radius-sm !default;
1674
- // $input-border-radius-lg: $border-radius-lg !default;
1678
+ // $input-border-radius: var(--#{$prefix}border-radius) !default;
1679
+ // $input-border-radius-sm: var(--#{$prefix}border-radius-sm) !default;
1680
+ // $input-border-radius-lg: var(--#{$prefix}border-radius-lg) !default;
1675
1681
 
1676
1682
  // $input-focus-bg: $input-bg !default;
1677
- $input-focus-border-color: $primary !default;
1683
+ $input-focus-border-color: var(--#{$prefix}primary) !default;
1678
1684
  // $input-focus-color: $input-color !default;
1679
1685
  // $input-focus-width: $input-btn-focus-width !default;
1680
1686
  // $input-focus-box-shadow: $input-btn-focus-box-shadow !default;
1681
1687
 
1682
- // $input-placeholder-color: $gray-600 !default;
1683
- // $input-plaintext-color: $body-color !default;
1688
+ $input-placeholder-color: var(--#{$prefix}gray-600) !default;
1689
+ // $input-plaintext-color: var(--#{$prefix}body-color) !default;
1684
1690
 
1685
- // $input-height-border: $input-border-width * 2 !default;
1691
+ // $input-height-border: calc(#{$input-border-width} * 2) !default;
1686
1692
 
1687
1693
  // $input-height-inner: add($input-line-height * 1em, $input-padding-y * 2) !default;
1688
1694
  // $input-height-inner-half: add($input-line-height * .5em, $input-padding-y) !default;
@@ -1709,11 +1715,11 @@ $form-check-label-cursor: pointer !default;
1709
1715
  $form-check-input-active-filter: none !default;
1710
1716
 
1711
1717
  // $form-check-input-bg: $input-bg !default;
1712
- $form-check-input-border: 2px solid $gray-600 !default;
1718
+ $form-check-input-border: 2px solid var(--#{$prefix}gray-600) !default;
1713
1719
  $form-check-input-border-radius: 0.125em !default;
1714
1720
  // $form-check-radio-border-radius: 50% !default;
1715
- $form-check-input-focus-border: $gray-600 !default;
1716
- // $form-check-input-focus-box-shadow: $input-btn-focus-box-shadow !default;
1721
+ $form-check-input-focus-border: var(--#{$prefix}gray-600) !default;
1722
+ $form-check-input-focus-box-shadow: $input-btn-focus-box-shadow !default;
1717
1723
 
1718
1724
  $form-check-input-checked-color: $component-active-color !default;
1719
1725
  $form-check-input-checked-bg-color: $component-active-bg !default;
@@ -1754,7 +1760,7 @@ $form-switch-focus-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.o
1754
1760
  // $input-group-addon-padding-x: $input-padding-x !default;
1755
1761
  // $input-group-addon-font-weight: $input-font-weight !default;
1756
1762
  // $input-group-addon-color: $input-color !default;
1757
- $input-group-addon-bg: $gray-100 !default;
1763
+ // $input-group-addon-bg: var(--#{$prefix}tertiary-bg) !default;
1758
1764
  // $input-group-addon-border-color: $input-border-color !default;
1759
1765
  // scss-docs-end input-group-variables
1760
1766
 
@@ -1768,8 +1774,8 @@ $input-group-addon-bg: $gray-100 !default;
1768
1774
  // $form-select-line-height: $input-line-height !default;
1769
1775
  // $form-select-color: $input-color !default;
1770
1776
  // $form-select-bg: $input-bg !default;
1771
- $form-select-disabled-color: $gray-300 !default;
1772
- $form-select-disabled-bg: $gray-100 !default;
1777
+ $form-select-disabled-color: var(--#{$prefix}disabled-color) !default;
1778
+ // $form-select-disabled-bg: $input-disabled-bg !default;
1773
1779
  // $form-select-disabled-border-color: $input-disabled-border-color !default;
1774
1780
  // $form-select-bg-position: right $form-select-padding-x center !default;
1775
1781
  $form-select-bg-size: 16px 16px !default; // In pixels because image dimensions
@@ -1787,7 +1793,7 @@ $form-select-indicator: str-replace(
1787
1793
  // $form-select-border-width: $input-border-width !default;
1788
1794
  // $form-select-border-color: $input-border-color !default;
1789
1795
  // $form-select-border-radius: $input-border-radius !default;
1790
- // $form-select-box-shadow: $box-shadow-inset !default;
1796
+ // $form-select-box-shadow: var(--#{$prefix}box-shadow-inset) !default;
1791
1797
 
1792
1798
  // $form-select-focus-border-color: $input-focus-border-color !default;
1793
1799
  // $form-select-focus-width: $input-focus-width !default;
@@ -1810,9 +1816,9 @@ $form-select-indicator: str-replace(
1810
1816
  // $form-range-track-width: 100% !default;
1811
1817
  // $form-range-track-height: .5rem !default;
1812
1818
  // $form-range-track-cursor: pointer !default;
1813
- // $form-range-track-bg: $gray-300 !default;
1819
+ $form-range-track-bg: var(--#{$prefix}gray-300) !default;
1814
1820
  // $form-range-track-border-radius: 1rem !default;
1815
- // $form-range-track-box-shadow: $box-shadow-inset !default;
1821
+ // $form-range-track-box-shadow: var(--#{$prefix}box-shadow-inset) !default;
1816
1822
 
1817
1823
  // $form-range-thumb-width: 1rem !default;
1818
1824
  // $form-range-thumb-height: $form-range-thumb-width !default;
@@ -1823,14 +1829,14 @@ $form-select-indicator: str-replace(
1823
1829
  // $form-range-thumb-focus-box-shadow: 0 0 0 1px $body-bg, $input-focus-box-shadow !default;
1824
1830
  // $form-range-thumb-focus-box-shadow-width: $input-focus-width !default; // For focus box shadow issue in Edge
1825
1831
  // $form-range-thumb-active-bg: tint-color($component-active-bg, 70%) !default;
1826
- // $form-range-thumb-disabled-bg: $gray-500 !default;
1832
+ $form-range-thumb-disabled-bg: var(--#{$prefix}gray-500) !default;
1827
1833
  // $form-range-thumb-transition: background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;
1828
1834
  // scss-docs-end form-range-variables
1829
1835
 
1830
1836
  // scss-docs-start form-file-variables
1831
- $form-file-button-color: $white !default;
1837
+ $form-file-button-color: var(--#{$prefix}white) !default;
1832
1838
  $form-file-button-bg: $primary !default;
1833
- // $form-file-button-hover-bg: shade-color($form-file-button-bg, 5%) !default;
1839
+ $form-file-button-hover-bg: shade-color($form-file-button-bg, 5%) !default;
1834
1840
  // scss-docs-end form-file-variables
1835
1841
 
1836
1842
  // scss-docs-start form-floating-variables
@@ -1842,6 +1848,7 @@ $form-file-button-bg: $primary !default;
1842
1848
  // $form-floating-input-padding-b: .625rem !default;
1843
1849
  // $form-floating-label-opacity: .65 !default;
1844
1850
  // $form-floating-label-transform: scale(.85) translateY(-.5rem) translateX(.15rem) !default;
1851
+ // $form-floating-label-disabled-color: $gray-600 !default;
1845
1852
  // $form-floating-transition: opacity .1s ease-in-out, transform .1s ease-in-out !default;
1846
1853
  // scss-docs-end form-floating-variables
1847
1854
 
@@ -1851,13 +1858,13 @@ $form-file-button-bg: $primary !default;
1851
1858
  // $form-feedback-margin-top: $form-text-margin-top !default;
1852
1859
  // $form-feedback-font-size: $form-text-font-size !default;
1853
1860
  // $form-feedback-font-style: $form-text-font-style !default;
1854
- // $form-feedback-valid-color: $success !default;
1855
- // $form-feedback-invalid-color: $danger !default;
1861
+ $form-feedback-valid-color: $success !default;
1862
+ $form-feedback-invalid-color: $danger !default;
1856
1863
 
1857
- // $form-feedback-icon-valid-color: $form-feedback-valid-color !default;
1858
- // $form-feedback-icon-valid: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'><path fill='#{$form-feedback-icon-valid-color}' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/></svg>") !default;
1859
- // $form-feedback-icon-invalid-color: $form-feedback-invalid-color !default;
1860
- // $form-feedback-icon-invalid: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='#{$form-feedback-icon-invalid-color}'><circle cx='6' cy='6' r='4.5'/><path stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/><circle cx='6' cy='8.2' r='.6' fill='#{$form-feedback-icon-invalid-color}' stroke='none'/></svg>") !default;
1864
+ $form-feedback-icon-valid-color: $form-feedback-valid-color !default;
1865
+ $form-feedback-icon-valid: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'><path fill='#{$form-feedback-icon-valid-color}' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/></svg>") !default;
1866
+ $form-feedback-icon-invalid-color: $form-feedback-invalid-color !default;
1867
+ $form-feedback-icon-invalid: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='#{$form-feedback-icon-invalid-color}'><circle cx='6' cy='6' r='4.5'/><path stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/><circle cx='6' cy='8.2' r='.6' fill='#{$form-feedback-icon-invalid-color}' stroke='none'/></svg>") !default;
1861
1868
  // scss-docs-end form-feedback-variables
1862
1869
 
1863
1870
  // scss-docs-start form-validation-colors
@@ -1868,24 +1875,24 @@ $form-file-button-bg: $primary !default;
1868
1875
  // scss-docs-end form-validation-colors
1869
1876
 
1870
1877
  // scss-docs-start form-validation-states
1871
- // $form-validation-states: (
1872
- // "valid": (
1873
- // "color": var(--#{$prefix}form-valid-color),
1874
- // "icon": $form-feedback-icon-valid,
1875
- // "tooltip-color": #fff,
1876
- // "tooltip-bg-color": var(--#{$prefix}success),
1877
- // "focus-box-shadow": 0 0 $input-btn-focus-blur $input-focus-width rgba(var(--#{$prefix}success-rgb), $input-btn-focus-color-opacity),
1878
- // "border-color": var(--#{$prefix}form-valid-border-color),
1879
- // ),
1880
- // "invalid": (
1881
- // "color": var(--#{$prefix}form-invalid-color),
1882
- // "icon": $form-feedback-icon-invalid,
1883
- // "tooltip-color": #fff,
1884
- // "tooltip-bg-color": var(--#{$prefix}danger),
1885
- // "focus-box-shadow": 0 0 $input-btn-focus-blur $input-focus-width rgba(var(--#{$prefix}danger-rgb), $input-btn-focus-color-opacity),
1886
- // "border-color": var(--#{$prefix}form-invalid-border-color),
1887
- // )
1888
- // ) !default;
1878
+ $form-validation-states: (
1879
+ 'valid': (
1880
+ 'color': var(--#{$prefix}form-valid-color),
1881
+ 'icon': $form-feedback-icon-valid,
1882
+ 'tooltip-color': #fff,
1883
+ 'tooltip-bg-color': var(--#{$prefix}success),
1884
+ 'focus-box-shadow': $input-btn-focus-box-shadow,
1885
+ 'border-color': var(--#{$prefix}form-valid-border-color)
1886
+ ),
1887
+ 'invalid': (
1888
+ 'color': var(--#{$prefix}form-invalid-color),
1889
+ 'icon': $form-feedback-icon-invalid,
1890
+ 'tooltip-color': #fff,
1891
+ 'tooltip-bg-color': var(--#{$prefix}danger),
1892
+ 'focus-box-shadow': $input-btn-focus-box-shadow,
1893
+ 'border-color': var(--#{$prefix}form-invalid-border-color)
1894
+ )
1895
+ ) !default;
1889
1896
  // scss-docs-end form-validation-states
1890
1897
 
1891
1898
  // Z-index master list
@@ -1923,23 +1930,23 @@ $form-file-button-bg: $primary !default;
1923
1930
  // $nav-link-padding-x: 1rem !default;
1924
1931
  // $nav-link-font-size: null !default;
1925
1932
  // $nav-link-font-weight: null !default;
1926
- // $nav-link-color: $link-color !default;
1927
- // $nav-link-hover-color: $link-hover-color !default;
1933
+ // $nav-link-color: var(--#{$prefix}link-color) !default;
1934
+ // $nav-link-hover-color: var(--#{$prefix}link-hover-color) !default;
1928
1935
  // $nav-link-transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out !default;
1929
- $nav-link-disabled-color: $gray-300 !default;
1936
+ $nav-link-disabled-color: var(--#{$prefix}disabled-color) !default;
1930
1937
  // $nav-link-focus-box-shadow: $focus-ring-box-shadow !default;
1931
1938
 
1932
- // $nav-tabs-border-color: $gray-300 !default;
1933
- // $nav-tabs-border-width: $border-width !default;
1939
+ // $nav-tabs-border-color: var(--#{$prefix}border-color) !default;
1940
+ // $nav-tabs-border-width: var(--#{$prefix}border-width !default;
1934
1941
  $nav-tabs-border-radius: 0 !default;
1935
- // $nav-tabs-link-hover-border-color: $gray-200 $gray-200 $nav-tabs-border-color !default;
1936
- $nav-tabs-link-active-color: $primary !default;
1937
- $nav-tabs-link-active-bg: $white !default;
1938
- // $nav-tabs-link-active-border-color: $gray-300 $gray-300 $nav-tabs-link-active-bg !default;
1942
+ // $nav-tabs-link-hover-border-color: var(--#{$prefix}secondary-bg) var(--#{$prefix}secondary-bg) $nav-tabs-border-color !default;
1943
+ $nav-tabs-link-active-color: var(--#{$prefix}primary) !default;
1944
+ $nav-tabs-link-active-bg: var(--#{$prefix}white) !default;
1945
+ // $nav-tabs-link-active-border-color: var(--#{$prefix}border-color) var(--#{$prefix}border-color) $nav-tabs-link-active-bg !default;
1939
1946
 
1940
1947
  $nav-pills-border-radius: 0 !default; // $border-radius
1941
- $nav-pills-link-active-color: $primary !default;
1942
- $nav-pills-link-active-bg: $white !default;
1948
+ $nav-pills-link-active-color: var(--#{$prefix}primary) !default;
1949
+ $nav-pills-link-active-bg: var(--#{$prefix}white) !default;
1943
1950
 
1944
1951
  // $nav-underline-gap: 1rem !default;
1945
1952
  // $nav-underline-border-width: .125rem !default;
@@ -1974,7 +1981,7 @@ $navbar-light-active-color: var(--#{$prefix}primary-500) !default;
1974
1981
  $navbar-light-disabled-color: var(--#{$prefix}gray-500) !default;
1975
1982
  // $navbar-light-icon-color: rgba($body-color, .75) !default;
1976
1983
  $navbar-light-toggler-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='#{$primary-500}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>") !default;
1977
- $navbar-light-toggler-border-color: $white !default;
1984
+ $navbar-light-toggler-border-color: var(--#{$prefix}white) !default;
1978
1985
  // $navbar-light-brand-color: $navbar-light-active-color !default;
1979
1986
  // $navbar-light-brand-hover-color: $navbar-light-active-color !default;
1980
1987
  // scss-docs-end navbar-variables
@@ -2002,29 +2009,29 @@ $navbar-dark-toggler-border-color: transparent !default;
2002
2009
  // $dropdown-padding-y: .5rem !default;
2003
2010
  // $dropdown-spacer: .125rem !default;
2004
2011
  // $dropdown-font-size: $font-size-base !default;
2005
- // $dropdown-color: $body-color !default;
2012
+ // $dropdown-color: var(--#{$prefix}body-color) !default;
2006
2013
  // $dropdown-bg: $white !default;
2007
- $dropdown-border-color: $border-color !default;
2008
- // $dropdown-border-radius: $border-radius !default;
2009
- // $dropdown-border-width: $border-width !default;
2010
- // $dropdown-inner-border-radius: subtract($dropdown-border-radius, $dropdown-border-width) !default;
2014
+ $dropdown-border-color: var(--#{$prefix}border-color) !default;
2015
+ // $dropdown-border-radius: var(--#{$prefix}border-radius) !default;
2016
+ // $dropdown-border-width: var(--#{$prefix}border-width) !default;
2017
+ // $dropdown-inner-border-radius: calc(#{$dropdown-border-radius} - #{$dropdown-border-width}) !default; // stylelint-disable-line function-disallowed-list
2011
2018
  // $dropdown-divider-bg: $dropdown-border-color !default;
2012
2019
  // $dropdown-divider-margin-y: $spacer * .5 !default;
2013
- $dropdown-box-shadow: var(--#{$prefix}box-shadow) !default;
2020
+ // $dropdown-box-shadow: var(--#{$prefix}box-shadow) !default;
2014
2021
 
2015
- // $dropdown-link-color: $gray-900 !default;
2016
- // $dropdown-link-hover-color: shade-color($dropdown-link-color, 10%) !default;
2022
+ // $dropdown-link-color: var(--#{$prefix}body-color) !default;
2023
+ // $dropdown-link-hover-color: $dropdown-link-color !default;
2017
2024
  $dropdown-link-hover-bg: $gray-100 !default;
2018
2025
 
2019
2026
  $dropdown-link-active-color: shades-css-var('primary', 'bg-color', true) !default;
2020
2027
  $dropdown-link-active-bg: shades-css-var('primary', 'bg-color') !default;
2021
2028
 
2022
- // $dropdown-link-disabled-color: $gray-500 !default;
2029
+ $dropdown-link-disabled-color: var(--#{$prefix}gray-500) !default;
2023
2030
 
2024
2031
  // $dropdown-item-padding-y: $spacer * .25 !default;
2025
2032
  // $dropdown-item-padding-x: $spacer !default;
2026
2033
 
2027
- $dropdown-header-color: $white !default;
2034
+ $dropdown-header-color: var(--#{$prefix}white) !default;
2028
2035
  // $dropdown-header-padding-x: $dropdown-item-padding-x !default;
2029
2036
  // $dropdown-header-padding-y: $dropdown-padding-y !default;
2030
2037
  // fusv-disable
@@ -2059,34 +2066,34 @@ $pagination-padding-x-lg: 0.5rem !default;
2059
2066
 
2060
2067
  // $pagination-font-size: $font-size-base !default;
2061
2068
 
2062
- $pagination-color: $black !default;
2063
- // $pagination-bg: $white !default;
2064
- // $pagination-border-width: $border-width !default;
2065
- // $pagination-border-radius: $border-radius !default;
2066
- // $pagination-margin-start: -$pagination-border-width !default;
2067
- // $pagination-border-color: $gray-300 !default;
2069
+ $pagination-color: var(--#{$prefix}black) !default;
2070
+ // $pagination-bg: var(--#{$prefix}body-bg) !default;
2071
+ // $pagination-border-radius: var(--#{$prefix}border-radius) !default;
2072
+ // $pagination-border-width: var(--#{$prefix}border-width) !default;
2073
+ // $pagination-margin-start: calc(#{$pagination-border-width} * -1) !default; // stylelint-disable-line function-disallowed-list
2074
+ // $pagination-border-color: var(--#{$prefix}border-color) !default;
2068
2075
 
2069
2076
  $pagination-focus-color: shades-css-var('white', 'bg-color', true) !default; // $link-hover-color
2070
2077
  $pagination-focus-bg: shades-css-var('white', 'bg-color') !default; // default $gray-200
2071
- // $pagination-focus-box-shadow: $input-btn-focus-box-shadow !default;
2078
+ // $pagination-focus-box-shadow: $focus-ring-box-shadow !default;
2072
2079
  // $pagination-focus-outline: 0 !default;
2073
2080
 
2074
2081
  $pagination-hover-color: shades-css-var('white', 'bg-hover-color', true) !default;
2075
2082
  $pagination-hover-bg: shades-css-var('white', 'bg-hover-color') !default; // default $gray-200
2076
- // $pagination-hover-border-color: $gray-300 !default;
2083
+ // $pagination-hover-border-color: var(--#{$prefix}border-color) !default;
2077
2084
 
2078
2085
  // $pagination-active-color: $component-active-color !default;
2079
2086
  // $pagination-active-bg: $component-active-bg !default;
2080
2087
  // $pagination-active-border-color: $pagination-active-bg !default;
2081
2088
 
2082
- $pagination-disabled-color: $gray-300 !default;
2083
- // $pagination-disabled-bg: $white !default;
2084
- // $pagination-disabled-border-color: $gray-300 !default;
2089
+ $pagination-disabled-color: var(--#{$prefix}disabled-color) !default;
2090
+ $pagination-disabled-bg: var(--#{$prefix}white) !default;
2091
+ // $pagination-disabled-border-color: var(--#{$prefix}border-color) !default;
2085
2092
 
2086
2093
  // $pagination-transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;
2087
2094
 
2088
- // $pagination-border-radius-sm: $border-radius-sm !default;
2089
- // $pagination-border-radius-lg: $border-radius-lg !default;
2095
+ // $pagination-border-radius-sm: var(--#{$prefix}border-radius-sm) !default;
2096
+ // $pagination-border-radius-lg: var(--#{$prefix}border-radius-lg) !default;
2090
2097
  // scss-docs-end pagination-variables
2091
2098
 
2092
2099
  // Placeholders
@@ -2104,18 +2111,18 @@ $card-spacer-x: 1rem !default;
2104
2111
  // $card-title-spacer-y: $spacer * .5 !default;
2105
2112
  // $card-title-color: null !default;
2106
2113
  // $card-subtitle-color: null !default;
2107
- // $card-border-width: $border-width !default;
2108
- $card-border-color: $border-color !default;
2109
- $card-border-radius: $border-radius-lg !default;
2114
+ // $card-border-width: var(--#{$prefix}border-width) !default;
2115
+ $card-border-color: var(--#{$prefix}border-color) !default;
2116
+ $card-border-radius: var(--#{$prefix}border-radius-lg) !default;
2110
2117
  // $card-box-shadow: null !default;
2111
2118
  // $card-inner-border-radius: subtract($card-border-radius, $card-border-width) !default;
2112
2119
  // $card-cap-padding-y: $card-spacer-y * .5 !default;
2113
2120
  // $card-cap-padding-x: $card-spacer-x !default;
2114
- // $card-cap-bg: rgba($black, .03) !default;
2121
+ // $card-cap-bg: rgba(var(--#{$prefix}body-color-rgb), .03) !default;
2115
2122
  // $card-cap-color: null !default;
2116
2123
  // $card-height: null !default;
2117
2124
  // $card-color: null !default;
2118
- // $card-bg: $white !default;
2125
+ // $card-bg: var(--#{$prefix}body-bg) !default;
2119
2126
  // $card-img-overlay-padding: $spacer !default;
2120
2127
  // $card-group-margin: $grid-gutter-width * .5 !default;
2121
2128
  // scss-docs-end card-variables
@@ -2125,11 +2132,11 @@ $card-border-radius: $border-radius-lg !default;
2125
2132
  // scss-docs-start accordion-variables
2126
2133
  $accordion-padding-y: 0.75rem !default;
2127
2134
  $accordion-padding-x: 1rem !default;
2128
- $accordion-color: $body-color !default;
2129
- $accordion-bg: $body-bg !default;
2130
- // $accordion-border-width: $border-width !default;
2131
- $accordion-border-color: $border-color !default;
2132
- // $accordion-border-radius: $border-radius !default;
2135
+ $accordion-color: var(--#{$prefix}body-color) !default;
2136
+ $accordion-bg: var(--#{$prefix}body-bg) !default;
2137
+ // $accordion-border-width: var(--#{$prefix}border-width) !default;
2138
+ // $accordion-border-color: var(--#{$prefix}border-color) !default;
2139
+ // $accordion-border-radius: var(--#{$prefix}border-radius) !default;
2133
2140
  // $accordion-inner-border-radius: subtract($accordion-border-radius, $accordion-border-width) !default;
2134
2141
 
2135
2142
  // $accordion-body-padding-y: $accordion-padding-y !default;
@@ -2137,8 +2144,8 @@ $accordion-border-color: $border-color !default;
2137
2144
 
2138
2145
  // $accordion-button-padding-y: $accordion-padding-y !default;
2139
2146
  // $accordion-button-padding-x: $accordion-padding-x !default;
2140
- // $accordion-button-color: $accordion-color !default;
2141
- // $accordion-button-bg: $accordion-bg !default;
2147
+ // $accordion-button-color: var(--#{$prefix}body-color) !default;
2148
+ // $accordion-button-bg: var(--#{$prefix}accordion-bg) !default;
2142
2149
  // $accordion-transition: $btn-transition, border-radius .15s ease !default;
2143
2150
  $accordion-button-active-bg: $accordion-bg !default;
2144
2151
  $accordion-button-active-color: $accordion-color !default;
@@ -2161,13 +2168,13 @@ $accordion-icon-active-color: $accordion-icon-color !default;
2161
2168
  // scss-docs-start tooltip-variables
2162
2169
  $tooltip-font-size: 1em * map.get($df-size-ratios, 'sm') !default; // $font-size-sm !default;
2163
2170
  // $tooltip-max-width: 200px !default;
2164
- // $tooltip-color: $white !default;
2165
- $tooltip-bg: $gray-600 !default;
2171
+ // $tooltip-color: var(--#{$prefix}body-bg) !default;
2172
+ $tooltip-bg: var(--#{$prefix}gray-600) !default;
2166
2173
  $tooltip-border-radius: 0.25rem !default;
2167
2174
  $tooltip-opacity: 1 !default;
2168
2175
  $tooltip-padding-y: 0.25rem !default;
2169
2176
  $tooltip-padding-x: 0.75rem !default;
2170
- // $tooltip-margin: 0 !default;
2177
+ // $tooltip-margin: null !default; // TODO: remove this in v6
2171
2178
 
2172
2179
  // $tooltip-arrow-width: .8rem !default;
2173
2180
  // $tooltip-arrow-height: .4rem !default;
@@ -2190,21 +2197,21 @@ $tooltip-padding-x: 0.75rem !default;
2190
2197
 
2191
2198
  // scss-docs-start popover-variables
2192
2199
  $popover-font-size: $font-size-base !default;
2193
- // $popover-bg: $white !default;
2200
+ // $popover-bg: var(--#{$prefix}body-bg) !default;
2194
2201
  $popover-max-width: 50vw !default; // default 276px
2195
- // $popover-border-width: $border-width !default;
2196
- $popover-border-color: $border-color !default;
2197
- $popover-border-radius: $border-radius !default;
2198
- // $popover-inner-border-radius: subtract($popover-border-radius, $popover-border-width) !default;
2202
+ // $popover-border-width: var(--#{$prefix}border-width) !default;
2203
+ $popover-border-color: var(--#{$prefix}border-color) !default;
2204
+ $popover-border-radius: var(--#{$prefix}border-radius) !default;
2205
+ // $popover-inner-border-radius: calc(#{$popover-border-radius} - #{$popover-border-width}) !default;
2199
2206
  $popover-box-shadow: var(--#{$prefix}box-shadow) !default;
2200
2207
 
2201
2208
  // $popover-header-font-size: $font-size-base !default;
2202
- $popover-header-bg: $white !default;
2203
- // $popover-header-color: var(--#{$prefix}heading-color) !default;
2209
+ $popover-header-bg: var(--#{$prefix}white) !default;
2210
+ // $popover-header-color: $headings-color !default;
2204
2211
  $popover-header-padding-y: 0 !default;
2205
2212
  $popover-header-padding-x: 0 !default;
2206
2213
 
2207
- // $popover-body-color: $body-color !default;
2214
+ // $popover-body-color: var(--#{$prefix}body-color) !default;
2208
2215
  $popover-body-padding-y: 0 !default;
2209
2216
  $popover-body-padding-x: 0 !default;
2210
2217
 
@@ -2215,7 +2222,7 @@ $popover-arrow-width: 1.3rem !default;
2215
2222
  // fusv-disable
2216
2223
  // Deprecated in Bootstrap 5.2.0 for CSS variables
2217
2224
  // $popover-arrow-color: $popover-bg !default;
2218
- $popover-arrow-outer-color: $gray-200 !default;
2225
+ $popover-arrow-outer-color: var(--#{$prefix}gray-200) !default;
2219
2226
  // fusv-enable
2220
2227
 
2221
2228
  // Toasts
@@ -2226,16 +2233,16 @@ $toast-padding-x: 1rem !default;
2226
2233
  $toast-padding-y: 0.75rem !default;
2227
2234
  // $toast-font-size: .875rem !default;
2228
2235
  // $toast-color: null !default;
2229
- // $toast-background-color: rgba($white, .85) !default;
2230
- // $toast-border-width: 1px !default;
2231
- // $toast-border-color: rgba($black, .1) !default;
2236
+ // $toast-background-color: rgba(var(--#{$prefix}body-bg-rgb), .85) !default;
2237
+ // $toast-border-width: var(--#{$prefix}border-width) !default;
2238
+ // $toast-border-color: var(--#{$prefix}border-color-translucent) !default;
2232
2239
  $toast-border-radius: 0.25rem !default;
2233
- // $toast-box-shadow: $box-shadow !default;
2240
+ // $toast-box-shadow: var(--#{$prefix}box-shadow) !default;
2234
2241
  // $toast-spacing: $container-padding-x !default;
2235
2242
 
2236
- // $toast-header-color: $gray-600 !default;
2237
- // $toast-header-background-color: rgba($white, .85) !default;
2238
- // $toast-header-border-color: rgba($black, .05) !default;
2243
+ // $toast-header-color: var(--#{$prefix}secondary-color) !default;
2244
+ // $toast-header-background-color: rgba(var(--#{$prefix}body-bg-rgb), .85) !default;
2245
+ // $toast-header-border-color: $toast-border-color !default;
2239
2246
  // scss-docs-end toast-variables
2240
2247
 
2241
2248
  // Badges
@@ -2262,13 +2269,13 @@ $badge-border-radius: 0.25rem !default;
2262
2269
  $modal-title-line-height: 1.3 !default;
2263
2270
 
2264
2271
  // $modal-content-color: null !default;
2265
- // $modal-content-bg: $white !default;
2272
+ // $modal-content-bg: var(--#{$prefix}body-bg) !default;
2266
2273
  $modal-content-border-color: none !default;
2267
- // $modal-content-border-width: $border-width !default;
2268
- // $modal-content-border-radius: $border-radius-lg !default;
2274
+ // $modal-content-border-width: var(--#{$prefix}border-width) !default;
2275
+ // $modal-content-border-radius: var(--#{$prefix}border-radius-lg) !default;
2269
2276
  // $modal-content-inner-border-radius: subtract($modal-content-border-radius, $modal-content-border-width) !default;
2270
- // $modal-content-box-shadow-xs: $box-shadow-sm !default;
2271
- // $modal-content-box-shadow-sm-up: $box-shadow !default;
2277
+ // $modal-content-box-shadow-xs: var(--#{$prefix}box-shadow-sm) !default;
2278
+ // $modal-content-box-shadow-sm-up: var(--#{$prefix}box-shadow) !default;
2272
2279
 
2273
2280
  // $modal-backdrop-bg: $black !default;
2274
2281
  $modal-backdrop-opacity: 0.1 !default;
@@ -2302,9 +2309,9 @@ $modal-backdrop-opacity: 0.1 !default;
2302
2309
  $alert-padding-y: 0.7rem !default;
2303
2310
  $alert-padding-x: 1.25rem !default;
2304
2311
  // $alert-margin-bottom: 1rem !default;
2305
- // $alert-border-radius: $border-radius !default;
2312
+ // $alert-border-radius: var(--#{$prefix}border-radius) !default;
2306
2313
  // $alert-link-font-weight: $font-weight-bold !default;
2307
- // $alert-border-width: $border-width !default;
2314
+ // $alert-border-width: var(--#{$prefix}border-width) !default;
2308
2315
  $alert-dismissible-padding-r: $alert-padding-x * 3 !default; // 3x covers width of x plus default padding on either side
2309
2316
  // scss-docs-end alert-variables
2310
2317
 
@@ -2319,9 +2326,9 @@ $alert-dismissible-padding-r: $alert-padding-x * 3 !default; // 3x covers width
2319
2326
  // scss-docs-start progress-variables
2320
2327
  $progress-height: 5px !default;
2321
2328
  // $progress-font-size: $font-size-base * .75 !default;
2322
- $progress-bg: $gray-100 !default;
2323
- $progress-border-radius: 1rem !default;
2324
- // $progress-box-shadow: $box-shadow-inset !default;
2329
+ $progress-bg: var(--#{$prefix}gray-100) !default;
2330
+ $progress-border-radius: var(--#{$prefix}border-radius-xl) !default;
2331
+ // $progress-box-shadow: var(--#{$prefix}box-shadow-inset) !default;
2325
2332
  // $progress-bar-color: $white !default;
2326
2333
  // $progress-bar-bg: $primary !default;
2327
2334
  // $progress-bar-animation-timing: 1s linear infinite !default;
@@ -2331,11 +2338,11 @@ $progress-border-radius: 1rem !default;
2331
2338
  // List group
2332
2339
 
2333
2340
  // scss-docs-start list-group-variables
2334
- // $list-group-color: $gray-900 !default;
2335
- // $list-group-bg: $white !default;
2336
- $list-group-border-color: $border-color !default; // default rgba($black, .125)
2337
- // $list-group-border-width: $border-width !default;
2338
- // $list-group-border-radius: $border-radius !default;
2341
+ // $list-group-color: var(--#{$prefix}body-color) !default;
2342
+ // $list-group-bg: var(--#{$prefix}body-bg) !default;
2343
+ // $list-group-border-color: var(--#{$prefix}border-color) !default;
2344
+ // $list-group-border-width: var(--#{$prefix}border-width) !default;
2345
+ // $list-group-border-radius: var(--#{$prefix}border-radius) !default;
2339
2346
 
2340
2347
  $list-group-item-padding-y: 0.6875rem !default;
2341
2348
  $list-group-item-padding-x: 1rem !default;
@@ -2347,13 +2354,13 @@ $list-group-item-padding-x: 1rem !default;
2347
2354
  $list-group-hover-bg: shades-css-var('white', 'bg-hover-color') !default; // default $gray-100 $df-hover-bg-color
2348
2355
  $list-group-active-color: shades-css-var('primary', 'bg-color') !default; // default $component-active-color
2349
2356
  $list-group-active-bg: rgba(shades-rgb-css-var('primary', 'bg-color'), 0.1) !default; // $component-active-bg
2350
- $list-group-active-border-color: $gray-100 !default; // $list-group-active-bg
2357
+ $list-group-active-border-color: var(--#{$prefix}gray-100) !default; // $list-group-active-bg
2351
2358
 
2352
- $list-group-disabled-color: $gray-300 !default; // default $gray-600, align with $df-disabled-color
2353
- $list-group-disabled-bg: $gray-100 !default; // default $list-group-bg, align with $df-disabled-bg-color
2359
+ $list-group-disabled-color: var(--#{$prefix}disabled-color) !default;
2360
+ $list-group-disabled-bg: var(--#{$prefix}gray-100) !default; // default $list-group-bg, align with $df-disabled-bg-color
2354
2361
 
2355
- $list-group-action-color: $gray-900 !default; // default $gray-700
2356
- // $list-group-action-hover-color: $list-group-action-color !default;
2362
+ $list-group-action-color: var(--#{$prefix}gray-900) !default; // default var(--#{$prefix}secondary-color)
2363
+ $list-group-action-hover-color: $list-group-action-color !default;
2357
2364
 
2358
2365
  $list-group-action-active-color: shades-css-var('primary', 'bg-color') !default;
2359
2366
  $list-group-action-active-bg: rgba(shades-rgb-css-var('primary', 'bg-color'), 0.1) !default; // default $gray-200
@@ -2363,18 +2370,18 @@ $list-group-action-active-bg: rgba(shades-rgb-css-var('primary', 'bg-color'), 0.
2363
2370
 
2364
2371
  // scss-docs-start thumbnail-variables
2365
2372
  // $thumbnail-padding: .25rem !default;
2366
- // $thumbnail-bg: $body-bg !default;
2367
- // $thumbnail-border-width: $border-width !default;
2368
- // $thumbnail-border-color: $gray-300 !default;
2369
- // $thumbnail-border-radius: $border-radius !default;
2370
- // $thumbnail-box-shadow: $box-shadow-sm !default;
2373
+ // $thumbnail-bg: var(--#{$prefix}body-bg) !default;
2374
+ // $thumbnail-border-width: var(--#{$prefix}border-width) !default;
2375
+ // $thumbnail-border-color: var(--#{$prefix}border-color) !default;
2376
+ // $thumbnail-border-radius: var(--#{$prefix}border-radius) !default;
2377
+ // $thumbnail-box-shadow: var(--#{$prefix}box-shadow-sm) !default;
2371
2378
  // scss-docs-end thumbnail-variables
2372
2379
 
2373
2380
  // Figures
2374
2381
 
2375
2382
  // scss-docs-start figure-variables
2376
2383
  // $figure-caption-font-size: $small-font-size !default;
2377
- // $figure-caption-color: $gray-600 !default;
2384
+ $figure-caption-color: var(--#{$prefix}gray-600) !default;
2378
2385
  // scss-docs-end figure-variables
2379
2386
 
2380
2387
  // Breadcrumbs
@@ -2386,8 +2393,8 @@ $list-group-action-active-bg: rgba(shades-rgb-css-var('primary', 'bg-color'), 0.
2386
2393
  $breadcrumb-item-padding-x: 0 !default; //.5rem default
2387
2394
  // $breadcrumb-margin-bottom: 1rem !default;
2388
2395
  $breadcrumb-bg: none !default;
2389
- // $breadcrumb-divider-color: $gray-600 !default;
2390
- // $breadcrumb-active-color: $gray-600 !default;
2396
+ $breadcrumb-divider-color: var(--#{$prefix}gray-600) !default;
2397
+ $breadcrumb-active-color: var(--#{$prefix}gray-600) !default;
2391
2398
  // $breadcrumb-divider: quote("/") !default;
2392
2399
  // $breadcrumb-divider-flipped: $breadcrumb-divider !default;
2393
2400
  // $breadcrumb-border-radius: null !default;
@@ -2473,8 +2480,8 @@ $btn-close-opacity: 0.55 !default;
2473
2480
  // $offcanvas-border-color: $modal-content-border-color !default;
2474
2481
  // $offcanvas-border-width: $modal-content-border-width !default;
2475
2482
  // $offcanvas-title-line-height: $modal-title-line-height !default;
2476
- // $offcanvas-bg-color: $modal-content-bg !default;
2477
- // $offcanvas-color: $modal-content-color !default;
2483
+ // $offcanvas-bg-color: var(--#{$prefix}body-bg) !default;
2484
+ // $offcanvas-color: var(--#{$prefix}body-color) !default;
2478
2485
  // $offcanvas-box-shadow: $modal-content-box-shadow-xs !default;
2479
2486
  // $offcanvas-backdrop-bg: $modal-backdrop-bg !default;
2480
2487
  // $offcanvas-backdrop-opacity: $modal-backdrop-opacity !default;
@@ -2488,8 +2495,8 @@ $code-color: shades-css-var('pink', 'text-color') !default;
2488
2495
  // $kbd-padding-y: .2rem !default;
2489
2496
  // $kbd-padding-x: .4rem !default;
2490
2497
  // $kbd-font-size: $code-font-size !default;
2491
- // $kbd-color: $white !default;
2492
- // $kbd-bg: $gray-900 !default;
2498
+ // $kbd-color: var(--#{$prefix}body-bg) !default;
2499
+ // $kbd-bg: var(--#{$prefix}body-color) !default;
2493
2500
  // $nested-kbd-font-weight: null !default; // Deprecated in v5.2.0, removing in v6
2494
2501
 
2495
2502
  // $pre-color: null !default;