diff --git a/canon-docs/src/app/providers.tsx b/canon-docs/src/app/providers.tsx
index 508d40b7df..81a18136e8 100644
--- a/canon-docs/src/app/providers.tsx
+++ b/canon-docs/src/app/providers.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import { ReactNode } from 'react';
-import { CanonProvider } from '@backstage/canon';
+import { CanonProvider } from '../../../packages/canon/src/contexts/canon';
 import { PlaygroundProvider } from '@/utils/playground-context';
 
 export const Providers = ({ children }: { children: ReactNode }) => {
diff --git a/canon-docs/src/components/CodeBlock/client.tsx b/canon-docs/src/components/CodeBlock/client.tsx
index d170bafabf..27f5bc1a02 100644
--- a/canon-docs/src/components/CodeBlock/client.tsx
+++ b/canon-docs/src/components/CodeBlock/client.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import { CodeBlockProps } from '.';
-import { Text } from '@backstage/canon';
+import { Text } from '../../../../packages/canon';
 import styles from './styles.module.css';
 
 export const CodeBlockClient = ({
diff --git a/canon-docs/src/components/CustomTheme/customTheme.tsx b/canon-docs/src/components/CustomTheme/customTheme.tsx
index 2c282d9c81..174a8d0b24 100644
--- a/canon-docs/src/components/CustomTheme/customTheme.tsx
+++ b/canon-docs/src/components/CustomTheme/customTheme.tsx
@@ -6,7 +6,7 @@ import { sass } from '@codemirror/lang-sass';
 import styles from './styles.module.css';
 import { usePlayground } from '@/utils/playground-context';
 import { AnimatePresence, motion } from 'motion/react';
-import { Icon } from '@backstage/canon';
+import { Icon } from '../../../../packages/canon';
 import { createTheme } from '@uiw/codemirror-themes';
 import { tags as t } from '@lezer/highlight';
 
diff --git a/canon-docs/src/components/CustomTheme/styles.module.css b/canon-docs/src/components/CustomTheme/styles.module.css
index 34c5d41d5d..3f0a5eb14e 100644
--- a/canon-docs/src/components/CustomTheme/styles.module.css
+++ b/canon-docs/src/components/CustomTheme/styles.module.css
@@ -37,9 +37,7 @@
   justify-content: space-between;
   align-items: center;
   padding: 0 12px 0 16px;
-  transition:
-    background-color 0.2s ease-in-out,
-    border-color 0.2s ease-in-out;
+  transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
 }
 
 .headerLeft {
diff --git a/canon-docs/src/components/HeadlessBanners/BaseUI.tsx b/canon-docs/src/components/HeadlessBanners/BaseUI.tsx
index d931562b8c..8401cafd78 100644
--- a/canon-docs/src/components/HeadlessBanners/BaseUI.tsx
+++ b/canon-docs/src/components/HeadlessBanners/BaseUI.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { Icon, Text } from '@backstage/canon';
+import { Icon, Text } from '../../../../packages/canon';
 import styles from './styles.module.css';
 
 interface BaseUIProps {
diff --git a/canon-docs/src/components/IconLibrary/IconLibrary.tsx b/canon-docs/src/components/IconLibrary/IconLibrary.tsx
index 1f6618f38d..be666fc896 100644
--- a/canon-docs/src/components/IconLibrary/IconLibrary.tsx
+++ b/canon-docs/src/components/IconLibrary/IconLibrary.tsx
@@ -15,8 +15,8 @@
  */
 'use client';
 
-import { Text, Icon, icons } from '@backstage/canon';
-import type { IconNames } from '@backstage/canon';
+import { Text, Icon, icons } from '../../../../packages/canon';
+import type { IconNames } from '../../../../packages/canon';
 import styles from './styles.module.css';
 
 export const IconLibrary = () => {
diff --git a/canon-docs/src/components/PropsTable/PropsTable.tsx b/canon-docs/src/components/PropsTable/PropsTable.tsx
index f0a6229d51..69bff9ffe6 100644
--- a/canon-docs/src/components/PropsTable/PropsTable.tsx
+++ b/canon-docs/src/components/PropsTable/PropsTable.tsx
@@ -2,7 +2,7 @@
 
 import * as Table from '../Table';
 import { Chip } from '../Chip';
-import { icons } from '@backstage/canon';
+import { icons } from '../../../../packages/canon';
 
 // Define a more specific type for the data object
 type PropData = {
diff --git a/canon-docs/src/components/Sidebar/Sidebar.module.css b/canon-docs/src/components/Sidebar/Sidebar.module.css
index bf04748b02..fba98420d0 100644
--- a/canon-docs/src/components/Sidebar/Sidebar.module.css
+++ b/canon-docs/src/components/Sidebar/Sidebar.module.css
@@ -14,9 +14,7 @@
     box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.025);
     color: var(--primary);
     background-color: var(--panel);
-    transition:
-      background-color 0.2s ease-in-out,
-      color 0.2s ease-in-out;
+    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
     overflow: hidden;
   }
 }
diff --git a/canon-docs/src/components/Sidebar/playground.tsx b/canon-docs/src/components/Sidebar/playground.tsx
index 9e36238978..5773807d74 100644
--- a/canon-docs/src/components/Sidebar/playground.tsx
+++ b/canon-docs/src/components/Sidebar/playground.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import { components } from '@/utils/data';
-import { Box, Checkbox, Text } from '@backstage/canon';
+import { Checkbox } from '../../../../packages/canon';
 import { motion } from 'motion/react';
 import styles from './Sidebar.module.css';
 import { usePathname } from 'next/navigation';
@@ -52,28 +52,20 @@ export const Playground = () => {
       transition={{ duration: 0.2 }}
       style={{ position: 'absolute' }}
     >
-      <Box mt="lg" mb="2xs">
-        <Text variant="body" weight="bold">
-          Components
-        </Text>
-      </Box>
+      <div className={styles.sectionTitle}>Components</div>
       {components.map(({ slug, title }) => (
         <div className={styles.line} key={slug}>
-          <Text variant="body">{title}</Text>
+          <div className={styles.lineTitle}>{title}</div>
           <Checkbox
             checked={selectedComponents.includes(slug)}
             onChange={() => handleComponentCheckboxChange(slug)}
           />
         </div>
       ))}
-      <Box mt="lg" mb="2xs">
-        <Text variant="body" weight="bold">
-          Screen sizes
-        </Text>
-      </Box>
+      <div className={styles.sectionTitle}> Screen sizes</div>
       {screenSizes.map(({ slug, title }) => (
         <div className={styles.line} key={slug}>
-          <Text variant="body">{title}</Text>
+          <div className={styles.lineTitle}>{title}</div>
           <Checkbox
             checked={selectedScreenSizes.includes(slug)}
             onChange={() => handleCheckboxChange(slug)}
diff --git a/canon-docs/src/components/Tabs/parts.tsx b/canon-docs/src/components/Tabs/parts.tsx
index 752c5c8064..7f074f9188 100644
--- a/canon-docs/src/components/Tabs/parts.tsx
+++ b/canon-docs/src/components/Tabs/parts.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import { Tabs as TabsPrimitive } from '@base-ui-components/react/tabs';
-import { Text } from '@backstage/canon';
+import { Text } from '../../../../packages/canon';
 import styles from './styles.module.css';
 
 export const Root = ({
diff --git a/canon-docs/src/components/Toolbar/nav.module.css b/canon-docs/src/components/Toolbar/nav.module.css
index 608c64d008..95228fa917 100644
--- a/canon-docs/src/components/Toolbar/nav.module.css
+++ b/canon-docs/src/components/Toolbar/nav.module.css
@@ -13,9 +13,7 @@
   width: 142px;
   border-radius: 0.375rem;
   background-color: var(--bg);
-  transition:
-    background-color 0.2s ease-in-out,
-    color 0.2s ease-in-out;
+  transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
 }
 
 .list {
diff --git a/canon-docs/src/components/Toolbar/theme-name.module.css b/canon-docs/src/components/Toolbar/theme-name.module.css
index 4e5ce7a595..ca06762e23 100644
--- a/canon-docs/src/components/Toolbar/theme-name.module.css
+++ b/canon-docs/src/components/Toolbar/theme-name.module.css
@@ -48,9 +48,7 @@
   border: 1px solid var(--border);
   padding-inline: 0.25rem;
   transform-origin: var(--transform-origin);
-  transition:
-    transform 150ms,
-    opacity 150ms;
+  transition: transform 150ms, opacity 150ms;
 
   &[data-starting-style],
   &[data-ending-style] {
@@ -66,8 +64,7 @@
 
   @media (prefers-color-scheme: light) {
     outline: 1px solid var(--color-gray-200);
-    box-shadow:
-      0px 10px 15px -3px var(--color-gray-200),
+    box-shadow: 0px 10px 15px -3px var(--color-gray-200),
       0px 4px 6px -4px var(--color-gray-200);
   }
 
diff --git a/canon-docs/src/components/Toolbar/theme-name.tsx b/canon-docs/src/components/Toolbar/theme-name.tsx
index 07b734de34..6b35d0efcc 100644
--- a/canon-docs/src/components/Toolbar/theme-name.tsx
+++ b/canon-docs/src/components/Toolbar/theme-name.tsx
@@ -6,8 +6,7 @@ import { Icon } from '@backstage/canon';
 import { usePlayground } from '@/utils/playground-context';
 
 const themes = [
-  { name: 'Backstage Default', value: 'default' },
-  { name: 'Backstage Legacy', value: 'legacy' },
+  { name: 'Backstage', value: 'default' },
   { name: 'Custom theme', value: 'custom' },
 ];
 
diff --git a/canon-docs/src/components/Toolbar/theme.module.css b/canon-docs/src/components/Toolbar/theme.module.css
index 993ea8ba81..37ccb25249 100644
--- a/canon-docs/src/components/Toolbar/theme.module.css
+++ b/canon-docs/src/components/Toolbar/theme.module.css
@@ -2,18 +2,14 @@
   border-radius: 0.375rem;
   width: 100%;
   background-color: var(--bg);
-  transition:
-    background-color 0.2s ease-in-out,
-    color 0.2s ease-in-out;
+  transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
 }
 
 .tabsTheme {
   width: 100px;
   border-radius: 0.375rem;
   background-color: var(--bg);
-  transition:
-    background-color 0.2s ease-in-out,
-    color 0.2s ease-in-out;
+  transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
 }
 
 .list {
diff --git a/canon-docs/src/css/globals.css b/canon-docs/src/css/globals.css
index 02b1b2c5ba..d7e64c3341 100644
--- a/canon-docs/src/css/globals.css
+++ b/canon-docs/src/css/globals.css
@@ -63,9 +63,7 @@ iframe {
 .ͼ2 .cm-gutters {
   background-color: var(--bg);
   border-right: 1px solid var(--border);
-  transition:
-    background-color 0.2s ease-in-out,
-    border-color 0.2s ease-in-out;
+  transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
 }
 
 .ͼ1 .cm-lineNumbers .cm-gutterElement {
diff --git a/canon-docs/src/snippets/box.tsx b/canon-docs/src/snippets/box.tsx
index 9d4e000bd7..2a99ebee7d 100644
--- a/canon-docs/src/snippets/box.tsx
+++ b/canon-docs/src/snippets/box.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { Box } from '@backstage/canon';
+import { Box } from '../../../packages/canon';
 
 export const BoxPreview = () => {
   return (
diff --git a/canon-docs/src/snippets/button.tsx b/canon-docs/src/snippets/button.tsx
index b19616a4b9..2ae2ab0be9 100644
--- a/canon-docs/src/snippets/button.tsx
+++ b/canon-docs/src/snippets/button.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { Button, Flex, ButtonProps, Text } from '@backstage/canon';
+import { Button, Flex, ButtonProps, Text } from '../../../packages/canon';
 
 export const ButtonPreview = () => {
   return (
diff --git a/canon-docs/src/snippets/checkbox.tsx b/canon-docs/src/snippets/checkbox.tsx
index 2f86929107..fe2a5b0219 100644
--- a/canon-docs/src/snippets/checkbox.tsx
+++ b/canon-docs/src/snippets/checkbox.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { Checkbox, Flex, Text } from '@backstage/canon';
+import { Checkbox, Flex, Text } from '../../../packages/canon';
 
 export const CheckboxPreview = () => {
   return <Checkbox label="Accept terms and conditions" />;
diff --git a/canon-docs/src/snippets/container.tsx b/canon-docs/src/snippets/container.tsx
index bc356c18f2..27c0ba9922 100644
--- a/canon-docs/src/snippets/container.tsx
+++ b/canon-docs/src/snippets/container.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { Box, Container } from '@backstage/canon';
+import { Box, Container } from '../../../packages/canon';
 
 const DecorativeBox = () => (
   <Box
diff --git a/canon-docs/src/snippets/field.tsx b/canon-docs/src/snippets/field.tsx
index f672db01c4..e801d85641 100644
--- a/canon-docs/src/snippets/field.tsx
+++ b/canon-docs/src/snippets/field.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { Input, Field } from '@backstage/canon';
+import { Input, Field } from '../../../packages/canon';
 
 export const FieldPreview = () => {
   return (
diff --git a/canon-docs/src/snippets/flex.tsx b/canon-docs/src/snippets/flex.tsx
index 4d45d67d86..8bfab8878e 100644
--- a/canon-docs/src/snippets/flex.tsx
+++ b/canon-docs/src/snippets/flex.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { Flex } from '@backstage/canon';
+import { Flex } from '../../../packages/canon';
 
 const DecorativeBox = () => {
   return (
diff --git a/canon-docs/src/snippets/grid.tsx b/canon-docs/src/snippets/grid.tsx
index 4e4668583e..87012b7630 100644
--- a/canon-docs/src/snippets/grid.tsx
+++ b/canon-docs/src/snippets/grid.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { Box, Grid } from '@backstage/canon';
+import { Box, Grid } from '../../../packages/canon';
 
 const FakeBox = () => (
   <Box
diff --git a/canon-docs/src/snippets/heading.tsx b/canon-docs/src/snippets/heading.tsx
index 3edbbd65dc..484497e7a7 100644
--- a/canon-docs/src/snippets/heading.tsx
+++ b/canon-docs/src/snippets/heading.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { Heading, Flex, Text } from '@backstage/canon';
+import { Heading, Flex, Text } from '../../../packages/canon';
 
 export const HeadingPreview = () => {
   return <Heading>Look mum, no hands!</Heading>;
diff --git a/canon-docs/src/snippets/icon.tsx b/canon-docs/src/snippets/icon.tsx
index 532bf63b12..126dbaf686 100644
--- a/canon-docs/src/snippets/icon.tsx
+++ b/canon-docs/src/snippets/icon.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { Icon } from '@backstage/canon';
+import { Icon } from '../../../packages/canon';
 
 export const IconPreview = () => {
   return <Icon name="heart" />;
diff --git a/canon-docs/src/snippets/inline.tsx b/canon-docs/src/snippets/inline.tsx
index 501ca4c786..43fd56c650 100644
--- a/canon-docs/src/snippets/inline.tsx
+++ b/canon-docs/src/snippets/inline.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { Box, Flex } from '@backstage/canon';
+import { Box, Flex } from '../../../packages/canon';
 
 const fakeBlockList = [
   { width: 45, height: 60 },
diff --git a/canon-docs/src/snippets/input.tsx b/canon-docs/src/snippets/input.tsx
index d1bc3ef364..69d0b62b7f 100644
--- a/canon-docs/src/snippets/input.tsx
+++ b/canon-docs/src/snippets/input.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { Input, Grid } from '@backstage/canon';
+import { Input, Grid } from '../../../packages/canon';
 
 export const InputPreview = () => {
   return (
diff --git a/canon-docs/src/snippets/text.tsx b/canon-docs/src/snippets/text.tsx
index 211e6fb877..4d39cbf6dd 100644
--- a/canon-docs/src/snippets/text.tsx
+++ b/canon-docs/src/snippets/text.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { Flex, Text } from '@backstage/canon';
+import { Flex, Text } from '../../../packages/canon';
 
 export const TextPreview = () => {
   return (