change colors

dist/plain-ui.css

@@ -1614,12 +1614,14 @@
  *
  */
 :root {
-  --primary: #3e3e3e;
-  --primary-active: #585858;
-  --primary-dark: #0b0b0b;
-  --link: #3e3e3e;
-  --link-hover: #d95959;
+  --primary: #585858;
+  --primary-light: #585858;
+  --primary-active: #717171;
+  --primary-dark: #252525;
+  --link: #585858;
+  --link-hover: #ecacac;
   --danger: #d95959;
+  --danger-light: #ecacac;
   --success: #64ac64;
   --white: #ffffff;
   --black: #000000;
@@ -1974,7 +1976,7 @@ h6, .h6 {
   padding: 0.25em;
 }
 .content blockquote {
-  border-left: 1px solid #3e3e3e;
+  border-left: 1px solid #585858;
   margin-left: 0;
   padding: 5px 12px;
 }
@@ -2018,13 +2020,106 @@ h6, .h6 {
  *     A
  *  </span>
  *
+ *  @author Björn Hase, Tentakelfabrik
+ *  @license http://opensource.org/licenses/MIT The MIT License
+ *  @link https://github.com/tentakelfabrik/crispy-css
  *
  */
+.badge {
+  display: inline-block;
+  background-color: var(--primary);
+  color: var(--white);
+  font-size: 0.85rem;
+  padding: 0.4em 0.8em;
+}
+.badge--round {
+  display: inline-flex;
+  justify-content: center;
+  border-radius: 50%;
+  width: 2.5em;
+}
+
 /**
  *
  *
  *
  */
+.button {
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  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-radius: 2px;
+  transition: background-color 0.1s;
+  margin-bottom: 0.5em;
+  padding: 0 1.3em;
+  min-height: 2.8em;
+  width: 100%;
+}
+@media only screen and (min-width: 768px) {
+  .button {
+    width: auto;
+  }
+}
+.button--small {
+  font-size: 0.8rem;
+}
+.button--clearfix {
+  margin: 0;
+  padding: 0;
+  border: none;
+  background: transparent;
+}
+.button--clearfix:focus, .button--clearfix:active {
+  outline: none;
+}
+.button:hover, .button--selected {
+  cursor: pointer;
+  text-decoration: none;
+  color: white;
+  background-color: var(--primary-active);
+}
+.button:focus, .button:active {
+  outline: 1px solid var(--primary-active);
+}
+.button:disabled {
+  opacity: 0.5;
+}
+.button:disabled:hover {
+  cursor: not-allowed;
+  border: 1px solid var(--primary);
+  background-color: white;
+  color: var(--primary);
+}
+.button--danger {
+  border-color: var(--danger);
+}
+.button--danger:hover {
+  background-color: var(--danger);
+}
+.button--danger:focus, .button--danger:active {
+  outline: 2px solid var(--primary-active);
+}
+.button--outline {
+  background-color: transparent;
+}
+.button--outline:hover {
+  color: var(--primary);
+  border-color: var(--primary-light);
+  background-color: transparent;
+}
+.button--danger.button--outline:hover {
+  border-color: var(--danger-light);
+}
+
 /**
  *
  *
@@ -2103,6 +2198,36 @@ h6, .h6 {
  *
  *
  */
+.bar {
+  display: flex;
+  min-height: 2.8em;
+  background-color: #585858;
+  color: var(--white);
+}
+.bar .icon {
+  font-size: 1.5rem;
+}
+.bar__start {
+  justify-content: start;
+}
+.bar__main {
+  flex-grow: 1;
+}
+.bar__end {
+  justify-content: end;
+}
+.bar__start, .bar__main, .bar__end {
+  display: flex;
+  align-self: center;
+  margin-left: 0.75em;
+}
+.bar__start:last-child, .bar__main:last-child, .bar__end:last-child {
+  margin-right: 0.75em;
+}
+.bar .button:active, .bar .button:focus {
+  outline: none;
+}
+
 /**
  *  <figure class="media-figure">
  *      <img class="media__img" src="https://via.placeholder.com/150" />
@@ -2183,8 +2308,43 @@ h6, .h6 {
  *      </div>
  *  </div>
  *
+ *  @author Björn Hase, Tentakelfabrik
+ *  @license http://opensource.org/licenses/MIT The MIT License
+ *  @link https://github.com/tentakelfabrik/crispy-css
  *
  */
+.masonry {
+  display: flex;
+  width: 100%;
+  flex-flow: row wrap;
+}
+.masonry__item {
+  width: 100%;
+  height: 200px;
+  padding-left: 1px;
+  padding-bottom: 1px;
+}
+@media only screen and (min-width: 768px) {
+  .masonry__item {
+    height: 300px;
+  }
+  .masonry__item:nth-child(4n+1) {
+    width: 25%;
+  }
+  .masonry__item:nth-child(4n+2) {
+    width: 55%;
+  }
+  .masonry__item:nth-child(4n+3) {
+    width: 20%;
+  }
+  .masonry__item:nth-child(4n+4) {
+    width: 67%;
+  }
+  .masonry__item:nth-child(4n+5) {
+    width: 33%;
+  }
+}
+
 :root {
   --reflex-columns: 12;
   --reflex-grid-spacing: 15px;
@@ -4586,7 +4746,7 @@ h6, .h6 {
  *
  */
 .border, .badge {
-  border: 1px solid #3e3e3e !important;
+  border: 1px solid #585858 !important;
 }
 
 .border-round, .badge {
@@ -4824,94 +4984,6 @@ h6, .h6 {
      object-fit: cover;
 }
 
-.badge {
-  display: inline-block;
-  background-color: var(--primary);
-  color: white;
-  font-size: 0.85rem;
-  padding: 0.4em 0.8em;
-}
-.badge--round {
-  display: inline-flex;
-  justify-content: center;
-  border-radius: 50%;
-  width: 2.5em;
-}
-
-.button {
-  -webkit-appearance: none;
-     -moz-appearance: none;
-          appearance: none;
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-  text-decoration: none;
-  font-family: "IBM Plex Mono", sans-serif;
-  border: 1px solid #3e3e3e;
-  background-color: white;
-  color: #3e3e3e;
-  border-radius: 2px;
-  transition: background-color 0.1s;
-  margin-bottom: 0.5em;
-  padding: 0 1.3em;
-  min-height: 2.8em;
-  font-size: 1rem;
-  width: 100%;
-}
-@media only screen and (min-width: 768px) {
-  .button {
-    width: auto;
-  }
-}
-.button--small {
-  font-size: 0.8rem;
-}
-.button--outline {
-  background-color: transparent;
-}
-.button--no-style {
-  margin: 0;
-  padding: 0;
-  border: none;
-  background: transparent;
-}
-.button:hover, .button--selected {
-  cursor: pointer;
-  text-decoration: none;
-  color: white;
-  background-color: #585858;
-}
-.button:focus, .button:active {
-  outline: 1px solid #646464;
-}
-.button:disabled {
-  opacity: 0.5;
-}
-.button:disabled:hover {
-  cursor: not-allowed;
-  border: 1px solid #3e3e3e;
-  background-color: white;
-  color: #3e3e3e;
-}
-
-.button--danger {
-  border-color: #d95959;
-}
-.button--danger:hover {
-  background-color: #d95959;
-}
-.button--danger:focus, .button--danger:active {
-  outline: 2px solid #e79797;
-}
-.button--outline:hover {
-  color: #3e3e3e;
-  border-color: #a4a4a4;
-  background-color: transparent;
-}
-.button--danger.button--outline:hover {
-  border-color: #ecacac;
-}
-
 .field-group {
   margin-bottom: 1.2em;
 }
@@ -4922,10 +4994,10 @@ h6, .h6 {
   fill: #64ac64;
 }
 .field-group--error input.field-text, .field-group--error textarea.field-text {
-  border-color: #d95959;
+  border-color: #ecacac;
 }
 .field-group--error .icon {
-  fill: #d95959;
+  fill: #ecacac;
 }
 
 .field-label {
@@ -4943,14 +5015,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 #a4a4a4;
+  border: 1px solid #bebebe;
   background-color: white;
   border-radius: 2px;
   margin: 0.7em 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: #3e3e3e;
+  border-color: #585858;
 }
 
 input.field-text, textarea.field-text {
@@ -5015,7 +5087,7 @@ input[type=radio].field-choice:checked ~ .field-choice__unchecked {
 }
 
 svg.field-choice__unchecked {
-  fill: #a4a4a4;
+  fill: #bebebe;
 }
 
 svg.field-choice__checked {
@@ -5030,17 +5102,17 @@ svg.field-choice__checked {
 }
 
 .field-error {
-  color: #d95959;
+  color: #ecacac;
 }
 
 .panel {
-  border: 1px solid #3e3e3e;
+  border: 1px solid #585858;
   border-radius: 2px;
   background: #fff;
 }
 .panel__header {
   display: flex;
-  background-color: #3e3e3e;
+  background-color: #585858;
   color: white;
   padding: 0.8em 1.2em;
   line-height: 1.6em;
@@ -5079,14 +5151,14 @@ svg.field-choice__checked {
   margin: 0;
   display: inline-block;
   line-height: 0;
-  border: 1px solid #3e3e3e;
+  border: 1px solid #585858;
   border-radius: 2px;
   overflow: hidden;
 }
 .figure__caption {
   padding: 0.75em 1.1em;
   font-size: 0.7rem;
-  background: #3e3e3e;
+  background: #585858;
   line-height: 1.618;
   margin: 0;
   color: white;
@@ -5097,37 +5169,37 @@ svg.field-choice__checked {
 
 img.media {
   border-radius: 2px;
-  border: 1px solid #3e3e3e;
+  border: 1px solid #585858;
   width: 100%;
   height: auto;
 }
 
 .table {
   width: 100%;
-  border: 1px solid #cacaca;
+  border: 1px solid #e4e4e4;
   background: white;
 }
 .table--striped tr:nth-child(even) {
-  background-color: #fdfdfd;
+  background-color: white;
 }
 .table--scroll {
   overflow-x: auto;
 }
 .table td {
-  color: #3e3e3e;
+  color: #585858;
 }
 .table td,
 .table th {
   text-align: left;
-  border-bottom: 1px solid #cacaca;
+  border-bottom: 1px solid #e4e4e4;
   padding: 0.5em 1.25em;
 }
 .table th {
   color: white;
-  background-color: #3e3e3e;
+  background-color: #585858;
 }
 .table tr:hover {
-  background-color: #585858;
+  background-color: #717171;
 }
 .table tr:hover td {
   color: white;
@@ -5148,36 +5220,6 @@ img.media {
   flex-shrink: 0;
 }
 
-.bar {
-  display: flex;
-  min-height: 2.8em;
-  background-color: #3e3e3e;
-  color: var(--white);
-}
-.bar .icon {
-  font-size: 1.5rem;
-}
-.bar__start {
-  justify-content: start;
-}
-.bar__main {
-  flex-grow: 1;
-}
-.bar__end {
-  justify-content: end;
-}
-.bar__start, .bar__main, .bar__end {
-  display: flex;
-  align-self: center;
-  margin-left: 0.75em;
-}
-.bar__start:last-child, .bar__main:last-child, .bar__end:last-child {
-  margin-right: 0.75em;
-}
-.bar .button:active {
-  outline: none;
-}
-
 .tabs {
   display: flex;
   flex-direction: column;
@@ -5197,8 +5239,8 @@ img.media {
   background-color: white;
   transition: background-color 0.1s;
   background-color: white;
-  color: #3e3e3e;
-  border: 1px solid #3e3e3e;
+  color: #585858;
+  border: 1px solid #585858;
   border-bottom-width: 0;
   width: 100%;
 }
@@ -5212,9 +5254,9 @@ img.media {
 }
 .tabs__item:hover, .tabs__item--selected {
   cursor: pointer;
-  background-color: #585858;
+  background-color: #717171;
   color: white;
-  border-color: #585858;
+  border-color: #717171;
 }
 .tabs__item:last-child {
   border-bottom-width: 1px;
@@ -5281,35 +5323,3 @@ img.media {
 .modal--open .modal__inner {
   transform: scale(1);
 }
-
-.masonry {
-  display: flex;
-  width: 100%;
-  flex-flow: row wrap;
-}
-.masonry__item {
-  height: 200px;
-  padding-left: 1px;
-  padding-bottom: 1px;
-  width: 100%;
-}
-@media only screen and (min-width: 768px) {
-  .masonry__item {
-    height: 300px;
-  }
-  .masonry__item:nth-child(4n+1) {
-    width: 25%;
-  }
-  .masonry__item:nth-child(4n+2) {
-    width: 55%;
-  }
-  .masonry__item:nth-child(4n+3) {
-    width: 20%;
-  }
-  .masonry__item:nth-child(4n+4) {
-    width: 67%;
-  }
-  .masonry__item:nth-child(4n+5) {
-    width: 33%;
-  }
-}

src/scss/_variables.scss

@@ -56,14 +56,16 @@ $plain-ui__line-height__breakpoints: (
  *
  */
 
-$plain-ui__primary-light: #3e3e3e !default;
+$plain-ui__primary: #3e3e3e !default;
+$plain-ui__primary-light: lighten($plain-ui__primary, 10%) !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;
 $plain-ui__warning: #f0ad4e !default;
-$plain-ui__danger-light: #d95959 !default;
+$plain-ui__danger: #d95959 !default;
+$plain-ui__danger-light: lighten($plain-ui__danger, 20%);
 $plain-ui__info: #0090d4 !default;
 
 $plain-ui__background-light: #f9f9f9 !default;
@@ -79,11 +81,13 @@ $plain-ui__colors: (
 
 :root {
     --primary: #{$plain-ui__primary-light};
+    --primary-light: #{$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};
+    --danger: #{$plain-ui__danger};
+    --danger-light: #{$plain-ui__danger-light};
     --success: #{$plain-ui__success-light};
     --white: #ffffff;
     --black: #000000;

src/scss/components/_badge.scss

@@ -3,29 +3,29 @@
  *     A
  *  </span>
  *
+ *  @author Björn Hase, Tentakelfabrik
+ *  @license http://opensource.org/licenses/MIT The MIT License
+ *  @link https://github.com/tentakelfabrik/crispy-css
  *
  */
 
-@mixin plain-ui__component__badge()
-{
-    .badge {
-        display: inline-block;
+.badge {
+    display: inline-block;
 
-        background-color: var(--primary);
-        color: white;
+    background-color: var(--primary);
+    color: var(--white);
 
-        font-size: 0.85rem;
-        padding: 0.4em 0.8em;
+    font-size: 0.85rem;
+    padding: 0.4em 0.8em;
 
-        @extend .border;
-        @extend .border-round;
+    @extend .border;
+    @extend .border-round;
 
-        &--round {
-            display: inline-flex;
-            justify-content: center;
+    &--round {
+        display: inline-flex;
+        justify-content: center;
 
-            border-radius: 50%;
-            width: 2.5em;
-        }
+        border-radius: 50%;
+        width: 2.5em;
     }
 }

src/scss/components/_bar.scss

@@ -5,45 +5,42 @@
  *
  */
 
-@mixin plain-ui__component__bar()
-{
-    .bar {
-        display: flex;
+.bar {
+    display: flex;
 
-        min-height: 2.8em;
-        background-color: $plain-ui__primary-light;
-        color: var(--white);
+    min-height: 2.8em;
+    background-color: $plain-ui__primary-light;
+    color: var(--white);
 
-        .icon {
-            font-size: 1.5rem;
-        }
+    .icon {
+        font-size: 1.5rem;
+    }
 
-        &__start {
-            justify-content: start;
-        }
+    &__start {
+        justify-content: start;
+    }
 
-        &__main {
-            flex-grow: 1;
-        }
+    &__main {
+        flex-grow: 1;
+    }
 
-        &__end {
-            justify-content: end;
-        }
+    &__end {
+        justify-content: end;
+    }
 
-        &__start, &__main, &__end {
-            display: flex;
-            align-self: center;
-            margin-left: 0.75em;
+    &__start, &__main, &__end {
+        display: flex;
+        align-self: center;
+        margin-left: 0.75em;
 
-            &:last-child {
-                margin-right: 0.75em;
-            }
+        &:last-child {
+            margin-right: 0.75em;
         }
+    }
 
-        .button {
-            &:active {
-                outline: none;
-            }
+    .button {
+        &:active, &:focus {
+            outline: none;
         }
     }
 }

src/scss/components/_button.scss

@@ -4,103 +4,95 @@
  *
  */
 
-@mixin plain-ui__component__button()
-{
-    .button {
-        appearance: none;
-        position: relative;
-
-        display: inline-flex;
-        align-items: center;
-        text-decoration: none;
+.button {
+    appearance: none;
+    position: relative;
 
-        font-family: $plain-ui__font-family;
+    display: inline-flex;
+    align-items: center;
+    text-decoration: none;
 
-        border: 1px solid $plain-ui__primary-light;
-        background-color: white;
-        color: $plain-ui__primary-light;
+    font-family: $plain-ui__font-family;
+    font-size: 1rem;
 
-        border-radius: $plain-ui__border-radius;
-        transition: background-color 0.1s;
+    border: 1px solid var(--primary);
+    background-color: var(--white);
+    color: var(--primary);
 
-        margin-bottom: 0.5em;
-        padding: 0 1.3em;
-        min-height: 2.8em;
+    border-radius: $plain-ui__border-radius;
+    transition: background-color 0.1s;
 
-        font-size: 1rem;
+    margin-bottom: 0.5em;
+    padding: 0 1.3em;
+    min-height: 2.8em;
+    width: 100%;
 
-        width: 100%;
+    @include plain-ui__media-sm() {
+        width: auto;
+    }
 
-        @include plain-ui__media-sm() {
-            width: auto;
-        }
+    &--small {
+        font-size: 0.8rem;
+    }
 
-        &--small {
-            font-size: 0.8rem;
-        }
+    &--clearfix {
+        margin: 0;
+        padding: 0;
+        border: none;
+        background: transparent;
 
-        &--outline {
-            background-color: transparent;
-        }
-
-        &--no-style {
-            margin: 0;
-            padding: 0;
-            border: none;
-            background: transparent;
+        &:focus, &:active {
+            outline: none;
         }
+    }
 
-        &:hover, &--selected {
-            cursor: pointer;
-            text-decoration: none;
-            color: white;
-            background-color: $plain-ui__primary-light-active;
-        }
+    &:hover, &--selected {
+        cursor: pointer;
+        text-decoration: none;
+        color: white;
+        background-color: var(--primary-active);
+    }
 
-        &:focus, &:active {
-            outline: 1px solid lighten($plain-ui__primary-light, 15%);
-        }
+    &:focus, &:active {
+        outline: 1px solid var(--primary-active);
+    }
 
-        &:disabled {
-            opacity: 0.5;
+    &:disabled {
+        opacity: 0.5;
 
-            &:hover {
-                cursor: not-allowed;
-                border: 1px solid $plain-ui__primary-light;
-                background-color: white;
-                color: $plain-ui__primary-light;
-            }
+        &:hover {
+            cursor: not-allowed;
+            border: 1px solid var(--primary);
+            background-color: white;
+            color: var(--primary);
         }
     }
-}
 
-@mixin plain-ui__component__button-colors()
-{
-    .button {
-        &--danger {
-            border-color: $plain-ui__danger-light;
+    &--danger {
+        border-color: var(--danger);
 
-            &:hover {
-                background-color: $plain-ui__danger-light;
-            }
+        &:hover {
+            background-color: var(--danger);
+        }
 
-            &:focus, &:active {
-                outline: 2px solid lighten($plain-ui__danger-light, 15%);
-            }
+        &:focus, &:active {
+            outline: 2px solid var(--primary-active);
         }
+    }
+
+    &--outline {
+        background-color: transparent;
 
-        &--outline {
-            &:hover {
-                color: $plain-ui__primary-light;
-                border-color: lighten($plain-ui__primary-light, 40%);
-                background-color: transparent;
-            }
+        &:hover {
+            color: var(--primary);
+            border-color: var(--primary-light);
+            background-color: transparent;
         }
+    }
 
-        &--danger.button--outline {
-            &:hover {
-                border-color: lighten($plain-ui__danger-light, 20%);
-            }
+    &--danger.button--outline {
+        &:hover {
+            border-color: var(--danger-light);
         }
     }
 }

src/scss/layout/_masonry.scss

@@ -7,37 +7,41 @@
  *      </div>
  *  </div>
  *
+ *  @author Björn Hase, Tentakelfabrik
+ *  @license http://opensource.org/licenses/MIT The MIT License
+ *  @link https://github.com/tentakelfabrik/crispy-css
  *
  */
 
-@mixin plain-ui__layout__masonry()
-{
-    $plain-ui__masonry_sizes: (
-        1: 25%,
-        2: 55%,
-        3: 20%,
-        4: 67%,
-        5: 33%
-    ) !default;
+$plain-ui__masonry_sizes: (
+    1: 25%,
+    2: 55%,
+    3: 20%,
+    4: 67%,
+    5: 33%
+) !default;
 
-    .masonry {
-        display: flex;
-        width: 100%;
-        flex-flow: row wrap;
+$plain-ui__masonry_height: 200px !default;
+$plain-ui__masonry_height--sm: 300px !default;
+
+.masonry {
+    display: flex;
+    width: 100%;
+    flex-flow: row wrap;
 
-        &__item {
-            height: 200px;
-            padding-left: 1px;
-            padding-bottom: 1px;
-            width: 100%;
+    &__item {
+        width: 100%;
+        height: $plain-ui__masonry_height;
+        padding-left: 1px;
+        padding-bottom: 1px;
 
-            @include plain-ui__media-sm() {
-                height: 300px;
+        @include plain-ui__media-sm() {
+            height: $plain-ui__masonry_height--sm;
 
-                @each $index, $size in $plain-ui__masonry_sizes {
-                    &:nth-child(4n+#{$index}) {
-                        width: #{$size};
-                    }
+            // add width from data
+            @each $index, $size in $plain-ui__masonry_sizes {
+                &:nth-child(4n+#{$index}) {
+                    width: #{$size};
                 }
             }
         }

src/scss/plain-ui.scss

@@ -29,21 +29,12 @@
     'helpers/sizing',
     'helpers/spacing';
 
-
 @include plain-ui__helpers__core();
 
-@include plain-ui__component__badge();
-
-@include plain-ui__component__button();
-@include plain-ui__component__button-colors();
-
 @include plain-ui__component__field();
 @include plain-ui__component__panel();
 @include plain-ui__component__media();
 @include plain-ui__component__table();
 @include plain-ui__component__slider();
-@include plain-ui__component__bar();
 @include plain-ui__component__tabs();
-@include plain-ui__component__modal();
-
-@include plain-ui__layout__masonry();
+@include plain-ui__component__modal();