@keenmate/pure-admin-core 1.0.0-rc04 → 1.0.0-rc06

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

@@ -322,6 +322,7 @@
       border-radius: $border-radius-lg;
       padding: $card-body-padding-v $card-body-padding-h;
       background-color: var(--pa-card-bg);
+      margin-bottom: $spacing-base; // Match pa-card margin
 
       // Remove bottom border from tabs since wrapper has border
       .pa-tabs {
@@ -336,6 +337,126 @@
         padding-top: $spacing-md;
       }
     }
+
+    // Card variant - tabs act as card header (same height as pa-card__header)
+    &--card {
+      position: relative; // For dropdown positioning
+      border: $card-border-width solid var(--pa-border-color);
+      border-radius: $card-border-radius;
+      background-color: var(--pa-card-bg);
+      box-shadow: $shadow-sm;
+      margin-bottom: $spacing-base; // Match pa-card margin
+
+      .pa-tabs {
+        height: $card-header-min-height;
+        padding: $card-header-padding-v $card-header-padding-h;
+        background: var(--pa-card-header-bg);
+        border-bottom: $border-width-base solid var(--pa-border-color);
+        box-sizing: border-box;
+        border-top-left-radius: $card-border-radius;
+        border-top-right-radius: $card-border-radius;
+        margin-bottom: 0;
+        align-items: center;
+        gap: $spacing-xs;
+        flex-wrap: nowrap;
+        overflow: visible; // Allow dropdown to overflow
+      }
+
+      .pa-tabs__content {
+        padding: $card-body-padding-v $card-body-padding-h;
+      }
+
+      .pa-tabs__panel {
+        padding-top: 0;
+      }
+
+      // Overflow toggle for tabs that don't fit
+      .pa-tabs__overflow {
+        position: relative;
+        margin-left: auto;
+        flex-shrink: 0;
+      }
+
+      .pa-tabs__overflow-toggle {
+        position: relative;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: $card-header-min-height;
+        height: 100%;
+        padding: 0;
+        border: none;
+        background: transparent;
+        color: var(--pa-text-secondary);
+        cursor: pointer;
+        transition: all $transition-fast $easing-snappy;
+        border-left: $border-width-base solid var(--pa-border-color);
+        margin: (-$card-header-padding-v) (-$card-header-padding-h) (-$card-header-padding-v) 0;
+        box-sizing: content-box;
+        height: $card-header-min-height;
+
+        &:hover {
+          background-color: rgba($accent-color, $card-tab-hover-opacity);
+          color: var(--pa-text-primary);
+        }
+
+        // When overflow contains the active tab
+        &--has-active {
+          color: var(--pa-accent);
+
+          &::after {
+            content: '';
+            position: absolute;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            height: $border-width-medium;
+            background: var(--pa-accent);
+          }
+        }
+
+        i {
+          font-size: $font-size-sm;
+        }
+      }
+
+      .pa-tabs__overflow-menu {
+        position: absolute;
+        top: $card-header-min-height;
+        right: 0;
+        min-width: 15rem;
+        background: var(--pa-card-bg);
+        border: $card-border-width solid var(--pa-border-color);
+        border-radius: $border-radius;
+        box-shadow: $shadow-lg;
+        z-index: $z-index-dropdown;
+        display: none;
+        flex-direction: column;
+        padding: $spacing-xs 0;
+
+        &--open {
+          display: flex;
+        }
+
+        .pa-tabs__item {
+          padding: $spacing-sm $spacing-base;
+          border: none;
+          border-bottom: none;
+          border-radius: 0;
+          text-align: left;
+          white-space: nowrap;
+
+          &:hover {
+            background-color: rgba($accent-color, $card-tab-hover-opacity);
+          }
+
+          &--active {
+            background-color: rgba($accent-color, 0.1);
+            border-bottom: none;
+          }
+        }
+      }
+    }
   }
 
   // Vertical tabs layout wrapper (for proper spacing with content)
@@ -355,6 +476,7 @@
       border-radius: $border-radius-lg;
       padding: $card-body-padding-v $card-body-padding-h;
       background-color: var(--pa-card-bg);
+      margin-bottom: $spacing-base; // Match pa-card margin
 
       // Add divider between tabs and content (gap already provides spacing)
       .pa-tabs--vertical {

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

@@ -237,6 +237,29 @@
     border-left-color: var(--pa-btn-danger-bg);
   }
 
