From b2dd93f207c4812632aaaa731ad96fd715cb664f Mon Sep 17 00:00:00 2001 From: Emma Indal Date: Fri, 13 May 2022 15:49:55 +0200 Subject: [PATCH 1/4] delete headings transformations Signed-off-by: Emma Indal --- docs/README.md | 12 ++++++++++++ .../src/reader/transformers/styles/rules/typeset.ts | 4 ++-- 2 files changed, 14 insertions(+), 2 deletions(-) diff --git a/docs/README.md b/docs/README.md index c63a12b589..f323f3bdbe 100644 --- a/docs/README.md +++ b/docs/README.md @@ -1,3 +1,15 @@ # Documentation The Backstage documentation is available at https://backstage.io/docs + +# H1 + +## H2 + +### H3 + +#### H4 + +##### H5 + +###### H6 diff --git a/plugins/techdocs/src/reader/transformers/styles/rules/typeset.ts b/plugins/techdocs/src/reader/transformers/styles/rules/typeset.ts index e24b61da83..63d0f432e3 100644 --- a/plugins/techdocs/src/reader/transformers/styles/rules/typeset.ts +++ b/plugins/techdocs/src/reader/transformers/styles/rules/typeset.ts @@ -38,8 +38,8 @@ ${headings.reduce((style, heading) => { const calculate = (value: typeof fontSize) => { let factor: number | string = 1; if (typeof value === 'number') { - // 60% of the size defined because it is too big - factor = (value / 16) * 0.6; + // convert px to rem + factor = value / 16; } if (typeof value === 'string') { factor = value.replace('rem', ''); From 4c09c09102187a9a508976e5a69147fddcd711b3 Mon Sep 17 00:00:00 2001 From: Camila Belo Date: Wed, 18 May 2022 21:10:45 +0200 Subject: [PATCH 2/4] refactor(techdocs): apply review suggestions Signed-off-by: Camila Belo --- .changeset/strong-lies-explain.md | 5 +++++ docs/README.md | 12 ------------ packages/theme/api-report.md | 1 + packages/theme/src/baseTheme.ts | 10 ++++++++++ packages/theme/src/types.ts | 1 + .../examples/documented-component/docs/index.md | 14 ++++++++++++++ 6 files changed, 31 insertions(+), 12 deletions(-) create mode 100644 .changeset/strong-lies-explain.md diff --git a/.changeset/strong-lies-explain.md b/.changeset/strong-lies-explain.md new file mode 100644 index 0000000000..d9657be6b4 --- /dev/null +++ b/.changeset/strong-lies-explain.md @@ -0,0 +1,5 @@ +--- +'@backstage/theme': patch +--- + +Adds optional `htmlFontSize` property and also sets typography design tokens for h5 and h6 in base theme. diff --git a/docs/README.md b/docs/README.md index f323f3bdbe..c63a12b589 100644 --- a/docs/README.md +++ b/docs/README.md @@ -1,15 +1,3 @@ # Documentation The Backstage documentation is available at https://backstage.io/docs - -# H1 - -## H2 - -### H3 - -#### H4 - -##### H5 - -###### H6 diff --git a/packages/theme/api-report.md b/packages/theme/api-report.md index f650636710..772e868635 100644 --- a/packages/theme/api-report.md +++ b/packages/theme/api-report.md @@ -145,5 +145,6 @@ export type SimpleThemeOptions = { defaultPageTheme: string; pageTheme?: Record; fontFamily?: string; + htmlFontSize?: number; }; ``` diff --git a/packages/theme/src/baseTheme.ts b/packages/theme/src/baseTheme.ts index da663e3398..5e222c0c3e 100644 --- a/packages/theme/src/baseTheme.ts +++ b/packages/theme/src/baseTheme.ts @@ -24,6 +24,7 @@ import { } 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'; @@ -37,6 +38,7 @@ export function createThemeOptions( ): BackstageThemeOptions { const { palette, + htmlFontSize = DEFAULT_HTML_FONT_SIZE, fontFamily = DEFAULT_FONT_FAMILY, defaultPageTheme, pageTheme = defaultPageThemes, @@ -57,9 +59,17 @@ export function createThemeOptions( }, }, typography: { + htmlFontSize, fontFamily, + h6: { + fontWeight: 700, + fontSize: 20, + marginBottom: 2, + }, h5: { fontWeight: 700, + fontSize: 24, + marginBottom: 4, }, h4: { fontWeight: 700, diff --git a/packages/theme/src/types.ts b/packages/theme/src/types.ts index 3d1a64c38f..b921154005 100644 --- a/packages/theme/src/types.ts +++ b/packages/theme/src/types.ts @@ -149,6 +149,7 @@ export type SimpleThemeOptions = { defaultPageTheme: string; pageTheme?: Record; fontFamily?: string; + htmlFontSize?: number; }; /** diff --git a/plugins/techdocs-backend/examples/documented-component/docs/index.md b/plugins/techdocs-backend/examples/documented-component/docs/index.md index 48a903445a..5a3d7508cd 100644 --- a/plugins/techdocs-backend/examples/documented-component/docs/index.md +++ b/plugins/techdocs-backend/examples/documented-component/docs/index.md @@ -11,6 +11,20 @@ You can see also: ## Basic Markdown +Headings: + +# h1 + +## h2 + +### h3 + +#### h4 + +##### h5 + +###### h6 + Here is a bulleted list: - Item one From 726577958fde3d66211b140b1c694db8b0f80f49 Mon Sep 17 00:00:00 2001 From: Camila Belo Date: Thu, 19 May 2022 09:18:06 +0200 Subject: [PATCH 3/4] chore(techdocs): add missing changesets Signed-off-by: Camila Belo --- .changeset/techdocs-eyes-sit.md | 5 +++++ .changeset/techdocs-sheep-talk.md | 5 +++++ 2 files changed, 10 insertions(+) create mode 100644 .changeset/techdocs-eyes-sit.md create mode 100644 .changeset/techdocs-sheep-talk.md diff --git a/.changeset/techdocs-eyes-sit.md b/.changeset/techdocs-eyes-sit.md new file mode 100644 index 0000000000..a09410a4fb --- /dev/null +++ b/.changeset/techdocs-eyes-sit.md @@ -0,0 +1,5 @@ +--- +'@backstage/plugin-techdocs-backend': patch +--- + +Add sample headings on the documented component homepage. diff --git a/.changeset/techdocs-sheep-talk.md b/.changeset/techdocs-sheep-talk.md new file mode 100644 index 0000000000..b17408d7a4 --- /dev/null +++ b/.changeset/techdocs-sheep-talk.md @@ -0,0 +1,5 @@ +--- +'@backstage/plugin-techdocs': patch +--- + +Remove the 60% factor from the font size calculation of headers to use the exact size defined in BackstageTheme. From 6259fcf98aab28db1c9e9cf9b427fce966a0724c Mon Sep 17 00:00:00 2001 From: Camila Belo Date: Thu, 23 Jun 2022 13:44:11 +0200 Subject: [PATCH 4/4] refactor(techdocs): apply review suggestions Signed-off-by: Camila Belo --- .../src/reader/transformers/styles/rules/typeset.ts | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/plugins/techdocs/src/reader/transformers/styles/rules/typeset.ts b/plugins/techdocs/src/reader/transformers/styles/rules/typeset.ts index 63d0f432e3..6a3b0461ef 100644 --- a/plugins/techdocs/src/reader/transformers/styles/rules/typeset.ts +++ b/plugins/techdocs/src/reader/transformers/styles/rules/typeset.ts @@ -16,8 +16,14 @@ import { RuleOptions } from './types'; +type RuleTypography = RuleOptions['theme']['typography']; + +type BackstageTypography = RuleTypography & { + htmlFontSize?: number; +}; + type TypographyHeadings = Pick< - RuleOptions['theme']['typography'], + RuleTypography, 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' >; @@ -33,13 +39,15 @@ export default ({ theme }: RuleOptions) => ` } ${headings.reduce((style, heading) => { + const htmlFontSize = + (theme.typography as BackstageTypography).htmlFontSize ?? 16; const styles = theme.typography[heading]; const { lineHeight, fontFamily, fontWeight, fontSize } = styles; const calculate = (value: typeof fontSize) => { let factor: number | string = 1; if (typeof value === 'number') { // convert px to rem - factor = value / 16; + factor = value / htmlFontSize; } if (typeof value === 'string') { factor = value.replace('rem', '');