Update Pattern Library pages to use new color scheme

TNL-5135

cms/static/sass/programs/_components.scss

@@ -42,7 +42,7 @@
     &:focus,
     &.is-focused {
       background: shade($success, 33%);
-      color: $btn-default-focus-color;
+      color: palette(primary, accent);
     }
 
     // STATE: is pressed or active
@@ -94,6 +94,6 @@
 
 .form-group {
   &.bg-white {
-    background-color: palette(grayscale, white);
+    background-color: $white;
   }
 }

cms/static/sass/programs/_modals.scss

@@ -8,7 +8,7 @@
   right: 0;
   bottom: 0;
   left: 0;
-  background-color: palette(grayscale-cool, x-dark);
+  background-color: palette(grayscale, dark);
   opacity: 0.5;
   z-index: 1000;
 }
@@ -25,15 +25,15 @@
 .modal-content {
   margin: 5px;
   padding: 20px;
-  background-color: palette(grayscale-cool, x-dark);
+  background-color: palette(grayscale, dark);
   border-top: 5px solid palette(warning, base);
 
   .copy {
-    color: palette(grayscale, white);
+    color: $white;
   }
 
   .emphasized {
-    color: palette(grayscale, white-t);
+    color: $white;
     font-weight: font-weight(bold);
   }
 }
@@ -42,7 +42,7 @@
   padding: 10px 20px;
 
   .btn {
-    color: palette(grayscale, white-t);
+    color: palette(grayscale, back);
   }
 
   .btn-brand {
@@ -52,8 +52,8 @@
     &:hover,
     &:focus,
     &:active {
-      background: palette(warning, dark);
-      border-color: palette(warning, dark);;
+      background: palette(warning, back);
+      border-color: palette(warning, accent);
     }
   }
 
@@ -63,7 +63,7 @@
     &:hover,
     &:focus,
     &:active {
-      border-color: palette(grayscale-cool, light)
+      border-color: palette(grayscale, back)
     }
   }
 }

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

@@ -5,7 +5,7 @@
                 data-user-create-comment="<%- !readOnly %>"
                 data-user-create-subcomment="<%- !readOnly %>">
             <% if ( !readOnly) { %>
-                <button type="button" class="btn-neutral btn-small new-post-btn">
+                <button type="button" class="btn btn-small new-post-btn">
                     <%- gettext("Add a Post") %>
                 </button>
             <% } %>

lms/static/certificates/sass/_base.scss

@@ -14,7 +14,7 @@ html, body {
     height: 100%;
     margin: 0;
     padding: 0;
-    background: palette(grayscale, white);
+    background: $white;
 }
 
 // ------------------------------

lms/static/certificates/sass/_components.scss

@@ -22,7 +22,7 @@
 // ------------------------------
 %hd-subsection {
     margin-bottom: spacing-vertical(mid-small);
-    border-bottom: rem(2) solid palette(grayscale-cool, x-light);
+    border-bottom: rem(2) solid palette(grayscale, x-back);
     padding-bottom: spacing-vertical(x-small);
 }
 
