[design-studio] Add JSON preview styling

sanity-io · Oct 6, 2020 · 41e65dc · 41e65dc
1 parent 9155e22
commit 41e65dc
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 1 deletion.
diff --git a/packages/design-studio/documentViews/jsonPreview.css b/packages/design-studio/documentViews/jsonPreview.css
@@ -0,0 +1,9 @@
+@import 'part:@sanity/base/theme/variables-style';
+
+.root {
+  font-family: var(--font-family-monospace);
+  background: var(--code-bg);
+  color: var(--code-color);
+  padding: var(--medium-padding);
+  margin: 0;
+}
diff --git a/packages/design-studio/documentViews/jsonPreview.tsx b/packages/design-studio/documentViews/jsonPreview.tsx
@@ -1,5 +1,7 @@
 import React from 'react'
 
+import styles from './jsonPreview.css'
+
 export function JSONPreviewDocumentView(props: any) {
-  return <pre>{JSON.stringify(props.document, null, 2)}</pre>
+  return <pre className={styles.root}>{JSON.stringify(props.document.displayed, null, 2)}</pre>
 }