@keenmate/pure-admin-core 2.1.0 → 2.1.1

package/dist/css/main.css

@@ -3061,7 +3061,7 @@ body.loaded .pa-sidebar__link {
   background-color: var(--pa-accent-light);
 }
 .pa-sidebar__link--active {
-  color: var(--pa-sidebar-text);
+  color: var(--pa-accent);
   background-color: var(--pa-accent-hover);
   border-inline-end-color: var(--pa-accent);
   font-weight: 600;
@@ -3087,7 +3087,7 @@ body.loaded .pa-sidebar__toggle {
   background-color: var(--pa-accent-light);
 }
 .pa-sidebar__toggle--active {
-  color: var(--pa-sidebar-text);
+  color: var(--pa-accent);
   background-color: var(--pa-accent-hover);
 }
 .pa-sidebar__icon {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@keenmate/pure-admin-core",
-  "version": "2.1.0",
+  "version": "2.1.1",
   "description": "Lightweight, data-focused HTML/CSS admin framework built with PureCSS foundation and comprehensive component system",
   "style": "dist/css/main.css",
   "exports": {

package/scripts/download-themes.js

@@ -259,6 +259,89 @@ async function main() {
     }
 
     console.log(`\nDownloaded ${downloaded} theme(s), skipped ${localThemes.length} local path(s)`);
+
+    // Check compatibility with installed core version
+    checkCoreCompatibility();
+}
+
+/**
+ * Check if downloaded themes are compatible with the installed core version
+ */
+function checkCoreCompatibility() {
+    // Find installed core version
+    const corePkgPaths = [
+        path.join(PROJECT_ROOT, 'node_modules', '@keenmate', 'pure-admin-core', 'package.json'),
+        path.join(PROJECT_ROOT, '..', 'packages', 'core', 'package.json') // workspace
+    ];
+
+    let coreVersion = null;
+    for (const p of corePkgPaths) {
+        if (fs.existsSync(p)) {
+            try {
+                const pkg = JSON.parse(fs.readFileSync(p, 'utf-8'));
+                coreVersion = pkg.version;
+                break;
+            } catch (e) {}
+        }
+    }
+
+    if (!coreVersion) return;
+
+    // Check each downloaded theme
+    const warnings = [];
+    const themeDirs = fs.readdirSync(THEMES_DIR, { withFileTypes: true })
+        .filter(d => d.isDirectory())
+        .map(d => d.name);
+
+    for (const name of themeDirs) {
+        const manifestPath = path.join(THEMES_DIR, name, 'theme.json');
+        if (!fs.existsSync(manifestPath)) continue;
+
+        try {
+            const manifest = JSON.parse(fs.readFileSync(manifestPath, 'utf-8'));
+            const requiredCore = manifest.dependencies && manifest.dependencies.core;
+            if (!requiredCore) continue;
+
+            if (!satisfiesSemver(coreVersion, requiredCore)) {
+                warnings.push(`  ${name} (v${manifest.version}) requires core ${requiredCore}, installed: ${coreVersion}`);
+            }
+        } catch (e) {}
+    }
+
+    if (warnings.length > 0) {
+        console.log('\n⚠ Compatibility warnings:');
+        warnings.forEach(w => console.log(w));
+        console.log('\nConsider updating @keenmate/pure-admin-core');
+    } else if (themeDirs.length > 0) {
+        console.log(`\nAll themes compatible with core v${coreVersion}`);
+    }
+}
+
+/**
+ * Simple semver satisfaction check for ^major.minor.patch ranges
+ */
+function satisfiesSemver(version, range) {
+    // Parse version
+    const v = version.replace(/^v/, '').split('.').map(Number);
+
+    // Parse range (supports ^x.y.z and x.y.z)
+    const caret = range.startsWith('^');
+    const r = range.replace(/^[\^~]/, '').split('.').map(Number);
+
+    if (caret) {
+        // ^2.0.0 means >=2.0.0 <3.0.0
+        // ^0.2.0 means >=0.2.0 <0.3.0
+        if (r[0] > 0) {
+            return v[0] === r[0] && (v[1] > r[1] || (v[1] === r[1] && v[2] >= r[2]));
+        } else if (r[1] > 0) {
+            return v[0] === 0 && v[1] === r[1] && v[2] >= r[2];
+        } else {
+            return v[0] === 0 && v[1] === 0 && v[2] === r[2];
+        }
+    }
+
+    // Exact match
+    return v[0] === r[0] && v[1] === r[1] && v[2] === r[2];
 }
 
 console.log('Downloading themes...\n');

package/src/scss/_fonts.scss

@@ -1,37 +1,37 @@
-/* Pure Admin Visual Framework - Default Font Definitions */
-
-// Default framework fonts - themes can override these
-// Note: Font size classes for <html> are in _utilities.scss (use px values for correct rem scaling)
-
-// Font family classes with system defaults
-.font-family-system {
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
-
-  *, h1, h2, h3, h4, h5, h6, p, div, span, button, input, textarea, select {
-    font-family: inherit;
-  }
-}
-
-.font-family-sans {
-  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
-
-  *, h1, h2, h3, h4, h5, h6, p, div, span, button, input, textarea, select {
-    font-family: inherit;
-  }
-}
-
-.font-family-serif {
-  font-family: Georgia, "Times New Roman", Times, serif;
-
-  *, h1, h2, h3, h4, h5, h6, p, div, span, button, input, textarea, select {
-    font-family: inherit;
-  }
-}
-
-.font-family-mono {
-  font-family: "Courier New", Courier, monospace;
-
-  *, h1, h2, h3, h4, h5, h6, p, div, span, button, input, textarea, select {
-    font-family: inherit;
-  }
+/* Pure Admin Visual Framework - Default Font Definitions */
+
+// Default framework fonts - themes can override these
+// Note: Font size classes for <html> are in _utilities.scss (use px values for correct rem scaling)
+
+// Font family classes with system defaults
+.font-family-system {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+
+  *, h1, h2, h3, h4, h5, h6, p, div, span, button, input, textarea, select {
+    font-family: inherit;
+  }
+}
+
+.font-family-sans {
+  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+
+  *, h1, h2, h3, h4, h5, h6, p, div, span, button, input, textarea, select {
+    font-family: inherit;
+  }
+}
+
+.font-family-serif {
+  font-family: Georgia, "Times New Roman", Times, serif;
+
+  *, h1, h2, h3, h4, h5, h6, p, div, span, button, input, textarea, select {
+    font-family: inherit;
+  }
+}
+
+.font-family-mono {
+  font-family: "Courier New", Courier, monospace;
+
+  *, h1, h2, h3, h4, h5, h6, p, div, span, button, input, textarea, select {
+    font-family: inherit;
+  }
 }

package/src/scss/core-components/_utilities.scss

@@ -1,362 +1,362 @@
-/* ========================================
-   Utility Components
-   Font utilities, compact mode, component showcase
-   ======================================== */
-@use '../variables' as *;
-
-// Font size classes - Apply to <html> element for proportional scaling of all rem units
-// These use absolute px values because rem would be calculated against browser default (16px),
-// not the framework's 10px base. Scaling the html font-size scales all rem values proportionally.
-// Example: document.documentElement.classList.add('font-size-large');
-
-html.font-size-small {
-  font-size: 9px;   // ~14px body text (9 * 1.6 = 14.4px)
-}
-
-html.font-size-default {
-  font-size: 10px;  // 16px body text (default, same as html base)
-}
-
-html.font-size-large {
-  font-size: 11px;  // ~18px body text (11 * 1.6 = 17.6px)
-}
-
-html.font-size-xlarge {
-  font-size: 12px;  // ~19px body text (12 * 1.6 = 19.2px)
-}
-
-// Font family utilities
-// Only for overriding the theme's default font
-.font-family-serif {
-  font-family: $font-stack-serif;
-}
-
-.font-family-mono {
-  font-family: $font-stack-mono;
-}
-
-// Compact mode
-.compact-mode {
-  .pa-card__body {
-    padding: $spacing-md;
-  }
-
-  .pa-table td,
-  .pa-table th {
-    padding: $btn-padding-v $btn-padding-h;
-  }
-
-  .pa-sidebar__nav ul li a {
-    padding: $sidebar-padding;
-  }
-
-  .pa-form-group {
-    margin-bottom: $form-group-margin-compact;
-  }
-}
-
-
-// Min-height utilities (rem-based)
-.min-h-2x { min-height: 2rem; }   // 32px
-.min-h-3x { min-height: 3rem; }   // 48px
-.min-h-5x { min-height: 5rem; }   // 80px
-.min-h-8x { min-height: 8rem; }   // 128px
-.min-h-10x { min-height: 10rem; } // 160px
-.min-h-12x { min-height: 12rem; } // 192px
-.min-h-15x { min-height: 15rem; } // 240px
-.min-h-20x { min-height: 20rem; } // 320px
-.min-h-25x { min-height: 25rem; } // 400px
-.min-h-30x { min-height: 30rem; } // 480px
-
-// Fixed height utilities (rem-based) - for scrollable containers
-.h-2x { height: 2rem; }   // 32px
-.h-3x { height: 3rem; }   // 48px
-.h-5x { height: 5rem; }   // 80px
-.h-8x { height: 8rem; }   // 128px
-.h-10x { height: 10rem; } // 160px
-.h-12x { height: 12rem; } // 192px
-.h-15x { height: 15rem; } // 240px
-.h-20x { height: 20rem; } // 320px
-.h-25x { height: 25rem; } // 400px
-.h-30x { height: 30rem; } // 480px
-.h-40x { height: 40rem; } // 640px
-.h-50x { height: 50rem; } // 800px
-
-// Max-height utilities (rem-based) - useful for limiting content height
-.max-h-5x { max-height: 5rem; }   // 80px
-.max-h-8x { max-height: 8rem; }   // 128px
-.max-h-10x { max-height: 10rem; } // 160px
-.max-h-12x { max-height: 12rem; } // 192px
-.max-h-15x { max-height: 15rem; } // 240px
-.max-h-20x { max-height: 20rem; } // 320px
-.max-h-25x { max-height: 25rem; } // 400px
-.max-h-30x { max-height: 30rem; } // 480px
-.max-h-40x { max-height: 40rem; } // 640px
-.max-h-50x { max-height: 50rem; } // 800px
-
-// Percentage-based height utilities - for filling available space
-.h-full { height: 100%; }
-.h-screen { height: 100vh; }
-.min-h-full { min-height: 100%; }
-.min-h-screen { min-height: 100vh; }
-.max-h-full { max-height: 100%; }
-.max-h-screen { max-height: 100vh; }
-
-// Flex utilities - for filling available space in flex containers
-.flex-1 { flex: 1 1 0%; }           // Grow and shrink equally, ignore content size
-.flex-auto { flex: 1 1 auto; }      // Grow and shrink, based on content size
-.flex-initial { flex: 0 1 auto; }   // Shrink but don't grow (default)
-.flex-none { flex: none; }          // Don't grow or shrink
-.flex-grow { flex-grow: 1; }        // Grow to fill space
-.flex-grow-0 { flex-grow: 0; }      // Don't grow
-.flex-shrink { flex-shrink: 1; }    // Allow shrinking
-.flex-shrink-0 { flex-shrink: 0; }  // Don't shrink
-
-// Overflow utilities - pair with height/max-height for scrollable content
-.overflow-auto { overflow: auto; }
-.overflow-y-auto { overflow-y: auto; }
-.overflow-x-auto { overflow-x: auto; }
-.overflow-hidden { overflow: hidden; }
-.overflow-visible { overflow: visible; }
-
-// Overlay scrollbar utilities (scrollbar floats over content, doesn't reduce width)
-// Supported in Chromium browsers; Firefox falls back to auto
-.overflow-overlay {
-  overflow: auto;
-  overflow: overlay;
-}
-
-.overflow-y-overlay {
-  overflow-y: auto;
-  overflow-y: overlay;
-}
-
-.overflow-x-overlay {
-  overflow-x: auto;
-  overflow-x: overlay;
-}
-
-// Scroll lock - prevents body scrolling when overlays are open
-// Apply to <body> element via JavaScript
-.pa-scroll-lock {
-  overflow: hidden !important;
-}
-
-// Cursor utilities
-.cursor-pointer { cursor: pointer; }
-.cursor-help { cursor: help; }
-.cursor-wait { cursor: wait; }
-.cursor-not-allowed { cursor: not-allowed; }
-.cursor-text { cursor: text; }
-.cursor-move { cursor: move; }
-.cursor-default { cursor: default; }
-.cursor-grab { cursor: grab; }
-.cursor-grabbing { cursor: grabbing; }
-.cursor-zoom-in { cursor: zoom-in; }
-.cursor-zoom-out { cursor: zoom-out; }
-
-// ========================================
-// Text Component (BEM pattern)
-// For paragraph typography across pages
-// ========================================
-.pa-text {
-  font-size: $font-size-sm;  // 1.4rem (14px) - default
-  color: var(--pa-text-color-1);
-
-  // Size modifiers
-  &--xs {
-    font-size: $font-size-2xs;  // 1rem (10px)
-  }
-
-  &--sm {
-    font-size: $font-size-xs;   // 1.2rem (12px)
-  }
-
-  &--lg {
-    font-size: $font-size-base; // 1.6rem (16px)
-  }
-
-  &--xl {
-    font-size: $font-size-lg;   // 1.8rem (18px)
-  }
-
-  // Color modifiers
-  &--primary {
-    color: var(--pa-text-color-1);
-  }
-
-  &--secondary {
-    color: var(--pa-text-color-2);
-  }
-
-  // Alignment modifiers (logical properties for RTL support)
-  &--start {
-    text-align: start; // RTL: flips to right
-  }
-
-  &--center {
-    text-align: center;
-  }
-
-  &--end {
-    text-align: end; // RTL: flips to left
-  }
-
-
-  // Semantic variants (compound styles)
-  &--caption {
-    font-size: $font-size-xs;
-    color: var(--pa-text-color-2);
-    margin-bottom: $spacing-sm;
-  }
-
-  &--lead {
-    font-size: $font-size-base;
-    line-height: $line-height-relaxed;
-  }
-}
-
-// Gap utilities (10px rem base)
-// Semantic gap classes using spacing variables
-@each $name, $value in $semantic-spacers {
-  .gap-#{$name} { gap: #{$value}; }
-  .row-gap-#{$name} { row-gap: #{$value}; }
-  .column-gap-#{$name} { column-gap: #{$value}; }
-}
-
-// Numeric gap classes (in 10px rem units) - kept for backwards compatibility
-.gap-1 { gap: 0.1rem; }  // 1px
-.gap-2 { gap: 0.2rem; }  // 2px
-.gap-3 { gap: 0.3rem; }  // 3px
-.gap-4 { gap: 0.4rem; }  // 4px
-.gap-5 { gap: 0.5rem; }  // 5px
-.gap-6 { gap: 0.6rem; }  // 6px
-.gap-8 { gap: 0.8rem; }  // 8px
-.gap-10 { gap: 1rem; }   // 10px
-.gap-12 { gap: 1.2rem; } // 12px
-.gap-15 { gap: 1.5rem; } // 15px
-.gap-20 { gap: 2rem; }   // 20px
-
-// Align-self utilities (for flex/grid children)
-.self-start { align-self: flex-start; }
-.self-center { align-self: center; }
-.self-end { align-self: flex-end; }
-.self-stretch { align-self: stretch; }
-.self-baseline { align-self: baseline; }
-
-// Font-size utilities (10px rem base)
-// Direct font-size classes using typography variables
-.text-2xs { font-size: $font-size-2xs; }   // 1rem = 10px
-.text-xs  { font-size: $font-size-xs; }    // 1.2rem = 12px
-.text-sm  { font-size: $font-size-sm; }    // 1.4rem = 14px
-.text-md  { font-size: $font-size-md; }    // 1.5rem = 15px
-.text-base { font-size: $font-size-base; } // 1.6rem = 16px
-.text-lg  { font-size: $font-size-lg; }    // 1.8rem = 18px
-.text-xl  { font-size: $font-size-xl; }    // 2rem = 20px
-.text-2xl { font-size: $font-size-2xl; }   // 2.4rem = 24px
-.text-3xl { font-size: $font-size-3xl; }   // 2.8rem = 28px
-.text-4xl { font-size: $font-size-4xl; }   // 3.2rem = 32px
-
-// Text truncation with ellipsis
-.text-truncate {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-// Link styling
-.pa-link {
-  color: $accent-color;
-  text-decoration: none;
-
-  &:hover {
-    text-decoration: underline;
-  }
-}
-
-// Component showcase styling
-.component-showcase {
-  display: flex;
-  flex-wrap: wrap;
-  gap: $spacing-sm;
-  margin-bottom: $spacing-lg;
-}
-
-// Usage example styling
-.usage-example {
-  .user-item,
-  .project-item {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: $spacing-md;
-    margin-bottom: $spacing-sm;
-    background-color: var(--pa-card-bg);
-    border: $border-width-base solid var(--pa-border-color);
-    border-radius: $border-radius;
-
-    .user-name {
-      font-weight: $font-weight-medium;
-    }
-
-    h5 {
-      margin: 0 0 $spacing-sm 0;
-      font-size: $font-size-base;
-      font-weight: $font-weight-semibold;
-    }
-
-    .project-tags {
-      display: flex;
-      flex-wrap: wrap;
-      gap: $spacing-xs;
-    }
-  }
-
-  .project-item {
-    flex-direction: column;
-    align-items: flex-start;
-  }
-}
-
-// Theme color utilities (color-1 through color-9)
-// Use these to apply theme colors to any element
-@for $i from 1 through 9 {
-  .pa-bg-color-#{$i} { background-color: var(--pa-color-#{$i}); }
-  .pa-text-color-#{$i} { color: var(--pa-color-#{$i}); }
-  .pa-border-color-#{$i} { border-color: var(--pa-color-#{$i}); }
-}
-
-// ========================================
-// Logical Spacing Utilities (RTL-aware)
-// ms = margin-inline-start, me = margin-inline-end
-// ps = padding-inline-start, pe = padding-inline-end
-// ========================================
-
-// Margin inline-start (ms-*) - RTL: flips to margin-right
-@each $name, $value in $semantic-spacers {
-  .ms-#{$name} { margin-inline-start: #{$value}; }
-}
-.ms-auto { margin-inline-start: auto; }
-
-// Margin inline-end (me-*) - RTL: flips to margin-left
-@each $name, $value in $semantic-spacers {
-  .me-#{$name} { margin-inline-end: #{$value}; }
-}
-.me-auto { margin-inline-end: auto; }
-
-// Padding inline-start (ps-*) - RTL: flips to padding-right
-@each $name, $value in $semantic-spacers {
-  .ps-#{$name} { padding-inline-start: #{$value}; }
-}
-
-// Padding inline-end (pe-*) - RTL: flips to padding-left
-@each $name, $value in $semantic-spacers {
-  .pe-#{$name} { padding-inline-end: #{$value}; }
-}
-
-// Text alignment utilities (RTL-aware)
-.text-start { text-align: start; } // RTL: flips to right
-.text-center { text-align: center; }
-.text-end { text-align: end; } // RTL: flips to left
-
-
+/* ========================================
+   Utility Components
+   Font utilities, compact mode, component showcase
+   ======================================== */
+@use '../variables' as *;
+
+// Font size classes - Apply to <html> element for proportional scaling of all rem units
+// These use absolute px values because rem would be calculated against browser default (16px),
+// not the framework's 10px base. Scaling the html font-size scales all rem values proportionally.
+// Example: document.documentElement.classList.add('font-size-large');
+
+html.font-size-small {
+  font-size: 9px;   // ~14px body text (9 * 1.6 = 14.4px)
+}
+
+html.font-size-default {
+  font-size: 10px;  // 16px body text (default, same as html base)
+}
+
+html.font-size-large {
+  font-size: 11px;  // ~18px body text (11 * 1.6 = 17.6px)
+}
+
+html.font-size-xlarge {
+  font-size: 12px;  // ~19px body text (12 * 1.6 = 19.2px)
+}
+
+// Font family utilities
+// Only for overriding the theme's default font
+.font-family-serif {
+  font-family: $font-stack-serif;
+}
+
+.font-family-mono {
+  font-family: $font-stack-mono;
+}
+
+// Compact mode
+.compact-mode {
+  .pa-card__body {
+    padding: $spacing-md;
+  }
+
+  .pa-table td,
+  .pa-table th {
+    padding: $btn-padding-v $btn-padding-h;
+  }
+
+  .pa-sidebar__nav ul li a {
+    padding: $sidebar-padding;
+  }
+
+  .pa-form-group {
+    margin-bottom: $form-group-margin-compact;
+  }
+}
+
+
+// Min-height utilities (rem-based)
+.min-h-2x { min-height: 2rem; }   // 32px
+.min-h-3x { min-height: 3rem; }   // 48px
+.min-h-5x { min-height: 5rem; }   // 80px
+.min-h-8x { min-height: 8rem; }   // 128px
+.min-h-10x { min-height: 10rem; } // 160px
+.min-h-12x { min-height: 12rem; } // 192px
+.min-h-15x { min-height: 15rem; } // 240px
+.min-h-20x { min-height: 20rem; } // 320px
+.min-h-25x { min-height: 25rem; } // 400px
+.min-h-30x { min-height: 30rem; } // 480px
+
+// Fixed height utilities (rem-based) - for scrollable containers
+.h-2x { height: 2rem; }   // 32px
+.h-3x { height: 3rem; }   // 48px
+.h-5x { height: 5rem; }   // 80px
+.h-8x { height: 8rem; }   // 128px
+.h-10x { height: 10rem; } // 160px
+.h-12x { height: 12rem; } // 192px
+.h-15x { height: 15rem; } // 240px
+.h-20x { height: 20rem; } // 320px
+.h-25x { height: 25rem; } // 400px
+.h-30x { height: 30rem; } // 480px
+.h-40x { height: 40rem; } // 640px
+.h-50x { height: 50rem; } // 800px
+
+// Max-height utilities (rem-based) - useful for limiting content height
+.max-h-5x { max-height: 5rem; }   // 80px
+.max-h-8x { max-height: 8rem; }   // 128px
+.max-h-10x { max-height: 10rem; } // 160px
+.max-h-12x { max-height: 12rem; } // 192px
+.max-h-15x { max-height: 15rem; } // 240px
+.max-h-20x { max-height: 20rem; } // 320px
+.max-h-25x { max-height: 25rem; } // 400px
+.max-h-30x { max-height: 30rem; } // 480px
+.max-h-40x { max-height: 40rem; } // 640px
+.max-h-50x { max-height: 50rem; } // 800px
+
+// Percentage-based height utilities - for filling available space
+.h-full { height: 100%; }
+.h-screen { height: 100vh; }
+.min-h-full { min-height: 100%; }
+.min-h-screen { min-height: 100vh; }
+.max-h-full { max-height: 100%; }
+.max-h-screen { max-height: 100vh; }
+
+// Flex utilities - for filling available space in flex containers
+.flex-1 { flex: 1 1 0%; }           // Grow and shrink equally, ignore content size
+.flex-auto { flex: 1 1 auto; }      // Grow and shrink, based on content size
+.flex-initial { flex: 0 1 auto; }   // Shrink but don't grow (default)
+.flex-none { flex: none; }          // Don't grow or shrink
+.flex-grow { flex-grow: 1; }        // Grow to fill space
+.flex-grow-0 { flex-grow: 0; }      // Don't grow
+.flex-shrink { flex-shrink: 1; }    // Allow shrinking
+.flex-shrink-0 { flex-shrink: 0; }  // Don't shrink
+
+// Overflow utilities - pair with height/max-height for scrollable content
+.overflow-auto { overflow: auto; }
+.overflow-y-auto { overflow-y: auto; }
+.overflow-x-auto { overflow-x: auto; }
+.overflow-hidden { overflow: hidden; }
+.overflow-visible { overflow: visible; }
+
+// Overlay scrollbar utilities (scrollbar floats over content, doesn't reduce width)
+// Supported in Chromium browsers; Firefox falls back to auto
+.overflow-overlay {
+  overflow: auto;
+  overflow: overlay;
+}
+
+.overflow-y-overlay {
+  overflow-y: auto;
+  overflow-y: overlay;
+}
+
+.overflow-x-overlay {
+  overflow-x: auto;
+  overflow-x: overlay;
+}
+
+// Scroll lock - prevents body scrolling when overlays are open
+// Apply to <body> element via JavaScript
+.pa-scroll-lock {
+  overflow: hidden !important;
+}
+
+// Cursor utilities
+.cursor-pointer { cursor: pointer; }
+.cursor-help { cursor: help; }
+.cursor-wait { cursor: wait; }
+.cursor-not-allowed { cursor: not-allowed; }
+.cursor-text { cursor: text; }
+.cursor-move { cursor: move; }
+.cursor-default { cursor: default; }
+.cursor-grab { cursor: grab; }
+.cursor-grabbing { cursor: grabbing; }
+.cursor-zoom-in { cursor: zoom-in; }
+.cursor-zoom-out { cursor: zoom-out; }
+
+// ========================================
+// Text Component (BEM pattern)
+// For paragraph typography across pages
+// ========================================
+.pa-text {
+  font-size: $font-size-sm;  // 1.4rem (14px) - default
+  color: var(--pa-text-color-1);
+
+  // Size modifiers
+  &--xs {
+    font-size: $font-size-2xs;  // 1rem (10px)
+  }
+
+  &--sm {
+    font-size: $font-size-xs;   // 1.2rem (12px)
+  }
+
+  &--lg {
+    font-size: $font-size-base; // 1.6rem (16px)
+  }
+
+  &--xl {
+    font-size: $font-size-lg;   // 1.8rem (18px)
+  }
+
+  // Color modifiers
+  &--primary {
+    color: var(--pa-text-color-1);
+  }
+
+  &--secondary {
+    color: var(--pa-text-color-2);
+  }
+
+  // Alignment modifiers (logical properties for RTL support)
+  &--start {
+    text-align: start; // RTL: flips to right
+  }
+
+  &--center {
+    text-align: center;
+  }
+
+  &--end {
+    text-align: end; // RTL: flips to left
+  }
+
+
+  // Semantic variants (compound styles)
+  &--caption {
+    font-size: $font-size-xs;
+    color: var(--pa-text-color-2);
+    margin-bottom: $spacing-sm;
+  }
+
+  &--lead {
+    font-size: $font-size-base;
+    line-height: $line-height-relaxed;
+  }
+}
+
+// Gap utilities (10px rem base)
+// Semantic gap classes using spacing variables
+@each $name, $value in $semantic-spacers {
+  .gap-#{$name} { gap: #{$value}; }
+  .row-gap-#{$name} { row-gap: #{$value}; }
+  .column-gap-#{$name} { column-gap: #{$value}; }
+}
+
+// Numeric gap classes (in 10px rem units) - kept for backwards compatibility
+.gap-1 { gap: 0.1rem; }  // 1px
+.gap-2 { gap: 0.2rem; }  // 2px
+.gap-3 { gap: 0.3rem; }  // 3px
+.gap-4 { gap: 0.4rem; }  // 4px
+.gap-5 { gap: 0.5rem; }  // 5px
+.gap-6 { gap: 0.6rem; }  // 6px
+.gap-8 { gap: 0.8rem; }  // 8px
+.gap-10 { gap: 1rem; }   // 10px
+.gap-12 { gap: 1.2rem; } // 12px
+.gap-15 { gap: 1.5rem; } // 15px
+.gap-20 { gap: 2rem; }   // 20px
+
+// Align-self utilities (for flex/grid children)
+.self-start { align-self: flex-start; }
+.self-center { align-self: center; }
+.self-end { align-self: flex-end; }
+.self-stretch { align-self: stretch; }
+.self-baseline { align-self: baseline; }
+
+// Font-size utilities (10px rem base)
+// Direct font-size classes using typography variables
+.text-2xs { font-size: $font-size-2xs; }   // 1rem = 10px
+.text-xs  { font-size: $font-size-xs; }    // 1.2rem = 12px
+.text-sm  { font-size: $font-size-sm; }    // 1.4rem = 14px
+.text-md  { font-size: $font-size-md; }    // 1.5rem = 15px
+.text-base { font-size: $font-size-base; } // 1.6rem = 16px
+.text-lg  { font-size: $font-size-lg; }    // 1.8rem = 18px
+.text-xl  { font-size: $font-size-xl; }    // 2rem = 20px
+.text-2xl { font-size: $font-size-2xl; }   // 2.4rem = 24px
+.text-3xl { font-size: $font-size-3xl; }   // 2.8rem = 28px
+.text-4xl { font-size: $font-size-4xl; }   // 3.2rem = 32px
+
+// Text truncation with ellipsis
+.text-truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+// Link styling
+.pa-link {
+  color: $accent-color;
+  text-decoration: none;
+
+  &:hover {
+    text-decoration: underline;
+  }
+}
+
+// Component showcase styling
+.component-showcase {
+  display: flex;
+  flex-wrap: wrap;
+  gap: $spacing-sm;
+  margin-bottom: $spacing-lg;
+}
+
+// Usage example styling
+.usage-example {
+  .user-item,
+  .project-item {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: $spacing-md;
+    margin-bottom: $spacing-sm;
+    background-color: var(--pa-card-bg);
+    border: $border-width-base solid var(--pa-border-color);
+    border-radius: $border-radius;
+
+    .user-name {
+      font-weight: $font-weight-medium;
+    }
+
+    h5 {
+      margin: 0 0 $spacing-sm 0;
+      font-size: $font-size-base;
+      font-weight: $font-weight-semibold;
+    }
+
+    .project-tags {
+      display: flex;
+      flex-wrap: wrap;
+      gap: $spacing-xs;
+    }
+  }
+
+  .project-item {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+}
+
+// Theme color utilities (color-1 through color-9)
+// Use these to apply theme colors to any element
+@for $i from 1 through 9 {
+  .pa-bg-color-#{$i} { background-color: var(--pa-color-#{$i}); }
+  .pa-text-color-#{$i} { color: var(--pa-color-#{$i}); }
+  .pa-border-color-#{$i} { border-color: var(--pa-color-#{$i}); }
+}
+
+// ========================================
+// Logical Spacing Utilities (RTL-aware)
+// ms = margin-inline-start, me = margin-inline-end
+// ps = padding-inline-start, pe = padding-inline-end
+// ========================================
+
+// Margin inline-start (ms-*) - RTL: flips to margin-right
+@each $name, $value in $semantic-spacers {
+  .ms-#{$name} { margin-inline-start: #{$value}; }
+}
+.ms-auto { margin-inline-start: auto; }
+
+// Margin inline-end (me-*) - RTL: flips to margin-left
+@each $name, $value in $semantic-spacers {
+  .me-#{$name} { margin-inline-end: #{$value}; }
+}
+.me-auto { margin-inline-end: auto; }
+
+// Padding inline-start (ps-*) - RTL: flips to padding-right
+@each $name, $value in $semantic-spacers {
+  .ps-#{$name} { padding-inline-start: #{$value}; }
+}
+
+// Padding inline-end (pe-*) - RTL: flips to padding-left
+@each $name, $value in $semantic-spacers {
+  .pe-#{$name} { padding-inline-end: #{$value}; }
+}
+
+// Text alignment utilities (RTL-aware)
+.text-start { text-align: start; } // RTL: flips to right
+.text-center { text-align: center; }
+.text-end { text-align: end; } // RTL: flips to left
+
+

package/src/scss/core-components/layout/_sidebar.scss

@@ -105,7 +105,7 @@ body.pa-layout--sticky .pa-layout__sidebar {
     }
 
     &--active {
-      color: var(--pa-sidebar-text);
+      color: var(--pa-accent);
       background-color: var(--pa-accent-hover);
       border-inline-end-color: var(--pa-accent); // RTL: flips to border-left-color
       font-weight: $font-weight-semibold;
@@ -136,7 +136,7 @@ body.pa-layout--sticky .pa-layout__sidebar {
     }
 
     &--active {
-      color: var(--pa-sidebar-text);
+      color: var(--pa-accent);
       background-color: var(--pa-accent-hover);
     }
   }