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

package/src/styles/components/navigation/progressive-navigation.css

@@ -0,0 +1,633 @@
+/* Progressive Navigation Component Styles */
+/* Implements Phase 2 progressive navigation patterns with responsive breakpoints */
+
+/* Progressive Navigation CSS Variables */
+:root {
+  /* Base Layout Variables */
+  --progressive-nav-mobile-height: 56px;
+  --progressive-nav-tablet-height: 64px;
+  --progressive-nav-desktop-height: 72px;
+
+  /* Touch Target Variables */
+  --progressive-nav-mobile-touch-target: 48px;
+  --progressive-nav-tablet-touch-target: 44px;
+  --progressive-nav-desktop-touch-target: 40px;
+
+  /* Logo Size Variables */
+  --progressive-nav-logo-sm: var(--cs-spacing-scale-lg);
+  --progressive-nav-logo-md: var(--cs-spacing-scale-xl);
+  --progressive-nav-logo-lg: var(--cs-spacing-scale-2xl);
+
+  /* Color Variables */
+  --progressive-nav-bg: var(--cs-colors-surface-background);
+  --progressive-nav-border: var(--cs-colors-border);
+  --progressive-nav-text-primary: var(--cs-colors-text-primary);
+  --progressive-nav-text-secondary: var(--cs-colors-text-secondary);
+  --progressive-nav-text-muted: var(--cs-colors-text-muted);
+  --progressive-nav-interactive-hover: var(--cs-colors-interactive-hover);
+  --progressive-nav-interactive-active: var(--cs-colors-interactive-active);
+  --progressive-nav-primary: var(--cs-colors-primary-500);
+
+  /* Spacing Variables */
+  --progressive-nav-padding-xs: var(--cs-spacing-scale-xs);
+  --progressive-nav-padding-sm: var(--cs-spacing-scale-sm);
+  --progressive-nav-padding-md: var(--cs-spacing-scale-md);
+  --progressive-nav-padding-lg: var(--cs-spacing-scale-lg);
+  --progressive-nav-gap: var(--cs-spacing-scale-md);
+
+  /* Typography Variables */
+  --progressive-nav-font-size: var(--cs-fonts-primary-sizes-sm);
+  --progressive-nav-font-weight: var(--cs-fonts-primary-weights-medium);
+  --progressive-nav-line-height: var(--cs-fonts-primary-line-heights-normal);
+
+  /* Animation Variables */
+  --progressive-nav-transition: var(--cs-transitions-duration-normal) var(--cs-transitions-easing-ease);
+  --progressive-nav-shadow: var(--cs-shadows-md);
+  --progressive-nav-border-radius: var(--cs-border-radius-md);
+
+  /* Z-index Variables */
+  --progressive-nav-z-index: 1000;
+  --progressive-nav-dropdown-z-index: 1010;
+  --progressive-nav-overlay-z-index: 999;
+}
+
+/* Base Progressive Navigation Styles */
+.progressive-nav {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  background-color: var(--progressive-nav-bg);
+  border-bottom: var(--cs-border-width-sm) solid var(--progressive-nav-border);
+  box-shadow: var(--progressive-nav-shadow);
+  position: sticky;
+  top: 0;
+  z-index: var(--progressive-nav-z-index);
+  font-family: var(--cs-fonts-primary-family);
+  font-size: var(--progressive-nav-font-size);
+  font-weight: var(--progressive-nav-font-weight);
+  line-height: var(--progressive-nav-line-height);
+}
+
+/* Dark mode support */
+.dark .progressive-nav {
+  background-color: var(--cs-modes-dark-colors-surface-background);
+  border-bottom-color: var(--cs-modes-dark-colors-border);
+}
+
+/* Mobile Navigation Pattern (xs-sm breakpoints) */
+.progressive-nav--mobile {
+  height: var(--progressive-nav-mobile-height);
+}
+
+.progressive-nav__mobile-container {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  padding: 0 var(--progressive-nav-padding-md);
+}
+
+.progressive-nav__mobile-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+}
+
+/* Mobile Logo Styles */
+.progressive-nav__logo {
+  display: flex;
+  align-items: center;
+  color: var(--progressive-nav-text-primary);
+  text-decoration: none;
+}
+
+.progressive-nav__logo--sm {
+  height: var(--progressive-nav-logo-sm);
+}
+
+.progressive-nav__logo--md {
+  height: var(--progressive-nav-logo-md);
+}
+
+.progressive-nav__logo--lg {
+  height: var(--progressive-nav-logo-lg);
+}
+
+.progressive-nav__logo-link {
+  text-decoration: none;
+  color: inherit;
+  transition: var(--progressive-nav-transition);
+}
+
+.progressive-nav__logo-link:hover {
+  opacity: 0.8;
+}
+
+/* Dark mode logo support */
+.dark .progressive-nav__logo {
+  color: var(--cs-modes-dark-colors-text-primary);
+}
+
+/* Mobile Hamburger Toggle */
+.progressive-nav__mobile-toggle {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: none;
+  border: none;
+  color: var(--progressive-nav-text-primary);
+  cursor: pointer;
+  border-radius: var(--progressive-nav-border-radius);
+  transition: var(--progressive-nav-transition);
+  padding: var(--cs-spacing-scale-xs);
+}
+
+.progressive-nav__mobile-toggle:hover {
+  background-color: var(--progressive-nav-interactive-hover);
+}
+
+.progressive-nav__mobile-toggle:focus {
+  outline: var(--cs-accessibility-focus-ring-width) solid var(--cs-accessibility-focus-ring-color);
+  outline-offset: var(--cs-accessibility-focus-ring-offset);
+}
+
+.progressive-nav__mobile-toggle-icon {
+  width: var(--cs-spacing-scale-md);
+  height: var(--cs-spacing-scale-md);
+}
+
+/* Dark mode toggle support */
+.dark .progressive-nav__mobile-toggle {
+  color: var(--cs-modes-dark-colors-text-primary);
+}
+
+.dark .progressive-nav__mobile-toggle:hover {
+  background-color: var(--cs-modes-dark-colors-interactive-hover);
+}
+
+/* Mobile Menu Overlay */
+.progressive-nav__mobile-overlay {
+  position: fixed;
+  top: var(--progressive-nav-mobile-height);
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, var(--cs-colors-alpha-medium));
+  z-index: var(--progressive-nav-overlay-z-index);
+  opacity: 0;
+  animation: fadeIn var(--progressive-nav-transition);
+}
+
+.dark .progressive-nav__mobile-overlay {
+  background-color: rgba(0, 0, 0, var(--cs-colors-alpha-high));
+}
+
+@keyframes fadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+/* Mobile Menu */
+.progressive-nav__mobile-menu {
+  position: fixed;
+  top: var(--progressive-nav-mobile-height);
+  left: 0;
+  right: 0;
+  background-color: var(--progressive-nav-bg);
+  border-bottom: var(--cs-border-width-sm) solid var(--progressive-nav-border);
+  box-shadow: var(--progressive-nav-shadow);
+  z-index: var(--progressive-nav-dropdown-z-index);
+  max-height: calc(100vh - var(--progressive-nav-mobile-height));
+  overflow-y: auto;
+  animation: slideDown var(--progressive-nav-transition);
+}
+
+.dark .progressive-nav__mobile-menu {
+  background-color: var(--cs-modes-dark-colors-surface-background);
+  border-bottom-color: var(--cs-modes-dark-colors-border);
+}
+
+@keyframes slideDown {
+  from {
+    opacity: 0;
+    transform: translateY(-10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.progressive-nav__mobile-content {
+  padding: var(--progressive-nav-padding-md);
+}
+
+/* Mobile Navigation Items */
+.progressive-nav__mobile-item,
+.progressive-nav__item {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  padding: var(--progressive-nav-padding-sm) var(--progressive-nav-padding-md);
+  background: none;
+  border: none;
+  color: var(--progressive-nav-text-primary);
+  text-align: left;
+  text-decoration: none;
+  cursor: pointer;
+  border-radius: var(--progressive-nav-border-radius);
+  transition: var(--progressive-nav-transition);
+  gap: var(--progressive-nav-padding-sm);
+  min-height: var(--progressive-nav-mobile-touch-target);
+}
+
+.progressive-nav__mobile-item:hover,
+.progressive-nav__item:hover {
+  background-color: var(--progressive-nav-interactive-hover);
+}
+
+.progressive-nav__mobile-item:focus,
+.progressive-nav__item:focus {
+  outline: var(--cs-accessibility-focus-ring-width) solid var(--cs-accessibility-focus-ring-color);
+  outline-offset: var(--cs-accessibility-focus-ring-offset);
+}
+
+.progressive-nav__mobile-item--active,
+.progressive-nav__item--active {
+  background-color: var(--progressive-nav-primary);
+  color: var(--cs-colors-surface-background);
+  font-weight: var(--cs-fonts-primary-weights-semibold);
+}
+
+.progressive-nav__mobile-item--disabled,
+.progressive-nav__item--disabled {
+  color: var(--progressive-nav-text-muted);
+  cursor: not-allowed;
+  opacity: var(--cs-accessibility-disabled-opacity);
+}
+
+.progressive-nav__mobile-item--disabled:hover,
+.progressive-nav__item--disabled:hover {
+  background-color: transparent;
+}
+
+/* Dark mode item support */
+.dark .progressive-nav__mobile-item,
+.dark .progressive-nav__item {
+  color: var(--cs-modes-dark-colors-text-primary);
+}
+
+.dark .progressive-nav__mobile-item:hover,
+.dark .progressive-nav__item:hover {
+  background-color: var(--cs-modes-dark-colors-interactive-hover);
+}
+
+.dark .progressive-nav__mobile-item--active,
+.dark .progressive-nav__item--active {
+  background-color: var(--cs-modes-dark-colors-primary-500);
+  color: var(--cs-modes-dark-colors-text-inverse);
+}
+
+/* Mobile Groups */
+.progressive-nav__mobile-group {
+  margin-bottom: var(--progressive-nav-padding-lg);
+}
+
+.progressive-nav__mobile-group:last-child {
+  margin-bottom: 0;
+}
+
+.progressive-nav__mobile-group-title {
+  padding: var(--progressive-nav-padding-sm) var(--progressive-nav-padding-md);
+  font-size: var(--cs-fonts-primary-sizes-xs);
+  font-weight: var(--cs-fonts-primary-weights-semibold);
+  color: var(--progressive-nav-text-muted);
+  text-transform: uppercase;
+  letter-spacing: var(--cs-fonts-primary-letter-spacing-wide);
+}
+
+.dark .progressive-nav__mobile-group-title {
+  color: var(--cs-modes-dark-colors-text-muted);
+}
+
+.progressive-nav__mobile-group-items {
+  display: flex;
+  flex-direction: column;
+  gap: var(--progressive-nav-padding-xs);
+}
+
+/* Tablet Navigation Pattern (md breakpoint) */
+.progressive-nav--tablet {
+  height: var(--progressive-nav-tablet-height);
+}
+
+.progressive-nav__tablet-container {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  padding: 0 var(--progressive-nav-padding-lg);
+  gap: var(--progressive-nav-gap);
+}
+
+.progressive-nav__tablet-content {
+  display: flex;
+  align-items: center;
+  flex: 1;
+  gap: var(--progressive-nav-gap);
+}
+
+.progressive-nav__tablet-items {
+  display: flex;
+  align-items: center;
+  gap: var(--progressive-nav-padding-sm);
+}
+
+/* Desktop Navigation Pattern (lg+ breakpoints) */
+.progressive-nav--desktop {
+  height: var(--progressive-nav-desktop-height);
+}
+
+.progressive-nav__desktop-container {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  padding: 0 var(--progressive-nav-padding-lg);
+  gap: var(--progressive-nav-gap);
+}
+
+.progressive-nav__desktop-content {
+  display: flex;
+  align-items: center;
+  flex: 1;
+  gap: var(--progressive-nav-gap);
+}
+
+.progressive-nav__desktop-items {
+  display: flex;
+  align-items: center;
+  gap: var(--progressive-nav-padding-md);
+}
+
+/* Navigation Groups (Desktop/Tablet Dropdowns) */
+.progressive-nav__group {
+  position: relative;
+}
+
+.progressive-nav__group-trigger {
+  display: flex;
+  align-items: center;
+  gap: var(--progressive-nav-padding-xs);
+  padding: var(--progressive-nav-padding-sm) var(--progressive-nav-padding-md);
+  background: none;
+  border: none;
+  color: var(--progressive-nav-text-primary);
+  cursor: pointer;
+  border-radius: var(--progressive-nav-border-radius);
+  transition: var(--progressive-nav-transition);
+  min-height: var(--progressive-nav-tablet-touch-target);
+}
+
+.progressive-nav__group-trigger:hover {
+  background-color: var(--progressive-nav-interactive-hover);
+}
+
+.progressive-nav__group-trigger:focus {
+  outline: var(--cs-accessibility-focus-ring-width) solid var(--cs-accessibility-focus-ring-color);
+  outline-offset: var(--cs-accessibility-focus-ring-offset);
+}
+
+.progressive-nav__group-trigger--active {
+  background-color: var(--progressive-nav-interactive-active);
+}
+
+.progressive-nav__group-title {
+  font-weight: var(--cs-fonts-primary-weights-medium);
+}
+
+.progressive-nav__group-arrow {
+  width: var(--cs-spacing-scale-sm);
+  height: var(--cs-spacing-scale-sm);
+  transition: var(--progressive-nav-transition);
+}
+
+.progressive-nav__group-arrow--expanded {
+  transform: rotate(180deg);
+}
+
+/* Dark mode group support */
+.dark .progressive-nav__group-trigger {
+  color: var(--cs-modes-dark-colors-text-primary);
+}
+
+.dark .progressive-nav__group-trigger:hover {
+  background-color: var(--cs-modes-dark-colors-interactive-hover);
+}
+
+.dark .progressive-nav__group-trigger--active {
+  background-color: var(--cs-modes-dark-colors-interactive-active);
+}
+
+/* Dropdown Menu */
+.progressive-nav__dropdown {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  min-width: 200px;
+  background-color: var(--progressive-nav-bg);
+  border: var(--cs-border-width-sm) solid var(--progressive-nav-border);
+  border-radius: var(--progressive-nav-border-radius);
+  box-shadow: var(--progressive-nav-shadow);
+  z-index: var(--progressive-nav-dropdown-z-index);
+  padding: var(--progressive-nav-padding-xs);
+  animation: dropdownFadeIn var(--progressive-nav-transition);
+}
+
+.dark .progressive-nav__dropdown {
+  background-color: var(--cs-modes-dark-colors-surface-background);
+  border-color: var(--cs-modes-dark-colors-border);
+}
+
+@keyframes dropdownFadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(-4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.progressive-nav__dropdown-item {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  padding: var(--progressive-nav-padding-sm);
+  background: none;
+  border: none;
+  color: var(--progressive-nav-text-primary);
+  text-align: left;
+  cursor: pointer;
+  border-radius: var(--cs-border-radius-sm);
+  transition: var(--progressive-nav-transition);
+  gap: var(--progressive-nav-padding-sm);
+}
+
+.progressive-nav__dropdown-item:hover {
+  background-color: var(--progressive-nav-interactive-hover);
+}
+
+.progressive-nav__dropdown-item:focus {
+  outline: var(--cs-accessibility-focus-ring-width) solid var(--cs-accessibility-focus-ring-color);
+  outline-offset: var(--cs-accessibility-focus-ring-offset);
+}
+
+.progressive-nav__dropdown-item--active {
+  background-color: var(--progressive-nav-primary);
+  color: var(--cs-colors-surface-background);
+  font-weight: var(--cs-fonts-primary-weights-semibold);
+}
+
+.progressive-nav__dropdown-item--disabled {
+  color: var(--progressive-nav-text-muted);
+  cursor: not-allowed;
+  opacity: var(--cs-accessibility-disabled-opacity);
+}
+
+.progressive-nav__dropdown-item--disabled:hover {
+  background-color: transparent;
+}
+
+/* Dark mode dropdown support */
+.dark .progressive-nav__dropdown-item {
+  color: var(--cs-modes-dark-colors-text-primary);
+}
+
+.dark .progressive-nav__dropdown-item:hover {
+  background-color: var(--cs-modes-dark-colors-interactive-hover);
+}
+
+.dark .progressive-nav__dropdown-item--active {
+  background-color: var(--cs-modes-dark-colors-primary-500);
+  color: var(--cs-modes-dark-colors-text-inverse);
+}
+
+/* Secondary Actions (Desktop only) */
+.progressive-nav__secondary-actions {
+  display: flex;
+  align-items: center;
+  gap: var(--progressive-nav-padding-sm);
+}
+
+.progressive-nav__secondary-action {
+  display: flex;
+  align-items: center;
+}
+
+/* Item Elements */
+.progressive-nav__item-icon,
+.progressive-nav__mobile-item-icon,
+.progressive-nav__dropdown-item-icon {
+  width: var(--cs-spacing-scale-md);
+  height: var(--cs-spacing-scale-md);
+  flex-shrink: 0;
+}
+
+.progressive-nav__item-label,
+.progressive-nav__mobile-item-label,
+.progressive-nav__dropdown-item-label {
+  flex: 1;
+  white-space: nowrap;
+}
+
+.progressive-nav__item-badge,
+.progressive-nav__mobile-item-badge,
+.progressive-nav__dropdown-item-badge {
+  flex-shrink: 0;
+  margin-left: auto;
+}
+
+/* Responsive Breakpoints */
+@media (max-width: 640px) {
+  .progressive-nav--tablet,
+  .progressive-nav--desktop {
+    display: none;
+  }
+}
+
+@media (min-width: 641px) and (max-width: 1023px) {
+  .progressive-nav--mobile,
+  .progressive-nav--desktop {
+    display: none;
+  }
+}
+
+@media (min-width: 1024px) {
+  .progressive-nav--mobile,
+  .progressive-nav--tablet {
+    display: none;
+  }
+
+  /* Desktop touch targets can be smaller */
+  .progressive-nav__item,
+  .progressive-nav__group-trigger {
+    min-height: var(--progressive-nav-desktop-touch-target);
+  }
+}
+
+/* High Contrast Mode Support */
+@media (prefers-contrast: high) {
+  .progressive-nav {
+    border-bottom-width: calc(var(--cs-border-width-sm) * 2);
+  }
+
+  .progressive-nav__dropdown {
+    border-width: calc(var(--cs-border-width-sm) * 2);
+  }
+}
+
+/* Reduced Motion Support */
+@media (prefers-reduced-motion: reduce) {
+  .progressive-nav *,
+  .progressive-nav *::before,
+  .progressive-nav *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+
+  .progressive-nav__group-arrow--expanded {
+    transform: none;
+  }
+}
+
+/* Focus Management for Accessibility */
+.progressive-nav:focus-within .progressive-nav__dropdown {
+  display: block;
+}
+
+/* Skip to content link support */
+.progressive-nav__skip-link {
+  position: absolute;
+  top: -40px;
+  left: 6px;
+  background: var(--progressive-nav-bg);
+  color: var(--progressive-nav-text-primary);
+  padding: 8px;
+  text-decoration: none;
+  border-radius: 4px;
+  border: 1px solid var(--progressive-nav-border);
+  z-index: 1100;
+}
+
+.progressive-nav__skip-link:focus {
+  top: 6px;
+}
+
+.dark .progressive-nav__skip-link {
+  background: var(--cs-modes-dark-colors-surface-background);
+  color: var(--cs-modes-dark-colors-text-primary);
+  border-color: var(--cs-modes-dark-colors-border);
+}

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

@@ -515,7 +515,7 @@
 }
 
 /* Sidebar Responsive Behavior */
-@media (max-width: var(--cs-breakpoints-tablet)) {
+@media (max-width: 768px) {
   .sidebar {
     transform: translateX(-100%);
   }
@@ -529,7 +529,7 @@
   }
 }
 
-@media (max-width: var(--cs-breakpoints-mobile)) {
+@media (max-width: 640px) {
   .sidebar {
     width: 100%;
     font-size: var(--sidebar-mobile-font-size, var(--cs-fonts-primary-sizes-xs));
@@ -546,7 +546,7 @@
 }
 
 /* Container Queries for Adaptive Layouts */
-@container (min-width: var(--cs-breakpoints-tablet)) {
+@container (min-width: 768px) {
   .sidebar {
     font-size: var(--sidebar-container-font-size, var(--cs-fonts-primary-sizes-sm));
   }
@@ -800,7 +800,7 @@
 }
 
 /* Responsive Design for Showcase */
-@media (min-width: var(--cs-breakpoints-tablet)) {
+@media (min-width: 768px) {
   .sidebar-responsive-grid {
     grid-template-columns: 1fr 1fr !important;
   }

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

@@ -408,7 +408,7 @@
 }
 
 /* Stepper Responsive Behavior */
-@media (max-width: var(--cs-breakpoints-tablet)) {
+@media (max-width: 768px) {
   .stepper--horizontal {
     flex-direction: column;
   }
@@ -432,7 +432,7 @@
   }
 }
 
-@media (max-width: var(--cs-breakpoints-mobile)) {
+@media (max-width: 640px) {
   .stepper__step-number {
     width: var(--stepper-step-size-small);
     height: var(--stepper-step-size-small);

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

@@ -386,7 +386,7 @@
 }
 
 /* Tabs Responsive Behavior */
-@media (max-width: var(--cs-breakpoints-mobile)) {
+@media (max-width: 640px) {
   .tabs__list--vertical {
     flex-direction: row;
     overflow-x: auto;

package/src/styles/progressive.css

@@ -0,0 +1,17 @@
+/* Progressive CSS - Phase 3 Performance Optimization */
+/* Desktop enhancement styles (lg-3xl breakpoints) loaded on demand */
+
+/* Desktop-enhanced component styles */
+@import './components/navigation/index.css';
+@import './components/data-display/index.css';
+@import './components/feedback/index.css';
+@import './components/overlay/index.css';
+@import './components/ui/index.css';
+
+/* Desktop-specific utilities */
+@import './utilities/hardware-acceleration.css';
+@import './utilities/advanced-transition-system.css';
+@import './utilities/design-system-utilities.css';
+
+/* Desktop responsive enhancements (lg-3xl only) */
+/* These will be filtered during build to include only progressive breakpoints */