diff --git a/.changeset/six-books-arrive.md b/.changeset/six-books-arrive.md new file mode 100644 index 0000000000..785424f635 --- /dev/null +++ b/.changeset/six-books-arrive.md @@ -0,0 +1,23 @@ +--- +'@backstage/plugin-techdocs-module-addons-contrib': patch +'@backstage/plugin-microsoft-calendar': patch +'@backstage/plugin-scaffolder-react': patch +'@backstage/plugin-catalog-graph': patch +'@backstage/plugin-cost-insights': patch +'@backstage/plugin-tech-insights': patch +'@backstage/plugin-code-climate': patch +'@backstage/plugin-scaffolder': patch +'@backstage/plugin-gcalendar': patch +'@backstage/plugin-org-react': patch +'@backstage/plugin-sonarqube': patch +'@backstage/plugin-xcmetrics': patch +'@backstage/plugin-api-docs': patch +'@backstage/plugin-playlist': patch +'@backstage/plugin-catalog': patch +'@backstage/plugin-explore': patch +'@backstage/plugin-bazaar': patch +'@backstage/plugin-search': patch +'@backstage/plugin-org': patch +--- + +Internal theme type updates diff --git a/plugins/api-docs/src/components/AsyncApiDefinitionWidget/AsyncApiDefinition.tsx b/plugins/api-docs/src/components/AsyncApiDefinitionWidget/AsyncApiDefinition.tsx index 64452b7191..3e2fbd1078 100644 --- a/plugins/api-docs/src/components/AsyncApiDefinitionWidget/AsyncApiDefinition.tsx +++ b/plugins/api-docs/src/components/AsyncApiDefinitionWidget/AsyncApiDefinition.tsx @@ -17,11 +17,10 @@ import AsyncApi from '@asyncapi/react-component'; import '@asyncapi/react-component/styles/default.css'; import { makeStyles, alpha, darken } from '@material-ui/core/styles'; -import { BackstageTheme } from '@backstage/theme'; import React from 'react'; import { useTheme } from '@material-ui/core'; -const useStyles = makeStyles((theme: BackstageTheme) => ({ +const useStyles = makeStyles(theme => ({ root: { fontFamily: 'inherit', '& .bg-white': { diff --git a/plugins/bazaar/src/components/ProjectCard/ProjectCard.tsx b/plugins/bazaar/src/components/ProjectCard/ProjectCard.tsx index 61d1dfebb9..eb125d2111 100644 --- a/plugins/bazaar/src/components/ProjectCard/ProjectCard.tsx +++ b/plugins/bazaar/src/components/ProjectCard/ProjectCard.tsx @@ -29,7 +29,6 @@ import { BazaarProject } from '../../types'; import { DateTime } from 'luxon'; import { HomePageBazaarInfoCard } from '../HomePageBazaarInfoCard'; import { Entity } from '@backstage/catalog-model'; -import { BackstageTheme } from '@backstage/theme'; type Props = { project: BazaarProject; @@ -42,7 +41,7 @@ type StyleProps = { height: 'large' | 'small'; }; -const useStyles = makeStyles((theme: BackstageTheme) => ({ +const useStyles = makeStyles(theme => ({ description: (props: StyleProps) => ({ height: props.height === 'large' ? '10rem' : '4rem', WebkitBackgroundClip: 'text', diff --git a/plugins/catalog-graph/src/components/EntityRelationsGraph/CustomLabel.tsx b/plugins/catalog-graph/src/components/EntityRelationsGraph/CustomLabel.tsx index 19082cfe81..2717d813cc 100644 --- a/plugins/catalog-graph/src/components/EntityRelationsGraph/CustomLabel.tsx +++ b/plugins/catalog-graph/src/components/EntityRelationsGraph/CustomLabel.tsx @@ -14,14 +14,13 @@ * limitations under the License. */ import { DependencyGraphTypes } from '@backstage/core-components'; -import { BackstageTheme } from '@backstage/theme'; import makeStyles from '@material-ui/core/styles/makeStyles'; import React from 'react'; import { EntityEdgeData } from './types'; import classNames from 'classnames'; const useStyles = makeStyles( - (theme: BackstageTheme) => ({ + theme => ({ text: { fill: theme.palette.textContrast, }, diff --git a/plugins/catalog-graph/src/components/EntityRelationsGraph/CustomNode.tsx b/plugins/catalog-graph/src/components/EntityRelationsGraph/CustomNode.tsx index edcdb97fcb..1229ad28f9 100644 --- a/plugins/catalog-graph/src/components/EntityRelationsGraph/CustomNode.tsx +++ b/plugins/catalog-graph/src/components/EntityRelationsGraph/CustomNode.tsx @@ -15,7 +15,6 @@ */ import { DependencyGraphTypes } from '@backstage/core-components'; import { humanizeEntityRef } from '@backstage/plugin-catalog-react'; -import { BackstageTheme } from '@backstage/theme'; import { makeStyles } from '@material-ui/core/styles'; import classNames from 'classnames'; import React, { useLayoutEffect, useRef, useState } from 'react'; @@ -23,7 +22,7 @@ import { EntityKindIcon } from './EntityKindIcon'; import { EntityNodeData } from './types'; const useStyles = makeStyles( - (theme: BackstageTheme) => ({ + theme => ({ node: { fill: theme.palette.grey[300], stroke: theme.palette.grey[300], diff --git a/plugins/catalog/src/components/EntityContextMenu/EntityContextMenu.tsx b/plugins/catalog/src/components/EntityContextMenu/EntityContextMenu.tsx index 5e6e8ff3a9..9cd377b447 100644 --- a/plugins/catalog/src/components/EntityContextMenu/EntityContextMenu.tsx +++ b/plugins/catalog/src/components/EntityContextMenu/EntityContextMenu.tsx @@ -24,7 +24,7 @@ import { Popover, Tooltip, } from '@material-ui/core'; -import { makeStyles } from '@material-ui/core/styles'; +import { Theme, makeStyles } from '@material-ui/core/styles'; import BugReportIcon from '@material-ui/icons/BugReport'; import MoreVert from '@material-ui/icons/MoreVert'; import FileCopyTwoToneIcon from '@material-ui/icons/FileCopyTwoTone'; @@ -32,7 +32,6 @@ import React, { useCallback, useState } from 'react'; import { IconComponent } from '@backstage/core-plugin-api'; import { useEntityPermission } from '@backstage/plugin-catalog-react/alpha'; import { catalogEntityDeletePermission } from '@backstage/plugin-catalog-common/alpha'; -import { BackstageTheme } from '@backstage/theme'; import { UnregisterEntity, UnregisterEntityOptions } from './UnregisterEntity'; import { useApi, alertApiRef } from '@backstage/core-plugin-api'; @@ -40,7 +39,7 @@ import { useApi, alertApiRef } from '@backstage/core-plugin-api'; export type EntityContextMenuClassKey = 'button'; const useStyles = makeStyles( - (theme: BackstageTheme) => { + (theme: Theme) => { return { button: { color: theme.page.fontColor, diff --git a/plugins/catalog/src/components/SystemDiagramCard/SystemDiagramCard.tsx b/plugins/catalog/src/components/SystemDiagramCard/SystemDiagramCard.tsx index ec4d13a2f2..f3cc265653 100644 --- a/plugins/catalog/src/components/SystemDiagramCard/SystemDiagramCard.tsx +++ b/plugins/catalog/src/components/SystemDiagramCard/SystemDiagramCard.tsx @@ -33,7 +33,6 @@ import { Box, makeStyles, Typography, useTheme } from '@material-ui/core'; import ZoomOutMap from '@material-ui/icons/ZoomOutMap'; import React from 'react'; import useAsync from 'react-use/lib/useAsync'; -import { BackstageTheme } from '@backstage/theme'; import { DependencyGraph, @@ -55,7 +54,7 @@ export type SystemDiagramCardClassKey = | 'resourceNode'; const useStyles = makeStyles( - (theme: BackstageTheme) => ({ + theme => ({ domainNode: { fill: theme.palette.primary.main, stroke: theme.palette.border, diff --git a/plugins/code-climate/src/components/CodeClimateTable/CodeClimateTable.tsx b/plugins/code-climate/src/components/CodeClimateTable/CodeClimateTable.tsx index 5aae7d4194..ca5b24565c 100644 --- a/plugins/code-climate/src/components/CodeClimateTable/CodeClimateTable.tsx +++ b/plugins/code-climate/src/components/CodeClimateTable/CodeClimateTable.tsx @@ -17,10 +17,9 @@ import React from 'react'; import { CodeClimateData } from '../../api'; import { Link } from '@backstage/core-components'; -import { Box, makeStyles, Typography } from '@material-ui/core'; -import { BackstageTheme } from '@backstage/theme'; +import { Box, makeStyles, Theme, Typography } from '@material-ui/core'; -const letterStyle = (theme: BackstageTheme) => ({ +const letterStyle = (theme: Theme) => ({ color: theme.palette.common.white, border: 0, borderRadius: '3px', @@ -32,7 +31,7 @@ const fontSize = { fontSize: '25px', }; -const letterColor = (letter: string, theme: BackstageTheme) => { +const letterColor = (letter: string, theme: Theme) => { if (letter === 'A') { return theme.palette.success.main || '#45d298'; } else if (letter === 'B') { @@ -49,7 +48,7 @@ const letterColor = (letter: string, theme: BackstageTheme) => { }; const useStyles = makeStyles< - BackstageTheme, + Theme, { maintainabilityLetter: string; testCoverageLetter: string; diff --git a/plugins/cost-insights/src/components/CostInsightsPage/CostInsightsThemeProvider.tsx b/plugins/cost-insights/src/components/CostInsightsPage/CostInsightsThemeProvider.tsx index 7c64c41116..40745c4301 100644 --- a/plugins/cost-insights/src/components/CostInsightsPage/CostInsightsThemeProvider.tsx +++ b/plugins/cost-insights/src/components/CostInsightsPage/CostInsightsThemeProvider.tsx @@ -17,9 +17,9 @@ import React, { PropsWithChildren } from 'react'; import { createTheme as createMuiTheme, + Theme, ThemeProvider, } from '@material-ui/core'; -import { BackstageTheme } from '@backstage/theme'; import { costInsightsDarkTheme, costInsightsLightTheme, @@ -31,7 +31,7 @@ export const CostInsightsThemeProvider = ({ }: PropsWithChildren<{}>) => { return ( + theme={(theme: Theme) => createMuiTheme({ ...theme, palette: { diff --git a/plugins/cost-insights/src/utils/styles.ts b/plugins/cost-insights/src/utils/styles.ts index 6ccc81c963..cec9c0150d 100644 --- a/plugins/cost-insights/src/utils/styles.ts +++ b/plugins/cost-insights/src/utils/styles.ts @@ -13,6 +13,7 @@ * See the License for the specific language governing permissions and * limitations under the License. */ + import { createStyles, emphasize, @@ -21,8 +22,8 @@ import { lighten, makeStyles, } from '@material-ui/core'; -import { BackstageTheme } from '@backstage/theme'; import { CostInsightsTheme, CostInsightsThemeOptions } from '../types'; +import { BackstageTheme } from '@backstage/theme'; export const costInsightsLightTheme = { palette: { @@ -155,7 +156,7 @@ export const useBarChartStyles = (theme: CostInsightsTheme) => ({ }, }); -export const useBarChartLayoutStyles = makeStyles(theme => +export const useBarChartLayoutStyles = makeStyles(theme => createStyles({ wrapper: { display: 'flex', @@ -197,7 +198,7 @@ export const useBarChartStepperButtonStyles = makeStyles( }), ); -export const useBarChartLabelStyles = makeStyles(theme => +export const useBarChartLabelStyles = makeStyles(theme => createStyles({ foreignObject: { textAlign: 'center', @@ -222,7 +223,7 @@ export const useBarChartLabelStyles = makeStyles(theme => }), ); -export const useCostInsightsStyles = makeStyles(theme => ({ +export const useCostInsightsStyles = makeStyles(theme => ({ h6Subtle: { ...theme.typography.h6, fontWeight: 'normal', @@ -230,84 +231,80 @@ export const useCostInsightsStyles = makeStyles(theme => ({ }, })); -export const useCostInsightsTabsStyles = makeStyles( - (theme: BackstageTheme) => ({ - tabs: { - borderBottom: `1px solid ${theme.palette.textVerySubtle}`, - backgroundColor: brighten(theme.palette.background.default), - padding: theme.spacing(0, 4), +export const useCostInsightsTabsStyles = makeStyles(theme => ({ + tabs: { + borderBottom: `1px solid ${theme.palette.textVerySubtle}`, + backgroundColor: brighten(theme.palette.background.default), + padding: theme.spacing(0, 4), + }, + tab: { + minHeight: 68, + minWidth: 180, + padding: theme.spacing(1, 4), + '&:hover': { + color: 'inherit', + backgroundColor: 'inherit', }, - tab: { - minHeight: 68, - minWidth: 180, - padding: theme.spacing(1, 4), - '&:hover': { - color: 'inherit', - backgroundColor: 'inherit', - }, + }, + indicator: { + backgroundColor: theme.palette.navigation.indicator, + height: 4, + }, + tabLabel: { + display: 'flex', + alignItems: 'center', + }, + tabLabelText: { + fontSize: theme.typography.fontSize, + fontWeight: theme.typography.fontWeightBold, + }, + menuItem: { + display: 'flex', + justifyContent: 'space-between', + alignItems: 'center', + minWidth: 180, + padding: theme.spacing(2, 2), + }, + menuItemSelected: { + backgroundColor: lighten(theme.palette.background.default, 0.3), + }, +})); + +export const useAlertCardActionHeaderStyles = makeStyles(theme => + createStyles({ + root: { + paddingBottom: theme.spacing(2), + borderRadius: 'unset', }, - indicator: { - backgroundColor: theme.palette.navigation.indicator, - height: 4, - }, - tabLabel: { - display: 'flex', - alignItems: 'center', - }, - tabLabelText: { + title: { fontSize: theme.typography.fontSize, fontWeight: theme.typography.fontWeightBold, + lineHeight: 1.5, }, - menuItem: { - display: 'flex', - justifyContent: 'space-between', - alignItems: 'center', - minWidth: 180, - padding: theme.spacing(2, 2), - }, - menuItemSelected: { - backgroundColor: lighten(theme.palette.background.default, 0.3), + action: { + margin: 0, }, }), ); -export const useAlertCardActionHeaderStyles = makeStyles( - (theme: BackstageTheme) => - createStyles({ - root: { - paddingBottom: theme.spacing(2), - borderRadius: 'unset', - }, - title: { - fontSize: theme.typography.fontSize, - fontWeight: theme.typography.fontWeightBold, - lineHeight: 1.5, - }, - action: { - margin: 0, - }, - }), +export const useCostGrowthStyles = makeStyles(theme => + createStyles({ + excess: { + color: theme.palette.status.error, + }, + savings: { + color: theme.palette.status.ok, + }, + indicator: { + display: 'flex', + flexDirection: 'row', + alignItems: 'center', + justifyContent: 'flex-end', + }, + }), ); -export const useCostGrowthStyles = makeStyles( - (theme: BackstageTheme) => - createStyles({ - excess: { - color: theme.palette.status.error, - }, - savings: { - color: theme.palette.status.ok, - }, - indicator: { - display: 'flex', - flexDirection: 'row', - alignItems: 'center', - justifyContent: 'flex-end', - }, - }), -); - -export const useCostGrowthLegendStyles = makeStyles(theme => ({ +export const useCostGrowthLegendStyles = makeStyles(theme => ({ h5: { ...theme.typography.h5, fontWeight: 500, @@ -339,44 +336,43 @@ export const useCostGrowthLegendStyles = makeStyles(theme => ({ }, })); -export const useBarChartStepperStyles = makeStyles( - (theme: BackstageTheme) => - createStyles({ - paper: { - display: 'flex', - flexDirection: 'row', - justifyContent: 'space-around', - alignItems: 'center', - background: 'transparent', - padding: 8, - }, - step: { - backgroundColor: theme.palette.action.disabled, - borderRadius: '50%', - width: 9, - height: 9, - margin: '0 2px', - }, - stepActive: { - backgroundColor: theme.palette.primary.main, - }, - steps: { - display: 'flex', - flexDirection: 'row', - }, - backButton: { - position: 'absolute', - left: 0, - top: 'calc(50% - 60px)', - zIndex: 100, - }, - nextButton: { - position: 'absolute', - right: 0, - top: 'calc(50% - 60px)', - zIndex: 100, - }, - }), +export const useBarChartStepperStyles = makeStyles(theme => + createStyles({ + paper: { + display: 'flex', + flexDirection: 'row', + justifyContent: 'space-around', + alignItems: 'center', + background: 'transparent', + padding: 8, + }, + step: { + backgroundColor: theme.palette.action.disabled, + borderRadius: '50%', + width: 9, + height: 9, + margin: '0 2px', + }, + stepActive: { + backgroundColor: theme.palette.primary.main, + }, + steps: { + display: 'flex', + flexDirection: 'row', + }, + backButton: { + position: 'absolute', + left: 0, + top: 'calc(50% - 60px)', + zIndex: 100, + }, + nextButton: { + position: 'absolute', + right: 0, + top: 'calc(50% - 60px)', + zIndex: 100, + }, + }), ); export const useNavigationStyles = makeStyles( @@ -451,32 +447,30 @@ export const useTooltipStyles = makeStyles( }), ); -export const useAlertInsightsSectionStyles = makeStyles( - (theme: BackstageTheme) => - createStyles({ - button: { - backgroundColor: theme.palette.textVerySubtle, - color: theme.palette.text.primary, - }, - }), +export const useAlertInsightsSectionStyles = makeStyles(theme => + createStyles({ + button: { + backgroundColor: theme.palette.textVerySubtle, + color: theme.palette.text.primary, + }, + }), ); -export const useSelectStyles = makeStyles( - (theme: BackstageTheme) => - createStyles({ - select: { - minWidth: 200, - textAlign: 'start', - backgroundColor: theme.palette.background.paper, +export const useSelectStyles = makeStyles(theme => + createStyles({ + select: { + minWidth: 200, + textAlign: 'start', + backgroundColor: theme.palette.background.paper, + }, + menuItem: { + minWidth: 200, + padding: theme.spacing(2), + '&.compact': { + padding: theme.spacing(1, 2), }, - menuItem: { - minWidth: 200, - padding: theme.spacing(2), - '&.compact': { - padding: theme.spacing(1, 2), - }, - }, - }), + }, + }), ); export const useActionItemCardStyles = makeStyles( @@ -513,52 +507,48 @@ export const useActionItemCardStyles = makeStyles( }), ); -export const useProductInsightsCardStyles = makeStyles( - (theme: BackstageTheme) => - createStyles({ - root: { - padding: theme.spacing(2, 2, 2, 2.5), // restore backstage default padding - }, - action: { - margin: 0, // unset negative margins - }, - }), +export const useProductInsightsCardStyles = makeStyles(theme => + createStyles({ + root: { + padding: theme.spacing(2, 2, 2, 2.5), // restore backstage default padding + }, + action: { + margin: 0, // unset negative margins + }, + }), ); -export const useProductInsightsChartStyles = makeStyles( - (theme: BackstageTheme) => - createStyles({ - indicator: { - fontWeight: theme.typography.fontWeightBold, - fontSize: '1.25rem', - }, - actions: { - display: 'flex', - justifyContent: 'space-between', - alignItems: 'center', - }, - }), +export const useProductInsightsChartStyles = makeStyles(theme => + createStyles({ + indicator: { + fontWeight: theme.typography.fontWeightBold, + fontSize: '1.25rem', + }, + actions: { + display: 'flex', + justifyContent: 'space-between', + alignItems: 'center', + }, + }), ); -export const useBackdropStyles = makeStyles( - (theme: BackstageTheme) => - createStyles({ - root: { - zIndex: theme.zIndex.modal, - }, - }), +export const useBackdropStyles = makeStyles(theme => + createStyles({ + root: { + zIndex: theme.zIndex.modal, + }, + }), ); -export const useSubtleTypographyStyles = makeStyles( - (theme: BackstageTheme) => - createStyles({ - root: { - color: theme.palette.textSubtle, - }, - }), +export const useSubtleTypographyStyles = makeStyles(theme => + createStyles({ + root: { + color: theme.palette.textSubtle, + }, + }), ); -export const useEntityDialogStyles = makeStyles(theme => +export const useEntityDialogStyles = makeStyles(theme => createStyles({ dialogContent: { padding: 0, @@ -597,7 +587,7 @@ export const useEntityDialogStyles = makeStyles(theme => }), ); -export const useAlertDialogStyles = makeStyles((theme: BackstageTheme) => +export const useAlertDialogStyles = makeStyles(theme => createStyles({ content: { padding: theme.spacing(0, 5, 2, 5), diff --git a/plugins/explore/src/components/GroupsExplorerContent/GroupsDiagram.tsx b/plugins/explore/src/components/GroupsExplorerContent/GroupsDiagram.tsx index 2c8f6f6a6e..ea989c2834 100644 --- a/plugins/explore/src/components/GroupsExplorerContent/GroupsDiagram.tsx +++ b/plugins/explore/src/components/GroupsExplorerContent/GroupsDiagram.tsx @@ -34,7 +34,6 @@ import { humanizeEntityRef, getEntityRelations, } from '@backstage/plugin-catalog-react'; -import { BackstageTheme } from '@backstage/theme'; import { makeStyles, Typography, useTheme } from '@material-ui/core'; import ZoomOutMap from '@material-ui/icons/ZoomOutMap'; import classNames from 'classnames'; @@ -42,7 +41,7 @@ import React from 'react'; import useAsync from 'react-use/lib/useAsync'; const useStyles = makeStyles( - (theme: BackstageTheme) => ({ + theme => ({ graph: { minHeight: '100%', flex: 1, diff --git a/plugins/gcalendar/src/components/CalendarCard/AttendeeChip.tsx b/plugins/gcalendar/src/components/CalendarCard/AttendeeChip.tsx index 4e36eff55a..9008f263bf 100644 --- a/plugins/gcalendar/src/components/CalendarCard/AttendeeChip.tsx +++ b/plugins/gcalendar/src/components/CalendarCard/AttendeeChip.tsx @@ -13,17 +13,14 @@ * See the License for the specific language governing permissions and * limitations under the License. */ + import React from 'react'; - -import { BackstageTheme } from '@backstage/theme'; - import { Badge, Chip, makeStyles } from '@material-ui/core'; import CancelIcon from '@material-ui/icons/Cancel'; import CheckIcon from '@material-ui/icons/CheckCircle'; - import { EventAttendee, ResponseStatus } from '../../api'; -const useStyles = makeStyles((theme: BackstageTheme) => { +const useStyles = makeStyles(theme => { const getIconColor = (responseStatus?: string) => { if (!responseStatus) return theme.palette.primary.light; diff --git a/plugins/microsoft-calendar/src/components/AttendeeChip.tsx b/plugins/microsoft-calendar/src/components/AttendeeChip.tsx index b3b5b98301..25358519e6 100644 --- a/plugins/microsoft-calendar/src/components/AttendeeChip.tsx +++ b/plugins/microsoft-calendar/src/components/AttendeeChip.tsx @@ -13,17 +13,14 @@ * See the License for the specific language governing permissions and * limitations under the License. */ + import React from 'react'; - -import { BackstageTheme } from '@backstage/theme'; - import { Badge, Chip, makeStyles } from '@material-ui/core'; import CancelIcon from '@material-ui/icons/Cancel'; import CheckIcon from '@material-ui/icons/CheckCircle'; - import { Attendee, ResponseStatusMap } from '../api'; -const useStyles = makeStyles((theme: BackstageTheme) => { +const useStyles = makeStyles(theme => { const getIconColor = (responseStatus?: string) => { if (!responseStatus) return theme.palette.primary.light; diff --git a/plugins/org-react/src/components/GroupListPicker/GroupListPickerButton.tsx b/plugins/org-react/src/components/GroupListPicker/GroupListPickerButton.tsx index 01ffe7e58b..f4255a18be 100644 --- a/plugins/org-react/src/components/GroupListPicker/GroupListPickerButton.tsx +++ b/plugins/org-react/src/components/GroupListPicker/GroupListPickerButton.tsx @@ -15,12 +15,11 @@ */ import React from 'react'; -import { BackstageTheme } from '@backstage/theme'; import { makeStyles, Typography, Button } from '@material-ui/core'; import KeyboardArrowDownIcon from '@material-ui/icons/KeyboardArrowDown'; import PeopleIcon from '@material-ui/icons/People'; -const useStyles = makeStyles((theme: BackstageTheme) => ({ +const useStyles = makeStyles(theme => ({ btn: { padding: '10px', width: '100%', diff --git a/plugins/org/src/components/Cards/OwnershipCard/ComponentsGrid.tsx b/plugins/org/src/components/Cards/OwnershipCard/ComponentsGrid.tsx index 2725991d0d..cffed95c7a 100644 --- a/plugins/org/src/components/Cards/OwnershipCard/ComponentsGrid.tsx +++ b/plugins/org/src/components/Cards/OwnershipCard/ComponentsGrid.tsx @@ -22,7 +22,6 @@ import { ResponseErrorPanel, } from '@backstage/core-components'; import { useRouteRef } from '@backstage/core-plugin-api'; -import { BackstageTheme } from '@backstage/theme'; import { Box, createStyles, @@ -36,7 +35,7 @@ import { catalogIndexRouteRef } from '../../../routes'; import { useGetEntities } from './useGetEntities'; import { EntityRelationAggregation } from './types'; -const useStyles = makeStyles((theme: BackstageTheme) => +const useStyles = makeStyles(theme => createStyles({ card: { border: `1px solid ${theme.palette.divider}`, diff --git a/plugins/playlist/src/components/PlaylistCard/PlaylistCard.tsx b/plugins/playlist/src/components/PlaylistCard/PlaylistCard.tsx index 1bf698f6be..1408607133 100644 --- a/plugins/playlist/src/components/PlaylistCard/PlaylistCard.tsx +++ b/plugins/playlist/src/components/PlaylistCard/PlaylistCard.tsx @@ -22,7 +22,6 @@ import { import { useRouteRef } from '@backstage/core-plugin-api'; import { EntityRefLinks } from '@backstage/plugin-catalog-react'; import { Playlist } from '@backstage/plugin-playlist-common'; -import { BackstageTheme } from '@backstage/theme'; import { Box, Card, @@ -36,10 +35,9 @@ import { } from '@material-ui/core'; import LockIcon from '@material-ui/icons/Lock'; import React from 'react'; - import { playlistRouteRef } from '../../routes'; -const useStyles = makeStyles((theme: BackstageTheme) => ({ +const useStyles = makeStyles(theme => ({ cardHeader: { position: 'relative', }, diff --git a/plugins/scaffolder-react/src/next/components/ScaffolderPageContextMenu/ScaffolderPageContextMenu.tsx b/plugins/scaffolder-react/src/next/components/ScaffolderPageContextMenu/ScaffolderPageContextMenu.tsx index 7ccbe4ef8d..8326b361e1 100644 --- a/plugins/scaffolder-react/src/next/components/ScaffolderPageContextMenu/ScaffolderPageContextMenu.tsx +++ b/plugins/scaffolder-react/src/next/components/ScaffolderPageContextMenu/ScaffolderPageContextMenu.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import { BackstageTheme } from '@backstage/theme'; import IconButton from '@material-ui/core/IconButton'; import ListItemIcon from '@material-ui/core/ListItemIcon'; import ListItemText from '@material-ui/core/ListItemText'; @@ -28,7 +27,7 @@ import List from '@material-ui/icons/List'; import MoreVert from '@material-ui/icons/MoreVert'; import React, { useState } from 'react'; -const useStyles = makeStyles((theme: BackstageTheme) => ({ +const useStyles = makeStyles(theme => ({ button: { color: theme.page.fontColor, }, diff --git a/plugins/scaffolder-react/src/next/components/TaskSteps/StepIcon.tsx b/plugins/scaffolder-react/src/next/components/TaskSteps/StepIcon.tsx index cecf682596..58f2eb9050 100644 --- a/plugins/scaffolder-react/src/next/components/TaskSteps/StepIcon.tsx +++ b/plugins/scaffolder-react/src/next/components/TaskSteps/StepIcon.tsx @@ -13,9 +13,8 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import React from 'react'; -import { BackstageTheme } from '@backstage/theme'; +import React from 'react'; import { CircularProgress, makeStyles, StepIconProps } from '@material-ui/core'; import RemoveCircleOutline from '@material-ui/icons/RemoveCircleOutline'; import PanoramaFishEyeIcon from '@material-ui/icons/PanoramaFishEye'; @@ -23,7 +22,7 @@ import classNames from 'classnames'; import CheckCircleOutline from '@material-ui/icons/CheckCircleOutline'; import ErrorOutline from '@material-ui/icons/ErrorOutline'; -const useStepIconStyles = makeStyles((theme: BackstageTheme) => ({ +const useStepIconStyles = makeStyles(theme => ({ root: { color: theme.palette.text.disabled, }, diff --git a/plugins/scaffolder-react/src/next/components/TaskSteps/TaskBorder.tsx b/plugins/scaffolder-react/src/next/components/TaskSteps/TaskBorder.tsx index 2d8e99bfe7..d7a96e3864 100644 --- a/plugins/scaffolder-react/src/next/components/TaskSteps/TaskBorder.tsx +++ b/plugins/scaffolder-react/src/next/components/TaskSteps/TaskBorder.tsx @@ -13,11 +13,11 @@ * See the License for the specific language governing permissions and * limitations under the License. */ + import React from 'react'; import { LinearProgress, makeStyles } from '@material-ui/core'; -import { BackstageTheme } from '@backstage/theme'; -const useStyles = makeStyles((theme: BackstageTheme) => ({ +const useStyles = makeStyles(theme => ({ failed: { backgroundColor: theme.palette.error.main, }, diff --git a/plugins/scaffolder/src/legacy/TaskPage/TaskPage.tsx b/plugins/scaffolder/src/legacy/TaskPage/TaskPage.tsx index e2165ed358..affb9a31b7 100644 --- a/plugins/scaffolder/src/legacy/TaskPage/TaskPage.tsx +++ b/plugins/scaffolder/src/legacy/TaskPage/TaskPage.tsx @@ -28,7 +28,6 @@ import { useRouteRef, useRouteRefParams, } from '@backstage/core-plugin-api'; -import { BackstageTheme } from '@backstage/theme'; import { Button, CircularProgress, @@ -125,7 +124,7 @@ const StepTimeTicker = ({ step }: { step: TaskStep }) => { return {time}; }; -const useStepIconStyles = makeStyles((theme: BackstageTheme) => +const useStepIconStyles = makeStyles(theme => createStyles({ root: { color: theme.palette.text.disabled, diff --git a/plugins/scaffolder/src/next/TemplateEditorPage/DryRunResults/DryRunResults.tsx b/plugins/scaffolder/src/next/TemplateEditorPage/DryRunResults/DryRunResults.tsx index ae9374438f..9319f5e836 100644 --- a/plugins/scaffolder/src/next/TemplateEditorPage/DryRunResults/DryRunResults.tsx +++ b/plugins/scaffolder/src/next/TemplateEditorPage/DryRunResults/DryRunResults.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import { BackstageTheme } from '@backstage/theme'; import Accordion from '@material-ui/core/Accordion'; import AccordionDetails from '@material-ui/core/AccordionDetails'; import AccordionSummary from '@material-ui/core/AccordionSummary'; @@ -28,7 +27,7 @@ import { useDryRun } from '../DryRunContext'; import { DryRunResultsList } from './DryRunResultsList'; import { DryRunResultsView } from './DryRunResultsView'; -const useStyles = makeStyles((theme: BackstageTheme) => ({ +const useStyles = makeStyles(theme => ({ header: { height: 48, minHeight: 0, diff --git a/plugins/scaffolder/src/next/TemplateEditorPage/DryRunResults/DryRunResultsList.tsx b/plugins/scaffolder/src/next/TemplateEditorPage/DryRunResults/DryRunResultsList.tsx index df6e8ef5f2..38cc3f1762 100644 --- a/plugins/scaffolder/src/next/TemplateEditorPage/DryRunResults/DryRunResultsList.tsx +++ b/plugins/scaffolder/src/next/TemplateEditorPage/DryRunResults/DryRunResultsList.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import { BackstageTheme } from '@backstage/theme'; import IconButton from '@material-ui/core/IconButton'; import List from '@material-ui/core/List'; import ListItem from '@material-ui/core/ListItem'; @@ -30,7 +29,7 @@ import React from 'react'; import { useDryRun } from '../DryRunContext'; import { downloadBlob } from '../../../lib/download'; -const useStyles = makeStyles((theme: BackstageTheme) => ({ +const useStyles = makeStyles(theme => ({ root: { overflowY: 'auto', background: theme.palette.background.default, diff --git a/plugins/search/src/components/SearchType/SearchType.Tabs.tsx b/plugins/search/src/components/SearchType/SearchType.Tabs.tsx index 57a311b00c..5b3990f7bb 100644 --- a/plugins/search/src/components/SearchType/SearchType.Tabs.tsx +++ b/plugins/search/src/components/SearchType/SearchType.Tabs.tsx @@ -16,10 +16,9 @@ import React, { useEffect } from 'react'; import { useSearch } from '@backstage/plugin-search-react'; -import { BackstageTheme } from '@backstage/theme'; import { makeStyles, Tab, Tabs } from '@material-ui/core'; -const useStyles = makeStyles((theme: BackstageTheme) => ({ +const useStyles = makeStyles(theme => ({ tabs: { borderBottom: `1px solid ${theme.palette.textVerySubtle}`, }, diff --git a/plugins/sonarqube/src/components/SonarQubeCard/Percentage.tsx b/plugins/sonarqube/src/components/SonarQubeCard/Percentage.tsx index 406817de4b..efc19d4bf5 100644 --- a/plugins/sonarqube/src/components/SonarQubeCard/Percentage.tsx +++ b/plugins/sonarqube/src/components/SonarQubeCard/Percentage.tsx @@ -14,13 +14,12 @@ * limitations under the License. */ -import { BackstageTheme } from '@backstage/theme'; import { makeStyles } from '@material-ui/core/styles'; import { useTheme } from '@material-ui/core'; import { Circle } from 'rc-progress'; import React from 'react'; -const useStyles = makeStyles((theme: BackstageTheme) => ({ +const useStyles = makeStyles(theme => ({ root: { height: theme.spacing(3), width: theme.spacing(3), @@ -29,7 +28,7 @@ const useStyles = makeStyles((theme: BackstageTheme) => ({ export const Percentage = ({ value }: { value?: string }) => { const classes = useStyles(); - const theme = useTheme(); + const theme = useTheme(); return ( { +const useStyles = makeStyles(theme => { const commonCardRating: CSSProperties = { height: theme.spacing(3), width: theme.spacing(3), diff --git a/plugins/sonarqube/src/components/SonarQubeCard/Value.tsx b/plugins/sonarqube/src/components/SonarQubeCard/Value.tsx index 2f136cc5fe..af1b5059ba 100644 --- a/plugins/sonarqube/src/components/SonarQubeCard/Value.tsx +++ b/plugins/sonarqube/src/components/SonarQubeCard/Value.tsx @@ -14,12 +14,11 @@ * limitations under the License. */ -import { BackstageTheme } from '@backstage/theme'; import { makeStyles } from '@material-ui/core/styles'; import Typography from '@material-ui/core/Typography'; import React from 'react'; -const useStyles = makeStyles((theme: BackstageTheme) => { +const useStyles = makeStyles(theme => { return { value: { fontSize: '1.5rem', diff --git a/plugins/tech-insights/src/components/ScorecardsInfo/ScorecardInfo.tsx b/plugins/tech-insights/src/components/ScorecardsInfo/ScorecardInfo.tsx index 8002784c9e..cfff074368 100644 --- a/plugins/tech-insights/src/components/ScorecardsInfo/ScorecardInfo.tsx +++ b/plugins/tech-insights/src/components/ScorecardsInfo/ScorecardInfo.tsx @@ -18,11 +18,10 @@ import React from 'react'; import { makeStyles, Grid, Typography } from '@material-ui/core'; import { InfoCard } from '@backstage/core-components'; import { CheckResult } from '@backstage/plugin-tech-insights-common'; -import { BackstageTheme } from '@backstage/theme'; import { Alert } from '@material-ui/lab'; import { ScorecardsList } from '../ScorecardsList'; -const useStyles = makeStyles((theme: BackstageTheme) => ({ +const useStyles = makeStyles(theme => ({ subheader: { fontWeight: 'bold', paddingLeft: theme.spacing(0.5), diff --git a/plugins/tech-insights/src/components/ScorecardsList/ScorecardsList.tsx b/plugins/tech-insights/src/components/ScorecardsList/ScorecardsList.tsx index e8e57b0afe..1a9d04a9de 100644 --- a/plugins/tech-insights/src/components/ScorecardsList/ScorecardsList.tsx +++ b/plugins/tech-insights/src/components/ScorecardsList/ScorecardsList.tsx @@ -19,11 +19,10 @@ import { useApi } from '@backstage/core-plugin-api'; import { makeStyles, List, ListItem, ListItemText } from '@material-ui/core'; import { techInsightsApiRef } from '../../api'; import { CheckResult } from '@backstage/plugin-tech-insights-common'; -import { BackstageTheme } from '@backstage/theme'; import { Alert } from '@material-ui/lab'; import { MarkdownContent } from '@backstage/core-components'; -const useStyles = makeStyles((theme: BackstageTheme) => ({ +const useStyles = makeStyles(theme => ({ listItemText: { paddingRight: theme.spacing(0.5), }, diff --git a/plugins/techdocs-module-addons-contrib/src/TextSize/TextSize.tsx b/plugins/techdocs-module-addons-contrib/src/TextSize/TextSize.tsx index fc865c7826..50cc59b814 100644 --- a/plugins/techdocs-module-addons-contrib/src/TextSize/TextSize.tsx +++ b/plugins/techdocs-module-addons-contrib/src/TextSize/TextSize.tsx @@ -33,11 +33,11 @@ import { Slider, IconButton, Typography, + Theme, } from '@material-ui/core'; import AddIcon from '@material-ui/icons/Add'; import RemoveIcon from '@material-ui/icons/Remove'; -import { BackstageTheme } from '@backstage/theme'; import { useShadowRootElements } from '@backstage/plugin-techdocs-react'; const boxShadow = @@ -116,7 +116,7 @@ const marks = [ }, ]; -const useStyles = makeStyles((theme: BackstageTheme) => ({ +const useStyles = makeStyles(theme => ({ container: { color: theme.palette.textSubtle, display: 'flex', @@ -139,7 +139,7 @@ const useStyles = makeStyles((theme: BackstageTheme) => ({ export const TextSizeAddon = () => { const classes = useStyles(); - const theme = useTheme(); + const theme = useTheme(); const [body] = useShadowRootElements(['body']); const [value, setValue] = useState(() => { @@ -182,7 +182,7 @@ export const TextSizeAddon = () => { if (!body) return; const htmlFontSize = ( - theme.typography as BackstageTheme['typography'] & { + theme.typography as Theme['typography'] & { htmlFontSize?: number; } )?.htmlFontSize ?? 16; diff --git a/plugins/xcmetrics/src/components/Accordion/Accordion.tsx b/plugins/xcmetrics/src/components/Accordion/Accordion.tsx index 2e2100a816..5c418de496 100644 --- a/plugins/xcmetrics/src/components/Accordion/Accordion.tsx +++ b/plugins/xcmetrics/src/components/Accordion/Accordion.tsx @@ -13,6 +13,7 @@ * See the License for the specific language governing permissions and * limitations under the License. */ + import { Accordion as MuiAccordion, AccordionSummary as MuiAccordionSummary, @@ -23,9 +24,8 @@ import { } from '@material-ui/core'; import React, { PropsWithChildren } from 'react'; import ExpandMoreIcon from '@material-ui/icons/ExpandMore'; -import { BackstageTheme } from '@backstage/theme'; -const useStyles = makeStyles((theme: BackstageTheme) => +const useStyles = makeStyles(theme => createStyles({ heading: { flexBasis: '33.33%', diff --git a/plugins/xcmetrics/src/components/BuildDetails/BuildDetails.tsx b/plugins/xcmetrics/src/components/BuildDetails/BuildDetails.tsx index 949f430ce2..86db3be858 100644 --- a/plugins/xcmetrics/src/components/BuildDetails/BuildDetails.tsx +++ b/plugins/xcmetrics/src/components/BuildDetails/BuildDetails.tsx @@ -13,6 +13,7 @@ * See the License for the specific language governing permissions and * limitations under the License. */ + import { createStyles, Divider, Grid, makeStyles } from '@material-ui/core'; import React from 'react'; import { BuildResponse, xcmetricsApiRef } from '../../api'; @@ -22,12 +23,11 @@ import useAsync from 'react-use/lib/useAsync'; import { useApi } from '@backstage/core-plugin-api'; import { formatDuration, formatStatus, formatTime } from '../../utils'; import { StatusIcon } from '../StatusIcon'; -import { BackstageTheme } from '@backstage/theme'; import { Accordion } from '../Accordion'; import { BuildTimeline } from '../BuildTimeline'; import { PreformattedText } from '../PreformattedText'; -const useStyles = makeStyles((theme: BackstageTheme) => +const useStyles = makeStyles(theme => createStyles({ divider: { marginTop: theme.spacing(2), diff --git a/plugins/xcmetrics/src/components/BuildList/BuildList.tsx b/plugins/xcmetrics/src/components/BuildList/BuildList.tsx index 20924b181b..85eee6009d 100644 --- a/plugins/xcmetrics/src/components/BuildList/BuildList.tsx +++ b/plugins/xcmetrics/src/components/BuildList/BuildList.tsx @@ -13,6 +13,7 @@ * See the License for the specific language governing permissions and * limitations under the License. */ + import React, { useRef, useState } from 'react'; import { Table } from '@backstage/core-components'; import { useApi } from '@backstage/core-plugin-api'; @@ -22,9 +23,8 @@ import { BuildListFilter as Filters } from '../BuildListFilter'; import { DateTime } from 'luxon'; import { buildPageColumns } from '../BuildTableColumns'; import { BuildDetails, withRequest } from '../BuildDetails'; -import { BackstageTheme } from '@backstage/theme'; -const useStyles = makeStyles((theme: BackstageTheme) => +const useStyles = makeStyles(theme => createStyles({ detailPanel: { padding: theme.spacing(2), diff --git a/plugins/xcmetrics/src/components/BuildTimeline/BuildTimeline.tsx b/plugins/xcmetrics/src/components/BuildTimeline/BuildTimeline.tsx index 54d84ff6c6..5c0a1b1e67 100644 --- a/plugins/xcmetrics/src/components/BuildTimeline/BuildTimeline.tsx +++ b/plugins/xcmetrics/src/components/BuildTimeline/BuildTimeline.tsx @@ -27,13 +27,12 @@ import { XAxis, YAxis, } from 'recharts'; -import { BackstageTheme } from '@backstage/theme'; import { Target } from '../../api'; import { formatSecondsInterval, formatPercentage } from '../../utils'; const EMPTY_HEIGHT = 100; -const useStyles = makeStyles((theme: BackstageTheme) => +const useStyles = makeStyles(theme => createStyles({ toolTip: { backgroundColor: theme.palette.background.paper, diff --git a/plugins/xcmetrics/src/components/PreformattedText/PreformattedText.tsx b/plugins/xcmetrics/src/components/PreformattedText/PreformattedText.tsx index c2c3f8ce25..2b6a77cc9d 100644 --- a/plugins/xcmetrics/src/components/PreformattedText/PreformattedText.tsx +++ b/plugins/xcmetrics/src/components/PreformattedText/PreformattedText.tsx @@ -26,10 +26,9 @@ import { } from '@material-ui/core'; import CloseIcon from '@material-ui/icons/Close'; import React, { useState } from 'react'; -import { BackstageTheme } from '@backstage/theme'; import { cn } from '../../utils'; -const useStyles = makeStyles((theme: BackstageTheme) => +const useStyles = makeStyles(theme => createStyles({ pre: { whiteSpace: 'pre-line',