From 0d473c1235c1a90cb80e1f2eb1224f59acf97695 Mon Sep 17 00:00:00 2001
From: marigome-msft <marigome@microsoft.com>
Date: Wed, 30 Nov 2022 15:53:05 -0800
Subject: [PATCH 01/11] chore(react-field): migrate to new package structure
 (#25817)

---
 ...-e41be758-df09-47c8-bd8f-4ddb5b61c2ad.json |  7 ++++
 ...-538ef65c-6be2-4dc8-9cc2-c00fd59a1e79.json |  7 ++++
 .../src/components/Alert/useAlertStyles.ts    | 37 +++++++++++++++----
 .../stories/Alert/AlertAction.stories.tsx     | 33 ++++++++++-------
 .../stories/Alert/AlertAppearance.stories.tsx | 15 ++++++--
 .../stories/Alert/AlertDefault.stories.tsx    | 11 +++++-
 .../react-components/react-field/.npmignore   |  5 ++-
 .../react-field/.storybook/main.js            |  7 +---
 .../react-field/.storybook/tsconfig.json      |  2 +-
 .../react-field/{ => docs}/Spec.md            |  0
 .../stories/Field/FieldDefault.stories.tsx    |  0
 .../stories/Field/FieldDescription.md         |  0
 .../stories/Field/FieldHint.stories.tsx       |  0
 .../stories/Field/FieldHorizontal.stories.tsx |  0
 .../stories/Field/FieldLabel.stories.tsx      |  0
 .../stories/Field/FieldRequired.stories.tsx   |  0
 .../stories/Field/FieldSize.stories.tsx       |  0
 .../Field/FieldValidationState.stories.tsx    |  0
 .../{src => }/stories/Field/index.stories.tsx |  0
 .../react-field/tsconfig.lib.json             | 10 +----
 .../react-components/react-tooltip/.npmignore |  5 ++-
 .../react-tooltip/.storybook/main.js          |  2 +-
 .../react-tooltip/.storybook/tsconfig.json    |  2 +-
 .../react-tooltip/{ => docs}/MIGRATION.md     |  0
 .../react-tooltip/{ => docs}/Spec.md          |  0
 .../src/components/Tooltip/Tooltip.test.tsx   |  2 +-
 .../src/{common => testing}/isConformant.ts   |  0
 .../Tooltip/TooltipControlled.stories.tsx     |  0
 .../Tooltip/TooltipCustomMount.stories.tsx    |  0
 .../Tooltip/TooltipDefault.stories.tsx        |  0
 .../stories/Tooltip/TooltipDescription.md     |  0
 .../Tooltip/TooltipInverted.stories.tsx       |  0
 .../Tooltip/TooltipPositioning.stories.tsx    |  0
 ...TooltipRelationshipDescription.stories.tsx |  0
 .../TooltipRelationshipLabel.stories.tsx      |  0
 .../stories/Tooltip/TooltipStyled.stories.tsx |  0
 .../stories/Tooltip/TooltipTarget.stories.tsx |  0
 .../Tooltip/TooltipWithArrow.stories.tsx      |  0
 .../stories/Tooltip/index.stories.tsx         |  0
 .../react-tooltip/tsconfig.lib.json           |  2 +-
 .../react-tooltip/tsconfig.spec.json          | 10 ++++-
 41 files changed, 106 insertions(+), 51 deletions(-)
 create mode 100644 change/@fluentui-react-field-e41be758-df09-47c8-bd8f-4ddb5b61c2ad.json
 create mode 100644 change/@fluentui-react-tooltip-538ef65c-6be2-4dc8-9cc2-c00fd59a1e79.json
 rename packages/react-components/react-field/{ => docs}/Spec.md (100%)
 rename packages/react-components/react-field/{src => }/stories/Field/FieldDefault.stories.tsx (100%)
 rename packages/react-components/react-field/{src => }/stories/Field/FieldDescription.md (100%)
 rename packages/react-components/react-field/{src => }/stories/Field/FieldHint.stories.tsx (100%)
 rename packages/react-components/react-field/{src => }/stories/Field/FieldHorizontal.stories.tsx (100%)
 rename packages/react-components/react-field/{src => }/stories/Field/FieldLabel.stories.tsx (100%)
 rename packages/react-components/react-field/{src => }/stories/Field/FieldRequired.stories.tsx (100%)
 rename packages/react-components/react-field/{src => }/stories/Field/FieldSize.stories.tsx (100%)
 rename packages/react-components/react-field/{src => }/stories/Field/FieldValidationState.stories.tsx (100%)
 rename packages/react-components/react-field/{src => }/stories/Field/index.stories.tsx (100%)
 rename packages/react-components/react-tooltip/{ => docs}/MIGRATION.md (100%)
 rename packages/react-components/react-tooltip/{ => docs}/Spec.md (100%)
 rename packages/react-components/react-tooltip/src/{common => testing}/isConformant.ts (100%)
 rename packages/react-components/react-tooltip/{src => }/stories/Tooltip/TooltipControlled.stories.tsx (100%)
 rename packages/react-components/react-tooltip/{src => }/stories/Tooltip/TooltipCustomMount.stories.tsx (100%)
 rename packages/react-components/react-tooltip/{src => }/stories/Tooltip/TooltipDefault.stories.tsx (100%)
 rename packages/react-components/react-tooltip/{src => }/stories/Tooltip/TooltipDescription.md (100%)
 rename packages/react-components/react-tooltip/{src => }/stories/Tooltip/TooltipInverted.stories.tsx (100%)
 rename packages/react-components/react-tooltip/{src => }/stories/Tooltip/TooltipPositioning.stories.tsx (100%)
 rename packages/react-components/react-tooltip/{src => }/stories/Tooltip/TooltipRelationshipDescription.stories.tsx (100%)
 rename packages/react-components/react-tooltip/{src => }/stories/Tooltip/TooltipRelationshipLabel.stories.tsx (100%)
 rename packages/react-components/react-tooltip/{src => }/stories/Tooltip/TooltipStyled.stories.tsx (100%)
 rename packages/react-components/react-tooltip/{src => }/stories/Tooltip/TooltipTarget.stories.tsx (100%)
 rename packages/react-components/react-tooltip/{src => }/stories/Tooltip/TooltipWithArrow.stories.tsx (100%)
 rename packages/react-components/react-tooltip/{src => }/stories/Tooltip/index.stories.tsx (100%)

diff --git a/change/@fluentui-react-field-e41be758-df09-47c8-bd8f-4ddb5b61c2ad.json b/change/@fluentui-react-field-e41be758-df09-47c8-bd8f-4ddb5b61c2ad.json
new file mode 100644
index 00000000000000..8c677ec0c59cf0
--- /dev/null
+++ b/change/@fluentui-react-field-e41be758-df09-47c8-bd8f-4ddb5b61c2ad.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "chore: Migrate to new package structure.",
+  "packageName": "@fluentui/react-field",
+  "email": "tristan.watanabe@gmail.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-tooltip-538ef65c-6be2-4dc8-9cc2-c00fd59a1e79.json b/change/@fluentui-react-tooltip-538ef65c-6be2-4dc8-9cc2-c00fd59a1e79.json
new file mode 100644
index 00000000000000..958e0a5905649d
--- /dev/null
+++ b/change/@fluentui-react-tooltip-538ef65c-6be2-4dc8-9cc2-c00fd59a1e79.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: Migrate to new package structure.",
+  "packageName": "@fluentui/react-tooltip",
+  "email": "tristan.watanabe@gmail.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react-components/react-alert/src/components/Alert/useAlertStyles.ts b/packages/react-components/react-alert/src/components/Alert/useAlertStyles.ts
index c6ced1c43ef778..6989625e059a92 100644
--- a/packages/react-components/react-alert/src/components/Alert/useAlertStyles.ts
+++ b/packages/react-components/react-alert/src/components/Alert/useAlertStyles.ts
@@ -1,5 +1,5 @@
 import { tokens } from '@fluentui/react-theme';
-import { makeStyles, mergeClasses, shorthands } from '@griffel/react';
+import { GriffelStyle, makeStyles, mergeClasses, shorthands } from '@griffel/react';
 
 import type { AlertSlots, AlertState } from './Alert.types';
 import type { SlotClassNames } from '@fluentui/react-utilities';
@@ -18,7 +18,7 @@ const useStyles = makeStyles({
     minHeight: '44px',
     ...shorthands.padding('0', '12px'),
     ...shorthands.borderRadius('4px'),
-    ...shorthands.border('1px', 'solid', tokens.colorTransparentStrokeInteractive),
+    ...shorthands.border('1px', 'solid', tokens.colorTransparentStroke),
     boxShadow: tokens.shadow8,
     fontSize: tokens.fontSizeBase300,
     fontWeight: tokens.fontWeightSemibold,
@@ -26,7 +26,7 @@ const useStyles = makeStyles({
     backgroundColor: tokens.colorNeutralBackground1,
   },
   inverted: {
-    color: tokens.colorNeutralForegroundInverted,
+    color: tokens.colorNeutralForegroundInverted2,
     backgroundColor: tokens.colorNeutralBackgroundInverted,
   },
   icon: {
@@ -41,7 +41,7 @@ const useStyles = makeStyles({
     ...shorthands.padding('0'),
     minWidth: 0,
     marginLeft: 'auto',
-    color: tokens.colorBrandForegroundLink,
+    color: tokens.colorBrandForeground1,
   },
 });
 
@@ -60,17 +60,32 @@ const useIntentIconStyles = makeStyles({
   },
 });
 
+const useIntentIconStylesInverted = makeStyles({
+  warning: {
+    // TODO: update this when token is created
+    color: tokens.colorPaletteYellowForeground2,
+  },
+  info: {
+    color: tokens.colorNeutralForegroundInverted2,
+  },
+});
+
+const useActionButtonColorInverted = makeStyles({ action: { color: tokens.colorBrandForegroundInverted } });
+
 /**
  * Apply styling to the Alert slots based on the state
  */
 export const useAlertStyles_unstable = (state: AlertState): AlertState => {
   const styles = useStyles();
-  const intentIconStyles = useIntentIconStyles();
+  const inverted = state.appearance === 'inverted';
+  const intentIconStylesPrimary = useIntentIconStyles();
+  const mergedIntentIconStylesInverted = { ...intentIconStylesPrimary, ...useIntentIconStylesInverted() };
+  const actionStylesInverted = useActionButtonColorInverted();
 
   state.root.className = mergeClasses(
     alertClassNames.root,
     styles.root,
-    state.appearance !== 'primary' && styles.inverted,
+    inverted && styles.inverted,
     state.root.className,
   );
 
@@ -78,7 +93,7 @@ export const useAlertStyles_unstable = (state: AlertState): AlertState => {
     state.icon.className = mergeClasses(
       alertClassNames.icon,
       styles.icon,
-      state.intent && intentIconStyles[state.intent],
+      state.intent && (inverted ? mergedIntentIconStylesInverted[state.intent] : intentIconStylesPrimary[state.intent]),
       state.icon.className,
     );
   }
@@ -88,7 +103,13 @@ export const useAlertStyles_unstable = (state: AlertState): AlertState => {
   }
 
   if (state.action) {
-    state.action.className = mergeClasses(alertClassNames.action, styles.action, state.action.className);
+    // Note: inverted && actionStylesInverted.action has the highest piority and must be merged last
+    state.action.className = mergeClasses(
+      alertClassNames.action,
+      styles.action,
+      inverted && actionStylesInverted.action,
+      state.action.className,
+    );
   }
 
   return state;
diff --git a/packages/react-components/react-alert/stories/Alert/AlertAction.stories.tsx b/packages/react-components/react-alert/stories/Alert/AlertAction.stories.tsx
index 3458c4dea1f502..92e80213db0094 100644
--- a/packages/react-components/react-alert/stories/Alert/AlertAction.stories.tsx
+++ b/packages/react-components/react-alert/stories/Alert/AlertAction.stories.tsx
@@ -2,21 +2,28 @@ import * as React from 'react';
 import { DismissCircleRegular } from '@fluentui/react-icons';
 
 import { Alert } from '@fluentui/react-alert';
+import { FluentProvider, teamsLightTheme, teamsDarkTheme, teamsHighContrastTheme } from '@fluentui/react-components';
 
 export const Action = () => (
-  <div style={{ display: 'flex', flexDirection: 'column', gap: '10px' }}>
-    <Alert intent="success" action="Undo">
-      Message sent
-    </Alert>
-    <Alert
-      intent="error"
-      action={{
-        icon: <DismissCircleRegular aria-label="dismiss message" />,
-      }}
-    >
-      Save failed
-    </Alert>
-  </div>
+  <>
+    {[teamsLightTheme, teamsDarkTheme, teamsHighContrastTheme].map(theme => (
+      <FluentProvider theme={theme} key="action-alert">
+        <div style={{ display: 'flex', flexDirection: 'column', gap: '10px' }}>
+          <Alert intent="success" action="Undo">
+            Message sent
+          </Alert>
+          <Alert
+            intent="error"
+            action={{
+              icon: <DismissCircleRegular aria-label="dismiss message" />,
+            }}
+          >
+            Save failed
+          </Alert>
+        </div>{' '}
+      </FluentProvider>
+    ))}
+  </>
 );
 
 Action.storyName = 'Action';
diff --git a/packages/react-components/react-alert/stories/Alert/AlertAppearance.stories.tsx b/packages/react-components/react-alert/stories/Alert/AlertAppearance.stories.tsx
index 8b9738fa194199..8213f94d715f21 100644
--- a/packages/react-components/react-alert/stories/Alert/AlertAppearance.stories.tsx
+++ b/packages/react-components/react-alert/stories/Alert/AlertAppearance.stories.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react';
 
 import { Alert } from '@fluentui/react-alert';
+import { FluentProvider, teamsLightTheme, teamsDarkTheme, teamsHighContrastTheme } from '@fluentui/react-components';
 
 const renderAlerts = (appearance: 'primary' | 'inverted') => (
   <div style={{ flexGrow: 1 }}>
@@ -23,10 +24,16 @@ const renderAlerts = (appearance: 'primary' | 'inverted') => (
 );
 
 export const Appearance = () => (
-  <div style={{ display: 'flex', gap: '20px' }}>
-    {renderAlerts('primary')}
-    {renderAlerts('inverted')}
-  </div>
+  <>
+    {[teamsLightTheme, teamsDarkTheme, teamsHighContrastTheme].map(theme => (
+      <FluentProvider theme={theme} key={'appearance-toast'}>
+        <div style={{ display: 'flex', gap: '20px', margin: '20px 0', padding: '20px' }}>
+          {renderAlerts('primary')}
+          {renderAlerts('inverted')}
+        </div>{' '}
+      </FluentProvider>
+    ))}
+  </>
 );
 
 Appearance.storyName = 'Appearance';
diff --git a/packages/react-components/react-alert/stories/Alert/AlertDefault.stories.tsx b/packages/react-components/react-alert/stories/Alert/AlertDefault.stories.tsx
index bdbdfe897c1311..918dce1b9cde2c 100644
--- a/packages/react-components/react-alert/stories/Alert/AlertDefault.stories.tsx
+++ b/packages/react-components/react-alert/stories/Alert/AlertDefault.stories.tsx
@@ -1,5 +1,14 @@
 import * as React from 'react';
 
 import { Alert } from '@fluentui/react-alert';
+import { FluentProvider, teamsLightTheme, teamsDarkTheme, teamsHighContrastTheme } from '@fluentui/react-components';
 
-export const Default = () => <Alert>This is a default alert</Alert>;
+export const Default = () => (
+  <>
+    {[teamsLightTheme, teamsDarkTheme, teamsHighContrastTheme].map(theme => (
+      <FluentProvider theme={theme} key="default-alert">
+        <Alert>This is a default alert!</Alert>
+      </FluentProvider>
+    ))}
+  </>
+);
diff --git a/packages/react-components/react-field/.npmignore b/packages/react-components/react-field/.npmignore
index 52d2a7273a151d..f7ce568a6dbf7c 100644
--- a/packages/react-components/react-field/.npmignore
+++ b/packages/react-components/react-field/.npmignore
@@ -3,10 +3,11 @@
 bundle-size/
 config/
 coverage/
-e2e/
+docs/
 etc/
 node_modules/
 src/
+stories/
 dist/types/
 temp/
 __fixtures__
@@ -16,7 +17,7 @@ __tests__
 *.api.json
 *.log
 *.spec.*
-*.stories.*
+*.cy.*
 *.test.*
 *.yml
 
diff --git a/packages/react-components/react-field/.storybook/main.js b/packages/react-components/react-field/.storybook/main.js
index bea03d1fb52af8..26536b61b387f6 100644
--- a/packages/react-components/react-field/.storybook/main.js
+++ b/packages/react-components/react-field/.storybook/main.js
@@ -2,12 +2,7 @@ const rootMain = require('../../../../.storybook/main');
 
 module.exports = /** @type {Omit<import('../../../../.storybook/main'), 'typescript'|'babel'>} */ ({
   ...rootMain,
-  stories: [
-    ...rootMain.stories,
-    '../src/**/*.stories.mdx',
-    '../src/stories/Field/index.stories.@(ts|tsx)',
-    '../src/**/index.stories.@(ts|tsx)',
-  ],
+  stories: [...rootMain.stories, '../stories/**/*.stories.mdx', '../stories/**/index.stories.@(ts|tsx)'],
   addons: [...rootMain.addons],
   webpackFinal: (config, options) => {
     const localConfig = { ...rootMain.webpackFinal(config, options) };
diff --git a/packages/react-components/react-field/.storybook/tsconfig.json b/packages/react-components/react-field/.storybook/tsconfig.json
index f9f60e1234ed49..ea89218a3d916f 100644
--- a/packages/react-components/react-field/.storybook/tsconfig.json
+++ b/packages/react-components/react-field/.storybook/tsconfig.json
@@ -6,5 +6,5 @@
     "checkJs": true,
     "types": ["static-assets", "environment", "storybook__addons"]
   },
-  "include": ["../src/**/*.stories.ts", "../src/**/*.stories.tsx", "*.js"]
+  "include": ["../stories/**/*.stories.ts", "../stories/**/*.stories.tsx", "*.js"]
 }
diff --git a/packages/react-components/react-field/Spec.md b/packages/react-components/react-field/docs/Spec.md
similarity index 100%
rename from packages/react-components/react-field/Spec.md
rename to packages/react-components/react-field/docs/Spec.md
diff --git a/packages/react-components/react-field/src/stories/Field/FieldDefault.stories.tsx b/packages/react-components/react-field/stories/Field/FieldDefault.stories.tsx
similarity index 100%
rename from packages/react-components/react-field/src/stories/Field/FieldDefault.stories.tsx
rename to packages/react-components/react-field/stories/Field/FieldDefault.stories.tsx
diff --git a/packages/react-components/react-field/src/stories/Field/FieldDescription.md b/packages/react-components/react-field/stories/Field/FieldDescription.md
similarity index 100%
rename from packages/react-components/react-field/src/stories/Field/FieldDescription.md
rename to packages/react-components/react-field/stories/Field/FieldDescription.md
diff --git a/packages/react-components/react-field/src/stories/Field/FieldHint.stories.tsx b/packages/react-components/react-field/stories/Field/FieldHint.stories.tsx
similarity index 100%
rename from packages/react-components/react-field/src/stories/Field/FieldHint.stories.tsx
rename to packages/react-components/react-field/stories/Field/FieldHint.stories.tsx
diff --git a/packages/react-components/react-field/src/stories/Field/FieldHorizontal.stories.tsx b/packages/react-components/react-field/stories/Field/FieldHorizontal.stories.tsx
similarity index 100%
rename from packages/react-components/react-field/src/stories/Field/FieldHorizontal.stories.tsx
rename to packages/react-components/react-field/stories/Field/FieldHorizontal.stories.tsx
diff --git a/packages/react-components/react-field/src/stories/Field/FieldLabel.stories.tsx b/packages/react-components/react-field/stories/Field/FieldLabel.stories.tsx
similarity index 100%
rename from packages/react-components/react-field/src/stories/Field/FieldLabel.stories.tsx
rename to packages/react-components/react-field/stories/Field/FieldLabel.stories.tsx
diff --git a/packages/react-components/react-field/src/stories/Field/FieldRequired.stories.tsx b/packages/react-components/react-field/stories/Field/FieldRequired.stories.tsx
similarity index 100%
rename from packages/react-components/react-field/src/stories/Field/FieldRequired.stories.tsx
rename to packages/react-components/react-field/stories/Field/FieldRequired.stories.tsx
diff --git a/packages/react-components/react-field/src/stories/Field/FieldSize.stories.tsx b/packages/react-components/react-field/stories/Field/FieldSize.stories.tsx
similarity index 100%
rename from packages/react-components/react-field/src/stories/Field/FieldSize.stories.tsx
rename to packages/react-components/react-field/stories/Field/FieldSize.stories.tsx
diff --git a/packages/react-components/react-field/src/stories/Field/FieldValidationState.stories.tsx b/packages/react-components/react-field/stories/Field/FieldValidationState.stories.tsx
similarity index 100%
rename from packages/react-components/react-field/src/stories/Field/FieldValidationState.stories.tsx
rename to packages/react-components/react-field/stories/Field/FieldValidationState.stories.tsx
diff --git a/packages/react-components/react-field/src/stories/Field/index.stories.tsx b/packages/react-components/react-field/stories/Field/index.stories.tsx
similarity index 100%
rename from packages/react-components/react-field/src/stories/Field/index.stories.tsx
rename to packages/react-components/react-field/stories/Field/index.stories.tsx
diff --git a/packages/react-components/react-field/tsconfig.lib.json b/packages/react-components/react-field/tsconfig.lib.json
index 7f94e04299ed85..008c602dc19d24 100644
--- a/packages/react-components/react-field/tsconfig.lib.json
+++ b/packages/react-components/react-field/tsconfig.lib.json
@@ -9,14 +9,6 @@
     "inlineSources": true,
     "types": ["static-assets", "environment"]
   },
-  "exclude": [
-    "./src/common/**",
-    "**/*.spec.ts",
-    "**/*.spec.tsx",
-    "**/*.test.ts",
-    "**/*.test.tsx",
-    "**/*.stories.ts",
-    "**/*.stories.tsx"
-  ],
+  "exclude": ["**/*.spec.ts", "**/*.spec.tsx", "**/*.test.ts", "**/*.test.tsx", "**/*.stories.ts", "**/*.stories.tsx"],
   "include": ["./src/**/*.ts", "./src/**/*.tsx"]
 }
diff --git a/packages/react-components/react-tooltip/.npmignore b/packages/react-components/react-tooltip/.npmignore
index 52d2a7273a151d..f7ce568a6dbf7c 100644
--- a/packages/react-components/react-tooltip/.npmignore
+++ b/packages/react-components/react-tooltip/.npmignore
@@ -3,10 +3,11 @@
 bundle-size/
 config/
 coverage/
-e2e/
+docs/
 etc/
 node_modules/
 src/
+stories/
 dist/types/
 temp/
 __fixtures__
@@ -16,7 +17,7 @@ __tests__
 *.api.json
 *.log
 *.spec.*
-*.stories.*
+*.cy.*
 *.test.*
 *.yml
 
diff --git a/packages/react-components/react-tooltip/.storybook/main.js b/packages/react-components/react-tooltip/.storybook/main.js
index f57cfd09509e78..26536b61b387f6 100644
--- a/packages/react-components/react-tooltip/.storybook/main.js
+++ b/packages/react-components/react-tooltip/.storybook/main.js
@@ -2,7 +2,7 @@ const rootMain = require('../../../../.storybook/main');
 
 module.exports = /** @type {Omit<import('../../../../.storybook/main'), 'typescript'|'babel'>} */ ({
   ...rootMain,
-  stories: [...rootMain.stories, '../src/**/*.stories.mdx', '../src/**/index.stories.@(ts|tsx)'],
+  stories: [...rootMain.stories, '../stories/**/*.stories.mdx', '../stories/**/index.stories.@(ts|tsx)'],
   addons: [...rootMain.addons],
   webpackFinal: (config, options) => {
     const localConfig = { ...rootMain.webpackFinal(config, options) };
diff --git a/packages/react-components/react-tooltip/.storybook/tsconfig.json b/packages/react-components/react-tooltip/.storybook/tsconfig.json
index f9f60e1234ed49..ea89218a3d916f 100644
--- a/packages/react-components/react-tooltip/.storybook/tsconfig.json
+++ b/packages/react-components/react-tooltip/.storybook/tsconfig.json
@@ -6,5 +6,5 @@
     "checkJs": true,
     "types": ["static-assets", "environment", "storybook__addons"]
   },
-  "include": ["../src/**/*.stories.ts", "../src/**/*.stories.tsx", "*.js"]
+  "include": ["../stories/**/*.stories.ts", "../stories/**/*.stories.tsx", "*.js"]
 }
diff --git a/packages/react-components/react-tooltip/MIGRATION.md b/packages/react-components/react-tooltip/docs/MIGRATION.md
similarity index 100%
rename from packages/react-components/react-tooltip/MIGRATION.md
rename to packages/react-components/react-tooltip/docs/MIGRATION.md
diff --git a/packages/react-components/react-tooltip/Spec.md b/packages/react-components/react-tooltip/docs/Spec.md
similarity index 100%
rename from packages/react-components/react-tooltip/Spec.md
rename to packages/react-components/react-tooltip/docs/Spec.md
diff --git a/packages/react-components/react-tooltip/src/components/Tooltip/Tooltip.test.tsx b/packages/react-components/react-tooltip/src/components/Tooltip/Tooltip.test.tsx
index c02c1bc4227d6e..c619fb61be6ab7 100644
--- a/packages/react-components/react-tooltip/src/components/Tooltip/Tooltip.test.tsx
+++ b/packages/react-components/react-tooltip/src/components/Tooltip/Tooltip.test.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { Tooltip } from './Tooltip';
-import { isConformant } from '../../common/isConformant';
+import { isConformant } from '../../testing/isConformant';
 import type { IsConformantOptions } from '@fluentui/react-conformance';
 import { render, RenderResult } from '@testing-library/react';
 import { resetIdsForTests } from '@fluentui/react-utilities';
diff --git a/packages/react-components/react-tooltip/src/common/isConformant.ts b/packages/react-components/react-tooltip/src/testing/isConformant.ts
similarity index 100%
rename from packages/react-components/react-tooltip/src/common/isConformant.ts
rename to packages/react-components/react-tooltip/src/testing/isConformant.ts
diff --git a/packages/react-components/react-tooltip/src/stories/Tooltip/TooltipControlled.stories.tsx b/packages/react-components/react-tooltip/stories/Tooltip/TooltipControlled.stories.tsx
similarity index 100%
rename from packages/react-components/react-tooltip/src/stories/Tooltip/TooltipControlled.stories.tsx
rename to packages/react-components/react-tooltip/stories/Tooltip/TooltipControlled.stories.tsx
diff --git a/packages/react-components/react-tooltip/src/stories/Tooltip/TooltipCustomMount.stories.tsx b/packages/react-components/react-tooltip/stories/Tooltip/TooltipCustomMount.stories.tsx
similarity index 100%
rename from packages/react-components/react-tooltip/src/stories/Tooltip/TooltipCustomMount.stories.tsx
rename to packages/react-components/react-tooltip/stories/Tooltip/TooltipCustomMount.stories.tsx
diff --git a/packages/react-components/react-tooltip/src/stories/Tooltip/TooltipDefault.stories.tsx b/packages/react-components/react-tooltip/stories/Tooltip/TooltipDefault.stories.tsx
similarity index 100%
rename from packages/react-components/react-tooltip/src/stories/Tooltip/TooltipDefault.stories.tsx
rename to packages/react-components/react-tooltip/stories/Tooltip/TooltipDefault.stories.tsx
diff --git a/packages/react-components/react-tooltip/src/stories/Tooltip/TooltipDescription.md b/packages/react-components/react-tooltip/stories/Tooltip/TooltipDescription.md
similarity index 100%
rename from packages/react-components/react-tooltip/src/stories/Tooltip/TooltipDescription.md
rename to packages/react-components/react-tooltip/stories/Tooltip/TooltipDescription.md
diff --git a/packages/react-components/react-tooltip/src/stories/Tooltip/TooltipInverted.stories.tsx b/packages/react-components/react-tooltip/stories/Tooltip/TooltipInverted.stories.tsx
similarity index 100%
rename from packages/react-components/react-tooltip/src/stories/Tooltip/TooltipInverted.stories.tsx
rename to packages/react-components/react-tooltip/stories/Tooltip/TooltipInverted.stories.tsx
diff --git a/packages/react-components/react-tooltip/src/stories/Tooltip/TooltipPositioning.stories.tsx b/packages/react-components/react-tooltip/stories/Tooltip/TooltipPositioning.stories.tsx
similarity index 100%
rename from packages/react-components/react-tooltip/src/stories/Tooltip/TooltipPositioning.stories.tsx
rename to packages/react-components/react-tooltip/stories/Tooltip/TooltipPositioning.stories.tsx
diff --git a/packages/react-components/react-tooltip/src/stories/Tooltip/TooltipRelationshipDescription.stories.tsx b/packages/react-components/react-tooltip/stories/Tooltip/TooltipRelationshipDescription.stories.tsx
similarity index 100%
rename from packages/react-components/react-tooltip/src/stories/Tooltip/TooltipRelationshipDescription.stories.tsx
rename to packages/react-components/react-tooltip/stories/Tooltip/TooltipRelationshipDescription.stories.tsx
diff --git a/packages/react-components/react-tooltip/src/stories/Tooltip/TooltipRelationshipLabel.stories.tsx b/packages/react-components/react-tooltip/stories/Tooltip/TooltipRelationshipLabel.stories.tsx
similarity index 100%
rename from packages/react-components/react-tooltip/src/stories/Tooltip/TooltipRelationshipLabel.stories.tsx
rename to packages/react-components/react-tooltip/stories/Tooltip/TooltipRelationshipLabel.stories.tsx
diff --git a/packages/react-components/react-tooltip/src/stories/Tooltip/TooltipStyled.stories.tsx b/packages/react-components/react-tooltip/stories/Tooltip/TooltipStyled.stories.tsx
similarity index 100%
rename from packages/react-components/react-tooltip/src/stories/Tooltip/TooltipStyled.stories.tsx
rename to packages/react-components/react-tooltip/stories/Tooltip/TooltipStyled.stories.tsx
diff --git a/packages/react-components/react-tooltip/src/stories/Tooltip/TooltipTarget.stories.tsx b/packages/react-components/react-tooltip/stories/Tooltip/TooltipTarget.stories.tsx
similarity index 100%
rename from packages/react-components/react-tooltip/src/stories/Tooltip/TooltipTarget.stories.tsx
rename to packages/react-components/react-tooltip/stories/Tooltip/TooltipTarget.stories.tsx
diff --git a/packages/react-components/react-tooltip/src/stories/Tooltip/TooltipWithArrow.stories.tsx b/packages/react-components/react-tooltip/stories/Tooltip/TooltipWithArrow.stories.tsx
similarity index 100%
rename from packages/react-components/react-tooltip/src/stories/Tooltip/TooltipWithArrow.stories.tsx
rename to packages/react-components/react-tooltip/stories/Tooltip/TooltipWithArrow.stories.tsx
diff --git a/packages/react-components/react-tooltip/src/stories/Tooltip/index.stories.tsx b/packages/react-components/react-tooltip/stories/Tooltip/index.stories.tsx
similarity index 100%
rename from packages/react-components/react-tooltip/src/stories/Tooltip/index.stories.tsx
rename to packages/react-components/react-tooltip/stories/Tooltip/index.stories.tsx
diff --git a/packages/react-components/react-tooltip/tsconfig.lib.json b/packages/react-components/react-tooltip/tsconfig.lib.json
index 7f94e04299ed85..6f90cf95c005bd 100644
--- a/packages/react-components/react-tooltip/tsconfig.lib.json
+++ b/packages/react-components/react-tooltip/tsconfig.lib.json
@@ -10,7 +10,7 @@
     "types": ["static-assets", "environment"]
   },
   "exclude": [
-    "./src/common/**",
+    "./src/testing/**",
     "**/*.spec.ts",
     "**/*.spec.tsx",
     "**/*.test.ts",
diff --git a/packages/react-components/react-tooltip/tsconfig.spec.json b/packages/react-components/react-tooltip/tsconfig.spec.json
index 469fcba4d7ba75..911456fe4b4d91 100644
--- a/packages/react-components/react-tooltip/tsconfig.spec.json
+++ b/packages/react-components/react-tooltip/tsconfig.spec.json
@@ -5,5 +5,13 @@
     "outDir": "dist",
     "types": ["jest", "node"]
   },
-  "include": ["**/*.spec.ts", "**/*.spec.tsx", "**/*.test.ts", "**/*.test.tsx", "**/*.d.ts"]
+  "include": [
+    "**/*.spec.ts",
+    "**/*.spec.tsx",
+    "**/*.test.ts",
+    "**/*.test.tsx",
+    "**/*.d.ts",
+    "./src/testing/**/*.ts",
+    "./src/testing/**/*.tsx"
+  ]
 }

From 7bc28e036e94b066e6d17ccb37915b7d9c135abd Mon Sep 17 00:00:00 2001
From: marigome-msft <marigome@microsoft.com>
Date: Wed, 30 Nov 2022 15:54:15 -0800
Subject: [PATCH 02/11] fixed alert styling

---
 .../react-alert/src/components/Alert/useAlertStyles.ts          | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-components/react-alert/src/components/Alert/useAlertStyles.ts b/packages/react-components/react-alert/src/components/Alert/useAlertStyles.ts
index 6989625e059a92..f0fac2f3985b64 100644
--- a/packages/react-components/react-alert/src/components/Alert/useAlertStyles.ts
+++ b/packages/react-components/react-alert/src/components/Alert/useAlertStyles.ts
@@ -1,5 +1,5 @@
 import { tokens } from '@fluentui/react-theme';
-import { GriffelStyle, makeStyles, mergeClasses, shorthands } from '@griffel/react';
+import { makeStyles, mergeClasses, shorthands } from '@griffel/react';
 
 import type { AlertSlots, AlertState } from './Alert.types';
 import type { SlotClassNames } from '@fluentui/react-utilities';

From f8bce07a5a505c9abdbe94e3bfa209e0b99d9484 Mon Sep 17 00:00:00 2001
From: marigome-msft <marigome@microsoft.com>
Date: Wed, 30 Nov 2022 16:04:15 -0800
Subject: [PATCH 03/11] yarn change

---
 ...i-react-alert-8a5ecb73-4cf7-422d-9df6-e2c5d0cacffd.json | 7 +++++++
 1 file changed, 7 insertions(+)
 create mode 100644 change/@fluentui-react-alert-8a5ecb73-4cf7-422d-9df6-e2c5d0cacffd.json

diff --git a/change/@fluentui-react-alert-8a5ecb73-4cf7-422d-9df6-e2c5d0cacffd.json b/change/@fluentui-react-alert-8a5ecb73-4cf7-422d-9df6-e2c5d0cacffd.json
new file mode 100644
index 00000000000000..25e500e7ac528c
--- /dev/null
+++ b/change/@fluentui-react-alert-8a5ecb73-4cf7-422d-9df6-e2c5d0cacffd.json
@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "Fixing Alert component UI via updating tokens",
+  "packageName": "@fluentui/react-alert",
+  "email": "marigome@microsoft.com",
+  "dependentChangeType": "none"
+}

From 0d67b51c2a5320213ed59c27b520ecfd41542d91 Mon Sep 17 00:00:00 2001
From: marigome-msft <marigome@microsoft.com>
Date: Wed, 30 Nov 2022 16:13:36 -0800
Subject: [PATCH 04/11] Revert "chore(react-field): migrate to new package
 structure (#25817)"

This reverts commit 0d473c1235c1a90cb80e1f2eb1224f59acf97695.
---
 ...-e41be758-df09-47c8-bd8f-4ddb5b61c2ad.json |  7 ----
 ...-538ef65c-6be2-4dc8-9cc2-c00fd59a1e79.json |  7 ----
 .../src/components/Alert/useAlertStyles.ts    | 35 ++++---------------
 .../stories/Alert/AlertAction.stories.tsx     | 33 +++++++----------
 .../stories/Alert/AlertAppearance.stories.tsx | 15 +++-----
 .../stories/Alert/AlertDefault.stories.tsx    | 11 +-----
 .../react-components/react-field/.npmignore   |  5 ++-
 .../react-field/.storybook/main.js            |  7 +++-
 .../react-field/.storybook/tsconfig.json      |  2 +-
 .../react-field/{docs => }/Spec.md            |  0
 .../stories/Field/FieldDefault.stories.tsx    |  0
 .../stories/Field/FieldDescription.md         |  0
 .../stories/Field/FieldHint.stories.tsx       |  0
 .../stories/Field/FieldHorizontal.stories.tsx |  0
 .../stories/Field/FieldLabel.stories.tsx      |  0
 .../stories/Field/FieldRequired.stories.tsx   |  0
 .../stories/Field/FieldSize.stories.tsx       |  0
 .../Field/FieldValidationState.stories.tsx    |  0
 .../{ => src}/stories/Field/index.stories.tsx |  0
 .../react-field/tsconfig.lib.json             | 10 +++++-
 .../react-components/react-tooltip/.npmignore |  5 ++-
 .../react-tooltip/.storybook/main.js          |  2 +-
 .../react-tooltip/.storybook/tsconfig.json    |  2 +-
 .../react-tooltip/{docs => }/MIGRATION.md     |  0
 .../react-tooltip/{docs => }/Spec.md          |  0
 .../src/{testing => common}/isConformant.ts   |  0
 .../src/components/Tooltip/Tooltip.test.tsx   |  2 +-
 .../Tooltip/TooltipControlled.stories.tsx     |  0
 .../Tooltip/TooltipCustomMount.stories.tsx    |  0
 .../Tooltip/TooltipDefault.stories.tsx        |  0
 .../stories/Tooltip/TooltipDescription.md     |  0
 .../Tooltip/TooltipInverted.stories.tsx       |  0
 .../Tooltip/TooltipPositioning.stories.tsx    |  0
 ...TooltipRelationshipDescription.stories.tsx |  0
 .../TooltipRelationshipLabel.stories.tsx      |  0
 .../stories/Tooltip/TooltipStyled.stories.tsx |  0
 .../stories/Tooltip/TooltipTarget.stories.tsx |  0
 .../Tooltip/TooltipWithArrow.stories.tsx      |  0
 .../stories/Tooltip/index.stories.tsx         |  0
 .../react-tooltip/tsconfig.lib.json           |  2 +-
 .../react-tooltip/tsconfig.spec.json          | 10 +-----
 41 files changed, 50 insertions(+), 105 deletions(-)
 delete mode 100644 change/@fluentui-react-field-e41be758-df09-47c8-bd8f-4ddb5b61c2ad.json
 delete mode 100644 change/@fluentui-react-tooltip-538ef65c-6be2-4dc8-9cc2-c00fd59a1e79.json
 rename packages/react-components/react-field/{docs => }/Spec.md (100%)
 rename packages/react-components/react-field/{ => src}/stories/Field/FieldDefault.stories.tsx (100%)
 rename packages/react-components/react-field/{ => src}/stories/Field/FieldDescription.md (100%)
 rename packages/react-components/react-field/{ => src}/stories/Field/FieldHint.stories.tsx (100%)
 rename packages/react-components/react-field/{ => src}/stories/Field/FieldHorizontal.stories.tsx (100%)
 rename packages/react-components/react-field/{ => src}/stories/Field/FieldLabel.stories.tsx (100%)
 rename packages/react-components/react-field/{ => src}/stories/Field/FieldRequired.stories.tsx (100%)
 rename packages/react-components/react-field/{ => src}/stories/Field/FieldSize.stories.tsx (100%)
 rename packages/react-components/react-field/{ => src}/stories/Field/FieldValidationState.stories.tsx (100%)
 rename packages/react-components/react-field/{ => src}/stories/Field/index.stories.tsx (100%)
 rename packages/react-components/react-tooltip/{docs => }/MIGRATION.md (100%)
 rename packages/react-components/react-tooltip/{docs => }/Spec.md (100%)
 rename packages/react-components/react-tooltip/src/{testing => common}/isConformant.ts (100%)
 rename packages/react-components/react-tooltip/{ => src}/stories/Tooltip/TooltipControlled.stories.tsx (100%)
 rename packages/react-components/react-tooltip/{ => src}/stories/Tooltip/TooltipCustomMount.stories.tsx (100%)
 rename packages/react-components/react-tooltip/{ => src}/stories/Tooltip/TooltipDefault.stories.tsx (100%)
 rename packages/react-components/react-tooltip/{ => src}/stories/Tooltip/TooltipDescription.md (100%)
 rename packages/react-components/react-tooltip/{ => src}/stories/Tooltip/TooltipInverted.stories.tsx (100%)
 rename packages/react-components/react-tooltip/{ => src}/stories/Tooltip/TooltipPositioning.stories.tsx (100%)
 rename packages/react-components/react-tooltip/{ => src}/stories/Tooltip/TooltipRelationshipDescription.stories.tsx (100%)
 rename packages/react-components/react-tooltip/{ => src}/stories/Tooltip/TooltipRelationshipLabel.stories.tsx (100%)
 rename packages/react-components/react-tooltip/{ => src}/stories/Tooltip/TooltipStyled.stories.tsx (100%)
 rename packages/react-components/react-tooltip/{ => src}/stories/Tooltip/TooltipTarget.stories.tsx (100%)
 rename packages/react-components/react-tooltip/{ => src}/stories/Tooltip/TooltipWithArrow.stories.tsx (100%)
 rename packages/react-components/react-tooltip/{ => src}/stories/Tooltip/index.stories.tsx (100%)

diff --git a/change/@fluentui-react-field-e41be758-df09-47c8-bd8f-4ddb5b61c2ad.json b/change/@fluentui-react-field-e41be758-df09-47c8-bd8f-4ddb5b61c2ad.json
deleted file mode 100644
index 8c677ec0c59cf0..00000000000000
--- a/change/@fluentui-react-field-e41be758-df09-47c8-bd8f-4ddb5b61c2ad.json
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "type": "prerelease",
-  "comment": "chore: Migrate to new package structure.",
-  "packageName": "@fluentui/react-field",
-  "email": "tristan.watanabe@gmail.com",
-  "dependentChangeType": "patch"
-}
diff --git a/change/@fluentui-react-tooltip-538ef65c-6be2-4dc8-9cc2-c00fd59a1e79.json b/change/@fluentui-react-tooltip-538ef65c-6be2-4dc8-9cc2-c00fd59a1e79.json
deleted file mode 100644
index 958e0a5905649d..00000000000000
--- a/change/@fluentui-react-tooltip-538ef65c-6be2-4dc8-9cc2-c00fd59a1e79.json
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "type": "patch",
-  "comment": "chore: Migrate to new package structure.",
-  "packageName": "@fluentui/react-tooltip",
-  "email": "tristan.watanabe@gmail.com",
-  "dependentChangeType": "patch"
-}
diff --git a/packages/react-components/react-alert/src/components/Alert/useAlertStyles.ts b/packages/react-components/react-alert/src/components/Alert/useAlertStyles.ts
index f0fac2f3985b64..c6ced1c43ef778 100644
--- a/packages/react-components/react-alert/src/components/Alert/useAlertStyles.ts
+++ b/packages/react-components/react-alert/src/components/Alert/useAlertStyles.ts
@@ -18,7 +18,7 @@ const useStyles = makeStyles({
     minHeight: '44px',
     ...shorthands.padding('0', '12px'),
     ...shorthands.borderRadius('4px'),
-    ...shorthands.border('1px', 'solid', tokens.colorTransparentStroke),
+    ...shorthands.border('1px', 'solid', tokens.colorTransparentStrokeInteractive),
     boxShadow: tokens.shadow8,
     fontSize: tokens.fontSizeBase300,
     fontWeight: tokens.fontWeightSemibold,
@@ -26,7 +26,7 @@ const useStyles = makeStyles({
     backgroundColor: tokens.colorNeutralBackground1,
   },
   inverted: {
-    color: tokens.colorNeutralForegroundInverted2,
+    color: tokens.colorNeutralForegroundInverted,
     backgroundColor: tokens.colorNeutralBackgroundInverted,
   },
   icon: {
@@ -41,7 +41,7 @@ const useStyles = makeStyles({
     ...shorthands.padding('0'),
     minWidth: 0,
     marginLeft: 'auto',
-    color: tokens.colorBrandForeground1,
+    color: tokens.colorBrandForegroundLink,
   },
 });
 
@@ -60,32 +60,17 @@ const useIntentIconStyles = makeStyles({
   },
 });
 
-const useIntentIconStylesInverted = makeStyles({
-  warning: {
-    // TODO: update this when token is created
-    color: tokens.colorPaletteYellowForeground2,
-  },
-  info: {
-    color: tokens.colorNeutralForegroundInverted2,
-  },
-});
-
-const useActionButtonColorInverted = makeStyles({ action: { color: tokens.colorBrandForegroundInverted } });
-
 /**
  * Apply styling to the Alert slots based on the state
  */
 export const useAlertStyles_unstable = (state: AlertState): AlertState => {
   const styles = useStyles();
-  const inverted = state.appearance === 'inverted';
-  const intentIconStylesPrimary = useIntentIconStyles();
-  const mergedIntentIconStylesInverted = { ...intentIconStylesPrimary, ...useIntentIconStylesInverted() };
-  const actionStylesInverted = useActionButtonColorInverted();
+  const intentIconStyles = useIntentIconStyles();
 
   state.root.className = mergeClasses(
     alertClassNames.root,
     styles.root,
-    inverted && styles.inverted,
+    state.appearance !== 'primary' && styles.inverted,
     state.root.className,
   );
 
@@ -93,7 +78,7 @@ export const useAlertStyles_unstable = (state: AlertState): AlertState => {
     state.icon.className = mergeClasses(
       alertClassNames.icon,
       styles.icon,
-      state.intent && (inverted ? mergedIntentIconStylesInverted[state.intent] : intentIconStylesPrimary[state.intent]),
+      state.intent && intentIconStyles[state.intent],
       state.icon.className,
     );
   }
@@ -103,13 +88,7 @@ export const useAlertStyles_unstable = (state: AlertState): AlertState => {
   }
 
   if (state.action) {
-    // Note: inverted && actionStylesInverted.action has the highest piority and must be merged last
-    state.action.className = mergeClasses(
-      alertClassNames.action,
-      styles.action,
-      inverted && actionStylesInverted.action,
-      state.action.className,
-    );
+    state.action.className = mergeClasses(alertClassNames.action, styles.action, state.action.className);
   }
 
   return state;
diff --git a/packages/react-components/react-alert/stories/Alert/AlertAction.stories.tsx b/packages/react-components/react-alert/stories/Alert/AlertAction.stories.tsx
index 92e80213db0094..3458c4dea1f502 100644
--- a/packages/react-components/react-alert/stories/Alert/AlertAction.stories.tsx
+++ b/packages/react-components/react-alert/stories/Alert/AlertAction.stories.tsx
@@ -2,28 +2,21 @@ import * as React from 'react';
 import { DismissCircleRegular } from '@fluentui/react-icons';
 
 import { Alert } from '@fluentui/react-alert';
-import { FluentProvider, teamsLightTheme, teamsDarkTheme, teamsHighContrastTheme } from '@fluentui/react-components';
 
 export const Action = () => (
-  <>
-    {[teamsLightTheme, teamsDarkTheme, teamsHighContrastTheme].map(theme => (
-      <FluentProvider theme={theme} key="action-alert">
-        <div style={{ display: 'flex', flexDirection: 'column', gap: '10px' }}>
-          <Alert intent="success" action="Undo">
-            Message sent
-          </Alert>
-          <Alert
-            intent="error"
-            action={{
-              icon: <DismissCircleRegular aria-label="dismiss message" />,
-            }}
-          >
-            Save failed
-          </Alert>
-        </div>{' '}
-      </FluentProvider>
-    ))}
-  </>
+  <div style={{ display: 'flex', flexDirection: 'column', gap: '10px' }}>
+    <Alert intent="success" action="Undo">
+      Message sent
+    </Alert>
+    <Alert
+      intent="error"
+      action={{
+        icon: <DismissCircleRegular aria-label="dismiss message" />,
+      }}
+    >
+      Save failed
+    </Alert>
+  </div>
 );
 
 Action.storyName = 'Action';
diff --git a/packages/react-components/react-alert/stories/Alert/AlertAppearance.stories.tsx b/packages/react-components/react-alert/stories/Alert/AlertAppearance.stories.tsx
index 8213f94d715f21..8b9738fa194199 100644
--- a/packages/react-components/react-alert/stories/Alert/AlertAppearance.stories.tsx
+++ b/packages/react-components/react-alert/stories/Alert/AlertAppearance.stories.tsx
@@ -1,7 +1,6 @@
 import * as React from 'react';
 
 import { Alert } from '@fluentui/react-alert';
-import { FluentProvider, teamsLightTheme, teamsDarkTheme, teamsHighContrastTheme } from '@fluentui/react-components';
 
 const renderAlerts = (appearance: 'primary' | 'inverted') => (
   <div style={{ flexGrow: 1 }}>
@@ -24,16 +23,10 @@ const renderAlerts = (appearance: 'primary' | 'inverted') => (
 );
 
 export const Appearance = () => (
-  <>
-    {[teamsLightTheme, teamsDarkTheme, teamsHighContrastTheme].map(theme => (
-      <FluentProvider theme={theme} key={'appearance-toast'}>
-        <div style={{ display: 'flex', gap: '20px', margin: '20px 0', padding: '20px' }}>
-          {renderAlerts('primary')}
-          {renderAlerts('inverted')}
-        </div>{' '}
-      </FluentProvider>
-    ))}
-  </>
+  <div style={{ display: 'flex', gap: '20px' }}>
+    {renderAlerts('primary')}
+    {renderAlerts('inverted')}
+  </div>
 );
 
 Appearance.storyName = 'Appearance';
diff --git a/packages/react-components/react-alert/stories/Alert/AlertDefault.stories.tsx b/packages/react-components/react-alert/stories/Alert/AlertDefault.stories.tsx
index 918dce1b9cde2c..bdbdfe897c1311 100644
--- a/packages/react-components/react-alert/stories/Alert/AlertDefault.stories.tsx
+++ b/packages/react-components/react-alert/stories/Alert/AlertDefault.stories.tsx
@@ -1,14 +1,5 @@
 import * as React from 'react';
 
 import { Alert } from '@fluentui/react-alert';
-import { FluentProvider, teamsLightTheme, teamsDarkTheme, teamsHighContrastTheme } from '@fluentui/react-components';
 
-export const Default = () => (
-  <>
-    {[teamsLightTheme, teamsDarkTheme, teamsHighContrastTheme].map(theme => (
-      <FluentProvider theme={theme} key="default-alert">
-        <Alert>This is a default alert!</Alert>
-      </FluentProvider>
-    ))}
-  </>
-);
+export const Default = () => <Alert>This is a default alert</Alert>;
diff --git a/packages/react-components/react-field/.npmignore b/packages/react-components/react-field/.npmignore
index f7ce568a6dbf7c..52d2a7273a151d 100644
--- a/packages/react-components/react-field/.npmignore
+++ b/packages/react-components/react-field/.npmignore
@@ -3,11 +3,10 @@
 bundle-size/
 config/
 coverage/
-docs/
+e2e/
 etc/
 node_modules/
 src/
-stories/
 dist/types/
 temp/
 __fixtures__
@@ -17,7 +16,7 @@ __tests__
 *.api.json
 *.log
 *.spec.*
-*.cy.*
+*.stories.*
 *.test.*
 *.yml
 
diff --git a/packages/react-components/react-field/.storybook/main.js b/packages/react-components/react-field/.storybook/main.js
index 26536b61b387f6..bea03d1fb52af8 100644
--- a/packages/react-components/react-field/.storybook/main.js
+++ b/packages/react-components/react-field/.storybook/main.js
@@ -2,7 +2,12 @@ const rootMain = require('../../../../.storybook/main');
 
 module.exports = /** @type {Omit<import('../../../../.storybook/main'), 'typescript'|'babel'>} */ ({
   ...rootMain,
-  stories: [...rootMain.stories, '../stories/**/*.stories.mdx', '../stories/**/index.stories.@(ts|tsx)'],
+  stories: [
+    ...rootMain.stories,
+    '../src/**/*.stories.mdx',
+    '../src/stories/Field/index.stories.@(ts|tsx)',
+    '../src/**/index.stories.@(ts|tsx)',
+  ],
   addons: [...rootMain.addons],
   webpackFinal: (config, options) => {
     const localConfig = { ...rootMain.webpackFinal(config, options) };
diff --git a/packages/react-components/react-field/.storybook/tsconfig.json b/packages/react-components/react-field/.storybook/tsconfig.json
index ea89218a3d916f..f9f60e1234ed49 100644
--- a/packages/react-components/react-field/.storybook/tsconfig.json
+++ b/packages/react-components/react-field/.storybook/tsconfig.json
@@ -6,5 +6,5 @@
     "checkJs": true,
     "types": ["static-assets", "environment", "storybook__addons"]
   },
-  "include": ["../stories/**/*.stories.ts", "../stories/**/*.stories.tsx", "*.js"]
+  "include": ["../src/**/*.stories.ts", "../src/**/*.stories.tsx", "*.js"]
 }
diff --git a/packages/react-components/react-field/docs/Spec.md b/packages/react-components/react-field/Spec.md
similarity index 100%
rename from packages/react-components/react-field/docs/Spec.md
rename to packages/react-components/react-field/Spec.md
diff --git a/packages/react-components/react-field/stories/Field/FieldDefault.stories.tsx b/packages/react-components/react-field/src/stories/Field/FieldDefault.stories.tsx
similarity index 100%
rename from packages/react-components/react-field/stories/Field/FieldDefault.stories.tsx
rename to packages/react-components/react-field/src/stories/Field/FieldDefault.stories.tsx
diff --git a/packages/react-components/react-field/stories/Field/FieldDescription.md b/packages/react-components/react-field/src/stories/Field/FieldDescription.md
similarity index 100%
rename from packages/react-components/react-field/stories/Field/FieldDescription.md
rename to packages/react-components/react-field/src/stories/Field/FieldDescription.md
diff --git a/packages/react-components/react-field/stories/Field/FieldHint.stories.tsx b/packages/react-components/react-field/src/stories/Field/FieldHint.stories.tsx
similarity index 100%
rename from packages/react-components/react-field/stories/Field/FieldHint.stories.tsx
rename to packages/react-components/react-field/src/stories/Field/FieldHint.stories.tsx
diff --git a/packages/react-components/react-field/stories/Field/FieldHorizontal.stories.tsx b/packages/react-components/react-field/src/stories/Field/FieldHorizontal.stories.tsx
similarity index 100%
rename from packages/react-components/react-field/stories/Field/FieldHorizontal.stories.tsx
rename to packages/react-components/react-field/src/stories/Field/FieldHorizontal.stories.tsx
diff --git a/packages/react-components/react-field/stories/Field/FieldLabel.stories.tsx b/packages/react-components/react-field/src/stories/Field/FieldLabel.stories.tsx
similarity index 100%
rename from packages/react-components/react-field/stories/Field/FieldLabel.stories.tsx
rename to packages/react-components/react-field/src/stories/Field/FieldLabel.stories.tsx
diff --git a/packages/react-components/react-field/stories/Field/FieldRequired.stories.tsx b/packages/react-components/react-field/src/stories/Field/FieldRequired.stories.tsx
similarity index 100%
rename from packages/react-components/react-field/stories/Field/FieldRequired.stories.tsx
rename to packages/react-components/react-field/src/stories/Field/FieldRequired.stories.tsx
diff --git a/packages/react-components/react-field/stories/Field/FieldSize.stories.tsx b/packages/react-components/react-field/src/stories/Field/FieldSize.stories.tsx
similarity index 100%
rename from packages/react-components/react-field/stories/Field/FieldSize.stories.tsx
rename to packages/react-components/react-field/src/stories/Field/FieldSize.stories.tsx
diff --git a/packages/react-components/react-field/stories/Field/FieldValidationState.stories.tsx b/packages/react-components/react-field/src/stories/Field/FieldValidationState.stories.tsx
similarity index 100%
rename from packages/react-components/react-field/stories/Field/FieldValidationState.stories.tsx
rename to packages/react-components/react-field/src/stories/Field/FieldValidationState.stories.tsx
diff --git a/packages/react-components/react-field/stories/Field/index.stories.tsx b/packages/react-components/react-field/src/stories/Field/index.stories.tsx
similarity index 100%
rename from packages/react-components/react-field/stories/Field/index.stories.tsx
rename to packages/react-components/react-field/src/stories/Field/index.stories.tsx
diff --git a/packages/react-components/react-field/tsconfig.lib.json b/packages/react-components/react-field/tsconfig.lib.json
index 008c602dc19d24..7f94e04299ed85 100644
--- a/packages/react-components/react-field/tsconfig.lib.json
+++ b/packages/react-components/react-field/tsconfig.lib.json
@@ -9,6 +9,14 @@
     "inlineSources": true,
     "types": ["static-assets", "environment"]
   },
-  "exclude": ["**/*.spec.ts", "**/*.spec.tsx", "**/*.test.ts", "**/*.test.tsx", "**/*.stories.ts", "**/*.stories.tsx"],
+  "exclude": [
+    "./src/common/**",
+    "**/*.spec.ts",
+    "**/*.spec.tsx",
+    "**/*.test.ts",
+    "**/*.test.tsx",
+    "**/*.stories.ts",
+    "**/*.stories.tsx"
+  ],
   "include": ["./src/**/*.ts", "./src/**/*.tsx"]
 }
diff --git a/packages/react-components/react-tooltip/.npmignore b/packages/react-components/react-tooltip/.npmignore
index f7ce568a6dbf7c..52d2a7273a151d 100644
--- a/packages/react-components/react-tooltip/.npmignore
+++ b/packages/react-components/react-tooltip/.npmignore
@@ -3,11 +3,10 @@
 bundle-size/
 config/
 coverage/
-docs/
+e2e/
 etc/
 node_modules/
 src/
-stories/
 dist/types/
 temp/
 __fixtures__
@@ -17,7 +16,7 @@ __tests__
 *.api.json
 *.log
 *.spec.*
-*.cy.*
+*.stories.*
 *.test.*
 *.yml
 
diff --git a/packages/react-components/react-tooltip/.storybook/main.js b/packages/react-components/react-tooltip/.storybook/main.js
index 26536b61b387f6..f57cfd09509e78 100644
--- a/packages/react-components/react-tooltip/.storybook/main.js
+++ b/packages/react-components/react-tooltip/.storybook/main.js
@@ -2,7 +2,7 @@ const rootMain = require('../../../../.storybook/main');
 
 module.exports = /** @type {Omit<import('../../../../.storybook/main'), 'typescript'|'babel'>} */ ({
   ...rootMain,
-  stories: [...rootMain.stories, '../stories/**/*.stories.mdx', '../stories/**/index.stories.@(ts|tsx)'],
+  stories: [...rootMain.stories, '../src/**/*.stories.mdx', '../src/**/index.stories.@(ts|tsx)'],
   addons: [...rootMain.addons],
   webpackFinal: (config, options) => {
     const localConfig = { ...rootMain.webpackFinal(config, options) };
diff --git a/packages/react-components/react-tooltip/.storybook/tsconfig.json b/packages/react-components/react-tooltip/.storybook/tsconfig.json
index ea89218a3d916f..f9f60e1234ed49 100644
--- a/packages/react-components/react-tooltip/.storybook/tsconfig.json
+++ b/packages/react-components/react-tooltip/.storybook/tsconfig.json
@@ -6,5 +6,5 @@
     "checkJs": true,
     "types": ["static-assets", "environment", "storybook__addons"]
   },
-  "include": ["../stories/**/*.stories.ts", "../stories/**/*.stories.tsx", "*.js"]
+  "include": ["../src/**/*.stories.ts", "../src/**/*.stories.tsx", "*.js"]
 }
diff --git a/packages/react-components/react-tooltip/docs/MIGRATION.md b/packages/react-components/react-tooltip/MIGRATION.md
similarity index 100%
rename from packages/react-components/react-tooltip/docs/MIGRATION.md
rename to packages/react-components/react-tooltip/MIGRATION.md
diff --git a/packages/react-components/react-tooltip/docs/Spec.md b/packages/react-components/react-tooltip/Spec.md
similarity index 100%
rename from packages/react-components/react-tooltip/docs/Spec.md
rename to packages/react-components/react-tooltip/Spec.md
diff --git a/packages/react-components/react-tooltip/src/testing/isConformant.ts b/packages/react-components/react-tooltip/src/common/isConformant.ts
similarity index 100%
rename from packages/react-components/react-tooltip/src/testing/isConformant.ts
rename to packages/react-components/react-tooltip/src/common/isConformant.ts
diff --git a/packages/react-components/react-tooltip/src/components/Tooltip/Tooltip.test.tsx b/packages/react-components/react-tooltip/src/components/Tooltip/Tooltip.test.tsx
index c619fb61be6ab7..c02c1bc4227d6e 100644
--- a/packages/react-components/react-tooltip/src/components/Tooltip/Tooltip.test.tsx
+++ b/packages/react-components/react-tooltip/src/components/Tooltip/Tooltip.test.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { Tooltip } from './Tooltip';
-import { isConformant } from '../../testing/isConformant';
+import { isConformant } from '../../common/isConformant';
 import type { IsConformantOptions } from '@fluentui/react-conformance';
 import { render, RenderResult } from '@testing-library/react';
 import { resetIdsForTests } from '@fluentui/react-utilities';
diff --git a/packages/react-components/react-tooltip/stories/Tooltip/TooltipControlled.stories.tsx b/packages/react-components/react-tooltip/src/stories/Tooltip/TooltipControlled.stories.tsx
similarity index 100%
rename from packages/react-components/react-tooltip/stories/Tooltip/TooltipControlled.stories.tsx
rename to packages/react-components/react-tooltip/src/stories/Tooltip/TooltipControlled.stories.tsx
diff --git a/packages/react-components/react-tooltip/stories/Tooltip/TooltipCustomMount.stories.tsx b/packages/react-components/react-tooltip/src/stories/Tooltip/TooltipCustomMount.stories.tsx
similarity index 100%
rename from packages/react-components/react-tooltip/stories/Tooltip/TooltipCustomMount.stories.tsx
rename to packages/react-components/react-tooltip/src/stories/Tooltip/TooltipCustomMount.stories.tsx
diff --git a/packages/react-components/react-tooltip/stories/Tooltip/TooltipDefault.stories.tsx b/packages/react-components/react-tooltip/src/stories/Tooltip/TooltipDefault.stories.tsx
similarity index 100%
rename from packages/react-components/react-tooltip/stories/Tooltip/TooltipDefault.stories.tsx
rename to packages/react-components/react-tooltip/src/stories/Tooltip/TooltipDefault.stories.tsx
diff --git a/packages/react-components/react-tooltip/stories/Tooltip/TooltipDescription.md b/packages/react-components/react-tooltip/src/stories/Tooltip/TooltipDescription.md
similarity index 100%
rename from packages/react-components/react-tooltip/stories/Tooltip/TooltipDescription.md
rename to packages/react-components/react-tooltip/src/stories/Tooltip/TooltipDescription.md
diff --git a/packages/react-components/react-tooltip/stories/Tooltip/TooltipInverted.stories.tsx b/packages/react-components/react-tooltip/src/stories/Tooltip/TooltipInverted.stories.tsx
similarity index 100%
rename from packages/react-components/react-tooltip/stories/Tooltip/TooltipInverted.stories.tsx
rename to packages/react-components/react-tooltip/src/stories/Tooltip/TooltipInverted.stories.tsx
diff --git a/packages/react-components/react-tooltip/stories/Tooltip/TooltipPositioning.stories.tsx b/packages/react-components/react-tooltip/src/stories/Tooltip/TooltipPositioning.stories.tsx
similarity index 100%
rename from packages/react-components/react-tooltip/stories/Tooltip/TooltipPositioning.stories.tsx
rename to packages/react-components/react-tooltip/src/stories/Tooltip/TooltipPositioning.stories.tsx
diff --git a/packages/react-components/react-tooltip/stories/Tooltip/TooltipRelationshipDescription.stories.tsx b/packages/react-components/react-tooltip/src/stories/Tooltip/TooltipRelationshipDescription.stories.tsx
similarity index 100%
rename from packages/react-components/react-tooltip/stories/Tooltip/TooltipRelationshipDescription.stories.tsx
rename to packages/react-components/react-tooltip/src/stories/Tooltip/TooltipRelationshipDescription.stories.tsx
diff --git a/packages/react-components/react-tooltip/stories/Tooltip/TooltipRelationshipLabel.stories.tsx b/packages/react-components/react-tooltip/src/stories/Tooltip/TooltipRelationshipLabel.stories.tsx
similarity index 100%
rename from packages/react-components/react-tooltip/stories/Tooltip/TooltipRelationshipLabel.stories.tsx
rename to packages/react-components/react-tooltip/src/stories/Tooltip/TooltipRelationshipLabel.stories.tsx
diff --git a/packages/react-components/react-tooltip/stories/Tooltip/TooltipStyled.stories.tsx b/packages/react-components/react-tooltip/src/stories/Tooltip/TooltipStyled.stories.tsx
similarity index 100%
rename from packages/react-components/react-tooltip/stories/Tooltip/TooltipStyled.stories.tsx
rename to packages/react-components/react-tooltip/src/stories/Tooltip/TooltipStyled.stories.tsx
diff --git a/packages/react-components/react-tooltip/stories/Tooltip/TooltipTarget.stories.tsx b/packages/react-components/react-tooltip/src/stories/Tooltip/TooltipTarget.stories.tsx
similarity index 100%
rename from packages/react-components/react-tooltip/stories/Tooltip/TooltipTarget.stories.tsx
rename to packages/react-components/react-tooltip/src/stories/Tooltip/TooltipTarget.stories.tsx
diff --git a/packages/react-components/react-tooltip/stories/Tooltip/TooltipWithArrow.stories.tsx b/packages/react-components/react-tooltip/src/stories/Tooltip/TooltipWithArrow.stories.tsx
similarity index 100%
rename from packages/react-components/react-tooltip/stories/Tooltip/TooltipWithArrow.stories.tsx
rename to packages/react-components/react-tooltip/src/stories/Tooltip/TooltipWithArrow.stories.tsx
diff --git a/packages/react-components/react-tooltip/stories/Tooltip/index.stories.tsx b/packages/react-components/react-tooltip/src/stories/Tooltip/index.stories.tsx
similarity index 100%
rename from packages/react-components/react-tooltip/stories/Tooltip/index.stories.tsx
rename to packages/react-components/react-tooltip/src/stories/Tooltip/index.stories.tsx
diff --git a/packages/react-components/react-tooltip/tsconfig.lib.json b/packages/react-components/react-tooltip/tsconfig.lib.json
index 6f90cf95c005bd..7f94e04299ed85 100644
--- a/packages/react-components/react-tooltip/tsconfig.lib.json
+++ b/packages/react-components/react-tooltip/tsconfig.lib.json
@@ -10,7 +10,7 @@
     "types": ["static-assets", "environment"]
   },
   "exclude": [
-    "./src/testing/**",
+    "./src/common/**",
     "**/*.spec.ts",
     "**/*.spec.tsx",
     "**/*.test.ts",
diff --git a/packages/react-components/react-tooltip/tsconfig.spec.json b/packages/react-components/react-tooltip/tsconfig.spec.json
index 911456fe4b4d91..469fcba4d7ba75 100644
--- a/packages/react-components/react-tooltip/tsconfig.spec.json
+++ b/packages/react-components/react-tooltip/tsconfig.spec.json
@@ -5,13 +5,5 @@
     "outDir": "dist",
     "types": ["jest", "node"]
   },
-  "include": [
-    "**/*.spec.ts",
-    "**/*.spec.tsx",
-    "**/*.test.ts",
-    "**/*.test.tsx",
-    "**/*.d.ts",
-    "./src/testing/**/*.ts",
-    "./src/testing/**/*.tsx"
-  ]
+  "include": ["**/*.spec.ts", "**/*.spec.tsx", "**/*.test.ts", "**/*.test.tsx", "**/*.d.ts"]
 }

From 1d3eaab4ac01e10e6f55fcfc0d9c3f87cd00cf57 Mon Sep 17 00:00:00 2001
From: marigome-msft <marigome@microsoft.com>
Date: Wed, 30 Nov 2022 16:15:09 -0800
Subject: [PATCH 05/11] ui fixes

---
 .../src/components/Alert/useAlertStyles.ts    | 35 +++++++++++++++----
 1 file changed, 28 insertions(+), 7 deletions(-)

diff --git a/packages/react-components/react-alert/src/components/Alert/useAlertStyles.ts b/packages/react-components/react-alert/src/components/Alert/useAlertStyles.ts
index c6ced1c43ef778..f0fac2f3985b64 100644
--- a/packages/react-components/react-alert/src/components/Alert/useAlertStyles.ts
+++ b/packages/react-components/react-alert/src/components/Alert/useAlertStyles.ts
@@ -18,7 +18,7 @@ const useStyles = makeStyles({
     minHeight: '44px',
     ...shorthands.padding('0', '12px'),
     ...shorthands.borderRadius('4px'),
-    ...shorthands.border('1px', 'solid', tokens.colorTransparentStrokeInteractive),
+    ...shorthands.border('1px', 'solid', tokens.colorTransparentStroke),
     boxShadow: tokens.shadow8,
     fontSize: tokens.fontSizeBase300,
     fontWeight: tokens.fontWeightSemibold,
@@ -26,7 +26,7 @@ const useStyles = makeStyles({
     backgroundColor: tokens.colorNeutralBackground1,
   },
   inverted: {
-    color: tokens.colorNeutralForegroundInverted,
+    color: tokens.colorNeutralForegroundInverted2,
     backgroundColor: tokens.colorNeutralBackgroundInverted,
   },
   icon: {
@@ -41,7 +41,7 @@ const useStyles = makeStyles({
     ...shorthands.padding('0'),
     minWidth: 0,
     marginLeft: 'auto',
-    color: tokens.colorBrandForegroundLink,
+    color: tokens.colorBrandForeground1,
   },
 });
 
@@ -60,17 +60,32 @@ const useIntentIconStyles = makeStyles({
   },
 });
 
+const useIntentIconStylesInverted = makeStyles({
+  warning: {
+    // TODO: update this when token is created
+    color: tokens.colorPaletteYellowForeground2,
+  },
+  info: {
+    color: tokens.colorNeutralForegroundInverted2,
+  },
+});
+
+const useActionButtonColorInverted = makeStyles({ action: { color: tokens.colorBrandForegroundInverted } });
+
 /**
  * Apply styling to the Alert slots based on the state
  */
 export const useAlertStyles_unstable = (state: AlertState): AlertState => {
   const styles = useStyles();
-  const intentIconStyles = useIntentIconStyles();
+  const inverted = state.appearance === 'inverted';
+  const intentIconStylesPrimary = useIntentIconStyles();
+  const mergedIntentIconStylesInverted = { ...intentIconStylesPrimary, ...useIntentIconStylesInverted() };
+  const actionStylesInverted = useActionButtonColorInverted();
 
   state.root.className = mergeClasses(
     alertClassNames.root,
     styles.root,
-    state.appearance !== 'primary' && styles.inverted,
+    inverted && styles.inverted,
     state.root.className,
   );
 
@@ -78,7 +93,7 @@ export const useAlertStyles_unstable = (state: AlertState): AlertState => {
     state.icon.className = mergeClasses(
       alertClassNames.icon,
       styles.icon,
-      state.intent && intentIconStyles[state.intent],
+      state.intent && (inverted ? mergedIntentIconStylesInverted[state.intent] : intentIconStylesPrimary[state.intent]),
       state.icon.className,
     );
   }
@@ -88,7 +103,13 @@ export const useAlertStyles_unstable = (state: AlertState): AlertState => {
   }
 
   if (state.action) {
-    state.action.className = mergeClasses(alertClassNames.action, styles.action, state.action.className);
+    // Note: inverted && actionStylesInverted.action has the highest piority and must be merged last
+    state.action.className = mergeClasses(
+      alertClassNames.action,
+      styles.action,
+      inverted && actionStylesInverted.action,
+      state.action.className,
+    );
   }
 
   return state;

From cf62086f644533dea3bcc3bc812b365f7823824d Mon Sep 17 00:00:00 2001
From: marigome-msft <marigome@microsoft.com>
Date: Wed, 14 Dec 2022 09:33:07 -0800
Subject: [PATCH 06/11] update tokens

---
 .../src/components/Alert/useAlertStyles.ts    | 30 ++++++++++++++-----
 1 file changed, 23 insertions(+), 7 deletions(-)

diff --git a/packages/react-components/react-alert/src/components/Alert/useAlertStyles.ts b/packages/react-components/react-alert/src/components/Alert/useAlertStyles.ts
index f0fac2f3985b64..893889e503b7de 100644
--- a/packages/react-components/react-alert/src/components/Alert/useAlertStyles.ts
+++ b/packages/react-components/react-alert/src/components/Alert/useAlertStyles.ts
@@ -38,7 +38,7 @@ const useStyles = makeStyles({
     ...shorthands.margin('0', '8px', '0', '0'),
   },
   action: {
-    ...shorthands.padding('0'),
+    ...shorthands.padding('5px', '10px'),
     minWidth: 0,
     marginLeft: 'auto',
     color: tokens.colorBrandForeground1,
@@ -61,25 +61,41 @@ const useIntentIconStyles = makeStyles({
 });
 
 const useIntentIconStylesInverted = makeStyles({
+  success: {
+    color: tokens.colorPaletteGreenForegroundInverted,
+  },
+  error: {
+    color: tokens.colorPaletteRedForegroundInverted,
+  },
   warning: {
-    // TODO: update this when token is created
-    color: tokens.colorPaletteYellowForeground2,
+    color: tokens.colorPaletteYellowForegroundInverted,
   },
   info: {
     color: tokens.colorNeutralForegroundInverted2,
   },
 });
 
-const useActionButtonColorInverted = makeStyles({ action: { color: tokens.colorBrandForegroundInverted } });
+const useActionButtonColorInverted = makeStyles({
+  action: {
+    color: tokens.colorBrandForegroundInverted,
+    '&:focus': { ...shorthands.outline('0') },
+    '&:focus-visible': {
+      zIndex: 1,
+      ...shorthands.outline('.2rem', 'solid', tokens.colorNeutralBackground5Pressed),
+      ...shorthands.borderRadius('0.4rem'),
+      ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive),
+    },
+  },
+});
 
 /**
  * Apply styling to the Alert slots based on the state
  */
 export const useAlertStyles_unstable = (state: AlertState): AlertState => {
-  const styles = useStyles();
   const inverted = state.appearance === 'inverted';
+  const styles = useStyles();
   const intentIconStylesPrimary = useIntentIconStyles();
-  const mergedIntentIconStylesInverted = { ...intentIconStylesPrimary, ...useIntentIconStylesInverted() };
+  const intentIconStylesInverted = useIntentIconStylesInverted();
   const actionStylesInverted = useActionButtonColorInverted();
 
   state.root.className = mergeClasses(
@@ -93,7 +109,7 @@ export const useAlertStyles_unstable = (state: AlertState): AlertState => {
     state.icon.className = mergeClasses(
       alertClassNames.icon,
       styles.icon,
-      state.intent && (inverted ? mergedIntentIconStylesInverted[state.intent] : intentIconStylesPrimary[state.intent]),
+      state.intent && (inverted ? intentIconStylesInverted[state.intent] : intentIconStylesPrimary[state.intent]),
       state.icon.className,
     );
   }

From 53abd204ac0fd0e11f9fad07627276e9f6529ef6 Mon Sep 17 00:00:00 2001
From: marigome-msft <marigome@microsoft.com>
Date: Wed, 14 Dec 2022 09:36:56 -0800
Subject: [PATCH 07/11] using px instead of rem

---
 .../react-alert/src/components/Alert/useAlertStyles.ts        | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/react-components/react-alert/src/components/Alert/useAlertStyles.ts b/packages/react-components/react-alert/src/components/Alert/useAlertStyles.ts
index 893889e503b7de..c6b0ebad56f883 100644
--- a/packages/react-components/react-alert/src/components/Alert/useAlertStyles.ts
+++ b/packages/react-components/react-alert/src/components/Alert/useAlertStyles.ts
@@ -81,8 +81,8 @@ const useActionButtonColorInverted = makeStyles({
     '&:focus': { ...shorthands.outline('0') },
     '&:focus-visible': {
       zIndex: 1,
-      ...shorthands.outline('.2rem', 'solid', tokens.colorNeutralBackground5Pressed),
-      ...shorthands.borderRadius('0.4rem'),
+      ...shorthands.outline('2px', 'solid', tokens.colorNeutralBackground5Pressed),
+      ...shorthands.borderRadius('4px'),
       ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive),
     },
   },

From 2ad8b961debf81e58141acd35e28b6f349550421 Mon Sep 17 00:00:00 2001
From: marigome-msft <119430649+marigome-msft@users.noreply.github.com>
Date: Fri, 16 Dec 2022 12:37:45 -0800
Subject: [PATCH 08/11] Update
 packages/react-components/react-alert/src/components/Alert/useAlertStyles.ts

Co-authored-by: Oleksandr Fediashov <alexander.mcgarret@gmail.com>
---
 .../src/components/Alert/useAlertStyles.ts         | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/packages/react-components/react-alert/src/components/Alert/useAlertStyles.ts b/packages/react-components/react-alert/src/components/Alert/useAlertStyles.ts
index c6b0ebad56f883..2c43e2bf82c192 100644
--- a/packages/react-components/react-alert/src/components/Alert/useAlertStyles.ts
+++ b/packages/react-components/react-alert/src/components/Alert/useAlertStyles.ts
@@ -78,13 +78,13 @@ const useIntentIconStylesInverted = makeStyles({
 const useActionButtonColorInverted = makeStyles({
   action: {
     color: tokens.colorBrandForegroundInverted,
-    '&:focus': { ...shorthands.outline('0') },
-    '&:focus-visible': {
-      zIndex: 1,
-      ...shorthands.outline('2px', 'solid', tokens.colorNeutralBackground5Pressed),
-      ...shorthands.borderRadius('4px'),
-      ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive),
-    },
+    ...createCustomFocusIndicatorStyle(
+      {
+        ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive),
+        outlineColor: tokens.colorNeutralBackground5Pressed,
+      },
+      { enableOutline: true },
+    ),
   },
 });
 

From fb52e8dea5d2cef0ce9cc7b7878888a102ea51e0 Mon Sep 17 00:00:00 2001
From: marigome-msft <119430649+marigome-msft@users.noreply.github.com>
Date: Sun, 18 Dec 2022 10:45:37 -0800
Subject: [PATCH 09/11] Update
 change/@fluentui-react-alert-8a5ecb73-4cf7-422d-9df6-e2c5d0cacffd.json

Co-authored-by: Oleksandr Fediashov <alexander.mcgarret@gmail.com>
---
 ...uentui-react-alert-8a5ecb73-4cf7-422d-9df6-e2c5d0cacffd.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/change/@fluentui-react-alert-8a5ecb73-4cf7-422d-9df6-e2c5d0cacffd.json b/change/@fluentui-react-alert-8a5ecb73-4cf7-422d-9df6-e2c5d0cacffd.json
index 25e500e7ac528c..5a5d83fccdec16 100644
--- a/change/@fluentui-react-alert-8a5ecb73-4cf7-422d-9df6-e2c5d0cacffd.json
+++ b/change/@fluentui-react-alert-8a5ecb73-4cf7-422d-9df6-e2c5d0cacffd.json
@@ -1,5 +1,5 @@
 {
-  "type": "none",
+  "type": "prerelease",
   "comment": "Fixing Alert component UI via updating tokens",
   "packageName": "@fluentui/react-alert",
   "email": "marigome@microsoft.com",

From 7226df12e1c371d8670f192259736815b0455d91 Mon Sep 17 00:00:00 2001
From: marigome-msft <marigome@microsoft.com>
Date: Mon, 19 Dec 2022 08:10:07 -0800
Subject: [PATCH 10/11] tabster

---
 packages/react-components/react-alert/package.json              | 1 +
 .../react-alert/src/components/Alert/useAlertStyles.ts          | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/react-components/react-alert/package.json b/packages/react-components/react-alert/package.json
index 9f47ff05a58f84..a794c58264beda 100644
--- a/packages/react-components/react-alert/package.json
+++ b/packages/react-components/react-alert/package.json
@@ -34,6 +34,7 @@
     "@fluentui/react-avatar": "^9.2.8",
     "@fluentui/react-button": "^9.1.10",
     "@fluentui/react-icons": "^2.0.175",
+    "@fluentui/react-tabster": "^9.3.2",
     "@fluentui/react-theme": "^9.1.3",
     "@fluentui/react-utilities": "^9.2.2",
     "@griffel/react": "^1.4.2",
diff --git a/packages/react-components/react-alert/src/components/Alert/useAlertStyles.ts b/packages/react-components/react-alert/src/components/Alert/useAlertStyles.ts
index 2c43e2bf82c192..20e3ae1904ade0 100644
--- a/packages/react-components/react-alert/src/components/Alert/useAlertStyles.ts
+++ b/packages/react-components/react-alert/src/components/Alert/useAlertStyles.ts
@@ -1,6 +1,6 @@
 import { tokens } from '@fluentui/react-theme';
 import { makeStyles, mergeClasses, shorthands } from '@griffel/react';
-
+import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';
 import type { AlertSlots, AlertState } from './Alert.types';
 import type { SlotClassNames } from '@fluentui/react-utilities';
 

From c9e095152d91b9a8f61233f6b4c536ec9a4bafab Mon Sep 17 00:00:00 2001
From: marigome-msft <marigome@microsoft.com>
Date: Mon, 19 Dec 2022 08:21:09 -0800
Subject: [PATCH 11/11] update changelog to follow changelog guidelines

---
 ...ntui-react-alert-8a5ecb73-4cf7-422d-9df6-e2c5d0cacffd.json | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/change/@fluentui-react-alert-8a5ecb73-4cf7-422d-9df6-e2c5d0cacffd.json b/change/@fluentui-react-alert-8a5ecb73-4cf7-422d-9df6-e2c5d0cacffd.json
index 5a5d83fccdec16..9a19fbea07308e 100644
--- a/change/@fluentui-react-alert-8a5ecb73-4cf7-422d-9df6-e2c5d0cacffd.json
+++ b/change/@fluentui-react-alert-8a5ecb73-4cf7-422d-9df6-e2c5d0cacffd.json
@@ -1,7 +1,7 @@
 {
   "type": "prerelease",
-  "comment": "Fixing Alert component UI via updating tokens",
+  "comment": "fix: update tokens to match the spec",
   "packageName": "@fluentui/react-alert",
   "email": "marigome@microsoft.com",
-  "dependentChangeType": "none"
+  "dependentChangeType": "patch"
 }