+  // Numbered color variants (color-1 through color-9)
+  // These use theme-customizable colors from --pa-color-* CSS variables
+  @for $i from 1 through 9 {
+    &--color-#{$i}::before {
+      background-color: var(--pa-color-#{$i});
+    }
+    &--color-#{$i}::after {
+      border-top-color: var(--pa-color-#{$i});
+    }
+    &--color-#{$i}.pa-tooltip--right::after {
+      border-top-color: transparent;
+      border-right-color: var(--pa-color-#{$i});
+    }
+    &--color-#{$i}.pa-tooltip--bottom::after {
+      border-top-color: transparent;
+      border-bottom-color: var(--pa-color-#{$i});
+    }
+    &--color-#{$i}.pa-tooltip--left::after {
+      border-top-color: transparent;
+      border-left-color: var(--pa-color-#{$i});
+    }
+  }
+
   // Smart positioning - collision detection adjustments
   // Applied dynamically by JavaScript based on viewport boundaries
 
@@ -390,6 +413,7 @@
     font-size: $font-size-sm;
     line-height: $line-height-base;
     color: var(--pa-text-primary);
+    text-align: left; // Reset inherited alignment for rich content
 
     p {
       margin: 0 0 $spacing-sm 0;
@@ -454,6 +478,15 @@
     min-width: $popover-lg-min-width;
     max-width: $popover-lg-max-width;
   }
+
+  // Alignment variants
+  &--center &__body {
+    text-align: center;
+  }
+
+  &--right &__body {
+    text-align: right;
+  }
 }
 
 // ========================================
@@ -500,4 +533,11 @@
     background-color: var(--pa-btn-danger-bg);
     color: var(--pa-btn-danger-text);
   }
+
+  // Numbered color variants (color-1 through color-9)
+  @for $i from 1 through 9 {
+    &.pa-tooltip--color-#{$i} {
+      background-color: var(--pa-color-#{$i});
+    }
+  }
 }

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

@@ -235,6 +235,13 @@ html.font-size-4xl {
 .column-gap-base { column-gap: $spacing-base; }
 .column-gap-lg { column-gap: $spacing-lg; }
 
+// 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
@@ -292,3 +299,11 @@ html.font-size-4xl {
   }
 }
 
+// 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}); }
+}
+

package/src/scss/core-components/forms/_form-inputs.scss

@@ -6,6 +6,7 @@
 
 .pa-input {
   width: 100%;
+  height: #{$base-input-size-md-height}rem;
   padding: $input-padding-v $input-padding-h;
   border: $border-width-base solid var(--pa-border-color);
   border-radius: $border-radius;
@@ -23,6 +24,7 @@
 
 .pa-select {
   width: 100%;
+  height: #{$base-input-size-md-height}rem;
   padding: $select-padding-v $select-padding-h;
   border: $border-width-base solid var(--pa-border-color);
   border-radius: $border-radius;
@@ -61,27 +63,31 @@
   }
 }
 
-// Input Sizes
+// Input Sizes - heights aligned with $base-input-size-* variables
 .pa-input--xs,
 .pa-select--xs {
+  height: #{$base-input-size-xs-height}rem;
   padding: $input-padding-xs-v $input-padding-h;
   font-size: $font-size-xs;
 }
 
 .pa-input--sm,
 .pa-select--sm {
+  height: #{$base-input-size-sm-height}rem;
   padding: $input-padding-v $input-padding-h;
   font-size: $font-size-sm;
 }
 
 .pa-input--lg,
 .pa-select--lg {
+  height: #{$base-input-size-lg-height}rem;
   padding: $input-padding-v $input-padding-h;
   font-size: $font-size-base;
 }
 
 .pa-input--xl,
 .pa-select--xl {
+  height: #{$base-input-size-xl-height}rem;
   padding: $input-padding-v $input-padding-h;
   font-size: $font-size-lg;
 }

package/src/scss/core-components/layout/_layout-container.scss

