zephyr: fix dark-mode style for input addon, breadcrumb, pagination, …

…headings, closes #1275

dist/zephyr/_bootswatch.scss

@@ -146,7 +146,7 @@ thead th {
 .breadcrumb {
   font-size: $font-size-sm;
   font-weight: 500;
-  border: 1px solid $gray-300;
+  border: 1px solid var(--bs-secondary-bg);
   border-radius: $border-radius;
   box-shadow: $box-shadow;
 
@@ -203,7 +203,7 @@ thead th {
 }
 
 .modal-footer {
-  background-color: $gray-100;
+  background-color: var(--bs-tertiary-bg);
 }
 
 .modal-content {

dist/zephyr/_variables.scss

@@ -47,7 +47,7 @@ $enable-shadows:              true !default;
 
 $body-color:                $gray-700 !default;
 
-$headings-color:              $gray-900 !default;
+$headings-color:              var(--bs-primary-color) !default;
 
 // Fonts
 
@@ -89,8 +89,6 @@ $form-label-font-weight:                500 !default;
 
 $input-box-shadow:                      $box-shadow !default;
 
-$input-group-addon-bg:                  $gray-100 !default;
-
 // Navs
 
 $nav-link-color:                    $body-color !default;
@@ -122,12 +120,15 @@ $dropdown-item-padding-x:           1rem !default;
 $pagination-padding-y:              .5rem !default;
 $pagination-padding-x:              1rem !default;
 
-$pagination-color:                  $gray-700 !default;
+$pagination-color:                  var(--bs-primary-bg) !default;
 
 $pagination-focus-color:            $pagination-color !default;
 
 $pagination-hover-color:            $pagination-color !default;
-$pagination-hover-bg:               $gray-100 !default;
+$pagination-hover-bg:               var(--bs-secondary-bg) !default;
+
+$pagination-disabled-color:         var(--bs-tertiary-color) !default;
+$pagination-disabled-bg:            var(--bs-tertiary-bg) !default;
 
 // Cards
 $card-spacer-x:                     1.5rem !default;
@@ -140,7 +141,6 @@ $toast-header-color:                $headings-color !default;
 
 // Modals
 
-$modal-content-border-color:        $gray-300 !default;
 $modal-header-border-width:         0 !default;
 
 // List group

dist/zephyr/bootstrap.css

@@ -100,7 +100,7 @@
   --bs-tertiary-color-rgb: 73, 80, 87;
   --bs-tertiary-bg: #f8f9fa;
   --bs-tertiary-bg-rgb: 248, 249, 250;
-  --bs-heading-color: #212529;
+  --bs-heading-color: var(--bs-primary-color);
   --bs-link-color: #3459e6;
   --bs-link-color-rgb: 52, 89, 230;
   --bs-link-decoration: underline;
@@ -2752,7 +2752,7 @@ textarea.form-control-lg {
   color: var(--bs-body-color);
   text-align: center;
   white-space: nowrap;
-  background-color: #f8f9fa;
+  background-color: var(--bs-tertiary-bg);
   border: var(--bs-border-width) solid var(--bs-border-color);
   border-radius: var(--bs-border-radius);
 }
@@ -4768,22 +4768,22 @@ textarea.form-control-lg {
   --bs-pagination-padding-x: 1rem;
   --bs-pagination-padding-y: 0.5rem;
   --bs-pagination-font-size: 1rem;
-  --bs-pagination-color: #495057;
+  --bs-pagination-color: var(--bs-primary-bg);
   --bs-pagination-bg: var(--bs-body-bg);
   --bs-pagination-border-width: var(--bs-border-width);
   --bs-pagination-border-color: var(--bs-border-color);
   --bs-pagination-border-radius: var(--bs-border-radius);
-  --bs-pagination-hover-color: #495057;
-  --bs-pagination-hover-bg: #f8f9fa;
+  --bs-pagination-hover-color: var(--bs-primary-bg);
+  --bs-pagination-hover-bg: var(--bs-secondary-bg);
   --bs-pagination-hover-border-color: var(--bs-border-color);
-  --bs-pagination-focus-color: #495057;
+  --bs-pagination-focus-color: var(--bs-primary-bg);
   --bs-pagination-focus-bg: var(--bs-secondary-bg);
   --bs-pagination-focus-box-shadow: 0 0 0 0.25rem rgba(52, 89, 230, 0.25);
   --bs-pagination-active-color: #fff;
   --bs-pagination-active-bg: #3459e6;
   --bs-pagination-active-border-color: #3459e6;
-  --bs-pagination-disabled-color: var(--bs-secondary-color);
-  --bs-pagination-disabled-bg: var(--bs-secondary-bg);
+  --bs-pagination-disabled-color: var(--bs-tertiary-color);
+  --bs-pagination-disabled-bg: var(--bs-tertiary-bg);
   --bs-pagination-disabled-border-color: var(--bs-border-color);
   display: flex;
   padding-left: 0;
@@ -5444,7 +5444,7 @@ textarea.form-control-lg {
   --bs-toast-border-color: var(--bs-border-color-translucent);
   --bs-toast-border-radius: var(--bs-border-radius);
   --bs-toast-box-shadow: var(--bs-box-shadow);
-  --bs-toast-header-color: #212529;
+  --bs-toast-header-color: var(--bs-primary-color);
   --bs-toast-header-bg: rgba(var(--bs-body-bg-rgb), 0.85);
   --bs-toast-header-border-color: var(--bs-border-color-translucent);
   width: var(--bs-toast-max-width);
@@ -5507,7 +5507,7 @@ textarea.form-control-lg {
   --bs-modal-margin: 0.5rem;
   --bs-modal-color: ;
   --bs-modal-bg: var(--bs-body-bg);
-  --bs-modal-border-color: #dee2e6;
+  --bs-modal-border-color: var(--bs-border-color-translucent);
   --bs-modal-border-width: var(--bs-border-width);
   --bs-modal-border-radius: var(--bs-border-radius-lg);
   --bs-modal-box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
@@ -5908,7 +5908,7 @@ textarea.form-control-lg {
   --bs-popover-header-padding-x: 1rem;
   --bs-popover-header-padding-y: 0.5rem;
   --bs-popover-header-font-size: 1rem;
-  --bs-popover-header-color: #212529;
+  --bs-popover-header-color: var(--bs-primary-color);
   --bs-popover-header-bg: var(--bs-secondary-bg);
   --bs-popover-body-padding-x: 1rem;
   --bs-popover-body-padding-y: 1rem;
@@ -6339,7 +6339,7 @@ textarea.form-control-lg {
   --bs-offcanvas-color: var(--bs-body-color);
   --bs-offcanvas-bg: var(--bs-body-bg);
   --bs-offcanvas-border-width: var(--bs-border-width);
-  --bs-offcanvas-border-color: #dee2e6;
+  --bs-offcanvas-border-color: var(--bs-border-color-translucent);
   --bs-offcanvas-box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
   --bs-offcanvas-transition: transform 0.3s ease-in-out;
   --bs-offcanvas-title-line-height: 1.5;
@@ -12214,7 +12214,7 @@ thead th {
 .breadcrumb {
   font-size: 0.875rem;
   font-weight: 500;
-  border: 1px solid #dee2e6;
+  border: 1px solid var(--bs-secondary-bg);
   border-radius: 0.375rem;
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
 }
@@ -12270,7 +12270,7 @@ thead th {
 }
 
 .modal-footer {
-  background-color: #f8f9fa;
+  background-color: var(--bs-tertiary-bg);
 }
 
 .modal-content {

dist/zephyr/bootstrap.rtl.css

@@ -100,7 +100,7 @@
   --bs-tertiary-color-rgb: 73, 80, 87;
   --bs-tertiary-bg: #f8f9fa;
   --bs-tertiary-bg-rgb: 248, 249, 250;
-  --bs-heading-color: #212529;
+  --bs-heading-color: var(--bs-primary-color);
   --bs-link-color: #3459e6;
   --bs-link-color-rgb: 52, 89, 230;
   --bs-link-decoration: underline;
@@ -2750,7 +2750,7 @@ textarea.form-control-lg {
   color: var(--bs-body-color);
   text-align: center;
   white-space: nowrap;
-  background-color: #f8f9fa;
+  background-color: var(--bs-tertiary-bg);
   border: var(--bs-border-width) solid var(--bs-border-color);
   border-radius: var(--bs-border-radius);
 }
@@ -4766,22 +4766,22 @@ textarea.form-control-lg {
   --bs-pagination-padding-x: 1rem;
   --bs-pagination-padding-y: 0.5rem;
   --bs-pagination-font-size: 1rem;
-  --bs-pagination-color: #495057;
+  --bs-pagination-color: var(--bs-primary-bg);
   --bs-pagination-bg: var(--bs-body-bg);
   --bs-pagination-border-width: var(--bs-border-width);
   --bs-pagination-border-color: var(--bs-border-color);
   --bs-pagination-border-radius: var(--bs-border-radius);
-  --bs-pagination-hover-color: #495057;
-  --bs-pagination-hover-bg: #f8f9fa;
+  --bs-pagination-hover-color: var(--bs-primary-bg);
+  --bs-pagination-hover-bg: var(--bs-secondary-bg);
   --bs-pagination-hover-border-color: var(--bs-border-color);
-  --bs-pagination-focus-color: #495057;
+  --bs-pagination-focus-color: var(--bs-primary-bg);
   --bs-pagination-focus-bg: var(--bs-secondary-bg);
   --bs-pagination-focus-box-shadow: 0 0 0 0.25rem rgba(52, 89, 230, 0.25);
   --bs-pagination-active-color: #fff;
   --bs-pagination-active-bg: #3459e6;
   --bs-pagination-active-border-color: #3459e6;
-  --bs-pagination-disabled-color: var(--bs-secondary-color);
-  --bs-pagination-disabled-bg: var(--bs-secondary-bg);
+  --bs-pagination-disabled-color: var(--bs-tertiary-color);
+  --bs-pagination-disabled-bg: var(--bs-tertiary-bg);
   --bs-pagination-disabled-border-color: var(--bs-border-color);
   display: flex;
   padding-right: 0;
@@ -5442,7 +5442,7 @@ textarea.form-control-lg {
   --bs-toast-border-color: var(--bs-border-color-translucent);
   --bs-toast-border-radius: var(--bs-border-radius);
   --bs-toast-box-shadow: var(--bs-box-shadow);
-  --bs-toast-header-color: #212529;
+  --bs-toast-header-color: var(--bs-primary-color);
   --bs-toast-header-bg: rgba(var(--bs-body-bg-rgb), 0.85);
   --bs-toast-header-border-color: var(--bs-border-color-translucent);
   width: var(--bs-toast-max-width);
@@ -5505,7 +5505,7 @@ textarea.form-control-lg {
   --bs-modal-margin: 0.5rem;
   --bs-modal-color: ;
   --bs-modal-bg: var(--bs-body-bg);
-  --bs-modal-border-color: #dee2e6;
+  --bs-modal-border-color: var(--bs-border-color-translucent);
   --bs-modal-border-width: var(--bs-border-width);
   --bs-modal-border-radius: var(--bs-border-radius-lg);
   --bs-modal-box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
@@ -5898,7 +5898,7 @@ textarea.form-control-lg {
   --bs-popover-header-padding-x: 1rem;
   --bs-popover-header-padding-y: 0.5rem;
   --bs-popover-header-font-size: 1rem;
-  --bs-popover-header-color: #212529;
+  --bs-popover-header-color: var(--bs-primary-color);
   --bs-popover-header-bg: var(--bs-secondary-bg);
   --bs-popover-body-padding-x: 1rem;
   --bs-popover-body-padding-y: 1rem;
@@ -6312,7 +6312,7 @@ textarea.form-control-lg {
   --bs-offcanvas-color: var(--bs-body-color);
   --bs-offcanvas-bg: var(--bs-body-bg);
   --bs-offcanvas-border-width: var(--bs-border-width);
-  --bs-offcanvas-border-color: #dee2e6;
+  --bs-offcanvas-border-color: var(--bs-border-color-translucent);
   --bs-offcanvas-box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
   --bs-offcanvas-transition: transform 0.3s ease-in-out;
   --bs-offcanvas-title-line-height: 1.5;
@@ -12179,7 +12179,7 @@ thead th {
 .breadcrumb {
   font-size: 0.875rem;
   font-weight: 500;
-  border: 1px solid #dee2e6;
+  border: 1px solid var(--bs-secondary-bg);
   border-radius: 0.375rem;
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
 }
@@ -12235,7 +12235,7 @@ thead th {
 }
 
 .modal-footer {
-  background-color: #f8f9fa;
+  background-color: var(--bs-tertiary-bg);
 }
 
 .modal-content {

docs/5/zephyr/_bootswatch.scss

@@ -146,7 +146,7 @@ thead th {
 .breadcrumb {
   font-size: $font-size-sm;
   font-weight: 500;
-  border: 1px solid $gray-300;
+  border: 1px solid var(--bs-secondary-bg);
   border-radius: $border-radius;
   box-shadow: $box-shadow;
 
@@ -203,7 +203,7 @@ thead th {
 }
 
 .modal-footer {
-  background-color: $gray-100;
+  background-color: var(--bs-tertiary-bg);
 }
 
 .modal-content {

docs/5/zephyr/_variables.scss

@@ -47,7 +47,7 @@ $enable-shadows:              true !default;
 
 $body-color:                $gray-700 !default;
 
-$headings-color:              $gray-900 !default;
+$headings-color:              var(--bs-primary-color) !default;
 
 // Fonts
 
@@ -89,8 +89,6 @@ $form-label-font-weight:                500 !default;
 
 $input-box-shadow:                      $box-shadow !default;
 
-$input-group-addon-bg:                  $gray-100 !default;
-
 // Navs
 
 $nav-link-color:                    $body-color !default;
@@ -122,12 +120,15 @@ $dropdown-item-padding-x:           1rem !default;
 $pagination-padding-y:              .5rem !default;
 $pagination-padding-x:              1rem !default;
 
-$pagination-color:                  $gray-700 !default;
+$pagination-color:                  var(--bs-primary-bg) !default;
 
 $pagination-focus-color:            $pagination-color !default;
 
 $pagination-hover-color:            $pagination-color !default;
-$pagination-hover-bg:               $gray-100 !default;
+$pagination-hover-bg:               var(--bs-secondary-bg) !default;
+
+$pagination-disabled-color:         var(--bs-tertiary-color) !default;
+$pagination-disabled-bg:            var(--bs-tertiary-bg) !default;
 
 // Cards
 $card-spacer-x:                     1.5rem !default;
@@ -140,7 +141,6 @@ $toast-header-color:                $headings-color !default;
 
 // Modals
 
-$modal-content-border-color:        $gray-300 !default;
 $modal-header-border-width:         0 !default;
 
 // List group