design review fixes round 2

docs/visual-language/grid-and-layout/non-web-environment.mdx

@@ -12,8 +12,6 @@ The typestack for these grids is also based in multiples of 20px, line height ad
 
 ### Logos State Podcast
 
-# Gallery
-
 <!-- [Sizzle Reel draft.mp4](Gallery%20e5522cb5bfc94082adac41f1ab17a673/Sizzle_Reel_draft.mp4) -->
 
 2 column 20px and 4 column 20px

docs/visual-language/typography/web-environment.mdx

@@ -2,6 +2,8 @@
 title: Web Environments
 ---
 
+import { StorybookDemo } from '@site/src/components/mdx/StorybookDemo';
+
 # Web Environments
 
 In our web environments, we lean toward a concept inspired by the decentralized mental model. Instead of imposing a singular font choice, we rely on the default web fonts present on users' browsers and systems. Our strategy offers key advantages:
@@ -37,4 +39,4 @@ font-family: Serif
 
 ### [LSD](https://logos-brand-guidelines.vercel.app/category/lsd---ui-library) type stack
 
-![Untitled](/TypographyWebEnvironment.png)
+<StorybookDemo name="Typography" docId="themeprovider--docs" storybookUrl="https://63e4f71c39dc65c5c703c1e8-trawpnaxme.chromatic.com" storyId="themeprovider--typography" globalTypes={{}} componentProperties={[]} globalControls={["themeFont"]} />

sidebars.js

@@ -52,7 +52,6 @@ const sidebars = {
         //   label: 'Illustration',
         //   id: 'visual-language/illustration',
         // },
-
         {
           type: 'category',
           label: 'Typography',
@@ -75,6 +74,11 @@ const sidebars = {
             },
           ],
         },
+        {
+          type: 'doc',
+          label: 'Color',
+          id: 'visual-language/color',
+        },
         {
           type: 'category',
           label: 'Grid and Layout',
@@ -97,6 +101,17 @@ const sidebars = {
             },
           ],
         },
+
+        {
+          type: 'doc',
+          label: 'Photography',
+          id: 'visual-language/photography',
+        },
+        {
+          type: 'doc',
+          label: 'Illustration',
+          id: 'visual-language/illustration',
+        },
       ],
     },
     {

src/components/mdx/CardWithIcon/CardWithIcon.tsx

@@ -29,18 +29,14 @@ export const CardWithIcon: React.FC<CardWithIconProps> = ({
           {!!icon && <div className={styles.icon}>{icon}</div>}
           <NewPageIcon />
         </div>
-        <Typography
-          className={styles.title}
-          variant="subtitle1"
-          component="div"
-        >
+        <Typography className={styles.title} variant="body1" component="div">
           {title}
         </Typography>
 
         {!!subtitle && (
           <Typography
             className={styles.subtitle}
-            variant="subtitle2"
+            variant="label2"
             component="div"
           >
             {subtitle}

src/components/mdx/StorybookDemo/StorybookDemo.tsx

@@ -67,6 +67,7 @@ export type StorybookDemoProps = {
   storybookUrl: string
   globalTypes: Record<string, GlobalType>
   componentProperties: ComponentProperty[]
+  globalControls?: ('themeFont' | 'themeColor')[]
 }
 
 export const StorybookDemo: React.FC<StorybookDemoProps> = ({
@@ -75,6 +76,7 @@ export const StorybookDemo: React.FC<StorybookDemoProps> = ({
   storyId,
   storybookUrl,
   globalTypes,
+  globalControls,
   componentProperties = [],
 }) => {
   const colorMode = useColorMode()
@@ -115,10 +117,15 @@ export const StorybookDemo: React.FC<StorybookDemoProps> = ({
       'title,subtitle,toolbar' +
         (storyId ? ',description,canvas-border,code' : ''),
     )
-    url.searchParams.set('globalControls', 'true')
+    url.searchParams.set(
+      'globalControls',
+      globalControls && globalControls.length
+        ? globalControls.join(',')
+        : 'false',
+    )
 
     return url.toString()
-  }, [docId, storyId, globalProps, props])
+  }, [docId, storyId, globalProps, globalControls, props])
 
   return (
     <div className={clsx(styles.root, styles[globalProps.themeColor])}>