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

Updated docs

Browse Source 
Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>
This commit is contained in:
Charles de Dreuille
2026-01-30 18:08:20 +00:00
parent d07be1b41f
commit a88c437e38
6 changed files with 122 additions and 92 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.changeset/small-rice-arrive.md
+14
View File
@@ -0,0 +1,14 @@
---
'@backstage/plugin-mui-to-bui': patch
---
Updated MUI to BUI theme converter to align with latest token changes
**Changes:**
- Removed generation of deprecated tokens: `--bui-fg-link`, `--bui-fg-link-hover`, `--bui-fg-tint`, `--bui-fg-tint-disabled`, `--bui-bg-tint` and all its variants
- Added generation of new `info` status tokens: `--bui-fg-info`, `--bui-fg-info-on-bg`, `--bui-bg-info`, `--bui-border-info`
- Updated status color mapping to generate both standalone and `-on-bg` variants for danger, warning, success, and info
- Status colors now use `.main` for standalone variants and `.dark` for `-on-bg` variants, providing better visual hierarchy
The converter now generates tokens that match the updated BUI design system structure, with clear distinction between status colors for standalone use vs. use on colored backgrounds.
.changeset/wicked-walls-accept.md
-2
View File
@@ -4,8 +4,6 @@
**BREAKING**: Removed link and tint color tokens, added new status foreground tokens, and improved Link component styling
**Removed Tokens (BREAKING):**
The following color tokens have been removed:
- `--bui-fg-link` (and all related tokens: `-hover`, `-pressed`, `-disabled`)
docs-ui/src/app/tokens/page.mdx
+54 -58
View File
@@ -240,30 +240,6 @@ color of your app.
</Table.Cell>
<Table.Cell>Used for solid background colors when disabled.</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell>
<Chip head>--bui-bg-tint</Chip>
</Table.Cell>
<Table.Cell>Used for tint background colors.</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell>
<Chip head>--bui-bg-tint-hover</Chip>
</Table.Cell>
<Table.Cell>Used for tint background colors when hovered.</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell>
<Chip head>--bui-bg-tint-focus</Chip>
</Table.Cell>
<Table.Cell>Used for tint background colors when active.</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell>
<Chip head>--bui-bg-tint-disabled</Chip>
</Table.Cell>
<Table.Cell>Used for tint background colors when disabled.</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell>
<Chip head>--bui-bg-danger</Chip>
@@ -282,6 +258,12 @@ color of your app.
</Table.Cell>
<Table.Cell>Used to show success information.</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell>
<Chip head>--bui-bg-info</Chip>
</Table.Cell>
<Table.Cell>Used to show informational content.</Table.Cell>
</Table.Row>
</Table.Body>
</Table.Root>
@@ -315,22 +297,6 @@ are prefixed with `fg` to make it easier to identify.
It should be used on top of main background surfaces.
</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell>
<Chip head>--bui-fg-link</Chip>
</Table.Cell>
<Table.Cell>
It should be used on top of main background surfaces.
</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell>
<Chip head>--bui-fg-link-hover</Chip>
</Table.Cell>
<Table.Cell>
It should be used on top of main background surfaces.
</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell>
<Chip head>--bui-fg-disabled</Chip>
@@ -347,28 +313,12 @@ are prefixed with `fg` to make it easier to identify.
It should be used on top of solid background colors.
</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell>
<Chip head>--bui-fg-tint</Chip>
</Table.Cell>
<Table.Cell>
It should be used on top of tint background colors.
</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell>
<Chip head>--bui-fg-tint-disabled</Chip>
</Table.Cell>
<Table.Cell>
It should be used on top of tint background colors when disabled.
</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell>
<Chip head>--bui-fg-danger</Chip>
</Table.Cell>
<Table.Cell>
It should be used on top of danger background colors.
Used for error states and destructive actions.
</Table.Cell>
</Table.Row>
<Table.Row>
@@ -376,17 +326,57 @@ are prefixed with `fg` to make it easier to identify.
<Chip head>--bui-fg-warning</Chip>
</Table.Cell>
<Table.Cell>
It should be used on top of warning background colors.
Used for warning states and cautionary information.
</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell>
<Chip head>--bui-fg-success</Chip>
</Table.Cell>
<Table.Cell>
Used for success states and positive feedback.
</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell>
<Chip head>--bui-fg-info</Chip>
</Table.Cell>
<Table.Cell>
Used for informational content and neutral status.
</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell>
<Chip head>--bui-fg-danger-on-bg</Chip>
</Table.Cell>
<Table.Cell>
It should be used on top of danger background colors.
</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell>
<Chip head>--bui-fg-warning-on-bg</Chip>
</Table.Cell>
<Table.Cell>
It should be used on top of warning background colors.
</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell>
<Chip head>--bui-fg-success-on-bg</Chip>
</Table.Cell>
<Table.Cell>
It should be used on top of success background colors.
</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell>
<Chip head>--bui-fg-info-on-bg</Chip>
</Table.Cell>
<Table.Cell>
It should be used on top of info background colors.
</Table.Cell>
</Table.Row>
</Table.Body>
</Table.Root>
@@ -449,6 +439,12 @@ 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-success`.</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell>
<Chip head>--bui-border-info</Chip>
</Table.Cell>
<Table.Cell>It should be used on top of `--bui-bg-info`.</Table.Cell>
</Table.Row>
</Table.Body>
</Table.Root>
docs/conf/user-interface/index.md
+19 -18
View File
@@ -131,7 +131,10 @@ And if you’d like to go even further, you can target specific component class
| `--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-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` | Main borders around surfaces like `Card`, `Dialog`, ... |
| `--bui-font-regular` | The main font of your app. |
@@ -169,31 +172,29 @@ These colors are used for the background of your application. We are mostly usin
| `--bui-bg-solid-hover` | Used for solid background colors when hovered. |
| `--bui-bg-solid-pressed` | Used for solid background colors when pressed. |
| `--bui-bg-solid-disabled` | Used for solid background colors when disabled. |
| `--bui-bg-tint` | Used for tint background colors. |
| `--bui-bg-tint-hover` | Used for tint background colors when hovered. |
| `--bui-bg-tint-focus` | Used for tint background colors when active. |
| `--bui-bg-tint-disabled` | Used for tint background colors when disabled. |
| `--bui-bg-danger` | Used to show errors information. |
| `--bui-bg-warning` | Used to show warnings information. |
| `--bui-bg-success` | Used to show success information. |
| `--bui-bg-info` | Used to show informational content. |
#### Foreground colors
Foreground colours are meant to work in pair with a background colours. Typically this would work for icons, texts, shapes, ... Use a matching name to know what foreground color to use. These colors are prefixed with `fg` to make it easier to identify.
| Token Name | Description |
| ------------------------ | ----------------------------------------------------------------- |
| `--bui-fg-primary` | It should be used on top of main background surfaces. |
| `--bui-fg-secondary` | It should be used on top of main background surfaces. |
| `--bui-fg-link` | It should be used on top of main background surfaces. |
| `--bui-fg-link-hover` | It should be used on top of main background surfaces. |
| `--bui-fg-disabled` | It should be used on top of main background surfaces. |
| `--bui-fg-solid` | It should be used on top of solid background colors. |
| `--bui-fg-tint` | It should be used on top of tint background colors. |
| `--bui-fg-tint-disabled` | It should be used on top of tint background colors when disabled. |
| `--bui-fg-danger` | It should be used on top of danger background colors. |
| `--bui-fg-warning` | It should be used on top of warning background colors. |
| `--bui-fg-success` | It should be used on top of success background colors. |
| Token Name | Description |
| ------------------------ | ------------------------------------------------------ |
| `--bui-fg-primary` | It should be used on top of main background surfaces. |
| `--bui-fg-secondary` | It should be used on top of main background surfaces. |
| `--bui-fg-disabled` | It should be used on top of main background surfaces. |
| `--bui-fg-solid` | It should be used on top of solid background colors. |
| `--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-fg-danger-on-bg` | It should be used on top of danger background colors. |
| `--bui-fg-warning-on-bg` | It should be used on top of warning background colors. |
| `--bui-fg-success-on-bg` | It should be used on top of success background colors. |
| `--bui-fg-info-on-bg` | It should be used on top of info background colors. |
#### Border colors
plugins/mui-to-bui/src/components/BuiThemerPage/convertMuiToBuiTheme.test.ts
+25 -3
View File
@@ -151,6 +151,10 @@ describe('convertMuiToBuiTheme', () => {
expect(result.css).toContain('--bui-bg-danger: #ffcdd2;');
expect(result.css).toContain('--bui-bg-warning: #ffe0b2;');
expect(result.css).toContain('--bui-bg-success: #c8e6c9;');
// Info background may be hex or rgba depending on theme
expect(result.css).toMatch(
/--bui-bg-info:\s*(#[0-9a-f]{6}|rgba?\([^)]*\));/i,
);
});
it('should generate foreground colors correctly', () => {
@@ -178,10 +182,8 @@ describe('convertMuiToBuiTheme', () => {
const result = convertMuiToBuiTheme(theme);
expect(result.css).toContain('--bui-fg-link: #1976d2;');
expect(result.css).toContain('--bui-fg-link-hover: #115293;');
expect(result.css).toContain('--bui-fg-disabled: #cccccc;');
// Foreground danger/warning/success may be hex or rgb depending on theme
// Foreground status colors (standalone)
expect(result.css).toMatch(
/--bui-fg-danger:\s*(#[0-9a-f]{6}|rgb\([^)]*\));/i,
);
@@ -191,6 +193,22 @@ describe('convertMuiToBuiTheme', () => {
expect(result.css).toMatch(
/--bui-fg-success:\s*(#[0-9a-f]{6}|rgb\([^)]*\));/i,
);
expect(result.css).toMatch(
/--bui-fg-info:\s*(#[0-9a-f]{6}|rgb\([^)]*\));/i,
);
// Foreground status colors (on background)
expect(result.css).toMatch(
/--bui-fg-danger-on-bg:\s*(#[0-9a-f]{6}|rgb\([^)]*\));/i,
);
expect(result.css).toMatch(
/--bui-fg-warning-on-bg:\s*(#[0-9a-f]{6}|rgb\([^)]*\));/i,
);
expect(result.css).toMatch(
/--bui-fg-success-on-bg:\s*(#[0-9a-f]{6}|rgb\([^)]*\));/i,
);
expect(result.css).toMatch(
/--bui-fg-info-on-bg:\s*(#[0-9a-f]{6}|rgb\([^)]*\));/i,
);
});
it('should generate border colors correctly', () => {
@@ -215,6 +233,10 @@ describe('convertMuiToBuiTheme', () => {
expect(result.css).toContain('--bui-border-danger: #f44336;');
expect(result.css).toContain('--bui-border-warning: #ff9800;');
expect(result.css).toContain('--bui-border-success: #4caf50;');
// Info border may be hex or rgb depending on theme
expect(result.css).toMatch(
/--bui-border-info:\s*(#[0-9a-f]{6}|rgb\([^)]*\));/i,
);
});
it('should handle function-based spacing', () => {
plugins/mui-to-bui/src/components/BuiThemerPage/convertMuiToBuiTheme.ts
+10 -11
View File
@@ -94,16 +94,17 @@ function generateBuiVariables(theme: Mui5Theme): Record<string, string> {
Object.entries({
primary: palette.text.primary,
secondary: palette.textSubtle,
link: palette.link ?? palette.primary.main,
'link-hover': palette.linkHover ?? palette.primary.dark,
disabled: palette.text.disabled,
solid: palette.primary.contrastText,
'solid-disabled': palette.text.disabled,
tint: palette.textSubtle,
'tint-disabled': palette.textVerySubtle,
danger: palette.error.dark,
warning: palette.warning.dark,
success: palette.success.dark,
danger: palette.error.main,
warning: palette.warning.main,
success: palette.success.main,
info: palette.info?.main ?? palette.primary.main,
'danger-on-bg': palette.error.dark,
'warning-on-bg': palette.warning.dark,
'success-on-bg': palette.success.dark,
'info-on-bg': palette.info?.dark ?? palette.primary.dark,
}).forEach(([key, value]) => {
styleObject[`--bui-fg-${key}`] = value;
});
@@ -118,13 +119,10 @@ function generateBuiVariables(theme: Mui5Theme): Record<string, string> {
'solid-hover': blend(palette.primary.main, palette.primary.dark, 0.5),
'solid-pressed': palette.primary.dark,
'solid-disabled': palette.action.disabledBackground,
tint: 'transparent',
'tint-hover': alpha(palette.primary.main, 0.4),
'tint-pressed': alpha(palette.primary.main, 0.6),
'tint-disabled': palette.action.disabledBackground,
danger: palette.error.light,
warning: palette.warning.light,
success: palette.success.light,
info: palette.info?.light ?? alpha(palette.primary.main, 0.1),
}).forEach(([key, value]) => {
styleObject[`--bui-bg-${key}`] = value;
});
@@ -134,6 +132,7 @@ function generateBuiVariables(theme: Mui5Theme): Record<string, string> {
danger: palette.error.main,
warning: palette.warning.main,
success: palette.success.main,
info: palette.info?.main ?? palette.primary.main,
}).forEach(([key, value]) => {
styleObject[`--bui-border-${key}`] = value;
});