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/profile_sections/finances/staff_bank_account/lib/src/presentation/pages/bank_account_page.dart

@@ -37,7 +37,7 @@ class BankAccountPage extends StatelessWidget {
         ),
         title: Text(
           strings.title,
-          style: UiTypography.headline3m.copyWith(color: UiColors.textPrimary),
+          style: UiTypography.headline3m.textPrimary,
         ),
         bottom: PreferredSize(
           preferredSize: const Size.fromHeight(1.0),
@@ -143,7 +143,7 @@ class BankAccountPage extends StatelessWidget {
     return Container(
       padding: const EdgeInsets.all(UiConstants.space4),
       decoration: BoxDecoration(
-        color: UiColors.primary.withOpacity(0.08),
+        color: UiColors.primary.withValues(alpha: 0.1),
         borderRadius: BorderRadius.circular(UiConstants.radiusBase),
       ),
       child: Row(
@@ -157,15 +157,12 @@ class BankAccountPage extends StatelessWidget {
               children: <Widget>[
                 Text(
                   strings.secure_title,
-                  style: UiTypography.body2r.copyWith( // Was body2
-                    fontWeight: FontWeight.w500,
-                    color: UiColors.textPrimary,
-                  ),
+                  style: UiTypography.body2m.textPrimary,
                 ),
                 const SizedBox(height: 2),
                 Text(
                   strings.secure_subtitle,
-                  style: UiTypography.body3r.copyWith(color: UiColors.textSecondary), // Was bodySmall
+                  style: UiTypography.body3r.textSecondary,
                 ),
               ],
             ),
@@ -199,7 +196,7 @@ class BankAccountPage extends StatelessWidget {
                 width: 48,
                 height: 48,
                 decoration: BoxDecoration(
-                  color: primaryColor.withOpacity(0.1),
+                  color: primaryColor.withValues(alpha: 0.1),
                   borderRadius: BorderRadius.circular(UiConstants.radiusBase),
                 ),
                 child: const Center(
@@ -216,10 +213,7 @@ class BankAccountPage extends StatelessWidget {
                 children: <Widget>[
                   Text(
                     account.bankName,
-                    style: UiTypography.body2r.copyWith( // Was body2
-                      fontWeight: FontWeight.w500,
-                      color: UiColors.textPrimary,
-                    ),
+                    style: UiTypography.body2m.textPrimary,
                   ),
                   Text(
                     strings.account_ending(
@@ -227,9 +221,7 @@ class BankAccountPage extends StatelessWidget {
                           ? account.last4!
                           : '----',
                     ),
-                    style: UiTypography.body2r.copyWith( // Was body2
-                      color: UiColors.textSecondary,
-                    ),
+                    style: UiTypography.body2r.textSecondary,
                   ),
                 ],
               ),
@@ -239,7 +231,7 @@ class BankAccountPage extends StatelessWidget {
             Container(
               padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
               decoration: BoxDecoration(
-                color: primaryColor.withOpacity(0.15),
+                color: primaryColor.withValues(alpha: 0.15),
                 borderRadius: BorderRadius.circular(20),
               ),
               child: Row(
@@ -248,10 +240,7 @@ class BankAccountPage extends StatelessWidget {
                   const SizedBox(width: 4),
                   Text(
                     strings.primary,
-                    style: UiTypography.body3r.copyWith( // Was bodySmall
-                      fontWeight: FontWeight.w500,
-                      color: primaryColor,
-                    ),
+                    style: UiTypography.body3m.primary,
                   ),
                 ],
               ),

apps/mobile/packages/features/staff/profile_sections/finances/staff_bank_account/lib/src/presentation/widgets/add_account_form.dart

@@ -43,7 +43,7 @@ class _AddAccountFormState extends State<AddAccountForm> {
         children: <Widget>[
           Text(
             widget.strings.add_new_account,
-            style: UiTypography.headline4m.copyWith(color: UiColors.textPrimary), // Was header4
+            style: UiTypography.headline4m.textPrimary, // Was header4
           ),
           const SizedBox(height: UiConstants.space4),
           UiTextField(
@@ -71,8 +71,7 @@ class _AddAccountFormState extends State<AddAccountForm> {
             padding: const EdgeInsets.only(bottom: UiConstants.space2),
             child: Text(
               widget.strings.account_type,
-              style: UiTypography.body2r.copyWith( // Was body2
-                  color: UiColors.textSecondary, fontWeight: FontWeight.w500),
+              style: UiTypography.body2m.textSecondary,
             ),
           ),
           Row(
@@ -122,7 +121,7 @@ class _AddAccountFormState extends State<AddAccountForm> {
         padding: const EdgeInsets.symmetric(vertical: 12),
         decoration: BoxDecoration(
           color: isSelected
-              ? UiColors.primary.withOpacity(0.05)
+              ? UiColors.primary.withValues(alpha: 0.05)
               : UiColors.bgPopup, // Was surface
           borderRadius: BorderRadius.circular(UiConstants.radiusBase),
           border: Border.all(
@@ -133,8 +132,7 @@ class _AddAccountFormState extends State<AddAccountForm> {
         child: Center(
           child: Text(
             label,
-            style: UiTypography.body2r.copyWith( // Was body2
-              fontWeight: FontWeight.w600,
+            style: UiTypography.body2b.copyWith(
               color: isSelected ? UiColors.primary : UiColors.textSecondary,
             ),
           ),

apps/mobile/packages/features/staff/profile_sections/finances/time_card/lib/src/presentation/pages/time_card_page.dart

@@ -40,9 +40,7 @@ class _TimeCardPageState extends State<TimeCardPage> {
           ),
           title: Text(
             t.staff_time_card.title,
-            style: UiTypography.headline4m.copyWith(
-              color: UiColors.textPrimary,
-            ),
+            style: UiTypography.headline4m.textPrimary,
           ),
           bottom: PreferredSize(
             preferredSize: const Size.fromHeight(1.0),

apps/mobile/packages/features/staff/profile_sections/finances/time_card/lib/src/presentation/widgets/timesheet_card.dart

@@ -19,22 +19,22 @@ class TimesheetCard extends StatelessWidget {
 
     switch (status) {
       case TimeCardStatus.approved:
-        statusBg = UiColors.textSuccess.withOpacity(0.12);
+        statusBg = UiColors.tagSuccess;
         statusColor = UiColors.textSuccess;
         statusText = t.staff_time_card.status.approved;
         break;
       case TimeCardStatus.disputed:
-        statusBg = UiColors.destructive.withOpacity(0.12);
+        statusBg = UiColors.destructive.withValues(alpha: 0.12);
         statusColor = UiColors.destructive;
         statusText = t.staff_time_card.status.disputed;
         break;
       case TimeCardStatus.paid:
-        statusBg = UiColors.primary.withOpacity(0.12);
+        statusBg = UiColors.primary.withValues(alpha: 0.12);
         statusColor = UiColors.primary;
         statusText = t.staff_time_card.status.paid;
         break;
       case TimeCardStatus.pending:
-        statusBg = UiColors.textWarning.withOpacity(0.12);
+        statusBg = UiColors.tagPending;
         statusColor = UiColors.textWarning;
         statusText = t.staff_time_card.status.pending;
         break;
@@ -61,15 +61,11 @@ class TimesheetCard extends StatelessWidget {
                 children: [
                   Text(
                     timesheet.shiftTitle,
-                    style: UiTypography.body1m.copyWith(
-                      color: UiColors.textPrimary,
-                    ),
+                    style: UiTypography.body1m.textPrimary,
                   ),
                   Text(
                     timesheet.clientName,
-                    style: UiTypography.body2r.copyWith(
-                      color: UiColors.textSecondary,
-                    ),
+                    style: UiTypography.body2r.textSecondary,
                   ),
                 ],
               ),
@@ -116,13 +112,11 @@ class TimesheetCard extends StatelessWidget {
               children: [
                 Text(
                   '${timesheet.totalHours.toStringAsFixed(1)} ${t.staff_time_card.hours} @ \$${timesheet.hourlyRate.toStringAsFixed(2)}${t.staff_time_card.per_hr}',
-                  style: UiTypography.body2r.copyWith(color: UiColors.textSecondary),
+                  style: UiTypography.body2r.textSecondary,
                 ),
                 Text(
                   '\$${timesheet.totalPay.toStringAsFixed(2)}',
-                  style: UiTypography.title2b.copyWith(
-                    color: UiColors.primary,
-                  ),
+                  style: UiTypography.title2b.primary,
                 ),
               ],
             ),
@@ -163,7 +157,7 @@ class _IconText extends StatelessWidget {
         const SizedBox(width: UiConstants.space1),
         Text(
           text,
-          style: UiTypography.body2r.copyWith(color: UiColors.textSecondary),
+          style: UiTypography.body2r.textSecondary,
         ),
       ],
     );