(
(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}
+