(web-components) Added attribute to allow easy update to the neutral …

…palette (microsoft#18910)

* Added attribute to allow easy update to the neutral palette

* Change files

change/@fluentui-web-components-8a9cc6d7-2c34-4d9f-b857-879152c51e5c.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "Added attribute to allow easy update to the neutral palette",
+  "packageName": "@fluentui/web-components",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

packages/web-components/docs/api-report.md

@@ -318,6 +318,7 @@ export class DesignSystemProvider extends FoundationElement {
     disabledOpacity: number;
     fillColor: Swatch;
     focusStrokeWidth: number;
+    neutralBaseColor: Swatch;
     neutralFillActiveDelta: number;
     neutralFillFocusDelta: number;
     neutralFillHoverDelta: number;

packages/web-components/src/design-system-provider/index.ts

@@ -16,7 +16,7 @@ import {
   FoundationElement,
 } from '@microsoft/fast-foundation';
 import { Direction, SystemColors } from '@microsoft/fast-web-utilities';
-import { Palette } from '../color/palette';
+import { Palette, PaletteRGB } from '../color/palette';
 import { Swatch, SwatchRGB } from '../color/swatch';
 import {
   accentFillActiveDelta,
@@ -184,6 +184,28 @@ export class DesignSystemProvider extends FoundationElement {
   @designToken(fillColor)
   public fillColor: Swatch;
 
+  /**
+   * A convenience to recreate the neutralPalette
+   * @remarks
+   * HTML attribute: neutral-base-color
+   */
+  @attr({
+    attribute: 'neutral-base-color',
+    converter: swatchConverter,
+  })
+  public neutralBaseColor: Swatch;
+
+  /**
+   * @internal
+   */
+  private neutralBaseColorChanged(prev: Swatch, next: Swatch): void {
+    if (next !== undefined && next !== null) {
+      neutralPalette.setValueFor(this, PaletteRGB.create(next as SwatchRGB));
+    } else {
+      neutralPalette.deleteValueFor(this);
+    }
+  }
+
   /**
    * Defines the palette that all neutral color recipes are derived from.
    * This is an array for hexadecimal color strings ordered from light to dark.