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

Cleanups

Browse Source 
Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>
This commit is contained in:
Charles de Dreuille
2026-02-13 13:28:09 +00:00
parent 4137a43a1b
commit 0bf7ff679a
6 changed files with 25 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.storybook/preview.tsx
+1 -2
View File
@@ -135,8 +135,7 @@ export default definePreview({
document.body.style.backgroundColor = 'var(--bui-bg-app)';
const docsStoryElements = document.getElementsByClassName('docs-story');
Array.from(docsStoryElements).forEach(element => {
(element as HTMLElement).style.backgroundColor =
'var(--bui-bg-app)';
(element as HTMLElement).style.backgroundColor = 'var(--bui-bg-app)';
});
return (
docs-ui/src/app/tokens/page.mdx
-22
View File
@@ -472,28 +472,6 @@ 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-neutral-1`.</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell>
<Chip head>--bui-border-2-hover</Chip>
</Table.Cell>
<Table.Cell>
Used when the component is interactive and hovered.
</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell>
<Chip head>--bui-border-2-pressed</Chip>
</Table.Cell>
<Table.Cell>
Used when the component is interactive and focused.
</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell>
<Chip head>--bui-border-2-disabled</Chip>
</Table.Cell>
<Table.Cell>Used when the component is disabled.</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell>
<Chip head>--bui-border-2-danger</Chip>
docs/conf/user-interface/index.md
+24 -24
View File
@@ -122,22 +122,22 @@ 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-app` | 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-app` 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. |
| `--bui-fg-secondary` | Your secondary text or icon colours. |
| `--bui-fg-danger` | Used for error states and destructive actions. |
| `--bui-fg-warning` | Used for warning states and cautionary information. |
| `--bui-fg-success` | Used for success states and positive feedback. |
| `--bui-fg-info` | Used for informational content and neutral status. |
| `--bui-border-1` | Subtle borders for low-contrast separators. |
| `--bui-border-2` | Main borders around surfaces like `Card`, `Dialog`, ... |
| `--bui-font-regular` | The main font of your app. |
| Token Name | Description |
| -------------------- | ---------------------------------------------------------------------------------------- |
| `--bui-bg-app` | This is used to define the background color of your app. It will only be used once. |
| `--bui-bg-neutral-1` | We are using this color to sit on top of `--bui-bg-app` 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. |
| `--bui-fg-secondary` | Your secondary text or icon colours. |
| `--bui-fg-danger` | Used for error states and destructive actions. |
| `--bui-fg-warning` | Used for warning states and cautionary information. |
| `--bui-fg-success` | Used for success states and positive feedback. |
| `--bui-fg-info` | Used for informational content and neutral status. |
| `--bui-border-1` | Subtle borders for low-contrast separators. |
| `--bui-border-2` | Main borders around surfaces like `Card`, `Dialog`, ... |
| `--bui-font-regular` | The main font of your app. |
<details>
<summary>All available CSS variables</summary>
@@ -155,7 +155,7 @@ These colors form a layered neutral scale for your application backgrounds. `--b
| Token Name | Description |
| ----------------------------- | ------------------------------------------------------------ |
| `--bui-bg-app` | The base background color of your Backstage instance. |
| `--bui-bg-app` | The base background color of your Backstage instance. |
| `--bui-bg-neutral-1` | First elevated layer. Use for cards, dialogs, and panels. |
| `--bui-bg-neutral-1-hover` | Hover state for elements on neutral-1. |
| `--bui-bg-neutral-1-pressed` | Pressed state for elements on neutral-1. |
@@ -214,13 +214,13 @@ Foreground colours are meant to work in pair with a background colours. Typicall
These border colors are mostly meant to be used as borders on top of any components with low contrast to help as a separator with the different background colors.
| Token Name | Description |
| ----------------------- | --------------------------------------------------- |
| `--bui-border-1` | Subtle border for low-contrast separators. |
| `--bui-border-2` | It should be used on top of `--bui-bg-neutral-1`. |
| `--bui-border-danger` | It should be used on top of `--bui-bg-danger`. |
| `--bui-border-warning` | It should be used on top of `--bui-bg-warning`. |
| `--bui-border-success` | It should be used on top of `--bui-bg-success`. |
| Token Name | Description |
| ---------------------- | ------------------------------------------------- |
| `--bui-border-1` | Subtle border for low-contrast separators. |
| `--bui-border-2` | It should be used on top of `--bui-bg-neutral-1`. |
| `--bui-border-danger` | It should be used on top of `--bui-bg-danger`. |
| `--bui-border-warning` | It should be used on top of `--bui-bg-warning`. |
| `--bui-border-success` | It should be used on top of `--bui-bg-success`. |
#### Special colors
packages/ui/src/components/Popover/Popover.module.css
-13
View File
@@ -121,17 +121,4 @@
transform: rotate(-90deg);
}
}
/* [data-theme='dark'] .bui-Popover {
background: var(--bui-bg-popover);
border: 1px solid var(--bui-border-1);
}
[data-theme='dark'] .bui-PopoverArrow svg path:nth-child(1) {
fill: var(--bui-bg-popover);
}
[data-theme='dark'] .bui-PopoverArrow svg path:nth-child(2) {
fill: var(--bui-fg-secondary);
} */
}
packages/ui/src/css/utilities/sm.css
-5
View File
@@ -37,11 +37,6 @@
border-width: 0;
}
.bui-sm-border-selected {
border-width: 1px;
border-style: solid;
}
.bui-sm-border-warning {
border-color: var(--bui-border-warning);
border-width: 1px;
packages/ui/src/css/utilities/xs.css
-5
View File
@@ -36,11 +36,6 @@
border-width: 0;
}
.bui-border-selected {
border-width: 1px;
border-style: solid;
}
.bui-border-warning {
border-color: var(--bui-border-warning);
border-width: 1px;