@rakeyshgidwani/roger-ui-bank-theme-harvey 0.2.52 → 0.3.1

package/src/styles/components/base/button.css

@@ -3,27 +3,54 @@
 
 /* Button Component CSS Variables */
 :root {
-  /* Button Base Variables */
-  --button-height-sm: calc(var(--cs-spacing-scale-2xl) + var(--cs-spacing-scale-md));
-  --button-height-md: calc(var(--cs-spacing-scale-2xl) + var(--cs-spacing-scale-lg));
-  --button-height-lg: var(--cs-spacing-scale-3xl);
-  --button-height-icon: calc(var(--cs-spacing-scale-2xl) + var(--cs-spacing-scale-lg));
-  --button-height-mobile: var(--cs-spacing-scale-3xl);
-  
-  --button-padding-y-sm: var(--cs-spacing-scale-sm);
-  --button-padding-x-sm: var(--cs-spacing-scale-md);
-  --button-padding-y-md: var(--cs-spacing-scale-md);
-  --button-padding-x-md: var(--cs-spacing-scale-lg);
-  --button-padding-y-lg: var(--cs-spacing-scale-lg);
-  --button-padding-x-lg: var(--cs-spacing-scale-xl);
+  /* Button Base Variables - Phase 2 Enhancement: Aligned with specification */
+  /* Button Size Specifications (5-tier system) */
+  --button-height-xs: 32px;
+  --button-height-sm: 36px;
+  --button-height-md: 40px;  /* default */
+  --button-height-lg: 44px;
+  --button-height-xl: 48px;
+  --button-height-icon: var(--button-height-md);
+  --button-height-mobile: var(--button-height-lg);
+
+  /* Button Padding Specifications */
+  --button-padding-xs: 6px 12px;
+  --button-padding-sm: 8px 16px;
+  --button-padding-md: 10px 20px;  /* default */
+  --button-padding-lg: 12px 24px;
+  --button-padding-xl: 14px 28px;
   --button-padding-icon: var(--cs-spacing-scale-sm);
-  --button-padding-mobile-y: var(--cs-spacing-scale-lg);
-  --button-padding-mobile-x: var(--cs-spacing-scale-xl);
-  
-  --button-font-size-sm: var(--cs-fonts-primary-sizes-sm);
-  --button-font-size-md: var(--cs-fonts-primary-sizes-base);
-  --button-font-size-lg: var(--cs-fonts-primary-sizes-lg);
-  --button-font-size-mobile: var(--cs-fonts-primary-sizes-base);
+  --button-padding-mobile: var(--button-padding-lg);
+
+  /* Individual padding values for density calculations */
+  --button-padding-xs-y: 6px;
+  --button-padding-xs-x: 12px;
+  --button-padding-sm-y: 8px;
+  --button-padding-sm-x: 16px;
+  --button-padding-md-y: 10px;
+  --button-padding-md-x: 20px;
+  --button-padding-lg-y: 12px;
+  --button-padding-lg-x: 24px;
+  --button-padding-xl-y: 14px;
+  --button-padding-xl-x: 28px;
+
+  /* Legacy variables for backward compatibility */
+  --button-padding-y-sm: 8px;
+  --button-padding-x-sm: 16px;
+  --button-padding-y-md: 10px;
+  --button-padding-x-md: 20px;
+  --button-padding-y-lg: 12px;
+  --button-padding-x-lg: 24px;
+  --button-padding-mobile-y: 12px;
+  --button-padding-mobile-x: 24px;
+
+  /* Button Font Size Specifications */
+  --button-font-size-xs: 14px;
+  --button-font-size-sm: 14px;
+  --button-font-size-md: 16px;  /* default */
+  --button-font-size-lg: 16px;
+  --button-font-size-xl: 18px;
+  --button-font-size-mobile: 16px;
   
   --button-font-weight: var(--cs-fonts-primary-weights-medium);
   --button-line-height: var(--cs-fonts-primary-line-heights-tight);
@@ -96,13 +123,13 @@
   --button-destructive-hover-shadow: var(--cs-shadows-md);
   
   --button-link-hover-text: var(--cs-colors-primary-hover);
-  --button-link-hover-underline-thickness: var(--button-link-hover-underline-thickness);
+  --button-link-hover-underline-thickness: 2px;
   
   /* Button Interactive State Variables */
   --button-focus-outline: var(--button-focus-outline-width) solid var(--cs-colors-interactive-focus);
-  --button-focus-offset: var(--button-focus-offset);
+  --button-focus-offset: 2px;
   --button-focus-visible-outline: var(--button-focus-visible-outline-width) solid var(--cs-colors-interactive-focus);
-  --button-focus-visible-offset: var(--button-focus-visible-offset);
+  --button-focus-visible-offset: 2px;
   
   --button-active-transform: scale(0.98);
   --button-active-shadow: var(--cs-shadows-sm);
@@ -118,8 +145,8 @@
   --button-disabled-background: var(--cs-colors-interactive-disabled);
   --button-disabled-text: var(--cs-colors-text-muted);
   --button-disabled-border: var(--cs-colors-interactive-disabled);
-  --button-disabled-opacity: var(--button-disabled-opacity);
-  --button-disabled-cursor: var(--button-disabled-cursor);
+  --button-disabled-opacity: 0.6;
+  --button-disabled-cursor: not-allowed;
   
   /* Button Element Variables */
   --button-icon-size: var(--cs-spacing-scale-lg);
@@ -156,10 +183,24 @@
   --button-disabled-cursor: not-allowed;
   --button-disabled-opacity: 0.6;
   
-  /* Button Responsive Variables */
-  --button-mobile-breakpoint: var(--cs-breakpoints-mobile);
-  --button-tablet-breakpoint: var(--cs-breakpoints-tablet);
-  --button-desktop-breakpoint: var(--cs-breakpoints-desktop);
+  /* Button Responsive Variables - Enhanced with Phase 1 breakpoints */
+  --button-xs-breakpoint: var(--cs-breakpoints-xs);
+  --button-sm-breakpoint: var(--cs-breakpoints-sm);
+  --button-md-breakpoint: var(--cs-breakpoints-md);
+  --button-lg-breakpoint: var(--cs-breakpoints-lg);
+  --button-xl-breakpoint: var(--cs-breakpoints-xl);
+  --button-2xl-breakpoint: var(--cs-breakpoints-2xl);
+  --button-3xl-breakpoint: var(--cs-breakpoints-3xl);
+
+  /* Button Density-Aware Variables */
+  --button-density-compact-scale: 0.875;
+  --button-density-comfortable-scale: 1.0;
+  --button-density-spacious-scale: 1.125;
+
+  /* Legacy Responsive Variables (for backward compatibility) */
+  --button-mobile-breakpoint: var(--cs-breakpoints-sm);
+  --button-tablet-breakpoint: var(--cs-breakpoints-md);
+  --button-desktop-breakpoint: var(--cs-breakpoints-lg);
   
   /* Button Showcase Variables */
   --button-showcase-gap: var(--cs-spacing-scale-md);
@@ -236,28 +277,43 @@
   to { transform: rotate(360deg); }
 }
 
