feat: initial work to update the fast-components design system (#3135)

* update design system colors and remove elevated corner radius

* update storybook theme to include custom css to ensure accurate visuals

* fix hypertext styles

* update preview styles and dialog styles for corner radius

* update accent color

* comment failings tests per nicholasrice

Author: chrisdholt

packages/web-components/fast-components/.storybook/manager.js

@@ -0,0 +1,6 @@
+import { addons } from "@storybook/addons";
+import theme from "./theme";
+
+addons.setConfig({
+    theme,
+});

packages/web-components/fast-components/.storybook/preview-head.html

@@ -0,0 +1,9 @@
+<style>
+    body {
+        background-color: #181818;
+    }
+    
+    h1, h2, h3, h4, h5, h6 {
+        color: #FFF;
+    }
+</style>

packages/web-components/fast-components/.storybook/theme.js

@@ -0,0 +1,9 @@
+import { create } from "@storybook/theming/create";
+
+export default create({
+    base: "dark",
+    colorPrimary: "#DA1A5F",
+    appContentBg: "#181818",
+    textColor: "#FFF",
+    brandTitle: "FAST components storybook",
+});

packages/web-components/fast-components/package.json

@@ -74,8 +74,10 @@
     "@babel/core": "^7.8.4",
     "@babel/preset-env": "^7.1.0",
     "@microsoft/eslint-config-fast-dna": "^1.1.1",
-    "@storybook/cli": "^5.3.13",
-    "@storybook/html": "^5.3.13",
+    "@storybook/addons": "^5.1.3",
+    "@storybook/cli": "^5.1.3",
+    "@storybook/html": "^5.1.3",
+    "@storybook/theming": "^5.1.3",
     "@types/jest": "^25.2.1",
     "babel-core": "^7.0.0-bridge.0",
     "circular-dependency-plugin": "^5.2.0",

packages/web-components/fast-components/src/card/card.styles.ts

@@ -13,7 +13,7 @@ export const CardStyles = css`
         width: var(--card-width, 100%);
         box-sizing: border-box;
         background: var(--neutral-layer-card);
-        border-radius: calc(var(--elevated-corner-radius) * 1px);
+        border-radius: calc(var(--corner-radius) * 1px);
         ${elevation};
     }
 `.withBehaviors(

packages/web-components/fast-components/src/color/accent-fill.spec.ts

@@ -27,7 +27,8 @@ describe("accentFill", (): void => {
         accentBaseColor(fastDesignSystemDefaults)
     )(fastDesignSystemDefaults);
 
-    test("should operate on design system defaults", (): void => {
+    // TODO @nicholasrice: Tests are failing due as palette is expecting light
+    xtest("should operate on design system defaults", (): void => {
         expect(accentFillRest({} as FASTDesignSystem)).toBe(
             accentPalette[accentIndex + fastDesignSystemDefaults.accentFillRestDelta]
         );
@@ -54,7 +55,8 @@ describe("accentFill", (): void => {
         );
     });
 
-    test("should accept a function that resolves a background swatch", (): void => {
+    // TODO @nicholasrice: Tests are failing due as palette is expecting light
+    xtest("should accept a function that resolves a background swatch", (): void => {
         expect(typeof accentFillRest(() => "#FFF")).toBe("function");
         expect(accentFillRest(() => "#000")({} as FASTDesignSystem)).toBe(
             accentPalette[63]

packages/web-components/fast-components/src/color/accent-foreground.spec.ts

@@ -19,7 +19,8 @@ describe("accentForeground", (): void => {
     const neutralPalette: Palette = getNeutralPalette(fastDesignSystemDefaults);
     const accentPalette: Palette = getAccentPalette(fastDesignSystemDefaults);
 
-    test("should operate on design system defaults", (): void => {
+    // TODO @nicholasrice: Tests are failing due as palette is expecting light
+    xtest("should operate on design system defaults", (): void => {
         expect(accentForegroundRest({} as FASTDesignSystem)).toBe(accentPalette[59]);
         expect(accentForegroundHover({} as FASTDesignSystem)).toBe(accentPalette[65]);
         expect(accentForegroundActive({} as FASTDesignSystem)).toBe(accentPalette[55]);
@@ -32,7 +33,8 @@ describe("accentForeground", (): void => {
         );
     });
 
-    test("should accept a function that resolves a background swatch", (): void => {
+    // TODO @nicholasrice: Tests are failing due as palette is expecting light
+    xtest("should accept a function that resolves a background swatch", (): void => {
         expect(typeof accentForegroundRest(() => "#FFF")).toBe("function");
         expect(accentForegroundRest(() => "#000")({} as FASTDesignSystem)).toBe(
             accentPalette[59]
@@ -43,7 +45,8 @@ describe("accentForeground", (): void => {
         );
     });
 
-    test("should increase contrast on hover state and decrease contrast on active state in either mode", (): void => {
+    // TODO @nicholasrice: Tests are failing due as palette is expecting light
+    xtest("should increase contrast on hover state and decrease contrast on active state in either mode", (): void => {
         expect(
             accentPalette.indexOf(accentForegroundHover(fastDesignSystemDefaults))
         ).toBeGreaterThan(

packages/web-components/fast-components/src/color/color-constants.ts

@@ -1,4 +1,4 @@
 export const white: string = "#FFFFFF";
 export const black: string = "#000000";
-export const accentBaseColor: string = "#0078D4";
+export const accentBaseColor: string = "#DA1A5F";
 export const neutralBaseColor: string = "#808080";

packages/web-components/fast-components/src/color/neutral-fill-card.spec.ts

@@ -2,7 +2,8 @@ import { FASTDesignSystem, fastDesignSystemDefaults } from "../fast-design-syste
 import { neutralFillCard } from "./neutral-fill-card";
 
 describe("neutralFillCard", (): void => {
-    test("should operate on design system defaults", (): void => {
+    // TODO @nicholasrice: Tests are failing due as palette is expecting light
+    xtest("should operate on design system defaults", (): void => {
         expect(neutralFillCard({} as FASTDesignSystem)).toBe(
             fastDesignSystemDefaults.neutralPalette[
                 fastDesignSystemDefaults.neutralFillCardDelta

packages/web-components/fast-components/src/color/neutral-fill-input.spec.ts

@@ -18,7 +18,8 @@ describe("neutralFillInput", (): void => {
     const neutralPalette: Palette = getNeutralPalette(fastDesignSystemDefaults);
     const accentPalette: Palette = getAccentPalette(fastDesignSystemDefaults);
 
-    test("should operate on design system defaults", (): void => {
+    // TODO @nicholasrice: Tests are failing due as palette is expecting light
+    xtest("should operate on design system defaults", (): void => {
         expect(neutralFillInputRest({} as FASTDesignSystem)).toBe(neutralPalette[0]);
         expect(neutralFillInputHover({} as FASTDesignSystem)).toBe(neutralPalette[0]);
         expect(neutralFillInputActive({} as FASTDesignSystem)).toBe(neutralPalette[0]);