adding

dist/index.html

@@ -31,15 +31,17 @@
 
         <div class="grid">
             <div class="col-12">
-                <p>
-                    <span class="t-bold">Plain UI</span> is a simple UI Framework. It uses strong Utility Classes and has a few Components.
-                </p>
-                <p>
-                    Some ideas of this are based Work from the last 10 Years. But also Ideas from Frameworks TailwindCSS.
-                </p>
-                <p>
-                    The Basic Idea was a quick
-                </p>
+                <div class="content">
+                    <p>
+                        <span class="t-bold">Plain UI</span> is a simple UI Framework. It uses strong Utility Classes and has a few Components.
+                    </p>
+                    <p>
+                        Some ideas of this are based Work from the last 10 Years. But also Ideas from Frameworks TailwindCSS.
+                    </p>
+                    <p>
+                        The Basic Idea was a quick
+                    </p>
+                </div>
             </div>
         </div>
 

dist/plain-ui.css

@@ -1625,6 +1625,7 @@
   --black: #000000;
   --text: #363636;
   --background: #f9f9f9;
+  --border: #dfdfdf;
 }
 
 /**
@@ -1671,6 +1672,26 @@ legend {
   box-sizing: border-box;
 }
 
+body {
+  font-family: "IBM Plex Mono", sans-serif;
+  color: var(--text);
+  background-color: var(--background);
+  direction: ltr;
+  font-size: 1rem;
+  line-height: 1.618;
+}
+
+a {
+  color: var(--link);
+  transition: color 0.5s;
+}
+a:hover {
+  color: var(--link-hover);
+}
+a:focus {
+  outline: none;
+}
+
 main {
   display: block;
 }
@@ -1687,18 +1708,17 @@ table {
 }
 
 figure {
-  margin: 0 0 15px;
+  margin: 0 0 1rem;
 }
 
 figcaption {
-  margin: 10px 0;
+  margin: 0;
 }
 
 /**
  *  form elements
  *
  *
- *
  */
 button,
 input,
@@ -1708,30 +1728,34 @@ textarea {
   margin: 0;
 }
 
+fieldset {
+  margin: 0 0 1rem;
+}
+
 button,
 select {
   text-transform: none;
 }
 
-button,
 [type=button],
 [type=reset],
