@keenmate/pure-admin-core 2.5.0 → 2.7.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@keenmate/pure-admin-core",
-  "version": "2.5.0",
+  "version": "2.7.0",
   "description": "Lightweight, data-focused HTML/CSS admin framework built with PureCSS foundation and comprehensive component system",
   "style": "dist/css/main.css",
   "exports": {

package/src/scss/_base-css-variables.scss

@@ -207,6 +207,42 @@
   --pa-alert-info-border: color-mix(in srgb, var(--pa-info-bg) #{$alert-border-opacity-dark}%, transparent);
 }
 
+// ============================================================================
+// DERIVED TOKENS — TEXT CONTRAST TIERS + SURFACE TINTS
+// ============================================================================
+// These tokens use `color-mix(... var(--pa-text-color-1) ...)` to derive
+// theme-aware contrast levels. They MUST be emitted at every selector that
+// could carry an override of --pa-text-color-1, because CSS custom property
+// substitution bakes nested var() references at the *defining element*, not
+// the using element. If we only defined these at `:root, .pa-mode-light`,
+// the light-mode text colour would be frozen into the value, and elements
+// inside `.pa-mode-dark` (which overrides --pa-text-color-1 at body) would
+// inherit the light-mode-baked tier values → low contrast on dark surfaces.
+//
+// Emitting at all three selectors causes each scope to recompute the tiers
+// against its own --pa-text-color-1. The selector list `:root, .pa-mode-light,
+// .pa-mode-dark` covers html, body in light mode, and body in dark mode —
+// regardless of which class layout each theme uses for mode switching.
+//
+// This is a TOP-LEVEL rule (not inside the mixin) because themes only call
+// the mixin from their light-mode block; they don't call it again in the
+// dark-mode block. Emitting at framework level means themes get correct
+// dark-mode tiers without changing any theme code.
+//
+// Override these per-theme by redefining them in the same scope you
+// override --pa-text-color-1.
+// ============================================================================
+
+:root,
+.pa-mode-light,
+.pa-mode-dark {
+  --pa-text-strong:    color-mix(in srgb, var(--pa-text-color-1) 85%, transparent);
+  --pa-text-secondary: color-mix(in srgb, var(--pa-text-color-1) 70%, transparent);
+  --pa-text-tertiary:  color-mix(in srgb, var(--pa-text-color-1) 55%, transparent);
+  --pa-surface-hover:  color-mix(in srgb, var(--pa-text-color-1) 4%, transparent);
+  --pa-surface-track:  color-mix(in srgb, var(--pa-text-color-1) 12%, transparent);
+}
+
 // ============================================================================
 // PURE ADMIN THEME CSS VARIABLES OUTPUT MIXIN
 // ============================================================================
@@ -239,11 +275,92 @@
   // Accent colors
   --pa-accent: #{$accent-color};
   --pa-accent-hover: #{$accent-hover};
-  --pa-accent-light: #{$accent-light};
+  // -light derives from --pa-accent at runtime so theme overrides cascade.
+  // SCSS-only consumers still get $accent-light from variables/_base.scss via the !default chain.
+  --pa-accent-light: color-mix(in srgb, var(--pa-accent) 5%, transparent);
+
+  // Links — derive from accent so theme overrides cascade automatically.
+  // Hover mixes 25% toward currentColor (inherited text colour at the use site),
+  // so it auto-darkens on light themes and auto-lightens on dark themes
+  // without per-mode declarations.
+  --pa-link-color: var(--pa-accent);
+  --pa-link-color-hover: color-mix(in srgb, var(--pa-link-color), currentColor 50%);
+  --pa-link-color-visited: var(--pa-link-color);
 
   // Border
   --pa-border-color: #{$border-color};
 
+  // =========================================================================
+  // ROLE COLORS — single source of truth for the four semantic roles.
+  // Button surfaces (--pa-btn-{success,warning,danger,info}-bg) and
+  // contextual surfaces (--pa-{success,warning,danger,info}-bg) below
+  // both reference these via var() so a theme can override one place
+  // and the change cascades everywhere.
+  //
+  // --pa-warning here is also the "off-target / approaching-limit" axis
+  // colour used by KPI components — orange-500, deliberately distinct
+  // from the previous Bootstrap yellow.
+  // =========================================================================
+
+  --pa-success: #{$base-success-color};
+  --pa-warning: #{$base-warning-color};
+  --pa-danger:  #{$base-danger-color};
+  --pa-info:    #{$base-info-color};
+
+  // =========================================================================
+  // SENTIMENT SCALE — 5-step direction-of-change.
+  // Used by KPI / data-display components for indicating directional
+  // movement (delta colours, sparkline trend colours, etc.).
+  // The middle three values alias the role colours so a theme that
+  // retunes --pa-success / --pa-danger automatically retunes the
+  // matching sentiment positions; the outliers (very-positive /
+  // very-negative) are explicit darker shades.
+  //
+  // Sentiment is on a *different axis* from role colours — direction
+  // (ordinal: -2 to +2) vs. urgency (categorical: success / warning /
+  // danger / info). They coexist intentionally.
+  // =========================================================================
+
+  --pa-very-positive: #{$base-very-positive};
+  --pa-positive:      var(--pa-success);
+  --pa-neutral:       #{$base-neutral};
+  --pa-negative:      var(--pa-danger);
+  --pa-very-negative: #{$base-very-negative};
+
+  // (Text contrast tiers and surface tints are emitted as a top-level rule
+  // OUTSIDE this mixin — see below — because their values use
+  // `var(--pa-text-color-1)` and CSS custom property substitution bakes
+  // nested var() at the *defining element*, not the using element. That
+  // means tier vars defined here at `:root, .pa-mode-light` would freeze
+  // the light-mode text colour into them; under `.pa-mode-dark` (which
+  // overrides --pa-text-color-1 at body) the tiers would still resolve
+  // against the light value. Emitting them at all three selectors
+  // simultaneously fixes the substitution scope.)
+
+  // =========================================================================
+  // CHART / SPARKLINE
+  // =========================================================================
+  // Single height token used by every KPI showcase that renders a sparkline
+  // / trendline (terminal grid, sparkline list, hero+supporting, bento).
+  // Centralised so the line proportions stay consistent across designs;
+  // override globally for taller or shorter trendlines, or per-component
+  // if a particular layout (e.g. a "hero" pattern) wants a different size.
+
+  --pa-chart-trendline-height: 3rem;
+  --pa-chart-trendline-stroke: 2.1;     // SVG user-space units (viewBox-relative)
+
+  // =========================================================================
+  // DETAIL POPOVER — Bloomberg-dark by default, regardless of host
+  // theme, for the terminal/data-dashboard aesthetic. Override the
+  // five tokens to adopt a theme-aware popover instead.
+  // =========================================================================
+
+  --pa-detail-bg:        rgba(15, 17, 21, 0.97);
+  --pa-detail-text:      #ffffff;
+  --pa-detail-row-label: rgba(255, 255, 255, 0.75);
+  --pa-detail-title:     rgba(255, 255, 255, 0.55);
+  --pa-detail-shadow:    0 1.4rem 3.6rem rgba(0, 0, 0, 0.55);
+
   // =========================================================================
   // LAYOUT COLORS
   // =========================================================================
@@ -262,6 +379,7 @@
   --pa-sidebar-submenu-bg: #{$sidebar-submenu-bg};
   --pa-sidebar-submenu-hover-bg: #{$sidebar-submenu-hover-bg};
   --pa-sidebar-submenu-active-bg: #{$sidebar-submenu-active-bg};
+  --pa-sidebar-submenu-active-text: #{$sidebar-submenu-active-text};
 
   // Footer
   --pa-footer-bg: #{$footer-bg};
@@ -274,32 +392,37 @@
   // Primary (uses accent color)
   --pa-btn-primary-bg: #{$btn-primary-bg};
   --pa-btn-primary-bg-hover: #{$btn-primary-bg-hover};
-  --pa-btn-primary-bg-light: #{$accent-light};
+  // -light derives from --pa-btn-primary-bg at runtime so theme overrides cascade.
+  --pa-btn-primary-bg-light: color-mix(in srgb, var(--pa-btn-primary-bg) 5%, transparent);
   --pa-btn-primary-text: #{$btn-primary-text};
 
   // Secondary
   --pa-btn-secondary-bg: #{$btn-secondary-bg};
   --pa-btn-secondary-bg-hover: #{$btn-secondary-bg-hover};
   --pa-btn-secondary-text: #{$btn-secondary-text};
-  --pa-btn-secondary-outline-color: #{$btn-secondary-text};
-
-  // Success
-  --pa-btn-success-bg: #{$btn-success-bg};
+  // Outline-variant border + text colour. Defaults to --pa-btn-secondary-bg
+  // so the resting outline matches the colour the hover fill animates to.
+  // Was previously $btn-secondary-text (#ffffff) which rendered invisible on
+  // any light theme — pre-existing bug, not a 2.7.0 regression.
+  --pa-btn-secondary-outline-color: var(--pa-btn-secondary-bg);
+
+  // Success — bg references role colour for runtime cascade
+  --pa-btn-success-bg: var(--pa-success);
   --pa-btn-success-bg-hover: #{$btn-success-bg-hover};
   --pa-btn-success-text: #{$btn-success-text};
 
-  // Danger
-  --pa-btn-danger-bg: #{$btn-danger-bg};
+  // Danger — bg references role colour for runtime cascade
+  --pa-btn-danger-bg: var(--pa-danger);
   --pa-btn-danger-bg-hover: #{$btn-danger-bg-hover};
   --pa-btn-danger-text: #{$btn-danger-text};
 
-  // Warning
-  --pa-btn-warning-bg: #{$btn-warning-bg};
+  // Warning — bg references role colour for runtime cascade
+  --pa-btn-warning-bg: var(--pa-warning);
   --pa-btn-warning-bg-hover: #{$btn-warning-bg-hover};
   --pa-btn-warning-text: #{$btn-warning-text};
 
-  // Info
-  --pa-btn-info-bg: #{$btn-info-bg};
+  // Info — bg references role colour for runtime cascade
+  --pa-btn-info-bg: var(--pa-info);
   --pa-btn-info-bg-hover: #{$btn-info-bg-hover};
   --pa-btn-info-text: #{$btn-info-text};
 
@@ -317,39 +440,41 @@
   // CONTEXTUAL/SEMANTIC COLORS
   // =========================================================================
 
-  // Success
-  --pa-success-bg: #{$success-bg};
+  // Success — bg references role colour for runtime cascade.
+  // -light/-subtle/-border derive from --pa-success at runtime so theme overrides cascade.
+  // -hover stays compile-time (color.adjust-derived darker shade, not opacity-based).
+  --pa-success-bg: var(--pa-success);
   --pa-success-bg-hover: #{$success-bg-hover};
-  --pa-success-bg-light: #{$success-bg-light};
-  --pa-success-bg-subtle: #{$success-bg-subtle};
-  --pa-success-border: #{$success-border};
+  --pa-success-bg-light: color-mix(in srgb, var(--pa-success) 10%, transparent);
+  --pa-success-bg-subtle: color-mix(in srgb, var(--pa-success) 8%, transparent);
+  --pa-success-border: color-mix(in srgb, var(--pa-success) 20%, transparent);
   --pa-success-text: #{$success-text};
   --pa-success-text-light: #{$success-text-light};
 
-  // Danger
-  --pa-danger-bg: #{$danger-bg};
+  // Danger — bg references role colour for runtime cascade.
+  --pa-danger-bg: var(--pa-danger);
   --pa-danger-bg-hover: #{$danger-bg-hover};
-  --pa-danger-bg-light: #{$danger-bg-light};
-  --pa-danger-bg-subtle: #{$danger-bg-subtle};
-  --pa-danger-border: #{$danger-border};
+  --pa-danger-bg-light: color-mix(in srgb, var(--pa-danger) 10%, transparent);
+  --pa-danger-bg-subtle: color-mix(in srgb, var(--pa-danger) 8%, transparent);
+  --pa-danger-border: color-mix(in srgb, var(--pa-danger) 20%, transparent);
   --pa-danger-text: #{$danger-text};
   --pa-danger-text-light: #{$danger-text-light};
 
-  // Warning
-  --pa-warning-bg: #{$warning-bg};
+  // Warning — bg references role colour for runtime cascade.
+  --pa-warning-bg: var(--pa-warning);
   --pa-warning-bg-hover: #{$warning-bg-hover};
-  --pa-warning-bg-light: #{$warning-bg-light};
-  --pa-warning-bg-subtle: #{$warning-bg-subtle};
-  --pa-warning-border: #{$warning-border};
+  --pa-warning-bg-light: color-mix(in srgb, var(--pa-warning) 10%, transparent);
+  --pa-warning-bg-subtle: color-mix(in srgb, var(--pa-warning) 8%, transparent);
+  --pa-warning-border: color-mix(in srgb, var(--pa-warning) 20%, transparent);
   --pa-warning-text: #{$warning-text};
   --pa-warning-text-light: #{$warning-text-light};
 
-  // Info
-  --pa-info-bg: #{$info-bg};
+  // Info — bg references role colour for runtime cascade.
+  --pa-info-bg: var(--pa-info);
   --pa-info-bg-hover: #{$info-bg-hover};
-  --pa-info-bg-light: #{$info-bg-light};
-  --pa-info-bg-subtle: #{$info-bg-subtle};
-  --pa-info-border: #{$info-border};
+  --pa-info-bg-light: color-mix(in srgb, var(--pa-info) 10%, transparent);
+  --pa-info-bg-subtle: color-mix(in srgb, var(--pa-info) 8%, transparent);
+  --pa-info-border: color-mix(in srgb, var(--pa-info) 20%, transparent);
   --pa-info-text: #{$info-text};
   --pa-info-text-light: #{$info-text-light};
 

package/src/scss/core-components/_alerts.scss

@@ -32,8 +32,8 @@
   // Basic alert variants - using theme colors with subtle backgrounds
   &--primary {
     color: var(--pa-accent);
-    background-color: rgba($accent-color, $opacity-subtle);
-    border-color: rgba($accent-color, $opacity-border);
+    background-color: color-mix(in srgb, var(--pa-accent) #{$opacity-subtle * 100%}, transparent);
+    border-color: color-mix(in srgb, var(--pa-accent) #{$opacity-border * 100%}, transparent);
   }
 
   &--secondary {

package/src/scss/core-components/_base.scss

@@ -27,6 +27,23 @@ p {
   padding: 0;
 }
 
+// Links — global default. Wrapped in :where() so specificity is 0,
+// letting component scopes (alerts, navbar, sidebar) override with even a
+// single class without fighting the pseudo-class specificity raise that
+// `a:hover` / `a:visited` would otherwise add (0,1,1 vs a class's 0,1,0).
+:where(a) {
+  color: var(--pa-link-color);
+  text-decoration: underline;
+}
+
+:where(a:hover) {
+  color: var(--pa-link-color-hover);
+}
+
+:where(a:visited) {
+  color: var(--pa-link-color-visited);
+}
+
 // Lists - styled lists (default browser styling)
 ul, ol {
   margin: $list-margin-top 0 $list-margin-bottom 0;
@@ -101,8 +118,8 @@ body {
     right: 0;
     bottom: 0;
     background:
-      radial-gradient(circle at $bg-pattern-circle-1-x $bg-pattern-circle-1-y, rgba($accent-color, $bg-pattern-opacity) $bg-pattern-gradient-start, transparent $bg-pattern-gradient-stop),
-      radial-gradient(circle at $bg-pattern-circle-2-x $bg-pattern-circle-2-y, rgba($accent-color, $bg-pattern-opacity) $bg-pattern-gradient-start, transparent $bg-pattern-gradient-stop);
+      radial-gradient(circle at $bg-pattern-circle-1-x $bg-pattern-circle-1-y, color-mix(in srgb, var(--pa-accent) #{$bg-pattern-opacity * 100%}, transparent) $bg-pattern-gradient-start, transparent $bg-pattern-gradient-stop),
+      radial-gradient(circle at $bg-pattern-circle-2-x $bg-pattern-circle-2-y, color-mix(in srgb, var(--pa-accent) #{$bg-pattern-opacity * 100%}, transparent) $bg-pattern-gradient-start, transparent $bg-pattern-gradient-stop);
     pointer-events: none;
     z-index: -1;
   }

package/src/scss/core-components/_buttons.scss

@@ -461,16 +461,20 @@
 .pa-btn-split {
   position: relative;
   display: inline-flex;
-  border-radius: var(--pa-border-radius);
-  overflow: hidden;
 
-  // All buttons inside: no individual radius — container handles corners
-  .pa-btn {
-    border-radius: 0;
+  // Flatten the inner edges between the two trigger buttons; outer corners
+  // stay rounded from each .pa-btn's own border-radius. Avoids relying on
+  // overflow:hidden + container border-radius, which gets bypassed by hover
+  // background paint in some browsers/themes.
+  > .pa-btn:first-child {
+    border-start-end-radius: 0;
+    border-end-end-radius: 0;
+    border-inline-end: none;
+  }
 
-    &:first-child {
-      border-inline-end: none;
-    }
+  > .pa-btn-split__toggle {
+    border-start-start-radius: 0;
+    border-end-start-radius: 0;
   }
 
   // Toggle button (chevron) - fixed square width

package/src/scss/core-components/_callouts.scss

@@ -26,7 +26,7 @@
   // Callout variants
   &--primary {
     border-inline-start-color: var(--pa-accent);
-    background-color: rgba($accent-color, $opacity-subtle);
+    background-color: color-mix(in srgb, var(--pa-accent) #{$opacity-subtle * 100%}, transparent);
   }
 
   &--secondary {

package/src/scss/core-components/_cards.scss

@@ -344,12 +344,12 @@
   // Live-data state — persistent tinted background reflecting latest change
   // JS swaps the class on each data update; color stays until next update
   &--live-up {
-    background-color: rgba($success-bg, 0.10);
+    background-color: color-mix(in srgb, var(--pa-positive) 10%, transparent);
     transition: background-color 0.3s ease;
   }
 
   &--live-down {
-    background-color: rgba($danger-bg, 0.10);
+    background-color: color-mix(in srgb, var(--pa-negative) 10%, transparent);
     transition: background-color 0.3s ease;
   }
 
@@ -398,7 +398,7 @@
 
     &:hover {
       color: var(--pa-text-color-1);
-      background-color: rgba($accent-color, $card-tab-hover-opacity);
+      background-color: color-mix(in srgb, var(--pa-accent) #{$card-tab-hover-opacity * 100%}, transparent);
     }
 
     &--active {
@@ -434,7 +434,7 @@
       transition: all $transition-fast $easing-snappy;
 
       &:hover {
-        background-color: rgba($accent-color, $card-tab-hover-opacity);
+        background-color: color-mix(in srgb, var(--pa-accent) #{$card-tab-hover-opacity * 100%}, transparent);
         color: var(--pa-text-color-1);
       }
 

package/src/scss/core-components/_checkbox-lists.scss

@@ -158,7 +158,7 @@
   cursor: not-allowed;
 
   &:hover {
-    background-color: rgba($warning-bg, 0.05);
+    background-color: color-mix(in srgb, var(--pa-warning) 5%, transparent);
   }
 
   .pa-checkbox-list__checkbox {
@@ -172,7 +172,7 @@
 
     // Add lock icon before text
     .pa-checkbox-list__text {
-      color: $warning-bg;
+      color: var(--pa-warning);
 
       &::before {
         content: '🔒 ';

package/src/scss/core-components/_comparison.scss

@@ -67,7 +67,10 @@
 
   // Changed value highlighting (pink/salmon background)
   &__changed {
-    background-color: rgba(244, 114, 182, 0.15); // Pink highlight
+    // Diff-specific accent (pink, distinct from role colours so it doesn't
+    // collide with status chips in the same row). All three intensities
+    // derive from $comparison-accent-pink so a theme override cascades.
+    background-color: color-mix(in srgb, $comparison-accent-pink 15%, transparent);
     position: relative;
 
     &::before {
@@ -82,7 +85,7 @@
 
     // Solid background variant (no left border accent)
     &--solid {
-      background-color: rgba(244, 114, 182, 0.25) !important; // More opaque pink
+      background-color: color-mix(in srgb, $comparison-accent-pink 25%, transparent) !important;
 
       &::before {
         content: none; // Remove left border accent
@@ -92,7 +95,7 @@
 
   // Conflict highlighting (orange background for 3-column merge conflicts)
   &__conflict {
-    background-color: rgba(251, 146, 60, 0.15); // Orange highlight
+    background-color: color-mix(in srgb, $comparison-accent-orange 15%, transparent);
 
     &::before {
       background-color: $comparison-accent-orange;
@@ -100,7 +103,7 @@
 
     // Solid background variant (no left border accent)
     &--solid {
-      background-color: rgba(251, 146, 60, 0.25) !important; // More opaque orange
+      background-color: color-mix(in srgb, $comparison-accent-orange 25%, transparent) !important;
 
       &::before {
         content: none; // Remove left border accent

package/src/scss/core-components/_data-display.scss

@@ -139,7 +139,7 @@
     .pa-field__value::after {
       content: 'Copied!' !important;
       opacity: 1 !important;
-      color: var(--pa-color-4, #28a745);
+      color: var(--pa-success);
     }
   }
 }
@@ -452,19 +452,28 @@
       border-radius: var(--pa-border-radius);
       font-size: $fields-chips-value-font-size;
 
+      // Status chips use role colours. The framework reliably defines all
+      // four --pa-{role} and --pa-{role}-bg-light tokens, so no fallback
+      // needed. (Previous --pa-success-color refs were broken — they didn't
+      // exist, so chips silently used the hardcoded RGB fallbacks below.)
       &--success {
-        background: var(--pa-success-bg-light, rgba(0, 200, 80, 0.12));
-        color: var(--pa-success-color, #28a745);
+        background: var(--pa-success-bg-light);
+        color: var(--pa-success);
       }
 
       &--warning {
-        background: var(--pa-warning-bg-light, rgba(255, 165, 0, 0.12));
-        color: var(--pa-warning-color, #e68a00);
+        background: var(--pa-warning-bg-light);
+        color: var(--pa-warning);
       }
 
       &--danger {
-        background: var(--pa-danger-bg-light, rgba(255, 0, 0, 0.12));
-        color: var(--pa-danger-color, #dc3545);
+        background: var(--pa-danger-bg-light);
+        color: var(--pa-danger);
+      }
+
+      &--info {
+        background: var(--pa-info-bg-light);
+        color: var(--pa-info);
       }
     }
   }
@@ -681,7 +690,7 @@
   &__value--copied::after {
     content: 'Copied!' !important;
     opacity: 1 !important;
-    color: var(--pa-color-4, #28a745);
+    color: var(--pa-success);
   }
 }
 
@@ -1010,7 +1019,7 @@
   &__row--copied &__value::after {
     content: 'Copied!' !important;
     opacity: 1 !important;
-    color: var(--pa-color-4, #28a745);
+    color: var(--pa-success);
   }
 }
 
@@ -1027,12 +1036,12 @@
   &__item {
     padding: $accent-grid-item-padding-v $accent-grid-item-padding-h;
     padding-inline-start: $accent-grid-item-padding-start;
-    border-inline-start: $accent-grid-border-width solid var(--pa-accent, #3b82f6);
+    border-inline-start: $accent-grid-border-width solid var(--pa-accent);
 
-    &--success { border-inline-start-color: var(--pa-success-color, #28a745); }
-    &--warning { border-inline-start-color: var(--pa-warning-color, #e68a00); }
-    &--danger  { border-inline-start-color: var(--pa-danger-color, #dc3545); }
-    &--info    { border-inline-start-color: var(--pa-info-color, #17a2b8); }
+    &--success { border-inline-start-color: var(--pa-success); }
+    &--warning { border-inline-start-color: var(--pa-warning); }
+    &--danger  { border-inline-start-color: var(--pa-danger); }
+    &--info    { border-inline-start-color: var(--pa-info); }
   }
 
   &__label {
@@ -1107,6 +1116,6 @@
   &__item--copied &__value::after {
     content: 'Copied!' !important;
     opacity: 1 !important;
-    color: var(--pa-color-4, #28a745);
+    color: var(--pa-success);
   }
 }