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

package/src/scss/utilities.scss

@@ -254,94 +254,49 @@ $spacers: (
   white-space: nowrap !important;
 }
 
-// Width utilities
-.w-25 {
-  width: 25% !important;
-}
-
-.w-33 {
-  width: 33.333333% !important;
-}
-
-.w-50 {
-  width: 50% !important;
-}
-
-.w-66 {
-  width: 66.666667% !important;
-}
-
-.w-75 {
-  width: 75% !important;
-}
-
-.w-100 {
-  width: 100% !important;
-}
-
-.w-auto {
-  width: auto !important;
-}
+// Width utilities (5% increments)
+.w-5 { width: 5% !important; }
+.w-10 { width: 10% !important; }
+.w-15 { width: 15% !important; }
+.w-20 { width: 20% !important; }
+.w-25 { width: 25% !important; }
+.w-30 { width: 30% !important; }
+.w-35 { width: 35% !important; }
+.w-40 { width: 40% !important; }
+.w-45 { width: 45% !important; }
+.w-50 { width: 50% !important; }
+.w-55 { width: 55% !important; }
+.w-60 { width: 60% !important; }
+.w-65 { width: 65% !important; }
+.w-70 { width: 70% !important; }
+.w-75 { width: 75% !important; }
+.w-80 { width: 80% !important; }
+.w-85 { width: 85% !important; }
+.w-90 { width: 90% !important; }
+.w-95 { width: 95% !important; }
+.w-100 { width: 100% !important; }
+.w-auto { width: auto !important; }
+
+// Width utilities (fractions) - matches grid naming: pa-col-1-3, pa-col-2-3
+.w-1-3 { width: 33.333333% !important; }
+.w-2-3 { width: 66.666667% !important; }
 
 // Min-width utilities
-.mw-25 {
-  min-width: 25% !important;
-}
-
-.mw-33 {
-  min-width: 33.333333% !important;
-}
-
-.mw-50 {
-  min-width: 50% !important;
-}
-
-.mw-66 {
-  min-width: 66.666667% !important;
-}
-
-.mw-75 {
-  min-width: 75% !important;
-}
-
-.mw-100 {
-  min-width: 100% !important;
-}
-
-.mw-auto {
-  min-width: auto !important;
-}
+.mw-25 { min-width: 25% !important; }
+.mw-50 { min-width: 50% !important; }
+.mw-75 { min-width: 75% !important; }
+.mw-100 { min-width: 100% !important; }
+.mw-auto { min-width: auto !important; }
+.mw-1-3 { min-width: 33.333333% !important; }
+.mw-2-3 { min-width: 66.666667% !important; }
 
 // Fixed width utilities (min-width + width locked)
