(web-components) update neutral fill card (#18432)

Updated the neutral fill card color recipe to always be lighter or equal to the container, instead of flipping to go darker over white.

change/@fluentui-web-components-d6611ae4-5fa9-4379-890a-1de594a175aa.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "Updated the neutral fill card color recipe to always be lighter or equal to the container, instead of flipping to go darker over white.",
+  "packageName": "@fluentui/web-components",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

packages/web-components/src/color/neutral-fill-card.spec.ts

@@ -5,10 +5,10 @@ import { neutralFillCard } from "./neutral-fill-card";
 describe("neutralFillCard", (): void => {
     it("should operate on design system defaults", (): void => {
         expect(neutralFillCard({} as DesignSystem)).to.equal(
-            DesignSystemDefaults.neutralPalette[DesignSystemDefaults.neutralFillCardDelta]
+            DesignSystemDefaults.neutralPalette[0]
         );
     });
-    it("should get darker when the index of the backgroundColor is lower than the offset index", (): void => {
+    it("should stay white when the index of the backgroundColor is lower than the offset index", (): void => {
         for (let i: number = 0; i < DesignSystemDefaults.neutralFillCardDelta; i++) {
             expect(
                 DesignSystemDefaults.neutralPalette.indexOf(
@@ -18,7 +18,7 @@ describe("neutralFillCard", (): void => {
                         })
                     )
                 )
-            ).to.equal(DesignSystemDefaults.neutralFillCardDelta + i);
+            ).to.equal(0);
         }
     });
     it("should return the color at three steps lower than the background color", (): void => {

packages/web-components/src/color/neutral-fill-card.ts

@@ -5,7 +5,7 @@ import { findClosestSwatchIndex, getSwatch } from './palette';
 const neutralCardFillAlgorithm: SwatchResolver = (designSystem: DesignSystem): Swatch => {
   const offset: number = neutralFillCardDelta(designSystem);
   const index: number = findClosestSwatchIndex(neutralPalette, backgroundColor(designSystem))(designSystem);
-  return getSwatch(index - (index < offset ? offset * -1 : offset), neutralPalette(designSystem));
+  return getSwatch(index - offset, neutralPalette(designSystem));
 };
 
 /**