Revamp buttons

source/_patterns/00-atoms/00-global/00-brand-colors.mustache

@@ -13,6 +13,10 @@
 	</li>
 	<li>
 		<span class="sg-swatch bg-green-200"></span>
-		<span class="sg-label">Green 200<br>#1c8c3b</span>
+		<span class="sg-label">Green 200<br>#26b34b</span>
+	</li>
+	<li>
+		<span class="sg-swatch bg-green-300"></span>
+		<span class="sg-label">Green 300<br>#22a244</span>
 	</li>
 </ul>

source/_patterns/00-atoms/03-buttons/02-button-colors.mustache

+<div class="space-y-2">
+  <div>
+    {{> atoms-basic-button(classes: "btn--black") }}
+    {{> atoms-basic-button(classes: "btn--grey-450") }}
+    {{> atoms-basic-button(classes: "btn--grey-125") }}
+    {{> atoms-basic-button(classes: "btn--white") }}
+    {{> atoms-basic-button(classes: "btn--white btn--fading") }}
+    {{> atoms-basic-button(classes: "btn--green-100") }}
+  </div>
+  <div>
+    {{> atoms-icon-button(classes: "btn--black") }}
+    {{> atoms-icon-button(classes: "btn--grey-450") }}
+    {{> atoms-icon-button(classes: "btn--grey-125") }}
+    {{> atoms-icon-button(classes: "btn--white") }}
+    {{> atoms-icon-button(classes: "btn--white btn--fading") }}
+    {{> atoms-icon-button(classes: "btn--green-100") }}
+  </div>
+</div>

source/_patterns/00-atoms/03-buttons/04-button-with-hover-effect.mustache

+<div class="space-y-2">
+  <div>
+    {{> atoms-basic-button(classes: "btn--black btn--hoveractive") }}
+    {{> atoms-basic-button(classes: "btn--grey-450 btn--hoveractive") }}
+    {{> atoms-basic-button(classes: "btn--grey-125 btn--hoveractive") }}
+    {{> atoms-basic-button(classes: "btn--white btn--hoveractive") }}
+    {{> atoms-basic-button(classes: "btn--white btn--fading btn--hoveractive") }}
+    {{> atoms-basic-button(classes: "btn--green-100 btn--hoveractive") }}
+  </div>
+  <div>
+    {{> atoms-icon-button(classes: "btn--black btn--hoveractive") }}
+    {{> atoms-icon-button(classes: "btn--grey-450 btn--hoveractive") }}
+    {{> atoms-icon-button(classes: "btn--grey-125 btn--hoveractive") }}
+    {{> atoms-icon-button(classes: "btn--white btn--hoveractive") }}
+    {{> atoms-icon-button(classes: "btn--white btn--fading btn--hoveractive") }}
+    {{> atoms-icon-button(classes: "btn--green-100 btn--hoveractive") }}
+  </div>
+</div>

source/_patterns/00-atoms/03-buttons/button-colors.mustache

-<button class="btn">
-  <div class="btn__body">{{ cta }}</div>
-</button>
-
-<button class="btn btn--green">
-  <div class="btn__body">{{ cta }}</div>
-</button>
-
-<button class="btn btn--inverted">
-  <div class="btn__body">{{ cta }}</div>
-</button>
-
-<button class="btn btn--inverted btn--fading">
-  <div class="btn__body">{{ cta }}</div>
-</button>

source/_patterns/02-organisms/00-global/footer.mustache

@@ -67,8 +67,8 @@
               </div>
               {{> atoms-basic-contact-line(icon: "fas fa-envelope", caption: "Dejte nám vědět") }}
             </div>
-            {{> atoms-icon-button(cta: "Přispěj", icon: "fas fa-hand-holding-usd", classes: "btn--inverted btn--lg btn--fullwidth md:btn--autowidth mb-1") }}
-            {{> atoms-icon-button(cta: "Naloď se", icon: "fas fa-anchor", classes: "btn--green btn--lg btn--fullwidth md:btn--autowidth") }}
+            {{> atoms-icon-button(cta: "Přispěj", icon: "fas fa-hand-holding-usd", classes: "btn--white btn--hoveractive btn--lg btn--fullwidth md:btn--autowidth mb-1") }}
+            {{> atoms-icon-button(cta: "Naloď se", icon: "fas fa-anchor", classes: "btn--green-100 btn--hoveractive btn--lg btn--fullwidth md:btn--autowidth") }}
           </div>
         </div>
       </div>
