Move Theming + Changelog to the bottom

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

docs-ui/package.json

@@ -32,7 +32,6 @@
     "prop-types": "^15.8.1",
     "react": "19.1.0",
     "react-dom": "19.1.0",
-    "react-frame-component": "^5.2.7",
     "shiki": "^1.26.1",
     "storybook": "^8.6.8"
   },

docs-ui/src/app/(playground)/playground/page.tsx

@@ -1,87 +0,0 @@
-'use client';
-
-import { ReactNode } from 'react';
-import { Grid, Flex, Text } from '../../../../../packages/ui';
-import { screenSizes } from '@/utils/data';
-import { Frame } from '@/components/Frame';
-import { usePlayground } from '@/utils/playground-context';
-import {
-  ButtonSnippet,
-  CheckboxSnippet,
-  HeadingSnippet,
-  TextSnippet,
-} from '@/snippets/stories-snippets';
-
-import styles from './styles.module.css';
-
-export default function PlaygroundPage() {
-  const { selectedScreenSizes } = usePlayground();
-
-  const filteredScreenSizes = screenSizes.filter(item =>
-    selectedScreenSizes.includes(item.slug),
-  );
-
-  if (filteredScreenSizes.length === 0) {
-    return (
-      <div className={styles.containerEmpty}>
-        <Content />
-      </div>
-    );
-  }
-
-  return (
-    <div className={styles.container}>
-      {filteredScreenSizes.map(screenSize => (
-        <div
-          className={styles.breakpointContainer}
-          style={{ width: screenSize.width }}
-          key={screenSize.slug}
-        >
-          <Text>
-            {screenSize.title} - {screenSize.width}px
-          </Text>
-          <div className={styles.breakpointContent}>
-            <Frame>
-              <Content />
-            </Frame>
-          </div>
-        </div>
-      ))}
-    </div>
-  );
-}
-
-const Content = () => {
-  const { selectedComponents } = usePlayground();
-
-  return (
-    <Flex direction="column" gap="4">
-      {selectedComponents.find(c => c === 'button') && (
-        <Line content={<ButtonSnippet story="Playground" />} title="Button" />
-      )}
-      {selectedComponents.find(c => c === 'checkbox') && (
-        <Line
-          content={<CheckboxSnippet story="Playground" />}
-          title="Checkbox"
-        />
-      )}
-      {selectedComponents.find(c => c === 'heading') && (
-        <Line content={<HeadingSnippet story="Playground" />} title="Heading" />
-      )}
-      {selectedComponents.find(c => c === 'text') && (
-        <Line content={<TextSnippet story="Playground" />} title="Text" />
-      )}
-    </Flex>
-  );
-};
-
-const Line = ({ content, title }: { content: ReactNode; title: string }) => {
-  return (
-    <Grid.Root gap={{ xs: '2', md: '4' }}>
-      <Grid.Item colSpan="2">
-        <Text>{title}</Text>
-      </Grid.Item>
-      <Grid.Item colSpan="10">{content}</Grid.Item>
-    </Grid.Root>
-  );
-};

docs-ui/src/app/(playground)/playground/styles.module.css

@@ -1,36 +0,0 @@
-.container {
-  height: 100vh;
-  display: flex;
-  flex-direction: row;
-  gap: 24px;
-  overflow-x: scroll;
-}
-
-.containerEmpty {
-  padding: 78px 40px;
-}
-
-.breakpointContainer {
-  flex-shrink: 0;
-  margin-top: 40px;
-  height: calc(100vh - 86px);
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-
-  &:first-child {
-    margin-left: 48px;
-  }
-
-  &:last-child {
-    margin-right: 48px;
-  }
-}
-
-.breakpointContent {
-  height: 100%;
-  border-radius: 4px;
-  border: 1px solid var(--border);
-  background-color: var(--bg);
-  padding: 16px;
-}

docs-ui/src/app/layout.module.css

@@ -1,14 +1,15 @@
 .container {
   position: relative;
   z-index: 20;
-  width: 100%;
+  width: calc(100% - 64px);
   margin-inline: 0 16px;
+  margin-left: 32px;
+  margin-right: 32px;
   margin-top: 112px;
   margin-bottom: 48px;
   padding-inline: 40px;
   padding-block: 48px;
-  background-color: white;
-  width: calc(100% - 32px);
+  background-color: var(--panel);
   border-radius: 0.5rem;
 }
 

docs-ui/src/components/ChangelogComponent/index.tsx

@@ -11,19 +11,22 @@ export const ChangelogComponent = ({ component }: { component: Component }) => {
   return (
     <MDXRemote
       components={formattedMDXComponents}
-      source={`${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}`;
-        })
-        .join('\n')}`}
+      source={`
+        ## Changelog
+
+        ${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}`;
+          })
+          .join('\n')}`}
     />
   );
 };

docs-ui/src/components/ComponentInfos/ComponentInfos.tsx

