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 8d11151a3e..0000000000 Binary files a/docs-ui/public/header.png and /dev/null differ diff --git a/docs-ui/src/app/(docs)/about/page.mdx b/docs-ui/src/app/(docs)/about/page.mdx index a4c16ee79e..2c87a3d03e 100644 --- a/docs-ui/src/app/(docs)/about/page.mdx +++ b/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. diff --git a/docs-ui/src/app/(docs)/changelog/page.mdx b/docs-ui/src/app/(docs)/changelog/page.mdx index 7cc0b2bf3e..bbeaa98458 100644 --- a/docs-ui/src/app/(docs)/changelog/page.mdx +++ b/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. diff --git a/docs-ui/src/app/(docs)/layout.tsx b/docs-ui/src/app/(docs)/layout.tsx index 161523bbf5..e136fd64f2 100644 --- a/docs-ui/src/app/(docs)/layout.tsx +++ b/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', }; diff --git a/docs-ui/src/app/(docs)/page.mdx b/docs-ui/src/app/(docs)/page.mdx index 862127ec7b..27d7bc66d4 100644 --- a/docs-ui/src/app/(docs)/page.mdx +++ b/docs-ui/src/app/(docs)/page.mdx @@ -1,11 +1,8 @@ import { CodeBlock } from '@/components/CodeBlock'; - +# 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';