From b4f95881ba0d3e3ae84a6f7f2921fc728e85fabf Mon Sep 17 00:00:00 2001
From: Tobias <tobias@tujo.no>
Date: Tue, 19 Feb 2019 09:41:51 +0100
Subject: [PATCH] feat: enhance HTML elements with a broader support overall
 and on using them with `dnb-spacing`

---
 .../dnb-ui-lib/src/style/dnb-ui-elements.scss | 100 +++---------------
 .../src/style/elements/all-elements.scss      |   1 +
 .../dnb-ui-lib/src/style/elements/anchor.scss |   6 ++
 .../src/style/elements/blockquote.scss        |   5 +
 .../dnb-ui-lib/src/style/elements/code.scss   |  10 ++
 .../dnb-ui-lib/src/style/elements/form.scss   |  19 ++--
 .../dnb-ui-lib/src/style/elements/image.scss  |   5 +
 .../dnb-ui-lib/src/style/elements/label.scss  |   5 +
 .../dnb-ui-lib/src/style/elements/lists.scss  |  21 +++-
 .../dnb-ui-lib/src/style/elements/table.scss  |   5 +
 .../src/style/elements/textarea.scss          |   5 +
 .../src/style/elements/typography.scss        |  53 +++++++++-
 .../theme-ui/helper-classes/ui-spacing.scss   |  45 ++++++--
 13 files changed, 178 insertions(+), 102 deletions(-)

diff --git a/packages/dnb-ui-lib/src/style/dnb-ui-elements.scss b/packages/dnb-ui-lib/src/style/dnb-ui-elements.scss
index b4345a22669..14795473407 100644
--- a/packages/dnb-ui-lib/src/style/dnb-ui-elements.scss
+++ b/packages/dnb-ui-lib/src/style/dnb-ui-elements.scss
@@ -9,96 +9,28 @@
 // import all elements
 @import './elements/all-elements.scss';
 
-a {
-  @include anchorStyle();
-}
-label {
-  @include labelStyle();
-}
-img {
-  @include imageStyle();
-}
-blockquote {
-  @include blockquoteStyle();
-}
-textarea {
-  @include textareaStyle();
-}
+// div
+@include anchorTag();
+@include imageTag();
+@include blockquoteTag();
+@include hrTag();
 
 // typography
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  @include headingsStyle();
-}
-h1 {
-  @include h1Style();
-}
-h2 {
-  @include h2Style();
-}
-h3 {
-  @include h3Style();
-}
-h4 {
-  @include h4Style();
-}
-h5 {
-  @include h5Style();
-}
-h6 {
-  @include h6Style();
-}
-p {
-  @include paragraphStyle();
-}
-b,
-strong {
-  font-weight: var(--font-weight-medium);
-}
-small {
-  font-size: var(--font-size-small); // 14px
-}
-p > small,
-h2 > small,
-h3 > small,
-h4 > small,
-h5 > small,
-h6 > small {
-  line-height: 1; // for vertical alignment, we have to have no line-height
-}
+@include typographyTags();
 
 // lists
-ul {
-  @include ulStyle();
-}
-ol {
-  @include ulStyle();
-}
-dl {
-  @include dlStyle();
-}
+@include ulTag();
+@include olTag();
+@include dlTag();
 
-// tables
-table {
-  @include tableStyle();
-}
+// table
+@include tableTag();
 
 // form
-label,
-input,
-form,
-fieldset {
-  @include formStyle();
-}
+@include formTag();
+@include labelTag();
+@include textareaTag();
 
 // additional
-code {
-  @include codeStyle();
-}
-pre {
-  @include preStyle();
-}
+@include codeTag();
+@include preTag();
diff --git a/packages/dnb-ui-lib/src/style/elements/all-elements.scss b/packages/dnb-ui-lib/src/style/elements/all-elements.scss
index 944a4526527..113be85039e 100644
--- a/packages/dnb-ui-lib/src/style/elements/all-elements.scss
+++ b/packages/dnb-ui-lib/src/style/elements/all-elements.scss
@@ -13,3 +13,4 @@
 @import './form.scss';
 @import './code.scss';
 @import './image.scss';
+@import './hr.scss';
diff --git a/packages/dnb-ui-lib/src/style/elements/anchor.scss b/packages/dnb-ui-lib/src/style/elements/anchor.scss
index 5155e6c726e..0e06b64252c 100644
--- a/packages/dnb-ui-lib/src/style/elements/anchor.scss
+++ b/packages/dnb-ui-lib/src/style/elements/anchor.scss
@@ -239,3 +239,9 @@ a.dnb-button {
   // reset the anchor style
   @include resetAnimationStyle();
 }
+
+@mixin anchorTag() {
+  a {
+    @include anchorStyle();
+  }
+}
diff --git a/packages/dnb-ui-lib/src/style/elements/blockquote.scss b/packages/dnb-ui-lib/src/style/elements/blockquote.scss
index f3b6f96a37a..0efccff6a81 100644
--- a/packages/dnb-ui-lib/src/style/elements/blockquote.scss
+++ b/packages/dnb-ui-lib/src/style/elements/blockquote.scss
@@ -67,6 +67,11 @@
     }
   }
 }
