#346 Make mdx docs readable for dark theme by applying styles on Canv…

…as wrapper (#347) * Make icon columns auto-adjustable
livechat · Jul 20, 2022 · 65e3c89 · 65e3c89
1 parent dc1b4d2
commit 65e3c89
Show file tree

Hide file tree

Showing 5 changed files with 33 additions and 9 deletions.
diff --git a/packages/react-components/src/stories/ColorTokens.stories.mdx b/packages/react-components/src/stories/ColorTokens.stories.mdx
@@ -7,4 +7,11 @@ import { ColorTokensPallete } from './components/ColorTokens';
 
 List of available color tokens. Click on token to copy it's value to clipboard.
 
-<ColorTokensPallete />
+<Canvas
+  style={{
+    color: 'var(--content-default)',
+    backgroundColor: 'var(--background)',
+  }}
+>
+  <ColorTokensPallete />
+</Canvas>
diff --git a/packages/react-components/src/stories/Icons.stories.mdx b/packages/react-components/src/stories/Icons.stories.mdx
@@ -9,4 +9,11 @@ import { IconsShowcase } from './components/IconsShowcase';
 
 List of the icons available in the design system.
 
-<IconsShowcase />
+<Canvas
+  style={{
+    color: 'var(--content-default)',
+    backgroundColor: 'var(--background)',
+  }}
+>
+  <IconsShowcase />
+</Canvas>
diff --git a/packages/react-components/src/stories/Typography.stories.mdx b/packages/react-components/src/stories/Typography.stories.mdx
@@ -1,6 +1,6 @@
-import { Meta, Canvas, ArgsTable } from "@storybook/addon-docs";
+import { Meta, Canvas, ArgsTable } from '@storybook/addon-docs';
 
-import { Heading, Text } from "../components/Typography";
+import { Heading, Text } from '../components/Typography';
 
 <Meta title="Foundations/Typography" />
 
@@ -22,7 +22,12 @@ You can modify the output element via `as` prop. For example if you want to rend
 
 <ArgsTable of={Heading} />
 
-<Canvas style={{ color: "var(--content-default)" }}>
+<Canvas
+  style={{
+    color: 'var(--content-default)',
+    backgroundColor: 'var(--background)',
+  }}
+>
   <Heading size="xl">Heading XLarge</Heading>
   <Heading size="lg">Heading Large</Heading>
   <Heading size="md">Heading Medium</Heading>
@@ -42,7 +47,12 @@ You can modify the output element via `as` prop. For example if you want to rend
 
 <ArgsTable of={Text} />
 
-<Canvas style={{ color: "var(--content-default)" }}>
+<Canvas
+  style={{
+    color: 'var(--content-default)',
+    backgroundColor: 'var(--background)',
+  }}
+>
   <Text>Paragraph Medium</Text>
   <Text bold>Paragraph Medium Bold</Text>
   <Text underline>Paragraph Medium Underline</Text>

diff --git a/packages/react-components/src/stories/components/ColorTokens.tsx b/packages/react-components/src/stories/components/ColorTokens.tsx
@@ -63,7 +63,7 @@ const CONTENT = {
 };
 
 export const ColorTokensPallete: React.FC = () => (
-  <div style={{ color: 'var(--content-default)' }}>
+  <React.Fragment>
     {Object.entries(CONTENT).map(([section, { heading, content }]) => (
       <React.Fragment key={section}>
         <h2>{heading}</h2>
@@ -95,5 +95,5 @@ export const ColorTokensPallete: React.FC = () => (
         </ul>
       </React.Fragment>
     ))}
-  </div>
+  </React.Fragment>
 );
diff --git a/packages/react-components/src/stories/components/iconsShowcase.css b/packages/react-components/src/stories/components/iconsShowcase.css
@@ -9,5 +9,5 @@
   display: grid;
   gap: 10px;
   grid-auto-rows: minmax(100px, auto);
-  grid-template-columns: repeat(8, 1fr);
+  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
 }