Bump token packages to 0.31.0 (#2318)

* Bump all design-tokens packages to 0.29.0

* Update shadow naming

* Update font size naming (except Text)

* Update font size naming for Text

* Update naming for the color grey

* More shadow token naming updates

* Update line height naming + more font size naming updates

* Update stroke width token naming

* Forgot to save a color grey naming update

* More shadow renaming updates: missing .global, update comments

* Update snapshots affected by spacing rename

* Another shadow rename related change

* Split defaultColors.ts to fix brand color issues

* Update snapshots after previous commit

* Change files

* Bump design tokens packages from 0.29.0 to 0.31.0

* Update snapshots - no more undefined properties

 All changes are related to the updated brand color ramp, there should be no other changes.

* Update corner radius tokens (the obvious ones - everything except large/extraLarge)

corner.radius.none -> corner.radiusNone
corner.radius.small -> corner.radius20
corner.radius.medium -> corner.radius40
corner.radius.circle -> corner.radiusCircular

* Update corner radius token naming (large/extra large), all in AvatarTokens

Used large -> 60 and extraLarge -> 80, based on the old win32 values.
The old values for mobile were large -> 80 and extraLarge -> 120

* Change files

* Forgot to save apple-theme/package.json

* This line got deleted by accident

* Update brand color ramp mapping

* Just grouping the colors we want to deprecate together, no changes to token definitions

* Update snapshots after updating brand color mapping

change/@fluentui-react-native-apple-theme-a8cb917c-87e5-4321-a390-557f7166dce7.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Bump all design-tokens packages to 0.29.0",
+  "packageName": "@fluentui-react-native/apple-theme",
+  "email": "78454019+lyzhan7@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-native-avatar-690f1b7f-b86f-47b7-974b-e249c12830d0.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Bump all design-tokens packages to 0.29.0",
+  "packageName": "@fluentui-react-native/avatar",
+  "email": "78454019+lyzhan7@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-native-badge-ae5b76d0-7b73-438e-98d1-88111b61dc70.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Bump all design-tokens packages to 0.29.0",
+  "packageName": "@fluentui-react-native/badge",
+  "email": "78454019+lyzhan7@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-native-button-1989496a-41d0-4455-98a9-014fe2db4c2b.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Bump all design-tokens packages to 0.29.0",
+  "packageName": "@fluentui-react-native/button",
+  "email": "78454019+lyzhan7@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-native-checkbox-0c1beb26-6f7c-4430-983b-970e159e5c46.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Bump all design-tokens packages to 0.29.0",
+  "packageName": "@fluentui-react-native/checkbox",
+  "email": "78454019+lyzhan7@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-native-default-theme-a913db7c-d9d8-44ee-bbd7-3c67b44a1a78.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Bump all design-tokens packages to 0.29.0",
+  "packageName": "@fluentui-react-native/default-theme",
+  "email": "78454019+lyzhan7@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-native-dropdown-1788b234-e5bd-4bb1-af3b-e1c2c72bd945.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Bump design tokens packages from 0.29.0 to 0.31.0",
+  "packageName": "@fluentui-react-native/dropdown",
+  "email": "78454019+lyzhan7@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-native-experimental-menu-button-bb9c2010-9fa5-4a37-aeee-c92dddd5bd57.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Bump all design-tokens packages to 0.29.0",
+  "packageName": "@fluentui-react-native/experimental-menu-button",
+  "email": "78454019+lyzhan7@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-native-experimental-radio-group-ecbab668-1263-4305-adf6-0cd2a0610d01.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Bump all design-tokens packages to 0.29.0",
+  "packageName": "@fluentui-react-native/experimental-radio-group",
+  "email": "78454019+lyzhan7@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-native-link-3309cce0-5501-4ac4-8741-4c8ab926a05b.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Bump all design-tokens packages to 0.29.0",
+  "packageName": "@fluentui-react-native/link",
+  "email": "78454019+lyzhan7@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-native-menu-button-894f100a-fe28-42bf-859c-b6942da46d51.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Bump all design-tokens packages to 0.29.0",
+  "packageName": "@fluentui-react-native/menu-button",
+  "email": "78454019+lyzhan7@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-native-menu-ccf94936-f5da-47dc-9ce8-051118bb3d9b.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Bump all design-tokens packages to 0.29.0",
+  "packageName": "@fluentui-react-native/menu",
+  "email": "78454019+lyzhan7@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-native-notification-15b81463-1ab9-446d-b73b-01f9dd6b6ef5.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Bump all design-tokens packages to 0.29.0",
+  "packageName": "@fluentui-react-native/notification",
+  "email": "78454019+lyzhan7@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-native-text-161bac84-58c2-4ff0-91d4-9e4fc49ecec8.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Bump all design-tokens packages to 0.29.0",
+  "packageName": "@fluentui-react-native/text",
+  "email": "78454019+lyzhan7@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-native-theme-tokens-11e7f1d3-3e4a-46b7-a4c8-5c4dbd970ec2.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Bump all design-tokens packages to 0.29.0",
+  "packageName": "@fluentui-react-native/theme-tokens",
+  "email": "78454019+lyzhan7@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-native-theming-utils-6e8d88e0-feb1-41a7-beb5-a8708b02f722.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Bump all design-tokens packages to 0.29.0",
+  "packageName": "@fluentui-react-native/theming-utils",
+  "email": "78454019+lyzhan7@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-native-win32-theme-bd431773-a8a5-4064-a241-be49c8725d96.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Bump all design-tokens packages to 0.29.0",
+  "packageName": "@fluentui-react-native/win32-theme",
+  "email": "78454019+lyzhan7@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

docs/pages/Theming/Tokens/Overrides.md

@@ -11,7 +11,7 @@ For example, the following will not result in any changes to FURN components:
 ```ts
 import { globalTokens } from '@fluentui-react-native/theme-tokens';
 
-globalTokens.corner.radius.small = 5;
+globalTokens.corner.radius20 = 5;
 export const updatedGlobalTokens = globalTokens;
 ```
 

packages/components/Avatar/src/Avatar.styling.ts

@@ -178,9 +178,9 @@ function getRingConfig(tokens: AvatarTokens): any {
   const innerGap = tokens.ringInnerGap || ringThickness;
 
   const strokeSize = {
-    small: globalTokens.stroke.width.thick,
+    small: globalTokens.stroke.width20,
-    medium: globalTokens.stroke.width.thicker,
+    medium: globalTokens.stroke.width30,
-    large: globalTokens.stroke.width.thickest,
+    large: globalTokens.stroke.width40,
   };
   if (ringThickness) {
     return {

packages/components/Avatar/src/AvatarTokens.ts

@@ -10,7 +10,7 @@ export const defaultAvatarTokens: TokenSettings<AvatarTokens, Theme> = (t: Theme
     avatarOpacity: 1,
     fontFamily: t.typography.families.primary,
     fontWeight: globalTokens.font.weight.semibold,
-    fontSize: globalTokens.font.size[200],
+    fontSize: globalTokens.font.size200,
     size: 24,
     iconSize: 16,
     iconColor: t.colors.neutralForeground3,
@@ -18,10 +18,10 @@ export const defaultAvatarTokens: TokenSettings<AvatarTokens, Theme> = (t: Theme
     borderColor: t.colors.neutralStroke1,
     borderWidth: t.host.appearance === 'highContrast' ? 1 : 0,
     circular: {
-      borderRadius: globalTokens.corner.radius.circle,
+      borderRadius: globalTokens.corner.radiusCircular,
     },
     square: {
-      borderRadius: globalTokens.corner.radius.medium,
+      borderRadius: globalTokens.corner.radius40,
     },
     inactive: {
       avatarOpacity: 0.8,
@@ -30,18 +30,18 @@ export const defaultAvatarTokens: TokenSettings<AvatarTokens, Theme> = (t: Theme
       size: 20,
       badgeSize: 'tiny',
       iconSize: 16,
-      fontSize: globalTokens.font.size[100],
+      fontSize: globalTokens.font.size100,
       square: {
-        borderRadius: globalTokens.corner.radius.small,
+        borderRadius: globalTokens.corner.radius20,
       },
     },
     size24: {
       size: 24,
       badgeSize: 'tiny',
       iconSize: 16,
-      fontSize: globalTokens.font.size[100],
+      fontSize: globalTokens.font.size100,
       square: {
-        borderRadius: globalTokens.corner.radius.small,
+        borderRadius: globalTokens.corner.radius20,
       },
     },
     size28: {
@@ -49,13 +49,13 @@ export const defaultAvatarTokens: TokenSettings<AvatarTokens, Theme> = (t: Theme
       badgeSize: 'extraSmall',
       iconSize: 20,
       fontWeight: globalTokens.font.weight.semibold,
-      fontSize: globalTokens.font.size[100],
+      fontSize: globalTokens.font.size100,
     },
     size32: {
       size: 32,
       badgeSize: 'extraSmall',
       iconSize: 20,
-      fontSize: globalTokens.font.size[100],
+      fontSize: globalTokens.font.size100,
     },
     size36: {
       size: 36,
@@ -76,27 +76,27 @@ export const defaultAvatarTokens: TokenSettings<AvatarTokens, Theme> = (t: Theme
       size: 56,
       badgeSize: 'medium',
       iconSize: 28,
-      fontSize: globalTokens.font.size[400],
+      fontSize: globalTokens.font.size400,
       square: {
-        borderRadius: globalTokens.corner.radius.large,
+        borderRadius: globalTokens.corner.radius60,
       },
     },
     size64: {
       size: 64,
       badgeSize: 'large',
       iconSize: 32,
-      fontSize: globalTokens.font.size[500],
+      fontSize: globalTokens.font.size500,
       square: {
-        borderRadius: globalTokens.corner.radius.large,
+        borderRadius: globalTokens.corner.radius60,
       },
     },
     size72: {
       size: 72,
       badgeSize: 'large',
       iconSize: 32,
-      fontSize: globalTokens.font.size[500],
+      fontSize: globalTokens.font.size500,
       square: {
-        borderRadius: globalTokens.corner.radius.large,
+        borderRadius: globalTokens.corner.radius60,
       },
     },
     size96: {
@@ -104,9 +104,9 @@ export const defaultAvatarTokens: TokenSettings<AvatarTokens, Theme> = (t: Theme
       badgeSize: 'extraLarge',
       iconSize: 48,
       fontWeight: globalTokens.font.weight.regular,
-      fontSize: globalTokens.font.size[700],
+      fontSize: globalTokens.font.size700,
       square: {
-        borderRadius: globalTokens.corner.radius.extraLarge,
+        borderRadius: globalTokens.corner.radius80,
       },
     },
     size120: {
@@ -114,9 +114,9 @@ export const defaultAvatarTokens: TokenSettings<AvatarTokens, Theme> = (t: Theme
       badgeSize: 'extraLarge',
       iconSize: 48,
       fontWeight: globalTokens.font.weight.regular,
-      fontSize: globalTokens.font.size[900],
+      fontSize: globalTokens.font.size900,
       square: {
-        borderRadius: globalTokens.corner.radius.extraLarge,
+        borderRadius: globalTokens.corner.radius80,
       },
     },
     neutral: {

packages/components/Avatar/src/AvatarTokens.win32.ts

@@ -11,7 +11,7 @@ export const defaultAvatarTokens: TokenSettings<AvatarTokens, Theme> = (t: Theme
     avatarOpacity: 1,
     fontFamily: t.typography.families.primary,
     fontWeight: globalTokens.font.weight.semibold,
-    fontSize: globalTokens.font.size[200],
+    fontSize: globalTokens.font.size200,
     size: 24,
     iconSize: 16,
     iconColor: t.colors.neutralForeground3,
@@ -19,10 +19,10 @@ export const defaultAvatarTokens: TokenSettings<AvatarTokens, Theme> = (t: Theme
     borderColor: t.colors.neutralStroke1,
     borderWidth: t.name === 'HighContrast' ? 1 : 0,
     circular: {
-      borderRadius: globalTokens.corner.radius.circle,
+      borderRadius: globalTokens.corner.radiusCircular,
     },
     square: {
-      borderRadius: globalTokens.corner.radius.medium,
+      borderRadius: globalTokens.corner.radius40,
     },
     inactive: {
       avatarOpacity: 0.8,
@@ -31,18 +31,18 @@ export const defaultAvatarTokens: TokenSettings<AvatarTokens, Theme> = (t: Theme
       size: 20,
       badgeSize: 'tiny',
       iconSize: 16,
-      fontSize: globalTokens.font.size[100],
+      fontSize: globalTokens.font.size100,
       square: {
-        borderRadius: globalTokens.corner.radius.small,
+        borderRadius: globalTokens.corner.radius20,
       },
     },
     size24: {
       size: 24,
       badgeSize: 'tiny',
       iconSize: 16,
-      fontSize: globalTokens.font.size[100],
+      fontSize: globalTokens.font.size100,
       square: {
-        borderRadius: globalTokens.corner.radius.small,
+        borderRadius: globalTokens.corner.radius20,
       },
     },
     size28: {
@@ -50,13 +50,13 @@ export const defaultAvatarTokens: TokenSettings<AvatarTokens, Theme> = (t: Theme
       badgeSize: 'extraSmall',
       iconSize: 20,
       fontWeight: globalTokens.font.weight.semibold,
-      fontSize: globalTokens.font.size[100],
+      fontSize: globalTokens.font.size100,
     },
     size32: {
       size: 32,
       badgeSize: 'extraSmall',
       iconSize: 20,
-      fontSize: globalTokens.font.size[100],
+      fontSize: globalTokens.font.size100,
     },
     size36: {
       size: 36,
@@ -77,27 +77,27 @@ export const defaultAvatarTokens: TokenSettings<AvatarTokens, Theme> = (t: Theme
       size: 56,
       badgeSize: 'medium',
       iconSize: 28,
-      fontSize: globalTokens.font.size[400],
+      fontSize: globalTokens.font.size400,
       square: {
-        borderRadius: globalTokens.corner.radius.large,
+        borderRadius: globalTokens.corner.radius60,
       },
     },
     size64: {
       size: 64,
       badgeSize: 'large',
       iconSize: 32,
-      fontSize: globalTokens.font.size[500],
+      fontSize: globalTokens.font.size500,
       square: {
-        borderRadius: globalTokens.corner.radius.large,
+        borderRadius: globalTokens.corner.radius60,
       },
     },
     size72: {
       size: 72,
       badgeSize: 'large',
       iconSize: 32,
-      fontSize: globalTokens.font.size[500],
+      fontSize: globalTokens.font.size500,
       square: {
-        borderRadius: globalTokens.corner.radius.large,
+        borderRadius: globalTokens.corner.radius60,
       },
     },
     size96: {
@@ -105,9 +105,9 @@ export const defaultAvatarTokens: TokenSettings<AvatarTokens, Theme> = (t: Theme
       badgeSize: 'extraLarge',
       iconSize: 48,
       fontWeight: globalTokens.font.weight.regular,
-      fontSize: globalTokens.font.size[700],
+      fontSize: globalTokens.font.size700,
       square: {
-        borderRadius: globalTokens.corner.radius.extraLarge,
+        borderRadius: globalTokens.corner.radius80,
       },
     },
     size120: {
@@ -115,9 +115,9 @@ export const defaultAvatarTokens: TokenSettings<AvatarTokens, Theme> = (t: Theme
       badgeSize: 'extraLarge',
       iconSize: 48,
       fontWeight: globalTokens.font.weight.regular,
-      fontSize: globalTokens.font.size[900],
+      fontSize: globalTokens.font.size900,
       square: {
-        borderRadius: globalTokens.corner.radius.extraLarge,
+        borderRadius: globalTokens.corner.radius80,
       },
     },
     neutral: {

packages/components/Badge/src/BadgeColorTokens.ts

@@ -124,7 +124,7 @@ export const defaultBadgeColorTokens: TokenSettings<BadgeTokens> = (t: Theme) =>
         ...getFilledColorProps(
           {
             backgroundColor: globalTokens.color.yellow.primary,
-            color: globalTokens.color.grey[14], // It should be neutralForegroundStatic1. It's hardcoded because the token doesn't exist right now
+            color: globalTokens.color.grey14, // It should be neutralForegroundStatic1. It's hardcoded because the token doesn't exist right now
           },
           t,
         ),
@@ -209,9 +209,9 @@ export const defaultBadgeColorTokens: TokenSettings<BadgeTokens> = (t: Theme) =>
             backgroundColor: t.colors.neutralForeground3,
             color: t.colors.neutralBackground1,
             borderColor: t.colors.neutralStrokeAccessible,
-            backgroundColorDark: globalTokens.color.grey[68],
+            backgroundColorDark: globalTokens.color.grey68,
-            colorDark: globalTokens.color.grey[16],
+            colorDark: globalTokens.color.grey16,
-            borderColorDark: globalTokens.color.grey[68],
+            borderColorDark: globalTokens.color.grey68,
           },
           t,
         ),

packages/components/Badge/src/BadgeColorTokens.win32.ts

@@ -137,7 +137,7 @@ export const defaultBadgeColorTokens: TokenSettings<BadgeTokens> = (t: Theme) =>
         ...getFilledColorProps(
           {
             backgroundColor: globalTokens.color.yellow.primary,
-            color: globalTokens.color.grey[14], // It should be neutralForegroundStatic1. It's hardcoded because the token doesn't exist right now
+            color: globalTokens.color.grey14, // It should be neutralForegroundStatic1. It's hardcoded because the token doesn't exist right now
           },
           t,
           getWin32Props,
@@ -233,9 +233,9 @@ export const defaultBadgeColorTokens: TokenSettings<BadgeTokens> = (t: Theme) =>
             backgroundColor: t.colors.neutralForeground3,
             color: t.colors.neutralBackground1,
             borderColor: t.colors.neutralStrokeAccessible,
-            backgroundColorDark: globalTokens.color.grey[68],
+            backgroundColorDark: globalTokens.color.grey68,
-            colorDark: globalTokens.color.grey[16],
+            colorDark: globalTokens.color.grey16,
-            borderColorDark: globalTokens.color.grey[68],
+            borderColorDark: globalTokens.color.grey68,
           },
           t,
           getWin32Props,

packages/components/Badge/src/BadgeFontTokens.win32.ts

@@ -6,12 +6,12 @@ import { BadgeTokens } from './Badge.types';
 export const badgeFontTokens: TokenSettings<BadgeTokens, Theme> = (t: Theme) =>
   ({
     fontFamily: t.typography.families.primary,
-    fontSize: globalTokens.font.size[100],
+    fontSize: globalTokens.font.size100,
     fontWeight: globalTokens.font.weight.regular,
     large: {
-      fontSize: globalTokens.font.size[200],
+      fontSize: globalTokens.font.size200,
     },
     extraLarge: {
-      fontSize: globalTokens.font.size[200],
+      fontSize: globalTokens.font.size200,
     },
   } as BadgeTokens);

packages/components/Badge/src/BadgeTokens.ts

@@ -6,7 +6,7 @@ import { BadgeTokens } from './Badge.types';
 export const defaultBadgeTokens: TokenSettings<BadgeTokens, Theme> = () =>
   ({
     iconSize: 12,
-    borderWidth: globalTokens.stroke.width.thin,
+    borderWidth: globalTokens.stroke.width10,
     bottom: globalTokens.spacing.none,
     right: globalTokens.spacing.none,
     textMargin: globalTokens.spacing.xxs,
@@ -16,7 +16,7 @@ export const defaultBadgeTokens: TokenSettings<BadgeTokens, Theme> = () =>
       minWidth: 6,
       minHeight: 6,
       rounded: {
-        borderRadius: globalTokens.corner.radius.small,
+        borderRadius: globalTokens.corner.radius20,
       },
     },
     extraSmall: {
@@ -24,7 +24,7 @@ export const defaultBadgeTokens: TokenSettings<BadgeTokens, Theme> = () =>
       minHeight: 10,
       iconSize: 10,
       rounded: {
-        borderRadius: globalTokens.corner.radius.small,
+        borderRadius: globalTokens.corner.radius20,
       },
     },
     small: {
@@ -35,7 +35,7 @@ export const defaultBadgeTokens: TokenSettings<BadgeTokens, Theme> = () =>
       textMargin: globalTokens.spacing.xxs,
       flexGap: globalTokens.spacing.xxs,
       rounded: {
-        borderRadius: globalTokens.corner.radius.small,
+        borderRadius: globalTokens.corner.radius20,
       },
     },
     medium: {
@@ -63,13 +63,13 @@ export const defaultBadgeTokens: TokenSettings<BadgeTokens, Theme> = () =>
       flexGap: globalTokens.spacing.xs,
     },
     rounded: {
-      borderRadius: globalTokens.corner.radius.medium,
+      borderRadius: globalTokens.corner.radius40,
     },
     circular: {
-      borderRadius: globalTokens.corner.radius.circle,
+      borderRadius: globalTokens.corner.radiusCircular,
     },
     square: {
-      borderRadius: globalTokens.corner.radius.none,
+      borderRadius: globalTokens.corner.radiusNone,
     },
     rtl: {
       left: globalTokens.spacing.none,

packages/components/Badge/src/CounterBadge/CounterBadgeTokens.ts

@@ -10,6 +10,6 @@ export const counterBadgeTokens: TokenSettings<CounterBadgeTokens> = () =>
       minHeight: 6,
       paddingHorizontal: 0,
       borderWidth: 0,
-      borderRadius: globalTokens.corner.radius.circle,
+      borderRadius: globalTokens.corner.radiusCircular,
     },
   } as CounterBadgeTokens);

packages/components/Badge/src/PresenceBadge/PresenceBadgeTokens.macos.ts

@@ -43,7 +43,7 @@ export const defaultPresenceBadgeTokens: TokenSettings<PresenceBadgeTokens> = ()
     blocked: getBadgeColor('red'),
     unknown: getBadgeColor('red'),
     offline: {
-      iconColor: globalTokens.color.grey[38],
+      iconColor: globalTokens.color.grey38,
     },
     outOfOffice: getBadgeColor('berry'),
   } as PresenceBadgeTokens);

packages/components/Badge/src/PresenceBadge/PresenceBadgeTokens.ts

@@ -49,7 +49,7 @@ export const defaultPresenceBadgeTokens: TokenSettings<PresenceBadgeTokens> = (t
     blocked: getBadgeColor('red', t),
     unknown: getBadgeColor('red', t),
     offline: {
-      iconColor: isHighContrast(t) ? t.colors.neutralForeground3 : globalTokens.color.grey[38],
+      iconColor: isHighContrast(t) ? t.colors.neutralForeground3 : globalTokens.color.grey38,
     },
     outOfOffice: getBadgeColor('berry', t),
   } as PresenceBadgeTokens);

packages/components/Badge/src/PresenceBadge/PresenceBadgeTokens.win32.ts

@@ -50,7 +50,7 @@ export const defaultPresenceBadgeTokens: TokenSettings<PresenceBadgeTokens> = (t
     unknown: getBadgeColor('red', t),
     doNotDisturb: getBadgeColor('red', t),
     offline: {
-      iconColor: isHighContrast(t) ? t.colors.neutralForeground3 : globalTokens.color.grey[38],
+      iconColor: isHighContrast(t) ? t.colors.neutralForeground3 : globalTokens.color.grey38,
     },
     outOfOffice: getBadgeColor('berry', t),
   } as PresenceBadgeTokens);

packages/components/Badge/src/__tests__/__snapshots__/Badge.test.tsx.snap

@@ -11,7 +11,7 @@ exports[`Badge component tests Badge all props 1`] = `
       "backgroundColor": "transparent",
       "borderColor": "transparent",
       "borderRadius": 4,
-      "borderWidth": 1.5,
+      "borderWidth": 1,
       "bottom": 0,
       "flexDirection": "row",
       "justifyContent": "center",
@@ -108,7 +108,7 @@ exports[`Badge component tests Empty Badge 1`] = `
       "backgroundColor": "#0078d4",
       "borderColor": "transparent",
       "borderRadius": 9999,
-      "borderWidth": 1.5,
+      "borderWidth": 1,
       "bottom": 0,
       "flexDirection": "row",
       "justifyContent": "center",
@@ -135,7 +135,7 @@ exports[`CounterBadge component tests CounterBadge all props 1`] = `
       "backgroundColor": "transparent",
       "borderColor": "transparent",
       "borderRadius": 4,
-      "borderWidth": 1.5,
+      "borderWidth": 1,
       "bottom": 0,
       "flexDirection": "row",
       "justifyContent": "center",
@@ -192,7 +192,7 @@ exports[`CounterBadge component tests CounterBadge shows 99+ 1`] = `
       "backgroundColor": "#0078d4",
       "borderColor": "transparent",
       "borderRadius": 9999,
-      "borderWidth": 1.5,
+      "borderWidth": 1,
       "bottom": 0,
       "flexDirection": "row",
       "justifyContent": "center",
@@ -235,7 +235,7 @@ exports[`CounterBadge component tests CounterBadge shows 1000+ 1`] = `
       "backgroundColor": "#0078d4",
       "borderColor": "transparent",
       "borderRadius": 9999,
-      "borderWidth": 1.5,
+      "borderWidth": 1,
       "bottom": 0,
       "flexDirection": "row",
       "justifyContent": "center",
@@ -279,7 +279,7 @@ exports[`CounterBadge component tests CounterBadge shows zero 1`] = `
       "backgroundColor": "#0078d4",
       "borderColor": "transparent",
       "borderRadius": 9999,
-      "borderWidth": 1.5,
+      "borderWidth": 1,
       "bottom": 0,
       "flexDirection": "row",
       "justifyContent": "center",

packages/components/Button/src/ButtonFontTokens.win32.ts

@@ -8,21 +8,21 @@ export const defaultButtonFontTokens: TokenSettings<ButtonTokens, Theme> = (t: T
     medium: {
       hasContent: {
         fontFamily: t.typography.families.secondary,
-        fontSize: globalTokens.font.size[300],
+        fontSize: globalTokens.font.size300,
         fontWeight: globalTokens.font.weight.semibold,
       },
     },
     small: {
       hasContent: {
         fontFamily: t.typography.families.primary,
-        fontSize: globalTokens.font.size[200],
+        fontSize: globalTokens.font.size200,
         fontWeight: globalTokens.font.weight.regular,
       },
     },
     large: {
       hasContent: {
         fontFamily: t.typography.families.secondary,
-        fontSize: globalTokens.font.size[400],
+        fontSize: globalTokens.font.size400,
         fontWeight: globalTokens.font.weight.semibold,
       },
     },

packages/components/Button/src/ButtonTokens.android.ts

@@ -10,7 +10,7 @@ export const defaultButtonTokens: TokenSettings<ButtonTokens, Theme> = () =>
     },
     medium: {
       padding: globalTokens.spacing.xs,
-      borderWidth: globalTokens.stroke.width.thin,
+      borderWidth: globalTokens.stroke.width10,
       iconSize: 16,
       focused: {
         borderWidth: 0,
@@ -18,7 +18,7 @@ export const defaultButtonTokens: TokenSettings<ButtonTokens, Theme> = () =>
       },
       hasContent: {
         minWidth: 96,
-        paddingHorizontal: globalTokens.spacing.m - globalTokens.stroke.width.thin,
+        paddingHorizontal: globalTokens.spacing.m - globalTokens.stroke.width10,
         hasIconAfter: {
           spacingIconContentAfter: globalTokens.spacing.sNudge,
         },
@@ -31,8 +31,8 @@ export const defaultButtonTokens: TokenSettings<ButtonTokens, Theme> = () =>
       },
     },
     small: {
-      padding: globalTokens.spacing.xs - globalTokens.stroke.width.thin,
+      padding: globalTokens.spacing.xs - globalTokens.stroke.width10,
-      borderWidth: globalTokens.stroke.width.thin,
+      borderWidth: globalTokens.stroke.width10,
       iconSize: 16,
       focused: {
         borderWidth: 0,
@@ -40,7 +40,7 @@ export const defaultButtonTokens: TokenSettings<ButtonTokens, Theme> = () =>
       },
       hasContent: {
         minWidth: 64,
-        paddingHorizontal: globalTokens.spacing.s - globalTokens.stroke.width.thin,
+        paddingHorizontal: globalTokens.spacing.s - globalTokens.stroke.width10,
         hasIconAfter: {
           spacingIconContentAfter: globalTokens.spacing.xs,
         },
@@ -53,8 +53,8 @@ export const defaultButtonTokens: TokenSettings<ButtonTokens, Theme> = () =>
       },
     },
     large: {
-      padding: globalTokens.spacing.s - globalTokens.stroke.width.thin,
+      padding: globalTokens.spacing.s - globalTokens.stroke.width10,
-      borderWidth: globalTokens.stroke.width.thin,
+      borderWidth: globalTokens.stroke.width10,
       iconSize: 20,
       focused: {
         borderWidth: 0,
@@ -62,7 +62,7 @@ export const defaultButtonTokens: TokenSettings<ButtonTokens, Theme> = () =>
       },
       hasContent: {
         minWidth: 96,
-        paddingHorizontal: globalTokens.spacing.l - globalTokens.stroke.width.thin,
+        paddingHorizontal: globalTokens.spacing.l - globalTokens.stroke.width10,
         hasIconAfter: {
           spacingIconContentAfter: globalTokens.spacing.sNudge,
         },
@@ -75,12 +75,12 @@ export const defaultButtonTokens: TokenSettings<ButtonTokens, Theme> = () =>
       },
     },
     rounded: {
-      borderRadius: globalTokens.corner.radius.medium,
+      borderRadius: globalTokens.corner.radius40,
     },
     circular: {
-      borderRadius: globalTokens.corner.radius.circle,
+      borderRadius: globalTokens.corner.radiusCircular,
     },
     square: {
-      borderRadius: globalTokens.corner.radius.none,
+      borderRadius: globalTokens.corner.radiusNone,
     },
   } as ButtonTokens);

packages/components/Button/src/ButtonTokens.ios.ts

@@ -10,7 +10,7 @@ export const defaultButtonTokens: TokenSettings<ButtonTokens, Theme> = () =>
     },
     medium: {
       padding: globalTokens.spacing.xs,
-      borderWidth: globalTokens.stroke.width.thin,
+      borderWidth: globalTokens.stroke.width10,
       iconSize: 16,
       focused: {
         borderWidth: 0,
@@ -18,7 +18,7 @@ export const defaultButtonTokens: TokenSettings<ButtonTokens, Theme> = () =>
       },
       hasContent: {
         minWidth: 96,
-        paddingHorizontal: globalTokens.spacing.m - globalTokens.stroke.width.thin,
+        paddingHorizontal: globalTokens.spacing.m - globalTokens.stroke.width10,
         hasIconAfter: {
           spacingIconContentAfter: globalTokens.spacing.sNudge,
         },
@@ -31,8 +31,8 @@ export const defaultButtonTokens: TokenSettings<ButtonTokens, Theme> = () =>
       },
     },
     small: {
-      padding: globalTokens.spacing.xs - globalTokens.stroke.width.thin,
+      padding: globalTokens.spacing.xs - globalTokens.stroke.width10,
-      borderWidth: globalTokens.stroke.width.thin,
+      borderWidth: globalTokens.stroke.width10,
       iconSize: 16,
       focused: {
         borderWidth: 0,
@@ -40,7 +40,7 @@ export const defaultButtonTokens: TokenSettings<ButtonTokens, Theme> = () =>
       },
       hasContent: {
         minWidth: 64,
-        paddingHorizontal: globalTokens.spacing.s - globalTokens.stroke.width.thin,
+        paddingHorizontal: globalTokens.spacing.s - globalTokens.stroke.width10,
         hasIconAfter: {
           spacingIconContentAfter: globalTokens.spacing.xs,
         },
@@ -53,8 +53,8 @@ export const defaultButtonTokens: TokenSettings<ButtonTokens, Theme> = () =>
       },
     },
     large: {
-      padding: globalTokens.spacing.s - globalTokens.stroke.width.thin,
+      padding: globalTokens.spacing.s - globalTokens.stroke.width10,
-      borderWidth: globalTokens.stroke.width.thin,
+      borderWidth: globalTokens.stroke.width10,
       iconSize: 20,
       focused: {
         borderWidth: 0,
@@ -62,7 +62,7 @@ export const defaultButtonTokens: TokenSettings<ButtonTokens, Theme> = () =>
       },
       hasContent: {
         minWidth: 96,
-        paddingHorizontal: globalTokens.spacing.l - globalTokens.stroke.width.thin,
+        paddingHorizontal: globalTokens.spacing.l - globalTokens.stroke.width10,
         hasIconAfter: {
           spacingIconContentAfter: globalTokens.spacing.sNudge,
         },
@@ -75,12 +75,12 @@ export const defaultButtonTokens: TokenSettings<ButtonTokens, Theme> = () =>
       },
     },
     rounded: {
-      borderRadius: globalTokens.corner.radius.medium,
+      borderRadius: globalTokens.corner.radius40,
     },
     circular: {
-      borderRadius: globalTokens.corner.radius.circle,
+      borderRadius: globalTokens.corner.radiusCircular,
     },
     square: {
-      borderRadius: globalTokens.corner.radius.none,
+      borderRadius: globalTokens.corner.radiusNone,
     },
   } as ButtonTokens);

packages/components/Button/src/ButtonTokens.ts

@@ -9,8 +9,8 @@ export const defaultButtonTokens: TokenSettings<ButtonTokens, Theme> = () =>
       width: '100%',
     },
     medium: {
-      padding: globalTokens.spacing.sNudge - globalTokens.stroke.width.thin,
+      padding: globalTokens.spacing.sNudge - globalTokens.stroke.width10,
-      borderWidth: globalTokens.stroke.width.thin,
+      borderWidth: globalTokens.stroke.width10,
       iconSize: 16,
       focused: {
         borderWidth: 0,
@@ -18,7 +18,7 @@ export const defaultButtonTokens: TokenSettings<ButtonTokens, Theme> = () =>
       },
       hasContent: {
         minWidth: 96,
-        paddingHorizontal: globalTokens.spacing.m - globalTokens.stroke.width.thin,
+        paddingHorizontal: globalTokens.spacing.m - globalTokens.stroke.width10,
         hasIconAfter: {
           spacingIconContentAfter: globalTokens.spacing.sNudge,
         },
@@ -31,8 +31,8 @@ export const defaultButtonTokens: TokenSettings<ButtonTokens, Theme> = () =>
       },
     },
     small: {
-      padding: globalTokens.spacing.xs - globalTokens.stroke.width.thin,
+      padding: globalTokens.spacing.xs - globalTokens.stroke.width10,
-      borderWidth: globalTokens.stroke.width.thin,
+      borderWidth: globalTokens.stroke.width10,
       iconSize: 16,
       focused: {
         borderWidth: 0,
@@ -40,7 +40,7 @@ export const defaultButtonTokens: TokenSettings<ButtonTokens, Theme> = () =>
       },
       hasContent: {
         minWidth: 64,
-        paddingHorizontal: globalTokens.spacing.s - globalTokens.stroke.width.thin,
+        paddingHorizontal: globalTokens.spacing.s - globalTokens.stroke.width10,
         hasIconAfter: {
           spacingIconContentAfter: globalTokens.spacing.xs,
         },
@@ -53,8 +53,8 @@ export const defaultButtonTokens: TokenSettings<ButtonTokens, Theme> = () =>
       },
     },
     large: {
-      padding: globalTokens.spacing.s - globalTokens.stroke.width.thin,
+      padding: globalTokens.spacing.s - globalTokens.stroke.width10,
-      borderWidth: globalTokens.stroke.width.thin,
+      borderWidth: globalTokens.stroke.width10,
       iconSize: 20,
       focused: {
         borderWidth: 0,
@@ -62,7 +62,7 @@ export const defaultButtonTokens: TokenSettings<ButtonTokens, Theme> = () =>
       },
       hasContent: {
         minWidth: 96,
-        paddingHorizontal: globalTokens.spacing.l - globalTokens.stroke.width.thin,
+        paddingHorizontal: globalTokens.spacing.l - globalTokens.stroke.width10,
         hasIconAfter: {
           spacingIconContentAfter: globalTokens.spacing.sNudge,
         },
@@ -75,12 +75,12 @@ export const defaultButtonTokens: TokenSettings<ButtonTokens, Theme> = () =>
       },
     },
     rounded: {
-      borderRadius: globalTokens.corner.radius.medium,
+      borderRadius: globalTokens.corner.radius40,
     },
     circular: {
-      borderRadius: globalTokens.corner.radius.circle,
+      borderRadius: globalTokens.corner.radiusCircular,
     },
     square: {
-      borderRadius: globalTokens.corner.radius.none,
+      borderRadius: globalTokens.corner.radiusNone,
     },
   } as ButtonTokens);

packages/components/Button/src/ButtonTokens.win32.ts

@@ -9,8 +9,8 @@ export const defaultButtonTokens: TokenSettings<ButtonTokens, Theme> = () =>
       width: '100%',
     },
     medium: {
-      padding: globalTokens.spacing.s - globalTokens.stroke.width.thin,
+      padding: globalTokens.spacing.s - globalTokens.stroke.width10,
-      borderWidth: globalTokens.stroke.width.thin,
+      borderWidth: globalTokens.stroke.width10,
       iconSize: 16,
       focused: {
         borderWidth: 0,
@@ -18,8 +18,8 @@ export const defaultButtonTokens: TokenSettings<ButtonTokens, Theme> = () =>
       },
       hasContent: {
         minWidth: 96,
-        padding: globalTokens.spacing.sNudge - globalTokens.stroke.width.thin,
+        padding: globalTokens.spacing.sNudge - globalTokens.stroke.width10,
-        paddingHorizontal: globalTokens.spacing.m - globalTokens.stroke.width.thin,
+        paddingHorizontal: globalTokens.spacing.m - globalTokens.stroke.width10,
         hasIconAfter: {
           spacingIconContentAfter: globalTokens.spacing.s,
         },
@@ -33,8 +33,8 @@ export const defaultButtonTokens: TokenSettings<ButtonTokens, Theme> = () =>
       },
     },
     small: {
-      padding: globalTokens.spacing.xs - globalTokens.stroke.width.thin,
+      padding: globalTokens.spacing.xs - globalTokens.stroke.width10,
-      borderWidth: globalTokens.stroke.width.thin,
+      borderWidth: globalTokens.stroke.width10,
       iconSize: 16,
       focused: {
         borderWidth: 0,
@@ -43,7 +43,7 @@ export const defaultButtonTokens: TokenSettings<ButtonTokens, Theme> = () =>
       hasContent: {
         minWidth: 64,
         minHeight: 32,
-        paddingHorizontal: globalTokens.spacing.s - globalTokens.stroke.width.thin,
+        paddingHorizontal: globalTokens.spacing.s - globalTokens.stroke.width10,
         hasIconAfter: {
           spacingIconContentAfter: globalTokens.spacing.xs,
         },
@@ -56,8 +56,8 @@ export const defaultButtonTokens: TokenSettings<ButtonTokens, Theme> = () =>
       },
     },
     large: {
-      padding: globalTokens.spacing.mNudge - globalTokens.stroke.width.thin,
+      padding: globalTokens.spacing.mNudge - globalTokens.stroke.width10,
-      borderWidth: globalTokens.stroke.width.thin,
+      borderWidth: globalTokens.stroke.width10,
       iconSize: 20,
       focused: {
         borderWidth: 0,
@@ -66,8 +66,8 @@ export const defaultButtonTokens: TokenSettings<ButtonTokens, Theme> = () =>
       hasContent: {
         minWidth: 96,
         minHeight: 40,
-        padding: globalTokens.spacing.s - globalTokens.stroke.width.thin,
+        padding: globalTokens.spacing.s - globalTokens.stroke.width10,
-        paddingHorizontal: globalTokens.spacing.l - globalTokens.stroke.width.thin,
+        paddingHorizontal: globalTokens.spacing.l - globalTokens.stroke.width10,
         hasIconAfter: {
           spacingIconContentAfter: globalTokens.spacing.sNudge,
         },
@@ -81,12 +81,12 @@ export const defaultButtonTokens: TokenSettings<ButtonTokens, Theme> = () =>
       },
     },
     rounded: {
-      borderRadius: globalTokens.corner.radius.medium,
+      borderRadius: globalTokens.corner.radius40,
     },
     circular: {
-      borderRadius: globalTokens.corner.radius.circle,
+      borderRadius: globalTokens.corner.radiusCircular,
     },
     square: {
-      borderRadius: globalTokens.corner.radius.none,
+      borderRadius: globalTokens.corner.radiusNone,
     },
   } as ButtonTokens);

packages/components/Button/src/CompoundButton/CompoundButtonFontTokens.win32.ts

@@ -7,11 +7,11 @@ export const defaultCompoundButtonFontTokens: TokenSettings<CompoundButtonTokens
   medium: {
     hasContent: {
       fontFamily: t.typography.families.secondary,
-      fontSize: globalTokens.font.size[200],
+      fontSize: globalTokens.font.size200,
       fontWeight: globalTokens.font.weight.semibold as FontWeightValue,
       secondaryContentFont: {
         fontFamily: t.typography.families.secondary,
-        fontSize: globalTokens.font.size[100],
+        fontSize: globalTokens.font.size100,
         fontWeight: globalTokens.font.weight.semibold as FontWeightValue,
       },
     },
@@ -19,11 +19,11 @@ export const defaultCompoundButtonFontTokens: TokenSettings<CompoundButtonTokens
   small: {
     hasContent: {
       fontFamily: t.typography.families.primary,
-      fontSize: globalTokens.font.size[200],
+      fontSize: globalTokens.font.size200,
       fontWeight: globalTokens.font.weight.regular as FontWeightValue,
       secondaryContentFont: {
         fontFamily: t.typography.families.secondary,
-        fontSize: globalTokens.font.size[100],
+        fontSize: globalTokens.font.size100,
         fontWeight: globalTokens.font.weight.semibold as FontWeightValue,
       },
     },
@@ -31,11 +31,11 @@ export const defaultCompoundButtonFontTokens: TokenSettings<CompoundButtonTokens
   large: {
     hasContent: {
       fontFamily: t.typography.families.secondary,
-      fontSize: globalTokens.font.size[400],
+      fontSize: globalTokens.font.size400,
       fontWeight: globalTokens.font.weight.semibold as FontWeightValue,
       secondaryContentFont: {
         fontFamily: t.typography.families.primary,
-        fontSize: globalTokens.font.size[200],
+        fontSize: globalTokens.font.size200,
         fontWeight: globalTokens.font.weight.regular as FontWeightValue,
       },
     },

packages/components/Button/src/CompoundButton/CompoundButtonTokens.ts

@@ -5,12 +5,12 @@ import { CompoundButtonTokens } from './CompoundButton.types';
 
 export const defaultCompoundButtonTokens: TokenSettings<CompoundButtonTokens, Theme> = (): CompoundButtonTokens => ({
   medium: {
-    padding: globalTokens.spacing.m - globalTokens.stroke.width.thin,
+    padding: globalTokens.spacing.m - globalTokens.stroke.width10,
     focused: {
       padding: globalTokens.spacing.m,
     },
     hasContent: {
-      paddingHorizontal: globalTokens.spacing.m - globalTokens.stroke.width.thin,
+      paddingHorizontal: globalTokens.spacing.m - globalTokens.stroke.width10,
       minWidth: 96,
       focused: {
         paddingHorizontal: globalTokens.spacing.m,
@@ -24,12 +24,12 @@ export const defaultCompoundButtonTokens: TokenSettings<CompoundButtonTokens, Th
     },
   },
   small: {
-    padding: globalTokens.spacing.s - globalTokens.stroke.width.thin,
+    padding: globalTokens.spacing.s - globalTokens.stroke.width10,
     focused: {
       padding: globalTokens.spacing.s,
     },
     hasContent: {
-      paddingHorizontal: globalTokens.spacing.s - globalTokens.stroke.width.thin,
+      paddingHorizontal: globalTokens.spacing.s - globalTokens.stroke.width10,
       minWidth: 64,
       focused: {
         paddingHorizontal: globalTokens.spacing.s,
@@ -43,12 +43,12 @@ export const defaultCompoundButtonTokens: TokenSettings<CompoundButtonTokens, Th
     },
   },
   large: {
-    padding: globalTokens.spacing.l - globalTokens.stroke.width.thin,
+    padding: globalTokens.spacing.l - globalTokens.stroke.width10,
     focused: {
       padding: globalTokens.spacing.l,
     },
     hasContent: {
-      paddingHorizontal: globalTokens.spacing.l - globalTokens.stroke.width.thin,
+      paddingHorizontal: globalTokens.spacing.l - globalTokens.stroke.width10,
       minWidth: 96,
       focused: {
         paddingHorizontal: globalTokens.spacing.l,

packages/components/Button/src/CompoundButton/__snapshots__/CompoundButton.test.tsx.snap

@@ -24,13 +24,13 @@ exports[`CompoundButton default 1`] = `
       "backgroundColor": "#f3f2f1",
       "borderColor": "#8a8886",
       "borderRadius": 4,
-      "borderWidth": 1.5,
+      "borderWidth": 1,
       "display": "flex",
       "flexDirection": "row",
       "justifyContent": "center",
       "minWidth": 96,
-      "padding": 14.5,
+      "padding": 15,
-      "paddingHorizontal": 14.5,
+      "paddingHorizontal": 15,
       "width": undefined,
     }
   }

packages/components/Button/src/FAB/FABTokens.ts

@@ -5,7 +5,7 @@ import { FABTokens } from './FAB.types';
 
 export const defaultFABTokens: TokenSettings<FABTokens, Theme> = (t: Theme) =>
   ({
-    borderRadius: globalTokens.corner.radius.circle,
+    borderRadius: globalTokens.corner.radiusCircular,
     minHeight: 56,
     minWidth: 56,
     padding: globalTokens.spacing.l,

packages/components/Button/src/FAB/__snapshots__/FAB.test.tsx.snap

@@ -22,8 +22,8 @@ exports[`Custom FAB with no shadow(iOS) 1`] = `
     Object {
       "alignItems": "center",
       "alignSelf": "flex-start",
-      "backgroundColor": "#0078d4",
+      "backgroundColor": "#0f6cbd",
-      "borderColor": "#005a9e",
+      "borderColor": "#0f548c",
       "borderRadius": 9999,
       "display": "flex",
       "flexDirection": "row",
@@ -62,8 +62,8 @@ exports[`Default FAB (iOS) 1`] = `
   style={
     Object {
       "alignSelf": "flex-start",
-      "backgroundColor": "#0078d4",
+      "backgroundColor": "#0f6cbd",
-      "borderColor": "#005a9e",
+      "borderColor": "#0f548c",
       "borderRadius": 9999,
       "bottom": undefined,
       "display": "flex",
@@ -116,9 +116,9 @@ exports[`Default FAB (iOS) 1`] = `
       Object {
         "alignItems": "center",
         "alignSelf": "flex-start",
-        "backgroundColor": "#0078d4",
+        "backgroundColor": "#0f6cbd",
         "borderBottomWidth": undefined,
-        "borderColor": "#005a9e",
+        "borderColor": "#0f548c",
         "borderEndWidth": undefined,
         "borderLeftWidth": undefined,
         "borderRadius": 9999,

packages/components/Button/src/ToggleButton/__snapshots__/ToggleButton.test.tsx.snap

@@ -37,13 +37,13 @@ exports[`ToggleButton default 1`] = `
       "backgroundColor": "#f3f2f1",
       "borderColor": "#8a8886",
       "borderRadius": 4,
-      "borderWidth": 1.5,
+      "borderWidth": 1,
       "display": "flex",
       "flexDirection": "row",
       "justifyContent": "center",
       "minWidth": 96,
       "padding": 8,
-      "paddingHorizontal": 14.5,
+      "paddingHorizontal": 15,
       "width": undefined,
     }
   }

packages/components/Button/src/__snapshots__/Button.test.tsx.snap

@@ -25,13 +25,13 @@ exports[`Button component tests Button circular 1`] = `
       "backgroundColor": "#f3f2f1",
       "borderColor": "#8a8886",
       "borderRadius": 9999,
-      "borderWidth": 1.5,
+      "borderWidth": 1,
       "display": "flex",
       "flexDirection": "row",
       "justifyContent": "center",
       "minWidth": 96,
       "padding": 8,
-      "paddingHorizontal": 14.5,
+      "paddingHorizontal": 15,
       "width": undefined,
     }
   }
@@ -82,13 +82,13 @@ exports[`Button component tests Button composed 1`] = `
       "backgroundColor": "#f3f2f1",
       "borderColor": "#8a8886",
       "borderRadius": 4,
-      "borderWidth": 1.5,
+      "borderWidth": 1,
       "display": "flex",
       "flexDirection": "row",
       "justifyContent": "center",
       "minWidth": 96,
       "padding": 8,
-      "paddingHorizontal": 14.5,
+      "paddingHorizontal": 15,
       "width": undefined,
     }
   }
@@ -138,13 +138,13 @@ exports[`Button component tests Button customized 1`] = `
       "backgroundColor": "pink",
       "borderColor": "#8a8886",
       "borderRadius": 4,
-      "borderWidth": 1.5,
+      "borderWidth": 1,
       "display": "flex",
       "flexDirection": "row",
       "justifyContent": "center",
       "minWidth": 96,
       "padding": 8,
-      "paddingHorizontal": 14.5,
+      "paddingHorizontal": 15,
       "width": undefined,
     }
   }
@@ -195,13 +195,13 @@ exports[`Button component tests Button default 1`] = `
       "backgroundColor": "#f3f2f1",
       "borderColor": "#8a8886",
       "borderRadius": 4,
-      "borderWidth": 1.5,
+      "borderWidth": 1,
       "display": "flex",
       "flexDirection": "row",
       "justifyContent": "center",
       "minWidth": 96,
       "padding": 8,
-      "paddingHorizontal": 14.5,
+      "paddingHorizontal": 15,
       "width": undefined,
     }
   }
@@ -257,13 +257,13 @@ exports[`Button component tests Button disabled 1`] = `
       "backgroundColor": "#f3f2f1",
       "borderColor": "#f3f2f1",
       "borderRadius": 4,
-      "borderWidth": 1.5,
+      "borderWidth": 1,
       "display": "flex",
       "flexDirection": "row",
       "justifyContent": "center",
       "minWidth": 96,
       "padding": 8,
-      "paddingHorizontal": 14.5,
+      "paddingHorizontal": 15,
       "width": undefined,
     }
   }
@@ -315,13 +315,13 @@ exports[`Button component tests Button large 1`] = `
       "backgroundColor": "#f3f2f1",
       "borderColor": "#8a8886",
       "borderRadius": 4,
-      "borderWidth": 1.5,
+      "borderWidth": 1,
       "display": "flex",
       "flexDirection": "row",
       "justifyContent": "center",
       "minWidth": 96,
-      "padding": 10.5,
+      "padding": 11,
-      "paddingHorizontal": 18.5,
+      "paddingHorizontal": 19,
       "width": undefined,
     }
   }
@@ -370,16 +370,16 @@ exports[`Button component tests Button primary 1`] = `
     Object {
       "alignItems": "center",
       "alignSelf": "flex-start",
-      "backgroundColor": "#0078d4",
+      "backgroundColor": "#0f6cbd",
-      "borderColor": "#005a9e",
+      "borderColor": "#0f548c",
       "borderRadius": 4,
-      "borderWidth": 1.5,
+      "borderWidth": 1,
       "display": "flex",
       "flexDirection": "row",
       "justifyContent": "center",
       "minWidth": 96,
       "padding": 8,
-      "paddingHorizontal": 14.5,
+      "paddingHorizontal": 15,
       "width": undefined,
     }
   }
@@ -431,13 +431,13 @@ exports[`Button component tests Button small 1`] = `
       "backgroundColor": "#f3f2f1",
       "borderColor": "#8a8886",
       "borderRadius": 4,
-      "borderWidth": 1.5,
+      "borderWidth": 1,
       "display": "flex",
       "flexDirection": "row",
       "justifyContent": "center",
       "minWidth": 64,
-      "padding": 6.5,
+      "padding": 7,
-      "paddingHorizontal": 10.5,
+      "paddingHorizontal": 11,
       "width": undefined,
     }
   }
@@ -489,13 +489,13 @@ exports[`Button component tests Button square 1`] = `
       "backgroundColor": "#f3f2f1",
       "borderColor": "#8a8886",
       "borderRadius": 0,
-      "borderWidth": 1.5,
+      "borderWidth": 1,
       "display": "flex",
       "flexDirection": "row",
       "justifyContent": "center",
       "minWidth": 96,
       "padding": 8,
-      "paddingHorizontal": 14.5,
+      "paddingHorizontal": 15,
       "width": undefined,
     }
   }
@@ -547,13 +547,13 @@ exports[`Button component tests Button subtle 1`] = `
       "backgroundColor": "#ffffff",
       "borderColor": "#ffffff",
       "borderRadius": 4,
-      "borderWidth": 1.5,
+      "borderWidth": 1,
       "display": "flex",
       "flexDirection": "row",
       "justifyContent": "center",
       "minWidth": 96,
       "padding": 8,
-      "paddingHorizontal": 14.5,
+      "paddingHorizontal": 15,
       "width": undefined,
     }
   }

packages/components/Checkbox/src/CheckboxTokens.ts

@@ -8,14 +8,14 @@ export const defaultCheckboxTokens: TokenSettings<CheckboxTokens, Theme> = (t: T
     requiredColor: t.colors.redForeground1,
     requiredPadding: globalTokens.spacing.s,
     medium: {
-      borderRadius: globalTokens.corner.radius.small,
+      borderRadius: globalTokens.corner.radius20,
-      checkboxBorderWidth: globalTokens.stroke.width.thin,
+      checkboxBorderWidth: globalTokens.stroke.width10,
-      checkboxBorderRadius: globalTokens.corner.radius.small,
+      checkboxBorderRadius: globalTokens.corner.radius20,
       checkboxSize: 16,
       checkmarkSize: 12,
       label: {
         padding: globalTokens.spacing.s,
-        borderRadius: globalTokens.corner.radius.medium,
+        borderRadius: globalTokens.corner.radius40,
         spacingLabelAfter: globalTokens.spacing.m,
         labelIsBefore: {
           spacingLabelBefore: globalTokens.spacing.m,
@@ -26,14 +26,14 @@ export const defaultCheckboxTokens: TokenSettings<CheckboxTokens, Theme> = (t: T
       variant: 'bodyStandard',
     },
     large: {
-      borderRadius: globalTokens.corner.radius.small,
+      borderRadius: globalTokens.corner.radius20,
-      checkboxBorderWidth: globalTokens.stroke.width.thin,
+      checkboxBorderWidth: globalTokens.stroke.width10,
-      checkboxBorderRadius: globalTokens.corner.radius.small,
+      checkboxBorderRadius: globalTokens.corner.radius20,
       checkboxSize: 20,
       checkmarkSize: 16,
       label: {
         padding: globalTokens.spacing.s,
-        borderRadius: globalTokens.corner.radius.medium,
+        borderRadius: globalTokens.corner.radius40,
         spacingLabelAfter: globalTokens.spacing.m,
         labelIsBefore: {
           spacingLabelBefore: globalTokens.spacing.m,
@@ -68,7 +68,7 @@ export const defaultCheckboxTokens: TokenSettings<CheckboxTokens, Theme> = (t: T
       checkmarkOpacity: 1,
     },
     circular: {
-      borderRadius: globalTokens.corner.radius.circle,
+      borderRadius: globalTokens.corner.radiusCircular,
-      checkboxBorderRadius: globalTokens.corner.radius.circle,
+      checkboxBorderRadius: globalTokens.corner.radiusCircular,
     },
   } as CheckboxTokens);

packages/components/Checkbox/src/CheckboxTokens.win32.ts

@@ -8,15 +8,15 @@ export const defaultCheckboxTokens: TokenSettings<CheckboxTokens, Theme> = (t: T
     requiredColor: t.colors.redForeground1,
     requiredPadding: globalTokens.spacing.s,
     medium: {
-      borderRadius: globalTokens.corner.radius.small,
+      borderRadius: globalTokens.corner.radius20,
-      checkboxBorderWidth: globalTokens.stroke.width.thin,
+      checkboxBorderWidth: globalTokens.stroke.width10,
-      checkboxBorderRadius: globalTokens.corner.radius.small,
+      checkboxBorderRadius: globalTokens.corner.radius20,
       checkboxSize: 16,
       checkmarkSize: 12,
       label: {
         padding: globalTokens.spacing.s,
         paddingHorizontal: globalTokens.spacing.m,
-        borderRadius: globalTokens.corner.radius.medium,
+        borderRadius: globalTokens.corner.radius40,
         spacingLabelAfter: globalTokens.spacing.s,
         labelIsBefore: {
           spacingLabelBefore: globalTokens.spacing.s,
@@ -24,19 +24,19 @@ export const defaultCheckboxTokens: TokenSettings<CheckboxTokens, Theme> = (t: T
         },
       },
       padding: globalTokens.spacing.xs,
-      fontSize: globalTokens.font.size[200],
+      fontSize: globalTokens.font.size200,
       fontWeight: globalTokens.font.weight.regular,
       fontFamily: t.typography.families.primary,
     },
     large: {
-      borderRadius: globalTokens.corner.radius.small,
+      borderRadius: globalTokens.corner.radius20,
-      checkboxBorderWidth: globalTokens.stroke.width.thin,
+      checkboxBorderWidth: globalTokens.stroke.width10,
-      checkboxBorderRadius: globalTokens.corner.radius.small,
+      checkboxBorderRadius: globalTokens.corner.radius20,
       checkboxSize: 20,
       checkmarkSize: 16,
       label: {
         padding: globalTokens.spacing.s,
-        borderRadius: globalTokens.corner.radius.medium,
+        borderRadius: globalTokens.corner.radius40,
         spacingLabelAfter: globalTokens.spacing.m,
         labelIsBefore: {
           spacingLabelBefore: globalTokens.spacing.m,
@@ -44,7 +44,7 @@ export const defaultCheckboxTokens: TokenSettings<CheckboxTokens, Theme> = (t: T
         },
       },
       padding: globalTokens.spacing.xs,
-      fontSize: globalTokens.font.size[300],
+      fontSize: globalTokens.font.size300,
       fontWeight: globalTokens.font.weight.regular,
       fontFamily: t.typography.families.primary,
     },
@@ -91,7 +91,7 @@ export const defaultCheckboxTokens: TokenSettings<CheckboxTokens, Theme> = (t: T
       },
     },
     circular: {
-      borderRadius: globalTokens.corner.radius.circle,
+      borderRadius: globalTokens.corner.radiusCircular,
-      checkboxBorderRadius: globalTokens.corner.radius.circle,
+      checkboxBorderRadius: globalTokens.corner.radiusCircular,
     },
   } as CheckboxTokens);

packages/components/Checkbox/src/CheckboxTokens.windows.ts

@@ -8,15 +8,15 @@ export const defaultCheckboxTokens: TokenSettings<CheckboxTokens, Theme> = (t: T
     requiredColor: t.colors.redForeground1,
     requiredPadding: globalTokens.spacing.s,
     medium: {
-      borderRadius: globalTokens.corner.radius.small,
+      borderRadius: globalTokens.corner.radius20,
-      checkboxBorderWidth: globalTokens.stroke.width.thin,
+      checkboxBorderWidth: globalTokens.stroke.width10,
-      checkboxBorderRadius: globalTokens.corner.radius.small,
+      checkboxBorderRadius: globalTokens.corner.radius20,
       checkboxSize: 16,
       checkmarkSize: 8,
       spacingLabelAfter: globalTokens.spacing.m,
       label: {
         padding: globalTokens.spacing.s,
-        borderRadius: globalTokens.corner.radius.medium,
+        borderRadius: globalTokens.corner.radius40,
         spacingLabelAfter: globalTokens.spacing.m,
         labelIsBefore: {
           spacingLabelBefore: globalTokens.spacing.m,
@@ -27,15 +27,15 @@ export const defaultCheckboxTokens: TokenSettings<CheckboxTokens, Theme> = (t: T
       variant: 'bodyStandard',
     },
     large: {
-      borderRadius: globalTokens.corner.radius.small,
+      borderRadius: globalTokens.corner.radius20,
-      checkboxBorderWidth: globalTokens.stroke.width.thin,
+      checkboxBorderWidth: globalTokens.stroke.width10,
-      checkboxBorderRadius: globalTokens.corner.radius.small,
+      checkboxBorderRadius: globalTokens.corner.radius20,
       checkboxSize: 20,
       checkmarkSize: 10,
       spacingLabelAfter: globalTokens.spacing.m,
       label: {
         padding: globalTokens.spacing.s,
-        borderRadius: globalTokens.corner.radius.medium,
+        borderRadius: globalTokens.corner.radius40,
         spacingLabelAfter: globalTokens.spacing.m,
         labelIsBefore: {
           spacingLabelBefore: globalTokens.spacing.m,
@@ -86,7 +86,7 @@ export const defaultCheckboxTokens: TokenSettings<CheckboxTokens, Theme> = (t: T
       },
     },
     circular: {
-      borderRadius: globalTokens.corner.radius.circle,
+      borderRadius: globalTokens.corner.radiusCircular,
-      checkboxBorderRadius: globalTokens.corner.radius.circle,
+      checkboxBorderRadius: globalTokens.corner.radiusCircular,
     },
   } as CheckboxTokens);

packages/components/Link/src/__tests__/__snapshots__/Link.test.tsx.snap

@@ -32,7 +32,7 @@ exports[`Link all props 1`] = `
         "borderRadius": 4,
         "borderStyle": "solid",
         "borderWidth": 2,
-        "color": "link",
+        "color": "#0f6cbd",
         "fontFamily": "Segoe UI",
         "fontSize": 13,
         "fontWeight": "400",
@@ -79,7 +79,7 @@ exports[`Link with child 1`] = `
         "borderRadius": 4,
         "borderStyle": "solid",
         "borderWidth": 2,
-        "color": "link",
+        "color": "#0f6cbd",
         "fontFamily": "Segoe UI",
         "fontSize": 13,
         "fontWeight": "400",

packages/components/Menu/src/MenuDivider/MenuDividerTokens.macos.ts

@@ -5,6 +5,6 @@ import { MenuDividerTokens } from './MenuDivider.types';
 
 export const defaultMenuDividerTokens: TokenSettings<MenuDividerTokens, Theme> = (t: Theme): MenuDividerTokens => ({
   backgroundColor: t.colors.neutralStroke2,
-  height: globalTokens.stroke.width.thin,
+  height: globalTokens.stroke.width10,
   margin: globalTokens.spacing.xxs,
 });

packages/components/Menu/src/MenuDivider/MenuDividerTokens.ts

@@ -5,6 +5,6 @@ import { MenuDividerTokens } from './MenuDivider.types';
 
 export const defaultMenuDividerTokens: TokenSettings<MenuDividerTokens, Theme> = (t: Theme): MenuDividerTokens => ({
   backgroundColor: t.colors.neutralStroke2,
-  height: globalTokens.stroke.width.thin,
+  height: globalTokens.stroke.width10,
   marginVertical: globalTokens.spacing.xs,
 });

packages/components/Menu/src/MenuDivider/MenuDividerTokens.win32.ts

@@ -5,6 +5,6 @@ import { MenuDividerTokens } from './MenuDivider.types';
 
 export const defaultMenuDividerTokens: TokenSettings<MenuDividerTokens, Theme> = (t: Theme): MenuDividerTokens => ({
   backgroundColor: t.colors.neutralStroke1,
-  height: globalTokens.stroke.width.thin,
+  height: globalTokens.stroke.width10,
   margin: globalTokens.spacing.xxs,
 });

packages/components/Menu/src/MenuItem/MenuItemTokens.macos.ts

@@ -9,7 +9,7 @@ export const defaultMenuItemTokens: TokenSettings<MenuItemTokens, Theme> = (t: T
   checkmarkSize: 16,
   color: t.colors.menuItemText, // matches ContextualMenu
   fontFamily: t.typography.families.primary,
-  fontSize: globalTokens.font.size[300],
+  fontSize: globalTokens.font.size300,
   fontWeight: globalTokens.font.weight.regular as FontWeightValue,
   gap: globalTokens.spacing.xs,
   paddingHorizontal: 5, // hardcoded for now to match ContextualMenu

packages/components/Menu/src/MenuItem/MenuItemTokens.ts

@@ -5,11 +5,11 @@ import { MenuItemTokens } from './MenuItem.types';
 
 export const defaultMenuItemTokens: TokenSettings<MenuItemTokens, Theme> = (t: Theme): MenuItemTokens => ({
   backgroundColor: t.colors.neutralBackground1,
-  borderRadius: globalTokens.corner.radius.medium,
+  borderRadius: globalTokens.corner.radius40,
   checkmarkSize: 16,
   color: t.colors.neutralForeground2,
   fontFamily: t.typography.families.primary,
-  fontSize: globalTokens.font.size[300],
+  fontSize: globalTokens.font.size300,
   fontWeight: globalTokens.font.weight.regular as FontWeightValue,
   gap: globalTokens.spacing.xs,
   minHeight: 32,

packages/components/Menu/src/MenuItem/MenuItemTokens.win32.ts

@@ -5,11 +5,11 @@ import { MenuItemTokens } from './MenuItem.types';
 
 export const defaultMenuItemTokens: TokenSettings<MenuItemTokens, Theme> = (t: Theme): MenuItemTokens => ({
   backgroundColor: t.colors.neutralBackground1,
-  borderRadius: globalTokens.corner.radius.none,
+  borderRadius: globalTokens.corner.radiusNone,
   checkmarkSize: 16,
   color: t.colors.neutralForeground1,
   fontFamily: t.typography.families.primary,
-  fontSize: globalTokens.font.size[200],
+  fontSize: globalTokens.font.size200,
   fontWeight: globalTokens.font.weight.regular as FontWeightValue,
   gap: globalTokens.spacing.xs,
   minHeight: 24,

packages/components/Menu/src/MenuItemCheckbox/MenuItemCheckboxTokens.macos.ts

@@ -11,7 +11,7 @@ export const defaultMenuItemCheckboxTokens: TokenSettings<MenuItemCheckboxTokens
   checkmarkVisibility: 0,
   color: t.colors.neutralForeground2,
   fontFamily: t.typography.families.primary,
-  fontSize: globalTokens.font.size[300],
+  fontSize: globalTokens.font.size300,
   fontWeight: globalTokens.font.weight.regular as FontWeightValue,
   gap: globalTokens.spacing.xs,
   paddingHorizontal: 5,

packages/components/Menu/src/MenuItemCheckbox/MenuItemCheckboxTokens.ts

@@ -5,13 +5,13 @@ import { MenuItemCheckboxTokens } from './MenuItemCheckbox.types';
 
 export const defaultMenuItemCheckboxTokens: TokenSettings<MenuItemCheckboxTokens, Theme> = (t: Theme): MenuItemCheckboxTokens => ({
   backgroundColor: t.colors.neutralBackground1,
-  borderRadius: globalTokens.corner.radius.medium,
+  borderRadius: globalTokens.corner.radius40,
   checkmarkPadding: globalTokens.spacing.none,
   checkmarkSize: 16,
   checkmarkVisibility: 0,
   color: t.colors.neutralForeground2,
   fontFamily: t.typography.families.primary,
-  fontSize: globalTokens.font.size[300],
+  fontSize: globalTokens.font.size300,
   fontWeight: globalTokens.font.weight.regular as FontWeightValue,
   gap: globalTokens.spacing.xs,
   minHeight: 32,

packages/components/Menu/src/MenuItemCheckbox/MenuItemCheckboxTokens.win32.ts

@@ -5,13 +5,13 @@ import { MenuItemCheckboxTokens } from './MenuItemCheckbox.types';
 
 export const defaultMenuItemCheckboxTokens: TokenSettings<MenuItemCheckboxTokens, Theme> = (t: Theme): MenuItemCheckboxTokens => ({
   backgroundColor: t.colors.neutralBackground1,
-  borderRadius: globalTokens.corner.radius.none,
+  borderRadius: globalTokens.corner.radiusNone,
   checkmarkPadding: globalTokens.spacing.xxs,
   checkmarkSize: 16,
   checkmarkVisibility: 0,
   color: t.colors.neutralForeground1,
   fontFamily: t.typography.families.primary,
-  fontSize: globalTokens.font.size[200],
+  fontSize: globalTokens.font.size200,
   fontWeight: globalTokens.font.weight.regular as FontWeightValue,
   gap: globalTokens.spacing.xs,
   minHeight: 24,

packages/components/Menu/src/__tests__/__snapshots__/Menu.test.tsx.snap

@@ -32,13 +32,13 @@ exports[`Checkbox component tests Menu default 1`] = `
       "backgroundColor": "#f3f2f1",
       "borderColor": "#8a8886",
       "borderRadius": 4,
-      "borderWidth": 1.5,
+      "borderWidth": 1,
       "display": "flex",
       "flexDirection": "row",
       "justifyContent": "center",
       "minWidth": 96,
       "padding": 8,
-      "paddingHorizontal": 14.5,
+      "paddingHorizontal": 15,
       "width": undefined,
     }
   }
@@ -98,13 +98,13 @@ Array [
         "backgroundColor": "#f3f2f1",
         "borderColor": "#8a8886",
         "borderRadius": 4,
-        "borderWidth": 1.5,
+        "borderWidth": 1,
         "display": "flex",
         "flexDirection": "row",
         "justifyContent": "center",
         "minWidth": 96,
         "padding": 8,
-        "paddingHorizontal": 14.5,
+        "paddingHorizontal": 15,
         "width": undefined,
       }
     }
@@ -306,13 +306,13 @@ Array [
         "backgroundColor": "#f3f2f1",
         "borderColor": "#8a8886",
         "borderRadius": 4,
-        "borderWidth": 1.5,
+        "borderWidth": 1,
         "display": "flex",
         "flexDirection": "row",
         "justifyContent": "center",
         "minWidth": 96,
         "padding": 8,
-        "paddingHorizontal": 14.5,
+        "paddingHorizontal": 15,
         "width": undefined,
       }
     }
@@ -467,13 +467,13 @@ Array [
         "backgroundColor": "#f3f2f1",
         "borderColor": "#8a8886",
         "borderRadius": 4,
-        "borderWidth": 1.5,
+        "borderWidth": 1,
         "display": "flex",
         "flexDirection": "row",
         "justifyContent": "center",
         "minWidth": 96,
         "padding": 8,
-        "paddingHorizontal": 14.5,
+        "paddingHorizontal": 15,
         "width": undefined,
       }
     }
@@ -654,7 +654,7 @@ Array [
             Object {
               "backgroundColor": "#d1d1d1",
               "display": "flex",
-              "height": 1.5,
+              "height": 1,
               "margin": 4,
               "marginVertical": undefined,
               "width": undefined,
@@ -813,13 +813,13 @@ Array [
         "backgroundColor": "#f3f2f1",
         "borderColor": "#8a8886",
         "borderRadius": 4,
-        "borderWidth": 1.5,
+        "borderWidth": 1,
         "display": "flex",
         "flexDirection": "row",
         "justifyContent": "center",
         "minWidth": 96,
         "padding": 8,
-        "paddingHorizontal": 14.5,
+        "paddingHorizontal": 15,
         "width": undefined,
       }
     }
@@ -1000,7 +1000,7 @@ Array [
             Object {
               "backgroundColor": "#d1d1d1",
               "display": "flex",
-              "height": 1.5,
+              "height": 1,
               "margin": 4,
               "marginVertical": undefined,
               "width": undefined,
@@ -1159,13 +1159,13 @@ Array [
         "backgroundColor": "#f3f2f1",
         "borderColor": "#8a8886",
         "borderRadius": 4,
-        "borderWidth": 1.5,
+        "borderWidth": 1,
         "display": "flex",
         "flexDirection": "row",
         "justifyContent": "center",
         "minWidth": 96,
         "padding": 8,
-        "paddingHorizontal": 14.5,
+        "paddingHorizontal": 15,
         "width": undefined,
       }
     }
@@ -1346,7 +1346,7 @@ Array [
             Object {
               "backgroundColor": "#d1d1d1",
               "display": "flex",
-              "height": 1.5,
+              "height": 1,
               "margin": 4,
               "marginVertical": undefined,
               "width": undefined,
@@ -1505,13 +1505,13 @@ Array [
         "backgroundColor": "#f3f2f1",
         "borderColor": "#8a8886",
         "borderRadius": 4,
-        "borderWidth": 1.5,
+        "borderWidth": 1,
         "display": "flex",
         "flexDirection": "row",
         "justifyContent": "center",
         "minWidth": 96,
         "padding": 8,
-        "paddingHorizontal": 14.5,
+        "paddingHorizontal": 15,
         "width": undefined,
       }
     }
@@ -1839,13 +1839,13 @@ Array [
         "backgroundColor": "#f3f2f1",
         "borderColor": "#8a8886",
         "borderRadius": 4,
-        "borderWidth": 1.5,
+        "borderWidth": 1,
         "display": "flex",
         "flexDirection": "row",
         "justifyContent": "center",
         "minWidth": 96,
         "padding": 8,
-        "paddingHorizontal": 14.5,
+        "paddingHorizontal": 15,
         "width": undefined,
       }
     }

packages/components/MenuButton/src/__tests__/__snapshots__/MenuButton.test.tsx.snap

@@ -25,7 +25,7 @@ exports[`ContextualMenu default 1`] = `
       "backgroundColor": "#f3f2f1",
       "borderColor": "#8a8886",
       "borderRadius": 4,
-      "borderWidth": 1.5,
+      "borderWidth": 1,
       "display": "flex",
       "flexDirection": "row",
       "justifyContent": "center",

packages/components/Notification/src/__tests__/__snapshots__/Notification.test.tsx.snap

@@ -191,14 +191,14 @@ exports[`Notification component tests Notification default 1`] = `
           "backgroundColor": "transparent",
           "borderColor": "#ffffff",
           "borderRadius": 4,
-          "borderWidth": 1.5,
+          "borderWidth": 1,
           "display": "flex",
           "flexDirection": "row",
           "justifyContent": "center",
           "marginStart": 16,
           "minWidth": 96,
           "padding": 8,
-          "paddingHorizontal": 14.5,
+          "paddingHorizontal": 15,
         }
       }
     >

packages/components/text/src/Text.tsx

@@ -69,7 +69,7 @@ export const Text = compressible<TextProps, TextTokens>((props: TextProps, useTo
     color,
     variant,
     fontFamily: font == 'base' ? 'primary' : font,
-    fontSize: globalTokens.font.size[size],
+    fontSize: globalTokens.font['size' + size],
     fontWeight: globalTokens.font.weight[weight] as FontWeightValue,
     // leave it undefined for tokens to be set by user
     fontStyle: italic ? 'italic' : undefined,

packages/experimental/Dropdown/src/Option/OptionTokens.ts

@@ -4,7 +4,7 @@ import type { OptionTokens } from './Option.types';
 
 export const defaultOptionTokens: TokenSettings<OptionTokens> = (t: Theme): OptionTokens => ({
   backgroundColor: t.colors.neutralBackground1,
-  borderRadius: globalTokens.corner.radius.medium,
+  borderRadius: globalTokens.corner.radius40,
   checkmarkColor: t.colors.neutralForeground2,
   checkmarkSize: 16,
   color: t.colors.neutralForeground2,

packages/experimental/MenuButton/src/__tests__/__snapshots__/MenuButton.test.tsx.snap

@@ -25,13 +25,13 @@ exports[`ContextualMenu default 1`] = `
       "backgroundColor": "#f3f2f1",
       "borderColor": "#8a8886",
       "borderRadius": 4,
-      "borderWidth": 1.5,
+      "borderWidth": 1,
       "display": "flex",
       "flexDirection": "row",
       "justifyContent": "center",
       "minWidth": 96,
       "padding": 8,
-      "paddingHorizontal": 14.5,
+      "paddingHorizontal": 15,
       "width": undefined,
     }
   }

packages/experimental/RadioGroup/src/Radio/RadioTokens.ts

@@ -7,9 +7,9 @@ export const defaultRadioTokens: TokenSettings<RadioTokens, Theme> = (t: Theme)
   ({
     borderColor: t.colors.transparentStroke,
     borderStyle: 'solid',
-    borderWidth: globalTokens.stroke.width.thin,
+    borderWidth: globalTokens.stroke.width10,
-    borderRadius: globalTokens.corner.radius.medium,
+    borderRadius: globalTokens.corner.radius40,
-    radioBorderWidth: globalTokens.stroke.width.thin,
+    radioBorderWidth: globalTokens.stroke.width10,
     radioVisibility: 0,
     variant: 'subheaderStandard',
     radioBorderStyle: 'solid',

packages/theming/apple-theme/package.json

@@ -32,8 +32,8 @@
   },
   "dependencies": {
     "@fluentui-react-native/default-theme": ">=0.16.10 <1.0.0",
-    "@fluentui-react-native/design-tokens-ios": "^0.26.0",
+    "@fluentui-react-native/design-tokens-ios": "^0.31.0",
-    "@fluentui-react-native/design-tokens-macos": "^0.13.0",
+    "@fluentui-react-native/design-tokens-macos": "^0.31.0",
     "@fluentui-react-native/memo-cache": "^1.1.7",
     "@fluentui-react-native/theme": ">=0.7.8 <1.0.0",
     "@fluentui-react-native/theme-types": ">=0.23.1 <1.0.0",

packages/theming/apple-theme/src/appleTypography.ios.ts

@@ -52,86 +52,86 @@ export function appleTypography(): Typography {
       // iOS styles
       caption2: {
         face: fontTokens.family.base,
-        size: fontTokens.size[100],
+        size: fontTokens.size100,
         weight: fontTokens.weight.regular,
-        lineHeight: fontTokens.lineHeight[100],
+        lineHeight: fontTokens.lineHeight100,
         letterSpacing: 0,
       },
       caption1: {
         face: fontTokens.family.base,
-        size: fontTokens.size[200],
+        size: fontTokens.size200,
         weight: fontTokens.weight.regular,
-        lineHeight: fontTokens.lineHeight[200],
+        lineHeight: fontTokens.lineHeight200,
         letterSpacing: -0.08,
       },
       caption1Strong: {
         face: fontTokens.family.base,
-        size: fontTokens.size[200],
+        size: fontTokens.size200,
         weight: fontTokens.weight.semibold,
-        lineHeight: fontTokens.lineHeight[200],
+        lineHeight: fontTokens.lineHeight200,
         letterSpacing: -0.08,
       },
       body2: {
         face: fontTokens.family.base,
-        size: fontTokens.size[300],
+        size: fontTokens.size300,
         weight: fontTokens.weight.regular,
-        lineHeight: fontTokens.lineHeight[300],
+        lineHeight: fontTokens.lineHeight300,
         letterSpacing: -0.23,
       },
       body2Strong: {
         face: fontTokens.family.base,
-        size: fontTokens.size[300],
+        size: fontTokens.size300,
         weight: fontTokens.weight.semibold,
-        lineHeight: fontTokens.lineHeight[300],
+        lineHeight: fontTokens.lineHeight300,
         letterSpacing: -0.23,
       },
       body1: {
         face: fontTokens.family.base,
-        size: fontTokens.size[400],
+        size: fontTokens.size400,
         weight: fontTokens.weight.regular,
-        lineHeight: fontTokens.lineHeight[400],
+        lineHeight: fontTokens.lineHeight400,
         letterSpacing: -0.43,
       },
       body1Strong: {
         face: fontTokens.family.base,
-        size: fontTokens.size[400],
+        size: fontTokens.size400,
         weight: fontTokens.weight.semibold,
-        lineHeight: fontTokens.lineHeight[400],
+        lineHeight: fontTokens.lineHeight400,
         letterSpacing: -0.43,
       },
       title3: {
         face: fontTokens.family.base,
-        size: fontTokens.size[500],
+        size: fontTokens.size500,
         weight: fontTokens.weight.semibold,
-        lineHeight: fontTokens.lineHeight[500],
+        lineHeight: fontTokens.lineHeight500,
         letterSpacing: -0.45,
       },
       title2: {
         face: fontTokens.family.base,
-        size: fontTokens.size[600],
+        size: fontTokens.size600,
         weight: fontTokens.weight.semibold,
-        lineHeight: fontTokens.lineHeight[600],
+        lineHeight: fontTokens.lineHeight600,
         letterSpacing: -0.26,
       },
       title1: {
         face: fontTokens.family.base,
-        size: fontTokens.size[700],
+        size: fontTokens.size700,
         weight: fontTokens.weight.bold,
-        lineHeight: fontTokens.lineHeight[700],
+        lineHeight: fontTokens.lineHeight700,
         letterSpacing: 0.38,
       },
       largeTitle: {
         face: fontTokens.family.base,
-        size: fontTokens.size[800],
+        size: fontTokens.size800,
         weight: fontTokens.weight.bold,
-        lineHeight: fontTokens.lineHeight[800],
+        lineHeight: fontTokens.lineHeight800,
         letterSpacing: 0.4,
       },
       display: {
         face: fontTokens.family.base,
-        size: fontTokens.size[900],
+        size: fontTokens.size900,
         weight: fontTokens.weight.bold,
-        lineHeight: fontTokens.lineHeight[900],
+        lineHeight: fontTokens.lineHeight900,
         letterSpacing: 0.26,
       },
     } as Variants,

packages/theming/apple-theme/src/getMacOSTokens.ts

@@ -32,15 +32,15 @@ export function getMacOSAliasTokens(mode: AppearanceOptions, isHighContrast: boo
 export function getMacOSShadowTokens(mode: AppearanceOptions, isHighContrast: boolean) {
   if (mode === 'light') {
     if (isHighContrast) {
-      return macOSLightHCShadowTokens.shadow;
+      return macOSLightHCShadowTokens;
     } else {
-      return macOSLightShadowTokens.shadow;
+      return macOSLightShadowTokens;
     }
   } else if (mode === 'dark') {
     if (isHighContrast) {
-      return macOSDarkHCShadowTokens.shadow;
+      return macOSDarkHCShadowTokens;
     } else {
-      return macOSDarkShadowTokens.shadow;
+      return macOSDarkShadowTokens;
     }
   } else if (mode === 'highContrast') {
     throw new Error('highContrast is not a valid AppearanceOptions on macOS');

packages/theming/apple-theme/src/getiOSTokens.ts

@@ -5,9 +5,9 @@ import { assertNever } from 'assert-never';
 
 export function getiOSShadowTokens(mode: AppearanceOptions) {
   if (mode === 'light') {
-    return iOSLightShadowTokens.shadow;
+    return iOSLightShadowTokens;
   } else if (mode === 'dark') {
-    return iOSDarkShadowTokens.shadow;
+    return iOSDarkShadowTokens;
   } else if (mode === 'highContrast') {
     throw new Error('highContrast is not a valid AppearanceOptions on iOS');
   } else {

packages/theming/default-theme/src/__tests__/__snapshots__/default-theme.test.ts.snap

@@ -769,7 +769,7 @@ Object {
 exports[`createDefaultTheme test themeOption - { appearance: 'dark', defaultAppearance: 'light' } 1`] = `
 Object {
   "colors": Object {
-    "accentButtonBackground": "#0078d4",
+    "accentButtonBackground": "#0c3b5e",
     "accentButtonText": "#1b1a19",
     "actionLink": "#f3f2f1",
     "actionLinkHovered": "#faf9f8",
@@ -798,8 +798,8 @@ Object {
     "brandForegroundLinkSelected": "#2899f5",
     "brandStroke1": "#2899f5",
     "brandStroke2": "#004c87",
-    "brandedBackground": "#2b88d8",
+    "brandedBackground": "#2886de",
-    "brandedBorder": "#deecf9",
+    "brandedBorder": "#479ef5",
     "brandedCheckedBackground": "#484644",
     "brandedCheckedContent": "#faf9f8",
     "brandedCheckedHoveredBackground": "#292827",
@@ -809,19 +809,19 @@ Object {
     "brandedDisabledBorder": "#252423",
     "brandedDisabledContent": "#3b3a39",
     "brandedDisabledIcon": "#3b3a39",
-    "brandedFocusedBackground": "#c7e0f4",
+    "brandedFocusedBackground": "#479ef5",
-    "brandedFocusedBorder": "#82c7ff",
+    "brandedFocusedBorder": "#62abf5",
     "brandedFocusedContent": "#1b1a19",
     "brandedFocusedIcon": "#1b1a19",
     "brandedFocusedSecondaryContent": "#201f1e",
-    "brandedHoveredBackground": "#c7e0f4",
+    "brandedHoveredBackground": "#479ef5",
-    "brandedHoveredBorder": "#82c7ff",
+    "brandedHoveredBorder": "#62abf5",
     "brandedHoveredContent": "#1b1a19",
     "brandedHoveredIcon": "#1b1a19",
     "brandedHoveredSecondaryContent": "#201f1e",
     "brandedIcon": "#1b1a19",
-    "brandedPressedBackground": "#deecf9",
+    "brandedPressedBackground": "#479ef5",
-    "brandedPressedBorder": "#82c7ff",
+    "brandedPressedBorder": "#62abf5",
     "brandedPressedContent": "#1b1a19",
     "brandedPressedIcon": "#1b1a19",
     "brandedPressedSecondaryContent": "#201f1e",
@@ -841,7 +841,7 @@ Object {
     "buttonTextDisabled": "#797775",
     "buttonTextHovered": "#f3f2f1",
     "buttonTextPressed": "#faf9f8",
-    "checkboxBackground": "#2b88d8",
+    "checkboxBackground": "#2886de",
     "checkboxBackgroundDisabled": "#252423",
     "checkboxBorderColor": "#979693",
     "checkmarkColor": "#1b1a19",
@@ -920,18 +920,18 @@ Object {
     "ghostPressedSecondaryContent": "#a19f9d",
     "ghostSecondaryContent": "#a19f9d",
     "inputBackground": "#1b1a19",
-    "inputBackgroundChecked": "#2b88d8",
+    "inputBackgroundChecked": "#2886de",
-    "inputBackgroundCheckedHovered": "#c7e0f4",
+    "inputBackgroundCheckedHovered": "#479ef5",
     "inputBorder": "#797775",
     "inputBorderHovered": "#f3f2f1",
-    "inputFocusBorderAlt": "#2b88d8",
+    "inputFocusBorderAlt": "#2886de",
     "inputForegroundChecked": "#1b1a19",
     "inputPlaceholderText": "#a19f9d",
     "inputText": "#f3f2f1",
     "inputTextHovered": "#faf9f8",
-    "link": "#2b88d8",
+    "link": "#2886de",
-    "linkHovered": "#82c7ff",
+    "linkHovered": "#62abf5",
-    "linkPressed": "#deecf9",
+    "linkPressed": "#479ef5",
     "listBackground": "#1b1a19",
     "listHeaderBackgroundHovered": "#252423",
     "listHeaderBackgroundPressed": "#292827",
@@ -942,7 +942,7 @@ Object {
     "menuBackground": "#252423",
     "menuDivider": "#484644",
     "menuHeader": "#ffffff",
-    "menuIcon": "#c7e0f4",
+    "menuIcon": "#479ef5",
     "menuItemBackgroundHovered": "#323130",
     "menuItemBackgroundPressed": "#3b3a39",
     "menuItemText": "#f3f2f1",
@@ -1012,12 +1012,12 @@ Object {
     "neutralStrokeAccessiblePressed": "#b3b3b3",
     "neutralStrokeAccessibleSelected": "#3aa0f3",
     "neutralStrokeDisabled": "#424242",
-    "personaActivityGlow": "#2b88d8",
+    "personaActivityGlow": "#2886de",
     "personaActivityRing": "#1b1a19",
-    "primaryButtonBackground": "#2b88d8",
+    "primaryButtonBackground": "#2886de",
     "primaryButtonBackgroundDisabled": "#252423",
-    "primaryButtonBackgroundHovered": "#c7e0f4",
+    "primaryButtonBackgroundHovered": "#479ef5",
-    "primaryButtonBackgroundPressed": "#deecf9",
+    "primaryButtonBackgroundPressed": "#479ef5",
     "primaryButtonBorder": "transparent",
     "primaryButtonBorderFocused": "transparent",
     "primaryButtonText": "#1b1a19",
@@ -1397,7 +1397,7 @@ Object {
 exports[`createDefaultTheme test themeOption - { appearance: 'dynamic', defaultAppearance: 'light' } 1`] = `
 Object {
   "colors": Object {
-    "accentButtonBackground": "#0078d4",
+    "accentButtonBackground": "#0c3b5e",
     "accentButtonText": "#1b1a19",
     "actionLink": "#f3f2f1",
     "actionLinkHovered": "#faf9f8",
@@ -1426,8 +1426,8 @@ Object {
     "brandForegroundLinkSelected": "#2899f5",
     "brandStroke1": "#2899f5",
     "brandStroke2": "#004c87",
-    "brandedBackground": "#2b88d8",
+    "brandedBackground": "#2886de",
-    "brandedBorder": "#deecf9",
+    "brandedBorder": "#479ef5",
     "brandedCheckedBackground": "#484644",
     "brandedCheckedContent": "#faf9f8",
     "brandedCheckedHoveredBackground": "#292827",
@@ -1437,19 +1437,19 @@ Object {
     "brandedDisabledBorder": "#252423",
     "brandedDisabledContent": "#3b3a39",
     "brandedDisabledIcon": "#3b3a39",
-    "brandedFocusedBackground": "#c7e0f4",
+    "brandedFocusedBackground": "#479ef5",
-    "brandedFocusedBorder": "#82c7ff",
+    "brandedFocusedBorder": "#62abf5",
     "brandedFocusedContent": "#1b1a19",
     "brandedFocusedIcon": "#1b1a19",
     "brandedFocusedSecondaryContent": "#201f1e",
-    "brandedHoveredBackground": "#c7e0f4",
+    "brandedHoveredBackground": "#479ef5",
-    "brandedHoveredBorder": "#82c7ff",
+    "brandedHoveredBorder": "#62abf5",
     "brandedHoveredContent": "#1b1a19",
     "brandedHoveredIcon": "#1b1a19",
     "brandedHoveredSecondaryContent": "#201f1e",
     "brandedIcon": "#1b1a19",
-    "brandedPressedBackground": "#deecf9",
+    "brandedPressedBackground": "#479ef5",
-    "brandedPressedBorder": "#82c7ff",
+    "brandedPressedBorder": "#62abf5",
     "brandedPressedContent": "#1b1a19",
     "brandedPressedIcon": "#1b1a19",
     "brandedPressedSecondaryContent": "#201f1e",
@@ -1469,7 +1469,7 @@ Object {
     "buttonTextDisabled": "#797775",
     "buttonTextHovered": "#f3f2f1",
     "buttonTextPressed": "#faf9f8",
-    "checkboxBackground": "#2b88d8",
+    "checkboxBackground": "#2886de",
     "checkboxBackgroundDisabled": "#252423",
     "checkboxBorderColor": "#979693",
     "checkmarkColor": "#1b1a19",
@@ -1548,18 +1548,18 @@ Object {
     "ghostPressedSecondaryContent": "#a19f9d",
     "ghostSecondaryContent": "#a19f9d",
     "inputBackground": "#1b1a19",
-    "inputBackgroundChecked": "#2b88d8",
+    "inputBackgroundChecked": "#2886de",
-    "inputBackgroundCheckedHovered": "#c7e0f4",
+    "inputBackgroundCheckedHovered": "#479ef5",
     "inputBorder": "#797775",
     "inputBorderHovered": "#f3f2f1",
-    "inputFocusBorderAlt": "#2b88d8",
+    "inputFocusBorderAlt": "#2886de",
     "inputForegroundChecked": "#1b1a19",
     "inputPlaceholderText": "#a19f9d",
     "inputText": "#f3f2f1",
     "inputTextHovered": "#faf9f8",
-    "link": "#2b88d8",
+    "link": "#2886de",
-    "linkHovered": "#82c7ff",
+    "linkHovered": "#62abf5",
-    "linkPressed": "#deecf9",
+    "linkPressed": "#479ef5",
     "listBackground": "#1b1a19",
     "listHeaderBackgroundHovered": "#252423",
     "listHeaderBackgroundPressed": "#292827",
@@ -1570,7 +1570,7 @@ Object {
     "menuBackground": "#252423",
     "menuDivider": "#484644",
     "menuHeader": "#ffffff",
-    "menuIcon": "#c7e0f4",
+    "menuIcon": "#479ef5",
     "menuItemBackgroundHovered": "#323130",
     "menuItemBackgroundPressed": "#3b3a39",
     "menuItemText": "#f3f2f1",
@@ -1640,12 +1640,12 @@ Object {
     "neutralStrokeAccessiblePressed": "#b3b3b3",
     "neutralStrokeAccessibleSelected": "#3aa0f3",
     "neutralStrokeDisabled": "#424242",
-    "personaActivityGlow": "#2b88d8",
+    "personaActivityGlow": "#2886de",
     "personaActivityRing": "#1b1a19",
-    "primaryButtonBackground": "#2b88d8",
+    "primaryButtonBackground": "#2886de",
     "primaryButtonBackgroundDisabled": "#252423",
-    "primaryButtonBackgroundHovered": "#c7e0f4",
+    "primaryButtonBackgroundHovered": "#479ef5",
-    "primaryButtonBackgroundPressed": "#deecf9",
+    "primaryButtonBackgroundPressed": "#479ef5",
     "primaryButtonBorder": "transparent",
     "primaryButtonBorderFocused": "transparent",
     "primaryButtonText": "#1b1a19",
@@ -3065,7 +3065,7 @@ Object {
 exports[`createDefaultTheme test themeOption - { appearance: 'light', defaultAppearance: 'light' } 1`] = `
 Object {
   "colors": Object {
-    "accentButtonBackground": "#0078d4",
+    "accentButtonBackground": "#0f6cbd",
     "accentButtonText": "#ffffff",
     "actionLink": "#323130",
     "actionLinkHovered": "#201f1e",
@@ -3094,8 +3094,8 @@ Object {
     "brandForegroundLinkSelected": "#106ebe",
     "brandStroke1": "#0078d4",
     "brandStroke2": "#c7e0f4",
-    "brandedBackground": "#0078d4",
+    "brandedBackground": "#0f6cbd",
-    "brandedBorder": "#005a9e",
+    "brandedBorder": "#0f548c",
     "brandedCheckedBackground": "#c8c6c4",
     "brandedCheckedContent": "#201f1e",
     "brandedCheckedHoveredBackground": "#edebe9",
@@ -3105,19 +3105,19 @@ Object {
     "brandedDisabledBorder": "#f3f2f1",
     "brandedDisabledContent": "#d2d0ce",
     "brandedDisabledIcon": "#d2d0ce",
-    "brandedFocusedBackground": "#106ebe",
+    "brandedFocusedBackground": "#115ea3",
-    "brandedFocusedBorder": undefined,
+    "brandedFocusedBorder": "#0c3b5e",
     "brandedFocusedContent": "#ffffff",
     "brandedFocusedIcon": "#ffffff",
     "brandedFocusedSecondaryContent": "#faf9f8",
-    "brandedHoveredBackground": "#106ebe",
+    "brandedHoveredBackground": "#115ea3",
-    "brandedHoveredBorder": undefined,
+    "brandedHoveredBorder": "#0c3b5e",
     "brandedHoveredContent": "#ffffff",
     "brandedHoveredIcon": "#ffffff",
     "brandedHoveredSecondaryContent": "#faf9f8",
     "brandedIcon": "#ffffff",
-    "brandedPressedBackground": "#005a9e",
+    "brandedPressedBackground": "#0f548c",
-    "brandedPressedBorder": undefined,
+    "brandedPressedBorder": "#0c3b5e",
     "brandedPressedContent": "#ffffff",
     "brandedPressedIcon": "#ffffff",
     "brandedPressedSecondaryContent": "#faf9f8",
@@ -3137,7 +3137,7 @@ Object {
     "buttonTextDisabled": "#a19f9d",
     "buttonTextHovered": "#201f1e",
     "buttonTextPressed": "#201f1e",
-    "checkboxBackground": "#0078d4",
+    "checkboxBackground": "#0f6cbd",
     "checkboxBackgroundDisabled": "#f3f2f1",
     "checkboxBorderColor": "#8a8886",
     "checkmarkColor": "#ffffff",
@@ -3216,18 +3216,18 @@ Object {
     "ghostPressedSecondaryContent": "#605e5c",
     "ghostSecondaryContent": "#605e5c",
     "inputBackground": "#ffffff",
-    "inputBackgroundChecked": "#0078d4",
+    "inputBackgroundChecked": "#0f6cbd",
-    "inputBackgroundCheckedHovered": "#106ebe",
+    "inputBackgroundCheckedHovered": "#115ea3",
     "inputBorder": "#a19f9d",
     "inputBorderHovered": "#323130",
-    "inputFocusBorderAlt": "#0078d4",
+    "inputFocusBorderAlt": "#0f6cbd",
     "inputForegroundChecked": "#ffffff",
     "inputPlaceholderText": "#605e5c",
     "inputText": "#323130",
     "inputTextHovered": "#201f1e",
-    "link": "#0078d4",
+    "link": "#0f6cbd",
-    "linkHovered": undefined,
+    "linkHovered": "#0c3b5e",
-    "linkPressed": "#005a9e",
+    "linkPressed": "#0f548c",
     "listBackground": "#ffffff",
     "listHeaderBackgroundHovered": "#f3f2f1",
     "listHeaderBackgroundPressed": "#edebe9",
@@ -3237,8 +3237,8 @@ Object {
     "listText": "#323130",
     "menuBackground": "#ffffff",
     "menuDivider": "#c8c6c4",
-    "menuHeader": "#0078d4",
+    "menuHeader": "#0f6cbd",
-    "menuIcon": "#0078d4",
+    "menuIcon": "#0f6cbd",
     "menuItemBackgroundHovered": "#f3f2f1",
     "menuItemBackgroundPressed": "#edebe9",
     "menuItemText": "#323130",
@@ -3308,12 +3308,12 @@ Object {
     "neutralStrokeAccessiblePressed": "#4d4d4d",
     "neutralStrokeAccessibleSelected": "#0078d4",
     "neutralStrokeDisabled": "#e0e0e0",
-    "personaActivityGlow": "#0078d4",
+    "personaActivityGlow": "#0f6cbd",
     "personaActivityRing": "#ffffff",
-    "primaryButtonBackground": "#0078d4",
+    "primaryButtonBackground": "#0f6cbd",
     "primaryButtonBackgroundDisabled": "#f3f2f1",
-    "primaryButtonBackgroundHovered": "#106ebe",
+    "primaryButtonBackgroundHovered": "#115ea3",
-    "primaryButtonBackgroundPressed": "#005a9e",
+    "primaryButtonBackgroundPressed": "#0f548c",
     "primaryButtonBorder": "transparent",
     "primaryButtonBorderFocused": "transparent",
     "primaryButtonText": "#ffffff",
@@ -3693,7 +3693,7 @@ Object {
 exports[`createDefaultTheme test themeOption - { appearance: undefined, defaultAppearance: 'light' } 1`] = `
 Object {
   "colors": Object {
-    "accentButtonBackground": "#0078d4",
+    "accentButtonBackground": "#0f6cbd",
     "accentButtonText": "#ffffff",
     "actionLink": "#323130",
     "actionLinkHovered": "#201f1e",
@@ -3722,8 +3722,8 @@ Object {
     "brandForegroundLinkSelected": "#106ebe",
     "brandStroke1": "#0078d4",
     "brandStroke2": "#c7e0f4",
-    "brandedBackground": "#0078d4",
+    "brandedBackground": "#0f6cbd",
-    "brandedBorder": "#005a9e",
+    "brandedBorder": "#0f548c",
     "brandedCheckedBackground": "#c8c6c4",
     "brandedCheckedContent": "#201f1e",
     "brandedCheckedHoveredBackground": "#edebe9",
@@ -3733,19 +3733,19 @@ Object {
     "brandedDisabledBorder": "#f3f2f1",
     "brandedDisabledContent": "#d2d0ce",
     "brandedDisabledIcon": "#d2d0ce",
-    "brandedFocusedBackground": "#106ebe",
+    "brandedFocusedBackground": "#115ea3",
-    "brandedFocusedBorder": undefined,
+    "brandedFocusedBorder": "#0c3b5e",
     "brandedFocusedContent": "#ffffff",
     "brandedFocusedIcon": "#ffffff",
     "brandedFocusedSecondaryContent": "#faf9f8",
-    "brandedHoveredBackground": "#106ebe",
+    "brandedHoveredBackground": "#115ea3",
-    "brandedHoveredBorder": undefined,
+    "brandedHoveredBorder": "#0c3b5e",
     "brandedHoveredContent": "#ffffff",
     "brandedHoveredIcon": "#ffffff",
     "brandedHoveredSecondaryContent": "#faf9f8",
     "brandedIcon": "#ffffff",
-    "brandedPressedBackground": "#005a9e",
+    "brandedPressedBackground": "#0f548c",
-    "brandedPressedBorder": undefined,
+    "brandedPressedBorder": "#0c3b5e",
     "brandedPressedContent": "#ffffff",
     "brandedPressedIcon": "#ffffff",
     "brandedPressedSecondaryContent": "#faf9f8",
@@ -3765,7 +3765,7 @@ Object {
     "buttonTextDisabled": "#a19f9d",
     "buttonTextHovered": "#201f1e",
     "buttonTextPressed": "#201f1e",
-    "checkboxBackground": "#0078d4",
+    "checkboxBackground": "#0f6cbd",
     "checkboxBackgroundDisabled": "#f3f2f1",
     "checkboxBorderColor": "#8a8886",
     "checkmarkColor": "#ffffff",
@@ -3844,18 +3844,18 @@ Object {
     "ghostPressedSecondaryContent": "#605e5c",
     "ghostSecondaryContent": "#605e5c",
     "inputBackground": "#ffffff",
-    "inputBackgroundChecked": "#0078d4",
+    "inputBackgroundChecked": "#0f6cbd",
-    "inputBackgroundCheckedHovered": "#106ebe",
+    "inputBackgroundCheckedHovered": "#115ea3",
     "inputBorder": "#a19f9d",
     "inputBorderHovered": "#323130",
-    "inputFocusBorderAlt": "#0078d4",
+    "inputFocusBorderAlt": "#0f6cbd",
     "inputForegroundChecked": "#ffffff",
     "inputPlaceholderText": "#605e5c",
     "inputText": "#323130",
     "inputTextHovered": "#201f1e",
-    "link": "#0078d4",
+    "link": "#0f6cbd",
-    "linkHovered": undefined,
+    "linkHovered": "#0c3b5e",
-    "linkPressed": "#005a9e",
+    "linkPressed": "#0f548c",
     "listBackground": "#ffffff",
     "listHeaderBackgroundHovered": "#f3f2f1",
     "listHeaderBackgroundPressed": "#edebe9",
@@ -3865,8 +3865,8 @@ Object {
     "listText": "#323130",
     "menuBackground": "#ffffff",
     "menuDivider": "#c8c6c4",
-    "menuHeader": "#0078d4",
+    "menuHeader": "#0f6cbd",
-    "menuIcon": "#0078d4",
+    "menuIcon": "#0f6cbd",
     "menuItemBackgroundHovered": "#f3f2f1",
     "menuItemBackgroundPressed": "#edebe9",
     "menuItemText": "#323130",
@@ -3936,12 +3936,12 @@ Object {
     "neutralStrokeAccessiblePressed": "#4d4d4d",
     "neutralStrokeAccessibleSelected": "#0078d4",
     "neutralStrokeDisabled": "#e0e0e0",
-    "personaActivityGlow": "#0078d4",
+    "personaActivityGlow": "#0f6cbd",
     "personaActivityRing": "#ffffff",
-    "primaryButtonBackground": "#0078d4",
+    "primaryButtonBackground": "#0f6cbd",
     "primaryButtonBackgroundDisabled": "#f3f2f1",
-    "primaryButtonBackgroundHovered": "#106ebe",
+    "primaryButtonBackgroundHovered": "#115ea3",
-    "primaryButtonBackgroundPressed": "#005a9e",
+    "primaryButtonBackgroundPressed": "#0f548c",
     "primaryButtonBorder": "transparent",
     "primaryButtonBorderFocused": "transparent",
     "primaryButtonText": "#ffffff",
@@ -4840,7 +4840,7 @@ Object {
 exports[`defaultFluentDarkTheme test 1`] = `
 Object {
   "colors": Object {
-    "accentButtonBackground": "#0078d4",
+    "accentButtonBackground": "#0c3b5e",
     "accentButtonText": "#1b1a19",
     "actionLink": "#f3f2f1",
     "actionLinkHovered": "#faf9f8",
@@ -4869,8 +4869,8 @@ Object {
     "brandForegroundLinkSelected": "#2899f5",
     "brandStroke1": "#2899f5",
     "brandStroke2": "#004c87",
-    "brandedBackground": "#2b88d8",
+    "brandedBackground": "#2886de",
-    "brandedBorder": "#deecf9",
+    "brandedBorder": "#479ef5",
     "brandedCheckedBackground": "#484644",
     "brandedCheckedContent": "#faf9f8",
     "brandedCheckedHoveredBackground": "#292827",
@@ -4880,19 +4880,19 @@ Object {
     "brandedDisabledBorder": "#252423",
     "brandedDisabledContent": "#3b3a39",
     "brandedDisabledIcon": "#3b3a39",
-    "brandedFocusedBackground": "#c7e0f4",
+    "brandedFocusedBackground": "#479ef5",
-    "brandedFocusedBorder": "#82c7ff",
+    "brandedFocusedBorder": "#62abf5",
     "brandedFocusedContent": "#1b1a19",
     "brandedFocusedIcon": "#1b1a19",
     "brandedFocusedSecondaryContent": "#201f1e",
-    "brandedHoveredBackground": "#c7e0f4",
+    "brandedHoveredBackground": "#479ef5",
-    "brandedHoveredBorder": "#82c7ff",
+    "brandedHoveredBorder": "#62abf5",
     "brandedHoveredContent": "#1b1a19",
     "brandedHoveredIcon": "#1b1a19",
     "brandedHoveredSecondaryContent": "#201f1e",
     "brandedIcon": "#1b1a19",
-    "brandedPressedBackground": "#deecf9",
+    "brandedPressedBackground": "#479ef5",
-    "brandedPressedBorder": "#82c7ff",
+    "brandedPressedBorder": "#62abf5",
     "brandedPressedContent": "#1b1a19",
     "brandedPressedIcon": "#1b1a19",
     "brandedPressedSecondaryContent": "#201f1e",
@@ -4912,7 +4912,7 @@ Object {
     "buttonTextDisabled": "#797775",
     "buttonTextHovered": "#f3f2f1",
     "buttonTextPressed": "#faf9f8",
-    "checkboxBackground": "#2b88d8",
+    "checkboxBackground": "#2886de",
     "checkboxBackgroundDisabled": "#252423",
     "checkboxBorderColor": "#979693",
     "checkmarkColor": "#1b1a19",
@@ -4991,18 +4991,18 @@ Object {
     "ghostPressedSecondaryContent": "#a19f9d",
     "ghostSecondaryContent": "#a19f9d",
     "inputBackground": "#1b1a19",
-    "inputBackgroundChecked": "#2b88d8",
+    "inputBackgroundChecked": "#2886de",
-    "inputBackgroundCheckedHovered": "#c7e0f4",
+    "inputBackgroundCheckedHovered": "#479ef5",
     "inputBorder": "#797775",
     "inputBorderHovered": "#f3f2f1",
-    "inputFocusBorderAlt": "#2b88d8",
+    "inputFocusBorderAlt": "#2886de",
     "inputForegroundChecked": "#1b1a19",
     "inputPlaceholderText": "#a19f9d",
     "inputText": "#f3f2f1",
     "inputTextHovered": "#faf9f8",
-    "link": "#2b88d8",
+    "link": "#2886de",
-    "linkHovered": "#82c7ff",
+    "linkHovered": "#62abf5",
-    "linkPressed": "#deecf9",
+    "linkPressed": "#479ef5",
     "listBackground": "#1b1a19",
     "listHeaderBackgroundHovered": "#252423",
     "listHeaderBackgroundPressed": "#292827",
@@ -5013,7 +5013,7 @@ Object {
     "menuBackground": "#252423",
     "menuDivider": "#484644",
     "menuHeader": "#ffffff",
-    "menuIcon": "#c7e0f4",
+    "menuIcon": "#479ef5",
     "menuItemBackgroundHovered": "#323130",
     "menuItemBackgroundPressed": "#3b3a39",
     "menuItemText": "#f3f2f1",
@@ -5083,12 +5083,12 @@ Object {
     "neutralStrokeAccessiblePressed": "#b3b3b3",
     "neutralStrokeAccessibleSelected": "#3aa0f3",
     "neutralStrokeDisabled": "#424242",
-    "personaActivityGlow": "#2b88d8",
+    "personaActivityGlow": "#2886de",
     "personaActivityRing": "#1b1a19",
-    "primaryButtonBackground": "#2b88d8",
+    "primaryButtonBackground": "#2886de",
     "primaryButtonBackgroundDisabled": "#252423",
-    "primaryButtonBackgroundHovered": "#c7e0f4",
+    "primaryButtonBackgroundHovered": "#479ef5",
-    "primaryButtonBackgroundPressed": "#deecf9",
+    "primaryButtonBackgroundPressed": "#479ef5",
     "primaryButtonBorder": "transparent",
     "primaryButtonBorderFocused": "transparent",
     "primaryButtonText": "#1b1a19",
@@ -5468,7 +5468,7 @@ Object {
 exports[`defaultFluentTheme test 1`] = `
 Object {
   "colors": Object {
-    "accentButtonBackground": "#0078d4",
+    "accentButtonBackground": "#0f6cbd",
     "accentButtonText": "#ffffff",
     "actionLink": "#323130",
     "actionLinkHovered": "#201f1e",
@@ -5497,8 +5497,8 @@ Object {
     "brandForegroundLinkSelected": "#106ebe",
     "brandStroke1": "#0078d4",
     "brandStroke2": "#c7e0f4",
-    "brandedBackground": "#0078d4",
+    "brandedBackground": "#0f6cbd",
-    "brandedBorder": "#005a9e",
+    "brandedBorder": "#0f548c",
     "brandedCheckedBackground": "#c8c6c4",
     "brandedCheckedContent": "#201f1e",
     "brandedCheckedHoveredBackground": "#edebe9",
@@ -5508,19 +5508,19 @@ Object {
     "brandedDisabledBorder": "#f3f2f1",
     "brandedDisabledContent": "#d2d0ce",
     "brandedDisabledIcon": "#d2d0ce",
-    "brandedFocusedBackground": "#106ebe",
+    "brandedFocusedBackground": "#115ea3",
-    "brandedFocusedBorder": undefined,
+    "brandedFocusedBorder": "#0c3b5e",
     "brandedFocusedContent": "#ffffff",
     "brandedFocusedIcon": "#ffffff",
     "brandedFocusedSecondaryContent": "#faf9f8",
-    "brandedHoveredBackground": "#106ebe",
+    "brandedHoveredBackground": "#115ea3",
-    "brandedHoveredBorder": undefined,
+    "brandedHoveredBorder": "#0c3b5e",
     "brandedHoveredContent": "#ffffff",
     "brandedHoveredIcon": "#ffffff",
     "brandedHoveredSecondaryContent": "#faf9f8",
     "brandedIcon": "#ffffff",
-    "brandedPressedBackground": "#005a9e",
+    "brandedPressedBackground": "#0f548c",
-    "brandedPressedBorder": undefined,
+    "brandedPressedBorder": "#0c3b5e",
     "brandedPressedContent": "#ffffff",
     "brandedPressedIcon": "#ffffff",
     "brandedPressedSecondaryContent": "#faf9f8",
@@ -5540,7 +5540,7 @@ Object {
     "buttonTextDisabled": "#a19f9d",
     "buttonTextHovered": "#201f1e",
     "buttonTextPressed": "#201f1e",
-    "checkboxBackground": "#0078d4",
+    "checkboxBackground": "#0f6cbd",
     "checkboxBackgroundDisabled": "#f3f2f1",
     "checkboxBorderColor": "#8a8886",
     "checkmarkColor": "#ffffff",
@@ -5619,18 +5619,18 @@ Object {
     "ghostPressedSecondaryContent": "#605e5c",
     "ghostSecondaryContent": "#605e5c",
     "inputBackground": "#ffffff",
-    "inputBackgroundChecked": "#0078d4",
+    "inputBackgroundChecked": "#0f6cbd",
-    "inputBackgroundCheckedHovered": "#106ebe",
+    "inputBackgroundCheckedHovered": "#115ea3",
     "inputBorder": "#a19f9d",
     "inputBorderHovered": "#323130",
-    "inputFocusBorderAlt": "#0078d4",
+    "inputFocusBorderAlt": "#0f6cbd",
     "inputForegroundChecked": "#ffffff",
     "inputPlaceholderText": "#605e5c",
     "inputText": "#323130",
     "inputTextHovered": "#201f1e",
-    "link": "#0078d4",
+    "link": "#0f6cbd",
-    "linkHovered": undefined,
+    "linkHovered": "#0c3b5e",
-    "linkPressed": "#005a9e",
+    "linkPressed": "#0f548c",
     "listBackground": "#ffffff",
     "listHeaderBackgroundHovered": "#f3f2f1",
     "listHeaderBackgroundPressed": "#edebe9",
@@ -5640,8 +5640,8 @@ Object {
     "listText": "#323130",
     "menuBackground": "#ffffff",
     "menuDivider": "#c8c6c4",
-    "menuHeader": "#0078d4",
+    "menuHeader": "#0f6cbd",
-    "menuIcon": "#0078d4",
+    "menuIcon": "#0f6cbd",
     "menuItemBackgroundHovered": "#f3f2f1",
     "menuItemBackgroundPressed": "#edebe9",
     "menuItemText": "#323130",
@@ -5711,12 +5711,12 @@ Object {
     "neutralStrokeAccessiblePressed": "#4d4d4d",
     "neutralStrokeAccessibleSelected": "#0078d4",
     "neutralStrokeDisabled": "#e0e0e0",
-    "personaActivityGlow": "#0078d4",
+    "personaActivityGlow": "#0f6cbd",
     "personaActivityRing": "#ffffff",
-    "primaryButtonBackground": "#0078d4",
+    "primaryButtonBackground": "#0f6cbd",
     "primaryButtonBackgroundDisabled": "#f3f2f1",
-    "primaryButtonBackgroundHovered": "#106ebe",
+    "primaryButtonBackgroundHovered": "#115ea3",
-    "primaryButtonBackgroundPressed": "#005a9e",
+    "primaryButtonBackgroundPressed": "#0f548c",
     "primaryButtonBorder": "transparent",
     "primaryButtonBorderFocused": "transparent",
     "primaryButtonText": "#ffffff",

packages/theming/default-theme/src/defaultColors.macos.ts

@@ -0,0 +1,510 @@
+import { Palette, FabricWebPalette, ThemeColorDefinition } from '@fluentui-react-native/theme-types';
+import { globalTokens } from '@fluentui-react-native/theme-tokens';
+import { createColorAliasTokens } from './createAliasTokens';
+
+/**
+ * Generate a palette from a set of fabric web colors, like those output from the theme designer.
+ *
+ * @param palette - fabric web palette definition.  This allows initializing our color values in the same
+ * manner the fabric web does it
+ */
+export function paletteFromFabricColors(p: FabricWebPalette, isInverted?: boolean): Palette {
+  return {
+    background: p.white,
+    bodyStandoutBackground: p.neutralLighterAlt,
+    bodyFrameBackground: p.white,
+    bodyFrameDivider: p.neutralLight,
+    bodyText: p.neutralPrimary,
+    bodyTextChecked: p.black,
+    subText: p.neutralSecondary,
+    bodyDivider: p.neutralLight,
+
+    disabledBackground: isInverted ? p.neutralQuaternaryAlt : p.neutralLighter,
+    disabledText: p.neutralTertiary,
+    disabledBodyText: p.neutralTertiary,
+    disabledSubtext: p.neutralQuaternary,
+    disabledBodySubtext: p.neutralTertiaryAlt,
+
+    focusBorder: p.neutralSecondary,
+    variantBorder: p.neutralLight,
+    variantBorderHovered: p.neutralTertiary,
+    defaultStateBackground: p.neutralLighterAlt,
+
+    errorText: !isInverted ? p.redDark : '#ff5f5f',
+    warningText: !isInverted ? globalTokens.color.grey20 : globalTokens.color.white,
+    errorBackground: !isInverted ? 'rgba(245, 135, 145, .2)' : 'rgba(232, 17, 35, .5)',
+    blockingBackground: !isInverted ? 'rgba(250, 65, 0, .2)' : 'rgba(234, 67, 0, .5)',
+    warningBackground: !isInverted ? 'rgba(255, 200, 10, .2)' : 'rgba(255, 251, 0, .6)',
+    warningHighlight: !isInverted ? '#ffb900' : '#fff100',
+    successBackground: !isInverted ? 'rgba(95, 210, 85, .2)' : 'rgba(186, 216, 10, .4)',
+
+    inputBorder: p.neutralTertiary,
+    inputBorderHovered: p.neutralPrimary,
+    inputBackground: p.white,
+    inputBackgroundChecked: p.themePrimary,
+    inputBackgroundCheckedHovered: p.themeDarkAlt,
+    inputForegroundChecked: p.white,
+    inputFocusBorderAlt: p.themePrimary,
+    smallInputBorder: p.neutralSecondary,
+    inputText: p.neutralPrimary,
+    inputTextHovered: p.neutralDark,
+    inputPlaceholderText: p.neutralSecondary,
+
+    buttonBackground: p.neutralLighter,
+    buttonBackgroundChecked: p.neutralTertiaryAlt,
+    buttonBackgroundHovered: p.neutralLight,
+    buttonBackgroundCheckedHovered: p.neutralLight,
+    buttonBackgroundPressed: p.neutralLight,
+    buttonBackgroundDisabled: p.neutralLighter,
+    buttonBorder: p.neutralSecondaryAlt,
+    buttonText: isInverted ? p.black : p.neutralPrimary,
+    buttonTextHovered: isInverted ? p.neutralPrimary : p.neutralDark,
+    buttonTextChecked: p.neutralDark,
+    buttonTextCheckedHovered: p.black,
+    buttonTextPressed: p.neutralDark,
+    buttonTextDisabled: p.neutralTertiary,
+    buttonBorderDisabled: p.neutralLighter,
+    buttonBorderFocused: p.neutralSecondaryAlt,
+
+    primaryButtonBackground: p.themePrimary,
+    primaryButtonBackgroundHovered: p.themeDarkAlt,
+    primaryButtonBackgroundPressed: p.themeDark,
+    primaryButtonBackgroundDisabled: p.neutralLighter,
+    primaryButtonBorder: 'transparent',
+    primaryButtonBorderFocused: 'transparent',
+    primaryButtonText: p.white,
+    primaryButtonTextHovered: p.white,
+    primaryButtonTextPressed: p.white,
+    primaryButtonTextDisabled: p.neutralQuaternary,
+
+    accentButtonBackground: p.accent,
+    accentButtonText: p.white,
+
+    menuBackground: isInverted ? p.neutralLighter : p.white,
+    menuDivider: isInverted ? p.neutralTertiaryAlt : p.neutralTertiaryAlt,
+    menuIcon: isInverted ? p.themeDarkAlt : p.themePrimary,
+    menuHeader: isInverted ? p.black : p.themePrimary,
+    menuItemBackgroundHovered: isInverted ? p.neutralQuaternaryAlt : p.neutralLighter,
+    menuItemBackgroundPressed: isInverted ? p.neutralQuaternary : p.neutralLight,
+    menuItemText: p.neutralPrimary,
+    menuItemTextHovered: p.neutralDark,
+
+    listBackground: p.white,
+    listText: p.neutralPrimary,
+    listItemBackgroundHovered: p.neutralLighter,
+    listItemBackgroundChecked: p.neutralLight,
+    listItemBackgroundCheckedHovered: p.neutralQuaternaryAlt,
+
+    listHeaderBackgroundHovered: p.neutralLighter,
+    listHeaderBackgroundPressed: p.neutralLight,
+
+    actionLink: p.neutralPrimary,
+    actionLinkHovered: p.neutralDark,
+    link: p.themePrimary,
+    linkHovered: p.themeDarker,
+    linkPressed: p.themeDark,
+
+    // Control Color Tokens
+    defaultBackground: p.neutralLighter,
+    defaultBorder: p.neutralSecondaryAlt,
+    defaultContent: isInverted ? p.black : p.neutralPrimary,
+    defaultIcon: isInverted ? p.black : p.neutralPrimary,
+
+    defaultHoveredBackground: p.neutralLight,
+    defaultHoveredBorder: p.neutralSecondaryAlt,
+    defaultHoveredContent: isInverted ? p.neutralPrimary : p.neutralDark,
+    defaultHoveredIcon: isInverted ? p.neutralPrimary : p.neutralDark,
+
+    defaultFocusedBackground: p.neutralLight,
+    defaultFocusedBorder: p.neutralSecondaryAlt,
+    defaultFocusedContent: isInverted ? p.neutralPrimary : p.neutralDark,
+    defaultFocusedIcon: isInverted ? p.neutralPrimary : p.neutralDark,
+
+    defaultPressedBackground: p.neutralLight,
+    defaultPressedBorder: p.neutralSecondaryAlt,
+    defaultPressedContent: p.neutralDark,
+    defaultPressedIcon: p.neutralDark,
+
+    defaultDisabledBackground: p.neutralLighter,
+    defaultDisabledBorder: p.neutralLighter,
+    defaultDisabledContent: p.neutralTertiary,
+    defaultDisabledIcon: p.neutralTertiary,
+
+    ghostBackground: p.white,
+    ghostBorder: p.white,
+    ghostContent: p.neutralPrimary,
+    ghostIcon: p.neutralPrimary,
+
+    ghostHoveredBackground: p.neutralLighter,
+    ghostHoveredBorder: p.neutralLighter,
+    ghostHoveredContent: p.neutralDark,
+    ghostHoveredIcon: p.neutralDark,
+
+    ghostFocusedBackground: p.neutralLighter,
+    ghostFocusedBorder: p.neutralSecondaryAlt,
+    ghostFocusedContent: p.neutralDark,
+    ghostFocusedIcon: p.neutralDark,
+
+    ghostPressedBackground: p.neutralLight,
+    ghostPressedBorder: p.neutralLight,
+    ghostPressedContent: p.neutralDark,
+    ghostPressedIcon: p.neutralDark,
+
+    ghostDisabledBackground: p.white,
+    ghostDisabledBorder: p.white,
+    ghostDisabledContent: p.neutralTertiary,
+    ghostDisabledIcon: p.neutralTertiary,
+
+    brandedBackground: p.themePrimary,
+    brandedBorder: p.themeDark,
+    brandedContent: p.white,
+    brandedIcon: p.white,
+
+    brandedHoveredBackground: p.themeDarkAlt,
+    brandedHoveredBorder: p.themeDarker,
+    brandedHoveredContent: p.white,
+    brandedHoveredIcon: p.white,
+
+    brandedFocusedBackground: p.themeDarkAlt,
+    brandedFocusedBorder: p.themeDarker,
+    brandedFocusedContent: p.white,
+    brandedFocusedIcon: p.white,
+
+    brandedPressedBackground: p.themeDark,
+    brandedPressedBorder: p.themeDarker,
+    brandedPressedContent: p.white,
+    brandedPressedIcon: p.white,
+
+    brandedDisabledBackground: p.neutralLighter,
+    brandedDisabledBorder: p.neutralLighter,
+    brandedDisabledContent: p.neutralQuaternary,
+    brandedDisabledIcon: p.neutralQuaternary,
+
+    defaultCheckedBackground: p.neutralTertiaryAlt,
+    defaultCheckedContent: p.neutralDark,
+    defaultCheckedHoveredBackground: p.neutralLight,
+    defaultCheckedHoveredContent: isInverted ? p.neutralPrimary : p.neutralDark,
+
+    brandedCheckedBackground: p.neutralTertiaryAlt,
+    brandedCheckedContent: p.neutralDark,
+    brandedCheckedHoveredBackground: p.neutralLight,
+    brandedCheckedHoveredContent: isInverted ? p.neutralPrimary : p.neutralDark,
+
+    ghostCheckedBackground: p.neutralLight,
+    ghostCheckedContent: p.black,
+    ghostCheckedHoveredBackground: p.neutralLighter,
+    ghostCheckedHoveredContent: p.neutralDark,
+    ghostCheckedHoveredBorder: p.neutralDark,
+
+    ghostSecondaryContent: p.neutralSecondary,
+    ghostFocusedSecondaryContent: p.neutralSecondary,
+    ghostHoveredSecondaryContent: p.neutralSecondary,
+    ghostPressedSecondaryContent: p.neutralSecondary,
+
+    brandedSecondaryContent: p.neutralLighterAlt,
+    brandedFocusedSecondaryContent: p.neutralLighterAlt,
+    brandedHoveredSecondaryContent: p.neutralLighterAlt,
+    brandedPressedSecondaryContent: p.neutralLighterAlt,
+
+    defaultDisabledSecondaryContent: p.neutralTertiary,
+    defaultHoveredSecondaryContent: p.neutralTertiary,
+    defaultPressedSecondaryContent: p.neutralTertiary,
+
+    checkmarkColor: p.white,
+    checkboxBackground: p.themePrimary,
+    checkboxBackgroundDisabled: p.neutralLighter,
+    checkboxBorderColor: p.neutralSecondaryAlt,
+
+    personaActivityRing: p.white,
+    personaActivityGlow: p.themePrimary,
+  };
+}
+
+export function getStockWebPalette(): ThemeColorDefinition {
+  return {
+    ...paletteFromFabricColors({
+      black: globalTokens.color.black,
+      neutralDark: '#201f1e',
+      neutralPrimary: '#323130',
+      neutralPrimaryAlt: '#3b3a39',
+      neutralSecondary: '#605e5c',
+      neutralSecondaryAlt: '#8a8886',
+      neutralTertiary: '#a19f9d',
+      neutralTertiaryAlt: '#c8c6c4',
+      neutralQuaternary: '#d2d0ce',
+      neutralQuaternaryAlt: '#e1dfdd',
+      neutralLight: '#edebe9',
+      neutralLighter: '#f3f2f1',
+      neutralLighterAlt: '#faf9f8',
+      white: globalTokens.color.white,
+      // Shared Colors
+      red: globalTokens.color.red.primary,
+      redDark: globalTokens.color.burgundy.primary,
+
+      themeDarker: globalTokens.color.brand.shade40,
+      themeDark: globalTokens.color.brand.shade20,
+      themeDarkAlt: globalTokens.color.brand.shade10,
+      themePrimary: globalTokens.color.brand.primary,
+      themeSecondary: '#2b88d8',
+      themeTertiary: '#71afe5',
+      themeLight: globalTokens.color.brand.tint40,
+      themeLighter: globalTokens.color.brand.tint50,
+      themeLighterAlt: globalTokens.color.brand.tint60,
+      accent: globalTokens.color.brand.primary,
+      blackTranslucent40: 'rgba(0,0,0,.4)',
+    }),
+    ...createColorAliasTokens('light'),
+  };
+}
+
+export function getStockWebDarkPalette(): ThemeColorDefinition {
+  return {
+    ...paletteFromFabricColors(
+      {
+        // colors taken from fluentui DarkCustomizations.ts
+        themeDarker: '#82c7ff',
+        themeDark: globalTokens.color.brand.tint30,
+        themeDarkAlt: globalTokens.color.brand.tint20,
+        themePrimary: globalTokens.color.brand.tint10,
+        themeSecondary: globalTokens.color.brand.primary,
+        themeTertiary: '#235a85',
+        themeLight: globalTokens.color.brand.shade30,
+        themeLighter: globalTokens.color.brand.shade50,
+        themeLighterAlt: globalTokens.color.brand.shade60,
+        black: globalTokens.color.white,
+        neutralDark: '#faf9f8',
+        neutralPrimary: '#f3f2f1',
+        neutralPrimaryAlt: '#c8c6c4',
+        neutralSecondary: '#a19f9d',
+        neutralSecondaryAlt: '#979693',
+        neutralTertiary: '#797775',
+        neutralTertiaryAlt: '#484644',
+        neutralQuaternary: '#3b3a39',
+        neutralQuaternaryAlt: '#323130',
+        neutralLight: '#292827',
+        neutralLighter: '#252423',
+        neutralLighterAlt: '#201f1e',
+        white: '#1b1a19',
+        red: globalTokens.color.red.primary,
+        accent: globalTokens.color.brand.primary,
+        redDark: '#f1707b',
+        blackTranslucent40: 'rgba(0,0,0,.4)',
+      },
+      true,
+    ),
+    ...createColorAliasTokens('dark'),
+  };
+}
+
+export function getStockWebHCPalette(): ThemeColorDefinition {
+  return {
+    background: '#000000',
+    bodyStandoutBackground: '#000000',
+    bodyFrameBackground: '#000000',
+    bodyFrameDivider: '#000000',
+    bodyText: '#ffffff',
+    bodyTextChecked: '#000000',
+    subText: '#ffffff',
+    bodyDivider: '#ffffff',
+
+    disabledBackground: '#000000',
+    disabledText: '#3ff23f',
+    disabledBodyText: '#3ff23f',
+    disabledSubtext: '#3ff23f',
+    disabledBodySubtext: '#3ff23f',
+
+    focusBorder: '#ffffff',
+    variantBorder: '#ffffff',
+    variantBorderHovered: '#ffffff',
+    defaultStateBackground: '#000000',
+
+    errorText: '#ffffff',
+    warningText: '#ffffff',
+    errorBackground: '#000000',
+    blockingBackground: '#000000',
+    warningBackground: '#000000',
+    warningHighlight: '#ffffff',
+    successBackground: '#000000',
+
+    inputBorder: '#ffffff',
+    inputBorderHovered: '#1aebff',
+    inputBackground: '#000000',
+    inputBackgroundChecked: '#1aebff',
+    inputBackgroundCheckedHovered: '#1aebff',
+    inputForegroundChecked: '#000000',
+    inputFocusBorderAlt: '#ffffff',
+    smallInputBorder: '#ffffff',
+    inputText: '#ffffff',
+    inputTextHovered: '#000000',
+    inputPlaceholderText: '#ffffff',
+
+    buttonBackground: '#000000',
+    buttonBackgroundChecked: '#1aebff',
+    buttonBackgroundHovered: '#1aebff',
+    buttonBackgroundCheckedHovered: '#1aebff',
+    buttonBackgroundPressed: '#1aebff',
+    buttonBackgroundDisabled: '#000000',
+    buttonBorder: '#ffffff',
+    buttonText: '#ffffff',
+    buttonTextHovered: '#000000',
+    buttonTextChecked: '#000000',
+    buttonTextCheckedHovered: '#000000',
+    buttonTextPressed: '#000000',
+    buttonTextDisabled: '#3ff23f',
+    buttonBorderDisabled: '#3ff23f',
+    buttonBorderFocused: '#ffffff',
+
+    primaryButtonBackground: '#000000',
+    primaryButtonBackgroundHovered: '#1aebff',
+    primaryButtonBackgroundPressed: '#1aebff',
+    primaryButtonBackgroundDisabled: '#000000',
+    primaryButtonBorder: '#ffffff',
+    primaryButtonBorderFocused: '#ffffff',
+    primaryButtonText: '#ffffff',
+    primaryButtonTextHovered: '#000000',
+    primaryButtonTextPressed: '#000000',
+    primaryButtonTextDisabled: '#3ff23f',
+
+    accentButtonBackground: '#000000',
+    accentButtonText: '#ffffff',
+
+    menuBackground: '#000000',
+    menuDivider: '#ffffff',
+    menuIcon: '#ffffff',
+    menuHeader: '#ffffff',
+    menuItemBackgroundHovered: '#1aebff',
+    menuItemBackgroundPressed: '#1aebff',
+    menuItemText: '#ffffff',
+    menuItemTextHovered: '#000000',
+
+    listBackground: '#000000',
+    listText: '#ffffff',
+    listItemBackgroundHovered: '#1aebff',
+    listItemBackgroundChecked: '#1aebff',
+    listItemBackgroundCheckedHovered: '#1aebff',
+
+    listHeaderBackgroundHovered: '#1aebff',
+    listHeaderBackgroundPressed: '#1aebff',
+
+    actionLink: '#ffff00',
+    actionLinkHovered: '#ffffff',
+    link: '#ffff00',
+    linkHovered: '#ffffff',
+    linkPressed: '#ffffff',
+
+    // Control Color Tokens
+    defaultBackground: '#000000',
+    defaultBorder: '#ffffff',
+    defaultContent: '#ffffff',
+    defaultIcon: '#ffffff',
+
+    defaultHoveredBackground: '#1aebff',
+    defaultHoveredBorder: '#1aebff',
+    defaultHoveredContent: '#000000',
+    defaultHoveredIcon: '#000000',
+
+    defaultFocusedBackground: '#000000',
+    defaultFocusedBorder: '#ffffff',
+    defaultFocusedContent: '#ffffff',
+    defaultFocusedIcon: '#ffffff',
+
+    defaultPressedBackground: '#1aebff',
+    defaultPressedBorder: '#1aebff',
+    defaultPressedContent: '#000000',
+    defaultPressedIcon: '#000000',
+
+    defaultDisabledBackground: '#000000',
+    defaultDisabledBorder: '#3ff23f',
+    defaultDisabledContent: '#3ff23f',
+    defaultDisabledIcon: '#3ff23f',
+
+    ghostBackground: '#000000',
+    ghostBorder: '#000000',
+    ghostContent: '#ffffff',
+    ghostIcon: '#ffffff',
+
+    ghostHoveredBackground: '#1aebff',
+    ghostHoveredBorder: '#1aebff',
+    ghostHoveredContent: '#000000',
+    ghostHoveredIcon: '#000000',
+
+    ghostFocusedBackground: '#000000',
+    ghostFocusedBorder: '#ffffff',
+    ghostFocusedContent: '#ffffff',
+    ghostFocusedIcon: '#ffffff',
+
+    ghostPressedBackground: '#1aebff',
+    ghostPressedBorder: '#1aebff',
+    ghostPressedContent: '#000000',
+    ghostPressedIcon: '#000000',
+
+    ghostDisabledBackground: '#000000',
+    ghostDisabledBorder: '#000000',
+    ghostDisabledContent: '#3ff23f',
+    ghostDisabledIcon: '#3ff23f',
+
+    brandedBackground: '#000000',
+    brandedBorder: '#ffffff',
+    brandedContent: '#ffffff',
+    brandedIcon: '#ffffff',
+
+    brandedHoveredBackground: '#1aebff',
+    brandedHoveredBorder: '#1aebff',
+    brandedHoveredContent: '#000000',
+    brandedHoveredIcon: '#000000',
+
+    brandedFocusedBackground: '#000000',
+    brandedFocusedBorder: '#ffffff',
+    brandedFocusedContent: '#ffffff',
+    brandedFocusedIcon: '#ffffff',
+
+    brandedPressedBackground: '#1aebff',
+    brandedPressedBorder: '#1aebff',
+    brandedPressedContent: '#000000',
+    brandedPressedIcon: '#000000',
+
+    brandedDisabledBackground: '#000000',
+    brandedDisabledBorder: '#3ff23f',
+    brandedDisabledContent: '#3ff23f',
+    brandedDisabledIcon: '#3ff23f',
+
+    defaultCheckedBackground: '#1aebff',
+    defaultCheckedContent: '#000000',
+    defaultCheckedHoveredBackground: '#1aebff',
+    defaultCheckedHoveredContent: '#000000',
+
+    brandedCheckedBackground: '#1aebff',
+    brandedCheckedContent: '#000000',
+    brandedCheckedHoveredBackground: '#1aebff',
+    brandedCheckedHoveredContent: '#000000',
+
+    ghostCheckedBackground: '#1aebff',
+    ghostCheckedContent: '#000000',
+    ghostCheckedHoveredBackground: '#1aebff',
+    ghostCheckedHoveredContent: '#000000',
+    ghostCheckedHoveredBorder: '#000000',
+
+    ghostSecondaryContent: '#ffffff',
+    ghostFocusedSecondaryContent: '#ffffff',
+    ghostHoveredSecondaryContent: '#000000',
+    ghostPressedSecondaryContent: '#000000',
+
+    brandedSecondaryContent: '#ffffff',
+    brandedFocusedSecondaryContent: '#ffffff',
+    brandedHoveredSecondaryContent: '#000000',
+    brandedPressedSecondaryContent: '#000000',
+
+    defaultDisabledSecondaryContent: '#ffffff',
+    defaultHoveredSecondaryContent: '#000000',
+    defaultPressedSecondaryContent: '#000000',
+
+    checkmarkColor: '#ffffff',
+    checkboxBackground: '#000000',
+    checkboxBackgroundDisabled: '#000000',
+    checkboxBorderColor: '#ffffff',
+
+    personaActivityRing: '#ffffff',
+    personaActivityGlow: 'transparent', // glow probably doesn't make sense on HC
+    ...createColorAliasTokens('highContrast'),
+  };
+}

packages/theming/default-theme/src/defaultColors.ts

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/ban-ts-comment */
 import { Palette, FabricWebPalette, ThemeColorDefinition } from '@fluentui-react-native/theme-types';
 import { globalTokens } from '@fluentui-react-native/theme-tokens';
 import { createColorAliasTokens } from './createAliasTokens';
@@ -31,7 +32,7 @@ export function paletteFromFabricColors(p: FabricWebPalette, isInverted?: boolea
     defaultStateBackground: p.neutralLighterAlt,
 
     errorText: !isInverted ? p.redDark : '#ff5f5f',
-    warningText: !isInverted ? globalTokens.color.grey['20'] : globalTokens.color.white,
+    warningText: !isInverted ? globalTokens.color.grey20 : globalTokens.color.white,
     errorBackground: !isInverted ? 'rgba(245, 135, 145, .2)' : 'rgba(232, 17, 35, .5)',
     blockingBackground: !isInverted ? 'rgba(250, 65, 0, .2)' : 'rgba(234, 67, 0, .5)',
     warningBackground: !isInverted ? 'rgba(255, 200, 10, .2)' : 'rgba(255, 251, 0, .6)',
@@ -241,17 +242,29 @@ export function getStockWebPalette(): ThemeColorDefinition {
       red: globalTokens.color.red.primary,
       redDark: globalTokens.color.burgundy.primary,
 
-      themeDarker: globalTokens.color.brand.shade40,
+      // @ts-ignore
-      themeDark: globalTokens.color.brand.shade20,
+      accent: globalTokens.color.brand80,
-      themeDarkAlt: globalTokens.color.brand.shade10,
-      themePrimary: globalTokens.color.brand.primary,
-      themeSecondary: '#2b88d8',
-      themeTertiary: '#71afe5',
-      themeLight: globalTokens.color.brand.tint40,
-      themeLighter: globalTokens.color.brand.tint50,
-      themeLighterAlt: globalTokens.color.brand.tint60,
-      accent: globalTokens.color.brand.primary,
       blackTranslucent40: 'rgba(0,0,0,.4)',
+
+      // Colors to be deprecated
+      // @ts-ignore
+      themeDarker: globalTokens.color.brand40,
+      // @ts-ignore
+      themeDark: globalTokens.color.brand60,
+      // @ts-ignore
+      themeDarkAlt: globalTokens.color.brand70,
+      // @ts-ignore
+      themePrimary: globalTokens.color.brand80,
+      // @ts-ignore
+      themeSecondary: globalTokens.color.brand90,
+      // @ts-ignore
+      themeTertiary: globalTokens.color.brand120,
+      // @ts-ignore
+      themeLight: globalTokens.color.brand140,
+      // @ts-ignore
+      themeLighter: globalTokens.color.brand150,
+      // @ts-ignore
+      themeLighterAlt: globalTokens.color.brand160,
     }),
     ...createColorAliasTokens('light'),
   };
@@ -262,15 +275,6 @@ export function getStockWebDarkPalette(): ThemeColorDefinition {
     ...paletteFromFabricColors(
       {
         // colors taken from fluentui DarkCustomizations.ts
-        themeDarker: '#82c7ff',
-        themeDark: globalTokens.color.brand.tint30,
-        themeDarkAlt: globalTokens.color.brand.tint20,
-        themePrimary: globalTokens.color.brand.tint10,
-        themeSecondary: globalTokens.color.brand.primary,
-        themeTertiary: '#235a85',
-        themeLight: globalTokens.color.brand.shade30,
-        themeLighter: globalTokens.color.brand.shade50,
-        themeLighterAlt: globalTokens.color.brand.shade60,
         black: globalTokens.color.white,
         neutralDark: '#faf9f8',
         neutralPrimary: '#f3f2f1',
@@ -286,9 +290,30 @@ export function getStockWebDarkPalette(): ThemeColorDefinition {
         neutralLighterAlt: '#201f1e',
         white: '#1b1a19',
         red: globalTokens.color.red.primary,
-        accent: globalTokens.color.brand.primary,
+        // @ts-ignore
+        accent: globalTokens.color.brand40,
         redDark: '#f1707b',
         blackTranslucent40: 'rgba(0,0,0,.4)',
+
+        // Colors to be deprecated
+        // @ts-ignore
+        themeDarker: globalTokens.color.brand110,
+        // @ts-ignore
+        themeDark: globalTokens.color.brand100,
+        // @ts-ignore
+        themeDarkAlt: globalTokens.color.brand100,
+        // @ts-ignore
+        themePrimary: globalTokens.color.brand90,
+        // @ts-ignore
+        themeSecondary: globalTokens.color.brand90,
+        // @ts-ignore
+        themeTertiary: globalTokens.color.brand60,
+        // @ts-ignore
+        themeLight: globalTokens.color.brand50,
+        // @ts-ignore
+        themeLighter: globalTokens.color.brand40,
+        // @ts-ignore
+        themeLighterAlt: globalTokens.color.brand30,
       },
       true,
     ),

packages/theming/default-theme/src/defaultColors.win32.ts

@@ -0,0 +1,510 @@
+import { Palette, FabricWebPalette, ThemeColorDefinition } from '@fluentui-react-native/theme-types';
+import { globalTokens } from '@fluentui-react-native/theme-tokens';
+import { createColorAliasTokens } from './createAliasTokens';
+
+/**
+ * Generate a palette from a set of fabric web colors, like those output from the theme designer.
+ *
+ * @param palette - fabric web palette definition.  This allows initializing our color values in the same
+ * manner the fabric web does it
+ */
+export function paletteFromFabricColors(p: FabricWebPalette, isInverted?: boolean): Palette {
+  return {
+    background: p.white,
+    bodyStandoutBackground: p.neutralLighterAlt,
+    bodyFrameBackground: p.white,
+    bodyFrameDivider: p.neutralLight,
+    bodyText: p.neutralPrimary,
+    bodyTextChecked: p.black,
+    subText: p.neutralSecondary,
+    bodyDivider: p.neutralLight,
+
+    disabledBackground: isInverted ? p.neutralQuaternaryAlt : p.neutralLighter,
+    disabledText: p.neutralTertiary,
+    disabledBodyText: p.neutralTertiary,
+    disabledSubtext: p.neutralQuaternary,
+    disabledBodySubtext: p.neutralTertiaryAlt,
+
+    focusBorder: p.neutralSecondary,
+    variantBorder: p.neutralLight,
+    variantBorderHovered: p.neutralTertiary,
+    defaultStateBackground: p.neutralLighterAlt,
+
+    errorText: !isInverted ? p.redDark : '#ff5f5f',
+    warningText: !isInverted ? globalTokens.color.grey20 : globalTokens.color.white,
+    errorBackground: !isInverted ? 'rgba(245, 135, 145, .2)' : 'rgba(232, 17, 35, .5)',
+    blockingBackground: !isInverted ? 'rgba(250, 65, 0, .2)' : 'rgba(234, 67, 0, .5)',
+    warningBackground: !isInverted ? 'rgba(255, 200, 10, .2)' : 'rgba(255, 251, 0, .6)',
+    warningHighlight: !isInverted ? '#ffb900' : '#fff100',
+    successBackground: !isInverted ? 'rgba(95, 210, 85, .2)' : 'rgba(186, 216, 10, .4)',
+
+    inputBorder: p.neutralTertiary,
+    inputBorderHovered: p.neutralPrimary,
+    inputBackground: p.white,
+    inputBackgroundChecked: p.themePrimary,
+    inputBackgroundCheckedHovered: p.themeDarkAlt,
+    inputForegroundChecked: p.white,
+    inputFocusBorderAlt: p.themePrimary,
+    smallInputBorder: p.neutralSecondary,
+    inputText: p.neutralPrimary,
+    inputTextHovered: p.neutralDark,
+    inputPlaceholderText: p.neutralSecondary,
+
+    buttonBackground: p.neutralLighter,
+    buttonBackgroundChecked: p.neutralTertiaryAlt,
+    buttonBackgroundHovered: p.neutralLight,
+    buttonBackgroundCheckedHovered: p.neutralLight,
+    buttonBackgroundPressed: p.neutralLight,
+    buttonBackgroundDisabled: p.neutralLighter,
+    buttonBorder: p.neutralSecondaryAlt,
+    buttonText: isInverted ? p.black : p.neutralPrimary,
+    buttonTextHovered: isInverted ? p.neutralPrimary : p.neutralDark,
+    buttonTextChecked: p.neutralDark,
+    buttonTextCheckedHovered: p.black,
+    buttonTextPressed: p.neutralDark,
+    buttonTextDisabled: p.neutralTertiary,
+    buttonBorderDisabled: p.neutralLighter,
+    buttonBorderFocused: p.neutralSecondaryAlt,
+
+    primaryButtonBackground: p.themePrimary,
+    primaryButtonBackgroundHovered: p.themeDarkAlt,
+    primaryButtonBackgroundPressed: p.themeDark,
+    primaryButtonBackgroundDisabled: p.neutralLighter,
+    primaryButtonBorder: 'transparent',
+    primaryButtonBorderFocused: 'transparent',
+    primaryButtonText: p.white,
+    primaryButtonTextHovered: p.white,
+    primaryButtonTextPressed: p.white,
+    primaryButtonTextDisabled: p.neutralQuaternary,
+
+    accentButtonBackground: p.accent,
+    accentButtonText: p.white,
+
+    menuBackground: isInverted ? p.neutralLighter : p.white,
+    menuDivider: isInverted ? p.neutralTertiaryAlt : p.neutralTertiaryAlt,
+    menuIcon: isInverted ? p.themeDarkAlt : p.themePrimary,
+    menuHeader: isInverted ? p.black : p.themePrimary,
+    menuItemBackgroundHovered: isInverted ? p.neutralQuaternaryAlt : p.neutralLighter,
+    menuItemBackgroundPressed: isInverted ? p.neutralQuaternary : p.neutralLight,
+    menuItemText: p.neutralPrimary,
+    menuItemTextHovered: p.neutralDark,
+
+    listBackground: p.white,
+    listText: p.neutralPrimary,
+    listItemBackgroundHovered: p.neutralLighter,
+    listItemBackgroundChecked: p.neutralLight,
+    listItemBackgroundCheckedHovered: p.neutralQuaternaryAlt,
+
+    listHeaderBackgroundHovered: p.neutralLighter,
+    listHeaderBackgroundPressed: p.neutralLight,
+
+    actionLink: p.neutralPrimary,
+    actionLinkHovered: p.neutralDark,
+    link: p.themePrimary,
+    linkHovered: p.themeDarker,
+    linkPressed: p.themeDark,
+
+    // Control Color Tokens
+    defaultBackground: p.neutralLighter,
+    defaultBorder: p.neutralSecondaryAlt,
+    defaultContent: isInverted ? p.black : p.neutralPrimary,
+    defaultIcon: isInverted ? p.black : p.neutralPrimary,
+
+    defaultHoveredBackground: p.neutralLight,
+    defaultHoveredBorder: p.neutralSecondaryAlt,
+    defaultHoveredContent: isInverted ? p.neutralPrimary : p.neutralDark,
+    defaultHoveredIcon: isInverted ? p.neutralPrimary : p.neutralDark,
+
+    defaultFocusedBackground: p.neutralLight,
+    defaultFocusedBorder: p.neutralSecondaryAlt,
+    defaultFocusedContent: isInverted ? p.neutralPrimary : p.neutralDark,
+    defaultFocusedIcon: isInverted ? p.neutralPrimary : p.neutralDark,
+
+    defaultPressedBackground: p.neutralLight,
+    defaultPressedBorder: p.neutralSecondaryAlt,
+    defaultPressedContent: p.neutralDark,
+    defaultPressedIcon: p.neutralDark,
+
+    defaultDisabledBackground: p.neutralLighter,
+    defaultDisabledBorder: p.neutralLighter,
+    defaultDisabledContent: p.neutralTertiary,
+    defaultDisabledIcon: p.neutralTertiary,
+
+    ghostBackground: p.white,
+    ghostBorder: p.white,
+    ghostContent: p.neutralPrimary,
+    ghostIcon: p.neutralPrimary,
+
+    ghostHoveredBackground: p.neutralLighter,
+    ghostHoveredBorder: p.neutralLighter,
+    ghostHoveredContent: p.neutralDark,
+    ghostHoveredIcon: p.neutralDark,
+
+    ghostFocusedBackground: p.neutralLighter,
+    ghostFocusedBorder: p.neutralSecondaryAlt,
+    ghostFocusedContent: p.neutralDark,
+    ghostFocusedIcon: p.neutralDark,
+
+    ghostPressedBackground: p.neutralLight,
+    ghostPressedBorder: p.neutralLight,
+    ghostPressedContent: p.neutralDark,
+    ghostPressedIcon: p.neutralDark,
+
+    ghostDisabledBackground: p.white,
+    ghostDisabledBorder: p.white,
+    ghostDisabledContent: p.neutralTertiary,
+    ghostDisabledIcon: p.neutralTertiary,
+
+    brandedBackground: p.themePrimary,
+    brandedBorder: p.themeDark,
+    brandedContent: p.white,
+    brandedIcon: p.white,
+
+    brandedHoveredBackground: p.themeDarkAlt,
+    brandedHoveredBorder: p.themeDarker,
+    brandedHoveredContent: p.white,
+    brandedHoveredIcon: p.white,
+
+    brandedFocusedBackground: p.themeDarkAlt,
+    brandedFocusedBorder: p.themeDarker,
+    brandedFocusedContent: p.white,
+    brandedFocusedIcon: p.white,
+
+    brandedPressedBackground: p.themeDark,
+    brandedPressedBorder: p.themeDarker,
+    brandedPressedContent: p.white,
+    brandedPressedIcon: p.white,
+
+    brandedDisabledBackground: p.neutralLighter,
+    brandedDisabledBorder: p.neutralLighter,
+    brandedDisabledContent: p.neutralQuaternary,
+    brandedDisabledIcon: p.neutralQuaternary,
+
+    defaultCheckedBackground: p.neutralTertiaryAlt,
+    defaultCheckedContent: p.neutralDark,
+    defaultCheckedHoveredBackground: p.neutralLight,
+    defaultCheckedHoveredContent: isInverted ? p.neutralPrimary : p.neutralDark,
+
+    brandedCheckedBackground: p.neutralTertiaryAlt,
+    brandedCheckedContent: p.neutralDark,
+    brandedCheckedHoveredBackground: p.neutralLight,
+    brandedCheckedHoveredContent: isInverted ? p.neutralPrimary : p.neutralDark,
+
+    ghostCheckedBackground: p.neutralLight,
+    ghostCheckedContent: p.black,
+    ghostCheckedHoveredBackground: p.neutralLighter,
+    ghostCheckedHoveredContent: p.neutralDark,
+    ghostCheckedHoveredBorder: p.neutralDark,
+
+    ghostSecondaryContent: p.neutralSecondary,
+    ghostFocusedSecondaryContent: p.neutralSecondary,
+    ghostHoveredSecondaryContent: p.neutralSecondary,
+    ghostPressedSecondaryContent: p.neutralSecondary,
+
+    brandedSecondaryContent: p.neutralLighterAlt,
+    brandedFocusedSecondaryContent: p.neutralLighterAlt,
+    brandedHoveredSecondaryContent: p.neutralLighterAlt,
+    brandedPressedSecondaryContent: p.neutralLighterAlt,
+
+    defaultDisabledSecondaryContent: p.neutralTertiary,
+    defaultHoveredSecondaryContent: p.neutralTertiary,
+    defaultPressedSecondaryContent: p.neutralTertiary,
+
+    checkmarkColor: p.white,
+    checkboxBackground: p.themePrimary,
+    checkboxBackgroundDisabled: p.neutralLighter,
+    checkboxBorderColor: p.neutralSecondaryAlt,
+
+    personaActivityRing: p.white,
+    personaActivityGlow: p.themePrimary,
+  };
+}
+
+export function getStockWebPalette(): ThemeColorDefinition {
+  return {
+    ...paletteFromFabricColors({
+      black: globalTokens.color.black,
+      neutralDark: '#201f1e',
+      neutralPrimary: '#323130',
+      neutralPrimaryAlt: '#3b3a39',
+      neutralSecondary: '#605e5c',
+      neutralSecondaryAlt: '#8a8886',
+      neutralTertiary: '#a19f9d',
+      neutralTertiaryAlt: '#c8c6c4',
+      neutralQuaternary: '#d2d0ce',
+      neutralQuaternaryAlt: '#e1dfdd',
+      neutralLight: '#edebe9',
+      neutralLighter: '#f3f2f1',
+      neutralLighterAlt: '#faf9f8',
+      white: globalTokens.color.white,
+      // Shared Colors
+      red: globalTokens.color.red.primary,
+      redDark: globalTokens.color.burgundy.primary,
+
+      themeDarker: globalTokens.color.brand.shade40,
+      themeDark: globalTokens.color.brand.shade20,
+      themeDarkAlt: globalTokens.color.brand.shade10,
+      themePrimary: globalTokens.color.brand.primary,
+      themeSecondary: '#2b88d8',
+      themeTertiary: '#71afe5',
+      themeLight: globalTokens.color.brand.tint40,
+      themeLighter: globalTokens.color.brand.tint50,
+      themeLighterAlt: globalTokens.color.brand.tint60,
+      accent: globalTokens.color.brand.primary,
+      blackTranslucent40: 'rgba(0,0,0,.4)',
+    }),
+    ...createColorAliasTokens('light'),
+  };
+}
+
+export function getStockWebDarkPalette(): ThemeColorDefinition {
+  return {
+    ...paletteFromFabricColors(
+      {
+        // colors taken from fluentui DarkCustomizations.ts
+        themeDarker: '#82c7ff',
+        themeDark: globalTokens.color.brand.tint30,
+        themeDarkAlt: globalTokens.color.brand.tint20,
+        themePrimary: globalTokens.color.brand.tint10,
+        themeSecondary: globalTokens.color.brand.primary,
+        themeTertiary: '#235a85',
+        themeLight: globalTokens.color.brand.shade30,
+        themeLighter: globalTokens.color.brand.shade50,
+        themeLighterAlt: globalTokens.color.brand.shade60,
+        black: globalTokens.color.white,
+        neutralDark: '#faf9f8',
+        neutralPrimary: '#f3f2f1',
+        neutralPrimaryAlt: '#c8c6c4',
+        neutralSecondary: '#a19f9d',
+        neutralSecondaryAlt: '#979693',
+        neutralTertiary: '#797775',
+        neutralTertiaryAlt: '#484644',
+        neutralQuaternary: '#3b3a39',
+        neutralQuaternaryAlt: '#323130',
+        neutralLight: '#292827',
+        neutralLighter: '#252423',
+        neutralLighterAlt: '#201f1e',
+        white: '#1b1a19',
+        red: globalTokens.color.red.primary,
+        accent: globalTokens.color.brand.primary,
+        redDark: '#f1707b',
+        blackTranslucent40: 'rgba(0,0,0,.4)',
+      },
+      true,
+    ),
+    ...createColorAliasTokens('dark'),
+  };
+}
+
+export function getStockWebHCPalette(): ThemeColorDefinition {
+  return {
+    background: '#000000',
+    bodyStandoutBackground: '#000000',
+    bodyFrameBackground: '#000000',
+    bodyFrameDivider: '#000000',
+    bodyText: '#ffffff',
+    bodyTextChecked: '#000000',
+    subText: '#ffffff',
+    bodyDivider: '#ffffff',
+
+    disabledBackground: '#000000',
+    disabledText: '#3ff23f',
+    disabledBodyText: '#3ff23f',
+    disabledSubtext: '#3ff23f',
+    disabledBodySubtext: '#3ff23f',
+
+    focusBorder: '#ffffff',
+    variantBorder: '#ffffff',
+    variantBorderHovered: '#ffffff',
+    defaultStateBackground: '#000000',
+
+    errorText: '#ffffff',
+    warningText: '#ffffff',
+    errorBackground: '#000000',
+    blockingBackground: '#000000',
+    warningBackground: '#000000',
+    warningHighlight: '#ffffff',
+    successBackground: '#000000',
+
+    inputBorder: '#ffffff',
+    inputBorderHovered: '#1aebff',
+    inputBackground: '#000000',
+    inputBackgroundChecked: '#1aebff',
+    inputBackgroundCheckedHovered: '#1aebff',
+    inputForegroundChecked: '#000000',
+    inputFocusBorderAlt: '#ffffff',
+    smallInputBorder: '#ffffff',
+    inputText: '#ffffff',
+    inputTextHovered: '#000000',
+    inputPlaceholderText: '#ffffff',
+
+    buttonBackground: '#000000',
+    buttonBackgroundChecked: '#1aebff',
+    buttonBackgroundHovered: '#1aebff',
+    buttonBackgroundCheckedHovered: '#1aebff',
+    buttonBackgroundPressed: '#1aebff',
+    buttonBackgroundDisabled: '#000000',
+    buttonBorder: '#ffffff',
+    buttonText: '#ffffff',
+    buttonTextHovered: '#000000',
+    buttonTextChecked: '#000000',
+    buttonTextCheckedHovered: '#000000',
+    buttonTextPressed: '#000000',
+    buttonTextDisabled: '#3ff23f',
+    buttonBorderDisabled: '#3ff23f',
+    buttonBorderFocused: '#ffffff',
+
+    primaryButtonBackground: '#000000',
+    primaryButtonBackgroundHovered: '#1aebff',
+    primaryButtonBackgroundPressed: '#1aebff',
+    primaryButtonBackgroundDisabled: '#000000',
+    primaryButtonBorder: '#ffffff',
+    primaryButtonBorderFocused: '#ffffff',
+    primaryButtonText: '#ffffff',
+    primaryButtonTextHovered: '#000000',
+    primaryButtonTextPressed: '#000000',
+    primaryButtonTextDisabled: '#3ff23f',
+
+    accentButtonBackground: '#000000',
+    accentButtonText: '#ffffff',
+
+    menuBackground: '#000000',
+    menuDivider: '#ffffff',
+    menuIcon: '#ffffff',
+    menuHeader: '#ffffff',
+    menuItemBackgroundHovered: '#1aebff',
+    menuItemBackgroundPressed: '#1aebff',
+    menuItemText: '#ffffff',
+    menuItemTextHovered: '#000000',
+
+    listBackground: '#000000',
+    listText: '#ffffff',
+    listItemBackgroundHovered: '#1aebff',
+    listItemBackgroundChecked: '#1aebff',
+    listItemBackgroundCheckedHovered: '#1aebff',
+
+    listHeaderBackgroundHovered: '#1aebff',
+    listHeaderBackgroundPressed: '#1aebff',
+
+    actionLink: '#ffff00',
+    actionLinkHovered: '#ffffff',
+    link: '#ffff00',
+    linkHovered: '#ffffff',
+    linkPressed: '#ffffff',
+
+    // Control Color Tokens
+    defaultBackground: '#000000',
+    defaultBorder: '#ffffff',
+    defaultContent: '#ffffff',
+    defaultIcon: '#ffffff',
+
+    defaultHoveredBackground: '#1aebff',
+    defaultHoveredBorder: '#1aebff',
+    defaultHoveredContent: '#000000',
+    defaultHoveredIcon: '#000000',
+
+    defaultFocusedBackground: '#000000',
+    defaultFocusedBorder: '#ffffff',
+    defaultFocusedContent: '#ffffff',
+    defaultFocusedIcon: '#ffffff',
+
+    defaultPressedBackground: '#1aebff',
+    defaultPressedBorder: '#1aebff',
+    defaultPressedContent: '#000000',
+    defaultPressedIcon: '#000000',
+
+    defaultDisabledBackground: '#000000',
+    defaultDisabledBorder: '#3ff23f',
+    defaultDisabledContent: '#3ff23f',
+    defaultDisabledIcon: '#3ff23f',
+
+    ghostBackground: '#000000',
+    ghostBorder: '#000000',
+    ghostContent: '#ffffff',
+    ghostIcon: '#ffffff',
+
+    ghostHoveredBackground: '#1aebff',
+    ghostHoveredBorder: '#1aebff',
+    ghostHoveredContent: '#000000',
+    ghostHoveredIcon: '#000000',
+
+    ghostFocusedBackground: '#000000',
+    ghostFocusedBorder: '#ffffff',
+    ghostFocusedContent: '#ffffff',
+    ghostFocusedIcon: '#ffffff',
+
+    ghostPressedBackground: '#1aebff',
+    ghostPressedBorder: '#1aebff',
+    ghostPressedContent: '#000000',
+    ghostPressedIcon: '#000000',
+
+    ghostDisabledBackground: '#000000',
+    ghostDisabledBorder: '#000000',
+    ghostDisabledContent: '#3ff23f',
+    ghostDisabledIcon: '#3ff23f',
+
+    brandedBackground: '#000000',
+    brandedBorder: '#ffffff',
+    brandedContent: '#ffffff',
+    brandedIcon: '#ffffff',
+
+    brandedHoveredBackground: '#1aebff',
+    brandedHoveredBorder: '#1aebff',
+    brandedHoveredContent: '#000000',
+    brandedHoveredIcon: '#000000',
+
+    brandedFocusedBackground: '#000000',
+    brandedFocusedBorder: '#ffffff',
+    brandedFocusedContent: '#ffffff',
+    brandedFocusedIcon: '#ffffff',
+
+    brandedPressedBackground: '#1aebff',
+    brandedPressedBorder: '#1aebff',
+    brandedPressedContent: '#000000',
+    brandedPressedIcon: '#000000',
+
+    brandedDisabledBackground: '#000000',
+    brandedDisabledBorder: '#3ff23f',
+    brandedDisabledContent: '#3ff23f',
+    brandedDisabledIcon: '#3ff23f',
+
+    defaultCheckedBackground: '#1aebff',
+    defaultCheckedContent: '#000000',
+    defaultCheckedHoveredBackground: '#1aebff',
+    defaultCheckedHoveredContent: '#000000',
+
+    brandedCheckedBackground: '#1aebff',
+    brandedCheckedContent: '#000000',
+    brandedCheckedHoveredBackground: '#1aebff',
+    brandedCheckedHoveredContent: '#000000',
+
+    ghostCheckedBackground: '#1aebff',
+    ghostCheckedContent: '#000000',
+    ghostCheckedHoveredBackground: '#1aebff',
+    ghostCheckedHoveredContent: '#000000',
+    ghostCheckedHoveredBorder: '#000000',
+
+    ghostSecondaryContent: '#ffffff',
+    ghostFocusedSecondaryContent: '#ffffff',
+    ghostHoveredSecondaryContent: '#000000',
+    ghostPressedSecondaryContent: '#000000',
+
+    brandedSecondaryContent: '#ffffff',
+    brandedFocusedSecondaryContent: '#ffffff',
+    brandedHoveredSecondaryContent: '#000000',
+    brandedPressedSecondaryContent: '#000000',
+
+    defaultDisabledSecondaryContent: '#ffffff',
+    defaultHoveredSecondaryContent: '#000000',
+    defaultPressedSecondaryContent: '#000000',
+
+    checkmarkColor: '#ffffff',
+    checkboxBackground: '#000000',
+    checkboxBackgroundDisabled: '#000000',
+    checkboxBorderColor: '#ffffff',
+
+    personaActivityRing: '#ffffff',
+    personaActivityGlow: 'transparent', // glow probably doesn't make sense on HC
+    ...createColorAliasTokens('highContrast'),
+  };
+}

packages/theming/default-theme/src/defaultTheme.ts

@@ -7,13 +7,13 @@ import { createShadowAliasTokens } from './createAliasTokens';
 function _defaultTypography(): Typography {
   const defaultsDict = {
     sizes: {
-      caption: globalTokens.font.size['100'] as FontSize,
+      caption: globalTokens.font.size100 as FontSize,
-      secondary: globalTokens.font.size['200'] as FontSize,
+      secondary: globalTokens.font.size200 as FontSize,
-      body: globalTokens.font.size['300'] as FontSize,
+      body: globalTokens.font.size300 as FontSize,
-      subheader: globalTokens.font.size['400'] as FontSize,
+      subheader: globalTokens.font.size400 as FontSize,
-      header: globalTokens.font.size['500'] as FontSize,
+      header: globalTokens.font.size500 as FontSize,
-      hero: globalTokens.font.size['700'] as FontSize,
+      hero: globalTokens.font.size700 as FontSize,
-      heroLarge: globalTokens.font.size['900'] as FontSize,
+      heroLarge: globalTokens.font.size900 as FontSize,
     } as FontSizes,
     weights: {
       regular: globalTokens.font.weight.regular as FontWeightValue,

packages/theming/theme-tokens/package.json

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

packages/theming/theme-tokens/src/getShadowTokens.ts

@@ -5,11 +5,11 @@ import { AppearanceOptions } from '@fluentui-react-native/theme-types';
 
 export function getShadowTokens(mode: AppearanceOptions) {
   if (mode === 'light') {
-    return lightShadowTokens.shadow;
+    return lightShadowTokens;
   } else if (mode === 'dark') {
-    return darkShadowTokens.shadow;
+    return darkShadowTokens;
   }
 
   // HC mode.
-  return hcShadowTokens.shadow;
+  return hcShadowTokens;
 }

packages/theming/theming-utils/package.json

@@ -29,8 +29,8 @@
     "@fluentui-react-native/theme-types": ">=0.23.1 <1.0.0"
   },
   "devDependencies": {
-    "@fluentui-react-native/design-tokens-win32": "^0.14.0",
+    "@fluentui-react-native/design-tokens-win32": "^0.31.0",
-    "@fluentui-react-native/design-tokens-windows": "^0.14.0",
+    "@fluentui-react-native/design-tokens-windows": "^0.31.0",
     "@fluentui-react-native/eslint-config-rules": "^0.1.1",
     "@fluentui-react-native/scripts": "^0.1.1",
     "@types/react-native": "^0.68.0",

packages/theming/theming-utils/src/__tests__/__snapshots__/theming-utils.test.ts.snap

@@ -210,7 +210,7 @@ Object {
 }
 `;
 
-exports[`mapPipelineToShadow test darkShadowTokens.shadow 1`] = `
+exports[`mapPipelineToShadow test darkShadowTokens 1`] = `
 Object {
   "shadow16": Object {
     "ambient": Object {
@@ -383,7 +383,7 @@ Object {
 }
 `;
 
-exports[`mapPipelineToShadow test hcShadowTokens.shadow 1`] = `
+exports[`mapPipelineToShadow test hcShadowTokens 1`] = `
 Object {
   "shadow16": Object {
     "ambient": Object {
@@ -556,7 +556,7 @@ Object {
 }
 `;
 
-exports[`mapPipelineToShadow test lightShadowTokens.shadow 1`] = `
+exports[`mapPipelineToShadow test lightShadowTokens 1`] = `
 Object {
   "shadow16": Object {
     "ambient": Object {

packages/theming/theming-utils/src/__tests__/theming-utils.test.ts

@@ -70,18 +70,18 @@ describe('mapFontPipelineToTheme test', () => {
 });
 
 describe('mapPipelineToShadow test', () => {
-  it('lightShadowTokens.shadow', () => {
+  it('lightShadowTokens', () => {
-    const fontTheme = mapPipelineToShadow(lightShadowTokens.shadow);
+    const fontTheme = mapPipelineToShadow(lightShadowTokens);
     expect(fontTheme).toMatchSnapshot();
   });
 
-  it('darkShadowTokens.shadow', () => {
+  it('darkShadowTokens', () => {
-    const fontTheme = mapPipelineToShadow(darkShadowTokens.shadow);
+    const fontTheme = mapPipelineToShadow(darkShadowTokens);
     expect(fontTheme).toMatchSnapshot();
   });
 
-  it('hcShadowTokens.shadow', () => {
+  it('hcShadowTokens', () => {
-    const fontTheme = mapPipelineToShadow(hcShadowTokens.shadow);
+    const fontTheme = mapPipelineToShadow(hcShadowTokens);
     expect(fontTheme).toMatchSnapshot();
   });
 });

packages/theming/theming-utils/src/mapPipelineToShadow.ts

@@ -2,22 +2,22 @@ import { ThemeShadowDefinition } from '@fluentui-react-native/theme-types/src/Sh
 
 /**
  * Given design token pipeline output for shadow tokens, creates an object that can be used in Theme object.
- * @param pipelineOutputShadow Assumes that this is the object at the shadow property of the pipeline output
+ * @param pipelineOutputShadow Assumes that this is the object in the tokens-shadow.json file of the pipeline output
  * @returns Object containing shadow tokens
  */
 export function mapPipelineToShadow(pipelineOutputShadow: any): ThemeShadowDefinition {
   return {
-    shadow2: { ambient: pipelineOutputShadow[2][0], key: pipelineOutputShadow[2][1] },
+    shadow2: { ambient: pipelineOutputShadow.global.shadow2[0], key: pipelineOutputShadow.global.shadow2[1] },
-    shadow4: { ambient: pipelineOutputShadow[4][0], key: pipelineOutputShadow[4][1] },
+    shadow4: { ambient: pipelineOutputShadow.global.shadow4[0], key: pipelineOutputShadow.global.shadow4[1] },
-    shadow8: { ambient: pipelineOutputShadow[8][0], key: pipelineOutputShadow[8][1] },
+    shadow8: { ambient: pipelineOutputShadow.global.shadow8[0], key: pipelineOutputShadow.global.shadow8[1] },
-    shadow16: { ambient: pipelineOutputShadow[16][0], key: pipelineOutputShadow[16][1] },
+    shadow16: { ambient: pipelineOutputShadow.global.shadow16[0], key: pipelineOutputShadow.global.shadow16[1] },
-    shadow28: { ambient: pipelineOutputShadow[28][0], key: pipelineOutputShadow[28][1] },
+    shadow28: { ambient: pipelineOutputShadow.global.shadow28[0], key: pipelineOutputShadow.global.shadow28[1] },
-    shadow64: { ambient: pipelineOutputShadow[64][0], key: pipelineOutputShadow[64][1] },
+    shadow64: { ambient: pipelineOutputShadow.global.shadow64[0], key: pipelineOutputShadow.global.shadow64[1] },
-    shadow2brand: { ambient: pipelineOutputShadow.brand[2][0], key: pipelineOutputShadow.brand[2][1] },
+    shadow2brand: { ambient: pipelineOutputShadow.global.shadowBrand2[0], key: pipelineOutputShadow.global.shadowBrand2[1] },
-    shadow4brand: { ambient: pipelineOutputShadow.brand[4][0], key: pipelineOutputShadow.brand[4][1] },
+    shadow4brand: { ambient: pipelineOutputShadow.global.shadowBrand4[0], key: pipelineOutputShadow.global.shadowBrand4[1] },
-    shadow8brand: { ambient: pipelineOutputShadow.brand[8][0], key: pipelineOutputShadow.brand[8][1] },
+    shadow8brand: { ambient: pipelineOutputShadow.global.shadowBrand8[0], key: pipelineOutputShadow.global.shadowBrand8[1] },
-    shadow16brand: { ambient: pipelineOutputShadow.brand[16][0], key: pipelineOutputShadow.brand[16][1] },
+    shadow16brand: { ambient: pipelineOutputShadow.global.shadowBrand16[0], key: pipelineOutputShadow.global.shadowBrand16[1] },
-    shadow28brand: { ambient: pipelineOutputShadow.brand[28][0], key: pipelineOutputShadow.brand[28][1] },
+    shadow28brand: { ambient: pipelineOutputShadow.global.shadowBrand28[0], key: pipelineOutputShadow.global.shadowBrand28[1] },
-    shadow64brand: { ambient: pipelineOutputShadow.brand[64][0], key: pipelineOutputShadow.brand[64][1] },
+    shadow64brand: { ambient: pipelineOutputShadow.global.shadowBrand64[0], key: pipelineOutputShadow.global.shadowBrand64[1] },
   };
 }

packages/theming/win32-theme/package.json

@@ -32,7 +32,7 @@
   "license": "MIT",
   "dependencies": {
     "@fluentui-react-native/default-theme": ">=0.16.10 <1.0.0",
-    "@fluentui-react-native/design-tokens-win32": "^0.13.0",
+    "@fluentui-react-native/design-tokens-win32": "^0.31.0",
     "@fluentui-react-native/memo-cache": "^1.1.7",
     "@fluentui-react-native/theme-tokens": ">=0.21.2 <1.0.0",
     "@fluentui-react-native/theme-types": ">=0.23.1 <1.0.0",

packages/theming/win32-theme/src/getOfficeTokens.ts

@@ -23,13 +23,13 @@ export function getOfficeAliasTokens(officeTheme: string) {
 
 export function getOfficeShadowTokens(officeTheme: string) {
   if (officeTheme === 'White' || officeTheme === 'Colorful') {
-    return colorfulShadowTokens.shadow;
+    return colorfulShadowTokens;
   } else if (officeTheme === 'DarkGray') {
-    return darkGrayShadowTokens.shadow;
+    return darkGrayShadowTokens;
   } else if (officeTheme === 'Black') {
-    return blackShadowTokens.shadow;
+    return blackShadowTokens;
   } else if (officeTheme === 'HighContrast') {
-    return hcShadowTokens.shadow;
+    return hcShadowTokens;
   }
 
   return colorfulAliasTokens;

yarn.lock

@@ -1457,40 +1457,30 @@
     minimatch "^3.1.2"
     strip-json-comments "^3.1.1"
 
-"@fluentui-react-native/design-tokens-android@^0.28.0":
+"@fluentui-react-native/design-tokens-android@^0.31.0":
-  version "0.28.0"
+  version "0.31.0"
-  resolved "https://registry.yarnpkg.com/@fluentui-react-native/design-tokens-android/-/design-tokens-android-0.28.0.tgz#45a55696e96351bb31be045d73499ffa2d75be95"
+  resolved "https://registry.yarnpkg.com/@fluentui-react-native/design-tokens-android/-/design-tokens-android-0.31.0.tgz#52a1209522f7d8eb8530b3b31cd1a63267f5483f"
-  integrity sha512-jsiU3XcF2421T2y35J33qXiR1ZczovPAFsr/dTSh7aT+0goXjl4RF9nrnZygsOaVKZosGlRZs23QjtDRvZaJCA==
+  integrity sha512-WjJBHW+Sd8CFQl6QnaoD/QMtMXJOCH2iPhCvosil7Z9zlDsjw1BBwU86FcqU1TK8W+oBZf+HYuYMIXu8bogUzg==
 
-"@fluentui-react-native/design-tokens-ios@^0.26.0":
+"@fluentui-react-native/design-tokens-ios@^0.31.0":
-  version "0.26.0"
+  version "0.31.0"
-  resolved "https://registry.yarnpkg.com/@fluentui-react-native/design-tokens-ios/-/design-tokens-ios-0.26.0.tgz#f477416ac88d42336cce4b5f182c2bdb7600c523"
+  resolved "https://registry.yarnpkg.com/@fluentui-react-native/design-tokens-ios/-/design-tokens-ios-0.31.0.tgz#b0195aede1eea607a95fe4682cb2970ff5989877"
-  integrity sha512-CGXuTisSlKzIMIq1JLkKBrhqy5LJpEai8BXiyrD9yw0WWU2jm9sWUoqXfH7EseJ/VrfZVueD9dUQW1jrI63e9Q==
+  integrity sha512-Ncl0aPlSLIeA+YFmINxiwbCA1K97oJeDKK6lA9AnI/88ObnkO5F68I5UscQopCCQunfyVW8b3g8fJF4IsUnJDA==
 
-"@fluentui-react-native/design-tokens-macos@^0.13.0":
+"@fluentui-react-native/design-tokens-macos@^0.31.0":
-  version "0.13.0"
+  version "0.31.0"
-  resolved "https://registry.yarnpkg.com/@fluentui-react-native/design-tokens-macos/-/design-tokens-macos-0.13.0.tgz#e1098f2ad2476867b8c656522efc3445c25b1ecc"
+  resolved "https://registry.yarnpkg.com/@fluentui-react-native/design-tokens-macos/-/design-tokens-macos-0.31.0.tgz#e91ad674e4c58ffcf70fdaf496ffb0b585fb4086"
-  integrity sha512-Le0bZeMBQ7W5CbivzDUwzlfmumKdYuKhBtvsRYODRIC+i0ST9Iy29ZBz1o6O+s/xXtW8l/PX2eVVozMEOQ5mig==
+  integrity sha512-JIphZwHEakTGmY4QeNOVMzQu0YS+iOpzcpagU924xV5PwSaRx1wgO96giWkDuR/o+bRbbNHOcgvue2MBJ8YbsQ==
 
-"@fluentui-react-native/design-tokens-win32@^0.13.0":
+"@fluentui-react-native/design-tokens-win32@^0.31.0":
-  version "0.13.0"
+  version "0.31.0"
-  resolved "https://registry.yarnpkg.com/@fluentui-react-native/design-tokens-win32/-/design-tokens-win32-0.13.0.tgz#6481f3d543fbc2534d4fb242e9b33e23ec32efd6"
+  resolved "https://registry.yarnpkg.com/@fluentui-react-native/design-tokens-win32/-/design-tokens-win32-0.31.0.tgz#4cfd08d212d9c210e1a89e8288cdd0838933e952"
-  integrity sha512-jSJD291L22ZRZiH0CFBbLW8y1kBoESrrARcPUk8bCgzyIRFCEkq0iGL8k3W8OY7ov8/TLAflfChY3GtVX99ynA==
+  integrity sha512-0a+zUnS8IzAqdUJ2rNra0Z3zxT8jzC549mV1o0FcgTNwgIyQo7DB4DW63ZK67ZFeh611PZm3a9omrrHbREB+Nw==
 
-"@fluentui-react-native/design-tokens-win32@^0.14.0":
+"@fluentui-react-native/design-tokens-windows@^0.31.0":
-  version "0.14.0"
+  version "0.31.0"
-  resolved "https://registry.yarnpkg.com/@fluentui-react-native/design-tokens-win32/-/design-tokens-win32-0.14.0.tgz#357b4244828bfc797edc6531f6c35519c2d4a736"
+  resolved "https://registry.yarnpkg.com/@fluentui-react-native/design-tokens-windows/-/design-tokens-windows-0.31.0.tgz#b871e8e4e4af408033e03205572294fde5770cea"
-  integrity sha512-xUdy2EpGQ2O/5cLVAP2tyKnCF9p6GGVKKo4Gtt0D7hbmuwXTcI/iOh2ReUOfMtgDOMjbbKpi8k8C49NHxUZLKA==
+  integrity sha512-OphIR5RkLIup7uUd4SCh0nU/WGhGw2w0ZkSYhxQ49k2KmHTA14L3W9hPxtgDfVBE8uS7/PMJ3L3tSCBiFgb9hg==
-
-"@fluentui-react-native/design-tokens-windows@^0.13.0":
-  version "0.13.0"
-  resolved "https://registry.yarnpkg.com/@fluentui-react-native/design-tokens-windows/-/design-tokens-windows-0.13.0.tgz#1d8610634920bd5decaca669cae8183c0713d2ef"
-  integrity sha512-o9ir+tpie+Fm9zO+nCbJLBfzVjUhugRWRsPS8n6wBaujC1qyeUYjhoGg6ejXzKc0nVCkIsFmRRRgC0brfrPIzw==
-
-"@fluentui-react-native/design-tokens-windows@^0.14.0":
-  version "0.14.0"
-  resolved "https://registry.yarnpkg.com/@fluentui-react-native/design-tokens-windows/-/design-tokens-windows-0.14.0.tgz#1483caa1dd4e7097ac48a5872e93d7f896e8402c"
-  integrity sha512-WNNVTMpRir6a2Voa0yu3BZJmy2w7fofrokL+nyFQM40bACtX68KDRDE96HA5W5+4q8rEaNSXV3DzSzLXm6ekfA==
 
 "@hapi/hoek@^9.0.0":
   version "9.3.0"