Update imports

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

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 }) => {

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 = ({

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';
 

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 {

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 {

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 = () => {

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 = {

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;
   }
 }

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)}

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 = ({

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 {

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);
   }
 

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' },
 ];
 

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 {

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 {

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 (

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 (

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" />;

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

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 (

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 (

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

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>;

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" />;

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 },

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 (

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 (