From c18e15adc40f6073e3c443dcf1a356e9376d4c52 Mon Sep 17 00:00:00 2001 From: Charles de Dreuille Date: Tue, 15 Jul 2025 13:31:08 +0100 Subject: [PATCH] Rename Canon everywhere in our docs Signed-off-by: Charles de Dreuille --- docs-ui/README.md | 4 +- docs-ui/package.json | 2 +- docs-ui/public/header.png | Bin 13783 -> 0 bytes docs-ui/src/app/(docs)/about/page.mdx | 14 +- docs-ui/src/app/(docs)/changelog/page.mdx | 4 +- docs-ui/src/app/(docs)/layout.tsx | 2 +- docs-ui/src/app/(docs)/page.mdx | 21 +- docs-ui/src/app/(docs)/theme/layout/page.mdx | 2 +- .../src/app/(docs)/theme/responsive/page.mdx | 4 +- docs-ui/src/app/(docs)/theme/theming/page.mdx | 208 +++++++++--------- .../src/app/(docs)/theme/typography/page.mdx | 4 +- .../src/app/(playground)/playground/page.tsx | 2 +- docs-ui/src/app/layout.tsx | 4 +- docs-ui/src/components/CodeBlock/client.tsx | 2 +- .../components/CustomTheme/customTheme.tsx | 4 +- .../src/components/HeadlessBanners/BaseUI.tsx | 2 +- .../components/IconLibrary/IconLibrary.tsx | 4 +- .../src/components/PropsTable/PropsTable.tsx | 2 +- .../src/components/Sidebar/Sidebar.module.css | 2 +- docs-ui/src/components/Sidebar/index.tsx | 37 +++- docs-ui/src/components/Sidebar/playground.tsx | 2 +- docs-ui/src/components/Toolbar/theme-name.tsx | 2 +- docs-ui/src/components/Toolbar/theme.tsx | 2 +- docs-ui/src/content/components/avatar.mdx | 12 +- .../src/content/components/avatar.props.ts | 2 +- docs-ui/src/content/components/box.mdx | 2 +- docs-ui/src/content/components/box.props.ts | 2 +- .../src/content/components/button-icon.mdx | 2 +- .../content/components/button-icon.props.ts | 6 +- .../src/content/components/button-link.mdx | 2 +- .../content/components/button-link.props.ts | 2 +- docs-ui/src/content/components/button.mdx | 2 +- .../src/content/components/button.props.ts | 6 +- docs-ui/src/content/components/card.mdx | 7 +- docs-ui/src/content/components/card.props.ts | 2 +- docs-ui/src/content/components/checkbox.mdx | 2 +- .../src/content/components/checkbox.props.ts | 2 +- .../src/content/components/collapsible.mdx | 6 +- .../content/components/collapsible.props.ts | 2 +- docs-ui/src/content/components/container.mdx | 2 +- .../src/content/components/container.props.ts | 2 +- docs-ui/src/content/components/flex.mdx | 2 +- docs-ui/src/content/components/flex.props.ts | 2 +- docs-ui/src/content/components/grid.mdx | 2 +- docs-ui/src/content/components/grid.props.ts | 2 +- docs-ui/src/content/components/heading.mdx | 2 +- .../src/content/components/heading.props.ts | 2 +- docs-ui/src/content/components/icon.mdx | 2 +- docs-ui/src/content/components/icon.props.ts | 2 +- docs-ui/src/content/components/link.mdx | 14 +- docs-ui/src/content/components/link.props.ts | 14 +- docs-ui/src/content/components/menu.mdx | 30 +-- docs-ui/src/content/components/menu.props.ts | 2 +- .../src/content/components/radio-group.mdx | 2 +- .../content/components/radio-group.props.ts | 2 +- .../src/content/components/search-field.mdx | 20 +- .../content/components/search-field.props.ts | 2 +- .../src/content/components/select.props.ts | 2 +- docs-ui/src/content/components/skeleton.mdx | 2 +- .../src/content/components/skeleton.props.ts | 2 +- docs-ui/src/content/components/switch.mdx | 2 +- .../src/content/components/switch.props.ts | 2 +- docs-ui/src/content/components/tabs.mdx | 10 +- docs-ui/src/content/components/tabs.props.ts | 2 +- docs-ui/src/content/components/text-field.mdx | 18 +- .../content/components/text-field.props.ts | 2 +- docs-ui/src/content/components/text.mdx | 2 +- docs-ui/src/content/components/text.props.ts | 2 +- docs-ui/src/content/components/tooltip.mdx | 2 +- .../src/content/components/tooltip.props.ts | 2 +- docs-ui/src/snippets/code-snippets.ts | 24 +- docs-ui/src/utils/propDefs.ts | 2 +- docs-ui/yarn.lock | 72 +++--- 73 files changed, 327 insertions(+), 316 deletions(-) delete mode 100644 docs-ui/public/header.png diff --git a/docs-ui/README.md b/docs-ui/README.md index d91076c4cd..41b9921413 100644 --- a/docs-ui/README.md +++ b/docs-ui/README.md @@ -1,6 +1,6 @@ -# Canon Docs +# Backstage UI Docs -Canon is our internal UI library built for Backstage. We built this website to document the library and its components. You can view this website [here](https://canon.backstage.io). +Backstage UI is our internal UI library built for Backstage. We built this website to document the library and its components. You can view this website [here](https://ui.backstage.io). ## How to run locally diff --git a/docs-ui/package.json b/docs-ui/package.json index b6faca63ae..8049edac8d 100644 --- a/docs-ui/package.json +++ b/docs-ui/package.json @@ -1,5 +1,5 @@ { - "name": "canon-docs", + "name": "docs-ui", "version": "0.1.0", "private": true, "scripts": { diff --git a/docs-ui/public/header.png b/docs-ui/public/header.png deleted file mode 100644 index 8d11151a3ecdd91c681afecfbf41c45ce8179b0c..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 13783 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 juf +# Backstage UI -Welcome to the Canon, the new design library for Backstage plugins. This +Welcome to the Backstage UI, 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 @@ -13,18 +10,18 @@ building it incrementally with not conflict with the existing theming system. ## Installation -### 1. Install canon +### 1. Install Backstage UI -Install Canon using a package manager. +Install Backstage UI using a package manager. - + ### 2. Import the css files Import the global CSS file at the root of your application. ```tsx -import '@backstage/canon/css/styles.css'; +import '@backstage/ui/css/styles.css'; ``` ### 3. Start building ✨ @@ -32,7 +29,7 @@ import '@backstage/canon/css/styles.css'; Now you can start building your plugin using the new design system. ```tsx -import { Flex, Button, Text } from '@backstage/canon'; +import { Flex, Button, Text } from '@backstage/ui'; Hello World @@ -40,10 +37,6 @@ import { Flex, Button, Text } from '@backstage/canon'; ; ``` -## Roadmap - -You can check our roadmap [on GitHub](https://github.com/orgs/backstage/projects/10). We'll do our best to keep you updated on the progress. - ## Next steps Now that you have the basics down, you can start building your plugin using the new design system. diff --git a/docs-ui/src/app/(docs)/theme/layout/page.mdx b/docs-ui/src/app/(docs)/theme/layout/page.mdx index b069082b04..3c3b998490 100644 --- a/docs-ui/src/app/(docs)/theme/layout/page.mdx +++ b/docs-ui/src/app/(docs)/theme/layout/page.mdx @@ -3,7 +3,7 @@ import { CodeBlock } from '@/components/CodeBlock'; # Layout -Canon is made for extensibility. We built this library to make it easy for any +Backstage UI is made for extensibility. We built this library to make it easy for any Backstage plugin creator to be able to build their ideas at speed ensuring consistency across the rest of your ecosystem. Each component is designed to be editable to match your need but sometimes you want to have more control diff --git a/docs-ui/src/app/(docs)/theme/responsive/page.mdx b/docs-ui/src/app/(docs)/theme/responsive/page.mdx index 7eb4411333..9d37b1329f 100644 --- a/docs-ui/src/app/(docs)/theme/responsive/page.mdx +++ b/docs-ui/src/app/(docs)/theme/responsive/page.mdx @@ -4,7 +4,7 @@ import { CodeBlock } from '@/components/CodeBlock'; # Responsive -Canon is built on a responsive design system, meaning that the components are +Backstage UI is built on a responsive design system, meaning that the components are designed to adapt to different screen sizes. By default we offer a set of breakpoints that you can use to create responsive components. @@ -90,7 +90,7 @@ breakpoints that you can use to create responsive components. ## Responsive components -Canon components are designed to be responsive, meaning that they will adapt +Backstage UI components are designed to be responsive, meaning that they will adapt to different screen sizes. Not every component is responsive, but the ones that are will have a prop to control the responsive behavior. diff --git a/docs-ui/src/app/(docs)/theme/theming/page.mdx b/docs-ui/src/app/(docs)/theme/theming/page.mdx index ed7f801db0..5205690d0b 100644 --- a/docs-ui/src/app/(docs)/theme/theming/page.mdx +++ b/docs-ui/src/app/(docs)/theme/theming/page.mdx @@ -5,7 +5,7 @@ import { customTheme } from '@/snippets/code-snippets'; # Theming -Canon's theming is built entirely on CSS, without relying on any CSS-in-JS libraries. +Backstage UI theming is built entirely on CSS, without relying on any CSS-in-JS libraries. At its core, it provides a solid default theme that is easily customizable using a comprehensive set of CSS variables. Additionally, it enables anyone to adapt the design to their specific needs. Each component comes with fixed class names, making customization @@ -13,7 +13,7 @@ even more straightforward. ## Light & Dark modes -By default, Canon supports both light and dark modes using the `data-theme` attribute. +By default, Backstage UI supports both light and dark modes using the `data-theme` attribute. The light theme is applied by default if no `data-theme` attribute is specified. To create a custom theme, you'll need to define both light and dark modes as outlined below. If only one mode is defined, the other will fall back to the default theme. @@ -31,7 +31,7 @@ Here's an example of how your theme.css file should look like: ## CSS class name structure -All Canon components come with a set of CSS classes that you can use to style them. To make it +All Backstage UI components come with a set of CSS classes that you can use to style them. To make it easier to identify the class name you can use, we use a specific structure for the class names. -Every component has a unique prefix `.canon-` followed by the component name. Component props +Every component has a unique prefix `.bui-` followed by the component name. Component props are represented using the `data-` attribute. That way, class names are easily identifiable. ## Available CSS variables @@ -58,7 +58,7 @@ These colors are used for special purposes like ring, scrollbar, ... - --canon-black + --bui-black Pure black color. This one should be the same in light and dark themes. @@ -66,7 +66,7 @@ These colors are used for special purposes like ring, scrollbar, ... - --canon-white + --bui-white Pure white color. This one should be the same in light and dark themes. @@ -74,49 +74,49 @@ These colors are used for special purposes like ring, scrollbar, ... - --canon-gray-1 + --bui-gray-1 You can use these mostly for backgrounds colors. - --canon-gray-2 + --bui-gray-2 You can use these mostly for backgrounds colors. - --canon-gray-3 + --bui-gray-3 You can use these mostly for backgrounds colors. - --canon-gray-4 + --bui-gray-4 You can use these mostly for backgrounds colors. - --canon-gray-5 + --bui-gray-5 You can use these mostly for backgrounds colors. - --canon-gray-6 + --bui-gray-6 You can use these mostly for backgrounds colors. - --canon-gray-7 + --bui-gray-7 You can use these mostly for backgrounds colors. - --canon-gray-8 + --bui-gray-8 You can use these mostly for backgrounds colors. @@ -126,7 +126,7 @@ These colors are used for special purposes like ring, scrollbar, ... ### Core background colors These colors are used for the background of your application. We are mostly using for now a -single elevated background for panels. `--canon-bg` should mostly use as the main background +single elevated background for panels. `--bui-bg` should mostly use as the main background color of your app. @@ -139,85 +139,85 @@ color of your app. - --canon-bg + --bui-bg The background color of your Backstage instance. - --canon-bg-surface-1 + --bui-bg-surface-1 Use for any panels or elevated surfaces. - --canon-bg-surface-2 + --bui-bg-surface-2 Use for any panels or elevated surfaces. - --canon-bg-solid + --bui-bg-solid Used for solid background colors. - --canon-bg-solid-hover + --bui-bg-solid-hover Used for solid background colors when hovered. - --canon-bg-solid-pressed + --bui-bg-solid-pressed Used for solid background colors when pressed. - --canon-bg-solid-disabled + --bui-bg-solid-disabled Used for solid background colors when disabled. - --canon-bg-tint + --bui-bg-tint Used for tint background colors. - --canon-bg-tint-hover + --bui-bg-tint-hover Used for tint background colors when hovered. - --canon-bg-tint-focus + --bui-bg-tint-focus Used for tint background colors when active. - --canon-bg-tint-disabled + --bui-bg-tint-disabled Used for tint background colors when disabled. - --canon-bg-danger + --bui-bg-danger Used to show errors information. - --canon-bg-warning + --bui-bg-warning Used to show warnings information. - --canon-bg-success + --bui-bg-success Used to show success information. @@ -240,7 +240,7 @@ are prefixed with `fg` to make it easier to identify. - --canon-fg-primary + --bui-fg-primary It should be used on top of main background surfaces. @@ -248,7 +248,7 @@ are prefixed with `fg` to make it easier to identify. - --canon-fg-secondary + --bui-fg-secondary It should be used on top of main background surfaces. @@ -256,7 +256,7 @@ are prefixed with `fg` to make it easier to identify. - --canon-fg-link + --bui-fg-link It should be used on top of main background surfaces. @@ -264,7 +264,7 @@ are prefixed with `fg` to make it easier to identify. - --canon-fg-link-hover + --bui-fg-link-hover It should be used on top of main background surfaces. @@ -272,7 +272,7 @@ are prefixed with `fg` to make it easier to identify. - --canon-fg-disabled + --bui-fg-disabled It should be used on top of main background surfaces. @@ -280,7 +280,7 @@ are prefixed with `fg` to make it easier to identify. - --canon-fg-solid + --bui-fg-solid It should be used on top of solid background colors. @@ -288,7 +288,7 @@ are prefixed with `fg` to make it easier to identify. - --canon-fg-tint + --bui-fg-tint It should be used on top of tint background colors. @@ -296,7 +296,7 @@ are prefixed with `fg` to make it easier to identify. - --canon-fg-tint-disabled + --bui-fg-tint-disabled It should be used on top of tint background colors when disabled. @@ -304,7 +304,7 @@ are prefixed with `fg` to make it easier to identify. - --canon-fg-danger + --bui-fg-danger It should be used on top of danger background colors. @@ -312,7 +312,7 @@ are prefixed with `fg` to make it easier to identify. - --canon-fg-warning + --bui-fg-warning It should be used on top of warning background colors. @@ -320,7 +320,7 @@ are prefixed with `fg` to make it easier to identify. - --canon-fg-success + --bui-fg-success It should be used on top of success background colors. @@ -344,15 +344,13 @@ low contrast to help as a separator with the different background colors. - --canon-border - - - It should be used on top of `--canon-bg-surface-1`. + --bui-border + It should be used on top of `--bui-bg-surface-1`. - --canon-border-hover + --bui-border-hover Used when the component is interactive and hovered. @@ -360,7 +358,7 @@ low contrast to help as a separator with the different background colors. - --canon-border-pressed + --bui-border-pressed Used when the component is interactive and focused. @@ -368,27 +366,27 @@ low contrast to help as a separator with the different background colors. - --canon-border-disabled + --bui-border-disabled Used when the component is disabled. - --canon-border-danger + --bui-border-danger - It should be used on top of `--canon-bg-danger`. + It should be used on top of `--bui-bg-danger`. - --canon-border-warning + --bui-border-warning - It should be used on top of `--canon-bg-warning`. + It should be used on top of `--bui-bg-warning`. - --canon-border-success + --bui-border-success - It should be used on top of `--canon-bg-success`. + It should be used on top of `--bui-bg-success`. @@ -407,19 +405,19 @@ These colors are used for special purposes like ring, scrollbar, ... - --canon-ring + --bui-ring The color of the ring. - --canon-scrollbar + --bui-scrollbar The color of the scrollbar. - --canon-scrollbar-thumb + --bui-scrollbar-thumb The color of the scrollbar thumb. @@ -428,7 +426,7 @@ These colors are used for special purposes like ring, scrollbar, ... ### Font families -We have two fonts that we use across Canon. The first one is the sans-serif +We have two fonts that we use across Backstage UI. The first one is the sans-serif font that we use for the body of the application. The second one is the monospace font that we use for code blocks and tables. @@ -442,13 +440,13 @@ monospace font that we use for code blocks and tables. - --canon-font-regular + --bui-font-regular The sans-serif font for the theme. - --canon-font-mono + --bui-font-mono The monospace font for the theme. @@ -457,7 +455,7 @@ monospace font that we use for code blocks and tables. ### Font weights -We have two font weights that we use across Canon. Regular or Bold. +We have two font weights that we use across Backstage UI. Regular or Bold. @@ -469,13 +467,13 @@ We have two font weights that we use across Canon. Regular or Bold. - --canon-font-weight-regular + --bui-font-weight-regular The regular font weight for the theme. - --canon-font-weight-bold + --bui-font-weight-bold The bold font weight for the theme. @@ -484,12 +482,12 @@ We have two font weights that we use across Canon. Regular or Bold. ### Spacing -We built a spacing system based on a single value `--canon-space`. This value is +We built a spacing system based on a single value `--bui-space`. This value is used to calculate the spacing for all the components. By default if you would like to increase or decrease the spacing between your components you can do it simply by updating -`--canon-space` and it will apply to all spacing values. +`--bui-space` and it will apply to all spacing values. -`--canon-space` is not used directly in any components but serve as an easy way to +`--bui-space` is not used directly in any components but serve as an easy way to calculate the other values. @@ -502,7 +500,7 @@ calculate the other values. - --canon-space + --bui-space The base unit for the spacing system. Default value is `0.25rem`. @@ -524,99 +522,99 @@ tokens for pretty much each spacing properties like padding, margin, gaps, ... - --canon-space-0_5 + --bui-space-0_5 - Base unit (`--canon-space`) times 0.5. + Base unit (`--bui-space`) times 0.5. - --canon-space-1 + --bui-space-1 - Base unit (`--canon-space`). + Base unit (`--bui-space`). - --canon-space-1_5 + --bui-space-1_5 - Base unit (`--canon-space`) times 1.5. + Base unit (`--bui-space`) times 1.5. - --canon-space-2 + --bui-space-2 - Base unit (`--canon-space`) times 2. + Base unit (`--bui-space`) times 2. - --canon-space-3 + --bui-space-3 - Base unit (`--canon-space`) times 3. + Base unit (`--bui-space`) times 3. - --canon-space-4 + --bui-space-4 - Base unit (`--canon-space`) times 4. + Base unit (`--bui-space`) times 4. - --canon-space-5 + --bui-space-5 - Base unit (`--canon-space`) times 5. + Base unit (`--bui-space`) times 5. - --canon-space-6 + --bui-space-6 - Base unit (`--canon-space`) times 6. + Base unit (`--bui-space`) times 6. - --canon-space-7 + --bui-space-7 - Base unit (`--canon-space`) times 7. + Base unit (`--bui-space`) times 7. - --canon-space-8 + --bui-space-8 - Base unit (`--canon-space`) times 8. + Base unit (`--bui-space`) times 8. - --canon-space-9 + --bui-space-9 - Base unit (`--canon-space`) times 9. + Base unit (`--bui-space`) times 9. - --canon-space-10 + --bui-space-10 - Base unit (`--canon-space`) times 10. + Base unit (`--bui-space`) times 10. - --canon-space-11 + --bui-space-11 - Base unit (`--canon-space`) times 11. + Base unit (`--bui-space`) times 11. - --canon-space-12 + --bui-space-12 - Base unit (`--canon-space`) times 12. + Base unit (`--bui-space`) times 12. - --canon-space-13 + --bui-space-13 - Base unit (`--canon-space`) times 13. + Base unit (`--bui-space`) times 13. - --canon-space-14 + --bui-space-14 - Base unit (`--canon-space`) times 14. + Base unit (`--bui-space`) times 14. @@ -635,7 +633,7 @@ We use a radius system to make sure that the components have a consistent look a - --canon-radius-1 + --bui-radius-1 The radius of the component. Default value is `0.125rem`. @@ -643,7 +641,7 @@ We use a radius system to make sure that the components have a consistent look a - --canon-radius-2 + --bui-radius-2 The radius of the component. Default value is `0.25rem`. @@ -651,7 +649,7 @@ We use a radius system to make sure that the components have a consistent look a - --canon-radius-3 + --bui-radius-3 The radius of the component. Default value is `0.5rem`. @@ -659,7 +657,7 @@ We use a radius system to make sure that the components have a consistent look a - --canon-radius-4 + --bui-radius-4 The radius of the component. Default value is `0.75rem`. @@ -667,7 +665,7 @@ We use a radius system to make sure that the components have a consistent look a - --canon-radius-5 + --bui-radius-5 The radius of the component. Default value is `1rem`. @@ -675,7 +673,7 @@ We use a radius system to make sure that the components have a consistent look a - --canon-radius-6 + --bui-radius-6 The radius of the component. Default value is `1.25rem`. @@ -683,7 +681,7 @@ We use a radius system to make sure that the components have a consistent look a - --canon-radius-full + --bui-radius-full The radius of the component. Default value is `9999px`. diff --git a/docs-ui/src/app/(docs)/theme/typography/page.mdx b/docs-ui/src/app/(docs)/theme/typography/page.mdx index 98a342bc91..31c55b8e25 100644 --- a/docs-ui/src/app/(docs)/theme/typography/page.mdx +++ b/docs-ui/src/app/(docs)/theme/typography/page.mdx @@ -3,7 +3,7 @@ import { Snippet } from '@/components/Snippet'; # Typography -Canon offers a suite of typography components designed to seamlessly align +Backstage UI offers a suite of typography components designed to seamlessly align with the rest of your Backstage instance. While you can customize their appearance to match your brand, the underlying API remains consistent and unchanged. Each component is built on a responsive structure, allowing you to @@ -31,7 +31,7 @@ component](?path=/docs/components-heading--docs). ## Text -Canon provides four distinct text variants, each offering different font sizes +Backstage UI provides four distinct text variants, each offering different font sizes carefully designed to cover the majority of use cases. These variants are versatile and can be paired with regular and bold of font weights. You can use the [Text component](?path=/docs/components-text--docs) to add text to your diff --git a/docs-ui/src/app/(playground)/playground/page.tsx b/docs-ui/src/app/(playground)/playground/page.tsx index e2ad294633..424cf2a707 100644 --- a/docs-ui/src/app/(playground)/playground/page.tsx +++ b/docs-ui/src/app/(playground)/playground/page.tsx @@ -1,7 +1,7 @@ 'use client'; import { ReactNode } from 'react'; -import { Grid, Flex, Text } from '../../../../../packages/canon'; +import { Grid, Flex, Text } from '../../../../../packages/ui'; import { screenSizes } from '@/utils/data'; import { Frame } from '@/components/Frame'; import { usePlayground } from '@/utils/playground-context'; diff --git a/docs-ui/src/app/layout.tsx b/docs-ui/src/app/layout.tsx index 289968ba59..092bca57d4 100644 --- a/docs-ui/src/app/layout.tsx +++ b/docs-ui/src/app/layout.tsx @@ -10,9 +10,9 @@ import '/public/theme-backstage.css'; import '/public/theme-spotify.css'; export const metadata: Metadata = { - title: 'Canon', + title: 'Backstage UI', description: 'UI library for Backstage', - metadataBase: new URL('https://canon.backstage.io'), + metadataBase: new URL('https://ui.backstage.io'), }; export default function RootLayout({ diff --git a/docs-ui/src/components/CodeBlock/client.tsx b/docs-ui/src/components/CodeBlock/client.tsx index 6626c4ce6e..b4ee98f2f3 100644 --- a/docs-ui/src/components/CodeBlock/client.tsx +++ b/docs-ui/src/components/CodeBlock/client.tsx @@ -1,7 +1,7 @@ 'use client'; import { CodeBlockProps } from '.'; -import { Text } from '@backstage/canon'; +import { Text } from '@backstage/ui'; import styles from './styles.module.css'; import parse from 'html-react-parser'; diff --git a/docs-ui/src/components/CustomTheme/customTheme.tsx b/docs-ui/src/components/CustomTheme/customTheme.tsx index 87c72ecdcb..c70d59173a 100644 --- a/docs-ui/src/components/CustomTheme/customTheme.tsx +++ b/docs-ui/src/components/CustomTheme/customTheme.tsx @@ -6,12 +6,12 @@ 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 '../../../../packages/canon'; +import { Icon } from '../../../../packages/ui'; import { createTheme } from '@uiw/codemirror-themes'; import { tags as t } from '@lezer/highlight'; const defaultTheme = `:root { - --canon-bg-solid: #000; + --bui-bg-solid: #000; }`; const myTheme = createTheme({ diff --git a/docs-ui/src/components/HeadlessBanners/BaseUI.tsx b/docs-ui/src/components/HeadlessBanners/BaseUI.tsx index 86a0e1ecbd..69f8e41df0 100644 --- a/docs-ui/src/components/HeadlessBanners/BaseUI.tsx +++ b/docs-ui/src/components/HeadlessBanners/BaseUI.tsx @@ -1,6 +1,6 @@ 'use client'; -import { Icon, Text } from '../../../../packages/canon'; +import { Icon, Text } from '../../../../packages/ui'; import styles from './styles.module.css'; interface BaseUIProps { diff --git a/docs-ui/src/components/IconLibrary/IconLibrary.tsx b/docs-ui/src/components/IconLibrary/IconLibrary.tsx index 331dd3f5d0..bad51e62bf 100644 --- a/docs-ui/src/components/IconLibrary/IconLibrary.tsx +++ b/docs-ui/src/components/IconLibrary/IconLibrary.tsx @@ -1,7 +1,7 @@ 'use client'; -import { Text, Icon, icons } from '../../../../packages/canon'; -import type { IconNames } from '../../../../packages/canon'; +import { Text, Icon, icons } from '../../../../packages/ui'; +import type { IconNames } from '../../../../packages/ui'; import styles from './styles.module.css'; export const IconLibrary = () => { diff --git a/docs-ui/src/components/PropsTable/PropsTable.tsx b/docs-ui/src/components/PropsTable/PropsTable.tsx index a017dc557c..8fedeb7c0c 100644 --- a/docs-ui/src/components/PropsTable/PropsTable.tsx +++ b/docs-ui/src/components/PropsTable/PropsTable.tsx @@ -2,7 +2,7 @@ import * as Table from '../Table'; import { Chip } from '../Chip'; -import { icons } from '../../../../packages/canon'; +import { icons } from '../../../../packages/ui'; // Define a more specific type for the data object type PropData = { diff --git a/docs-ui/src/components/Sidebar/Sidebar.module.css b/docs-ui/src/components/Sidebar/Sidebar.module.css index bfb2e6f648..7d2a13a3f3 100644 --- a/docs-ui/src/components/Sidebar/Sidebar.module.css +++ b/docs-ui/src/components/Sidebar/Sidebar.module.css @@ -34,7 +34,7 @@ .logoContainer { padding-left: 6px; - padding-top: 32px; + padding-top: 20px; } .logo path { diff --git a/docs-ui/src/components/Sidebar/index.tsx b/docs-ui/src/components/Sidebar/index.tsx index ad6df68b97..b3fdbfe168 100644 --- a/docs-ui/src/components/Sidebar/index.tsx +++ b/docs-ui/src/components/Sidebar/index.tsx @@ -13,14 +13,39 @@ export const Sidebar = () => {
- - + + + + + + + + + + + + + +
diff --git a/docs-ui/src/components/Sidebar/playground.tsx b/docs-ui/src/components/Sidebar/playground.tsx index 2aaa4fe2c6..d5dd9db892 100644 --- a/docs-ui/src/components/Sidebar/playground.tsx +++ b/docs-ui/src/components/Sidebar/playground.tsx @@ -1,7 +1,7 @@ 'use client'; import { components } from '@/utils/data'; -import { Checkbox } from '@backstage/canon'; +import { Checkbox } from '@backstage/ui'; import { motion } from 'motion/react'; import styles from './Sidebar.module.css'; import { usePathname } from 'next/navigation'; diff --git a/docs-ui/src/components/Toolbar/theme-name.tsx b/docs-ui/src/components/Toolbar/theme-name.tsx index 1d860bd1f4..3cf0d088ef 100644 --- a/docs-ui/src/components/Toolbar/theme-name.tsx +++ b/docs-ui/src/components/Toolbar/theme-name.tsx @@ -2,7 +2,7 @@ import { Select } from '@base-ui-components/react/select'; import styles from './theme-name.module.css'; -import { Icon } from '@backstage/canon'; +import { Icon } from '@backstage/ui'; import { usePlayground } from '@/utils/playground-context'; const themes = [ diff --git a/docs-ui/src/components/Toolbar/theme.tsx b/docs-ui/src/components/Toolbar/theme.tsx index 94224048ea..ef3d842056 100644 --- a/docs-ui/src/components/Toolbar/theme.tsx +++ b/docs-ui/src/components/Toolbar/theme.tsx @@ -1,7 +1,7 @@ 'use client'; import { Tabs } from '@base-ui-components/react/tabs'; -import { Icon } from '@backstage/canon'; +import { Icon } from '@backstage/ui'; import { usePlayground } from '@/utils/playground-context'; import styles from './theme.module.css'; diff --git a/docs-ui/src/content/components/avatar.mdx b/docs-ui/src/content/components/avatar.mdx index 418d19dcd4..f5d39809ab 100644 --- a/docs-ui/src/content/components/avatar.mdx +++ b/docs-ui/src/content/components/avatar.mdx @@ -25,12 +25,12 @@ An avatar component with a fallback for initials. component="avatar" usageCode={snippetUsage} classNames={[ - 'canon-AvatarRoot', - 'canon-AvatarRoot[data-size="small"]', - 'canon-AvatarRoot[data-size="medium"]', - 'canon-AvatarRoot[data-size="large"]', - 'canon-AvatarImage', - 'canon-AvatarFallback', + 'bui-AvatarRoot', + 'bui-AvatarRoot[data-size="small"]', + 'bui-AvatarRoot[data-size="medium"]', + 'bui-AvatarRoot[data-size="large"]', + 'bui-AvatarImage', + 'bui-AvatarFallback', ]} /> diff --git a/docs-ui/src/content/components/avatar.props.ts b/docs-ui/src/content/components/avatar.props.ts index ddcf852cb9..8cc53eeff3 100644 --- a/docs-ui/src/content/components/avatar.props.ts +++ b/docs-ui/src/content/components/avatar.props.ts @@ -18,7 +18,7 @@ export const avatarPropDefs: Record = { ...stylePropDefs, }; -export const snippetUsage = `import { Avatar } from '@backstage/canon'; +export const snippetUsage = `import { Avatar } from '@backstage/ui'; = { ...stylePropDefs, }; -export const snippetUsage = `import { Box } from '@backstage/canon'; +export const snippetUsage = `import { Box } from '@backstage/ui'; `; diff --git a/docs-ui/src/content/components/button-icon.mdx b/docs-ui/src/content/components/button-icon.mdx index b020b19f33..6d65f590df 100644 --- a/docs-ui/src/content/components/button-icon.mdx +++ b/docs-ui/src/content/components/button-icon.mdx @@ -27,7 +27,7 @@ A button component with a single icon that can be used to trigger actions. diff --git a/docs-ui/src/content/components/button-icon.props.ts b/docs-ui/src/content/components/button-icon.props.ts index a21bf3cd57..2ba7372a9c 100644 --- a/docs-ui/src/content/components/button-icon.props.ts +++ b/docs-ui/src/content/components/button-icon.props.ts @@ -29,7 +29,7 @@ export const buttonIconPropDefs: Record = { ...stylePropDefs, }; -export const buttonIconUsageSnippet = `import { ButtonIcon } from '@backstage/canon'; +export const buttonIconUsageSnippet = `import { ButtonIcon } from '@backstage/ui'; `; @@ -52,8 +52,8 @@ export const buttonIconDisabledSnippet = `} variant={{ initial: 'primary', lg: 'secondary' }} />`; -export const buttonIconAsLinkSnippet = `import { ButtonLink } from '@backstage/canon'; +export const buttonIconAsLinkSnippet = `import { ButtonLink } from '@backstage/ui'; - + Button `; diff --git a/docs-ui/src/content/components/button-link.mdx b/docs-ui/src/content/components/button-link.mdx index f6da987941..e4912e918c 100644 --- a/docs-ui/src/content/components/button-link.mdx +++ b/docs-ui/src/content/components/button-link.mdx @@ -26,7 +26,7 @@ A button component that can be used as a link. diff --git a/docs-ui/src/content/components/button-link.props.ts b/docs-ui/src/content/components/button-link.props.ts index b92b3154e5..758d6fd811 100644 --- a/docs-ui/src/content/components/button-link.props.ts +++ b/docs-ui/src/content/components/button-link.props.ts @@ -31,7 +31,7 @@ export const buttonLinkPropDefs: Record = { ...stylePropDefs, }; -export const buttonLinkSnippetUsage = `import { ButtonLink } from '@backstage/canon'; +export const buttonLinkSnippetUsage = `import { ButtonLink } from '@backstage/ui'; `; diff --git a/docs-ui/src/content/components/button.mdx b/docs-ui/src/content/components/button.mdx index c0053d0f5e..0ea0c5e33e 100644 --- a/docs-ui/src/content/components/button.mdx +++ b/docs-ui/src/content/components/button.mdx @@ -27,7 +27,7 @@ A button component that can be used to trigger actions. diff --git a/docs-ui/src/content/components/button.props.ts b/docs-ui/src/content/components/button.props.ts index b32cba4725..4647c20956 100644 --- a/docs-ui/src/content/components/button.props.ts +++ b/docs-ui/src/content/components/button.props.ts @@ -28,7 +28,7 @@ export const buttonPropDefs: Record = { ...stylePropDefs, }; -export const buttonSnippetUsage = `import { Button } from '@backstage/canon'; +export const buttonSnippetUsage = `import { Button } from '@backstage/ui';