@@ -30,20 +30,20 @@
 // #DEPTH
 // ------------------------------
 %depth-base-focus {
-    background: palette(grayscale, white-t);
+    background: $white;
     padding: spacing-vertical(small) spacing-horizontal(base);
 }
 
 %depth-well {
-    box-shadow: 0 rem(1) rem(3) 0 palette(grayscale-cool, light) inset;
+    box-shadow: 0 rem(1) rem(3) 0 palette(grayscale, back) inset;
     padding: spacing-vertical(small) spacing-horizontal(base);
-    background: palette(grayscale, x-light);
+    background: palette(grayscale, x-back);
 }
 
 %depth-card {
-    box-shadow: 0 rem(1) rem(2) 0 palette(grayscale-cool, light);
+    box-shadow: 0 rem(1) rem(2) 0 palette(grayscale, back);
     padding: spacing-vertical(small) spacing-horizontal(base);
-    background: palette(grayscale, white-t);
+    background: $white;
 }
 
 .depth-base-focus {
@@ -76,8 +76,8 @@
 // ------------------------------
 .wrapper-header {
     @extend %divider-2;
-    border-bottom-color: palette(grayscale, xx-trans);
-    background: palette(grayscale, white-t);
+    border-bottom-color: palette(grayscale, x-back);
+    background: $white;
 }
 
 .header-app {
@@ -96,19 +96,19 @@
 
 // message to user-centric banner
 .wrapper-banner-user {
-    box-shadow: inset 0 rem(2) rem(2) 0 palette(grayscale, black-t);
-    background: palette(grayscale-cool, x-dark);
+    box-shadow: inset 0 rem(2) rem(2) 0 palette(grayscale, black);
+    background: palette(grayscale, dark);
 }
 
 .banner-user {
 
     .message-title {
-        color: palette(grayscale, white-t);
+        color: $white;
         font-weight: font-weight(semi-bold);
     }
 
     .message-copy {
-        color: palette(grayscale, white);
+        color: $white;
     }
 
     .message-actions .action {
@@ -116,7 +116,7 @@
         // STATE: hover, active, focus
         &:hover, &:active, &:focus {
             // customizations from UXPL
-           color: palette(grayscale-cool, x-dark);
+           color: palette(grayscale, dark);
         }
 
         .icon {
@@ -161,7 +161,7 @@
 
 // main accomplishment
 .accomplishment-main {
-    background: palette(grayscale-cool, x-trans);
+    background: transparentize(palette(grayscale, back), 0.75);
 }
 
 // brief accomplishment
@@ -198,13 +198,13 @@
 
 %rendering-section {
     margin-bottom: spacing-vertical(base);
-    border-bottom: rem(2) solid palette(grayscale-cool, x-light);
+    border-bottom: rem(2) solid palette(grayscale, x-back);
     padding-bottom: spacing-vertical(base);
 }
 
 %rendering-hd-section {
     margin-bottom: spacing-vertical(mid-small);
-    border-bottom: rem(2) solid palette(grayscale-cool, x-light);
+    border-bottom: rem(2) solid palette(grayscale, x-back);
     padding-bottom: spacing-vertical(x-small);
     color: $cert-base-color;
     @include text-align(center);
@@ -344,7 +344,7 @@
         .value {
             @extend %copy-base;
             font-weight: font-weight(semi-bold);
-            color: palette(grayscale, x-dark);
+            color: palette(grayscale, dark);
         }
     }
 
@@ -360,7 +360,7 @@
 
         .src {
             max-height: 100%;
-            border: rem(4) solid palette(grayscale, white-t);
+            border: rem(4) solid $white;
         }
     }
 
@@ -384,7 +384,7 @@
 
 .accomplishment-metadata-title {
     @extend %hd-subsection;
-    border-bottom-color: palette(grayscale-cool, light);
+    border-bottom-color: palette(grayscale, back);
 }
 
 // ------------------------------
@@ -467,7 +467,7 @@
     }
 
     .accomplishment-main {
-        background: transparentize(palette(grayscale-cool, dark), 0.9);
+        background: transparentize(palette(grayscale, dark), 0.9);
     }
 
     .accomplishment-rendering {
@@ -496,7 +496,7 @@
     }
 
     .accomplishment-rendering {
-        background: palette(grayscale, white-t) url('../images/bg-verified.png') center no-repeat;
+        background: $white url('../images/bg-verified.png') center no-repeat;
         background-size: 65%;
 
         .deco-corner-tl {
@@ -537,7 +537,7 @@
 // #FOOTER
 // ------------------------------
 .footer-app {
-    border-top: rem(4) solid palette(grayscale, xx-trans);
+    border-top: rem(4) solid transparentize(palette(grayscale, base), 0.95);
     padding-top: spacing-vertical(base);
 }
 
@@ -556,7 +556,7 @@
     top: 0;
     left: 0;
     z-index: z-index(front);
-    background-color: palette(grayscale, trans); /* dim the background */
+    background-color: transparentize(palette(grayscale, base), 0.5); /* dim the background */
     width: 100%;
     height: 100%;
     vertical-align: middle;
@@ -572,8 +572,8 @@
         max-width: 50%;
         margin-right: auto;
         margin-left: auto;
-        border-top: rem(10) solid palette(primary, light);
-        background: palette(grayscale, white);
+        border-top: rem(10) solid palette(primary, back);
+        background: palette(grayscale, x-back);
         padding-right: spacing-horizontal(large);
         padding-left: spacing-horizontal(large);
         overflow-x: hidden;
@@ -612,7 +612,7 @@
 .modal-hr {
     display: block;
     border: none;
-    background-color: palette(grayscale, light);
+    background-color: palette(grayscale, back);
     height: rem(2);
     width: 100%;
 }

lms/static/certificates/sass/_config.scss

@@ -7,12 +7,12 @@
 // ------------------------------
 
 // certificate characteristics
-$cert-base-color: palette(grayscale-cool, dark);
+$cert-base-color: palette(grayscale, dark);
 $cert-distinguished-color: palette(primary, accent);
 
-$cert-decorative-color: palette(grayscale-cool, light);
-$cert-decorative-color-de-emphasized: palette(grayscale-cool, x-trans);
-$cert-decorative-color-emphasized: palette(grayscale-cool, mid-light);
+$cert-decorative-color: palette(grayscale, back);
+$cert-decorative-color-de-emphasized: transparentize(palette(grayscale, base), 0.75);
+$cert-decorative-color-emphasized: palette(grayscale, accent);
 
 // typography: config
 @include font-face(

lms/static/certificates/sass/_layouts.scss

@@ -292,7 +292,7 @@
         .wrapper-metadata .metadata {
             @extend %divider-2;
             margin-bottom: spacing-vertical(small);
-            border-bottom-color: palette(grayscale, x-light);
+            border-bottom-color: palette(grayscale, x-back);
             padding-bottom: spacing-vertical(small);
 
             &:last-child {

lms/static/certificates/sass/_print.scss

@@ -30,8 +30,8 @@
     }
 
     %print-black-on-white {
-        background: palette(grayscale, white-t) !important;
-        color: palette(grayscale, black-t) !important;
+        background: $white !important;
+        color: $black !important;
     }
 
     %print-layout-wrapper {
@@ -191,7 +191,7 @@
 
     .accomplishment-rendering {
         top: 0 !important;
-        border: rem(1) solid palette(grayscale, light);
+        border: rem(1) solid palette(grayscale, back);
         border-top: rem(2) solid $cert-base-color;
         box-shadow: none;
         padding: spacing-vertical(small) spacing-horizontal(mid-large);
@@ -207,7 +207,7 @@
         }
 
         .wrapper-statement-and-signatories {
-            border-bottom: rem(2) solid palette(grayscale-cool, x-light);
+            border-bottom: rem(2) solid palette(grayscale, x-back);
         }
 
         .accomplishment-statement {

lms/static/sass/elements/_banners.scss

@@ -10,7 +10,7 @@ $full-width-banner-margin: 20px;
         width: 100%;
         overflow: hidden;
         position: relative;
-        background: palette(grayscale, black-t);
+        background: palette(grayscale, black);
 
         &:before {
             content: '';
@@ -19,7 +19,7 @@ $full-width-banner-margin: 20px;
             right: 0;
             bottom: 0;
             left: 0;
-            background: palette(grayscale, black-t);
+            background: palette(grayscale, black);
             opacity: 0.65;
 
             @include susy-media($bp-screen-md) {

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

@@ -138,7 +138,7 @@
   
   .upgrade-message,
   .certificate-status {
-    border-top: 1px solid palette(grayscale, x-trans);
+    border-top: 1px solid transparentize(palette(grayscale, base), 0.75);
     padding-top: $baseline;
 
     @include susy-media($bp-screen-md) {

lms/static/sass/elements/_icons.scss

@@ -6,7 +6,7 @@
   width: 23px;
   height: 20px;
   padding: 2px;
-  background-color: palette(grayscale, white-t);
+  background-color: $white;
   border-style: solid;
   border-width: 2px;
 }

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

@@ -109,7 +109,7 @@
   }
 
   .hd-3 {
-    color: palette(grayscale, x-dark);
+    color: palette(grayscale, dark);
     min-height: ($baseline*3);
     line-height: 1;
   }
@@ -146,7 +146,7 @@
 
   .progress {
     height: 5px;
-    background: palette(grayscale-cool, x-light);
+    background: palette(grayscale, x-back);
 
     .bar {
       @include float(left);

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

@@ -5,7 +5,7 @@
     @include clearfix();
     @extend %ui-print-excluded;
     box-shadow: 0 -1px 5px 0 $shadow-l1;
-    border-top: 1px solid tint(palette(grayscale, light), 50%);
+    border-top: 1px solid tint(palette(grayscale, back), 50%);
     padding: 25px ($baseline/2) ($baseline*1.5);
     background: $footer-bg;
 

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

@@ -12,8 +12,8 @@
         border: 1px solid $lms-border-color;
         border-top-style: none;
         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);
+        background: transparentize($white, 0.25);
+        color: transparentize(palette(grayscale, dark), 0.25);
         font-weight: bold;
         text-decoration: none;
         padding: 6px 22px 11px;
@@ -21,7 +21,7 @@
 
         &:hover,
         &:focus {
-            color: palette(grayscale, white-t);
+            color: $white;
             background: palette(primary, base);
         }
     }
@@ -35,7 +35,7 @@
         padding: ($baseline*0.75) 0;
         text-align: center;
         cursor: pointer;
-        background: palette(grayscale, white-t);
+        background: $white;
         text-decoration: none;
         display: block;
         border: 1px solid $lms-border-color;
@@ -52,7 +52,7 @@
 
         &:hover,
         &:focus {
-            color: palette(grayscale, white-t);
+            color: $white;
             background: palette(primary, base);
         }
     }

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

@@ -122,7 +122,7 @@
         }
 
         .modal-form-error {
-            background: palette(error, xx-trans);
+            background: transparentize(palette(error, back), 0.95);
             border: 1px solid palette(error, dark);
             color: palette(error, dark);
             display: none;
@@ -155,7 +155,7 @@
 
             .input-group {
                 @include clearfix();
-                border-bottom: 1px solid palette(grayscale, light);
+                border-bottom: 1px solid palette(grayscale, back);
                 box-shadow: 0 1px 0 0 $white-opacity-60;
                 margin-bottom: ($baseline*1.5);
                 padding-bottom: ($baseline/2);
@@ -186,7 +186,7 @@
             }
 
             textarea {
-                background: palette(grayscale, white-t);
+                background: $white;
                 display: block;
                 height: 45px;
                 margin-bottom: $baseline;
@@ -196,7 +196,7 @@
             input[type="email"],
             input[type="text"],
             input[type="password"] {
-                background: palette(grayscale, white-t);
+                background: $white;
                 display: block;
                 height: 45px;
                 margin-bottom: $baseline;

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

 // LMS variables
 
 $lms-gray: palette(grayscale, base);
-$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-background-color: palette(grayscale, x-back);  // Why is the Pattern Library default background different?
+$lms-container-background-color: $white;
+$lms-border-color: palette(grayscale, back);
 $lms-label-color: palette(grayscale, black);
 $lms-active-color: palette(primary, base);
 
@@ -17,5 +17,5 @@ $light-grey-transparent: rgba(200,200,200, 0);
 $light-grey-solid: rgba(200,200,200, 1);
 
 // Icons
-$lms-dark-icon-color: palette(grayscale, white-t);
+$lms-dark-icon-color: $white;
 $lms-dark-icon-background-color: palette(grayscale, black);

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

@@ -16,14 +16,14 @@
 
     .title,
     .subtitle {
-        color: palette(grayscale, white-t);
+        color: $white;
         font-weight: font-weight(semi-bold);
     }
 
     .org-wrapper {
         position: absolute;
         top: 0;
-        background: palette(grayscale, white-t);
+        background: $white;
         opacity: 0.7;
         left: 0;
         padding: 20px;
@@ -54,7 +54,7 @@
         color: palette(grayscale, dark);
 
         &.active {
-            color: palette(grayscale, x-dark);
+            color: palette(grayscale, dark);
         }
     }
 

lms/templates/discussion/_discussion_course_navigation.html

@@ -8,7 +8,7 @@ from django_comment_client.permissions import has_permission
 <%block name="extratabs">
 % if has_permission(user, 'create_thread', course.id):
     <li class="right">
-        <button class="new-post-btn btn-neutral btn-small">${_("Add a Post")}</button>
+        <button class="new-post-btn btn btn-small">${_("Add a Post")}</button>
     </li>
 % endif
 </%block>

lms/templates/discussion/_discussion_inline.html

@@ -11,7 +11,7 @@ from openedx.core.djangolib.js_utils import js_escaped_string
         <span class="show-hide-discussion-icon"></span><span class="button-text">${_("Show Discussion")}</span>
     </a>
     % if can_create_thread:
-        <button class="new-post-btn btn-neutral btn-small">${_("Add a Post")}</button>
+        <button class="new-post-btn btn btn-small">${_("Add a Post")}</button>
     % endif
 </div>
 <script type="text/javascript">

lms/templates/ux/reference/course-skeleton.html

@@ -42,7 +42,7 @@
         </div>
         <div class="page-header-secondary">
             <div class="form-actions">
-                <button class="btn-neutral btn-small">Click Me!</button>
+                <button class="btn btn-small">Click Me!</button>
                 ## TODO: note that this search component markup is provisional
                 ##  - update to use Chris's placeholder recommendation: http://codepen.io/clrux/pen/YqMpRO
                 ##  - update the Pattern Library's markup to match

package.json

@@ -5,7 +5,7 @@
     "backbone": "~1.3.2",
     "backbone-validation": "~0.11.5",
     "coffee-script": "1.6.1",
-    "edx-pattern-library": "0.16.1",
+    "edx-pattern-library": "0.16.3",
     "edx-ui-toolkit": "1.4.1",
     "jquery": "~2.2.0",
     "jquery-migrate": "^1.4.1",