From 82d4558d358448584949314d32a9fb26e4d78c86 Mon Sep 17 00:00:00 2001
From: Jeff Smith <37851214+eljefe223@users.noreply.github.com>
Date: Thu, 17 Sep 2020 15:47:31 -0700
Subject: [PATCH] fix: design system property inheritance (#15106)

* fix: design system property inheritance

* point to design system provider file

Co-authored-by: Chris Holt <chhol@microsoft.com>
---
 ...ponents-2020-09-17-15-15-13-users-jes-card-fix.json |  8 ++++++++
 packages/web-components/src/card/index.ts              | 10 +++++-----
 .../web-components/src/design-system-provider/index.ts |  2 +-
 3 files changed, 14 insertions(+), 6 deletions(-)
 create mode 100644 change/@fluentui-web-components-2020-09-17-15-15-13-users-jes-card-fix.json

diff --git a/change/@fluentui-web-components-2020-09-17-15-15-13-users-jes-card-fix.json b/change/@fluentui-web-components-2020-09-17-15-15-13-users-jes-card-fix.json
new file mode 100644
index 00000000000000..fd6da345b68b6f
--- /dev/null
+++ b/change/@fluentui-web-components-2020-09-17-15-15-13-users-jes-card-fix.json
@@ -0,0 +1,8 @@
+{
+  "type": "minor",
+  "comment": "fix design system properties inheritance",
+  "packageName": "@fluentui/web-components",
+  "email": "jes@microsoft.com",
+  "dependentChangeType": "patch",
+  "date": "2020-09-17T22:15:13.616Z"
+}
diff --git a/packages/web-components/src/card/index.ts b/packages/web-components/src/card/index.ts
index 78a92719ddf226..80fe1c18524c2e 100644
--- a/packages/web-components/src/card/index.ts
+++ b/packages/web-components/src/card/index.ts
@@ -1,7 +1,7 @@
-import { customElement } from '@microsoft/fast-element';
 import { ColorRGBA64, parseColorHexRGB } from '@microsoft/fast-colors';
-import { designSystemProperty, DesignSystemProvider, CardTemplate as template } from '@microsoft/fast-foundation';
+import { designSystemProperty, designSystemProvider, CardTemplate as template } from '@microsoft/fast-foundation';
 import { createColorPalette, DesignSystem } from '@microsoft/fast-components-styles-msft';
+import { FluentDesignSystemProvider } from '../design-system-provider';
 import { CardStyles as styles } from './card.styles';
 
 /**
@@ -13,12 +13,12 @@ import { CardStyles as styles } from './card.styles';
  * @remarks
  * HTML Element: \<fluent-card\>
  */
-@customElement({
+@designSystemProvider({
   name: 'fluent-card',
   template,
   styles,
 })
-export class FluentCard extends DesignSystemProvider
+export class FluentCard extends FluentDesignSystemProvider
   implements Pick<DesignSystem, 'backgroundColor' | 'neutralPalette'> {
   /**
    * Background color for the banner component. Sets context for the design system.
@@ -31,7 +31,7 @@ export class FluentCard extends DesignSystemProvider
     default: '#FFFFFF',
   })
   public backgroundColor: string;
-  private backgroundColorChanged(): void {
+  protected backgroundColorChanged(): void {
     const parsedColor = parseColorHexRGB(this.backgroundColor);
     this.neutralPalette = createColorPalette(parsedColor as ColorRGBA64);
   }
diff --git a/packages/web-components/src/design-system-provider/index.ts b/packages/web-components/src/design-system-provider/index.ts
index a5636f5cc95319..abb0e65494f469 100644
--- a/packages/web-components/src/design-system-provider/index.ts
+++ b/packages/web-components/src/design-system-provider/index.ts
@@ -71,7 +71,7 @@ export class FluentDesignSystemProvider extends DesignSystemProvider
     default: DesignSystemDefaults.backgroundColor,
   })
   public backgroundColor: string;
-  private backgroundColorChanged() {
+  protected backgroundColorChanged(): void {
     // If background changes or is removed, we need to
     // re-evaluate whether we should have paint styles applied
     this.noPaintChanged();