@@ -95,11 +95,41 @@ body.pa-layout--sticky .pa-layout__inner {
 
 // Footer - outside inner, sibling to inner
 .pa-layout__footer {
-  height: $footer-height;
+  min-height: $footer-height;
   background-color: var(--pa-footer-bg);
   border-top: $border-width-base solid var(--pa-footer-border-color);
   display: flex;
   align-items: center;
-  padding: 0 $spacing-base;
+  padding: $spacing-xs $spacing-base;
   flex-shrink: 0; // Don't shrink footer
+  gap: $spacing-base;
+}
+
+// Footer sections - Left/Center/Right layout (mirrors navbar structure)
+.pa-footer__left {
+  display: flex;
+  align-items: center;
+  gap: $spacing-base;
+  flex-shrink: 0;
+}
+
+.pa-footer__center {
+  flex: 1;
+  min-width: 0; // Allow shrinking for ellipsis
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.pa-footer__right {
+  display: flex;
+  align-items: center;
+  gap: $spacing-base;
+  flex-shrink: 0;
+
+  &--vertical {
+    flex-direction: column;
+    align-items: flex-end;
+    gap: $spacing-xs;
+  }
 }

package/src/scss/core-components/layout/_navbar-elements.scss

@@ -60,12 +60,13 @@
       }
     }
 
+    // Note: margin auto no longer needed with pa-header__left/center/right structure
     &--left {
-      margin-right: auto;
+      // Elements in left section
     }
 
     &--right {
-      margin-left: auto;
+      // Elements in right section
     }
   }
 

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

@@ -69,3 +69,26 @@ body.pa-container-2xl .pa-navbar {
   align-items: center;
   gap: $spacing-base;
 }
+
+// Header sections - Left/Center/Right layout
+.pa-header__left {
+  display: flex;
+  align-items: center;
+  gap: $spacing-base;
+  flex-shrink: 0;
+}
+
+.pa-header__center {
+  flex: 1;
+  min-width: 0; // Allow shrinking for ellipsis
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.pa-header__right {
+  display: flex;
+  align-items: center;
+  gap: $spacing-base;
+  flex-shrink: 0;
+}

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
@@ -90,7 +103,7 @@ $table-header-bg: $audi-gray-100;
 $table-hover-bg: $audi-gray-50;
 
 // Enable red accent on table row hover (Audi signature detail)
-$table-hover-accent-width: 3px;
+$table-hover-accent-width: 0.3rem;  // 3px in 10px base
 $table-hover-accent-color: $accent-color;
 $table-hover-accent-position: left;
 
@@ -200,6 +213,10 @@ $danger-bg-light: rgba(255, 0, 0, 0.1);
 // Set body font
 $body-font-family: "Fira Sans Condensed", "Arial Narrow", "Arial", sans-serif;
 
+// Card styling - thicker border for Audi design language
+$card-border-width: $border-width-medium;
+$card-border-radius: 0; // Sharp edges
+
 // Import core styles with overridden variables
 @import '../core';
 @import '../utilities';
@@ -300,6 +317,19 @@ $body-font-family: "Fira Sans Condensed", "Arial Narrow", "Arial", sans-serif;
   }
 }
 
+// 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';
 
@@ -107,7 +120,7 @@ $table-header-bg: $audi-black;
 $table-hover-bg: $audi-gray-light;
 
 // Enable red accent on table row hover (Audi signature detail)
-$table-hover-accent-width: 3px;
+$table-hover-accent-width: 0.3rem;  // 3px in 10px base
 $table-hover-accent-color: $accent-color; // Uses the red #ff0000
 $table-hover-accent-position: left;
 
@@ -220,6 +233,10 @@ $danger-bg-light: rgba(255, 0, 0, 0.25);
 // 4. Override font family SCSS variable after fonts are defined
 $body-font-family: "Fira Sans Condensed", "Arial Narrow", "Arial", sans-serif;
 
+// Card styling - thicker border for Audi design language
+$card-border-width: $border-width-medium;
+$card-border-radius: 0; // Sharp edges
+
 // 5. Import core framework styles (will use all our SCSS variables)
 @import '../core';
 
@@ -256,8 +273,6 @@ $body-font-family: "Fira Sans Condensed", "Arial Narrow", "Arial", sans-serif;
 }
 
 .pa-card {
-  border-radius: 0 !important; // Sharp edges
-  border: $border-width-medium solid $border-color;
   box-shadow: 0 $spacing-xs ($spacing-sm * 2) rgba($audi-black, 0.8);
 }
 

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