Refactor color variables into variables partial and effects into effects partial

Author: djanelle-mit

app/assets/stylesheets/partials/_effects.scss

@@ -4,12 +4,16 @@
 
 // ANIMATION
 
-@mixin text-decoration-animation( $speed ) {
-    transition: text-decoration #{$speed} ease;
+@mixin text-decoration-animation {
+    transition: text-decoration 150ms ease;
     text-decoration: none; // Included as fallback if text-decoration-color isn't supported
     text-decoration: underline transparent;
 }
 
+@mixin hover-transition {
+    transition: all .25s ease-in-out 0s;
+}
+
 // OUTLINE
 
 @mixin set-focus-outline() {

app/assets/stylesheets/partials/_header.scss

@@ -23,7 +23,7 @@
             color: $color-gray-300;
             font-size: 1.5rem;
             padding-top: 2px;
-            @include text-decoration-animation(150ms);
+            @include text-decoration-animation;
 
             &:hover {
                 text-decoration: underline;
@@ -61,7 +61,7 @@
     .platform-name {
         color: $color-white;
         font-size: 2.4rem;        
-        @include text-decoration-animation(150ms);
+        @include text-decoration-animation;
 
         &:hover {
             text-decoration: underline;
@@ -80,7 +80,7 @@
             color: $color-white;
             font-size: 1.8rem;
             font-weight: $fw-medium;
-            @include text-decoration-animation(150ms);
+            @include text-decoration-animation;
 
             &:hover {
                 text-decoration: underline;

app/assets/stylesheets/partials/_suggestion-panel.scss

@@ -1,29 +1,3 @@
-/* Color Variables */
-
-// Core
-$blue-500: #0000FF;
-
-$purple-700: #990099;
-
-$white: #fff;
-$gray-100: #F2F2F2;
-$black: #111;
-
-@mixin focus-outline {
-    &:focus {
-        outline: 3px solid $blue-500;
-    }    
-}
-
-@mixin hover-transition {
-    transition: all .25s ease-in-out 0s;
-}
-
-// Semantic
-$color-suggestion-border: $purple-700;
-$color-suggestion-accent-text: $purple-700;
-
-/* Suggestion Panel */
 .mitlib-suggestion-panel {
     border: 4px solid $color-suggestion-border;
 
@@ -69,25 +43,25 @@ $color-suggestion-accent-text: $purple-700;
         top: 0;
         right: 0;
 
-        background-color: $white;
+        background-color: $color-white;
         border: none;
-        color: $black;
+        color: $color-text-primary;
         cursor: pointer;
         font-weight: 600;
 
 	    @include hover-transition;
 
-        @include focus-outline;
+        @include set-focus-outline;
 
         &:hover {
-            background-color: $gray-100;
+            background-color: $color-gray-100;
         }
     }
 }
 
 /* Button styles to be extracted into button component */
 .button.secondary {
-    border: 1px solid $black;
+    border: 1px solid $color-black;
     border-radius: 0;
     display: inline-block;
     padding: 6px 12px;
@@ -97,10 +71,10 @@ $color-suggestion-accent-text: $purple-700;
 
     @include hover-transition;
 
-    @include focus-outline;
+    @include set-focus-outline;
 
     &:hover {
-        color: $white;
-        background-color: $black;
+        color: $color-white;
+        background-color: $color-black;
     }
 }

app/assets/stylesheets/partials/_variables.scss

@@ -2,7 +2,10 @@
 // #COLOR
 // ----------------------------
 
+
+
 // GRAY
+$color-gray-100: #F2F2F2;
 $color-gray-200: #e6e6e6;
 $color-gray-300: #ccc;
 $color-gray-400: #b3b3b3;
@@ -20,18 +23,33 @@ $color-red-600: #e50000;
 $color-cyan-500: #00C8FF;
 $color-cyan-700: #00A0CC;
 
+// BLUE
+$color-blue-500: #0000FF;
+
+// PURPLE
+$color-purple-700: #990099;
+
+
+// ---------------
 // SEMANTIC COLORS
+
 $color-black: #000;
 $color-white: #fff;
 
+// TEXT
 $color-text-primary: $color-gray-950;
 $color-text-secondary: $color-gray-700;
 $color-text-placeholder: $color-gray-500;
 $color-text-disabled: $color-gray-400;
 
+// FOCUS
 $color-focus: $color-cyan-700;
 $color-focus-dark: $color-cyan-500;
 
+// SUGGESTION
+$color-suggestion-border: $color-purple-700;
+$color-suggestion-accent-text: $color-purple-700;
+
 // ----------------------------
 // #TYPOGRAPHY
 // ----------------------------