add banner to theme palette

packages/core/src/components/DismissableBanner/DismissableBanner.stories.tsx

@@ -89,7 +89,7 @@ export const WithLink = () => (
         message={
           <Typography>
             This is a dismissable banner with a link:{' '}
-            <Link href="http://example.com" color="textSecondary">
+            <Link href="http://example.com" color="textPrimary">
               example.com
             </Link>
           </Typography>

packages/core/src/components/DismissableBanner/DismissableBanner.tsx

@@ -18,13 +18,14 @@ import React, { FC, ReactNode, useState, useEffect } from 'react';
 import { useApi, storageApiRef } from '@backstage/core-api';
 import { useObservable } from 'react-use';
 import classNames from 'classnames';
-import { makeStyles, Theme } from '@material-ui/core';
+import { makeStyles } from '@material-ui/core';
+import { BackstageTheme } from '@backstage/theme';
 import Snackbar from '@material-ui/core/Snackbar';
 import SnackbarContent from '@material-ui/core/SnackbarContent';
 import IconButton from '@material-ui/core/IconButton';
 import Close from '@material-ui/icons/Close';
 
-const useStyles = makeStyles((theme: Theme) => ({
+const useStyles = makeStyles((theme: BackstageTheme) => ({
   root: {
     position: 'relative',
     padding: theme.spacing(0),
@@ -46,10 +47,10 @@ const useStyles = makeStyles((theme: Theme) => ({
     alignItems: 'center',
   },
   info: {
-    backgroundColor: theme.palette.primary.main,
+    backgroundColor: theme.palette.banner.info,
   },
   error: {
-    backgroundColor: theme.palette.error.dark,
+    backgroundColor: theme.palette.banner.error,
   },
 }));
 

packages/theme/src/themes.ts

@@ -15,7 +15,7 @@
  */
 
 import { createTheme } from './baseTheme';
-import { yellow } from '@material-ui/core/colors';
+import { blue, yellow } from '@material-ui/core/colors';
 
 export const lightTheme = createTheme({
   palette: {
@@ -39,14 +39,11 @@ export const lightTheme = createTheme({
       },
     },
     primary: {
-      main: '#2E77D0',
+      main: blue[500],
     },
-    error: {
-      main: '#E22134',
-      dark: '#E22134',
-    },
-    text: {
-      secondary: '#000000',
+    banner: {
+      info: '#2E77D0',
+      error: '#E22134',
     },
     border: '#E6E6E6',
     textContrast: '#000000',
@@ -95,14 +92,14 @@ export const darkTheme = createTheme({
       },
     },
     primary: {
-      main: '#2E77D0',
+      main: blue[500],
     },
-    error: {
-      main: '#E22134',
-      dark: '#E22134',
-    },
-    text: {
-      secondary: '#000000',
+    banner: {
+      info: '2E77D0',
+      error: 'E22134',
+      link: {
+        default: '#000000',
+      },
     },
     border: '#E6E6E6',
     textContrast: '#FFFFFF',

packages/theme/src/types.ts

@@ -58,6 +58,10 @@ type PaletteAdditions = {
     icon: string;
     background: string;
   };
+  banner: {
+    info: string;
+    error: string;
+  };
 };
 
 export type BackstagePalette = Palette & PaletteAdditions;

plugins/catalog/src/components/CatalogPage/WelcomeBanner.tsx

@@ -42,7 +42,7 @@ export const WelcomeBanner = () => {
             🎉
           </span>
           Welcome to Backstage! Take a look around and check out our{' '}
-          <Link href="/welcome" color="textSecondary">
+          <Link href="/welcome" color="textPrimary">
             getting started
           </Link>{' '}
           page.