admin-lte 4.7.0 → 4.8.0

package/dist/js/adminlte.esm.js

@@ -1,5 +1,5 @@
 /*!
- * AdminLTE v4.7.0 (https://adminlte.io)
+ * AdminLTE v4.8.0 (https://adminlte.io)
  * Copyright 2014-2026 Colorlib <https://colorlib.com>
  * Licensed under MIT (https://github.com/ColorlibHQ/AdminLTE/blob/master/LICENSE)
  */

package/dist/js/adminlte.esm.min.js

@@ -1,5 +1,5 @@
 /*!
- * AdminLTE v4.7.0 (https://adminlte.io)
+ * AdminLTE v4.8.0 (https://adminlte.io)
  * Copyright 2014-2026 Colorlib <https://colorlib.com>
  * Licensed under MIT (https://github.com/ColorlibHQ/AdminLTE/blob/master/LICENSE)
  */

package/dist/js/adminlte.js

@@ -1,5 +1,5 @@
 /*!
- * AdminLTE v4.7.0 (https://adminlte.io)
+ * AdminLTE v4.8.0 (https://adminlte.io)
  * Copyright 2014-2026 Colorlib <https://colorlib.com>
  * Licensed under MIT (https://github.com/ColorlibHQ/AdminLTE/blob/master/LICENSE)
  */

package/dist/js/adminlte.min.js

@@ -1,5 +1,5 @@
 /*!
- * AdminLTE v4.7.0 (https://adminlte.io)
+ * AdminLTE v4.8.0 (https://adminlte.io)
  * Copyright 2014-2026 Colorlib <https://colorlib.com>
  * Licensed under MIT (https://github.com/ColorlibHQ/AdminLTE/blob/master/LICENSE)
  */

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "admin-lte",
   "description": "Responsive open source admin dashboard and control panel.",
-  "version": "4.7.0",
+  "version": "4.8.0",
   "type": "module",
   "license": "MIT",
   "author": "Colorlib <https://colorlib.com>",

package/src/scss/adminlte-colors-v3.scss

