fix(typography): some cleanup

Author: adamraider

docs/html/typography/typography-headings.html

@@ -1,6 +1,6 @@
-<h1><span class="ray-text--h1">Heading 1</span></h1>
-<h2><span class="ray-text--h2">Heading 2</span></h1>
-<h3><span class="ray-text--h3">Heading 3</span></h1>
-<h4><span class="ray-text--h4">Heading 4</span></h1>
-<h5><span class="ray-text--h5">Heading 5</span></h1>
-<h6><span class="ray-text--h6">Heading 6</span></h1>
+<span class="ray-text--h1">Heading 1</span><br />
+<span class="ray-text--h2">Heading 2</span><br />
+<span class="ray-text--h3">Heading 3</span><br />
+<span class="ray-text--h4">Heading 4</span><br />
+<span class="ray-text--h5">Heading 5</span><br />
+<span class="ray-text--h6">Heading 6</span><br />

docs/html/typography/typography-list.html

@@ -0,0 +1,14 @@
+<ol>
+  <li>Item one</li>
+  <li>Item two</li>
+  <li>Item three</li>
+  <li>
+    Item four
+    <ul>
+      <li>and a one</li>
+      <li>and a two</li>
+      <li>and a three</li>
+    </ul>
+  </li>
+  <li>Item five</li>
+</ol>

docs/principles/typography.md

@@ -67,6 +67,14 @@ Add a `<footer class="ray-blockquote__footer">` to identify a source.
     >
 </component>
 
+## Lists
+
+<component
+    component="typography"
+    variation="typography-list"
+    >
+</component>
+
 # Font Family
 
 <p class="ray-text--body-large">Limiting font-families, a tight type scale, and content limits will keep it tight.</p>

packages/core/src/global/_base.scss

@@ -41,11 +41,4 @@
       }
     }
   }
-
-  ul,
-  li {
-    list-style-type: none;
-    margin: 0;
-    padding: 0;
-  }
 }

packages/core/src/global/_typography.scss

@@ -3,79 +3,76 @@
 @mixin ray-display-1 {
   font-size: 4rem;
   line-height: 5.5rem;
+  margin: 0 0 2rem;
 }
 
 @mixin ray-display-2 {
   font-size: 3rem;
   line-height: 4rem;
+  margin: 0 0 2rem;
 }
 
 @mixin ray-h1 {
   font-size: 2.5rem;
   line-height: 3.5rem;
-  margin-bottom: 1.5rem;
+  margin: 0 0 1.5rem;
 }
 
 @mixin ray-h2 {
   font-size: 2rem;
   line-height: 2.75rem;
-  margin-bottom: 1.5rem;
+  margin: 0 0 1.5rem;
 }
 
 @mixin ray-h3 {
   font-size: 1.5rem;
   line-height: 2.25rem;
-  margin-bottom: 1rem;
+  margin: 0 0 1rem;
 }
 
 @mixin ray-h4 {
   font-size: 1.25rem;
   line-height: 2rem;
-  margin-bottom: 1rem;
+  margin: 0 0 1rem;
 }
 
 @mixin ray-h5 {
   font-size: 1rem;
   line-height: 1.75rem;
-  margin-bottom: 1rem;
+  margin: 0 0 1rem;
 }
 
 @mixin ray-h6 {
   font-size: 0.875rem;
   line-height: 1.5rem;
-  margin-bottom: 1rem;
+  margin: 0 0 1rem;
 }
 
 @mixin ray-body {
   font-size: 1rem;
   line-height: 1.75rem;
+  margin: 0 0 1rem;
 }
 
 @mixin ray-body-large {
   font-size: 1.25rem;
   line-height: 2rem;
+  margin: 0 0 1rem;
 }
 
 @mixin ray-body-small {
   font-size: 0.875rem;
   line-height: 1.5rem;
+  margin: 0 0 0.75rem;
 }
 
 @mixin ray-body-x-small {
   font-size: 0.75rem;
   line-height: 1.25rem;
+  margin: 0 0 0.5rem;
 }
 
 @include exports('ray-typography') {
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6 {
-    margin: 0;
-  }
-
   .#{$ray-class-prefix}text--display-1 {
     @include ray-display-1;
   }
@@ -142,17 +139,6 @@
     @include ray-h6;
   }
 
-  p {
-    font-weight: 400;
-    margin: 0;
-  }
-
-  p {
-    &:not(:last-child) {
-      margin-bottom: 1rem;
-    }
-  }
-
   .#{$ray-class-prefix}text--body-large {
     @include ray-body;
 
@@ -193,12 +179,32 @@
     font-weight: 400;
     font-family: $ray-font-stack-mono;
     color: $ray-color-text-medium;
+    margin: 0;
 
     &::before {
       content: '\2014\00A0';
     }
   }
 
+  ul,
+  ol {
+    margin: 0.75rem 0;
+    padding-left: 2rem;
+
+    ul,
+    ol {
+      margin: 0 0 0.25rem 0;
+    }
+  }
+
+  ul li {
+    list-style-type: circle;
+  }
+
+  ol {
+    list-style-type: decimal;
+  }
+
   .#{$ray-class-prefix}running-text {
     h1,
     h2,
@@ -241,20 +247,6 @@
       @extend .#{$ray-class-prefix}text--body-small;
     }
 
-    ul,
-    ol {
-      margin: 0.75rem 0;
-      padding-left: 2rem;
-    }
-
-    ul li {
-      list-style-type: circle;
-    }
-
-    ol li {
-      list-style-type: decimal;
-    }
-
     blockquote {
       @extend .#{$ray-class-prefix}blockquote;
     }

packages/docs-app/src/components/SideNav/side-nav.scss

@@ -24,6 +24,12 @@
   transition: left 0.15s ease;
   padding: 4rem 0;
 
+  ul {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+  }
+
   &--open {
     left: 0;
   }