Add an Apple Theme (#584)

* Initial Commit * Rename some files * Initial Apple Palette * Copied the FluentUI Apple Colors * A working blue theme * wip typography.... * Add fallback apple semantic colors * Map a lot of colors * Use the ThemeReference theme property * Rearrange colors. Set a lot more of them * All the colors are mapped * Forgot to replace some blue10's * Update Typography * Dynamic and Platform Colors.. * Split out some stuff by platform, add iOS semantic palette, remove fallback palettes * Add all iOS colors * Apparently New York doesn't exist on macOS by default * update * Split by platform even more * Update README * Remove todos and some redundant fallback * Add back some missing files * update ios typography * Just the macOS theme for now * Change some colors, fix TODO * Add platform specific files * Change files * Address PR comments, change menu backgrounds to be transparent * Use github issue, put in readme * Override the default text variant to bodyStandard * Change some more color mappings * platform specific file names * Update some comments
2021-02-05 01:47:57 -06:00 · 2021-02-05 01:47:57 -06:00 · bea2f01718
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@ -64,11 +64,16 @@
  },
  "cSpell.words": [
    "Larrson",
+    "Semibold",
+    "Subheadline",
    "TESTPAGE",
    "beachball",
    "consts",
    "fluentui",
    "macos",
-    "nuget"
+    "monospace",
+    "nuget",
+    "uifabricshared",
+    "unemphasized"
  ]
 }
