admin-lte 4.4.1 → 4.8.2

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,58 @@ $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)}");
+}
+
+// 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()
+    $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.8.2
  * Author: Colorlib
  * Website: AdminLTE.io <https://adminlte.io>
  * License: Open source - MIT <https://opensource.org/licenses/MIT>