+@mixin blockquoteTag() {
+  blockquote {
+    @include blockquoteStyle();
+  }
+}
 
 .dnb-blockquote {
   @include blockquoteStyle();
diff --git a/packages/dnb-ui-lib/src/style/elements/code.scss b/packages/dnb-ui-lib/src/style/elements/code.scss
index 903566c3ca7..96ee208f1d7 100644
--- a/packages/dnb-ui-lib/src/style/elements/code.scss
+++ b/packages/dnb-ui-lib/src/style/elements/code.scss
@@ -39,6 +39,16 @@
     padding: 1rem;
   }
 }
+@mixin codeTag() {
+  code {
+    @include codeStyle();
+  }
+}
+@mixin preTag() {
+  pre {
+    @include preStyle();
+  }
+}
 
 .dnb-code {
   @include codeStyle();
diff --git a/packages/dnb-ui-lib/src/style/elements/form.scss b/packages/dnb-ui-lib/src/style/elements/form.scss
index 0fbbc470fd1..a829b8b36f6 100644
--- a/packages/dnb-ui-lib/src/style/elements/form.scss
+++ b/packages/dnb-ui-lib/src/style/elements/form.scss
@@ -1,16 +1,21 @@
 /*
- * Form
+ * Forms
  *
  */
 
 @mixin formStyle() {
-  font-size: 1em; // 16px
-  line-height: 1.5em;
+  font-size: 1rem; // 16px
+  line-height: 1.5rem;
+}
+@mixin formTag() {
+  // label,
+  // input,
+  // fieldset,
+  form {
+    @include formStyle();
+  }
 }
 
-.dnb-label,
-.dnb-input,
-.dnb-form,
-.dnb-fieldset {
+.dnb-form {
   @include formStyle();
 }
diff --git a/packages/dnb-ui-lib/src/style/elements/image.scss b/packages/dnb-ui-lib/src/style/elements/image.scss
index 4b14984a5f5..2a22e85e29e 100644
--- a/packages/dnb-ui-lib/src/style/elements/image.scss
+++ b/packages/dnb-ui-lib/src/style/elements/image.scss
@@ -8,6 +8,11 @@
   max-width: 100%;
   border-style: none;
 }
+@mixin imageTag() {
+  img {
+    @include imageStyle();
+  }
+}
 
 .dnb-image {
   @include imageStyle();
diff --git a/packages/dnb-ui-lib/src/style/elements/label.scss b/packages/dnb-ui-lib/src/style/elements/label.scss
index cab53f3d45a..6d6ff716ee7 100644
--- a/packages/dnb-ui-lib/src/style/elements/label.scss
+++ b/packages/dnb-ui-lib/src/style/elements/label.scss
@@ -15,6 +15,11 @@
     color: var(--color-sea-green-alt-30); // TODO: Not defined
   }
 }
+@mixin labelTag() {
+  label {
+    @include labelStyle();
+  }
+}
 
 .dnb-label {
   @include labelStyle();
diff --git a/packages/dnb-ui-lib/src/style/elements/lists.scss b/packages/dnb-ui-lib/src/style/elements/lists.scss
index 6994ea2355f..0f930b4df90 100644
--- a/packages/dnb-ui-lib/src/style/elements/lists.scss
+++ b/packages/dnb-ui-lib/src/style/elements/lists.scss
@@ -23,6 +23,9 @@
     word-wrap: break-all;
   }
 }
+@mixin olStyle() {
+  @include ulStyle();
+}
 @mixin dlStyle() {
   margin: 0;
   padding: 0;
@@ -40,11 +43,27 @@
     padding-left: 2rem;
   }
 }
+@mixin ulTag() {
+  ul {
+    @include ulStyle();
+  }
+}
+@mixin olTag() {
+  ol {
+    @include olStyle();
+  }
+}
+@mixin dlTag() {
+  dl {
+    @include dlStyle();
+  }
+}
+
 .dnb-ul {
   @include ulStyle();
 }
 .dnb-ol {
-  @include ulStyle();
+  @include olStyle();
 }
 .dnb-dl {
   @include dlStyle();
diff --git a/packages/dnb-ui-lib/src/style/elements/table.scss b/packages/dnb-ui-lib/src/style/elements/table.scss
index 010af0516aa..45ba93d6a92 100644
--- a/packages/dnb-ui-lib/src/style/elements/table.scss
+++ b/packages/dnb-ui-lib/src/style/elements/table.scss
@@ -60,6 +60,11 @@
     border-bottom: 1px solid var(--color-mint-green-50);
   }
 }
