From 9395baa824137f386768558d3d4c0ccd70d9936f Mon Sep 17 00:00:00 2001 From: Andre Wanlin <67169551+awanlin@users.noreply.github.com> Date: Fri, 16 Jun 2023 13:17:02 -0500 Subject: [PATCH 1/2] Allow for customizing theme typography Signed-off-by: Andre Wanlin <67169551+awanlin@users.noreply.github.com> --- .changeset/nervous-llamas-tan.md | 5 ++ .changeset/serious-carrots-applaud.md | 5 ++ packages/theme/api-report.md | 76 ++++++++++--------- .../theme/src/base/createBaseThemeOptions.ts | 74 +++++++++--------- packages/theme/src/base/index.ts | 1 + packages/theme/src/base/types.ts | 40 ++++++++++ packages/theme/src/unified/UnifiedTheme.tsx | 3 +- packages/theme/src/v4/types.ts | 2 + .../OwnershipCard/OwnershipCard.stories.tsx | 42 +--------- 9 files changed, 137 insertions(+), 111 deletions(-) create mode 100644 .changeset/nervous-llamas-tan.md create mode 100644 .changeset/serious-carrots-applaud.md 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: { From 5b5fde33794dfee76c72b5384edac1825dbfc63a Mon Sep 17 00:00:00 2001 From: Andre Wanlin <67169551+awanlin@users.noreply.github.com> Date: Tue, 11 Jul 2023 06:06:15 -0500 Subject: [PATCH 2/2] Changes based on latest feedback Signed-off-by: Andre Wanlin <67169551+awanlin@users.noreply.github.com> --- .changeset/nervous-llamas-tan.md | 5 -- packages/theme/api-report.md | 80 +++++++++---------- .../theme/src/base/createBaseThemeOptions.ts | 4 +- packages/theme/src/base/index.ts | 2 +- packages/theme/src/base/types.ts | 2 +- packages/theme/src/unified/UnifiedTheme.tsx | 4 +- packages/theme/src/v4/types.ts | 4 +- 7 files changed, 48 insertions(+), 53 deletions(-) delete mode 100644 .changeset/nervous-llamas-tan.md diff --git a/.changeset/nervous-llamas-tan.md b/.changeset/nervous-llamas-tan.md deleted file mode 100644 index 90b6f5d0ce..0000000000 --- a/.changeset/nervous-llamas-tan.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@backstage/plugin-org': patch ---- - -Removed themed example from `OwnershipCard` Storybook entry diff --git a/packages/theme/api-report.md b/packages/theme/api-report.md index 4b2aad6923..d6380ee6e8 100644 --- a/packages/theme/api-report.md +++ b/packages/theme/api-report.md @@ -112,6 +112,42 @@ export interface BackstageThemeOptions extends ThemeOptions_3 { palette: BackstagePaletteOptions; } +// @public +export type BackstageTypography = { + 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 BaseThemeOptionsInput { // (undocumented) @@ -125,7 +161,7 @@ export interface BaseThemeOptionsInput { // (undocumented) palette: PaletteOptions; // (undocumented) - typography?: Typography; + typography?: BackstageTypography; } // @public @@ -136,7 +172,7 @@ export function createBaseThemeOptions( options: BaseThemeOptionsInput, ): { palette: PaletteOptions; - typography: Typography; + typography: BackstageTypography; page: PageTheme; getPageTheme: ({ themeId }: PageThemeSelector) => PageTheme; }; @@ -348,7 +384,7 @@ export type SimpleThemeOptions = { pageTheme?: Record; fontFamily?: string; htmlFontSize?: number; - typography?: Typography; + typography?: BackstageTypography; }; // @public @@ -372,42 +408,6 @@ 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) @@ -429,7 +429,7 @@ export interface UnifiedThemeOptions { // (undocumented) palette: PaletteOptions & PaletteOptions_2; // (undocumented) - typography?: Typography; + typography?: BackstageTypography; } // @public diff --git a/packages/theme/src/base/createBaseThemeOptions.ts b/packages/theme/src/base/createBaseThemeOptions.ts index b220d6afe7..bca56114d7 100644 --- a/packages/theme/src/base/createBaseThemeOptions.ts +++ b/packages/theme/src/base/createBaseThemeOptions.ts @@ -14,7 +14,7 @@ * limitations under the License. */ -import { Typography, PageTheme, PageThemeSelector } from './types'; +import { BackstageTypography, PageTheme, PageThemeSelector } from './types'; import { pageTheme as defaultPageThemes } from './pageTheme'; const DEFAULT_HTML_FONT_SIZE = 16; @@ -33,7 +33,7 @@ export interface BaseThemeOptionsInput { pageTheme?: Record; fontFamily?: string; htmlFontSize?: number; - typography?: Typography; + typography?: BackstageTypography; } /** diff --git a/packages/theme/src/base/index.ts b/packages/theme/src/base/index.ts index 1b1ae097b3..2da9fb0fac 100644 --- a/packages/theme/src/base/index.ts +++ b/packages/theme/src/base/index.ts @@ -23,5 +23,5 @@ export type { BackstagePaletteAdditions, PageTheme, PageThemeSelector, - Typography, + BackstageTypography, } from './types'; diff --git a/packages/theme/src/base/types.ts b/packages/theme/src/base/types.ts index 6905f2928c..3e34a0abb7 100644 --- a/packages/theme/src/base/types.ts +++ b/packages/theme/src/base/types.ts @@ -120,7 +120,7 @@ export type BackstageThemeAdditions = { * * @public */ -export type Typography = { +export type BackstageTypography = { htmlFontSize: number; fontFamily: string; h1: { diff --git a/packages/theme/src/unified/UnifiedTheme.tsx b/packages/theme/src/unified/UnifiedTheme.tsx index fedecc982d..aeae9694ee 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 { Typography, PageTheme } from '../base/types'; +import { BackstageTypography, PageTheme } from '../base/types'; import { defaultComponentThemes } from '../v5'; import { transformV5ComponentThemesToV4 } from './overrides'; import { SupportedThemes, SupportedVersions, UnifiedTheme } from './types'; @@ -64,7 +64,7 @@ export interface UnifiedThemeOptions { fontFamily?: string; htmlFontSize?: number; components?: ThemeOptionsV5['components']; - typography?: Typography; + typography?: BackstageTypography; } /** diff --git a/packages/theme/src/v4/types.ts b/packages/theme/src/v4/types.ts index 4a5c8efe2f..c5100dab8f 100644 --- a/packages/theme/src/v4/types.ts +++ b/packages/theme/src/v4/types.ts @@ -25,7 +25,7 @@ import type { import { BackstagePaletteAdditions, BackstageThemeAdditions, - Typography, + BackstageTypography, PageTheme, PageThemeSelector, } from '../base/types'; @@ -90,7 +90,7 @@ export type SimpleThemeOptions = { pageTheme?: Record; fontFamily?: string; htmlFontSize?: number; - typography?: Typography; + typography?: BackstageTypography; }; declare module '@material-ui/core/styles/createPalette' {