Add public-samples/refunds-wyx7mz/src/web/src/styles/globals.css

src/web/src/styles/globals.css

@@ -0,0 +1,244 @@
+/* 
+ * Refunds Service - Global CSS Styles
+ * This file provides base styling, normalization, and custom global rules
+ * that complement the Tailwind CSS utility classes.
+ */
+
+/* Reset and box-sizing */
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+/* Base HTML and body styles */
+html,
+body {
+  height: 100%;
+  width: 100%;
+  scroll-behavior: smooth;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+body {
+  font-family: var(--font-family);
+  color: #1a202c; /* Base text color */
+  background-color: #f7fafc; /* Base background color */
+  line-height: 1.5;
+  overflow-x: hidden;
+}
+
+/* Theme variables */
+:root {
+  /* Primary color palette */
+  --color-primary-50: #eef2ff;  /* Would be imported from themes/colors.ts */
+  --color-primary-100: #e0e7ff;
+  --color-primary-200: #c7d2fe;
+  --color-primary-300: #a5b4fc;
+  --color-primary-400: #818cf8;
+  --color-primary-500: #6366f1;  /* Main brand color */
+  --color-primary-600: #4f46e5;
+  --color-primary-700: #4338ca;
+  --color-primary-800: #3730a3;
+  --color-primary-900: #312e81;
+
+  /* Neutral colors */
+  --color-neutral-50: #f9fafb;
+  --color-neutral-100: #f3f4f6;
+  --color-neutral-200: #e5e7eb;
+  --color-neutral-300: #d1d5db;
+  --color-neutral-400: #9ca3af;
+  --color-neutral-500: #6b7280;
+  --color-neutral-600: #4b5563;
+  --color-neutral-700: #374151;
+  --color-neutral-800: #1f2937;
+  --color-neutral-900: #111827;
+
+  /* Semantic colors */
+  --color-success: #10b981;  /* Would be imported from themes/colors.ts */
+  --color-warning: #f59e0b;
+  --color-error: #ef4444;
+  --color-info: #3b82f6;
+
+  /* Refund status colors */
+  --status-completed: #10b981;  /* Would be imported from themes/colors.ts */
+  --status-processing: #f59e0b;
+  --status-pending: #3b82f6;
+  --status-failed: #ef4444;
+
+  /* Typography */
+  --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
+    Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;  /* Would be imported from themes/typography.ts */
+
+  /* Animation & Transitions */
+  --transition-standard: 0.2s ease-in-out;
+  --transition-slow: 0.3s ease-in-out;
+  --transition-fast: 0.1s ease-in-out;
+
+  /* Layout */
+  --header-height: 64px;
+  --sidebar-width: 250px;
+  --z-index-modal: 1000;
+  --z-index-dropdown: 900;
+  --z-index-header: 800;
+  --z-index-sidebar: 700;
+}
+
+/* Focus styles for accessibility */
+:focus {
+  outline: 2px solid var(--color-primary-500);
+  outline-offset: 2px;
+}
+
+/* Text selection styling */
+::selection {
+  background-color: var(--color-primary-200);
+  color: var(--color-primary-900);
+}
+
+/* 
+ * Utility Classes
+ */
+
+/* Hide content visually but keep it accessible to screen readers */
+.visually-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+/* Hide scrollbars while maintaining scroll functionality */
+.scrollbar-hide {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
+
+.scrollbar-hide::-webkit-scrollbar {
+  display: none;
+}
+
+/* Prevent scrolling on body when modal is open */
+.modal-open {
+  overflow: hidden;
+}
+
+/* Focus outline control */
+.focus-outline-none {
+  outline: none;
+}
+
+.focus-outline-none:focus-visible {
+  outline: 2px solid var(--color-primary-500);
+  outline-offset: 2px;
+}
+
+/* 
+ * Animations
+ */
+
+/* Fade in animation */
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+/* Slide in animation for modals and drawers */
+@keyframes slideIn {
+  from {
+    transform: translateY(20px);
+    opacity: 0;
+  }
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
+/* Spinning animation for loaders */
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+/* Animation utility classes */
+.animate-fade-in {
+  animation: fadeIn var(--transition-standard);
+}
+
+.animate-slide-in {
+  animation: slideIn var(--transition-standard);
+}
+
+.animate-spin {
+  animation: spin 1s linear infinite;
+}
+
+/* 
+ * Media Queries
+ */
+
+/* Accessibility support for users who prefer reduced motion */
+@media (prefers-reduced-motion: reduce) {
+  * {
+    animation-duration: 0.001ms !important;
+    transition-duration: 0.001ms !important;
+    scroll-behavior: auto !important;
+  }
+}
+
+/* Print styles for reports and receipts */
+@media print {
+  .no-print {
+    display: none !important;
+  }
+
+  body {
+    font-size: 12pt;
+    background: white;
+    color: black;
+  }
+
+  a {
+    text-decoration: underline;
+  }
+
+  /* Ensure that background colors print */
+  * {
+    -webkit-print-color-adjust: exact;
+    print-color-adjust: exact;
+  }
+
+  /* Break pages appropriately */
+  .page-break-after {
+    page-break-after: always;
+  }
+
+  .page-break-before {
+    page-break-before: always;
+  }
+
+  /* Expand all content for printing */
+  .print-expand {
+    display: block !important;
+    height: auto !important;
+    overflow: visible !important;
+  }
+}