diff --git a/cms/static/sass/programs/_components.scss b/cms/static/sass/programs/_components.scss index b59e018bb9..2c7fd8643c 100644 --- a/cms/static/sass/programs/_components.scss +++ b/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; } } diff --git a/cms/static/sass/programs/_modals.scss b/cms/static/sass/programs/_modals.scss index 890e609dcc..9bb12eca0d 100644 --- a/cms/static/sass/programs/_modals.scss +++ b/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) } } } diff --git a/lms/djangoapps/teams/static/teams/templates/team-profile.underscore b/lms/djangoapps/teams/static/teams/templates/team-profile.underscore index 9f8956de00..ee01306134 100644 --- a/lms/djangoapps/teams/static/teams/templates/team-profile.underscore +++ b/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) { %> - <% } %> diff --git a/lms/static/certificates/sass/_base.scss b/lms/static/certificates/sass/_base.scss index e7349890e2..249a8ae259 100644 --- a/lms/static/certificates/sass/_base.scss +++ b/lms/static/certificates/sass/_base.scss @@ -14,7 +14,7 @@ html, body { height: 100%; margin: 0; padding: 0; - background: palette(grayscale, white); + background: $white; } // ------------------------------ diff --git a/lms/static/certificates/sass/_components.scss b/lms/static/certificates/sass/_components.scss index de80d4ce50..b6f9817d4c 100644 --- a/lms/static/certificates/sass/_components.scss +++ b/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%; } diff --git a/lms/static/certificates/sass/_config.scss b/lms/static/certificates/sass/_config.scss index 911c68dd9a..1349205bf7 100644 --- a/lms/static/certificates/sass/_config.scss +++ b/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( diff --git a/lms/static/certificates/sass/_layouts.scss b/lms/static/certificates/sass/_layouts.scss index 4d6d8aac71..087458230e 100644 --- a/lms/static/certificates/sass/_layouts.scss +++ b/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 { diff --git a/lms/static/certificates/sass/_print.scss b/lms/static/certificates/sass/_print.scss index 5a1707a93f..851cec3d38 100644 --- a/lms/static/certificates/sass/_print.scss +++ b/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 { diff --git a/lms/static/sass/elements/_banners.scss b/lms/static/sass/elements/_banners.scss index 96242240d0..809606a0ef 100644 --- a/lms/static/sass/elements/_banners.scss +++ b/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) { diff --git a/lms/static/sass/elements/_course-card.scss b/lms/static/sass/elements/_course-card.scss index dd2e85167d..81280a85fc 100644 --- a/lms/static/sass/elements/_course-card.scss +++ b/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) { diff --git a/lms/static/sass/elements/_icons.scss b/lms/static/sass/elements/_icons.scss index 4a2a7f5ee0..9e3edefdbb 100644 --- a/lms/static/sass/elements/_icons.scss +++ b/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; } diff --git a/lms/static/sass/elements/_program-card.scss b/lms/static/sass/elements/_program-card.scss index 177dc9b1d4..d21e8e3da9 100644 --- a/lms/static/sass/elements/_program-card.scss +++ b/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); diff --git a/lms/static/sass/shared-v2/_footer.scss b/lms/static/sass/shared-v2/_footer.scss index c5ffddc311..2327c81ece 100644 --- a/lms/static/sass/shared-v2/_footer.scss +++ b/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; diff --git a/lms/static/sass/shared-v2/_help-tab.scss b/lms/static/sass/shared-v2/_help-tab.scss index 2bebe1fb1e..f36e0fbf1e 100644 --- a/lms/static/sass/shared-v2/_help-tab.scss +++ b/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); } } diff --git a/lms/static/sass/shared-v2/_modal.scss b/lms/static/sass/shared-v2/_modal.scss index d11f9fa35b..b65d71db27 100644 --- a/lms/static/sass/shared-v2/_modal.scss +++ b/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; diff --git a/lms/static/sass/shared-v2/_variables.scss b/lms/static/sass/shared-v2/_variables.scss index bc473d1a98..670a21ca71 100644 --- a/lms/static/sass/shared-v2/_variables.scss +++ b/lms/static/sass/shared-v2/_variables.scss @@ -1,9 +1,9 @@ // 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); diff --git a/lms/static/sass/views/_program-details.scss b/lms/static/sass/views/_program-details.scss index 355d3f6679..49dad91347 100644 --- a/lms/static/sass/views/_program-details.scss +++ b/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); } } diff --git a/lms/templates/discussion/_discussion_course_navigation.html b/lms/templates/discussion/_discussion_course_navigation.html index 1cc1a98655..94faa3c4ba 100644 --- a/lms/templates/discussion/_discussion_course_navigation.html +++ b/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):
  • - +
    • % endif diff --git a/lms/templates/discussion/_discussion_inline.html b/lms/templates/discussion/_discussion_inline.html index 95eba3477b..bd17014839 100644 --- a/lms/templates/discussion/_discussion_inline.html +++ b/lms/templates/discussion/_discussion_inline.html @@ -11,7 +11,7 @@ from openedx.core.djangolib.js_utils import js_escaped_string ${_("Show Discussion")} % if can_create_thread: - + % endif