admin-lte 4.5.0 → 4.7.0

package/dist/js/adminlte.esm.js

@@ -1,5 +1,5 @@
 /*!
- * AdminLTE v4.5.0 (https://adminlte.io)
+ * AdminLTE v4.7.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.5.0 (https://adminlte.io)
+ * AdminLTE v4.7.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.5.0 (https://adminlte.io)
+ * AdminLTE v4.7.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.5.0 (https://adminlte.io)
+ * AdminLTE v4.7.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.5.0",
+  "version": "4.7.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);
   }
 }
 
@@ -278,21 +281,49 @@ fieldset {
 
 /* Print Accessibility */
 @media print {
+  // Printers drop backgrounds, so anything that takes its text colour from one
+  // — a `.btn-primary`, a nav link on a coloured sidebar — would print white on
+  // nothing. Force legible ink instead.
   .skip-link,
   .btn,
   .nav-link {
     color: #000 !important;
     background: transparent !important;
+  }
+
+  // A button should still read as a button on paper. Nav links are ordinary
+  // text in print: the sidebar prints by design, so outlining every item put a
+  // black box around the whole menu, which was never the intent (#6108).
+  .btn {
     border: 1px solid #000 !important;
   }
 
+  // The HTML5 Boilerplate convention: a reader holding paper cannot follow a
+  // link, so print where it goes.
   a[href^="http"]::after {
     font-size: .8em;
     content: " (" attr(href) ")";
   }
 
-  /* Print Layout Fix - Ensure sidebar and main content are both visible */
-  .app-wrapper {
+  // `data-lte-print="plain"` — for pages that print as a document (invoice,
+  // quote, work order, packing slip) rather than as a copy of a web page: no
+  // URLs after links, no outline around buttons. Goes on <html>, <body> or any
+  // container; text stays black on white either way (#6108).
+  [data-lte-print="plain"] {
+    a[href^="http"]::after {
+      content: none;
+    }
+
+    .btn {
+      border-color: transparent !important;
+    }
+  }
+
+  /* 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 +333,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

@@ -1,11 +1,12 @@
 /*!
- *   AdminLTE v4.5.0 — AdminLTE 3 color palette (legacy)
+ *   AdminLTE v4.7.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.
+ *   `.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, …)
@@ -57,3 +58,4 @@ $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.5.0 — Extended color palette
+ *   AdminLTE v4.7.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.5.0 — documentation styles
+ *   AdminLTE v4.7.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.5.0 — Select2 compatibility theme
+ *   AdminLTE v4.7.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.5.0
+ *   AdminLTE v4.7.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

@@ -2,6 +2,7 @@
 @use "sass:list";
 @use "sass:map";
 @use "sass:math";
+@use "sass:string";
 
 //
 // Colors: Variables
@@ -92,6 +93,26 @@ $lte-palette-yiq-text-light: $white !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()

package/src/ts/adminlte.ts

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