From 7f3444b5f22604a8b5ecca1c7a77039a9484db1c Mon Sep 17 00:00:00 2001
From: Ugo Stephant <ugo@poool.fr>
Date: Wed, 21 Apr 2021 11:20:44 +0200
Subject: [PATCH] fix(lib): fix buttons active colors

---
 packages/junipero/lib/Button/index.stories.js | 16 ++++++++
 packages/junipero/lib/Button/index.styl       | 40 +++++++++++--------
 2 files changed, 39 insertions(+), 17 deletions(-)

diff --git a/packages/junipero/lib/Button/index.stories.js b/packages/junipero/lib/Button/index.stories.js
index 6c757dfb3..b77974f7a 100644
--- a/packages/junipero/lib/Button/index.stories.js
+++ b/packages/junipero/lib/Button/index.stories.js
@@ -9,6 +9,7 @@ export const basic = () => (
     <p><Button>Default</Button></p>
     <p><Button disabled>Disabled</Button></p>
     <p><Button className="outline">Outline</Button></p>
+    <p><Button className="outline" disabled>Outline disabled</Button></p>
     <p><Button><i className="material-icons">add_box</i> With icon</Button></p>
     <p><Button className="small">Small</Button></p>
     <p><Button className="big">Big</Button></p>
@@ -20,6 +21,9 @@ export const primary = () => (
     <p><Button className="primary">Default</Button></p>
     <p><Button disabled className="primary">Disabled</Button></p>
     <p><Button className="primary outline">Outline</Button></p>
+    <p>
+      <Button className="primary outline" disabled>Outline disabled</Button>
+    </p>
     <p>
       <Button className="primary">
         <i className="material-icons">add_box</i> With icon
@@ -35,6 +39,9 @@ export const secondary = () => (
     <p><Button className="secondary">Default</Button></p>
     <p><Button disabled className="secondary">Disabled</Button></p>
     <p><Button className="secondary outline">Outline</Button></p>
+    <p>
+      <Button className="secondary outline" disabled>Outline disabled</Button>
+    </p>
     <p>
       <Button className="secondary">
         <i className="material-icons">add_box</i> With icon
@@ -50,6 +57,9 @@ export const warning = () => (
     <p><Button className="warning">Default</Button></p>
     <p><Button disabled className="warning">Disabled</Button></p>
     <p><Button className="warning outline">Outline</Button></p>
+    <p>
+      <Button className="warning outline" disabled>Outline disabled</Button>
+    </p>
     <p>
       <Button className="warning">
         <i className="material-icons">add_box</i> With icon
@@ -65,6 +75,9 @@ export const danger = () => (
     <p><Button className="danger">Default</Button></p>
     <p><Button disabled className="danger">Disabled</Button></p>
     <p><Button className="danger outline">Outline</Button></p>
+    <p>
+      <Button className="danger outline" disabled>Outline disabled</Button>
+    </p>
     <p>
       <Button className="danger">
         <i className="material-icons">add_box</i> With icon
@@ -80,6 +93,9 @@ export const success = () => (
     <p><Button className="success">Default</Button></p>
     <p><Button disabled className="success">Disabled</Button></p>
     <p><Button className="success outline">Outline</Button></p>
+    <p>
+      <Button className="success outline" disabled>Outline disabled</Button>
+    </p>
     <p>
       <Button className="success">
         <i className="material-icons">add_box</i> With icon
diff --git a/packages/junipero/lib/Button/index.styl b/packages/junipero/lib/Button/index.styl
index fdce01ef3..b125431c9 100644
--- a/packages/junipero/lib/Button/index.styl
+++ b/packages/junipero/lib/Button/index.styl
@@ -47,6 +47,7 @@
 
     &:active
       background: $color-white - 20
+      color: $color-midnight
 
       &:focus
         box-shadow: 0 0 0 1px ($color-white - 20),
@@ -54,9 +55,9 @@
 
     &:disabled
       &, &:hover, &:active, &:focus
-        background: $color-alabaster
+        background: transparent
+        box-shadow: 0 0 0 1px $color-alabaster
         color: $color-alto
-        box-shadow: none
 
   // Primary
   &.primary
@@ -97,6 +98,7 @@
       &:active
         background: $color-persian-green
         box-shadow: 0 0 0 1px $color-persian-green
+        color: $color-white
 
         &:focus
           box-shadow: 0 0 0 1px $color-persian-green,
@@ -104,9 +106,9 @@
 
       &:disabled
         &, &:hover, &:active, &:focus
-          background: $color-powder-blue
-          color: $color-white
-          box-shadow: none
+          background: transparent
+          box-shadow: 0 0 0 1px $color-powder-blue
+          color: $color-powder-blue
 
   // Secondary
   &.secondary
@@ -147,6 +149,7 @@
       &:active
         background: $color-eastern-blue
         box-shadow: 0 0 0 1px $color-eastern-blue
+        color: $color-white
 
         &:focus
           box-shadow: 0 0 0 1px $color-eastern-blue,
@@ -154,9 +157,9 @@
 
       &:disabled
         &, &:hover, &:active, &:focus
-          background: $color-powder-blue
-          color: $color-white
-          box-shadow: none
+          background: transparent
+          box-shadow: 0 0 0 1px $color-powder-blue
+          color: $color-powder-blue
 
   // Warning
   &.warning
@@ -197,6 +200,7 @@
       &:active
         background: $color-buttercup - 20
         box-shadow: 0 0 0 1px ($color-buttercup - 20)
+        color: $color-white
 
         &:focus
           box-shadow: 0 0 0 1px ($color-buttercup - 20),
@@ -204,9 +208,9 @@
 
       &:disabled
         &, &:hover, &:active, &:focus
-          background: $color-disabled-buttercup
-          color: $color-white
-          box-shadow: none
+          background: transparent
+          box-shadow: 0 0 0 1px $color-disabled-buttercup
+          color: $color-disabled-buttercup
 
   // Danger
   &.danger
@@ -247,6 +251,7 @@
       &:active
         background: $color-monza - 20
         box-shadow: 0 0 0 1px ($color-monza - 20)
+        color: $color-white
 
         &:focus
           box-shadow: 0 0 0 1px ($color-monza - 20),
@@ -254,9 +259,9 @@
 
       &:disabled
         &, &:hover, &:active, &:focus
-          background: $color-disabled-monza
-          color: $color-white
-          box-shadow: none
+          background: transparent
+          color: $color-disabled-monza
+          box-shadow: 0 0 0 1px $color-disabled-monza
 
   // Success
   &.success
@@ -297,6 +302,7 @@
       &:active
         background: $color-java - 20
         box-shadow: 0 0 0 1px ($color-java - 20)
+        color: $color-white
 
         &:focus
           box-shadow: 0 0 0 1px ($color-java - 20),
@@ -304,9 +310,9 @@
 
       &:disabled
         &, &:hover, &:active, &:focus
-          background: $color-disabled-java
-          color: $color-white
-          box-shadow: none
+          background: transparent
+          color: $color-disabled-java
+          box-shadow: 0 0 0 1px $color-disabled-java
 
   .icon,
   .material-icons