From 4438b0f6e8a257ad2694abef52dfd380b6ab1b0c Mon Sep 17 00:00:00 2001 From: Remi Kristelijn Date: Wed, 7 Apr 2021 08:43:29 +0200 Subject: [PATCH 1/8] fix adds pagetheme colors closes #5235 Signed-off-by: Remi Kristelijn --- docs/getting-started/app-custom-theme.md | 65 +++++++++++++++++++ .../core/src/layout/Header/Header.stories.tsx | 40 ++++++++++++ packages/theme/src/pageTheme.ts | 5 ++ .../ApiExplorerPage/ApiExplorerLayout.tsx | 2 +- 4 files changed, 111 insertions(+), 1 deletion(-) diff --git a/docs/getting-started/app-custom-theme.md b/docs/getting-started/app-custom-theme.md index 345b7ad969..0470f2d71d 100644 --- a/docs/getting-started/app-custom-theme.md +++ b/docs/getting-started/app-custom-theme.md @@ -74,3 +74,68 @@ Note that your list of custom themes overrides the default themes. If you still want to use the default themes, they are exported as `lightTheme` and `darkTheme` from [@backstage/theme](https://www.npmjs.com/package/@backstage/theme). + +## Example of a custom theme + +```ts +const themeOptions = createThemeOptions({ + palette: { + ...lightTheme.palette, + primary: { + main: '#123456', + }, + secondary: { + main: '#123456', + }, + error: { + main: '#123456' + }, + warning: { + main: '#123456', + }, + info: { + main: '#123456', + }, + success: { + main: '#123456', + }, + background: { + default: '#123456', + paper: '#123456', + }, + banner: { + info: '#123456', + error: '#123456' + text: '#123456' + link: '#123456', + }, + errorBackground: '#123456' + warningBackground: '#123456' + infoBackground: '#123456' + navigation: { + background: '#123456', + indicator: '#123456' + color: '#123456' + selectedColor: '#123456', + }, + }, + defaultPageTheme: 'home', + fontFamily: 'Comic Sans', + /* below drives the header colors */ + pageTheme: { + home: genPageTheme(['#123456','#123456'], shapes.wave), + documentation: genPageTheme(['#123456','#123456'], shapes.wave2), + tool: genPageTheme(['#123456','#123456'], shapes.round), + service: genPageTheme(['#123456','#123456'], shapes.wave), + website: genPageTheme(['#123456','#123456'], shapes.wave), + library: genPageTheme(['#123456','#123456'] shapes.wave), + other: genPageTheme(['#123456','#123456'], shapes.wave), + app: genPageTheme(['#123456','#123456'], shapes.wave), + apis: genPageTheme(['#123456','#123456'], shapes.wave), + grpc: genPageTheme(['#123456','#123456'], shapes.wave2), + asyncapi: genPageTheme(['#123456','#123456'], shapes.wave2), + graphql: genPageTheme(['#123456','#123456'], shapes.wave2), + openapi: genPageTheme(['#123456','#123456'], shapes.wave2), + }, +}); +``` diff --git a/packages/core/src/layout/Header/Header.stories.tsx b/packages/core/src/layout/Header/Header.stories.tsx index badd63a5ad..3deb980dfd 100644 --- a/packages/core/src/layout/Header/Header.stories.tsx +++ b/packages/core/src/layout/Header/Header.stories.tsx @@ -45,6 +45,46 @@ export const HomeWithSubtitle = () => ( ); +export const Apis = () => ( + +
+ {labels} +
+ +); + +export const Grpc = () => ( + +
+ {labels} +
+ +); + +export const AsyncApi = () => ( + +
+ {labels} +
+ +); + +export const Graphql = () => ( + +
+ {labels} +
+ +); + +export const OpenApi = () => ( + +
+ {labels} +
+ +); + export const Tool = () => (
diff --git a/packages/theme/src/pageTheme.ts b/packages/theme/src/pageTheme.ts index f86f3a6449..6d364ea351 100644 --- a/packages/theme/src/pageTheme.ts +++ b/packages/theme/src/pageTheme.ts @@ -63,4 +63,9 @@ export const pageTheme: Record = { library: genPageTheme(colorVariants.rubyRed, shapes.wave), other: genPageTheme(colorVariants.darkGrey, shapes.wave), app: genPageTheme(colorVariants.toastyOrange, shapes.wave), + apis: genPageTheme(colorVariants.eveningSea, shapes.wave2), + grpc: genPageTheme(colorVariants.marineBlue, shapes.wave2), + asyncapi: genPageTheme(colorVariants.rubyRed, shapes.wave2), + graphql: genPageTheme(colorVariants.purpleSky, shapes.wave2), + openapi: genPageTheme(colorVariants.toastyOrange, shapes.wave2), }; diff --git a/plugins/api-docs/src/components/ApiExplorerPage/ApiExplorerLayout.tsx b/plugins/api-docs/src/components/ApiExplorerPage/ApiExplorerLayout.tsx index add886fead..fb94df8528 100644 --- a/plugins/api-docs/src/components/ApiExplorerPage/ApiExplorerLayout.tsx +++ b/plugins/api-docs/src/components/ApiExplorerPage/ApiExplorerLayout.tsx @@ -26,7 +26,7 @@ export const ApiExplorerLayout = ({ children }: Props) => { configApi.getOptionalString('organization.name') ?? 'Backstage' } API Explorer`; return ( - +
Date: Wed, 7 Apr 2021 08:52:50 +0200 Subject: [PATCH 2/8] adds changeset closes #5235 Signed-off-by: Remi Kristelijn --- .changeset/thirty-owls-lay.md | 6 ++++++ 1 file changed, 6 insertions(+) create mode 100644 .changeset/thirty-owls-lay.md diff --git a/.changeset/thirty-owls-lay.md b/.changeset/thirty-owls-lay.md new file mode 100644 index 0000000000..ebdd3ba82d --- /dev/null +++ b/.changeset/thirty-owls-lay.md @@ -0,0 +1,6 @@ +--- +'@backstage/core': patch +'storybook': patch +--- + +exposes undocumented pagetheme From 91bef20239519a374d8a1fe2e654bd34aca43765 Mon Sep 17 00:00:00 2001 From: Remi Kristelijn Date: Wed, 7 Apr 2021 09:00:32 +0200 Subject: [PATCH 3/8] fix typo in vocab Signed-off-by: Remi Kristelijn --- .changeset/thirty-owls-lay.md | 2 +- .github/styles/vocab.txt | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/.changeset/thirty-owls-lay.md b/.changeset/thirty-owls-lay.md index ebdd3ba82d..2837496d76 100644 --- a/.changeset/thirty-owls-lay.md +++ b/.changeset/thirty-owls-lay.md @@ -3,4 +3,4 @@ 'storybook': patch --- -exposes undocumented pagetheme +exposes undocumented PageTheme diff --git a/.github/styles/vocab.txt b/.github/styles/vocab.txt index b0bcf9c9f7..f62f8c80b8 100644 --- a/.github/styles/vocab.txt +++ b/.github/styles/vocab.txt @@ -43,6 +43,7 @@ Namespaces OAuth Okta Onboarding +PageTheme Platformize Podman Preprarer From 24aed6be9416dfc0daf2d3975b27e7f791b9bfc9 Mon Sep 17 00:00:00 2001 From: Remi Kristelijn Date: Thu, 8 Apr 2021 06:25:57 +0200 Subject: [PATCH 4/8] fix: feedback Signed-off-by: Remi Kristelijn --- .changeset/thirty-owls-lay.md | 3 +-- docs/getting-started/app-custom-theme.md | 6 +----- 2 files changed, 2 insertions(+), 7 deletions(-) diff --git a/.changeset/thirty-owls-lay.md b/.changeset/thirty-owls-lay.md index 2837496d76..ce08042276 100644 --- a/.changeset/thirty-owls-lay.md +++ b/.changeset/thirty-owls-lay.md @@ -1,6 +1,5 @@ --- '@backstage/core': patch -'storybook': patch --- -exposes undocumented PageTheme +# exposes undocumented `PageTheme` diff --git a/docs/getting-started/app-custom-theme.md b/docs/getting-started/app-custom-theme.md index 0470f2d71d..473da02670 100644 --- a/docs/getting-started/app-custom-theme.md +++ b/docs/getting-started/app-custom-theme.md @@ -131,11 +131,7 @@ const themeOptions = createThemeOptions({ library: genPageTheme(['#123456','#123456'] shapes.wave), other: genPageTheme(['#123456','#123456'], shapes.wave), app: genPageTheme(['#123456','#123456'], shapes.wave), - apis: genPageTheme(['#123456','#123456'], shapes.wave), - grpc: genPageTheme(['#123456','#123456'], shapes.wave2), - asyncapi: genPageTheme(['#123456','#123456'], shapes.wave2), - graphql: genPageTheme(['#123456','#123456'], shapes.wave2), - openapi: genPageTheme(['#123456','#123456'], shapes.wave2), + apis: genPageTheme(['#123456','#123456'], }, }); ``` From 2d9050a2e90a8813312d5f2af40da3dcfb684884 Mon Sep 17 00:00:00 2001 From: Remi Kristelijn Date: Thu, 8 Apr 2021 06:33:18 +0200 Subject: [PATCH 5/8] revert vocab Signed-off-by: Remi Kristelijn --- .github/styles/vocab.txt | 1 - 1 file changed, 1 deletion(-) diff --git a/.github/styles/vocab.txt b/.github/styles/vocab.txt index f62f8c80b8..b0bcf9c9f7 100644 --- a/.github/styles/vocab.txt +++ b/.github/styles/vocab.txt @@ -43,7 +43,6 @@ Namespaces OAuth Okta Onboarding -PageTheme Platformize Podman Preprarer From 484899f6df15e3d9fc73926acd4986abed4f6adf Mon Sep 17 00:00:00 2001 From: Remi Kristelijn Date: Fri, 9 Apr 2021 09:11:02 +0200 Subject: [PATCH 6/8] fix: removes alternative colors Signed-off-by: Remi Kristelijn --- packages/theme/src/pageTheme.ts | 4 ---- 1 file changed, 4 deletions(-) diff --git a/packages/theme/src/pageTheme.ts b/packages/theme/src/pageTheme.ts index 6d364ea351..c9a61bd95b 100644 --- a/packages/theme/src/pageTheme.ts +++ b/packages/theme/src/pageTheme.ts @@ -64,8 +64,4 @@ export const pageTheme: Record = { other: genPageTheme(colorVariants.darkGrey, shapes.wave), app: genPageTheme(colorVariants.toastyOrange, shapes.wave), apis: genPageTheme(colorVariants.eveningSea, shapes.wave2), - grpc: genPageTheme(colorVariants.marineBlue, shapes.wave2), - asyncapi: genPageTheme(colorVariants.rubyRed, shapes.wave2), - graphql: genPageTheme(colorVariants.purpleSky, shapes.wave2), - openapi: genPageTheme(colorVariants.toastyOrange, shapes.wave2), }; From 36e233cb026801dc23c76c04a8aebd77024ef6b0 Mon Sep 17 00:00:00 2001 From: Remi Kristelijn Date: Fri, 9 Apr 2021 09:11:50 +0200 Subject: [PATCH 7/8] fix: missing code Signed-off-by: Remi Kristelijn --- docs/getting-started/app-custom-theme.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/getting-started/app-custom-theme.md b/docs/getting-started/app-custom-theme.md index 473da02670..181f541929 100644 --- a/docs/getting-started/app-custom-theme.md +++ b/docs/getting-started/app-custom-theme.md @@ -131,7 +131,7 @@ const themeOptions = createThemeOptions({ library: genPageTheme(['#123456','#123456'] shapes.wave), other: genPageTheme(['#123456','#123456'], shapes.wave), app: genPageTheme(['#123456','#123456'], shapes.wave), - apis: genPageTheme(['#123456','#123456'], + apis: genPageTheme(['#123456','#123456'], shapes.wave), }, }); ``` From 1073fce8ec6c57dc41c8d29f5019413db713dc88 Mon Sep 17 00:00:00 2001 From: Remi Kristelijn Date: Sat, 10 Apr 2021 08:17:20 +0200 Subject: [PATCH 8/8] fix: not header markdownlint MD041 Signed-off-by: Remi Kristelijn --- .changeset/thirty-owls-lay.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/thirty-owls-lay.md b/.changeset/thirty-owls-lay.md index ce08042276..3f3ce64606 100644 --- a/.changeset/thirty-owls-lay.md +++ b/.changeset/thirty-owls-lay.md @@ -2,4 +2,4 @@ '@backstage/core': patch --- -# exposes undocumented `PageTheme` +exposes undocumented `PageTheme`