admin-lte 4.0.0-alpha3 → 4.0.0-beta1

package/src/html/pages/index3.astro

@@ -65,7 +65,7 @@ const page = "index3";
                   <div class="card-header border-0">
                     <div class="d-flex justify-content-between">
                       <h3 class="card-title">Online Store Visitors</h3>
-                      <a href="javascript:void(0);">View Report</a>
+                      <a href="javascript:void(0);" class="link-primary link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">View Report</a>
                     </div>
                   </div>
                   <div class="card-body">
@@ -100,7 +100,7 @@ const page = "index3";
                 </div>
                 <!-- /.card -->
 
-                <div class="card">
+                <div class="card mb-4">
                   <div class="card-header border-0">
                     <h3 class="card-title">Products</h3>
                     <div class="card-tools">
@@ -157,7 +157,7 @@ const page = "index3";
                           </td>
                           <td>$29 USD</td>
                           <td>
-                            <small class="text-warning me-1">
+                            <small class="text-info me-1">
                               <i class="bi bi-arrow-down"></i>
                               0.5%
                             </small>
@@ -228,7 +228,7 @@ const page = "index3";
                   <div class="card-header border-0">
                     <div class="d-flex justify-content-between">
                       <h3 class="card-title">Sales</h3>
-                      <a href="javascript:void(0);">View Report</a>
+                      <a href="javascript:void(0);" class="link-primary link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">View Report</a>
                     </div>
                   </div>
                   <div class="card-body">
@@ -298,7 +298,7 @@ const page = "index3";
                       </p>
                       <p class="d-flex flex-column text-end">
                         <span class="fw-bold">
-                          <i class="ion ion-android-arrow-up text-success"></i> 12%
+                          <i class="bi bi-graph-up-arrow text-success"></i> 12%
                         </span>
                         <span class="text-secondary">CONVERSION RATE</span>
                       </p>
@@ -307,7 +307,7 @@ const page = "index3";
                     <div
                       class="d-flex justify-content-between align-items-center border-bottom mb-3"
                     >
-                      <p class="text-warning fs-2">
+                      <p class="text-info fs-2">
                         <svg
                           height="32"
                           fill="none"
@@ -326,7 +326,7 @@ const page = "index3";
                       </p>
                       <p class="d-flex flex-column text-end">
                         <span class="fw-bold">
-                          <i class="ion ion-android-arrow-up text-warning"></i> 0.8%
+                          <i class="bi bi-graph-up-arrow text-info"></i> 0.8%
                         </span>
                         <span class="text-secondary">SALES RATE</span>
                       </p>
@@ -354,7 +354,7 @@ const page = "index3";
                       </p>
                       <p class="d-flex flex-column text-end">
                         <span class="fw-bold">
-                          <i class="ion ion-android-arrow-down text-danger"></i>
+                          <i class="bi bi-graph-down-arrow text-danger"></i>
                           1%
                         </span>
                         <span class="text-secondary">REGISTRATION RATE</span>
@@ -393,7 +393,7 @@ const page = "index3";
       // IT'S ALL JUST JUNK FOR DEMO
       // ++++++++++++++++++++++++++++++++++++++++++
 
