adding

dist/components.html

@@ -123,7 +123,7 @@
                 <div class="bar">
                     <div class="bar__start">
                         <button class="button button--transparent">
-                            <svg class="icon fill-white marginless" aria-hidden="true">
+                            <svg class="icon fill-text-contrast marginless" aria-hidden="true">
                                 <use xlink:href="symbol-defs.svg#icon-close"></use>
                             </svg>
                         </button>
@@ -161,7 +161,7 @@
                 </h3>
                 <div class="bar">
                     <div class="bar__start marginless">
-                        <div class="tabs tabs--secondary">
+                        <div class="tabs tabs--contrast">
                             <a class="tabs__item tabs__item--selected">
                                 Tab A
                             </a>
@@ -209,7 +209,7 @@
                     <div class="bar">
                         <div class="bar__start">
                             <button type="button" class="button button--transparent">
-                                <svg class="icon fill-white" aria-hidden="true">
+                                <svg class="icon fill-text-contrast" aria-hidden="true">
                                     <use xlink:href="symbol-defs.svg#icon-expand"></use>
                                 </svg>
                             </button>
@@ -217,12 +217,12 @@
                         <div class="bar__main">Test</div>
                         <div class="bar__end">
                             <button type="button" class="button button--transparent">
-                                <svg class="icon fill-white" aria-hidden="true">
+                                <svg class="icon fill-text-contrast" aria-hidden="true">
                                     <use xlink:href="symbol-defs.svg#icon-edit"></use>
                                 </svg>
                             </button>
                             <button type="button" class="button button--transparent">
-                                <svg class="icon fill-white" aria-hidden="true">
+                                <svg class="icon fill-text-contrast" aria-hidden="true">
                                     <use xlink:href="symbol-defs.svg#icon-close"></use>
                                 </svg>
                             </button>

dist/plain-ui.css

@@ -1508,6 +1508,12 @@
  *  @return {number}
  *
  */
