[PlatformColor] Properly add macOS version

Author: alloy

Libraries/StyleSheet/PlatformColorValueTypes.macos.js

@@ -25,13 +25,13 @@ export const PlatformColor = (...names: Array<string>): ColorValue => {
   return {semantic: names};
 };
 
-export type DynamicColorIOSTuplePrivate = {
+export type DynamicColorMacOSTuplePrivate = {
   light: ColorValue,
   dark: ColorValue,
 };
 
-export const DynamicColorIOSPrivate = (
-  tuple: DynamicColorIOSTuplePrivate,
+export const DynamicColorMacOSPrivate = (
+  tuple: DynamicColorMacOSTuplePrivate,
 ): ColorValue => {
   return {dynamic: {light: tuple.light, dark: tuple.dark}};
 };
@@ -40,7 +40,7 @@ export const normalizeColorObject = (
   color: NativeColorValue,
 ): ?ProcessedColorValue => {
   if ('semantic' in color) {
-    // an ios semantic color
+    // a macOS semantic color
     return color;
   } else if ('dynamic' in color && color.dynamic !== undefined) {
     const normalizeColor = require('./normalizeColor');

Libraries/StyleSheet/PlatformColorValueTypesIOS.macos.js renamed to Libraries/StyleSheet/PlatformColorValueTypesMacOS.js

@@ -11,14 +11,15 @@
 'use strict';
 
 import type {ColorValue} from './StyleSheetTypes';
-import {DynamicColorIOSPrivate} from './PlatformColorValueTypes';
 
-export type DynamicColorIOSTuple = {
+export type DynamicColorMacOSTuple = {
   light: ColorValue,
   dark: ColorValue,
 };
 
-export const DynamicColorIOS = (tuple: DynamicColorIOSTuple): ColorValue => {
-  return DynamicColorIOSPrivate({light: tuple.light, dark: tuple.dark});
+export const DynamicColorMacOS = (
+  tuple: DynamicColorMacOSTuple,
+): ColorValue => {
+  throw new Error('DynamicColorMacOS is not available on this platform.');
 };
 // ]TODO(macOS ISS#2323203)

Libraries/StyleSheet/PlatformColorValueTypesMacOS.macos.js

@@ -0,0 +1,26 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ * @flow strict-local
+ */
+// [TODO(macOS ISS#2323203)
+'use strict';
+
+import type {ColorValue} from './StyleSheetTypes';
+import {DynamicColorMacOSPrivate} from './PlatformColorValueTypes';
+
+export type DynamicColorMacOSTuple = {
+  light: ColorValue,
+  dark: ColorValue,
+};
+
+export const DynamicColorMacOS = (
+  tuple: DynamicColorMacOSTuple,
+): ColorValue => {
+  return DynamicColorMacOSPrivate({light: tuple.light, dark: tuple.dark});
+};
+// ]TODO(macOS ISS#2323203)

RNTester/js/RNTesterApp.ios.js

@@ -29,6 +29,7 @@ const {
   Platform, // TODO(OSS Candidate ISS#2710739)
   PlatformColor, // TODO(OSS Candidate ISS#2710739)
   DynamicColorIOS, // TODO(OSS Candidate ISS#2710739)
+  DynamicColorMacOS, // TODO(macOS ISS#2323203)
   SafeAreaView,
   StyleSheet,
   Text,
@@ -249,7 +250,12 @@ const styles = StyleSheet.create({
     fontSize: 19,
     fontWeight: '600',
     textAlign: 'center',
-    color: DynamicColorIOS({light: 'black', dark: 'white'}), // TODO(OSS Candidate ISS#2710739)
+    color:
+      // [TODO(macOS ISS#2323203)
+      Platform.OS === 'macos'
+        ? DynamicColorMacOS({light: 'black', dark: 'white'})
+        : DynamicColorIOS({light: 'black', dark: 'white'}), // TODO(OSS Candidate ISS#2710739)
+    // ]TODO(macOS ISS#2323203)
   },
   exampleContainer: {
     flex: 1,

RNTester/js/examples/PlatformColor/PlatformColorExample.js

@@ -16,6 +16,7 @@ import Platform from '../../../../Libraries/Utilities/Platform';
 const {
   ColorAndroid,
   DynamicColorIOS,
+  DynamicColorMacOS,
   PlatformColor,
   StyleSheet,
   Text,
@@ -228,7 +229,42 @@ function FallbackColorsExample() {
 }
 
 function DynamicColorsExample() {
-  return Platform.OS === 'ios' ? (
+  // [TODO(macOS ISS#2323203)
+  return Platform.OS === 'macos' ? (
+    <View style={styles.column}>
+      <View style={styles.row}>
+        <Text style={styles.labelCell}>
+          DynamicColorMacOS({'{\n'}
+          {'  '}light: 'red', dark: 'blue'{'\n'}
+          {'}'})
+        </Text>
+        <View
+          style={{
+            ...styles.colorCell,
+            backgroundColor: DynamicColorMacOS({light: 'red', dark: 'blue'}),
+          }}
+        />
+      </View>
+      <View style={styles.row}>
+        <Text style={styles.labelCell}>
+          DynamicColorMacOS({'{\n'}
+          {'  '}light: PlatformColor('systemBlueColor'),{'\n'}
+          {'  '}dark: PlatformColor('systemRedColor'),{'\n'}
+          {'}'})
+        </Text>
+        <View
+          style={{
+            ...styles.colorCell,
+            backgroundColor: DynamicColorMacOS({
+              light: PlatformColor('systemBlueColor'),
+              dark: PlatformColor('systemRedColor'),
+            }),
+          }}
+        />
+      </View>
+    </View>
+  ) : // ]TODO(macOS ISS#2323203)
+  Platform.OS === 'ios' ? (
     <View style={styles.column}>
       <View style={styles.row}>
         <Text style={styles.labelCell}>
@@ -289,17 +325,26 @@ function VariantColorsExample() {
     <View style={styles.column}>
       <View style={styles.row}>
         <Text style={styles.labelCell}>
-          {Platform.OS === 'ios' || Platform.OS === 'macos' // TODO(macOS ISS#2323203)
-            ? "DynamicColorIOS({light: 'red', dark: 'blue'})"
-            : "ColorAndroid('?attr/colorAccent')"}
+          {// [TODO(OSS Candidate ISS#2710739)
+          Platform.select({
+            ios: "DynamicColorIOS({light: 'red', dark: 'blue'})",
+            android: "ColorAndroid('?attr/colorAccent')",
+            macos: "DynamicColorMacOS({light: 'red', dark: 'blue'})",
+          })
+          // ]TODO(OSS Candidate ISS#2710739)
+          }
         </Text>
         <View
           style={{
             ...styles.colorCell,
             backgroundColor:
-              Platform.OS === 'ios' || Platform.OS === 'macos' // TODO(macOS ISS#2323203)
+              Platform.OS === 'ios'
                 ? DynamicColorIOS({light: 'red', dark: 'blue'})
-                : ColorAndroid('?attr/colorAccent'),
+                : // [TODO(macOS ISS#2323203)
+                Platform.OS === 'macos'
+                ? DynamicColorMacOS({light: 'red', dark: 'blue'})
+                : // ]TODO(macOS ISS#2323203)
+                  ColorAndroid('?attr/colorAccent'),
           }}
         />
       </View>
@@ -336,7 +381,7 @@ exports.examples = [
     },
   },
   {
-    title: 'iOS Dynamic Colors',
+    title: 'Dynamic Colors', // TODO(OSS Candidate ISS#2710739)
     render(): React.Element<any> {
       return <DynamicColorsExample />;
     },

index.js

@@ -98,6 +98,7 @@ import typeof Platform from './Libraries/Utilities/Platform';
 import typeof processColor from './Libraries/StyleSheet/processColor';
 import typeof {PlatformColor} from './Libraries/StyleSheet/PlatformColorValueTypes';
 import typeof {DynamicColorIOS} from './Libraries/StyleSheet/PlatformColorValueTypesIOS';
+import typeof {DynamicColorMacOS} from './Libraries/StyleSheet/PlatformColorValueTypesMacOS'; // TODO(macOS ISS#2323203)
 import typeof {ColorAndroid} from './Libraries/StyleSheet/PlatformColorValueTypesAndroid';
 import typeof RootTagContext from './Libraries/ReactNative/RootTagContext';
 import typeof DeprecatedColorPropType from './Libraries/DeprecatedPropTypes/DeprecatedColorPropType';
@@ -495,6 +496,10 @@ module.exports = {
     return require('./Libraries/StyleSheet/PlatformColorValueTypesIOS')
       .DynamicColorIOS;
   },
+  get DynamicColorMacOS(): DynamicColorMacOS {
+    return require('./Libraries/StyleSheet/PlatformColorValueTypesMacOS')
+      .DynamicColorMacOS;
+  },
   get ColorAndroid(): ColorAndroid {
     return require('./Libraries/StyleSheet/PlatformColorValueTypesAndroid')
       .ColorAndroid;