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

package/CHANGELOG.md

@@ -3,6 +3,60 @@
 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
+
+- **Reboot layer (`reboot.scss`) — the reset the foundation always assumed.** Emits
+  `html { font-size: 10px }` (the 10px rem base every pure-css rem value is authored
+  against — `$font-size-base: 1.6rem` is 16px *only* at a 10px root), a `box-sizing:
+  border-box` reset, neutral base styling for standard elements (headings, paragraphs,
+  links, lists, blockquotes, `hr`, `figure`), the `body` font/colour/background, and the
+  `button/input/select/textarea/label { font: inherit }` reset. Relocated from
+  pure-admin-core's `core-components/_base.scss` so it sits with the rem-scale variables
+  that depend on it. Analogous to Bootstrap's Reboot.
+- **New `reboot.css` build artifact** + `./reboot` export, and `reboot` is now part of the
+  `pure-css.css` bundle (emitted before grid/utilities).
+- **Themed scrollbars (`scrollbars.scss`).** The global `*::-webkit-scrollbar` + Firefox
+  `scrollbar-width`/`scrollbar-color` styling (thin scrollbars coloured from the `--pa-*`
+  cascade), relocated from pure-admin-core's `core-components/_scrollbars.scss`. Global browser
+  chrome belongs with the foundation's consistent-appearance promise, so a standalone pure-css
+  page gets the same themed scrollbars as a full pure-admin app instead of native ones. Part of
+  the `pure-css.css` bundle, plus a standalone `scrollbars.css` artifact + `./scrollbars` export.
+
+### Fixed
+
+- **Standalone consumers no longer render 1.6× too large.** Before, the 10px base lived
+  only in pure-admin-core, so a page linking `pure-css.css` (or `base.css`) on its own
+  inherited the browser's 16px root and every rem was 1.6× oversized. The bundle now ships
+  the 10px base itself, so the sizing scale is correct out of the box.
+
 ## [1.0.0-rc01] — 2026-08-04
 
 Initial extraction of the CSS foundation out of `@keenmate/pure-admin-core`.

package/README.md

@@ -4,29 +4,24 @@ 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-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.
-- **Four link targets.** `pure-css.css` (everything) or cherry-pick `base.css`
-  (variables only), `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.
+## 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
+  `html { font-size: 10px }` (plus a `box-sizing` reset and neutral base element
+  styling) via the new `reboot.scss`, included in the `pure-css.css` bundle and
+  available standalone as `reboot.css` / the `./reboot` export. Every pure-css
+  rem value assumes a 10px root, so previously a standalone consumer rendered
+  everything 1.6× too large until they added the base themselves — now it just
+  works out of the box.
+- **Themed scrollbars, foundation-wide.** The global thin-scrollbar styling
+  (`scrollbars.scss`, coloured from the `--pa-*` cascade) moved out of
+  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`.
 
 ## Why
 

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

@@ -8,6 +8,134 @@
   --pa-surface-track: color-mix(in srgb, var(--pa-text-color-1) 12%, transparent);
 }
 
