@keenmate/pure-css 1.1.0 → 1.2.0

package/src/scss/pure-css.scss

@@ -1,48 +1,48 @@
-// @keenmate/pure-css — full foundation bundle
-// ============================================================================
-// The Keenmate CSS foundation, extracted from @keenmate/pure-admin-core so it
-// can be consumed on its own (docs sites, standalone pages, non-admin portals)
-// and so pure-admin-core, themes and any web/svelte component share ONE
-// theming contract: the `--base-*` (and derived `--pc-*`) custom properties.
-//
-// This bundle emits:
-//   1. `:root` defaults for the BASE --base-*/--pc-* tokens (light values) —
-//      surfaces, text, accent, links, border, semantic role identities, the
-//      theme palette slots, and the radius scale. Component tokens (buttons,
-//      cards, tables, alerts, …) are pure-admin's contract, NOT emitted here.
-//   2. the reboot (10px rem base + element reset — the sizing contract)
-//   3. themed scrollbars (global browser chrome)
-//   4. the native flexbox grid (.pc-row / .pc-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';
-
-// App shell — the navbar, sidebar, and layout container components. Relocated
-// from pure-admin-core so the foundation single-sources the shell; pure-admin
-// keeps same-named partials that just @forward these (resize-handle is a
-// mixin-only dependency @used by sidebar, so it emits nothing on its own).
-@use 'navbar';
-@use 'navbar-elements';
-@use 'sidebar';
-@use 'sidebar-states';
-@use 'layout-container';
-@use 'layout-responsive';
-@use 'fit-flyout';
-@use 'icon-hover';
-
-@use 'utilities';
-
-// CSS variable defaults at :root. Themes ship their own values by overriding
-// $base-* before importing base-css-variables; this only affects the unthemed
-// bundle and the FOUC window before a theme stylesheet resolves.
-:root {
-  @include bcv.output-base-css-variables;
-  @include bcv.output-pc-css-variables;
-}
+// @keenmate/pure-css — full foundation bundle
+// ============================================================================
+// The Keenmate CSS foundation, extracted from @keenmate/pure-admin-core so it
+// can be consumed on its own (docs sites, standalone pages, non-admin portals)
+// and so pure-admin-core, themes and any web/svelte component share ONE
+// theming contract: the `--base-*` (and derived `--pc-*`) custom properties.
+//
+// This bundle emits:
+//   1. `:root` defaults for the BASE --base-*/--pc-* tokens (light values) —
+//      surfaces, text, accent, links, border, semantic role identities, the
+//      theme palette slots, and the radius scale. Component tokens (buttons,
+//      cards, tables, alerts, …) are pure-admin's contract, NOT emitted here.
+//   2. the reboot (10px rem base + element reset — the sizing contract)
+//   3. themed scrollbars (global browser chrome)
+//   4. the native flexbox grid (.pc-row / .pc-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';
+
+// App shell — the navbar, sidebar, and layout container components. Relocated
+// from pure-admin-core so the foundation single-sources the shell; pure-admin
+// keeps same-named partials that just @forward these (resize-handle is a
+// mixin-only dependency @used by sidebar, so it emits nothing on its own).
+@use 'navbar';
+@use 'navbar-elements';
+@use 'sidebar';
+@use 'sidebar-states';
+@use 'layout-container';
+@use 'layout-responsive';
+@use 'fit-flyout';
+@use 'icon-hover';
+
+@use 'utilities';
+
+// CSS variable defaults at :root. Themes ship their own values by overriding
+// $base-* before importing base-css-variables; this only affects the unthemed
+// bundle and the FOUC window before a theme stylesheet resolves.
+:root {
+  @include bcv.output-base-css-variables;
+  @include bcv.output-pc-css-variables;
+}

package/src/scss/utilities.scss

