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

package/CHANGELOG.md

@@ -3,6 +3,119 @@
 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
+
+- **The app shell now renders standalone — component `--pc-*` tokens fall back to
+  `--base-*`.** rc05 relocated the shell into the foundation, but its CSS
+  hard-referenced component tokens (`--pc-navbar-bg`, `--pc-sidebar-*`,
+  `--pc-footer-*`, `--pc-card-bg`, `--pc-input-bg`) that pure-css does **not**
+  emit — those are pure-admin's `output-pc-component-variables` contract. So a
+  consumer linking `base.css` / `pure-css.css` alone (keen-docs hit this) got an
+  unstyled navbar/sidebar. Every such reference now carries a `--base-*` fallback
+  traced from the token's own derivation: `var(--pc-navbar-bg, var(--base-main-bg))`,
+  `var(--pc-sidebar-bg, var(--base-page-bg))`, navbar/sidebar text →
+  `--base-text-color-1/2`, borders → `--base-border-color`, submenu surfaces →
+  `--base-subtle-bg`, input → `--base-input-bg`. This makes `--pc-*` an *optional*
+  override layer over a guaranteed `--base-*` floor — link only the base vars and
+  the shell just works; set `--pc-navbar-bg` to tune the bar independently of the
+  page. 40 references across the eight shell partials.
+- **Dangling token references in `_fit-flyout.scss`.** The fit-flyout trigger
+  referenced `--pc-accent-color` (defined nowhere — the token is `--pc-accent`)
+  with no fallback, so its focus outline was inert; and `--pc-hover-bg` (also
+  undefined) with only an rgba literal. Repointed to
+  `var(--pc-accent, var(--base-accent-color))` and
+  `var(--pc-hover-bg, var(--base-hover-bg, rgba(…)))`.
+
+### Changed
+
+- **Unified the `--pc-border-radius*` scale with the `--base-border-radius-*`
+  contract the components already use.** pure-css shipped two disconnected radius
+  systems: `--base-border-radius-sm/md/lg` (the unitless rem-multipliers
+  `0.4/0.6/0.8` every web/svelte component reads — e.g. web-multiselect's
+  `calc(var(--base-border-radius-md) * --ms-rem)`), and its OWN
+  `--pc-border-radius-sm/base/lg` as hardcoded `2px/4px/8px` literals disconnected
+  from the base layer. On one themed page a `<keen-web-multiselect>` and a pure-css
+  `.rounded` element rounded differently, and a runtime `--base-border-radius-*`
+  override re-rounded the components but not pure-css's own elements. The three
+  `--pc-border-radius*` tokens now derive from the base contract —
+  `calc(var(--base-border-radius-{sm,md,lg}, <default>) * 1rem)` (unsuffixed
+  `--pc-border-radius` = the `-md` mid step) — mirroring how `--pc-border-color`
+  already tracked `--base-border-color`. **Rendered radii change** to match the
+  ecosystem: `-sm` 2px → 4px, mid 4px → 6px, `-lg` 8px (unchanged). Overriding
+  `--base-border-radius-*` now re-rounds pure-css and the components together.
+
 ## [1.0.0-rc05] — 2026-08-27 [PUBLISHED]
 
 ### Added

package/README.md

@@ -4,48 +4,19 @@ 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-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.
-
-## What's New in 1.0.0-rc04
-
-- **pure-css is now strictly a base — it emits only the base token contract
-  (BREAKING).** `base.css` / `pure-css.css` ship the ~46 base `--pc-*` tokens the
-  foundation actually uses or exposes as universal primitives; the ~165 component
-  tokens (buttons, cards, tables, alerts, panels, …) are pure-admin's contract,
-  emitted by the new `output-pc-component-variables` mixin. If you author themes
-  or call the emit mixins, add `@include output-pc-component-variables;` after
-  `output-pc-css-variables`. Consumers of compiled CSS are unaffected.
-- **The foundation namespace is fully de-branded from `pa` to `pc` (BREAKING).**
-  pure-css was carved out of pure-admin, so it still carried pure-admin's `pa`
-  brand in its public surface. That's gone:
-  - **Grid + mode classes:** `.pa-row` / `.pa-col*` / `.pa-offset*` / `.pa-cq` /
-    `.pa-hide*` / `.pa-show*` → `.pc-*`; `.pa-mode-light` / `.pa-mode-dark` →
-    `.pc-mode-*`.
-  - **Every emitted CSS variable:** the whole `--pa-*` runtime surface (~210
-    custom properties) → `--pc-*` (`--pa-accent` → `--pc-accent`, `--pa-card-bg`
-    → `--pc-card-bg`, `--pa-color-1..9` → `--pc-color-1..9`, …). `--base-*`
-    (web-component bridge) and `--page-loader-*` are unchanged.
-  - **The emit mixins:** `output-pa-css-variables` → `output-pc-css-variables`,
-    `output-pa-alert-variables-light/dark` → `output-pc-alert-variables-*`.
-  Consumers migrate markup, `var()` reads, inline `style="--pa-…"`, and theme
-  `:root` blocks in lockstep — a boundary-aware find/replace of the string
-  `--pa-` → `--pc-` (safe: it can't touch `--base-*`, `--page-loader-*`, or the
-  `.pa-color-{name}` variant **class**).
-- **Sizing utilities consolidated into the foundation.** The universal
-  viewport-height utilities (`h-full` / `h-screen` / `min-h-full` /
-  `min-h-screen` / `max-h-full` / `max-h-screen`) and the Tailwind-style flex
-  shorthands (`flex-1` / `flex-auto` / `flex-initial` / `flex-none` /
-  `flex-grow` / `flex-shrink`) now ship from pure-css, so a standalone page gets
-  the complete set without borrowing anything from pure-admin. pure-admin's
-  duplicate rem-height `h-Nx` / `min-h-Nx` / `max-h-Nx` classes are retired in
-  favour of the foundation's `hr-` / `wr-` naming (`r` = rem).
-- **Complete form-spacing contract as runtime `--pc-*` variables** and the
-  `$form-scale` → `$form-gap` rename (see CHANGELOG).
+## 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.
 
 ## Why
 

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);
@@ -142,7 +152,7 @@
   --pc-color-7-text: #ffffff;
   --pc-color-8-text: #ffffff;
   --pc-color-9-text: #ffffff;
-  --pc-border-radius-sm: 2px;
-  --pc-border-radius: 4px;
-  --pc-border-radius-lg: 8px;
+  --pc-border-radius-sm: calc(var(--base-border-radius-sm, 0.4) * 1rem);
+  --pc-border-radius: calc(var(--base-border-radius-md, 0.6) * 1rem);
+  --pc-border-radius-lg: calc(var(--base-border-radius-lg, 0.8) * 1rem);
 }