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

Migrate all components to new tokens

Browse Source 
Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>
This commit is contained in:
Charles de Dreuille
2026-02-06 13:48:08 +00:00
parent f16694e97f
commit 599f6687a2
43 changed files with 371 additions and 205 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.changeset/wicked-walls-accept.md
+1 -1
View File
@@ -42,7 +42,7 @@ For tint colors (backgrounds, foregrounds, borders), migrate to appropriate stat
- background: var(--bui-bg-tint);
+ background: var(--bui-bg-info); /* For informational sections */
+ /* or */
+ background: var(--bui-bg-neutral-on-surface-0); /* For neutral emphasis */
+ background: var(--bui-bg-neutral-1); /* For neutral emphasis */
}
```
.storybook/preview.tsx
+2 -2
View File
@@ -134,11 +134,11 @@ export default definePreview({
};
}, [selectedTheme, selectedThemeName]);
document.body.style.backgroundColor = 'var(--bui-bg-surface-0)';
document.body.style.backgroundColor = 'var(--bui-bg-neutral-0)';
const docsStoryElements = document.getElementsByClassName('docs-story');
Array.from(docsStoryElements).forEach(element => {
(element as HTMLElement).style.backgroundColor =
'var(--bui-bg-surface-0)';
'var(--bui-bg-neutral-0)';
});
return (
.storybook/storybook.css
+2 -2
View File
@@ -13,7 +13,7 @@
}
[data-theme-mode='dark'] {
--sb-sidebar-bg: var(--bui-bg-surface-1);
--sb-sidebar-bg: var(--bui-bg-neutral-1);
}
[data-theme-name='spotify'] {
@@ -24,7 +24,7 @@
--sb-panel-right: 8px;
--sb-sidebar-border: none;
--sb-sidebar-border-right: none;
--sb-sidebar-bg: var(--bui-bg-surface-1);
--sb-sidebar-bg: var(--bui-bg-neutral-1);
--sb-options-border: none;
--sb-options-border-left: none;
--sb-content-padding-inline: 258px;
.storybook/themes/spotify.css
+1 -1
View File
@@ -246,7 +246,7 @@
}
[data-theme-mode='dark'][data-theme-name='spotify'] {
--bui-bg-surface-0: var(--bui-black);
--bui-bg-neutral-0: var(--bui-black);
--bui-bg-solid: #1ed760;
--bui-bg-solid-hover: #3be477;
docs-ui/src/app/tokens/page.mdx
+5 -5
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-surface-0` should mostly use as the main background
single elevated background for panels. `--bui-bg-neutral-0` should mostly use as the main background
color of your app.
<Table.Root>
@@ -200,19 +200,19 @@ color of your app.
<Table.Body>
<Table.Row>
<Table.Cell>
<Chip head>--bui-bg-surface-0</Chip>
<Chip head>--bui-bg-neutral-0</Chip>
</Table.Cell>
<Table.Cell>The background color of your Backstage instance.</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell>
<Chip head>--bui-bg-surface-1</Chip>
<Chip head>--bui-bg-neutral-1</Chip>
</Table.Cell>
<Table.Cell>Use for any panels or elevated surfaces.</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell>
<Chip head>--bui-bg-surface-2</Chip>
<Chip head>--bui-bg-neutral-2</Chip>
</Table.Cell>
<Table.Cell>Use for any panels or elevated surfaces.</Table.Cell>
</Table.Row>
@@ -393,7 +393,7 @@ low contrast to help as a separator with the different background colors.
<Table.Cell>
<Chip head>--bui-border</Chip>
</Table.Cell>
<Table.Cell>It should be used on top of `--bui-bg-surface-1`.</Table.Cell>
<Table.Cell>It should be used on top of `--bui-bg-neutral-1`.</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell>
docs-ui/src/components/Snippet/styles.module.css
+2 -2
View File
@@ -7,7 +7,7 @@
.preview {
border-radius: 8px;
box-shadow: inset 0 0 0 1px var(--border);
background-color: var(--bui-bg-surface-0);
background-color: var(--bui-bg-neutral-0);
padding: 1px;
position: relative;
}
@@ -90,7 +90,7 @@
.sideBySidePreview {
border-radius: 8px;
box-shadow: inset 0 0 0 1px var(--border);
background-color: var(--bui-bg-surface-0);
background-color: var(--bui-bg-neutral-0);
padding: 1px;
min-width: 0;
display: flex;
docs-ui/src/css/theme-backstage.css
+1 -1
View File
File diff suppressed because one or more lines are too long
docs-ui/src/css/theme-spotify.css
+1 -1
View File
File diff suppressed because one or more lines are too long
docs-ui/src/snippets/code-snippets.ts
+4 -4
View File
@@ -4,8 +4,8 @@ export const customTheme = `:root {
--bui-font-regular: system-ui;
--bui-font-weight-regular: 400;
--bui-font-weight-bold: 600;
--bui-bg-surface-0: #f8f8f8;
--bui-bg-surface-1: #fff;
--bui-bg-neutral-0: #f8f8f8;
--bui-bg-neutral-1: #fff;
/* ... other CSS variables */
/* Add your custom components styles here */
@@ -19,8 +19,8 @@ export const customTheme = `:root {
--bui-font-regular: system-ui;
--bui-font-weight-regular: 400;
--bui-font-weight-bold: 600;
--bui-bg-surface-0: #f8f8f8;
--bui-bg-surface-1: #fff;
--bui-bg-neutral-0: #f8f8f8;
--bui-bg-neutral-1: #fff;
/* ... other CSS variables */
/* Add your custom components styles here */
docs/conf/user-interface/index.md
+11 -11
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-surface-0: #f8f8f8;
  --bui-bg-neutral-0: #f8f8f8;
--bui-fg-primary: #000;
}
[data-theme-mode='dark'] {
/* Dark theme specific styles */
  --bui-bg-surface-0: #333333;
  --bui-bg-neutral-0: #333333;
--bui-fg-primary: #fff;
}
```
@@ -124,9 +124,9 @@ And if you’d like to go even further, you can target specific component class
| 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-neutral-0` | This is used to define the background color of your app. It will only be used once. |
| `--bui-bg-neutral-1` | We ar using this color to sit on top of `--bui-bg-neutral-0` mostly for `Card`, `Dialog`, ... |
| `--bui-bg-neutral-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. |
@@ -160,14 +160,14 @@ 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-surface-0` 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-neutral-0` should mostly use as the main background color of your app.
| Token Name | Description |
| ------------------------- | ------------------------------------------------ |
| `--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-surface-3` | Use for any panels or elevated surfaces. |
| `--bui-bg-neutral-0` | The background color of your Backstage instance. |
| `--bui-bg-neutral-1` | Use for any panels or elevated surfaces. |
| `--bui-bg-neutral-2` | Use for any panels or elevated surfaces. |
| `--bui-bg-neutral-3` | Use for any panels or elevated surfaces. |
| `--bui-bg-solid` | Used for solid background colors. |
| `--bui-bg-solid-hover` | Used for solid background colors when hovered. |
| `--bui-bg-solid-pressed` | Used for solid background colors when pressed. |
@@ -202,7 +202,7 @@ These border colors are mostly meant to be used as borders on top of any compone
| Token Name | Description |
| ----------------------- | --------------------------------------------------- |
| `--bui-border` | It should be used on top of `--bui-bg-surface-1`. |
| `--bui-border` | It should be used on top of `--bui-bg-neutral-1`. |
| `--bui-border-hover` | Used when the component is interactive and hovered. |
| `--bui-border-pressed` | Used when the component is interactive and hovered. |
| `--bui-border-disabled` | Used when the component is disabled. |
packages/ui/css/styles.css
+6 -6
View File
@@ -48,7 +48,7 @@
--bui-bg-solid-pressed: #0f2b4e;
--bui-bg-solid-disabled: #163a66;
--bui-bg-neutral-0: #f8f8f8;
--bui-bg-neutral-1: oklch(0% 0 0 / .06);
--bui-bg-neutral-1: #fff;
--bui-bg-neutral-1-hover: oklch(0% 0 0 / .12);
--bui-bg-neutral-1-pressed: oklch(0% 0 0 / .16);
--bui-bg-neutral-1-disabled: oklch(0% 0 0 / .06);
@@ -69,8 +69,8 @@
--bui-bg-success: #dcfce7;
--bui-bg-info: #dbeafe;
--bui-fg-primary: var(--bui-black);
--bui-fg-secondary: #757575;
--bui-fg-disabled: #9e9e9e;
--bui-fg-secondary: oklch(0% 0 0 / .5);
--bui-fg-disabled: oklch(0% 0 0 / .28);
--bui-fg-solid: var(--bui-white);
--bui-fg-solid-disabled: #98a8bc;
--bui-fg-danger-on-bg: #991919;
@@ -123,8 +123,8 @@
--bui-bg-success: #042713;
--bui-bg-info: #132049;
--bui-fg-primary: var(--bui-white);
--bui-fg-secondary: #9e9e9e;
--bui-fg-disabled: #9e9e9e;
--bui-fg-secondary: oklch(0% 0 0 / .5);
--bui-fg-disabled: oklch(0% 0 0 / .28);
--bui-fg-solid: #101821;
--bui-fg-solid-disabled: #6191cc;
--bui-fg-danger-on-bg: #fca5a5;
@@ -251,7 +251,7 @@
}
body {
background-color: var(--bui-bg-surface-0);
background-color: var(--bui-bg-neutral-0);
color: var(--bui-fg-primary);
font-family: var(--bui-font-regular);
font-weight: var(--bui-font-weight-regular);
packages/ui/src/components/Accordion/Accordion.module.css
+1 -1
View File
@@ -19,7 +19,7 @@
@layer components {
.bui-Accordion {
width: 100%;
background-color: var(--bui-bg-surface-1);
background-color: var(--bui-bg-neutral-1);
border-radius: var(--bui-radius-3);
padding: var(--bui-space-3);
}
packages/ui/src/components/Alert/Alert.module.css
+1 -1
View File
@@ -18,7 +18,7 @@
@layer components {
.bui-Alert {
--alert-bg: var(--bui-bg-surface-1);
--alert-bg: var(--bui-bg-neutral-1);
--alert-fg: var(--bui-fg-primary);
display: flex;
packages/ui/src/components/Avatar/Avatar.module.css
+1 -1
View File
@@ -26,7 +26,7 @@
user-select: none;
font-weight: 500;
color: var(--bui-fg-primary);
background-color: var(--bui-bg-surface-2);
background-color: var(--bui-bg-neutral-2);
font-size: 1rem;
line-height: 1;
overflow: hidden;
packages/ui/src/components/Box/Box.module.css
+4 -4
View File
@@ -24,19 +24,19 @@
}
.bui-Box[data-surface='0'] {
background-color: var(--bui-bg-surface-0);
background-color: var(--bui-bg-neutral-0);
}
.bui-Box[data-surface='1'] {
background-color: var(--bui-bg-surface-1);
background-color: var(--bui-bg-neutral-1);
}
.bui-Box[data-surface='2'] {
background-color: var(--bui-bg-surface-2);
background-color: var(--bui-bg-neutral-2);
}
.bui-Box[data-surface='3'] {
background-color: var(--bui-bg-surface-3);
background-color: var(--bui-bg-neutral-3);
}
.bui-Box[data-surface='danger'] {
packages/ui/src/components/Button/Button.module.css
+20 -20
View File
@@ -113,27 +113,27 @@
}
.bui-Button[data-variant='secondary'] {
--bg: var(--bui-bg-neutral-on-surface-0);
--bg-hover: var(--bui-bg-neutral-on-surface-0-hover);
--bg-active: var(--bui-bg-neutral-on-surface-0-pressed);
--bg: var(--bui-bg-neutral-1);
--bg-hover: var(--bui-bg-neutral-1-hover);
--bg-active: var(--bui-bg-neutral-1-pressed);
--fg: var(--bui-fg-primary);
&[data-on-surface='1'] {
--bg: var(--bui-bg-neutral-on-surface-1);
--bg-hover: var(--bui-bg-neutral-on-surface-1-hover);
--bg-active: var(--bui-bg-neutral-on-surface-1-pressed);
--bg: var(--bui-bg-neutral-2);
--bg-hover: var(--bui-bg-neutral-2-hover);
--bg-active: var(--bui-bg-neutral-2-pressed);
}
&[data-on-surface='2'] {
--bg: var(--bui-bg-neutral-on-surface-2);
--bg-hover: var(--bui-bg-neutral-on-surface-2-hover);
--bg-active: var(--bui-bg-neutral-on-surface-2-pressed);
--bg: var(--bui-bg-neutral-3);
--bg-hover: var(--bui-bg-neutral-3-hover);
--bg-active: var(--bui-bg-neutral-3-pressed);
}
&[data-on-surface='3'] {
--bg: var(--bui-bg-neutral-on-surface-3);
--bg-hover: var(--bui-bg-neutral-on-surface-3-hover);
--bg-active: var(--bui-bg-neutral-on-surface-3-pressed);
--bg: var(--bui-bg-neutral-4);
--bg-hover: var(--bui-bg-neutral-4-hover);
--bg-active: var(--bui-bg-neutral-4-pressed);
}
&[data-disabled='true'],
@@ -178,23 +178,23 @@
}
.bui-Button[data-variant='tertiary'] {
--bg-hover: var(--bui-bg-neutral-on-surface-0-hover);
--bg-active: var(--bui-bg-neutral-on-surface-0-pressed);
--bg-hover: var(--bui-bg-neutral-1-hover);
--bg-active: var(--bui-bg-neutral-1-pressed);
--fg: var(--bui-fg-primary);
&[data-on-surface='1'] {
--bg-hover: var(--bui-bg-neutral-on-surface-1-hover);
--bg-active: var(--bui-bg-neutral-on-surface-1-pressed);
--bg-hover: var(--bui-bg-neutral-2-hover);
--bg-active: var(--bui-bg-neutral-2-pressed);
}
&[data-on-surface='2'] {
--bg-hover: var(--bui-bg-neutral-on-surface-2-hover);
--bg-active: var(--bui-bg-neutral-on-surface-2-pressed);
--bg-hover: var(--bui-bg-neutral-3-hover);
--bg-active: var(--bui-bg-neutral-3-pressed);
}
&[data-on-surface='3'] {
--bg-hover: var(--bui-bg-neutral-on-surface-3-hover);
--bg-active: var(--bui-bg-neutral-on-surface-3-pressed);
--bg-hover: var(--bui-bg-neutral-4-hover);
--bg-active: var(--bui-bg-neutral-4-pressed);
}
&[data-disabled='true'],
packages/ui/src/components/Button/Button.stories.tsx
+58 -44
View File
@@ -82,7 +82,7 @@ export const Variants = meta.story({
</Flex>
</Flex>
<Flex direction="column" gap="4">
<Text>On Surface 0</Text>
<Text>Neutral 0</Text>
<Flex align="center" surface="0" p="4">
<Button iconStart={<RiCloudLine />} variant="primary">
Button
@@ -105,7 +105,7 @@ export const Variants = meta.story({
</Flex>
</Flex>
<Flex direction="column" gap="4">
<Text>On Surface 1</Text>
<Text>Neutral 1</Text>
<Flex align="center" surface="1" p="4">
<Button iconStart={<RiCloudLine />} variant="primary">
Button
@@ -128,50 +128,64 @@ export const Variants = meta.story({
</Flex>
</Flex>
<Flex direction="column" gap="4">
<Text>On Surface 2</Text>
<Flex align="center" surface="2" p="4">
<Button iconStart={<RiCloudLine />} variant="primary">
Button
</Button>
<Button iconStart={<RiCloudLine />} variant="secondary">
Button
</Button>
<Button iconStart={<RiCloudLine />} variant="tertiary">
Button
</Button>
<Button iconStart={<RiCloudLine />} variant="primary" destructive>
Button
</Button>
<Button iconStart={<RiCloudLine />} variant="secondary" destructive>
Button
</Button>
<Button iconStart={<RiCloudLine />} variant="tertiary" destructive>
Button
</Button>
</Flex>
<Text>Neutral 2</Text>
<Box surface="1">
<Flex align="center" surface="2" p="4">
<Button iconStart={<RiCloudLine />} variant="primary">
Button
</Button>
<Button iconStart={<RiCloudLine />} variant="secondary">
Button
</Button>
<Button iconStart={<RiCloudLine />} variant="tertiary">
Button
</Button>
<Button iconStart={<RiCloudLine />} variant="primary" destructive>
Button
</Button>
<Button iconStart={<RiCloudLine />} variant="secondary" destructive>
Button
</Button>
<Button iconStart={<RiCloudLine />} variant="tertiary" destructive>
Button
</Button>
</Flex>
</Box>
</Flex>
<Flex direction="column" gap="4">
<Text>On Surface 3</Text>
<Flex align="center" surface="3" p="4">
<Button iconStart={<RiCloudLine />} variant="primary">
Button
</Button>
<Button iconStart={<RiCloudLine />} variant="secondary">
Button
</Button>
<Button iconStart={<RiCloudLine />} variant="tertiary">
Button
</Button>
<Button iconStart={<RiCloudLine />} variant="primary" destructive>
Button
</Button>
<Button iconStart={<RiCloudLine />} variant="secondary" destructive>
Button
</Button>
<Button iconStart={<RiCloudLine />} variant="tertiary" destructive>
Button
</Button>
</Flex>
<Text>Neutral 3</Text>
<Box surface="1">
<Box surface="2">
<Flex align="center" surface="3" p="4">
<Button iconStart={<RiCloudLine />} variant="primary">
Button
</Button>
<Button iconStart={<RiCloudLine />} variant="secondary">
Button
</Button>
<Button iconStart={<RiCloudLine />} variant="tertiary">
Button
</Button>
<Button iconStart={<RiCloudLine />} variant="primary" destructive>
Button
</Button>
<Button
iconStart={<RiCloudLine />}
variant="secondary"
destructive
>
Button
</Button>
<Button
iconStart={<RiCloudLine />}
variant="tertiary"
destructive
>
Button
</Button>
</Flex>
</Box>
</Box>
</Flex>
</Flex>
),
packages/ui/src/components/ButtonIcon/ButtonIcon.module.css
+20 -20
View File
@@ -80,27 +80,27 @@
}
.bui-ButtonIcon[data-variant='secondary'] {
--bg: var(--bui-bg-neutral-on-surface-0);
--bg-hover: var(--bui-bg-neutral-on-surface-0-hover);
--bg-active: var(--bui-bg-neutral-on-surface-0-pressed);
--bg: var(--bui-bg-neutral-1);
--bg-hover: var(--bui-bg-neutral-1-hover);
--bg-active: var(--bui-bg-neutral-1-pressed);
--fg: var(--bui-fg-primary);
&[data-on-surface='1'] {
--bg: var(--bui-bg-neutral-on-surface-1);
--bg-hover: var(--bui-bg-neutral-on-surface-1-hover);
--bg-active: var(--bui-bg-neutral-on-surface-1-pressed);
--bg: var(--bui-bg-neutral-2);
--bg-hover: var(--bui-bg-neutral-2-hover);
--bg-active: var(--bui-bg-neutral-2-pressed);
}
&[data-on-surface='2'] {
--bg: var(--bui-bg-neutral-on-surface-2);
--bg-hover: var(--bui-bg-neutral-on-surface-2-hover);
--bg-active: var(--bui-bg-neutral-on-surface-2-pressed);
--bg: var(--bui-bg-neutral-3);
--bg-hover: var(--bui-bg-neutral-3-hover);
--bg-active: var(--bui-bg-neutral-3-pressed);
}
&[data-on-surface='3'] {
--bg: var(--bui-bg-neutral-on-surface-3);
--bg-hover: var(--bui-bg-neutral-on-surface-3-hover);
--bg-active: var(--bui-bg-neutral-on-surface-3-pressed);
--bg: var(--bui-bg-neutral-4);
--bg-hover: var(--bui-bg-neutral-4-hover);
--bg-active: var(--bui-bg-neutral-4-pressed);
}
&[data-disabled='true'],
@@ -118,23 +118,23 @@
}
.bui-ButtonIcon[data-variant='tertiary'] {
--bg-hover: var(--bui-bg-neutral-on-surface-0-hover);
--bg-active: var(--bui-bg-neutral-on-surface-0-pressed);
--bg-hover: var(--bui-bg-neutral-1-hover);
--bg-active: var(--bui-bg-neutral-1-pressed);
--fg: var(--bui-fg-primary);
&[data-on-surface='1'] {
--bg-hover: var(--bui-bg-neutral-on-surface-1-hover);
--bg-active: var(--bui-bg-neutral-on-surface-1-pressed);
--bg-hover: var(--bui-bg-neutral-2-hover);
--bg-active: var(--bui-bg-neutral-2-pressed);
}
&[data-on-surface='2'] {
--bg-hover: var(--bui-bg-neutral-on-surface-2-hover);
--bg-active: var(--bui-bg-neutral-on-surface-2-pressed);
--bg-hover: var(--bui-bg-neutral-3-hover);
--bg-active: var(--bui-bg-neutral-3-pressed);
}
&[data-on-surface='3'] {
--bg-hover: var(--bui-bg-neutral-on-surface-3-hover);
--bg-active: var(--bui-bg-neutral-on-surface-3-pressed);
--bg-hover: var(--bui-bg-neutral-4-hover);
--bg-active: var(--bui-bg-neutral-4-pressed);
}
&[data-disabled='true'],
packages/ui/src/components/ButtonLink/ButtonLink.module.css
+20 -20
View File
@@ -74,27 +74,27 @@
}
.bui-ButtonLink[data-variant='secondary'] {
--bg: var(--bui-bg-neutral-on-surface-0);
--bg-hover: var(--bui-bg-neutral-on-surface-0-hover);
--bg-active: var(--bui-bg-neutral-on-surface-0-pressed);
--bg: var(--bui-bg-neutral-1);
--bg-hover: var(--bui-bg-neutral-1-hover);
--bg-active: var(--bui-bg-neutral-1-pressed);
--fg: var(--bui-fg-primary);
&[data-on-surface='1'] {
--bg: var(--bui-bg-neutral-on-surface-1);
--bg-hover: var(--bui-bg-neutral-on-surface-1-hover);
--bg-active: var(--bui-bg-neutral-on-surface-1-pressed);
--bg: var(--bui-bg-neutral-2);
--bg-hover: var(--bui-bg-neutral-2-hover);
--bg-active: var(--bui-bg-neutral-2-pressed);
}
&[data-on-surface='2'] {
--bg: var(--bui-bg-neutral-on-surface-2);
--bg-hover: var(--bui-bg-neutral-on-surface-2-hover);
--bg-active: var(--bui-bg-neutral-on-surface-2-pressed);
--bg: var(--bui-bg-neutral-3);
--bg-hover: var(--bui-bg-neutral-3-hover);
--bg-active: var(--bui-bg-neutral-3-pressed);
}
&[data-on-surface='3'] {
--bg: var(--bui-bg-neutral-on-surface-3);
--bg-hover: var(--bui-bg-neutral-on-surface-3-hover);
--bg-active: var(--bui-bg-neutral-on-surface-3-pressed);
--bg: var(--bui-bg-neutral-4);
--bg-hover: var(--bui-bg-neutral-4-hover);
--bg-active: var(--bui-bg-neutral-4-pressed);
}
&[data-disabled='true'] {
@@ -111,23 +111,23 @@
}
.bui-ButtonLink[data-variant='tertiary'] {
--bg-hover: var(--bui-bg-neutral-on-surface-0-hover);
--bg-active: var(--bui-bg-neutral-on-surface-0-pressed);
--bg-hover: var(--bui-bg-neutral-1-hover);
--bg-active: var(--bui-bg-neutral-1-pressed);
--fg: var(--bui-fg-primary);
&[data-on-surface='1'] {
--bg-hover: var(--bui-bg-neutral-on-surface-1-hover);
--bg-active: var(--bui-bg-neutral-on-surface-1-pressed);
--bg-hover: var(--bui-bg-neutral-2-hover);
--bg-active: var(--bui-bg-neutral-2-pressed);
}
&[data-on-surface='2'] {
--bg-hover: var(--bui-bg-neutral-on-surface-2-hover);
--bg-active: var(--bui-bg-neutral-on-surface-2-pressed);
--bg-hover: var(--bui-bg-neutral-3-hover);
--bg-active: var(--bui-bg-neutral-3-pressed);
}
&[data-on-surface='3'] {
--bg-hover: var(--bui-bg-neutral-on-surface-3-hover);
--bg-active: var(--bui-bg-neutral-on-surface-3-pressed);
--bg-hover: var(--bui-bg-neutral-4-hover);
--bg-active: var(--bui-bg-neutral-4-pressed);
}
&[data-disabled='true'] {
packages/ui/src/components/Card/Card.module.css
+1 -1
View File
@@ -21,7 +21,7 @@
display: flex;
flex-direction: column;
gap: var(--bui-space-3);
background-color: var(--bui-bg-surface-1);
background-color: var(--bui-bg-neutral-1);
border-radius: var(--bui-radius-3);
padding-block: var(--bui-space-3);
color: var(--bui-fg-primary);
packages/ui/src/components/Checkbox/Checkbox.module.css
+2 -2
View File
@@ -45,7 +45,7 @@
box-shadow: inset 0 0 0 1px var(--bui-border);
border-radius: 2px;
transition: background-color 0.2s ease-in-out;
background-color: var(--bui-bg-surface-1);
background-color: var(--bui-bg-neutral-1);
padding: 0;
flex-shrink: 0;
color: transparent;
@@ -63,7 +63,7 @@
}
.bui-Checkbox[data-indeterminate] & {
background-color: var(--bui-bg-surface-1);
background-color: var(--bui-bg-neutral-1);
box-shadow: inset 0 0 0 1px var(--bui-border);
color: var(--bui-fg-primary);
}
packages/ui/src/components/Dialog/Dialog.module.css
+1 -1
View File
@@ -43,7 +43,7 @@
}
.bui-Dialog {
background: var(--bui-bg-surface-1);
background: var(--bui-bg-neutral-1);
border-radius: 0.5rem;
border: 1px solid var(--bui-border);
color: var(--bui-fg-primary);
packages/ui/src/components/Flex/Flex.module.css
+4 -4
View File
@@ -25,19 +25,19 @@
}
.bui-Flex[data-surface='0'] {
background-color: var(--bui-bg-surface-0);
background-color: var(--bui-bg-neutral-0);
}
.bui-Flex[data-surface='1'] {
background-color: var(--bui-bg-surface-1);
background-color: var(--bui-bg-neutral-1);
}
.bui-Flex[data-surface='2'] {
background-color: var(--bui-bg-surface-2);
background-color: var(--bui-bg-neutral-2);
}
.bui-Flex[data-surface='3'] {
background-color: var(--bui-bg-surface-3);
background-color: var(--bui-bg-neutral-3);
}
.bui-Flex[data-surface='danger'] {
packages/ui/src/components/Grid/Grid.module.css
+4 -4
View File
@@ -23,22 +23,22 @@
.bui-Grid[data-surface='0'],
.bui-GridItem[data-surface='0'] {
background-color: var(--bui-bg-surface-0);
background-color: var(--bui-bg-neutral-0);
}
.bui-Grid[data-surface='1'],
.bui-GridItem[data-surface='1'] {
background-color: var(--bui-bg-surface-1);
background-color: var(--bui-bg-neutral-1);
}
.bui-Grid[data-surface='2'],
.bui-GridItem[data-surface='2'] {
background-color: var(--bui-bg-surface-2);
background-color: var(--bui-bg-neutral-2);
}
.bui-Grid[data-surface='3'],
.bui-GridItem[data-surface='3'] {
background-color: var(--bui-bg-surface-3);
background-color: var(--bui-bg-neutral-3);
}
.bui-Grid[data-surface='danger'],
packages/ui/src/components/Header/Header.module.css
+3 -3
View File
@@ -27,7 +27,7 @@
left: 0px;
right: 0px;
height: 16px;
background-color: var(--bui-bg-surface-0);
background-color: var(--bui-bg-neutral-0);
z-index: 0;
}
@@ -43,7 +43,7 @@
flex-direction: row;
align-items: center;
justify-content: space-between;
background-color: var(--bui-bg-surface-1);
background-color: var(--bui-bg-neutral-1);
padding-inline: var(--bui-space-5);
border-bottom: 1px solid var(--bui-border);
color: var(--bui-fg-primary);
@@ -93,6 +93,6 @@
margin-bottom: var(--bui-space-4);
padding-inline: var(--bui-space-3);
border-bottom: 1px solid var(--bui-border);
background-color: var(--bui-bg-surface-1);
background-color: var(--bui-bg-neutral-1);
}
}
packages/ui/src/components/Menu/Menu.module.css
+5 -5
View File
@@ -23,7 +23,7 @@
box-shadow: var(--bui-shadow);
border: 1px solid var(--bui-border);
border-radius: var(--bui-radius-2);
background: var(--bui-bg-surface-1);
background: var(--bui-bg-neutral-1);
color: var(--bui-fg-primary);
outline: none;
transition: transform 200ms, opacity 200ms;
@@ -70,12 +70,12 @@
display: block;
&[data-focused] .bui-MenuItemWrapper {
background: var(--bui-bg-surface-2);
background: var(--bui-bg-neutral-2);
color: var(--bui-fg-primary);
}
&[data-open] .bui-MenuItemWrapper {
background: var(--bui-bg-surface-2);
background: var(--bui-bg-neutral-2);
color: var(--bui-fg-primary);
}
@@ -114,7 +114,7 @@
display: block;
&:hover .bui-MenuItemWrapper {
background: var(--bui-bg-surface-2);
background: var(--bui-bg-neutral-2);
color: var(--bui-fg-primary);
}
@@ -195,7 +195,7 @@
display: flex;
align-items: center;
border-bottom: 1px solid var(--bui-border);
background-color: var(--bui-bg-surface-1);
background-color: var(--bui-bg-neutral-1);
height: 2rem;
&[data-empty] {
packages/ui/src/components/PasswordField/PasswordField.module.css
+1 -1
View File
@@ -38,7 +38,7 @@
align-items: center;
border-radius: var(--bui-radius-2);
border: 1px solid var(--bui-border);
background-color: var(--bui-bg-surface-1);
background-color: var(--bui-bg-neutral-1);
transition: border-color 0.2s ease-in-out, outline-color 0.2s ease-in-out;
&[data-size='small'] {
packages/ui/src/components/Popover/Popover.module.css
+4 -4
View File
@@ -20,7 +20,7 @@
.bui-Popover {
box-shadow: var(--bui-shadow);
border-radius: var(--bui-radius-3);
background: var(--bui-bg-surface-1);
background: var(--bui-bg-neutral-1);
border: 1px solid var(--bui-gray-3);
forced-color-adjust: none;
outline: none;
@@ -90,7 +90,7 @@
elements in order to guarantee that the stroke is
always overlaying a consistent color. */
path:nth-child(1) {
fill: var(--bui-bg-surface-1);
fill: var(--bui-bg-neutral-1);
}
path:nth-child(2) {
@@ -123,12 +123,12 @@
}
[data-theme='dark'] .bui-Popover {
background: var(--bui-bg-surface-2);
background: var(--bui-bg-neutral-2);
border: 1px solid var(--bui-gray-4);
}
[data-theme='dark'] .bui-PopoverArrow svg path:nth-child(1) {
fill: var(--bui-bg-surface-2);
fill: var(--bui-bg-neutral-2);
}
[data-theme='dark'] .bui-PopoverArrow svg path:nth-child(2) {
packages/ui/src/components/SearchField/SearchField.module.css
+1 -1
View File
@@ -94,7 +94,7 @@
align-items: center;
border-radius: var(--bui-radius-2);
border: 1px solid var(--bui-border);
background-color: var(--bui-bg-surface-1);
background-color: var(--bui-bg-neutral-1);
transition: border-color 0.2s ease-in-out, outline-color 0.2s ease-in-out;
&[data-size='small'] {
packages/ui/src/components/Select/Select.module.css
+2 -2
View File
@@ -36,7 +36,7 @@
box-sizing: border-box;
border-radius: var(--bui-radius-3);
border: 1px solid var(--bui-border);
background-color: var(--bui-bg-surface-1);
background-color: var(--bui-bg-neutral-1);
display: flex;
justify-content: space-between;
align-items: center;
@@ -160,7 +160,7 @@
inset-block: 0;
inset-inline: var(--bui-space-1);
border-radius: var(--bui-radius-2);
background: var(--bui-bg-surface-2);
background: var(--bui-bg-neutral-2);
z-index: -1;
}
packages/ui/src/components/Skeleton/Skeleton.module.css
+1 -1
View File
@@ -19,7 +19,7 @@
@layer components {
.bui-Skeleton {
animation: var(--bui-animate-pulse);
background-color: var(--bui-bg-surface-2);
background-color: var(--bui-bg-neutral-2);
border-radius: var(--bui-radius-2);
}
packages/ui/src/components/TextField/TextField.module.css
+1 -1
View File
@@ -76,7 +76,7 @@
padding: 0 var(--bui-space-3);
border-radius: var(--bui-radius-2);
border: 1px solid var(--bui-border);
background-color: var(--bui-bg-surface-1);
background-color: var(--bui-bg-neutral-1);
font-size: var(--bui-font-size-3);
font-family: var(--bui-font-regular);
font-weight: var(--bui-font-weight-regular);
packages/ui/src/components/ToggleButton/ToggleButton.module.css
+4 -4
View File
@@ -25,7 +25,7 @@
gap: var(--bui-space-1_5);
border: none;
border-radius: var(--bui-radius-2);
background: var(--bui-bg-surface-1);
background: var(--bui-bg-neutral-1);
color: var(--bui-fg-primary);
font-family: var(--bui-font-regular);
font-weight: var(--bui-font-weight-bold);
@@ -41,16 +41,16 @@
}
&:not([data-selected])[data-hovered] {
background: var(--bui-bg-surface-2);
background: var(--bui-bg-neutral-2);
}
&[data-disabled] {
background: var(--bui-bg-neutral-on-surface-0-disabled);
background: var(--bui-bg-neutral-1-disabled);
color: var(--bui-fg-disabled);
}
&[data-disabled][data-hovered] {
background: var(--bui-bg-neutral-on-surface-0-disabled);
background: var(--bui-bg-neutral-1-disabled);
}
&[data-disabled][data-selected] {
packages/ui/src/components/Tooltip/Tooltip.module.css
+4 -4
View File
@@ -20,7 +20,7 @@
.bui-Tooltip {
box-shadow: var(--bui-shadow);
border-radius: 4px;
background: var(--bui-bg-surface-1);
background: var(--bui-bg-neutral-1);
border: 1px solid var(--bui-gray-3);
forced-color-adjust: none;
outline: none;
@@ -74,7 +74,7 @@
elements in order to guarantee that the stroke is
always overlaying a consistent color. */
path:nth-child(1) {
fill: var(--bui-bg-surface-1);
fill: var(--bui-bg-neutral-1);
}
path:nth-child(2) {
@@ -107,13 +107,13 @@
}
[data-theme='dark'] .bui-Tooltip {
background: var(--bui-bg-surface-2);
background: var(--bui-bg-neutral-2);
box-shadow: none;
border: 1px solid var(--bui-gray-4);
}
[data-theme='dark'] .bui-TooltipArrow svg path:nth-child(1) {
fill: var(--bui-bg-surface-2);
fill: var(--bui-bg-neutral-2);
}
[data-theme='dark'] .bui-TooltipArrow svg path:nth-child(2) {
packages/ui/src/css/colors.stories.tsx
+152
View File
@@ -0,0 +1,152 @@
/*
* Copyright 2025 The Backstage Authors
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import preview from '../../../../.storybook/preview';
import { Box } from '../components/Box';
import { Flex } from '../components/Flex';
import { Text } from '../components/Text';
const meta = preview.meta({
title: 'Backstage UI/Colors',
});
export const Default = meta.story({
render: () => (
<div style={{ backgroundColor: 'var(--bui-bg-neutral-0)' }}>
<Box p="4" style={{ backgroundColor: 'var(--bui-bg-neutral-1)' }}>
<Flex direction="row" gap="4" align="center">
<Text>Neutral 1</Text>
<Flex
px="2"
py="1"
style={{ backgroundColor: 'var(--bui-bg-neutral-1-hover)' }}
>
<Text>Hover</Text>
</Flex>
<Flex
px="2"
py="1"
style={{ backgroundColor: 'var(--bui-bg-neutral-1-pressed)' }}
>
<Text>Pressed</Text>
</Flex>
<Flex
px="2"
py="1"
style={{ backgroundColor: 'var(--bui-bg-neutral-1-disabled)' }}
>
<Text style={{ color: 'var(--bui-fg-disabled)' }}>Disabled</Text>
</Flex>
</Flex>
<Box
p="4"
mt="4"
style={{ backgroundColor: 'var(--bui-bg-neutral-2)' }}
>
<Flex direction="row" gap="4" align="center">
<Text>Neutral 2</Text>
<Flex
px="2"
py="1"
style={{ backgroundColor: 'var(--bui-bg-neutral-2-hover)' }}
>
<Text>Hover</Text>
</Flex>
<Flex
px="2"
py="1"
style={{ backgroundColor: 'var(--bui-bg-neutral-2-pressed)' }}
>
<Text>Pressed</Text>
</Flex>
<Flex
px="2"
py="1"
style={{ backgroundColor: 'var(--bui-bg-neutral-2-disabled)' }}
>
<Text style={{ color: 'var(--bui-fg-disabled)' }}>Disabled</Text>
</Flex>
</Flex>
<Box
p="4"
mt="4"
style={{ backgroundColor: 'var(--bui-bg-neutral-3)' }}
>
<Flex direction="row" gap="4" align="center">
<Text>Neutral 3</Text>
<Flex
px="2"
py="1"
style={{ backgroundColor: 'var(--bui-bg-neutral-3-hover)' }}
>
<Text>Hover</Text>
</Flex>
<Flex
px="2"
py="1"
style={{ backgroundColor: 'var(--bui-bg-neutral-3-pressed)' }}
>
<Text>Pressed</Text>
</Flex>
<Flex
px="2"
py="1"
style={{ backgroundColor: 'var(--bui-bg-neutral-3-disabled)' }}
>
<Text style={{ color: 'var(--bui-fg-disabled)' }}>
Disabled
</Text>
</Flex>
</Flex>
<Box
p="4"
mt="4"
style={{ backgroundColor: 'var(--bui-bg-neutral-4)' }}
>
<Flex direction="row" gap="4" align="center">
<Text>Neutral 4</Text>
<Flex
px="2"
py="1"
style={{ backgroundColor: 'var(--bui-bg-neutral-4-hover)' }}
>
<Text>Hover</Text>
</Flex>
<Flex
px="2"
py="1"
style={{ backgroundColor: 'var(--bui-bg-neutral-4-pressed)' }}
>
<Text>Pressed</Text>
</Flex>
<Flex
px="2"
py="1"
style={{
backgroundColor: 'var(--bui-bg-neutral-4-disabled)',
}}
>
<Text style={{ color: 'var(--bui-fg-disabled)' }}>
Disabled
</Text>
</Flex>
</Flex>
</Box>
</Box>
</Box>
</Box>
</div>
),
});
packages/ui/src/css/core.css
+1 -1
View File
@@ -27,7 +27,7 @@
}
body {
background-color: var(--bui-bg-surface-0);
background-color: var(--bui-bg-neutral-0);
/* Text defaults */
color: var(--bui-fg-primary);
packages/ui/src/css/tokens.css
+5 -5
View File
@@ -79,7 +79,7 @@
/* Neutral background colors */
--bui-bg-neutral-0: #f8f8f8;
--bui-bg-neutral-1: oklch(0% 0 0 / 6%);
--bui-bg-neutral-1: #fff;
--bui-bg-neutral-1-hover: oklch(0% 0 0 / 12%);
--bui-bg-neutral-1-pressed: oklch(0% 0 0 / 16%);
--bui-bg-neutral-1-disabled: oklch(0% 0 0 / 6%);
@@ -107,8 +107,8 @@
/* Foreground colors */
--bui-fg-primary: var(--bui-black);
--bui-fg-secondary: #757575;
--bui-fg-disabled: #9e9e9e;
--bui-fg-secondary: oklch(0% 0 0 / 50%);
--bui-fg-disabled: oklch(0% 0 0 / 28%);
--bui-fg-solid: var(--bui-white);
--bui-fg-solid-disabled: #98a8bc;
@@ -183,8 +183,8 @@
/* Foreground colors */
--bui-fg-primary: var(--bui-white);
--bui-fg-secondary: #9e9e9e;
--bui-fg-disabled: #9e9e9e;
--bui-fg-secondary: oklch(0% 0 0 / 50%);
--bui-fg-disabled: oklch(0% 0 0 / 28%);
--bui-fg-solid: #101821;
--bui-fg-solid-disabled: #6191cc;
plugins/app-visualizer/src/components/AppVisualizerPage/DetailedVisualizer.tsx
+2 -2
View File
@@ -264,7 +264,7 @@ function Extension({ node, depth }: { node: AppNode; depth: number }) {
style={{
width: 'fit-content',
color: enabled ? 'var(--bui-fg-primary)' : 'var(--bui-fg-disabled)',
background: 'var(--bui-bg-surface-1)',
background: 'var(--bui-bg-neutral-1)',
borderTopRightRadius: 'var(--bui-radius-2)',
borderBottomRightRadius: 'var(--bui-radius-2)',
}}
@@ -362,7 +362,7 @@ export function DetailedVisualizer({ tree }: { tree: AppTree }) {
m="2"
style={{
flex: '0 0 auto',
background: 'var(--bui-bg-surface-1)',
background: 'var(--bui-bg-neutral-1)',
border: '1px solid var(--bui-border)',
borderRadius: 'var(--bui-radius-2)',
}}
plugins/app-visualizer/src/components/AppVisualizerPage/TextVisualizer.tsx
+1 -1
View File
@@ -92,7 +92,7 @@ export function TextVisualizer({ tree }: { tree: AppTree }) {
py="2"
px="4"
style={{
background: 'var(--bui-bg-surface-1)',
background: 'var(--bui-bg-neutral-1)',
borderTop: '1px solid var(--bui-border)',
}}
>
plugins/mui-to-bui/src/components/BuiThemerPage/BuiThemePreview.test.tsx
+2 -2
View File
@@ -25,7 +25,7 @@ describe('BuiThemePreview', () => {
<BuiThemePreview
mode="light"
styleObject={{
'--bui-bg-surface-2': '#ffffff',
'--bui-bg-neutral-2': '#ffffff',
'--bui-border': '#cccccc',
'--bui-radius-2': '4px',
'--bui-space-3': '12px',
@@ -33,7 +33,7 @@ describe('BuiThemePreview', () => {
'--bui-bg-solid': '#000000',
'--bui-fg-solid': '#ffffff',
'--bui-fg-primary': '#111111',
'--bui-bg-surface-1': '#f5f5f5',
'--bui-bg-neutral-1': '#f5f5f5',
}}
/>,
);
plugins/mui-to-bui/src/components/BuiThemerPage/BuiThemePreview.tsx
+1 -1
View File
@@ -46,7 +46,7 @@ export function BuiThemePreview({ mode, styleObject }: IsolatedPreviewProps) {
// This creates a scoped context where the variables take precedence
...styleObject,
width: '100%',
backgroundColor: 'var(--bui-bg-surface-2)',
backgroundColor: 'var(--bui-bg-neutral-2)',
padding: 'var(--bui-space-3)',
borderRadius: 'var(--bui-radius-2)',
border: '1px solid var(--bui-border)',
plugins/mui-to-bui/src/components/BuiThemerPage/ThemeContent.tsx
+1 -1
View File
@@ -98,7 +98,7 @@ export function ThemeContent({
<Box
p="3"
style={{
backgroundColor: 'var(--bui-bg-surface-2)',
backgroundColor: 'var(--bui-bg-neutral-2)',
border: '1px solid var(--bui-border)',
borderRadius: 'var(--bui-radius-2)',
fontFamily: 'monospace',
plugins/mui-to-bui/src/components/BuiThemerPage/convertMuiToBuiTheme.test.ts
+7 -7
View File
@@ -59,9 +59,9 @@ describe('convertMuiToBuiTheme', () => {
// Border radius tokens are only generated when radius is 0
expect(result.css).not.toContain('--bui-radius-3:');
// Background default maps to surface-2
expect(result.css).toContain('--bui-bg-surface-0: #f5f5f5;');
expect(result.css).toContain('--bui-bg-surface-2: #f5f5f5;');
expect(result.css).toContain('--bui-bg-surface-1: #ffffff;');
expect(result.css).toContain('--bui-bg-neutral-0: #f5f5f5;');
expect(result.css).toContain('--bui-bg-neutral-2: #f5f5f5;');
expect(result.css).toContain('--bui-bg-neutral-1: #ffffff;');
expect(result.css).toContain('--bui-fg-primary: #000000;');
// Secondary may not be present without Backstage additions, so don't assert it
expect(result.css).toContain('--bui-bg-solid: #1976d2;');
@@ -98,13 +98,13 @@ describe('convertMuiToBuiTheme', () => {
expect(result.css).toContain("[data-theme-mode='dark'] {");
// Background default maps to surface-2 in dark mode as well
expect(result.css).toContain('--bui-bg-surface-0: #121212;');
expect(result.css).toContain('--bui-bg-surface-2: #121212;');
expect(result.css).toContain('--bui-bg-surface-1: #1e1e1e;');
expect(result.css).toContain('--bui-bg-neutral-0: #121212;');
expect(result.css).toContain('--bui-bg-neutral-2: #121212;');
expect(result.css).toContain('--bui-bg-neutral-1: #1e1e1e;');
expect(result.css).toContain('--bui-fg-primary: #ffffff;');
// Test style object
expect(result.styleObject).toHaveProperty('--bui-bg-surface-1', '#1e1e1e');
expect(result.styleObject).toHaveProperty('--bui-bg-neutral-1', '#1e1e1e');
expect(result.styleObject).toHaveProperty('--bui-fg-primary', '#ffffff');
});