DynamicColorMacOS fixes (#1028)

* Use initWithDynamicProvider + Add HC Support

* Update log error

Author: Saadnajmi

Libraries/StyleSheet/PlatformColorValueTypes.macos.js

@@ -18,6 +18,8 @@ export opaque type NativeColorValue = {
   dynamic?: {
     light: ?(ColorValue | ProcessedColorValue),
     dark: ?(ColorValue | ProcessedColorValue),
+    highContrastLight?: ?(ColorValue | ProcessedColorValue),
+    highContrastDark?: ?(ColorValue | ProcessedColorValue),
   },
   colorWithSystemEffect?: {
     baseColor: ?(ColorValue | ProcessedColorValue),
@@ -51,12 +53,21 @@ export const ColorWithSystemEffectMacOSPrivate = (
 export type DynamicColorMacOSTuplePrivate = {
   light: ColorValue,
   dark: ColorValue,
+  highContrastLight?: ColorValue,
+  highContrastDark?: ColorValue,
 };
 
 export const DynamicColorMacOSPrivate = (
   tuple: DynamicColorMacOSTuplePrivate,
 ): ColorValue => {
-  return {dynamic: {light: tuple.light, dark: tuple.dark}};
+  return {
+    dynamic: {
+      light: tuple.light,
+      dark: tuple.dark,
+      highContrastLight: tuple.highContrastLight,
+      highContrastDark: tuple.highContrastDark,
+    },
+  };
 };
 
 export const normalizeColorObject = (
@@ -74,6 +85,8 @@ export const normalizeColorObject = (
       dynamic: {
         light: normalizeColor(dynamic.light),
         dark: normalizeColor(dynamic.dark),
+        highContrastLight: normalizeColor(dynamic.highContrastLight),
+        highContrastDark: normalizeColor(dynamic.highContrastDark),
       },
     };
     return dynamicColor;
@@ -104,6 +117,8 @@ export const processColorObject = (
       dynamic: {
         light: processColor(dynamic.light),
         dark: processColor(dynamic.dark),
+        highContrastLight: processColor(dynamic.highContrastLight),
+        highContrastDark: processColor(dynamic.highContrastDark),
       },
     };
     return dynamicColor;

Libraries/StyleSheet/PlatformColorValueTypesMacOS.js

@@ -15,6 +15,8 @@ import type {ColorValue} from './StyleSheet';
 export type DynamicColorMacOSTuple = {
   light: ColorValue,
   dark: ColorValue,
+  highContrastLight?: ColorValue,
+  highContrastDark?: ColorValue,
 };
 
 export const DynamicColorMacOS = (

Libraries/StyleSheet/PlatformColorValueTypesMacOS.macos.js

@@ -19,12 +19,19 @@ import {
 export type DynamicColorMacOSTuple = {
   light: ColorValue,
   dark: ColorValue,
+  highContrastLight?: ColorValue,
+  highContrastDark?: ColorValue,
 };
 
 export const DynamicColorMacOS = (
   tuple: DynamicColorMacOSTuple,
 ): ColorValue => {
-  return DynamicColorMacOSPrivate({light: tuple.light, dark: tuple.dark});
+  return DynamicColorMacOSPrivate({
+    light: tuple.light,
+    dark: tuple.dark,
+    highContrastLight: tuple.highContrastLight,
+    highContrastDark: tuple.highContrastDark,
+  });
 };
 
 export type SystemEffectMacOS =

React/Base/RCTConvert.m

@@ -16,10 +16,6 @@
 #import "RCTParserUtils.h"
 #import "RCTUtils.h"
 
-#if TARGET_OS_OSX // [TODO(macOS GH#774)
-#import "RCTDynamicColor.h"
-#endif // ]TODO(macOS GH#774)
-
 @implementation RCTConvert
 
 RCT_CONVERTER(id, id, self)
@@ -1043,7 +1039,28 @@ + (RCTUIColor *)UIColor:(id)json // TODO(macOS GH#750)
       RCTUIColor *highContrastDarkColor = [RCTConvert UIColor:highContrastDark]; // TODO(macOS GH#750)
       if (lightColor != nil && darkColor != nil) {
 #if TARGET_OS_OSX
-        RCTDynamicColor *color = [[RCTDynamicColor alloc] initWithAquaColor:lightColor darkAquaColor:darkColor];
+        NSColor *color = [NSColor colorWithName:nil dynamicProvider:^NSColor * _Nonnull(NSAppearance * _Nonnull appearance) {
+          NSMutableArray<NSAppearanceName> *appearances = [NSMutableArray arrayWithArray:@[NSAppearanceNameAqua,NSAppearanceNameDarkAqua]];
+          if (highContrastLightColor != nil) {
+            [appearances addObject:NSAppearanceNameAccessibilityHighContrastAqua];
+          }
+          if (highContrastDarkColor != nil) {
+            [appearances addObject:NSAppearanceNameAccessibilityHighContrastDarkAqua];
+          }
+          NSAppearanceName bestMatchingAppearance = [appearance bestMatchFromAppearancesWithNames:appearances];
+          if (bestMatchingAppearance == NSAppearanceNameAqua) {
+            return lightColor;
+          } else if (bestMatchingAppearance == NSAppearanceNameDarkAqua) {
+            return darkColor;
+          } else if (bestMatchingAppearance == NSAppearanceNameAccessibilityHighContrastAqua) {
+            return highContrastLightColor;
+          } else if (bestMatchingAppearance == NSAppearanceNameAccessibilityHighContrastDarkAqua) {
+            return highContrastDarkColor;
+          } else {
+            RCTLogConvertError(json, @"an NSColorColor. Could not resolve current appearance. Defaulting to light.");
+            return lightColor;
+          }
+        }];
         return color;
 #else
 #if defined(__IPHONE_OS_VERSION_MAX_ALLOWED) && __IPHONE_OS_VERSION_MAX_ALLOWED >= 130000

React/Base/macOS/RCTDynamicColor.h

@@ -266,6 +266,27 @@ function DynamicColorsExample() {
           }}
         />
       </View>
+      <View style={styles.row}>
+        <Text style={styles.labelCell}>
+          DynamicColorMacOS({'{\n'}
+          {'  '}light: 'red',{'\n'}
+          {'  '}dark: 'blue',{'\n'}
+          {'  '}highContrastLight: 'green',{'\n'}
+          {'  '}highContrastDark: 'orange',{'\n'}
+          {'}'})
+        </Text>
+        <View
+          style={{
+            ...styles.colorCell,
+            backgroundColor: DynamicColorMacOS({
+              light: 'red',
+              dark: 'blue',
+              highContrastLight: 'green',
+              highContrastDark: 'orange',
+            }),
+          }}
+        />
+      </View>
     </View>
   ) : // ]TODO(macOS GH#774)
   Platform.OS === 'ios' ? (