Add BkgAccentTint and TextAccentTint colors to the Office palette type (#3950)

* Add BkgAccentTint and TextAccentTint palette types

* Add AccentTint colors to the fallback Office palette

* Change files

---------

Co-authored-by: Patrick Boyd <patboyd@exchange.microsoft.com>

Author: PPatBoyd

change/@fluentui-react-native-theme-types-311e15ce-08b4-49e7-86b0-898fecbbe328.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "Add BkgAccentTint and TextAccentTint palette types",
+  "packageName": "@fluentui-react-native/theme-types",
+  "email": "patboyd@exchange.microsoft.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-native-win32-theme-a1f288da-7e8d-4e49-b069-c0167ab69dbc.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "Add BkgAccentTint and TextAccentTint palette types",
+  "packageName": "@fluentui-react-native/win32-theme",
+  "email": "patboyd@exchange.microsoft.com",
+  "dependentChangeType": "patch"
+}

packages/theming/theme-types/src/palette.types.ts

@@ -166,12 +166,28 @@ export interface OfficePalette {
 
   /**
    * Accents
+   *
+   * Used to emphasize or create boundaries around/within UI.
    */
+
+  // Used for general borders
   AccentDark: ColorValue;
+
+  // Used for separator lines
   AccentLight: ColorValue;
+
+  // Used for accent rectangles and bolder borders
   AccentEmphasis: ColorValue;
+
+  // Used for borders that outline the entire UI region
   AccentOutline: ColorValue;
 
+  // A subtle tint used to accent a region on top of Bkg
+  BkgAccentTint: ColorValue;
+
+  // A foreground color used for contrasting text on top of BkgAccentTint
+  TextAccentTint: ColorValue;
+
   /**
    * Headers
    *

packages/theming/win32-theme/src/NativeModule/fallbackOfficeModule.ts

@@ -131,6 +131,8 @@ const whiteColorsPalette: OfficePalette = {
   AccentLight: '#E6E6E6',
   AccentEmphasis: '#D83B01',
   AccentOutline: '#000000',
+  BkgAccentTint: '#D2E0F4',
+  TextAccentTint: '#242424',
   TextEmphasis2: '#D83B01',
   BkgCtlSubtleSelected: '#F3F3F3',
   TextCtlSubtleSelected: '#262626',

packages/theming/win32-theme/src/__tests__/__snapshots__/win32-theme.test.ts.snap

@@ -2739,6 +2739,7 @@ exports[`createOfficeTheme test 1`] = `
       "AccentLight": "#E6E6E6",
       "AccentOutline": "#000000",
       "Bkg": "antiquewhite",
+      "BkgAccentTint": "#D2E0F4",
       "BkgCtl": "#E6E6E6",
       "BkgCtlDisabled": "#E6E6E6",
       "BkgCtlEmphasis": "#D83B01",
@@ -2818,6 +2819,7 @@ exports[`createOfficeTheme test 1`] = `
       "StrokeToggleSwitchOnHover": "#EA6115",
       "StrokeToggleSwitchOnPressed": "#A22C01",
       "Text": "#262626",
+      "TextAccentTint": "#242424",
       "TextActive": "#262626",
       "TextActiveHover": "#EA6115",
       "TextActivePressed": "#A22C01",
@@ -3222,6 +3224,7 @@ exports[`fallbackGetPalette test Random palette 1`] = `
   "AccentLight": "#E6E6E6",
   "AccentOutline": "#000000",
   "Bkg": "#FFFFFF",
+  "BkgAccentTint": "#D2E0F4",
   "BkgCtl": "#E6E6E6",
   "BkgCtlDisabled": "#E6E6E6",
   "BkgCtlEmphasis": "#D83B01",
@@ -3301,6 +3304,7 @@ exports[`fallbackGetPalette test Random palette 1`] = `
   "StrokeToggleSwitchOnHover": "#EA6115",
   "StrokeToggleSwitchOnPressed": "#A22C01",
   "Text": "#262626",
+  "TextAccentTint": "#242424",
   "TextActive": "#262626",
   "TextActiveHover": "#EA6115",
   "TextActivePressed": "#A22C01",
@@ -3364,6 +3368,7 @@ exports[`fallbackGetPalette test TaskPane palette 1`] = `
   "AccentLight": "#E6E6E6",
   "AccentOutline": "#000000",
   "Bkg": "antiquewhite",
+  "BkgAccentTint": "#D2E0F4",
   "BkgCtl": "#E6E6E6",
   "BkgCtlDisabled": "#E6E6E6",
   "BkgCtlEmphasis": "#D83B01",
@@ -3443,6 +3448,7 @@ exports[`fallbackGetPalette test TaskPane palette 1`] = `
   "StrokeToggleSwitchOnHover": "#EA6115",
   "StrokeToggleSwitchOnPressed": "#A22C01",
   "Text": "#262626",
+  "TextAccentTint": "#242424",
   "TextActive": "#262626",
   "TextActiveHover": "#EA6115",
   "TextActivePressed": "#A22C01",