Standardize UI to design system tokens

Refactor multiple UI components to use design system tokens and primitives. Added new UiIcons (coffee, wifi, xCircle, ban) and typography color getters (primary, accent). Replaced hardcoded paddings, spacings, radii, borderRadius, and icon imports (lucide_icons -> UiIcons) with UiConstants, UiColors, UiTypography and UiIcons, and switched to UiColors.withValues for opacity. Changes apply across authentication, availability, clock_in (and its widgets), commute tracker, lunch break modal, location map placeholder, attendance card, date selector, and related presentation files to improve visual consistency.

apps/mobile/packages/features/staff/availability/lib/src/presentation/pages/availability_page.dart

@@ -79,10 +79,12 @@ class _AvailabilityPageState extends State<AvailabilityPage> {
                       child: Column(
                         children: [
                           Padding(
-                            padding: const EdgeInsets.symmetric(horizontal: 20),
+                            padding: const EdgeInsets.symmetric(
+                              horizontal: UiConstants.space5,
+                            ),
                             child: Column(
                               crossAxisAlignment: CrossAxisAlignment.stretch,
-                              spacing: 24,
+                              spacing: UiConstants.space6,
                               children: [
                                 _buildQuickSet(context),
                                 _buildWeekNavigation(context, state),
@@ -119,10 +121,10 @@ class _AvailabilityPageState extends State<AvailabilityPage> {
 
   Widget _buildQuickSet(BuildContext context) {
     return Container(
-      padding: const EdgeInsets.all(16),
+      padding: const EdgeInsets.all(UiConstants.space4),
       decoration: BoxDecoration(
         color: UiColors.primary.withValues(alpha: 0.1),
-        borderRadius: BorderRadius.circular(16),
+        borderRadius: UiConstants.radiusLg,
       ),
       child: Column(
         crossAxisAlignment: CrossAxisAlignment.start,
@@ -131,19 +133,19 @@ class _AvailabilityPageState extends State<AvailabilityPage> {
             'Quick Set Availability',
             style: UiTypography.body2b,
           ),
-          const SizedBox(height: 12),
+          const SizedBox(height: UiConstants.space3),
           Row(
             children: [
               Expanded(child: _buildQuickSetButton(context, 'All Week', 'all')),
-              const SizedBox(width: 8),
+              const SizedBox(width: UiConstants.space2),
               Expanded(
                 child: _buildQuickSetButton(context, 'Weekdays', 'weekdays'),
               ),
-              const SizedBox(width: 8),
+              const SizedBox(width: UiConstants.space2),
               Expanded(
                 child: _buildQuickSetButton(context, 'Weekends', 'weekends'),
               ),
-              const SizedBox(width: 8),
+              const SizedBox(width: UiConstants.space2),
               Expanded(
                 child: _buildQuickSetButton(
                   context,
@@ -179,7 +181,7 @@ class _AvailabilityPageState extends State<AvailabilityPage> {
           ),
           backgroundColor: UiColors.transparent,
           shape: RoundedRectangleBorder(
-            borderRadius: BorderRadius.circular(12),
+            borderRadius: UiConstants.radiusLg,
           ),
           foregroundColor: isDestructive
               ? UiColors.destructive
@@ -201,17 +203,17 @@ class _AvailabilityPageState extends State<AvailabilityPage> {
     final monthYear = DateFormat('MMMM yyyy').format(middleDate);
 
     return Container(
-      padding: const EdgeInsets.all(16),
+      padding: const EdgeInsets.all(UiConstants.space4),
       decoration: BoxDecoration(
         color: UiColors.cardViewBackground,
-        borderRadius: BorderRadius.circular(16),
+        borderRadius: UiConstants.radiusLg,
         border: Border.all(color: UiColors.border),
       ),
       child: Column(
         children: [
           // Nav Header
           Padding(
-            padding: const EdgeInsets.only(bottom: 16),
+            padding: const EdgeInsets.only(bottom: UiConstants.space4),
             child: Row(
               mainAxisAlignment: MainAxisAlignment.spaceBetween,
               children: [
@@ -275,12 +277,12 @@ class _AvailabilityPageState extends State<AvailabilityPage> {
         onTap: () => context.read<AvailabilityBloc>().add(SelectDate(day.date)),
         child: Container(
           margin: const EdgeInsets.symmetric(horizontal: 2),
-          padding: const EdgeInsets.symmetric(vertical: 12),
+          padding: const EdgeInsets.symmetric(vertical: UiConstants.space3),
           decoration: BoxDecoration(
             color: isSelected
                 ? UiColors.primary
                 : (isAvailable ? UiColors.tagSuccess : UiColors.bgSecondary),
-            borderRadius: BorderRadius.circular(16),
+            borderRadius: UiConstants.radiusLg,
             border: Border.all(
               color: isSelected
                   ? UiColors.primary
@@ -346,10 +348,10 @@ class _AvailabilityPageState extends State<AvailabilityPage> {
     final isAvailable = day.isAvailable;
 
     return Container(
-      padding: const EdgeInsets.all(20),
+      padding: const EdgeInsets.all(UiConstants.space5),
       decoration: BoxDecoration(
         color: UiColors.cardViewBackground,
-        borderRadius: BorderRadius.circular(16),
+        borderRadius: UiConstants.radiusLg,
         border: Border.all(color: UiColors.border),
       ),
       child: Column(
@@ -380,7 +382,7 @@ class _AvailabilityPageState extends State<AvailabilityPage> {
             ],
           ),
 
-          const SizedBox(height: 16),
+          const SizedBox(height: UiConstants.space4),
 
           // Time Slots (only from Domain)
           ...day.slots.map((slot) {
@@ -464,11 +466,11 @@ class _AvailabilityPageState extends State<AvailabilityPage> {
           : null,
       child: AnimatedContainer(
         duration: const Duration(milliseconds: 200),
-        margin: const EdgeInsets.only(bottom: 12),
-        padding: const EdgeInsets.all(16),
+        margin: const EdgeInsets.only(bottom: UiConstants.space3),
+        padding: const EdgeInsets.all(UiConstants.space4),
         decoration: BoxDecoration(
           color: bgColor,
-          borderRadius: BorderRadius.circular(12),
+          borderRadius: BorderRadius.circular(UiConstants.radiusBase),
           border: Border.all(color: borderColor, width: 2),
         ),
         child: Row(
@@ -479,7 +481,7 @@ class _AvailabilityPageState extends State<AvailabilityPage> {
               height: 40,
               decoration: BoxDecoration(
                 color: uiConfig['bg'],
-                borderRadius: BorderRadius.circular(12),
+                borderRadius: BorderRadius.circular(UiConstants.radiusBase),
               ),
               child: Icon(
                 uiConfig['icon'],
@@ -487,7 +489,7 @@ class _AvailabilityPageState extends State<AvailabilityPage> {
                 size: 20,
               ),
             ),
-            const SizedBox(width: 12),
+            const SizedBox(width: UiConstants.space3),
             // Text
             Expanded(
               child: Column(
@@ -539,20 +541,20 @@ class _AvailabilityPageState extends State<AvailabilityPage> {
 
   Widget _buildInfoCard() {
     return Container(
-      padding: const EdgeInsets.all(16),
+      padding: const EdgeInsets.all(UiConstants.space4),
       decoration: BoxDecoration(
         color: UiColors.primary.withValues(alpha: 0.05),
-        borderRadius: BorderRadius.circular(12),
+        borderRadius: BorderRadius.circular(UiConstants.radiusBase),
       ),
       child: Row(
         crossAxisAlignment: CrossAxisAlignment.start,
-        spacing: 12,
+        spacing: UiConstants.space3,
         children: [
           const Icon(UiIcons.clock, size: 20, color: UiColors.primary),
           Expanded(
             child: Column(
               crossAxisAlignment: CrossAxisAlignment.start,
-              spacing: 4,
+              spacing: UiConstants.space1,
               children: [
                 Text(
                   'Auto-Match uses your availability',