diff --git a/packages/web-components/fast-components-msft/.storybook/preview-head.html b/packages/web-components/fast-components-msft/.storybook/preview-head.html new file mode 100644 index 00000000000..2c815a0111d --- /dev/null +++ b/packages/web-components/fast-components-msft/.storybook/preview-head.html @@ -0,0 +1,16 @@ + \ No newline at end of file diff --git a/packages/web-components/fast-components-msft/.storybook/theme.js b/packages/web-components/fast-components-msft/.storybook/theme.js new file mode 100644 index 00000000000..2b52860f91e --- /dev/null +++ b/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", +}); diff --git a/packages/web-components/fast-components-msft/docs/api-report.md b/packages/web-components/fast-components-msft/docs/api-report.md index e8bcfe4cf5c..616df1f4512 100644 --- a/packages/web-components/fast-components-msft/docs/api-report.md +++ b/packages/web-components/fast-components-msft/docs/api-report.md @@ -161,6 +161,7 @@ export class FASTDesignSystemProvider extends DesignSystemProvider implements Om neutralOutlineRestDelta: number; // (undocumented) neutralPalette: string[]; + noPaint: boolean; // (undocumented) outlineWidth: number; // (undocumented) diff --git a/packages/web-components/fast-components-msft/src/design-system-provider/index.ts b/packages/web-components/fast-components-msft/src/design-system-provider/index.ts index 9e4300eb7e8..2e6b48252d4 100644 --- a/packages/web-components/fast-components-msft/src/design-system-provider/index.ts +++ b/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", diff --git a/packages/web-components/fast-components-msft/temp/api-report.md b/packages/web-components/fast-components-msft/temp/api-report.md index e8bcfe4cf5c..616df1f4512 100644 --- a/packages/web-components/fast-components-msft/temp/api-report.md +++ b/packages/web-components/fast-components-msft/temp/api-report.md @@ -161,6 +161,7 @@ export class FASTDesignSystemProvider extends DesignSystemProvider implements Om neutralOutlineRestDelta: number; // (undocumented) neutralPalette: string[]; + noPaint: boolean; // (undocumented) outlineWidth: number; // (undocumented) diff --git a/packages/web-components/fast-components/.storybook/preview-head.html b/packages/web-components/fast-components/.storybook/preview-head.html index 18c9bbc795f..2c815a0111d 100644 --- a/packages/web-components/fast-components/.storybook/preview-head.html +++ b/packages/web-components/fast-components/.storybook/preview-head.html @@ -1,9 +1,16 @@ \ No newline at end of file diff --git a/packages/web-components/fast-components/.storybook/theme.js b/packages/web-components/fast-components/.storybook/theme.js index 022dd16c95b..bc2e03feea9 100644 --- a/packages/web-components/fast-components/.storybook/theme.js +++ b/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", }); diff --git a/packages/web-components/fast-components/docs/api-report.md b/packages/web-components/fast-components/docs/api-report.md index 50d03fb599d..42a8e2707e2 100644 --- a/packages/web-components/fast-components/docs/api-report.md +++ b/packages/web-components/fast-components/docs/api-report.md @@ -316,6 +316,7 @@ export class FASTDesignSystemProvider extends DesignSystemProvider implements FA // (undocumented) neutralOutlineRestDelta: number; neutralPalette: string[]; + noPaint: boolean; // (undocumented) outlineWidth: number; // (undocumented) diff --git a/packages/web-components/fast-components/src/design-system-provider/index.ts b/packages/web-components/fast-components/src/design-system-provider/index.ts index bc4b87adf0d..26d94799a9a 100644 --- a/packages/web-components/fast-components/src/design-system-provider/index.ts +++ b/packages/web-components/fast-components/src/design-system-provider/index.ts @@ -1,13 +1,28 @@ -import { nullableNumberConverter } from "@microsoft/fast-element"; +import { attr, css, nullableNumberConverter } from "@microsoft/fast-element"; import { + CSSCustomPropertyBehavior, designSystemProperty, - designSystemProvider, DesignSystemProvider, + designSystemProvider, DesignSystemProviderTemplate as template, } from "@microsoft/fast-foundation"; import { FASTDesignSystem, fastDesignSystemDefaults } from "../fast-design-system"; +import { neutralForegroundRest } from "../color"; 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, @@ -15,6 +30,24 @@ import { DesignSystemProviderStyles as styles } from "./design-system-provider.s }) export class FASTDesignSystemProvider extends DesignSystemProvider implements FASTDesignSystem { + /** + * 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 */ @@ -23,6 +56,11 @@ export class FASTDesignSystemProvider extends DesignSystemProvider default: fastDesignSystemDefaults.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(); + } /** * This color is intended to be the *source color* of the FASTDesignSystem.accentPalette. diff --git a/packages/web-components/fast-components/temp/api-report.md b/packages/web-components/fast-components/temp/api-report.md index 50d03fb599d..42a8e2707e2 100644 --- a/packages/web-components/fast-components/temp/api-report.md +++ b/packages/web-components/fast-components/temp/api-report.md @@ -316,6 +316,7 @@ export class FASTDesignSystemProvider extends DesignSystemProvider implements FA // (undocumented) neutralOutlineRestDelta: number; neutralPalette: string[]; + noPaint: boolean; // (undocumented) outlineWidth: number; // (undocumented) diff --git a/packages/web-components/fast-foundation/docs/api-report.md b/packages/web-components/fast-foundation/docs/api-report.md index 9ca40bab470..7a8cdb5d63e 100644 --- a/packages/web-components/fast-foundation/docs/api-report.md +++ b/packages/web-components/fast-foundation/docs/api-report.md @@ -197,13 +197,13 @@ export class CSSCustomPropertyBehavior implements Behavior, CSSCustomPropertyDef constructor( name: string, value: CSSCustomPropertyDefinition["value"], - host: (source: typeof FASTElement & HTMLElement) => Partial | null); + host: (source: HTMLElement) => Partial | null); // @internal - bind(source: typeof FASTElement & HTMLElement): void; + bind(source: HTMLElement): void; readonly name: CSSCustomPropertyDefinition["name"]; readonly propertyName: string; // @internal - unbind(source: typeof FASTElement & HTMLElement): void; + unbind(source: HTMLElement): void; readonly value: CSSCustomPropertyDefinition["value"]; readonly var: string; } diff --git a/packages/web-components/fast-foundation/docs/guide/aspnet.doc.md b/packages/web-components/fast-foundation/docs/guide/aspnet.doc.md index 49e9d78329b..73a1b619db9 100644 --- a/packages/web-components/fast-foundation/docs/guide/aspnet.doc.md +++ b/packages/web-components/fast-foundation/docs/guide/aspnet.doc.md @@ -100,7 +100,6 @@ For a splash of style, add the following to your `wwwroot/css/site.css` file: fast-design-system-provider { display: inline-block; - color: var(--neutral-foreground-rest); } fast-card { diff --git a/packages/web-components/fast-foundation/docs/guide/aurelia.doc.md b/packages/web-components/fast-foundation/docs/guide/aurelia.doc.md index 9d3ede053e5..2805c7ad03d 100644 --- a/packages/web-components/fast-foundation/docs/guide/aurelia.doc.md +++ b/packages/web-components/fast-foundation/docs/guide/aurelia.doc.md @@ -77,7 +77,6 @@ To add a splash of style, replace your `my-app.css` content with this: ```css fast-design-system-provider { display: inline-block; - color: var(--neutral-foreground-rest); } fast-card { diff --git a/packages/web-components/fast-foundation/docs/guide/blazor.doc.md b/packages/web-components/fast-foundation/docs/guide/blazor.doc.md index 5b91eda7b48..99d82b78c5a 100644 --- a/packages/web-components/fast-foundation/docs/guide/blazor.doc.md +++ b/packages/web-components/fast-foundation/docs/guide/blazor.doc.md @@ -82,7 +82,6 @@ For a splash of style, add the following to your `wwwroot/css/app.css` file: ```css fast-design-system-provider { display: inline-block; - color: var(--neutral-foreground-rest); } fast-card { diff --git a/packages/web-components/fast-foundation/docs/guide/webpack.doc.md b/packages/web-components/fast-foundation/docs/guide/webpack.doc.md index b564a6eb948..1ab10488122 100644 --- a/packages/web-components/fast-foundation/docs/guide/webpack.doc.md +++ b/packages/web-components/fast-foundation/docs/guide/webpack.doc.md @@ -192,7 +192,6 @@ This code imports the `` component as well as the ` fast-design-system-provider { display: inline-block; - color: var(--neutral-foreground-rest); } fast-card { diff --git a/packages/web-components/fast-foundation/src/custom-properties/behavior.ts b/packages/web-components/fast-foundation/src/custom-properties/behavior.ts index 2e8ee909107..b36cf82370e 100644 --- a/packages/web-components/fast-foundation/src/custom-properties/behavior.ts +++ b/packages/web-components/fast-foundation/src/custom-properties/behavior.ts @@ -70,9 +70,7 @@ export class CSSCustomPropertyBehavior implements Behavior, CSSCustomPropertyDef * This element should also be responsible for resolving * and function value. */ - host: ( - source: typeof FASTElement & HTMLElement - ) => Partial | null + host: (source: HTMLElement) => Partial | null ) { this.name = name; this.value = value; @@ -81,16 +79,14 @@ export class CSSCustomPropertyBehavior implements Behavior, CSSCustomPropertyDef this.var = `var(${this.propertyName})`; } - private host: ( - source: typeof FASTElement & HTMLElement - ) => Partial | null; + private host: (source: HTMLElement) => Partial | null; /** * Binds the behavior to a source element * @param source The source element being bound * @internal */ - bind(source: typeof FASTElement & HTMLElement): void { + bind(source: HTMLElement): void { const target = this.host(source); if (target !== null) { @@ -115,7 +111,7 @@ export class CSSCustomPropertyBehavior implements Behavior, CSSCustomPropertyDef * @param source The source element being unbound * @internal */ - unbind(source: typeof FASTElement & HTMLElement): void { + unbind(source: HTMLElement): void { const target = this.host(source); if (target !== null && typeof target.unregisterCSSCustomProperty === "function") { diff --git a/sites/website/src/docs/fast-foundation/getting-started.md b/sites/website/src/docs/fast-foundation/getting-started.md index 34f36537a08..8f4fa17e21d 100644 --- a/sites/website/src/docs/fast-foundation/getting-started.md +++ b/sites/website/src/docs/fast-foundation/getting-started.md @@ -31,12 +31,10 @@ If you are looking to leverage a tool like Webpack, see our [Webpack Guide](./we The [Design System Provider](fast-foundation/fast-design-system-provider.md) will provide design information to child FAST components. -By default, the background color and text color won't be set by the `fast-design-system-provider` ([but there will be a solution soon](https://github.com/microsoft/fast-dna/issues/3213)), so you'll want to apply the CSS *background-color* and *color* properties. - ```html - + @@ -48,7 +46,7 @@ Add any FAST elements (or any element) as a child of the `fast-design-system-pro ```html - + Hello world