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

package/README.md

@@ -2,6 +2,13 @@
 
 Lightweight, data-focused CSS/SCSS admin framework with Corporate theme as default.
 
+## What's New in 2.9.0-rc01
+
+- **`color-scheme` now emitted per theme via the new `$theme-color-scheme` SCSS variable.** Themes signal their colour scheme to the browser so native UA elements (scrollbars, form controls, `<input type="date">`) and the CSS `light-dark()` function resolve correctly. Previously themes applied dark palettes via `--pa-*` / `--base-*` overrides alone, so the browser still saw the host page as `color-scheme: normal` (effectively light) — embedded web components (`web-multiselect`, `web-daterangepicker`) using `light-dark()` for adaptive palettes silently picked the light value on dark themes. Themes set `$theme-color-scheme: dark` (always-dark) or add a one-line `color-scheme: dark;` to their `.pa-mode-dark` block (dual-mode). The unthemed `dist/css/main.css` now ships `color-scheme: light` at `:root`.
+- **Six `--base-*` legacy aliases dropped (breaking for consumers using them directly).** `--base-surface-1`, `--base-surface-2`, `--base-surface-3`, `--base-surface-inverse`, `--base-primary-bg`, `--base-primary-bg-hover` are gone — they aliased to existing semantic tokens (`--base-main-bg` / `--base-page-bg` / `--base-subtle-bg` / `--base-inverse-bg`) with no behavioural difference and added taxonomy confusion. `--base-primary-bg` specifically broke `web-multiselect@1.10.0+` dark-mode hover (its smart `color-mix` fallback was short-circuited by our compile-time `#ffffff` emit). Migration: rename to the matching `--base-*-bg` semantic name; for `--base-primary-bg-hover` consumers, switch to `--base-hover-bg` or compose with `color-mix`.
+- **Profile panel role chip migrated to `.pa-badge` (markup-breaking).** The bespoke `.pa-profile-panel__role` class hardcoded uppercase + letter-spacing and pointed at `--pa-header-profile-name-color`, which rendered as black-on-dark in panel context. Replaced with the standard `.pa-badge` component (theme-tuned for both modes). Snippet markup updated: `<span class="pa-profile-panel__role">…</span>` → `<span class="pa-badge">…</span>`. Use `.pa-badge--light` / `--primary` / `--info` / `--success` / `--warning` / `--danger` for variants.
+- **Coloured card variants no longer leak white pixels around the header chrome.** Two independent causes addressed together — corner-radius mismatch at the header's TOP corners (header's 8px curved more than the card's effective 7px inner radius, exposing a thin slice of card bg) and a gray hairline along the header's BOTTOM edge (border-bottom stayed `--pa-border-color` on coloured variants). The header now omits `border-top-*-radius` (card's `overflow: hidden` clips it) and each variant overrides `border-bottom-color` to match its background. Affects `.pa-card--primary` / `--success` / `--warning` / `--danger` and `.pa-card--color-1` through `--color-9`.
+
 ## What's New in 2.8.0
 
 - **CSS variable defaults now ship at `:root` in `dist/css/main.css`.** The unthemed bundle previously had no `--pa-*` / `--base-*` values — they were emitted only by theme stylesheets, so consuming `@keenmate/pure-admin-core/css` standalone (or any page before its theme link resolved) left tokens unresolved and components rendered with broken fallbacks (KPI sparklines and deltas in near-black via inherited text colour, web components reverting to hardcoded literals). `main.scss` now emits `output-base-css-variables`, `output-pa-css-variables`, and `output-pa-alert-variables-light` at `:root` for a complete neutral default. Themes are unaffected — they emit their own `:root` from their theme file and all 15 themes rebuild byte-identical. Supersedes the partial 2.7.1-era sentiment-scale fallback patch.
@@ -10,14 +17,6 @@ Lightweight, data-focused CSS/SCSS admin framework with Corporate theme as defau
 - **`.pa-kpi-terminal` view-mode toggle generalised to a tab strip (Visual breaking).** `__viewtoggle`/`__viewbtn` renamed to `__tabs`/`__tab`; `data-view` attribute on the root is gone in favour of `data-tab` on tabs and panes; the per-tile `__value[data-mode]` triple-value mechanism is removed. Each tab now swaps in a separate `__pane` with its own tile set and grid layout — authors can put a different number of tiles (and a different grid modifier) behind each tab. JS contract: `initTerminalViewToggle` → `initTerminalTabs`.
 - **`.pa-kpi-strip` column toggles extended to a composable 2–5 column family.** Three independently composable toggle modifiers (`--no-prev`, `--no-delta`, `--no-target`) replace the previous fixed 4/5-col shapes, yielding eight visible-column combinations. Per-column header classes (`__head--metric`/`--now`/`--prev`/`--delta`/`--target`) keep the header row in sync with the data rows. Track widths lifted to local SCSS variables so the eight precomputed templates share one source of truth.
 
-## What's New in 2.7.1
-
-- **KPI showcases promoted to permanent core components.** The seven showcase designs (terminal grid, sparkline list, comparison gauges, hero + supporting, bento, numeric strip, editorial minimal) graduate from demo-inline `<style>`/`<script>` blocks into framework components — ~500 lines of CSS and ~350 lines of JS now live in shared sources instead of duplicated inline blocks.
-- **Eight new core SCSS partials** under `core-components/`. `_kpi-base.scss` carries the chrome shared across all seven designs (`pa-kpi-header`, `pa-kpi-live` + pulse animation, `pa-kpi-footer`, `pa-kpi-detail` hover popover, `pa-kpi-spark-dot`/`-spark-wrap`, `pa-kpi-sectionhead`); seven design-specific files carry per-design layout + typography. All wired into `_core.scss` after `data-viz`.
-- **All `kpi-*` classes renamed to `pa-kpi-*`** to match the framework's BEM prefix rule. Element (`__header`, `__live`, `__footer`, `__detail`) and modifier (`--positive`, `--negative`, `--neutral`, `--up-strong`, `--down-strong`) structures preserved 1:1.
-- **Per-component cascade variables namespace-prefixed.** `--kpi-accent` → `--pa-kpi-accent`, `--kpi-bar-color` → `--pa-kpi-bar-color`. Gauge tick knobs (`--pa-kpi-gauge-tick-pos`, `--pa-kpi-gauge-tick-color`) keep their gauge-specific names.
-- **No new framework tokens.** All sentiment, popover-chrome, sparkline-geometry, contrast-tier, and surface tokens were already emitted by `_base-css-variables.scss` from the 2.6.0 consolidation — this release reuses them.
-
 ## Installation
 
 ```bash

package/dist/css/main.css

@@ -5425,8 +5425,6 @@ body:not(.sidebar-hidden) .pa-layout__sidebar--icon-collapse .pa-sidebar__icon {
 .pa-card__header {
   padding: 0.5rem 1rem;
   min-height: 4rem;
-  border-top-left-radius: 8px;
-  border-top-right-radius: 8px;
   border-bottom: 1px solid var(--pa-border-color);
   background: var(--pa-card-header-bg);
   display: flex;
@@ -5604,6 +5602,7 @@ body:not(.sidebar-hidden) .pa-layout__sidebar--icon-collapse .pa-sidebar__icon {
 }
 .pa-card--primary .pa-card__header {
   background-color: var(--pa-accent);
+  border-bottom-color: var(--pa-accent);
   color: var(--pa-btn-primary-text);
 }
 .pa-card--primary .pa-card__header h1,
@@ -5619,6 +5618,7 @@ body:not(.sidebar-hidden) .pa-layout__sidebar--icon-collapse .pa-sidebar__icon {
 }
 .pa-card--success .pa-card__header {
   background-color: var(--pa-success-bg);
+  border-bottom-color: var(--pa-success-bg);
   color: var(--pa-btn-success-text);
 }
 .pa-card--success .pa-card__header h1,
@@ -5634,6 +5634,7 @@ body:not(.sidebar-hidden) .pa-layout__sidebar--icon-collapse .pa-sidebar__icon {
 }
 .pa-card--warning .pa-card__header {
   background-color: var(--pa-warning-bg);
+  border-bottom-color: var(--pa-warning-bg);
   color: var(--pa-btn-warning-text);
 }
 .pa-card--warning .pa-card__header h1,
@@ -5649,6 +5650,7 @@ body:not(.sidebar-hidden) .pa-layout__sidebar--icon-collapse .pa-sidebar__icon {
 }
 .pa-card--danger .pa-card__header {
   background-color: var(--pa-danger-bg);
+  border-bottom-color: var(--pa-danger-bg);
   color: var(--pa-btn-danger-text);
 }
 .pa-card--danger .pa-card__header h1,
@@ -5695,6 +5697,7 @@ body:not(.sidebar-hidden) .pa-layout__sidebar--icon-collapse .pa-sidebar__icon {
 }
 .pa-card--color-1 .pa-card__header {
   background-color: var(--pa-color-1);
+  border-bottom-color: var(--pa-color-1);
   color: var(--pa-color-1-text);
 }
 .pa-card--color-1 .pa-card__header h1,
@@ -5710,6 +5713,7 @@ body:not(.sidebar-hidden) .pa-layout__sidebar--icon-collapse .pa-sidebar__icon {
 }
 .pa-card--color-2 .pa-card__header {
   background-color: var(--pa-color-2);
+  border-bottom-color: var(--pa-color-2);
   color: var(--pa-color-2-text);
 }
 .pa-card--color-2 .pa-card__header h1,
@@ -5725,6 +5729,7 @@ body:not(.sidebar-hidden) .pa-layout__sidebar--icon-collapse .pa-sidebar__icon {
 }
 .pa-card--color-3 .pa-card__header {
   background-color: var(--pa-color-3);
+  border-bottom-color: var(--pa-color-3);
   color: var(--pa-color-3-text);
 }
 .pa-card--color-3 .pa-card__header h1,
@@ -5740,6 +5745,7 @@ body:not(.sidebar-hidden) .pa-layout__sidebar--icon-collapse .pa-sidebar__icon {
 }
 .pa-card--color-4 .pa-card__header {
   background-color: var(--pa-color-4);
+  border-bottom-color: var(--pa-color-4);
   color: var(--pa-color-4-text);
 }
 .pa-card--color-4 .pa-card__header h1,
@@ -5755,6 +5761,7 @@ body:not(.sidebar-hidden) .pa-layout__sidebar--icon-collapse .pa-sidebar__icon {
 }
 .pa-card--color-5 .pa-card__header {
   background-color: var(--pa-color-5);
+  border-bottom-color: var(--pa-color-5);
   color: var(--pa-color-5-text);
 }
 .pa-card--color-5 .pa-card__header h1,
@@ -5770,6 +5777,7 @@ body:not(.sidebar-hidden) .pa-layout__sidebar--icon-collapse .pa-sidebar__icon {
 }
 .pa-card--color-6 .pa-card__header {
   background-color: var(--pa-color-6);
+  border-bottom-color: var(--pa-color-6);
   color: var(--pa-color-6-text);
 }
 .pa-card--color-6 .pa-card__header h1,
@@ -5785,6 +5793,7 @@ body:not(.sidebar-hidden) .pa-layout__sidebar--icon-collapse .pa-sidebar__icon {
 }
 .pa-card--color-7 .pa-card__header {
   background-color: var(--pa-color-7);
+  border-bottom-color: var(--pa-color-7);
   color: var(--pa-color-7-text);
 }
 .pa-card--color-7 .pa-card__header h1,
@@ -5800,6 +5809,7 @@ body:not(.sidebar-hidden) .pa-layout__sidebar--icon-collapse .pa-sidebar__icon {
 }
 .pa-card--color-8 .pa-card__header {
   background-color: var(--pa-color-8);
+  border-bottom-color: var(--pa-color-8);
   color: var(--pa-color-8-text);
 }
 .pa-card--color-8 .pa-card__header h1,
@@ -5815,6 +5825,7 @@ body:not(.sidebar-hidden) .pa-layout__sidebar--icon-collapse .pa-sidebar__icon {
 }
 .pa-card--color-9 .pa-card__header {
   background-color: var(--pa-color-9);
+  border-bottom-color: var(--pa-color-9);
   color: var(--pa-color-9-text);
 }
 .pa-card--color-9 .pa-card__header h1,
@@ -12264,18 +12275,6 @@ code {
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-.pa-profile-panel__role {
-  display: inline-block;
-  padding: 0.8rem 1.2rem;
-  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: 1.2rem;
-  font-weight: 500;
-  border-radius: var(--pa-border-radius);
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
-}
 .pa-profile-panel__close {
   position: absolute;
   top: 1.6rem;
@@ -19321,12 +19320,6 @@ html.pa-font-base-12 {
   --base-active-bg: rgb(218.2368421053, 223.25, 228.2631578947);
   --base-disabled-bg: #e9ecef;
   --base-elevated-bg: #f5f5f5;
-  --base-surface-1: #ffffff;
-  --base-surface-2: #f8f9fa;
-  --base-surface-3: #e9ecef;
-  --base-surface-inverse: #2c3e50;
-  --base-primary-bg: #ffffff;
-  --base-primary-bg-hover: rgb(242.25, 242.25, 242.25);
   --base-border-color: #e1e5e9;
   --base-border: 1px solid #e1e5e9;
   --base-input-bg: #ffffff;
@@ -19401,6 +19394,7 @@ html.pa-font-base-12 {
   --base-border-radius-sm: 0.4;
   --base-border-radius-md: 0.6;
   --base-border-radius-lg: 0.8;
+  color-scheme: light;
   --pa-main-bg: #f8f9fa;
   --pa-page-bg: #f8f9fa;
   --pa-subtle-bg: #ffffff;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@keenmate/pure-admin-core",
-  "version": "2.8.0",
+  "version": "2.9.0-rc01",
   "description": "Lightweight, data-focused HTML/CSS admin framework built with PureCSS foundation and comprehensive component system",
   "style": "dist/css/main.css",
   "exports": {

package/snippets/profile.html

@@ -58,7 +58,7 @@ to save horizontal space in the navbar.
                 <!-- title= attrs give a tooltip when the text truncates with ellipsis -->
                 <h3 class="pa-profile-panel__name"  title="John Doe">John Doe</h3>
                 <p  class="pa-profile-panel__email" title="john.doe@company.com">john.doe@company.com</p>
-                <span class="pa-profile-panel__role">Administrator</span>
+                <span class="pa-badge">Administrator</span>
             </div>
             <button class="pa-profile-panel__close" onclick="closeProfilePanel()" aria-label="Close Profile">
                 ✕
@@ -124,7 +124,7 @@ to save horizontal space in the navbar.
             <div class="pa-profile-panel__info">
                 <h3 class="pa-profile-panel__name">John Doe</h3>
                 <p  class="pa-profile-panel__email">john.doe@company.com</p>
-                <span class="pa-profile-panel__role">Administrator</span>
+                <span class="pa-badge">Administrator</span>
             </div>
             <button class="pa-profile-panel__close" onclick="closeProfilePanel()" aria-label="Close Profile">✕</button>
         </div>
@@ -170,7 +170,7 @@ to save horizontal space in the navbar.
             <div class="pa-profile-panel__info">
                 <h3 class="pa-profile-panel__name">Jane Smith</h3>
                 <p  class="pa-profile-panel__email">jane.smith@corp.example</p>
-                <span class="pa-profile-panel__role">Analyst</span>
+                <span class="pa-badge">Analyst</span>
             </div>
             <button class="pa-profile-panel__close" onclick="closeProfilePanel()" aria-label="Close Profile">✕</button>
         </div>
@@ -207,7 +207,7 @@ to save horizontal space in the navbar.
             <div class="pa-profile-panel__info">
                 <h3 class="pa-profile-panel__name">John Doe</h3>
                 <p  class="pa-profile-panel__email">john.doe@company.com</p>
-                <span class="pa-profile-panel__role">Administrator</span>
+                <span class="pa-badge">Administrator</span>
             </div>
             <button class="pa-profile-panel__close" onclick="closeProfilePanel()" aria-label="Close Profile">✕</button>
         </div>
@@ -425,7 +425,10 @@ HEADER:
 - .pa-profile-panel__info               Text column (name + email + role).
 - .pa-profile-panel__name               User name (ellipsis on overflow).
 - .pa-profile-panel__email              Email (ellipsis on overflow).
-- .pa-profile-panel__role               Role badge (uppercase, tinted bg).
+- .pa-badge                             Role chip (standard badge component;
+                                        add `.pa-badge--primary` / `--info` /
+                                        `--success` / `--warning` / `--danger`
+                                        / `--light` for variant styling).
 - .pa-profile-panel__close              Close button (top-end corner).
 
 Theme-colour design choices (why they're like this):
@@ -433,11 +436,13 @@ Theme-colour design choices (why they're like this):
   colour the header uses for the user's name. This guarantees contrast
   against dark / coloured header backgrounds across all themes (body
   text colours would read wrong on a dark header).
-- __role paints its background with color-mix(in srgb,
-  var(--pa-header-profile-name-color) 15%, transparent) so the tint is
-  derived from the header colour and works on any theme. An older
-  --pa-accent-light fallback is declared first for browsers without
-  color-mix.
+- Role uses the standard `.pa-badge` component (var(--pa-btn-secondary-bg)
+  / -text by default), which themes already tune for both light and dark
+  modes. Previously this was a custom `.pa-profile-panel__role` element
+  coupled to --pa-header-profile-name-color — that token is sized for the
+  header (e.g. black on yellow in Express) and went invisible on dark
+  panel bodies. Migrated to `.pa-badge` in 2.9.0; older snippet markup
+  using `pa-profile-panel__role` needs the class swap.
 
 TABS (optional — sits between __header and __body):
 - .pa-profile-panel__tabs               Tabs container (border-bottom + header-bg).

package/src/scss/_base-css-variables.scss

@@ -47,14 +47,6 @@
   --base-disabled-bg: #{$base-disabled-bg};
   --base-elevated-bg: #{$base-elevated-bg};
 
-  // === Background Colors (legacy aliases) ===
-  --base-surface-1: #{$base-surface-1};
-  --base-surface-2: #{$base-surface-2};
-  --base-surface-3: #{$base-surface-3};
-  --base-surface-inverse: #{$base-surface-inverse};
-  --base-primary-bg: #{$base-primary-bg};
-  --base-primary-bg-hover: #{$base-primary-bg-hover};
-
   // === Border Colors ===
   --base-border-color: #{$base-border-color};
   --base-border: #{$base-border};
@@ -265,6 +257,18 @@
 // ============================================================================
 
 @mixin output-pa-css-variables {
+  // =========================================================================
+  // COLOR SCHEME SIGNAL
+  // Tells the browser whether this scope is light or dark so native UA
+  // elements (scrollbars, form controls) and `light-dark()` resolve
+  // correctly. Drives web components (e.g. <web-multiselect>) that ship
+  // adaptive palettes via `light-dark()`. Override $theme-color-scheme
+  // before importing variables for always-dark themes; for dual-mode
+  // themes leave default `light` here and add `color-scheme: dark;` to
+  // the `.pa-mode-dark` block.
+  // =========================================================================
+  color-scheme: #{$theme-color-scheme};
+
   // =========================================================================
   // CORE COLORS
   // =========================================================================

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

@@ -23,8 +23,13 @@
   &__header {
     padding: $card-header-padding-v $card-header-padding-h;
     min-height: $card-header-min-height;
-    border-top-left-radius: $card-border-radius;
-    border-top-right-radius: $card-border-radius;
+    // No own border-top-radius — the card's `overflow: hidden` + outer
+    // border-radius clips the header's square top corners to match. Setting
+    // a radius here makes the header curve at 8px while the card's INNER
+    // corner is ~7px (outer 8px minus the 1px border), leaving a thin
+    // wedge of card background visible at each top corner — most obvious
+    // on coloured variants (--primary/--success/--warning/--danger/--color-*)
+    // where the wedge shows as a white sliver against the variant colour.
     border-bottom: $border-width-base solid var(--pa-border-color);
     background: var(--pa-card-header-bg);
     display: flex;
@@ -240,11 +245,15 @@
   }
 
   // Card variants
+  // Coloured variants override the header's border-bottom-color to match the
+  // variant — otherwise the default light-gray hairline shows as a visible
+  // strip against the coloured surroundings (header bg + card border above).
   &--primary {
     border-color: var(--pa-accent);
 
     .pa-card__header {
       background-color: var(--pa-accent);
+      border-bottom-color: var(--pa-accent);
       color: var(--pa-btn-primary-text);
 
       h1,
@@ -263,6 +272,7 @@
 
     .pa-card__header {
       background-color: var(--pa-success-bg);
+      border-bottom-color: var(--pa-success-bg);
       color: var(--pa-btn-success-text);
 
       h1,
@@ -281,6 +291,7 @@
 
     .pa-card__header {
       background-color: var(--pa-warning-bg);
+      border-bottom-color: var(--pa-warning-bg);
       color: var(--pa-btn-warning-text);
 
       h1,
@@ -299,6 +310,7 @@
 
     .pa-card__header {
       background-color: var(--pa-danger-bg);
+      border-bottom-color: var(--pa-danger-bg);
       color: var(--pa-btn-danger-text);
 
       h1,
@@ -366,6 +378,7 @@
 
       .pa-card__header {
         background-color: var(--pa-color-#{$i});
+        border-bottom-color: var(--pa-color-#{$i});
         color: var(--pa-color-#{$i}-text);
 
         h1,

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/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": []
-  }
-}