Merge branch 'master' into feature/yarn-clean

packages/theme/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@backstage/theme",
   "description": "material-ui theme for use with Backstage.",
-  "version": "0.1.1-alpha.3",
+  "version": "0.1.1-alpha.4",
   "private": false,
   "publishConfig": {
     "access": "public"
@@ -24,7 +24,7 @@
     "clean": "backstage-cli clean"
   },
   "devDependencies": {
-    "@backstage/cli": "^0.1.1-alpha.3",
+    "@backstage/cli": "^0.1.1-alpha.4",
     "@material-ui/core": "^4.9.1"
   },
   "peerDependencies": {

packages/theme/src/BackstageTheme.ts

@@ -20,10 +20,11 @@ import { blue, yellow } from '@material-ui/core/colors';
 
 import { BackstageMuiTheme, BackstageMuiThemeOptions } from './types';
 
-export const COLORS = {
+const COLORS = {
   PAGE_BACKGROUND: '#F8F8F8',
   DEFAULT_PAGE_THEME_COLOR: '#7C3699',
   DEFAULT_PAGE_THEME_LIGHT_COLOR: '#ECDBF2',
+  SIDEBAR_BACKGROUND_COLOR: '#171717',
   ERROR_BACKGROUND_COLOR: '#FFEBEE',
   ERROR_TEXT_COLOR: '#CA001B',
   INFO_TEXT_COLOR: '#004e8a',
@@ -86,6 +87,7 @@ const extendedThemeConfig: BackstageMuiThemeOptions = {
     linkHover: COLORS.LINK_TEXT_HOVER,
     link: COLORS.LINK_TEXT,
     gold: yellow.A700,
+    sidebar: COLORS.SIDEBAR_BACKGROUND_COLOR,
   },
   navigation: {
     width: 220,

packages/theme/src/BackstageThemeDark.ts

@@ -20,11 +20,11 @@ import { blue, yellow } from '@material-ui/core/colors';
 
 import { BackstageMuiTheme, BackstageMuiThemeOptions } from './types';
 
-export const COLORS = {
+const COLORS = {
   PAGE_BACKGROUND: '#282828',
-  EFAULT_PAGE_THEME_COLOR: '#232323',
   DEFAULT_PAGE_THEME_COLOR: '#7C3699',
   DEFAULT_PAGE_THEME_LIGHT_COLOR: '#ECDBF2',
+  SIDEBAR_BACKGROUND_COLOR: '#424242',
   ERROR_BACKGROUND_COLOR: '#FFEBEE',
   ERROR_TEXT_COLOR: '#CA001B',
   INFO_TEXT_COLOR: '#004e8a',
@@ -91,6 +91,7 @@ const extendedThemeConfig: BackstageMuiThemeOptions = {
     linkHover: COLORS.LINK_TEXT_HOVER,
     link: COLORS.LINK_TEXT,
     gold: yellow.A700,
+    sidebar: COLORS.SIDEBAR_BACKGROUND_COLOR,
   },
   navigation: {
     width: 220,

packages/theme/src/BackstageThemeLight.ts

@@ -20,10 +20,11 @@ import { blue, yellow } from '@material-ui/core/colors';
 
 import { BackstageMuiTheme, BackstageMuiThemeOptions } from './types';
 
-export const COLORS = {
+const COLORS = {
   PAGE_BACKGROUND: '#F8F8F8',
   DEFAULT_PAGE_THEME_COLOR: '#7C3699',
   DEFAULT_PAGE_THEME_LIGHT_COLOR: '#ECDBF2',
+  SIDEBAR_BACKGROUND_COLOR: '#171717',
   ERROR_BACKGROUND_COLOR: '#FFEBEE',
   ERROR_TEXT_COLOR: '#CA001B',
   INFO_TEXT_COLOR: '#004e8a',
@@ -89,6 +90,7 @@ const extendedThemeConfig: BackstageMuiThemeOptions = {
     linkHover: COLORS.LINK_TEXT_HOVER,
     link: COLORS.LINK_TEXT,
     gold: yellow.A700,
+    sidebar: COLORS.SIDEBAR_BACKGROUND_COLOR,
   },
   navigation: {
     width: 220,

packages/theme/src/index.ts

@@ -15,4 +15,4 @@
  */
 export { default as BackstageThemeLight } from './BackstageThemeLight';
 export { default as BackstageThemeDark } from './BackstageThemeDark';
-export { default as BackstageTheme, COLORS } from './BackstageTheme';
+export { default as BackstageTheme } from './BackstageTheme';

packages/theme/src/types.ts

@@ -38,6 +38,7 @@ export type BackstageMuiPalette = Theme['palette'] & {
   linkHover: string;
   link: string;
   gold: string;
+  sidebar: string;
   bursts: {
     fontColor: string;
     slackChannelText: string;