Styles refactoring

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

desktop/plugins/public/ui-debugger/components/sidebar/inspector/Styles.tsx

@@ -0,0 +1,109 @@
+/**
+ * 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;