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

package/src/scss/utilities.scss

@@ -319,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;

package/src/scss/variables/_components.scss

@@ -3,6 +3,7 @@
 // Component-specific dimensions, paddings, and settings
 // ============================================================================
 
+@use 'base' as *;
 @use 'layout' as *;
 @use 'typography' as *;
 @use 'spacing' as *;
@@ -48,27 +49,20 @@ $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)
-$btn-icon-only-size: 4rem !default;        // 40px (was 2.5rem)
-$btn-icon-only-size-lg: 4.8rem !default;   // 48px (was 3rem)
-$btn-icon-only-size-xl: 5.6rem !default;   // 56px (was 3.5rem)
 $btn-icon-margin: 0.8rem !default;         // 8px (was 0.5rem)
 $btn-min-width: 9.6rem !default;           // 96px (was 6rem)
 
@@ -90,6 +84,21 @@ $btn-hover-brightness: 0.9 !default;
 $btn-disabled-opacity: $opacity-disabled !default;
 $btn-focus-ring-opacity: 0.25 !default;
 
+// Button heights - aligned with input heights (source of truth from _base.scss)
+// These are used for icon-only buttons and table cell heights
+$btn-height-xs: #{$base-input-size-xs-height}rem !default;   // 31px
+$btn-height-sm: #{$base-input-size-sm-height}rem !default;   // 33px
+$btn-height-base: #{$base-input-size-md-height}rem !default; // 35px
+$btn-height-lg: #{$base-input-size-lg-height}rem !default;   // 38px
+$btn-height-xl: #{$base-input-size-xl-height}rem !default;   // 41px
+
+// Icon-only button sizes - match button heights (aligned with inputs)
+$btn-icon-only-size-xs: $btn-height-xs !default;
+$btn-icon-only-size-sm: $btn-height-sm !default;
+$btn-icon-only-size: $btn-height-base !default;
+$btn-icon-only-size-lg: $btn-height-lg !default;
+$btn-icon-only-size-xl: $btn-height-xl !default;
+
 // ============================================================================
 // MODAL SYSTEM
 // ============================================================================
@@ -139,13 +148,16 @@ $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
 // ============================================================================
+$card-border-width: $border-width-base !default;  // Card outer border (themes can override)
+$card-border-radius: $border-radius-lg !default;  // Controls card + header corners
 $card-body-padding-v: 1.6rem !default;     // 16px vertical
 $card-body-padding-h: 1rem !default;       // 10px horizontal
-$card-header-padding-v: 0.8rem !default;   // 8px vertical
+$card-header-padding-v: 0.5rem !default;   // 5px vertical
 $card-header-padding-h: 1rem !default;     // 10px horizontal - matches body
 $card-header-min-height: 4rem !default;    // 40px - fits xs buttons (32px) with padding
 $card-footer-padding-v: 1.2rem !default;   // 12px vertical
@@ -154,13 +166,39 @@ $card-grid-min-width: 280px !default;
 $card-stat-padding-v: $spacing-lg !default;
 $card-stat-padding-h: $spacing-base !default;
 
+// Card inline tabs (tabs inside header)
+$card-tab-inline-padding-v: 0.3rem !default;   // 3px - compact for header
+$card-tab-inline-padding-h: 0.8rem !default;   // 8px
+$card-tab-hover-opacity: 0.1 !default;
+
 // ============================================================================
 // TABLE SYSTEM
 // ============================================================================
-$table-padding-base-v: 0.5rem !default;    // 5px (was 0.3rem ~ 4.8px)
-$table-padding-base-h: 0.8rem !default;    // 8px (was 0.5rem)
-$table-spacing-2x-multiplier: 2 !default;
-$table-spacing-3x-multiplier: 3 !default;
+// Table base padding (matches button/input default)
+$table-padding-base-v: 0.8rem !default;    // 8px - matches button SM/default
+$table-padding-base-h: 0.8rem !default;    // 8px
+
+// Table size variants - synchronized with button/input sizes
+$table-padding-xs-v: $btn-padding-xs-v !default;  // 0.6rem
+$table-padding-xs-h: $btn-padding-xs-h !default;  // 0.8rem
+$table-padding-sm-v: $btn-padding-sm-v !default;  // 0.8rem
+$table-padding-sm-h: $btn-padding-sm-h !default;  // 1rem
+$table-padding-lg-v: $btn-padding-lg-v !default;  // 0.8rem
+$table-padding-lg-h: $btn-padding-lg-h !default;  // 1.4rem
+$table-padding-xl-v: $btn-padding-xl-v !default;  // 0.8rem
+$table-padding-xl-h: $btn-padding-xl-h !default;  // 1.6rem
+
+// Table cell heights - button height + size-specific buffer
+$table-cell-height-buffer-xs: 0.7rem !default;
+$table-cell-height-buffer-sm: 0.8rem !default;
+$table-cell-height-buffer-lg: 0.8rem !default;
+$table-cell-height-buffer-xl: 0.8rem !default;
+
+$table-cell-height-xs: $btn-height-xs + $table-cell-height-buffer-xs !default;
+$table-cell-height: $btn-height-base + $table-cell-height-buffer-sm !default;
+$table-cell-height-sm: $btn-height-sm + $table-cell-height-buffer-sm !default;
+$table-cell-height-lg: $btn-height-lg + $table-cell-height-buffer-lg !default;
+$table-cell-height-xl: $btn-height-xl + $table-cell-height-buffer-xl !default;
 
 // Virtual table (for large datasets)
 $virtual-table-cell-padding-v: 0.5rem !default;  // 5px (was 0.3rem)
@@ -190,9 +228,9 @@ $input-focus-ring-opacity: 0.1 !default;
 $input-focus-border-color: $accent-color !default;
 $select-focus-border-color: $accent-color !default;
 $textarea-focus-border-color: $accent-color !default;
-$input-group-prepend-bg: $primary-bg !default;
+$input-group-prepend-bg: $secondary-bg !default;
 $input-group-prepend-text: $text-secondary !default;
-$input-group-append-bg: $primary-bg !default;
+$input-group-append-bg: $secondary-bg !default;
 $input-group-append-text: $text-secondary !default;
 $checkbox-margin-top: 0.2rem !default;        // 2px (was 0.125rem)
 $checkbox-size-xs: 1.2rem !default;           // 12px (was 0.75rem)