--- a/apps/fluent-tester/package.json
+++ b/apps/fluent-tester/package.json
@ -24,6 +24,7 @@
    "bundle": "fluentui-scripts bundle"
  },
  "dependencies": {
+    "@fluentui-react-native/apple-theme": ">=0.1.0 <1.0.0",
    "@fluentui-react-native/default-theme": ">=0.4.1 <1.0.0",
    "@fluentui-react-native/experimental-avatar": ">=0.4.0 <1.0.0",
    "@fluentui-react-native/experimental-button": "0.4.0",
--- a/apps/fluent-tester/src/FluentTester/testPages.macos.ts
+++ b/apps/fluent-tester/src/FluentTester/testPages.macos.ts
@ -4,6 +4,7 @@ import { ButtonTest, HOMEPAGE_BUTTON_BUTTON } from './TestComponents/Button';
 import { CalloutTest, HOMEPAGE_CALLOUT_BUTTON } from './TestComponents/Callout';
 import { CheckboxTest, HOMEPAGE_CHECKBOX_BUTTON } from './TestComponents/Checkbox';
 import { ContextualMenuTest, HOMEPAGE_CONTEXTUALMENU_BUTTON } from './TestComponents/ContextualMenu';
+import { ExperimentalButtonTest, HOMEPAGE_BUTTON_BUTTONEXPERIMENTAL } from './TestComponents/ButtonExperimental';
 import { FocusTrapTest, HOMEPAGE_FOCUSTRAPZONE_BUTTON } from './TestComponents/FocusTrapZone';
 import { HOMEPAGE_LINK_BUTTON, LinkTest } from './TestComponents/Link';
 import { NativeButtonTest, HOMEPAGE_NATIVEBUTTON_BUTTON } from './TestComponents/NativeButton';
@ -37,6 +38,11 @@ export const tests: TestDescription[] = [
    component: ContextualMenuTest,
    testPage: HOMEPAGE_CONTEXTUALMENU_BUTTON,
  },
+  {
+    name: 'Experimental Button',
+    component: ExperimentalButtonTest,
+    testPage: HOMEPAGE_BUTTON_BUTTONEXPERIMENTAL,
+  },
  {
    name: 'Focus Trap Zone Test',
    component: FocusTrapTest,
--- a/apps/fluent-tester/src/FluentTester/theme/CustomThemes.ts
+++ b/apps/fluent-tester/src/FluentTester/theme/CustomThemes.ts
@ -13,7 +13,7 @@ export const lightnessOptions = [
 ];

 export class TesterThemeReference extends ThemeReference {
-  private _themeName: ThemeNames = 'Fluent';
+  private _themeName: ThemeNames = 'Default';
  private _brand: OfficeBrand = 'Default';

  private options: ThemeOptions;
--- a/apps/fluent-tester/src/FluentTester/theme/applyTheme.ts
+++ b/apps/fluent-tester/src/FluentTester/theme/applyTheme.ts
@ -1,10 +1,12 @@
 import { OfficePalette, PartialTheme, Theme } from '@fluentui-react-native/framework';
 import { createPartialOfficeTheme, getThemingModule } from '@fluentui-react-native/win32-theme';
+import { createAppleTheme } from '@fluentui-react-native/apple-theme';

-export type ThemeNames = 'Fluent' | 'Office' | 'Caterpillar';
+export type ThemeNames = 'Default' | 'Office' | 'Caterpillar' | 'Apple';

 export const themeChoices = [
-  { label: 'Fluent', value: 'Fluent' },
+  { label: 'Default', value: 'Default' },
+  { label: 'Apple', value: 'Apple' },
  { label: 'Office', value: 'Office' },
  { label: 'Caterpillar', value: 'Caterpillar' },
 ];
@ -57,6 +59,8 @@ const officeBase = themingModule
 /** apply the currently active theme layering */
 export function applyTheme(parent: Theme, name: ThemeNames): PartialTheme {
  switch (name) {
+    case 'Apple':
+      return createAppleTheme().theme;
    case 'Office':
      return officeBase;
    case 'Caterpillar':
--- a/apps/ios/src/Podfile.lock
+++ b/apps/ios/src/Podfile.lock
@ -20,12 +20,12 @@ PODS:
  - FluentUI-React-Native-Shimmer (0.3.4):
    - MicrosoftFluentUI (~> 0.1.16)
    - React
-  - Folly (2018.10.22.00):
+  - Folly (2020.01.13.00):
    - boost-for-react-native
    - DoubleConversion
-    - Folly/Default (= 2018.10.22.00)
+    - Folly/Default (= 2020.01.13.00)
    - glog
-  - Folly/Default (2018.10.22.00):
+  - Folly/Default (2020.01.13.00):
    - boost-for-react-native
    - DoubleConversion
    - glog
@ -79,218 +79,227 @@ PODS:
    - MicrosoftFluentUI/Controls_ios
  - MicrosoftFluentUI/Utilities_ios (0.1.25)
  - QRCodeReader.swift (10.1.0)
-  - RCTRequired (0.62.2)
-  - RCTTypeSafety (0.62.2):
-    - FBLazyVector (= 0.62.2)
-    - Folly (= 2018.10.22.00)
-    - RCTRequired (= 0.62.2)
-    - React-Core (= 0.62.2)
-  - React (0.62.2):
-    - React-Core (= 0.62.2)
-    - React-Core/DevSupport (= 0.62.2)
-    - React-Core/RCTWebSocket (= 0.62.2)
-    - React-RCTActionSheet (= 0.62.2)
-    - React-RCTAnimation (= 0.62.2)
-    - React-RCTBlob (= 0.62.2)
-    - React-RCTImage (= 0.62.2)
-    - React-RCTLinking (= 0.62.2)
-    - React-RCTNetwork (= 0.62.2)
-    - React-RCTSettings (= 0.62.2)
-    - React-RCTText (= 0.62.2)
-    - React-RCTVibration (= 0.62.2)
-  - React-Core (0.62.2):
-    - Folly (= 2018.10.22.00)
+  - RCTRequired (0.63.4)
+  - RCTTypeSafety (0.63.4):
+    - FBLazyVector (= 0.63.4)
+    - Folly (= 2020.01.13.00)
+    - RCTRequired (= 0.63.4)
+    - React-Core (= 0.63.4)
+  - React (0.63.4):
+    - React-Core (= 0.63.4)
+    - React-Core/DevSupport (= 0.63.4)
+    - React-Core/RCTWebSocket (= 0.63.4)
+    - React-RCTActionSheet (= 0.63.4)
+    - React-RCTAnimation (= 0.63.4)
+    - React-RCTBlob (= 0.63.4)
+    - React-RCTImage (= 0.63.4)
+    - React-RCTLinking (= 0.63.4)
+    - React-RCTNetwork (= 0.63.4)
+    - React-RCTSettings (= 0.63.4)
+    - React-RCTText (= 0.63.4)
+    - React-RCTVibration (= 0.63.4)
+  - React-callinvoker (0.63.4)
+  - React-Core (0.63.4):
+    - Folly (= 2020.01.13.00)
    - glog
-    - React-Core/Default (= 0.62.2)
-    - React-cxxreact (= 0.62.2)
-    - React-jsi (= 0.62.2)
-    - React-jsiexecutor (= 0.62.2)
+    - React-Core/Default (= 0.63.4)
+    - React-cxxreact (= 0.63.4)
+    - React-jsi (= 0.63.4)
+    - React-jsiexecutor (= 0.63.4)
    - Yoga
-  - React-Core/CoreModulesHeaders (0.62.2):
-    - Folly (= 2018.10.22.00)
+  - React-Core/CoreModulesHeaders (0.63.4):
+    - Folly (= 2020.01.13.00)
    - glog
    - React-Core/Default
-    - React-cxxreact (= 0.62.2)
-    - React-jsi (= 0.62.2)
-    - React-jsiexecutor (= 0.62.2)
+    - React-cxxreact (= 0.63.4)
+    - React-jsi (= 0.63.4)
+    - React-jsiexecutor (= 0.63.4)
    - Yoga
-  - React-Core/Default (0.62.2):
-    - Folly (= 2018.10.22.00)
+  - React-Core/Default (0.63.4):
+    - Folly (= 2020.01.13.00)
    - glog
-    - React-cxxreact (= 0.62.2)
-    - React-jsi (= 0.62.2)
-    - React-jsiexecutor (= 0.62.2)
+    - React-cxxreact (= 0.63.4)
+    - React-jsi (= 0.63.4)
+    - React-jsiexecutor (= 0.63.4)
    - Yoga
-  - React-Core/DevSupport (0.62.2):
-    - Folly (= 2018.10.22.00)
+  - React-Core/DevSupport (0.63.4):
+    - Folly (= 2020.01.13.00)
    - glog
-    - React-Core/Default (= 0.62.2)
-    - React-Core/RCTWebSocket (= 0.62.2)
-    - React-cxxreact (= 0.62.2)
-    - React-jsi (= 0.62.2)
-    - React-jsiexecutor (= 0.62.2)
-    - React-jsinspector (= 0.62.2)
+    - React-Core/Default (= 0.63.4)
+    - React-Core/RCTWebSocket (= 0.63.4)
+    - React-cxxreact (= 0.63.4)
+    - React-jsi (= 0.63.4)
+    - React-jsiexecutor (= 0.63.4)
+    - React-jsinspector (= 0.63.4)
    - Yoga
-  - React-Core/RCTActionSheetHeaders (0.62.2):
-    - Folly (= 2018.10.22.00)
+  - React-Core/RCTActionSheetHeaders (0.63.4):
+    - Folly (= 2020.01.13.00)
    - glog
    - React-Core/Default
-    - React-cxxreact (= 0.62.2)
-    - React-jsi (= 0.62.2)
-    - React-jsiexecutor (= 0.62.2)
+    - React-cxxreact (= 0.63.4)
+    - React-jsi (= 0.63.4)
+    - React-jsiexecutor (= 0.63.4)
    - Yoga
-  - React-Core/RCTAnimationHeaders (0.62.2):
-    - Folly (= 2018.10.22.00)
+  - React-Core/RCTAnimationHeaders (0.63.4):
+    - Folly (= 2020.01.13.00)
    - glog
    - React-Core/Default
-    - React-cxxreact (= 0.62.2)
-    - React-jsi (= 0.62.2)
-    - React-jsiexecutor (= 0.62.2)
+    - React-cxxreact (= 0.63.4)
+    - React-jsi (= 0.63.4)
+    - React-jsiexecutor (= 0.63.4)
    - Yoga
-  - React-Core/RCTBlobHeaders (0.62.2):
-    - Folly (= 2018.10.22.00)
+  - React-Core/RCTBlobHeaders (0.63.4):
+    - Folly (= 2020.01.13.00)
    - glog
    - React-Core/Default
-    - React-cxxreact (= 0.62.2)
-    - React-jsi (= 0.62.2)
-    - React-jsiexecutor (= 0.62.2)
+    - React-cxxreact (= 0.63.4)
+    - React-jsi (= 0.63.4)
+    - React-jsiexecutor (= 0.63.4)
    - Yoga
-  - React-Core/RCTImageHeaders (0.62.2):
-    - Folly (= 2018.10.22.00)
+  - React-Core/RCTImageHeaders (0.63.4):
+    - Folly (= 2020.01.13.00)
    - glog
    - React-Core/Default
-    - React-cxxreact (= 0.62.2)
-    - React-jsi (= 0.62.2)
-    - React-jsiexecutor (= 0.62.2)
+    - React-cxxreact (= 0.63.4)
+    - React-jsi (= 0.63.4)
+    - React-jsiexecutor (= 0.63.4)
    - Yoga
-  - React-Core/RCTLinkingHeaders (0.62.2):
-    - Folly (= 2018.10.22.00)
+  - React-Core/RCTLinkingHeaders (0.63.4):
+    - Folly (= 2020.01.13.00)
    - glog
    - React-Core/Default
-    - React-cxxreact (= 0.62.2)
-    - React-jsi (= 0.62.2)
-    - React-jsiexecutor (= 0.62.2)
+    - React-cxxreact (= 0.63.4)
+    - React-jsi (= 0.63.4)
+    - React-jsiexecutor (= 0.63.4)
    - Yoga
-  - React-Core/RCTNetworkHeaders (0.62.2):
-    - Folly (= 2018.10.22.00)
+  - React-Core/RCTNetworkHeaders (0.63.4):
+    - Folly (= 2020.01.13.00)
    - glog
    - React-Core/Default
-    - React-cxxreact (= 0.62.2)
-    - React-jsi (= 0.62.2)
-    - React-jsiexecutor (= 0.62.2)
+    - React-cxxreact (= 0.63.4)
+    - React-jsi (= 0.63.4)
+    - React-jsiexecutor (= 0.63.4)
    - Yoga
-  - React-Core/RCTSettingsHeaders (0.62.2):
-    - Folly (= 2018.10.22.00)
+  - React-Core/RCTSettingsHeaders (0.63.4):
+    - Folly (= 2020.01.13.00)
    - glog
    - React-Core/Default
-    - React-cxxreact (= 0.62.2)
-    - React-jsi (= 0.62.2)
-    - React-jsiexecutor (= 0.62.2)
+    - React-cxxreact (= 0.63.4)
+    - React-jsi (= 0.63.4)
+    - React-jsiexecutor (= 0.63.4)
    - Yoga
-  - React-Core/RCTTextHeaders (0.62.2):
-    - Folly (= 2018.10.22.00)
+  - React-Core/RCTTextHeaders (0.63.4):
+    - Folly (= 2020.01.13.00)
    - glog
    - React-Core/Default
-    - React-cxxreact (= 0.62.2)
-    - React-jsi (= 0.62.2)
-    - React-jsiexecutor (= 0.62.2)
+    - React-cxxreact (= 0.63.4)
+    - React-jsi (= 0.63.4)
+    - React-jsiexecutor (= 0.63.4)
    - Yoga
-  - React-Core/RCTVibrationHeaders (0.62.2):
-    - Folly (= 2018.10.22.00)
+  - React-Core/RCTVibrationHeaders (0.63.4):
+    - Folly (= 2020.01.13.00)
    - glog
    - React-Core/Default
-    - React-cxxreact (= 0.62.2)
-    - React-jsi (= 0.62.2)
-    - React-jsiexecutor (= 0.62.2)
+    - React-cxxreact (= 0.63.4)
+    - React-jsi (= 0.63.4)
+    - React-jsiexecutor (= 0.63.4)
    - Yoga
-  - React-Core/RCTWebSocket (0.62.2):
-    - Folly (= 2018.10.22.00)
+  - React-Core/RCTWebSocket (0.63.4):
+    - Folly (= 2020.01.13.00)
    - glog
-    - React-Core/Default (= 0.62.2)
-    - React-cxxreact (= 0.62.2)
-    - React-jsi (= 0.62.2)
-    - React-jsiexecutor (= 0.62.2)
+    - React-Core/Default (= 0.63.4)
+    - React-cxxreact (= 0.63.4)
+    - React-jsi (= 0.63.4)
+    - React-jsiexecutor (= 0.63.4)
    - Yoga
-  - React-CoreModules (0.62.2):
-    - FBReactNativeSpec (= 0.62.2)
-    - Folly (= 2018.10.22.00)
-    - RCTTypeSafety (= 0.62.2)
-    - React-Core/CoreModulesHeaders (= 0.62.2)
-    - React-RCTImage (= 0.62.2)
-    - ReactCommon/turbomodule/core (= 0.62.2)
-  - React-cxxreact (0.62.2):
+  - React-CoreModules (0.63.4):
+    - FBReactNativeSpec (= 0.63.4)
+    - Folly (= 2020.01.13.00)
+    - RCTTypeSafety (= 0.63.4)
+    - React-Core/CoreModulesHeaders (= 0.63.4)
+    - React-jsi (= 0.63.4)
+    - React-RCTImage (= 0.63.4)
+    - ReactCommon/turbomodule/core (= 0.63.4)
+  - React-cxxreact (0.63.4):
    - boost-for-react-native (= 1.63.0)
    - DoubleConversion
-    - Folly (= 2018.10.22.00)
+    - Folly (= 2020.01.13.00)
    - glog
-    - React-jsinspector (= 0.62.2)
-  - React-jsi (0.62.2):
+    - React-callinvoker (= 0.63.4)
+    - React-jsinspector (= 0.63.4)
+  - React-jsi (0.63.4):
    - boost-for-react-native (= 1.63.0)
    - DoubleConversion
-    - Folly (= 2018.10.22.00)
+    - Folly (= 2020.01.13.00)
    - glog
-    - React-jsi/Default (= 0.62.2)
-  - React-jsi/Default (0.62.2):
+    - React-jsi/Default (= 0.63.4)
+  - React-jsi/Default (0.63.4):
    - boost-for-react-native (= 1.63.0)
    - DoubleConversion
-    - Folly (= 2018.10.22.00)
+    - Folly (= 2020.01.13.00)
    - glog
-  - React-jsiexecutor (0.62.2):
+  - React-jsiexecutor (0.63.4):
    - DoubleConversion
-    - Folly (= 2018.10.22.00)
+    - Folly (= 2020.01.13.00)
    - glog
-    - React-cxxreact (= 0.62.2)
-    - React-jsi (= 0.62.2)
-  - React-jsinspector (0.62.2)
-  - React-RCTActionSheet (0.62.2):
-    - React-Core/RCTActionSheetHeaders (= 0.62.2)
-  - React-RCTAnimation (0.62.2):
-    - FBReactNativeSpec (= 0.62.2)
-    - Folly (= 2018.10.22.00)
-    - RCTTypeSafety (= 0.62.2)
-    - React-Core/RCTAnimationHeaders (= 0.62.2)
-    - ReactCommon/turbomodule/core (= 0.62.2)
-  - React-RCTBlob (0.62.2):
-    - FBReactNativeSpec (= 0.62.2)
-    - Folly (= 2018.10.22.00)
-    - React-Core/RCTBlobHeaders (= 0.62.2)
-    - React-Core/RCTWebSocket (= 0.62.2)
-    - React-jsi (= 0.62.2)
-    - React-RCTNetwork (= 0.62.2)
-    - ReactCommon/turbomodule/core (= 0.62.2)
-  - React-RCTImage (0.62.2):
-    - FBReactNativeSpec (= 0.62.2)
-    - Folly (= 2018.10.22.00)
-    - RCTTypeSafety (= 0.62.2)
-    - React-Core/RCTImageHeaders (= 0.62.2)
-    - React-RCTNetwork (= 0.62.2)
-    - ReactCommon/turbomodule/core (= 0.62.2)
-  - React-RCTLinking (0.62.2):
-    - FBReactNativeSpec (= 0.62.2)
-    - React-Core/RCTLinkingHeaders (= 0.62.2)
-    - ReactCommon/turbomodule/core (= 0.62.2)
-  - React-RCTNetwork (0.62.2):
-    - FBReactNativeSpec (= 0.62.2)
-    - Folly (= 2018.10.22.00)
-    - RCTTypeSafety (= 0.62.2)
-    - React-Core/RCTNetworkHeaders (= 0.62.2)
-    - ReactCommon/turbomodule/core (= 0.62.2)
-  - React-RCTSettings (0.62.2):
-    - FBReactNativeSpec (= 0.62.2)
-    - Folly (= 2018.10.22.00)
-    - RCTTypeSafety (= 0.62.2)
-    - React-Core/RCTSettingsHeaders (= 0.62.2)
-    - ReactCommon/turbomodule/core (= 0.62.2)
-  - React-RCTText (0.62.2):
-    - React-Core/RCTTextHeaders (= 0.62.2)
-  - React-RCTVibration (0.62.2):
-    - FBReactNativeSpec (= 0.62.2)
-    - Folly (= 2018.10.22.00)
-    - React-Core/RCTVibrationHeaders (= 0.62.2)
-    - ReactCommon/turbomodule/core (= 0.62.2)
-  - ReactCommon/callinvoker (0.62.2):
+    - React-cxxreact (= 0.63.4)
+    - React-jsi (= 0.63.4)
+  - React-jsinspector (0.63.4)
+  - React-RCTActionSheet (0.63.4):
+    - React-Core/RCTActionSheetHeaders (= 0.63.4)
+  - React-RCTAnimation (0.63.4):
+    - FBReactNativeSpec (= 0.63.4)
+    - Folly (= 2020.01.13.00)
+    - RCTTypeSafety (= 0.63.4)
+    - React-Core/RCTAnimationHeaders (= 0.63.4)
+    - React-jsi (= 0.63.4)
+    - ReactCommon/turbomodule/core (= 0.63.4)
+  - React-RCTBlob (0.63.4):
+    - FBReactNativeSpec (= 0.63.4)
+    - Folly (= 2020.01.13.00)
+    - React-Core/RCTBlobHeaders (= 0.63.4)
+    - React-Core/RCTWebSocket (= 0.63.4)
+    - React-jsi (= 0.63.4)
+    - React-RCTNetwork (= 0.63.4)
+    - ReactCommon/turbomodule/core (= 0.63.4)
+  - React-RCTImage (0.63.4):
+    - FBReactNativeSpec (= 0.63.4)
+    - Folly (= 2020.01.13.00)
+    - RCTTypeSafety (= 0.63.4)
+    - React-Core/RCTImageHeaders (= 0.63.4)
+    - React-jsi (= 0.63.4)
+    - React-RCTNetwork (= 0.63.4)
+    - ReactCommon/turbomodule/core (= 0.63.4)
+  - React-RCTLinking (0.63.4):
+    - FBReactNativeSpec (= 0.63.4)
+    - React-Core/RCTLinkingHeaders (= 0.63.4)
+    - React-jsi (= 0.63.4)
+    - ReactCommon/turbomodule/core (= 0.63.4)
+  - React-RCTNetwork (0.63.4):
+    - FBReactNativeSpec (= 0.63.4)
+    - Folly (= 2020.01.13.00)
+    - RCTTypeSafety (= 0.63.4)
+    - React-Core/RCTNetworkHeaders (= 0.63.4)
+    - React-jsi (= 0.63.4)
+    - ReactCommon/turbomodule/core (= 0.63.4)
+  - React-RCTSettings (0.63.4):
+    - FBReactNativeSpec (= 0.63.4)
+    - Folly (= 2020.01.13.00)
+    - RCTTypeSafety (= 0.63.4)
+    - React-Core/RCTSettingsHeaders (= 0.63.4)
+    - React-jsi (= 0.63.4)
+    - ReactCommon/turbomodule/core (= 0.63.4)
+  - React-RCTText (0.63.4):
+    - React-Core/RCTTextHeaders (= 0.63.4)
+  - React-RCTVibration (0.63.4):
+    - FBReactNativeSpec (= 0.63.4)
+    - Folly (= 2020.01.13.00)
+    - React-Core/RCTVibrationHeaders (= 0.63.4)
+    - React-jsi (= 0.63.4)
+    - ReactCommon/turbomodule/core (= 0.63.4)
+  - ReactCommon/turbomodule/core (0.63.4):
    - DoubleConversion
-    - Folly (= 2018.10.22.00)
+    - Folly (= 2020.01.13.00)
    - glog
    - React-cxxreact (= 0.62.2)
  - ReactCommon/turbomodule/core (0.62.2):
@ -307,41 +316,41 @@ PODS:
  - Yoga (1.14.0)

 DEPENDENCIES:
-  - DoubleConversion (from `../../../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec`)
-  - FBLazyVector (from `../../../node_modules/react-native/Libraries/FBLazyVector`)
-  - FBReactNativeSpec (from `../../../node_modules/react-native/Libraries/FBReactNativeSpec`)
+  - DoubleConversion (from `../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec`)
+  - FBLazyVector (from `../node_modules/react-native/Libraries/FBLazyVector`)
+  - FBReactNativeSpec (from `../node_modules/react-native/Libraries/FBReactNativeSpec`)
  - FluentUI-React-Native-Avatar (from `../../../packages/experimental/Avatar/FluentUIReactNativeAvatar.podspec`)
  - FluentUI-React-Native-Button (from `../../../packages/experimental/NativeButton/FluentUIReactNativeButton.podspec`)
  - FluentUI-React-Native-Shimmer (from `../../../packages/components/Shimmer/FluentUIReactNativeShimmer.podspec`)
-  - Folly (from `../../../node_modules/react-native/third-party-podspecs/Folly.podspec`)
-  - glog (from `../../../node_modules/react-native/third-party-podspecs/glog.podspec`)
+  - Folly (from `../node_modules/react-native/third-party-podspecs/Folly.podspec`)
+  - glog (from `../node_modules/react-native/third-party-podspecs/glog.podspec`)
  - QRCodeReader.swift
-  - RCTRequired (from `../../../node_modules/react-native/Libraries/RCTRequired`)
-  - RCTTypeSafety (from `../../../node_modules/react-native/Libraries/TypeSafety`)
-  - React (from `../../../node_modules/react-native/`)
-  - React-Core (from `../../../node_modules/react-native/`)
-  - React-Core/DevSupport (from `../../../node_modules/react-native/`)
-  - React-Core/RCTWebSocket (from `../../../node_modules/react-native/`)
-  - React-CoreModules (from `../../../node_modules/react-native/React/CoreModules`)
-  - React-cxxreact (from `../../../node_modules/react-native/ReactCommon/cxxreact`)
-  - React-jsi (from `../../../node_modules/react-native/ReactCommon/jsi`)
-  - React-jsiexecutor (from `../../../node_modules/react-native/ReactCommon/jsiexecutor`)
-  - React-jsinspector (from `../../../node_modules/react-native/ReactCommon/jsinspector`)
-  - React-RCTActionSheet (from `../../../node_modules/react-native/Libraries/ActionSheetIOS`)
-  - React-RCTAnimation (from `../../../node_modules/react-native/Libraries/NativeAnimation`)
-  - React-RCTBlob (from `../../../node_modules/react-native/Libraries/Blob`)
-  - React-RCTImage (from `../../../node_modules/react-native/Libraries/Image`)
-  - React-RCTLinking (from `../../../node_modules/react-native/Libraries/LinkingIOS`)
-  - React-RCTNetwork (from `../../../node_modules/react-native/Libraries/Network`)
-  - React-RCTSettings (from `../../../node_modules/react-native/Libraries/Settings`)
-  - React-RCTText (from `../../../node_modules/react-native/Libraries/Text`)
-  - React-RCTVibration (from `../../../node_modules/react-native/Libraries/Vibration`)
-  - ReactCommon/callinvoker (from `../../../node_modules/react-native/ReactCommon`)
-  - ReactCommon/turbomodule/core (from `../../../node_modules/react-native/ReactCommon`)
-  - ReactTestApp-DevSupport (from `../../../node_modules/react-native-test-app`)
+  - RCTRequired (from `../node_modules/react-native/Libraries/RCTRequired`)
+  - RCTTypeSafety (from `../node_modules/react-native/Libraries/TypeSafety`)
+  - React (from `../node_modules/react-native/`)
+  - React-callinvoker (from `../node_modules/react-native/ReactCommon/callinvoker`)
+  - React-Core (from `../node_modules/react-native/`)
+  - React-Core/DevSupport (from `../node_modules/react-native/`)
+  - React-Core/RCTWebSocket (from `../node_modules/react-native/`)
+  - React-CoreModules (from `../node_modules/react-native/React/CoreModules`)
+  - React-cxxreact (from `../node_modules/react-native/ReactCommon/cxxreact`)
+  - React-jsi (from `../node_modules/react-native/ReactCommon/jsi`)
+  - React-jsiexecutor (from `../node_modules/react-native/ReactCommon/jsiexecutor`)
+  - React-jsinspector (from `../node_modules/react-native/ReactCommon/jsinspector`)
+  - React-RCTActionSheet (from `../node_modules/react-native/Libraries/ActionSheetIOS`)
+  - React-RCTAnimation (from `../node_modules/react-native/Libraries/NativeAnimation`)
+  - React-RCTBlob (from `../node_modules/react-native/Libraries/Blob`)
+  - React-RCTImage (from `../node_modules/react-native/Libraries/Image`)
+  - React-RCTLinking (from `../node_modules/react-native/Libraries/LinkingIOS`)
+  - React-RCTNetwork (from `../node_modules/react-native/Libraries/Network`)
+  - React-RCTSettings (from `../node_modules/react-native/Libraries/Settings`)
+  - React-RCTText (from `../node_modules/react-native/Libraries/Text`)
+  - React-RCTVibration (from `../node_modules/react-native/Libraries/Vibration`)
+  - ReactCommon/turbomodule/core (from `../node_modules/react-native/ReactCommon`)
+  - ReactTestApp-DevSupport (from `../node_modules/react-native-test-app`)
  - ReactTestApp-Resources (from `..`)
  - SwiftLint
-  - Yoga (from `../../../node_modules/react-native/ReactCommon/yoga`)
+  - Yoga (from `../node_modules/react-native/ReactCommon/yoga`)

 SPEC REPOS:
  trunk:
@ -352,11 +361,11 @@ SPEC REPOS:

 EXTERNAL SOURCES:
  DoubleConversion:
-    :podspec: "../../../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec"
+    :podspec: "../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec"
  FBLazyVector:
-    :path: "../../../node_modules/react-native/Libraries/FBLazyVector"
+    :path: "../node_modules/react-native/Libraries/FBLazyVector"
  FBReactNativeSpec:
-    :path: "../../../node_modules/react-native/Libraries/FBReactNativeSpec"
+    :path: "../node_modules/react-native/Libraries/FBReactNativeSpec"
  FluentUI-React-Native-Avatar:
    :path: "../../../packages/experimental/Avatar/FluentUIReactNativeAvatar.podspec"
  FluentUI-React-Native-Button:
@ -364,53 +373,55 @@ EXTERNAL SOURCES:
  FluentUI-React-Native-Shimmer:
    :path: "../../../packages/components/Shimmer/FluentUIReactNativeShimmer.podspec"
  Folly:
-    :podspec: "../../../node_modules/react-native/third-party-podspecs/Folly.podspec"
+    :podspec: "../node_modules/react-native/third-party-podspecs/Folly.podspec"
  glog:
-    :podspec: "../../../node_modules/react-native/third-party-podspecs/glog.podspec"
+    :podspec: "../node_modules/react-native/third-party-podspecs/glog.podspec"
  RCTRequired:
-    :path: "../../../node_modules/react-native/Libraries/RCTRequired"
+    :path: "../node_modules/react-native/Libraries/RCTRequired"
  RCTTypeSafety:
-    :path: "../../../node_modules/react-native/Libraries/TypeSafety"
+    :path: "../node_modules/react-native/Libraries/TypeSafety"
  React:
-    :path: "../../../node_modules/react-native/"
+    :path: "../node_modules/react-native/"
+  React-callinvoker:
+    :path: "../node_modules/react-native/ReactCommon/callinvoker"
  React-Core:
-    :path: "../../../node_modules/react-native/"
+    :path: "../node_modules/react-native/"
  React-CoreModules:
-    :path: "../../../node_modules/react-native/React/CoreModules"
+    :path: "../node_modules/react-native/React/CoreModules"
  React-cxxreact:
-    :path: "../../../node_modules/react-native/ReactCommon/cxxreact"
+    :path: "../node_modules/react-native/ReactCommon/cxxreact"
  React-jsi:
-    :path: "../../../node_modules/react-native/ReactCommon/jsi"
+    :path: "../node_modules/react-native/ReactCommon/jsi"
  React-jsiexecutor:
-    :path: "../../../node_modules/react-native/ReactCommon/jsiexecutor"
+    :path: "../node_modules/react-native/ReactCommon/jsiexecutor"
  React-jsinspector:
-    :path: "../../../node_modules/react-native/ReactCommon/jsinspector"
+    :path: "../node_modules/react-native/ReactCommon/jsinspector"
  React-RCTActionSheet:
-    :path: "../../../node_modules/react-native/Libraries/ActionSheetIOS"
+    :path: "../node_modules/react-native/Libraries/ActionSheetIOS"
  React-RCTAnimation:
-    :path: "../../../node_modules/react-native/Libraries/NativeAnimation"
+    :path: "../node_modules/react-native/Libraries/NativeAnimation"
  React-RCTBlob:
-    :path: "../../../node_modules/react-native/Libraries/Blob"
+    :path: "../node_modules/react-native/Libraries/Blob"
  React-RCTImage:
-    :path: "../../../node_modules/react-native/Libraries/Image"
+    :path: "../node_modules/react-native/Libraries/Image"
  React-RCTLinking:
-    :path: "../../../node_modules/react-native/Libraries/LinkingIOS"
+    :path: "../node_modules/react-native/Libraries/LinkingIOS"
  React-RCTNetwork:
-    :path: "../../../node_modules/react-native/Libraries/Network"
+    :path: "../node_modules/react-native/Libraries/Network"
  React-RCTSettings:
-    :path: "../../../node_modules/react-native/Libraries/Settings"
+    :path: "../node_modules/react-native/Libraries/Settings"
  React-RCTText:
-    :path: "../../../node_modules/react-native/Libraries/Text"
+    :path: "../node_modules/react-native/Libraries/Text"
  React-RCTVibration:
-    :path: "../../../node_modules/react-native/Libraries/Vibration"
+    :path: "../node_modules/react-native/Libraries/Vibration"
  ReactCommon:
-    :path: "../../../node_modules/react-native/ReactCommon"
+    :path: "../node_modules/react-native/ReactCommon"
  ReactTestApp-DevSupport:
-    :path: "../../../node_modules/react-native-test-app"
+    :path: "../node_modules/react-native-test-app"
  ReactTestApp-Resources:
    :path: ".."
  Yoga:
-    :path: "../../../node_modules/react-native/ReactCommon/yoga"
+    :path: "../node_modules/react-native/ReactCommon/yoga"

 SPEC CHECKSUMS:
  boost-for-react-native: 39c7adb57c4e60d6c5479dd8623128eb5b3f0f2c
@ -446,7 +457,7 @@ SPEC CHECKSUMS:
  ReactTestApp-DevSupport: fac724ea8817d3874faf6c70a7cb65e383bbf2db
  ReactTestApp-Resources: 5950ae44720217c6778ff03fb1d906c8fb3ce483
  SwiftLint: 4fa9579c63416865179bc416f0a92d55f009600d
-  Yoga: 3ebccbdd559724312790e7742142d062476b698e
+  Yoga: 4bd86afe9883422a7c4028c00e34790f560923d6

 PODFILE CHECKSUM: 92ad496f45726c3f2dfe3835c607a1b6ca267da8

--- a/apps/macos/src/Podfile.lock
+++ b/apps/macos/src/Podfile.lock
@ -9,11 +9,11 @@ PODS:
    - React-Core (= 0.63.1)
    - React-jsi (= 0.63.1)
    - ReactCommon/turbomodule/core (= 0.63.1)
-  - FluentUI-React-Native-Avatar (0.3.1):
+  - FluentUI-React-Native-Avatar (0.4.0):
    - MicrosoftFluentUI/AvatarView_mac (~> 0.1.16)
    - MicrosoftFluentUI/Controls_ios (~> 0.1.16)
    - React
-  - FluentUI-React-Native-Button (0.1.0):
+  - FluentUI-React-Native-Button (0.2.0):
    - MicrosoftFluentUI/Button_mac (~> 0.1.25)
    - MicrosoftFluentUI/Controls_ios (~> 0.1.25)
    - React
@ -373,8 +373,8 @@ SPEC CHECKSUMS:
  DoubleConversion: 56a44bcfd14ab2ff66f5a146b2e875eb4b69b19b
  FBLazyVector: 87ca368919ae0ec70816fb8a42252ef59dc05c94
  FBReactNativeSpec: 7c0591658d85effad209fc4f45b6c9760f9e5842
-  FluentUI-React-Native-Avatar: e124b19dd5213759670f0edfac7af87df12b48f8
-  FluentUI-React-Native-Button: 30dedea13def00e23cb4c6a9b5d7f1728a257289
+  FluentUI-React-Native-Avatar: 5fc002da29cbaefa24ae5ada44fa73033b0e77bc
+  FluentUI-React-Native-Button: b950f1e02f37a6c764f8cf9ce9e12c5f5f844746
  glog: 1cb7c408c781ae8f35bbababe459b45e3dee4ec1
  MicrosoftFluentUI: 9fc0e7af0b061c6a0d0bd1b674b93657cd6db5e1
  RCT-Folly: 1347093ffe75e152d846f7e45a3ef901b60021aa
@ -405,4 +405,4 @@ SPEC CHECKSUMS:

 PODFILE CHECKSUM: 737120059192afd160feba8d3732b96e2f459bd2

-COCOAPODS: 1.9.3
+COCOAPODS: 1.10.1
--- a/change/@fluentui-react-native-apple-theme-2021-02-03-19-15-50-apple-theme.json
+++ b/change/@fluentui-react-native-apple-theme-2021-02-03-19-15-50-apple-theme.json
@ -0,0 +1,8 @@
+{
+  "type": "patch",
+  "comment": "Created a macOS Apple theme for FluentUI React Native",
+  "packageName": "@fluentui-react-native/apple-theme",
+  "email": "saadnajmi2@gmail.com",
+  "dependentChangeType": "patch",
+  "date": "2021-02-04T01:13:58.652Z"
+}
--- a/change/@fluentui-react-native-default-theme-2021-02-03-19-15-50-apple-theme.json
+++ b/change/@fluentui-react-native-default-theme-2021-02-03-19-15-50-apple-theme.json
@ -0,0 +1,8 @@
+{
+  "type": "patch",
+  "comment": "Fixed a typo",
+  "packageName": "@fluentui-react-native/default-theme",
+  "email": "saadnajmi2@gmail.com",
+  "dependentChangeType": "patch",
+  "date": "2021-02-04T01:15:01.731Z"
+}
--- a/change/@fluentui-react-native-experimental-native-button-2021-02-03-19-15-50-apple-theme.json
+++ b/change/@fluentui-react-native-experimental-native-button-2021-02-03-19-15-50-apple-theme.json
@ -0,0 +1,8 @@
+{
+  "type": "patch",
+  "comment": "Mapped the theme token for accent color",
+  "packageName": "@fluentui-react-native/experimental-native-button",
+  "email": "saadnajmi2@gmail.com",
+  "dependentChangeType": "patch",
+  "date": "2021-02-04T01:13:31.467Z"
+}
--- a/change/@fluentui-react-native-tester-2021-02-03-19-15-50-apple-theme.json
+++ b/change/@fluentui-react-native-tester-2021-02-03-19-15-50-apple-theme.json
@ -0,0 +1,8 @@
+{
+  "type": "minor",
+  "comment": "Added an Apple Theme",
+  "packageName": "@fluentui-react-native/tester",
+  "email": "saadnajmi2@gmail.com",
+  "dependentChangeType": "patch",
+  "date": "2021-02-04T01:13:12.774Z"
+}
--- a/change/@fluentui-react-native-theme-types-2021-02-03-19-15-50-apple-theme.json
+++ b/change/@fluentui-react-native-theme-types-2021-02-03-19-15-50-apple-theme.json
@ -0,0 +1,8 @@
+{
+  "type": "minor",
+  "comment": "Added an auto type for appearance",
+  "packageName": "@fluentui-react-native/theme-types",
+  "email": "saadnajmi2@gmail.com",
+  "dependentChangeType": "patch",
+  "date": "2021-02-04T01:15:34.125Z"
+}
--- a/change/@fluentui-react-native-win32-theme-2021-02-03-19-15-50-apple-theme.json
+++ b/change/@fluentui-react-native-win32-theme-2021-02-03-19-15-50-apple-theme.json
@ -0,0 +1,8 @@
+{
+  "type": "patch",
+  "comment": "fixed a typo",
+  "packageName": "@fluentui-react-native/win32-theme",
+  "email": "saadnajmi2@gmail.com",
+  "dependentChangeType": "patch",
+  "date": "2021-02-04T01:15:50.676Z"
+}
--- a/packages/experimental/NativeButton/src/NativeButton.tsx
+++ b/packages/experimental/NativeButton/src/NativeButton.tsx
@ -12,12 +12,13 @@ export const NativeButton = compose<NativeButtonType>({
  tokens: [{}, nativeButtonName],
  slotProps: {
    root: buildProps(
-      (tokens) => ({
+      (tokens, theme) => ({
        style: {
          height: 35,
          width: 200,
          margin: 10,
        },
+        accentColor: theme.colors.accentButtonBackground,
        ...tokens,
      }),
      [],
--- a/packages/theming/apple-theme/.eslintignore
+++ b/packages/theming/apple-theme/.eslintignore
@ -0,0 +1 @@
+# As this package grows it's likely we'll want to voluntarily ignore some packages
--- a/packages/theming/apple-theme/.eslintrc.js
+++ b/packages/theming/apple-theme/.eslintrc.js
@ -0,0 +1,5 @@
+module.exports = {
+  extends: [
+    "@uifabricshared/eslint-config-rules"
+  ]
+}
--- a/packages/theming/apple-theme/.npmignore
+++ b/packages/theming/apple-theme/.npmignore
@ -0,0 +1,14 @@
+src
+node_modules
+.gitignore
+.gitattributes
+.editorconfig
+config.js
+jest.config.js
+.eslintrc.js
+.eslintignore
+tsconfig.json
+jsconfig.json
+webpack.config.js
+webpack.serve.config.js
+*.build.log
--- a/packages/theming/apple-theme/CHANGELOG.json
+++ b/packages/theming/apple-theme/CHANGELOG.json
@ -0,0 +1 @@
+{}
--- a/packages/theming/apple-theme/CHANGELOG.md
+++ b/packages/theming/apple-theme/CHANGELOG.md
--- a/packages/theming/apple-theme/README.md
+++ b/packages/theming/apple-theme/README.md
@ -0,0 +1,10 @@
+# Apple-theme
+
+Code and definitions for creating an Apple Theme for FluentUI React Native. Currently only implemented for macOS. iOS Apple theme progress is tracked at Github #596
+
+Some heuristics followed in this theme:
+
+- For most tokens, we default to prefer the apple system colors, using the FluentUI Apple Palette where it makes sense. These mappings are subject to change as we increment on the design.
+- On apple platforms, there tends to not be a "hover" state for components such as Button, so those tokens are mapped to be identical to the rest state (normal state) tokens.
+- Similarly, there is not a "checked" state for most components, so those tokens are mapped to the pressed state tokens.
+- The typography is designed to match the variants provided by the [Apple HIG](https://developer.apple.com/design/human-interface-guidelines/macos/visual-design/typography/) for regular and "emphasized". As such, the "Semibold" variants do not always map to the semibold weight, but whatever weight the Apple HIG specifies.
--- a/packages/theming/apple-theme/babel.config.js
+++ b/packages/theming/apple-theme/babel.config.js
@ -0,0 +1 @@
+module.exports = require('@uifabricshared/build-native/babel.config');
--- a/packages/theming/apple-theme/just.config.js
+++ b/packages/theming/apple-theme/just.config.js
@ -0,0 +1,3 @@
+const { preset } = require('@uifabricshared/build-native');
+
+preset();
--- a/packages/theming/apple-theme/package.json
+++ b/packages/theming/apple-theme/package.json
@ -0,0 +1,49 @@
+{
+  "name": "@fluentui-react-native/apple-theme",
+  "version": "0.1.0",
+  "description": "A FluentUI React Native theme that pulls constants from FluentUI Apple",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/microsoft/just"
+  },
+  "main": "src/index.ts",
+  "module": "src/index.ts",
+  "typings": "lib/index.d.ts",
+  "onPublish": {
+    "main": "lib-commonjs/index.js",
+    "module": "lib/index.js"
+  },
+  "scripts": {
+    "build": "fluentui-scripts build",
+    "bundle": "fluentui-scripts bundle",
+    "just": "fluentui-scripts",
+    "clean": "fluentui-scripts clean",
+    "code-style": "fluentui-scripts code-style",
+    "depcheck": "fluentui-scripts depcheck",
+    "lint": "fluentui-scripts eslint",
+    "start": "fluentui-scripts dev",
+    "start-test": "fluentui-scripts jest-watch",
+    "test": "fluentui-scripts jest",
+    "update-snapshots": "fluentui-scripts jest -u",
+    "verify-api": "fluentui-scripts verify-api-extractor",
+    "update-api": "fluentui-scripts update-api-extractor"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "MIT",
+  "dependencies": {
+    "@fluentui-react-native/default-theme": ">=0.4.1 <1.0.0",
+    "@fluentui-react-native/theme-types": ">=0.4.0 <1.0.0",
+    "@fluentui-react-native/theme": ">=0.4.0 <1.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^16.13.1",
+    "@uifabricshared/build-native": "^0.1.1",
+    "@uifabricshared/eslint-config-rules": "^0.1.1"
+  },
+  "peerDependencies": {
+    "react": "^16.13.1",
+    "react-native": "^0.63.0",
+    "react-native-macos": "^0.63.0"
+  }
+}
--- a/packages/theming/apple-theme/src/applePlatformColors.macos.ts
+++ b/packages/theming/apple-theme/src/applePlatformColors.macos.ts
@ -0,0 +1,178 @@
+import { ColorValue } from '@fluentui-react-native/theme-types';
+import { PlatformColor } from 'react-native-macos';
+
+/** Palette of Apple Platform Colors, defined at https://developer.apple.com/documentation/appkit/nscolor/ui_element_colors */
+export interface AppleSemanticPalette {
+  /* Label Colors */
+
+  /** The primary color to use for text labels */
+  labelColor: ColorValue;
+
+  /** The secondary color to use for text labels */
+  secondaryLabelColor: ColorValue;
+
+  /** The tertiary color to use for text labels */
+  tertiaryLabelColor: ColorValue;
+
+  /** The quaternary color to use for text labels and separators */
+  quaternaryLabelColor: ColorValue;
+
+  /* Text Colors */
+
+  /** The color to use for text */
+  textColor: ColorValue;
+
+  /** The color to use for placeholder text in controls or text views */
+  placeholderTextColor: ColorValue;
+
+  /** The color to use for selected text */
+  selectedTextColor: ColorValue;
+
+  /** The color to use for the background area behind text */
+  textBackgroundColor: ColorValue;
+
+  /** The color to use for the background of selected text */
+  selectedTextBackgroundColor: ColorValue;
+
+  /** The color to use for the keyboard focus ring around controls */
+  keyboardFocusIndicatorColor: ColorValue;
+
+  /** The color to use for selected text in an unemphasized context */
+  unemphasizedSelectedTextColor: ColorValue;
+
+  /** The color to use for the text background in an unemphasized context */
+  unemphasizedSelectedTextBackgroundColor: ColorValue;
+
+  /* Content Colors */
+
+  /** The color to use for links */
+  linkColor: ColorValue;
+
+  /** The color to use for separators between different sections of content */
+  separatorColor: ColorValue;
+
+  /** The color to use for the background of selected and emphasized content */
+  selectedContentBackgroundColor: ColorValue;
+
+  /** The color to use for selected and unemphasized content */
+  unemphasizedSelectedContentBackgroundColor: ColorValue;
+
+  /* Menu Colors */
+
+  /** The color to use for the text in menu items */
+  selectedMenuItemTextColor: ColorValue;
+
+  /* Table Colors */
+
+  /** The color to use for the optional gridlines, such as those in a table view */
+  gridColor: ColorValue;
+
+  /** The color to use for text in header cells in table views and outline views */
+  headerTextColor: ColorValue;
+
+  /** The colors to use for alternating (odd Rows) content, typically found in table views and collection views */
+  alternatingOddContentBackgroundColor: ColorValue;
+
+  /** The colors to use for alternating (even Rows)content, typically found in table views and collection views */
+  alternatingEvenContentBackgroundColor: ColorValue;
+
+  /* Control Colors */
+
+  /** The user's current accent color preference */
+  controlAccentColor: ColorValue;
+
+  /** The color to use for the flat surfaces of a control */
+  controlColor: ColorValue;
+
+  /** The color to use for the background of large controls, such as scroll views or table views */
+  controlBackgroundColor: ColorValue;
+
+  /** The color to use for text on enabled controls */
+  controlTextColor: ColorValue;
+
+  /** The color to use for text on disabled controls */
+  disabledControlTextColor: ColorValue;
+
+  /** The color to use for the face of a selected control—that is, a control that has been clicked or is being dragged */
+  selectedControlColor: ColorValue;
+
+  /** The color to use for text in a selected control—that is, a control being clicked or dragged */
+  selectedControlTextColor: ColorValue;
+
+  /** The color to use for text in a selected control */
+  alternateSelectedControlTextColor: ColorValue;
+
+  /** The patterned color to use for the background of a scrubber control */
+  scrubberTexturedBackground: ColorValue;
+
+  /* Windows Colors */
+
+  /** The color to use for the window background */
+  windowBackgroundColor: ColorValue;
+
+  /** The color to use for text in a window's frame */
+  windowFrameTextColor: ColorValue;
+
+  /** The color to use in the area beneath your window's views */
+  underPageBackgroundColor: ColorValue;
+
+  /* Highlights and Shadows */
+
+  /** The highlight color to use for the bubble that shows inline search result values */
+  findHighlightColor: ColorValue;
+
+  /** The color to use as a virtual light source on the screen */
+  highlightColor: ColorValue;
+
+  /** The color to use for virtual shadows cast by raised objects on the screen */
+  shadowColor: ColorValue;
+}
+
+export function getAppleSemanticPalette(): AppleSemanticPalette {
+  return {
+    labelColor: PlatformColor('labelColor'),
+    secondaryLabelColor: PlatformColor('secondaryLabelColor'),
+    tertiaryLabelColor: PlatformColor('tertiaryLabelColor'),
+    quaternaryLabelColor: PlatformColor('quaternaryLabelColor'),
+
+    textColor: PlatformColor('textColor'),
+    placeholderTextColor: PlatformColor('placeholderTextColor'),
+    textBackgroundColor: PlatformColor('textBackgroundColor'),
+
+    selectedTextColor: PlatformColor('selectedTexColor'),
+    selectedTextBackgroundColor: PlatformColor('selectedTextBackgroundColor'),
+    keyboardFocusIndicatorColor: PlatformColor('keyboardFocusIndicatorColor'),
+    unemphasizedSelectedTextColor: PlatformColor('unemphasizedSelectedTextColor'),
+    unemphasizedSelectedTextBackgroundColor: PlatformColor('unemphasizedSelectedTextBackgroundColor'),
+
+    linkColor: PlatformColor('linkColor'),
+    separatorColor: PlatformColor('separatorColor'),
+    selectedContentBackgroundColor: PlatformColor('selectedContentBackgroundColor'),
+    unemphasizedSelectedContentBackgroundColor: PlatformColor('unemphasizedSelectedContentBackgroundColor'),
+
+    selectedMenuItemTextColor: PlatformColor('selectedMenuItemTextColor'),
+
+    gridColor: PlatformColor('gridColor'),
+    headerTextColor: PlatformColor('headerTextColor'),
+    alternatingOddContentBackgroundColor: PlatformColor('alternatingOddContentBackgroundColor'),
+    alternatingEvenContentBackgroundColor: PlatformColor('alternatingOddContentBackgroundColor'),
+
+    controlAccentColor: PlatformColor('controlAccentColor'),
+    controlColor: PlatformColor('controlColor'),
+    controlBackgroundColor: PlatformColor('controlBackgroundColor'),
+    controlTextColor: PlatformColor('controlTextColor'),
+    disabledControlTextColor: PlatformColor('disabledControlTextColor'),
+    selectedControlColor: PlatformColor('selectedControlColor'),
+    selectedControlTextColor: PlatformColor('selectedControlTextColor'),
+    alternateSelectedControlTextColor: PlatformColor('alternateSelectedControlTextColor'),
+    scrubberTexturedBackground: PlatformColor('scrubberTexturedBackground'),
+
+    windowBackgroundColor: PlatformColor('windowBackgroundColor'),
+    windowFrameTextColor: PlatformColor('windowFrameTextColor'),
+    underPageBackgroundColor: PlatformColor(' underPageBackgroundColor'),
+
+    findHighlightColor: PlatformColor('findHighlightColor'),
+    highlightColor: PlatformColor('highlightColor'),
+    shadowColor: PlatformColor('shadowColor'),
+  };
+}
--- a/packages/theming/apple-theme/src/appleTheme.colors.macos.ts
+++ b/packages/theming/apple-theme/src/appleTheme.colors.macos.ts
@ -0,0 +1,209 @@
+import { ThemeColorDefinition } from '@fluentui-react-native/theme-types';
+import { FluentUIApplePalette } from './fluentAppleColors.macos';
+import { AppleSemanticPalette } from './applePlatformColors.macos';
+
+/** creates a palette of colors for the apple theme, given the FluentUI Apple Palette and Apple Semantic Palette */
+export function paletteFromAppleColors(fluentUIApple: FluentUIApplePalette, applePlatform: AppleSemanticPalette): ThemeColorDefinition {
+  return {
+    /* PaletteBackgroundColors & PaletteTextColors */
+
+    background: applePlatform.windowBackgroundColor,
+    bodyStandoutBackground: applePlatform.underPageBackgroundColor,
+    bodyFrameBackground: applePlatform.windowBackgroundColor,
+    bodyFrameDivider: applePlatform.separatorColor,
+    bodyText: applePlatform.textColor,
+    bodyTextChecked: applePlatform.selectedTextColor,
+    subText: applePlatform.placeholderTextColor,
+    bodyDivider: applePlatform.separatorColor,
+
+    disabledBackground: fluentUIApple.gray100,
+    disabledText: applePlatform.tertiaryLabelColor,
+    disabledBodyText: applePlatform.tertiaryLabelColor,
+    disabledSubtext: applePlatform.quaternaryLabelColor,
+    disabledBodySubtext: applePlatform.quaternaryLabelColor,
+
+    focusBorder: 'transparent',
+    variantBorder: applePlatform.separatorColor,
+    variantBorderHovered: applePlatform.separatorColor,
+    defaultStateBackground: applePlatform.controlBackgroundColor,
+
+    errorText: fluentUIApple.dangerPrimary,
+    warningText: fluentUIApple.warningPrimary,
+    errorBackground: fluentUIApple.dangerTint10,
+    blockingBackground: fluentUIApple.dangerTint10,
+    warningBackground: fluentUIApple.warningPrimary,
+    warningHighlight: fluentUIApple.warningTint10,
+    successBackground: fluentUIApple.successTint10,
+
+    inputBorder: applePlatform.separatorColor,
+    inputBorderHovered: applePlatform.separatorColor,
+    inputBackground: applePlatform.textBackgroundColor,
+    inputBackgroundChecked: applePlatform.selectedContentBackgroundColor,
+    inputBackgroundCheckedHovered: applePlatform.selectedContentBackgroundColor,
+    inputForegroundChecked: fluentUIApple.communicationBlue,
+    inputFocusBorderAlt: applePlatform.keyboardFocusIndicatorColor,
+    smallInputBorder: applePlatform.separatorColor,
+    inputText: applePlatform.textColor,
+    inputTextHovered: applePlatform.textColor,
+    inputPlaceholderText: applePlatform.placeholderTextColor,
+
+    buttonBackgroundChecked: fluentUIApple.communicationBlueTint10,
+    buttonBackgroundHovered: fluentUIApple.communicationBlue,
+    buttonBackgroundCheckedHovered: fluentUIApple.communicationBlueTint10,
+    buttonBackgroundPressed: fluentUIApple.communicationBlueTint10,
+    buttonBackgroundDisabled: fluentUIApple.gray100,
+    buttonText: applePlatform.controlTextColor,
+    buttonTextHovered: applePlatform.controlTextColor,
+    buttonTextChecked: applePlatform.controlTextColor,
+    buttonTextCheckedHovered: applePlatform.controlTextColor,
+    buttonTextPressed: applePlatform.controlTextColor,
+    buttonTextDisabled: applePlatform.disabledControlTextColor,
+    buttonBorderDisabled: 'transparent',
+    buttonBorderFocused: 'transparent',
+
+    primaryButtonBackground: fluentUIApple.communicationBlue,
+    primaryButtonBackgroundHovered: fluentUIApple.communicationBlue,
+    primaryButtonBackgroundPressed: fluentUIApple.communicationBlueTint10,
+    primaryButtonBackgroundDisabled: fluentUIApple.gray100,
+    primaryButtonBorder: 'transparent',
+    primaryButtonBorderFocused: 'transparent',
+    primaryButtonText: applePlatform.controlTextColor,
+    primaryButtonTextHovered: applePlatform.controlTextColor,
+    primaryButtonTextPressed: applePlatform.controlTextColor,
+    primaryButtonTextDisabled: applePlatform.disabledControlTextColor,
+
+    accentButtonBackground: fluentUIApple.communicationBlueTint10,
+    accentButtonText: applePlatform.controlTextColor,
+
+    menuBackground: 'transparent',
+    menuDivider: applePlatform.separatorColor,
+    menuIcon: applePlatform.textColor,
+    menuHeader: applePlatform.headerTextColor,
+    menuItemBackgroundHovered: 'transparent',
+    menuItemBackgroundPressed: applePlatform.selectedContentBackgroundColor,
+    menuItemText: applePlatform.textColor,
+    menuItemTextHovered: applePlatform.textColor,
+
+    listBackground: 'transparent',
+    listText: applePlatform.textColor,
+    listItemBackgroundHovered: 'transparent',
+    listItemBackgroundChecked: applePlatform.selectedContentBackgroundColor,
+    listItemBackgroundCheckedHovered: applePlatform.selectedContentBackgroundColor,
+
+    listHeaderBackgroundHovered: applePlatform.headerTextColor,
+    listHeaderBackgroundPressed: applePlatform.headerTextColor,
+
+    actionLink: applePlatform.linkColor,
+    actionLinkHovered: applePlatform.linkColor,
+    link: applePlatform.linkColor,
+    linkHovered: applePlatform.linkColor,
+    linkPressed: applePlatform.selectedControlColor,
+
+    /* ControlColorTokens */
+
+    buttonBackground: applePlatform.controlColor,
+    buttonBorder: 'transparent',
+    buttonContent: applePlatform.controlTextColor,
+    buttonIcon: applePlatform.controlTextColor,
+
+    buttonHoveredBackground: applePlatform.controlColor,
+    buttonHoveredBorder: 'transparent',
+    buttonHoveredContent: applePlatform.controlTextColor,
+    buttonHoveredIcon: applePlatform.controlTextColor,
+
+    buttonFocusedBackground: applePlatform.controlColor,
+    buttonFocusedBorder: 'transparent',
+    buttonFocusedContent: applePlatform.controlTextColor,
+    buttonFocusedIcon: applePlatform.controlTextColor,
+
+    buttonPressedBackground: applePlatform.selectedControlColor,
+    buttonPressedBorder: 'transparent',
+    buttonPressedContent: applePlatform.selectedControlTextColor,
+    buttonPressedIcon: applePlatform.selectedControlTextColor,
+
+    buttonDisabledBackground: applePlatform.controlColor,
+    buttonDisabledBorder: 'transparent',
+    buttonDisabledContent: applePlatform.disabledControlTextColor,
+    buttonDisabledIcon: applePlatform.disabledControlTextColor,
+
+    ghostBackground: 'transparent',
+    ghostBorder: 'transparent',
+    ghostContent: applePlatform.controlTextColor,
+    ghostIcon: applePlatform.controlTextColor,
+
+    ghostHoveredBackground: 'transparent',
+    ghostHoveredBorder: 'transparent',
+    ghostHoveredContent: applePlatform.controlTextColor,
+    ghostHoveredIcon: applePlatform.controlTextColor,
+
+    ghostFocusedBackground: 'transparent',
+    ghostFocusedBorder: 'transparent',
+    ghostFocusedContent: applePlatform.controlTextColor,
+    ghostFocusedIcon: applePlatform.controlTextColor,
+
+    ghostPressedBackground: 'transparent',
+    ghostPressedBorder: 'transparent',
+    ghostPressedContent: fluentUIApple.communicationBlueTint20,
+    ghostPressedIcon: fluentUIApple.communicationBlueTint20,
+
+    ghostDisabledBackground: 'transparent',
+    ghostDisabledBorder: 'transparent',
+    ghostDisabledContent: applePlatform.disabledControlTextColor,
+    ghostDisabledIcon: applePlatform.disabledControlTextColor,
+
+    brandBackground: fluentUIApple.communicationBlue,
+    brandBorder: 'transparent',
+    brandContent: applePlatform.controlTextColor,
+    brandIcon: applePlatform.controlTextColor,
+
+    brandHoveredBackground: fluentUIApple.communicationBlue,
+    brandHoveredBorder: 'transparent',
+    brandHoveredContent: applePlatform.controlTextColor,
+    brandHoveredIcon: applePlatform.controlTextColor,
+
+    brandFocusedBackground: fluentUIApple.communicationBlue,
+    brandFocusedBorder: 'transparent',
+    brandFocusedContent: applePlatform.controlTextColor,
+    brandFocusedIcon: applePlatform.controlTextColor,
+
+    brandPressedBackground: fluentUIApple.communicationBlueTint10,
+    brandPressedBorder: 'transparent',
+    brandPressedContent: applePlatform.controlTextColor,
+    brandPressedIcon: applePlatform.controlTextColor,
+
+    brandDisabledBackground: fluentUIApple.gray100,
+    brandDisabledBorder: 'transparent',
+    brandDisabledContent: applePlatform.disabledControlTextColor,
+    brandDisabledIcon: applePlatform.controlTextColor,
+
+    buttonCheckedBackground: fluentUIApple.communicationBlueTint10,
+    buttonCheckedContent: applePlatform.controlTextColor,
+    buttonCheckedHoveredBackground: fluentUIApple.communicationBlueTint10,
+    buttonCheckedHoveredContent: applePlatform.controlTextColor,
+
+    brandCheckedBackground: fluentUIApple.communicationBlueTint10,
+    brandCheckedContent: applePlatform.controlTextColor,
+    brandCheckedHoveredBackground: fluentUIApple.communicationBlueTint10,
+    brandCheckedHoveredContent: applePlatform.controlTextColor,
+
+    ghostCheckedBackground: 'transparent',
+    ghostCheckedContent: fluentUIApple.communicationBlueTint20,
+    ghostCheckedHoveredBackground: 'transparent',
+    ghostCheckedHoveredContent: fluentUIApple.communicationBlueTint20,
+    ghostCheckedHoveredBorder: 'transparent',
+
+    ghostSecondaryContent: applePlatform.secondaryLabelColor,
+    ghostFocusedSecondaryContent: applePlatform.secondaryLabelColor,
+    ghostHoveredSecondaryContent: applePlatform.secondaryLabelColor,
+    ghostPressedSecondaryContent: applePlatform.secondaryLabelColor,
+
+    brandSecondaryContent: applePlatform.secondaryLabelColor,
+    brandFocusedSecondaryContent: applePlatform.secondaryLabelColor,
+    brandHoveredSecondaryContent: applePlatform.secondaryLabelColor,
+    brandPressedSecondaryContent: applePlatform.tertiaryLabelColor,
+
+    buttonDisabledSecondaryContent: applePlatform.disabledControlTextColor,
+    buttonHoveredSecondaryContent: applePlatform.secondaryLabelColor,
+    buttonPressedSecondaryContent: applePlatform.tertiaryLabelColor,
+  };
+}
--- a/packages/theming/apple-theme/src/appleTheme.macos.ts
+++ b/packages/theming/apple-theme/src/appleTheme.macos.ts
@ -0,0 +1,39 @@
+import { Spacing, Theme } from '@fluentui-react-native/theme-types';
+import { getFluentUIApplePalette } from './fluentAppleColors.macos';
+import { getAppleSemanticPalette } from './applePlatformColors.macos';
+import { paletteFromAppleColors } from './appleTheme.colors.macos';
+import { appleTypography } from './appleTypography.macos';
+
+export function appleSpacing(): Spacing {
+  return {
+    s2: '8px',
+    s1: '12px',
+    m: '16px',
+    l1: '20px',
+    l2: '24px',
+  };
+}
+
+export const appleComponents = {
+  Button: {
+    tokens: {
+      borderRadius: 5,
+      borderWidth: 1,
+      minHeight: 28,
+      minWidth: 72,
+    },
+  },
+  RNFText: {
+    tokens: {
+      variant: 'bodyStandard',
+    },
+  },
+};
+
+export const defaultAppleThemeMacOS: Theme = {
+  colors: paletteFromAppleColors(getFluentUIApplePalette(), getAppleSemanticPalette()),
+  typography: appleTypography(),
+  spacing: appleSpacing(),
+  components: appleComponents,
+  host: { appearance: 'dynamic' },
+};
--- a/packages/theming/apple-theme/src/appleTypography.macos.ts
+++ b/packages/theming/apple-theme/src/appleTypography.macos.ts
@ -0,0 +1,58 @@
+import { FontSize, FontSizes, FontWeightValue, Typography, Variants } from '@fluentui-react-native/theme-types';
+
+/**
+ * The Typography is designed to match the styles defined in the Apple HIG:
+ * https://developer.apple.com/design/human-interface-guidelines/macos/visual-design/typography/
+ * These mappings and variants are subject to change as we moved to a unified cross platform Fluent typography ramp
+ * Github #598 also tracks pulling these values from a Native Module rather than hardcoding the numbers in JS.
+ */
+
+export function appleTypography(): Typography {
+  const appleDict = {
+    sizes: {
+      caption: 10 as FontSize, // Caption 1
+      secondary: 11 as FontSize, // Callout
+      body: 13 as FontSize, // Body
+      subheader: 16 as FontSize, // Subheadline
+      header: 20 as FontSize, // Headline
+      hero: 22 as FontSize, /// Title 1
+      heroLarge: 26 as FontSize, // Large Title,
+    } as FontSizes,
+    weights: {
+      ultralight: '100' as FontWeightValue,
+      thin: '200' as FontWeightValue,
+      light: '300' as FontWeightValue,
+      regular: '400' as FontWeightValue,
+      medium: '500' as FontWeightValue,
+      semiBold: '600' as FontWeightValue,
+      bold: '700' as FontWeightValue,
+      heavy: '800' as FontWeightValue,
+      black: '900' as FontWeightValue,
+    },
+    families: {
+      primary: 'SF Pro',
+      secondary: 'System',
+      cursive: 'System',
+      monospace: 'SF Mono',
+      sansSerif: 'SF Pro',
+      serif: 'System',
+    },
+    variants: {
+      captionStandard: { face: 'primary', size: 'caption', weight: '500' },
+      secondaryStandard: { face: 'primary', size: 'secondary', weight: '400' },
+      secondarySemibold: { face: 'primary', size: 'secondary', weight: '600' },
+      bodyStandard: { face: 'primary', size: 'body', weight: '400' },
+      bodySemibold: { face: 'primary', size: 'body', weight: '600' },
+      subheaderStandard: { face: 'primary', size: 'subheader', weight: '400' },
+      subheaderSemibold: { face: 'primary', size: 'subheader', weight: '600' },
+      headerStandard: { face: 'primary', size: 'header', weight: '700' },
+      headerSemibold: { face: 'primary', size: 'header', weight: '800' },
+      heroStandard: { face: 'primary', size: 'hero', weight: '400' },
+      heroSemibold: { face: 'primary', size: 'hero', weight: '700' },
+      heroLargeStandard: { face: 'primary', size: 'heroLarge', weight: '400' },
+      heroLargeSemibold: { face: 'primary', size: 'heroLarge', weight: '700' },
+    } as Variants,
+  };
+
+  return appleDict;
+}
--- a/packages/theming/apple-theme/src/createAppleTheme.ios.ts
+++ b/packages/theming/apple-theme/src/createAppleTheme.ios.ts
@ -0,0 +1,7 @@
+import { ThemeReference } from '@fluentui-react-native/theme';
+import { createDefaultTheme } from '@fluentui-react-native/default-theme';
+
+export function createAppleTheme(): ThemeReference {
+  console.warn('iOS Theme not currently implemented, using default theme');
+  return new ThemeReference(createDefaultTheme());
+}
--- a/packages/theming/apple-theme/src/createAppleTheme.macos.ts
+++ b/packages/theming/apple-theme/src/createAppleTheme.macos.ts
@ -0,0 +1,6 @@
+import { ThemeReference } from '@fluentui-react-native/theme';
+import { defaultAppleThemeMacOS } from './appleTheme.macos';
+
+export function createAppleTheme(): ThemeReference {
+  return new ThemeReference(defaultAppleThemeMacOS);
+}
--- a/packages/theming/apple-theme/src/createAppleTheme.ts
+++ b/packages/theming/apple-theme/src/createAppleTheme.ts
@ -0,0 +1,7 @@
+import { ThemeReference } from '@fluentui-react-native/theme';
+import { createDefaultTheme } from '@fluentui-react-native/default-theme';
+
+export function createAppleTheme(): ThemeReference {
+  console.warn('Platform is not supported by apple theme, using default theme');
+  return new ThemeReference(createDefaultTheme());
+}
--- a/packages/theming/apple-theme/src/fluentAppleColors.macos.ts
+++ b/packages/theming/apple-theme/src/fluentAppleColors.macos.ts
@ -0,0 +1,316 @@
+import { ColorValue } from '@fluentui-react-native/theme-types';
+import { DynamicColorMacOS } from 'react-native-macos';
+
+/** Palette of colors defined in FluentUI Apple */
+export interface FluentUIAppleBasePalette {
+  blue10: ColorValue;
+  blueMagenta20: ColorValue;
+  blueMagenta30: ColorValue;
+  communicationBlue: ColorValue;
+  communicationBlueShade10: ColorValue;
+  communicationBlueShade20: ColorValue;
+  communicationBlueShade30: ColorValue;
+  communicationBlueTint10: ColorValue;
+  communicationBlueTint20: ColorValue;
+  communicationBlueTint30: ColorValue;
+  communicationBlueTint40: ColorValue;
+  cyan20: ColorValue;
+  cyan30: ColorValue;
+  cyanBlue10: ColorValue;
+  cyanBlue20: ColorValue;
+  dangerPrimary: ColorValue;
+  dangerShade10: ColorValue;
+  dangerShade20: ColorValue;
+  dangerShade30: ColorValue;
+  dangerTint10: ColorValue;
+  dangerTint20: ColorValue;
+  dangerTint30: ColorValue;
+  dangerTint40: ColorValue;
+  gray20: ColorValue;
+  gray25: ColorValue;
+  gray30: ColorValue;
+  gray40: ColorValue;
+  gray50: ColorValue;
+  gray100: ColorValue;
+  gray200: ColorValue;
+  gray300: ColorValue;
+  gray400: ColorValue;
+  gray500: ColorValue;
+  gray600: ColorValue;
+  gray700: ColorValue;
+  gray800: ColorValue;
+  gray900: ColorValue;
+  gray950: ColorValue;
+  green10: ColorValue;
+  green20: ColorValue;
+  magenta10: ColorValue;
+  magenta20: ColorValue;
+  magentaPink10: ColorValue;
+  orange20: ColorValue;
+  orange30: ColorValue;
+  orangeYellow20: ColorValue;
+  pinkRed10: ColorValue;
+  presenceAvailable: ColorValue;
+  presenceAway: ColorValue;
+  presenceBlocked: ColorValue;
+  presenceBusy: ColorValue;
+  presenceDnd: ColorValue;
+  presenceOffline: ColorValue;
+  presenceOof: ColorValue;
+  presenceUnknown: ColorValue;
+  red10: ColorValue;
+  red20: ColorValue;
+  successPrimary: ColorValue;
+  successShade10: ColorValue;
+  successShade20: ColorValue;
+  successShade30: ColorValue;
+  successTint10: ColorValue;
+  successTint20: ColorValue;
+  successTint30: ColorValue;
+  successTint40: ColorValue;
+  warningPrimary: ColorValue;
+  warningShade10: ColorValue;
+  warningShade20: ColorValue;
+  warningShade30: ColorValue;
+  warningTint10: ColorValue;
+  warningTint20: ColorValue;
+  warningTint30: ColorValue;
+  warningTint40: ColorValue;
+}
+
+/** A set of control tokens used on the FluentUI Apple macOS button */
+export interface FluentAppleButtonTokens {
+  brandBackgroundDisabled: ColorValue;
+  brandForegroundDisabled: ColorValue;
+  neutralBackground2: ColorValue;
+  neutralBackground3: ColorValue;
+  neutralForeground2: ColorValue;
+  neutralForeground3: ColorValue;
+  neutralInverted: ColorValue;
+  neutralStroke2: ColorValue;
+}
+
+export type FluentUIApplePalette = FluentUIAppleBasePalette & FluentAppleButtonTokens;
+
+export function getFluentUIApplePalette(): FluentUIApplePalette {
+  return {
+    blue10: '#4F6BED',
+    blueMagenta20: '#8764B8',
+    blueMagenta30: '#5C2E91',
+    communicationBlue: DynamicColorMacOS({
+      light: '#0078D4',
+      dark: '#1890F1',
+    }),
+    communicationBlueShade10: DynamicColorMacOS({
+      light: '#106EBE',
+      dark: '#1890F1',
+    }),
+    communicationBlueShade20: DynamicColorMacOS({
+      light: '#005A9E',
+      dark: '#3AA0F3',
+    }),
+    communicationBlueShade30: DynamicColorMacOS({
+      light: '#004578',
+      dark: '#6CB8F6',
+    }),
+    communicationBlueTint10: DynamicColorMacOS({
+      light: '#2B88D8',
+      dark: '#0078D4',
+    }),
+    communicationBlueTint20: DynamicColorMacOS({
+      light: '#C7E0F4',
+      dark: '#004C87',
+    }),
+    communicationBlueTint30: DynamicColorMacOS({
+      light: '#DEECF9',
+      dark: '#043862',
+    }),
+    communicationBlueTint40: DynamicColorMacOS({
+      light: '#EFF6FC',
+      dark: '#092C47',
+    }),
+
+    cyan20: '#038387',
+    cyan30: '#005B70',
+    cyanBlue10: '#0078D4',
+    cyanBlue20: '#004E8C',
+    dangerPrimary: DynamicColorMacOS({
+      light: '#D92C2C',
+      dark: '#clear',
+    }),
+    dangerShade10: DynamicColorMacOS({
+      light: '#C32727',
+      dark: '#clear',
+    }),
+    dangerShade20: DynamicColorMacOS({
+      light: '#A52121',
+      dark: '#clear',
+    }),
+    dangerShade30: DynamicColorMacOS({
+      light: '#791818',
+      dark: '#clear',
+    }),
+    dangerTint10: DynamicColorMacOS({
+      light: '#DD4242',
+      dark: '#clear',
+    }),
+    dangerTint20: DynamicColorMacOS({
+      light: '#E87979',
+      dark: '#clear',
+    }),
+    dangerTint30: DynamicColorMacOS({
+      light: '#F4B9B9',
+      dark: '#clear',
+    }),
+    dangerTint40: DynamicColorMacOS({
+      light: '#F9D9D9',
+      dark: '#clear',
+    }),
+    gray20: '#69797E',
+    gray25: '#F8F8F8',
+    gray30: '#7A7574',
+    gray40: '#393939',
+    gray50: '#F1F1F1',
+    gray100: '#E1E1E1',
+    gray200: '#C8C8C8',
+    gray300: '#ACACAC',
+    gray400: '#919191',
+    gray500: '#6E6E6E',
+    gray600: '#404040',
+    gray700: '#303030',
+    gray800: '#292929',
+    gray900: '#212121',
+    gray950: '#141414',
+    green10: '#498205',
+    green20: '#0B6A0B',
+    magenta10: '#C239B3',
+    magenta20: '#881798',
+    magentaPink10: '#E3008C',
+    orange20: '#CA5010',
+    orange30: '#8E562E',
+    orangeYellow20: '#986F0B',
+    pinkRed10: '#750B1C',
+    presenceAvailable: DynamicColorMacOS({
+      light: '#6BB700',
+      dark: '#92C353',
+    }),
+    presenceAway: DynamicColorMacOS({
+      light: '#FFAA44',
+      dark: '#F8D22A',
+    }),
+    presenceBlocked: DynamicColorMacOS({
+      light: '#C50F1F',
+      dark: '#D74553',
+    }),
+    presenceBusy: DynamicColorMacOS({
+      light: '#C50F1F',
+      dark: '#D74553',
+    }),
+    presenceDnd: DynamicColorMacOS({
+      light: '#C50F1F',
+      dark: '#D74553',
+    }),
+    presenceOffline: DynamicColorMacOS({
+      light: '#8A8886',
+      dark: '#979593',
+    }),
+    presenceOof: DynamicColorMacOS({
+      light: '#B4009E',
+      dark: '#E959D9',
+    }),
+    presenceUnknown: DynamicColorMacOS({
+      light: '#8A8886',
+      dark: '#979593',
+    }),
+    red10: '#D13438',
+    red20: '#A4262C',
+    successPrimary: DynamicColorMacOS({
+      light: '#13A10E',
+      dark: '#979593',
+    }),
+    successShade10: DynamicColorMacOS({
+      light: '#11910D',
+      dark: '#20BA53',
+    }),
+    successShade20: DynamicColorMacOS({
+      light: '#0F7A0B',
+      dark: '#3BC569',
+    }),
+    successShade30: DynamicColorMacOS({
+      light: '#0B5A08',
+      dark: '#67D48B',
+    }),
+    successTint10: DynamicColorMacOS({
+      light: '#27AC22',
+      dark: '#0D9D3D',
+    }),
+    successTint20: DynamicColorMacOS({
+      light: '#5EC65A',
+      dark: '#096B29',
+    }),
+    successTint30: DynamicColorMacOS({
+      light: '#A7E3A5',
+      dark: '#043615',
+    }),
+    successTint40: DynamicColorMacOS({
+      light: '#CEF0CD',
+      dark: '#021D0B',
+    }),
+    warningPrimary: DynamicColorMacOS({
+      light: '#FFD335',
+      dark: '#FFC328',
+    }),
+    warningShade10: DynamicColorMacOS({
+      light: '#E6BE30',
+      dark: '#FFC83E',
+    }),
+    warningShade20: DynamicColorMacOS({
+      light: '#C2A129',
+      dark: '#FFDD15',
+    }),
+    warningShade30: DynamicColorMacOS({
+      light: '#8F761E',
+      dark: '#FFDD87',
+    }),
+    warningTint10: DynamicColorMacOS({
+      light: '#FFD94E',
+      dark: '#E0AB24',
+    }),
+    warningTint20: DynamicColorMacOS({
+      light: '#FFE586',
+      dark: '#997518',
+    }),
+    warningTint30: DynamicColorMacOS({
+      light: '#FFF2C3',
+      dark: '#4D3A0C',
+    }),
+    warningTint40: DynamicColorMacOS({
+      light: '#FFF8DF',
+      dark: '#291F07',
+    }),
+
+    brandBackgroundDisabled: DynamicColorMacOS({
+      light: '#252525',
+      dark: '#565656',
+    }),
+    brandForegroundDisabled: DynamicColorMacOS({
+      light: '#252525',
+      dark: '#FFFFFF',
+    }),
+    neutralBackground2: DynamicColorMacOS({
+      light: '#FFFFFF',
+      dark: '#555555',
+    }),
+    neutralBackground3: DynamicColorMacOS({
+      light: '#000000',
+      dark: '#555555',
+    }),
+    neutralForeground2: '#000000',
+    neutralForeground3: DynamicColorMacOS({
+      light: '#272727',
+      dark: '#FFFFFF',
+    }),
+    neutralInverted: '#FFFFFF',
+    neutralStroke2: '#000000',
+  };
+}
--- a/packages/theming/apple-theme/src/index.ts
+++ b/packages/theming/apple-theme/src/index.ts
@ -0,0 +1 @@
+export * from './createAppleTheme';
--- a/packages/theming/apple-theme/tsconfig.json
+++ b/packages/theming/apple-theme/tsconfig.json
@ -0,0 +1,8 @@
+{
+  "extends": "@uifabricshared/build-native/tsconfig.json",
+  "compilerOptions": {
+    "outDir": "lib",
+    "types": ["node", "jest"]
+  },
+  "include": ["src"]
+}
--- a/packages/theming/default-theme/src/defaultColors.ts
+++ b/packages/theming/default-theme/src/defaultColors.ts
@ -144,7 +144,7 @@ export function getStockWebDarkPalette(): ThemeColorDefinition {
  return {
    ...paletteFromFabricColors(
      {
-        // colors takesn from fluentui DarkCustomizations.ts
+        // colors taken from fluentui DarkCustomizations.ts
        themeDarker: '#82c7ff',
        themeDark: '#6cb8f6',
        themeDarkAlt: '#3aa0f3',
--- a/packages/theming/theme-types/src/Color.types.ts
+++ b/packages/theming/theme-types/src/Color.types.ts
@ -336,8 +336,8 @@ export interface PaletteBackgroundColors {

 export interface ControlColorTokens {
  buttonBackground: ColorValue;
-  buttonContent: ColorValue;
  buttonBorder: ColorValue;
+  buttonContent: ColorValue;
  buttonIcon: ColorValue;

  buttonHoveredBackground: ColorValue;
@ -361,8 +361,8 @@ export interface ControlColorTokens {
  buttonDisabledIcon: ColorValue;

  ghostBackground: ColorValue;
-  ghostContent: ColorValue;
  ghostBorder: ColorValue;
+  ghostContent: ColorValue;
  ghostIcon: ColorValue;

  ghostHoveredBackground: ColorValue;
@ -386,8 +386,8 @@ export interface ControlColorTokens {
  ghostDisabledIcon: ColorValue;

  brandBackground: ColorValue;
-  brandContent: ColorValue;
  brandBorder: ColorValue;
+  brandContent: ColorValue;
  brandIcon: ColorValue;

  brandHoveredBackground: ColorValue;
--- a/packages/theming/theme-types/src/Theme.types.ts
+++ b/packages/theming/theme-types/src/Theme.types.ts
@ -25,7 +25,8 @@ export interface Theme {
  spacing: Spacing;
  host: {
    // appearance of the theme, this corresponds to the react-native Appearance library values, though can be overwritten
-    appearance: 'light' | 'dark';
+    // dynamic refers to a theme that handles it's own appearance switching, such as one that uses the PlatformColor API
+    appearance: 'light' | 'dark' | 'dynamic';

    // Office palette, if running in Office with the native module connected in the theme
    palette?: OfficePalette;
--- a/packages/theming/win32-theme/src/createPartialOfficeTheme.ts
+++ b/packages/theming/win32-theme/src/createPartialOfficeTheme.ts
@ -19,7 +19,7 @@ const getRamps = (module: OfficeThemingModule): Colors => {
 * create a partial theme with overrides from the office native module
 *
 * @param module - theming native module, either the real one or a mock implementation
- * @param palette - Office palette colors, if they have been sucessfully retrieved
+ * @param palette - Office palette colors, if they have been successfully retrieved
 */
 export function createPartialOfficeTheme(module: OfficeThemingModule, themeName?: string, palette?: OfficePalette): PartialTheme {
  return {
--- a/yarn.lock
+++ b/yarn.lock
@ -2695,6 +2695,14 @@
    "@types/prop-types" "*"
    csstype "^2.2.0"

+"@types/react@^16.13.1":
+  version "16.14.3"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-16.14.3.tgz#f5210f5deecf35d8794845549c93c2c3ad63aa9c"
+  integrity sha512-zPrXn03hmPYqh9DznqSFQsoRtrQ4aHgnZDO+hMGvsE/PORvDTdJCHQ6XvJV31ic+0LzF73huPFXUb++W6Kri0Q==
+  dependencies:
+    "@types/prop-types" "*"
+    csstype "^3.0.2"
+
 "@types/react@^16.9.0":
  version "16.9.36"
  resolved "https://registry.yarnpkg.com/@types/react/-/react-16.9.36.tgz#ade589ff51e2a903e34ee4669e05dbfa0c1ce849"
@ -6278,6 +6286,11 @@ csstype@^2.2.0:
  resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.6.10.tgz#e63af50e66d7c266edb6b32909cfd0aabe03928b"
  integrity sha512-D34BqZU4cIlMCY93rZHbrq9pjTAQJ3U8S8rfBqjwHxkGPThWFjzZDQpgMJY0QViLxth6ZKYiwFBo14RdN44U/w==

+csstype@^3.0.2:
+  version "3.0.6"
+  resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.0.6.tgz#865d0b5833d7d8d40f4e5b8a6d76aea3de4725ef"
+  integrity sha512-+ZAmfyWMT7TiIlzdqJgjMb7S4f1beorDbWbsocyK4RaiqA5RTX3K14bnBWmmA9QEM0gRdsjyyrEmcyga8Zsxmw==
+
 cyclist@^1.0.1:
  version "1.0.1"
  resolved "https://registry.yarnpkg.com/cyclist/-/cyclist-1.0.1.tgz#596e9698fd0c80e12038c2b82d6eb1b35b6224d9"
				`@ -0,0 +1 @@`
				`# As this package grows it's likely we'll want to voluntarily ignore some packages`
				`@ -0,0 +1 @@`
				`module.exports = require('@uifabricshared/build-native/babel.config');`