edx.org: abstracting new edx.org button extends and colors with other themes in mind

lms/static/sass/_shame.scss

@@ -35,7 +35,7 @@
 }
 
 // primary button
-.m-btn-primary {
+.m-btn-base {
   @extend .m-btn;
   @extend .m-btn-edged;
   border: none;
@@ -46,67 +46,67 @@
   letter-spacing: 0;
 
   &.disabled, &[disabled], &.is-disabled {
-    background: $m-gray-d3;
+    background: $action-primary-disabled-bg;
 
     &:hover {
-      background: $m-gray-d3 !important; // needed for IE currently
+      background: $action-primary-disabled-bg !important; // needed for IE currently
     }
   }
 }
 
-// blue primary button
-.m-btn-primary-blue {
-  @extend .m-btn-primary;
-  box-shadow: 0 2px 1px 0 $m-blue-d4;
-  background: $m-blue-d3;
-  color: $white;
+// primary button
+.m-btn-primary {
+  @extend .m-btn-base;
+  box-shadow: 0 2px 1px 0 $action-primary-shadow;
+  background: $action-primary-bg;
+  color: $action-primary-fg;
 
   &:hover, &:active {
-    background: $m-blue-d1;
+    background: $action-primary-focused-bg;
   }
 
   &.current, &.active {
-    box-shadow: inset 0 2px 1px 1px $m-blue-d2;
-    background: $m-blue;
-    color: $m-blue-d2;
+    box-shadow: inset 0 2px 1px 1px $action-primary-active-shadow;
+    background: $action-primary-active-bg;
+    color: $action-primary-active-fg;
 
     &:hover, &:active {
-      box-shadow: inset 0 2px 1px 1px $m-blue-d3;
-      color: $m-blue-d3;
+      box-shadow: inset 0 2px 1px 1px $action-primary-active-focused-shadow;
+      color: $action-primary-active-focused-fg;
     }
   }
 
   &.disabled, &[disabled] {
     box-shadow: none;
-    background: $m-gray-d3; // needed for IE currently
+    background: $action-primary-disabled-bg; // needed for IE currently
   }
 }
 
-// pink primary button
-.m-btn-primary-pink {
-  @extend .m-btn-primary;
-  box-shadow: 0 2px 1px 0 $m-pink-d2;
-  background: $m-pink;
-  color: $white;
+// secondary button
+.m-btn-secondary {
+  @extend .m-btn-base;
+  box-shadow: 0 2px 1px 0 $action-secondary-shadow;
+  background: $action-secondary-bg;
+  color: $action-secondary-fg;
 
   &:hover, &:active {
-    background: $m-pink-l3;
+    background: $action-secondary-focused-bg;
   }
 
   &.current, &.active {
-    box-shadow: inset 0 2px 1px 1px $m-pink-d1;
-    background: $m-pink-l2;
-    color: $m-pink-d1;
+    box-shadow: inset 0 2px 1px 1px $action-secondary-active-shadow;
+    background: $action-secondary-active-bg;
+    color: $action-secondary-active-fg;
 
     &:hover, &:active {
-      box-shadow: inset 0 2px 1px 1px $m-pink-d2;
-      color: $m-pink-d3;
+      box-shadow: inset 0 2px 1px 1px $action-secondary-active-focused-shadow;
+      color: $action-secondary-active-focused-fg;
     }
   }
 
   &.disabled, &[disabled] {
     box-shadow: none;
-    background: $m-gray-d3; // needed for IE currently
+    background: $action-secondary-disabled-bg; // needed for IE currently
   }
 }
 
@@ -154,20 +154,20 @@
 
     // register or access courseware
     &.action-register, &.access-courseware {
-      @extend .m-btn-primary-blue;
+      @extend .m-btn-primary;
       display: block;
     }
 
     // already registered but course not started or registration is closed
     &.is-registered, &.registration-closed {
-      @extend .m-btn-primary-pink;
+      @extend .m-btn-secondary;
       pointer-events: none !important;
       display: block;
     }
 
     // coming soon
     &.coming-soon {
-      @extend .m-btn-primary-pink;
+      @extend .m-btn-secondary;
       pointer-events: none !important;
       outline: none;
       display: block;

lms/static/sass/base/_variables.scss

@@ -69,7 +69,6 @@ $m-pink-d3: #771C44;
 
 $m-base-font-size: em(15);
 
-
 $base-font-color: rgb(60,60,60);
 $baseFontColor: rgb(60,60,60);
 $lighter-base-font-color: rgb(100,100,100);
@@ -88,10 +87,57 @@ $courseware-footer-border: none;
 $courseware-footer-shadow: none;
 $courseware-footer-margin: 0px;
 
+
+// actions
 $button-bg-image: linear-gradient(#fff 0%, rgb(250,250,250) 50%, rgb(237,237,237) 50%, rgb(220,220,220) 100%);
 $button-bg-color: transparent;
 $button-bg-hover-color: #fff;
 
+// actions - primary
+$action-primary-bg: $m-blue-d3;
+$action-primary-fg: $white;
+$action-primary-shadow: $m-blue-d4;
+
+// focused - hover/active pseudo states
+$action-primary-focused-bg: $m-blue-d1;
+$action-primary-focused-fg: $white;
+
+// current or active navigation item
+$action-primary-active-bg: $m-blue;
+$action-primary-active-fg: $m-blue-d3;
+$action-primary-active-shadow: $m-blue-d2;
+$action-primary-active-focused-fg: $m-blue-d4;
+$action-primary-active-focused-shadow: $m-blue-d3;
+
+// disabled
+$action-primary-disabled-bg: $m-gray-d3;
+$action-prmary-disabled-fg: $white;
+
+
+
+// actions - secondary
+$action-secondary-bg: $m-pink;
+$action-secondary-fg: $white;
+$action-secondary-shadow: $m-pink-d2;
+
+// focused - hover/active pseudo states
+$action-secondary-focused-bg: $m-pink-l3;
+$action-secondary-focused-fg: $white;
+
+// current or active navigation item
+$action-secondary-active-bg: $m-pink-l2;
+$action-secondary-active-fg: $m-pink-d1;
+$action-secondary-active-shadow: $m-pink-d1;
+$action-secondary-active-focused-fg: $m-pink-d3;
+$action-secondary-active-focused-shadow: $m-pink-d2;
+
+// disabled
+$action-secondary-disabled-bg: $m-gray-d3;
+$action-secondary-disabled-fg: $white;
+
+
+
+
 $faded-hr-image-1: linear-gradient(180deg, rgba(200,200,200, 0) 0%, rgba(200,200,200, 1) 50%, rgba(200,200,200, 0));
 $faded-hr-image-2: linear-gradient(180deg, rgba(200,200,200, 0) 0%, rgba(200,200,200, 1));
 $faded-hr-image-3: linear-gradient(180deg, rgba(200,200,200, 1) 0%, rgba(200,200,200, 0));

lms/static/sass/multicourse/_account.scss

@@ -390,7 +390,7 @@
     @include clearfix();
 
     button[type="submit"] {
-      @extend .m-btn-primary-blue;
+      @extend .m-btn-primary;
 
       &:disabled, &.is-disabled {
         opacity: 0.3;

lms/static/sass/shared/_header.scss

@@ -279,7 +279,7 @@ header.global {
       display: inline-block;
 
       .cta {
-        @extend .m-btn-primary-blue;
+        @extend .m-btn-primary;
       }
     }