@keenmate/pure-admin-core 2.5.0 → 2.7.0

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

@@ -37,65 +37,65 @@
         width: $timeline-simple-dot-size;
         height: $timeline-simple-dot-size;
         background: var(--pa-main-bg);
-        border: $timeline-simple-dot-border solid $accent-color;
-        border-radius: 50%;
-        box-shadow: $timeline-simple-dot-shadow-offset-x $timeline-simple-dot-shadow-offset-y $timeline-simple-dot-shadow-blur rgba($accent-color, $timeline-simple-dot-shadow-opacity);
+        border: $timeline-simple-dot-border solid var(--pa-accent);
+        border-radius: $timeline-simple-dot-border-radius;
+        box-shadow: $timeline-simple-dot-shadow-offset-x $timeline-simple-dot-shadow-offset-y $timeline-simple-dot-shadow-blur color-mix(in srgb, var(--pa-accent) #{$timeline-simple-dot-shadow-opacity * 100%}, transparent);
       }
 
       // Marker color modifiers
       &--primary::before {
-        border-color: $btn-primary-bg;
-        box-shadow: $timeline-simple-dot-shadow-offset-x $timeline-simple-dot-shadow-offset-y $timeline-simple-dot-shadow-blur rgba($btn-primary-bg, $timeline-simple-dot-shadow-opacity);
+        border-color: var(--pa-btn-primary-bg);
+        box-shadow: $timeline-simple-dot-shadow-offset-x $timeline-simple-dot-shadow-offset-y $timeline-simple-dot-shadow-blur color-mix(in srgb, var(--pa-btn-primary-bg) #{$timeline-simple-dot-shadow-opacity * 100%}, transparent);
       }
 
       &--success::before {
-        border-color: $success-bg;
-        box-shadow: $timeline-simple-dot-shadow-offset-x $timeline-simple-dot-shadow-offset-y $timeline-simple-dot-shadow-blur rgba($success-bg, $timeline-simple-dot-shadow-opacity);
+        border-color: var(--pa-success);
+        box-shadow: $timeline-simple-dot-shadow-offset-x $timeline-simple-dot-shadow-offset-y $timeline-simple-dot-shadow-blur color-mix(in srgb, var(--pa-success) #{$timeline-simple-dot-shadow-opacity * 100%}, transparent);
       }
 
       &--warning::before {
-        border-color: $warning-bg;
-        box-shadow: $timeline-simple-dot-shadow-offset-x $timeline-simple-dot-shadow-offset-y $timeline-simple-dot-shadow-blur rgba($warning-bg, $timeline-simple-dot-shadow-opacity);
+        border-color: var(--pa-warning);
+        box-shadow: $timeline-simple-dot-shadow-offset-x $timeline-simple-dot-shadow-offset-y $timeline-simple-dot-shadow-blur color-mix(in srgb, var(--pa-warning) #{$timeline-simple-dot-shadow-opacity * 100%}, transparent);
       }
 
       &--danger::before {
-        border-color: $danger-bg;
-        box-shadow: $timeline-simple-dot-shadow-offset-x $timeline-simple-dot-shadow-offset-y $timeline-simple-dot-shadow-blur rgba($danger-bg, $timeline-simple-dot-shadow-opacity);
+        border-color: var(--pa-danger);
+        box-shadow: $timeline-simple-dot-shadow-offset-x $timeline-simple-dot-shadow-offset-y $timeline-simple-dot-shadow-blur color-mix(in srgb, var(--pa-danger) #{$timeline-simple-dot-shadow-opacity * 100%}, transparent);
       }
 
       &--info::before {
-        border-color: $info-bg;
-        box-shadow: $timeline-simple-dot-shadow-offset-x $timeline-simple-dot-shadow-offset-y $timeline-simple-dot-shadow-blur rgba($info-bg, $timeline-simple-dot-shadow-opacity);
+        border-color: var(--pa-info);
+        box-shadow: $timeline-simple-dot-shadow-offset-x $timeline-simple-dot-shadow-offset-y $timeline-simple-dot-shadow-blur color-mix(in srgb, var(--pa-info) #{$timeline-simple-dot-shadow-opacity * 100%}, transparent);
       }
 
       &--secondary::before {
         border-color: var(--pa-text-color-2);
-        box-shadow: $timeline-simple-dot-shadow-offset-x $timeline-simple-dot-shadow-offset-y $timeline-simple-dot-shadow-blur rgba(var(--pa-text-color-2), $timeline-simple-dot-shadow-opacity);
+        box-shadow: $timeline-simple-dot-shadow-offset-x $timeline-simple-dot-shadow-offset-y $timeline-simple-dot-shadow-blur color-mix(in srgb, var(--pa-text-color-2) #{$timeline-simple-dot-shadow-opacity * 100%}, transparent);
       }
 
       // Filled/solid bullet modifier
       &--filled::before {
-        background: $accent-color;
+        background: var(--pa-accent);
       }
 
       &--filled.pa-timeline__item--primary::before {
-        background: $btn-primary-bg;
+        background: var(--pa-btn-primary-bg);
       }
 
       &--filled.pa-timeline__item--success::before {
-        background: $success-bg;
+        background: var(--pa-success);
       }
 
       &--filled.pa-timeline__item--warning::before {
-        background: $warning-bg;
+        background: var(--pa-warning);
       }
 
       &--filled.pa-timeline__item--danger::before {
-        background: $danger-bg;
+        background: var(--pa-danger);
       }
 
       &--filled.pa-timeline__item--info::before {
-        background: $info-bg;
+        background: var(--pa-info);
       }
 
       &--filled.pa-timeline__item--secondary::before {
@@ -131,7 +131,7 @@
       content: '';
       position: absolute;
       width: $timeline-block-line-width;
-      background: $accent-color;
+      background: var(--pa-accent);
       top: 0;
       bottom: 0;
       left: 50%;
@@ -184,7 +184,7 @@
           height: $timeline-block-connector-height;
           top: $timeline-block-connector-top-offset;
           right: $timeline-block-connector-horizontal-offset;
-          background: $accent-color;
+          background: var(--pa-accent);
           z-index: 1;
         }
       }
@@ -229,7 +229,7 @@
           height: $timeline-block-connector-height;
           top: $timeline-block-connector-top-offset;
           left: $timeline-block-connector-horizontal-offset;
-          background: $accent-color;
+          background: var(--pa-accent);
           z-index: 1;
         }
       }
@@ -242,7 +242,7 @@
       text-align: center;
       font-size: $font-size-sm;
       font-weight: $font-weight-bold;
-      color: $accent-color;
+      color: var(--pa-accent);
       text-transform: uppercase;
       letter-spacing: $timeline-block-date-letter-spacing;
       z-index: 1;
@@ -256,16 +256,16 @@
       width: $timeline-block-icon-size;
       height: $timeline-block-icon-size;
       top: $timeline-block-icon-top-offset;
-      background: $warning-bg;
-      border: $timeline-block-icon-border solid $accent-color;
+      background: var(--pa-warning);
+      border: $timeline-block-icon-border solid var(--pa-accent);
       border-radius: 50%;
       font-size: $font-size-lg;
-      color: $accent-color;
+      color: var(--pa-accent);
       z-index: 1;
     }
 
     .pa-timeline__content {
-      background: $warning-bg;
+      background: var(--pa-warning);
       position: relative;
 
       h3 {
@@ -279,7 +279,7 @@
         margin: 0;
         font-size: $font-size-base;
         line-height: $line-height-relaxed;
-        color: $warning-text;
+        color: var(--pa-warning-text);
       }
     }
 
@@ -475,7 +475,7 @@
       line-height: $line-height-relaxed;
 
       a {
-        color: $accent-color;
+        color: var(--pa-accent);
         text-decoration: none;
         font-weight: $font-weight-medium;
 

package/src/scss/core-components/badges/_composite-badge-variants.scss

@@ -316,7 +316,7 @@
     }
 
     &:focus {
-      box-shadow: 0 0 0 $focus-outline-width rgba($btn-primary-bg, $btn-focus-ring-opacity);
+      box-shadow: 0 0 0 $focus-outline-width color-mix(in srgb, var(--pa-btn-primary-bg) #{$btn-focus-ring-opacity * 100%}, transparent);
     }
   }
 
@@ -328,7 +328,7 @@
     }
 
     &:focus {
-      box-shadow: 0 0 0 $focus-outline-width rgba($btn-secondary-bg, $btn-focus-ring-opacity);
+      box-shadow: 0 0 0 $focus-outline-width color-mix(in srgb, var(--pa-btn-secondary-bg) #{$btn-focus-ring-opacity * 100%}, transparent);
     }
   }
 
@@ -340,7 +340,7 @@
     }
 
     &:focus {
-      box-shadow: 0 0 0 $focus-outline-width rgba($btn-success-bg, $btn-focus-ring-opacity);
+      box-shadow: 0 0 0 $focus-outline-width color-mix(in srgb, var(--pa-success) #{$btn-focus-ring-opacity * 100%}, transparent);
     }
   }
 
