Remove foundation as a dependency (#7257)

# Pull Request

## 📖 Description

This PR removes the deprecated `@microsoft/fast-foundation` package from the mono repo dependency tree.

## 👩‍💻 Reviewer Notes

Intended as a clean up task before the conversion of all tests to Playwright and v3 release.

## ✅ Checklist

### General

- [ ] I have included a change request file using `$ npm run change`
- [ ] I have added tests for my changes.
- [x] I have tested my changes.
- [ ] I have updated the project documentation to reflect my changes.
- [x] I have read the [CONTRIBUTING](https://github.com/microsoft/fast/blob/main/CONTRIBUTING.md) documentation and followed the [standards](https://github.com/microsoft/fast/blob/main/CODE_OF_CONDUCT.md#our-standards) for this project.

Author: janechu

change/@microsoft-fast-ssr-32cb750f-a06e-4c59-ae40-65c7ced5f9a3.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "Remove foundation as a dependency",
+  "packageName": "@microsoft/fast-ssr",
+  "email": "7559015+janechu@users.noreply.github.com",
+  "dependentChangeType": "none"
+}

examples/ssr/package.json

@@ -24,7 +24,6 @@
   },
   "dependencies": {
     "@microsoft/fast-element": "^2.9.2",
-    "@microsoft/fast-foundation": "^3.0.0-alpha.33",
     "@microsoft/fast-ssr": "^1.0.0-beta.37",
     "@microsoft/fast-todo-app-example": "1.0.0"
   }

examples/todo-app/package.json

