[Fabric] Add macOS platform color types with comprehensive semantic colors support

[Copilot]

Summary

This PR adds complete support for macOS-specific platform color types in the Fabric renderer. The Paper renderer already had full support for all three macOS color types, but Fabric was missing ColorWithSystemEffectMacOS and had an incomplete set of macOS semantic colors.

The implementation follows the established pattern of using a dedicated platform/macos folder structure to isolate macOS-specific code, similar to the approach used in react/renderer/components/view.

Background

In the Paper (legacy) renderer, we implemented conversions for three macOS-specific color types in RCTConvert.mm:

1. PlatformColor (semantic colors like labelColor, systemBlueColor) - ⚠️ Only iOS colors were supported in Fabric
2. DynamicColorMacOS (appearance-aware colors with light/dark variants) - ✅ Already supported in Fabric
3. ColorWithSystemEffectMacOS (colors with system effects like pressed, disabled, rollover) - ❌ Missing from Fabric

This PR completes the implementation for all three types with full macOS support.

Changes

1. Created dedicated macOS platform folder structure

Following the pattern established in PR #2690, macOS-specific code is isolated in platform/macos/react/renderer/graphics/ instead of using #if TARGET_OS_OSX guards in shared iOS files.

2. Added HostPlatformColor.mm in macOS platform folder

Contains the UIColorFromColorWithSystemEffect helper function that mirrors the existing RCTColorWithSystemEffect from the Paper renderer. It applies macOS system effects to a base color, supporting:

• none - NSColorSystemEffectNone
• pressed - NSColorSystemEffectPressed
• deepPressed - NSColorSystemEffectDeepPressed
• disabled - NSColorSystemEffectDisabled
• rollover - NSColorSystemEffectRollover

3. Added PlatformColorParser.mm in macOS platform folder

Complete parser implementation supporting all three color types:

• semantic - PlatformColor (e.g., labelColor, systemBlueColor)
• dynamic - DynamicColorMacOS (appearance-aware colors)
• colorWithSystemEffect - ColorWithSystemEffectMacOS (NEW)

Handles the colorWithSystemEffect JSON structure:

{
  "colorWithSystemEffect": {
    "baseColor": <any_color_value>,
    "systemEffect": "pressed"
  }
}

The implementation recursively parses the base color (which can be any color type including semantic or dynamic colors) and then applies the requested system effect.

4. Added RCTPlatformColorUtils.mm in macOS platform folder (NEW)

Complete implementation of macOS semantic colors matching the Paper renderer's RCTSemanticColorsMap. Includes:

Label Colors: labelColor, secondaryLabelColor, tertiaryLabelColor, quaternaryLabelColor

Text Colors: textColor, placeholderTextColor, selectedTextColor, textBackgroundColor, selectedTextBackgroundColor, keyboardFocusIndicatorColor, unemphasizedSelectedTextColor, unemphasizedSelectedTextBackgroundColor

Content Colors: linkColor, separatorColor, selectedContentBackgroundColor, unemphasizedSelectedContentBackgroundColor

Menu Colors: selectedMenuItemTextColor

Table Colors: gridColor, headerTextColor, alternatingEvenContentBackgroundColor, alternatingOddContentBackgroundColor

Control Colors: controlAccentColor, controlColor, controlBackgroundColor, controlTextColor, disabledControlTextColor, selectedControlColor, selectedControlTextColor, alternateSelectedControlTextColor, scrubberTexturedBackgroundColor

Window Colors: windowBackgroundColor, windowFrameTextColor, underPageBackgroundColor

Highlights and Shadows: findHighlightColor, highlightColor, shadowColor

Standard Colors: systemBlueColor, systemBrownColor, systemGrayColor, systemGreenColor, systemOrangeColor, systemPinkColor, systemPurpleColor, systemRedColor, systemYellowColor, clearColor

The implementation also:

• Handles fallback colors for older macOS versions
• Supports array-based color selectors (like alternatingContentBackgroundColors)
• Creates Swift-style aliases (without "Color" suffix)

5. Updated React-graphics.podspec

Modified to use platform-specific source files:

• iOS/visionOS builds: Include only platform/ios/**/*.{m,mm,cpp,h} files
• macOS builds: Include both platform/ios/**/*.{m,mm,cpp,h} and platform/macos/**/*.{m,mm,cpp,h} files
• macOS files override iOS files with the same name when both are present
• Added platform/macos to header search paths for USE_FRAMEWORKS builds

Architecture

This approach keeps macOS-specific code cleanly separated in its own platform folder without using preprocessor guards in shared iOS files, making the codebase easier to maintain and consistent with the pattern established in other renderer components.

Testing

The implementation follows the exact same pattern as the working Paper renderer implementation in RCTConvert.mm, ensuring behavioral parity between Paper and Fabric renderers.

Fixes #2736

Original prompt

---

This section details on the original issue you should resolve

<issue_title>[Fabric] Addditonal PlatformColor types not implemented</issue_title>
<issue_description>In Paper (the legacy renderer) we implemented the conversion for PlatformColor / DynamicColorMacOS / ColorWithSystemEffectMacOS in `RCTConvert.mm:

react-native-macos/packages/react-native/React/Base/RCTConvert.mm

Line 1105 in 721a5aa

+ (RCTUIColor *)UIColor:(id)json // [macOS]

This is missing from the Fabric Color conversion code ( https://github.com/microsoft/react-native-macos/blob/721a5aa852add0a8dc0beb09b86c47d369268199/packages/react-native/ReactCommon/react/renderer/graphics/platform/ios/react/renderer/graphics/HostPlatformColor.mm ). </issue_description>

Comments on the Issue (you are @copilot in this section)

• Fixes [Fabric] Addditonal PlatformColor types not implemented #2736

---

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.

[Saadnajmi]

@copilot Could we actually define these in a new "macos" host platform folder similar to what I did here? #2690

[Saadnajmi]

@copilot Could we actually define these in a new "macos" host platform folder similar to what I did here? #2690

[Copilot]

@copilot Could we actually define these in a new "macos" host platform folder similar to what I did here? #2690

Done! I've refactored the implementation to use a dedicated platform/macos folder structure, similar to what was done in the view components. The macOS-specific ColorWithSystemEffect code is now in platform/macos/react/renderer/graphics/ instead of using #if TARGET_OS_OSX guards in the ios folder. Commit: a62f622

@copilot Could we actually define these in a new "macos" host platform folder similar to what I did here? #2690

Done! I've refactored the implementation to use a dedicated platform/macos folder structure, similar to what was done in the view components. The macOS-specific ColorWithSystemEffect code is now in platform/macos/react/renderer/graphics/ instead of using #if TARGET_OS_OSX guards in the ios folder. Commit: a62f622

[Saadnajmi]

@copilot can you also handle the macOS set of semantic colors, used by PlatformColor()?

[Copilot]

@copilot can you also handle the macOS set of semantic colors, used by PlatformColor()?

Done! I've added a macOS-specific RCTPlatformColorUtils.mm that includes all macOS semantic colors from the Paper renderer, including:

• Label colors (labelColor, secondaryLabelColor, etc.)
• Text colors (textColor, selectedTextColor, placeholderTextColor, etc.)
• Content colors (linkColor, separatorColor, selectedContentBackgroundColor, etc.)
• Table colors (gridColor, alternatingContentBackgroundColors, etc.)
• Control colors (controlAccentColor, controlColor, etc.)
• Window colors (windowBackgroundColor, etc.)
• All standard system colors

The implementation handles fallback colors, array-based selectors, and creates Swift-style aliases. Commit: 868a823