fix: fast card should be design system provider (microsoft#4107)

* fix: fast card should be design system provider

* addressed PR comments

* fixed readme

packages/web-components/fast-components/src/card/README.md

@@ -1,4 +1,4 @@
 # fast-card
-The `fast-card` component is a visual container without semantics that takes children. Cards are snapshots of content that are typically used in a group to present collections of related information.
+The `fast-card` component is a visual container and design system provider. By default `fast-card` applies `neutralFillCard` to its background that is calculated from its parent design system provider. If a custom background color is desired the attribute `card-background-color` is available, this will reset the cards design system to that value. Cards are snapshots of content that are typically used in a group to present collections of related information.
 
 For more information view the [component specification](../../../fast-foundation/src/card/card.spec.md).

packages/web-components/fast-components/src/card/card.definition.ts

@@ -1,12 +1,28 @@
 import { WebComponentDefinition } from "@microsoft/fast-tooling/dist/data-utilities/web-component";
+import { DataType } from "@microsoft/fast-tooling";
 
 export const fastCardDefinition: WebComponentDefinition = {
     version: 1,
     tags: [
         {
             name: "fast-card",
             description: "The FAST card element",
-            attributes: [],
+            attributes: [
+                {
+                    name: "background-color",
+                    description: "The background color attribute",
+                    type: DataType.string,
+                    default: "",
+                    required: false,
+                },
+                {
+                    name: "card-background-color",
+                    description: "The card background color attribute",
+                    type: DataType.string,
+                    default: "",
+                    required: false,
+                },
+            ],
             slots: [
                 {
                     name: "",

packages/web-components/fast-components/src/card/card.styles.ts

@@ -1,7 +1,7 @@
 import { css } from "@microsoft/fast-element";
 import { display, forcedColorsStylesheetBehavior } from "@microsoft/fast-foundation";
 import { SystemColors } from "@microsoft/fast-web-utilities";
-import { elevation, neutralFillCardRestBehavior } from "../styles/index";
+import { elevation } from "../styles/index";
 
 export const CardStyles = css`
     ${display("block")} :host {
@@ -11,12 +11,11 @@ export const CardStyles = css`
         height: var(--card-height, 100%);
         width: var(--card-width, 100%);
         box-sizing: border-box;
-        background: ${neutralFillCardRestBehavior.var};
+        background: var(--background-color);
         border-radius: calc(var(--corner-radius) * 1px);
         ${elevation}
     }
 `.withBehaviors(
-    neutralFillCardRestBehavior,
     forcedColorsStylesheetBehavior(
         css`
             :host {

packages/web-components/fast-components/src/card/fixtures/card.html

@@ -19,5 +19,32 @@
         </fast-card>
         <br />
         <fast-card class="state-override">Custom depth on hover using CSS</fast-card>
+        <br />
+        <fast-card
+            style="
+                --card-height: 400px;
+                --card-width: 500px;
+                display: flex;
+                flex-direction: column;
+                padding: 20px;
+            "
+        >
+            With controls
+            <fast-button appearance="stealth">Test Button</fast-button>
+        </fast-card>
+        <br />
+        <fast-card
+            card-background-color="#FFC700"
+            style="
+                --card-height: 400px;
+                --card-width: 500px;
+                display: flex;
+                flex-direction: column;
+                padding: 20px;
+            "
+        >
+            Custom background
+            <fast-button appearance="stealth">Test Button</fast-button>
+        </fast-card>
     </div>
 </fast-design-system-provider>

packages/web-components/fast-components/src/card/index.ts

@@ -1,6 +1,20 @@
 import { customElement } from "@microsoft/fast-element";
-import { Card, CardTemplate as template } from "@microsoft/fast-foundation";
+import { attr, Notifier, Observable } from "@microsoft/fast-element";
+import {
+    designSystemProperty,
+    DesignSystemProvider,
+    Card,
+    CardTemplate as template,
+} from "@microsoft/fast-foundation";
 import { CardStyles as styles } from "./card.styles";
+import { parseColorHexRGB } from "@microsoft/fast-colors";
+import {
+    createColorPalette,
+    DesignSystem,
+    neutralFillCard,
+} from "@microsoft/fast-components-styles-msft";
+
+const paletteCache = new Map();
 
 /**
  * The FAST Card Element. Implements {@link @microsoft/fast-foundation#Card},
@@ -16,7 +30,82 @@ import { CardStyles as styles } from "./card.styles";
     template,
     styles,
 })
-export class FASTCard extends Card {}
+export class FASTCard extends DesignSystemProvider
+    implements Pick<DesignSystem, "backgroundColor" | "neutralPalette"> {
+    /**
+     * @internal
+     * @remarks
+     * HTML Attribute: background-color
+     */
+    @designSystemProperty({
+        attribute: false,
+        cssCustomProperty: "background-color",
+        default: "#FFFFFF",
+    })
+    public backgroundColor: string;
+
+    /**
+     * Background color for the card component. Sets context for the design system.
+     * @public
+     * @remarks
+     * HTML Attribute: card-background-color
+     */
+    @attr({
+        attribute: "card-background-color",
+    })
+    public cardBackgroundColor: string;
+    private cardBackgroundColorChanged(prev: string | void, next: string | void): void {
+        if (next) {
+            const parsedColor = parseColorHexRGB(this.cardBackgroundColor);
+
+            if (parsedColor !== null) {
+                if (paletteCache.has(parsedColor)) {
+                    this.neutralPalette = paletteCache.get(parsedColor);
+                } else {
+                    const neutralPalette = createColorPalette(parsedColor);
+                    paletteCache.set(parsedColor, neutralPalette);
+                    this.neutralPalette = neutralPalette;
+                }
+                this.backgroundColor = this.cardBackgroundColor;
+            }
+        } else if (this.provider && this.provider.designSystem) {
+            this.handleChange(
+                this.provider.designSystem as DesignSystem,
+                "backgroundColor"
+            );
+        }
+    }
+
+    /**
+     * Neutral pallette for the the design system provider.
+     * @internal
+     */
+    @designSystemProperty({
+        attribute: false,
+        default: createColorPalette(parseColorHexRGB("#FFFFFF")!),
+        cssCustomProperty: false,
+    })
+    public neutralPalette: string[];
+
+    /**
+     * @internal
+     */
+    public handleChange(source: DesignSystem, name: string): void {
+        if (!this.cardBackgroundColor) {
+            this.backgroundColor = neutralFillCard(source);
+        }
+    }
+
+    connectedCallback(): void {
+        super.connectedCallback();
+        const parentDSNotifier: Notifier = Observable.getNotifier(
+            this.provider?.designSystem
+        );
+        parentDSNotifier.subscribe(this, "backgroundColor");
+        parentDSNotifier.subscribe(this, "neutralPalette");
+        this.handleChange(this.provider?.designSystem as DesignSystem, "backgroundColor");
+    }
+}
 
 /**
  * Styles for Card