From fca5fbcbd0838ea9b28f1856c2c5a4cabf5aa4c0 Mon Sep 17 00:00:00 2001
From: Sean Monahan <seanmonahan@microsoft.com>
Date: Thu, 21 Jul 2022 14:59:51 -0700
Subject: [PATCH 01/25] theme: update neutral foreground and background tokens

Updates the values of some neutral foreground and background
tokens to achieve better color contrast to meet accessibility
requirements.
---
 ...act-theme-0a451fa0-2086-4a99-94c0-b3eb642e18eb.json |  7 +++++++
 .../react-theme/src/alias/darkColor.ts                 | 10 +++++-----
 .../react-theme/src/alias/lightColor.ts                |  2 +-
 3 files changed, 13 insertions(+), 6 deletions(-)
 create mode 100644 change/@fluentui-react-theme-0a451fa0-2086-4a99-94c0-b3eb642e18eb.json

diff --git a/change/@fluentui-react-theme-0a451fa0-2086-4a99-94c0-b3eb642e18eb.json b/change/@fluentui-react-theme-0a451fa0-2086-4a99-94c0-b3eb642e18eb.json
new file mode 100644
index 0000000000000..e6862043e42e6
--- /dev/null
+++ b/change/@fluentui-react-theme-0a451fa0-2086-4a99-94c0-b3eb642e18eb.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: update token values to fix failing color contrast",
+  "packageName": "@fluentui/react-theme",
+  "email": "seanmonahan@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react-components/react-theme/src/alias/darkColor.ts b/packages/react-components/react-theme/src/alias/darkColor.ts
index af1b3c0833e32..f0072dde26c68 100644
--- a/packages/react-components/react-theme/src/alias/darkColor.ts
+++ b/packages/react-components/react-theme/src/alias/darkColor.ts
@@ -37,10 +37,10 @@ export const generateColorTokens = (brand: BrandVariants): ColorTokens => ({
   colorBrandForeground1: brand[100], // #2899f5 Global.Color.Brand.100
   colorBrandForeground2: brand[110], // #3aa0f3 Global.Color.Brand.110
   colorNeutralForeground1Static: grey[14], // #242424 Global.Color.Grey.14
-  colorNeutralForegroundInverted: white, // #ffffff Global.Color.White
-  colorNeutralForegroundInvertedHover: white, // #ffffff Global.Color.White
-  colorNeutralForegroundInvertedPressed: white, // #ffffff Global.Color.White
-  colorNeutralForegroundInvertedSelected: white, // #ffffff Global.Color.White
+  colorNeutralForegroundInverted: grey[14], // #242424 Global.Color.Grey.14
+  colorNeutralForegroundInvertedHover: grey[14], // #242424 Global.Color.Grey.14
+  colorNeutralForegroundInvertedPressed: grey[14], // #242424 Global.Color.Grey.14
+  colorNeutralForegroundInvertedSelected: grey[14], // #242424 Global.Color.Grey.14
   colorNeutralForegroundOnBrand: white, // #ffffff Global.Color.White
   colorNeutralForegroundInvertedLink: white, // #ffffff Global.Color.White
   colorNeutralForegroundInvertedLinkHover: white, // #ffffff Global.Color.White
@@ -74,7 +74,7 @@ export const generateColorTokens = (brand: BrandVariants): ColorTokens => ({
   colorNeutralBackground5Pressed: grey[2], // #050505 Global.Color.Grey.2
   colorNeutralBackground5Selected: grey[6], // #0f0f0f Global.Color.Grey.6
   colorNeutralBackground6: grey[20], // #333333 Global.Color.Grey.20
-  colorNeutralBackgroundInverted: grey[24], // #3d3d3d Global.Color.Grey.24
+  colorNeutralBackgroundInverted: white, // #ffffff Global.Color.White
   colorSubtleBackground: 'transparent', // transparent undefined
   colorSubtleBackgroundHover: grey[22], // #383838 Global.Color.Grey.22
   colorSubtleBackgroundPressed: grey[18], // #2e2e2e Global.Color.Grey.18
diff --git a/packages/react-components/react-theme/src/alias/lightColor.ts b/packages/react-components/react-theme/src/alias/lightColor.ts
index 7d1864a381d96..17da36f01bfa6 100644
--- a/packages/react-components/react-theme/src/alias/lightColor.ts
+++ b/packages/react-components/react-theme/src/alias/lightColor.ts
@@ -74,7 +74,7 @@ export const generateColorTokens = (brand: BrandVariants): ColorTokens => ({
   colorNeutralBackground5Pressed: grey[94], // #f0f0f0 Global.Color.Grey.94
   colorNeutralBackground5Selected: grey[98], // #fafafa Global.Color.Grey.98
   colorNeutralBackground6: grey[90], // #e6e6e6 Global.Color.Grey.90
-  colorNeutralBackgroundInverted: grey[38], // #616161 Global.Color.Grey.38
+  colorNeutralBackgroundInverted: grey[16], // #292929 Global.Color.Grey.16
   colorSubtleBackground: 'transparent', // transparent undefined
   colorSubtleBackgroundHover: grey[96], // #f5f5f5 Global.Color.Grey.96
   colorSubtleBackgroundPressed: grey[88], // #e0e0e0 Global.Color.Grey.88

From 5cd8c47d61a9eff4ea1added4d6dd807791f4f4c Mon Sep 17 00:00:00 2001
From: Sean Monahan <seanmonahan@microsoft.com>
Date: Fri, 22 Jul 2022 08:56:51 -0700
Subject: [PATCH 02/25] theme: add new static foreground and background color
 tokens

---
 packages/react-components/react-theme/etc/react-theme.api.md    | 2 ++
 packages/react-components/react-theme/src/alias/darkColor.ts    | 2 ++
 .../react-components/react-theme/src/alias/highContrastColor.ts | 2 ++
 packages/react-components/react-theme/src/alias/lightColor.ts   | 2 ++
 .../react-components/react-theme/src/alias/teamsDarkColor.ts    | 2 ++
 packages/react-components/react-theme/src/tokens.ts             | 2 ++
 packages/react-components/react-theme/src/types.ts              | 2 ++
 7 files changed, 14 insertions(+)

diff --git a/packages/react-components/react-theme/etc/react-theme.api.md b/packages/react-components/react-theme/etc/react-theme.api.md
index bd9f29b1f2dd7..3d354acd64270 100644
--- a/packages/react-components/react-theme/etc/react-theme.api.md
+++ b/packages/react-components/react-theme/etc/react-theme.api.md
@@ -170,6 +170,7 @@ export type ColorTokens = {
     colorNeutralForegroundInvertedPressed: string;
     colorNeutralForegroundInvertedSelected: string;
     colorNeutralForegroundOnBrand: string;
+    colorNeutralForegroundInvertedStatic: string;
     colorNeutralForegroundInvertedLink: string;
     colorNeutralForegroundInvertedLinkHover: string;
     colorNeutralForegroundInvertedLinkPressed: string;
@@ -202,6 +203,7 @@ export type ColorTokens = {
     colorNeutralBackground5Pressed: string;
     colorNeutralBackground5Selected: string;
     colorNeutralBackground6: string;
+    colorNeutralBackgroundStatic: string;
     colorNeutralBackgroundInverted: string;
     colorSubtleBackground: string;
     colorSubtleBackgroundHover: string;
diff --git a/packages/react-components/react-theme/src/alias/darkColor.ts b/packages/react-components/react-theme/src/alias/darkColor.ts
index f0072dde26c68..1ca7c21252637 100644
--- a/packages/react-components/react-theme/src/alias/darkColor.ts
+++ b/packages/react-components/react-theme/src/alias/darkColor.ts
@@ -42,6 +42,7 @@ export const generateColorTokens = (brand: BrandVariants): ColorTokens => ({
   colorNeutralForegroundInvertedPressed: grey[14], // #242424 Global.Color.Grey.14
   colorNeutralForegroundInvertedSelected: grey[14], // #242424 Global.Color.Grey.14
   colorNeutralForegroundOnBrand: white, // #ffffff Global.Color.White
+  colorNeutralForegroundInvertedStatic: white, // #ffffff Global.Color.White
   colorNeutralForegroundInvertedLink: white, // #ffffff Global.Color.White
   colorNeutralForegroundInvertedLinkHover: white, // #ffffff Global.Color.White
   colorNeutralForegroundInvertedLinkPressed: white, // #ffffff Global.Color.White
@@ -74,6 +75,7 @@ export const generateColorTokens = (brand: BrandVariants): ColorTokens => ({
   colorNeutralBackground5Pressed: grey[2], // #050505 Global.Color.Grey.2
   colorNeutralBackground5Selected: grey[6], // #0f0f0f Global.Color.Grey.6
   colorNeutralBackground6: grey[20], // #333333 Global.Color.Grey.20
+  colorNeutralBackgroundStatic: grey[24], // #3d3d3d Global.Color.Grey.24
   colorNeutralBackgroundInverted: white, // #ffffff Global.Color.White
   colorSubtleBackground: 'transparent', // transparent undefined
   colorSubtleBackgroundHover: grey[22], // #383838 Global.Color.Grey.22
diff --git a/packages/react-components/react-theme/src/alias/highContrastColor.ts b/packages/react-components/react-theme/src/alias/highContrastColor.ts
index 74fbc19b55e53..9428b238aac2f 100644
--- a/packages/react-components/react-theme/src/alias/highContrastColor.ts
+++ b/packages/react-components/react-theme/src/alias/highContrastColor.ts
@@ -52,6 +52,7 @@ export const generateColorTokens = (): ColorTokens => ({
   colorNeutralForegroundInvertedPressed: hcHighlightText, // HighlightText Global.Color.hcHighlightText
   colorNeutralForegroundInvertedSelected: hcHighlightText, // HighlightText Global.Color.hcHighlightText
   colorNeutralForegroundOnBrand: hcButtonText, // ButtonText Global.Color.hcButtonText
+  colorNeutralForegroundInvertedStatic: hcButtonText, // ButtonText Global.Color.hcButtonText
   colorNeutralForegroundInvertedLink: hcHyperlink, // LinkText Global.Color.hcHyperlink
   colorNeutralForegroundInvertedLinkHover: hcHyperlink, // LinkText Global.Color.hcHyperlink
   colorNeutralForegroundInvertedLinkPressed: hcHyperlink, // LinkText Global.Color.hcHyperlink
@@ -84,6 +85,7 @@ export const generateColorTokens = (): ColorTokens => ({
   colorNeutralBackground5Pressed: hcHighlight, // Highlight Global.Color.hcHighlight
   colorNeutralBackground5Selected: hcHighlight, // Highlight Global.Color.hcHighlight
   colorNeutralBackground6: hcCanvas, // Canvas Global.Color.hcCanvas
+  colorNeutralBackgroundStatic: hcCanvas, // Canvas Global.Color.hcCanvas
   colorNeutralBackgroundInverted: hcCanvas, // Canvas Global.Color.hcCanvas
   colorSubtleBackground: 'transparent', // transparent undefined
   colorSubtleBackgroundHover: hcHighlight, // Highlight Global.Color.hcHighlight
diff --git a/packages/react-components/react-theme/src/alias/lightColor.ts b/packages/react-components/react-theme/src/alias/lightColor.ts
index 17da36f01bfa6..22a273c55cba9 100644
--- a/packages/react-components/react-theme/src/alias/lightColor.ts
+++ b/packages/react-components/react-theme/src/alias/lightColor.ts
@@ -42,6 +42,7 @@ export const generateColorTokens = (brand: BrandVariants): ColorTokens => ({
   colorNeutralForegroundInvertedPressed: white, // #ffffff Global.Color.White
   colorNeutralForegroundInvertedSelected: white, // #ffffff Global.Color.White
   colorNeutralForegroundOnBrand: white, // #ffffff Global.Color.White
+  colorNeutralForegroundInvertedStatic: white, // #ffffff Global.Color.White
   colorNeutralForegroundInvertedLink: white, // #ffffff Global.Color.White
   colorNeutralForegroundInvertedLinkHover: white, // #ffffff Global.Color.White
   colorNeutralForegroundInvertedLinkPressed: white, // #ffffff Global.Color.White
@@ -74,6 +75,7 @@ export const generateColorTokens = (brand: BrandVariants): ColorTokens => ({
   colorNeutralBackground5Pressed: grey[94], // #f0f0f0 Global.Color.Grey.94
   colorNeutralBackground5Selected: grey[98], // #fafafa Global.Color.Grey.98
   colorNeutralBackground6: grey[90], // #e6e6e6 Global.Color.Grey.90
+  colorNeutralBackgroundStatic: grey[20], // #333333 Global.Color.Grey.20
   colorNeutralBackgroundInverted: grey[16], // #292929 Global.Color.Grey.16
   colorSubtleBackground: 'transparent', // transparent undefined
   colorSubtleBackgroundHover: grey[96], // #f5f5f5 Global.Color.Grey.96
diff --git a/packages/react-components/react-theme/src/alias/teamsDarkColor.ts b/packages/react-components/react-theme/src/alias/teamsDarkColor.ts
index bac7f9c0e578b..8244cfd054581 100644
--- a/packages/react-components/react-theme/src/alias/teamsDarkColor.ts
+++ b/packages/react-components/react-theme/src/alias/teamsDarkColor.ts
@@ -42,6 +42,7 @@ export const generateColorTokens = (brand: BrandVariants): ColorTokens => ({
   colorNeutralForegroundInvertedPressed: white, // #ffffff Global.Color.White
   colorNeutralForegroundInvertedSelected: white, // #ffffff Global.Color.White
   colorNeutralForegroundOnBrand: white, // #ffffff Global.Color.White
+  colorNeutralForegroundInvertedStatic: white, // #ffffff Global.Color.White
   colorNeutralForegroundInvertedLink: white, // #ffffff Global.Color.White
   colorNeutralForegroundInvertedLinkHover: white, // #ffffff Global.Color.White
   colorNeutralForegroundInvertedLinkPressed: white, // #ffffff Global.Color.White
@@ -74,6 +75,7 @@ export const generateColorTokens = (brand: BrandVariants): ColorTokens => ({
   colorNeutralBackground5Pressed: black, // #000000 Global.Color.Black
   colorNeutralBackground5Selected: grey[10], // #1a1a1a Global.Color.Grey.10
   colorNeutralBackground6: grey[20], // #333333 Global.Color.Grey.20
+  colorNeutralBackgroundStatic: grey[24], // #3d3d3d Global.Color.Grey.24 TODO: VERIFY
   colorNeutralBackgroundInverted: grey[24], // #3d3d3d Global.Color.Grey.24
   colorSubtleBackground: 'transparent', // transparent undefined
   colorSubtleBackgroundHover: grey[22], // #383838 Global.Color.Grey.22
diff --git a/packages/react-components/react-theme/src/tokens.ts b/packages/react-components/react-theme/src/tokens.ts
index 0a54f61fc9620..db2f0682a8490 100644
--- a/packages/react-components/react-theme/src/tokens.ts
+++ b/packages/react-components/react-theme/src/tokens.ts
@@ -38,6 +38,7 @@ export const tokens: Record<keyof Theme, string> = {
   colorNeutralForegroundInvertedHover: 'var(--colorNeutralForegroundInvertedHover)',
   colorNeutralForegroundInvertedPressed: 'var(--colorNeutralForegroundInvertedPressed)',
   colorNeutralForegroundInvertedSelected: 'var(--colorNeutralForegroundInvertedSelected)',
+  colorNeutralForegroundInvertedStatic: 'var(--colorNeutralForegroundInvertedStatic)',
   colorNeutralForegroundInvertedLink: 'var(--colorNeutralForegroundInvertedLink)',
   colorNeutralForegroundInvertedLinkHover: 'var(--colorNeutralForegroundInvertedLinkHover)',
   colorNeutralForegroundInvertedLinkPressed: 'var(--colorNeutralForegroundInvertedLinkPressed)',
@@ -74,6 +75,7 @@ export const tokens: Record<keyof Theme, string> = {
   colorNeutralBackground5Pressed: 'var(--colorNeutralBackground5Pressed)',
   colorNeutralBackground5Selected: 'var(--colorNeutralBackground5Selected)',
   colorNeutralBackground6: 'var(--colorNeutralBackground6)',
+  colorNeutralBackgroundStatic: 'var(--colorNeutralBackgroundStatic)',
   colorNeutralBackgroundInverted: 'var(--colorNeutralBackgroundInverted)',
   colorSubtleBackground: 'var(--colorSubtleBackground)',
   colorSubtleBackgroundHover: 'var(--colorSubtleBackgroundHover)',
diff --git a/packages/react-components/react-theme/src/types.ts b/packages/react-components/react-theme/src/types.ts
index 73a6b59e82e34..7dd9a72a380e2 100644
--- a/packages/react-components/react-theme/src/types.ts
+++ b/packages/react-components/react-theme/src/types.ts
@@ -42,6 +42,7 @@ export type ColorTokens = {
   colorNeutralForegroundInvertedPressed: string;
   colorNeutralForegroundInvertedSelected: string;
   colorNeutralForegroundOnBrand: string;
+  colorNeutralForegroundInvertedStatic: string;
   colorNeutralForegroundInvertedLink: string;
   colorNeutralForegroundInvertedLinkHover: string;
   colorNeutralForegroundInvertedLinkPressed: string;
@@ -74,6 +75,7 @@ export type ColorTokens = {
   colorNeutralBackground5Pressed: string;
   colorNeutralBackground5Selected: string;
   colorNeutralBackground6: string;
+  colorNeutralBackgroundStatic: string;
   colorNeutralBackgroundInverted: string;
   colorSubtleBackground: string;
   colorSubtleBackgroundHover: string;

From 8b11a16b3dce44f28c4e4d1dc7e164847144e996 Mon Sep 17 00:00:00 2001
From: Sean Monahan <seanmonahan@microsoft.com>
Date: Fri, 22 Jul 2022 13:42:51 -0700
Subject: [PATCH 03/25] tooltip: update inverted color tokens.

---
 .../react-theme/src/alias/highContrastColor.ts                | 2 +-
 .../react-tooltip/src/components/Tooltip/useTooltipStyles.ts  | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/react-components/react-theme/src/alias/highContrastColor.ts b/packages/react-components/react-theme/src/alias/highContrastColor.ts
index 9428b238aac2f..9a5f048659d81 100644
--- a/packages/react-components/react-theme/src/alias/highContrastColor.ts
+++ b/packages/react-components/react-theme/src/alias/highContrastColor.ts
@@ -52,7 +52,7 @@ export const generateColorTokens = (): ColorTokens => ({
   colorNeutralForegroundInvertedPressed: hcHighlightText, // HighlightText Global.Color.hcHighlightText
   colorNeutralForegroundInvertedSelected: hcHighlightText, // HighlightText Global.Color.hcHighlightText
   colorNeutralForegroundOnBrand: hcButtonText, // ButtonText Global.Color.hcButtonText
-  colorNeutralForegroundInvertedStatic: hcButtonText, // ButtonText Global.Color.hcButtonText
+  colorNeutralForegroundInvertedStatic: hcCanvasText, // ButtonText Global.Color.hcCanvasText
   colorNeutralForegroundInvertedLink: hcHyperlink, // LinkText Global.Color.hcHyperlink
   colorNeutralForegroundInvertedLinkHover: hcHyperlink, // LinkText Global.Color.hcHyperlink
   colorNeutralForegroundInvertedLinkPressed: hcHyperlink, // LinkText Global.Color.hcHyperlink
diff --git a/packages/react-components/react-tooltip/src/components/Tooltip/useTooltipStyles.ts b/packages/react-components/react-tooltip/src/components/Tooltip/useTooltipStyles.ts
index 6f2b6fcd6aab5..e84b034bd9c21 100644
--- a/packages/react-components/react-tooltip/src/components/Tooltip/useTooltipStyles.ts
+++ b/packages/react-components/react-tooltip/src/components/Tooltip/useTooltipStyles.ts
@@ -39,8 +39,8 @@ const useStyles = makeStyles({
   },
 
   inverted: {
-    backgroundColor: tokens.colorNeutralBackgroundInverted,
-    color: tokens.colorNeutralForegroundInverted,
+    backgroundColor: tokens.colorNeutralBackgroundStatic,
+    color: tokens.colorNeutralForegroundInvertedStatic,
   },
 
   arrow: createArrowStyles({ arrowHeight }),

From 8f9cb4aaf9d26784a0a2a3b2643df4a61a517710 Mon Sep 17 00:00:00 2001
From: Sean Monahan <seanmonahan@microsoft.com>
Date: Fri, 22 Jul 2022 13:46:30 -0700
Subject: [PATCH 04/25] theme: update teams dark color tokens

---
 .../react-components/react-theme/src/alias/teamsDarkColor.ts  | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/react-components/react-theme/src/alias/teamsDarkColor.ts b/packages/react-components/react-theme/src/alias/teamsDarkColor.ts
index 8244cfd054581..2ce893ed772a6 100644
--- a/packages/react-components/react-theme/src/alias/teamsDarkColor.ts
+++ b/packages/react-components/react-theme/src/alias/teamsDarkColor.ts
@@ -75,8 +75,8 @@ export const generateColorTokens = (brand: BrandVariants): ColorTokens => ({
   colorNeutralBackground5Pressed: black, // #000000 Global.Color.Black
   colorNeutralBackground5Selected: grey[10], // #1a1a1a Global.Color.Grey.10
   colorNeutralBackground6: grey[20], // #333333 Global.Color.Grey.20
-  colorNeutralBackgroundStatic: grey[24], // #3d3d3d Global.Color.Grey.24 TODO: VERIFY
-  colorNeutralBackgroundInverted: grey[24], // #3d3d3d Global.Color.Grey.24
+  colorNeutralBackgroundStatic: grey[24], // #3d3d3d Global.Color.Grey.24
+  colorNeutralBackgroundInverted: white, // #ffffff Global.Color.White
   colorSubtleBackground: 'transparent', // transparent undefined
   colorSubtleBackgroundHover: grey[22], // #383838 Global.Color.Grey.22
   colorSubtleBackgroundPressed: grey[18], // #2e2e2e Global.Color.Grey.18

From 0056f0c43a7e14aa3eb2c8d368b6633819a2e8ed Mon Sep 17 00:00:00 2001
From: Sean Monahan <seanmonahan@microsoft.com>
Date: Fri, 22 Jul 2022 14:44:27 -0700
Subject: [PATCH 05/25] popover: update color tokens

Updates color tokens for Popover and adds a new Storybook story to make
it easier to see the different Popover appearances.
---
 .../PopoverSurface/usePopoverSurfaceStyles.ts |  8 +--
 .../Popover/PopoverAppearance.stories.tsx     | 66 +++++++++++++++++++
 .../src/stories/Popover/index.stories.tsx     |  1 +
 3 files changed, 70 insertions(+), 5 deletions(-)
 create mode 100644 packages/react-components/react-popover/src/stories/Popover/PopoverAppearance.stories.tsx

diff --git a/packages/react-components/react-popover/src/components/PopoverSurface/usePopoverSurfaceStyles.ts b/packages/react-components/react-popover/src/components/PopoverSurface/usePopoverSurfaceStyles.ts
index e1c14f01913f6..b6e7cea7eb15c 100644
--- a/packages/react-components/react-popover/src/components/PopoverSurface/usePopoverSurfaceStyles.ts
+++ b/packages/react-components/react-popover/src/components/PopoverSurface/usePopoverSurfaceStyles.ts
@@ -27,15 +27,13 @@ const useStyles = makeStyles({
   },
 
   inverted: {
-    // TODO: neutral background inverted missing from superset and theme
-    backgroundColor: tokens.colorNeutralForeground1,
-    color: tokens.colorNeutralForegroundInverted,
+    backgroundColor: tokens.colorNeutralBackgroundStatic,
+    color: tokens.colorNeutralForegroundInvertedStatic,
   },
 
   brand: {
     backgroundColor: tokens.colorBrandBackground,
-    // TODO: clarify with designers what foreground color should be with brand background,
-    color: tokens.colorNeutralForegroundInverted,
+    color: tokens.colorNeutralForegroundOnBrand,
   },
 
   smallPadding: {
diff --git a/packages/react-components/react-popover/src/stories/Popover/PopoverAppearance.stories.tsx b/packages/react-components/react-popover/src/stories/Popover/PopoverAppearance.stories.tsx
new file mode 100644
index 0000000000000..8233b19358e41
--- /dev/null
+++ b/packages/react-components/react-popover/src/stories/Popover/PopoverAppearance.stories.tsx
@@ -0,0 +1,66 @@
+import * as React from 'react';
+import { makeStyles, Button, Popover, PopoverSurface, PopoverTrigger, tokens } from '@fluentui/react-components';
+import type { PopoverProps } from '@fluentui/react-components';
+
+const useStyles = makeStyles({
+  contentHeader: {
+    marginTop: '0',
+  },
+});
+
+const useLayoutStyles = makeStyles({
+  root: {
+    display: 'flex',
+    flexDirection: 'column',
+    rowGap: tokens.spacingVerticalMNudge,
+  },
+});
+
+const ExampleContent = () => {
+  const styles = useStyles();
+  return (
+    <div>
+      <h3 className={styles.contentHeader}>Popover content</h3>
+
+      <div>This is some popover content</div>
+    </div>
+  );
+};
+
+export const Appearance = (props: PopoverProps) => {
+  const layoutStyles = useLayoutStyles();
+
+  return (
+    <div className={layoutStyles.root}>
+      <Popover {...props}>
+        <PopoverTrigger>
+          <Button>Default appearance Popover trigger</Button>
+        </PopoverTrigger>
+
+        <PopoverSurface>
+          <ExampleContent />
+        </PopoverSurface>
+      </Popover>
+
+      <Popover {...props} appearance="brand">
+        <PopoverTrigger>
+          <Button>Brand appearance Popover trigger</Button>
+        </PopoverTrigger>
+
+        <PopoverSurface>
+          <ExampleContent />
+        </PopoverSurface>
+      </Popover>
+
+      <Popover {...props} appearance="inverted">
+        <PopoverTrigger>
+          <Button>Inverted appearance Popover trigger</Button>
+        </PopoverTrigger>
+
+        <PopoverSurface>
+          <ExampleContent />
+        </PopoverSurface>
+      </Popover>
+    </div>
+  );
+};
diff --git a/packages/react-components/react-popover/src/stories/Popover/index.stories.tsx b/packages/react-components/react-popover/src/stories/Popover/index.stories.tsx
index 73379052df332..1aed1c2c4cd02 100644
--- a/packages/react-components/react-popover/src/stories/Popover/index.stories.tsx
+++ b/packages/react-components/react-popover/src/stories/Popover/index.stories.tsx
@@ -11,6 +11,7 @@ export { NestedPopovers } from './PopoverNestedPopovers.stories';
 export { AnchorToCustomTarget } from './PopoverAnchorToCustomTarget.stories';
 export { CustomTrigger } from './PopoverCustomTrigger.stories';
 export { InternalUpdateContent } from './PopoverInternalUpdateContent.stories';
+export { Appearance } from './PopoverAppearance.stories';
 
 export default {
   title: 'Components/Popover',

From 10f83085a48adcddb8172a5b86991dcf3e2fb283 Mon Sep 17 00:00:00 2001
From: Sean Monahan <seanmonahan@microsoft.com>
Date: Fri, 22 Jul 2022 14:54:39 -0700
Subject: [PATCH 06/25] checkbox: update color token

---
 .../react-checkbox/src/components/Checkbox/useCheckboxStyles.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-components/react-checkbox/src/components/Checkbox/useCheckboxStyles.ts b/packages/react-components/react-checkbox/src/components/Checkbox/useCheckboxStyles.ts
index 5d525ea80fc0e..760f82030719a 100644
--- a/packages/react-components/react-checkbox/src/components/Checkbox/useCheckboxStyles.ts
+++ b/packages/react-components/react-checkbox/src/components/Checkbox/useCheckboxStyles.ts
@@ -76,7 +76,7 @@ const useInputStyles = makeStyles({
       },
       [`& ~ .${checkboxClassNames.indicator}`]: {
         backgroundColor: tokens.colorCompoundBrandBackground,
-        color: tokens.colorNeutralForegroundOnBrand,
+        color: tokens.colorNeutralForegroundInverted,
         ...shorthands.borderColor(tokens.colorCompoundBrandBackground),
       },
 

From cd007eab9b912eac2e137872d60204a4a607c727 Mon Sep 17 00:00:00 2001
From: Sean Monahan <seanmonahan@microsoft.com>
Date: Fri, 22 Jul 2022 15:26:12 -0700
Subject: [PATCH 07/25] theme: update high contrast token

---
 .../react-components/react-theme/src/alias/highContrastColor.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-components/react-theme/src/alias/highContrastColor.ts b/packages/react-components/react-theme/src/alias/highContrastColor.ts
index 9a5f048659d81..07a14a8db88e1 100644
--- a/packages/react-components/react-theme/src/alias/highContrastColor.ts
+++ b/packages/react-components/react-theme/src/alias/highContrastColor.ts
@@ -47,7 +47,7 @@ export const generateColorTokens = (): ColorTokens => ({
   colorBrandForeground1: hcCanvasText, // CanvasText Global.Color.hcCanvasText
   colorBrandForeground2: hcButtonText, // ButtonText Global.Color.hcButtonText
   colorNeutralForeground1Static: hcCanvas, // Canvas Global.Color.hcCanvas
-  colorNeutralForegroundInverted: hcCanvasText, // CanvasText Global.Color.hcCanvasText
+  colorNeutralForegroundInverted: hcHighlightText, // HighlightText Global.Color.hcHighlightText
   colorNeutralForegroundInvertedHover: hcHighlightText, // HighlightText Global.Color.hcHighlightText
   colorNeutralForegroundInvertedPressed: hcHighlightText, // HighlightText Global.Color.hcHighlightText
   colorNeutralForegroundInvertedSelected: hcHighlightText, // HighlightText Global.Color.hcHighlightText

From 02a13155facf6f5d1ab212db8f6ded7be24bdbdd Mon Sep 17 00:00:00 2001
From: Sean Monahan <seanmonahan@microsoft.com>
Date: Fri, 22 Jul 2022 15:26:42 -0700
Subject: [PATCH 08/25] switch: update thumb/indicator color token

---
 .../react-switch/src/components/Switch/useSwitchStyles.ts       | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-components/react-switch/src/components/Switch/useSwitchStyles.ts b/packages/react-components/react-switch/src/components/Switch/useSwitchStyles.ts
index 3a1d77987446a..9bdf9f76c58a7 100644
--- a/packages/react-components/react-switch/src/components/Switch/useSwitchStyles.ts
+++ b/packages/react-components/react-switch/src/components/Switch/useSwitchStyles.ts
@@ -135,7 +135,7 @@ const useInputStyles = makeStyles({
     ':enabled:checked': {
       [`& ~ .${switchClassNames.indicator}`]: {
         backgroundColor: tokens.colorBrandBackground,
-        color: tokens.colorNeutralForegroundOnBrand,
+        color: tokens.colorNeutralForegroundInverted,
         ...shorthands.borderColor(tokens.colorTransparentStroke),
       },
 

From 0f5ed705f7656f8ffb393f910ab87ba304896526 Mon Sep 17 00:00:00 2001
From: Sean Monahan <seanmonahan@microsoft.com>
Date: Fri, 22 Jul 2022 16:40:07 -0700
Subject: [PATCH 09/25] spinner: update color tokens

---
 .../react-spinner/src/components/Spinner/useSpinnerStyles.ts   | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/react-components/react-spinner/src/components/Spinner/useSpinnerStyles.ts b/packages/react-components/react-spinner/src/components/Spinner/useSpinnerStyles.ts
index 882309902900a..2d4e01401a9e6 100644
--- a/packages/react-components/react-spinner/src/components/Spinner/useSpinnerStyles.ts
+++ b/packages/react-components/react-spinner/src/components/Spinner/useSpinnerStyles.ts
@@ -176,7 +176,7 @@ const useLoaderStyles = makeStyles({
 const useTrackStyles = makeStyles({
   inverted: {
     ['& > svg > circle.fui-Spinner__Tail']: {
-      stroke: tokens.colorNeutralStrokeOnBrand2,
+      stroke: tokens.colorNeutralForegroundInvertedStatic,
       animationName: {
         '0%': {
           strokeDasharray: '1,150',
@@ -208,6 +208,7 @@ const useTrackStyles = makeStyles({
 
     ['& > svg > circle.fui-Spinner__Track']: {
       stroke: tokens.colorNeutralBackgroundInverted,
+      opacity: 0.2,
     },
   },
   primary: {

From 48d566cbdeae5764b40429650a3c7233980a65fe Mon Sep 17 00:00:00 2001
From: Sean Monahan <seanmonahan@microsoft.com>
Date: Tue, 26 Jul 2022 09:58:03 -0700
Subject: [PATCH 10/25] change files

---
 ...eact-checkbox-94e0861e-f646-46f7-ae40-eb2b0b0f59ca.json | 7 +++++++
 ...react-popover-b12a35f1-9fa8-418f-af79-dc3fc7ea18bb.json | 7 +++++++
 ...react-spinner-b347a78d-da01-4087-9046-45412344cf1c.json | 7 +++++++
 ...-react-switch-23635943-537c-42d9-b219-575f3820e354.json | 7 +++++++
 ...react-tooltip-80b8fd2e-8725-4e1e-ad43-3d4a2e9d7a5b.json | 7 +++++++
 5 files changed, 35 insertions(+)
 create mode 100644 change/@fluentui-react-checkbox-94e0861e-f646-46f7-ae40-eb2b0b0f59ca.json
 create mode 100644 change/@fluentui-react-popover-b12a35f1-9fa8-418f-af79-dc3fc7ea18bb.json
 create mode 100644 change/@fluentui-react-spinner-b347a78d-da01-4087-9046-45412344cf1c.json
 create mode 100644 change/@fluentui-react-switch-23635943-537c-42d9-b219-575f3820e354.json
 create mode 100644 change/@fluentui-react-tooltip-80b8fd2e-8725-4e1e-ad43-3d4a2e9d7a5b.json

diff --git a/change/@fluentui-react-checkbox-94e0861e-f646-46f7-ae40-eb2b0b0f59ca.json b/change/@fluentui-react-checkbox-94e0861e-f646-46f7-ae40-eb2b0b0f59ca.json
new file mode 100644
index 0000000000000..266cd64bb2de2
--- /dev/null
+++ b/change/@fluentui-react-checkbox-94e0861e-f646-46f7-ae40-eb2b0b0f59ca.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: update color tokens",
+  "packageName": "@fluentui/react-checkbox",
+  "email": "seanmonahan@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-popover-b12a35f1-9fa8-418f-af79-dc3fc7ea18bb.json b/change/@fluentui-react-popover-b12a35f1-9fa8-418f-af79-dc3fc7ea18bb.json
new file mode 100644
index 0000000000000..82ceb9a09ab38
--- /dev/null
+++ b/change/@fluentui-react-popover-b12a35f1-9fa8-418f-af79-dc3fc7ea18bb.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: update color tokens",
+  "packageName": "@fluentui/react-popover",
+  "email": "seanmonahan@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-spinner-b347a78d-da01-4087-9046-45412344cf1c.json b/change/@fluentui-react-spinner-b347a78d-da01-4087-9046-45412344cf1c.json
new file mode 100644
index 0000000000000..f15038c532c70
--- /dev/null
+++ b/change/@fluentui-react-spinner-b347a78d-da01-4087-9046-45412344cf1c.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: update color tokens",
+  "packageName": "@fluentui/react-spinner",
+  "email": "seanmonahan@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-switch-23635943-537c-42d9-b219-575f3820e354.json b/change/@fluentui-react-switch-23635943-537c-42d9-b219-575f3820e354.json
new file mode 100644
index 0000000000000..f3710527bb26a
--- /dev/null
+++ b/change/@fluentui-react-switch-23635943-537c-42d9-b219-575f3820e354.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: update color tokens",
+  "packageName": "@fluentui/react-switch",
+  "email": "seanmonahan@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-tooltip-80b8fd2e-8725-4e1e-ad43-3d4a2e9d7a5b.json b/change/@fluentui-react-tooltip-80b8fd2e-8725-4e1e-ad43-3d4a2e9d7a5b.json
new file mode 100644
index 0000000000000..10e4d3e71283b
--- /dev/null
+++ b/change/@fluentui-react-tooltip-80b8fd2e-8725-4e1e-ad43-3d4a2e9d7a5b.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: update color tokens",
+  "packageName": "@fluentui/react-tooltip",
+  "email": "seanmonahan@microsoft.com",
+  "dependentChangeType": "patch"
+}

From a4c0d4bd253d04ae52b81fff6f9d23fe904bc62f Mon Sep 17 00:00:00 2001
From: Sean Monahan <seanmonahan@microsoft.com>
Date: Tue, 26 Jul 2022 11:32:28 -0700
Subject: [PATCH 11/25] add new tokens to v9ThemeShim

---
 apps/public-docsite-v9/src/shims/ThemeShim/v9ThemeShim.ts | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/apps/public-docsite-v9/src/shims/ThemeShim/v9ThemeShim.ts b/apps/public-docsite-v9/src/shims/ThemeShim/v9ThemeShim.ts
index 9d4fa77d734a3..cc93ee7513ed7 100644
--- a/apps/public-docsite-v9/src/shims/ThemeShim/v9ThemeShim.ts
+++ b/apps/public-docsite-v9/src/shims/ThemeShim/v9ThemeShim.ts
@@ -6,7 +6,7 @@ import {
   Theme as ThemeV9,
   webLightTheme,
 } from '@fluentui/react-components';
-import { blackAlpha, whiteAlpha } from './themeDuplicates';
+import { blackAlpha, whiteAlpha, grey } from './themeDuplicates';
 
 /**
  * Creates v9 color tokens from a v8 palette.
@@ -53,6 +53,7 @@ const mapAliasColors = (palette: IPalette, inverted: boolean): ColorTokens => {
     colorNeutralForegroundInvertedPressed: palette.white,
     colorNeutralForegroundInvertedSelected: palette.white,
     colorNeutralForegroundOnBrand: palette.white,
+    colorNeutralForegroundInvertedStatic: palette.white,
     colorNeutralForegroundInvertedLink: palette.white,
     colorNeutralForegroundInvertedLinkHover: palette.white,
     colorNeutralForegroundInvertedLinkPressed: palette.white,
@@ -85,6 +86,7 @@ const mapAliasColors = (palette: IPalette, inverted: boolean): ColorTokens => {
     colorNeutralBackground5Pressed: palette.neutralLighter,
     colorNeutralBackground5Selected: palette.neutralLighterAlt,
     colorNeutralBackground6: palette.neutralLight,
+    colorNeutralBackgroundStatic: grey[20],
     colorNeutralBackgroundInverted: palette.neutralSecondary,
     colorSubtleBackground: 'transparent',
     colorSubtleBackgroundHover: palette.neutralLighter,

From fbf6c1da42b545a38f467b2fcc3a0de0e11e45ea Mon Sep 17 00:00:00 2001
From: Sean Monahan <seanmonahan@microsoft.com>
Date: Tue, 26 Jul 2022 12:21:34 -0700
Subject: [PATCH 12/25] update avatar color tokens in styles

---
 .../react-avatar/src/components/Avatar/useAvatarStyles.ts       | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-components/react-avatar/src/components/Avatar/useAvatarStyles.ts b/packages/react-components/react-avatar/src/components/Avatar/useAvatarStyles.ts
index 275a9117622ea..558d9cc1572c8 100644
--- a/packages/react-components/react-avatar/src/components/Avatar/useAvatarStyles.ts
+++ b/packages/react-components/react-avatar/src/components/Avatar/useAvatarStyles.ts
@@ -254,7 +254,7 @@ const useColorStyles = makeStyles({
     backgroundColor: tokens.colorNeutralBackground6,
   },
   brand: {
-    color: tokens.colorNeutralForegroundInverted,
+    color: tokens.colorNeutralForegroundInvertedStatic,
     backgroundColor: tokens.colorBrandBackgroundStatic,
   },
   'dark-red': {

From 2c3641423a05c16808ff4cf9d63655c00a0af232 Mon Sep 17 00:00:00 2001
From: Sean Monahan <seanmonahan@microsoft.com>
Date: Tue, 26 Jul 2022 12:28:44 -0700
Subject: [PATCH 13/25] update badge color tokens in styles

---
 .../react-badge/src/components/Badge/useBadgeStyles.ts          | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-components/react-badge/src/components/Badge/useBadgeStyles.ts b/packages/react-components/react-badge/src/components/Badge/useBadgeStyles.ts
index 03ff949c795ab..7bcffa609446e 100644
--- a/packages/react-components/react-badge/src/components/Badge/useBadgeStyles.ts
+++ b/packages/react-components/react-badge/src/components/Badge/useBadgeStyles.ts
@@ -187,7 +187,7 @@ const useRootStyles = makeStyles({
     color: tokens.colorPaletteDarkOrangeForeground3,
   },
   'outline-subtle': {
-    color: tokens.colorNeutralForegroundInverted,
+    color: tokens.colorNeutralForegroundInvertedStatic,
   },
   'outline-success': {
     color: tokens.colorPaletteGreenForeground2,

From 18be3543ef037c7ba68d7c025730b7c6aeb175a1 Mon Sep 17 00:00:00 2001
From: Sean Monahan <seanmonahan@microsoft.com>
Date: Tue, 26 Jul 2022 12:56:14 -0700
Subject: [PATCH 14/25] change files

---
 ...-react-avatar-cf0035ba-5a49-4a26-9473-2fc7a29d34cd.json | 7 +++++++
 ...i-react-badge-51dc5f10-7c9b-4b8c-9b1d-5ab8afc5ab54.json | 7 +++++++
 2 files changed, 14 insertions(+)
 create mode 100644 change/@fluentui-react-avatar-cf0035ba-5a49-4a26-9473-2fc7a29d34cd.json
 create mode 100644 change/@fluentui-react-badge-51dc5f10-7c9b-4b8c-9b1d-5ab8afc5ab54.json

diff --git a/change/@fluentui-react-avatar-cf0035ba-5a49-4a26-9473-2fc7a29d34cd.json b/change/@fluentui-react-avatar-cf0035ba-5a49-4a26-9473-2fc7a29d34cd.json
new file mode 100644
index 0000000000000..ae59886993ad1
--- /dev/null
+++ b/change/@fluentui-react-avatar-cf0035ba-5a49-4a26-9473-2fc7a29d34cd.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: update color tokens",
+  "packageName": "@fluentui/react-avatar",
+  "email": "seanmonahan@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-badge-51dc5f10-7c9b-4b8c-9b1d-5ab8afc5ab54.json b/change/@fluentui-react-badge-51dc5f10-7c9b-4b8c-9b1d-5ab8afc5ab54.json
new file mode 100644
index 0000000000000..9ce3e6e7717c5
--- /dev/null
+++ b/change/@fluentui-react-badge-51dc5f10-7c9b-4b8c-9b1d-5ab8afc5ab54.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: update color tokens",
+  "packageName": "@fluentui/react-badge",
+  "email": "seanmonahan@microsoft.com",
+  "dependentChangeType": "patch"
+}

From a837edda3e29cd3832b73c9378299a6dcf2043b8 Mon Sep 17 00:00:00 2001
From: Sean Monahan <seanmonahan@microsoft.com>
Date: Thu, 4 Aug 2022 15:10:39 -0700
Subject: [PATCH 15/25] switch: update background color token

Changed from `colorBrandBackground*` to `colorCompoundBrandBackground*`.
---
 .../react-switch/src/components/Switch/useSwitchStyles.ts   | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/react-components/react-switch/src/components/Switch/useSwitchStyles.ts b/packages/react-components/react-switch/src/components/Switch/useSwitchStyles.ts
index 9bdf9f76c58a7..170635e5a036b 100644
--- a/packages/react-components/react-switch/src/components/Switch/useSwitchStyles.ts
+++ b/packages/react-components/react-switch/src/components/Switch/useSwitchStyles.ts
@@ -134,21 +134,21 @@ const useInputStyles = makeStyles({
     // Enabled and checked
     ':enabled:checked': {
       [`& ~ .${switchClassNames.indicator}`]: {
-        backgroundColor: tokens.colorBrandBackground,
+        backgroundColor: tokens.colorCompoundBrandBackground,
         color: tokens.colorNeutralForegroundInverted,
         ...shorthands.borderColor(tokens.colorTransparentStroke),
       },
 
       ':hover': {
         [`& ~ .${switchClassNames.indicator}`]: {
-          backgroundColor: tokens.colorBrandBackgroundHover,
+          backgroundColor: tokens.colorCompoundBrandBackgroundHover,
           ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive),
         },
       },
 
       ':hover:active': {
         [`& ~ .${switchClassNames.indicator}`]: {
-          backgroundColor: tokens.colorBrandBackgroundPressed,
+          backgroundColor: tokens.colorCompoundBrandBackgroundPressed,
           ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive),
         },
       },

From a8f97329e085d829c9f91cca5ff5eb32f14d8651 Mon Sep 17 00:00:00 2001
From: Sean Monahan <seanmonahan@microsoft.com>
Date: Thu, 4 Aug 2022 15:24:31 -0700
Subject: [PATCH 16/25] badge: update color token for ghost/subtle appearance

---
 .../react-badge/src/components/Badge/useBadgeStyles.ts          | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-components/react-badge/src/components/Badge/useBadgeStyles.ts b/packages/react-components/react-badge/src/components/Badge/useBadgeStyles.ts
index 7bcffa609446e..6863a1230a847 100644
--- a/packages/react-components/react-badge/src/components/Badge/useBadgeStyles.ts
+++ b/packages/react-components/react-badge/src/components/Badge/useBadgeStyles.ts
@@ -155,7 +155,7 @@ const useRootStyles = makeStyles({
     color: tokens.colorPaletteDarkOrangeForeground3,
   },
   'ghost-subtle': {
-    color: tokens.colorNeutralForegroundInverted,
+    color: tokens.colorNeutralForegroundInvertedStatic,
   },
   'ghost-success': {
     color: tokens.colorPaletteGreenForeground3,

From d9e52317bf52c9424be4dd4810f22b4c82329569 Mon Sep 17 00:00:00 2001
From: Sean Monahan <seanmonahan@microsoft.com>
Date: Fri, 5 Aug 2022 09:29:13 -0700
Subject: [PATCH 17/25] spinner: update color tokens and styles

Updates color tokens for better contrast and accessibility.
Simplifies some of the styling logic.
---
 .../components/Spinner/useSpinnerStyles.ts    | 35 ++++++++++---------
 .../Spinner/SpinnerAppearance.stories.tsx     | 12 +++++--
 2 files changed, 28 insertions(+), 19 deletions(-)

diff --git a/packages/react-components/react-spinner/src/components/Spinner/useSpinnerStyles.ts b/packages/react-components/react-spinner/src/components/Spinner/useSpinnerStyles.ts
index 2d4e01401a9e6..dd414d29deb04 100644
--- a/packages/react-components/react-spinner/src/components/Spinner/useSpinnerStyles.ts
+++ b/packages/react-components/react-spinner/src/components/Spinner/useSpinnerStyles.ts
@@ -106,7 +106,7 @@ const useLoaderStyles = makeStyles({
     },
   },
 
-  extraSmall: {
+  'extra-small': {
     ['& > svg']: {
       height: spinnnerSizes.extraSmall,
       width: spinnnerSizes.extraSmall,
@@ -150,7 +150,7 @@ const useLoaderStyles = makeStyles({
     },
   },
 
-  extraLarge: {
+  'extra-large': {
     ['& > svg']: {
       height: spinnnerSizes.extraLarge,
       width: spinnnerSizes.extraLarge,
@@ -176,7 +176,7 @@ const useLoaderStyles = makeStyles({
 const useTrackStyles = makeStyles({
   inverted: {
     ['& > svg > circle.fui-Spinner__Tail']: {
-      stroke: tokens.colorNeutralForegroundInvertedStatic,
+      stroke: tokens.colorNeutralStrokeOnBrand2,
       animationName: {
         '0%': {
           strokeDasharray: '1,150',
@@ -207,8 +207,7 @@ const useTrackStyles = makeStyles({
     },
 
     ['& > svg > circle.fui-Spinner__Track']: {
-      stroke: tokens.colorNeutralBackgroundInverted,
-      opacity: 0.2,
+      stroke: 'rgba(255, 255, 255, 0.2)', // this is whiteAlpha[20] but that token is not exported
     },
   },
   primary: {
@@ -245,7 +244,7 @@ const useTrackStyles = makeStyles({
       },
     },
     ['& > svg > circle.fui-Spinner__Track']: {
-      stroke: tokens.colorNeutralBackground4,
+      stroke: tokens.colorBrandStroke2,
       '@media screen and (forced-colors: active)': {
         stroke: tokens.colorNeutralBackgroundInverted,
       },
@@ -255,12 +254,17 @@ const useTrackStyles = makeStyles({
 
 const useLabelStyles = makeStyles({
   // style for label
+  inverted: {
+    color: tokens.colorNeutralForegroundInvertedStatic,
+  },
+
+  primary: {}, // no change
 
   tiny: {
     ...typographyStyles.body1,
   },
 
-  extraSmall: {
+  'extra-small': {
     ...typographyStyles.body1,
   },
 
@@ -276,7 +280,7 @@ const useLabelStyles = makeStyles({
     ...typographyStyles.subtitle2,
   },
 
-  extraLarge: {
+  'extra-large': {
     ...typographyStyles.subtitle2,
   },
 
@@ -289,7 +293,7 @@ const useLabelStyles = makeStyles({
  * Apply styling to the Spinner slots based on the state
  */
 export const useSpinnerStyles_unstable = (state: SpinnerState): SpinnerState => {
-  const { labelPosition, size = 'medium' } = state;
+  const { labelPosition, size, appearance } = state;
   const rootStyles = useRootStyles();
   const spinnerStyles = useLoaderStyles();
   const labelStyles = useLabelStyles();
@@ -302,23 +306,20 @@ export const useSpinnerStyles_unstable = (state: SpinnerState): SpinnerState =>
     (labelPosition === 'before' || labelPosition === 'after') && rootStyles.horizontal,
     state.root.className,
   );
-  if (state.spinner && state.appearance) {
+  if (state.spinner && appearance) {
     state.spinner.className = mergeClasses(
       spinnerClassNames.spinner,
       spinnerStyles.spinnerSVG,
-      size === 'extra-small' && spinnerStyles.extraSmall,
-      size === 'extra-large' && spinnerStyles.extraLarge,
-      size !== 'extra-large' && size !== 'extra-small' && spinnerStyles[size],
-      trackStyles[state.appearance],
+      spinnerStyles[size],
+      trackStyles[appearance],
       state.spinner.className,
     );
   }
   if (state.label) {
     state.label.className = mergeClasses(
       spinnerClassNames.label,
-      size === 'extra-small' && labelStyles.extraSmall,
-      size === 'extra-large' && labelStyles.extraLarge,
-      size !== 'extra-large' && size !== 'extra-small' && labelStyles[size],
+      labelStyles[size],
+      labelStyles[appearance],
       state.label.className,
     );
   }
diff --git a/packages/react-components/react-spinner/src/stories/Spinner/SpinnerAppearance.stories.tsx b/packages/react-components/react-spinner/src/stories/Spinner/SpinnerAppearance.stories.tsx
index 1554e96e5b845..e58a67cb36ff1 100644
--- a/packages/react-components/react-spinner/src/stories/Spinner/SpinnerAppearance.stories.tsx
+++ b/packages/react-components/react-spinner/src/stories/Spinner/SpinnerAppearance.stories.tsx
@@ -1,10 +1,16 @@
 import * as React from 'react';
-import { makeStyles, shorthands, Spinner } from '@fluentui/react-components';
+import { makeStyles, shorthands, Spinner, tokens } from '@fluentui/react-components';
 
 const useStyles = makeStyles({
   container: {
     '> div': { ...shorthands.padding('20px') },
   },
+
+  // Inverted Spinners are meant as overlays (e.g., over an image or similar)
+  // so give it a solid, dark background so it is visible in all themes.
+  invertedWrapper: {
+    backgroundColor: tokens.colorPaletteBerryForeground1,
+  },
 });
 
 export const Appearance = () => {
@@ -14,7 +20,9 @@ export const Appearance = () => {
     <div className={styles.container}>
       <Spinner appearance="primary" label="Primary Spinner" />
 
-      <Spinner appearance="inverted" label="Inverted Spinner" />
+      <div className={styles.invertedWrapper}>
+        <Spinner appearance="inverted" label="Inverted Spinner" />
+      </div>
     </div>
   );
 };

From 742478b18066895f71d73f4c70a0b34ba6343387 Mon Sep 17 00:00:00 2001
From: Sean Monahan <seanmonahan@microsoft.com>
Date: Fri, 5 Aug 2022 09:50:48 -0700
Subject: [PATCH 18/25] theme: update high contrast color token

---
 .../react-components/react-theme/src/alias/highContrastColor.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-components/react-theme/src/alias/highContrastColor.ts b/packages/react-components/react-theme/src/alias/highContrastColor.ts
index 07a14a8db88e1..6ef05cca2f294 100644
--- a/packages/react-components/react-theme/src/alias/highContrastColor.ts
+++ b/packages/react-components/react-theme/src/alias/highContrastColor.ts
@@ -137,7 +137,7 @@ export const generateColorTokens = (): ColorTokens => ({
   colorNeutralStrokeOnBrand2Pressed: hcCanvasText, // CanvasText Global.Color.hcCanvasText
   colorNeutralStrokeOnBrand2Selected: hcCanvasText, // CanvasText Global.Color.hcCanvasText
   colorBrandStroke1: hcCanvasText, // CanvasText Global.Color.hcCanvasText
-  colorBrandStroke2: hcCanvas, // Canvas Global.Color.hcCanvas
+  colorBrandStroke2: hcCanvasText, // CanvasText Global.Color.hcCanvasText
   colorCompoundBrandStroke: hcHighlight, // Highlight Global.Color.hcHighlight
   colorCompoundBrandStrokeHover: hcHighlight, // Highlight Global.Color.hcHighlight
   colorCompoundBrandStrokePressed: hcHighlight, // Highlight Global.Color.hcHighlight

From a658eea3bd5505079b52591bb104b39ed637efae Mon Sep 17 00:00:00 2001
From: Sean Monahan <seanmonahan@microsoft.com>
Date: Fri, 5 Aug 2022 10:49:53 -0700
Subject: [PATCH 19/25] tokens: update teams dark color neutral foreground
 inverted values

---
 .../react-theme/src/alias/teamsDarkColor.ts               | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/react-components/react-theme/src/alias/teamsDarkColor.ts b/packages/react-components/react-theme/src/alias/teamsDarkColor.ts
index 2ce893ed772a6..5642f80cd2b2e 100644
--- a/packages/react-components/react-theme/src/alias/teamsDarkColor.ts
+++ b/packages/react-components/react-theme/src/alias/teamsDarkColor.ts
@@ -37,10 +37,10 @@ export const generateColorTokens = (brand: BrandVariants): ColorTokens => ({
   colorBrandForeground1: brand[100], // #2899f5 Global.Color.Brand.100
   colorBrandForeground2: brand[110], // #3aa0f3 Global.Color.Brand.110
   colorNeutralForeground1Static: grey[14], // #242424 Global.Color.Grey.14
-  colorNeutralForegroundInverted: white, // #ffffff Global.Color.White
-  colorNeutralForegroundInvertedHover: white, // #ffffff Global.Color.White
-  colorNeutralForegroundInvertedPressed: white, // #ffffff Global.Color.White
-  colorNeutralForegroundInvertedSelected: white, // #ffffff Global.Color.White
+  colorNeutralForegroundInverted: grey[14], // #242424 Global.Color.Grey.14
+  colorNeutralForegroundInvertedHover: grey[14], // #242424 Global.Color.Grey.14
+  colorNeutralForegroundInvertedPressed: grey[14], // #242424 Global.Color.Grey.14
+  colorNeutralForegroundInvertedSelected: grey[14], // #242424 Global.Color.Grey.14
   colorNeutralForegroundOnBrand: white, // #ffffff Global.Color.White
   colorNeutralForegroundInvertedStatic: white, // #ffffff Global.Color.White
   colorNeutralForegroundInvertedLink: white, // #ffffff Global.Color.White

From b11fc5355b81f64aef59246700e5240d90cc4434 Mon Sep 17 00:00:00 2001
From: Sean Monahan <seanmonahan@microsoft.com>
Date: Fri, 5 Aug 2022 10:56:09 -0700
Subject: [PATCH 20/25] tokens: update teams dark color neutral background
 inverted value

---
 .../react-components/react-theme/src/alias/teamsDarkColor.ts    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-components/react-theme/src/alias/teamsDarkColor.ts b/packages/react-components/react-theme/src/alias/teamsDarkColor.ts
index 5642f80cd2b2e..89c1ae9850e8f 100644
--- a/packages/react-components/react-theme/src/alias/teamsDarkColor.ts
+++ b/packages/react-components/react-theme/src/alias/teamsDarkColor.ts
@@ -76,7 +76,7 @@ export const generateColorTokens = (brand: BrandVariants): ColorTokens => ({
   colorNeutralBackground5Selected: grey[10], // #1a1a1a Global.Color.Grey.10
   colorNeutralBackground6: grey[20], // #333333 Global.Color.Grey.20
   colorNeutralBackgroundStatic: grey[24], // #3d3d3d Global.Color.Grey.24
-  colorNeutralBackgroundInverted: white, // #ffffff Global.Color.White
+  colorNeutralBackgroundInverted: grey[20], // #333333 Global.Color.Grey.20
   colorSubtleBackground: 'transparent', // transparent undefined
   colorSubtleBackgroundHover: grey[22], // #383838 Global.Color.Grey.22
   colorSubtleBackgroundPressed: grey[18], // #2e2e2e Global.Color.Grey.18

From f76e0bcc86b8eb4d53a0d36534b24ffe2d275b98 Mon Sep 17 00:00:00 2001
From: Sean Monahan <seanmonahan@microsoft.com>
Date: Fri, 5 Aug 2022 11:02:09 -0700
Subject: [PATCH 21/25] theme-sass: add new color tokens

---
 .../react-components/react-theme-sass/sass/colorTokens.scss     | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/react-components/react-theme-sass/sass/colorTokens.scss b/packages/react-components/react-theme-sass/sass/colorTokens.scss
index 7cc8f32db26f3..bba56621996b1 100644
--- a/packages/react-components/react-theme-sass/sass/colorTokens.scss
+++ b/packages/react-components/react-theme-sass/sass/colorTokens.scss
@@ -38,6 +38,7 @@ $colorNeutralForegroundInvertedHover: var(--colorNeutralForegroundInvertedHover)
 $colorNeutralForegroundInvertedPressed: var(--colorNeutralForegroundInvertedPressed);
 $colorNeutralForegroundInvertedSelected: var(--colorNeutralForegroundInvertedSelected);
 $colorNeutralForegroundOnBrand: var(--colorNeutralForegroundOnBrand);
+$colorNeutralForegroundInvertedStatic: var(--colorNeutralForegroundInvertedStatic);
 $colorNeutralForegroundInvertedLink: var(--colorNeutralForegroundInvertedLink);
 $colorNeutralForegroundInvertedLinkHover: var(--colorNeutralForegroundInvertedLinkHover);
 $colorNeutralForegroundInvertedLinkPressed: var(--colorNeutralForegroundInvertedLinkPressed);
@@ -70,6 +71,7 @@ $colorNeutralBackground5Hover: var(--colorNeutralBackground5Hover);
 $colorNeutralBackground5Pressed: var(--colorNeutralBackground5Pressed);
 $colorNeutralBackground5Selected: var(--colorNeutralBackground5Selected);
 $colorNeutralBackground6: var(--colorNeutralBackground6);
+$colorNeutralBackgroundStatic: var(--colorNeutralBackgroundStatic);
 $colorNeutralBackgroundInverted: var(--colorNeutralBackgroundInverted);
 $colorSubtleBackground: var(--colorSubtleBackground);
 $colorSubtleBackgroundHover: var(--colorSubtleBackgroundHover);

From 6099ff6ee5f39508dac3924792aaf9d790326395 Mon Sep 17 00:00:00 2001
From: Sean Monahan <seanmonahan@microsoft.com>
Date: Fri, 5 Aug 2022 11:04:09 -0700
Subject: [PATCH 22/25] theme-sass change files

---
 ...ct-theme-sass-7c908a09-e43e-4e41-96c5-60c62bbc3249.json | 7 +++++++
 1 file changed, 7 insertions(+)
 create mode 100644 change/@fluentui-react-theme-sass-7c908a09-e43e-4e41-96c5-60c62bbc3249.json

diff --git a/change/@fluentui-react-theme-sass-7c908a09-e43e-4e41-96c5-60c62bbc3249.json b/change/@fluentui-react-theme-sass-7c908a09-e43e-4e41-96c5-60c62bbc3249.json
new file mode 100644
index 0000000000000..9466cb9987d48
--- /dev/null
+++ b/change/@fluentui-react-theme-sass-7c908a09-e43e-4e41-96c5-60c62bbc3249.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "feat: add new color tokens",
+  "packageName": "@fluentui/react-theme-sass",
+  "email": "seanmonahan@microsoft.com",
+  "dependentChangeType": "patch"
+}

From 87ed060d68d132143ff0cc34d3426cfb896a2a43 Mon Sep 17 00:00:00 2001
From: Sean Monahan <seanmonahan@microsoft.com>
Date: Fri, 5 Aug 2022 12:32:07 -0700
Subject: [PATCH 23/25] spinner: update vr tests for inverted appearance

Adds a background wrapper to ensure inverted Spinners are consistently
visible in all test cases.
---
 .../src/stories/Spinner.stories.tsx           | 156 ++++++++++++++----
 1 file changed, 122 insertions(+), 34 deletions(-)

diff --git a/apps/vr-tests-react-components/src/stories/Spinner.stories.tsx b/apps/vr-tests-react-components/src/stories/Spinner.stories.tsx
index 9ee1e9dd17123..9e03fa77beb53 100644
--- a/apps/vr-tests-react-components/src/stories/Spinner.stories.tsx
+++ b/apps/vr-tests-react-components/src/stories/Spinner.stories.tsx
@@ -3,6 +3,13 @@ import { storiesOf } from '@storybook/react';
 import { Spinner } from '@fluentui/react-spinner';
 import { TestWrapperDecoratorNoAnimation } from '../utilities/TestWrapperDecorator';
 
+// Inverted Spinners are meant to be used over a dark background
+// or photo. This wrapper ensures a dark background so the Spinners
+// are consistently visible.
+const InvertedWrapper: React.FC = ({ children }) => {
+  return <div style={{ background: '#af33a1', padding: '10px' }}>{children}</div>;
+};
+
 storiesOf('Spinner converged', module)
   .addDecorator(TestWrapperDecoratorNoAnimation)
   .addStory('Primary', () => <Spinner className="test-class" />, {
@@ -75,17 +82,37 @@ storiesOf('Spinner converged', module)
     includeHighContrast: true,
     includeDarkMode: true,
   })
-  .addStory('Inverted', () => <Spinner className="test-class" appearance="inverted" />, {
-    includeHighContrast: true,
-    includeDarkMode: true,
-  })
-  .addStory('Inverted with Label', () => <Spinner className="test-class" appearance="inverted" label="Loading" />, {
-    includeHighContrast: true,
-    includeDarkMode: true,
-  })
+  .addStory(
+    'Inverted',
+    () => (
+      <InvertedWrapper>
+        <Spinner className="test-class" appearance="inverted" />
+      </InvertedWrapper>
+    ),
+    {
+      includeHighContrast: true,
+      includeDarkMode: true,
+    },
+  )
+  .addStory(
+    'Inverted with Label',
+    () => (
+      <InvertedWrapper>
+        <Spinner className="test-class" appearance="inverted" label="Loading" />
+      </InvertedWrapper>
+    ),
+    {
+      includeHighContrast: true,
+      includeDarkMode: true,
+    },
+  )
   .addStory(
     'Inverted with Label Before',
-    () => <Spinner className="test-class" appearance="inverted" labelPosition="before" label="Loading" />,
+    () => (
+      <InvertedWrapper>
+        <Spinner className="test-class" appearance="inverted" labelPosition="before" label="Loading" />
+      </InvertedWrapper>
+    ),
     {
       includeHighContrast: true,
       includeDarkMode: true,
@@ -93,7 +120,11 @@ storiesOf('Spinner converged', module)
   )
   .addStory(
     'Inverted with Label After',
-    () => <Spinner className="test-class" appearance="inverted" labelPosition="after" label="Loading" />,
+    () => (
+      <InvertedWrapper>
+        <Spinner className="test-class" appearance="inverted" labelPosition="after" label="Loading" />
+      </InvertedWrapper>
+    ),
     {
       includeHighContrast: true,
       includeDarkMode: true,
@@ -101,7 +132,11 @@ storiesOf('Spinner converged', module)
   )
   .addStory(
     'Inverted with Label Above',
-    () => <Spinner className="test-class" appearance="inverted" labelPosition="above" label="Loading" />,
+    () => (
+      <InvertedWrapper>
+        <Spinner className="test-class" appearance="inverted" labelPosition="above" label="Loading" />
+      </InvertedWrapper>
+    ),
     {
       includeHighContrast: true,
       includeDarkMode: true,
@@ -109,45 +144,98 @@ storiesOf('Spinner converged', module)
   )
   .addStory(
     'Inverted with Label Below',
-    () => <Spinner className="test-class" appearance="inverted" labelPosition="below" label="Loading" />,
+    () => (
+      <InvertedWrapper>
+        <Spinner className="test-class" appearance="inverted" labelPosition="below" label="Loading" />
+      </InvertedWrapper>
+    ),
+    {
+      includeHighContrast: true,
+      includeDarkMode: true,
+    },
+  )
+  .addStory(
+    'Primary with Size Tiny',
+    () => (
+      <InvertedWrapper>
+        <Spinner className="test-class" appearance="inverted" size="tiny" />
+      </InvertedWrapper>
+    ),
     {
       includeHighContrast: true,
       includeDarkMode: true,
     },
   )
-  .addStory('Primary with Size Tiny', () => <Spinner className="test-class" appearance="inverted" size="tiny" />, {
-    includeHighContrast: true,
-    includeDarkMode: true,
-  })
   .addStory(
     'Inverted with Size Extra Small',
-    () => <Spinner className="test-class" appearance="inverted" size="extra-small" />,
+    () => (
+      <InvertedWrapper>
+        {' '}
+        <Spinner className="test-class" appearance="inverted" size="extra-small" />
+      </InvertedWrapper>
+    ),
+    {
+      includeHighContrast: true,
+      includeDarkMode: true,
+    },
+  )
+  .addStory(
+    'Inverted with Size Small',
+    () => (
+      <InvertedWrapper>
+        <Spinner className="test-class" appearance="inverted" size="small" />
+      </InvertedWrapper>
+    ),
+    {
+      includeHighContrast: true,
+      includeDarkMode: true,
+    },
+  )
+  .addStory(
+    'Inverted with Size Medium',
+    () => (
+      <InvertedWrapper>
+        <Spinner className="test-class" appearance="inverted" size="medium" />
+      </InvertedWrapper>
+    ),
+    {
+      includeHighContrast: true,
+      includeDarkMode: true,
+    },
+  )
+  .addStory(
+    'Inverted with Size Large',
+    () => (
+      <InvertedWrapper>
+        <Spinner className="test-class" appearance="inverted" size="large" />
+      </InvertedWrapper>
+    ),
     {
       includeHighContrast: true,
       includeDarkMode: true,
     },
   )
-  .addStory('Inverted with Size Small', () => <Spinner className="test-class" appearance="inverted" size="small" />, {
-    includeHighContrast: true,
-    includeDarkMode: true,
-  })
-  .addStory('Inverted with Size Medium', () => <Spinner className="test-class" appearance="inverted" size="medium" />, {
-    includeHighContrast: true,
-    includeDarkMode: true,
-  })
-  .addStory('Inverted with Size Large', () => <Spinner className="test-class" appearance="inverted" size="large" />, {
-    includeHighContrast: true,
-    includeDarkMode: true,
-  })
   .addStory(
     'Inverted with Size Extra Large',
-    () => <Spinner className="test-class" appearance="inverted" size="extra-large" />,
+    () => (
+      <InvertedWrapper>
+        <Spinner className="test-class" appearance="inverted" size="extra-large" />
+      </InvertedWrapper>
+    ),
     {
       includeHighContrast: true,
       includeDarkMode: true,
     },
   )
-  .addStory('Inverted with Huge', () => <Spinner className="test-class" appearance="inverted" size="huge" />, {
-    includeHighContrast: true,
-    includeDarkMode: true,
-  });
+  .addStory(
+    'Inverted with Huge',
+    () => (
+      <InvertedWrapper>
+        <Spinner className="test-class" appearance="inverted" size="huge" />
+      </InvertedWrapper>
+    ),
+    {
+      includeHighContrast: true,
+      includeDarkMode: true,
+    },
+  );

From d3bc4b13101c42fa1eab49146b892e8e21fd2c2d Mon Sep 17 00:00:00 2001
From: Sean Monahan <seanmonahan@microsoft.com>
Date: Tue, 9 Aug 2022 17:01:21 -0700
Subject: [PATCH 24/25] pr comments

---
 .../src/stories/Spinner.stories.tsx                      | 4 ++--
 .../src/stories/Popover/PopoverAppearance.stories.tsx    | 9 ++++-----
 2 files changed, 6 insertions(+), 7 deletions(-)

diff --git a/apps/vr-tests-react-components/src/stories/Spinner.stories.tsx b/apps/vr-tests-react-components/src/stories/Spinner.stories.tsx
index 9e03fa77beb53..a65bc9a84bceb 100644
--- a/apps/vr-tests-react-components/src/stories/Spinner.stories.tsx
+++ b/apps/vr-tests-react-components/src/stories/Spinner.stories.tsx
@@ -1,13 +1,14 @@
 import * as React from 'react';
 import { storiesOf } from '@storybook/react';
 import { Spinner } from '@fluentui/react-spinner';
+import { tokens } from '@fluentui/react-theme';
 import { TestWrapperDecoratorNoAnimation } from '../utilities/TestWrapperDecorator';
 
 // Inverted Spinners are meant to be used over a dark background
 // or photo. This wrapper ensures a dark background so the Spinners
 // are consistently visible.
 const InvertedWrapper: React.FC = ({ children }) => {
-  return <div style={{ background: '#af33a1', padding: '10px' }}>{children}</div>;
+  return <div style={{ background: tokens.colorPaletteBerryForeground1, padding: '10px' }}>{children}</div>;
 };
 
 storiesOf('Spinner converged', module)
@@ -170,7 +171,6 @@ storiesOf('Spinner converged', module)
     'Inverted with Size Extra Small',
     () => (
       <InvertedWrapper>
-        {' '}
         <Spinner className="test-class" appearance="inverted" size="extra-small" />
       </InvertedWrapper>
     ),
diff --git a/packages/react-components/react-popover/src/stories/Popover/PopoverAppearance.stories.tsx b/packages/react-components/react-popover/src/stories/Popover/PopoverAppearance.stories.tsx
index 8233b19358e41..69025bdba04b7 100644
--- a/packages/react-components/react-popover/src/stories/Popover/PopoverAppearance.stories.tsx
+++ b/packages/react-components/react-popover/src/stories/Popover/PopoverAppearance.stories.tsx
@@ -1,6 +1,5 @@
 import * as React from 'react';
 import { makeStyles, Button, Popover, PopoverSurface, PopoverTrigger, tokens } from '@fluentui/react-components';
-import type { PopoverProps } from '@fluentui/react-components';
 
 const useStyles = makeStyles({
   contentHeader: {
@@ -27,12 +26,12 @@ const ExampleContent = () => {
   );
 };
 
-export const Appearance = (props: PopoverProps) => {
+export const Appearance = () => {
   const layoutStyles = useLayoutStyles();
 
   return (
     <div className={layoutStyles.root}>
-      <Popover {...props}>
+      <Popover>
         <PopoverTrigger>
           <Button>Default appearance Popover trigger</Button>
         </PopoverTrigger>
@@ -42,7 +41,7 @@ export const Appearance = (props: PopoverProps) => {
         </PopoverSurface>
       </Popover>
 
-      <Popover {...props} appearance="brand">
+      <Popover appearance="brand">
         <PopoverTrigger>
           <Button>Brand appearance Popover trigger</Button>
         </PopoverTrigger>
@@ -52,7 +51,7 @@ export const Appearance = (props: PopoverProps) => {
         </PopoverSurface>
       </Popover>
 
-      <Popover {...props} appearance="inverted">
+      <Popover appearance="inverted">
         <PopoverTrigger>
           <Button>Inverted appearance Popover trigger</Button>
         </PopoverTrigger>

From 62b3a34c56314aeead63a1ecdb7b9a6e4a00784e Mon Sep 17 00:00:00 2001
From: Sean Monahan <seanmonahan@microsoft.com>
Date: Wed, 10 Aug 2022 12:17:19 -0700
Subject: [PATCH 25/25] spinner: hard code inverted story background

We want to avoid using foreground tokens for backgrounds.
---
 .../src/stories/Spinner/SpinnerAppearance.stories.tsx         | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/react-components/react-spinner/src/stories/Spinner/SpinnerAppearance.stories.tsx b/packages/react-components/react-spinner/src/stories/Spinner/SpinnerAppearance.stories.tsx
index e58a67cb36ff1..c7b8b35b880ff 100644
--- a/packages/react-components/react-spinner/src/stories/Spinner/SpinnerAppearance.stories.tsx
+++ b/packages/react-components/react-spinner/src/stories/Spinner/SpinnerAppearance.stories.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { makeStyles, shorthands, Spinner, tokens } from '@fluentui/react-components';
+import { makeStyles, shorthands, Spinner } from '@fluentui/react-components';
 
 const useStyles = makeStyles({
   container: {
@@ -9,7 +9,7 @@ const useStyles = makeStyles({
   // Inverted Spinners are meant as overlays (e.g., over an image or similar)
   // so give it a solid, dark background so it is visible in all themes.
   invertedWrapper: {
-    backgroundColor: tokens.colorPaletteBerryForeground1,
+    backgroundColor: '#af33a1',
   },
 });