diff --git a/plugins/bui-themer/src/components/BuiThemerPage/BuiThemerPage.tsx b/plugins/bui-themer/src/components/BuiThemerPage/BuiThemerPage.tsx index 43cea38026..856790161b 100644 --- a/plugins/bui-themer/src/components/BuiThemerPage/BuiThemerPage.tsx +++ b/plugins/bui-themer/src/components/BuiThemerPage/BuiThemerPage.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ -import { useMemo, useState, useCallback, useEffect } from 'react'; +import { useMemo, useState, useCallback } from 'react'; import { AppTheme, useApi } from '@backstage/core-plugin-api'; import { appThemeApiRef } from '@backstage/core-plugin-api'; import { Theme, useTheme } from '@mui/material/styles'; @@ -65,6 +65,7 @@ function BuiThemePreview({ mode, styleObject }: IsolatedPreviewProps) { backgroundColor: 'var(--bui-bg-surface-2)', padding: 'var(--bui-space-3)', borderRadius: 'var(--bui-radius-2)', + border: '1px solid var(--bui-border)', }} > @@ -166,23 +167,18 @@ function ThemeContent({ variant, muiTheme, }: ThemeContentProps) { - const [generatedCss, setGeneratedCss] = useState(''); const [activeTab, setActiveTab] = useState('css'); const { css, styleObject } = useMemo(() => { return convertMuiToBuiTheme(muiTheme); }, [muiTheme]); - useEffect(() => { - setGeneratedCss(css); + const handleCopy = useCallback(() => { + window.navigator.clipboard.writeText(css); }, [css]); - const handleCopy = useCallback(() => { - window.navigator.clipboard.writeText(generatedCss); - }, [generatedCss]); - const handleDownload = useCallback(() => { - const blob = new Blob([generatedCss], { type: 'text/css' }); + const blob = new Blob([css], { type: 'text/css' }); const url = URL.createObjectURL(blob); const a = document.createElement('a'); a.href = url; @@ -191,7 +187,7 @@ function ThemeContent({ a.click(); document.body.removeChild(a); URL.revokeObjectURL(url); - }, [generatedCss, themeId]); + }, [css, themeId]); return ( @@ -223,27 +219,22 @@ function ThemeContent({ - - - Generated CSS: - - - {generatedCss} - + + {css} @@ -289,10 +280,11 @@ export function BuiThemerPage() { return ( - + - Convert MUI v5 themes to BUI CSS variables. Select a theme to generate - the corresponding BUI CSS variables that can be copied or downloaded. + Convert your MUI v5 theme into BUI CSS variables. Pick a theme to view + and export the generated BUI CSS variable definitions for use in your + project.