@keenmate/pure-admin-core 2.4.0 → 2.6.0

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
 // ============================================================================
@@ -244,6 +280,77 @@
   // 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
   // =========================================================================
@@ -283,23 +390,23 @@
   --pa-btn-secondary-text: #{$btn-secondary-text};
   --pa-btn-secondary-outline-color: #{$btn-secondary-text};
 
-  // Success
-  --pa-btn-success-bg: #{$btn-success-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,8 +424,8 @@
   // CONTEXTUAL/SEMANTIC COLORS
   // =========================================================================
 
-  // Success
-  --pa-success-bg: #{$success-bg};
+  // Success — bg references role colour for runtime cascade
+  --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};
@@ -326,8 +433,8 @@
   --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};
@@ -335,8 +442,8 @@
   --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};
@@ -344,8 +451,8 @@
   --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};

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

@@ -7,14 +7,18 @@
 // Alerts
 .pa-alert {
   position: relative;
-  padding: $card-footer-padding-v $card-footer-padding-h;
+  padding: $alert-padding-v $alert-padding-h;
   margin-bottom: $spacing-base;
   border: $border-width-base solid transparent;
   border-radius: var(--pa-border-radius);
   font-size: $font-size-sm;
   display: flex;
   flex-wrap: wrap;
-  align-items: flex-start;
+  // Centre by default — keeps icon + single-line content vertically
+  // aligned with the text glyph (the most common case). Opt out with
+  // .pa-alert--multiline when you have icon + multi-line __content
+  // and need the icon to stick to the top with the heading.
+  align-items: center;
 
   // Remove margins when first/last child in card body
   .pa-card__body &:first-child {
@@ -121,15 +125,17 @@
     }
   }
 
-  // Alert sizes (size modifiers only change font-size, padding controlled by theme)
+  // Alert sizes — both padding AND font-size step at each size.
+  // See $alert-padding-{sm,lg}-{v,h} and $alert-font-size-{sm,lg} in
+  // variables/_components.scss for theme-overridable scales.
   &--sm {
-    padding: $alert-padding-v $alert-padding-h;
-    font-size: $font-size-sm;
+    padding: $alert-padding-sm-v $alert-padding-sm-h;
+    font-size: $alert-font-size-sm;
   }
 
   &--lg {
-    padding: $alert-padding-v $alert-padding-h;
-    font-size: $font-size-base;
+    padding: $alert-padding-lg-v $alert-padding-lg-h;
+    font-size: $alert-font-size-lg;
   }
 
   // Dismissible alerts
@@ -137,6 +143,17 @@
     padding-inline-end: $alert-dismissible-padding-right; // RTL: flips to padding-left
   }
 
+  // Multiline content modifier — opt out of the default `align-items: center`
+  // so that an icon next to a multi-line .pa-alert__content (heading +
+  // paragraph + actions, etc.) stays top-aligned with the heading instead
+  // of floating in the vertical middle of the stack.
+  // Pure structural stacks without an icon don't need this — their children
+  // get `flex-basis: 100%` (one per row) so the alert's `align-items` is
+  // visually irrelevant for them.
+  &--multiline {
+    align-items: flex-start;
+  }
+
   // Alert components
   &__icon {
     flex-shrink: 0;
@@ -146,24 +163,46 @@
 
   &__content {
     flex: 1;
+    min-width: 0; // allow long content to shrink + wrap rather than overflow
+  }
+
+  // Force structural sub-elements + top-level <p> / <hr> onto their own row
+  // in the alert's flex-wrap layout. Without this, they sit at content width
+  // beside each other (heading next to body, actions next to list, …).
+  &__heading,
+  &__list,
+  &__actions,
+  > p,
+  > hr {
+    flex-basis: 100%;
   }
 
   &__heading {
-    margin: 0 0 $spacing-sm 0;
+    margin: 0; // alert flex-gap supplies the spacing — don't double up
     color: inherit;
-    font-size: $font-size-lg;
     font-weight: $font-weight-semibold;
+    // No explicit font-size — inherits the alert's body font-size ($font-size-sm)
+    // so heading + body read at the same scale (compact look). Add --lg to opt
+    // into the bigger, "punchy" presentation when the alert needs deliberate
+    // attention.
+
+    &--lg {
+      font-size: $font-size-lg;
+    }
   }
 
   &__list {
-    margin: $spacing-sm 0;
+    margin: 0; // alert flex-gap supplies the spacing
     padding-inline-start: $alert-list-padding-left; // RTL: flips to padding-right
   }
 
   &__actions {
-    margin-top: $alert-list-item-margin-top;
+    margin-top: 0; // alert flex-gap supplies the spacing above the divider
+    padding-top: $spacing-base;
+    border-top: $border-width-base solid rgba(0, 0, 0, $opacity-light);
     display: flex;
     gap: $spacing-sm;
+    flex-wrap: wrap;
   }
 
   &__close {
@@ -171,7 +210,7 @@
     top: 0;
     inset-inline-end: 0; // RTL: flips to left
     z-index: $focus-outline-width;
-    padding: $card-footer-padding-v $card-footer-padding-h;
+    padding: $alert-padding-v $alert-padding-h; // matches the alert body's padding
     background: none;
     border: none;
     font-size: $font-size-xl;

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

@@ -185,7 +185,7 @@
     width: 70%;
     height: 70%;
     border-radius: 50%;
-    background: $card-bg;
+    background: var(--pa-card-bg);
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -288,7 +288,7 @@
     right: 15%;
     height: 70%;
     border-radius: #{$gauge-size} #{$gauge-size} 0 0;
-    background: $card-bg;
+    background: var(--pa-card-bg);
     display: flex;
     flex-direction: column;
     align-items: center;

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

@@ -124,7 +124,7 @@
     width: $spinner-size;
     height: $spinner-size;
     border: $spinner-border-width solid var(--pa-border-color);
-    border-top: $spinner-border-width solid $accent-color;
+    border-top: $spinner-border-width solid var(--pa-accent);
     border-radius: 50%;
   }
 

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

@@ -98,59 +98,81 @@
 }
 
 // ====================
