@keenmate/pure-css 1.0.0-rc06 → 1.0.0-rc07

package/CHANGELOG.md

@@ -3,6 +3,76 @@
 All notable changes to `@keenmate/pure-css` are documented here. Format based on
 [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 
+## [1.0.0-rc07] — 2026-09-08 [PUBLISHED]
+
+The **shared theming knob** release. Before rc07 the same visual token (a tooltip
+background, an input border, a dropdown surface) was produced *twice and
+independently* — pure-admin's `--pc-*` component tokens were baked compile-time
+literals, while the KeenMate web components read `--base-*` live — so they agreed
+only by coincidence and diverged the instant a theme retuned `--base-*` at
+runtime (every dual-mode theme does exactly this at `.pc-mode-dark`). rc07 makes
+`--base-*` the single runtime knob: override one namespace and pure-admin
+components + the web components re-theme together, in light and dark.
+
+### Added
+
+- **Gap `--base-*` tokens the web components already read but pure-css never
+  emitted** — so they stop falling through to hardcoded component defaults and
+  actually theme: `--base-text-inverted`, `--base-checkbox-border-color`,
+  `--base-input-border-color` (+ the `--base-input-border` shorthand),
+  `--base-input-clear-color` / `--base-input-clear-bg-hover`, the solid role
+  fills `--base-success-bg` / `--base-danger-bg` / `--base-warning-bg`, and
+  `--base-rem`.
+
+### Changed
+
+- **`--pc-*` component tokens now derive from `--base-*` at runtime.** ~40 themed
+  `--pc-*` tokens (buttons, cards, inputs, checkbox, input groups, tables, modal,
+  tooltip/popover, command palette, multiselect) were rewritten from baked
+  `#{$…}` literals to the guiding-rule form `var(--base-x, #{$fallback})`. The
+  `#{$fallback}` preserves today's compiled value, so **light-mode output is
+  unchanged** — but the token now follows any runtime `--base-*` override, shared
+  with the web components.
+- **The app shell surfaces stay compile-time — deliberately not `--base-*`-derived.**
+  The navbar/sidebar/footer surface + text tokens (`--pc-navbar-*`,
+  `--pc-sidebar-*`, `--pc-footer-*`) are emitted as plain `#{$…}` literals, *not*
+  `var(--base-main-bg, …)`. The shell is a distinct brand surface a theme sets on
+  its own (e.g. a yellow navbar) independent of the `--base-*` card/page palette;
+  since `--base-main-bg` is always emitted, deriving the navbar from it would let
+  the base palette win and erase the brand colour. Standalone (`base.css`-only)
+  rendering is still covered — the shell CSS itself resolves
+  `var(--pc-navbar-bg, var(--base-main-bg))`, so the `--base-*` floor applies only
+  when no `--pc-*` is emitted (the rc06 contract), not as a runtime override of it.
+- **Surface-token naming realigned with the `--base-*` model (B5).**
+  `--pc-main-bg` is now the **white surface** (`--base-main-bg`), `--pc-subtle-bg`
+  the **muted grey** (`--base-subtle-bg`), and `--pc-page-bg` remains the **grey
+  canvas**. Previously `--pc-main-bg` *was* the grey canvas and `--pc-subtle-bg`
+  *was* white — an inversion vs the `--base-*` vocabulary. pure-css's own shell
+  canvas usages (reboot `body`, `.pc-layout`, scrollbars) were repointed
+  `--pc-main-bg` → `--pc-page-bg` so the canvas stays grey. **Downstream code
+  reading `--pc-main-bg` / `--pc-subtle-bg` must re-check intent** — see
+  pure-admin-core rc19, which repoints its component surfaces accordingly.
+- `$base-elevated-bg` default changed from the stray `#f5f5f5` to `$base-page-bg`.
+
+### Fixed
+
+- **Broken `$`-link:** `$input-border` was a hardcoded `#ced4da` (the comment even
+  claimed it came from base) — reconnected to `$base-input-border-color`, so input
+  borders finally track the theme.
+- **Semantic surface reconciliation** so pure-admin and the web components resolve
+  the *same* base token per surface: card/table headers + striped rows →
+  `--base-elevated-bg`, dropdown/popover → `--base-dropdown-bg`, table/multiselect
+  hover → `--base-hover-bg`, checkbox border → `--base-checkbox-border-color`.
+- **Sidebar search box alignment + collapsed-rail gating (`_sidebar.scss`).** The
+  search input's inline padding was rebalanced to `0 $spacing-base 0 $spacing-sm`
+  so its magnifier lines up with the nav-row icons below it (margin `$spacing-sm` +
+  padding-left `$spacing-sm` = the `$spacing-base` nav inset) instead of sitting one
+  box-margin too far in. The collapsed-rail rules that shed the search frame/field
+  down to the submit icon were re-scoped from `.pc-layout__sidebar--icon-collapse`
+  to `.sidebar-hidden .pc-layout__sidebar--icon-collapse` — the mode class stays on
+  the element while the rail is expanded, so the unscoped rules were stripping the
+  search frame in the expanded state too.
+
 ## [1.0.0-rc06] — 2026-08-30
 
 ### Fixed

package/README.md

@@ -4,18 +4,20 @@ The KeenMate CSS **foundation** — the `--base-*` theming contract, the flexbox
 utility classes — extracted from [`@keenmate/pure-admin-core`](https://github.com/KeenMate/pure-admin)
 so it can be consumed on its own.
 
+## What's New in 1.0.0-rc07
+
+- **Theming — one runtime knob re-themes pure-admin components and the web components together** — before rc07 the same visual token was produced twice and independently: pure-admin's `--pc-*` component tokens were baked as compile-time literals, while the KeenMate web components read `--base-*` live, so they agreed only by coincidence and diverged the instant a theme retuned `--base-*` at runtime (every dark-mode toggle does exactly this at `.pc-mode-dark`). ~40 themed `--pc-*` tokens in `_base-css-variables.scss` (buttons, cards, inputs, checkbox, input groups, tables, modal, tooltip/popover, command palette, multiselect) were rewritten from `#{$…}` literals to the guiding-rule form `var(--base-x, #{$fallback})`. The `#{$fallback}` preserves today's compiled value so light-mode output is byte-for-byte unchanged, but each token now follows any runtime `--base-*` override — the same knob the web components already read.
+- **App shell — navbar/sidebar/footer surfaces stay a distinct brand colour, deliberately not `--base-*`-derived** — the shell's surface + text tokens (`--pc-navbar-*`, `--pc-sidebar-*`, `--pc-footer-*`) are emitted as plain `#{$…}` literals, *not* `var(--base-main-bg, …)`. A theme sets the shell's brand (e.g. a yellow navbar) independently of the `--base-*` card/page palette, and since `--base-main-bg` is always emitted, deriving the navbar from it would let the base palette win and erase the brand. Standalone (`base.css`-only) rendering still works because the shell CSS resolves `var(--pc-navbar-bg, var(--base-main-bg))` — the `--base-*` floor applies only when no `--pc-*` is emitted (the rc06 contract), never as a runtime override of it.
+- **Theming — gap `--base-*` tokens the web components read but pure-css never emitted** — several `--base-*` vars the components already consumed were falling through to hardcoded component defaults because pure-css didn't emit them, so they couldn't be themed. rc07 emits them: `--base-text-inverted`, `--base-checkbox-border-color`, `--base-input-border-color` (+ the `--base-input-border` shorthand), `--base-input-clear-color` / `--base-input-clear-bg-hover`, the solid role fills `--base-success-bg` / `--base-danger-bg` / `--base-warning-bg`, and `--base-rem`.
+- **Surfaces — `--pc-main-bg` / `--pc-subtle-bg` naming realigned with the `--base-*` model** — `--pc-main-bg` is now the **white surface** and `--pc-subtle-bg` the **muted grey**, matching `--base-main-bg` / `--base-subtle-bg`; previously the two were inverted (`--pc-main-bg` *was* the grey canvas). pure-css's own canvas usages (reboot `body`, `.pc-layout`, scrollbars) were repointed `--pc-main-bg` → `--pc-page-bg` so the page canvas stays grey. **Downstream code reading `--pc-main-bg` / `--pc-subtle-bg` must re-check intent** — see pure-admin-core rc19.
+- **Fixed — input borders finally track the theme** — `$input-border` was a hardcoded `#ced4da` (its own comment wrongly claimed it came from base); it's reconnected to `$base-input-border-color`. Also a semantic surface reconciliation so pure-admin and the web components resolve the *same* base token per surface (card/table headers + striped rows → `--base-elevated-bg`, dropdown/popover → `--base-dropdown-bg`, hover → `--base-hover-bg`).
+- **Fixed — sidebar search box alignment + collapsed-rail gating** — the search input's inline padding was rebalanced (`0 $spacing-base 0 $spacing-sm`) so its magnifier lines up with the nav-row icons below it, and the collapsed-rail rules that strip the search down to the submit icon were re-scoped from `.pc-layout__sidebar--icon-collapse` to `.sidebar-hidden .pc-layout__sidebar--icon-collapse` — the mode class stays on the element while the rail is expanded, so the unscoped rules were stripping the search frame in the expanded state too.
+
 ## What's New in 1.0.0-rc06
 
 - **The app shell renders standalone — no `--pc-*` component setup required** — rc05 moved the shell into the foundation, but its CSS referenced component tokens (`--pc-navbar-bg`, `--pc-sidebar-*`, `--pc-card-bg`, …) that pure-css doesn't emit, so linking `base.css` / `pure-css.css` alone gave an unstyled navbar/sidebar (keen-docs hit this). Every such reference now falls back to a `--base-*` var that pure-css *does* emit — `var(--pc-navbar-bg, var(--base-main-bg))` and friends, 40 in all, each traced from the token's real derivation. That's a clean two-tier contract: link the base vars and the shell just works out of the box; set the `--pc-*` token only when you want to fine-tune a piece independently. Also fixed two dangling refs in the fit flyout (`--pc-accent-color` → `--pc-accent`, plus a `--base-hover-bg` tier for `--pc-hover-bg`).
 - **One border-radius scale across the whole ecosystem** — pure-css shipped two disconnected radius systems: the `--base-border-radius-sm/md/lg` multipliers every web/svelte component reads (e.g. web-multiselect), and its own `--pc-border-radius*` as hardcoded 2/4/8px literals that ignored the base layer — so a `<keen-web-multiselect>` and a pure-css `.rounded` element rounded differently on the same theme, and a runtime `--base-border-radius-*` override moved the components but not pure-css's own elements. The `--pc-border-radius*` tokens now derive from `--base-border-radius-*` (`calc(var(--base-border-radius-md, 0.6) * 1rem)`), so radii match the components and one override re-rounds everything together. Rendered corners change slightly: small 2px→4px, medium 4px→6px, large unchanged.
 
-## What's New in 1.0.0-rc05
-
-- **App shell — the navbar, sidebar, and layout container join the foundation** — pure-css has been variables + grid + utilities since the extraction; rc05 relocates the structural *app-shell* layer out of `@keenmate/pure-admin-core`, so a standalone page gets the same navbar/sidebar/layout chrome as a full admin app without pulling in the 40+ component library. Eight new partials (`_navbar.scss`, `_navbar-elements.scss`, `_sidebar.scss`, `_sidebar-states.scss`, `_layout-container.scss`, `_layout-responsive.scss`, `_resize-handle.scss`, `_fit-flyout.scss`) `@use` into the `pure-css.css` bundle — `base.css`, `grid.css` and `utilities.css` are untouched and there's no new CSS artifact. The emitted surface is `pc-`-branded like the rest of the foundation: the fixed navbar (`.pc-navbar` + `__start`/`__center`/`__end`, burger, brand `.pc-app-header`, `.pc-navmenu`, profile button, theme switcher), the nested sidebar with hidden/icon-collapse/expanded states and a drag-to-resize handle (`.pc-sidebar`, `.pc-layout__sidebar`, `.pc-sidebar-resize`), and the layout wrapper (`.pc-layout` + `__main`/`__content`/`__footer`) with mobile/tablet media queries. pure-admin-core now `@forward`s same-named partials instead of owning copies, so the shell is single-sourced here and can't drift.
-- **The shell now brings its own behaviour — pure-css is no longer CSS-only** — the shell's JavaScript ships with the foundation as a small, dependency-free runtime under `src/js/`, exposed as source (no build step) via a new `./js` export. `pure-css.js` installs `window.pureCss` — an event bus, live viewport / OS-colour-scheme / capability-first device sources, overlay primitives (scroll-lock, keyboard-inset), an open-menu registry, a shared `config` baseline single-sourced from the SCSS via `--pc-*` vars, and `components.initAll(scope)` — and the shell engines hang off it: `fit.js` (the `data-pc-fit` fit engine, which also absorbed the former `navbar-collapse.js` progressive nav-folding via `data-pc-fit-nav`, so that file no longer exists), `navbar-dropdown.js`, `sidebar-resize.js`, and `container-breakpoint.js`. The runtime is load-order-safe and stands alone when pure-admin is absent; the shell CSS is authored no-JS-safe, so styling degrades gracefully rather than breaking when the runtime isn't loaded.
-- **The grid's automatic responsive context now ships in the same bundle** — `_pa-grid.scss`'s container-query responsive columns (`.pc-col-md-*`, …) need a containment-context ancestor, documented as `.pc-layout__main`. That selector previously lived only in pure-admin-core, so the note was aspirational for a standalone pure-css page; with `_layout-container.scss` relocated into the bundle, `.pc-layout__main` is emitted here and the responsive variants get their context out of the box (the stale comment still read `.pa-layout__main` from before the rc04 de-brand — corrected to `.pc-layout__main`).
-- **Toolchain-free zip distribution via GitHub Releases** — a new `.github/workflows/release.yml` builds the CSS on every `v*.*.*` tag push and publishes a GitHub Release carrying `pure-css-<version>.zip` (the same file set as the npm package — `dist/`, `src/scss/`, `README.md`, `CHANGELOG.md`, `LICENSE`) plus a `.sha256` checksum, so consumers who don't use npm can vendor the built foundation as a drop-in. rc tags (those containing `-`) publish as GitHub pre-releases. Mirrors pure-admin-core's release workflow, adapted for this single-package repo.
-
 ## Why
 
 Any surface that isn't a full admin app — a docs site, a marketing page, a standalone widget host —

package/dist/css/base.css

@@ -28,16 +28,21 @@
   --base-hover-bg: #e9ecef;
   --base-active-bg: rgb(85.5830753354%, 87.5490196078%, 89.5149638803%);
   --base-disabled-bg: #e9ecef;
-  --base-elevated-bg: #f5f5f5;
+  --base-elevated-bg: #f8f9fa;
+  --base-text-inverted: #ffffff;
   --base-border-color: #e1e5e9;
   --base-border: 1px solid #e1e5e9;
+  --base-checkbox-border-color: #e1e5e9;
   --base-input-bg: #ffffff;
   --base-input-color: #495057;
   --base-input-border: 1px solid #ced4da;
+  --base-input-border-color: #ced4da;
   --base-input-border-hover: 1px solid #b8bfc6;
   --base-input-border-focus: 1px solid #007bff;
   --base-input-placeholder-color: #a3b1bf;
   --base-input-bg-disabled: rgba(255, 255, 255, 0.5);
+  --base-input-clear-color: #7a8a99;
+  --base-input-clear-bg-hover: #e9ecef;
   --base-input-size-xs-height: 3.1;
   --base-input-size-sm-height: 3.3;
   --base-input-size-md-height: 3.5;
@@ -48,7 +53,9 @@
   --base-dropdown-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
   --base-tooltip-bg: #2c3e50;
   --base-tooltip-text-color: #ffffff;
+  --base-tooltip-color: #ffffff;
   --base-success-color: #22c55e;
+  --base-success-bg: #22c55e;
   --base-success-color-hover: rgb(10.3896103896%, 60.1986249045%, 28.7242169595%);
   --base-success-bg-light: rgba(34, 197, 94, 0.1);
   --base-success-bg-subtle: rgba(34, 197, 94, 0.08);
@@ -57,6 +64,7 @@
   --base-success-text-light: #d4edda;
   --base-text-on-success: #ffffff;
   --base-danger-color: #ef4444;
+  --base-danger-bg: #ef4444;
   --base-danger-color-hover: rgb(92.1491355163%, 8.2430213465%, 8.2430213465%);
   --base-danger-bg-light: rgba(239, 68, 68, 0.1);
   --base-danger-bg-subtle: rgba(239, 68, 68, 0.08);
@@ -65,6 +73,7 @@
   --base-danger-text-light: #f8d7da;
   --base-text-on-danger: #ffffff;
   --base-warning-color: #f97316;
+  --base-warning-bg: #f97316;
   --base-warning-color-hover: rgb(84.1086225285%, 35.7371400443%, 2.1658872754%);
   --base-warning-bg-light: rgba(249, 115, 22, 0.1);
   --base-warning-bg-subtle: rgba(249, 115, 22, 0.08);
@@ -103,13 +112,14 @@
   --base-border-radius-sm: 0.4;
   --base-border-radius-md: 0.6;
   --base-border-radius-lg: 0.8;
+  --base-rem: 1rem;
   color-scheme: light;
-  --pc-main-bg: #f8f9fa;
-  --pc-page-bg: #f8f9fa;
-  --pc-subtle-bg: #ffffff;
-  --pc-text-color-1: #2c3e50;
-  --pc-text-color-2: #6c757d;
-  --pc-accent: #007bff;
+  --pc-main-bg: #ffffff;
+  --pc-page-bg: var(--base-page-bg, #f8f9fa);
+  --pc-subtle-bg: #e9ecef;
+  --pc-text-color-1: var(--base-text-color-1, #2c3e50);
+  --pc-text-color-2: var(--base-text-color-2, #6c757d);
+  --pc-accent: var(--base-accent-color, #007bff);
   --pc-accent-hover: rgba(0, 123, 255, 0.12);
   --pc-accent-light: color-mix(in srgb, var(--pc-accent) 5%, transparent);
   --pc-link-color: var(--pc-accent);

package/dist/css/pure-css.css

@@ -91,7 +91,7 @@ body {
   font-family: var(--base-font-family);
   font-size: 1.6rem;
   color: var(--pc-text-color-1);
-  background-color: var(--pc-main-bg);
+  background-color: var(--pc-page-bg);
   line-height: 1.5;
 }
 
@@ -111,14 +111,14 @@ label {
 }
 
 *::-webkit-scrollbar-track {
-  background: var(--pc-main-bg);
+  background: var(--pc-page-bg);
   border-radius: var(--pc-border-radius-sm);
 }
 
 *::-webkit-scrollbar-thumb {
   background: var(--pc-border-color);
   border-radius: var(--pc-border-radius-sm);
-  border: 1px solid var(--pc-main-bg);
+  border: 1px solid var(--pc-page-bg);
 }
 *::-webkit-scrollbar-thumb:hover {
   background: var(--pc-accent);
@@ -128,13 +128,13 @@ label {
 }
 
 *::-webkit-scrollbar-corner {
-  background: var(--pc-main-bg);
+  background: var(--pc-page-bg);
 }
 
 /* Firefox */
 * {
   scrollbar-width: thin;
-  scrollbar-color: var(--pc-border-color) var(--pc-main-bg);
+  scrollbar-color: var(--pc-border-color) var(--pc-page-bg);
 }
 
 .pc-row {
@@ -2423,7 +2423,7 @@ body.loaded .pc-sidebar__link {
   width: calc(100% - 0.8rem * 2);
   margin: 0.8rem;
   height: 3.5rem;
-  padding: 0 1.6rem;
+  padding: 0 1.6rem 0 0.8rem;
   color: var(--pc-text-color-2);
   background-color: var(--pc-input-bg, var(--base-input-bg));
   border: 1px solid var(--pc-border-color);
@@ -2442,7 +2442,7 @@ body.loaded .pc-sidebar__search {
   border-color: #007bff;
   color: var(--pc-sidebar-text, var(--base-text-color-1));
 }
-.pc-layout__sidebar--icon-collapse .pc-sidebar__search {
+.sidebar-hidden .pc-layout__sidebar--icon-collapse .pc-sidebar__search {
   width: auto;
   margin: 0;
   padding: 0.8rem 1.6rem;
@@ -2486,10 +2486,10 @@ body.loaded .pc-sidebar__search {
 .pc-sidebar__search--input .pc-sidebar__search-field::-webkit-search-decoration, .pc-sidebar__search--input .pc-sidebar__search-field::-webkit-search-cancel-button {
   -webkit-appearance: none;
 }
-.pc-layout__sidebar--icon-collapse .pc-sidebar__search--input {
+.sidebar-hidden .pc-layout__sidebar--icon-collapse .pc-sidebar__search--input {
   justify-content: center;
 }
-.pc-layout__sidebar--icon-collapse .pc-sidebar__search--input .pc-sidebar__search-field {
+.sidebar-hidden .pc-layout__sidebar--icon-collapse .pc-sidebar__search--input .pc-sidebar__search-field {
   display: none;
 }
 .pc-sidebar__toggle {
@@ -2806,7 +2806,7 @@ body.pc-layout--sticky {
 .pc-layout {
   max-width: 100%;
   margin: 4.8rem auto 0;
-  background-color: var(--pc-main-bg);
+  background-color: var(--pc-page-bg);
   overflow: visible;
   display: flex;
   flex-direction: column;
@@ -5961,16 +5961,21 @@ body.pc-layout--sticky .pc-layout__inner {
   --base-hover-bg: #e9ecef;
   --base-active-bg: rgb(85.5830753354%, 87.5490196078%, 89.5149638803%);
   --base-disabled-bg: #e9ecef;
-  --base-elevated-bg: #f5f5f5;
+  --base-elevated-bg: #f8f9fa;
+  --base-text-inverted: #ffffff;
   --base-border-color: #e1e5e9;
   --base-border: 1px solid #e1e5e9;
+  --base-checkbox-border-color: #e1e5e9;
   --base-input-bg: #ffffff;
   --base-input-color: #495057;
   --base-input-border: 1px solid #ced4da;
+  --base-input-border-color: #ced4da;
   --base-input-border-hover: 1px solid #b8bfc6;
   --base-input-border-focus: 1px solid #007bff;
   --base-input-placeholder-color: #a3b1bf;
   --base-input-bg-disabled: rgba(255, 255, 255, 0.5);
+  --base-input-clear-color: #7a8a99;
+  --base-input-clear-bg-hover: #e9ecef;
   --base-input-size-xs-height: 3.1;
   --base-input-size-sm-height: 3.3;
   --base-input-size-md-height: 3.5;
@@ -5981,7 +5986,9 @@ body.pc-layout--sticky .pc-layout__inner {
   --base-dropdown-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
   --base-tooltip-bg: #2c3e50;
   --base-tooltip-text-color: #ffffff;
+  --base-tooltip-color: #ffffff;
   --base-success-color: #22c55e;
+  --base-success-bg: #22c55e;
   --base-success-color-hover: rgb(10.3896103896%, 60.1986249045%, 28.7242169595%);
   --base-success-bg-light: rgba(34, 197, 94, 0.1);
   --base-success-bg-subtle: rgba(34, 197, 94, 0.08);
@@ -5990,6 +5997,7 @@ body.pc-layout--sticky .pc-layout__inner {
   --base-success-text-light: #d4edda;
   --base-text-on-success: #ffffff;
   --base-danger-color: #ef4444;
+  --base-danger-bg: #ef4444;
   --base-danger-color-hover: rgb(92.1491355163%, 8.2430213465%, 8.2430213465%);
   --base-danger-bg-light: rgba(239, 68, 68, 0.1);
   --base-danger-bg-subtle: rgba(239, 68, 68, 0.08);
@@ -5998,6 +6006,7 @@ body.pc-layout--sticky .pc-layout__inner {
   --base-danger-text-light: #f8d7da;
   --base-text-on-danger: #ffffff;
   --base-warning-color: #f97316;
+  --base-warning-bg: #f97316;
   --base-warning-color-hover: rgb(84.1086225285%, 35.7371400443%, 2.1658872754%);
   --base-warning-bg-light: rgba(249, 115, 22, 0.1);
   --base-warning-bg-subtle: rgba(249, 115, 22, 0.08);
@@ -6036,13 +6045,14 @@ body.pc-layout--sticky .pc-layout__inner {
   --base-border-radius-sm: 0.4;
   --base-border-radius-md: 0.6;
   --base-border-radius-lg: 0.8;
+  --base-rem: 1rem;
   color-scheme: light;
-  --pc-main-bg: #f8f9fa;
-  --pc-page-bg: #f8f9fa;
-  --pc-subtle-bg: #ffffff;
-  --pc-text-color-1: #2c3e50;
-  --pc-text-color-2: #6c757d;
-  --pc-accent: #007bff;
+  --pc-main-bg: #ffffff;
+  --pc-page-bg: var(--base-page-bg, #f8f9fa);
+  --pc-subtle-bg: #e9ecef;
+  --pc-text-color-1: var(--base-text-color-1, #2c3e50);
+  --pc-text-color-2: var(--base-text-color-2, #6c757d);
+  --pc-accent: var(--base-accent-color, #007bff);
   --pc-accent-hover: rgba(0, 123, 255, 0.12);
   --pc-accent-light: color-mix(in srgb, var(--pc-accent) 5%, transparent);
   --pc-link-color: var(--pc-accent);

package/dist/css/reboot.css

@@ -80,7 +80,7 @@ body {
   font-family: var(--base-font-family);
   font-size: 1.6rem;
   color: var(--pc-text-color-1);
-  background-color: var(--pc-main-bg);
+  background-color: var(--pc-page-bg);
   line-height: 1.5;
 }
 

package/dist/css/scrollbars.css

@@ -5,14 +5,14 @@
 }
 
 *::-webkit-scrollbar-track {
-  background: var(--pc-main-bg);
+  background: var(--pc-page-bg);
   border-radius: var(--pc-border-radius-sm);
 }
 
 *::-webkit-scrollbar-thumb {
   background: var(--pc-border-color);
   border-radius: var(--pc-border-radius-sm);
-  border: 1px solid var(--pc-main-bg);
+  border: 1px solid var(--pc-page-bg);
 }
 *::-webkit-scrollbar-thumb:hover {
   background: var(--pc-accent);
@@ -22,11 +22,11 @@
 }
 
 *::-webkit-scrollbar-corner {
-  background: var(--pc-main-bg);
+  background: var(--pc-page-bg);
 }
 
 /* Firefox */
 * {
   scrollbar-width: thin;
-  scrollbar-color: var(--pc-border-color) var(--pc-main-bg);
+  scrollbar-color: var(--pc-border-color) var(--pc-page-bg);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@keenmate/pure-css",
-  "version": "1.0.0-rc06",
+  "version": "1.0.0-rc07",
   "description": "The KeenMate CSS foundation — --base-* theming contract, PureCSS grid and utility classes. Extracted from pure-admin-core so docs sites, standalone pages and every web/svelte component share one theming layer.",
   "style": "dist/css/pure-css.css",
   "exports": {

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

@@ -47,18 +47,25 @@
   --base-disabled-bg: #{$base-disabled-bg};
   --base-elevated-bg: #{$base-elevated-bg};
 
+  // === Text on inverse surfaces ===
+  --base-text-inverted: #{$base-text-inverted};
+
   // === Border Colors ===
   --base-border-color: #{$base-border-color};
   --base-border: #{$base-border};
+  --base-checkbox-border-color: #{$base-checkbox-border-color};
 
   // === Input Fields ===
   --base-input-bg: #{$base-input-bg};
   --base-input-color: #{$base-input-color};
   --base-input-border: #{$base-input-border};
+  --base-input-border-color: #{$base-input-border-color};
   --base-input-border-hover: #{$base-input-border-hover};
   --base-input-border-focus: #{$base-input-border-focus};
   --base-input-placeholder-color: #{$base-input-placeholder-color};
   --base-input-bg-disabled: #{$base-input-bg-disabled};
+  --base-input-clear-color: #{$base-input-clear-color};
+  --base-input-clear-bg-hover: #{$base-input-clear-bg-hover};
 
   // === Input Size Heights ===
   --base-input-size-xs-height: #{$base-input-size-xs-height};
@@ -75,9 +82,11 @@
   // === Tooltip ===
   --base-tooltip-bg: #{$base-tooltip-bg};
   --base-tooltip-text-color: #{$base-tooltip-text-color};
+  --base-tooltip-color: #{$base-tooltip-text-color};  // alias consumed by web-grid
 
   // === Contextual Colors - Success ===
   --base-success-color: #{$base-success-color};
+  --base-success-bg: #{$base-success-bg};
   --base-success-color-hover: #{$base-success-color-hover};
   --base-success-bg-light: #{$base-success-bg-light};
   --base-success-bg-subtle: #{$base-success-bg-subtle};
@@ -88,6 +97,7 @@
 
   // === Contextual Colors - Danger ===
   --base-danger-color: #{$base-danger-color};
+  --base-danger-bg: #{$base-danger-bg};
   --base-danger-color-hover: #{$base-danger-color-hover};
   --base-danger-bg-light: #{$base-danger-bg-light};
   --base-danger-bg-subtle: #{$base-danger-bg-subtle};
@@ -98,6 +108,7 @@
 
   // === Contextual Colors - Warning ===
   --base-warning-color: #{$base-warning-color};
+  --base-warning-bg: #{$base-warning-bg};
   --base-warning-color-hover: #{$base-warning-color-hover};
   --base-warning-bg-light: #{$base-warning-bg-light};
   --base-warning-bg-subtle: #{$base-warning-bg-subtle};
@@ -144,6 +155,9 @@
   --base-border-radius-sm: #{$base-border-radius-sm};
   --base-border-radius-md: #{$base-border-radius-md};
   --base-border-radius-lg: #{$base-border-radius-lg};
+
+  // === Rem base for web components ===
+  --base-rem: #{$base-rem};
 }
 
 // ============================================================================
@@ -209,17 +223,20 @@
   // to the `.pc-mode-dark` block.
   color-scheme: #{$theme-color-scheme};
 
-  // Surfaces
+  // Surfaces. NOTE: pure-admin's --pc-main-bg is the *page* surface and
+  // --pc-subtle-bg the *card* surface — a legacy naming inversion vs the
+  // --base-* model (--base-main-bg = card), so those two stay compile-time to
+  // avoid a value flip. --pc-page-bg maps cleanly and is relinked.
   --pc-main-bg: #{$main-bg};
-  --pc-page-bg: #{$page-bg};
+  --pc-page-bg: var(--base-page-bg, #{$page-bg});
   --pc-subtle-bg: #{$subtle-bg};
 
-  // Text
-  --pc-text-color-1: #{$text-color-1};
-  --pc-text-color-2: #{$text-color-2};
+  // Text — follow the shared --base-* tokens at runtime.
+  --pc-text-color-1: var(--base-text-color-1, #{$text-color-1});
+  --pc-text-color-2: var(--base-text-color-2, #{$text-color-2});
 
   // Accent — -light derives from --pc-accent at runtime so theme overrides cascade.
-  --pc-accent: #{$accent-color};
+  --pc-accent: var(--base-accent-color, #{$accent-color});
   --pc-accent-hover: #{$accent-hover};
   --pc-accent-light: color-mix(in srgb, var(--pc-accent) 5%, transparent);
 
@@ -335,6 +352,14 @@
   // LAYOUT COLORS
   // =========================================================================
 
+  // The app shell (navbar / sidebar / footer) is a DISTINCT brand surface: a
+  // theme sets its own $navbar-bg / $sidebar-bg / $footer-bg (e.g. Express's
+  // yellow bar), independent of the --base-* card/page palette. So emit these
+  // compile-time — NOT `var(--base-main-bg, …)`, which would let the always-set
+  // --base-main-bg win and erase the brand colour. The standalone (base.css
+  // only) fallback lives where it belongs: the shell CSS itself resolves
+  // `var(--pc-navbar-bg, var(--base-main-bg))` when no --pc-* is emitted.
+
   // Navbar
   --pc-navbar-bg: #{$navbar-bg};
   --pc-navbar-border-color: #{$navbar-border-color};
@@ -360,10 +385,10 @@
   // =========================================================================
 
   // Primary (uses accent color)
-  --pc-btn-primary-bg: #{$btn-primary-bg};
-  --pc-btn-primary-bg-hover: #{$btn-primary-bg-hover};
+  --pc-btn-primary-bg: var(--base-accent-color, #{$btn-primary-bg});
+  --pc-btn-primary-bg-hover: var(--base-accent-color-hover, #{$btn-primary-bg-hover});
   --pc-btn-primary-bg-light: color-mix(in srgb, var(--pc-btn-primary-bg) 5%, transparent);
-  --pc-btn-primary-text: #{$btn-primary-text};
+  --pc-btn-primary-text: var(--base-text-color-on-accent, #{$btn-primary-text});
 
   // Secondary
   --pc-btn-secondary-bg: #{$btn-secondary-bg};
@@ -373,28 +398,28 @@
 
   // Success — bg references role colour for runtime cascade
   --pc-btn-success-bg: var(--pc-success);
-  --pc-btn-success-bg-hover: #{$btn-success-bg-hover};
-  --pc-btn-success-text: #{$btn-success-text};
+  --pc-btn-success-bg-hover: var(--base-success-color-hover, #{$btn-success-bg-hover});
+  --pc-btn-success-text: var(--base-text-on-success, #{$btn-success-text});
 
   // Danger — bg references role colour for runtime cascade
   --pc-btn-danger-bg: var(--pc-danger);
-  --pc-btn-danger-bg-hover: #{$btn-danger-bg-hover};
-  --pc-btn-danger-text: #{$btn-danger-text};
+  --pc-btn-danger-bg-hover: var(--base-danger-color-hover, #{$btn-danger-bg-hover});
+  --pc-btn-danger-text: var(--base-text-on-danger, #{$btn-danger-text});
 
   // Warning — bg references role colour for runtime cascade
   --pc-btn-warning-bg: var(--pc-warning);
-  --pc-btn-warning-bg-hover: #{$btn-warning-bg-hover};
-  --pc-btn-warning-text: #{$btn-warning-text};
+  --pc-btn-warning-bg-hover: var(--base-warning-color-hover, #{$btn-warning-bg-hover});
+  --pc-btn-warning-text: var(--base-text-on-warning, #{$btn-warning-text});
 
   // Info — bg references role colour for runtime cascade
   --pc-btn-info-bg: var(--pc-info);
-  --pc-btn-info-bg-hover: #{$btn-info-bg-hover};
-  --pc-btn-info-text: #{$btn-info-text};
+  --pc-btn-info-bg-hover: var(--base-info-color-hover, #{$btn-info-bg-hover});
+  --pc-btn-info-text: var(--base-text-on-info, #{$btn-info-text});
 
   // Light
-  --pc-btn-light-bg: #{$btn-light-bg};
-  --pc-btn-light-bg-hover: #{$btn-light-bg-hover};
-  --pc-btn-light-text: #{$btn-light-text};
+  --pc-btn-light-bg: var(--base-page-bg, #{$btn-light-bg});
+  --pc-btn-light-bg-hover: var(--base-subtle-bg, #{$btn-light-bg-hover});
+  --pc-btn-light-text: var(--base-text-color-1, #{$btn-light-text});
 
   // Dark
   --pc-btn-dark-bg: #{$btn-dark-bg};
@@ -408,81 +433,81 @@
   // --pc-{success,danger,warning,info}-text live in the base contract.)
   // =========================================================================
   --pc-success-bg: var(--pc-success);
-  --pc-success-bg-hover: #{$success-bg-hover};
+  --pc-success-bg-hover: var(--base-success-color-hover, #{$success-bg-hover});
   --pc-success-bg-light: color-mix(in srgb, var(--pc-success) 10%, transparent);
   --pc-success-bg-subtle: color-mix(in srgb, var(--pc-success) 8%, transparent);
   --pc-success-border: color-mix(in srgb, var(--pc-success) 20%, transparent);
-  --pc-success-text-light: #{$success-text-light};
+  --pc-success-text-light: var(--base-success-text-light, #{$success-text-light});
 
   --pc-danger-bg: var(--pc-danger);
-  --pc-danger-bg-hover: #{$danger-bg-hover};
+  --pc-danger-bg-hover: var(--base-danger-color-hover, #{$danger-bg-hover});
   --pc-danger-bg-light: color-mix(in srgb, var(--pc-danger) 10%, transparent);
   --pc-danger-bg-subtle: color-mix(in srgb, var(--pc-danger) 8%, transparent);
   --pc-danger-border: color-mix(in srgb, var(--pc-danger) 20%, transparent);
-  --pc-danger-text-light: #{$danger-text-light};
+  --pc-danger-text-light: var(--base-danger-text-light, #{$danger-text-light});
 
   --pc-warning-bg: var(--pc-warning);
-  --pc-warning-bg-hover: #{$warning-bg-hover};
+  --pc-warning-bg-hover: var(--base-warning-color-hover, #{$warning-bg-hover});
   --pc-warning-bg-light: color-mix(in srgb, var(--pc-warning) 10%, transparent);
   --pc-warning-bg-subtle: color-mix(in srgb, var(--pc-warning) 8%, transparent);
   --pc-warning-border: color-mix(in srgb, var(--pc-warning) 20%, transparent);
-  --pc-warning-text-light: #{$warning-text-light};
+  --pc-warning-text-light: var(--base-warning-text-light, #{$warning-text-light});
 
   --pc-info-bg: var(--pc-info);
-  --pc-info-bg-hover: #{$info-bg-hover};
+  --pc-info-bg-hover: var(--base-info-color-hover, #{$info-bg-hover});
   --pc-info-bg-light: color-mix(in srgb, var(--pc-info) 10%, transparent);
   --pc-info-bg-subtle: color-mix(in srgb, var(--pc-info) 8%, transparent);
   --pc-info-border: color-mix(in srgb, var(--pc-info) 20%, transparent);
-  --pc-info-text-light: #{$info-text-light};
+  --pc-info-text-light: var(--base-info-text-light, #{$info-text-light});
 
   // =========================================================================
   // CARD COLORS
   // =========================================================================
-  --pc-card-bg: #{$card-bg};
-  --pc-card-header-bg: #{$card-header-bg};
-  --pc-card-footer-bg: #{$card-footer-bg};
-  --pc-card-tabs-bg: #{$card-tabs-bg};
+  --pc-card-bg: var(--base-main-bg, #{$card-bg});
+  --pc-card-header-bg: var(--base-elevated-bg, #{$card-header-bg});
+  --pc-card-footer-bg: var(--base-main-bg, #{$card-footer-bg});
+  --pc-card-tabs-bg: var(--base-elevated-bg, #{$card-tabs-bg});
 
   // =========================================================================
   // INPUT/FORM COLORS
   // =========================================================================
-  --pc-input-bg: #{$input-bg};
-  --pc-input-border: #{$input-border};
-  --pc-input-text: #{$input-text};
-  --pc-input-focus-border-color: #{$input-focus-border-color};
-  --pc-select-focus-border-color: #{$select-focus-border-color};
-  --pc-textarea-focus-border-color: #{$textarea-focus-border-color};
-
-  // Checkbox
-  --pc-checkbox-border-color: #{$checkbox-border-color};
-  --pc-checkbox-border-color-hover: #{$checkbox-border-color-hover};
-  --pc-checkbox-border-color-checked: #{$checkbox-border-color-checked};
-  --pc-checkbox-bg: #{$checkbox-bg};
-  --pc-checkbox-bg-checked: #{$checkbox-bg-checked};
-  --pc-checkbox-bg-indeterminate: #{$checkbox-bg-indeterminate};
+  --pc-input-bg: var(--base-input-bg, #{$input-bg});
+  --pc-input-border: var(--base-input-border-color, #{$input-border});
+  --pc-input-text: var(--base-input-color, #{$input-text});
+  --pc-input-focus-border-color: var(--base-accent-color, #{$input-focus-border-color});
+  --pc-select-focus-border-color: var(--base-accent-color, #{$select-focus-border-color});
+  --pc-textarea-focus-border-color: var(--base-accent-color, #{$textarea-focus-border-color});
+
+  // Checkbox (checkmark colour + focus shadow stay compile-time)
+  --pc-checkbox-border-color: var(--base-checkbox-border-color, #{$checkbox-border-color});
+  --pc-checkbox-border-color-hover: var(--base-accent-color, #{$checkbox-border-color-hover});
+  --pc-checkbox-border-color-checked: var(--base-accent-color, #{$checkbox-border-color-checked});
+  --pc-checkbox-bg: var(--base-input-bg, #{$checkbox-bg});
+  --pc-checkbox-bg-checked: var(--base-accent-color, #{$checkbox-bg-checked});
+  --pc-checkbox-bg-indeterminate: var(--base-accent-color, #{$checkbox-bg-indeterminate});
   --pc-checkbox-checkmark-color: #{$checkbox-checkmark-color};
   --pc-checkbox-focus-shadow: #{$checkbox-focus-shadow};
 
-  // Input group
+  // Input group (prepend/append bg are the secondary grey — compile-time)
   --pc-input-group-prepend-bg: #{$input-group-prepend-bg};
-  --pc-input-group-prepend-text: #{$input-group-prepend-text};
+  --pc-input-group-prepend-text: var(--base-text-color-2, #{$input-group-prepend-text});
   --pc-input-group-append-bg: #{$input-group-append-bg};
-  --pc-input-group-append-text: #{$input-group-append-text};
+  --pc-input-group-append-text: var(--base-text-color-2, #{$input-group-append-text});
 
   // =========================================================================
   // TABLE COLORS
   // =========================================================================
-  --pc-table-bg: #{$table-bg};
-  --pc-table-header-bg: #{$table-header-bg};
-  --pc-table-stripe: #{$table-stripe};
-  --pc-table-hover-bg: #{$table-hover-bg};
-  --pc-table-hover-accent-color: #{$table-hover-accent-color};
+  --pc-table-bg: var(--base-main-bg, #{$table-bg});
+  --pc-table-header-bg: var(--base-elevated-bg, #{$table-header-bg});
+  --pc-table-stripe: var(--base-elevated-bg, #{$table-stripe});
+  --pc-table-hover-bg: var(--base-hover-bg, #{$table-hover-bg});
+  --pc-table-hover-accent-color: var(--base-accent-color, #{$table-hover-accent-color});
 
   // =========================================================================
   // MODAL COLORS
   // =========================================================================
-  --pc-modal-overlay-bg: #{$modal-overlay-bg};
-  --pc-modal-content-bg: #{$modal-content-bg};
+  --pc-modal-overlay-bg: var(--base-overlay-bg, #{$modal-overlay-bg});
+  --pc-modal-content-bg: var(--base-main-bg, #{$modal-content-bg});
 
   // =========================================================================
   // BADGE COLORS
@@ -505,9 +530,9 @@
   // =========================================================================
   // TOOLTIP & POPOVER COLORS
   // =========================================================================
-  --pc-tooltip-bg: #{$tooltip-bg};
-  --pc-tooltip-text: #{$tooltip-text};
-  --pc-popover-content-bg: #{$popover-content-bg};
+  --pc-tooltip-bg: var(--base-tooltip-bg, #{$tooltip-bg});
+  --pc-tooltip-text: var(--base-tooltip-text-color, #{$tooltip-text});
+  --pc-popover-content-bg: var(--base-dropdown-bg, #{$popover-content-bg});
   --pc-popover-text-light: #{$popover-text-light};
   --pc-popover-text-dark: #{$popover-text-dark};
 
@@ -536,22 +561,22 @@
   --pc-command-palette-item-active-bg: #{$command-palette-item-active-bg};
   --pc-command-palette-highlight-bg: #{$command-palette-highlight-bg};
   --pc-command-palette-highlight-text: #{$command-palette-highlight-text};
-  --pc-command-palette-key-bg: #{$subtle-bg};
-  --pc-command-palette-key-text: #{$text-color-1};
+  --pc-command-palette-key-bg: var(--base-subtle-bg, #{$subtle-bg});
+  --pc-command-palette-key-text: var(--base-text-color-1, #{$text-color-1});
   --pc-command-palette-key-font-size: #{$font-size-xs};
   --pc-command-palette-key-font-weight: #{$font-weight-semibold};
 
   // =========================================================================
   // MULTISELECT COLORS
   // =========================================================================
-  --pc-multiselect-dropdown-bg: #{$multiselect-dropdown-bg};
-  --pc-multiselect-dropdown-border: #{$multiselect-dropdown-border};
-  --pc-multiselect-dropdown-text: #{$multiselect-dropdown-text};
-  --pc-multiselect-hint-bg: #{$multiselect-hint-bg};
-  --pc-multiselect-hint-border: #{$multiselect-hint-border};
-  --pc-multiselect-option-hover-bg: #{$multiselect-option-hover-bg};
-  --pc-multiselect-pill-bg: #{$multiselect-pill-bg};
-  --pc-multiselect-pill-border: #{$multiselect-pill-border};
+  --pc-multiselect-dropdown-bg: var(--base-dropdown-bg, #{$multiselect-dropdown-bg});
+  --pc-multiselect-dropdown-border: var(--base-border-color, #{$multiselect-dropdown-border});
+  --pc-multiselect-dropdown-text: var(--base-text-color-1, #{$multiselect-dropdown-text});
+  --pc-multiselect-hint-bg: var(--base-page-bg, #{$multiselect-hint-bg});
+  --pc-multiselect-hint-border: var(--base-border-color, #{$multiselect-hint-border});
+  --pc-multiselect-option-hover-bg: var(--base-hover-bg, #{$multiselect-option-hover-bg});
+  --pc-multiselect-pill-bg: var(--base-accent-color-light, #{$multiselect-pill-bg});
+  --pc-multiselect-pill-border: var(--base-accent-color, #{$multiselect-pill-border});
 
   // =========================================================================
   // FORM SPACING — the complete anatomy of a form's spacing. Runtime-tunable;

package/src/scss/_layout-container.scss

@@ -14,7 +14,7 @@ body.pc-layout--sticky {
 .pc-layout {
   max-width: 100%;
   margin: $navbar-height auto 0;
-  background-color: var(--pc-main-bg);
+  background-color: var(--pc-page-bg);
   overflow: visible; // Allow tooltips to escape
   display: flex;
   flex-direction: column;

package/src/scss/_sidebar.scss

@@ -191,11 +191,13 @@ body.pc-layout--sticky .pc-layout__sidebar {
     // Sized on the md input height (35px) to match the navbar search boxes,
     // rather than the icon + $sidebar-padding metric of a nav row (40px). Trade-off:
     // it sits ~5px shorter than the links below it. Block padding is dropped (fixed
-    // height + align-items:center owns the vertical); inline uses $spacing-base
-    // (the inline half of the two-value $sidebar-padding — don't pass that token to
-    // a single axis).
+    // height + align-items:center owns the vertical).
+    // Inline padding: right = $spacing-base (the nav-row inset); left = $spacing-sm
+    // so that margin ($spacing-sm) + padding-left ($spacing-sm) = $spacing-base —
+    // landing the magnifier exactly where the nav-row icons below it sit, instead
+    // of one box-margin too far in.
     height: #{$base-input-size-md-height}rem;
-    padding: 0 $spacing-base;
+    padding: 0 $spacing-base 0 $spacing-sm;
     color: var(--pc-text-color-2);
     background-color: var(--pc-input-bg, var(--base-input-bg));
     border: $border-width-base solid var(--pc-border-color);
@@ -219,9 +221,13 @@ body.pc-layout--sticky .pc-layout__sidebar {
       color: var(--pc-sidebar-text, var(--base-text-color-1));
     }
 
-    // Collapsed sidebar: drop the frame, icon-only, matching link padding so the
-    // icon lands in the same column as every other sidebar icon.
-    .pc-layout__sidebar--icon-collapse & {
+    // Collapsed rail ONLY (icon-collapse mode AND actually collapsed, i.e.
+    // body.sidebar-hidden): drop the frame, icon-only, matching link padding so
+    // the icon lands in the same column as every other sidebar icon. Must be
+    // gated by .sidebar-hidden — .pc-layout__sidebar--icon-collapse is the MODE
+    // class and stays on the element while the rail is expanded, so an unscoped
+    // rule would strip the search frame in the expanded state too.
+    .sidebar-hidden .pc-layout__sidebar--icon-collapse & {
       width: auto;
       margin: 0;
       padding: $sidebar-padding;
@@ -283,9 +289,11 @@ body.pc-layout--sticky .pc-layout__sidebar {
       }
     }
 
-    // Collapsed rail: the input variant sheds its field and centres on the submit
-    // icon; clicking it submits with an empty query (the bare results page).
-    .pc-layout__sidebar--icon-collapse &--input {
+    // Collapsed rail ONLY: the input variant sheds its field and centres on the
+    // submit icon; clicking it submits with an empty query (the bare results
+    // page). Gated by .sidebar-hidden so the field reappears when the icon-collapse
+    // rail is expanded (see frame rule above for why the mode class isn't enough).
+    .sidebar-hidden .pc-layout__sidebar--icon-collapse &--input {
       justify-content: center;
 
       .pc-sidebar__search-field {

package/src/scss/reboot.scss

@@ -119,7 +119,7 @@ body {
   font-family: var(--base-font-family);
   font-size: 1.6rem; // 16px default text (with 10px rem base)
   color: var(--pc-text-color-1);
-  background-color: var(--pc-main-bg);
+  background-color: var(--pc-page-bg);
   line-height: $line-height-base;
 }
 

package/src/scss/scrollbars.scss

@@ -19,14 +19,14 @@
 }
 
 *::-webkit-scrollbar-track {
-  background: var(--pc-main-bg);
+  background: var(--pc-page-bg);
   border-radius: var(--pc-border-radius-sm);
 }
 
 *::-webkit-scrollbar-thumb {
   background: var(--pc-border-color);
   border-radius: var(--pc-border-radius-sm);
-  border: $border-width-base solid var(--pc-main-bg);
+  border: $border-width-base solid var(--pc-page-bg);
 
   &:hover {
     background: var(--pc-accent);
@@ -38,11 +38,11 @@
 }
 
 *::-webkit-scrollbar-corner {
-  background: var(--pc-main-bg);
+  background: var(--pc-page-bg);
 }
 
 /* Firefox */
 * {
   scrollbar-width: thin;
-  scrollbar-color: var(--pc-border-color) var(--pc-main-bg);
+  scrollbar-color: var(--pc-border-color) var(--pc-page-bg);
 }

package/src/scss/variables/_base.scss

@@ -43,7 +43,12 @@ $base-subtle-bg: #e9ecef !default;        // Muted areas, dividers
 $base-inverse-bg: #2c3e50 !default;       // Inverse background (tooltips, dark elements)
 $base-overlay-bg: rgba(0, 0, 0, 0.5) !default;  // Modal/overlay background
 $base-shadow-color: rgba(0, 0, 0, 0.15) !default;  // Shadow color for elevation
-$base-elevated-bg: #f5f5f5 !default;  // Header row, striped rows, elevated surfaces
+// Elevated surface (header rows, striped rows, popovers/toolbars). Defaults to
+// the page background so the default theme's header appearance is unchanged, but
+// themes can override it independently to create a distinct raised tone.
+$base-elevated-bg: $base-page-bg !default;
+// Text on inverse/dark surfaces (web-component bridge: --base-text-inverted).
+$base-text-inverted: #ffffff !default;
 
 // Interactive state backgrounds
 $base-hover-bg: $base-subtle-bg !default;         // Hover state background
@@ -57,6 +62,8 @@ $base-disabled-bg: $base-subtle-bg !default;      // Disabled element background
 
 $base-border-color: #e1e5e9 !default;
 $base-border: 1px solid $base-border-color !default;
+// Checkbox/radio border (web-component bridge: --base-checkbox-border-color).
+$base-checkbox-border-color: $base-border-color !default;
 
 // =============================================================================
 // INPUT FIELDS
@@ -65,11 +72,20 @@ $base-border: 1px solid $base-border-color !default;
 
 $base-input-bg: $base-main-bg !default;
 $base-input-color: #495057 !default;
-$base-input-border: 1px solid #ced4da !default;
+// Input border as a colour (single source) + the 1px shorthand web components
+// read via --base-input-border. Note: pure-admin's own inputs currently border
+// off --base-border-color (#e1e5e9), not this (#ced4da) — a deliberate divergence
+// kept to preserve appearance; see _colors.scss $input-border.
+$base-input-border-color: #ced4da !default;
+$base-input-border: 1px solid $base-input-border-color !default;
 $base-input-border-hover: 1px solid #b8bfc6 !default;
 $base-input-border-focus: 1px solid $base-accent-color !default;
 $base-input-placeholder-color: $base-text-color-4 !default;
 $base-input-bg-disabled: rgba($base-input-bg, 0.5) !default;
+// Inline clear ("×") affordance inside inputs (web-component bridge:
+// --base-input-clear-color / --base-input-clear-bg-hover).
+$base-input-clear-color: $base-text-color-3 !default;
+$base-input-clear-bg-hover: $base-hover-bg !default;
 
 // Input size heights (unitless multipliers for x10px base)
 $base-input-size-xs-height: 3.1 !default;  // 31px
@@ -101,6 +117,7 @@ $base-tooltip-text-color: #ffffff !default;
 // =============================================================================
 
 $base-success-color: #22c55e !default;  // Tailwind green-500 — aligns with --pc-positive in the sentiment scale
+$base-success-bg: $base-success-color !default;  // Solid role fill (web-component bridge: --base-success-bg)
 $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;
@@ -115,6 +132,7 @@ $base-text-on-success: #ffffff !default;
 // =============================================================================
 
 $base-danger-color: #ef4444 !default;  // Tailwind red-500 — aligns with --pc-negative in the sentiment scale
+$base-danger-bg: $base-danger-color !default;  // Solid role fill (web-component bridge: --base-danger-bg)
 $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;
@@ -129,6 +147,7 @@ $base-text-on-danger: #ffffff !default;
 // =============================================================================
 
 $base-warning-color: #f97316 !default;  // Tailwind orange-500 — also serves as the off-target axis in KPI components
+$base-warning-bg: $base-warning-color !default;  // Solid role fill (web-component bridge: --base-warning-bg)
 $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;
@@ -210,6 +229,11 @@ $base-border-radius-sm: 0.4 !default;  // 4px
 $base-border-radius-md: 0.6 !default;  // 6px
 $base-border-radius-lg: 0.8 !default;  // 8px
 
+// Rem base for web components (bridge: --base-rem). They size themselves as
+// `calc(<unitless-multiplier> * var(--base-rem, 10px))`. pure-css pins
+// `html { font-size: 10px }` (reboot), so `1rem` tracks that base adaptively.
+$base-rem: 1rem !default;
+
 // =============================================================================
 // COMPONENT-SPECIFIC DERIVED VALUES
 // Variables that components need, derived from base

package/src/scss/variables/_colors.scss

@@ -12,9 +12,12 @@
 // LAYOUT COLORS (derived from base)
 // =============================================================================
 
-$main-bg: $base-page-bg !default;
+// Surface tokens aligned with --base-*: main = the primary/raised surface (white),
+// page = the canvas behind it (grey), subtle = a muted tone. (Previously main was
+// wired to the page grey and subtle to white — an inversion vs --base-*.)
+$main-bg: $base-main-bg !default;
 $page-bg: $base-page-bg !default;
-$subtle-bg: $base-main-bg !default;
+$subtle-bg: $base-subtle-bg !default;
 $text-color-1: $base-text-color-1 !default;
 $text-color-2: $base-text-color-2 !default;
 $border-color: $base-border-color !default;
@@ -48,27 +51,30 @@ $accent-light: $base-accent-color-light !default;
 // CARD COLORS (derived from base surfaces)
 // =============================================================================
 
+// Body surfaces → main-bg; header/tab chrome → elevated-bg (defaults to page-bg,
+// so unchanged by default; themeable independently). Reconciled so these resolve
+// to the same base tokens the web components read.
 $card-bg: $base-main-bg !default;
-$card-header-bg: $base-page-bg !default;
+$card-header-bg: $base-elevated-bg !default;
 $card-footer-bg: $base-main-bg !default;
-$card-tabs-bg: $base-page-bg !default;
+$card-tabs-bg: $base-elevated-bg !default;
 
 // =============================================================================
 // INPUT COLORS (derived from base input vars)
 // =============================================================================
 
 $input-bg: $base-input-bg !default;
-$input-border: #ced4da !default;  // Extracted from base-input-border
+$input-border: $base-input-border-color !default;  // single-sourced from base (was hardcoded #ced4da)
 $input-text: $base-input-color !default;
 
 // =============================================================================
 // TABLE COLORS (derived from base surfaces)
 // =============================================================================
 
-$table-stripe: $base-page-bg !default;
+$table-stripe: $base-elevated-bg !default;   // striped/elevated rows → elevated-bg (= page-bg default)
 $table-bg: $base-main-bg !default;
-$table-header-bg: $base-page-bg !default;
-$table-hover-bg: $base-page-bg !default;
+$table-header-bg: $base-elevated-bg !default;  // header chrome → elevated-bg (= page-bg default)
+$table-hover-bg: $base-hover-bg !default;     // RECONCILED: was page-bg; now the shared hover surface
 
 // Table row hover accent (border)
 $table-hover-accent-width: 0 !default;
@@ -177,7 +183,7 @@ $tooltip-text: $base-tooltip-text-color !default;
 
 $popover-text-light: #ffffff !default;
 $popover-text-dark: #000000 !default;
-$popover-content-bg: $base-main-bg !default;
+$popover-content-bg: $base-dropdown-bg !default;  // floating surface → dropdown-bg (= main-bg default)
 
 // =============================================================================
 // CODE LANGUAGE COLORS (standalone - not themed)

package/src/scss/variables/_components.scss

@@ -276,7 +276,7 @@ $form-group-margin-compact: 1.2rem !default;  // 12px (was 0.75rem)
 // Custom checkbox appearance (tri-state support)
 $checkbox-border-radius: $border-radius !default;         // Match input border-radius
 $checkbox-border-width: $border-width-base !default;      // 1px
-$checkbox-border-color: $border-color !default;           // Default border
+$checkbox-border-color: $base-checkbox-border-color !default;  // reconciled: shared checkbox-border knob (= border-color default)
 $checkbox-border-color-hover: $accent-color !default;     // Hover border
 $checkbox-border-color-checked: $accent-color !default;   // Checked border
 $checkbox-bg: $card-bg !default;                          // Unchecked background
@@ -291,17 +291,17 @@ $checkbox-transition: $transition-fast !default;
 // ============================================================================
 $multiselect-input-padding-v: $input-padding-v !default;
 $multiselect-input-padding-h: $input-padding-h !default;
-$multiselect-dropdown-bg: $card-bg !default;
+$multiselect-dropdown-bg: $base-dropdown-bg !default;  // reconciled: floating surface → dropdown-bg (= main-bg default)
 $multiselect-dropdown-border: $border-color !default;
 $multiselect-dropdown-text: $text-color-1 !default;
 $multiselect-dropdown-shadow: $shadow-lg !default;
 $multiselect-dropdown-max-height: 32rem !default;  // 320px (was 20rem)
-$multiselect-hint-bg: $main-bg !default;
+$multiselect-hint-bg: $page-bg !default;  // canvas tone (was $main-bg, which is now the white surface)
 $multiselect-hint-border: $border-color !default;
 $multiselect-hint-padding: $spacing-sm !default;
 $multiselect-option-padding-v: $spacing-sm !default;
 $multiselect-option-padding-h: $spacing-md !default;
-$multiselect-option-hover-bg: $main-bg !default;
+$multiselect-option-hover-bg: $base-hover-bg !default;  // RECONCILED: was main-bg; now the shared hover surface
 $multiselect-pill-bg: $accent-light !default;
 $multiselect-pill-border: $accent-color !default;
 $multiselect-pill-padding: $spacing-xs $spacing-sm !default;