@keenmate/pure-admin-core 1.0.0-rc05 → 1.0.0

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

@@ -4,17 +4,68 @@
    ======================================== */
 @use '../../variables' as *;
 
-// Sidebar layout element
+// CSS variable for sidebar width (allows JS resize)
+:root {
+  --pa-sidebar-width: #{$sidebar-width};
+  --pa-sidebar-min-width: 18rem;
+  --pa-sidebar-max-width: 50rem;
+}
+
+// Sidebar layout element - width in :where() for low specificity (utility classes can override)
+:where(.pa-layout__sidebar) {
+  width: var(--pa-sidebar-width);
+}
+
 .pa-layout__sidebar {
-  width: $sidebar-width;
   background-color: var(--pa-sidebar-bg);
   border-right: $border-width-base solid var(--pa-border-color);
   flex-shrink: 0;
+  position: relative;
+}
+
+// Resize handle on sidebar edge
+.pa-sidebar-resize {
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 6px;
+  height: 100%;
+  cursor: ew-resize;
+  z-index: 100;
+
+  // Visual indicator on hover
+  &::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 2px;
+    height: 100%;
+    background-color: transparent;
+    transition: background-color $transition-fast $easing-snappy;
+  }
+
+  &:hover::after,
+  &--active::after {
+    background-color: var(--pa-accent);
+  }
+}
+
+// Disable text selection during resize
+body.pa-sidebar-resizing {
+  cursor: ew-resize !important;
+  user-select: none;
+
+  * {
+    cursor: ew-resize !important;
+  }
 }
 
 // Sticky mode - sidebar scrolls
 body.pa-layout--sticky .pa-layout__sidebar {
   overflow-y: auto;
+  overflow-y: overlay; // Chromium: scrollbar overlays content, doesn't reduce width
   overflow-x: visible; // Allow tooltips to escape right
 }
 

package/src/scss/themes/audi-light.scss

@@ -2,6 +2,19 @@
 /* Light version maintaining Audi's red accents and Fira Sans Condensed font */
 @use 'sass:color';
 
+// =============================================================================
+// THEME COLOR SLOTS (1-9) - Audi-inspired palette
+// =============================================================================
+$color-1: #bb0a30;  // Audi Red (classic)
+$color-2: #ff4444;  // Light Red
+$color-3: #ff6600;  // Orange (warning tone)
+$color-4: #d4af37;  // Gold (premium)
+$color-5: #00a0a0;  // Teal (contrast)
+$color-6: #0066cc;  // Blue (professional)
+$color-7: #8c8c8c;  // Silver (metallic)
+$color-8: #404040;  // Charcoal (neutral)
+$color-9: #6b3fa0;  // Purple (luxury)
+
 @import '../variables';
 
 // Audi Light theme configuration
@@ -304,6 +317,19 @@ $card-border-radius: 0; // Sharp edges
   }
 }
 
+// Footer - light text on dark background
+.pa-layout__footer {
+  color: #cccccc;
+
+  a {
+    color: #ffffff;
+
+    &:hover {
+      color: $audi-red;
+    }
+  }
+}
+
 // CSS Variables for page loader (FOUC prevention) and base theme variables
 :root {
   --page-loader-bg: rgba(240, 240, 240, 0.95);

package/src/scss/themes/audi.scss

@@ -1,6 +1,19 @@
 /* Pure Admin Visual - Audi Theme (Pure SCSS Variables) */
 @use 'sass:color';
 
+// =============================================================================
+// THEME COLOR SLOTS (1-9) - Audi-inspired palette
+// =============================================================================
+$color-1: #bb0a30;  // Audi Red (classic)
+$color-2: #ff4444;  // Light Red
+$color-3: #ff6600;  // Orange (warning tone)
+$color-4: #d4af37;  // Gold (premium)
+$color-5: #00a0a0;  // Teal (contrast)
+$color-6: #0066cc;  // Blue (professional)
+$color-7: #8c8c8c;  // Silver (metallic)
+$color-8: #404040;  // Charcoal (neutral)
+$color-9: #6b3fa0;  // Purple (luxury)
+
 // 1. Import framework variables first (all defaults with !default flags)
 @import '../variables';
 

package/src/scss/themes/corporate.scss

@@ -1,5 +1,18 @@
 /* Corporate Theme for Pure Admin Visual - Professional blue/gray palette */
 
+// =============================================================================
+// THEME COLOR SLOTS (1-9) - Corporate professional palette
+// =============================================================================
+$color-1: #0284c7;  // Corporate Blue (primary)
+$color-2: #0ea5e9;  // Sky Blue (lighter)
+$color-3: #10b981;  // Emerald (success)
+$color-4: #f59e0b;  // Amber (attention)
+$color-5: #6366f1;  // Indigo (accent)
+$color-6: #8b5cf6;  // Violet (creative)
+$color-7: #64748b;  // Slate (neutral)
+$color-8: #334155;  // Dark Slate (contrast)
+$color-9: #ec4899;  // Pink (highlight)
+
 @import '../variables';
 
 // Corporate color palette
@@ -192,6 +205,19 @@ $modal-content-bg: #ffffff;
   }
 }
 
