Clean up: fix macOS diff tags and remove test-only changes

- Fix bare #endif to use proper #endif // macOS] tags per conventions
- Revert Playground and testerStateUtils to upstream defaults (test-only)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: Saadnajmi

packages/react-native/ReactCommon/react/renderer/graphics/platform/ios/react/renderer/graphics/HostPlatformColor.mm

@@ -20,6 +20,33 @@
 
 namespace facebook::react {
 
+#if TARGET_OS_OSX // [macOS
+RCTUIColor *_Nullable UIColorFromColorWithSystemEffect(
+    RCTUIColor *baseColor,
+    const std::string &systemEffectString)
+{
+  if (baseColor == nil) {
+    return nil;
+  }
+
+  NSColor *colorWithEffect = baseColor;
+  if (!systemEffectString.empty()) {
+    if (systemEffectString == "none") {
+      colorWithEffect = [baseColor colorWithSystemEffect:NSColorSystemEffectNone];
+    } else if (systemEffectString == "pressed") {
+      colorWithEffect = [baseColor colorWithSystemEffect:NSColorSystemEffectPressed];
+    } else if (systemEffectString == "deepPressed") {
+      colorWithEffect = [baseColor colorWithSystemEffect:NSColorSystemEffectDeepPressed];
+    } else if (systemEffectString == "disabled") {
+      colorWithEffect = [baseColor colorWithSystemEffect:NSColorSystemEffectDisabled];
+    } else if (systemEffectString == "rollover") {
+      colorWithEffect = [baseColor colorWithSystemEffect:NSColorSystemEffectRollover];
+    }
+  }
+  return colorWithEffect;
+}
+#endif // macOS]
+
 namespace {
 
 bool UIColorIsP3ColorSpace(const std::shared_ptr<void> &uiColor)
@@ -134,7 +161,7 @@ int32_t ColorFromUIColor(RCTPlatformColor *color) // [macOS]
   NSAppearance.currentAppearance = previousAppearance;
 #else // macOS]
   [color getRed:&rgba[0] green:&rgba[1] blue:&rgba[2] alpha:&rgba[3]];
-#endif
+#endif // macOS]
   return ColorFromColorComponents({(float)rgba[0], (float)rgba[1], (float)rgba[2], (float)rgba[3]});
 }
 
@@ -262,6 +289,21 @@ int32_t ColorFromUIColor(const std::shared_ptr<void> &uiColor)
       0);
 }
 
+#if TARGET_OS_OSX // [macOS
+Color::Color(const ColorWithSystemEffect &colorWithSystemEffect)
+{
+  RCTUIColor *baseColor = UIColorFromInt32(colorWithSystemEffect.color);
+  RCTUIColor *colorWithEffect =
+      UIColorFromColorWithSystemEffect(baseColor, colorWithSystemEffect.effect);
+  if (colorWithEffect != nil) {
+    uiColor_ = wrapManagedObject(colorWithEffect);
+  }
+  uiColorHashValue_ = facebook::react::hash_combine(
+      colorWithSystemEffect.color,
+      std::hash<std::string>{}(colorWithSystemEffect.effect));
+}
+#endif // macOS
+
 Color::Color(const ColorComponents &components)
 {
   uiColor_ = wrapManagedObject(UIColorFromComponentsColor(components));

packages/react-native/ReactCommon/react/renderer/graphics/platform/ios/react/renderer/graphics/RCTPlatformColorUtils.mm

@@ -316,7 +316,7 @@
         return colorObject;
       }
     }
-#endif
+#endif // macOS]
   }
   return nil;
 }
@@ -342,7 +342,7 @@
   [finalColor getRed:&rgba[0] green:&rgba[1] blue:&rgba[2] alpha:&rgba[3]];
 #else // macOS]
   [color getRed:&rgba[0] green:&rgba[1] blue:&rgba[2] alpha:&rgba[3]];
-#endif
+#endif // macOS]
   return {(float)rgba[0], (float)rgba[1], (float)rgba[2], (float)rgba[3]};
 }
 

packages/rn-tester/js/examples/Playground/RNTesterPlayground.js

@@ -12,121 +12,14 @@ import type {RNTesterModuleExample} from '../../types/RNTesterTypes';
 
 import RNTesterText from '../../components/RNTesterText';
 import * as React from 'react';
