paulononato/backstage
1
0
Fork 0
Code Issues Pull Requests Actions 51 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
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;
});