diff --git a/Dockerfile b/Dockerfile index afed01c..361b83c 100644 --- a/Dockerfile +++ b/Dockerfile @@ -29,6 +29,7 @@ WORKDIR /app ENV PYTHONUNBUFFERED=1 ENV MISE_YES=1 ENV MISE_HTTP_TIMEOUT=120 +ENV MISE_PYTHON_GITHUB_ATTESTATIONS=false ENV PATH=/root/.local/bin:/root/.local/share/mise/shims:$PATH RUN curl -fsSL https://mise.run | sh COPY mise.toml ./ @@ -47,14 +48,14 @@ COPY packages/app/package.json ./packages/app/package.json COPY packages/backstage-theme-github/package.json ./packages/backstage-theme-github/package.json COPY plugins/ plugins/ COPY .yarnrc.yml ./ +COPY .yarn/plugins/ .yarn/plugins/ +COPY backstage.json ./ RUN yarn install --immutable COPY tsconfig.json ./ COPY lerna.json ./ -COPY backstage.json ./ COPY packages/ packages/ COPY plugins/ plugins/ -RUN yarn tsc COPY app-config.yaml ./ RUN yarn build:backend @@ -91,6 +92,7 @@ WORKDIR /app ENV PYTHONUNBUFFERED=1 ENV MISE_YES=1 ENV MISE_HTTP_TIMEOUT=120 +ENV MISE_PYTHON_GITHUB_ATTESTATIONS=false ENV PATH=/root/.local/bin:/root/.local/share/mise/shims:$PATH RUN curl -fsSL https://mise.run | sh COPY mise.toml ./ @@ -115,6 +117,8 @@ COPY --from=build /app/packages/backend/dist/skeleton.tar.gz ./ RUN tar xzf skeleton.tar.gz && rm skeleton.tar.gz COPY .yarnrc.yml ./ +COPY .yarn/plugins/ .yarn/plugins/ +COPY backstage.json ./ RUN yarn workspaces focus --all --production && rm -rf "$(yarn cache clean)" # Then copy the rest of the backend bundle, along with any other files we might want. diff --git a/packages/app/src/components/catalog/EntityPage.tsx b/packages/app/src/components/catalog/EntityPage.tsx index cea66e8..710113a 100644 --- a/packages/app/src/components/catalog/EntityPage.tsx +++ b/packages/app/src/components/catalog/EntityPage.tsx @@ -122,12 +122,12 @@ const entityWarningContent = ( ); const overviewContent = ( - + {entityWarningContent} - + - + @@ -151,7 +151,7 @@ const serviceEntityPage = ( - + @@ -162,7 +162,7 @@ const serviceEntityPage = ( - + @@ -189,7 +189,7 @@ const websiteEntityPage = ( - + @@ -241,20 +241,22 @@ const componentPage = ( const apiPage = ( - + {entityWarningContent} - + - + - - - - - - + + + + + + + + @@ -264,7 +266,7 @@ const apiPage = ( - + @@ -276,7 +278,7 @@ const apiPage = ( const userPage = ( - + {entityWarningContent} @@ -292,7 +294,7 @@ const userPage = ( const groupPage = ( - + {entityWarningContent} @@ -314,7 +316,7 @@ const groupPage = ( const systemPage = ( - + {entityWarningContent} @@ -360,7 +362,7 @@ const systemPage = ( const domainPage = ( - + {entityWarningContent} diff --git a/packages/app/src/index.tsx b/packages/app/src/index.tsx index 98d7b94..3ed7638 100644 --- a/packages/app/src/index.tsx +++ b/packages/app/src/index.tsx @@ -3,5 +3,6 @@ import ReactDOM from 'react-dom/client'; import App from './App'; import '@backstage/ui/css/styles.css'; import '@internal/backstage-theme-github/src/styles.css'; +import './styles/grid-fix.css'; ReactDOM.createRoot(document.getElementById('root')!).render(); diff --git a/packages/app/src/styles/grid-fix.css b/packages/app/src/styles/grid-fix.css new file mode 100644 index 0000000..9a9c457 --- /dev/null +++ b/packages/app/src/styles/grid-fix.css @@ -0,0 +1,36 @@ +/* + Fix for MUI Grid spacing when Backstage's UnifiedThemeProvider adds + a 'v5-' prefix to MUI class names. The Grid's internal CSS uses + .MuiGrid-item selectors but actual elements have .v5-MuiGrid-item. + This restores proper gaps between Grid items. +*/ + +/* spacing={1} → 8px */ +[class*="MuiGrid-container"][class*="spacing-xs-1"] > [class*="-MuiGrid-item"] { + padding-top: 8px; + padding-left: 8px; +} + +/* spacing={2} → 16px */ +[class*="MuiGrid-container"][class*="spacing-xs-2"] > [class*="-MuiGrid-item"] { + padding-top: 16px; + padding-left: 16px; +} + +/* spacing={3} → 24px */ +[class*="MuiGrid-container"][class*="spacing-xs-3"] > [class*="-MuiGrid-item"] { + padding-top: 24px; + padding-left: 24px; +} + +/* spacing={4} → 32px */ +[class*="MuiGrid-container"][class*="spacing-xs-4"] > [class*="-MuiGrid-item"] { + padding-top: 32px; + padding-left: 32px; +} + +/* spacing={5} → 40px */ +[class*="MuiGrid-container"][class*="spacing-xs-5"] > [class*="-MuiGrid-item"] { + padding-top: 40px; + padding-left: 40px; +} diff --git a/packages/app/src/theme/index.ts b/packages/app/src/theme/index.ts index 8d8f41c..a033893 100644 --- a/packages/app/src/theme/index.ts +++ b/packages/app/src/theme/index.ts @@ -88,24 +88,7 @@ export const backstageTheme = createUnifiedTheme({ }, }, }, - MuiGrid: { - styleOverrides: { - item: { - padding: '.5rem', - }, - root: { - '&.v5-MuiGrid-container': { - margin: 0, - }, - '&.v5-MuiGrid-item': { - padding: '.5rem', - }, - '&.MuiGrid-item': { - padding: '.5rem', - }, - }, - }, - }, + }, pageTheme: { home: genPageTheme({ diff --git a/packages/backstage-theme-github/src/index.ts b/packages/backstage-theme-github/src/index.ts index 889dc29..c43244d 100644 --- a/packages/backstage-theme-github/src/index.ts +++ b/packages/backstage-theme-github/src/index.ts @@ -4,6 +4,7 @@ import { palettes, shapes, } from '@backstage/theme'; +import './styles.css'; // GitHub Primer-inspired font stack const BRAND_FONT_FAMILY = @@ -104,6 +105,10 @@ export const brandLightTheme = createUnifiedTheme({ warning: { main: primer.light.warning }, error: { main: primer.light.error }, info: { main: primer.light.info }, + text: { + primary: primer.light.textPrimary, + secondary: primer.light.textSecondary, + }, background: { ...palettes.light.background, default: primer.light.bgDefault, @@ -149,7 +154,22 @@ export const brandLightTheme = createUnifiedTheme({ }), }, components: { - // Ensure the drawer uses the same nav background (some variants read MUI Drawer styles) + MuiTypography: { + styleOverrides: { + root: { + wordSpacing: '0.02rem', + letterSpacing: '0.02rem', + }, + }, + }, + MuiCard: { + styleOverrides: { + root: { + borderRadius: '0.75rem', + border: `1px solid ${primer.light.divider}`, + }, + }, + }, MuiDrawer: { styleOverrides: { paper: { @@ -186,6 +206,10 @@ export const brandDarkTheme = createUnifiedTheme({ warning: { main: primer.dark.warning }, error: { main: primer.dark.error }, info: { main: primer.dark.info }, + text: { + primary: primer.dark.textPrimary, + secondary: primer.dark.textSecondary, + }, background: { ...palettes.dark.background, default: primer.dark.bgDefault, @@ -231,6 +255,22 @@ export const brandDarkTheme = createUnifiedTheme({ }), }, components: { + MuiTypography: { + styleOverrides: { + root: { + wordSpacing: '0.02rem', + letterSpacing: '0.02rem', + }, + }, + }, + MuiCard: { + styleOverrides: { + root: { + borderRadius: '0.75rem', + border: `1px solid ${primer.dark.divider}`, + }, + }, + }, MuiDrawer: { styleOverrides: { paper: {