Rename --bui-bg into --bui-bg-surface-0

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

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

@@ -187,7 +187,7 @@ These colors are used for special purposes like ring, scrollbar, ...
 ## Core background colors
 
 These colors are used for the background of your application. We are mostly using for now a
-single elevated background for panels. `--bui-bg` should mostly use as the main background
+single elevated background for panels. `--bui-bg-surface-0` should mostly use as the main background
 color of your app.
 
 <Table.Root>
@@ -200,7 +200,7 @@ color of your app.
   <Table.Body>
     <Table.Row>
       <Table.Cell>
-        <Chip head>--bui-bg</Chip>
+        <Chip head>--bui-bg-surface-0</Chip>
       </Table.Cell>
       <Table.Cell>The background color of your Backstage instance.</Table.Cell>
     </Table.Row>

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

@@ -7,7 +7,7 @@
 .preview {
   border-radius: 8px;
   box-shadow: inset 0 0 0 1px var(--border);
-  background-color: var(--bui-bg);
+  background-color: var(--bui-bg-surface-0);
   padding: 1px;
   position: relative;
 }

docs-ui/src/snippets/code-snippets.ts

@@ -4,7 +4,7 @@ export const customTheme = `:root {
   --bui-font-regular: system-ui;
   --bui-font-weight-regular: 400;
   --bui-font-weight-bold: 600;
-  --bui-bg: #f8f8f8;
+  --bui-bg-surface-0: #f8f8f8;
   --bui-bg-surface-1: #fff;
   /* ... other CSS variables */
 
@@ -19,7 +19,7 @@ export const customTheme = `:root {
   --bui-font-regular: system-ui;
   --bui-font-weight-regular: 400;
   --bui-font-weight-bold: 600;
-  --bui-bg: #f8f8f8;
+  --bui-bg-surface-0: #f8f8f8;
   --bui-bg-surface-1: #fff;
   /* ... other CSS variables */