diff --git a/workspaces/theme/.changeset/wild-squids-sort.md b/workspaces/theme/.changeset/wild-squids-sort.md new file mode 100644 index 000000000..7c3b5482b --- /dev/null +++ b/workspaces/theme/.changeset/wild-squids-sort.md @@ -0,0 +1,5 @@ +--- +'@red-hat-developer-hub/backstage-plugin-theme': patch +--- + +This version contains the initial theme from RHDH 1.0 https://github.com/janus-idp/backstage-showcase/tree/v1.0.0/packages/app/src/themes diff --git a/workspaces/theme/plugins/theme/package.json b/workspaces/theme/plugins/theme/package.json index 66e32e446..e14b40167 100644 --- a/workspaces/theme/plugins/theme/package.json +++ b/workspaces/theme/plugins/theme/package.json @@ -1,10 +1,9 @@ { "name": "@red-hat-developer-hub/backstage-plugin-theme", - "version": "0.0.1", + "version": "0.0.0", "main": "src/index.ts", "types": "src/index.ts", "license": "Apache-2.0", - "private": true, "publishConfig": { "access": "public", "main": "dist/index.esm.js", diff --git a/workspaces/theme/plugins/theme/report.api.md b/workspaces/theme/plugins/theme/report.api.md index 174df1fca..f7fcf4f4c 100644 --- a/workspaces/theme/plugins/theme/report.api.md +++ b/workspaces/theme/plugins/theme/report.api.md @@ -4,17 +4,10 @@ ```ts import { AppTheme } from '@backstage/core-plugin-api'; -import { UnifiedTheme } from '@backstage/theme'; // @public (undocumented) export const allThemes: AppTheme[]; -// @public (undocumented) -export const darkTheme: UnifiedTheme; - -// @public (undocumented) -export const lightTheme: UnifiedTheme; - // @public (undocumented) export const themes: AppTheme[]; diff --git a/workspaces/theme/plugins/theme/src/componentOverrides.ts b/workspaces/theme/plugins/theme/src/componentOverrides.ts new file mode 100644 index 000000000..3e1a3b8f2 --- /dev/null +++ b/workspaces/theme/plugins/theme/src/componentOverrides.ts @@ -0,0 +1,32 @@ +/* + * Copyright 2024 The Backstage Authors + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ +import { UnifiedThemeOptions } from '@backstage/theme'; + +const redhatFont = `@font-face { + font-family: 'Red Hat Font'; + font-style: normal; + font-display: swap; + font-weight: 400; + src: url(/fonts/RedHatText-Regular.woff2) format('woff2'), + url(/fonts/RedHatText-Regular.otf) format('opentype'), + url(/fonts/RedHatText-Regular.ttf) format('truetype'); +}`; + +export const components: UnifiedThemeOptions['components'] = { + MuiCssBaseline: { + styleOverrides: redhatFont, + }, +}; diff --git a/workspaces/theme/plugins/theme/src/darkTheme.ts b/workspaces/theme/plugins/theme/src/darkTheme.ts new file mode 100644 index 000000000..f38d7ee1e --- /dev/null +++ b/workspaces/theme/plugins/theme/src/darkTheme.ts @@ -0,0 +1,44 @@ +/* + * Copyright 2024 The Backstage Authors + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ +import { createUnifiedTheme, themes } from '@backstage/theme'; +import { components } from './componentOverrides'; +import { pageTheme } from './pageTheme'; +import { ThemeColors } from './types'; + +export const customDarkTheme = (themeColors: ThemeColors) => + createUnifiedTheme({ + palette: { + ...themes.dark.getTheme('v5')?.palette, + ...(themeColors.primaryColor && { + primary: { + ...themes.light.getTheme('v5')?.palette.primary, + main: themeColors.primaryColor, + }, + }), + navigation: { + background: '#0f1214', + indicator: themeColors.navigationIndicatorColor || '#009596', + color: '#ffffff', + selectedColor: '#ffffff', + navItem: { + hoverBackground: '#030303', + }, + }, + }, + defaultPageTheme: 'home', + pageTheme: pageTheme(themeColors), + components, + }); diff --git a/workspaces/theme/plugins/theme/src/index.ts b/workspaces/theme/plugins/theme/src/index.ts index af3f3dca2..923bf0206 100644 --- a/workspaces/theme/plugins/theme/src/index.ts +++ b/workspaces/theme/plugins/theme/src/index.ts @@ -13,4 +13,4 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -export * from './themes'; +export { themes, allThemes } from './themes'; diff --git a/workspaces/theme/plugins/theme/src/lightTheme.ts b/workspaces/theme/plugins/theme/src/lightTheme.ts new file mode 100644 index 000000000..743f67da7 --- /dev/null +++ b/workspaces/theme/plugins/theme/src/lightTheme.ts @@ -0,0 +1,44 @@ +/* + * Copyright 2024 The Backstage Authors + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ +import { createUnifiedTheme, themes } from '@backstage/theme'; +import { components } from './componentOverrides'; +import { pageTheme } from './pageTheme'; +import { ThemeColors } from './types'; + +export const customLightTheme = (themeColors: ThemeColors) => + createUnifiedTheme({ + palette: { + ...themes.light.getTheme('v5')?.palette, + ...(themeColors.primaryColor && { + primary: { + ...themes.light.getTheme('v5')?.palette.primary, + main: themeColors.primaryColor, + }, + }), + navigation: { + background: '#222427', + indicator: themeColors.navigationIndicatorColor || '#009596', + color: '#ffffff', + selectedColor: '#ffffff', + navItem: { + hoverBackground: '#4f5255', + }, + }, + }, + defaultPageTheme: 'home', + pageTheme: pageTheme(themeColors), + components, + }); diff --git a/workspaces/theme/plugins/theme/src/pageTheme.ts b/workspaces/theme/plugins/theme/src/pageTheme.ts new file mode 100644 index 000000000..f922770f2 --- /dev/null +++ b/workspaces/theme/plugins/theme/src/pageTheme.ts @@ -0,0 +1,52 @@ +/* + * Copyright 2024 The Backstage Authors + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ +import { PageTheme, genPageTheme, shapes } from '@backstage/theme'; +import { ThemeColors } from './types'; + +export const pageTheme = (input: ThemeColors): Record => { + const { headerColor1, headerColor2 } = input; + const defaultColors = ['#005f60', '#73c5c5']; + const headerColor = [ + headerColor1 || defaultColors[0], + headerColor2 || defaultColors[1], + ]; + return { + home: genPageTheme({ + colors: [headerColor[0], headerColor[1]], + shape: shapes.wave, + }), + app: genPageTheme({ + colors: [headerColor[0], headerColor[1]], + shape: shapes.wave, + }), + apis: genPageTheme({ + colors: [headerColor[0], headerColor[1]], + shape: shapes.wave, + }), + documentation: genPageTheme({ + colors: [headerColor[0], headerColor[1]], + shape: shapes.wave, + }), + tool: genPageTheme({ + colors: [headerColor[0], headerColor[1]], + shape: shapes.round, + }), + other: genPageTheme({ + colors: [headerColor[0], headerColor[1]], + shape: shapes.wave, + }), + }; +}; diff --git a/workspaces/theme/plugins/theme/src/types.ts b/workspaces/theme/plugins/theme/src/types.ts new file mode 100644 index 000000000..b5fbb3199 --- /dev/null +++ b/workspaces/theme/plugins/theme/src/types.ts @@ -0,0 +1,21 @@ +/* + * Copyright 2024 The Backstage Authors + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ +export type ThemeColors = { + primaryColor?: string | undefined; + headerColor1?: string | undefined; + headerColor2?: string | undefined; + navigationIndicatorColor?: string | undefined; +};