npm - @keenmate/pure-admin-core - Versions diffs - 2.5.0 → 2.6.0 - Mend

@keenmate/pure-admin-core 2.5.0 → 2.6.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (8) hide show

package/README.md +9 -7
package/dist/css/main.css +130 -136
package/package.json +1 -1
package/src/scss/_base-css-variables.scss +123 -16
package/src/scss/core-components/_data-viz.scss +2 -2
package/src/scss/core-components/_statistics.scss +15 -18
package/src/scss/variables/_base.scss +15 -3
package/src/scss/variables/_components.scss +23 -12

package/README.md CHANGED Viewed

@@ -2,6 +2,15 @@
 Lightweight, data-focused CSS/SCSS admin framework with Corporate theme as default.
+## What's New in 2.6.0
+- **Seven KPI showcase designs** under the new `KPI` sidebar group — Terminal grid (Bloomberg-style dense panel with view-mode toggle), Sparkline list (one-row-per-KPI with filled-area chart), Comparison gauges (progress bars with target tick), Hero + supporting (big focal metric + side rail), Bento (asymmetric grid with sparklines behind values), Numeric strip (tabular spreadsheet-style), and Editorial minimal (light-weight typography with hairline rules). Each page ships with a Usage Guide + CSS Classes Reference card so the markup is documented in-place.
+- **Framework token consolidation** — single source of truth for role colours (`--pa-success / --pa-warning / --pa-danger / --pa-info`), a new 5-step sentiment scale (`--pa-very-positive` through `--pa-very-negative`), text-contrast tiers (`--pa-text-strong / -secondary / -tertiary`), surface tints (`--pa-surface-hover / -track`), popover chrome (`--pa-detail-*`), and chart trendline tokens (`--pa-chart-trendline-height / -stroke`). Button + contextual surfaces rewired so a single override of `--pa-success` cascades through everything.
+- **Role colours migrated to Tailwind palette (Visual breaking)** — `$base-success-color` → `#22c55e`, `$base-warning-color` → `#f97316` (most visible: warning yellow → orange), `$base-danger-color` → `#ef4444`. Themes that override these via `!default` still win; consumers using stock defaults will see the shift on buttons, alerts, and contextual chips.
+- **`pa-stat--square` redesigned (Visual breaking)** — `__symbol` is now an inline 50%-sized companion next to `__number` (was a giant 12%-opacity watermark), markup order drives prefix-vs-suffix layout (`<symbol><number>` for `$847K`, `<number><symbol>` for `87%`), and font sizes are container-relative (`cqi`) so values track tile width instead of viewport. Multi-character units like `°C`, `¥`, `M` now render correctly at any tile size.
+- **Theme-aware dashboard chart + new `pa:theme-change` event** — the demo's D3 chart was reading CSS custom properties from `<html>` (always returned `:root` defaults) and snapshotting them once at draw time. Fixed both bugs and introduced a `pa:theme-change` window event that any consumer code with cached theme-dependent values can listen to and re-render.
+- **Progress ring / gauge dark-theme fixes** — `__inner` mask switched from compile-time `$card-bg` to runtime `var(--pa-card-bg)` so the percentage value stays readable in dark themes; track colours moved from `rgba(0,0,0,0.08)` to a `color-mix(... var(--pa-text-color-1) 12%, transparent)` so the unfilled portion is visible on both light and dark surfaces.
 ## What's New in 2.5.0
 - **Form Demo showcase page** (`/showcases/form-demo`) — Vanilla-JS CRUD form mirroring the LiveView form demo from `keen-pure-admin`: inline validation slots, edit/update flow, optimistic delete with toast-undo, and a `simulateServerSave()` failure path so error states are exercisable without any tooling.
@@ -10,13 +19,6 @@ Lightweight, data-focused CSS/SCSS admin framework with Corporate theme as defau
 - **Popconfirm position classes renamed (Breaking)** — `pa-popconfirm--right` / `--left` → `pa-popconfirm--end` / `--start`. SCSS uses logical properties so the popconfirm and its arrow mirror in `dir="rtl"`. No backwards-compatibility aliases — update markup directly.
 - **`pa-alert__heading` size now opt-in (Breaking)** — Was hardcoded `font-size-lg`; defaults to the alert's body font-size now. Add `pa-alert__heading--lg` on existing alerts to keep the previous bigger treatment.
