From 3d08290cc1852c60751ed8f28a4ebea56fb92af9 Mon Sep 17 00:00:00 2001
From: Chris Holt <chhol@microsoft.com>
Date: Tue, 13 Jul 2021 14:27:03 -0700
Subject: [PATCH] [web-components] add attr for changing accent base color on
 design system provider (#18922)

* add attribute to recreate the accentPalette via DSP

* Change files
---
 ...-876829c2-6a54-4777-9c1f-a007225a458a.json |  7 ++++++
 packages/web-components/docs/api-report.md    |  1 +
 .../src/design-system-provider/index.ts       | 22 +++++++++++++++++++
 3 files changed, 30 insertions(+)
 create mode 100644 change/@fluentui-web-components-876829c2-6a54-4777-9c1f-a007225a458a.json

diff --git a/change/@fluentui-web-components-876829c2-6a54-4777-9c1f-a007225a458a.json b/change/@fluentui-web-components-876829c2-6a54-4777-9c1f-a007225a458a.json
new file mode 100644
index 0000000000000..240256654f36f
--- /dev/null
+++ b/change/@fluentui-web-components-876829c2-6a54-4777-9c1f-a007225a458a.json
@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "add attribute to recreate the accent palette using design system provider",
+  "packageName": "@fluentui/web-components",
+  "email": "chhol@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/web-components/docs/api-report.md b/packages/web-components/docs/api-report.md
index fa5ec533022db..d7d2ec099f59b 100644
--- a/packages/web-components/docs/api-report.md
+++ b/packages/web-components/docs/api-report.md
@@ -306,6 +306,7 @@ export const density: CSSDesignToken<number>;
 // @public
 export class DesignSystemProvider extends FoundationElement {
     constructor();
+    accentBaseColor: Swatch;
     accentFillActiveDelta: number;
     accentFillFocusDelta: number;
     accentFillHoverDelta: number;
diff --git a/packages/web-components/src/design-system-provider/index.ts b/packages/web-components/src/design-system-provider/index.ts
index 04a8d93c62a72..e903589e07a4b 100644
--- a/packages/web-components/src/design-system-provider/index.ts
+++ b/packages/web-components/src/design-system-provider/index.ts
@@ -184,6 +184,28 @@ export class DesignSystemProvider extends FoundationElement {
   @designToken(fillColor)
   public fillColor: Swatch;
 
+  /**
+   * A convenience to recreate the accentPalette
+   * @remarks
+   * HTML attribute: accent-base-color
+   */
+  @attr({
+    attribute: 'accent-base-color',
+    converter: swatchConverter,
+  })
+  public accentBaseColor: Swatch;
+
+  /**
+   * @internal
+   */
+  private accentBaseColorChanged(prev: Swatch, next: Swatch): void {
+    if (next !== undefined && next !== null) {
+      accentPalette.setValueFor(this, PaletteRGB.create(next as SwatchRGB));
+    } else {
+      accentPalette.deleteValueFor(this);
+    }
+  }
+
   /**
    * A convenience to recreate the neutralPalette
    * @remarks