feat: track accentBaseColor in the design system (#1878)

* Added accentBaseColor to the design system for future color updates
* Set accentBaseColor setting in Explorer and Color explorer apps

Author: bheston

packages/fast-color-explorer/app/design-system.ts

@@ -2,11 +2,7 @@ import {
     DesignSystem,
     DesignSystemDefaults,
 } from "@microsoft/fast-components-styles-msft";
-import {
-    accentPaletteConfig,
-    createColorPalette,
-    neutralPaletteConfig,
-} from "@microsoft/fast-components-styles-msft";
+import { createColorPalette } from "@microsoft/fast-components-styles-msft";
 import { ColorRGBA64, parseColorHexRGB } from "@microsoft/fast-colors";
 import { AccentColors } from "./colors";
 
@@ -19,5 +15,6 @@ export const colorsDesignSystem: ColorsDesignSystem = Object.assign(
         accentPalette: createColorPalette(parseColorHexRGB(
             AccentColors.blue
         ) as ColorRGBA64),
+        accentBaseColor: AccentColors.blue,
     }
 );

packages/fast-color-explorer/app/state.ts

@@ -45,6 +45,9 @@ function setPalette(
             ...state.designSystem,
             [palette]: createColorPalette(value),
         };
+        if (palette === "accentPalette") {
+            designSystem.accentBaseColor = value.toStringHexRGB();
+        }
 
         return {
             ...state,

packages/fast-components-react-msft/app/app.tsx

@@ -11,6 +11,7 @@ import Site, {
     Theme,
 } from "@microsoft/fast-development-site-react";
 import {
+    createColorPalette,
     DensityOffset,
     DesignSystem,
     DesignSystemDefaults,
@@ -120,10 +121,9 @@ export default class App extends React.Component<{}, AppState> {
         this.state = {
             accentColor: accent,
             designSystem: Object.assign({}, DesignSystemDefaults, {
-                accentPalette: this.createColorPalette(parseColor(accent)),
-                neutralPalette: this.createColorPalette(
-                    new ColorRGBA64(0.5, 0.5, 0.5, 1)
-                ),
+                accentPalette: createColorPalette(parseColor(accent)),
+                accentBaseColor: accent,
+                neutralPalette: createColorPalette(new ColorRGBA64(0.5, 0.5, 0.5, 1)),
                 direction: Direction.ltr,
             }),
             backgroundColor: DesignSystemDefaults.backgroundColor,
@@ -222,7 +222,7 @@ export default class App extends React.Component<{}, AppState> {
             s: hslColor.s,
             l: 0.5,
         });
-        return this.createColorPalette(hslToRGB(augmentedHSLColor));
+        return createColorPalette(hslToRGB(augmentedHSLColor));
     }
 
     private handleUpdateTheme = (theme: ThemeName): void => {
@@ -273,22 +273,14 @@ export default class App extends React.Component<{}, AppState> {
 
         if (config.accentColor !== this.state.accentColor) {
             updates.designSystem = Object.assign({}, this.state.designSystem, {
-                accentPalette: this.createColorPalette(parseColor(config.accentColor)),
+                accentPalette: createColorPalette(parseColor(config.accentColor)),
+                accentBaseColor: config.accentColor,
             });
         }
 
         this.setState(updates as AppState);
     };
 
-    private createColorPalette(baseColor: ColorRGBA64): string[] {
-        return new ColorPalette({
-            baseColor,
-            steps: 63,
-            clipLight: 0,
-            clipDark: 0,
-        }).palette.map((color: ColorRGBA64): string => color.toStringHexRGB());
-    }
-
     private handleDensityUpdate = (e: React.ChangeEvent<HTMLInputElement>): void => {
         this.setState({
             designSystem: Object.assign({}, this.state.designSystem, {

packages/fast-components-styles-msft/src/design-system/index.ts

@@ -16,6 +16,11 @@ export interface DesignSystem {
      */
     backgroundColor: string;
 
+    /**
+     * The accent color, which the accentPalette is based on
+     */
+    accentBaseColor: string;
+
     /**
      * Configuration object to derive the neutral palette. Expects a ColorPaletteConfig from @microsoft/fast-colors
      */
@@ -169,6 +174,7 @@ const designSystemDefaults: DesignSystem = {
     outlineWidth: 1,
     neutralPalette: createColorPalette(new ColorRGBA64(0.5, 0.5, 0.5, 1)),
     accentPalette: createColorPalette(parseColorHexRGB("#0078D4")),
+    accentBaseColor: "#0078D4",
 
     /**
      * Recipe Deltas

packages/fast-components-styles-msft/src/utilities/color/accent-fill.ts

@@ -1,11 +1,12 @@
 import { DesignSystem, DesignSystemResolver } from "../../design-system";
 import {
+    accentBaseColor,
     accentFillActiveDelta,
     accentFillHoverDelta,
     accentFillRestDelta,
     accentFillSelectedDelta,
 } from "../design-system";
-import { accentSwatch, findAccessibleAccentSwatchIndexes } from "./accent";
+import { findAccessibleAccentSwatchIndexes } from "./accent";
 import { accentForegroundCut } from "./accent-foreground-cut";
 import {
     colorRecipeFactory,
@@ -21,7 +22,7 @@ import { getSwatch, isDarkMode, Palette, palette, PaletteType } from "./palette"
 function accentFillAlgorithm(contrast: number): DesignSystemResolver<FillSwatchFamily> {
     return (designSystem: DesignSystem): FillSwatchFamily => {
         const accentPalette: Palette = palette(PaletteType.accent)(designSystem);
-        const accent: Swatch = accentSwatch(designSystem);
+        const accent: Swatch = accentBaseColor(designSystem);
         const textColor: Swatch = accentForegroundCut(
             Object.assign({}, designSystem, {
                 backgroundColor: accent,

packages/fast-components-styles-msft/src/utilities/color/accent-foreground-cut.ts

@@ -1,14 +1,7 @@
 import { black, white } from "./color-constants";
 import { DesignSystem } from "../../design-system";
-import { accentSwatch } from "./accent";
-import {
-    ColorRecipe,
-    colorRecipeFactory,
-    contrast,
-    Swatch,
-    SwatchRecipe,
-    SwatchResolver,
-} from "./common";
+import { contrast, Swatch, SwatchRecipe, SwatchResolver } from "./common";
+import { accentBaseColor } from "../design-system";
 
 /**
  * Function to derive accentForegroundCut from an input background and target contrast ratio
@@ -33,7 +26,7 @@ function accentForegroundCutFactory(targetContrast: number): SwatchRecipe {
             ? (designSystem: DesignSystem): Swatch => {
                   return accentForegroundCutAlgorithm(arg(designSystem), targetContrast);
               }
-            : accentForegroundCutAlgorithm(accentSwatch(arg), targetContrast);
+            : accentForegroundCutAlgorithm(accentBaseColor(arg), targetContrast);
     }
 
     return accentForegroundCutInternal;

packages/fast-components-styles-msft/src/utilities/color/accent.spec.ts

@@ -1,20 +1,9 @@
 import { DesignSystem } from "../../design-system";
 import { Palette, palette, PaletteType } from "./palette";
-import { accent } from "./color-constants";
 import { findClosestSwatchIndex, isDarkMode } from "./palette";
 import { contrast, Swatch, SwatchResolver } from "./common";
 import { clamp, inRange } from "lodash-es";
-
-/**
- * Returns a swatch from the middle of the accent palette
- */
-export const accentSwatch: SwatchResolver = (designSystem: DesignSystem): Swatch => {
-    const accentPalette: Palette | null = palette(PaletteType.accent)(designSystem);
-
-    return accentPalette === null
-        ? accent
-        : accentPalette[Math.floor(accentPalette.length / 2)];
-};
+import { accentBaseColor } from "../design-system";
 
 /**
  * Returns indexes for accent UI states that are accessible against an input reference color.
@@ -33,7 +22,7 @@ export function findAccessibleAccentSwatchIndexes(
     hover: number;
     active: number;
 } {
-    const accentColor: Swatch = accentSwatch(designSystem);
+    const accentColor: Swatch = accentBaseColor(designSystem);
     const accentPalette: Palette = palette(PaletteType.accent)(designSystem);
     const darkTheme: boolean = isDarkMode(designSystem);
     const stateDirection: 1 | -1 = darkTheme ? 1 : -1;

packages/fast-components-styles-msft/src/utilities/color/accent.ts

@@ -2,7 +2,6 @@ import { ColorPaletteConfig, parseColorHexRGB } from "@microsoft/fast-colors";
 
 export const white: string = "#FFFFFF";
 export const black: string = "#000000";
-export const accent: string = "#0078D4";
 
 export const paletteConstants: Partial<ColorPaletteConfig> = {
     steps: 63,
@@ -19,5 +18,5 @@ export const neutralPaletteConfig: ColorPaletteConfig = {
 
 export const accentPaletteConfig: ColorPaletteConfig = {
     ...paletteConstants,
-    baseColor: parseColorHexRGB(accent),
+    baseColor: parseColorHexRGB("#0078D4"),
 };

packages/fast-components-styles-msft/src/utilities/color/color-constants.ts

@@ -9,10 +9,8 @@ import {
     swatchByMode,
 } from "./palette";
 import designSystemDefaults, { DesignSystem } from "../../design-system";
-import { accent } from "./color-constants";
 import { Swatch } from "./common";
-import { neutralForeground } from "./neutral-foreground";
-import { neutralPalette } from "../design-system";
+import { accentBaseColor, neutralPalette } from "../design-system";
 
 describe("palette", (): void => {
     test("should return a function", (): void => {
@@ -59,6 +57,8 @@ describe("palette", (): void => {
 });
 
 describe("findSwatchIndex", (): void => {
+    const accent: string = accentBaseColor(designSystemDefaults);
+
     test("should impelment design-system defaults", (): void => {
         expect(findSwatchIndex(PaletteType.neutral, "#FFF")({} as DesignSystem)).toBe(0);
         expect(findSwatchIndex(PaletteType.accent, accent)({} as DesignSystem)).toBe(31);