feat: add support for platform colors

examples/expo/src/examples/PlatformColors.tsx

@@ -0,0 +1,43 @@
+import React from 'react'
+import { Text, View, PlatformColor, Platform } from 'react-native'
+import { createStyleSheet, useStyles } from '../styles'
+
+export const PlatformColors: React.FunctionComponent = () => {
+    const { styles } = useStyles(stylesheet)
+
+    return (
+        <View style={styles.container}>
+            <Text>
+                Unistyles supports also PlatformColor!
+            </Text>
+        </View>
+    )
+}
+
+const stylesheet = createStyleSheet({
+    container: {
+        flex: 1,
+        justifyContent: 'center',
+        alignItems: 'center',
+        ...Platform.select({
+            ios: {
+                color: PlatformColor('label'),
+                backgroundColor: PlatformColor('systemTealColor')
+            },
+            android: {
+                color: PlatformColor('?android:attr/textColor'),
+                backgroundColor: PlatformColor('@android:color/holo_blue_bright')
+            },
+            default: {
+                color: 'black',
+                backgroundColor: 'orange'
+            }
+        })
+    },
+    text: {
+        color: {
+            sm: PlatformColor('label'),
+            md: PlatformColor('systemTealColor')
+        }
+    }
+})

examples/expo/src/examples/index.ts

@@ -5,3 +5,4 @@ export { Breakpoints } from './Breakpoints'
 export { MediaQueries } from './MediaQueries'
 export { Extreme } from './Extreme'
 export { Memoization } from './Memoization'
+export { PlatformColors } from './PlatformColors'

src/types/breakpoints.ts

@@ -1,3 +1,4 @@
+import type { OpaqueColorValue } from 'react-native'
 import type { MediaQueries } from './mediaQueries'
 
 export type Breakpoints = Record<string, number>
@@ -27,7 +28,9 @@ export type ExtractBreakpoints<T, B extends Breakpoints> = T extends Partial<Rec
 export type RemoveKeysWithPrefix<T, B extends Breakpoints> = T extends (...args: Array<any>) => infer R
     ? (...args: Parameters<T>) => RemoveKeysWithPrefix<R, B>
     : T extends object
-        ? T extends Record<string, infer _V>
-            ? { [K in keyof T as K extends MediaQueries ? keyof B & string : K]: RemoveKeysWithPrefix<T[K], B> }
-            : { [K in keyof T]: RemoveKeysWithPrefix<T[K], B> }
+        ? T extends OpaqueColorValue
+            ? string
+            : T extends Record<string, infer _V>
+                ? { [K in keyof T as K extends MediaQueries ? keyof B & string : K]: RemoveKeysWithPrefix<T[K], B> }
+                : { [K in keyof T]: RemoveKeysWithPrefix<T[K], B> }
         : T

src/utils/common.ts

@@ -9,4 +9,6 @@ export const warn = (message: string) => {
 }
 
 export const isWeb = Platform.OS === 'web'
+export const isIOS = Platform.OS === 'ios'
+export const isAndroid = Platform.OS === 'android'
 export const isServer = typeof window === 'undefined'

src/utils/styles.ts

@@ -1,7 +1,7 @@
 import type { Breakpoints, CustomNamedStyles, ScreenSize, SortedBreakpointEntries } from '../types'
 import { getValueForBreakpoint } from './breakpoints'
 import { normalizeStyles } from './normalizeStyles'
-import { isWeb } from './common'
+import { isAndroid, isIOS, isWeb } from './common'
 
 /**
  * Proxies a function to parse its return value for custom media queries or breakpoints.
@@ -33,6 +33,14 @@ export const proxifyFunction = <B extends Breakpoints>(
         parseStyle(target.apply(thisArg, argumentsList), breakpoint, screenSize, breakpointPairs)
 })
 
+export const isPlatformColor = <T extends {}>(value: T): boolean => {
+    if (isIOS) {
+        return 'semantic' in value
+    }
+
+    return isAndroid && 'resource_paths' in value
+}
+
 /**
  * Parses a style object to resolve custom media queries or breakpoints based on the provided screen size and breakpoints.
  *
@@ -91,7 +99,7 @@ export const parseStyle = <T, B extends Breakpoints>(
                 }
 
                 const isDynamicFunction = typeof value === 'function'
-                const isValidStyle = typeof value !== 'object'
+                const isValidStyle = typeof value !== 'object' || isPlatformColor(value)
 
                 if (isDynamicFunction || isValidStyle) {
                     return [key, value]