Merge branch 'master' into users/nirice/submit-button-submission-fix

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

packages/web-components/fast-components/src/slider/slider.stories.ts

@@ -9,15 +9,11 @@ FASTSlider;
 FASTDesignSystemProvider;
 
 addons.getChannel().addListener(STORY_RENDERED, (name: string) => {
-    if (name.toLowerCase().startsWith("slider")) {
-        const slider1: HTMLElement | null = document.getElementById("switcher");
-        (slider1 as FASTSlider).valueTextFormatter = valueTextFormatter;
-
-        const slider2: HTMLElement | null = document.getElementById("switcher2");
-        (slider2 as FASTSlider).valueTextFormatter = valueTextFormatter;
-
-        const slider3: HTMLElement | null = document.getElementById("slider1");
-        (slider3 as FASTSlider).valueTextFormatter = valueTextFormatter;
+    if (name.toLowerCase().endsWith("slider")) {
+        ["switcher", "switcher2", "slider1"].forEach(x => {
+            const slider = document.getElementById(x);
+            slider && ((slider as FASTSlider).valueTextFormatter = valueTextFormatter);
+        });
     }
 });
 

packages/web-components/fast-components/src/text-field/text-field.styles.ts

@@ -74,8 +74,8 @@ export const TextFieldStyles = css`
         visibility: hidden;
     }
 
-    .before-content,
-    .after-content {
+    .start,
+    .end {
         ${
             /* Glyph size and margin-left is temporary - 
             replace when adaptive typography is figured out */ ""
@@ -85,11 +85,11 @@ export const TextFieldStyles = css`
         fill: ${neutralForegroundRestBehavior.var};
     }
 
-    .before-content {
+    .start {
         margin-inline-start: 11px;
     }
 
-    .after-content {
+    .end {
         margin-inline-end: 11px;
     }
 
@@ -155,8 +155,8 @@ export const TextFieldStyles = css`
                 background: ${SystemColors.Field};
                 border-color: ${SystemColors.Highlight};
             }
-            .before-content,
-            .after-content {
+            .start,
+            .end {
                 fill: ${SystemColors.ButtonText};
             }
             :host(.disabled) {

sites/fast-website/src/app/components/fast-frame/fast-frame.template.ts

@@ -1,4 +1,3 @@
-import { StandardLuminance } from "@microsoft/fast-components-styles-msft";
 import { html, repeat } from "@microsoft/fast-element";
 import ContextIcon from "svg/icon-context.svg";
 import ContrastIcon from "svg/icon-contrast.svg";
@@ -30,7 +29,7 @@ export const FastFrameTemplate = html<FastFrame>`
                                 id="dark-mode-switch"
                                 :checked="${x => x.darkMode}"
                                 @change="${(x, c) =>
-                                    x.themeChange(c.event as CustomEvent)}"
+                                    x.modeChange(c.event as CustomEvent)}"
                             >
                                 <span slot="checked-message">On</span>
                                 <span slot="unchecked-message">Off</span>
@@ -47,25 +46,24 @@ export const FastFrameTemplate = html<FastFrame>`
                             Color is applied by using color recipes which require two color palettes, neutral and accent, applied to the design system. These palettes are customizable which allows for a wide range of styles.
                         </p>
                         <div class="content-control-container" >
-                            <label for="background-color-pickers">Background color</label>
+                            <label for="neutral-color-pickers">Neutral color</label>
                             <fast-radio-group
-                                name="background-color-pickers"
-                                value="${x => x.previewBackgroundPalette[0]}"
+                                name="neutral-color-pickers"
+                                value="${x => x.previewNeutralPalette[0]}"
                                 @change="${(x, c) =>
-                                    x.backgroundChangeHandler(c.event as CustomEvent)}"
+                                    x.neutralChangeHandler(c.event as CustomEvent)}"
                             >
                                 ${repeat(
-                                    x => x.previewBackgroundPalette,
+                                    x => x.previewNeutralPalette,
 
                                     html<string>`
                                         <site-color-swatch
                                             tabindex="0"
-                                            aria-label="background color ${x => x}"
+                                            aria-label="neutral color ${x => x}"
                                             value="${x => x}"
                                             background-color="${x => x}"
                                             checked="${(x, c) =>
-                                                x ===
-                                                c.parent.previewBackgroundPalette[0]}"
+                                                x === c.parent.previewNeutralPalette[0]}"
                                         ></site-color-swatch>
                                     `
                                 )}
@@ -207,17 +205,16 @@ export const FastFrameTemplate = html<FastFrame>`
             </fast-tabs>
             <fast-design-system-provider
                 class="${x => (x.expanded ? "preview preview-expanded" : "preview")}"
