From 9ccccd62425404d4622d809da6c207a65f6e9aad Mon Sep 17 00:00:00 2001 From: Andrew Coates <30809111+acoates-ms@users.noreply.github.com> Date: Fri, 31 Jan 2025 14:37:37 -0800 Subject: [PATCH] [Fabric] Fix PlatformColor (#14325) * Fix platform color * Change files * Add missing theme colors * snapshots --- ...-9a0e5c82-b824-4c1d-92c9-87c8c46c6c26.json | 7 + .../ButtonComponentTest.test.ts.snap | 252 ++++++++++-------- .../Fabric/Composition/Theme.cpp | 5 + .../renderer/graphics/PlatformColorParser.h | 2 +- 4 files changed, 153 insertions(+), 113 deletions(-) create mode 100644 change/react-native-windows-9a0e5c82-b824-4c1d-92c9-87c8c46c6c26.json diff --git a/change/react-native-windows-9a0e5c82-b824-4c1d-92c9-87c8c46c6c26.json b/change/react-native-windows-9a0e5c82-b824-4c1d-92c9-87c8c46c6c26.json new file mode 100644 index 00000000000..a0c4986c483 --- /dev/null +++ b/change/react-native-windows-9a0e5c82-b824-4c1d-92c9-87c8c46c6c26.json @@ -0,0 +1,7 @@ +{ + "type": "prerelease", + "comment": "Fix platform color", + "packageName": "react-native-windows", + "email": "30809111+acoates-ms@users.noreply.github.com", + "dependentChangeType": "patch" +} diff --git a/packages/e2e-test-app-fabric/test/__snapshots__/ButtonComponentTest.test.ts.snap b/packages/e2e-test-app-fabric/test/__snapshots__/ButtonComponentTest.test.ts.snap index 5684dfbf035..e97139f6aa0 100644 --- a/packages/e2e-test-app-fabric/test/__snapshots__/ButtonComponentTest.test.ts.snap +++ b/packages/e2e-test-app-fabric/test/__snapshots__/ButtonComponentTest.test.ts.snap @@ -47,6 +47,10 @@ exports[`Button Tests Buttons can be disabled 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(249, 249, 249, 77)", + }, "Offset": "0, 0, 0", "Size": "916, 37", "Visual Type": "SpriteVisual", @@ -54,7 +58,7 @@ exports[`Button Tests Buttons can be disabled 1`] = ` { "Brush": { "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", + "Color": "rgba(0, 0, 0, 15)", }, "Offset": "0, 0, 0", "Size": "4, 4", @@ -63,7 +67,7 @@ exports[`Button Tests Buttons can be disabled 1`] = ` { "Brush": { "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", + "Color": "rgba(0, 0, 0, 15)", }, "Offset": "4, 0, 0", "Size": "908, 1", @@ -72,7 +76,7 @@ exports[`Button Tests Buttons can be disabled 1`] = ` { "Brush": { "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", + "Color": "rgba(0, 0, 0, 15)", }, "Offset": "-4, 0, 0", "Size": "4, 4", @@ -81,7 +85,7 @@ exports[`Button Tests Buttons can be disabled 1`] = ` { "Brush": { "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", + "Color": "rgba(0, 0, 0, 15)", }, "Offset": "-1, 4, 0", "Size": "1, 28", @@ -90,7 +94,7 @@ exports[`Button Tests Buttons can be disabled 1`] = ` { "Brush": { "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", + "Color": "rgba(0, 0, 0, 15)", }, "Offset": "-4, -5, 0", "Size": "4, 5", @@ -99,7 +103,7 @@ exports[`Button Tests Buttons can be disabled 1`] = ` { "Brush": { "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", + "Color": "rgba(0, 0, 0, 15)", }, "Offset": "4, -2, 0", "Size": "908, 2", @@ -108,7 +112,7 @@ exports[`Button Tests Buttons can be disabled 1`] = ` { "Brush": { "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", + "Color": "rgba(0, 0, 0, 15)", }, "Offset": "0, -5, 0", "Size": "4, 5", @@ -117,7 +121,7 @@ exports[`Button Tests Buttons can be disabled 1`] = ` { "Brush": { "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", + "Color": "rgba(0, 0, 0, 15)", }, "Offset": "0, 4, 0", "Size": "1, 28", @@ -201,7 +205,7 @@ exports[`Button Tests Buttons can have accessibility labels 1`] = ` { "Brush": { "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", + "Color": "rgba(0, 0, 0, 41)", }, "Offset": "0, 0, 0", "Size": "4, 4", @@ -210,7 +214,7 @@ exports[`Button Tests Buttons can have accessibility labels 1`] = ` { "Brush": { "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", + "Color": "rgba(0, 0, 0, 41)", }, "Offset": "4, 0, 0", "Size": "908, 1", @@ -219,7 +223,7 @@ exports[`Button Tests Buttons can have accessibility labels 1`] = ` { "Brush": { "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", + "Color": "rgba(0, 0, 0, 41)", }, "Offset": "-4, 0, 0", "Size": "4, 4", @@ -228,7 +232,7 @@ exports[`Button Tests Buttons can have accessibility labels 1`] = ` { "Brush": { "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", + "Color": "rgba(0, 0, 0, 41)", }, "Offset": "-1, 4, 0", "Size": "1, 28", @@ -237,7 +241,7 @@ exports[`Button Tests Buttons can have accessibility labels 1`] = ` { "Brush": { "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", + "Color": "rgba(0, 0, 0, 41)", }, "Offset": "-4, -5, 0", "Size": "4, 5", @@ -246,7 +250,7 @@ exports[`Button Tests Buttons can have accessibility labels 1`] = ` { "Brush": { "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", + "Color": "rgba(0, 0, 0, 41)", }, "Offset": "4, -2, 0", "Size": "908, 2", @@ -255,7 +259,7 @@ exports[`Button Tests Buttons can have accessibility labels 1`] = ` { "Brush": { "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", + "Color": "rgba(0, 0, 0, 41)", }, "Offset": "0, -5, 0", "Size": "4, 5", @@ -264,7 +268,7 @@ exports[`Button Tests Buttons can have accessibility labels 1`] = ` { "Brush": { "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", + "Color": "rgba(0, 0, 0, 41)", }, "Offset": "0, 4, 0", "Size": "1, 28", @@ -323,6 +327,10 @@ exports[`Button Tests Buttons can have accessibility props 1`] = ` ], }, "Visual Tree": { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(255, 255, 255, 179)", + }, "Comment": "accessibility_props", "Offset": "0, 0, 0", "Size": "916, 37", @@ -331,7 +339,7 @@ exports[`Button Tests Buttons can have accessibility props 1`] = ` { "Brush": { "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", + "Color": "rgba(0, 0, 0, 41)", }, "Offset": "0, 0, 0", "Size": "4, 4", @@ -340,7 +348,7 @@ exports[`Button Tests Buttons can have accessibility props 1`] = ` { "Brush": { "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", + "Color": "rgba(0, 0, 0, 41)", }, "Offset": "4, 0, 0", "Size": "908, 1", @@ -349,7 +357,7 @@ exports[`Button Tests Buttons can have accessibility props 1`] = ` { "Brush": { "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", + "Color": "rgba(0, 0, 0, 41)", }, "Offset": "-4, 0, 0", "Size": "4, 4", @@ -358,7 +366,7 @@ exports[`Button Tests Buttons can have accessibility props 1`] = ` { "Brush": { "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", + "Color": "rgba(0, 0, 0, 41)", }, "Offset": "-1, 4, 0", "Size": "1, 28", @@ -367,7 +375,7 @@ exports[`Button Tests Buttons can have accessibility props 1`] = ` { "Brush": { "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", + "Color": "rgba(0, 0, 0, 41)", }, "Offset": "-4, -5, 0", "Size": "4, 5", @@ -376,7 +384,7 @@ exports[`Button Tests Buttons can have accessibility props 1`] = ` { "Brush": { "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", + "Color": "rgba(0, 0, 0, 41)", }, "Offset": "4, -2, 0", "Size": "908, 2", @@ -385,7 +393,7 @@ exports[`Button Tests Buttons can have accessibility props 1`] = ` { "Brush": { "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", + "Color": "rgba(0, 0, 0, 41)", }, "Offset": "0, -5, 0", "Size": "4, 5", @@ -394,7 +402,7 @@ exports[`Button Tests Buttons can have accessibility props 1`] = ` { "Brush": { "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", + "Color": "rgba(0, 0, 0, 41)", }, "Offset": "0, 4, 0", "Size": "1, 28", @@ -464,6 +472,10 @@ exports[`Button Tests Buttons can have accessibility states 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(249, 249, 249, 77)", + }, "Offset": "0, 0, 0", "Size": "916, 37", "Visual Type": "SpriteVisual", @@ -471,7 +483,7 @@ exports[`Button Tests Buttons can have accessibility states 1`] = ` { "Brush": { "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", + "Color": "rgba(0, 0, 0, 15)", }, "Offset": "0, 0, 0", "Size": "4, 4", @@ -480,7 +492,7 @@ exports[`Button Tests Buttons can have accessibility states 1`] = ` { "Brush": { "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", + "Color": "rgba(0, 0, 0, 15)", }, "Offset": "4, 0, 0", "Size": "908, 1", @@ -489,7 +501,7 @@ exports[`Button Tests Buttons can have accessibility states 1`] = ` { "Brush": { "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", + "Color": "rgba(0, 0, 0, 15)", }, "Offset": "-4, 0, 0", "Size": "4, 4", @@ -498,7 +510,7 @@ exports[`Button Tests Buttons can have accessibility states 1`] = ` { "Brush": { "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", + "Color": "rgba(0, 0, 0, 15)", }, "Offset": "-1, 4, 0", "Size": "1, 28", @@ -507,7 +519,7 @@ exports[`Button Tests Buttons can have accessibility states 1`] = ` { "Brush": { "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", + "Color": "rgba(0, 0, 0, 15)", }, "Offset": "-4, -5, 0", "Size": "4, 5", @@ -516,7 +528,7 @@ exports[`Button Tests Buttons can have accessibility states 1`] = ` { "Brush": { "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", + "Color": "rgba(0, 0, 0, 15)", }, "Offset": "4, -2, 0", "Size": "908, 2", @@ -525,7 +537,7 @@ exports[`Button Tests Buttons can have accessibility states 1`] = ` { "Brush": { "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", + "Color": "rgba(0, 0, 0, 15)", }, "Offset": "0, -5, 0", "Size": "4, 5", @@ -534,7 +546,7 @@ exports[`Button Tests Buttons can have accessibility states 1`] = ` { "Brush": { "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", + "Color": "rgba(0, 0, 0, 15)", }, "Offset": "0, 4, 0", "Size": "1, 28", @@ -618,7 +630,7 @@ exports[`Button Tests Buttons can have custom colors 1`] = ` { "Brush": { "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", + "Color": "rgba(0, 0, 0, 41)", }, "Offset": "0, 0, 0", "Size": "4, 4", @@ -627,7 +639,7 @@ exports[`Button Tests Buttons can have custom colors 1`] = ` { "Brush": { "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", + "Color": "rgba(0, 0, 0, 41)", }, "Offset": "4, 0, 0", "Size": "908, 1", @@ -636,7 +648,7 @@ exports[`Button Tests Buttons can have custom colors 1`] = ` { "Brush": { "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", + "Color": "rgba(0, 0, 0, 41)", }, "Offset": "-4, 0, 0", "Size": "4, 4", @@ -645,7 +657,7 @@ exports[`Button Tests Buttons can have custom colors 1`] = ` { "Brush": { "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", + "Color": "rgba(0, 0, 0, 41)", }, "Offset": "-1, 4, 0", "Size": "1, 28", @@ -654,7 +666,7 @@ exports[`Button Tests Buttons can have custom colors 1`] = ` { "Brush": { "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", + "Color": "rgba(0, 0, 0, 41)", }, "Offset": "-4, -5, 0", "Size": "4, 5", @@ -663,7 +675,7 @@ exports[`Button Tests Buttons can have custom colors 1`] = ` { "Brush": { "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", + "Color": "rgba(0, 0, 0, 41)", }, "Offset": "4, -2, 0", "Size": "908, 2", @@ -672,7 +684,7 @@ exports[`Button Tests Buttons can have custom colors 1`] = ` { "Brush": { "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", + "Color": "rgba(0, 0, 0, 41)", }, "Offset": "0, -5, 0", "Size": "4, 5", @@ -681,7 +693,7 @@ exports[`Button Tests Buttons can have custom colors 1`] = ` { "Brush": { "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", + "Color": "rgba(0, 0, 0, 41)", }, "Offset": "0, 4, 0", "Size": "1, 28", @@ -725,6 +737,10 @@ exports[`Button Tests Buttons can have custom focusable and accessible props 1`] ], }, "Visual Tree": { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(255, 255, 255, 179)", + }, "Comment": "accessible_false_button", "Offset": "0, 0, 0", "Size": "916, 37", @@ -733,7 +749,7 @@ exports[`Button Tests Buttons can have custom focusable and accessible props 1`] { "Brush": { "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", + "Color": "rgba(0, 0, 0, 41)", }, "Offset": "0, 0, 0", "Size": "4, 4", @@ -742,7 +758,7 @@ exports[`Button Tests Buttons can have custom focusable and accessible props 1`] { "Brush": { "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", + "Color": "rgba(0, 0, 0, 41)", }, "Offset": "4, 0, 0", "Size": "908, 1", @@ -751,7 +767,7 @@ exports[`Button Tests Buttons can have custom focusable and accessible props 1`] { "Brush": { "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", + "Color": "rgba(0, 0, 0, 41)", }, "Offset": "-4, 0, 0", "Size": "4, 4", @@ -760,7 +776,7 @@ exports[`Button Tests Buttons can have custom focusable and accessible props 1`] { "Brush": { "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", + "Color": "rgba(0, 0, 0, 41)", }, "Offset": "-1, 4, 0", "Size": "1, 28", @@ -769,7 +785,7 @@ exports[`Button Tests Buttons can have custom focusable and accessible props 1`] { "Brush": { "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", + "Color": "rgba(0, 0, 0, 41)", }, "Offset": "-4, -5, 0", "Size": "4, 5", @@ -778,7 +794,7 @@ exports[`Button Tests Buttons can have custom focusable and accessible props 1`] { "Brush": { "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", + "Color": "rgba(0, 0, 0, 41)", }, "Offset": "4, -2, 0", "Size": "908, 2", @@ -787,7 +803,7 @@ exports[`Button Tests Buttons can have custom focusable and accessible props 1`] { "Brush": { "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", + "Color": "rgba(0, 0, 0, 41)", }, "Offset": "0, -5, 0", "Size": "4, 5", @@ -796,7 +812,7 @@ exports[`Button Tests Buttons can have custom focusable and accessible props 1`] { "Brush": { "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", + "Color": "rgba(0, 0, 0, 41)", }, "Offset": "0, 4, 0", "Size": "1, 28", @@ -850,6 +866,10 @@ exports[`Button Tests Buttons can have custom focusable and accessible props 2`] ], }, "Visual Tree": { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(255, 255, 255, 179)", + }, "Comment": "focusable_false_button", "Offset": "0, 0, 0", "Size": "916, 37", @@ -858,7 +878,7 @@ exports[`Button Tests Buttons can have custom focusable and accessible props 2`] { "Brush": { "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", + "Color": "rgba(0, 0, 0, 41)", }, "Offset": "0, 0, 0", "Size": "4, 4", @@ -867,7 +887,7 @@ exports[`Button Tests Buttons can have custom focusable and accessible props 2`] { "Brush": { "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", + "Color": "rgba(0, 0, 0, 41)", }, "Offset": "4, 0, 0", "Size": "908, 1", @@ -876,7 +896,7 @@ exports[`Button Tests Buttons can have custom focusable and accessible props 2`] { "Brush": { "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", + "Color": "rgba(0, 0, 0, 41)", }, "Offset": "-4, 0, 0", "Size": "4, 4", @@ -885,7 +905,7 @@ exports[`Button Tests Buttons can have custom focusable and accessible props 2`] { "Brush": { "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", + "Color": "rgba(0, 0, 0, 41)", }, "Offset": "-1, 4, 0", "Size": "1, 28", @@ -894,7 +914,7 @@ exports[`Button Tests Buttons can have custom focusable and accessible props 2`] { "Brush": { "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", + "Color": "rgba(0, 0, 0, 41)", }, "Offset": "-4, -5, 0", "Size": "4, 5", @@ -903,7 +923,7 @@ exports[`Button Tests Buttons can have custom focusable and accessible props 2`] { "Brush": { "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", + "Color": "rgba(0, 0, 0, 41)", }, "Offset": "4, -2, 0", "Size": "908, 2", @@ -912,7 +932,7 @@ exports[`Button Tests Buttons can have custom focusable and accessible props 2`] { "Brush": { "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", + "Color": "rgba(0, 0, 0, 41)", }, "Offset": "0, -5, 0", "Size": "4, 5", @@ -921,7 +941,7 @@ exports[`Button Tests Buttons can have custom focusable and accessible props 2`] { "Brush": { "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", + "Color": "rgba(0, 0, 0, 41)", }, "Offset": "0, 4, 0", "Size": "1, 28", @@ -961,6 +981,10 @@ exports[`Button Tests Buttons can have custom focusable and accessible props 3`] ], }, "Visual Tree": { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(255, 255, 255, 179)", + }, "Comment": "accessible_focusable_false_button", "Offset": "0, 0, 0", "Size": "916, 37", @@ -969,7 +993,7 @@ exports[`Button Tests Buttons can have custom focusable and accessible props 3`] { "Brush": { "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", + "Color": "rgba(0, 0, 0, 41)", }, "Offset": "0, 0, 0", "Size": "4, 4", @@ -978,7 +1002,7 @@ exports[`Button Tests Buttons can have custom focusable and accessible props 3`] { "Brush": { "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", + "Color": "rgba(0, 0, 0, 41)", }, "Offset": "4, 0, 0", "Size": "908, 1", @@ -987,7 +1011,7 @@ exports[`Button Tests Buttons can have custom focusable and accessible props 3`] { "Brush": { "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", + "Color": "rgba(0, 0, 0, 41)", }, "Offset": "-4, 0, 0", "Size": "4, 4", @@ -996,7 +1020,7 @@ exports[`Button Tests Buttons can have custom focusable and accessible props 3`] { "Brush": { "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", + "Color": "rgba(0, 0, 0, 41)", }, "Offset": "-1, 4, 0", "Size": "1, 28", @@ -1005,7 +1029,7 @@ exports[`Button Tests Buttons can have custom focusable and accessible props 3`] { "Brush": { "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", + "Color": "rgba(0, 0, 0, 41)", }, "Offset": "-4, -5, 0", "Size": "4, 5", @@ -1014,7 +1038,7 @@ exports[`Button Tests Buttons can have custom focusable and accessible props 3`] { "Brush": { "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", + "Color": "rgba(0, 0, 0, 41)", }, "Offset": "4, -2, 0", "Size": "908, 2", @@ -1023,7 +1047,7 @@ exports[`Button Tests Buttons can have custom focusable and accessible props 3`] { "Brush": { "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", + "Color": "rgba(0, 0, 0, 41)", }, "Offset": "0, -5, 0", "Size": "4, 5", @@ -1032,7 +1056,7 @@ exports[`Button Tests Buttons can have custom focusable and accessible props 3`] { "Brush": { "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", + "Color": "rgba(0, 0, 0, 41)", }, "Offset": "0, 4, 0", "Size": "1, 28", @@ -1170,7 +1194,7 @@ exports[`Button Tests Buttons can have flexbox styling 1`] = ` { "Brush": { "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", + "Color": "rgba(0, 0, 0, 41)", }, "Offset": "0, 0, 0", "Size": "4, 4", @@ -1179,7 +1203,7 @@ exports[`Button Tests Buttons can have flexbox styling 1`] = ` { "Brush": { "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", + "Color": "rgba(0, 0, 0, 41)", }, "Offset": "4, 0, 0", "Size": "51, 1", @@ -1188,7 +1212,7 @@ exports[`Button Tests Buttons can have flexbox styling 1`] = ` { "Brush": { "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", + "Color": "rgba(0, 0, 0, 41)", }, "Offset": "-4, 0, 0", "Size": "4, 4", @@ -1197,7 +1221,7 @@ exports[`Button Tests Buttons can have flexbox styling 1`] = ` { "Brush": { "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", + "Color": "rgba(0, 0, 0, 41)", }, "Offset": "-1, 4, 0", "Size": "1, 28", @@ -1206,7 +1230,7 @@ exports[`Button Tests Buttons can have flexbox styling 1`] = ` { "Brush": { "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", + "Color": "rgba(0, 0, 0, 41)", }, "Offset": "-4, -5, 0", "Size": "4, 5", @@ -1215,7 +1239,7 @@ exports[`Button Tests Buttons can have flexbox styling 1`] = ` { "Brush": { "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", + "Color": "rgba(0, 0, 0, 41)", }, "Offset": "4, -2, 0", "Size": "51, 2", @@ -1224,7 +1248,7 @@ exports[`Button Tests Buttons can have flexbox styling 1`] = ` { "Brush": { "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", + "Color": "rgba(0, 0, 0, 41)", }, "Offset": "0, -5, 0", "Size": "4, 5", @@ -1233,7 +1257,7 @@ exports[`Button Tests Buttons can have flexbox styling 1`] = ` { "Brush": { "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", + "Color": "rgba(0, 0, 0, 41)", }, "Offset": "0, 4, 0", "Size": "1, 28", @@ -1287,7 +1311,7 @@ exports[`Button Tests Buttons can have flexbox styling 1`] = ` { "Brush": { "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", + "Color": "rgba(0, 0, 0, 41)", }, "Offset": "0, 0, 0", "Size": "4, 4", @@ -1296,7 +1320,7 @@ exports[`Button Tests Buttons can have flexbox styling 1`] = ` { "Brush": { "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", + "Color": "rgba(0, 0, 0, 41)", }, "Offset": "4, 0, 0", "Size": "54, 1", @@ -1305,7 +1329,7 @@ exports[`Button Tests Buttons can have flexbox styling 1`] = ` { "Brush": { "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", + "Color": "rgba(0, 0, 0, 41)", }, "Offset": "-4, 0, 0", "Size": "4, 4", @@ -1314,7 +1338,7 @@ exports[`Button Tests Buttons can have flexbox styling 1`] = ` { "Brush": { "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", + "Color": "rgba(0, 0, 0, 41)", }, "Offset": "-1, 4, 0", "Size": "1, 28", @@ -1323,7 +1347,7 @@ exports[`Button Tests Buttons can have flexbox styling 1`] = ` { "Brush": { "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", + "Color": "rgba(0, 0, 0, 41)", }, "Offset": "-4, -5, 0", "Size": "4, 5", @@ -1332,7 +1356,7 @@ exports[`Button Tests Buttons can have flexbox styling 1`] = ` { "Brush": { "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", + "Color": "rgba(0, 0, 0, 41)", }, "Offset": "4, -2, 0", "Size": "54, 2", @@ -1341,7 +1365,7 @@ exports[`Button Tests Buttons can have flexbox styling 1`] = ` { "Brush": { "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", + "Color": "rgba(0, 0, 0, 41)", }, "Offset": "0, -5, 0", "Size": "4, 5", @@ -1350,7 +1374,7 @@ exports[`Button Tests Buttons can have flexbox styling 1`] = ` { "Brush": { "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", + "Color": "rgba(0, 0, 0, 41)", }, "Offset": "0, 4, 0", "Size": "1, 28", @@ -1528,7 +1552,7 @@ exports[`Button Tests Buttons can have flexbox styling with three buttons 1`] = { "Brush": { "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", + "Color": "rgba(0, 0, 0, 41)", }, "Offset": "0, 0, 0", "Size": "4, 4", @@ -1537,7 +1561,7 @@ exports[`Button Tests Buttons can have flexbox styling with three buttons 1`] = { "Brush": { "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", + "Color": "rgba(0, 0, 0, 41)", }, "Offset": "4, 0, 0", "Size": "51, 1", @@ -1546,7 +1570,7 @@ exports[`Button Tests Buttons can have flexbox styling with three buttons 1`] = { "Brush": { "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", + "Color": "rgba(0, 0, 0, 41)", }, "Offset": "-4, 0, 0", "Size": "4, 4", @@ -1555,7 +1579,7 @@ exports[`Button Tests Buttons can have flexbox styling with three buttons 1`] = { "Brush": { "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", + "Color": "rgba(0, 0, 0, 41)", }, "Offset": "-1, 4, 0", "Size": "1, 28", @@ -1564,7 +1588,7 @@ exports[`Button Tests Buttons can have flexbox styling with three buttons 1`] = { "Brush": { "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", + "Color": "rgba(0, 0, 0, 41)", }, "Offset": "-4, -5, 0", "Size": "4, 5", @@ -1573,7 +1597,7 @@ exports[`Button Tests Buttons can have flexbox styling with three buttons 1`] = { "Brush": { "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", + "Color": "rgba(0, 0, 0, 41)", }, "Offset": "4, -2, 0", "Size": "51, 2", @@ -1582,7 +1606,7 @@ exports[`Button Tests Buttons can have flexbox styling with three buttons 1`] = { "Brush": { "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", + "Color": "rgba(0, 0, 0, 41)", }, "Offset": "0, -5, 0", "Size": "4, 5", @@ -1591,7 +1615,7 @@ exports[`Button Tests Buttons can have flexbox styling with three buttons 1`] = { "Brush": { "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", + "Color": "rgba(0, 0, 0, 41)", }, "Offset": "0, 4, 0", "Size": "1, 28", @@ -1645,7 +1669,7 @@ exports[`Button Tests Buttons can have flexbox styling with three buttons 1`] = { "Brush": { "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", + "Color": "rgba(0, 0, 0, 41)", }, "Offset": "0, 0, 0", "Size": "4, 4", @@ -1654,7 +1678,7 @@ exports[`Button Tests Buttons can have flexbox styling with three buttons 1`] = { "Brush": { "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", + "Color": "rgba(0, 0, 0, 41)", }, "Offset": "4, 0, 0", "Size": "97, 1", @@ -1663,7 +1687,7 @@ exports[`Button Tests Buttons can have flexbox styling with three buttons 1`] = { "Brush": { "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", + "Color": "rgba(0, 0, 0, 41)", }, "Offset": "-4, 0, 0", "Size": "4, 4", @@ -1672,7 +1696,7 @@ exports[`Button Tests Buttons can have flexbox styling with three buttons 1`] = { "Brush": { "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", + "Color": "rgba(0, 0, 0, 41)", }, "Offset": "-1, 4, 0", "Size": "1, 28", @@ -1681,7 +1705,7 @@ exports[`Button Tests Buttons can have flexbox styling with three buttons 1`] = { "Brush": { "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", + "Color": "rgba(0, 0, 0, 41)", }, "Offset": "-4, -5, 0", "Size": "4, 5", @@ -1690,7 +1714,7 @@ exports[`Button Tests Buttons can have flexbox styling with three buttons 1`] = { "Brush": { "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", + "Color": "rgba(0, 0, 0, 41)", }, "Offset": "4, -2, 0", "Size": "97, 2", @@ -1699,7 +1723,7 @@ exports[`Button Tests Buttons can have flexbox styling with three buttons 1`] = { "Brush": { "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", + "Color": "rgba(0, 0, 0, 41)", }, "Offset": "0, -5, 0", "Size": "4, 5", @@ -1708,7 +1732,7 @@ exports[`Button Tests Buttons can have flexbox styling with three buttons 1`] = { "Brush": { "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", + "Color": "rgba(0, 0, 0, 41)", }, "Offset": "0, 4, 0", "Size": "1, 28", @@ -1762,7 +1786,7 @@ exports[`Button Tests Buttons can have flexbox styling with three buttons 1`] = { "Brush": { "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", + "Color": "rgba(0, 0, 0, 41)", }, "Offset": "0, 0, 0", "Size": "4, 4", @@ -1771,7 +1795,7 @@ exports[`Button Tests Buttons can have flexbox styling with three buttons 1`] = { "Brush": { "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", + "Color": "rgba(0, 0, 0, 41)", }, "Offset": "4, 0, 0", "Size": "54, 1", @@ -1780,7 +1804,7 @@ exports[`Button Tests Buttons can have flexbox styling with three buttons 1`] = { "Brush": { "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", + "Color": "rgba(0, 0, 0, 41)", }, "Offset": "-4, 0, 0", "Size": "4, 4", @@ -1789,7 +1813,7 @@ exports[`Button Tests Buttons can have flexbox styling with three buttons 1`] = { "Brush": { "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", + "Color": "rgba(0, 0, 0, 41)", }, "Offset": "-1, 4, 0", "Size": "1, 28", @@ -1798,7 +1822,7 @@ exports[`Button Tests Buttons can have flexbox styling with three buttons 1`] = { "Brush": { "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", + "Color": "rgba(0, 0, 0, 41)", }, "Offset": "-4, -5, 0", "Size": "4, 5", @@ -1807,7 +1831,7 @@ exports[`Button Tests Buttons can have flexbox styling with three buttons 1`] = { "Brush": { "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", + "Color": "rgba(0, 0, 0, 41)", }, "Offset": "4, -2, 0", "Size": "54, 2", @@ -1816,7 +1840,7 @@ exports[`Button Tests Buttons can have flexbox styling with three buttons 1`] = { "Brush": { "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", + "Color": "rgba(0, 0, 0, 41)", }, "Offset": "0, -5, 0", "Size": "4, 5", @@ -1825,7 +1849,7 @@ exports[`Button Tests Buttons can have flexbox styling with three buttons 1`] = { "Brush": { "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", + "Color": "rgba(0, 0, 0, 41)", }, "Offset": "0, 4, 0", "Size": "1, 28", @@ -1887,6 +1911,10 @@ exports[`Button Tests Buttons have default styling 1`] = ` ], }, "Visual Tree": { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(255, 255, 255, 179)", + }, "Comment": "button_default_styling", "Offset": "0, 0, 0", "Size": "916, 37", @@ -1895,7 +1923,7 @@ exports[`Button Tests Buttons have default styling 1`] = ` { "Brush": { "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", + "Color": "rgba(0, 0, 0, 41)", }, "Offset": "0, 0, 0", "Size": "4, 4", @@ -1904,7 +1932,7 @@ exports[`Button Tests Buttons have default styling 1`] = ` { "Brush": { "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", + "Color": "rgba(0, 0, 0, 41)", }, "Offset": "4, 0, 0", "Size": "908, 1", @@ -1913,7 +1941,7 @@ exports[`Button Tests Buttons have default styling 1`] = ` { "Brush": { "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", + "Color": "rgba(0, 0, 0, 41)", }, "Offset": "-4, 0, 0", "Size": "4, 4", @@ -1922,7 +1950,7 @@ exports[`Button Tests Buttons have default styling 1`] = ` { "Brush": { "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", + "Color": "rgba(0, 0, 0, 41)", }, "Offset": "-1, 4, 0", "Size": "1, 28", @@ -1931,7 +1959,7 @@ exports[`Button Tests Buttons have default styling 1`] = ` { "Brush": { "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", + "Color": "rgba(0, 0, 0, 41)", }, "Offset": "-4, -5, 0", "Size": "4, 5", @@ -1940,7 +1968,7 @@ exports[`Button Tests Buttons have default styling 1`] = ` { "Brush": { "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", + "Color": "rgba(0, 0, 0, 41)", }, "Offset": "4, -2, 0", "Size": "908, 2", @@ -1949,7 +1977,7 @@ exports[`Button Tests Buttons have default styling 1`] = ` { "Brush": { "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", + "Color": "rgba(0, 0, 0, 41)", }, "Offset": "0, -5, 0", "Size": "4, 5", @@ -1958,7 +1986,7 @@ exports[`Button Tests Buttons have default styling 1`] = ` { "Brush": { "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", + "Color": "rgba(0, 0, 0, 41)", }, "Offset": "0, 4, 0", "Size": "1, 28", diff --git a/vnext/Microsoft.ReactNative/Fabric/Composition/Theme.cpp b/vnext/Microsoft.ReactNative/Fabric/Composition/Theme.cpp index 8a86a67c0f2..f194e8bca69 100644 --- a/vnext/Microsoft.ReactNative/Fabric/Composition/Theme.cpp +++ b/vnext/Microsoft.ReactNative/Fabric/Composition/Theme.cpp @@ -241,15 +241,20 @@ bool Theme::TryGetPlatformColor(const std::string &platformColor, winrt::Windows {"ButtonForegroundPressed", "TextFillColorSecondary"}, {"ButtonForegroundPointerOver", "TextFillColorPrimary"}, {"ButtonBackground", "ControlFillColorDefault"}, + {"ButtonBorderBrush", "ButtonBorder"}, {"ButtonBorder", "ControlElevationBorder"}, {"ControlElevationBorder", "ControlStrokeColorSecondary"}, // TODO ControlElevationBorderBrush is actually gradient brush {"ButtonForeground", "TextFillColorPrimary"}, + {"SolidBackgroundFillColorBaseBrush", "SolidBackgroundFillColorBase"}, {"ButtonBackgroundDisabled", "ControlFillColorDisabled"}, + {"ButtonBorderBrushDisabled", "ButtonBorderDisabled"}, {"ButtonBorderDisabled", "ControlStrokeColorDefault"}, {"ButtonForegroundDisabled", "TextFillColorDisabled"}, {"ButtonBackgroundPointerOver", "ControlFillColorSecondary"}, + {"ButtonBorderBrushPointerOver", "ButtonBorderPointerOver"}, {"ButtonBorderPointerOver", "ControlElevationBorder"}, + {"ButtonBorderBrushPressed", "ButtonBorderPressed"}, {"ButtonBorderPressed", "ControlFillColorTransparent"}, {"ToggleSwitchFillOff", "ControlAltFillColorSecondary"}, {"ToggleSwitchFillOffPointerOver", "ControlAltFillColorTertiary"}, diff --git a/vnext/Microsoft.ReactNative/Fabric/platform/react/renderer/graphics/PlatformColorParser.h b/vnext/Microsoft.ReactNative/Fabric/platform/react/renderer/graphics/PlatformColorParser.h index 9c471d66c11..627fc35e599 100644 --- a/vnext/Microsoft.ReactNative/Fabric/platform/react/renderer/graphics/PlatformColorParser.h +++ b/vnext/Microsoft.ReactNative/Fabric/platform/react/renderer/graphics/PlatformColorParser.h @@ -15,7 +15,7 @@ namespace facebook::react { inline SharedColor parsePlatformColor(const ContextContainer &contextContainer, int32_t surfaceId, const RawValue &value) { - if (value.hasType>()) { + if (value.hasType>>()) { auto map = (std::unordered_map>)value; if (map.find("windowsbrush") != map.end()) { facebook::react::Color color = {