Documentation to move from old to new theme provider (#911)

* Add missing pages to index

* Documentation for theme provider converstion

* Update some paths

* Address feedback

docs/pages/Theming/Basics.md

@@ -53,7 +53,7 @@ For more information about customizing themes, take a look at [Custom Themes](./
 You can use the `useTheme()` hook to get the current theme inside a component.
 
 ```tsx
-import { useTheme } from '@fluentui-react-native/theme-types';
+import { useTheme } from '@fluentui-react-native/framework';
 
 export const Component = () => {
   const theme = useTheme();

docs/pages/Theming/DefaultThemes.md

@@ -21,7 +21,7 @@ You can create a theme using information from Office by calling `createOfficeThe
 ```tsx
 import { ThemeProvider } from '@fluentui-react-native/theme';
 import { createOfficeTheme } from '@fluentui-react-native/win32-theme';
-import { useTheme } from '@fluentui-react-native/theme-types';
+import { useTheme } from '@fluentui-react-native/framework';
 import { Text } from 'react-native';
 
 const AppWithOfficeTheme = () => {

docs/pages/Theming/ThemedStylesheet.md

@@ -9,7 +9,7 @@ Defining a themed `StyleSheet` is similar to creating a RN `StyleSheet`, but it
 ```ts
 // Component.styles.ts
 import { themedStyleSheet } from '@fluentui-react-native/themed-stylesheet';
-import { Theme } from '@fluentui-react-native/theme-types';
+import { Theme } from '@fluentui-react-native/framework';
 
 export const getThemedStyles = themedStyleSheet((theme: Theme) => {
   return {
@@ -28,7 +28,7 @@ You can use a themed `StyleSheet` as you would an RN `StyleSheet` that's generat
 ```ts
 // Component.ts
 import { getThemedStyles } from './Component.styles.ts';
-import { useTheme } from '@fluentui-react-native/theme-types';
+import { useTheme } from '@fluentui-react-native/framework';
 
 export const Component = () => {
   const styles = getThemedStyles(useTheme());

docs/pages/UpgradeGuides/ThemeProvider.md

@@ -0,0 +1,84 @@
+# Moving from old to new `ThemeProvider`
+
+We have a deprecated ThemeProvider which takes in a `ThemeRegistry`. The new ThemeProvider takes in the `ThemeReference`. This page provides guidance on how to move from the deprecated to the newer system.
+
+## `ThemeRegistry` to `ThemeReference`
+
+The new `ThemeProvider` takes in a different object as its value, a `ThemeReference`, so you'll need to convert your `ThemeRegistry` into a `ThemeReference` in order to use the new `ThemeProvider`.
+
+If you were using `createPlatformThemeRegistry(<paletteName>)` to create your `ThemeRegistry`, you can get an equivalent `ThemeReference` by calling `createOfficeTheme({ paletteName: <paletteName> })` instead. Details on `createOfficeTheme` can be found [here](https://github.com/microsoft/fluentui-react-native/blob/master/docs/pages/Theming/DefaultThemes.md#integration-with-office).
+
+The gist is that what used to be the `ProcessTheme` function passed into the `ThemeRegistry`'s `setTheme` can now be turned into a `ThemeRecipe` passed into the `ThemeReference`. So where a `ThemeRegistry` might have had:
+
+```ts
+import { createThemeRegistry, Theme, PartialTheme, resolvePartialTheme } from '@uifabricshared/theming-react-native';
+
+const registry = createThemeRegistry(baseTheme, resolvePartialTheme);
+registry.setTheme((parentTheme: Theme) => {
+  return { colors: { background: theme.colors.themeDarker } };
+});
+```
+
+the `ThemeReference` would have:
+
+```ts
+import { ThemeReference } from '@fluentui-react-native/theme';
+import { Theme, PartialTheme } from '@fluentui-react-native/framework';
+
+const themeRef = new ThemeReference(
+  baseTheme,
+  (parentTheme: Theme): PartialTheme => {
+    return { colors: { background: theme.colors.themeDarker } };
+  }, // no resolver needed, automatically deeply merged into baseTheme
+);
+```
+
+`ThemeReferences` can also take advantage of our [default themes](https://github.com/microsoft/fluentui-react-native/blob/master/docs/pages/Theming/DefaultThemes.md). Learn how to create custom themes [here](https://github.com/microsoft/fluentui-react-native/blob/master/docs/pages/Theming/CustomTheme.md).
+
+## Importing `ThemeProvider` from the new package
+
+The new `ThemeProvider` resides in a different package and takes in the `ThemeReference` instead. You'll want to change which package you import the `ThemeProvider` from, and then take the theme you converted and pass it into the new `ThemeProvider`:
+
+```ts
+import { ThemeProvider } from @uifabricshared/theming-react-native;
+
+const App = () => {
+  const themeRegistry = getThemeRegistry();
+
+  return (
+    <ThemeProvider registry={themeRegistry}>
+      <AppContent />
+    </ThemeProvider>
+  )
+}
+```
+
+to
+
+```ts
+import { ThemeProvider } from @fluentui-react-native/theme;
+
+const App = () => {
+  const themeRef = getThemeReference();
+
+  return (
+    <ThemeProvider theme={themeRef}>
+      <AppContent />
+    </ThemeProvider>
+  )
+}
+```
+
+## Accessing the theme in components
+
+The new ThemeProvider uses the same context as the old one, so accessing the theme still uses the same `useTheme()` hook - no functional change is needed to access the theme with the new `ThemeProvider`. The only change you'll want to make is to import `useTheme()` from the newer package:
+
+```ts
+import { useTheme } from @uifabricshared/theming-react-native;
+```
+
+to
+
+```ts
+import { useTheme } from @fluentui-react-native/framework;
+```

docs/pages/index.mdx

@@ -19,6 +19,8 @@
 
 - [Basics](./Theming/Basics.md)
 - [Platform Default and Office Themes](./Theming/DefaultThemes.md)
+- [Customizing themes](./Theming/CustomTheme.md)
+- [Using Themed Stylesheets](./Theming/ThemedStylesheet.md)
 
 ## Utilities
 
@@ -26,6 +28,10 @@
 - [FocusZone](./Utilities/FocusZone.mdx)
 - [Stack](./Utilities/Stack.mdx)
 
+## Upgrade Guides
+
+- [Moving to newer `ThemeProvder`](./UpgradeGuides/ThemeProvder.md)
+
 ## Contributing Docs Template
 
 > ```