{children}
;
+}
diff --git a/canon-docs/src/app/(docs)/page.mdx b/canon-docs/src/app/(docs)/page.mdx
new file mode 100644
index 0000000000..09d4d83ea3
--- /dev/null
+++ b/canon-docs/src/app/(docs)/page.mdx
@@ -0,0 +1,64 @@
+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
+
+
+ ))}
+
+
+
+
+
+ {children}
+
+
+ );
+};
diff --git a/canon-docs/src/components/Banner/index.ts b/canon-docs/src/components/Banner/index.ts
new file mode 100644
index 0000000000..31f4aa88b0
--- /dev/null
+++ b/canon-docs/src/components/Banner/index.ts
@@ -0,0 +1,16 @@
+/*
+ * Copyright 2024 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+export { Banner } from './Banner';
diff --git a/canon-docs/src/components/Banner/styles.module.css b/canon-docs/src/components/Banner/styles.module.css
new file mode 100644
index 0000000000..9666c5d521
--- /dev/null
+++ b/canon-docs/src/components/Banner/styles.module.css
@@ -0,0 +1,41 @@
+.banner {
+ display: flex;
+ align-items: center;
+ font-size: 16px;
+ line-height: 28px;
+ padding: 16px;
+ border-radius: 6px;
+ margin-bottom: 16px;
+ border: 1px solid #e0e0e0;
+
+ & > p {
+ margin: 0;
+ }
+}
+
+.info {
+ background-color: #f2f2f2;
+ border-color: #cdcdcd;
+ color: #888888;
+}
+
+.warning {
+ background-color: #fff2b9;
+ border-color: #ffd000;
+ color: #d79927;
+}
+
+.icon {
+ width: 32px;
+ height: 32px;
+ background-color: rgba(215, 153, 39, 0.2);
+ border-radius: 6px;
+ margin-right: 16px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+.text {
+ line-height: 1.5;
+}
diff --git a/canon-docs/src/components/Chip/Chip.tsx b/canon-docs/src/components/Chip/Chip.tsx
new file mode 100644
index 0000000000..d6a74502e0
--- /dev/null
+++ b/canon-docs/src/components/Chip/Chip.tsx
@@ -0,0 +1,32 @@
+/*
+ * Copyright 2024 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from 'react';
+import styles from './styles.module.css';
+
+export const Chip = ({
+ children,
+ head = false,
+}: {
+ children: React.ReactNode;
+ head?: boolean;
+}) => {
+ return (
+
+ {children}
+
+ );
+};
diff --git a/canon-docs/src/components/Chip/index.ts b/canon-docs/src/components/Chip/index.ts
new file mode 100644
index 0000000000..ff9e4794c5
--- /dev/null
+++ b/canon-docs/src/components/Chip/index.ts
@@ -0,0 +1,16 @@
+/*
+ * Copyright 2024 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+export { Chip } from './Chip';
diff --git a/canon-docs/src/components/Chip/styles.module.css b/canon-docs/src/components/Chip/styles.module.css
new file mode 100644
index 0000000000..44337afb0a
--- /dev/null
+++ b/canon-docs/src/components/Chip/styles.module.css
@@ -0,0 +1,43 @@
+/*
+ * Copyright 2024 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+.chip {
+ display: inline-flex;
+ align-items: center;
+ font-family: monospace;
+ font-size: 13px;
+ border-radius: 6px;
+ padding: 0px 8px;
+ height: 24px;
+ margin-right: 4px;
+ background-color: #f0f0f0;
+ color: #5d5d5d;
+ transition: background-color 0.2s ease-in-out;
+}
+
+.head {
+ background-color: #eaf2fd;
+ color: #2563eb;
+}
+
+[data-theme='dark'] .chip {
+ background-color: #2c2c2c;
+ color: #fff;
+}
+
+[data-theme='dark'] .chip.head {
+ background-color: #26417b;
+}
diff --git a/canon-docs/src/components/CodeBlock/index.tsx b/canon-docs/src/components/CodeBlock/index.tsx
new file mode 100644
index 0000000000..bbcf4d63da
--- /dev/null
+++ b/canon-docs/src/components/CodeBlock/index.tsx
@@ -0,0 +1,32 @@
+import React from 'react';
+import type { BundledLanguage } from 'shiki';
+import { codeToHtml } from 'shiki';
+import { Text } from '../../../../packages/canon/src/components/Text';
+import styles from './styles.module.css';
+
+interface CodeBlockProps {
+ lang?: BundledLanguage;
+ title?: string;
+ code?: string;
+}
+
+export async function CodeBlock({ lang = 'tsx', title, code }: CodeBlockProps) {
+ const out = await codeToHtml(code || '', {
+ lang: lang,
+ themes: {
+ light: 'min-light',
+ dark: 'min-dark',
+ },
+ });
+
+ return (
+
+
+
+ {text}
+
+ {title && (
+
+ );
+}
diff --git a/canon-docs/src/components/CodeBlock/styles.module.css b/canon-docs/src/components/CodeBlock/styles.module.css
new file mode 100644
index 0000000000..e74714e07c
--- /dev/null
+++ b/canon-docs/src/components/CodeBlock/styles.module.css
@@ -0,0 +1,26 @@
+.codeBlock {
+ border-radius: 4px;
+ border: 1px solid var(--canon-border-base);
+ position: relative;
+ background: transparent;
+ overflow-x: auto;
+ font-family: var(--canon-font-monospace);
+ background-color: #fff;
+ transition: background-color 0.2s ease-in-out;
+ margin-bottom: 1rem;
+}
+
+[data-theme='dark'] .codeBlock {
+ background-color: #121212;
+}
+
+.title {
+ border-bottom: 1px solid var(--canon-border-base);
+ padding: 12px 20px;
+ font-size: 0.875rem;
+ color: var(--canon-text-secondary);
+}
+
+.code {
+ padding: 20px;
+}
diff --git a/canon-docs/src/components/Columns/Columns.tsx b/canon-docs/src/components/Columns/Columns.tsx
new file mode 100644
index 0000000000..115ec50010
--- /dev/null
+++ b/canon-docs/src/components/Columns/Columns.tsx
@@ -0,0 +1,31 @@
+/*
+ * Copyright 2024 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from 'react';
+
+export const Columns = ({
+ children,
+ style,
+}: {
+ children: React.ReactNode;
+ style?: React.CSSProperties;
+}) => {
+ return (
+
+ {title}
+
+ )}
+
+
+ {children}
+
+ );
+};
diff --git a/canon-docs/src/components/Columns/index.ts b/canon-docs/src/components/Columns/index.ts
new file mode 100644
index 0000000000..05de0850be
--- /dev/null
+++ b/canon-docs/src/components/Columns/index.ts
@@ -0,0 +1,16 @@
+/*
+ * Copyright 2024 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+export { Columns } from './Columns';
diff --git a/canon-docs/src/components/Columns/styles.css b/canon-docs/src/components/Columns/styles.css
new file mode 100644
index 0000000000..c34acfc406
--- /dev/null
+++ b/canon-docs/src/components/Columns/styles.css
@@ -0,0 +1,22 @@
+/*
+ * Copyright 2024 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+.columns {
+ display: grid;
+ grid-template-columns: repeat(3, 1fr);
+ row-gap: 20px;
+ column-gap: 80px;
+}
diff --git a/canon-docs/src/components/DecorativeBox/index.tsx b/canon-docs/src/components/DecorativeBox/index.tsx
new file mode 100644
index 0000000000..a5c20725bc
--- /dev/null
+++ b/canon-docs/src/components/DecorativeBox/index.tsx
@@ -0,0 +1,5 @@
+import styles from './styles.module.css';
+
+export const DecorativeBox = () => {
+ return ;
+};
diff --git a/canon-docs/src/components/DecorativeBox/styles.module.css b/canon-docs/src/components/DecorativeBox/styles.module.css
new file mode 100644
index 0000000000..84a6b579a0
--- /dev/null
+++ b/canon-docs/src/components/DecorativeBox/styles.module.css
@@ -0,0 +1,8 @@
+.box {
+ min-width: 64px;
+ min-height: 64px;
+ background-color: #eaf2fd;
+ border-radius: 4px;
+ box-shadow: 0 0 0 1px #2563eb;
+ background-image: url("data:image/svg+xml,%3Csvg width='6' height='6' viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%232563eb' fill-opacity='0.3' fill-rule='evenodd'%3E%3Cpath d='M5 0h1L0 6V5zM6 5v1H5z'/%3E%3C/g%3E%3C/svg%3E");
+}
diff --git a/canon-docs/src/components/Frame/index.tsx b/canon-docs/src/components/Frame/index.tsx
new file mode 100644
index 0000000000..c7e930df74
--- /dev/null
+++ b/canon-docs/src/components/Frame/index.tsx
@@ -0,0 +1,33 @@
+/* eslint-disable @next/next/no-css-tags */
+'use client';
+
+import { useEffect, useState } from 'react';
+import ReactFrame from 'react-frame-component';
+
+export const Frame = ({ children }: { children: React.ReactNode }) => {
+ const [show, setShow] = useState(false);
+
+ useEffect(() => {
+ setShow(true);
+ }, []);
+
+ if (!show) return null;
+
+ return (
+
+
+
+ );
+};
diff --git a/canon-docs/src/components/HeadlessBanners/styles.module.css b/canon-docs/src/components/HeadlessBanners/styles.module.css
new file mode 100644
index 0000000000..c8eb2bc68d
--- /dev/null
+++ b/canon-docs/src/components/HeadlessBanners/styles.module.css
@@ -0,0 +1,42 @@
+.container {
+ display: flex;
+ background-color: var(--canon-surface-1);
+ padding: var(--canon-spacing-md);
+ border-radius: var(--canon-border-radius-xs);
+ border: 1px solid var(--canon-border-base);
+ margin-bottom: var(--canon-spacing-md);
+ gap: var(--canon-spacing-md);
+ transition: background-color 0.2s ease-in-out;
+}
+
+.icon path {
+ fill: var(--canon-text-primary);
+}
+
+.content {
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+}
+
+.description {
+ max-width: 700px;
+}
+
+.button {
+ all: unset;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ cursor: pointer;
+ background-color: var(--canon-surface-2);
+ border: 1px solid var(--canon-border-base);
+ border-radius: var(--canon-border-radius-xs);
+ padding: 0 var(--canon-spacing-xs);
+ height: 28px;
+ border-radius: 100px;
+ margin-top: var(--canon-spacing-xs);
+ font-size: var(--canon-font-size-body);
+ color: var(--canon-text-primary);
+ gap: var(--canon-spacing-2xs);
+}
diff --git a/canon-docs/src/components/IconLibrary/IconLibrary.tsx b/canon-docs/src/components/IconLibrary/IconLibrary.tsx
new file mode 100644
index 0000000000..b8ca8acdea
--- /dev/null
+++ b/canon-docs/src/components/IconLibrary/IconLibrary.tsx
@@ -0,0 +1,39 @@
+/*
+ * Copyright 2024 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from 'react';
+import { Icon } from '../../../../packages/canon/src/components/Icon';
+import type { IconNames } from '../../../../packages/canon/src/components/Icon';
+import { Text } from '../../../../packages/canon/src/components/Text';
+import { icons } from '../../../../packages/canon/src/components/Icon/icons';
+import styles from './styles.module.css';
+
+export const IconLibrary = () => {
+ const list = Object.keys(icons);
+
+ return (
+
+
+ Base UI
+
+
+
+
+ This component is using Base UI under the hood. While most of the
+ original props are available, we have made some changes to the API
+ to fit our needs.
+
+
+ {href && (
+
+ Discover more
+
+ {list.map(icon => (
+
+ );
+};
diff --git a/canon-docs/src/components/IconLibrary/index.ts b/canon-docs/src/components/IconLibrary/index.ts
new file mode 100644
index 0000000000..071c80db85
--- /dev/null
+++ b/canon-docs/src/components/IconLibrary/index.ts
@@ -0,0 +1,16 @@
+/*
+ * Copyright 2024 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+export { IconLibrary } from './IconLibrary';
diff --git a/canon-docs/src/components/IconLibrary/styles.module.css b/canon-docs/src/components/IconLibrary/styles.module.css
new file mode 100644
index 0000000000..40b177ced0
--- /dev/null
+++ b/canon-docs/src/components/IconLibrary/styles.module.css
@@ -0,0 +1,28 @@
+.library {
+ display: grid;
+ grid-template-columns: repeat(6, 1fr);
+ gap: 1rem;
+}
+
+.item {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 8px;
+}
+
+.icon {
+ display: flex;
+ width: 100%;
+ justify-content: center;
+ align-items: center;
+ height: 80px;
+ border: 1px solid #d3d3d3;
+ border-radius: 0.5rem;
+ background-color: var(--canon-background);
+ transition: background-color 0.2s ease-in-out;
+
+ &:hover {
+ background-color: var(--canon-surface-1);
+ }
+}
diff --git a/canon-docs/src/components/LayoutComponents/LayoutComponents.module.css b/canon-docs/src/components/LayoutComponents/LayoutComponents.module.css
new file mode 100644
index 0000000000..0e42bc6fb6
--- /dev/null
+++ b/canon-docs/src/components/LayoutComponents/LayoutComponents.module.css
@@ -0,0 +1,58 @@
+/*
+ * Copyright 2024 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+.layoutComponents {
+ display: flex;
+ justify-content: flex-start;
+ gap: 1rem;
+ flex-wrap: wrap;
+
+ & .box {
+ display: flex;
+ flex-direction: column;
+ width: calc(33.33% - 0.67rem);
+ margin-bottom: 1rem;
+ align-items: flex-start;
+ }
+
+ & .content {
+ flex: none;
+ background-color: #fff;
+ border-radius: 4px;
+ width: 100%;
+ height: 180px;
+ transition: all 0.2s ease-in-out;
+ margin-bottom: 0.75rem;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+
+ &:hover {
+ transform: translateY(-4px);
+ }
+ }
+
+ & .title {
+ font-size: 16px;
+ transition: color 0.2s ease-in-out;
+ margin-bottom: 0.25rem;
+ }
+
+ & .description {
+ font-size: 16px;
+ color: #9e9e9e;
+ }
+}
diff --git a/canon-docs/src/components/LayoutComponents/LayoutComponents.tsx b/canon-docs/src/components/LayoutComponents/LayoutComponents.tsx
new file mode 100644
index 0000000000..7262b837b3
--- /dev/null
+++ b/canon-docs/src/components/LayoutComponents/LayoutComponents.tsx
@@ -0,0 +1,60 @@
+import React from 'react';
+import { BoxSvg } from './svgs/box';
+import { StackSvg } from './svgs/stack';
+import { GridSvg } from './svgs/grid';
+import { InlineSvg } from './svgs/inline';
+import { ContainerSvg } from './svgs/container';
+import styles from './LayoutComponents.module.css';
+import Link from 'next/link';
+
+export const LayoutComponents = () => {
+ return (
+
+ {icon}
+
+ ))}
+
+
+
+
+ );
+};
diff --git a/canon-docs/src/components/LayoutComponents/index.ts b/canon-docs/src/components/LayoutComponents/index.ts
new file mode 100644
index 0000000000..55cc9f25ef
--- /dev/null
+++ b/canon-docs/src/components/LayoutComponents/index.ts
@@ -0,0 +1,16 @@
+/*
+ * Copyright 2024 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+export { LayoutComponents } from './LayoutComponents';
diff --git a/canon-docs/src/components/LayoutComponents/svgs/box.tsx b/canon-docs/src/components/LayoutComponents/svgs/box.tsx
new file mode 100644
index 0000000000..5b90f971c3
--- /dev/null
+++ b/canon-docs/src/components/LayoutComponents/svgs/box.tsx
@@ -0,0 +1,54 @@
+/*
+ * Copyright 2024 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import React from 'react';
+
+export const BoxSvg = () => {
+ return (
+
+ );
+};
diff --git a/canon-docs/src/components/LayoutComponents/svgs/container.tsx b/canon-docs/src/components/LayoutComponents/svgs/container.tsx
new file mode 100644
index 0000000000..5a8fe77af3
--- /dev/null
+++ b/canon-docs/src/components/LayoutComponents/svgs/container.tsx
@@ -0,0 +1,372 @@
+/*
+ * Copyright 2024 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import React from 'react';
+
+export const ContainerSvg = () => {
+ return (
+
+ );
+};
diff --git a/canon-docs/src/components/LayoutComponents/svgs/grid.tsx b/canon-docs/src/components/LayoutComponents/svgs/grid.tsx
new file mode 100644
index 0000000000..ef071c9c91
--- /dev/null
+++ b/canon-docs/src/components/LayoutComponents/svgs/grid.tsx
@@ -0,0 +1,91 @@
+/*
+ * Copyright 2024 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import React from 'react';
+
+export const GridSvg = () => {
+ return (
+
+ );
+};
diff --git a/canon-docs/src/components/LayoutComponents/svgs/inline.tsx b/canon-docs/src/components/LayoutComponents/svgs/inline.tsx
new file mode 100644
index 0000000000..ecbff566db
--- /dev/null
+++ b/canon-docs/src/components/LayoutComponents/svgs/inline.tsx
@@ -0,0 +1,92 @@
+/*
+ * Copyright 2024 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import React from 'react';
+
+export const InlineSvg = () => {
+ return (
+
+ );
+};
diff --git a/canon-docs/src/components/LayoutComponents/svgs/stack.tsx b/canon-docs/src/components/LayoutComponents/svgs/stack.tsx
new file mode 100644
index 0000000000..c54cba57cf
--- /dev/null
+++ b/canon-docs/src/components/LayoutComponents/svgs/stack.tsx
@@ -0,0 +1,82 @@
+/*
+ * Copyright 2024 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import React from 'react';
+
+export const StackSvg = () => {
+ return (
+
+ );
+};
diff --git a/canon-docs/src/components/PropsTable/PropsTable.tsx b/canon-docs/src/components/PropsTable/PropsTable.tsx
new file mode 100644
index 0000000000..6eb1f8cd88
--- /dev/null
+++ b/canon-docs/src/components/PropsTable/PropsTable.tsx
@@ -0,0 +1,47 @@
+import React from 'react';
+import * as Table from '../Table';
+import { Chip } from '../Chip';
+
+// Define a more specific type for the data object
+type PropData = {
+ type: string | string[];
+ responsive: boolean;
+};
+
+// Modify the PropsTable component to use the new type
+export const PropsTable =
+
+
+ Box
+
+ The most basic layout component
+
+
+
+
+ Stack
+
+ Arrange your components vertically
+
+
+
+
+ Grid
+
+ Arrange your components in a grid
+
+
+
+
+ Inline
+
+ Arrange your components in a row
+
+
+
+
+ Container
+
+ A container for your components
+
+
+ {list
+ .sort(
+ (a, b) => orderList.indexOf(a.status) - orderList.indexOf(b.status),
+ )
+ .map(Item)}
+
+ );
+};
+
+const Item = ({
+ title,
+ status = 'notStarted',
+}: {
+ title: string;
+ status: 'notStarted' | 'inProgress' | 'inReview' | 'completed';
+}) => {
+ return (
+
+
+ );
+};
diff --git a/canon-docs/src/components/Roadmap/index.ts b/canon-docs/src/components/Roadmap/index.ts
new file mode 100644
index 0000000000..ac51dfa1ed
--- /dev/null
+++ b/canon-docs/src/components/Roadmap/index.ts
@@ -0,0 +1,16 @@
+/*
+ * Copyright 2024 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+export { Roadmap } from './Roadmap';
diff --git a/canon-docs/src/components/Roadmap/list.ts b/canon-docs/src/components/Roadmap/list.ts
new file mode 100644
index 0000000000..d5f436281a
--- /dev/null
+++ b/canon-docs/src/components/Roadmap/list.ts
@@ -0,0 +1,62 @@
+/*
+ * Copyright 2024 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+export type RoadmapItem = {
+ title: string;
+ status: 'notStarted' | 'inProgress' | 'inReview' | 'completed';
+};
+
+export const list: RoadmapItem[] = [
+ {
+ title: 'Remove Vanilla Extract and use pure CSS instead',
+ status: 'inProgress',
+ },
+ {
+ title: 'Add collapsing across breakpoints for the Inline component',
+ status: 'notStarted',
+ },
+ {
+ title: 'Add reversing the order for the Inline component',
+ status: 'notStarted',
+ },
+ {
+ title: 'Set up Storybook',
+ status: 'completed',
+ },
+ {
+ title: 'Set up iconography',
+ status: 'completed',
+ },
+ {
+ title: 'Set up global tokens',
+ status: 'inProgress',
+ },
+ {
+ title: 'Set up theming system',
+ status: 'inProgress',
+ },
+ {
+ title: 'Create first pass at box component',
+ status: 'completed',
+ },
+ {
+ title: 'Create first pass at stack component',
+ status: 'completed',
+ },
+ {
+ title: 'Create first pass at inline component',
+ status: 'completed',
+ },
+];
diff --git a/canon-docs/src/components/Roadmap/styles.css b/canon-docs/src/components/Roadmap/styles.css
new file mode 100644
index 0000000000..63f32312e7
--- /dev/null
+++ b/canon-docs/src/components/Roadmap/styles.css
@@ -0,0 +1,100 @@
+.roadmap {
+ display: flex;
+ flex-direction: column;
+}
+
+.roadmap .roadmap-item {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ border-bottom: 1px solid #e0e0e0;
+ padding: 8px 0px;
+}
+
+.roadmap .roadmap-item .left {
+ display: flex;
+ align-items: center;
+ padding-left: 12px;
+ gap: 12px;
+}
+
+.roadmap .roadmap-item .dot {
+ width: 8px;
+ height: 8px;
+ border-radius: 50%;
+ background-color: #e0e0e0;
+}
+
+.roadmap .roadmap-item.notStarted {
+ color: #000;
+}
+
+.roadmap .roadmap-item.inProgress {
+ color: #000;
+}
+
+.roadmap .roadmap-item.inReview {
+ color: #000;
+}
+
+.roadmap .roadmap-item.completed .title {
+ color: #a2a2a2;
+ text-decoration: line-through;
+}
+
+.roadmap .roadmap-item.notStarted .dot {
+ background-color: #d1d1d1;
+}
+
+.roadmap .roadmap-item.inProgress .dot {
+ background-color: #ffd000;
+}
+
+.roadmap .roadmap-item.inReview .dot {
+ background-color: #4ed14a;
+}
+
+.roadmap .roadmap-item.completed .dot {
+ background-color: #4ed14a;
+}
+
+.roadmap .roadmap-item .title {
+ font-size: 16px;
+}
+
+.roadmap .roadmap-item .pill {
+ display: inline-flex;
+ align-items: center;
+ height: 24px;
+ padding: 0px 8px;
+ border-radius: 40px;
+ font-size: 12px;
+ font-weight: 600;
+ margin-left: 8px;
+ border-style: solid;
+ border-width: 1px;
+}
+
+.roadmap .roadmap-item.notStarted .pill {
+ background-color: #f2f2f2;
+ border-color: #cdcdcd;
+ color: #888888;
+}
+
+.roadmap .roadmap-item.inProgress .pill {
+ background-color: #fff2b9;
+ border-color: #ffd000;
+ color: #d79927;
+}
+
+.roadmap .roadmap-item.inReview .pill {
+ background-color: #d7f9d7;
+ border-color: #4ed14a;
+ color: #3a9837;
+}
+
+.roadmap .roadmap-item.completed .pill {
+ background-color: #d7f9d7;
+ border-color: #4ed14a;
+ color: #3a9837;
+}
diff --git a/canon-docs/src/components/Sidebar/Sidebar.module.css b/canon-docs/src/components/Sidebar/Sidebar.module.css
new file mode 100644
index 0000000000..809f1b560b
--- /dev/null
+++ b/canon-docs/src/components/Sidebar/Sidebar.module.css
@@ -0,0 +1,67 @@
+.sidebar {
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 300px;
+ height: 100vh;
+ color: var(--canon-text-primary);
+ background-color: var(--canon-surface-1);
+ border-right: 1px solid var(--canon-border-base);
+ padding-left: 20px;
+ padding-right: 20px;
+ transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
+ overflow: hidden;
+}
+
+.logo path {
+ fill: var(--canon-text-primary);
+}
+
+.content {
+ padding-top: 20px;
+}
+
+.actions {
+ display: flex;
+ flex-direction: row;
+ gap: 12px;
+ margin-top: 20px;
+ margin-bottom: 12px;
+}
+
+.menu {
+ display: flex;
+ flex-direction: row;
+ position: relative;
+}
+
+.menu a {
+ display: flex;
+ text-decoration: none;
+ height: 28px;
+ align-items: center;
+}
+
+.section {
+ width: 100%;
+}
+
+.line {
+ width: 100%;
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
+ align-items: center;
+ height: 28px;
+ padding: 0 12px;
+ border-radius: 4px;
+ transition: background-color 0.2s ease-in-out;
+
+ &:hover {
+ background-color: var(--canon-surface-2);
+ }
+}
+
+.line.active {
+ background-color: var(--canon-surface-2);
+}
diff --git a/canon-docs/src/components/Sidebar/Tabs.module.css b/canon-docs/src/components/Sidebar/Tabs.module.css
new file mode 100644
index 0000000000..e74b47853a
--- /dev/null
+++ b/canon-docs/src/components/Sidebar/Tabs.module.css
@@ -0,0 +1,87 @@
+.tabs {
+ border-radius: 0.375rem;
+ width: 100%;
+ background-color: var(--canon-surface-2);
+ transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
+}
+
+.tabsTheme {
+ width: 142px;
+ border-radius: 0.375rem;
+ background-color: var(--canon-surface-2);
+ transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
+}
+
+.list {
+ display: flex;
+ position: relative;
+ z-index: 0;
+ padding-inline: 0.25rem;
+ gap: 0.25rem;
+}
+
+.tab {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ border: 0;
+ margin: 0;
+ outline: 0;
+ background: none;
+ appearance: none;
+ color: var(--canon-text-secondary) !important;
+ font-family: inherit;
+ font-size: 0.75rem;
+ line-height: 1.25rem;
+ font-weight: 500;
+ user-select: none;
+ height: 2.25rem;
+ flex: 1;
+ cursor: pointer;
+
+ &[data-selected] {
+ color: var(--canon-text-primary) !important;
+
+ & p {
+ color: var(--canon-text-primary) !important;
+ }
+ }
+
+ @media (hover: hover) {
+ &:hover {
+ color: var(--canon-text-primary);
+ }
+ }
+
+ &:focus-visible {
+ position: relative;
+
+ &::before {
+ content: '';
+ position: absolute;
+ inset: 0.25rem 0;
+ border-radius: 0.25rem;
+ outline: 2px solid var(--canon-surface-1);
+ outline-offset: -1px;
+ }
+ }
+}
+
+.tab p {
+ color: var(--canon-text-secondary) !important;
+}
+
+.indicator {
+ position: absolute;
+ z-index: -1;
+ left: 0;
+ top: 50%;
+ translate: var(--active-tab-left) -50%;
+ width: var(--active-tab-width);
+ height: 1.8rem;
+ border-radius: 0.25rem;
+ background-color: var(--canon-surface-1);
+ transition-property: translate, width, background-color;
+ transition-duration: 200ms;
+ transition-timing-function: ease-in-out;
+}
diff --git a/canon-docs/src/components/Sidebar/docs.tsx b/canon-docs/src/components/Sidebar/docs.tsx
new file mode 100644
index 0000000000..0d83b9bb0f
--- /dev/null
+++ b/canon-docs/src/components/Sidebar/docs.tsx
@@ -0,0 +1,90 @@
+'use client';
+
+import Link from 'next/link';
+import { components, overview, layoutComponents, theme } from '@/utils/data';
+import { Box } from '../../../../packages/canon/src/components/Box';
+import { Text } from '../../../../packages/canon/src/components/Text';
+import { motion } from 'framer-motion';
+import styles from './Sidebar.module.css';
+import { usePathname } from 'next/navigation';
+import { Fragment } from 'react';
+
+const data = [
+ {
+ title: 'Overview',
+ content: overview,
+ url: '',
+ },
+ {
+ title: 'Theme',
+ content: theme,
+ url: '/theme',
+ },
+ {
+ title: 'Layout Components',
+ content: layoutComponents,
+ url: '/components',
+ },
+ {
+ title: 'Components',
+ content: components,
+ url: '/components',
+ },
+];
+
+export const Docs = () => {
+ const pathname = usePathname();
+ const isPlayground = pathname.includes('/playground');
+
+ return (
+
+
+
+
+ {status === 'notStarted' && 'Not Started'}
+ {status === 'inProgress' && 'In Progress'}
+ {status === 'inReview' && 'Ready for Review'}
+ {status === 'completed' && 'Completed'}
+
+ {title}
+
+
+ );
+};
diff --git a/canon-docs/src/components/Sidebar/playground.tsx b/canon-docs/src/components/Sidebar/playground.tsx
new file mode 100644
index 0000000000..59502f6314
--- /dev/null
+++ b/canon-docs/src/components/Sidebar/playground.tsx
@@ -0,0 +1,87 @@
+'use client';
+
+import { components } from '@/utils/data';
+import { Box } from '../../../../packages/canon/src/components/Box';
+import { Checkbox } from '../../../../packages/canon/src/components/Checkbox';
+import { Text } from '../../../../packages/canon/src/components/Text';
+import { motion } from 'framer-motion';
+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 (
+
+
+
+
+
+
+
+
+
+
+ {title}
+ handleComponentCheckboxChange(slug)}
+ />
+
+ ))}
+
+ {title}
+ handleCheckboxChange(slug)}
+ />
+
+ ))}
+
+
+ View code
+
+
+
+ {preview}
+
+
+ {children}
+
+ );
+};
+
+export const Header = ({ children }: { children: React.ReactNode }) => {
+ return {children};
+};
+
+export const Body = ({ children }: { children: React.ReactNode }) => {
+ return {children};
+};
+
+export const HeaderRow = ({ children }: { children: React.ReactNode }) => {
+ return
+
+
+
+ );
+};
diff --git a/canon-docs/src/snippets/text.tsx b/canon-docs/src/snippets/text.tsx
new file mode 100644
index 0000000000..633b3b45d7
--- /dev/null
+++ b/canon-docs/src/snippets/text.tsx
@@ -0,0 +1,93 @@
+'use client';
+
+import { Stack, Text } from '../../../packages/canon';
+
+export const TextPreview = () => {
+ return (
+