-/* Button Size Variants */
+/* Button Size Variants - Phase 2 Enhancement: Complete 5-tier system */
+.button--size-xs {
+  height: var(--button-height-xs);
+  padding: var(--button-padding-xs);
+  font-size: var(--button-font-size-xs);
+  border-radius: var(--button-border-radius);
+}
+
 .button--size-sm {
   height: var(--button-height-sm);
-  padding: var(--button-padding-y-sm) var(--button-padding-x-sm);
+  padding: var(--button-padding-sm);
   font-size: var(--button-font-size-sm);
   border-radius: var(--button-border-radius);
 }
 
+.button--size-default,
 .button--size-md {
   height: var(--button-height-md);
-  padding: var(--button-padding-y-md) var(--button-padding-x-md);
+  padding: var(--button-padding-md);
   font-size: var(--button-font-size-md);
   border-radius: var(--button-border-radius);
 }
 
 .button--size-lg {
   height: var(--button-height-lg);
-  padding: var(--button-padding-y-lg) var(--button-padding-x-lg);
+  padding: var(--button-padding-lg);
   font-size: var(--button-font-size-lg);
   border-radius: var(--button-border-radius);
 }
 
+.button--size-xl {
+  height: var(--button-height-xl);
+  padding: var(--button-padding-xl);
+  font-size: var(--button-font-size-xl);
+  border-radius: var(--button-border-radius);
+}
+
 .button--size-icon {
   height: var(--button-height-icon);
   width: var(--button-height-icon);
@@ -730,14 +786,14 @@
 }
 
 /* Responsive Design for Showcase */
