Preserve iOS button color tokens

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

Author: JasonVMo

packages/components/Button/src/ButtonColorTokens.ios.ts

@@ -0,0 +1,88 @@
+import type { Theme } from '@fluentui-react-native/framework';
+import type { TokenSettings } from '@fluentui-react-native/use-styling';
+
+import type { ButtonTokens } from './Button.types';
+
+export const defaultButtonColorTokens: TokenSettings<ButtonTokens, Theme> = (t: Theme) =>
+  ({
+    backgroundColor: t.colors.buttonBackground,
+    color: t.colors.buttonText,
+    borderColor: t.colors.buttonBorder,
+    iconColor: t.colors.buttonIcon,
+    disabled: {
+      backgroundColor: t.colors.defaultDisabledBackground,
+      color: t.colors.defaultDisabledContent,
+      borderColor: t.colors.defaultDisabledBorder,
+      iconColor: t.colors.defaultDisabledIcon,
+    },
+    hovered: {
+      backgroundColor: t.colors.defaultHoveredBackground,
+      color: t.colors.defaultHoveredContent,
+      borderColor: t.colors.defaultHoveredBorder,
+      iconColor: t.colors.defaultHoveredIcon,
+    },
+    pressed: {
+      backgroundColor: t.colors.defaultPressedBackground,
+      color: t.colors.defaultPressedContent,
+      borderColor: t.colors.defaultPressedBorder,
+      iconColor: t.colors.defaultPressedIcon,
+    },
+    focused: {
+      backgroundColor: t.colors.defaultFocusedBackground,
+      color: t.colors.defaultFocusedContent,
+      borderColor: t.colors.defaultFocusedBorder,
+      icon: t.colors.defaultFocusedIcon,
+    },
+    primary: {
+      backgroundColor: t.colors.brandBackground,
+      color: t.colors.neutralForegroundOnColor,
+      borderColor: t.colors.brandStroke1,
+      iconColor: t.colors.neutralForegroundOnColor,
+      disabled: {
+        backgroundColor: t.colors.brandBackgroundDisabled,
+        color: t.colors.neutralForegroundDisabled1,
+        iconColor: t.colors.neutralForegroundDisabled1,
+      },
+      pressed: {
+        backgroundColor: t.colors.brandBackgroundPressed,
+        color: t.colors.neutralForegroundOnColor,
+        iconColor: t.colors.neutralForegroundOnColor,
+      },
+      focused: {
+        backgroundColor: t.colors.brandBackground,
+        color: t.colors.neutralForegroundOnColor,
+        borderColor: t.colors.strokeFocus2,
+        iconColor: t.colors.neutralForegroundOnColor,
+      },
+    },
+    subtle: {
+      backgroundColor: t.colors.ghostBackground,
+      color: t.colors.ghostContent,
+      borderColor: t.colors.ghostBorder,
+      iconColor: t.colors.ghostIcon,
+      disabled: {
+        color: t.colors.ghostDisabledContent,
+        borderColor: t.colors.ghostDisabledBorder,
+        backgroundColor: t.colors.ghostDisabledBackground,
+        iconColor: t.colors.ghostDisabledIcon,
+      },
+      hovered: {
+        backgroundColor: t.colors.ghostHoveredBackground,
+        color: t.colors.ghostHoveredContent,
+        borderColor: t.colors.ghostHoveredBorder,
+        iconColor: t.colors.ghostHoveredIcon,
+      },
+      pressed: {
+        backgroundColor: t.colors.ghostPressedBackground,
+        borderColor: t.colors.ghostPressedBorder,
+        color: t.colors.ghostPressedContent,
+        icon: t.colors.ghostPressedIcon,
+      },
+      focused: {
+        borderColor: t.colors.ghostFocusedBorder,
+        backgroundColor: t.colors.ghostFocusedBackground,
+        color: t.colors.ghostFocusedContent,
+        icon: t.colors.ghostFocusedIcon,
+      },
+    },
+  }) as ButtonTokens;

