admin-lte 4.0.0-alpha2 → 4.0.0-beta1

package/src/scss/_app-sidebar.scss

@@ -22,7 +22,9 @@
 
 .sidebar-brand {
   display: flex;
-  justify-content: space-between;
+  align-items: center;
+  justify-content: center;
+  height: $lte-app-header-height;
   padding: $lte-brand-link-padding-y $lte-brand-link-padding-x;
   overflow: hidden;
   font-size: $navbar-brand-font-size;
@@ -31,23 +33,38 @@
   @include transition(width $lte-transition-speed $lte-transition-fn);
 
   .brand-link {
-    flex: 1;
-    &:hover {
-      text-decoration: none;
-    }
+    display: flex;
+    align-items: center;
+    text-decoration: none;
 
     .brand-image {
       float: left;
       width: auto;
       max-height: 33px;
-      margin-top: -3px;
-      margin-right: .5rem;
-      margin-left: .8rem;
       line-height: .8;
     }
+
+    .brand-image-xs {
+      float: left;
+      width: auto;
+      max-height: 33px;
+      margin-top: -.1rem;
+      line-height: .8;
+    }
+
+    .brand-image-xl {
+      width: auto;
+      max-height: 40px;
+      line-height: .8;
+
+      &.single {
+        margin-top: -.3rem;
+      }
+    }
   }
 
   .brand-text {
+    margin-left: .5rem;
     color: rgba(var(--#{$prefix}emphasis-color-rgb), .8);
     @include transition(flex $lte-transition-speed $lte-transition-fn, width $lte-transition-speed $lte-transition-fn);
     &:hover {
@@ -61,11 +78,31 @@
   padding-right: $lte-sidebar-padding-x;
   padding-bottom: $lte-sidebar-padding-y;
   padding-left: $lte-sidebar-padding-x;
-  overflow-x: hidden;
-  overflow-y: auto;
   @include scrollbar-color-gray();
   @include scrollbar-width-thin();
 
+  .nav-item {
+    max-width: 100%;
+  }
+
+  .nav-link {
+    display: flex;
+    justify-content: flex-start;
+
+    p {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+  }
+  .nav-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 1.5rem;
+    max-width: 1.5rem;
+  }
+
   // Sidebar Menu. First level links
   .sidebar-menu > .nav-item {
     &.menu-open {
@@ -110,11 +147,6 @@
   // All links within the sidebar menu
   a {
     color: var(--#{$lte-prefix}sidebar-color);
-
-    &:hover,
-    &:focus {
-      text-decoration: none;
-    }
   }
 
   // All submenus
@@ -155,7 +187,10 @@
 
       .nav-arrow {
         @include transition(transform $lte-transition-fn $lte-transition-speed);
-        transform: none #{"/*rtl:rotate(180deg)*/"};
+        transform: translateY(-50%) #{"/*rtl:append:rotate(180deg)*/"};
+        animation-name: fadeIn;
+        animation-duration: $lte-transition-speed;
+        animation-fill-mode: both;
       }
     }
   }
@@ -170,13 +205,12 @@
   .nav-link > .nav-arrow,
   .nav-link > p > .nav-arrow {
     position: absolute;
-    top: .7rem;
+    top: 50%;
     right: 1rem;
   }
 
   .nav-link {
     position: relative;
-    width: subtract(var(--#{$lte-prefix}sidebar-width), $lte-sidebar-padding-x * 2);
     @include transition(width $lte-transition-fn $lte-transition-speed);
     @include border-radius($border-radius);
 
@@ -185,10 +219,6 @@
       padding-left: .5rem;
       margin: 0;
     }
-
-    .nav-icon {
-      padding-left: .3rem;
-    }
   }
 
   .nav-header {
@@ -201,6 +231,10 @@
     display: none;
     padding: 0;
     list-style: none;
+
+    .nav-indent & {
+      padding-left: $lte-sidebar-padding-x;
+    }
   }
 
   .menu-open {
@@ -210,12 +244,49 @@
 
     > .nav-link {
       .nav-arrow {
-        transform: rotate(90deg) #{"/*rtl:rotate(90deg)*/"};
+        transform: translateY(-50%) rotate(90deg) #{"/*rtl:ignore*/"};
       }
     }
   }
 }
 
+.nav-compact.nav-indent {
+  .nav-treeview {
+    padding-left: 0;
+
+    .nav-item {
+      padding-left: $lte-sidebar-padding-x;
+    }
+  }
+}
+
+.sidebar-mini.sidebar-collapse.nav-indent {
+  .app-sidebar:hover {
+    .nav-treeview {
+      padding-left: 0;
+
+      .nav-item {
+        padding-left: $lte-sidebar-padding-x;
+      }
+    }
+  }
+}
+
+.sidebar-collapse {
+  &.nav-compact.nav-indent {
+    .nav-treeview {
+      .nav-item {
+        padding-left: 0;
+      }
+    }
+  }
+}
+
+.nav-compact .nav-link {
+  @include border-radius(0);
+  margin-bottom: 0 !important;
+}
+
 // A fix for text overflow while transitioning from sidebar mini to full sidebar
 .sidebar-menu,
 .sidebar-menu > .nav-header,
@@ -223,6 +294,42 @@
   white-space: nowrap;
 }
 
+// Logo style
+.logo-xs,
+.logo-xl {
+  position: absolute;
+  visibility: visible;
+  opacity: 1;
+
+  &.brand-image-xs {
+    top: 12px;
+    left: 18px;
+  }
+
+  &.brand-image-xl {
+    top: 6px;
+    left: 12px;
+  }
+}
+
+.logo-xs {
+  visibility: hidden;
+  opacity: 0;
+
+  &.brand-image-xl {
+    top: 8px;
+    left: 16px;
+  }
+}
+
+.brand-link {
+  &.logo-switch {
+    &::before {
+      content: "\00a0";
+    }
+  }
+}
+
 .sidebar-mini.sidebar-collapse {
   .app-sidebar {
     min-width: $lte-sidebar-mini-width;
@@ -237,50 +344,103 @@
   .sidebar-menu {
     .nav-link {
       width: $lte-sidebar-mini-width - $lte-sidebar-padding-x * 2;
+
+      p {
+        display: inline-block;
+        width: 0;
+        white-space: nowrap;
+      }
+    }
+    .nav-badge,
+    .nav-arrow {
+      display: none;
+      animation-name: fadeOut;
+      animation-duration: $lte-transition-speed;
+      animation-fill-mode: both;
     }
   }
 
-  .sidebar-menu .nav-link p {
-    width: 0;
-    white-space: nowrap;
+  .brand-text {
+    display: inline-block;
+    max-width: 0;
+    overflow: hidden;
   }
 
   .sidebar-menu .nav-link p,
-  .brand-text {
+  .brand-text,
+  .logo-xl,
+  .nav-arrow {
     visibility: hidden;
     animation-name: fadeOut;
+    animation-duration: $lte-transition-speed;
     animation-fill-mode: both;
   }
 
-  &.sidebar-is-hover {
-    .app-sidebar {
-      min-width: var(--#{$lte-prefix}sidebar-width);
-      max-width: var(--#{$lte-prefix}sidebar-width);
-    }
+
+  .logo-xs {
+    display: inline-block;
+    visibility: visible;
+    animation-name: fadeIn;
+    animation-duration: $lte-transition-speed;
+    animation-fill-mode: both;
+  }
+
+  .app-sidebar:hover {
+    min-width: var(--#{$lte-prefix}sidebar-width);
+    max-width: var(--#{$lte-prefix}sidebar-width);
 
     .sidebar-menu .nav-header {
       display: inline-block;
     }
 
     .sidebar-menu .nav-link {
-      width: subtract(var(--#{$lte-prefix}sidebar-width), $lte-sidebar-padding-x * 2);
+      width: auto;
     }
 
     .sidebar-menu .nav-link p,
-    .brand-text {
+    .brand-text,
+    .logo-xl {
+      width: auto;
       margin-left: 0;
       visibility: visible;
       animation-name: fadeIn;
       animation-duration: $lte-transition-speed;
       animation-fill-mode: both;
     }
+
+    .brand-text {
+      display: inline;
+      max-width: inherit;
+      margin-left: .5rem;
+      animation-name: fadeIn;
+      animation-duration: $lte-transition-speed;
+      animation-fill-mode: both;
+    }
+    .nav-badge,
+    .nav-arrow {
+      display: inline-block;
+      visibility: visible;
+      animation-name: fadeIn;
+      animation-duration: $lte-transition-speed;
+      animation-fill-mode: both;
+      animation-delay: $lte-transition-speed;
+    }
+
+    .nav-link p {
+      padding-left: .5rem;
+    }
+    .logo-xs {
+      visibility: hidden;
+      animation-name: fadeOut;
+      animation-duration: $lte-transition-speed;
+      animation-fill-mode: both;
+    }
   }
 }
 
 .sidebar-collapse:not(.sidebar-mini) {
   .app-sidebar {
-    // stylelint-disable-next-line
-    margin-left: calc(var(--#{$lte-prefix}sidebar-width) * -1);
+    margin-left: calc(var(--#{$lte-prefix}sidebar-width) * -1); // stylelint-disable-line function-disallowed-list
   }
 }
 
@@ -292,39 +452,50 @@
     /* stylelint-disable-next-line scss/selector-no-union-class-name */
     &#{$infix} {
       @include media-breakpoint-up($next) {
+        &.layout-fixed-complete,
         &.layout-fixed {
+          .app-main-wrapper {
+            display: flex;
+            flex-direction: column;
+            min-height: 100vh;
+          }
+          .app-sidebar-wrapper {
+            position: relative;
+          }
+          .app-main {
+            flex: 1 1 auto;
+            overflow: auto;
+          }
           .app-sidebar {
-            position: fixed;
+            position: sticky;
             top: 0;
             bottom: 0;
-            left: 0;
             max-height: 100vh;
 
             .sidebar-wrapper {
-              height: subtract(100vh, add($lte-app-header-height-inner, $lte-app-header-bottom-border-width));
+              height: subtract(100vh, add($lte-app-header-height, 1px));
             }
           }
-
-          .app-header,
-          .app-main,
-          .app-footer {
-            margin-left: var(--#{$lte-prefix}sidebar-width);
+        }
+        &.layout-fixed-complete {
+          .app-main-wrapper {
+            max-height: 100vh;
           }
-
-          &.sidebar-collapse {
-            .app-header,
-            .app-main,
-            .app-footer {
-              margin-left: 0;
-            }
+        }
+        &.sidebar-open {
+          .nav-link > .nav-badge,
+          .nav-link > p > .nav-badge {
+            animation-name: fadeIn;
+            animation-duration: $lte-transition-speed;
+            animation-fill-mode: both;
+            animation-delay: $lte-transition-speed;
           }
-
-          &.sidebar-mini.sidebar-collapse {
-            .app-header,
-            .app-main,
-            .app-footer {
-              margin-left: $lte-sidebar-mini-width;
-            }
+          .nav-link > .nav-arrow,
+          .nav-link > p > .nav-arrow {
+            animation-name: fadeIn;
+            animation-duration: $lte-transition-speed;
+            animation-fill-mode: both;
+            animation-delay: $lte-transition-speed;
           }
         }
       }
@@ -341,33 +512,27 @@
           position: fixed;
           top: 0;
           bottom: 0;
-          left: 0;
           max-height: 100vh;
           margin-left: calc(var(--#{$lte-prefix}sidebar-width) * -1); // stylelint-disable-line function-disallowed-list
 
           .sidebar-wrapper {
-            height: subtract(100vh, add($lte-app-header-height-inner, $lte-app-header-bottom-border-width));
-            overflow-x: hidden;
-            overflow-y: auto;
+            height: subtract(100vh, add($lte-app-header-height, 1px));
           }
         }
 
-        &.sidebar-mini .app-sidebar {
-          margin-left: -$lte-sidebar-mini-width;
-        }
-
         &.sidebar-open {
           .app-sidebar {
             margin-left: 0;
           }
 
           .sidebar-overlay {
-            position: fixed;
-            top: 0;
-            left: 0;
+            position: absolute;
+            inset: 0;
             z-index: $lte-zindex-sidebar-overlay;
             width: 100%;
             height: 100%;
+            cursor: pointer;
+            visibility: visible;
             background-color: rgba(0, 0, 0, .2);
             animation-name: fadeIn;
             animation-fill-mode: both;
@@ -378,6 +543,13 @@
   }
 }
 
+.sidebar-menu .nav-link p,
+.app-sidebar .brand-text,
+.app-sidebar .logo-xs,
+.app-sidebar .logo-xl {
+  @include transition(margin-left $lte-transition-speed linear, opacity $lte-transition-speed ease, visibility $lte-transition-speed ease);
+}
+
 // To prevent onload transition and animation
 .app-loaded {
   &.sidebar-mini.sidebar-collapse {
@@ -400,7 +572,9 @@ body:not(.app-loaded) {
   .app-header,
   .app-sidebar,
   .app-main,
-  .app-footer {
+  .app-footer,
+  .nav-arrow,
+  .nav-badge {
     @include transition(none !important);
     animation-duration: 0s !important;
   }

package/src/scss/_bootstrap-variables.scss

@@ -384,7 +384,7 @@ $enable-cssgrid:              false !default;
 $enable-button-pointers:      true !default;
 $enable-rfs:                  true !default;
 $enable-validation-icons:     true !default;
-$enable-negative-margins:     true !default;
+$enable-negative-margins:     true !default; // adminlte-modified
 $enable-deprecation-messages: true !default;
 $enable-important-utilities:  true !default;
 
@@ -455,7 +455,7 @@ $body-emphasis-color:       $black !default;
 // Style anchor elements.
 
 $link-color:                              $primary !default;
-$link-decoration:                         none !default; // adminlte-modified
+$link-decoration:                         underline !default;
 $link-shade-percentage:                   20% !default;
 $link-hover-color:                        shift-color($link-color, $link-shade-percentage) !default;
 $link-hover-decoration:                   null !default;
@@ -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;
@@ -1251,7 +1258,7 @@ $dropdown-border-width:             var(--#{$prefix}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;
@@ -1440,7 +1447,7 @@ $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:       calc(#{$popover-border-radius} - #{$popover-border-width}) !default; // stylelint-disable-line function-disallowed-list
-$popover-box-shadow:                $box-shadow !default;
+$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);
   }
 }