@keenmate/pure-admin-core 2.6.0 → 2.7.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@keenmate/pure-admin-core",
-  "version": "2.6.0",
+  "version": "2.7.1",
   "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

@@ -275,7 +275,17 @@
   // 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};
@@ -369,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};
@@ -381,14 +392,19 @@
   // 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};
+  // 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);
@@ -424,39 +440,41 @@
   // CONTEXTUAL/SEMANTIC COLORS
   // =========================================================================
 
-  // Success — bg references role colour for runtime cascade
+  // 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 — bg references role colour for runtime cascade
+  // 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 — bg references role colour for runtime cascade
+  // 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 — bg references role colour for runtime cascade
+  // 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.scss

@@ -117,5 +117,16 @@
 // Data Visualization (progress bars, rings, gauges, heatmaps, sparklines)
 @use 'core-components/data-viz' as *;
 
+// KPI showcase components — shared chrome + 7 distinct designs.
+// Base must come first; design files use the shared classes from base.
+@use 'core-components/kpi-base' as *;
+@use 'core-components/kpi-terminal' as *;
+@use 'core-components/kpi-sparkline-list' as *;
+@use 'core-components/kpi-comparison-gauges' as *;
+@use 'core-components/kpi-hero-supporting' as *;
+@use 'core-components/kpi-bento' as *;
+@use 'core-components/kpi-numeric-strip' as *;
+@use 'core-components/kpi-editorial-minimal' as *;
+
 // Utility classes and helpers
 @use 'core-components/utilities' as *;

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);
   }
 }