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

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);
     }
 
@@ -191,13 +191,15 @@ body.pc-layout--sticky .pc-layout__sidebar {
     // Sized on the md input height (35px) to match the navbar search boxes,
     // rather than the icon + $sidebar-padding metric of a nav row (40px). Trade-off:
     // it sits ~5px shorter than the links below it. Block padding is dropped (fixed
-    // height + align-items:center owns the vertical); inline uses $spacing-base
-    // (the inline half of the two-value $sidebar-padding — don't pass that token to
-    // a single axis).
+    // height + align-items:center owns the vertical).
+    // Inline padding: right = $spacing-base (the nav-row inset); left = $spacing-sm
+    // so that margin ($spacing-sm) + padding-left ($spacing-sm) = $spacing-base —
+    // landing the magnifier exactly where the nav-row icons below it sit, instead
+    // of one box-margin too far in.
     height: #{$base-input-size-md-height}rem;
-    padding: 0 $spacing-base;
+    padding: 0 $spacing-base 0 $spacing-sm;
     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,12 +218,16 @@ 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
-    // icon lands in the same column as every other sidebar icon.
-    .pc-layout__sidebar--icon-collapse & {
+    // Collapsed rail ONLY (icon-collapse mode AND actually collapsed, i.e.
+    // body.sidebar-hidden): drop the frame, icon-only, matching link padding so
+    // the icon lands in the same column as every other sidebar icon. Must be
+    // gated by .sidebar-hidden — .pc-layout__sidebar--icon-collapse is the MODE
+    // class and stays on the element while the rail is expanded, so an unscoped
+    // rule would strip the search frame in the expanded state too.
+    .sidebar-hidden .pc-layout__sidebar--icon-collapse & {
       width: auto;
       margin: 0;
       padding: $sidebar-padding;
@@ -267,7 +273,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;
 
@@ -283,9 +289,11 @@ body.pc-layout--sticky .pc-layout__sidebar {
       }
     }
 
-    // Collapsed rail: the input variant sheds its field and centres on the submit
-    // icon; clicking it submits with an empty query (the bare results page).
-    .pc-layout__sidebar--icon-collapse &--input {
+    // Collapsed rail ONLY: the input variant sheds its field and centres on the
+    // submit icon; clicking it submits with an empty query (the bare results
+    // page). Gated by .sidebar-hidden so the field reappears when the icon-collapse
+    // rail is expanded (see frame rule above for why the mode class isn't enough).
+    .sidebar-hidden .pc-layout__sidebar--icon-collapse &--input {
       justify-content: center;
 
       .pc-sidebar__search-field {
@@ -300,7 +308,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 +321,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 +362,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 +376,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
     }
   }

package/src/scss/reboot.scss

@@ -119,7 +119,7 @@ body {
   font-family: var(--base-font-family);
   font-size: 1.6rem; // 16px default text (with 10px rem base)
   color: var(--pc-text-color-1);
-  background-color: var(--pc-main-bg);
+  background-color: var(--pc-page-bg);
   line-height: $line-height-base;
 }
 

package/src/scss/scrollbars.scss

@@ -19,14 +19,14 @@
 }
 
 *::-webkit-scrollbar-track {
-  background: var(--pc-main-bg);
+  background: var(--pc-page-bg);
   border-radius: var(--pc-border-radius-sm);
 }
 
 *::-webkit-scrollbar-thumb {
   background: var(--pc-border-color);
   border-radius: var(--pc-border-radius-sm);
-  border: $border-width-base solid var(--pc-main-bg);
+  border: $border-width-base solid var(--pc-page-bg);
 
   &:hover {
     background: var(--pc-accent);
@@ -38,11 +38,11 @@
 }
 
 *::-webkit-scrollbar-corner {
-  background: var(--pc-main-bg);
+  background: var(--pc-page-bg);
 }
 
 /* Firefox */
 * {
   scrollbar-width: thin;
-  scrollbar-color: var(--pc-border-color) var(--pc-main-bg);
+  scrollbar-color: var(--pc-border-color) var(--pc-page-bg);
 }

package/src/scss/variables/_base.scss

@@ -43,7 +43,12 @@ $base-subtle-bg: #e9ecef !default;        // Muted areas, dividers
 $base-inverse-bg: #2c3e50 !default;       // Inverse background (tooltips, dark elements)
 $base-overlay-bg: rgba(0, 0, 0, 0.5) !default;  // Modal/overlay background
 $base-shadow-color: rgba(0, 0, 0, 0.15) !default;  // Shadow color for elevation
-$base-elevated-bg: #f5f5f5 !default;  // Header row, striped rows, elevated surfaces
+// Elevated surface (header rows, striped rows, popovers/toolbars). Defaults to
+// the page background so the default theme's header appearance is unchanged, but
+// themes can override it independently to create a distinct raised tone.
+$base-elevated-bg: $base-page-bg !default;
+// Text on inverse/dark surfaces (web-component bridge: --base-text-inverted).
+$base-text-inverted: #ffffff !default;
 
 // Interactive state backgrounds
 $base-hover-bg: $base-subtle-bg !default;         // Hover state background
@@ -57,6 +62,8 @@ $base-disabled-bg: $base-subtle-bg !default;      // Disabled element background
 
 $base-border-color: #e1e5e9 !default;
 $base-border: 1px solid $base-border-color !default;
+// Checkbox/radio border (web-component bridge: --base-checkbox-border-color).
+$base-checkbox-border-color: $base-border-color !default;
 
 // =============================================================================
 // INPUT FIELDS
@@ -65,11 +72,20 @@ $base-border: 1px solid $base-border-color !default;
 
 $base-input-bg: $base-main-bg !default;
 $base-input-color: #495057 !default;
-$base-input-border: 1px solid #ced4da !default;
+// Input border as a colour (single source) + the 1px shorthand web components
+// read via --base-input-border. Note: pure-admin's own inputs currently border
+// off --base-border-color (#e1e5e9), not this (#ced4da) — a deliberate divergence
+// kept to preserve appearance; see _colors.scss $input-border.
+$base-input-border-color: #ced4da !default;
+$base-input-border: 1px solid $base-input-border-color !default;
 $base-input-border-hover: 1px solid #b8bfc6 !default;
 $base-input-border-focus: 1px solid $base-accent-color !default;
 $base-input-placeholder-color: $base-text-color-4 !default;
 $base-input-bg-disabled: rgba($base-input-bg, 0.5) !default;
+// Inline clear ("×") affordance inside inputs (web-component bridge:
+// --base-input-clear-color / --base-input-clear-bg-hover).
+$base-input-clear-color: $base-text-color-3 !default;
+$base-input-clear-bg-hover: $base-hover-bg !default;
 
 // Input size heights (unitless multipliers for x10px base)
 $base-input-size-xs-height: 3.1 !default;  // 31px
@@ -101,6 +117,7 @@ $base-tooltip-text-color: #ffffff !default;
 // =============================================================================
 
 $base-success-color: #22c55e !default;  // Tailwind green-500 — aligns with --pc-positive in the sentiment scale
+$base-success-bg: $base-success-color !default;  // Solid role fill (web-component bridge: --base-success-bg)
 $base-success-color-hover: color.adjust($base-success-color, $lightness: -10%) !default;
 $base-success-bg-light: rgba($base-success-color, 0.1) !default;
 $base-success-bg-subtle: rgba($base-success-color, 0.08) !default;
@@ -115,6 +132,7 @@ $base-text-on-success: #ffffff !default;
 // =============================================================================
 
 $base-danger-color: #ef4444 !default;  // Tailwind red-500 — aligns with --pc-negative in the sentiment scale
+$base-danger-bg: $base-danger-color !default;  // Solid role fill (web-component bridge: --base-danger-bg)
 $base-danger-color-hover: color.adjust($base-danger-color, $lightness: -10%) !default;
 $base-danger-bg-light: rgba($base-danger-color, 0.1) !default;
 $base-danger-bg-subtle: rgba($base-danger-color, 0.08) !default;
@@ -129,6 +147,7 @@ $base-text-on-danger: #ffffff !default;
 // =============================================================================
 
 $base-warning-color: #f97316 !default;  // Tailwind orange-500 — also serves as the off-target axis in KPI components
+$base-warning-bg: $base-warning-color !default;  // Solid role fill (web-component bridge: --base-warning-bg)
 $base-warning-color-hover: color.adjust($base-warning-color, $lightness: -10%) !default;
 $base-warning-bg-light: rgba($base-warning-color, 0.1) !default;
 $base-warning-bg-subtle: rgba($base-warning-color, 0.08) !default;
@@ -210,6 +229,11 @@ $base-border-radius-sm: 0.4 !default;  // 4px
 $base-border-radius-md: 0.6 !default;  // 6px
 $base-border-radius-lg: 0.8 !default;  // 8px
 
+// 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.
+$base-rem: 1rem !default;
+
 // =============================================================================
 // COMPONENT-SPECIFIC DERIVED VALUES
 // Variables that components need, derived from base

package/src/scss/variables/_colors.scss

@@ -12,9 +12,12 @@
 // LAYOUT COLORS (derived from base)
 // =============================================================================
 
-$main-bg: $base-page-bg !default;
+// Surface tokens aligned with --base-*: main = the primary/raised surface (white),
+// page = the canvas behind it (grey), subtle = a muted tone. (Previously main was
+// wired to the page grey and subtle to white — an inversion vs --base-*.)
+$main-bg: $base-main-bg !default;
 $page-bg: $base-page-bg !default;
-$subtle-bg: $base-main-bg !default;
+$subtle-bg: $base-subtle-bg !default;
 $text-color-1: $base-text-color-1 !default;
 $text-color-2: $base-text-color-2 !default;
 $border-color: $base-border-color !default;
@@ -48,27 +51,30 @@ $accent-light: $base-accent-color-light !default;
 // CARD COLORS (derived from base surfaces)
 // =============================================================================
 
+// Body surfaces → main-bg; header/tab chrome → elevated-bg (defaults to page-bg,
+// so unchanged by default; themeable independently). Reconciled so these resolve
+// to the same base tokens the web components read.
 $card-bg: $base-main-bg !default;
-$card-header-bg: $base-page-bg !default;
+$card-header-bg: $base-elevated-bg !default;
 $card-footer-bg: $base-main-bg !default;
-$card-tabs-bg: $base-page-bg !default;
+$card-tabs-bg: $base-elevated-bg !default;
 
 // =============================================================================
 // INPUT COLORS (derived from base input vars)
 // =============================================================================
 
 $input-bg: $base-input-bg !default;
-$input-border: #ced4da !default;  // Extracted from base-input-border
+$input-border: $base-input-border-color !default;  // single-sourced from base (was hardcoded #ced4da)
 $input-text: $base-input-color !default;
 
 // =============================================================================
 // TABLE COLORS (derived from base surfaces)
 // =============================================================================
 
-$table-stripe: $base-page-bg !default;
+$table-stripe: $base-elevated-bg !default;   // striped/elevated rows → elevated-bg (= page-bg default)
 $table-bg: $base-main-bg !default;
-$table-header-bg: $base-page-bg !default;
-$table-hover-bg: $base-page-bg !default;
+$table-header-bg: $base-elevated-bg !default;  // header chrome → elevated-bg (= page-bg default)
+$table-hover-bg: $base-hover-bg !default;     // RECONCILED: was page-bg; now the shared hover surface
 
 // Table row hover accent (border)
 $table-hover-accent-width: 0 !default;
@@ -177,7 +183,7 @@ $tooltip-text: $base-tooltip-text-color !default;
 
 $popover-text-light: #ffffff !default;
 $popover-text-dark: #000000 !default;
-$popover-content-bg: $base-main-bg !default;
+$popover-content-bg: $base-dropdown-bg !default;  // floating surface → dropdown-bg (= main-bg default)
 
 // =============================================================================
 // CODE LANGUAGE COLORS (standalone - not themed)

package/src/scss/variables/_components.scss

@@ -276,7 +276,7 @@ $form-group-margin-compact: 1.2rem !default;  // 12px (was 0.75rem)
 // Custom checkbox appearance (tri-state support)
 $checkbox-border-radius: $border-radius !default;         // Match input border-radius
 $checkbox-border-width: $border-width-base !default;      // 1px
-$checkbox-border-color: $border-color !default;           // Default border
+$checkbox-border-color: $base-checkbox-border-color !default;  // reconciled: shared checkbox-border knob (= border-color default)
 $checkbox-border-color-hover: $accent-color !default;     // Hover border
 $checkbox-border-color-checked: $accent-color !default;   // Checked border
 $checkbox-bg: $card-bg !default;                          // Unchecked background
@@ -291,17 +291,17 @@ $checkbox-transition: $transition-fast !default;
 // ============================================================================
 $multiselect-input-padding-v: $input-padding-v !default;
 $multiselect-input-padding-h: $input-padding-h !default;
-$multiselect-dropdown-bg: $card-bg !default;
+$multiselect-dropdown-bg: $base-dropdown-bg !default;  // reconciled: floating surface → dropdown-bg (= main-bg default)
 $multiselect-dropdown-border: $border-color !default;
 $multiselect-dropdown-text: $text-color-1 !default;
 $multiselect-dropdown-shadow: $shadow-lg !default;
 $multiselect-dropdown-max-height: 32rem !default;  // 320px (was 20rem)
-$multiselect-hint-bg: $main-bg !default;
+$multiselect-hint-bg: $page-bg !default;  // canvas tone (was $main-bg, which is now the white surface)
 $multiselect-hint-border: $border-color !default;
 $multiselect-hint-padding: $spacing-sm !default;
 $multiselect-option-padding-v: $spacing-sm !default;
 $multiselect-option-padding-h: $spacing-md !default;
-$multiselect-option-hover-bg: $main-bg !default;
+$multiselect-option-hover-bg: $base-hover-bg !default;  // RECONCILED: was main-bg; now the shared hover surface
 $multiselect-pill-bg: $accent-light !default;
 $multiselect-pill-border: $accent-color !default;
 $multiselect-pill-padding: $spacing-xs $spacing-sm !default;