fix(lib): fix buttons active colors

p3ol · Apr 21, 2021 · 7f3444b · 7f3444b
1 parent 2d57743
commit 7f3444b
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 17 deletions.
diff --git 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
@@ -47,16 +47,17 @@
 
     &:active
       background: $color-white - 20
+      color: $color-midnight
 
       &:focus
         box-shadow: 0 0 0 1px ($color-white - 20),
                     0 0 0 3px rgba($color-midnight, .2)
 
     &: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,16 +98,17 @@
       &: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,
                       0 0 0 3px rgba($color-eastern-blue, .5)
 
       &: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,16 +149,17 @@
       &: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,
                       0 0 0 3px rgba($color-persian-green, .5)
 
       &: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,16 +200,17 @@
       &: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),
                       0 0 0 3px rgba($color-buttercup, .5)
 
       &: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,16 +251,17 @@
       &: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),
                       0 0 0 3px rgba($color-monza, .5)
 
       &: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,16 +302,17 @@
       &: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),
                       0 0 0 3px rgba($color-java, .5)
 
       &: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