[web-components] add attr for changing accent base color on design sy…

…stem provider (#18922) * add attribute to recreate the accentPalette via DSP * Change files
microsoft · Jul 13, 2021 · 3d08290 · 3d08290
1 parent a84e635
commit 3d08290
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 0 deletions.
diff --git a/change/@fluentui-web-components-876829c2-6a54-4777-9c1f-a007225a458a.json 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": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git 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
@@ -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