diff --git a/.changeset/nervous-llamas-tan.md b/.changeset/nervous-llamas-tan.md new file mode 100644 index 0000000000..90b6f5d0ce --- /dev/null +++ b/.changeset/nervous-llamas-tan.md @@ -0,0 +1,5 @@ +--- +'@backstage/plugin-org': patch +--- + +Removed themed example from `OwnershipCard` Storybook entry diff --git a/.changeset/serious-carrots-applaud.md b/.changeset/serious-carrots-applaud.md new file mode 100644 index 0000000000..5e1b526fac --- /dev/null +++ b/.changeset/serious-carrots-applaud.md @@ -0,0 +1,5 @@ +--- +'@backstage/theme': patch +--- + +You can now customize the typography of your theme by passing in your own custom typography defaults diff --git a/packages/theme/api-report.md b/packages/theme/api-report.md index d29ad937cf..4b2aad6923 100644 --- a/packages/theme/api-report.md +++ b/packages/theme/api-report.md @@ -124,6 +124,8 @@ export interface BaseThemeOptionsInput { pageTheme?: Record; // (undocumented) palette: PaletteOptions; + // (undocumented) + typography?: Typography; } // @public @@ -134,40 +136,7 @@ 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; - }; - }; + typography: Typography; page: PageTheme; getPageTheme: ({ themeId }: PageThemeSelector) => PageTheme; }; @@ -379,6 +348,7 @@ export type SimpleThemeOptions = { pageTheme?: Record; fontFamily?: string; htmlFontSize?: number; + typography?: Typography; }; // @public @@ -402,6 +372,42 @@ export function transformV5ComponentThemesToV4( props: ComponentsProps; }; +// @public +export type 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: { + fontSize: number; + fontWeight: number; + marginBottom: number; + }; + h5: { + fontSize: number; + fontWeight: number; + marginBottom: number; + }; + h6: { + fontSize: number; + fontWeight: number; + marginBottom: number; + }; +}; + // @public export interface UnifiedTheme { // (undocumented) @@ -422,6 +428,8 @@ export interface UnifiedThemeOptions { pageTheme?: Record; // (undocumented) palette: PaletteOptions & PaletteOptions_2; + // (undocumented) + typography?: Typography; } // @public diff --git a/packages/theme/src/base/createBaseThemeOptions.ts b/packages/theme/src/base/createBaseThemeOptions.ts index e54e920deb..b220d6afe7 100644 --- a/packages/theme/src/base/createBaseThemeOptions.ts +++ b/packages/theme/src/base/createBaseThemeOptions.ts @@ -14,7 +14,7 @@ * limitations under the License. */ -import { PageTheme, PageThemeSelector } from './types'; +import { Typography, PageTheme, PageThemeSelector } from './types'; import { pageTheme as defaultPageThemes } from './pageTheme'; const DEFAULT_HTML_FONT_SIZE = 16; @@ -33,6 +33,7 @@ export interface BaseThemeOptionsInput { pageTheme?: Record; fontFamily?: string; htmlFontSize?: number; + typography?: Typography; } /** @@ -49,48 +50,51 @@ export function createBaseThemeOptions( fontFamily = DEFAULT_FONT_FAMILY, defaultPageTheme = DEFAULT_PAGE_THEME, pageTheme = defaultPageThemes, + typography, } = options; if (!pageTheme[defaultPageTheme]) { throw new Error(`${defaultPageTheme} is not defined in pageTheme.`); } + const defaultTypography = { + htmlFontSize, + fontFamily, + h1: { + fontSize: 54, + fontWeight: 700, + marginBottom: 10, + }, + h2: { + fontSize: 40, + fontWeight: 700, + marginBottom: 8, + }, + h3: { + fontSize: 32, + fontWeight: 700, + marginBottom: 6, + }, + h4: { + fontWeight: 700, + fontSize: 28, + marginBottom: 6, + }, + h5: { + fontWeight: 700, + fontSize: 24, + marginBottom: 4, + }, + h6: { + fontWeight: 700, + fontSize: 20, + marginBottom: 2, + }, + }; + return { palette, - typography: { - htmlFontSize, - fontFamily, - h1: { - fontSize: 54, - fontWeight: 700, - marginBottom: 10, - }, - h2: { - fontSize: 40, - fontWeight: 700, - marginBottom: 8, - }, - h3: { - fontSize: 32, - fontWeight: 700, - marginBottom: 6, - }, - h4: { - fontWeight: 700, - fontSize: 28, - marginBottom: 6, - }, - h5: { - fontWeight: 700, - fontSize: 24, - marginBottom: 4, - }, - h6: { - fontWeight: 700, - fontSize: 20, - marginBottom: 2, - }, - }, + typography: typography ?? defaultTypography, page: pageTheme[defaultPageTheme], getPageTheme: ({ themeId }: PageThemeSelector) => pageTheme[themeId] ?? pageTheme[defaultPageTheme], diff --git a/packages/theme/src/base/index.ts b/packages/theme/src/base/index.ts index 4bb80aa42b..1b1ae097b3 100644 --- a/packages/theme/src/base/index.ts +++ b/packages/theme/src/base/index.ts @@ -23,4 +23,5 @@ export type { BackstagePaletteAdditions, PageTheme, PageThemeSelector, + Typography, } from './types'; diff --git a/packages/theme/src/base/types.ts b/packages/theme/src/base/types.ts index 8f71ce4292..6905f2928c 100644 --- a/packages/theme/src/base/types.ts +++ b/packages/theme/src/base/types.ts @@ -114,3 +114,43 @@ export type BackstageThemeAdditions = { page: PageTheme; getPageTheme: (selector: PageThemeSelector) => PageTheme; }; + +/** + * Custom Typography + * + * @public + */ +export type 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: { + fontSize: number; + fontWeight: number; + marginBottom: number; + }; + h5: { + fontSize: number; + fontWeight: number; + marginBottom: number; + }; + h6: { + fontSize: number; + fontWeight: number; + marginBottom: number; + }; +}; diff --git a/packages/theme/src/unified/UnifiedTheme.tsx b/packages/theme/src/unified/UnifiedTheme.tsx index 2c7f2632ba..fedecc982d 100644 --- a/packages/theme/src/unified/UnifiedTheme.tsx +++ b/packages/theme/src/unified/UnifiedTheme.tsx @@ -29,7 +29,7 @@ import { createTheme as createV5Theme, } from '@mui/material/styles'; import { createBaseThemeOptions } from '../base/createBaseThemeOptions'; -import { PageTheme } from '../base/types'; +import { Typography, PageTheme } from '../base/types'; import { defaultComponentThemes } from '../v5'; import { transformV5ComponentThemesToV4 } from './overrides'; import { SupportedThemes, SupportedVersions, UnifiedTheme } from './types'; @@ -64,6 +64,7 @@ export interface UnifiedThemeOptions { fontFamily?: string; htmlFontSize?: number; components?: ThemeOptionsV5['components']; + typography?: Typography; } /** diff --git a/packages/theme/src/v4/types.ts b/packages/theme/src/v4/types.ts index 40786435f9..4a5c8efe2f 100644 --- a/packages/theme/src/v4/types.ts +++ b/packages/theme/src/v4/types.ts @@ -25,6 +25,7 @@ import type { import { BackstagePaletteAdditions, BackstageThemeAdditions, + Typography, PageTheme, PageThemeSelector, } from '../base/types'; @@ -89,6 +90,7 @@ export type SimpleThemeOptions = { pageTheme?: Record; fontFamily?: string; htmlFontSize?: number; + typography?: Typography; }; declare module '@material-ui/core/styles/createPalette' { diff --git a/plugins/org/src/components/Cards/OwnershipCard/OwnershipCard.stories.tsx b/plugins/org/src/components/Cards/OwnershipCard/OwnershipCard.stories.tsx index 67cd512d72..390fff12a4 100644 --- a/plugins/org/src/components/Cards/OwnershipCard/OwnershipCard.stories.tsx +++ b/plugins/org/src/components/Cards/OwnershipCard/OwnershipCard.stories.tsx @@ -22,13 +22,7 @@ import { EntityProvider, } from '@backstage/plugin-catalog-react'; import { TestApiRegistry, wrapInTestApp } from '@backstage/test-utils'; -import { - BackstageTheme, - createTheme, - genPageTheme, - shapes, -} from '@backstage/theme'; -import { Grid, ThemeProvider } from '@material-ui/core'; +import { Grid } from '@material-ui/core'; import React from 'react'; import { catalogIndexRouteRef } from '../../../routes'; import { OwnershipCard } from './OwnershipCard'; @@ -115,40 +109,6 @@ export const Default = () => }, ); -const monochromeTheme = (outer: BackstageTheme) => - createTheme({ - ...outer, - defaultPageTheme: 'home', - pageTheme: { - home: genPageTheme({ colors: ['#444'], shape: shapes.wave2 }), - documentation: genPageTheme({ colors: ['#474747'], shape: shapes.wave2 }), - tool: genPageTheme({ colors: ['#222'], shape: shapes.wave2 }), - service: genPageTheme({ colors: ['#aaa'], shape: shapes.wave2 }), - website: genPageTheme({ colors: ['#0e0e0e'], shape: shapes.wave2 }), - library: genPageTheme({ colors: ['#9d9d9d'], shape: shapes.wave2 }), - other: genPageTheme({ colors: ['#aaa'], shape: shapes.wave2 }), - app: genPageTheme({ colors: ['#666'], shape: shapes.wave2 }), - }, - }); - -export const Themed = () => - wrapInTestApp( - - - - - - - - - - - , - { - mountedRoutes: { '/catalog': catalogIndexRouteRef }, - }, - ); - export const WithVariableEntityList = { argTypes: { entityLimit: {