chore: replace the deprecated react badge with the FAST web component…

…s badge (#4279)

# Description

<!--- Describe your changes. -->
Replaces the deprecated React badge with the `<fast-badge>` from the `@microsoft/fast-components` package.

## Motivation & context

<!--- What problem does this change solve? -->
<!--- Provide a link if you are addressing an open issue. -->
Resolves #4266

## Issue type checklist

<!--- What type of change are you submitting? Put an x in the box that applies: -->

- [x] **Chore**: A change that does not impact distributed packages.
- [ ] **Bug fix**: A change that fixes an issue, link to the issue above.
- [ ] **New feature**: A change that adds functionality.

**Is this a breaking change?**
- [ ] This change causes current functionality to break.

<!--- If yes, describe the impact. -->

**Adding or modifying component(s) in `@microsoft/fast-components` checklist**

<!-- Do your changes add or modify components in the @microsoft/fast-components package? Put an x in the box that applies: -->

- [ ] I have added a new component
- [ ] I have modified an existing component
- [ ] I have updated the [definition file](https://github.com/Microsoft/fast/blob/master/packages/web-components/fast-components/CONTRIBUTING.md#definition)
- [ ] I have updated the [configuration file](https://github.com/Microsoft/fast/blob/master/packages/web-components/fast-components/CONTRIBUTING.md#configuration)

## Process & policy checklist

<!--- Review the list and check the boxes that apply. -->

- [ ] 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/master/CONTRIBUTING.md) documentation and followed the [standards](https://www.fast.design/docs/community/code-of-conduct/#our-standards) for this project.

<!---
Formatting guidelines:

Accepted peer review title format:
<type>: <description>

Example titles:
    chore: add unit tests for all components
    feat: add a border radius to button
    fix: update design system to use 3px border radius

    <type> is required to be one of the following:

        - chore: A change that does not impact distributed packages.
        - fix: A change which fixes an issue.
        - feat: A that adds functionality.

    <description> is required for the CHANGELOG and speaks to what the user gets from this PR:

        - Be concise.
        - Use all lowercase characters. 
        - Use imperative, present tense (e.g. `add` not `adds`.)
        - Do not end your description with a period.
        - Avoid redundant words.

For additional information regarding working on FAST, check out our documentation site:
https://www.fast.design/docs/community/contributor-guide
-->

sites/fast-component-explorer/app/web-components/index.tsx

@@ -8,7 +8,7 @@ import {
     FASTTabs,
 } from "@microsoft/fast-components";
 import { neutralLayerL1, neutralLayerL3 } from "@microsoft/fast-components-styles-msft";
-import h from "./pragma";
+import h from "@microsoft/site-utilities/dist/web-components/pragma";
 
 /**
  * Ensure tree-shaking doesn't remove these components from the bundle

sites/fast-creator/app/app.tsx

@@ -13,12 +13,12 @@ export default class App extends React.Component<{}, {}> {
     public render(): React.ReactNode {
         return (
             <BrowserRouter>
-                <div>
+                <fast-design-system-provider use-defaults>
                     <DesignSystemProvider designSystem={creatorDesignSystem}>
                         <Route component={Creator} exact={true} path="/" />
                     </DesignSystemProvider>
                     <Route component={Preview} exact={true} path="/preview" />
-                </div>
+                </fast-design-system-provider>
             </BrowserRouter>
         );
     }

sites/site-utilities/package.json

@@ -60,6 +60,7 @@
     "@microsoft/fast-foundation": "^1.12.0",
     "@microsoft/fast-tooling": "^0.15.0",
     "@microsoft/fast-tooling-react": "^2.5.3",
+    "@skatejs/val": "^0.5.0",
     "monaco-editor": "^0.21.2",
     "vscode-html-languageservice": "^3.1.3"
   }

sites/site-utilities/src/components/logo/index.tsx

@@ -1,12 +1,16 @@
+/** @jsx h */ /* Note: Set the JSX pragma to the wrapped version of createElement */
+
 import React from "react";
-import {
-    Background,
-    Badge,
-    Heading,
-    HeadingSize,
-} from "@microsoft/fast-components-react-msft";
+import { Background, Heading, HeadingSize } from "@microsoft/fast-components-react-msft";
+import { FASTBadge } from "@microsoft/fast-components";
+import h from "../../web-components/pragma";
 import { LogoProps } from "./logo.props";
 
+/**
+ * Ensure tree-shaking doesn't remove these components from the bundle
+ */
+FASTBadge;
+
 const backgroundStyle = {
     display: "flex",
     height: "32px",
@@ -16,6 +20,11 @@ const backgroundStyle = {
 };
 const imageStyle = { verticalAlign: "middle", height: "32px" };
 const spanStyle = { verticalAlign: "middle", margin: "0 10px" };
+const style = `
+fast-badge {
+    --badge-fill-primary: #FFD800;
+    --badge-color-primary: #000000;
+}`;
 
 export const Logo: React.FC<LogoProps> = ({
     className,
@@ -25,11 +34,16 @@ export const Logo: React.FC<LogoProps> = ({
 }: React.PropsWithChildren<LogoProps>): React.ReactElement => {
     return (
         <Background className={className} drawBackground={true} style={backgroundStyle}>
+            <style>{style}</style>
             <Heading size={HeadingSize._6}>
                 <img src={logo} style={imageStyle} />
                 <span style={spanStyle}>{title}</span>
             </Heading>
-            {version ? <Badge>{version}</Badge> : null}
+            {version ? (
+                <fast-badge fill="primary" color="primary">
+                    {version}
+                </fast-badge>
+            ) : null}
         </Background>
     );
 };

sites/site-utilities/src/custom-elements.d.ts

@@ -0,0 +1,17 @@
+// custom-elements.d.ts
+declare namespace JSX {
+    interface IntrinsicElements {
+        "fast-badge": React.DetailedHTMLProps<
+            React.HTMLAttributes<HTMLElement>,
+            HTMLElement
+        > & {
+            fill?: string;
+            color?: string;
+        };
+    }
+}
+
+/**
+ * Satisfy TypeScript importing modules without typings
+ */
+declare module "@skatejs/val";