feat: enhance HTML elements with a broader support overall and on usi…

…ng them with `dnb-spacing`

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();

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';

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();
+  }
+}

packages/dnb-ui-lib/src/style/elements/blockquote.scss

@@ -67,6 +67,11 @@
     }
   }
 }
+@mixin blockquoteTag() {
+  blockquote {
+    @include blockquoteStyle();
+  }
+}
 
 .dnb-blockquote {
   @include blockquoteStyle();

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();

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();
 }

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();

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();

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();

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();

packages/dnb-ui-lib/src/style/elements/textarea.scss

@@ -63,6 +63,11 @@
     }
   }
 }
+@mixin textareaTag() {
+  textarea {
+    @include textareaStyle();
+  }
+}
 
 .dnb-textarea {
   @include textareaStyle();

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,