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
2021-06-29 08:38:33 -07:00
parent 279f3c41b7
commit 5c8dde0925
16 changed files with 125 additions and 123 deletions
--- a/desktop/app/src/chrome/plugin-manager/tests/snapshots/PluginInstaller.node.tsx.snap
+++ b/desktop/app/src/chrome/plugin-manager/tests/snapshots/PluginInstaller.node.tsx.snap
@@ -27,10 +27,10 @@ exports[`load PluginInstaller list 1`] = `
        class="css-18abd42-View-FlexBox-FlexColumn ecr18to0"
      >
        <div
-          class="css-nzypyq-View-FlexBox-FlexRow-TableHeadContainer ejga3101"
+          class="css-1hdusim-View-FlexBox-FlexRow-TableHeadContainer ejga3101"
        >
          <div
-            class="css-zk363n-TableHeadColumnContainer ejga3100"
+            class="css-it9ar6-TableHeadColumnContainer ejga3100"
            title="name"
            width="25%"
          >
@@ -46,7 +46,7 @@ exports[`load PluginInstaller list 1`] = `
            </div>
          </div>
          <div
-            class="css-1243222-TableHeadColumnContainer ejga3100"
+            class="css-1m9d124-TableHeadColumnContainer ejga3100"
            title="version"
            width="10%"
          >
@@ -62,7 +62,7 @@ exports[`load PluginInstaller list 1`] = `
            </div>
          </div>
          <div
-            class="css-nyra6d-TableHeadColumnContainer ejga3100"
+            class="css-qmwopt-TableHeadColumnContainer ejga3100"
            title="description"
            width="flex"
          >
@@ -78,7 +78,7 @@ exports[`load PluginInstaller list 1`] = `
            </div>
          </div>
          <div
-            class="css-hyjqmu-TableHeadColumnContainer ejga3100"
+            class="css-ux5muk-TableHeadColumnContainer ejga3100"
            title="install"
            width="15%"
          >
@@ -102,7 +102,7 @@ exports[`load PluginInstaller list 1`] = `
          class="css-18abd42-View-FlexBox-FlexColumn ecr18to0"
        >
          <div
-            class="css-1xll39b-View-FlexBox-FlexRow-TableBodyRowContainer ehuguum1"
+            class="css-hg3ptm-View-FlexBox-FlexRow-TableBodyRowContainer ehuguum1"
            data-key="flipper-plugin-hello"
          >
            <div
@@ -172,7 +172,7 @@ exports[`load PluginInstaller list 1`] = `
            </div>
          </div>
          <div
-            class="css-1k1evb9-View-FlexBox-FlexRow-TableBodyRowContainer ehuguum1"
+            class="css-hg3ptm-View-FlexBox-FlexRow-TableBodyRowContainer ehuguum1"
            data-key="flipper-plugin-world"
          >
            <div
@@ -334,10 +334,10 @@ exports[`load PluginInstaller list with one plugin installed 1`] = `
        class="css-18abd42-View-FlexBox-FlexColumn ecr18to0"
      >
        <div
-          class="css-nzypyq-View-FlexBox-FlexRow-TableHeadContainer ejga3101"
+          class="css-1hdusim-View-FlexBox-FlexRow-TableHeadContainer ejga3101"
        >
          <div
-            class="css-zk363n-TableHeadColumnContainer ejga3100"
+            class="css-it9ar6-TableHeadColumnContainer ejga3100"
            title="name"
            width="25%"
          >
@@ -353,7 +353,7 @@ exports[`load PluginInstaller list with one plugin installed 1`] = `
            </div>
          </div>
          <div
-            class="css-1243222-TableHeadColumnContainer ejga3100"
+            class="css-1m9d124-TableHeadColumnContainer ejga3100"
            title="version"
            width="10%"
          >
@@ -369,7 +369,7 @@ exports[`load PluginInstaller list with one plugin installed 1`] = `
            </div>
          </div>
          <div
-            class="css-nyra6d-TableHeadColumnContainer ejga3100"
+            class="css-qmwopt-TableHeadColumnContainer ejga3100"
            title="description"
            width="flex"
          >
@@ -385,7 +385,7 @@ exports[`load PluginInstaller list with one plugin installed 1`] = `
            </div>
          </div>
          <div
-            class="css-hyjqmu-TableHeadColumnContainer ejga3100"
+            class="css-ux5muk-TableHeadColumnContainer ejga3100"
            title="install"
            width="15%"
          >
