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

package/src/scss/_base-css-variables.scss

@@ -47,18 +47,25 @@
   --base-disabled-bg: #{$base-disabled-bg};
   --base-elevated-bg: #{$base-elevated-bg};
 
+  // === Text on inverse surfaces ===
+  --base-text-inverted: #{$base-text-inverted};
+
   // === Border Colors ===
   --base-border-color: #{$base-border-color};
   --base-border: #{$base-border};
+  --base-checkbox-border-color: #{$base-checkbox-border-color};
 
   // === Input Fields ===
   --base-input-bg: #{$base-input-bg};
   --base-input-color: #{$base-input-color};
   --base-input-border: #{$base-input-border};
+  --base-input-border-color: #{$base-input-border-color};
   --base-input-border-hover: #{$base-input-border-hover};
   --base-input-border-focus: #{$base-input-border-focus};
   --base-input-placeholder-color: #{$base-input-placeholder-color};
   --base-input-bg-disabled: #{$base-input-bg-disabled};
+  --base-input-clear-color: #{$base-input-clear-color};
+  --base-input-clear-bg-hover: #{$base-input-clear-bg-hover};
 
   // === Input Size Heights ===
   --base-input-size-xs-height: #{$base-input-size-xs-height};
@@ -75,9 +82,11 @@
   // === Tooltip ===
   --base-tooltip-bg: #{$base-tooltip-bg};
   --base-tooltip-text-color: #{$base-tooltip-text-color};
+  --base-tooltip-color: #{$base-tooltip-text-color};  // alias consumed by web-grid
 
   // === Contextual Colors - Success ===
   --base-success-color: #{$base-success-color};
+  --base-success-bg: #{$base-success-bg};
   --base-success-color-hover: #{$base-success-color-hover};
   --base-success-bg-light: #{$base-success-bg-light};
   --base-success-bg-subtle: #{$base-success-bg-subtle};
@@ -88,6 +97,7 @@
 
   // === Contextual Colors - Danger ===
   --base-danger-color: #{$base-danger-color};
+  --base-danger-bg: #{$base-danger-bg};
   --base-danger-color-hover: #{$base-danger-color-hover};
   --base-danger-bg-light: #{$base-danger-bg-light};
   --base-danger-bg-subtle: #{$base-danger-bg-subtle};
@@ -98,6 +108,7 @@
 
   // === Contextual Colors - Warning ===
   --base-warning-color: #{$base-warning-color};
+  --base-warning-bg: #{$base-warning-bg};
   --base-warning-color-hover: #{$base-warning-color-hover};
   --base-warning-bg-light: #{$base-warning-bg-light};
   --base-warning-bg-subtle: #{$base-warning-bg-subtle};
@@ -144,6 +155,9 @@
   --base-border-radius-sm: #{$base-border-radius-sm};
   --base-border-radius-md: #{$base-border-radius-md};
   --base-border-radius-lg: #{$base-border-radius-lg};
+
+  // === Rem base for web components ===
+  --base-rem: #{$base-rem};
 }
 
 // ============================================================================
@@ -209,17 +223,20 @@
   // to the `.pc-mode-dark` block.
   color-scheme: #{$theme-color-scheme};
 
-  // Surfaces
+  // Surfaces. NOTE: pure-admin's --pc-main-bg is the *page* surface and
+  // --pc-subtle-bg the *card* surface — a legacy naming inversion vs the
+  // --base-* model (--base-main-bg = card), so those two stay compile-time to
+  // avoid a value flip. --pc-page-bg maps cleanly and is relinked.
   --pc-main-bg: #{$main-bg};
