paulononato/backstage
1
0
Fork 0
Code Issues Pull Requests Actions 19 Packages Projects Releases Wiki Activity

theme: namespace MUI v4 methods and types

Browse Source 
Signed-off-by: Patrik Oldsberg <poldsberg@gmail.com>
This commit is contained in:
Patrik Oldsberg
2022-12-30 14:47:36 +01:00
committed by Philipp Hugenroth
parent c219d08fde
commit c48ff74795
8 changed files with 212 additions and 100 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/theme/api-report.md
+26 -14
View File
@@ -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<string, string[]>;
// @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<string, string>;
// @public @deprecated (undocumented)
export type SimpleThemeOptions = SimpleV4ThemeOptions;
// @public
export type SimpleThemeOptions = {
palette: BackstagePaletteOptions;
export type SimpleV4ThemeOptions = {
palette: PaletteOptions;
defaultPageTheme: string;
pageTheme?: Record<string, PageTheme>;
fontFamily?: string;
packages/theme/src/index.ts
+35 -5
View File
@@ -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;
packages/theme/src/types.ts
+1 -64
View File
@@ -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<string, PageTheme>;
fontFamily?: string;
htmlFontSize?: number;
};
/**
* The theme definitions for a given layout page.
*
packages/theme/src/baseTheme.ts → packages/theme/src/v4/baseTheme.ts
+10 -13
View File
@@ -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;
}
packages/theme/src/v4/index.ts
+30
View File
@@ -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';
packages/theme/src/pageTheme.ts → packages/theme/src/v4/pageTheme.ts
+2 -1
View File
@@ -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.
packages/theme/src/themes.ts → packages/theme/src/v4/themes.ts
+3 -3
View File
@@ -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: {
packages/theme/src/v4/types.ts
+105
View File
@@ -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<string, PageTheme>;
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;
}
}