admin-lte 4.6.0 → 4.8.0

package/CHANGELOG.md

@@ -5,6 +5,27 @@ All notable changes to AdminLTE will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [4.8.0] - 2026-08-19
+
+### Added
+
+- **`data-lte-contrast="aa"` — WCAG AA text on the AdminLTE 3 palette, without changing a single colour.** The v3 sheet reproduces v3's YIQ text rule faithfully, and that rule assigns white text to eight colours that do not reach 4.5:1 for normal text: `teal` (2.13:1), `cyan` (3.04), `green` (3.13), `olive` (3.51), `lightblue` (3.67), `fuchsia` (3.79), `pink` (3.82) and `blue` (3.98). The attribute — on `<html>`, `<body>` or any container — flips exactly those eight to the ink that passes (5.28:1 to 9.86:1), leaving every background byte-identical, and covers everywhere the palette paints text on its own colour: `.text-bg-*`, `.bg-gradient-*`, `.card-*` headers, `.direct-chat-*` and the button, badge and pill text `data-lte-primary` produces. It has to be true black: AdminLTE 3's own dark ink `#1f2d3d` clears 4.5:1 on only two of the eight, so the colours that already carry dark text (`lime`, `orange`, `yellow`) keep `#1f2d3d` and are left alone. Rules are emitted per colour only where the palette's own rule falls short, so the designed palette — every colour AA with white by construction — emits nothing and the switch costs it nothing. **UI → Colors** and **Theme Customize** gained a toggle that also re-pairs a flipped sidebar or header with `data-bs-theme="light"` so its nav links follow (#6110, reported by @johnnyq).
+
+### Fixed
+
+- **`data-lte-primary` gave Bootstrap's `info` white text on the v3 sheet.** The primary presets applied the active sheet's contrast rule to Bootstrap's own theme colours too, and v3's YIQ test puts `#0dcaf0` at 149.8 against a threshold of 150 — one tenth of a point from dark text — so `data-lte-primary="info"` produced white on cyan at 1.96:1 while `.btn-info` on the same page stayed black. Bootstrap's theme colours now keep Bootstrap's own contrast rule; the palette colours keep the sheet's.
+
+## [4.7.0] - 2026-08-18
+
+### Added
+
+- **`data-lte-print="plain"` — print a page as a document, not as a copy of a screen.** Two rules in the print stylesheet restyle content unconditionally: the target of every external link is printed after it (`a[href^="http"]::after`), and buttons are outlined in black. They are the HTML5 Boilerplate conventions and they suit printing a web page, but they are wrong for an invoice, quote or work order that goes to a customer — `Pay online (https://pay.example.com/inv/12345?token=…)` is not what anyone wants on paper. The attribute turns both off, on `<html>`, `<body>` or any single container, while text stays black on white so nothing becomes unreadable. Note that `.d-print-none` could not have served as the opt-out: it hides the element, and these rules restyle elements that are meant to print (#6108, requested by @johnnyq). Documented as the **“Printing a page as a document”** recipe.
+
+### Fixed
+
+- **Every sidebar item printed inside a black box.** The print rule that outlines buttons also listed `.nav-link`, and the sidebar prints by design (since 4.0.0), so a printed page came out with a black rectangle around all 85 menu items. The outline now applies to `.btn` only; nav links keep the ink-saving black-on-transparent treatment and print as ordinary text (#6108).
+- The FAQ answer for “How do I change the primary colour?” recommended overriding `--bs-primary` on `:root` — the one approach that leaves `.btn-primary` blue, which is what led to #6107. It now gives the two that work: `$primary` in Sass, or `data-lte-primary` with the palette sheet.
+
 ## [4.6.0] - 2026-08-18
 
 ### Added

package/dist/css/adminlte-colors-v3.css

@@ -1,6 +1,6 @@
 @charset "UTF-8";
 /*!
- *   AdminLTE v4.6.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
@@ -1531,6 +1531,111 @@
   background-color: #2c3136 !important;
 }
 
+[data-lte-contrast=aa] .text-bg-lightblue,
+[data-lte-contrast=aa] .bg-gradient-lightblue {
+  color: #000 !important;
+}
+[data-lte-contrast=aa] .card-lightblue,
+[data-lte-contrast=aa] .bg-lightblue,
+[data-lte-contrast=aa] .text-bg-lightblue {
+  --lte-card-variant-color: #000;
+  --lte-card-variant-color-rgb: 0, 0, 0;
+}
+[data-lte-contrast=aa] .direct-chat-lightblue {
+  --lte-direct-chat-color: #000;
+}
+[data-lte-contrast=aa] .text-bg-olive,
+[data-lte-contrast=aa] .bg-gradient-olive {
+  color: #000 !important;
+}
+[data-lte-contrast=aa] .card-olive,
+[data-lte-contrast=aa] .bg-olive,
+[data-lte-contrast=aa] .text-bg-olive {
+  --lte-card-variant-color: #000;
+  --lte-card-variant-color-rgb: 0, 0, 0;
+}
+[data-lte-contrast=aa] .direct-chat-olive {
+  --lte-direct-chat-color: #000;
+}
+[data-lte-contrast=aa] .text-bg-fuchsia,
+[data-lte-contrast=aa] .bg-gradient-fuchsia {
+  color: #000 !important;
+}
+[data-lte-contrast=aa] .card-fuchsia,
+[data-lte-contrast=aa] .bg-fuchsia,
+[data-lte-contrast=aa] .text-bg-fuchsia {
+  --lte-card-variant-color: #000;
+  --lte-card-variant-color-rgb: 0, 0, 0;
+}
+[data-lte-contrast=aa] .direct-chat-fuchsia {
+  --lte-direct-chat-color: #000;
+}
+[data-lte-contrast=aa] .text-bg-blue,
+[data-lte-contrast=aa] .bg-gradient-blue {
+  color: #000 !important;
+}
+[data-lte-contrast=aa] .card-blue,
+[data-lte-contrast=aa] .bg-blue,
+[data-lte-contrast=aa] .text-bg-blue {
+  --lte-card-variant-color: #000;
+  --lte-card-variant-color-rgb: 0, 0, 0;
+}
+[data-lte-contrast=aa] .direct-chat-blue {
+  --lte-direct-chat-color: #000;
+}
+[data-lte-contrast=aa] .text-bg-pink,
+[data-lte-contrast=aa] .bg-gradient-pink {
+  color: #000 !important;
+}
+[data-lte-contrast=aa] .card-pink,
+[data-lte-contrast=aa] .bg-pink,
+[data-lte-contrast=aa] .text-bg-pink {
+  --lte-card-variant-color: #000;
+  --lte-card-variant-color-rgb: 0, 0, 0;
+}
+[data-lte-contrast=aa] .direct-chat-pink {
+  --lte-direct-chat-color: #000;
+}
+[data-lte-contrast=aa] .text-bg-green,
+[data-lte-contrast=aa] .bg-gradient-green {
+  color: #000 !important;
+}
+[data-lte-contrast=aa] .card-green,
+[data-lte-contrast=aa] .bg-green,
+[data-lte-contrast=aa] .text-bg-green {
+  --lte-card-variant-color: #000;
+  --lte-card-variant-color-rgb: 0, 0, 0;
+}
+[data-lte-contrast=aa] .direct-chat-green {
+  --lte-direct-chat-color: #000;
+}
+[data-lte-contrast=aa] .text-bg-teal,
+[data-lte-contrast=aa] .bg-gradient-teal {
+  color: #000 !important;
+}
+[data-lte-contrast=aa] .card-teal,
+[data-lte-contrast=aa] .bg-teal,
+[data-lte-contrast=aa] .text-bg-teal {
+  --lte-card-variant-color: #000;
+  --lte-card-variant-color-rgb: 0, 0, 0;
+}
+[data-lte-contrast=aa] .direct-chat-teal {
+  --lte-direct-chat-color: #000;
+}
+[data-lte-contrast=aa] .text-bg-cyan,
+[data-lte-contrast=aa] .bg-gradient-cyan {
+  color: #000 !important;
+}
+[data-lte-contrast=aa] .card-cyan,
+[data-lte-contrast=aa] .bg-cyan,
+[data-lte-contrast=aa] .text-bg-cyan {
+  --lte-card-variant-color: #000;
+  --lte-card-variant-color-rgb: 0, 0, 0;
+}
+[data-lte-contrast=aa] .direct-chat-cyan {
+  --lte-direct-chat-color: #000;
+}
+
 .bg-opacity-10 {
   --bs-bg-opacity: 0.1;
 }
@@ -1647,10 +1752,12 @@
   --bs-link-color-rgb: var(--bs-info-rgb);
   --bs-link-hover-color: #0aa2c0;
   --bs-link-hover-color-rgb: 10, 162, 192;
-  --lte-primary-hover: #0baccc;
-  --lte-primary-hover-border: #0aa2c0;
-  --lte-primary-active: #0aa2c0;
-  --lte-primary-active-border: #0a98b4;
+  --lte-primary-hover: #31d2f2;
+  --lte-primary-hover-border: #25cff2;
+  --lte-primary-active: #3dd5f3;
+  --lte-primary-active-border: #25cff2;
+  --lte-primary-color: #000;
+  --lte-primary-color-rgb: 0, 0, 0;
 }
 
 [data-lte-primary=warning] {
@@ -1667,8 +1774,8 @@
   --lte-primary-hover-border: #ffc720;
   --lte-primary-active: #ffcd39;
   --lte-primary-active-border: #ffc720;
-  --lte-primary-color: #1f2d3d;
-  --lte-primary-color-rgb: 31, 45, 61;
+  --lte-primary-color: #000;
+  --lte-primary-color-rgb: 0, 0, 0;
 }
 
 [data-lte-primary=danger] {
@@ -1701,8 +1808,8 @@
   --lte-primary-hover-border: #f9fafb;
   --lte-primary-active: #f9fafb;
   --lte-primary-active-border: #f9fafb;
-  --lte-primary-color: #1f2d3d;
-  --lte-primary-color-rgb: 31, 45, 61;
+  --lte-primary-color: #000;
+  --lte-primary-color-rgb: 0, 0, 0;
 }
 
 [data-lte-primary=dark] {
@@ -2191,6 +2298,54 @@
   --bs-link-hover-color-rgb: 158, 160, 163;
 }
 
+[data-lte-contrast=aa][data-lte-primary=lightblue],
+[data-lte-contrast=aa] [data-lte-primary=lightblue] {
+  --lte-primary-color: #000;
+  --lte-primary-color-rgb: 0, 0, 0;
+}
+
+[data-lte-contrast=aa][data-lte-primary=olive],
+[data-lte-contrast=aa] [data-lte-primary=olive] {
+  --lte-primary-color: #000;
+  --lte-primary-color-rgb: 0, 0, 0;
+}
+
+[data-lte-contrast=aa][data-lte-primary=fuchsia],
+[data-lte-contrast=aa] [data-lte-primary=fuchsia] {
+  --lte-primary-color: #000;
+  --lte-primary-color-rgb: 0, 0, 0;
+}
+
+[data-lte-contrast=aa][data-lte-primary=blue],
+[data-lte-contrast=aa] [data-lte-primary=blue] {
+  --lte-primary-color: #000;
+  --lte-primary-color-rgb: 0, 0, 0;
+}
+
+[data-lte-contrast=aa][data-lte-primary=pink],
+[data-lte-contrast=aa] [data-lte-primary=pink] {
+  --lte-primary-color: #000;
+  --lte-primary-color-rgb: 0, 0, 0;
+}
+
+[data-lte-contrast=aa][data-lte-primary=green],
+[data-lte-contrast=aa] [data-lte-primary=green] {
+  --lte-primary-color: #000;
+  --lte-primary-color-rgb: 0, 0, 0;
+}
+
+[data-lte-contrast=aa][data-lte-primary=teal],
+[data-lte-contrast=aa] [data-lte-primary=teal] {
+  --lte-primary-color: #000;
+  --lte-primary-color-rgb: 0, 0, 0;
+}
+
+[data-lte-contrast=aa][data-lte-primary=cyan],
+[data-lte-contrast=aa] [data-lte-primary=cyan] {
+  --lte-primary-color: #000;
+  --lte-primary-color-rgb: 0, 0, 0;
+}
+
 /* stylelint-disable-next-line no-duplicate-selectors */
 [data-lte-primary] .btn-primary {
   --bs-btn-color: var(--lte-primary-color);