feat(colors): add system colors full list back

Author: mgcrea

ios/extensions/Color+Parsing.swift

@@ -72,13 +72,42 @@ extension Color {
 extension UIColor {
   static func systemColor(named name: String) -> UIColor? {
     switch name {
-    case "systemGreen": return .systemGreen
+    // Backgrounds
+    case "systemBackground": return .systemBackground
+    case "secondarySystemBackground": return .secondarySystemBackground
+    case "tertiarySystemBackground": return .tertiarySystemBackground
+    case "systemGroupedBackground": return .systemGroupedBackground
+    case "secondarySystemGroupedBackground": return .secondarySystemGroupedBackground
+    case "tertiarySystemGroupedBackground": return .tertiarySystemGroupedBackground
+    // Labels
+    case "label": return .label
+    case "secondaryLabel": return .secondaryLabel
+    case "tertiaryLabel": return .tertiaryLabel
+    case "quaternaryLabel": return .quaternaryLabel
+    case "placeholderText": return .placeholderText
+    // Fill colors
+    case "systemFill": return .systemFill
+    case "secondarySystemFill": return .secondarySystemFill
+    case "tertiarySystemFill": return .tertiarySystemFill
+    case "quaternarySystemFill": return .quaternarySystemFill
+    // Standard colors
+    case "systemRed": return .systemRed
     case "systemBlue": return .systemBlue
+    case "systemGreen": return .systemGreen
     case "systemOrange": return .systemOrange
-    case "systemRed": return .systemRed
     case "systemYellow": return .systemYellow
-    case "label": return .label
-    // Add more system colors as needed
+    case "systemPink": return .systemPink
+    case "systemPurple": return .systemPurple
+    case "systemTeal": return .systemTeal
+    case "systemIndigo": return .systemIndigo
+    // Grays
+    case "systemGray": return .systemGray
+    case "systemGray2": return .systemGray2
+    case "systemGray3": return .systemGray3
+    case "systemGray4": return .systemGray4
+    case "systemGray5": return .systemGray5
+    case "systemGray6": return .systemGray6
+    // Default
     default: return nil
     }
   }

src/styles/buttonStyles.ts

@@ -1,8 +1,9 @@
+import { PlatformColor } from "react-native";
 import type { NativeTextStyle } from "../types";
 
 export const pickerButtonStyles: NativeTextStyle = {
-  color: "label",
-  backgroundColor: "tertiarySystemFill",
+  color: PlatformColor("label"),
+  backgroundColor: PlatformColor("tertiarySystemFill"),
   paddingVertical: 7,
   paddingHorizontal: 12,
   borderRadius: 8,

src/types/style.ts

@@ -1,4 +1,4 @@
-import { TextStyle, ViewStyle } from "react-native";
+import { ColorValue, TextStyle, ViewStyle } from "react-native";
 
 export type NativeViewStyle = Pick<
   ViewStyle,
@@ -25,9 +25,9 @@ export type NativeViewStyle = Pick<
   | "right"
   | "bottom"
 > & {
-  tintColor?: string;
-  accentColor?: string;
-  foregroundColor?: string;
+  tintColor?: ColorValue;
+  accentColor?: ColorValue;
+  foregroundColor?: ColorValue;
   cornerRadius?: number;
   preferredColorScheme?: "light" | "dark";
 };