fix: Adjust header margins and list styles

closes #119
carbon-design-system · May 29, 2019 · 40012b8 · 40012b8
1 parent 67da7c0
commit 40012b8
Show file tree

Hide file tree

Showing 5 changed files with 13 additions and 21 deletions.
diff --git a/packages/gatsby-theme-carbon/src/components/markdown/H4.js b/packages/gatsby-theme-carbon/src/components/markdown/H4.js
@@ -1,12 +1,12 @@
 import React from 'react';
 import responsiveStyles from '../shared/responsiveStyles';
 
-const h4Css = ({ typeStyles, layout }) => [
+const h4Css = ({ typeStyles, spacing }) => [
   typeStyles.heading02,
   responsiveStyles,
   {
-    marginTop: layout[0],
-    marginBottom: `calc(0.5 * ${layout[0]})`,
+    marginTop: spacing[4],
+    lineHeight: 1.5,
   },
 ];
 

diff --git a/packages/gatsby-theme-carbon/src/components/markdown/H5.js b/packages/gatsby-theme-carbon/src/components/markdown/H5.js
@@ -1,12 +1,12 @@
 import React from 'react';
 import responsiveStyles from '../shared/responsiveStyles';
 
-const h5Css = ({ typeStyles, layout }) => [
+const h5Css = ({ typeStyles, spacing }) => [
   typeStyles.heading01,
   responsiveStyles,
   {
-    marginTop: layout[0],
-    marginBottom: `calc(0.5 * ${layout[0]})`,
+    marginTop: spacing[4],
+    lineHeight: 1.5,
   },
 ];
 

diff --git a/packages/gatsby-theme-carbon/src/components/markdown/H6.js b/packages/gatsby-theme-carbon/src/components/markdown/H6.js
@@ -1,12 +1,12 @@
 import React from 'react';
 import responsiveStyles from '../shared/responsiveStyles';
 
-const h5Css = ({ typeStyles, layout }) => [
+const h5Css = ({ typeStyles, spacing }) => [
   typeStyles.heading01,
   responsiveStyles,
   {
-    marginTop: layout[0],
-    marginBottom: `calc(0.5 * ${layout[0]})`,
+    marginTop: spacing[4],
+    lineHeight: 1.5,
   },
 ];
 

diff --git a/packages/gatsby-theme-carbon/src/components/markdown/Ol.js b/packages/gatsby-theme-carbon/src/components/markdown/Ol.js
@@ -12,23 +12,19 @@ const List = styled.ol`
   margin-bottom: 1.5rem;
 
   li {
-    margin-left: 1rem;
+    margin-left: 1.25rem;
     counter-increment: step-counter;
     a {
       color: ${({ theme }) => theme.colors.black};
     }
     & :before {
       content: counter(step-counter) '. ';
       position: absolute;
-      margin-left: -0.5rem;
-      transform: translate(-100%, 0px);
+      margin-left: -1.25rem;
     }
     & p {
       display: inline;
     }
-    ${mq.md} {
-      margin-left: 2rem;
-    }
   }
 `;
 

diff --git a/packages/gatsby-theme-carbon/src/components/markdown/Ul.js b/packages/gatsby-theme-carbon/src/components/markdown/Ul.js
@@ -11,22 +11,18 @@ const List = styled.ul`
   margin-bottom: 1.5rem;
 
   li {
-    margin-left: 1rem;
+    margin-left: 1.25rem;
     a {
       color: ${props => props.theme.colors.white};
     }
     & :before {
       content: '–';
       position: absolute;
-      margin-left: -0.5rem;
-      transform: translate(-100%, 0px);
+      margin-left: -1.25rem;
     }
     & p {
       display: inline;
     }
-    ${mq.md} {
-      margin-left: 2rem;
-    }
   }
 `;