Improve admin mobile dark mode contrast

resources/js/admin/mobile/components/Primitives.tsx

@@ -44,27 +44,27 @@ export function PillBadge({
   tone?: 'success' | 'warning' | 'danger' | 'muted';
   children: React.ReactNode;
 }) {
-  const { theme } = useAdminTheme();
+  const { successText, warningText, dangerText, muted, surfaceMuted, border } = useAdminTheme();
   const palette: Record<typeof tone, { bg: string; text: string; border: string }> = {
     success: {
-      bg: String(theme.backgroundStrong?.val ?? '#ecfdf3'),
-      text: String(theme.green10?.val ?? '#047857'),
-      border: String(theme.green6?.val ?? '#bbf7d0'),
+      bg: withAlpha(successText, 0.16),
+      text: successText,
+      border: withAlpha(successText, 0.35),
     },
     warning: {
-      bg: String(theme.yellow3?.val ?? '#fffbeb'),
-      text: String(theme.yellow11?.val ?? '#92400e'),
-      border: String(theme.yellow6?.val ?? '#fef3c7'),
+      bg: withAlpha(warningText, 0.16),
+      text: warningText,
+      border: withAlpha(warningText, 0.35),
     },
     danger: {
-      bg: String(theme.red3?.val ?? '#FEE2E2'),
-      text: String(theme.red11?.val ?? '#B91C1C'),
-      border: String(theme.red6?.val ?? '#FCA5A5'),
+      bg: withAlpha(dangerText, 0.16),
+      text: dangerText,
+      border: withAlpha(dangerText, 0.35),
     },
     muted: {
-      bg: String(theme.gray3?.val ?? '#f3f4f6'),
-      text: String(theme.gray11?.val ?? '#374151'),
-      border: String(theme.gray6?.val ?? '#e5e7eb'),
+      bg: surfaceMuted,
+      text: muted,
+      border,
     },
   };
   const colors = palette[tone] ?? palette.muted;
@@ -210,7 +210,11 @@ export function KpiStrip({
     tone?: 'accent' | 'neutral';
   }>
 }) {
-  const { glassSurface, border, textStrong, textMuted, primary, surfaceMuted, surface } = useAdminTheme();
+  const { glassSurface, glassSurfaceStrong, glassBorder, border, textStrong, textMuted, primary, surfaceMuted, surface } = useAdminTheme();
+  const cardSurface = surfaceMuted ?? glassSurfaceStrong ?? glassSurface ?? surface;
+  const cardBorder = glassBorder ?? border;
+  const separatorColor = withAlpha(textStrong, 0.12);
+  const innerSeparatorColor = withAlpha(textStrong, 0.08);
 
   return (
     <XStack flexWrap="wrap" gap="$2">
@@ -222,10 +226,10 @@ export function KpiStrip({
         return (
           <Card
             key={index}
-            backgroundColor={glassSurface ?? surface}
+            backgroundColor={cardSurface}
             borderRadius={14}
             borderWidth={1}
-            borderColor={border}
+            borderColor={cardBorder}
             padding="$2.5"
             flexGrow={1}
             flexBasis="48%"
@@ -242,7 +246,7 @@ export function KpiStrip({
               >
                 {item.value}
               </Text>
-              <Separator vertical backgroundColor={border} height={32} opacity={0.6} />
+              <Separator vertical backgroundColor={separatorColor} height={32} />
               <YStack alignItems="center" space="$0.5">
                 <XStack
                   width={28}
@@ -264,7 +268,7 @@ export function KpiStrip({
                 >
                   {item.label}
                 </Text>
-                <Separator backgroundColor={border} opacity={0.4} width={28} alignSelf="center" />
+                <Separator backgroundColor={innerSeparatorColor} width={28} alignSelf="center" />
                 {item.note ? (
                   <Text fontSize={9} fontWeight="800" color={iconColor} opacity={0.9} textTransform="uppercase">
                     {item.note}