@@ -1,5 +1,5 @@
 /*!
- *   AdminLTE v4.7.0 — AdminLTE 3 color palette (legacy)
+ *   AdminLTE v4.8.0 — AdminLTE 3 color palette (legacy)
  *   Opt-in. The extended colours exactly as AdminLTE 3 shipped them — same
  *   names, same values, same text-colour rule (Bootstrap 4's YIQ brightness
  *   test, so lightblue, olive and teal take white text as they did) — with

package/src/scss/adminlte-colors.scss

@@ -1,5 +1,5 @@
 /*!
- *   AdminLTE v4.7.0 — Extended color palette
+ *   AdminLTE v4.8.0 — Extended color palette
  *   Opt-in. Nothing here is in adminlte.css: load this sheet after it and you
  *   get fourteen additional colours (orange, amber, olive, teal, sky, indigo,
  *   violet, fuchsia, pink, navy, steel, slate, graphite, midnight) as `--bs-*`

package/src/scss/adminlte-docs.scss

@@ -1,5 +1,5 @@
 /*!
- *   AdminLTE v4.7.0 — documentation styles
+ *   AdminLTE v4.8.0 — documentation styles
  *   Styles for the documentation and FAQ pages only (body.docs-page /
  *   body.faq-page). Applications never need this file; it is loaded by the
  *   docs pages in addition to adminlte.css.

package/src/scss/adminlte-select2.scss

@@ -1,5 +1,5 @@
 /*!
- *   AdminLTE v4.7.0 — Select2 compatibility theme
+ *   AdminLTE v4.8.0 — Select2 compatibility theme
  *   Styling only. AdminLTE bundles neither Select2 nor jQuery; this optional
  *   sheet makes a Select2 you load yourself match Bootstrap 5.3 form controls,
  *   including `data-bs-theme` dark mode. Load it AFTER select2.css.

package/src/scss/adminlte.scss

@@ -1,5 +1,5 @@
 /*!
- *   AdminLTE v4.7.0
+ *   AdminLTE v4.8.0
  *   Author: Colorlib
  *   Website: AdminLTE.io <https://adminlte.io>
  *   License: Open source - MIT <https://opensource.org/licenses/MIT>

package/src/scss/colors/_colors.scss

@@ -137,6 +137,40 @@
   }
 }
 
+// `data-lte-contrast="aa"`
+// --------------------------------------------------------
+// Opt in to WCAG AA text on the backgrounds where this palette's own rule falls
+// short. Backgrounds are untouched — every colour keeps its exact value — only
+// the text on top of them flips. Emitted per colour only where the two rules
+// disagree, so the designed palette (every colour AA with white) adds nothing
+// here and the v3 sheet carries the eight that need it (#6110).
+//
+// A coloured sidebar or header carrying a flipped colour should also pair with
+// `data-bs-theme="light"` instead of `"dark"`, so its nav links follow the text.
+[data-lte-contrast="aa"] {
+  @each $name, $value in $lte-palette {
+    $aa: lte-contrast-aa($value);
+
+    @if lte-needs-aa($value) {
+      .text-bg-#{$name},
+      .bg-gradient-#{$name} {
+        color: $aa !important;
+      }
+
+      .card-#{$name},
+      .bg-#{$name},
+      .text-bg-#{$name} {
+        --#{$lte-prefix}card-variant-color: #{$aa};
+        --#{$lte-prefix}card-variant-color-rgb: #{to-rgb($aa)};
+      }
+
+      .direct-chat-#{$name} {
+        --#{$lte-prefix}direct-chat-color: #{$aa};
+      }
+    }
+  }
+}
+
 // Cascade order
 // --------------------------------------------------------
 // This sheet loads AFTER adminlte.css, so `.bg-navy { --bs-bg-opacity: 1 }`

package/src/scss/colors/_primary.scss

@@ -18,9 +18,7 @@
 
 // Which way a state moves: Bootstrap darkens a colour that carries white text
 // and lightens one that carries dark text (see its button-variant mixin).
-@function lte-primary-state($color, $shade, $tint) {
-  $text: lte-contrast($color);
-
+@function lte-primary-state($color, $shade, $tint, $text) {
   @if $text == $color-contrast-light or $text == $lte-palette-yiq-text-light {
     @return lte-hex(shade-color($color, $shade));
   }
@@ -58,7 +56,11 @@
 @each $name, $value in map.merge($theme-colors, $lte-palette) {
   @if $name != "primary" {
     $link-hover: shift-color($value, $link-shade-percentage);
-    $text: lte-contrast($value);
+    // Palette colours follow this sheet's contrast rule; Bootstrap's own theme
+    // colours keep Bootstrap's, so `data-lte-primary="info"` agrees with
+    // `.btn-info` and `.text-bg-info` on the same page rather than taking the
+    // v3 YIQ rule's white text on cyan (1.96:1).
+    $text: if(map.has-key($lte-palette, $name), lte-contrast($value), color-contrast($value));
 
     [data-lte-primary="#{$name}"] {
       --#{$prefix}primary: var(--#{$prefix}#{$name});
@@ -70,10 +72,10 @@
       --#{$prefix}link-color-rgb: var(--#{$prefix}#{$name}-rgb);
       --#{$prefix}link-hover-color: #{lte-hex($link-hover)};
       --#{$prefix}link-hover-color-rgb: #{to-rgb($link-hover)};
-      --#{$lte-prefix}primary-hover: #{lte-primary-state($value, $btn-hover-bg-shade-amount, $btn-hover-bg-tint-amount)};
-      --#{$lte-prefix}primary-hover-border: #{lte-primary-state($value, $btn-hover-border-shade-amount, $btn-hover-border-tint-amount)};
-      --#{$lte-prefix}primary-active: #{lte-primary-state($value, $btn-active-bg-shade-amount, $btn-active-bg-tint-amount)};
-      --#{$lte-prefix}primary-active-border: #{lte-primary-state($value, $btn-active-border-shade-amount, $btn-active-border-tint-amount)};
+      --#{$lte-prefix}primary-hover: #{lte-primary-state($value, $btn-hover-bg-shade-amount, $btn-hover-bg-tint-amount, $text)};
+      --#{$lte-prefix}primary-hover-border: #{lte-primary-state($value, $btn-hover-border-shade-amount, $btn-hover-border-tint-amount, $text)};
+      --#{$lte-prefix}primary-active: #{lte-primary-state($value, $btn-active-bg-shade-amount, $btn-active-bg-tint-amount, $text)};
+      --#{$lte-prefix}primary-active-border: #{lte-primary-state($value, $btn-active-border-shade-amount, $btn-active-border-tint-amount, $text)};
 
       // The shared block above already says white; only the light colours,
       // which carry dark text, need to say otherwise
@@ -107,6 +109,24 @@
   }
 }
 
+// `data-lte-contrast="aa"` for the primary text colour, same rule as the
+// utilities: flip only where the palette's own pick misses AA (#6110).
+@each $name, $value in map.merge($theme-colors, $lte-palette) {
+  @if $name != "primary" {
+    $aa: lte-contrast-aa($value);
+    $text: if(map.has-key($lte-palette, $name), lte-contrast($value), color-contrast($value));
+
+    @if lte-needs-aa($value, $text) {
+      // `data-lte-contrast` and `data-lte-primary` are usually the same element
+      [data-lte-contrast="aa"][data-lte-primary="#{$name}"],
+      [data-lte-contrast="aa"] [data-lte-primary="#{$name}"] {
+        --#{$lte-prefix}primary-color: #{$aa};
+        --#{$lte-prefix}primary-color-rgb: #{to-rgb($aa)};
+      }
+    }
+  }
+}
+
 // The components that bake the colour
 // --------------------------------------------------------
 // Deliberately a second `[data-lte-primary]` block: the variable defaults above

package/src/scss/colors/_variables.scss

@@ -113,6 +113,24 @@ $lte-palette-yiq-text-light: $white !default;
   @return string.unquote("##{lte-hex-channel($r)}#{lte-hex-channel($g)}#{lte-hex-channel($b)}");
 }
 
+// The text colour WCAG AA needs on this background, whatever rule the sheet
+// itself uses. Bootstrap's `color-contrast()` keeps white where white clears the
+// ratio and returns black where it does not — note that AdminLTE 3's own dark
+// ink (#1f2d3d) is NOT enough here: it reaches 4.5:1 on only two of the eight
+// v3 colours that fall short (#6110).
+@function lte-contrast-aa($color) {
+  @return color-contrast($color, $min-contrast-ratio: 4.5);
+}
+
+// True only when the text colour this sheet assigns actually falls short. The
+// test is the ratio, not "is it a different colour": v3 writes dark text as
+// #1f2d3d, which clears AA on lime, orange and yellow — those must not flip
+// just because AA's dark ink is pure black.
+@function lte-needs-aa($color, $text: null) {
+  $on: if($text == null, lte-contrast($color), $text);
+  @return contrast-ratio($color, $on) < 4.5;
+}
+
 @function lte-contrast($color) {
   @if $lte-palette-contrast == "yiq" {
     // stylelint-disable scss/at-function-named-arguments -- `$space` is required by color.channel()

package/src/ts/adminlte.ts

@@ -10,7 +10,7 @@ import SidebarSearch from './sidebar-search.js'
 import { initAccessibility } from './accessibility.js'
 
 /**
- * AdminLTE v4.7.0
+ * AdminLTE v4.8.0
  * Author: Colorlib
  * Website: AdminLTE.io <https://adminlte.io>
  * License: Open source - MIT <https://opensource.org/licenses/MIT>