change

dist/fonts/stylesheet.css

@@ -1 +1,24 @@
-@font-face{font-family:'IBM Plex Mono';src:url('IBMPlexMono.eot');src:url('IBMPlexMono.eot?#iefix') format('embedded-opentype'),url('IBMPlexMono.woff2') format('woff2'),url('IBMPlexMono.woff') format('woff'),url('IBMPlexMono.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}@font-face{font-family:'IBM Plex Mono';src:url('IBMPlexMono-Bold.eot');src:url('IBMPlexMono-Bold.eot?#iefix') format('embedded-opentype'),url('IBMPlexMono-Bold.woff2') format('woff2'),url('IBMPlexMono-Bold.woff') format('woff'),url('IBMPlexMono-Bold.ttf') format('truetype');font-weight:700;font-style:normal;font-display:swap}
+@font-face {
+    font-family: 'IBM Plex Mono';
+    src: url('IBMPlexMono.eot');
+    src: url('IBMPlexMono.eot?#iefix') format('embedded-opentype'),
+        url('IBMPlexMono.woff2') format('woff2'),
+        url('IBMPlexMono.woff') format('woff'),
+        url('IBMPlexMono.ttf') format('truetype');
+    font-weight: normal;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'IBM Plex Mono';
+    src: url('IBMPlexMono-Bold.eot');
+    src: url('IBMPlexMono-Bold.eot?#iefix') format('embedded-opentype'),
+        url('IBMPlexMono-Bold.woff2') format('woff2'),
+        url('IBMPlexMono-Bold.woff') format('woff'),
+        url('IBMPlexMono-Bold.ttf') format('truetype');
+    font-weight: bold;
+    font-style: normal;
+    font-display: swap;
+}
+

dist/index.html

@@ -89,7 +89,7 @@
                 </button>
                 <button class="button">
                     Default
-                    <svg class="icon icon--success" aria-hidden="true">
+                    <svg class="icon fill-success" aria-hidden="true">
                         <use xlink:href="symbol-defs.svg#icon-check"></use>
                     </svg>
                 </button>
@@ -128,7 +128,7 @@
             <div class="col-12">
                 <div class="bar">
                     <div class="bar__start">
-                        <button class="button button--no-style">
+                        <button class="button button--transparent">
                             <svg class="icon fill-white marginless" aria-hidden="true">
                                 <use xlink:href="symbol-defs.svg#icon-close"></use>
                             </svg>
@@ -219,7 +219,7 @@
                 <div class="panel">
                     <div class="bar">
                         <div class="bar__start">
-                            <button type="button" class="button button--no-style">
+                            <button type="button" class="button button--transparent">
                                 <svg class="icon fill-white" aria-hidden="true">
                                     <use xlink:href="symbol-defs.svg#icon-expand"></use>
                                 </svg>
@@ -227,12 +227,12 @@
                         </div>
                         <div class="bar__main">Test</div>
                         <div class="bar__end">
-                            <button type="button" class="button button--no-style">
+                            <button type="button" class="button button--transparent">
                                 <svg class="icon fill-white" aria-hidden="true">
                                     <use xlink:href="symbol-defs.svg#icon-edit"></use>
                                 </svg>
                             </button>
-                            <button type="button" class="button button--no-style">
+                            <button type="button" class="button button--transparent">
                                 <svg class="icon fill-white" aria-hidden="true">
                                     <use xlink:href="symbol-defs.svg#icon-close"></use>
                                 </svg>

spritemap.js

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

src/scss/_variables.scss

@@ -75,8 +75,9 @@ $plain-ui__border-light: #dfdfdf !default;
 $plain-ui__link-light: #fff !default;
 
 $plain-ui__colors: (
-    'primary'    : $plain-ui__primary-light,
+    'primary' : --primary,
-    'white'      : #fff
+    'success' : --success,
+    'white'   : --white
 ) !default;
 
 :root {

src/scss/components/_button.scss

@@ -35,7 +35,7 @@
         font-size: 0.8rem;
     }
 
-    &--clearfix {
+    &--transparent {
         margin: 0;
         padding: 0;
         border: none;
@@ -80,6 +80,18 @@
         }
     }
 
+    &--success {
+        border-color: var(--success);
+
+        &:hover {
+            background-color: var(--sucess);
+        }
+
+        &:focus, &:active {
+            outline: 2px solid var(--primary-active);
+        }
+    }
+
     &--outline {
         background-color: transparent;
 
@@ -95,4 +107,10 @@
             border-color: var(--danger-light);
         }
     }
+
+    &--success.button--outline {
+        &:hover {
+            border-color: var(--success-light);
+        }
+    }
 }

src/scss/components/_modal.scss

@@ -8,8 +8,6 @@
  *
  */
 
-@mixin plain-ui__component__modal()
-{
 .modal {
     position: fixed;
     width: 100%;
@@ -18,10 +16,12 @@
     left: 0;
 
     display: flex;
+
+    // make sure that animation starts after visibility is not longer hidden
     visibility: hidden;
     transition: visibility 0s linear 0.5s;
 
-        padding: 1em;
+    padding: 1rem;
     z-index: 20;
 
     align-items: center;
@@ -34,7 +34,7 @@
         transition: transform 0.5s;
         transform: scale(0);
 
-            max-width: 500px;
+        max-width: 600px;
     }
 
     &__title {
@@ -50,7 +50,7 @@
     }
 
     &__title, &__body {
-            color: white;
+        color: var(--white);
     }
 
     &__body {
@@ -58,7 +58,7 @@
     }
 
     .button {
-            color: white;
+        color: var(--white);
     }
 
     &:before {
@@ -88,4 +88,3 @@
         }
     }
 }
-}

src/scss/components/_panel.scss

@@ -4,25 +4,14 @@
  *
  */
 
-@mixin plain-ui__component__panel()
-{
 .panel {
     border: 1px solid var(--primary);
     border-radius: $plain-ui__border-radius;
-        background: var(--white);
+    background-color: var(--white);
-
-        &__buttons {
-            display: flex;
-            justify-content: end;
-            width: 100%;
-
-            button:last-child .icon {
-                margin-right: 0;
-            }
-        }
 
     &__body {
         padding: 0.25em 1em;
     }
-    }
+
+    // bar left, right, top, bottom
 }

src/scss/components/_progress.scss

@@ -3,7 +3,15 @@
  *
  *
  */
-@mixin component__loading()
-{
 
+.progress {
+    height: 40px;
+    width: 100%;
+
+    border: 1px solid var(--primary);
+
+    &__inner {
+        margin: 1px;
+        height: 100%;
+    }
 }

src/scss/plain-ui.scss

@@ -28,13 +28,12 @@
 
     'helpers/core',
     'helpers/sizing',
-    'helpers/spacing';
+    'helpers/spacing',
+    'helpers/colors';
 
 @include plain-ui__helpers__core();
 
-@include plain-ui__component__panel();
 @include plain-ui__component__media();
 @include plain-ui__component__table();
 @include plain-ui__component__slider();
 @include plain-ui__component__tabs();
-@include plain-ui__component__modal();