feat: remove deprecated design-system values (#1567)

* remove deprecated design system values

* removing deprecated design-system values and updating dev-site to work with changes

* rename outlinePatternOutlineWidth to outlineWidth

* fix button and input

BREAKING CHANGE: removes/renames design system values

Author: nicholasrice

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

@@ -1,36 +1,27 @@
-import * as examples from "./examples";
 import { ComponentStyles, CSSRules } from "@microsoft/fast-jss-manager";
-import manageJss, { DesignSystemProvider } from "@microsoft/fast-jss-manager-react";
-import {
-    DensityOffset,
-    DesignSystem,
-    DesignSystemDefaults,
-} from "@microsoft/fast-components-styles-msft";
-import { Plugin, PluginProps } from "@microsoft/fast-tooling-react";
-import {
-    HypertextClassNameContract,
-    ManagedClasses,
-} from "@microsoft/fast-components-class-name-contracts-base";
-import { glyphBuildingblocks } from "@microsoft/fast-glyphs-msft";
-import React from "react";
-import { Direction } from "@microsoft/fast-web-utilities";
-import AdditionalPropsPlugin from "./utilities/additional-props.plugin";
 import Site, {
     componentFactory,
     formChildFromExamplesFactory,
     FormChildOption,
     ShellSlot,
     SiteCategory,
     SiteCategoryIcon,
-    SiteCategoryItem,
-    SiteMenu,
-    SiteMenuItem,
-    SiteProps,
     SiteTitle,
     SiteTitleBrand,
     Theme,
 } from "@microsoft/fast-development-site-react";
-import { Hypertext } from "../src/hypertext";
+import {
+    DensityOffset,
+    DesignSystem,
+    DesignSystemDefaults,
+} from "@microsoft/fast-components-styles-msft";
+import { Plugin, PluginProps } from "@microsoft/fast-tooling-react";
+import { HypertextClassNameContract } from "@microsoft/fast-components-class-name-contracts-base";
+import { glyphBuildingblocks } from "@microsoft/fast-glyphs-msft";
+import React from "react";
+import { Direction } from "@microsoft/fast-web-utilities";
+import AdditionalPropsPlugin from "./utilities/additional-props.plugin";
+import * as examples from "./examples";
 import ColorPicker, { ColorConfig } from "./color-picker";
 import reactHTMLElementExamples from "./components/react-html-element-child-option";
 import reactSVGElementExamples from "./components/svg-svg-element-child-option";
@@ -39,7 +30,14 @@ import carouselDarkImageContentExamples from "./components/carousel-dark-image-c
 import carouselLightImageContentExamples from "./components/carousel-light-image-content-child-options";
 import pivotItemContentExamples from "./components/pivot-item-content-child-options";
 import pivotItemTabExamples from "./components/pivot-item-tab-child-options";
-import { Label } from "../src/label";
+import {
+    ColorHSL,
+    ColorPalette,
+    ColorRGBA64,
+    hslToRGB,
+    parseColor,
+    rgbToHSL,
+} from "@microsoft/fast-colors";
 
 /* tslint:disable-next-line */
 const sketchDesignKit = require("./fast-dna-msft-design-kit.sketch");
@@ -54,6 +52,10 @@ const formChildOptions: FormChildOption[] = [
     pivotItemTabExamples,
 ].concat(formChildFromExamplesFactory(examples));
 
+const dark: string = "#111111";
+const light: string = "#FFFFFF";
+const accent: string = "#0078D4";
+
 const formPlugins: Array<Plugin<PluginProps>> = [
     new AdditionalPropsPlugin({
         id: [
@@ -90,6 +92,8 @@ enum ThemeName {
 }
 
 export interface AppState extends ColorConfig {
+    accentPalette: string[];
+    neutralPalette: string[];
     theme: ThemeName;
     direction: Direction;
     density: DensityOffset;
@@ -100,12 +104,12 @@ export default class App extends React.Component<{}, AppState> {
         {
             id: ThemeName.light,
             displayName: ThemeName.light,
-            background: DesignSystemDefaults.backgroundColor,
+            background: light,
         },
         {
             id: ThemeName.dark,
             displayName: ThemeName.dark,
-            background: DesignSystemDefaults.foregroundColor,
+            background: dark,
         },
         { id: ThemeName.custom, displayName: ThemeName.custom },
     ];
@@ -114,10 +118,11 @@ export default class App extends React.Component<{}, AppState> {
         super(props);
 
         this.state = {
+            accentColor: accent,
+            accentPalette: this.createColorPalette(parseColor(accent)),
+            neutralPalette: this.createColorPalette(new ColorRGBA64(0.5, 0.5, 0.5, 1)),
             direction: Direction.ltr,
-            foregroundColor: DesignSystemDefaults.foregroundColor,
             backgroundColor: DesignSystemDefaults.backgroundColor,
-            accentColor: DesignSystemDefaults.brandColor,
             theme: ThemeName.light,
             density: DesignSystemDefaults.density,
         };
@@ -172,7 +177,6 @@ export default class App extends React.Component<{}, AppState> {
                             onChange={this.handleDensityUpdate}
                         />
                         <ColorPicker
-                            foregroundColor={this.state.foregroundColor}
                             backgroundColor={this.state.backgroundColor}
                             accentColor={this.state.accentColor}
                             onColorUpdate={this.handleColorUpdate}
@@ -193,10 +197,10 @@ export default class App extends React.Component<{}, AppState> {
 
     private generateDesignSystem(): DesignSystem {
         const designSystem: Partial<DesignSystem> = {
+            accentPalette: this.state.accentPalette,
+            neutralPalette: this.state.neutralPalette,
             direction: this.state.direction,
-            foregroundColor: this.state.foregroundColor,
             backgroundColor: this.state.backgroundColor,
-            brandColor: this.state.accentColor,
             density: this.state.density,
         };
 
@@ -220,14 +224,7 @@ export default class App extends React.Component<{}, AppState> {
         if (theme !== ThemeName.custom) {
             this.setState({
                 theme,
-                foregroundColor:
-                    theme === ThemeName.dark
-                        ? DesignSystemDefaults.backgroundColor
-                        : DesignSystemDefaults.foregroundColor,
-                backgroundColor:
-                    theme === ThemeName.dark
-                        ? DesignSystemDefaults.foregroundColor
-                        : DesignSystemDefaults.backgroundColor,
+                backgroundColor: theme === ThemeName.dark ? dark : light,
             });
         } else {
             this.setCustomThemeBackground(this.state.backgroundColor);
@@ -244,16 +241,39 @@ export default class App extends React.Component<{}, AppState> {
         this.setCustomThemeBackground(config.backgroundColor);
         const updates: Partial<AppState> = { ...config };
 
-        if (
-            config.backgroundColor !== this.state.backgroundColor ||
-            config.foregroundColor !== this.state.foregroundColor
-        ) {
-            updates.theme = ThemeName.custom;
+        if (config.backgroundColor !== this.state.backgroundColor) {
+            if (this.state.theme !== ThemeName.custom) {
+                updates.theme = ThemeName.custom;
+            }
+
+            const color: ColorRGBA64 = parseColor(config.backgroundColor);
+            const hslColor: ColorHSL = rgbToHSL(color);
+            const augmentedHSLColor: ColorHSL = ColorHSL.fromObject({
+                h: hslColor.h,
+                s: hslColor.s,
+                l: 0.5,
+            });
+            updates.neutralPalette = this.createColorPalette(hslToRGB(augmentedHSLColor));
+        }
+
+        if (config.accentColor !== this.state.accentColor) {
+            updates.accentPalette = this.createColorPalette(
+                parseColor(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({
             density: parseInt(e.target.value, 10) as DensityOffset,

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

@@ -6,7 +6,6 @@ import manageJss, {
 import { DesignSystem } from "@microsoft/fast-components-styles-msft";
 
 export interface ColorConfig {
-    foregroundColor: string;
     backgroundColor: string;
     accentColor: string;
 }
@@ -61,12 +60,6 @@ class ColorPicker extends React.Component<
     public render(): JSX.Element {
         return (
             <div className={this.props.managedClasses.colorPicker}>
-                {this.createColorInput(
-                    "foreground",
-                    this.props.foregroundColor,
-                    "foregroundInput",
-                    this.foregroundRef
-                )}
                 {this.createColorInput(
                     "background",
                     this.props.backgroundColor,
@@ -118,11 +111,9 @@ class ColorPicker extends React.Component<
     private handleColorPickerChange = (e: React.FormEvent<HTMLInputElement>): void => {
         const value: string = e.currentTarget.value;
         const updatedColorKey: keyof ColorConfig =
-            e.currentTarget === this.foregroundRef.current
-                ? "foregroundColor"
-                : e.currentTarget === this.backgroundRef.current
-                    ? "backgroundColor"
-                    : "accentColor";
+            e.currentTarget === this.backgroundRef.current
+                ? "backgroundColor"
+                : "accentColor";
 
         if (typeof this.props.onColorUpdate === "function") {
             this.props.onColorUpdate(

packages/fast-components-react-msft/package.json

@@ -76,6 +76,7 @@
     "@babel/core": "^7.0.0",
     "@babel/preset-env": "^7.1.0",
     "@babel/preset-react": "^7.0.0",
+    "@microsoft/fast-colors": "^3.2.0",
     "@microsoft/fast-components-class-name-contracts-base": "^3.10.0",
     "@microsoft/fast-development-site-react": "^3.4.5",
     "@microsoft/fast-jss-manager": "^3.0.13",
@@ -109,8 +110,8 @@
     "tslint": "^5.9.1",
     "tslint-config-prettier": "^1.15.0",
     "tslint-loader": "^3.6.0",
-    "typescript": "^3.0.1",
     "tv4": "^1.3.0",
+    "typescript": "^3.0.1",
     "utility-types": "^2.1.0",
     "webpack": "^4.1.0",
     "webpack-bundle-analyzer": "^2.13.1",

packages/fast-components-styles-msft/src/button/index.ts

@@ -143,28 +143,25 @@ const styles: ComponentStyles<ButtonClassNameContract, DesignSystem> = (
         },
         button__outline: {
             background: neutralFillStealthRest,
-            border: `${toPx(
-                designSystem.outlinePatternOutlineWidth
-            )} solid ${neutralOutlineRest(designSystem)}`,
-            padding: `0 ${horizontalSpacing(designSystem.outlinePatternOutlineWidth)(
+            border: `${toPx(designSystem.outlineWidth)} solid ${neutralOutlineRest(
                 designSystem
             )}`,
+            padding: `0 ${horizontalSpacing(designSystem.outlineWidth)(designSystem)}`,
             "&:hover:enabled": {
                 background: neutralFillStealthHover,
-                border: `${toPx(
-                    designSystem.outlinePatternOutlineWidth
-                )} solid ${neutralOutlineHover(designSystem)}`,
+                border: `${toPx(designSystem.outlineWidth)} solid ${neutralOutlineHover(
+                    designSystem
+                )}`,
             },
             "&:active:enabled": {
                 background: neutralFillStealthActive,
-                border: `${toPx(
-                    designSystem.outlinePatternOutlineWidth
-                )} solid ${neutralOutlineActive(designSystem)}`,
+                border: `${toPx(designSystem.outlineWidth)} solid ${neutralOutlineActive(
+                    designSystem
+                )}`,
             },
             ...applyFocusVisible<DesignSystem>({
                 boxShadow: `0 0 0 ${toPx(
-                    designSystem.focusOutlineWidth -
-                        designSystem.outlinePatternOutlineWidth
+                    designSystem.focusOutlineWidth - designSystem.outlineWidth
                 )} ${neutralFocus(designSystem)} inset`,
                 borderColor: neutralFocus,
             }),

packages/fast-components-styles-msft/src/carousel/index.ts

@@ -107,7 +107,7 @@ const styles: ComponentStyles<CarouselClassNameContract, DesignSystem> = (
                     fill: neutralForegroundRest((): string => black),
                     background: neutralFillStealthRest((): string => black),
                     border: `${toPx(
-                        designSystem.outlinePatternOutlineWidth
+                        designSystem.outlineWidth
                     )} solid ${neutralOutlineRest((): string => black)}`,
                 },
                 "& span::before": {
@@ -141,7 +141,7 @@ const styles: ComponentStyles<CarouselClassNameContract, DesignSystem> = (
                     fill: neutralForegroundRest((): string => white),
                     background: neutralFillStealthRest((): string => white),
                     border: `${toPx(
-                        designSystem.outlinePatternOutlineWidth
+                        designSystem.outlineWidth
                     )} solid ${neutralOutlineRest((): string => white)}`,
                 },
                 "& span::before": {

packages/fast-components-styles-msft/src/checkbox/index.ts

@@ -76,9 +76,9 @@ const styles: ComponentStyles<CheckboxClassNameContract, DesignSystem> = (
             zIndex: "1",
             background: neutralFillInputRest,
             transition: "all 0.2s ease-in-out",
-            border: `${toPx(
-                designSystem.outlinePatternOutlineWidth
-            )} solid ${neutralOutlineRest(designSystem)}`,
+            border: `${toPx(designSystem.outlineWidth)} solid ${neutralOutlineRest(
+                designSystem
+            )}`,
             "&:hover": {
                 background: neutralFillInputHover,
                 borderColor: neutralOutlineHover,

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

@@ -23,12 +23,6 @@ export interface DesignSystem {
      */
     accentPalette: Palette;
 
-    /**
-     * The brand color used as color accents.
-     * @deprecated
-     */
-    brandColor: string;
-
     /**
      * A number between 0 and 100 that represents the contrast scale value.
      */
@@ -59,12 +53,6 @@ export interface DesignSystem {
      */
     direction: Direction;
 
-    /**
-     * The value typically used for foreground elements, such as text.
-     * @deprecated
-     */
-    foregroundColor: string;
-
     /**
      * The corner default radius applied to controls.
      */
@@ -73,7 +61,7 @@ export interface DesignSystem {
     /**
      * The width of the outline in pixels applied to outline components.
      */
-    outlinePatternOutlineWidth?: number;
+    outlineWidth?: number;
 
     /**
      * The width of the outline for focus state in pixels.
@@ -162,10 +150,9 @@ const designSystemDefaults: DesignSystem = {
     baseHorizontalSpacingMultiplier: 3,
     direction: Direction.ltr,
     cornerRadius: 2,
-    outlinePatternOutlineWidth: 1,
     focusOutlineWidth: 2,
     disabledOpacity: 0.3,
-
+    outlineWidth: 1,
     neutralPalette: createColorPalette(new ColorRGBA64(0.5, 0.5, 0.5, 1)),
     accentPalette: createColorPalette(parseColorHexRGB("#0078D4")),
 
@@ -204,10 +191,6 @@ const designSystemDefaults: DesignSystem = {
     neutralOutlineRestDelta: 12,
     neutralOutlineHoverDelta: 24,
     neutralOutlineActiveDelta: 18,
-
-    // @deprecated
-    foregroundColor: "#111",
-    brandColor: "#0078D4",
 };
 
 /**

packages/fast-components-styles-msft/src/flipper/index.ts

@@ -46,9 +46,9 @@ const styles: ComponentStyles<FlipperClassNameContract, DesignSystem> = (
                 content: "''",
                 opacity: "0.8",
                 background: neutralFillStealthRest,
-                border: `${toPx(
-                    designSystem.outlinePatternOutlineWidth
-                )} solid ${neutralOutlineRest(designSystem)}`,
+                border: `${toPx(designSystem.outlineWidth)} solid ${neutralOutlineRest(
+                    designSystem
+                )}`,
                 borderRadius: "50%",
                 position: "absolute",
                 top: "0",