+/**
+ *
+ *
+ *  https://css-tricks.com/snippets/sass/str-replace-function/
+ *
+ */
 /**
  *  get value of key "default" in map
  *
@@ -1631,7 +1637,7 @@
   --success-contrast: #a6d0a6;
   --warning: #f0ad4e;
   --warning-contrast: #f8d9ac;
-  --background: #f9f9f9;
+  --background: #3e3e3e;
   --background-contrast: #ffffff;
   --border: #3e3e3e;
   --border-contrast: #ffffff;
@@ -2123,9 +2129,9 @@ h6, .h6 {
   text-decoration: none;
   font-family: "IBM Plex Mono", sans-serif;
   font-size: 1rem;
-  border: 1px solid var(--primary);
-  background-color: var(--white);
-  color: var(--primary);
+  border: 1px solid var(--border);
+  background-color: var(--background-contrast);
+  color: var(--text);
   border-radius: 2px;
   transition: background-color 0.1s;
   margin-bottom: 0.5em;
@@ -2141,33 +2147,33 @@ h6, .h6 {
 .button--small {
   font-size: 0.8rem;
 }
-.button--transparent {
-  margin: 0;
-  padding: 0;
-  border: none;
-  background: transparent;
-  border-radius: 0;
-}
-.button--transparent:focus, .button--transparent:active {
-  outline: none;
-}
 .button:hover, .button--selected {
   cursor: pointer;
   text-decoration: none;
   color: white;
-  background-color: var(--primary-active);
+  background-color: var(--active);
 }
 .button:focus, .button:active {
-  outline: 1px solid var(--primary-active);
+  outline: 1px solid var(--active);
 }
 .button:disabled {
   opacity: 0.5;
 }
 .button:disabled:hover {
   cursor: not-allowed;
-  border: 1px solid var(--primary);
-  background-color: white;
-  color: var(--primary);
+  border: 1px solid var(--border);
+  background-color: var(--background-contrast);
+  color: var(--border);
+}
+.button--transparent {
+  margin: 0;
+  padding: 0;
+  border: none;
+  background: transparent;
+  border-radius: 0;
+}
+.button--transparent:focus, .button--transparent:active {
+  outline: none;
 }
 .button--danger {
   border-color: var(--danger);
@@ -2176,7 +2182,7 @@ h6, .h6 {
   background-color: var(--danger);
 }
 .button--danger:focus, .button--danger:active {
-  outline: 2px solid var(--primary-active);
+  outline: 2px solid var(--active);
 }
 .button--success {
   border-color: var(--success);
@@ -2185,21 +2191,21 @@ h6, .h6 {
   background-color: var(--sucess);
 }
 .button--success:focus, .button--success:active {
-  outline: 2px solid var(--primary-active);
+  outline: 2px solid var(--active);
 }
 .button--outline {
   background-color: transparent;
 }
 .button--outline:hover {
-  color: var(--primary);
-  border-color: var(--primary-light);
+  color: var(--border);
+  border-color: var(--border-contrast);
   background-color: transparent;
 }
 .button--danger.button--outline:hover {
-  border-color: var(--danger-light);
+  border-color: var(--danger);
 }
 .button--success.button--outline:hover {
-  border-color: var(--success-light);
+  border-color: var(--success);
 }
 
 /**
@@ -2239,14 +2245,14 @@ input.field-text, textarea.field-text, select.field-choice {
   font-family: "IBM Plex Mono", sans-serif;
   font-size: 0.95rem;
   width: 100%;
-  border: 1px solid var(--primary-active);
-  background-color: var(--white);
+  border: 1px solid var(--active);
+  background-color: var(--background-contrast);
   border-radius: 2px;
   margin: 0.7rem 0 0;
 }
 input.field-text:focus, input.field-text:active, textarea.field-text:focus, textarea.field-text:active, select.field-choice:focus, select.field-choice:active {
   outline: 0;
-  border-color: var(--primary);
+  border-color: var(--border);
 }
 
 input.field-text, textarea.field-text {
@@ -2312,7 +2318,7 @@ input[type=radio].field-choice:checked ~ .field-choice__unchecked {
 }
 
 svg.field-choice__unchecked {
-  fill: var(--primary-active);
+  fill: var(--active);
 }
 
 svg.field-choice__checked {
@@ -2410,7 +2416,7 @@ svg.field-choice__checked {
 }
 .tabs__item:hover {
   cursor: pointer;
-  background-color: var(--primary-active);
+  background-color: var(--active);
   color: var(--text-contrast);
   border-top-left-radius: 2px;
   border-top-right-radius: 2px;
@@ -2426,7 +2432,7 @@ svg.field-choice__checked {
   color: var(--text-contrast);
 }
 .tabs--contrast .tabs__item:hover {
-  background-color: var(--primary-active-contrast);
+  background-color: var(--background-contrast);
   color: var(--text);
   border-radius: 0;
 }
@@ -2569,7 +2575,7 @@ svg.field-choice__checked {
 .bar {
   display: flex;
   min-height: 2.8em;
-  background-color: var(--primary);
+  background-color: var(--background);
   color: var(--text-contrast);
   border: 1px solid var(--primary);
   border-radius: 2px;
@@ -2632,13 +2638,13 @@ svg.field-choice__checked {
   font-size: 3rem;
 }
 .modal__title, .modal__body {
-  color: var(--white);
+  color: var(--text-contrast);
 }
 .modal__body {
   margin-bottom: 1.5rem;
 }
 .modal .button {
-  color: var(--white);
+  color: var(--text-contrast);
 }
 .modal:before {
   position: fixed;

src/scss/_functions.scss

@@ -21,14 +21,21 @@
     @return $value / ($value * 0 + 1);
 }
 
-@function str-replace($string, $search, $replace: '') {
-  $index: str-index($string, $search);
+/**
+ *
+ *
+ *  https://css-tricks.com/snippets/sass/str-replace-function/
+ *
+ */
+@function str-replace($string, $search, $replace: '')
+{
+    $index: str-index($string, $search);
 
-  @if $index {
-    @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
-  }
+    @if $index {
+        @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
+    }
 
-  @return $string;
+    @return $string;
 }
 
 

src/scss/_variables.scss

@@ -64,7 +64,7 @@ $plain-ui__primary-contrast: $plain-ui__primary !default;
 $plain-ui__active: lighten($plain-ui__primary, 20%) !default;
 $plain-ui__active-contrast: #ffffff !default;
 
-$plain-ui__background: #f9f9f9 !default;
+$plain-ui__background: $plain-ui__primary !default;
 $plain-ui__background-contrast: #ffffff !default;
 
 $plain-ui__body: #f9f9f9 !default;

src/scss/components/_bar.scss