@@ -112,7 +112,7 @@
         {{> molecules-condensed-badge(classes: "footer-contacts__item") }}
         {{> molecules-condensed-badge(classes: "footer-contacts__item") }}
         <div class="mt-4 lg:mt-0 lg:text-right footer-contacts__item">
-          {{> atoms-basic-button(cta: "Kontakt", classes: "btn--inverted btn--fullwidth md:btn--autowidth btn--lg btn--fading") }}
+          {{> atoms-basic-button(cta: "Kontakt", classes: "btn--white btn--hoveractive btn--fullwidth md:btn--autowidth btn--lg btn--fading") }}
         </div>
       </div>
     </div>

source/css/atoms/button.pcss

 .btn {
   @apply inline-block text-center font-normal max-w-xs;
 
-
   &:hover {
     @apply no-underline;
   }
-}
 
-.btn__body,
-.btn__icon {
-  @apply transition duration-200 bg-black text-white;
-}
+  .btn__body,
+  .btn__icon {
+    @apply transition duration-200 bg-black text-white;
+  }
+
+  .btn__icon {
+    @apply border-l border-grey-300;
+  }
+
+  .btn__body {
+    @apply block;
+    padding: .75em 2em;
+  }
 
-.btn__body {
-  @apply block;
-  padding: .75em 2em;
+  &.btn--hoveractive:hover .btn__body,
+  &.btn--hoveractive:hover .btn__icon {
+    @apply bg-black text-white;
+  }
+  &.btn--hoveractive:hover .btn__icon {
+    @apply border-grey-300;
+  }
+
+  &.btn--hoveractive.btn--fading:hover .btn__body,
+  &.btn--hoveractive.btn--fading:hover .btn__icon {
+    @apply bg-grey-500 text-white;
+  }
 }
 
 .btn.btn--icon {
@@ -23,15 +39,15 @@
   }
 
   .btn__icon {
-    @apply border-l border-black px-2 flex items-center;
+    @apply border-l px-2 flex items-center;
 
     img {
       @apply w-2;
     }
   }
 
-  &:hover .btn__icon {
-    @apply border-l border-grey-500 bg-black;
+  &.btn--hoveractive:hover .btn__icon {
+    @apply border-l;
 
     svg, i {
       @apply text-white;
@@ -40,40 +56,58 @@
   }
 }
 
-.btn.btn--green {
+.btn.btn--black {
   .btn__body,
   .btn__icon {
-    @apply bg-green-100 text-white;
+    @apply bg-black text-white;
   }
 
   .btn__icon {
-    @apply border-l border-green-200 px-2 flex;
+    @apply border-l border-grey-300;
   }
+}
 
-  &:hover .btn__body,
-  &:hover .btn__icon {
-    @apply bg-black text-white;
+.btn.btn--grey-125 {
+  .btn__body,
+  .btn__icon {
+    @apply bg-grey-125 text-black;
   }
 
-  &.btn--fading:hover .btn__body {
-    @apply bg-grey-500 text-white;
+  .btn__icon {
+    @apply border-grey-150;
   }
 }
 
+.btn.btn--grey-450 {
+  .btn__body,
+  .btn__icon {
+    @apply bg-grey-450 text-white;
+  }
 
-.btn.btn--inverted {
+  .btn__icon {
+    @apply border-grey-300;
+  }
+}
+
+.btn.btn--green-100 {
   .btn__body,
   .btn__icon {
-    @apply bg-white text-black;
+    @apply bg-green-100 text-white;
   }
 
-  &:hover .btn__body,
-  &:hover .btn__icon {
-    @apply bg-black text-white;
+  .btn__icon {
+    @apply border-green-200;
   }
+}
 
-  &.btn--fading:hover .btn__body {
-    @apply bg-grey-500 text-white;
+.btn.btn--white {
+  .btn__body,
+  .btn__icon {
+    @apply bg-white text-black;
+  }
+
+  .btn__icon {
+    @apply border-grey-100;
   }
 }
 

tailwind.config.js

@@ -39,16 +39,19 @@ module.exports = {
       'grey': {
         '50': '#f7f7f7',
         '100': '#f3f3f3',
+        '125': '#f0f0f0',
         '150': '#00000012',
         '200': '#adadad',
         '300': '#4c4c4c',
         '400': '#343434',
+        '450': '#262626',
         '500': '#202020',
       },
       'red': '#d6151b',
       'green': {
         '100': '#29bc51',
-        '200': '#1c8c3b',
+        '200': '#26b34b',
+        '300': '#22a244',
       },
       'brands': {
         'facebook': '#067ceb',