@@ -409,7 +409,7 @@ exports[`load PluginInstaller list with one plugin installed 1`] = `
          class="css-18abd42-View-FlexBox-FlexColumn ecr18to0"
        >
          <div
-            class="css-1xll39b-View-FlexBox-FlexRow-TableBodyRowContainer ehuguum1"
+            class="css-hg3ptm-View-FlexBox-FlexRow-TableBodyRowContainer ehuguum1"
            data-key="flipper-plugin-hello"
          >
            <div
@@ -479,7 +479,7 @@ exports[`load PluginInstaller list with one plugin installed 1`] = `
            </div>
          </div>
          <div
-            class="css-1k1evb9-View-FlexBox-FlexRow-TableBodyRowContainer ehuguum1"
+            class="css-hg3ptm-View-FlexBox-FlexRow-TableBodyRowContainer ehuguum1"
            data-key="flipper-plugin-world"
          >
            <div
--- a/desktop/app/src/ui/components/Panel.tsx
+++ b/desktop/app/src/ui/components/Panel.tsx
@@ -13,8 +13,9 @@ import FlexColumn from './FlexColumn';
 import FlexBox from './FlexBox';
 import {colors} from './colors';
 import Glyph from './Glyph';
+import {theme} from 'flipper-plugin';

-const BORDER = '1px solid #dddfe2';
+const BORDER = `1px solid ${theme.dividerColor}`;

 const Chevron = styled(Glyph)({
  marginRight: 4,
@@ -100,7 +101,8 @@ export default class Panel extends React.Component<
  static PanelHeader = styled(FlexBox)<{floating?: boolean; padded?: boolean}>(
    (props) => ({
      userSelect: 'none',
-      backgroundColor: '#f6f7f9',
+      color: theme.textColorPrimary,
+      backgroundColor: theme.backgroundWash,
      border: props.floating ? BORDER : 'none',
      borderBottom: BORDER,
      borderTopLeftRadius: 2,
@@ -118,7 +120,7 @@ export default class Panel extends React.Component<

  static PanelBody = styled(FlexColumn)<{floating?: boolean; padded?: boolean}>(
    (props) => ({
-      backgroundColor: '#fff',
+      backgroundColor: theme.backgroundDefault,
      border: props.floating ? BORDER : 'none',
      borderBottomLeftRadius: 2,
      borderBottomRightRadius: 2,
--- a/desktop/app/src/ui/components/table/TableHead.tsx
+++ b/desktop/app/src/ui/components/table/TableHead.tsx
@@ -18,7 +18,7 @@ import {
 import {normaliseColumnWidth, isPercentage} from './utils';
 import {PureComponent} from 'react';
 import ContextMenu from '../ContextMenu';
-import {_Interactive, _InteractiveProps} from 'flipper-plugin';
+import {theme, _Interactive, _InteractiveProps} from 'flipper-plugin';
 import styled from '@emotion/styled';
 import {colors} from '../colors';
 import FlexRow from '../FlexRow';
@@ -48,8 +48,7 @@ TableHeaderColumnContainer.displayName = 'TableHead:TableHeaderColumnContainer';

 const TableHeadContainer = styled(FlexRow)<{horizontallyScrollable?: boolean}>(
  (props) => ({
-    borderBottom: `1px solid ${colors.sectionHeaderBorder}`,
-    color: colors.light50,
+    borderBottom: `1px solid ${theme.dividerColor}`,
    flexShrink: 0,
    left: 0,
    overflow: 'hidden',
@@ -65,7 +64,7 @@ TableHeadContainer.displayName = 'TableHead:TableHeadContainer';
 const TableHeadColumnContainer = styled.div<{width: string | number}>(
  (props) => ({
    position: 'relative',
-    backgroundColor: colors.white,
+    backgroundColor: theme.backgroundWash,
    flexShrink: props.width === 'flex' ? 1 : 0,
    height: 23,
    lineHeight: '23px',
--- a/desktop/app/src/ui/components/table/TableRow.tsx
+++ b/desktop/app/src/ui/components/table/TableRow.tsx
@@ -17,10 +17,10 @@ import React from 'react';
 import FilterRow from '../filter/FilterRow';
 import styled from '@emotion/styled';
 import FlexRow from '../FlexRow';
-import {colors} from '../colors';
 import {normaliseColumnWidth} from './utils';
 import {DEFAULT_ROW_HEIGHT} from './types';
 import {Property} from 'csstype';
+import {theme} from 'flipper-plugin';

 type TableBodyRowContainerProps = {
  even?: boolean;
@@ -41,15 +41,13 @@ const backgroundColor = (props: TableBodyRowContainerProps) => {
    if (props.highlightedBackgroundColor) {
      return props.highlightedBackgroundColor;
    } else {
-      return colors.macOSTitleBarIconSelected;
+      return theme.backgroundWash;
    }
  } else {
    if (props.zebra && props.zebraBackgroundColor && props.backgroundColor) {
      return props.even ? props.zebraBackgroundColor : props.backgroundColor;
    } else if (props.backgroundColor) {
      return props.backgroundColor;
-    } else if (props.even && props.zebra) {
-      return colors.light02;
    } else {
      return 'transparent';
    }
@@ -59,26 +57,14 @@ const backgroundColor = (props: TableBodyRowContainerProps) => {
 const TableBodyRowContainer = styled(FlexRow)<TableBodyRowContainerProps>(
  (props) => ({
    backgroundColor: backgroundColor(props),
-    boxShadow: props.zebra ? 'none' : 'inset 0 -1px #E9EBEE',
-    color: props.highlighted ? colors.white : props.color || undefined,
-    '& *': {
-      color: props.highlighted ? `${colors.white} !important` : undefined,
-    },
-    '& img': {
-      backgroundColor: props.highlighted
-        ? `${colors.white} !important`
-        : undefined,
-    },
+    boxShadow: props.zebra ? 'none' : `inset 0 -1px ${theme.dividerColor}`,
+    color: theme.textColorPrimary,
    height: props.multiline ? 'auto' : props.rowLineHeight,
    lineHeight: `${String(props.rowLineHeight || DEFAULT_ROW_HEIGHT)}px`,
    fontWeight: props.fontWeight,
    overflow: 'hidden',
    width: '100%',
    flexShrink: 0,
-    '&:hover': {
-      backgroundColor:
-        !props.highlighted && props.highlightOnHover ? colors.light02 : 'none',
-    },
  }),
 );
 TableBodyRowContainer.displayName = 'TableRow:TableBodyRowContainer';
--- a/desktop/flipper-plugin/package.json
+++ b/desktop/flipper-plugin/package.json
@@ -9,6 +9,7 @@
  "license": "MIT",
  "bugs": "https://github.com/facebook/flipper/issues",
  "dependencies": {
+    "@ant-design/colors": "^6.0.0",
    "@emotion/css": "^11.1.3",
    "@emotion/react": "^11.4.0",
    "@reach/observe-rect": "^1.2.0",
--- a/desktop/flipper-plugin/src/ui/Highlight.tsx
+++ b/desktop/flipper-plugin/src/ui/Highlight.tsx
@@ -17,9 +17,10 @@ import React, {
  useContext,
 } from 'react';
 import {debounce} from 'lodash';
+import {theme} from './theme';

 const Highlighted = styled.span({
-  backgroundColor: '#fcd872',
+  backgroundColor: theme.searchHighlightBackground,
 });

 export interface HighlightManager {
--- a/desktop/flipper-plugin/src/ui/MarkerTimeline.tsx
+++ b/desktop/flipper-plugin/src/ui/MarkerTimeline.tsx
@@ -66,7 +66,7 @@ const Point = styled(Layout.Horizontal)<{
  alignItems: 'flex-start',
  lineHeight: '16px',
  ':hover': {
-    background: `linear-gradient(to top, rgba(255,255,255,0) 0, #ffffff 10px)`,
+    background: `linear-gradient(to top, ${theme.black} 0, ${theme.white} 10px)`,
    paddingBottom: 5,
    zIndex: 2,
    '> span': {
@@ -83,10 +83,10 @@ const Point = styled(Layout.Horizontal)<{
    width: 9,
    height: 9,
    flexShrink: 0,
-    color: 'rgba(0,0,0,0.4)',
+    color: theme.textColorSecondary,
    lineHeight: '9px',
    borderRadius: '999em',
-    border: '1px solid rgba(0,0,0,0.2)',
+    border: theme.dividerColor,
    backgroundColor: props.threadColor,
    marginRight: 6,
    zIndex: 3,
--- a/desktop/flipper-plugin/src/ui/data-inspector/DataDescription.tsx
+++ b/desktop/flipper-plugin/src/ui/data-inspector/DataDescription.tsx
@@ -42,39 +42,44 @@ export const presetColors = Object.values({
 });

 const NullValue = styled.span({
-  color: 'rgb(128, 128, 128)',
+  color: theme.semanticColors.nullValue,
 });
 NullValue.displayName = 'DataDescription:NullValue';

 const UndefinedValue = styled.span({
-  color: 'rgb(128, 128, 128)',
+  color: theme.semanticColors.nullValue,
 });
 UndefinedValue.displayName = 'DataDescription:UndefinedValue';

 const StringValue = styled.span({
-  color: '#e04c60',
+  color: theme.semanticColors.stringValue,
  wordWrap: 'break-word',
 });
 StringValue.displayName = 'DataDescription:StringValue';

 const ColorValue = styled.span({
-  color: '#5f6673',
+  color: theme.semanticColors.colorValue,
 });
 ColorValue.displayName = 'DataDescription:ColorValue';

 const SymbolValue = styled.span({
-  color: 'rgb(196, 26, 22)',
+  color: theme.semanticColors.stringValue,
 });
 SymbolValue.displayName = 'DataDescription:SymbolValue';

 const NumberValue = styled.span({
-  color: '#4dbba6',
+  color: theme.semanticColors.numberValue,
 });
 NumberValue.displayName = 'DataDescription:NumberValue';

+const BooleanValue = styled.span({
+  color: theme.semanticColors.booleanValue,
+});
+BooleanValue.displayName = 'DataDescription:BooleanValue';
+
 const ColorBox = styled.span<{color: string}>((props) => ({
  backgroundColor: props.color,
-  boxShadow: 'inset 0 0 1px rgba(0, 0, 0, 1)',
+  boxShadow: `inset 0 0 1px ${theme.black}`,
  display: 'inline-block',
  height: 12,
  marginRight: 4,
@@ -85,7 +90,7 @@ const ColorBox = styled.span<{color: string}>((props) => ({
 ColorBox.displayName = 'DataDescription:ColorBox';

 const FunctionKeyword = styled.span({
-  color: 'rgb(170, 13, 145)',
+  color: theme.semanticColors.nullValue,
  fontStyle: 'italic',
 });
 FunctionKeyword.displayName = 'DataDescription:FunctionKeyword';
@@ -671,7 +676,7 @@ class DataDescriptionContainer extends PureComponent<{
            onChange={this.onChangeCheckbox}
          />
        ) : (
-          <StringValue>{'' + val}</StringValue>
+          <BooleanValue>{'' + val}</BooleanValue>
        );

      case 'undefined':
--- a/desktop/flipper-plugin/src/ui/data-inspector/DataInspector.tsx
+++ b/desktop/flipper-plugin/src/ui/data-inspector/DataInspector.tsx
@@ -13,6 +13,7 @@ import {DataInspectorNode} from './DataInspectorNode';
 import React from 'react';
 import {DataValueExtractor} from './DataPreview';
 import {HighlightProvider, HighlightManager} from '../Highlight';
+import {Layout} from '../Layout';

 export type DataInspectorProps = {
  /**
@@ -178,27 +179,29 @@ export class DataInspector extends PureComponent<

  render() {
    return (
-      <RootDataContext.Provider value={this.getRootData}>
-        <HighlightProvider text={this.props.filter}>
-          <DataInspectorNode
-            data={this.props.data}
-            diff={this.props.diff}
-            extractValue={this.props.extractValue}
-            setValue={this.props.setValue}
-            expanded={this.state.expanded}
-            onExpanded={this.onExpanded}
-            onDelete={this.props.onDelete}
-            onRenderName={this.props.onRenderName}
-            onRenderDescription={this.props.onRenderDescription}
-            expandRoot={this.props.expandRoot}
-            collapsed={this.props.filter ? true : this.props.collapsed}
-            tooltips={this.props.tooltips}
-            parentPath={EMPTY_ARRAY}
-            depth={0}
-            parentAncestry={EMPTY_ARRAY}
-          />
-        </HighlightProvider>
-      </RootDataContext.Provider>
+      <Layout.Container>
+        <RootDataContext.Provider value={this.getRootData}>
+          <HighlightProvider text={this.props.filter}>
+            <DataInspectorNode
+              data={this.props.data}
+              diff={this.props.diff}
+              extractValue={this.props.extractValue}
+              setValue={this.props.setValue}
+              expanded={this.state.expanded}
+              onExpanded={this.onExpanded}
+              onDelete={this.props.onDelete}
+              onRenderName={this.props.onRenderName}
+              onRenderDescription={this.props.onRenderDescription}
+              expandRoot={this.props.expandRoot}
+              collapsed={this.props.filter ? true : this.props.collapsed}
+              tooltips={this.props.tooltips}
+              parentPath={EMPTY_ARRAY}
+              depth={0}
+              parentAncestry={EMPTY_ARRAY}
+            />
+          </HighlightProvider>
+        </RootDataContext.Provider>
+      </Layout.Container>
    );
  }
 }
--- a/desktop/flipper-plugin/src/ui/data-inspector/DataInspectorNode.tsx
+++ b/desktop/flipper-plugin/src/ui/data-inspector/DataInspectorNode.tsx
@@ -27,6 +27,7 @@ import {Dropdown, Menu, Tooltip} from 'antd';
 import {tryGetFlipperLibImplementation} from '../../plugin/FlipperLib';
 import {safeStringify} from '../../utils/safeStringify';
 import {useInUnitTest} from '../../utils/useInUnitTest';
+import {theme} from '../theme';

 export {DataValueExtractor} from './DataPreview';

@@ -49,12 +50,12 @@ const BaseContainer = styled.div<{depth?: number; disabled?: boolean}>(
 BaseContainer.displayName = 'DataInspector:BaseContainer';

 const RecursiveBaseWrapper = styled.span({
-  color: '#FC3A4B',
+  color: theme.errorColor,
 });
 RecursiveBaseWrapper.displayName = 'DataInspector:RecursiveBaseWrapper';

 const Wrapper = styled.span({
-  color: '#555',
+  color: theme.textColorSecondary,
 });
 Wrapper.displayName = 'DataInspector:Wrapper';

@@ -64,7 +65,7 @@ const PropertyContainer = styled.span({
 PropertyContainer.displayName = 'DataInspector:PropertyContainer';

 const ExpandControl = styled.span({
-  color: '#6e6e6e',
+  color: theme.textColorSecondary,
  fontSize: 10,
  marginLeft: -11,
  marginRight: 5,
@@ -73,11 +74,11 @@ const ExpandControl = styled.span({
 ExpandControl.displayName = 'DataInspector:ExpandControl';

 const Added = styled.div({
-  backgroundColor: '#d2f0ea',
+  backgroundColor: theme.semanticColors.diffAddedBackground,
 });

 const Removed = styled.div({
-  backgroundColor: '#fbccd2',
+  backgroundColor: theme.semanticColors.diffRemovedBackground,
 });

 export type DataInspectorSetValue = (path: Array<string>, val: any) => void;
--- a/desktop/flipper-plugin/src/ui/data-inspector/DataPreview.tsx
+++ b/desktop/flipper-plugin/src/ui/data-inspector/DataPreview.tsx
@@ -12,6 +12,7 @@ import styled from '@emotion/styled';
 import {getSortedKeys} from './utils';
 import {PureComponent} from 'react';
 import React from 'react';
+import {theme} from '../theme';

 export type DataValueExtractor = (
  value: any,
@@ -28,12 +29,16 @@ export type DataValueExtractor = (
  | null;

 export const InspectorName = styled.span({
-  color: '#7b64c0',
+  color: theme.textColorPrimary,
 });
 InspectorName.displayName = 'DataInspector:InspectorName';

 const PreviewContainer = styled.span({
  fontStyle: 'italic',
+  color: theme.textColorSecondary,
+  [`${InspectorName}`]: {
+    color: theme.textColorSecondary,
+  },
 });
 PreviewContainer.displayName = 'DataPreview:PreviewContainer';

--- a/desktop/flipper-plugin/src/ui/data-inspector/tests/DataInspector.node.tsx
+++ b/desktop/flipper-plugin/src/ui/data-inspector/tests/DataInspector.node.tsx
@@ -86,7 +86,7 @@ test('can filter for data', async () => {
    <span>
      "j
      <span
-        class="css-i709sw-Highlighted eiud9hg0"
+        class="css-1cfwmd7-Highlighted eiud9hg0"
      >
        son
      </span>
--- a/desktop/flipper-plugin/src/ui/elements-inspector/elements.tsx
+++ b/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}
--- a/desktop/flipper-plugin/src/ui/theme.tsx
+++ b/desktop/flipper-plugin/src/ui/theme.tsx
@@ -7,6 +7,8 @@
 * @format
 */

+import * as antColors from '@ant-design/colors';
+
 // Exposes all the variables defined in themes/base.less:
 export const theme = {
  white: 'white', // use as counter color for primary
@@ -19,6 +21,7 @@ export const theme = {
  textColorSecondary: 'var(--flipper-text-color-secondary)',
  textColorPlaceholder: 'var(--flipper-text-color-placeholder)',
  textColorActive: 'var(--light-color-button-active)',
+  searchHighlightBackground: antColors.yellow[3],
  disabledColor: 'var(--flipper-disabled-color)',
  backgroundDefault: 'var(--flipper-background-default)',
  backgroundWash: 'var(--flipper-background-wash)',
@@ -46,6 +49,16 @@ export const theme = {
    fontSize: '12px',
  } as const,
  bold: 600,
+  semanticColors: {
+    attribute: antColors.orange[5],
+    nullValue: antColors.grey.primary!,
+    stringValue: antColors.orange[5],
+    colorValue: antColors.cyan[5],
+    booleanValue: antColors.magenta[5],
+    numberValue: antColors.blue[5],
+    diffAddedBackground: antColors.lime[1],
+    diffRemovedBackground: antColors.volcano[1],
+  },
 } as const;

 export type Spacing =
--- a/desktop/plugins/public/layout/InspectorSidebar.tsx
+++ b/desktop/plugins/public/layout/InspectorSidebar.tsx
@@ -9,7 +9,6 @@

 import {
  ManagedDataInspector,
-  Panel,
  FlexCenter,
  styled,
  colors,
@@ -18,6 +17,7 @@ import {
  Client,
  Logger,
 } from 'flipper';
+import {Panel} from 'flipper-plugin';
 import {PureComponent} from 'react';
 import React from 'react';
 import {useMemo, useEffect} from 'react';
@@ -64,7 +64,7 @@ class InspectorSidebarSection extends PureComponent<InspectorSidebarSectionProps
  render() {
    const {id} = this.props;
    return (
-      <Panel heading={id} floating={false} grow={false}>
+      <Panel title={id} pad>
        <ManagedDataInspector
          data={this.props.data}
          setValue={this.props.onValueChanged ? this.setValue : undefined}
--- a/desktop/yarn.lock
+++ b/desktop/yarn.lock
@@ -3817,7 +3817,12 @@ acorn-walk@^7.1.1:
  resolved "https://registry.yarnpkg.com/acorn-walk/-/acorn-walk-7.2.0.tgz#0de889a601203909b0fbe07b8938dc21d2e967bc"
  integrity sha512-OPdCF6GsMIP+Az+aWfAAOEt2/+iVDKE7oy6lJ098aoe59oAmK76qV6Gw60SbZ8jHuG2wH058GF4pLFbYamYrVA==

-acorn@^7.1.1, acorn@^7.4.0:
+acorn@^7.1.1:
+  version "7.1.1"
+  resolved "https://registry.yarnpkg.com/acorn/-/acorn-7.1.1.tgz#e35668de0b402f359de515c5482a1ab9f89a69bf"
+  integrity sha512-add7dgA5ppRPxCFJoAGfMDi7PIBXq1RtGo7BhbLaxwrXPOmw8gq48Y9ozT01hUKy9byMjlR20EJhu5zlkErEkg==
+
+acorn@^7.4.0:
  version "7.4.1"
  resolved "https://registry.yarnpkg.com/acorn/-/acorn-7.4.1.tgz#feaed255973d2e77555b83dbc08851a6c63520fa"
  integrity sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==
@@ -10016,7 +10021,12 @@ minimatch@3.0.4, minimatch@^3.0.2, minimatch@^3.0.4:
  dependencies:
    brace-expansion "^1.1.7"

-minimist@^1.1.1, minimist@^1.2.0, minimist@^1.2.5:
+minimist@^1.1.1, minimist@^1.2.0:
+  version "1.2.3"
+  resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.3.tgz#3db5c0765545ab8637be71f333a104a965a9ca3f"
+  integrity sha512-+bMdgqjMN/Z77a6NlY/I3U5LlRDbnmaAk6lDveAPKwSpcPM4tKAuYsvYF8xjhOPXhOYGe/73vVLVez5PW+jqhw==
+
+minimist@^1.2.5:
  version "1.2.5"
  resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.5.tgz#67d66014b66a6a8aaa0c083c5fd58df4e4e97602"
  integrity sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==