Add ColorWithSystemEffect support to Fabric renderer

Co-authored-by: Saadnajmi <6722175+Saadnajmi@users.noreply.github.com>

Author: Copilot

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

@@ -164,6 +164,33 @@ int32_t ColorFromUIColor(const std::shared_ptr<void> &uiColor)
   return uiColor;
 }
 
+#if TARGET_OS_OSX // [macOS
+RCTUIColor *_Nullable UIColorFromColorWithSystemEffect(
+    RCTUIColor *baseColor,
+    const std::string &systemEffectString) // [macOS]
+{
+  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]
+
 int32_t hashFromUIColor(const std::shared_ptr<void> &uiColor)
 {
   if (uiColor == nullptr) {

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

@@ -7,6 +7,7 @@
 
 #import "PlatformColorParser.h"
 
+#import <React/RCTUIKit.h> // [macOS]
 #import <react/renderer/core/RawValue.h>
 #import <react/renderer/graphics/HostPlatformColor.h>
 #import <react/renderer/graphics/RCTPlatformColorUtils.h>
@@ -18,6 +19,13 @@
 
 NS_ASSUME_NONNULL_BEGIN
 
+#if TARGET_OS_OSX // [macOS
+// Forward declaration for ColorWithSystemEffect helper
+RCTUIColor *_Nullable UIColorFromColorWithSystemEffect(
+    RCTUIColor *baseColor,
+    const std::string &systemEffectString);
+#endif // macOS]
+
 namespace facebook::react {
 
 inline facebook::react::SharedColor RCTPlatformColorComponentsFromDynamicItems(
@@ -63,6 +71,27 @@ SharedColor parsePlatformColor(const ContextContainer &contextContainer, int32_t
       auto dynamicItems = (std::unordered_map<std::string, RawValue>)items.at("dynamic");
       return RCTPlatformColorComponentsFromDynamicItems(contextContainer, surfaceId, dynamicItems);
     }
+#if TARGET_OS_OSX // [macOS
+    else if (
+        items.find("colorWithSystemEffect") != items.end() &&
+        items.at("colorWithSystemEffect").hasType<std::unordered_map<std::string, RawValue>>()) {
+      auto colorWithSystemEffectItems = (std::unordered_map<std::string, RawValue>)items.at("colorWithSystemEffect");
+      if (colorWithSystemEffectItems.find("baseColor") != colorWithSystemEffectItems.end() &&
+          colorWithSystemEffectItems.find("systemEffect") != colorWithSystemEffectItems.end() &&
+          colorWithSystemEffectItems.at("systemEffect").hasType<std::string>()) {
+        SharedColor baseColorShared{};
+        fromRawValue(contextContainer, surfaceId, colorWithSystemEffectItems.at("baseColor"), baseColorShared);
+        if (baseColorShared) {
+          RCTUIColor *baseColor = RCTPlatformColorFromColor(*baseColorShared);
+          std::string systemEffect = (std::string)colorWithSystemEffectItems.at("systemEffect");
+          RCTUIColor *colorWithEffect = UIColorFromColorWithSystemEffect(baseColor, systemEffect);
+          if (colorWithEffect != nil) {
+            return SharedColor(Color(wrapManagedObject(colorWithEffect)));
+          }
+        }
+      }
+    }
+#endif // macOS]
   }
 
   return clearColor();