remove grayscale treatment (#3024)

As per https://twitter.com/sliminality/status/1269033413488459776, there's feedback that the contrast isn't great for reading. I myself have trouble with low contrast text, (and long sightedness), and I thought it was fine. I was clearly mistaken. Removing this for now to get back to a non harmful position, and we can decide later what to do instead.

Author: threepointone

src/components/Container/Container.js

@@ -15,20 +15,13 @@ import type {Node} from 'react';
  * This component wraps page content sections (eg header, footer, main).
  * It provides consistent margin and max width behavior.
  */
-const Container = ({
-  children,
-  grayscale,
-}: {
-  children: Node,
-  grayscale: boolean,
-}) => (
+const Container = ({children}: {children: Node}) => (
   <div
     css={{
       paddingLeft: 20,
       paddingRight: 20,
       marginLeft: 'auto',
       marginRight: 'auto',
-      filter: grayscale ? 'grayscale(100%)' : '',
       [media.greaterThan('medium')]: {
         width: '90%',
       },

src/components/LayoutFooter/FooterNav.js

@@ -34,7 +34,6 @@ const FooterNav = ({children, title, layoutHasSidebar = false}: Props) => (
       css={{
         display: 'inline-flex',
         flexDirection: 'column',
-        filter: 'grayscale(100%)',
       }}>
       {children}
     </div>

src/components/LayoutHeader/Header.js

@@ -61,7 +61,7 @@ const Header = ({location}: {location: Location}) => (
         </a>
       </div>
     </Container>
-    <Container grayscale={true}>
+    <Container>
       <div
         css={{
           display: 'flex',

src/components/MarkdownPage/MarkdownPage.js

@@ -87,7 +87,6 @@ const MarkdownPage = ({
                 <div
                   css={{
                     marginTop: 15,
-                    filter: 'grayscale(100%)', // BLM
                   }}>
                   {date}{' '}
                   {hasAuthors && (

src/pages/index.js

@@ -57,7 +57,6 @@ class Home extends Component {
           css={{
             width: '100%',
             marginTop: 60, // BLM
-            filter: 'grayscale(100%)', // BLM
           }}>
           <header
             css={{

src/templates/components/NavigationFooter/NavigationFooter.js

@@ -15,8 +15,6 @@ const NavigationFooter = ({next, prev, location}) => {
   return (
     <div
       css={{
-        filter: 'grayscale(100%)', // BLM
-
         background: colors.dark,
         color: colors.white,
         paddingTop: 50,

src/templates/components/Sidebar/Sidebar.js

@@ -37,8 +37,6 @@ class Sidebar extends Component {
         direction="column"
         halign="stretch"
         css={{
-          filter: 'grayscale(100%)', // BLM
-
           width: '100%',
           paddingLeft: 20,
           position: 'relative',

src/theme.js

@@ -132,8 +132,6 @@ const sharedStyles = {
       },
     },
     content: {
-      filter: 'grayscale(100%)', // BLM
-
       marginTop: 40,
       marginBottom: 120,