-## What's New in 2.4.0
-- **`download-themes` bin removed** — Theme management now lives in the [`pureadmin` CLI](https://www.npmjs.com/package/@keenmate/pureadmin) (`npx pureadmin themes add/update/list`). README's Theme Setup section rewritten to match.
-- **Theme-aware charts** — Demo dashboard chart rewritten to source colors and fonts from Pure Admin CSS custom properties (`--pa-accent`, `--pa-text-color-*`, `--base-font-family`). Establishes the canonical pattern for SVG charts tracking the active theme.
-- **KPI square stats theme correctly** — `pa-stat--square` color variants now route through `--pa-accent` / `--pa-success-bg` / etc. instead of raw SCSS vars that resolved to Bootstrap defaults in every theme.
-- **Profile panel readable on colored headers** — Name, email, role badge, and tab icons now use `--pa-header-profile-name-color` (guaranteed to contrast with header bg) instead of body text vars, with opacity/color-mix for hierarchy.
 ## Installation
 ```bash

package/dist/css/main.css CHANGED Viewed

@@ -5664,11 +5664,11 @@ body:not(.sidebar-hidden) .pa-layout__sidebar--icon-collapse .pa-sidebar__icon {
   border-top: none !important;
 }
 .pa-card--live-up {
-  background-color: rgba(40, 167, 69, 0.1);
+  background-color: rgba(34, 197, 94, 0.1);
   transition: background-color 0.3s ease;
 }
 .pa-card--live-down {
-  background-color: rgba(220, 53, 69, 0.1);
+  background-color: rgba(239, 68, 68, 0.1);
   transition: background-color 0.3s ease;
 }
 .pa-card--live-neutral {
@@ -6299,12 +6299,12 @@ a.pa-card p {
   color: #007bff;
 }
 .pa-stat__icon--success {
-  background-color: rgba(40, 167, 69, 0.1);
-  color: #28a745;
+  background-color: rgba(34, 197, 94, 0.1);
+  color: #22c55e;
 }
 .pa-stat__icon--warning {
-  background-color: rgba(255, 193, 7, 0.1);
-  color: #ffc107;
+  background-color: rgba(249, 115, 22, 0.1);
+  color: #f97316;
 }
 .pa-stat__icon--info {
   background-color: rgba(23, 162, 184, 0.1);
@@ -6348,18 +6348,21 @@ a.pa-card p {
   font-weight: 600;
 }
 .pa-stat--hero .pa-stat__change--positive, .pa-stat--hero-compact .pa-stat__change--positive {
-  color: #28a745;
+  color: #22c55e;
 }
 .pa-stat--hero .pa-stat__change--negative, .pa-stat--hero-compact .pa-stat__change--negative {
-  color: #dc3545;
+  color: #ef4444;
 }
 .pa-stat--hero .pa-stat__change--neutral, .pa-stat--hero-compact .pa-stat__change--neutral {
   color: var(--pa-text-color-2);
 }
 .pa-stat--square {
+  container-type: inline-size;
   display: flex;
-  align-items: center;
-  justify-content: space-between;
+  flex-wrap: wrap;
+  align-content: space-between;
+  align-items: baseline;
+  column-gap: 0.15em;
   padding: 2.4rem;
   min-height: 12.8rem;
   min-width: 12.8rem;
@@ -6374,41 +6377,32 @@ a.pa-card p {
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
 }
 .pa-stat--square .pa-stat__number {
-  font-size: clamp(4.8rem, 8vw, 7.2rem);
+  font-size: clamp(3.2rem, 25cqi, 9.6rem);
   font-weight: 700;
-  line-height: 1.1;
+  line-height: 1;
   color: inherit;
-  z-index: 2px;
-  position: relative;
   text-shadow: 0 4px 8px rgba(0, 0, 0, 0.25), 0 2px 4px rgba(0, 0, 0, 0.15);
   filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
   word-break: keep-all;
   white-space: nowrap;
 }
 .pa-stat--square .pa-stat__symbol {
-  font-size: clamp(6.4rem, 10vw, 9.6rem);
+  font-size: clamp(1.6rem, 12cqi, 4.8rem);
   font-weight: 700;
-  line-height: 1.1;
-  opacity: 0.12;
+  line-height: 1;
   color: inherit;
-  position: absolute;
-  right: 2.4rem;
-  top: 50%;
-  transform: translateY(-50%);
-  z-index: 0;
+  opacity: 0.85;
+  word-break: keep-all;
+  white-space: nowrap;
 }
 .pa-stat--square .pa-stat__label {
-  position: absolute;
-  bottom: 1.6rem;
-  left: 2.4rem;
+  flex-basis: 100%;
   font-size: 1.2rem;
   text-transform: uppercase;
   letter-spacing: 0.05em;
   font-weight: 500;
   color: inherit;
   opacity: 0.8;
-  z-index: 2;
-  max-width: calc(100% - 4.8rem);
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -6503,13 +6497,13 @@ a.pa-card p {
 }
 .pa-list-basic--icon li::before {
   content: "✓";
-  color: #28a745;
+  color: #22c55e;
   font-weight: 600;
   flex-shrink: 0;
 }
 .pa-list-basic--icon.pa-list-basic--danger li::before {
   content: "✗";
-  color: #dc3545;
+  color: #ef4444;
 }
 .pa-list-basic--icon.pa-list-basic--info li::before {
   content: "→";
@@ -6517,7 +6511,7 @@ a.pa-card p {
 }
 .pa-list-basic--icon.pa-list-basic--warning li::before {
   content: "!";
-  color: #ffc107;
+  color: #f97316;
 }
 .pa-list-ordered {
@@ -6773,7 +6767,7 @@ a.pa-card p {
 }
 .pa-composite-badge__button:focus {
   outline: none;
-  box-shadow: 0 0 0 2px rgba(220, 53, 69, 0.25);
+  box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.25);
 }
 /* ========================================
@@ -6823,7 +6817,7 @@ a.pa-card p {
   box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.12);
 }
 .pa-composite-badge--success .pa-composite-badge__icon {
-  background-color: #28a745;
+  background-color: #22c55e;
   color: #ffffff;
 }
 .pa-composite-badge--success .pa-composite-badge__label {
@@ -6834,17 +6828,17 @@ a.pa-card p {
   background-color: rgb(194.0245901639, 229.4754098361, 202.5327868852);
 }
 .pa-composite-badge--success .pa-composite-badge__button {
-  background-color: #28a745;
+  background-color: #22c55e;
   color: #ffffff;
 }
 .pa-composite-badge--success .pa-composite-badge__button:hover {
-  background-color: rgb(30.1449275362, 125.8550724638, 52);
+  background-color: rgb(26.4935064935, 153.5064935065, 73.2467532468);
 }
 .pa-composite-badge--success .pa-composite-badge__button:focus {
   box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.12);
 }
 .pa-composite-badge--danger .pa-composite-badge__icon {
-  background-color: #dc3545;
+  background-color: #ef4444;
   color: #ffffff;
 }
 .pa-composite-badge--danger .pa-composite-badge__label {
@@ -6855,17 +6849,17 @@ a.pa-card p {
   background-color: rgb(244.2021276596, 193.2978723404, 197.9255319149);
 }
 .pa-composite-badge--danger .pa-composite-badge__button {
-  background-color: #dc3545;
+  background-color: #ef4444;
   color: #ffffff;
 }
 .pa-composite-badge--danger .pa-composite-badge__button:hover {
-  background-color: rgb(189.2151898734, 32.7848101266, 47.7721518987);
+  background-color: rgb(234.9802955665, 21.0197044335, 21.0197044335);
 }
 .pa-composite-badge--danger .pa-composite-badge__button:focus {
   box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.12);
 }
 .pa-composite-badge--warning .pa-composite-badge__icon {
-  background-color: #ffc107;
+  background-color: #f97316;
   color: #212529;
 }
 .pa-composite-badge--warning .pa-composite-badge__label {
@@ -6876,11 +6870,11 @@ a.pa-card p {
   background-color: rgb(255, 236.88, 179.5);
 }
 .pa-composite-badge--warning .pa-composite-badge__button {
-  background-color: #ffc107;
+  background-color: #f97316;
   color: #212529;
 }
 .pa-composite-badge--warning .pa-composite-badge__button:hover {
-  background-color: rgb(211, 158.25, 0);
+  background-color: rgb(214.4769874477, 91.129707113, 5.5230125523);
 }
 .pa-composite-badge--warning .pa-composite-badge__button:focus {
   box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.12);
@@ -6955,13 +6949,13 @@ a.pa-card p {
   background-color: #6c757d;
 }
 .pa-composite-badge--success .pa-composite-badge__icon {
-  background-color: #28a745;
+  background-color: #22c55e;
 }
 .pa-composite-badge--danger .pa-composite-badge__icon {
-  background-color: #dc3545;
+  background-color: #ef4444;
 }
 .pa-composite-badge--warning .pa-composite-badge__icon {
-  background-color: #ffc107;
+  background-color: #f97316;
   color: #212529;
 }
 .pa-composite-badge--info .pa-composite-badge__icon {
@@ -7049,23 +7043,23 @@ a.pa-card p {
   box-shadow: 0 0 0 2px rgba(108, 117, 125, 0.25);
 }
 .pa-composite-badge--btn-success .pa-composite-badge__button {
-  background-color: #28a745;
+  background-color: #22c55e;
 }
 .pa-composite-badge--btn-success .pa-composite-badge__button:hover {
-  background-color: rgb(30.1449275362, 125.8550724638, 52);
+  background-color: rgb(26.4935064935, 153.5064935065, 73.2467532468);
 }
 .pa-composite-badge--btn-success .pa-composite-badge__button:focus {
-  box-shadow: 0 0 0 2px rgba(40, 167, 69, 0.25);
+  box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.25);
 }
 .pa-composite-badge--btn-warning .pa-composite-badge__button {
-  background-color: #ffc107;
+  background-color: #f97316;
   color: #212529;
 }
 .pa-composite-badge--btn-warning .pa-composite-badge__button:hover {
-  background-color: rgb(211, 158.25, 0);
+  background-color: rgb(214.4769874477, 91.129707113, 5.5230125523);
 }
 .pa-composite-badge--btn-warning .pa-composite-badge__button:focus {
-  box-shadow: 0 0 0 2px rgba(255, 193, 7, 0.25);
+  box-shadow: 0 0 0 2px rgba(249, 115, 22, 0.25);
 }
 .pa-composite-badge--btn-info .pa-composite-badge__button {
   background-color: #17a2b8;
@@ -7908,13 +7902,13 @@ a.pa-card p {
   border-top-color: #6c757d;
 }
 .pa-spinner--success {
-  border-top-color: #28a745;
+  border-top-color: #22c55e;
 }
 .pa-spinner--danger {
-  border-top-color: #dc3545;
+  border-top-color: #ef4444;
 }
 .pa-spinner--warning {
-  border-top-color: #ffc107;
+  border-top-color: #f97316;
 }
 .pa-spinner--info {
   border-top-color: #17a2b8;
@@ -9728,7 +9722,7 @@ a.pa-card p {
 }
 .pa-input-wrapper__clear:hover {
   opacity: 1;
-  color: #dc3545;
+  color: #ef4444;
 }
 .pa-input-wrapper__clear:focus {
   outline: none;
@@ -9811,8 +9805,8 @@ a.pa-card p {
 }
 .pa-search-highlight__operator {
   display: inline;
-  background-color: rgba(40, 167, 69, 0.15);
-  color: #28a745;
+  background-color: rgba(34, 197, 94, 0.15);
+  color: #22c55e;
   padding: 0.2rem 0.4rem;
   border-radius: var(--pa-border-radius-sm);
   font-weight: 500;
@@ -9967,7 +9961,7 @@ a.pa-card p {
   color: var(--pa-text-color-1);
 }
 .pa-inline-query-token--field.pa-inline-query-token--invalid {
-  background-color: rgba(220, 53, 69, 0.15);
+  background-color: rgba(239, 68, 68, 0.15);
   color: var(--pa-text-color-1);
   text-decoration: wavy underline;
 }
@@ -9976,11 +9970,11 @@ a.pa-card p {
   color: var(--pa-text-color-1);
 }
 .pa-inline-query-token--value {
-  background-color: rgba(40, 167, 69, 0.15);
+  background-color: rgba(34, 197, 94, 0.15);
   color: var(--pa-text-color-1);
 }
 .pa-inline-query-token--keyword {
-  background-color: rgba(255, 193, 7, 0.15);
+  background-color: rgba(249, 115, 22, 0.15);
   color: var(--pa-text-color-1);
   font-style: italic;
 }
@@ -10361,7 +10355,7 @@ web-multiselect {
   width: 2rem;
   height: 2rem;
   border: none;
-  background: #dc3545;
+  background: #ef4444;
   color: #ffffff;
   cursor: pointer;
   border-radius: 50%;
@@ -10381,7 +10375,7 @@ web-multiselect {
 }
 .pa-file-dropzone__file-card-remove:hover {
   transform: scale(1.1);
-  background: rgba(220, 53, 69, 0.9);
+  background: rgba(239, 68, 68, 0.9);
 }
 .pa-file-dropzone__image-card {
   position: relative;
@@ -10422,7 +10416,7 @@ web-multiselect {
   opacity: 1;
 }
 .pa-file-dropzone__image-card-remove:hover {
-  background: #dc3545;
+  background: #ef4444;
   transform: scale(1.1);
 }
 .pa-file-dropzone__summary {
@@ -10606,10 +10600,10 @@ web-multiselect {
   color: #007bff;
 }
 .pa-file-popover__status--complete {
-  color: #28a745;
+  color: #22c55e;
 }
 .pa-file-popover__status--error {
-  color: #dc3545;
+  color: #ef4444;
 }
 .pa-file-popover__remove-cell {
   text-align: center;
@@ -10621,7 +10615,7 @@ web-multiselect {
   height: 3.2rem;
   border: 1px solid var(--pa-border-color);
   background: var(--pa-card-bg);
-  color: #dc3545;
+  color: #ef4444;
   cursor: pointer;
   border-radius: var(--pa-border-radius-sm);
   font-size: 2.4rem;
@@ -10633,9 +10627,9 @@ web-multiselect {
   font-weight: 700;
 }
 .pa-file-popover__remove-btn:hover {
-  background: #dc3545;
+  background: #ef4444;
   color: #ffffff;
-  border-color: #dc3545;
+  border-color: #ef4444;
   transform: scale(1.1);
 }
@@ -10710,8 +10704,8 @@ web-multiselect {
   justify-content: center;
 }
 .pa-file-item__remove:hover {
-  background: rgba(220, 53, 69, 0.1);
-  color: #dc3545;
+  background: rgba(239, 68, 68, 0.1);
+  color: #ef4444;
 }
 .pa-file-item__remove::before {
   content: "×";
@@ -10758,7 +10752,7 @@ web-multiselect {
   justify-content: center;
 }
 .pa-file-preview__remove:hover {
-  background: #dc3545;
+  background: #ef4444;
   transform: scale(1.1);
 }
 .pa-file-preview__remove::before {
@@ -10806,10 +10800,10 @@ web-multiselect {
   font-weight: 600;
 }
 .pa-file-progress__status--complete {
-  color: #28a745;
+  color: #22c55e;
 }
 .pa-file-progress__status--error {
-  color: #dc3545;
+  color: #ef4444;
 }
 .pa-file-icon--pdf::before {
@@ -10980,7 +10974,7 @@ web-multiselect {
   cursor: not-allowed;
 }
 .pa-checkbox-list__item--locked:hover {
-  background-color: rgba(255, 193, 7, 0.05);
+  background-color: rgba(249, 115, 22, 0.05);
 }
 .pa-checkbox-list__item--locked .pa-checkbox-list__checkbox {
   cursor: not-allowed;
@@ -10991,7 +10985,7 @@ web-multiselect {
   position: relative;
 }
 .pa-checkbox-list__item--locked .pa-checkbox-list__label .pa-checkbox-list__text {
-  color: #ffc107;
+  color: #f97316;
 }
 .pa-checkbox-list__item--locked .pa-checkbox-list__label .pa-checkbox-list__text::before {
   content: "🔒 ";
@@ -13273,16 +13267,16 @@ code {
   box-shadow: 3px 3px 0 rgba(0, 123, 255, 0.3);
 }
 .pa-timeline--simple .pa-timeline__item--success::before {
-  border-color: #28a745;
-  box-shadow: 3px 3px 0 rgba(40, 167, 69, 0.3);
+  border-color: #22c55e;
+  box-shadow: 3px 3px 0 rgba(34, 197, 94, 0.3);
 }
 .pa-timeline--simple .pa-timeline__item--warning::before {
-  border-color: #ffc107;
-  box-shadow: 3px 3px 0 rgba(255, 193, 7, 0.3);
+  border-color: #f97316;
+  box-shadow: 3px 3px 0 rgba(249, 115, 22, 0.3);
 }
 .pa-timeline--simple .pa-timeline__item--danger::before {
-  border-color: #dc3545;
-  box-shadow: 3px 3px 0 rgba(220, 53, 69, 0.3);
+  border-color: #ef4444;
+  box-shadow: 3px 3px 0 rgba(239, 68, 68, 0.3);
 }
 .pa-timeline--simple .pa-timeline__item--info::before {
   border-color: #17a2b8;
@@ -13299,13 +13293,13 @@ code {
   background: #007bff;
 }
 .pa-timeline--simple .pa-timeline__item--filled.pa-timeline__item--success::before {
-  background: #28a745;
+  background: #22c55e;
 }
 .pa-timeline--simple .pa-timeline__item--filled.pa-timeline__item--warning::before {
-  background: #ffc107;
+  background: #f97316;
 }
 .pa-timeline--simple .pa-timeline__item--filled.pa-timeline__item--danger::before {
-  background: #dc3545;
+  background: #ef4444;
 }
 .pa-timeline--simple .pa-timeline__item--filled.pa-timeline__item--info::before {
   background: #17a2b8;
@@ -13440,7 +13434,7 @@ code {
   width: 40px;
   height: 40px;
   top: calc(50% - 20px);
-  background: #ffc107;
+  background: #f97316;
   border: 2px solid #007bff;
   border-radius: 50%;
   font-size: 1.8rem;
@@ -13448,7 +13442,7 @@ code {
   z-index: 1;
 }
 .pa-timeline--alternating .pa-timeline__content {
-  background: #ffc107;
+  background: #f97316;
   position: relative;
 }
 .pa-timeline--alternating .pa-timeline__content h3 {
@@ -14202,7 +14196,7 @@ code {
   background: #fff;
 }
 .pa-logic-tree__block--and {
-  border-color: #ffc107;
+  border-color: #f97316;
   background: linear-gradient(135deg, #fff8e1 0%, #ffffff 100%);
 }
 .pa-logic-tree__block--or {
@@ -14407,7 +14401,7 @@ code {
   min-width: 1.6rem;
   height: 1.6rem;
   padding: 0 0.4rem;
-  background-color: #dc3545;
+  background-color: #ef4444;
   color: #ffffff;
   font-size: 1rem;
   font-weight: 600;
@@ -14512,16 +14506,16 @@ code {
   color: #007bff;
 }
 .pa-notifications__icon-wrapper--success {
-  background-color: rgba(40, 167, 69, 0.1);
-  color: #28a745;
+  background-color: rgba(34, 197, 94, 0.1);
+  color: #22c55e;
 }
 .pa-notifications__icon-wrapper--warning {
-  background-color: rgba(255, 193, 7, 0.1);
-  color: #ffc107;
+  background-color: rgba(249, 115, 22, 0.1);
+  color: #f97316;
 }
 .pa-notifications__icon-wrapper--danger {
-  background-color: rgba(220, 53, 69, 0.1);
-  color: #dc3545;
+  background-color: rgba(239, 68, 68, 0.1);
+  color: #ef4444;
 }
 .pa-notifications__icon-wrapper--secondary {
   background-color: rgba(var(--pa-text-color-2), 0.1);
@@ -16066,7 +16060,7 @@ code {
 .pa-progress {
   width: 100%;
   height: 0.8rem;
-  background: rgba(0, 0, 0, 0.08);
+  background: color-mix(in srgb, var(--pa-text-color-1) 12%, transparent);
   border-radius: var(--pa-border-radius);
   overflow: hidden;
   position: relative;
@@ -16099,13 +16093,13 @@ code {
   height: 1.2rem;
 }
 .pa-progress--success > .pa-progress__fill {
-  background: #28a745;
+  background: #22c55e;
 }
 .pa-progress--warning > .pa-progress__fill {
-  background: #ffc107;
+  background: #f97316;
 }
 .pa-progress--danger > .pa-progress__fill {
-  background: #dc3545;
+  background: #ef4444;
 }
 .pa-progress--info > .pa-progress__fill {
   background: #17a2b8;
@@ -16141,7 +16135,7 @@ code {
   height: 1.2rem;
   border-radius: var(--pa-border-radius);
   overflow: hidden;
-  background: rgba(0, 0, 0, 0.08);
+  background: color-mix(in srgb, var(--pa-text-color-1) 12%, transparent);
 }
 .pa-stacked-bar__segment {
   height: 100%;
@@ -16150,13 +16144,13 @@ code {
   background: #007bff;
 }
 .pa-stacked-bar__segment--success {
-  background: #28a745;
+  background: #22c55e;
 }
 .pa-stacked-bar__segment--warning {
-  background: #ffc107;
+  background: #f97316;
 }
 .pa-stacked-bar__segment--danger {
-  background: #dc3545;
+  background: #ef4444;
 }
 .pa-stacked-bar__segment--info {
   background: #17a2b8;
@@ -16187,13 +16181,13 @@ code {
   background: #007bff;
 }
 .pa-stacked-bar__legend-swatch--success {
-  background: #28a745;
+  background: #22c55e;
 }
 .pa-stacked-bar__legend-swatch--warning {
-  background: #ffc107;
+  background: #f97316;
 }
 .pa-stacked-bar__legend-swatch--danger {
-  background: #dc3545;
+  background: #ef4444;
 }
 .pa-stacked-bar__legend-swatch--info {
   background: #17a2b8;
@@ -16215,7 +16209,7 @@ code {
   width: 8rem;
   height: 8rem;
   border-radius: 50%;
-  background: conic-gradient(#007bff calc(var(--value, 0) * 3.6deg), rgba(0, 0, 0, 0.08) 0deg);
+  background: conic-gradient(#007bff calc(var(--value, 0) * 3.6deg), color-mix(in srgb, var(--pa-text-color-1) 12%, transparent) 0deg);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -16225,7 +16219,7 @@ code {
   width: 70%;
   height: 70%;
   border-radius: 50%;
-  background: #ffffff;
+  background: var(--pa-card-bg);
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -16263,16 +16257,16 @@ code {
   font-size: 1.2rem;
 }
 .pa-progress-ring--success {
-  background: conic-gradient(#28a745 calc(var(--value, 0) * 3.6deg), rgba(0, 0, 0, 0.08) 0deg);
+  background: conic-gradient(#22c55e calc(var(--value, 0) * 3.6deg), color-mix(in srgb, var(--pa-text-color-1) 12%, transparent) 0deg);
 }
 .pa-progress-ring--warning {
-  background: conic-gradient(#ffc107 calc(var(--value, 0) * 3.6deg), rgba(0, 0, 0, 0.08) 0deg);
+  background: conic-gradient(#f97316 calc(var(--value, 0) * 3.6deg), color-mix(in srgb, var(--pa-text-color-1) 12%, transparent) 0deg);
 }
 .pa-progress-ring--danger {
-  background: conic-gradient(#dc3545 calc(var(--value, 0) * 3.6deg), rgba(0, 0, 0, 0.08) 0deg);
+  background: conic-gradient(#ef4444 calc(var(--value, 0) * 3.6deg), color-mix(in srgb, var(--pa-text-color-1) 12%, transparent) 0deg);
 }
 .pa-progress-ring--info {
-  background: conic-gradient(#17a2b8 calc(var(--value, 0) * 3.6deg), rgba(0, 0, 0, 0.08) 0deg);
+  background: conic-gradient(#17a2b8 calc(var(--value, 0) * 3.6deg), color-mix(in srgb, var(--pa-text-color-1) 12%, transparent) 0deg);
 }
 .pa-gauge {
@@ -16280,7 +16274,7 @@ code {
   height: calc(12rem / 2);
   border-radius: 12rem 12rem 0 0;
   overflow: hidden;
-  background: conic-gradient(from 0.75turn, #007bff calc(var(--value, 0) * 1.8deg), rgba(0, 0, 0, 0.08) 0deg);
+  background: conic-gradient(from 0.75turn, #007bff calc(var(--value, 0) * 1.8deg), color-mix(in srgb, var(--pa-text-color-1) 12%, transparent) 0deg);
   position: relative;
   flex-shrink: 0;
 }
@@ -16291,7 +16285,7 @@ code {
   right: 15%;
   height: 70%;
   border-radius: 12rem 12rem 0 0;
-  background: #ffffff;
+  background: var(--pa-card-bg);
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -16322,19 +16316,19 @@ code {
   right: 0;
 }
 .pa-gauge--success {
-  background: conic-gradient(from 0.75turn, #28a745 calc(var(--value, 0) * 1.8deg), rgba(0, 0, 0, 0.08) 0deg);
+  background: conic-gradient(from 0.75turn, #22c55e calc(var(--value, 0) * 1.8deg), color-mix(in srgb, var(--pa-text-color-1) 12%, transparent) 0deg);
 }
 .pa-gauge--warning {
-  background: conic-gradient(from 0.75turn, #ffc107 calc(var(--value, 0) * 1.8deg), rgba(0, 0, 0, 0.08) 0deg);
+  background: conic-gradient(from 0.75turn, #f97316 calc(var(--value, 0) * 1.8deg), color-mix(in srgb, var(--pa-text-color-1) 12%, transparent) 0deg);
 }
 .pa-gauge--danger {
-  background: conic-gradient(from 0.75turn, #dc3545 calc(var(--value, 0) * 1.8deg), rgba(0, 0, 0, 0.08) 0deg);
+  background: conic-gradient(from 0.75turn, #ef4444 calc(var(--value, 0) * 1.8deg), color-mix(in srgb, var(--pa-text-color-1) 12%, transparent) 0deg);
 }
 .pa-gauge--info {
-  background: conic-gradient(from 0.75turn, #17a2b8 calc(var(--value, 0) * 1.8deg), rgba(0, 0, 0, 0.08) 0deg);
+  background: conic-gradient(from 0.75turn, #17a2b8 calc(var(--value, 0) * 1.8deg), color-mix(in srgb, var(--pa-text-color-1) 12%, transparent) 0deg);
 }
 .pa-gauge--zones {
-  background: conic-gradient(from 0.75turn, #28a745 0deg, #28a745 90deg, #ffc107 90deg, #ffc107 135deg, #dc3545 135deg, #dc3545 180deg, rgba(0, 0, 0, 0.08) 180deg);
+  background: conic-gradient(from 0.75turn, #22c55e 0deg, #22c55e 90deg, #f97316 90deg, #f97316 135deg, #ef4444 135deg, #ef4444 180deg, color-mix(in srgb, var(--pa-text-color-1) 12%, transparent) 180deg);
 }
 .pa-data-bar {
@@ -16364,19 +16358,19 @@ code {
   transition: width 0.25s ease;
 }
 .pa-data-bar--success .pa-data-bar__fill {
-  background: #28a745;
+  background: #22c55e;
 }
 .pa-data-bar--warning .pa-data-bar__fill {
-  background: #ffc107;
+  background: #f97316;
 }
 .pa-data-bar--danger .pa-data-bar__fill {
-  background: #dc3545;
+  background: #ef4444;
 }
 .pa-data-bar--info .pa-data-bar__fill {
   background: #17a2b8;
 }
 .pa-data-bar--negative .pa-data-bar__fill {
-  background: #dc3545;
+  background: #ef4444;
   margin-inline-start: auto;
 }
@@ -16388,7 +16382,7 @@ code {
 }
 .pa-heatmap__cell {
   border-radius: var(--pa-border-radius-sm);
-  background: rgba(0, 0, 0, 0.08);
+  background: color-mix(in srgb, var(--pa-text-color-1) 12%, transparent);
 }
 .pa-heatmap__cell[data-level="1"] {
   background: rgba(0, 123, 255, 0.2);
@@ -16403,28 +16397,28 @@ code {
   background: #007bff;
 }
 .pa-heatmap--success .pa-heatmap__cell[data-level="1"] {
-  background: rgba(40, 167, 69, 0.2);
+  background: rgba(34, 197, 94, 0.2);
 }
 .pa-heatmap--success .pa-heatmap__cell[data-level="2"] {
-  background: rgba(40, 167, 69, 0.4);
+  background: rgba(34, 197, 94, 0.4);
 }
 .pa-heatmap--success .pa-heatmap__cell[data-level="3"] {
-  background: rgba(40, 167, 69, 0.65);
+  background: rgba(34, 197, 94, 0.65);
 }
 .pa-heatmap--success .pa-heatmap__cell[data-level="4"] {
-  background: #28a745;
+  background: #22c55e;
 }
 .pa-heatmap--danger .pa-heatmap__cell[data-level="1"] {
-  background: rgba(220, 53, 69, 0.2);
+  background: rgba(239, 68, 68, 0.2);
 }
 .pa-heatmap--danger .pa-heatmap__cell[data-level="2"] {
-  background: rgba(220, 53, 69, 0.4);
+  background: rgba(239, 68, 68, 0.4);
 }
 .pa-heatmap--danger .pa-heatmap__cell[data-level="3"] {
-  background: rgba(220, 53, 69, 0.65);
+  background: rgba(239, 68, 68, 0.65);
 }
 .pa-heatmap--danger .pa-heatmap__cell[data-level="4"] {
-  background: #dc3545;
+  background: #ef4444;
 }
 .pa-heatmap__legend {
   display: flex;
@@ -16438,7 +16432,7 @@ code {
   width: 1.2rem;
   height: 1.2rem;
   border-radius: var(--pa-border-radius-sm);
-  background: rgba(0, 0, 0, 0.08);
+  background: color-mix(in srgb, var(--pa-text-color-1) 12%, transparent);
 }
 .pa-heatmap__legend-cell[data-level="1"] {
   background: rgba(0, 123, 255, 0.2);
@@ -16476,13 +16470,13 @@ code {
   min-height: 1px;
 }
 .pa-sparkline--success .pa-sparkline__bar {
-  background: #28a745;
+  background: #22c55e;
 }
 .pa-sparkline--warning .pa-sparkline__bar {
-  background: #ffc107;
+  background: #f97316;
 }
 .pa-sparkline--danger .pa-sparkline__bar {
-  background: #dc3545;
+  background: #ef4444;
 }
 .pa-sparkline--info .pa-sparkline__bar {
   background: #17a2b8;
@@ -16544,13 +16538,13 @@ code {
   transition: width 0.25s ease;
 }
 .pa-bar-list--success .pa-bar-list__bar::after {
-  background: #28a745;
+  background: #22c55e;
 }
 .pa-bar-list--warning .pa-bar-list__bar::after {
-  background: #ffc107;
+  background: #f97316;
 }
 .pa-bar-list--danger .pa-bar-list__bar::after {
-  background: #dc3545;
+  background: #ef4444;
 }
 .pa-bar-list--info .pa-bar-list__bar::after {
   background: #17a2b8;

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@keenmate/pure-admin-core",
-  "version": "2.5.0",
+  "version": "2.6.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 CHANGED Viewed

@@ -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/_data-viz.scss CHANGED Viewed

@@ -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/_statistics.scss CHANGED Viewed

@@ -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/variables/_base.scss CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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;
@@ -704,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
@@ -723,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;