Bump design-tokens packages to 0.53.0 (#3009)

* Bump package.jsons and yarn.lock to 0.51.0

* Update mapPipelineToTheme

* Change files

* Remove unintentional console.log statement

* Bump to 0.53.0

Author: lyzhan7

change/@fluentui-react-native-apple-theme-daf83b3c-5bf2-410a-853a-5b66a338cf07.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Bump design-tokens packages to 0.51.0",
+  "packageName": "@fluentui-react-native/apple-theme",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-native-theme-tokens-53ca3cd5-566b-4ada-91aa-0c9cca4afa37.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Bump design-tokens packages to 0.51.0",
+  "packageName": "@fluentui-react-native/theme-tokens",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-native-theming-utils-008deb18-efb1-4606-9599-1211c637873c.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Bump design-tokens packages to 0.51.0",
+  "packageName": "@fluentui-react-native/theming-utils",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-native-win32-theme-a3746c1a-f95a-4c56-87d4-5464c4145cfb.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Bump design-tokens packages to 0.51.0",
+  "packageName": "@fluentui-react-native/win32-theme",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

packages/theming/apple-theme/package.json

@@ -32,8 +32,8 @@
   },
   "dependencies": {
     "@fluentui-react-native/default-theme": ">=0.19.4 <1.0.0",
-    "@fluentui-react-native/design-tokens-ios": "^0.50.0",
-    "@fluentui-react-native/design-tokens-macos": "^0.50.0",
+    "@fluentui-react-native/design-tokens-ios": "^0.53.0",
+    "@fluentui-react-native/design-tokens-macos": "^0.53.0",
     "@fluentui-react-native/experimental-appearance-additions": "^0.5.5",
     "@fluentui-react-native/memo-cache": "^1.3.0",
     "@fluentui-react-native/theme": ">=0.9.0 <1.0.0",

packages/theming/theme-tokens/package.json

@@ -31,10 +31,10 @@
   "author": "",
   "license": "MIT",
   "dependencies": {
-    "@fluentui-react-native/design-tokens-android": "^0.50.0",
-    "@fluentui-react-native/design-tokens-ios": "^0.50.0",
-    "@fluentui-react-native/design-tokens-win32": "^0.50.0",
-    "@fluentui-react-native/design-tokens-windows": "^0.50.0",
+    "@fluentui-react-native/design-tokens-android": "^0.53.0",
+    "@fluentui-react-native/design-tokens-ios": "^0.53.0",
+    "@fluentui-react-native/design-tokens-win32": "^0.53.0",
+    "@fluentui-react-native/design-tokens-windows": "^0.53.0",
     "@fluentui-react-native/theme-types": ">=0.32.0 <1.0.0",
     "assert-never": "^1.2.1"
   },

packages/theming/theming-utils/package.json

@@ -30,8 +30,8 @@
     "@fluentui-react-native/tokens": ">=0.21.1 <1.0.0"
   },
   "devDependencies": {
-    "@fluentui-react-native/design-tokens-win32": "^0.50.0",
-    "@fluentui-react-native/design-tokens-windows": "^0.50.0",
+    "@fluentui-react-native/design-tokens-win32": "^0.53.0",
+    "@fluentui-react-native/design-tokens-windows": "^0.53.0",
     "@fluentui-react-native/eslint-config-rules": "^0.1.1",
     "@fluentui-react-native/scripts": "^0.1.1",
     "react": "18.2.0",

packages/theming/theming-utils/src/mapPipelineToTheme.android.ts

@@ -3,134 +3,134 @@ import type { AliasColorTokens, Variants, VariantValue } from '@fluentui-react-n
 // API that maps tokens coming from the android token pipeline to Theme color values.
 export function mapPipelineToTheme(pipelineOutput: any): AliasColorTokens {
   return {
-    neutralForeground1: pipelineOutput.neutralForeground1.fillColorRest,
-    neutralForeground1Hover: pipelineOutput.neutralForeground1.fillColorHover,
-    neutralForeground1Pressed: pipelineOutput.neutralForeground1.fillColorPressed,
-    neutralForeground1Selected: pipelineOutput.neutralForeground1.fillColorSelected,
-    neutralForeground2: pipelineOutput.neutralForeground2.fillColorRest,
-    neutralForeground2Hover: pipelineOutput.neutralForeground2.fillColorHover,
-    neutralForeground2Pressed: pipelineOutput.neutralForeground2.fillColorPressed,
-    neutralForeground2Selected: pipelineOutput.neutralForeground2.fillColorSelected,
-    neutralForeground2BrandHover: pipelineOutput.neutralForeground2.fillColorBrandHover,
-    neutralForeground2BrandPressed: pipelineOutput.neutralForeground2.fillColorBrandPressed,
-    neutralForeground2BrandSelected: pipelineOutput.neutralForeground2.fillColorBrandSelected,
-    neutralForeground3: pipelineOutput.neutralForeground3.fillColorRest,
-    neutralForeground3Hover: pipelineOutput.neutralForeground3.fillColorHover,
-    neutralForeground3Pressed: pipelineOutput.neutralForeground3.fillColorPressed,
-    neutralForeground3Selected: pipelineOutput.neutralForeground3.fillColorSelected,
-    neutralForeground3BrandHover: pipelineOutput.neutralForeground3.fillColorBrandHover,
-    neutralForeground3BrandPressed: pipelineOutput.neutralForeground3.fillColorBrandPressed,
-    neutralForeground3BrandSelected: pipelineOutput.neutralForeground3.fillColorBrandSelected,
-    neutralForegroundInverted: pipelineOutput.neutralForegroundInverted.fillColorRest,
-    neutralForegroundDisabled1: pipelineOutput.neutralForegroundDisabled1.fillColorRest,
-    neutralForegroundDisabled2: pipelineOutput.neutralForegroundDisabled2.fillColorRest,
-
-    neutralForegroundOnColor: pipelineOutput.neutralForegroundOnColor.fillColorRest,
-
-    neutralBackgroundLightStatic: pipelineOutput.neutralBackgroundLightStatic.fillColorRest,
-    neutralBackgroundLightStaticDisabled: pipelineOutput.neutralBackgroundLightStaticDisabled.fillColorRest,
-
-    neutralBackground1: pipelineOutput.neutralBackground1.fillColorRest,
-    neutralBackground1Hover: pipelineOutput.neutralBackground1.fillColorHover,
-    neutralBackground1Pressed: pipelineOutput.neutralBackground1.fillColorPressed,
-    neutralBackground1Selected: pipelineOutput.neutralBackground1.fillColorSelected,
-    neutralBackground2: pipelineOutput.neutralBackground2.fillColorRest,
-    neutralBackground2Hover: pipelineOutput.neutralBackground2.fillColorHover,
-    neutralBackground2Pressed: pipelineOutput.neutralBackground2.fillColorPressed,
-    neutralBackground2Selected: pipelineOutput.neutralBackground2.fillColorSelected,
-
-    neutralBackground3: pipelineOutput.neutralBackground3.fillColorRest,
-    neutralBackground3Hover: pipelineOutput.neutralBackground3.fillColorHover,
-    neutralBackground3Pressed: pipelineOutput.neutralBackground3.fillColorPressed,
-    neutralBackground3Selected: pipelineOutput.neutralBackground3.fillColorSelected,
-
-    neutralBackground4: pipelineOutput.neutralBackground4.fillColorRest,
-    neutralBackground4Hover: pipelineOutput.neutralBackground4.fillColorHover,
-    neutralBackground4Pressed: pipelineOutput.neutralBackground4.fillColorPressed,
-    neutralBackground4Selected: pipelineOutput.neutralBackground4.fillColorSelected,
-
-    neutralBackground5: pipelineOutput.neutralBackground5.fillColorRest,
-    neutralBackground5Hover: pipelineOutput.neutralBackground5.fillColorHover,
-    neutralBackground5Pressed: pipelineOutput.neutralBackground5.fillColorPressed,
-    neutralBackground5Selected: pipelineOutput.neutralBackground5.fillColorSelected,
-
-    neutralBackground6: pipelineOutput.neutralBackground6.fillColorRest,
-    neutralBackgroundInverted: pipelineOutput.neutralBackgroundInverted.fillColorRest,
-    neutralBackgroundDisabled: pipelineOutput.neutralBackgroundDisabled.fillColorRest,
-    neutralBackgroundCanvas: pipelineOutput.neutralBackgroundCanvas.fillColorRest,
-    neutralBackgroundDarkStatic: pipelineOutput.neutralBackgroundDarkStatic.fillColorRest,
-
-    neutralStencil1: pipelineOutput.neutralStencil1.fillColorRest,
-    neutralStencil2: pipelineOutput.neutralStencil2.fillColorRest,
-
-    neutralStrokeAccessible: pipelineOutput.neutralStrokeAccessible.strokeColorRest,
-    neutralStrokeAccessibleHover: pipelineOutput.neutralStrokeAccessible.strokeColorHover,
-    neutralStrokeAccessiblePressed: pipelineOutput.neutralStrokeAccessible.strokeColorPressed,
-    neutralStrokeAccessibleSelected: pipelineOutput.neutralStrokeAccessible.strokeColorSelected,
-
-    neutralStroke1: pipelineOutput.neutralStroke1.strokeColorRest,
-    neutralStroke1Hover: pipelineOutput.neutralStroke1.strokeColorHover,
-    neutralStrokeFocus1: pipelineOutput.neutralStrokeFocus1.strokeColorRest,
-    neutralStrokeFocus2: pipelineOutput.neutralStrokeFocus2.strokeColorRest,
-    neutralStroke1Pressed: pipelineOutput.neutralStroke1.strokeColorPressed,
-    neutralStroke1Selected: pipelineOutput.neutralStroke1.strokeColorSelected,
-
-    neutralStroke2: pipelineOutput.neutralStroke2.strokeColorRest,
-    neutralStrokeDisabled: pipelineOutput.neutralStrokeDisabled.strokeColorRest,
+    neutralForeground1: pipelineOutput.neutralForeground1.rest,
+    neutralForeground1Hover: pipelineOutput.neutralForeground1.hover,
+    neutralForeground1Pressed: pipelineOutput.neutralForeground1.pressed,
+    neutralForeground1Selected: pipelineOutput.neutralForeground1.selected,
+    neutralForeground2: pipelineOutput.neutralForeground2.rest,
+    neutralForeground2Hover: pipelineOutput.neutralForeground2.hover,
+    neutralForeground2Pressed: pipelineOutput.neutralForeground2.pressed,
+    neutralForeground2Selected: pipelineOutput.neutralForeground2.selected,
+    neutralForeground2BrandHover: pipelineOutput.neutralForeground2.brandHover,
+    neutralForeground2BrandPressed: pipelineOutput.neutralForeground2.brandPressed,
+    neutralForeground2BrandSelected: pipelineOutput.neutralForeground2.brandSelected,
+    neutralForeground3: pipelineOutput.neutralForeground3.rest,
+    neutralForeground3Hover: pipelineOutput.neutralForeground3.hover,
+    neutralForeground3Pressed: pipelineOutput.neutralForeground3.pressed,
+    neutralForeground3Selected: pipelineOutput.neutralForeground3.selected,
+    neutralForeground3BrandHover: pipelineOutput.neutralForeground3.brandHover,
+    neutralForeground3BrandPressed: pipelineOutput.neutralForeground3.brandPressed,
+    neutralForeground3BrandSelected: pipelineOutput.neutralForeground3.brandSelected,
+    neutralForegroundInverted: pipelineOutput.neutralForegroundInverted.rest,
+    neutralForegroundDisabled1: pipelineOutput.neutralForegroundDisabled1.rest,
+    neutralForegroundDisabled2: pipelineOutput.neutralForegroundDisabled2.rest,
+
+    neutralForegroundOnColor: pipelineOutput.neutralForegroundOnColor.rest,
+
+    neutralBackgroundLightStatic: pipelineOutput.neutralBackgroundLightStatic.rest,
+    neutralBackgroundLightStaticDisabled: pipelineOutput.neutralBackgroundLightStaticDisabled.rest,
+
+    neutralBackground1: pipelineOutput.neutralBackground1.rest,
+    neutralBackground1Hover: pipelineOutput.neutralBackground1.hover,
+    neutralBackground1Pressed: pipelineOutput.neutralBackground1.pressed,
+    neutralBackground1Selected: pipelineOutput.neutralBackground1.selected,
+    neutralBackground2: pipelineOutput.neutralBackground2.rest,
+    neutralBackground2Hover: pipelineOutput.neutralBackground2.hover,
+    neutralBackground2Pressed: pipelineOutput.neutralBackground2.pressed,
+    neutralBackground2Selected: pipelineOutput.neutralBackground2.selected,
+
+    neutralBackground3: pipelineOutput.neutralBackground3.rest,
+    neutralBackground3Hover: pipelineOutput.neutralBackground3.hover,
+    neutralBackground3Pressed: pipelineOutput.neutralBackground3.pressed,
+    neutralBackground3Selected: pipelineOutput.neutralBackground3.selected,
+
+    neutralBackground4: pipelineOutput.neutralBackground4.rest,
+    neutralBackground4Hover: pipelineOutput.neutralBackground4.hover,
+    neutralBackground4Pressed: pipelineOutput.neutralBackground4.pressed,
+    neutralBackground4Selected: pipelineOutput.neutralBackground4.selected,
+
+    neutralBackground5: pipelineOutput.neutralBackground5.rest,
+    neutralBackground5Hover: pipelineOutput.neutralBackground5.hover,
+    neutralBackground5Pressed: pipelineOutput.neutralBackground5.pressed,
+    neutralBackground5Selected: pipelineOutput.neutralBackground5.selected,
+
+    neutralBackground6: pipelineOutput.neutralBackground6.rest,
+    neutralBackgroundInverted: pipelineOutput.neutralBackgroundInverted.rest,
+    neutralBackgroundDisabled: pipelineOutput.neutralBackgroundDisabled.rest,
+    neutralBackgroundCanvas: pipelineOutput.neutralBackgroundCanvas.rest,
+    neutralBackgroundDarkStatic: pipelineOutput.neutralBackgroundDarkStatic.rest,
+
+    neutralStencil1: pipelineOutput.neutralStencil1.rest,
+    neutralStencil2: pipelineOutput.neutralStencil2.rest,
+
+    neutralStrokeAccessible: pipelineOutput.neutralStrokeAccessible.rest,
+    neutralStrokeAccessibleHover: pipelineOutput.neutralStrokeAccessible.hover,
+    neutralStrokeAccessiblePressed: pipelineOutput.neutralStrokeAccessible.pressed,
+    neutralStrokeAccessibleSelected: pipelineOutput.neutralStrokeAccessible.selected,
+
+    neutralStroke1: pipelineOutput.neutralStroke1.rest,
+    neutralStroke1Hover: pipelineOutput.neutralStroke1.hover,
+    neutralStrokeFocus1: pipelineOutput.neutralStrokeFocus1.rest,
+    neutralStrokeFocus2: pipelineOutput.neutralStrokeFocus2.rest,
+    neutralStroke1Pressed: pipelineOutput.neutralStroke1.pressed,
+    neutralStroke1Selected: pipelineOutput.neutralStroke1.selected,
+
+    neutralStroke2: pipelineOutput.neutralStroke2.rest,
+    neutralStrokeDisabled: pipelineOutput.neutralStrokeDisabled.rest,
 
     //Brand tokens.
-    brandBackground: pipelineOutput.brandBackground1.fillColorRest,
-    brandBackgroundPressed: pipelineOutput.brandBackground1.fillColorPressed,
-    brandBackgroundSelected: pipelineOutput.brandBackground1.fillColorSelected,
-    brandBackgroundDisabled: pipelineOutput.brandBackgroundDisabled.fillColorRest,
-    brandBackground2: pipelineOutput.brandBackground2?.fillColorRest,
-    brandBackground2Pressed: pipelineOutput.brandBackground2?.fillColorPressed,
-    brandBackground2Selected: pipelineOutput.brandBackground2?.fillColorSelected,
+    brandBackground: pipelineOutput.brandBackground1.rest,
+    brandBackgroundPressed: pipelineOutput.brandBackground1.pressed,
+    brandBackgroundSelected: pipelineOutput.brandBackground1.selected,
+    brandBackgroundDisabled: pipelineOutput.brandBackgroundDisabled.rest,
+    brandBackground2: pipelineOutput.brandBackground2?.rest,
+    brandBackground2Pressed: pipelineOutput.brandBackground2?.pressed,
+    brandBackground2Selected: pipelineOutput.brandBackground2?.selected,
 
-    brandBackground3: pipelineOutput.brandBackground3?.fillColorRest,
-    brandBackgroundTint: pipelineOutput.brandBackgroundTint.fillColorRest,
-    brandBackgroundInverted: pipelineOutput.brandBackgroundInverted.fillColorRest,
+    brandBackground3: pipelineOutput.brandBackground3?.rest,
+    brandBackgroundTint: pipelineOutput.brandBackgroundTint.rest,
+    brandBackgroundInverted: pipelineOutput.brandBackgroundInverted.rest,
 
-    brandBackgroundInvertedDisabled: pipelineOutput.brandBackgroundInvertedDisabled.fillColorRest,
+    brandBackgroundInvertedDisabled: pipelineOutput.brandBackgroundInvertedDisabled.rest,
 
-    brandForeground1: pipelineOutput.brandForeground1.fillColorRest,
-    brandForeground1Pressed: pipelineOutput.brandForeground1.fillColorPressed,
-    brandForeground1Selected: pipelineOutput.brandForeground1.fillColorSelected,
+    brandForeground1: pipelineOutput.brandForeground1.rest,
+    brandForeground1Pressed: pipelineOutput.brandForeground1.pressed,
+    brandForeground1Selected: pipelineOutput.brandForeground1.selected,
 
-    brandForegroundTint: pipelineOutput.brandForegroundTint.fillColorRest,
-    brandForegroundDisabled1: pipelineOutput.brandForegroundDisabled1.fillColorRest,
-    brandForegroundDisabled2: pipelineOutput.brandForegroundDisabled2.fillColorRest,
+    brandForegroundTint: pipelineOutput.brandForegroundTint.rest,
+    brandForegroundDisabled1: pipelineOutput.brandForegroundDisabled1.rest,
+    brandForegroundDisabled2: pipelineOutput.brandForegroundDisabled2.rest,
 
-    brandStroke1: pipelineOutput.brandStroke1.strokeColorRest,
-    brandStroke1Pressed: pipelineOutput.brandStroke1.strokeColorPressed,
-    brandStroke1Selected: pipelineOutput.brandStroke1.strokeColorSelected,
+    brandStroke1: pipelineOutput.brandStroke1.rest,
+    brandStroke1Pressed: pipelineOutput.brandStroke1.pressed,
+    brandStroke1Selected: pipelineOutput.brandStroke1.selected,
 
     /// Error, status, and presence tokens
 
-    dangerBackground1: pipelineOutput.dangerBackground1.fillColorRest,
-    dangerBackground2: pipelineOutput.dangerBackground2.fillColorRest,
-    dangerForeground1: pipelineOutput.dangerForeground1.fillColorRest,
-    dangerForeground2: pipelineOutput.dangerForeground2.fillColorRest,
-
-    successBackground1: pipelineOutput.successBackground1.fillColorRest,
-    successBackground2: pipelineOutput.successBackground2.fillColorRest,
-    successForeground1: pipelineOutput.successForeground1.fillColorRest,
-    successForeground2: pipelineOutput.successForeground2.fillColorRest,
-
-    warningBackground1: pipelineOutput.warningBackground1.fillColorRest,
-    warningBackground2: pipelineOutput.warningBackground2.fillColorRest,
-    warningForeground1: pipelineOutput.warningForeground1.fillColorRest,
-    warningForeground2: pipelineOutput.warningForeground2.fillColorRest,
-
-    severeBackground1: pipelineOutput.severeBackground1.fillColorRest,
-    severeBackground2: pipelineOutput.severeBackground2.fillColorRest,
-    severeForeground1: pipelineOutput.severeForeground1.fillColorRest,
-    severeForeground2: pipelineOutput.severeForeground1.fillColorRest,
-
-    presenceAway: pipelineOutput.presenceAway.fillColorRest,
-    presenceDnd: pipelineOutput.presenceDnd.fillColorRest,
-    presenceAvailable: pipelineOutput.presenceAvailable.fillColorRest,
-    presenceOof: pipelineOutput.presenceOof.fillColorRest,
+    dangerBackground1: pipelineOutput.dangerBackground1.rest,
+    dangerBackground2: pipelineOutput.dangerBackground2.rest,
+    dangerForeground1: pipelineOutput.dangerForeground1.rest,
+    dangerForeground2: pipelineOutput.dangerForeground2.rest,
+
+    successBackground1: pipelineOutput.successBackground1.rest,
+    successBackground2: pipelineOutput.successBackground2.rest,
+    successForeground1: pipelineOutput.successForeground1.rest,
+    successForeground2: pipelineOutput.successForeground2.rest,
+
+    warningBackground1: pipelineOutput.warningBackground1.rest,
+    warningBackground2: pipelineOutput.warningBackground2.rest,
+    warningForeground1: pipelineOutput.warningForeground1.rest,
+    warningForeground2: pipelineOutput.warningForeground2.rest,
+
+    severeBackground1: pipelineOutput.severeBackground1.rest,
+    severeBackground2: pipelineOutput.severeBackground2.rest,
+    severeForeground1: pipelineOutput.severeForeground1.rest,
+    severeForeground2: pipelineOutput.severeForeground1.rest,
+
+    presenceAway: pipelineOutput.presenceAway.rest,
+    presenceDnd: pipelineOutput.presenceDnd.rest,
+    presenceAvailable: pipelineOutput.presenceAvailable.rest,
+    presenceOof: pipelineOutput.presenceOof.rest,
   };
 }