-  --pc-page-bg: #{$page-bg};
+  --pc-page-bg: var(--base-page-bg, #{$page-bg});
   --pc-subtle-bg: #{$subtle-bg};
 
-  // Text
-  --pc-text-color-1: #{$text-color-1};
-  --pc-text-color-2: #{$text-color-2};
+  // Text — follow the shared --base-* tokens at runtime.
+  --pc-text-color-1: var(--base-text-color-1, #{$text-color-1});
+  --pc-text-color-2: var(--base-text-color-2, #{$text-color-2});
 
   // Accent — -light derives from --pc-accent at runtime so theme overrides cascade.
-  --pc-accent: #{$accent-color};
+  --pc-accent: var(--base-accent-color, #{$accent-color});
   --pc-accent-hover: #{$accent-hover};
   --pc-accent-light: color-mix(in srgb, var(--pc-accent) 5%, transparent);
 
@@ -270,10 +287,17 @@
   --pc-color-8-text: #{$color-8-text};
   --pc-color-9-text: #{$color-9-text};
 
-  // Border-radius scale
-  --pc-border-radius-sm: #{$border-radius-sm};
-  --pc-border-radius: #{$border-radius};
-  --pc-border-radius-lg: #{$border-radius-lg};
+  // Border-radius scale — derived from the --base-border-radius-* contract (the
+  // same unitless rem-multipliers the web/svelte components read; e.g.
+  // web-multiselect: `calc(var(--base-border-radius-md) * --ms-rem)`). Multiplying
+  // by 1rem yields px at pure-css's 10px rem base (0.6 → 0.6rem → 6px) and keeps
+  // the scale live: overriding --base-border-radius-* at runtime re-rounds
+  // pure-css's own elements and the components together, instead of the old baked
+  // 2/4/8px literals that ignored the base contract. The $base-* multipliers are
+  // the fallbacks. NOTE: --pc-border-radius (unsuffixed) is the MID (-md) step.
+  --pc-border-radius-sm: calc(var(--base-border-radius-sm, #{$base-border-radius-sm}) * 1rem);
+  --pc-border-radius: calc(var(--base-border-radius-md, #{$base-border-radius-md}) * 1rem);
+  --pc-border-radius-lg: calc(var(--base-border-radius-lg, #{$base-border-radius-lg}) * 1rem);
 }
 
 // ============================================================================
@@ -328,6 +352,14 @@
   // LAYOUT COLORS
   // =========================================================================
 
+  // The app shell (navbar / sidebar / footer) is a DISTINCT brand surface: a
+  // theme sets its own $navbar-bg / $sidebar-bg / $footer-bg (e.g. Express's
+  // yellow bar), independent of the --base-* card/page palette. So emit these
+  // compile-time — NOT `var(--base-main-bg, …)`, which would let the always-set
+  // --base-main-bg win and erase the brand colour. The standalone (base.css
+  // only) fallback lives where it belongs: the shell CSS itself resolves
+  // `var(--pc-navbar-bg, var(--base-main-bg))` when no --pc-* is emitted.
+
   // Navbar
   --pc-navbar-bg: #{$navbar-bg};
   --pc-navbar-border-color: #{$navbar-border-color};
@@ -353,10 +385,10 @@
   // =========================================================================
 
   // Primary (uses accent color)
-  --pc-btn-primary-bg: #{$btn-primary-bg};
-  --pc-btn-primary-bg-hover: #{$btn-primary-bg-hover};
+  --pc-btn-primary-bg: var(--base-accent-color, #{$btn-primary-bg});
+  --pc-btn-primary-bg-hover: var(--base-accent-color-hover, #{$btn-primary-bg-hover});
   --pc-btn-primary-bg-light: color-mix(in srgb, var(--pc-btn-primary-bg) 5%, transparent);
-  --pc-btn-primary-text: #{$btn-primary-text};
+  --pc-btn-primary-text: var(--base-text-color-on-accent, #{$btn-primary-text});
 
   // Secondary
   --pc-btn-secondary-bg: #{$btn-secondary-bg};
@@ -366,28 +398,28 @@
 
   // Success — bg references role colour for runtime cascade
   --pc-btn-success-bg: var(--pc-success);
-  --pc-btn-success-bg-hover: #{$btn-success-bg-hover};
-  --pc-btn-success-text: #{$btn-success-text};
+  --pc-btn-success-bg-hover: var(--base-success-color-hover, #{$btn-success-bg-hover});
+  --pc-btn-success-text: var(--base-text-on-success, #{$btn-success-text});
 
   // Danger — bg references role colour for runtime cascade
   --pc-btn-danger-bg: var(--pc-danger);
-  --pc-btn-danger-bg-hover: #{$btn-danger-bg-hover};
-  --pc-btn-danger-text: #{$btn-danger-text};
+  --pc-btn-danger-bg-hover: var(--base-danger-color-hover, #{$btn-danger-bg-hover});
+  --pc-btn-danger-text: var(--base-text-on-danger, #{$btn-danger-text});
 
   // Warning — bg references role colour for runtime cascade
   --pc-btn-warning-bg: var(--pc-warning);
-  --pc-btn-warning-bg-hover: #{$btn-warning-bg-hover};
-  --pc-btn-warning-text: #{$btn-warning-text};
+  --pc-btn-warning-bg-hover: var(--base-warning-color-hover, #{$btn-warning-bg-hover});
+  --pc-btn-warning-text: var(--base-text-on-warning, #{$btn-warning-text});
 
   // Info — bg references role colour for runtime cascade
   --pc-btn-info-bg: var(--pc-info);
-  --pc-btn-info-bg-hover: #{$btn-info-bg-hover};
-  --pc-btn-info-text: #{$btn-info-text};
+  --pc-btn-info-bg-hover: var(--base-info-color-hover, #{$btn-info-bg-hover});
+  --pc-btn-info-text: var(--base-text-on-info, #{$btn-info-text});
 
   // Light
-  --pc-btn-light-bg: #{$btn-light-bg};
-  --pc-btn-light-bg-hover: #{$btn-light-bg-hover};
-  --pc-btn-light-text: #{$btn-light-text};
+  --pc-btn-light-bg: var(--base-page-bg, #{$btn-light-bg});
+  --pc-btn-light-bg-hover: var(--base-subtle-bg, #{$btn-light-bg-hover});
+  --pc-btn-light-text: var(--base-text-color-1, #{$btn-light-text});
 
   // Dark
   --pc-btn-dark-bg: #{$btn-dark-bg};
@@ -401,81 +433,81 @@
   // --pc-{success,danger,warning,info}-text live in the base contract.)
   // =========================================================================
   --pc-success-bg: var(--pc-success);
-  --pc-success-bg-hover: #{$success-bg-hover};
+  --pc-success-bg-hover: var(--base-success-color-hover, #{$success-bg-hover});
   --pc-success-bg-light: color-mix(in srgb, var(--pc-success) 10%, transparent);
   --pc-success-bg-subtle: color-mix(in srgb, var(--pc-success) 8%, transparent);
   --pc-success-border: color-mix(in srgb, var(--pc-success) 20%, transparent);
-  --pc-success-text-light: #{$success-text-light};
+  --pc-success-text-light: var(--base-success-text-light, #{$success-text-light});
 
   --pc-danger-bg: var(--pc-danger);
-  --pc-danger-bg-hover: #{$danger-bg-hover};
+  --pc-danger-bg-hover: var(--base-danger-color-hover, #{$danger-bg-hover});
   --pc-danger-bg-light: color-mix(in srgb, var(--pc-danger) 10%, transparent);
   --pc-danger-bg-subtle: color-mix(in srgb, var(--pc-danger) 8%, transparent);
   --pc-danger-border: color-mix(in srgb, var(--pc-danger) 20%, transparent);
-  --pc-danger-text-light: #{$danger-text-light};
+  --pc-danger-text-light: var(--base-danger-text-light, #{$danger-text-light});
 
   --pc-warning-bg: var(--pc-warning);
-  --pc-warning-bg-hover: #{$warning-bg-hover};
+  --pc-warning-bg-hover: var(--base-warning-color-hover, #{$warning-bg-hover});
   --pc-warning-bg-light: color-mix(in srgb, var(--pc-warning) 10%, transparent);
   --pc-warning-bg-subtle: color-mix(in srgb, var(--pc-warning) 8%, transparent);
   --pc-warning-border: color-mix(in srgb, var(--pc-warning) 20%, transparent);
-  --pc-warning-text-light: #{$warning-text-light};
+  --pc-warning-text-light: var(--base-warning-text-light, #{$warning-text-light});
 
   --pc-info-bg: var(--pc-info);
-  --pc-info-bg-hover: #{$info-bg-hover};
+  --pc-info-bg-hover: var(--base-info-color-hover, #{$info-bg-hover});
   --pc-info-bg-light: color-mix(in srgb, var(--pc-info) 10%, transparent);
   --pc-info-bg-subtle: color-mix(in srgb, var(--pc-info) 8%, transparent);
   --pc-info-border: color-mix(in srgb, var(--pc-info) 20%, transparent);
-  --pc-info-text-light: #{$info-text-light};
+  --pc-info-text-light: var(--base-info-text-light, #{$info-text-light});
 
   // =========================================================================
   // CARD COLORS
   // =========================================================================
-  --pc-card-bg: #{$card-bg};
-  --pc-card-header-bg: #{$card-header-bg};
-  --pc-card-footer-bg: #{$card-footer-bg};
-  --pc-card-tabs-bg: #{$card-tabs-bg};
+  --pc-card-bg: var(--base-main-bg, #{$card-bg});
+  --pc-card-header-bg: var(--base-elevated-bg, #{$card-header-bg});
+  --pc-card-footer-bg: var(--base-main-bg, #{$card-footer-bg});
+  --pc-card-tabs-bg: var(--base-elevated-bg, #{$card-tabs-bg});
 
   // =========================================================================
   // INPUT/FORM COLORS
   // =========================================================================
-  --pc-input-bg: #{$input-bg};
-  --pc-input-border: #{$input-border};
-  --pc-input-text: #{$input-text};
-  --pc-input-focus-border-color: #{$input-focus-border-color};
-  --pc-select-focus-border-color: #{$select-focus-border-color};
-  --pc-textarea-focus-border-color: #{$textarea-focus-border-color};
-
-  // Checkbox
-  --pc-checkbox-border-color: #{$checkbox-border-color};
-  --pc-checkbox-border-color-hover: #{$checkbox-border-color-hover};
-  --pc-checkbox-border-color-checked: #{$checkbox-border-color-checked};
-  --pc-checkbox-bg: #{$checkbox-bg};
-  --pc-checkbox-bg-checked: #{$checkbox-bg-checked};
-  --pc-checkbox-bg-indeterminate: #{$checkbox-bg-indeterminate};
+  --pc-input-bg: var(--base-input-bg, #{$input-bg});
+  --pc-input-border: var(--base-input-border-color, #{$input-border});
+  --pc-input-text: var(--base-input-color, #{$input-text});
+  --pc-input-focus-border-color: var(--base-accent-color, #{$input-focus-border-color});
+  --pc-select-focus-border-color: var(--base-accent-color, #{$select-focus-border-color});
+  --pc-textarea-focus-border-color: var(--base-accent-color, #{$textarea-focus-border-color});
+
+  // Checkbox (checkmark colour + focus shadow stay compile-time)
+  --pc-checkbox-border-color: var(--base-checkbox-border-color, #{$checkbox-border-color});
+  --pc-checkbox-border-color-hover: var(--base-accent-color, #{$checkbox-border-color-hover});
+  --pc-checkbox-border-color-checked: var(--base-accent-color, #{$checkbox-border-color-checked});
+  --pc-checkbox-bg: var(--base-input-bg, #{$checkbox-bg});
+  --pc-checkbox-bg-checked: var(--base-accent-color, #{$checkbox-bg-checked});
+  --pc-checkbox-bg-indeterminate: var(--base-accent-color, #{$checkbox-bg-indeterminate});
   --pc-checkbox-checkmark-color: #{$checkbox-checkmark-color};
   --pc-checkbox-focus-shadow: #{$checkbox-focus-shadow};
 
-  // Input group
+  // Input group (prepend/append bg are the secondary grey — compile-time)
   --pc-input-group-prepend-bg: #{$input-group-prepend-bg};
-  --pc-input-group-prepend-text: #{$input-group-prepend-text};
+  --pc-input-group-prepend-text: var(--base-text-color-2, #{$input-group-prepend-text});
   --pc-input-group-append-bg: #{$input-group-append-bg};
-  --pc-input-group-append-text: #{$input-group-append-text};
+  --pc-input-group-append-text: var(--base-text-color-2, #{$input-group-append-text});
 
   // =========================================================================
   // TABLE COLORS
   // =========================================================================
-  --pc-table-bg: #{$table-bg};
-  --pc-table-header-bg: #{$table-header-bg};
-  --pc-table-stripe: #{$table-stripe};
-  --pc-table-hover-bg: #{$table-hover-bg};
-  --pc-table-hover-accent-color: #{$table-hover-accent-color};
+  --pc-table-bg: var(--base-main-bg, #{$table-bg});
+  --pc-table-header-bg: var(--base-elevated-bg, #{$table-header-bg});
+  --pc-table-stripe: var(--base-elevated-bg, #{$table-stripe});
+  --pc-table-hover-bg: var(--base-hover-bg, #{$table-hover-bg});
+  --pc-table-hover-accent-color: var(--base-accent-color, #{$table-hover-accent-color});
 
   // =========================================================================
   // MODAL COLORS
   // =========================================================================
-  --pc-modal-overlay-bg: #{$modal-overlay-bg};
-  --pc-modal-content-bg: #{$modal-content-bg};
+  --pc-modal-overlay-bg: var(--base-overlay-bg, #{$modal-overlay-bg});
+  --pc-modal-content-bg: var(--base-main-bg, #{$modal-content-bg});
 
   // =========================================================================
   // BADGE COLORS
@@ -498,9 +530,9 @@
   // =========================================================================
   // TOOLTIP & POPOVER COLORS
   // =========================================================================
-  --pc-tooltip-bg: #{$tooltip-bg};
-  --pc-tooltip-text: #{$tooltip-text};
-  --pc-popover-content-bg: #{$popover-content-bg};
+  --pc-tooltip-bg: var(--base-tooltip-bg, #{$tooltip-bg});
+  --pc-tooltip-text: var(--base-tooltip-text-color, #{$tooltip-text});
+  --pc-popover-content-bg: var(--base-dropdown-bg, #{$popover-content-bg});
   --pc-popover-text-light: #{$popover-text-light};
   --pc-popover-text-dark: #{$popover-text-dark};
 
@@ -529,22 +561,22 @@
   --pc-command-palette-item-active-bg: #{$command-palette-item-active-bg};
   --pc-command-palette-highlight-bg: #{$command-palette-highlight-bg};
   --pc-command-palette-highlight-text: #{$command-palette-highlight-text};
-  --pc-command-palette-key-bg: #{$subtle-bg};
-  --pc-command-palette-key-text: #{$text-color-1};
+  --pc-command-palette-key-bg: var(--base-subtle-bg, #{$subtle-bg});
+  --pc-command-palette-key-text: var(--base-text-color-1, #{$text-color-1});
   --pc-command-palette-key-font-size: #{$font-size-xs};
   --pc-command-palette-key-font-weight: #{$font-weight-semibold};
 
   // =========================================================================
   // MULTISELECT COLORS
   // =========================================================================
-  --pc-multiselect-dropdown-bg: #{$multiselect-dropdown-bg};
-  --pc-multiselect-dropdown-border: #{$multiselect-dropdown-border};
-  --pc-multiselect-dropdown-text: #{$multiselect-dropdown-text};
-  --pc-multiselect-hint-bg: #{$multiselect-hint-bg};
-  --pc-multiselect-hint-border: #{$multiselect-hint-border};
-  --pc-multiselect-option-hover-bg: #{$multiselect-option-hover-bg};
-  --pc-multiselect-pill-bg: #{$multiselect-pill-bg};
-  --pc-multiselect-pill-border: #{$multiselect-pill-border};
+  --pc-multiselect-dropdown-bg: var(--base-dropdown-bg, #{$multiselect-dropdown-bg});
+  --pc-multiselect-dropdown-border: var(--base-border-color, #{$multiselect-dropdown-border});
+  --pc-multiselect-dropdown-text: var(--base-text-color-1, #{$multiselect-dropdown-text});
+  --pc-multiselect-hint-bg: var(--base-page-bg, #{$multiselect-hint-bg});
+  --pc-multiselect-hint-border: var(--base-border-color, #{$multiselect-hint-border});
+  --pc-multiselect-option-hover-bg: var(--base-hover-bg, #{$multiselect-option-hover-bg});
+  --pc-multiselect-pill-bg: var(--base-accent-color-light, #{$multiselect-pill-bg});
+  --pc-multiselect-pill-border: var(--base-accent-color, #{$multiselect-pill-border});
 
   // =========================================================================
   // FORM SPACING — the complete anatomy of a form's spacing. Runtime-tunable;

package/src/scss/_fit-flyout.scss

@@ -25,9 +25,9 @@
   color: inherit;
   cursor: pointer;
 
-  &:hover { background: var(--pc-hover-bg, rgba(0, 0, 0, 0.05)); }
-  &:focus-visible { outline: 2px solid var(--pc-accent-color); outline-offset: 1px; }
-  &[aria-expanded='true'] { background: var(--pc-hover-bg, rgba(0, 0, 0, 0.08)); }
+  &:hover { background: var(--pc-hover-bg, var(--base-hover-bg, rgba(0, 0, 0, 0.05))); }
+  &:focus-visible { outline: 2px solid var(--pc-accent, var(--base-accent-color)); outline-offset: 1px; }
+  &[aria-expanded='true'] { background: var(--pc-hover-bg, var(--base-hover-bg, rgba(0, 0, 0, 0.08))); }
 }
 
 // The three dots, drawn so the sink needs no icon-font dependency.
@@ -60,7 +60,7 @@
   min-width: 20rem;
   max-width: 32rem;
   padding: $spacing-sm;
-  background: var(--pc-card-bg);
+  background: var(--pc-card-bg, var(--base-main-bg));
   border: $border-width-base solid var(--pc-border-color);
   border-radius: var(--pc-border-radius);
   box-shadow: $shadow-lg;

package/src/scss/_layout-container.scss

@@ -14,7 +14,7 @@ body.pc-layout--sticky {
 .pc-layout {
   max-width: 100%;
   margin: $navbar-height auto 0;
-  background-color: var(--pc-main-bg);
+  background-color: var(--pc-page-bg);
   overflow: visible; // Allow tooltips to escape
   display: flex;
   flex-direction: column;
@@ -97,8 +97,8 @@ body.pc-layout--sticky .pc-layout__inner {
 // Footer - outside inner, sibling to inner
 .pc-layout__footer {
   min-height: $footer-height;
-  background-color: var(--pc-footer-bg);
-  border-top: $border-width-base solid var(--pc-footer-border-color);
+  background-color: var(--pc-footer-bg, var(--base-main-bg));
+  border-top: $border-width-base solid var(--pc-footer-border-color, var(--base-border-color));
   display: flex;
   align-items: center;
   padding: $spacing-xs $spacing-base;

package/src/scss/_layout-responsive.scss

@@ -38,7 +38,7 @@
     bottom: 0;
     width: $mobile-sidebar-width;
     z-index: 1050;
-    background-color: var(--pc-sidebar-bg);
+    background-color: var(--pc-sidebar-bg, var(--base-page-bg));
     opacity: 1;
     overflow-y: auto;
     overscroll-behavior: contain; // drawer's own scroll doesn't chain to the page

package/src/scss/_navbar-elements.scss

@@ -25,7 +25,7 @@
     margin: 0;
     font-size: $font-size-lg;
     font-weight: $font-weight-semibold;
-    color: var(--pc-navbar-text);
+    color: var(--pc-navbar-text, var(--base-text-color-1));
     white-space: nowrap;
   }
 
@@ -35,7 +35,7 @@
     margin-inline-start: $spacing-xs;
     font-size: $font-size-xs;
     font-weight: $font-weight-normal;
-    color: var(--pc-navbar-text-secondary);
+    color: var(--pc-navbar-text-secondary, var(--base-text-color-2));
   }
 }
 
@@ -66,7 +66,7 @@
 
       > a {
         text-decoration: none;
-        color: var(--pc-navbar-text-secondary);
+        color: var(--pc-navbar-text-secondary, var(--base-text-color-2));
         font-weight: $font-weight-medium;
         padding: $spacing-xs $spacing-sm;
         border-radius: var(--pc-border-radius);
@@ -86,7 +86,7 @@
         // or --pc-navbar-text tint would be dark-on-dark and vanish. Text
         // brightens to --pc-navbar-text, which those themes override to match.
         &:hover {
-          color: var(--pc-navbar-text);
+          color: var(--pc-navbar-text, var(--base-text-color-1));
           background-color: color-mix(in srgb, currentColor 12%, transparent);
         }
       }
@@ -99,7 +99,7 @@
       &.pc-navmenu__item--active > a {
         &,
         &:hover {
-          color: var(--pc-navbar-text);
+          color: var(--pc-navbar-text, var(--base-text-color-1));
           background-color: color-mix(in srgb, currentColor 22%, transparent);
           font-weight: $font-weight-semibold;
         }
@@ -142,7 +142,7 @@
     top: 100%;
     inset-inline-start: 0; // RTL: flips to right: 0
     min-width: 19.2rem;
-    background-color: var(--pc-card-bg);
+    background-color: var(--pc-card-bg, var(--base-main-bg));
     border: $border-width-base solid var(--pc-border-color);
     border-radius: var(--pc-border-radius);
     box-shadow: $shadow-lg;
@@ -329,7 +329,7 @@
     margin: 0;
     font-size: $font-size-lg;
     font-weight: $font-weight-semibold;
-    color: var(--pc-navbar-text);
+    color: var(--pc-navbar-text, var(--base-text-color-1));
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
@@ -356,7 +356,7 @@
   span {
     width: 100%;
     height: $burger-bar-height;
-    background-color: var(--pc-navbar-text);
+    background-color: var(--pc-navbar-text, var(--base-text-color-1));
     border-radius: var(--pc-border-radius);
     transition: all $transition-normal $easing-snappy;
     transform-origin: center;
@@ -399,7 +399,7 @@
   gap: $spacing-sm;
 
   label {
-    color: var(--pc-navbar-text-secondary);
+    color: var(--pc-navbar-text-secondary, var(--base-text-color-2));
     font-size: $font-size-sm;
   }
 
@@ -407,8 +407,8 @@
     padding: $spacing-xs $spacing-sm;
     border: $border-width-base solid var(--pc-border-color);
     border-radius: var(--pc-border-radius);
-    background-color: var(--pc-navbar-bg);
-    color: var(--pc-navbar-text);
+    background-color: var(--pc-navbar-bg, var(--base-main-bg));
+    color: var(--pc-navbar-text, var(--base-text-color-1));
     font-size: $font-size-sm;
 
     &:focus {

package/src/scss/_navbar.scss

@@ -15,8 +15,8 @@ $navbar-search-reserve-width: 18rem !default;
   top: 0;
   inset-inline: 0; // RTL: works for both LTR and RTL
   height: $navbar-height;
-  background-color: var(--pc-navbar-bg);
-  border-bottom: $border-width-base solid var(--pc-navbar-border-color);
+  background-color: var(--pc-navbar-bg, var(--base-main-bg));
+  border-bottom: $border-width-base solid var(--pc-navbar-border-color, var(--base-border-color));
   z-index: $z-index-navbar; // 2000
   display: flex;
   align-items: center;

package/src/scss/_resize-handle.scss

@@ -46,7 +46,7 @@ $resize-knob-radius-lg: 6px !default;
   // themes (radius 0) stay square via min(). High-contrast fill / border / shadow
   // so the knob stands out on both light and dark surfaces.
   border-radius: min(var(--pc-border-radius-lg), #{$resize-knob-radius});
-  background-color: var(--pc-card-bg);
+  background-color: var(--pc-card-bg, var(--base-main-bg));
   border: $border-width-medium solid var(--pc-border-color);
   color: var(--pc-text-color-2);
   font-size: $font-size-lg;

package/src/scss/_sidebar-states.scss

@@ -68,7 +68,7 @@
         top: 0;
         bottom: 0;
         padding: $spacing-sm $spacing-base;
-        background-color: var(--pc-sidebar-bg);
+        background-color: var(--pc-sidebar-bg, var(--base-page-bg));
         border: $border-width-base solid var(--pc-border-color);
         border-inline-start: none; // RTL: flips to border-right: none
         border-start-start-radius: 0;
@@ -96,7 +96,7 @@
       margin: 0;
       padding: 0;
       list-style: none;
-      background-color: var(--pc-sidebar-submenu-bg);
+      background-color: var(--pc-sidebar-submenu-bg, var(--base-subtle-bg));
       border: $border-width-base solid var(--pc-border-color);
       border-inline-start: none; // RTL: flips to border-right: none
       border-start-start-radius: 0;
@@ -120,12 +120,12 @@
         width: 100%;
 
         &: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));
         }
       }
 
@@ -168,7 +168,7 @@
         margin: 0;
         padding: 0;
         list-style: none;
-        background-color: var(--pc-sidebar-submenu-bg);
+        background-color: var(--pc-sidebar-submenu-bg, var(--base-subtle-bg));
         border: $border-width-base solid var(--pc-border-color);
         border-inline-start: none; // RTL: flips to border-right: none
         border-start-start-radius: 0;