@keenmate/pure-css 1.0.0-rc02 → 1.0.0-rc03

package/CHANGELOG.md

@@ -3,6 +3,32 @@
 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-rc03] — 2026-08-21 [PUBLISHED]
+
+### Changed
+
+- **BREAKING — renamed the top-bar region tokens from `header` to `navbar`.** The
+  foundation's top-region tokens named the bar as a *component block* rather than a
+  layout region, which read as misleading once pure-admin's navbar component dropped its
+  legacy `pa-header__*` block naming. Renamed:
+  - SCSS variables: `$header-height` → `$navbar-height`, `$header-bg` → `$navbar-bg`,
+    `$header-border-color` → `$navbar-border-color`, `$header-text` → `$navbar-text`,
+    `$header-text-secondary` → `$navbar-text-secondary`,
+    `$header-profile-name-color` → `$navbar-profile-name-color`,
+    `$z-index-header` → `$z-index-navbar`.
+  - CSS variables: `--pa-header-bg` → `--pa-navbar-bg`,
+    `--pa-header-border-color` → `--pa-navbar-border-color`,
+    `--pa-header-text` → `--pa-navbar-text`,
+    `--pa-header-text-secondary` → `--pa-navbar-text-secondary`,
+    `--pa-header-profile-name-color` → `--pa-navbar-profile-name-color`.
+  - `$footer-height` still mirrors the bar height (now `$navbar-height`); component-header
+    tokens (`$card-header-*`, `$table-header-*`) are unaffected.
+
+### Removed
+
+- **Dead `$header-brand-padding-left` variable.** Superseded by the navbar's flex `gap`;
+  no live rule consumed it (only a stale comment referenced it).
+
 ## [1.0.0-rc02] — 2026-08-05 [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-rc03
+
+- **Theming contract — top-bar region tokens renamed from `header` to `navbar` (BREAKING).** The foundation's top-region tokens named the bar as a *component block* (`header`) rather than the layout region it actually is, which read as misleading once pure-admin's navbar component dropped its legacy `pa-header__*` block naming. Every top-bar token is renamed on both sides of the cascade: the `$header-*` SCSS source variables (`$header-height` → `$navbar-height`, `$header-bg` → `$navbar-bg`, `$header-border-color`, `$header-text`, `$header-text-secondary`, `$header-profile-name-color`, and `$z-index-header` → `$z-index-navbar`) and the emitted `--pa-header-*` custom properties (`--pa-navbar-bg`, `--pa-navbar-border-color`, `--pa-navbar-text`, `--pa-navbar-text-secondary`, `--pa-navbar-profile-name-color`). Consumers reading the old names must update — `$footer-height` still mirrors the bar height (now `$navbar-height`), and the component-header tokens (`$card-header-*`, `$table-header-*`) are deliberately untouched since those *are* component blocks.
+- **Removed the dead `$header-brand-padding-left` variable.** It was superseded by the navbar's flex `gap`; no live rule consumed it — only a stale comment still referenced it — so it's gone from the source of truth.
+
 ## What's New in 1.0.0-rc02
 
 - **Reboot layer — the 10px base is now built in.** pure-css ships
@@ -18,31 +23,6 @@ so it can be consumed on its own.
   pure-admin-core, so a standalone pure-css page gets the same scrollbars as a
   full admin app. In the bundle, or cherry-pick `scrollbars.css` / `./scrollbars`.
 
-## What's New in 1.0.0-rc01
-
-- **The KeenMate CSS foundation, now standalone.** The `--base-*` theming
-  contract, the PureCSS grid, and the utility classes — extracted from
-  `@keenmate/pure-admin-core` so a docs site, marketing page, or component host
-  can use the foundation without the 40+ admin components.
-- **One theming layer everyone shares.** `--base-*` is the single source of
-  truth; `pure-admin-core`, its `--pa-*` component variables, and every KeenMate
-  web/Svelte component derive from it via fallback chains — so one block of
-  `--base-*` overrides re-themes all of them at once.
-- **Link targets.** `pure-css.css` (everything) or cherry-pick `base.css`
-  (variables only), `reboot.css` (reset + 10px base), `scrollbars.css`,
-  `grid.css`, `utilities.css`.
-- **The native `.pa-row` / `.pa-col` grid** — flexbox columns in 5% percentage
-  increments plus intuitive fractions (`.pa-col-1-3`, `.pa-col-2-3`, …), with
-  container-query responsive variants (`.pa-col-md-*`) and RTL-aware gutters.
-  (This replaces the legacy PureCSS `.pure-g` / `.pure-u-*` grid, which
-  pure-admin had already stopped using.)
-- **New `.gap-*` / `.gap-x-*` / `.gap-y-*` utilities** on the same spacing scale
-  as the margin/padding helpers — the one spacing family core lacked.
-- **Self-sufficient border/rounded utilities.** `.border` / `.rounded` consume
-  the emitted `--pa-border-*` variables, so `base.css` + `utilities.css` render
-  correct borders and radii standalone — no host stylesheet required.
-- **`dist/` is committed** — vendor the built CSS with no Sass toolchain.
-
 ## 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

@@ -132,11 +132,11 @@
   --pa-detail-row-label: rgba(255, 255, 255, 0.75);
   --pa-detail-title: rgba(255, 255, 255, 0.55);
   --pa-detail-shadow: 0 1.4rem 3.6rem rgba(0, 0, 0, 0.55);
