@rakeyshgidwani/roger-ui-bank-theme-stan-design 0.1.6 → 0.1.7

package/src/styles/utilities/semantic-input-system.css

@@ -0,0 +1,451 @@
+/* Semantic Input System & Mobile Keyboard Optimization Styles */
+
+/* Base Input Styles */
+.semantic-input {
+  position: relative;
+  display: block;
+  width: 100%;
+  min-height: 44px; /* Touch-friendly minimum size */
+  padding: 12px 16px;
+  font-size: 16px; /* Prevent zoom on iOS */
+  line-height: 1.5;
+  color: var(--cs-text-primary);
+  background-color: var(--cs-bg-primary);
+  border: 2px solid var(--cs-border);
+  border-radius: 8px;
+  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+  outline: none;
+  box-sizing: border-box;
+}
+
+.semantic-input:focus {
+  border-color: var(--cs-primary);
+  box-shadow: 0 0 0 3px rgba(var(--cs-primary-rgb), 0.1);
+  transform: translateY(-1px);
+}
+
+.semantic-input:hover {
+  border-color: var(--cs-accent);
+}
+
+/* Input Type Variants */
+.semantic-input[type="email"] {
+  inputmode: email;
+  autocomplete: email;
+  autocapitalize: none;
+}
+
+.semantic-input[type="tel"] {
+  inputmode: tel;
+  autocomplete: tel;
+  autocapitalize: none;
+}
+
+.semantic-input[type="number"] {
+  inputmode: decimal;
+  autocomplete: off;
+}
+
+.semantic-input[type="search"] {
+  inputmode: search;
+  autocomplete: off;
+}
+
+.semantic-input[type="url"] {
+  inputmode: url;
+  autocomplete: url;
+  autocapitalize: none;
+}
+
+/* Mobile Keyboard Optimization */
+.semantic-input-mobile {
+  /* iOS-specific optimizations */
+  -webkit-appearance: none;
+  -webkit-tap-highlight-color: transparent;
+  
+  /* Android-specific optimizations */
+  -webkit-user-select: text;
+  user-select: text;
+  
+  /* Touch-friendly sizing */
+  min-height: 48px;
+  padding: 14px 18px;
+  
+  /* Prevent zoom on focus */
+  font-size: 16px;
+  
+  /* Smooth scrolling */
+  -webkit-overflow-scrolling: touch;
+}
+
+/* Touch-Friendly Behavior */
+.semantic-input-touch {
+  /* Touch target optimization */
+  min-height: 44px;
+  min-width: 44px;
+  
+  /* Touch feedback */
+  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.semantic-input-touch:active {
+  transform: scale(0.98);
+  background-color: var(--cs-bg-secondary);
+}
+
+.semantic-input-touch:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+}
+
+/* High Contrast Mode Support */
+@media (prefers-contrast: high) {
+  .semantic-input {
+    border-width: 3px;
+    border-color: var(--cs-text-primary);
+  }
+  
+  .semantic-input:focus {
+    border-color: var(--cs-accent);
+    box-shadow: 0 0 0 4px var(--cs-accent);
+  }
+}
+
+/* Reduced Motion Support */
+@media (prefers-reduced-motion: reduce) {
+  .semantic-input,
+  .semantic-input-touch {
+    transition: none;
+    transform: none;
+  }
+  
+  .semantic-input:focus,
+  .semantic-input-touch:hover {
+    transform: none;
+  }
+}
+
+/* Focus Management */
+.semantic-input:focus-visible {
+  outline: 3px solid var(--cs-primary);
+  outline-offset: 2px;
+}
+
+.semantic-input-focus-trap {
+  position: relative;
+}
+
+.semantic-input-focus-trap::before {
+  content: '';
+  position: absolute;
+  top: -4px;
+  left: -4px;
+  right: -4px;
+  bottom: -4px;
+  border: 2px solid transparent;
+  border-radius: 12px;
+  pointer-events: none;
+  transition: border-color 0.2s ease;
+}
+
+.semantic-input-focus-trap:focus-within::before {
+  border-color: var(--cs-primary);
+}
+
+/* Accessibility Enhancements */
+.semantic-input-aria {
+  /* Screen reader optimizations */
+  aria-label: attr(aria-label);
+  aria-describedby: attr(aria-describedby);
+  aria-invalid: attr(aria-invalid);
+  aria-required: attr(aria-required);
+}
+
+/* Skip Links */
+.semantic-skip-link {
+  position: absolute;
+  top: -40px;
+  left: 6px;
+  background: var(--cs-primary);
+  color: white;
+  padding: 8px 16px;
+  text-decoration: none;
+  border-radius: 4px;
+  z-index: 1000;
+  transition: top 0.3s ease;
+}
+
+.semantic-skip-link:focus {
+  top: 6px;
+}
+
+/* Input Groups */
+.semantic-input-group {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  margin-bottom: 24px;
+}
+
+.semantic-input-group-row {
+  display: flex;
+  gap: 16px;
+  align-items: flex-start;
+}
+
+.semantic-input-group-row .semantic-input {
+  flex: 1;
+}
+
+/* Input Labels */
+.semantic-input-label {
+  display: block;
+  margin-bottom: 8px;
+  font-weight: 600;
+  color: var(--cs-text-primary);
+  font-size: 14px;
+}
+
+.semantic-input-label.required::after {
+  content: ' *';
+  color: var(--cs-error);
+}
+
+/* Input Helpers */
+.semantic-input-helper {
+  margin-top: 4px;
+  font-size: 12px;
+  color: var(--cs-text-secondary);
+}
+
+.semantic-input-error {
+  margin-top: 4px;
+  font-size: 12px;
+  color: var(--cs-error);
+}
+
+.semantic-input-success {
+  margin-top: 4px;
+  font-size: 12px;
+  color: var(--cs-success);
+}
+
+/* Input States */
+.semantic-input[aria-invalid="true"] {
+  border-color: var(--cs-error);
+  background-color: rgba(var(--cs-error-rgb), 0.05);
+}
+
+.semantic-input[aria-invalid="true"]:focus {
+  border-color: var(--cs-error);
+  box-shadow: 0 0 0 3px rgba(var(--cs-error-rgb), 0.1);
+}
+
+.semantic-input[disabled] {
+  opacity: 0.6;
+  cursor: not-allowed;
+  background-color: var(--cs-bg-secondary);
+}
+
+.semantic-input[readonly] {
+  background-color: var(--cs-bg-secondary);
+  cursor: default;
+}
+
+/* Mobile-Specific Optimizations */
+@media (max-width: 768px) {
+  .semantic-input {
+    min-height: 48px;
+    padding: 16px 20px;
+    font-size: 16px;
+    border-radius: 12px;
+  }
+  
+  .semantic-input-group-row {
+    flex-direction: column;
+    gap: 12px;
+  }
+  
+  .semantic-input-group-row .semantic-input {
+    width: 100%;
+  }
+}
+
+/* Tablet Optimizations */
+@media (min-width: 769px) and (max-width: 1024px) {
+  .semantic-input {
+    min-height: 46px;
+    padding: 14px 18px;
+    border-radius: 10px;
+  }
+}
+
+/* Desktop Enhancements */
+@media (min-width: 1025px) {
+  .semantic-input:hover {
+    border-color: var(--cs-accent);
+    transform: translateY(-1px);
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  }
+  
+  .semantic-input:focus {
+    transform: translateY(-2px);
+    box-shadow: 0 4px 16px rgba(var(--cs-primary-rgb), 0.15);
+  }
+}
+
+/* Dark Theme Support */
+@media (prefers-color-scheme: dark) {
+  .semantic-input {
+    background-color: var(--cs-bg-secondary);
+    border-color: var(--cs-border);
+    color: var(--cs-text-primary);
+  }
+  
+  .semantic-input:focus {
+    background-color: var(--cs-bg-primary);
+    border-color: var(--cs-primary);
+  }
+}
+
+/* High DPI Display Support */
+@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
+  .semantic-input {
+    border-width: 1px;
+  }
+  
+  .semantic-input:focus {
+    border-width: 2px;
+  }
+}
+
+/* Print Styles */
+@media print {
+  .semantic-input {
+    border: 1px solid #000;
+    background: transparent;
+    color: #000;
+    box-shadow: none;
+  }
+  
+  .semantic-input:focus {
+    outline: 2px solid #000;
+    outline-offset: 2px;
+  }
+}
+
+/* Animation Keyframes */
+@keyframes semanticInputFocus {
+  0% {
+    transform: scale(1);
+    box-shadow: 0 0 0 0 rgba(var(--cs-primary-rgb), 0.4);
+  }
+  50% {
+    transform: scale(1.02);
+    box-shadow: 0 0 0 8px rgba(var(--cs-primary-rgb), 0);
+  }
+  100% {
+    transform: scale(1);
+    box-shadow: 0 0 0 0 rgba(var(--cs-primary-rgb), 0);
+  }
+}
+
+@keyframes semanticInputError {
+  0%, 100% {
+    transform: translateX(0);
+  }
+  25% {
+    transform: translateX(-4px);
+  }
+  75% {
+    transform: translateX(4px);
+  }
+}
+
+/* Error Animation */
+.semantic-input[aria-invalid="true"]:focus {
+  animation: semanticInputError 0.3s ease-in-out;
+}
+
+/* Success State */
+.semantic-input[data-valid="true"] {
+  border-color: var(--cs-success);
+  background-color: rgba(var(--cs-success-rgb), 0.05);
+}
+
+.semantic-input[data-valid="true"]:focus {
+  border-color: var(--cs-success);
+  box-shadow: 0 0 0 3px rgba(var(--cs-success-rgb), 0.1);
+}
+
+/* Loading State */
+.semantic-input[data-loading="true"] {
+  position: relative;
+  color: transparent;
+}
+
+.semantic-input[data-loading="true"]::after {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 20px;
+  height: 20px;
+  margin: -10px 0 0 -10px;
+  border: 2px solid var(--cs-border);
+  border-top-color: var(--cs-primary);
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+/* Responsive Typography */
+.semantic-input {
+  font-size: clamp(14px, 2.5vw, 16px);
+}
+
+/* Touch Device Optimizations */
+@media (hover: none) and (pointer: coarse) {
+  .semantic-input {
+    min-height: 48px;
+    padding: 16px 20px;
+  }
+  
+  .semantic-input:active {
+    transform: scale(0.98);
+    background-color: var(--cs-bg-secondary);
+  }
+}
+
+/* Keyboard Navigation Indicators */
+.semantic-input:focus-visible {
+  outline: 3px solid var(--cs-primary);
+  outline-offset: 2px;
+}
+
+/* Voice Control Support */
+@media (prefers-reduced-motion: no-preference) {
+  .semantic-input[data-voice-active="true"] {
+    animation: semanticInputFocus 0.6s ease-out;
+  }
+}
+
+/* Performance Optimizations */
+.semantic-input {
+  will-change: transform, border-color, box-shadow;
+  contain: layout style paint;
+}
+
+/* Battery Optimization */
+@media (prefers-reduced-motion: reduce) {
+  .semantic-input {
+    will-change: auto;
+    contain: none;
+  }
+}
+

package/src/styles/utilities/touch-friendly-interface.css

@@ -0,0 +1,247 @@
+/* Story 13: Touch-Friendly Interface & 44px Target Compliance */
+
+/* ===== 44px Touch Target Compliance ===== */
+.touch-target {
+  min-height: 44px;
+  min-width: 44px;
+  touch-action: manipulation;
+  -webkit-tap-highlight-color: transparent;
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  user-select: none;
+  cursor: pointer;
+}
+
+.touch-target-large {
+  min-height: 48px;
+  min-width: 48px;
+}
+
+.touch-target-extra-large {
+  min-height: 56px;
+  min-width: 56px;
+}
+
+/* Touch target spacing */
+.touch-spacing {
+  margin: 8px;
+  padding: 12px;
+}
+
+.touch-spacing-compact {
+  margin: 4px;
+  padding: 8px;
+}
+
+.touch-spacing-generous {
+  margin: 12px;
+  padding: 16px;
+}
+
+/* ===== Touch-Friendly Interface Design ===== */
+.touch-friendly-button {
+  @apply touch-target;
+  @apply touch-spacing;
+  @apply bg-cs-primary text-white;
+  @apply rounded-lg font-medium;
+  @apply transition-all duration-200 ease-out;
+  @apply hover:bg-cs-primary-hover active:bg-cs-primary-active;
+  @apply focus:outline-none focus:ring-2 focus:ring-cs-primary focus:ring-offset-2;
+  @apply disabled:opacity-50 disabled:cursor-not-allowed;
+}
+
+.touch-friendly-button-secondary {
+  @apply touch-target;
+  @apply touch-spacing;
+  @apply bg-cs-secondary text-cs-text-primary;
+  @apply rounded-lg font-medium;
+  @apply transition-all duration-200 ease-out;
+  @apply hover:bg-cs-secondary-hover active:bg-cs-secondary-active;
+  @apply focus:outline-none focus:ring-2 focus:ring-cs-secondary focus:ring-offset-2;
+}
+
+.touch-friendly-input {
+  @apply touch-target;
+  @apply touch-spacing-compact;
+  @apply bg-cs-surface-bg border border-cs-border;
+  @apply rounded-lg text-cs-text-primary;
+  @apply transition-all duration-200 ease-out;
+  @apply focus:outline-none focus:ring-2 focus:ring-cs-primary focus:border-cs-primary;
+  @apply placeholder:text-cs-text-secondary;
+}
+
+.touch-friendly-card {
+  @apply touch-target;
+  @apply touch-spacing;
+  @apply bg-cs-surface-bg border border-cs-border;
+  @apply rounded-lg shadow-sm;
+  @apply transition-all duration-200 ease-out;
+  @apply hover:shadow-md active:shadow-lg;
+  @apply focus:outline-none focus:ring-2 focus:ring-cs-primary;
+}
+
+/* ===== Smooth Touch Interactions ===== */
+.touch-interaction {
+  touch-action: manipulation;
+  -webkit-tap-highlight-color: transparent;
+  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.touch-feedback {
+  transform: scale(0.98);
+  transition: transform 0.1s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.touch-feedback:active {
+  transform: scale(0.95);
+}
+
+.touch-ripple {
+  position: relative;
+  overflow: hidden;
+}
+
+.touch-ripple::after {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 0;
+  height: 0;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.3);
+  transform: translate(-50%, -50%);
+  transition: width 0.3s, height 0.3s;
+}
+
+.touch-ripple:active::after {
+  width: 200px;
+  height: 200px;
+}
+
+/* ===== Performance Optimization ===== */
+.touch-performance {
+  will-change: transform;
+  backface-visibility: hidden;
+  transform: translateZ(0);
+  -webkit-transform: translateZ(0);
+}
+
+.touch-optimized {
+  touch-action: manipulation;
+  -webkit-overflow-scrolling: touch;
+  overscroll-behavior: contain;
+}
+
+/* ===== Accessibility Compliance ===== */
+.touch-accessible {
+  @apply touch-target;
+  @apply focus:outline-none focus:ring-2 focus:ring-cs-primary focus:ring-offset-2;
+  @apply aria-pressed:bg-cs-primary aria-pressed:text-white;
+  @apply aria-expanded:bg-cs-secondary aria-expanded:text-cs-text-primary;
+}
+
+.touch-screen-reader {
+  @apply sr-only;
+}
+
+/* ===== Touch Gesture Support ===== */
+.touch-gesture {
+  touch-action: pan-x pan-y;
+  -webkit-overflow-scrolling: touch;
+}
+
+.touch-gesture-horizontal {
+  touch-action: pan-x;
+}
+
+.touch-gesture-vertical {
+  touch-action: pan-y;
+}
+
+.touch-gesture-zoom {
+  touch-action: pinch-zoom;
+}
+
+/* ===== Touch State Indicators ===== */
+.touch-state-hover {
+  @apply hover:bg-cs-hover-bg hover:border-cs-primary;
+}
+
+.touch-state-active {
+  @apply active:bg-cs-active-bg active:border-cs-primary;
+}
+
+.touch-state-focus {
+  @apply focus:bg-cs-focus-bg focus:border-cs-primary;
+}
+
+.touch-state-disabled {
+  @apply disabled:opacity-50 disabled:cursor-not-allowed;
+}
+
+/* ===== Responsive Touch Design ===== */
+@media (max-width: 768px) {
+  .touch-target {
+    min-height: 48px;
+    min-width: 48px;
+  }
+  
+  .touch-spacing {
+    margin: 12px;
+    padding: 16px;
+  }
+  
+  .touch-spacing-compact {
+    margin: 8px;
+    padding: 12px;
+  }
+}
+
+@media (max-width: 480px) {
+  .touch-target {
+    min-height: 52px;
+    min-width: 52px;
+  }
+  
+  .touch-spacing {
+    margin: 16px;
+    padding: 20px;
+  }
+}
+
+/* ===== Touch Animation Performance ===== */
+.touch-animation-optimized {
+  will-change: transform, opacity;
+  transform: translateZ(0);
+  -webkit-transform: translateZ(0);
+}
+
+.touch-animation-smooth {
+  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.touch-animation-fast {
+  transition: all 0.1s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+/* ===== Touch Feedback States ===== */
+.touch-success {
+  @apply bg-cs-success text-white;
+  @apply hover:bg-cs-success-hover active:bg-cs-success-active;
+}
+
+.touch-warning {
+  @apply bg-cs-warning text-white;
+  @apply hover:bg-cs-warning-hover active:bg-cs-warning-active;
+}
+
+.touch-error {
+  @apply bg-cs-error text-white;
+  @apply hover:bg-cs-error-hover active:bg-cs-error-active;
+}
+
+.touch-info {
+  @apply bg-cs-info text-white;
+  @apply hover:bg-cs-info-hover active:bg-cs-info-active;
+}