612bd69605
Summary: This change extracts most styles used across the inspector components and puts them in Styles.tsx Reviewed By: passy Differential Revision: D41026862 fbshipit-source-id: 461a78fb4a707d9a455281ec020bac95191ddfce
110 lines
2.3 KiB
TypeScript
110 lines
2.3 KiB
TypeScript
/**
|
|
* Copyright (c) Meta Platforms, Inc. and affiliates.
|
|
*
|
|
* This source code is licensed under the MIT license found in the
|
|
* LICENSE file in the root directory of this source tree.
|
|
*
|
|
* @format
|
|
*/
|
|
|
|
import {theme} from 'flipper-plugin';
|
|
|
|
export const InspectorStyle = {
|
|
strokeColor: '#4A5967',
|
|
outerFillColor: '#F2F3F7',
|
|
innerFillColor: '#CCD1D9',
|
|
spaceBox: {
|
|
size: 180,
|
|
margin: 10,
|
|
separator: 4,
|
|
},
|
|
bounds: {
|
|
size: 180,
|
|
multiplier: 0.4,
|
|
margin: 4,
|
|
separator: 10,
|
|
},
|
|
} as const;
|
|
|
|
export const RowStyle = {
|
|
marginTop: 4,
|
|
marginBottom: 4,
|
|
borderStyle: 'solid',
|
|
borderColor: theme.dividerColor,
|
|
borderWidth: '0 0 1px 0',
|
|
} as const;
|
|
|
|
export const ObjectContainerStyle = {
|
|
borderLeftWidth: 5,
|
|
borderLeftColor: 'lightgray',
|
|
borderLeftStyle: 'solid',
|
|
} as const;
|
|
|
|
export const DefaultInputContainerStyle = {
|
|
margin: 'auto',
|
|
padding: '2px',
|
|
minWidth: '50px',
|
|
backgroundColor: theme.backgroundDefault,
|
|
borderRadius: '5px',
|
|
boxShadow: '0 0 0 1px rgba(0,0,0,.2)',
|
|
display: 'inline-block',
|
|
} as const;
|
|
|
|
export const NumberAttributeValueStyle = {
|
|
color: theme.semanticColors.numberValue,
|
|
display: 'flex',
|
|
} as const;
|
|
|
|
export const TextAttributeValueStyle = {
|
|
color: theme.semanticColors.stringValue,
|
|
display: 'flex',
|
|
} as const;
|
|
|
|
export const EnumAttributeValueStyle = {
|
|
color: theme.semanticColors.stringValue,
|
|
fontSize: theme.fontSize.small,
|
|
margin: 'auto',
|
|
} as const;
|
|
|
|
export const CenteredNumberStyle = {
|
|
textAlign: 'center',
|
|
color: theme.semanticColors.numberValue,
|
|
} as const;
|
|
|
|
export const CenteredTextStyle = {
|
|
textAlign: 'center',
|
|
} as const;
|
|
|
|
export const CenteredContentStyle = {
|
|
paddingLeft: '20%',
|
|
paddingRight: '20%',
|
|
} as const;
|
|
|
|
export const CenteredHeadingContentStyle = {
|
|
...CenteredContentStyle,
|
|
fontSize: theme.fontSize.small,
|
|
} as const;
|
|
|
|
export const ColorOuterButtonStyle = {
|
|
padding: '5px',
|
|
backgroundColor: '#fff',
|
|
borderRadius: '5px',
|
|
boxShadow: '0 0 0 1px rgba(0,0,0,.1)',
|
|
display: 'inline-block',
|
|
cursor: 'pointer',
|
|
} as const;
|
|
|
|
export const ColorInnerButtonStyle = {
|
|
width: '36px',
|
|
height: '14px',
|
|
borderRadius: '2px',
|
|
} as const;
|
|
|
|
export const AutoMarginStyle = {
|
|
margin: 'auto',
|
|
} as const;
|
|
|
|
export const TopSpacedContainerStyle = {
|
|
marginTop: 10,
|
|
} as const;
|