feat: add fast-foundation as a new package (microsoft#3122)

* add initial frame for fast-foundation

* move specs from fast-components to fast-foundation

* remove dupe templates and classes from fast-components

* update pathing to reference fast-foundation

* update package.json package title

* remove reference to fast slider

* update pathing for components and revert unintentional file removal

* update readme paths to specs

* drop errant inclusion of changelog

* update design system provider readmes

* fix focus styling on anchor and button

* remove unnecessary slider-util file from fast-components

* remove unnecessary references to storybook

* update designSystemProvider decorator API to expect template

* fix eslint error on import order

* fix readme capitalization

* drop dependency on fast-web-utilities

* update design system provider readme to reflect api

* export color recipes

* export color recipes

* remove unused vars

* update pathing to .js

* add initial package.json version

BREAKING CHANGE: breaks certain package exports

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

@@ -92,8 +92,8 @@
   "dependencies": {
     "@microsoft/fast-colors": "^5.0.8",
     "@microsoft/fast-element": "^0.8.1",
-    "@microsoft/fast-web-utilities": "^4.4.5",
-    "tabbable": "^4.0.0"
+    "@microsoft/fast-foundation": "^0.0.1",
+    "@microsoft/fast-web-utilities": "^4.4.5"
   },
   "peerDependencies": {
     "lodash-es": "^4.0.0"

packages/web-components/fast-components/src/anchor/README.md

@@ -1,4 +1,4 @@
 # fast-anchor
 `fast-anchor` is a web component implementation of an [HTML anchor element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a). The component supports the same visual appearances as the button component (accent, lightweight, neutral, outline, stealth) as well as a hypertext appearance for use inline with text.
 
-For more information view the [component specification](../button/button.spec.md).
+For more information view the [component specification](../../../fast-foundation/src/button/button.spec.md).

packages/web-components/fast-components/src/anchor/index.ts

@@ -1,7 +1,6 @@
 import { customElement } from "@microsoft/fast-element";
+import { Anchor, AnchorTemplate as template } from "@microsoft/fast-foundation";
 import { AnchorStyles as styles } from "./anchor.styles";
-import { Anchor } from "./anchor";
-import { AnchorTemplate as template } from "./anchor.template";
 
 // Anchor
 @customElement({
@@ -13,6 +12,3 @@ import { AnchorTemplate as template } from "./anchor.template";
     },
 })
 export class FASTAnchor extends Anchor {}
-export * from "./anchor.template";
-export * from "./anchor.styles";
-export * from "./anchor";

packages/web-components/fast-components/src/anchored-region/README.md

@@ -1,4 +1,4 @@
 # fast-anchored-region
 An *anchored region* is a container component which enables authors to create layouts where the contents of the anchored region can be positioned relative to another "anchor" element.
 
-For more information view the [component specification](./anchored-region.spec.md).
+For more information view the [component specification](../../../fast-foundation/src/anchored-region/anchored-region.spec.md).

packages/web-components/fast-components/src/anchored-region/anchored-region.stories.ts

@@ -3,7 +3,7 @@ import addons from "@storybook/addons";
 import { Direction, RtlScrollConverter } from "@microsoft/fast-web-utilities";
 import { FASTDesignSystemProvider } from "../design-system-provider";
 import AnchoreRegionTemplate from "./fixtures/base.html";
-import { FASTAnchoredRegion } from ".";
+import { FASTAnchoredRegion } from "./";
 
 // Prevent tree-shaking
 FASTAnchoredRegion;

packages/web-components/fast-components/src/anchored-region/index.ts

@@ -1,6 +1,9 @@
 import { customElement } from "@microsoft/fast-element";
-import { AnchoredRegion } from "./anchored-region";
-import { AnchoredRegionTemplate as template } from "./anchored-region.template";
+// TODO: Update this pathing once we export anchored region from `fast-foundation`
+import {
+    AnchoredRegion,
+    AnchoredRegionTemplate as template,
+} from "@microsoft/fast-foundation/dist/anchored-region";
 import { AnchoredRegionStyles as styles } from "./anchored-region.styles";
 
 @customElement({
@@ -9,6 +12,3 @@ import { AnchoredRegionStyles as styles } from "./anchored-region.styles";
     styles,
 })
 export class FASTAnchoredRegion extends AnchoredRegion {}
-export * from "./anchored-region.template";
-export * from "./anchored-region.styles";
-export * from "./anchored-region";

packages/web-components/fast-components/src/badge/README.md

@@ -1,4 +1,4 @@
 # fast-badge
 *Badge* component is used to highlight an item and attract attention or flag status.
 
-For more information view the [component specification](./badge.spec.md).
+For more information view the [component specification](../../../fast-foundation/src/badge/badge.spec.md).

packages/web-components/fast-components/src/badge/index.ts

@@ -1,6 +1,5 @@
 import { customElement } from "@microsoft/fast-element";
-import { Badge } from "./badge";
-import { BadgeTemplate as template } from "./badge.template";
+import { Badge, BadgeTemplate as template } from "@microsoft/fast-foundation";
 import { BadgeStyles as styles } from "./badge.styles";
 
 @customElement({
@@ -9,6 +8,3 @@ import { BadgeStyles as styles } from "./badge.styles";
     styles,
 })
 export class FASTBadge extends Badge {}
-export * from "./badge.template";
-export * from "./badge.styles";
-export * from "./badge";

packages/web-components/fast-components/src/button/README.md

@@ -1,4 +1,4 @@
 # fast-button
 `fast-button` is a web component implementation of an [HTML button element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button). The component supports several visual apperances (accent, lightweight, neutral, outline, stealth).
 
-For more information view the [component specification](./button.spec.md).
+For more information view the [component specification](../../../fast-foundation/src/button/button.spec.md).

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

@@ -1,4 +1,5 @@
 import { css } from "@microsoft/fast-element";
+import { forcedColorsStylesheetBehavior } from "@microsoft/fast-foundation";
 import {
     AccentButtonStyles,
     BaseButtonStyles,
@@ -31,7 +32,6 @@ import {
     neutralOutlineHoverBehavior,
     neutralOutlineRestBehavior,
 } from "../styles/recipes";
-import { forcedColorsStylesheetBehavior } from "../styles/match-media-stylesheet-behavior";
 import { SystemColors } from "../styles/system-colors";
 
 export const ButtonStyles = css`

packages/web-components/fast-components/src/button/index.ts

@@ -1,6 +1,5 @@
 import { customElement } from "@microsoft/fast-element";
-import { Button } from "./button";
-import { ButtonTemplate as template } from "./button.template";
+import { Button, ButtonTemplate as template } from "@microsoft/fast-foundation";
 import { ButtonStyles as styles } from "./button.styles";
 
 // Button
@@ -13,6 +12,3 @@ import { ButtonStyles as styles } from "./button.styles";
     },
 })
 export class FASTButton extends Button {}
-export * from "./button.template";
-export * from "./button.styles";
-export * from "./button";

packages/web-components/fast-components/src/card/README.md

@@ -1,4 +1,4 @@
 # fast-card
 The `fast-card` component is a visual container without semantics that takes children. Cards are snapshots of content that are typically used in a group to present collections of related information.
 
-For more information view the [component specification](./card.spec.md).
+For more information view the [component specification](../../../fast-foundation/src/card/card.spec.md).

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

@@ -1,8 +1,8 @@
 import { css } from "@microsoft/fast-element";
+import { forcedColorsStylesheetBehavior } from "@microsoft/fast-foundation";
 import { display, elevation } from "../styles";
 import { SystemColors } from "../styles/system-colors";
 import { neutralLayerCardBehavior } from "../styles/recipes";
-import { forcedColorsStylesheetBehavior } from "../styles/match-media-stylesheet-behavior";
 
 export const CardStyles = css`
     ${display("block")} :host {

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

@@ -1,7 +1,5 @@
 import { customElement } from "@microsoft/fast-element";
-import { neutralLayerCardBehavior } from "../styles/recipes";
-import { Card } from "./card";
-import { CardTemplate as template } from "./card.template";
+import { Card, CardTemplate as template } from "@microsoft/fast-foundation";
 import { CardStyles as styles } from "./card.styles";
 
 @customElement({
@@ -10,6 +8,3 @@ import { CardStyles as styles } from "./card.styles";
     styles,
 })
 export class FASTCard extends Card {}
-export * from "./card.template";
-export * from "./card.styles";
-export * from "./card";

packages/web-components/fast-components/src/checkbox/README.md

@@ -1,4 +1,4 @@
 # fast-checkbox
 An implementation of a [checkbox](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input/checkbox) as a form-connected web-component.
 
-For more information view the [component specification](./checkbox.spec.md).
+For more information view the [component specification](../../../fast-foundation/src/checkbox/checkbox.spec.md).

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

@@ -1,4 +1,5 @@
 import { css } from "@microsoft/fast-element";
+import { forcedColorsStylesheetBehavior } from "@microsoft/fast-foundation";
 import { disabledCursor, display } from "../styles";
 import { focusVisible } from "../styles/focus";
 import { SystemColors } from "../styles/system-colors";
@@ -10,7 +11,6 @@ import {
     neutralOutlineHoverBehavior,
     neutralOutlineRestBehavior,
 } from "../styles/recipes";
-import { forcedColorsStylesheetBehavior } from "../styles/match-media-stylesheet-behavior";
 
 export const CheckboxStyles = css`
     ${display("inline-flex")} :host {

packages/web-components/fast-components/src/checkbox/index.ts

@@ -1,6 +1,5 @@
 import { customElement } from "@microsoft/fast-element";
-import { Checkbox } from "./checkbox";
-import { CheckboxTemplate as template } from "./checkbox.template";
+import { Checkbox, CheckboxTemplate as template } from "@microsoft/fast-foundation";
 import { CheckboxStyles as styles } from "./checkbox.styles";
 
 @customElement({
@@ -9,6 +8,3 @@ import { CheckboxStyles as styles } from "./checkbox.styles";
     styles,
 })
 export class FASTCheckbox extends Checkbox {}
-export * from "./checkbox.template";
-export * from "./checkbox.styles";
-export * from "./checkbox";

packages/web-components/fast-components/src/default-palette.ts

@@ -96,7 +96,7 @@ export const neutralPalette: string[] = [
     "#151515",
     "#121212",
     "#101010",
-    "#000000",
+    "#000000"
 ];
 export const accentPalette: string[] = [
     "#FFFFFF",
@@ -192,5 +192,5 @@ export const accentPalette: string[] = [
     "#00182B",
     "#001525",
     "#00121F",
-    "#000000",
+    "#000000"
 ];