Merge pull request #2810 from edx/marco/discussions/styling-cleanup

Forums visual styling adjustments

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);
 
 // ====================