Updated the default fill color to neutral layer 1 (microsoft#5091)

mihsta · Aug 25, 2021 · db90173 · db90173
1 parent db847e6
commit db90173
Show file tree

Hide file tree

Showing 3 changed files with 153 additions and 137 deletions.
diff --git a/change/@microsoft-fast-components-3841eb95-9241-4633-9fd8-fe5424570f0a.json b/change/@microsoft-fast-components-3841eb95-9241-4633-9fd8-fe5424570f0a.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Updated the default fill color to neutral layer 1",
+  "packageName": "@microsoft/fast-components",
+  "email": "47367562+bheston@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/web-components/fast-components/.storybook/preview-head.html b/packages/web-components/fast-components/.storybook/preview-head.html
@@ -10,4 +10,14 @@
     #root {
         padding: 20px;
     }
+    #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/fast-components/src/design-tokens.ts b/packages/web-components/fast-components/src/design-tokens.ts
@@ -294,12 +294,145 @@ export const accentPalette = create<Palette>({
     cssCustomPropertyName: null,
 }).withDefault(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 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)
+);
+
+// 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)
+);
+
+// Neutral Layer 3
 /** @public */
-export const fillColor = create<Swatch>("fill-color").withDefault(element => {
-    const palette = neutralPalette.getValueFor(element);
-    return palette.get(palette.swatches.length - 5);
+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)
+);
+
+// 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 */
+export const fillColor = create<Swatch>("fill-color").withDefault(element =>
+    neutralLayer1.getValueFor(element)
+);
+
 enum ContrastTarget {
     normal = 4.5,
     large = 7,
@@ -830,137 +963,3 @@ export const neutralStrokeDividerRest = create<Swatch>(
 ).withDefault(element =>
     neutralStrokeDividerRecipe.getValueFor(element).evaluate(element)
 );
-
-// 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)
-);
-
-// 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)
-);
-
-// 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)
-);
-
-// 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)
-);