docs: show border values as objects (uber#4010)

* docs: show border values as objects * docs: turn values for grid and font into objects
Saghl · Jan 5, 2021 · c103b8e · c103b8e
1 parent 4b586a0
commit c103b8e
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 13 deletions.
diff --git a/documentation-site/components/theming/borders.js b/documentation-site/components/theming/borders.js
@@ -25,11 +25,19 @@ export function Border({name}: {name: string}) {
         ></div>
       )}
       renderValue={({previewTheme}) => (
-        <React.Fragment>
-          <div>{previewTheme.borders[name].borderStyle}</div>
-          <div>{previewTheme.borders[name].borderWidth}</div>
-          <div>{previewTheme.borders[name].borderColor}</div>
-        </React.Fragment>
+        <pre
+          className={css({
+            fontSize: '12px',
+            fontFamily:
+              'Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;',
+          })}
+        >
+          {`{
+  borderWidth: '${previewTheme.borders[name].borderWidth}',
+  borderStyle: '${previewTheme.borders[name].borderStyle}',
+  borderColor: '${previewTheme.borders[name].borderColor}'
+}`}
+        </pre>
       )}
     />
   );

diff --git a/documentation-site/components/theming/grid.js b/documentation-site/components/theming/grid.js
@@ -12,16 +12,20 @@ import {Property} from './common.js';
 export function Grid() {
   return (
     <React.Fragment>
-      <Property name="columns" concern="grid" renderValue={() => '4, 8, 12'} />
+      <Property
+        name="columns"
+        concern="grid"
+        renderValue={() => `['4px', '8px', '12px']`}
+      />
       <Property
         name="gutters"
         concern="grid"
-        renderValue={() => '16px, 36px, 36px'}
+        renderValue={() => `['16px', '36px', '36px']`}
       />
       <Property
         name="margins"
         concern="grid"
-        renderValue={() => '16px, 36px, 64px'}
+        renderValue={() => `['16px', '36px', '64px']`}
       />
       <Property name="gaps" concern="grid" renderValue={() => '0'} />
       <Property name="maxWidth" concern="grid" renderValue={() => '1280px'} />

diff --git a/documentation-site/components/theming/typography.js b/documentation-site/components/theming/typography.js
@@ -20,11 +20,19 @@ export function Type({name}: {name: string}) {
         <div className={css({...theme.typography[name]})}>Example</div>
       )}
       renderValue={() => (
-        <React.Fragment>
-          <div>{theme.typography[name].fontSize}</div>
-          <div>{theme.typography[name].fontWeight}</div>
-          <div>{theme.typography[name].lineHeight}</div>
-        </React.Fragment>
+        <pre
+          className={css({
+            fontSize: '14px',
+            fontFamily:
+              'Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;',
+          })}
+        >
+          {`{
+  fontSize: '${theme.typography[name].fontSize}',
+  fontWeight: '${theme.typography[name].fontWeight}',
+  lineHeight: '${theme.typography[name].lineHeight}'
+}`}
+        </pre>
       )}
     />
   );