@keenmate/pure-admin-core 2.4.0 → 2.6.0

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/_components.scss

@@ -295,8 +295,23 @@ $multiselect-selected-popover-width: 32rem !default;  // 320px (was 20rem)
 // ============================================================================
 // ALERT SYSTEM
 // ============================================================================
-$alert-padding-v: $card-footer-padding-v !default;
-$alert-padding-h: $card-footer-padding-h !default;
+// Default alert padding — decoupled from $card-footer-padding so alerts
+// can have their own scale. The previous coupling left default with V
+// padding (1.2rem) bigger than --lg's (1rem) and H padding (1rem) equal
+// to --sm's, so default sat visually outside the size scale instead of
+// in the middle.
+$alert-padding-v: $spacing-md !default;        // 0.75rem
+$alert-padding-h: 1.25rem !default;            // sits between --sm (1rem) and --lg (1.5rem)
+
+// Size-modifier scales — themes can override to tighten/loosen each size
+// independently. V steps 0.5 → 0.75 → 1, H steps 1 → 1.25 → 1.5.
+$alert-padding-sm-v: $spacing-sm !default;     // 0.5rem
+$alert-padding-sm-h: $spacing-base !default;   // 1rem
+$alert-font-size-sm: $font-size-xs !default;   // 1.2rem (12px)
+$alert-padding-lg-v: $spacing-base !default;   // 1rem
+$alert-padding-lg-h: $spacing-lg !default;     // 1.5rem
+$alert-font-size-lg: $font-size-base !default; // 1.6rem (16px)
+
 $alert-dismissible-padding-right: 4.8rem !default;   // 48px (was 3rem)
 $alert-close-opacity: $opacity-muted !default;
 $alert-icon-margin: $spacing-sm !default;
@@ -321,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;
@@ -689,7 +715,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
@@ -708,14 +734,14 @@ $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-weight: $font-weight-bold !default;