admin-lte 4.0.0-alpha3 → 4.0.0-beta2

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "admin-lte",
   "description": "Responsive open source admin dashboard and control panel.",
-  "version": "4.0.0-alpha3",
+  "version": "4.0.0-beta2",
   "license": "MIT",
   "author": "Colorlib <https://colorlib.com>",
   "main": "dist/js/adminlte.min.js",
@@ -24,7 +24,7 @@
     "docs-compile": "astro --config src/config/astro.config.mjs build",
     "docs-lint": "astro --config src/config/astro.config.mjs check",
     "docs-format": "js-beautify --file \"dist/pages/**/*.html\"",
-    "docs-serve": "astro --config src/config/astro.config.mjs dev --open",
+    "docs-serve": "astro --config src/config/astro.config.mjs dev --open --port 3000",
     "assets": "node src/config/assets.config.mjs",
     "lint": "npm-run-all --aggregate-output --continue-on-error --parallel js-lint css-lint docs-lint lockfile-lint",
     "compile": "npm-run-all docs-compile docs-format assets css js",
@@ -57,39 +57,40 @@
     "url": "https://github.com/ColorlibHQ/AdminLTE/issues"
   },
   "devDependencies": {
-    "@astrojs/mdx": "^0.19.7",
-    "@rollup/plugin-typescript": "^11.1.2",
-    "@typescript-eslint/eslint-plugin": "^6.2.1",
-    "@typescript-eslint/parser": "^6.2.1",
-    "astro": "^2.10.1",
-    "autoprefixer": "^10.4.14",
-    "bootstrap": "^5.3.1",
-    "bundlewatch": "^0.3.3",
-    "clean-css-cli": "^5.6.2",
-    "concurrently": "^8.2.0",
+    "@astrojs/check": "^0.9.3",
+    "@astrojs/mdx": "^3.1.5",
+    "@rollup/plugin-typescript": "^11.1.6",
+    "@typescript-eslint/eslint-plugin": "^7.5.0",
+    "@typescript-eslint/parser": "^7.5.0",
+    "astro": "^4.15.1",
+    "autoprefixer": "^10.4.20",
+    "bootstrap": "^5.3.2",
+    "bundlewatch": "^0.4.0",
+    "clean-css-cli": "^5.6.3",
+    "concurrently": "^8.2.2",
     "cross-env": "^7.0.3",
-    "eslint": "^8.46.0",
-    "eslint-config-xo": "^0.43.1",
-    "eslint-config-xo-typescript": "^1.0.1",
-    "eslint-plugin-astro": "^0.28.0",
-    "eslint-plugin-import": "^2.28.0",
-    "eslint-plugin-unicorn": "^48.0.1",
+    "eslint": "^8.55.0",
+    "eslint-config-xo": "^0.44.0",
+    "eslint-config-xo-typescript": "^4.0.0",
+    "eslint-plugin-astro": "^0.34.0",
+    "eslint-plugin-import": "^2.29.1",
+    "eslint-plugin-unicorn": "^52.0.0",
     "fs-extra": "^11.1.1",
-    "js-beautify": "^1.14.9",
-    "lockfile-lint": "^4.12.0",
-    "nodemon": "^3.0.1",
+    "js-beautify": "^1.15.1",
+    "lockfile-lint": "^4.14.0",
+    "nodemon": "^3.1.2",
     "npm-run-all": "^4.1.5",
-    "postcss": "^8.4.27",
-    "postcss-cli": "^10.1.0",
-    "prettier": "^3.0.1",
-    "prettier-plugin-astro": "^0.11.0",
-    "rollup": "^3.27.2",
-    "rtlcss": "^4.1.0",
-    "sass": "^1.64.2",
-    "stylelint": "^15.10.2",
-    "stylelint-config-twbs-bootstrap": "^11.0.1",
-    "terser": "^5.19.2",
-    "tslib": "^2.6.1",
-    "typescript": "^5.1.6"
+    "postcss": "^8.4.41",
+    "postcss-cli": "^11.0.0",
+    "prettier": "^3.3.3",
+    "prettier-plugin-astro": "^0.14.1",
+    "rollup": "^4.21.0",
+    "rtlcss": "^4.2.0",
+    "sass": "^1.77.4",
+    "stylelint": "^16.8.2",
+    "stylelint-config-twbs-bootstrap": "^14.2.0",
+    "terser": "^5.31.6",
+    "tslib": "^2.7.0",
+    "typescript": "^5.5.4"
   }
 }

package/src/scss/_app-content.scss

@@ -1,52 +1,3 @@
 .app-content {
   padding: $lte-content-padding-y $lte-content-padding-x;
 }
