paulononato/backstage
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

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

Browse Source 
Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>
This commit is contained in:
Charles de Dreuille
2025-12-22 16:15:56 +01:00
parent 7210ac16ef
commit 90a72b8d3e
11 changed files with 41 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.storybook/preview.tsx
+3 -2
View File
@@ -128,10 +128,11 @@ export default definePreview({
};
}, [selectedTheme, selectedThemeName]);
document.body.style.backgroundColor = 'var(--bui-bg)';
document.body.style.backgroundColor = 'var(--bui-bg-surface-0)';
const docsStoryElements = document.getElementsByClassName('docs-story');
Array.from(docsStoryElements).forEach(element => {
(element as HTMLElement).style.backgroundColor = 'var(--bui-bg)';
(element as HTMLElement).style.backgroundColor =
'var(--bui-bg-surface-0)';
});
return (
.storybook/themes/spotify.css
-6
View File
@@ -216,9 +216,6 @@
}
[data-theme-mode='light'][data-theme-name='spotify'] {
--bui-bg: var(--bui-gray-1);
--bui-bg-surface-1: var(--bui-white);
--bui-bg-surface-2: var(--bui-gray-2);
--bui-bg-solid: #1ed760;
--bui-bg-solid-hover: #3be477;
--bui-bg-solid-pressed: #1abc54;
@@ -248,9 +245,6 @@
}
[data-theme-mode='dark'][data-theme-name='spotify'] {
--bui-bg: var(--bui-black);
--bui-bg-surface-1: var(--bui-gray-1);
--bui-bg-surface-2: var(--bui-gray-2);
--bui-bg-solid: #1ed760;
--bui-bg-solid-hover: #3be477;
--bui-bg-solid-pressed: #1abc54;
docs-ui/src/app/tokens/page.mdx
+2 -2
View File
@@ -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
+1 -1
View File
@@ -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
+2 -2
View File
@@ -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 */
docs/conf/user-interface/index.md
+16 -16
View File
@@ -103,13 +103,13 @@ Backstage UI is using light by default under `:root` but you can target it more
[data-theme-mode='light'] {
/* Light theme specific styles */
  --bui-bg: #f8f8f8;
  --bui-bg-surface-0: #f8f8f8;
--bui-fg-primary: #000;
}
[data-theme-mode='dark'] {
/* Dark theme specific styles */
  --bui-bg: #333333;
  --bui-bg-surface-0: #333333;
--bui-fg-primary: #fff;
}
```
@@ -122,18 +122,18 @@ We recommend starting with a core set of CSS variables to quickly achieve a bran
And if you’d like to go even further, you can target specific component class names for advanced customization.
| Token Name | Description |
| -------------------- | ----------------------------------------------------------------------------------- |
| `--bui-bg` | This is used to define the background color of your app. It will only be used once. |
| `--bui-bg-surface-1` | We ar using this color to sit on top of `--bui-bg` mostly for `Card`, `Dialog`, ... |
| `--bui-bg-surface-2` | This is for content inside elevated components. This colour is less common. |
| `--bui-bg-solid` | This is used for main actions like primary buttons. |
| `--bui-fg-solid` | This is for texts or icons on top of a solid backgrounds. |
| `--bui-fg-primary` | Your primary text or icon colours. |
| `--bui-fg-secondary` | Your secondary text or icon colours. |
| `--bui-fg-link` | Used for links. |
| `--bui-border` | Main borders around surfaces like `Card`, `Dialog`, ... |
| `--bui-font-regular` | The main font of your app. |
| Token Name | Description |
| -------------------- | --------------------------------------------------------------------------------------------- |
| `--bui-bg-surface-0` | This is used to define the background color of your app. It will only be used once. |
| `--bui-bg-surface-1` | We ar using this color to sit on top of `--bui-bg-surface-0` mostly for `Card`, `Dialog`, ... |
| `--bui-bg-surface-2` | This is for content inside elevated components. This colour is less common. |
| `--bui-bg-solid` | This is used for main actions like primary buttons. |
| `--bui-fg-solid` | This is for texts or icons on top of a solid backgrounds. |
| `--bui-fg-primary` | Your primary text or icon colours. |
| `--bui-fg-secondary` | Your secondary text or icon colours. |
| `--bui-fg-link` | Used for links. |
| `--bui-border` | Main borders around surfaces like `Card`, `Dialog`, ... |
| `--bui-font-regular` | The main font of your app. |
<details>
<summary>All available CSS variables</summary>
@@ -157,11 +157,11 @@ 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 color of your app.
These colors are used for the background of your application. We are mostly using for now a single elevated background for panels. `--bui-bg-surface-0` should mostly use as the main background color of your app.
| Token Name | Description |
| ------------------------- | ------------------------------------------------ |
| `--bui-bg` | The background color of your Backstage instance. |
| `--bui-bg-surface-0` | The background color of your Backstage instance. |
| `--bui-bg-surface-1` | Use for any panels or elevated surfaces. |
| `--bui-bg-surface-2` | Use for any panels or elevated surfaces. |
| `--bui-bg-solid` | Used for solid background colors. |
packages/ui/css/styles.css
+6 -4
View File
@@ -51,9 +51,10 @@
--bui-gray-6: #8c8c8c;
--bui-gray-7: #757575;
--bui-gray-8: #595959;
--bui-bg: var(--bui-gray-1);
--bui-bg-surface-0: var(--bui-gray-1);
--bui-bg-surface-1: var(--bui-white);
--bui-bg-surface-2: var(--bui-gray-2);
--bui-bg-surface-2: var(--bui-gray-1);
--bui-bg-surface-3: var(--bui-gray-2);
--bui-bg-solid: #1f5493;
--bui-bg-solid-hover: #163a66;
--bui-bg-solid-pressed: #0f2b4e;
@@ -99,9 +100,10 @@
--bui-gray-6: #7b7b7b;
--bui-gray-7: #9e9e9e;
--bui-gray-8: #b4b4b4;
--bui-bg: #333;
--bui-bg-surface-1: #424242;
--bui-bg-surface-0: var(--bui-black);
--bui-bg-surface-1: var(--bui-gray-1);
--bui-bg-surface-2: var(--bui-gray-2);
--bui-bg-surface-3: var(--bui-gray-3);
--bui-bg-solid: #9cc9ff;
--bui-bg-solid-hover: #83b9fd;
--bui-bg-solid-pressed: #83b9fd;
packages/ui/src/components/Header/Header.module.css
+1 -1
View File
@@ -27,7 +27,7 @@
left: 0px;
right: 0px;
height: 16px;
background-color: var(--bui-bg);
background-color: var(--bui-bg-surface-0);
z-index: 0;
}
packages/ui/src/css/core.css
+1 -1
View File
@@ -27,7 +27,7 @@
}
body {
background-color: var(--bui-bg);
background-color: var(--bui-bg-surface-0);
/* Text defaults */
color: var(--bui-fg-primary);
packages/ui/src/css/tokens.css
+6 -4
View File
@@ -81,9 +81,10 @@
--bui-gray-8: #595959;
/* Background Colors */
--bui-bg: var(--bui-gray-1);
--bui-bg-surface-0: var(--bui-gray-1);
--bui-bg-surface-1: var(--bui-white);
--bui-bg-surface-2: var(--bui-gray-2);
--bui-bg-surface-2: var(--bui-gray-1);
--bui-bg-surface-3: var(--bui-gray-2);
--bui-bg-solid: #1f5493;
--bui-bg-solid-hover: #163a66;
--bui-bg-solid-pressed: #0f2b4e;
@@ -140,9 +141,10 @@
--bui-gray-8: #b4b4b4;
/* Background Colors */
--bui-bg: #333333;
--bui-bg-surface-1: #424242;
--bui-bg-surface-0: var(--bui-black);
--bui-bg-surface-1: var(--bui-gray-1);
--bui-bg-surface-2: var(--bui-gray-2);
--bui-bg-surface-3: var(--bui-gray-3);
--bui-bg-solid: #9cc9ff;
--bui-bg-solid-hover: #83b9fd;
--bui-bg-solid-pressed: #83b9fd;
plugins/mui-to-bui/src/components/BuiThemerPage/convertMuiToBuiTheme.ts
+3 -2
View File
@@ -110,9 +110,10 @@ function generateBuiVariables(theme: Mui5Theme): Record<string, string> {
// Generate surface colors
Object.entries({
'': palette.background.default,
'surface-0': palette.background.default,
'surface-1': palette.background.paper,
'surface-2': palette.background.default,
'surface-3': palette.background.default,
solid: palette.primary.main,
'solid-hover': blend(palette.primary.main, palette.primary.dark, 0.5),
'solid-pressed': palette.primary.dark,
@@ -125,7 +126,7 @@ function generateBuiVariables(theme: Mui5Theme): Record<string, string> {
warning: palette.warning.light,
success: palette.success.light,
}).forEach(([key, value]) => {
styleObject[`--bui-bg${key ? `-${key}` : ''}`] = value;
styleObject[`--bui-bg-${key}`] = value;
});
// Border colors