@@ -23,7 +23,6 @@
   },
   "dependencies": {
     "@microsoft/fast-element": "^2.9.2",
-    "@microsoft/fast-foundation": "^3.0.0-alpha.33",
     "tslib": "^2.6.3"
   },
   "devDependencies": {

examples/todo-app/src/design-tokens.ts

@@ -1,4 +1,3 @@
-import { DesignToken } from "@microsoft/fast-foundation";
 import { DefaultTodoList, TodoList } from "./todo-list.js";
 import { app } from "./todo-app.js";
 
@@ -11,8 +10,5 @@ import { app } from "./todo-app.js";
 // in time.
 TodoList.provide(document, new DefaultTodoList());
 
-// Emit CSS for DesignToken default values
-DesignToken.registerDefaultStyleTarget();
-
 // Define the todo-app custom element
 app.define();

examples/todo-app/src/main.ts

@@ -1,13 +1,10 @@
 import { css } from "@microsoft/fast-element";
-import { fontFamily, neutralForeground } from "./design-tokens.js";
 
 export const styles = css`
     :host {
         display: block;
         padding: 16px;
         max-width: 320px;
-        font-family: ${fontFamily};
-        color: ${neutralForeground};
     }
 
     h2 {

examples/todo-app/src/todo-app.styles.ts

@@ -120,9 +120,6 @@
     },
     "read-package-json": {
       "glob": "$glob"
-    },
-    "@microsoft/fast-foundation": {
-      "@microsoft/fast-element": "file:./packages/fast-element"
     }
   }
 }

package-lock.json

@@ -59,8 +59,7 @@
     "@microsoft/fast-element": "^2.9.2"
   },
   "devDependencies": {
-    "@microsoft/fast-element": "^2.9.2",
-    "@microsoft/fast-foundation": "^3.0.0-alpha.33"
+    "@microsoft/fast-element": "^2.9.2"
   },
   "beachball": {
     "disallowedChangeTypes": [

package.json

@@ -1,7 +1,6 @@
 import "./install-dom-shim.js";
 import { expect, test } from "@playwright/test";
-import * as Foundation from "@microsoft/fast-foundation";
-import { ElementViewTemplate, FASTElement } from "@microsoft/fast-element";
+import { FASTElement, html } from "@microsoft/fast-element";
 import { createWindow } from "./dom-shim.js";
 import fastSSR from "./exports.js";
 import { uniqueElementName } from "@microsoft/fast-element/testing.js";
@@ -29,110 +28,20 @@ test.describe("createWindow", () => {
     });
 });
 
-function deriveName(ctor: typeof FASTElement) {
-    const baseName = ctor.name.toLowerCase();
-    return `fast-${baseName}`;
-}
-
-const dataGrid = deriveName(Foundation.FASTDataGrid);
-const dataGridRow = deriveName(Foundation.FASTDataGridRow);
-const dataGridCell = deriveName(Foundation.FASTDataGridCell);
-const anchoredRegion = deriveName(Foundation.FASTAnchoredRegion);
-const pickerList = deriveName(Foundation.FASTPickerList);
-const pickerListItem = deriveName(Foundation.FASTPickerListItem);
-const pickerMenu = deriveName(Foundation.FASTPickerMenu);
-const pickerMenuOption = deriveName(Foundation.FASTPickerMenuOption);
-const progressRing = deriveName(Foundation.FASTProgressRing);
-
-const componentsAndTemplates: [typeof FASTElement, ElementViewTemplate][] = [
-    [Foundation.FASTAccordion, Foundation.accordionTemplate()],
-    [Foundation.FASTAccordionItem, Foundation.accordionItemTemplate()],
-    [Foundation.FASTAnchor, Foundation.anchorTemplate()],
-    [Foundation.FASTAnchoredRegion, Foundation.anchoredRegionTemplate()],
-    [Foundation.FASTAvatar, Foundation.avatarTemplate()],
-    [Foundation.FASTBadge, Foundation.badgeTemplate()],
-    [Foundation.FASTBreadcrumb, Foundation.breadcrumbTemplate()],
-    [Foundation.FASTBreadcrumbItem, Foundation.breadcrumbItemTemplate()],
-    [Foundation.FASTButton, Foundation.buttonTemplate()],
-    [
-        Foundation.FASTCalendar,
-        Foundation.calendarTemplate({
-            dataGrid,
-            dataGridRow,
-            dataGridCell,
-        }),
-    ],
-    [Foundation.FASTCard, Foundation.cardTemplate()],
-    [Foundation.FASTCheckbox, Foundation.checkboxTemplate()],
-    [Foundation.FASTCombobox, Foundation.comboboxTemplate()],
-    [
-        Foundation.FASTDataGrid,
-        Foundation.dataGridTemplate({
-            dataGridRow,
-        }),
-    ],
-    [Foundation.FASTDataGridCell, Foundation.dataGridCellTemplate()],
-    [
-        Foundation.FASTDataGridRow,
-        Foundation.dataGridRowTemplate({
-            dataGridCell,
-        }),
-    ],
-    [Foundation.FASTDialog, Foundation.dialogTemplate()],
-    [Foundation.FASTDisclosure, Foundation.disclosureTemplate()],
-    [Foundation.FASTDivider, Foundation.dividerTemplate()],
-    [Foundation.FASTFlipper, Foundation.flipperTemplate()],
-    [Foundation.FASTHorizontalScroll, Foundation.horizontalScrollTemplate()],
-    [Foundation.FASTListbox as any as typeof FASTElement, Foundation.listboxTemplate()],
-    [Foundation.FASTListboxOption, Foundation.listboxOptionTemplate()],
-    [Foundation.FASTMenu, Foundation.menuTemplate()],
-    [Foundation.FASTMenuItem, Foundation.menuItemTemplate()],
-    [Foundation.FASTNumberField, Foundation.numberFieldTemplate()],
-    [
-        Foundation.FASTPicker,
-        Foundation.pickerTemplate({
-            anchoredRegion,
-            pickerList,
-            pickerListItem,
-            pickerMenu,
-            pickerMenuOption,
-            progressRing,
-        }),
-    ],
-    [Foundation.FASTPickerList, Foundation.pickerListTemplate()],
-    [Foundation.FASTPickerListItem, Foundation.pickerListItemTemplate()],
-    [Foundation.FASTPickerMenu, Foundation.pickerMenuTemplate()],
-    [Foundation.FASTPickerMenuOption, Foundation.pickerMenuOptionTemplate()],
-    [Foundation.FASTProgress, Foundation.progressTemplate()],
-    [Foundation.FASTProgressRing, Foundation.progressRingTemplate()],
-    [Foundation.FASTRadio, Foundation.radioTemplate()],
-    [Foundation.FASTRadioGroup, Foundation.radioGroupTemplate()],
-    [Foundation.FASTSearch, Foundation.searchTemplate()],
-    [Foundation.FASTSkeleton, Foundation.skeletonTemplate()],
-    [Foundation.FASTSlider, Foundation.sliderTemplate()],
-    [Foundation.FASTSliderLabel, Foundation.sliderLabelTemplate()],
-    [Foundation.FASTSwitch, Foundation.switchTemplate()],
-    [Foundation.FASTTab, Foundation.tabTemplate()],
-    [Foundation.FASTTabPanel, Foundation.tabPanelTemplate()],
-    [Foundation.FASTTabs, Foundation.tabsTemplate()],
-    [Foundation.FASTTextArea, Foundation.textAreaTemplate()],
-    [Foundation.FASTTextField, Foundation.textFieldTemplate()],
-    [Foundation.FASTToolbar, Foundation.toolbarTemplate()],
-    [Foundation.FASTTooltip,Foundation.tooltipTemplate()],
-    [Foundation.FASTTreeItem, Foundation.treeItemTemplate()],
-    [Foundation.FASTTreeView, Foundation.treeViewTemplate()],
-];
-
 test.describe("The DOM shim", () => {
-    componentsAndTemplates.forEach(([ctor, template]) => {
-        const name = deriveName(ctor);
-        ctor.define({ name, template });
-
-        test(`should support construction and connection of the ${ctor.name} component and template during SSR rendering`, () => {
-            const { templateRenderer } = fastSSR();
-            const templateString = `<${name}></${name}>`;
-            expect(() => templateRenderer.render(templateString)).not.toThrow();
+    test(`should support construction and connection of a component and template during SSR rendering`, () => {
+        class MyComponent extends FASTElement {}
+
+        const name = "my-component";
+
+        MyComponent.define({
+            name,
+            template: html``
         });
+
+        const { templateRenderer } = fastSSR();
+        const templateString = `<${name}></${name}>`;
+        expect(() => templateRenderer.render(templateString)).not.toThrow();
     });
 
     test.describe("has a CSSStyleSheet implementation", () => {