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

package/src/styles/components/layout/responsive-grid.css

@@ -0,0 +1,422 @@
+/* Responsive Grid Component Styles */
+/* Implements Phase 2 responsive grid system with 1-5 column progression */
+
+/* Responsive Grid CSS Variables */
+:root {
+  /* Default Grid Configuration */
+  --responsive-grid-columns-xs: 1;
+  --responsive-grid-columns-sm: 2;
+  --responsive-grid-columns-md: 2;
+  --responsive-grid-columns-lg: 3;
+  --responsive-grid-columns-xl: 4;
+  --responsive-grid-columns-2xl: 4;
+  --responsive-grid-columns-3xl: 5;
+
+  /* Default Gap Configuration */
+  --responsive-grid-gap-xs: 16px;
+  --responsive-grid-gap-sm: 20px;
+  --responsive-grid-gap-md: 24px;
+  --responsive-grid-gap-lg: 28px;
+  --responsive-grid-gap-xl: 32px;
+  --responsive-grid-gap-2xl: 36px;
+  --responsive-grid-gap-3xl: 40px;
+
+  /* Grid Alignment */
+  --responsive-grid-align-items: stretch;
+  --responsive-grid-justify-items: stretch;
+
+  /* Auto-fit Configuration */
+  --responsive-grid-min-item-width: 250px;
+
+  /* Grid Item Configuration */
+  --responsive-grid-item-align-self: auto;
+  --responsive-grid-item-justify-self: auto;
+
+  /* Animation Variables */
+  --responsive-grid-transition: var(--cs-transitions-duration-normal) var(--cs-transitions-easing-ease);
+}
+
+/* Base Responsive Grid */
+.responsive-grid {
+  display: grid;
+  width: 100%;
+  align-items: var(--responsive-grid-align-items);
+  justify-items: var(--responsive-grid-justify-items);
+  transition: var(--responsive-grid-transition);
+}
+
+/* Auto-fit Grid */
+.responsive-grid--auto-fit {
+  grid-template-columns: repeat(auto-fit, minmax(var(--responsive-grid-min-item-width), 1fr));
+}
+
+/* Fixed Column Grid - Responsive Breakpoints */
+.responsive-grid:not(.responsive-grid--auto-fit) {
+  /* xs breakpoint (475px): 1 column */
+  grid-template-columns: repeat(var(--responsive-grid-columns-xs), 1fr);
+  gap: var(--responsive-grid-gap-xs);
+}
+
+/* sm breakpoint (640px): 2 columns */
+@media (min-width: 640px) {
+  .responsive-grid:not(.responsive-grid--auto-fit) {
+    grid-template-columns: repeat(var(--responsive-grid-columns-sm), 1fr);
+    gap: var(--responsive-grid-gap-sm);
+  }
+}
+
+/* md breakpoint (768px): 2 columns */
+@media (min-width: 768px) {
+  .responsive-grid:not(.responsive-grid--auto-fit) {
+    grid-template-columns: repeat(var(--responsive-grid-columns-md), 1fr);
+    gap: var(--responsive-grid-gap-md);
+  }
+}
+
+/* lg breakpoint (1024px): 3 columns */
+@media (min-width: 1024px) {
+  .responsive-grid:not(.responsive-grid--auto-fit) {
+    grid-template-columns: repeat(var(--responsive-grid-columns-lg), 1fr);
+    gap: var(--responsive-grid-gap-lg);
+  }
+}
+
+/* xl breakpoint (1280px): 4 columns */
+@media (min-width: 1280px) {
+  .responsive-grid:not(.responsive-grid--auto-fit) {
+    grid-template-columns: repeat(var(--responsive-grid-columns-xl), 1fr);
+    gap: var(--responsive-grid-gap-xl);
+  }
+}
+
+/* 2xl breakpoint (1536px): 4 columns */
+@media (min-width: 1536px) {
+  .responsive-grid:not(.responsive-grid--auto-fit) {
+    grid-template-columns: repeat(var(--responsive-grid-columns-2xl), 1fr);
+    gap: var(--responsive-grid-gap-2xl);
+  }
+}
+
+/* 3xl breakpoint (1920px): 5 columns */
+@media (min-width: 1920px) {
+  .responsive-grid:not(.responsive-grid--auto-fit) {
+    grid-template-columns: repeat(var(--responsive-grid-columns-3xl), 1fr);
+    gap: var(--responsive-grid-gap-3xl);
+  }
+}
+
+/* Auto-fit Grid Gap Responsiveness */
+.responsive-grid--auto-fit {
+  gap: var(--responsive-grid-gap-xs);
+}
+
+@media (min-width: 640px) {
+  .responsive-grid--auto-fit {
+    gap: var(--responsive-grid-gap-sm);
+  }
+}
+
+@media (min-width: 768px) {
+  .responsive-grid--auto-fit {
+    gap: var(--responsive-grid-gap-md);
+  }
+}
+
+@media (min-width: 1024px) {
+  .responsive-grid--auto-fit {
+    gap: var(--responsive-grid-gap-lg);
+  }
+}
+
+@media (min-width: 1280px) {
+  .responsive-grid--auto-fit {
+    gap: var(--responsive-grid-gap-xl);
+  }
+}
+
+@media (min-width: 1536px) {
+  .responsive-grid--auto-fit {
+    gap: var(--responsive-grid-gap-2xl);
+  }
+}
+
+@media (min-width: 1920px) {
+  .responsive-grid--auto-fit {
+    gap: var(--responsive-grid-gap-3xl);
+  }
+}
+
+/* Grid Patterns */
+
+/* Content Pattern - Optimized for reading content */
+.responsive-grid--content {
+  --responsive-grid-columns-xs: 1;
+  --responsive-grid-columns-sm: 1;
+  --responsive-grid-columns-md: 2;
+  --responsive-grid-columns-lg: 2;
+  --responsive-grid-columns-xl: 3;
+  --responsive-grid-columns-2xl: 3;
+  --responsive-grid-columns-3xl: 4;
+}
+
+/* Dashboard Pattern - More columns for data visualization */
+.responsive-grid--dashboard {
+  --responsive-grid-columns-xs: 1;
+  --responsive-grid-columns-sm: 2;
+  --responsive-grid-columns-md: 3;
+  --responsive-grid-columns-lg: 4;
+  --responsive-grid-columns-xl: 5;
+  --responsive-grid-columns-2xl: 6;
+  --responsive-grid-columns-3xl: 7;
+
+  --responsive-grid-gap-xs: 12px;
+  --responsive-grid-gap-sm: 16px;
+  --responsive-grid-gap-md: 20px;
+  --responsive-grid-gap-lg: 24px;
+  --responsive-grid-gap-xl: 28px;
+  --responsive-grid-gap-2xl: 32px;
+  --responsive-grid-gap-3xl: 36px;
+}
+
+/* Gallery Pattern - Many small items */
+.responsive-grid--gallery {
+  --responsive-grid-columns-xs: 2;
+  --responsive-grid-columns-sm: 3;
+  --responsive-grid-columns-md: 4;
+  --responsive-grid-columns-lg: 5;
+  --responsive-grid-columns-xl: 6;
+  --responsive-grid-columns-2xl: 7;
+  --responsive-grid-columns-3xl: 8;
+
+  --responsive-grid-gap-xs: 8px;
+  --responsive-grid-gap-sm: 12px;
+  --responsive-grid-gap-md: 16px;
+  --responsive-grid-gap-lg: 20px;
+  --responsive-grid-gap-xl: 24px;
+  --responsive-grid-gap-2xl: 28px;
+  --responsive-grid-gap-3xl: 32px;
+}
+
+/* Cards Pattern - Larger spacing for card layouts */
+.responsive-grid--cards {
+  --responsive-grid-columns-xs: 1;
+  --responsive-grid-columns-sm: 1;
+  --responsive-grid-columns-md: 2;
+  --responsive-grid-columns-lg: 3;
+  --responsive-grid-columns-xl: 3;
+  --responsive-grid-columns-2xl: 4;
+  --responsive-grid-columns-3xl: 4;
+
+  --responsive-grid-gap-xs: 20px;
+  --responsive-grid-gap-sm: 24px;
+  --responsive-grid-gap-md: 28px;
+  --responsive-grid-gap-lg: 32px;
+  --responsive-grid-gap-xl: 36px;
+  --responsive-grid-gap-2xl: 40px;
+  --responsive-grid-gap-3xl: 44px;
+}
+
+/* Grid Item */
+.responsive-grid-item {
+  align-self: var(--responsive-grid-item-align-self);
+  justify-self: var(--responsive-grid-item-justify-self);
+  transition: var(--responsive-grid-transition);
+}
+
+/* Grid Item Spanning - xs breakpoint */
+.responsive-grid-item--has-span {
+  grid-column: span var(--responsive-grid-item-col-span-xs, 1);
+  grid-row: span var(--responsive-grid-item-row-span-xs, 1);
+}
+
+.responsive-grid-item--has-position {
+  grid-column-start: var(--responsive-grid-item-col-start-xs, auto);
+  grid-row-start: var(--responsive-grid-item-row-start-xs, auto);
+}
+
+/* Grid Item Spanning - sm breakpoint */
+@media (min-width: 640px) {
+  .responsive-grid-item--has-span {
+    grid-column: span var(--responsive-grid-item-col-span-sm, var(--responsive-grid-item-col-span-xs, 1));
+    grid-row: span var(--responsive-grid-item-row-span-sm, var(--responsive-grid-item-row-span-xs, 1));
+  }
+
+  .responsive-grid-item--has-position {
+    grid-column-start: var(--responsive-grid-item-col-start-sm, var(--responsive-grid-item-col-start-xs, auto));
+    grid-row-start: var(--responsive-grid-item-row-start-sm, var(--responsive-grid-item-row-start-xs, auto));
+  }
+}
+
+/* Grid Item Spanning - md breakpoint */
+@media (min-width: 768px) {
+  .responsive-grid-item--has-span {
+    grid-column: span var(--responsive-grid-item-col-span-md, var(--responsive-grid-item-col-span-sm, var(--responsive-grid-item-col-span-xs, 1)));
+    grid-row: span var(--responsive-grid-item-row-span-md, var(--responsive-grid-item-row-span-sm, var(--responsive-grid-item-row-span-xs, 1)));
+  }
+
+  .responsive-grid-item--has-position {
+    grid-column-start: var(--responsive-grid-item-col-start-md, var(--responsive-grid-item-col-start-sm, var(--responsive-grid-item-col-start-xs, auto)));
+    grid-row-start: var(--responsive-grid-item-row-start-md, var(--responsive-grid-item-row-start-sm, var(--responsive-grid-item-row-start-xs, auto)));
+  }
+}
+
+/* Grid Item Spanning - lg breakpoint */
+@media (min-width: 1024px) {
+  .responsive-grid-item--has-span {
+    grid-column: span var(--responsive-grid-item-col-span-lg, var(--responsive-grid-item-col-span-md, var(--responsive-grid-item-col-span-sm, var(--responsive-grid-item-col-span-xs, 1))));
+    grid-row: span var(--responsive-grid-item-row-span-lg, var(--responsive-grid-item-row-span-md, var(--responsive-grid-item-row-span-sm, var(--responsive-grid-item-row-span-xs, 1))));
+  }
+
+  .responsive-grid-item--has-position {
+    grid-column-start: var(--responsive-grid-item-col-start-lg, var(--responsive-grid-item-col-start-md, var(--responsive-grid-item-col-start-sm, var(--responsive-grid-item-col-start-xs, auto))));
+    grid-row-start: var(--responsive-grid-item-row-start-lg, var(--responsive-grid-item-row-start-md, var(--responsive-grid-item-row-start-sm, var(--responsive-grid-item-row-start-xs, auto))));
+  }
+}
+
+/* Grid Item Spanning - xl breakpoint */
+@media (min-width: 1280px) {
+  .responsive-grid-item--has-span {
+    grid-column: span var(--responsive-grid-item-col-span-xl, var(--responsive-grid-item-col-span-lg, var(--responsive-grid-item-col-span-md, var(--responsive-grid-item-col-span-sm, var(--responsive-grid-item-col-span-xs, 1)))));
+    grid-row: span var(--responsive-grid-item-row-span-xl, var(--responsive-grid-item-row-span-lg, var(--responsive-grid-item-row-span-md, var(--responsive-grid-item-row-span-sm, var(--responsive-grid-item-row-span-xs, 1)))));
+  }
+
+  .responsive-grid-item--has-position {
+    grid-column-start: var(--responsive-grid-item-col-start-xl, var(--responsive-grid-item-col-start-lg, var(--responsive-grid-item-col-start-md, var(--responsive-grid-item-col-start-sm, var(--responsive-grid-item-col-start-xs, auto)))));
+    grid-row-start: var(--responsive-grid-item-row-start-xl, var(--responsive-grid-item-row-start-lg, var(--responsive-grid-item-row-start-md, var(--responsive-grid-item-row-start-sm, var(--responsive-grid-item-row-start-xs, auto)))));
+  }
+}
+
+/* Grid Item Spanning - 2xl breakpoint */
+@media (min-width: 1536px) {
+  .responsive-grid-item--has-span {
+    grid-column: span var(--responsive-grid-item-col-span-2xl, var(--responsive-grid-item-col-span-xl, var(--responsive-grid-item-col-span-lg, var(--responsive-grid-item-col-span-md, var(--responsive-grid-item-col-span-sm, var(--responsive-grid-item-col-span-xs, 1))))));
+    grid-row: span var(--responsive-grid-item-row-span-2xl, var(--responsive-grid-item-row-span-xl, var(--responsive-grid-item-row-span-lg, var(--responsive-grid-item-row-span-md, var(--responsive-grid-item-row-span-sm, var(--responsive-grid-item-row-span-xs, 1))))));
+  }
+
+  .responsive-grid-item--has-position {
+    grid-column-start: var(--responsive-grid-item-col-start-2xl, var(--responsive-grid-item-col-start-xl, var(--responsive-grid-item-col-start-lg, var(--responsive-grid-item-col-start-md, var(--responsive-grid-item-col-start-sm, var(--responsive-grid-item-col-start-xs, auto))))));
+    grid-row-start: var(--responsive-grid-item-row-start-2xl, var(--responsive-grid-item-row-start-xl, var(--responsive-grid-item-row-start-lg, var(--responsive-grid-item-row-start-md, var(--responsive-grid-item-row-start-sm, var(--responsive-grid-item-row-start-xs, auto))))));
+  }
+}
+
+/* Grid Item Spanning - 3xl breakpoint */
+@media (min-width: 1920px) {
+  .responsive-grid-item--has-span {
+    grid-column: span var(--responsive-grid-item-col-span-3xl, var(--responsive-grid-item-col-span-2xl, var(--responsive-grid-item-col-span-xl, var(--responsive-grid-item-col-span-lg, var(--responsive-grid-item-col-span-md, var(--responsive-grid-item-col-span-sm, var(--responsive-grid-item-col-span-xs, 1)))))));
+    grid-row: span var(--responsive-grid-item-row-span-3xl, var(--responsive-grid-item-row-span-2xl, var(--responsive-grid-item-row-span-xl, var(--responsive-grid-item-row-span-lg, var(--responsive-grid-item-row-span-md, var(--responsive-grid-item-row-span-sm, var(--responsive-grid-item-row-span-xs, 1)))))));
+  }
+
+  .responsive-grid-item--has-position {
+    grid-column-start: var(--responsive-grid-item-col-start-3xl, var(--responsive-grid-item-col-start-2xl, var(--responsive-grid-item-col-start-xl, var(--responsive-grid-item-col-start-lg, var(--responsive-grid-item-col-start-md, var(--responsive-grid-item-col-start-sm, var(--responsive-grid-item-col-start-xs, auto)))))));
+    grid-row-start: var(--responsive-grid-item-row-start-3xl, var(--responsive-grid-item-row-start-2xl, var(--responsive-grid-item-row-start-xl, var(--responsive-grid-item-row-start-lg, var(--responsive-grid-item-row-start-md, var(--responsive-grid-item-row-start-sm, var(--responsive-grid-item-row-start-xs, auto)))))));
+  }
+}
+
+/* Dark Mode Support */
+.dark .responsive-grid {
+  /* Grid styles automatically inherit from CSS variables */
+}
+
+/* High Contrast Mode Support */
+@media (prefers-contrast: high) {
+  .responsive-grid-item {
+    outline: 1px solid var(--cs-colors-border);
+    outline-offset: -1px;
+  }
+}
+
+/* Reduced Motion Support */
+@media (prefers-reduced-motion: reduce) {
+  .responsive-grid,
+  .responsive-grid-item {
+    transition: none;
+  }
+}
+
+/* Focus Management */
+.responsive-grid:focus-within {
+  /* Enhance focus visibility when grid contains focused elements */
+}
+
+.responsive-grid-item:focus-within {
+  outline: var(--cs-accessibility-focus-ring-width) solid var(--cs-accessibility-focus-ring-color);
+  outline-offset: var(--cs-accessibility-focus-ring-offset);
+}
+
+/* Print Styles */
+@media print {
+  .responsive-grid {
+    display: block;
+  }
+
+  .responsive-grid-item {
+    display: block;
+    break-inside: avoid;
+    margin-bottom: 1rem;
+  }
+}
+
+/* Container Queries for Adaptive Layouts */
+@container (min-width: 768px) {
+  .responsive-grid {
+    /* Adjust grid behavior based on container size */
+  }
+}
+
+/* Utility Classes for Layout Control */
+
+/* Gap utilities */
+.responsive-grid--gap-xs {
+  --responsive-grid-gap-xs: 8px;
+  --responsive-grid-gap-sm: 12px;
+  --responsive-grid-gap-md: 16px;
+  --responsive-grid-gap-lg: 20px;
+  --responsive-grid-gap-xl: 24px;
+  --responsive-grid-gap-2xl: 28px;
+  --responsive-grid-gap-3xl: 32px;
+}
+
+.responsive-grid--gap-sm {
+  --responsive-grid-gap-xs: 12px;
+  --responsive-grid-gap-sm: 16px;
+  --responsive-grid-gap-md: 20px;
+  --responsive-grid-gap-lg: 24px;
+  --responsive-grid-gap-xl: 28px;
+  --responsive-grid-gap-2xl: 32px;
+  --responsive-grid-gap-3xl: 36px;
+}
+
+.responsive-grid--gap-lg {
+  --responsive-grid-gap-xs: 20px;
+  --responsive-grid-gap-sm: 24px;
+  --responsive-grid-gap-md: 28px;
+  --responsive-grid-gap-lg: 32px;
+  --responsive-grid-gap-xl: 36px;
+  --responsive-grid-gap-2xl: 40px;
+  --responsive-grid-gap-3xl: 44px;
+}
+
+/* Alignment utilities */
+.responsive-grid--items-start {
+  --responsive-grid-align-items: start;
+}
+
+.responsive-grid--items-center {
+  --responsive-grid-align-items: center;
+}
+
+.responsive-grid--items-end {
+  --responsive-grid-align-items: end;
+}
+
+.responsive-grid--justify-start {
+  --responsive-grid-justify-items: start;
+}
+
+.responsive-grid--justify-center {
+  --responsive-grid-justify-items: center;
+}
+
+.responsive-grid--justify-end {
+  --responsive-grid-justify-items: end;
+}

