admin-lte 4.4.1 → 4.6.0

package/dist/js/adminlte.esm.js

@@ -1,5 +1,5 @@
 /*!
- * AdminLTE v4.4.1 (https://adminlte.io)
+ * AdminLTE v4.6.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.4.1 (https://adminlte.io)
+ * AdminLTE v4.6.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.4.1 (https://adminlte.io)
+ * AdminLTE v4.6.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.4.1 (https://adminlte.io)
+ * AdminLTE v4.6.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.4.1",
+  "version": "4.6.0",
   "type": "module",
   "license": "MIT",
   "author": "Colorlib <https://colorlib.com>",

package/src/scss/_accessibility.scss

@@ -21,9 +21,12 @@
   }
 
   &:hover {
-    color: var(--bs-white);
+    // `--bs-primary-emphasis` does not exist; Bootstrap emits
+    // `--bs-primary-text-emphasis`, which is dark in light mode and light in
+    // dark mode — so pair it with the body background for the text colour.
+    color: var(--bs-body-bg);
     text-decoration: none;
-    background: var(--bs-primary-emphasis);
+    background: var(--bs-primary-text-emphasis);
   }
 }
 
@@ -291,8 +294,11 @@ fieldset {
     content: " (" attr(href) ")";
   }
 
-  /* Print Layout Fix - Ensure sidebar and main content are both visible */
-  .app-wrapper {
+  /* Print Layout Fix - Ensure sidebar and main content are both visible.
+     `:not(.d-print-none)` on the two rules that force `display`, so Bootstrap's
+     print display utilities keep working: these are defaults for the standard
+     layout, not something a page should have to fight to hide. */
+  .app-wrapper:not(.d-print-none) {
     display: grid !important;
     grid-template-rows: auto 1fr auto !important;
     grid-template-columns: auto 1fr !important;
@@ -302,7 +308,7 @@ fieldset {
     display: none !important;
   }
 
-  .app-sidebar {
+  .app-sidebar:not(.d-print-none) {
     position: static !important;
     display: block !important;
     min-width: 200px !important;

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

@@ -0,0 +1,61 @@
+/*!
+ *   AdminLTE v4.6.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
+ *   the AdminLTE 4 class families: `.bg-*`, `.text-bg-*`, `.text-*`,
+ *   `.border-*`, `.link-*`, `.bg-gradient-*`, `.card-*`, `.callout-*`,
+ *   `.direct-chat-*`, plus dark-mode tokens — and `data-lte-primary="lightblue"`
+ *   on <html> to make any of them Bootstrap's `primary`, buttons and all.
+ *
+ *   Load EITHER this file OR adminlte-colors.css (the palette designed for
+ *   4.4), not both: they define the same class names (navy, teal, olive, …)
+ *   with different values. Nothing here is in adminlte.css.
+ *   See docs/colors.html.
+ *
+ *   Author: Colorlib
+ *   Website: AdminLTE.io <https://adminlte.io>
+ *   License: Open source - MIT <https://opensource.org/licenses/MIT>
+ */
+
+// Bootstrap Configuration
+// ---------------------------------------------------
+@import "bootstrap/scss/functions";
+@import "bootstrap-overrides";
+@import "bootstrap/scss/variables";
+@import "bootstrap/scss/variables-dark";
+@import "bootstrap/scss/maps";
+@import "bootstrap/scss/mixins";
+
+// AdminLTE Configuration
+// ---------------------------------------------------
+@import "variables";
+@import "variables-dark";
+
+// The AdminLTE 3 palette — values read from the 3.2.0 build, unchanged
+// ---------------------------------------------------
+$lte-palette: (
+  "lightblue": #3c8dbc,
+  "navy":      #001f3f,
+  "olive":     #3d9970,
+  "lime":      #01ff70,
+  "fuchsia":   #f012be,
+  "maroon":    #d81b60,
+  "blue":      #007bff,
+  "indigo":    #6610f2,
+  "purple":    #6f42c1,
+  "pink":      #e83e8c,
+  "red":       #dc3545,
+  "orange":    #fd7e14,
+  "yellow":    #ffc107,
+  "green":     #28a745,
+  "teal":      #20c997,
+  "cyan":      #17a2b8,
+  "gray":      #6c757d,
+  "gray-dark": #343a40
+) !default;
+$lte-palette-contrast: "yiq" !default;
+
+@import "colors/variables";
+@import "colors/colors";
+@import "colors/primary";

package/src/scss/adminlte-colors.scss

@@ -1,12 +1,14 @@
 /*!
- *   AdminLTE v4.4.1 — Extended color palette
+ *   AdminLTE v4.6.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-*`
  *   tokens plus the
  *   `.bg-*`, `.text-bg-*`, `.text-*`, `.border-*`, `.link-*`, `.bg-gradient-*`,
  *   `.card-*`, `.callout-*` and `.direct-chat-*` families — with dark mode.
- *   Every colour takes white text at ≥ 4.6:1. See docs/colors.html.
+ *   `data-lte-primary="teal"` on <html> also makes that colour Bootstrap's
+ *   `primary`, buttons and all. Every colour takes white text at ≥ 4.6:1.
+ *   See docs/colors.html.
  *
  *   Author: Colorlib
  *   Website: AdminLTE.io <https://adminlte.io>
@@ -33,3 +35,4 @@
 // ---------------------------------------------------
 @import "colors/variables";
 @import "colors/colors";
+@import "colors/primary";

package/src/scss/adminlte-docs.scss

@@ -1,5 +1,5 @@
 /*!
- *   AdminLTE v4.4.1 — documentation styles
+ *   AdminLTE v4.6.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.4.1 — Select2 compatibility theme
+ *   AdminLTE v4.6.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.4.1
+ *   AdminLTE v4.6.0
  *   Author: Colorlib
  *   Website: AdminLTE.io <https://adminlte.io>
  *   License: Open source - MIT <https://opensource.org/licenses/MIT>

package/src/scss/colors/_colors.scss

@@ -18,18 +18,18 @@
   @each $name, $value in $lte-palette {
     --#{$prefix}#{$name}: #{$value};
     --#{$prefix}#{$name}-rgb: #{to-rgb($value)};
-    --#{$prefix}#{$name}-text-emphasis: #{shade-color($value, 60%)};
-    --#{$prefix}#{$name}-bg-subtle: #{tint-color($value, 80%)};
-    --#{$prefix}#{$name}-border-subtle: #{tint-color($value, 60%)};
+    --#{$prefix}#{$name}-text-emphasis: #{lte-hex(shade-color($value, 60%))};
+    --#{$prefix}#{$name}-bg-subtle: #{lte-hex(tint-color($value, 80%))};
+    --#{$prefix}#{$name}-border-subtle: #{lte-hex(tint-color($value, 60%))};
   }
 }
 
 @if $enable-dark-mode {
   @include color-mode(dark, true) {
     @each $name, $value in $lte-palette {
-      --#{$prefix}#{$name}-text-emphasis: #{tint-color($value, 40%)};
-      --#{$prefix}#{$name}-bg-subtle: #{shade-color($value, 80%)};
-      --#{$prefix}#{$name}-border-subtle: #{shade-color($value, 40%)};
+      --#{$prefix}#{$name}-text-emphasis: #{lte-hex(tint-color($value, 40%))};
+      --#{$prefix}#{$name}-bg-subtle: #{lte-hex(shade-color($value, 80%))};
+      --#{$prefix}#{$name}-border-subtle: #{lte-hex(shade-color($value, 40%))};
     }
   }
 }
@@ -127,12 +127,12 @@
   .btn.bg-gradient-#{$name} {
     &:hover,
     &:focus-visible {
-      background-color: #{shade-color($value, 10%)} !important;
+      background-color: #{lte-hex(shade-color($value, 10%))} !important;
     }
 
     &:active,
     &.active {
-      background-color: #{shade-color($value, 15%)} !important;
+      background-color: #{lte-hex(shade-color($value, 15%))} !important;
     }
   }
 }

package/src/scss/colors/_primary.scss

@@ -0,0 +1,253 @@
+@use "sass:map";
+
+//
+// Colors: `primary` as a theme colour
+// --------------------------------------------------------
+// Bootstrap bakes `$primary` into components at build time — `.btn-primary`
+// carries `--bs-btn-bg: #0d6efd`, not `var(--bs-primary)` — so overriding
+// `--bs-primary` alone repaints utilities and leaves buttons blue.
+//
+// This block rewires those components to variables, then points the variables
+// at a palette colour per `data-lte-primary` value:
+//
+//   <html lang="en" data-lte-primary="teal">
+//
+// Nothing applies without the attribute, and it works on any container, so a
+// section of a page can carry its own primary. Requested in #6107.
+//
+
+// 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);
+
+  @if $text == $color-contrast-light or $text == $lte-palette-yiq-text-light {
+    @return lte-hex(shade-color($color, $shade));
+  }
+
+  @return lte-hex(tint-color($color, $tint));
+}
+
+// Defaults, so `data-lte-primary` also works with a hand-written
+// `--bs-primary` (a brand colour that is not in the palette).
+[data-lte-primary] {
+  --#{$prefix}focus-ring-color: rgba(var(--#{$prefix}primary-rgb), #{$focus-ring-opacity});
+  --#{$lte-prefix}primary-color: #{$color-contrast-light};
+  --#{$lte-prefix}primary-color-rgb: #{to-rgb($color-contrast-light)};
+  --#{$lte-prefix}primary-hover: var(--#{$prefix}primary);
+  --#{$lte-prefix}primary-hover-border: var(--#{$prefix}primary);
+  --#{$lte-prefix}primary-active: var(--#{$prefix}primary);
+  --#{$lte-prefix}primary-active-border: var(--#{$prefix}primary);
+}
+
+// Shade the hover / active states of a hand-written colour where the browser
+// can do the maths. Guarded: without the guard, older browsers would resolve
+// the variable to nothing and paint a transparent button.
+@supports (color: color-mix(in srgb, red 50%, black)) {
+  [data-lte-primary] {
+    --#{$lte-prefix}primary-hover: color-mix(in srgb, var(--#{$prefix}primary) 85%, #{$black});
+    --#{$lte-prefix}primary-hover-border: color-mix(in srgb, var(--#{$prefix}primary) 80%, #{$black});
+    --#{$lte-prefix}primary-active: color-mix(in srgb, var(--#{$prefix}primary) 80%, #{$black});
+    --#{$lte-prefix}primary-active-border: color-mix(in srgb, var(--#{$prefix}primary) 75%, #{$black});
+  }
+}
+
+// The presets: every palette colour, plus Bootstrap's own theme colours, so
+// `data-lte-primary="danger"` works without the palette being involved. The
+// tokens are aliases — dark mode is already handled where they are defined.
+@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);
+
+    [data-lte-primary="#{$name}"] {
+      --#{$prefix}primary: var(--#{$prefix}#{$name});
+      --#{$prefix}primary-rgb: var(--#{$prefix}#{$name}-rgb);
+      --#{$prefix}primary-text-emphasis: var(--#{$prefix}#{$name}-text-emphasis);
+      --#{$prefix}primary-bg-subtle: var(--#{$prefix}#{$name}-bg-subtle);
+      --#{$prefix}primary-border-subtle: var(--#{$prefix}#{$name}-border-subtle);
+      --#{$prefix}link-color: var(--#{$prefix}#{$name});
+      --#{$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)};
+
+      // The shared block above already says white; only the light colours,
+      // which carry dark text, need to say otherwise
+      @if $text != $color-contrast-light {
+        --#{$lte-prefix}primary-color: #{$text};
+        --#{$lte-prefix}primary-color-rgb: #{to-rgb($text)};
+      }
+    }
+  }
+}
+
+// Links carry Bootstrap's dark-mode tint, as they do for the default primary.
+@if $enable-dark-mode {
+  @include color-mode(dark, true) {
+    @each $name, $value in map.merge($theme-colors, $lte-palette) {
+      @if $name != "primary" {
+        $link-dark: tint-color($value, 40%);
+        $link-dark-hover: tint-color($link-dark, 20%);
+
+        // Both selectors: `data-bs-theme` and `data-lte-primary` usually sit on
+        // the same <html> element, which a descendant combinator would miss.
+        &[data-lte-primary="#{$name}"],
+        [data-lte-primary="#{$name}"] {
+          --#{$prefix}link-color: #{lte-hex($link-dark)};
+          --#{$prefix}link-color-rgb: #{to-rgb($link-dark)};
+          --#{$prefix}link-hover-color: #{lte-hex($link-dark-hover)};
+          --#{$prefix}link-hover-color-rgb: #{to-rgb($link-dark-hover)};
+        }
+      }
+    }
+  }
+}
+
+// The components that bake the colour
+// --------------------------------------------------------
+// Deliberately a second `[data-lte-primary]` block: the variable defaults above
+// have to be declared before the per-colour presets (same specificity), and the
+// component rules have to come after them.
+/* stylelint-disable-next-line no-duplicate-selectors */
+[data-lte-primary] {
+  .btn-primary {
+    --#{$prefix}btn-color: var(--#{$lte-prefix}primary-color);
+    --#{$prefix}btn-bg: var(--#{$prefix}primary);
+    --#{$prefix}btn-border-color: var(--#{$prefix}primary);
+    --#{$prefix}btn-hover-color: var(--#{$lte-prefix}primary-color);
+    --#{$prefix}btn-hover-bg: var(--#{$lte-prefix}primary-hover);
+    --#{$prefix}btn-hover-border-color: var(--#{$lte-prefix}primary-hover-border);
+    --#{$prefix}btn-focus-shadow-rgb: var(--#{$prefix}primary-rgb);
+    --#{$prefix}btn-active-color: var(--#{$lte-prefix}primary-color);
+    --#{$prefix}btn-active-bg: var(--#{$lte-prefix}primary-active);
+    --#{$prefix}btn-active-border-color: var(--#{$lte-prefix}primary-active-border);
+    --#{$prefix}btn-disabled-color: var(--#{$lte-prefix}primary-color);
+    --#{$prefix}btn-disabled-bg: var(--#{$prefix}primary);
+    --#{$prefix}btn-disabled-border-color: var(--#{$prefix}primary);
+  }
+
+  .btn-outline-primary {
+    --#{$prefix}btn-color: var(--#{$prefix}primary);
+    --#{$prefix}btn-border-color: var(--#{$prefix}primary);
+    --#{$prefix}btn-hover-color: var(--#{$lte-prefix}primary-color);
+    --#{$prefix}btn-hover-bg: var(--#{$prefix}primary);
+    --#{$prefix}btn-hover-border-color: var(--#{$prefix}primary);
+    --#{$prefix}btn-focus-shadow-rgb: var(--#{$prefix}primary-rgb);
+    --#{$prefix}btn-active-color: var(--#{$lte-prefix}primary-color);
+    --#{$prefix}btn-active-bg: var(--#{$prefix}primary);
+    --#{$prefix}btn-active-border-color: var(--#{$prefix}primary);
+    --#{$prefix}btn-disabled-color: var(--#{$prefix}primary);
+    --#{$prefix}btn-disabled-border-color: var(--#{$prefix}primary);
+  }
+
+  .btn-link {
+    --#{$prefix}btn-focus-shadow-rgb: var(--#{$prefix}primary-rgb);
+  }
+
+  // `.text-bg-primary` hard-codes white; the rest of it already reads the token
+  .text-bg-primary {
+    color: var(--#{$lte-prefix}primary-color) !important;
+  }
+
+  .link-primary {
+    &:hover,
+    &:focus {
+      color: RGBA(var(--#{$prefix}link-hover-color-rgb), var(--#{$prefix}link-opacity, 1)) !important;
+      text-decoration-color: RGBA(var(--#{$prefix}link-hover-color-rgb), var(--#{$prefix}link-underline-opacity, 1)) !important;
+    }
+  }
+
+  .dropdown-menu {
+    --#{$prefix}dropdown-link-active-color: var(--#{$lte-prefix}primary-color);
+    --#{$prefix}dropdown-link-active-bg: var(--#{$prefix}primary);
+  }
+
+  .nav-pills {
+    --#{$prefix}nav-pills-link-active-color: var(--#{$lte-prefix}primary-color);
+    --#{$prefix}nav-pills-link-active-bg: var(--#{$prefix}primary);
+  }
+
+  .pagination {
+    --#{$prefix}pagination-active-color: var(--#{$lte-prefix}primary-color);
+    --#{$prefix}pagination-active-bg: var(--#{$prefix}primary);
+    --#{$prefix}pagination-active-border-color: var(--#{$prefix}primary);
+    --#{$prefix}pagination-focus-box-shadow: 0 0 0 $pagination-focus-box-shadow-width rgba(var(--#{$prefix}primary-rgb), #{$focus-ring-opacity});
+  }
+
+  .progress,
+  .progress-stacked {
+    --#{$prefix}progress-bar-color: var(--#{$lte-prefix}primary-color);
+    --#{$prefix}progress-bar-bg: var(--#{$prefix}primary);
+  }
+
+  .list-group {
+    --#{$prefix}list-group-active-color: var(--#{$lte-prefix}primary-color);
+    --#{$prefix}list-group-active-bg: var(--#{$prefix}primary);
+    --#{$prefix}list-group-active-border-color: var(--#{$prefix}primary);
+  }
+
+  // The open-state chevron is a data URI in Bootstrap's blue; the closed one is
+  // body-coloured and rotates just the same
+  .accordion {
+    --#{$prefix}accordion-btn-active-icon: var(--#{$prefix}accordion-btn-icon);
+  }
+
+  // Forms
+  .form-control:focus,
+  .form-select:focus {
+    border-color: var(--#{$prefix}primary);
+    box-shadow: var(--#{$prefix}box-shadow-inset), 0 0 0 $input-btn-focus-width rgba(var(--#{$prefix}primary-rgb), #{$focus-ring-opacity});
+  }
+
+  .form-check-input:focus {
+    border-color: var(--#{$prefix}primary);
+    box-shadow: 0 0 0 $input-btn-focus-width rgba(var(--#{$prefix}primary-rgb), #{$focus-ring-opacity});
+  }
+
+  .form-check-input:checked,
+  .form-check-input[type="checkbox"]:indeterminate {
+    background-color: var(--#{$prefix}primary);
+    border-color: var(--#{$prefix}primary);
+  }
+
+  // Focus paints a blue knob into a data URI; keep the resting one instead
+  .form-switch .form-check-input:focus:not(:checked) {
+    --#{$prefix}form-switch-bg: #{escape-svg($form-switch-bg-image)};
+  }
+
+  .form-range {
+    &::-webkit-slider-thumb {
+      background-color: var(--#{$prefix}primary);
+    }
+
+    &::-moz-range-thumb {
+      background-color: var(--#{$prefix}primary);
+    }
+  }
+
+  // AdminLTE's own primary hooks
+  .card-primary,
+  .bg-primary,
+  .text-bg-primary {
+    --#{$lte-prefix}card-variant-bg: var(--#{$prefix}primary);
+    --#{$lte-prefix}card-variant-bg-rgb: var(--#{$prefix}primary-rgb);
+    --#{$lte-prefix}card-variant-color: var(--#{$lte-prefix}primary-color);
+    --#{$lte-prefix}card-variant-color-rgb: var(--#{$lte-prefix}primary-color-rgb);
+  }
+
+  .direct-chat-primary {
+    --#{$lte-prefix}direct-chat-color: var(--#{$lte-prefix}primary-color);
+    --#{$lte-prefix}direct-chat-bg: var(--#{$prefix}primary);
+  }
+
+  .toast-primary {
+    --#{$prefix}toast-header-color: var(--#{$lte-prefix}primary-color);
+    --#{$prefix}toast-header-bg: var(--#{$prefix}primary);
+    --#{$prefix}toast-header-border-color: var(--#{$prefix}primary);
+    --#{$prefix}toast-border-color: var(--#{$prefix}primary);
+  }
+}

package/src/scss/colors/_variables.scss

@@ -1,5 +1,8 @@
+@use "sass:color";
 @use "sass:list";
 @use "sass:map";
+@use "sass:math";
+@use "sass:string";
 
 //
 // Colors: Variables
@@ -67,6 +70,16 @@ $lte-palette-aliases: () !default;
 // palettes — `3` is WCAG AA for large text and UI components.
 $lte-palette-min-contrast-ratio: $min-contrast-ratio !default;
 
+// Which rule picks that text colour: "wcag" (Bootstrap 5's color-contrast(),
+// governed by the ratio above) or "yiq" — the Bootstrap 4 / AdminLTE 3 rule
+// (perceived brightness against a threshold), which is what gives the v3
+// palette its familiar white-on-lightblue / white-on-teal look.
+// adminlte-colors-v3.scss sets "yiq"; the designed palette uses "wcag".
+$lte-palette-contrast: "wcag" !default;
+$lte-palette-yiq-threshold: 150 !default;
+$lte-palette-yiq-text-dark: #1f2d3d !default; // AdminLTE 3's $yiq-text-dark
+$lte-palette-yiq-text-light: $white !default;
+
 // Resolve custom colours and aliases into the palette
 // --------------------------------------------------------
 @if list.length($lte-palette-custom) > 0 {
@@ -80,6 +93,40 @@ $lte-palette-min-contrast-ratio: $min-contrast-ratio !default;
   $lte-palette: map.merge($lte-palette, ($alias: map.get($lte-palette, $target)));
 }
 
+// Serialise a computed colour as `#0e6864`. Dart Sass writes `rgb(14, 104, 100)`
+// (or worse, `rgb(5.647%, 40.784%, 39.216%)`) and cleancss leaves values inside
+// custom properties alone, so the long form would ship as-is — this is the same
+// colour at a third of the bytes.
+@function lte-hex-channel($value) {
+  $digits: "0" "1" "2" "3" "4" "5" "6" "7" "8" "9" "a" "b" "c" "d" "e" "f";
+  $n: math.clamp(0, math.round($value), 255);
+  @return list.nth($digits, math.floor(math.div($n, 16)) + 1) + list.nth($digits, $n % 16 + 1);
+}
+
+@function lte-hex($color) {
+  // stylelint-disable scss/at-function-named-arguments -- `$space` is required by color.channel()
+  $r: color.channel($color, "red", $space: rgb);
+  $g: color.channel($color, "green", $space: rgb);
+  $b: color.channel($color, "blue", $space: rgb);
+  // stylelint-enable scss/at-function-named-arguments
+
+  @return string.unquote("##{lte-hex-channel($r)}#{lte-hex-channel($g)}#{lte-hex-channel($b)}");
+}
+
 @function lte-contrast($color) {
+  @if $lte-palette-contrast == "yiq" {
+    // stylelint-disable scss/at-function-named-arguments -- `$space` is required by color.channel()
+    $r: color.channel($color, "red", $space: rgb);
+    $g: color.channel($color, "green", $space: rgb);
+    $b: color.channel($color, "blue", $space: rgb);
+    // stylelint-enable scss/at-function-named-arguments
+    $yiq: math.div($r * 299 + $g * 587 + $b * 114, 1000);
+    @if $yiq >= $lte-palette-yiq-threshold {
+      @return $lte-palette-yiq-text-dark;
+    }
+
+    @return $lte-palette-yiq-text-light;
+  }
+
   @return color-contrast($color, $min-contrast-ratio: $lte-palette-min-contrast-ratio);
 }

package/src/ts/adminlte.ts

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