+@mixin tableTag() {
+  table {
+    @include tableStyle();
+  }
+}
 
 .dnb-table {
   @include tableStyle();
diff --git a/packages/dnb-ui-lib/src/style/elements/textarea.scss b/packages/dnb-ui-lib/src/style/elements/textarea.scss
index 210e7faeac3..272600ad185 100644
--- a/packages/dnb-ui-lib/src/style/elements/textarea.scss
+++ b/packages/dnb-ui-lib/src/style/elements/textarea.scss
@@ -63,6 +63,11 @@
     }
   }
 }
+@mixin textareaTag() {
+  textarea {
+    @include textareaStyle();
+  }
+}
 
 .dnb-textarea {
   @include textareaStyle();
diff --git a/packages/dnb-ui-lib/src/style/elements/typography.scss b/packages/dnb-ui-lib/src/style/elements/typography.scss
index d65a45c4e9f..183a217b81c 100644
--- a/packages/dnb-ui-lib/src/style/elements/typography.scss
+++ b/packages/dnb-ui-lib/src/style/elements/typography.scss
@@ -3,7 +3,7 @@
  *
  */
 
-@mixin headingsStyle() {
+@mixin typographyStyles() {
   margin: 0;
   padding: 0;
 
@@ -68,6 +68,52 @@
     font-style: normal; // to avoid cursive
   }
 }
+@mixin typographyTags() {
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    @include typographyStyles();
+  }
+  h1 {
+    @include h1Style();
+  }
+  h2 {
+    @include h2Style();
+  }
+  h3 {
+    @include h3Style();
+  }
+  h4 {
+    @include h4Style();
+  }
+  h5 {
+    @include h5Style();
+  }
+  h6 {
+    @include h6Style();
+  }
+  p {
+    @include paragraphStyle();
+  }
+  b,
+  strong {
+    font-weight: var(--font-weight-medium);
+  }
+  small {
+    font-size: var(--font-size-small); // 14px
+  }
+  p > small,
+  h2 > small,
+  h3 > small,
+  h4 > small,
+  h5 > small,
+  h6 > small {
+    line-height: 1; // for vertical alignment, we have to have no line-height
+  }
+}
 
 .dnb-h1,
 .dnb-h2,
@@ -76,12 +122,15 @@
 .dnb-h4,
 .dnb-h5,
 .dnb-h6 {
-  @include headingsStyle();
+  @include typographyStyles();
 }
 
 .dnb-small {
   font-size: var(--font-size-small); // 14px
 }
+
+// do not set this for h1, like ".dnb-h1 > .dnb-small"
+.dnb-p > small,
 .dnb-p > .dnb-small,
 .dnb-h2 > .dnb-small,
 .dnb-h3 > .dnb-small,
diff --git a/packages/dnb-ui-lib/src/style/themes/theme-ui/helper-classes/ui-spacing.scss b/packages/dnb-ui-lib/src/style/themes/theme-ui/helper-classes/ui-spacing.scss
index 7e64efcd64b..0001efb4d9b 100644
--- a/packages/dnb-ui-lib/src/style/themes/theme-ui/helper-classes/ui-spacing.scss
+++ b/packages/dnb-ui-lib/src/style/themes/theme-ui/helper-classes/ui-spacing.scss
@@ -13,7 +13,11 @@
 
   .dnb-h1,
   .dnb-h2,
+  .dnb-h3,
   .dnb-lead,
+  .dnb-h4,
+  .dnb-h5,
+  .dnb-h6,
   h1,
   h2,
   h3,
@@ -23,13 +27,21 @@
     margin: 2rem 0 1rem;
   }
 
+  .dnb-h1,
   h1 {
     margin: 3rem 0 2.5rem;
   }
+  .dnb-h2,
   h2 {
     margin: 3rem 0 1rem;
   }
 
+  .dnb-p,
+  .dnb-ul,
+  .dnb-ol,
+  .dnb-dl,
+  .dnb-blockquote,
+  .dnb-pre,
   p,
   ul,
   ol,
@@ -41,21 +53,27 @@
   }
 
   ul li,
-  ol li {
+  ol li,
+  .dnb-ul li,
+  .dnb-ol li {
     margin-top: 1rem;
     margin-bottom: 1rem;
+    & > p {
+      margin-top: 1rem;
+    }
   }
-  li > p {
-    margin-top: 1rem;
-  }
-  dl dt {
+  dl dt,
+  .dnb-dl dt {
     margin-top: 1rem;
   }
-  dl dd {
+  dl dd,
+  .dnb-dl dd {
     margin-bottom: 1rem;
   }
 
-  table {
+  table,
+  .dnb-table {
+    /* stylelint-disable-next-line */
     p,
     ul,
     ol,
@@ -66,7 +84,18 @@
     }
   }
 
-  blockquote p:last-child {
+  blockquote p:last-child,
+  .dnb-blockquote p:last-child {
     margin-bottom: 0;
   }
+
+  .dnb-hr,
+  hr {
+    margin-bottom: 1rem;
+  }
+
+  .dnb-section.dnb-section--content {
+    margin-top: 1rem;
+    margin-bottom: 2rem;
+  }
 }