Expose theme from JavaScript

Summary:
This diff fixes two problems when further theming Flipper:

1. All shades of gray where defined in terms of black/white + transparency. Converted all colors to non transparent to make sure they stack well.
2. The color theme defined in less aren't available as javascript colors. It is possible to achieve that through setting up a babel parser that parses the less files and exposes them to JS. But since we have modern stack, figured that exposing all theme variables as CSS variables as well is a much simpler setup.

Reviewed By: passy

Differential Revision: D23756558

fbshipit-source-id: e92be1f66b11c2c9c400fc1622cb8a493cc4c2a5

desktop/app/src/sandy-chrome/SandyApp.tsx

@@ -14,6 +14,7 @@ import {Settings, updateSettings} from '../reducers/settings';
 import {styled, FlexColumn, colors, Text} from 'flipper';
 import {DatePicker, Button} from 'antd';
 import {Layout, FlexBox} from '../ui';
+import {theme} from './theme';
 
 import {LeftRail} from './LeftRail';
 import {CloseCircleOutlined} from '@ant-design/icons';
@@ -46,6 +47,8 @@ const AnnoucementText = styled(Text)({
   fontWeight: 300,
   textAlign: 'center',
   margin: 16,
+  color: theme.primaryColor,
+  background: theme.backgroundWash,
 });
 
 const LeftContainer = styled(FlexBox)({
@@ -87,7 +90,7 @@ function SandyApp(props: Props) {
         </LeftContainer>
         <Layout.Right>
           <MainContainer>
-            <TemporarilyContent {...props} />
+            <TemporarilyContent />
           </MainContainer>
           <RightMenu />
         </Layout.Right>
@@ -114,7 +117,7 @@ function MainContainer({children}: any) {
   );
 }
 
-function TemporarilyContent(props: Props) {
+function TemporarilyContent() {
   return (
     <Container>
       <Box>

desktop/app/src/sandy-chrome/theme.tsx

@@ -0,0 +1,25 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ */
+
+// Exposes all the variables defined in themes/base.less:
+
+export const theme = {
+  primaryColor: 'var(--flipper-primary-color)',
+  successColor: 'var(--flipper-success-color)',
+  errorColor: 'var(--flipper-error-color)',
+  warningColor: 'var(--flipper-warning-color)',
+  textColorPrimary: 'var(--flipper-text-color-primary)',
+  textColorSecondary: 'var(--flipper-text-color-secondary)',
+  textColorPlaceholder: 'var(--flipper-text-color-placeholder)',
+  disabledColor: 'var(--flipper-disabled-color)',
+  backgroundDefault: 'var(--flipper-background-default)',
+  backgroundWash: 'var(--flipper-background-wash)',
+  dividerColor: 'var(--flipper-divider-color)',
+  borderRadius: 'var(--flipper-border-radius)',
+};