Enable override of sidebar selected indicator color when using createTheme (#1880)

* refactored sidebar palette types + updated default themes

* use @backstage/theme and new selectedIndicatorColor palette property

* fixed sidebar to use refactored backgroundColor property

* simplified property names based on feedback

* renamed sidebar to navigation in palette

* updated AppThemeApi docs with PaletteAdditions changes

packages/theme/src/themes.ts

@@ -59,7 +59,10 @@ export const lightTheme = createTheme({
     linkHover: '#2196F3',
     link: '#0A6EBE',
     gold: yellow.A700,
-    sidebar: '#171717',
+    navigation: {
+      background: '#171717',
+      indicator: '#9BF0E1',
+    },
     pinSidebarButton: {
       icon: '#181818',
       background: '#BDBDBD',
@@ -112,7 +115,10 @@ export const darkTheme = createTheme({
     linkHover: '#2196F3',
     link: '#0A6EBE',
     gold: yellow.A700,
-    sidebar: '#424242',
+    navigation: {
+      background: '#424242',
+      indicator: '#9BF0E1',
+    },
     pinSidebarButton: {
       icon: '#404040',
       background: '#BDBDBD',

packages/theme/src/types.ts

@@ -43,7 +43,10 @@ type PaletteAdditions = {
   linkHover: string;
   link: string;
   gold: string;
-  sidebar: string;
+  navigation: {
+    background: string;
+    indicator: string;
+  };
   tabbar: {
     indicator: string;
   };