@@ -1,68 +0,0 @@
-import { Tabs } from '@/components/Tabs';
-import { CodeBlock } from '@/components/CodeBlock';
-import type { ComponentInfosProps } from './types';
-import styles from '@/css/mdx.module.css';
-import Link from 'next/link';
-import { changelog } from '@/utils/changelog';
-import { MDXRemote } from 'next-mdx-remote-client/rsc';
-import { formattedMDXComponents } from '@/mdx-components';
-
-export const ComponentInfos = ({
-  usageCode,
-  component,
-  classNames,
-}: ComponentInfosProps) => {
-  const componentChangelog = changelog.filter(c =>
-    c.components.includes(component),
-  );
-
-  return (
-    <Tabs.Root>
-      <Tabs.List>
-        <Tabs.Tab>Usage</Tabs.Tab>
-        {classNames && classNames.length > 0 && <Tabs.Tab>Theming</Tabs.Tab>}
-        <Tabs.Tab>Changelog</Tabs.Tab>
-      </Tabs.List>
-      <Tabs.Panel>
-        <CodeBlock code={usageCode} />
-      </Tabs.Panel>
-      {classNames && classNames.length > 0 && (
-        <Tabs.Panel>
-          <p className={styles.p}>
-            We recommend starting with our{' '}
-            <Link className={styles.a} href="/theme/theming">
-              global tokens
-            </Link>{' '}
-            to customize the library and align it with your brand. For
-            additional flexibility, you can use the provided class names for
-            each element listed below.
-          </p>
-          <MDXRemote
-            components={formattedMDXComponents}
-            source={`${classNames
-              ?.map(className => `- \`${className}\``)
-              .join('\n')}`}
-          />
-        </Tabs.Panel>
-      )}
-      <Tabs.Panel>
-        <MDXRemote
-          components={formattedMDXComponents}
-          source={`${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}`;
-            })
-            .join('\n')}`}
-        />
-      </Tabs.Panel>
-    </Tabs.Root>
-  );
-};

docs-ui/src/components/ComponentInfos/index.ts

@@ -1 +0,0 @@
-export { ComponentInfos } from './ComponentInfos';

docs-ui/src/components/ComponentInfos/types.ts

@@ -1,9 +0,0 @@
-import type { Component } from '@/utils/changelog';
-import { ReactNode } from 'react';
-
-export interface ComponentInfosProps {
-  usageCode?: string;
-  classNames?: string[];
-  component: Component;
-  children: ReactNode;
-}

docs-ui/src/components/CustomTheme/styles.module.css