-
-.app-content-top-area,
-.app-content-bottom-area{
-  display: flex;
-  align-items: center;
-  padding: $lte-content-padding-y $lte-content-padding-x;
-  overflow: auto;
-  background: $lte-app-footer-bg;
-
-  > .row {
-    display: contents;
-  }
-
-  &.app-content-top-area-sm,
-  &.app-content-bottom-area-sm{
-    min-height: $lte-app-content-bottom-area-height-sm;
-  }
-
-  &.app-content-top-area-md,
-  &.app-content-bottom-area-md{
-    min-height: $lte-app-content-bottom-area-height-md;
-  }
-  &.app-content-top-area-lg,
-  &.app-content-bottom-area-lg{
-    min-height: $lte-app-content-bottom-area-height-lg;
-  }
-  &.app-content-top-area-xl,
-  &.app-content-bottom-area-xl{
-    min-height: $lte-app-content-bottom-area-height-xl;
-  }
-}
-
-.app-content-top-area:not(.app-content-top-area-sm):not(.app-content-top-area-md):not(.app-content-top-area-lg):not(.app-content-top-area-xl),
-.app-content-bottom-area:not(.app-content-bottom-area-sm):not(.app-content-bottom-area-md):not(.app-content-bottom-area-lg):not(.app-content-bottom-area-xl) {
-  padding-top: $grid-gutter-width * .625;
-  padding-bottom: $grid-gutter-width * .625;
-}
-
-.app-content-bottom-area {
-  border-top: $lte-app-footer-border-top;
-}
-.app-content-top-area {
-  border-bottom: $lte-app-footer-border-top;
-
-  + .app-main {
-    padding-top: $grid-gutter-width * .5;
-  }
-}
-

package/src/scss/_app-main.scss

@@ -1,8 +1,10 @@
 .app-main {
   position: relative;
+  display: flex;
+  flex-direction: column;
   grid-area: #{$lte-prefix}app-main;
   max-width: 100vw;
-  padding-bottom: $grid-gutter-width * .5;
+  padding-bottom: $lte-app-main-padding-bottom;
   @include transition($lte-transition-speed $lte-transition-fn);
 
   .app-content-header {
@@ -12,6 +14,28 @@
       padding: 0;
       margin-bottom: 0;
       line-height: 2.5rem;
+
+      a {
+        text-decoration: none;
+      }
     }
   }
+
+  .app-content-top-area,
+  .app-content-bottom-area {
+    color: $lte-app-content-bottom-area-color;
+    background-color: $lte-app-content-bottom-area-bg;
+  }
+
+  .app-content-top-area {
+    padding: $lte-app-content-top-area-padding-y $lte-app-content-top-area-padding-x;
+    border-bottom: $lte-app-content-top-area-top-border;
+  }
+
+  .app-content-bottom-area {
+    padding: $lte-app-content-bottom-area-padding-y $lte-app-content-bottom-area-padding-x;
+    margin-top: auto;
+    margin-bottom: $lte-app-content-bottom-area-margin-bottom;
+    border-top: $lte-app-content-bottom-area-top-border;
+  }
 }

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*/"};
       }
     }
   }