+html {
+  font-size: 10px;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  margin: 2.4rem 0 0.8rem 0;
+  padding: 0;
+}
+
+p {
+  margin: 0 0 1.6rem 0;
+  padding: 0;
+}
+
+:where(a) {
+  color: var(--pa-link-color);
+  text-decoration: underline;
+}
+
+:where(a:hover) {
+  color: var(--pa-link-color-hover);
+}
+
+:where(a:visited) {
+  color: var(--pa-link-color-visited);
+}
+
+ul, ol {
+  margin: 0 0 1.6rem 0;
+  padding: 0;
+  padding-inline-start: 3.2rem;
+}
+ul li, ol li {
+  margin-bottom: 0.4rem;
+}
+
+ul.unstyled, ol.unstyled {
+  list-style: none;
+  padding-inline-start: 0;
+}
+ul.unstyled li, ol.unstyled li {
+  margin-bottom: 0;
+}
+
+dl {
+  margin: 0 0 1.6rem 0;
+  padding: 0;
+}
+
+dd {
+  margin: 0;
+  padding: 0;
+}
+
+blockquote {
+  margin: 1.6rem 0 1.6rem 0;
+  padding-inline-start: 2.4rem;
+}
+
+pre {
+  overflow-x: auto;
+}
+
+hr {
+  margin: 2.4rem 0 2.4rem 0;
+}
+
+figure {
+  margin: 1.6rem 0 1.6rem 0;
+  padding: 0;
+}
+
+body {
+  margin: 0;
+  padding: 0;
+  font-family: var(--base-font-family);
+  font-size: 1.6rem;
+  color: var(--pa-text-color-1);
+  background-color: var(--pa-main-bg);
+  line-height: 1.5;
+}
+
+button,
+input,
+select,
+textarea,
+label {
+  font-family: inherit;
+  font-size: inherit;
+}
+
+/* Webkit browsers (Chrome, Safari, Edge) */
+*::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+
+*::-webkit-scrollbar-track {
+  background: var(--pa-main-bg);
+  border-radius: var(--pa-border-radius-sm);
+}
+
+*::-webkit-scrollbar-thumb {
+  background: var(--pa-border-color);
+  border-radius: var(--pa-border-radius-sm);
+  border: 1px solid var(--pa-main-bg);
+}
+*::-webkit-scrollbar-thumb:hover {
+  background: var(--pa-accent);
+}
+*::-webkit-scrollbar-thumb:active {
+  background: var(--pa-accent-hover);
+}
+
+*::-webkit-scrollbar-corner {
+  background: var(--pa-main-bg);
+}
+
+/* Firefox */
+* {
+  scrollbar-width: thin;
+  scrollbar-color: var(--pa-border-color) var(--pa-main-bg);
+}
+
 .pa-row {
   display: flex;
   flex-wrap: wrap;
@@ -4667,11 +4795,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/reboot.css

@@ -0,0 +1,94 @@
+html {
+  font-size: 10px;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  margin: 2.4rem 0 0.8rem 0;
+  padding: 0;
+}
+
+p {
+  margin: 0 0 1.6rem 0;
+  padding: 0;
+}
+
+:where(a) {
+  color: var(--pa-link-color);
+  text-decoration: underline;
+}
+
+:where(a:hover) {
+  color: var(--pa-link-color-hover);
+}
+
+:where(a:visited) {
+  color: var(--pa-link-color-visited);
+}
+
+ul, ol {
+  margin: 0 0 1.6rem 0;
+  padding: 0;
+  padding-inline-start: 3.2rem;
+}
+ul li, ol li {
+  margin-bottom: 0.4rem;
+}
+
+ul.unstyled, ol.unstyled {
+  list-style: none;
+  padding-inline-start: 0;
+}
+ul.unstyled li, ol.unstyled li {
+  margin-bottom: 0;
+}
+
+dl {
+  margin: 0 0 1.6rem 0;
+  padding: 0;
+}
+
+dd {
+  margin: 0;
+  padding: 0;
+}
+
+blockquote {
+  margin: 1.6rem 0 1.6rem 0;
+  padding-inline-start: 2.4rem;
+}
+
+pre {
+  overflow-x: auto;
+}
+
+hr {
+  margin: 2.4rem 0 2.4rem 0;
+}
+
+figure {
+  margin: 1.6rem 0 1.6rem 0;
+  padding: 0;
+}
+
+body {
+  margin: 0;
+  padding: 0;
+  font-family: var(--base-font-family);
+  font-size: 1.6rem;
+  color: var(--pa-text-color-1);
+  background-color: var(--pa-main-bg);
+  line-height: 1.5;
+}
+
+button,
+input,
+select,
+textarea,
+label {
+  font-family: inherit;
+  font-size: inherit;
+}

package/dist/css/scrollbars.css

@@ -0,0 +1,32 @@
+/* Webkit browsers (Chrome, Safari, Edge) */
+*::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+
+*::-webkit-scrollbar-track {
+  background: var(--pa-main-bg);
+  border-radius: var(--pa-border-radius-sm);
+}
+
+*::-webkit-scrollbar-thumb {
+  background: var(--pa-border-color);
+  border-radius: var(--pa-border-radius-sm);
+  border: 1px solid var(--pa-main-bg);
+}
+*::-webkit-scrollbar-thumb:hover {
+  background: var(--pa-accent);
+}
+*::-webkit-scrollbar-thumb:active {
+  background: var(--pa-accent-hover);
+}
+
+*::-webkit-scrollbar-corner {
+  background: var(--pa-main-bg);
+}
+
+/* Firefox */
+* {
+  scrollbar-width: thin;
+  scrollbar-color: var(--pa-border-color) var(--pa-main-bg);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@keenmate/pure-css",
-  "version": "1.0.0-rc01",
+  "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": {
@@ -8,6 +8,8 @@
     "./css": "./dist/css/pure-css.css",
     "./css/*": "./dist/css/*",
     "./base": "./dist/css/base.css",
+    "./reboot": "./dist/css/reboot.css",
+    "./scrollbars": "./dist/css/scrollbars.css",
     "./grid": "./dist/css/grid.css",
     "./utilities": "./dist/css/utilities.css",
     "./scss": "./src/scss/pure-css.scss",
@@ -23,9 +25,11 @@
   "scripts": {
     "build:bundle": "sass src/scss/pure-css.scss dist/css/pure-css.css --no-source-map --silence-deprecation=import",
     "build:base": "sass src/scss/base.scss dist/css/base.css --no-source-map --silence-deprecation=import",
+    "build:reboot": "sass src/scss/reboot.scss dist/css/reboot.css --no-source-map --silence-deprecation=import",
+    "build:scrollbars": "sass src/scss/scrollbars.scss dist/css/scrollbars.css --no-source-map --silence-deprecation=import",
     "build:grid": "sass src/scss/grid.scss dist/css/grid.css --no-source-map --silence-deprecation=import",
     "build:utilities": "sass src/scss/utilities.scss dist/css/utilities.css --no-source-map --silence-deprecation=import",
-    "build": "npm run build:bundle && npm run build:base && npm run build:grid && npm run build:utilities",
+    "build": "npm run build:bundle && npm run build:base && npm run build:reboot && npm run build:scrollbars && npm run build:grid && npm run build:utilities",
     "watch": "sass --watch src/scss/pure-css.scss:dist/css/pure-css.css --silence-deprecation=import",
     "prepublishOnly": "npm run build"
   },

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/pure-css.scss

@@ -7,14 +7,18 @@
 //
 // This bundle emits:
 //   1. `:root` defaults for every --base-*/--pa-* variable (light values)
-//   2. the native flexbox grid (.pa-row / .pa-col)
-//   3. the utility classes (.m-*, .d-flex, .w-*, …)
+//   2. the reboot (10px rem base + element reset — the sizing contract)
+//   3. themed scrollbars (global browser chrome)
+//   4. the native flexbox grid (.pa-row / .pa-col)
+//   5. the utility classes (.m-*, .d-flex, .w-*, …)
 //
 // A *theme* is just an override of the `$base-*` SCSS variables (or the
 // `--base-*` custom properties) — everything else re-derives. See README.
 // ============================================================================
 
 @use 'base-css-variables' as bcv;
+@use 'reboot';
+@use 'scrollbars';
 @use 'pa-grid';
 @use 'utilities';
 

package/src/scss/reboot.scss

@@ -0,0 +1,134 @@
+// @keenmate/pure-css — reset & base element styling ("reboot")
+// ============================================================================
+// The foundation's reset layer. Establishes the 10px rem base that EVERY
+// pure-css rem value assumes (see variables/_typography.scss — `$font-size-base:
+// 1.6rem` is 16px only when the root is 10px), a border-box reset, and neutral
+// base styling for standard HTML elements (headings, paragraphs, links, lists,
+// blockquotes, rules, the body font/colour). Analogous to Bootstrap's Reboot.
+//
+// This lives in pure-css — not in a consuming app — because the 10px base is
+// part of the foundation's sizing contract: without it, a standalone consumer
+// inherits the browser's 16px root and every rem renders 1.6x too large. Link
+// it (or the full `pure-css.css` bundle) and the scale just works.
+//
+// App-specific base rules (the admin dashboard's decorative body background,
+// sidebar overflow handling) intentionally stay in pure-admin-core; a generic
+// foundation shouldn't impose them on every consumer.
+// ============================================================================
+
+@use 'variables/index' as *;
+
+// 10px rem base for intuitive sizing (1rem = 10px)
+// This makes calculations simple: 1.5rem = 15px, 3.5rem = 35px
+html {
+  font-size: 10px;
+}
+
+// Reset and base styles
+* {
+  box-sizing: border-box;
+}
+
+// Standard HTML element spacing (using framework variables)
+// Headings
+h1, h2, h3, h4, h5, h6 {
+  margin: $heading-margin-top 0 $heading-margin-bottom 0;
+  padding: 0;
+}
+
+// Paragraphs
+p {
+  margin: $paragraph-margin-top 0 $paragraph-margin-bottom 0;
+  padding: 0;
+}
+
+// Links — global default. Wrapped in :where() so specificity is 0,
+// letting component scopes (alerts, navbar, sidebar) override with even a
+// single class without fighting the pseudo-class specificity raise that
+// `a:hover` / `a:visited` would otherwise add (0,1,1 vs a class's 0,1,0).
+:where(a) {
+  color: var(--pa-link-color);
+  text-decoration: underline;
+}
+
+:where(a:hover) {
+  color: var(--pa-link-color-hover);
+}
+
+:where(a:visited) {
+  color: var(--pa-link-color-visited);
+}
+
+// Lists - styled lists (default browser styling)
+ul, ol {
+  margin: $list-margin-top 0 $list-margin-bottom 0;
+  padding: 0;
+  padding-inline-start: $list-padding-left; // RTL: flips to right
+
+  li {
+    margin-bottom: $list-item-margin-bottom;
+  }
+}
+
+// Lists - unstyled (for navigation, etc.)
+ul.unstyled, ol.unstyled {
+  list-style: none;
+  padding-inline-start: 0; // RTL: flips to right
+
+  li {
+    margin-bottom: 0;
+  }
+}
+
+// Definition lists
+dl {
+  margin: $list-margin-top 0 $list-margin-bottom 0;
+  padding: 0;
+}
+
+dd {
+  margin: 0;
+  padding: 0;
+}
+
+// Blockquote
+blockquote {
+  margin: $blockquote-margin-top 0 $blockquote-margin-bottom 0;
+  padding-inline-start: $blockquote-padding-left; // RTL: flips to right
+}
+
+// Pre/Code blocks
+pre {
+  overflow-x: auto;
+}
+
+// Horizontal rule
+hr {
+  margin: $hr-margin-top 0 $hr-margin-bottom 0;
+}
+
+// Figure
+figure {
+  margin: $figure-margin-top 0 $figure-margin-bottom 0;
+  padding: 0;
+}
+
+body {
+  margin: 0;
+  padding: 0;
+  font-family: var(--base-font-family);
+  font-size: 1.6rem; // 16px default text (with 10px rem base)
+  color: var(--pa-text-color-1);
+  background-color: var(--pa-main-bg);
+  line-height: $line-height-base;
+}
+
+// Ensure form elements and labels inherit theme font and size instead of browser defaults
+button,
+input,
+select,
+textarea,
+label {
+  font-family: inherit;
+  font-size: inherit;
+}

package/src/scss/scrollbars.scss

@@ -0,0 +1,48 @@
+// @keenmate/pure-css — global scrollbar styling
+// ============================================================================
+// Themed, consistent scrollbars across browsers (WebKit `::-webkit-scrollbar`
+// pseudo-elements + the Firefox `scrollbar-width` / `scrollbar-color`
+// properties). Global `*` chrome — part of the foundation's "consistent
+// appearance" promise, so a standalone pure-css page gets the same thin themed
+// scrollbars as a full pure-admin app rather than native browser ones.
+//
+// Colours come from the emitted `--pa-*` cascade, so scrollbars re-theme at
+// runtime with everything else.
+// ============================================================================
+
+@use 'variables/index' as *;
+
+/* Webkit browsers (Chrome, Safari, Edge) */
+*::-webkit-scrollbar {
+  width: $scrollbar-width;
+  height: $scrollbar-width;
+}
+
+*::-webkit-scrollbar-track {
+  background: var(--pa-main-bg);
+  border-radius: var(--pa-border-radius-sm);
+}
+
+*::-webkit-scrollbar-thumb {
+  background: var(--pa-border-color);
+  border-radius: var(--pa-border-radius-sm);
+  border: $border-width-base solid var(--pa-main-bg);
+
+  &:hover {
+    background: var(--pa-accent);
+  }
+
+  &:active {
+    background: var(--pa-accent-hover);
+  }
+}
+
+*::-webkit-scrollbar-corner {
+  background: var(--pa-main-bg);
+}
+
+/* Firefox */
+* {
+  scrollbar-width: thin;
+  scrollbar-color: var(--pa-border-color) var(--pa-main-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;