@@ -1,5 +1,6 @@
 .container {
   position: fixed;
+  z-index: 100;
   bottom: 16px;
   right: 16px;
   width: 240px;

docs-ui/src/components/Frame/index.tsx

@@ -1,32 +0,0 @@
-'use client';
-
-import { useEffect, useState } from 'react';
-import ReactFrame from 'react-frame-component';
-
-export const Frame = ({ children }: { children: React.ReactNode }) => {
-  const [show, setShow] = useState(false);
-
-  useEffect(() => {
-    setShow(true);
-  }, []);
-
-  if (!show) return null;
-
-  return (
-    <ReactFrame
-      loading="lazy"
-      style={{ width: '100%', height: '100%' }}
-      initialContent={`<!DOCTYPE html><html data-theme="light"><head></head><body><div class="frame-root"></div></body></html>`}
-      mountTarget=".frame-root"
-      head={
-        <>
-          <link rel="stylesheet" href="/core.css" />
-          <link rel="stylesheet" href="/components.css" />
-          <link rel="stylesheet" href="/backstage.css" />
-        </>
-      }
-    >
-      {children}
-    </ReactFrame>
-  );
-};

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

@@ -94,12 +94,12 @@
   border-radius: 4px;
 
   &:hover {
-    background-color: white;
+    background-color: var(--action);
   }
 }
 
 .line.active {
-  background-color: white;
+  background-color: var(--action);
 }
 
 .line.active .lineTitle {

docs-ui/src/components/Theming/index.tsx

@@ -0,0 +1,26 @@
+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';
+
+export function Theming({ component }: { component: Component }) {
+  const componentDefinition = componentDefinitions[component];
+
+  if (!componentDefinition) {
+    return null;
+  }
+
+  const classNames = componentDefinition.classNames;
+
+  // Convert classNames object values to array
+  const classNameArray = Object.values(classNames);
+
+  return (
+    <MDXRemote
+      components={formattedMDXComponents}
+      source={`## Theming
+      ${classNameArray.map(className => `- \`${className}\``).join('\n')}
+      `}
+    />
+  );
+}

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

@@ -2,8 +2,8 @@
   position: fixed;
   display: flex;
   top: 0;
-  left: 332px;
-  right: 40px;
+  left: 32px;
+  right: 32px;
   height: 112px;
   z-index: 10;
   align-items: center;
@@ -11,6 +11,13 @@
   padding-left: 0.25rem;
 }
 
+@media (min-width: 960px) {
+  .toolbar {
+    left: 332px;
+    right: 40px;
+  }
+}
+
 .left {
   display: flex;
   align-items: center;
@@ -25,7 +32,13 @@
 }
 
 .actions {
-  display: flex;
-  align-items: center;
-  gap: 1rem;
+  display: none;
+}
+
+@media (min-width: 600px) {
+  .actions {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+  }
 }

docs-ui/src/components/Toolbar/theme-name.module.css

@@ -4,20 +4,20 @@
   align-items: center;
   justify-content: space-between;
   gap: 0.75rem;
-  height: 2rem;
-  padding-left: 0.875rem;
-  padding-right: 0.75rem;
+  height: 3rem;
+  padding-left: 1.25rem;
+  padding-right: 1rem;
   margin: 0;
   outline: 0;
   border: 1px solid var(--color-gray-200);
-  border-radius: 0.375rem;
+  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(--surface-1);
+  background-color: var(--action);
 
   &:focus-visible {
     outline: 2px solid var(--color-blue);

docs-ui/src/components/Toolbar/theme.module.css

@@ -1,20 +1,17 @@
 .tabs {
   border-radius: 0.375rem;
   width: 100%;
-  background-color: var(--surface-1);
 }
 
 .tabsTheme {
   width: 100px;
   border-radius: 0.375rem;
-  background-color: var(--surface-1);
 }
 
 .list {
   display: flex;
   position: relative;
   z-index: 0;
-  padding-inline: 0.25rem;
   gap: 0.25rem;
 }
 
@@ -29,9 +26,10 @@
   appearance: none;
   color: var(--secondary);
   user-select: none;
-  height: 2rem;
   flex: 1;
   cursor: pointer;
+  width: 3rem;
+  height: 3rem;
 
   &[data-selected] {
     color: var(--primary);
@@ -55,7 +53,7 @@
       position: absolute;
       inset: 0.25rem 0;
       border-radius: 0.25rem;
-      outline: 2px solid var(--panel);
+      outline: 2px solid var(--action);
       outline-offset: -1px;
     }
   }
@@ -72,9 +70,9 @@
   top: 50%;
   translate: var(--active-tab-left) -50%;
   width: var(--active-tab-width);
-  height: 1.5rem;
-  border-radius: 0.25rem;
-  background-color: var(--panel);
+  height: 3rem;
+  border-radius: 3rem;
+  background-color: var(--action);
   transition-property: translate, width;
   transition-duration: 200ms;
   transition-timing-function: ease-in-out;

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

@@ -8,8 +8,9 @@ import {
   snippetSizes,
   snippetFallback,
 } from './avatar.props';
-import { ComponentInfos } from '@/components/ComponentInfos';
 import { PageTitle } from '@/components/PageTitle';
+import { Theming } from '@/components/Theming';
+import { ChangelogComponent } from '@/components/ChangelogComponent';
 
 <PageTitle
   title="Avatar"
@@ -23,18 +24,9 @@ import { PageTitle } from '@/components/PageTitle';
   code={`<Avatar src="https://avatars.githubusercontent.com/u/1540635?v=4" name="Charles de Dreuille" />`}
 />
 
-<ComponentInfos
-  component="avatar"
-  usageCode={snippetUsage}
-  classNames={[
-    'bui-AvatarRoot',
-    'bui-AvatarRoot[data-size="small"]',
-    'bui-AvatarRoot[data-size="medium"]',
-    'bui-AvatarRoot[data-size="large"]',
-    'bui-AvatarImage',
-    'bui-AvatarFallback',
-  ]}
-/>
+## Usage
+
+<CodeBlock code={snippetUsage} />
 
 ## API reference
 
@@ -65,3 +57,7 @@ If the image is not available, the avatar will show the initials of the name.
   preview={<AvatarSnippet story="Fallback" />}
   code={snippetFallback}
 />
+
+<Theming component="Avatar" />
+
+<ChangelogComponent component="avatar" />

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

@@ -10,8 +10,9 @@ import {
   boxResponsiveSnippet,
 } from './box.props';
 import { spacingPropDefs } from '@/utils/propDefs';
-import { ComponentInfos } from '@/components/ComponentInfos';
 import { PageTitle } from '@/components/PageTitle';
+import { Theming } from '@/components/Theming';
+import { ChangelogComponent } from '@/components/ChangelogComponent';
 
 <PageTitle
   type="Layout"
@@ -26,7 +27,9 @@ import { PageTitle } from '@/components/PageTitle';
   align="center"
 />
 
-<ComponentInfos component="box" usageCode={snippetUsage} />
+## Usage
+
+<CodeBlock code={snippetUsage} />
 
 ## API reference
 
@@ -56,3 +59,7 @@ A simple example of how to use the Box component.
 Here's a view when buttons are responsive.
 
 <CodeBlock code={boxResponsiveSnippet} />
+
+<Theming component="Box" />
+
+<ChangelogComponent component="box" />

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

@@ -12,8 +12,9 @@ import {
   buttonIconResponsiveSnippet,
   buttonIconAsLinkSnippet,
 } from './button-icon.props';
-import { ComponentInfos } from '@/components/ComponentInfos';
 import { PageTitle } from '@/components/PageTitle';
+import { Theming } from '@/components/Theming';
+import { ChangelogComponent } from '@/components/ChangelogComponent';
 
 <PageTitle
   title="ButtonIcon"
@@ -27,11 +28,9 @@ import { PageTitle } from '@/components/PageTitle';
   code={buttonIconDefaultSnippet}
 />
 
-<ComponentInfos
-  component="button-icon"
-  classNames={['bui-Button', 'bui-ButtonIcon']}
-  usageCode={buttonIconUsageSnippet}
-/>
+## Usage
+
+<CodeBlock code={buttonIconUsageSnippet} />
 
 ## API reference
 
@@ -80,3 +79,7 @@ Here's a view when buttons are disabled.
 Here's a view when buttons are responsive.
 
 <CodeBlock code={buttonIconResponsiveSnippet} />
+
+<Theming component="ButtonIcon" />
+
+<ChangelogComponent component="button-icon" />

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

@@ -11,8 +11,9 @@ import {
   buttonLinkDisabledSnippet,
   buttonLinkResponsiveSnippet,
 } from './button-link.props';
-import { ComponentInfos } from '@/components/ComponentInfos';
 import { PageTitle } from '@/components/PageTitle';
+import { Theming } from '@/components/Theming';
+import { ChangelogComponent } from '@/components/ChangelogComponent';
 
 <PageTitle
   title="ButtonLink"
@@ -26,11 +27,9 @@ import { PageTitle } from '@/components/PageTitle';
   code={buttonLinkVariantsSnippet}
 />
 
-<ComponentInfos
-  component="button-link"
-  classNames={['bui-Button', 'bui-ButtonLink']}
-  usageCode={buttonLinkSnippetUsage}
-/>
+## Usage
+
+<CodeBlock code={buttonLinkSnippetUsage} />
 
 ## API reference
 
@@ -91,3 +90,7 @@ Here's a view when buttons are disabled.
 Here's a view when buttons are responsive.
 
 <CodeBlock code={buttonLinkResponsiveSnippet} />
+
+<Theming component="ButtonLink" />
+
+<ChangelogComponent component="button-link" />

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

@@ -14,6 +14,7 @@ import {
 } from './button.props';
 import { ChangelogComponent } from '@/components/ChangelogComponent';
 import { PageTitle } from '@/components/PageTitle';
+import { Theming } from '@/components/Theming';
 
 <PageTitle
   title="Button"
@@ -103,10 +104,6 @@ If you want to use a button as a link, please use the `ButtonLink` component.
   code={buttonAsLinkSnippet}
 />
 
-## Theming
-
-- `bui-Button`
-
-## Changelog
+<Theming component="Button" />
 
 <ChangelogComponent component="button" />

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

@@ -12,8 +12,9 @@ import {
   cardLongBodySnippet,
   cardListRowSnippet,
 } from './card.props';
-import { ComponentInfos } from '@/components/ComponentInfos';
 import { PageTitle } from '@/components/PageTitle';
+import { Theming } from '@/components/Theming';
+import { ChangelogComponent } from '@/components/ChangelogComponent';
 
 <PageTitle
   title="Card"
@@ -27,11 +28,9 @@ import { PageTitle } from '@/components/PageTitle';
   code={cardDefaultSnippet}
 />
 
-<ComponentInfos
-  component="card"
-  classNames={['bui-Card', 'bui-CardHeader', 'bui-CardBody', 'bui-CardFooter']}
-  usageCode={cardUsageSnippet}
-/>
+## Usage
+
+<CodeBlock code={cardUsageSnippet} />
 
 ## API reference
 
@@ -84,3 +83,7 @@ Here's a view when card has a list.
   code={cardListRowSnippet}
   open
 />
+
+<Theming component="Card" />
+
+<ChangelogComponent component="card" />

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

@@ -8,8 +8,9 @@ import {
   checkboxDefaultSnippet,
   checkboxVariantsSnippet,
 } from './checkbox.props';
-import { ComponentInfos } from '@/components/ComponentInfos';
 import { PageTitle } from '@/components/PageTitle';
+import { Theming } from '@/components/Theming';
+import { ChangelogComponent } from '@/components/ChangelogComponent';
 
 <PageTitle
   title="Checkbox"
@@ -23,11 +24,9 @@ import { PageTitle } from '@/components/PageTitle';
   code={checkboxDefaultSnippet}
 />
 
-<ComponentInfos
-  component="checkbox"
-  classNames={['bui-Checkbox']}
-  usageCode={checkboxUsageSnippet}
-/>
+## Usage
+
+<CodeBlock code={checkboxUsageSnippet} />
 
 ## API reference
 
@@ -46,3 +45,7 @@ Here's a view when checkboxes have different variants.
   preview={<CheckboxSnippet story="AllVariants" />}
   code={checkboxVariantsSnippet}
 />
+
+<Theming component="Checkbox" />
+
+<ChangelogComponent component="checkbox" />

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

@@ -11,8 +11,9 @@ import {
   collapsibleTriggerSnippet,
   collapsibleOpenSnippet,
 } from './collapsible.props';
-import { ComponentInfos } from '@/components/ComponentInfos';
 import { PageTitle } from '@/components/PageTitle';
+import { Theming } from '@/components/Theming';
+import { ChangelogComponent } from '@/components/ChangelogComponent';
 
 <PageTitle
   title="Collapsible"
@@ -27,15 +28,9 @@ import { PageTitle } from '@/components/PageTitle';
   code={collapsibleDefaultSnippet}
 />
 
-<ComponentInfos
-  component="collapsible"
-  classNames={[
-    'bui-CollapsibleRoot',
-    'bui-CollapsibleTrigger',
-    'bui-CollapsiblePanel',
-  ]}
-  usageCode={collapsibleUsageSnippet}
-/>
+## Usage
+
+<CodeBlock code={collapsibleUsageSnippet} />
 
 ## API reference
 
@@ -71,3 +66,7 @@ Open the panel by default by setting the `defaultOpen` prop to `true`.
   preview={<CollapsibleSnippet story="Open" />}
   code={collapsibleOpenSnippet}
 />
+
+<Theming component="Collapsible" />
+
+<ChangelogComponent component="collapsible" />

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

@@ -9,8 +9,9 @@ import {
   containerSimpleSnippet,
   containerResponsiveSnippet,
 } from './container.props';
-import { ComponentInfos } from '@/components/ComponentInfos';
 import { PageTitle } from '@/components/PageTitle';
+import { Theming } from '@/components/Theming';
+import { ChangelogComponent } from '@/components/ChangelogComponent';
 
 <PageTitle
   type="Layout"
@@ -24,11 +25,9 @@ import { PageTitle } from '@/components/PageTitle';
   code={containerDefaultSnippet}
 />
 
-<ComponentInfos
-  component="container"
-  classNames={['bui-Container']}
-  usageCode={containerUsageSnippet}
-/>
+## Usage
+
+<CodeBlock code={containerUsageSnippet} />
 
 ## API reference
 
@@ -48,3 +47,7 @@ The Container component also supports responsive values, making it easy to
 create responsive designs.
 
 <CodeBlock code={containerResponsiveSnippet} />
+
+<Theming component="Container" />
+
+<ChangelogComponent component="container" />

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

@@ -12,8 +12,9 @@ import {
   flexAlignSnippet,
 } from './flex.props';
 import { spacingPropDefs } from '@/utils/propDefs';
-import { ComponentInfos } from '@/components/ComponentInfos';
 import { PageTitle } from '@/components/PageTitle';
+import { Theming } from '@/components/Theming';
+import { ChangelogComponent } from '@/components/ChangelogComponent';
 
 <PageTitle
   type="Layout"
@@ -28,11 +29,9 @@ import { PageTitle } from '@/components/PageTitle';
   code={flexDefaultSnippet}
 />
 
-<ComponentInfos
-  component="flex"
-  classNames={['bui-Flex']}
-  usageCode={flexUsageSnippet}
-/>
+## Usage
+
+<CodeBlock code={flexUsageSnippet} />
 
 ## API reference
 
@@ -63,3 +62,7 @@ The Flex component also supports responsive alignment, making it easy to
 create responsive designs.
 
 <CodeBlock code={flexAlignSnippet} />
+
+<Theming component="Flex" />
+
+<ChangelogComponent component="flex" />

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

@@ -14,8 +14,9 @@ import {
   gridResponsiveSnippet,
   gridStartEndSnippet,
 } from './grid.props';
-import { ComponentInfos } from '@/components/ComponentInfos';
 import { PageTitle } from '@/components/PageTitle';
+import { Theming } from '@/components/Theming';
+import { ChangelogComponent } from '@/components/ChangelogComponent';
 
 <PageTitle
   type="Layout"
@@ -29,11 +30,9 @@ import { PageTitle } from '@/components/PageTitle';
   code={gridDefaultSnippet}
 />
 
-<ComponentInfos
-  component="grid"
-  classNames={['bui-Grid', 'bui-GridItem']}
-  usageCode={gridUsageSnippet}
-/>
+## Usage
+
+<CodeBlock code={gridUsageSnippet} />
 
 ## API reference
 
@@ -93,3 +92,7 @@ responsive designs.
 The start and end props can be used to position the item in the grid.
 
 <CodeBlock code={gridStartEndSnippet} />
+
+<Theming component="Grid" />
+
+<ChangelogComponent component="grid" />

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

@@ -10,8 +10,9 @@ import {
   headingTruncateSnippet,
   headingResponsiveSnippet,
 } from './heading.props';
-import { ComponentInfos } from '@/components/ComponentInfos';
 import { PageTitle } from '@/components/PageTitle';
+import { Theming } from '@/components/Theming';
+import { ChangelogComponent } from '@/components/ChangelogComponent';
 
 <PageTitle
   title="Heading"
@@ -24,11 +25,9 @@ import { PageTitle } from '@/components/PageTitle';
   code={headingDefaultSnippet}
 />
 
-<ComponentInfos
-  component="heading"
-  classNames={['bui-Heading']}
-  usageCode={headingUsageSnippet}
-/>
+## Usage
+
+<CodeBlock code={headingUsageSnippet} />
 
 ## API reference
 
@@ -66,3 +65,7 @@ You can also use the `variant` prop to change the appearance of the text based
 on the screen size.
 
 <CodeBlock code={headingResponsiveSnippet} />
+
+<Theming component="Heading" />
+
+<ChangelogComponent component="heading" />

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

@@ -7,8 +7,9 @@ import {
   iconUsageSnippet,
   iconDefaultSnippet,
 } from './icon.props';
-import { ComponentInfos } from '@/components/ComponentInfos';
 import { PageTitle } from '@/components/PageTitle';
+import { Theming } from '@/components/Theming';
+import { ChangelogComponent } from '@/components/ChangelogComponent';
 
 <PageTitle
   title="Icon"
@@ -22,12 +23,14 @@ import { PageTitle } from '@/components/PageTitle';
   code={iconDefaultSnippet}
 />
 
-<ComponentInfos
-  component="icon"
-  classNames={['bui-Icon']}
-  usageCode={iconUsageSnippet}
-/>
+## Usage
+
+<CodeBlock code={iconUsageSnippet} />
 
 ## API reference
 
 <PropsTable data={iconPropDefs} />
+
+<Theming component="Icon" />
+
+<ChangelogComponent component="icon" />

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

@@ -13,8 +13,9 @@ import {
   linkVariantsSnippet,
   linkWeightsSnippet,
 } from './link.props';
-import { ComponentInfos } from '@/components/ComponentInfos';
 import { PageTitle } from '@/components/PageTitle';
+import { Theming } from '@/components/Theming';
+import { ChangelogComponent } from '@/components/ChangelogComponent';
 
 <PageTitle
   title="Link"
@@ -28,19 +29,9 @@ import { PageTitle } from '@/components/PageTitle';
   code={linkDefaultSnippet}
 />
 
-<ComponentInfos
-  component="link"
-  classNames={[
-    '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}
-/>
+## Usage
+
+<CodeBlock code={linkUsageSnippet} />
 
 ## API reference
 
@@ -71,3 +62,7 @@ Here's a view when links have different weights.
   preview={<LinkSnippet story="AllWeights" />}
   code={linkWeightsSnippet}
 />
+
+<Theming component="Link" />
+
+<ChangelogComponent component="link" />

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

@@ -13,8 +13,9 @@ import {
   menuHoverSnippet,
   menuSubmenuSnippet,
 } from './menu.props';
-import { ComponentInfos } from '@/components/ComponentInfos';
 import { PageTitle } from '@/components/PageTitle';
+import { Theming } from '@/components/Theming';
+import { ChangelogComponent } from '@/components/ChangelogComponent';
 
 <PageTitle
   title="Menu"
@@ -28,27 +29,9 @@ import { PageTitle } from '@/components/PageTitle';
   code={menuDefaultSnippet}
 />
 
-<ComponentInfos
-  component="menu"
-  classNames={[
-    '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}
-/>
+## Usage
+
+<CodeBlock code={menuUsageSnippet} />
 
 ## API reference
 
@@ -105,3 +88,7 @@ You can nest menus to create a more complex navigation structure.
   preview={<MenuSnippet story="Submenu" />}
   code={menuSubmenuSnippet}
 />
+
+<Theming component="Menu" />
+
+<ChangelogComponent component="menu" />

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

@@ -12,8 +12,10 @@ import {
   radioGroupValidationSnippet,
   radioGroupReadOnlySnippet,
 } from './radio-group.props';
-import { ComponentInfos } from '@/components/ComponentInfos';
 import { PageTitle } from '@/components/PageTitle';
+import { Theming } from '@/components/Theming';
+import { ChangelogComponent } from '@/components/ChangelogComponent';
+import { CodeBlock } from '@/components/CodeBlock';
 
 <PageTitle
   title="RadioGroup"
@@ -27,11 +29,9 @@ import { PageTitle } from '@/components/PageTitle';
   code={radioGroupDefaultSnippet}
 />
 
-<ComponentInfos
-  component="radio-group"
-  classNames={['bui-RadioGroup', 'bui-RadioGroupContent']}
-  usageCode={radioGroupUsageSnippet}
-/>
+## Usage
+
+<CodeBlock code={radioGroupUsageSnippet} />
 
 ## API reference
 
@@ -98,3 +98,7 @@ You can make the radio group read only by adding the `isReadOnly` prop to the `R
   preview={<RadioGroupSnippet story="ReadOnly" />}
   code={radioGroupReadOnlySnippet}
 />
+
+<Theming component="RadioGroup" />
+
+<ChangelogComponent component="radio-group" />

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

@@ -8,7 +8,10 @@ import {
   searchFieldSizesSnippet,
   searchFieldDescriptionSnippet,
 } from './search-field.props';
-import { ComponentInfos } from '@/components/ComponentInfos';
+import { PageTitle } from '@/components/PageTitle';
+import { Theming } from '@/components/Theming';
+import { ChangelogComponent } from '@/components/ChangelogComponent';
+import { CodeBlock } from '@/components/CodeBlock';
 
 <PageTitle
   title="SearchField"
@@ -22,22 +25,9 @@ import { ComponentInfos } from '@/components/ComponentInfos';
   code={searchFieldDefaultSnippet}
 />
 
-<ComponentInfos
-  component="searchfield"
-  classNames={[
-    'bui-SearchField',
-    'bui-TextField',
-    'bui-InputWrapper',
-    'bui-Input',
-    'bui-InputIcon',
-    'bui-FieldLabelWrapper',
-    'bui-FieldLabel',
-    'bui-FieldDescription',
-    'bui-FieldSecondaryLabel',
-    'bui-FieldError',
-  ]}
-  usageCode={searchFieldUsageSnippet}
-/>
+## Usage
+
+<CodeBlock code={searchFieldUsageSnippet} />
 
 ## API reference
 
@@ -68,3 +58,7 @@ Here's a simple SearchField with a description.
   preview={<SearchFieldSnippet story="WithDescription" />}
   code={searchFieldDescriptionSnippet}
 />
+
+<Theming component="SearchField" />
+
+<ChangelogComponent component="search-field" />

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

@@ -12,8 +12,9 @@ import {
   selectResponsiveSnippet,
   selectIconSnippet,
 } from './select.props';
-import { ComponentInfos } from '@/components/ComponentInfos';
 import { PageTitle } from '@/components/PageTitle';
+import { Theming } from '@/components/Theming';
+import { ChangelogComponent } from '@/components/ChangelogComponent';
 
 <PageTitle
   title="Select"
@@ -27,20 +28,9 @@ import { PageTitle } from '@/components/PageTitle';
   code={selectDefaultSnippet}
 />
 
-<ComponentInfos
-  component="select"
-  classNames={[
-    'bui-Select',
-    'bui-SelectTrigger',
-    'bui-SelectValue',
-    'bui-SelectIcon',
-    'bui-SelectList',
-    'bui-SelectItem',
-    'bui-SelectItemIndicator',
-    'bui-SelectItemLabel',
-  ]}
-  usageCode={selectUsageSnippet}
-/>
+## Usage
+
+<CodeBlock code={selectUsageSnippet} />
 
 ## API reference
 
@@ -102,3 +92,7 @@ Here's a view when the select is disabled.
 Here's a view when the select is responsive.
 
 <CodeBlock code={selectResponsiveSnippet} />
+
+<Theming component="Select" />
+
+<ChangelogComponent component="select" />

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

@@ -9,8 +9,9 @@ import {
   skeletonDemo1Snippet,
   skeletonDemo2Snippet,
 } from './skeleton.props';
-import { ComponentInfos } from '@/components/ComponentInfos';
 import { PageTitle } from '@/components/PageTitle';
+import { Theming } from '@/components/Theming';
+import { ChangelogComponent } from '@/components/ChangelogComponent';
 
 <PageTitle
   title="Skeleton"
@@ -24,11 +25,9 @@ import { PageTitle } from '@/components/PageTitle';
   code={skeletonDefaultSnippet}
 />
 
-<ComponentInfos
-  component="skeleton"
-  classNames={['bui-Skeleton']}
-  usageCode={skeletonUsageSnippet}
-/>
+## Usage
+
+<CodeBlock code={skeletonUsageSnippet} />
 
 ## API reference
 
@@ -59,3 +58,7 @@ You can use a mix of different sizes to create a more complex skeleton.
   code={skeletonDemo2Snippet}
   open
 />
+
+<Theming component="Skeleton" />
+
+<ChangelogComponent component="skeleton" />

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

@@ -3,8 +3,9 @@ import { Snippet } from '@/components/Snippet';
 import { CodeBlock } from '@/components/CodeBlock';
 import { SwitchSnippet } from '@/snippets/stories-snippets';
 import { switchPropDefs, snippetUsage } from './switch.props';
-import { ComponentInfos } from '@/components/ComponentInfos';
 import { PageTitle } from '@/components/PageTitle';
+import { Theming } from '@/components/Theming';
+import { ChangelogComponent } from '@/components/ChangelogComponent';
 
 <PageTitle
   title="Switch"
@@ -18,11 +19,9 @@ import { PageTitle } from '@/components/PageTitle';
   code={`<Switch />`}
 />
 
-<ComponentInfos
-  component="switch"
-  usageCode={snippetUsage}
-  classNames={['bui-Switch', 'bui-SwitchIndicator']}
-/>
+## Usage
+
+<CodeBlock code={snippetUsage} />
 
 ## API reference
 
@@ -41,3 +40,7 @@ A switch can be disabled using the `isDisabled` prop.
   preview={<SwitchSnippet story="Disabled" />}
   code={`<Switch isDisabled />`}
 />
+
+<Theming component="Switch" />
+
+<ChangelogComponent component="switch" />

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

@@ -10,8 +10,9 @@ import {
   tabsUsageSnippet,
   tabsDefaultSnippet,
 } from './tabs.props';
-import { ComponentInfos } from '@/components/ComponentInfos';
 import { PageTitle } from '@/components/PageTitle';
+import { Theming } from '@/components/Theming';
+import { ChangelogComponent } from '@/components/ChangelogComponent';
 
 <PageTitle
   title="Tabs"
@@ -24,17 +25,9 @@ import { PageTitle } from '@/components/PageTitle';
   code={tabsDefaultSnippet}
 />
 
-<ComponentInfos
-  component="tabs"
-  classNames={[
-    'bui-TabsRoot',
-    'bui-TabsList',
-    'bui-TabsTab',
-    'bui-TabsPanel',
-    'bui-TabsIndicator',
-  ]}
-  usageCode={tabsUsageSnippet}
-/>
+## Usage
+
+<CodeBlock code={tabsUsageSnippet} />
 
 ## API reference
 
@@ -61,3 +54,7 @@ An individual interactive tab button that toggles the corresponding panel. Rende
 A panel displayed when the corresponding tab is active. Renders a `<div>` element.
 
 <PropsTable data={tabsPanelPropDefs} />
+
+<Theming component="Tabs" />
+
+<ChangelogComponent component="tabs" />

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

@@ -8,8 +8,10 @@ import {
   textFieldSizesSnippet,
   textFieldDescriptionSnippet,
 } from './text-field.props';
-import { ComponentInfos } from '@/components/ComponentInfos';
 import { PageTitle } from '@/components/PageTitle';
+import { Theming } from '@/components/Theming';
+import { ChangelogComponent } from '@/components/ChangelogComponent';
+import { CodeBlock } from '@/components/CodeBlock';
 
 <PageTitle
   title="TextField"
@@ -23,21 +25,9 @@ import { PageTitle } from '@/components/PageTitle';
   code={textFieldDefaultSnippet}
 />
 
-<ComponentInfos
-  component="textfield"
-  classNames={[
-    'bui-TextField',
-    'bui-InputWrapper',
-    'bui-Input',
-    'bui-InputIcon',
-    'bui-FieldLabelWrapper',
-    'bui-FieldLabel',
-    'bui-FieldDescription',
-    'bui-FieldSecondaryLabel',
-    'bui-FieldError',
-  ]}
-  usageCode={textFieldUsageSnippet}
-/>
+## Usage
+
+<CodeBlock code={textFieldUsageSnippet} />
 
 ## API reference
 
@@ -68,3 +58,7 @@ Here's a simple TextField with a description.
   preview={<TextFieldSnippet story="WithDescription" />}
   code={textFieldDescriptionSnippet}
 />
+
+<Theming component="TextField" />
+
+<ChangelogComponent component="text-field" />

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

@@ -11,8 +11,9 @@ import {
   textTruncateSnippet,
   textResponsiveSnippet,
 } from './text.props';
-import { ComponentInfos } from '@/components/ComponentInfos';
 import { PageTitle } from '@/components/PageTitle';
+import { Theming } from '@/components/Theming';
+import { ChangelogComponent } from '@/components/ChangelogComponent';
 
 <PageTitle
   title="Text"
@@ -25,11 +26,9 @@ import { PageTitle } from '@/components/PageTitle';
   code={textDefaultSnippet}
 />
 
-<ComponentInfos
-  component="text"
-  classNames={['bui-Text']}
-  usageCode={textUsageSnippet}
-/>
+## Usage
+
+<CodeBlock code={textUsageSnippet} />
 
 ## API reference
 
@@ -76,3 +75,7 @@ You can also use the `variant` prop to change the appearance of the text based
 on the screen size.
 
 <CodeBlock code={textResponsiveSnippet} />
+
+<Theming component="Text" />
+
+<ChangelogComponent component="text" />

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

@@ -8,8 +8,9 @@ import {
   tooltipTriggerPropDefs,
   tooltipPropDefs,
 } from './tooltip.props';
-import { ComponentInfos } from '@/components/ComponentInfos';
 import { PageTitle } from '@/components/PageTitle';
+import { Theming } from '@/components/Theming';
+import { ChangelogComponent } from '@/components/ChangelogComponent';
 
 <PageTitle
   title="Tooltip"
@@ -23,11 +24,9 @@ import { PageTitle } from '@/components/PageTitle';
   align="center"
 />
 
-<ComponentInfos
-  component="tooltip"
-  classNames={['bui-Tooltip', 'bui-ToltipArrow']}
-  usageCode={tooltipUsageSnippet}
-/>
+## Usage
+
+<CodeBlock code={tooltipUsageSnippet} />
 
 ## API reference
 
@@ -42,3 +41,7 @@ The trigger will wrap both the trigger and the tooltip.
 The tooltip will wrap the content of the tooltip.
 
 <PropsTable data={tooltipPropDefs} />
+
+<Theming component="Tooltip" />
+
+<ChangelogComponent component="tooltip" />

docs-ui/src/css/globals.css

@@ -3,6 +3,7 @@
   --panel: #fff;
   --primary: #000;
   --secondary: #929292;
+  --action: #fff;
   --link: #4f5ce0;
   --font-regular: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
     'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
@@ -17,9 +18,10 @@
 
 [data-theme='dark'] {
   --bg: #000;
-  --panel: #1a1a1a;
+  --panel: #181818;
   --primary: #fff;
   --secondary: #818181;
+  --action: #202020;
   --link: #4856e8;
   --border: #2a2a2a;
   --surface-1: #282828;

docs-ui/yarn.lock

@@ -2321,7 +2321,6 @@ __metadata:
     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"
@@ -5587,17 +5586,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-frame-component@npm:^5.2.7":
-  version: 5.2.7
-  resolution: "react-frame-component@npm:5.2.7"
-  peerDependencies:
-    prop-types: ^15.5.9
-    react: ">= 16.3"
-    react-dom: ">= 16.3"
-  checksum: 10/bedee0c25075cbfb6d592991937640a9c8680f9017284e73ced338cc07348b3efc99121052b60ba0923d3d4ec1ed050348ddec452f059e0b947f6bff1d5bfe24
-  languageName: node
-  linkType: hard
-
 "react-is@npm:^16.13.1":
   version: 16.13.1
   resolution: "react-is@npm:16.13.1"