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

Migrate all components to new tokens

Browse Source 
Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>
This commit is contained in:
Charles de Dreuille
2026-02-06 13:48:08 +00:00
parent f16694e97f
commit 599f6687a2
43 changed files with 371 additions and 205 deletions
Download Patch File Download Diff File Expand all files Collapse all files
plugins/mui-to-bui/src/components/BuiThemerPage/BuiThemePreview.test.tsx
+2 -2
View File
@@ -25,7 +25,7 @@ describe('BuiThemePreview', () => {
<BuiThemePreview
mode="light"
styleObject={{
'--bui-bg-surface-2': '#ffffff',
'--bui-bg-neutral-2': '#ffffff',
'--bui-border': '#cccccc',
'--bui-radius-2': '4px',
'--bui-space-3': '12px',
@@ -33,7 +33,7 @@ describe('BuiThemePreview', () => {
'--bui-bg-solid': '#000000',
'--bui-fg-solid': '#ffffff',
'--bui-fg-primary': '#111111',
'--bui-bg-surface-1': '#f5f5f5',
'--bui-bg-neutral-1': '#f5f5f5',
}}
/>,
);
plugins/mui-to-bui/src/components/BuiThemerPage/BuiThemePreview.tsx
+1 -1
View File
@@ -46,7 +46,7 @@ export function BuiThemePreview({ mode, styleObject }: IsolatedPreviewProps) {
// This creates a scoped context where the variables take precedence
...styleObject,
width: '100%',
backgroundColor: 'var(--bui-bg-surface-2)',
backgroundColor: 'var(--bui-bg-neutral-2)',
padding: 'var(--bui-space-3)',
borderRadius: 'var(--bui-radius-2)',
border: '1px solid var(--bui-border)',
plugins/mui-to-bui/src/components/BuiThemerPage/ThemeContent.tsx
+1 -1
View File
@@ -98,7 +98,7 @@ export function ThemeContent({
<Box
p="3"
style={{
backgroundColor: 'var(--bui-bg-surface-2)',
backgroundColor: 'var(--bui-bg-neutral-2)',
border: '1px solid var(--bui-border)',
borderRadius: 'var(--bui-radius-2)',
fontFamily: 'monospace',
plugins/mui-to-bui/src/components/BuiThemerPage/convertMuiToBuiTheme.test.ts
+7 -7
View File
@@ -59,9 +59,9 @@ 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-surface-0: #f5f5f5;');
expect(result.css).toContain('--bui-bg-surface-2: #f5f5f5;');
expect(result.css).toContain('--bui-bg-surface-1: #ffffff;');
expect(result.css).toContain('--bui-bg-neutral-0: #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;');
// Secondary may not be present without Backstage additions, so don't assert it
expect(result.css).toContain('--bui-bg-solid: #1976d2;');
@@ -98,13 +98,13 @@ 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-surface-0: #121212;');
expect(result.css).toContain('--bui-bg-surface-2: #121212;');
expect(result.css).toContain('--bui-bg-surface-1: #1e1e1e;');
expect(result.css).toContain('--bui-bg-neutral-0: #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;');
// Test style object
expect(result.styleObject).toHaveProperty('--bui-bg-surface-1', '#1e1e1e');
expect(result.styleObject).toHaveProperty('--bui-bg-neutral-1', '#1e1e1e');
expect(result.styleObject).toHaveProperty('--bui-fg-primary', '#ffffff');
});