@@ -18,7 +18,7 @@
     display: flex;
 
     min-height: 2.8em;
-    background-color: var(--primary);
+    background-color: var(--background);
     color: var(--text-contrast);
 
     border: $plain-ui__border;

src/scss/components/_button.scss

@@ -18,9 +18,9 @@
     font-family: $plain-ui__font-family;
     font-size: 1rem;
 
-    border: 1px solid var(--primary);
-    background-color: var(--white);
-    color: var(--primary);
+    border: 1px solid var(--border);
+    background-color: var(--background-contrast);
+    color: var(--text);
 
     border-radius: $plain-ui__border-radius;
     transition: background-color 0.1s;
@@ -38,27 +38,15 @@
         font-size: 0.8rem;
     }
 
-    &--transparent {
-        margin: 0;
-        padding: 0;
-        border: none;
-        background: transparent;
-        border-radius: 0;
-
-        &:focus, &:active {
-            outline: none;
-        }
-    }
-
     &:hover, &--selected {
         cursor: pointer;
         text-decoration: none;
         color: white;
-        background-color: var(--primary-active);
+        background-color: var(--active);
     }
 
     &:focus, &:active {
-        outline: 1px solid var(--primary-active);
+        outline: 1px solid var(--active);
     }
 
     &:disabled {
@@ -66,9 +54,21 @@
 
         &:hover {
             cursor: not-allowed;
-            border: 1px solid var(--primary);
-            background-color: white;
-            color: var(--primary);
+            border: 1px solid var(--border);
+            background-color: var(--background-contrast);
+            color: var(--border);
+        }
+    }
+
+    &--transparent {
+        margin: 0;
+        padding: 0;
+        border: none;
+        background: transparent;
+        border-radius: 0;
+
+        &:focus, &:active {
+            outline: none;
         }
     }
 
@@ -80,7 +80,7 @@
         }
 
         &:focus, &:active {
-            outline: 2px solid var(--primary-active);
+            outline: 2px solid var(--active);
         }
     }
 
@@ -92,7 +92,7 @@
         }
 
         &:focus, &:active {
-            outline: 2px solid var(--primary-active);
+            outline: 2px solid var(--active);
         }
     }
 
@@ -100,21 +100,21 @@
         background-color: transparent;
 
         &:hover {
-            color: var(--primary);
-            border-color: var(--primary-light);
+            color: var(--border);
+            border-color: var(--border-contrast);
             background-color: transparent;
         }
     }
 
     &--danger.button--outline {
         &:hover {
-            border-color: var(--danger-light);
+            border-color: var(--danger);
         }
     }
 
     &--success.button--outline {
         &:hover {
-            border-color: var(--success-light);
+            border-color: var(--success);
         }
     }
 }

src/scss/components/_field.scss

@@ -48,15 +48,15 @@ input.field-text, textarea.field-text, select.field-choice {
 
     width: 100%;
 
-    border: 1px solid var(--primary-active);
-    background-color: var(--white);
+    border: 1px solid var(--active);
+    background-color: var(--background-contrast);
     border-radius: $plain-ui__border-radius;
 
     margin: 0.7rem 0 0;
 
     &:focus, &:active {
         outline: 0;
-        border-color: var(--primary);
+        border-color: var(--border);
     }
 }
 
@@ -125,7 +125,7 @@ input[type=radio].field-choice {
 }
 
 svg.field-choice__unchecked {
-    fill: var(--primary-active);
+    fill: var(--active);
 }
 
 svg.field-choice__checked {

src/scss/components/_modal.scss

@@ -50,7 +50,7 @@
     }
 
     &__title, &__body {
-        color: var(--white);
+        color: var(--text-contrast);
     }
 
     &__body {
@@ -58,7 +58,7 @@
     }
 
     .button {
-        color: var(--white);
+        color: var(--text-contrast);
     }
 
     &:before {

src/scss/components/_tabs.scss

@@ -38,7 +38,7 @@
 
         &:hover {
             cursor: pointer;
-            background-color: var(--primary-active);
+            background-color: var(--active);
             color: var(--text-contrast);
 
             border-top-left-radius: $plain-ui__border-radius;
@@ -58,7 +58,7 @@
             color: var(--text-contrast);
 
             &:hover {
-                background-color: var(--primary-active-contrast);
+                background-color: var(--background-contrast);
                 color: var(--text);
                 border-radius: 0;
             }