Move discussion board to the Pattern Library

TNL-4622

cms/static/sass/_base.scss

@@ -626,7 +626,7 @@ hr.divide {
 // ====================
 
 // UI - semantically hide text
-.sr {
+.sr, .sr-only {
   @extend %cont-text-sr;
 }
 

common/static/coffee/spec/discussion/view/discussion_thread_view_spec.coffee

@@ -133,8 +133,8 @@ describe "DiscussionThreadView", ->
 
         checkVoteDisplay = (originallyClosed, mode) ->
             view = createDiscussionThreadView(originallyClosed, mode)
-            expect(view.$('.forum-thread-main-wrapper .action-vote').is(":visible")).toBe(not originallyClosed)
-            expect(view.$('.forum-thread-main-wrapper .display-vote').is(":visible")).toBe(originallyClosed)
+            expect(view.$('.thread-main-wrapper .action-vote').is(":visible")).toBe(not originallyClosed)
+            expect(view.$('.thread-main-wrapper .display-vote').is(":visible")).toBe(originallyClosed)
             view.$(".action-close").click()
             expect(view.$('.action-vote').is(":visible")).toBe(originallyClosed)
             expect(view.$('.display-vote').is(":visible")).toBe(not originallyClosed)

common/static/common/templates/discussion/discussion-home.underscore

 <div class="discussion-article view-discussion-home">
   <section class="home-header">
-    <span class="label"><%- gettext("DISCUSSION HOME:") %></span>
+    <span class="label"><%- gettext("Discussion Home") %></span>
     <% if (window.courseName) { %>
       <h1 class="home-title"><%- window.courseName %></h1>
     <% } %>

common/static/common/templates/discussion/thread.underscore

 <article class="discussion-article" data-id="<%- id %>" tabindex="-1">
     <div class="thread-wrapper">
-        <div class="forum-thread-main-wrapper">
+        <div class="thread-main-wrapper">
             <div class="thread-content-wrapper"></div>
             <div class="post-extended-content">
                 <ol class="responses js-marked-answer-list"></ol>
             </div>
         </div>
-        <div class="post-extended-content">
-            <div class="response-count"/>
+        <div class="post-extended-content thread-responses-wrapper">
             <% if (!readOnly) { %>
                 <div class="add-response">
-                    <button class="button add-response-btn">
-                        <span class="icon fa fa-reply" aria-hidden="true"></span>
-                        <span class="add-response-btn-text"><%- gettext("Add a Response") %></span>
+                    <button class="btn-brand btn-small add-response-btn">
+                        <%- gettext("Add a Response") %>
                     </button>
                 </div>
             <% } %>
+            <div class="response-count"/>
             <ol class="responses js-response-list"/>
             <div class="response-pagination"/>
             <div class="post-status-closed bottom-post-status" style="display: none">
@@ -23,7 +22,7 @@
             </div>
             <% if (can_create_comment && !readOnly) { %>
             <form class="discussion-reply-new" data-id="<%- id %>">
-                <h4><%- gettext("Post a response:") %></h4>
+                <h4><%- gettext("Add a response:") %></h4>
                 <ul class="discussion-errors"></ul>
                 <div class="reply-body" data-id="<%- id %>"></div>
                 <div class="reply-post-control">

common/test/acceptance/pages/lms/discussion.py

@@ -38,12 +38,22 @@ class DiscussionThreadPage(PageObject, DiscussionPageMixin):
         text_list = self._find_within(selector).text
         return text_list[0] if text_list else None
 
-    def _is_element_visible(self, selector):
+    def is_element_visible(self, selector):
+        """
+        Returns true if the element matching the specified selector is visible.
+
+        Args:
+            selector (str): The CSS selector that matches the desired element.
+
+        Returns:
+            bool: True if the element is visible.
+
+        """
         query = self._find_within(selector)
         return query.present and query.visible
 
     @contextmanager
-    def _secondary_action_menu_open(self, ancestor_selector):
+    def secondary_action_menu_open(self, ancestor_selector):
         """
         Given the selector for an ancestor of a secondary menu, return a context
         manager that will open and close the menu
@@ -51,14 +61,14 @@ class DiscussionThreadPage(PageObject, DiscussionPageMixin):
         self.wait_for_ajax()
         self._find_within(ancestor_selector + " .action-more").click()
         EmptyPromise(
-            lambda: self._is_element_visible(ancestor_selector + " .actions-dropdown"),
+            lambda: self.is_element_visible(ancestor_selector + " .actions-dropdown"),
             "Secondary action menu opened"
         ).fulfill()
         yield
-        if self._is_element_visible(ancestor_selector + " .actions-dropdown"):
+        if self.is_element_visible(ancestor_selector + " .actions-dropdown"):
             self._find_within(ancestor_selector + " .action-more").click()
             EmptyPromise(
-                lambda: not self._is_element_visible(ancestor_selector + " .actions-dropdown"),
+                lambda: not self.is_element_visible(ancestor_selector + " .actions-dropdown"),
                 "Secondary action menu closed"
             ).fulfill()
 
@@ -96,7 +106,7 @@ class DiscussionThreadPage(PageObject, DiscussionPageMixin):
 
     def has_add_response_button(self):
         """Returns true if the add response button is visible, false otherwise"""
-        return self._is_element_visible(".add-response-btn")
+        return self.is_element_visible(".add-response-btn")
 
     def click_add_response_button(self):
         """
@@ -112,11 +122,11 @@ class DiscussionThreadPage(PageObject, DiscussionPageMixin):
     @wait_for_js
     def is_response_editor_visible(self, response_id):
         """Returns true if the response editor is present, false otherwise"""
-        return self._is_element_visible(".response_{} .edit-post-body".format(response_id))
+        return self.is_element_visible(".response_{} .edit-post-body".format(response_id))
 
     @wait_for_js
     def is_discussion_body_visible(self):
-        return self._is_element_visible(".post-body")
+        return self.is_element_visible(".post-body")
 
     def verify_mathjax_preview_available(self):
         """ Checks that MathJax Preview css class is present """
@@ -128,26 +138,26 @@ class DiscussionThreadPage(PageObject, DiscussionPageMixin):
     def verify_mathjax_rendered(self):
         """ Checks that MathJax css class is present """
         self.wait_for(
-            lambda: self._is_element_visible(".MathJax_SVG"),
+            lambda: self.is_element_visible(".MathJax_SVG"),
             description="MathJax Preview is rendered"
         )
 
     def is_response_visible(self, comment_id):
         """Returns true if the response is viewable onscreen"""
         self.wait_for_ajax()
-        return self._is_element_visible(".response_{} .response-body".format(comment_id))
+        return self.is_element_visible(".response_{} .response-body".format(comment_id))
 
     def is_response_editable(self, response_id):
         """Returns true if the edit response button is present, false otherwise"""
-        with self._secondary_action_menu_open(".response_{} .discussion-response".format(response_id)):
-            return self._is_element_visible(".response_{} .discussion-response .action-edit".format(response_id))
+        with self.secondary_action_menu_open(".response_{} .discussion-response".format(response_id)):
+            return self.is_element_visible(".response_{} .discussion-response .action-edit".format(response_id))
 
     def get_response_body(self, response_id):
         return self._get_element_text(".response_{} .response-body".format(response_id))
 
     def start_response_edit(self, response_id):
         """Click the edit button for the response, loading the editing view"""
-        with self._secondary_action_menu_open(".response_{} .discussion-response".format(response_id)):
+        with self.secondary_action_menu_open(".response_{} .discussion-response".format(response_id)):
             self._find_within(".response_{} .discussion-response .action-edit".format(response_id)).first.click()
             EmptyPromise(
                 lambda: self.is_response_editor_visible(response_id),
@@ -172,10 +182,10 @@ class DiscussionThreadPage(PageObject, DiscussionPageMixin):
         ).fulfill()
 
     def is_response_reported(self, response_id):
-        return self._is_element_visible(".response_{} .discussion-response .post-label-reported".format(response_id))
+        return self.is_element_visible(".response_{} .discussion-response .post-label-reported".format(response_id))
 
     def report_response(self, response_id):
-        with self._secondary_action_menu_open(".response_{} .discussion-response".format(response_id)):
+        with self.secondary_action_menu_open(".response_{} .discussion-response".format(response_id)):
             self._find_within(".response_{} .discussion-response .action-report".format(response_id)).first.click()
             self.wait_for_ajax()
             EmptyPromise(
@@ -253,35 +263,35 @@ class DiscussionThreadPage(PageObject, DiscussionPageMixin):
 
     def is_show_comments_visible(self, response_id):
         """Returns true if the "show comments" link is visible for a response"""
-        return self._is_element_visible(".response_{} .action-show-comments".format(response_id))
+        return self.is_element_visible(".response_{} .action-show-comments".format(response_id))
 
     def show_comments(self, response_id):
         """Click the "show comments" link for a response"""
         self._find_within(".response_{} .action-show-comments".format(response_id)).first.click()
         EmptyPromise(
-            lambda: self._is_element_visible(".response_{} .comments".format(response_id)),
+            lambda: self.is_element_visible(".response_{} .comments".format(response_id)),
             "Comments shown"
         ).fulfill()
 
     def is_add_comment_visible(self, response_id):
         """Returns true if the "add comment" form is visible for a response"""
-        return self._is_element_visible("#wmd-input-comment-body-{}".format(response_id))
+        return self.is_element_visible("#wmd-input-comment-body-{}".format(response_id))
 
     def is_comment_visible(self, comment_id):
         """Returns true if the comment is viewable onscreen"""
-        return self._is_element_visible("#comment_{} .response-body".format(comment_id))
+        return self.is_element_visible("#comment_{} .response-body".format(comment_id))
 
     def get_comment_body(self, comment_id):
         return self._get_element_text("#comment_{} .response-body".format(comment_id))
 
     def is_comment_deletable(self, comment_id):
         """Returns true if the delete comment button is present, false otherwise"""
-        with self._secondary_action_menu_open("#comment_{}".format(comment_id)):
-            return self._is_element_visible("#comment_{} .action-delete".format(comment_id))
+        with self.secondary_action_menu_open("#comment_{}".format(comment_id)):
+            return self.is_element_visible("#comment_{} .action-delete".format(comment_id))
 
     def delete_comment(self, comment_id):
         with self.handle_alert():
-            with self._secondary_action_menu_open("#comment_{}".format(comment_id)):
+            with self.secondary_action_menu_open("#comment_{}".format(comment_id)):
                 self._find_within("#comment_{} .action-delete".format(comment_id)).first.click()
         EmptyPromise(
             lambda: not self.is_comment_visible(comment_id),
@@ -290,12 +300,12 @@ class DiscussionThreadPage(PageObject, DiscussionPageMixin):
 
     def is_comment_editable(self, comment_id):
         """Returns true if the edit comment button is present, false otherwise"""
-        with self._secondary_action_menu_open("#comment_{}".format(comment_id)):
-            return self._is_element_visible("#comment_{} .action-edit".format(comment_id))
+        with self.secondary_action_menu_open("#comment_{}".format(comment_id)):
+            return self.is_element_visible("#comment_{} .action-edit".format(comment_id))
 
     def is_comment_editor_visible(self, comment_id):
         """Returns true if the comment editor is present, false otherwise"""
-        return self._is_element_visible(".edit-comment-body[data-id='{}']".format(comment_id))
+        return self.is_element_visible(".edit-comment-body[data-id='{}']".format(comment_id))
 
     def _get_comment_editor_value(self, comment_id):
         return self._find_within("#wmd-input-edit-comment-body-{}".format(comment_id)).text[0]
@@ -303,7 +313,7 @@ class DiscussionThreadPage(PageObject, DiscussionPageMixin):
     def start_comment_edit(self, comment_id):
         """Click the edit button for the comment, loading the editing view"""
         old_body = self.get_comment_body(comment_id)
-        with self._secondary_action_menu_open("#comment_{}".format(comment_id)):
+        with self.secondary_action_menu_open("#comment_{}".format(comment_id)):
             self._find_within("#comment_{} .action-edit".format(comment_id)).first.click()
             EmptyPromise(
                 lambda: (
@@ -396,8 +406,8 @@ class DiscussionTabSingleThreadPage(CoursePage):
         return getattr(self.thread_page, name)
 
     def close_open_thread(self):
-        with self.thread_page._secondary_action_menu_open(".forum-thread-main-wrapper"):
-            self._find_within(".forum-thread-main-wrapper .action-close").first.click()
+        with self.thread_page.secondary_action_menu_open(".thread-main-wrapper"):
+            self._find_within(".thread-main-wrapper .action-close").first.click()
 
     def is_focused_on_element(self, selector):
         """

common/test/acceptance/tests/discussion/test_discussion.py

@@ -403,17 +403,17 @@ class DiscussionOpenClosedThreadTest(BaseDiscussionTestCase):
 
     def test_originally_open_thread_vote_display(self):
         page = self.setup_openclosed_thread_page()
-        self.assertFalse(page._is_element_visible('.forum-thread-main-wrapper .action-vote'))
-        self.assertTrue(page._is_element_visible('.forum-thread-main-wrapper .display-vote'))
-        self.assertFalse(page._is_element_visible('.response_response1 .action-vote'))
-        self.assertTrue(page._is_element_visible('.response_response1 .display-vote'))
+        self.assertFalse(page.is_element_visible('.thread-main-wrapper .action-vote'))
+        self.assertTrue(page.is_element_visible('.thread-main-wrapper .display-vote'))
+        self.assertFalse(page.is_element_visible('.response_response1 .action-vote'))
+        self.assertTrue(page.is_element_visible('.response_response1 .display-vote'))
 
     def test_originally_closed_thread_vote_display(self):
         page = self.setup_openclosed_thread_page(True)
-        self.assertTrue(page._is_element_visible('.forum-thread-main-wrapper .action-vote'))
-        self.assertFalse(page._is_element_visible('.forum-thread-main-wrapper .display-vote'))
-        self.assertTrue(page._is_element_visible('.response_response1 .action-vote'))
-        self.assertFalse(page._is_element_visible('.response_response1 .display-vote'))
+        self.assertTrue(page.is_element_visible('.thread-main-wrapper .action-vote'))
+        self.assertFalse(page.is_element_visible('.thread-main-wrapper .display-vote'))
+        self.assertTrue(page.is_element_visible('.response_response1 .action-vote'))
+        self.assertFalse(page.is_element_visible('.response_response1 .display-vote'))
 
     @attr('a11y')
     def test_page_accessibility(self):

common/test/acceptance/tests/lms/test_lms.py

@@ -186,38 +186,44 @@ class LoginFromCombinedPageTest(UniqueCourseTest):
         course_names = self.dashboard_page.wait_for_page().available_courses
         self.assertIn(self.course_info["display_name"], course_names)
 
-        # Now logout and check that we can log back in instantly (because the account is linked):
-        LogoutPage(self.browser).visit()
-
-        self.login_page.visit()
-        self.login_page.click_third_party_dummy_provider()
+        try:
+            # Now logout and check that we can log back in instantly (because the account is linked):
+            LogoutPage(self.browser).visit()
 
-        self.dashboard_page.wait_for_page()
+            self.login_page.visit()
+            self.login_page.click_third_party_dummy_provider()
 
-        self._unlink_dummy_account()
+            self.dashboard_page.wait_for_page()
+        finally:
+            self._unlink_dummy_account()
 
     def test_hinted_login(self):
         """ Test the login page when coming from course URL that specified which third party provider to use """
         # Create a user account and link it to third party auth with the dummy provider:
         AutoAuthPage(self.browser, course_id=self.course_id).visit()
         self._link_dummy_account()
-        LogoutPage(self.browser).visit()
-
-        # When not logged in, try to load a course URL that includes the provider hint ?tpa_hint=...
-        course_page = CoursewarePage(self.browser, self.course_id)
-        self.browser.get(course_page.url + '?tpa_hint=oa2-dummy')
-
-        # We should now be redirected to the login page
-        self.login_page.wait_for_page()
-        self.assertIn("Would you like to sign in using your Dummy credentials?", self.login_page.hinted_login_prompt)
-        # Baseline screen-shots are different for chrome and firefox.
-        self.assertScreenshot('#hinted-login-form', 'hinted-login-{}'.format(self.browser.name))
-        self.login_page.click_third_party_dummy_provider()
+        try:
+            LogoutPage(self.browser).visit()
+
+            # When not logged in, try to load a course URL that includes the provider hint ?tpa_hint=...
+            course_page = CoursewarePage(self.browser, self.course_id)
+            self.browser.get(course_page.url + '?tpa_hint=oa2-dummy')
+
+            # We should now be redirected to the login page
+            self.login_page.wait_for_page()
+            self.assertIn(
+                "Would you like to sign in using your Dummy credentials?",
+                self.login_page.hinted_login_prompt
+            )
 
-        # We should now be redirected to the course page
-        course_page.wait_for_page()
+            # Baseline screen-shots are different for chrome and firefox.
+            self.assertScreenshot('#hinted-login-form', 'hinted-login-{}'.format(self.browser.name))
+            self.login_page.click_third_party_dummy_provider()
 
-        self._unlink_dummy_account()
+            # We should now be redirected to the course page
+            course_page.wait_for_page()
+        finally:
+            self._unlink_dummy_account()
 
     def _link_dummy_account(self):
         """ Go to Account Settings page and link the user's account to the Dummy provider """

lms/djangoapps/courseware/testutils.py

@@ -26,7 +26,7 @@ class RenderXBlockTestMixin(object):
     # DOM elements that appear in the LMS Courseware,
     # but are excluded from the xBlock-only rendering.
     COURSEWARE_CHROME_HTML_ELEMENTS = [
-        '<ol class="course-tabs"',
+        '<ol class="tabs course-tabs"',
         '<footer id="footer-openedx"',
         '<div class="window-wrap"',
         '<div class="preview-menu"',

lms/djangoapps/django_comment_client/forum/views.py

@@ -287,7 +287,9 @@ def forum_form_discussion(request, course_key):
             'is_course_cohorted': is_course_cohorted(course_key),  # still needed to render _thread_list_template
             'sort_preference': user.default_sort_key,
             'category_map': course_settings["category_map"],
-            'course_settings': json.dumps(course_settings)
+            'course_settings': json.dumps(course_settings),
+            'disable_courseware_js': True,
+            'uses_pattern_library': True,
         }
         # print "start rendering.."
         return render_to_response('discussion/index.html', context)
@@ -402,7 +404,9 @@ def single_thread(request, course_key, discussion_id, thread_id):
             'user_cohort': user_cohort,
             'sort_preference': cc_user.default_sort_key,
             'category_map': course_settings["category_map"],
-            'course_settings': json.dumps(course_settings)
+            'course_settings': json.dumps(course_settings),
+            'disable_courseware_js': True,
+            'uses_pattern_library': True,
         }
         return render_to_response('discussion/index.html', context)
 

lms/djangoapps/teams/static/teams/templates/team-profile.underscore

@@ -4,8 +4,10 @@
                 data-read-only="<%- readOnly %>"
                 data-user-create-comment="<%- !readOnly %>"
                 data-user-create-subcomment="<%- !readOnly %>">
-            <% if (!readOnly) { %>
-                <button type="button" class="btn new-post-btn"><span class="icon fa fa-edit new-post-icon" aria-hidden="true"></span><%- gettext("New Post") %></button>
+            <% if ( !readOnly) { %>
+                <button type="button" class="btn-neutral btn-small new-post-btn">
+                    <%- gettext("Add a Post") %>
+                </button>
             <% } %>
         </div>
     </div>

lms/envs/common.py

@@ -1445,6 +1445,18 @@ PIPELINE_CSS = {
         ],
         'output_filename': 'css/lms-style-student-notes.css',
     },
+    'style-discussion-main': {
+        'source_filenames': [
+            'css/discussion/lms-discussion-main.css',
+        ],
+        'output_filename': 'css/discussion/lms-discussion-main.css',
+    },
+    'style-discussion-main-rtl': {
+        'source_filenames': [
+            'css/discussion/lms-discussion-main-rtl.css',
+        ],
+        'output_filename': 'css/discussion/lms-discussion-main-rtl.css',
+    },
     'style-xmodule-annotations': {
         'source_filenames': [
             'css/vendor/ova/annotator.css',

lms/static/sass/_build-lms-v1.scss

@@ -62,7 +62,7 @@
 @import 'views/api-access';
 
 // app - discussion
-@import "discussion/utilities/variables";
+@import "discussion/utilities/variables-v1";
 @import "discussion/mixins";
 @import 'discussion/discussion'; // Process old file after definitions but before everything else, partial is deprecated.
 @import "discussion/elements/actions";

lms/static/sass/_build-lms-v2.scss

@@ -9,9 +9,12 @@
 @import 'base-v2/extends';
 
 // Extensions
+@import 'shared-v2/variables';
 @import 'shared-v2/base';
 @import 'shared-v2/navigation';
 @import 'shared-v2/header';
 @import 'shared-v2/footer';
+@import 'shared-v2/layouts';
+@import 'shared-v2/components';
 @import 'shared-v2/modal';
 @import 'shared-v2/help-tab';

lms/static/sass/_developer.scss

@@ -181,8 +181,8 @@
 
   //efischer TNL-3226
   .search-field::-ms-clear {
-    width: 0px;
-    height: 0px;
+    width: 0;
+    height: 0;
   }
 }
 
@@ -202,7 +202,7 @@
 
   &:focus {
     box-shadow: none;
-    border: 0px;
+    border: 0;
   }
 }
 
@@ -222,7 +222,7 @@
 
   &:focus {
     box-shadow: none;
-    border: 0px;
+    border: 0;
   }
 }
 

lms/static/sass/base/_base.scss

@@ -327,7 +327,7 @@ mark {
 }
 
 // UI - semantically hide text
-.sr {
+.sr, .sr-only {
   @extend %text-sr;
   @extend %a11y-ensure-contrast;
 }

lms/static/sass/base/_variables.scss

@@ -138,7 +138,7 @@ $yellow-u1: desaturate($yellow,15%);
 $yellow-u2: desaturate($yellow,30%);
 $yellow-u3: desaturate($yellow,45%);
 
-$blue: rgb(0, 120, 176);
+$blue: rgb(0, 121, 188);
 $blue-l1: tint($blue,20%);
 $blue-l2: tint($blue,40%);
 $blue-l3: tint($blue,60%);
@@ -489,7 +489,6 @@ $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;

lms/static/sass/course/base/_base.scss

@@ -37,9 +37,6 @@
 body {
   min-height: 100%;
   background-color: $course-bg-color;
-
-  //for background texture:
-  //background-image: $course-bg-image;
 }
 
 body, h1, h2, h3, h4, h5, h6, p, label {

lms/static/sass/course/courseware/_sidebar.scss

@@ -5,7 +5,7 @@
     display: table-cell; // needed to extend the sidebar the full height of the area
 
     // provides sufficient contrast for all screen reader-only elements
-    .sr {
+    .sr, .sr-only {
         color: $black;
         background: $white;
     }

lms/static/sass/discussion/_build.scss

+// ------------------------------
+// Discussion shared build
+
+// Set the relative path to the static root
+$static-path: '../..' !default;
+
+// Configuration
+@import '../config';
+@import '../base/variables';
+@import '../base-v2/extends';
+
+// Common extensions
+@import '../shared-v2/variables';
+@import '../shared-v2/base';
+@import '../shared-v2/navigation';
+@import '../shared-v2/header';
+@import '../shared-v2/footer';
+@import '../shared-v2/layouts';
+@import '../shared-v2/components';
+@import '../shared-v2/modal';
+@import '../shared-v2/help-tab';
+
+// Compatibility support for non-Pattern Library mixins and extensions
+@import 'utilities/v1-compatibility';
+@import 'utilities/variables-v2';
+
+// Discussion styling
+@import 'mixins';
+@import 'discussion'; // Process old file after definitions but before everything else, partial is deprecated.
+@import 'elements/actions';
+@import 'elements/editor';
+@import 'elements/labels';
+@import 'elements/navigation';
+@import 'views/home';
+@import 'views/thread';
+@import 'views/create-edit-post';
+@import 'views/response';
+@import 'utilities/developer';
+@import 'utilities/shame';

lms/static/sass/discussion/_discussion.scss

@@ -6,23 +6,11 @@ body.discussion {
 
   .course-tabs .right {
     @include float(right);
-
-    .new-post-btn {
-      @include blue-button;
-      @include margin-right(4px);
-    }
-
-    .new-post-icon {
-      @include margin-right(7px);
-      font-size: 16px;
-      vertical-align: middle;
-      color: $white;
-    }
   }
 
   .edit-post-form {
     @include clearfix();
-    @include box-sizing(border-box);
+    box-sizing: border-box;
     width: 100%;
 
     h1 {
@@ -52,8 +40,8 @@ body.discussion {
     }
 
     .edit-post-title {
-      @include box-sizing(border-box);
-      border: 1px solid #aaa;
+      box-sizing: border-box;
+      border: 1px solid $forum-color-border;
       border-radius: 3px;
       padding: 0 ($baseline/2);
       width: 100%;
@@ -78,6 +66,7 @@ body.discussion {
   }
 
   section.user-profile {
+    // TODO: don't use table-cell for layout purposes as it switches the screenreader mode
     display: table-cell;
     border-right: 1px solid #ddd;
     border-radius: 3px 0 0 3px;
@@ -120,7 +109,7 @@ body.discussion {
 
   .wmd-input {
     @include border-radius(3px, 3px, 0, 0);
-    border: 1px solid $gray-l3;
+    border: 1px solid $forum-color-border;
     width: 100%;
     height: 150px;
     background-color: $gray-l4;
@@ -169,8 +158,7 @@ body.discussion {
     display: inline-block;
     width: 20px;
     height: 20px;
-    background-image: url('/static/images/wmd-buttons-transparent.png');
-    background-position: 0px 0px;
+    background-image: url('#{$static-path}/images/wmd-buttons-transparent.png');
     background-repeat: no-repeat;
   }
 
@@ -191,7 +179,7 @@ body.discussion {
 
   .wmd-prompt-dialog {
     @extend .modal;
-    background: $white;
+    background: $forum-color-background;
   }
 
   .wmd-prompt-dialog {
@@ -241,20 +229,17 @@ body.discussion {
 
   .discussion-column {
     @include float(right);
-    @include box-sizing(border-box);
+    box-sizing: border-box;
+    padding-left: ($baseline/2);
     width: 68%;
     max-width: 800px;
     min-height: 500px;
-    border: 1px solid #aaa;
     border-radius: 3px;
-    background: $white;
-    box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
   }
 
   .discussion-article {
     position: relative;
     min-height: 500px;
-    background-image: url('#{$static-path}/images/bg-texture.png');
 
     a {
       word-wrap: break-word;
@@ -297,8 +282,8 @@ body.discussion {
     width: 100%;
     height: 31px;
     padding: 0 ($baseline/2);
-    @include box-sizing(border-box);
-    border: 1px solid $gray-l2;
+    box-sizing: border-box;
+    border: 1px solid $forum-color-border;
     border-radius: 3px;
     box-shadow: 0 1px 3px $shadow-l1 inset;
     @include transition(border-color .1s linear 0s);
@@ -314,9 +299,9 @@ body.discussion {
   }
 
   .discussion-reply-new {
-    padding: $baseline ($baseline*1.5);
     @include clearfix();
     @include transition(opacity .2s linear 0s);
+    padding: 0 ($baseline/2);
 
     h4 {
       font-size: 16px;
@@ -376,37 +361,15 @@ body.discussion {
     }
   }
 
+  .new-post-btn {
+    @include float(right);
+    @include margin-right(4px);
+    @include blue-button;
+  }
+
   div.add-response.post-extended-content {
     margin-top: $baseline;
     margin-bottom: $baseline;
-
-    button.add-response-btn {
-      @include white-button;
-      @include linear-gradient(top, $white 35%, $gray-l4);
-      position: relative;
-      padding-left: ($baseline*1.5);
-      width: 100%;
-      box-shadow: 0 1px 1px $shadow-l1;
-      @include text-align(left);
-
-      .fa-reply:before {
-        @include ltr {
-          content: "\f112"; // FA icon arrow to the left
-        }
-
-        @include rtl {
-          content: "\f064"; // FA icon arrow to the right
-        }
-      }
-
-      &:hover, &:focus {
-        @include linear-gradient(top, $white 35%, #ddd);
-      }
-
-      span.add-response-btn-text {
-        padding-left: 4px;
-      }
-    }
   }
 
   .loading-animation {
@@ -437,11 +400,6 @@ body.discussion {
     }
   }
 
-  .new-post-btn {
-    display: inline-block;
-    @include float(right);
-  }
-
   section.discussion {
     clear: both;
     padding-top: $baseline;
@@ -460,19 +418,20 @@ body.discussion {
 
       .discussion-article {
         @include transition(all .2s linear 0s);
-        border: 1px solid #ddd;
+        border: 1px solid $forum-color-border;
         border-radius: 3px;
         min-height: 0;
-        background: $white;
-        padding: 0;
+        background: $forum-color-background;
         box-shadow: 0 1px 0 $shadow;
         @include transition(all .2s linear 0s);
 
         .thread-wrapper {
+          @include border-radius(3px, 3px, 0, 0);
           position: relative;
           overflow-x: hidden;
           overflow-y: auto;
           max-height: 600px;
+          background-color: $forum-color-background;
 
           .discussion-post {
 
@@ -570,26 +529,6 @@ body.discussion {
     }
   }
 
-  .new-post-btn {
-    @include blue-button;
-    display: inline-block;
-    font-size: 13px;
-    margin-right: 4px;
-  }
-
-  .new-post-icon {
-    display: block;
-    float: left;
-    width: 16px;
-    height: 17px;
-    margin-top: 8px;
-    @include margin-right(7px);
-    font-size: 16px;
-    @include padding-right($baseline/2);
-    vertical-align: middle;
-    color: $white;
-  }
-
   section.discussion-pagination {
     margin-top: ($baseline*1.5);
 
@@ -608,7 +547,7 @@ body.discussion {
             display: inline-block;
             height: 35px;
             padding: 0 ($baseline*0.75);
-            border: 1px solid $gray-l3;
+            border: 1px solid $forum-color-border;
             border-radius: 3px;
             font-size: 13px;
             font-weight: 700;
@@ -625,7 +564,7 @@ body.discussion {
     width: 100%;
     margin-bottom: $baseline;
     @include clearfix();
-    @include box-sizing(border-box);
+    box-sizing: border-box;
 
     .form-row {
       margin-top: $baseline;
@@ -653,9 +592,9 @@ body.discussion {
       width: 100%;
       height: 40px;
       padding: 0 ($baseline/2);
-      @include box-sizing(border-box);
+      box-sizing: border-box;
       border-radius: 3px;
-      border: 1px solid #aaa;
+      border: 1px solid $forum-color-border;
       font-size: 16px;
       font-family: $sans-serif;
       color: $gray-d3;
@@ -680,17 +619,12 @@ body.discussion {
 
 // post pagination
 .response-count {
-  margin-top: $baseline;
-  padding: 0 ($baseline*1.5);
-  color: $gray;
-  font-size: 14px;
+  @include float(right);
 }
 
 .response-pagination {
   visibility: visible;
-  padding: ($baseline/2) ($baseline*1.5);
-  background-color: $gray-l6;
-  box-shadow: 0 1px 1px $gray-l4 inset, 0 -1px 1px $gray-l4 inset;
+  padding: 0 ($baseline/2);
 
   &:empty {
     visibility: hidden;
@@ -708,15 +642,10 @@ body.discussion {
     @include linear-gradient(top, $white 35%, $gray-l4);
     position: relative;
     margin: ($baseline/2) 0;
-    border: 1px solid $gray-l2;
+    border: 1px solid $forum-color-border;
     width: 100%;
     box-shadow: 0 1px 1px $shadow-l1;
     text-align: left;
     font-weight: normal;
-
-    span.add-response-btn-text {
-      padding-left: ($baseline/5);
-    }
   }
 }
-

lms/static/sass/discussion/_mixins.scss

@@ -57,14 +57,14 @@
 }
 
 @mixin discussion-wmd-input {
-  @include box-sizing(border-box);
+  box-sizing: border-box;
   margin-top: 0;
-  border: 1px solid #aaa;
+  border: 1px solid $forum-color-border;
   border-radius: 3px 3px 0 0;
   padding: ($baseline/2);
   width: 100%;
   height: 125px;
-  background: $white;
+  background: $forum-color-background;
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
   font-size: 13px;
   font-family: $sans-serif;
@@ -72,7 +72,7 @@
 }
 
 @mixin discussion-wmd-preview-container {
-  @include box-sizing(border-box);
+  box-sizing: border-box;
   @include border-radius(0, 0, 3px, 3px);
   border: 1px solid $gray-l1;
   border-top: none;
@@ -92,7 +92,6 @@
   padding-top: 3px;
   width: 100%;
   color: $gray-l2;
-  text-transform: uppercase;
   font-size: 11px;
 }
 
@@ -114,7 +113,7 @@
 
 // extends - content - text overflow by ellipsis
 %cont-truncated {
-  @include box-sizing(border-box);
+  box-sizing: border-box;
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
@@ -128,7 +127,6 @@
   border: 1px solid;
   border-radius: 3px;
   padding: 1px 6px;
-  text-transform: uppercase;
   white-space: nowrap;
 
   border-color: $color;
@@ -156,6 +154,5 @@
   padding: 0 ($baseline/5);
   background: $color;
   font-style: normal;
-  text-transform: uppercase;
   color: white;
 }

lms/static/sass/discussion/elements/_actions.scss

@@ -11,7 +11,7 @@
     @include text-align(right);
 
     .actions-item {
-      @include box-sizing(border-box);
+      box-sizing: border-box;
       display: block;
       margin: ($baseline/4) 0;
 
@@ -44,7 +44,7 @@
     }
 
     .actions-dropdown-list {
-      @include box-sizing(border-box);
+      box-sizing: border-box;
       box-shadow: 0 1px 1px $shadow-l1;
       position: relative;
       width: 100%;
@@ -52,7 +52,7 @@
       margin: ($baseline/4) 0 0 0;
       border: 1px solid $gray-l3;
       padding: ($baseline/2) ($baseline*0.75);
-      background: $white;
+      background: $forum-color-background;
 
       // ui triangle/nub
       &:after,
@@ -76,7 +76,7 @@
 
       &:before {
         border-color: $transparent;
-        border-bottom-color: $gray-l3;
+        border-bottom-color: $forum-color-border;
         border-width: 7px;
       }
     }
@@ -96,7 +96,7 @@
   // UI: general action
   .action-button {
     @include transition(border .5s linear 0s);
-    @include box-sizing(border-box);
+    box-sizing: border-box;
     display: inline-block;
     border: 1px solid transparent;
     border-radius: ($baseline/4);
@@ -196,7 +196,7 @@
 
       &:hover, &:focus {
         border-color: $blue-d2;
-        background-color: $white;
+        background-color: $forum-color-background;
 
         .action-label {
           color: $blue-d2;
@@ -217,7 +217,7 @@
 
       &:hover, &:focus {
         border-color: $green-d1;
-        background-color: $white;
+        background-color: $forum-color-background;
 
         .action-label {
           color: $green-d2;
@@ -231,7 +231,7 @@
 
       &:hover, &:focus {
         border-color: $gray;
-        background-color: $white;
+        background-color: $forum-color-background;
 
         .action-icon {
           border: 1px solid $gray;

lms/static/sass/discussion/elements/_editor.scss

@@ -11,12 +11,12 @@
 .forum-new-post-form {
   .wmd-input {
     @include discussion-wmd-input;
-    @include box-sizing(border-box);
+    box-sizing: border-box;
     position: relative;
     z-index: 1;
     width: 100%;
     height: 150px;
-    background: $white;
+    background: $forum-color-background;
   }
 
   .wmd-preview-container {
@@ -100,7 +100,7 @@
     display: inline-block;
     width: 20px;
     height: 20px;
-    background-image: url('/static/images/wmd-buttons-transparent.png');
+    background-image: url('#{$static-path}/images/wmd-buttons-transparent.png');
     background-position: 0 0;
     background-repeat: no-repeat;
   }
@@ -122,7 +122,7 @@
 
   .wmd-prompt-dialog {
     @extend .modal;
-    background: $white;
+    background: $forum-color-background;
   }
 
   .wmd-prompt-dialog {
@@ -161,7 +161,7 @@
 
   .wmd-button {
     span {
-      background-image: url("/static/images/wmd-buttons.png");
+      background-image: url("#{$static-path}/images/wmd-buttons.png");
       display: inline-block;
     }
   }

lms/static/sass/discussion/elements/_navigation.scss

@@ -2,7 +2,7 @@
 // ====================
 
 .forum-nav {
-  @include box-sizing(border-box);
+  box-sizing: border-box;
   @include float(left);
   position: relative;
   width: 31%;
@@ -14,15 +14,17 @@
 // Header
 // ------
 .forum-nav-header {
-  @include box-sizing(border-box);
+  box-sizing: border-box;
+  // TODO: don't use table for layout purposes as it switches the screenreader mode
   display: table;
-  border-bottom: 1px solid $gray-l2;
+  border-bottom: 1px solid $forum-color-border;
   width: 100%;
   background-color: $gray-l3;
 }
 
 .forum-nav-browse {
-    @include box-sizing(border-box);
+    box-sizing: border-box;
+    // TODO: don't use table-cell for layout purposes as it switches the screenreader mode
     display: table-cell;
     vertical-align: middle;
     width: auto;
@@ -57,7 +59,8 @@
 }
 
 .forum-nav-search {
-  @include box-sizing(border-box);
+  box-sizing: border-box;
+  // TODO: don't use table-cell for layout purposes as it switches the screenreader mode
   display: table-cell;
   position: relative;
   vertical-align: middle;
@@ -81,13 +84,13 @@
 // Browse menu
 // -----------
 .forum-nav-browse-menu-wrapper {
-  border-bottom: 1px solid $gray-l3;
+  border-bottom: 1px solid $forum-color-border;
   background: $gray-l5;
 }
 
 .forum-nav-browse-filter {
   position: relative;
-  border-bottom: 1px solid $gray-l2;
+  border-bottom: 1px solid $forum-color-border;
   padding: ($baseline/4);
 }
 
@@ -108,8 +111,8 @@
     width: 100%;
     border: 0;
     border-radius: 0;
-    border-bottom: 1px solid $gray-l3;
-    padding: ($baseline/2) ($baseline/2);
+    border-bottom: 1px solid $forum-color-border;
+    padding: ($baseline/2);
     background: transparent;
     box-shadow: none;
     background-image: none;
@@ -122,7 +125,7 @@
         // need to override button styles
         background-image: none !important;
         box-shadow: none !important;
-        background: $forum-color-active-thread !important;
+        background: $forum-color-background !important;
     }
 }
 
@@ -154,7 +157,7 @@
 .forum-nav-refine-bar {
   @include clearfix();
   @include font-size(11);
-  border-bottom: 1px solid $gray-l3;
+  border-bottom: 1px solid $forum-color-border;
   background-color: $gray-l5;
   padding: ($baseline/4) ($baseline/2);
   color: $black;
@@ -162,14 +165,14 @@
 }
 
 .forum-nav-filter-main {
-  @include box-sizing(border-box);
+  box-sizing: border-box;
   display: inline-block;
   width: 50%;
   @include text-align(left);
 }
 
 .forum-nav-filter-cohort, .forum-nav-sort {
-  @include box-sizing(border-box);
+  box-sizing: border-box;
   display: inline-block;
   width: 50%;
   @include text-align(right);
@@ -202,11 +205,11 @@
 }
 
 .forum-nav-thread {
-  border-bottom: 1px solid $gray-l4;
-  background-color: $gray-l6;
+  border-bottom: 1px solid $forum-color-border;
+  background-color: $forum-color-background;
 
   &.is-unread {
-    background: $white;
+    background: $forum-color-background;
     color: $blue-d1;
 
     .forum-nav-thread-comments-count {
@@ -225,7 +228,7 @@
   padding: ($baseline/4) ($baseline/2);
 
   &.is-active {
-    background-color: $white;
+    background-color: $forum-color-background;
     color: $base-font-color;
 
     .forum-nav-thread-comments-count {
@@ -344,7 +347,7 @@
 }
 
 .forum-nav-load-more {
-  border-bottom: 1px solid $gray-l3;
+  border-bottom: 1px solid $forum-color-border;
   background-color: $gray-l5;
 }
 

lms/static/sass/discussion/lms-discussion-main-rtl.scss

+// ------------------------------
+// LMS discussion main styling
+//
+// NOTE: This is the right-to-left (RTL) configured style compile.
+// It should mirror lms-discussion-main w/ the exception of bi-app references.
+
+// Load the RTL version of the edX Pattern Library
+$pattern-library-path: '../../edx-pattern-library' !default;
+@import 'edx-pattern-library/pattern-library/sass/edx-pattern-library-rtl';
+
+// Configure RTL variables
+@import 'base/variables-rtl';
+
+// Load the shared build
+@import 'build';

lms/static/sass/discussion/lms-discussion-main.scss

+// ------------------------------
+// LMS discussion main styling
+//
+// NOTE: This is the left-to-right (LTR) configured style compile.
+// It should mirror lms-discussion-main-rtl w/ the exception of bi-app references.
+
+// Load the LTR version of the edX Pattern Library
+$pattern-library-path: '../../edx-pattern-library' !default;
+@import 'edx-pattern-library/pattern-library/sass/edx-pattern-library-ltr';
+
+// Configure LTR variables
+@import 'base/variables-ltr';
+
+// Load the shared build
+@import 'build';

lms/static/sass/discussion/utilities/_shame.scss

@@ -15,7 +15,7 @@
 // Override global input rules
 .forum-nav-search-input {
   box-shadow: none !important;
-  border: 1px solid $gray-l2 !important;
+  border: 1px solid $forum-color-border !important;
   border-radius: 3px !important;
   height: auto !important;
   @include padding-left($baseline/4 !important);

lms/static/sass/discussion/utilities/_v1-compatibility.scss

+// Utilities to provide v1-styling compatibility
+
+@mixin font-size($sizeValue: 16){
+  font-size: $sizeValue + px;
+}
+
+@mixin line-height($fontSize: auto){
+  line-height: ($fontSize*1.48) + px;
+}
+
+%text-sr {
+    // clip has been deprecated but is still supported
+    clip: rect(1px 1px 1px 1px);
+    clip: rect(1px, 1px, 1px, 1px);
+    position: absolute;
+    margin: -1px;
+    height: 1px;
+    width: 1px;
+    border: 0;
+    padding: 0;
+    overflow: hidden;
+    // ensure there are spaces in sr text
+    word-wrap: normal;
+}
+
+// extends - UI - depth levels
+%ui-depth0 { z-index: 0; }
+%ui-depth1 { z-index: 10; }
+%ui-depth2 { z-index: 100; }
+%ui-depth3 { z-index: 1000; }
+%ui-depth4 { z-index: 10000; }
+%ui-depth5 { z-index: 100000; }
+
+%t-icon1 {
+  @include font-size(48);
+}
+
+%t-icon2 {
+  @include font-size(36);
+}
+
+%t-icon3 {
+  @include font-size(24);
+}
+
+%t-icon4 {
+  @include font-size(18);
+}
+
+%t-icon5 {
+  @include font-size(16);
+}
+
+%t-icon6 {
+  @include font-size(14);
+}
+
+%t-icon7 {
+  @include font-size(12);
+}
+
+%t-icon8 {
+  @include font-size(11);
+}
+
+%t-icon9 {
+  @include font-size(10);
+}
+
+%t-icon-solo {
+  @include line-height(0);
+}
+
+// weights
+%t-ultrastrong {
+ font-weight: 700;
+}
+%t-strong {
+ font-weight: 600;
+}
+%t-demi-strong {
+ font-weight: 500;
+}
+%t-regular {
+ font-weight: 400;
+}
+%t-light {
+ font-weight: 300;
+}
+%t-ultralight {
+ font-weight: 200;
+}
+
+// headings/titles
+%t-title {
+  font-family: $f-sans-serif;
+}
+
+%t-title1 {
+  @extend %t-title;
+  @include font-size(60);
+  @include line-height(60);
+}
+
+%t-title2 {
+  @extend %t-title;
+  @include font-size(48);
+  @include line-height(48);
+}
+
+%t-title3 {
+  @include font-size(36);
+  @include line-height(36);
+}
+
+%t-title4 {
+  @extend %t-title;
+  @include font-size(24);
+  @include line-height(24);
+}
+
+%t-title5 {
+  @extend %t-title;
+  @include font-size(18);
+  @include line-height(18);
+}
+
+%t-title6 {
+  @extend %t-title;
+  @include font-size(16);
+  @include line-height(16);
+}
+
+%t-title7 {
+  @extend %t-title;
+  @include font-size(14);
+  @include line-height(14);
+}
+
+%t-title8 {
+  @extend %t-title;
+  @include font-size(12);
+  @include line-height(12);
+}
+
+%t-title9 {
+  @extend %t-title;
+  @include font-size(11);
+  @include line-height(11);
+}
+
+// copy
+%t-copy {
+  font-family: $f-sans-serif;
+}
+
+%t-copy-base {
+  @extend %t-copy;
+  @include font-size(16);
+  @include line-height(16);
+}
+
+%t-copy-lead1 {
+  @extend %t-copy;
+  @include font-size(18);
+  @include line-height(18);
+}
+
+%t-copy-lead2 {
+  @extend %t-copy;
+  @include font-size(24);
+  @include line-height(24);
+}
+
+%t-copy-sub1 {
+  @extend %t-copy;
+  @include font-size(14);
+  @include line-height(14);
+}
+
+%t-copy-sub2 {
+  @extend %t-copy;
+  @include font-size(12);
+  @include line-height(12);
+}
+
+// extends - UI - removes list styling/spacing when using uls, ols for navigation and less content-centric cases
+%ui-no-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  text-indent: 0;
+
+  li, dt, dd {
+    margin: 0;
+    padding: 0;
+  }
+}

lms/static/sass/discussion/utilities/_variables-v1.scss

+// discussion - utilities - variables
+// ====================
+
+// color variables
+$forum-color-background: $white;
+$forum-color-active-thread: $white !default;
+$forum-color-active-text: $base-font-color !default;
+$forum-color-pinned: $pink !default;
+$forum-color-reported: $pink !default;
+$forum-color-closed: $black !default;
+$forum-color-following: $blue !default;
+$forum-color-staff: $blue !default;
+$forum-color-community-ta: $green-d1 !default;
+$forum-color-marked-answer: $green-d1 !default;
+$forum-color-border: $gray-l3 !default;
+$forum-color-error: $red !default;
+
+// post images
+$post-image-dimension: ($baseline*3) !default;  // image size  + margin
+$response-image-dimension: ($baseline*2.5) !default; // image size  + margin
+$comment-image-dimension: ($baseline*2) !default; // image size  + margin

lms/static/sass/discussion/utilities/_variables-v2.scss

+// discussion - utilities - variables
+// ====================
+
+// color variables
+$forum-color-background: $lms-container-background-color !default;
+$forum-color-active-thread: $lms-active-color !default;
+$forum-color-active-text: $lms-container-background-color !default;
+$forum-color-pinned: $pink !default;
+$forum-color-reported: $pink !default;
+$forum-color-closed: $black !default;
+$forum-color-following: $blue !default;
+$forum-color-staff: $blue !default;
+$forum-color-community-ta: $green-d1 !default;
+$forum-color-marked-answer: $green-d1 !default;
+$forum-color-border: palette(grayscale, base) !default;
+$forum-color-error: palette(error, base) !default;
+
+// post images
+$post-image-dimension: ($baseline*3) !default;  // image size  + margin
+$response-image-dimension: ($baseline*2.5) !default; // image size  + margin
+$comment-image-dimension: ($baseline*2) !default; // image size  + margin

lms/static/sass/discussion/utilities/_variables.scss

-// discussion - utilities - variables
-// ====================
-
-// color variables
-$forum-color-active-thread: $white;
-$forum-color-pinned: $pink;
-$forum-color-reported: $pink;
-$forum-color-closed: $black;
-$forum-color-following: $blue;
-$forum-color-staff: $blue;
-$forum-color-community-ta: $green-d1;
-$forum-color-marked-answer: $green-d1;
-
-// post images
-$post-image-dimension: ($baseline*3);  // image size  + margin
-$response-image-dimension: ($baseline*2.5); // image size  + margin
-$comment-image-dimension: ($baseline*2); // image size  + margin

lms/static/sass/discussion/views/_create-edit-post.scss

@@ -8,7 +8,7 @@
   box-sizing: border-box;
   margin: 0;
   border-radius: 3px;
-  padding: ($baseline);
+  padding: $baseline;
   max-width: 1180px;
 
   .post-field {
@@ -18,19 +18,20 @@
       display: inline-block;
       width: 50%;
       vertical-align: top;
-      line-height: 40px;
+      margin: 0;
 
       .field-input {
         display: inline-block;
         width: 100%;
         vertical-align: top;
+        border-width: 0;
+        padding: 0 ($baseline/2);
       }
 
       .field-label-text {
         display: inline-block;
         width: 25%;
         vertical-align: top;
-        text-transform: uppercase;
         font-size: 12px;
         line-height: 40px;
       }
@@ -42,7 +43,7 @@
 
     // UI: support text for input fields
     .field-help {
-      @include box-sizing(border-box);
+      box-sizing: border-box;
       display: inline-block;
       @include padding-left($baseline);
       width: 50%;
@@ -57,7 +58,7 @@
 
 // CASE: inline styling
 .discussion-module .forum-new-post-form {
-  background: $white;
+  background: $forum-color-background;
 }
 
 // ====================
@@ -87,9 +88,9 @@
 
   .post-type-label {
     @extend %cont-truncated;
-    @include box-sizing(border-box);
     @include white-button;
     @include font-size(14);
+    box-sizing: border-box;
     display: inline-block;
     padding: 0 ($baseline/2);
     width: 48%;
@@ -106,6 +107,7 @@
 
   .post-type-input:checked + .post-type-label {
     background-color: $forum-color-active-thread;
+    color: $forum-color-active-text;
     background-image: none;
     box-shadow: 0 1px 1px rgba(0, 0,  0, 0.4) inset;
   }
@@ -115,8 +117,8 @@
   }
 
   input[type=text].field-input {
-    @include box-sizing(border-box);
-    border: 1px solid $gray-l2;
+    box-sizing: border-box;
+    border: 1px solid $forum-color-border;
     border-radius: 3px;
     padding: 0 $baseline/2;
     height: 40px;
@@ -128,7 +130,7 @@
   }
 
   .post-option {
-    @include box-sizing(border-box);
+    box-sizing: border-box;
     display: inline-block;
     @include margin-right($baseline);
     border: 1px solid transparent;
@@ -186,7 +188,7 @@
 
     .post-error {
       padding: ($baseline/2) $baseline 12px 45px;
-      border-bottom: 1px solid $red;
+      border-bottom: 1px solid $forum-color-error;
       background: url('#{$static-path}/images/white-error-icon.png') no-repeat 15px 14px;
 
       &:last-child {
@@ -206,25 +208,25 @@
   position: relative;
 
   .topic-menu-wrapper {
-    @include box-sizing(border-box);
+    box-sizing: border-box;
     @extend %ui-depth4;
     position: absolute;
     top: 40px;
     left: 0;
-    border: 1px solid $gray-l3;
+    border: 1px solid $forum-color-border;
     width: 100%;
-    background: $white;
+    background: $forum-color-background;
     box-shadow: 0 2px 1px $shadow;
   }
 
   .topic-filter-label {
-    border-bottom: 1px solid $gray-l2;
+    border-bottom: 1px solid $forum-color-border;
     padding: ($baseline/4);
   }
 
   .topic-filter-input {
-    @include box-sizing(border-box);
-    border: 1px solid $gray-l3;
+    box-sizing: border-box;
+    border: 1px solid $forum-color-border;
     padding: 0 15px;
     width: 100%;
     height: 30px;
@@ -246,7 +248,7 @@
 
   .topic-title {
     display: block;
-    border-bottom: 1px solid $gray-l3;
+    border-bottom: 1px solid $forum-color-border;
     padding: ($baseline/2);
     font-size: 14px;
   }

lms/static/sass/discussion/views/_home.scss

@@ -3,10 +3,10 @@
 
 // home - layout
 .container .view-discussion-home {
-  padding: ($baseline*2) ($baseline*2) ($baseline/2);
+  padding-left: $baseline;
 
   section {
-    border-bottom: 1px solid $gray-l3;
+    border-bottom: 1px solid $forum-color-border;
   }
 
   .label {
@@ -17,7 +17,6 @@
   .label-settings {
     padding-top: $baseline;
     padding-bottom: ($baseline/2);
-    text-transform: uppercase;
   }
 
   .home-header {
@@ -75,12 +74,12 @@
   .home-helpgrid {
     border-bottom: none;
     border-radius: 3px;
-    border: 1px solid $gray-l2;
+    border: 1px solid $forum-color-border;
     box-shadow: 0 1px 3px rgba(0, 0, 0, .15);
   }
 
   .helpgrid-row {
-    border-bottom: 1px solid $gray-l2;
+    border-bottom: 1px solid $forum-color-border;
 
     .row-title {
       padding: ($baseline*1.5) $baseline;
@@ -90,7 +89,7 @@
 
     .row-item-full, .row-item {
       font-size: 12px;
-      padding: 0px $baseline/2;
+      padding: 0 ($baseline/2);
       width: 26%;
       vertical-align: middle;
 
@@ -98,6 +97,7 @@
         padding: 0 ($baseline/2);
         font-size: 24px;
         vertical-align: middle;
+        // TODO: don't use table-cell for layout purposes as it switches the screenreader mode
         display: table-cell;
       }
 
@@ -107,6 +107,7 @@
 
       .row-description {
         vertical-align: middle;
+        // TODO: don't use table-cell for layout purposes as it switches the screenreader mode
         display: table-cell;
       }
     }
@@ -159,4 +160,4 @@
     .fa-square {color: $green;}
     .fa-envelope {color: $light-gray;}
   }
-}
+}
\ No newline at end of file

lms/static/sass/discussion/views/_response.scss

@@ -12,9 +12,7 @@
 
 // +wrapper - response list
 .container .discussion-body .responses {
-  list-style: none;
-  margin-top: $baseline;
-  padding: 0 ($baseline*1.5);
+  @extend %ui-no-list;
 
   &:empty {
     display: none;
@@ -25,17 +23,17 @@
     @include animation(fadeIn .3s);
     position: relative;
     margin: $baseline 0;
-    border: 1px solid $gray-l2;
+    border: 1px solid $forum-color-border;
     border-radius: 3px;
     box-shadow: 0 0 1px $shadow;
   }
 
   // wrapper - main response area
   .discussion-response {
-    @include box-sizing(border-box);
+    box-sizing: border-box;
     @include border-radius(3px, 3px, 0, 0);
     padding: $baseline;
-    background-color: $white;
+    background-color: $forum-color-background;
   }
   
   .posted-by {
@@ -64,40 +62,14 @@
 
 // +element - add response area
 .container .discussion-body .add-response {
-  margin-top: $baseline;
-  padding: 0 ($baseline*1.5);
-
-  .add-response-btn {
-    @include white-button;
-    @include linear-gradient(top, $white 35%, $gray-l4);
-    position: relative;
-    border: 1px solid $gray-l2;
-    padding: 0 18px;
-    width: 100%;
-    box-shadow: 0 1px 1px $shadow-l1;
-    @include text-align(left);
-    font-size: 13px;
-
-    .fa-reply:before { // flip the icon for RTL
-      @include ltr {
-        content: "\f112"; // FA icon arrow to the left
-      }
-
-      @include rtl {
-        content: "\f064"; // FA icon arrow to the right
-      }
-    }
-
-    span.add-response-btn-text {
-      @include padding-left($baseline/5);
-    }
-  }
+  display: inline;
+  padding: $baseline/2;
 }
 
 // +CASE: answered question - collapsed comments in answers
 .forum-response .action-show-comments {
-  @include box-sizing(border-box);
   @include font-size(13);
+  box-sizing: border-box;
   display: block;
   padding: ($baseline/2) $baseline;
   width: 100%;
@@ -129,13 +101,12 @@
     width: 100%;
     height: 14px;
     padding: 1px ($baseline/4);
-    @include box-sizing(border-box);
+    box-sizing: border-box;
     border-radius: 2px 2px 0 0;
     background: #009fe2;
     font-size: 9px;
     font-weight: 700;
     color: $white;
-    text-transform: uppercase;
   }
 
   // CASE: banner - community TA response
@@ -146,13 +117,12 @@
     width: 100%;
     height: 14px;
     padding: 1px ($baseline/4);
-    @include box-sizing(border-box);
+    box-sizing: border-box;
     border-radius: 2px 2px 0 0;
     background: $forum-color-community-ta;
     font-size: 9px;
     font-weight: 700;
     color: $white;
-    text-transform: uppercase;
   }
 
   // STATE: loading - response list
@@ -173,11 +143,10 @@
   box-shadow: 0 1px 3px -1px $shadow inset;
 
   > li {
-    border-top: 1px solid $gray-l4;
+    border-top: 1px solid $forum-color-border;
     padding: ($baseline/2) $baseline;
   }
 
-
   blockquote {
     background: $gray-l4;
     border-radius: 3px;
@@ -190,7 +159,7 @@
 
     .comment-form-input {
       padding: ($baseline/4) ($baseline/2);
-      background-color: $white;
+      background-color: $forum-color-background;
       font-size: 14px;
     }
 

lms/static/sass/discussion/views/_thread.scss

@@ -14,9 +14,7 @@ body.discussion, .discussion-module {
 
   // post layout
   .discussion-post {
-    @include padding(($baseline*1.5), ($baseline*1.5), $baseline, ($baseline*1.5));
-    @include border-radius(3px, 3px, 0, 0);
-    background-color: $white;
+    padding: 0 ($baseline/2);
 
     .wrapper-post-header {
       padding-bottom: 0;
@@ -30,11 +28,25 @@ body.discussion, .discussion-module {
 
     .post-header-actions {
       @include float(right);
-      width: flex-grid(3,12);
     }
 
-    .posted-details {
-      color: $gray-d1;
+    .post-body {
+      width: flex-grid(10,12);
+    }
+  }
+
+  .posted-details {
+    @extend %t-copy-sub2;
+    margin-top: ($baseline/5);
+    color: $gray-d1;
+
+    .username {
+      @extend %t-strong;
+      display: inline;
+    }
+
+    .timeago, .top-post-status {
+      color: inherit;
     }
   }
 
@@ -52,7 +64,7 @@ body.discussion, .discussion-module {
       @include float(right);
       @include right($baseline);
       position: absolute;
-      top: ($baseline);
+      top: $baseline;
     }
   }
 
@@ -73,18 +85,14 @@ body.discussion, .discussion-module {
     .comment-actions-list {
       @include float(right);
     }
-
-    .posted-details {
-      margin-top: 0;
-    }
   }
 }
 
 // +thread - wrapper styling
-.forum-thread-main-wrapper {
-  @include border-radius(3px, 3px, 0, 0);
-  border-bottom: 1px solid $white; // Prevent collapsing margins
-  background-color: $white;
+.thread-wrapper {
+  .thread-main-wrapper {
+    padding-bottom: $baseline;
+  }
 }
 
 // +thread - elements - shared styles
@@ -126,25 +134,9 @@ body.discussion {
         border-radius: 3px;
       }
     }
-
-    // thread - header content details
-    .posted-details {
-      @extend %t-copy-sub2;
-      margin-top: ($baseline/5);
-      color: $gray-d1;
-
-      .username {
-        @extend %t-strong;
-        display: inline;
-      }
-
-      .timeago, .top-post-status {
-        color: inherit;
-      }
-    }
   }
 
-  .discussion-post .post-body, .discussion-response .response-body {
+  .discussion-response .response-body {
     @include padding-right($baseline); //ensures content doesn't overlap on post or response actions.
   }
 }
@@ -179,11 +171,8 @@ body.view-in-course .discussion-article {
     @extend %t-copy-sub2;
     margin-top: $baseline;
     color: $gray-d1;
-    padding: ($baseline*0.75);
-    background-color: $gray-l6;
-    border-radius: 3px;
 
-    // CASE: no courseware context or cohort visiblity rules
+    // CASE: no courseware context or cohort visibility rules
     &:empty {
       display: none;
     }
@@ -195,10 +184,22 @@ body.view-in-course .discussion-article {
   }
 }
 
-// +post - answered question - collapsed comment area
-body.discussion, .discussion-thread.expanded {
-  .forum-thread-main-wrapper {
-    box-shadow: 0 1px 3px $shadow;
+// Layout control for discussion modules that does not apply to the discussion board
+.discussion-module {
+  .discussion-thread {
+    .thread-main-wrapper, .thread-responses-wrapper {
+      padding: $baseline;
+    }
   }
-}
 
+  .btn-brand {
+    @include blue-button;
+    display: inline-block;
+    padding-bottom: ($baseline/10);
+    height: 37px;
+
+    &:hover, &:focus {
+      border-color: #222;
+    }
+  }
+}

lms/static/sass/elements/_program-card.scss

@@ -10,7 +10,7 @@
   @include span(12);  
   border: 1px solid $border-color-l3;
   border-bottom: none;
-  margin-bottom: $baseline + px;
+  margin-bottom: $baseline;
   position: relative;
 
   @include susy-media($bp-screen-md) {
@@ -58,7 +58,7 @@
   }
 
   .text-section{
-    padding: 40px $baseline + px $baseline + px;
+    padding: 40px $baseline $baseline;
     position: relative;
     margin-top: 156px;
 
@@ -71,7 +71,7 @@
     font-size: font-size(x-small);
     color: palette(grayscale, dark);
     position: absolute;
-    top: $baseline + px;
+    top: $baseline;
     width: calc(100% - 40px);
   }
 
@@ -91,18 +91,18 @@
 
     .xseries-icon{
       @include float(right);
-      @include margin-right($baseline*0.25 + px);
+      @include margin-right($baseline*0.25);
       background: url('#{$static-path}/images/icon-sm-xseries-black.png') no-repeat;
       background-color: transparent;
       background-size: 100%;
-      width: ($baseline*0.7 + px);
-      height: ($baseline*0.7 + px);
+      width: ($baseline*0.7);
+      height: ($baseline*0.7);
     }
   }
   
   .hd-3 {
     color: palette(grayscale, x-dark);
-    min-height: ($baseline*3) + px;
+    min-height: ($baseline*3);
     line-height: 1;
   }
 

lms/static/sass/shared-v2/_base.scss

 // LMS base styles
 
+.window-wrap {
+    background-color: $lms-background-color;
+}
+
 .content-wrapper {
-  width: span(12);
-  margin: 0 auto;
-  background: palette(grayscale, white-t);
+    width: span(12);
+    margin: 0 auto;
+
+    @media print {
+        padding-bottom: 0;
+    }
+}
 
-  @media print {
-    padding-bottom: 0;
-  }
+// Support .sr as well as .sr-only for backward compatibility
+.sr {
+    @extend .sr-only;
 }

lms/static/sass/shared-v2/_components.scss

+// TODO: tabs should be added to the Pattern Library
+.tabs {
+    @include clearfix();
+    @extend %reset-lists;
+    @include border-top-radius(4px);
+    padding: ($baseline*0.75) 0 ($baseline*0.75) 0;
+
+    .tab {
+        @include float(left);
+        list-style: none;
+        margin-bottom: 0;
+
+        &.prominent {
+            @include margin-right(16px);
+            background: rgba(255, 255, 255, 0.5);
+            border-radius: 3px;
+        }
+
+        &.prominent + li {
+            @include border-left(1px solid $lms-border-color);
+            padding-left: $baseline*0.75;
+        }
+
+        a,
+        a:visited {
+            padding: ($baseline/2) ($baseline*0.75) 13px ($baseline*0.75);
+            display: block;
+            text-align: center;
+            text-decoration: none;
+            border-style: solid;
+            border-width: 0 0 4px 0;
+            border-bottom-color: transparent;
+            color: $lms-label-color;
+            font-size: 14px;
+
+            &:hover,
+            &:focus {
+                color: $lms-active-color;
+                border-bottom-color: $lms-active-color;
+            }
+
+            &.active {
+                color: $lms-active-color;
+                border-bottom-color: $lms-active-color;
+                background-color: transparent;
+            }
+        }
+    }
+}

lms/static/sass/shared-v2/_footer.scss

@@ -3,9 +3,10 @@
 
 .wrapper-footer {
   @extend %ui-print-excluded;
+  margin-top: ($baseline*2);
   box-shadow: 0 -1px 5px 0 $shadow-l1;
   border-top: 1px solid tint(palette(grayscale, light), 50%);
-  padding: 25px ($baseline/2 + px) ($baseline*1.5 + px) ($baseline/2 + px);
+  padding: 25px ($baseline/2) ($baseline*1.5) ($baseline/2);
   background: $footer-bg;
   clear: both;
 
@@ -46,9 +47,13 @@
         @include clearfix();
         margin: $footer_margin;
 
+        ol {
+          list-style: none;
+        }
+
         li {
           @include float(left);
-          margin-right: ($baseline*0.75) + px;
+          margin-right: ($baseline*0.75);
 
           a {
             color: tint($black, 20%);
@@ -79,8 +84,8 @@
         p {
           @include float(left);
           @include span(9);
-          margin-left: $baseline + px;
-          padding-left: $baseline + px;
+          margin-left: $baseline;
+          padding-left: $baseline;
           font-size: font-size(small);
           background: transparent url(/static/images/bg-footer-divider.jpg) 0 0 no-repeat;
         }
@@ -95,7 +100,7 @@
     }
 
     .wrapper-logo {
-      margin: ($baseline*0.75) + px 0;
+      margin: ($baseline*0.75) 0;
 
       a {
         display: inline-block;
@@ -124,7 +129,7 @@
 
       .nav-legal-02 a {
         &:before {
-          @include margin-right(($baseline/4) + px);
+          @include margin-right(($baseline/4));
           content: "-";
         }
       }
@@ -189,7 +194,7 @@
     width: 960px;
 
     .colophon-about img {
-      margin-top: ($baseline*1.5) + px;
+      margin-top: ($baseline*1.5);
     }
   }
 }

lms/static/sass/shared-v2/_header.scss

 // LMS header styles
 
 .header-global {
-  @extend %ui-depth1;
-  box-sizing: border-box;
-  position: relative;
-  width: 100%;
-  border-bottom: 1px solid $gray-l1;
-  box-shadow: 0 1px 5px 0 $shadow-l1;
-  background: $header-bg;
-
-  .wrapper-header {
-    @include clearfix();
+    @extend %ui-depth1;
     box-sizing: border-box;
-    height: 74px;
-    margin: 0 auto;
-    padding: 10px 10px 0;
+    position: relative;
     width: 100%;
-    max-width: 1180px;
-
-    .logo {
-      @include float(left);
-      @include margin-right(39px);
-      @include margin-left(10px);
-      margin-top: 4px;
-      margin-bottom: 0;
-      position: relative;
-    }
+    border-bottom: 1px solid $gray-l1;
+    box-shadow: 0 1px 5px 0 $shadow-l1;
+    background: $header-bg;
 
-    .left {
-      @include float(left);
-    }
+    .wrapper-header {
+        @include clearfix();
+        box-sizing: border-box;
+        height: 74px;
+        margin: 0 auto;
+        padding: 10px 10px 0;
+        width: 100%;
+        max-width: 1180px;
 
-    .right {
-      @include float(right);
-    }
+        .left {
+            @include float(left);
+        }
 
-    .wrapper-user-menu {
-      @include float(right);
-      margin-top: 4px;
-      width: auto;
-    }
+        .right {
+            @include float(right);
+        }
 
-    .dropdown-menu {
-      @include text-align(left);
-      top: inherit;
-    }
+        .logo {
+            @include float(left);
+            @include margin-left(10px);
+            @include margin-right(10px);
+            margin-top: 4px;
+            margin-bottom: 0;
+            position: relative;
+        }
+
+        .course-header {
+            @include float(left);
+            @include margin(12px, 10px, 0px, 10px);
+            color: $lms-label-color;
+        }
+
+        .wrapper-user-menu {
+            @include float(right);
+            margin-top: 4px;
+            width: auto;
+        }
 
-    .list-inline {
-      &.nav-global {
-        margin-top: 12px;
-      }
+        .dropdown-menu {
+            @include text-align(left);
+            top: inherit;
+        }
+
+        .list-inline {
+            &.nav-global {
+                margin-top: 12px;
+                margin-bottom: 0;
+            }
 
-      &.nav-courseware {
-        margin-top: 5px;
-      }
+            &.nav-courseware {
+                margin-top: 5px;
+            }
 
-      .item {
-        font-weight: font-weight(semi-bold);
-        text-transform: uppercase;
+            .item {
+                font-weight: font-weight(semi-bold);
+                text-transform: uppercase;
 
-        &.active {
-          a {
-            text-decoration: none;
-            color: $link-color;
-          }
+                &.active {
+                    a {
+                        text-decoration: none;
+                        color: $link-color;
+                    }
+                }
+            }
         }
-      }
-    }
 
-    .tab-nav-item{
-      @include float(left);
-      display: flex;
-      margin: 0;
-      justify-content: center;
-
-      .tab-nav-link{
-        font-size: font-size(base);
-        font-weight: font-weight(semi-bold);
-        color: palette(grayscale, dark);
-        padding: 5px 25px 23px;
-        display: inline-block;
-
-        &:active,
-        &:focus,
-        &:hover {
-          border-bottom: 4px solid $courseware-border-bottom-color;
+        .tab-nav-item{
+            @include float(left);
+            display: flex;
+            margin: 0;
+            justify-content: center;
+
+            .tab-nav-link{
+                font-size: font-size(base);
+                font-weight: font-weight(semi-bold);
+                color: palette(grayscale, dark);
+                padding: 5px 25px 23px;
+                display: inline-block;
+
+                &:active,
+                &:focus,
+                &:hover {
+                    border-bottom: 4px solid $lms-border-color;
+                }
+            }
+
+            .active{
+                border-bottom: 4px solid $black-t3 !important;
+            }
         }
-      }
+    }
+
+    // Style the courseware's slim version of the header
+    &.slim {
+        .wrapper-header {
+            height: 60px;
+
+            .logo img {
+                margin-top: 4px;
+                height: 30px;
+            }
 
-      .active{
-        border-bottom: 4px solid $black-t3 !important;
-      }
+            .course-header {
+                margin-top: 10px;
+            }
+
+            .list-inline.nav-global {
+                margin-top: 10px;
+            }
+
+            .wrapper-user-menu {
+                margin-top: 0;
+            }
+        }
     }
-  }
 }

lms/static/sass/shared-v2/_help-tab.scss

@@ -9,9 +9,9 @@
   a:link,
   a:visited {
     cursor: pointer;
-    border: 1px solid palette(grayscale, light);
+    border: 1px solid $lms-border-color;
     border-top-style: none;
-    border-radius: 0 0 ($baseline/2) + px ($baseline/2) + px;
+    border-radius: 0 0 ($baseline/2) ($baseline/2);
     background: transparentize(palette(grayscale, white-t), 0.25);
     color: transparentize(palette(grayscale-cool, x-dark), 0.25);
     font-weight: bold;
@@ -28,25 +28,25 @@
 }
 
 .help-buttons {
-  padding: ($baseline/2) + px ($baseline*2.5) + px;
+  padding: ($baseline/2) ($baseline*2.5);
 
   a:link, a:visited {
-    padding: ($baseline*0.75) + px 0;
+    padding: ($baseline*0.75) 0;
     text-align: center;
     cursor: pointer;
     background: palette(grayscale, white-t);
     text-decoration: none;
     display: block;
-    border: 1px solid palette(grayscale, light);
+    border: 1px solid $lms-border-color;
 
     &#feedback_link_problem {
       border-bottom-style: none;
-      border-radius: ($baseline/2) + px ($baseline/2) + px 0 0;
+      border-radius: ($baseline/2) ($baseline/2) 0 0;
     }
 
     &#feedback_link_question {
       border-top-style: none;
-      border-radius: 0 0 ($baseline/2) + px ($baseline/2) + px;
+      border-radius: 0 0 ($baseline/2) ($baseline/2);
     }
 
     &:hover, &:focus {
@@ -72,6 +72,6 @@
 
 #feedback_success_wrapper {
   p {
-    padding: 0 $baseline + px $baseline + px $baseline + px;
+    padding: 0 $baseline $baseline $baseline;
   }
 }

lms/static/sass/shared-v2/_layouts.scss

+// LMS layouts
+
+.content-wrapper {
+    max-width: 1180px;
+    padding-top: 10px;
+
+    .page-header {
+        @include clearfix();
+        border-bottom: 1px solid $lms-border-color;
+        padding: $baseline $baseline ($baseline/2) $baseline;
+
+        .page-title {
+            @extend %t-title4;
+            margin-bottom: ($baseline/4);
+            text-transform: none;
+            color: $black;
+        }
+
+        .page-description {
+            @extend %t-copy-sub1;
+            margin-bottom: ($baseline/4);
+            color: $gray;
+        }
+    }
+
+    .page-header.has-secondary {
+
+        .page-header-main {
+            display: inline-block;
+            width: flex-grid(8,12);
+        }
+
+        .page-header-secondary {
+            @include text-align(right);
+            display: inline-block;
+            width: flex-grid(4,12);
+            vertical-align: text-bottom;
+        }
+    }
+
+    .container {
+        border: 1px solid #c8c8c8;
+        background-color: $lms-container-background-color;
+        padding: $baseline;
+    }
+}

lms/static/sass/shared-v2/_modal.scss

@@ -26,12 +26,12 @@
     z-index: z-index(mid-front);
     background: $modal-bg-color;
     border-radius: 0;
-    border: 1px solid rgba(0, 0, 0, 0.9);
+    border: 1px solid $lms-border-color;
     box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.7);
     overflow: hidden;
-    padding-left: ($baseline/2) + px;
-    padding-right: ($baseline/2) + px;
-    padding-bottom: ($baseline/2) + px;
+    padding-left: ($baseline/2);
+    padding-right: ($baseline/2);
+    padding-bottom: ($baseline/2);
     position: relative;
 
     p {
@@ -46,15 +46,11 @@
       }
     }
 
-    .sr {
-      @extend .sr-only;
-    }
-
     header {
       z-index: z-index(mid-front);
-      margin-bottom: ($baseline*1.5) + px;
+      margin-bottom: ($baseline*1.5);
       overflow: hidden;
-      padding: 28px $baseline + px 0;
+      padding: 28px $baseline 0;
       position: relative;
 
       &::before {
@@ -115,7 +111,7 @@
       border: 1px solid rgb(143, 14, 14);
       color: rgb(143, 14, 14);
       display: none;
-      margin-bottom: $baseline + px;
+      margin-bottom: $baseline;
       padding: 12px;
     }
 
@@ -124,21 +120,21 @@
       border: 1px solid darken($yellow, 60%);
       color: darken($yellow, 60%);
       display: none;
-      margin-bottom: $baseline + px;
+      margin-bottom: $baseline;
       padding: 12px;
     }
 
     .activation-message, .message {
-      padding: 0 ($baseline*2) + px ($baseline/2) + px;
+      padding: 0 ($baseline*2) ($baseline/2);
 
       p {
-        margin-bottom: ($baseline/2) + px;
+        margin-bottom: ($baseline/2);
       }
     }
 
     form {
       margin-bottom: 12px;
-      padding: 0 ($baseline*2) + px $baseline + px;
+      padding: 0 ($baseline*2) $baseline;
       position: relative;
       z-index: 2;
 
@@ -146,8 +142,8 @@
         @include clearfix();
         border-bottom: 1px solid rgb(210,210,210);
         box-shadow: 0 1px 0 0 rgba(255,255,255, 0.6);
-        margin-bottom: ($baseline*1.5) + px;
-        padding-bottom: ($baseline/2) + px;
+        margin-bottom: ($baseline*1.5);
+        padding-bottom: ($baseline/2);
       }
 
       label {
@@ -170,14 +166,14 @@
       }
 
       input[type="checkbox"] {
-        margin-right: ($baseline/4) + px;
+        margin-right: ($baseline/4);
       }
 
       textarea {
         background: rgb(255,255,255);
         display: block;
         height: 45px;
-        margin-bottom: $baseline + px;
+        margin-bottom: $baseline;
         width: 100%;
       }
 
@@ -187,12 +183,12 @@
         background: rgb(255,255,255);
         display: block;
         height: 45px;
-        margin-bottom: $baseline + px;
+        margin-bottom: $baseline;
         width: 100%;
       }
 
       .submit {
-        padding-top: ($baseline/2) + px;
+        padding-top: ($baseline/2);
 
         input[type="submit"] {
           @extend .btn-brand;
@@ -244,10 +240,10 @@
   #help_wrapper,
   #feedback_form_wrapper,
   .discussion-alert-wrapper {
-    padding: 0 ($baseline*1.5) + px ($baseline*1.5) + px ($baseline*1.5) + px;
+    padding: 0 ($baseline*1.5) ($baseline*1.5) ($baseline*1.5);
 
     header {
-      margin-bottom: $baseline + px;
+      margin-bottom: $baseline;
       padding-right: 0;
       padding-left: 0;
     }
@@ -258,7 +254,7 @@
         family: $font-family-sans-serif;
       }
       line-height: 1.475;
-      margin-top: ($baseline/2) + px;
+      margin-top: ($baseline/2);
       color: $lighter-base-font-color;
     }
   }

lms/static/sass/shared-v2/_navigation.scss

@@ -9,7 +9,7 @@
     top: -($baseline*30);
     overflow: hidden;
     background: $white;
-    border-bottom: 1px solid palette(grayscale, white);
+    border-bottom: 1px solid $lms-border-color;
     padding: ($baseline*0.75) ($baseline/2);
 
     &:focus,

lms/static/sass/shared-v2/_variables.scss

+// LMS variables
+
+$lms-background-color: palette(grayscale, white);  // Why is the Pattern Library default background different?
+$lms-container-background-color: palette(grayscale, white-t);
+$lms-border-color: palette(grayscale, light);
+$lms-label-color: palette(grayscale, black);
+$lms-active-color: palette(primary, base);

lms/static/sass/views/_program-list.scss

 .program-list-wrapper {
-  padding: $baseline + px;
+  padding: $baseline;
 }
 
 .program-cards-container {
@@ -13,15 +13,15 @@
 .sidebar {
   @include span(12);
   @include float(right);
-  margin-bottom: $baseline + px;
+  margin-bottom: $baseline;
 
   @include susy-media($bp-screen-md) {
     @include span(3);
   }
 
   .aside {
-    padding: $baseline + px;
-    margin-bottom: $baseline + px;
+    padding: $baseline;
+    margin-bottom: $baseline;
     background-color: $body-bg;
     box-sizing: border-box;
     border: 1px solid $border-color-l3;
@@ -40,7 +40,7 @@
     .advertise-message {
       font-size: font-size(x-small);
       color: palette(grayscale, black);
-      margin-bottom: $baseline + px;
+      margin-bottom: $baseline;
     }
   }
 
@@ -48,11 +48,11 @@
     .hd-6 {
       color: palette(grayscale, dark);
       font-weight: font-weight(normal);
-      margin-bottom: $baseline + px;
+      margin-bottom: $baseline;
     }
 
     .certificate-link {
-      padding-top: $baseline + px;
+      padding-top: $baseline;
       color: palette(primary, base);
       display: block;
 
@@ -69,13 +69,13 @@
 .empty-programs-message {
   border: 3px solid $gray-l4;
   background: $gray-l6;
-  padding: ($baseline*2) + px 0;
+  padding: ($baseline*2) 0;
   text-align: center;
   margin-bottom: 20px;
 
   .hd-3 {
     color: $black;
-    margin-bottom: $baseline + px;
+    margin-bottom: $baseline;
   }
 
   .find-xseries-programs {
@@ -85,13 +85,13 @@
 
     .action-xseries-icon {
       @include float(left);
-      @include margin-right($baseline*0.4 + px);
+      @include margin-right($baseline*0.4);
 
       display: inline;
       background: url('#{$static-path}/images/icon-sm-xseries-white.png') no-repeat;
       background-color: transparent;
-      width: ($baseline*1.1) + px;
-      height: ($baseline*1.1) + px;
+      width: ($baseline*1.1);
+      height: ($baseline*1.1);
     }
 
     &:active,

lms/static/sass/views/_teams.scss

@@ -19,7 +19,7 @@
     color: inherit;
   }
 
-// layout
+  // layout
   .page-header {
     @include clearfix();
     border-bottom: 1px solid $gray-l3;
@@ -54,7 +54,7 @@
     }
   }
 
-// ui bits
+  // ui bits
   .breadcrumbs {
     @extend %t-copy-sub1;
 
@@ -83,16 +83,16 @@
     }
 
     .search-label {
-        @extend %text-sr;
+      @extend %text-sr;
     }
 
     .search-field {
-        transition: all $tmg-f2 ease-in-out;
-        border: 1px solid $gray-l4;
-        border-radius: 3px;
-        padding: ($baseline/4) ($baseline/2);
-        font-family: inherit;
-        color: $gray;
+      transition: all $tmg-f2 ease-in-out;
+      border: 1px solid $gray-l4;
+      border-radius: 3px;
+      padding: ($baseline/4) ($baseline/2);
+      font-family: inherit;
+      color: $gray;
     }
 
     .action-search {
@@ -103,7 +103,7 @@
       vertical-align: middle;
 
       .icon {
-          color: $white;
+        color: $white;
       }
 
       // STATE: hover and focus
@@ -130,7 +130,7 @@
     }
   }
 
-// main content bits
+  // main content bits
   .page-content {
     padding: $baseline;
   }
@@ -337,6 +337,11 @@
 
   .team-profile {
 
+    .new-post-btn {
+      @include float(right);
+      @include blue-button;
+    }
+
     .page-content-main {
       display: inline-block;
       width: flex-grid(8, 12);
@@ -389,88 +394,88 @@
         display: inline-block;
 
         @include tooltip-hover-style(-($baseline*2));
-        }
       }
+    }
   }
 
   .create-team {
 
     legend {
-        @extend %t-title6;
-        @extend %t-weight4;
-        margin-bottom: ($baseline/4);
+      @extend %t-title6;
+      @extend %t-weight4;
+      margin-bottom: ($baseline/4);
     }
 
     .description {
-        @extend %t-copy-sub1;
-        margin-bottom: ($baseline/2);
-        color: $gray-l1;
+      @extend %t-copy-sub1;
+      margin-bottom: ($baseline/2);
+      color: $gray-l1;
     }
 
     .form-field {
-        margin: 0 0 ($baseline*0.75) 0;
+      margin: 0 0 ($baseline*0.75) 0;
 
-        .label {
-            display: block;
-            margin-bottom: ($baseline/4);
-        }
+      .label {
+        display: block;
+        margin-bottom: ($baseline/4);
+      }
 
-        &.is-required {
-            @extend %t-weight4;
+      &.is-required {
+        @extend %t-weight4;
 
-            .label:after {
-              @include margin-left($baseline/4);
-              content: "*";
-            }
+        .label:after {
+          @include margin-left($baseline/4);
+          content: "*";
         }
+      }
 
-        .input-text {
-            @extend %t-copy-base;
-            transition: all $tmg-f2 ease-in-out 0s;
-            display: block;
-            width: 90%;
-            height: 100%;
-            margin-bottom: ($baseline/4);
-            border: 1px solid $gray-l2;
-            padding: ($baseline/2);
-        }
+      .input-text {
+        @extend %t-copy-base;
+        transition: all $tmg-f2 ease-in-out 0s;
+        display: block;
+        width: 90%;
+        height: 100%;
+        margin-bottom: ($baseline/4);
+        border: 1px solid $gray-l2;
+        padding: ($baseline/2);
+      }
 
-        .input-select {
-            @extend %t-copy-base;
-            width: 90%;
-            margin-bottom: ($baseline/4);
-            border: 1px solid $gray-l2;
-        }
+      .input-select {
+        @extend %t-copy-base;
+        width: 90%;
+        margin-bottom: ($baseline/4);
+        border: 1px solid $gray-l2;
+      }
 
-        .input-text,
-        .input-select {
+      .input-text,
+      .input-select {
 
-            &:focus {
-                border: 1px solid $blue;
+        &:focus {
+          border: 1px solid $blue;
 
-                + .tip {
-                    color: $blue;
-                }
-            }
+          + .tip {
+            color: $blue;
+          }
         }
+      }
 
-        &.has-errors {
+      &.has-errors {
 
-            .input-text,
-            .input-select {
-                border: 1px solid $alert-color;
+        .input-text,
+        .input-select {
+          border: 1px solid $alert-color;
 
-                + .tip {
-                    color: $alert-color;
-                }
-            }
+          + .tip {
+            color: $alert-color;
+          }
         }
+      }
 
-        .tip {
-            @extend %t-copy-sub1;
-            display: block;
-            color: $gray-l1;
-        }
+      .tip {
+        @extend %t-copy-sub1;
+        display: block;
+        color: $gray-l1;
+      }
     }
 
     .required-wrapper {
@@ -490,33 +495,33 @@
   }
 
   .form-actions {
-        margin-top: $baseline;
-    }
+    margin-top: $baseline;
+  }
 
-    .action {
-      @extend %t-copy;
-      @extend %t-action2;
-      @include margin-right ($baseline/2);
-      padding: ($baseline/2) $baseline;
-    }
+  .action {
+    @extend %t-copy;
+    @extend %t-action2;
+    @include margin-right ($baseline/2);
+    padding: ($baseline/2) $baseline;
+  }
 
-    .action-primary {
-      @extend %btn-primary-blue;
-      display: inline-block;
-      text-shadow: none;
-    }
+  .action-primary {
+    @extend %btn-primary-blue;
+    display: inline-block;
+    text-shadow: none;
+  }
 
-    .action-cancel {
-      @extend %button-reset;
-      display: inline-block;
-      border: 1px solid transparent;
-      color: $gray;
+  .action-cancel {
+    @extend %button-reset;
+    display: inline-block;
+    border: 1px solid transparent;
+    color: $gray;
 
-      // STATE: hover and focus
-      &:hover,
-      &:focus {
-          border: 1px solid $link-color;
-          color: $link-color;
+    // STATE: hover and focus
+    &:hover,
+    &:focus {
+      border: 1px solid $link-color;
+      color: $link-color;
     }
   }
 
@@ -569,107 +574,107 @@
       width: 100%;
       @include clearfix();
 
-    .team-required-fields {
-      @include float(left);
-      width: 55%;
+      .team-required-fields {
+        @include float(left);
+        width: 55%;
 
-      .u-field {
-        @include margin-right($baseline*2);
-      }
+        .u-field {
+          @include margin-right($baseline*2);
+        }
 
-      .u-field.u-field-name {
-        padding-bottom: $baseline;
+        .u-field.u-field-name {
+          padding-bottom: $baseline;
 
-        .u-field-value {
-          width: 100%;
+          .u-field-value {
+            width: 100%;
 
-          input {
-            border-radius: ($baseline/5);
-            height: ($baseline*2);
+            input {
+              border-radius: ($baseline/5);
+              height: ($baseline*2);
+            }
           }
-        }
 
-        .u-field-message {
-          @include padding-left(0);
-          padding-top: ($baseline/4);
-          width: 100%;
+          .u-field-message {
+            @include padding-left(0);
+            padding-top: ($baseline/4);
+            width: 100%;
+          }
         }
-      }
 
-      .u-field.u-field-description {
-
-        .u-field-value {
-          width: 100%;
+        .u-field.u-field-description {
 
-          textarea {
+          .u-field-value {
             width: 100%;
-            height: ($baseline*5);
-            border-radius: ($baseline/5)
+
+            textarea {
+              width: 100%;
+              height: ($baseline*5);
+              border-radius: ($baseline/5)
+            }
           }
-        }
 
-        .u-field-footer {
+          .u-field-footer {
 
-          .u-field-message {
-            display: block;
-            @extend %t-copy-sub1;
-            @include padding-left(0);
-            margin-top: ($baseline/4);
-            color: $gray-l1;
-            width: 100%;
+            .u-field-message {
+              display: block;
+              @extend %t-copy-sub1;
+              @include padding-left(0);
+              margin-top: ($baseline/4);
+              color: $gray-l1;
+              width: 100%;
+            }
           }
         }
-      }
 
-      .u-field-title {
-        padding-bottom: ($baseline/4);
-        color: $base-font-color;
-        width: 100%;
+        .u-field-title {
+          padding-bottom: ($baseline/4);
+          color: $base-font-color;
+          width: 100%;
+        }
       }
-    }
 
-    .team-optional-fields {
-      @include float(left);
-      @include margin-left($baseline*2);
-      width: 40%;
+      .team-optional-fields {
+        @include float(left);
+        @include margin-left($baseline*2);
+        width: 40%;
 
-      .u-field.u-field-optional_description {
-        margin-bottom: ($baseline/2);
+        .u-field.u-field-optional_description {
+          margin-bottom: ($baseline/2);
 
-        .u-field-title {
-          color: $base-font-color;
-          font-weight: $font-semibold;
+          .u-field-title {
+            color: $base-font-color;
+            font-weight: $font-semibold;
+            margin-bottom: ($baseline/5);
+          }
+
+          .u-field-value {
+            display: none;
+          }
+        }
+
+        .u-field.u-field-language {
           margin-bottom: ($baseline/5);
         }
 
-        .u-field-value {
+        .u-field-value-display {
           display: none;
         }
-      }
-
-      .u-field.u-field-language {
-        margin-bottom: ($baseline/5);
-      }
 
-      .u-field-value-display {
-        display: none;
-      }
+        .u-field-title {
+          color: $base-font-color;
+        }
 
-      .u-field-title {
-        color: $base-font-color;
-      }
+        .u-field-message {
+          @include padding-left(0);
+        }
 
-      .u-field-message {
-        @include padding-left(0);
+        .u-field-title, .u-field-value, .u-field-message {
+          width: 100%;
+        }
       }
 
-      .u-field-title, .u-field-value, .u-field-message {
-        width: 100%;
-      }
     }
 
-  }
-
     .u-field {
       padding: 0;
     }
@@ -692,10 +697,10 @@
 
 // vertical line between required and optional fields
 .vertical-line:after {
-    height: 100%;
-    border-left: 2px solid $gray-l4;
-    content: "";
-    position: absolute;
+  height: 100%;
+  border-left: 2px solid $gray-l4;
+  content: "";
+  position: absolute;
 }
 
 .form-instructions {

lms/templates/courseware/course_navigation.html

 ## mako
+<%page args="active_page=None" expression_filter="h" />
 <%namespace name='static' file='/static_content.html'/>
 <%!
 from django.utils.translation import ugettext as _
@@ -10,7 +11,6 @@ from openedx.core.djangolib.js_utils import dump_js_escaped_json
 from openedx.core.djangolib.markup import HTML, Text
 from student.models import CourseEnrollment
 %>
-<%page args="active_page=None" expression_filter="h" />
 
 <%
 if active_page is None and active_page_context is not UNDEFINED:
@@ -88,7 +88,7 @@ include_special_exams = settings.FEATURES.get('ENABLE_SPECIAL_EXAMS', False) and
             tab_list = get_course_tab_list(request, course)
             tabs_tmpl = static.get_template_path('/courseware/tabs.html')
             %>
-            <ol class="course-tabs">
+            <ol class="tabs course-tabs">
                 <%include file="${tabs_tmpl}" args="tab_list=tab_list,active_page=active_page,default_tab=default_tab,tab_image=tab_image" />
                 <%block name="extratabs" />
             </ol>

lms/templates/courseware/tabs.html

 ## mako
+
 <%namespace name='static' file='/static_content.html'/>
 <%!
  from django.utils.translation import ugettext as _
  from django.core.urlresolvers import reverse
  %>
-<%page args="tab_list, active_page, default_tab, tab_image" />
+<%page args="tab_list, active_page, default_tab, tab_image" expression_filter="h" />
 
 <%
 def url_class(is_active):
@@ -17,9 +18,9 @@ def url_class(is_active):
     tab_is_active = tab.tab_id in (active_page, default_tab)
     tab_class = url_class(tab_is_active)
   %>
-  <li>
-  <a href="${tab.link_func(course, reverse) | h}" class="${tab_class}">
-  ${_(tab.name) | h}
+  <li class="tab">
+  <a href="${tab.link_func(course, reverse)}" class="${tab_class}">
+  ${_(tab.name)}
   % if tab_is_active:
       <span class="sr">, current location</span>
   %endif

lms/templates/discussion/_discussion_course_navigation.html

+<%page expression_filter="h"/>
 <%inherit file="../courseware/course_navigation.html" />
 <%!
 from django.utils.translation import ugettext as _
@@ -6,6 +7,8 @@ from django_comment_client.permissions import has_permission
 
 <%block name="extratabs">
 % if has_permission(user, 'create_thread', course.id):
-    <li class="right"><a href="#" class="new-post-btn" role="button"><span class="icon fa fa-edit new-post-icon"></span>${_("New Post")}</a></li>
+    <li class="right">
+        <button class="new-post-btn btn-neutral btn-small">${_("Add a Post")}</button>
+    </li>
 % endif
 </%block>

lms/templates/discussion/_discussion_module.html

+<%page expression_filter="h"/>
 <%include file="_underscore_templates.html" />
 <%!
 from django.utils.translation import ugettext as _
 %>
 
-<div class="discussion-module" data-discussion-id="${discussion_id | h}" data-user-create-comment="${can_create_comment}" data-user-create-subcomment="${can_create_subcomment}" data-read-only="false">
-    <a class="discussion-show control-button" href="javascript:void(0)" data-discussion-id="${discussion_id | h}" role="button"><span class="show-hide-discussion-icon"></span><span class="button-text">${_("Show Discussion")}</span></a>
+<div class="discussion-module" data-discussion-id="${discussion_id}" data-user-create-comment="${can_create_comment}" data-user-create-subcomment="${can_create_subcomment}" data-read-only="false">
+    <a class="discussion-show control-button" href="javascript:void(0)" data-discussion-id="${discussion_id}" role="button">
+        <span class="show-hide-discussion-icon"></span><span class="button-text">${_("Show Discussion")}</span>
+    </a>
     % if can_create_thread:
-        <a href="#" class="new-post-btn" role="button"><span class="icon fa fa-edit new-post-icon"></span>${_("New Post")}</a>
+        <button class="new-post-btn btn-neutral btn-small">${_("Add a Post")}</button>
     % endif
 </div>

lms/templates/discussion/index.html

+## mako
+
+<%! main_css = "style-discussion-main" %>
+
+<%page expression_filter="h"/>
 <%inherit file="../main.html" />
 <%namespace name='static' file='../static_content.html'/>
 <%!
@@ -7,12 +12,9 @@ from django.core.urlresolvers import reverse
 %>
 
 <%block name="bodyclass">discussion</%block>
-<%block name="pagetitle">${_("Discussion - {course_number}").format(course_number=course.display_number_with_default) | h}</%block>
+<%block name="pagetitle">${_("Discussion - {course_number}").format(course_number=course.display_number_with_default)}</%block>
 
 <%block name="headextra">
-<%static:css group='style-course-vendor'/>
-<%static:css group='style-course'/>
-
 <%include file="_js_head_dependencies.html" />
 </%block>
 
@@ -24,21 +26,22 @@ from django.core.urlresolvers import reverse
 
 <%include file="_discussion_course_navigation.html" args="active_page='discussion'" />
 
+<%block name="content">
 <section class="discussion container" id="discussion-container"
-         data-roles="${roles | h}"
-         data-course-id="${course_id | h}"
-         data-course-name="${course.display_name_with_default_escaped | h}"
-         data-user-info="${user_info | h}"
-         data-user-create-comment="${can_create_comment | h}"
-         data-user-create-subcomment="${can_create_subcomment | h}"
+         data-roles="${roles}"
+         data-course-id="${course_id}"
+         data-course-name="${course.display_name_with_default}"
+         data-user-info="${user_info}"
+         data-user-create-comment="${can_create_comment}"
+         data-user-create-subcomment="${can_create_subcomment}"
          data-read-only="false"
-         data-threads="${threads | h}"
-         data-thread-pages="${thread_pages | h}"
-         data-content-info="${annotated_content_info | h}"
-         data-sort-preference="${sort_preference | h}"
-         data-flag-moderator="${flag_moderator | h}"
-         data-user-cohort-id="${user_cohort | h}"
-         data-course-settings="${course_settings | h}">
+         data-threads="${threads}"
+         data-thread-pages="${thread_pages}"
+         data-content-info="${annotated_content_info}"
+         data-sort-preference="${sort_preference}"
+         data-flag-moderator="${flag_moderator}"
+         data-user-cohort-id="${user_cohort}"
+         data-course-settings="${course_settings}">
     <div class="discussion-body">
         <div class="forum-nav" role="complementary" aria-label="${_("Discussion thread list")}"></div>
         <div class="discussion-column" id="discussion-column">
@@ -49,6 +52,7 @@ from django.core.urlresolvers import reverse
         </div>
     </div>
 </section>
+</%block>
 
 <%include file="_underscore_templates.html" />
 <%include file="_thread_list_template.html" />

package.json

@@ -4,7 +4,7 @@
   "dependencies": {
     "backbone": "~1.3.2",
     "coffee-script": "1.6.1",
-    "edx-pattern-library": "~0.12.4",
+    "edx-pattern-library": "0.13.0",
     "edx-ui-toolkit": "~1.1.0",
     "jquery": "~2.2.0",
     "jquery-migrate": "^1.4.1",