feat(mobile): redesign the Android usage limits widget

apps/mobile/modules/t3-widget-expiry/android/src/main/res/drawable/t3_widget_hatch.xml

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?>
+<bitmap xmlns:android="http://schemas.android.com/apk/res/android"
+  android:src="@drawable/t3_widget_hatch_tile"
+  android:tileMode="repeat" />

apps/mobile/src/features/usage/providerColors.ts

@@ -0,0 +1,14 @@
+import type { UsageProviderKind } from "@t3tools/contracts";
+
+export function providerColors(scheme: "light" | "dark"): Record<UsageProviderKind, string> {
+  return {
+    claude: "#d97757",
+    codex: scheme === "dark" ? "#e6e6e6" : "#3c3c43",
+    grok: scheme === "dark" ? "#a1a1aa" : "#52525b",
+    cursor: "#8b8b8b",
+    opencode: "#5b9bbd",
+    antigravity: "#8c7bd1",
+    pi: "#4d9f8a",
+    muse: "#0866ff",
+  };
+}

apps/mobile/src/features/usage/usageProviders.ts

@@ -1,5 +1,6 @@
 import type { UsageProviderKind } from "@t3tools/contracts";
 import { useAppearancePreferences } from "../settings/appearance/AppearancePreferencesProvider";
+import { providerColors } from "./providerColors";
 
 export const PROVIDER_ORDER: readonly UsageProviderKind[] = [
   "codex",
@@ -29,17 +30,7 @@ export const PROVIDER_LABEL: Record<UsageProviderKind, string> = {
 };
 
 export function useProviderColors(): Record<UsageProviderKind, string> {
-  const { themeAppearance: scheme } = useAppearancePreferences();
-  return {
-    claude: "#d97757",
-    codex: scheme === "dark" ? "#e6e6e6" : "#3c3c43",
-    grok: scheme === "dark" ? "#a1a1aa" : "#52525b",
-    cursor: "#8b8b8b",
-    opencode: "#5b9bbd",
-    antigravity: "#8c7bd1",
-    pi: "#4d9f8a",
-    muse: "#0866ff",
-  };
+  return providerColors(useAppearancePreferences().themeAppearance);
 }
 
 export function useUsageMixColors() {