-import {Platform, PlatformColor, StyleSheet, View} from 'react-native';
-import {DynamicColorMacOS} from 'react-native'; // [macOS]
-
-function ColorSwatch({
-  color,
-  label,
-}: {
-  color: ReturnType<typeof PlatformColor>,
-  label: string,
-}) {
-  return (
-    <View style={styles.row}>
-      <View style={[styles.swatch, {backgroundColor: color}]} />
-      <RNTesterText style={styles.label}>{label}</RNTesterText>
-    </View>
-  );
-}
+import {StyleSheet, View} from 'react-native';
 
 function Playground() {
-  if (Platform.OS !== 'macos') {
-    return (
-      <View style={styles.container}>
-        <RNTesterText>This test is macOS-only.</RNTesterText>
-      </View>
-    );
-  }
-
   return (
     <View style={styles.container}>
-      <RNTesterText style={styles.heading}>
-        Fabric Dark Mode Color Test
-      </RNTesterText>
-      <RNTesterText style={styles.description}>
-        These colors should change when you toggle between Light and Dark
-        appearance in System Settings. If they all look the same in both modes,
-        the bug is not fixed.
-      </RNTesterText>
-
-      <RNTesterText style={styles.sectionTitle}>System Colors</RNTesterText>
-      <ColorSwatch
-        color={PlatformColor('systemBlueColor')}
-        label="systemBlueColor"
-      />
-      <ColorSwatch
-        color={PlatformColor('systemRedColor')}
-        label="systemRedColor"
-      />
-      <ColorSwatch
-        color={PlatformColor('systemGreenColor')}
-        label="systemGreenColor"
-      />
-      <ColorSwatch
-        color={PlatformColor('systemOrangeColor')}
-        label="systemOrangeColor"
-      />
-
-      <RNTesterText style={styles.sectionTitle}>Semantic Colors</RNTesterText>
-      <ColorSwatch
-        color={PlatformColor('labelColor')}
-        label="labelColor"
-      />
-      <ColorSwatch
-        color={PlatformColor('secondaryLabelColor')}
-        label="secondaryLabelColor"
-      />
-      <ColorSwatch
-        color={PlatformColor('windowBackgroundColor')}
-        label="windowBackgroundColor"
-      />
-      <ColorSwatch
-        color={PlatformColor('controlBackgroundColor')}
-        label="controlBackgroundColor"
-      />
-      <ColorSwatch
-        color={PlatformColor('textColor')}
-        label="textColor"
-      />
-      <ColorSwatch
-        color={PlatformColor('separatorColor')}
-        label="separatorColor"
-      />
-
-      <RNTesterText style={styles.sectionTitle}>
-        DynamicColorMacOS
+      <RNTesterText>
+        Edit "RNTesterPlayground.js" to change this file
       </RNTesterText>
-      <ColorSwatch
-        color={DynamicColorMacOS({light: '#FF0000', dark: '#00FF00'})}
-        label="light=red, dark=green"
-      />
-      <ColorSwatch
-        color={DynamicColorMacOS({light: '#0000FF', dark: '#FFFF00'})}
-        label="light=blue, dark=yellow"
-      />
-
-      <RNTesterText style={styles.sectionTitle}>
-        Background + Text Test
-      </RNTesterText>
-      <View
-        style={[
-          styles.textBox,
-          {backgroundColor: PlatformColor('windowBackgroundColor')},
-        ]}>
-        <RNTesterText style={{color: PlatformColor('labelColor')}}>
-          This text should be readable in both light and dark mode
-        </RNTesterText>
-      </View>
-      <View
-        style={[
-          styles.textBox,
-          {backgroundColor: PlatformColor('controlBackgroundColor')},
-        ]}>
-        <RNTesterText style={{color: PlatformColor('controlTextColor')}}>
-          controlTextColor on controlBackgroundColor
-        </RNTesterText>
-      </View>
     </View>
   );
 }
@@ -135,43 +28,6 @@ const styles = StyleSheet.create({
   container: {
     padding: 10,
   },
-  heading: {
-    fontSize: 18,
-    fontWeight: 'bold',
-    marginBottom: 4,
-  },
-  description: {
-    fontSize: 12,
-    marginBottom: 12,
-    color: 'gray',
-  },
-  sectionTitle: {
-    fontSize: 14,
-    fontWeight: '600',
-    marginTop: 12,
-    marginBottom: 6,
-  },
-  row: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    marginBottom: 4,
-  },
-  swatch: {
-    width: 40,
-    height: 24,
-    borderRadius: 4,
-    borderWidth: 1,
-    borderColor: '#ccc',
-    marginRight: 8,
-  },
-  label: {
-    fontSize: 12,
-  },
-  textBox: {
-    padding: 10,
-    borderRadius: 6,
-    marginBottom: 6,
-  },
 });
 
 export default ({

packages/rn-tester/js/utils/testerStateUtils.js

@@ -25,10 +25,10 @@ export const Screens = {
 } as const;
 
 export const initialNavigationState: RNTesterNavigationState = {
-  activeModuleKey: 'PlaygroundExample',
-  activeModuleTitle: 'Playground',
+  activeModuleKey: null,
+  activeModuleTitle: null,
   activeModuleExampleKey: null,
-  screen: Screens.PLAYGROUNDS,
+  screen: Screens.COMPONENTS,
   recentlyUsed: {components: [], apis: []},
   hadDeepLink: false,
 };