@keenmate/pure-admin-core 2.7.1 → 2.9.0-rc01

package/src/scss/core-components/_kpi-sparkline-list.scss

@@ -4,9 +4,23 @@
    scanning rather than per-tile depth — no view-mode toggle, no status
    pills. Container queries collapse 4-col → 2-row → 3-row as the card
    narrows.
+
+   Row template uses local SCSS variables for the four column widths
+   (`$spark-col-label`, `$spark-col-chart`, `$spark-col-value`,
+   `$spark-col-delta`) so all responsive overrides reference the same
+   widths — change one and every breakpoint follows. The `--no-delta`
+   modifier drops the rightmost column; the other three are load-bearing
+   (a sparkline list without label, chart, or value is a different
+   design).
    ======================================== */
 @use '../variables' as *;
 
+/* Per-column track widths — referenced from every template selector. */
+$spark-col-label: minmax(14rem, 28%);
+$spark-col-chart: minmax(10rem, 1fr);
+$spark-col-value: minmax(8rem, 18%);
+$spark-col-delta: minmax(7rem, 12%);
+
 /* Card is a query container so rows react to *card* width, not viewport. */
 .pa-kpi-spark-list {
   container-type: inline-size;
@@ -17,10 +31,10 @@
 .pa-kpi-spark-row {
   display: grid;
   grid-template-columns:
-    minmax(14rem, 28%)
-    minmax(10rem, 1fr)
-    minmax(8rem, 18%)
-    minmax(7rem, 12%);
+    $spark-col-label
+    $spark-col-chart
+    $spark-col-value
+    $spark-col-delta;
   align-items: center;
   gap: 1.6rem;
   padding: 1.4rem 2rem;
@@ -29,6 +43,18 @@
   &:last-child { border-bottom: 0; }
 }
 
+/* Modifier: --no-delta — drops the rightmost column. label · chart ·
+   value only. Useful when the chart's slope already conveys direction
+   and the delta would be redundant. Hides the delta element and shrinks
+   the row template to 3 columns. */
+.pa-kpi-spark-list--no-delta .pa-kpi-spark-row {
+  grid-template-columns:
+    $spark-col-label
+    $spark-col-chart
+    $spark-col-value;
+}
+.pa-kpi-spark-list--no-delta .pa-kpi-spark-row__delta { display: none; }
+
 /* Mid-narrow card (1×3 page-grid + 45% column): stack to 2 rows.
    Label/value/delta on top, full-width chart below. Default order is
    value-above-chart; use .pa-kpi-spark-list--chart-first to flip. */
@@ -66,6 +92,23 @@
   .pa-kpi-spark-list--chart-first .pa-kpi-spark-row__label { align-self: start; }
   .pa-kpi-spark-list--chart-first .pa-kpi-spark-row__value { text-align: start; align-self: baseline; }
   .pa-kpi-spark-list--chart-first .pa-kpi-spark-row__delta { align-self: baseline; }
+
+  /* --no-delta at mid-narrow: 2-row layout, top row is label+value only. */
+  .pa-kpi-spark-list--no-delta .pa-kpi-spark-row {
+    grid-template-columns: minmax(0, 1fr) auto;
+    grid-template-areas:
+      "label value"
+      "chart chart";
+  }
+
+  /* --no-delta + --chart-first: 3-row single-column stack. */
+  .pa-kpi-spark-list--no-delta.pa-kpi-spark-list--chart-first .pa-kpi-spark-row {
+    grid-template-columns: 1fr;
+    grid-template-areas:
+      "label"
+      "chart"
+      "value";
+  }
 }
 
 /* Very narrow card (~280–360px, 25% page-grid stress test): force the
@@ -86,6 +129,15 @@
   .pa-kpi-spark-row__chart  { grid-area: chart; }
   .pa-kpi-spark-row__value  { grid-area: value; text-align: start; align-self: baseline; }
   .pa-kpi-spark-row__delta  { grid-area: delta; align-self: baseline; }
+
+  /* --no-delta at very-narrow: 3-row single-column stack (no delta cell). */
+  .pa-kpi-spark-list--no-delta .pa-kpi-spark-row {
+    grid-template-columns: 1fr;
+    grid-template-areas:
+      "label"
+      "chart"
+      "value";
+  }
 }
 
 /* ----- Cell typography -------------------------------------------------- */

package/src/scss/core-components/_kpi-terminal.scss