@@ -353,7 +353,7 @@
     }
 
     &:focus {
-      box-shadow: 0 0 0 $focus-outline-width rgba($btn-warning-bg, $btn-focus-ring-opacity);
+      box-shadow: 0 0 0 $focus-outline-width color-mix(in srgb, var(--pa-warning) #{$btn-focus-ring-opacity * 100%}, transparent);
     }
   }
 
@@ -365,7 +365,7 @@
     }
 
     &:focus {
-      box-shadow: 0 0 0 $focus-outline-width rgba($btn-info-bg, $btn-focus-ring-opacity);
+      box-shadow: 0 0 0 $focus-outline-width color-mix(in srgb, var(--pa-info) #{$btn-focus-ring-opacity * 100%}, transparent);
     }
   }
 
@@ -378,7 +378,7 @@
     }
 
     &:focus {
-      box-shadow: 0 0 0 $focus-outline-width rgba($btn-light-bg, $btn-focus-ring-opacity);
+      box-shadow: 0 0 0 $focus-outline-width color-mix(in srgb, var(--pa-btn-light-bg) #{$btn-focus-ring-opacity * 100%}, transparent);
     }
   }
 
@@ -390,7 +390,7 @@
     }
 
     &:focus {
-      box-shadow: 0 0 0 $focus-outline-width rgba($btn-dark-bg, $btn-focus-ring-opacity);
+      box-shadow: 0 0 0 $focus-outline-width color-mix(in srgb, var(--pa-btn-dark-bg) #{$btn-focus-ring-opacity * 100%}, transparent);
     }
   }
 }

