jens/flipper
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Theming colors

Browse Source 
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
This commit is contained in:
Michel Weststrate
2021-06-29 08:38:33 -07:00
committed by Facebook GitHub Bot
parent 279f3c41b7
commit 5c8dde0925
16 changed files with 125 additions and 123 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
desktop/app/src/chrome/plugin-manager/__tests__/__snapshots__/PluginInstaller.node.tsx.snap
View File

@@ -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

8
desktop/app/src/ui/components/Panel.tsx
View File

@@ -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,

7
desktop/app/src/ui/components/table/TableHead.tsx
View File

@@ -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',

22
desktop/app/src/ui/components/table/TableRow.tsx
View File

@@ -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';