@rakeyshgidwani/roger-ui-bank-theme-jeremy 0.5.3

package/src/styles/utilities/battery-conscious-animations.css

@@ -0,0 +1,289 @@
+/* Battery-Conscious Mobile Animations CSS */
+
+/* Base battery-conscious animation class */
+.battery-conscious-animation {
+  transition: all 0.3s ease-out;
+  will-change: transform, opacity;
+  transform: translateZ(0);
+  backface-visibility: hidden;
+}
+
+/* Battery-aware animation variants */
+.battery-optimized-animation {
+  transition: all 0.2s ease-out;
+  will-change: transform;
+  transform: translateZ(0);
+}
+
+.battery-critical-animation {
+  transition: opacity 0.1s linear;
+  will-change: opacity;
+  transform: none;
+}
+
+/* Performance-based animation classes */
+.performance-throttled-light {
+  transition: all 0.25s ease-out;
+  will-change: transform, opacity;
+}
+
+.performance-throttled-moderate {
+  transition: all 0.2s ease-out;
+  will-change: transform;
+}
+
+.performance-throttled-aggressive {
+  transition: opacity 0.15s linear;
+  will-change: opacity;
+}
+
+/* Reduced motion support */
+@media (prefers-reduced-motion: reduce) {
+  .battery-conscious-animation,
+  .battery-optimized-animation,
+  .battery-critical-animation,
+  .performance-throttled-light,
+  .performance-throttled-moderate,
+  .performance-throttled-aggressive {
+    animation: none !important;
+    transition: opacity 0.1s linear !important;
+    transform: none !important;
+  }
+  
+  /* Ensure essential transitions still work */
+  .essential-transition {
+    transition: opacity 0.1s linear !important;
+  }
+}
+
+/* Battery level specific optimizations */
+.battery-low .battery-conscious-animation {
+  transition-duration: 0.2s;
+  transition-timing-function: ease-out;
+}
+
+.battery-critical .battery-conscious-animation {
+  transition-duration: 0.1s;
+  transition-timing-function: linear;
+  transform: none;
+}
+
+/* Performance-based animation adjustments */
+.performance-poor .battery-conscious-animation {
+  transition-duration: 0.15s;
+  transition-timing-function: linear;
+}
+
+.performance-fair .battery-conscious-animation {
+  transition-duration: 0.25s;
+  transition-timing-function: ease-out;
+}
+
+/* Mobile-specific optimizations */
+@media (max-width: 768px) {
+  .battery-conscious-animation {
+    transition-duration: 0.25s;
+  }
+  
+  .battery-optimized-animation {
+    transition-duration: 0.2s;
+  }
+  
+  .battery-critical-animation {
+    transition-duration: 0.1s;
+  }
+}
+
+/* Touch device optimizations */
+@media (hover: none) and (pointer: coarse) {
+  .battery-conscious-animation {
+    transition-duration: 0.2s;
+    transition-timing-function: ease-out;
+  }
+  
+  .battery-optimized-animation {
+    transition-duration: 0.15s;
+  }
+  
+  .battery-critical-animation {
+    transition-duration: 0.08s;
+  }
+}
+
+/* High DPI display optimizations */
+@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
+  .battery-conscious-animation {
+    transform: translateZ(0) scale(1);
+  }
+}
+
+/* Print media optimizations */
+@media print {
+  .battery-conscious-animation,
+  .battery-optimized-animation,
+  .battery-critical-animation,
+  .performance-throttled-light,
+  .performance-throttled-moderate,
+  .performance-throttled-aggressive {
+    animation: none !important;
+    transition: none !important;
+    transform: none !important;
+  }
+}
+
+/* Animation complexity classes */
+.animation-complexity-low {
+  transition: all 0.2s ease-out;
+  will-change: transform;
+}
+
+.animation-complexity-medium {
+  transition: all 0.3s ease-out;
+  will-change: transform, opacity;
+}
+
+.animation-complexity-high {
+  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+  will-change: transform, opacity, filter;
+}
+
+/* Frame rate optimization classes */
+.frame-rate-30 {
+  animation-duration: 0.033s;
+  transition-duration: 0.2s;
+}
+
+.frame-rate-45 {
+  animation-duration: 0.022s;
+  transition-duration: 0.25s;
+}
+
+.frame-rate-60 {
+  animation-duration: 0.016s;
+  transition-duration: 0.3s;
+}
+
+/* Memory optimization classes */
+.memory-optimized {
+  contain: layout style paint;
+  will-change: auto;
+}
+
+.memory-critical {
+  contain: strict;
+  will-change: auto;
+  transform: none;
+}
+
+/* CPU optimization classes */
+.cpu-optimized {
+  transition: transform 0.2s ease-out;
+  will-change: transform;
+}
+
+.cpu-critical {
+  transition: opacity 0.1s linear;
+  will-change: opacity;
+  transform: none;
+}
+
+/* Accessibility-focused animations */
+.accessibility-optimized {
+  transition: opacity 0.15s ease-in-out;
+  will-change: opacity;
+}
+
+.accessibility-critical {
+  transition: none;
+  will-change: auto;
+}
+
+/* User preference classes */
+.user-preference-performance .battery-conscious-animation {
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  will-change: transform, opacity, filter;
+}
+
+.user-preference-balanced .battery-conscious-animation {
+  transition: all 0.25s ease-out;
+  will-change: transform, opacity;
+}
+
+.user-preference-battery .battery-conscious-animation {
+  transition: all 0.2s ease-out;
+  will-change: transform;
+}
+
+.user-preference-accessibility .battery-conscious-animation {
+  transition: opacity 0.15s ease-in-out;
+  will-change: opacity;
+}
+
+/* Animation state classes */
+.animation-paused {
+  animation-play-state: paused;
+  transition: none;
+}
+
+.animation-resumed {
+  animation-play-state: running;
+  transition: all 0.3s ease-out;
+}
+
+.animation-disabled {
+  animation: none !important;
+  transition: none !important;
+  transform: none !important;
+}
+
+/* Responsive animation adjustments */
+@media (max-width: 480px) {
+  .battery-conscious-animation {
+    transition-duration: 0.2s;
+  }
+  
+  .animation-complexity-high {
+    transition-duration: 0.25s;
+  }
+}
+
+@media (min-width: 1200px) {
+  .battery-conscious-animation {
+    transition-duration: 0.35s;
+  }
+  
+  .animation-complexity-high {
+    transition-duration: 0.5s;
+  }
+}
+
+/* Dark mode optimizations */
+@media (prefers-color-scheme: dark) {
+  .battery-conscious-animation {
+    transition-timing-function: ease-out;
+  }
+}
+
+/* High contrast mode optimizations */
+@media (prefers-contrast: high) {
+  .battery-conscious-animation {
+    transition-duration: 0.2s;
+    transition-timing-function: ease-out;
+  }
+}
+
+/* Animation performance monitoring */
+.animation-monitored {
+  contain: layout style paint;
+  will-change: transform, opacity;
+}
+
+.animation-optimized {
+  contain: layout style;
+  will-change: transform;
+}
+
+.animation-minimal {
+  contain: strict;
+  will-change: auto;
+}

