From edfd0d6aa0af59701d4af0e76db655b0d08058c2 Mon Sep 17 00:00:00 2001 From: Chris Rodriguez Date: Fri, 29 Jul 2016 14:24:36 -0400 Subject: [PATCH] AC-549 updating pink --- cms/static/sass/_base-v2.scss | 4 ++-- cms/static/sass/_base.scss | 4 ++-- cms/static/sass/elements-v2/_sock.scss | 4 ++-- cms/static/sass/elements/_footer.scss | 2 +- cms/static/sass/elements/_system-help.scss | 2 +- cms/static/sass/partials/_variables.scss | 13 +++++++++---- cms/static/sass/views/_settings.scss | 4 ++-- .../cms/static/sass/partials/_variables.scss | 13 +++++++++---- .../sass/course/courseware/_courseware.scss | 2 +- .../course/layout/_courseware_header.scss | 1 - .../sass/multicourse/_course_about.scss | 2 +- lms/static/sass/partials/base/_variables.scss | 19 ++++++++++++------- 12 files changed, 42 insertions(+), 28 deletions(-) diff --git a/cms/static/sass/_base-v2.scss b/cms/static/sass/_base-v2.scss index 14a6c676a1..bc2648872c 100644 --- a/cms/static/sass/_base-v2.scss +++ b/cms/static/sass/_base-v2.scss @@ -6,8 +6,8 @@ html { body { min-width: $fg-min-width; - background: $gray-l5; - color: $gray-d2; + background: $uxpl-grayscale-x-back; + color: $gray-d3; } footer.primary{ diff --git a/cms/static/sass/_base.scss b/cms/static/sass/_base.scss index d86b59869b..61a04afedc 100644 --- a/cms/static/sass/_base.scss +++ b/cms/static/sass/_base.scss @@ -28,8 +28,8 @@ html { body { @extend %t-copy-base; min-width: $fg-min-width; - background: $gray-l5; - color: $gray-d2; + background: $uxpl-grayscale-x-back; + color: $gray-d3; } body, input, button { diff --git a/cms/static/sass/elements-v2/_sock.scss b/cms/static/sass/elements-v2/_sock.scss index c34daf795a..97bab90b75 100644 --- a/cms/static/sass/elements-v2/_sock.scss +++ b/cms/static/sass/elements-v2/_sock.scss @@ -27,10 +27,10 @@ .cta-show-sock { @extend %ui-btn-pill; - background: $gray-l5; + background: $uxpl-grayscale-x-back; font-size: font-size(x-small); padding: ($baseline/2) $baseline; - color: $gray; + color: $gray-d3; .icon { @include margin-right($baseline/4); diff --git a/cms/static/sass/elements/_footer.scss b/cms/static/sass/elements/_footer.scss index 76af72920d..c07d3ab8e6 100644 --- a/cms/static/sass/elements/_footer.scss +++ b/cms/static/sass/elements/_footer.scss @@ -14,7 +14,7 @@ min-width: $fg-min-width; width: flex-grid(12); margin: 0 auto; - color: $gray-l1; + color: $gray-d3; .footer-content-primary { @include clearfix(); diff --git a/cms/static/sass/elements/_system-help.scss b/cms/static/sass/elements/_system-help.scss index 5fc64575ca..6d3f04281d 100644 --- a/cms/static/sass/elements/_system-help.scss +++ b/cms/static/sass/elements/_system-help.scss @@ -280,7 +280,7 @@ .nav-item { @extend %wipe-last-child; margin-bottom: ($baseline/4); - border-bottom: 1px dotted $gray-l4; + border-bottom: 1px dotted $gray-l5; padding-bottom: ($baseline/4); } } diff --git a/cms/static/sass/partials/_variables.scss b/cms/static/sass/partials/_variables.scss index 746be35ea1..ceef6c4e1e 100644 --- a/cms/static/sass/partials/_variables.scss +++ b/cms/static/sass/partials/_variables.scss @@ -41,11 +41,16 @@ $transparent: rgba(0,0,0,0); // used when color value is needed for UI width/tra // +Colors - UXPL new pattern library colors // ==================== -$uxpl-blue-base: rgba(0, 116, 180, 1); // wcag2a compliant -$uxpl-blue-hover-active: lighten($uxpl-blue-base, 7%); // wcag2a compliant +$uxpl-blue-base: rgb(0, 117, 180); // wcag2a compliant +$uxpl-blue-hover-active: rgb(41, 145, 195); // wcag2a compliant -$uxpl-green-base: rgba(0, 129, 0, 1); // wcag2a compliant -$uxpl-green-hover-active: lighten($uxpl-green-base, 7%); // wcag2a compliant +$uxpl-green-base: rgb(0, 129, 0); // wcag2a compliant +$uxpl-green-hover-active: rgb(0, 155, 0); // wcag2a compliant + +$uxpl-pink-base: rgb(194, 56, 125); // wcag2a compliant +$uxpl-pink-hover-active: lighten($uxpl-pink-base, 7%); // wcag2a compliant + +$uxpl-grayscale-x-back: rgb(245, 245, 245); // UXPL grayscale, x-back $uxpl-primary-accent: rgb(14, 166, 236); diff --git a/cms/static/sass/views/_settings.scss b/cms/static/sass/views/_settings.scss index fe063fe1f6..40a1ec1226 100644 --- a/cms/static/sass/views/_settings.scss +++ b/cms/static/sass/views/_settings.scss @@ -522,7 +522,7 @@ .current-course-image { margin-bottom: ($baseline/2); padding: ($baseline/2) $baseline; - background: $gray-l5; + background: $gray-l6; text-align: center; .wrapper-course-image { @@ -941,7 +941,7 @@ @extend %t-copy-sub2; display: block; margin-top: ($baseline/2); - color: $gray-l3; + color: $gray-l5; } } diff --git a/common/test/test-theme/cms/static/sass/partials/_variables.scss b/common/test/test-theme/cms/static/sass/partials/_variables.scss index 33769e704a..e51b5a4cd6 100644 --- a/common/test/test-theme/cms/static/sass/partials/_variables.scss +++ b/common/test/test-theme/cms/static/sass/partials/_variables.scss @@ -87,11 +87,16 @@ $blue-t1: rgba($blue, 0.25); $blue-t2: rgba($blue, 0.50); $blue-t3: rgba($blue, 0.75); -$uxpl-blue-base: rgba(0, 116, 180, 1); // wcag2a compliant -$uxpl-blue-hover-active: lighten($uxpl-blue-base, 7%); // wcag2a compliant +$uxpl-blue-base: rgb(0, 117, 180); // wcag2a compliant +$uxpl-blue-hover-active: rgb(41, 145, 195); // wcag2a compliant -$uxpl-green-base: rgba(0, 129, 0, 1); // wcag2a compliant -$uxpl-green-hover-active: lighten($uxpl-green-base, 7%); // wcag2a compliant +$uxpl-green-base: rgb(0, 129, 0); // wcag2a compliant +$uxpl-green-hover-active: rgb(0, 155, 0); // wcag2a compliant + +$uxpl-pink-base: rgb(194, 56, 125); // wcag2a compliant +$uxpl-pink-hover-active: lighten($uxpl-pink-base, 7%); // wcag2a compliant + +$uxpl-grayscale-x-back: rgb(245, 245, 245); // UXPL grayscale, x-back $pink: rgb(183, 37, 103); // #b72567; $pink-l1: tint($pink,20%); diff --git a/lms/static/sass/course/courseware/_courseware.scss b/lms/static/sass/course/courseware/_courseware.scss index 7cf7a43a94..d47c851e6a 100644 --- a/lms/static/sass/course/courseware/_courseware.scss +++ b/lms/static/sass/course/courseware/_courseware.scss @@ -33,7 +33,7 @@ html.video-fullscreen { @include margin-left($baseline/2); padding: ($baseline/4) ($baseline/2); border-radius: ($baseline/4); - background-color: $shadow-l2; + background-color: $light-gray1; text-align: right; text-transform: uppercase; color: $staff-color; diff --git a/lms/static/sass/course/layout/_courseware_header.scss b/lms/static/sass/course/layout/_courseware_header.scss index cd7d02c583..9b4774d032 100644 --- a/lms/static/sass/course/layout/_courseware_header.scss +++ b/lms/static/sass/course/layout/_courseware_header.scss @@ -50,7 +50,6 @@ &.active { border-bottom: 4px solid $uxpl-blue-base; - background-color: transparent; color: $uxpl-blue-base; &:hover, diff --git a/lms/static/sass/multicourse/_course_about.scss b/lms/static/sass/multicourse/_course_about.scss index 4a4b84576d..e052c69758 100644 --- a/lms/static/sass/multicourse/_course_about.scss +++ b/lms/static/sass/multicourse/_course_about.scss @@ -249,7 +249,7 @@ @include float(right); padding: ($baseline/4) ($baseline/2); border-radius: ($baseline/4); - background-color: $shadow-l2; + background-color: $light-gray1; @include text-align(right); text-transform: uppercase; color: $staff-color; diff --git a/lms/static/sass/partials/base/_variables.scss b/lms/static/sass/partials/base/_variables.scss index 35eed076cc..9d4af66acf 100644 --- a/lms/static/sass/partials/base/_variables.scss +++ b/lms/static/sass/partials/base/_variables.scss @@ -159,11 +159,16 @@ $blue-t1: rgba($blue, 0.25); $blue-t2: rgba($blue, 0.50); $blue-t3: rgba($blue, 0.75); -$uxpl-blue-base: rgba(0, 116, 180, 1); // wcag2a compliant -$uxpl-blue-hover-active: lighten($uxpl-blue-base, 7%); // wcag2a compliant +$uxpl-blue-base: rgb(0, 117, 180); // wcag2a compliant +$uxpl-blue-hover-active: rgb(41, 145, 195); // wcag2a compliant -$uxpl-green-base: rgba(0, 129, 0, 1); // wcag2a compliant -$uxpl-green-hover-active: lighten($uxpl-green-base, 7%); // wcag2a compliant +$uxpl-green-base: rgb(0, 129, 0); // wcag2a compliant +$uxpl-green-hover-active: rgb(0, 155, 0); // wcag2a compliant + +$uxpl-pink-base: rgb(194, 56, 125); // wcag2a compliant +$uxpl-pink-hover-active: lighten($uxpl-pink-base, 7%); // wcag2a compliant + +$uxpl-grayscale-x-back: rgb(245, 245, 245); // UXPL grayscale, x-back $orange: rgb(237, 189, 60); $orange-l1: tint($orange,20%); @@ -311,7 +316,7 @@ $audit-color-lvl2: tint($audit-color-lvl1, 33%); $credit-color-base: rgb(244,195,0); // accessible with black text // edx-specific: Studio/Staff actions -$staff-color: $pink; +$staff-color: $uxpl-pink-base; // ---------------------------- @@ -439,7 +444,7 @@ $button-archive-color: rgb(238,238,238) !default; // #eeeeee // larger, random elements $dark-trans-bg: rgba(0, 0, 0, .75); -$body-bg: rgb(250,250,250) !default; +$body-bg: $uxpl-grayscale-x-back !default; $container-bg: $white !default; @@ -495,7 +500,7 @@ $dashboard-course-cover-border: rgb(221, 221, 221) !default; // course elements $content-wrapper-bg: $white !default; -$course-bg-color: #f2f2f2 !default; +$course-bg-color: $uxpl-grayscale-x-back !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;