Shadow tokens take 2 (#865)

* Bump pipeline * Edit input file to have shadow tokens * Generate tokens, manually edit to have correct schema * Bump pipeline again * Regenerate token files * Change files
2021-08-09 10:48:07 -07:00 · 2021-08-09 10:48:07 -07:00 · 18e08c6879
--- a/change/@fluentui-react-native-theme-tokens-4bc53b2c-36fe-49b7-864c-2b71304f84d2.json
+++ b/change/@fluentui-react-native-theme-tokens-4bc53b2c-36fe-49b7-864c-2b71304f84d2.json
@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "Edit input file to have shadow tokens",
+  "packageName": "@fluentui-react-native/theme-tokens",
+  "email": "ruaraki@microsoft.com",
+  "dependentChangeType": "patch"
+}
--- a/package.json
+++ b/package.json
@ -33,7 +33,7 @@
    "test": "lage test"
  },
  "devDependencies": {
-    "@fluentui/token-pipeline": "^0.3.7",
+    "@fluentui/token-pipeline": "^0.3.9",
    "@rnx-kit/dep-check": "^1.5.10",
    "beachball": "^1.35.0",
    "lage": ">=0.17.4 <1.0.0",
--- a/packages/theming/theme-tokens/src/dark/reactnative/tokens-aliases.json
+++ b/packages/theming/theme-tokens/src/dark/reactnative/tokens-aliases.json
@ -61,13 +61,6 @@
 		"fillColorPressed": "#3aa0f3",
 		"fillColorDisabled": "#5c5c5c"
 	},
-	"brandStroke1Selected": {
-		"strokeColorRest": "#2899f5",
-		"strokeColorHover": "#2899f5",
-		"strokeColorPressed": "#2899f5",
-		"strokeColorDisabled": "#424242",
-		"strokeWidth": 1
-	},
 	"brandStroke1": {
 		"strokeColorRest": "#2899f5",
 		"strokeColorHover": "#2899f5",
@ -75,14 +68,21 @@
 		"strokeColorDisabled": "#424242",
 		"strokeWidth": 1
 	},
