PlatformColor lazy fallback: honor a raw-color fallback on iOS and macOS (native) (#57556)

Summary:
Pull Request resolved: #57556

An implementation for the RFC in react-native-community/discussions-and-proposals#1008

This is the first diff in a stack that adds an optional trailing `{fallback: '<raw color string>'}` argument to `PlatformColor(...)`. The fallback is carried lazily to native and parsed only when every supplied color token fails to resolve. This diff wires up the iOS and macOS native color resolvers to honor that fallback; a later diff adds the JS argument that emits it, so on its own this change is a no-op for existing call sites. The fallback is supported on the new architecture (Fabric) only.

To distinguish a genuine miss (no token resolves) from a token that legitimately resolves to a transparent color, the semantic-color resolver gains an `OrNil` variant:

- `RCTPlatformColorFromSemanticItemsOrNil` returns `nil` on a miss instead of collapsing to `clearColor`. `RCTPlatformColorFromSemanticItems` keeps its existing non-null contract by wrapping the `OrNil` variant.
- `Color::createSemanticColor` returns the undefined-color sentinel (a null underlying `UIColor`) on a miss, so `PlatformColorParser.mm` applies the fallback only on a true miss and otherwise renders transparent exactly as before.
- The fallback string is parsed with the shared CSS color parser (`parseCSSProperty<CSSColor>`), so `transparent`/`rgba(0,0,0,0)` are honored rather than mistaken for a parse failure.

This spans the `xplat` iOS and macOS graphics resolvers.

Changelog:
[Internal] - PlatformColor: iOS/macOS native support for a lazy raw-color fallback

Reviewed By: javache, cipolleschi

Differential Revision: D111837102

fbshipit-source-id: 20fd1d6e10b1ce953de3644752051843b51b230f

Author: Abbondanzo

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

@@ -28,6 +28,9 @@ struct Color {
   int32_t getColor() const;
   std::size_t getUIColorHash() const;
 
+  // Returns the UndefinedColor sentinel (null underlying UIColor) on a miss, so
+  // callers can tell a miss from a name that resolves to transparent. Callers
+  // reaching into getUIColor() must null-check it.
   static Color createSemanticColor(std::vector<std::string> &semanticItems);
 
   std::shared_ptr<void> getUIColor() const

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

@@ -237,7 +237,12 @@ int32_t ColorFromUIColor(const std::shared_ptr<void> &uiColor)
 
 Color Color::createSemanticColor(std::vector<std::string> &semanticItems)
 {
-  auto semanticColor = RCTPlatformColorFromSemanticItems(semanticItems);
+  UIColor *semanticColor = RCTPlatformColorFromSemanticItemsOrNil(semanticItems);
+  if (semanticColor == nil) {
+    // Undefined-color sentinel on a miss, distinct from a name that resolves to
+    // transparent (getColor() is still 0, preserving the old render).
+    return HostPlatformColor::UndefinedColor;
+  }
   return Color(wrapManagedObject(semanticColor));
 }
 

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

@@ -8,9 +8,13 @@
 #import "PlatformColorParser.h"
 
 #import <react/renderer/core/RawValue.h>
+#import <react/renderer/css/CSSColor.h>
+#import <react/renderer/css/CSSValueParser.h>
+#import <react/renderer/graphics/Color.h>
 #import <react/renderer/graphics/HostPlatformColor.h>
 #import <react/renderer/graphics/RCTPlatformColorUtils.h>
 #import <react/utils/ManagedObjectWrapper.h>
+#import <optional>
 #import <string>
 #import <unordered_map>
 
@@ -51,13 +55,39 @@
   return SharedColor(color);
 }
 
+// nullopt only on a parse failure, so a fallback that resolves to transparent is
+// still honored.
+static std::optional<SharedColor> fallbackColorFromString(const std::string &fallbackString)
+{
+  auto cssColor = parseCSSProperty<CSSColor>(fallbackString);
+  if (std::holds_alternative<CSSColor>(cssColor)) {
+    const auto &c = std::get<CSSColor>(cssColor);
+    return colorFromRGBA(c.r, c.g, c.b, c.a);
+  }
+  return std::nullopt;
+}
+
 SharedColor parsePlatformColor(const ContextContainer &contextContainer, int32_t surfaceId, const RawValue &value)
 {
   if (value.hasType<std::unordered_map<std::string, RawValue>>()) {
     auto items = (std::unordered_map<std::string, RawValue>)value;
     if (items.find("semantic") != items.end() && items.at("semantic").hasType<std::vector<std::string>>()) {
       auto semanticItems = (std::vector<std::string>)items.at("semantic");
-      return SharedColor(Color::createSemanticColor(semanticItems));
+      auto semanticColor = SharedColor(Color::createSemanticColor(semanticItems));
+      // The sentinel (null UIColor) means a true miss; apply the fallback only
+      // then, not when a name resolves to transparent.
+      if (!semanticColor) {
+        if (items.find("fallback") != items.end() && items.at("fallback").hasType<std::string>()) {
+          auto fallbackColor = fallbackColorFromString((std::string)items.at("fallback"));
+          // has_value(), not != 0, so a transparent fallback is kept.
+          if (fallbackColor.has_value()) {
+            return *fallbackColor;
+          }
+        }
+        // Miss with no usable fallback: clearColor, never leaking the sentinel.
+        return clearColor();
+      }
+      return semanticColor;
     } else if (
         items.find("dynamic") != items.end() &&
         items.at("dynamic").hasType<std::unordered_map<std::string, RawValue>>()) {

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

@@ -15,6 +15,15 @@ struct ColorComponents;
 struct Color;
 } // namespace facebook::react
 
+NS_ASSUME_NONNULL_BEGIN
+
 facebook::react::ColorComponents RCTPlatformColorComponentsFromSemanticItems(std::vector<std::string> &semanticItems);
 UIColor *RCTPlatformColorFromSemanticItems(std::vector<std::string> &semanticItems);
+// Like RCTPlatformColorFromSemanticItems but returns nil on a miss, so callers
+// can tell a miss from a name that resolves to transparent.
+UIColor *_Nullable RCTPlatformColorFromSemanticItemsOrNil(std::vector<std::string> &semanticItems);
+// Precondition: `color` is a resolved color, never the miss sentinel, so the
+// result stays _Nonnull.
 UIColor *RCTPlatformColorFromColor(const facebook::react::Color &color);
+
+NS_ASSUME_NONNULL_END

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

@@ -192,7 +192,7 @@
   return _ColorComponentsFromUIColor(RCTPlatformColorFromSemanticItems(semanticItems));
 }
 
-UIColor *RCTPlatformColorFromSemanticItems(std::vector<std::string> &semanticItems)
+UIColor *_Nullable RCTPlatformColorFromSemanticItemsOrNil(std::vector<std::string> &semanticItems)
 {
   for (const auto &semanticCString : semanticItems) {
     NSString *semanticNSString = _NSStringFromCString(semanticCString);
@@ -206,7 +206,15 @@
     }
   }
 
-  return UIColor.clearColor;
+  return nil;
+}
+
+UIColor *RCTPlatformColorFromSemanticItems(std::vector<std::string> &semanticItems)
+{
+  // Non-null contract (e.g. for RCTPlatformColorComponentsFromSemanticItems);
+  // callers needing to detect a miss use the OrNil variant.
+  UIColor *uiColor = RCTPlatformColorFromSemanticItemsOrNil(semanticItems);
+  return uiColor != nil ? uiColor : UIColor.clearColor;
 }
 
 UIColor *RCTPlatformColorFromColor(const facebook::react::Color &color)