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

package/CHANGELOG.md

@@ -3,6 +3,34 @@
 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-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,6 +4,20 @@ The KeenMate CSS **foundation** — the `--base-*` theming contract, the flexbox
 utility classes — extracted from [`@keenmate/pure-admin-core`](https://github.com/KeenMate/pure-admin)
 so it can be consumed on its own.
 
+## What's New in 1.0.0-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`.
+
 ## What's New in 1.0.0-rc01
 
 - **The KeenMate CSS foundation, now standalone.** The `--base-*` theming
@@ -14,8 +28,9 @@ so it can be consumed on its own.
   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`.
+- **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.

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;

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-rc02",
   "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/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);
+}