@@ -1,25 +1,31 @@
 /* ========================================
    KPI · Terminal grid
    Bloomberg-style dense panel: mono numbers, status pills, inline SVG
-   sparklines, ▲▼ deltas, segmented view-mode toggle (VALUE/Δ%/TREND).
+   sparklines, ▲▼ deltas, optional segmented tab strip for swapping
+   the body content (different tile sets / grids per tab).
    Shared chrome (header, live, footer, detail popover, spark-dot) is in
    _kpi-base.scss.
    ======================================== */
 @use '../variables' as *;
 
-/* ----- View-mode toggle (segmented button group) ------------------------ */
+/* ----- Tab strip (segmented button group) ------------------------------
+   Generalised tabs — each `.pa-kpi-terminal__tab` carries a `data-tab`
+   slug that matches a `.pa-kpi-terminal__pane[data-tab="…"]` in the body.
+   JS toggles `.is-active` on the clicked tab + matching pane; tabs and
+   panes are otherwise independent so each pane can hold a completely
+   different grid (different tile count, different grid modifier). */
 .pa-kpi-terminal__controls {
   display: inline-flex;
   align-items: center;
   gap: 1.6rem;
 }
-.pa-kpi-terminal__viewtoggle {
+.pa-kpi-terminal__tabs {
   display: inline-flex;
   border: 1px solid var(--pa-border-color);
   border-radius: 0.4rem;
   overflow: hidden;
 }
-.pa-kpi-terminal__viewbtn {
+.pa-kpi-terminal__tab {
   background: transparent;
   border: 0;
   color: var(--pa-text-color-2);
@@ -41,6 +47,13 @@
   }
 }
 
+/* ----- Pane visibility ------------------------------------------------- */
+.pa-kpi-terminal__pane {
+  display: none;
+
+  &.is-active { display: block; }
+}
+
 /* ----- Grid + tile borders ----------------------------------------------
    Hairline 1px borders between tiles, no gap. Last-row/last-column
    borders suppressed via :nth-last-child / :nth-child selectors. */
@@ -132,16 +145,15 @@
   margin-bottom: 0.8rem;
 }
 
-/* ----- Big value with 3-mode swap --------------------------------------
-   Author renders three .pa-kpi-tile__value siblings (data-mode="value" /
-   "delta" / "trend"); the active mode is selected via the
-   .pa-kpi-terminal[data-view="X"] attribute. JS toggles that attribute
-   when the segmented control is clicked. */
+/* ----- Big value -------------------------------------------------------
+   One value per tile — sentiment colour set via `--very-positive` /
+   `--positive` / `--neutral` / `--negative` / `--very-negative` modifier
+   on the value element. */
 .pa-kpi-tile__values {
   margin-bottom: 0.4rem;
 }
 .pa-kpi-tile__value {
-  display: none;
+  display: inline-flex;
   align-items: baseline;
   gap: 0.3rem;
   font-family: var(--base-font-family-mono);
@@ -153,11 +165,6 @@
   &--negative      .pa-kpi-tile__num { color: var(--pa-negative); }
   &--very-negative .pa-kpi-tile__num { color: var(--pa-very-negative); }
 }
-.pa-kpi-terminal[data-view="value"] .pa-kpi-tile__value[data-mode="value"],
-.pa-kpi-terminal[data-view="delta"] .pa-kpi-tile__value[data-mode="delta"],
-.pa-kpi-terminal[data-view="trend"] .pa-kpi-tile__value[data-mode="trend"] {
-  display: inline-flex;
-}
 
 .pa-kpi-tile__num {
   font-size: 3.8rem;

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

@@ -162,20 +162,12 @@
     white-space: nowrap;
   }
 