package/src/scss/core-components/badges/_composite-badge.scss

@@ -64,7 +64,7 @@
 
     &:focus {
       outline: none;
-      box-shadow: 0 0 0 $focus-outline-width rgba($danger-bg, $btn-focus-ring-opacity);
+      box-shadow: 0 0 0 $focus-outline-width color-mix(in srgb, var(--pa-danger) #{$btn-focus-ring-opacity * 100%}, transparent);
     }
   }
 }

package/src/scss/core-components/badges/_labels.scss

@@ -74,17 +74,17 @@
   }
 
   &--secondary {
-    background-color: rgba($secondary-bg, $opacity-light);
-    color: $secondary-bg;
-    border-color: $secondary-bg;
+    background-color: color-mix(in srgb, var(--pa-btn-secondary-bg) #{$opacity-light * 100%}, transparent);
+    color: var(--pa-btn-secondary-bg);
+    border-color: var(--pa-btn-secondary-bg);
 
     &.pa-label--outline {
       background-color: transparent;
-      color: $secondary-bg;
-      border-color: $secondary-bg;
+      color: var(--pa-btn-secondary-bg);
+      border-color: var(--pa-btn-secondary-bg);
 
       &:hover {
-        background-color: rgba($secondary-bg, $opacity-light);
+        background-color: color-mix(in srgb, var(--pa-btn-secondary-bg) #{$opacity-light * 100%}, transparent);
       }
     }
   }

package/src/scss/core-components/forms/_input-wrapper.scss

@@ -38,7 +38,7 @@
 
     &:hover {
       opacity: 1;
-      color: $danger-bg;
+      color: var(--pa-danger);
     }
 
     &:focus {

package/src/scss/core-components/forms/_query-editor.scss

@@ -36,8 +36,8 @@
 
   &__field {
     display: inline;
-    background-color: rgba($accent-color, 0.15);
-    color: $accent-color;
+    background-color: color-mix(in srgb, var(--pa-accent) 15%, transparent);
+    color: var(--pa-accent);
     padding: 0.2rem 0.4rem;
     border-radius: var(--pa-border-radius-sm);
     font-weight: $font-weight-medium;
@@ -45,8 +45,8 @@
 
   &__operator {
     display: inline;
-    background-color: rgba($success-bg, 0.15);
-    color: $success-bg;
+    background-color: color-mix(in srgb, var(--pa-success) 15%, transparent);
+    color: var(--pa-success);
     padding: 0.2rem 0.4rem;
     border-radius: var(--pa-border-radius-sm);
     font-weight: $font-weight-medium;
@@ -221,28 +221,28 @@
   font-weight: $font-weight-medium;
 
   &--field {
-    background-color: rgba($accent-color, 0.15);
+    background-color: color-mix(in srgb, var(--pa-accent) 15%, transparent);
     color: var(--pa-text-color-1);
 
     &.pa-inline-query-token--invalid {
-      background-color: rgba($danger-bg, 0.15);
+      background-color: color-mix(in srgb, var(--pa-danger) 15%, transparent);
       color: var(--pa-text-color-1);
       text-decoration: wavy underline;
     }
   }
 
   &--operator {
-    background-color: rgba(var(--pa-text-color-2), 0.15);
+    background-color: color-mix(in srgb, var(--pa-text-color-2) 15%, transparent);
     color: var(--pa-text-color-1);
   }
 
   &--value {
-    background-color: rgba($success-bg, 0.15);
+    background-color: color-mix(in srgb, var(--pa-success) 15%, transparent);
     color: var(--pa-text-color-1);
   }
 
   &--keyword {
-    background-color: rgba($warning-bg, 0.15);
+    background-color: color-mix(in srgb, var(--pa-warning) 15%, transparent);
     color: var(--pa-text-color-1);
     font-style: italic;
   }
@@ -304,7 +304,7 @@
       flex-shrink: 0;
       font-size: $font-size-xs;
       padding: 0.2rem 0.6rem;
-      background-color: rgba(var(--pa-text-color-2), 0.1);
+      background-color: color-mix(in srgb, var(--pa-text-color-2) 10%, transparent);
       color: var(--pa-text-color-2);
       border-radius: var(--pa-border-radius-sm);
       font-family: $body-font-family;

package/src/scss/core-components/layout/_sidebar-states.scss

@@ -125,6 +125,7 @@
 
         &--active {
           background-color: var(--pa-sidebar-submenu-active-bg);
+          color: var(--pa-sidebar-submenu-active-text);
         }
       }
 

package/src/scss/core-components/layout/_sidebar.scss

@@ -191,6 +191,7 @@ body.pa-layout--sticky .pa-layout__sidebar {
 
     &--active {
       background-color: var(--pa-sidebar-submenu-active-bg);
+      color: var(--pa-sidebar-submenu-active-text);
       border-inline-end-color: var(--pa-accent); // RTL: flips to border-left-color
     }
   }

package/src/scss/variables/_base.scss

@@ -108,7 +108,7 @@ $base-tooltip-text-color: #ffffff !default;
 // Success/positive semantic colors
 // =============================================================================
 
-$base-success-color: #28a745 !default;
+$base-success-color: #22c55e !default;  // Tailwind green-500 — aligns with --pa-positive in the sentiment scale
 $base-success-color-hover: color.adjust($base-success-color, $lightness: -10%) !default;
 $base-success-bg-light: rgba($base-success-color, 0.1) !default;
 $base-success-bg-subtle: rgba($base-success-color, 0.08) !default;
@@ -122,7 +122,7 @@ $base-text-on-success: #ffffff !default;
 // Danger/error semantic colors
 // =============================================================================
 
-$base-danger-color: #dc3545 !default;
+$base-danger-color: #ef4444 !default;  // Tailwind red-500 — aligns with --pa-negative in the sentiment scale
 $base-danger-color-hover: color.adjust($base-danger-color, $lightness: -10%) !default;
 $base-danger-bg-light: rgba($base-danger-color, 0.1) !default;
 $base-danger-bg-subtle: rgba($base-danger-color, 0.08) !default;
@@ -136,7 +136,7 @@ $base-text-on-danger: #ffffff !default;
 // Warning semantic colors
 // =============================================================================
 
-$base-warning-color: #ffc107 !default;
+$base-warning-color: #f97316 !default;  // Tailwind orange-500 — also serves as the off-target axis in KPI components
 $base-warning-color-hover: color.adjust($base-warning-color, $lightness: -10%) !default;
 $base-warning-bg-light: rgba($base-warning-color, 0.1) !default;
 $base-warning-bg-subtle: rgba($base-warning-color, 0.08) !default;
@@ -159,6 +159,18 @@ $base-info-text: #0c5460 !default;
 $base-info-text-light: #d1ecf1 !default;
 $base-text-on-info: #ffffff !default;
 
+// =============================================================================
+// SENTIMENT SCALE — 5-step direction-of-change
+// Used by KPI / data-display components to indicate movement direction.
+// `--pa-positive` and `--pa-negative` alias the role colours above; the
+// outlier shades (`very-positive` / `very-negative`) are explicit darker
+// stops since they're not derivable cleanly via color.adjust.
+// =============================================================================
+
+$base-very-positive: #16a34a !default;  // Tailwind green-600 — outlier positive
+$base-very-negative: #dc2626 !default;  // Tailwind red-600 — outlier negative
+$base-neutral:       #9ca3af !default;  // Tailwind gray-400 — "no meaningful change"
+
 // =============================================================================
 // INTERACTIVE STATES
 // Generic interaction feedback colors

package/src/scss/variables/_colors.scss

@@ -33,6 +33,7 @@ $sidebar-text-secondary: $base-text-color-2 !default;
 $sidebar-submenu-bg: $base-surface-3 !default;
 $sidebar-submenu-hover-bg: color.adjust($base-surface-3, $lightness: -5%) !default;
 $sidebar-submenu-active-bg: color.adjust($base-surface-3, $lightness: -10%) !default;
+$sidebar-submenu-active-text: $sidebar-text !default;
 
 // Footer colors
 $footer-bg: $base-surface-1 !default;

package/src/scss/variables/_components.scss

@@ -336,15 +336,26 @@ $stat-square-min-size: 12.8rem !default;   // 128px (was 8rem)
 $stat-label-letter-spacing: 0.05em !default;
 $stat-change-margin-bottom: 0.4rem !default; // 4px (was 0.25rem)
 $stat-number-margin-bottom: $spacing-xs !default;
-$stat-symbol-opacity: $opacity-shadow !default;
-
-// Stat square clamp values (10px base)
-$stat-square-number-min: 4.8rem !default;    // 48px (was 3rem)
-$stat-square-number-scale: 8vw !default;
-$stat-square-number-max: 7.2rem !default;    // 72px (was 4.5rem)
-$stat-square-symbol-min: 6.4rem !default;    // 64px (was 4rem)
-$stat-square-symbol-scale: 10vw !default;
-$stat-square-symbol-max: 9.6rem !default;    // 96px (was 6rem)
+$stat-symbol-opacity: 0.85 !default;
+$stat-square-symbol-gap: 0.15em !default;   // tight gap between number and symbol on the same row
+
+// Stat square clamp values (10px base).
+// Scale uses `cqi` (container query inline-size, requires `container-type: inline-size`
+// on .pa-stat--square) so font tracks the tile width, not the viewport. Without this,
+// a wide-viewport / narrow-tile combination (e.g. 6 KPIs in a 33% column on 1920px)
+// hits the max font size and overflows multi-character values like "$847K" or "¥12.4M".
+//
+// Sizing budget: a 5-char number ("12.4M") at $stat-square-number-scale plus a 1-char
+// symbol at $stat-square-symbol-scale plus the inter-element gap should fit inside the
+// tile's content area (tile width minus 2× $spacing-lg padding) at typical tile widths
+// (~250–400px). Numbers are sized aggressively so the KPI reads as the dominant element.
+$stat-square-number-min: 3.2rem !default;    // 32px floor
+$stat-square-number-scale: 25cqi !default;   // 25% of tile width
+$stat-square-number-max: 9.6rem !default;    // 96px ceiling (was 7.2/6.4 — bumped so wide tiles render large)
+// Symbol is intentionally smaller than the number (visual hierarchy: number primary, unit secondary).
+$stat-square-symbol-min: 1.6rem !default;    // 16px floor (~50% of number-min)
+$stat-square-symbol-scale: 12cqi !default;   // 12% of tile width (~48% of number)
+$stat-square-symbol-max: 4.8rem !default;    // 48px ceiling (~50% of number-max)
 
 // Stat shadow values
 $stat-text-shadow-1-y: 4px !default;
@@ -507,7 +518,8 @@ $timeline-simple-dot-offset: -30px !default;
 $timeline-simple-dot-shadow-offset-x: 3px !default;
 $timeline-simple-dot-shadow-offset-y: 3px !default;
 $timeline-simple-dot-shadow-blur: 0 !default;
-$timeline-simple-dot-shadow-opacity: 0.3 !default;
+$timeline-simple-dot-shadow-opacity: 0.5 !default;
+$timeline-simple-dot-border-radius: 30% !default;
 $timeline-simple-content-margin-top: 0.6rem !default;  // 6px (was 0.4rem)
 $timeline-simple-scroll-container-max-height: 400px !default;
 $timeline-simple-scroll-loader-min-height: 60px !default;
@@ -704,7 +716,7 @@ $progress-height: 0.8rem !default;           // 8px
 $progress-height-xs: 0.3rem !default;        // 3px
 $progress-height-sm: 0.5rem !default;        // 5px
 $progress-height-lg: 1.2rem !default;        // 12px
-$progress-bg: rgba(0, 0, 0, 0.08) !default;
+$progress-bg: color-mix(in srgb, var(--pa-text-color-1) 12%, transparent) !default;
 $progress-border-radius: $border-radius !default;
 $progress-stripe-angle: 45deg !default;
 $progress-stripe-size: 1.6rem !default;      // 16px
@@ -723,16 +735,16 @@ $stacked-bar-legend-font-size: $font-size-xs !default;
 $progress-ring-size: 8rem !default;          // 80px
 $progress-ring-size-sm: 5rem !default;       // 50px
 $progress-ring-size-lg: 11rem !default;      // 110px
-$progress-ring-track-color: rgba(0, 0, 0, 0.08) !default;
+$progress-ring-track-color: color-mix(in srgb, var(--pa-text-color-1) 12%, transparent) !default;
 $progress-ring-value-font-size: $font-size-lg !default;
 $progress-ring-value-font-weight: $font-weight-bold !default;
 $progress-ring-label-font-size: $font-size-2xs !default;
 
 // Gauge (pa-gauge)
 $gauge-size: 12rem !default;                 // 120px
-$gauge-track-color: rgba(0, 0, 0, 0.08) !default;
+$gauge-track-color: color-mix(in srgb, var(--pa-text-color-1) 12%, transparent) !default;
 $gauge-label-font-size: $font-size-xs !default;
-$gauge-value-font-size: $font-size-2xl !default;
+$gauge-value-font-size: $font-size-3xl !default;  // 2.8rem — value gets the whole donut hole (label is now below the gauge)
 $gauge-value-font-weight: $font-weight-bold !default;
 
 // Data bar (pa-data-bar)