diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx index 10200ae12d..4e15677aed 100644 --- a/.storybook/preview.tsx +++ b/.storybook/preview.tsx @@ -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 ( diff --git a/.storybook/themes/spotify.css b/.storybook/themes/spotify.css index bcb1ded9ff..c04ba3f714 100644 --- a/.storybook/themes/spotify.css +++ b/.storybook/themes/spotify.css @@ -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; diff --git a/docs-ui/src/app/tokens/page.mdx b/docs-ui/src/app/tokens/page.mdx index 8e9031c81c..97266afbf4 100644 --- a/docs-ui/src/app/tokens/page.mdx +++ b/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. @@ -200,7 +200,7 @@ color of your app. - --bui-bg + --bui-bg-surface-0 The background color of your Backstage instance. diff --git a/docs-ui/src/components/Snippet/styles.module.css b/docs-ui/src/components/Snippet/styles.module.css index 3141564293..ed5bd22def 100644 --- a/docs-ui/src/components/Snippet/styles.module.css +++ b/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; } diff --git a/docs-ui/src/snippets/code-snippets.ts b/docs-ui/src/snippets/code-snippets.ts index 1a22a24340..57169ae32a 100644 --- a/docs-ui/src/snippets/code-snippets.ts +++ b/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 */ diff --git a/docs/conf/user-interface/index.md b/docs/conf/user-interface/index.md index 81acfdf720..51d2f545f3 100644 --- a/docs/conf/user-interface/index.md +++ b/docs/conf/user-interface/index.md @@ -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. |
All available CSS variables @@ -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. | diff --git a/packages/ui/css/styles.css b/packages/ui/css/styles.css index c96eda05c9..8bde88345f 100644 --- a/packages/ui/css/styles.css +++ b/packages/ui/css/styles.css @@ -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; diff --git a/packages/ui/src/components/Header/Header.module.css b/packages/ui/src/components/Header/Header.module.css index ad50c42e0c..031cfd4d16 100644 --- a/packages/ui/src/components/Header/Header.module.css +++ b/packages/ui/src/components/Header/Header.module.css @@ -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; } diff --git a/packages/ui/src/css/core.css b/packages/ui/src/css/core.css index 5be23e7a1b..321ca07eff 100644 --- a/packages/ui/src/css/core.css +++ b/packages/ui/src/css/core.css @@ -27,7 +27,7 @@ } body { - background-color: var(--bui-bg); + background-color: var(--bui-bg-surface-0); /* Text defaults */ color: var(--bui-fg-primary); diff --git a/packages/ui/src/css/tokens.css b/packages/ui/src/css/tokens.css index 028c60311d..a60107f9d2 100644 --- a/packages/ui/src/css/tokens.css +++ b/packages/ui/src/css/tokens.css @@ -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; diff --git a/plugins/mui-to-bui/src/components/BuiThemerPage/convertMuiToBuiTheme.ts b/plugins/mui-to-bui/src/components/BuiThemerPage/convertMuiToBuiTheme.ts index 1b8528922b..029d70cec7 100644 --- a/plugins/mui-to-bui/src/components/BuiThemerPage/convertMuiToBuiTheme.ts +++ b/plugins/mui-to-bui/src/components/BuiThemerPage/convertMuiToBuiTheme.ts @@ -110,9 +110,10 @@ function generateBuiVariables(theme: Mui5Theme): Record { // 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 { warning: palette.warning.light, success: palette.success.light, }).forEach(([key, value]) => { - styleObject[`--bui-bg${key ? `-${key}` : ''}`] = value; + styleObject[`--bui-bg-${key}`] = value; }); // Border colors