Use Canon everywhere

Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>

microsite-canon/components/CodeBlock/index.tsx

@@ -1,7 +1,7 @@
-import { ReactNode } from 'react';
+import React from 'react';
 import type { BundledLanguage } from 'shiki';
 import { codeToHtml } from 'shiki';
-import React from 'react';
+import { Text } from '@backstage/canon';
 import styles from './styles.module.css';
 
 interface CodeBlockProps {
@@ -21,7 +21,11 @@ export async function CodeBlock({ lang, title, code }: CodeBlockProps) {
 
   return (
     <div className={styles.codeBlock}>
-      {title && <div className={styles.title}>{title}</div>}
+      {title && (
+        <div className={styles.title}>
+          <Text variant="body">{title}</Text>
+        </div>
+      )}
       <div dangerouslySetInnerHTML={{ __html: out }} className={styles.code} />
     </div>
   );

microsite-canon/components/IconLibrary/IconLibrary.tsx

@@ -30,7 +30,7 @@ export const IconLibrary = () => {
           <div className={styles.icon}>
             <Icon name={icon as IconNames} />
           </div>
-          <span>{icon}</span>
+          <Text variant="body">{icon}</Text>
         </div>
       ))}
     </div>

microsite-canon/components/Sidebar/Sidebar.module.css

@@ -32,23 +32,8 @@
   margin-top: 48px;
 }
 
-.title {
-  font-size: 0.875rem;
-  font-weight: 500;
-  margin-bottom: 12px;
-  margin-top: 32px;
-}
-
 .menu a {
   display: block;
-  font-size: 0.875rem;
-  font-weight: 400;
-  line-height: 1.25rem;
-  color: var(--canon-text-secondary);
   text-decoration: none;
   height: 1.75rem;
-
-  &:hover {
-    color: var(--canon-text-primary);
-  }
 }

microsite-canon/components/Sidebar/index.tsx

@@ -3,6 +3,7 @@ import Image from 'next/image';
 import { TabsVersion, TabsTheme, TabsPages } from '../Tabs';
 import Link from 'next/link';
 import { components, coreConcepts } from '@/utils/data';
