diff --git a/docs-ui/public/css-classname-structure.png b/docs-ui/public/css-classname-structure.png index df9894ff2b..c241b182cc 100644 Binary files a/docs-ui/public/css-classname-structure.png and b/docs-ui/public/css-classname-structure.png differ diff --git a/docs-ui/src/app/install/page.mdx b/docs-ui/src/app/install/page.mdx new file mode 100644 index 0000000000..329d477eca --- /dev/null +++ b/docs-ui/src/app/install/page.mdx @@ -0,0 +1,36 @@ +import { CodeBlock } from '@/components/CodeBlock'; + +# How to install Backstage UI + +## 1. Import the package + +Import the package using a package manager. + + + +## 2. Import the css files + +Import the global CSS file at the root of your application. + +```tsx +import '@backstage/ui/css/styles.css'; +``` + +## 3. Start building ✨ + +Now you can start building your plugin using the new design system. + +```tsx +import { Flex, Button, Text } from '@backstage/ui'; + + + Hello World + +; +``` + +## Next steps + +Now that you have the basics down, you can start building your plugin using the new design system. +Please familiarise yourself first with our theming principles. This will help you understand the core concepts of the design system. +If you have any questions, please reach out to us on [Discord](https://discord.gg/MUpMjP2). diff --git a/docs-ui/src/app/page.mdx b/docs-ui/src/app/page.mdx index 27d7bc66d4..f31cf4524e 100644 --- a/docs-ui/src/app/page.mdx +++ b/docs-ui/src/app/page.mdx @@ -1,43 +1,173 @@ -import { CodeBlock } from '@/components/CodeBlock'; +import { ComponentCards, ComponentCard } from '@/components/ComponentCards'; -# Backstage UI +## Welcome to Backstage UI, the new design library for Backstage plugins. -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 +This project is still under active development but we will make sure to document the API as we go. We are aiming to improve the general UI of Backstage and plugins across Backstage. This new library will take time to build but we are building it incrementally with not conflict with the existing theming system. -## Installation +### Actions -### 1. Install Backstage UI + + + + + + -Install Backstage UI using a package manager. +### Layout - + + + + + + + + -### 2. Import the css files +### Selection and inputs -Import the global CSS file at the root of your application. + + + + + + + + -```tsx -import '@backstage/ui/css/styles.css'; -``` +### Navigation -### 3. Start building ✨ + + + + + + -Now you can start building your plugin using the new design system. +### Images and icons -```tsx -import { Flex, Button, Text } from '@backstage/ui'; + + + + - - Hello World - -; -``` +### Feedback indicators -## Next steps + + + + + +### Typography + + + + + +## Support Now that you have the basics down, you can start building your plugin using the new design system. Please familiarise yourself first with our theming principles. This will help you understand the core concepts of the design system. diff --git a/docs-ui/src/components/ComponentCards/ComponentCards.module.css b/docs-ui/src/components/ComponentCards/ComponentCards.module.css new file mode 100644 index 0000000000..cf003472b4 --- /dev/null +++ b/docs-ui/src/components/ComponentCards/ComponentCards.module.css @@ -0,0 +1,36 @@ +.grid { + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: 1rem; + margin-top: 1rem; + margin-bottom: 3rem; +} + +.card { + display: flex; + flex-direction: column; + justify-content: flex-end; + background-color: var(--panel); + border-radius: 8px; + border: 1px solid var(--border); + padding: 16px; + gap: 4px; + min-height: 120px; + + &:hover { + background-color: var(--panel-hover); + } +} + +.title { + margin: 0; + font-size: 16px; + font-weight: 600; + color: var(--primary); +} + +.description { + margin: 0; + font-size: 14px; + color: var(--secondary); +} diff --git a/docs-ui/src/components/ComponentCards/ComponentCards.tsx b/docs-ui/src/components/ComponentCards/ComponentCards.tsx new file mode 100644 index 0000000000..0e4d22c02a --- /dev/null +++ b/docs-ui/src/components/ComponentCards/ComponentCards.tsx @@ -0,0 +1,23 @@ +import Link from 'next/link'; +import styles from './ComponentCards.module.css'; + +export const ComponentCards = ({ children }: { children: React.ReactNode }) => { + return
{children}
; +}; + +export const ComponentCard = ({ + title, + description, + href, +}: { + title: string; + description: string; + href: string; +}) => { + return ( + +

{title}

+

{description}

+ + ); +}; diff --git a/docs-ui/src/components/ComponentCards/index.ts b/docs-ui/src/components/ComponentCards/index.ts new file mode 100644 index 0000000000..4bc4beaae3 --- /dev/null +++ b/docs-ui/src/components/ComponentCards/index.ts @@ -0,0 +1 @@ +export * from './ComponentCards'; diff --git a/docs-ui/src/css/globals.css b/docs-ui/src/css/globals.css index 69a2c8ddfe..5d8422bd30 100644 --- a/docs-ui/src/css/globals.css +++ b/docs-ui/src/css/globals.css @@ -1,6 +1,7 @@ :root { --bg: #f4f4f4; --panel: #fff; + --panel-hover: #fafafa; --primary: #000; --secondary: #929292; --action: #fff; @@ -20,6 +21,7 @@ [data-theme='dark'] { --bg: #000; --panel: #181818; + --panel-hover: #202020; --primary: #fff; --secondary: #818181; --action: #202020; diff --git a/docs-ui/src/utils/data.ts b/docs-ui/src/utils/data.ts index 9cdeff14f0..752f28c2c5 100644 --- a/docs-ui/src/utils/data.ts +++ b/docs-ui/src/utils/data.ts @@ -9,6 +9,10 @@ export const overview: Page[] = [ title: 'Getting Started', slug: '', }, + { + title: 'Installation', + slug: 'install', + }, { title: 'About', slug: 'about',