diff --git a/.changeset/small-rice-arrive.md b/.changeset/small-rice-arrive.md new file mode 100644 index 0000000000..a30bec6a82 --- /dev/null +++ b/.changeset/small-rice-arrive.md @@ -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. diff --git a/.changeset/wicked-walls-accept.md b/.changeset/wicked-walls-accept.md index 1a56c5a893..dc5e86a0d4 100644 --- a/.changeset/wicked-walls-accept.md +++ b/.changeset/wicked-walls-accept.md @@ -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`) diff --git a/docs-ui/src/app/tokens/page.mdx b/docs-ui/src/app/tokens/page.mdx index 97266afbf4..ffad2ffa55 100644 --- a/docs-ui/src/app/tokens/page.mdx +++ b/docs-ui/src/app/tokens/page.mdx @@ -240,30 +240,6 @@ color of your app. 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 @@ -282,6 +258,12 @@ color of your app. Used to show success information. + + + --bui-bg-info + + Used to show informational content. + @@ -315,22 +297,6 @@ are prefixed with `fg` to make it easier to identify. 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 @@ -347,28 +313,12 @@ are prefixed with `fg` to make it easier to identify. 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. + Used for error states and destructive actions. @@ -376,17 +326,57 @@ are prefixed with `fg` to make it easier to identify. --bui-fg-warning - It should be used on top of warning background colors. + 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. + + @@ -449,6 +439,12 @@ low contrast to help as a separator with the different background colors. It should be used on top of `--bui-bg-success`. + + + --bui-border-info + + It should be used on top of `--bui-bg-info`. + diff --git a/docs/conf/user-interface/index.md b/docs/conf/user-interface/index.md index e0fb645d78..002383c6f4 100644 --- a/docs/conf/user-interface/index.md +++ b/docs/conf/user-interface/index.md @@ -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 diff --git a/plugins/mui-to-bui/src/components/BuiThemerPage/convertMuiToBuiTheme.test.ts b/plugins/mui-to-bui/src/components/BuiThemerPage/convertMuiToBuiTheme.test.ts index 48bb318a71..a5f7cfd36f 100644 --- a/plugins/mui-to-bui/src/components/BuiThemerPage/convertMuiToBuiTheme.test.ts +++ b/plugins/mui-to-bui/src/components/BuiThemerPage/convertMuiToBuiTheme.test.ts @@ -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', () => { diff --git a/plugins/mui-to-bui/src/components/BuiThemerPage/convertMuiToBuiTheme.ts b/plugins/mui-to-bui/src/components/BuiThemerPage/convertMuiToBuiTheme.ts index 029d70cec7..dc72e3d597 100644 --- a/plugins/mui-to-bui/src/components/BuiThemerPage/convertMuiToBuiTheme.ts +++ b/plugins/mui-to-bui/src/components/BuiThemerPage/convertMuiToBuiTheme.ts @@ -94,16 +94,17 @@ function generateBuiVariables(theme: Mui5Theme): Record { 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 { '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 { 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; });