-// Position Variants
+// Position Variants (logical — mirror in RTL)
 // ====================
 
-// Bottom (default) - arrow on top
+// Bottom — popconfirm below trigger, arrow on top (block-axis; no RTL flip)
 .pa-popconfirm--bottom {
   margin-top: $spacing-sm;
 
   .pa-popconfirm__arrow {
     top: -0.64rem;
-    left: 50%;
+    inset-inline-start: 50%;
     transform: translateX(-50%) rotate(45deg);
     border-right: none;
     border-bottom: none;
   }
+
+  // RTL: translateX needs to invert because inset-inline-start flipped sides
+  [dir="rtl"] & .pa-popconfirm__arrow {
+    transform: translateX(50%) rotate(45deg);
+  }
 }
 
-// Top - arrow on bottom
+// Top — popconfirm above trigger, arrow on bottom (block-axis; no RTL flip)
 .pa-popconfirm--top {
   margin-bottom: $spacing-sm;
 
   .pa-popconfirm__arrow {
     bottom: -0.64rem;
-    left: 50%;
+    inset-inline-start: 50%;
     transform: translateX(-50%) rotate(45deg);
     border-left: none;
     border-top: none;
   }
+
+  [dir="rtl"] & .pa-popconfirm__arrow {
+    transform: translateX(50%) rotate(45deg);
+  }
 }
 
-// Right - arrow on left
-.pa-popconfirm--right {
-  margin-left: $spacing-sm;
+// End — popconfirm on the inline-end side of trigger (right in LTR, left in RTL)
+// Arrow sits on the inline-start side of the popconfirm, pointing at the trigger.
+.pa-popconfirm--end {
+  margin-inline-start: $spacing-sm;
 
   .pa-popconfirm__arrow {
-    left: -0.64rem;
+    inset-inline-start: -0.64rem;
     top: 50%;
     transform: translateY(-50%) rotate(45deg);
     border-top: none;
     border-right: none;
   }
+
+  // RTL: mirror the rotated arrow via scaleX(-1) so the hidden borders still
+  // mask the side facing the popconfirm body, and the triangle points the
+  // right way (toward the trigger on the visually-right).
+  [dir="rtl"] & .pa-popconfirm__arrow {
+    transform: translateY(-50%) rotate(45deg) scaleX(-1);
+  }
 }
 
-// Left - arrow on right
-.pa-popconfirm--left {
-  margin-right: $spacing-sm;
+// Start — popconfirm on the inline-start side of trigger (left in LTR, right in RTL)
+// Arrow sits on the inline-end side of the popconfirm, pointing at the trigger.
+.pa-popconfirm--start {
+  margin-inline-end: $spacing-sm;
 
   .pa-popconfirm__arrow {
-    right: -0.64rem;
+    inset-inline-end: -0.64rem;
     top: 50%;
     transform: translateY(-50%) rotate(45deg);
     border-bottom: none;
     border-left: none;
   }
+
+  [dir="rtl"] & .pa-popconfirm__arrow {
+    transform: translateY(-50%) rotate(45deg) scaleX(-1);
+  }
 }
 
 // ====================

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

@@ -98,11 +98,17 @@
     }
   }
 
