feat: Add xSmall size and destructive variant to UiChip, refactor AttireItemCard to use these new chip features, and adjust body4r font size.

apps/mobile/packages/design_system/lib/src/ui_typography.dart

@@ -374,7 +374,7 @@ class UiTypography {
   /// Body 4 Regular - Font: Instrument Sans, Size: 14, Height: 1.5, Spacing: 0.05 (#121826)
   static final TextStyle body4r = _primaryBase.copyWith(
     fontWeight: FontWeight.w400,
-    fontSize: 12,
+    fontSize: 10,
     height: 1.5,
     letterSpacing: 0.05,
     color: UiColors.textPrimary,

apps/mobile/packages/design_system/lib/src/widgets/ui_chip.dart

@@ -5,6 +5,9 @@ import '../ui_typography.dart';
 
 /// Sizes for the [UiChip] widget.
 enum UiChipSize {
+  // X-Small size (e.g. for tags in tight spaces).
+  xSmall,
+
   /// Small size (e.g. for tags in tight spaces).
   small,
 
@@ -25,6 +28,9 @@ enum UiChipVariant {
 
   /// Accent style with highlight background.
   accent,
+
+  /// Desructive style with red background.
+  destructive,
 }
 
 /// A custom chip widget with supports for different sizes, themes, and icons.
@@ -119,6 +125,8 @@ class UiChip extends StatelessWidget {
         return UiColors.tagInProgress;
       case UiChipVariant.accent:
         return UiColors.accent;
+      case UiChipVariant.destructive:
+        return UiColors.iconError.withValues(alpha: 0.1);
     }
   }
 
@@ -134,11 +142,15 @@ class UiChip extends StatelessWidget {
         return UiColors.primary;
       case UiChipVariant.accent:
         return UiColors.accentForeground;
+      case UiChipVariant.destructive:
+        return UiColors.iconError;
     }
   }
 
   TextStyle _getTextStyle() {
     switch (size) {
+      case UiChipSize.xSmall:
+        return UiTypography.body4r;
       case UiChipSize.small:
         return UiTypography.body3r;
       case UiChipSize.medium:
@@ -150,6 +162,8 @@ class UiChip extends StatelessWidget {
 
   EdgeInsets _getPadding() {
     switch (size) {
+      case UiChipSize.xSmall:
+        return const EdgeInsets.symmetric(horizontal: 6, vertical: 4);
       case UiChipSize.small:
         return const EdgeInsets.symmetric(horizontal: 10, vertical: 6);
       case UiChipSize.medium:
@@ -161,6 +175,8 @@ class UiChip extends StatelessWidget {
 
   double _getIconSize() {
     switch (size) {
+      case UiChipSize.xSmall:
+        return 10;
       case UiChipSize.small:
         return 12;
       case UiChipSize.medium:
@@ -172,6 +188,8 @@ class UiChip extends StatelessWidget {
 
   double _getGap() {
     switch (size) {
+      case UiChipSize.xSmall:
+        return UiConstants.space1;
       case UiChipSize.small:
         return UiConstants.space1;
       case UiChipSize.medium:

apps/mobile/packages/features/staff/profile_sections/onboarding/attire/lib/src/presentation/widgets/attire_item_card.dart

@@ -21,9 +21,6 @@ class AttireItemCard extends StatelessWidget {
     final bool hasPhoto = uploadedPhotoUrl != null;
 
     final String statusText = hasPhoto ? 'Pending' : 'Not Uploaded';
-    final Color statusColor = hasPhoto
-        ? UiColors.textWarning
-        : UiColors.textInactive;
 
     return GestureDetector(
       onTap: onTap,
@@ -33,13 +30,6 @@ class AttireItemCard extends StatelessWidget {
           color: UiColors.white,
           borderRadius: BorderRadius.circular(UiConstants.radiusBase),
           border: Border.all(color: UiColors.border),
-          boxShadow: const <BoxShadow>[
-            BoxShadow(
-              color: Color(0x19000000),
-              blurRadius: 4,
-              offset: Offset(0, 2),
-            ),
-          ],
         ),
         child: Row(
           crossAxisAlignment: CrossAxisAlignment.start,
@@ -68,7 +58,6 @@ class AttireItemCard extends StatelessWidget {
                 children: <Widget>[
                   Text(item.label, style: UiTypography.body1m.textPrimary),
                   if (item.description != null) ...<Widget>[
-                    const SizedBox(height: UiConstants.space1),
                     Text(
                       item.description!,
                       style: UiTypography.body2r.textSecondary,
@@ -80,19 +69,10 @@ class AttireItemCard extends StatelessWidget {
                   Row(
                     children: <Widget>[
                       if (item.isMandatory)
-                        Container(
+                        const UiChip(
-                          padding: const EdgeInsets.symmetric(
+                          label: 'Required',
-                            horizontal: 8,
+                          size: UiChipSize.xSmall,
-                            vertical: 4,
+                          variant: UiChipVariant.destructive,
-                          ),
-                          decoration: BoxDecoration(
-                            color: UiColors.error.withValues(alpha: 0.1),
-                            borderRadius: BorderRadius.circular(4),
-                          ),
-                          child: Text(
-                            'Required',
-                            style: UiTypography.footnote2m.textError,
-                          ),
                         ),
                       const Spacer(),
                       if (isUploading)
@@ -102,11 +82,10 @@ class AttireItemCard extends StatelessWidget {
                           child: CircularProgressIndicator(strokeWidth: 2),
                         )
                       else if (hasPhoto)
-                        Text(
+                        UiChip(
-                          statusText,
+                          label: statusText,
-                          style: UiTypography.footnote2m.copyWith(
+                          size: UiChipSize.xSmall,
-                            color: statusColor,
+                          variant: UiChipVariant.secondary,
-                          ),
                         ),
                     ],
                   ),