feat: design-system-provider now paints CSS color and background color

packages/web-components/fast-components-msft/.storybook/preview-head.html

@@ -0,0 +1,16 @@
+<style>
+    html,
+    body,
+    #root {
+        margin: 0;
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+    }
+
+    fast-design-system-provider {
+        flex-grow: 1;
+        overflow: auto;
+        padding: calc(var(--design-unit) * 2px);
+    }
+</style>

packages/web-components/fast-components-msft/.storybook/theme.js

@@ -0,0 +1,5 @@
+import { create } from "@storybook/theming/create";
+
+export default create({
+    brandTitle: "FAST components MSFT storybook",
+});

packages/web-components/fast-components-msft/docs/api-report.md

@@ -156,6 +156,7 @@ export class FASTDesignSystemProvider extends DesignSystemProvider implements Om
     neutralOutlineRestDelta: number;
     // (undocumented)
     neutralPalette: string[];
+    noPaint: boolean;
     // (undocumented)
     outlineWidth: number;
     // (undocumented)

packages/web-components/fast-components-msft/src/design-system-provider/index.ts

@@ -1,17 +1,32 @@
-import { nullableNumberConverter } from "@microsoft/fast-element";
+import { attr, css, nullableNumberConverter } from "@microsoft/fast-element";
 import {
     DensityOffset,
     DesignSystem,
     DesignSystemDefaults,
+    neutralForegroundRest,
 } from "@microsoft/fast-components-styles-msft";
 import {
+    CSSCustomPropertyBehavior,
     designSystemProperty,
-    designSystemProvider,
     DesignSystemProvider,
+    designSystemProvider,
     DesignSystemProviderTemplate as template,
 } from "@microsoft/fast-foundation";
 import { DesignSystemProviderStyles as styles } from "./design-system-provider.styles";
 
+const color = new CSSCustomPropertyBehavior(
+    "neutral-foreground-rest",
+    neutralForegroundRest,
+    (el: FASTDesignSystemProvider) => el
+);
+
+const backgroundStyles = css`
+    :host {
+        background-color: var(--background-color);
+        color: ${color.var};
+    }
+`.withBehaviors(color);
+
 @designSystemProvider({
     name: "fast-design-system-provider",
     template,
@@ -27,6 +42,24 @@ export class FASTDesignSystemProvider extends DesignSystemProvider
             | "neutralForegroundDarkIndex"
             | "neutralForegroundLightIndex"
         > {
+    /**
+     * Used to instruct the FASTDesignSystemProvider
+     * that it should not set the CSS
+     * background-color and color properties
+     *
+     * @remarks
+     * HTML boolean boolean attribute: no-paint
+     */
+    @attr({ attribute: "no-paint", mode: "boolean" })
+    public noPaint = false;
+    private noPaintChanged() {
+        if (!this.noPaint && this.backgroundColor !== void 0) {
+            this.$fastController.addStyles(backgroundStyles);
+        } else {
+            this.$fastController.removeStyles(backgroundStyles);
+        }
+    }
+
     /**
      * Define design system property attributes
      */
@@ -35,6 +68,11 @@ export class FASTDesignSystemProvider extends DesignSystemProvider
         default: DesignSystemDefaults.backgroundColor,
     })
     public backgroundColor: string;
+    private backgroundColorChanged() {
+        // If background changes or is removed, we need to
+        // re-evaluate whether we should have paint styles applied
+        this.noPaintChanged();
+    }
 
     @designSystemProperty({
         attribute: "accent-base-color",

packages/web-components/fast-components-msft/temp/api-report.md

@@ -156,6 +156,7 @@ export class FASTDesignSystemProvider extends DesignSystemProvider implements Om
     neutralOutlineRestDelta: number;
     // (undocumented)
     neutralPalette: string[];
+    noPaint: boolean;
     // (undocumented)
     outlineWidth: number;
     // (undocumented)

packages/web-components/fast-components/.storybook/preview-head.html

@@ -1,9 +1,16 @@
 <style>
-    body {
-        background-color: #181818;
+    html,
+    body,
+    #root {
+        margin: 0;
+        display: flex;
+        flex-direction: column;
+        height: 100%;
     }
-
-    h1, h2, h3, h4, h5, h6 {
-        color: #FFF;
+
+    fast-design-system-provider {
+        flex-grow: 1;
+        overflow: auto;
+        padding: calc(var(--design-unit) * 2px);
     }
 </style>

packages/web-components/fast-components/.storybook/theme.js

@@ -1,9 +1,5 @@
 import { create } from "@storybook/theming/create";
 
 export default create({
-    base: "dark",
-    colorPrimary: "#DA1A5F",
-    appContentBg: "#181818",
-    textColor: "#FFF",
     brandTitle: "FAST components storybook",
 });