packages/components/Button/src/ToggleButton/__snapshots__/ToggleButton.test.tsx.snap

@@ -67,6 +67,7 @@ exports[`ToggleButton default 1`] = `
     numberOfLines={0}
     style={
       {
+        "color": "#ffffff",
         "fontFamily": "System",
         "fontSize": 12,
         "fontWeight": "600",

packages/components/Button/src/__snapshots__/Button.test.tsx.snap

@@ -61,6 +61,7 @@ exports[`Button component tests Button circular 1`] = `
     numberOfLines={0}
     style={
       {
+        "color": "#ffffff",
         "fontFamily": "System",
         "fontSize": 12,
         "fontWeight": "600",
@@ -135,7 +136,7 @@ exports[`Button component tests Button composed 1`] = `
     accessible={false}
     style={
       {
-        "color": undefined,
+        "color": "#ffffff",
         "dynamicTypeRamp": undefined,
         "fontFamily": "System",
         "fontSize": 12,
@@ -217,6 +218,7 @@ exports[`Button component tests Button customized 1`] = `
     numberOfLines={0}
     style={
       {
+        "color": "#ffffff",
         "fontFamily": "System",
         "fontSize": 12,
         "fontWeight": "600",
@@ -293,6 +295,7 @@ exports[`Button component tests Button default 1`] = `
     numberOfLines={0}
     style={
       {
+        "color": "#ffffff",
         "fontFamily": "System",
         "fontSize": 12,
         "fontWeight": "600",
@@ -348,8 +351,8 @@ exports[`Button component tests Button disabled 1`] = `
     {
       "alignItems": "center",
       "alignSelf": "flex-start",
-      "backgroundColor": "#e0e0e0",
-      "borderColor": "#e0e0e0",
+      "backgroundColor": "#b4d6fa",
+      "borderColor": "#f3f2f1",
       "borderRadius": 8,
       "borderWidth": 1,
       "display": "flex",
@@ -369,6 +372,7 @@ exports[`Button component tests Button disabled 1`] = `
     numberOfLines={0}
     style={
       {
+        "color": "#bdbdbd",
         "fontFamily": "System",
         "fontSize": 12,
         "fontWeight": "600",
@@ -446,6 +450,7 @@ exports[`Button component tests Button large 1`] = `
     numberOfLines={0}
     style={
       {
+        "color": "#ffffff",
         "fontFamily": "System",
         "fontSize": 13,
         "fontWeight": "600",
@@ -523,6 +528,7 @@ exports[`Button component tests Button primary 1`] = `
     numberOfLines={0}
     style={
       {
+        "color": "#ffffff",
         "fontFamily": "System",
         "fontSize": 12,
         "fontWeight": "600",
@@ -600,6 +606,7 @@ exports[`Button component tests Button small 1`] = `
     numberOfLines={0}
     style={
       {
+        "color": "#ffffff",
         "fontFamily": "System",
         "fontSize": 12,
         "fontWeight": "600",
@@ -677,6 +684,7 @@ exports[`Button component tests Button square 1`] = `
     numberOfLines={0}
     style={
       {
+        "color": "#ffffff",
         "fontFamily": "System",
         "fontSize": 12,
         "fontWeight": "600",
@@ -733,7 +741,8 @@ exports[`Button component tests Button subtle 1`] = `
     {
       "alignItems": "center",
       "alignSelf": "flex-start",
-      "backgroundColor": undefined,
+      "backgroundColor": "#ffffff",
+      "borderColor": "#ffffff",
       "borderRadius": 8,
       "borderWidth": 1,
       "display": "flex",
@@ -753,7 +762,7 @@ exports[`Button component tests Button subtle 1`] = `
     numberOfLines={0}
     style={
       {
-        "color": "#242424",
+        "color": "#323130",
         "fontFamily": "System",
         "fontSize": 12,
         "fontWeight": "600",