@@ -452,7 +452,6 @@
     /* 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;
@@ -477,11 +476,7 @@
             }
           }
         }
-        &.layout-fixed-complete {
-          .app-main-wrapper {
-            max-height: 100vh;
-          }
-        }
+
         &.sidebar-open {
           .nav-link > .nav-badge,
           .nav-link > p > .nav-badge {

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/_compact-mode.scss

@@ -1,30 +1,4 @@
 .compact-mode {
-  .app-content-top-area:not(.app-content-top-area-sm):not(.app-content-top-area-md):not(.app-content-top-area-lg):not(.app-content-top-area-xl),
-  .app-content-bottom-area:not(.app-content-bottom-area-sm):not(.app-content-bottom-area-md):not(.app-content-bottom-area-lg):not(.app-content-bottom-area-xl) {
-    padding-top: $grid-gutter-width * .425;
-    padding-bottom: $grid-gutter-width * .425;
-  }
-  .app-content-top-area-sm,
-  .app-content-bottom-area-sm {
-    min-height: $lte-app-content-bottom-area-height-sm * .825;
-  }
-
-  .app-content-top-area-md,
-  .app-content-bottom-area-md {
-    min-height: $lte-app-content-bottom-area-height-md * .825;
-  }
-
-  .app-content-top-area-lg,
-  .app-content-bottom-area-lg {
-    min-height: $lte-app-content-bottom-area-height-lg * .825;
-  }
-
-  .app-content-top-area-xl,
-  .app-content-bottom-area-xl {
-    min-height: $lte-app-content-bottom-area-height-xl * .825;
-  }
-
-
   .app-header {
     max-height: $lte-app-header-height-compact;
 

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;
+          }
+        }
+      }
+    }
+  }
+}

package/src/scss/_variables.scss

@@ -1,16 +1,17 @@
+//
 // Custom AdminLTE Variables
+//
 
 // Prefix for :root CSS variables and others.
 $lte-prefix:                      lte- !default;
 
 // TRANSITIONS SETTINGS
 // --------------------------------------------------------
-
 // Transition global options
 $lte-transition-speed:            .3s !default;
 $lte-transition-fn:               ease-in-out !default;
 
-// Sidebar
+// SIDEBAR
 // --------------------------------------------------------
 $lte-sidebar-width:               250px !default;
 $lte-sidebar-breakpoint:          lg !default;
@@ -58,16 +59,15 @@ $lte-app-header-link-padding-y:       $navbar-padding-y !default;
 $lte-app-header-height:               ($nav-link-height + ($lte-app-header-link-padding-y * 2)) !default;
 $lte-app-header-height-compact:       ($nav-link-height-compact + ($lte-app-header-link-padding-y * 2)) !default;
 
-// Content padding
+// APP MAIN
+// --------------------------------------------------------
+$lte-app-main-padding-bottom:       $grid-gutter-width * .5 !default;
+
+// CONTENT PADDING
+// --------------------------------------------------------
 $lte-content-padding-y:           0 !default;
 $lte-content-padding-x:           .5rem !default;
 
-// MAIN CONTENT
-$lte-app-content-bottom-area-height-sm: 3.5rem !default;
-$lte-app-content-bottom-area-height-md: 6rem !default;
-$lte-app-content-bottom-area-height-lg: 9rem !default;
-$lte-app-content-bottom-area-height-xl: 12rem !default;
-
 // MAIN FOOTER
 // --------------------------------------------------------
 $lte-app-footer-padding:           1rem !default;
@@ -78,6 +78,21 @@ $lte-app-footer-border-top:        $lte-app-footer-border-top-width solid $lte-a
 $lte-app-footer-bg:                var(--#{$prefix}body-bg) !default;
 $lte-app-footer-color:             var(--#{$prefix}secondary-color) !default;
 
+// CONTENT BOTTOM AREA
+// --------------------------------------------------------
+$lte-app-content-bottom-area-margin-bottom: -$lte-app-main-padding-bottom !default;
+$lte-app-content-bottom-area-color:         $lte-app-footer-color !default;
+$lte-app-content-bottom-area-bg:            $lte-app-footer-bg !default;
+$lte-app-content-bottom-area-top-border:    $lte-app-footer-border-top !default;
+$lte-app-content-bottom-area-padding-y:     $lte-app-footer-padding !default;
+$lte-app-content-bottom-area-padding-x:     0 !default;
+
+// CONTENT TOP AREA
+// --------------------------------------------------------
+$lte-app-content-top-area-top-border:       $lte-app-footer-border-top !default;
+$lte-app-content-top-area-padding-y:     $lte-app-footer-padding !default;
+$lte-app-content-top-area-padding-x:     0 !default;
+
 // BRAND LINK
 // --------------------------------------------------------
 $navbar-brand-padding-y-compact:   $navbar-brand-padding-y * .75 !default;
@@ -88,8 +103,7 @@ $lte-brand-link-padding-x:         $lte-sidebar-padding-x !default;
 $lte-brand-link-padding-x-compact: $lte-sidebar-padding-x-compact !default;
 $lte-brand-link-border-buttom:    1px !default;
 
-
-// Cards
+// CARDS
 // --------------------------------------------------------
 $lte-card-shadow: 0 0 1px rgba(var(--#{$prefix}body-color-rgb), .125), 0 1px 3px rgba(var(--#{$prefix}body-color-rgb), .2) !default;
 $lte-card-title-font-size: 1.1rem !default;
@@ -99,6 +113,10 @@ $lte-card-title-font-weight: $font-weight-normal !default;
 // --------------------------------------------------------
 $lte-progress-bar-border-radius: 1px !default;
 
+// CALLOUTS
+// --------------------------------------------------------
+$lte-callout-link-font-weight: $alert-link-font-weight !default;
+
 // DIRECT CHAT
 // --------------------------------------------------------
 $lte-direct-chat-default-msg-bg: var(--#{$prefix}secondary-bg) !default;

package/src/scss/adminlte.scss

@@ -1,5 +1,5 @@
 /*!
- *   AdminLTE v4.0.0-alpha2
+ *   AdminLTE v4.0.0-beta2
  *   Author: Colorlib
  *   Website: AdminLTE.io <https://adminlte.io>
  *   License: Open source - MIT <https://opensource.org/licenses/MIT>
@@ -60,7 +60,6 @@
 // Bootstrap Utilities
 @import "bootstrap/scss/utilities/api";
 
-
 // AdminLTE Configuration
 // ---------------------------------------------------
 @import "variables";

package/src/scss/pages/_lockscreen.scss

@@ -18,6 +18,7 @@
 
     a {
       color: var(--#{$prefix}emphasis-color);
+      text-decoration: none;
     }
   }
 

package/src/scss/pages/_login_and_register.scss

@@ -11,6 +11,7 @@
 
   a {
     color: var(--#{$prefix}secondary-color);
+    text-decoration: none;
   }
 }