Merge pull request #246 from tblivet/feat/add_css_variables

Rework variables section to highlight CSS variables

stories/html/variables/colors.stories.mdx

@@ -0,0 +1,106 @@
+import { useEffect } from '@storybook/client-api';
+import { Meta, Story, Canvas } from '@storybook/addon-docs';
+import styles from './variables.scss'
+import { 
+  renderPrimaryColors,
+  renderRedColors,
+  renderYellowColors,
+  renderGreenColors,
+  renderBlueColors,
+  renderOceanBlueColors,
+  renderPurpleColors,
+  renderAmberColors,
+  renderCommonColors
+} from './variables';
+
+<Meta title="CSS Variables/Colors" />
+
+# Primary
+
+<Canvas withSource="none">
+  <Story 
+    name="Primary"
+  >
+    {() => renderPrimaryColors()}
+  </Story>
+</Canvas>
+
+# Red
+
+<Canvas withSource="none">
+  <Story 
+    name="Red"
+  >
+    {() => renderRedColors()}
+  </Story>
+</Canvas>
+
+# Yellow
+
+<Canvas withSource="none">
+  <Story 
+    name="Yellow"
+  >
+    {() => renderYellowColors()}
+  </Story>
+</Canvas>
+
+# Green
+
+<Canvas withSource="none">
+  <Story 
+    name="Green"
+  >
+    {() => renderGreenColors()}
+  </Story>
+</Canvas>
+
+# Blue
+
+<Canvas withSource="none">
+  <Story 
+    name="Blue"
+  >
+    {() => renderBlueColors()}
+  </Story>
+</Canvas>
+
+# Ocean blue
+
+<Canvas withSource="none">
+  <Story 
+    name="Ocean blue"
+  >
+    {() => renderOceanBlueColors()}
+  </Story>
+</Canvas>
+
+# Purple
+
+<Canvas withSource="none">
+  <Story 
+    name="Purple"
+  >
+    {() => renderPurpleColors()}
+  </Story>
+</Canvas>
+
+# Amber
+
+<Canvas withSource="none">
+  <Story 
+    name="Amber"
+  >
+    {() => renderAmberColors()}
+  </Story>
+</Canvas>
+
+# Common
+
+<Canvas withSource="none">
+  <Story 
+    name="Common"
+  >
+    {() => renderCommonColors()}
+  </Story>
+</Canvas>

stories/html/variables/fonts.stories.mdx

@@ -0,0 +1,39 @@
+import { useEffect } from '@storybook/client-api';
+import { Meta, Story, Canvas } from '@storybook/addon-docs';
+import styles from './variables.scss'
+import { 
+  renderPrimaryFont,
+  renderSecondaryFont,
+  renderFontSizes
+} from './variables';
+
+<Meta title="CSS Variables/Fonts" />
+
+# Primary
+<Canvas withSource="none">
+  <Story 
+    name="Primary"
+  >
+    {() => renderPrimaryFont()}
+  </Story>
+</Canvas>
+
+# Secondary
+_NOTE: The secondary font is the same as the primary font._
+<Canvas withSource="none">
+  <Story 
+    name="Secondary"
+  >
+    {() => renderSecondaryFont()}
+  </Story>
+</Canvas>
+
+# Font size
+<Canvas withSource="none">
+  <Story 
+    name="Size"
+  >
+    {() => renderFontSizes()}
+  </Story>
+</Canvas>
+

stories/html/variables/others.stories.mdx

@@ -0,0 +1,27 @@
+import { useEffect } from '@storybook/client-api';
+import { Meta, Story, Canvas } from '@storybook/addon-docs';
+import styles from './variables.scss'
+import { 
+  renderBoxShadows,
+  renderSizes
+} from './variables';
+
+<Meta title="CSS Variables/Others" />
+
+# Shadows
+<Canvas withSource="none">
+  <Story 
+    name="Shadows"
+  >
+    {() => renderBoxShadows()}
+  </Story>
+</Canvas>
+
+# Sizes
+<Canvas withSource="none">
+  <Story 
+    name="Spaces"
+  >
+    {() => renderSizes()}
+  </Story>
+</Canvas>