adding

dist/plain-ui.css

@@ -1616,6 +1616,7 @@
 :root {
   --primary: #3e3e3e;
   --primary-active: #585858;
+  --primary-dark: #0b0b0b;
   --link: #3e3e3e;
   --link-hover: #d95959;
   --danger: #d95959;
@@ -2027,8 +2028,9 @@ body {
 }
 
 /**
- *
- *
+ *  <span class="badge">
+ *     A
+ *  </span>
  *
  *
  */
@@ -2055,6 +2057,21 @@ body {
  *  </div>
  *
  */
+.hero {
+  position: relative;
+}
+.hero img {
+  width: 100%;
+  -o-object-fit: cover;
+     object-fit: cover;
+  -o-object-position: 50% 50%;
+     object-position: 50% 50%;
+}
+.hero--contain {
+  -o-object-fit: contain;
+     object-fit: contain;
+}
+
 /**
  *
  *
@@ -2107,6 +2124,63 @@ body {
  *
  *
  */
+.loading {
+  height: 60px;
+  width: 47px;
+  margin: 0 auto;
+  display: flex;
+  align-items: center;
+}
+.loading span {
+  display: block;
+  width: 15px;
+  height: 80px;
+  background-color: var(--primary);
+  -webkit-animation-name: plain-ui__loading-animation;
+          animation-name: plain-ui__loading-animation;
+  -webkit-animation-duration: 0.5s;
+          animation-duration: 0.5s;
+  -webkit-animation-iteration-count: infinite;
+          animation-iteration-count: infinite;
+  -webkit-animation-delay: 0.15s;
+          animation-delay: 0.15s;
+  border-top: 1px solid var(--primary-dark);
+  border-bottom: 1px solid var(--primary-dark);
+}
+.loading span:first-child {
+  margin-right: 1px;
+  -webkit-animation-delay: 0s;
+          animation-delay: 0s;
+}
+.loading span:last-child {
+  margin-left: 1px;
+  -webkit-animation-delay: 0.3s;
+          animation-delay: 0.3s;
+}
+
+@-webkit-keyframes plain-ui__loading-animation {
+  0% {
+    height: 60px;
+  }
+  50% {
+    height: 40px;
+  }
+  100% {
+    height: 60px;
+  }
+}
+
+@keyframes plain-ui__loading-animation {
+  0% {
+    height: 60px;
+  }
+  50% {
+    height: 40px;
+  }
+  100% {
+    height: 60px;
+  }
+}
 /**
  *  masonry
  *
@@ -4518,11 +4592,11 @@ body {
  *
  *
  */
-.border {
+.border, .badge {
   border: 1px solid #3e3e3e !important;
 }
 
-.border-round {
+.border-round, .badge {
   border-radius: 2px !important;
 }
 
@@ -4799,8 +4873,6 @@ body {
   color: white;
   font-size: 0.85rem;
   padding: 0.4em 0.8em;
-  border: 1px solid #3e3e3e;
-  border-radius: 2px;
 }
 .badge--round {
   display: inline-flex;
@@ -4876,11 +4948,11 @@ body {
 }
 .button--outline:hover {
   color: #3e3e3e;
-  border-color: #8b8b8b;
+  border-color: #a4a4a4;
   background-color: transparent;
 }
 .button--danger.button--outline:hover {
-  border-color: #e38383;
+  border-color: #ecacac;
 }
 
 .field-group {
@@ -5123,21 +5195,6 @@ img.media {
   color: white;
 }
 
-.hero {
-  position: relative;
-}
-.hero img {
-  width: 100%;
-  -o-object-fit: cover;
-     object-fit: cover;
-  -o-object-position: 50% 50%;
-     object-position: 50% 50%;
-}
-.hero--contain {
-  -o-object-fit: contain;
-     object-fit: contain;
-}
-
 .slider {
   position: relative;
   overflow-x: visible;
@@ -5284,63 +5341,6 @@ img.media {
   transform: scale(1);
 }
 
-.loading {
-  height: 60px;
-  width: 47px;
-  margin: 0 auto;
-  display: flex;
-  align-items: center;
-}
-.loading span {
-  display: block;
-  width: 15px;
-  height: 80px;
-  background: #d95959;
-  -webkit-animation-name: plain-ui__loading-animation;
-          animation-name: plain-ui__loading-animation;
-  -webkit-animation-duration: 0.5s;
-          animation-duration: 0.5s;
-  -webkit-animation-iteration-count: infinite;
-          animation-iteration-count: infinite;
-  -webkit-animation-delay: 0.15s;
-          animation-delay: 0.15s;
-  border-top: 1px solid #a62626;
-  border-bottom: 1px solid #a62626;
-}
-.loading span:first-child {
-  margin-right: 1px;
-  -webkit-animation-delay: 0s;
-          animation-delay: 0s;
-}
-.loading span:last-child {
-  margin-left: 1px;
-  -webkit-animation-delay: 0.3s;
-          animation-delay: 0.3s;
-}
-
-@-webkit-keyframes plain-ui__loading-animation {
-  0% {
-    height: 60px;
-  }
-  50% {
-    height: 40px;
-  }
-  100% {
-    height: 60px;
-  }
-}
-
-@keyframes plain-ui__loading-animation {
-  0% {
-    height: 60px;
-  }
-  50% {
-    height: 40px;
-  }
-  100% {
-    height: 60px;
-  }
-}
 .masonry {
   display: flex;
   width: 100%;

src/scss/_variables.scss

@@ -58,6 +58,7 @@ $plain-ui__line-height__breakpoints: (
 
 $plain-ui__primary-light: #3e3e3e !default;
 $plain-ui__primary-light-active: lighten($plain-ui__primary-light, 10%) !default;
+$plain-ui__primary-light-dark: darken($plain-ui__primary-light, 20%) !default;
 
 $plain-ui__secondary: #b3b2af !default;
 $plain-ui__success-light: #64ac64 !default;
@@ -79,6 +80,7 @@ $plain-ui__colors: (
 :root {
     --primary: #{$plain-ui__primary-light};
     --primary-active: #{$plain-ui__primary-light-active};
+    --primary-dark: #{$plain-ui__primary-light-dark};
     --link: #{$plain-ui__primary-light};
     --link-hover: #{$plain-ui__danger-light};
     --danger: #{$plain-ui__danger-light};

src/scss/components/_badge.scss

@@ -1,6 +1,7 @@
 /**
- *
- *
+ *  <span class="badge">
+ *     A
+ *  </span>
  *
  *
  */
@@ -16,8 +17,8 @@
         font-size: 0.85rem;
         padding: 0.4em 0.8em;
 
-        border: 1px solid $plain-ui__primary-light;
-        border-radius: 2px;
+        @extend .border;
+        @extend .border-round;
 
         &--round {
             display: inline-flex;

src/scss/components/_button.scss

@@ -8,7 +8,6 @@
 {
     .button {
         appearance: none;
-
         position: relative;
 
         display: inline-flex;
@@ -93,14 +92,14 @@
         &--outline {
             &:hover {
                 color: $plain-ui__primary-light;
-                border-color: lighten($plain-ui__primary-light, 30%);
+                border-color: lighten($plain-ui__primary-light, 40%);
                 background-color: transparent;
             }
         }
 
         &--danger.button--outline {
             &:hover {
-                border-color: lighten($plain-ui__danger-light, 10%);
+                border-color: lighten($plain-ui__danger-light, 20%);
             }
         }
     }

src/scss/components/_group.scss

@@ -1,6 +1,10 @@
 /**
  *
- *
+ *  <div class="group">
+ *      <span class="group__item">
+ *          A
+ *      </span>
+ *  </div>
  *
  *
  */
@@ -11,7 +15,7 @@
         &__item {
             width: auto;
             display: inline-block;
-            margin: 0 1em 1em;
+            margin: 0 1rem 1rem;
 
             &:last-child {
                 margin-right: 0;

src/scss/components/_hero.scss

@@ -5,19 +5,16 @@
  *
  */
 
-@mixin plain-ui__component__hero()
-{
-    .hero {
-        position: relative;
+.hero {
+    position: relative;
 
-        img {
-            width: 100%;
-            object-fit: cover;
-            object-position: 50% 50%;
-        }
+    img {
+        width: 100%;
+        object-fit: cover;
+        object-position: 50% 50%;
+    }
 
-        &--contain {
-            object-fit: contain;
-        }
+    &--contain {
+        object-fit: contain;
     }
 }

src/scss/components/_loading.scss

@@ -4,49 +4,44 @@
  *
  */
 
-$plain-ui__loading__background-color: $plain-ui__danger-light !default;
+.loading {
+    height: 60px;
+    width: 47px;
+    margin: 0 auto;
 
-@mixin plain-ui__component__loading()
-{
-    .loading {
-        height: 60px;
-        width: 47px;
-        margin: 0 auto;
+    display: flex;
+    align-items: center;
 
-        display: flex;
-        align-items: center;
+    span {
+        display: block;
+        width: 15px;
+        height: 80px;
 
-        span {
-            display: block;
-            width: 15px;
-            height: 80px;
+        background-color: var(--primary);
 
-            background: $plain-ui__loading__background-color;
+        animation-name: plain-ui__loading-animation;
+        animation-duration: 0.5s;
+        animation-iteration-count: infinite;
 
-            animation-name: plain-ui__loading-animation;
-            animation-duration: 0.5s;
-            animation-iteration-count: infinite;
+        animation-delay: 0.15s;
 
-            animation-delay: 0.15s;
+        border-top: 1px solid var(--primary-dark);
+        border-bottom: 1px solid var(--primary-dark);
 
-            border-top: 1px solid darken($plain-ui__loading__background-color, 20%);
-            border-bottom: 1px solid darken($plain-ui__loading__background-color, 20%);
-
-            &:first-child {
-                margin-right: 1px;
-                animation-delay: 0s;
-            }
+        &:first-child {
+            margin-right: 1px;
+            animation-delay: 0s;
+        }
 
-            &:last-child {
-                margin-left: 1px;
-                animation-delay: 0.3s;
-            }
+        &:last-child {
+            margin-left: 1px;
+            animation-delay: 0.3s;
         }
     }
+}
 
-    @keyframes plain-ui__loading-animation {
-        0%   {  height: 60px; }
-        50%  {  height: 40px; }
-        100% {  height: 60px; }
-    }
+@keyframes plain-ui__loading-animation {
+    0%   {  height: 60px; }
+    50%  {  height: 40px; }
+    100% {  height: 60px; }
 }

src/scss/plain-ui.scss

@@ -42,11 +42,9 @@
 @include plain-ui__component__panel();
 @include plain-ui__component__media();
 @include plain-ui__component__table();
-@include plain-ui__component__hero();
 @include plain-ui__component__slider();
 @include plain-ui__component__bar();
 @include plain-ui__component__tabs();
 @include plain-ui__component__modal();
-@include plain-ui__component__loading();
 
 @include plain-ui__layout__masonry();