-      var visitors_chart_options = {
+      const visitors_chart_options = {
         series: [
           {
             name: "High - 2023",
@@ -433,13 +433,13 @@ const page = "index3";
         },
       };
 
-      var visitors_chart = new ApexCharts(
+      const visitors_chart = new ApexCharts(
         document.querySelector("#visitors-chart"),
         visitors_chart_options
       );
       visitors_chart.render();
 
-      var sales_chart_options = {
+      const sales_chart_options = {
         series: [
           {
             name: "Net Profit",
@@ -502,7 +502,7 @@ const page = "index3";
         },
       };
 
-      var sales_chart = new ApexCharts(
+      const sales_chart = new ApexCharts(
         document.querySelector("#sales-chart"),
         sales_chart_options
       );

package/src/html/pages/tables/simple.astro

@@ -56,7 +56,7 @@ const page = "simple";
             <!--begin::Row-->
             <div class="row">
               <div class="col-md-6">
-                <div class="card">
+                <div class="card mb-4">
                   <div class="card-header">
                     <h3 class="card-title">Bordered Table</h3>
                   </div>
@@ -72,7 +72,7 @@ const page = "simple";
                         </tr>
                       </thead>
                       <tbody>
-                        <tr>
+                        <tr class="align-middle">
                           <td>1.</td>
                           <td>Update software</td>
                           <td>
@@ -86,7 +86,7 @@ const page = "simple";
                           </td>
                           <td><span class="badge text-bg-danger">55%</span></td>
                         </tr>
-                        <tr>
+                        <tr class="align-middle">
                           <td>2.</td>
                           <td>Clean database</td>
                           <td>
@@ -102,7 +102,7 @@ const page = "simple";
                             <span class="badge text-bg-warning">70%</span>
                           </td>
                         </tr>
-                        <tr>
+                        <tr class="align-middle">
                           <td>3.</td>
                           <td>Cron job running</td>
                           <td>
@@ -120,7 +120,7 @@ const page = "simple";
                             <span class="badge text-bg-primary">30%</span>
                           </td>
                         </tr>
-                        <tr>
+                        <tr class="align-middle">
                           <td>4.</td>
                           <td>Fix and squish bugs</td>
                           <td>
@@ -164,7 +164,7 @@ const page = "simple";
                 </div>
                 <!-- /.card -->
 
-                <div class="card">
+                <div class="card mb-4">
                   <div class="card-header">
                     <h3 class="card-title">Condensed Full Width Table</h3>
                   </div>
@@ -180,7 +180,7 @@ const page = "simple";
                         </tr>
                       </thead>
                       <tbody>
-                        <tr>
+                        <tr class="align-middle">
                           <td>1.</td>
                           <td>Update software</td>
                           <td>
@@ -194,7 +194,7 @@ const page = "simple";
                           </td>
                           <td><span class="badge text-bg-danger">55%</span></td>
                         </tr>
-                        <tr>
+                        <tr class="align-middle">
                           <td>2.</td>
                           <td>Clean database</td>
                           <td>
@@ -210,7 +210,7 @@ const page = "simple";
                             <span class="badge text-bg-warning">70%</span>
                           </td>
                         </tr>
-                        <tr>
+                        <tr class="align-middle">
                           <td>3.</td>
                           <td>Cron job running</td>
                           <td>
@@ -228,7 +228,7 @@ const page = "simple";
                             <span class="badge text-bg-primary">30%</span>
                           </td>
                         </tr>
-                        <tr>
+                        <tr class="align-middle">
                           <td>4.</td>
                           <td>Fix and squish bugs</td>
                           <td>
@@ -255,7 +255,7 @@ const page = "simple";
               </div>
               <!-- /.col -->
               <div class="col-md-6">
-                <div class="card">
+                <div class="card mb-4">
                   <div class="card-header">
                     <h3 class="card-title">Simple Full Width Table</h3>
 
@@ -291,7 +291,7 @@ const page = "simple";
                         </tr>
                       </thead>
                       <tbody>
-                        <tr>
+                        <tr class="align-middle">
                           <td>1.</td>
                           <td>Update software</td>
                           <td>
@@ -305,7 +305,7 @@ const page = "simple";
                           </td>
                           <td><span class="badge text-bg-danger">55%</span></td>
                         </tr>
-                        <tr>
+                        <tr class="align-middle">
                           <td>2.</td>
                           <td>Clean database</td>
                           <td>
@@ -321,7 +321,7 @@ const page = "simple";
                             <span class="badge text-bg-warning">70%</span>
                           </td>
                         </tr>
-                        <tr>
+                        <tr class="align-middle">
                           <td>3.</td>
                           <td>Cron job running</td>
                           <td>
@@ -339,7 +339,7 @@ const page = "simple";
                             <span class="badge text-bg-primary">30%</span>
                           </td>
                         </tr>
-                        <tr>
+                        <tr class="align-middle">
                           <td>4.</td>
                           <td>Fix and squish bugs</td>
                           <td>
@@ -364,7 +364,7 @@ const page = "simple";
                 </div>
                 <!-- /.card -->
 
-                <div class="card">
+                <div class="card mb-4">
                   <div class="card-header">
                     <h3 class="card-title">Striped Full Width Table</h3>
                   </div>
@@ -380,7 +380,7 @@ const page = "simple";
                         </tr>
                       </thead>
                       <tbody>
-                        <tr>
+                        <tr class="align-middle">
                           <td>1.</td>
                           <td>Update software</td>
                           <td>
@@ -394,7 +394,7 @@ const page = "simple";
                           </td>
                           <td><span class="badge text-bg-danger">55%</span></td>
                         </tr>
-                        <tr>
+                        <tr class="align-middle">
                           <td>2.</td>
                           <td>Clean database</td>
                           <td>
@@ -410,7 +410,7 @@ const page = "simple";
                             <span class="badge text-bg-warning">70%</span>
                           </td>
                         </tr>
-                        <tr>
+                        <tr class="align-middle">
                           <td>3.</td>
                           <td>Cron job running</td>
                           <td>
@@ -428,7 +428,7 @@ const page = "simple";
                             <span class="badge text-bg-primary">30%</span>
                           </td>
                         </tr>
-                        <tr>
+                        <tr class="align-middle">
                           <td>4.</td>
                           <td>Fix and squish bugs</td>
                           <td>

package/src/html/pages/widgets/cards.astro

@@ -57,7 +57,7 @@ const page = "cards";
 
             <h5 class="mb-2">Abilities</h5>
             <!--begin::Row-->
-            <div class="row">
+            <div class="row g-4 mb-4">
               <div class="col-md-3">
                 <div class="card card-primary collapsed-card">
                   <div class="card-header">
@@ -158,7 +158,7 @@ const page = "cards";
 
             <h5 class="mb-2">Card Outlined</h5>
             <!--begin::Row-->
-            <div class="row">
+            <div class="row g-4 mb-4">
               <div class="col-md-3">
                 <div class="card card-outline card-primary collapsed-card">
                   <div class="card-header">
@@ -259,7 +259,7 @@ const page = "cards";
 
             <h5 class="mb-2">Card with <code>.text-bg-*</code></h5>
             <!--begin::Row-->
-            <div class="row">
+            <div class="row g-4 mb-4">
               <div class="col-md-3">
                 <div class="card text-bg-primary collapsed-card">
                   <div class="card-header">

package/src/html/pages/widgets/small-box.astro

@@ -126,7 +126,7 @@ const page = "small-box";
                       d="M6.25 6.375a4.125 4.125 0 118.25 0 4.125 4.125 0 01-8.25 0zM3.25 19.125a7.125 7.125 0 0114.25 0v.003l-.001.119a.75.75 0 01-.363.63 13.067 13.067 0 01-6.761 1.873c-2.472 0-4.786-.684-6.76-1.873a.75.75 0 01-.364-.63l-.001-.122zM19.75 7.5a.75.75 0 00-1.5 0v2.25H16a.75.75 0 000 1.5h2.25v2.25a.75.75 0 001.5 0v-2.25H22a.75.75 0 000-1.5h-2.25V7.5z"
                     ></path>
                   </svg>
-                  <a href="#" class="small-box-footer link-light link-underline-opacity-0 link-underline-opacity-50-hover">
+                  <a href="#" class="small-box-footer link-dark link-underline-opacity-0 link-underline-opacity-50-hover">
                     More info <i class="bi bi-link-45deg"></i>
                   </a>
                 </div>

package/src/scss/_app-main.scss

@@ -12,6 +12,10 @@
       padding: 0;
       margin-bottom: 0;
       line-height: 2.5rem;
+
+      a {
+        text-decoration: none;
+      }
     }
   }
 }

package/src/scss/_app-sidebar.scss

@@ -187,7 +187,7 @@
 
       .nav-arrow {
         @include transition(transform $lte-transition-fn $lte-transition-speed);
-        transform: translateY(-50%) #{"/*rtl:rotate(180deg)*/"};
+        transform: translateY(-50%) #{"/*rtl:append:rotate(180deg)*/"};
         animation-name: fadeIn;
         animation-duration: $lte-transition-speed;
         animation-fill-mode: both;
@@ -244,7 +244,7 @@
 
     > .nav-link {
       .nav-arrow {
-        transform: translateY(-50%) rotate(90deg) #{"/*rtl:rotate(90deg)*/"};
+        transform: translateY(-50%) rotate(90deg) #{"/*rtl:ignore*/"};
       }
     }
   }

package/src/scss/_bootstrap-variables.scss

@@ -607,7 +607,7 @@ $aspect-ratios: (
 
 // scss-docs-start font-variables
 // stylelint-disable value-keyword-case
-$font-family-sans-serif:      "Source Sans Pro", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default; // adminlte-modified
+$font-family-sans-serif:      "Source Sans 3", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default; // adminlte-modified
 $font-family-monospace:       SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default;
 // stylelint-enable value-keyword-case
 $font-family-base:            var(--#{$prefix}font-sans-serif) !default;
@@ -665,7 +665,7 @@ $headings-font-family:        null !default;
 $headings-font-style:         null !default;
 $headings-font-weight:        500 !default;
 $headings-line-height:        1.2 !default;
-$headings-color:              null !default;
+$headings-color:              inherit !default;
 // scss-docs-end headings-variables
 
 // scss-docs-start display-headings
@@ -715,6 +715,10 @@ $hr-border-color:             null !default; // Allows for inherited colors
 $hr-border-width:             var(--#{$prefix}border-width) !default;
 $hr-opacity:                  .25 !default;
 
+// scss-docs-start vr-variables
+$vr-border-width:             var(--#{$prefix}border-width) !default;
+// scss-docs-end vr-variables
+
 $legend-margin-bottom:        .5rem !default;
 $legend-font-size:            1.5rem !default;
 $legend-font-weight:          null !default;
@@ -724,6 +728,7 @@ $dt-font-weight:              $font-weight-bold !default;
 $list-inline-padding:         .5rem !default;
 
 $mark-padding:                .1875em !default;
+$mark-color:                  $body-color !default;
 $mark-bg:                     $yellow-100 !default;
 // scss-docs-end type-variables
 
@@ -740,25 +745,25 @@ $table-cell-padding-x-sm:     .25rem !default;
 
 $table-cell-vertical-align:   top !default;
 
-$table-color:                 var(--#{$prefix}body-color) !default;
-$table-bg:                    transparent !default;
+$table-color:                 var(--#{$prefix}emphasis-color) !default;
+$table-bg:                    var(--#{$prefix}body-bg) !default;
 $table-accent-bg:             transparent !default;
 
 $table-th-font-weight:        null !default;
 
 $table-striped-color:         $table-color !default;
 $table-striped-bg-factor:     .05 !default;
-$table-striped-bg:            rgba($black, $table-striped-bg-factor) !default;
+$table-striped-bg:            rgba(var(--#{$prefix}emphasis-color-rgb), $table-striped-bg-factor) !default;
 
 $table-active-color:          $table-color !default;
 $table-active-bg-factor:      .1 !default;
-$table-active-bg:             rgba($black, $table-active-bg-factor) !default;
+$table-active-bg:             rgba(var(--#{$prefix}emphasis-color-rgb), $table-active-bg-factor) !default;
 
 $table-hover-color:           $table-color !default;
 $table-hover-bg-factor:       .075 !default;
-$table-hover-bg:              rgba($black, $table-hover-bg-factor) !default;
+$table-hover-bg:              rgba(var(--#{$prefix}emphasis-color-rgb), $table-hover-bg-factor) !default;
 
-$table-border-factor:         .1 !default;
+$table-border-factor:         .2 !default;
 $table-border-width:          var(--#{$prefix}border-width) !default;
 $table-border-color:          var(--#{$prefix}border-color) !default;
 
@@ -848,6 +853,7 @@ $btn-active-box-shadow:       inset 0 3px 5px rgba($black, .125) !default;
 $btn-link-color:              var(--#{$prefix}link-color) !default;
 $btn-link-hover-color:        var(--#{$prefix}link-hover-color) !default;
 $btn-link-disabled-color:     $gray-600 !default;
+$btn-link-focus-shadow-rgb:   to-rgb(mix(color-contrast($link-color), $link-color, 15%)) !default;
 
 // Allows for customizing button radius independently from global border radius
 $btn-border-radius:           var(--#{$prefix}border-radius) !default;
@@ -909,7 +915,7 @@ $input-disabled-border-color:           null !default;
 $input-color:                           var(--#{$prefix}body-color) !default;
 $input-border-color:                    var(--#{$prefix}border-color) !default;
 $input-border-width:                    $input-btn-border-width !default;
-$input-box-shadow:                      $box-shadow-inset !default;
+$input-box-shadow:                      var(--#{$prefix}box-shadow-inset) !default;
 
 $input-border-radius:                   var(--#{$prefix}border-radius) !default;
 $input-border-radius-sm:                var(--#{$prefix}border-radius-sm) !default;
@@ -1025,7 +1031,7 @@ $form-select-feedback-icon-size:        $input-height-inner-half $input-height-i
 $form-select-border-width:        $input-border-width !default;
 $form-select-border-color:        $input-border-color !default;
 $form-select-border-radius:       $input-border-radius !default;
-$form-select-box-shadow:          $box-shadow-inset !default;
+$form-select-box-shadow:          var(--#{$prefix}box-shadow-inset) !default;
 
 $form-select-focus-border-color:  $input-focus-border-color !default;
 $form-select-focus-width:         $input-focus-width !default;
@@ -1048,9 +1054,9 @@ $form-select-transition:          $input-transition !default;
 $form-range-track-width:          100% !default;
 $form-range-track-height:         .5rem !default;
 $form-range-track-cursor:         pointer !default;
-$form-range-track-bg:             var(--#{$prefix}tertiary-bg) !default;
+$form-range-track-bg:             var(--#{$prefix}secondary-bg) !default;
 $form-range-track-border-radius:  1rem !default;
-$form-range-track-box-shadow:     $box-shadow-inset !default;
+$form-range-track-box-shadow:     var(--#{$prefix}box-shadow-inset) !default;
 
 $form-range-thumb-width:                   1rem !default;
 $form-range-thumb-height:                  $form-range-thumb-width !default;
@@ -1226,7 +1232,8 @@ $navbar-dark-color:                 rgba($white, .55) !default;
 $navbar-dark-hover-color:           rgba($white, .75) !default;
 $navbar-dark-active-color:          $white !default;
 $navbar-dark-disabled-color:        rgba($white, .25) !default;
-$navbar-dark-toggler-icon-bg:       url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='#{$navbar-dark-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>") !default;
+$navbar-dark-icon-color:            $navbar-dark-color !default;
+$navbar-dark-toggler-icon-bg:       url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='#{$navbar-dark-icon-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>") !default;
 $navbar-dark-toggler-border-color:  rgba($white, .1) !default;
 $navbar-dark-brand-color:           $navbar-dark-active-color !default;
 $navbar-dark-brand-hover-color:     $navbar-dark-active-color !default;
@@ -1248,10 +1255,10 @@ $dropdown-bg:                       var(--#{$prefix}body-bg) !default;
 $dropdown-border-color:             var(--#{$prefix}border-color-translucent) !default;
 $dropdown-border-radius:            var(--#{$prefix}border-radius) !default;
 $dropdown-border-width:             var(--#{$prefix}border-width) !default;
-$dropdown-inner-border-radius:      subtract($dropdown-border-radius, $dropdown-border-width) !default;
+$dropdown-inner-border-radius:      calc(#{$dropdown-border-radius} - #{$dropdown-border-width}) !default; // stylelint-disable-line function-disallowed-list
 $dropdown-divider-bg:               $dropdown-border-color !default;
 $dropdown-divider-margin-y:         $spacer * .5 !default;
-$dropdown-box-shadow:               $box-shadow !default;
+$dropdown-box-shadow:               var(--#{$prefix}box-shadow) !default;
 
 $dropdown-link-color:               var(--#{$prefix}body-color) !default;
 $dropdown-link-hover-color:         $dropdown-link-color !default;
@@ -1439,8 +1446,8 @@ $popover-max-width:                 276px !default;
 $popover-border-width:              var(--#{$prefix}border-width) !default;
 $popover-border-color:              var(--#{$prefix}border-color-translucent) !default;
 $popover-border-radius:             var(--#{$prefix}border-radius-lg) !default;
-$popover-inner-border-radius:       subtract($popover-border-radius, $popover-border-width) !default;
-$popover-box-shadow:                $box-shadow !default;
+$popover-inner-border-radius:       calc(#{$popover-border-radius} - #{$popover-border-width}) !default; // stylelint-disable-line function-disallowed-list
+$popover-box-shadow:                var(--#{$prefix}box-shadow) !default;
 
 $popover-header-font-size:          $font-size-base !default;
 $popover-header-bg:                 var(--#{$prefix}secondary-bg) !default;
@@ -1514,8 +1521,8 @@ $modal-content-border-color:        var(--#{$prefix}border-color-translucent) !d
 $modal-content-border-width:        var(--#{$prefix}border-width) !default;
 $modal-content-border-radius:       var(--#{$prefix}border-radius-lg) !default;
 $modal-content-inner-border-radius: subtract($modal-content-border-radius, $modal-content-border-width) !default;
-$modal-content-box-shadow-xs:       $box-shadow-sm !default;
-$modal-content-box-shadow-sm-up:    $box-shadow !default;
+$modal-content-box-shadow-xs:       var(--#{$prefix}box-shadow-sm) !default;
+$modal-content-box-shadow-sm-up:    var(--#{$prefix}box-shadow) !default;
 
 $modal-backdrop-bg:                 $black !default;
 $modal-backdrop-opacity:            .5 !default;
@@ -1553,9 +1560,6 @@ $alert-margin-bottom:           1rem !default;
 $alert-border-radius:           var(--#{$prefix}border-radius) !default;
 $alert-link-font-weight:        $font-weight-bold !default;
 $alert-border-width:            var(--#{$prefix}border-width) !default;
-$alert-bg-scale:                -80% !default;
-$alert-border-scale:            -70% !default;
-$alert-color-scale:             40% !default;
 $alert-dismissible-padding-r:   $alert-padding-x * 3 !default; // 3x covers width of x plus default padding on either side
 // scss-docs-end alert-variables
 

package/src/scss/_callouts.scss

@@ -11,6 +11,11 @@
   background-color: var(--#{$lte-prefix}callout-bg, var(--bs-gray-100));
   border-left: .25rem solid var(--#{$lte-prefix}callout-border, var(--bs-gray-300));
 
+  .callout-link {
+    font-weight: $lte-callout-link-font-weight;
+    color: var(--#{$prefix}callout-link-color);
+  }
+
   h4 {
     margin-bottom: .25rem;
   }
@@ -30,5 +35,6 @@
     --#{$lte-prefix}callout-color: var(--#{$prefix}#{$name}-text-emphasis);
     --#{$lte-prefix}callout-bg: var(--#{$prefix}#{$name}-bg-subtle);
     --#{$lte-prefix}callout-border: var(--#{$prefix}#{$name}-border-subtle);
+    --#{$prefix}callout-link-color: var(--#{$prefix}#{$name}-text-emphasis);
   }
 }

package/src/scss/_cards.scss

@@ -172,6 +172,7 @@
       }
 
       a {
+        text-decoration: none;
         border-top: 3px solid transparent;
 
         &:hover {

package/src/scss/_direct-chat.scss

@@ -169,11 +169,16 @@
     @include clearfix();
     padding: 10px;
     margin: 0;
+    text-decoration: none;
     border-bottom: 1px solid rgba($black, .2);
 
     &:last-of-type {
       border-bottom: 0;
     }
+
+    a {
+      text-decoration: none;
+    }
   }
 }
 

package/src/scss/_dropdown.scss

@@ -204,6 +204,7 @@
       border-bottom: 1px solid var(--#{$prefix}border-color-translucent);
 
       a {
+        text-decoration: none;
         @include media-breakpoint-up(sm) {
           color: var(--#{$prefix}body-color) !important;
           background-color: var(--#{$prefix}body-bg) !important;

package/src/scss/_info-box.scss

@@ -18,10 +18,10 @@
   .progress {
     height: 2px;
     margin: 5px 0;
-    background-color: rgba($black, .125);
+    background-color: rgba(var(--#{$lte-prefix}card-variant-color-rgb), .125);
 
     .progress-bar {
-      background-color: $white;
+      background-color: var(--#{$lte-prefix}card-variant-color);
     }
   }
 
@@ -62,14 +62,6 @@
     white-space: nowrap;
   }
 
-  @each $name, $color in $theme-colors {
-    .info-box {
-      .progress-bar {
-        background-color: color-contrast($color);
-      }
-    }
-  }
-
   .info-box-more {
     display: block;
   }

package/src/scss/_timeline.scss

@@ -58,6 +58,7 @@
         // Link in header
         > a {
           font-weight: 600;
+          text-decoration: none;
         }
       }
       // Item body and footer

package/src/scss/_toasts.scss

@@ -0,0 +1,33 @@
+//
+// Toast
+//
+
+@each $name, $color in $theme-colors {
+  .toast-#{$name} {
+    --#{$prefix}toast-header-color: #{color-contrast($color)};
+    --#{$prefix}toast-header-bg: #{$color};
+    --#{$prefix}toast-header-border-color: #{$color};
+    --#{$prefix}toast-border-color: #{$color};
+    --#{$prefix}toast-bg: var(--#{$prefix}#{$name}-bg-subtle);
+
+    @if color-contrast($color) == $color-contrast-light {
+      .btn-close {
+        @include btn-close-white();
+      }
+    }
+  }
+}
+
+@if $enable-dark-mode {
+  @include color-mode(dark) {
+    @each $name, $color in $theme-colors {
+      .toast-#{$name} {
+        @if color-contrast($color) == $color-contrast-dark {
+          .btn-close {
+            --#{$prefix}btn-close-white-filter: none;
+          }
+        }
+      }
+    }
+  }
+}