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

package/CHANGELOG.md

@@ -3,6 +3,49 @@
 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-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,6 +4,11 @@ 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-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.
@@ -11,42 +16,6 @@ so it can be consumed on its own.
 - **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).
-
 ## 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

@@ -142,7 +142,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);
 }

package/dist/css/pure-css.css

@@ -1907,8 +1907,8 @@ label {
   top: 0;
   inset-inline: 0;
   height: 4.8rem;
-  background-color: var(--pc-navbar-bg);
-  border-bottom: 1px solid var(--pc-navbar-border-color);
+  background-color: var(--pc-navbar-bg, var(--base-main-bg));
+  border-bottom: 1px solid var(--pc-navbar-border-color, var(--base-border-color));
   z-index: 4000;
   display: flex;
   align-items: center;
@@ -1997,14 +1997,14 @@ body.pc-container-2xl .pc-navbar {
   margin: 0;
   font-size: 1.8rem;
   font-weight: 600;
-  color: var(--pc-navbar-text);
+  color: var(--pc-navbar-text, var(--base-text-color-1));
   white-space: nowrap;
 }
 .pc-app-header__version {
   margin-inline-start: 0.4rem;
   font-size: 1.2rem;
   font-weight: 400;
-  color: var(--pc-navbar-text-secondary);
+  color: var(--pc-navbar-text-secondary, var(--base-text-color-2));
 }
 
 .pc-navbar__burger {
@@ -2030,7 +2030,7 @@ body.pc-container-2xl .pc-navbar {
 }
 .pc-navmenu > ul > li > a {
   text-decoration: none;
-  color: var(--pc-navbar-text-secondary);
+  color: var(--pc-navbar-text-secondary, var(--base-text-color-2));
   font-weight: 500;
   padding: 0.4rem 0.8rem;
   border-radius: var(--pc-border-radius);
@@ -2040,11 +2040,11 @@ body.pc-container-2xl .pc-navbar {
   align-items: center;
 }
 .pc-navmenu > ul > li > a:hover {
-  color: var(--pc-navbar-text);
+  color: var(--pc-navbar-text, var(--base-text-color-1));
   background-color: color-mix(in srgb, currentColor 12%, transparent);
 }
 .pc-navmenu > ul > li.pc-navmenu__item--active > a, .pc-navmenu > ul > li.pc-navmenu__item--active > a:hover {
-  color: var(--pc-navbar-text);
+  color: var(--pc-navbar-text, var(--base-text-color-1));
   background-color: color-mix(in srgb, currentColor 22%, transparent);
   font-weight: 600;
 }
@@ -2070,7 +2070,7 @@ body.pc-container-2xl .pc-navbar {
   top: 100%;
   inset-inline-start: 0;
   min-width: 19.2rem;
-  background-color: var(--pc-card-bg);
+  background-color: var(--pc-card-bg, var(--base-main-bg));
   border: 1px solid var(--pc-border-color);
   border-radius: var(--pc-border-radius);
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
@@ -2194,7 +2194,7 @@ body.pc-container-2xl .pc-navbar {
   margin: 0;
   font-size: 1.8rem;
   font-weight: 600;
-  color: var(--pc-navbar-text);
+  color: var(--pc-navbar-text, var(--base-text-color-1));
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -2218,7 +2218,7 @@ body.pc-container-2xl .pc-navbar {
 .burger-menu span {
   width: 100%;
   height: 2px;
-  background-color: var(--pc-navbar-text);
+  background-color: var(--pc-navbar-text, var(--base-text-color-1));
   border-radius: var(--pc-border-radius);
   transition: all 0.15s ease-out;
   transform-origin: center;
@@ -2248,15 +2248,15 @@ body.pc-container-2xl .pc-navbar {
   gap: 0.8rem;
 }
 .theme-switcher label {
-  color: var(--pc-navbar-text-secondary);
+  color: var(--pc-navbar-text-secondary, var(--base-text-color-2));
   font-size: 1.4rem;
 }
 .theme-switcher select {
   padding: 0.4rem 0.8rem;
   border: 1px solid var(--pc-border-color);
   border-radius: var(--pc-border-radius);
-  background-color: var(--pc-navbar-bg);
-  color: var(--pc-navbar-text);
+  background-color: var(--pc-navbar-bg, var(--base-main-bg));
+  color: var(--pc-navbar-text, var(--base-text-color-1));
   font-size: 1.4rem;
 }
 .theme-switcher select:focus {
@@ -2287,7 +2287,7 @@ body.pc-container-2xl .pc-navbar {
 }
 
 .pc-layout__sidebar {
-  background-color: var(--pc-sidebar-bg);
+  background-color: var(--pc-sidebar-bg, var(--base-page-bg));
   border-inline-end: 1px solid var(--pc-border-color);
   flex-shrink: 0;
   position: relative;
@@ -2314,7 +2314,7 @@ body.pc-container-2xl .pc-navbar {
   width: 14px;
   height: 44px;
   border-radius: min(var(--pc-border-radius-lg), 4px);
-  background-color: var(--pc-card-bg);
+  background-color: var(--pc-card-bg, var(--base-main-bg));
   border: 2px solid var(--pc-border-color);
   color: var(--pc-text-color-2);
   font-size: 1.8rem;
@@ -2379,7 +2379,7 @@ body.pc-layout--sticky .pc-layout__sidebar {
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: 0.05em;
-  color: var(--pc-sidebar-text-secondary);
+  color: var(--pc-sidebar-text-secondary, var(--base-text-color-2));
   user-select: none;
 }
 .pc-sidebar__section:first-child {
@@ -2398,7 +2398,7 @@ body.pc-layout--sticky .pc-layout__sidebar {
   align-items: center;
   gap: 1.2rem;
   padding: 0.8rem 1.6rem;
-  color: var(--pc-sidebar-text-secondary);
+  color: var(--pc-sidebar-text-secondary, var(--base-text-color-2));
   text-decoration: none;
   font-weight: 500;
   border-inline-end: 3px solid transparent;
@@ -2407,7 +2407,7 @@ body.loaded .pc-sidebar__link {
   transition: all 0.1s ease-out;
 }
 .pc-sidebar__link:hover {
-  color: var(--pc-sidebar-text);
+  color: var(--pc-sidebar-text, var(--base-text-color-1));
   background-color: var(--pc-accent-light);
 }
 .pc-sidebar__link--active {
@@ -2425,7 +2425,7 @@ body.loaded .pc-sidebar__link {
   height: 3.5rem;
   padding: 0 1.6rem;
   color: var(--pc-text-color-2);
-  background-color: var(--pc-input-bg);
+  background-color: var(--pc-input-bg, var(--base-input-bg));
   border: 1px solid var(--pc-border-color);
   border-radius: var(--pc-border-radius);
   text-align: start;
@@ -2440,7 +2440,7 @@ body.loaded .pc-sidebar__search {
 }
 .pc-sidebar__search:hover {
   border-color: #007bff;
-  color: var(--pc-sidebar-text);
+  color: var(--pc-sidebar-text, var(--base-text-color-1));
 }
 .pc-layout__sidebar--icon-collapse .pc-sidebar__search {
   width: auto;
@@ -2475,7 +2475,7 @@ body.loaded .pc-sidebar__search {
   border: none;
   outline: none;
   background: transparent;
-  color: var(--pc-sidebar-text);
+  color: var(--pc-sidebar-text, var(--base-text-color-1));
   font: inherit;
   padding: 0;
 }
@@ -2497,7 +2497,7 @@ body.loaded .pc-sidebar__search {
   align-items: center;
   gap: 1.2rem;
   padding: 0.8rem 1.6rem;
-  color: var(--pc-sidebar-text-secondary);
+  color: var(--pc-sidebar-text-secondary, var(--base-text-color-2));
   background: none;
   border: none;
   width: 100%;
@@ -2509,7 +2509,7 @@ body.loaded .pc-sidebar__toggle {
   transition: all 0.1s ease-out;
 }
 .pc-sidebar__toggle:hover {
-  color: var(--pc-sidebar-text);
+  color: var(--pc-sidebar-text, var(--base-text-color-1));
   background-color: var(--pc-accent-light);
 }
 .pc-sidebar__toggle--active {
@@ -2542,7 +2542,7 @@ body.loaded .pc-sidebar__label {
   margin: 0;
   padding: 0;
   display: none;
-  background-color: var(--pc-sidebar-submenu-bg);
+  background-color: var(--pc-sidebar-submenu-bg, var(--base-subtle-bg));
 }
 .pc-sidebar__submenu--open {
   display: block;
@@ -2553,11 +2553,11 @@ body.loaded .pc-sidebar__label {
   border-inline-end: 2px solid transparent;
 }
 .pc-sidebar__submenu > .pc-sidebar__item > .pc-sidebar__link:hover {
-  background-color: var(--pc-sidebar-submenu-hover-bg);
+  background-color: var(--pc-sidebar-submenu-hover-bg, var(--base-subtle-bg));
 }
 .pc-sidebar__submenu > .pc-sidebar__item > .pc-sidebar__link--active {
-  background-color: var(--pc-sidebar-submenu-active-bg);
-  color: var(--pc-sidebar-submenu-active-text);
+  background-color: var(--pc-sidebar-submenu-active-bg, var(--base-subtle-bg));
+  color: var(--pc-sidebar-submenu-active-text, var(--base-text-color-1));
   border-inline-end-color: var(--pc-accent);
 }
 .pc-sidebar__submenu > .pc-sidebar__item > .pc-sidebar__toggle {
@@ -2637,7 +2637,7 @@ body.loaded .pc-sidebar__chevron {
   top: 0;
   bottom: 0;
   padding: 0.8rem 1.6rem;
-  background-color: var(--pc-sidebar-bg);
+  background-color: var(--pc-sidebar-bg, var(--base-page-bg));
   border: 1px solid var(--pc-border-color);
   border-inline-start: none;
   border-start-start-radius: 0;
@@ -2662,7 +2662,7 @@ body.loaded .pc-sidebar__chevron {
   margin: 0;
   padding: 0;
   list-style: none;
-  background-color: var(--pc-sidebar-submenu-bg);
+  background-color: var(--pc-sidebar-submenu-bg, var(--base-subtle-bg));
   border: 1px solid var(--pc-border-color);
   border-inline-start: none;
   border-start-start-radius: 0;
@@ -2690,14 +2690,14 @@ body.loaded .pc-sidebar__chevron {
 .sidebar-hidden .pc-layout__sidebar--icon-collapse .pc-sidebar__item:hover > .pc-sidebar__submenu .pc-sidebar__toggle:hover,
 .sidebar-hidden .pc-layout__sidebar--icon-collapse .pc-sidebar__submenu:hover .pc-sidebar__link:hover,
 .sidebar-hidden .pc-layout__sidebar--icon-collapse .pc-sidebar__submenu:hover .pc-sidebar__toggle:hover {
-  background-color: var(--pc-sidebar-submenu-hover-bg);
+  background-color: var(--pc-sidebar-submenu-hover-bg, var(--base-subtle-bg));
 }
 .sidebar-hidden .pc-layout__sidebar--icon-collapse .pc-sidebar__item:hover > .pc-sidebar__submenu .pc-sidebar__link--active,
 .sidebar-hidden .pc-layout__sidebar--icon-collapse .pc-sidebar__item:hover > .pc-sidebar__submenu .pc-sidebar__toggle--active,
 .sidebar-hidden .pc-layout__sidebar--icon-collapse .pc-sidebar__submenu:hover .pc-sidebar__link--active,
 .sidebar-hidden .pc-layout__sidebar--icon-collapse .pc-sidebar__submenu:hover .pc-sidebar__toggle--active {
-  background-color: var(--pc-sidebar-submenu-active-bg);
-  color: var(--pc-sidebar-submenu-active-text);
+  background-color: var(--pc-sidebar-submenu-active-bg, var(--base-subtle-bg));
+  color: var(--pc-sidebar-submenu-active-text, var(--base-text-color-1));
 }
 .sidebar-hidden .pc-layout__sidebar--icon-collapse .pc-sidebar__item:hover > .pc-sidebar__submenu .pc-sidebar__icon,
 .sidebar-hidden .pc-layout__sidebar--icon-collapse .pc-sidebar__submenu:hover .pc-sidebar__icon {
@@ -2739,7 +2739,7 @@ body.loaded .pc-sidebar__chevron {
   margin: 0;
   padding: 0;
   list-style: none;
-  background-color: var(--pc-sidebar-submenu-bg);
+  background-color: var(--pc-sidebar-submenu-bg, var(--base-subtle-bg));
   border: 1px solid var(--pc-border-color);
   border-inline-start: none;
   border-start-start-radius: 0;
@@ -2881,8 +2881,8 @@ body.pc-layout--sticky .pc-layout__inner {
 
 .pc-layout__footer {
   min-height: 4.8rem;
-  background-color: var(--pc-footer-bg);
-  border-top: 1px solid var(--pc-footer-border-color);
+  background-color: var(--pc-footer-bg, var(--base-main-bg));
+  border-top: 1px solid var(--pc-footer-border-color, var(--base-border-color));
   display: flex;
   align-items: center;
   padding: 0.4rem 1.6rem;
@@ -2964,7 +2964,7 @@ body.pc-layout--sticky .pc-layout__inner {
     bottom: 0;
     width: 90vw;
     z-index: 1050;
-    background-color: var(--pc-sidebar-bg);
+    background-color: var(--pc-sidebar-bg, var(--base-page-bg));
     opacity: 1;
     overflow-y: auto;
     overscroll-behavior: contain;
@@ -3063,14 +3063,14 @@ body.pc-layout--sticky .pc-layout__inner {
   cursor: pointer;
 }
 .pc-fit-flyout__trigger:hover {
-  background: var(--pc-hover-bg, rgba(0, 0, 0, 0.05));
+  background: var(--pc-hover-bg, var(--base-hover-bg, rgba(0, 0, 0, 0.05)));
 }
 .pc-fit-flyout__trigger:focus-visible {
-  outline: 2px solid var(--pc-accent-color);
+  outline: 2px solid var(--pc-accent, var(--base-accent-color));
   outline-offset: 1px;
 }
 .pc-fit-flyout__trigger[aria-expanded=true] {
-  background: var(--pc-hover-bg, rgba(0, 0, 0, 0.08));
+  background: var(--pc-hover-bg, var(--base-hover-bg, rgba(0, 0, 0, 0.08)));
 }
 
 .pc-fit-flyout__dots {
@@ -3103,7 +3103,7 @@ body.pc-layout--sticky .pc-layout__inner {
   min-width: 20rem;
   max-width: 32rem;
   padding: 0.8rem;
-  background: var(--pc-card-bg);
+  background: var(--pc-card-bg, var(--base-main-bg));
   border: 1px solid var(--pc-border-color);
   border-radius: var(--pc-border-radius);
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
@@ -6075,7 +6075,7 @@ body.pc-layout--sticky .pc-layout__inner {
   --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);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@keenmate/pure-css",
-  "version": "1.0.0-rc05",
+  "version": "1.0.0-rc06",
   "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

@@ -270,10 +270,17 @@
   --pc-color-8-text: #{$color-8-text};
   --pc-color-9-text: #{$color-9-text};
 
-  // Border-radius scale
-  --pc-border-radius-sm: #{$border-radius-sm};
-  --pc-border-radius: #{$border-radius};
-  --pc-border-radius-lg: #{$border-radius-lg};
+  // Border-radius scale — derived from the --base-border-radius-* contract (the
+  // same unitless rem-multipliers the web/svelte components read; e.g.
+  // web-multiselect: `calc(var(--base-border-radius-md) * --ms-rem)`). Multiplying
+  // by 1rem yields px at pure-css's 10px rem base (0.6 → 0.6rem → 6px) and keeps
+  // the scale live: overriding --base-border-radius-* at runtime re-rounds
+  // pure-css's own elements and the components together, instead of the old baked
+  // 2/4/8px literals that ignored the base contract. The $base-* multipliers are
+  // the fallbacks. NOTE: --pc-border-radius (unsuffixed) is the MID (-md) step.
+  --pc-border-radius-sm: calc(var(--base-border-radius-sm, #{$base-border-radius-sm}) * 1rem);
+  --pc-border-radius: calc(var(--base-border-radius-md, #{$base-border-radius-md}) * 1rem);
+  --pc-border-radius-lg: calc(var(--base-border-radius-lg, #{$base-border-radius-lg}) * 1rem);
 }
 
 // ============================================================================

package/src/scss/_fit-flyout.scss

@@ -25,9 +25,9 @@
   color: inherit;
   cursor: pointer;
 
-  &:hover { background: var(--pc-hover-bg, rgba(0, 0, 0, 0.05)); }
-  &:focus-visible { outline: 2px solid var(--pc-accent-color); outline-offset: 1px; }
-  &[aria-expanded='true'] { background: var(--pc-hover-bg, rgba(0, 0, 0, 0.08)); }
+  &:hover { background: var(--pc-hover-bg, var(--base-hover-bg, rgba(0, 0, 0, 0.05))); }
+  &:focus-visible { outline: 2px solid var(--pc-accent, var(--base-accent-color)); outline-offset: 1px; }
+  &[aria-expanded='true'] { background: var(--pc-hover-bg, var(--base-hover-bg, rgba(0, 0, 0, 0.08))); }
 }
 
 // The three dots, drawn so the sink needs no icon-font dependency.
@@ -60,7 +60,7 @@
   min-width: 20rem;
   max-width: 32rem;
   padding: $spacing-sm;
-  background: var(--pc-card-bg);
+  background: var(--pc-card-bg, var(--base-main-bg));
   border: $border-width-base solid var(--pc-border-color);
   border-radius: var(--pc-border-radius);
   box-shadow: $shadow-lg;

package/src/scss/_layout-container.scss

@@ -97,8 +97,8 @@ body.pc-layout--sticky .pc-layout__inner {
 // Footer - outside inner, sibling to inner
 .pc-layout__footer {
   min-height: $footer-height;
-  background-color: var(--pc-footer-bg);
-  border-top: $border-width-base solid var(--pc-footer-border-color);
+  background-color: var(--pc-footer-bg, var(--base-main-bg));
+  border-top: $border-width-base solid var(--pc-footer-border-color, var(--base-border-color));
   display: flex;
   align-items: center;
   padding: $spacing-xs $spacing-base;

package/src/scss/_layout-responsive.scss

@@ -38,7 +38,7 @@
     bottom: 0;
     width: $mobile-sidebar-width;
     z-index: 1050;
-    background-color: var(--pc-sidebar-bg);
+    background-color: var(--pc-sidebar-bg, var(--base-page-bg));
     opacity: 1;
     overflow-y: auto;
     overscroll-behavior: contain; // drawer's own scroll doesn't chain to the page

package/src/scss/_navbar-elements.scss

@@ -25,7 +25,7 @@
     margin: 0;
     font-size: $font-size-lg;
     font-weight: $font-weight-semibold;
-    color: var(--pc-navbar-text);
+    color: var(--pc-navbar-text, var(--base-text-color-1));
     white-space: nowrap;
   }
 
@@ -35,7 +35,7 @@
     margin-inline-start: $spacing-xs;
     font-size: $font-size-xs;
     font-weight: $font-weight-normal;
-    color: var(--pc-navbar-text-secondary);
+    color: var(--pc-navbar-text-secondary, var(--base-text-color-2));
   }
 }
 
@@ -66,7 +66,7 @@
 
       > a {
         text-decoration: none;
-        color: var(--pc-navbar-text-secondary);
+        color: var(--pc-navbar-text-secondary, var(--base-text-color-2));
         font-weight: $font-weight-medium;
         padding: $spacing-xs $spacing-sm;
         border-radius: var(--pc-border-radius);
@@ -86,7 +86,7 @@
         // or --pc-navbar-text tint would be dark-on-dark and vanish. Text
         // brightens to --pc-navbar-text, which those themes override to match.
         &:hover {
-          color: var(--pc-navbar-text);
+          color: var(--pc-navbar-text, var(--base-text-color-1));
           background-color: color-mix(in srgb, currentColor 12%, transparent);
         }
       }
@@ -99,7 +99,7 @@
       &.pc-navmenu__item--active > a {
         &,
         &:hover {
-          color: var(--pc-navbar-text);
+          color: var(--pc-navbar-text, var(--base-text-color-1));
           background-color: color-mix(in srgb, currentColor 22%, transparent);
           font-weight: $font-weight-semibold;
         }
@@ -142,7 +142,7 @@
     top: 100%;
     inset-inline-start: 0; // RTL: flips to right: 0
     min-width: 19.2rem;
-    background-color: var(--pc-card-bg);
+    background-color: var(--pc-card-bg, var(--base-main-bg));
     border: $border-width-base solid var(--pc-border-color);
     border-radius: var(--pc-border-radius);
     box-shadow: $shadow-lg;
@@ -329,7 +329,7 @@
     margin: 0;
     font-size: $font-size-lg;
     font-weight: $font-weight-semibold;
-    color: var(--pc-navbar-text);
+    color: var(--pc-navbar-text, var(--base-text-color-1));
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
@@ -356,7 +356,7 @@
   span {
     width: 100%;
     height: $burger-bar-height;
-    background-color: var(--pc-navbar-text);
+    background-color: var(--pc-navbar-text, var(--base-text-color-1));
     border-radius: var(--pc-border-radius);
     transition: all $transition-normal $easing-snappy;
     transform-origin: center;
@@ -399,7 +399,7 @@
   gap: $spacing-sm;
 
   label {
-    color: var(--pc-navbar-text-secondary);
+    color: var(--pc-navbar-text-secondary, var(--base-text-color-2));
     font-size: $font-size-sm;
   }
 
@@ -407,8 +407,8 @@
     padding: $spacing-xs $spacing-sm;
     border: $border-width-base solid var(--pc-border-color);
     border-radius: var(--pc-border-radius);
-    background-color: var(--pc-navbar-bg);
-    color: var(--pc-navbar-text);
+    background-color: var(--pc-navbar-bg, var(--base-main-bg));
+    color: var(--pc-navbar-text, var(--base-text-color-1));
     font-size: $font-size-sm;
 
     &:focus {

package/src/scss/_navbar.scss

@@ -15,8 +15,8 @@ $navbar-search-reserve-width: 18rem !default;
   top: 0;
   inset-inline: 0; // RTL: works for both LTR and RTL
   height: $navbar-height;
-  background-color: var(--pc-navbar-bg);
-  border-bottom: $border-width-base solid var(--pc-navbar-border-color);
+  background-color: var(--pc-navbar-bg, var(--base-main-bg));
+  border-bottom: $border-width-base solid var(--pc-navbar-border-color, var(--base-border-color));
   z-index: $z-index-navbar; // 2000
   display: flex;
   align-items: center;

package/src/scss/_resize-handle.scss

@@ -46,7 +46,7 @@ $resize-knob-radius-lg: 6px !default;
   // themes (radius 0) stay square via min(). High-contrast fill / border / shadow
   // so the knob stands out on both light and dark surfaces.
   border-radius: min(var(--pc-border-radius-lg), #{$resize-knob-radius});
-  background-color: var(--pc-card-bg);
+  background-color: var(--pc-card-bg, var(--base-main-bg));
   border: $border-width-medium solid var(--pc-border-color);
   color: var(--pc-text-color-2);
   font-size: $font-size-lg;

package/src/scss/_sidebar-states.scss

@@ -68,7 +68,7 @@
         top: 0;
         bottom: 0;
         padding: $spacing-sm $spacing-base;
-        background-color: var(--pc-sidebar-bg);
+        background-color: var(--pc-sidebar-bg, var(--base-page-bg));
         border: $border-width-base solid var(--pc-border-color);
         border-inline-start: none; // RTL: flips to border-right: none
         border-start-start-radius: 0;
@@ -96,7 +96,7 @@
       margin: 0;
       padding: 0;
       list-style: none;
-      background-color: var(--pc-sidebar-submenu-bg);
+      background-color: var(--pc-sidebar-submenu-bg, var(--base-subtle-bg));
       border: $border-width-base solid var(--pc-border-color);
       border-inline-start: none; // RTL: flips to border-right: none
       border-start-start-radius: 0;
@@ -120,12 +120,12 @@
         width: 100%;
 
         &:hover {
-          background-color: var(--pc-sidebar-submenu-hover-bg);
+          background-color: var(--pc-sidebar-submenu-hover-bg, var(--base-subtle-bg));
         }
 
         &--active {
-          background-color: var(--pc-sidebar-submenu-active-bg);
-          color: var(--pc-sidebar-submenu-active-text);
+          background-color: var(--pc-sidebar-submenu-active-bg, var(--base-subtle-bg));
+          color: var(--pc-sidebar-submenu-active-text, var(--base-text-color-1));
         }
       }
 
@@ -168,7 +168,7 @@
         margin: 0;
         padding: 0;
         list-style: none;
-        background-color: var(--pc-sidebar-submenu-bg);
+        background-color: var(--pc-sidebar-submenu-bg, var(--base-subtle-bg));
         border: $border-width-base solid var(--pc-border-color);
         border-inline-start: none; // RTL: flips to border-right: none
         border-start-start-radius: 0;

package/src/scss/_sidebar.scss

@@ -18,7 +18,7 @@
 }
 
 .pc-layout__sidebar {
-  background-color: var(--pc-sidebar-bg);
+  background-color: var(--pc-sidebar-bg, var(--base-page-bg));
   border-inline-end: $border-width-base solid var(--pc-border-color); // RTL: flips to border-left
   flex-shrink: 0;
   position: relative;
@@ -127,7 +127,7 @@ body.pc-layout--sticky .pc-layout__sidebar {
     font-weight: $font-weight-semibold;
     text-transform: uppercase;
     letter-spacing: 0.05em;
-    color: var(--pc-sidebar-text-secondary);
+    color: var(--pc-sidebar-text-secondary, var(--base-text-color-2));
     user-select: none;
 
     // First heading shouldn't push the whole nav down
@@ -154,7 +154,7 @@ body.pc-layout--sticky .pc-layout__sidebar {
     align-items: center;
     gap: $sidebar-item-gap;
     padding: $sidebar-padding;
-    color: var(--pc-sidebar-text-secondary);
+    color: var(--pc-sidebar-text-secondary, var(--base-text-color-2));
     text-decoration: none;
     font-weight: $font-weight-medium;
     border-inline-end: $border-width-thick solid transparent; // RTL: flips to border-left
@@ -164,7 +164,7 @@ body.pc-layout--sticky .pc-layout__sidebar {
     }
 
     &:hover {
-      color: var(--pc-sidebar-text);
+      color: var(--pc-sidebar-text, var(--base-text-color-1));
       background-color: var(--pc-accent-light);
     }
 
@@ -197,7 +197,7 @@ body.pc-layout--sticky .pc-layout__sidebar {
     height: #{$base-input-size-md-height}rem;
     padding: 0 $spacing-base;
     color: var(--pc-text-color-2);
-    background-color: var(--pc-input-bg);
+    background-color: var(--pc-input-bg, var(--base-input-bg));
     border: $border-width-base solid var(--pc-border-color);
     border-radius: var(--pc-border-radius);
     text-align: start; // RTL: flips to right
@@ -216,7 +216,7 @@ body.pc-layout--sticky .pc-layout__sidebar {
 
     &:hover {
       border-color: $input-focus-border-color;
-      color: var(--pc-sidebar-text);
+      color: var(--pc-sidebar-text, var(--base-text-color-1));
     }
 
     // Collapsed sidebar: drop the frame, icon-only, matching link padding so the
@@ -267,7 +267,7 @@ body.pc-layout--sticky .pc-layout__sidebar {
         border: none;
         outline: none;
         background: transparent;
-        color: var(--pc-sidebar-text);
+        color: var(--pc-sidebar-text, var(--base-text-color-1));
         font: inherit;
         padding: 0;
 
@@ -300,7 +300,7 @@ body.pc-layout--sticky .pc-layout__sidebar {
     align-items: center;
     gap: $sidebar-item-gap;
     padding: $sidebar-padding;
-    color: var(--pc-sidebar-text-secondary);
+    color: var(--pc-sidebar-text-secondary, var(--base-text-color-2));
     background: none;
     border: none;
     width: 100%;
@@ -313,7 +313,7 @@ body.pc-layout--sticky .pc-layout__sidebar {
     }
 
     &:hover {
-      color: var(--pc-sidebar-text);
+      color: var(--pc-sidebar-text, var(--base-text-color-1));
       background-color: var(--pc-accent-light);
     }
 
@@ -354,7 +354,7 @@ body.pc-layout--sticky .pc-layout__sidebar {
     margin: 0;
     padding: 0;
     display: none;
-    background-color: var(--pc-sidebar-submenu-bg);
+    background-color: var(--pc-sidebar-submenu-bg, var(--base-subtle-bg));
 
     &--open {
       display: block;
@@ -368,12 +368,12 @@ body.pc-layout--sticky .pc-layout__sidebar {
     border-inline-end: $border-width-medium solid transparent; // RTL: flips to border-left
 
     &:hover {
-      background-color: var(--pc-sidebar-submenu-hover-bg);
+      background-color: var(--pc-sidebar-submenu-hover-bg, var(--base-subtle-bg));
     }
 
     &--active {
-      background-color: var(--pc-sidebar-submenu-active-bg);
-      color: var(--pc-sidebar-submenu-active-text);
+      background-color: var(--pc-sidebar-submenu-active-bg, var(--base-subtle-bg));
+      color: var(--pc-sidebar-submenu-active-text, var(--base-text-color-1));
       border-inline-end-color: var(--pc-accent); // RTL: flips to border-left-color
     }
   }