diff --git a/src/scss/_utilities.scss b/src/scss/_utilities.scss
index b9aec61a2d..c4fb5de34b 100644
--- a/src/scss/_utilities.scss
+++ b/src/scss/_utilities.scss
@@ -1,5 +1,3 @@
-$margin-spacers: map-merge($spacers, (auto: auto, null: $spacer));
-
$border-values: (
null: $border-width var(--#{$prefix}border-style) $border-color-translucent,
wide: $border-width-wide var(--#{$prefix}border-style) $border-color-translucent,
diff --git a/src/scss/_variables.scss b/src/scss/_variables.scss
index f23914ac7c..dedaa2301f 100644
--- a/src/scss/_variables.scss
+++ b/src/scss/_variables.scss
@@ -263,7 +263,9 @@ $gray-colors: (
$theme-colors: map-merge($theme-colors, map-merge($extra-colors, $social-colors));
+//
// Dark mode
+//
$dark-mode-darken: darken($dark, 2%) !default;
$dark-mode-lighten: lighten($dark, 2%) !default;
$dark-mode-border-color: lighten($dark, 4%) !default;
@@ -313,17 +315,26 @@ $avatar-font-size: $h4-font-size;
$link-decoration: none !default;
$link-hover-decoration: underline !default;
-//Typography
-
+// Typography
$hr-opacity: $border-opacity !default;
$hr-margin-y: 2rem !default;
+// Caret
+$caret-width: .36em !default;
$caret-spacing: .4em !default;
-//Sizing
+// Grid
$grid-gutter-width: 1rem !default;
$container-padding-x: 1.5rem !default;
+$container-variations: (
+ tight: 30rem,
+ narrow: 45rem,
+) !default;
+
+$content-padding-y: 1.25rem !default;
+
+// Spacers
$spacer: 1rem !default;
$spacers: (
0: 0,
@@ -336,13 +347,13 @@ $spacers: (
$negative-spacers: if($enable-negative-margins, negativify-map($spacers), null) !default;
+// Sizes
$size-spacers: (
auto: auto,
px: 1px,
full: 100%
) !default;
-
$size-values: map-merge($spacers, (
25: 25%,
33: 33.33333%,
@@ -353,14 +364,6 @@ $size-values: map-merge($spacers, (
auto: auto
)) !default;
-
-$container-variations: (
- tight: 30rem,
- narrow: 45rem,
-) !default;
-
-$content-padding-y: 1.25rem !default;
-
// Aspect ratios
$aspect-ratios: (
"1x1": 100%,
@@ -395,7 +398,7 @@ $transition-time: .3s !default;
// Overlay
$overlay-gradient: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .6) 100%) !default;
-//accordion
+// Accordion
$accordion-bg: transparent !default;
$accordion-color: var(--#{$prefix}body-color) !default;
$accordion-border-color: var(--#{$prefix}border-color-translucent) !default;
@@ -406,7 +409,7 @@ $accordion-button-active-bg: transparent !default;
$accordion-button-active-color: inherit !default;
$accordion-button-focus-border-color: $accordion-border-color !default;
-//alerts
+// Alerts
$alert-padding-x: 1rem !default;
$alert-padding-y: 1rem !default;
$alert-link-font-weight: var(--#{$prefix}font-weight-bold) !default;
@@ -415,7 +418,7 @@ $alert-border-width: 1px !default;
$alert-border-color: var(--#{$prefix}border-color-translucent) !default;
$alert-shadow: rgba($dark, .04) 0 2px 4px 0 !default;
-//breadcrumb
+// Breadcrumb
$breadcrumb-divider-color: var(--#{$prefix}muted) !default;
$breadcrumb-active-color: inherit !default;
@@ -425,7 +428,7 @@ $breadcrumb-variants: (
bullets: "\02022",
) !default;
-//badges
+// Badges
$badge-font-size: $code-font-size !default;
$badge-line-height: $code-line-height !default;
$badge-font-weight: var(--#{$prefix}font-weight-medium) !default;
@@ -433,7 +436,7 @@ $badge-padding-y: .25em !default;
$badge-padding-x: .5em !default;
$badge-empty-size: .5rem !default;
-//buttons
+// Buttons
$input-btn-line-height: $line-height-base !default;
$input-btn-font-size: $font-size-base !default;
$input-btn-font-family: var(--#{$prefix}font-sans-serif) !default;
@@ -449,7 +452,7 @@ $input-btn-padding-y-lg: .5rem !default;
$input-btn-focus-width: .25rem !default;
-// inputs
+// Inputs
$input-height: null !default;
$input-height-sm: null !default;
$input-height-lg: null !default;
@@ -457,12 +460,12 @@ $input-border-radius: var(--#{$prefix}border-radius) !default;
$input-color: inherit !default;
$input-focus-color: inherit !default;
-// buttons
+// Buttons
$btn-padding-x: 1rem !default;
$btn-font-weight: var(--#{$prefix}font-weight-medium) !default;
$btn-border-radius: var(--#{$prefix}border-radius) !default;
-//cards
+// Cards
$card-title-spacer-y: 1.25rem !default;
$card-box-shadow: var(--#{$prefix}shadow-card) !default;
$card-hover-box-shadow: var(--#{$prefix}shadow-card-hover) !default;
@@ -488,10 +491,15 @@ $card-group-margin: 1.5rem !default;
$card-stamp-opacity: .2 !default;
+$card-ribbon-margin: .25rem !default;
+$card-ribbon-border-radius: var(--#{$prefix}border-radius) !default;
+$card-ribbon-font-size: $h6-font-size !default;
+
$cards-grid-gap: 1rem !default;
$cards-grid-breakpoint: lg !default;
-//carousel
+
+// Carousel
$carousel-control-color: $white !default;
$carousel-control-icon-width: 1.5rem !default;
$carousel-control-prev-icon-bg: url("data:image/svg+xml,") !default;
@@ -499,18 +507,17 @@ $carousel-control-next-icon-bg: url("data:image/svg+xml,") !default;
$table-sort-desc-bg-image: url("data:image/svg+xml,") !default;
-//toasts
+// Toasts
$toast-border-color: var(--#{$prefix}border-color) !default;
$toast-header-color: var(--#{$prefix}muted) !default;
-//tracking
+// Tracking
$tracking-height: 1.5rem !default;
$tracking-gap-width: .125rem !default;
$tracking-border-radius: var(--#{$prefix}border-radius) !default;
-//progress
+// Progress
$progress-bg: var(--#{$prefix}border-color) !default;
$progress-border-radius: var(--#{$prefix}border-radius) !default;
$progress-bar-bg: var(--#{$prefix}primary) !default;
$progress-height: .5rem !default;
-//ribbons
-$ribbon-margin: .25rem !default;
-
-
+// Lists
$list-group-bg: inherit !default;
$list-group-border-color: var(--#{$prefix}border-color) !default;
$list-group-action-color: inherit !default;
@@ -729,24 +731,25 @@ $input-group-addon-color: var(--#{$prefix}muted) !default;
$input-border-radius: var(--#{$prefix}border-radius) !default;
-//Forms
+// Forms
$form-check-margin-bottom: .5rem !default;
$form-check-input-width: 1rem !default;
$form-check-padding-start: $form-check-input-width + .5rem !default;
+
$form-check-input-bg: var(--#{$prefix}bg-forms) !default;
$form-check-input-border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) $input-border-color-translucent !default;
$form-check-input-border-radius: var(--#{$prefix}border-radius) !default;
+
$form-check-input-checked-bg-size: 1rem !default;
$form-check-input-checked-bg-color: var(--#{$prefix}primary) !default;
-
$form-check-input-checked-color: var(--#{$prefix}bg-forms) !default;
$form-check-input-checked-bg-repeat: repeat !default;
$form-check-input-checked-bg-image: url("data:image/svg+xml,") !default;
$form-check-input-checked-bg-image-dark: url("data:image/svg+xml,") !default;
-$form-check-radio-checked-bg-image: url("data:image/svg+xml,") !default;
-
$form-check-input-checked-border-color: $input-border-color-translucent !default;
+$form-check-radio-checked-bg-image: url("data:image/svg+xml,") !default;
+
$form-check-label-disabled-opacity: $text-muted-opacity;
$form-select-indicator-color: $text-muted-light !default;
@@ -770,20 +773,18 @@ $form-feedback-icon-invalid: str-replace(url("data:image/svg+xml,