+import { Box, Text } from '@backstage/canon';
 
 export const Sidebar = () => {
   return (
@@ -23,16 +24,24 @@ export const Sidebar = () => {
         </div>
         <TabsPages />
         <div className={styles.menu}>
-          <h2 className={styles.title}>Core Concepts</h2>
+          <Box marginTop="md" marginBottom="xs">
+            <Text variant="subtitle" weight="bold">
+              Core Concepts
+            </Text>
+          </Box>
           {coreConcepts.map(concept => (
             <Link href={`/core-concepts/${concept.slug}`} key={concept.slug}>
-              {concept.title}
+              <Text variant="body">{concept.title}</Text>
             </Link>
           ))}
-          <h2 className={styles.title}>Components</h2>
+          <Box marginTop="md" marginBottom="xs">
+            <Text variant="subtitle" weight="bold">
+              Components
+            </Text>
+          </Box>
           {components.map(component => (
             <Link href={`/components/${component.slug}`} key={component.slug}>
-              {component.title}
+              <Text variant="body">{component.title}</Text>
             </Link>
           ))}
         </div>

microsite-canon/components/Story/index.tsx

@@ -8,7 +8,9 @@ export const Story = ({ id, height }: { id: string; height?: number }) => {
   const localTheme = theme === 'dark' ? 'Dark' : 'Light';
   const chromaticId = '67584b7e8c2eb09c0422c27e-dmfbzicnkw';
   const chromaticUrl = `https://${chromaticId}.chromatic.com/iframe.html`;
-  const iframeUrl = `${chromaticUrl}?globals=theme%3A${localTheme}&args=&id=${id}`;
+  const localUrl = 'http://localhost:6006/iframe.html';
+  const url = process.env.NODE_ENV === 'development' ? localUrl : chromaticUrl;
+  const iframeUrl = `${url}?globals=theme%3A${localTheme}&args=&id=${id}`;
 
   return (
     <div

microsite-canon/components/Tabs/index.tsx

@@ -2,7 +2,7 @@
 
 import styles from './Tabs.module.css';
 import { Tabs } from '@base-ui-components/react/tabs';
-import { Icon } from '@backstage/canon';
+import { Icon, Text } from '@backstage/canon';
 import { usePathname, useSearchParams } from 'next/navigation';
 import { useRouter } from 'next/navigation';
 import { useTheme } from 'next-themes';
@@ -13,10 +13,14 @@ export const TabsVersion = () => {
     <Tabs.Root className={styles.tabs} defaultValue="v1">
       <Tabs.List className={styles.list}>
         <Tabs.Tab className={styles.tab} value="v1">
-          V1
+          <Text variant="caption" weight="bold">
+            V1
+          </Text>
         </Tabs.Tab>
         <Tabs.Tab className={styles.tab} value="v2">
-          V2
+          <Text variant="caption" weight="bold">
+            V2
+          </Text>
         </Tabs.Tab>
         <Tabs.Indicator className={styles.indicator} />
       </Tabs.List>
@@ -82,7 +86,9 @@ export const TabsPages = () => {
             router.push('/');
           }}
         >
-          Documentation
+          <Text variant="caption" weight="bold">
+            Documentation
+          </Text>
         </Tabs.Tab>
         <Tabs.Tab
           className={styles.tab}
@@ -91,7 +97,9 @@ export const TabsPages = () => {
             router.push('/playground');
           }}
         >
-          Playground
+          <Text variant="caption" weight="bold">
+            Playground
+          </Text>
         </Tabs.Tab>
         <Tabs.Indicator className={styles.indicator} />
       </Tabs.List>

microsite-canon/content/button.mdx

@@ -6,7 +6,7 @@ import { PropsTable } from '../components/PropsTable';
 
 A button component that can be used to trigger actions.
 
-<Story id="components-button--primary" />
+<Story id="button--primary" />
 
 <CodeBlock
   code={`<Button>Click me</Button>
@@ -50,7 +50,7 @@ A button component that can be used to trigger actions.
 
 Here's a view when buttons have different variants.
 
-<Story id="components-button--variants" />
+<Story id="button--variants" />
 
 <CodeBlock
   title="Usage"
@@ -65,7 +65,7 @@ Here's a view when buttons have different variants.
 
 Here's a view when buttons have different sizes.
 
-<Story id="components-button--sizes" />
+<Story id="button--sizes" />
 
 <CodeBlock
   title="Usage"
@@ -79,7 +79,7 @@ Here's a view when buttons have different sizes.
 
 Here's a view when buttons have icons.
 
-<Story id="components-button--with-icons" />
+<Story id="button--with-icons" />
 
 <CodeBlock
   title="Usage"
@@ -94,7 +94,7 @@ Here's a view when buttons have icons.
 
 Here's a view when buttons are full width.
 
-<Story id="components-button--full-width" height={240} />
+<Story id="button--full-width" height={240} />
 
 <CodeBlock
   code={`<Stack style={{ width: '300px' }}>
@@ -106,7 +106,7 @@ Here's a view when buttons are full width.
 
 Here's a view when buttons are disabled.
 
-<Story id="components-button--disabled" />
+<Story id="button--disabled" />
 
 <CodeBlock title="Usage" code={`<Button disabled>Button</Button>`} />
 
@@ -114,7 +114,7 @@ Here's a view when buttons are disabled.
 
 Here's a view when buttons are responsive.
 
-<Story id="components-button--responsive" />
+<Story id="button--responsive" />
 
 <CodeBlock
   code={`<Button

microsite-canon/content/checkbox.mdx

@@ -6,7 +6,7 @@ import { PropsTable } from '../components/PropsTable';
 
 A checkbox component that can be used to trigger actions.
 
-<Story id="components-checkbox--primary" />
+<Story id="checkbox--primary" />
 
 <CodeBlock
   code={`import { Checkbox } from "@backstage/canon";

microsite-canon/content/container.mdx

@@ -1,4 +1,3 @@
-import { Story } from '../components/Story';
 import { CodeBlock } from '../components/CodeBlock';
 import { PropsTable } from '../components/PropsTable';
 import { spacePropsList } from '../utils/spaceProps';

microsite-canon/content/grid.mdx

@@ -1,4 +1,3 @@
-import { Story } from '../components/Story';
 import { CodeBlock } from '../components/CodeBlock';
 import { PropsTable } from '../components/PropsTable';
 import { spacePropsList } from '../utils/spaceProps';

microsite-canon/content/heading.mdx

@@ -6,7 +6,7 @@ import { PropsTable } from '../components/PropsTable';
 
 Headings are used to structure the content of your page.
 
-<Story id="components-heading--title-1" height={108} />
+<Story id="heading--title-1" height={108} />
 
 <CodeBlock
   code={`import { Heading } from "@backstage/canon";
@@ -44,7 +44,7 @@ Headings are used to structure the content of your page.
 The `Heading` component has a `variant` prop that can be used to change the
 appearance of the heading.
 
-<Story id="components-heading--all-variants" height={400} />
+<Story id="heading--all-variants" height={400} />
 
 <CodeBlock
   code={`<Stack gap="md">

microsite-canon/content/icon.mdx

@@ -7,7 +7,7 @@ import { icons } from '@backstage/canon';
 
 Icons are used to represent an action or a state.
 
-<Story id="components-icon--primary" />
+<Story id="icon--primary" />
 
 <CodeBlock
   code={`import { Icon } from "@backstage/canon";

microsite-canon/content/inline.mdx

@@ -1,4 +1,3 @@
-import { Story } from '../components/Story';
 import { CodeBlock } from '../components/CodeBlock';
 import { PropsTable } from '../components/PropsTable';
 import { spacePropsList } from '../utils/spaceProps';

microsite-canon/content/text.mdx

@@ -6,7 +6,7 @@ import { Story } from '../components/Story';
 
 The `Text` component is used to display content on your page.
 
-<Story id="components-text--default" />
+<Story id="text--default" />
 
 <CodeBlock
   code={`import { Text } from "@backstage/canon";

microsite-canon/content/typography.mdx

@@ -15,7 +15,7 @@ create a hierarchy of information and to make the content more readable. The
 best way to use add these headings to your page is to import the [Heading
 component](?path=/docs/components-heading--docs).
 
-<Story id="components-heading--all-variants" height={400} />
+<Story id="heading--all-variants" height={400} />
 
 ## Text
 
@@ -25,4 +25,4 @@ versatile and can be paired with regular and bold of font weights. You can use
 the [Text component](?path=/docs/components-text--docs) to add text to your
 page.
 
-<Story id="components-text--all-variants" height={410} />
+<Story id="text--all-variants" height={410} />

microsite-canon/mdx-components.tsx

@@ -3,61 +3,35 @@ import Image, { ImageProps } from 'next/image';
 import { ReactNode, ReactElement } from 'react';
 import React from 'react';
 import { CodeBlock } from '@/components/CodeBlock';
-
-// This file allows you to provide custom React components
-// to be used in MDX files. You can import and use any
-// React component you want, including inline styles,
-// components from other libraries, and more.
+import { Heading, Text, Box } from '@backstage/canon';
 
 export function useMDXComponents(components: MDXComponents): MDXComponents {
   return {
     // Allows customizing built-in components, e.g. to add styling.
     h1: ({ children }) => (
-      <h1
-        style={{
-          color: 'var(--canon-text-primary)',
-          fontSize: '3rem',
-          marginTop: '64px',
-        }}
-      >
-        {children as ReactNode}
-      </h1>
+      <Box marginBottom="md" style={{ marginTop: '4rem' }}>
+        <Heading variant="title2">{children as ReactNode}</Heading>
+      </Box>
     ),
     h2: ({ children }) => (
-      <h2
-        style={{
-          color: 'var(--canon-text-primary)',
-          fontSize: '1.75rem',
-          marginTop: '3rem',
-        }}
-      >
-        {children as ReactNode}
-      </h2>
+      <Box marginTop="xl" marginBottom="md">
+        <Heading variant="title3">{children as ReactNode}</Heading>
+      </Box>
     ),
     h3: ({ children }) => (
-      <h3
-        style={{
-          color: 'var(--canon-text-primary)',
-          fontSize: '1.25rem',
-          marginTop: '2.5rem',
-          marginBottom: '0.5rem',
-        }}
-      >
-        {children as ReactNode}
-      </h3>
+      <Box marginTop="lg" marginBottom="xs">
+        <Heading variant="title4">{children as ReactNode}</Heading>
+      </Box>
     ),
     p: ({ children }) => (
-      <p
-        style={{
-          color: 'var(--canon-text-primary)',
-          fontSize: '1rem',
-          lineHeight: '1.5rem',
-          marginTop: '0',
-          marginBottom: '1rem',
-        }}
-      >
+      <Box marginBottom="md">
+        <Text variant="subtitle">{children as ReactNode}</Text>
+      </Box>
+    ),
+    a: ({ children, href }) => (
+      <a href={href} style={{ color: 'var(--canon-text-primary)' }}>
         {children as ReactNode}
-      </p>
+      </a>
     ),
     pre: ({ children }) => {
       const codeContent = React.isValidElement(children)

microsite-canon/package.json

@@ -13,6 +13,7 @@
   },
   "prettier": "@backstage/cli/config/prettier",
   "dependencies": {
+    "@backstage/canon": "workspace:^",
     "@base-ui-components/react": "^1.0.0-alpha.4",
     "@mdx-js/loader": "^3.1.0",
     "@mdx-js/react": "^3.1.0",

package.json

@@ -9,7 +9,8 @@
   "workspaces": {
     "packages": [
       "packages/*",
-      "plugins/*"
+      "plugins/*",
+      "microsite-canon"
     ]
   },
   "scripts": {

packages/canon/src/components/Heading/Heading.tsx

@@ -14,6 +14,8 @@
  * limitations under the License.
  */
 
+'use client';
+
 import React, { forwardRef } from 'react';
 import { HeadingProps } from './types';
 import { useCanon } from '../../contexts/canon';

packages/canon/src/components/Heading/styles.css

@@ -23,36 +23,36 @@
   &.text-display {
     font-size: var(--canon-font-size-display);
     line-height: 100%;
-    font-weight: var(--canon-font-bold);
+    font-weight: var(--canon-font-weight-bold);
   }
 
   &.text-title1 {
     font-size: var(--canon-font-size-title1);
     line-height: 100%;
-    font-weight: var(--canon-font-bold);
+    font-weight: var(--canon-font-weight-bold);
   }
 
   &.text-title2 {
     font-size: var(--canon-font-size-title2);
     line-height: 100%;
-    font-weight: var(--canon-font-bold);
+    font-weight: var(--canon-font-weight-bold);
   }
 
   &.text-title3 {
     font-size: var(--canon-font-size-title3);
     line-height: 100%;
-    font-weight: var(--canon-font-bold);
+    font-weight: var(--canon-font-weight-bold);
   }
 
   &.text-title4 {
     font-size: var(--canon-font-size-title4);
     line-height: 100%;
-    font-weight: var(--canon-font-bold);
+    font-weight: var(--canon-font-weight-bold);
   }
 
   &.text-title5 {
     font-size: var(--canon-font-size-title5);
     line-height: 100%;
-    font-weight: var(--canon-font-bold);
+    font-weight: var(--canon-font-weight-bold);
   }
 }