Merge pull request #107 from christoph-jerolimov/replay-theme

feat(theme): migrate and release rhdh-theme 0.0.1 (RHDH 1.0)

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

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",

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[];
 

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,
+  },
+};

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,
+  });

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';

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,
+  });

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<string, PageTheme> => {
+  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,
+    }),
+  };
+};

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;
+};