+// Footer - light text on dark background
+.pa-layout__footer {
+  color: $corporate-slate-300;
+
+  a {
+    color: #ffffff;
+
+    &:hover {
+      color: $corporate-blue-500;
+    }
+  }
+}
+
 // CSS Variables for page loader (FOUC prevention) and base theme variables
 :root {
   --page-loader-bg: rgba(26, 26, 26, 0.95);

package/src/scss/themes/dark-blue.scss

@@ -1,6 +1,19 @@
 /* Dark Blue Theme for Pure Admin Visual */
 @use 'sass:color';
 
+// =============================================================================
+// THEME COLOR SLOTS (1-9) - Dark blue palette
+// =============================================================================
+$color-1: #3b82f6;  // Blue 500 (primary)
+$color-2: #60a5fa;  // Blue 400 (lighter)
+$color-3: #22c55e;  // Green 500 (success)
+$color-4: #eab308;  // Yellow 500 (warning)
+$color-5: #a855f7;  // Purple 500 (accent)
+$color-6: #06b6d4;  // Cyan 500 (info)
+$color-7: #94a3b8;  // Slate 400 (neutral)
+$color-8: #f1f5f9;  // Slate 100 (light)
+$color-9: #f43f5e;  // Rose 500 (highlight)
+
 @import '../variables';
 
 // Dark blue theme color palette

package/src/scss/themes/dark-green.scss

@@ -1,6 +1,19 @@
 /* Dark Green Theme for Pure Admin Visual */
 @use 'sass:color';
 
+// =============================================================================
+// THEME COLOR SLOTS (1-9) - Dark green palette
+// =============================================================================
+$color-1: #22c55e;  // Green 500 (primary)
+$color-2: #4ade80;  // Green 400 (lighter)
+$color-3: #84cc16;  // Lime 500 (accent)
+$color-4: #eab308;  // Yellow 500 (warning)
+$color-5: #14b8a6;  // Teal 500 (info)
+$color-6: #3b82f6;  // Blue 500 (contrast)
+$color-7: #a3e635;  // Lime 400 (highlight)
+$color-8: #f0fdf4;  // Green 50 (light)
+$color-9: #f97316;  // Orange 500 (alert)
+
 @import '../variables';
 
 // Dark green theme color palette

package/src/scss/themes/dark-red.scss

@@ -1,6 +1,19 @@
 /* Dark Red Theme for Pure Admin Visual */
 @use 'sass:color';
 
+// =============================================================================
+// THEME COLOR SLOTS (1-9) - Dark red palette
+// =============================================================================
+$color-1: #ef4444;  // Red 500 (primary)
+$color-2: #f87171;  // Red 400 (lighter)
+$color-3: #f97316;  // Orange 500 (accent)
+$color-4: #eab308;  // Yellow 500 (warning)
+$color-5: #ec4899;  // Pink 500 (secondary)
+$color-6: #8b5cf6;  // Violet 500 (contrast)
+$color-7: #fca5a5;  // Red 300 (muted)
+$color-8: #fef2f2;  // Red 50 (light)
+$color-9: #06b6d4;  // Cyan 500 (cool contrast)
+
 @import '../variables';
 
 // Dark red theme color palette

package/src/scss/themes/dark.scss

@@ -1,6 +1,19 @@
 /* Dark Theme for Pure Admin Visual */
 @use 'sass:color';
 
+// =============================================================================
+// THEME COLOR SLOTS (1-9) - Dark theme vibrant palette
+// =============================================================================
+$color-1: #4dabf7;  // Light Blue (primary)
+$color-2: #69db7c;  // Light Green (success)
+$color-3: #ffd43b;  // Yellow (warning)
+$color-4: #ff6b6b;  // Light Red (danger)
+$color-5: #da77f2;  // Light Purple (accent)
+$color-6: #38d9a9;  // Teal (info)
+$color-7: #adb5bd;  // Gray (neutral)
+$color-8: #f8f9fa;  // Light (contrast)
+$color-9: #ffa94d;  // Orange (highlight)
+
 @import '../variables';
 
 // Dark theme color palette

package/src/scss/themes/express.scss

@@ -1,6 +1,19 @@
 /* Express Theme - Bold yellow and red palette inspired by logistics brands */
 @use 'sass:color';
 
+// =============================================================================
+// THEME COLOR SLOTS (1-9) - Express logistics palette
+// =============================================================================
+$color-1: #D40511;  // Express Red (primary)
+$color-2: #FFCC00;  // Express Yellow (brand)
+$color-3: #ff6b00;  // Orange (urgent)
+$color-4: #00a651;  // Green (delivered)
+$color-5: #0066cc;  // Blue (tracking)
+$color-6: #6b3fa0;  // Purple (premium)
+$color-7: #8C8C8C;  // Gray (neutral)
+$color-8: #333333;  // Dark (contrast)
+$color-9: #00b4d8;  // Cyan (info)
+
 @import '../variables';
 
 // Express color palette - Bold yellow and red

package/src/scss/themes/minimal.scss

@@ -1,6 +1,19 @@
 /* Minimal Theme for Pure Admin Visual - Ultra clean, monochrome approach */
 @use 'sass:color';
 
+// =============================================================================
+// THEME COLOR SLOTS (1-9) - Minimal muted palette
+// =============================================================================
+$color-1: #374151;  // Gray 700 (primary)
+$color-2: #6b7280;  // Gray 500 (secondary)
+$color-3: #059669;  // Emerald 600 (muted success)
+$color-4: #d97706;  // Amber 600 (muted warning)
+$color-5: #4f46e5;  // Indigo 600 (accent)
+$color-6: #7c3aed;  // Violet 600 (subtle)
+$color-7: #9ca3af;  // Gray 400 (light)
+$color-8: #1f2937;  // Gray 800 (dark)
+$color-9: #db2777;  // Pink 600 (highlight)
+
 @import '../variables';
 
 // Minimal theme color palette - grayscale focused

package/src/scss/utilities.scss

@@ -277,9 +277,12 @@ $spacers: (
 .w-100 { width: 100% !important; }
 .w-auto { width: auto !important; }
 
-// Width utilities (fractions) - matches grid naming: pa-col-1-3, pa-col-2-3
+// Width utilities (fractions) - matches grid naming
+.w-1-2 { width: 50% !important; }
 .w-1-3 { width: 33.333333% !important; }
 .w-2-3 { width: 66.666667% !important; }
+.w-1-4 { width: 25% !important; }
+.w-3-4 { width: 75% !important; }
 
 // Min-width utilities
 .mw-25 { min-width: 25% !important; }
@@ -287,16 +290,22 @@ $spacers: (
 .mw-75 { min-width: 75% !important; }
 .mw-100 { min-width: 100% !important; }
 .mw-auto { min-width: auto !important; }
+.mw-1-2 { min-width: 50% !important; }
 .mw-1-3 { min-width: 33.333333% !important; }
 .mw-2-3 { min-width: 66.666667% !important; }
+.mw-1-4 { min-width: 25% !important; }
+.mw-3-4 { min-width: 75% !important; }
 
 // Fixed width utilities (min-width + width locked)
 .w-25-fixed { min-width: 25% !important; width: 25% !important; }
 .w-50-fixed { min-width: 50% !important; width: 50% !important; }
 .w-75-fixed { min-width: 75% !important; width: 75% !important; }
 .w-100-fixed { min-width: 100% !important; width: 100% !important; }
+.w-1-2-fixed { min-width: 50% !important; width: 50% !important; }
 .w-1-3-fixed { min-width: 33.333333% !important; width: 33.333333% !important; }
 .w-2-3-fixed { min-width: 66.666667% !important; width: 66.666667% !important; }
+.w-1-4-fixed { min-width: 25% !important; width: 25% !important; }
+.w-3-4-fixed { min-width: 75% !important; width: 75% !important; }
 
 // Height utilities
 .h-25 {
@@ -319,10 +328,17 @@ $spacers: (
   height: auto !important;
 }
 
+// Height utilities (fractions)
+.h-1-2 { height: 50% !important; }
+.h-1-3 { height: 33.333333% !important; }
+.h-2-3 { height: 66.666667% !important; }
+.h-1-4 { height: 25% !important; }
+.h-3-4 { height: 75% !important; }
+
 // ============================================================================
 // REM-BASED SIZING UTILITIES
 // Use 'r' suffix to distinguish from percentage-based utilities
-// Values: 1-10, 15, 20, 25 (rem)
+// Values: 1-10, 15, 20, 25, 30, 35, 40, 45, 50 (rem)
 // ============================================================================
 
 // Width (rem)
@@ -339,6 +355,11 @@ $spacers: (
 .wr-15 { width: 15rem !important; }
 .wr-20 { width: 20rem !important; }
 .wr-25 { width: 25rem !important; }
+.wr-30 { width: 30rem !important; }
+.wr-35 { width: 35rem !important; }
+.wr-40 { width: 40rem !important; }
+.wr-45 { width: 45rem !important; }
+.wr-50 { width: 50rem !important; }
 
 // Min-width (rem)
 .minwr-1 { min-width: 1rem !important; }
@@ -354,6 +375,11 @@ $spacers: (
 .minwr-15 { min-width: 15rem !important; }
 .minwr-20 { min-width: 20rem !important; }
 .minwr-25 { min-width: 25rem !important; }
+.minwr-30 { min-width: 30rem !important; }
+.minwr-35 { min-width: 35rem !important; }
+.minwr-40 { min-width: 40rem !important; }
+.minwr-45 { min-width: 45rem !important; }
+.minwr-50 { min-width: 50rem !important; }
 
 // Max-width (rem)
 .maxwr-1 { max-width: 1rem !important; }
@@ -369,6 +395,11 @@ $spacers: (
 .maxwr-15 { max-width: 15rem !important; }
 .maxwr-20 { max-width: 20rem !important; }
 .maxwr-25 { max-width: 25rem !important; }
+.maxwr-30 { max-width: 30rem !important; }
+.maxwr-35 { max-width: 35rem !important; }
+.maxwr-40 { max-width: 40rem !important; }
+.maxwr-45 { max-width: 45rem !important; }
+.maxwr-50 { max-width: 50rem !important; }
 
 // Height (rem)
 .hr-1 { height: 1rem !important; }
@@ -384,6 +415,11 @@ $spacers: (
 .hr-15 { height: 15rem !important; }
 .hr-20 { height: 20rem !important; }
 .hr-25 { height: 25rem !important; }
+.hr-30 { height: 30rem !important; }
+.hr-35 { height: 35rem !important; }
+.hr-40 { height: 40rem !important; }
+.hr-45 { height: 45rem !important; }
+.hr-50 { height: 50rem !important; }
 
 // Min-height (rem)
 .minhr-1 { min-height: 1rem !important; }
@@ -399,6 +435,11 @@ $spacers: (
 .minhr-15 { min-height: 15rem !important; }
 .minhr-20 { min-height: 20rem !important; }
 .minhr-25 { min-height: 25rem !important; }
+.minhr-30 { min-height: 30rem !important; }
+.minhr-35 { min-height: 35rem !important; }
+.minhr-40 { min-height: 40rem !important; }
+.minhr-45 { min-height: 45rem !important; }
+.minhr-50 { min-height: 50rem !important; }
 
 // Max-height (rem)
 .maxhr-1 { max-height: 1rem !important; }
@@ -414,6 +455,11 @@ $spacers: (
 .maxhr-15 { max-height: 15rem !important; }
 .maxhr-20 { max-height: 20rem !important; }
 .maxhr-25 { max-height: 25rem !important; }
+.maxhr-30 { max-height: 30rem !important; }
+.maxhr-35 { max-height: 35rem !important; }
+.maxhr-40 { max-height: 40rem !important; }
+.maxhr-45 { max-height: 45rem !important; }
+.maxhr-50 { max-height: 50rem !important; }
 
 // ============================================================================
 // PERCENTAGE-BASED MIN/MAX UTILITIES
@@ -465,8 +511,11 @@ $spacers: (
 .maxw-90 { max-width: 90% !important; }
 .maxw-95 { max-width: 95% !important; }
 .maxw-100 { max-width: 100% !important; }
+.maxw-1-2 { max-width: 50% !important; }
 .maxw-1-3 { max-width: 33.333333% !important; }
 .maxw-2-3 { max-width: 66.666667% !important; }
+.maxw-1-4 { max-width: 25% !important; }
+.maxw-3-4 { max-width: 75% !important; }
 
 // Min-height (percentage)
 .minh-5 { min-height: 5% !important; }
@@ -489,8 +538,11 @@ $spacers: (
 .minh-90 { min-height: 90% !important; }
 .minh-95 { min-height: 95% !important; }
 .minh-100 { min-height: 100% !important; }
+.minh-1-2 { min-height: 50% !important; }
 .minh-1-3 { min-height: 33.333333% !important; }
 .minh-2-3 { min-height: 66.666667% !important; }
+.minh-1-4 { min-height: 25% !important; }
+.minh-3-4 { min-height: 75% !important; }
 
 // Max-height (percentage)
 .maxh-5 { max-height: 5% !important; }
@@ -513,8 +565,11 @@ $spacers: (
 .maxh-90 { max-height: 90% !important; }
 .maxh-95 { max-height: 95% !important; }
 .maxh-100 { max-height: 100% !important; }
+.maxh-1-2 { max-height: 50% !important; }
 .maxh-1-3 { max-height: 33.333333% !important; }
 .maxh-2-3 { max-height: 66.666667% !important; }
+.maxh-1-4 { max-height: 25% !important; }
+.maxh-3-4 { max-height: 75% !important; }
 
 // Position utilities
 .position-static {