-                base-layer-luminance="${x =>
-                    x.darkMode
-                        ? StandardLuminance.DarkMode
-                        : StandardLuminance.LightMode}"
+                base-layer-luminance="${x => x.baseLayerLuminance}"
                 background-color="${x => x.backgroundColor}"
                 accent-base-color="${x => x.accentColor}"
                 density="${x => x.density}"
                 corner-radius="${x => x.borderRadius}"
                 outline-width="${x => x.outlineWidth}"
                 :accentPalette=${x =>
                     Array.isArray(x.accentPalette) ? x.accentPalette : null}
+                :neutralPalette=${x =>
+                    Array.isArray(x.neutralPalette) ? x.neutralPalette : null}
             >
                 <fast-design-system-provider
                     density="0"

sites/fast-website/src/app/components/fast-frame/fast-frame.ts

@@ -1,5 +1,12 @@
 import { FASTElement, attr, observable } from "@microsoft/fast-element";
-import { createColorPalette, FASTSlider } from "@microsoft/fast-components";
+import {
+    createColorPalette,
+    FASTSlider,
+    FASTDesignSystem,
+    fastDesignSystemDefaults,
+    StandardLuminance,
+    neutralLayerCardContainer,
+} from "@microsoft/fast-components";
 import {
     ColorHSL,
     ColorRGBA64,
@@ -16,18 +23,21 @@ export class FastFrame extends FASTElement {
     public accentColor: string = "#F33378";
 
     @attr({ attribute: "background-color" })
-    public backgroundColor: string = "#212121";
+    public backgroundColor: string;
 
     @attr
     public darkMode: boolean = true;
 
+    @attr
+    public baseLayerLuminance: number = StandardLuminance.DarkMode;
+
     @observable
-    public previewBackgroundPalette: string[] = [
-        "#212121",
-        "#2B2B2B",
-        "#333333",
-        "#3B3B3B",
-        "#424242",
+    public previewNeutralPalette: string[] = [
+        "#808080",
+        "#35719F",
+        "#2D5F2D",
+        "#5D437C",
+        "#A35436",
     ];
 
     @observable
@@ -39,12 +49,10 @@ export class FastFrame extends FASTElement {
         "#E1A054",
     ];
 
-    private darkPallette: string[] = this.previewBackgroundPalette;
-
     private mql: MediaQueryList = window.matchMedia(`(max-width: ${drawerBreakpoint})`);
 
     @observable
-    public lastSelectedIndex: number = 0;
+    public neutralPalette: string[];
 
     @observable
     public accentPalette: string[];
@@ -87,13 +95,12 @@ export class FastFrame extends FASTElement {
         }
     };
 
-    public backgroundChangeHandler = (e: CustomEvent): void => {
+    public neutralChangeHandler = (e: CustomEvent): void => {
         if (e.target instanceof SiteColorSwatch) {
             if (e.target.checked) {
-                this.backgroundColor = e.target.value;
-                this.lastSelectedIndex = Array.from(
-                    this.previewBackgroundPalette
-                ).indexOf(e.target.value);
+                const parsedColor = parseColorHexRGB(e.target.value);
+                this.neutralPalette = createColorPalette(parsedColor as ColorRGBA64);
+                this.updateBackgroundColor();
             }
         }
     };
@@ -141,20 +148,25 @@ export class FastFrame extends FASTElement {
         this.accentPalette = createColorPalette(accentRGB);
     }
 
-    public themeChange = (e: CustomEvent): void => {
+    private updateBackgroundColor(): void {
+        const designSystem: FASTDesignSystem = Object.assign(
+            {},
+            fastDesignSystemDefaults,
+            {
+                baseLayerLuminance: this.baseLayerLuminance,
+                neutralPalette: this.neutralPalette,
+            }
+        );
+
+        this.backgroundColor = neutralLayerCardContainer(designSystem);
+    }
+
+    public modeChange = (e: CustomEvent): void => {
         this.darkMode = !this.darkMode;
-        if (!this.darkMode) {
-            this.previewBackgroundPalette = [
-                "#FFFFFF",
-                "#F0F0F0",
-                "#DEDEDE",
-                "#D6D6D6",
-                "#C4C4C4",
-            ];
-        } else {
-            this.previewBackgroundPalette = this.darkPallette;
-        }
-        this.backgroundColor = this.previewBackgroundPalette[this.lastSelectedIndex];
+        this.baseLayerLuminance = this.darkMode
+            ? StandardLuminance.DarkMode
+            : StandardLuminance.LightMode;
+        this.updateBackgroundColor();
     };
 
     private resetExpandedResponsive = (e): void => {
@@ -174,4 +186,13 @@ export class FastFrame extends FASTElement {
 
         this.mql.addListener(this.resetExpandedResponsive);
     }
+
+    /**
+     * @internal
+     */
+    public connectedCallback() {
+        super.connectedCallback();
+
+        this.updateBackgroundColor();
+    }
 }

sites/website/src/prepare-docs.js

@@ -34,7 +34,6 @@ const packages = [
     "fast-element",
     "fast-foundation",
     "fast-components",
-    "fast-components-msft",
 ];
 
 function identifyPackage(path) {