package/src/styles/utilities/design-system-utilities.css

@@ -0,0 +1,278 @@
+/* Design System Utilities */
+/* Custom utility classes for design system integration */
+
+@layer utilities {
+  /* Custom Focus Ring Utilities - using Tailwind color mapping */
+  .focus\:ring-cs-primary {
+    --tw-ring-opacity: 1;
+    --tw-ring-color: var(--primary);
+  }
+
+  .focus\:ring-cs-secondary {
+    --tw-ring-opacity: 1;
+    --tw-ring-color: var(--cs-colors-secondary-500);
+  }
+
+  .focus\:ring-cs-info {
+    --tw-ring-opacity: 1;
+    --tw-ring-color: var(--info);
+  }
+
+  .focus\:ring-cs-success {
+    --tw-ring-opacity: 1;
+    --tw-ring-color: var(--success);
+  }
+
+  .focus\:ring-cs-warning {
+    --tw-ring-opacity: 1;
+    --tw-ring-color: var(--warning);
+  }
+
+  .focus\:ring-cs-error {
+    --tw-ring-opacity: 1;
+    --tw-ring-color: var(--error);
+  }
+
+  /* Custom Border Color Utilities */
+  .focus\:border-cs-primary {
+    --tw-border-opacity: 1;
+    border-color: var(--primary);
+  }
+
+  .focus\:border-cs-secondary {
+    --tw-border-opacity: 1;
+    border-color: var(--cs-colors-secondary-500);
+  }
+
+  .focus\:border-cs-success {
+    --tw-border-opacity: 1;
+    border-color: var(--success);
+  }
+
+  .focus\:border-cs-warning {
+    --tw-border-opacity: 1;
+    border-color: var(--warning);
+  }
+
+  .focus\:border-cs-error {
+    --tw-border-opacity: 1;
+    border-color: var(--error);
+  }
+
+  .focus\:border-cs-info {
+    --tw-border-opacity: 1;
+    border-color: var(--info);
+  }
+
+  /* Custom Background Color Utilities */
+  .bg-cs-primary {
+    --tw-bg-opacity: 1;
+    background-color: var(--primary);
+  }
+
+  .bg-cs-secondary {
+    --tw-bg-opacity: 1;
+    background-color: var(--cs-colors-secondary-500);
+  }
+
+  .bg-cs-surface-bg {
+    --tw-bg-opacity: 1;
+    background-color: var(--surface-bg);
+  }
+
+  .bg-cs-success {
+    --tw-bg-opacity: 1;
+    background-color: var(--success);
+  }
+
+  .bg-cs-warning {
+    --tw-bg-opacity: 1;
+    background-color: var(--warning);
+  }
+
+  .bg-cs-error {
+    --tw-bg-opacity: 1;
+    background-color: var(--error);
+  }
+
+  .bg-cs-info {
+    --tw-bg-opacity: 1;
+    background-color: var(--info);
+  }
+
+  /* Custom Text Color Utilities */
+  .text-cs-text-primary {
+    --tw-text-opacity: 1;
+    color: var(--text-primary);
+  }
+
+  .text-cs-text-secondary {
+    --tw-text-opacity: 1;
+    color: var(--text-secondary);
+  }
+
+  .text-cs-primary {
+    --tw-text-opacity: 1;
+    color: var(--primary);
+  }
+
+  .text-cs-success {
+    --tw-text-opacity: 1;
+    color: var(--success);
+  }
+
+  .text-cs-warning {
+    --tw-text-opacity: 1;
+    color: var(--warning);
+  }
+
+  .text-cs-error {
+    --tw-text-opacity: 1;
+    color: var(--error);
+  }
+
+  .text-cs-info {
+    --tw-text-opacity: 1;
+    color: var(--info);
+  }
+
+  /* Custom Border Utilities */
+  .border-cs-border {
+    --tw-border-opacity: 1;
+    border-color: var(--border-color);
+  }
+
+  .border-cs-success {
+    --tw-border-opacity: 1;
+    border-color: var(--success);
+  }
+
+  .border-cs-warning {
+    --tw-border-opacity: 1;
+    border-color: var(--warning);
+  }
+
+  .border-cs-error {
+    --tw-border-opacity: 1;
+    border-color: var(--error);
+  }
+
+  .border-cs-info {
+    --tw-border-opacity: 1;
+    border-color: var(--info);
+  }
+
+  /* Custom Hover State Utilities */
+  .hover\:bg-cs-secondary-hover:hover {
+    --tw-bg-opacity: 1;
+    background-color: var(--hover-bg);
+  }
+
+  .hover\:bg-cs-primary-hover:hover {
+    --tw-bg-opacity: 1;
+    background-color: var(--primary-hover);
+  }
+
+  .hover\:bg-cs-hover-bg:hover {
+    --tw-bg-opacity: 1;
+    background-color: var(--hover-bg);
+  }
+
+  .hover\:border-cs-primary:hover {
+    --tw-border-opacity: 1;
+    border-color: var(--primary);
+  }
+
+  .hover\:bg-cs-success-hover:hover {
+    --tw-bg-opacity: 1;
+    background-color: var(--cs-colors-semantic-success);
+  }
+
+  .hover\:bg-cs-warning-hover:hover {
+    --tw-bg-opacity: 1;
+    background-color: var(--cs-colors-semantic-warning);
+  }
+
+  .hover\:bg-cs-error-hover:hover {
+    --tw-bg-opacity: 1;
+    background-color: var(--cs-colors-semantic-error);
+  }
+
+  .hover\:bg-cs-info-hover:hover {
+    --tw-bg-opacity: 1;
+    background-color: var(--cs-colors-semantic-info);
+  }
+
+  /* Custom Focus State Utilities */
+  .focus\:bg-cs-focus-bg:focus {
+    --tw-bg-opacity: 1;
+    background-color: var(--cs-colors-interactive-hover);
+  }
+
+  /* Custom Active State Utilities */
+  .active\:bg-cs-secondary-active:active {
+    --tw-bg-opacity: 1;
+    background-color: var(--cs-colors-secondary-600);
+  }
+
+  .active\:bg-cs-primary-active:active {
+    --tw-bg-opacity: 1;
+    background-color: var(--cs-colors-primary-active);
+  }
+
+  .active\:bg-cs-active-bg:active {
+    --tw-bg-opacity: 1;
+    background-color: var(--cs-colors-interactive-active);
+  }
+
+  .active\:bg-cs-success-active:active {
+    --tw-bg-opacity: 1;
+    background-color: var(--cs-colors-semantic-success);
+  }
+
+  .active\:bg-cs-warning-active:active {
+    --tw-bg-opacity: 1;
+    background-color: var(--cs-colors-semantic-warning);
+  }
+
+  .active\:bg-cs-error-active:active {
+    --tw-bg-opacity: 1;
+    background-color: var(--cs-colors-semantic-error-dark);
+  }
+
+  .active\:bg-cs-info-active:active {
+    --tw-bg-opacity: 1;
+    background-color: var(--cs-colors-semantic-info);
+  }
+
+  /* Custom Active Border Utilities */
+  .active\:border-cs-primary:active {
+    --tw-border-opacity: 1;
+    border-color: var(--primary);
+  }
+
+  .active\:border-cs-secondary:active {
+    --tw-border-opacity: 1;
+    border-color: var(--cs-colors-secondary-500);
+  }
+
+  .active\:border-cs-success:active {
+    --tw-border-opacity: 1;
+    border-color: var(--success);
+  }
+
+  .active\:border-cs-warning:active {
+    --tw-border-opacity: 1;
+    border-color: var(--warning);
+  }
+
+  .active\:border-cs-error:active {
+    --tw-border-opacity: 1;
+    border-color: var(--error);
+  }
+
+  .active\:border-cs-info:active {
+    --tw-border-opacity: 1;
+    border-color: var(--info);
+  }
+}