From 1c559bcc90477f57a3664a248424841b110a0db8 Mon Sep 17 00:00:00 2001
From: Chris Simmons <chris-simmons@outlook.com>
Date: Tue, 11 Aug 2020 18:16:46 +1200
Subject: [PATCH] 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 |  5 ++++-
 packages/core/src/layout/Sidebar/Bar.tsx   |  2 +-
 packages/core/src/layout/Sidebar/Items.tsx |  6 +++---
 packages/theme/src/themes.ts               | 10 ++++++++--
 packages/theme/src/types.ts                |  5 ++++-
 5 files changed, 20 insertions(+), 8 deletions(-)

diff --git a/docs/reference/utility-apis/AppThemeApi.md b/docs/reference/utility-apis/AppThemeApi.md
index 2c57199fba..eda1bafef0 100644
--- a/docs/reference/utility-apis/AppThemeApi.md
+++ b/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;
   };
diff --git a/packages/core/src/layout/Sidebar/Bar.tsx b/packages/core/src/layout/Sidebar/Bar.tsx
index 4d81c398b7..6321aeb33b 100644
--- a/packages/core/src/layout/Sidebar/Bar.tsx
+++ b/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', {
diff --git a/packages/core/src/layout/Sidebar/Items.tsx b/packages/core/src/layout/Sidebar/Items.tsx
index da0b44d273..5a476e2209 100644
--- a/packages/core/src/layout/Sidebar/Items.tsx
+++ b/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': {
diff --git a/packages/theme/src/themes.ts b/packages/theme/src/themes.ts
index e5ebd419a3..eddd6a4ede 100644
--- a/packages/theme/src/themes.ts
+++ b/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',
diff --git a/packages/theme/src/types.ts b/packages/theme/src/types.ts
index 557af23cd0..66bfb4c6fd 100644
--- a/packages/theme/src/types.ts
+++ b/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;
   };