@@ -709,16 +709,65 @@ $spacers: (
 .text-warning { color: var(--pc-warning-text) !important; }
 .text-info { color: var(--pc-info-text) !important; }
 
-// Text color utilities (theme custom colors 1-9)
-.text-color-1 { color: var(--pc-color-1) !important; }
-.text-color-2 { color: var(--pc-color-2) !important; }
-.text-color-3 { color: var(--pc-color-3) !important; }
-.text-color-4 { color: var(--pc-color-4) !important; }
-.text-color-5 { color: var(--pc-color-5) !important; }
-.text-color-6 { color: var(--pc-color-6) !important; }
-.text-color-7 { color: var(--pc-color-7) !important; }
-.text-color-8 { color: var(--pc-color-8) !important; }
-.text-color-9 { color: var(--pc-color-9) !important; }
+// Role SURFACE utilities — the role parallel of the numeric
+// .{bg,text-on,surface}-color-N family below. Fill = --pc-{role} (primary →
+// --pc-accent); on-fill contrast text = --base-text-on-{role} (the only on-role
+// contrast token — foreground .text-{role} above is a DIFFERENT colour). All
+// !important for cascade parity with the role text utilities.
+//
+//   .bg-{role}        role colour as background (no text change)
+//   .text-on-{role}   contrast text to sit on a role fill (pair with .bg-{role})
+//   .surface-{role}   role background + contrast text in one class
+@each $role, $fill in (primary: accent, success: success, warning: warning, danger: danger, info: info) {
+  .bg-#{$role} { background-color: var(--pc-#{$fill}) !important; }
+  .text-on-#{$role} { color: var(--base-text-on-#{$role}) !important; }
+  .surface-#{$role} {
+    background-color: var(--pc-#{$fill}) !important;
+    color: var(--base-text-on-#{$role}) !important;
+  }
+}
+
+// Text colour — neutral hierarchy. Maps to --pc-text-color-N (text HIERARCHY),
+// a DIFFERENT scale from the numbered .text-color-N palette below (--pc-color-N
+// data colours). `.text-secondary` is the flat muted/subdued text utility (the
+// muted token used to live only inside a component modifier); `.text-body` is the
+// explicit default body colour. !important so the colour wins when composed onto
+// a component that carries its own colour.
+.text-body      { color: var(--pc-text-color-1) !important; } // default body text (explicit)
+.text-secondary { color: var(--pc-text-color-2) !important; } // muted / subdued body text
+
+// Semantic text shorthands (compound).
+.text-caption {
+  font-size: $font-size-xs;
+  color: var(--pc-text-color-2);
+  margin-bottom: $spacing-sm;
+}
+.text-lead {
+  font-size: $font-size-base;
+  line-height: $line-height-relaxed;
+}
+
+// Theme palette colour utilities (theme custom colors 1-9).
+// Two token layers per slot: --pc-color-N (the slot) + --pc-color-N-text (its
+// guaranteed-contrasting text). Each form applies the slot to one property;
+// `.surface-color-N` is the composite (slot background + readable text). All
+// !important for cascade parity with the role colours above.
+//
+//   .text-color-N     slot as text colour
+//   .bg-color-N       slot as background
+//   .border-color-N   slot as border colour
+//   .text-on-color-N  contrast text only (pair with .bg-color-N yourself)
+//   .surface-color-N  slot background + contrast text in one class
+@for $i from 1 through 9 {
+  .text-color-#{$i} { color: var(--pc-color-#{$i}) !important; }
+  .bg-color-#{$i} { background-color: var(--pc-color-#{$i}) !important; }
+  .border-color-#{$i} { border-color: var(--pc-color-#{$i}) !important; }
+  .text-on-color-#{$i} { color: var(--pc-color-#{$i}-text) !important; }
+  .surface-color-#{$i} {
+    background-color: var(--pc-color-#{$i}) !important;
+    color: var(--pc-color-#{$i}-text) !important;
+  }
+}
 
 // Rounded utilities
 .rounded {

package/src/scss/variables/_base.scss

@@ -296,6 +296,14 @@ $base-border-radius-sm: 0.4 !default;  // 4px
 $base-border-radius-md: 0.6 !default;  // 6px
 $base-border-radius-lg: 0.8 !default;  // 8px
 
+// Checkbox BOX scale (web-component bridge: --base-checkbox-scale) — multiplies
+// the box's OWN width/height, NOT a CSS transform (a transform pixel-snaps the
+// fractionally-positioned mask glyph and shifts it off-centre). The box sizes as
+// `calc(<base-size> * var(--base-checkbox-scale))`, the glyph via
+// --base-icon-check-size. One knob every component with a checkbox reads, so a
+// theme resizes all of them in lockstep. 1 = the component's base size.
+$base-checkbox-scale: 1 !default;
+
 // Rem base for web components (bridge: --base-rem). They size themselves as
 // `calc(<unitless-multiplier> * var(--base-rem, 10px))`. pure-css pins
 // `html { font-size: 10px }` (reboot), so `1rem` tracks that base adaptively.