Add iOS spacing tokens (#2197)

* Add new spacing tokens * Add iOS test page * Change files
2022-10-11 15:20:23 -07:00 · 2022-10-11 15:20:23 -07:00 · 3547a335f4
--- a/apps/fluent-tester/ios/Podfile.lock
+++ b/apps/fluent-tester/ios/Podfile.lock
@ -1,19 +1,19 @@
 PODS:
  - boost (1.76.0)
  - DoubleConversion (1.1.6)
-  - FBLazyVector (0.66.4)
-  - FBReactNativeSpec (0.66.4):
+  - FBLazyVector (0.68.3)
+  - FBReactNativeSpec (0.68.3):
    - RCT-Folly (= 2021.06.28.00-v2)
-    - RCTRequired (= 0.66.4)
-    - RCTTypeSafety (= 0.66.4)
-    - React-Core (= 0.66.4)
-    - React-jsi (= 0.66.4)
-    - ReactCommon/turbomodule/core (= 0.66.4)
+    - RCTRequired (= 0.68.3)
+    - RCTTypeSafety (= 0.68.3)
+    - React-Core (= 0.68.3)
+    - React-jsi (= 0.68.3)
+    - ReactCommon/turbomodule/core (= 0.68.3)
  - fmt (6.2.1)
-  - FRNAvatar (0.16.5):
+  - FRNAvatar (0.16.9):
    - MicrosoftFluentUI (= 0.8.3)
    - React
-  - FRNDatePicker (0.7.1):
+  - FRNDatePicker (0.7.2):
    - MicrosoftFluentUI (= 0.8.3)
    - React
  - glog (0.3.5)
@ -186,267 +186,276 @@ PODS:
    - DoubleConversion
    - fmt (~> 6.2.1)
    - glog
-  - RCTRequired (0.66.4)
-  - RCTTypeSafety (0.66.4):
-    - FBLazyVector (= 0.66.4)
+  - RCTRequired (0.68.3)
+  - RCTTypeSafety (0.68.3):
+    - FBLazyVector (= 0.68.3)
    - RCT-Folly (= 2021.06.28.00-v2)
-    - RCTRequired (= 0.66.4)
-    - React-Core (= 0.66.4)
-  - React (0.66.4):
-    - React-Core (= 0.66.4)
-    - React-Core/DevSupport (= 0.66.4)
-    - React-Core/RCTWebSocket (= 0.66.4)
-    - React-RCTActionSheet (= 0.66.4)
-    - React-RCTAnimation (= 0.66.4)
-    - React-RCTBlob (= 0.66.4)
-    - React-RCTImage (= 0.66.4)
-    - React-RCTLinking (= 0.66.4)
-    - React-RCTNetwork (= 0.66.4)
-    - React-RCTSettings (= 0.66.4)
-    - React-RCTText (= 0.66.4)
-    - React-RCTVibration (= 0.66.4)
-  - React-callinvoker (0.66.4)
-  - React-Core (0.66.4):
+    - RCTRequired (= 0.68.3)
+    - React-Core (= 0.68.3)
+  - React (0.68.3):
+    - React-Core (= 0.68.3)
+    - React-Core/DevSupport (= 0.68.3)
+    - React-Core/RCTWebSocket (= 0.68.3)
+    - React-RCTActionSheet (= 0.68.3)
+    - React-RCTAnimation (= 0.68.3)
+    - React-RCTBlob (= 0.68.3)
+    - React-RCTImage (= 0.68.3)
+    - React-RCTLinking (= 0.68.3)
+    - React-RCTNetwork (= 0.68.3)
+    - React-RCTSettings (= 0.68.3)
+    - React-RCTText (= 0.68.3)
+    - React-RCTVibration (= 0.68.3)
+  - React-callinvoker (0.68.3)
+  - React-Codegen (0.68.3):
+    - FBReactNativeSpec (= 0.68.3)
+    - RCT-Folly (= 2021.06.28.00-v2)
+    - RCTRequired (= 0.68.3)
+    - RCTTypeSafety (= 0.68.3)
+    - React-Core (= 0.68.3)
+    - React-jsi (= 0.68.3)
+    - React-jsiexecutor (= 0.68.3)
+    - ReactCommon/turbomodule/core (= 0.68.3)
+  - React-Core (0.68.3):
    - glog
    - RCT-Folly (= 2021.06.28.00-v2)
-    - React-Core/Default (= 0.66.4)
-    - React-cxxreact (= 0.66.4)
-    - React-jsi (= 0.66.4)
-    - React-jsiexecutor (= 0.66.4)
-    - React-perflogger (= 0.66.4)
+    - React-Core/Default (= 0.68.3)
+    - React-cxxreact (= 0.68.3)
+    - React-jsi (= 0.68.3)
+    - React-jsiexecutor (= 0.68.3)
+    - React-perflogger (= 0.68.3)
    - Yoga
-  - React-Core/CoreModulesHeaders (0.66.4):
+  - React-Core/CoreModulesHeaders (0.68.3):
    - glog
    - RCT-Folly (= 2021.06.28.00-v2)
    - React-Core/Default
-    - React-cxxreact (= 0.66.4)
-    - React-jsi (= 0.66.4)
-    - React-jsiexecutor (= 0.66.4)
-    - React-perflogger (= 0.66.4)
+    - React-cxxreact (= 0.68.3)
+    - React-jsi (= 0.68.3)
+    - React-jsiexecutor (= 0.68.3)
+    - React-perflogger (= 0.68.3)
    - Yoga
-  - React-Core/Default (0.66.4):
+  - React-Core/Default (0.68.3):
    - glog
    - RCT-Folly (= 2021.06.28.00-v2)
-    - React-cxxreact (= 0.66.4)
-    - React-jsi (= 0.66.4)
-    - React-jsiexecutor (= 0.66.4)
-    - React-perflogger (= 0.66.4)
+    - React-cxxreact (= 0.68.3)
+    - React-jsi (= 0.68.3)
+    - React-jsiexecutor (= 0.68.3)
+    - React-perflogger (= 0.68.3)
    - Yoga
-  - React-Core/DevSupport (0.66.4):
+  - React-Core/DevSupport (0.68.3):
    - glog
    - RCT-Folly (= 2021.06.28.00-v2)
-    - React-Core/Default (= 0.66.4)
-    - React-Core/RCTWebSocket (= 0.66.4)
-    - React-cxxreact (= 0.66.4)
-    - React-jsi (= 0.66.4)
-    - React-jsiexecutor (= 0.66.4)
-    - React-jsinspector (= 0.66.4)
-    - React-perflogger (= 0.66.4)
+    - React-Core/Default (= 0.68.3)
+    - React-Core/RCTWebSocket (= 0.68.3)
+    - React-cxxreact (= 0.68.3)
+    - React-jsi (= 0.68.3)
+    - React-jsiexecutor (= 0.68.3)
+    - React-jsinspector (= 0.68.3)
+    - React-perflogger (= 0.68.3)
    - Yoga
-  - React-Core/RCTActionSheetHeaders (0.66.4):
+  - React-Core/RCTActionSheetHeaders (0.68.3):
    - glog
    - RCT-Folly (= 2021.06.28.00-v2)
    - React-Core/Default
-    - React-cxxreact (= 0.66.4)
-    - React-jsi (= 0.66.4)
-    - React-jsiexecutor (= 0.66.4)
-    - React-perflogger (= 0.66.4)
+    - React-cxxreact (= 0.68.3)
+    - React-jsi (= 0.68.3)
+    - React-jsiexecutor (= 0.68.3)
+    - React-perflogger (= 0.68.3)
    - Yoga
-  - React-Core/RCTAnimationHeaders (0.66.4):
+  - React-Core/RCTAnimationHeaders (0.68.3):
    - glog
    - RCT-Folly (= 2021.06.28.00-v2)
    - React-Core/Default
-    - React-cxxreact (= 0.66.4)
-    - React-jsi (= 0.66.4)
-    - React-jsiexecutor (= 0.66.4)
-    - React-perflogger (= 0.66.4)
+    - React-cxxreact (= 0.68.3)
+    - React-jsi (= 0.68.3)
+    - React-jsiexecutor (= 0.68.3)
+    - React-perflogger (= 0.68.3)
    - Yoga
-  - React-Core/RCTBlobHeaders (0.66.4):
+  - React-Core/RCTBlobHeaders (0.68.3):
    - glog
    - RCT-Folly (= 2021.06.28.00-v2)
    - React-Core/Default
-    - React-cxxreact (= 0.66.4)
-    - React-jsi (= 0.66.4)
-    - React-jsiexecutor (= 0.66.4)
-    - React-perflogger (= 0.66.4)
+    - React-cxxreact (= 0.68.3)
+    - React-jsi (= 0.68.3)
+    - React-jsiexecutor (= 0.68.3)
+    - React-perflogger (= 0.68.3)
    - Yoga
-  - React-Core/RCTImageHeaders (0.66.4):
+  - React-Core/RCTImageHeaders (0.68.3):
    - glog
    - RCT-Folly (= 2021.06.28.00-v2)
    - React-Core/Default
-    - React-cxxreact (= 0.66.4)
-    - React-jsi (= 0.66.4)
-    - React-jsiexecutor (= 0.66.4)
-    - React-perflogger (= 0.66.4)
+    - React-cxxreact (= 0.68.3)
+    - React-jsi (= 0.68.3)
+    - React-jsiexecutor (= 0.68.3)
+    - React-perflogger (= 0.68.3)
    - Yoga
-  - React-Core/RCTLinkingHeaders (0.66.4):
+  - React-Core/RCTLinkingHeaders (0.68.3):
    - glog
    - RCT-Folly (= 2021.06.28.00-v2)
    - React-Core/Default
-    - React-cxxreact (= 0.66.4)
-    - React-jsi (= 0.66.4)
-    - React-jsiexecutor (= 0.66.4)
-    - React-perflogger (= 0.66.4)
+    - React-cxxreact (= 0.68.3)
+    - React-jsi (= 0.68.3)
+    - React-jsiexecutor (= 0.68.3)
+    - React-perflogger (= 0.68.3)
    - Yoga
-  - React-Core/RCTNetworkHeaders (0.66.4):
+  - React-Core/RCTNetworkHeaders (0.68.3):
    - glog
    - RCT-Folly (= 2021.06.28.00-v2)
    - React-Core/Default
-    - React-cxxreact (= 0.66.4)
-    - React-jsi (= 0.66.4)
-    - React-jsiexecutor (= 0.66.4)
-    - React-perflogger (= 0.66.4)
+    - React-cxxreact (= 0.68.3)
+    - React-jsi (= 0.68.3)
+    - React-jsiexecutor (= 0.68.3)
+    - React-perflogger (= 0.68.3)
    - Yoga
-  - React-Core/RCTSettingsHeaders (0.66.4):
+  - React-Core/RCTSettingsHeaders (0.68.3):
    - glog
    - RCT-Folly (= 2021.06.28.00-v2)
    - React-Core/Default
-    - React-cxxreact (= 0.66.4)
-    - React-jsi (= 0.66.4)
-    - React-jsiexecutor (= 0.66.4)
-    - React-perflogger (= 0.66.4)
+    - React-cxxreact (= 0.68.3)
+    - React-jsi (= 0.68.3)
+    - React-jsiexecutor (= 0.68.3)
+    - React-perflogger (= 0.68.3)
    - Yoga
-  - React-Core/RCTTextHeaders (0.66.4):
+  - React-Core/RCTTextHeaders (0.68.3):
    - glog
    - RCT-Folly (= 2021.06.28.00-v2)
    - React-Core/Default
-    - React-cxxreact (= 0.66.4)
-    - React-jsi (= 0.66.4)
-    - React-jsiexecutor (= 0.66.4)
-    - React-perflogger (= 0.66.4)
+    - React-cxxreact (= 0.68.3)
+    - React-jsi (= 0.68.3)
+    - React-jsiexecutor (= 0.68.3)
+    - React-perflogger (= 0.68.3)
    - Yoga
-  - React-Core/RCTVibrationHeaders (0.66.4):
+  - React-Core/RCTVibrationHeaders (0.68.3):
    - glog
    - RCT-Folly (= 2021.06.28.00-v2)
    - React-Core/Default
-    - React-cxxreact (= 0.66.4)
-    - React-jsi (= 0.66.4)
-    - React-jsiexecutor (= 0.66.4)
-    - React-perflogger (= 0.66.4)
+    - React-cxxreact (= 0.68.3)
+    - React-jsi (= 0.68.3)
+    - React-jsiexecutor (= 0.68.3)
+    - React-perflogger (= 0.68.3)
    - Yoga
-  - React-Core/RCTWebSocket (0.66.4):
+  - React-Core/RCTWebSocket (0.68.3):
    - glog
    - RCT-Folly (= 2021.06.28.00-v2)
-    - React-Core/Default (= 0.66.4)
-    - React-cxxreact (= 0.66.4)
-    - React-jsi (= 0.66.4)
-    - React-jsiexecutor (= 0.66.4)
-    - React-perflogger (= 0.66.4)
+    - React-Core/Default (= 0.68.3)
+    - React-cxxreact (= 0.68.3)
+    - React-jsi (= 0.68.3)
+    - React-jsiexecutor (= 0.68.3)
+    - React-perflogger (= 0.68.3)
    - Yoga
-  - React-CoreModules (0.66.4):
-    - FBReactNativeSpec (= 0.66.4)
+  - React-CoreModules (0.68.3):
    - RCT-Folly (= 2021.06.28.00-v2)
-    - RCTTypeSafety (= 0.66.4)
-    - React-Core/CoreModulesHeaders (= 0.66.4)
-    - React-jsi (= 0.66.4)
-    - React-RCTImage (= 0.66.4)
-    - ReactCommon/turbomodule/core (= 0.66.4)
-  - React-cxxreact (0.66.4):
+    - RCTTypeSafety (= 0.68.3)
+    - React-Codegen (= 0.68.3)
+    - React-Core/CoreModulesHeaders (= 0.68.3)
+    - React-jsi (= 0.68.3)
+    - React-RCTImage (= 0.68.3)
+    - ReactCommon/turbomodule/core (= 0.68.3)
+  - React-cxxreact (0.68.3):
    - boost (= 1.76.0)
    - DoubleConversion
    - glog
    - RCT-Folly (= 2021.06.28.00-v2)
-    - React-callinvoker (= 0.66.4)
-    - React-jsi (= 0.66.4)
-    - React-jsinspector (= 0.66.4)
-    - React-logger (= 0.66.4)
-    - React-perflogger (= 0.66.4)
-    - React-runtimeexecutor (= 0.66.4)
-  - React-jsi (0.66.4):
+    - React-callinvoker (= 0.68.3)
+    - React-jsi (= 0.68.3)
+    - React-jsinspector (= 0.68.3)
+    - React-logger (= 0.68.3)
+    - React-perflogger (= 0.68.3)
+    - React-runtimeexecutor (= 0.68.3)
+  - React-jsi (0.68.3):
    - boost (= 1.76.0)
    - DoubleConversion
    - glog
    - RCT-Folly (= 2021.06.28.00-v2)
-    - React-jsi/Default (= 0.66.4)
-  - React-jsi/Default (0.66.4):
+    - React-jsi/Default (= 0.68.3)
+  - React-jsi/Default (0.68.3):
    - boost (= 1.76.0)
    - DoubleConversion
    - glog
    - RCT-Folly (= 2021.06.28.00-v2)
-  - React-jsiexecutor (0.66.4):
+  - React-jsiexecutor (0.68.3):
    - DoubleConversion
    - glog
    - RCT-Folly (= 2021.06.28.00-v2)
-    - React-cxxreact (= 0.66.4)
-    - React-jsi (= 0.66.4)
-    - React-perflogger (= 0.66.4)
-  - React-jsinspector (0.66.4)
-  - React-logger (0.66.4):
+    - React-cxxreact (= 0.68.3)
+    - React-jsi (= 0.68.3)
+    - React-perflogger (= 0.68.3)
+  - React-jsinspector (0.68.3)
+  - React-logger (0.68.3):
    - glog
  - react-native-menu (0.1.2):
    - React
  - react-native-slider (4.3.1):
    - React-Core
-  - React-perflogger (0.66.4)
-  - React-RCTActionSheet (0.66.4):
-    - React-Core/RCTActionSheetHeaders (= 0.66.4)
-  - React-RCTAnimation (0.66.4):
-    - FBReactNativeSpec (= 0.66.4)
+  - React-perflogger (0.68.3)
+  - React-RCTActionSheet (0.68.3):
+    - React-Core/RCTActionSheetHeaders (= 0.68.3)
+  - React-RCTAnimation (0.68.3):
    - RCT-Folly (= 2021.06.28.00-v2)
-    - RCTTypeSafety (= 0.66.4)
-    - React-Core/RCTAnimationHeaders (= 0.66.4)
-    - React-jsi (= 0.66.4)
-    - ReactCommon/turbomodule/core (= 0.66.4)
-  - React-RCTBlob (0.66.4):
-    - FBReactNativeSpec (= 0.66.4)
+    - RCTTypeSafety (= 0.68.3)
+    - React-Codegen (= 0.68.3)
+    - React-Core/RCTAnimationHeaders (= 0.68.3)
+    - React-jsi (= 0.68.3)
+    - ReactCommon/turbomodule/core (= 0.68.3)
+  - React-RCTBlob (0.68.3):
    - RCT-Folly (= 2021.06.28.00-v2)
-    - React-Core/RCTBlobHeaders (= 0.66.4)
-    - React-Core/RCTWebSocket (= 0.66.4)
-    - React-jsi (= 0.66.4)
-    - React-RCTNetwork (= 0.66.4)
-    - ReactCommon/turbomodule/core (= 0.66.4)
-  - React-RCTImage (0.66.4):
-    - FBReactNativeSpec (= 0.66.4)
+    - React-Codegen (= 0.68.3)
+    - React-Core/RCTBlobHeaders (= 0.68.3)
+    - React-Core/RCTWebSocket (= 0.68.3)
+    - React-jsi (= 0.68.3)
+    - React-RCTNetwork (= 0.68.3)
+    - ReactCommon/turbomodule/core (= 0.68.3)
+  - React-RCTImage (0.68.3):
    - RCT-Folly (= 2021.06.28.00-v2)
-    - RCTTypeSafety (= 0.66.4)
-    - React-Core/RCTImageHeaders (= 0.66.4)
-    - React-jsi (= 0.66.4)
-    - React-RCTNetwork (= 0.66.4)
-    - ReactCommon/turbomodule/core (= 0.66.4)
-  - React-RCTLinking (0.66.4):
-    - FBReactNativeSpec (= 0.66.4)
-    - React-Core/RCTLinkingHeaders (= 0.66.4)
-    - React-jsi (= 0.66.4)
-    - ReactCommon/turbomodule/core (= 0.66.4)
-  - React-RCTNetwork (0.66.4):
-    - FBReactNativeSpec (= 0.66.4)
+    - RCTTypeSafety (= 0.68.3)
+    - React-Codegen (= 0.68.3)
+    - React-Core/RCTImageHeaders (= 0.68.3)
+    - React-jsi (= 0.68.3)
+    - React-RCTNetwork (= 0.68.3)
+    - ReactCommon/turbomodule/core (= 0.68.3)
+  - React-RCTLinking (0.68.3):
+    - React-Codegen (= 0.68.3)
+    - React-Core/RCTLinkingHeaders (= 0.68.3)
+    - React-jsi (= 0.68.3)
+    - ReactCommon/turbomodule/core (= 0.68.3)
+  - React-RCTNetwork (0.68.3):
    - RCT-Folly (= 2021.06.28.00-v2)
-    - RCTTypeSafety (= 0.66.4)
-    - React-Core/RCTNetworkHeaders (= 0.66.4)
-    - React-jsi (= 0.66.4)
-    - ReactCommon/turbomodule/core (= 0.66.4)
-  - React-RCTSettings (0.66.4):
-    - FBReactNativeSpec (= 0.66.4)
+    - RCTTypeSafety (= 0.68.3)
+    - React-Codegen (= 0.68.3)
+    - React-Core/RCTNetworkHeaders (= 0.68.3)
+    - React-jsi (= 0.68.3)
+    - ReactCommon/turbomodule/core (= 0.68.3)
+  - React-RCTSettings (0.68.3):
    - RCT-Folly (= 2021.06.28.00-v2)
-    - RCTTypeSafety (= 0.66.4)
-    - React-Core/RCTSettingsHeaders (= 0.66.4)
-    - React-jsi (= 0.66.4)
-    - ReactCommon/turbomodule/core (= 0.66.4)
-  - React-RCTText (0.66.4):
-    - React-Core/RCTTextHeaders (= 0.66.4)
-  - React-RCTVibration (0.66.4):
-    - FBReactNativeSpec (= 0.66.4)
+    - RCTTypeSafety (= 0.68.3)
+    - React-Codegen (= 0.68.3)
+    - React-Core/RCTSettingsHeaders (= 0.68.3)
+    - React-jsi (= 0.68.3)
+    - ReactCommon/turbomodule/core (= 0.68.3)
+  - React-RCTText (0.68.3):
+    - React-Core/RCTTextHeaders (= 0.68.3)
+  - React-RCTVibration (0.68.3):
    - RCT-Folly (= 2021.06.28.00-v2)
-    - React-Core/RCTVibrationHeaders (= 0.66.4)
-    - React-jsi (= 0.66.4)
-    - ReactCommon/turbomodule/core (= 0.66.4)
-  - React-runtimeexecutor (0.66.4):
-    - React-jsi (= 0.66.4)
-  - ReactCommon/turbomodule/core (0.66.4):
+    - React-Codegen (= 0.68.3)
+    - React-Core/RCTVibrationHeaders (= 0.68.3)
+    - React-jsi (= 0.68.3)
+    - ReactCommon/turbomodule/core (= 0.68.3)
+  - React-runtimeexecutor (0.68.3):
+    - React-jsi (= 0.68.3)
+  - ReactCommon/turbomodule/core (0.68.3):
    - DoubleConversion
    - glog
    - RCT-Folly (= 2021.06.28.00-v2)
-    - React-callinvoker (= 0.66.4)
-    - React-Core (= 0.66.4)
-    - React-cxxreact (= 0.66.4)
-    - React-jsi (= 0.66.4)
-    - React-logger (= 0.66.4)
-    - React-perflogger (= 0.66.4)
-  - ReactTestApp-DevSupport (1.6.15):
+    - React-callinvoker (= 0.68.3)
+    - React-Core (= 0.68.3)
+    - React-cxxreact (= 0.68.3)
+    - React-jsi (= 0.68.3)
+    - React-logger (= 0.68.3)
+    - React-perflogger (= 0.68.3)
+  - ReactTestApp-DevSupport (1.6.19):
    - React-Core
    - React-jsi
  - ReactTestApp-Resources (1.0.0-dev)
-  - RNCPicker (2.4.4):
+  - RNCPicker (2.4.6):
    - React-Core
  - RNSVG (12.3.0):
    - React-Core
@ -465,6 +474,7 @@ DEPENDENCIES:
  - RCTTypeSafety (from `../../../node_modules/react-native/Libraries/TypeSafety`)
  - React (from `../../../node_modules/react-native/`)
  - React-callinvoker (from `../../../node_modules/react-native/ReactCommon/callinvoker`)
+  - React-Codegen (from `build/generated/ios`)
  - React-Core (from `../../../node_modules/react-native/`)
  - React-Core/DevSupport (from `../../../node_modules/react-native/`)
  - React-Core/RCTWebSocket (from `../../../node_modules/react-native/`)
@ -524,6 +534,8 @@ EXTERNAL SOURCES:
    :path: "../../../node_modules/react-native/"
  React-callinvoker:
    :path: "../../../node_modules/react-native/ReactCommon/callinvoker"
+  React-Codegen:
+    :path: build/generated/ios
  React-Core:
    :path: "../../../node_modules/react-native/"
  React-CoreModules:
@ -580,44 +592,45 @@ EXTERNAL SOURCES:
 SPEC CHECKSUMS:
  boost: a7c83b31436843459a1961bfd74b96033dc77234
  DoubleConversion: 831926d9b8bf8166fd87886c4abab286c2422662
-  FBLazyVector: e5569e42a1c79ca00521846c223173a57aca1fe1
-  FBReactNativeSpec: fe08c1cd7e2e205718d77ad14b34957cce949b58
+  FBLazyVector: 34f7420274737b6fcf2e2d9fd42641e66b4436a3
+  FBReactNativeSpec: 46f650441373ea75c83aec30f23378f6523245f2
  fmt: ff9d55029c625d3757ed641535fd4a75fedc7ce9
-  FRNAvatar: a2022c3a8e51e4fdf3e8b842ca13214d0b41312d
-  FRNDatePicker: 984a9eb80b9baa924597ca84be6ffdc379b37536
+  FRNAvatar: f018912184f0203208c497e001e7ba26b2521ea5
+  FRNDatePicker: 3681a15ca6fcdc66e6e184fafe963ba48b02a04b
  glog: 5337263514dd6f09803962437687240c5dc39aa4
  MicrosoftFluentUI: e30487dd18aba04beeed4caf1ce1988073f8b03a
  RCT-Folly: a21c126816d8025b547704b777a2ba552f3d9fa9
-  RCTRequired: 4bf86c70714490bca4bf2696148638284622644b
-  RCTTypeSafety: c475a7059eb77935fa53d2c17db299893f057d5d
-  React: f64af14e3f2c50f6f2c91a5fd250e4ff1b3c3459
-  React-callinvoker: b74e4ae80287780dcdf0cab262bcb581eeef56e7
-  React-Core: 3eb7432bad96ff1d25aebc1defbae013fee2fd0e
-  React-CoreModules: ad9e1fd5650e16666c57a08328df86fd7e480cb9
-  React-cxxreact: 02633ff398cf7e91a2c1e12590d323c4a4b8668a
-  React-jsi: 805c41a927d6499fb811772acb971467d9204633
-  React-jsiexecutor: 94ce921e1d8ce7023366873ec371f3441383b396
-  React-jsinspector: d0374f7509d407d2264168b6d0fad0b54e300b85
-  React-logger: 933f80c97c633ee8965d609876848148e3fef438
+  RCTRequired: b8caca023d386d43740dfb94c2cf68f695fa5e77
+  RCTTypeSafety: ec44ea1d6ad1e5cd6447b22159ff40c2ebbd23b1
+  React: 9f8c8afb9a9d61b7a1b01a1c6fb7f0d4f902988f
+  React-callinvoker: f813eee352cfd333208e8d67a72f584f5435769d
+  React-Codegen: 771562186fec8c7830897f97ca59de683abd3184
+  React-Core: 74670b4b715083e1c9003462f3f4fe32a70ba5c5
+  React-CoreModules: 34bd5b93e5322e60102a5ad78b992c882e558022
+  React-cxxreact: adc9fc6a9333ae779bd72effaf77173bd9f22bf7
+  React-jsi: ab91137ea7d92a86e48b6f15d3a5580bea471776
+  React-jsiexecutor: a5043e9e1e1bd13b80b58b228c6901b3721a4f54
+  React-jsinspector: 86e89b9f135787a2e8eb74b3fc00ec61e9a80ae1
+  React-logger: f790bd10f86b38012e108fb4b564023602702270
  react-native-menu: 9fe07f72e075b250295eeae25425490cc9608951
  react-native-slider: d3ae4270cf8a8cc45a69912db0cc42b151560d5a
-  React-perflogger: 93075d8931c32cd1fce8a98c15d2d5ccc4d891bd
-  React-RCTActionSheet: 7d3041e6761b4f3044a37079ddcb156575fb6d89
-  React-RCTAnimation: 743e88b55ac62511ae5c2e22803d4f503f2a3a13
-  React-RCTBlob: bee3a2f98fa7fc25c957c8643494244f74bea0a0
-  React-RCTImage: 19fc9e29b06cc38611c553494f8d3040bf78c24e
-  React-RCTLinking: dc799503979c8c711126d66328e7ce8f25c2848f
-  React-RCTNetwork: 417e4e34cf3c19eaa5fd4e9eb20180d662a799ce
-  React-RCTSettings: 4df89417265af26501a7e0e9192a34d3d9848dff
-  React-RCTText: f8a21c3499ab322326290fa9b701ae29aa093aa5
-  React-RCTVibration: e3ffca672dd3772536cb844274094b0e2c31b187
-  React-runtimeexecutor: dec32ee6f2e2a26e13e58152271535fadff5455a
-  ReactCommon: 57b69f6383eafcbd7da625bfa6003810332313c4
-  ReactTestApp-DevSupport: 32727c74767e723fac69e6281652b5184cff77a1
+  React-perflogger: fa15d1d29ff7557ee25ea48f7f59e65896fb3215
+  React-RCTActionSheet: e83515333352a3cc19c146e3c7a63a8a9269da8f
+  React-RCTAnimation: 8032daa2846e3db7ac28c4c5a207d0bfb5e1e3ad
+  React-RCTBlob: fe40e206cebcb4f552e0ecdac3ef81b3baf3cb37
+  React-RCTImage: dfc0df14cbfec1ec54fdd4700b8fe3bf8127dde2
+  React-RCTLinking: ac9f65f0c8db738a6156ae7640ba92494b4770a5
+  React-RCTNetwork: cf289a0386a1bd057e5eabb8563dfe5ce0af868c
+  React-RCTSettings: 7889cfcf6c7d5738f3cb8889557a38eeea2f04ff
+  React-RCTText: fd249e1f8406fb6e35cc77a2b9ff66a3477bf41a
+  React-RCTVibration: f41f116aad644973f24653effb3db3de64fa0314
+  React-runtimeexecutor: 8cdd80915ed6dabf2221a689f1f7ddb50ea5e9f3
+  ReactCommon: 5b1b43a7d81a1ac4eec85f7c4db3283a14a3b13d
+  ReactTestApp-DevSupport: dcff56cd656b2b47ac14e5908c03ce5d00a70004
  ReactTestApp-Resources: ecba662266ac5af3e30e1e3004c0fa8c0298b61a
-  RNCPicker: 0b65be85fe7954fbb2062ef079e3d1cde252d888
+  RNCPicker: 2f71e09c52ab6327e2c393213368ea0e5bfbcb65
  RNSVG: 302bfc9905bd8122f08966dc2ce2d07b7b52b9f8
-  Yoga: e7dc4e71caba6472ff48ad7d234389b91dadc280
+  Yoga: 2f6a78c58dcc2963bd8e34d96a4246d9dff2e3a7

 PODFILE CHECKSUM: 471bcded6dd3e64a1865525c60e6a27d0b4961a9

--- a/apps/fluent-tester/src/TestComponents/Spacing/SpacingTest.tsx
+++ b/apps/fluent-tester/src/TestComponents/Spacing/SpacingTest.tsx
@ -0,0 +1,63 @@
+import { createAppleTheme } from '@fluentui-react-native/apple-theme';
+import { Stack } from '@fluentui-react-native/stack';
+import * as React from 'react';
+import { Text, View } from 'react-native';
+import { stackStyle } from '../Common/styles';
+import { Test, TestSection, PlatformStatus } from '../Test';
+
+const BasicUsage: React.FunctionComponent = () => {
+  function spacingExample(tokenName: string, spacing?: number | string) {
+    return (
+      <View>
+        <Text>
+          {tokenName} ({spacing})
+        </Text>
+        <View style={{ flexDirection: 'row', alignItems: 'baseline' }}>
+          <Text style={{ padding: spacing, backgroundColor: '#f80' }}>First</Text>
+          <Text style={{ padding: spacing, backgroundColor: '#0af' }}>Second</Text>
+        </View>
+      </View>
+    );
+  }
+
+  const appleTheme = createAppleTheme().theme;
+
+  return (
+    <View>
+      <Stack style={stackStyle} gap={5}>
+        {spacingExample('None', appleTheme.spacing.none)}
+        {spacingExample('XXXS', appleTheme.spacing.xxxs)}
+        {spacingExample('XXS', appleTheme.spacing.xxs)}
+        {spacingExample('XS', appleTheme.spacing.xs)}
+        {spacingExample('S', appleTheme.spacing.s)}
+        {spacingExample('M', appleTheme.spacing.m)}
+        {spacingExample('L', appleTheme.spacing.l)}
+        {spacingExample('XL', appleTheme.spacing.xl)}
+        {spacingExample('XXL', appleTheme.spacing.xxl)}
+        {spacingExample('XXXL', appleTheme.spacing.xxxl)}
+        {spacingExample('XXXXL', appleTheme.spacing.xxxxl)}
+      </Stack>
+    </View>
+  );
+};
+
+export const SpacingTokensTest: React.FunctionComponent = () => {
+  const status: PlatformStatus = {
+    win32Status: 'Backlog',
+    uwpStatus: 'Backlog',
+    iosStatus: 'Experimental',
+    macosStatus: 'Backlog',
+    androidStatus: 'Backlog',
+  };
+
+  const description = 'This showcases the different spacing tokens available in Fluent UI.';
+
+  const spacingSections: TestSection[] = [
+    {
+      name: 'Basic Usage',
+      component: BasicUsage,
+    },
+  ];
+
+  return <Test name="Spacing Tokens Test" description={description} sections={spacingSections} status={status} />;
+};
--- a/apps/fluent-tester/src/TestComponents/Spacing/consts.ts
+++ b/apps/fluent-tester/src/TestComponents/Spacing/consts.ts
@ -0,0 +1,2 @@
+export const HOMEPAGE_SPACING_BUTTON = 'Homepage_Spacing_Button';
+export const SPACING_TESTPAGE = 'Spacing_TestPage';
--- a/apps/fluent-tester/src/TestComponents/Spacing/index.ts
+++ b/apps/fluent-tester/src/TestComponents/Spacing/index.ts
@ -0,0 +1,2 @@
+export * from './SpacingTest';
+export * from './consts';
--- a/apps/fluent-tester/src/testPages.ts
+++ b/apps/fluent-tester/src/testPages.ts
@ -25,6 +25,7 @@ import { PressableTest, HOMEPAGE_PRESSABLE_BUTTON } from './TestComponents/Press
 import { RadioGroupTest, HOMEPAGE_RADIOGROUP_BUTTON } from './TestComponents/RadioGroup';
 import { RadioGroupExperimentalTest, HOMEPAGE_RADIO_GROUP_EXPERIMENTAL_BUTTON } from './TestComponents/RadioGroupExperimental';
 import { SeparatorTest, HOMEPAGE_SEPARATOR_BUTTON } from './TestComponents/Separator';
+import { SpacingTokensTest, HOMEPAGE_SPACING_BUTTON } from './TestComponents/Spacing';
 import { ShadowTest, HOMEPAGE_SHADOW_BUTTON } from './TestComponents/Shadow';
 import { ShimmerTest, HOMEPAGE_SHIMMER_BUTTON } from './TestComponents/Shimmer';
 import { SvgTest, HOMEPAGE_SVG_BUTTON } from './TestComponents/Svg';
@ -194,6 +195,12 @@ export const tests: TestDescription[] = [
    testPage: HOMEPAGE_RADIO_GROUP_EXPERIMENTAL_BUTTON,
    platforms: ['android', 'ios', 'macos', 'web', 'win32'],
  },
+  {
+    name: 'Spacing Tokens',
+    component: SpacingTokensTest,
+    testPage: HOMEPAGE_SPACING_BUTTON,
+    platforms: ['ios'],
+  },
  {
    name: 'Separator',
    component: SeparatorTest,
--- a/change/@fluentui-react-native-apple-theme-32dd035e-bbac-46cc-a978-e93c062f94cc.json
+++ b/change/@fluentui-react-native-apple-theme-32dd035e-bbac-46cc-a978-e93c062f94cc.json
@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "Add new spacing tokens",
+  "packageName": "@fluentui-react-native/apple-theme",
+  "email": "adam.gleitman@gmail.com",
+  "dependentChangeType": "patch"
+}
--- a/change/@fluentui-react-native-tester-9c7195cd-2e81-4f1a-806d-467e5a334e2f.json
+++ b/change/@fluentui-react-native-tester-9c7195cd-2e81-4f1a-806d-467e5a334e2f.json
@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Add iOS test page for spacing tokens",
+  "packageName": "@fluentui-react-native/tester",
+  "email": "adam.gleitman@gmail.com",
+  "dependentChangeType": "patch"
+}
--- a/change/@fluentui-react-native-theme-types-ede6655e-1a38-45d3-accb-85e899155dc8.json
+++ b/change/@fluentui-react-native-theme-types-ede6655e-1a38-45d3-accb-85e899155dc8.json
@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "Add new spacing tokens",
+  "packageName": "@fluentui-react-native/theme-types",
+  "email": "adam.gleitman@gmail.com",
+  "dependentChangeType": "patch"
+}
--- a/packages/theming/apple-theme/src/appleTheme.ios.ts
+++ b/packages/theming/apple-theme/src/appleTheme.ios.ts
@ -1,10 +1,19 @@
+import globalTokens from '@fluentui-react-native/design-tokens-ios/light/tokens-global.json';
+
 import { Theme, Spacing } from '@fluentui-react-native/theme-types';
 import { paletteFromAppleColors } from './appleColors.ios';
 import { appleTypography } from './appleTypography.ios';
 import { iOSShadows } from './appleShadows.ios';

 function appleSpacing(): Spacing {
-  return { s2: '4px', s1: '8px', m: '16px', l1: '20px', l2: '32px' };
+  return {
+    s2: '4px',
+    s1: '8px',
+    l1: '20px',
+    l2: '32px',
+    // v2 types
+    ...globalTokens.spacing,
+  };
 }

 const appleComponents = {
--- a/packages/theming/theme-types/src/Theme.types.ts
+++ b/packages/theming/theme-types/src/Theme.types.ts
@ -6,12 +6,26 @@ import { PartialShadowDefinition, ThemeShadowDefinition } from './Shadow.types';

 type TwoLevelPartial<T> = { [K in keyof T]?: Partial<T[K]> };

+type SpacingValue = number | string;
+
 export interface Spacing {
  s2: string;
  s1: string;
-  m: string;
+  // m is now defined as a v2 type
  l1: string;
  l2: string;
+  // v2 types
+  none?: SpacingValue;
+  xxxs?: SpacingValue;
+  xxs?: SpacingValue;
+  xs?: SpacingValue;
+  s?: SpacingValue;
+  m?: SpacingValue;
+  l?: SpacingValue;
+  xl?: SpacingValue;
+  xxl?: SpacingValue;
+  xxxl?: SpacingValue;
+  xxxxl?: SpacingValue;
 }

 /**