Merge pull request #8271 from edx/sass-theming

Comprehensive Theming
2015-09-21 10:55:18 -04:00
parent 9a0152724b 5711fd42b0
commit 03aeae4bd7
105 changed files with 1820 additions and 831 deletions
--- a/lms/static/certificates/sass/_components.scss
+++ b/lms/static/certificates/sass/_components.scss
@@ -494,7 +494,7 @@
    }

    .accomplishment-rendering {
-        background: palette(grayscale, white-t) url('../images/bg-distinguished.png') center no-repeat;
+        background: palette(grayscale, white-t) url('#{$static-path}/images/bg-distinguished.png') center no-repeat;
        background-size: 65%;

        .deco-corner-tl {
--- a/lms/static/images/edx-theme/default-profile_120.png
+++ b/lms/static/images/edx-theme/default-profile_120.png
--- a/lms/static/images/edx-theme/default-profile_30.png
+++ b/lms/static/images/edx-theme/default-profile_30.png
--- a/lms/static/images/edx-theme/default-profile_50.png
+++ b/lms/static/images/edx-theme/default-profile_50.png
--- a/lms/static/images/edx-theme/default-profile_500.png
+++ b/lms/static/images/edx-theme/default-profile_500.png
--- a/lms/static/images/edx-theme/edx-header-logo.png
+++ b/lms/static/images/edx-theme/edx-header-logo.png
--- a/lms/static/images/edx-theme/edx-logo-bw.png
+++ b/lms/static/images/edx-theme/edx-logo-bw.png
--- a/lms/static/images/default-theme/logo-large.png
+++ b/lms/static/images/default-theme/logo-large.png
--- a/lms/static/images/default-theme/logo.png
+++ b/lms/static/images/default-theme/logo.png
--- a/lms/static/images/default-theme/default-profile_120.png
+++ b/lms/static/images/default-theme/default-profile_120.png
--- a/lms/static/images/default-theme/default-profile_30.png
+++ b/lms/static/images/default-theme/default-profile_30.png
--- a/lms/static/images/default-theme/default-profile_50.png
+++ b/lms/static/images/default-theme/default-profile_50.png
--- a/lms/static/images/default-theme/default-profile_500.png
+++ b/lms/static/images/default-theme/default-profile_500.png
--- a/lms/static/sass/base/_base.scss
+++ b/lms/static/sass/base/_base.scss
@@ -179,7 +179,7 @@ span.edx {
  width: 20px;
  height: 20px;
  margin-left: -($baseline/2);
-  background: url(../images/spinner.gif) no-repeat;
+  background: url('#{$static-path}/images/spinner.gif') no-repeat;
 }

 mark {
@@ -205,7 +205,7 @@ mark {
    width: 27px;
    height: 24px;
    margin-right: ($baseline*0.75);
-    background: url(../images/large-white-error-icon.png) no-repeat;
+    background: url('#{$static-path}/images/large-white-error-icon.png') no-repeat;
  }

  .inner-wrapper {
--- a/lms/static/sass/base/_extends.scss
+++ b/lms/static/sass/base/_extends.scss
@@ -68,7 +68,7 @@

 //Styles for Error messages
 %error-message-colors {
-  background: $error-red;
+  background: $error-color;
  border: 1px solid rgb(202, 17, 17);
  color: rgb(143, 14, 14);
 }
--- a/lms/static/sass/base/_font_face.scss
+++ b/lms/static/sass/base/_font_face.scss
@@ -3,9 +3,9 @@
@font-face {
    font-family: 'Open Sans';
    src:
-        url('../fonts/OpenSans/OpenSans-Light-webfont.woff2') format('woff2'),
-        url('../fonts/OpenSans/OpenSans-Light-webfont.woff') format('woff'),
-        url('../fonts/OpenSans/OpenSans-Light-webfont.ttf') format('truetype');
+        url('#{$static-path}/fonts/OpenSans/OpenSans-Light-webfont.woff2') format('woff2'),
+        url('#{$static-path}/fonts/OpenSans/OpenSans-Light-webfont.woff') format('woff'),
+        url('#{$static-path}/fonts/OpenSans/OpenSans-Light-webfont.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
 }
@@ -13,9 +13,9 @@
@font-face {
    font-family: 'Open Sans';
    src:
-        url('../fonts/OpenSans/OpenSans-LightItalic-webfont.woff2') format('woff2'),
-        url('../fonts/OpenSans/OpenSans-LightItalic-webfont.woff') format('woff'),
-        url('../fonts/OpenSans/OpenSans-LightItalic-webfont.ttf') format('truetype');
+        url('#{$static-path}/fonts/OpenSans/OpenSans-LightItalic-webfont.woff2') format('woff2'),
+        url('#{$static-path}/fonts/OpenSans/OpenSans-LightItalic-webfont.woff') format('woff'),
+        url('#{$static-path}/fonts/OpenSans/OpenSans-LightItalic-webfont.ttf') format('truetype');
    font-weight: 300;
    font-style: italic;
 }
@@ -23,9 +23,9 @@
@font-face {
    font-family: 'Open Sans';
    src:
-        url('../fonts/OpenSans/OpenSans-Regular-webfont.woff2') format('woff2'),
-        url('../fonts/OpenSans/OpenSans-Regular-webfont.woff') format('woff'),
-        url('../fonts/OpenSans/OpenSans-Regular-webfont.ttf') format('truetype');
+        url('#{$static-path}/fonts/OpenSans/OpenSans-Regular-webfont.woff2') format('woff2'),
+        url('#{$static-path}/fonts/OpenSans/OpenSans-Regular-webfont.woff') format('woff'),
+        url('#{$static-path}/fonts/OpenSans/OpenSans-Regular-webfont.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
 }
@@ -33,9 +33,9 @@
@font-face {
    font-family: 'Open Sans';
    src:
-        url('../fonts/OpenSans/OpenSans-Italic-webfont.woff2') format('woff2'),
-        url('../fonts/OpenSans/OpenSans-Italic-webfont.woff') format('woff'),
-        url('../fonts/OpenSans/OpenSans-Italic-webfont.ttf') format('truetype');
+        url('#{$static-path}/fonts/OpenSans/OpenSans-Italic-webfont.woff2') format('woff2'),
+        url('#{$static-path}/fonts/OpenSans/OpenSans-Italic-webfont.woff') format('woff'),
+        url('#{$static-path}/fonts/OpenSans/OpenSans-Italic-webfont.ttf') format('truetype');
    font-weight: 400;
    font-style: italic;
 }
@@ -43,9 +43,9 @@
@font-face {
    font-family: 'Open Sans';
    src:
-        url('../fonts/OpenSans/OpenSans-Semibold-webfont.woff2') format('woff2'),
-        url('../fonts/OpenSans/OpenSans-Semibold-webfont.woff') format('woff'),
-        url('../fonts/OpenSans/OpenSans-Semibold-webfont.ttf') format('truetype');
+        url('#{$static-path}/fonts/OpenSans/OpenSans-Semibold-webfont.woff2') format('woff2'),
+        url('#{$static-path}/fonts/OpenSans/OpenSans-Semibold-webfont.woff') format('woff'),
+        url('#{$static-path}/fonts/OpenSans/OpenSans-Semibold-webfont.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
 }
@@ -53,9 +53,9 @@
@font-face {
    font-family: 'Open Sans';
    src:
-        url('../fonts/OpenSans/OpenSans-SemiboldItalic-webfont.woff2') format('woff2'),
-        url('../fonts/OpenSans/OpenSans-SemiboldItalic-webfont.woff') format('woff'),
-        url('../fonts/OpenSans/OpenSans-SemiboldItalic-webfont.ttf') format('truetype');
+        url('#{$static-path}/fonts/OpenSans/OpenSans-SemiboldItalic-webfont.woff2') format('woff2'),
+        url('#{$static-path}/fonts/OpenSans/OpenSans-SemiboldItalic-webfont.woff') format('woff'),
+        url('#{$static-path}/fonts/OpenSans/OpenSans-SemiboldItalic-webfont.ttf') format('truetype');
    font-weight: 600;
    font-style: italic;
 }
@@ -63,9 +63,9 @@
@font-face {
    font-family: 'Open Sans';
    src:
-        url('../fonts/OpenSans/OpenSans-Bold-webfont.woff2') format('woff2'),
-        url('../fonts/OpenSans/OpenSans-Bold-webfont.woff') format('woff'),
-        url('../fonts/OpenSans/OpenSans-Bold-webfont.ttf') format('truetype');
+        url('#{$static-path}/fonts/OpenSans/OpenSans-Bold-webfont.woff2') format('woff2'),
+        url('#{$static-path}/fonts/OpenSans/OpenSans-Bold-webfont.woff') format('woff'),
+        url('#{$static-path}/fonts/OpenSans/OpenSans-Bold-webfont.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
 }
@@ -73,9 +73,9 @@
@font-face {
    font-family: 'Open Sans';
    src:
-        url('../fonts/OpenSans/OpenSans-BoldItalic-webfont.woff2') format('woff2'),
-        url('../fonts/OpenSans/OpenSans-BoldItalic-webfont.woff') format('woff'),
-        url('../fonts/OpenSans/OpenSans-BoldItalic-webfont.ttf') format('truetype');
+        url('#{$static-path}/fonts/OpenSans/OpenSans-BoldItalic-webfont.woff2') format('woff2'),
+        url('#{$static-path}/fonts/OpenSans/OpenSans-BoldItalic-webfont.woff') format('woff'),
+        url('#{$static-path}/fonts/OpenSans/OpenSans-BoldItalic-webfont.ttf') format('truetype');
    font-weight: 700;
    font-style: italic;
 }
--- a/lms/static/sass/base/_variables.scss
+++ b/lms/static/sass/base/_variables.scss
@@ -1,89 +1,77 @@
 // lms - utilities - variables
 // ====================

-// BASE
-$baseline: 20px;
+// #CONFIG:         paths and configuration
+// #UNITS:          Basic units of measurement
+// #GRID:           Grid and layout variables
+// #COLORS:         Base, palette and theme color definitions + application
+// #TYPOGRAPHY:     Font definitions and scales
+// #DEPTH:          UI depth-based scale
+// #SPACING:        General UI spacing variables and scale
+// #FORMS:          form field/interaction variables
+// #TIMING:         Event timing variables
+// #APPLICATIONS:   Applying configuration
+// #DEPRECATED:     sunsetted and not to be used variables

-// ====================
-
-// LAYOUT: grid
-$gw-column: 80px;
-$gw-gutter: 20px;
-$fg-column: $gw-column;
-$fg-gutter: $gw-gutter;
-$fg-max-columns: 12;
-$fg-max-width: 1400px;
-$fg-min-width: 810px;
-
-// ====================
-
-// FONTS
-$sans-serif: 'Open Sans', $verdana, sans-serif;
-$monospace: Monaco, 'Bitstream Vera Sans Mono', 'Lucida Console', monospace;
-$body-font-family: $sans-serif;
-$serif: $georgia;
-
-// FONT-WEIGHTS
-$font-light: 300;
-$font-regular: 400;
-$font-semibold: 600;
-$font-bold: 700;
-
-// ====================
-
-// MISC: base fonts/colors
-$body-font-size: em(14);
-$body-line-height: golden-ratio(.875em, 1);
-$base-font-color: rgb(60,60,60);
-$baseFontColor: rgb(60,60,60);
-$base-font-color: rgb(60,60,60);
-$lighter-base-font-color: rgb(100,100,100);
-$very-light-text: rgb(255,255,255); // #ffffff
-
-// ====================
-
-// TIMING - used for animation/transition mixin syncing
-$tmg-s3: 3.0s;
-$tmg-s2: 2.0s;
-$tmg-s1: 1.0s;
-$tmg-avg: 0.75s;
-$tmg-f1: 0.50s;
-$tmg-f2: 0.25s;
-$tmg-f3: 0.125s;
-
-// ====================
-
-// COLORS - utility
-$transparent: rgba(0,0,0,0); // used when color value is needed for UI width/transitions but element is transparent
-
-// COLORS
-$black: rgb(0,0,0);  // #000000;
-$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);  // #FFFFFF;
-$white-t0: rgba($white, 0.125);
-$white-t1: rgba($white, 0.25);
-$white-t2: rgba($white, 0.5);
-$white-t3: rgba($white, 0.75);
-
-$gray: rgb(118,118,118);    // #767676 AA compliant
-$gray-l1: tint($gray,20%);  // #989898
-$gray-l2: tint($gray,40%);  // #b2b2b2
-$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%);  // #fdfdfd
-$gray-d1: shade($gray,20%); // #656565
-$gray-d2: shade($gray,40%); // #4c4c4c
-$gray-d3: shade($gray,60%); // #323232
-$gray-d4: shade($gray,80%); // #191919
+// ----------------------------
+// #CONFIG
+// ----------------------------
+$static-path: '..' !default;


-$pink: rgb(182,37,103); // #b72567;
+// ----------------------------
+// #UNITS
+// ----------------------------
+$baseline: 20px !default;
+
+
+// ----------------------------
+// #GRID
+// ----------------------------
+$gw-column: 80px !default;
+$gw-gutter: 20px !default;
+$fg-column: $gw-column !default;
+$fg-gutter: $gw-gutter !default;
+$fg-max-columns: 12 !default;
+$fg-max-width: 1400px !default;
+$fg-min-width: 810px !default;
+
+
+// ----------------------------
+// #COLORS
+// ----------------------------
+$transparent: rgba(0,0,0,0) !default; // used when color value is needed for UI width/transitions but element is transparent
+
+$black:     rgb(0,0,0) !default;
+$black-t0:  rgba($black, 0.125) !default;
+$black-t1:  rgba($black, 0.25) !default;
+$black-t2:  rgba($black, 0.5) !default;
+$black-t3:  rgba($black, 0.75) !default;
+
+$white:     rgb(255,255,255) !default;
+$white-t0:  rgba($white, 0.125) !default;
+$white-t1:  rgba($white, 0.25) !default;
+$white-t2:  rgba($white, 0.5) !default;
+$white-t3:  rgba($white, 0.75) !default;
+
+$gray:      rgb(118,118,118) !default;
+$gray-l1:   tint($gray,20%) !default;
+$gray-l2:   tint($gray,40%) !default;
+$gray-l3:   tint($gray,60%) !default;
+$gray-l4:   tint($gray,80%) !default;
+$gray-l5:   tint($gray,90%) !default;
+$gray-l6:   tint($gray,95%) !default;
+$gray-l7:   tint($gray,99%) !default;
+$gray-d1:   shade($gray,20%) !default;
+$gray-d2:   shade($gray,40%) !default;
+$gray-d3:   shade($gray,60%) !default;
+$gray-d4:   shade($gray,80%) !default;
+
+
+$blue: rgb(0, 120, 176);
+$yellow: rgb(255, 252, 221);
+
+$pink: rgb(182,37,103);
 $pink-l1: tint($pink,20%);
 $pink-l2: tint($pink,40%);
 $pink-l3: tint($pink,60%);
@@ -100,7 +88,7 @@ $pink-u1: desaturate($pink,15%);
 $pink-u2: desaturate($pink,30%);
 $pink-u3: desaturate($pink,45%);

-$red: rgb(178, 6, 16); // #b20610;
+$red: rgb(178, 6, 16);
 $red-l1: tint($red,20%);
 $red-l2: tint($red,40%);
 $red-l3: tint($red,60%);
@@ -117,7 +105,7 @@ $red-u1: desaturate($red,15%);
 $red-u2: desaturate($red,30%);
 $red-u3: desaturate($red,45%);

-$green: rgb(37, 184, 90); // #25b85a;
+$green: rgb(37, 184, 90);
 $green-l1: tint($green,20%);
 $green-l2: tint($green,40%);
 $green-l3: tint($green,60%);
@@ -198,84 +186,81 @@ $ui-notification-height: ($baseline*10);

 // ====================

-// COLORS: social platforms
+// social platforms
 $twitter-blue: #55ACEE;
 $facebook-blue: #3B5998;
 $linkedin-blue: #0077B5;

-// ====================
+// shadows
+$shadow: rgba(0,0,0,0.2) !default;
+$shadow-l1: rgba(0,0,0,0.1) !default;
+$shadow-l2: rgba(0,0,0,0.05) !default;
+$shadow-d1: rgba(0,0,0,0.4) !default;
+$shadow-d2: rgba($black, 0.6) !default;

-// 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.
-//$yellow: rgb(255, 252, 221);
+// system feedback-based colors
+$error-color: rgb(253, 87, 87) !default;
+$warning-color: rgb(181,42,103) !default;
+$confirm-color: rgb(0, 136, 1) !default;
+$active-color: $blue !default;
+$highlight-color: rgb(255,255,0) !default;
+$alert-color: rgb(212, 64, 64) !default;
+$warning-color: rgb(237, 189, 60) !default;
+$success-color: rgb(37, 184, 90) !default;

-// ====================
+// newer color variables
+$dark-gray1: rgb(74,74,74);
+$light-gray1: rgb(242,242,242);
+$light-gray2: rgb(171,171,171);
+$light-gray3: rgb(249,249,249);
+$dark-gray2: rgb(151,151,151);
+$blue1: rgb(74,144,226);
+$blue2: rgb(0,161,229);
+$green1: rgb(97,161,46);
+$red1: rgb(208,2,27);

-// COLORS: old variables
-// DEPRECATED: use colors in lists above
-$error-red: rgb(253, 87, 87);
-$danger-red: rgb(212, 64, 64);
-$light-gray: rgb(221, 221, 221);
-$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);
-$light-gray: rgb(221,221,221); // #dddddd
-
-// ====================
-
-// used by descriptor css
-// DEPRECATED: use colors in lists above
-$lightGrey: rgb(237,241,245); // #edf1f5
-$darkGrey: rgb(136,145,161); // #8891a1
-$lightGrey1: $gray-l3;
-$blue-d1: shade($blue,20%);
-$blue-d2: shade($blue,40%);
-$blue-d4: shade($blue,80%);
-
-// ====================
-
-// edx.org marketing site variables
-$m-gray: rgb(138,140,143); // #8A8C8F
-$m-gray-l1: rgb(151,153,155); // #97999B
-$m-gray-l2: rgb(164,166,168); // #A4A6A8
-$m-gray-l3: rgb(177,178,180); // #B1B2B4
-$m-gray-l4: rgb(245,245,245); // #F5F5F5
-$m-gray-d1: rgb(111, 112, 116); // #6f7074
-$m-gray-d2: rgb(112,114,118); // #707276
-$m-gray-d3: rgb(100,102,104); // #646668
-$m-gray-d4: rgb(5,5,5); // #050505
+// edx-specific: marketing site variables
+$m-gray: rgb(138,140,143); //C8F
+$m-gray-l1: rgb(151,153,155);
+$m-gray-l2: rgb(164,166,168);
+$m-gray-l3: rgb(177,178,180);
+$m-gray-l4: rgb(245,245,245);
+$m-gray-d1: rgb(111, 112, 116);
+$m-gray-d2: rgb(112,114,118);
+$m-gray-d3: rgb(100,102,104);
+$m-gray-d4: rgb(5,5,5);
 $m-gray-t0: rgba($m-gray,0.125);
 $m-gray-t1: rgba($m-gray,0.25);
 $m-gray-t2: rgba($m-gray,0.50);
 $m-gray-t3: rgba($m-gray,0.75);

-$m-blue: rgb(26,161,222); // #1AA1DE
-$m-blue-l1: rgb(43,172,230); // #2BACE6
-$m-blue-l2: rgb(66,181,233); // #42B5E9
-$m-blue-l3: rgb(89,190,236); // #59BEEC
+$m-blue: rgb(26,161,222);
+$m-blue-l1: rgb(43,172,230);
+$m-blue-l2: rgb(66,181,233);
+$m-blue-l3: rgb(89,190,236);
 $m-blue-l4: tint($m-blue,90%);
 $m-blue-l5: tint($m-blue,95%);
 $m-blue-l6: #4bb4fb;
-$m-blue-d1: rgb(23,144,199); // #1790C7
+$m-blue-d1: rgb(23,144,199);
 $m-blue-d2: $blue;
-$m-blue-d3: rgb(18,111,154); // #126F9A
-$m-blue-d4: rgb(10,74,103); // #0A4A67
-$m-blue-d5: rgb(0,158,231); // #009EE7
+$m-blue-d3: rgb(18,111,154);
+$m-blue-d4: rgb(10,74,103);
+$m-blue-d5: rgb(0,158,231);
 $m-blue-d6: #256A97;
 $m-blue-t0: rgba($m-blue,0.125);
 $m-blue-t1: rgba($m-blue,0.25);
 $m-blue-t2: rgba($m-blue,0.50);
 $m-blue-t3: rgba($m-blue,0.75);

-$m-pink: rgb(181,42,103); // #B52A67
-$m-pink-l1: rgb(202,47,115); //#CA2F73
-$m-pink-l2: rgb(211,63,128); //#D33F80
-$m-pink-l3: rgb(215,84,142); //#D7548E
+$m-pink: rgb(181,42,103);
+$m-pink-l1: rgb(202,47,115);
+$m-pink-l2: rgb(211,63,128);
+$m-pink-l3: rgb(215,84,142);
 $m-pink-l4: tint($m-pink,75%);
 $m-pink-l5: tint($m-pink,85%);
-$m-pink-d1: rgb(160,37,91); // #A0255B
-$m-pink-d2: rgb(140,32,79); // #8C204F
-$m-pink-d3: rgb(119,28,68); // #771C44
+$m-pink-d1: rgb(160,37,91);
+$m-pink-d2: rgb(140,32,79);
+$m-pink-d3: rgb(119,28,68);

 $m-green: rgb(0, 136, 1);
 $m-green-s1: rgb(96, 188, 97);
@@ -293,138 +278,100 @@ $m-green-t1: rgba($m-green,0.25);
 $m-green-t2: rgba($m-green,0.50);
 $m-green-t3: rgba($m-green,0.75);

-// ====================
-
-// SHADOWS
-$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);
-
-// ====================
-
-$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);
-$text-color: $dark-gray;
-
-$dark-trans-bg: rgba(0, 0, 0, .75);
-
-$body-bg: rgb(250,250,250);
-$container-bg: $white;
-$header-image: linear-gradient(-90deg, rgba(255,255,255, 1), rgba(230,230,230, 0.9));
-$header-bg: $white;
-$courseware-header-image: linear-gradient(top, rgb(255,255,255), rgb(238,238,238));
-$courseware-header-bg: transparent;
-$footer-bg: $white;
-$courseware-footer-border: none;
-$courseware-footer-shadow: none;
-$courseware-footer-margin: 0px;
-$courseware-border-bottom-color: rgb(68,162,222); // #44a2de
-$courseware-button-border-color: rgb(230,230,230); // #e6e6e6
-$courseware-hover-color: rgb(51,52,53); // #333435
-$courseware-navigation-color: $blue;
-
-// ====================
-
-// STATE: verified
+// edx-specific: verified
 $verified-color-lvl1: $m-green;
 $verified-color-lvl2: $m-green-l1;
 $verified-color-lvl3: $m-green-l2;
 $verified-color-lvl4: $m-green-l3;
 $verified-color-lvl5: $m-green-l4;

-// STATE: professional ed
+// edx-specific: professional ed
 $professional-color-lvl1: $m-pink;
 $professional-color-lvl2: $m-pink-l1;
 $professional-color-lvl3: $m-pink-l2;
 $professional-color-lvl4: $m-pink-l3;
 $professional-color-lvl5: $m-pink-l4;

-// STATE: honor code
+// edx-specific: honor code
 $honorcode-color-lvl1: rgb(50, 165, 217);
 $honorcode-color-lvl2: tint($honorcode-color-lvl1, 33%);

-// STATE: audit
-$audit-color-lvl1: $light-gray;
+// edx-specific: audit
+$audit-color-lvl1: rgb(221, 221, 221);
 $audit-color-lvl2: tint($audit-color-lvl1, 33%);

-// STATE: credit
+// edx-specific: credit
 $credit-color-base: rgb(244,195,0); // accessible with black text

-// ====================

-// ACTIONS: general
-$button-bg-image: linear-gradient(rgb(255,255,255) 0%, rgb(250,250,250) 50%, rgb(237,237,237) 50%, rgb(220,220,220) 100%);
-$button-bg-color: transparent;
-$button-bg-hover-color: $white;
+// ----------------------------
+// #TYPOGRAPHY
+// ----------------------------
+$sans-serif: 'Open Sans', $verdana, sans-serif !default;
+$monospace: Monaco, 'Bitstream Vera Sans Mono', 'Lucida Console', monospace !default;
+$body-font-family: $sans-serif !default;
+$serif: $georgia !default;

-// ACTIONS: primary
-$action-primary-bg: $m-blue-d3;
-$action-primary-fg: $white;
-$action-primary-shadow: $m-blue-d4;
+// newer variables/standards
+$f-serif: 'Bree Serif', Georgia, Cambria, 'Times New Roman', Times, serif !default;
+$f-sans-serif: 'Open Sans','Helvetica Neue', Helvetica, Arial, sans-serif !default;
+$f-monospace: 'Bitstream Vera Sans Mono', Consolas, Courier, monospace !default;

-// ACTIONS: primary - focused - hover/active pseudo states
-$action-primary-focused-bg: $m-blue-d1;
-$action-primary-focused-fg: $white;
+$font-light: 300 !default;
+$font-regular: 400 !default;
+$font-semibold: 600 !default;
+$font-bold: 700 !default;

-// ACTIONS: primary - 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;
+$m-base-font-size: em(15) !default;

-// ACTIONS: 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;
+// ----------------------------
+// #DEPTH
+// ----------------------------

-// ACTIONS: secondary - focused - hover/active pseudo states
-$action-secondary-focused-bg: $m-pink-l3;
-$action-secondary-focused-fg: $white;

-// ACTIONS: secondary - 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;
+// ----------------------------
+// #TIMING
+// ----------------------------
+$tmg-s3: 3.0s !default;
+$tmg-s2: 2.0s !default;
+$tmg-s1: 1.0s !default;
+$tmg-avg: 0.75s !default;
+$tmg-f1: 0.50s !default;
+$tmg-f2: 0.25s !default;
+$tmg-f3: 0.125s !default;

-// ACTIONS: secondary - disabled
-$action-secondary-disabled-bg: $m-gray-d3;
-$action-secondary-disabled-fg: $white;

-// HEADER: graphic-based page titles
-$header-graphic-super-color: $m-blue-d1;
-$header-graphic-sub-color: $m-gray-d2;
+// ----------------------------
+// #FORMS
+// ----------------------------
+$form-bg-color: $white !default;

-// State-based colors
-$error-color: $error-red;
-$warning-color: $m-pink;
-$confirm-color: $m-green;
-$active-color: $blue;
-$highlight-color: rgb(255,255,0);
+// ----------------------------
+// #APPLICATIONS
+// ----------------------------
+// font sizes
+$body-font-size: em(14) !default;
+$body-line-height: golden-ratio(.875em, 1) !default;

-// Notifications
-$notify-banner-bg-1: rgb(56,56,56);
-$notify-banner-bg-2: rgb(136,136,136);
-$notify-banner-bg-3: $shadow-l2;
+$base-font-color: rgb(60,60,60) !default;
+$baseFontColor: $base-font-color;

-$alert-color: rgb(212, 64, 64); //rich red
-$warning-color: rgb(237, 189, 60); //rich yellow
-$success-color: rgb(37, 184, 90); //rich green
+$lighter-base-font-color: rgb(100,100,100) $base-font-color;
+$very-light-text: rgb(255,255,255) !default;
+$text-color: rgb(51, 51, 51) !default;

-// ====================
+// borders
+$border-color-1: rgb(190,190,190) !default;
+$border-color-2: rgb(200,200,200) !default;
+$border-color-3: rgb(100,100,100) !default;
+$border-color-4: rgb(252,252,252) !default;
+$border-color-l1: $m-gray-l1 !default;
+$border-color-l2: $m-gray-l2 !default;
+$border-color-l3: $m-gray-l3 !default;
+$border-color-l4: $m-gray-l4 !default;

-// MISC: visual horizontal rules
+// visual horizontal rules
 $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));
@@ -432,116 +379,147 @@ $faded-hr-image-4: linear-gradient(180deg, rgba(240,240,240, 0) 0%, rgba(240,240
 $faded-hr-image-5: linear-gradient(180deg, rgba(255,255,255, 0) 0%, rgba(255,255,255, 0.8) 50%, rgba(255,255,255, 0));
 $faded-hr-image-6: linear-gradient(90deg, rgba(255,255,255, 0) 0%, rgba(255,255,255, 0.6) 50%, rgba(255,255,255, 0));

-// MISC: dashboard
-$dashboard-profile-header-image: linear-gradient(-90deg, rgb(255,255,255), rgb(245,245,245));
-$dashboard-profile-header-color: transparent;
-$dashboard-profile-color: rgb(252,252,252);
-$dot-color: $light-gray;
-$dashboard-course-cover-border: $light-gray;
+// notifications
+$notify-banner-bg-1: rgb(56,56,56) !default;
+$notify-banner-bg-2: rgb(136,136,136) !default;
+$notify-banner-bg-3: $shadow-l2 !default;
+$msg-bg: $m-blue-d3 !default;

-// MISC: course assets
-$content-wrapper-bg: $white;
-$course-bg-color: #f2f2f2;
-$course-bg-image: url(../images/bg-texture.png);
-$account-content-wrapper-bg: shade($body-bg, 2%);
-$course-profile-bg: rgb(245,245,245);
-$course-header-bg: rgba(255,255,255, 0.93);
+// actions
+$button-bg-image: linear-gradient(rgb(255,255,255) 0%, rgb(250,250,250) 50%, rgb(237,237,237) 50%, rgb(220,220,220) 100%) !default;
+$button-bg-color: transparent !default;
+$button-bg-hover-color: $white !default;

-// MISC: course background texture
-//$course-bg-image: url(../images/bg-texture.png);
+// action - primary
+$action-primary-bg: $m-blue-d3 !default;
+$action-primary-fg: $white !default;
+$action-primary-shadow: $m-blue-d4 !default;
+$action-primary-focused-bg: $m-blue-d1 !default;
+$action-primary-focused-fg: $white !default;
+$action-primary-active-bg: $m-blue !default;
+$action-primary-active-fg: $m-blue-d3 !default;
+$action-primary-active-shadow: $m-blue-d2 !default;
+$action-primary-active-focused-fg: $m-blue-d4 !default;
+$action-primary-active-focused-shadow: $m-blue-d3 !default;
+$action-primary-disabled-bg: $m-gray-d3 !default;
+$action-prmary-disabled-fg: $white !default;

-// MISC: borders
-$border-color-1: rgb(190,190,190);
-$border-color-2: rgb(200,200,200);
-$border-color-3: rgb(100,100,100);
-$border-color-4: rgb(252,252,252);
-$border-color-l1: $m-gray-l1;
-$border-color-l2: $m-gray-l2;
-$border-color-l3: $m-gray-l3;
-$border-color-l4: $m-gray-l4;
+// action - secondary
+$action-secondary-bg: $m-pink !default;
+$action-secondary-fg: $white !default;
+$action-secondary-shadow: $m-pink-d2 !default;
+$action-secondary-focused-bg: $m-pink-l3 !default;
+$action-secondary-focused-fg: $white !default;
+$action-secondary-active-bg: $m-pink-l2 !default;
+$action-secondary-active-fg: $m-pink-d1 !default;
+$action-secondary-active-shadow: $m-pink-d1 !default;
+$action-secondary-active-focused-fg: $m-pink-d3 !default;
+$action-secondary-active-focused-shadow: $m-pink-d2 !default;
+$action-secondary-disabled-bg: $m-gray-d3 !default;
+$action-secondary-disabled-fg: $white !default;

-// MISC: links and buttons
-$link-color: $blue;
-$link-color-d1: $blue;
-$link-hover: $blue-l1; // from our Pattern Library http://ux.edx.org/elements/colors/
-$site-status-color: $pink;
-$button-color: $blue;
-$button-archive-color: rgb(238,238,238); // #eeeeee
+// actions - misc
+$link-color: $blue !default;
+$link-color-d1: $blue !default;
+$link-hover: $blue-l1 !default; // from our Pattern Library http://ux.edx.org/elements/colors/
+$site-status-color: $pink !default;
+$button-color: $blue !default;
+$button-archive-color: rgb(238,238,238) !default; // #eeeeee

-// MISC: shadow, form, modal
-$shadow-color: $blue;
-$form-bg-color: $white;
-$modal-bg-color: rgb(245,245,245);
+// larger, random elements
+$dark-trans-bg: rgba(0, 0, 0, .75);

-// MISC: sidebar
+$body-bg: rgb(250,250,250) !default;
+
+$container-bg: $white !default;
+
+// header
+$header-image: linear-gradient(-90deg, rgba(255,255,255, 1), rgba(230,230,230, 0.9)) !default;
+$header-bg: $white !default;
+$header-graphic-super-color: $m-blue-d1;
+$header-graphic-sub-color: $m-gray-d2;
+$header-sans-serif: 'Open Sans', Arial, Helvetica, sans-serif !default;
+$header_image_margin: -69px !default;
+
+// footer
+$footer-bg: $white !default;
+$footer_margin: ($baseline/4) 0 ($baseline*1.5) 0 !default;
+
+// modal
+$shadow-color: $blue !default;
+$modal-bg-color: rgb(245,245,245) !default;
+
+// courseware elements
+$courseware-header-image: linear-gradient(top, rgb(255,255,255), rgb(238,238,238)) !default;
+$courseware-header-bg: transparent !default;
+$courseware-footer-border: none !default;
+$courseware-footer-shadow: none !default;
+$courseware-footer-margin: 0px !default;
+$courseware-border-bottom-color: rgb(68,162,222) !default;
+$courseware-button-border-color: rgb(230,230,230) !default;
+$courseware-hover-color: rgb(51,52,53) !default;
+$courseware-navigation-color: $blue !default;
+
+// homepage, onboarding, and course discovery
+$homepage__header--gradient__color--alpha: lighten($gray, 15%) !default;
+$homepage__header--gradient__color--bravo: saturate($gray, 30%) !default;
+$homepage__header--background: lighten($gray, 15%) !default;
+$course-card-height: ($baseline*18) !default;
+$course-image-height: ($baseline*8) !default;
+$course-info-height: ($baseline*10) !default;
+$course-title-height: ($baseline*3.6) !default;
+$homepage-bg-image: none !default;
+$login-banner-image: url('#{$static-path}/images/edx-theme/edx-background-banner-account.png') !default;
+$register-banner-image: url('#{$static-path}/images/edx-theme/edx-background-banner-account.png') !default;
+$passwordreset-banner-image: url('#{$static-path}/images/edx-theme/edx-background-banner-account.png') !default;
+
+$video-thumb-url: '#{$static-path}/images/homepage-hero-video-thumb.jpg' !default;
+
+// dashboard elements
+$dashboard-profile-header-image: linear-gradient(-90deg, rgb(255,255,255), rgb(245,245,245)) !default;
+$dashboard-profile-header-color: transparent !default;
+$dashboard-profile-color: rgb(252,252,252) !default;
+$dot-color: rgb(221, 221, 221) !default;
+$dashboard-course-cover-border: rgb(221, 221, 221) !default;
+
+// course elements
+$content-wrapper-bg: $white !default;
+$course-bg-color: #f2f2f2 !default;
+$course-bg-image: url('#{$static-path}/images/bg-texture.png') !default;
+$account-content-wrapper-bg: shade($body-bg, 2%) !default;
+$course-profile-bg: rgb(245,245,245) !default;
+$course-header-bg: rgba(255,255,255, 0.93) !default;
+
+// search/listing results
+$result-highlight-color-base: rgba($highlight-color, 0.25) !default;
+
+// sidebar
 $sidebar-chapter-bg-top: rgba(255, 255, 255, .5);
 $sidebar-chapter-bg-bottom: rgba(255, 255, 255, 0);
-$sidebar-chapter-bg: rgb(246,246,246); // #f6f6f6
-$sidebar-active-image: linear-gradient(top, rgb(230,230,230), rgb(214,214,214));
-
-// TOP HEADER IMAGE MARGIN
-$header_image_margin: -69px;
-
-//FOOTER MARGIN
-$footer_margin: ($baseline/4) 0 ($baseline*1.5) 0;
-
-// ====================
-
-// VIEWS: homepage
-$homepage__header--gradient__color--alpha: lighten($gray, 15%);
-$homepage__header--gradient__color--bravo: saturate($gray, 30%);
-$homepage__header--background: lighten($gray, 15%);
-
-// VIEWS: homepage and courses
-$course-card-height: ($baseline*18);
-$course-image-height: ($baseline*8);
-$course-info-height: ($baseline*10);
-$course-title-height: ($baseline*3.6);
-
-// ====================
-
-// IMAGES: backgrounds
-$homepage-bg-image: none;
-
-$login-banner-image: url(../images/edx-theme/edx-background-banner-account.png);
-$register-banner-image: url(../images/edx-theme/edx-background-banner-account.png);
-$passwordreset-banner-image: url(../images/edx-theme/edx-background-banner-account.png);
-
-$video-thumb-url: '../images/homepage-hero-video-thumb.jpg';
-
-// ====================
-
-// SPLINT: new standards
-
-// SPLINT: fonts
-$f-serif: 'Bree Serif', Georgia, Cambria, 'Times New Roman', Times, serif;
-$f-sans-serif: 'Open Sans','Helvetica Neue', Helvetica, Arial, sans-serif;
-$f-monospace: 'Bitstream Vera Sans Mono', Consolas, Courier, monospace;
-
-// Header specific sans-serif
-$header-sans-serif: 'Open Sans', Arial, Helvetica, sans-serif;
-
-// SPLINT: colors
-
-$msg-bg: $action-primary-bg;
+$sidebar-chapter-bg: rgb(246,246,246) !default;
+$sidebar-active-image: linear-gradient(top, rgb(230,230,230), rgb(214,214,214)) !default;


-$dark-gray1: rgb(74,74,74); // #
-$light-gray1: rgb(242,242,242); // #f2f2f2
-$light-gray2: rgb(171,171,171); // #ababab
-$light-gray3: rgb(249,249,249); // #f9f9f9
-$dark-gray2: rgb(151,151,151); // #979797
-$blue1: rgb(74,144,226); // #4A90E2
-$blue2: rgb(0,161,229); // #00A1E5
-$green1: rgb(97,161,46); // #61A12E
-$red1: rgb(208,2,27); // #D0021B
+// student notes
+$student-notes-highlight-color-base: saturate($yellow, 65%) !default;
+$student-notes-highlight-color: tint($student-notes-highlight-color-base, 50%) !default;
+$student-notes-highlight-color-focus: $student-notes-highlight-color-base !default;

-// +case: search/result highlight
-// --------------------
-$result-highlight-color-base: rgba($highlight-color, 0.25);
+// ----------------------------
+// #DEPRECATED
+// ----------------------------
+$danger-red: rgb(212, 64, 64) !default;
+$light-gray: rgb(221, 221, 221) !default;
+$dark-gray: rgb(51, 51, 51) !default;
+$border-color: rgb(200, 200, 200) !default;
+$sidebar-color: rgb(246, 246, 246) !default;
+$outer-border-color: rgb(170, 170, 170);
+$light-gray: rgb(221,221,221) !default;

-// +feature: student notes
-// --------------------
-$student-notes-highlight-color-base: saturate($yellow, 65%);
-$student-notes-highlight-color: tint($student-notes-highlight-color-base, 50%);
-$student-notes-highlight-color-focus: $student-notes-highlight-color-base;
+// used by descriptor css
+$lightGrey: rgb(237,241,245) !default;
+$darkGrey: rgb(136,145,161) !default;
+$lightGrey1: $gray-l3 !default;
+$blue-d1: shade($blue,20%);
+$blue-d2: shade($blue,40%);
+$blue-d4: shade($blue,80%);
--- a/lms/static/sass/course-rtl.scss
+++ b/lms/static/sass/course-rtl.scss
@@ -7,8 +7,8 @@
@import 'vendor/bi-app/bi-app-rtl'; // set the layout for right to left languages

@import 'base/reset';
-@import 'base/font_face';
@import 'base/variables';
+@import 'base/font_face';
@import 'base/mixins';


--- a/lms/static/sass/course.scss
+++ b/lms/static/sass/course.scss
@@ -7,8 +7,8 @@
@import 'vendor/bi-app/bi-app-ltr'; // set the layout for left to right languages

@import 'base/reset';
-@import 'base/font_face';
@import 'base/variables';
+@import 'base/font_face';
@import 'base/mixins';


--- a/lms/static/sass/course/_gradebook.scss
+++ b/lms/static/sass/course/_gradebook.scss
@@ -20,7 +20,7 @@ div.gradebook-wrapper {
    	@include box-sizing(border-box);
    	border-radius: 13px;
    	border: 1px solid $table-border-color;
-    	background: url(../images/search-icon.png) no-repeat 9px center $gray-l6;
+    	background: url('#{$static-path}/images/search-icon.png') no-repeat 9px center $gray-l6;
    	font-family: $sans-serif;
    	font-size: 11px;
    	box-shadow: 0 1px 4px rgba(0, 0, 0, .12) inset;
--- a/lms/static/sass/course/_info.scss
+++ b/lms/static/sass/course/_info.scss
@@ -33,7 +33,7 @@ div.info-wrapper {
        h2 {
          font-size: $body-font-size;
          font-weight: bold;
-          background: url('../images/calendar-icon.png') 0 center no-repeat;
+          background: url('#{$static-path}/images/calendar-icon.png') 0 center no-repeat;
          padding-left: $baseline;
        }

@@ -183,7 +183,7 @@ div.info-wrapper {
        }

        div.hitarea {
-          background-image: url('../images/treeview-default.gif') no-repeat;
+          background-image: url('#{$static-path}/images/treeview-default.gif') no-repeat;
          display: block;
          height: 100%;
          margin-left: 0;
--- a/lms/static/sass/course/_textbook.scss
+++ b/lms/static/sass/course/_textbook.scss
@@ -72,7 +72,7 @@ div.book-wrapper {
        }

        div.hitarea {
-          background-image: url('../images/treeview-default.gif');
+          background-image: url('#{$static-path}/images/treeview-default.gif');

          position: relative;
          top: 4px;
@@ -150,7 +150,7 @@ div.book-wrapper {
            left: 0;

            a {
-              background-image: url('../images/textbook/textbook-left.png');
+              background-image: url('#{$static-path}/images/textbook/textbook-left.png');
            }
          }

@@ -158,7 +158,7 @@ div.book-wrapper {
            right: 0;

            a {
-              background-image: url('../images/textbook/textbook-right.png');
+              background-image: url('#{$static-path}/images/textbook/textbook-right.png');
            }
          }

@@ -207,7 +207,7 @@ div.book-wrapper {
        padding: 0;

        a {
-          background-image: url('../images/slide-right-icon.png');
+          background-image: url('#{$static-path}/images/slide-right-icon.png');
        }

        h2 {
--- a/lms/static/sass/course/base/_extends.scss
+++ b/lms/static/sass/course/base/_extends.scss
@@ -152,7 +152,7 @@ h1.top-header {
    position: relative;

    a {
-      background: #f6f6f6 url('../images/slide-left-icon.png') center center no-repeat;
+      background: #f6f6f6 url('#{$static-path}/images/slide-left-icon.png') center center no-repeat;
      border: 1px solid #D3D3D3;
      border-radius: 3px 0 0 3px;
      height: 16px;
--- a/lms/static/sass/course/courseware/_amplifier.scss
+++ b/lms/static/sass/course/courseware/_amplifier.scss
@@ -231,7 +231,7 @@ section.tool-wrapper {
        }

        .ui-slider-handle {
-          background: lighten( #586e75, 5% ) url('../images/amplifier-slider-handle.png') center no-repeat;
+          background: lighten( #586e75, 5% ) url('#{$static-path}/images/amplifier-slider-handle.png') center no-repeat;
          border: 1px solid darken(#002b36, 8%);
          box-shadow: inset 0 1px 0 lighten( #586e75, 20% );
          margin-top: -.3em;
--- a/lms/static/sass/course/courseware/_courseware.scss
+++ b/lms/static/sass/course/courseware/_courseware.scss
@@ -614,7 +614,7 @@ div.course-wrapper {

    div.staff_actions {
      p.error {
-        color: $error-red
+        color: $error-color
      }
      p.success {
        color: $success-color;
@@ -667,7 +667,7 @@ div.course-wrapper {

      header#open_close_accordion {
        a {
-          background-image: url('../images/slide-right-icon.png');
+          background-image: url('#{$static-path}/images/slide-right-icon.png');
        }
      }

--- a/lms/static/sass/course/discussion/_form-wmd-toolbar.scss
+++ b/lms/static/sass/course/discussion/_form-wmd-toolbar.scss
@@ -52,7 +52,7 @@
  margin-left: ($baseline/4);
  margin-right: ($baseline/4);
  position: absolute;
-  background-image: url(../images/wmd-buttons.png);
+  background-image: url('#{$static-path}/images/wmd-buttons.png');
  background-repeat: no-repeat;
  background-position: 0px 0px;
  display: inline-block;
--- a/lms/static/sass/course/instructor/_instructor_2.scss
+++ b/lms/static/sass/course/instructor/_instructor_2.scss
@@ -137,12 +137,12 @@
  .request-response-error {
    margin: 0;
    padding-bottom: ($baseline);
-    color: $error-red;
+    color: $error-color;
  }

  .display-errors {
    line-height: 3em;
-    color: $error-red;
+    color: $error-color;
  }

  .slickgrid {
--- a/lms/static/sass/course/modules/_calculator.scss
+++ b/lms/static/sass/course/modules/_calculator.scss
@@ -17,7 +17,7 @@

  .calc {
    @include transition(background-color $tmg-f2 ease-in-out 0s);
-    background: url("../images/calc-icon.png") $black-t1 no-repeat center;
+    background: url("#{$static-path}/images/calc-icon.png") $black-t1 no-repeat center;
    border-bottom: 0;
    color: $white;
    float: right;
@@ -33,7 +33,7 @@
    }

    &.closed {
-      background-image: url("../images/close-calc-icon.png");
+      background-image: url("#{$static-path}/images/close-calc-icon.png");
      background-color: $black;
      top: -36px;
    }
@@ -155,7 +155,7 @@
            height: 35px;
            width: 35px;
            border: none;
-            background: url("../images/info-icon.png") center center no-repeat;
+            background: url("#{$static-path}/images/info-icon.png") center center no-repeat;
            color: $white;

            &:focus {
--- a/lms/static/sass/course/wiki/_wiki.scss
+++ b/lms/static/sass/course/wiki/_wiki.scss
@@ -100,7 +100,7 @@ section.wiki {
      width: 180px;
      height: 27px;
      padding: 0 15px 0 35px;
-      background: url(../images/search-icon.png) no-repeat 9px center $gray-l6;
+      background: url('#{$static-path}/images/search-icon.png') no-repeat 9px center $gray-l6;
      border: 1px solid #c8c8c8;
      border-radius: 14px;
      box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12) inset;
--- a/lms/static/sass/discussion/_discussion.scss
+++ b/lms/static/sass/discussion/_discussion.scss
@@ -417,7 +417,7 @@ body.discussion {
  .discussion-article {
    position: relative;
    min-height: 500px;
-    background-image: url(../images/bg-texture.png);
+    background-image: url('#{$static-path}/images/bg-texture.png');

    a {
      word-wrap: break-word;
@@ -598,7 +598,7 @@ body.discussion {
      background: transparent;

      span {
-        background-image: url(../images/wmd-buttons-transparent.png);
+        background-image: url('#{$static-path}/images/wmd-buttons-transparent.png');
      }
    }
  }
@@ -720,7 +720,7 @@ body.discussion {
  }

  .loading-animation {
-    background-image: url(../images/spinner.gif);
+    background-image: url('#{$static-path}/images/spinner.gif');
  }

  .discussion-show {
@@ -742,7 +742,7 @@ body.discussion {
      @include margin-right(6px);
      width: 21px;
      height: 19px;
-      background: url(../images/show-hide-discussion-icon.png) no-repeat;
+      background: url('#{$static-path}/images/show-hide-discussion-icon.png') no-repeat;
      background-position: -21px 0;
    }
  }
--- a/lms/static/sass/discussion/views/_create-edit-post.scss
+++ b/lms/static/sass/discussion/views/_create-edit-post.scss
@@ -180,7 +180,7 @@
    margin-bottom: $baseline;
    border-radius: 3px;
    padding: 0;
-    background: $error-red;
+    background: $error-color;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) inset, 0 1px 0 rgba(255, 255, 255, .2);
    color: $white;
    list-style: none;
@@ -188,7 +188,7 @@
    .post-error {
      padding: ($baseline/2) $baseline 12px 45px;
      border-bottom: 1px solid $red;
-      background: url(../images/white-error-icon.png) no-repeat 15px 14px;
+      background: url('#{$static-path}/images/white-error-icon.png') no-repeat 15px 14px;

      &:last-child {
        border-bottom: none;
--- a/lms/static/sass/elements/_creative-commons.scss
+++ b/lms/static/sass/elements/_creative-commons.scss
@@ -1,10 +1,10 @@
@font-face {
  font-family: 'CreativeCommons';
-  src: url('../fonts/CreativeCommons/cc.eot');
-  src: url('../fonts/CreativeCommons/cc.eot#iefix') format('embedded-opentype'),
-       url('../fonts/CreativeCommons/cc.woff') format('woff'),
-       url('../fonts/CreativeCommons/cc.ttf') format('truetype'),
-       url('../fonts/CreativeCommons/cc.svg#CreativeCommons') format('svg');
+  src: url('#{$static-path}/fonts/CreativeCommons/cc.eot');
+  src: url('#{$static-path}/fonts/CreativeCommons/cc.eot#iefix') format('embedded-opentype'),
+       url('#{$static-path}/fonts/CreativeCommons/cc.woff') format('woff'),
+       url('#{$static-path}/fonts/CreativeCommons/cc.ttf') format('truetype'),
+       url('#{$static-path}/fonts/CreativeCommons/cc.svg#CreativeCommons') format('svg');
  font-weight: normal;
  font-style: normal;
 }
--- a/lms/static/sass/lms-course-rtl.scss
+++ b/lms/static/sass/lms-course-rtl.scss
@@ -0,0 +1,13 @@
+@import 'bourbon/bourbon';
+@import 'vendor/bi-app/bi-app-rtl'; // set the layout for right to left languages
+
+@import 'base/reset';
+@import 'base/variables';
+@import 'base/font_face';
+@import 'base/mixins';
+
+// This comment is used by preprocess_assets.py to include resources from a
+// theme, for old-style deprecated theming.
+//<THEME-OVERRIDE>
+
+@import 'build-course'; // shared app style assets/rendering
--- a/lms/static/sass/lms-course-rtl.scss.mako
+++ b/lms/static/sass/lms-course-rtl.scss.mako
@@ -1,22 +0,0 @@
-@import 'bourbon/bourbon';
-@import 'vendor/bi-app/bi-app-rtl'; // set the layout for right to left languages
-
-@import 'base/reset';
-@import 'base/font_face';
-@import 'base/variables';
-@import 'base/mixins';
-
-## THEMING
-## -------
-## Set up this file to import an edX theme library if the environment
-## indicates that a theme should be used. The assumption is that the
-## theme resides outside of this main edX repository, in a directory
-## called themes/<theme-name>/, with its base Sass file in
-## themes/<theme-name>/static/sass/_<theme-name>.scss. That one entry
-## point can be used to @import in as many other things as needed.
-% if env["FEATURES"].get("USE_CUSTOM_THEME", False):
-  // import theme's Sass overrides
-  @import '${env.get('THEME_NAME')}';
-% endif
-
-@import 'build-course'; // shared app style assets/rendering
--- a/lms/static/sass/lms-course.scss
+++ b/lms/static/sass/lms-course.scss
@@ -0,0 +1,13 @@
+@import 'bourbon/bourbon';
+@import 'vendor/bi-app/bi-app-ltr'; // set the layout for left to right languages
+
+@import 'base/reset';
+@import 'base/variables';
+@import 'base/font_face';
+@import 'base/mixins';
+
+// This comment is used by preprocess_assets.py to include resources from a
+// theme, for old-style deprecated theming.
+//<THEME-OVERRIDE>
+
+@import 'build-course'; // shared app style assets/rendering
--- a/lms/static/sass/lms-course.scss.mako
+++ b/lms/static/sass/lms-course.scss.mako
@@ -1,22 +0,0 @@
-@import 'bourbon/bourbon';
-@import 'vendor/bi-app/bi-app-ltr'; // set the layout for left to right languages
-
-@import 'base/reset';
-@import 'base/font_face';
-@import 'base/variables';
-@import 'base/mixins';
-
-## THEMING
-## -------
-## Set up this file to import an edX theme library if the environment
-## indicates that a theme should be used. The assumption is that the
-## theme resides outside of this main edX repository, in a directory
-## called themes/<theme-name>/, with its base Sass file in
-## themes/<theme-name>/static/sass/_<theme-name>.scss. That one entry
-## point can be used to @import in as many other things as needed.
-% if env["FEATURES"].get("USE_CUSTOM_THEME", False):
-  // import theme's Sass overrides
-  @import '${env.get('THEME_NAME')}';
-% endif
-
-@import 'build-course'; // shared app style assets/rendering
--- a/lms/static/sass/lms-footer-rtl.scss
+++ b/lms/static/sass/lms-footer-rtl.scss
@@ -0,0 +1,26 @@
+// Footer for OpenEdX (right-to-left)
+// ==================================
+
+// libs and resets *do not edit*
+@import 'bourbon/bourbon'; // lib - bourbon
+@import 'vendor/bi-app/bi-app-rtl'; // set the layout for right to left languages
+
+// base - utilities
+@import 'base/variables';
+@import 'base/mixins';
+
+// This comment is used by preprocess_assets.py to include resources from a
+// theme, for old-style deprecated theming.
+//<THEME-OVERRIDE>
+
+footer#footer-openedx {
+    @import 'base/reset';
+    @import 'base/extends';
+    @import 'base/base';
+}
+
+// base - elements
+@import 'elements/typography';
+
+// shared - platform
+@import 'shared/footer';
--- a/lms/static/sass/lms-footer-rtl.scss.mako
+++ b/lms/static/sass/lms-footer-rtl.scss.mako
@@ -1,35 +0,0 @@
-// Footer for OpenEdX (right-to-left)
-// ==================================
-
-// libs and resets *do not edit*
-@import 'bourbon/bourbon'; // lib - bourbon
-@import 'vendor/bi-app/bi-app-rtl'; // set the layout for right to left languages
-
-// base - utilities
-@import 'base/variables';
-@import 'base/mixins';
-
-## THEMING
-## -------
-## Set up this file to import an edX theme library if the environment
-## indicates that a theme should be used. The assumption is that the
-## theme resides outside of this main edX repository, in a directory
-## called themes/<theme-name>/, with its base Sass file in
-## themes/<theme-name>/static/sass/_<theme-name>.scss. That one entry
-## point can be used to @import in as many other things as needed.
-% if env["FEATURES"].get("USE_CUSTOM_THEME", False):
-  // import theme's Sass overrides
-  @import '${env.get('THEME_NAME')}';
-% endif
-
-footer#footer-openedx {
-    @import 'base/reset';
-    @import 'base/extends';
-    @import 'base/base';
-}
-
-// base - elements
-@import 'elements/typography';
-
-// shared - platform
-@import 'shared/footer';
--- a/lms/static/sass/lms-footer.scss
+++ b/lms/static/sass/lms-footer.scss
@@ -0,0 +1,26 @@
+// Footer for OpenEdX (left-to-right)
+// ==================================
+
+// libs and resets *do not edit*
+@import 'bourbon/bourbon'; // lib - bourbon
+@import 'vendor/bi-app/bi-app-ltr'; // set the layout for left to right languages
+
+// base - utilities
+@import 'base/variables';
+@import 'base/mixins';
+
+// This comment is used by preprocess_assets.py to include resources from a
+// theme, for old-style deprecated theming.
+//<THEME-OVERRIDE>
+
+footer#footer-openedx {
+    @import 'base/reset';
+    @import 'base/extends';
+    @import 'base/base';
+}
+
+// base - elements
+@import 'elements/typography';
+
+// shared - platform
+@import 'shared/footer';
--- a/lms/static/sass/lms-footer.scss.mako
+++ b/lms/static/sass/lms-footer.scss.mako
@@ -1,35 +0,0 @@
-// Footer for OpenEdX (left-to-right)
-// ==================================
-
-// libs and resets *do not edit*
-@import 'bourbon/bourbon'; // lib - bourbon
-@import 'vendor/bi-app/bi-app-ltr'; // set the layout for left to right languages
-
-// base - utilities
-@import 'base/variables';
-@import 'base/mixins';
-
-## THEMING
-## -------
-## Set up this file to import an edX theme library if the environment
-## indicates that a theme should be used. The assumption is that the
-## theme resides outside of this main edX repository, in a directory
-## called themes/<theme-name>/, with its base Sass file in
-## themes/<theme-name>/static/sass/_<theme-name>.scss. That one entry
-## point can be used to @import in as many other things as needed.
-% if env["FEATURES"].get("USE_CUSTOM_THEME", False):
-  // import theme's Sass overrides
-  @import '${env.get('THEME_NAME')}';
-% endif
-
-footer#footer-openedx {
-    @import 'base/reset';
-    @import 'base/extends';
-    @import 'base/base';
-}
-
-// base - elements
-@import 'elements/typography';
-
-// shared - platform
-@import 'shared/footer';
--- a/lms/static/sass/lms-main-rtl.scss
+++ b/lms/static/sass/lms-main-rtl.scss
@@ -0,0 +1,21 @@
+// lms - css application architecture
+// ====================
+
+// libs and resets *do not edit*
+@import 'bourbon/bourbon'; // lib - bourbon
+@import 'vendor/bi-app/bi-app-rtl'; // set the layout for right to left languages
+@import 'base/variables-rtl';
+
+// BASE  *default edX offerings*
+// ====================
+
+// base - utilities
+@import 'base/reset';
+@import 'base/variables';
+@import 'base/mixins';
+
+// This comment is used by preprocess_assets.py to include resources from a
+// theme, for old-style deprecated theming.
+//<THEME-OVERRIDE>
+
+@import 'build-lms'; // shared app style assets/rendering
--- a/lms/static/sass/lms-main-rtl.scss.mako
+++ b/lms/static/sass/lms-main-rtl.scss.mako
@@ -1,30 +0,0 @@
-// lms - css application architecture
-// ====================
-
-// libs and resets *do not edit*
-@import 'bourbon/bourbon'; // lib - bourbon
-@import 'vendor/bi-app/bi-app-rtl'; // set the layout for right to left languages
-@import 'base/variables-rtl';
-
-// BASE  *default edX offerings*
-// ====================
-
-// base - utilities
-@import 'base/reset';
-@import 'base/variables';
-@import 'base/mixins';
-
-## THEMING
-## -------
-## Set up this file to import an edX theme library if the environment
-## indicates that a theme should be used. The assumption is that the
-## theme resides outside of this main edX repository, in a directory
-## called themes/<theme-name>/, with its base Sass file in
-## themes/<theme-name>/static/sass/_<theme-name>.scss. That one entry
-## point can be used to @import in as many other things as needed.
-% if env["FEATURES"].get("USE_CUSTOM_THEME", False):
-  // import theme's Sass overrides
-  @import '${env.get('THEME_NAME')}';
-% endif
-
-@import 'build-lms'; // shared app style assets/rendering
--- a/lms/static/sass/lms-main.scss
+++ b/lms/static/sass/lms-main.scss
@@ -0,0 +1,20 @@
+// lms - css application architecture
+// ====================
+
+// libs and resets *do not edit*
+@import 'bourbon/bourbon'; // lib - bourbon
+@import 'vendor/bi-app/bi-app-ltr'; // set the layout for left to right languages
+
+// BASE  *default edX offerings*
+// ====================
+
+// base - utilities
+@import 'base/reset';
+@import 'base/variables';
+@import 'base/mixins';
+
+// This comment is used by preprocess_assets.py to include resources from a
+// theme, for old-style deprecated theming.
+//<THEME-OVERRIDE>
+
+@import 'build-lms'; // shared app style assets/rendering
--- a/lms/static/sass/lms-main.scss.mako
+++ b/lms/static/sass/lms-main.scss.mako
@@ -1,30 +0,0 @@
-// lms - css application architecture
-// ====================
-
-// libs and resets *do not edit*
-@import 'bourbon/bourbon'; // lib - bourbon
-@import 'vendor/bi-app/bi-app-ltr'; // set the layout for left to right languages
-@import 'base/variables-ltr';
-
-// BASE  *default edX offerings*
-// ====================
-
-// base - utilities
-@import 'base/reset';
-@import 'base/variables';
-@import 'base/mixins';
-
-## THEMING
-## -------
-## Set up this file to import an edX theme library if the environment
-## indicates that a theme should be used. The assumption is that the
-## theme resides outside of this main edX repository, in a directory
-## called themes/<theme-name>/, with its base Sass file in
-## themes/<theme-name>/static/sass/_<theme-name>.scss. That one entry
-## point can be used to @import in as many other things as needed.
-% if env["FEATURES"].get("USE_CUSTOM_THEME", False):
-  // import theme's Sass overrides
-  @import '${env.get('THEME_NAME')}';
-% endif
-
-@import 'build-lms'; // shared app style assets/rendering
--- a/lms/static/sass/multicourse/_course_about.scss
+++ b/lms/static/sass/multicourse/_course_about.scss
@@ -159,7 +159,7 @@
          }

          #register_error {
-            background: $error-red;
+            background: $error-color;
            border: 1px solid rgb(202, 17, 17);
            color: rgb(143, 14, 14);
            display: none;
@@ -405,7 +405,7 @@

        .opencourseware {
          text-indent: -9999px;
-          background: url('../images/opencourseware.png') 0 0 no-repeat;
+          background: url('#{$static-path}/images/opencourseware.png') 0 0 no-repeat;
          width: 266px;
          height: 31px;
          margin-bottom: $baseline;
@@ -419,7 +419,7 @@
        li {
          list-style: none;
          padding-left: 29px;
-          background: url('../images/link-icon.png') left center no-repeat;
+          background: url('#{$static-path}/images/link-icon.png') left center no-repeat;
        }
      }
    }
--- a/lms/static/sass/multicourse/_edge.scss
+++ b/lms/static/sass/multicourse/_edge.scss
@@ -175,7 +175,7 @@ $paleYellow: #fffcf1;
    width: 263px;
    height: 72px;
    margin: 150px auto 50px;
-    background: url(../images/edx-theme/edx-edge-logo-large.png) no-repeat;
+    background: url('#{$static-path}/images/edx-theme/edx-edge-logo-large.png') no-repeat;
    text-indent: -9999px;
    overflow: hidden;
  }
--- a/lms/static/sass/views/_teams.scss
+++ b/lms/static/sass/views/_teams.scss
@@ -723,11 +723,11 @@

    .u-field.error {
      input, textarea {
-        border-color: $danger-red;
+        border-color: $error-color;
      }

      .u-field-message-help, .u-field-description-message {
-        color: $danger-red !important;
+        color: $error-color !important;
      }
    }

--- a/lms/static/sass/views/_verification.scss
+++ b/lms/static/sass/views/_verification.scss
@@ -1312,7 +1312,7 @@
        display: block;
        width: 45px;
        height: 45px;
-        background: transparent url('../images/verified-ribbon.png') no-repeat 0 0;
+        background: transparent url('#{$static-path}/images/verified-ribbon.png') no-repeat 0 0;
      }

      .action-intro, .action-select {
--- a/lms/static/themed_sass/README.rst
+++ b/lms/static/themed_sass/README.rst
@@ -0,0 +1,2 @@
+When USE_CUSTOM_THEME is true, .scss files are pre-processed to add imports of
+the theme settings.  This directory will hold the output of the pre-processing.