package/src/styles/components/navigation/breadcrumb.css

@@ -410,7 +410,7 @@
 }
 
 /* Container Queries for Adaptive Layouts */
-@container (min-width: var(--cs-breakpoints-tablet)) {
+@container (min-width: 768px) {
   .breadcrumb {
     font-size: var(--cs-fonts-primary-sizes-base);
   }

package/src/styles/components/navigation/index.css

@@ -4,6 +4,7 @@
 @import './breadcrumb.css';
 @import './menu.css';
 @import './pagination.css';
+@import './progressive-navigation.css';
 @import './sidebar.css';
 @import './stepper.css';
 @import './tabs.css';

package/src/styles/components/navigation/menu.css

@@ -339,7 +339,7 @@
 }
 
 /* Menu Responsive Behavior */
-@media (max-width: var(--cs-breakpoints-mobile)) {
+@media (max-width: 640px) {
   .menu {
     min-width: 100%;
     max-width: 100%;
@@ -368,7 +368,7 @@
 }
 
 /* Container Queries for Adaptive Layouts */
-@container (min-width: var(--cs-breakpoints-tablet)) {
+@container (min-width: 768px) {
   .menu {
     font-size: var(--menu-container-font-size, var(--cs-fonts-primary-sizes-sm));
   }

package/src/styles/components/navigation/pagination.css

@@ -388,7 +388,7 @@
 }
 
 /* Pagination Responsive Behavior */
-@media (max-width: var(--cs-breakpoints-mobile)) {
+@media (max-width: 640px) {
   .pagination {
     flex-direction: column;
     gap: var(--pagination-group-spacing);
@@ -414,7 +414,7 @@
   }
 }
 
-@media (max-width: var(--cs-breakpoints-tablet)) {
+@media (max-width: 768px) {
   .pagination__total {
     display: none;
   }
@@ -425,7 +425,7 @@
 }
 
 /* Container Queries for Adaptive Layouts */
-@container (min-width: var(--cs-breakpoints-tablet)) {
+@container (min-width: 768px) {
   .pagination {
     font-size: var(--pagination-container-font-size, var(--cs-fonts-primary-sizes-sm));
   }
@@ -628,7 +628,7 @@
 }
 
 /* Responsive Design for Showcase */
-@media (min-width: var(--cs-breakpoints-tablet)) {
+@media (min-width: 768px) {
   .pagination-responsive-grid {
     grid-template-columns: 1fr 1fr !important;
   }