-  // Square variant - compact square with big number and shadowed symbol
+  // Square variant - compact square with a big number and a smaller, inline unit symbol.
+  // Layout: number + symbol on one row (baseline-aligned) at the top, label pinned to the
+  // bottom. Markup order drives visual order — `<symbol><number>` works for prefix
+  // currencies ($1,234), `<number><symbol>` for suffix units (87% / 23°C).
   &--square {
+    container-type: inline-size;      // enables cqi units in __number / __symbol clamps
     display: flex;
-    align-items: center;
-    justify-content: space-between;
+    flex-wrap: wrap;
+    align-content: space-between;     // number/symbol row sticks to the top, label to the bottom
+    align-items: baseline;            // baseline-align number and symbol (clean even when symbol is multi-char like "°C")
+    column-gap: $stat-square-symbol-gap;
     padding: $spacing-lg;
     min-height: $stat-square-min-size;
     min-width: $stat-square-min-size;
@@ -120,10 +126,8 @@
     .pa-stat__number {
       font-size: clamp($stat-square-number-min, $stat-square-number-scale, $stat-square-number-max);
       font-weight: $font-weight-bold;
-      line-height: 1.1;
+      line-height: 1;
       color: inherit;
-      z-index: $focus-outline-width;
-      position: relative;
       text-shadow: 0 $stat-text-shadow-1-y $stat-text-shadow-1-blur rgba(0, 0, 0, $btn-focus-ring-opacity),
                    0 $stat-text-shadow-2-y $stat-text-shadow-2-blur rgba(0, 0, 0, $opacity-shadow-md);
       filter: drop-shadow(0 $stat-drop-shadow-y $stat-drop-shadow-blur rgba(0, 0, 0, $opacity-light));
@@ -134,28 +138,21 @@
     .pa-stat__symbol {
       font-size: clamp($stat-square-symbol-min, $stat-square-symbol-scale, $stat-square-symbol-max);
       font-weight: $font-weight-bold;
-      line-height: 1.1;
-      opacity: $stat-symbol-opacity;
+      line-height: 1;
       color: inherit;
-      position: absolute;
-      right: $spacing-lg;
-      top: 50%;
-      transform: translateY(-50%);
-      z-index: $z-index-base;
+      opacity: $stat-symbol-opacity;
+      word-break: keep-all;
+      white-space: nowrap;
     }
 
     .pa-stat__label {
-      position: absolute;
-      bottom: $spacing-base;
-      left: $spacing-lg;
+      flex-basis: 100%;                // forces label onto its own row
       font-size: $font-size-xs;
       text-transform: uppercase;
       letter-spacing: $stat-label-letter-spacing;
       font-weight: $font-weight-medium;
       color: inherit;
       opacity: 0.8;
-      z-index: 2;
-      max-width: calc(100% - #{$spacing-lg * 2});
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;

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

@@ -471,140 +471,8 @@
   }
 }
 
-// Pager
-.pa-pager {
-  display: flex;
-  margin: $pager-button-margin 0;
-
-  // Remove margins when first/last child in card body
-  .pa-card__body &:first-child {
-    margin-top: 0;
-  }
-  .pa-card__body &:last-child {
-    margin-bottom: 0;
-  }
-
-  // Default center alignment
-  justify-content: center;
-
-  // Positioning modifiers
-  &--start {
-    justify-content: flex-start;
-  }
-
-  &--center {
-    justify-content: center;
-  }
-
-  &--end {
-    justify-content: flex-end;
-  }
-
-  &__container {
-    display: flex;
-    align-items: center;
-    gap: $spacing-sm;
-    white-space: nowrap;
-  }
-
-  &__controls {
-    display: flex;
-    gap: $pager-controls-gap;
-  }
-
-  &__info {
-    display: flex;
-    align-items: center;
-    gap: $spacing-sm;
-  }
-
-  &__input {
-    width: $pager-input-width !important;
-    text-align: center;
-  }
-
-  &__text {
-    color: var(--pa-text-color-2);
-    font-size: $font-size-sm;
-  }
-}
-
-// Load More
-.pa-load-more {
-  display: flex;
-  margin: $spacing-base 0;
-
-  // Remove margins when first/last child in card body
-  .pa-card__body &:first-child {
-    margin-top: 0;
-  }
-  .pa-card__body &:last-child {
-    margin-bottom: 0;
-  }
-
-  // Default center alignment
-  justify-content: center;
-
-  // Positioning modifiers
-  &--start {
-    justify-content: flex-start;
-  }
-
-  &--center {
-    justify-content: center;
-  }
-
-  &--end {
-    justify-content: flex-end;
-  }
-
-  &__button {
-    display: flex;
-    align-items: center;
-    gap: $spacing-sm;
-    padding: $btn-padding-v $btn-padding-h;
-    background-color: transparent;
-    border: $border-width-base solid var(--pa-border-color);
-    border-radius: var(--pa-border-radius);
-    color: var(--pa-text-color-1);
-    font-size: $font-size-sm;
-    cursor: pointer;
-    transition: all $transition-fast $easing-snappy;
-
-    &:hover {
-      border-color: var(--pa-accent);
-      color: var(--pa-accent);
-      background-color: var(--pa-accent-light);
-    }
-
-    &--loading {
-      pointer-events: none;
-      opacity: 0.7;
-
-      .pa-load-more__spinner {
-        animation: pa-spin 1s linear infinite;
-      }
-    }
-  }
-
-  &__spinner {
-    width: $spinner-size;
-    height: $spinner-size;
-    border: $spinner-border-width solid var(--pa-border-color);
-    border-top: $spinner-border-width solid var(--pa-accent);
-    border-radius: 50%;
-  }
-
-  &__text {
-    color: inherit;
-  }
-
-  &__count {
-    color: var(--pa-text-color-2);
-    font-size: $font-size-xs;
-    margin-inline-start: $spacing-xs; // RTL: flips to margin-right
-  }
-}
+// .pa-pager and .pa-load-more live in _pagers.scss — this file used to
+// duplicate them. Removed so there's a single source of truth.
 
 // Virtual Table Styles
 .pa-virtual-table {