-[type=submit] {
+[type=submit],
+button {
   -webkit-appearance: button;
 }
 
-button::-moz-focus-inner,
 [type=button]::-moz-focus-inner,
 [type=reset]::-moz-focus-inner,
-[type=submit]::-moz-focus-inner {
+[type=submit]::-moz-focus-inner,
+button::-moz-focus-inner {
   border-style: none;
   padding: 0;
 }
 
-button:-moz-focusring,
 [type=button]:-moz-focusring,
 [type=reset]:-moz-focusring,
-[type=submit]:-moz-focusring {
+[type=submit]:-moz-focusring,
+button:-moz-focusring {
   outline: 1px dotted ButtonText;
 }
 
@@ -1771,7 +1795,7 @@ hr {
   height: 0;
   overflow: visible;
   border: 0;
-  border-top: 1px solid #b3b2af;
+  border-top: 1px solid var(--border);
   margin: 0 0 1rem;
 }
 
@@ -1788,8 +1812,8 @@ summary {
 }
 
 code,
-pre,
 kbd,
+pre,
 samp {
   font-family: "IBM Plex Mono", sans-serif;
   font-size: 1rem;
@@ -1804,14 +1828,6 @@ samp {
  *  @link https://github.com/tentakelfabrik/crispy-css
  *
  */
-/**
- *  typograhy
- *
- *  @author Björn Hase, Tentakelfabrik
- *  @license http://opensource.org/licenses/MIT The MIT License
- *  @link https://github.com/tentakelfabrik/crispy-css
- *
- */
 h1, .h1,
 h2, .h2,
 h3, .h3,
@@ -1821,7 +1837,7 @@ h6, .h6 {
   font-family: "IBM Plex Mono", sans-serif;
   font-weight: bold;
   line-height: 1.2;
-  margin: 0 0 15px;
+  margin: 0 0 1rem;
 }
 @media only screen and (min-width: 992px) {
   h1, .h1,
@@ -1830,7 +1846,7 @@ h3, .h3,
 h4, .h4,
 h5, .h5,
 h6, .h6 {
-    margin: 0 0 20px;
+    margin: 0 0 1.5rem;
   }
 }
 
@@ -1839,7 +1855,7 @@ h5 {
 }
 
 h6 {
-  line-height: 1.4;
+  line-height: 1.618;
 }
 
 h1, .h1 {
@@ -1896,137 +1912,107 @@ h6, .h6 {
   }
 }
 
-p {
-  margin: 0 0 15px;
+/**
+ *  Heading
+ *
+ *
+ *  @author Björn Hase, Tentakelfabrik
+ *  @license http://opensource.org/licenses/MIT The MIT License
+ *  @link https://github.com/tentakelfabrik/crispy-css
+ *
+ */
+.content {
+  /**
+   *  Prevent `sub` and `sup` elements from affecting the line height in
+   *  all browsers.
+   */
+  /**
+   *  blockquote
+   *
+   *
+   */
+  /**
+   *  lists
+   *
+   */
+}
+.content p {
+  margin: 0 0 1rem;
 }
-
-a,
-ins,
-u {
+.content a,
+.content ins,
+.content u {
   -webkit-text-decoration-skip: ink edges;
           text-decoration-skip: ink edges;
 }
-
-b,
-strong {
+.content b,
+.content strong {
   font-weight: bolder;
 }
-
-small {
+.content small {
   font-size: 80%;
 }
-
-/**
- *  Prevent `sub` and `sup` elements from affecting the line height in
- *  all browsers.
- */
-sub,
-sup {
+.content sub,
+.content sup {
   font-size: 70%;
   line-height: 0;
   position: relative;
   vertical-align: baseline;
 }
-
-sub {
+.content sub {
   bottom: -0.25em;
 }
-
-sup {
+.content sup {
   top: -0.5em;
 }
-
-abbr[title] {
+.content abbr[title] {
   border-bottom: 1px dotted;
   cursor: help;
   text-decoration: none;
 }
-
-mark {
+.content mark {
   padding: 0.25em;
 }
-
-/**
- *  blockquote
- *
- *
- */
-blockquote {
+.content blockquote {
   border-left: 1px solid #3e3e3e;
   margin-left: 0;
   padding: 5px 12px;
 }
-blockquote p:last-child {
+.content blockquote p:last-child {
   margin-bottom: 0;
 }
-
-/**
- *  lists
- *
- */
-dl,
-ol,
-ul {
+.content dl,
+.content ol,
+.content ul {
   padding: 0;
-  margin: 0 0 15px;
+  margin: 0 0 1rem;
 }
-
-ol,
-ul {
+.content ol,
+.content ul {
   margin-left: 1.5em;
 }
-
-ol ol,
-ul ul {
+.content ol ol,
+.content ul ul {
   margin-top: 0;
   margin-left: 1em;
 }
-
-ol {
+.content ol {
   list-style: decimal outside;
 }
-
-ul {
+.content ul {
   list-style: disc outside;
 }
-
-dl {
+.content dl {
   margin-left: 0.5em;
 }
-
-dd,
-dt {
+.content dd,
+.content dt {
   margin: 0;
 }
-
-dt {
+.content dt {
   font-weight: bold;
 }
 
-a {
-  color: var(--link);
-  transition: color 0.5s;
-}
-a:hover {
-  color: var(--link-hover);
-}
-a:focus {
-  outline: none;
-}
-
-/**
- *  body
- *
- */
-body {
-  font-family: "IBM Plex Mono", sans-serif;
-  color: var(--text);
-  background-color: var(--background);
-  direction: ltr;
-  font-size: 1rem;
-  line-height: 1.4;
-}
-
 /**
  *  <span class="badge">
  *     A
@@ -4869,7 +4855,7 @@ body {
 
 .badge {
   display: inline-block;
-  background-color: #3e3e3e;
+  background-color: var(--primary);
   color: white;
   font-size: 0.85rem;
   padding: 0.4em 0.8em;
@@ -5149,7 +5135,7 @@ svg.field-choice__checked {
   padding: 0.75em 1.1em;
   font-size: 0.7rem;
   background: #3e3e3e;
-  line-height: 1.4;
+  line-height: 1.618;
   margin: 0;
   color: white;
 }
@@ -5214,7 +5200,7 @@ img.media {
   display: flex;
   min-height: 2.8em;
   background-color: #3e3e3e;
-  color: white;
+  color: var(--white);
 }
 .bar .icon {
   font-size: 1.5rem;
@@ -5236,6 +5222,9 @@ img.media {
 .bar__start:last-child, .bar__main:last-child, .bar__end:last-child {
   margin-right: 0.75em;
 }
+.bar .button:active {
+  outline: none;
+}
 
 .tabs {
   display: flex;

spritemap.js

@@ -0,0 +1,13 @@
+(self["webpackChunkplain_ui"] = self["webpackChunkplain_ui"] || []).push([["spritemap"],{
+
+/***/ "?4e0c":
+/*!******************************!*\
+  !*** spritemap-dummy-module ***!
+  \******************************/
+/***/ (() => {
+
+
+
+/***/ })
+
+}]);

src/scss/_core.scss

@@ -11,38 +11,4 @@
 @import
     'core/normalize',
     'core/heading',
-    'core/typography';
-
-@include plain-ui__core__heading();
-@include plain-ui__core__typography();
-
-a {
-    color: var(--link);
-    transition: color 0.5s;
-
-    &:hover {
-        color: var(--link-hover);
-    }
-
-    &:focus {
-        outline: none;
-    }
-}
-
-/**
- *  body
- *
- */
-body {
-    font-family: $plain-ui__font-family;
-    color: var(--text);
-
-    background-color: var(--background);
-    direction: $plain-ui__direction;
-
-    font-size: $plain-ui__font-size;
-    //@include crispy__media-breakpoints('line-height', $crispy__line-height__breakpoints);
-
-    line-height: $plain-ui__line-height;
-    //@include crispy__media-breakpoints('font-size', $crispy__font-size-breakpoints);
-}
+    'core/content';

src/scss/_normalize.scss

@@ -1,175 +0,0 @@
-/**
- *  normalize
- *
- *  Thanks to https://necolas.github.io/normalize.css/, use a lot from them
- *
- *  @author Björn Hase, Tentakelfabrik
- *  @license http://opensource.org/licenses/MIT The MIT License
- *  @link https://github.com/tentakelfabrik/crispy-css
- *
- */
-
-@mixin crispy__core__normalize()
-{
-    html {
-        font-size: 100%;
-        line-height: 1.15; // Correct the line height in all browsers.
-        -webkit-text-size-adjust: 100%; // Prevent adjustments of font size after orientation changes in iOS.
-    }
-
-    body,
-    html {
-        margin: 0;
-        height: 100%;
-    }
-
-    html,
-    legend {
-        box-sizing: border-box;
-    }
-
-    main {
-        display: block; // Render the `main` element consistently in IE.
-    }
-
-    *,
-    *::after,
-    *::before {
-        box-sizing: inherit;
-    }
-
-    table {
-        border-collapse: collapse;
-        border-spacing: 0;
-    }
-
-    figure {
-        margin: $crispy__margin;
-        @include crispy__media-breakpoints('margin', $crispy__margin-breakpoints);
-    }
-
-    figcaption {
-        margin: 10px 0;
-    }
-
-
-    /**
-     *  form elements
-     *
-     *
-     */
-
-    // Remove the margin in Firefox and Safari.
-    button,
-    input,
-    optgroup,
-    select,
-    textarea {
-        margin: 0;
-    }
-
-    fieldset {
-        padding: $crispy__padding;
-    }
-
-    // Remove the inheritance of text transform in Firefox
-    button,
-    select {
-      text-transform: none;
-    }
-
-    // Correct the inability to style clickable types in iOS and Safari.
-    button,
-    [type="button"],
-    [type="reset"],
-    [type="submit"] {
-        -webkit-appearance: button;
-    }
-
-    // Remove the inner border and padding in Firefox.
-    button::-moz-focus-inner,
-    [type="button"]::-moz-focus-inner,
-    [type="reset"]::-moz-focus-inner,
-    [type="submit"]::-moz-focus-inner {
-        border-style: none;
-        padding: 0;
-    }
-
-    // Restore the focus styles unset by the previous rule.
-    button:-moz-focusring,
-    [type="button"]:-moz-focusring,
-    [type="reset"]:-moz-focusring,
-    [type="submit"]:-moz-focusring {
-        outline: 1px dotted ButtonText;
-    }
-
-    legend {
-        box-sizing: border-box; //Correct the text wrapping in Edge and IE.
-        display: table; // Correct the text wrapping in Edge and IE.
-        max-width: 100%; // Correct the text wrapping in Edge and IE.
-        padding: 0; // Remove the padding so developers are not caught out when they zero out `fieldset` elements in all browsers.
-        white-space: normal; // Correct the text wrapping in Edge and IE.
-    }
-
-    // Correct the cursor style of increment and decrement buttons in Chrome.
-    [type="number"]::-webkit-inner-spin-button,
-    [type="number"]::-webkit-outer-spin-button {
-        height: auto;
-    }
-
-    [type="search"] {
-        -webkit-appearance: textfield; // Correct the odd appearance in Chrome and Safari.
-        outline-offset: -2px; // Correct the outline style in Safari.
-    }
-
-    // Remove the inner padding in Chrome and Safari on macOS.
-    [type="search"]::-webkit-search-decoration {
-        -webkit-appearance: none;
-    }
-
-    ::-webkit-file-upload-button {
-        -webkit-appearance: button; // Correct the inability to style clickable types in iOS and Safari.
-        font: inherit; // Change font properties to `inherit` in Safari.
-    }
-
-
-    /**
-     * hr
-     *
-     */
-
-    hr {
-        box-sizing: content-box; // Add the correct box sizing in Firefox.
-        height: 0; // Add the correct box sizing in Firefox.
-        overflow: visible; // Show the overflow in Edge and IE.
-
-        border: 0;
-        border-top: 1px solid $crispy__color-secondary;
-        margin: 0.3em 0;
-    }
-
-    // Add the correct vertical alignment in Chrome, Firefox, and Opera.
-    progress {
-        vertical-align: baseline;
-    }
-
-    // Add the correct display in Firefox.
-    details {
-        display: block;
-    }
-
-    // Add the correct display in all browsers.
-    summary {
-       display: list-item;
-    }
-
-    code,
-    pre,
-    kbd,
-    samp {
-        font-family: $crispy__font-family-monospace;
-        font-size: $crispy__font-size-monospace;
-
-        @include crispy__media-breakpoints('font-size', $crispy__font-size-monospace__breakpoints);
-    }
-}

src/scss/_variables.scss

@@ -44,7 +44,7 @@ $plain-ui__font-sizes: (
     'big'    : $plain-ui__font-size * 3
 ) !default;
 
-$plain-ui__line-height: 1.4;
+$plain-ui__line-height: 1.618;
 $plain-ui__line-height__breakpoints: (
     $plain-ui__md: $plain-ui__golden-ratio
 ) !default;
@@ -89,6 +89,7 @@ $plain-ui__colors: (
     --black: #000000;
     --text: #{$plain-ui__text-light};
     --background: #{$plain-ui__background-light};
+    --border: #{$plain-ui__border-light};
 }
 
 /**
@@ -96,9 +97,9 @@ $plain-ui__colors: (
  *
  */
 
-$plain-ui__margin: 0 0 15px !default;
+$plain-ui__margin: 0 0 1rem !default;
 $plain-ui__margin-breakpoints: (
-    $plain-ui__md: 0 0 20px
+    $plain-ui__md: 0 0 1.5rem
 ) !default;
 
 $plain-ui__padding: 5px 12px !default;

src/scss/components/_badge.scss

@@ -11,7 +11,7 @@
     .badge {
         display: inline-block;
 
-        background-color: $plain-ui__primary-light;
+        background-color: var(--primary);
         color: white;
 
         font-size: 0.85rem;

src/scss/components/_bar.scss

@@ -12,7 +12,7 @@
 
         min-height: 2.8em;
         background-color: $plain-ui__primary-light;
-        color: white;
+        color: var(--white);
 
         .icon {
             font-size: 1.5rem;
@@ -39,5 +39,11 @@
                 margin-right: 0.75em;
             }
         }
+
+        .button {
+            &:active {
+                outline: none;
+            }
+        }
     }
 }

src/scss/core/_content.scss

@@ -8,9 +8,118 @@
  *
  */
 
-@mixin plain-ui__core__content()
-{
-    .content {
-        
+.content {
+
+    // paragraphs
+    p {
+        margin: $plain-ui__margin;
+        //@include crispy__media-breakpoints('margin', $plain-ui__margin-breakpoints);
+    }
+
+    // Semantic text elements
+    a,
+    ins,
+    u {
+        text-decoration-skip: ink edges;
+    }
+
+    // Add the correct font weight in Chrome, Edge, and Safari.
+    b,
+    strong {
+        font-weight: bolder;
+    }
+
+    // Add the correct font size in all browsers.
+    small {
+        font-size: 80%;
+    }
+
+    /**
+     *  Prevent `sub` and `sup` elements from affecting the line height in
+     *  all browsers.
+     */
+    sub,
+    sup {
+        font-size: 70%;
+        line-height: 0;
+        position: relative;
+        vertical-align: baseline;
+    }
+
+    sub {
+        bottom: -0.25em;
+    }
+
+    sup {
+        top: -0.5em;
+    }
+
+    abbr[title] {
+        border-bottom: 1px dotted;
+        cursor: help;
+        text-decoration: none;
+    }
+
+    mark {
+        padding: 0.25em;
+    }
+
+    /**
+     *  blockquote
+     *
+     *
+     */
+    blockquote {
+        border-left: $plain-ui__border;
+        margin-left: 0;
+        padding: $plain-ui__padding;
+
+        p:last-child {
+            margin-bottom: 0;
+        }
+    }
+
+    /**
+     *  lists
+     *
+     */
+    dl,
+    ol,
+    ul {
+        padding: 0;
+        margin: $plain-ui__margin;
+        //@include crispy__media-breakpoints('margin', $plain-ui__margin-breakpoints);
+    }
+
+    ol,
+    ul {
+        margin-left: 1.5em;
+    }
+
+    ol ol,
+    ul ul {
+        margin-top: 0;
+        margin-left: 1em;
+    }
+
+    ol {
+        list-style: decimal outside;
+    }
+
+    ul {
+        list-style: disc outside;
+    }
+
+    dl {
+        margin-left: 0.5em;
+    }
+
+    dd,
+    dt {
+        margin: 0;
+    }
+
+    dt {
+        font-weight: bold;
     }
 }

src/scss/core/_heading.scss

@@ -8,52 +8,49 @@
  *
  */
 
-@mixin plain-ui__core__heading()
-{
-    $plain-ui__heading__font-sizes: (
-        'h1': $plain-ui__font-size * 2.5,
-        'h2': $plain-ui__font-size * 2,
-        'h3': $plain-ui__font-size * 1.75,
-        'h4': $plain-ui__font-size * 1.5,
-        'h5': $plain-ui__font-size * 1.25,
-        'h6': $plain-ui__font-size
-    ) !default;
-
-    $plain-ui__heading__font-sizes__breakpoints: (
-        $plain-ui__md: 1.2rem
-    ) !default;
-
-    $plain-ui__heading__font-weight: bold !default;
-    $plain-ui__heading__font-family: $plain-ui__font-family !default;
-    $plain-ui__heading__margin: $plain-ui__margin !default;
-    $plain-ui__heading__margin-breakpoints: $plain-ui__margin-breakpoints !default;
-    
-    h1, .h1,
-    h2, .h2,
-    h3, .h3,
-    h4, .h4,
-    h5, .h5,
-    h6, .h6 {
-        font-family: $plain-ui__heading__font-family;
-        font-weight: $plain-ui__heading__font-weight;
-        line-height: 1.2;
-
-        margin: $plain-ui__heading__margin;
-        @include plain-ui__breakpoints('margin', $plain-ui__heading__margin-breakpoints);
-    }
+$plain-ui__heading__font-sizes: (
+    'h1': $plain-ui__font-size * 2.5,
+    'h2': $plain-ui__font-size * 2,
+    'h3': $plain-ui__font-size * 1.75,
+    'h4': $plain-ui__font-size * 1.5,
+    'h5': $plain-ui__font-size * 1.25,
+    'h6': $plain-ui__font-size
+) !default;
 
-    h5 {
-        line-height: 1.4;
-    }
+$plain-ui__heading__font-sizes__breakpoints: (
+    $plain-ui__md: 1.2rem
+) !default;
 
-    h6 {
-        line-height: $plain-ui__line-height;
-    }
+$plain-ui__heading__font-weight: bold !default;
+$plain-ui__heading__font-family: $plain-ui__font-family !default;
+$plain-ui__heading__margin: $plain-ui__margin !default;
+$plain-ui__heading__margin-breakpoints: $plain-ui__margin-breakpoints !default;
+
+h1, .h1,
+h2, .h2,
+h3, .h3,
+h4, .h4,
+h5, .h5,
+h6, .h6 {
+    font-family: $plain-ui__heading__font-family;
+    font-weight: $plain-ui__heading__font-weight;
+    line-height: 1.2;
+
+    margin: $plain-ui__heading__margin;
+    @include plain-ui__breakpoints('margin', $plain-ui__heading__margin-breakpoints);
+}
+
+h5 {
+    line-height: 1.4;
+}
+
+h6 {
+    line-height: $plain-ui__line-height;
+}
 
-    @each $h, $font-size in $plain-ui__heading__font-sizes {
-        #{$h}, .#{$h} {
-            font-size: $font-size;
-            @include plain-ui__breakpoints-font-size($plain-ui__heading__font-sizes__breakpoints, $font-size, $plain-ui__font-size);
-        }
+@each $h, $font-size in $plain-ui__heading__font-sizes {
+    #{$h}, .#{$h} {
+        font-size: $font-size;
+        @include plain-ui__breakpoints-font-size($plain-ui__heading__font-sizes__breakpoints, $font-size, $plain-ui__font-size);
     }
 }

src/scss/core/_normalize.scss

@@ -9,142 +9,163 @@
  *
  */
 
+html {
+    font-size: 100%;
+    line-height: 1.15; // Correct the line height in all browsers.
+    -webkit-text-size-adjust: 100%; // Prevent adjustments of font size after orientation changes in iOS.
+}
 
-    html {
-        font-size: 100%;
-        line-height: 1.15; // Correct the line height in all browsers.
-        -webkit-text-size-adjust: 100%; // Prevent adjustments of font size after orientation changes in iOS.
-    }
+body,
+html {
+    margin: 0;
+    height: 100%;
+}
 
-    body,
-    html {
-        margin: 0;
-        height: 100%;
-    }
+html,
+legend {
+    box-sizing: border-box;
+}
 
-    html,
-    legend {
-        box-sizing: border-box;
-    }
+body {
+    font-family: $plain-ui__font-family;
+    color: var(--text);
 
-    main {
-        display: block; // Render the `main` element consistently in IE.
-    }
+    background-color: var(--background);
+    direction: $plain-ui__direction;
 
-    *,
-    *::after,
-    *::before {
-        box-sizing: inherit;
-    }
+    font-size: $plain-ui__font-size;
+    //@include crispy__media-breakpoints('line-height', $crispy__line-height__breakpoints);
 
-    table {
-        border-collapse: collapse;
-        border-spacing: 0;
-    }
+    line-height: $plain-ui__line-height;
+    //@include crispy__media-breakpoints('font-size', $crispy__font-size-breakpoints);
+}
+
+a {
+    color: var(--link);
+    transition: color 0.5s;
 
-    figure {
-        margin: $plain-ui__margin;
+    &:hover {
+        color: var(--link-hover);
     }
 
-    figcaption {
-        margin: 10px 0;
+    &:focus {
+        outline: none;
     }
+}
 
+main {
+    display: block; // Render the `main` element consistently in IE.
+}
 
-    /**
-     *  form elements
-     *
-     *
-     *
-     */
-
-    // Remove the margin in Firefox and Safari.
-    button,
-    input,
-    optgroup,
-    select,
-    textarea {
-        margin: 0;
-    }
+*,
+*::after,
+*::before {
+    box-sizing: inherit;
+}
 
-    fieldset {
-        //padding: $plain-ui__padding;
-    }
+table {
+    border-collapse: collapse;
+    border-spacing: 0;
+}
 
-    // Remove the inheritance of text transform in Firefox
-    button,
-    select {
-      text-transform: none;
-    }
+figure {
+    margin: $plain-ui__margin;
+}
 
-    // Correct the inability to style clickable types in iOS and Safari.
-    button,
-    [type="button"],
-    [type="reset"],
-    [type="submit"] {
-        -webkit-appearance: button;
-    }
+figcaption {
+    margin: 0;
+}
 
-    // Remove the inner border and padding in Firefox.
-    button::-moz-focus-inner,
-    [type="button"]::-moz-focus-inner,
-    [type="reset"]::-moz-focus-inner,
-    [type="submit"]::-moz-focus-inner {
-        border-style: none;
-        padding: 0;
-    }
+/**
+ *  form elements
+ *
+ *
+ */
 
-    // Restore the focus styles unset by the previous rule.
-    button:-moz-focusring,
-    [type="button"]:-moz-focusring,
-    [type="reset"]:-moz-focusring,
-    [type="submit"]:-moz-focusring {
-        outline: 1px dotted ButtonText;
-    }
+// Remove the margin in Firefox and Safari.
+button,
+input,
+optgroup,
+select,
+textarea {
+    margin: 0;
+}
 
-    legend {
-        box-sizing: border-box; //Correct the text wrapping in Edge and IE.
-        display: table; // Correct the text wrapping in Edge and IE.
-        max-width: 100%; // Correct the text wrapping in Edge and IE.
-        padding: 0; // Remove the padding so developers are not caught out when they zero out `fieldset` elements in all browsers.
-        white-space: normal; // Correct the text wrapping in Edge and IE.
-    }
+fieldset {
+    margin: $plain-ui__margin;
+}
 
-    // Correct the cursor style of increment and decrement buttons in Chrome.
-    [type="number"]::-webkit-inner-spin-button,
-    [type="number"]::-webkit-outer-spin-button {
-        height: auto;
-    }
+// Remove the inheritance of text transform in Firefox
+button,
+select {
+    text-transform: none;
+}
 
-    [type="search"] {
-        -webkit-appearance: textfield; // Correct the odd appearance in Chrome and Safari.
-        outline-offset: -2px; // Correct the outline style in Safari.
-    }
+// Correct the inability to style clickable types in iOS and Safari.
+[type="button"],
+[type="reset"],
+[type="submit"],
+button {
+    -webkit-appearance: button;
+}
 
-    // Remove the inner padding in Chrome and Safari on macOS.
-    [type="search"]::-webkit-search-decoration {
-        -webkit-appearance: none;
-    }
+// Remove the inner border and padding in Firefox.
+[type="button"]::-moz-focus-inner,
+[type="reset"]::-moz-focus-inner,
+[type="submit"]::-moz-focus-inner,
+button::-moz-focus-inner {
+    border-style: none;
+    padding: 0;
+}
 
-    ::-webkit-file-upload-button {
-        -webkit-appearance: button; // Correct the inability to style clickable types in iOS and Safari.
-        font: inherit; // Change font properties to `inherit` in Safari.
-    }
+// Restore the focus styles unset by the previous rule.
+[type="button"]:-moz-focusring,
+[type="reset"]:-moz-focusring,
+[type="submit"]:-moz-focusring,
+button:-moz-focusring {
+    outline: 1px dotted ButtonText;
+}
 
+legend {
+    box-sizing: border-box; //Correct the text wrapping in Edge and IE.
+    display: table; // Correct the text wrapping in Edge and IE.
+    max-width: 100%; // Correct the text wrapping in Edge and IE.
+    padding: 0; // Remove the padding so developers are not caught out when they zero out `fieldset` elements in all browsers.
+    white-space: normal; // Correct the text wrapping in Edge and IE.
+}
 
-    /**
-     * hr
-     *
-     */
+// Correct the cursor style of increment and decrement buttons in Chrome.
+[type="number"]::-webkit-inner-spin-button,
+[type="number"]::-webkit-outer-spin-button {
+    height: auto;
+}
 
+[type="search"] {
+    -webkit-appearance: textfield; // Correct the odd appearance in Chrome and Safari.
+    outline-offset: -2px; // Correct the outline style in Safari.
+}
+
+// Remove the inner padding in Chrome and Safari on macOS.
+[type="search"]::-webkit-search-decoration {
+    -webkit-appearance: none;
+}
+
+::-webkit-file-upload-button {
+    -webkit-appearance: button; // Correct the inability to style clickable types in iOS and Safari.
+    font: inherit; // Change font properties to `inherit` in Safari.
+}
+
+/**
+ * hr
+ *
+ */
 hr {
     box-sizing: content-box; // Add the correct box sizing in Firefox.
     height: 0; // Add the correct box sizing in Firefox.
     overflow: visible; // Show the overflow in Edge and IE.
-
     border: 0;
-    border-top: 1px solid $plain-ui__secondary;
-    margin: 0 0 1rem;
+    border-top: 1px solid var(--border);
+    margin: $plain-ui__margin;
 }
 
 // Add the correct vertical alignment in Chrome, Firefox, and Opera.
@@ -163,11 +184,10 @@ summary {
 }
 
 code,
-pre,
 kbd,
+pre,
 samp {
     font-family: $plain-ui__font-family;
     font-size: $plain-ui__font-size;
-
-    //@include crispy__media-breakpoints('font-size', $plain-ui__font-size-monospace__breakpoints);
+    // @TODO
 }

src/scss/core/_typography.scss

@@ -1,130 +0,0 @@
-/**
- *  typograhy
- *
- *  @author Björn Hase, Tentakelfabrik
- *  @license http://opensource.org/licenses/MIT The MIT License
- *  @link https://github.com/tentakelfabrik/crispy-css
- *
- */
-
-@mixin plain-ui__core__typography()
-{
-    // paragraphs
-    p {
-        margin: $plain-ui__margin;
-        //@include crispy__media-breakpoints('margin', $plain-ui__margin-breakpoints);
-    }
-
-    // Semantic text elements
-    a,
-    ins,
-    u {
-        text-decoration-skip: ink edges;
-    }
-
-    // Add the correct font weight in Chrome, Edge, and Safari.
-    b,
-    strong {
-        font-weight: bolder;
-    }
-
-    // Add the correct font size in all browsers.
-    small {
-        font-size: 80%;
-    }
-
-    /**
-     *  Prevent `sub` and `sup` elements from affecting the line height in
-     *  all browsers.
-     */
-
-    sub,
-    sup {
-      font-size: 70%;
-      line-height: 0;
-      position: relative;
-      vertical-align: baseline;
-    }
-
-    sub {
-      bottom: -0.25em;
-    }
-
-    sup {
-      top: -0.5em;
-    }
-
-    abbr[title] {
-        border-bottom: 1px dotted;
-        cursor: help;
-        text-decoration: none;
-    }
-
-    mark {
-        padding: 0.25em;
-    }
-
-
-    /**
-     *  blockquote
-     *
-     *
-     */
-
-    blockquote {
-        border-left: $plain-ui__border;
-        margin-left: 0;
-        padding: $plain-ui__padding;
-
-        p:last-child {
-            margin-bottom: 0;
-        }
-    }
-
-
-    /**
-     *  lists
-     *
-     */
-
-    dl,
-    ol,
-    ul {
-        padding: 0;
-
-        margin: $plain-ui__margin;
-        //@include crispy__media-breakpoints('margin', $plain-ui__margin-breakpoints);
-    }
-
-    ol,
-    ul {
-        margin-left: 1.5em;
-    }
-
-    ol ol,
-    ul ul {
-        margin-top: 0;
-        margin-left: 1em;
-    }
-
-    ol {
-        list-style: decimal outside;
-    }
-
-    ul {
-        list-style: disc outside;
-    }
-
-    dl {
-        margin-left: 0.5em;
-    }
-
-    dd,
-    dt {
-        margin: 0;
-    }
-
-    dt {
-        font-weight: bold;
-    }
-}