-  &__role {
-    display: inline-block;
-    padding: $btn-padding-v $btn-padding-h;
-    // Tinted bg derived from the header's name color so it reads on any
-    // header — dark or light. Fallback kept for older browsers.
-    background-color: var(--pa-accent-light);
-    background-color: color-mix(in srgb, var(--pa-header-profile-name-color) 15%, transparent);
-    color: var(--pa-header-profile-name-color);
-    font-size: $font-size-xs;
-    font-weight: $font-weight-medium;
-    border-radius: var(--pa-border-radius);
-    text-transform: uppercase;
-    letter-spacing: $profile-role-letter-spacing;
-  }
+  // Role badge: use the standard `.pa-badge` component in markup instead of
+  // a custom `__role` element. Previously this declared its own bg/colour/
+  // padding/uppercase styling — duplicating badge work that already existed
+  // in the framework, and coupling to `--pa-header-profile-name-color` which
+  // went invisible inside dark-mode panel bodies. Snippets and demo markup
+  // updated accordingly in 2.9.0.
 
   &__close {
     position: absolute;

package/src/scss/main.scss

@@ -5,3 +5,14 @@
 
 // Core framework (includes variables and all core-components)
 @use 'core' as *;
+
+// CSS variable defaults at :root. Themes don't go through main.scss — they
+// @import core + base-css-variables and emit their own values — so this only
+// affects the unthemed bundle (dist/css/main.css) and the FOUC window before
+// a theme stylesheet resolves.
+@use 'base-css-variables' as bcv;
+:root {
+  @include bcv.output-base-css-variables;
+  @include bcv.output-pa-css-variables;
+  @include bcv.output-pa-alert-variables-light;
+}

package/src/scss/variables/_base.scss

@@ -50,14 +50,6 @@ $base-hover-bg: $base-subtle-bg !default;         // Hover state background
 $base-active-bg: color.adjust($base-subtle-bg, $lightness: -5%) !default;  // Active/pressed state
 $base-disabled-bg: $base-subtle-bg !default;      // Disabled element background
 
-// Legacy aliases (backward compatibility)
-$base-surface-1: $base-main-bg !default;
-$base-surface-2: $base-page-bg !default;
-$base-surface-3: $base-subtle-bg !default;
-$base-surface-inverse: $base-inverse-bg !default;
-$base-primary-bg: $base-main-bg !default;
-$base-primary-bg-hover: color.adjust($base-main-bg, $lightness: -5%) !default;
-
 // =============================================================================
 // BORDER COLORS
 // Border colors and shorthand
@@ -71,7 +63,7 @@ $base-border: 1px solid $base-border-color !default;
 // Input field styling and states
 // =============================================================================
 
-$base-input-bg: $base-surface-1 !default;
+$base-input-bg: $base-main-bg !default;
 $base-input-color: #495057 !default;
 $base-input-border: 1px solid #ced4da !default;
 $base-input-border-hover: 1px solid #b8bfc6 !default;
@@ -91,7 +83,7 @@ $base-input-size-xl-height: 4.1 !default;  // 41px
 // Floating element styling
 // =============================================================================
 
-$base-dropdown-bg: $base-surface-1 !default;
+$base-dropdown-bg: $base-main-bg !default;
 $base-dropdown-border: 1px solid $base-border-color !default;
 $base-dropdown-box-shadow: 0 8px 16px $base-shadow-color !default;
 
@@ -100,7 +92,7 @@ $base-dropdown-box-shadow: 0 8px 16px $base-shadow-color !default;
 // Tooltip styling
 // =============================================================================
 
-$base-tooltip-bg: $base-surface-inverse !default;
+$base-tooltip-bg: $base-inverse-bg !default;
 $base-tooltip-text-color: #ffffff !default;
 
 // =============================================================================

package/src/scss/variables/_colors.scss

@@ -20,23 +20,23 @@ $text-color-2: $base-text-color-2 !default;
 $border-color: $base-border-color !default;
 
 // Header colors
-$header-bg: $base-surface-1 !default;
+$header-bg: $base-main-bg !default;
 $header-border-color: $base-border-color !default;
 $header-text: $base-text-color-1 !default;
 $header-text-secondary: $base-text-color-2 !default;
 $header-profile-name-color: $base-text-color-1 !default;
 
 // Sidebar colors
-$sidebar-bg: $base-surface-2 !default;
+$sidebar-bg: $base-page-bg !default;
 $sidebar-text: $base-text-color-1 !default;
 $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-bg: $base-subtle-bg !default;
+$sidebar-submenu-hover-bg: color.adjust($base-subtle-bg, $lightness: -5%) !default;
+$sidebar-submenu-active-bg: color.adjust($base-subtle-bg, $lightness: -10%) !default;
 $sidebar-submenu-active-text: $sidebar-text !default;
 
 // Footer colors
-$footer-bg: $base-surface-1 !default;
+$footer-bg: $base-main-bg !default;
 $footer-border-color: $base-border-color !default;
 
 // Accent colors (derived from base)
@@ -48,10 +48,10 @@ $accent-light: $base-accent-color-light !default;
 // CARD COLORS (derived from base surfaces)
 // =============================================================================
 
-$card-bg: $base-surface-1 !default;
-$card-header-bg: $base-surface-2 !default;
-$card-footer-bg: $base-surface-1 !default;
-$card-tabs-bg: $base-surface-2 !default;
+$card-bg: $base-main-bg !default;
+$card-header-bg: $base-page-bg !default;
+$card-footer-bg: $base-main-bg !default;
+$card-tabs-bg: $base-page-bg !default;
 
 // =============================================================================
 // INPUT COLORS (derived from base input vars)
@@ -65,10 +65,10 @@ $input-text: $base-input-color !default;
 // TABLE COLORS (derived from base surfaces)
 // =============================================================================
 
-$table-stripe: $base-surface-2 !default;
-$table-bg: $base-surface-1 !default;
-$table-header-bg: $base-surface-2 !default;
-$table-hover-bg: $base-surface-2 !default;
+$table-stripe: $base-page-bg !default;
+$table-bg: $base-main-bg !default;
+$table-header-bg: $base-page-bg !default;
+$table-hover-bg: $base-page-bg !default;
 
 // Table row hover accent (border)
 $table-hover-accent-width: 0 !default;
@@ -111,8 +111,8 @@ $btn-info-bg-hover: $base-info-color-hover !default;
 $btn-info-text: $base-text-on-info !default;
 
 // Light button
-$btn-light-bg: $base-surface-2 !default;
-$btn-light-bg-hover: $base-surface-3 !default;
+$btn-light-bg: $base-page-bg !default;
+$btn-light-bg-hover: $base-subtle-bg !default;
 $btn-light-text: $base-text-color-1 !default;
 
 // Dark button
@@ -164,9 +164,9 @@ $info-text-light: $base-info-text-light !default;
 $secondary-bg: $btn-secondary-bg !default;
 $secondary-bg-hover: $btn-secondary-bg-hover !default;
 $secondary-text: #383d41 !default;
-$secondary-light-bg: $base-surface-3 !default;
+$secondary-light-bg: $base-subtle-bg !default;
 $secondary-light-text: $base-text-color-1 !default;
-$secondary-lighter-bg: $base-surface-3 !default;
+$secondary-lighter-bg: $base-subtle-bg !default;
 
 // =============================================================================
 // TOOLTIP & POPOVER COLORS (derived from base)
@@ -177,7 +177,7 @@ $tooltip-text: $base-tooltip-text-color !default;
 
 $popover-text-light: #ffffff !default;
 $popover-text-dark: #000000 !default;
-$popover-content-bg: $base-surface-1 !default;
+$popover-content-bg: $base-main-bg !default;
 
 // =============================================================================
 // CODE LANGUAGE COLORS (standalone - not themed)

package/src/scss/variables/_components.scss

@@ -143,7 +143,6 @@ $profile-section-gap: $spacing-xl !default;
 $profile-overlay-bg: rgba(0, 0, 0, 0.3) !default;
 $profile-button-padding-v: $spacing-sm !default;
 $profile-button-padding-h: $spacing-md !default;
-$profile-role-letter-spacing: 0.5px !default;
 $profile-panel-mobile-max-width: 40rem !default;  // 400px (was 25rem)
 $profile-panel-content-padding: 1.6rem !default;  // Matches sidebar-padding horizontal (16px)
 

package/src/scss/variables/_system.scss

@@ -3,6 +3,14 @@
 // Z-index, opacity, transitions, animations, shadows
 // ============================================================================
 
+// Theme color-scheme signal to the browser. Drives native UA elements
+// (scrollbars, form controls) and the `light-dark()` CSS function. Themes
+// override BEFORE `@import variables/index`. Values: `light`, `dark`,
+// `light dark` (let OS preference decide), or `only light` / `only dark`
+// to ignore OS preference. Per-mode overrides (e.g. `color-scheme: dark;`
+// inside a `.pa-mode-dark` block) take precedence via the cascade.
+$theme-color-scheme: light !default;
+
 // Z-index scale (increments of 1000 for easy adjustment)
 $z-index-base: 0 !default;
 $z-index-content: 1000 !default;

package/src/scss/.claude/settings.local.json

@@ -1,11 +0,0 @@
-{
-  "permissions": {
-    "allow": [
-      "Bash(mkdir:*)",
-      "Read(//c/Git/KM/pure-admin/pure-admin-visual/**)",
-      "Bash(npm run build-all:*)"
-    ],
-    "deny": [],
-    "ask": []
-  }
-}