-.w-25-fixed {
-  min-width: 25% !important;
-  width: 25% !important;
-}
-
-.w-33-fixed {
-  min-width: 33.333333% !important;
-  width: 33.333333% !important;
-}
-
-.w-50-fixed {
-  min-width: 50% !important;
-  width: 50% !important;
-}
-
-.w-66-fixed {
-  min-width: 66.666667% !important;
-  width: 66.666667% !important;
-}
-
-.w-75-fixed {
-  min-width: 75% !important;
-  width: 75% !important;
-}
-
-.w-100-fixed {
-  min-width: 100% !important;
-  width: 100% !important;
-}
+.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-3-fixed { min-width: 33.333333% !important; width: 33.333333% !important; }
+.w-2-3-fixed { min-width: 66.666667% !important; width: 66.666667% !important; }
 
 // Height utilities
 .h-25 {
@@ -364,6 +319,203 @@ $spacers: (
   height: auto !important;
 }
 
+// ============================================================================
+// REM-BASED SIZING UTILITIES
+// Use 'r' suffix to distinguish from percentage-based utilities
+// Values: 1-10, 15, 20, 25 (rem)
+// ============================================================================
+
+// Width (rem)
+.wr-1 { width: 1rem !important; }
+.wr-2 { width: 2rem !important; }
+.wr-3 { width: 3rem !important; }
+.wr-4 { width: 4rem !important; }
+.wr-5 { width: 5rem !important; }
+.wr-6 { width: 6rem !important; }
+.wr-7 { width: 7rem !important; }
+.wr-8 { width: 8rem !important; }
+.wr-9 { width: 9rem !important; }
+.wr-10 { width: 10rem !important; }
+.wr-15 { width: 15rem !important; }
+.wr-20 { width: 20rem !important; }
+.wr-25 { width: 25rem !important; }
+
+// Min-width (rem)
+.minwr-1 { min-width: 1rem !important; }
+.minwr-2 { min-width: 2rem !important; }
+.minwr-3 { min-width: 3rem !important; }
+.minwr-4 { min-width: 4rem !important; }
+.minwr-5 { min-width: 5rem !important; }
+.minwr-6 { min-width: 6rem !important; }
+.minwr-7 { min-width: 7rem !important; }
+.minwr-8 { min-width: 8rem !important; }
+.minwr-9 { min-width: 9rem !important; }
+.minwr-10 { min-width: 10rem !important; }
+.minwr-15 { min-width: 15rem !important; }
+.minwr-20 { min-width: 20rem !important; }
+.minwr-25 { min-width: 25rem !important; }
+
+// Max-width (rem)
+.maxwr-1 { max-width: 1rem !important; }
+.maxwr-2 { max-width: 2rem !important; }
+.maxwr-3 { max-width: 3rem !important; }
+.maxwr-4 { max-width: 4rem !important; }
+.maxwr-5 { max-width: 5rem !important; }
+.maxwr-6 { max-width: 6rem !important; }
+.maxwr-7 { max-width: 7rem !important; }
+.maxwr-8 { max-width: 8rem !important; }
+.maxwr-9 { max-width: 9rem !important; }
+.maxwr-10 { max-width: 10rem !important; }
+.maxwr-15 { max-width: 15rem !important; }
+.maxwr-20 { max-width: 20rem !important; }
+.maxwr-25 { max-width: 25rem !important; }
+
+// Height (rem)
+.hr-1 { height: 1rem !important; }
+.hr-2 { height: 2rem !important; }
+.hr-3 { height: 3rem !important; }
+.hr-4 { height: 4rem !important; }
+.hr-5 { height: 5rem !important; }
+.hr-6 { height: 6rem !important; }
+.hr-7 { height: 7rem !important; }
+.hr-8 { height: 8rem !important; }
+.hr-9 { height: 9rem !important; }
+.hr-10 { height: 10rem !important; }
+.hr-15 { height: 15rem !important; }
+.hr-20 { height: 20rem !important; }
+.hr-25 { height: 25rem !important; }
+
+// Min-height (rem)
+.minhr-1 { min-height: 1rem !important; }
+.minhr-2 { min-height: 2rem !important; }
+.minhr-3 { min-height: 3rem !important; }
+.minhr-4 { min-height: 4rem !important; }
+.minhr-5 { min-height: 5rem !important; }
+.minhr-6 { min-height: 6rem !important; }
+.minhr-7 { min-height: 7rem !important; }
+.minhr-8 { min-height: 8rem !important; }
+.minhr-9 { min-height: 9rem !important; }
+.minhr-10 { min-height: 10rem !important; }
+.minhr-15 { min-height: 15rem !important; }
+.minhr-20 { min-height: 20rem !important; }
+.minhr-25 { min-height: 25rem !important; }
+
+// Max-height (rem)
+.maxhr-1 { max-height: 1rem !important; }
+.maxhr-2 { max-height: 2rem !important; }
+.maxhr-3 { max-height: 3rem !important; }
+.maxhr-4 { max-height: 4rem !important; }
+.maxhr-5 { max-height: 5rem !important; }
+.maxhr-6 { max-height: 6rem !important; }
+.maxhr-7 { max-height: 7rem !important; }
+.maxhr-8 { max-height: 8rem !important; }
+.maxhr-9 { max-height: 9rem !important; }
+.maxhr-10 { max-height: 10rem !important; }
+.maxhr-15 { max-height: 15rem !important; }
+.maxhr-20 { max-height: 20rem !important; }
+.maxhr-25 { max-height: 25rem !important; }
+
+// ============================================================================
+// PERCENTAGE-BASED MIN/MAX UTILITIES
+// Extends existing w-* and h-* utilities with min/max variants
+// ============================================================================
+
+// Min-width (percentage) - 5% increments
+.minw-5 { min-width: 5% !important; }
+.minw-10 { min-width: 10% !important; }
+.minw-15 { min-width: 15% !important; }
+.minw-20 { min-width: 20% !important; }
+.minw-25 { min-width: 25% !important; }
+.minw-30 { min-width: 30% !important; }
+.minw-35 { min-width: 35% !important; }
+.minw-40 { min-width: 40% !important; }
+.minw-45 { min-width: 45% !important; }
+.minw-50 { min-width: 50% !important; }
+.minw-55 { min-width: 55% !important; }
+.minw-60 { min-width: 60% !important; }
+.minw-65 { min-width: 65% !important; }
+.minw-70 { min-width: 70% !important; }
+.minw-75 { min-width: 75% !important; }
+.minw-80 { min-width: 80% !important; }
+.minw-85 { min-width: 85% !important; }
+.minw-90 { min-width: 90% !important; }
+.minw-95 { min-width: 95% !important; }
+.minw-100 { min-width: 100% !important; }
+.minw-1-3 { min-width: 33.333333% !important; }
+.minw-2-3 { min-width: 66.666667% !important; }
+
+// Max-width (percentage) - 5% increments
+.maxw-5 { max-width: 5% !important; }
+.maxw-10 { max-width: 10% !important; }
+.maxw-15 { max-width: 15% !important; }
+.maxw-20 { max-width: 20% !important; }
+.maxw-25 { max-width: 25% !important; }
+.maxw-30 { max-width: 30% !important; }
+.maxw-35 { max-width: 35% !important; }
+.maxw-40 { max-width: 40% !important; }
+.maxw-45 { max-width: 45% !important; }
+.maxw-50 { max-width: 50% !important; }
+.maxw-55 { max-width: 55% !important; }
+.maxw-60 { max-width: 60% !important; }
+.maxw-65 { max-width: 65% !important; }
+.maxw-70 { max-width: 70% !important; }
+.maxw-75 { max-width: 75% !important; }
+.maxw-80 { max-width: 80% !important; }
+.maxw-85 { max-width: 85% !important; }
+.maxw-90 { max-width: 90% !important; }
+.maxw-95 { max-width: 95% !important; }
+.maxw-100 { max-width: 100% !important; }
+.maxw-1-3 { max-width: 33.333333% !important; }
+.maxw-2-3 { max-width: 66.666667% !important; }
+
+// Min-height (percentage)
+.minh-5 { min-height: 5% !important; }
+.minh-10 { min-height: 10% !important; }
+.minh-15 { min-height: 15% !important; }
+.minh-20 { min-height: 20% !important; }
+.minh-25 { min-height: 25% !important; }
+.minh-30 { min-height: 30% !important; }
+.minh-35 { min-height: 35% !important; }
+.minh-40 { min-height: 40% !important; }
+.minh-45 { min-height: 45% !important; }
+.minh-50 { min-height: 50% !important; }
+.minh-55 { min-height: 55% !important; }
+.minh-60 { min-height: 60% !important; }
+.minh-65 { min-height: 65% !important; }
+.minh-70 { min-height: 70% !important; }
+.minh-75 { min-height: 75% !important; }
+.minh-80 { min-height: 80% !important; }
+.minh-85 { min-height: 85% !important; }
+.minh-90 { min-height: 90% !important; }
+.minh-95 { min-height: 95% !important; }
+.minh-100 { min-height: 100% !important; }
+.minh-1-3 { min-height: 33.333333% !important; }
+.minh-2-3 { min-height: 66.666667% !important; }
+
+// Max-height (percentage)
+.maxh-5 { max-height: 5% !important; }
+.maxh-10 { max-height: 10% !important; }
+.maxh-15 { max-height: 15% !important; }
+.maxh-20 { max-height: 20% !important; }
+.maxh-25 { max-height: 25% !important; }
+.maxh-30 { max-height: 30% !important; }
+.maxh-35 { max-height: 35% !important; }
+.maxh-40 { max-height: 40% !important; }
+.maxh-45 { max-height: 45% !important; }
+.maxh-50 { max-height: 50% !important; }
+.maxh-55 { max-height: 55% !important; }
+.maxh-60 { max-height: 60% !important; }
+.maxh-65 { max-height: 65% !important; }
+.maxh-70 { max-height: 70% !important; }
+.maxh-75 { max-height: 75% !important; }
+.maxh-80 { max-height: 80% !important; }
+.maxh-85 { max-height: 85% !important; }
+.maxh-90 { max-height: 90% !important; }
+.maxh-95 { max-height: 95% !important; }
+.maxh-100 { max-height: 100% !important; }
+.maxh-1-3 { max-height: 33.333333% !important; }
+.maxh-2-3 { max-height: 66.666667% !important; }
+
 // Position utilities
 .position-static {
   position: static !important;
@@ -426,6 +578,30 @@ $spacers: (
   border-left: 0 !important;
 }
 
+// Border style utilities
+.border-solid { border-style: solid !important; }
+.border-dashed { border-style: dashed !important; }
+.border-dotted { border-style: dotted !important; }
+.border-none { border-style: none !important; }
+
+// Text color utilities (semantic colors)
+.text-primary { color: var(--pa-accent) !important; }
+.text-success { color: var(--pa-success-text) !important; }
+.text-danger { color: var(--pa-danger-text) !important; }
+.text-warning { color: var(--pa-warning-text) !important; }
+.text-info { color: var(--pa-info-text) !important; }
+
+// Text color utilities (theme custom colors 1-9)
+.text-color-1 { color: var(--pa-color-1) !important; }
+.text-color-2 { color: var(--pa-color-2) !important; }
+.text-color-3 { color: var(--pa-color-3) !important; }
+.text-color-4 { color: var(--pa-color-4) !important; }
+.text-color-5 { color: var(--pa-color-5) !important; }
+.text-color-6 { color: var(--pa-color-6) !important; }
+.text-color-7 { color: var(--pa-color-7) !important; }
+.text-color-8 { color: var(--pa-color-8) !important; }
+.text-color-9 { color: var(--pa-color-9) !important; }
+
 // Rounded utilities
 .rounded {
   border-radius: var(--border-radius) !important;

package/src/scss/variables/_colors.scss

@@ -200,3 +200,18 @@ $code-syntax-property: #dd4a68 !default;
 
 $comparison-accent-pink: #ec4899 !default;
 $comparison-accent-orange: #f97316 !default;
+
+// =============================================================================
+// CUSTOM THEME COLOR SLOTS (1-9)
+// Themes can override these to provide additional branded colors
+// =============================================================================
+
+$color-1: transparent !default;
+$color-2: transparent !default;
+$color-3: transparent !default;
+$color-4: transparent !default;
+$color-5: transparent !default;
+$color-6: transparent !default;
+$color-7: transparent !default;
+$color-8: transparent !default;
+$color-9: transparent !default;

package/src/scss/variables/_components.scss

@@ -48,21 +48,19 @@ $composite-badge-label-hover-bg: $secondary-lighter-bg !default;
 // ============================================================================
 // BUTTON SYSTEM
 // ============================================================================
-$btn-group-gap: 0.32rem !default;          // 3.2px - default gap
-$btn-group-gap-compact: 0.16rem !default;  // 1.6px - tight grouping
-$btn-group-gap-loose: 0.8rem !default;     // 8px - spacious grouping
-
-// Button specific - linear size progression (10px base)
-$btn-padding-v: 0.8rem !default;           // 8px (was 0.5rem)
-$btn-padding-h: 1.2rem !default;           // 12px (was 0.75rem)
-$btn-padding-xs-v: 0.4rem !default;        // 4px (was 0.25rem)
-$btn-padding-xs-h: 0.8rem !default;        // 8px (was 0.5rem)
-$btn-padding-sm-v: 0.6rem !default;        // 6px (was 0.375rem)
-$btn-padding-sm-h: 1rem !default;          // 10px (was 0.625rem)
-$btn-padding-lg-v: 1rem !default;          // 10px (was 0.625rem)
-$btn-padding-lg-h: 1.4rem !default;        // 14px (was 0.875rem)
-$btn-padding-xl-v: 1.2rem !default;        // 12px (was 0.75rem)
-$btn-padding-xl-h: 1.6rem !default;        // 16px (was 1rem)
+$btn-group-gap: 0.3rem !default;           // 3px - default gap (use gap-* utilities for other sizes)
+
+// Button specific - vertical padding matches input padding for height alignment
+$btn-padding-v: 0.8rem !default;           // 8px - matches input default
+$btn-padding-h: 1.2rem !default;           // 12px
+$btn-padding-xs-v: 0.6rem !default;        // 6px - matches input-xs
+$btn-padding-xs-h: 0.8rem !default;        // 8px
+$btn-padding-sm-v: 0.8rem !default;        // 8px - matches input default
+$btn-padding-sm-h: 1rem !default;          // 10px
+$btn-padding-lg-v: 0.8rem !default;        // 8px - matches input default
+$btn-padding-lg-h: 1.4rem !default;        // 14px
+$btn-padding-xl-v: 0.8rem !default;        // 8px - matches input default
+$btn-padding-xl-h: 1.6rem !default;        // 16px
 $btn-border-width: 1px !default;
 $btn-icon-only-size-xs: 2.8rem !default;   // 28px (was 1.75rem)
 $btn-icon-only-size-sm: 3.2rem !default;   // 32px (was 2rem)
@@ -139,6 +137,7 @@ $profile-button-padding-v: $spacing-sm !default;
 $profile-button-padding-h: $spacing-md !default;
 $profile-role-letter-spacing: 0.5px !default;
 $profile-panel-mobile-max-width: 40rem !default;  // 400px (was 25rem)
+$profile-panel-content-padding: 1.6rem !default;  // Matches sidebar-padding horizontal (16px)
 
 // ============================================================================
 // CARD SYSTEM
@@ -266,6 +265,11 @@ $alert-info-bg: $info-bg-subtle !default;
 $alert-info-border: $info-border !default;
 $alert-info-text: $info-bg !default;
 
+// ============================================================================
+// CALLOUT SYSTEM
+// ============================================================================
+$callout-border-width: 0.4rem !default;  // 4px left border accent
+
 // ============================================================================
 // STATS SYSTEM
 // ============================================================================