{children}
;
-}
diff --git a/canon-docs/src/app/(docs)/page.mdx b/canon-docs/src/app/(docs)/page.mdx
deleted file mode 100644
index 862127ec7b..0000000000
--- a/canon-docs/src/app/(docs)/page.mdx
+++ /dev/null
@@ -1,51 +0,0 @@
-import { CodeBlock } from '@/components/CodeBlock';
-
-
-
-Welcome to the Canon, the new design library for Backstage plugins. This
-project is still under active development but we will make sure to document
-the API as we go. We are aiming to improve the general UI of Backstage and
-plugins across Backstage. This new library will take time to build but we are
-building it incrementally with not conflict with the existing theming system.
-
-## Installation
-
-### 1. Install canon
-
-Install Canon using a package manager.
-
-
-
- );
- }
-
- return (
-
- {filteredScreenSizes.map(screenSize => (
-
- );
-}
-
-const Content = () => {
- const { selectedComponents } = usePlayground();
-
- return (
-
-
- {screenSize.title} - {screenSize.width}px
-
-
- ))}
-
-
-
-
-
-
-
- - We recommend starting with our{' '} - - global tokens - {' '} - to customize the library and align it with your brand. For - additional flexibility, you can use the provided class names for - each element listed below. -
-{section.title}
-
- {section.content.map(item => {
- const isActive = pathname === `${section.url}/${item.slug}`;
-
- return (
-
- {item.title}
-
- {item.status === 'alpha' && 'Alpha'}
- {item.status === 'beta' && 'Beta'}
- {item.status === 'inProgress' && 'In Progress'}
- {item.status === 'stable' && 'Stable'}
- {item.status === 'deprecated' && 'Deprecated'}
-
-
- );
- })}
-
-
-
-
-
-
-
-
- );
-};
diff --git a/canon-docs/src/components/Sidebar/playground.tsx b/canon-docs/src/components/Sidebar/playground.tsx
deleted file mode 100644
index eb1c3213cc..0000000000
--- a/canon-docs/src/components/Sidebar/playground.tsx
+++ /dev/null
@@ -1,78 +0,0 @@
-'use client';
-
-import { components } from '@/utils/data';
-import { Checkbox } from '@backstage/canon';
-import { motion } from 'motion/react';
-import styles from './Sidebar.module.css';
-import { usePathname } from 'next/navigation';
-import { screenSizes } from '@/utils/data';
-import { usePlayground } from '@/utils/playground-context';
-
-export const Playground = () => {
- const pathname = usePathname();
- const isPlayground = pathname.includes('/playground');
- const {
- selectedScreenSizes,
- setSelectedScreenSizes,
- selectedComponents,
- setSelectedComponents,
- } = usePlayground();
-
- const handleComponentCheckboxChange = (slug: string) => {
- if (selectedComponents.find(item => item === slug)) {
- const res = selectedComponents.filter(item => item !== slug);
- setSelectedComponents(res);
- } else {
- setSelectedComponents([...selectedComponents, slug]);
- }
- };
-
- const handleCheckboxChange = (slug: string) => {
- if (selectedScreenSizes.find(item => item === slug)) {
- const res = selectedScreenSizes.filter(item => item !== slug);
- setSelectedScreenSizes(res);
- } else {
- setSelectedScreenSizes([...selectedScreenSizes, slug]);
- }
- };
-
- return (
-
-
-
-
-
-
-
-
-
- Components
- {components.map(({ slug, title }) => (
-
- handleComponentCheckboxChange(slug)}
- />
-
- ))}
- {title}
- Screen sizes
- {screenSizes.map(({ slug, title }) => (
-
- handleCheckboxChange(slug)}
- />
-
- ))}
- {title}
-
-
- );
-};
diff --git a/canon-docs/src/components/Toolbar/nav.module.css b/canon-docs/src/components/Toolbar/nav.module.css
deleted file mode 100644
index 95228fa917..0000000000
--- a/canon-docs/src/components/Toolbar/nav.module.css
+++ /dev/null
@@ -1,78 +0,0 @@
-.tabs {
- display: none;
-}
-
-@media (min-width: 768px) {
- .tabs {
- display: block;
- height: 60px;
- }
-}
-
-.tabsTheme {
- width: 142px;
- border-radius: 0.375rem;
- background-color: var(--bg);
- transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
-}
-
-.list {
- display: flex;
- position: relative;
- z-index: 0;
- gap: var(--canon-space-8);
-}
-
-.tab {
- all: unset;
- height: 60px;
- color: var(--secondary);
- font-size: var(--canon-font-size-3);
- font-weight: var(--canon-font-weight-bold);
- cursor: pointer;
- transition: color 0.2s ease-in-out;
-
- &:hover {
- color: var(--primary);
- }
-
- &[data-selected] {
- color: var(--primary);
-
- & p {
- color: var(--primary);
- }
- }
-
- &:focus-visible {
- position: relative;
-
- &::before {
- content: '';
- position: absolute;
- inset: 0.25rem 0;
- border-radius: 0.25rem;
- outline: 2px solid var(--panel);
- outline-offset: -1px;
- }
- }
-}
-
-.tab p {
- color: var(--secondary) !important;
-}
-
-.indicator {
- position: absolute;
- z-index: -1;
- left: 0;
- bottom: -1px;
- translate: var(--active-tab-left) -50%;
- width: var(--active-tab-width);
- height: 1px;
- border-radius: 0.25rem;
- background-color: var(--primary);
- transition-property: translate, width, background-color;
- transition-duration: 200ms;
- transition-timing-function: ease-in-out;
-}
diff --git a/canon-docs/src/components/Toolbar/nav.tsx b/canon-docs/src/components/Toolbar/nav.tsx
deleted file mode 100644
index 017599581e..0000000000
--- a/canon-docs/src/components/Toolbar/nav.tsx
+++ /dev/null
@@ -1,49 +0,0 @@
-'use client';
-
-import { Tabs } from '@base-ui-components/react/tabs';
-import { usePathname } from 'next/navigation';
-import { useRouter } from 'next/navigation';
-import styles from './nav.module.css';
-
-export const Nav = () => {
- const pathname = usePathname();
- const router = useRouter();
-
- const onValueChange = (value: string) => {
- if (value === 'docs') {
- router.push('/');
- } else {
- router.push('/playground');
- }
- };
-
- return (
-
-
-
-
-
- ` element.
-
-
` element.
-
-