From c48ff747950e650aec9bfdfe78ff9ee21c38fdaf Mon Sep 17 00:00:00 2001 From: Patrik Oldsberg Date: Fri, 30 Dec 2022 14:47:36 +0100 Subject: [PATCH 01/55] theme: namespace MUI v4 methods and types Signed-off-by: Patrik Oldsberg --- packages/theme/api-report.md | 40 ++++++--- packages/theme/src/index.ts | 40 +++++++-- packages/theme/src/types.ts | 65 +------------- packages/theme/src/{ => v4}/baseTheme.ts | 23 +++-- packages/theme/src/v4/index.ts | 30 +++++++ packages/theme/src/{ => v4}/pageTheme.ts | 3 +- packages/theme/src/{ => v4}/themes.ts | 6 +- packages/theme/src/v4/types.ts | 105 +++++++++++++++++++++++ 8 files changed, 212 insertions(+), 100 deletions(-) rename packages/theme/src/{ => v4}/baseTheme.ts (93%) create mode 100644 packages/theme/src/v4/index.ts rename packages/theme/src/{ => v4}/pageTheme.ts (99%) rename packages/theme/src/{ => v4}/themes.ts (96%) create mode 100644 packages/theme/src/v4/types.ts diff --git a/packages/theme/api-report.md b/packages/theme/api-report.md index 863ab81b68..c61245e0e2 100644 --- a/packages/theme/api-report.md +++ b/packages/theme/api-report.md @@ -9,7 +9,7 @@ import { PaletteOptions } from '@material-ui/core/styles/createPalette'; import { Theme } from '@material-ui/core'; import { ThemeOptions } from '@material-ui/core'; -// @public +// @public @deprecated export type BackstagePalette = Palette & BackstagePaletteAdditions; // @public @@ -75,11 +75,11 @@ export type BackstagePaletteAdditions = { }; }; -// @public +// @public @deprecated export type BackstagePaletteOptions = PaletteOptions & BackstagePaletteAdditions; -// @public +// @public @deprecated export interface BackstageTheme extends Theme { // (undocumented) getPageTheme: (selector: PageThemeSelector) => PageTheme; @@ -89,7 +89,7 @@ export interface BackstageTheme extends Theme { palette: BackstagePalette; } -// @public +// @public @deprecated export interface BackstageThemeOptions extends ThemeOptions { // (undocumented) getPageTheme: (selector: PageThemeSelector) => PageTheme; @@ -102,19 +102,28 @@ export interface BackstageThemeOptions extends ThemeOptions { // @public export const colorVariants: Record; -// @public -export function createTheme(options: SimpleThemeOptions): BackstageTheme; +// @public @deprecated (undocumented) +export const createTheme: typeof createV4Theme; + +// @public @deprecated (undocumented) +export const createThemeOptions: typeof createV4ThemeOptions; + +// @public @deprecated (undocumented) +export const createThemeOverrides: typeof createV4ThemeOverrides; // @public -export function createThemeOptions( - options: SimpleThemeOptions, -): BackstageThemeOptions; +export function createV4Theme(options: SimpleV4ThemeOptions): Theme; // @public -export function createThemeOverrides(theme: BackstageTheme): Overrides; +export function createV4ThemeOptions( + options: SimpleV4ThemeOptions, +): ThemeOptions; // @public -export const darkTheme: BackstageTheme; +export function createV4ThemeOverrides(theme: Theme): Overrides; + +// @public +export const darkTheme: Theme; // @public export function genPageTheme(props: { @@ -126,7 +135,7 @@ export function genPageTheme(props: { }): PageTheme; // @public -export const lightTheme: BackstageTheme; +export const lightTheme: Theme; // @public export type PageTheme = { @@ -147,9 +156,12 @@ export type PageThemeSelector = { // @public export const shapes: Record; +// @public @deprecated (undocumented) +export type SimpleThemeOptions = SimpleV4ThemeOptions; + // @public -export type SimpleThemeOptions = { - palette: BackstagePaletteOptions; +export type SimpleV4ThemeOptions = { + palette: PaletteOptions; defaultPageTheme: string; pageTheme?: Record; fontFamily?: string; diff --git a/packages/theme/src/index.ts b/packages/theme/src/index.ts index 41f827bf43..33b5c9a697 100644 --- a/packages/theme/src/index.ts +++ b/packages/theme/src/index.ts @@ -1,5 +1,5 @@ /* - * Copyright 2020 The Backstage Authors + * Copyright 2022 The Backstage Authors * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. @@ -20,7 +20,37 @@ * @packageDocumentation */ -export * from './themes'; -export * from './baseTheme'; -export * from './types'; -export * from './pageTheme'; +export * from './v4'; +export type { + BackstagePaletteAdditions, + PageTheme, + PageThemeSelector, +} from './types'; + +import { + createV4Theme, + createV4ThemeOptions, + createV4ThemeOverrides, +} from './v4'; +import type { SimpleV4ThemeOptions } from './v4'; + +/** + * @public + * @deprecated Use {@link createV4Theme} instead. + */ +export const createTheme = createV4Theme; +/** + * @public + * @deprecated Use {@link createV4ThemeOptions} instead. + */ +export const createThemeOptions = createV4ThemeOptions; +/** + * @public + * @deprecated Use {@link createV4ThemeOverrides} instead. + */ +export const createThemeOverrides = createV4ThemeOverrides; +/** + * @public + * @deprecated Use {@link SimpleV4ThemeOptions} instead. + */ +export type SimpleThemeOptions = SimpleV4ThemeOptions; diff --git a/packages/theme/src/types.ts b/packages/theme/src/types.ts index 0295e491f1..143ccbabaa 100644 --- a/packages/theme/src/types.ts +++ b/packages/theme/src/types.ts @@ -1,5 +1,5 @@ /* - * Copyright 2020 The Backstage Authors + * Copyright 2022 The Backstage Authors * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. @@ -14,12 +14,6 @@ * limitations under the License. */ -import { Theme, ThemeOptions } from '@material-ui/core'; -import { - PaletteOptions, - Palette, -} from '@material-ui/core/styles/createPalette'; - /** * Backstage specific additions to the material-ui palette. * @@ -90,21 +84,6 @@ export type BackstagePaletteAdditions = { }; }; -/** - * The full Backstage palette. - * - * @public - */ -export type BackstagePalette = Palette & BackstagePaletteAdditions; - -/** - * The full Backstage palette options. - * - * @public - */ -export type BackstagePaletteOptions = PaletteOptions & - BackstagePaletteAdditions; - /** * Selector for what page theme to use. * @@ -114,48 +93,6 @@ export type PageThemeSelector = { themeId: string; }; -/** - * A Backstage theme. - * - * @public - */ -export interface BackstageTheme extends Theme { - palette: BackstagePalette; - page: PageTheme; - getPageTheme: (selector: PageThemeSelector) => PageTheme; -} - -/** - * Backstage theme options. - * - * @public - * @remarks - * - * This is essentially a partial theme definition made by the user, that then - * gets merged together with defaults and other values to form the final - * {@link BackstageTheme}. - * - */ -export interface BackstageThemeOptions extends ThemeOptions { - palette: BackstagePaletteOptions; - page: PageTheme; - getPageTheme: (selector: PageThemeSelector) => PageTheme; -} - -/** - * A simpler configuration for creating a new theme that just tweaks some parts - * of the backstage one. - * - * @public - */ -export type SimpleThemeOptions = { - palette: BackstagePaletteOptions; - defaultPageTheme: string; - pageTheme?: Record; - fontFamily?: string; - htmlFontSize?: number; -}; - /** * The theme definitions for a given layout page. * diff --git a/packages/theme/src/baseTheme.ts b/packages/theme/src/v4/baseTheme.ts similarity index 93% rename from packages/theme/src/baseTheme.ts rename to packages/theme/src/v4/baseTheme.ts index c0a9022bd0..b326018e87 100644 --- a/packages/theme/src/baseTheme.ts +++ b/packages/theme/src/v4/baseTheme.ts @@ -15,14 +15,11 @@ */ import { createTheme as createMuiTheme } from '@material-ui/core/styles'; +import { Theme, ThemeOptions } from '@material-ui/core'; import { darken, lighten } from '@material-ui/core/styles/colorManipulator'; import { Overrides } from '@material-ui/core/styles/overrides'; -import { - BackstageTheme, - BackstageThemeOptions, - SimpleThemeOptions, -} from './types'; import { pageTheme as defaultPageThemes } from './pageTheme'; +import { SimpleV4ThemeOptions } from './types'; const DEFAULT_HTML_FONT_SIZE = 16; const DEFAULT_FONT_FAMILY = @@ -33,9 +30,9 @@ const DEFAULT_FONT_FAMILY = * * @public */ -export function createThemeOptions( - options: SimpleThemeOptions, -): BackstageThemeOptions { +export function createV4ThemeOptions( + options: SimpleV4ThemeOptions, +): ThemeOptions { const { palette, htmlFontSize = DEFAULT_HTML_FONT_SIZE, @@ -103,7 +100,7 @@ export function createThemeOptions( * * @public */ -export function createThemeOverrides(theme: BackstageTheme): Overrides { +export function createV4ThemeOverrides(theme: Theme): Overrides { return { MuiCssBaseline: { '@global': { @@ -291,10 +288,10 @@ export function createThemeOverrides(theme: BackstageTheme): Overrides { * * @public */ -export function createTheme(options: SimpleThemeOptions): BackstageTheme { - const themeOptions = createThemeOptions(options); - const baseTheme = createMuiTheme(themeOptions) as BackstageTheme; - const overrides = createThemeOverrides(baseTheme); +export function createV4Theme(options: SimpleV4ThemeOptions): Theme { + const themeOptions = createV4ThemeOptions(options); + const baseTheme = createMuiTheme(themeOptions); + const overrides = createV4ThemeOverrides(baseTheme); const theme = { ...baseTheme, overrides }; return theme; } diff --git a/packages/theme/src/v4/index.ts b/packages/theme/src/v4/index.ts new file mode 100644 index 0000000000..f897070f0e --- /dev/null +++ b/packages/theme/src/v4/index.ts @@ -0,0 +1,30 @@ +/* + * Copyright 2020 The Backstage Authors + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +export { darkTheme, lightTheme } from './themes'; +export { + createV4Theme, + createV4ThemeOptions, + createV4ThemeOverrides, +} from './baseTheme'; +export type { + BackstagePalette, + BackstagePaletteOptions, + BackstageTheme, + BackstageThemeOptions, + SimpleV4ThemeOptions, +} from './types'; +export { colorVariants, genPageTheme, pageTheme, shapes } from './pageTheme'; diff --git a/packages/theme/src/pageTheme.ts b/packages/theme/src/v4/pageTheme.ts similarity index 99% rename from packages/theme/src/pageTheme.ts rename to packages/theme/src/v4/pageTheme.ts index dd36d7641b..93eb2be0e3 100644 --- a/packages/theme/src/pageTheme.ts +++ b/packages/theme/src/v4/pageTheme.ts @@ -13,7 +13,8 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import { PageTheme } from './types'; + +import { PageTheme } from '../types'; /** * The default predefined burst shapes. diff --git a/packages/theme/src/themes.ts b/packages/theme/src/v4/themes.ts similarity index 96% rename from packages/theme/src/themes.ts rename to packages/theme/src/v4/themes.ts index 23438a1c14..9432aa2b57 100644 --- a/packages/theme/src/themes.ts +++ b/packages/theme/src/v4/themes.ts @@ -14,7 +14,7 @@ * limitations under the License. */ -import { createTheme } from './baseTheme'; +import { createV4Theme } from './baseTheme'; import { pageTheme } from './pageTheme'; import { yellow } from '@material-ui/core/colors'; @@ -23,7 +23,7 @@ import { yellow } from '@material-ui/core/colors'; * * @public */ -export const lightTheme = createTheme({ +export const lightTheme = createV4Theme({ palette: { type: 'light', background: { @@ -101,7 +101,7 @@ export const lightTheme = createTheme({ * * @public */ -export const darkTheme = createTheme({ +export const darkTheme = createV4Theme({ palette: { type: 'dark', background: { diff --git a/packages/theme/src/v4/types.ts b/packages/theme/src/v4/types.ts new file mode 100644 index 0000000000..7a292fe0a1 --- /dev/null +++ b/packages/theme/src/v4/types.ts @@ -0,0 +1,105 @@ +/* + * Copyright 2020 The Backstage Authors + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import { Theme, ThemeOptions } from '@material-ui/core'; +import { + PaletteOptions, + Palette, +} from '@material-ui/core/styles/createPalette'; +import { + BackstagePaletteAdditions, + PageTheme, + PageThemeSelector, +} from '../types'; + +/** + * The full Backstage palette. + * + * @public + * @deprecated This type is deprecated, the MUI Palette type is now always extended instead. + */ +export type BackstagePalette = Palette & BackstagePaletteAdditions; + +/** + * The full Backstage palette options. + * + * @public + * @deprecated This type is deprecated, the MUI PaletteOptions type is now always extended instead. + */ +export type BackstagePaletteOptions = PaletteOptions & + BackstagePaletteAdditions; + +/** + * Backstage theme options. + * + * @public + * @deprecated This type is deprecated, the MUI ThemeOptions type is now always extended instead. + * @remarks + * + * This is essentially a partial theme definition made by the user, that then + * gets merged together with defaults and other values to form the final + * {@link BackstageTheme}. + * + */ +export interface BackstageThemeOptions extends ThemeOptions { + palette: BackstagePaletteOptions; + page: PageTheme; + getPageTheme: (selector: PageThemeSelector) => PageTheme; +} + +/** + * A Backstage theme. + * + * @public + * @deprecated This type is deprecated, the MUI Theme type is now always extended instead. + */ +export interface BackstageTheme extends Theme { + palette: BackstagePalette; + page: PageTheme; + getPageTheme: (selector: PageThemeSelector) => PageTheme; +} + +/** + * A simpler configuration for creating a new theme that just tweaks some parts + * of the backstage one. + * + * @public + */ +export type SimpleV4ThemeOptions = { + palette: PaletteOptions; + defaultPageTheme: string; + pageTheme?: Record; + fontFamily?: string; + htmlFontSize?: number; +}; + +declare module '@material-ui/core/styles/createPalette' { + interface Palette extends BackstagePaletteAdditions {} + + interface PaletteOptions extends BackstagePaletteAdditions {} +} + +declare module '@material-ui/core/styles/createTheme' { + interface Theme { + page: PageTheme; + getPageTheme: (selector: PageThemeSelector) => PageTheme; + } + + interface ThemeOptions { + page: PageTheme; + getPageTheme: (selector: PageThemeSelector) => PageTheme; + } +} From 91ea8e83433aa79c9f7df2eb69e3e4f8cfafcc1a Mon Sep 17 00:00:00 2001 From: Patrik Oldsberg Date: Fri, 30 Dec 2022 15:00:40 +0100 Subject: [PATCH 02/55] theme: initial mui v5 types + workaround Signed-off-by: Patrik Oldsberg --- packages/theme/package.json | 7 ++++- packages/theme/src/index.ts | 1 + packages/theme/src/v5/index.ts | 17 +++++++++++ packages/theme/src/v5/types.ts | 53 ++++++++++++++++++++++++++++++++++ 4 files changed, 77 insertions(+), 1 deletion(-) create mode 100644 packages/theme/src/v5/index.ts create mode 100644 packages/theme/src/v5/types.ts diff --git a/packages/theme/package.json b/packages/theme/package.json index fbc767fb2f..99d9929525 100644 --- a/packages/theme/package.json +++ b/packages/theme/package.json @@ -32,7 +32,12 @@ "test": "backstage-cli package test" }, "dependencies": { - "@material-ui/core": "^4.12.2" + "@material-ui/core": "^4.12.2", + "@mui/material": "^5.11.2" + }, + "peerDependencies": { + "@types/react": "^16.13.1 || ^17.0.0", + "react": "^16.13.1 || ^17.0.0" }, "peerDependencies": { "react": "^16.13.1 || ^17.0.0", diff --git a/packages/theme/src/index.ts b/packages/theme/src/index.ts index 33b5c9a697..5a07f66536 100644 --- a/packages/theme/src/index.ts +++ b/packages/theme/src/index.ts @@ -21,6 +21,7 @@ */ export * from './v4'; +export * from './v5'; export type { BackstagePaletteAdditions, PageTheme, diff --git a/packages/theme/src/v5/index.ts b/packages/theme/src/v5/index.ts new file mode 100644 index 0000000000..db229eae34 --- /dev/null +++ b/packages/theme/src/v5/index.ts @@ -0,0 +1,17 @@ +/* + * Copyright 2022 The Backstage Authors + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +export * from './types'; diff --git a/packages/theme/src/v5/types.ts b/packages/theme/src/v5/types.ts new file mode 100644 index 0000000000..d1ffdf2e80 --- /dev/null +++ b/packages/theme/src/v5/types.ts @@ -0,0 +1,53 @@ +/* + * Copyright 2022 The Backstage Authors + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import { + BackstagePaletteAdditions, + PageTheme, + PageThemeSelector, +} from '../types'; + +declare module '@mui/material/styles/createPalette' { + interface Palette extends BackstagePaletteAdditions {} + + interface PaletteOptions extends BackstagePaletteAdditions {} +} + +declare module '@mui/material/styles/createTheme' { + interface Theme { + pageTheme: PageTheme; + getPageTheme: (selector: PageThemeSelector) => PageTheme; + } + + interface ThemeOptions { + pageTheme: PageTheme; + getPageTheme: (selector: PageThemeSelector) => PageTheme; + } +} + +// This is a workaround for missing methods in React 17 that MUI v5 depends on +// See https://github.com/mui/material-ui/issues/35287 +declare global { + namespace React { + type React = typeof import('react'); + + interface DOMAttributes { + onResize?: React.EventHandler | undefined; + onResizeCapture?: React.EventHandler | undefined; + nonce?: string | undefined; + } + } +} From f728b0f62e8d013f0a24bd0d00fa6a117a6fe4d4 Mon Sep 17 00:00:00 2001 From: Patrik Oldsberg Date: Fri, 30 Dec 2022 15:02:27 +0100 Subject: [PATCH 03/55] theme: unify theme additions type Signed-off-by: Patrik Oldsberg --- packages/theme/src/types.ts | 10 ++++++++++ packages/theme/src/v4/types.ts | 11 +++-------- packages/theme/src/v5/types.ts | 16 +++------------- 3 files changed, 16 insertions(+), 21 deletions(-) diff --git a/packages/theme/src/types.ts b/packages/theme/src/types.ts index 143ccbabaa..8f71ce4292 100644 --- a/packages/theme/src/types.ts +++ b/packages/theme/src/types.ts @@ -104,3 +104,13 @@ export type PageTheme = { backgroundImage: string; fontColor: string; }; + +/** + * Backstage specific additions to the material-ui theme. + * + * @public + */ +export type BackstageThemeAdditions = { + page: PageTheme; + getPageTheme: (selector: PageThemeSelector) => PageTheme; +}; diff --git a/packages/theme/src/v4/types.ts b/packages/theme/src/v4/types.ts index 7a292fe0a1..e21ced6e94 100644 --- a/packages/theme/src/v4/types.ts +++ b/packages/theme/src/v4/types.ts @@ -21,6 +21,7 @@ import { } from '@material-ui/core/styles/createPalette'; import { BackstagePaletteAdditions, + BackstageThemeAdditions, PageTheme, PageThemeSelector, } from '../types'; @@ -93,13 +94,7 @@ declare module '@material-ui/core/styles/createPalette' { } declare module '@material-ui/core/styles/createTheme' { - interface Theme { - page: PageTheme; - getPageTheme: (selector: PageThemeSelector) => PageTheme; - } + interface Theme extends BackstageThemeAdditions {} - interface ThemeOptions { - page: PageTheme; - getPageTheme: (selector: PageThemeSelector) => PageTheme; - } + interface ThemeOptions extends BackstageThemeAdditions {} } diff --git a/packages/theme/src/v5/types.ts b/packages/theme/src/v5/types.ts index d1ffdf2e80..d3cf97411d 100644 --- a/packages/theme/src/v5/types.ts +++ b/packages/theme/src/v5/types.ts @@ -14,11 +14,7 @@ * limitations under the License. */ -import { - BackstagePaletteAdditions, - PageTheme, - PageThemeSelector, -} from '../types'; +import { BackstagePaletteAdditions, BackstageThemeAdditions } from '../types'; declare module '@mui/material/styles/createPalette' { interface Palette extends BackstagePaletteAdditions {} @@ -27,15 +23,9 @@ declare module '@mui/material/styles/createPalette' { } declare module '@mui/material/styles/createTheme' { - interface Theme { - pageTheme: PageTheme; - getPageTheme: (selector: PageThemeSelector) => PageTheme; - } + interface Theme extends BackstageThemeAdditions {} - interface ThemeOptions { - pageTheme: PageTheme; - getPageTheme: (selector: PageThemeSelector) => PageTheme; - } + interface ThemeOptions extends BackstageThemeAdditions {} } // This is a workaround for missing methods in React 17 that MUI v5 depends on From be7c4cdab9044da044ac785533588601141db2b0 Mon Sep 17 00:00:00 2001 From: Patrik Oldsberg Date: Fri, 30 Dec 2022 15:05:27 +0100 Subject: [PATCH 04/55] theme: move pageTheme to root Signed-off-by: Patrik Oldsberg --- packages/theme/src/index.ts | 1 + packages/theme/src/{v4 => }/pageTheme.ts | 2 +- packages/theme/src/v4/baseTheme.ts | 2 +- packages/theme/src/v4/index.ts | 1 - packages/theme/src/v4/themes.ts | 2 +- 5 files changed, 4 insertions(+), 4 deletions(-) rename packages/theme/src/{v4 => }/pageTheme.ts (99%) diff --git a/packages/theme/src/index.ts b/packages/theme/src/index.ts index 5a07f66536..c9f0ebd289 100644 --- a/packages/theme/src/index.ts +++ b/packages/theme/src/index.ts @@ -22,6 +22,7 @@ export * from './v4'; export * from './v5'; +export { colorVariants, genPageTheme, pageTheme, shapes } from './pageTheme'; export type { BackstagePaletteAdditions, PageTheme, diff --git a/packages/theme/src/v4/pageTheme.ts b/packages/theme/src/pageTheme.ts similarity index 99% rename from packages/theme/src/v4/pageTheme.ts rename to packages/theme/src/pageTheme.ts index 93eb2be0e3..12a73b6089 100644 --- a/packages/theme/src/v4/pageTheme.ts +++ b/packages/theme/src/pageTheme.ts @@ -14,7 +14,7 @@ * limitations under the License. */ -import { PageTheme } from '../types'; +import { PageTheme } from './types'; /** * The default predefined burst shapes. diff --git a/packages/theme/src/v4/baseTheme.ts b/packages/theme/src/v4/baseTheme.ts index b326018e87..1dcd2cf7d7 100644 --- a/packages/theme/src/v4/baseTheme.ts +++ b/packages/theme/src/v4/baseTheme.ts @@ -18,7 +18,7 @@ import { createTheme as createMuiTheme } from '@material-ui/core/styles'; import { Theme, ThemeOptions } from '@material-ui/core'; import { darken, lighten } from '@material-ui/core/styles/colorManipulator'; import { Overrides } from '@material-ui/core/styles/overrides'; -import { pageTheme as defaultPageThemes } from './pageTheme'; +import { pageTheme as defaultPageThemes } from '../pageTheme'; import { SimpleV4ThemeOptions } from './types'; const DEFAULT_HTML_FONT_SIZE = 16; diff --git a/packages/theme/src/v4/index.ts b/packages/theme/src/v4/index.ts index f897070f0e..331e0e4c1e 100644 --- a/packages/theme/src/v4/index.ts +++ b/packages/theme/src/v4/index.ts @@ -27,4 +27,3 @@ export type { BackstageThemeOptions, SimpleV4ThemeOptions, } from './types'; -export { colorVariants, genPageTheme, pageTheme, shapes } from './pageTheme'; diff --git a/packages/theme/src/v4/themes.ts b/packages/theme/src/v4/themes.ts index 9432aa2b57..4aa1902f4a 100644 --- a/packages/theme/src/v4/themes.ts +++ b/packages/theme/src/v4/themes.ts @@ -15,7 +15,7 @@ */ import { createV4Theme } from './baseTheme'; -import { pageTheme } from './pageTheme'; +import { pageTheme } from '../pageTheme'; import { yellow } from '@material-ui/core/colors'; /** From 231b39bae838454001a3285d1dc33f48e6e0c0af Mon Sep 17 00:00:00 2001 From: Patrik Oldsberg Date: Sat, 31 Dec 2022 12:32:17 +0100 Subject: [PATCH 05/55] theme: add v5->v4 component theme adapter Signed-off-by: Patrik Oldsberg --- packages/theme/src/compat/overrides.test.ts | 138 ++++++++++++++++++++ packages/theme/src/compat/overrides.ts | 71 ++++++++++ 2 files changed, 209 insertions(+) create mode 100644 packages/theme/src/compat/overrides.test.ts create mode 100644 packages/theme/src/compat/overrides.ts diff --git a/packages/theme/src/compat/overrides.test.ts b/packages/theme/src/compat/overrides.test.ts new file mode 100644 index 0000000000..68fd883168 --- /dev/null +++ b/packages/theme/src/compat/overrides.test.ts @@ -0,0 +1,138 @@ +/* + * Copyright 2022 The Backstage Authors + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import { Theme } from '@mui/material'; +import { transformV5ComponentThemesToV4 } from './overrides'; + +describe('transformV5ComponentThemesToV4', () => { + const mockTheme = { + palette: { + primary: { + main: 'red', + }, + }, + } as unknown as Theme; + it('transforms empty component themes', () => { + expect(transformV5ComponentThemesToV4(mockTheme)).toEqual({ + overrides: {}, + props: {}, + }); + expect(transformV5ComponentThemesToV4(mockTheme, {})).toEqual({ + overrides: {}, + props: {}, + }); + expect( + transformV5ComponentThemesToV4(mockTheme, { + MuiButton: { + styleOverrides: undefined, + defaultProps: undefined, + }, + }), + ).toEqual({ overrides: {}, props: {} }); + expect( + transformV5ComponentThemesToV4(mockTheme, { + MuiButton: { + styleOverrides: {}, + defaultProps: {}, + }, + }), + ).toEqual({ overrides: { MuiButton: {} }, props: { MuiButton: {} } }); + }); + + it('transforms component themes', () => { + expect( + transformV5ComponentThemesToV4(mockTheme, { + MuiButton: { + styleOverrides: { + root: { + color: 'green', + }, + }, + defaultProps: { + disableRipple: true, + }, + }, + }), + ).toEqual({ + overrides: { + MuiButton: { + root: { + color: 'green', + }, + }, + }, + props: { + MuiButton: { + disableRipple: true, + }, + }, + }); + expect( + transformV5ComponentThemesToV4(mockTheme, { + MuiButton: { + styleOverrides: { + root: ({ theme }) => ({ + color: theme.palette.primary.main, + }), + }, + }, + }), + ).toEqual({ + overrides: { + MuiButton: { + root: { + color: 'red', + }, + }, + }, + props: {}, + }); + }); + + it('transforms CSSBaseline theme', () => { + expect( + transformV5ComponentThemesToV4(mockTheme, { + MuiCssBaseline: { + styleOverrides: theme => ({ + '@global': { + html: { + color: theme.palette.primary.main, + }, + }, + }), + defaultProps: { + enableColorScheme: true, + }, + }, + }), + ).toEqual({ + overrides: { + MuiCssBaseline: { + '@global': { + html: { + color: 'red', + }, + }, + }, + }, + props: { + MuiCssBaseline: { + enableColorScheme: true, + }, + }, + }); + }); +}); diff --git a/packages/theme/src/compat/overrides.ts b/packages/theme/src/compat/overrides.ts new file mode 100644 index 0000000000..0ada593740 --- /dev/null +++ b/packages/theme/src/compat/overrides.ts @@ -0,0 +1,71 @@ +/* + * Copyright 2022 The Backstage Authors + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import { Overrides } from '@material-ui/core/styles/overrides'; +import { ComponentsProps } from '@material-ui/core/styles/props'; +import { ComponentsOverrides, Theme } from '@mui/material/styles'; + +type V5Override = ComponentsOverrides[keyof ComponentsOverrides]; +type V4Override = Overrides[keyof Overrides]; + +// Converts callback-based overrides to static styles, e.g. +// { root: theme => ({ color: theme.color }) } -> { root: { color: 'red' } } +function adaptV5Override(theme: Theme, overrides: V5Override): V4Override { + if (!overrides) { + return overrides as V4Override; + } + if (typeof overrides === 'function') { + return overrides(theme) as V4Override; + } + if (typeof overrides === 'object') { + return Object.fromEntries( + Object.entries(overrides).map(([className, style]) => { + if (typeof style === 'function') { + return [className, style({ theme })]; + } + return [className, style]; + }), + ); + } + return overrides as V4Override; +} + +// Transform v5 theme overrides into a v4 theme, by converting the callback-based overrides +export function transformV5ComponentThemesToV4( + theme: Theme, + components: Theme['components'] = {}, +): { overrides: Overrides; props: ComponentsProps } { + const overrides: Record = {}; + const props: Record = {}; + + for (const name of Object.keys(components)) { + const component = components[name as keyof typeof components]; + if (!component) { + continue; + } + if ('styleOverrides' in component) { + overrides[name] = adaptV5Override( + theme, + component.styleOverrides as V5Override, + ); + } + if ('defaultProps' in component) { + props[name] = component.defaultProps; + } + } + + return { overrides, props }; +} From b678641ab16a6648c5a6ac23f06fc08ac3453675 Mon Sep 17 00:00:00 2001 From: Patrik Oldsberg Date: Sat, 31 Dec 2022 14:16:31 +0100 Subject: [PATCH 06/55] theme: add multi theme provider and holder Signed-off-by: Patrik Oldsberg --- .../theme/src/compat/MultiThemeProvider.tsx | 58 +++++++++++++++++++ packages/theme/src/compat/types.ts | 19 ++++++ 2 files changed, 77 insertions(+) create mode 100644 packages/theme/src/compat/MultiThemeProvider.tsx create mode 100644 packages/theme/src/compat/types.ts diff --git a/packages/theme/src/compat/MultiThemeProvider.tsx b/packages/theme/src/compat/MultiThemeProvider.tsx new file mode 100644 index 0000000000..e707010dc9 --- /dev/null +++ b/packages/theme/src/compat/MultiThemeProvider.tsx @@ -0,0 +1,58 @@ +/* + * Copyright 2022 The Backstage Authors + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import React, { ReactNode } from 'react'; +import { + Theme as Mui4Theme, + ThemeProvider as Mui4Provider, +} from '@material-ui/core/styles'; +import { + Theme as Mui5Theme, + ThemeProvider as Mui5Provider, +} from '@mui/material/styles'; +import CssBaseline from '@mui/material/CssBaseline'; +import { MultiThemeHolder } from './types'; + +interface ThemeProviderProps { + children: ReactNode; + theme: MultiThemeHolder; + noCssBaseline?: boolean; +} + +export function MultiThemeProvider(props: ThemeProviderProps) { + const { children, theme, noCssBaseline } = props; + + let result = noCssBaseline ? ( + children + ) : ( + <> + + {children} + + ); + + const v4Theme = theme.getThemeForVersion('v4'); + if (v4Theme) { + result = {result}; + } + + const v5Theme = theme.getThemeForVersion('v5'); + if (v5Theme) { + result = {result}; + } + + return result; +} diff --git a/packages/theme/src/compat/types.ts b/packages/theme/src/compat/types.ts new file mode 100644 index 0000000000..dac6ef9492 --- /dev/null +++ b/packages/theme/src/compat/types.ts @@ -0,0 +1,19 @@ +/* + * Copyright 2022 The Backstage Authors + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +export interface MultiThemeHolder { + getThemeForVersion(version: string): unknown | undefined; +} From 9457dc832c5dabf74d52742c13c3fca183a35f7c Mon Sep 17 00:00:00 2001 From: Patrik Oldsberg Date: Sat, 31 Dec 2022 14:17:57 +0100 Subject: [PATCH 07/55] theme: exports for compat Signed-off-by: Patrik Oldsberg --- packages/theme/src/compat/index.ts | 18 ++++++++++++++++++ packages/theme/src/index.ts | 1 + 2 files changed, 19 insertions(+) create mode 100644 packages/theme/src/compat/index.ts diff --git a/packages/theme/src/compat/index.ts b/packages/theme/src/compat/index.ts new file mode 100644 index 0000000000..fe6863b8bc --- /dev/null +++ b/packages/theme/src/compat/index.ts @@ -0,0 +1,18 @@ +/* + * Copyright 2022 The Backstage Authors + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +export { MultiThemeProvider } from './MultiThemeProvider'; +export type { MultiThemeHolder } from './types'; diff --git a/packages/theme/src/index.ts b/packages/theme/src/index.ts index c9f0ebd289..a6c9632983 100644 --- a/packages/theme/src/index.ts +++ b/packages/theme/src/index.ts @@ -20,6 +20,7 @@ * @packageDocumentation */ +export * from './compat'; export * from './v4'; export * from './v5'; export { colorVariants, genPageTheme, pageTheme, shapes } from './pageTheme'; From 744b36547627634442b950c3b270993f5291571a Mon Sep 17 00:00:00 2001 From: Patrik Oldsberg Date: Sat, 31 Dec 2022 14:36:52 +0100 Subject: [PATCH 08/55] theme: make home the default page theme Signed-off-by: Patrik Oldsberg --- packages/theme/src/v4/baseTheme.ts | 3 ++- packages/theme/src/v4/types.ts | 2 +- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/theme/src/v4/baseTheme.ts b/packages/theme/src/v4/baseTheme.ts index 1dcd2cf7d7..5bd7981377 100644 --- a/packages/theme/src/v4/baseTheme.ts +++ b/packages/theme/src/v4/baseTheme.ts @@ -24,6 +24,7 @@ import { SimpleV4ThemeOptions } from './types'; const DEFAULT_HTML_FONT_SIZE = 16; const DEFAULT_FONT_FAMILY = '"Helvetica Neue", Helvetica, Roboto, Arial, sans-serif'; +const DEFAULT_PAGE_THEME = 'home'; /** * A helper for creating theme options. @@ -37,7 +38,7 @@ export function createV4ThemeOptions( palette, htmlFontSize = DEFAULT_HTML_FONT_SIZE, fontFamily = DEFAULT_FONT_FAMILY, - defaultPageTheme, + defaultPageTheme = DEFAULT_PAGE_THEME, pageTheme = defaultPageThemes, } = options; diff --git a/packages/theme/src/v4/types.ts b/packages/theme/src/v4/types.ts index e21ced6e94..9da80e73a3 100644 --- a/packages/theme/src/v4/types.ts +++ b/packages/theme/src/v4/types.ts @@ -81,7 +81,7 @@ export interface BackstageTheme extends Theme { */ export type SimpleV4ThemeOptions = { palette: PaletteOptions; - defaultPageTheme: string; + defaultPageTheme?: string; pageTheme?: Record; fontFamily?: string; htmlFontSize?: number; From f25222d7c1275f0abd8fca9c6a1255536e565e34 Mon Sep 17 00:00:00 2001 From: Patrik Oldsberg Date: Sat, 31 Dec 2022 15:06:51 +0100 Subject: [PATCH 09/55] theme: add unified theme abstraction + creators and base theme options Signed-off-by: Patrik Oldsberg --- packages/theme/src/compat/UnifiedTheme.tsx | 96 +++++++ ...eProvider.tsx => UnifiedThemeProvider.tsx} | 10 +- .../src/compat/createBaseThemeOptions.ts | 93 +++++++ packages/theme/src/compat/index.ts | 4 +- packages/theme/src/compat/overrides.ts | 4 +- packages/theme/src/compat/types.ts | 11 +- .../theme/src/v5/defaultComponentThemes.ts | 243 ++++++++++++++++++ packages/theme/src/v5/index.ts | 1 + packages/theme/src/v5/types.ts | 21 +- 9 files changed, 471 insertions(+), 12 deletions(-) create mode 100644 packages/theme/src/compat/UnifiedTheme.tsx rename packages/theme/src/compat/{MultiThemeProvider.tsx => UnifiedThemeProvider.tsx} (85%) create mode 100644 packages/theme/src/compat/createBaseThemeOptions.ts create mode 100644 packages/theme/src/v5/defaultComponentThemes.ts diff --git a/packages/theme/src/compat/UnifiedTheme.tsx b/packages/theme/src/compat/UnifiedTheme.tsx new file mode 100644 index 0000000000..7bd907bc84 --- /dev/null +++ b/packages/theme/src/compat/UnifiedTheme.tsx @@ -0,0 +1,96 @@ +/* + * Copyright 2022 The Backstage Authors + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import { + Theme as Mui4Theme, + createTheme as createV4Theme, + ThemeOptions as ThemeOptionsV4, +} from '@material-ui/core/styles'; +import { PaletteOptions as PaletteOptionsV4 } from '@material-ui/core/styles/createPalette'; +import { PaletteOptions as PaletteOptionsV5 } from '@mui/material/styles/createPalette'; +import { + adaptV4Theme, + Theme as Mui5Theme, + createTheme as createV5Theme, + ThemeOptions as ThemeOptionsV5, +} from '@mui/material/styles'; +import { transformV5ComponentThemesToV4 } from './overrides'; +import { PageTheme } from '../types'; +import { defaultComponentThemes } from '../v5'; +import { createBaseThemeOptions } from './createBaseThemeOptions'; +import { UnifiedTheme } from './types'; + +export class UnifiedThemeHolder implements UnifiedTheme { + #themes = new Map(); + + constructor(v4?: Mui4Theme, v5?: Mui5Theme) { + this.#themes = new Map(); + if (v4) { + this.#themes.set('v4', v4); + } + if (v5) { + this.#themes.set('v5', v5); + } + } + + getTheme(version: string): unknown | undefined { + return this.#themes.get(version); + } +} + +/** + * Options for creating a new {@link UnifiedTheme}. + * + * @public + */ +export interface UnifiedThemeOptions { + palette: PaletteOptionsV4 & PaletteOptionsV5; + defaultPageTheme?: string; + pageTheme?: Record; + fontFamily?: string; + htmlFontSize?: number; + components?: ThemeOptionsV5['components']; +} + +/** + * Creates a new {@link UnifiedTheme} using the provided options. + * + * @public + */ +export function createUnifiedTheme( + options: UnifiedThemeOptions, +): UnifiedThemeHolder { + const themeOptions = createBaseThemeOptions(options); + const components = { ...defaultComponentThemes, ...options.components }; + const v5Theme = createV5Theme({ ...themeOptions, components }); + const v4Overrides = transformV5ComponentThemesToV4(v5Theme, components); + const v4Theme = { ...createV4Theme(themeOptions), ...v4Overrides }; + + return new UnifiedThemeHolder(v4Theme, v5Theme); +} + +/** + * Creates a new {@link UnifiedTheme} using MUI v4 theme options. + * Note that this uses `adaptV4Theme` from MUI v5, which is deprecated. + * + * @public + */ +export function createUnifiedThemeFromV4(options: ThemeOptionsV4) { + const v4Theme = createV4Theme(options); + const v5Theme = adaptV4Theme(options as any); + + return new UnifiedThemeHolder(v4Theme, v5Theme); +} diff --git a/packages/theme/src/compat/MultiThemeProvider.tsx b/packages/theme/src/compat/UnifiedThemeProvider.tsx similarity index 85% rename from packages/theme/src/compat/MultiThemeProvider.tsx rename to packages/theme/src/compat/UnifiedThemeProvider.tsx index e707010dc9..19fd13eb08 100644 --- a/packages/theme/src/compat/MultiThemeProvider.tsx +++ b/packages/theme/src/compat/UnifiedThemeProvider.tsx @@ -24,15 +24,15 @@ import { ThemeProvider as Mui5Provider, } from '@mui/material/styles'; import CssBaseline from '@mui/material/CssBaseline'; -import { MultiThemeHolder } from './types'; +import { UnifiedTheme } from './types'; interface ThemeProviderProps { children: ReactNode; - theme: MultiThemeHolder; + theme: UnifiedTheme; noCssBaseline?: boolean; } -export function MultiThemeProvider(props: ThemeProviderProps) { +export function UnifiedThemeProvider(props: ThemeProviderProps) { const { children, theme, noCssBaseline } = props; let result = noCssBaseline ? ( @@ -44,12 +44,12 @@ export function MultiThemeProvider(props: ThemeProviderProps) { ); - const v4Theme = theme.getThemeForVersion('v4'); + const v4Theme = theme.getTheme('v4'); if (v4Theme) { result = {result}; } - const v5Theme = theme.getThemeForVersion('v5'); + const v5Theme = theme.getTheme('v5'); if (v5Theme) { result = {result}; } diff --git a/packages/theme/src/compat/createBaseThemeOptions.ts b/packages/theme/src/compat/createBaseThemeOptions.ts new file mode 100644 index 0000000000..ab8a80fb94 --- /dev/null +++ b/packages/theme/src/compat/createBaseThemeOptions.ts @@ -0,0 +1,93 @@ +/* + * Copyright 2022 The Backstage Authors + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import { PageTheme, PageThemeSelector } from '../types'; +import { pageTheme as defaultPageThemes } from '../pageTheme'; + +const DEFAULT_HTML_FONT_SIZE = 16; +const DEFAULT_FONT_FAMILY = + '"Helvetica Neue", Helvetica, Roboto, Arial, sans-serif'; +const DEFAULT_PAGE_THEME = 'home'; + +export interface BaseThemeOptionsInput { + palette: PaletteOptions; + defaultPageTheme?: string; + pageTheme?: Record; + fontFamily?: string; + htmlFontSize?: number; +} + +/** + * A helper for creating theme options. + * + * @public + */ +export function createBaseThemeOptions( + options: BaseThemeOptionsInput, +) { + const { + palette, + htmlFontSize = DEFAULT_HTML_FONT_SIZE, + fontFamily = DEFAULT_FONT_FAMILY, + defaultPageTheme = DEFAULT_PAGE_THEME, + pageTheme = defaultPageThemes, + } = options; + + if (!pageTheme[defaultPageTheme]) { + throw new Error(`${defaultPageTheme} is not defined in pageTheme.`); + } + + return { + palette, + typography: { + htmlFontSize, + fontFamily, + h6: { + fontWeight: 700, + fontSize: 20, + marginBottom: 2, + }, + h5: { + fontWeight: 700, + fontSize: 24, + marginBottom: 4, + }, + h4: { + fontWeight: 700, + fontSize: 28, + marginBottom: 6, + }, + h3: { + fontSize: 32, + fontWeight: 700, + marginBottom: 6, + }, + h2: { + fontSize: 40, + fontWeight: 700, + marginBottom: 8, + }, + h1: { + fontSize: 54, + fontWeight: 700, + marginBottom: 10, + }, + }, + page: pageTheme[defaultPageTheme], + getPageTheme: ({ themeId }: PageThemeSelector) => + pageTheme[themeId] ?? pageTheme[defaultPageTheme], + }; +} diff --git a/packages/theme/src/compat/index.ts b/packages/theme/src/compat/index.ts index fe6863b8bc..836c8e6563 100644 --- a/packages/theme/src/compat/index.ts +++ b/packages/theme/src/compat/index.ts @@ -14,5 +14,5 @@ * limitations under the License. */ -export { MultiThemeProvider } from './MultiThemeProvider'; -export type { MultiThemeHolder } from './types'; +export { UnifiedThemeProvider } from './UnifiedThemeProvider'; +export type { UnifiedTheme } from './types'; diff --git a/packages/theme/src/compat/overrides.ts b/packages/theme/src/compat/overrides.ts index 0ada593740..8b6c3f94bc 100644 --- a/packages/theme/src/compat/overrides.ts +++ b/packages/theme/src/compat/overrides.ts @@ -16,7 +16,7 @@ import { Overrides } from '@material-ui/core/styles/overrides'; import { ComponentsProps } from '@material-ui/core/styles/props'; -import { ComponentsOverrides, Theme } from '@mui/material/styles'; +import { ComponentsOverrides, Theme, ThemeOptions } from '@mui/material/styles'; type V5Override = ComponentsOverrides[keyof ComponentsOverrides]; type V4Override = Overrides[keyof Overrides]; @@ -46,7 +46,7 @@ function adaptV5Override(theme: Theme, overrides: V5Override): V4Override { // Transform v5 theme overrides into a v4 theme, by converting the callback-based overrides export function transformV5ComponentThemesToV4( theme: Theme, - components: Theme['components'] = {}, + components: ThemeOptions['components'] = {}, ): { overrides: Overrides; props: ComponentsProps } { const overrides: Record = {}; const props: Record = {}; diff --git a/packages/theme/src/compat/types.ts b/packages/theme/src/compat/types.ts index dac6ef9492..f090a99b83 100644 --- a/packages/theme/src/compat/types.ts +++ b/packages/theme/src/compat/types.ts @@ -14,6 +14,13 @@ * limitations under the License. */ -export interface MultiThemeHolder { - getThemeForVersion(version: string): unknown | undefined; +/** + * A container of one theme for multiple different MUI versions. + * + * Currently known keys are 'v4' and 'v5'. + * + * @public + */ +export interface UnifiedTheme { + getTheme(version: string): unknown | undefined; } diff --git a/packages/theme/src/v5/defaultComponentThemes.ts b/packages/theme/src/v5/defaultComponentThemes.ts new file mode 100644 index 0000000000..3389018f18 --- /dev/null +++ b/packages/theme/src/v5/defaultComponentThemes.ts @@ -0,0 +1,243 @@ +/* + * Copyright 2022 The Backstage Authors + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import { darken, lighten, ThemeOptions } from '@mui/material/styles'; + +/** + * A helper for creating theme overrides. + * + * @public + */ +export const defaultComponentThemes: ThemeOptions['components'] = { + MuiCssBaseline: { + styleOverrides: theme => ({ + '@global': { + html: { + height: '100%', + fontFamily: theme.typography.fontFamily, + }, + body: { + height: '100%', + fontFamily: theme.typography.fontFamily, + 'overscroll-behavior-y': 'none', + }, + a: { + color: 'inherit', + textDecoration: 'none', + }, + }, + }), + }, + MuiGrid: { + defaultProps: { + spacing: 2, + }, + }, + MuiSwitch: { + defaultProps: { + color: 'primary', + }, + }, + MuiTableRow: { + styleOverrides: { + // Alternating row backgrounds + root: ({ theme }) => ({ + '&:nth-of-type(odd)': { + backgroundColor: theme.palette.background.default, + }, + }), + // Use pointer for hoverable rows + hover: { + '&:hover': { + cursor: 'pointer', + }, + }, + // Alternating head backgrounds + head: ({ theme }) => ({ + '&:nth-of-type(odd)': { + backgroundColor: theme.palette.background.paper, + }, + }), + }, + }, + // Tables are more dense than default mui tables + MuiTableCell: { + styleOverrides: { + root: ({ theme }) => ({ + wordBreak: 'break-word', + overflow: 'hidden', + verticalAlign: 'middle', + lineHeight: '1', + margin: 0, + padding: theme.spacing(3, 2, 3, 2.5), + borderBottom: 0, + }), + sizeSmall: ({ theme }) => ({ + padding: theme.spacing(1.5, 2, 1.5, 2.5), + }), + head: { + wordBreak: 'break-word', + overflow: 'hidden', + color: 'rgb(179, 179, 179)', + fontWeight: 'normal', + lineHeight: '1', + }, + }, + }, + MuiTabs: { + styleOverrides: { + // Tabs are smaller than default mui tab rows + root: { + minHeight: 24, + }, + }, + }, + MuiTab: { + styleOverrides: { + // Tabs are smaller and have a hover background + root: ({ theme }) => ({ + color: theme.palette.link, + minHeight: 24, + textTransform: 'initial', + letterSpacing: '0.07em', + '&:hover': { + color: darken(theme.palette.link, 0.3), + background: lighten(theme.palette.link, 0.95), + }, + [theme.breakpoints.up('md')]: { + minWidth: 120, + fontSize: theme.typography.pxToRem(14), + fontWeight: 500, + }, + }), + textColorPrimary: ({ theme }) => ({ + color: theme.palette.link, + }), + }, + }, + MuiTableSortLabel: { + styleOverrides: { + // No color change on hover, just rely on the arrow showing up instead. + root: { + color: 'inherit', + '&:hover': { + color: 'inherit', + }, + '&:focus': { + color: 'inherit', + }, + }, + // Bold font for highlighting selected column + active: { + fontWeight: 'bold', + color: 'inherit', + }, + }, + }, + MuiListItemText: { + styleOverrides: { + dense: { + // Default dense list items to adding ellipsis for really long str... + whiteSpace: 'nowrap', + overflow: 'hidden', + textOverflow: 'ellipsis', + }, + }, + }, + MuiButton: { + styleOverrides: { + text: { + // Text buttons have less padding by default, but we want to keep the original padding + padding: undefined, + }, + }, + }, + MuiChip: { + styleOverrides: { + root: ({ theme }) => ({ + backgroundColor: '#D9D9D9', + // By default there's no margin, but it's usually wanted, so we add some trailing margin + marginRight: theme.spacing(1), + marginBottom: theme.spacing(1), + color: theme.palette.grey[900], + }), + outlined: ({ theme }) => ({ + color: theme.palette.text.primary, + }), + label: ({ theme }) => ({ + lineHeight: `${theme.spacing(2.5)}px`, + fontWeight: theme.typography.fontWeightMedium, + fontSize: `${theme.spacing(1.75)}px`, + }), + labelSmall: ({ theme }) => ({ + fontSize: `${theme.spacing(1.5)}px`, + }), + deleteIcon: ({ theme }) => ({ + color: theme.palette.grey[500], + width: `${theme.spacing(3)}px`, + height: `${theme.spacing(3)}px`, + margin: `0 ${theme.spacing(0.75)}px 0 -${theme.spacing(0.75)}px`, + }), + deleteIconSmall: ({ theme }) => ({ + width: `${theme.spacing(2)}px`, + height: `${theme.spacing(2)}px`, + margin: `0 ${theme.spacing(0.5)}px 0 -${theme.spacing(0.5)}px`, + }), + }, + }, + MuiCard: { + styleOverrides: { + root: { + // When cards have a forced size, such as when they are arranged in a + // CSS grid, the content needs to flex such that the actions (buttons + // etc) end up at the bottom of the card instead of just below the body + // contents. + display: 'flex', + flexDirection: 'column', + }, + }, + }, + MuiCardHeader: { + styleOverrides: { + root: { + // Reduce padding between header and content + paddingBottom: 0, + }, + }, + }, + MuiCardContent: { + styleOverrides: { + root: { + // When cards have a forced size, such as when they are arranged in a + // CSS grid, the content needs to flex such that the actions (buttons + // etc) end up at the bottom of the card instead of just below the body + // contents. + flexGrow: 1, + '&:last-child': { + paddingBottom: undefined, + }, + }, + }, + }, + MuiCardActions: { + styleOverrides: { + root: { + // We default to putting the card actions at the end + justifyContent: 'flex-end', + }, + }, + }, +}; diff --git a/packages/theme/src/v5/index.ts b/packages/theme/src/v5/index.ts index db229eae34..eee5d852b1 100644 --- a/packages/theme/src/v5/index.ts +++ b/packages/theme/src/v5/index.ts @@ -15,3 +15,4 @@ */ export * from './types'; +export { defaultComponentThemes } from './defaultComponentThemes'; diff --git a/packages/theme/src/v5/types.ts b/packages/theme/src/v5/types.ts index d3cf97411d..c6788bdc06 100644 --- a/packages/theme/src/v5/types.ts +++ b/packages/theme/src/v5/types.ts @@ -14,7 +14,26 @@ * limitations under the License. */ -import { BackstagePaletteAdditions, BackstageThemeAdditions } from '../types'; +import { PaletteOptions } from '@mui/material/styles'; +import { + BackstagePaletteAdditions, + BackstageThemeAdditions, + PageTheme, +} from '../types'; + +/** + * A simpler configuration for creating a new theme that just tweaks some parts + * of the backstage one. + * + * @public + */ +export type SimpleV5ThemeOptions = { + palette: PaletteOptions; + defaultPageTheme?: string; + pageTheme?: Record; + fontFamily?: string; + htmlFontSize?: number; +}; declare module '@mui/material/styles/createPalette' { interface Palette extends BackstagePaletteAdditions {} From 6882ca559837745c53fbbe9e191322146e6d484b Mon Sep 17 00:00:00 2001 From: Patrik Oldsberg Date: Sat, 31 Dec 2022 15:10:52 +0100 Subject: [PATCH 10/55] theme: separate out base theme constructs Signed-off-by: Patrik Oldsberg --- .../createBaseThemeOptions.ts | 46 +++++++++---------- packages/theme/src/base/index.ts | 23 ++++++++++ packages/theme/src/{ => base}/pageTheme.ts | 0 packages/theme/src/{ => base}/types.ts | 0 packages/theme/src/compat/UnifiedTheme.tsx | 4 +- packages/theme/src/index.ts | 7 +-- packages/theme/src/v4/baseTheme.ts | 2 +- packages/theme/src/v4/themes.ts | 2 +- packages/theme/src/v4/types.ts | 2 +- packages/theme/src/v5/types.ts | 2 +- 10 files changed, 53 insertions(+), 35 deletions(-) rename packages/theme/src/{compat => base}/createBaseThemeOptions.ts (94%) create mode 100644 packages/theme/src/base/index.ts rename packages/theme/src/{ => base}/pageTheme.ts (100%) rename packages/theme/src/{ => base}/types.ts (100%) diff --git a/packages/theme/src/compat/createBaseThemeOptions.ts b/packages/theme/src/base/createBaseThemeOptions.ts similarity index 94% rename from packages/theme/src/compat/createBaseThemeOptions.ts rename to packages/theme/src/base/createBaseThemeOptions.ts index ab8a80fb94..15903462e7 100644 --- a/packages/theme/src/compat/createBaseThemeOptions.ts +++ b/packages/theme/src/base/createBaseThemeOptions.ts @@ -14,8 +14,8 @@ * limitations under the License. */ -import { PageTheme, PageThemeSelector } from '../types'; -import { pageTheme as defaultPageThemes } from '../pageTheme'; +import { PageTheme, PageThemeSelector } from './types'; +import { pageTheme as defaultPageThemes } from './pageTheme'; const DEFAULT_HTML_FONT_SIZE = 16; const DEFAULT_FONT_FAMILY = @@ -55,35 +55,35 @@ export function createBaseThemeOptions( typography: { htmlFontSize, fontFamily, - h6: { + h1: { + fontSize: 54, fontWeight: 700, - fontSize: 20, - marginBottom: 2, - }, - h5: { - fontWeight: 700, - fontSize: 24, - marginBottom: 4, - }, - h4: { - fontWeight: 700, - fontSize: 28, - marginBottom: 6, - }, - h3: { - fontSize: 32, - fontWeight: 700, - marginBottom: 6, + marginBottom: 10, }, h2: { fontSize: 40, fontWeight: 700, marginBottom: 8, }, - h1: { - fontSize: 54, + h3: { + fontSize: 32, fontWeight: 700, - marginBottom: 10, + marginBottom: 6, + }, + h4: { + fontWeight: 700, + fontSize: 28, + marginBottom: 6, + }, + h5: { + fontWeight: 700, + fontSize: 24, + marginBottom: 4, + }, + h6: { + fontWeight: 700, + fontSize: 20, + marginBottom: 2, }, }, page: pageTheme[defaultPageTheme], diff --git a/packages/theme/src/base/index.ts b/packages/theme/src/base/index.ts new file mode 100644 index 0000000000..9440bcfd59 --- /dev/null +++ b/packages/theme/src/base/index.ts @@ -0,0 +1,23 @@ +/* + * Copyright 2022 The Backstage Authors + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +export { createBaseThemeOptions } from './createBaseThemeOptions'; +export { colorVariants, genPageTheme, pageTheme, shapes } from './pageTheme'; +export type { + BackstagePaletteAdditions, + PageTheme, + PageThemeSelector, +} from './types'; diff --git a/packages/theme/src/pageTheme.ts b/packages/theme/src/base/pageTheme.ts similarity index 100% rename from packages/theme/src/pageTheme.ts rename to packages/theme/src/base/pageTheme.ts diff --git a/packages/theme/src/types.ts b/packages/theme/src/base/types.ts similarity index 100% rename from packages/theme/src/types.ts rename to packages/theme/src/base/types.ts diff --git a/packages/theme/src/compat/UnifiedTheme.tsx b/packages/theme/src/compat/UnifiedTheme.tsx index 7bd907bc84..d00999a8b1 100644 --- a/packages/theme/src/compat/UnifiedTheme.tsx +++ b/packages/theme/src/compat/UnifiedTheme.tsx @@ -28,9 +28,9 @@ import { ThemeOptions as ThemeOptionsV5, } from '@mui/material/styles'; import { transformV5ComponentThemesToV4 } from './overrides'; -import { PageTheme } from '../types'; +import { PageTheme } from '../base/types'; import { defaultComponentThemes } from '../v5'; -import { createBaseThemeOptions } from './createBaseThemeOptions'; +import { createBaseThemeOptions } from '../base/createBaseThemeOptions'; import { UnifiedTheme } from './types'; export class UnifiedThemeHolder implements UnifiedTheme { diff --git a/packages/theme/src/index.ts b/packages/theme/src/index.ts index a6c9632983..8fdb961705 100644 --- a/packages/theme/src/index.ts +++ b/packages/theme/src/index.ts @@ -21,14 +21,9 @@ */ export * from './compat'; +export * from './base'; export * from './v4'; export * from './v5'; -export { colorVariants, genPageTheme, pageTheme, shapes } from './pageTheme'; -export type { - BackstagePaletteAdditions, - PageTheme, - PageThemeSelector, -} from './types'; import { createV4Theme, diff --git a/packages/theme/src/v4/baseTheme.ts b/packages/theme/src/v4/baseTheme.ts index 5bd7981377..cc15630f9e 100644 --- a/packages/theme/src/v4/baseTheme.ts +++ b/packages/theme/src/v4/baseTheme.ts @@ -18,7 +18,7 @@ import { createTheme as createMuiTheme } from '@material-ui/core/styles'; import { Theme, ThemeOptions } from '@material-ui/core'; import { darken, lighten } from '@material-ui/core/styles/colorManipulator'; import { Overrides } from '@material-ui/core/styles/overrides'; -import { pageTheme as defaultPageThemes } from '../pageTheme'; +import { pageTheme as defaultPageThemes } from '../base/pageTheme'; import { SimpleV4ThemeOptions } from './types'; const DEFAULT_HTML_FONT_SIZE = 16; diff --git a/packages/theme/src/v4/themes.ts b/packages/theme/src/v4/themes.ts index 4aa1902f4a..c63dcb591e 100644 --- a/packages/theme/src/v4/themes.ts +++ b/packages/theme/src/v4/themes.ts @@ -15,7 +15,7 @@ */ import { createV4Theme } from './baseTheme'; -import { pageTheme } from '../pageTheme'; +import { pageTheme } from '../base/pageTheme'; import { yellow } from '@material-ui/core/colors'; /** diff --git a/packages/theme/src/v4/types.ts b/packages/theme/src/v4/types.ts index 9da80e73a3..ded91bec3f 100644 --- a/packages/theme/src/v4/types.ts +++ b/packages/theme/src/v4/types.ts @@ -24,7 +24,7 @@ import { BackstageThemeAdditions, PageTheme, PageThemeSelector, -} from '../types'; +} from '../base/types'; /** * The full Backstage palette. diff --git a/packages/theme/src/v5/types.ts b/packages/theme/src/v5/types.ts index c6788bdc06..8fce16be05 100644 --- a/packages/theme/src/v5/types.ts +++ b/packages/theme/src/v5/types.ts @@ -19,7 +19,7 @@ import { BackstagePaletteAdditions, BackstageThemeAdditions, PageTheme, -} from '../types'; +} from '../base/types'; /** * A simpler configuration for creating a new theme that just tweaks some parts From eef94b1f7420a23cf48bc2b4f50f011d37f78e51 Mon Sep 17 00:00:00 2001 From: Patrik Oldsberg Date: Sat, 31 Dec 2022 15:14:43 +0100 Subject: [PATCH 11/55] theme: use base theme to create v4 options Signed-off-by: Patrik Oldsberg --- packages/theme/src/v4/baseTheme.ts | 71 ++++-------------------------- 1 file changed, 8 insertions(+), 63 deletions(-) diff --git a/packages/theme/src/v4/baseTheme.ts b/packages/theme/src/v4/baseTheme.ts index cc15630f9e..54a67d7d20 100644 --- a/packages/theme/src/v4/baseTheme.ts +++ b/packages/theme/src/v4/baseTheme.ts @@ -15,16 +15,12 @@ */ import { createTheme as createMuiTheme } from '@material-ui/core/styles'; -import { Theme, ThemeOptions } from '@material-ui/core'; +import { GridProps, SwitchProps, Theme, ThemeOptions } from '@material-ui/core'; import { darken, lighten } from '@material-ui/core/styles/colorManipulator'; import { Overrides } from '@material-ui/core/styles/overrides'; -import { pageTheme as defaultPageThemes } from '../base/pageTheme'; import { SimpleV4ThemeOptions } from './types'; - -const DEFAULT_HTML_FONT_SIZE = 16; -const DEFAULT_FONT_FAMILY = - '"Helvetica Neue", Helvetica, Roboto, Arial, sans-serif'; -const DEFAULT_PAGE_THEME = 'home'; +import { createBaseThemeOptions } from '../base'; +import { defaultComponentThemes } from '../v5'; /** * A helper for creating theme options. @@ -34,65 +30,14 @@ const DEFAULT_PAGE_THEME = 'home'; export function createV4ThemeOptions( options: SimpleV4ThemeOptions, ): ThemeOptions { - const { - palette, - htmlFontSize = DEFAULT_HTML_FONT_SIZE, - fontFamily = DEFAULT_FONT_FAMILY, - defaultPageTheme = DEFAULT_PAGE_THEME, - pageTheme = defaultPageThemes, - } = options; - - if (!pageTheme[defaultPageTheme]) { - throw new Error(`${defaultPageTheme} is not defined in pageTheme.`); - } - return { - palette, props: { - MuiGrid: { - spacing: 2, - }, - MuiSwitch: { - color: 'primary', - }, + MuiGrid: defaultComponentThemes?.MuiGrid + ?.defaultProps as Partial, + MuiSwitch: defaultComponentThemes?.MuiSwitch + ?.defaultProps as Partial, }, - typography: { - htmlFontSize, - fontFamily, - h6: { - fontWeight: 700, - fontSize: 20, - marginBottom: 2, - }, - h5: { - fontWeight: 700, - fontSize: 24, - marginBottom: 4, - }, - h4: { - fontWeight: 700, - fontSize: 28, - marginBottom: 6, - }, - h3: { - fontSize: 32, - fontWeight: 700, - marginBottom: 6, - }, - h2: { - fontSize: 40, - fontWeight: 700, - marginBottom: 8, - }, - h1: { - fontSize: 54, - fontWeight: 700, - marginBottom: 10, - }, - }, - page: pageTheme[defaultPageTheme], - getPageTheme: ({ themeId }) => - pageTheme[themeId] ?? pageTheme[defaultPageTheme], + ...createBaseThemeOptions(options), }; } From 5b30bdbb737375b4ac97ce44b935e5deebf57d82 Mon Sep 17 00:00:00 2001 From: Patrik Oldsberg Date: Sat, 31 Dec 2022 15:25:58 +0100 Subject: [PATCH 12/55] theme: use v5 component themes to create v4 overrides Signed-off-by: Patrik Oldsberg --- packages/theme/src/v4/baseTheme.ts | 187 +----------------- .../theme/src/v5/defaultComponentThemes.ts | 6 +- 2 files changed, 10 insertions(+), 183 deletions(-) diff --git a/packages/theme/src/v4/baseTheme.ts b/packages/theme/src/v4/baseTheme.ts index 54a67d7d20..9ae8507e9c 100644 --- a/packages/theme/src/v4/baseTheme.ts +++ b/packages/theme/src/v4/baseTheme.ts @@ -14,13 +14,14 @@ * limitations under the License. */ +import { Theme as Mui5Theme } from '@mui/material/styles'; import { createTheme as createMuiTheme } from '@material-ui/core/styles'; import { GridProps, SwitchProps, Theme, ThemeOptions } from '@material-ui/core'; -import { darken, lighten } from '@material-ui/core/styles/colorManipulator'; import { Overrides } from '@material-ui/core/styles/overrides'; import { SimpleV4ThemeOptions } from './types'; import { createBaseThemeOptions } from '../base'; import { defaultComponentThemes } from '../v5'; +import { transformV5ComponentThemesToV4 } from '../compat/overrides'; /** * A helper for creating theme options. @@ -47,185 +48,11 @@ export function createV4ThemeOptions( * @public */ export function createV4ThemeOverrides(theme: Theme): Overrides { - return { - MuiCssBaseline: { - '@global': { - html: { - height: '100%', - fontFamily: theme.typography.fontFamily, - }, - body: { - height: '100%', - fontFamily: theme.typography.fontFamily, - 'overscroll-behavior-y': 'none', - }, - a: { - color: 'inherit', - textDecoration: 'none', - }, - }, - }, - MuiTableRow: { - // Alternating row backgrounds - root: { - '&:nth-of-type(odd)': { - backgroundColor: theme.palette.background.default, - }, - }, - // Use pointer for hoverable rows - hover: { - '&:hover': { - cursor: 'pointer', - }, - }, - // Alternating head backgrounds - head: { - '&:nth-of-type(odd)': { - backgroundColor: theme.palette.background.paper, - }, - }, - }, - // Tables are more dense than default mui tables - MuiTableCell: { - root: { - wordBreak: 'break-word', - overflow: 'hidden', - verticalAlign: 'middle', - lineHeight: '1', - margin: 0, - padding: theme.spacing(3, 2, 3, 2.5), - borderBottom: 0, - }, - sizeSmall: { - padding: theme.spacing(1.5, 2, 1.5, 2.5), - }, - head: { - wordBreak: 'break-word', - overflow: 'hidden', - fontWeight: 'normal', - lineHeight: '1', - }, - }, - MuiTabs: { - // Tabs are smaller than default mui tab rows - root: { - minHeight: 24, - }, - }, - MuiTab: { - // Tabs are smaller and have a hover background - root: { - color: theme.palette.link, - minHeight: 24, - textTransform: 'initial', - letterSpacing: '0.07em', - '&:hover': { - color: darken(theme.palette.link, 0.3), - background: lighten(theme.palette.link, 0.95), - }, - [theme.breakpoints.up('md')]: { - minWidth: 120, - fontSize: theme.typography.pxToRem(14), - fontWeight: 500, - }, - }, - textColorPrimary: { - color: theme.palette.link, - }, - }, - MuiTableSortLabel: { - // No color change on hover, just rely on the arrow showing up instead. - root: { - color: 'inherit', - '&:hover': { - color: 'inherit', - }, - }, - // Bold font for highlighting selected column - active: { - fontWeight: 'bold', - }, - }, - MuiListItemText: { - dense: { - // Default dense list items to adding ellipsis for really long str... - whiteSpace: 'nowrap', - overflow: 'hidden', - textOverflow: 'ellipsis', - }, - }, - MuiButton: { - text: { - // Text buttons have less padding by default, but we want to keep the original padding - padding: undefined, - }, - }, - MuiChip: { - root: { - backgroundColor: '#D9D9D9', - // By default there's no margin, but it's usually wanted, so we add some trailing margin - marginRight: theme.spacing(1), - marginBottom: theme.spacing(1), - color: theme.palette.grey[900], - }, - outlined: { - color: theme.palette.text.primary, - }, - label: { - lineHeight: `${theme.spacing(2.5)}px`, - fontWeight: theme.typography.fontWeightMedium, - fontSize: `${theme.spacing(1.75)}px`, - }, - labelSmall: { - fontSize: `${theme.spacing(1.5)}px`, - }, - deleteIcon: { - color: theme.palette.grey[500], - width: `${theme.spacing(3)}px`, - height: `${theme.spacing(3)}px`, - margin: `0 ${theme.spacing(0.75)}px 0 -${theme.spacing(0.75)}px`, - }, - deleteIconSmall: { - width: `${theme.spacing(2)}px`, - height: `${theme.spacing(2)}px`, - margin: `0 ${theme.spacing(0.5)}px 0 -${theme.spacing(0.5)}px`, - }, - }, - MuiCard: { - root: { - // When cards have a forced size, such as when they are arranged in a - // CSS grid, the content needs to flex such that the actions (buttons - // etc) end up at the bottom of the card instead of just below the body - // contents. - display: 'flex', - flexDirection: 'column', - }, - }, - MuiCardHeader: { - root: { - // Reduce padding between header and content - paddingBottom: 0, - }, - }, - MuiCardContent: { - root: { - // When cards have a forced size, such as when they are arranged in a - // CSS grid, the content needs to flex such that the actions (buttons - // etc) end up at the bottom of the card instead of just below the body - // contents. - flexGrow: 1, - '&:last-child': { - paddingBottom: undefined, - }, - }, - }, - MuiCardActions: { - root: { - // We default to putting the card actions at the end - justifyContent: 'flex-end', - }, - }, - }; + return transformV5ComponentThemesToV4( + // Safe but we have to make sure we don't use mui5 specific stuff in the default component themes + theme as unknown as Mui5Theme, + defaultComponentThemes, + ).overrides; } /** diff --git a/packages/theme/src/v5/defaultComponentThemes.ts b/packages/theme/src/v5/defaultComponentThemes.ts index 3389018f18..288ba819bf 100644 --- a/packages/theme/src/v5/defaultComponentThemes.ts +++ b/packages/theme/src/v5/defaultComponentThemes.ts @@ -88,13 +88,13 @@ export const defaultComponentThemes: ThemeOptions['components'] = { sizeSmall: ({ theme }) => ({ padding: theme.spacing(1.5, 2, 1.5, 2.5), }), - head: { + head: ({ theme }) => ({ wordBreak: 'break-word', overflow: 'hidden', - color: 'rgb(179, 179, 179)', + color: theme.palette.textSubtle, fontWeight: 'normal', lineHeight: '1', - }, + }), }, }, MuiTabs: { From 689a2f6099c4f1d108b1d768483506f997c801f1 Mon Sep 17 00:00:00 2001 From: Patrik Oldsberg Date: Sat, 31 Dec 2022 15:27:29 +0100 Subject: [PATCH 13/55] theme: bring in mui 5 style deps Signed-off-by: Patrik Oldsberg --- packages/theme/package.json | 5 +- yarn.lock | 564 +++++++++++++++++++++++++++++++++++- 2 files changed, 560 insertions(+), 9 deletions(-) diff --git a/packages/theme/package.json b/packages/theme/package.json index 99d9929525..dd741581a4 100644 --- a/packages/theme/package.json +++ b/packages/theme/package.json @@ -32,8 +32,11 @@ "test": "backstage-cli package test" }, "dependencies": { + "@emotion/react": "^11.10.5", + "@emotion/styled": "^11.10.5", "@material-ui/core": "^4.12.2", - "@mui/material": "^5.11.2" + "@mui/material": "^5.11.2", + "@mui/styles": "^5.11.2" }, "peerDependencies": { "@types/react": "^16.13.1 || ^17.0.0", diff --git a/yarn.lock b/yarn.lock index 52a508235d..784c38bb73 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1,6 +1,3 @@ -# This file is generated by running "yarn install" inside your project. -# Manual changes might be lost - proceed with caution! - __metadata: version: 6 cacheKey: 8 @@ -2248,7 +2245,7 @@ __metadata: languageName: node linkType: hard -"@babel/helper-module-imports@npm:^7.0.0, @babel/helper-module-imports@npm:^7.12.13, @babel/helper-module-imports@npm:^7.16.0, @babel/helper-module-imports@npm:^7.18.6": +"@babel/helper-module-imports@npm:^7.0.0, @babel/helper-module-imports@npm:^7.12.13, @babel/helper-module-imports@npm:^7.16.0, @babel/helper-module-imports@npm:^7.16.7, @babel/helper-module-imports@npm:^7.18.6": version: 7.18.6 resolution: "@babel/helper-module-imports@npm:7.18.6" dependencies: @@ -2730,7 +2727,7 @@ __metadata: languageName: node linkType: hard -"@babel/plugin-syntax-jsx@npm:^7.0.0, @babel/plugin-syntax-jsx@npm:^7.18.6, @babel/plugin-syntax-jsx@npm:^7.7.2": +"@babel/plugin-syntax-jsx@npm:^7.0.0, @babel/plugin-syntax-jsx@npm:^7.17.12, @babel/plugin-syntax-jsx@npm:^7.18.6, @babel/plugin-syntax-jsx@npm:^7.7.2": version: 7.18.6 resolution: "@babel/plugin-syntax-jsx@npm:7.18.6" dependencies: @@ -3472,6 +3469,15 @@ __metadata: languageName: node linkType: hard +"@babel/runtime@npm:^7.0.0, @babel/runtime@npm:^7.1.2, @babel/runtime@npm:^7.10.1, @babel/runtime@npm:^7.10.2, @babel/runtime@npm:^7.12.1, @babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.14.6, @babel/runtime@npm:^7.15.4, @babel/runtime@npm:^7.18.3, @babel/runtime@npm:^7.18.6, @babel/runtime@npm:^7.18.9, @babel/runtime@npm:^7.20.1, @babel/runtime@npm:^7.20.6, @babel/runtime@npm:^7.20.7, @babel/runtime@npm:^7.3.1, @babel/runtime@npm:^7.4.4, @babel/runtime@npm:^7.5.5, @babel/runtime@npm:^7.6.0, @babel/runtime@npm:^7.7.2, @babel/runtime@npm:^7.7.6, @babel/runtime@npm:^7.8.3, @babel/runtime@npm:^7.8.4, @babel/runtime@npm:^7.8.7, @babel/runtime@npm:^7.9.2": + version: 7.20.7 + resolution: "@babel/runtime@npm:7.20.7" + dependencies: + regenerator-runtime: ^0.13.11 + checksum: 4629ce5c46f06cca9cfb9b7fc00d48003335a809888e2b91ec2069a2dcfbfef738480cff32ba81e0b7c290f8918e5c22ddcf2b710001464ee84ba62c7e32a3a3 + languageName: node + linkType: hard + "@babel/runtime@npm:^7.0.0, @babel/runtime@npm:^7.1.2, @babel/runtime@npm:^7.10.1, @babel/runtime@npm:^7.12.1, @babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.14.6, @babel/runtime@npm:^7.15.4, @babel/runtime@npm:^7.18.3, @babel/runtime@npm:^7.18.6, @babel/runtime@npm:^7.2.0, @babel/runtime@npm:^7.20.1, @babel/runtime@npm:^7.20.13, @babel/runtime@npm:^7.20.7, @babel/runtime@npm:^7.3.1, @babel/runtime@npm:^7.4.4, @babel/runtime@npm:^7.5.5, @babel/runtime@npm:^7.6.0, @babel/runtime@npm:^7.7.6, @babel/runtime@npm:^7.8.3, @babel/runtime@npm:^7.8.4, @babel/runtime@npm:^7.8.7, @babel/runtime@npm:^7.9.2": version: 7.21.0 resolution: "@babel/runtime@npm:7.21.0" @@ -3481,6 +3487,15 @@ __metadata: languageName: node linkType: hard +"@babel/runtime@npm:^7.0.0, @babel/runtime@npm:^7.1.2, @babel/runtime@npm:^7.10.1, @babel/runtime@npm:^7.12.1, @babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.14.6, @babel/runtime@npm:^7.15.4, @babel/runtime@npm:^7.18.3, @babel/runtime@npm:^7.18.6, @babel/runtime@npm:^7.2.0, @babel/runtime@npm:^7.20.1, @babel/runtime@npm:^7.20.7, @babel/runtime@npm:^7.3.1, @babel/runtime@npm:^7.4.4, @babel/runtime@npm:^7.5.5, @babel/runtime@npm:^7.6.0, @babel/runtime@npm:^7.7.6, @babel/runtime@npm:^7.8.3, @babel/runtime@npm:^7.8.4, @babel/runtime@npm:^7.8.7, @babel/runtime@npm:^7.9.2": + version: 7.21.0 + resolution: "@babel/runtime@npm:7.21.0" + dependencies: + regenerator-runtime: ^0.13.11 + checksum: 7b33e25bfa9e0e1b9e8828bb61b2d32bdd46b41b07ba7cb43319ad08efc6fda8eb89445193e67d6541814627df0ca59122c0ea795e412b99c5183a0540d338ab + languageName: node + linkType: hard + "@babel/template@npm:^7.18.10, @babel/template@npm:^7.18.6, @babel/template@npm:^7.3.3": version: 7.18.10 resolution: "@babel/template@npm:7.18.10" @@ -9627,11 +9642,14 @@ __metadata: resolution: "@backstage/theme@workspace:packages/theme" dependencies: "@backstage/cli": "workspace:^" + "@emotion/react": ^11.10.5 + "@emotion/styled": ^11.10.5 "@material-ui/core": ^4.12.2 - "@types/react": ^16.13.1 || ^17.0.0 + "@mui/material": ^5.11.2 + "@mui/styles": ^5.11.2 peerDependencies: + "@types/react": ^16.13.1 || ^17.0.0 react: ^16.13.1 || ^17.0.0 - react-dom: ^16.13.1 || ^17.0.0 languageName: unknown linkType: soft @@ -10157,6 +10175,41 @@ __metadata: languageName: node linkType: hard +"@emotion/babel-plugin@npm:^11.10.5": + version: 11.10.5 + resolution: "@emotion/babel-plugin@npm:11.10.5" + dependencies: + "@babel/helper-module-imports": ^7.16.7 + "@babel/plugin-syntax-jsx": ^7.17.12 + "@babel/runtime": ^7.18.3 + "@emotion/hash": ^0.9.0 + "@emotion/memoize": ^0.8.0 + "@emotion/serialize": ^1.1.1 + babel-plugin-macros: ^3.1.0 + convert-source-map: ^1.5.0 + escape-string-regexp: ^4.0.0 + find-root: ^1.1.0 + source-map: ^0.5.7 + stylis: 4.1.3 + peerDependencies: + "@babel/core": ^7.0.0 + checksum: e3353499c76c4422d6e900c0dfab73607056d9da86161a3f27c3459c193c4908050c5d252c68fcde231e13f02a9d8e0dc07d260317ae0e5206841e331cc4caae + languageName: node + linkType: hard + +"@emotion/cache@npm:^11.10.5": + version: 11.10.5 + resolution: "@emotion/cache@npm:11.10.5" + dependencies: + "@emotion/memoize": ^0.8.0 + "@emotion/sheet": ^1.2.1 + "@emotion/utils": ^1.2.0 + "@emotion/weak-memoize": ^0.3.0 + stylis: 4.1.3 + checksum: 1dd2d9af2d3ecbd3d4469ecdf91a335eef6034c851b57a474471b2d2280613eb35bbed98c0368cc4625f188619fbdaf04cf07e8107aaffce94b2178444c0fe7b + languageName: node + linkType: hard + "@emotion/hash@npm:^0.8.0": version: 0.8.0 resolution: "@emotion/hash@npm:0.8.0" @@ -10164,6 +10217,13 @@ __metadata: languageName: node linkType: hard +"@emotion/hash@npm:^0.9.0": + version: 0.9.0 + resolution: "@emotion/hash@npm:0.9.0" + checksum: b63428f7c8186607acdca5d003700cecf0ded519d0b5c5cc3b3154eafcad6ff433f8361bd2bac8882715b557e6f06945694aeb6ba8b25c6095d7a88570e2e0bb + languageName: node + linkType: hard + "@emotion/is-prop-valid@npm:^1.1.0": version: 1.1.2 resolution: "@emotion/is-prop-valid@npm:1.1.2" @@ -10173,6 +10233,15 @@ __metadata: languageName: node linkType: hard +"@emotion/is-prop-valid@npm:^1.2.0": + version: 1.2.0 + resolution: "@emotion/is-prop-valid@npm:1.2.0" + dependencies: + "@emotion/memoize": ^0.8.0 + checksum: cc7a19850a4c5b24f1514665289442c8c641709e6f7711067ad550e05df331da0692a16148e85eda6f47e31b3261b64d74c5e25194d053223be16231f969d633 + languageName: node + linkType: hard + "@emotion/memoize@npm:^0.7.4": version: 0.7.5 resolution: "@emotion/memoize@npm:0.7.5" @@ -10180,6 +10249,80 @@ __metadata: languageName: node linkType: hard +"@emotion/memoize@npm:^0.8.0": + version: 0.8.0 + resolution: "@emotion/memoize@npm:0.8.0" + checksum: c87bb110b829edd8e1c13b90a6bc37cebc39af29c7599a1e66a48e06f9bec43e8e53495ba86278cc52e7589549492c8dfdc81d19f4fdec0cee6ba13d2ad2c928 + languageName: node + linkType: hard + +"@emotion/react@npm:^11.10.5": + version: 11.10.5 + resolution: "@emotion/react@npm:11.10.5" + dependencies: + "@babel/runtime": ^7.18.3 + "@emotion/babel-plugin": ^11.10.5 + "@emotion/cache": ^11.10.5 + "@emotion/serialize": ^1.1.1 + "@emotion/use-insertion-effect-with-fallbacks": ^1.0.0 + "@emotion/utils": ^1.2.0 + "@emotion/weak-memoize": ^0.3.0 + hoist-non-react-statics: ^3.3.1 + peerDependencies: + "@babel/core": ^7.0.0 + react: ">=16.8.0" + peerDependenciesMeta: + "@babel/core": + optional: true + "@types/react": + optional: true + checksum: 32b67b28e9b6d6c53b970072680697f04c2521441050bdeb19a1a7f0164af549b4dad39ff375eda1b6a3cf1cc86ba2c6fa55460ec040e6ebbca3e9ec58353cf7 + languageName: node + linkType: hard + +"@emotion/serialize@npm:^1.1.1": + version: 1.1.1 + resolution: "@emotion/serialize@npm:1.1.1" + dependencies: + "@emotion/hash": ^0.9.0 + "@emotion/memoize": ^0.8.0 + "@emotion/unitless": ^0.8.0 + "@emotion/utils": ^1.2.0 + csstype: ^3.0.2 + checksum: 24cfd5b16e6f2335c032ca33804a876e0442aaf8f9c94d269d23735ebd194fb1ed142542dd92191a3e6ef8bad5bd560dfc5aaf363a1b70954726dbd4dd93085c + languageName: node + linkType: hard + +"@emotion/sheet@npm:^1.2.1": + version: 1.2.1 + resolution: "@emotion/sheet@npm:1.2.1" + checksum: ce78763588ea522438156344d9f592203e2da582d8d67b32e1b0b98eaba26994c6c270f8c7ad46442fc9c0a9f048685d819cd73ca87e544520fd06f0e24a1562 + languageName: node + linkType: hard + +"@emotion/styled@npm:^11.10.5": + version: 11.10.5 + resolution: "@emotion/styled@npm:11.10.5" + dependencies: + "@babel/runtime": ^7.18.3 + "@emotion/babel-plugin": ^11.10.5 + "@emotion/is-prop-valid": ^1.2.0 + "@emotion/serialize": ^1.1.1 + "@emotion/use-insertion-effect-with-fallbacks": ^1.0.0 + "@emotion/utils": ^1.2.0 + peerDependencies: + "@babel/core": ^7.0.0 + "@emotion/react": ^11.0.0-rc.0 + react: ">=16.8.0" + peerDependenciesMeta: + "@babel/core": + optional: true + "@types/react": + optional: true + checksum: 1cec5f6aeb227a7255141031e8594f38ad83902413472aae0a46c27e5f9769c01e23c1ad39adee408d8a2168a697464314d1a0c4f50b31a5d25ea506b2d7bbc8 + languageName: node + linkType: hard + "@emotion/stylis@npm:^0.8.4": version: 0.8.5 resolution: "@emotion/stylis@npm:0.8.5" @@ -10194,6 +10337,36 @@ __metadata: languageName: node linkType: hard +"@emotion/unitless@npm:^0.8.0": + version: 0.8.0 + resolution: "@emotion/unitless@npm:0.8.0" + checksum: 176141117ed23c0eb6e53a054a69c63e17ae532ec4210907a20b2208f91771821835f1c63dd2ec63e30e22fcc984026d7f933773ee6526dd038e0850919fae7a + languageName: node + linkType: hard + +"@emotion/use-insertion-effect-with-fallbacks@npm:^1.0.0": + version: 1.0.0 + resolution: "@emotion/use-insertion-effect-with-fallbacks@npm:1.0.0" + peerDependencies: + react: ">=16.8.0" + checksum: 4f06a3b48258c832aa8022a262572061a31ff078d377e9164cccc99951309d70f4466e774fe704461b2f8715007a82ed625a54a5c7a127c89017d3ce3187d4f1 + languageName: node + linkType: hard + +"@emotion/utils@npm:^1.2.0": + version: 1.2.0 + resolution: "@emotion/utils@npm:1.2.0" + checksum: 55457a49ddd4db6a014ea0454dc09eaa23eedfb837095c8ff90470cb26a303f7ceb5fcc1e2190ef64683e64cfd33d3ba3ca3109cd87d12bc9e379e4195c9a4dd + languageName: node + linkType: hard + +"@emotion/weak-memoize@npm:^0.3.0": + version: 0.3.0 + resolution: "@emotion/weak-memoize@npm:0.3.0" + checksum: f43ef4c8b7de70d9fa5eb3105921724651e4188e895beb71f0c5919dc899a7b8743e1fdd99d38b9092dd5722c7be2312ebb47fbdad0c4e38bea58f6df5885cc0 + languageName: node + linkType: hard + "@esbuild-kit/cjs-loader@npm:^2.4.1": version: 2.4.2 resolution: "@esbuild-kit/cjs-loader@npm:2.4.2" @@ -10214,6 +10387,13 @@ __metadata: languageName: node linkType: hard +"@esbuild/android-arm64@npm:0.16.14": + version: 0.16.14 + resolution: "@esbuild/android-arm64@npm:0.16.14" + conditions: os=android & cpu=arm64 + languageName: node + linkType: hard + "@esbuild/android-arm64@npm:0.16.17": version: 0.16.17 resolution: "@esbuild/android-arm64@npm:0.16.17" @@ -12734,6 +12914,193 @@ __metadata: languageName: node linkType: hard +"@mui/base@npm:5.0.0-alpha.112": + version: 5.0.0-alpha.112 + resolution: "@mui/base@npm:5.0.0-alpha.112" + dependencies: + "@babel/runtime": ^7.20.7 + "@emotion/is-prop-valid": ^1.2.0 + "@mui/types": ^7.2.3 + "@mui/utils": ^5.11.2 + "@popperjs/core": ^2.11.6 + clsx: ^1.2.1 + prop-types: ^15.8.1 + react-is: ^18.2.0 + peerDependencies: + "@types/react": ^17.0.0 || ^18.0.0 + react: ^17.0.0 || ^18.0.0 + react-dom: ^17.0.0 || ^18.0.0 + peerDependenciesMeta: + "@types/react": + optional: true + checksum: fd19240ac16859d62f057fd80261fc4e0dbc960a648b601bd7beaeb44b88c059f654b0989f33cea655ad61106832bffa0cd8446730c1be7671b6cde383dbce80 + languageName: node + linkType: hard + +"@mui/core-downloads-tracker@npm:^5.11.2": + version: 5.11.2 + resolution: "@mui/core-downloads-tracker@npm:5.11.2" + checksum: 1f2c45ef37b13829fa2331811548cdd3f3cb94e384513db8820533570c8ef4569e5f835f8757a48d783553f44af3f4ed2f93d402891e27718fcc58e16129a874 + languageName: node + linkType: hard + +"@mui/material@npm:^5.11.2": + version: 5.11.2 + resolution: "@mui/material@npm:5.11.2" + dependencies: + "@babel/runtime": ^7.20.7 + "@mui/base": 5.0.0-alpha.112 + "@mui/core-downloads-tracker": ^5.11.2 + "@mui/system": ^5.11.2 + "@mui/types": ^7.2.3 + "@mui/utils": ^5.11.2 + "@types/react-transition-group": ^4.4.5 + clsx: ^1.2.1 + csstype: ^3.1.1 + prop-types: ^15.8.1 + react-is: ^18.2.0 + react-transition-group: ^4.4.5 + peerDependencies: + "@emotion/react": ^11.5.0 + "@emotion/styled": ^11.3.0 + "@types/react": ^17.0.0 || ^18.0.0 + react: ^17.0.0 || ^18.0.0 + react-dom: ^17.0.0 || ^18.0.0 + peerDependenciesMeta: + "@emotion/react": + optional: true + "@emotion/styled": + optional: true + "@types/react": + optional: true + checksum: 4f2baa4b4d8f7842b081e9e919172020f7055e33c24af36c5a458eac1a76ff3e896651fdf21daa523a68ac0bfb3670864c1b4dec9fae6d8fadf2b602f14f95ea + languageName: node + linkType: hard + +"@mui/private-theming@npm:^5.11.2": + version: 5.11.2 + resolution: "@mui/private-theming@npm:5.11.2" + dependencies: + "@babel/runtime": ^7.20.7 + "@mui/utils": ^5.11.2 + prop-types: ^15.8.1 + peerDependencies: + "@types/react": ^17.0.0 || ^18.0.0 + react: ^17.0.0 || ^18.0.0 + peerDependenciesMeta: + "@types/react": + optional: true + checksum: 4a36ca48a7a8187d46c3e0d21ec08f7cb732bd4a5bac91c959337c8b0af031beb3a6c5ceac979b685c2e0e66321273d55dd54648f925bfdb946d6513fc6150e6 + languageName: node + linkType: hard + +"@mui/styled-engine@npm:^5.11.0": + version: 5.11.0 + resolution: "@mui/styled-engine@npm:5.11.0" + dependencies: + "@babel/runtime": ^7.20.6 + "@emotion/cache": ^11.10.5 + csstype: ^3.1.1 + prop-types: ^15.8.1 + peerDependencies: + "@emotion/react": ^11.4.1 + "@emotion/styled": ^11.3.0 + react: ^17.0.0 || ^18.0.0 + peerDependenciesMeta: + "@emotion/react": + optional: true + "@emotion/styled": + optional: true + checksum: ddc486bc5e0e8e7b683e4c3bffecd11c2ce1e6c67a485354c5fc5a6fe04ed5ce76db737609a2ae04779e9d5f57c7936174d458a3795eab62291c2d7681184062 + languageName: node + linkType: hard + +"@mui/styles@npm:^5.11.2": + version: 5.11.2 + resolution: "@mui/styles@npm:5.11.2" + dependencies: + "@babel/runtime": ^7.20.7 + "@emotion/hash": ^0.9.0 + "@mui/private-theming": ^5.11.2 + "@mui/types": ^7.2.3 + "@mui/utils": ^5.11.2 + clsx: ^1.2.1 + csstype: ^3.1.1 + hoist-non-react-statics: ^3.3.2 + jss: ^10.9.2 + jss-plugin-camel-case: ^10.9.2 + jss-plugin-default-unit: ^10.9.2 + jss-plugin-global: ^10.9.2 + jss-plugin-nested: ^10.9.2 + jss-plugin-props-sort: ^10.9.2 + jss-plugin-rule-value-function: ^10.9.2 + jss-plugin-vendor-prefixer: ^10.9.2 + prop-types: ^15.8.1 + peerDependencies: + "@types/react": ^17.0.0 + react: ^17.0.0 + peerDependenciesMeta: + "@types/react": + optional: true + checksum: d565e53acd6f49679446dbb9d85ab055d6c16225afd429ac9a738fba3cddfc394f88530cebfe1b3640ca89f58e7db73bb47d09e9bb05c80e47a5018418802378 + languageName: node + linkType: hard + +"@mui/system@npm:^5.11.2": + version: 5.11.2 + resolution: "@mui/system@npm:5.11.2" + dependencies: + "@babel/runtime": ^7.20.7 + "@mui/private-theming": ^5.11.2 + "@mui/styled-engine": ^5.11.0 + "@mui/types": ^7.2.3 + "@mui/utils": ^5.11.2 + clsx: ^1.2.1 + csstype: ^3.1.1 + prop-types: ^15.8.1 + peerDependencies: + "@emotion/react": ^11.5.0 + "@emotion/styled": ^11.3.0 + "@types/react": ^17.0.0 || ^18.0.0 + react: ^17.0.0 || ^18.0.0 + peerDependenciesMeta: + "@emotion/react": + optional: true + "@emotion/styled": + optional: true + "@types/react": + optional: true + checksum: d6b136464ec48cbc270f0cb91eb83f10f6b6801c143cc320ef5c6ec71655f9b3ceda98ab38fde537d1c0a7669defcb9af6f4940c78101603f8b6800854d0133d + languageName: node + linkType: hard + +"@mui/types@npm:^7.2.3": + version: 7.2.3 + resolution: "@mui/types@npm:7.2.3" + peerDependencies: + "@types/react": "*" + peerDependenciesMeta: + "@types/react": + optional: true + checksum: b8511cb78f8df25c8978317ad3fd585c782116b657f2d32233352c09d415c77040e532f41bbe96de6ad46be87138767d3129a9f0de3561900a9a64db7693bce4 + languageName: node + linkType: hard + +"@mui/utils@npm:^5.11.2": + version: 5.11.2 + resolution: "@mui/utils@npm:5.11.2" + dependencies: + "@babel/runtime": ^7.20.7 + "@types/prop-types": ^15.7.5 + "@types/react-is": ^16.7.1 || ^17.0.0 + prop-types: ^15.8.1 + react-is: ^18.2.0 + peerDependencies: + react: ^17.0.0 || ^18.0.0 + checksum: 69091d9120681dee29fc20220b7db5dd61334194c139df735d932f072dab00eeae6e440058ffbccebbe93d4a3a998c23b6f4df570cb66cdacd023fce9f0f5912 + languageName: node + linkType: hard + "@n1ru4l/push-pull-async-iterable-iterator@npm:^3.1.0": version: 3.1.0 resolution: "@n1ru4l/push-pull-async-iterable-iterator@npm:3.1.0" @@ -13645,6 +14012,13 @@ __metadata: languageName: node linkType: hard +"@popperjs/core@npm:^2.11.6": + version: 2.11.6 + resolution: "@popperjs/core@npm:2.11.6" + checksum: 47fb328cec1924559d759b48235c78574f2d71a8a6c4c03edb6de5d7074078371633b91e39bbf3f901b32aa8af9b9d8f82834856d2f5737a23475036b16817f0 + languageName: node + linkType: hard + "@protobufjs/aspromise@npm:^1.1.1, @protobufjs/aspromise@npm:^1.1.2": version: 1.1.2 resolution: "@protobufjs/aspromise@npm:1.1.2" @@ -16489,7 +16863,7 @@ __metadata: languageName: node linkType: hard -"@types/prop-types@npm:*, @types/prop-types@npm:^15.0.0, @types/prop-types@npm:^15.7.3": +"@types/prop-types@npm:*, @types/prop-types@npm:^15.0.0, @types/prop-types@npm:^15.7.3, @types/prop-types@npm:^15.7.5": version: 15.7.5 resolution: "@types/prop-types@npm:15.7.5" checksum: 5b43b8b15415e1f298243165f1d44390403bb2bd42e662bca3b5b5633fdd39c938e91b7fce3a9483699db0f7a715d08cef220c121f723a634972fdf596aec980 @@ -16555,6 +16929,15 @@ __metadata: languageName: node linkType: hard +"@types/react-is@npm:^16.7.1 || ^17.0.0": + version: 17.0.3 + resolution: "@types/react-is@npm:17.0.3" + dependencies: + "@types/react": "*" + checksum: 6abb7c47d54f012272650df8a962a28bd82f219291e5ef8b4dfa7fe0bb98ae243b060bf9fbe8ceff6213141794855a006db194b490b00ffd15842ae19d0ce1f0 + languageName: node + linkType: hard + "@types/react-redux@npm:^7.1.16": version: 7.1.19 resolution: "@types/react-redux@npm:7.1.19" @@ -16612,6 +16995,15 @@ __metadata: languageName: node linkType: hard +"@types/react-transition-group@npm:^4.4.5": + version: 4.4.5 + resolution: "@types/react-transition-group@npm:4.4.5" + dependencies: + "@types/react": "*" + checksum: 265f1c74061556708ffe8d15559e35c60d6c11478c9950d3735575d2c116ca69f461d85effa06d73a613eb8b73c84fd32682feb57cf7c5f9e4284021dbca25b0 + languageName: node + linkType: hard + "@types/react-virtualized-auto-sizer@npm:^1.0.1": version: 1.0.1 resolution: "@types/react-virtualized-auto-sizer@npm:1.0.1" @@ -18665,6 +19057,17 @@ __metadata: languageName: node linkType: hard +"babel-plugin-macros@npm:^3.1.0": + version: 3.1.0 + resolution: "babel-plugin-macros@npm:3.1.0" + dependencies: + "@babel/runtime": ^7.12.5 + cosmiconfig: ^7.0.0 + resolve: ^1.19.0 + checksum: 765de4abebd3e4688ebdfbff8571ddc8cd8061f839bb6c3e550b0344a4027b04c60491f843296ce3f3379fb356cc873d57a9ee6694262547eb822c14a25be9a6 + languageName: node + linkType: hard + "babel-plugin-polyfill-corejs2@npm:^0.3.1": version: 0.3.1 resolution: "babel-plugin-polyfill-corejs2@npm:0.3.1" @@ -20127,6 +20530,13 @@ __metadata: languageName: node linkType: hard +"clsx@npm:^1.2.1": + version: 1.2.1 + resolution: "clsx@npm:1.2.1" + checksum: 30befca8019b2eb7dbad38cff6266cf543091dae2825c856a62a8ccf2c3ab9c2907c4d12b288b73101196767f66812365400a227581484a05f968b0307cfaf12 + languageName: node + linkType: hard + "cluster-key-slot@npm:^1.1.0": version: 1.1.0 resolution: "cluster-key-slot@npm:1.1.0" @@ -20703,6 +21113,13 @@ __metadata: languageName: node linkType: hard +"convert-source-map@npm:^1.5.0": + version: 1.9.0 + resolution: "convert-source-map@npm:1.9.0" + checksum: dc55a1f28ddd0e9485ef13565f8f756b342f9a46c4ae18b843fe3c30c675d058d6a4823eff86d472f187b176f0adf51ea7b69ea38be34be4a63cbbf91b0593c8 + languageName: node + linkType: hard + "convert-source-map@npm:^1.6.0, convert-source-map@npm:^1.7.0": version: 1.7.0 resolution: "convert-source-map@npm:1.7.0" @@ -21335,6 +21752,13 @@ __metadata: languageName: node linkType: hard +"csstype@npm:^3.1.1": + version: 3.1.1 + resolution: "csstype@npm:3.1.1" + checksum: 1f7b4f5fdd955b7444b18ebdddf3f5c699159f13e9cf8ac9027ae4a60ae226aef9bbb14a6e12ca7dba3358b007cee6354b116e720262867c398de6c955ea451d + languageName: node + linkType: hard + "csv-generate@npm:^3.4.3": version: 3.4.3 resolution: "csv-generate@npm:3.4.3" @@ -25972,6 +26396,15 @@ __metadata: languageName: node linkType: hard +"hoist-non-react-statics@npm:^3.0.0, hoist-non-react-statics@npm:^3.3.0, hoist-non-react-statics@npm:^3.3.1, hoist-non-react-statics@npm:^3.3.2": + version: 3.3.2 + resolution: "hoist-non-react-statics@npm:3.3.2" + dependencies: + react-is: ^16.7.0 + checksum: b1538270429b13901ee586aa44f4cc3ecd8831c061d06cb8322e50ea17b3f5ce4d0e2e66394761e6c8e152cd8c34fb3b4b690116c6ce2bd45b18c746516cb9e8 + languageName: node + linkType: hard + "hoopy@npm:^0.1.4": version: 0.1.4 resolution: "hoopy@npm:0.1.4" @@ -28854,6 +29287,17 @@ __metadata: languageName: node linkType: hard +"jss-plugin-camel-case@npm:^10.9.2": + version: 10.9.2 + resolution: "jss-plugin-camel-case@npm:10.9.2" + dependencies: + "@babel/runtime": ^7.3.1 + hyphenate-style-name: ^1.0.3 + jss: 10.9.2 + checksum: 5fa617b23ce9718244691c59ace6a0d1271dbcb4430ce3e13b851ee1879c1db8ecab7e941c33802bea763a0f0e2b609d004b8a975b2063f213cdd639cdd384d2 + languageName: node + linkType: hard + "jss-plugin-default-unit@npm:^10.5.1": version: 10.6.0 resolution: "jss-plugin-default-unit@npm:10.6.0" @@ -28864,6 +29308,16 @@ __metadata: languageName: node linkType: hard +"jss-plugin-default-unit@npm:^10.9.2": + version: 10.9.2 + resolution: "jss-plugin-default-unit@npm:10.9.2" + dependencies: + "@babel/runtime": ^7.3.1 + jss: 10.9.2 + checksum: 48d8d836d36dd15513d98de11fba6be373ac29e6fd5702eb2edd143c815fb9e2f9969b2af6b1b964e9b8a052828690887042f6bcb34836836d5c359e52702d0f + languageName: node + linkType: hard + "jss-plugin-global@npm:^10.5.1": version: 10.6.0 resolution: "jss-plugin-global@npm:10.6.0" @@ -28874,6 +29328,16 @@ __metadata: languageName: node linkType: hard +"jss-plugin-global@npm:^10.9.2": + version: 10.9.2 + resolution: "jss-plugin-global@npm:10.9.2" + dependencies: + "@babel/runtime": ^7.3.1 + jss: 10.9.2 + checksum: 9b29b0c1f169d5a1033890875df072d76364a902d0f6470f448544669a388612a9a4d51844fb2bcb6d25a1c43d67c1637f11a162c2cdd9f4b6b0a8f9c94f6090 + languageName: node + linkType: hard + "jss-plugin-nested@npm:^10.5.1": version: 10.6.0 resolution: "jss-plugin-nested@npm:10.6.0" @@ -28885,6 +29349,17 @@ __metadata: languageName: node linkType: hard +"jss-plugin-nested@npm:^10.9.2": + version: 10.9.2 + resolution: "jss-plugin-nested@npm:10.9.2" + dependencies: + "@babel/runtime": ^7.3.1 + jss: 10.9.2 + tiny-warning: ^1.0.2 + checksum: ee08df07f3d553931b48037674842a8314bbc7857cc954a52f962a516bfc4b2d4e9871578b06b8fa3981edf5a927cea00021fd368d4ce315870065b7647f7b57 + languageName: node + linkType: hard + "jss-plugin-props-sort@npm:^10.5.1": version: 10.6.0 resolution: "jss-plugin-props-sort@npm:10.6.0" @@ -28895,6 +29370,16 @@ __metadata: languageName: node linkType: hard +"jss-plugin-props-sort@npm:^10.9.2": + version: 10.9.2 + resolution: "jss-plugin-props-sort@npm:10.9.2" + dependencies: + "@babel/runtime": ^7.3.1 + jss: 10.9.2 + checksum: 70bd181a458a6078f19ad4d7350570c78d26b9aabc25a1fbde673839edcc19825af7b636861b208a38aa17e551e68d0ea38599480716b4aec08e353bbe737222 + languageName: node + linkType: hard + "jss-plugin-rule-value-function@npm:^10.5.1": version: 10.6.0 resolution: "jss-plugin-rule-value-function@npm:10.6.0" @@ -28906,6 +29391,17 @@ __metadata: languageName: node linkType: hard +"jss-plugin-rule-value-function@npm:^10.9.2": + version: 10.9.2 + resolution: "jss-plugin-rule-value-function@npm:10.9.2" + dependencies: + "@babel/runtime": ^7.3.1 + jss: 10.9.2 + tiny-warning: ^1.0.2 + checksum: b1a03209d0249f13ea6de766d3ee14c1769cd1f67d8c543c7d1ce6178c32cf15507c021ecb3e3b7585a8a7a2425dddbe0bdae02f4135c4598725a4152bebfc99 + languageName: node + linkType: hard + "jss-plugin-vendor-prefixer@npm:^10.5.1": version: 10.6.0 resolution: "jss-plugin-vendor-prefixer@npm:10.6.0" @@ -28917,6 +29413,17 @@ __metadata: languageName: node linkType: hard +"jss-plugin-vendor-prefixer@npm:^10.9.2": + version: 10.9.2 + resolution: "jss-plugin-vendor-prefixer@npm:10.9.2" + dependencies: + "@babel/runtime": ^7.3.1 + css-vendor: ^2.0.8 + jss: 10.9.2 + checksum: a5c352a500fea82e8a782a090cc9815f6331259f1a331158ed74ed77c750fb45750f5ae95f07d27922742830b45d4c3592cfaab194b3ba4a50591acbdeab04d8 + languageName: node + linkType: hard + "jss-props-sort@npm:^6.0.0": version: 6.0.0 resolution: "jss-props-sort@npm:6.0.0" @@ -28950,6 +29457,18 @@ __metadata: languageName: node linkType: hard +"jss@npm:10.9.2, jss@npm:^10.5.1, jss@npm:^10.9.2, jss@npm:~10.9.0": + version: 10.9.2 + resolution: "jss@npm:10.9.2" + dependencies: + "@babel/runtime": ^7.3.1 + csstype: ^3.0.2 + is-in-browser: ^1.1.3 + tiny-warning: ^1.0.2 + checksum: ecf71971df42729668c283e432e841349b7fdbe52e520f7704991cf4a738fd2451ec0feeb25c12cdc5addf7facecf838e74e62936fd461fb4c99f23d54a4792d + languageName: node + linkType: hard + "jss@npm:^10.5.1, jss@npm:~10.10.0": version: 10.10.0 resolution: "jss@npm:10.10.0" @@ -35239,6 +35758,21 @@ __metadata: languageName: node linkType: hard +"react-transition-group@npm:^4.4.5": + version: 4.4.5 + resolution: "react-transition-group@npm:4.4.5" + dependencies: + "@babel/runtime": ^7.5.5 + dom-helpers: ^5.0.1 + loose-envify: ^1.4.0 + prop-types: ^15.6.2 + peerDependencies: + react: ">=16.6.0" + react-dom: ">=16.6.0" + checksum: 75602840106aa9c6545149d6d7ae1502fb7b7abadcce70a6954c4b64a438ff1cd16fc77a0a1e5197cdd72da398f39eb929ea06f9005c45b132ed34e056ebdeb1 + languageName: node + linkType: hard + "react-universal-interface@npm:^0.6.2": version: 0.6.2 resolution: "react-universal-interface@npm:0.6.2" @@ -37229,6 +37763,13 @@ __metadata: languageName: node linkType: hard +"source-map@npm:^0.5.7": + version: 0.5.7 + resolution: "source-map@npm:0.5.7" + checksum: 5dc2043b93d2f194142c7f38f74a24670cd7a0063acdaf4bf01d2964b402257ae843c2a8fa822ad5b71013b5fcafa55af7421383da919752f22ff488bc553f4d + languageName: node + linkType: hard + "source-map@npm:^0.6.0, source-map@npm:^0.6.1, source-map@npm:~0.6.0, source-map@npm:~0.6.1": version: 0.6.1 resolution: "source-map@npm:0.6.1" @@ -38030,6 +38571,13 @@ __metadata: languageName: node linkType: hard +"stylis@npm:4.1.3": + version: 4.1.3 + resolution: "stylis@npm:4.1.3" + checksum: d04dbffcb9bf2c5ca8d8dc09534203c75df3bf711d33973ea22038a99cc475412a350b661ebd99cbc01daa50d7eedcf0d130d121800eb7318759a197023442a6 + languageName: node + linkType: hard + "stylis@npm:^4.0.6": version: 4.0.7 resolution: "stylis@npm:4.0.7" From 7044183030ca8b630b837ecdad3bdc35b0ff2487 Mon Sep 17 00:00:00 2001 From: Patrik Oldsberg Date: Sat, 31 Dec 2022 16:13:39 +0100 Subject: [PATCH 14/55] theme: update API report + fixes Signed-off-by: Patrik Oldsberg --- packages/theme/api-report.md | 96 ++++++++++++++++++- .../theme/src/base/createBaseThemeOptions.ts | 5 + packages/theme/src/base/index.ts | 1 + .../theme/src/compat/UnifiedThemeProvider.tsx | 14 ++- packages/theme/src/compat/index.ts | 1 + packages/theme/src/v5/types.ts | 20 +++- 6 files changed, 130 insertions(+), 7 deletions(-) diff --git a/packages/theme/api-report.md b/packages/theme/api-report.md index c61245e0e2..131fa185ed 100644 --- a/packages/theme/api-report.md +++ b/packages/theme/api-report.md @@ -6,8 +6,12 @@ import { Overrides } from '@material-ui/core/styles/overrides'; import { Palette } from '@material-ui/core/styles/createPalette'; import { PaletteOptions } from '@material-ui/core/styles/createPalette'; +import { PaletteOptions as PaletteOptions_2 } from '@mui/material/styles'; +import { default as React_2 } from 'react'; +import { ReactNode } from 'react'; import { Theme } from '@material-ui/core'; import { ThemeOptions } from '@material-ui/core'; +import { ThemeOptions as ThemeOptions_2 } from '@mui/material/styles'; // @public @deprecated export type BackstagePalette = Palette & BackstagePaletteAdditions; @@ -99,9 +103,66 @@ export interface BackstageThemeOptions extends ThemeOptions { palette: BackstagePaletteOptions; } +// @public +export interface BaseThemeOptionsInput { + // (undocumented) + defaultPageTheme?: string; + // (undocumented) + fontFamily?: string; + // (undocumented) + htmlFontSize?: number; + // (undocumented) + pageTheme?: Record; + // (undocumented) + palette: PaletteOptions; +} + // @public export const colorVariants: Record; +// @public +export function createBaseThemeOptions( + options: BaseThemeOptionsInput, +): { + palette: PaletteOptions; + typography: { + htmlFontSize: number; + fontFamily: string; + h1: { + fontSize: number; + fontWeight: number; + marginBottom: number; + }; + h2: { + fontSize: number; + fontWeight: number; + marginBottom: number; + }; + h3: { + fontSize: number; + fontWeight: number; + marginBottom: number; + }; + h4: { + fontWeight: number; + fontSize: number; + marginBottom: number; + }; + h5: { + fontWeight: number; + fontSize: number; + marginBottom: number; + }; + h6: { + fontWeight: number; + fontSize: number; + marginBottom: number; + }; + }; + page: PageTheme; + getPageTheme: ({ themeId }: PageThemeSelector) => PageTheme; +}; + // @public @deprecated (undocumented) export const createTheme: typeof createV4Theme; @@ -125,6 +186,9 @@ export function createV4ThemeOverrides(theme: Theme): Overrides; // @public export const darkTheme: Theme; +// @public +export const defaultComponentThemes: ThemeOptions_2['components']; + // @public export function genPageTheme(props: { colors: string[]; @@ -162,9 +226,39 @@ export type SimpleThemeOptions = SimpleV4ThemeOptions; // @public export type SimpleV4ThemeOptions = { palette: PaletteOptions; - defaultPageTheme: string; + defaultPageTheme?: string; pageTheme?: Record; fontFamily?: string; htmlFontSize?: number; }; + +// @public +export type SimpleV5ThemeOptions = { + palette: PaletteOptions_2; + defaultPageTheme?: string; + pageTheme?: Record; + fontFamily?: string; + htmlFontSize?: number; +}; + +// @public +export interface UnifiedTheme { + // (undocumented) + getTheme(version: string): unknown | undefined; +} + +// @public +export function UnifiedThemeProvider( + props: UnifiedThemeProviderProps, +): React_2.ReactNode; + +// @public +export interface UnifiedThemeProviderProps { + // (undocumented) + children: ReactNode; + // (undocumented) + noCssBaseline?: boolean; + // (undocumented) + theme: UnifiedTheme; +} ``` diff --git a/packages/theme/src/base/createBaseThemeOptions.ts b/packages/theme/src/base/createBaseThemeOptions.ts index 15903462e7..e54e920deb 100644 --- a/packages/theme/src/base/createBaseThemeOptions.ts +++ b/packages/theme/src/base/createBaseThemeOptions.ts @@ -22,6 +22,11 @@ const DEFAULT_FONT_FAMILY = '"Helvetica Neue", Helvetica, Roboto, Arial, sans-serif'; const DEFAULT_PAGE_THEME = 'home'; +/** + * Options for {@link createBaseThemeOptions}. + * + * @public + */ export interface BaseThemeOptionsInput { palette: PaletteOptions; defaultPageTheme?: string; diff --git a/packages/theme/src/base/index.ts b/packages/theme/src/base/index.ts index 9440bcfd59..891d0bd275 100644 --- a/packages/theme/src/base/index.ts +++ b/packages/theme/src/base/index.ts @@ -15,6 +15,7 @@ */ export { createBaseThemeOptions } from './createBaseThemeOptions'; +export type { BaseThemeOptionsInput } from './createBaseThemeOptions'; export { colorVariants, genPageTheme, pageTheme, shapes } from './pageTheme'; export type { BackstagePaletteAdditions, diff --git a/packages/theme/src/compat/UnifiedThemeProvider.tsx b/packages/theme/src/compat/UnifiedThemeProvider.tsx index 19fd13eb08..72fb708c23 100644 --- a/packages/theme/src/compat/UnifiedThemeProvider.tsx +++ b/packages/theme/src/compat/UnifiedThemeProvider.tsx @@ -26,13 +26,23 @@ import { import CssBaseline from '@mui/material/CssBaseline'; import { UnifiedTheme } from './types'; -interface ThemeProviderProps { +/** + * Props for {@link UnifiedThemeProvider}. + * + * @public + */ +export interface UnifiedThemeProviderProps { children: ReactNode; theme: UnifiedTheme; noCssBaseline?: boolean; } -export function UnifiedThemeProvider(props: ThemeProviderProps) { +/** + * Provides themes for all MUI versions supported by the provided unified theme. + * + * @public + */ +export function UnifiedThemeProvider(props: UnifiedThemeProviderProps) { const { children, theme, noCssBaseline } = props; let result = noCssBaseline ? ( diff --git a/packages/theme/src/compat/index.ts b/packages/theme/src/compat/index.ts index 836c8e6563..5dc9e1e3ea 100644 --- a/packages/theme/src/compat/index.ts +++ b/packages/theme/src/compat/index.ts @@ -15,4 +15,5 @@ */ export { UnifiedThemeProvider } from './UnifiedThemeProvider'; +export type { UnifiedThemeProviderProps } from './UnifiedThemeProvider'; export type { UnifiedTheme } from './types'; diff --git a/packages/theme/src/v5/types.ts b/packages/theme/src/v5/types.ts index 8fce16be05..4f8bfe6634 100644 --- a/packages/theme/src/v5/types.ts +++ b/packages/theme/src/v5/types.ts @@ -51,12 +51,24 @@ declare module '@mui/material/styles/createTheme' { // See https://github.com/mui/material-ui/issues/35287 declare global { namespace React { - type React = typeof import('react'); + interface DOMAttributes { + // onResize?: ReactEventHandler | undefined; + // onResizeCapture?: ReactEventHandler | undefined; - interface DOMAttributes { - onResize?: React.EventHandler | undefined; - onResizeCapture?: React.EventHandler | undefined; + onResize?: (event: Event) => void; + onResizeCapture?: (event: Event) => void; nonce?: string | undefined; } } } +// declare global { +// namespace React { +// type React = typeof import('react'); + +// interface DOMAttributes { +// onResize?: React.EventHandler | undefined; +// onResizeCapture?: React.EventHandler | undefined; +// nonce?: string | undefined; +// } +// } +// } From 563b9ef5cb6b85786eefc9c1df99507f3c93cb91 Mon Sep 17 00:00:00 2001 From: Patrik Oldsberg Date: Sat, 31 Dec 2022 16:24:31 +0100 Subject: [PATCH 15/55] theme: extract out base palettes Signed-off-by: Patrik Oldsberg --- packages/theme/src/base/index.ts | 1 + packages/theme/src/base/palettes.ts | 165 ++++++++++++++++++++++++++++ packages/theme/src/v4/themes.ts | 149 +------------------------ 3 files changed, 169 insertions(+), 146 deletions(-) create mode 100644 packages/theme/src/base/palettes.ts diff --git a/packages/theme/src/base/index.ts b/packages/theme/src/base/index.ts index 891d0bd275..45b8326f2e 100644 --- a/packages/theme/src/base/index.ts +++ b/packages/theme/src/base/index.ts @@ -17,6 +17,7 @@ export { createBaseThemeOptions } from './createBaseThemeOptions'; export type { BaseThemeOptionsInput } from './createBaseThemeOptions'; export { colorVariants, genPageTheme, pageTheme, shapes } from './pageTheme'; +export { palettes } from './palettes'; export type { BackstagePaletteAdditions, PageTheme, diff --git a/packages/theme/src/base/palettes.ts b/packages/theme/src/base/palettes.ts new file mode 100644 index 0000000000..f049237f60 --- /dev/null +++ b/packages/theme/src/base/palettes.ts @@ -0,0 +1,165 @@ +/* + * Copyright 2020 The Backstage Authors + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +/** + * Built-in Backstage color palettes. + * + * @public + */ +export const palettes = { + light: { + type: 'light' as const, + mode: 'light' as const, + background: { + default: '#F8F8F8', + }, + status: { + ok: '#1DB954', + warning: '#FF9800', + error: '#E22134', + running: '#1F5493', + pending: '#FFED51', + aborted: '#757575', + }, + bursts: { + fontColor: '#FEFEFE', + slackChannelText: '#ddd', + backgroundColor: { + default: '#7C3699', + }, + gradient: { + linear: 'linear-gradient(-137deg, #4BB8A5 0%, #187656 100%)', + }, + }, + primary: { + main: '#1F5493', + }, + banner: { + info: '#2E77D0', + error: '#E22134', + text: '#FFFFFF', + link: '#000000', + closeButtonColor: '#FFFFFF', + warning: '#FF9800', + }, + border: '#E6E6E6', + textContrast: '#000000', + textVerySubtle: '#DDD', + textSubtle: '#6E6E6E', + highlight: '#FFFBCC', + errorBackground: '#FFEBEE', + warningBackground: '#F59B23', + infoBackground: '#ebf5ff', + errorText: '#CA001B', + infoText: '#004e8a', + warningText: '#000000', + linkHover: '#2196F3', + link: '#0A6EBE', + gold: '#FFD600', + navigation: { + background: '#171717', + indicator: '#9BF0E1', + color: '#b5b5b5', + selectedColor: '#FFF', + navItem: { + hoverBackground: '#404040', + }, + submenu: { + background: '#404040', + }, + }, + pinSidebarButton: { + icon: '#181818', + background: '#BDBDBD', + }, + tabbar: { + indicator: '#9BF0E1', + }, + }, + dark: { + type: 'dark' as const, + mode: 'dark' as const, + background: { + default: '#333333', + }, + status: { + ok: '#71CF88', + warning: '#FFB84D', + error: '#F84C55', + running: '#3488E3', + pending: '#FEF071', + aborted: '#9E9E9E', + }, + bursts: { + fontColor: '#FEFEFE', + slackChannelText: '#ddd', + backgroundColor: { + default: '#7C3699', + }, + gradient: { + linear: 'linear-gradient(-137deg, #4BB8A5 0%, #187656 100%)', + }, + }, + primary: { + main: '#9CC9FF', + dark: '#82BAFD', + }, + secondary: { + main: '#FF88B2', + }, + banner: { + info: '#2E77D0', + error: '#E22134', + text: '#FFFFFF', + link: '#000000', + closeButtonColor: '#FFFFFF', + warning: '#FF9800', + }, + border: '#E6E6E6', + textContrast: '#FFFFFF', + textVerySubtle: '#727272', + textSubtle: '#CCCCCC', + highlight: '#FFFBCC', + errorBackground: '#FFEBEE', + warningBackground: '#F59B23', + infoBackground: '#ebf5ff', + errorText: '#CA001B', + infoText: '#004e8a', + warningText: '#000000', + linkHover: '#82BAFD', + link: '#9CC9FF', + gold: '#FFD600', + navigation: { + background: '#424242', + indicator: '#9BF0E1', + color: '#b5b5b5', + selectedColor: '#FFF', + navItem: { + hoverBackground: '#404040', + }, + submenu: { + background: '#404040', + }, + }, + pinSidebarButton: { + icon: '#404040', + background: '#BDBDBD', + }, + tabbar: { + indicator: '#9BF0E1', + }, + }, +}; diff --git a/packages/theme/src/v4/themes.ts b/packages/theme/src/v4/themes.ts index c63dcb591e..ad4faeeac6 100644 --- a/packages/theme/src/v4/themes.ts +++ b/packages/theme/src/v4/themes.ts @@ -15,8 +15,7 @@ */ import { createV4Theme } from './baseTheme'; -import { pageTheme } from '../base/pageTheme'; -import { yellow } from '@material-ui/core/colors'; +import { palettes } from '../base'; /** * The default Backstage light theme. @@ -24,76 +23,7 @@ import { yellow } from '@material-ui/core/colors'; * @public */ export const lightTheme = createV4Theme({ - palette: { - type: 'light', - background: { - default: '#F8F8F8', - }, - status: { - ok: '#1DB954', - warning: '#FF9800', - error: '#E22134', - running: '#1F5493', - pending: '#FFED51', - aborted: '#757575', - }, - bursts: { - fontColor: '#FEFEFE', - slackChannelText: '#ddd', - backgroundColor: { - default: '#7C3699', - }, - gradient: { - linear: 'linear-gradient(-137deg, #4BB8A5 0%, #187656 100%)', - }, - }, - primary: { - main: '#1F5493', - }, - banner: { - info: '#2E77D0', - error: '#E22134', - text: '#FFFFFF', - link: '#000000', - closeButtonColor: '#FFFFFF', - warning: '#FF9800', - }, - border: '#E6E6E6', - textContrast: '#000000', - textVerySubtle: '#DDD', - textSubtle: '#6E6E6E', - highlight: '#FFFBCC', - errorBackground: '#FFEBEE', - warningBackground: '#F59B23', - infoBackground: '#ebf5ff', - errorText: '#CA001B', - infoText: '#004e8a', - warningText: '#000000', - linkHover: '#2196F3', - link: '#0A6EBE', - gold: yellow.A700, - navigation: { - background: '#171717', - indicator: '#9BF0E1', - color: '#b5b5b5', - selectedColor: '#FFF', - navItem: { - hoverBackground: '#404040', - }, - submenu: { - background: '#404040', - }, - }, - pinSidebarButton: { - icon: '#181818', - background: '#BDBDBD', - }, - tabbar: { - indicator: '#9BF0E1', - }, - }, - defaultPageTheme: 'home', - pageTheme, + palette: palettes.light, }); /** @@ -102,78 +32,5 @@ export const lightTheme = createV4Theme({ * @public */ export const darkTheme = createV4Theme({ - palette: { - type: 'dark', - background: { - default: '#333333', - }, - status: { - ok: '#71CF88', - warning: '#FFB84D', - error: '#F84C55', - running: '#3488E3', - pending: '#FEF071', - aborted: '#9E9E9E', - }, - bursts: { - fontColor: '#FEFEFE', - slackChannelText: '#ddd', - backgroundColor: { - default: '#7C3699', - }, - gradient: { - linear: 'linear-gradient(-137deg, #4BB8A5 0%, #187656 100%)', - }, - }, - primary: { - main: '#9CC9FF', - dark: '#82BAFD', - }, - secondary: { - main: '#FF88B2', - }, - banner: { - info: '#2E77D0', - error: '#E22134', - text: '#FFFFFF', - link: '#000000', - closeButtonColor: '#FFFFFF', - warning: '#FF9800', - }, - border: '#E6E6E6', - textContrast: '#FFFFFF', - textVerySubtle: '#727272', - textSubtle: '#CCCCCC', - highlight: '#FFFBCC', - errorBackground: '#FFEBEE', - warningBackground: '#F59B23', - infoBackground: '#ebf5ff', - errorText: '#CA001B', - infoText: '#004e8a', - warningText: '#000000', - linkHover: '#82BAFD', - link: '#9CC9FF', - gold: yellow.A700, - navigation: { - background: '#424242', - indicator: '#9BF0E1', - color: '#b5b5b5', - selectedColor: '#FFF', - navItem: { - hoverBackground: '#404040', - }, - submenu: { - background: '#404040', - }, - }, - pinSidebarButton: { - icon: '#404040', - background: '#BDBDBD', - }, - tabbar: { - indicator: '#9BF0E1', - }, - }, - defaultPageTheme: 'home', - pageTheme, + palette: palettes.dark, }); From d1505050ab7ae1ae76643d5aa7d9a14e3e88bbea Mon Sep 17 00:00:00 2001 From: Patrik Oldsberg Date: Sat, 31 Dec 2022 16:25:48 +0100 Subject: [PATCH 16/55] theme: new unified themes export Signed-off-by: Patrik Oldsberg --- packages/theme/src/compat/index.ts | 1 + packages/theme/src/compat/themes.ts | 23 +++++++++++++++++++++++ 2 files changed, 24 insertions(+) create mode 100644 packages/theme/src/compat/themes.ts diff --git a/packages/theme/src/compat/index.ts b/packages/theme/src/compat/index.ts index 5dc9e1e3ea..8b5e01e231 100644 --- a/packages/theme/src/compat/index.ts +++ b/packages/theme/src/compat/index.ts @@ -15,5 +15,6 @@ */ export { UnifiedThemeProvider } from './UnifiedThemeProvider'; +export { themes } from './themes'; export type { UnifiedThemeProviderProps } from './UnifiedThemeProvider'; export type { UnifiedTheme } from './types'; diff --git a/packages/theme/src/compat/themes.ts b/packages/theme/src/compat/themes.ts new file mode 100644 index 0000000000..7b5bae8029 --- /dev/null +++ b/packages/theme/src/compat/themes.ts @@ -0,0 +1,23 @@ +/* + * Copyright 2022 The Backstage Authors + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import { palettes } from '../base'; +import { createUnifiedTheme } from './UnifiedTheme'; + +export const themes = { + light: createUnifiedTheme({ palette: palettes.light }), + dark: createUnifiedTheme({ palette: palettes.dark }), +}; From 130f4343ed91da1f0e6b684db27ad4e56f92ef5f Mon Sep 17 00:00:00 2001 From: Patrik Oldsberg Date: Sat, 31 Dec 2022 16:27:01 +0100 Subject: [PATCH 17/55] theme: deprecate v4 themes Signed-off-by: Patrik Oldsberg --- packages/theme/src/v4/themes.ts | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/packages/theme/src/v4/themes.ts b/packages/theme/src/v4/themes.ts index ad4faeeac6..e5ce783e0f 100644 --- a/packages/theme/src/v4/themes.ts +++ b/packages/theme/src/v4/themes.ts @@ -18,18 +18,20 @@ import { createV4Theme } from './baseTheme'; import { palettes } from '../base'; /** - * The default Backstage light theme. + * The old MUI v4 Backstage light theme. * * @public + * @deprecated Use {@link themes.light} instead. */ export const lightTheme = createV4Theme({ palette: palettes.light, }); /** - * The default Backstage dark theme. + * The old MUI v4 Backstage dark theme. * * @public + * @deprecated Use {@link themes.dark} instead. */ export const darkTheme = createV4Theme({ palette: palettes.dark, From 1b7f1124524622933ed7307cf024bc4c0a5c823b Mon Sep 17 00:00:00 2001 From: Patrik Oldsberg Date: Sat, 31 Dec 2022 16:29:42 +0100 Subject: [PATCH 18/55] theme: remove unused SimpleV5ThemeOptions + cleanup Signed-off-by: Patrik Oldsberg --- packages/theme/src/v5/types.ts | 30 ------------------------------ 1 file changed, 30 deletions(-) diff --git a/packages/theme/src/v5/types.ts b/packages/theme/src/v5/types.ts index 4f8bfe6634..f679d9e53b 100644 --- a/packages/theme/src/v5/types.ts +++ b/packages/theme/src/v5/types.ts @@ -14,27 +14,11 @@ * limitations under the License. */ -import { PaletteOptions } from '@mui/material/styles'; import { BackstagePaletteAdditions, BackstageThemeAdditions, - PageTheme, } from '../base/types'; -/** - * A simpler configuration for creating a new theme that just tweaks some parts - * of the backstage one. - * - * @public - */ -export type SimpleV5ThemeOptions = { - palette: PaletteOptions; - defaultPageTheme?: string; - pageTheme?: Record; - fontFamily?: string; - htmlFontSize?: number; -}; - declare module '@mui/material/styles/createPalette' { interface Palette extends BackstagePaletteAdditions {} @@ -52,23 +36,9 @@ declare module '@mui/material/styles/createTheme' { declare global { namespace React { interface DOMAttributes { - // onResize?: ReactEventHandler | undefined; - // onResizeCapture?: ReactEventHandler | undefined; - onResize?: (event: Event) => void; onResizeCapture?: (event: Event) => void; nonce?: string | undefined; } } } -// declare global { -// namespace React { -// type React = typeof import('react'); - -// interface DOMAttributes { -// onResize?: React.EventHandler | undefined; -// onResizeCapture?: React.EventHandler | undefined; -// nonce?: string | undefined; -// } -// } -// } From daa9125e4d44f233faea84114b8e977a6eeae74d Mon Sep 17 00:00:00 2001 From: Patrik Oldsberg Date: Sat, 31 Dec 2022 16:37:01 +0100 Subject: [PATCH 19/55] theme: remove new V4 methods, deprecate all existing methods Signed-off-by: Patrik Oldsberg --- packages/theme/src/index.ts | 28 ---------------------------- packages/theme/src/v4/baseTheme.ts | 25 +++++++++++++------------ packages/theme/src/v4/index.ts | 8 ++++---- packages/theme/src/v4/themes.ts | 6 +++--- packages/theme/src/v4/types.ts | 3 ++- 5 files changed, 22 insertions(+), 48 deletions(-) diff --git a/packages/theme/src/index.ts b/packages/theme/src/index.ts index 8fdb961705..55bcf3beaa 100644 --- a/packages/theme/src/index.ts +++ b/packages/theme/src/index.ts @@ -24,31 +24,3 @@ export * from './compat'; export * from './base'; export * from './v4'; export * from './v5'; - -import { - createV4Theme, - createV4ThemeOptions, - createV4ThemeOverrides, -} from './v4'; -import type { SimpleV4ThemeOptions } from './v4'; - -/** - * @public - * @deprecated Use {@link createV4Theme} instead. - */ -export const createTheme = createV4Theme; -/** - * @public - * @deprecated Use {@link createV4ThemeOptions} instead. - */ -export const createThemeOptions = createV4ThemeOptions; -/** - * @public - * @deprecated Use {@link createV4ThemeOverrides} instead. - */ -export const createThemeOverrides = createV4ThemeOverrides; -/** - * @public - * @deprecated Use {@link SimpleV4ThemeOptions} instead. - */ -export type SimpleThemeOptions = SimpleV4ThemeOptions; diff --git a/packages/theme/src/v4/baseTheme.ts b/packages/theme/src/v4/baseTheme.ts index 9ae8507e9c..2349cfb13b 100644 --- a/packages/theme/src/v4/baseTheme.ts +++ b/packages/theme/src/v4/baseTheme.ts @@ -18,19 +18,18 @@ import { Theme as Mui5Theme } from '@mui/material/styles'; import { createTheme as createMuiTheme } from '@material-ui/core/styles'; import { GridProps, SwitchProps, Theme, ThemeOptions } from '@material-ui/core'; import { Overrides } from '@material-ui/core/styles/overrides'; -import { SimpleV4ThemeOptions } from './types'; +import { SimpleThemeOptions } from './types'; import { createBaseThemeOptions } from '../base'; import { defaultComponentThemes } from '../v5'; import { transformV5ComponentThemesToV4 } from '../compat/overrides'; /** - * A helper for creating theme options. + * An old helper for creating MUI v4 theme options. * * @public + * @deprecated Use {@link createBaseThemeOptions} instead. */ -export function createV4ThemeOptions( - options: SimpleV4ThemeOptions, -): ThemeOptions { +export function createThemeOptions(options: SimpleThemeOptions): ThemeOptions { return { props: { MuiGrid: defaultComponentThemes?.MuiGrid @@ -43,11 +42,12 @@ export function createV4ThemeOptions( } /** - * A helper for creating theme overrides. + * * An old helper for creating MUI v4 theme overrides. * * @public + * @deprecated Use {@link defaultComponentThemes} with {@link transformV5ComponentThemesToV4} instead. */ -export function createV4ThemeOverrides(theme: Theme): Overrides { +export function createThemeOverrides(theme: Theme): Overrides { return transformV5ComponentThemesToV4( // Safe but we have to make sure we don't use mui5 specific stuff in the default component themes theme as unknown as Mui5Theme, @@ -56,15 +56,16 @@ export function createV4ThemeOverrides(theme: Theme): Overrides { } /** - * Creates a Backstage MUI theme using a palette. The theme is created with the - * common Backstage options and component styles. + * The old method to create a Backstage MUI v4 theme using a palette. + * The theme is created with the common Backstage options and component styles. * * @public + * @deprecated Use {@link createUnifiedTheme} instead. */ -export function createV4Theme(options: SimpleV4ThemeOptions): Theme { - const themeOptions = createV4ThemeOptions(options); +export function createTheme(options: SimpleThemeOptions): Theme { + const themeOptions = createThemeOptions(options); const baseTheme = createMuiTheme(themeOptions); - const overrides = createV4ThemeOverrides(baseTheme); + const overrides = createThemeOverrides(baseTheme); const theme = { ...baseTheme, overrides }; return theme; } diff --git a/packages/theme/src/v4/index.ts b/packages/theme/src/v4/index.ts index 331e0e4c1e..fad349b849 100644 --- a/packages/theme/src/v4/index.ts +++ b/packages/theme/src/v4/index.ts @@ -16,14 +16,14 @@ export { darkTheme, lightTheme } from './themes'; export { - createV4Theme, - createV4ThemeOptions, - createV4ThemeOverrides, + createTheme, + createThemeOptions, + createThemeOverrides, } from './baseTheme'; export type { BackstagePalette, BackstagePaletteOptions, BackstageTheme, BackstageThemeOptions, - SimpleV4ThemeOptions, + SimpleThemeOptions, } from './types'; diff --git a/packages/theme/src/v4/themes.ts b/packages/theme/src/v4/themes.ts index e5ce783e0f..488ee58831 100644 --- a/packages/theme/src/v4/themes.ts +++ b/packages/theme/src/v4/themes.ts @@ -14,7 +14,7 @@ * limitations under the License. */ -import { createV4Theme } from './baseTheme'; +import { createTheme } from './baseTheme'; import { palettes } from '../base'; /** @@ -23,7 +23,7 @@ import { palettes } from '../base'; * @public * @deprecated Use {@link themes.light} instead. */ -export const lightTheme = createV4Theme({ +export const lightTheme = createTheme({ palette: palettes.light, }); @@ -33,6 +33,6 @@ export const lightTheme = createV4Theme({ * @public * @deprecated Use {@link themes.dark} instead. */ -export const darkTheme = createV4Theme({ +export const darkTheme = createTheme({ palette: palettes.dark, }); diff --git a/packages/theme/src/v4/types.ts b/packages/theme/src/v4/types.ts index ded91bec3f..24736e5d88 100644 --- a/packages/theme/src/v4/types.ts +++ b/packages/theme/src/v4/types.ts @@ -78,8 +78,9 @@ export interface BackstageTheme extends Theme { * of the backstage one. * * @public + * @deprecated Use {@link BaseThemeOptionsInput} instead. */ -export type SimpleV4ThemeOptions = { +export type SimpleThemeOptions = { palette: PaletteOptions; defaultPageTheme?: string; pageTheme?: Record; From 2c2e98562c4829b7a2a648cc06ff6fdd7e9c5afa Mon Sep 17 00:00:00 2001 From: Patrik Oldsberg Date: Sat, 31 Dec 2022 16:42:08 +0100 Subject: [PATCH 20/55] theme: update API report + fixes Signed-off-by: Patrik Oldsberg --- packages/theme/api-report.md | 233 +++++++++++++++++---- packages/theme/src/compat/UnifiedTheme.tsx | 8 +- packages/theme/src/compat/index.ts | 5 +- packages/theme/src/compat/overrides.ts | 6 +- packages/theme/src/compat/themes.ts | 5 + 5 files changed, 215 insertions(+), 42 deletions(-) diff --git a/packages/theme/api-report.md b/packages/theme/api-report.md index 131fa185ed..59c894ba19 100644 --- a/packages/theme/api-report.md +++ b/packages/theme/api-report.md @@ -3,15 +3,18 @@ > Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/). ```ts +import { ComponentsProps } from '@material-ui/core/styles/props'; import { Overrides } from '@material-ui/core/styles/overrides'; import { Palette } from '@material-ui/core/styles/createPalette'; import { PaletteOptions } from '@material-ui/core/styles/createPalette'; -import { PaletteOptions as PaletteOptions_2 } from '@mui/material/styles'; +import { PaletteOptions as PaletteOptions_2 } from '@mui/material/styles/createPalette'; import { default as React_2 } from 'react'; import { ReactNode } from 'react'; -import { Theme } from '@material-ui/core'; -import { ThemeOptions } from '@material-ui/core'; -import { ThemeOptions as ThemeOptions_2 } from '@mui/material/styles'; +import { Theme } from '@mui/material/styles'; +import { Theme as Theme_2 } from '@material-ui/core'; +import { ThemeOptions } from '@mui/material/styles'; +import { ThemeOptions as ThemeOptions_2 } from '@material-ui/core/styles'; +import { ThemeOptions as ThemeOptions_3 } from '@material-ui/core'; // @public @deprecated export type BackstagePalette = Palette & BackstagePaletteAdditions; @@ -84,7 +87,7 @@ export type BackstagePaletteOptions = PaletteOptions & BackstagePaletteAdditions; // @public @deprecated -export interface BackstageTheme extends Theme { +export interface BackstageTheme extends Theme_2 { // (undocumented) getPageTheme: (selector: PageThemeSelector) => PageTheme; // (undocumented) @@ -94,7 +97,7 @@ export interface BackstageTheme extends Theme { } // @public @deprecated -export interface BackstageThemeOptions extends ThemeOptions { +export interface BackstageThemeOptions extends ThemeOptions_3 { // (undocumented) getPageTheme: (selector: PageThemeSelector) => PageTheme; // (undocumented) @@ -163,31 +166,26 @@ export function createBaseThemeOptions( getPageTheme: ({ themeId }: PageThemeSelector) => PageTheme; }; -// @public @deprecated (undocumented) -export const createTheme: typeof createV4Theme; +// @public @deprecated +export function createTheme(options: SimpleThemeOptions): Theme_2; -// @public @deprecated (undocumented) -export const createThemeOptions: typeof createV4ThemeOptions; +// @public @deprecated +export function createThemeOptions(options: SimpleThemeOptions): ThemeOptions_3; -// @public @deprecated (undocumented) -export const createThemeOverrides: typeof createV4ThemeOverrides; +// @public @deprecated +export function createThemeOverrides(theme: Theme_2): Overrides; // @public -export function createV4Theme(options: SimpleV4ThemeOptions): Theme; +export function createUnifiedTheme(options: UnifiedThemeOptions): UnifiedTheme; // @public -export function createV4ThemeOptions( - options: SimpleV4ThemeOptions, -): ThemeOptions; +export function createUnifiedThemeFromV4(options: ThemeOptions_2): UnifiedTheme; + +// @public @deprecated +export const darkTheme: Theme_2; // @public -export function createV4ThemeOverrides(theme: Theme): Overrides; - -// @public -export const darkTheme: Theme; - -// @public -export const defaultComponentThemes: ThemeOptions_2['components']; +export const defaultComponentThemes: ThemeOptions['components']; // @public export function genPageTheme(props: { @@ -198,8 +196,8 @@ export function genPageTheme(props: { }; }): PageTheme; -// @public -export const lightTheme: Theme; +// @public @deprecated +export const lightTheme: Theme_2; // @public export type PageTheme = { @@ -218,13 +216,154 @@ export type PageThemeSelector = { }; // @public -export const shapes: Record; - -// @public @deprecated (undocumented) -export type SimpleThemeOptions = SimpleV4ThemeOptions; +export const palettes: { + light: { + type: 'light'; + mode: 'light'; + background: { + default: string; + }; + status: { + ok: string; + warning: string; + error: string; + running: string; + pending: string; + aborted: string; + }; + bursts: { + fontColor: string; + slackChannelText: string; + backgroundColor: { + default: string; + }; + gradient: { + linear: string; + }; + }; + primary: { + main: string; + }; + banner: { + info: string; + error: string; + text: string; + link: string; + warning: string; + }; + border: string; + textContrast: string; + textVerySubtle: string; + textSubtle: string; + highlight: string; + errorBackground: string; + warningBackground: string; + infoBackground: string; + errorText: string; + infoText: string; + warningText: string; + linkHover: string; + link: string; + gold: string; + navigation: { + background: string; + indicator: string; + color: string; + selectedColor: string; + navItem: { + hoverBackground: string; + }; + submenu: { + background: string; + }; + }; + pinSidebarButton: { + icon: string; + background: string; + }; + tabbar: { + indicator: string; + }; + }; + dark: { + type: 'dark'; + mode: 'dark'; + background: { + default: string; + }; + status: { + ok: string; + warning: string; + error: string; + running: string; + pending: string; + aborted: string; + }; + bursts: { + fontColor: string; + slackChannelText: string; + backgroundColor: { + default: string; + }; + gradient: { + linear: string; + }; + }; + primary: { + main: string; + dark: string; + }; + secondary: { + main: string; + }; + banner: { + info: string; + error: string; + text: string; + link: string; + warning: string; + }; + border: string; + textContrast: string; + textVerySubtle: string; + textSubtle: string; + highlight: string; + errorBackground: string; + warningBackground: string; + infoBackground: string; + errorText: string; + infoText: string; + warningText: string; + linkHover: string; + link: string; + gold: string; + navigation: { + background: string; + indicator: string; + color: string; + selectedColor: string; + navItem: { + hoverBackground: string; + }; + submenu: { + background: string; + }; + }; + pinSidebarButton: { + icon: string; + background: string; + }; + tabbar: { + indicator: string; + }; + }; +}; // @public -export type SimpleV4ThemeOptions = { +export const shapes: Record; + +// @public @deprecated +export type SimpleThemeOptions = { palette: PaletteOptions; defaultPageTheme?: string; pageTheme?: Record; @@ -233,12 +372,18 @@ export type SimpleV4ThemeOptions = { }; // @public -export type SimpleV5ThemeOptions = { - palette: PaletteOptions_2; - defaultPageTheme?: string; - pageTheme?: Record; - fontFamily?: string; - htmlFontSize?: number; +export const themes: { + light: UnifiedTheme; + dark: UnifiedTheme; +}; + +// @public +export function transformV5ComponentThemesToV4( + theme: Theme, + components?: ThemeOptions['components'], +): { + overrides: Overrides; + props: ComponentsProps; }; // @public @@ -247,6 +392,22 @@ export interface UnifiedTheme { getTheme(version: string): unknown | undefined; } +// @public +export interface UnifiedThemeOptions { + // (undocumented) + components?: ThemeOptions['components']; + // (undocumented) + defaultPageTheme?: string; + // (undocumented) + fontFamily?: string; + // (undocumented) + htmlFontSize?: number; + // (undocumented) + pageTheme?: Record; + // (undocumented) + palette: PaletteOptions & PaletteOptions_2; +} + // @public export function UnifiedThemeProvider( props: UnifiedThemeProviderProps, diff --git a/packages/theme/src/compat/UnifiedTheme.tsx b/packages/theme/src/compat/UnifiedTheme.tsx index d00999a8b1..dbb50c979e 100644 --- a/packages/theme/src/compat/UnifiedTheme.tsx +++ b/packages/theme/src/compat/UnifiedTheme.tsx @@ -70,9 +70,7 @@ export interface UnifiedThemeOptions { * * @public */ -export function createUnifiedTheme( - options: UnifiedThemeOptions, -): UnifiedThemeHolder { +export function createUnifiedTheme(options: UnifiedThemeOptions): UnifiedTheme { const themeOptions = createBaseThemeOptions(options); const components = { ...defaultComponentThemes, ...options.components }; const v5Theme = createV5Theme({ ...themeOptions, components }); @@ -88,7 +86,9 @@ export function createUnifiedTheme( * * @public */ -export function createUnifiedThemeFromV4(options: ThemeOptionsV4) { +export function createUnifiedThemeFromV4( + options: ThemeOptionsV4, +): UnifiedTheme { const v4Theme = createV4Theme(options); const v5Theme = adaptV4Theme(options as any); diff --git a/packages/theme/src/compat/index.ts b/packages/theme/src/compat/index.ts index 8b5e01e231..f5c805d3ed 100644 --- a/packages/theme/src/compat/index.ts +++ b/packages/theme/src/compat/index.ts @@ -14,7 +14,10 @@ * limitations under the License. */ -export { UnifiedThemeProvider } from './UnifiedThemeProvider'; +export { transformV5ComponentThemesToV4 } from './overrides'; +export { createUnifiedTheme, createUnifiedThemeFromV4 } from './UnifiedTheme'; +export type { UnifiedThemeOptions } from './UnifiedTheme'; export { themes } from './themes'; +export { UnifiedThemeProvider } from './UnifiedThemeProvider'; export type { UnifiedThemeProviderProps } from './UnifiedThemeProvider'; export type { UnifiedTheme } from './types'; diff --git a/packages/theme/src/compat/overrides.ts b/packages/theme/src/compat/overrides.ts index 8b6c3f94bc..a9e080af36 100644 --- a/packages/theme/src/compat/overrides.ts +++ b/packages/theme/src/compat/overrides.ts @@ -43,7 +43,11 @@ function adaptV5Override(theme: Theme, overrides: V5Override): V4Override { return overrides as V4Override; } -// Transform v5 theme overrides into a v4 theme, by converting the callback-based overrides +/** + * Transform MUI v5 component themes into a v4 theme props and overrides. + * + * @public + */ export function transformV5ComponentThemesToV4( theme: Theme, components: ThemeOptions['components'] = {}, diff --git a/packages/theme/src/compat/themes.ts b/packages/theme/src/compat/themes.ts index 7b5bae8029..24e1b1026b 100644 --- a/packages/theme/src/compat/themes.ts +++ b/packages/theme/src/compat/themes.ts @@ -17,6 +17,11 @@ import { palettes } from '../base'; import { createUnifiedTheme } from './UnifiedTheme'; +/** + * Built-in Backstage MUI themes. + * + * @public + */ export const themes = { light: createUnifiedTheme({ palette: palettes.light }), dark: createUnifiedTheme({ palette: palettes.dark }), From ac45497e1eba614e337e8be47970e06f6ceb27bb Mon Sep 17 00:00:00 2001 From: Patrik Oldsberg Date: Sat, 31 Dec 2022 16:47:46 +0100 Subject: [PATCH 21/55] theme: rename compat -> unified Signed-off-by: Patrik Oldsberg --- packages/theme/src/index.ts | 2 +- packages/theme/src/{compat => unified}/UnifiedTheme.tsx | 0 packages/theme/src/{compat => unified}/UnifiedThemeProvider.tsx | 0 packages/theme/src/{compat => unified}/index.ts | 0 packages/theme/src/{compat => unified}/overrides.test.ts | 0 packages/theme/src/{compat => unified}/overrides.ts | 0 packages/theme/src/{compat => unified}/themes.ts | 0 packages/theme/src/{compat => unified}/types.ts | 0 packages/theme/src/v4/baseTheme.ts | 2 +- 9 files changed, 2 insertions(+), 2 deletions(-) rename packages/theme/src/{compat => unified}/UnifiedTheme.tsx (100%) rename packages/theme/src/{compat => unified}/UnifiedThemeProvider.tsx (100%) rename packages/theme/src/{compat => unified}/index.ts (100%) rename packages/theme/src/{compat => unified}/overrides.test.ts (100%) rename packages/theme/src/{compat => unified}/overrides.ts (100%) rename packages/theme/src/{compat => unified}/themes.ts (100%) rename packages/theme/src/{compat => unified}/types.ts (100%) diff --git a/packages/theme/src/index.ts b/packages/theme/src/index.ts index 55bcf3beaa..b0e3590273 100644 --- a/packages/theme/src/index.ts +++ b/packages/theme/src/index.ts @@ -20,7 +20,7 @@ * @packageDocumentation */ -export * from './compat'; +export * from './unified'; export * from './base'; export * from './v4'; export * from './v5'; diff --git a/packages/theme/src/compat/UnifiedTheme.tsx b/packages/theme/src/unified/UnifiedTheme.tsx similarity index 100% rename from packages/theme/src/compat/UnifiedTheme.tsx rename to packages/theme/src/unified/UnifiedTheme.tsx diff --git a/packages/theme/src/compat/UnifiedThemeProvider.tsx b/packages/theme/src/unified/UnifiedThemeProvider.tsx similarity index 100% rename from packages/theme/src/compat/UnifiedThemeProvider.tsx rename to packages/theme/src/unified/UnifiedThemeProvider.tsx diff --git a/packages/theme/src/compat/index.ts b/packages/theme/src/unified/index.ts similarity index 100% rename from packages/theme/src/compat/index.ts rename to packages/theme/src/unified/index.ts diff --git a/packages/theme/src/compat/overrides.test.ts b/packages/theme/src/unified/overrides.test.ts similarity index 100% rename from packages/theme/src/compat/overrides.test.ts rename to packages/theme/src/unified/overrides.test.ts diff --git a/packages/theme/src/compat/overrides.ts b/packages/theme/src/unified/overrides.ts similarity index 100% rename from packages/theme/src/compat/overrides.ts rename to packages/theme/src/unified/overrides.ts diff --git a/packages/theme/src/compat/themes.ts b/packages/theme/src/unified/themes.ts similarity index 100% rename from packages/theme/src/compat/themes.ts rename to packages/theme/src/unified/themes.ts diff --git a/packages/theme/src/compat/types.ts b/packages/theme/src/unified/types.ts similarity index 100% rename from packages/theme/src/compat/types.ts rename to packages/theme/src/unified/types.ts diff --git a/packages/theme/src/v4/baseTheme.ts b/packages/theme/src/v4/baseTheme.ts index 2349cfb13b..411bcdf9a8 100644 --- a/packages/theme/src/v4/baseTheme.ts +++ b/packages/theme/src/v4/baseTheme.ts @@ -21,7 +21,7 @@ import { Overrides } from '@material-ui/core/styles/overrides'; import { SimpleThemeOptions } from './types'; import { createBaseThemeOptions } from '../base'; import { defaultComponentThemes } from '../v5'; -import { transformV5ComponentThemesToV4 } from '../compat/overrides'; +import { transformV5ComponentThemesToV4 } from '../unified/overrides'; /** * An old helper for creating MUI v4 theme options. From 879153617741ac081f3ff79cf71d444429cbdb15 Mon Sep 17 00:00:00 2001 From: Patrik Oldsberg Date: Sat, 31 Dec 2022 16:50:03 +0100 Subject: [PATCH 22/55] theme: fix UnifiedThemeProvider type Signed-off-by: Patrik Oldsberg --- packages/theme/api-report.md | 3 +-- packages/theme/src/unified/UnifiedThemeProvider.tsx | 6 ++++-- 2 files changed, 5 insertions(+), 4 deletions(-) diff --git a/packages/theme/api-report.md b/packages/theme/api-report.md index 59c894ba19..e8f7ef30f8 100644 --- a/packages/theme/api-report.md +++ b/packages/theme/api-report.md @@ -8,7 +8,6 @@ import { Overrides } from '@material-ui/core/styles/overrides'; import { Palette } from '@material-ui/core/styles/createPalette'; import { PaletteOptions } from '@material-ui/core/styles/createPalette'; import { PaletteOptions as PaletteOptions_2 } from '@mui/material/styles/createPalette'; -import { default as React_2 } from 'react'; import { ReactNode } from 'react'; import { Theme } from '@mui/material/styles'; import { Theme as Theme_2 } from '@material-ui/core'; @@ -411,7 +410,7 @@ export interface UnifiedThemeOptions { // @public export function UnifiedThemeProvider( props: UnifiedThemeProviderProps, -): React_2.ReactNode; +): JSX.Element; // @public export interface UnifiedThemeProviderProps { diff --git a/packages/theme/src/unified/UnifiedThemeProvider.tsx b/packages/theme/src/unified/UnifiedThemeProvider.tsx index 72fb708c23..93bceac022 100644 --- a/packages/theme/src/unified/UnifiedThemeProvider.tsx +++ b/packages/theme/src/unified/UnifiedThemeProvider.tsx @@ -42,11 +42,13 @@ export interface UnifiedThemeProviderProps { * * @public */ -export function UnifiedThemeProvider(props: UnifiedThemeProviderProps) { +export function UnifiedThemeProvider( + props: UnifiedThemeProviderProps, +): JSX.Element { const { children, theme, noCssBaseline } = props; let result = noCssBaseline ? ( - children + <>{children} ) : ( <> From 8bca331617f998d1c85ebf10a715e90116d7e6e5 Mon Sep 17 00:00:00 2001 From: Patrik Oldsberg Date: Sat, 31 Dec 2022 17:57:15 +0100 Subject: [PATCH 23/55] app-defaults: switch to use new unified themes Signed-off-by: Patrik Oldsberg --- packages/app-defaults/src/defaults/themes.tsx | 15 ++++++--------- 1 file changed, 6 insertions(+), 9 deletions(-) diff --git a/packages/app-defaults/src/defaults/themes.tsx b/packages/app-defaults/src/defaults/themes.tsx index 397c160168..10368bd3bc 100644 --- a/packages/app-defaults/src/defaults/themes.tsx +++ b/packages/app-defaults/src/defaults/themes.tsx @@ -15,11 +15,12 @@ */ import React from 'react'; -import { darkTheme, lightTheme } from '@backstage/theme'; +import { + UnifiedThemeProvider, + themes as builtinThemes, +} from '@backstage/theme'; import DarkIcon from '@material-ui/icons/Brightness2'; import LightIcon from '@material-ui/icons/WbSunny'; -import { ThemeProvider } from '@material-ui/core/styles'; -import CssBaseline from '@material-ui/core/CssBaseline'; import { AppTheme } from '@backstage/core-plugin-api'; export const themes: AppTheme[] = [ @@ -29,9 +30,7 @@ export const themes: AppTheme[] = [ variant: 'light', icon: , Provider: ({ children }) => ( - - {children} - + ), }, { @@ -40,9 +39,7 @@ export const themes: AppTheme[] = [ variant: 'dark', icon: , Provider: ({ children }) => ( - - {children} - + ), }, ]; From 3eca9ee94c0a5b8c1be28ccec041a6b70c8fcb1b Mon Sep 17 00:00:00 2001 From: Patrik Oldsberg Date: Sat, 31 Dec 2022 18:03:17 +0100 Subject: [PATCH 24/55] theme: add StyledEngineProvider for v5 theme Signed-off-by: Patrik Oldsberg --- packages/theme/src/unified/UnifiedThemeProvider.tsx | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/packages/theme/src/unified/UnifiedThemeProvider.tsx b/packages/theme/src/unified/UnifiedThemeProvider.tsx index 93bceac022..f2cc2d573f 100644 --- a/packages/theme/src/unified/UnifiedThemeProvider.tsx +++ b/packages/theme/src/unified/UnifiedThemeProvider.tsx @@ -20,6 +20,7 @@ import { ThemeProvider as Mui4Provider, } from '@material-ui/core/styles'; import { + StyledEngineProvider, Theme as Mui5Theme, ThemeProvider as Mui5Provider, } from '@mui/material/styles'; @@ -63,7 +64,11 @@ export function UnifiedThemeProvider( const v5Theme = theme.getTheme('v5'); if (v5Theme) { - result = {result}; + result = ( + + {result} + + ); } return result; From 6bdc603a5255ad85e753c20aaae1fa32ae232f2e Mon Sep 17 00:00:00 2001 From: Patrik Oldsberg Date: Sat, 31 Dec 2022 18:41:13 +0100 Subject: [PATCH 25/55] core-app-api: update app docs to reflect new theme API Signed-off-by: Patrik Oldsberg --- packages/core-app-api/src/app/types.ts | 12 ++---------- 1 file changed, 2 insertions(+), 10 deletions(-) diff --git a/packages/core-app-api/src/app/types.ts b/packages/core-app-api/src/app/types.ts index 3d9005b0c0..c34407ca3a 100644 --- a/packages/core-app-api/src/app/types.ts +++ b/packages/core-app-api/src/app/types.ts @@ -236,21 +236,13 @@ export type AppOptions = { * title: 'Light Theme', * variant: 'light', * icon: , - * Provider: ({ children }) => ( - * - * {children} - * - * ), + * Provider: ({ children }) => , * }, { * id: 'dark', * title: 'Dark Theme', * variant: 'dark', * icon: , - * Provider: ({ children }) => ( - * - * {children} - * - * ), + * Provider: ({ children }) => , * }] * ``` */ From 2a4cf543fb91b3ecf185f2be9f3348f0d1717ad3 Mon Sep 17 00:00:00 2001 From: Patrik Oldsberg Date: Sat, 31 Dec 2022 18:41:30 +0100 Subject: [PATCH 26/55] test-utils: use new theme API Signed-off-by: Patrik Oldsberg --- packages/test-utils/src/testUtils/appWrappers.tsx | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/packages/test-utils/src/testUtils/appWrappers.tsx b/packages/test-utils/src/testUtils/appWrappers.tsx index 8b644ad2d1..012cbe0b98 100644 --- a/packages/test-utils/src/testUtils/appWrappers.tsx +++ b/packages/test-utils/src/testUtils/appWrappers.tsx @@ -17,8 +17,7 @@ import React, { ComponentType, ReactNode, ReactElement } from 'react'; import { MemoryRouter } from 'react-router-dom'; import { Route } from 'react-router-dom'; -import { lightTheme } from '@backstage/theme'; -import { ThemeProvider } from '@material-ui/core/styles'; +import { UnifiedThemeProvider, themes } from '@backstage/theme'; import { CssBaseline } from '@material-ui/core'; import MockIcon from '@material-ui/icons/AcUnit'; import { createSpecializedApp } from '@backstage/core-app-api'; @@ -142,9 +141,9 @@ export function createTestAppWrapper( title: 'Test App Theme', variant: 'light', Provider: ({ children }) => ( - + {children} - + ), }, ], From bbc5f6cd6bd0150610d12b25a4d54edbed8558be Mon Sep 17 00:00:00 2001 From: Patrik Oldsberg Date: Sun, 1 Jan 2023 17:52:24 +0100 Subject: [PATCH 27/55] theme: add component style transform for v5 state to v4 Signed-off-by: Patrik Oldsberg --- packages/theme/src/unified/overrides.test.ts | 29 ++++++++++ packages/theme/src/unified/overrides.ts | 58 ++++++++++++++++--- .../theme/src/v5/defaultComponentThemes.ts | 10 ++-- 3 files changed, 84 insertions(+), 13 deletions(-) diff --git a/packages/theme/src/unified/overrides.test.ts b/packages/theme/src/unified/overrides.test.ts index 68fd883168..4cf2fdedf5 100644 --- a/packages/theme/src/unified/overrides.test.ts +++ b/packages/theme/src/unified/overrides.test.ts @@ -135,4 +135,33 @@ describe('transformV5ComponentThemesToV4', () => { }, }); }); + + it('transform state styles', () => { + expect( + transformV5ComponentThemesToV4(mockTheme, { + MuiButton: { + styleOverrides: { + root: { + color: 'green', + '&.Mui-disabled': { + color: 'red', + }, + }, + }, + }, + }), + ).toEqual({ + overrides: { + MuiButton: { + root: { + color: 'green', + }, + disabled: { + color: 'red', + }, + }, + }, + props: {}, + }); + }); }); diff --git a/packages/theme/src/unified/overrides.ts b/packages/theme/src/unified/overrides.ts index a9e080af36..5c5990c65d 100644 --- a/packages/theme/src/unified/overrides.ts +++ b/packages/theme/src/unified/overrides.ts @@ -17,18 +17,26 @@ import { Overrides } from '@material-ui/core/styles/overrides'; import { ComponentsProps } from '@material-ui/core/styles/props'; import { ComponentsOverrides, Theme, ThemeOptions } from '@mui/material/styles'; +import { CSSProperties } from 'react'; type V5Override = ComponentsOverrides[keyof ComponentsOverrides]; type V4Override = Overrides[keyof Overrides]; +type StaticStyleRules = Record< + string, + CSSProperties | Record +>; // Converts callback-based overrides to static styles, e.g. // { root: theme => ({ color: theme.color }) } -> { root: { color: 'red' } } -function adaptV5Override(theme: Theme, overrides: V5Override): V4Override { - if (!overrides) { - return overrides as V4Override; +function adaptV5Override( + theme: Theme, + overrides: V5Override, +): StaticStyleRules | undefined { + if (!overrides || typeof overrides === 'string') { + return undefined; } if (typeof overrides === 'function') { - return overrides(theme) as V4Override; + return overrides(theme) as StaticStyleRules; } if (typeof overrides === 'object') { return Object.fromEntries( @@ -40,7 +48,42 @@ function adaptV5Override(theme: Theme, overrides: V5Override): V4Override { }), ); } - return overrides as V4Override; + return overrides as StaticStyleRules; +} + +const stateStyleKeyPattern = /^&.Mui-([\w-]+)$/; + +// Move state style overrides to the top level, e.g. +// { root: { '&.Mui-active': { color: 'red' } } } -> { active: { color: 'red' } } +function extractV5StateOverrides( + overrides: StaticStyleRules | undefined, +): StaticStyleRules | undefined { + let output = overrides; + if (!overrides || typeof overrides !== 'object') { + return output; + } + for (const className of Object.keys(overrides)) { + const styles = overrides[className]; + if (!styles || typeof styles !== 'object') { + continue; + } + for (const _styleKey of Object.keys(styles)) { + const styleKey = _styleKey as keyof typeof styles; + const match = styleKey.match(stateStyleKeyPattern); + if (match) { + const [, state] = match; + const { [styleKey]: stateStyles, ...restStyles } = styles; + if (stateStyles) { + output = { + ...output, + [className]: restStyles, + [state]: stateStyles, + }; + } + } + } + } + return output; } /** @@ -61,9 +104,8 @@ export function transformV5ComponentThemesToV4( continue; } if ('styleOverrides' in component) { - overrides[name] = adaptV5Override( - theme, - component.styleOverrides as V5Override, + overrides[name] = extractV5StateOverrides( + adaptV5Override(theme, component.styleOverrides as V5Override), ); } if ('defaultProps' in component) { diff --git a/packages/theme/src/v5/defaultComponentThemes.ts b/packages/theme/src/v5/defaultComponentThemes.ts index 288ba819bf..15cba7f6b6 100644 --- a/packages/theme/src/v5/defaultComponentThemes.ts +++ b/packages/theme/src/v5/defaultComponentThemes.ts @@ -139,11 +139,11 @@ export const defaultComponentThemes: ThemeOptions['components'] = { '&:focus': { color: 'inherit', }, - }, - // Bold font for highlighting selected column - active: { - fontWeight: 'bold', - color: 'inherit', + // Bold font for highlighting selected column + '&.Mui-active': { + fontWeight: 'bold', + color: 'inherit', + }, }, }, }, From d2a81a24b415bffe10cffdf2159a3a7598ed9778 Mon Sep 17 00:00:00 2001 From: Patrik Oldsberg Date: Sun, 1 Jan 2023 17:52:55 +0100 Subject: [PATCH 28/55] theme: fix pxpx Signed-off-by: Patrik Oldsberg --- .../theme/src/v5/defaultComponentThemes.ts | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/packages/theme/src/v5/defaultComponentThemes.ts b/packages/theme/src/v5/defaultComponentThemes.ts index 15cba7f6b6..9b4a7fde6b 100644 --- a/packages/theme/src/v5/defaultComponentThemes.ts +++ b/packages/theme/src/v5/defaultComponentThemes.ts @@ -178,23 +178,23 @@ export const defaultComponentThemes: ThemeOptions['components'] = { color: theme.palette.text.primary, }), label: ({ theme }) => ({ - lineHeight: `${theme.spacing(2.5)}px`, + lineHeight: theme.spacing(2.5), fontWeight: theme.typography.fontWeightMedium, - fontSize: `${theme.spacing(1.75)}px`, + fontSize: theme.spacing(1.75), }), labelSmall: ({ theme }) => ({ - fontSize: `${theme.spacing(1.5)}px`, + fontSize: theme.spacing(1.5), }), deleteIcon: ({ theme }) => ({ color: theme.palette.grey[500], - width: `${theme.spacing(3)}px`, - height: `${theme.spacing(3)}px`, - margin: `0 ${theme.spacing(0.75)}px 0 -${theme.spacing(0.75)}px`, + width: theme.spacing(3), + height: theme.spacing(3), + margin: `0 ${theme.spacing(0.75)}px 0 -${theme.spacing(0.75)}`, }), deleteIconSmall: ({ theme }) => ({ - width: `${theme.spacing(2)}px`, - height: `${theme.spacing(2)}px`, - margin: `0 ${theme.spacing(0.5)}px 0 -${theme.spacing(0.5)}px`, + width: theme.spacing(2), + height: theme.spacing(2), + margin: `0 ${theme.spacing(0.5)}px 0 -${theme.spacing(0.5)}`, }), }, }, From ff91bfa9936fc19cccb8cd30246f254eac8575ff Mon Sep 17 00:00:00 2001 From: Patrik Oldsberg Date: Sun, 1 Jan 2023 17:54:14 +0100 Subject: [PATCH 29/55] theme: declare default v5 theme Signed-off-by: Patrik Oldsberg --- packages/theme/src/v5/types.ts | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/packages/theme/src/v5/types.ts b/packages/theme/src/v5/types.ts index f679d9e53b..5369cda37b 100644 --- a/packages/theme/src/v5/types.ts +++ b/packages/theme/src/v5/types.ts @@ -14,6 +14,7 @@ * limitations under the License. */ +import { Theme } from '@mui/material/styles'; import { BackstagePaletteAdditions, BackstageThemeAdditions, @@ -31,6 +32,10 @@ declare module '@mui/material/styles/createTheme' { interface ThemeOptions extends BackstageThemeAdditions {} } +declare module '@mui/private-theming/defaultTheme' { + interface DefaultTheme extends Theme {} +} + // This is a workaround for missing methods in React 17 that MUI v5 depends on // See https://github.com/mui/material-ui/issues/35287 declare global { From 7fa73df55e3e9f3108f4ce8808abc426375471e5 Mon Sep 17 00:00:00 2001 From: Patrik Oldsberg Date: Sun, 1 Jan 2023 18:12:16 +0100 Subject: [PATCH 30/55] theme: add transform for CssBaseline to fix v5 style Signed-off-by: Patrik Oldsberg --- packages/theme/src/unified/overrides.test.ts | 6 +-- packages/theme/src/unified/overrides.ts | 39 +++++++++++++++---- .../theme/src/v5/defaultComponentThemes.ts | 26 ++++++------- 3 files changed, 46 insertions(+), 25 deletions(-) diff --git a/packages/theme/src/unified/overrides.test.ts b/packages/theme/src/unified/overrides.test.ts index 4cf2fdedf5..38b4738444 100644 --- a/packages/theme/src/unified/overrides.test.ts +++ b/packages/theme/src/unified/overrides.test.ts @@ -107,10 +107,8 @@ describe('transformV5ComponentThemesToV4', () => { transformV5ComponentThemesToV4(mockTheme, { MuiCssBaseline: { styleOverrides: theme => ({ - '@global': { - html: { - color: theme.palette.primary.main, - }, + html: { + color: theme.palette.primary.main, }, }), defaultProps: { diff --git a/packages/theme/src/unified/overrides.ts b/packages/theme/src/unified/overrides.ts index 5c5990c65d..db1fb54c87 100644 --- a/packages/theme/src/unified/overrides.ts +++ b/packages/theme/src/unified/overrides.ts @@ -19,13 +19,34 @@ import { ComponentsProps } from '@material-ui/core/styles/props'; import { ComponentsOverrides, Theme, ThemeOptions } from '@mui/material/styles'; import { CSSProperties } from 'react'; -type V5Override = ComponentsOverrides[keyof ComponentsOverrides]; +type V5Override = ComponentsOverrides[Exclude< + keyof ComponentsOverrides, + 'MuiCssBaseline' +>]; type V4Override = Overrides[keyof Overrides]; type StaticStyleRules = Record< string, CSSProperties | Record >; +// Converts callback-based overrides to static styles, e.g. +// { root: theme => ({ color: theme.color }) } -> { root: { color: 'red' } } +function adaptV5CssBaselineOverride( + theme: Theme, + overrides: ComponentsOverrides['MuiCssBaseline'], +): StaticStyleRules | undefined { + if (!overrides || typeof overrides === 'string') { + return undefined; + } + + const styles = typeof overrides === 'function' ? overrides(theme) : overrides; + if (styles) { + return { '@global': styles } as StaticStyleRules; + } + + return undefined; +} + // Converts callback-based overrides to static styles, e.g. // { root: theme => ({ color: theme.color }) } -> { root: { color: 'red' } } function adaptV5Override( @@ -35,9 +56,6 @@ function adaptV5Override( if (!overrides || typeof overrides === 'string') { return undefined; } - if (typeof overrides === 'function') { - return overrides(theme) as StaticStyleRules; - } if (typeof overrides === 'object') { return Object.fromEntries( Object.entries(overrides).map(([className, style]) => { @@ -104,9 +122,16 @@ export function transformV5ComponentThemesToV4( continue; } if ('styleOverrides' in component) { - overrides[name] = extractV5StateOverrides( - adaptV5Override(theme, component.styleOverrides as V5Override), - ); + if (name === 'MuiCssBaseline') { + overrides[name] = adaptV5CssBaselineOverride( + theme, + component.styleOverrides as ComponentsOverrides['MuiCssBaseline'], + ); + } else { + overrides[name] = extractV5StateOverrides( + adaptV5Override(theme, component.styleOverrides as V5Override), + ); + } } if ('defaultProps' in component) { props[name] = component.defaultProps; diff --git a/packages/theme/src/v5/defaultComponentThemes.ts b/packages/theme/src/v5/defaultComponentThemes.ts index 9b4a7fde6b..eec52e1c8b 100644 --- a/packages/theme/src/v5/defaultComponentThemes.ts +++ b/packages/theme/src/v5/defaultComponentThemes.ts @@ -24,20 +24,18 @@ import { darken, lighten, ThemeOptions } from '@mui/material/styles'; export const defaultComponentThemes: ThemeOptions['components'] = { MuiCssBaseline: { styleOverrides: theme => ({ - '@global': { - html: { - height: '100%', - fontFamily: theme.typography.fontFamily, - }, - body: { - height: '100%', - fontFamily: theme.typography.fontFamily, - 'overscroll-behavior-y': 'none', - }, - a: { - color: 'inherit', - textDecoration: 'none', - }, + html: { + height: '100%', + fontFamily: theme.typography.fontFamily, + }, + body: { + height: '100%', + fontFamily: theme.typography.fontFamily, + overscrollBehaviorY: 'none', + }, + a: { + color: 'inherit', + textDecoration: 'none', }, }), }, From 43c55754919407a6d700a9133ff6eb8db50858c2 Mon Sep 17 00:00:00 2001 From: Patrik Oldsberg Date: Sun, 1 Jan 2023 18:13:16 +0100 Subject: [PATCH 31/55] theme: separated css classes and detect css baseline in unified theme provider Signed-off-by: Patrik Oldsberg --- .../src/unified/UnifiedThemeProvider.tsx | 51 ++++++++++++++----- 1 file changed, 39 insertions(+), 12 deletions(-) diff --git a/packages/theme/src/unified/UnifiedThemeProvider.tsx b/packages/theme/src/unified/UnifiedThemeProvider.tsx index f2cc2d573f..75fcc3c6ae 100644 --- a/packages/theme/src/unified/UnifiedThemeProvider.tsx +++ b/packages/theme/src/unified/UnifiedThemeProvider.tsx @@ -16,6 +16,7 @@ import React, { ReactNode } from 'react'; import { + StylesProvider as Mui4StylesProvider, Theme as Mui4Theme, ThemeProvider as Mui4Provider, } from '@material-ui/core/styles'; @@ -24,9 +25,21 @@ import { Theme as Mui5Theme, ThemeProvider as Mui5Provider, } from '@mui/material/styles'; -import CssBaseline from '@mui/material/CssBaseline'; +import { + StylesProvider as Mui5StylesProvider, + createGenerateClassName, +} from '@mui/styles'; +import Mui4CssBaseline from '@material-ui/core/CssBaseline'; +import Mui5CssBaseline from '@mui/material/CssBaseline'; import { UnifiedTheme } from './types'; +const generateV4ClassName = createGenerateClassName({ + seed: 'm4', +}); +const generateV5ClassName = createGenerateClassName({ + seed: 'm5', +}); + /** * Props for {@link UnifiedThemeProvider}. * @@ -46,28 +59,42 @@ export interface UnifiedThemeProviderProps { export function UnifiedThemeProvider( props: UnifiedThemeProviderProps, ): JSX.Element { - const { children, theme, noCssBaseline } = props; + const { children, theme, noCssBaseline = false } = props; - let result = noCssBaseline ? ( - <>{children} - ) : ( + const v4Theme = theme.getTheme('v4'); + const v5Theme = theme.getTheme('v5'); + + let cssBaseline: JSX.Element | undefined = undefined; + if (!noCssBaseline) { + if (v5Theme) { + cssBaseline = ; + } else if (v4Theme) { + cssBaseline = ; + } + } + + let result = ( <> - + {cssBaseline} {children} ); - const v4Theme = theme.getTheme('v4'); if (v4Theme) { - result = {result}; + result = ( + + {result} + + ); } - const v5Theme = theme.getTheme('v5'); if (v5Theme) { result = ( - - {result} - + + + {result} + + ); } From 033754c242cd634ec52760e491b05c3f6981b06b Mon Sep 17 00:00:00 2001 From: Patrik Oldsberg Date: Sun, 1 Jan 2023 18:31:02 +0100 Subject: [PATCH 32/55] theme: explicit background paper color Signed-off-by: Patrik Oldsberg --- packages/theme/src/base/palettes.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/theme/src/base/palettes.ts b/packages/theme/src/base/palettes.ts index f049237f60..c230ce94c0 100644 --- a/packages/theme/src/base/palettes.ts +++ b/packages/theme/src/base/palettes.ts @@ -25,6 +25,7 @@ export const palettes = { mode: 'light' as const, background: { default: '#F8F8F8', + paper: '#FAFAFA', }, status: { ok: '#1DB954', @@ -94,6 +95,7 @@ export const palettes = { mode: 'dark' as const, background: { default: '#333333', + paper: '#424242', }, status: { ok: '#71CF88', From 3780167d8e81d37a42b624ba331f060d100dc62f Mon Sep 17 00:00:00 2001 From: Patrik Oldsberg Date: Sun, 1 Jan 2023 19:16:50 +0100 Subject: [PATCH 33/55] graphiql: migrate to mui 5 Signed-off-by: Patrik Oldsberg --- plugins/graphiql/package.json | 7 ++++--- .../GraphiQLBrowser/GraphiQLBrowser.tsx | 15 ++++++++++----- .../src/components/GraphiQLPage/GraphiQLPage.tsx | 2 +- 3 files changed, 15 insertions(+), 9 deletions(-) diff --git a/plugins/graphiql/package.json b/plugins/graphiql/package.json index d5dae8c2ec..6cc65e8e80 100644 --- a/plugins/graphiql/package.json +++ b/plugins/graphiql/package.json @@ -35,9 +35,10 @@ "@backstage/core-components": "workspace:^", "@backstage/core-plugin-api": "workspace:^", "@backstage/theme": "workspace:^", - "@material-ui/core": "^4.12.2", - "@material-ui/icons": "^4.9.1", - "@material-ui/lab": "4.0.0-alpha.61", + "@mui/icons-material": "^5.11.0", + "@mui/lab": "5.0.0-alpha.114", + "@mui/material": "^5.11.2", + "@mui/styles": "^5.11.2", "graphiql": "^1.5.12", "graphql": "^16.0.0", "graphql-ws": "^5.4.1", diff --git a/plugins/graphiql/src/components/GraphiQLBrowser/GraphiQLBrowser.tsx b/plugins/graphiql/src/components/GraphiQLBrowser/GraphiQLBrowser.tsx index dd38f513be..058801dabf 100644 --- a/plugins/graphiql/src/components/GraphiQLBrowser/GraphiQLBrowser.tsx +++ b/plugins/graphiql/src/components/GraphiQLBrowser/GraphiQLBrowser.tsx @@ -15,18 +15,18 @@ */ import React, { useState, Suspense } from 'react'; -import { Tabs, Tab, makeStyles, Typography, Divider } from '@material-ui/core'; +import { Tabs, Tab, Typography, Divider } from '@mui/material'; +import makeStyles from '@mui/styles/makeStyles'; import 'graphiql/graphiql.css'; import { StorageBucket } from '../../lib/storage'; import { GraphQLEndpoint } from '../../lib/api'; -import { BackstageTheme } from '@backstage/theme'; import { Progress } from '@backstage/core-components'; const GraphiQL = React.lazy(() => import('graphiql').then(m => ({ default: m.GraphiQL })), ); -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles(theme => ({ root: { height: '100%', display: 'flex', @@ -69,10 +69,15 @@ export const GraphiQLBrowser = (props: GraphiQLBrowserProps) => { classes={{ root: classes.tabs }} value={tabIndex} onChange={(_, value) => setTabIndex(value)} - indicatorColor="primary" + textColor="inherit" > {endpoints.map(({ title }, index) => ( - + ))} diff --git a/plugins/graphiql/src/components/GraphiQLPage/GraphiQLPage.tsx b/plugins/graphiql/src/components/GraphiQLPage/GraphiQLPage.tsx index 0b4399948a..b075e0d478 100644 --- a/plugins/graphiql/src/components/GraphiQLPage/GraphiQLPage.tsx +++ b/plugins/graphiql/src/components/GraphiQLPage/GraphiQLPage.tsx @@ -19,7 +19,7 @@ import useAsync from 'react-use/lib/useAsync'; import 'graphiql/graphiql.css'; import { graphQlBrowseApiRef } from '../../lib/api'; import { GraphiQLBrowser } from '../GraphiQLBrowser'; -import { Typography } from '@material-ui/core'; +import { Typography } from '@mui/material'; import { Content, Header, From 623ed7527b9b503ddcdd3ecd0f792da6c019e057 Mon Sep 17 00:00:00 2001 From: Patrik Oldsberg Date: Sun, 1 Jan 2023 19:29:43 +0100 Subject: [PATCH 34/55] theme: update API report Signed-off-by: Patrik Oldsberg --- packages/theme/api-report.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/theme/api-report.md b/packages/theme/api-report.md index e8f7ef30f8..763cc48e41 100644 --- a/packages/theme/api-report.md +++ b/packages/theme/api-report.md @@ -221,6 +221,7 @@ export const palettes: { mode: 'light'; background: { default: string; + paper: string; }; status: { ok: string; @@ -289,6 +290,7 @@ export const palettes: { mode: 'dark'; background: { default: string; + paper: string; }; status: { ok: string; From 1268ec01d9bcd32b14d19d4d1a8d59a16ae3ff6b Mon Sep 17 00:00:00 2001 From: Patrik Oldsberg Date: Sun, 1 Jan 2023 22:00:13 +0100 Subject: [PATCH 35/55] theme: remove nonce field from react type workaround to unbreak material-table Signed-off-by: Patrik Oldsberg --- packages/theme/src/v5/types.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/theme/src/v5/types.ts b/packages/theme/src/v5/types.ts index 5369cda37b..293383180a 100644 --- a/packages/theme/src/v5/types.ts +++ b/packages/theme/src/v5/types.ts @@ -43,7 +43,6 @@ declare global { interface DOMAttributes { onResize?: (event: Event) => void; onResizeCapture?: (event: Event) => void; - nonce?: string | undefined; } } } From c545211e917aba1a1cfafaaa1fcac7762dd997eb Mon Sep 17 00:00:00 2001 From: Patrik Oldsberg Date: Sun, 1 Jan 2023 22:01:11 +0100 Subject: [PATCH 36/55] yarn.lock: dedup jss Signed-off-by: Patrik Oldsberg --- packages/theme/package.json | 4 - yarn.lock | 294 ++++++++++-------------------------- 2 files changed, 77 insertions(+), 221 deletions(-) diff --git a/packages/theme/package.json b/packages/theme/package.json index dd741581a4..b47c5e256d 100644 --- a/packages/theme/package.json +++ b/packages/theme/package.json @@ -38,10 +38,6 @@ "@mui/material": "^5.11.2", "@mui/styles": "^5.11.2" }, - "peerDependencies": { - "@types/react": "^16.13.1 || ^17.0.0", - "react": "^16.13.1 || ^17.0.0" - }, "peerDependencies": { "react": "^16.13.1 || ^17.0.0", "react-dom": "^16.13.1 || ^17.0.0" diff --git a/yarn.lock b/yarn.lock index 784c38bb73..9e1a19ab4f 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1,3 +1,6 @@ +# This file is generated by running "yarn install" inside your project. +# Manual changes might be lost - proceed with caution! + __metadata: version: 6 cacheKey: 8 @@ -3469,15 +3472,6 @@ __metadata: languageName: node linkType: hard -"@babel/runtime@npm:^7.0.0, @babel/runtime@npm:^7.1.2, @babel/runtime@npm:^7.10.1, @babel/runtime@npm:^7.10.2, @babel/runtime@npm:^7.12.1, @babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.14.6, @babel/runtime@npm:^7.15.4, @babel/runtime@npm:^7.18.3, @babel/runtime@npm:^7.18.6, @babel/runtime@npm:^7.18.9, @babel/runtime@npm:^7.20.1, @babel/runtime@npm:^7.20.6, @babel/runtime@npm:^7.20.7, @babel/runtime@npm:^7.3.1, @babel/runtime@npm:^7.4.4, @babel/runtime@npm:^7.5.5, @babel/runtime@npm:^7.6.0, @babel/runtime@npm:^7.7.2, @babel/runtime@npm:^7.7.6, @babel/runtime@npm:^7.8.3, @babel/runtime@npm:^7.8.4, @babel/runtime@npm:^7.8.7, @babel/runtime@npm:^7.9.2": - version: 7.20.7 - resolution: "@babel/runtime@npm:7.20.7" - dependencies: - regenerator-runtime: ^0.13.11 - checksum: 4629ce5c46f06cca9cfb9b7fc00d48003335a809888e2b91ec2069a2dcfbfef738480cff32ba81e0b7c290f8918e5c22ddcf2b710001464ee84ba62c7e32a3a3 - languageName: node - linkType: hard - "@babel/runtime@npm:^7.0.0, @babel/runtime@npm:^7.1.2, @babel/runtime@npm:^7.10.1, @babel/runtime@npm:^7.12.1, @babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.14.6, @babel/runtime@npm:^7.15.4, @babel/runtime@npm:^7.18.3, @babel/runtime@npm:^7.18.6, @babel/runtime@npm:^7.2.0, @babel/runtime@npm:^7.20.1, @babel/runtime@npm:^7.20.13, @babel/runtime@npm:^7.20.7, @babel/runtime@npm:^7.3.1, @babel/runtime@npm:^7.4.4, @babel/runtime@npm:^7.5.5, @babel/runtime@npm:^7.6.0, @babel/runtime@npm:^7.7.6, @babel/runtime@npm:^7.8.3, @babel/runtime@npm:^7.8.4, @babel/runtime@npm:^7.8.7, @babel/runtime@npm:^7.9.2": version: 7.21.0 resolution: "@babel/runtime@npm:7.21.0" @@ -3487,12 +3481,12 @@ __metadata: languageName: node linkType: hard -"@babel/runtime@npm:^7.0.0, @babel/runtime@npm:^7.1.2, @babel/runtime@npm:^7.10.1, @babel/runtime@npm:^7.12.1, @babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.14.6, @babel/runtime@npm:^7.15.4, @babel/runtime@npm:^7.18.3, @babel/runtime@npm:^7.18.6, @babel/runtime@npm:^7.2.0, @babel/runtime@npm:^7.20.1, @babel/runtime@npm:^7.20.7, @babel/runtime@npm:^7.3.1, @babel/runtime@npm:^7.4.4, @babel/runtime@npm:^7.5.5, @babel/runtime@npm:^7.6.0, @babel/runtime@npm:^7.7.6, @babel/runtime@npm:^7.8.3, @babel/runtime@npm:^7.8.4, @babel/runtime@npm:^7.8.7, @babel/runtime@npm:^7.9.2": - version: 7.21.0 - resolution: "@babel/runtime@npm:7.21.0" +"@babel/runtime@npm:^7.20.6": + version: 7.20.7 + resolution: "@babel/runtime@npm:7.20.7" dependencies: regenerator-runtime: ^0.13.11 - checksum: 7b33e25bfa9e0e1b9e8828bb61b2d32bdd46b41b07ba7cb43319ad08efc6fda8eb89445193e67d6541814627df0ca59122c0ea795e412b99c5183a0540d338ab + checksum: 4629ce5c46f06cca9cfb9b7fc00d48003335a809888e2b91ec2069a2dcfbfef738480cff32ba81e0b7c290f8918e5c22ddcf2b710001464ee84ba62c7e32a3a3 languageName: node linkType: hard @@ -6975,9 +6969,10 @@ __metadata: "@backstage/dev-utils": "workspace:^" "@backstage/test-utils": "workspace:^" "@backstage/theme": "workspace:^" - "@material-ui/core": ^4.12.2 - "@material-ui/icons": ^4.9.1 - "@material-ui/lab": 4.0.0-alpha.61 + "@mui/icons-material": ^5.11.0 + "@mui/lab": 5.0.0-alpha.114 + "@mui/material": ^5.11.2 + "@mui/styles": ^5.11.2 "@testing-library/dom": ^8.0.0 "@testing-library/jest-dom": ^5.10.1 "@testing-library/react": ^12.1.3 @@ -9647,9 +9642,10 @@ __metadata: "@material-ui/core": ^4.12.2 "@mui/material": ^5.11.2 "@mui/styles": ^5.11.2 - peerDependencies: "@types/react": ^16.13.1 || ^17.0.0 + peerDependencies: react: ^16.13.1 || ^17.0.0 + react-dom: ^16.13.1 || ^17.0.0 languageName: unknown linkType: soft @@ -10224,16 +10220,7 @@ __metadata: languageName: node linkType: hard -"@emotion/is-prop-valid@npm:^1.1.0": - version: 1.1.2 - resolution: "@emotion/is-prop-valid@npm:1.1.2" - dependencies: - "@emotion/memoize": ^0.7.4 - checksum: 58b1f2d429a589f8f5bc2c33a8732cbb7bbcb17131a103511ef9a94ac754d7eeb53d627f947da480cd977f9d419fd92e244991680292f3287204159652745707 - languageName: node - linkType: hard - -"@emotion/is-prop-valid@npm:^1.2.0": +"@emotion/is-prop-valid@npm:^1.1.0, @emotion/is-prop-valid@npm:^1.2.0": version: 1.2.0 resolution: "@emotion/is-prop-valid@npm:1.2.0" dependencies: @@ -10242,13 +10229,6 @@ __metadata: languageName: node linkType: hard -"@emotion/memoize@npm:^0.7.4": - version: 0.7.5 - resolution: "@emotion/memoize@npm:0.7.5" - checksum: 83da8d4a7649a92c72f960817692bc6be13cc13e107b9f7e878d63766525ed4402881bfeb3cda61145c050281e7e260f114a0a2870515527346f2ef896b915b3 - languageName: node - linkType: hard - "@emotion/memoize@npm:^0.8.0": version: 0.8.0 resolution: "@emotion/memoize@npm:0.8.0" @@ -10387,13 +10367,6 @@ __metadata: languageName: node linkType: hard -"@esbuild/android-arm64@npm:0.16.14": - version: 0.16.14 - resolution: "@esbuild/android-arm64@npm:0.16.14" - conditions: os=android & cpu=arm64 - languageName: node - linkType: hard - "@esbuild/android-arm64@npm:0.16.17": version: 0.16.17 resolution: "@esbuild/android-arm64@npm:0.16.17" @@ -12944,6 +12917,52 @@ __metadata: languageName: node linkType: hard +"@mui/icons-material@npm:^5.11.0": + version: 5.11.0 + resolution: "@mui/icons-material@npm:5.11.0" + dependencies: + "@babel/runtime": ^7.20.6 + peerDependencies: + "@mui/material": ^5.0.0 + "@types/react": ^17.0.0 || ^18.0.0 + react: ^17.0.0 || ^18.0.0 + peerDependenciesMeta: + "@types/react": + optional: true + checksum: 764c1185b3432f0228f3c5217b0e218b10f106fa96d305dfc62c0ef5afd2a7a087b0d664fd0a8171282e195c18d3ee073d5f037901a2bed1a1519a70fbb0501c + languageName: node + linkType: hard + +"@mui/lab@npm:5.0.0-alpha.114": + version: 5.0.0-alpha.114 + resolution: "@mui/lab@npm:5.0.0-alpha.114" + dependencies: + "@babel/runtime": ^7.20.7 + "@mui/base": 5.0.0-alpha.112 + "@mui/system": ^5.11.2 + "@mui/types": ^7.2.3 + "@mui/utils": ^5.11.2 + clsx: ^1.2.1 + prop-types: ^15.8.1 + react-is: ^18.2.0 + peerDependencies: + "@emotion/react": ^11.5.0 + "@emotion/styled": ^11.3.0 + "@mui/material": ^5.0.0 + "@types/react": ^17.0.0 || ^18.0.0 + react: ^17.0.0 || ^18.0.0 + react-dom: ^17.0.0 || ^18.0.0 + peerDependenciesMeta: + "@emotion/react": + optional: true + "@emotion/styled": + optional: true + "@types/react": + optional: true + checksum: 0b6441e7f7a69e2a6910f044ef2a222462a219f61e3a05c023484508e7f14a5fe6baeddf08b37bceab357c7cb0eed90324ac42ecd8e59a6eb6e1c801ea01504a + languageName: node + linkType: hard + "@mui/material@npm:^5.11.2": version: 5.11.2 resolution: "@mui/material@npm:5.11.2" @@ -16986,16 +17005,7 @@ __metadata: languageName: node linkType: hard -"@types/react-transition-group@npm:^4.2.0": - version: 4.2.4 - resolution: "@types/react-transition-group@npm:4.2.4" - dependencies: - "@types/react": "*" - checksum: a8abb3ad3c6e0575c630b591503a78ae3a94e21d1285905a49c36168e5d3de68b0886e2c6d75b751e30f2dc6e4245351cde30e4b3ff2649aec345f2088961e2c - languageName: node - linkType: hard - -"@types/react-transition-group@npm:^4.4.5": +"@types/react-transition-group@npm:^4.2.0, @types/react-transition-group@npm:^4.4.5": version: 4.4.5 resolution: "@types/react-transition-group@npm:4.4.5" dependencies: @@ -20523,14 +20533,7 @@ __metadata: languageName: node linkType: hard -"clsx@npm:^1.0.2, clsx@npm:^1.0.4, clsx@npm:^1.1.1": - version: 1.2.1 - resolution: "clsx@npm:1.2.1" - checksum: 30befca8019b2eb7dbad38cff6266cf543091dae2825c856a62a8ccf2c3ab9c2907c4d12b288b73101196767f66812365400a227581484a05f968b0307cfaf12 - languageName: node - linkType: hard - -"clsx@npm:^1.2.1": +"clsx@npm:^1.0.2, clsx@npm:^1.0.4, clsx@npm:^1.1.1, clsx@npm:^1.2.1": version: 1.2.1 resolution: "clsx@npm:1.2.1" checksum: 30befca8019b2eb7dbad38cff6266cf543091dae2825c856a62a8ccf2c3ab9c2907c4d12b288b73101196767f66812365400a227581484a05f968b0307cfaf12 @@ -21113,22 +21116,13 @@ __metadata: languageName: node linkType: hard -"convert-source-map@npm:^1.5.0": +"convert-source-map@npm:^1.5.0, convert-source-map@npm:^1.6.0, convert-source-map@npm:^1.7.0": version: 1.9.0 resolution: "convert-source-map@npm:1.9.0" checksum: dc55a1f28ddd0e9485ef13565f8f756b342f9a46c4ae18b843fe3c30c675d058d6a4823eff86d472f187b176f0adf51ea7b69ea38be34be4a63cbbf91b0593c8 languageName: node linkType: hard -"convert-source-map@npm:^1.6.0, convert-source-map@npm:^1.7.0": - version: 1.7.0 - resolution: "convert-source-map@npm:1.7.0" - dependencies: - safe-buffer: ~5.1.1 - checksum: bcd2e3ea7d37f96b85a6e362c8a89402ccc73757256e3ee53aa2c22fe915adb854c66b1f81111be815a3a6a6ce3c58e8001858e883c9d5b4fe08a853fa865967 - languageName: node - linkType: hard - "convert-source-map@npm:^2.0.0": version: 2.0.0 resolution: "convert-source-map@npm:2.0.0" @@ -21745,14 +21739,7 @@ __metadata: languageName: node linkType: hard -"csstype@npm:^3.0.2, csstype@npm:^3.0.6": - version: 3.0.7 - resolution: "csstype@npm:3.0.7" - checksum: 2f30c993be570c6d0de334b979a718370ee9bca9569c90340f13e05e542146c55b22e87372b858c061f9f8ded494da7a4715957882f9356cf9993ba11ab6f09c - languageName: node - linkType: hard - -"csstype@npm:^3.1.1": +"csstype@npm:^3.0.2, csstype@npm:^3.0.6, csstype@npm:^3.1.1": version: 3.1.1 resolution: "csstype@npm:3.1.1" checksum: 1f7b4f5fdd955b7444b18ebdddf3f5c699159f13e9cf8ac9027ae4a60ae226aef9bbb14a6e12ca7dba3358b007cee6354b116e720262867c398de6c955ea451d @@ -26387,16 +26374,7 @@ __metadata: languageName: node linkType: hard -"hoist-non-react-statics@npm:^3.0.0, hoist-non-react-statics@npm:^3.2.1, hoist-non-react-statics@npm:^3.3.0, hoist-non-react-statics@npm:^3.3.2": - version: 3.3.2 - resolution: "hoist-non-react-statics@npm:3.3.2" - dependencies: - react-is: ^16.7.0 - checksum: b1538270429b13901ee586aa44f4cc3ecd8831c061d06cb8322e50ea17b3f5ce4d0e2e66394761e6c8e152cd8c34fb3b4b690116c6ce2bd45b18c746516cb9e8 - languageName: node - linkType: hard - -"hoist-non-react-statics@npm:^3.0.0, hoist-non-react-statics@npm:^3.3.0, hoist-non-react-statics@npm:^3.3.1, hoist-non-react-statics@npm:^3.3.2": +"hoist-non-react-statics@npm:^3.0.0, hoist-non-react-statics@npm:^3.2.1, hoist-non-react-statics@npm:^3.3.0, hoist-non-react-statics@npm:^3.3.1, hoist-non-react-statics@npm:^3.3.2": version: 3.3.2 resolution: "hoist-non-react-statics@npm:3.3.2" dependencies: @@ -26935,15 +26913,6 @@ __metadata: languageName: node linkType: hard -"indefinite-observable@npm:^2.0.1": - version: 2.0.1 - resolution: "indefinite-observable@npm:2.0.1" - dependencies: - symbol-observable: 1.2.0 - checksum: b4305c999b7596901f8798e569b8faa030361dfb77f8b720e229558a29f544826f7e8987c55cc2a84c37ff2723594a965b96a40a6c71daae92b918f3eb393077 - languageName: node - linkType: hard - "indent-string@npm:^4.0.0": version: 4.0.0 resolution: "indent-string@npm:4.0.0" @@ -29276,18 +29245,7 @@ __metadata: languageName: node linkType: hard -"jss-plugin-camel-case@npm:^10.5.1": - version: 10.6.0 - resolution: "jss-plugin-camel-case@npm:10.6.0" - dependencies: - "@babel/runtime": ^7.3.1 - hyphenate-style-name: ^1.0.3 - jss: 10.6.0 - checksum: 75c23826deef63c3603cfb47331d1eaf9feeafd097bd115a076f2ee9fb696855d3f18b3f41455a046120fddf0ea11985259c1b8b8a37b3556f4de1a1c83affd5 - languageName: node - linkType: hard - -"jss-plugin-camel-case@npm:^10.9.2": +"jss-plugin-camel-case@npm:^10.5.1, jss-plugin-camel-case@npm:^10.9.2": version: 10.9.2 resolution: "jss-plugin-camel-case@npm:10.9.2" dependencies: @@ -29298,17 +29256,7 @@ __metadata: languageName: node linkType: hard -"jss-plugin-default-unit@npm:^10.5.1": - version: 10.6.0 - resolution: "jss-plugin-default-unit@npm:10.6.0" - dependencies: - "@babel/runtime": ^7.3.1 - jss: 10.6.0 - checksum: 7ae36fadf4f206a16e49c40806ef92ba1f0e60395488ab8ad4df96796b408013b38ea5ed975155ecd7833a42a96c8d5cb1e90aef011279816633e60f807ec330 - languageName: node - linkType: hard - -"jss-plugin-default-unit@npm:^10.9.2": +"jss-plugin-default-unit@npm:^10.5.1, jss-plugin-default-unit@npm:^10.9.2": version: 10.9.2 resolution: "jss-plugin-default-unit@npm:10.9.2" dependencies: @@ -29318,17 +29266,7 @@ __metadata: languageName: node linkType: hard -"jss-plugin-global@npm:^10.5.1": - version: 10.6.0 - resolution: "jss-plugin-global@npm:10.6.0" - dependencies: - "@babel/runtime": ^7.3.1 - jss: 10.6.0 - checksum: 7aab58408c77071c571dd2c2132edad8d40b683513a8de534f0ec7f63926fd9d9fcf6bdda82103eb541452a723b992f061720f8e5cf2014acb7f6bbbde111f56 - languageName: node - linkType: hard - -"jss-plugin-global@npm:^10.9.2": +"jss-plugin-global@npm:^10.5.1, jss-plugin-global@npm:^10.9.2": version: 10.9.2 resolution: "jss-plugin-global@npm:10.9.2" dependencies: @@ -29338,18 +29276,7 @@ __metadata: languageName: node linkType: hard -"jss-plugin-nested@npm:^10.5.1": - version: 10.6.0 - resolution: "jss-plugin-nested@npm:10.6.0" - dependencies: - "@babel/runtime": ^7.3.1 - jss: 10.6.0 - tiny-warning: ^1.0.2 - checksum: 38095127e8b5ddb0a33ccaf61a4d89dc1b0f78e6d06d079a47a14bca4aed4e885f1957d83f11c5da08b4249b2c629e8bc62b2996f1674ca1302575a7b2b11171 - languageName: node - linkType: hard - -"jss-plugin-nested@npm:^10.9.2": +"jss-plugin-nested@npm:^10.5.1, jss-plugin-nested@npm:^10.9.2": version: 10.9.2 resolution: "jss-plugin-nested@npm:10.9.2" dependencies: @@ -29360,17 +29287,7 @@ __metadata: languageName: node linkType: hard -"jss-plugin-props-sort@npm:^10.5.1": - version: 10.6.0 - resolution: "jss-plugin-props-sort@npm:10.6.0" - dependencies: - "@babel/runtime": ^7.3.1 - jss: 10.6.0 - checksum: 2917ff301e667f75efa15df865a860a50d4319d415d1169c213e66b464edc2b37b6f428be2d974ccdde7c8d61c50123f18e788143a96eacc2a1c42ad250ae375 - languageName: node - linkType: hard - -"jss-plugin-props-sort@npm:^10.9.2": +"jss-plugin-props-sort@npm:^10.5.1, jss-plugin-props-sort@npm:^10.9.2": version: 10.9.2 resolution: "jss-plugin-props-sort@npm:10.9.2" dependencies: @@ -29380,18 +29297,7 @@ __metadata: languageName: node linkType: hard -"jss-plugin-rule-value-function@npm:^10.5.1": - version: 10.6.0 - resolution: "jss-plugin-rule-value-function@npm:10.6.0" - dependencies: - "@babel/runtime": ^7.3.1 - jss: 10.6.0 - tiny-warning: ^1.0.2 - checksum: 709e1ce0afdc39a52cb78e371fef626f933e99992790b15771d85056176bdf69365d62cfed6ce95434752cc1a1e7e05a6f2548e4cd5999808d50a28174315be3 - languageName: node - linkType: hard - -"jss-plugin-rule-value-function@npm:^10.9.2": +"jss-plugin-rule-value-function@npm:^10.5.1, jss-plugin-rule-value-function@npm:^10.9.2": version: 10.9.2 resolution: "jss-plugin-rule-value-function@npm:10.9.2" dependencies: @@ -29402,18 +29308,7 @@ __metadata: languageName: node linkType: hard -"jss-plugin-vendor-prefixer@npm:^10.5.1": - version: 10.6.0 - resolution: "jss-plugin-vendor-prefixer@npm:10.6.0" - dependencies: - "@babel/runtime": ^7.3.1 - css-vendor: ^2.0.8 - jss: 10.6.0 - checksum: 9db048022ee2fb79a223a9f1be5976e131715057e3c0200cfcead9b9f8625023942534afa261e3c967cee6ad716bfd7d4a2f356556178f60f4eddcf83bcd8856 - languageName: node - linkType: hard - -"jss-plugin-vendor-prefixer@npm:^10.9.2": +"jss-plugin-vendor-prefixer@npm:^10.5.1, jss-plugin-vendor-prefixer@npm:^10.9.2": version: 10.9.2 resolution: "jss-plugin-vendor-prefixer@npm:10.9.2" dependencies: @@ -29444,20 +29339,7 @@ __metadata: languageName: node linkType: hard -"jss@npm:10.6.0": - version: 10.6.0 - resolution: "jss@npm:10.6.0" - dependencies: - "@babel/runtime": ^7.3.1 - csstype: ^3.0.2 - indefinite-observable: ^2.0.1 - is-in-browser: ^1.1.3 - tiny-warning: ^1.0.2 - checksum: 529edd871ddf059beef55ee0f974ad8436fbcf050d6538e6d2d7edab53ce2c09983d2f863e42a1473dd0e42a0447e9912bce6706bb0e539226d92cdaad128d46 - languageName: node - linkType: hard - -"jss@npm:10.9.2, jss@npm:^10.5.1, jss@npm:^10.9.2, jss@npm:~10.9.0": +"jss@npm:10.9.2": version: 10.9.2 resolution: "jss@npm:10.9.2" dependencies: @@ -29465,11 +29347,11 @@ __metadata: csstype: ^3.0.2 is-in-browser: ^1.1.3 tiny-warning: ^1.0.2 - checksum: ecf71971df42729668c283e432e841349b7fdbe52e520f7704991cf4a738fd2451ec0feeb25c12cdc5addf7facecf838e74e62936fd461fb4c99f23d54a4792d + checksum: 7ae5cd2f8602bf197ec90251d774b9f10d55eb2db0854ac78dc7fb6983828c202e8eb0d5c8c59c73b2f64718ebd33d6063afa799d625a995986a22dc1cc27230 languageName: node linkType: hard -"jss@npm:^10.5.1, jss@npm:~10.10.0": +"jss@npm:^10.5.1, jss@npm:^10.9.2, jss@npm:~10.10.0": version: 10.10.0 resolution: "jss@npm:10.10.0" dependencies: @@ -35743,22 +35625,7 @@ __metadata: languageName: node linkType: hard -"react-transition-group@npm:^4.0.0, react-transition-group@npm:^4.4.0": - version: 4.4.1 - resolution: "react-transition-group@npm:4.4.1" - dependencies: - "@babel/runtime": ^7.5.5 - dom-helpers: ^5.0.1 - loose-envify: ^1.4.0 - prop-types: ^15.6.2 - peerDependencies: - react: ">=16.6.0" - react-dom: ">=16.6.0" - checksum: 0bcd8af483709832e318dcef84c26ebddeb866bf4f58010286367ef0c1e7c5106e00cfc65688b9102414cb3d572c63909c2eb7ea972b4420fc70a78c10b6e8ad - languageName: node - linkType: hard - -"react-transition-group@npm:^4.4.5": +"react-transition-group@npm:^4.0.0, react-transition-group@npm:^4.4.0, react-transition-group@npm:^4.4.5": version: 4.4.5 resolution: "react-transition-group@npm:4.4.5" dependencies: @@ -38571,20 +38438,13 @@ __metadata: languageName: node linkType: hard -"stylis@npm:4.1.3": +"stylis@npm:4.1.3, stylis@npm:^4.0.6": version: 4.1.3 resolution: "stylis@npm:4.1.3" checksum: d04dbffcb9bf2c5ca8d8dc09534203c75df3bf711d33973ea22038a99cc475412a350b661ebd99cbc01daa50d7eedcf0d130d121800eb7318759a197023442a6 languageName: node linkType: hard -"stylis@npm:^4.0.6": - version: 4.0.7 - resolution: "stylis@npm:4.0.7" - checksum: 4f9fdc4b131b54cdc5988aaf23e796fcf77927c9d2f3147f6b23b8f3a9568eb38ce91b338b9d1b50a50391da32969c34ff68ff971c453fc3a5af89941c60ab06 - languageName: node - linkType: hard - "subscriptions-transport-ws@npm:^0.11.0": version: 0.11.0 resolution: "subscriptions-transport-ws@npm:0.11.0" From d2d90b1d30c1227a8f8cbfd97fe281e60ef30cfc Mon Sep 17 00:00:00 2001 From: Patrik Oldsberg Date: Sat, 7 Jan 2023 15:56:01 +0100 Subject: [PATCH 37/55] theme: make MUI v4 an optional peer dep Signed-off-by: Patrik Oldsberg --- packages/theme/package.json | 8 +++++++- yarn.lock | 12 +++++++++++- 2 files changed, 18 insertions(+), 2 deletions(-) diff --git a/packages/theme/package.json b/packages/theme/package.json index b47c5e256d..3d9e6fa132 100644 --- a/packages/theme/package.json +++ b/packages/theme/package.json @@ -34,14 +34,20 @@ "dependencies": { "@emotion/react": "^11.10.5", "@emotion/styled": "^11.10.5", - "@material-ui/core": "^4.12.2", "@mui/material": "^5.11.2", "@mui/styles": "^5.11.2" }, "peerDependencies": { + "@material-ui/core": "^4.12.2", + "@types/react": "^16.13.1 || ^17.0.0", "react": "^16.13.1 || ^17.0.0", "react-dom": "^16.13.1 || ^17.0.0" }, + "peerDependenciesMeta": { + "@material-ui/core": { + "optional": true + } + }, "devDependencies": { "@backstage/cli": "workspace:^", "@types/react": "^16.13.1 || ^17.0.0" diff --git a/yarn.lock b/yarn.lock index 9e1a19ab4f..2c0ecbd030 100644 --- a/yarn.lock +++ b/yarn.lock @@ -9639,13 +9639,23 @@ __metadata: "@backstage/cli": "workspace:^" "@emotion/react": ^11.10.5 "@emotion/styled": ^11.10.5 - "@material-ui/core": ^4.12.2 "@mui/material": ^5.11.2 "@mui/styles": ^5.11.2 +<<<<<<< HEAD +======= + peerDependencies: + "@material-ui/core": ^4.12.2 +>>>>>>> f1f6a256b36 (theme: make MUI v4 an optional peer dep) "@types/react": ^16.13.1 || ^17.0.0 peerDependencies: react: ^16.13.1 || ^17.0.0 +<<<<<<< HEAD react-dom: ^16.13.1 || ^17.0.0 +======= + peerDependenciesMeta: + "@material-ui/core": + optional: true +>>>>>>> f1f6a256b36 (theme: make MUI v4 an optional peer dep) languageName: unknown linkType: soft From 139207fe213645c329d2b8a6294f542fcb638bd7 Mon Sep 17 00:00:00 2001 From: Patrik Oldsberg Date: Sat, 7 Jan 2023 15:57:55 +0100 Subject: [PATCH 38/55] theme: explicit type imports from MUI v4 Signed-off-by: Patrik Oldsberg --- packages/theme/src/unified/UnifiedTheme.tsx | 6 +++--- .../src/unified/UnifiedThemeProvider.tsx | 2 +- packages/theme/src/unified/overrides.ts | 4 ++-- packages/theme/src/v4/baseTheme.ts | 7 ++++++- packages/theme/src/v4/types.ts | 21 +++++++++++-------- 5 files changed, 24 insertions(+), 16 deletions(-) diff --git a/packages/theme/src/unified/UnifiedTheme.tsx b/packages/theme/src/unified/UnifiedTheme.tsx index dbb50c979e..bb31d88016 100644 --- a/packages/theme/src/unified/UnifiedTheme.tsx +++ b/packages/theme/src/unified/UnifiedTheme.tsx @@ -14,12 +14,12 @@ * limitations under the License. */ -import { +import { createTheme as createV4Theme } from '@material-ui/core/styles'; +import type { Theme as Mui4Theme, - createTheme as createV4Theme, ThemeOptions as ThemeOptionsV4, } from '@material-ui/core/styles'; -import { PaletteOptions as PaletteOptionsV4 } from '@material-ui/core/styles/createPalette'; +import type { PaletteOptions as PaletteOptionsV4 } from '@material-ui/core/styles/createPalette'; import { PaletteOptions as PaletteOptionsV5 } from '@mui/material/styles/createPalette'; import { adaptV4Theme, diff --git a/packages/theme/src/unified/UnifiedThemeProvider.tsx b/packages/theme/src/unified/UnifiedThemeProvider.tsx index 75fcc3c6ae..60f28bc353 100644 --- a/packages/theme/src/unified/UnifiedThemeProvider.tsx +++ b/packages/theme/src/unified/UnifiedThemeProvider.tsx @@ -17,9 +17,9 @@ import React, { ReactNode } from 'react'; import { StylesProvider as Mui4StylesProvider, - Theme as Mui4Theme, ThemeProvider as Mui4Provider, } from '@material-ui/core/styles'; +import type { Theme as Mui4Theme } from '@material-ui/core/styles'; import { StyledEngineProvider, Theme as Mui5Theme, diff --git a/packages/theme/src/unified/overrides.ts b/packages/theme/src/unified/overrides.ts index db1fb54c87..7417fccedc 100644 --- a/packages/theme/src/unified/overrides.ts +++ b/packages/theme/src/unified/overrides.ts @@ -14,8 +14,8 @@ * limitations under the License. */ -import { Overrides } from '@material-ui/core/styles/overrides'; -import { ComponentsProps } from '@material-ui/core/styles/props'; +import type { Overrides } from '@material-ui/core/styles/overrides'; +import type { ComponentsProps } from '@material-ui/core/styles/props'; import { ComponentsOverrides, Theme, ThemeOptions } from '@mui/material/styles'; import { CSSProperties } from 'react'; diff --git a/packages/theme/src/v4/baseTheme.ts b/packages/theme/src/v4/baseTheme.ts index 411bcdf9a8..8143183ec0 100644 --- a/packages/theme/src/v4/baseTheme.ts +++ b/packages/theme/src/v4/baseTheme.ts @@ -16,7 +16,12 @@ import { Theme as Mui5Theme } from '@mui/material/styles'; import { createTheme as createMuiTheme } from '@material-ui/core/styles'; -import { GridProps, SwitchProps, Theme, ThemeOptions } from '@material-ui/core'; +import type { + GridProps, + SwitchProps, + Theme, + ThemeOptions, +} from '@material-ui/core'; import { Overrides } from '@material-ui/core/styles/overrides'; import { SimpleThemeOptions } from './types'; import { createBaseThemeOptions } from '../base'; diff --git a/packages/theme/src/v4/types.ts b/packages/theme/src/v4/types.ts index 24736e5d88..8bca5b8c3b 100644 --- a/packages/theme/src/v4/types.ts +++ b/packages/theme/src/v4/types.ts @@ -14,10 +14,13 @@ * limitations under the License. */ -import { Theme, ThemeOptions } from '@material-ui/core'; -import { - PaletteOptions, - Palette, +import type { + Theme as MuiTheme, + ThemeOptions as MuiThemeOptions, +} from '@material-ui/core'; +import type { + PaletteOptions as MuiPaletteOptions, + Palette as MuiPalette, } from '@material-ui/core/styles/createPalette'; import { BackstagePaletteAdditions, @@ -32,7 +35,7 @@ import { * @public * @deprecated This type is deprecated, the MUI Palette type is now always extended instead. */ -export type BackstagePalette = Palette & BackstagePaletteAdditions; +export type BackstagePalette = MuiPalette & BackstagePaletteAdditions; /** * The full Backstage palette options. @@ -40,7 +43,7 @@ export type BackstagePalette = Palette & BackstagePaletteAdditions; * @public * @deprecated This type is deprecated, the MUI PaletteOptions type is now always extended instead. */ -export type BackstagePaletteOptions = PaletteOptions & +export type BackstagePaletteOptions = MuiPaletteOptions & BackstagePaletteAdditions; /** @@ -55,7 +58,7 @@ export type BackstagePaletteOptions = PaletteOptions & * {@link BackstageTheme}. * */ -export interface BackstageThemeOptions extends ThemeOptions { +export interface BackstageThemeOptions extends MuiThemeOptions { palette: BackstagePaletteOptions; page: PageTheme; getPageTheme: (selector: PageThemeSelector) => PageTheme; @@ -67,7 +70,7 @@ export interface BackstageThemeOptions extends ThemeOptions { * @public * @deprecated This type is deprecated, the MUI Theme type is now always extended instead. */ -export interface BackstageTheme extends Theme { +export interface BackstageTheme extends MuiTheme { palette: BackstagePalette; page: PageTheme; getPageTheme: (selector: PageThemeSelector) => PageTheme; @@ -81,7 +84,7 @@ export interface BackstageTheme extends Theme { * @deprecated Use {@link BaseThemeOptionsInput} instead. */ export type SimpleThemeOptions = { - palette: PaletteOptions; + palette: MuiPaletteOptions; defaultPageTheme?: string; pageTheme?: Record; fontFamily?: string; From 4ef505886fdeba87e16269a4c6cfa6f0510d0716 Mon Sep 17 00:00:00 2001 From: Patrik Oldsberg Date: Sat, 7 Jan 2023 18:42:24 +0100 Subject: [PATCH 39/55] theme: optional loading of mui 4 runtime Signed-off-by: Patrik Oldsberg --- packages/theme/src/unified/UnifiedTheme.tsx | 18 ++++- .../src/unified/UnifiedThemeProvider.tsx | 23 +++--- packages/theme/src/v4/load.ts | 74 +++++++++++++++++++ 3 files changed, 102 insertions(+), 13 deletions(-) create mode 100644 packages/theme/src/v4/load.ts diff --git a/packages/theme/src/unified/UnifiedTheme.tsx b/packages/theme/src/unified/UnifiedTheme.tsx index bb31d88016..28da80424b 100644 --- a/packages/theme/src/unified/UnifiedTheme.tsx +++ b/packages/theme/src/unified/UnifiedTheme.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import { createTheme as createV4Theme } from '@material-ui/core/styles'; import type { Theme as Mui4Theme, ThemeOptions as ThemeOptionsV4, @@ -32,6 +31,7 @@ import { PageTheme } from '../base/types'; import { defaultComponentThemes } from '../v5'; import { createBaseThemeOptions } from '../base/createBaseThemeOptions'; import { UnifiedTheme } from './types'; +import { maybeLoadMui4Styles } from '../v4/load'; export class UnifiedThemeHolder implements UnifiedTheme { #themes = new Map(); @@ -74,9 +74,14 @@ export function createUnifiedTheme(options: UnifiedThemeOptions): UnifiedTheme { const themeOptions = createBaseThemeOptions(options); const components = { ...defaultComponentThemes, ...options.components }; const v5Theme = createV5Theme({ ...themeOptions, components }); - const v4Overrides = transformV5ComponentThemesToV4(v5Theme, components); - const v4Theme = { ...createV4Theme(themeOptions), ...v4Overrides }; + const mui4Styles = maybeLoadMui4Styles(); + if (!mui4Styles) { + return new UnifiedThemeHolder(undefined, v5Theme); + } + + const v4Overrides = transformV5ComponentThemesToV4(v5Theme, components); + const v4Theme = { ...mui4Styles.createTheme(themeOptions), ...v4Overrides }; return new UnifiedThemeHolder(v4Theme, v5Theme); } @@ -89,8 +94,13 @@ export function createUnifiedTheme(options: UnifiedThemeOptions): UnifiedTheme { export function createUnifiedThemeFromV4( options: ThemeOptionsV4, ): UnifiedTheme { - const v4Theme = createV4Theme(options); const v5Theme = adaptV4Theme(options as any); + const mui4Styles = maybeLoadMui4Styles(); + if (!mui4Styles) { + return new UnifiedThemeHolder(undefined, v5Theme); + } + + const v4Theme = mui4Styles.createTheme(options); return new UnifiedThemeHolder(v4Theme, v5Theme); } diff --git a/packages/theme/src/unified/UnifiedThemeProvider.tsx b/packages/theme/src/unified/UnifiedThemeProvider.tsx index 60f28bc353..d28dfab292 100644 --- a/packages/theme/src/unified/UnifiedThemeProvider.tsx +++ b/packages/theme/src/unified/UnifiedThemeProvider.tsx @@ -15,10 +15,6 @@ */ import React, { ReactNode } from 'react'; -import { - StylesProvider as Mui4StylesProvider, - ThemeProvider as Mui4Provider, -} from '@material-ui/core/styles'; import type { Theme as Mui4Theme } from '@material-ui/core/styles'; import { StyledEngineProvider, @@ -29,9 +25,9 @@ import { StylesProvider as Mui5StylesProvider, createGenerateClassName, } from '@mui/styles'; -import Mui4CssBaseline from '@material-ui/core/CssBaseline'; import Mui5CssBaseline from '@mui/material/CssBaseline'; import { UnifiedTheme } from './types'; +import { maybeLoadMui4CssBaseline, maybeLoadMui4Styles } from '../v4/load'; const generateV4ClassName = createGenerateClassName({ seed: 'm4', @@ -69,7 +65,11 @@ export function UnifiedThemeProvider( if (v5Theme) { cssBaseline = ; } else if (v4Theme) { - cssBaseline = ; + const CssBaseline = maybeLoadMui4CssBaseline(); + if (!CssBaseline) { + throw new Error('Failed to load MUI 4 CssBaseline component'); + } + cssBaseline = ; } } @@ -81,10 +81,15 @@ export function UnifiedThemeProvider( ); if (v4Theme) { + const styles = maybeLoadMui4Styles(); + if (!styles) { + throw new Error('Failed to load MUI 4 styles package'); + } + const { StylesProvider, ThemeProvider } = styles; result = ( - - {result} - + + {result} + ); } diff --git a/packages/theme/src/v4/load.ts b/packages/theme/src/v4/load.ts new file mode 100644 index 0000000000..899aa8af93 --- /dev/null +++ b/packages/theme/src/v4/load.ts @@ -0,0 +1,74 @@ +/* + * Copyright 2023 The Backstage Authors + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +/** + * Loads MUI v4 styles if it is available. + * + * This should always be used to access MUI v4 at runtime in this + * package, to ensure that it's not brought into the bundle unnecessarily. + * + * @internal + */ +export function maybeLoadMui4Styles(): + | typeof import('@material-ui/core/styles') + | undefined { + if ( + __webpack_modules__[ + require.resolveWeak('@material-ui/core/styles') as number + ] + ) { + return __webpack_modules__[ + require.resolveWeak('@material-ui/core/styles') as number + ] as typeof import('@material-ui/core/styles'); + } + if (__webpack_modules__[require.resolveWeak('@material-ui/core') as number]) { + return __webpack_modules__[ + require.resolveWeak('@material-ui/core') as number + ] as typeof import('@material-ui/core'); + } + + return undefined; +} + +/** + * Loads the MUI v4 CssBaseline component if it is available. + * + * This should always be used to access MUI v4 at runtime in this + * package, to ensure that it's not brought into the bundle unnecessarily. + * + * @internal + */ +export function maybeLoadMui4CssBaseline(): + | typeof import('@material-ui/core/CssBaseline')['default'] + | undefined { + if ( + __webpack_modules__[ + require.resolveWeak('@material-ui/core/CssBaseline') as number + ] + ) { + const m = __webpack_modules__[ + require.resolveWeak('@material-ui/core/CssBaseline') as number + ] as typeof import('@material-ui/core/CssBaseline'); + return m.default; + } + if (__webpack_modules__[require.resolveWeak('@material-ui/core') as number]) { + const m = __webpack_modules__[ + require.resolveWeak('@material-ui/core') as number + ] as typeof import('@material-ui/core'); + return m.CssBaseline; + } + return undefined; +} From 1d75719a99d0eae4af05ad42d2efa822eaf12d41 Mon Sep 17 00:00:00 2001 From: Patrik Oldsberg Date: Mon, 9 Jan 2023 10:51:41 +0100 Subject: [PATCH 40/55] theme: fix two lingering pxpx Signed-off-by: Patrik Oldsberg --- packages/theme/src/v5/defaultComponentThemes.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/theme/src/v5/defaultComponentThemes.ts b/packages/theme/src/v5/defaultComponentThemes.ts index eec52e1c8b..bd29ad38c5 100644 --- a/packages/theme/src/v5/defaultComponentThemes.ts +++ b/packages/theme/src/v5/defaultComponentThemes.ts @@ -187,12 +187,12 @@ export const defaultComponentThemes: ThemeOptions['components'] = { color: theme.palette.grey[500], width: theme.spacing(3), height: theme.spacing(3), - margin: `0 ${theme.spacing(0.75)}px 0 -${theme.spacing(0.75)}`, + margin: `0 ${theme.spacing(0.75)} 0 -${theme.spacing(0.75)}`, }), deleteIconSmall: ({ theme }) => ({ width: theme.spacing(2), height: theme.spacing(2), - margin: `0 ${theme.spacing(0.5)}px 0 -${theme.spacing(0.5)}`, + margin: `0 ${theme.spacing(0.5)} 0 -${theme.spacing(0.5)}`, }), }, }, From d65e6a542316819ed99d733fed253c4438792533 Mon Sep 17 00:00:00 2001 From: Patrik Oldsberg Date: Wed, 26 Apr 2023 17:41:55 +0200 Subject: [PATCH 41/55] yarn lock fixes Signed-off-by: Patrik Oldsberg --- yarn.lock | 21 +++------------------ 1 file changed, 3 insertions(+), 18 deletions(-) diff --git a/yarn.lock b/yarn.lock index 2c0ecbd030..fd6d623b4f 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3472,7 +3472,7 @@ __metadata: languageName: node linkType: hard -"@babel/runtime@npm:^7.0.0, @babel/runtime@npm:^7.1.2, @babel/runtime@npm:^7.10.1, @babel/runtime@npm:^7.12.1, @babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.14.6, @babel/runtime@npm:^7.15.4, @babel/runtime@npm:^7.18.3, @babel/runtime@npm:^7.18.6, @babel/runtime@npm:^7.2.0, @babel/runtime@npm:^7.20.1, @babel/runtime@npm:^7.20.13, @babel/runtime@npm:^7.20.7, @babel/runtime@npm:^7.3.1, @babel/runtime@npm:^7.4.4, @babel/runtime@npm:^7.5.5, @babel/runtime@npm:^7.6.0, @babel/runtime@npm:^7.7.6, @babel/runtime@npm:^7.8.3, @babel/runtime@npm:^7.8.4, @babel/runtime@npm:^7.8.7, @babel/runtime@npm:^7.9.2": +"@babel/runtime@npm:^7.0.0, @babel/runtime@npm:^7.1.2, @babel/runtime@npm:^7.10.1, @babel/runtime@npm:^7.12.1, @babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.14.6, @babel/runtime@npm:^7.15.4, @babel/runtime@npm:^7.18.3, @babel/runtime@npm:^7.18.6, @babel/runtime@npm:^7.2.0, @babel/runtime@npm:^7.20.1, @babel/runtime@npm:^7.20.13, @babel/runtime@npm:^7.20.6, @babel/runtime@npm:^7.20.7, @babel/runtime@npm:^7.3.1, @babel/runtime@npm:^7.4.4, @babel/runtime@npm:^7.5.5, @babel/runtime@npm:^7.6.0, @babel/runtime@npm:^7.7.6, @babel/runtime@npm:^7.8.3, @babel/runtime@npm:^7.8.4, @babel/runtime@npm:^7.8.7, @babel/runtime@npm:^7.9.2": version: 7.21.0 resolution: "@babel/runtime@npm:7.21.0" dependencies: @@ -3481,15 +3481,6 @@ __metadata: languageName: node linkType: hard -"@babel/runtime@npm:^7.20.6": - version: 7.20.7 - resolution: "@babel/runtime@npm:7.20.7" - dependencies: - regenerator-runtime: ^0.13.11 - checksum: 4629ce5c46f06cca9cfb9b7fc00d48003335a809888e2b91ec2069a2dcfbfef738480cff32ba81e0b7c290f8918e5c22ddcf2b710001464ee84ba62c7e32a3a3 - languageName: node - linkType: hard - "@babel/template@npm:^7.18.10, @babel/template@npm:^7.18.6, @babel/template@npm:^7.3.3": version: 7.18.10 resolution: "@babel/template@npm:7.18.10" @@ -9641,21 +9632,15 @@ __metadata: "@emotion/styled": ^11.10.5 "@mui/material": ^5.11.2 "@mui/styles": ^5.11.2 -<<<<<<< HEAD -======= - peerDependencies: - "@material-ui/core": ^4.12.2 ->>>>>>> f1f6a256b36 (theme: make MUI v4 an optional peer dep) "@types/react": ^16.13.1 || ^17.0.0 peerDependencies: + "@material-ui/core": ^4.12.2 + "@types/react": ^16.13.1 || ^17.0.0 react: ^16.13.1 || ^17.0.0 -<<<<<<< HEAD react-dom: ^16.13.1 || ^17.0.0 -======= peerDependenciesMeta: "@material-ui/core": optional: true ->>>>>>> f1f6a256b36 (theme: make MUI v4 an optional peer dep) languageName: unknown linkType: soft From c36f7b944946ded4b81a4fe0a1bc7c214b2e3faf Mon Sep 17 00:00:00 2001 From: Philipp Hugenroth Date: Wed, 26 Apr 2023 19:39:00 +0200 Subject: [PATCH 42/55] Make MUIv4 not optional - Fix smaller v5 errors in GraphQL Plugin Signed-off-by: Philipp Hugenroth --- .../OAuthRequestDialog/OAuthRequestDialog.tsx | 6 +- packages/theme/src/unified/UnifiedTheme.tsx | 10 +- .../src/unified/UnifiedThemeProvider.tsx | 16 +- plugins/graphiql/package.json | 2 +- .../GraphiQLBrowser/GraphiQLBrowser.tsx | 8 +- yarn.lock | 145 ++++++++++-------- 6 files changed, 108 insertions(+), 79 deletions(-) diff --git a/packages/core-components/src/components/OAuthRequestDialog/OAuthRequestDialog.tsx b/packages/core-components/src/components/OAuthRequestDialog/OAuthRequestDialog.tsx index 0159d8f503..8fdace3766 100644 --- a/packages/core-components/src/components/OAuthRequestDialog/OAuthRequestDialog.tsx +++ b/packages/core-components/src/components/OAuthRequestDialog/OAuthRequestDialog.tsx @@ -89,7 +89,11 @@ export function OAuthRequestDialog(_props: {}) { classes={{ root: classes.title }} id="oauth-req-dialog-title" > - + Login Required {authRedirect ? ( diff --git a/packages/theme/src/unified/UnifiedTheme.tsx b/packages/theme/src/unified/UnifiedTheme.tsx index 28da80424b..341b9e0a1f 100644 --- a/packages/theme/src/unified/UnifiedTheme.tsx +++ b/packages/theme/src/unified/UnifiedTheme.tsx @@ -14,9 +14,10 @@ * limitations under the License. */ -import type { +import { Theme as Mui4Theme, ThemeOptions as ThemeOptionsV4, + createTheme, } from '@material-ui/core/styles'; import type { PaletteOptions as PaletteOptionsV4 } from '@material-ui/core/styles/createPalette'; import { PaletteOptions as PaletteOptionsV5 } from '@mui/material/styles/createPalette'; @@ -75,13 +76,14 @@ export function createUnifiedTheme(options: UnifiedThemeOptions): UnifiedTheme { const components = { ...defaultComponentThemes, ...options.components }; const v5Theme = createV5Theme({ ...themeOptions, components }); - const mui4Styles = maybeLoadMui4Styles(); + // TODO: Not super relevant in the beginning + /* const mui4Styles = maybeLoadMui4Styles(); if (!mui4Styles) { return new UnifiedThemeHolder(undefined, v5Theme); - } + } */ const v4Overrides = transformV5ComponentThemesToV4(v5Theme, components); - const v4Theme = { ...mui4Styles.createTheme(themeOptions), ...v4Overrides }; + const v4Theme = { ...createTheme(themeOptions), ...v4Overrides }; return new UnifiedThemeHolder(v4Theme, v5Theme); } diff --git a/packages/theme/src/unified/UnifiedThemeProvider.tsx b/packages/theme/src/unified/UnifiedThemeProvider.tsx index d28dfab292..10277136e5 100644 --- a/packages/theme/src/unified/UnifiedThemeProvider.tsx +++ b/packages/theme/src/unified/UnifiedThemeProvider.tsx @@ -15,7 +15,11 @@ */ import React, { ReactNode } from 'react'; -import type { Theme as Mui4Theme } from '@material-ui/core/styles'; +import { + Theme as Mui4Theme, + StylesProvider, + ThemeProvider, +} from '@material-ui/core/styles'; import { StyledEngineProvider, Theme as Mui5Theme, @@ -27,7 +31,7 @@ import { } from '@mui/styles'; import Mui5CssBaseline from '@mui/material/CssBaseline'; import { UnifiedTheme } from './types'; -import { maybeLoadMui4CssBaseline, maybeLoadMui4Styles } from '../v4/load'; +import { CssBaseline } from '@material-ui/core'; const generateV4ClassName = createGenerateClassName({ seed: 'm4', @@ -65,10 +69,10 @@ export function UnifiedThemeProvider( if (v5Theme) { cssBaseline = ; } else if (v4Theme) { - const CssBaseline = maybeLoadMui4CssBaseline(); + /* const CssBaseline = maybeLoadMui4CssBaseline(); if (!CssBaseline) { throw new Error('Failed to load MUI 4 CssBaseline component'); - } + } */ cssBaseline = ; } } @@ -81,11 +85,11 @@ export function UnifiedThemeProvider( ); if (v4Theme) { - const styles = maybeLoadMui4Styles(); + /* const styles = maybeLoadMui4Styles(); if (!styles) { throw new Error('Failed to load MUI 4 styles package'); } - const { StylesProvider, ThemeProvider } = styles; + const { StylesProvider, ThemeProvider } = styles; */ result = ( {result} diff --git a/plugins/graphiql/package.json b/plugins/graphiql/package.json index 6cc65e8e80..3afd582bb5 100644 --- a/plugins/graphiql/package.json +++ b/plugins/graphiql/package.json @@ -37,7 +37,7 @@ "@backstage/theme": "workspace:^", "@mui/icons-material": "^5.11.0", "@mui/lab": "5.0.0-alpha.114", - "@mui/material": "^5.11.2", + "@mui/material": "^5.12.2", "@mui/styles": "^5.11.2", "graphiql": "^1.5.12", "graphql": "^16.0.0", diff --git a/plugins/graphiql/src/components/GraphiQLBrowser/GraphiQLBrowser.tsx b/plugins/graphiql/src/components/GraphiQLBrowser/GraphiQLBrowser.tsx index 058801dabf..fd084f1be8 100644 --- a/plugins/graphiql/src/components/GraphiQLBrowser/GraphiQLBrowser.tsx +++ b/plugins/graphiql/src/components/GraphiQLBrowser/GraphiQLBrowser.tsx @@ -69,15 +69,11 @@ export const GraphiQLBrowser = (props: GraphiQLBrowserProps) => { classes={{ root: classes.tabs }} value={tabIndex} onChange={(_, value) => setTabIndex(value)} + indicatorColor="secondary" textColor="inherit" > {endpoints.map(({ title }, index) => ( - + ))} diff --git a/yarn.lock b/yarn.lock index fd6d623b4f..38d9819ae7 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3472,7 +3472,7 @@ __metadata: languageName: node linkType: hard -"@babel/runtime@npm:^7.0.0, @babel/runtime@npm:^7.1.2, @babel/runtime@npm:^7.10.1, @babel/runtime@npm:^7.12.1, @babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.14.6, @babel/runtime@npm:^7.15.4, @babel/runtime@npm:^7.18.3, @babel/runtime@npm:^7.18.6, @babel/runtime@npm:^7.2.0, @babel/runtime@npm:^7.20.1, @babel/runtime@npm:^7.20.13, @babel/runtime@npm:^7.20.6, @babel/runtime@npm:^7.20.7, @babel/runtime@npm:^7.3.1, @babel/runtime@npm:^7.4.4, @babel/runtime@npm:^7.5.5, @babel/runtime@npm:^7.6.0, @babel/runtime@npm:^7.7.6, @babel/runtime@npm:^7.8.3, @babel/runtime@npm:^7.8.4, @babel/runtime@npm:^7.8.7, @babel/runtime@npm:^7.9.2": +"@babel/runtime@npm:^7.0.0, @babel/runtime@npm:^7.1.2, @babel/runtime@npm:^7.10.1, @babel/runtime@npm:^7.12.1, @babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.14.6, @babel/runtime@npm:^7.15.4, @babel/runtime@npm:^7.18.3, @babel/runtime@npm:^7.18.6, @babel/runtime@npm:^7.2.0, @babel/runtime@npm:^7.20.1, @babel/runtime@npm:^7.20.13, @babel/runtime@npm:^7.20.6, @babel/runtime@npm:^7.20.7, @babel/runtime@npm:^7.21.0, @babel/runtime@npm:^7.3.1, @babel/runtime@npm:^7.4.4, @babel/runtime@npm:^7.5.5, @babel/runtime@npm:^7.6.0, @babel/runtime@npm:^7.7.6, @babel/runtime@npm:^7.8.3, @babel/runtime@npm:^7.8.4, @babel/runtime@npm:^7.8.7, @babel/runtime@npm:^7.9.2": version: 7.21.0 resolution: "@babel/runtime@npm:7.21.0" dependencies: @@ -6962,7 +6962,7 @@ __metadata: "@backstage/theme": "workspace:^" "@mui/icons-material": ^5.11.0 "@mui/lab": 5.0.0-alpha.114 - "@mui/material": ^5.11.2 + "@mui/material": ^5.12.2 "@mui/styles": ^5.11.2 "@testing-library/dom": ^8.0.0 "@testing-library/jest-dom": ^5.10.1 @@ -10188,16 +10188,16 @@ __metadata: languageName: node linkType: hard -"@emotion/cache@npm:^11.10.5": - version: 11.10.5 - resolution: "@emotion/cache@npm:11.10.5" +"@emotion/cache@npm:^11.10.5, @emotion/cache@npm:^11.10.7": + version: 11.10.7 + resolution: "@emotion/cache@npm:11.10.7" dependencies: "@emotion/memoize": ^0.8.0 "@emotion/sheet": ^1.2.1 "@emotion/utils": ^1.2.0 "@emotion/weak-memoize": ^0.3.0 stylis: 4.1.3 - checksum: 1dd2d9af2d3ecbd3d4469ecdf91a335eef6034c851b57a474471b2d2280613eb35bbed98c0368cc4625f188619fbdaf04cf07e8107aaffce94b2178444c0fe7b + checksum: 6b1efed2dffc93dac419409d91f6d57a200d858ec5ffa4b7c30080fdbd93db431ff86bb779c5b8830b8373f3c5dd754d9beb386604ed2667c7d55608ff653dfc languageName: node linkType: hard @@ -12905,10 +12905,33 @@ __metadata: languageName: node linkType: hard -"@mui/core-downloads-tracker@npm:^5.11.2": - version: 5.11.2 - resolution: "@mui/core-downloads-tracker@npm:5.11.2" - checksum: 1f2c45ef37b13829fa2331811548cdd3f3cb94e384513db8820533570c8ef4569e5f835f8757a48d783553f44af3f4ed2f93d402891e27718fcc58e16129a874 +"@mui/base@npm:5.0.0-alpha.127": + version: 5.0.0-alpha.127 + resolution: "@mui/base@npm:5.0.0-alpha.127" + dependencies: + "@babel/runtime": ^7.21.0 + "@emotion/is-prop-valid": ^1.2.0 + "@mui/types": ^7.2.4 + "@mui/utils": ^5.12.0 + "@popperjs/core": ^2.11.7 + clsx: ^1.2.1 + prop-types: ^15.8.1 + react-is: ^18.2.0 + peerDependencies: + "@types/react": ^17.0.0 || ^18.0.0 + react: ^17.0.0 || ^18.0.0 + react-dom: ^17.0.0 || ^18.0.0 + peerDependenciesMeta: + "@types/react": + optional: true + checksum: 330baeef1fdaa513707f295e07a3436af24d0831a18109ed877f76b86cf1f392309833d33a2c7ca250db79fdf53f5e88c2618f876f50dbbbf9323bbf08e367e7 + languageName: node + linkType: hard + +"@mui/core-downloads-tracker@npm:^5.12.2": + version: 5.12.2 + resolution: "@mui/core-downloads-tracker@npm:5.12.2" + checksum: d748bdc56df6fdfe6712550a94263cf094c53ddcb70f6a8f633caf23927edf5ac88b1f888429d895fe2a5045b27eb7aa9826ccee5b917e31973667d604ed87fe languageName: node linkType: hard @@ -12958,19 +12981,19 @@ __metadata: languageName: node linkType: hard -"@mui/material@npm:^5.11.2": - version: 5.11.2 - resolution: "@mui/material@npm:5.11.2" +"@mui/material@npm:^5.11.2, @mui/material@npm:^5.12.2": + version: 5.12.2 + resolution: "@mui/material@npm:5.12.2" dependencies: - "@babel/runtime": ^7.20.7 - "@mui/base": 5.0.0-alpha.112 - "@mui/core-downloads-tracker": ^5.11.2 - "@mui/system": ^5.11.2 - "@mui/types": ^7.2.3 - "@mui/utils": ^5.11.2 + "@babel/runtime": ^7.21.0 + "@mui/base": 5.0.0-alpha.127 + "@mui/core-downloads-tracker": ^5.12.2 + "@mui/system": ^5.12.1 + "@mui/types": ^7.2.4 + "@mui/utils": ^5.12.0 "@types/react-transition-group": ^4.4.5 clsx: ^1.2.1 - csstype: ^3.1.1 + csstype: ^3.1.2 prop-types: ^15.8.1 react-is: ^18.2.0 react-transition-group: ^4.4.5 @@ -12987,16 +13010,16 @@ __metadata: optional: true "@types/react": optional: true - checksum: 4f2baa4b4d8f7842b081e9e919172020f7055e33c24af36c5a458eac1a76ff3e896651fdf21daa523a68ac0bfb3670864c1b4dec9fae6d8fadf2b602f14f95ea + checksum: a3464dfbcc496164967e134d6f1d40e060ee02fc2ddb5fcf648ca85580efdbd5eff5aab6a73486d0a7f329f7299127b52501a13993bb131cbd4e310c7f2e633f languageName: node linkType: hard -"@mui/private-theming@npm:^5.11.2": - version: 5.11.2 - resolution: "@mui/private-theming@npm:5.11.2" +"@mui/private-theming@npm:^5.11.2, @mui/private-theming@npm:^5.12.0": + version: 5.12.0 + resolution: "@mui/private-theming@npm:5.12.0" dependencies: - "@babel/runtime": ^7.20.7 - "@mui/utils": ^5.11.2 + "@babel/runtime": ^7.21.0 + "@mui/utils": ^5.12.0 prop-types: ^15.8.1 peerDependencies: "@types/react": ^17.0.0 || ^18.0.0 @@ -13004,17 +13027,17 @@ __metadata: peerDependenciesMeta: "@types/react": optional: true - checksum: 4a36ca48a7a8187d46c3e0d21ec08f7cb732bd4a5bac91c959337c8b0af031beb3a6c5ceac979b685c2e0e66321273d55dd54648f925bfdb946d6513fc6150e6 + checksum: 761bc7a57e1643c2c4c327886882fa5efc7bacae1c6fffe6be4197f49d337261c916a883d96996445efcdedc0672251725c1e5b264b6250d6c9527fd0cafcc62 languageName: node linkType: hard -"@mui/styled-engine@npm:^5.11.0": - version: 5.11.0 - resolution: "@mui/styled-engine@npm:5.11.0" +"@mui/styled-engine@npm:^5.12.0": + version: 5.12.0 + resolution: "@mui/styled-engine@npm:5.12.0" dependencies: - "@babel/runtime": ^7.20.6 - "@emotion/cache": ^11.10.5 - csstype: ^3.1.1 + "@babel/runtime": ^7.21.0 + "@emotion/cache": ^11.10.7 + csstype: ^3.1.2 prop-types: ^15.8.1 peerDependencies: "@emotion/react": ^11.4.1 @@ -13025,7 +13048,7 @@ __metadata: optional: true "@emotion/styled": optional: true - checksum: ddc486bc5e0e8e7b683e4c3bffecd11c2ce1e6c67a485354c5fc5a6fe04ed5ce76db737609a2ae04779e9d5f57c7936174d458a3795eab62291c2d7681184062 + checksum: 4a415473cf62aa05012f667dd2e9b1dc2fb175be5b0c4d0b8df541e2dac3d7db410e920e0d5910c8e2b8996a4fb51f74d79483e2878a9b5c0d334498f5537d74 languageName: node linkType: hard @@ -13060,17 +13083,17 @@ __metadata: languageName: node linkType: hard -"@mui/system@npm:^5.11.2": - version: 5.11.2 - resolution: "@mui/system@npm:5.11.2" +"@mui/system@npm:^5.11.2, @mui/system@npm:^5.12.1": + version: 5.12.1 + resolution: "@mui/system@npm:5.12.1" dependencies: - "@babel/runtime": ^7.20.7 - "@mui/private-theming": ^5.11.2 - "@mui/styled-engine": ^5.11.0 - "@mui/types": ^7.2.3 - "@mui/utils": ^5.11.2 + "@babel/runtime": ^7.21.0 + "@mui/private-theming": ^5.12.0 + "@mui/styled-engine": ^5.12.0 + "@mui/types": ^7.2.4 + "@mui/utils": ^5.12.0 clsx: ^1.2.1 - csstype: ^3.1.1 + csstype: ^3.1.2 prop-types: ^15.8.1 peerDependencies: "@emotion/react": ^11.5.0 @@ -13084,34 +13107,34 @@ __metadata: optional: true "@types/react": optional: true - checksum: d6b136464ec48cbc270f0cb91eb83f10f6b6801c143cc320ef5c6ec71655f9b3ceda98ab38fde537d1c0a7669defcb9af6f4940c78101603f8b6800854d0133d + checksum: b951959bf5e5af581319354c044f441d97849ff120cfec111d2ed5e7fa05efd63721acff96f48093b8e2bdeb5ccbe35c48613fb925be2b58c596447d10dbed3e languageName: node linkType: hard -"@mui/types@npm:^7.2.3": - version: 7.2.3 - resolution: "@mui/types@npm:7.2.3" +"@mui/types@npm:^7.2.3, @mui/types@npm:^7.2.4": + version: 7.2.4 + resolution: "@mui/types@npm:7.2.4" peerDependencies: "@types/react": "*" peerDependenciesMeta: "@types/react": optional: true - checksum: b8511cb78f8df25c8978317ad3fd585c782116b657f2d32233352c09d415c77040e532f41bbe96de6ad46be87138767d3129a9f0de3561900a9a64db7693bce4 + checksum: 16bea0547492193a22fd1794382f314698a114f6c673825314c66b56766c3a9d305992cc495684722b7be16a1ecf7e6e48a79caa64f90c439b530e8c02611a61 languageName: node linkType: hard -"@mui/utils@npm:^5.11.2": - version: 5.11.2 - resolution: "@mui/utils@npm:5.11.2" +"@mui/utils@npm:^5.11.2, @mui/utils@npm:^5.12.0": + version: 5.12.0 + resolution: "@mui/utils@npm:5.12.0" dependencies: - "@babel/runtime": ^7.20.7 + "@babel/runtime": ^7.21.0 "@types/prop-types": ^15.7.5 "@types/react-is": ^16.7.1 || ^17.0.0 prop-types: ^15.8.1 react-is: ^18.2.0 peerDependencies: react: ^17.0.0 || ^18.0.0 - checksum: 69091d9120681dee29fc20220b7db5dd61334194c139df735d932f072dab00eeae6e440058ffbccebbe93d4a3a998c23b6f4df570cb66cdacd023fce9f0f5912 + checksum: 87b2c7468803b083f50af28d7c215c45291e73fef16570848b596d0f1cde1fc613c20e8951f431217b31451de254744abd50eda5013dedec4982420b5bf1c6b6 languageName: node linkType: hard @@ -14026,10 +14049,10 @@ __metadata: languageName: node linkType: hard -"@popperjs/core@npm:^2.11.6": - version: 2.11.6 - resolution: "@popperjs/core@npm:2.11.6" - checksum: 47fb328cec1924559d759b48235c78574f2d71a8a6c4c03edb6de5d7074078371633b91e39bbf3f901b32aa8af9b9d8f82834856d2f5737a23475036b16817f0 +"@popperjs/core@npm:^2.11.6, @popperjs/core@npm:^2.11.7": + version: 2.11.7 + resolution: "@popperjs/core@npm:2.11.7" + checksum: 5b6553747899683452a1d28898c1b39173a4efd780e74360bfcda8eb42f1c5e819602769c81a10920fc68c881d07fb40429604517d499567eac079cfa6470f19 languageName: node linkType: hard @@ -21734,10 +21757,10 @@ __metadata: languageName: node linkType: hard -"csstype@npm:^3.0.2, csstype@npm:^3.0.6, csstype@npm:^3.1.1": - version: 3.1.1 - resolution: "csstype@npm:3.1.1" - checksum: 1f7b4f5fdd955b7444b18ebdddf3f5c699159f13e9cf8ac9027ae4a60ae226aef9bbb14a6e12ca7dba3358b007cee6354b116e720262867c398de6c955ea451d +"csstype@npm:^3.0.2, csstype@npm:^3.0.6, csstype@npm:^3.1.1, csstype@npm:^3.1.2": + version: 3.1.2 + resolution: "csstype@npm:3.1.2" + checksum: e1a52e6c25c1314d6beef5168da704ab29c5186b877c07d822bd0806717d9a265e8493a2e35ca7e68d0f5d472d43fac1cdce70fd79fd0853dff81f3028d857b5 languageName: node linkType: hard From 39f4c10c61aea42050e929c1bd921de025655f3e Mon Sep 17 00:00:00 2001 From: Philipp Hugenroth Date: Thu, 27 Apr 2023 11:15:29 +0200 Subject: [PATCH 43/55] Fix tsc types by csstype dependency resolution - Fix Paper background color to be consistent - Fix line-height & font-size on body to be consitent Signed-off-by: Philipp Hugenroth --- package.json | 3 ++- .../core-components/src/layout/Sidebar/Page.tsx | 12 ++++++------ packages/theme/src/base/palettes.ts | 2 +- packages/theme/src/v5/defaultComponentThemes.ts | 2 ++ yarn.lock | 15 ++++----------- 5 files changed, 15 insertions(+), 19 deletions(-) diff --git a/package.json b/package.json index 3a7e05d65a..9d688b0cc6 100644 --- a/package.json +++ b/package.json @@ -45,7 +45,8 @@ }, "resolutions": { "@types/react": "^17", - "@types/react-dom": "^17" + "@types/react-dom": "^17", + "csstype": "3.0.9" }, "version": "1.14.0", "dependencies": { diff --git a/packages/core-components/src/layout/Sidebar/Page.tsx b/packages/core-components/src/layout/Sidebar/Page.tsx index 5f660547d1..a1564c0409 100644 --- a/packages/core-components/src/layout/Sidebar/Page.tsx +++ b/packages/core-components/src/layout/Sidebar/Page.tsx @@ -33,23 +33,23 @@ import { SidebarPinStateProvider } from './SidebarPinStateContext'; export type SidebarPageClassKey = 'root'; -const useStyles = makeStyles< - BackstageTheme, - { sidebarConfig: SidebarConfig; isPinned: boolean } ->( +type PageStyleProps = { sidebarConfig: SidebarConfig; isPinned: boolean }; + +const useStyles = makeStyles( theme => ({ root: { width: '100%', transition: 'padding-left 0.1s ease-out', isolation: 'isolate', [theme.breakpoints.up('sm')]: { - paddingLeft: props => + paddingLeft: (props: PageStyleProps) => props.isPinned ? props.sidebarConfig.drawerWidthOpen : props.sidebarConfig.drawerWidthClosed, }, [theme.breakpoints.down('xs')]: { - paddingBottom: props => props.sidebarConfig.mobileSidebarHeight, + paddingBottom: (props: PageStyleProps) => + props.sidebarConfig.mobileSidebarHeight, }, }, content: { diff --git a/packages/theme/src/base/palettes.ts b/packages/theme/src/base/palettes.ts index c230ce94c0..5e70afd7b8 100644 --- a/packages/theme/src/base/palettes.ts +++ b/packages/theme/src/base/palettes.ts @@ -25,7 +25,7 @@ export const palettes = { mode: 'light' as const, background: { default: '#F8F8F8', - paper: '#FAFAFA', + paper: '#FFFFFF', }, status: { ok: '#1DB954', diff --git a/packages/theme/src/v5/defaultComponentThemes.ts b/packages/theme/src/v5/defaultComponentThemes.ts index bd29ad38c5..14656b007d 100644 --- a/packages/theme/src/v5/defaultComponentThemes.ts +++ b/packages/theme/src/v5/defaultComponentThemes.ts @@ -32,6 +32,8 @@ export const defaultComponentThemes: ThemeOptions['components'] = { height: '100%', fontFamily: theme.typography.fontFamily, overscrollBehaviorY: 'none', + fontSize: '0.875rem', + lineHeight: 1.43, }, a: { color: 'inherit', diff --git a/yarn.lock b/yarn.lock index 38d9819ae7..b884ebd728 100644 --- a/yarn.lock +++ b/yarn.lock @@ -21750,17 +21750,10 @@ __metadata: languageName: node linkType: hard -"csstype@npm:^2.0.0, csstype@npm:^2.5.2, csstype@npm:^2.6.7": - version: 2.6.21 - resolution: "csstype@npm:2.6.21" - checksum: 2ce8bc832375146eccdf6115a1f8565a27015b74cce197c35103b4494955e9516b246140425ad24103864076aa3e1257ac9bab25a06c8d931dd87a6428c9dccf - languageName: node - linkType: hard - -"csstype@npm:^3.0.2, csstype@npm:^3.0.6, csstype@npm:^3.1.1, csstype@npm:^3.1.2": - version: 3.1.2 - resolution: "csstype@npm:3.1.2" - checksum: e1a52e6c25c1314d6beef5168da704ab29c5186b877c07d822bd0806717d9a265e8493a2e35ca7e68d0f5d472d43fac1cdce70fd79fd0853dff81f3028d857b5 +"csstype@npm:3.0.9": + version: 3.0.9 + resolution: "csstype@npm:3.0.9" + checksum: 199f9af7e673f9f188525c3102a329d637ff46c52f6385a4427ff5cb17adcb736189150170a7af7c5701d18d7704bdad130273f4aa7e44c6c4f9967e6115dc93 languageName: node linkType: hard From 0eea40f03db09cbb1ede060a72099f901be4acd1 Mon Sep 17 00:00:00 2001 From: Philipp Hugenroth Date: Thu, 27 Apr 2023 11:58:31 +0200 Subject: [PATCH 44/55] Change resolution to directly enforce version in yarn.lock Signed-off-by: Philipp Hugenroth --- package.json | 3 +-- yarn.lock | 9 ++++++++- 2 files changed, 9 insertions(+), 3 deletions(-) diff --git a/package.json b/package.json index 9d688b0cc6..3a7e05d65a 100644 --- a/package.json +++ b/package.json @@ -45,8 +45,7 @@ }, "resolutions": { "@types/react": "^17", - "@types/react-dom": "^17", - "csstype": "3.0.9" + "@types/react-dom": "^17" }, "version": "1.14.0", "dependencies": { diff --git a/yarn.lock b/yarn.lock index b884ebd728..cf277ac9fa 100644 --- a/yarn.lock +++ b/yarn.lock @@ -21750,7 +21750,14 @@ __metadata: languageName: node linkType: hard -"csstype@npm:3.0.9": +"csstype@npm:^2.0.0, csstype@npm:^2.5.2, csstype@npm:^2.6.7": + version: 2.6.21 + resolution: "csstype@npm:2.6.21" + checksum: 2ce8bc832375146eccdf6115a1f8565a27015b74cce197c35103b4494955e9516b246140425ad24103864076aa3e1257ac9bab25a06c8d931dd87a6428c9dccf + languageName: node + linkType: hard + +"csstype@npm:^3.0.2, csstype@npm:^3.0.6, csstype@npm:^3.1.1, csstype@npm:^3.1.2": version: 3.0.9 resolution: "csstype@npm:3.0.9" checksum: 199f9af7e673f9f188525c3102a329d637ff46c52f6385a4427ff5cb17adcb736189150170a7af7c5701d18d7704bdad130273f4aa7e44c6c4f9967e6115dc93 From d53afd8a8071a46a44718d5f107fbff9908bc905 Mon Sep 17 00:00:00 2001 From: Philipp Hugenroth Date: Thu, 27 Apr 2023 13:28:12 +0200 Subject: [PATCH 45/55] Adjust typing to review - Build api-report Signed-off-by: Philipp Hugenroth --- packages/theme/api-report.md | 12 +++++++----- packages/theme/package.json | 2 +- packages/theme/src/unified/UnifiedTheme.tsx | 2 +- packages/theme/src/v5/types.ts | 15 ++------------- yarn.lock | 4 ++-- 5 files changed, 13 insertions(+), 22 deletions(-) diff --git a/packages/theme/api-report.md b/packages/theme/api-report.md index 763cc48e41..9fd00ff877 100644 --- a/packages/theme/api-report.md +++ b/packages/theme/api-report.md @@ -3,17 +3,17 @@ > Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/). ```ts -import { ComponentsProps } from '@material-ui/core/styles/props'; +import type { ComponentsProps } from '@material-ui/core/styles/props'; import { Overrides } from '@material-ui/core/styles/overrides'; -import { Palette } from '@material-ui/core/styles/createPalette'; -import { PaletteOptions } from '@material-ui/core/styles/createPalette'; -import { PaletteOptions as PaletteOptions_2 } from '@mui/material/styles/createPalette'; +import type { Palette } from '@material-ui/core/styles/createPalette'; +import type { PaletteOptions } from '@material-ui/core/styles/createPalette'; +import { PaletteOptions as PaletteOptions_2 } from '@mui/material/styles'; import { ReactNode } from 'react'; import { Theme } from '@mui/material/styles'; import { Theme as Theme_2 } from '@material-ui/core'; import { ThemeOptions } from '@mui/material/styles'; import { ThemeOptions as ThemeOptions_2 } from '@material-ui/core/styles'; -import { ThemeOptions as ThemeOptions_3 } from '@material-ui/core'; +import type { ThemeOptions as ThemeOptions_3 } from '@material-ui/core'; // @public @deprecated export type BackstagePalette = Palette & BackstagePaletteAdditions; @@ -249,6 +249,7 @@ export const palettes: { error: string; text: string; link: string; + closeButtonColor: string; warning: string; }; border: string; @@ -322,6 +323,7 @@ export const palettes: { error: string; text: string; link: string; + closeButtonColor: string; warning: string; }; border: string; diff --git a/packages/theme/package.json b/packages/theme/package.json index 3d9e6fa132..fba9072aa0 100644 --- a/packages/theme/package.json +++ b/packages/theme/package.json @@ -34,7 +34,7 @@ "dependencies": { "@emotion/react": "^11.10.5", "@emotion/styled": "^11.10.5", - "@mui/material": "^5.11.2", + "@mui/material": "^5.12.2", "@mui/styles": "^5.11.2" }, "peerDependencies": { diff --git a/packages/theme/src/unified/UnifiedTheme.tsx b/packages/theme/src/unified/UnifiedTheme.tsx index 341b9e0a1f..c878cfd5e1 100644 --- a/packages/theme/src/unified/UnifiedTheme.tsx +++ b/packages/theme/src/unified/UnifiedTheme.tsx @@ -20,7 +20,7 @@ import { createTheme, } from '@material-ui/core/styles'; import type { PaletteOptions as PaletteOptionsV4 } from '@material-ui/core/styles/createPalette'; -import { PaletteOptions as PaletteOptionsV5 } from '@mui/material/styles/createPalette'; +import { PaletteOptions as PaletteOptionsV5 } from '@mui/material/styles'; import { adaptV4Theme, Theme as Mui5Theme, diff --git a/packages/theme/src/v5/types.ts b/packages/theme/src/v5/types.ts index 293383180a..31fe72b5b9 100644 --- a/packages/theme/src/v5/types.ts +++ b/packages/theme/src/v5/types.ts @@ -20,13 +20,13 @@ import { BackstageThemeAdditions, } from '../base/types'; -declare module '@mui/material/styles/createPalette' { +declare module '@mui/material/styles' { interface Palette extends BackstagePaletteAdditions {} interface PaletteOptions extends BackstagePaletteAdditions {} } -declare module '@mui/material/styles/createTheme' { +declare module '@mui/material/styles' { interface Theme extends BackstageThemeAdditions {} interface ThemeOptions extends BackstageThemeAdditions {} @@ -35,14 +35,3 @@ declare module '@mui/material/styles/createTheme' { declare module '@mui/private-theming/defaultTheme' { interface DefaultTheme extends Theme {} } - -// This is a workaround for missing methods in React 17 that MUI v5 depends on -// See https://github.com/mui/material-ui/issues/35287 -declare global { - namespace React { - interface DOMAttributes { - onResize?: (event: Event) => void; - onResizeCapture?: (event: Event) => void; - } - } -} diff --git a/yarn.lock b/yarn.lock index cf277ac9fa..1983495c23 100644 --- a/yarn.lock +++ b/yarn.lock @@ -9630,7 +9630,7 @@ __metadata: "@backstage/cli": "workspace:^" "@emotion/react": ^11.10.5 "@emotion/styled": ^11.10.5 - "@mui/material": ^5.11.2 + "@mui/material": ^5.12.2 "@mui/styles": ^5.11.2 "@types/react": ^16.13.1 || ^17.0.0 peerDependencies: @@ -12981,7 +12981,7 @@ __metadata: languageName: node linkType: hard -"@mui/material@npm:^5.11.2, @mui/material@npm:^5.12.2": +"@mui/material@npm:^5.12.2": version: 5.12.2 resolution: "@mui/material@npm:5.12.2" dependencies: From 7cfe41766f0cde50c80bf66216f3cc024b75d72b Mon Sep 17 00:00:00 2001 From: Philipp Hugenroth Date: Thu, 27 Apr 2023 14:50:43 +0200 Subject: [PATCH 46/55] Fix EntityKindIcon test regarding prefixed MUI classes - Simple fix not changing what is tested, but adjusting the way the element is queried Signed-off-by: Philipp Hugenroth --- .../components/EntityRelationsGraph/EntityKindIcon.test.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/plugins/catalog-graph/src/components/EntityRelationsGraph/EntityKindIcon.test.tsx b/plugins/catalog-graph/src/components/EntityRelationsGraph/EntityKindIcon.test.tsx index 6592c6195e..cc47c8850b 100644 --- a/plugins/catalog-graph/src/components/EntityRelationsGraph/EntityKindIcon.test.tsx +++ b/plugins/catalog-graph/src/components/EntityRelationsGraph/EntityKindIcon.test.tsx @@ -24,7 +24,7 @@ describe('', () => { , ); - expect(baseElement.querySelector('.MuiSvgIcon-root')).toBeInTheDocument(); + expect(baseElement.querySelector('svg')).toBeInTheDocument(); }); it('renders without exploding for unknown kind', async () => { @@ -32,6 +32,6 @@ describe('', () => { , ); - expect(baseElement.querySelector('.MuiSvgIcon-root')).toBeInTheDocument(); + expect(baseElement.querySelector('svg')).toBeInTheDocument(); }); }); From 9b714a9bfd02f6934656fa2577f95011859e891e Mon Sep 17 00:00:00 2001 From: Philipp Hugenroth Date: Fri, 28 Apr 2023 16:05:36 +0200 Subject: [PATCH 47/55] Only use one class name generator to avoid side effects - Remove duplicate CSSBaseline from test app wrapper Signed-off-by: Philipp Hugenroth --- .eslintrc.js | 6 +++ .../test-utils/src/testUtils/appWrappers.tsx | 3 +- .../theme/src/unified/MuiClassNameSetup.ts | 24 ++++++++++++ .../src/unified/UnifiedThemeProvider.tsx | 38 +++---------------- 4 files changed, 37 insertions(+), 34 deletions(-) create mode 100644 packages/theme/src/unified/MuiClassNameSetup.ts diff --git a/.eslintrc.js b/.eslintrc.js index 1616404a6f..5c1012e501 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -28,6 +28,12 @@ module.exports = { onNonMatchingHeader: 'replace', }, ], + 'no-restricted-imports': [ + 'error', + { + patterns: ['@mui/*/*/*'], + }, + ], 'no-restricted-syntax': [ 'error', { diff --git a/packages/test-utils/src/testUtils/appWrappers.tsx b/packages/test-utils/src/testUtils/appWrappers.tsx index 012cbe0b98..6545cc312a 100644 --- a/packages/test-utils/src/testUtils/appWrappers.tsx +++ b/packages/test-utils/src/testUtils/appWrappers.tsx @@ -18,7 +18,6 @@ import React, { ComponentType, ReactNode, ReactElement } from 'react'; import { MemoryRouter } from 'react-router-dom'; import { Route } from 'react-router-dom'; import { UnifiedThemeProvider, themes } from '@backstage/theme'; -import { CssBaseline } from '@material-ui/core'; import MockIcon from '@material-ui/icons/AcUnit'; import { createSpecializedApp } from '@backstage/core-app-api'; import { @@ -142,7 +141,7 @@ export function createTestAppWrapper( variant: 'light', Provider: ({ children }) => ( - {children} + {children} ), }, diff --git a/packages/theme/src/unified/MuiClassNameSetup.ts b/packages/theme/src/unified/MuiClassNameSetup.ts new file mode 100644 index 0000000000..42b948af32 --- /dev/null +++ b/packages/theme/src/unified/MuiClassNameSetup.ts @@ -0,0 +1,24 @@ +/* + * Copyright 2022 The Backstage Authors + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import { unstable_ClassNameGenerator as ClassNameGenerator } from '@mui/material/className'; + +/** + * This API is introduced in @mui/material (v5.0.5) as a replacement of deprecated createGenerateClassName & only affects v5 MUI components from `@mui/*` + */ +ClassNameGenerator.configure(componentName => { + return `v5-${componentName}`; +}); diff --git a/packages/theme/src/unified/UnifiedThemeProvider.tsx b/packages/theme/src/unified/UnifiedThemeProvider.tsx index 10277136e5..88cc1d9457 100644 --- a/packages/theme/src/unified/UnifiedThemeProvider.tsx +++ b/packages/theme/src/unified/UnifiedThemeProvider.tsx @@ -15,31 +15,16 @@ */ import React, { ReactNode } from 'react'; -import { - Theme as Mui4Theme, - StylesProvider, - ThemeProvider, -} from '@material-ui/core/styles'; +import './MuiClassNameSetup'; +import { ThemeProvider } from '@material-ui/core/styles'; import { StyledEngineProvider, - Theme as Mui5Theme, ThemeProvider as Mui5Provider, } from '@mui/material/styles'; -import { - StylesProvider as Mui5StylesProvider, - createGenerateClassName, -} from '@mui/styles'; import Mui5CssBaseline from '@mui/material/CssBaseline'; import { UnifiedTheme } from './types'; import { CssBaseline } from '@material-ui/core'; -const generateV4ClassName = createGenerateClassName({ - seed: 'm4', -}); -const generateV5ClassName = createGenerateClassName({ - seed: 'm5', -}); - /** * Props for {@link UnifiedThemeProvider}. * @@ -85,25 +70,14 @@ export function UnifiedThemeProvider( ); if (v4Theme) { - /* const styles = maybeLoadMui4Styles(); - if (!styles) { - throw new Error('Failed to load MUI 4 styles package'); - } - const { StylesProvider, ThemeProvider } = styles; */ - result = ( - - {result} - - ); + result = {result}; } if (v5Theme) { result = ( - - - {result} - - + + {result} + ); } From 103cd94ef1266bcda9da1f0f90fbbb4cd87417e2 Mon Sep 17 00:00:00 2001 From: Philipp Hugenroth Date: Wed, 3 May 2023 14:49:48 +0200 Subject: [PATCH 48/55] Fix TechDocs test Signed-off-by: Philipp Hugenroth --- packages/theme/package.json | 3 +-- plugins/techdocs-addons-test-utils/src/test-utils.tsx | 6 ++++-- yarn.lock | 1 - 3 files changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/theme/package.json b/packages/theme/package.json index fba9072aa0..0e73918072 100644 --- a/packages/theme/package.json +++ b/packages/theme/package.json @@ -34,8 +34,7 @@ "dependencies": { "@emotion/react": "^11.10.5", "@emotion/styled": "^11.10.5", - "@mui/material": "^5.12.2", - "@mui/styles": "^5.11.2" + "@mui/material": "^5.12.2" }, "peerDependencies": { "@material-ui/core": "^4.12.2", diff --git a/plugins/techdocs-addons-test-utils/src/test-utils.tsx b/plugins/techdocs-addons-test-utils/src/test-utils.tsx index e60a96402c..c7a3992281 100644 --- a/plugins/techdocs-addons-test-utils/src/test-utils.tsx +++ b/plugins/techdocs-addons-test-utils/src/test-utils.tsx @@ -21,7 +21,7 @@ import React, { ReactElement } from 'react'; import { screen } from 'testing-library__dom'; import { renderToStaticMarkup } from 'react-dom/server'; import { Route } from 'react-router-dom'; -import { act, render } from '@testing-library/react'; +import { act, render, waitFor } from '@testing-library/react'; import { wrapInTestApp, TestApiProvider } from '@backstage/test-utils'; import { FlatRoutes } from '@backstage/core-app-api'; @@ -278,7 +278,9 @@ export class TechDocsAddonTester { render(this.build()); }); - const shadowHost = screen.getByTestId('techdocs-native-shadowroot'); + await waitFor(() => screen.getByText('Documentation')); + + const shadowHost = await screen.findByTestId('techdocs-native-shadowroot'); return { ...screen, diff --git a/yarn.lock b/yarn.lock index 1983495c23..bdc04393da 100644 --- a/yarn.lock +++ b/yarn.lock @@ -9631,7 +9631,6 @@ __metadata: "@emotion/react": ^11.10.5 "@emotion/styled": ^11.10.5 "@mui/material": ^5.12.2 - "@mui/styles": ^5.11.2 "@types/react": ^16.13.1 || ^17.0.0 peerDependencies: "@material-ui/core": ^4.12.2 From 8e88caa0299a1502326ac7c9c2e5e7cac18f5bcb Mon Sep 17 00:00:00 2001 From: Philipp Hugenroth Date: Fri, 5 May 2023 15:37:47 +0200 Subject: [PATCH 49/55] Simplify PR after review Co-authored-by: Patrik Oldsberg Signed-off-by: Philipp Hugenroth --- .eslintrc.js | 6 -- packages/cli/config/eslint-factory.js | 10 +++ packages/theme/src/base/index.ts | 1 + packages/theme/src/unified/UnifiedTheme.tsx | 9 +-- .../src/unified/UnifiedThemeProvider.tsx | 13 +--- packages/theme/src/v4/load.ts | 74 ------------------- .../src/test-utils.tsx | 2 - 7 files changed, 14 insertions(+), 101 deletions(-) delete mode 100644 packages/theme/src/v4/load.ts diff --git a/.eslintrc.js b/.eslintrc.js index 5c1012e501..1616404a6f 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -28,12 +28,6 @@ module.exports = { onNonMatchingHeader: 'replace', }, ], - 'no-restricted-imports': [ - 'error', - { - patterns: ['@mui/*/*/*'], - }, - ], 'no-restricted-syntax': [ 'error', { diff --git a/packages/cli/config/eslint-factory.js b/packages/cli/config/eslint-factory.js index dde853fdff..6888e0ff67 100644 --- a/packages/cli/config/eslint-factory.js +++ b/packages/cli/config/eslint-factory.js @@ -24,6 +24,7 @@ const { join: joinPath } = require('path'); * - `tsRules`: Additional ESLint rules to apply to TypeScript * - `testRules`: Additional ESLint rules to apply to tests * - `restrictedImports`: Additional paths to add to no-restricted-imports + * - `restrictedImportsPattern`: Additional patterns to add to no-restricted-imports * - `restrictedSrcImports`: Additional paths to add to no-restricted-imports in src files * - `restrictedTestImports`: Additional paths to add to no-restricted-imports in test files * - `restrictedSyntax`: Additional patterns to add to no-restricted-syntax @@ -44,6 +45,7 @@ function createConfig(dir, extraConfig = {}) { testRules, restrictedImports, + restrictedImportsPatterns, restrictedSrcImports, restrictedTestImports, restrictedSyntax, @@ -114,6 +116,7 @@ function createConfig(dir, extraConfig = {}) { '*.test*', '**/__testUtils__/**', '**/__mocks__/**', + ...(restrictedImportsPatterns ?? []), ], }, ], @@ -208,9 +211,16 @@ function createConfigForRole(dir, role, extraConfig = {}) { name: '@material-ui/icons/', // because this is possible too ._. message: "Please import '@material-ui/icons/' instead.", }, + { + // https://mui.com/material-ui/guides/minimizing-bundle-size/ + name: '@mui/material', + message: "Please import '@mui/material/...' instead.", + }, ...require('module').builtinModules, ...(extraConfig.restrictedImports ?? []), ], + // https://mui.com/material-ui/guides/minimizing-bundle-size/ + restrictedImportsPatterns: ['@mui/*/*/*'], tsRules: { 'react/prop-types': 0, ...extraConfig.tsRules, diff --git a/packages/theme/src/base/index.ts b/packages/theme/src/base/index.ts index 45b8326f2e..4bb80aa42b 100644 --- a/packages/theme/src/base/index.ts +++ b/packages/theme/src/base/index.ts @@ -19,6 +19,7 @@ export type { BaseThemeOptionsInput } from './createBaseThemeOptions'; export { colorVariants, genPageTheme, pageTheme, shapes } from './pageTheme'; export { palettes } from './palettes'; export type { + BackstageThemeAdditions, BackstagePaletteAdditions, PageTheme, PageThemeSelector, diff --git a/packages/theme/src/unified/UnifiedTheme.tsx b/packages/theme/src/unified/UnifiedTheme.tsx index c878cfd5e1..0c5f80357a 100644 --- a/packages/theme/src/unified/UnifiedTheme.tsx +++ b/packages/theme/src/unified/UnifiedTheme.tsx @@ -32,7 +32,6 @@ import { PageTheme } from '../base/types'; import { defaultComponentThemes } from '../v5'; import { createBaseThemeOptions } from '../base/createBaseThemeOptions'; import { UnifiedTheme } from './types'; -import { maybeLoadMui4Styles } from '../v4/load'; export class UnifiedThemeHolder implements UnifiedTheme { #themes = new Map(); @@ -97,12 +96,6 @@ export function createUnifiedThemeFromV4( options: ThemeOptionsV4, ): UnifiedTheme { const v5Theme = adaptV4Theme(options as any); - - const mui4Styles = maybeLoadMui4Styles(); - if (!mui4Styles) { - return new UnifiedThemeHolder(undefined, v5Theme); - } - - const v4Theme = mui4Styles.createTheme(options); + const v4Theme = createTheme(options); return new UnifiedThemeHolder(v4Theme, v5Theme); } diff --git a/packages/theme/src/unified/UnifiedThemeProvider.tsx b/packages/theme/src/unified/UnifiedThemeProvider.tsx index 88cc1d9457..c7054e0e55 100644 --- a/packages/theme/src/unified/UnifiedThemeProvider.tsx +++ b/packages/theme/src/unified/UnifiedThemeProvider.tsx @@ -21,9 +21,8 @@ import { StyledEngineProvider, ThemeProvider as Mui5Provider, } from '@mui/material/styles'; -import Mui5CssBaseline from '@mui/material/CssBaseline'; +import CSSBaseline from '@mui/material/CssBaseline'; import { UnifiedTheme } from './types'; -import { CssBaseline } from '@material-ui/core'; /** * Props for {@link UnifiedThemeProvider}. @@ -51,15 +50,7 @@ export function UnifiedThemeProvider( let cssBaseline: JSX.Element | undefined = undefined; if (!noCssBaseline) { - if (v5Theme) { - cssBaseline = ; - } else if (v4Theme) { - /* const CssBaseline = maybeLoadMui4CssBaseline(); - if (!CssBaseline) { - throw new Error('Failed to load MUI 4 CssBaseline component'); - } */ - cssBaseline = ; - } + cssBaseline = ; } let result = ( diff --git a/packages/theme/src/v4/load.ts b/packages/theme/src/v4/load.ts deleted file mode 100644 index 899aa8af93..0000000000 --- a/packages/theme/src/v4/load.ts +++ /dev/null @@ -1,74 +0,0 @@ -/* - * Copyright 2023 The Backstage Authors - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -/** - * Loads MUI v4 styles if it is available. - * - * This should always be used to access MUI v4 at runtime in this - * package, to ensure that it's not brought into the bundle unnecessarily. - * - * @internal - */ -export function maybeLoadMui4Styles(): - | typeof import('@material-ui/core/styles') - | undefined { - if ( - __webpack_modules__[ - require.resolveWeak('@material-ui/core/styles') as number - ] - ) { - return __webpack_modules__[ - require.resolveWeak('@material-ui/core/styles') as number - ] as typeof import('@material-ui/core/styles'); - } - if (__webpack_modules__[require.resolveWeak('@material-ui/core') as number]) { - return __webpack_modules__[ - require.resolveWeak('@material-ui/core') as number - ] as typeof import('@material-ui/core'); - } - - return undefined; -} - -/** - * Loads the MUI v4 CssBaseline component if it is available. - * - * This should always be used to access MUI v4 at runtime in this - * package, to ensure that it's not brought into the bundle unnecessarily. - * - * @internal - */ -export function maybeLoadMui4CssBaseline(): - | typeof import('@material-ui/core/CssBaseline')['default'] - | undefined { - if ( - __webpack_modules__[ - require.resolveWeak('@material-ui/core/CssBaseline') as number - ] - ) { - const m = __webpack_modules__[ - require.resolveWeak('@material-ui/core/CssBaseline') as number - ] as typeof import('@material-ui/core/CssBaseline'); - return m.default; - } - if (__webpack_modules__[require.resolveWeak('@material-ui/core') as number]) { - const m = __webpack_modules__[ - require.resolveWeak('@material-ui/core') as number - ] as typeof import('@material-ui/core'); - return m.CssBaseline; - } - return undefined; -} diff --git a/plugins/techdocs-addons-test-utils/src/test-utils.tsx b/plugins/techdocs-addons-test-utils/src/test-utils.tsx index c7a3992281..a6e83262fb 100644 --- a/plugins/techdocs-addons-test-utils/src/test-utils.tsx +++ b/plugins/techdocs-addons-test-utils/src/test-utils.tsx @@ -278,8 +278,6 @@ export class TechDocsAddonTester { render(this.build()); }); - await waitFor(() => screen.getByText('Documentation')); - const shadowHost = await screen.findByTestId('techdocs-native-shadowroot'); return { From df1edd9cbc54a8a16eab1e6b70ca8d2d48581654 Mon Sep 17 00:00:00 2001 From: Philipp Hugenroth Date: Fri, 5 May 2023 15:40:39 +0200 Subject: [PATCH 50/55] Restore GraphiQL to seperate concerns in PRs Signed-off-by: Philipp Hugenroth --- plugins/graphiql/package.json | 7 +++---- .../components/GraphiQLBrowser/GraphiQLBrowser.tsx | 11 +++++------ .../src/components/GraphiQLPage/GraphiQLPage.tsx | 2 +- 3 files changed, 9 insertions(+), 11 deletions(-) diff --git a/plugins/graphiql/package.json b/plugins/graphiql/package.json index 3afd582bb5..d5dae8c2ec 100644 --- a/plugins/graphiql/package.json +++ b/plugins/graphiql/package.json @@ -35,10 +35,9 @@ "@backstage/core-components": "workspace:^", "@backstage/core-plugin-api": "workspace:^", "@backstage/theme": "workspace:^", - "@mui/icons-material": "^5.11.0", - "@mui/lab": "5.0.0-alpha.114", - "@mui/material": "^5.12.2", - "@mui/styles": "^5.11.2", + "@material-ui/core": "^4.12.2", + "@material-ui/icons": "^4.9.1", + "@material-ui/lab": "4.0.0-alpha.61", "graphiql": "^1.5.12", "graphql": "^16.0.0", "graphql-ws": "^5.4.1", diff --git a/plugins/graphiql/src/components/GraphiQLBrowser/GraphiQLBrowser.tsx b/plugins/graphiql/src/components/GraphiQLBrowser/GraphiQLBrowser.tsx index fd084f1be8..dd38f513be 100644 --- a/plugins/graphiql/src/components/GraphiQLBrowser/GraphiQLBrowser.tsx +++ b/plugins/graphiql/src/components/GraphiQLBrowser/GraphiQLBrowser.tsx @@ -15,18 +15,18 @@ */ import React, { useState, Suspense } from 'react'; -import { Tabs, Tab, Typography, Divider } from '@mui/material'; -import makeStyles from '@mui/styles/makeStyles'; +import { Tabs, Tab, makeStyles, Typography, Divider } from '@material-ui/core'; import 'graphiql/graphiql.css'; import { StorageBucket } from '../../lib/storage'; import { GraphQLEndpoint } from '../../lib/api'; +import { BackstageTheme } from '@backstage/theme'; import { Progress } from '@backstage/core-components'; const GraphiQL = React.lazy(() => import('graphiql').then(m => ({ default: m.GraphiQL })), ); -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles(theme => ({ root: { height: '100%', display: 'flex', @@ -69,11 +69,10 @@ export const GraphiQLBrowser = (props: GraphiQLBrowserProps) => { classes={{ root: classes.tabs }} value={tabIndex} onChange={(_, value) => setTabIndex(value)} - indicatorColor="secondary" - textColor="inherit" + indicatorColor="primary" > {endpoints.map(({ title }, index) => ( - + ))} diff --git a/plugins/graphiql/src/components/GraphiQLPage/GraphiQLPage.tsx b/plugins/graphiql/src/components/GraphiQLPage/GraphiQLPage.tsx index b075e0d478..0b4399948a 100644 --- a/plugins/graphiql/src/components/GraphiQLPage/GraphiQLPage.tsx +++ b/plugins/graphiql/src/components/GraphiQLPage/GraphiQLPage.tsx @@ -19,7 +19,7 @@ import useAsync from 'react-use/lib/useAsync'; import 'graphiql/graphiql.css'; import { graphQlBrowseApiRef } from '../../lib/api'; import { GraphiQLBrowser } from '../GraphiQLBrowser'; -import { Typography } from '@mui/material'; +import { Typography } from '@material-ui/core'; import { Content, Header, From 2a34253e2a6c9c5017d3965ab48e0eb171a4c7d5 Mon Sep 17 00:00:00 2001 From: Philipp Hugenroth Date: Fri, 5 May 2023 15:49:54 +0200 Subject: [PATCH 51/55] Fix tsc & build api-reports Signed-off-by: Philipp Hugenroth --- packages/theme/api-report.md | 6 ++++++ plugins/techdocs-addons-test-utils/src/test-utils.tsx | 2 +- 2 files changed, 7 insertions(+), 1 deletion(-) diff --git a/packages/theme/api-report.md b/packages/theme/api-report.md index 9fd00ff877..fe05ca6b4e 100644 --- a/packages/theme/api-report.md +++ b/packages/theme/api-report.md @@ -95,6 +95,12 @@ export interface BackstageTheme extends Theme_2 { palette: BackstagePalette; } +// @public +export type BackstageThemeAdditions = { + page: PageTheme; + getPageTheme: (selector: PageThemeSelector) => PageTheme; +}; + // @public @deprecated export interface BackstageThemeOptions extends ThemeOptions_3 { // (undocumented) diff --git a/plugins/techdocs-addons-test-utils/src/test-utils.tsx b/plugins/techdocs-addons-test-utils/src/test-utils.tsx index a6e83262fb..1a921437b1 100644 --- a/plugins/techdocs-addons-test-utils/src/test-utils.tsx +++ b/plugins/techdocs-addons-test-utils/src/test-utils.tsx @@ -21,7 +21,7 @@ import React, { ReactElement } from 'react'; import { screen } from 'testing-library__dom'; import { renderToStaticMarkup } from 'react-dom/server'; import { Route } from 'react-router-dom'; -import { act, render, waitFor } from '@testing-library/react'; +import { act, render } from '@testing-library/react'; import { wrapInTestApp, TestApiProvider } from '@backstage/test-utils'; import { FlatRoutes } from '@backstage/core-app-api'; From 0b03f317350e3ff1db50af05dde16307d05e0c36 Mon Sep 17 00:00:00 2001 From: Philipp Hugenroth Date: Fri, 5 May 2023 16:03:09 +0200 Subject: [PATCH 52/55] Remove non-intended changes Signed-off-by: Philipp Hugenroth --- .../src/layout/Sidebar/Page.tsx | 12 +- yarn.lock | 137 +++--------------- 2 files changed, 24 insertions(+), 125 deletions(-) diff --git a/packages/core-components/src/layout/Sidebar/Page.tsx b/packages/core-components/src/layout/Sidebar/Page.tsx index a1564c0409..5f660547d1 100644 --- a/packages/core-components/src/layout/Sidebar/Page.tsx +++ b/packages/core-components/src/layout/Sidebar/Page.tsx @@ -33,23 +33,23 @@ import { SidebarPinStateProvider } from './SidebarPinStateContext'; export type SidebarPageClassKey = 'root'; -type PageStyleProps = { sidebarConfig: SidebarConfig; isPinned: boolean }; - -const useStyles = makeStyles( +const useStyles = makeStyles< + BackstageTheme, + { sidebarConfig: SidebarConfig; isPinned: boolean } +>( theme => ({ root: { width: '100%', transition: 'padding-left 0.1s ease-out', isolation: 'isolate', [theme.breakpoints.up('sm')]: { - paddingLeft: (props: PageStyleProps) => + paddingLeft: props => props.isPinned ? props.sidebarConfig.drawerWidthOpen : props.sidebarConfig.drawerWidthClosed, }, [theme.breakpoints.down('xs')]: { - paddingBottom: (props: PageStyleProps) => - props.sidebarConfig.mobileSidebarHeight, + paddingBottom: props => props.sidebarConfig.mobileSidebarHeight, }, }, content: { diff --git a/yarn.lock b/yarn.lock index bdc04393da..cc32ce9a0e 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3472,7 +3472,7 @@ __metadata: languageName: node linkType: hard -"@babel/runtime@npm:^7.0.0, @babel/runtime@npm:^7.1.2, @babel/runtime@npm:^7.10.1, @babel/runtime@npm:^7.12.1, @babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.14.6, @babel/runtime@npm:^7.15.4, @babel/runtime@npm:^7.18.3, @babel/runtime@npm:^7.18.6, @babel/runtime@npm:^7.2.0, @babel/runtime@npm:^7.20.1, @babel/runtime@npm:^7.20.13, @babel/runtime@npm:^7.20.6, @babel/runtime@npm:^7.20.7, @babel/runtime@npm:^7.21.0, @babel/runtime@npm:^7.3.1, @babel/runtime@npm:^7.4.4, @babel/runtime@npm:^7.5.5, @babel/runtime@npm:^7.6.0, @babel/runtime@npm:^7.7.6, @babel/runtime@npm:^7.8.3, @babel/runtime@npm:^7.8.4, @babel/runtime@npm:^7.8.7, @babel/runtime@npm:^7.9.2": +"@babel/runtime@npm:^7.0.0, @babel/runtime@npm:^7.1.2, @babel/runtime@npm:^7.10.1, @babel/runtime@npm:^7.12.1, @babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.14.6, @babel/runtime@npm:^7.15.4, @babel/runtime@npm:^7.18.3, @babel/runtime@npm:^7.18.6, @babel/runtime@npm:^7.2.0, @babel/runtime@npm:^7.20.1, @babel/runtime@npm:^7.20.13, @babel/runtime@npm:^7.20.7, @babel/runtime@npm:^7.21.0, @babel/runtime@npm:^7.3.1, @babel/runtime@npm:^7.4.4, @babel/runtime@npm:^7.5.5, @babel/runtime@npm:^7.6.0, @babel/runtime@npm:^7.7.6, @babel/runtime@npm:^7.8.3, @babel/runtime@npm:^7.8.4, @babel/runtime@npm:^7.8.7, @babel/runtime@npm:^7.9.2": version: 7.21.0 resolution: "@babel/runtime@npm:7.21.0" dependencies: @@ -6960,10 +6960,9 @@ __metadata: "@backstage/dev-utils": "workspace:^" "@backstage/test-utils": "workspace:^" "@backstage/theme": "workspace:^" - "@mui/icons-material": ^5.11.0 - "@mui/lab": 5.0.0-alpha.114 - "@mui/material": ^5.12.2 - "@mui/styles": ^5.11.2 + "@material-ui/core": ^4.12.2 + "@material-ui/icons": ^4.9.1 + "@material-ui/lab": 4.0.0-alpha.61 "@testing-library/dom": ^8.0.0 "@testing-library/jest-dom": ^5.10.1 "@testing-library/react": ^12.1.3 @@ -12881,29 +12880,6 @@ __metadata: languageName: node linkType: hard -"@mui/base@npm:5.0.0-alpha.112": - version: 5.0.0-alpha.112 - resolution: "@mui/base@npm:5.0.0-alpha.112" - dependencies: - "@babel/runtime": ^7.20.7 - "@emotion/is-prop-valid": ^1.2.0 - "@mui/types": ^7.2.3 - "@mui/utils": ^5.11.2 - "@popperjs/core": ^2.11.6 - clsx: ^1.2.1 - prop-types: ^15.8.1 - react-is: ^18.2.0 - peerDependencies: - "@types/react": ^17.0.0 || ^18.0.0 - react: ^17.0.0 || ^18.0.0 - react-dom: ^17.0.0 || ^18.0.0 - peerDependenciesMeta: - "@types/react": - optional: true - checksum: fd19240ac16859d62f057fd80261fc4e0dbc960a648b601bd7beaeb44b88c059f654b0989f33cea655ad61106832bffa0cd8446730c1be7671b6cde383dbce80 - languageName: node - linkType: hard - "@mui/base@npm:5.0.0-alpha.127": version: 5.0.0-alpha.127 resolution: "@mui/base@npm:5.0.0-alpha.127" @@ -12934,52 +12910,6 @@ __metadata: languageName: node linkType: hard -"@mui/icons-material@npm:^5.11.0": - version: 5.11.0 - resolution: "@mui/icons-material@npm:5.11.0" - dependencies: - "@babel/runtime": ^7.20.6 - peerDependencies: - "@mui/material": ^5.0.0 - "@types/react": ^17.0.0 || ^18.0.0 - react: ^17.0.0 || ^18.0.0 - peerDependenciesMeta: - "@types/react": - optional: true - checksum: 764c1185b3432f0228f3c5217b0e218b10f106fa96d305dfc62c0ef5afd2a7a087b0d664fd0a8171282e195c18d3ee073d5f037901a2bed1a1519a70fbb0501c - languageName: node - linkType: hard - -"@mui/lab@npm:5.0.0-alpha.114": - version: 5.0.0-alpha.114 - resolution: "@mui/lab@npm:5.0.0-alpha.114" - dependencies: - "@babel/runtime": ^7.20.7 - "@mui/base": 5.0.0-alpha.112 - "@mui/system": ^5.11.2 - "@mui/types": ^7.2.3 - "@mui/utils": ^5.11.2 - clsx: ^1.2.1 - prop-types: ^15.8.1 - react-is: ^18.2.0 - peerDependencies: - "@emotion/react": ^11.5.0 - "@emotion/styled": ^11.3.0 - "@mui/material": ^5.0.0 - "@types/react": ^17.0.0 || ^18.0.0 - react: ^17.0.0 || ^18.0.0 - react-dom: ^17.0.0 || ^18.0.0 - peerDependenciesMeta: - "@emotion/react": - optional: true - "@emotion/styled": - optional: true - "@types/react": - optional: true - checksum: 0b6441e7f7a69e2a6910f044ef2a222462a219f61e3a05c023484508e7f14a5fe6baeddf08b37bceab357c7cb0eed90324ac42ecd8e59a6eb6e1c801ea01504a - languageName: node - linkType: hard - "@mui/material@npm:^5.12.2": version: 5.12.2 resolution: "@mui/material@npm:5.12.2" @@ -13013,7 +12943,7 @@ __metadata: languageName: node linkType: hard -"@mui/private-theming@npm:^5.11.2, @mui/private-theming@npm:^5.12.0": +"@mui/private-theming@npm:^5.12.0": version: 5.12.0 resolution: "@mui/private-theming@npm:5.12.0" dependencies: @@ -13051,38 +12981,7 @@ __metadata: languageName: node linkType: hard -"@mui/styles@npm:^5.11.2": - version: 5.11.2 - resolution: "@mui/styles@npm:5.11.2" - dependencies: - "@babel/runtime": ^7.20.7 - "@emotion/hash": ^0.9.0 - "@mui/private-theming": ^5.11.2 - "@mui/types": ^7.2.3 - "@mui/utils": ^5.11.2 - clsx: ^1.2.1 - csstype: ^3.1.1 - hoist-non-react-statics: ^3.3.2 - jss: ^10.9.2 - jss-plugin-camel-case: ^10.9.2 - jss-plugin-default-unit: ^10.9.2 - jss-plugin-global: ^10.9.2 - jss-plugin-nested: ^10.9.2 - jss-plugin-props-sort: ^10.9.2 - jss-plugin-rule-value-function: ^10.9.2 - jss-plugin-vendor-prefixer: ^10.9.2 - prop-types: ^15.8.1 - peerDependencies: - "@types/react": ^17.0.0 - react: ^17.0.0 - peerDependenciesMeta: - "@types/react": - optional: true - checksum: d565e53acd6f49679446dbb9d85ab055d6c16225afd429ac9a738fba3cddfc394f88530cebfe1b3640ca89f58e7db73bb47d09e9bb05c80e47a5018418802378 - languageName: node - linkType: hard - -"@mui/system@npm:^5.11.2, @mui/system@npm:^5.12.1": +"@mui/system@npm:^5.12.1": version: 5.12.1 resolution: "@mui/system@npm:5.12.1" dependencies: @@ -13110,7 +13009,7 @@ __metadata: languageName: node linkType: hard -"@mui/types@npm:^7.2.3, @mui/types@npm:^7.2.4": +"@mui/types@npm:^7.2.4": version: 7.2.4 resolution: "@mui/types@npm:7.2.4" peerDependencies: @@ -13122,7 +13021,7 @@ __metadata: languageName: node linkType: hard -"@mui/utils@npm:^5.11.2, @mui/utils@npm:^5.12.0": +"@mui/utils@npm:^5.12.0": version: 5.12.0 resolution: "@mui/utils@npm:5.12.0" dependencies: @@ -14048,7 +13947,7 @@ __metadata: languageName: node linkType: hard -"@popperjs/core@npm:^2.11.6, @popperjs/core@npm:^2.11.7": +"@popperjs/core@npm:^2.11.7": version: 2.11.7 resolution: "@popperjs/core@npm:2.11.7" checksum: 5b6553747899683452a1d28898c1b39173a4efd780e74360bfcda8eb42f1c5e819602769c81a10920fc68c881d07fb40429604517d499567eac079cfa6470f19 @@ -21756,7 +21655,7 @@ __metadata: languageName: node linkType: hard -"csstype@npm:^3.0.2, csstype@npm:^3.0.6, csstype@npm:^3.1.1, csstype@npm:^3.1.2": +"csstype@npm:^3.0.2, csstype@npm:^3.0.6, csstype@npm:^3.1.2": version: 3.0.9 resolution: "csstype@npm:3.0.9" checksum: 199f9af7e673f9f188525c3102a329d637ff46c52f6385a4427ff5cb17adcb736189150170a7af7c5701d18d7704bdad130273f4aa7e44c6c4f9967e6115dc93 @@ -29262,7 +29161,7 @@ __metadata: languageName: node linkType: hard -"jss-plugin-camel-case@npm:^10.5.1, jss-plugin-camel-case@npm:^10.9.2": +"jss-plugin-camel-case@npm:^10.5.1": version: 10.9.2 resolution: "jss-plugin-camel-case@npm:10.9.2" dependencies: @@ -29273,7 +29172,7 @@ __metadata: languageName: node linkType: hard -"jss-plugin-default-unit@npm:^10.5.1, jss-plugin-default-unit@npm:^10.9.2": +"jss-plugin-default-unit@npm:^10.5.1": version: 10.9.2 resolution: "jss-plugin-default-unit@npm:10.9.2" dependencies: @@ -29283,7 +29182,7 @@ __metadata: languageName: node linkType: hard -"jss-plugin-global@npm:^10.5.1, jss-plugin-global@npm:^10.9.2": +"jss-plugin-global@npm:^10.5.1": version: 10.9.2 resolution: "jss-plugin-global@npm:10.9.2" dependencies: @@ -29293,7 +29192,7 @@ __metadata: languageName: node linkType: hard -"jss-plugin-nested@npm:^10.5.1, jss-plugin-nested@npm:^10.9.2": +"jss-plugin-nested@npm:^10.5.1": version: 10.9.2 resolution: "jss-plugin-nested@npm:10.9.2" dependencies: @@ -29304,7 +29203,7 @@ __metadata: languageName: node linkType: hard -"jss-plugin-props-sort@npm:^10.5.1, jss-plugin-props-sort@npm:^10.9.2": +"jss-plugin-props-sort@npm:^10.5.1": version: 10.9.2 resolution: "jss-plugin-props-sort@npm:10.9.2" dependencies: @@ -29314,7 +29213,7 @@ __metadata: languageName: node linkType: hard -"jss-plugin-rule-value-function@npm:^10.5.1, jss-plugin-rule-value-function@npm:^10.9.2": +"jss-plugin-rule-value-function@npm:^10.5.1": version: 10.9.2 resolution: "jss-plugin-rule-value-function@npm:10.9.2" dependencies: @@ -29325,7 +29224,7 @@ __metadata: languageName: node linkType: hard -"jss-plugin-vendor-prefixer@npm:^10.5.1, jss-plugin-vendor-prefixer@npm:^10.9.2": +"jss-plugin-vendor-prefixer@npm:^10.5.1": version: 10.9.2 resolution: "jss-plugin-vendor-prefixer@npm:10.9.2" dependencies: @@ -29368,7 +29267,7 @@ __metadata: languageName: node linkType: hard -"jss@npm:^10.5.1, jss@npm:^10.9.2, jss@npm:~10.10.0": +"jss@npm:^10.5.1, jss@npm:~10.10.0": version: 10.10.0 resolution: "jss@npm:10.10.0" dependencies: From 20b7da6f1311c36a5bacdb523f2a6a235737a57b Mon Sep 17 00:00:00 2001 From: Philipp Hugenroth Date: Fri, 5 May 2023 16:40:57 +0200 Subject: [PATCH 53/55] Add changeset Signed-off-by: Philipp Hugenroth --- .changeset/weak-snails-sparkle.md | 24 ++++++++++++++++++++ packages/theme/src/unified/overrides.test.ts | 2 +- 2 files changed, 25 insertions(+), 1 deletion(-) create mode 100644 .changeset/weak-snails-sparkle.md diff --git a/.changeset/weak-snails-sparkle.md b/.changeset/weak-snails-sparkle.md new file mode 100644 index 0000000000..55450e0869 --- /dev/null +++ b/.changeset/weak-snails-sparkle.md @@ -0,0 +1,24 @@ +--- +'@backstage/app-defaults': minor +'@backstage/test-utils': minor +'@backstage/theme': minor +'@backstage/plugin-techdocs-addons-test-utils': patch +'@backstage/cli': patch +--- + +**MUI v5 Support:** Adding platform-wide support for MUI v5 allowing a transition phase for migrating central plugins & components over. We still support v4 instances & plugins by adding a + +To allow the future support of plugins & components using MUI v5 you want to upgrade your `AppTheme`'s to using the `UnifiedThemeProvider` + +```diff + Provider: ({ children }) => ( +- +- {children} +- ++ + ), +``` + +**'@backstage/test-utils':** Test App Wrapper is using `UnifiedThemeProvider` for tests now. +**'@backstage/plugin-techdocs-addons-test-utils':** Fix avoiding test to run on unmount. +**'@backstage/cli':** Enforcing MUI v5 specific linting to minimize bundle size. diff --git a/packages/theme/src/unified/overrides.test.ts b/packages/theme/src/unified/overrides.test.ts index 38b4738444..e84cedade6 100644 --- a/packages/theme/src/unified/overrides.test.ts +++ b/packages/theme/src/unified/overrides.test.ts @@ -14,7 +14,7 @@ * limitations under the License. */ -import { Theme } from '@mui/material'; +import { Theme } from '@mui/material/styles'; import { transformV5ComponentThemesToV4 } from './overrides'; describe('transformV5ComponentThemesToV4', () => { From 05169a796dfd8cea5bc59485bbf5edc3f127f723 Mon Sep 17 00:00:00 2001 From: Philipp Hugenroth Date: Mon, 8 May 2023 11:29:37 +0200 Subject: [PATCH 54/55] Fix lint factory & changeset Signed-off-by: Philipp Hugenroth --- .changeset/weak-snails-sparkle.md | 2 +- docs/local-dev/cli-build-system.md | 21 +++++++++++---------- packages/cli/config/eslint-factory.js | 9 ++++++--- 3 files changed, 18 insertions(+), 14 deletions(-) diff --git a/.changeset/weak-snails-sparkle.md b/.changeset/weak-snails-sparkle.md index 55450e0869..947c20117b 100644 --- a/.changeset/weak-snails-sparkle.md +++ b/.changeset/weak-snails-sparkle.md @@ -20,5 +20,5 @@ To allow the future support of plugins & components using MUI v5 you want to upg ``` **'@backstage/test-utils':** Test App Wrapper is using `UnifiedThemeProvider` for tests now. -**'@backstage/plugin-techdocs-addons-test-utils':** Fix avoiding test to run on unmount. +**'@backstage/plugin-techdocs-addons-test-utils':** Fix tests by avoiding re-running theme on cleanup. **'@backstage/cli':** Enforcing MUI v5 specific linting to minimize bundle size. diff --git a/docs/local-dev/cli-build-system.md b/docs/local-dev/cli-build-system.md index a5df84f8dc..61e94e9ef4 100644 --- a/docs/local-dev/cli-build-system.md +++ b/docs/local-dev/cli-build-system.md @@ -165,16 +165,17 @@ module.exports = require('@backstage/cli/config/eslint-factory')(__dirname, { The configuration factory also provides utilities for extending the configuration in ways that are otherwise very cumbersome to do with plain ESLint, particularly for rules like `no-restricted-syntax`. These are the extra keys that are available: -| Key | Description | -| ----------------------- | ------------------------------------------------------------------ | -| `tsRules` | Additional rules to apply to TypeScript files | -| `testRules` | Additional rules to apply to tests files | -| `restrictedImports` | Additional paths to add to `no-restricted-imports` | -| `restrictedSrcImports` | Additional paths to add to `no-restricted-imports` in src files | -| `restrictedTestImports` | Additional paths to add to `no-restricted-imports` in test files | -| `restrictedSyntax` | Additional patterns to add to `no-restricted-syntax` | -| `restrictedSrcSyntax` | Additional patterns to add to `no-restricted-syntax` in src files | -| `restrictedTestSyntax` | Additional patterns to add to `no-restricted-syntax` in test files | +| Key | Description | +| -------------------------- | ------------------------------------------------------------------ | +| `tsRules` | Additional rules to apply to TypeScript files | +| `testRules` | Additional rules to apply to tests files | +| `restrictedImports` | Additional paths to add to `no-restricted-imports` | +| `restrictedImportPatterns` | Additional patterns to add to `no-restricted-imports` | +| `restrictedSrcImports` | Additional paths to add to `no-restricted-imports` in src files | +| `restrictedTestImports` | Additional paths to add to `no-restricted-imports` in test files | +| `restrictedSyntax` | Additional patterns to add to `no-restricted-syntax` | +| `restrictedSrcSyntax` | Additional patterns to add to `no-restricted-syntax` in src files | +| `restrictedTestSyntax` | Additional patterns to add to `no-restricted-syntax` in test files | ## Type Checking diff --git a/packages/cli/config/eslint-factory.js b/packages/cli/config/eslint-factory.js index 6888e0ff67..36b51324fc 100644 --- a/packages/cli/config/eslint-factory.js +++ b/packages/cli/config/eslint-factory.js @@ -45,7 +45,7 @@ function createConfig(dir, extraConfig = {}) { testRules, restrictedImports, - restrictedImportsPatterns, + restrictedImportPatterns, restrictedSrcImports, restrictedTestImports, restrictedSyntax, @@ -116,7 +116,7 @@ function createConfig(dir, extraConfig = {}) { '*.test*', '**/__testUtils__/**', '**/__mocks__/**', - ...(restrictedImportsPatterns ?? []), + ...(restrictedImportPatterns ?? []), ], }, ], @@ -220,7 +220,10 @@ function createConfigForRole(dir, role, extraConfig = {}) { ...(extraConfig.restrictedImports ?? []), ], // https://mui.com/material-ui/guides/minimizing-bundle-size/ - restrictedImportsPatterns: ['@mui/*/*/*'], + restrictedImportPatterns: [ + '@mui/*/*/*', + ...(extraConfig.restrictedImportPatterns ?? []), + ], tsRules: { 'react/prop-types': 0, ...extraConfig.tsRules, From 1fd38bc4141a1ba472053b05264b86fcb86b249b Mon Sep 17 00:00:00 2001 From: Philipp Hugenroth Date: Tue, 23 May 2023 16:21:22 +0200 Subject: [PATCH 55/55] Update changesets Signed-off-by: Philipp Hugenroth --- .changeset/weak-snails-spar.md | 5 +++++ .changeset/weak-snails-spark.md | 5 +++++ .changeset/weak-snails-sparkl.md | 17 +++++++++++++++++ .changeset/weak-snails-sparkle.md | 21 +-------------------- packages/theme/package.json | 5 ----- yarn.lock | 3 --- 6 files changed, 28 insertions(+), 28 deletions(-) create mode 100644 .changeset/weak-snails-spar.md create mode 100644 .changeset/weak-snails-spark.md create mode 100644 .changeset/weak-snails-sparkl.md diff --git a/.changeset/weak-snails-spar.md b/.changeset/weak-snails-spar.md new file mode 100644 index 0000000000..3cd930d5b0 --- /dev/null +++ b/.changeset/weak-snails-spar.md @@ -0,0 +1,5 @@ +--- +'@backstage/plugin-techdocs-addons-test-utils': patch +--- + +Avoiding re-running tests on cleanup. diff --git a/.changeset/weak-snails-spark.md b/.changeset/weak-snails-spark.md new file mode 100644 index 0000000000..c82626ea39 --- /dev/null +++ b/.changeset/weak-snails-spark.md @@ -0,0 +1,5 @@ +--- +'@backstage/test-utils': minor +--- + +Test App Wrapper is now using `UnifiedThemeProvider` for supporting MUI v5 next to MUI v4 in tests. diff --git a/.changeset/weak-snails-sparkl.md b/.changeset/weak-snails-sparkl.md new file mode 100644 index 0000000000..9bbc7d843b --- /dev/null +++ b/.changeset/weak-snails-sparkl.md @@ -0,0 +1,17 @@ +--- +'@backstage/app-defaults': minor +'@backstage/theme': minor +--- + +**MUI v5 Support:** Adding platform-wide support for MUI v5 allowing a transition phase for migrating central plugins & components over. We still support v4 instances & plugins by adding a + +To allow the future support of plugins & components using MUI v5 you want to upgrade your `AppTheme`'s to using the `UnifiedThemeProvider` + +```diff + Provider: ({ children }) => ( +- +- {children} +- ++ + ), +``` diff --git a/.changeset/weak-snails-sparkle.md b/.changeset/weak-snails-sparkle.md index 947c20117b..95a2255e56 100644 --- a/.changeset/weak-snails-sparkle.md +++ b/.changeset/weak-snails-sparkle.md @@ -1,24 +1,5 @@ --- -'@backstage/app-defaults': minor -'@backstage/test-utils': minor -'@backstage/theme': minor -'@backstage/plugin-techdocs-addons-test-utils': patch '@backstage/cli': patch --- -**MUI v5 Support:** Adding platform-wide support for MUI v5 allowing a transition phase for migrating central plugins & components over. We still support v4 instances & plugins by adding a - -To allow the future support of plugins & components using MUI v5 you want to upgrade your `AppTheme`'s to using the `UnifiedThemeProvider` - -```diff - Provider: ({ children }) => ( -- -- {children} -- -+ - ), -``` - -**'@backstage/test-utils':** Test App Wrapper is using `UnifiedThemeProvider` for tests now. -**'@backstage/plugin-techdocs-addons-test-utils':** Fix tests by avoiding re-running theme on cleanup. -**'@backstage/cli':** Enforcing MUI v5 specific linting to minimize bundle size. +Enforcing MUI v5 specific linting to minimize bundle size. diff --git a/packages/theme/package.json b/packages/theme/package.json index 0e73918072..52def665d6 100644 --- a/packages/theme/package.json +++ b/packages/theme/package.json @@ -42,11 +42,6 @@ "react": "^16.13.1 || ^17.0.0", "react-dom": "^16.13.1 || ^17.0.0" }, - "peerDependenciesMeta": { - "@material-ui/core": { - "optional": true - } - }, "devDependencies": { "@backstage/cli": "workspace:^", "@types/react": "^16.13.1 || ^17.0.0" diff --git a/yarn.lock b/yarn.lock index cc32ce9a0e..2e6f814cf5 100644 --- a/yarn.lock +++ b/yarn.lock @@ -9636,9 +9636,6 @@ __metadata: "@types/react": ^16.13.1 || ^17.0.0 react: ^16.13.1 || ^17.0.0 react-dom: ^16.13.1 || ^17.0.0 - peerDependenciesMeta: - "@material-ui/core": - optional: true languageName: unknown linkType: soft