-  --pa-header-bg: #ffffff;
-  --pa-header-border-color: #e1e5e9;
-  --pa-header-text: #2c3e50;
-  --pa-header-text-secondary: #6c757d;
-  --pa-header-profile-name-color: #2c3e50;
+  --pa-navbar-bg: #ffffff;
+  --pa-navbar-border-color: #e1e5e9;
+  --pa-navbar-text: #2c3e50;
+  --pa-navbar-text-secondary: #6c757d;
+  --pa-navbar-profile-name-color: #2c3e50;
   --pa-sidebar-bg: #f8f9fa;
   --pa-sidebar-text: #2c3e50;
   --pa-sidebar-text-secondary: #6c757d;

package/dist/css/pure-css.css

@@ -4795,11 +4795,11 @@ label {
   --pa-detail-row-label: rgba(255, 255, 255, 0.75);
   --pa-detail-title: rgba(255, 255, 255, 0.55);
   --pa-detail-shadow: 0 1.4rem 3.6rem rgba(0, 0, 0, 0.55);
-  --pa-header-bg: #ffffff;
-  --pa-header-border-color: #e1e5e9;
-  --pa-header-text: #2c3e50;
-  --pa-header-text-secondary: #6c757d;
-  --pa-header-profile-name-color: #2c3e50;
+  --pa-navbar-bg: #ffffff;
+  --pa-navbar-border-color: #e1e5e9;
+  --pa-navbar-text: #2c3e50;
+  --pa-navbar-text-secondary: #6c757d;
+  --pa-navbar-profile-name-color: #2c3e50;
   --pa-sidebar-bg: #f8f9fa;
   --pa-sidebar-text: #2c3e50;
   --pa-sidebar-text-secondary: #6c757d;

package/package.json

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

@@ -378,12 +378,12 @@
   // LAYOUT COLORS
   // =========================================================================
 
-  // Header
-  --pa-header-bg: #{$header-bg};
-  --pa-header-border-color: #{$header-border-color};
-  --pa-header-text: #{$header-text};
-  --pa-header-text-secondary: #{$header-text-secondary};
-  --pa-header-profile-name-color: #{$header-profile-name-color};
+  // Navbar
+  --pa-navbar-bg: #{$navbar-bg};
+  --pa-navbar-border-color: #{$navbar-border-color};
+  --pa-navbar-text: #{$navbar-text};
+  --pa-navbar-text-secondary: #{$navbar-text-secondary};
+  --pa-navbar-profile-name-color: #{$navbar-profile-name-color};
 
   // Sidebar
   --pa-sidebar-bg: #{$sidebar-bg};

package/src/scss/variables/_colors.scss

@@ -19,12 +19,12 @@ $text-color-1: $base-text-color-1 !default;
 $text-color-2: $base-text-color-2 !default;
 $border-color: $base-border-color !default;
 
-// Header colors
-$header-bg: $base-main-bg !default;
-$header-border-color: $base-border-color !default;
-$header-text: $base-text-color-1 !default;
-$header-text-secondary: $base-text-color-2 !default;
-$header-profile-name-color: $base-text-color-1 !default;
+// Navbar colors
+$navbar-bg: $base-main-bg !default;
+$navbar-border-color: $base-border-color !default;
+$navbar-text: $base-text-color-1 !default;
+$navbar-text-secondary: $base-text-color-2 !default;
+$navbar-profile-name-color: $base-text-color-1 !default;
 
 // Sidebar colors
 $sidebar-bg: $base-page-bg !default;

package/src/scss/variables/_layout.scss

@@ -6,8 +6,8 @@
 // NOTE: 10px rem base - all rem values are now in 10px units (1rem = 10px)
 
 // Layout dimensions
-$header-height: 4.8rem !default;           // 48px (was 3rem)
-$footer-height: $header-height !default;   // Same as header
+$navbar-height: 4.8rem !default;           // 48px (was 3rem)
+$footer-height: $navbar-height !default;   // Same as navbar
 $sidebar-width: 28.8rem !default;          // 288px (was 18rem)
 $sidebar-max-width: 40rem !default;        // 400px (was 25rem)
 $sidebar-collapsed-width: 6.4rem !default; // 64px (was 4rem)
@@ -33,9 +33,6 @@ $burger-bar-spacing: 4px !default;
 $burger-transform-offset: 3px !default;
 $burger-menu-margin-left: 0.3rem !default; // ~3px (was 0.2rem)
 
-// Header brand
-$header-brand-padding-left: 2.1rem !default; // ~21px (was 1.3rem)
-
 // Responsive breakpoints
 $mobile-breakpoint: 768px !default;
 $tablet-breakpoint: 1024px !default;

package/src/scss/variables/_system.scss

@@ -16,8 +16,8 @@ $z-index-base: 0 !default;
 $z-index-content: 1000 !default;
 $z-index-sidebar: 2000 !default;
 $z-index-sidebar-fixed: 3000 !default;
-$z-index-detail-panel-card: 3500 !default;  // Card overlay detail panel (below header)
-$z-index-header: 4000 !default;
+$z-index-detail-panel-card: 3500 !default;  // Card overlay detail panel (below navbar)
+$z-index-navbar: 4000 !default;
 $z-index-profile-panel: 5000 !default;
 $z-index-modal-backdrop: 6000 !default;
 $z-index-modal: 7000 !default;