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

docs/reference/utility-apis/AppThemeApi.md

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

packages/core/src/layout/Sidebar/Bar.tsx

@@ -37,7 +37,7 @@ const useStyles = makeStyles<BackstageTheme>(theme => ({
     top: 0,
     bottom: 0,
     padding: 0,
-    background: theme.palette.sidebar,
+    background: theme.palette.navigation.background,
     overflowX: 'hidden',
     width: sidebarConfig.drawerWidthClosed,
     transition: theme.transitions.create('width', {

packages/core/src/layout/Sidebar/Items.tsx

@@ -18,10 +18,10 @@ import {
   makeStyles,
   styled,
   TextField,
-  Theme,
   Typography,
   Badge,
 } from '@material-ui/core';
+import { BackstageTheme } from '@backstage/theme';
 import { IconComponent } from '@backstage/core-api';
 import SearchIcon from '@material-ui/icons/Search';
 import clsx from 'clsx';
@@ -29,7 +29,7 @@ import React, { FC, useContext, useState, KeyboardEventHandler } from 'react';
 import { NavLink } from 'react-router-dom';
 import { sidebarConfig, SidebarContext } from './config';
 
-const useStyles = makeStyles<Theme>(theme => {
+const useStyles = makeStyles<BackstageTheme>(theme => {
   const {
     selectedIndicatorWidth,
     drawerWidthClosed,
@@ -95,7 +95,7 @@ const useStyles = makeStyles<Theme>(theme => {
     },
     selected: {
       '&$root': {
-        borderLeft: `solid ${selectedIndicatorWidth}px #9BF0E1`,
+        borderLeft: `solid ${selectedIndicatorWidth}px ${theme.palette.navigation.indicator}`,
         color: '#ffffff',
       },
       '&$closed': {

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