Theming colors

Summary:
This diff adds Sandy colors and dark mode support to the `DataInspector` and `LayoutInspector` components, and coverts hardcoded colors to semantic colors. Currently only one set of colors is used since they contrast fine with both dark and light mode, but this could be deviated from now onwards.

Also styled the legacy ManagedTable and Panel, since they are so commonly used (will convert more legacy components in next diffs).

Reviewed By: passy

Differential Revision: D28056698

fbshipit-source-id: 5a85103983f89e82b7f000d309bb9e1e1f07491d

desktop/flipper-plugin/src/ui/elements-inspector/elements.tsx

@@ -28,53 +28,25 @@ const backgroundColor = (props: {
   selected: boolean;
   focused: boolean;
   isQueryMatch: boolean;
-  even: boolean;
 }) => {
-  if (props.selected) {
-    return '#4d84f5';
-  } else if (props.isQueryMatch) {
-    return '#4d84f5';
-  } else if (props.focused) {
-    return '#00CF52';
-  } else if (props.even) {
-    return '#f6f7f9';
+  if (props.selected || props.isQueryMatch || props.focused) {
+    return theme.backgroundWash;
   } else {
     return '';
   }
 };
 
-const backgroundColorHover = (props: {selected: boolean; focused: boolean}) => {
-  if (props.selected) {
-    return '#4d84f5';
-  } else if (props.focused) {
-    return '#00CF52';
-  } else {
-    return '#EBF1FB';
-  }
-};
-
 const ElementsRowContainer = styled(Layout.Horizontal)<any>((props) => ({
   flexDirection: 'row',
   alignItems: 'center',
   backgroundColor: backgroundColor(props),
-  color: props.selected || props.focused ? theme.backgroundDefault : '#58409b',
+  color: theme.textColorPrimary,
   flexShrink: 0,
   flexWrap: 'nowrap',
   height: ElementsConstants.rowHeight,
   paddingLeft: (props.level - 1) * 12,
   paddingRight: 20,
   position: 'relative',
-
-  '& *': {
-    color:
-      props.selected || props.focused
-        ? `${theme.backgroundDefault} !important`
-        : '',
-  },
-
-  '&:hover': {
-    backgroundColor: backgroundColorHover(props),
-  },
 }));
 ElementsRowContainer.displayName = 'Elements:ElementsRowContainer';
 
@@ -90,7 +62,7 @@ const ElementsRowDecoration = styled(Layout.Horizontal)({
 ElementsRowDecoration.displayName = 'Elements:ElementsRowDecoration';
 
 const ElementsLine = styled.div<{childrenCount: number}>((props) => ({
-  backgroundColor: '#bec2c9',
+  backgroundColor: theme.backgroundWash,
   height: props.childrenCount * ElementsConstants.rowHeight - 4,
   position: 'absolute',
   right: 3,
@@ -119,7 +91,7 @@ const NoShrinkText = styled(Text)({
 NoShrinkText.displayName = 'Elements:NoShrinkText';
 
 const ElementsRowAttributeContainer = styled(NoShrinkText)({
-  color: '#333333',
+  color: theme.textColorSecondary,
   fontWeight: 300,
   marginLeft: 5,
 });
@@ -127,12 +99,12 @@ ElementsRowAttributeContainer.displayName =
   'Elements:ElementsRowAttributeContainer';
 
 const ElementsRowAttributeKey = styled.span({
-  color: '#fb724b',
+  color: theme.semanticColors.attribute,
 });
 ElementsRowAttributeKey.displayName = 'Elements:ElementsRowAttributeKey';
 
 const ElementsRowAttributeValue = styled.span({
-  color: '#688694',
+  color: theme.textColorSecondary,
 });
 ElementsRowAttributeValue.displayName = 'Elements:ElementsRowAttributeValue';
 
@@ -143,8 +115,8 @@ class PartialHighlight extends PureComponent<{
   content: string;
 }> {
   static HighlightedText = styled.span<{selected: boolean}>((props) => ({
-    backgroundColor: '#fcd872',
-    color: props.selected ? `${'#58409b'} !important` : 'auto',
+    backgroundColor: theme.searchHighlightBackground,
+    color: props.selected ? `${theme.textColorPrimary} !important` : 'auto',
   }));
 
   render() {
@@ -357,7 +329,7 @@ class ElementsRow extends PureComponent<ElementsRowProps, ElementsRowState> {
           role="button"
           tabIndex={-1}
           style={{
-            color: selected || focused ? 'white' : '#1d2129',
+            color: theme.textColorSecondary,
             fontSize: '8px',
           }}>
           {element.expanded ? <DownOutlined /> : <RightOutlined />}
@@ -412,7 +384,11 @@ class ElementsRow extends PureComponent<ElementsRowProps, ElementsRowState> {
             {line}
             {arrow}
           </ElementsRowDecoration>
-          <NoShrinkText>
+          <NoShrinkText
+            style={{
+              fontWeight: theme.bold,
+              color: selected ? theme.primaryColor : theme.textColorPrimary,
+            }}>
             {decoration}
             <PartialHighlight
               content={element.name}