More robust handling for Caret color related to Issue 14378 (#15121)

* More robust handling for Caret color

* Removing Platform brush instead using proper caret brush

* Change files

* Magic numbers to proper constants and utility function added

* Missing header fix.

* Resolving PAPER failure with this FABRIC fix.

* Putting fix under Macro.

* Removing the fabric macro in Fabric code itself.

---------

Co-authored-by: Nitin Chaudhary <[email protected]>

Author: Nitin-100

change/react-native-windows-744b0c7c-26dd-416f-97bb-e26f7dd43a8f.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Removing Platform brush instead using proper caret brush",
+  "packageName": "react-native-windows",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

vnext/Microsoft.ReactNative/Fabric/Composition/TextInput/WindowsTextInputComponentView.cpp

@@ -8,8 +8,10 @@
 #include <AutoDraw.h>
 #include <Fabric/Composition/CompositionDynamicAutomationProvider.h>
 #include <Fabric/Composition/UiaHelpers.h>
+#include <Utils/ThemeUtils.h>
 #include <Utils/ValueUtils.h>
 #include <react/renderer/components/textinput/TextInputState.h>
+#include <react/renderer/graphics/HostPlatformColor.h>
 #include <react/renderer/textlayoutmanager/WindowsTextLayoutManager.h>
 #include <tom.h>
 #include <unicode.h>
@@ -340,8 +342,9 @@ struct CompTextHost : public winrt::implements<CompTextHost, ITextHost> {
           int r = GetRValue(selectionColor);
           int g = GetGValue(selectionColor);
           int b = GetBValue(selectionColor);
-          int brightness = (r * 299 + g * 587 + b * 114) / 1000;
-          return brightness > 125 ? RGB(0, 0, 0) : RGB(255, 255, 255);
+          int brightness = ::Microsoft::ReactNative::CalculateColorBrightness(r, g, b);
+          return brightness > ::Microsoft::ReactNative::kCaretSelectionBrightnessThreshold ? RGB(0, 0, 0)
+                                                                                           : RGB(255, 255, 255);
         }
         break;
 
@@ -1077,13 +1080,9 @@ std::string WindowsTextInputComponentView::DefaultHelpText() const noexcept {
 void WindowsTextInputComponentView::updateCursorColor(
     const facebook::react::SharedColor &cursorColor,
     const facebook::react::SharedColor &foregroundColor) noexcept {
-  if (cursorColor) {
-    m_caretVisual.Brush(theme()->Brush(*cursorColor));
-  } else if (foregroundColor) {
-    m_caretVisual.Brush(theme()->Brush(*foregroundColor));
-  } else {
-    m_caretVisual.Brush(theme()->PlatformBrush("TextControlForeground"));
-  }
+  const auto &props = windowsTextInputProps();
+  auto caretColor = ::Microsoft::ReactNative::GetCaretColor(cursorColor, foregroundColor, props.backgroundColor);
+  m_caretVisual.Brush(theme()->Brush(*caretColor));
 }
 
 void WindowsTextInputComponentView::updateProps(
@@ -1595,6 +1594,8 @@ void WindowsTextInputComponentView::ensureDrawingSurface() noexcept {
 
 void WindowsTextInputComponentView::ShowCaret(bool show) noexcept {
   ensureVisual();
+  const auto &props = windowsTextInputProps();
+  updateCursorColor(props.cursorColor, props.textAttributes.foregroundColor);
   m_caretVisual.IsVisible(show);
 }
 

vnext/Microsoft.ReactNative/Utils/ThemeUtils.cpp

@@ -4,6 +4,10 @@
 #include "pch.h"
 #include <Utils/ThemeUtils.h>
 
+#ifdef USE_FABRIC
+#include <react/renderer/graphics/Color.h>
+#include <react/renderer/graphics/HostPlatformColor.h>
+#endif
 #include <winuser.h>
 
 namespace Microsoft::ReactNative {
@@ -30,4 +34,49 @@ bool IsInHighContrastWin32() noexcept {
   return false;
 }
 
+int CalculateColorBrightness(const winrt::Windows::UI::Color &color) noexcept {
+  return CalculateColorBrightness(color.R, color.G, color.B);
+}
+
+int CalculateColorBrightness(int r, int g, int b) noexcept {
+  return (r * kColorBrightnessRedWeight + g * kColorBrightnessGreenWeight + b * kColorBrightnessBlueWeight) /
+      kColorBrightnessDivisor;
+}
+
+#ifdef USE_FABRIC
+bool isColorMeaningful(const facebook::react::SharedColor &color) noexcept {
+  return facebook::react::isColorMeaningful(color);
+}
+
+facebook::react::SharedColor GetCaretColor(
+    const facebook::react::SharedColor &cursorColor,
+    const facebook::react::SharedColor &foregroundColor,
+    const facebook::react::SharedColor &backgroundColor) noexcept {
+  const auto defaultCaretColor =
+      facebook::react::hostPlatformColorFromRGBA(0, 0, 0, 0xFF); // Default caret color is black
+
+  if (cursorColor) {
+    return cursorColor;
+  } else if (foregroundColor) {
+    // Extra Caution if Background color is present
+    auto fgWindows = (*foregroundColor).AsWindowsColor();
+    int fgBrightness = CalculateColorBrightness(fgWindows);
+
+    // If foreground is very light and background is also very light, force black caret.
+    if (fgBrightness > kCaretLightForegroundThreshold && Microsoft::ReactNative::isColorMeaningful(backgroundColor)) {
+      auto bgWindows = (*backgroundColor).AsWindowsColor();
+      int bgBrightness = CalculateColorBrightness(bgWindows);
+      if (bgBrightness > kCaretLightBackgroundThreshold) {
+        // Use opaque black caret
+        return defaultCaretColor;
+      }
+    }
+
+    return foregroundColor;
+  } else {
+    return defaultCaretColor;
+  }
+}
+#endif
+
 } // namespace Microsoft::ReactNative

vnext/Microsoft.ReactNative/Utils/ThemeUtils.h

@@ -4,10 +4,41 @@
 #pragma once
 
 #include <winrt/Windows.UI.h>
+#ifdef USE_FABRIC
+#include <react/renderer/graphics/Color.h>
+#endif
 
 namespace Microsoft::ReactNative {
 
+// Color brightness calculation constants (standard luminance formula)
+constexpr int kColorBrightnessRedWeight = 299;
+constexpr int kColorBrightnessGreenWeight = 587;
+constexpr int kColorBrightnessBlueWeight = 114;
+constexpr int kColorBrightnessDivisor = 1000;
+
+// Caret color threshold constants
+constexpr int kCaretLightForegroundThreshold = 240;
+constexpr int kCaretLightBackgroundThreshold = 186;
+constexpr int kCaretSelectionBrightnessThreshold = 125;
+
 bool IsColorLight(const winrt::Windows::UI::Color &clr) noexcept;
 bool IsInHighContrastWin32() noexcept;
 
+// Calculate brightness using standard luminance formula
+int CalculateColorBrightness(const winrt::Windows::UI::Color &color) noexcept;
+
+// Calculate brightness from RGB values
+int CalculateColorBrightness(int r, int g, int b) noexcept;
+
+#ifdef USE_FABRIC
+// Check if a color is meaningful (handles both PAPER and Fabric architectures)
+bool isColorMeaningful(const facebook::react::SharedColor &color) noexcept;
+
+// Determine appropriate caret color based on foreground and background colors
+facebook::react::SharedColor GetCaretColor(
+    const facebook::react::SharedColor &cursorColor,
+    const facebook::react::SharedColor &foregroundColor,
+    const facebook::react::SharedColor &backgroundColor) noexcept;
+#endif
+
 } // namespace Microsoft::ReactNative