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 }),