From 53d2bee2745b9f9a4c59a90f4bd59a80378d590f Mon Sep 17 00:00:00 2001
From: Brian Heston <47367562+bheston@users.noreply.github.com>
Date: Thu, 9 Sep 2021 11:08:01 -0700
Subject: [PATCH] (web-components) Updated the default fill color to neutral
 layer 1 (#19726)

* Updated the default fill color to neutral layer 1

* Change files

* Update Storybook wrapper to set foreground color
---
 ...-79361e82-0819-43b5-bb93-6fd3cad41bb0.json |   7 +
 .../.storybook/preview-head.html              |  10 +
 packages/web-components/src/design-tokens.ts  | 257 +++++++++---------
 3 files changed, 144 insertions(+), 130 deletions(-)
 create mode 100644 change/@fluentui-web-components-79361e82-0819-43b5-bb93-6fd3cad41bb0.json

diff --git a/change/@fluentui-web-components-79361e82-0819-43b5-bb93-6fd3cad41bb0.json b/change/@fluentui-web-components-79361e82-0819-43b5-bb93-6fd3cad41bb0.json
new file mode 100644
index 0000000000000..5f336daf5f93f
--- /dev/null
+++ b/change/@fluentui-web-components-79361e82-0819-43b5-bb93-6fd3cad41bb0.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Updated the default fill color to neutral layer 1",
+  "packageName": "@fluentui/web-components",
+  "email": "47367562+bheston@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/web-components/.storybook/preview-head.html b/packages/web-components/.storybook/preview-head.html
index 4752d565045d3..909476c89056e 100644
--- a/packages/web-components/.storybook/preview-head.html
+++ b/packages/web-components/.storybook/preview-head.html
@@ -6,4 +6,14 @@
     height: 100%;
     background: var(--fill-color);
   }
+  #root > h1,
+  #root > h2,
+  #root > h3,
+  #root > h4,
+  #root > h5,
+  #root > h6,
+  #root > p,
+  #root > span {
+    color: var(--neutral-foreground-rest);
+  }
 </style>
