Merge branch 'master' into docs-ui-props-updates

docs-ui/src/app/components/box/components.tsx

@@ -2,11 +2,12 @@
 
 import { Box } from '../../../../../packages/ui/src/components/Box/Box';
 import { Flex } from '../../../../../packages/ui/src/components/Flex/Flex';
+import { DecorativeBox } from '@/components/DecorativeBox';
 
 export const Default = () => {
   return (
-    <Box p="4" surface="1">
-      Hello World
+    <Box width="64px" height="64px">
+      <DecorativeBox />
     </Box>
   );
 };
@@ -36,7 +37,7 @@ export const Responsive = () => {
       p={{ initial: '2', md: '4' }}
       display={{ initial: 'block', md: 'flex' }}
     >
-      Hello World
+      <DecorativeBox>Resize to see change</DecorativeBox>
     </Box>
   );
 };

docs-ui/src/app/components/box/page.mdx

@@ -34,7 +34,7 @@ import { ChangelogComponent } from '@/components/ChangelogComponent';
 
 ### Surface
 
-Here's a view when boxes have different surface levels.
+Use surface levels to create visual hierarchy.
 
 <Snippet preview={<Surface />} code={boxSurfaceSnippet} layout="side-by-side" />
 

docs-ui/src/app/components/box/snippets.ts

@@ -4,8 +4,8 @@ export const snippetUsage = `import { Box } from '@backstage/ui';
   Content with padding and background
 </Box>`;
 
-export const defaultSnippet = `<Box p="4" surface="1">
-  Hello World
+export const defaultSnippet = `<Box width="64px" height="64px">
+  <DecorativeBox />
 </Box>`;
 
 export const boxSurfaceSnippet = `<Flex direction="column" gap="4">
@@ -19,5 +19,5 @@ export const boxResponsiveSnippet = `<Box
   p={{ initial: '2', md: '4' }}
   display={{ initial: 'block', md: 'flex' }}
 >
-  Hello World
+  Content
 </Box>`;

docs-ui/src/app/components/container/components.tsx

@@ -1,33 +1,20 @@
 'use client';
 
 import { Container } from '../../../../../packages/ui/src/components/Container/Container';
-import { Box } from '../../../../../packages/ui/src/components/Box/Box';
-import { Text } from '../../../../../packages/ui/src/components/Text/Text';
+import { DecorativeBox } from '@/components/DecorativeBox';
 
