-
+ {children}
+
+
+
+ {children}
+
+ 
-
-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
-
-### Base colors
+## Base colors
These colors are used for special purposes like ring, scrollbar, ...
@@ -123,7 +184,7 @@ These colors are used for special purposes like ring, scrollbar, ...
-### Core background colors
+## 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. `--bui-bg` should mostly use as the main background
@@ -224,7 +285,7 @@ color of your app.
-### Foreground colors
+## Foreground colors
Foreground colours are meant to work in pair with a background colours. Typically this would work
for icons, texts, shapes, ... Use a matching name to know what foreground color to use. These colors
@@ -329,7 +390,7 @@ are prefixed with `fg` to make it easier to identify.
-### Border colors
+## Border colors
These border colors are mostly meant to be used as borders on top of any components with
low contrast to help as a separator with the different background colors.
@@ -391,7 +452,7 @@ low contrast to help as a separator with the different background colors.
-### Special colors
+## Special colors
These colors are used for special purposes like ring, scrollbar, ...
@@ -424,7 +485,7 @@ These colors are used for special purposes like ring, scrollbar, ...
-### Font families
+## Font families
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
@@ -453,7 +514,7 @@ monospace font that we use for code blocks and tables.
-### Font weights
+## Font weights
We have two font weights that we use across Backstage UI. Regular or Bold.
@@ -480,7 +541,7 @@ We have two font weights that we use across Backstage UI. Regular or Bold.
-### Spacing
+## Spacing
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
@@ -619,7 +680,7 @@ tokens for pretty much each spacing properties like padding, margin, gaps, ...
-### Radius
+## Radius
We use a radius system to make sure that the components have a consistent look and feel.
diff --git a/docs-ui/src/components/Changelog/index.tsx b/docs-ui/src/components/Changelog/index.tsx
index 224e23d668..d7a547b901 100644
--- a/docs-ui/src/components/Changelog/index.tsx
+++ b/docs-ui/src/components/Changelog/index.tsx
@@ -52,14 +52,15 @@ export function Changelog() {
${bumpEntries
.map(e => {
const prs =
- e.prs.length > 0 &&
- e.prs
- .map(
- pr =>
- `[#${pr}](https://github.com/backstage/backstage/pull/${pr})`,
- )
- .join(', ');
- return `- ${e.description} ${prs}`;
+ e.prs.length > 0
+ ? e.prs
+ .map(
+ pr =>
+ `[#${pr}](https://github.com/backstage/backstage/pull/${pr})`,
+ )
+ .join(', ')
+ : '';
+ return `- ${e.description}${prs ? ` ${prs}` : ''}`;
})
.join('\n')}`;
})
diff --git a/docs-ui/src/components/ChangelogComponent/index.tsx b/docs-ui/src/components/ChangelogComponent/index.tsx
index f8832b0731..ff86433268 100644
--- a/docs-ui/src/components/ChangelogComponent/index.tsx
+++ b/docs-ui/src/components/ChangelogComponent/index.tsx
@@ -17,14 +17,17 @@ export const ChangelogComponent = ({ component }: { component: Component }) => {
${componentChangelog
?.map(change => {
const prs =
- change.prs.length > 0 &&
- change.prs
- .map(
- pr =>
- `[#${pr}](https://github.com/backstage/backstage/pull/${pr})`,
- )
- .join(', ');
- return `- \`${change.version}\` - ${change.description} ${prs}`;
+ change.prs.length > 0
+ ? change.prs
+ .map(
+ pr =>
+ `[#${pr}](https://github.com/backstage/backstage/pull/${pr})`,
+ )
+ .join(', ')
+ : '';
+ return `- \`${change.version}\` - ${change.description}${
+ prs ? ` ${prs}` : ''
+ }`;
})
.join('\n')}`}
/>
diff --git a/docs-ui/src/components/CodeBlock/index.tsx b/docs-ui/src/components/CodeBlock/index.tsx
index 96fdb6bea5..1467bca465 100644
--- a/docs-ui/src/components/CodeBlock/index.tsx
+++ b/docs-ui/src/components/CodeBlock/index.tsx
@@ -9,15 +9,24 @@ export interface CodeBlockProps {
code?: string;
}
-export async function CodeBlock({ lang = 'tsx', title, code }: CodeBlockProps) {
- const out = await codeToHtml(code || '', {
- lang: lang,
+export async function CodeBlock(props: CodeBlockProps) {
+ const { lang = 'tsx', title, code } = props;
+ let out = await codeToHtml(code || '', {
+ lang,
+ transformers: [transformerNotationDiff({ matchAlgorithm: 'v3' })],
themes: {
- light: 'min-light',
+ light: 'github-dark',
dark: 'min-dark',
},
- transformers: [transformerNotationDiff({ matchAlgorithm: 'v3' })],
});
+ // Remove background-color from the pre tag to use our theme colors
+ out = out.replace(
+ /style="([^"]*?)background-color:[^;]+;?([^"]*?)"/g,
+ 'style="$1$2"',
+ );
+ // Clean up empty style attributes
+ out = out.replace(/style=""\s?/g, '');
+
return
+
+
+
+
+
+
+
+
+
+
+ {section.title}
+
+ {section.content.map(item => {
+ const isActive = pathname === `${section.url}/${item.slug}`;
+
+ return (
+
+ {item.title}
+
+ {item.status === 'alpha' && 'Alpha'}
+ {item.status === 'beta' && 'Beta'}
+ {item.status === 'inProgress' && 'In Progress'}
+ {item.status === 'stable' && 'Stable'}
+ {item.status === 'deprecated' && 'Deprecated'}
+
+
+ );
+ })}
+
- {
+ return (
+
-
- );
-};
diff --git a/docs-ui/src/components/Table/styles.module.css b/docs-ui/src/components/Table/styles.module.css
index 5a5ebab450..8f38ac6979 100644
--- a/docs-ui/src/components/Table/styles.module.css
+++ b/docs-ui/src/components/Table/styles.module.css
@@ -17,7 +17,7 @@
padding: 12px 16px !important;
border: none !important;
text-align: left;
- background-color: var(--panel) !important;
+ background-color: var(--bg) !important;
font-size: 16px;
& p {
diff --git a/docs-ui/src/components/TableOfContents/TableOfContents.module.css b/docs-ui/src/components/TableOfContents/TableOfContents.module.css
new file mode 100644
index 0000000000..7275c24520
--- /dev/null
+++ b/docs-ui/src/components/TableOfContents/TableOfContents.module.css
@@ -0,0 +1,93 @@
+.container {
+ position: sticky;
+ top: 24px;
+ max-height: calc(100vh - 48px);
+ overflow-y: auto;
+ padding: 16px 0;
+}
+
+.list {
+ list-style: none;
+ padding: 0;
+ margin: 0;
+ position: relative;
+}
+
+.list::before {
+ content: '';
+ position: absolute;
+ left: 0;
+ top: 0;
+ bottom: 0;
+ width: 2px;
+ background-color: var(--border);
+}
+
+.indicator {
+ position: absolute;
+ left: 0;
+ width: 2px;
+ background-color: var(--primary);
+ transition: top 0.3s cubic-bezier(0.4, 0, 0.2, 1),
+ height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+ pointer-events: none;
+ z-index: 1;
+}
+
+.item {
+ position: relative;
+ margin: 0;
+}
+
+.itemNested {
+ padding-left: 16px;
+}
+
+.link {
+ display: block;
+ width: 100%;
+ text-align: left;
+ background: none;
+ border: none;
+ padding: 6px 16px;
+ font-size: 0.875rem;
+ color: var(--text-secondary);
+ cursor: pointer;
+ transition: color 0.2s ease;
+ line-height: 1.4;
+ position: relative;
+}
+
+.link:hover {
+ color: var(--text);
+}
+
+.itemActive .link {
+ color: var(--primary);
+ font-weight: 500;
+}
+
+/* Hide scrollbar for webkit browsers */
+.container::-webkit-scrollbar {
+ width: 4px;
+}
+
+.container::-webkit-scrollbar-track {
+ background: transparent;
+}
+
+.container::-webkit-scrollbar-thumb {
+ background: var(--border);
+ border-radius: 2px;
+}
+
+.container::-webkit-scrollbar-thumb:hover {
+ background: var(--text-secondary);
+}
+
+/* Responsive: hide on smaller screens */
+@media (max-width: 1280px) {
+ .container {
+ display: none;
+ }
+}
diff --git a/docs-ui/src/components/TableOfContents/TableOfContents.tsx b/docs-ui/src/components/TableOfContents/TableOfContents.tsx
new file mode 100644
index 0000000000..d18265415b
--- /dev/null
+++ b/docs-ui/src/components/TableOfContents/TableOfContents.tsx
@@ -0,0 +1,132 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { usePathname } from 'next/navigation';
+import styles from './TableOfContents.module.css';
+
+interface Heading {
+ id: string;
+ text: string;
+ level: number;
+}
+
+export function TableOfContents() {
+ const [headings, setHeadings] = useState([]);
+ const [activeId, setActiveId] = useState('');
+ const [indicatorTop, setIndicatorTop] = useState(0);
+ const [indicatorHeight, setIndicatorHeight] = useState(0);
+ const pathname = usePathname();
+
+ useEffect(() => {
+ // Extract all H2 and H3 headings from the document
+ const elements = Array.from(
+ document.querySelectorAll('h2[id], h3[id]'),
+ ) as HTMLHeadingElement[];
+
+ const headingData: Heading[] = elements.map(element => ({
+ id: element.id,
+ text: (element.textContent || '').replace('#', '').trim(),
+ level: parseInt(element.tagName.substring(1)),
+ }));
+
+ setHeadings(headingData);
+
+ // Set initial active heading (first visible heading or first heading)
+ if (headingData.length > 0) {
+ const viewportTop = window.scrollY + 100; // offset for header
+ const visibleHeading = elements.find(element => {
+ const rect = element.getBoundingClientRect();
+ return rect.top + window.scrollY >= viewportTop - 200;
+ });
+ setActiveId(visibleHeading?.id || headingData[0].id);
+ }
+
+ // Set up IntersectionObserver to track visible headings
+ const observerOptions = {
+ rootMargin: '-80px 0px -80% 0px',
+ threshold: 1,
+ };
+
+ const observerCallback = (entries: IntersectionObserverEntry[]) => {
+ entries.forEach(entry => {
+ if (entry.isIntersecting) {
+ setActiveId(entry.target.id);
+ }
+ });
+ };
+
+ const observer = new IntersectionObserver(
+ observerCallback,
+ observerOptions,
+ );
+
+ elements.forEach(element => observer.observe(element));
+
+ return () => {
+ elements.forEach(element => observer.unobserve(element));
+ };
+ }, [pathname]);
+
+ // Update indicator position when activeId changes
+ useEffect(() => {
+ if (activeId) {
+ const activeElement = document.querySelector(
+ `[data-toc-id="${activeId}"]`,
+ ) as HTMLElement;
+ if (activeElement) {
+ const list = activeElement.closest('ul');
+ if (list) {
+ const listRect = list.getBoundingClientRect();
+ const elementRect = activeElement.getBoundingClientRect();
+ setIndicatorTop(elementRect.top - listRect.top);
+ setIndicatorHeight(elementRect.height);
+ }
+ }
+ }
+ }, [activeId, headings]);
+
+ const handleClick = (id: string) => {
+ const element = document.getElementById(id);
+ if (element) {
+ element.scrollIntoView({ behavior: 'smooth', block: 'start' });
+ // Update URL without scrolling (already handled above)
+ window.history.pushState(null, '', `#${id}`);
+ }
+ };
+
+ if (headings.length === 0) {
+ return null;
+ }
+
+ return (
+
+ );
+}
diff --git a/docs-ui/src/components/TableOfContents/index.ts b/docs-ui/src/components/TableOfContents/index.ts
new file mode 100644
index 0000000000..ffe4593ca7
--- /dev/null
+++ b/docs-ui/src/components/TableOfContents/index.ts
@@ -0,0 +1 @@
+export { TableOfContents } from './TableOfContents';
diff --git a/docs-ui/src/components/Theming/index.tsx b/docs-ui/src/components/Theming/index.tsx
index fb669253a2..d06f51348b 100644
--- a/docs-ui/src/components/Theming/index.tsx
+++ b/docs-ui/src/components/Theming/index.tsx
@@ -1,18 +1,13 @@
import { MDXRemote } from 'next-mdx-remote-client/rsc';
import { formattedMDXComponents } from '@/mdx-components';
-import { Component } from '@/utils/changelog';
-import { componentDefinitions } from '../../../../packages/ui/src/utils/componentDefinitions';
-import type { DataAttributeValues } from '../../../../packages/ui/src/types';
+import type {
+ ComponentDefinition,
+ DataAttributeValues,
+} from '../../../../packages/ui/src/types';
-export function Theming({ component }: { component: Component }) {
- const componentDefinition = componentDefinitions[component];
-
- if (!componentDefinition) {
- return null;
- }
-
- const classNames = componentDefinition.classNames;
- const dataAttributes = componentDefinition.dataAttributes;
+export function Theming({ definition }: { definition: ComponentDefinition }) {
+ const classNames = definition.classNames;
+ const dataAttributes = definition.dataAttributes;
// Get the first class name
const firstClassName = Object.values(classNames)[0];
diff --git a/docs-ui/src/components/Toolbar/Toolbar.module.css b/docs-ui/src/components/Toolbar/Toolbar.module.css
index f0e58f2edb..581fc599b3 100644
--- a/docs-ui/src/components/Toolbar/Toolbar.module.css
+++ b/docs-ui/src/components/Toolbar/Toolbar.module.css
@@ -1,76 +1,77 @@
.toolbar {
- position: fixed;
display: flex;
- top: 0;
- left: 32px;
- right: 32px;
- height: 112px;
- z-index: 10;
+ height: 80px;
align-items: center;
justify-content: space-between;
- padding-left: 0.25rem;
-}
+ margin-bottom: 24px;
-.left {
- /* width: 296px; */
- display: flex;
- align-items: center;
- gap: 0.5rem;
- padding-right: 20px;
-}
-
-.right {
- flex: 1;
- display: flex;
- align-items: center;
- justify-content: flex-end;
-}
-
-.actions {
- display: none;
-}
-
-.version {
- display: none;
-}
-
-.versionLinks {
- display: flex;
- align-items: center;
-
- a {
- width: 48px;
- height: 48px;
- display: flex;
- align-items: center;
- justify-content: center;
- color: var(--secondary);
- transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out;
- border-radius: 48px;
-
- &:hover {
- color: var(--primary);
- background-color: var(--action);
- }
- }
-}
-
-@media (min-width: 600px) {
- .actions {
- display: flex;
- align-items: center;
- gap: 1rem;
- }
-}
-
-@media (min-width: 768px) {
- .toolbar {
+ @media (min-width: 768px) {
right: 40px;
}
}
+.breadcrumb {
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ font-size: 0.875rem;
+ font-weight: 500;
+}
+
+.logoMobile {
+ display: block;
+
+ @media (min-width: 768px) {
+ display: none;
+ }
+}
+
+.breadcrumbDesktop {
+ display: none;
+
+ @media (min-width: 768px) {
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ }
+}
+
+.breadcrumbLink {
+ color: var(--secondary);
+ text-decoration: none;
+ cursor: pointer;
+
+ &:hover {
+ color: var(--primary);
+ text-decoration: underline;
+ transition: color 0.2s ease-in-out;
+ text-decoration-thickness: 1px;
+ text-underline-offset: 4px;
+ }
+}
+
+.breadcrumbSeparator {
+ color: var(--secondary);
+ flex-shrink: 0;
+}
+
+.breadcrumbCurrent {
+ color: var(--primary);
+}
+
+.actions {
+ display: none;
+
+ @media (min-width: 320px) {
+ display: flex;
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ }
+}
+
@media (min-width: 820px) {
- .right {
+ .content {
justify-content: space-between;
}
@@ -79,18 +80,164 @@
align-items: center;
justify-content: center;
/* background-color: var(--action); */
- border: 1px solid var(--border2);
- border-radius: 48px;
- padding-inline: 20px;
- color: var(--primary);
- font-size: 0.875rem;
- font-weight: 500;
- height: 48px;
}
}
-@media (min-width: 960px) {
- .left {
- width: 296px;
+.bubble {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ background-color: var(--bg);
+ border: 1px solid var(--border);
+ border-radius: 32px;
+ padding-inline: 16px;
+ color: var(--primary);
+ font-size: 0.875rem;
+ font-weight: 500;
+ height: 32px;
+ cursor: pointer;
+ gap: 4px;
+
+ &[data-selected] {
+ background-color: var(--action);
+ color: var(--primary);
+ }
+
+ &:hover {
+ background-color: var(--action);
+ transition: background-color 0.2s ease-in-out;
+ }
+
+ &[data-hide-tablet] {
+ display: none;
+ }
+
+ @media (min-width: 1024px) {
+ &[data-hide-tablet] {
+ display: flex;
+ }
+ }
+}
+
+.buttonGroup {
+ display: flex;
+ align-items: center;
+ gap: 4px;
+ border: 1px solid var(--border);
+ border-radius: 32px;
+ padding-inline: 4px;
+ height: 32px;
+ display: none;
+
+ @media (min-width: 480px) {
+ display: flex;
+ }
+}
+
+.buttonGroup button {
+ height: 24px;
+ background-color: var(--bg);
+ border: none;
+ border-radius: 28px;
+ padding-inline: 16px;
+ color: var(--primary);
+ cursor: pointer;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ gap: 4px;
+
+ &[data-selected] {
+ background-color: var(--action);
+ color: var(--primary);
+ }
+
+ &:hover {
+ background-color: var(--action);
+ transition: background-color 0.2s ease-in-out;
+ }
+}
+
+.Popup {
+ box-sizing: border-box;
+ padding-block: 0.25rem;
+ border-radius: 0.375rem;
+ background-color: var(--bg);
+ color: var(--color-gray-900);
+ border: 1px solid var(--border);
+ padding-inline: 0.25rem;
+ transform-origin: var(--transform-origin);
+ transition: transform 150ms, opacity 150ms;
+
+ &[data-starting-style],
+ &[data-ending-style] {
+ opacity: 0;
+ transform: scale(0.9);
+ }
+
+ &[data-side='none'] {
+ transition: none;
+ transform: none;
+ opacity: 1;
+ }
+
+ @media (prefers-color-scheme: light) {
+ outline: 1px solid var(--color-gray-200);
+ box-shadow: 0px 10px 15px -3px var(--color-gray-200),
+ 0px 4px 6px -4px var(--color-gray-200);
+ }
+
+ @media (prefers-color-scheme: dark) {
+ outline: 1px solid var(--color-gray-300);
+ outline-offset: -1px;
+ }
+}
+
+.Popup[data-trigger='Select'] {
+ min-width: var(--trigger-width);
+
+ .ListBox {
+ display: block;
+ width: unset;
+ max-height: inherit;
+ min-height: unset;
+ border: none;
+
+ .react-aria-Header {
+ padding-left: 1.571rem;
+ }
+ }
+
+ .Item {
+ position: relative;
+ padding: 0 0.571rem 0 1.571rem;
+ height: 2rem;
+ display: flex;
+ align-items: center;
+
+ &[data-focus-visible] {
+ outline: none;
+ }
+
+ &[data-selected] {
+ font-weight: 600;
+ background: unset;
+ color: var(--text-color);
+
+ &::before {
+ content: '✓';
+ content: '✓' / '';
+ alt: ' ';
+ position: absolute;
+ left: 4px;
+ }
+ }
+
+ &[data-focused],
+ &[data-pressed] {
+ background: var(--bg);
+ color: var(--primary);
+ cursor: pointer;
+ }
}
}
diff --git a/docs-ui/src/components/Toolbar/Toolbar.tsx b/docs-ui/src/components/Toolbar/Toolbar.tsx
index 29570739f8..e7defd5e8a 100644
--- a/docs-ui/src/components/Toolbar/Toolbar.tsx
+++ b/docs-ui/src/components/Toolbar/Toolbar.tsx
@@ -1,52 +1,168 @@
'use client';
-import { RiGithubLine, RiNpmjsLine } from '@remixicon/react';
-import { motion, useScroll, useTransform } from 'framer-motion';
-import { useRef } from 'react';
-import { Logo } from './Logo';
-import { ThemeSelector } from './theme';
-import { ThemeNameSelector } from './theme-name';
+import {
+ RiArrowDownSLine,
+ RiArrowRightSLine,
+ RiGithubLine,
+ RiMoonLine,
+ RiSunLine,
+} from '@remixicon/react';
+import {
+ Button,
+ ListBox,
+ ListBoxItem,
+ Popover,
+ Select,
+ SelectValue,
+ ToggleButton,
+ ToggleButtonGroup,
+} from 'react-aria-components';
import styles from './Toolbar.module.css';
+import { usePlayground } from '@/utils/playground-context';
+import { usePathname } from 'next/navigation';
+import Link from 'next/link';
+import { components, layoutComponents } from '@/utils/data';
+import { Logo } from '@/components/Sidebar/Logo';
interface ToolbarProps {
version: string;
}
-export const Toolbar = ({ version }: ToolbarProps) => {
- const containerRef = useRef(null);
- const { scrollY } = useScroll();
+const themes = [
+ { name: 'Backstage', value: 'backstage' },
+ { name: 'Spotify', value: 'spotify' },
+ { name: 'Custom theme', value: 'custom' },
+];
- // Transform scroll velocity to vertical movement
- const y = useTransform(scrollY, [0, 100], [0, -20], {
- clamp: false,
- });
+export const Toolbar = ({ version }: ToolbarProps) => {
+ const {
+ selectedTheme,
+ setSelectedTheme,
+ selectedThemeName,
+ setSelectedThemeName,
+ } = usePlayground();
+
+ const pathname = usePathname();
+
+ // Determine breadcrumb content based on current path
+ const getBreadcrumb = () => {
+ const allComponents = [...components, ...layoutComponents];
+
+ // Root page
+ if (pathname === '/') {
+ return { section: null, title: 'Getting Started' };
+ }
+
+ // Components index page
+ if (pathname === '/components') {
+ return { section: null, title: 'Components' };
+ }
+
+ // Component detail pages
+ if (pathname?.startsWith('/components/')) {
+ const slug = pathname.split('/components/')[1];
+ const component = allComponents.find(c => c.slug === slug);
+ return {
+ section: 'Components',
+ sectionLink: '/components',
+ title: component?.title || slug,
+ };
+ }
+
+ // Tokens page
+ if (pathname === '/tokens') {
+ return { section: null, title: 'Tokens' };
+ }
+
+ // Changelog page
+ if (pathname === '/changelog') {
+ return { section: null, title: 'Changelog' };
+ }
+
+ return { section: null, title: '' };
+ };
+
+ const breadcrumb = getBreadcrumb();
return (
-
{type}
+
+
+
+
+
+
+
+ );
+};
diff --git a/docs-ui/src/components/Sidebar/index.tsx b/docs-ui/src/components/Sidebar/index.tsx
deleted file mode 100644
index 59e297e26e..0000000000
--- a/docs-ui/src/components/Sidebar/index.tsx
+++ /dev/null
@@ -1,104 +0,0 @@
-'use client';
-
-import styles from './Sidebar.module.css';
-import {
- components,
- overview,
- layoutComponents,
- coreConcepts,
-} from '@/utils/data';
-import { ScrollArea } from '@base-ui-components/react/scroll-area';
-import Link from 'next/link';
-import { usePathname } from 'next/navigation';
-import { motion } from 'motion/react';
-import { Fragment } from 'react';
-
-const data = [
- {
- title: 'Overview',
- content: overview,
- url: '',
- },
- {
- title: 'Core Concepts',
- content: coreConcepts,
- url: '',
- },
- {
- title: 'Layout Components',
- content: layoutComponents,
- url: '/components',
- },
- {
- title: 'Components',
- content: components,
- url: '/components',
- },
-];
-
-export const Sidebar = () => {
- const pathname = usePathname();
- const isPlayground = pathname.includes('/playground');
-
- return (
-
+
+
+
+
+
+
-
-
-
-
-
-
-
- );
-};
diff --git a/docs-ui/src/components/Snippet/styles.module.css b/docs-ui/src/components/Snippet/styles.module.css
index bb0d1cbc50..3141564293 100644
--- a/docs-ui/src/components/Snippet/styles.module.css
+++ b/docs-ui/src/components/Snippet/styles.module.css
@@ -5,9 +5,9 @@
}
.preview {
- border-radius: 4px;
+ border-radius: 8px;
box-shadow: inset 0 0 0 1px var(--border);
- background-color: var(--bg);
+ background-color: var(--bui-bg);
padding: 1px;
position: relative;
}
diff --git a/docs-ui/src/components/StickyHeader/StickyHeader.module.css b/docs-ui/src/components/StickyHeader/StickyHeader.module.css
deleted file mode 100644
index 7cfc197f83..0000000000
--- a/docs-ui/src/components/StickyHeader/StickyHeader.module.css
+++ /dev/null
@@ -1,98 +0,0 @@
-.stickyHeader {
- position: fixed;
- top: 0px;
- left: 32px;
- right: 32px;
- z-index: 99999;
- background-color: var(--background);
- padding: 16px 20px 16px 40px;
- display: flex;
- justify-content: space-between;
- align-items: center;
- backdrop-filter: blur(10px);
- pointer-events: auto;
- isolation: isolate;
- transform: translateZ(0);
- opacity: 0;
- width: calc(100% - 64px);
- mask-image: linear-gradient(to bottom, black 0%, black 80%, transparent 100%);
- -webkit-mask-image: linear-gradient(
- to bottom,
- black 0%,
- black 80%,
- transparent 100%
- );
-}
-
-@media (max-width: 768px) {
- .stickyHeader {
- display: none;
- }
-}
-
-.right {
- display: flex;
- align-items: center;
- gap: 24px;
-}
-
-.name {
- font-size: 24px;
- color: var(--text-primary);
- font-weight: 400;
-}
-
-.version {
- font-size: 14px;
- color: var(--text-secondary);
- font-weight: 500;
-}
-
-.actions {
- display: flex;
- align-items: center;
- gap: 16px;
-}
-
-.versionLinks {
- display: flex;
- align-items: center;
-
- a {
- width: 48px;
- height: 48px;
- display: flex;
- align-items: center;
- justify-content: center;
- color: var(--secondary);
- transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out;
- border-radius: 48px;
-
- &:hover {
- color: var(--primary);
- background-color: var(--action);
- }
- }
-}
-
-@media (max-width: 768px) {
- .stickyHeader {
- padding: 12px 16px;
- }
-
- .right {
- gap: 16px;
- }
-
- .version {
- font-size: 12px;
- }
-}
-
-@media (min-width: 768px) {
- .stickyHeader {
- width: calc(100% - 332px - 40px);
- left: 332px;
- right: 40px;
- }
-}
diff --git a/docs-ui/src/components/StickyHeader/StickyHeader.tsx b/docs-ui/src/components/StickyHeader/StickyHeader.tsx
deleted file mode 100644
index 804d759715..0000000000
--- a/docs-ui/src/components/StickyHeader/StickyHeader.tsx
+++ /dev/null
@@ -1,50 +0,0 @@
-'use client';
-
-import { motion, useScroll, useTransform, circOut } from 'framer-motion';
-import { RiGithubLine, RiNpmjsLine } from '@remixicon/react';
-import { ThemeSelector } from '../Toolbar/theme';
-import { ThemeNameSelector } from '../Toolbar/theme-name';
-import { useCurrentPage } from '@/hooks/useCurrentPage';
-import styles from './StickyHeader.module.css';
-
-export const StickyHeader = () => {
- const { scrollY } = useScroll();
- const currentPage = useCurrentPage();
-
- // Transform scroll position to opacity only
- const opacity = useTransform(scrollY, [100, 200], [0, 1], {
- clamp: false,
- });
-
- const yPos = useTransform(scrollY, [200, 500], [-60, 0], {
- clamp: true,
- ease: circOut,
- });
-
- return (
-
-
-
-
- {data.map(section => {
- return (
-
-
- );
- })}
-
-
- {section.title}
-
- {section.content.map(item => {
- const isActive =
- pathname === `${section.url}/${item.slug}`;
-
- return (
-
- {item.title}
-
- {item.status === 'alpha' && 'Alpha'}
- {item.status === 'beta' && 'Beta'}
- {item.status === 'inProgress' && 'In Progress'}
- {item.status === 'stable' && 'Stable'}
- {item.status === 'deprecated' && 'Deprecated'}
-
-
- );
- })}
- {currentPage || 'Backstage UI'}
-
-
-
-
-
- Version {version} - Alpha
-
-
-
-
-
-
-
-
-
-
-
-
- );
-};
diff --git a/docs-ui/src/content/accordion.mdx b/docs-ui/src/content/accordion.mdx
new file mode 100644
index 0000000000..fc4bad1f8e
--- /dev/null
+++ b/docs-ui/src/content/accordion.mdx
@@ -0,0 +1,129 @@
+import { PropsTable } from '@/components/PropsTable';
+import { Snippet } from '@/components/Snippet';
+import { CodeBlock } from '@/components/CodeBlock';
+import { AccordionSnippet } from '@/snippets/stories-snippets';
+import {
+ accordionPropDefs,
+ accordionTriggerPropDefs,
+ accordionPanelPropDefs,
+ accordionGroupPropDefs,
+ accordionUsageSnippet,
+ accordionWithSubtitleSnippet,
+ accordionCustomTriggerSnippet,
+ accordionDefaultExpandedSnippet,
+ accordionGroupSingleOpenSnippet,
+ accordionGroupMultipleOpenSnippet,
+} from './accordion.props';
+import { PageTitle } from '@/components/PageTitle';
+import { Theming } from '@/components/Theming';
+import { AccordionDefinition } from '../utils/definitions';
+import { ChangelogComponent } from '@/components/ChangelogComponent';
+
+
+
);
};
diff --git a/docs-ui/src/components/Toolbar/theme-name.module.css b/docs-ui/src/components/Toolbar/theme-name.module.css
deleted file mode 100644
index 1e1943b886..0000000000
--- a/docs-ui/src/components/Toolbar/theme-name.module.css
+++ /dev/null
@@ -1,110 +0,0 @@
-.Select {
- box-sizing: border-box;
- display: flex;
- align-items: center;
- justify-content: space-between;
- gap: 0.75rem;
- height: 3rem;
- padding-left: 1.25rem;
- padding-right: 1rem;
- margin: 0;
- outline: 0;
- border: 1px solid var(--color-gray-200);
- border-radius: 3rem;
- font-family: inherit;
- font-size: 1rem;
- line-height: 1.5rem;
- color: var(--color-gray-900);
- cursor: pointer;
- user-select: none;
- background-color: var(--action);
-
- &:focus-visible {
- outline: 2px solid var(--color-blue);
- outline-offset: -1px;
- }
-}
-
-.Popup {
- box-sizing: border-box;
- padding-block: 0.25rem;
- border-radius: 0.375rem;
- background-color: var(--panel);
- color: var(--color-gray-900);
- border: 1px solid var(--border);
- padding-inline: 0.25rem;
- transform-origin: var(--transform-origin);
- transition: transform 150ms, opacity 150ms;
-
- &[data-starting-style],
- &[data-ending-style] {
- opacity: 0;
- transform: scale(0.9);
- }
-
- &[data-side='none'] {
- transition: none;
- transform: none;
- opacity: 1;
- }
-
- @media (prefers-color-scheme: light) {
- outline: 1px solid var(--color-gray-200);
- box-shadow: 0px 10px 15px -3px var(--color-gray-200),
- 0px 4px 6px -4px var(--color-gray-200);
- }
-
- @media (prefers-color-scheme: dark) {
- outline: 1px solid var(--color-gray-300);
- outline-offset: -1px;
- }
-}
-
-.Popup[data-trigger='Select'] {
- min-width: var(--trigger-width);
-
- .ListBox {
- display: block;
- width: unset;
- max-height: inherit;
- min-height: unset;
- border: none;
-
- .react-aria-Header {
- padding-left: 1.571rem;
- }
- }
-
- .Item {
- position: relative;
- padding: 0 0.571rem 0 1.571rem;
- height: 2rem;
- display: flex;
- align-items: center;
-
- &[data-focus-visible] {
- outline: none;
- }
-
- &[data-selected] {
- font-weight: 600;
- background: unset;
- color: var(--text-color);
-
- &::before {
- content: '✓';
- content: '✓' / '';
- alt: ' ';
- position: absolute;
- left: 4px;
- }
- }
-
- &[data-focused],
- &[data-pressed] {
- background: var(--bg);
- color: var(--primary);
- cursor: pointer;
- }
- }
-}
diff --git a/docs-ui/src/components/Toolbar/theme-name.tsx b/docs-ui/src/components/Toolbar/theme-name.tsx
deleted file mode 100644
index ae9e7f9f35..0000000000
--- a/docs-ui/src/components/Toolbar/theme-name.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-'use client';
-
-import {
- Button,
- ListBox,
- ListBoxItem,
- Popover,
- Select,
- SelectValue,
-} from 'react-aria-components';
-import styles from './theme-name.module.css';
-import { usePlayground } from '@/utils/playground-context';
-import { RiArrowDownSLine } from '@remixicon/react';
-
-const themes = [
- { name: 'Backstage', value: 'backstage' },
- { name: 'Spotify', value: 'spotify' },
- { name: 'Custom theme', value: 'custom' },
-];
-
-export const ThemeNameSelector = () => {
- const { selectedThemeName, setSelectedThemeName } = usePlayground();
-
- return (
-
- );
-};
diff --git a/docs-ui/src/components/Toolbar/theme.module.css b/docs-ui/src/components/Toolbar/theme.module.css
deleted file mode 100644
index c5490a72d7..0000000000
--- a/docs-ui/src/components/Toolbar/theme.module.css
+++ /dev/null
@@ -1,79 +0,0 @@
-.tabs {
- border-radius: 0.375rem;
- width: 100%;
-}
-
-.tabsTheme {
- width: 100px;
- border-radius: 0.375rem;
-}
-
-.list {
- display: flex;
- position: relative;
- z-index: 0;
- gap: 0.25rem;
-}
-
-.tab {
- display: flex;
- align-items: center;
- justify-content: center;
- border: 0;
- margin: 0;
- outline: 0;
- background: none;
- appearance: none;
- color: var(--secondary);
- user-select: none;
- flex: 1;
- cursor: pointer;
- width: 3rem;
- height: 3rem;
-
- &[data-selected] {
- color: var(--primary);
-
- & p {
- color: var(--primary);
- }
- }
-
- @media (hover: hover) {
- &:hover {
- color: var(--primary);
- }
- }
-
- &:focus-visible {
- position: relative;
-
- &::before {
- content: '';
- position: absolute;
- inset: 0.25rem 0;
- border-radius: 0.25rem;
- outline: 2px solid var(--action);
- outline-offset: -1px;
- }
- }
-}
-
-.tab p {
- color: var(--secondary) !important;
-}
-
-.indicator {
- position: absolute;
- z-index: -1;
- left: 0;
- top: 50%;
- translate: var(--active-tab-left) -50%;
- width: var(--active-tab-width);
- height: 3rem;
- border-radius: 3rem;
- background-color: var(--action);
- transition-property: translate, width;
- transition-duration: 200ms;
- transition-timing-function: ease-in-out;
-}
diff --git a/docs-ui/src/components/Toolbar/theme.tsx b/docs-ui/src/components/Toolbar/theme.tsx
deleted file mode 100644
index 7ece7bfe7b..0000000000
--- a/docs-ui/src/components/Toolbar/theme.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-'use client';
-
-import { Tabs } from '@base-ui-components/react/tabs';
-import { usePlayground } from '@/utils/playground-context';
-import styles from './theme.module.css';
-import { RiMoonLine, RiSunLine } from '@remixicon/react';
-
-export const ThemeSelector = () => {
- const { selectedTheme, setSelectedTheme } = usePlayground();
-
- return (
-
+
+
+
-
+
+ {breadcrumb.section && breadcrumb.sectionLink ? (
+ <>
+
+ {breadcrumb.section}
+
+
+ ` element.
+
+