-@media (min-width: var(--cs-breakpoints-tablet)) {
+@media (min-width: 768px) {
   .button-responsive-grid {
     grid-template-columns: 1fr 1fr !important;
   }
 }
 
 /* Container Queries for Adaptive Layouts */
-@container (min-width: var(--cs-breakpoints-tablet)) {
+@container (min-width: 768px) {
   .button-showcase {
     gap: var(--cs-spacing-scale-lg);
   }
@@ -774,4 +830,151 @@
   }
 }
 
+/* Phase 2 Enhancement: Integration with new breakpoints and density system */
+
+/* Enhanced Responsive Design - Progressive Touch Target Optimization */
+/* xs breakpoint (475px): Large phones - use compact density */
+@media (max-width: 475px) {
+  .button {
+    min-height: calc(var(--button-height-mobile) * var(--button-density-compact-scale));
+    padding: calc(var(--button-padding-mobile-y) * var(--button-density-compact-scale)) calc(var(--button-padding-mobile-x) * var(--button-density-compact-scale));
+    font-size: calc(var(--button-font-size-mobile) * var(--button-density-compact-scale));
+    /* Ensure 48px minimum touch target on mobile */
+    min-height: 48px;
+  }
+
+  .button--size-sm {
+    min-height: 44px;
+    padding: calc(var(--button-padding-sm-y) * var(--button-density-compact-scale)) calc(var(--button-padding-sm-x) * var(--button-density-compact-scale));
+  }
+
+  .button--size-lg {
+    min-height: 52px;
+    padding: calc(var(--button-padding-lg-y) * var(--button-density-compact-scale)) calc(var(--button-padding-lg-x) * var(--button-density-compact-scale));
+  }
+}
+
+/* sm breakpoint (640px): Small tablets - transition from compact to comfortable */
+@media (min-width: 641px) and (max-width: 767px) {
+  .button {
+    min-height: calc(var(--button-height-md) * var(--button-density-comfortable-scale));
+    padding: calc(var(--button-padding-y-md) * var(--button-density-comfortable-scale)) calc(var(--button-padding-x-md) * var(--button-density-comfortable-scale));
+    font-size: calc(var(--button-font-size-md) * var(--button-density-comfortable-scale));
+    /* 46px touch target for small tablets */
+    min-height: 46px;
+  }
+}
+
+/* md breakpoint (768px): Tablets - comfortable density */
+@media (min-width: 768px) and (max-width: 1023px) {
+  .button {
+    min-height: calc(var(--button-height-md) * var(--button-density-comfortable-scale));
+    padding: calc(var(--button-padding-y-md) * var(--button-density-comfortable-scale)) calc(var(--button-padding-x-md) * var(--button-density-comfortable-scale));
+    font-size: var(--button-font-size-md);
+    /* 44px touch target for tablets */
+    min-height: 44px;
+  }
+}
+
+/* lg breakpoint (1024px): Desktop - spacious density */
+@media (min-width: 1024px) and (max-width: 1279px) {
+  .button {
+    min-height: calc(var(--button-height-lg) * var(--button-density-spacious-scale));
+    padding: calc(var(--button-padding-y-lg) * var(--button-density-spacious-scale)) calc(var(--button-padding-x-lg) * var(--button-density-spacious-scale));
+    font-size: calc(var(--button-font-size-lg) * var(--button-density-spacious-scale));
+    /* 42px touch target for desktop */
+    min-height: 42px;
+  }
+
+  /* Enable hover effects on desktop */
+  .button:hover {
+    transform: var(--button-hover-transform);
+    box-shadow: var(--button-hover-shadow);
+  }
+}
+
+/* xl breakpoint (1280px): Large desktop - enhanced spacious */
+@media (min-width: 1280px) and (max-width: 1535px) {
+  .button {
+    min-height: calc(var(--button-height-lg) * var(--button-density-spacious-scale));
+    padding: calc(var(--button-padding-y-lg) * var(--button-density-spacious-scale)) calc(var(--button-padding-x-lg) * var(--button-density-spacious-scale));
+    font-size: calc(var(--button-font-size-lg) * var(--button-density-spacious-scale));
+    /* 40px touch target for large desktop */
+    min-height: 40px;
+  }
+}
+
+/* 2xl breakpoint (1536px): Ultra-wide - optimized spacious */
+@media (min-width: 1536px) and (max-width: 1919px) {
+  .button {
+    min-height: calc(var(--button-height-lg) * var(--button-density-spacious-scale) * 1.05);
+    padding: calc(var(--button-padding-y-lg) * var(--button-density-spacious-scale) * 1.05) calc(var(--button-padding-x-lg) * var(--button-density-spacious-scale) * 1.05);
+    font-size: calc(var(--button-font-size-lg) * var(--button-density-spacious-scale) * 1.025);
+    /* 38px touch target for ultra-wide */
+    min-height: 38px;
+  }
+}
+
+/* 3xl breakpoint (1920px): Large displays - maximum spacious */
+@media (min-width: 1920px) {
+  .button {
+    min-height: calc(var(--button-height-lg) * var(--button-density-spacious-scale) * 1.1);
+    padding: calc(var(--button-padding-y-lg) * var(--button-density-spacious-scale) * 1.1) calc(var(--button-padding-x-lg) * var(--button-density-spacious-scale) * 1.1);
+    font-size: calc(var(--button-font-size-lg) * var(--button-density-spacious-scale) * 1.05);
+    /* 36px touch target for large displays */
+    min-height: 36px;
+  }
+
+  /* Enhanced interaction on large displays */
+  .button:hover {
+    transform: var(--button-hover-transform) scale(1.02);
+  }
+}
+
+/* Density-aware button variants for optimal touch targets */
+.button--density-compact {
+  min-height: calc(var(--button-height-md) * var(--button-density-compact-scale));
+  padding: calc(var(--button-padding-md-y) * var(--button-density-compact-scale)) calc(var(--button-padding-md-x) * var(--button-density-compact-scale));
+  font-size: calc(var(--button-font-size-md) * var(--button-density-compact-scale));
+}
+
+.button--density-comfortable {
+  min-height: calc(var(--button-height-md) * var(--button-density-comfortable-scale));
+  padding: calc(var(--button-padding-md-y) * var(--button-density-comfortable-scale)) calc(var(--button-padding-md-x) * var(--button-density-comfortable-scale));
+  font-size: calc(var(--button-font-size-md) * var(--button-density-comfortable-scale));
+}
+
+.button--density-spacious {
+  min-height: calc(var(--button-height-lg) * var(--button-density-spacious-scale));
+  padding: calc(var(--button-padding-lg-y) * var(--button-density-spacious-scale)) calc(var(--button-padding-lg-x) * var(--button-density-spacious-scale));
+  font-size: calc(var(--button-font-size-lg) * var(--button-density-spacious-scale));
+}
+
+/* Progressive enhancement for pointer devices */
+@media (hover: hover) and (pointer: fine) {
+  .button:hover {
+    transform: var(--button-hover-transform);
+    box-shadow: var(--button-hover-shadow);
+  }
+}
+
+/* Touch-friendly enhancements for coarse pointers */
+@media (pointer: coarse) {
+  .button {
+    /* Ensure minimum 44px touch targets on touch devices */
+    min-height: max(44px, var(--button-height-md));
+    min-width: 44px;
+  }
+
+  .button--size-sm {
+    min-height: 44px;
+    min-width: 44px;
+  }
+
+  .button--size-xs {
+    min-height: 44px;
+    min-width: 44px;
+  }
+}
+
 } /* End @layer components */

