Add support for PlatformColors - change colors to use ColorValue as type (#694)

* Change ColorValue to pull from react-native * Some refactoring * Update types and documentation * Get everything to pull ColorValue from react-native * Remove ColorValue export * Move getCurrentAppearence out
2021-06-14 17:42:36 -07:00 · 2021-06-14 17:42:36 -07:00 · 90e0dcb92a
--- a/apps/fluent-tester/src/FluentTester/TestComponents/Checkbox/CheckboxTest.tsx
+++ b/apps/fluent-tester/src/FluentTester/TestComponents/Checkbox/CheckboxTest.tsx
@ -1,7 +1,7 @@
 import { Checkbox } from '@fluentui/react-native';
 import { useTheme } from '@fluentui-react-native/theme-types';
 import * as React from 'react';
-import { View, TextInput } from 'react-native';
+import { View, TextInput, TextStyle } from 'react-native';
 import { commonTestStyles as commonStyles } from '../Common/styles';
 import { CHECKBOX_TESTPAGE } from './consts';
 import { Test, TestSection, PlatformStatus } from '../Test';
@ -102,10 +102,9 @@ const tokenCheckbox: React.FunctionComponent<{}> = () => {
  });

  const theme = useTheme();
-  const textBoxBorderStyle = {
+  const textBoxBorderStyle: TextStyle = {
    borderColor: theme.colors.inputBorder,
  };
-
  return (
    <View>
      <CircularCheckbox label="A circular checkbox" onChange={onChangeUncontrolled} defaultChecked={false} />
--- a/apps/fluent-tester/src/FluentTester/TestComponents/Common/Square.tsx
+++ b/apps/fluent-tester/src/FluentTester/TestComponents/Common/Square.tsx
@ -1,20 +1,20 @@
 import * as React from 'react';
-import { ViewProps, View } from 'react-native';
+import { ViewProps, View, StyleProp, ViewStyle, ColorValue } from 'react-native';

 export interface ISquareProps extends ViewProps {
-  color?: string;
+  color?: ColorValue;
 }

 export const Square: React.FunctionComponent<ISquareProps> = (props: ISquareProps) => {
-  const newStyle = {
+  const newStyle: ViewStyle = {
    backgroundColor: props.color || '#ff0000',
    borderColor: '#c3c3c3',
    borderWidth: 1,
    height: 40,
-    width: 40
+    width: 40,
  };

-  const style = props.style ? [props.style, newStyle] : newStyle;
+  const style: StyleProp<ViewStyle> = props.style ? [props.style, newStyle] : newStyle;

  return <View {...props} style={style} />;
 };
--- a/apps/fluent-tester/src/FluentTester/TestComponents/Persona/CustomizeUsage.tsx
+++ b/apps/fluent-tester/src/FluentTester/TestComponents/Persona/CustomizeUsage.tsx
@ -1,5 +1,5 @@
 import * as React from 'react';
-import { View, Text, Switch, TextInput } from 'react-native';
+import { View, Text, Switch, TextInput, TextStyle } from 'react-native';
 import { IPersonaTokens, Persona } from '@fluentui/react-native';
 import { michaelImageUrl } from './styles';
 import { commonTestStyles as commonStyles } from '../Common/styles';
@ -46,7 +46,7 @@ export const CustomizeUsage: React.FunctionComponent<{}> = () => {
  }

  const theme = useTheme();
-  const textBoxBorderStyle = {
+  const textBoxBorderStyle: TextStyle = {
    borderColor: theme.colors.inputBorder,
  };

--- a/apps/fluent-tester/src/FluentTester/TestComponents/PersonaCoin/CustomizeUsage.tsx
+++ b/apps/fluent-tester/src/FluentTester/TestComponents/PersonaCoin/CustomizeUsage.tsx
@ -1,6 +1,6 @@
 import * as React from 'react';
 import { PersonaCoin, IconAlignment, IPersonaCoinTokens } from '@fluentui/react-native';
-import { Switch, View, Text, TextInput } from 'react-native';
+import { Switch, View, Text, TextInput, TextStyle } from 'react-native';
 import { Slider } from '../Common/Slider';
 import { steveBallmerPhotoUrl } from './styles';
 import { useTheme } from '@fluentui-react-native/theme-types';
@ -20,7 +20,7 @@ export const CustomizeUsage: React.FunctionComponent<{}> = () => {
  const [verticalAlignment, setVerticalAlignment] = React.useState<IconAlignment>();

  const theme = useTheme();
-  const textBoxBorderStyle = {
+  const textBoxBorderStyle: TextStyle = {
    borderColor: theme.colors.inputBorder,
  };

--- a/apps/fluent-tester/src/FluentTester/TestComponents/Theme/ThemeTest.tsx
+++ b/apps/fluent-tester/src/FluentTester/TestComponents/Theme/ThemeTest.tsx
@ -74,7 +74,7 @@ const SwatchList: React.FunctionComponent = () => {

  const aggregator = React.useCallback(
    (key: string) => {
-      return { name: key + ' (' + palette[key] + ')', color: palette[key] };
+      return { name: key + ' (' + (palette[key] as string) + ')', color: palette[key] };
    },
    [palette],
  );
--- a/apps/fluent-tester/src/FluentTester/theme/CustomThemes.ts
+++ b/apps/fluent-tester/src/FluentTester/theme/CustomThemes.ts
@ -1,10 +1,11 @@
 import { createAppleTheme } from '@fluentui-react-native/apple-theme';
-import { createDefaultTheme, ThemeOptions } from '@fluentui-react-native/default-theme';
+import { createDefaultTheme } from '@fluentui-react-native/default-theme';
 import { ThemeReference } from '@fluentui-react-native/theme';
 import { Platform } from 'react-native';
 import { applyBrand, OfficeBrand } from './applyBrand';
 import { applyTheme, ThemeNames } from './applyTheme';
 import { createAndroidTheme } from '@fluentui-react-native/android-theme';
+import { ThemeOptions } from '@fluentui-react-native/theme-types';

 const themeOptions: ThemeOptions = { paletteName: 'TaskPane', appearance: 'dynamic' };

--- a/apps/fluent-tester/src/FluentTester/theme/ThemePickers.android.tsx
+++ b/apps/fluent-tester/src/FluentTester/theme/ThemePickers.android.tsx
@ -49,13 +49,21 @@ export const ThemePickers: React.FunctionComponent<{}> = () => {

  const theme = useTheme();
  const themedPickerStyles = getThemedDropdownStyles(theme);
+
+  type DropdownEntry = { label: string; value: string };
+
+  // react-native-picker is still on 0.61, and their color prop doesn't handle ColorValue
+  let dropdownIconColor = theme.colors.buttonIcon;
+  if (typeof dropdownIconColor !== 'string') {
+    dropdownIconColor = theme.host.appearance === 'dark' ? '#FFFFFF' : '#000000';
+  }
+
  const dropdownProps: PickerPropsAndroid & { dropdownIconColor: string } = {
    style: themedPickerStyles.dropdown,
    mode: 'dropdown',
-    dropdownIconColor: theme.colors.buttonIcon,
+    dropdownIconColor: dropdownIconColor,
  };

-  type DropdownEntry = { label: string; value: string };
  type DropdownProps = { initial: string; onValueChange: (value: string) => void; options: DropdownEntry[] };

  const Dropdown = (props: DropdownProps) => {
--- a/apps/fluent-tester/src/FluentTester/theme/ThemePickers.ios.tsx
+++ b/apps/fluent-tester/src/FluentTester/theme/ThemePickers.ios.tsx
@ -9,6 +9,7 @@ import { Theme, useTheme } from '@fluentui-react-native/framework';
 import { themedStyleSheet } from '@fluentui-react-native/themed-stylesheet';

 export const themePickerStyles = themedStyleSheet((t: Theme) => {
+  // picker, pickerItem, dropdown used in iOS dark mode
  return {
    pickerRoot: {
      flexDirection: 'row',
@ -22,7 +23,6 @@ export const themePickerStyles = themedStyleSheet((t: Theme) => {
    pickerItem: {
      color: t.colors.bodyText,
    },
-
    dropdown: {
      height: 200,
      width: 90,
--- a/change/@fluentui-react-native-android-theme-2021-06-09-16-04-13-change_colors_to_colorvalue.json
+++ b/change/@fluentui-react-native-android-theme-2021-06-09-16-04-13-change_colors_to_colorvalue.json
@ -0,0 +1,8 @@
+{
+  "type": "minor",
+  "comment": "Get everything to pull ColorValue from react-native",
+  "packageName": "@fluentui-react-native/android-theme",
+  "email": "ruaraki@microsoft.com",
+  "dependentChangeType": "patch",
+  "date": "2021-06-09T23:04:06.166Z"
+}
--- a/change/@fluentui-react-native-apple-theme-2021-06-09-16-04-13-change_colors_to_colorvalue.json
+++ b/change/@fluentui-react-native-apple-theme-2021-06-09-16-04-13-change_colors_to_colorvalue.json
@ -0,0 +1,8 @@
+{
+  "type": "minor",
+  "comment": "Get everything to pull ColorValue from react-native",
+  "packageName": "@fluentui-react-native/apple-theme",
+  "email": "ruaraki@microsoft.com",
+  "dependentChangeType": "patch",
+  "date": "2021-06-09T23:04:10.507Z"
+}
--- a/change/@fluentui-react-native-button-2021-05-13-13-58-49-change_colors_to_colorvalue.json
+++ b/change/@fluentui-react-native-button-2021-05-13-13-58-49-change_colors_to_colorvalue.json
@ -0,0 +1,8 @@
+{
+  "type": "minor",
+  "comment": "Handle ColorValue instead of string as color type",
+  "packageName": "@fluentui-react-native/button",
+  "email": "ruaraki@microsoft.com",
+  "dependentChangeType": "patch",
+  "date": "2021-05-13T20:57:16.525Z"
+}
--- a/change/@fluentui-react-native-checkbox-2021-05-13-13-58-49-change_colors_to_colorvalue.json
+++ b/change/@fluentui-react-native-checkbox-2021-05-13-13-58-49-change_colors_to_colorvalue.json
@ -0,0 +1,8 @@
+{
+  "type": "minor",
+  "comment": "Handle ColorValue instead of string as color type",
+  "packageName": "@fluentui-react-native/checkbox",
+  "email": "ruaraki@microsoft.com",
+  "dependentChangeType": "patch",
+  "date": "2021-05-13T20:57:25.615Z"
+}
--- a/change/@fluentui-react-native-composition-2021-05-13-16-21-14-change_colors_to_colorvalue.json
+++ b/change/@fluentui-react-native-composition-2021-05-13-16-21-14-change_colors_to_colorvalue.json
@ -0,0 +1,8 @@
+{
+  "type": "minor",
+  "comment": "Add support for ColorValue",
+  "packageName": "@fluentui-react-native/composition",
+  "email": "ruaraki@microsoft.com",
+  "dependentChangeType": "patch",
+  "date": "2021-05-13T23:20:31.760Z"
+}
--- a/change/@fluentui-react-native-default-theme-2021-06-11-12-23-57-change_colors_to_colorvalue.json
+++ b/change/@fluentui-react-native-default-theme-2021-06-11-12-23-57-change_colors_to_colorvalue.json
@ -0,0 +1,8 @@
+{
+  "type": "minor",
+  "comment": "Move getCurrentAppearence out",
+  "packageName": "@fluentui-react-native/default-theme",
+  "email": "ruaraki@microsoft.com",
+  "dependentChangeType": "patch",
+  "date": "2021-06-11T19:23:56.799Z"
+}
--- a/change/@fluentui-react-native-experimental-avatar-2021-05-13-13-58-49-change_colors_to_colorvalue.json
+++ b/change/@fluentui-react-native-experimental-avatar-2021-05-13-13-58-49-change_colors_to_colorvalue.json
@ -0,0 +1,8 @@
+{
+  "type": "minor",
+  "comment": "Handle ColorValue instead of string as color type",
+  "packageName": "@fluentui-react-native/experimental-avatar",
+  "email": "ruaraki@microsoft.com",
+  "dependentChangeType": "patch",
+  "date": "2021-05-13T20:57:56.866Z"
+}
--- a/change/@fluentui-react-native-experimental-button-2021-05-13-13-58-49-change_colors_to_colorvalue.json
+++ b/change/@fluentui-react-native-experimental-button-2021-05-13-13-58-49-change_colors_to_colorvalue.json
@ -0,0 +1,8 @@
+{
+  "type": "minor",
+  "comment": "Handle ColorValue instead of string as color type",
+  "packageName": "@fluentui-react-native/experimental-button",
+  "email": "ruaraki@microsoft.com",
+  "dependentChangeType": "patch",
+  "date": "2021-05-13T20:58:06.571Z"
+}
--- a/change/@fluentui-react-native-experimental-native-button-2021-05-13-13-58-49-change_colors_to_colorvalue.json
+++ b/change/@fluentui-react-native-experimental-native-button-2021-05-13-13-58-49-change_colors_to_colorvalue.json
@ -0,0 +1,8 @@
+{
+  "type": "minor",
+  "comment": "Add support for ColorValue",
+  "packageName": "@fluentui-react-native/experimental-native-button",
+  "email": "ruaraki@microsoft.com",
+  "dependentChangeType": "patch",
+  "date": "2021-05-13T20:58:27.293Z"
+}
--- a/change/@fluentui-react-native-experimental-shimmer-2021-05-13-13-58-49-change_colors_to_colorvalue.json
+++ b/change/@fluentui-react-native-experimental-shimmer-2021-05-13-13-58-49-change_colors_to_colorvalue.json
@ -0,0 +1,8 @@
+{
+  "type": "minor",
+  "comment": "Add support for ColorValue",
+  "packageName": "@fluentui-react-native/experimental-shimmer",
+  "email": "ruaraki@microsoft.com",
+  "dependentChangeType": "patch",
+  "date": "2021-05-13T20:58:33.319Z"
+}
--- a/change/@fluentui-react-native-experimental-text-2021-05-14-15-52-48-change_colors_to_colorvalue.json
+++ b/change/@fluentui-react-native-experimental-text-2021-05-14-15-52-48-change_colors_to_colorvalue.json
@ -0,0 +1,8 @@
+{
+  "type": "minor",
+  "comment": "Add support for ColorValue",
+  "packageName": "@fluentui-react-native/experimental-text",
+  "email": "ruaraki@microsoft.com",
+  "dependentChangeType": "patch",
+  "date": "2021-05-14T22:52:48.173Z"
+}
--- a/change/@fluentui-react-native-icon-2021-05-13-13-58-49-change_colors_to_colorvalue.json
+++ b/change/@fluentui-react-native-icon-2021-05-13-13-58-49-change_colors_to_colorvalue.json
@ -0,0 +1,8 @@
+{
+  "type": "minor",
+  "comment": "Handle ColorValue input for color prop",
+  "packageName": "@fluentui-react-native/icon",
+  "email": "ruaraki@microsoft.com",
+  "dependentChangeType": "patch",
+  "date": "2021-05-13T20:58:20.825Z"
+}
--- a/change/@fluentui-react-native-merge-props-2021-05-13-16-21-14-change_colors_to_colorvalue.json
+++ b/change/@fluentui-react-native-merge-props-2021-05-13-16-21-14-change_colors_to_colorvalue.json
@ -0,0 +1,8 @@
+{
+  "type": "minor",
+  "comment": "Add support for ColorValue",
+  "packageName": "@fluentui-react-native/merge-props",
+  "email": "ruaraki@microsoft.com",
+  "dependentChangeType": "patch",
+  "date": "2021-05-13T23:21:03.207Z"
+}
--- a/change/@fluentui-react-native-persona-2021-05-13-13-58-49-change_colors_to_colorvalue.json
+++ b/change/@fluentui-react-native-persona-2021-05-13-13-58-49-change_colors_to_colorvalue.json
@ -0,0 +1,8 @@
+{
+  "type": "minor",
+  "comment": "Handle ColorValue instad of string as color type",
+  "packageName": "@fluentui-react-native/persona",
+  "email": "ruaraki@microsoft.com",
+  "dependentChangeType": "patch",
+  "date": "2021-05-13T20:57:36.032Z"
+}
--- a/change/@fluentui-react-native-persona-coin-2021-05-14-15-52-48-change_colors_to_colorvalue.json
+++ b/change/@fluentui-react-native-persona-coin-2021-05-14-15-52-48-change_colors_to_colorvalue.json
@ -0,0 +1,8 @@
+{
+  "type": "minor",
+  "comment": "Add support for ColorValue",
+  "packageName": "@fluentui-react-native/persona-coin",
+  "email": "ruaraki@microsoft.com",
+  "dependentChangeType": "patch",
+  "date": "2021-05-14T22:52:42.906Z"
+}
--- a/change/@fluentui-react-native-separator-2021-05-13-13-58-49-change_colors_to_colorvalue.json
+++ b/change/@fluentui-react-native-separator-2021-05-13-13-58-49-change_colors_to_colorvalue.json
@ -0,0 +1,8 @@
+{
+  "type": "minor",
+  "comment": "Handle ColorValue instead of string as color type",
+  "packageName": "@fluentui-react-native/separator",
+  "email": "ruaraki@microsoft.com",
+  "dependentChangeType": "patch",
+  "date": "2021-05-13T20:57:46.125Z"
+}
--- a/change/@fluentui-react-native-tester-2021-05-13-13-58-49-change_colors_to_colorvalue.json
+++ b/change/@fluentui-react-native-tester-2021-05-13-13-58-49-change_colors_to_colorvalue.json
@ -0,0 +1,8 @@
+{
+  "type": "minor",
+  "comment": "Allow ThemePicker in Android to handle ColorValue",
+  "packageName": "@fluentui-react-native/tester",
+  "email": "ruaraki@microsoft.com",
+  "dependentChangeType": "patch",
+  "date": "2021-05-13T20:56:46.182Z"
+}
--- a/change/@fluentui-react-native-theme-types-2021-05-13-13-58-49-change_colors_to_colorvalue.json
+++ b/change/@fluentui-react-native-theme-types-2021-05-13-13-58-49-change_colors_to_colorvalue.json
@ -0,0 +1,8 @@
+{
+  "type": "minor",
+  "comment": "Add support for ColorValue",
+  "packageName": "@fluentui-react-native/theme-types",
+  "email": "ruaraki@microsoft.com",
+  "dependentChangeType": "patch",
+  "date": "2021-05-13T20:58:40.665Z"
+}
--- a/change/@fluentui-react-native-theming-utils-2021-06-14-14-13-07-change_colors_to_colorvalue.json
+++ b/change/@fluentui-react-native-theming-utils-2021-06-14-14-13-07-change_colors_to_colorvalue.json
@ -0,0 +1,8 @@
+{
+  "type": "minor",
+  "comment": "Move getCurrentAppearence out",
+  "packageName": "@fluentui-react-native/theming-utils",
+  "email": "ruaraki@microsoft.com",
+  "dependentChangeType": "patch",
+  "date": "2021-06-14T21:13:07.393Z"
+}
--- a/change/@fluentui-react-native-tokens-2021-05-13-13-58-49-change_colors_to_colorvalue.json
+++ b/change/@fluentui-react-native-tokens-2021-05-13-13-58-49-change_colors_to_colorvalue.json
@ -0,0 +1,8 @@
+{
+  "type": "minor",
+  "comment": "Add support for ColorValue",
+  "packageName": "@fluentui-react-native/tokens",
+  "email": "ruaraki@microsoft.com",
+  "dependentChangeType": "patch",
+  "date": "2021-05-13T20:58:49.222Z"
+}
--- a/change/@fluentui-react-native-use-styling-2021-05-13-16-21-14-change_colors_to_colorvalue.json
+++ b/change/@fluentui-react-native-use-styling-2021-05-13-16-21-14-change_colors_to_colorvalue.json
@ -0,0 +1,8 @@
+{
+  "type": "minor",
+  "comment": "Add support for ColorValue",
+  "packageName": "@fluentui-react-native/use-styling",
+  "email": "ruaraki@microsoft.com",
+  "dependentChangeType": "patch",
+  "date": "2021-05-13T23:20:42.690Z"
+}
--- a/change/@fluentui-react-native-win32-theme-2021-06-09-16-04-13-change_colors_to_colorvalue.json
+++ b/change/@fluentui-react-native-win32-theme-2021-06-09-16-04-13-change_colors_to_colorvalue.json
@ -0,0 +1,8 @@
+{
+  "type": "minor",
+  "comment": "Get everything to pull ColorValue from react-native",
+  "packageName": "@fluentui-react-native/win32-theme",
+  "email": "ruaraki@microsoft.com",
+  "dependentChangeType": "patch",
+  "date": "2021-06-09T23:04:13.264Z"
+}
--- a/change/@uifabricshared-foundation-compose-2021-05-13-16-21-14-change_colors_to_colorvalue.json
+++ b/change/@uifabricshared-foundation-compose-2021-05-13-16-21-14-change_colors_to_colorvalue.json
@ -0,0 +1,8 @@
+{
+  "type": "minor",
+  "comment": "Add support for ColorValue",
+  "packageName": "@uifabricshared/foundation-compose",
+  "email": "ruaraki@microsoft.com",
+  "dependentChangeType": "patch",
+  "date": "2021-05-13T23:20:47.968Z"
+}
--- a/change/@uifabricshared-foundation-settings-2021-05-13-16-21-14-change_colors_to_colorvalue.json
+++ b/change/@uifabricshared-foundation-settings-2021-05-13-16-21-14-change_colors_to_colorvalue.json
@ -0,0 +1,8 @@
+{
+  "type": "minor",
+  "comment": "Add support for ColorValue",
+  "packageName": "@uifabricshared/foundation-settings",
+  "email": "ruaraki@microsoft.com",
+  "dependentChangeType": "patch",
+  "date": "2021-05-13T23:20:53.088Z"
+}
--- a/change/@uifabricshared-foundation-tokens-2021-05-13-16-21-14-change_colors_to_colorvalue.json
+++ b/change/@uifabricshared-foundation-tokens-2021-05-13-16-21-14-change_colors_to_colorvalue.json
@ -0,0 +1,8 @@
+{
+  "type": "minor",
+  "comment": "Add support for ColorValue",
+  "packageName": "@uifabricshared/foundation-tokens",
+  "email": "ruaraki@microsoft.com",
+  "dependentChangeType": "patch",
+  "date": "2021-05-13T23:20:58.072Z"
+}
--- a/change/@uifabricshared-theme-registry-2021-05-13-16-21-14-change_colors_to_colorvalue.json
+++ b/change/@uifabricshared-theme-registry-2021-05-13-16-21-14-change_colors_to_colorvalue.json
@ -0,0 +1,8 @@
+{
+  "type": "minor",
+  "comment": "Add support for ColorValue",
+  "packageName": "@uifabricshared/theme-registry",
+  "email": "ruaraki@microsoft.com",
+  "dependentChangeType": "patch",
+  "date": "2021-05-13T23:21:08.719Z"
+}
--- a/change/@uifabricshared-themed-settings-2021-05-13-16-21-14-change_colors_to_colorvalue.json
+++ b/change/@uifabricshared-themed-settings-2021-05-13-16-21-14-change_colors_to_colorvalue.json
@ -0,0 +1,8 @@
+{
+  "type": "minor",
+  "comment": "Add support for ColorValue",
+  "packageName": "@uifabricshared/themed-settings",
+  "email": "ruaraki@microsoft.com",
+  "dependentChangeType": "patch",
+  "date": "2021-05-13T23:21:13.920Z"
+}
--- a/change/@uifabricshared-theming-ramp-2021-06-09-17-29-58-change_colors_to_colorvalue.json
+++ b/change/@uifabricshared-theming-ramp-2021-06-09-17-29-58-change_colors_to_colorvalue.json
@ -0,0 +1,8 @@
+{
+  "type": "minor",
+  "comment": "Remove ColorValue export",
+  "packageName": "@uifabricshared/theming-ramp",
+  "email": "ruaraki@microsoft.com",
+  "dependentChangeType": "patch",
+  "date": "2021-06-10T00:29:57.893Z"
+}
--- a/packages/components/Button/src/Button.types.ts
+++ b/packages/components/Button/src/Button.types.ts
@ -1,5 +1,5 @@
 import * as React from 'react';
-import { PressableProps, ViewProps } from 'react-native';
+import { PressableProps, ViewProps, ColorValue } from 'react-native';
 import { IRenderData } from '@uifabricshared/foundation-composable';
 import { ITextProps } from '@fluentui-react-native/text';
 import { IPressableProps } from '@fluentui-react-native/pressable';
@ -54,17 +54,17 @@ export interface IButtonTokens extends FontTokens, IForegroundColorTokens, IBack
  /**
   * The icon color.
   */
-  iconColor?: string;
+  iconColor?: ColorValue;

  /**
   * The icon color when hovering over the Button.
   */
-  iconColorHovered?: string;
+  iconColorHovered?: ColorValue;

  /**
   * The icon color when the Button is being pressed.
   */
-  iconColorPressed?: string;
+  iconColorPressed?: ColorValue;

  /**
   * The size of the icon.
--- a/packages/components/Checkbox/src/Checkbox.types.ts
+++ b/packages/components/Checkbox/src/Checkbox.types.ts
@ -5,6 +5,7 @@ import { IRenderData } from '@uifabricshared/foundation-composable';
 import { ITextProps } from '@fluentui-react-native/text';
 import { FontTokens, IForegroundColorTokens, IBackgroundColorTokens, IBorderTokens } from '@fluentui-react-native/tokens';
 import type { IViewProps } from '@fluentui-react-native/adapters';
+import { ColorValue } from 'react-native';

 export const checkboxName = 'Checkbox';

@ -77,11 +78,11 @@ export interface ICheckboxProps extends IViewProps {
 }

 export interface ICheckboxTokens extends FontTokens, IForegroundColorTokens, IBackgroundColorTokens, IBorderTokens {
-  checkboxBackgroundColor?: string;
-  checkboxBorderColor?: string;
-  checkmarkColor?: string;
+  checkboxBackgroundColor?: ColorValue;
+  checkboxBorderColor?: ColorValue;
+  checkmarkColor?: ColorValue;
  checkmarkVisibility?: number;
-  textBorderColor?: string;
+  textBorderColor?: ColorValue;
 }

 export interface ICheckboxSlotProps {
--- a/packages/components/Persona/src/Persona.types.ts
+++ b/packages/components/Persona/src/Persona.types.ts
@ -2,6 +2,7 @@ import { IPersonaCoinProps, IPersonaCoinTokens } from '@fluentui-react-native/pe
 import type { IViewProps, ITextProps } from '@fluentui-react-native/adapters';
 import { IRenderData } from '@uifabricshared/foundation-composable';
 import { FontTokens } from '@fluentui-react-native/tokens';
+import { ColorValue } from 'react-native';

 export const personaName = 'RNFPersona';

@ -28,7 +29,7 @@ export interface IPersonaTokens extends Omit<IPersonaCoinTokens, 'backgroundColo
  verticalGap?: number;
  horizontalGap?: number;

-  coinBackgroundColor?: string;
+  coinBackgroundColor?: ColorValue;

  textFont?: FontTokens;
  secondaryFont?: FontTokens;
--- a/packages/components/PersonaCoin/src/PersonaCoin.tokens.icon.ts
+++ b/packages/components/PersonaCoin/src/PersonaCoin.tokens.icon.ts
@ -22,7 +22,7 @@ function _buildIconStyles(tokenProps: IPersonaCoinTokens, theme: ITheme): ImageP
      borderRadius: iconSizeAdjusted / 2,
      borderWidth: iconStrokeWidth,
      borderColor: iconStrokeColor,
-    }
+    },
  };
 }

--- a/packages/components/PersonaCoin/src/PersonaCoin.tokens.initialsBackground.ts
+++ b/packages/components/PersonaCoin/src/PersonaCoin.tokens.initialsBackground.ts
@ -21,12 +21,12 @@ function _buildInitialsBackgroundStyles(tokenProps: IPersonaCoinTokens /*, theme
      alignSelf: 'stretch',
      justifyContent: 'center',
      alignItems: 'center',
-      backgroundColor: effectiveBackgroundColor
-    }
+      backgroundColor: effectiveBackgroundColor,
+    },
  };
 }

 export const buildInitialsBackgroundStyles = styleFunction<ViewProps, IPersonaCoinTokens, ITheme>(
  _buildInitialsBackgroundStyles,
-  _initialsBackgroundKeyProps
+  _initialsBackgroundKeyProps,
 );
--- a/packages/components/Separator/src/Separator.types.ts
+++ b/packages/components/Separator/src/Separator.types.ts
@ -1,4 +1,4 @@
-import { ViewProps } from 'react-native';
+import { ViewProps, ColorValue } from 'react-native';

 interface SeparatorPropTokens {
  /**
@ -18,7 +18,7 @@ export interface SeparatorTokens extends SeparatorPropTokens {
  /**
   * Specifies the color of the separator
   */
-  color?: string;
+  color?: ColorValue;
 }

 export interface SeparatorProps extends ViewProps, SeparatorPropTokens {
--- a/packages/experimental/Avatar/src/Avatar.tsx
+++ b/packages/experimental/Avatar/src/Avatar.tsx
@ -1,6 +1,6 @@
 /** @jsx withSlots */
 import { compose, UseSlots, buildProps, mergeProps, withSlots } from '@fluentui-react-native/framework';
-import { Image, ImageURISource, NativeModules, ViewProps } from 'react-native';
+import { Image, ImageURISource, NativeModules, ViewProps, ColorValue } from 'react-native';
 import { ensureNativeComponent } from '@fluentui-react-native/component-cache';
 import { useMemo } from 'react';

@ -42,7 +42,7 @@ export type AvatarData = {
   * If the avatar view is configured to display a border, this will be the border's color.
   * The colored border will not be displayed if a custom border image is provided.
   */
-  color?: string;
+  color?: ColorValue;

  /**
   * Image to be used as border around the avatar. It will be used as a pattern image color,
@ -67,7 +67,7 @@ export type otherAvatarProps = {
  /**
   * Background Color of initials
   */
-  backgroundColor?: string;
+  backgroundColor?: ColorValue;

  /**
   * Image to be used as border around the avatar. It will be used as a pattern image color,
@ -86,7 +86,7 @@ export type otherAvatarProps = {
  /**
   * The color of the border of the avatar view
   */
-  borderColor?: string;
+  borderColor?: ColorValue;

  /**
   * When true, the presence status border is opaque. Otherwise, it is transparent.
@ -158,7 +158,7 @@ export const Avatar = compose<AvatarType>({
  render: (props: AvatarProps, useSlots: UseSlots<AvatarType>) => {
    const Root = useSlots(props).root;

-    const memoizedAvatarData = useMemo(
+    const memoizedAvatarData: AvatarData = useMemo(
      () => ({
        primaryText: props.primaryText,
        secondaryText: props.secondaryText,
--- a/packages/experimental/Button/package.json
+++ b/packages/experimental/Button/package.json
@ -25,7 +25,6 @@
    "@fluentui-react-native/framework": "0.5.1",
    "@fluentui-react-native/interactive-hooks": ">=0.10.2 <1.0.0",
    "@fluentui-react-native/experimental-text": ">=0.4.1 <1.0.0",
-    "@fluentui-react-native/theme-types": ">=0.6.0 <1.0.0",
    "@fluentui-react-native/tokens": ">=0.8.0 <1.0.0",
    "@fluentui-react-native/use-styling": ">=0.5.0 <1.0.0"
  },
--- a/packages/experimental/Button/src/Button.types.ts
+++ b/packages/experimental/Button/src/Button.types.ts
@ -1,6 +1,5 @@
 import * as React from 'react';
-import { ViewProps, ImageProps, ViewStyle } from 'react-native';
-import { ColorValue } from '@fluentui-react-native/theme-types';
+import { ViewProps, ImageProps, ViewStyle, ColorValue } from 'react-native';
 import { TextProps } from '@fluentui-react-native/experimental-text';
 import { FontTokens, IBorderTokens } from '@fluentui-react-native/tokens';
 import { IFocusable, IPressableHooks, IWithPressableOptions } from '@fluentui-react-native/interactive-hooks';
--- a/packages/experimental/Button/src/ButtonTokens.ts
+++ b/packages/experimental/Button/src/ButtonTokens.ts
@ -4,100 +4,101 @@ import { ButtonTokens } from '.';

 export const buttonStates: (keyof ButtonTokens)[] = ['fluid', 'primary', 'ghost', 'hovered', 'focused', 'pressed', 'disabled'];

-export const defaultButtonTokens: TokenSettings<ButtonTokens, Theme> = (t: Theme) => ({
-  backgroundColor: t.colors.buttonBackground,
-  color: t.colors.buttonText,
-  borderColor: t.colors.buttonBorder,
-  iconColor: t.colors.buttonIcon,
-  minHeight: 32,
-  minWidth: 80,
-  borderWidth: 1,
-  borderRadius: 2,
-  fluid: {
-    width: '100%',
-  },
-  disabled: {
-    backgroundColor: t.colors.buttonDisabledBackground,
-    color: t.colors.buttonDisabledContent,
-    borderColor: t.colors.buttonDisabledBorder,
-    iconColor: t.colors.buttonDisabledIcon,
-  },
-  hovered: {
-    backgroundColor: t.colors.buttonHoveredBackground,
-    color: t.colors.buttonHoveredContent,
-    borderColor: t.colors.buttonHoveredBorder,
-    iconColor: t.colors.buttonHoveredIcon,
-  },
-  pressed: {
-    backgroundColor: t.colors.buttonPressedBackground,
-    color: t.colors.buttonPressedContent,
-    borderColor: t.colors.buttonPressedBorder,
-    iconColor: t.colors.buttonPressedIcon,
-  },
-  focused: {
-    backgroundColor: t.colors.buttonFocusedBackground,
-    color: t.colors.buttonFocusedContent,
-    borderColor: t.colors.buttonFocusedBorder,
-    icon: t.colors.buttonFocusedIcon,
-  },
-  primary: {
-    backgroundColor: t.colors.brandBackground,
-    color: t.colors.brandContent,
-    borderColor: t.colors.brandBorder,
-    iconColor: t.colors.brandIcon,
+export const defaultButtonTokens: TokenSettings<ButtonTokens, Theme> = (t: Theme) =>
+  ({
+    backgroundColor: t.colors.buttonBackground,
+    color: t.colors.buttonText,
+    borderColor: t.colors.buttonBorder,
+    iconColor: t.colors.buttonIcon,
+    minHeight: 32,
+    minWidth: 80,
+    borderWidth: 1,
+    borderRadius: 2,
+    fluid: {
+      width: '100%',
+    },
    disabled: {
-      backgroundColor: t.colors.brandDisabledBackground,
-      color: t.colors.brandDisabledContent,
-      borderColor: t.colors.brandDisabledBorder,
-      iconColor: t.colors.brandDisabledIcon,
+      backgroundColor: t.colors.buttonDisabledBackground,
+      color: t.colors.buttonDisabledContent,
+      borderColor: t.colors.buttonDisabledBorder,
+      iconColor: t.colors.buttonDisabledIcon,
    },
    hovered: {
-      backgroundColor: t.colors.brandHoveredBackground,
-      color: t.colors.brandHoveredContent,
-      borderColor: t.colors.brandHoveredBorder,
-      iconColor: t.colors.brandHoveredIcon,
+      backgroundColor: t.colors.buttonHoveredBackground,
+      color: t.colors.buttonHoveredContent,
+      borderColor: t.colors.buttonHoveredBorder,
+      iconColor: t.colors.buttonHoveredIcon,
    },
    pressed: {
-      backgroundColor: t.colors.brandPressedBackground,
-      color: t.colors.brandPressedContent,
-      borderColor: t.colors.brandPressedBorder,
-      iconColor: t.colors.brandPressedIcon,
+      backgroundColor: t.colors.buttonPressedBackground,
+      color: t.colors.buttonPressedContent,
+      borderColor: t.colors.buttonPressedBorder,
+      iconColor: t.colors.buttonPressedIcon,
    },
    focused: {
-      backgroundColor: t.colors.brandFocusedBackground,
-      color: t.colors.brandFocusedContent,
-      borderColor: t.colors.brandFocusedBorder,
-      iconColor: t.colors.brandFocusedIcon,
+      backgroundColor: t.colors.buttonFocusedBackground,
+      color: t.colors.buttonFocusedContent,
+      borderColor: t.colors.buttonFocusedBorder,
+      icon: t.colors.buttonFocusedIcon,
    },
-  },
-  ghost: {
-    backgroundColor: t.colors.ghostBackground,
-    color: t.colors.ghostContent,
-    borderColor: t.colors.ghostBorder,
-    iconColor: t.colors.ghostIcon,
-    disabled: {
-      color: t.colors.ghostDisabledContent,
-      borderColor: t.colors.ghostDisabledBorder,
-      backgroundColor: t.colors.ghostDisabledBackground,
-      iconColor: t.colors.ghostDisabledIcon,
+    primary: {
+      backgroundColor: t.colors.brandBackground,
+      color: t.colors.brandContent,
+      borderColor: t.colors.brandBorder,
+      iconColor: t.colors.brandIcon,
+      disabled: {
+        backgroundColor: t.colors.brandDisabledBackground,
+        color: t.colors.brandDisabledContent,
+        borderColor: t.colors.brandDisabledBorder,
+        iconColor: t.colors.brandDisabledIcon,
+      },
+      hovered: {
+        backgroundColor: t.colors.brandHoveredBackground,
+        color: t.colors.brandHoveredContent,
+        borderColor: t.colors.brandHoveredBorder,
+        iconColor: t.colors.brandHoveredIcon,
+      },
+      pressed: {
+        backgroundColor: t.colors.brandPressedBackground,
+        color: t.colors.brandPressedContent,
+        borderColor: t.colors.brandPressedBorder,
+        iconColor: t.colors.brandPressedIcon,
+      },
+      focused: {
+        backgroundColor: t.colors.brandFocusedBackground,
+        color: t.colors.brandFocusedContent,
+        borderColor: t.colors.brandFocusedBorder,
+        iconColor: t.colors.brandFocusedIcon,
+      },
    },
-    hovered: {
-      backgroundColor: t.colors.ghostHoveredBackground,
-      color: t.colors.ghostHoveredContent,
-      borderColor: t.colors.ghostHoveredBorder,
-      iconColor: t.colors.ghostHoveredIcon,
+    ghost: {
+      backgroundColor: t.colors.ghostBackground,
+      color: t.colors.ghostContent,
+      borderColor: t.colors.ghostBorder,
+      iconColor: t.colors.ghostIcon,
+      disabled: {
+        color: t.colors.ghostDisabledContent,
+        borderColor: t.colors.ghostDisabledBorder,
+        backgroundColor: t.colors.ghostDisabledBackground,
+        iconColor: t.colors.ghostDisabledIcon,
+      },
+      hovered: {
+        backgroundColor: t.colors.ghostHoveredBackground,
+        color: t.colors.ghostHoveredContent,
+        borderColor: t.colors.ghostHoveredBorder,
+        iconColor: t.colors.ghostHoveredIcon,
+      },
+      pressed: {
+        backgroundColor: t.colors.ghostPressedBackground,
+        borderColor: t.colors.ghostPressedBorder,
+        color: t.colors.ghostPressedContent,
+        icon: t.colors.ghostPressedIcon,
+      },
+      focused: {
+        borderColor: t.colors.ghostFocusedBorder,
+        backgroundColor: t.colors.ghostFocusedBackground,
+        color: t.colors.ghostFocusedContent,
+        icon: t.colors.ghostFocusedIcon,
+      },
    },
-    pressed: {
-      backgroundColor: t.colors.ghostPressedBackground,
-      borderColor: t.colors.ghostPressedBorder,
-      color: t.colors.ghostPressedContent,
-      icon: t.colors.ghostPressedIcon,
-    },
-    focused: {
-      borderColor: t.colors.ghostFocusedBorder,
-      backgroundColor: t.colors.ghostFocusedBackground,
-      color: t.colors.ghostFocusedContent,
-      icon: t.colors.ghostFocusedIcon,
-    },
-  },
-});
+  } as ButtonTokens);
--- a/packages/experimental/Button/src/CompoundButton/CompoundButton.types.ts
+++ b/packages/experimental/Button/src/CompoundButton/CompoundButton.types.ts
@ -1,4 +1,4 @@
-import { ViewProps } from 'react-native';
+import { ViewProps, ColorValue } from 'react-native';
 import { TextProps } from '@fluentui-react-native/experimental-text';
 import { ButtonSlotProps, ButtonTokens, ButtonProps } from '../Button.types';
 import { FontTokens } from '@fluentui-react-native/tokens';
@ -7,7 +7,7 @@ export const compoundButtonName = 'CompoundButton';

 export interface CompoundButtonTokens extends ButtonTokens {
  secondaryContentFont?: FontTokens;
-  secondaryContentColor?: string;
+  secondaryContentColor?: ColorValue;
 }

 export interface CompoundButtonProps extends ButtonProps {
--- a/packages/experimental/Button/src/ToggleButton/ToggleButton.styling.ts
+++ b/packages/experimental/Button/src/ToggleButton/ToggleButton.styling.ts
@ -6,25 +6,26 @@ import { buttonStates, defaultButtonTokens } from '../ButtonTokens';
 export const stylingSettings: UseStylingOptions<ToggleButtonProps, ToggleButtonSlotProps, ToggleButtonTokens> = {
  tokens: [
    defaultButtonTokens,
-    (t: Theme) => ({
-      checked: {
-        color: t.colors.buttonCheckedContent,
-        backgroundColor: t.colors.buttonCheckedBackground,
-        hovered: {
-          color: t.colors.buttonCheckedHoveredContent,
-          backgroundColor: t.colors.buttonCheckedHoveredBackground,
-        },
-        ghost: {
-          color: t.colors.ghostCheckedContent,
-          backgroundColor: t.colors.ghostCheckedBackground,
+    (t: Theme) =>
+      ({
+        checked: {
+          color: t.colors.buttonCheckedContent,
+          backgroundColor: t.colors.buttonCheckedBackground,
          hovered: {
-            color: t.colors.ghostCheckedHoveredContent,
-            backgroundColor: t.colors.ghostCheckedHoveredBackground,
-            borderColor: t.colors.ghostCheckedHoveredBorder,
+            color: t.colors.buttonCheckedHoveredContent,
+            backgroundColor: t.colors.buttonCheckedHoveredBackground,
+          },
+          ghost: {
+            color: t.colors.ghostCheckedContent,
+            backgroundColor: t.colors.ghostCheckedBackground,
+            hovered: {
+              color: t.colors.ghostCheckedHoveredContent,
+              backgroundColor: t.colors.ghostCheckedHoveredBackground,
+              borderColor: t.colors.ghostCheckedHoveredBorder,
+            },
          },
        },
-      },
-    }),
+      } as ToggleButtonTokens),
    toggleButtonName,
  ],
  states: ['checked', ...buttonStates],
--- a/packages/experimental/Icon/package.json
+++ b/packages/experimental/Icon/package.json
@ -18,11 +18,13 @@
    "update-api": "fluentui-scripts update-api-extractor"
  },
  "dependencies": {
+    "@fluentui-react-native/default-theme": ">=0.5.1 <1.0.0",
    "@fluentui-react-native/framework": "0.5.1",
-    "@uifabricshared/foundation-compose": "^1.8.1",
    "@fluentui-react-native/text": "^0.9.1",
    "@fluentui-react-native/theme-types": ">=0.6.0 <1.0.0",
+    "@fluentui-react-native/theming-utils": ">=0.1.0 <1.0.0",
    "@fluentui-react-native/tokens": ">=0.8.0 <1.0.0",
+    "@uifabricshared/foundation-compose": "^1.8.1",
    "react-native-svg": "^12.1.1"
  },
  "devDependencies": {
--- a/packages/experimental/Icon/src/Icon.tsx
+++ b/packages/experimental/Icon/src/Icon.tsx
@ -6,6 +6,7 @@ import { SvgUri } from 'react-native-svg';
 import { mergeStyles } from '@fluentui-react-native/framework';
 import { stagedComponent, mergeProps, getMemoCache } from '@fluentui-react-native/framework';
 import { useTheme } from '@fluentui-react-native/theme-types';
+import { getCurrentAppearance } from '@fluentui-react-native/theming-utils';

 const rasterImageStyleCache = getMemoCache<ImageStyle>();

@ -55,16 +56,25 @@ function renderSvg(iconProps: IconProps) {
  const viewBox = iconProps.svgSource.viewBox;
  const style = mergeStyles(iconProps.style, rasterImageStyleCache({ width: width, height: height }, [width, height])[0]);

+  // react-native-svg is still on 0.61, and their color prop doesn't handle ColorValue
+  // If a color for the icon is not supplied, fall back to white or black depending on appearance
+  const theme = useTheme();
+  const iconColor = svgIconProps.color
+    ? svgIconProps.color
+    : getCurrentAppearance(theme.host.appearance, 'light') === 'dark'
+    ? '#FFFFFF'
+    : '#000000';
+
  if (svgIconProps.src) {
    return (
      <View style={style}>
-        <svgIconProps.src viewBox={viewBox} width={width} height={height} color={iconProps.color} />
+        <svgIconProps.src viewBox={viewBox} width={width} height={height} color={iconColor} />
      </View>
    );
  } else if (svgIconProps.uri) {
    return (
      <View style={style}>
-        <SvgUri uri={svgIconProps.uri} viewBox={viewBox} width={width} height={height} color={iconProps.color} />
+        <SvgUri uri={svgIconProps.uri} viewBox={viewBox} width={width} height={height} color={iconColor} />
      </View>
    );
  } else {
@ -78,7 +88,7 @@ export const Icon = stagedComponent((props: IconProps) => {
  return (rest: IconProps) => {
    const color = props.color || theme.colors.buttonText;

-    const baseProps = {
+    const baseProps: IconProps = {
      color: color,
    };

--- a/packages/experimental/Icon/src/Icon.types.ts
+++ b/packages/experimental/Icon/src/Icon.types.ts
@ -1,6 +1,5 @@
 import { SvgProps } from 'react-native-svg';
-import { AccessibilityProps, ImageProps, ImageStyle, StyleProp, TextStyle } from 'react-native';
-import { ColorValue } from '@fluentui-react-native/theme-types';
+import { AccessibilityProps, ImageProps, ImageStyle, StyleProp, TextStyle, ColorValue } from 'react-native';
 export const iconName = 'Icon';

 export interface FontIconProps {
@ -14,6 +13,7 @@ export interface SvgIconProps {
  uri?: string;
  src?: React.FC<SvgProps>;
  viewBox?: string;
+  color?: string;
 }

 export interface RasterImageIconProps {
--- a/packages/experimental/NativeButton/src/NativeButton.types.ts
+++ b/packages/experimental/NativeButton/src/NativeButton.types.ts
@ -1,4 +1,4 @@
-import { ImageURISource } from 'react-native';
+import { ImageURISource, ColorValue } from 'react-native';

 export const nativeButtonName = 'NativeButton';

@ -38,7 +38,7 @@ export interface NativeButtonTokens {
   * Button background color
   * (only works for macOS)
   */
-  accentColor?: string;
+  accentColor?: ColorValue;
 }

 // iOS maps acrylic to primary style since it's a mac specifc style
--- a/packages/experimental/Shimmer/package.json
+++ b/packages/experimental/Shimmer/package.json
@ -19,7 +19,6 @@
  },
  "dependencies": {
    "@fluentui-react-native/framework": "0.5.1",
-    "@fluentui-react-native/theme-types": ">=0.6.0 <1.0.0",
    "@fluentui-react-native/tokens": ">=0.8.0 <1.0.0",
    "react-native-svg": "^12.1.1"
  },
--- a/packages/experimental/Shimmer/src/Shimmer.types.ts
+++ b/packages/experimental/Shimmer/src/Shimmer.types.ts
@ -1,5 +1,5 @@
 import { SvgProps, ImageProps } from 'react-native-svg';
-import { ImageURISource } from 'react-native';
+import { ImageURISource, ColorValue } from 'react-native';

 export const shimmerName = 'Shimmer';
 /**
@ -65,12 +65,12 @@ export interface ShimmerTokens {
   * Gradient tint color
   * @defaultValue 'white'
   */
-  gradientTintColor?: string;
+  gradientTintColor?: ColorValue;
  /**
   * Shimmer element tint color, no-op for image based shimmer
   * @defaultValue 'E1E1E1' for light mode, '404040' for dark mode
   */
-  shimmerTintColor?: string;
+  shimmerTintColor?: ColorValue;
  /**
   * Width of the shimmer view
   * @defaultValue '200'
@ -113,8 +113,6 @@ export interface ShimmerProps extends ShimmerTokens {

 export interface ShimmerType {
  props: ShimmerProps;
-  slotProps: ShimmerSlotProps
+  slotProps: ShimmerSlotProps;
  tokens: ShimmerTokens;
 }
-
-
--- a/packages/experimental/Stack/src/Stack.types.ts
+++ b/packages/experimental/Stack/src/Stack.types.ts
@ -1,5 +1,5 @@
 import { StackItemProps } from './StackItem/StackItem.types';
-import { ViewStyle, ViewProps } from 'react-native';
+import { ViewStyle, ViewProps, ColorValue } from 'react-native';
 import { IBorderTokens, FontTokens } from '@fluentui-react-native/tokens';

 export const stackName = 'Stack';
@ -100,7 +100,7 @@ export interface StackTokens extends FontTokens, IBorderTokens, StackTokenProps
  /**
   * background color for the stack
   */
-  backgroundColor?: string;
+  backgroundColor?: ColorValue;
 }

 /**
--- a/packages/experimental/Text/package.json
+++ b/packages/experimental/Text/package.json
@ -22,8 +22,7 @@
  },
  "dependencies": {
    "@fluentui-react-native/adapters": ">=0.6.0 <1.0.0",
-    "@fluentui-react-native/framework": "0.5.1",
-    "@fluentui-react-native/theme-types": ">=0.6.0 <1.0.0"
+    "@fluentui-react-native/framework": "0.5.1"
  },
  "devDependencies": {
    "@fluentui-react-native/test-tools": ">=0.1.1 <1.0.0",
--- a/packages/experimental/Text/src/Text.tsx
+++ b/packages/experimental/Text/src/Text.tsx
@ -10,9 +10,8 @@ import {
  withSlots,
  Theme,
 } from '@fluentui-react-native/framework';
-import { Text as RNText } from 'react-native';
+import { Text as RNText, ColorValue } from 'react-native';
 import { filterTextProps, ITextProps } from '@fluentui-react-native/adapters';
-import { ColorValue } from '@fluentui-react-native/theme-types';

 const textName = 'Text';

--- a/packages/experimental/composition/package.json
+++ b/packages/experimental/composition/package.json
@ -37,6 +37,7 @@
    "@fluentui-react-native/use-styling": ">=0.5.0 <1.0.0"
  },
  "devDependencies": {
+    "@types/react-native": "^0.63.0",
    "@uifabricshared/build-native": "^0.1.1",
    "react-native": "^0.63.4"
  },
--- a/packages/experimental/composition/src/composeFactory.test.tsx
+++ b/packages/experimental/composition/src/composeFactory.test.tsx
@ -2,26 +2,26 @@
 import { withSlots } from '@fluentui-react-native/use-slots';
 import * as renderer from 'react-test-renderer';
 import { composeFactory, UseStyledSlots } from './composeFactory';
-import { ViewProps, View, Text, TextProps } from 'react-native';
+import { ViewProps, View, Text, TextProps, ColorValue } from 'react-native';
 import { ThemeHelper } from '@fluentui-react-native/use-styling';

 type Theme = {
  values: {
-    backgroundColor?: string;
-    color?: string;
+    backgroundColor?: ColorValue;
+    color?: ColorValue;
  };
  components: {
    [key: string]: object;
  };
-}
+};

 const theme: Theme = {
  values: {
    backgroundColor: 'black',
-    color: 'white'
+    color: 'white',
  },
-  components: {}
-}
+  components: {},
+};

 type SlotProps = {
  outer: ViewProps;
@ -29,47 +29,57 @@ type SlotProps = {
 };

 type Tokens = {
-  backgroundColor?: string;
-  color?: string;
-}
+  backgroundColor?: ColorValue;
+  color?: ColorValue;
+};

 const themeHelper: ThemeHelper<Theme> = {
  useTheme: () => theme,
-  getComponentInfo: (theme: Theme, name: string) => { return theme?.components ?? theme.components[name]; }
-}
+  getComponentInfo: (theme: Theme, name: string) => {
+    return theme?.components ?? theme.components[name];
+  },
+};

 function mergeProps<T>(p1: T, p2: T): T {
  return { ...p1, ...p2 };
 }

-const Base = composeFactory<ViewProps, SlotProps, Tokens, Theme>({
-  tokens: [t => ({
-    backgroundColor: t.values.backgroundColor,
-    color: t.values.color
-  })],
-  slotProps: {
-    outer: tokens => ({ style: { backgroundColor: tokens.backgroundColor }}),
-    content: tokens => ({ style: { color: tokens.color }})
+const Base = composeFactory<ViewProps, SlotProps, Tokens, Theme>(
+  {
+    tokens: [
+      (t) => ({
+        backgroundColor: t.values.backgroundColor,
+        color: t.values.color,
+      }),
+    ],
+    slotProps: {
+      outer: (tokens) => ({ style: { backgroundColor: tokens.backgroundColor } }),
+      content: (tokens) => ({ style: { color: tokens.color } }),
+    },
+    slots: {
+      outer: View,
+      content: Text,
+    },
+    render: (props: ViewProps, useSlots: UseStyledSlots<ViewProps, SlotProps>) => {
+      const Slots = useSlots(props);
+      return (extra: ViewProps) => (
+        <Slots.outer {...mergeProps(props, extra)}>
+          <Slots.content>Hello</Slots.content>
+        </Slots.outer>
+      );
+    },
  },
-  slots: {
-    outer: View,
-    content: Text
-  },
-  render: (props: ViewProps, useSlots: UseStyledSlots<ViewProps, SlotProps>) => {
-    const Slots = useSlots(props);
-    return (extra: ViewProps) => (
-      <Slots.outer {...mergeProps(props, extra)}>
-        <Slots.content>Hello</Slots.content>
-      </Slots.outer>
-    )
-  }
-}, themeHelper);
+  themeHelper,
+);

 const Customized = Base.customize({ backgroundColor: 'pink' });

 const mixinStyle = {
-  width: 30, height: 20, borderColor: 'green', borderWidth: 1
-}
+  width: 30,
+  height: 20,
+  borderColor: 'green',
+  borderWidth: 1,
+};

 describe('composeFactory test suite', () => {
  it('Base component render', () => {
--- a/packages/experimental/use-styling/README.md
+++ b/packages/experimental/use-styling/README.md
@ -14,7 +14,7 @@ An extremely simple example might look like:
 const useSyling = buildUseStyling(myComponentOptions, themeHelper);

 // component implementation, consuming the styling hook
-const MyComponent = props => {
+const MyComponent = (props) => {
  // get some default/styled props for the container and content child components
  const { container, content } = useStyling(props);
  // render as normal but mixin those values to pass the props to the sub-components
@ -103,7 +103,7 @@ A token is simply a setting that informs the styling of the component. These can
 ```ts
 /** Tokens interface for this component */
 interface Tokens {
-  backgroundColor?: string;
+  backgroundColor?: ColorValue;
  borderWidth?: number;
  borderRadius?: number;
 }
@ -160,9 +160,9 @@ Some components may have additional states or modes that can be applied to them.
 ```ts
 interface ButtonTokens {
  // base values
-  backgroundColor?: string;
-  color?: string;
-  borderColor?: string;
+  backgroundColor?: ColorValue;
+  color?: ColorValue;
+  borderColor?: ColorValue;

  // states
  hovered?: ButtonTokens;
@ -205,7 +205,7 @@ const Button = (props: ButtonProps) => {
  // get some state value that figures out whether the button is pressed and/or hovered
  const buttonState: ButtonState = useButtonState(props);
  // get styling values based on props and the current state
-  const { container, icon, label } = useStyling(props, stateName => buttonState[stateName]);
+  const { container, icon, label } = useStyling(props, (stateName) => buttonState[stateName]);

  const buttonProps = useButtonMagic(props, container);
  return (
@ -270,16 +270,19 @@ If there are no tokens which are also props, i.e. if `tokensProps` is falsy, thi

 ```ts
 const slotFn = (tokens: Tokens, theme: Theme, cache: GetMemoValue<Props>) =>
-  cache(() => {
-    return {
-      style: {
-        backgroundColor: tokens.backgroundColor,
-        // etc.
-      },
-    };
-  }, [
-    /* no keys, just direct cache the function result*/
-  ])[0];
+  cache(
+    () => {
+      return {
+        style: {
+          backgroundColor: tokens.backgroundColor,
+          // etc.
+        },
+      };
+    },
+    [
+      /* no keys, just direct cache the function result*/
+    ],
+  )[0];
 ```

 If some all props are tokens then those keys should be considered in the caching. This would then turn into:
--- a/packages/experimental/use-styling/package.json
+++ b/packages/experimental/use-styling/package.json
@ -37,6 +37,7 @@
  },
  "devDependencies": {
    "@types/jest": "^25.1.4",
+    "@types/react-native": "^0.63.0",
    "@uifabricshared/build-native": "^0.1.1",
    "react": "16.13.1",
    "react-native": "^0.63.4"
--- a/packages/experimental/use-styling/src/useStyling.samples.test.tsx
+++ b/packages/experimental/use-styling/src/useStyling.samples.test.tsx
@ -1,5 +1,5 @@
 import { ThemeHelper, buildUseStyling, UseStylingOptions } from './buildUseStyling';
-import { TextProps, Text, View } from 'react-native';
+import { TextProps, Text, View, ColorValue } from 'react-native';
 import { buildProps } from './buildProps';
 import toJson from 'enzyme-to-json';
 import * as React from 'react';
@ -15,9 +15,9 @@ import { mount } from 'enzyme';
 */
 type Theme = {
  globals: {
-    backgroundColor: string;
-    color: string;
-    borderColor: string;
+    backgroundColor: ColorValue;
+    color: ColorValue;
+    borderColor: ColorValue;
    fontFamily: string;
    fontSize: number;
  };
@ -78,7 +78,7 @@ describe('useStyling samples', () => {

  // the tokens for customization are just the color and font props from the theme
  type Sample1Tokens = {
-    color?: string;
+    color?: ColorValue;
    fontFamily?: string;
    fontSize?: number;
  };
--- a/packages/framework/foundation-settings/package.json
+++ b/packages/framework/foundation-settings/package.json
@ -37,7 +37,12 @@
  },
  "devDependencies": {
    "@types/jest": "^25.1.4",
+    "@types/react-native": "^0.63.0",
    "@uifabricshared/build-native": "^0.1.1",
-    "@uifabricshared/eslint-config-rules": "^0.1.1"
+    "@uifabricshared/eslint-config-rules": "^0.1.1",
+    "react-native": "^0.63.4"
+  },
+  "peerDependencies": {
+    "react-native": ">=0.63.4"
  }
 }
--- a/packages/framework/foundation-settings/src/Settings.merge.test.ts
+++ b/packages/framework/foundation-settings/src/Settings.merge.test.ts
@ -1,6 +1,7 @@
 import { IComponentSettings } from './Settings.types';
 import { mergeSettings } from './Settings';
 import { StyleProp } from '@fluentui-react-native/merge-props';
+import { ColorValue } from 'react-native';

 interface IProps {
  root: {
@ -10,7 +11,7 @@ interface IProps {
      fontFamily?: string;
      fontWeight?: 'light' | 'normal' | 'bold';
      fontSize?: number;
-      textColor?: string;
+      textColor?: ColorValue;
    }>;
  };
  slot1: {
--- a/packages/framework/foundation-tokens/package.json
+++ b/packages/framework/foundation-tokens/package.json
@ -37,7 +37,12 @@
  },
  "devDependencies": {
    "@types/jest": "^25.1.4",
+    "@types/react-native": "^0.63.0",
    "@uifabricshared/build-native": "^0.1.1",
-    "@fluentui-react-native/memo-cache": "^1.1.0"
+    "@fluentui-react-native/memo-cache": "^1.1.0",
+    "react-native": "^0.63.4"
+  },
+  "peerDependencies": {
+    "react-native": ">=0.63.4"
  }
 }
--- a/packages/framework/foundation-tokens/src/MockTheme.ts
+++ b/packages/framework/foundation-tokens/src/MockTheme.ts
@ -1,3 +1,5 @@
+import { ColorValue } from 'react-native';
+
 export interface IMockTheme {
  textSizes: {
    small: number;
@ -9,10 +11,10 @@ export interface IMockTheme {
    bold: string;
  };
  colors: {
-    windowBackground: string;
-    windowText: string;
-    buttonBackground: string;
-    buttonText: string;
+    windowBackground: ColorValue;
+    windowText: ColorValue;
+    buttonBackground: ColorValue;
+    buttonText: ColorValue;
  };
 }

@ -20,16 +22,16 @@ export const theme: IMockTheme = {
  textSizes: {
    small: 10,
    medium: 12,
-    large: 14
+    large: 14,
  },
  textWeights: {
    normal: '400',
-    bold: '700'
+    bold: '700',
  },
  colors: {
    windowBackground: 'white',
    windowText: 'black',
    buttonBackground: 'blue',
-    buttonText: 'yellow'
-  }
+    buttonText: 'yellow',
+  },
 };
--- a/packages/framework/foundation-tokens/src/MockTokens.ts
+++ b/packages/framework/foundation-tokens/src/MockTokens.ts
@ -1,5 +1,6 @@
 import { IMockTheme } from './MockTheme';
 import { IStyleFactoryOperation, ILookupThemePart } from './Token.types';
+import { ColorValue } from 'react-native';

 export interface IMockTextTokens {
  fontSize?: string | number;
@ -7,36 +8,36 @@ export interface IMockTextTokens {
 }

 export interface IMockForegroundColorTokens {
-  color?: string;
+  color?: ColorValue;
 }

 export interface IMockBackgroundColorTokens {
-  backgroundColor?: string;
+  backgroundColor?: ColorValue;
 }

 export type IMockColorTokens = IMockForegroundColorTokens & IMockBackgroundColorTokens;

 export interface IMockCaptionTextTokens {
-  captionColor?: string;
+  captionColor?: ColorValue;
 }

 export interface IMockBorderTokens {
  borderWidth?: number;
  borderRadius?: number;
-  borderColor?: string;
+  borderColor?: ColorValue;
 }

 type ITokenParts<T> = IStyleFactoryOperation<T, IMockTheme>[];

 export const standardTextTokens: ITokenParts<IMockTextTokens> = [
-  { source: 'fontSize', lookup: t => t.textSizes },
-  { source: 'fontWeight', lookup: t => t.textWeights }
+  { source: 'fontSize', lookup: (t) => t.textSizes },
+  { source: 'fontWeight', lookup: (t) => t.textWeights },
 ];

-const getPalette: ILookupThemePart<IMockTheme> = t => t.colors;
+const getPalette: ILookupThemePart<IMockTheme> = (t) => t.colors;
 export const standardColorTokens: ITokenParts<IMockColorTokens> = [
  { source: 'backgroundColor', lookup: getPalette },
-  { source: 'color', lookup: getPalette }
+  { source: 'color', lookup: getPalette },
 ];

 export const standardForegroundColorTokens: ITokenParts<IMockColorTokens> = [{ source: 'color', lookup: getPalette }];
@ -48,5 +49,5 @@ export const standardCaptionTokens: ITokenParts<IMockCaptionTextTokens> = [{ sou
 export const standardBorderTokens: ITokenParts<IMockBorderTokens> = [
  { source: 'borderColor', lookup: getPalette },
  { source: 'borderRadius' },
-  { source: 'borderWidth' }
+  { source: 'borderWidth' },
 ];
--- a/packages/framework/merge-props/package.json
+++ b/packages/framework/merge-props/package.json
@ -37,7 +37,12 @@
  },
  "devDependencies": {
    "@types/jest": "^25.1.4",
+    "@types/react-native": "^0.63.0",
    "@uifabricshared/build-native": "^0.1.1",
-    "@uifabricshared/eslint-config-rules": "^0.1.1"
+    "@uifabricshared/eslint-config-rules": "^0.1.1",
+    "react-native": "^0.63.4"
+  },
+  "peerDependencies": {
+    "react-native": ">=0.63.4"
  }
 }
--- a/packages/framework/merge-props/src/mergeStyles.test.ts
+++ b/packages/framework/merge-props/src/mergeStyles.test.ts
@ -1,9 +1,10 @@
 import { flattenStyle, mergeAndFlattenStyles, mergeStyles } from './mergeStyles';
 import { StyleProp } from './mergeStyles.types';
+import { ColorValue } from 'react-native';

 interface IFakeStyle {
-  backgroundColor?: string;
-  color?: string;
+  backgroundColor?: ColorValue;
+  color?: ColorValue;
  fontFamily?: string;
  borderWidth?: number;
  ':hover'?: IFakeStyle;
--- a/packages/framework/theme-registry/package.json
+++ b/packages/framework/theme-registry/package.json
@ -35,7 +35,9 @@
  "devDependencies": {
    "@fluentui-react-native/immutable-merge": "^1.1.0",
    "@types/jest": "^25.1.4",
+    "@types/react-native": "^0.63.0",
    "@uifabricshared/build-native": "^0.1.1",
-    "@uifabricshared/eslint-config-rules": "^0.1.1"
+    "@uifabricshared/eslint-config-rules": "^0.1.1",
+    "react-native": "^0.63.4"
  }
 }
--- a/packages/framework/theme-registry/src/Registry.test.ts
+++ b/packages/framework/theme-registry/src/Registry.test.ts
@ -1,18 +1,19 @@
 import { createThemeRegistry } from './Registry';
 import { IThemeRegistry } from './Registry.types';
 import { immutableMerge } from '@fluentui-react-native/immutable-merge';
+import { ColorValue } from 'react-native';

 interface IFakeStyle {
  textColor?: string;
-  backgroundColor?: string;
+  backgroundColor?: ColorValue;
  fontFamily?: string;
  fontSize?: string | number;
 }

 interface IFakeTheme {
  palette: {
-    bodyBackground?: string;
-    bodyText?: string;
+    bodyBackground?: ColorValue;
+    bodyText?: ColorValue;
  };
  typography: {
    families?: {
@ -37,13 +38,13 @@ interface IFakeTheme {
 const _platformDefaults: IFakeTheme = {
  palette: {
    bodyBackground: '#000000',
-    bodyText: '#ffffff'
+    bodyText: '#ffffff',
  },
  typography: {
    families: {
      primary: 'Platform Font Primary',
-      monospace: 'Platform Font Monospace'
-    }
+      monospace: 'Platform Font Monospace',
+    },
  },
  spacing: { s2: '4px', s1: '8px', m: '16px', l1: '20px', l2: '32px' },
  settings: {
@ -51,10 +52,10 @@ const _platformDefaults: IFakeTheme = {
      root: {
        textColor: 'black',
        fontFamily: 'Verdana',
-        fontSize: 10
-      }
-    }
-  }
+        fontSize: 10,
+      },
+    },
+  },
 };

 const _ocean: Partial<IFakeTheme> = {
@ -62,27 +63,27 @@ const _ocean: Partial<IFakeTheme> = {
    base: {
      root: {
        textColor: 'blue',
-        fontFamily: 'Arial'
-      }
+        fontFamily: 'Arial',
+      },
    },
    MyButton: {
      root: {
-        fontSize: 12
-      }
-    }
-  }
+        fontSize: 12,
+      },
+    },
+  },
 };

 const _platformDefaultsMergedWithOcean: IFakeTheme = {
  palette: {
    bodyBackground: '#000000',
-    bodyText: '#ffffff'
+    bodyText: '#ffffff',
  },
  typography: {
    families: {
      primary: 'Platform Font Primary',
-      monospace: 'Platform Font Monospace'
-    }
+      monospace: 'Platform Font Monospace',
+    },
  },
  spacing: { s2: '4px', s1: '8px', m: '16px', l1: '20px', l2: '32px' },
  settings: {
@ -90,15 +91,15 @@ const _platformDefaultsMergedWithOcean: IFakeTheme = {
      root: {
        textColor: 'blue',
        fontFamily: 'Arial',
-        fontSize: 10
-      }
+        fontSize: 10,
+      },
    },
    MyButton: {
      root: {
-        fontSize: 12
-      }
-    }
-  }
+        fontSize: 12,
+      },
+    },
+  },
 };

 function processor(parent: IFakeTheme): Partial<IFakeTheme> {
@ -108,23 +109,23 @@ function processor(parent: IFakeTheme): Partial<IFakeTheme> {
        root: {
          textColor: 'light' + (parent.settings.base.root as IFakeStyle).textColor,
          fontFamily: (parent.settings.base.root as IFakeStyle).fontFamily + ' Light',
-          fontSize: <number>(parent.settings.base.root as IFakeStyle).fontSize - 2
-        }
-      }
-    }
+          fontSize: <number>(parent.settings.base.root as IFakeStyle).fontSize - 2,
+        },
+      },
+    },
  };
 }

 const _platformDefaultsMergedWithProcessor: IFakeTheme = {
  palette: {
    bodyBackground: '#000000',
-    bodyText: '#ffffff'
+    bodyText: '#ffffff',
  },
  typography: {
    families: {
      primary: 'Platform Font Primary',
-      monospace: 'Platform Font Monospace'
-    }
+      monospace: 'Platform Font Monospace',
+    },
  },
  spacing: { s2: '4px', s1: '8px', m: '16px', l1: '20px', l2: '32px' },
  settings: {
@ -132,10 +133,10 @@ const _platformDefaultsMergedWithProcessor: IFakeTheme = {
      root: {
        textColor: 'lightblack',
        fontFamily: 'Verdana Light',
-        fontSize: 8
-      }
-    }
-  }
+        fontSize: 8,
+      },
+    },
+  },
 };

 function fakeThemeResolver(parent: IFakeTheme, partial?: Partial<IFakeTheme>): IFakeTheme {
--- a/packages/framework/themed-settings/package.json
+++ b/packages/framework/themed-settings/package.json
@ -37,8 +37,13 @@
  "devDependencies": {
    "@types/jest": "^25.1.4",
    "@types/node": "^10.3.5",
+    "@types/react-native": "^0.63.0",
    "@uifabricshared/build-native": "^0.1.1",
    "@uifabricshared/eslint-config-rules": "^0.1.1",
-    "@fluentui-react-native/memo-cache": "^1.1.0"
+    "@fluentui-react-native/memo-cache": "^1.1.0",
+    "react-native": "^0.63.4"
+  },
+  "peerDependencies": {
+    "react-native": ">=0.63.4"
  }
 }
--- a/packages/framework/themed-settings/src/CustomSettings.test.ts
+++ b/packages/framework/themed-settings/src/CustomSettings.test.ts
@ -2,16 +2,17 @@ import { IComponentSettings, mergeSettings } from '@uifabricshared/foundation-se
 import { ISettingsEntry, ISettingsFromTheme } from './CustomSettings.types';
 import { mergeBaseSettings, getThemedSettings } from './CustomSettings';
 import { getMemoCache } from '@fluentui-react-native/memo-cache';
+import { ColorValue } from 'react-native';

 interface IMockTheme {
  palette: {
-    buttonBackground?: string;
-    buttonText?: string;
-    buttonBorder?: string;
-    buttonBackgroundHovered?: string;
-    buttonTextHovered?: string;
-    windowText?: string;
-    windowBackground?: string;
+    buttonBackground?: ColorValue;
+    buttonText?: ColorValue;
+    buttonBorder?: ColorValue;
+    buttonBackgroundHovered?: ColorValue;
+    buttonTextHovered?: ColorValue;
+    windowText?: ColorValue;
+    windowBackground?: ColorValue;
  };
  typography: {
    fontSizes: {
@ -30,23 +31,23 @@ const _theme: IMockTheme = {
    buttonBorder: 'bb',
    buttonText: 'bt',
    windowBackground: 'wb',
-    windowText: 'wt'
+    windowText: 'wt',
  },
  typography: {
    fontSizes: {
      large: 14,
      medium: 12,
-      small: 10
-    }
-  }
+      small: 10,
+    },
+  },
 };

 interface IMockProps {
-  backgroundColor?: string;
-  color?: string;
+  backgroundColor?: ColorValue;
+  color?: ColorValue;
  fontSize?: number;
  borderWidth?: number;
-  borderColor?: string;
+  borderColor?: ColorValue;
  value?: string;
 }

@ -62,67 +63,67 @@ const _lookup: { [key: string]: IMockButtonSettings } = {
      value: 'foo',
      backgroundColor: 'red',
      color: 'val1',
-      borderWidth: 2
+      borderWidth: 2,
    },
    content: {
      color: 'green',
      value: 'val1',
-      fontSize: 10
+      fontSize: 10,
    },
    icon: {
-      color: 'black'
+      color: 'black',
    },
    _precedence: ['primary', 'hovered', 'pressed'],
    _overrides: {
      primary: {
        root: {
-          backgroundColor: 'purple'
+          backgroundColor: 'purple',
        },
        _overrides: {
          hovered: {
            root: {
-              backgroundColor: 'pink'
-            }
+              backgroundColor: 'pink',
+            },
          },
          pressed: {
            root: {
-              backgroundColor: 'orange'
-            }
-          }
-        }
+              backgroundColor: 'orange',
+            },
+          },
+        },
      },
      hovered: {
        root: {
-          backgroundColor: 'gray'
-        }
+          backgroundColor: 'gray',
+        },
      },
      pressed: {
        root: {
-          backgroundColor: 'white'
-        }
-      }
-    }
+          backgroundColor: 'white',
+        },
+      },
+    },
  },
  val2: {
    root: {
      color: '#1c1c1c',
-      value: 'val2'
-    }
-  }
+      value: 'val2',
+    },
+  },
 };

 const val1rootHovered: IMockButtonSettings['root'] = {
  value: 'foo',
  backgroundColor: 'gray',
  color: 'val1',
-  borderWidth: 2
+  borderWidth: 2,
 };

 const val1primaryHovered: IMockButtonSettings['root'] = {
  value: 'foo',
  backgroundColor: 'pink',
  color: 'val1',
-  borderWidth: 2
+  borderWidth: 2,
 };

 function getSettings(_t: IMockTheme, name: string) {
@ -137,25 +138,25 @@ const result1 = _lookup.val1;
 const fragment2: IMockButtonSettings = {
  root: { borderWidth: 3, backgroundColor: 'yellow' },
  content: { value: 'cs1' },
-  _precedence: ['hovered', 'pressed']
+  _precedence: ['hovered', 'pressed'],
 };

-const themeFn2: ISettingsFromTheme<IMockButtonSettings, IMockTheme> = t => ({
+const themeFn2: ISettingsFromTheme<IMockButtonSettings, IMockTheme> = (t) => ({
  root: {
    color: t.palette.buttonText,
-    borderColor: t.palette.buttonBackground
+    borderColor: t.palette.buttonBackground,
  },
  content: {
-    color: t.palette.buttonText
+    color: t.palette.buttonText,
  },
  _overrides: {
    hovered: {
      root: {
        color: t.palette.buttonTextHovered,
-        backgroundColor: t.palette.buttonBackgroundHovered
-      }
-    }
-  }
+        backgroundColor: t.palette.buttonBackgroundHovered,
+      },
+    },
+  },
 });

 const customSettings2: ICustomSettingsBlock = [fragment2, 'val2', themeFn2];
--- a/packages/framework/theming-ramp/src/index.ts
+++ b/packages/framework/theming-ramp/src/index.ts
@ -1,7 +1,6 @@
 export * from './SettingsWorker';
 export * from './Theme';
 export {
-  ColorValue,
  OfficePalette,
  Palette as IPalette,
  PartialPalette as IPartialPalette,
--- a/packages/theming/android-theme/package.json
+++ b/packages/theming/android-theme/package.json
@ -33,9 +33,11 @@
  "license": "MIT",
  "dependencies": {
    "@fluentui-react-native/theme-types": ">=0.5.0 <1.0.0",
-    "@fluentui-react-native/theme": ">=0.5.1 <1.0.0"
+    "@fluentui-react-native/theme": ">=0.5.1 <1.0.0",
+    "react-native": "^0.63.4"
  },
  "devDependencies": {
+    "@types/react-native": "^0.63.0",
    "@uifabricshared/build-native": "^0.1.1",
    "@uifabricshared/eslint-config-rules": "^0.1.1"
  },
--- a/packages/theming/android-theme/src/colorsBase.ts
+++ b/packages/theming/android-theme/src/colorsBase.ts
@ -1,4 +1,4 @@
-import { ColorValue } from '@fluentui-react-native/theme-types';
+import { ColorValue } from 'react-native';

 export interface BaseColors {
  white: ColorValue;
--- a/packages/theming/android-theme/src/colorsSemantic.ts
+++ b/packages/theming/android-theme/src/colorsSemantic.ts
@ -1,4 +1,4 @@
-import { ColorValue } from '@fluentui-react-native/theme-types';
+import { ColorValue } from 'react-native';
 import { AndroidBaseColorsPalette } from './colorsBase';
 export interface SemanticPalette {
  // Texts
--- a/packages/theming/apple-theme/package.json
+++ b/packages/theming/apple-theme/package.json
@ -30,10 +30,12 @@
  "dependencies": {
    "@fluentui-react-native/default-theme": ">=0.5.1 <1.0.0",
    "@fluentui-react-native/theme-types": ">=0.6.0 <1.0.0",
-    "@fluentui-react-native/theme": ">=0.5.1 <1.0.0"
+    "@fluentui-react-native/theme": ">=0.5.1 <1.0.0",
+    "react-native": "^0.63.4"
  },
  "devDependencies": {
    "@types/react": "^16.13.1",
+    "@types/react-native": "^0.63.0",
    "@uifabricshared/build-native": "^0.1.1",
    "@uifabricshared/eslint-config-rules": "^0.1.1"
  },
--- a/packages/theming/apple-theme/src/appleColors.types.ios.ts
+++ b/packages/theming/apple-theme/src/appleColors.types.ios.ts
@ -1,4 +1,4 @@
-import { ColorValue } from '@fluentui-react-native/theme-types';
+import { ColorValue } from 'react-native';

 /** Palette of colors defined in FluentUI Apple */
 interface FluentUIApplePalette {
--- a/packages/theming/apple-theme/src/appleColors.types.macos.ts
+++ b/packages/theming/apple-theme/src/appleColors.types.macos.ts
@ -1,4 +1,4 @@
-import { ColorValue } from '@fluentui-react-native/theme-types';
+import { ColorValue } from 'react-native';
 import { PlatformColor } from 'react-native-macos';

 /** Palette of Apple Platform Colors, defined at https://developer.apple.com/documentation/appkit/nscolor/ui_element_colors */
--- a/packages/theming/default-theme/package.json
+++ b/packages/theming/default-theme/package.json
@ -34,7 +34,8 @@
  "dependencies": {
    "@fluentui-react-native/theme-tokens": "^0.1.0",
    "@fluentui-react-native/theme-types": ">=0.6.0 <1.0.0",
-    "@fluentui-react-native/theme": ">=0.5.1 <1.0.0"
+    "@fluentui-react-native/theme": ">=0.5.1 <1.0.0",
+    "@fluentui-react-native/theming-utils": ">=0.1.0 <1.0.0"
  },
  "devDependencies": {
    "@types/react": "^16.9.34",
--- a/packages/theming/default-theme/src/createDefaultTheme.ts
+++ b/packages/theming/default-theme/src/createDefaultTheme.ts
@ -1,34 +1,8 @@
 import { ThemeReference } from '@fluentui-react-native/theme';
 import { defaultFluentDarkTheme, defaultFluentTheme } from './defaultTheme';
 import { Appearance } from 'react-native';
-import { Theme } from '@fluentui-react-native/theme-types';
-
-export type AppearanceOptions = 'light' | 'dark';
-
-export interface ThemeOptions {
-  /**
-   * Should the baseline colors be light, dark, or use the values from the Appearance API from react-native.
-   */
-  appearance?: AppearanceOptions | 'dynamic';
-
-  /**
-   * Default appearance should the library to request this from native not be available
-   */
-  defaultAppearance?: AppearanceOptions;
-
-  /**
-   * If in a host that supports multiple areas within the app that use different palettes, this specifies the palette name to
-   * load.
-   *
-   * In Office this corresponds to regions like taskpanes, the ribbon, left navigation, and so on, but that concept could be extended
-   * to any host that wants to support this.
-   */
-  paletteName?: string;
-}
-
-function getCurrentAppearance(appearance: ThemeOptions['appearance'], fallback: AppearanceOptions): AppearanceOptions {
-  return appearance === 'dynamic' ? (Appearance && Appearance.getColorScheme()) || fallback : appearance;
-}
+import { Theme, ThemeOptions } from '@fluentui-react-native/theme-types';
+import { getCurrentAppearance } from '@fluentui-react-native/theming-utils';

 export function createDefaultTheme(options: ThemeOptions = {}): ThemeReference {
  const themeRef = new ThemeReference({} as Theme, () => {
--- a/packages/theming/theme-types/package.json
+++ b/packages/theming/theme-types/package.json
@ -31,11 +31,13 @@
  "keywords": [],
  "author": "",
  "license": "MIT",
-  "dependencies": {},
+  "dependencies": {
+    "react-native": "^0.63.4"
+  },
  "devDependencies": {
    "@types/react": "^16.9.34",
+    "@types/react-native": "^0.63.0",
    "react": "16.13.1",
-    "react-native": "^0.63.4",
    "@uifabricshared/build-native": "^0.1.1",
    "@uifabricshared/eslint-config-rules": "^0.1.1"
  },
--- a/packages/theming/theme-types/src/Color.types.ts
+++ b/packages/theming/theme-types/src/Color.types.ts
@ -11,7 +11,8 @@
 *
 * `{semantic: "windowBackgroundColor"}`
 */
-export type ColorValue = string;
+
+import { ColorValue } from 'react-native';

 export type ThemeColorDefinition = Palette & {
  background: ColorValue;
--- a/packages/theming/theme-types/src/Theme.types.ts
+++ b/packages/theming/theme-types/src/Theme.types.ts
@ -1,6 +1,7 @@
-import { ColorValue, ThemeColorDefinition } from './Color.types';
+import { ThemeColorDefinition } from './Color.types';
 import { OfficePalette } from './palette.types';
 import { Typography, PartialTypography } from './Typography.types';
+import { ColorValue } from 'react-native';

 type TwoLevelPartial<T> = {
  [K in keyof T]?: Partial<T[K]>;
@ -42,3 +43,26 @@ export type PartialTheme = Omit<TwoLevelPartial<Theme>, 'typography' | 'host'> &
  typography?: PartialTypography;
  host?: TwoLevelPartial<Theme['host']>;
 };
+
+export type AppearanceOptions = 'light' | 'dark';
+
+export interface ThemeOptions {
+  /**
+   * Should the baseline colors be light, dark, or use the values from the Appearance API from react-native.
+   */
+  appearance?: AppearanceOptions | 'dynamic';
+
+  /**
+   * Default appearance should the library to request this from native not be available
+   */
+  defaultAppearance?: AppearanceOptions;
+
+  /**
+   * If in a host that supports multiple areas within the app that use different palettes, this specifies the palette name to
+   * load.
+   *
+   * In Office this corresponds to regions like taskpanes, the ribbon, left navigation, and so on, but that concept could be extended
+   * to any host that wants to support this.
+   */
+  paletteName?: string;
+}
--- a/packages/theming/theme-types/src/palette.types.ts
+++ b/packages/theming/theme-types/src/palette.types.ts
@ -1,4 +1,4 @@
-import { ColorValue } from './Color.types';
+import { ColorValue } from 'react-native';

 export interface OfficePalette {
  /**
--- a/packages/theming/theming-utils/.eslintrc.js
+++ b/packages/theming/theming-utils/.eslintrc.js
@ -0,0 +1,8 @@
+module.exports = {
+  extends: [
+    "@uifabricshared/eslint-config-rules"
+  ],
+  rules: {
+    '@typescript-eslint/no-var-requires': 0,
+  }
+}
--- a/packages/theming/theming-utils/api-extractor.json
+++ b/packages/theming/theming-utils/api-extractor.json
@ -0,0 +1,3 @@
+{
+  "extends": "@uifabricshared/build-native/api-extractor.json"
+}
--- a/packages/theming/theming-utils/babel.config.js
+++ b/packages/theming/theming-utils/babel.config.js
@ -0,0 +1 @@
+module.exports = require('@uifabricshared/build-native/babel.config');
--- a/packages/theming/theming-utils/just.config.js
+++ b/packages/theming/theming-utils/just.config.js
@ -0,0 +1,3 @@
+const { preset } = require('@uifabricshared/build-native');
+
+preset();
--- a/packages/theming/theming-utils/package.json
+++ b/packages/theming/theming-utils/package.json
@ -0,0 +1,42 @@
+{
+  "name": "@fluentui-react-native/theming-utils",
+  "version": "0.1.0",
+  "description": "Utils for dealing with theming",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/microsoft/fluentui-react-native"
+  },
+  "main": "src/index.ts",
+  "module": "lib/index.js",
+  "typings": "lib/index.d.ts",
+  "onPublish": {
+    "main": "lib-commonjs/index.js",
+    "module": "lib/index.js"
+  },
+  "scripts": {
+    "build": "fluentui-scripts build",
+    "just": "fluentui-scripts",
+    "clean": "fluentui-scripts clean",
+    "depcheck": "fluentui-scripts depcheck",
+    "lint": "fluentui-scripts eslint",
+    "test": "fluentui-scripts jest",
+    "update-snapshots": "fluentui-scripts jest -u",
+    "verify-api": "fluentui-scripts verify-api-extractor",
+    "update-api": "fluentui-scripts update-api-extractor"
+  },
+  "dependencies": {
+    "@fluentui-react-native/theme-types": ">=0.6.0 <1.0.0",
+    "react-native": "^0.63.4"
+  },
+  "devDependencies": {
+    "@types/react-native": "^0.63.0",
+    "@uifabricshared/build-native": "^0.1.1",
+    "@uifabricshared/eslint-config-rules": "^0.1.1"
+  },
+  "peerDependencies": {
+    "react": ">=16.13.1",
+    "react-native": ">=0.63.4"
+  },
+  "author": "",
+  "license": "MIT"
+}
--- a/packages/theming/theming-utils/src/getCurrentAppearance.ts
+++ b/packages/theming/theming-utils/src/getCurrentAppearance.ts
@ -0,0 +1,6 @@
+import { Appearance } from 'react-native';
+import { AppearanceOptions, ThemeOptions } from '@fluentui-react-native/theme-types';
+
+export function getCurrentAppearance(appearance: ThemeOptions['appearance'], fallback: AppearanceOptions): AppearanceOptions {
+  return appearance === 'dynamic' ? (Appearance && Appearance.getColorScheme()) || fallback : appearance;
+}
--- a/packages/theming/theming-utils/src/index.ts
+++ b/packages/theming/theming-utils/src/index.ts
@ -0,0 +1 @@
+export * from './getCurrentAppearance';
--- a/packages/theming/theming-utils/tsconfig.json
+++ b/packages/theming/theming-utils/tsconfig.json
@ -0,0 +1,7 @@
+{
+  "extends": "@uifabricshared/build-native/tsconfig.json",
+  "compilerOptions": {
+    "outDir": "lib"
+  },
+  "include": ["src"]
+}
--- a/packages/theming/win32-theme/package.json
+++ b/packages/theming/win32-theme/package.json
@ -34,14 +34,15 @@
  "dependencies": {
    "@fluentui-react-native/default-theme": ">=0.5.1 <1.0.0",
    "@fluentui-react-native/theme-types": ">=0.6.0 <1.0.0",
-    "@fluentui-react-native/theme": ">=0.5.1 <1.0.0"
+    "@fluentui-react-native/theme": ">=0.5.1 <1.0.0",
+    "react-native": "^0.63.4"
  },
  "devDependencies": {
    "@types/react": "^16.9.34",
+    "@types/react-native": "^0.63.0",
    "react": "16.13.1",
    "@uifabricshared/build-native": "^0.1.1",
-    "@uifabricshared/eslint-config-rules": "^0.1.1",
-    "react-native": "^0.63.4"
+    "@uifabricshared/eslint-config-rules": "^0.1.1"
  },
  "peerDependencies": {
    "react": ">=16.13.1",
--- a/packages/theming/win32-theme/src/NativeModule/officeThemingModule.ts
+++ b/packages/theming/win32-theme/src/NativeModule/officeThemingModule.ts
@ -1,5 +1,5 @@
-import type { NativeModule } from 'react-native';
-import { ColorValue, OfficePalette, Typography } from '@fluentui-react-native/theme-types';
+import type { NativeModule, ColorValue } from 'react-native';
+import { OfficePalette, Typography } from '@fluentui-react-native/theme-types';

 export type PlatformDefaultsChangedArgs = { hostThemeSetting: string };
 export type PlatformDefaultsChangedCallback = (args?: PlatformDefaultsChangedArgs) => void;
--- a/packages/theming/win32-theme/src/createOfficeTheme.ts
+++ b/packages/theming/win32-theme/src/createOfficeTheme.ts
@ -1,8 +1,8 @@
 import { ThemeReference } from '@fluentui-react-native/theme';
-import { createDefaultTheme, ThemeOptions } from '@fluentui-react-native/default-theme';
+import { createDefaultTheme } from '@fluentui-react-native/default-theme';
 import { getThemingModule } from './NativeModule/getThemingModule';
 import { CxxException, PlatformDefaultsChangedArgs } from './NativeModule/officeThemingModule';
-import { OfficePalette } from '@fluentui-react-native/theme-types';
+import { OfficePalette, ThemeOptions } from '@fluentui-react-native/theme-types';
 import { createPartialOfficeTheme } from './createPartialOfficeTheme';

 function handlePaletteCall(palette: OfficePalette | CxxException): OfficePalette | undefined {
--- a/packages/utils/tokens/package.json
+++ b/packages/utils/tokens/package.json
@ -23,13 +23,16 @@
  "dependencies": {
    "@fluentui-react-native/adapters": ">=0.6.0 <1.0.0",
    "@uifabricshared/foundation-tokens": ">=0.8.0 <1.0.0",
-    "@uifabricshared/theming-ramp": ">=0.13.0 <1.0.0"
+    "@uifabricshared/theming-ramp": ">=0.13.0 <1.0.0",
+    "react-native": "^0.63.4"
  },
  "devDependencies": {
    "@types/react-native": "^0.63.0",
    "@uifabricshared/build-native": "^0.1.1",
-    "@uifabricshared/eslint-config-rules": "^0.1.1",
-    "react-native": "^0.63.4"
+    "@uifabricshared/eslint-config-rules": "^0.1.1"
+  },
+  "peerDependencies": {
+    "react-native": ">=0.63.4"
  },
  "author": "",
  "license": "MIT"
--- a/packages/utils/tokens/src/border-tokens.ts
+++ b/packages/utils/tokens/src/border-tokens.ts
@ -1,11 +1,11 @@
-import { ViewStyle } from 'react-native';
+import { ViewStyle, ColorValue } from 'react-native';
 import { IOperationSet } from '@uifabricshared/foundation-tokens';
 import { ITheme } from '@uifabricshared/theming-ramp';
 import { getPaletteFromTheme } from './color-tokens';
 import { tokenBuilder } from './tokenBuilder';

 export interface IBorderTokens {
-  borderColor?: string;
+  borderColor?: ColorValue;
  borderWidth?: number;
  borderRadius?: number;
  borderStyle?: ViewStyle['borderStyle'];
@ -15,7 +15,7 @@ export const borderTokens: IOperationSet<IBorderTokens, ITheme> = [
  { source: 'borderColor', lookup: getPaletteFromTheme },
  { source: 'borderWidth' },
  { source: 'borderRadius' },
-  { source: 'borderStyle' }
+  { source: 'borderStyle' },
 ];

 export const borderStyles = tokenBuilder<IBorderTokens>('borderColor', 'borderRadius', 'borderStyle', 'borderWidth');
--- a/yarn.lock
+++ b/yarn.lock
@ -13838,7 +13838,7 @@ promise@^8.0.3:
  dependencies:
    asap "~2.0.6"

-prompts@^2.0.1, prompts@^2.3.0:
+prompts@^2.0.1:
  version "2.3.2"
  resolved "https://registry.yarnpkg.com/prompts/-/prompts-2.3.2.tgz#480572d89ecf39566d2bd3fe2c9fccb7c4c0b068"
  integrity sha512-Q06uKs2CkNYVID0VqwfAl9mipo99zkBv/n2JtWY89Yxa3ZabWSrs0e2KTudKVa3peLUvYXMefDqIleLPVUBZMA==
@ -13846,6 +13846,14 @@ prompts@^2.0.1, prompts@^2.3.0:
    kleur "^3.0.3"
    sisteransi "^1.0.4"

+prompts@^2.3.0:
+  version "2.4.1"
+  resolved "https://registry.yarnpkg.com/prompts/-/prompts-2.4.1.tgz#befd3b1195ba052f9fd2fde8a486c4e82ee77f61"
+  integrity sha512-EQyfIuO2hPDsX1L/blblV+H7I0knhgAd82cVneCwcdND9B8AuCDuRcBH6yIcG4dFzlOUqbazQqwGjx5xmsNLuQ==
+  dependencies:
+    kleur "^3.0.3"
+    sisteransi "^1.0.5"
+
 prompts@~2.1.0:
  version "2.1.0"
  resolved "https://registry.yarnpkg.com/prompts/-/prompts-2.1.0.tgz#bf90bc71f6065d255ea2bdc0fe6520485c1b45db"
@ -15288,7 +15296,7 @@ simple-swizzle@^0.2.2:
  dependencies:
    is-arrayish "^0.3.1"

-sisteransi@^1.0.0, sisteransi@^1.0.4:
+sisteransi@^1.0.0, sisteransi@^1.0.4, sisteransi@^1.0.5:
  version "1.0.5"
  resolved "https://registry.yarnpkg.com/sisteransi/-/sisteransi-1.0.5.tgz#134d681297756437cc05ca01370d3a7a571075ed"
  integrity sha512-bLGGlR1QxBcynn2d5YmDX4MGjlZvy2MRBDRNHLJ8VI6l6+9FUiyTFNJ0IveOSP0bcXgVDPRcfGqA0pjaqUpfVg==
				`@ -0,0 +1 @@`
				`module.exports = require('@uifabricshared/build-native/babel.config');`