paulononato/backstage
1
0
Fork 0
Code Issues Pull Requests Actions 48 Packages Projects Releases Wiki Activity

Improve docs website

Browse Source 
Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>
This commit is contained in:
Charles de Dreuille
2025-02-07 11:19:36 +00:00
parent ac1b9165f6
commit d7c63f5de3
40 changed files with 274 additions and 203 deletions
Download Patch File Download Diff File Expand all files Collapse all files
canon-docs/src/app/(playground)/playground/styles.module.css
+2 -2
View File
@@ -30,7 +30,7 @@
.breakpointContent {
height: 100%;
border-radius: 4px;
border: 1px solid var(--canon-border);
background-color: var(--canon-bg);
border: 1px solid var(--border);
background-color: var(--bg);
padding: 16px;
}
canon-docs/src/app/layout.tsx
+2 -3
View File
@@ -3,12 +3,11 @@ import { Sidebar } from '../components/Sidebar';
import { Toolbar } from '@/components/Toolbar';
import { Providers } from './providers';
import { CustomTheme } from '@/components/CustomTheme';
import styles from './page.module.css';
import styles from '../css/page.module.css';
import './globals.css';
import '../css/globals.css';
import '/public/core.css';
import '/public/components.css';
import '/public/backstage.css';
export const metadata: Metadata = {
title: 'Canon',
canon-docs/src/app/providers.tsx
+1 -1
View File
@@ -1,7 +1,7 @@
'use client';
import { ReactNode } from 'react';
import { CanonProvider } from '../../../packages/canon/src/contexts/canon';
import { CanonProvider } from '@backstage/canon';
import { PlaygroundProvider } from '@/utils/playground-context';
export const Providers = ({ children }: { children: ReactNode }) => {
canon-docs/src/components/CodeBlock/client.tsx
+1 -1
View File
@@ -1,7 +1,7 @@
'use client';
import { CodeBlockProps } from '.';
import { Text } from '../../../../packages/canon';
import { Text } from '@backstage/canon';
import styles from './styles.module.css';
export const CodeBlockClient = ({
canon-docs/src/components/CodeBlock/styles.module.css
+3 -3
View File
@@ -1,6 +1,6 @@
.codeBlock {
border-radius: 4px;
border: 1px solid var(--canon-border);
border: 1px solid var(--border);
position: relative;
background: transparent;
overflow-x: auto;
@@ -15,10 +15,10 @@
}
.title {
border-bottom: 1px solid var(--canon-border);
border-bottom: 1px solid var(--border);
padding: 12px 20px;
font-size: 0.875rem;
color: var(--canon-fg-text-secondary);
color: var(--secondary);
}
.code {
canon-docs/src/components/CustomTheme/customTheme.tsx
+2 -2
View File
@@ -5,8 +5,8 @@ import CodeMirror from '@uiw/react-codemirror';
import { sass } from '@codemirror/lang-sass';
import styles from './styles.module.css';
import { usePlayground } from '@/utils/playground-context';
import { AnimatePresence, motion } from 'framer-motion';
import { Icon } from '../../../../packages/canon';
import { AnimatePresence, motion } from 'motion/react';
import { Icon } from '@backstage/canon';
import { createTheme } from '@uiw/codemirror-themes';
import { tags as t } from '@lezer/highlight';
canon-docs/src/components/CustomTheme/styles.module.css
+9 -7
View File
@@ -4,9 +4,9 @@
right: 16px;
width: 240px;
height: 47px;
background-color: var(--canon-bg-elevated);
background-color: var(--panel);
border-radius: 0.375rem;
border: 1px solid var(--canon-border);
border: 1px solid var(--border);
display: flex;
flex-direction: column;
overflow: hidden;
@@ -31,13 +31,15 @@
.header {
height: 46px;
flex-shrink: 0;
border-bottom: 1px solid var(--canon-border);
background-color: var(--canon-bg-elevated);
border-bottom: 1px solid var(--border);
background-color: var(--panel);
display: flex;
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 {
@@ -65,8 +67,8 @@
height: 28px;
padding: 0 8px;
color: #fff;
background-color: var(--canon-bg);
color: var(--canon-fg-text-primary);
background-color: var(--bg);
color: var(--primary);
transition: background-color 0.2s ease-in-out;
border-radius: 0.25rem;
cursor: pointer;
canon-docs/src/components/HeadlessBanners/BaseUI.tsx
+1 -1
View File
@@ -1,6 +1,6 @@
'use client';
import { Icon, Text } from '../../../../packages/canon';
import { Icon, Text } from '@backstage/canon';
import styles from './styles.module.css';
interface BaseUIProps {
canon-docs/src/components/HeadlessBanners/styles.module.css
+5 -5
View File
@@ -1,9 +1,9 @@
.container {
display: flex;
background-color: var(--canon-bg-elevated);
background-color: var(--panel);
padding: var(--canon-space-6);
border-radius: var(--canon-radius-2);
border: 1px solid var(--canon-border);
border: 1px solid var(--border);
margin-bottom: var(--canon-space-6);
gap: var(--canon-space-6);
transition: background-color 0.2s ease-in-out;
@@ -29,14 +29,14 @@
align-items: center;
justify-content: center;
cursor: pointer;
background-color: var(--canon-bg);
border: 1px solid var(--canon-border);
background-color: var(--bg);
border: 1px solid var(--border);
border-radius: var(--canon-radius-2);
padding: 0 var(--canon-space-3);
height: 28px;
border-radius: 100px;
margin-top: var(--canon-space-3);
font-size: var(--canon-font-size-3);
color: var(--canon-fg-text-primary);
color: var(--primary);
gap: var(--canon-space-2);
}
canon-docs/src/components/IconLibrary/IconLibrary.tsx
+2 -2
View File
@@ -15,8 +15,8 @@
*/
'use client';
import { Text, Icon, icons } from '../../../../packages/canon';
import type { IconNames } from '../../../../packages/canon';
import { Text, Icon, icons } from '@backstage/canon';
import type { IconNames } from '@backstage/canon';
import styles from './styles.module.css';
export const IconLibrary = () => {
canon-docs/src/components/IconLibrary/styles.module.css
+2 -2
View File
@@ -19,10 +19,10 @@
height: 80px;
border: 1px solid #d3d3d3;
border-radius: 0.5rem;
background-color: var(--canon-bg);
background-color: var(--bg);
transition: background-color 0.2s ease-in-out;
&:hover {
background-color: var(--canon-bg-elevated);
background-color: var(--panel);
}
}
canon-docs/src/components/PropsTable/PropsTable.tsx
+1 -1
View File
@@ -2,7 +2,7 @@
import * as Table from '../Table';
import { Chip } from '../Chip';
import { icons } from '../../../../packages/canon';
import { icons } from '@backstage/canon';
// Define a more specific type for the data object
type PropData = {
canon-docs/src/components/Sidebar/Sidebar.module.css
+66 -17
View File
@@ -6,27 +6,41 @@
.sidebar {
display: block;
position: fixed;
top: 0;
left: 0;
top: 16px;
left: 16px;
border-radius: 8px;
width: 300px;
height: 100vh;
color: var(--canon-fg-text-primary);
background-color: var(--canon-bg-elevated);
border-right: 1px solid var(--canon-border);
padding-left: 20px;
padding-right: 20px;
transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
height: calc(100vh - 32px);
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;
overflow: hidden;
}
}
.root {
height: 100%;
}
.viewport {
overflow: scroll;
height: 100%;
}
.content {
padding: 0 20px 20px;
}
.logoContainer {
padding-left: 6px;
padding-top: 32px;
}
.logo path {
fill: var(--canon-fg-text-primary);
fill: var(--primary);
}
.menu {
@@ -43,10 +57,11 @@
}
.sectionTitle {
font-family: var(--docs-font);
font-size: var(--canon-font-size-3);
font-weight: var(--canon-font-weight-bold);
padding: 12px 0;
color: var(--primary);
margin-top: 24px;
}
.line {
@@ -63,23 +78,57 @@
transition: background-color 0.2s ease-in-out;
&:hover {
background-color: var(--canon-bg);
background-color: var(--bg);
}
}
.line.active {
background-color: var(--canon-bg);
background-color: var(--bg);
}
.line.active .lineTitle {
color: var(--primary);
}
.lineTitle {
font-family: var(--docs-font);
font-size: var(--canon-font-size-3);
font-weight: var(--canon-font-weight-regular);
color: var(--canon-fg-text-primary);
color: var(--secondary);
}
.lineStatus {
font-family: var(--docs-font);
font-size: var(--canon-font-size-3);
color: var(--canon-fg-text-secondary);
color: var(--secondary);
}
.scrollbar {
display: flex;
justify-content: center;
background-color: rgba(0, 0, 0, 0.1);
width: 0.25rem;
border-radius: 0.375rem;
margin: 0.5rem;
opacity: 0;
transition: opacity 150ms 300ms;
right: -20px;
&[data-hovering],
&[data-scrolling] {
opacity: 1;
transition-duration: 75ms;
transition-delay: 0ms;
}
&::before {
content: '';
position: absolute;
width: 1.25rem;
height: 100%;
}
}
.thumb {
width: 100%;
border-radius: inherit;
background-color: rgba(0, 0, 0, 0.2);
}
canon-docs/src/components/Sidebar/docs.tsx
+3 -5
View File
@@ -2,8 +2,7 @@
import Link from 'next/link';
import { components, overview, layoutComponents, theme } from '@/utils/data';
import { Box } from '../../../../packages/canon';
import { motion } from 'framer-motion';
import { motion } from 'motion/react';
import styles from './Sidebar.module.css';
import { usePathname } from 'next/navigation';
import { Fragment } from 'react';
@@ -53,9 +52,8 @@ export const Docs = () => {
{data.map(section => {
return (
<Fragment key={section.title}>
<Box marginTop="lg" marginBottom="2xs">
<div className={styles.sectionTitle}>{section.title}</div>
</Box>
<div className={styles.sectionTitle}>{section.title}</div>
{section.content.map(item => {
const isActive = pathname === `${section.url}/${item.slug}`;
canon-docs/src/components/Sidebar/index.tsx
+28 -18
View File
@@ -2,28 +2,38 @@ import styles from './Sidebar.module.css';
import { Docs } from './docs';
import { Playground } from './playground';
import Link from 'next/link';
import { ScrollArea } from '@base-ui-components/react/scroll-area';
export const Sidebar = () => {
return (
<div className={styles.sidebar}>
<div className={styles.logoContainer}>
<Link href="/">
<svg
width="89"
height="27"
fill="none"
xmlns="http://www.w3.org/2000/svg"
className={styles.logo}
>
<path d="M77.414 9.71h3.036v2.992l-.264-.022c.279-.88.748-1.65 1.408-2.31.675-.66 1.533-.99 2.574-.99 1.086 0 1.9.352 2.442 1.056.558.689.836 1.598.836 2.728v7.502H84.41v-6.6c0-.66-.117-1.159-.352-1.496-.234-.338-.623-.506-1.166-.506-.601 0-1.122.271-1.562.814a4.321 4.321 0 0 0-.88 1.848v5.94h-3.036V9.71ZM69.868 21.04c-1.13 0-2.142-.257-3.036-.77a5.547 5.547 0 0 1-2.068-2.09c-.484-.895-.726-1.892-.726-2.992 0-1.115.242-2.112.726-2.992a5.503 5.503 0 0 1 2.068-2.112c.88-.514 1.892-.77 3.036-.77 1.144 0 2.156.256 3.036.77a5.347 5.347 0 0 1 2.046 2.112c.498.88.748 1.87.748 2.97 0 1.114-.25 2.12-.748 3.014a5.343 5.343 0 0 1-2.068 2.09c-.88.513-1.885.77-3.014.77Zm0-2.618c.557 0 1.048-.132 1.474-.396a2.79 2.79 0 0 0 .99-1.144c.234-.499.352-1.064.352-1.694 0-.63-.118-1.188-.352-1.672a2.764 2.764 0 0 0-.99-1.166c-.426-.279-.917-.418-1.474-.418-.558 0-1.05.14-1.474.418a2.764 2.764 0 0 0-.99 1.166c-.22.484-.33 1.041-.33 1.672 0 .63.11 1.195.33 1.694.234.484.564.865.99 1.144.425.264.916.396 1.474.396ZM52.385 9.71h3.036v2.992l-.264-.022c.279-.88.748-1.65 1.408-2.31.675-.66 1.533-.99 2.574-.99 1.085 0 1.9.352 2.442 1.056.557.689.836 1.598.836 2.728v7.502h-3.036v-6.6c0-.66-.117-1.159-.352-1.496-.235-.338-.623-.506-1.166-.506-.601 0-1.122.271-1.562.814a4.321 4.321 0 0 0-.88 1.848v5.94h-3.036V9.71ZM43.904 20.952c-1.026 0-1.87-.308-2.53-.924-.66-.616-.99-1.416-.99-2.398 0-1.115.418-2.01 1.254-2.684.85-.69 2.105-1.034 3.762-1.034h2.75l-.924.352v-.462c0-.572-.176-1.02-.528-1.342-.352-.338-.931-.506-1.738-.506-.69 0-1.386.154-2.09.462-.704.308-1.29.69-1.76 1.144v-2.882c.47-.352 1.1-.66 1.892-.924a7.942 7.942 0 0 1 2.486-.396c1.599 0 2.78.41 3.542 1.232.778.806 1.166 1.914 1.166 3.322v5.742c0 .176.008.352.022.528.03.161.066.322.11.484h-3.014v-3.3l.044 1.386a4.044 4.044 0 0 1-1.32 1.606c-.572.396-1.283.594-2.134.594Zm.858-2.156c.558 0 1.049-.206 1.474-.616.44-.426.77-.954.99-1.584v-.792h-1.562c-.762 0-1.334.146-1.716.44-.381.278-.572.674-.572 1.188 0 .41.125.74.374.99.264.25.602.374 1.012.374ZM34.66 21.04c-1.525 0-2.874-.345-4.047-1.034-1.174-.704-2.09-1.68-2.75-2.926-.646-1.247-.968-2.662-.968-4.246 0-1.584.322-2.992.968-4.224.66-1.232 1.576-2.193 2.75-2.882 1.173-.704 2.522-1.056 4.048-1.056.968 0 1.818.11 2.552.33.748.22 1.356.506 1.826.858v3.498c-.396-.484-.96-.895-1.694-1.232-.719-.338-1.51-.506-2.376-.506-.939 0-1.775.22-2.508.66-.719.44-1.284 1.056-1.694 1.848-.396.792-.594 1.694-.594 2.706 0 1.026.198 1.943.594 2.75.41.792.975 1.408 1.694 1.848.733.44 1.57.66 2.508.66.88 0 1.68-.162 2.398-.484.718-.323 1.276-.726 1.672-1.21v3.41a5.686 5.686 0 0 1-1.87.902c-.704.22-1.54.33-2.508.33ZM11.275 6.271c.276.526.019 1.152-.464 1.498a5.846 5.846 0 0 0 1.004 10.082c.454.205.789.632.789 1.13v6.206a.837.837 0 0 1-.838.837C5.33 26.024.112 20.804.112 14.366V.862C.112.399.487.024.95.024c4.483 0 8.376 2.533 10.325 6.247Z" />
<path d="M14.037 16.729a4.237 4.237 0 0 0 4.234-4.24 4.237 4.237 0 0 0-4.234-4.242 4.237 4.237 0 0 0-4.234 4.241 4.237 4.237 0 0 0 4.234 4.24Z" />
</svg>
</Link>
</div>
<div className={styles.menu}>
<Docs />
<Playground />
</div>
<ScrollArea.Root className={styles.root}>
<ScrollArea.Viewport className={styles.viewport}>
<div className={styles.content}>
<div className={styles.logoContainer}>
<Link href="/">
<svg
width="89"
height="27"
fill="none"
xmlns="http://www.w3.org/2000/svg"
className={styles.logo}
>
<path d="M77.414 9.71h3.036v2.992l-.264-.022c.279-.88.748-1.65 1.408-2.31.675-.66 1.533-.99 2.574-.99 1.086 0 1.9.352 2.442 1.056.558.689.836 1.598.836 2.728v7.502H84.41v-6.6c0-.66-.117-1.159-.352-1.496-.234-.338-.623-.506-1.166-.506-.601 0-1.122.271-1.562.814a4.321 4.321 0 0 0-.88 1.848v5.94h-3.036V9.71ZM69.868 21.04c-1.13 0-2.142-.257-3.036-.77a5.547 5.547 0 0 1-2.068-2.09c-.484-.895-.726-1.892-.726-2.992 0-1.115.242-2.112.726-2.992a5.503 5.503 0 0 1 2.068-2.112c.88-.514 1.892-.77 3.036-.77 1.144 0 2.156.256 3.036.77a5.347 5.347 0 0 1 2.046 2.112c.498.88.748 1.87.748 2.97 0 1.114-.25 2.12-.748 3.014a5.343 5.343 0 0 1-2.068 2.09c-.88.513-1.885.77-3.014.77Zm0-2.618c.557 0 1.048-.132 1.474-.396a2.79 2.79 0 0 0 .99-1.144c.234-.499.352-1.064.352-1.694 0-.63-.118-1.188-.352-1.672a2.764 2.764 0 0 0-.99-1.166c-.426-.279-.917-.418-1.474-.418-.558 0-1.05.14-1.474.418a2.764 2.764 0 0 0-.99 1.166c-.22.484-.33 1.041-.33 1.672 0 .63.11 1.195.33 1.694.234.484.564.865.99 1.144.425.264.916.396 1.474.396ZM52.385 9.71h3.036v2.992l-.264-.022c.279-.88.748-1.65 1.408-2.31.675-.66 1.533-.99 2.574-.99 1.085 0 1.9.352 2.442 1.056.557.689.836 1.598.836 2.728v7.502h-3.036v-6.6c0-.66-.117-1.159-.352-1.496-.235-.338-.623-.506-1.166-.506-.601 0-1.122.271-1.562.814a4.321 4.321 0 0 0-.88 1.848v5.94h-3.036V9.71ZM43.904 20.952c-1.026 0-1.87-.308-2.53-.924-.66-.616-.99-1.416-.99-2.398 0-1.115.418-2.01 1.254-2.684.85-.69 2.105-1.034 3.762-1.034h2.75l-.924.352v-.462c0-.572-.176-1.02-.528-1.342-.352-.338-.931-.506-1.738-.506-.69 0-1.386.154-2.09.462-.704.308-1.29.69-1.76 1.144v-2.882c.47-.352 1.1-.66 1.892-.924a7.942 7.942 0 0 1 2.486-.396c1.599 0 2.78.41 3.542 1.232.778.806 1.166 1.914 1.166 3.322v5.742c0 .176.008.352.022.528.03.161.066.322.11.484h-3.014v-3.3l.044 1.386a4.044 4.044 0 0 1-1.32 1.606c-.572.396-1.283.594-2.134.594Zm.858-2.156c.558 0 1.049-.206 1.474-.616.44-.426.77-.954.99-1.584v-.792h-1.562c-.762 0-1.334.146-1.716.44-.381.278-.572.674-.572 1.188 0 .41.125.74.374.99.264.25.602.374 1.012.374ZM34.66 21.04c-1.525 0-2.874-.345-4.047-1.034-1.174-.704-2.09-1.68-2.75-2.926-.646-1.247-.968-2.662-.968-4.246 0-1.584.322-2.992.968-4.224.66-1.232 1.576-2.193 2.75-2.882 1.173-.704 2.522-1.056 4.048-1.056.968 0 1.818.11 2.552.33.748.22 1.356.506 1.826.858v3.498c-.396-.484-.96-.895-1.694-1.232-.719-.338-1.51-.506-2.376-.506-.939 0-1.775.22-2.508.66-.719.44-1.284 1.056-1.694 1.848-.396.792-.594 1.694-.594 2.706 0 1.026.198 1.943.594 2.75.41.792.975 1.408 1.694 1.848.733.44 1.57.66 2.508.66.88 0 1.68-.162 2.398-.484.718-.323 1.276-.726 1.672-1.21v3.41a5.686 5.686 0 0 1-1.87.902c-.704.22-1.54.33-2.508.33ZM11.275 6.271c.276.526.019 1.152-.464 1.498a5.846 5.846 0 0 0 1.004 10.082c.454.205.789.632.789 1.13v6.206a.837.837 0 0 1-.838.837C5.33 26.024.112 20.804.112 14.366V.862C.112.399.487.024.95.024c4.483 0 8.376 2.533 10.325 6.247Z" />
<path d="M14.037 16.729a4.237 4.237 0 0 0 4.234-4.24 4.237 4.237 0 0 0-4.234-4.242 4.237 4.237 0 0 0-4.234 4.241 4.237 4.237 0 0 0 4.234 4.24Z" />
</svg>
</Link>
</div>
<div className={styles.menu}>
<Docs />
<Playground />
</div>
</div>
</ScrollArea.Viewport>
<ScrollArea.Scrollbar className={styles.scrollbar}>
<ScrollArea.Thumb className={styles.thumb} />
</ScrollArea.Scrollbar>
</ScrollArea.Root>
</div>
);
};
canon-docs/src/components/Sidebar/playground.tsx
+4 -6
View File
@@ -1,10 +1,8 @@
'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 { Box, Checkbox, Text } from '@backstage/canon';
import { motion } from 'motion/react';
import styles from './Sidebar.module.css';
import { usePathname } from 'next/navigation';
import { screenSizes } from '@/utils/data';
@@ -54,7 +52,7 @@ export const Playground = () => {
transition={{ duration: 0.2 }}
style={{ position: 'absolute' }}
>
<Box marginTop="lg" marginBottom="2xs">
<Box mt="lg" mb="2xs">
<Text variant="body" weight="bold">
Components
</Text>
@@ -68,7 +66,7 @@ export const Playground = () => {
/>
</div>
))}
<Box marginTop="lg" marginBottom="2xs">
<Box mt="lg" mb="2xs">
<Text variant="body" weight="bold">
Screen sizes
</Text>
canon-docs/src/components/Snippet/styles.module.css
+3 -3
View File
@@ -6,8 +6,8 @@
.preview {
border-radius: 4px;
box-shadow: inset 0 0 0 1px var(--canon-border);
background-color: var(--canon-bg);
box-shadow: inset 0 0 0 1px var(--border);
background-color: var(--bg);
transition: all 0.2s ease-in-out;
padding: 1px;
position: relative;
@@ -38,7 +38,7 @@
[data-theme='dark'] .previewContent {
background-image: radial-gradient(
rgba(255, 255, 255, 0.1) 1px,
rgba(255, 255, 255, 0.14) 1px,
transparent 0
);
}
canon-docs/src/components/Table/styles.module.css
+5 -5
View File
@@ -15,7 +15,7 @@
*/
.wrapper {
border: 1px solid var(--canon-border);
border: 1px solid var(--border);
border-radius: 4px;
overflow: hidden;
margin-bottom: 1rem;
@@ -33,7 +33,7 @@
padding: 12px 16px !important;
border: none !important;
text-align: left;
background-color: var(--canon-bg-elevated) !important;
background-color: var(--panel) !important;
font-size: 16px;
transition: background-color 0.2s ease-in-out;
@@ -43,14 +43,14 @@
}
.tableHeaderCell {
border-bottom: 1px solid var(--canon-border) !important;
border-bottom: 1px solid var(--border) !important;
font-weight: 500;
font-size: 14px;
}
.tableRow {
border: none;
border-bottom: 1px solid var(--canon-border);
border-bottom: 1px solid var(--border);
&:last-child {
border-bottom: none;
}
@@ -59,7 +59,7 @@
.tableChip {
display: inline-block;
font-size: 14px !important;
border: 1px solid var(--canon-border);
border: 1px solid var(--border);
border-radius: 6px;
padding: 0px 6px;
height: 24px;
canon-docs/src/components/Tabs/parts.tsx
+2 -4
View File
@@ -1,7 +1,7 @@
'use client';
import { Tabs as TabsPrimitive } from '@base-ui-components/react/tabs';
import { Text } from '../../../../packages/canon';
import { Text } from '@backstage/canon';
import styles from './styles.module.css';
export const Root = ({
@@ -33,9 +33,7 @@ export const Tab = (props: React.ComponentProps<typeof TabsPrimitive.Tab>) => (
weight="bold"
{...rest}
style={{
color: state.selected
? 'var(--canon-fg-text-primary)'
: 'var(--canon-fg-text-secondary)',
color: state.selected ? 'var(--primary)' : 'var(--secondary)',
}}
>
{children}
canon-docs/src/components/Tabs/styles.module.css
+2 -2
View File
@@ -5,7 +5,7 @@
.list {
display: flex;
gap: var(--canon-space-6);
border-bottom: 1px solid var(--canon-border);
border-bottom: 1px solid var(--border);
position: relative;
margin-bottom: var(--canon-space-6);
}
@@ -22,6 +22,6 @@
left: var(--active-tab-left);
width: var(--active-tab-width);
height: 1px;
background-color: var(--canon-fg-text-primary);
background-color: var(--primary);
transition: all 0.2s ease-in-out;
}
canon-docs/src/components/Toolbar/nav.module.css
+11 -10
View File
@@ -12,8 +12,10 @@
.tabsTheme {
width: 142px;
border-radius: 0.375rem;
background-color: var(--canon-bg);
transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
background-color: var(--bg);
transition:
background-color 0.2s ease-in-out,
color 0.2s ease-in-out;
}
.list {
@@ -26,22 +28,21 @@
.tab {
all: unset;
height: 60px;
font-family: var(--docs-font);
color: var(--canon-fg-text-secondary);
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(--canon-fg-text-primary);
color: var(--primary);
}
&[data-selected] {
color: var(--canon-fg-text-primary);
color: var(--primary);
& p {
color: var(--canon-fg-text-primary);
color: var(--primary);
}
}
@@ -53,14 +54,14 @@
position: absolute;
inset: 0.25rem 0;
border-radius: 0.25rem;
outline: 2px solid var(--canon-bg-elevated);
outline: 2px solid var(--panel);
outline-offset: -1px;
}
}
}
.tab p {
color: var(--canon-fg-text-secondary) !important;
color: var(--secondary) !important;
}
.indicator {
@@ -72,7 +73,7 @@
width: var(--active-tab-width);
height: 1px;
border-radius: 0.25rem;
background-color: var(--canon-fg-text-primary);
background-color: var(--primary);
transition-property: translate, width, background-color;
transition-duration: 200ms;
transition-timing-function: ease-in-out;
canon-docs/src/components/Toolbar/styles.module.css
+4 -3
View File
@@ -1,17 +1,18 @@
.toolbar {
position: sticky;
top: 0;
top: 16px;
left: 0;
right: 0;
border-radius: 8px;
z-index: 10;
background-color: var(--canon-bg-elevated);
border-bottom: 1px solid var(--canon-border);
background-color: var(--panel);
height: 60px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 var(--canon-space-6);
transition: background-color 0.2s ease-in-out;
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.025);
}
.actions {
canon-docs/src/components/Toolbar/theme-name.module.css
+9 -6
View File
@@ -17,7 +17,7 @@
color: var(--color-gray-900);
cursor: pointer;
user-select: none;
background-color: var(--canon-bg);
background-color: var(--bg);
transition: background-color 0.2s ease-in-out;
&:focus-visible {
@@ -43,12 +43,14 @@
box-sizing: border-box;
padding-block: 0.25rem;
border-radius: 0.375rem;
background-color: var(--canon-bg-elevated);
background-color: var(--panel);
color: var(--color-gray-900);
border: 1px solid var(--canon-border);
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] {
@@ -64,7 +66,8 @@
@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);
}
@@ -104,7 +107,7 @@
z-index: 0;
position: relative;
color: var(--color-gray-50);
background-color: var(--canon-bg);
background-color: var(--bg);
}
&[data-highlighted]::before {
canon-docs/src/components/Toolbar/theme.module.css
+15 -11
View File
@@ -1,15 +1,19 @@
.tabs {
border-radius: 0.375rem;
width: 100%;
background-color: var(--canon-bg);
transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
background-color: var(--bg);
transition:
background-color 0.2s ease-in-out,
color 0.2s ease-in-out;
}
.tabsTheme {
width: 100px;
border-radius: 0.375rem;
background-color: var(--canon-bg);
transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
background-color: var(--bg);
transition:
background-color 0.2s ease-in-out,
color 0.2s ease-in-out;
}
.list {
@@ -29,23 +33,23 @@
outline: 0;
background: none;
appearance: none;
color: var(--canon-fg-text-secondary);
color: var(--secondary);
user-select: none;
height: 2rem;
flex: 1;
cursor: pointer;
&[data-selected] {
color: var(--canon-fg-text-primary);
color: var(--primary);
& p {
color: var(--canon-fg-text-primary);
color: var(--primary);
}
}
@media (hover: hover) {
&:hover {
color: var(--canon-fg-text-primary);
color: var(--primary);
}
}
@@ -57,14 +61,14 @@
position: absolute;
inset: 0.25rem 0;
border-radius: 0.25rem;
outline: 2px solid var(--canon-bg-elevated);
outline: 2px solid var(--panel);
outline-offset: -1px;
}
}
}
.tab p {
color: var(--canon-fg-text-secondary) !important;
color: var(--secondary) !important;
}
.indicator {
@@ -76,7 +80,7 @@
width: var(--active-tab-width);
height: 1.5rem;
border-radius: 0.25rem;
background-color: var(--canon-bg-elevated);
background-color: var(--panel);
transition-property: translate, width, background-color;
transition-duration: 200ms;
transition-timing-function: ease-in-out;
canon-docs/src/app/globals.css → canon-docs/src/css/globals.css
+32 -10
View File
@@ -1,13 +1,33 @@
:root {
--bg: #f8f8f8;
--panel: #fff;
--primary: #000;
--secondary: #757575;
--font-regular: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
'Segoe UI Symbol', 'Noto Color Emoji';
--font-mono: ui-monospace, 'Menlo', 'Monaco', 'Consolas', 'Liberation Mono',
'Courier New', monospace;
--font-weight-regular: 400;
--font-weight-bold: 600;
--border: rgba(0, 0, 0, 0.1);
}
[data-theme='dark'] {
--bg: #000;
--panel: #222222;
--primary: #fff;
--secondary: #9e9e9e;
--border: rgba(255, 255, 255, 0.1);
}
body {
display: flex;
flex-direction: row;
background-color: var(--canon-bg);
color: var(--canon-fg-text-primary);
background-color: var(--bg);
color: var(--primary);
font-family: var(--font-regular);
transition: background-color 0.2s ease-in-out;
--docs-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
'Segoe UI Symbol', 'Noto Color Emoji';
}
iframe {
@@ -22,7 +42,7 @@ iframe {
.shiki,
.shiki span {
background-color: transparent !important;
font-family: var(--canon-font-monospace);
font-family: var(--font-mono);
font-size: 0.875rem;
line-height: 1.7;
}
@@ -41,9 +61,11 @@ iframe {
}
.ͼ2 .cm-gutters {
background-color: var(--canon-bg);
border-right: 1px solid var(--canon-border);
transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
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;
}
.ͼ1 .cm-lineNumbers .cm-gutterElement {
canon-docs/src/css/mdx.module.css
+32
View File
@@ -0,0 +1,32 @@
.h1 {
font-size: 2.5rem;
margin-top: 4rem;
margin-bottom: 1.5rem;
color: var(--primary);
}
.h2 {
font-size: 1.5rem;
margin-top: 3rem;
margin-bottom: 1.5rem;
color: var(--primary);
}
.h3 {
font-size: 1.25rem;
margin-top: 2rem;
margin-bottom: 0.5rem;
color: var(--primary);
}
.p {
font-size: 1rem;
line-height: 1.5;
margin-top: 0;
margin-bottom: 1rem;
color: var(--secondary);
}
.p:first-of-type {
margin-bottom: 2rem;
}
canon-docs/src/app/page.module.css → canon-docs/src/css/page.module.css
+3 -2
View File
@@ -4,11 +4,12 @@
.container {
width: 100%;
padding: 0 16px;
}
@media (min-width: 768px) {
.container {
padding-left: 300px;
padding-left: 332px;
}
}
@@ -17,7 +18,7 @@
}
.page p {
color: var(--canon-fg-text-primary);
color: var(--primary);
font-size: 1rem;
line-height: 1.5rem;
margin-top: 0;
canon-docs/src/mdx-components.tsx
+10 -54
View File
@@ -2,66 +2,22 @@ import React, { ReactNode } from 'react';
import type { MDXComponents } from 'mdx/types';
import Image, { ImageProps } from 'next/image';
import { CodeBlock } from '@/components/CodeBlock';
import { Box } from '../../packages/canon/src/components/Box';
import styles from './css/mdx.module.css';
export function useMDXComponents(components: MDXComponents): MDXComponents {
return {
h1: ({ children }) => (
<Box style={{ marginTop: '4rem' }}>
<h1
style={{
fontFamily: 'var(--docs-font)',
fontSize: '3rem',
fontWeight: 'var(--canon-font-weight-bold)',
marginTop: '4rem',
marginBottom: '0.5rem',
}}
>
{children as ReactNode}
</h1>
</Box>
<h1 className={styles.h1}>{children as ReactNode}</h1>
),
h2: ({ children }) => (
<Box marginTop="2xl" marginBottom="md">
<h2
style={{
fontFamily: 'var(--docs-font)',
fontSize: '1.5rem',
fontWeight: 'var(--canon-font-weight-bold)',
}}
>
{children as ReactNode}
</h2>
</Box>
<h2 className={styles.h2}>{children as ReactNode}</h2>
),
h3: ({ children }) => (
<h3
style={{
fontFamily: 'var(--docs-font)',
fontSize: '1.25rem',
fontWeight: 'var(--canon-font-weight-bold)',
marginTop: '2rem',
marginBottom: '0.5rem',
}}
>
{children as ReactNode}
</h3>
),
p: ({ children }) => (
<p
style={{
fontFamily: 'var(--docs-font)',
fontSize: '1rem',
lineHeight: '1.5',
marginTop: '0',
marginBottom: '1rem',
}}
>
{children as ReactNode}
</p>
<h3 className={styles.h3}>{children as ReactNode}</h3>
),
p: ({ children }) => <p className={styles.p}>{children as ReactNode}</p>,
a: ({ children, href }) => (
<a href={href} style={{ color: 'var(--canon-fg-text-primary)' }}>
<a href={href} style={{ color: 'var(--primary)' }}>
{children as ReactNode}
</a>
),
@@ -78,12 +34,12 @@ export function useMDXComponents(components: MDXComponents): MDXComponents {
code: ({ children }) => (
<code
style={{
fontFamily: 'var(--canon-font-monospace)',
backgroundColor: 'var(--canon-bg-elevated)',
fontFamily: 'var(--font-mono)',
backgroundColor: 'var(--panel)',
padding: '0.2rem 0.375rem',
borderRadius: '0.25rem',
color: 'var(--canon-fg-text-secondary)',
border: '1px solid var(--canon-border)',
color: 'var(--secondary)',
border: '1px solid var(--border)',
fontSize: '0.875rem',
}}
>
canon-docs/src/snippets/box.tsx
+1 -1
View File
@@ -1,6 +1,6 @@
'use client';
import { Box } from '../../../packages/canon';
import { Box } from '@backstage/canon';
export const BoxPreview = () => {
return (
canon-docs/src/snippets/button.tsx
+1 -1
View File
@@ -1,6 +1,6 @@
'use client';
import { Button, Flex, ButtonProps, Text } from '../../../packages/canon';
import { Button, Flex, ButtonProps, Text } from '@backstage/canon';
export const ButtonPreview = () => {
return (
canon-docs/src/snippets/checkbox.tsx
+1 -1
View File
@@ -1,6 +1,6 @@
'use client';
import { Checkbox, Flex, Text } from '../../../packages/canon';
import { Checkbox, Flex, Text } from '@backstage/canon';
export const CheckboxPreview = () => {
return <Checkbox label="Accept terms and conditions" />;
canon-docs/src/snippets/container.tsx
+1 -2
View File
@@ -1,10 +1,9 @@
'use client';
import { Box, Container } from '../../../packages/canon';
import { Box, Container } from '@backstage/canon';
const DecorativeBox = () => (
<Box
borderRadius="xs"
style={{
height: '64px',
background: '#eaf2fd',
canon-docs/src/snippets/field.tsx
+1 -1
View File
@@ -1,6 +1,6 @@
'use client';
import { Input, Field } from '../../../packages/canon';
import { Input, Field } from '@backstage/canon';
export const FieldPreview = () => {
return (
canon-docs/src/snippets/flex.tsx
+1 -1
View File
@@ -1,6 +1,6 @@
'use client';
import { Flex } from '../../../packages/canon';
import { Flex } from '@backstage/canon';
const DecorativeBox = () => {
return (
canon-docs/src/snippets/grid.tsx
+1 -2
View File
@@ -1,10 +1,9 @@
'use client';
import { Box, Grid } from '../../../packages/canon';
import { Box, Grid } from '@backstage/canon';
const FakeBox = () => (
<Box
borderRadius="xs"
style={{
background: '#eaf2fd',
borderRadius: '4px',
canon-docs/src/snippets/heading.tsx
+1 -1
View File
@@ -1,6 +1,6 @@
'use client';
import { Heading, Flex, Text } from '../../../packages/canon';
import { Heading, Flex, Text } from '@backstage/canon';
export const HeadingPreview = () => {
return <Heading>Look mum, no hands!</Heading>;
canon-docs/src/snippets/icon.tsx
+1 -1
View File
@@ -1,6 +1,6 @@
'use client';
import { Icon } from '../../../packages/canon';
import { Icon } from '@backstage/canon';
export const IconPreview = () => {
return <Icon name="heart" />;
canon-docs/src/snippets/inline.tsx
+3 -4
View File
@@ -1,6 +1,6 @@
'use client';
import { Box, Inline } from '../../../packages/canon';
import { Box, Flex } from '@backstage/canon';
const fakeBlockList = [
{ width: 45, height: 60 },
@@ -24,7 +24,6 @@ const FakeBox = ({
height?: number;
}) => (
<Box
borderRadius="xs"
style={{
background: '#eaf2fd',
borderRadius: '4px',
@@ -39,10 +38,10 @@ const FakeBox = ({
export const InlinePreview = () => {
return (
<Inline>
<Flex>
{fakeBlockList.map((block, index) => (
<FakeBox key={index} width={block.width} height={block.height} />
))}
</Inline>
</Flex>
);
};
canon-docs/src/snippets/input.tsx
+1 -1
View File
@@ -1,6 +1,6 @@
'use client';
import { Input, Grid } from '../../../packages/canon';
import { Input, Grid } from '@backstage/canon';
export const InputPreview = () => {
return (
canon-docs/src/snippets/text.tsx
+1 -1
View File
@@ -1,6 +1,6 @@
'use client';
import { Flex, Text } from '../../../packages/canon';
import { Flex, Text } from '@backstage/canon';
export const TextPreview = () => {
return (