feat: swap bootstrap for paragon sass

cms/static/sass/_build.scss

@@ -3,9 +3,8 @@
 // Studio theme
 @import 'cms/theme/variables';
 
-// Core Bootstrap functions, variables and mixins
-@import 'bootstrap/variables';
-@import 'bootstrap/scss/functions';
-@import 'bootstrap/scss/variables';
-@import 'bootstrap/scss/mixins/breakpoints';
-@import 'bootstrap/scss/mixins/grid';
+// Paragon SASS framework
+@import 'paragon';
+
+// Legacy variables file
+@import './bootstrap/variables';

cms/static/sass/_paragon.scss

@@ -0,0 +1,14 @@
+// Paragon SASS framework plus variables that Studio expects.
+@import '@edx/paragon-new/scss/core/core';
+
+// Fill in variable gaps
+
+$inverse: $white !default;
+$pink: pink !default;
+
+$theme-colors: map-merge(
+  (
+    "inverse":    $inverse,
+  ),
+  $theme-colors
+);

cms/static/sass/_shame.scss

@@ -139,6 +139,34 @@ div.wrapper-comp-editor.is-inactive ~ div.launch-latex-compiler {
 
 // ====================
 
+// The Paragon SASS framework has been added to Studio in its totality.
+// There are a handful of places where class names conflict. The styles
+// below attempt to enforce Studio's existing styling rules while offering
+// an opt-in to the full Paragon/Bootstrap style rules.
+
+// Bootstrap .row is display: flex; with negative margins,
+// Studio assumes .row is display: block; and sets no left right margins.
+// If a Bootstrap style row is desired use: <div class="row bs-row">...</div>
+.row:not(.bs-row) {
+  display: block;
+  margin-left: 0;
+  margin-right: 0;
+}
+
+// A series of conflicts in modal styles... The existing Studio modal is
+// styled in this pretty specific selector cms/static/sass/elements/_modal-window.scss
+// So we enforce some styles here to prevent Paragon from messing things up.
+[class*="view-"] .modal-window {
+  max-width: 100%;
+
+  .modal-content {
+    display: block;
+    box-shadow: none;
+  }
+}
+
+// ====================
+
 // TODOs:
 
 // * font-weight syncing

cms/static/sass/bootstrap/studio-main.scss

@@ -5,8 +5,8 @@
 // Studio theme variables
 @import 'cms/theme/variables';
 
-// Bootstrap
-@import 'bootstrap/scss/bootstrap';
+// Paragon SASS framework
+@import '../paragon';
 
 // Legacy support
 @import 'legacy';

cms/static/sass/partials/cms/theme/_variables.scss

@@ -1,5 +1,3 @@
 // Default bootstrap theming
 
 $body-bg: #f5f5f5 !default;
-
-@import 'edx-bootstrap/sass/open-edx/theme';

cms/templates/container.html

@@ -19,7 +19,7 @@
 %>
 
 <%block name="title">${xblock.display_name_with_default} ${xblock_type_display_name(xblock)}</%block>
-<%block name="bodyclass">is-signedin course container view-container</%block>
+<%block name="bodyclass">is-signedin course view-container</%block>
 
 <%namespace name='static' file='static_content.html'/>
 

common/static/sass/_mixins.scss

@@ -292,7 +292,7 @@
   &:focus {
     border: 1px solid $uxpl-blue-hover-active;
     background-color: $uxpl-blue-hover-active;
-    color: theme-color("inverse");
+    color: theme-color("inverse") !important;
   }
 
   &.is-disabled,

lms/static/certificates/sass/main-ltr.scss

@@ -7,9 +7,9 @@
 // It should mirror main-rtl w/ the exception of bi-app references.
 
 @import '../sass/vendor/bi-app/bi-app-ltr';
-@import 'bootstrap/scss/functions';
-@import 'bootstrap/scss/variables';
-@import 'bootstrap/scss/mixins';
+
+// Paragon SASS Framework
+@import 'paragon';
 
 // Load the shared build
 @import 'build';

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

@@ -7,9 +7,9 @@
 // It should mirror main-ltr w/ the exception of bi-app references.
 
 @import '../sass/vendor/bi-app/bi-app-rtl';
-@import 'bootstrap/scss/functions';
-@import 'bootstrap/scss/variables';
-@import 'bootstrap/scss/mixins';
+
+// Paragon SASS Framework
+@import '../../sass/paragon';
 
 // Load the shared build
 @import 'build';

lms/static/sass/_build-footer-edx.scss

@@ -1,10 +1,12 @@
 // ----------------------------------------
 // LMS edx.org Footer: Shared Build Compile
 @import 'lms/theme/variables';
+
+// Legacy variables that augmented Bootstrap
 @import 'bootstrap/variables';
-@import 'bootstrap/scss/functions';
-@import 'bootstrap/scss/variables';
-@import 'bootstrap/scss/mixins/breakpoints';
+
+// Paragon SASS Framework
+@import 'paragon';
 @import '../variables';
 @import 'lms/theme/variables-v1';
 @import 'base/mixins';

lms/static/sass/_paragon.scss

@@ -0,0 +1,14 @@
+// Paragon SASS framework plus variables that LMS expects.
+@import '@edx/paragon-new/scss/core/core';
+
+// Fill in variable gaps
+
+$inverse: $white !default;
+$pink: pink !default;
+
+$theme-colors: map-merge(
+  (
+    "inverse":    $inverse,
+  ),
+  $theme-colors
+);

lms/static/sass/_variables.scss

@@ -5,5 +5,5 @@ $text-width-readability-max: 1080px;
 // LMS-only colors
 $audit-mode-color: rgb(74, 74, 74) !default;
 $honor-mode-color: theme-color("primary") !default;
-$verified-mode-color: theme-color("purchase") !default;
-$professional-certificate-color: #9a1f60 !default;
+$verified-mode-color: theme-color("success") !default;
+$professional-certificate-color: #9a1f60 !default;$pink: pink !default;

lms/static/sass/base/_build.scss

@@ -3,16 +3,11 @@
 // Theme-specific variables
 @import 'lms/theme/variables';
 
-// Core Bootstrap functions, variables and mixins
+// Legacy variables that augmented Bootstrap
 @import 'bootstrap/variables';
-@import 'bootstrap/scss/functions';
-@import 'bootstrap/scss/variables';
-@import 'bootstrap/scss/mixins';
-@import 'bootstrap/scss/utilities';
 
-
-// Bootstrap components
-@import 'bootstrap/scss/popover';
+// Paragon SASS Framework
+@import '../paragon';
 
 // LMS-specific variables
 @import '../variables';

lms/static/sass/bootstrap/_build.scss

@@ -4,8 +4,8 @@
 // LMS theme
 @import 'lms/theme/variables';
 
-// Bootstrap
-@import 'bootstrap/scss/bootstrap';
+// Paragon SASS Framework
+@import '../paragon';
 
 // LMS variables
 @import '../variables';

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

@@ -573,7 +573,7 @@ html.video-fullscreen {
           @extend %h1-top-header !optional;
 
           border-radius: 0 4px 0 0;
-          margin-bottom: -16px;
+          margin-bottom: 0;
           border-bottom: 0;
 
           h1 {

lms/static/sass/course/wiki/_wiki.scss

@@ -15,7 +15,8 @@
   @include clearfix();
 
   .breadcrumbs-header {
-    height: 33px;
+    @include clearfix();
+
     padding: 24px 0 26px;
     border-bottom: 1px solid $gray-l3;
     border-radius: 3px 3px 0 0;
@@ -31,8 +32,9 @@
 
   .breadcrumb {
     list-style: none;
-    padding-left: 0;
+    padding: 0;
     margin: 0 0 0 ($baseline*2);
+    background: none;
 
     li {
       float: left;
@@ -279,6 +281,7 @@
     list-style: none;
     padding: 0;
     margin: 0;
+    flex-direction: column;
 
     li {
       &.active {

lms/static/sass/discussion/_discussion.scss

@@ -159,7 +159,7 @@ section.discussion-pagination {
           font-size: $forum-base-font-size;
           font-weight: 700;
           line-height: 32px;
-          color: theme-color("gray-dark");
+          color: $gray-700;
           text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
         }
       }

lms/static/sass/discussion/_mixins.scss

@@ -20,7 +20,7 @@
 
   border-color: #aaa;
   background-color: $white;
-  color: theme-color("gray-dark");
+  color: $gray-700;
 
   &:hover,
   &:focus {

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

@@ -7,8 +7,8 @@ $static-path: '../..';
 // Theme-specific variables
 @import 'lms/theme/variables';
 
-// Bootstrap
-@import 'bootstrap/scss/bootstrap';
+// Paragon SASS Framework
+@import '../paragon';
 
 // Legacy support
 @import '../bootstrap/legacy';

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

@@ -132,7 +132,7 @@
     width: 100%;
     height: 40px;
     box-shadow: 0 1px 3px $shadow-l1 inset;
-    color: theme-color("gray-dark");
+    color: $gray-700;
     font-size: $forum-large-font-size;
     font-family: $font-family-sans-serif;
   }
@@ -151,7 +151,7 @@
   .post-type-label {
     @include margin-right($baseline);
 
-    color: theme-color("gray-dark");
+    color: $gray-700;
   }
 
   input[type=text].field-input {

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

@@ -76,7 +76,7 @@
   display: block;
   padding: ($baseline/2) $baseline;
   width: 100%;
-  background: theme-color("lightest");
+  background: $light-300;
   box-shadow: 0 1px 3px -1px $shadow inset;
 }
 
@@ -146,7 +146,7 @@
 
   @include border-radius(0 0 $forum-border-radius $forum-border-radius);
 
-  background: theme-color("lightest");
+  background: $light-300;
   box-shadow: 0 1px 3px -1px $shadow inset;
 
   > li {

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

@@ -44,7 +44,7 @@
   display: block;
   margin-bottom: $baseline;
   font-size: $forum-x-large-font-size;
-  color: theme-color("gray-dark");
+  color: $gray-700;
   font-weight: 600;
 }
 

lms/static/sass/features/_course-experience.scss

@@ -122,12 +122,12 @@
         flex-grow: 1;
 
         &:not(.dismissible):first-of-type {
-          color: theme-color("purchase");
-          border-color: theme-color("purchase");
+          color: theme-color("success");
+          border-color: theme-color("success");
 
           &:hover {
             color: theme-color("inverse");
-            background-color: theme-color("purchase");
+            background-color: theme-color("success");
           }
         }
 
@@ -142,7 +142,6 @@
           font-size: font-size(small);
           color: $link-color;
           text-decoration: underline;
-
           cursor: pointer;
 
           &:hover {