Improve output format

Author: jzempel

packages/theming/demo/~patterns/patterns.stories.mdx

@@ -8,7 +8,7 @@ import { GetColorV8Story } from './stories/GetColorV8Story';
 
 The following stories test the performance of the `getColor` and `getColorV8`
 functions. The original implementations used `JSON.stringify` for argument
-memmoization. The updated implementations, introduced in v9.0.1, use `WeakMap`
+memoization. The updated implementations, introduced in v9.0.1, use `WeakMap`
 object comparison to optimize performance.
 
 ## `getColor` test

packages/theming/demo/~patterns/stories/GetColorStory.tsx

@@ -12,7 +12,7 @@ import { getColor } from '@zendeskgarden/react-theming';
 import { Button } from '@zendeskgarden/react-buttons';
 import { Grid } from '@zendeskgarden/react-grid';
 import { Dots } from '@zendeskgarden/react-loaders';
-import { Code, Paragraph } from '@zendeskgarden/react-typography';
+import { Code, Paragraph, Span } from '@zendeskgarden/react-typography';
 
 const StyledColor = styled.div`
   display: inline-block;
@@ -137,7 +137,9 @@ export const GetColorStory: StoryFn = () => {
       <Grid.Row style={{ marginTop: 20 }}>
         <Grid.Col>
           <StyledColor style={{ backgroundColor }} />
-          <div style={{ marginTop: 12 }}>{backgroundColor}</div>
+          <div style={{ marginTop: 12 }}>
+            <Span isMonospace>{backgroundColor}</Span>
+          </div>
         </Grid.Col>
       </Grid.Row>
       {perf.milliseconds > 10 && backgroundColor === initialColor && (

packages/theming/demo/~patterns/stories/GetColorV8Story.tsx

@@ -12,7 +12,7 @@ import { getColorV8 } from '@zendeskgarden/react-theming';
 import { Button } from '@zendeskgarden/react-buttons';
 import { Grid } from '@zendeskgarden/react-grid';
 import { Dots } from '@zendeskgarden/react-loaders';
-import { Code, Paragraph } from '@zendeskgarden/react-typography';
+import { Code, Paragraph, Span } from '@zendeskgarden/react-typography';
 import PALETTE_V8 from '../../../src/elements/palette/v8';
 
 const StyledColor = styled.div`
@@ -102,7 +102,9 @@ export const GetColorV8Story: StoryFn = () => {
       <Grid.Row style={{ marginTop: 20 }}>
         <Grid.Col>
           <StyledColor style={{ backgroundColor }} />
-          <div style={{ marginTop: 12 }}>{backgroundColor}</div>
+          <div style={{ marginTop: 12 }}>
+            <Span isMonospace>{backgroundColor}</Span>
+          </div>
         </Grid.Col>
       </Grid.Row>
       {perf.milliseconds > 1 && backgroundColor === initialColor && (