From 5c8dde0925f2b9e597a7f35c98e2b34b44f2d758 Mon Sep 17 00:00:00 2001 From: Michel Weststrate Date: Tue, 29 Jun 2021 08:38:33 -0700 Subject: [PATCH] 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 --- .../PluginInstaller.node.tsx.snap | 28 +++++----- desktop/app/src/ui/components/Panel.tsx | 8 +-- .../app/src/ui/components/table/TableHead.tsx | 7 ++- .../app/src/ui/components/table/TableRow.tsx | 22 ++------ desktop/flipper-plugin/package.json | 1 + desktop/flipper-plugin/src/ui/Highlight.tsx | 3 +- .../flipper-plugin/src/ui/MarkerTimeline.tsx | 6 +-- .../src/ui/data-inspector/DataDescription.tsx | 23 ++++---- .../src/ui/data-inspector/DataInspector.tsx | 45 ++++++++-------- .../ui/data-inspector/DataInspectorNode.tsx | 11 ++-- .../src/ui/data-inspector/DataPreview.tsx | 7 ++- .../__tests__/DataInspector.node.tsx | 2 +- .../src/ui/elements-inspector/elements.tsx | 54 ++++++------------- desktop/flipper-plugin/src/ui/theme.tsx | 13 +++++ .../public/layout/InspectorSidebar.tsx | 4 +- desktop/yarn.lock | 14 ++++- 16 files changed, 125 insertions(+), 123 deletions(-) diff --git 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 index 715488f21..facd82d48 100644 --- 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" >
@@ -46,7 +46,7 @@ exports[`load PluginInstaller list 1`] = `
@@ -62,7 +62,7 @@ exports[`load PluginInstaller list 1`] = `
@@ -78,7 +78,7 @@ exports[`load PluginInstaller list 1`] = `
@@ -102,7 +102,7 @@ exports[`load PluginInstaller list 1`] = ` class="css-18abd42-View-FlexBox-FlexColumn ecr18to0" >
@@ -353,7 +353,7 @@ exports[`load PluginInstaller list with one plugin installed 1`] = `
@@ -369,7 +369,7 @@ exports[`load PluginInstaller list with one plugin installed 1`] = `
@@ -385,7 +385,7 @@ exports[`load PluginInstaller list with one plugin installed 1`] = `
@@ -409,7 +409,7 @@ exports[`load PluginInstaller list with one plugin installed 1`] = ` class="css-18abd42-View-FlexBox-FlexColumn ecr18to0" >
( (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, diff --git a/desktop/app/src/ui/components/table/TableHead.tsx b/desktop/app/src/ui/components/table/TableHead.tsx index a321d5535..3971bcd05 100644 --- 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', diff --git a/desktop/app/src/ui/components/table/TableRow.tsx b/desktop/app/src/ui/components/table/TableRow.tsx index 43facf340..92cf060e4 100644 --- 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)( (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'; diff --git a/desktop/flipper-plugin/package.json b/desktop/flipper-plugin/package.json index 2342cf432..155b88eca 100644 --- 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", diff --git a/desktop/flipper-plugin/src/ui/Highlight.tsx b/desktop/flipper-plugin/src/ui/Highlight.tsx index cfb32a0dd..8320f5a40 100644 --- 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 { diff --git a/desktop/flipper-plugin/src/ui/MarkerTimeline.tsx b/desktop/flipper-plugin/src/ui/MarkerTimeline.tsx index 0e38f4b1d..75825be1a 100644 --- 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, diff --git a/desktop/flipper-plugin/src/ui/data-inspector/DataDescription.tsx b/desktop/flipper-plugin/src/ui/data-inspector/DataDescription.tsx index 24fa25c1a..f188ab410 100644 --- 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} /> ) : ( - {'' + val} + {'' + val} ); case 'undefined': diff --git a/desktop/flipper-plugin/src/ui/data-inspector/DataInspector.tsx b/desktop/flipper-plugin/src/ui/data-inspector/DataInspector.tsx index 57be92ad3..9d9d796f8 100644 --- 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 ( - - - - - + + + + + + + ); } } diff --git a/desktop/flipper-plugin/src/ui/data-inspector/DataInspectorNode.tsx b/desktop/flipper-plugin/src/ui/data-inspector/DataInspectorNode.tsx index cc361faed..cec5b9a1e 100644 --- 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, val: any) => void; diff --git a/desktop/flipper-plugin/src/ui/data-inspector/DataPreview.tsx b/desktop/flipper-plugin/src/ui/data-inspector/DataPreview.tsx index 24c51e5d9..0c42c8848 100755 --- 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'; diff --git a/desktop/flipper-plugin/src/ui/data-inspector/__tests__/DataInspector.node.tsx b/desktop/flipper-plugin/src/ui/data-inspector/__tests__/DataInspector.node.tsx index 5604c1e8c..7efe61cc3 100644 --- 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 () => { "j son diff --git a/desktop/flipper-plugin/src/ui/elements-inspector/elements.tsx b/desktop/flipper-plugin/src/ui/elements-inspector/elements.tsx index 0a1390361..41ccc3e5c 100644 --- 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)((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 { role="button" tabIndex={-1} style={{ - color: selected || focused ? 'white' : '#1d2129', + color: theme.textColorSecondary, fontSize: '8px', }}> {element.expanded ? : } @@ -412,7 +384,11 @@ class ElementsRow extends PureComponent { {line} {arrow} - + {decoration} +