package/src/styles/components/base/card.css

@@ -366,7 +366,7 @@
 }
 
 /* Card Responsive Design */
-@media (min-width: var(--cs-breakpoints-tablet)) {
+@media (min-width: 768px) {
   .card {
     padding: var(--card-tablet-padding);
   }
@@ -387,7 +387,7 @@
   }
 }
 
-@media (min-width: var(--cs-breakpoints-desktop)) {
+@media (min-width: 1024px) {
   .card {
     padding: var(--card-desktop-padding);
   }

package/src/styles/components/base/checkbox.css

@@ -268,7 +268,7 @@
 }
 
 /* Responsive Design */
-@media (max-width: var(--cs-breakpoints-mobile)) {
+@media (max-width: 640px) {
   .checkbox-container {
     width: 100%;
     padding: var(--cs-spacing-scale-sm);
@@ -281,13 +281,13 @@
   }
 }
 
-@media (min-width: var(--cs-breakpoints-tablet)) {
+@media (min-width: 768px) {
   .checkbox-container {
     width: calc(var(--cs-spacing-scale-6xl) * 3.2);
   }
 }
 
-@media (min-width: var(--cs-breakpoints-desktop)) {
+@media (min-width: 1024px) {
   .checkbox-container {
     width: calc(var(--cs-spacing-scale-6xl) * 3.733);
   }

package/src/styles/components/base/label.css

@@ -164,14 +164,14 @@
 }
 
 /* Responsive Behavior */
-@media (min-width: var(--cs-breakpoints-tablet)) {
+@media (min-width: 768px) {
   .label-input-group--responsive {
     flex-direction: row;
     align-items: center;
   }
 }
 
-@media (min-width: var(--cs-breakpoints-desktop)) {
+@media (min-width: 1024px) {
   .label-input-group--responsive {
     gap: var(--cs-spacing-scale-md);
   }
@@ -218,7 +218,7 @@
   max-width: var(--cs-container-width-xl);
 }
 
-@media (min-width: var(--cs-breakpoints-tablet)) {
+@media (min-width: 768px) {
   .label-responsive-demo {
     grid-template-columns: 1fr 1fr;
   }

package/src/styles/components/feedback/skeleton.css

@@ -297,7 +297,7 @@
 /* RESPONSIVE DESIGN */
 /* ============================================================================ */
 
-@media (max-width: var(--cs-breakpoints-mobile)) {
+@media (max-width: 640px) {
   .skeleton__button--lg {
     height: var(--cs-spacing-scale-10);
     padding: 0 var(--cs-spacing-scale-4);

package/src/styles/components/feedback/toast.css

@@ -500,7 +500,7 @@
 /* RESPONSIVE DESIGN */
 /* ============================================================================ */
 
-@media (max-width: var(--cs-breakpoints-mobile)) {
+@media (max-width: 640px) {
   .toast-container {
     max-width: none;
     left: var(--cs-spacing-scale-2) !important;

package/src/styles/components/index.css

@@ -4,6 +4,9 @@
 /* Base components */
 @import './base/index.css';
 
+/* Layout components */
+@import './layout/index.css';
+
 /* Navigation components */
 @import './navigation/index.css';