diff --git a/packages/web-components/src/design-tokens.ts b/packages/web-components/src/design-tokens.ts
index 20c554307fb0f..8753b36c9b21b 100644
--- a/packages/web-components/src/design-tokens.ts
+++ b/packages/web-components/src/design-tokens.ts
@@ -228,12 +228,136 @@ export const accentPalette = create<Palette>({ name: 'accent-palette', cssCustom
   PaletteRGB.create(accentBase),
 );
 
+// Neutral Layer Card Container
+/** @public */
+export const neutralLayerCardContainerRecipe = create<ColorRecipe>({
+  name: 'neutral-layer-card-container-recipe',
+  cssCustomPropertyName: null,
+}).withDefault({
+  evaluate: (element: HTMLElement): Swatch =>
+    neutralLayerCardContainerAlgorithm(
+      neutralPalette.getValueFor(element),
+      baseLayerLuminance.getValueFor(element),
+      neutralFillLayerRestDelta.getValueFor(element),
+    ),
+});
+
+/** @public */
+export const neutralLayerCardContainer = create<Swatch>(
+  'neutral-layer-card-container',
+).withDefault((element: HTMLElement) => neutralLayerCardContainerRecipe.getValueFor(element).evaluate(element));
+
+// Neutral Layer Floating
+/** @public */
+export const neutralLayerFloatingRecipe = create<ColorRecipe>({
+  name: 'neutral-layer-floating-recipe',
+  cssCustomPropertyName: null,
+}).withDefault({
+  evaluate: (element: HTMLElement): Swatch =>
+    neutralLayerFloatingAlgorithm(
+      neutralPalette.getValueFor(element),
+      baseLayerLuminance.getValueFor(element),
+      neutralFillLayerRestDelta.getValueFor(element),
+    ),
+});
+
+/** @public */
+export const neutralLayerFloating = create<Swatch>('neutral-layer-floating').withDefault((element: HTMLElement) =>
+  neutralLayerFloatingRecipe.getValueFor(element).evaluate(element),
+);
+
+// Neutral Layer 1
 /** @public */
-export const fillColor = create<Swatch>('fill-color').withDefault(element => {
-  const palette = neutralPalette.getValueFor(element);
-  return palette.get(0);
+export const neutralLayer1Recipe = create<ColorRecipe>({
+  name: 'neutral-layer-1-recipe',
+  cssCustomPropertyName: null,
+}).withDefault({
+  evaluate: (element: HTMLElement): Swatch =>
+    neutralLayer1Algorithm(neutralPalette.getValueFor(element), baseLayerLuminance.getValueFor(element)),
 });
 
+/** @public */
+export const neutralLayer1 = create<Swatch>('neutral-layer-1').withDefault((element: HTMLElement) =>
+  neutralLayer1Recipe.getValueFor(element).evaluate(element),
+);
+/** @public @deprecated Use neutralLayer1 */
+export const neutralLayerL1 = neutralLayer1;
+
+// Neutral Layer 2
+/** @public */
+export const neutralLayer2Recipe = create<ColorRecipe>({
+  name: 'neutral-layer-2-recipe',
+  cssCustomPropertyName: null,
+}).withDefault({
+  evaluate: (element: HTMLElement): Swatch =>
+    neutralLayer2Algorithm(
+      neutralPalette.getValueFor(element),
+      baseLayerLuminance.getValueFor(element),
+      neutralFillLayerRestDelta.getValueFor(element),
+      neutralFillRestDelta.getValueFor(element),
+      neutralFillHoverDelta.getValueFor(element),
+      neutralFillActiveDelta.getValueFor(element),
+    ),
+});
+
+/** @public */
+export const neutralLayer2 = create<Swatch>('neutral-layer-2').withDefault((element: HTMLElement) =>
+  neutralLayer2Recipe.getValueFor(element).evaluate(element),
+);
+/** @public @deprecated Use neutralLayer2 */
+export const neutralLayerL2 = neutralLayer2;
+
+// Neutral Layer 3
+/** @public */
+export const neutralLayer3Recipe = create<ColorRecipe>({
+  name: 'neutral-layer-3-recipe',
+  cssCustomPropertyName: null,
+}).withDefault({
+  evaluate: (element: HTMLElement): Swatch =>
+    neutralLayer3Algorithm(
+      neutralPalette.getValueFor(element),
+      baseLayerLuminance.getValueFor(element),
+      neutralFillLayerRestDelta.getValueFor(element),
+      neutralFillRestDelta.getValueFor(element),
+      neutralFillHoverDelta.getValueFor(element),
+      neutralFillActiveDelta.getValueFor(element),
+    ),
+});
+
+/** @public */
+export const neutralLayer3 = create<Swatch>('neutral-layer-3').withDefault((element: HTMLElement) =>
+  neutralLayer3Recipe.getValueFor(element).evaluate(element),
+);
+/** @public @deprecated Use neutralLayer3 */
+export const neutralLayerL3 = neutralLayer3;
+
+// Neutral Layer 4
+/** @public */
+export const neutralLayer4Recipe = create<ColorRecipe>({
+  name: 'neutral-layer-4-recipe',
+  cssCustomPropertyName: null,
+}).withDefault({
+  evaluate: (element: HTMLElement): Swatch =>
+    neutralLayer4Algorithm(
+      neutralPalette.getValueFor(element),
+      baseLayerLuminance.getValueFor(element),
+      neutralFillLayerRestDelta.getValueFor(element),
+      neutralFillRestDelta.getValueFor(element),
+      neutralFillHoverDelta.getValueFor(element),
+      neutralFillActiveDelta.getValueFor(element),
+    ),
+});
+
+/** @public */
+export const neutralLayer4 = create<Swatch>('neutral-layer-4').withDefault((element: HTMLElement) =>
+  neutralLayer4Recipe.getValueFor(element).evaluate(element),
+);
+/** @public @deprecated Use neutralLayer4 */
+export const neutralLayerL4 = neutralLayer4;
+
+/** @public */
+export const fillColor = create<Swatch>('fill-color').withDefault(element => neutralLayer1.getValueFor(element));
+
 enum ContrastTarget {
   normal = 4.5,
   large = 7,
@@ -760,130 +884,3 @@ export const neutralStrokeStrongActive = create<Swatch>('neutral-stroke-strong-a
 export const neutralStrokeStrongFocus = create<Swatch>('neutral-stroke-strong-focus').withDefault(
   (element: HTMLElement) => neutralStrokeStrongRecipe.getValueFor(element).evaluate(element).focus,
 );
-
-// Neutral Layer Card Container
-/** @public */
-export const neutralLayerCardContainerRecipe = create<ColorRecipe>({
-  name: 'neutral-layer-card-container-recipe',
-  cssCustomPropertyName: null,
-}).withDefault({
-  evaluate: (element: HTMLElement): Swatch =>
-    neutralLayerCardContainerAlgorithm(
-      neutralPalette.getValueFor(element),
-      baseLayerLuminance.getValueFor(element),
-      neutralFillLayerRestDelta.getValueFor(element),
-    ),
-});
-
-/** @public */
-export const neutralLayerCardContainer = create<Swatch>(
-  'neutral-layer-card-container',
-).withDefault((element: HTMLElement) => neutralLayerCardContainerRecipe.getValueFor(element).evaluate(element));
-
-// Neutral Layer Floating
-/** @public */
-export const neutralLayerFloatingRecipe = create<ColorRecipe>({
-  name: 'neutral-layer-floating-recipe',
-  cssCustomPropertyName: null,
-}).withDefault({
-  evaluate: (element: HTMLElement): Swatch =>
-    neutralLayerFloatingAlgorithm(
-      neutralPalette.getValueFor(element),
-      baseLayerLuminance.getValueFor(element),
-      neutralFillLayerRestDelta.getValueFor(element),
-    ),
-});
-
-/** @public */
-export const neutralLayerFloating = create<Swatch>('neutral-layer-floating').withDefault((element: HTMLElement) =>
-  neutralLayerFloatingRecipe.getValueFor(element).evaluate(element),
-);
-
-// Neutral Layer 1
-/** @public */
-export const neutralLayer1Recipe = create<ColorRecipe>({
-  name: 'neutral-layer-1-recipe',
-  cssCustomPropertyName: null,
-}).withDefault({
-  evaluate: (element: HTMLElement): Swatch =>
-    neutralLayer1Algorithm(neutralPalette.getValueFor(element), baseLayerLuminance.getValueFor(element)),
-});
-
-/** @public */
-export const neutralLayer1 = create<Swatch>('neutral-layer-1').withDefault((element: HTMLElement) =>
-  neutralLayer1Recipe.getValueFor(element).evaluate(element),
-);
-/** @public @deprecated Use neutralLayer1 */
-export const neutralLayerL1 = neutralLayer1;
-
-// Neutral Layer 2
-/** @public */
-export const neutralLayer2Recipe = create<ColorRecipe>({
-  name: 'neutral-layer-2-recipe',
-  cssCustomPropertyName: null,
-}).withDefault({
-  evaluate: (element: HTMLElement): Swatch =>
-    neutralLayer2Algorithm(
-      neutralPalette.getValueFor(element),
-      baseLayerLuminance.getValueFor(element),
-      neutralFillLayerRestDelta.getValueFor(element),
-      neutralFillRestDelta.getValueFor(element),
-      neutralFillHoverDelta.getValueFor(element),
-      neutralFillActiveDelta.getValueFor(element),
-    ),
-});
-
-/** @public */
-export const neutralLayer2 = create<Swatch>('neutral-layer-2').withDefault((element: HTMLElement) =>
-  neutralLayer2Recipe.getValueFor(element).evaluate(element),
-);
-/** @public @deprecated Use neutralLayer2 */
-export const neutralLayerL2 = neutralLayer2;
-
-// Neutral Layer 3
-/** @public */
-export const neutralLayer3Recipe = create<ColorRecipe>({
-  name: 'neutral-layer-3-recipe',
-  cssCustomPropertyName: null,
-}).withDefault({
-  evaluate: (element: HTMLElement): Swatch =>
-    neutralLayer3Algorithm(
-      neutralPalette.getValueFor(element),
-      baseLayerLuminance.getValueFor(element),
-      neutralFillLayerRestDelta.getValueFor(element),
-      neutralFillRestDelta.getValueFor(element),
-      neutralFillHoverDelta.getValueFor(element),
-      neutralFillActiveDelta.getValueFor(element),
-    ),
-});
-
-/** @public */
-export const neutralLayer3 = create<Swatch>('neutral-layer-3').withDefault((element: HTMLElement) =>
-  neutralLayer3Recipe.getValueFor(element).evaluate(element),
-);
-/** @public @deprecated Use neutralLayer3 */
-export const neutralLayerL3 = neutralLayer3;
-
-// Neutral Layer 4
-/** @public */
-export const neutralLayer4Recipe = create<ColorRecipe>({
-  name: 'neutral-layer-4-recipe',
-  cssCustomPropertyName: null,
-}).withDefault({
-  evaluate: (element: HTMLElement): Swatch =>
-    neutralLayer4Algorithm(
-      neutralPalette.getValueFor(element),
-      baseLayerLuminance.getValueFor(element),
-      neutralFillLayerRestDelta.getValueFor(element),
-      neutralFillRestDelta.getValueFor(element),
-      neutralFillHoverDelta.getValueFor(element),
-      neutralFillActiveDelta.getValueFor(element),
-    ),
-});
-
-/** @public */
-export const neutralLayer4 = create<Swatch>('neutral-layer-4').withDefault((element: HTMLElement) =>
-  neutralLayer4Recipe.getValueFor(element).evaluate(element),
-);
-/** @public @deprecated Use neutralLayer4 */
-export const neutralLayerL4 = neutralLayer4;