visual styling adjustments to discussion listing metadata, simplifying the…

visual styling adjustments to discussion listing metadata, simplifying the visual representation of votes, increasing the line height of each post while also increasing the size of the icons for following and comments. visual styling adjustments also included for the discussion itself, pushing comments to be full width within a response, and small typography adjustments to the post count metadata and the add response button

lms/static/sass/base/_variables.scss

@@ -33,23 +33,88 @@ $very-light-text: #fff;
 
 // ====================
 
-// COLORS: misc.
+// COLORS
+$black: rgb(0,0,0);
+$black-t0: rgba($black, 0.125);
+$black-t1: rgba($black, 0.25);
+$black-t2: rgba($black, 0.5);
+$black-t3: rgba($black, 0.75);
+
 $white: rgb(255,255,255);
 $white-t0: rgba($white, 0.125);
 $white-t1: rgba($white, 0.25);
 $white-t2: rgba($white, 0.5);
 $white-t3: rgba($white, 0.75);
 
-$black: rgb(0,0,0);
-$black-t0: rgba($black, 0.125);
-$black-t1: rgba($black, 0.25);
-$black-t2: rgba($black, 0.5);
-$black-t3: rgba($black, 0.75);
+$gray: rgb(127,127,127);
+$gray-l1: tint($gray,20%);
+$gray-l2: tint($gray,40%);
+$gray-l3: tint($gray,60%); // #cbcbcb;
+$gray-l4: tint($gray,80%); // #e5e5e5;
+$gray-l5: tint($gray,90%); // #f2f2f2;
+$gray-l6: tint($gray,95%); // #f8f8f8;
+$gray-l7: tint($gray,99%);
+$gray-d1: shade($gray,20%);
+$gray-d2: shade($gray,40%);
+$gray-d3: shade($gray,60%);
+$gray-d4: shade($gray,80%);
+
+$pink: rgb(182,37,103);
+$pink-l1: tint($pink,20%);
+$pink-l2: tint($pink,40%);
+$pink-l3: tint($pink,60%);
+$pink-l4: tint($pink,80%);
+$pink-l5: tint($pink,90%);
+$pink-d1: shade($pink,20%);
+$pink-d2: shade($pink,40%);
+$pink-d3: shade($pink,60%);
+$pink-d4: shade($pink,80%);
+$pink-s1: saturate($pink,15%);
+$pink-s2: saturate($pink,30%);
+$pink-s3: saturate($pink,45%);
+$pink-u1: desaturate($pink,15%);
+$pink-u2: desaturate($pink,30%);
+$pink-u3: desaturate($pink,45%);
 
+$red: rgb(178, 6, 16);
+$red-l1: tint($red,20%);
+$red-l2: tint($red,40%);
+$red-l3: tint($red,60%);
+$red-l4: tint($red,80%);
+$red-l5: tint($red,90%);
+$red-d1: shade($red,20%);
+$red-d2: shade($red,40%);
+$red-d3: shade($red,60%);
+$red-d4: shade($red,80%);
+$red-s1: saturate($red,15%);
+$red-s2: saturate($red,30%);
+$red-s3: saturate($red,45%);
+$red-u1: desaturate($red,15%);
+$red-u2: desaturate($red,30%);
+$red-u3: desaturate($red,45%);
+
+$green: rgb(37, 184, 90);
+$green-l1: tint($green,20%);
+$green-l2: tint($green,40%);
+$green-l3: tint($green,60%);
+$green-l4: tint($green,80%);
+$green-l5: tint($green,90%);
+$green-d1: shade($green,20%);
+$green-d2: shade($green,40%);
+$green-d3: shade($green,60%);
+$green-d4: shade($green,80%);
+$green-s1: saturate($green,15%);
+$green-s2: saturate($green,30%);
+$green-s3: saturate($green,45%);
+$green-u1: desaturate($green,15%);
+$green-u2: desaturate($green,30%);
+$green-u3: desaturate($green,45%);
+
+// TODO: both blue and yellow variables differ from CMS rgb value, need to confirm change to CMS variable is ok in current platform uses before switching.
 $blue: rgb(29,157,217);
-$pink: rgb(182,37,104);
 $yellow: rgb(255, 252, 221);
-$red: rgb(178, 6, 16);
+
+// COLORS: old variables
 $error-red: rgb(253, 87, 87);
 $danger-red: rgb(212, 64, 64);
 $light-gray: rgb(221, 221, 221);
@@ -57,12 +122,7 @@ $dark-gray: rgb(51, 51, 51);
 $border-color: rgb(200, 200, 200);
 $sidebar-color: rgb(246, 246, 246);
 $outer-border-color: rgb(170, 170, 170);
-
-$green: rgb(37, 184, 90);
-
-// COLORS: old variables
 $light-gray: #ddd;
-$dark-gray: #333;
 
 // used by descriptor css
 $lightGrey: #edf1f5;
@@ -70,8 +130,6 @@ $darkGrey: #8891a1;
 $blue-d1: shade($blue,20%);
 $blue-d2: shade($blue,40%);
 $blue-d4: shade($blue,80%);
-$shadow: rgba($black, 0.2);
-$shadow-l1: rgba($black, 0.1);
 
 // edx.org marketing site variables
 $m-gray: #8A8C8F;
@@ -136,6 +194,7 @@ $shadow: rgba(0,0,0,0.2);
 $shadow-l1: rgba(0,0,0,0.1);
 $shadow-l2: rgba(0,0,0,0.05);
 $shadow-d1: rgba(0,0,0,0.4);
+$shadow-d2: rgba($black, 0.6);
 
 // ====================