Add mobile accessibility and UI/UX improvements

- Add mobile card view for packages (replaces table on small screens)
- Implement design tokens system for consistent styling
- Add dark/light theme toggle with system preference support
- Create reusable StatusBadge and EmptyState components
- Add accessible form labels to package filters
- Add compact mobile stats display in navigation
- Add safe area insets for notched devices
- Add reduced motion support for accessibility
- Improve touch targets for WCAG compliance
- Add unit tests for composables
- Update Vuetify configuration and styling

frontend/src/composables/Packages/usePackageDisplay.ts

@@ -7,61 +7,49 @@ export function usePackageDisplay() {
   const getVersionColor = (version: string) => {
     switch (version) {
       case 'v2':
-        return '#3498db'
+        return 'var(--color-version-v2)'
       case 'v3':
-        return '#f39c12'
+        return 'var(--color-version-v3)'
       case 'v4':
-        return '#2ecc71'
+        return 'var(--color-version-v4)'
       default:
-        return 'grey'
+        return 'var(--color-text-muted)'
     }
   }
 
   const getStatusColor = (status: components['schemas']['Package']['status']) => {
-    switch (status) {
-      case 'skipped':
-        return '#373737'
-      case 'queued':
-        return '#5d2f03'
-      case 'latest':
-        return ''
-      case 'failed':
-        return '#4f140f'
-      case 'signing':
-        return '#093372'
-      case 'building':
-        return '#084f46'
-      case 'unknown':
-        return '#191919'
-      default:
-        return ''
-    }
+    // Return empty string - we now use StatusBadge component instead of row colors
+    return ''
   }
 
   const getLto = (lto: components['schemas']['Package']['lto']) => {
     switch (lto) {
       case 'enabled':
         return {
-          title: 'built with LTO',
-          class: 'fa fa-check fa-lg text-success'
+          title: 'Built with LTO',
+          icon: 'mdi-check-circle',
+          color: 'var(--color-status-success)',
         }
       case 'unknown':
         return {
-          title: 'not built with LTO yet',
-          class: 'fa fa-hourglass-o fa-lg text-grey'
+          title: 'Not built with LTO yet',
+          icon: 'mdi-timer-sand',
+          color: 'var(--color-text-muted)',
         }
       case 'disabled':
         return {
           title: 'LTO explicitly disabled',
-          class: 'fa fa-times fa-lg text-red'
+          icon: 'mdi-close-circle',
+          color: 'var(--color-status-error)',
         }
       case 'auto_disabled':
         return {
           title: 'LTO automatically disabled',
-          class: 'fa fa-times-circle-o fa-lg text-amber'
+          icon: 'mdi-alert-circle',
+          color: 'var(--color-status-warning)',
         }
       default:
-        return { title: '', class: '' }
+        return { title: '', icon: '', color: '' }
     }
   }
 
@@ -70,20 +58,23 @@ export function usePackageDisplay() {
       case 'available':
         return {
           title: 'Debug symbols available',
-          class: 'fa fa-check fa-lg text-success'
+          icon: 'mdi-check-circle',
+          color: 'var(--color-status-success)',
         }
       case 'unknown':
         return {
           title: 'Not built yet',
-          class: 'fa fa-hourglass-o fa-lg text-grey'
+          icon: 'mdi-timer-sand',
+          color: 'var(--color-text-muted)',
         }
       case 'not_available':
         return {
           title: 'Not built with debug symbols',
-          class: 'fa fa-times fa-lg text-red'
+          icon: 'mdi-close-circle',
+          color: 'var(--color-status-error)',
         }
       default:
-        return { title: '', class: '' }
+        return { title: '', icon: '', color: '' }
     }
   }
 
@@ -93,6 +84,6 @@ export function usePackageDisplay() {
     getVersionColor,
     getStatusColor,
     getLto,
-    getDs
+    getDs,
   }
 }