Rename Canon everywhere in our docs

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

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
 

docs-ui/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "canon-docs",
+  "name": "docs-ui",
   "version": "0.1.0",
   "private": true,
   "scripts": {

docs-ui/src/app/(docs)/about/page.mdx

@@ -1,7 +1,7 @@
-# About Canon
+# About Backstage UI
 
-Canon is a design system created specifically for Backstage, built with React, TypeScript, and vanilla CSS.
-This open-source library is hosted in the Backstage monorepo. While it can be used in other projects, Canon
+Backstage UI is a design system created specifically for Backstage, built with React, TypeScript, and vanilla CSS.
+This open-source library is hosted in the Backstage monorepo. While it can be used in other projects, Backstage UI
 is designed to deliver a consistent, accessible, and extensible experience tailored to Backstage users.
 
 ## Philosophy
@@ -17,16 +17,16 @@ and flexible theming system.
 
 ## Team
 
-Canon is designed and maintained primarily by Spotify's Backstage team, leveraging Spotify's expertise in
+Backstage UI is designed and maintained primarily by Spotify's Backstage team, leveraging Spotify's expertise in
 crafting high-quality design and technology. Drawing from our experience in building reliable and intuitive
 user experiences for the music industry, we've created a design system that looks great and works seamlessly.
 
 ## Community
 
-Canon is an open-source project and we welcome contributions from the community. If you are interested in
-contributing to Canon, please read our [contributing guide](https://github.com/backstage/backstage/blob/master/CONTRIBUTING.md)
+Backstage UI is an open-source project and we welcome contributions from the community. If you are interested in
+contributing to Backstage UI, please read our [contributing guide](https://github.com/backstage/backstage/blob/master/CONTRIBUTING.md)
 and our [code of conduct](https://github.com/backstage/backstage/blob/master/CODE_OF_CONDUCT.md).
 
 ## License
 
-Canon is licensed under the Apache 2.0 license. See the [LICENSE](https://github.com/backstage/backstage/blob/master/LICENSE) file for more details.
+Backstage UI is licensed under the Apache 2.0 license. See the [LICENSE](https://github.com/backstage/backstage/blob/master/LICENSE) file for more details.

docs-ui/src/app/(docs)/changelog/page.mdx

@@ -6,8 +6,8 @@ import { Changelog } from '@/components/Changelog';
 
 ## Version 0.1.0
 
-We're excited to share the initial release of Canon 💚 In this first alpha version,
+We're excited to share the initial release of Backstage UI 💚 In this first alpha version,
 you'll find the foundation of our design system: a set of versatile layout components
-and a handful of essential atomic elements to help you get started. While Canon is
+and a handful of essential atomic elements to help you get started. While Backstage UI is
 still in its early stages, it's ready for exploration and we'd love for you to give
 it a try and share your feedback.

docs-ui/src/app/(docs)/layout.tsx

@@ -3,7 +3,7 @@ import type { Metadata } from 'next';
 import styles from './layout.module.css';
 
 export const metadata: Metadata = {
-  title: 'Canon',
+  title: 'Backstage UI',
   description: 'UI library for Backstage',
 };
 

docs-ui/src/app/(docs)/page.mdx

@@ -1,11 +1,8 @@
 import { CodeBlock } from '@/components/CodeBlock';
 
-<img
-  src="header.png"
-  style={{ width: '100%', marginBottom: '32px', marginTop: '64px' }}
-/>
+# 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.
 
-<CodeBlock lang="shell" code={`yarn add @backstage/canon`} />
+<CodeBlock lang="shell" code={`yarn add @backstage/ui`} />
 
 ### 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';
 
 <Flex>
   <Text>Hello World</Text>
@@ -40,10 +37,6 @@ import { Flex, Button, Text } from '@backstage/canon';
 </Flex>;
 ```
 
-## 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.

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

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.
 

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.
 
 <img
@@ -39,7 +39,7 @@ easier to identify the class name you can use, we use a specific structure for t
   style={{ width: '100%', marginBottom: '32px', marginTop: '16px' }}
 />
 
-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, ...
   <Table.Body>
     <Table.Row>
       <Table.Cell>
-        <Chip head>--canon-black</Chip>
+        <Chip head>--bui-black</Chip>
       </Table.Cell>
       <Table.Cell>
         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, ...
     </Table.Row>
     <Table.Row>
       <Table.Cell>
-        <Chip head>--canon-white</Chip>
+        <Chip head>--bui-white</Chip>
       </Table.Cell>
       <Table.Cell>
         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, ...
     </Table.Row>
     <Table.Row>
       <Table.Cell>
-        <Chip head>--canon-gray-1</Chip>
+        <Chip head>--bui-gray-1</Chip>
       </Table.Cell>
       <Table.Cell>You can use these mostly for backgrounds colors.</Table.Cell>
     </Table.Row>
     <Table.Row>
       <Table.Cell>
-        <Chip head>--canon-gray-2</Chip>
+        <Chip head>--bui-gray-2</Chip>
       </Table.Cell>
       <Table.Cell>You can use these mostly for backgrounds colors.</Table.Cell>
     </Table.Row>
     <Table.Row>
       <Table.Cell>
-        <Chip head>--canon-gray-3</Chip>
+        <Chip head>--bui-gray-3</Chip>
       </Table.Cell>
       <Table.Cell>You can use these mostly for backgrounds colors.</Table.Cell>
     </Table.Row>
     <Table.Row>
       <Table.Cell>
-        <Chip head>--canon-gray-4</Chip>
+        <Chip head>--bui-gray-4</Chip>
       </Table.Cell>
       <Table.Cell>You can use these mostly for backgrounds colors.</Table.Cell>
     </Table.Row>
     <Table.Row>
       <Table.Cell>
-        <Chip head>--canon-gray-5</Chip>
+        <Chip head>--bui-gray-5</Chip>
       </Table.Cell>
       <Table.Cell>You can use these mostly for backgrounds colors.</Table.Cell>
     </Table.Row>
     <Table.Row>
       <Table.Cell>
-        <Chip head>--canon-gray-6</Chip>
+        <Chip head>--bui-gray-6</Chip>
       </Table.Cell>
       <Table.Cell>You can use these mostly for backgrounds colors.</Table.Cell>
     </Table.Row>
     <Table.Row>
       <Table.Cell>
-        <Chip head>--canon-gray-7</Chip>
+        <Chip head>--bui-gray-7</Chip>
       </Table.Cell>
       <Table.Cell>You can use these mostly for backgrounds colors.</Table.Cell>
     </Table.Row>
     <Table.Row>
       <Table.Cell>
-        <Chip head>--canon-gray-8</Chip>
+        <Chip head>--bui-gray-8</Chip>
       </Table.Cell>
       <Table.Cell>You can use these mostly for backgrounds colors.</Table.Cell>
     </Table.Row>
@@ -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.
 
 <Table.Root>
@@ -139,85 +139,85 @@ color of your app.
   <Table.Body>
     <Table.Row>
       <Table.Cell>
-        <Chip head>--canon-bg</Chip>
+        <Chip head>--bui-bg</Chip>
       </Table.Cell>
       <Table.Cell>The background color of your Backstage instance.</Table.Cell>
     </Table.Row>
     <Table.Row>
       <Table.Cell>
-        <Chip head>--canon-bg-surface-1</Chip>
+        <Chip head>--bui-bg-surface-1</Chip>
       </Table.Cell>
       <Table.Cell>Use for any panels or elevated surfaces.</Table.Cell>
     </Table.Row>
     <Table.Row>
       <Table.Cell>
-        <Chip head>--canon-bg-surface-2</Chip>
+        <Chip head>--bui-bg-surface-2</Chip>
       </Table.Cell>
       <Table.Cell>Use for any panels or elevated surfaces.</Table.Cell>
     </Table.Row>
     <Table.Row>
       <Table.Cell>
-        <Chip head>--canon-bg-solid</Chip>
+        <Chip head>--bui-bg-solid</Chip>
       </Table.Cell>
       <Table.Cell>Used for solid background colors.</Table.Cell>
     </Table.Row>
     <Table.Row>
       <Table.Cell>
-        <Chip head>--canon-bg-solid-hover</Chip>
+        <Chip head>--bui-bg-solid-hover</Chip>
       </Table.Cell>
       <Table.Cell>Used for solid background colors when hovered.</Table.Cell>
     </Table.Row>
     <Table.Row>
       <Table.Cell>
-        <Chip head>--canon-bg-solid-pressed</Chip>
+        <Chip head>--bui-bg-solid-pressed</Chip>
       </Table.Cell>
       <Table.Cell>Used for solid background colors when pressed.</Table.Cell>
     </Table.Row>
     <Table.Row>
       <Table.Cell>
-        <Chip head>--canon-bg-solid-disabled</Chip>
+        <Chip head>--bui-bg-solid-disabled</Chip>
       </Table.Cell>
       <Table.Cell>Used for solid background colors when disabled.</Table.Cell>
     </Table.Row>
     <Table.Row>
       <Table.Cell>
-        <Chip head>--canon-bg-tint</Chip>
+        <Chip head>--bui-bg-tint</Chip>
       </Table.Cell>
       <Table.Cell>Used for tint background colors.</Table.Cell>
     </Table.Row>
     <Table.Row>
       <Table.Cell>
-        <Chip head>--canon-bg-tint-hover</Chip>
+        <Chip head>--bui-bg-tint-hover</Chip>
       </Table.Cell>
       <Table.Cell>Used for tint background colors when hovered.</Table.Cell>
     </Table.Row>
     <Table.Row>
       <Table.Cell>
-        <Chip head>--canon-bg-tint-focus</Chip>
+        <Chip head>--bui-bg-tint-focus</Chip>
       </Table.Cell>
       <Table.Cell>Used for tint background colors when active.</Table.Cell>
     </Table.Row>
     <Table.Row>
       <Table.Cell>
-        <Chip head>--canon-bg-tint-disabled</Chip>
+        <Chip head>--bui-bg-tint-disabled</Chip>
       </Table.Cell>
       <Table.Cell>Used for tint background colors when disabled.</Table.Cell>
     </Table.Row>
     <Table.Row>
       <Table.Cell>
-        <Chip head>--canon-bg-danger</Chip>
+        <Chip head>--bui-bg-danger</Chip>
       </Table.Cell>
       <Table.Cell>Used to show errors information.</Table.Cell>
     </Table.Row>
     <Table.Row>
       <Table.Cell>
-        <Chip head>--canon-bg-warning</Chip>
+        <Chip head>--bui-bg-warning</Chip>
       </Table.Cell>
       <Table.Cell>Used to show warnings information.</Table.Cell>
     </Table.Row>
     <Table.Row>
       <Table.Cell>
-        <Chip head>--canon-bg-success</Chip>
+        <Chip head>--bui-bg-success</Chip>
       </Table.Cell>
       <Table.Cell>Used to show success information.</Table.Cell>
     </Table.Row>
@@ -240,7 +240,7 @@ are prefixed with `fg` to make it easier to identify.
   <Table.Body>
     <Table.Row>
       <Table.Cell>
-        <Chip head>--canon-fg-primary</Chip>
+        <Chip head>--bui-fg-primary</Chip>
       </Table.Cell>
       <Table.Cell>
         It should be used on top of main background surfaces.
@@ -248,7 +248,7 @@ are prefixed with `fg` to make it easier to identify.
     </Table.Row>
     <Table.Row>
       <Table.Cell>
-        <Chip head>--canon-fg-secondary</Chip>
+        <Chip head>--bui-fg-secondary</Chip>
       </Table.Cell>
       <Table.Cell>
         It should be used on top of main background surfaces.
@@ -256,7 +256,7 @@ are prefixed with `fg` to make it easier to identify.
     </Table.Row>
     <Table.Row>
       <Table.Cell>
-        <Chip head>--canon-fg-link</Chip>
+        <Chip head>--bui-fg-link</Chip>
       </Table.Cell>
       <Table.Cell>
         It should be used on top of main background surfaces.
@@ -264,7 +264,7 @@ are prefixed with `fg` to make it easier to identify.
     </Table.Row>
     <Table.Row>
       <Table.Cell>
-        <Chip head>--canon-fg-link-hover</Chip>
+        <Chip head>--bui-fg-link-hover</Chip>
       </Table.Cell>
       <Table.Cell>
         It should be used on top of main background surfaces.
@@ -272,7 +272,7 @@ are prefixed with `fg` to make it easier to identify.
     </Table.Row>
     <Table.Row>
       <Table.Cell>
-        <Chip head>--canon-fg-disabled</Chip>
+        <Chip head>--bui-fg-disabled</Chip>
       </Table.Cell>
       <Table.Cell>
         It should be used on top of main background surfaces.
@@ -280,7 +280,7 @@ are prefixed with `fg` to make it easier to identify.
     </Table.Row>
     <Table.Row>
       <Table.Cell>
-        <Chip head>--canon-fg-solid</Chip>
+        <Chip head>--bui-fg-solid</Chip>
       </Table.Cell>
       <Table.Cell>
         It should be used on top of solid background colors.
@@ -288,7 +288,7 @@ are prefixed with `fg` to make it easier to identify.
     </Table.Row>
     <Table.Row>
       <Table.Cell>
-        <Chip head>--canon-fg-tint</Chip>
+        <Chip head>--bui-fg-tint</Chip>
       </Table.Cell>
       <Table.Cell>
         It should be used on top of tint background colors.
@@ -296,7 +296,7 @@ are prefixed with `fg` to make it easier to identify.
     </Table.Row>
     <Table.Row>
       <Table.Cell>
-        <Chip head>--canon-fg-tint-disabled</Chip>
+        <Chip head>--bui-fg-tint-disabled</Chip>
       </Table.Cell>
       <Table.Cell>
         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.
     </Table.Row>
     <Table.Row>
       <Table.Cell>
-        <Chip head>--canon-fg-danger</Chip>
+        <Chip head>--bui-fg-danger</Chip>
       </Table.Cell>
       <Table.Cell>
         It should be used on top of danger background colors.
@@ -312,7 +312,7 @@ are prefixed with `fg` to make it easier to identify.
     </Table.Row>
     <Table.Row>
       <Table.Cell>
-        <Chip head>--canon-fg-warning</Chip>
+        <Chip head>--bui-fg-warning</Chip>
       </Table.Cell>
       <Table.Cell>
         It should be used on top of warning background colors.
@@ -320,7 +320,7 @@ are prefixed with `fg` to make it easier to identify.
     </Table.Row>
     <Table.Row>
       <Table.Cell>
-        <Chip head>--canon-fg-success</Chip>
+        <Chip head>--bui-fg-success</Chip>
       </Table.Cell>
       <Table.Cell>
         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.
   <Table.Body>
     <Table.Row>
       <Table.Cell>
-        <Chip head>--canon-border</Chip>
-      </Table.Cell>
-      <Table.Cell>
-        It should be used on top of `--canon-bg-surface-1`.
+        <Chip head>--bui-border</Chip>
       </Table.Cell>
+      <Table.Cell>It should be used on top of `--bui-bg-surface-1`.</Table.Cell>
     </Table.Row>
     <Table.Row>
       <Table.Cell>
-        <Chip head>--canon-border-hover</Chip>
+        <Chip head>--bui-border-hover</Chip>
       </Table.Cell>
       <Table.Cell>
         Used when the component is interactive and hovered.
@@ -360,7 +358,7 @@ low contrast to help as a separator with the different background colors.
     </Table.Row>
     <Table.Row>
       <Table.Cell>
-        <Chip head>--canon-border-pressed</Chip>
+        <Chip head>--bui-border-pressed</Chip>
       </Table.Cell>
       <Table.Cell>
         Used when the component is interactive and focused.
@@ -368,27 +366,27 @@ low contrast to help as a separator with the different background colors.
     </Table.Row>
     <Table.Row>
       <Table.Cell>
-        <Chip head>--canon-border-disabled</Chip>
+        <Chip head>--bui-border-disabled</Chip>
       </Table.Cell>
       <Table.Cell>Used when the component is disabled.</Table.Cell>
     </Table.Row>
     <Table.Row>
       <Table.Cell>
-        <Chip head>--canon-border-danger</Chip>
+        <Chip head>--bui-border-danger</Chip>
       </Table.Cell>
-      <Table.Cell>It should be used on top of `--canon-bg-danger`.</Table.Cell>
+      <Table.Cell>It should be used on top of `--bui-bg-danger`.</Table.Cell>
     </Table.Row>
     <Table.Row>
       <Table.Cell>
-        <Chip head>--canon-border-warning</Chip>
+        <Chip head>--bui-border-warning</Chip>
       </Table.Cell>
-      <Table.Cell>It should be used on top of `--canon-bg-warning`.</Table.Cell>
+      <Table.Cell>It should be used on top of `--bui-bg-warning`.</Table.Cell>
     </Table.Row>
     <Table.Row>
       <Table.Cell>
-        <Chip head>--canon-border-success</Chip>
+        <Chip head>--bui-border-success</Chip>
       </Table.Cell>
-      <Table.Cell>It should be used on top of `--canon-bg-success`.</Table.Cell>
+      <Table.Cell>It should be used on top of `--bui-bg-success`.</Table.Cell>
     </Table.Row>
   </Table.Body>
 </Table.Root>
@@ -407,19 +405,19 @@ These colors are used for special purposes like ring, scrollbar, ...
   <Table.Body>
     <Table.Row>
       <Table.Cell>
-        <Chip head>--canon-ring</Chip>
+        <Chip head>--bui-ring</Chip>
       </Table.Cell>
       <Table.Cell>The color of the ring.</Table.Cell>
     </Table.Row>
     <Table.Row>
       <Table.Cell>
-        <Chip head>--canon-scrollbar</Chip>
+        <Chip head>--bui-scrollbar</Chip>
       </Table.Cell>
       <Table.Cell>The color of the scrollbar.</Table.Cell>
     </Table.Row>
     <Table.Row>
       <Table.Cell>
-        <Chip head>--canon-scrollbar-thumb</Chip>
+        <Chip head>--bui-scrollbar-thumb</Chip>
       </Table.Cell>
       <Table.Cell>The color of the scrollbar thumb.</Table.Cell>
     </Table.Row>
@@ -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.
   <Table.Body>
     <Table.Row>
       <Table.Cell>
-        <Chip head>--canon-font-regular</Chip>
+        <Chip head>--bui-font-regular</Chip>
       </Table.Cell>
       <Table.Cell>The sans-serif font for the theme.</Table.Cell>
     </Table.Row>
     <Table.Row>
       <Table.Cell>
-        <Chip head>--canon-font-mono</Chip>
+        <Chip head>--bui-font-mono</Chip>
       </Table.Cell>
       <Table.Cell>The monospace font for the theme.</Table.Cell>
     </Table.Row>
@@ -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.
 
 <Table.Root>
   <Table.Header>
@@ -469,13 +467,13 @@ We have two font weights that we use across Canon. Regular or Bold.
   <Table.Body>
     <Table.Row>
       <Table.Cell>
-        <Chip head>--canon-font-weight-regular</Chip>
+        <Chip head>--bui-font-weight-regular</Chip>
       </Table.Cell>
       <Table.Cell>The regular font weight for the theme.</Table.Cell>
     </Table.Row>
     <Table.Row>
       <Table.Cell>
-        <Chip head>--canon-font-weight-bold</Chip>
+        <Chip head>--bui-font-weight-bold</Chip>
       </Table.Cell>
       <Table.Cell>The bold font weight for the theme.</Table.Cell>
     </Table.Row>
@@ -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.
 
 <Table.Root>
@@ -502,7 +500,7 @@ calculate the other values.
   <Table.Body>
     <Table.Row>
       <Table.Cell>
-        <Chip head>--canon-space</Chip>
+        <Chip head>--bui-space</Chip>
       </Table.Cell>
       <Table.Cell>
         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, ...
   <Table.Body>
     <Table.Row>
       <Table.Cell>
-        <Chip head>--canon-space-0_5</Chip>
+        <Chip head>--bui-space-0_5</Chip>
       </Table.Cell>
-      <Table.Cell>Base unit (`--canon-space`) times 0.5.</Table.Cell>
+      <Table.Cell>Base unit (`--bui-space`) times 0.5.</Table.Cell>
     </Table.Row>
     <Table.Row>
       <Table.Cell>
-        <Chip head>--canon-space-1</Chip>
+        <Chip head>--bui-space-1</Chip>
       </Table.Cell>
-      <Table.Cell>Base unit (`--canon-space`).</Table.Cell>
+      <Table.Cell>Base unit (`--bui-space`).</Table.Cell>
     </Table.Row>
     <Table.Row>
       <Table.Cell>
-        <Chip head>--canon-space-1_5</Chip>
+        <Chip head>--bui-space-1_5</Chip>
       </Table.Cell>
-      <Table.Cell>Base unit (`--canon-space`) times 1.5.</Table.Cell>
+      <Table.Cell>Base unit (`--bui-space`) times 1.5.</Table.Cell>
     </Table.Row>
     <Table.Row>
       <Table.Cell>
-        <Chip head>--canon-space-2</Chip>
+        <Chip head>--bui-space-2</Chip>
       </Table.Cell>
-      <Table.Cell>Base unit (`--canon-space`) times 2.</Table.Cell>
+      <Table.Cell>Base unit (`--bui-space`) times 2.</Table.Cell>
     </Table.Row>
     <Table.Row>
       <Table.Cell>
-        <Chip head>--canon-space-3</Chip>
+        <Chip head>--bui-space-3</Chip>
       </Table.Cell>
-      <Table.Cell>Base unit (`--canon-space`) times 3.</Table.Cell>
+      <Table.Cell>Base unit (`--bui-space`) times 3.</Table.Cell>
     </Table.Row>
     <Table.Row>
       <Table.Cell>
-        <Chip head>--canon-space-4</Chip>
+        <Chip head>--bui-space-4</Chip>
       </Table.Cell>
-      <Table.Cell>Base unit (`--canon-space`) times 4.</Table.Cell>
+      <Table.Cell>Base unit (`--bui-space`) times 4.</Table.Cell>
     </Table.Row>
     <Table.Row>
       <Table.Cell>
-        <Chip head>--canon-space-5</Chip>
+        <Chip head>--bui-space-5</Chip>
       </Table.Cell>
-      <Table.Cell>Base unit (`--canon-space`) times 5.</Table.Cell>
+      <Table.Cell>Base unit (`--bui-space`) times 5.</Table.Cell>
     </Table.Row>
     <Table.Row>
       <Table.Cell>
-        <Chip head>--canon-space-6</Chip>
+        <Chip head>--bui-space-6</Chip>
       </Table.Cell>
-      <Table.Cell>Base unit (`--canon-space`) times 6.</Table.Cell>
+      <Table.Cell>Base unit (`--bui-space`) times 6.</Table.Cell>
     </Table.Row>
     <Table.Row>
       <Table.Cell>
-        <Chip head>--canon-space-7</Chip>
+        <Chip head>--bui-space-7</Chip>
       </Table.Cell>
-      <Table.Cell>Base unit (`--canon-space`) times 7.</Table.Cell>
+      <Table.Cell>Base unit (`--bui-space`) times 7.</Table.Cell>
     </Table.Row>
     <Table.Row>
       <Table.Cell>
-        <Chip head>--canon-space-8</Chip>
+        <Chip head>--bui-space-8</Chip>
       </Table.Cell>
-      <Table.Cell>Base unit (`--canon-space`) times 8.</Table.Cell>
+      <Table.Cell>Base unit (`--bui-space`) times 8.</Table.Cell>
     </Table.Row>
     <Table.Row>
       <Table.Cell>
-        <Chip head>--canon-space-9</Chip>
+        <Chip head>--bui-space-9</Chip>
       </Table.Cell>
-      <Table.Cell>Base unit (`--canon-space`) times 9.</Table.Cell>
+      <Table.Cell>Base unit (`--bui-space`) times 9.</Table.Cell>
     </Table.Row>
     <Table.Row>
       <Table.Cell>
-        <Chip head>--canon-space-10</Chip>
+        <Chip head>--bui-space-10</Chip>
       </Table.Cell>
-      <Table.Cell>Base unit (`--canon-space`) times 10.</Table.Cell>
+      <Table.Cell>Base unit (`--bui-space`) times 10.</Table.Cell>
     </Table.Row>
     <Table.Row>
       <Table.Cell>
-        <Chip head>--canon-space-11</Chip>
+        <Chip head>--bui-space-11</Chip>
       </Table.Cell>
-      <Table.Cell>Base unit (`--canon-space`) times 11.</Table.Cell>
+      <Table.Cell>Base unit (`--bui-space`) times 11.</Table.Cell>
     </Table.Row>
     <Table.Row>
       <Table.Cell>
-        <Chip head>--canon-space-12</Chip>
+        <Chip head>--bui-space-12</Chip>
       </Table.Cell>
-      <Table.Cell>Base unit (`--canon-space`) times 12.</Table.Cell>
+      <Table.Cell>Base unit (`--bui-space`) times 12.</Table.Cell>
     </Table.Row>
     <Table.Row>
       <Table.Cell>
-        <Chip head>--canon-space-13</Chip>
+        <Chip head>--bui-space-13</Chip>
       </Table.Cell>
-      <Table.Cell>Base unit (`--canon-space`) times 13.</Table.Cell>
+      <Table.Cell>Base unit (`--bui-space`) times 13.</Table.Cell>
     </Table.Row>
     <Table.Row>
       <Table.Cell>
-        <Chip head>--canon-space-14</Chip>
+        <Chip head>--bui-space-14</Chip>
       </Table.Cell>
-      <Table.Cell>Base unit (`--canon-space`) times 14.</Table.Cell>
+      <Table.Cell>Base unit (`--bui-space`) times 14.</Table.Cell>
     </Table.Row>
   </Table.Body>
 </Table.Root>
@@ -635,7 +633,7 @@ We use a radius system to make sure that the components have a consistent look a
   <Table.Body>
     <Table.Row>
       <Table.Cell>
-        <Chip head>--canon-radius-1</Chip>
+        <Chip head>--bui-radius-1</Chip>
       </Table.Cell>
       <Table.Cell>
         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
     </Table.Row>
     <Table.Row>
       <Table.Cell>
-        <Chip head>--canon-radius-2</Chip>
+        <Chip head>--bui-radius-2</Chip>
       </Table.Cell>
       <Table.Cell>
         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
     </Table.Row>
     <Table.Row>
       <Table.Cell>
-        <Chip head>--canon-radius-3</Chip>
+        <Chip head>--bui-radius-3</Chip>
       </Table.Cell>
       <Table.Cell>
         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
     </Table.Row>
     <Table.Row>
       <Table.Cell>
-        <Chip head>--canon-radius-4</Chip>
+        <Chip head>--bui-radius-4</Chip>
       </Table.Cell>
       <Table.Cell>
         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
     </Table.Row>
     <Table.Row>
       <Table.Cell>
-        <Chip head>--canon-radius-5</Chip>
+        <Chip head>--bui-radius-5</Chip>
       </Table.Cell>
       <Table.Cell>
         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
     </Table.Row>
     <Table.Row>
       <Table.Cell>
-        <Chip head>--canon-radius-6</Chip>
+        <Chip head>--bui-radius-6</Chip>
       </Table.Cell>
       <Table.Cell>
         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
     </Table.Row>
     <Table.Row>
       <Table.Cell>
-        <Chip head>--canon-radius-full</Chip>
+        <Chip head>--bui-radius-full</Chip>
       </Table.Cell>
       <Table.Cell>
         The radius of the component. Default value is `9999px`.

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

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

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

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

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

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 {

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

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

docs-ui/src/components/Sidebar/Sidebar.module.css

@@ -34,7 +34,7 @@
 
 .logoContainer {
   padding-left: 6px;
-  padding-top: 32px;
+  padding-top: 20px;
 }
 
 .logo path {

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

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

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

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

docs-ui/src/content/components/avatar.props.ts

@@ -18,7 +18,7 @@ export const avatarPropDefs: Record<string, PropDef> = {
   ...stylePropDefs,
 };
 
-export const snippetUsage = `import { Avatar } from '@backstage/canon';
+export const snippetUsage = `import { Avatar } from '@backstage/ui';
 
 <Avatar
   src="https://avatars.githubusercontent.com/u/1540635?v=4"

docs-ui/src/content/components/box.mdx

@@ -14,7 +14,7 @@ import { ComponentInfos } from '@/components/ComponentInfos';
 
 # Box
 
-Box is the lowest-level component in Canon. It provides a consistent API for styling and layout.
+Box is the lowest-level component in Backstage UI. It provides a consistent API for styling and layout.
 
 <Snippet
   py={4}

docs-ui/src/content/components/box.props.ts

@@ -23,7 +23,7 @@ export const boxPropDefs: Record<string, PropDef> = {
   ...stylePropDefs,
 };
 
-export const snippetUsage = `import { Box } from '@backstage/canon';
+export const snippetUsage = `import { Box } from '@backstage/ui';
 
 <Box />`;
 

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.
 
 <ComponentInfos
   component="button-icon"
-  classNames={['canon-Button', 'canon-ButtonIcon']}
+  classNames={['bui-Button', 'bui-ButtonIcon']}
   usageCode={buttonIconUsageSnippet}
 />
 

docs-ui/src/content/components/button-icon.props.ts

@@ -29,7 +29,7 @@ export const buttonIconPropDefs: Record<string, PropDef> = {
   ...stylePropDefs,
 };
 
-export const buttonIconUsageSnippet = `import { ButtonIcon } from '@backstage/canon';
+export const buttonIconUsageSnippet = `import { ButtonIcon } from '@backstage/ui';
 
 <ButtonIcon />`;
 
@@ -52,8 +52,8 @@ export const buttonIconDisabledSnippet = `<ButtonIcon icon={<Icon name="cloud" /
 
 export const buttonIconResponsiveSnippet = `<ButtonIcon icon={<Icon name="cloud" />} variant={{ initial: 'primary', lg: 'secondary' }} />`;
 
-export const buttonIconAsLinkSnippet = `import { ButtonLink } from '@backstage/canon';
+export const buttonIconAsLinkSnippet = `import { ButtonLink } from '@backstage/ui';
 
-<ButtonLink href="https://canon.backstage.io" target="_blank">
+<ButtonLink href="https://ui.backstage.io" target="_blank">
   Button
 </ButtonLink>`;

docs-ui/src/content/components/button-link.mdx

@@ -26,7 +26,7 @@ A button component that can be used as a link.
 
 <ComponentInfos
   component="button-link"
-  classNames={['canon-Button', 'canon-ButtonLink']}
+  classNames={['bui-Button', 'bui-ButtonLink']}
   usageCode={buttonLinkSnippetUsage}
 />
 

docs-ui/src/content/components/button-link.props.ts

@@ -31,7 +31,7 @@ export const buttonLinkPropDefs: Record<string, PropDef> = {
   ...stylePropDefs,
 };
 
-export const buttonLinkSnippetUsage = `import { ButtonLink } from '@backstage/canon';
+export const buttonLinkSnippetUsage = `import { ButtonLink } from '@backstage/ui';
 
 <ButtonLink />`;
 

docs-ui/src/content/components/button.mdx

@@ -27,7 +27,7 @@ A button component that can be used to trigger actions.
 
 <ComponentInfos
   component="button"
-  classNames={['canon-Button']}
+  classNames={['bui-Button']}
   usageCode={buttonSnippetUsage}
 />
 

docs-ui/src/content/components/button.props.ts

@@ -28,7 +28,7 @@ export const buttonPropDefs: Record<string, PropDef> = {
   ...stylePropDefs,
 };
 
-export const buttonSnippetUsage = `import { Button } from '@backstage/canon';
+export const buttonSnippetUsage = `import { Button } from '@backstage/ui';
 
 <Button />`;
 
@@ -65,8 +65,8 @@ export const buttonResponsiveSnippet = `<Button variant={{ initial: 'primary', l
   Responsive Button
 </Button>`;
 
-export const buttonAsLinkSnippet = `import { ButtonLink } from '@backstage/canon';
+export const buttonAsLinkSnippet = `import { ButtonLink } from '@backstage/ui';
 
-<ButtonLink href="https://canon.backstage.io" target="_blank">
+<ButtonLink href="https://ui.backstage.io" target="_blank">
   Button
 </ButtonLink>`;

docs-ui/src/content/components/card.mdx

@@ -27,12 +27,7 @@ A card component that can be used to display content in a box.
 
 <ComponentInfos
   component="card"
-  classNames={[
-    'canon-Card',
-    'canon-CardHeader',
-    'canon-CardBody',
-    'canon-CardFooter',
-  ]}
+  classNames={['bui-Card', 'bui-CardHeader', 'bui-CardBody', 'bui-CardFooter']}
   usageCode={cardUsageSnippet}
 />
 

docs-ui/src/content/components/card.props.ts

@@ -24,7 +24,7 @@ export const cardFooterPropDefs: Record<string, PropDef> = {
   ...stylePropDefs,
 };
 
-export const cardUsageSnippet = `import { card } from '@backstage/canon';
+export const cardUsageSnippet = `import { card } from '@backstage/ui';
 
 <Card>
   <CardHeader>Header</CardHeader>

docs-ui/src/content/components/checkbox.mdx

@@ -23,7 +23,7 @@ A checkbox component that can be used to trigger actions.
 
 <ComponentInfos
   component="checkbox"
-  classNames={['canon-Checkbox']}
+  classNames={['bui-Checkbox']}
   usageCode={checkboxUsageSnippet}
 />
 

docs-ui/src/content/components/checkbox.props.ts

@@ -46,7 +46,7 @@ export const checkboxPropDefs: Record<string, PropDef> = {
   ...stylePropDefs,
 };
 
-export const checkboxUsageSnippet = `import { Checkbox } from '@backstage/canon';
+export const checkboxUsageSnippet = `import { Checkbox } from '@backstage/ui';
 
 <Checkbox />`;
 

docs-ui/src/content/components/collapsible.mdx

@@ -28,9 +28,9 @@ An avatar component with a fallback for initials.
 <ComponentInfos
   component="collapsible"
   classNames={[
-    'canon-CollapsibleRoot',
-    'canon-CollapsibleTrigger',
-    'canon-CollapsiblePanel',
+    'bui-CollapsibleRoot',
+    'bui-CollapsibleTrigger',
+    'bui-CollapsiblePanel',
   ]}
   usageCode={collapsibleUsageSnippet}
 />

docs-ui/src/content/components/collapsible.props.ts

@@ -42,7 +42,7 @@ export const collapsiblePanelPropDefs: Record<string, PropDef> = {
   ...stylePropDefs,
 };
 
-export const collapsibleUsageSnippet = `import { Collapsible } from '@backstage/canon';
+export const collapsibleUsageSnippet = `import { Collapsible } from '@backstage/ui';
 
 <Collapsible.Root>
     <Collapsible.Trigger render={(props, state) => (

docs-ui/src/content/components/container.mdx

@@ -24,7 +24,7 @@ content on the page.
 
 <ComponentInfos
   component="container"
-  classNames={['canon-Container']}
+  classNames={['bui-Container']}
   usageCode={containerUsageSnippet}
 />
 

docs-ui/src/content/components/container.props.ts

@@ -11,7 +11,7 @@ export const containerPropDefs: Record<string, PropDef> = {
   ...stylePropDefs,
 };
 
-export const containerUsageSnippet = `import { Container } from "@backstage/canon";
+export const containerUsageSnippet = `import { Container } from "@backstage/ui";
 
 <Container>Hello World!</Container>`;
 

docs-ui/src/content/components/flex.mdx

@@ -27,7 +27,7 @@ A responsive flex container component for vertical stacking with customizable ga
 
 <ComponentInfos
   component="flex"
-  classNames={['canon-Flex']}
+  classNames={['bui-Flex']}
   usageCode={flexUsageSnippet}
 />
 

docs-ui/src/content/components/flex.props.ts

@@ -26,7 +26,7 @@ export const flexPropDefs: Record<string, PropDef> = {
   ...stylePropDefs,
 };
 
-export const flexUsageSnippet = `import { Flex } from '@backstage/canon';
+export const flexUsageSnippet = `import { Flex } from '@backstage/ui';
 
 <Flex />`;
 

docs-ui/src/content/components/grid.mdx

@@ -29,7 +29,7 @@ more complex ones.
 
 <ComponentInfos
   component="grid"
-  classNames={['canon-Grid', 'canon-GridItem']}
+  classNames={['bui-Grid', 'bui-GridItem']}
   usageCode={gridUsageSnippet}
 />
 

docs-ui/src/content/components/grid.props.ts

@@ -58,7 +58,7 @@ export const gridItemPropDefs: Record<string, PropDef> = {
   ...stylePropDefs,
 };
 
-export const gridUsageSnippet = `import { Grid } from '@backstage/canon';
+export const gridUsageSnippet = `import { Grid } from '@backstage/ui';
 
 <Grid />`;
 

docs-ui/src/content/components/heading.mdx

@@ -24,7 +24,7 @@ Headings are used to structure the content of your page.
 
 <ComponentInfos
   component="heading"
-  classNames={['canon-Heading']}
+  classNames={['bui-Heading']}
   usageCode={headingUsageSnippet}
 />
 

docs-ui/src/content/components/heading.props.ts

@@ -23,7 +23,7 @@ export const headingPropDefs: Record<string, PropDef> = {
   ...stylePropDefs,
 };
 
-export const headingUsageSnippet = `import { Heading } from '@backstage/canon';
+export const headingUsageSnippet = `import { Heading } from '@backstage/ui';
 
 <Heading />`;
 

docs-ui/src/content/components/icon.mdx

@@ -22,7 +22,7 @@ Icons are used to represent an action or a state.
 
 <ComponentInfos
   component="icon"
-  classNames={['canon-Icon']}
+  classNames={['bui-Icon']}
   usageCode={iconUsageSnippet}
 />
 

docs-ui/src/content/components/icon.props.ts

@@ -18,7 +18,7 @@ export const iconPropDefs: Record<string, PropDef> = {
   ...stylePropDefs,
 };
 
-export const iconUsageSnippet = `import { Icon } from '@backstage/canon';
+export const iconUsageSnippet = `import { Icon } from '@backstage/ui';
 
 <Icon />`;
 

docs-ui/src/content/components/link.mdx

@@ -29,13 +29,13 @@ A link component that renders a `<a>` element.
 <ComponentInfos
   component="link"
   classNames={[
-    'canon-Link',
-    "canon-Link[data-variant='body']",
-    "canon-Link[data-variant='subtitle']",
-    "canon-Link[data-variant='caption']",
-    "canon-Link[data-variant='label']",
-    "canon-Link[data-weight='regular']",
-    "canon-Link[data-weight='bold']",
+    'bui-Link',
+    "bui-Link[data-variant='body']",
+    "bui-Link[data-variant='subtitle']",
+    "bui-Link[data-variant='caption']",
+    "bui-Link[data-variant='label']",
+    "bui-Link[data-weight='regular']",
+    "bui-Link[data-weight='bold']",
   ]}
   usageCode={linkUsageSnippet}
 />

docs-ui/src/content/components/link.props.ts

@@ -24,20 +24,20 @@ export const linkPropDefs: Record<string, PropDef> = {
   ...stylePropDefs,
 };
 
-export const linkUsageSnippet = `import { Link } from '@backstage/canon';
+export const linkUsageSnippet = `import { Link } from '@backstage/ui';
 
 <Link href="https://backstage.io">Sign up for Backstage</Link>`;
 
 export const linkDefaultSnippet = `<Link href="https://backstage.io">Sign up for Backstage</Link>`;
 
 export const linkVariantsSnippet = `<Flex gap="4" direction="column">
-  <Link href="https://canon.backstage.io" variant="subtitle" />
-  <Link href="https://canon.backstage.io" variant="body" />
-  <Link href="https://canon.backstage.io" variant="caption" />
-  <Link href="https://canon.backstage.io" variant="label" />
+  <Link href="https://ui.backstage.io" variant="subtitle" />
+  <Link href="https://ui.backstage.io" variant="body" />
+  <Link href="https://ui.backstage.io" variant="caption" />
+  <Link href="https://ui.backstage.io" variant="label" />
 </Flex>`;
 
 export const linkWeightsSnippet = `<Flex gap="4" direction="column">
-  <Link href="https://canon.backstage.io" weight="regular" />
-  <Link href="https://canon.backstage.io" weight="bold" />
+  <Link href="https://ui.backstage.io" weight="regular" />
+  <Link href="https://ui.backstage.io" weight="bold" />
 </Flex>`;

docs-ui/src/content/components/menu.mdx

@@ -29,21 +29,21 @@ A list of actions in a dropdown, enhanced with keyboard navigation.
 <ComponentInfos
   component="menu"
   classNames={[
-    'canon-MenuTrigger',
-    'canon-MenuBackdrop',
-    'canon-MenuPositioner',
-    'canon-MenuPopup',
-    'canon-MenuArrow',
-    'canon-MenuItem',
-    'canon-MenuGroup',
-    'canon-MenuGroupLabel',
-    'canon-MenuRadioGroup',
-    'canon-MenuRadioItem',
-    'canon-MenuRadioItemIndicator',
-    'canon-MenuCheckboxItem',
-    'canon-MenuCheckboxItemIndicator',
-    'canon-MenuSubmenuTrigger',
-    'canon-MenuSeparator',
+    'bui-MenuTrigger',
+    'bui-MenuBackdrop',
+    'bui-MenuPositioner',
+    'bui-MenuPopup',
+    'bui-MenuArrow',
+    'bui-MenuItem',
+    'bui-MenuGroup',
+    'bui-MenuGroupLabel',
+    'bui-MenuRadioGroup',
+    'bui-MenuRadioItem',
+    'bui-MenuRadioItemIndicator',
+    'bui-MenuCheckboxItem',
+    'bui-MenuCheckboxItemIndicator',
+    'bui-MenuSubmenuTrigger',
+    'bui-MenuSeparator',
   ]}
   usageCode={menuUsageSnippet}
 />

docs-ui/src/content/components/menu.props.ts

@@ -141,7 +141,7 @@ export const menuItemPropDefs: Record<string, PropDef> = {
   ...stylePropDefs,
 };
 
-export const menuUsageSnippet = `import { Menu } from '@backstage/canon';
+export const menuUsageSnippet = `import { Menu } from '@backstage/ui';
 
 <Menu.Root>
   <Menu.Trigger />

docs-ui/src/content/components/radio-group.mdx

@@ -27,7 +27,7 @@ A radio group allows a user to select a single item from a list of mutually excl
 
 <ComponentInfos
   component="radio-group"
-  classNames={['canon-RadioGroup', 'canon-RadioGroupContent']}
+  classNames={['bui-RadioGroup', 'bui-RadioGroupContent']}
   usageCode={radioGroupUsageSnippet}
 />
 

docs-ui/src/content/components/radio-group.props.ts

@@ -29,7 +29,7 @@ export const radioGroupPropDefs: Record<string, PropDef> = {
   ...stylePropDefs,
 };
 
-export const radioGroupUsageSnippet = `import { RadioGroup } from '@backstage/canon';
+export const radioGroupUsageSnippet = `import { RadioGroup } from '@backstage/ui';
 
 <RadioGroup />`;
 

docs-ui/src/content/components/search-field.mdx

@@ -24,16 +24,16 @@ A SearchField is a text field designed for searches.
 <ComponentInfos
   component="searchfield"
   classNames={[
-    'canon-SearchField',
-    'canon-TextField',
-    'canon-InputWrapper',
-    'canon-Input',
-    'canon-InputIcon',
-    'canon-FieldLabelWrapper',
-    'canon-FieldLabel',
-    'canon-FieldDescription',
-    'canon-FieldSecondaryLabel',
-    'canon-FieldError',
+    'bui-SearchField',
+    'bui-TextField',
+    'bui-InputWrapper',
+    'bui-Input',
+    'bui-InputIcon',
+    'bui-FieldLabelWrapper',
+    'bui-FieldLabel',
+    'bui-FieldDescription',
+    'bui-FieldSecondaryLabel',
+    'bui-FieldError',
   ]}
   usageCode={searchFieldUsageSnippet}
 />

docs-ui/src/content/components/search-field.props.ts

@@ -29,7 +29,7 @@ export const searchFieldPropDefs: Record<string, PropDef> = {
   ...stylePropDefs,
 };
 
-export const searchFieldUsageSnippet = `import { SearchField } from '@backstage/canon';
+export const searchFieldUsageSnippet = `import { SearchField } from '@backstage/ui';
 
 <SearchField />`;
 

docs-ui/src/content/components/select.props.ts

@@ -94,7 +94,7 @@ export const selectPropDefs: Record<string, PropDef> = {
   ...stylePropDefs,
 };
 
-export const selectUsageSnippet = `import { Select } from '@backstage/canon';
+export const selectUsageSnippet = `import { Select } from '@backstage/ui';
 
 <Select
     name="font"

docs-ui/src/content/components/skeleton.mdx

@@ -24,7 +24,7 @@ Use to show a placeholder while content is loading.
 
 <ComponentInfos
   component="skeleton"
-  classNames={['canon-Skeleton']}
+  classNames={['bui-Skeleton']}
   usageCode={skeletonUsageSnippet}
 />
 

docs-ui/src/content/components/skeleton.props.ts

@@ -24,7 +24,7 @@ export const skeletonPropDefs: Record<string, PropDef> = {
   ...stylePropDefs,
 };
 
-export const skeletonUsageSnippet = `import { Flex, Skeleton } from '@backstage/canon';
+export const skeletonUsageSnippet = `import { Flex, Skeleton } from '@backstage/ui';
 
 <Flex direction="column" gap="4">
   <Skeleton width={400} height={160} />

docs-ui/src/content/components/switch.mdx

@@ -19,7 +19,7 @@ A control that indicates whether a setting is on or off.
 <ComponentInfos
   component="switch"
   usageCode={snippetUsage}
-  classNames={['canon-Switch', 'canon-SwitchIndicator']}
+  classNames={['bui-Switch', 'bui-SwitchIndicator']}
 />
 
 ## API reference

docs-ui/src/content/components/switch.props.ts

@@ -66,6 +66,6 @@ export const switchPropDefs: Record<string, PropDef> = {
   },
 };
 
-export const snippetUsage = `import { Switch } from '@backstage/canon';
+export const snippetUsage = `import { Switch } from '@backstage/ui';
 
 <Switch />`;

docs-ui/src/content/components/tabs.mdx

@@ -25,11 +25,11 @@ A component for toggling between related panels on the same page.
 <ComponentInfos
   component="tabs"
   classNames={[
-    'canon-TabsRoot',
-    'canon-TabsList',
-    'canon-TabsTab',
-    'canon-TabsPanel',
-    'canon-TabsIndicator',
+    'bui-TabsRoot',
+    'bui-TabsList',
+    'bui-TabsTab',
+    'bui-TabsPanel',
+    'bui-TabsIndicator',
   ]}
   usageCode={tabsUsageSnippet}
 />

docs-ui/src/content/components/tabs.props.ts

@@ -60,7 +60,7 @@ export const tabsPanelPropDefs: Record<string, PropDef> = {
   ...stylePropDefs,
 };
 
-export const tabsUsageSnippet = `import { Tabs } from '@backstage/canon';
+export const tabsUsageSnippet = `import { Tabs } from '@backstage/ui';
 
 <Tabs.Root>
     <Tabs.List>

docs-ui/src/content/components/text-field.mdx

@@ -24,15 +24,15 @@ A text field component for your forms.
 <ComponentInfos
   component="textfield"
   classNames={[
-    'canon-TextField',
-    'canon-InputWrapper',
-    'canon-Input',
-    'canon-InputIcon',
-    'canon-FieldLabelWrapper',
-    'canon-FieldLabel',
-    'canon-FieldDescription',
-    'canon-FieldSecondaryLabel',
-    'canon-FieldError',
+    'bui-TextField',
+    'bui-InputWrapper',
+    'bui-Input',
+    'bui-InputIcon',
+    'bui-FieldLabelWrapper',
+    'bui-FieldLabel',
+    'bui-FieldDescription',
+    'bui-FieldSecondaryLabel',
+    'bui-FieldError',
   ]}
   usageCode={textFieldUsageSnippet}
 />

docs-ui/src/content/components/text-field.props.ts

@@ -29,7 +29,7 @@ export const inputPropDefs: Record<string, PropDef> = {
   ...stylePropDefs,
 };
 
-export const textFieldUsageSnippet = `import { TextField } from '@backstage/canon';
+export const textFieldUsageSnippet = `import { TextField } from '@backstage/ui';
 
 <TextField />`;
 

docs-ui/src/content/components/text.mdx

@@ -25,7 +25,7 @@ The `Text` component is used to display content on your page.
 
 <ComponentInfos
   component="text"
-  classNames={['canon-Text']}
+  classNames={['bui-Text']}
   usageCode={textUsageSnippet}
 />
 

docs-ui/src/content/components/text.props.ts

@@ -25,7 +25,7 @@ export const textPropDefs: Record<string, PropDef> = {
   ...stylePropDefs,
 };
 
-export const textUsageSnippet = `import { Text } from '@backstage/canon';
+export const textUsageSnippet = `import { Text } from '@backstage/ui';
 
 <Text />`;
 

docs-ui/src/content/components/tooltip.mdx

@@ -23,7 +23,7 @@ A tooltip displays a description of an element on hover or focus.
 
 <ComponentInfos
   component="tooltip"
-  classNames={['canon-Tooltip', 'canon-ToltipArrow']}
+  classNames={['bui-Tooltip', 'bui-ToltipArrow']}
   usageCode={tooltipUsageSnippet}
 />
 

docs-ui/src/content/components/tooltip.props.ts

@@ -54,7 +54,7 @@ export const tooltipPropDefs: Record<string, PropDef> = {
   ...stylePropDefs,
 };
 
-export const tooltipUsageSnippet = `import { TooltipTrigger, Tooltip, Button } from '@backstage/canon';
+export const tooltipUsageSnippet = `import { TooltipTrigger, Tooltip, Button } from '@backstage/ui';
 
 <TooltipTrigger>
   <Button>Button</Button>

docs-ui/src/snippets/code-snippets.ts

@@ -1,30 +1,30 @@
 // Sometimes codes are not formatted correctly in the docs, so we need to use snippets
 
 export const customTheme = `:root {
-  --canon-font-regular: system-ui;
-  --canon-font-weight-regular: 400;
-  --canon-font-weight-bold: 600;
-  --canon-bg: #f8f8f8;
-  --canon-bg-surface-1: #fff;
+  --bui-font-regular: system-ui;
+  --bui-font-weight-regular: 400;
+  --bui-font-weight-bold: 600;
+  --bui-bg: #f8f8f8;
+  --bui-bg-surface-1: #fff;
   /* ... other CSS variables */
 
   /* Add your custom components styles here */
-  .canon-Button {
+  .bui-Button {
     background-color: #000;
     color: #fff;
   }
 }
 
 [data-theme='dark'] {
-  --canon-font-regular: system-ui;
-  --canon-font-weight-regular: 400;
-  --canon-font-weight-bold: 600;
-  --canon-bg: #f8f8f8;
-  --canon-bg-surface-1: #fff;
+  --bui-font-regular: system-ui;
+  --bui-font-weight-regular: 400;
+  --bui-font-weight-bold: 600;
+  --bui-bg: #f8f8f8;
+  --bui-bg-surface-1: #fff;
   /* ... other CSS variables */
 
   /* Add your custom components styles here */
-  .canon-Button {
+  .bui-Button {
     background-color: #000;
     color: #fff;
   }

docs-ui/src/utils/propDefs.ts

@@ -1,4 +1,4 @@
-import type { Breakpoint } from '@backstage/canon/src/types';
+import type { Breakpoint } from '@backstage/ui/src/types';
 
 const breakpoints = ['initial', 'xs', 'sm', 'md', 'lg', 'xl'] as Breakpoint[];
 

docs-ui/yarn.lock

@@ -1948,42 +1948,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"canon-docs@workspace:.":
-  version: 0.0.0-use.local
-  resolution: "canon-docs@workspace:."
-  dependencies:
-    "@codemirror/lang-sass": "npm:^6.0.2"
-    "@codemirror/view": "npm:^6.34.4"
-    "@lezer/highlight": "npm:^1.2.1"
-    "@mdx-js/loader": "npm:^3.1.0"
-    "@mdx-js/react": "npm:^3.1.0"
-    "@next/mdx": "npm:15.3.4"
-    "@storybook/react": "npm:^8.6.8"
-    "@types/mdx": "npm:^2.0.13"
-    "@types/node": "npm:^20"
-    "@types/react": "npm:19.1.8"
-    "@types/react-dom": "npm:19.1.6"
-    "@uiw/codemirror-themes": "npm:^4.23.7"
-    "@uiw/react-codemirror": "npm:^4.23.7"
-    chokidar: "npm:^3.6.0"
-    concurrently: "npm:^8.2.2"
-    eslint: "npm:^8"
-    eslint-config-next: "npm:15.3.4"
-    html-react-parser: "npm:^5.2.5"
-    lightningcss: "npm:^1.28.2"
-    motion: "npm:^12.4.1"
-    next: "npm:15.3.4"
-    next-mdx-remote-client: "npm:^2.1.2"
-    prop-types: "npm:^15.8.1"
-    react: "npm:19.1.0"
-    react-dom: "npm:19.1.0"
-    react-frame-component: "npm:^5.2.7"
-    shiki: "npm:^1.26.1"
-    storybook: "npm:^8.6.8"
-    typescript: "npm:^5"
-  languageName: unknown
-  linkType: soft
-
 "ccount@npm:^2.0.0":
   version: 2.0.1
   resolution: "ccount@npm:2.0.1"
@@ -2328,6 +2292,42 @@ __metadata:
   languageName: node
   linkType: hard
 
+"docs-ui@workspace:.":
+  version: 0.0.0-use.local
+  resolution: "docs-ui@workspace:."
+  dependencies:
+    "@codemirror/lang-sass": "npm:^6.0.2"
+    "@codemirror/view": "npm:^6.34.4"
+    "@lezer/highlight": "npm:^1.2.1"
+    "@mdx-js/loader": "npm:^3.1.0"
+    "@mdx-js/react": "npm:^3.1.0"
+    "@next/mdx": "npm:15.3.4"
+    "@storybook/react": "npm:^8.6.8"
+    "@types/mdx": "npm:^2.0.13"
+    "@types/node": "npm:^20"
+    "@types/react": "npm:19.1.8"
+    "@types/react-dom": "npm:19.1.6"
+    "@uiw/codemirror-themes": "npm:^4.23.7"
+    "@uiw/react-codemirror": "npm:^4.23.7"
+    chokidar: "npm:^3.6.0"
+    concurrently: "npm:^8.2.2"
+    eslint: "npm:^8"
+    eslint-config-next: "npm:15.3.4"
+    html-react-parser: "npm:^5.2.5"
+    lightningcss: "npm:^1.28.2"
+    motion: "npm:^12.4.1"
+    next: "npm:15.3.4"
+    next-mdx-remote-client: "npm:^2.1.2"
+    prop-types: "npm:^15.8.1"
+    react: "npm:19.1.0"
+    react-dom: "npm:19.1.0"
+    react-frame-component: "npm:^5.2.7"
+    shiki: "npm:^1.26.1"
+    storybook: "npm:^8.6.8"
+    typescript: "npm:^5"
+  languageName: unknown
+  linkType: soft
+
 "doctrine@npm:^2.1.0":
   version: 2.1.0
   resolution: "doctrine@npm:2.1.0"