From 78ef8db40a8adf1d2dbd1ef98cbfa1eefb5719ab Mon Sep 17 00:00:00 2001 From: Sarah Fischmann Date: Mon, 12 Jun 2017 17:57:42 -0400 Subject: [PATCH] Fixing color contrast issues in Studio AC-727 began changing colors in course content, files and uploads, and when creating a course finished fixing contrast issues on files and uploads page fixed advanced settings and issue with hovering in files and uploads fixed color issues in studio home page and when hovering fixed contrast in updates, pages, textbooks, and group configurations fixed issues when configuring a section of a course in course outline fixed hovering colors to make contrast more visible fixed colors on the green button AC-727 --- cms/static/sass/elements/_controls.scss | 14 +++++++------- cms/static/sass/elements/_forms.scss | 2 +- cms/static/sass/elements/_layout.scss | 2 +- cms/static/sass/elements/_modal-window.scss | 10 +++++----- cms/static/sass/elements/_navigation.scss | 2 +- cms/static/sass/elements/_uploaded-assets.scss | 12 ++++++------ cms/static/sass/partials/_variables.scss | 4 +++- cms/static/sass/views/_assets.scss | 10 +++++----- cms/static/sass/views/_container.scss | 4 ++-- cms/static/sass/views/_dashboard.scss | 2 +- cms/static/sass/views/_group-configuration.scss | 1 + cms/static/sass/views/_index.scss | 4 ++-- cms/static/sass/views/_settings.scss | 2 +- cms/static/sass/views/_static-pages.scss | 3 ++- cms/static/sass/views/_textbooks.scss | 1 + cms/static/sass/views/_updates.scss | 2 +- 16 files changed, 40 insertions(+), 35 deletions(-) diff --git a/cms/static/sass/elements/_controls.scss b/cms/static/sass/elements/_controls.scss index 00f23ae0cd..39277f15d8 100644 --- a/cms/static/sass/elements/_controls.scss +++ b/cms/static/sass/elements/_controls.scss @@ -90,17 +90,17 @@ color: $white; &:hover, &:active { - background: $uxpl-green-hover-active; - border-color: $uxpl-green-hover-active; + background: $uxpl-green-dark-hover-active; + border-color: $uxpl-green-dark-hover-active; } &.current, &.active { - background: $uxpl-green-hover-active; + background: $uxpl-green-dark-hover-active; color: $white; - border-color: $uxpl-green-hover-active; + border-color: $uxpl-green-dark-hover-active; &:hover, &:active { - background: $uxpl-green-hover-active; + background: $uxpl-green-dark-hover-active; } } } @@ -111,7 +111,7 @@ %btn-secondary-gray { @extend %ui-btn-secondary; border-color: $gray-l3; - color: $gray-l1; + color: $gray-d1; &:hover, &:active { background: $gray-l3; @@ -294,7 +294,7 @@ display: block; border-radius: 3px; padding: 3px ($baseline/2); - color: $gray-l1; + color: $gray-d1; &:hover { background-color: $uxpl-blue-base; diff --git a/cms/static/sass/elements/_forms.scss b/cms/static/sass/elements/_forms.scss index 5a95386604..3336412b08 100644 --- a/cms/static/sass/elements/_forms.scss +++ b/cms/static/sass/elements/_forms.scss @@ -276,7 +276,7 @@ form { display: block; margin-top: ($baseline/4); - color: $gray-l3; + color: $gray-d1; } .tip-note { diff --git a/cms/static/sass/elements/_layout.scss b/cms/static/sass/elements/_layout.scss index f0cfdeaf92..d8c8fd0bea 100644 --- a/cms/static/sass/elements/_layout.scss +++ b/cms/static/sass/elements/_layout.scss @@ -107,7 +107,7 @@ display: inline-block; vertical-align: bottom; // correct for extra padding in FF max-width: 250px; - color: $gray; + color: $gray-d2; &.navigation-current { @extend %ui-disabled; diff --git a/cms/static/sass/elements/_modal-window.scss b/cms/static/sass/elements/_modal-window.scss index 95749ec42c..aa01fd92e9 100644 --- a/cms/static/sass/elements/_modal-window.scss +++ b/cms/static/sass/elements/_modal-window.scss @@ -114,7 +114,7 @@ @extend %t-regular; background-image: none; background-color: $white; - color: $mediumGrey; + color: $gray-d1; border-radius: 0; box-shadow: none; border: 0; @@ -122,11 +122,11 @@ text-transform: uppercase; &:hover { background-color: $white; - color: $blue; + color: $uxpl-blue-base; } &.active { - border-bottom: 4px solid $blue-d2; - color: $offBlack; + border-bottom: 4px solid $uxpl-blue-base; + color: $uxpl-blue-base; } } } @@ -191,7 +191,7 @@ } a { - color: $blue; + color: $blue-d2; &:hover { color: $blue-s2; diff --git a/cms/static/sass/elements/_navigation.scss b/cms/static/sass/elements/_navigation.scss index efedbead78..3e436ca0b8 100644 --- a/cms/static/sass/elements/_navigation.scss +++ b/cms/static/sass/elements/_navigation.scss @@ -159,7 +159,7 @@ nav { display: block; &:hover, &:active { - color: $blue-s1; + color: $uxpl-blue-base; } } } diff --git a/cms/static/sass/elements/_uploaded-assets.scss b/cms/static/sass/elements/_uploaded-assets.scss index e8f98443bd..4b057aa45c 100644 --- a/cms/static/sass/elements/_uploaded-assets.scss +++ b/cms/static/sass/elements/_uploaded-assets.scss @@ -42,11 +42,11 @@ padding: 0 ($baseline/2) ($baseline*0.75) ($baseline/2); vertical-align: middle; text-align: left; - color: $gray; + color: $gray-d2; .column-sort-link { cursor: pointer; - color: $blue; + color: $blue-d2; } .current-sort { @@ -111,7 +111,7 @@ .date-col, .embed-col, .embed-col .embeddable-xml-input { - color: $gray; + color: $gray-d1; } } } @@ -141,13 +141,13 @@ .date-col { @include transition(all $tmg-f2 ease-in-out 0s); @extend %t-copy-sub2; - color: $gray-l2; + color: $gray-d1; } .embed-col { @include transition(all $tmg-f2 ease-in-out 0s); padding-left: ($baseline*0.75); - color: $gray-l2; + color: $gray-d1; .embeddable-xml-input { @include transition(all $tmg-f2 ease-in-out 0s); @@ -156,7 +156,7 @@ border: 1px solid transparent; background: none; width: 100%; - color: $gray-l2; + color: $gray-d1; &:focus { background-color: $white; diff --git a/cms/static/sass/partials/_variables.scss b/cms/static/sass/partials/_variables.scss index 0b7c4576c8..92aa640429 100644 --- a/cms/static/sass/partials/_variables.scss +++ b/cms/static/sass/partials/_variables.scss @@ -43,9 +43,11 @@ $transparent: rgba(0,0,0,0) !default; // used when color value is needed for UI // ==================== $uxpl-blue-base: rgb(0, 117, 180) !default; // wcag2a compliant $uxpl-blue-hover-active: rgb(6, 86, 131) !default; // wcag2a compliant +$uxpl-light-blue-base: rgb(242, 248, 251) !default $uxpl-green-base: rgb(0, 129, 0) !default; // wcag2a compliant $uxpl-green-hover-active: rgb(0, 155, 0) !default; // wcag2a compliant +$uxpl-green-dark-hover-active: rgb(0,88,0) !default; $uxpl-pink-base: rgb(194, 56, 125) !default; // wcag2a compliant $uxpl-pink-hover-active: lighten($uxpl-pink-base, 7%) !default; // wcag2a compliant @@ -218,7 +220,7 @@ $color-staff-only: $black !default; $color-gated: $black !default; $color-heading-base: $gray-d2 !default; -$color-copy-base: $gray-l1 !default; +$color-copy-base: $gray-d2 !default; $color-copy-emphasized: $gray-d2 !default; // +Timing diff --git a/cms/static/sass/views/_assets.scss b/cms/static/sass/views/_assets.scss index f0df189d42..ad6b5fb61e 100644 --- a/cms/static/sass/views/_assets.scss +++ b/cms/static/sass/views/_assets.scss @@ -54,7 +54,7 @@ display: inline-block; vertical-align: top; width: flex-grid(9, 12); - color: $gray-l1; + color: $gray-d1; .count-current-shown, .count-total, @@ -130,7 +130,7 @@ margin: 0 ($baseline*0.75); padding: ($baseline/4); text-align: center; - color: $gray; + color: $gray-d1; } .current-page { @@ -143,7 +143,7 @@ @extend %t-title4; @extend %t-regular; vertical-align: middle; - color: $gray-l2; + color: $gray; } @@ -219,7 +219,7 @@ &.nav-dd{ // basic layout - nav items margin: 0 -($baseline/2); - color: $blue; + color: $blue-d2; cursor: pointer; .wrapper-nav-sub { top: 35px; @@ -342,7 +342,7 @@ .type-col { @extend %t-copy-sub2; - color: $gray-l2; + color: $gray-d1; } .date-col { diff --git a/cms/static/sass/views/_container.scss b/cms/static/sass/views/_container.scss index 0a10ecb936..5520d15b9c 100644 --- a/cms/static/sass/views/_container.scss +++ b/cms/static/sass/views/_container.scss @@ -246,7 +246,7 @@ .copy { @extend %t-copy-sub2; - color: $gray; + color: $gray-d2; } .date, @@ -287,7 +287,7 @@ @extend %cont-text-wrap; a { - color: $blue; + color: $uxpl-blue-base; &:hover { color: $orange-d1; diff --git a/cms/static/sass/views/_dashboard.scss b/cms/static/sass/views/_dashboard.scss index 22c52d1cfc..c5c9372fe1 100644 --- a/cms/static/sass/views/_dashboard.scss +++ b/cms/static/sass/views/_dashboard.scss @@ -491,7 +491,7 @@ .course-metadata { @extend %t-copy-sub1; @include transition(opacity $tmg-f1 ease-in-out 0); - color: $gray; + color: $gray-d2; .metadata-item { display: inline-block; diff --git a/cms/static/sass/views/_group-configuration.scss b/cms/static/sass/views/_group-configuration.scss index 61f625d312..7a16c2935a 100644 --- a/cms/static/sass/views/_group-configuration.scss +++ b/cms/static/sass/views/_group-configuration.scss @@ -21,6 +21,7 @@ .no-content { @extend %no-content; + color: $gray-d1; } .wrapper-groups { diff --git a/cms/static/sass/views/_index.scss b/cms/static/sass/views/_index.scss index ee4423dd87..b08261a321 100644 --- a/cms/static/sass/views/_index.scss +++ b/cms/static/sass/views/_index.scss @@ -228,7 +228,7 @@ min-height: ($baseline*8); margin-right: flex-gutter(); padding: ($baseline*0.75) $baseline; - color: $gray-l1; + color: $gray-d1; .title { @extend %t-copy-base; @@ -244,7 +244,7 @@ top: -($baseline/5); .title { - color: $blue; + color: $blue-d2; } } diff --git a/cms/static/sass/views/_settings.scss b/cms/static/sass/views/_settings.scss index 40a1ec1226..603492f717 100644 --- a/cms/static/sass/views/_settings.scss +++ b/cms/static/sass/views/_settings.scss @@ -1078,7 +1078,7 @@ background-color: $pink-l5; .status { - color: $pink-l2; + color: $pink; } } } diff --git a/cms/static/sass/views/_static-pages.scss b/cms/static/sass/views/_static-pages.scss index 05ae72dcbc..a4194913e8 100644 --- a/cms/static/sass/views/_static-pages.scss +++ b/cms/static/sass/views/_static-pages.scss @@ -17,6 +17,7 @@ .add-pages { @extend %no-content; margin: ($baseline*1.5) 0; + color: $gray-d1; } .notice-incontext { @@ -257,7 +258,7 @@ width: auto; height: ($baseline*1.5); border-radius: 3px; - color: $gray-l1; + color: $gray-d1; text-transform: uppercase; &:hover { diff --git a/cms/static/sass/views/_textbooks.scss b/cms/static/sass/views/_textbooks.scss index b8d177d620..b9dee5bede 100644 --- a/cms/static/sass/views/_textbooks.scss +++ b/cms/static/sass/views/_textbooks.scss @@ -12,6 +12,7 @@ .no-textbook-content { @extend %no-content; + color: $gray-d1; } .textbook { diff --git a/cms/static/sass/views/_updates.scss b/cms/static/sass/views/_updates.scss index 8124e4aa20..6357b87e0a 100644 --- a/cms/static/sass/views/_updates.scss +++ b/cms/static/sass/views/_updates.scss @@ -182,7 +182,7 @@ margin: 0; @include border-radius(0, 3px, 3px, 0); @include border-left(none); - background: $lightGrey; + background: $uxpl-light-blue-base; .title { @extend %t-title4;