From 08eca61e5216cc7d94b189bdfda7287e827ddcf4 Mon Sep 17 00:00:00 2001 From: Jonathan Roebuck Date: Thu, 3 Oct 2024 15:39:41 +0100 Subject: [PATCH 1/4] add customisable techdocs code bg color that defaults to background.paper Signed-off-by: Jonathan Roebuck --- packages/theme/src/base/palettes.ts | 2 ++ packages/theme/src/base/types.ts | 3 +++ .../src/reader/transformers/styles/rules/variables.ts | 4 +++- 3 files changed, 8 insertions(+), 1 deletion(-) diff --git a/packages/theme/src/base/palettes.ts b/packages/theme/src/base/palettes.ts index 5e70afd7b8..db33106094 100644 --- a/packages/theme/src/base/palettes.ts +++ b/packages/theme/src/base/palettes.ts @@ -89,6 +89,7 @@ export const palettes = { tabbar: { indicator: '#9BF0E1', }, + code: {}, }, dark: { type: 'dark' as const, @@ -163,5 +164,6 @@ export const palettes = { tabbar: { indicator: '#9BF0E1', }, + code: {}, }, }; diff --git a/packages/theme/src/base/types.ts b/packages/theme/src/base/types.ts index d62d944741..72a7632dd9 100644 --- a/packages/theme/src/base/types.ts +++ b/packages/theme/src/base/types.ts @@ -82,6 +82,9 @@ export type BackstagePaletteAdditions = { closeButtonColor?: string; warning?: string; }; + code: { + background?: string; + }; }; /** diff --git a/plugins/techdocs/src/reader/transformers/styles/rules/variables.ts b/plugins/techdocs/src/reader/transformers/styles/rules/variables.ts index e7e47c6fc7..e87e61f9b3 100644 --- a/plugins/techdocs/src/reader/transformers/styles/rules/variables.ts +++ b/plugins/techdocs/src/reader/transformers/styles/rules/variables.ts @@ -108,7 +108,9 @@ export default ({ theme }: RuleOptions) => ` :host > * { /* CODE */ --md-code-fg-color: ${theme.palette.text.primary}; - --md-code-bg-color: ${theme.palette.background.paper}; + --md-code-bg-color: ${ + theme.palette.code.background || theme.palette.background.paper + }; --md-code-hl-color: ${alpha(theme.palette.warning.main, 0.5)}; --md-code-hl-color--light: var(--md-code-hl-color); --md-code-hl-keyword-color: ${ From e77ff3d2ffb53594f3ec62b3f47e8bcf27057da0 Mon Sep 17 00:00:00 2001 From: Jonathan Roebuck Date: Thu, 3 Oct 2024 16:04:06 +0100 Subject: [PATCH 2/4] Add changeset Signed-off-by: Jonathan Roebuck --- .changeset/slimy-ravens-end.md | 6 ++++++ 1 file changed, 6 insertions(+) create mode 100644 .changeset/slimy-ravens-end.md diff --git a/.changeset/slimy-ravens-end.md b/.changeset/slimy-ravens-end.md new file mode 100644 index 0000000000..65e02079b1 --- /dev/null +++ b/.changeset/slimy-ravens-end.md @@ -0,0 +1,6 @@ +--- +'@backstage/plugin-techdocs': minor +'@backstage/theme': minor +--- + +Adds support for custom background colors in code blocks and inline code within TechDocs. From b672693280bb1718aaff31f6d7db50a8dbed523a Mon Sep 17 00:00:00 2001 From: Jonathan Roebuck Date: Thu, 3 Oct 2024 16:10:18 +0100 Subject: [PATCH 3/4] build api report Signed-off-by: Jonathan Roebuck --- packages/theme/report.api.md | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/packages/theme/report.api.md b/packages/theme/report.api.md index b380ce9fd1..a0c41ca45c 100644 --- a/packages/theme/report.api.md +++ b/packages/theme/report.api.md @@ -81,6 +81,9 @@ export type BackstagePaletteAdditions = { closeButtonColor?: string; warning?: string; }; + code: { + background?: string; + }; }; // @public @deprecated @@ -310,6 +313,7 @@ export const palettes: { tabbar: { indicator: string; }; + code: {}; }; dark: { type: 'dark'; @@ -384,6 +388,7 @@ export const palettes: { tabbar: { indicator: string; }; + code: {}; }; }; From 9b57739ce91e49424f379478b843fa124f65b091 Mon Sep 17 00:00:00 2001 From: Jonathan Roebuck Date: Thu, 3 Oct 2024 16:47:43 +0100 Subject: [PATCH 4/4] Check for code in palette before accessing background Signed-off-by: Jonathan Roebuck --- packages/theme/report.api.md | 2 -- packages/theme/src/base/palettes.ts | 2 -- .../techdocs/src/reader/transformers/styles/rules/variables.ts | 2 +- 3 files changed, 1 insertion(+), 5 deletions(-) diff --git a/packages/theme/report.api.md b/packages/theme/report.api.md index a0c41ca45c..0c9e87e958 100644 --- a/packages/theme/report.api.md +++ b/packages/theme/report.api.md @@ -313,7 +313,6 @@ export const palettes: { tabbar: { indicator: string; }; - code: {}; }; dark: { type: 'dark'; @@ -388,7 +387,6 @@ export const palettes: { tabbar: { indicator: string; }; - code: {}; }; }; diff --git a/packages/theme/src/base/palettes.ts b/packages/theme/src/base/palettes.ts index db33106094..5e70afd7b8 100644 --- a/packages/theme/src/base/palettes.ts +++ b/packages/theme/src/base/palettes.ts @@ -89,7 +89,6 @@ export const palettes = { tabbar: { indicator: '#9BF0E1', }, - code: {}, }, dark: { type: 'dark' as const, @@ -164,6 +163,5 @@ export const palettes = { tabbar: { indicator: '#9BF0E1', }, - code: {}, }, }; diff --git a/plugins/techdocs/src/reader/transformers/styles/rules/variables.ts b/plugins/techdocs/src/reader/transformers/styles/rules/variables.ts index e87e61f9b3..c419d5f71b 100644 --- a/plugins/techdocs/src/reader/transformers/styles/rules/variables.ts +++ b/plugins/techdocs/src/reader/transformers/styles/rules/variables.ts @@ -109,7 +109,7 @@ export default ({ theme }: RuleOptions) => ` /* CODE */ --md-code-fg-color: ${theme.palette.text.primary}; --md-code-bg-color: ${ - theme.palette.code.background || theme.palette.background.paper + theme.palette.code?.background ?? theme.palette.background.paper }; --md-code-hl-color: ${alpha(theme.palette.warning.main, 0.5)}; --md-code-hl-color--light: var(--md-code-hl-color);