From 7aaa5ab2949e79b0fdda8b8b34d21e533056c10e Mon Sep 17 00:00:00 2001
From: Scott Nonnenberg <scott@signal.org>
Date: Thu, 3 Dec 2020 08:06:39 -0800
Subject: [PATCH] Buttons: refactor mixins, new light style

---
 stylesheets/_mixins.scss  | 116 +++++++++++++++++++++++++++++++++-----
 stylesheets/_modules.scss |  10 ++--
 2 files changed, 108 insertions(+), 18 deletions(-)

diff --git a/stylesheets/_mixins.scss b/stylesheets/_mixins.scss
index 24b43748ff9f..bdef54933c78 100644
--- a/stylesheets/_mixins.scss
+++ b/stylesheets/_mixins.scss
@@ -191,7 +191,31 @@
   text-align: inherit;
 }
 
-// Buttons
+// --- Buttons
+
+// Individual traits
+
+@mixin button-focus-outline {
+  &:focus {
+    @include keyboard-mode {
+      box-shadow: 0px 0px 0px 3px $ultramarine-ui-light;
+    }
+    @include dark-keyboard-mode {
+      box-shadow: 0px 0px 0px 3px $ultramarine-ui-dark;
+    }
+  }
+}
+
+@mixin button-blue-text {
+  @include light-theme {
+    color: $ultramarine-ui-light;
+  }
+  @include dark-theme {
+    color: $ultramarine-ui-dark;
+  }
+}
+
+// Complete button styles
 
 @mixin button-primary {
   background-color: $ultramarine-ui-light;
@@ -217,23 +241,24 @@
   }
 
   &:active {
-    @include light-theme {
+    // We need to include all four here for specificity precedence
+
+    @include mouse-mode {
       background-color: mix($color-black, $ultramarine-ui-light, 25%);
     }
-
-    @include dark-theme {
+    @include dark-mouse-mode {
       background-color: mix($color-white, $ultramarine-ui-light, 25%);
     }
-  }
 
-  &:focus {
     @include keyboard-mode {
-      box-shadow: 0px 0px 0px 3px $ultramarine-ui-light;
+      background-color: mix($color-black, $ultramarine-ui-light, 25%);
     }
     @include dark-keyboard-mode {
-      box-shadow: 0px 0px 0px 3px $ultramarine-ui-dark;
+      background-color: mix($color-black, $ultramarine-ui-light, 25%);
     }
   }
+
+  @include button-focus-outline;
 }
 
 @mixin button-secondary {
@@ -257,22 +282,75 @@
   }
 
   &:active {
-    @include light-theme {
+    // We need to include all four here for specificity precedence
+
+    @include mouse-mode {
       background-color: mix($color-black, $color-gray-05, 25%);
     }
+    @include dark-mouse-mode {
+      background-color: mix($color-white, $color-gray-65, 25%);
+    }
 
-    @include dark-theme {
+    @include keyboard-mode {
+      background-color: mix($color-black, $color-gray-05, 25%);
+    }
+    @include dark-keyboard-mode {
       background-color: mix($color-white, $color-gray-65, 25%);
     }
   }
+
+  @include button-focus-outline;
 }
+
 @mixin button-secondary-blue-text {
+  @include button-secondary;
+  @include button-blue-text;
+}
+
+@mixin button-light {
   @include light-theme {
-    color: $ultramarine-ui-light;
+    color: $color-gray-90;
+    background-color: $color-gray-02;
   }
   @include dark-theme {
-    color: $ultramarine-ui-dark;
+    color: $color-gray-05;
+    background-color: $color-gray-75;
   }
+
+  &:hover {
+    @include mouse-mode {
+      background-color: mix($color-black, $color-gray-02, 10%);
+    }
+
+    @include dark-mouse-mode {
+      background-color: mix($color-white, $color-gray-75, 10%);
+    }
+  }
+
+  &:active {
+    // We need to include all four here for specificity precedence
+
+    @include mouse-mode {
+      background-color: mix($color-black, $color-gray-02, 20%);
+    }
+    @include dark-mouse-mode {
+      background-color: mix($color-white, $color-gray-75, 20%);
+    }
+
+    @include keyboard-mode {
+      background-color: mix($color-black, $color-gray-02, 20%);
+    }
+    @include dark-keyboard-mode {
+      background-color: mix($color-white, $color-gray-75, 20%);
+    }
+  }
+
+  @include button-focus-outline;
+}
+
+@mixin button-light-blue-text {
+  @include button-light;
+  @include button-blue-text;
 }
 
 @mixin button-destructive {
@@ -296,12 +374,22 @@
   }
 
   &:active {
-    @include light-theme {
+    // We need to include all four here for specificity precedence
+
+    @include mouse-mode {
       background-color: mix($color-black, $color-accent-red, 25%);
     }
+    @include dark-mouse-mode {
+      background-color: mix($color-white, $color-accent-red, 25%);
+    }
 
-    @include dark-theme {
+    @include keyboard-mode {
+      background-color: mix($color-black, $color-accent-red, 25%);
+    }
+    @include dark-keyboard-mode {
       background-color: mix($color-white, $color-accent-red, 25%);
     }
   }
+
+  @include button-focus-outline;
 }
diff --git a/stylesheets/_modules.scss b/stylesheets/_modules.scss
index 0465f6d80ac3..2390cad842c7 100644
--- a/stylesheets/_modules.scss
+++ b/stylesheets/_modules.scss
@@ -9878,9 +9878,7 @@ button.module-image__border-overlay:focus {
   padding-left: 40px;
   padding-right: 40px;
 
-  @include button-primary;
-  @include button-secondary;
-  @include button-secondary-blue-text;
+  @include button-light-blue-text;
 }
 
 // Module: GroupV1 Disabled Actions
@@ -10027,7 +10025,9 @@ button.module-image__border-overlay:focus {
   flex-direction: row;
   align-items: start;
 
-  margin-bottom: 16px;
+  &:not(:last-of-type) {
+    margin-bottom: 16px;
+  }
 }
 .module-group-v2-migration-dialog__item__bullet {
   width: 4px;
@@ -10055,6 +10055,8 @@ button.module-image__border-overlay:focus {
 }
 
 .module-group-v2-migration-dialog__buttons {
+  margin-top: 16px;
+
   text-align: center;
   flex-grow: 0;
   flex-shrink: 0;