admin-lte 4.2.0 → 4.4.0

package/src/scss/colors/_colors.scss

@@ -0,0 +1,159 @@
+@use "sass:map";
+
+//
+// Colors: Tokens, utilities and component hooks
+//
+// Generated for every entry in `$lte-palette` (see colors/_variables.scss).
+// Nothing here touches Bootstrap's own theme colours; the shapes mirror what
+// Bootstrap emits for them so the two mix freely.
+//
+
+// Tokens
+// --------------------------------------------------------
+// Mirrors what Bootstrap's _root.scss emits for $theme-colors: the colour, its
+// RGB channels (for the opacity utilities) and the subtle / emphasis pair used
+// by callouts — with the dark-mode values Bootstrap would derive.
+:root,
+[data-bs-theme="light"] {
+  @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%)};
+  }
+}
+
+@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%)};
+    }
+  }
+}
+
+// Utilities
+// --------------------------------------------------------
+// Same shape as Bootstrap's own .bg-* / .text-* / .border-* / .text-bg-* /
+// .link-*, so `.bg-opacity-25`, `.link-underline-opacity-*` etc. compose.
+@each $name, $value in $lte-palette {
+  .bg-#{$name} {
+    --#{$prefix}bg-opacity: 1;
+    background-color: rgba(var(--#{$prefix}#{$name}-rgb), var(--#{$prefix}bg-opacity)) !important;
+  }
+
+  .text-#{$name} {
+    --#{$prefix}text-opacity: 1;
+    color: rgba(var(--#{$prefix}#{$name}-rgb), var(--#{$prefix}text-opacity)) !important;
+  }
+
+  .border-#{$name} {
+    --#{$prefix}border-opacity: 1;
+    border-color: rgba(var(--#{$prefix}#{$name}-rgb), var(--#{$prefix}border-opacity)) !important;
+  }
+
+  .text-bg-#{$name} {
+    color: lte-contrast($value) !important;
+    background-color: RGBA(var(--#{$prefix}#{$name}-rgb), var(--#{$prefix}bg-opacity, 1)) !important;
+  }
+
+  .link-#{$name} {
+    color: RGBA(var(--#{$prefix}#{$name}-rgb), var(--#{$prefix}link-opacity, 1)) !important;
+    text-decoration-color: RGBA(var(--#{$prefix}#{$name}-rgb), var(--#{$prefix}link-underline-opacity, 1)) !important;
+
+    &:hover,
+    &:focus {
+      color: RGBA(#{to-rgb(shade-color($value, 20%))}, var(--#{$prefix}link-opacity, 1)) !important;
+      text-decoration-color: RGBA(#{to-rgb(shade-color($value, 20%))}, var(--#{$prefix}link-underline-opacity, 1)) !important;
+    }
+  }
+}
+
+// `.bg-gradient-*` — the AdminLTE 3 class, for the palette AND Bootstrap's
+// theme colours. Bootstrap 5.3 offers the composable `.bg-navy.bg-gradient`;
+// this is that gradient as one class, for v3 markup.
+@each $name, $value in map.merge($theme-colors, $lte-palette) {
+  .bg-gradient-#{$name} {
+    color: lte-contrast($value) !important;
+    background-color: $value !important;
+    background-image: var(--#{$prefix}gradient) !important;
+  }
+}
+
+// Component hooks
+// --------------------------------------------------------
+
+// Cards: feed the --lte-card-variant-* variables _cards.scss reads, so
+// `.card-navy`, `.card-navy.card-outline` and `.card.text-bg-navy` work —
+// and so do info-box progress bars, which read the same variables.
+@each $name, $value in $lte-palette {
+  .card-#{$name},
+  .bg-#{$name},
+  .text-bg-#{$name} {
+    --#{$lte-prefix}card-variant-bg: #{$value};
+    --#{$lte-prefix}card-variant-bg-rgb: #{to-rgb($value)};
+    --#{$lte-prefix}card-variant-color: #{lte-contrast($value)};
+    --#{$lte-prefix}card-variant-color-rgb: #{to-rgb(lte-contrast($value))};
+  }
+}
+
+// Callouts: same subtle / emphasis tokens as the theme-colour callouts
+@each $name, $value in $lte-palette {
+  .callout-#{$name} {
+    --#{$lte-prefix}callout-color: var(--#{$prefix}#{$name}-text-emphasis);
+    --#{$lte-prefix}callout-bg: var(--#{$prefix}#{$name}-bg-subtle);
+    --#{$lte-prefix}callout-border: var(--#{$prefix}#{$name}-border-subtle);
+    --#{$lte-prefix}callout-link: var(--#{$prefix}#{$name}-text-emphasis);
+    --#{$lte-prefix}callout-code-color: var(--#{$prefix}#{$name}-text-emphasis);
+    --#{$prefix}callout-link-color: var(--#{$prefix}#{$name}-text-emphasis);
+  }
+}
+
+// Direct chat
+@each $name, $value in $lte-palette {
+  .direct-chat-#{$name} {
+    --#{$lte-prefix}direct-chat-color: #{lte-contrast($value)};
+    --#{$lte-prefix}direct-chat-bg: #{$value};
+  }
+}
+
+// Buttons carrying a palette background (`.btn.bg-navy`, the v3 idiom):
+// a hover / active shade so they don't look inert
+@each $name, $value in $lte-palette {
+  .btn.bg-#{$name},
+  .btn.text-bg-#{$name},
+  .btn.bg-gradient-#{$name} {
+    &:hover,
+    &:focus-visible {
+      background-color: #{shade-color($value, 10%)} !important;
+    }
+
+    &:active,
+    &.active {
+      background-color: #{shade-color($value, 15%)} !important;
+    }
+  }
+}
+
+// Cascade order
+// --------------------------------------------------------
+// This sheet loads AFTER adminlte.css, so `.bg-navy { --bs-bg-opacity: 1 }`
+// above would otherwise beat Bootstrap's earlier `.bg-opacity-25`. Re-emit the
+// opacity modifiers so they still win.
+@each $key, $val in (10: .1, 25: .25, 50: .5, 75: .75, 100: 1) {
+  .bg-opacity-#{$key} {
+    --#{$prefix}bg-opacity: #{$val};
+  }
+
+  .border-opacity-#{$key} {
+    --#{$prefix}border-opacity: #{$val};
+  }
+}
+
+@each $key, $val in (25: .25, 50: .5, 75: .75, 100: 1) {
+  .text-opacity-#{$key} {
+    --#{$prefix}text-opacity: #{$val};
+  }
+}

package/src/scss/colors/_variables.scss

@@ -0,0 +1,85 @@
+@use "sass:list";
+@use "sass:map";
+
+//
+// Colors: Variables
+//
+// The extended palette shipped by `adminlte-colors.css`. Everything here is
+// `!default`, so a project compiling its own Sass can set any of it before
+// importing `adminlte-colors.scss` — see docs/colors.html.
+//
+
+// The palette
+// --------------------------------------------------------
+// Designed in OKLCH (see scripts/palette.mjs) rather than picked one by one:
+//
+//  • Each chromatic colour is the LIGHTEST value whose white text still reaches
+//    ≥ 4.6:1 (WCAG AA), which puts all of them at OKLCH L ≈ .55–.59 — the same
+//    weight as Bootstrap's primary / success / danger — so `.text-bg-*`, small
+//    boxes, badges and sidebars all take white text and read as one family.
+//  • Hues sit ≥ 17° from every Bootstrap theme colour (danger 21°, warning 85°,
+//    success 157°, info 218°, primary 260°) and ≥ 20° from each other, so nothing
+//    collides with `.text-bg-primary` & co.
+//  • Chroma is capped at 0.20 (parity with primary .23 / danger .20). Teal, sky,
+//    olive and amber sit at the sRGB gamut limit for this lightness.
+//  • navy, steel, slate, graphite and midnight are cool-tinted neutrals
+//    (h ≈ 255–287°) meant for sidebars and headers.
+//
+// `npm run palette -- --check` verifies contrast and hue separation.
+$lte-palette: (
+  "orange":    #c84e10, // oklch(.58 .17  42)  burnt orange — warm accent that isn't "danger"
+  "amber":     #a56710, // oklch(.57 .12  67)  ochre — warm neutral, pairs with navy/graphite
+  "olive":     #5f7f0f, // oklch(.55 .13 126)  moss — earthy green, 31° from success
+  "teal":      #12827d, // oklch(.55 .09 190)  blue-green — the calm data colour
+  "sky":       #127caf, // oklch(.56 .12 237)  the classic AdminLTE blue, remade at 4.6:1
+  "indigo":    #6f60ea, // oklch(.58 .20 283)  blue-violet — brand-forward, 23° from primary
+  "violet":    #9553db, // oklch(.58 .20 303)  purple
+  "fuchsia":   #b347be, // oklch(.59 .20 324)  magenta — emphasis, sparingly
+  "pink":      #cd388d, // oklch(.59 .20 350)  deep pink — v3 "maroon", designed
+  "navy":      #1d2d4c, // oklch(.30 .06 263)  sidebar navy — deep, cool, not black
+  "steel":     #3a4860, // oklch(.40 .05 261)  mid-dark blue-grey — the sidebar tone many admin kits use
+  "slate":     #566577, // oklch(.50 .03 253)  mid neutral — grey-blue for headers and cards
+  "graphite":  #32363c, // oklch(.33 .01 258)  near-black cool grey for quiet sidebars
+  "midnight":  #1e1d2d  // oklch(.24 .03 287)  near-black with a violet cast — full-dark chrome
+) !default;
+
+// Your own colours
+// --------------------------------------------------------
+// Merged over `$lte-palette`, so a brand colour gets every token, utility and
+// component hook the shipped colours get — and an existing name is overridden:
+//   $lte-palette-custom: ("brand": #0f766e, "sky": #0369a1);
+// Aim for a colour whose white text reaches 4.5:1 (UI/colors.html has a checker).
+$lte-palette-custom: () !default;
+
+// Aliases
+// --------------------------------------------------------
+// Extra names that generate the same classes as an existing palette entry.
+// Empty by default; AdminLTE 3 projects can restore their old class names with
+//   $lte-palette-aliases: ("lightblue": "sky", "maroon": "pink");
+$lte-palette-aliases: () !default;
+
+// Contrast rule
+// --------------------------------------------------------
+// Minimum contrast ratio `color-contrast()` uses when picking the automatic
+// text colour of `.text-bg-*`, `.bg-gradient-*`, `.card-*` headers and
+// `.direct-chat-*`. Bootstrap's default (4.5, WCAG AA for normal text). Every
+// shipped palette colour clears it with white text; the knob exists for custom
+// palettes — `3` is WCAG AA for large text and UI components.
+$lte-palette-min-contrast-ratio: $min-contrast-ratio !default;
+
+// Resolve custom colours and aliases into the palette
+// --------------------------------------------------------
+@if list.length($lte-palette-custom) > 0 {
+  $lte-palette: map.merge($lte-palette, $lte-palette-custom);
+}
+
+@each $alias, $target in $lte-palette-aliases {
+  @if not map.has-key($lte-palette, $target) {
+    @error "adminlte-colors: alias `#{$alias}` points to `#{$target}`, which is not in $lte-palette.";
+  }
+  $lte-palette: map.merge($lte-palette, ($alias: map.get($lte-palette, $target)));
+}
+
+@function lte-contrast($color) {
+  @return color-contrast($color, $min-contrast-ratio: $lte-palette-min-contrast-ratio);
+}