-export const Preview = () => {
-  return (
-    <Container py="4">
-      <Text>Content is centered with max-width</Text>
-    </Container>
-  );
-};
-
-export const BasicUsagePreview = () => {
+export const Default = () => {
   return (
     <Container>
-      <Box>Hello World</Box>
-      <Box>Hello World</Box>
-      <Box>Hello World</Box>
+      <DecorativeBox>Page content goes here</DecorativeBox>
     </Container>
   );
 };
 
-export const ResponsiveSpacingPreview = () => {
+export const ResponsiveSpacing = () => {
   return (
-    <Container py={{ initial: '2', md: '4' }}>
-      <Box>Hello World</Box>
-      <Box>Hello World</Box>
-      <Box>Hello World</Box>
+    <Container py={{ initial: '4', md: '8' }}>
+      <DecorativeBox>Content with vertical spacing</DecorativeBox>
     </Container>
   );
 };

docs-ui/src/app/components/container/page.mdx

@@ -4,15 +4,10 @@ import { Snippet } from '@/components/Snippet';
 import { containerPropDefs } from './props-definition';
 import {
   containerUsageSnippet,
-  previewSnippet,
-  containerSimpleSnippet,
+  defaultSnippet,
   containerResponsiveSnippet,
 } from './snippets';
-import {
-  Preview,
-  BasicUsagePreview,
-  ResponsiveSpacingPreview,
-} from './components';
+import { Default, ResponsiveSpacing } from './components';
 import { PageTitle } from '@/components/PageTitle';
 import { Theming } from '@/components/Theming';
 import { ContainerDefinition } from '../../../utils/definitions';
@@ -21,38 +16,30 @@ import { ChangelogComponent } from '@/components/ChangelogComponent';
 <PageTitle
   type="Layout"
   title="Container"
-  description="A centered layout wrapper with max-width and vertical spacing props."
+  description="A page wrapper that centers content and constrains its maximum width."
 />
 
-<Snippet py={4} preview={<Preview />} code={previewSnippet} />
+<Snippet preview={<Default />} code={defaultSnippet} />
 
 ## Usage
 
 <CodeBlock code={containerUsageSnippet} />
 
-## API reference
+## Core Concepts
+
+Container provides the standard page layout for plugin content. It constrains content to a maximum width, centers it horizontally, and adds consistent horizontal gutters. Use it once per page to wrap your main content area.
+
+## API Reference
 
 <PropsTable data={containerPropDefs} />
 
 ## Examples
 
-### Basic Usage
+### Responsive spacing
 
-<Snippet
-  preview={<BasicUsagePreview />}
-  code={containerSimpleSnippet}
-  layout="side-by-side"
-/>
+Vertical spacing props accept breakpoint objects.
 
-### Responsive Spacing
-
-Spacing props accept breakpoint objects for responsive behavior.
-
-<Snippet
-  preview={<ResponsiveSpacingPreview />}
-  code={containerResponsiveSnippet}
-  layout="side-by-side"
-/>
+<Snippet preview={<ResponsiveSpacing />} code={containerResponsiveSnippet} />
 
 <Theming definition={ContainerDefinition} />
 

docs-ui/src/app/components/container/snippets.ts

@@ -1,19 +1,13 @@
 export const containerUsageSnippet = `import { Container } from "@backstage/ui";
 
-<Container>Hello World!</Container>`;
-
-export const previewSnippet = `<Container py="4">
-  Content is centered with max-width
+<Container>
+  {/* Your plugin's main content */}
 </Container>`;
 
-export const containerSimpleSnippet = `<Container>
-  <Box>Hello World</Box>
-  <Box>Hello World</Box>
-  <Box>Hello World</Box>
+export const defaultSnippet = `<Container>
+  <DecorativeBox>Page content goes here</DecorativeBox>
 </Container>`;
 
-export const containerResponsiveSnippet = `<Container py={{ initial: '2', md: '4' }}>
-  <Box>Hello World</Box>
-  <Box>Hello World</Box>
-  <Box>Hello World</Box>
+export const containerResponsiveSnippet = `<Container py={{ initial: '4', md: '8' }}>
+  <DecorativeBox>Content with vertical spacing</DecorativeBox>
 </Container>`;

docs-ui/src/app/components/flex/components.tsx

@@ -1,29 +1,14 @@
 'use client';
 
 import { Flex } from '../../../../../packages/ui/src/components/Flex/Flex';
-import { Box } from '../../../../../packages/ui/src/components/Box/Box';
-
-const boxStyle = {
-  width: '64px',
-  height: '64px',
-  background: '#eaf2fd',
-  border: '1px solid #2563eb',
-  borderRadius: '4px',
-};
-
-const smallBoxStyle = {
-  padding: '8px 12px',
-  background: '#eaf2fd',
-  border: '1px solid #2563eb',
-  borderRadius: '4px',
-};
+import { DecorativeBox } from '@/components/DecorativeBox';
 
 export const Default = () => {
   return (
     <Flex gap="4">
-      <Box style={boxStyle} />
-      <Box style={boxStyle} />
-      <Box style={boxStyle} />
+      <DecorativeBox />
+      <DecorativeBox />
+      <DecorativeBox />
     </Flex>
   );
 };
@@ -31,9 +16,9 @@ export const Default = () => {
 export const DirectionExample = () => {
   return (
     <Flex direction="column" gap="2">
-      <Box style={smallBoxStyle}>First</Box>
-      <Box style={smallBoxStyle}>Second</Box>
-      <Box style={smallBoxStyle}>Third</Box>
+      <DecorativeBox>First</DecorativeBox>
+      <DecorativeBox>Second</DecorativeBox>
+      <DecorativeBox>Third</DecorativeBox>
     </Flex>
   );
 };
@@ -41,9 +26,9 @@ export const DirectionExample = () => {
 export const ResponsiveExample = () => {
   return (
     <Flex gap={{ initial: '2', md: '4' }}>
-      <Box style={smallBoxStyle}>Item 1</Box>
-      <Box style={smallBoxStyle}>Item 2</Box>
-      <Box style={smallBoxStyle}>Item 3</Box>
+      <DecorativeBox>1</DecorativeBox>
+      <DecorativeBox>2</DecorativeBox>
+      <DecorativeBox>3</DecorativeBox>
     </Flex>
   );
 };
@@ -51,9 +36,9 @@ export const ResponsiveExample = () => {
 export const AlignExample = () => {
   return (
     <Flex align="center" justify="between" gap="4" style={{ width: '300px' }}>
-      <Box style={smallBoxStyle}>Start</Box>
-      <Box style={smallBoxStyle}>Middle</Box>
-      <Box style={smallBoxStyle}>End</Box>
+      <DecorativeBox>Start</DecorativeBox>
+      <DecorativeBox>Middle</DecorativeBox>
+      <DecorativeBox>End</DecorativeBox>
     </Flex>
   );
 };

docs-ui/src/app/components/flex/snippets.ts

@@ -7,25 +7,25 @@ export const flexUsageSnippet = `import { Flex } from '@backstage/ui';
 </Flex>`;
 
 export const defaultSnippet = `<Flex gap="4">
-  <Box style={{ width: '64px', height: '64px' }} />
-  <Box style={{ width: '64px', height: '64px' }} />
-  <Box style={{ width: '64px', height: '64px' }} />
+  <DecorativeBox />
+  <DecorativeBox />
+  <DecorativeBox />
 </Flex>`;
 
 export const flexDirectionSnippet = `<Flex direction="column" gap="2">
-  <Box>First</Box>
-  <Box>Second</Box>
-  <Box>Third</Box>
+  <DecorativeBox>First</DecorativeBox>
+  <DecorativeBox>Second</DecorativeBox>
+  <DecorativeBox>Third</DecorativeBox>
 </Flex>`;
 
 export const flexResponsiveSnippet = `<Flex gap={{ initial: '2', md: '4' }}>
-  <Box>Item 1</Box>
-  <Box>Item 2</Box>
-  <Box>Item 3</Box>
+  <DecorativeBox>1</DecorativeBox>
+  <DecorativeBox>2</DecorativeBox>
+  <DecorativeBox>3</DecorativeBox>
 </Flex>`;
 
 export const flexAlignSnippet = `<Flex align="center" justify="between" gap="4">
-  <Box>Start</Box>
-  <Box>Middle</Box>
-  <Box>End</Box>
+  <DecorativeBox>Start</DecorativeBox>
+  <DecorativeBox>Middle</DecorativeBox>
+  <DecorativeBox>End</DecorativeBox>
 </Flex>`;

docs-ui/src/app/components/grid/components.tsx

@@ -1,31 +1,17 @@
 'use client';
 
 import { Grid } from '../../../../../packages/ui/src/components/Grid/Grid';
-import { Box } from '../../../../../packages/ui/src/components/Box/Box';
-
-const boxStyle = {
-  height: '64px',
-  background: '#eaf2fd',
-  border: '1px solid #2563eb',
-  borderRadius: '4px',
-};
-
-const labelBoxStyle = {
-  padding: '8px 12px',
-  background: '#eaf2fd',
-  border: '1px solid #2563eb',
-  borderRadius: '4px',
-};
+import { DecorativeBox } from '@/components/DecorativeBox';
 
 export const Default = () => {
   return (
     <Grid.Root columns="3" gap="4">
-      <Box style={boxStyle} />
-      <Box style={boxStyle} />
-      <Box style={boxStyle} />
-      <Box style={boxStyle} />
-      <Box style={boxStyle} />
-      <Box style={boxStyle} />
+      <DecorativeBox />
+      <DecorativeBox />
+      <DecorativeBox />
+      <DecorativeBox />
+      <DecorativeBox />
+      <DecorativeBox />
     </Grid.Root>
   );
 };
@@ -33,10 +19,10 @@ export const Default = () => {
 export const ResponsiveExample = () => {
   return (
     <Grid.Root columns={{ initial: '2', md: '4' }} gap="4">
-      <Box style={labelBoxStyle}>1</Box>
-      <Box style={labelBoxStyle}>2</Box>
-      <Box style={labelBoxStyle}>3</Box>
-      <Box style={labelBoxStyle}>4</Box>
+      <DecorativeBox>1</DecorativeBox>
+      <DecorativeBox>2</DecorativeBox>
+      <DecorativeBox>3</DecorativeBox>
+      <DecorativeBox>4</DecorativeBox>
     </Grid.Root>
   );
 };
@@ -44,11 +30,11 @@ export const ResponsiveExample = () => {
 export const GridItemExample = () => {
   return (
     <Grid.Root columns="4" gap="4">
-      <Grid.Item colSpan="2" style={labelBoxStyle}>
-        Spans 2 columns
+      <Grid.Item colSpan="2">
+        <DecorativeBox>Spans 2 columns</DecorativeBox>
       </Grid.Item>
-      <Box style={labelBoxStyle}>1 column</Box>
-      <Box style={labelBoxStyle}>1 column</Box>
+      <DecorativeBox>1 column</DecorativeBox>
+      <DecorativeBox>1 column</DecorativeBox>
     </Grid.Root>
   );
 };

docs-ui/src/app/components/grid/snippets.ts

@@ -7,23 +7,25 @@ export const gridUsageSnippet = `import { Grid } from '@backstage/ui';
 </Grid.Root>`;
 
 export const defaultSnippet = `<Grid.Root columns="3" gap="4">
-  <Box style={{ height: '64px' }} />
-  <Box style={{ height: '64px' }} />
-  <Box style={{ height: '64px' }} />
-  <Box style={{ height: '64px' }} />
-  <Box style={{ height: '64px' }} />
-  <Box style={{ height: '64px' }} />
+  <DecorativeBox />
+  <DecorativeBox />
+  <DecorativeBox />
+  <DecorativeBox />
+  <DecorativeBox />
+  <DecorativeBox />
 </Grid.Root>`;
 
 export const gridResponsiveSnippet = `<Grid.Root columns={{ initial: '2', md: '4' }} gap="4">
-  <Box>1</Box>
-  <Box>2</Box>
-  <Box>3</Box>
-  <Box>4</Box>
+  <DecorativeBox>1</DecorativeBox>
+  <DecorativeBox>2</DecorativeBox>
+  <DecorativeBox>3</DecorativeBox>
+  <DecorativeBox>4</DecorativeBox>
 </Grid.Root>`;
 
 export const gridItemSnippet = `<Grid.Root columns="4" gap="4">
-  <Grid.Item colSpan="2">Spans 2 columns</Grid.Item>
-  <Grid.Item>1 column</Grid.Item>
-  <Grid.Item>1 column</Grid.Item>
+  <Grid.Item colSpan="2">
+    <DecorativeBox>Spans 2 columns</DecorativeBox>
+  </Grid.Item>
+  <DecorativeBox>1 column</DecorativeBox>
+  <DecorativeBox>1 column</DecorativeBox>
 </Grid.Root>`;

docs-ui/src/app/components/link/components.tsx

@@ -7,7 +7,9 @@ import { MemoryRouter } from 'react-router-dom';
 export const Default = () => {
   return (
     <MemoryRouter>
-      <Link href="/">Sign up for Backstage</Link>
+      <Link href="/" variant="body-large">
+        Sign up for Backstage
+      </Link>
     </MemoryRouter>
   );
 };
@@ -15,7 +17,7 @@ export const Default = () => {
 export const ExternalLink = () => {
   return (
     <MemoryRouter>
-      <Link href="https://backstage.io" target="_blank">
+      <Link href="https://backstage.io" target="_blank" variant="body-large">
         Sign up for Backstage
       </Link>
     </MemoryRouter>
@@ -58,22 +60,25 @@ export const AllVariants = () => {
 export const AllColors = () => {
   return (
     <MemoryRouter>
-      <Flex gap="4" direction="column">
-        <Link href="#" color="primary">
+      <Flex gap="2" direction="column">
+        <Link href="#" color="primary" variant="body-large">
           Primary
         </Link>
-        <Link href="#" color="secondary">
+        <Link href="#" color="secondary" variant="body-large">
           Secondary
         </Link>
-        <Link href="#" color="danger">
+        <Link href="#" color="danger" variant="body-large">
           Danger
         </Link>
-        <Link href="#" color="warning">
+        <Link href="#" color="warning" variant="body-large">
           Warning
         </Link>
-        <Link href="#" color="success">
+        <Link href="#" color="success" variant="body-large">
           Success
         </Link>
+        <Link href="#" color="info" variant="body-large">
+          Info
+        </Link>
       </Flex>
     </MemoryRouter>
   );
@@ -83,13 +88,28 @@ export const Weight = () => {
   return (
     <MemoryRouter>
       <Flex gap="4">
-        <Link href="#" weight="regular">
+        <Link href="#" weight="regular" variant="body-large">
           Regular
         </Link>
-        <Link href="#" weight="bold">
+        <Link href="#" weight="bold" variant="body-large">
           Bold
         </Link>
       </Flex>
     </MemoryRouter>
   );
 };
+
+export const Standalone = () => {
+  return (
+    <MemoryRouter>
+      <Flex gap="4">
+        <Link href="#" variant="body-large">
+          Default link
+        </Link>
+        <Link href="#" variant="body-large" standalone>
+          Standalone link
+        </Link>
+      </Flex>
+    </MemoryRouter>
+  );
+};

docs-ui/src/app/components/link/page.mdx

@@ -10,6 +10,7 @@ import {
   allVariantsSnippet,
   allColorsSnippet,
   weightSnippet,
+  standaloneSnippet,
 } from './snippets';
 import {
   Default,
@@ -17,6 +18,7 @@ import {
   AllVariants,
   AllColors,
   Weight,
+  Standalone,
 } from './components';
 import { PageTitle } from '@/components/PageTitle';
 import { Theming } from '@/components/Theming';
@@ -55,6 +57,7 @@ Use `target="_blank"` to open links in a new tab.
   py={4}
   preview={<ExternalLink />}
   code={externalLinkSnippet}
+  layout="side-by-side"
 />
 
 ### Variants
@@ -79,7 +82,25 @@ Status colors for contextual links.
 
 ### Weight
 
-<Snippet align="center" py={4} preview={<Weight />} code={weightSnippet} />
+<Snippet
+  align="center"
+  py={4}
+  preview={<Weight />}
+  code={weightSnippet}
+  layout="side-by-side"
+/>
+
+### Standalone
+
+Use `standalone` to remove the underline by default. The underline will appear on hover.
+
+<Snippet
+  align="center"
+  py={4}
+  preview={<Standalone />}
+  code={standaloneSnippet}
+  layout="side-by-side"
+/>
 
 <Theming definition={LinkDefinition} />
 

docs-ui/src/app/components/link/props-definition.tsx

@@ -66,6 +66,12 @@ export const linkPropDefs: Record<string, PropDef> = {
     type: 'boolean',
     description:
       'Truncates text with ellipsis when it overflows its container.',
+    default: 'false',
+  },
+  standalone: {
+    type: 'boolean',
+    description: 'Removes underline by default. Underline appears on hover.',
+    default: 'false',
   },
   ...childrenPropDefs,
   ...classNamePropDefs,

docs-ui/src/app/components/link/snippets.ts

@@ -4,7 +4,7 @@ export const linkUsageSnippet = `import { Link } from '@backstage/ui';
 
 export const defaultSnippet = `<Link href="/">Sign up for Backstage</Link>`;
 
-export const externalLinkSnippet = `<Link href="https://backstage.io" target="_blank">
+export const externalLinkSnippet = `<Link href="#" target="_blank">
   Sign up for Backstage
 </Link>`;
 
@@ -25,9 +25,15 @@ export const allColorsSnippet = `<Flex gap="4" direction="column">
   <Link href="#" color="danger">Danger</Link>
   <Link href="#" color="warning">Warning</Link>
   <Link href="#" color="success">Success</Link>
+  <Link href="#" color="info">Info</Link>
 </Flex>`;
 
 export const weightSnippet = `<Flex gap="4">
   <Link href="#" weight="regular">Regular</Link>
   <Link href="#" weight="bold">Bold</Link>
 </Flex>`;
+
+export const standaloneSnippet = `<Flex gap="4">
+  <Link href="#">Default link</Link>
+  <Link href="#" standalone>Standalone link</Link>
+</Flex>`;

docs-ui/src/app/components/text/components.tsx

@@ -30,6 +30,7 @@ export const Colors = () => {
       <Text color="danger">Danger</Text>
       <Text color="warning">Warning</Text>
       <Text color="success">Success</Text>
+      <Text color="info">Info</Text>
     </Flex>
   );
 };

docs-ui/src/app/components/text/snippets.ts

@@ -21,6 +21,7 @@ export const colorsSnippet = `<Flex direction="column" gap="2">
   <Text color="danger">Danger</Text>
   <Text color="warning">Warning</Text>
   <Text color="success">Success</Text>
+  <Text color="info">Info</Text>
 </Flex>`;
 
 export const weightsSnippet = `<Flex direction="column" gap="2">

docs-ui/src/app/layout.tsx

@@ -8,6 +8,8 @@ import { MobileBottomNav } from '@/components/MobileBottomNav';
 import styles from './layout.module.css';
 
 import '../css/globals.css';
+import '../css/theme-backstage.css';
+import '../css/theme-spotify.css';
 
 export const metadata: Metadata = {
   title: 'Backstage UI',

docs-ui/src/app/tokens/page.mdx

@@ -240,30 +240,6 @@ color of your app.
       </Table.Cell>
       <Table.Cell>Used for solid background colors when disabled.</Table.Cell>
     </Table.Row>
-    <Table.Row>
-      <Table.Cell>
-        <Chip head>--bui-bg-tint</Chip>
-      </Table.Cell>
-      <Table.Cell>Used for tint background colors.</Table.Cell>
-    </Table.Row>
-    <Table.Row>
-      <Table.Cell>
-        <Chip head>--bui-bg-tint-hover</Chip>
-      </Table.Cell>
-      <Table.Cell>Used for tint background colors when hovered.</Table.Cell>
-    </Table.Row>
-    <Table.Row>
-      <Table.Cell>
-        <Chip head>--bui-bg-tint-focus</Chip>
-      </Table.Cell>
-      <Table.Cell>Used for tint background colors when active.</Table.Cell>
-    </Table.Row>
-    <Table.Row>
-      <Table.Cell>
-        <Chip head>--bui-bg-tint-disabled</Chip>
-      </Table.Cell>
-      <Table.Cell>Used for tint background colors when disabled.</Table.Cell>
-    </Table.Row>
     <Table.Row>
       <Table.Cell>
         <Chip head>--bui-bg-danger</Chip>
@@ -282,6 +258,12 @@ color of your app.
       </Table.Cell>
       <Table.Cell>Used to show success information.</Table.Cell>
     </Table.Row>
+    <Table.Row>
+      <Table.Cell>
+        <Chip head>--bui-bg-info</Chip>
+      </Table.Cell>
+      <Table.Cell>Used to show informational content.</Table.Cell>
+    </Table.Row>
   </Table.Body>
 </Table.Root>
 
@@ -315,22 +297,6 @@ are prefixed with `fg` to make it easier to identify.
         It should be used on top of main background surfaces.
       </Table.Cell>
     </Table.Row>
-    <Table.Row>
-      <Table.Cell>
-        <Chip head>--bui-fg-link</Chip>
-      </Table.Cell>
-      <Table.Cell>
-        It should be used on top of main background surfaces.
-      </Table.Cell>
-    </Table.Row>
-    <Table.Row>
-      <Table.Cell>
-        <Chip head>--bui-fg-link-hover</Chip>
-      </Table.Cell>
-      <Table.Cell>
-        It should be used on top of main background surfaces.
-      </Table.Cell>
-    </Table.Row>
     <Table.Row>
       <Table.Cell>
         <Chip head>--bui-fg-disabled</Chip>
@@ -347,33 +313,45 @@ are prefixed with `fg` to make it easier to identify.
         It should be used on top of solid background colors.
       </Table.Cell>
     </Table.Row>
-    <Table.Row>
-      <Table.Cell>
-        <Chip head>--bui-fg-tint</Chip>
-      </Table.Cell>
-      <Table.Cell>
-        It should be used on top of tint background colors.
-      </Table.Cell>
-    </Table.Row>
-    <Table.Row>
-      <Table.Cell>
-        <Chip head>--bui-fg-tint-disabled</Chip>
-      </Table.Cell>
-      <Table.Cell>
-        It should be used on top of tint background colors when disabled.
-      </Table.Cell>
-    </Table.Row>
     <Table.Row>
       <Table.Cell>
         <Chip head>--bui-fg-danger</Chip>
       </Table.Cell>
+      <Table.Cell>Used for error states and destructive actions.</Table.Cell>
+    </Table.Row>
+    <Table.Row>
+      <Table.Cell>
+        <Chip head>--bui-fg-warning</Chip>
+      </Table.Cell>
+      <Table.Cell>
+        Used for warning states and cautionary information.
+      </Table.Cell>
+    </Table.Row>
+    <Table.Row>
+      <Table.Cell>
+        <Chip head>--bui-fg-success</Chip>
+      </Table.Cell>
+      <Table.Cell>Used for success states and positive feedback.</Table.Cell>
+    </Table.Row>
+    <Table.Row>
+      <Table.Cell>
+        <Chip head>--bui-fg-info</Chip>
+      </Table.Cell>
+      <Table.Cell>
+        Used for informational content and neutral status.
+      </Table.Cell>
+    </Table.Row>
+    <Table.Row>
+      <Table.Cell>
+        <Chip head>--bui-fg-danger-on-bg</Chip>
+      </Table.Cell>
       <Table.Cell>
         It should be used on top of danger background colors.
       </Table.Cell>
     </Table.Row>
     <Table.Row>
       <Table.Cell>
-        <Chip head>--bui-fg-warning</Chip>
+        <Chip head>--bui-fg-warning-on-bg</Chip>
       </Table.Cell>
       <Table.Cell>
         It should be used on top of warning background colors.
@@ -381,12 +359,20 @@ are prefixed with `fg` to make it easier to identify.
     </Table.Row>
     <Table.Row>
       <Table.Cell>
-        <Chip head>--bui-fg-success</Chip>
+        <Chip head>--bui-fg-success-on-bg</Chip>
       </Table.Cell>
       <Table.Cell>
         It should be used on top of success background colors.
       </Table.Cell>
     </Table.Row>
+    <Table.Row>
+      <Table.Cell>
+        <Chip head>--bui-fg-info-on-bg</Chip>
+      </Table.Cell>
+      <Table.Cell>
+        It should be used on top of info background colors.
+      </Table.Cell>
+    </Table.Row>
   </Table.Body>
 </Table.Root>
 
@@ -449,6 +435,12 @@ low contrast to help as a separator with the different background colors.
       </Table.Cell>
       <Table.Cell>It should be used on top of `--bui-bg-success`.</Table.Cell>
     </Table.Row>
+    <Table.Row>
+      <Table.Cell>
+        <Chip head>--bui-border-info</Chip>
+      </Table.Cell>
+      <Table.Cell>It should be used on top of `--bui-bg-info`.</Table.Cell>
+    </Table.Row>
   </Table.Body>
 </Table.Root>