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

Rename and remove CSS design tokens

Browse Source 
Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>
This commit is contained in:
Charles de Dreuille
2026-02-13 13:11:29 +00:00
parent 6209c67072
commit 4137a43a1b
41 changed files with 144 additions and 191 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.changeset/five-ends-design.md
+5
View File
@@ -0,0 +1,5 @@
---
'@backstage/plugin-mui-to-bui': patch
---
Updated CSS token references to use renamed `--bui-bg-app` and `--bui-border-2` tokens.
.changeset/icy-houses-cough.md
+5
View File
@@ -0,0 +1,5 @@
---
'@backstage/plugin-app-visualizer': patch
---
Updated CSS token references to use renamed `--bui-border-2` token.
.changeset/plain-deer-sneeze.md
+21
View File
@@ -0,0 +1,21 @@
---
'@backstage/ui': minor
---
**BREAKING:** Renamed and removed CSS tokens.
- Renamed `--bui-bg-neutral-0` to `--bui-bg-app`.
- Renamed `--bui-border` to `--bui-border-2`.
- Removed `--bui-border-hover`, `--bui-border-pressed`, and `--bui-border-disabled`.
**Migration:**
```diff
- var(--bui-bg-neutral-0)
+ var(--bui-bg-app)
- var(--bui-border)
+ var(--bui-border-2)
```
Remove any references to `--bui-border-hover`, `--bui-border-pressed`, and `--bui-border-disabled` as these tokens no longer exist.
.storybook/preview.tsx
+2 -2
View File
@@ -132,11 +132,11 @@ export default definePreview({
};
}, [selectedTheme, selectedThemeName]);
document.body.style.backgroundColor = 'var(--bui-bg-neutral-0)';
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-neutral-0)';
'var(--bui-bg-app)';
});
return (
.storybook/storybook.css
+6 -6
View File
@@ -5,10 +5,10 @@
--sb-panel-left: 0;
--sb-panel-right: 0;
--sb-sidebar-border: none;
--sb-sidebar-border-right: 1px solid var(--bui-border);
--sb-sidebar-border-right: 1px solid var(--bui-border-2);
--sb-sidebar-bg: #000;
--sb-options-border: none;
--sb-options-border-left: 1px solid var(--bui-border);
--sb-options-border-left: 1px solid var(--bui-border-2);
--sb-content-padding-inline: 250px;
}
@@ -31,8 +31,8 @@
}
[data-theme-name='spotify'][data-theme-mode='light'] {
--sb-sidebar-border: 1px solid var(--bui-border);
--sb-sidebar-border-right: 1px solid var(--bui-border);
--sb-options-border: 1px solid var(--bui-border);
--sb-options-border-left: 1px solid var(--bui-border);
--sb-sidebar-border: 1px solid var(--bui-border-2);
--sb-sidebar-border-right: 1px solid var(--bui-border-2);
--sb-options-border: 1px solid var(--bui-border-2);
--sb-options-border-left: 1px solid var(--bui-border-2);
}
.storybook/themes/spotify.css
+6 -12
View File
@@ -174,7 +174,7 @@
}
.bui-TableHeader .bui-TableRow {
border-bottom: 1px solid var(--bui-border);
border-bottom: 1px solid var(--bui-border-2);
}
.bui-TableHead {
@@ -226,10 +226,7 @@
--bui-fg-solid: var(--bui-black);
--bui-fg-solid-disabled: #62ab7c;
--bui-border: #d9d9d9;
--bui-border-hover: rgba(0, 0, 0, 0.3);
--bui-border-pressed: rgba(0, 0, 0, 0.5);
--bui-border-disabled: rgba(0, 0, 0, 0.1);
--bui-border-2: #d9d9d9;
--bui-border-danger: #f87a7a;
--bui-border-warning: #e36d05;
--bui-border-success: #53db83;
@@ -237,16 +234,16 @@
--bui-ring: rgba(0, 0, 0, 0.2);
.bui-HeaderToolbarWrapper {
border: 1px solid var(--bui-border);
border: 1px solid var(--bui-border-2);
}
.bui-HeaderTabsWrapper {
border: 1px solid var(--bui-border);
border: 1px solid var(--bui-border-2);
}
}
[data-theme-mode='dark'][data-theme-name='spotify'] {
--bui-bg-neutral-0: var(--bui-black);
--bui-bg-app: var(--bui-black);
--bui-bg-solid: #1ed760;
--bui-bg-solid-hover: #3be477;
@@ -266,10 +263,7 @@
--bui-fg-warning: #e36d05;
--bui-fg-success: #1db954;
--bui-border: #373737;
--bui-border-hover: rgba(255, 255, 255, 0.4);
--bui-border-pressed: rgba(255, 255, 255, 0.5);
--bui-border-disabled: rgba(255, 255, 255, 0.2);
--bui-border-2: #373737;
--bui-border-danger: #f87a7a;
--bui-border-warning: #e36d05;
--bui-border-success: #53db83;
docs-ui/src/app/tokens/page.mdx
+16 -10
View File
@@ -137,7 +137,7 @@ the value, you add an object with the value and the breakpoint prefix.
## Neutral background colors
These colors form a layered neutral scale for your application backgrounds.
`--bui-bg-neutral-0` is the base background color of your app. Each subsequent level
`--bui-bg-app` is the base background color of your app. Each subsequent level
(1 through 4) represents an elevated layer on top of the previous one, with hover,
pressed, and disabled variants for interactive states.
@@ -151,7 +151,7 @@ pressed, and disabled variants for interactive states.
<Table.Body>
<Table.Row>
<Table.Cell>
<Chip head>--bui-bg-neutral-0</Chip>
<Chip head>--bui-bg-app</Chip>
</Table.Cell>
<Table.Cell>
The base background color of your Backstage instance.
@@ -462,13 +462,19 @@ low contrast to help as a separator with the different background colors.
<Table.Body>
<Table.Row>
<Table.Cell>
<Chip head>--bui-border</Chip>
<Chip head>--bui-border-1</Chip>
</Table.Cell>
<Table.Cell>Subtle border for low-contrast separators.</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell>
<Chip head>--bui-border-2</Chip>
</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-hover</Chip>
<Chip head>--bui-border-2-hover</Chip>
</Table.Cell>
<Table.Cell>
Used when the component is interactive and hovered.
@@ -476,7 +482,7 @@ low contrast to help as a separator with the different background colors.
</Table.Row>
<Table.Row>
<Table.Cell>
<Chip head>--bui-border-pressed</Chip>
<Chip head>--bui-border-2-pressed</Chip>
</Table.Cell>
<Table.Cell>
Used when the component is interactive and focused.
@@ -484,31 +490,31 @@ low contrast to help as a separator with the different background colors.
</Table.Row>
<Table.Row>
<Table.Cell>
<Chip head>--bui-border-disabled</Chip>
<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-danger</Chip>
<Chip head>--bui-border-2-danger</Chip>
</Table.Cell>
<Table.Cell>It should be used on top of `--bui-bg-danger`.</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell>
<Chip head>--bui-border-warning</Chip>
<Chip head>--bui-border-2-warning</Chip>
</Table.Cell>
<Table.Cell>It should be used on top of `--bui-bg-warning`.</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell>
<Chip head>--bui-border-success</Chip>
<Chip head>--bui-border-2-success</Chip>
</Table.Cell>
<Table.Cell>It should be used on top of `--bui-bg-success`.</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell>
<Chip head>--bui-border-info</Chip>
<Chip head>--bui-border-2-info</Chip>
</Table.Cell>
<Table.Cell>It should be used on top of `--bui-bg-info`.</Table.Cell>
</Table.Row>
docs-ui/src/components/ColorFamily/ColorFamily.tsx
+1 -1
View File
@@ -55,7 +55,7 @@ export const ColorFamily = () => {
<div className={styles.visual}>
<div
className={styles.base}
style={{ backgroundColor: 'var(--bui-bg-neutral-0)' }}
style={{ backgroundColor: 'var(--bui-bg-app)' }}
>
<span className={styles.baseLabel}>Neutral 0</span>
<NeutralLevel level={1}>
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-neutral-0);
background-color: var(--bui-bg-app);
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-neutral-0);
background-color: var(--bui-bg-app);
padding: 1px;
min-width: 0;
display: flex;
docs-ui/src/css/theme-backstage.css
+5 -11
View File
@@ -45,7 +45,7 @@
--bui-bg-solid-hover: #163a66;
--bui-bg-solid-pressed: #0f2b4e;
--bui-bg-solid-disabled: #163a66;
--bui-bg-neutral-0: #f8f8f8;
--bui-bg-app: #f8f8f8;
--bui-bg-neutral-1: #fff;
--bui-bg-neutral-1-hover: oklch(0% 0 0/0.12);
--bui-bg-neutral-1-pressed: oklch(0% 0 0/0.16);
@@ -79,10 +79,7 @@
--bui-fg-warning: #ef7a32;
--bui-fg-success: #1ed760;
--bui-fg-info: #0d74ce;
--bui-border: #0000001a;
--bui-border-hover: #0003;
--bui-border-pressed: #0006;
--bui-border-disabled: #0000001a;
--bui-border-2: #0000001a;
--bui-border-info: #7ea9d6;
--bui-border-danger: #f87a7a;
--bui-border-warning: #e36d05;
@@ -98,7 +95,7 @@
--bui-bg-solid-hover: #83b9fd;
--bui-bg-solid-pressed: #83b9fd;
--bui-bg-solid-disabled: #1b3d68;
--bui-bg-neutral-0: #333;
--bui-bg-app: #333;
--bui-bg-neutral-1: oklch(100% 0 0/0.1);
--bui-bg-neutral-1-hover: oklch(100% 0 0/0.14);
--bui-bg-neutral-1-pressed: oklch(100% 0 0/0.2);
@@ -132,10 +129,7 @@
--bui-fg-warning: #ffa057;
--bui-fg-success: #1ed760;
--bui-fg-info: #70b8ff;
--bui-border: #ffffff1f;
--bui-border-hover: #fff6;
--bui-border-pressed: #ffffff80;
--bui-border-disabled: #fff3;
--bui-border-2: #ffffff1f;
--bui-border-info: #7ea9d6;
--bui-border-danger: #f87a7a;
--bui-border-warning: #e36d05;
@@ -243,7 +237,7 @@
}
}
body {
background-color: var(--bui-bg-neutral-0);
background-color: var(--bui-bg-app);
color: var(--bui-fg-primary);
font-family: var(--bui-font-regular);
font-weight: var(--bui-font-weight-regular);
docs-ui/src/css/theme-spotify.css
+5 -11
View File
@@ -156,7 +156,7 @@
display: block;
}
& .bui-TableHeader .bui-TableRow {
border-bottom: 1px solid var(--bui-border);
border-bottom: 1px solid var(--bui-border-2);
}
& .bui-TableHead {
font-size: var(--bui-font-size-2);
@@ -198,21 +198,18 @@
--bui-fg-secondary: #757575;
--bui-fg-solid: var(--bui-black);
--bui-fg-solid-disabled: #62ab7c;
--bui-border: #d9d9d9;
--bui-border-hover: #0000004d;
--bui-border-pressed: #00000080;
--bui-border-disabled: #0000001a;
--bui-border-2: #d9d9d9;
--bui-border-danger: #f87a7a;
--bui-border-warning: #e36d05;
--bui-border-success: #53db83;
--bui-ring: #0003;
& .bui-HeaderToolbarWrapper,
& .bui-HeaderTabsWrapper {
border: 1px solid var(--bui-border);
border: 1px solid var(--bui-border-2);
}
}
[data-theme-mode='dark'][data-theme-name='spotify'] {
--bui-bg-neutral-0: var(--bui-black);
--bui-bg-app: var(--bui-black);
--bui-bg-solid: #1ed760;
--bui-bg-solid-hover: #3be477;
--bui-bg-solid-pressed: #1abc54;
@@ -228,10 +225,7 @@
--bui-fg-danger: #e22b2b;
--bui-fg-warning: #e36d05;
--bui-fg-success: #1db954;
--bui-border: #373737;
--bui-border-hover: #fff6;
--bui-border-pressed: #ffffff80;
--bui-border-disabled: #fff3;
--bui-border-2: #373737;
--bui-border-danger: #f87a7a;
--bui-border-warning: #e36d05;
--bui-border-success: #53db83;
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-neutral-0: #f8f8f8;
--bui-bg-app: #f8f8f8;
--bui-bg-neutral-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-neutral-0: #f8f8f8;
--bui-bg-app: #f8f8f8;
--bui-bg-neutral-1: #fff;
/* ... other CSS variables */
docs/conf/user-interface/index.md
+10 -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-neutral-0: #f8f8f8;
  --bui-bg-app: #f8f8f8;
--bui-fg-primary: #000;
}
[data-theme-mode='dark'] {
/* Dark theme specific styles */
  --bui-bg-neutral-0: #333333;
  --bui-bg-app: #333333;
--bui-fg-primary: #fff;
}
```
@@ -124,8 +124,8 @@ And if you’d like to go even further, you can target specific component class
| Token Name | Description |
| -------------------- | --------------------------------------------------------------------------------------------- |
| `--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-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. |
@@ -135,7 +135,8 @@ And if you’d like to go even further, you can target specific component class
| `--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` | Main borders around surfaces like `Card`, `Dialog`, ... |
| `--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>
@@ -150,11 +151,11 @@ And if you’d like to go even further, you can target specific component class
#### Neutral background colors
These colors form a layered neutral scale for your application backgrounds. `--bui-bg-neutral-0` is the base background color. Each subsequent level (1 through 4) represents an elevated layer, with hover, pressed, and disabled variants for interactive states.
These colors form a layered neutral scale for your application backgrounds. `--bui-bg-app` is the base background color. Each subsequent level (1 through 4) represents an elevated layer, with hover, pressed, and disabled variants for interactive states.
| Token Name | Description |
| ----------------------------- | ------------------------------------------------------------ |
| `--bui-bg-neutral-0` | 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. |
@@ -215,10 +216,8 @@ 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-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. |
| `--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`. |
docs/releases/v1.48.0-next.2-changelog.md
+1 -1
View File
@@ -90,7 +90,7 @@ Upgrade Helper: [https://backstage.github.io/upgrade-helper/?to=1.48.0-next.2](h
```diff
- background: var(--bui-bg-surface-0);
+ background: var(--bui-bg-neutral-0);
+ background: var(--bui-bg-app);
```
Replace on-surface tokens shifted by +1:
packages/ui/CHANGELOG.md
+1 -1
View File
@@ -14,7 +14,7 @@
```diff
- background: var(--bui-bg-surface-0);
+ background: var(--bui-bg-neutral-0);
+ background: var(--bui-bg-app);
```
Replace on-surface tokens shifted by +1:
packages/ui/src/components/Avatar/Avatar.module.css
+1 -1
View File
@@ -74,7 +74,7 @@
width: 100%;
font-size: var(--bui-font-size-3);
font-weight: var(--bui-font-weight-regular);
box-shadow: inset 0 0 0 1px var(--bui-border);
box-shadow: inset 0 0 0 1px var(--bui-border-2);
border-radius: var(--bui-radius-full);
}
}
packages/ui/src/components/Checkbox/Checkbox.module.css
+2 -7
View File
@@ -42,7 +42,7 @@
justify-content: center;
width: 1rem;
height: 1rem;
box-shadow: inset 0 0 0 1px var(--bui-border);
box-shadow: inset 0 0 0 1px var(--bui-border-2);
border-radius: 2px;
transition: background-color 0.2s ease-in-out;
background-color: var(--bui-bg-neutral-1);
@@ -64,15 +64,10 @@
.bui-Checkbox[data-indeterminate] & {
background-color: var(--bui-bg-neutral-1);
box-shadow: inset 0 0 0 1px var(--bui-border);
box-shadow: inset 0 0 0 1px var(--bui-border-2);
color: var(--bui-fg-primary);
}
.bui-Checkbox[data-hovered]:not([data-selected]):not([data-indeterminate])
& {
box-shadow: inset 0 0 0 1px var(--bui-border-hover);
}
@media (prefers-reduced-motion: reduce) {
& {
transition: none;
packages/ui/src/components/Dialog/Dialog.module.css
+3 -3
View File
@@ -45,7 +45,7 @@
.bui-Dialog {
background: var(--bui-bg-neutral-1);
border-radius: 0.5rem;
border: 1px solid var(--bui-border);
border: 1px solid var(--bui-border-2);
color: var(--bui-fg-primary);
position: relative;
width: min(var(--bui-dialog-min-width, 400px), calc(100vw - 3rem));
@@ -73,7 +73,7 @@
align-items: center;
padding-inline: var(--bui-space-3);
padding-block: var(--bui-space-2);
border-bottom: 1px solid var(--bui-border);
border-bottom: 1px solid var(--bui-border-2);
}
.bui-DialogHeaderTitle {
@@ -89,7 +89,7 @@
gap: var(--bui-space-2);
padding-inline: var(--bui-space-3);
padding-block: var(--bui-space-3);
border-top: 1px solid var(--bui-border);
border-top: 1px solid var(--bui-border-2);
}
.bui-DialogBody {
packages/ui/src/components/Header/Header.module.css
+3 -3
View File
@@ -29,7 +29,7 @@
left: 0px;
right: 0px;
height: 16px;
background-color: var(--bui-bg-neutral-0);
background-color: var(--bui-bg-app);
z-index: 0;
}
}
@@ -43,7 +43,7 @@
justify-content: space-between;
background-color: var(--bui-bg-neutral-1);
padding-inline: var(--bui-space-5);
border-bottom: 1px solid var(--bui-border);
border-bottom: 1px solid var(--bui-border-2);
color: var(--bui-fg-primary);
height: 52px;
}
@@ -89,7 +89,7 @@
.bui-HeaderTabsWrapper {
padding-inline: var(--bui-space-3);
border-bottom: 1px solid var(--bui-border);
border-bottom: 1px solid var(--bui-border-2);
background-color: var(--bui-bg-neutral-1);
}
}
packages/ui/src/components/Menu/Menu.module.css
+3 -3
View File
@@ -21,7 +21,7 @@
display: flex;
flex-direction: column;
box-shadow: var(--bui-shadow);
border: 1px solid var(--bui-border);
border: 1px solid var(--bui-border-2);
border-radius: var(--bui-radius-2);
background: var(--bui-bg-neutral-1);
color: var(--bui-fg-primary);
@@ -183,7 +183,7 @@
.bui-MenuSeparator {
height: 1px;
background: var(--bui-border);
background: var(--bui-border-2);
margin-inline: var(--bui-space-1_5);
margin-block: var(--bui-space-1);
}
@@ -194,7 +194,7 @@
flex-shrink: 0;
display: flex;
align-items: center;
border-bottom: 1px solid var(--bui-border);
border-bottom: 1px solid var(--bui-border-2);
background-color: var(--bui-bg-neutral-1);
height: 2rem;
packages/ui/src/components/PasswordField/PasswordField.module.css
+1 -11
View File
@@ -37,7 +37,7 @@
display: flex;
align-items: center;
border-radius: var(--bui-radius-2);
border: 1px solid var(--bui-border);
border: 1px solid var(--bui-border-2);
background-color: var(--bui-bg-neutral-1);
transition: border-color 0.2s ease-in-out, outline-color 0.2s ease-in-out;
@@ -49,15 +49,6 @@
height: 2.5rem;
}
&:focus-within {
border-color: var(--bui-border-pressed);
outline-width: 0px;
}
&:hover {
border-color: var(--bui-border-hover);
}
&:has([data-invalid]) {
border-color: var(--bui-fg-danger);
}
@@ -65,7 +56,6 @@
&:has([data-disabled]) {
opacity: 0.5;
cursor: not-allowed;
border: 1px solid var(--bui-border-disabled);
}
}
packages/ui/src/components/Popover/Popover.module.css
+9 -9
View File
@@ -20,8 +20,8 @@
.bui-Popover {
box-shadow: var(--bui-shadow);
border-radius: var(--bui-radius-3);
background: var(--bui-bg-neutral-1);
border: 1px solid var(--bui-border);
background: var(--bui-bg-popover);
border: 1px solid var(--bui-border-1);
forced-color-adjust: none;
outline: none;
max-height: inherit;
@@ -90,11 +90,11 @@
elements in order to guarantee that the stroke is
always overlaying a consistent color. */
path:nth-child(1) {
fill: var(--bui-bg-neutral-1);
fill: var(--bui-bg-popover);
}
path:nth-child(2) {
fill: var(--bui-fg-secondary);
fill: var(--bui-border-1);
}
/* The arrow svg overlaps the popover by 2px, so we
@@ -122,16 +122,16 @@
}
}
[data-theme='dark'] .bui-Popover {
background: var(--bui-bg-neutral-2);
border: 1px solid var(--bui-border);
/* [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-neutral-2);
fill: var(--bui-bg-popover);
}
[data-theme='dark'] .bui-PopoverArrow svg path:nth-child(2) {
fill: var(--bui-fg-secondary);
}
} */
}
packages/ui/src/components/RadioGroup/RadioGroup.module.css
+2 -12
View File
@@ -50,7 +50,7 @@
width: 1rem;
height: 1rem;
box-sizing: border-box;
border: 0.125rem solid var(--bui-border);
border: 0.125rem solid var(--bui-border-2);
background: var(--bui-bg-neutral-1);
border-radius: var(--bui-radius-full);
transition: all 200ms;
@@ -59,7 +59,7 @@
}
&[data-pressed]:before {
border-color: var(--bui-border);
border-color: var(--bui-border-2);
}
&[data-selected] {
@@ -83,13 +83,8 @@
color: var(--bui-fg-disabled);
&:before {
border-color: var(--bui-border-disabled);
background: var(--bui-bg-disabled);
}
&[data-selected]:before {
border-color: var(--bui-border-disabled);
}
}
&[data-invalid]:before {
@@ -105,13 +100,8 @@
color: var(--bui-fg-disabled);
&:before {
border-color: var(--bui-border-disabled);
background: var(--bui-bg-disabled);
}
&[data-selected]:before {
border-color: var(--bui-border-disabled);
}
}
}
}
packages/ui/src/components/SearchField/SearchField.module.css
+1 -11
View File
@@ -93,7 +93,7 @@
display: flex;
align-items: center;
border-radius: var(--bui-radius-2);
border: 1px solid var(--bui-border);
border: 1px solid var(--bui-border-2);
background-color: var(--bui-bg-neutral-1);
transition: border-color 0.2s ease-in-out, outline-color 0.2s ease-in-out;
@@ -105,15 +105,6 @@
height: 2.5rem;
}
&:focus-within {
border-color: var(--bui-border-pressed);
outline-width: 0px;
}
&:hover {
border-color: var(--bui-border-hover);
}
&[data-invalid] {
border-color: var(--bui-fg-danger);
}
@@ -121,7 +112,6 @@
&[data-disabled] {
opacity: 0.5;
cursor: not-allowed;
border: 1px solid var(--bui-border-disabled);
}
}
packages/ui/src/components/Select/Select.module.css
+2 -13
View File
@@ -35,7 +35,7 @@
.bui-SelectTrigger {
box-sizing: border-box;
border-radius: var(--bui-radius-3);
border: 1px solid var(--bui-border);
border: 1px solid var(--bui-border-2);
background-color: var(--bui-bg-neutral-1);
display: flex;
justify-content: space-between;
@@ -72,16 +72,6 @@
color: var(--bui-fg-secondary);
}
&:hover {
transition: border-color 0.2s ease-in-out;
border-color: var(--bui-border-hover);
}
&:focus-visible {
border-color: var(--bui-border-pressed);
outline: 0;
}
.bui-Select[data-invalid] & {
border-color: var(--bui-fg-danger);
@@ -93,7 +83,6 @@
&[disabled] {
cursor: not-allowed;
border-color: var(--bui-border-disabled);
color: var(--bui-fg-disabled);
}
}
@@ -194,7 +183,7 @@
display: flex;
align-items: center;
padding-inline: var(--bui-space-3) 0;
border-bottom: 1px solid var(--bui-border);
border-bottom: 1px solid var(--bui-border-2);
}
.bui-SelectSearch {
packages/ui/src/components/Table/Table.module.css
+2 -2
View File
@@ -30,7 +30,7 @@
}
.bui-TableHeader {
border-bottom: 1px solid var(--bui-border);
border-bottom: 1px solid var(--bui-border-2);
transition: color 0.2s ease-in-out;
}
@@ -81,7 +81,7 @@
}
.bui-TableRow {
border-bottom: 1px solid var(--bui-border);
border-bottom: 1px solid var(--bui-border-2);
transition: color 0.2s ease-in-out;
&:hover {
packages/ui/src/components/TextField/TextField.module.css
+1 -16
View File
@@ -75,7 +75,7 @@
align-items: center;
padding: 0 var(--bui-space-3);
border-radius: var(--bui-radius-2);
border: 1px solid var(--bui-border);
border: 1px solid var(--bui-border-2);
background-color: var(--bui-bg-neutral-1);
font-size: var(--bui-font-size-3);
font-family: var(--bui-font-regular);
@@ -95,20 +95,6 @@
color: var(--bui-fg-secondary);
}
&[data-focused] {
outline-color: var(--bui-border-pressed);
outline-width: 0px;
}
&[data-hovered] {
border-color: var(--bui-border-hover);
}
&[data-focused] {
border-color: var(--bui-border-pressed);
outline-width: 0px;
}
&[data-invalid] {
border-color: var(--bui-fg-danger);
}
@@ -116,7 +102,6 @@
&[data-disabled] {
opacity: 0.5;
cursor: not-allowed;
border: 1px solid var(--bui-border-disabled);
}
}
}
packages/ui/src/components/ToggleButtonGroup/ToggleButtonGroup.module.css
+3 -3
View File
@@ -23,7 +23,7 @@
flex-wrap: nowrap;
border-radius: var(--bui-radius-2);
overflow: hidden;
box-shadow: inset 0 0 0 1px var(--bui-border);
box-shadow: inset 0 0 0 1px var(--bui-border-2);
width: fit-content;
}
@@ -65,7 +65,7 @@
.bui-ToggleButtonGroup:not([data-orientation='vertical'])
:global(.bui-ToggleButton)
+ :global(.bui-ToggleButton) {
border-left: 1px solid var(--bui-border);
border-left: 1px solid var(--bui-border-2);
}
/* Vertical dividers */
@@ -77,7 +77,7 @@
.bui-ToggleButtonGroup[data-orientation='vertical']
:global(.bui-ToggleButton)
+ :global(.bui-ToggleButton) {
border-top: 1px solid var(--bui-border);
border-top: 1px solid var(--bui-border-2);
}
/* Vertical radius rules */
packages/ui/src/components/Tooltip/Tooltip.module.css
+2 -2
View File
@@ -21,7 +21,7 @@
box-shadow: var(--bui-shadow);
border-radius: 4px;
background: var(--bui-bg-neutral-1);
border: 1px solid var(--bui-border);
border: 1px solid var(--bui-border-2);
forced-color-adjust: none;
outline: none;
padding: var(--bui-space-2) var(--bui-space-3);
@@ -109,7 +109,7 @@
[data-theme='dark'] .bui-Tooltip {
background: var(--bui-bg-neutral-2);
box-shadow: none;
border: 1px solid var(--bui-border);
border: 1px solid var(--bui-border-2);
}
[data-theme='dark'] .bui-TooltipArrow svg path:nth-child(1) {
packages/ui/src/css/colors.stories.tsx
+1 -1
View File
@@ -24,7 +24,7 @@ const meta = preview.meta({
export const Default = meta.story({
render: () => (
<div style={{ backgroundColor: 'var(--bui-bg-neutral-0)' }}>
<div style={{ backgroundColor: 'var(--bui-bg-app)' }}>
<Box p="4" style={{ backgroundColor: 'var(--bui-bg-neutral-1)' }}>
<Flex direction="row" gap="4" align="center">
<Text>Neutral 1</Text>
packages/ui/src/css/core.css
+1 -1
View File
@@ -27,7 +27,7 @@
}
body {
background-color: var(--bui-bg-neutral-0);
background-color: var(--bui-bg-app);
/* Text defaults */
color: var(--bui-fg-primary);
packages/ui/src/css/tokens.css
+8 -10
View File
@@ -77,7 +77,8 @@
--bui-bg-solid-disabled: #163a66;
/* Neutral background colors */
--bui-bg-neutral-0: #f8f8f8;
--bui-bg-app: #f8f8f8;
--bui-bg-popover: #ffffff;
--bui-bg-neutral-1: #fff;
--bui-bg-neutral-1-hover: oklch(0% 0 0 / 12%);
@@ -123,10 +124,8 @@
--bui-fg-info: #0d74ce;
/* Border colors */
--bui-border: rgba(0, 0, 0, 0.1);
--bui-border-hover: rgba(0, 0, 0, 0.2);
--bui-border-pressed: rgba(0, 0, 0, 0.4);
--bui-border-disabled: rgba(0, 0, 0, 0.1);
--bui-border-1: #d5d5d5;
--bui-border-2: #bababa;
--bui-border-info: #7ea9d6;
--bui-border-danger: #f87a7a;
--bui-border-warning: #e36d05;
@@ -153,7 +152,8 @@
--bui-bg-solid-disabled: #1b3d68;
/* Neutral background colors */
--bui-bg-neutral-0: #333333;
--bui-bg-app: #333333;
--bui-bg-popover: #1a1a1a;
--bui-bg-neutral-1: oklch(100% 0 0 / 10%);
--bui-bg-neutral-1-hover: oklch(100% 0 0 / 14%);
@@ -199,10 +199,8 @@
--bui-fg-info: #70b8ff;
/* Border colors */
--bui-border: rgba(255, 255, 255, 0.12);
--bui-border-hover: rgba(255, 255, 255, 0.4);
--bui-border-pressed: rgba(255, 255, 255, 0.5);
--bui-border-disabled: rgba(255, 255, 255, 0.2);
--bui-border-1: #434343;
--bui-border-2: #585858;
--bui-border-info: #7ea9d6;
--bui-border-danger: #f87a7a;
--bui-border-warning: #e36d05;
packages/ui/src/css/utilities/sm.css
+1 -2
View File
@@ -21,7 +21,7 @@
}
.bui-sm-border-base {
border-color: var(--bui-border);
border-color: var(--bui-border-2);
border-width: 1px;
border-style: solid;
}
@@ -38,7 +38,6 @@
}
.bui-sm-border-selected {
border-color: var(--bui-border-pressed);
border-width: 1px;
border-style: solid;
}
packages/ui/src/css/utilities/xs.css
+1 -2
View File
@@ -20,7 +20,7 @@
}
.bui-border-base {
border-color: var(--bui-border);
border-color: var(--bui-border-2);
border-width: 1px;
border-style: solid;
}
@@ -37,7 +37,6 @@
}
.bui-border-selected {
border-color: var(--bui-border-pressed);
border-width: 1px;
border-style: solid;
}
plugins/app-visualizer/src/components/AppVisualizerPage/DetailedVisualizer.tsx
+1 -1
View File
@@ -363,7 +363,7 @@ export function DetailedVisualizer({ tree }: { tree: AppTree }) {
style={{
flex: '0 0 auto',
background: 'var(--bui-bg-neutral-1)',
border: '1px solid var(--bui-border)',
border: '1px solid var(--bui-border-2)',
borderRadius: 'var(--bui-radius-2)',
}}
>
plugins/app-visualizer/src/components/AppVisualizerPage/TextVisualizer.tsx
+1 -1
View File
@@ -93,7 +93,7 @@ export function TextVisualizer({ tree }: { tree: AppTree }) {
px="4"
style={{
background: 'var(--bui-bg-neutral-1)',
borderTop: '1px solid var(--bui-border)',
borderTop: '1px solid var(--bui-border-2)',
}}
>
<Checkbox isSelected={showOutputs} onChange={setShowOutputs}>
plugins/mui-to-bui/src/components/BuiThemerPage/BuiThemePreview.test.tsx
+1 -1
View File
@@ -26,7 +26,7 @@ describe('BuiThemePreview', () => {
mode="light"
styleObject={{
'--bui-bg-neutral-2': '#ffffff',
'--bui-border': '#cccccc',
'--bui-border-2': '#cccccc',
'--bui-radius-2': '4px',
'--bui-space-3': '12px',
'--bui-fg-secondary': '#777777',
plugins/mui-to-bui/src/components/BuiThemerPage/BuiThemePreview.tsx
+1 -1
View File
@@ -49,7 +49,7 @@ export function BuiThemePreview({ mode, styleObject }: IsolatedPreviewProps) {
backgroundColor: 'var(--bui-bg-neutral-2)',
padding: 'var(--bui-space-3)',
borderRadius: 'var(--bui-radius-2)',
border: '1px solid var(--bui-border)',
border: '1px solid var(--bui-border-2)',
}}
>
<Flex direction="column" gap="4">
plugins/mui-to-bui/src/components/BuiThemerPage/ThemeContent.tsx
+1 -1
View File
@@ -99,7 +99,7 @@ export function ThemeContent({
p="3"
style={{
backgroundColor: 'var(--bui-bg-neutral-2)',
border: '1px solid var(--bui-border)',
border: '1px solid var(--bui-border-2)',
borderRadius: 'var(--bui-radius-2)',
fontFamily: 'monospace',
fontSize: '14px',
plugins/mui-to-bui/src/components/BuiThemerPage/convertMuiToBuiTheme.test.ts
+2 -2
View File
@@ -59,7 +59,7 @@ 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-neutral-0: #f5f5f5;');
expect(result.css).toContain('--bui-bg-app: #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;');
@@ -98,7 +98,7 @@ 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-neutral-0: #121212;');
expect(result.css).toContain('--bui-bg-app: #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;');
plugins/mui-to-bui/src/components/BuiThemerPage/convertMuiToBuiTheme.ts
+2 -2
View File
@@ -110,8 +110,8 @@ function generateBuiVariables(theme: Mui5Theme): Record<string, string> {
});
// Generate neutral background colors
styleObject['--bui-bg-app'] = palette.background.default;
Object.entries({
'neutral-0': palette.background.default,
'neutral-1': palette.background.paper,
'neutral-2': palette.background.default,
'neutral-3': palette.background.default,
@@ -138,7 +138,7 @@ function generateBuiVariables(theme: Mui5Theme): Record<string, string> {
});
// Base border color if available
styleObject['--bui-border'] = palette.border || palette.divider;
styleObject['--bui-border-2'] = palette.border || palette.divider;
styleObject['--bui-border-danger'] = palette.error.main;
styleObject['--bui-border-warning'] = palette.warning.main;
styleObject['--bui-border-success'] = palette.success.main;