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,
-    'white'      : #fff
+    'primary' : --primary,
+    '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,84 +8,83 @@
  *
  */
 
-@mixin plain-ui__component__modal()
-{
-    .modal {
-        position: fixed;
-        width: 100%;
-        height: 100%;
-        top: 0;
-        left: 0;
+.modal {
+    position: fixed;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
 
-        display: flex;
-        visibility: hidden;
-        transition: visibility 0s linear 0.5s;
+    display: flex;
 
-        padding: 1em;
-        z-index: 20;
+    // make sure that animation starts after visibility is not longer hidden
+    visibility: hidden;
+    transition: visibility 0s linear 0.5s;
 
-        align-items: center;
-        justify-content: center;
+    padding: 1rem;
+    z-index: 20;
 
-        &__inner {
-            position: relative;
-            z-index: 21;
+    align-items: center;
+    justify-content: center;
 
-            transition: transform 0.5s;
-            transform: scale(0);
+    &__inner {
+        position: relative;
+        z-index: 21;
 
-            max-width: 500px;
-        }
+        transition: transform 0.5s;
+        transform: scale(0);
 
-        &__title {
-            font-size: 2rem;
-            text-align: center;
-            white-space: pre-line;
+        max-width: 600px;
+    }
 
-            margin-bottom: 2rem;
+    &__title {
+        font-size: 2rem;
+        text-align: center;
+        white-space: pre-line;
 
-            .icon {
-                font-size: 3rem;
-            }
-        }
+        margin-bottom: 2rem;
 
-        &__title, &__body {
-            color: white;
+        .icon {
+            font-size: 3rem;
         }
+    }
 
-        &__body {
-            margin-bottom: 1.5rem;
-        }
+    &__title, &__body {
+        color: var(--white);
+    }
 
-        .button {
-            color: white;
-        }
+    &__body {
+        margin-bottom: 1.5rem;
+    }
 
-        &:before {
-            position: fixed;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            background-color: transparent;
-            transition: background-color 0.5s;
-            z-index: 19;
-            content: '';
-        }
+    .button {
+        color: var(--white);
+    }
 
-        &--open {
-            display: flex;
-            visibility: visible;
+    &:before {
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background-color: transparent;
+        transition: background-color 0.5s;
+        z-index: 19;
+        content: '';
+    }
+
+    &--open {
+        display: flex;
+        visibility: visible;
 
-            transition: visibility 0s linear 0s;
+        transition: visibility 0s linear 0s;
 
-            &:before {
-                background: rgba(0,0,0,.87);
-            }
+        &:before {
+            background: rgba(0,0,0,.87);
+        }
 
-            .modal__inner {
-                transform: scale(1);
-            }
+        .modal__inner {
+            transform: scale(1);
         }
     }
-}
+}

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);
+.panel {
+    border: 1px solid var(--primary);
+    border-radius: $plain-ui__border-radius;
+    background-color: var(--white);
 
-        &__buttons {
-            display: flex;
-            justify-content: end;
-            width: 100%;
-
-            button:last-child .icon {
-                margin-right: 0;
-            }
-        }
-
-        &__body {
-            padding: 0.25em 1em;
-        }
+    &__body {
+        padding: 0.25em 1em;
     }
+
+    // bar left, right, top, bottom
 }

src/scss/components/_progress.scss

@@ -1,9 +1,17 @@
 /**
  *
  *
- *  
+ *
  */
-@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();
+@include plain-ui__component__tabs();