-	"brandStroke2Selected": {
+	"brandStroke1Selected": {
+		"strokeColorRest": "#2899f5",
+		"strokeColorHover": "#2899f5",
+		"strokeColorPressed": "#2899f5",
+		"strokeColorDisabled": "#424242",
+		"strokeWidth": 1
+	},
+	"brandStroke2": {
 		"strokeColorRest": "#004c87",
 		"strokeColorHover": "#004c87",
 		"strokeColorPressed": "#004c87",
 		"strokeColorDisabled": "#424242",
 		"strokeWidth": 1
 	},
-	"brandStroke2": {
+	"brandStroke2Selected": {
 		"strokeColorRest": "#004c87",
 		"strokeColorHover": "#004c87",
 		"strokeColorPressed": "#004c87",
@ -119,14 +119,14 @@
 		"fillColorPressed": "#0078d4",
 		"fillColorDisabled": "#5c5c5c"
 	},
-	"compoundBrandStroke1Selected": {
+	"compoundBrandStroke1": {
 		"strokeColorRest": "#2899f5",
 		"strokeColorHover": "#3aa0f3",
 		"strokeColorPressed": "#0078d4",
 		"strokeColorDisabled": "#424242",
 		"strokeWidth": 1
 	},
-	"compoundBrandStroke1": {
+	"compoundBrandStroke1Selected": {
 		"strokeColorRest": "#2899f5",
 		"strokeColorHover": "#3aa0f3",
 		"strokeColorPressed": "#0078d4",
@ -272,6 +272,12 @@
 		"fillColorPressed": "#ffffff",
 		"fillColorDisabled": "#5c5c5c"
 	},
+	"neutralForeground2": {
+		"fillColorRest": "#d6d6d6",
+		"fillColorHover": "#ffffff",
+		"fillColorPressed": "#ffffff",
+		"fillColorDisabled": "#5c5c5c"
+	},
 	"neutralForeground2Brand": {
 		"fillColorRest": "#424242",
 		"fillColorHover": "#3aa0f3",
@ -284,16 +290,16 @@
 		"fillColorPressed": "#2899f5",
 		"fillColorDisabled": "#5c5c5c"
 	},
-	"neutralForeground2": {
+	"neutralForeground2Selected": {
 		"fillColorRest": "#d6d6d6",
 		"fillColorHover": "#ffffff",
 		"fillColorPressed": "#ffffff",
 		"fillColorDisabled": "#5c5c5c"
 	},
-	"neutralForeground2Selected": {
-		"fillColorRest": "#d6d6d6",
-		"fillColorHover": "#ffffff",
-		"fillColorPressed": "#ffffff",
+	"neutralForeground3": {
+		"fillColorRest": "#adadad",
+		"fillColorHover": "#d6d6d6",
+		"fillColorPressed": "#d6d6d6",
 		"fillColorDisabled": "#5c5c5c"
 	},
 	"neutralForeground3Brand": {
@ -308,12 +314,6 @@
 		"fillColorPressed": "#2899f5",
 		"fillColorDisabled": "#5c5c5c"
 	},
-	"neutralForeground3": {
-		"fillColorRest": "#adadad",
-		"fillColorHover": "#d6d6d6",
-		"fillColorPressed": "#d6d6d6",
-		"fillColorDisabled": "#5c5c5c"
-	},
 	"neutralForeground3Selected": {
 		"fillColorRest": "#adadad",
 		"fillColorHover": "#d6d6d6",
@ -332,6 +332,12 @@
 		"fillColorPressed": "#999999",
 		"fillColorDisabled": "#5c5c5c"
 	},
+	"neutralForegroundInverted": {
+		"fillColorRest": "#242424",
+		"fillColorHover": "#242424",
+		"fillColorPressed": "#242424",
+		"fillColorDisabled": "#5c5c5c"
+	},
 	"neutralForegroundInvertedAccessible": {
 		"fillColorRest": "#ffffff",
 		"fillColorHover": "#ffffff",
@ -344,12 +350,6 @@
 		"fillColorPressed": "#ffffff",
 		"fillColorDisabled": "#ffffff"
 	},
-	"neutralForegroundInverted": {
-		"fillColorRest": "#242424",
-		"fillColorHover": "#242424",
-		"fillColorPressed": "#242424",
-		"fillColorDisabled": "#5c5c5c"
-	},
 	"neutralForegroundInvertedLink": {
 		"fillColorRest": "#ffffff",
 		"fillColorHover": "#ffffff",
@ -380,13 +380,6 @@
 		"fillColorPressed": "#ffffff",
 		"fillColorDisabled": "#5c5c5c"
 	},
-	"neutralStroke1Selected": {
-		"strokeColorRest": "#666666",
-		"strokeColorHover": "#757575",
-		"strokeColorPressed": "#6b6b6b",
-		"strokeColorDisabled": "#424242",
-		"strokeWidth": 1
-	},
 	"neutralStroke1": {
 		"strokeColorRest": "#666666",
 		"strokeColorHover": "#757575",
@ -394,10 +387,10 @@
 		"strokeColorDisabled": "#424242",
 		"strokeWidth": 1
 	},
-	"neutralStroke2Selected": {
-		"strokeColorRest": "#525252",
-		"strokeColorHover": "#525252",
-		"strokeColorPressed": "#525252",
+	"neutralStroke1Selected": {
+		"strokeColorRest": "#666666",
+		"strokeColorHover": "#757575",
+		"strokeColorPressed": "#6b6b6b",
 		"strokeColorDisabled": "#424242",
 		"strokeWidth": 1
 	},
@ -408,10 +401,10 @@
 		"strokeColorDisabled": "#424242",
 		"strokeWidth": 1
 	},
-	"neutralStroke3Selected": {
-		"strokeColorRest": "#3d3d3d",
-		"strokeColorHover": "#3d3d3d",
-		"strokeColorPressed": "#3d3d3d",
+	"neutralStroke2Selected": {
+		"strokeColorRest": "#525252",
+		"strokeColorHover": "#525252",
+		"strokeColorPressed": "#525252",
 		"strokeColorDisabled": "#424242",
 		"strokeWidth": 1
 	},
@ -422,14 +415,21 @@
 		"strokeColorDisabled": "#424242",
 		"strokeWidth": 1
 	},
-	"neutralStrokeAccessibleSelected": {
+	"neutralStroke3Selected": {
+		"strokeColorRest": "#3d3d3d",
+		"strokeColorHover": "#3d3d3d",
+		"strokeColorPressed": "#3d3d3d",
+		"strokeColorDisabled": "#424242",
+		"strokeWidth": 1
+	},
+	"neutralStrokeAccessible": {
 		"strokeColorRest": "#adadad",
 		"strokeColorHover": "#bdbdbd",
 		"strokeColorPressed": "#b3b3b3",
 		"strokeColorDisabled": "#424242",
 		"strokeWidth": 1
 	},
-	"neutralStrokeAccessible": {
+	"neutralStrokeAccessibleSelected": {
 		"strokeColorRest": "#adadad",
 		"strokeColorHover": "#bdbdbd",
 		"strokeColorPressed": "#b3b3b3",
--- a/packages/theming/theme-tokens/src/global/reactnative/tokens-global.json
+++ b/packages/theming/theme-tokens/src/global/reactnative/tokens-global.json
@ -72,6 +72,8 @@
 			"tint50": "#deecf9",
 			"tint60": "#eff6fc"
 		},
+		"brandShadowAmbient": "#0000004d",
+		"brandShadowKey": "#00000040",
 		"brass": {
 			"primary": "#986f0b",
 			"shade10": "#89640a",
@ -392,11 +394,11 @@
 			"100": "#ffffff"
 		},
 		"hc": {
+			"disabled": "#000000",
 			"buttonFace": "#000000",
 			"buttonText": "#000000",
 			"canvas": "#000000",
 			"canvasText": "#000000",
-			"disabled": "#000000",
 			"highlight": "#000000",
 			"highlightText": "#000000",
 			"hyperlink": "#000000"
@ -555,6 +557,8 @@
 			"tint50": "#ccd5f3",
 			"tint60": "#f2f4fc"
 		},
+		"neutralShadowAmbient": "#0000001f",
+		"neutralShadowKey": "#00000024",
 		"orange": {
 			"primary": "#f7630c",
 			"shade10": "#de590b",
@ -822,6 +826,178 @@
 			15
 		]
 	},
+	"shadow": {
+		"2": [
+			{
+				"x": 0,
+				"y": 0,
+				"blur": 2,
+				"color": "#0000001f"
+			},
+			{
+				"x": 0,
+				"y": 1,
+				"blur": 2,
+				"color": "#00000024"
+			}
+		],
+		"4": [
+			{
+				"x": 0,
+				"y": 0,
+				"blur": 2,
+				"color": "#0000001f"
+			},
+			{
+				"x": 0,
+				"y": 2,
+				"blur": 4,
+				"color": "#00000024"
+			}
+		],
+		"8": [
+			{
+				"x": 0,
+				"y": 0,
+				"blur": 2,
+				"color": "#0000001f"
+			},
+			{
+				"x": 0,
+				"y": 4,
+				"blur": 8,
+				"color": "#00000024"
+			}
+		],
+		"16": [
+			{
+				"x": 0,
+				"y": 0,
+				"blur": 2,
+				"color": "#0000001f"
+			},
+			{
+				"x": 0,
+				"y": 8,
+				"blur": 16,
+				"color": "#00000024"
+			}
+		],
+		"28": [
+			{
+				"x": 0,
+				"y": 0,
+				"blur": 8,
+				"color": "#0000001f"
+			},
+			{
+				"x": 0,
+				"y": 14,
+				"blur": 28,
+				"color": "#00000024"
+			}
+		],
+		"64": [
+			{
+				"x": 0,
+				"y": 0,
+				"blur": 8,
+				"color": "#0000001f"
+			},
+			{
+				"x": 0,
+				"y": 32,
+				"blur": 64,
+				"color": "#00000024"
+			}
+		],
+		"brand": {
+			"2": [
+				{
+					"x": 0,
+					"y": 0,
+					"blur": 2,
+					"color": "#0000004d"
+				},
+				{
+					"x": 0,
+					"y": 1,
+					"blur": 2,
+					"color": "#00000040"
+				}
+			],
+			"4": [
+				{
+					"x": 0,
+					"y": 0,
+					"blur": 2,
+					"color": "#0000004d"
+				},
+				{
+					"x": 0,
+					"y": 2,
+					"blur": 4,
+					"color": "#00000040"
+				}
+			],
+			"8": [
+				{
+					"x": 0,
+					"y": 0,
+					"blur": 2,
+					"color": "#0000004d"
+				},
+				{
+					"x": 0,
+					"y": 4,
+					"blur": 8,
+					"color": "#00000040"
+				}
+			],
+			"16": [
+				{
+					"x": 0,
+					"y": 0,
+					"blur": 2,
+					"color": "#0000004d"
+				},
+				{
+					"x": 0,
+					"y": 8,
+					"blur": 16,
+					"color": "#00000040"
+				}
+			],
+			"28": [
+				{
+					"x": 0,
+					"y": 0,
+					"blur": 8,
+					"color": "#0000004d"
+				},
+				{
+					"x": 0,
+					"y": 14,
+					"blur": 28,
+					"color": "#00000040"
+				}
+			],
+			"64": [
+				{
+					"x": 0,
+					"y": 0,
+					"blur": 8,
+					"color": "#0000004d"
+				},
+				{
+					"x": 0,
+					"y": 32,
+					"blur": 64,
+					"color": "#00000040"
+				}
+			]
+		}
+	},
 	"stroke": {
 		"width": {
 			"thick": 2,
--- a/packages/theming/theme-tokens/src/light/reactnative/tokens-aliases.json
+++ b/packages/theming/theme-tokens/src/light/reactnative/tokens-aliases.json
@ -61,13 +61,6 @@
 		"fillColorPressed": "#004578",
 		"fillColorDisabled": "#bdbdbd"
 	},
-	"brandStroke1Selected": {
-		"strokeColorRest": "#0078d4",
-		"strokeColorHover": "#0078d4",
-		"strokeColorPressed": "#0078d4",
-		"strokeColorDisabled": "#e0e0e0",
-		"strokeWidth": 1
-	},
 	"brandStroke1": {
 		"strokeColorRest": "#0078d4",
 		"strokeColorHover": "#0078d4",
@ -75,14 +68,21 @@
 		"strokeColorDisabled": "#e0e0e0",
 		"strokeWidth": 1
 	},
-	"brandStroke2Selected": {
+	"brandStroke1Selected": {
+		"strokeColorRest": "#0078d4",
+		"strokeColorHover": "#0078d4",
+		"strokeColorPressed": "#0078d4",
+		"strokeColorDisabled": "#e0e0e0",
+		"strokeWidth": 1
+	},
+	"brandStroke2": {
 		"strokeColorRest": "#c7e0f4",
 		"strokeColorHover": "#c7e0f4",
 		"strokeColorPressed": "#c7e0f4",
 		"strokeColorDisabled": "#e0e0e0",
 		"strokeWidth": 1
 	},
-	"brandStroke2": {
+	"brandStroke2Selected": {
 		"strokeColorRest": "#c7e0f4",
 		"strokeColorHover": "#c7e0f4",
 		"strokeColorPressed": "#c7e0f4",
@ -119,14 +119,14 @@
 		"fillColorPressed": "#005a9e",
 		"fillColorDisabled": "#bdbdbd"
 	},
-	"compoundBrandStroke1Selected": {
+	"compoundBrandStroke1": {
 		"strokeColorRest": "#0078d4",
 		"strokeColorHover": "#106ebe",
 		"strokeColorPressed": "#005a9e",
 		"strokeColorDisabled": "#e0e0e0",
 		"strokeWidth": 1
 	},
-	"compoundBrandStroke1": {
+	"compoundBrandStroke1Selected": {
 		"strokeColorRest": "#0078d4",
 		"strokeColorHover": "#106ebe",
 		"strokeColorPressed": "#005a9e",
@ -272,6 +272,12 @@
 		"fillColorPressed": "#242424",
 		"fillColorDisabled": "#bdbdbd"
 	},
+	"neutralForeground2": {
+		"fillColorRest": "#424242",
+		"fillColorHover": "#242424",
+		"fillColorPressed": "#242424",
+		"fillColorDisabled": "#bdbdbd"
+	},
 	"neutralForeground2Brand": {
 		"fillColorRest": "#424242",
 		"fillColorHover": "#0078d4",
@ -284,16 +290,16 @@
 		"fillColorPressed": "#106ebe",
 		"fillColorDisabled": "#bdbdbd"
 	},
-	"neutralForeground2": {
+	"neutralForeground2Selected": {
 		"fillColorRest": "#424242",
 		"fillColorHover": "#242424",
 		"fillColorPressed": "#242424",
 		"fillColorDisabled": "#bdbdbd"
 	},
-	"neutralForeground2Selected": {
-		"fillColorRest": "#424242",
-		"fillColorHover": "#242424",
-		"fillColorPressed": "#242424",
+	"neutralForeground3": {
+		"fillColorRest": "#616161",
+		"fillColorHover": "#424242",
+		"fillColorPressed": "#424242",
 		"fillColorDisabled": "#bdbdbd"
 	},
 	"neutralForeground3Brand": {
@ -308,12 +314,6 @@
 		"fillColorPressed": "#106ebe",
 		"fillColorDisabled": "#bdbdbd"
 	},
-	"neutralForeground3": {
-		"fillColorRest": "#616161",
-		"fillColorHover": "#424242",
-		"fillColorPressed": "#424242",
-		"fillColorDisabled": "#bdbdbd"
-	},
 	"neutralForeground3Selected": {
 		"fillColorRest": "#616161",
 		"fillColorHover": "#424242",
@ -332,6 +332,12 @@
 		"fillColorPressed": "#707070",
 		"fillColorDisabled": "#bdbdbd"
 	},
+	"neutralForegroundInverted": {
+		"fillColorRest": "#ffffff",
+		"fillColorHover": "#ffffff",
+		"fillColorPressed": "#ffffff",
+		"fillColorDisabled": "#bdbdbd"
+	},
 	"neutralForegroundInvertedAccessible": {
 		"fillColorRest": "#ffffff",
 		"fillColorHover": "#ffffff",
@ -344,12 +350,6 @@
 		"fillColorPressed": "#ffffff",
 		"fillColorDisabled": "#ffffff"
 	},
-	"neutralForegroundInverted": {
-		"fillColorRest": "#ffffff",
-		"fillColorHover": "#ffffff",
-		"fillColorPressed": "#ffffff",
-		"fillColorDisabled": "#bdbdbd"
-	},
 	"neutralForegroundInvertedLink": {
 		"fillColorRest": "#ffffff",
 		"fillColorHover": "#ffffff",
@ -380,13 +380,6 @@
 		"fillColorPressed": "#ffffff",
 		"fillColorDisabled": "#bdbdbd"
 	},
-	"neutralStroke1Selected": {
-		"strokeColorRest": "#d1d1d1",
-		"strokeColorHover": "#c7c7c7",
-		"strokeColorPressed": "#b3b3b3",
-		"strokeColorDisabled": "#e0e0e0",
-		"strokeWidth": 1
-	},
 	"neutralStroke1": {
 		"strokeColorRest": "#d1d1d1",
 		"strokeColorHover": "#c7c7c7",
@ -394,10 +387,10 @@
 		"strokeColorDisabled": "#e0e0e0",
 		"strokeWidth": 1
 	},
-	"neutralStroke2Selected": {
-		"strokeColorRest": "#e0e0e0",
-		"strokeColorHover": "#e0e0e0",
-		"strokeColorPressed": "#e0e0e0",
+	"neutralStroke1Selected": {
+		"strokeColorRest": "#d1d1d1",
+		"strokeColorHover": "#c7c7c7",
+		"strokeColorPressed": "#b3b3b3",
 		"strokeColorDisabled": "#e0e0e0",
 		"strokeWidth": 1
 	},
@ -408,10 +401,10 @@
 		"strokeColorDisabled": "#e0e0e0",
 		"strokeWidth": 1
 	},
-	"neutralStroke3Selected": {
-		"strokeColorRest": "#f0f0f0",
-		"strokeColorHover": "#f0f0f0",
-		"strokeColorPressed": "#f0f0f0",
+	"neutralStroke2Selected": {
+		"strokeColorRest": "#e0e0e0",
+		"strokeColorHover": "#e0e0e0",
+		"strokeColorPressed": "#e0e0e0",
 		"strokeColorDisabled": "#e0e0e0",
 		"strokeWidth": 1
 	},
@ -422,14 +415,21 @@
 		"strokeColorDisabled": "#e0e0e0",
 		"strokeWidth": 1
 	},
-	"neutralStrokeAccessibleSelected": {
+	"neutralStroke3Selected": {
+		"strokeColorRest": "#f0f0f0",
+		"strokeColorHover": "#f0f0f0",
+		"strokeColorPressed": "#f0f0f0",
+		"strokeColorDisabled": "#e0e0e0",
+		"strokeWidth": 1
+	},
+	"neutralStrokeAccessible": {
 		"strokeColorRest": "#616161",
 		"strokeColorHover": "#575757",
 		"strokeColorPressed": "#4d4d4d",
 		"strokeColorDisabled": "#e0e0e0",
 		"strokeWidth": 1
 	},
-	"neutralStrokeAccessible": {
+	"neutralStrokeAccessibleSelected": {
 		"strokeColorRest": "#616161",
 		"strokeColorHover": "#575757",
 		"strokeColorPressed": "#4d4d4d",
--- a/packages/theming/theme-tokens/src/pipeline-input/token-input.json
+++ b/packages/theming/theme-tokens/src/pipeline-input/token-input.json
@ -85,7 +85,11 @@
      "Anchor": { "generate": { "type": "fluentsharedcolors", "value": "#394146" } },
      "Charcoal": { "generate": { "type": "fluentsharedcolors", "value": "#393939" } },
      "White": { "value": "#ffffff" },
-      "Black": { "value": "#000000" }
+      "Black": { "value": "#000000" },
+      "NeutralShadowAmbient": { "value": "rgba(0,0,0,0.12)" },
+      "NeutralShadowKey": { "value": "rgba(0,0,0,0.14)" },
+      "BrandShadowAmbient": { "value": "rgba(0,0,0,0.30)" },
+      "BrandShadowKey": { "value": "rgba(0,0,0,0.25)" }
    },
    "Stroke": {
      "Width": {
@ -146,6 +150,82 @@
        "Semibold": { "value": 600 },
        "Bold": { "value": 700 }
      }
+    },
+    "Shadow": {
+      "2": {
+        "value": [
+          { "x": 0, "y": 0, "blur": 2, "color": { "aliasOf": "Global.Color.NeutralShadowAmbient" } },
+          { "x": 0, "y": 1, "blur": 2, "color": { "aliasOf": "Global.Color.NeutralShadowKey" } }
+        ]
+      },
+      "4": {
+        "value": [
+          { "x": 0, "y": 0, "blur": 2, "color": { "aliasOf": "Global.Color.NeutralShadowAmbient" } },
+          { "x": 0, "y": 2, "blur": 4, "color": { "aliasOf": "Global.Color.NeutralShadowKey" } }
+        ]
+      },
+      "8": {
+        "value": [
+          { "x": 0, "y": 0, "blur": 2, "color": { "aliasOf": "Global.Color.NeutralShadowAmbient" } },
+          { "x": 0, "y": 4, "blur": 8, "color": { "aliasOf": "Global.Color.NeutralShadowKey" } }
+        ]
+      },
+      "16": {
+        "value": [
+          { "x": 0, "y": 0, "blur": 2, "color": { "aliasOf": "Global.Color.NeutralShadowAmbient" } },
+          { "x": 0, "y": 8, "blur": 16, "color": { "aliasOf": "Global.Color.NeutralShadowKey" } }
+        ]
+      },
+      "28": {
+        "value": [
+          { "x": 0, "y": 0, "blur": 8, "color": { "aliasOf": "Global.Color.NeutralShadowAmbient" } },
+          { "x": 0, "y": 14, "blur": 28, "color": { "aliasOf": "Global.Color.NeutralShadowKey" } }
+        ]
+      },
+      "64": {
+        "value": [
+          { "x": 0, "y": 0, "blur": 8, "color": { "aliasOf": "Global.Color.NeutralShadowAmbient" } },
+          { "x": 0, "y": 32, "blur": 64, "color": { "aliasOf": "Global.Color.NeutralShadowKey" } }
+        ]
+      },
+      "Brand": {
+        "2": {
+          "value": [
+            { "x": 0, "y": 0, "blur": 2, "color": { "aliasOf": "Global.Color.BrandShadowAmbient" } },
+            { "x": 0, "y": 1, "blur": 2, "color": { "aliasOf": "Global.Color.BrandShadowKey" } }
+          ]
+        },
+        "4": {
+          "value": [
+            { "x": 0, "y": 0, "blur": 2, "color": { "aliasOf": "Global.Color.BrandShadowAmbient" } },
+            { "x": 0, "y": 2, "blur": 4, "color": { "aliasOf": "Global.Color.BrandShadowKey" } }
+          ]
+        },
+        "8": {
+          "value": [
+            { "x": 0, "y": 0, "blur": 2, "color": { "aliasOf": "Global.Color.BrandShadowAmbient" } },
+            { "x": 0, "y": 4, "blur": 8, "color": { "aliasOf": "Global.Color.BrandShadowKey" } }
+          ]
+        },
+        "16": {
+          "value": [
+            { "x": 0, "y": 0, "blur": 2, "color": { "aliasOf": "Global.Color.BrandShadowAmbient" } },
+            { "x": 0, "y": 8, "blur": 16, "color": { "aliasOf": "Global.Color.BrandShadowKey" } }
+          ]
+        },
+        "28": {
+          "value": [
+            { "x": 0, "y": 0, "blur": 8, "color": { "aliasOf": "Global.Color.BrandShadowAmbient" } },
+            { "x": 0, "y": 14, "blur": 28, "color": { "aliasOf": "Global.Color.BrandShadowKey" } }
+          ]
+        },
+        "64": {
+          "value": [
+            { "x": 0, "y": 0, "blur": 8, "color": { "aliasOf": "Global.Color.BrandShadowAmbient" } },
+            { "x": 0, "y": 32, "blur": 64, "color": { "aliasOf": "Global.Color.BrandShadowKey" } }
+          ]
+        }
+      }
    }
  },
  "Set": {
--- a/yarn.lock
+++ b/yarn.lock
@ -1253,10 +1253,10 @@
    minimatch "^3.0.4"
    strip-json-comments "^3.1.1"

-"@fluentui/token-pipeline@^0.3.7":
-  version "0.3.7"
-  resolved "https://registry.yarnpkg.com/@fluentui/token-pipeline/-/token-pipeline-0.3.7.tgz#4ac3326c1d12539c7f8abc339432b69172c27bf1"
-  integrity sha512-HGuxm3o+FxSIRii6jjNXdlnRh8wSm91NUsBFiFdgnrIzEwn9ZcYi3UDXK65vzHCfueG9F2N0NJc2PF0/GlCsNQ==
+"@fluentui/token-pipeline@^0.3.9":
+  version "0.3.9"
+  resolved "https://registry.yarnpkg.com/@fluentui/token-pipeline/-/token-pipeline-0.3.9.tgz#7db1c8c3b2242ba4bbd9a172b7ae8bfb1f22e138"
+  integrity sha512-8rS5M+8H1+f4HG0wFu3Dd9Nj+RyBylXKq/B5slta5rwMrssJbmdusgtAuP1GpqfNITrsUA1k2u+HH4rggr6qVw==
  dependencies:
    args "^5.0.1"
    esm "^3.2.25"