Skip to content

E
edx-platform
Commit b673ceee by sarahkf Committed by GitHub
Options

Merge pull request #15300 from edx/sarahkf/fix-color-contrast 

fixing color contrast issues in studio
parents d48b237c 78ef8db4
Showing with 40 additions and 35 deletions
cms/static/sass/elements/_controls.scss
...@@ -90,17 +90,17 @@ ...@@ -90,17 +90,17 @@
color: $white; color: $white;
&:hover, &:active { &:hover, &:active {
background: $uxpl-green-hover-active; background: $uxpl-green-dark-hover-active;
border-color: $uxpl-green-hover-active; border-color: $uxpl-green-dark-hover-active;
} }
&.current, &.active { &.current, &.active {
background: $uxpl-green-hover-active; background: $uxpl-green-dark-hover-active;
color: $white; color: $white;
border-color: $uxpl-green-hover-active; border-color: $uxpl-green-dark-hover-active;
&:hover, &:active { &:hover, &:active {
background: $uxpl-green-hover-active; background: $uxpl-green-dark-hover-active;
} }
} }
} }
...@@ -111,7 +111,7 @@ ...@@ -111,7 +111,7 @@
%btn-secondary-gray { %btn-secondary-gray {
@extend %ui-btn-secondary; @extend %ui-btn-secondary;
border-color: $gray-l3; border-color: $gray-l3;
color: $gray-l1; color: $gray-d1;
&:hover, &:active { &:hover, &:active {
background: $gray-l3; background: $gray-l3;
...@@ -294,7 +294,7 @@ ...@@ -294,7 +294,7 @@
display: block; display: block;
border-radius: 3px; border-radius: 3px;
padding: 3px ($baseline/2); padding: 3px ($baseline/2);
color: $gray-l1; color: $gray-d1;
&:hover { &:hover {
background-color: $uxpl-blue-base; background-color: $uxpl-blue-base;
......
cms/static/sass/elements/_forms.scss
...@@ -276,7 +276,7 @@ form { ...@@ -276,7 +276,7 @@ form {
display: block; display: block;
margin-top: ($baseline/4); margin-top: ($baseline/4);
color: $gray-l3; color: $gray-d1;
} }
.tip-note { .tip-note {
......
cms/static/sass/elements/_layout.scss
...@@ -107,7 +107,7 @@ ...@@ -107,7 +107,7 @@
display: inline-block; display: inline-block;
vertical-align: bottom; // correct for extra padding in FF vertical-align: bottom; // correct for extra padding in FF
max-width: 250px; max-width: 250px;
color: $gray; color: $gray-d2;
&.navigation-current { &.navigation-current {
@extend %ui-disabled; @extend %ui-disabled;
......
cms/static/sass/elements/_modal-window.scss
...@@ -114,7 +114,7 @@ ...@@ -114,7 +114,7 @@
@extend %t-regular; @extend %t-regular;
background-image: none; background-image: none;
background-color: $white; background-color: $white;
color: $mediumGrey; color: $gray-d1;
border-radius: 0; border-radius: 0;
box-shadow: none; box-shadow: none;
border: 0; border: 0;
...@@ -122,11 +122,11 @@ ...@@ -122,11 +122,11 @@
text-transform: uppercase; text-transform: uppercase;
&:hover { &:hover {
background-color: $white; background-color: $white;
color: $blue; color: $uxpl-blue-base;
} }
&.active { &.active {
border-bottom: 4px solid $blue-d2; border-bottom: 4px solid $uxpl-blue-base;
color: $offBlack; color: $uxpl-blue-base;
} }
} }
} }
...@@ -191,7 +191,7 @@ ...@@ -191,7 +191,7 @@
} }
a { a {
color: $blue; color: $blue-d2;
&:hover { &:hover {
color: $blue-s2; color: $blue-s2;
......
cms/static/sass/elements/_navigation.scss
...@@ -159,7 +159,7 @@ nav { ...@@ -159,7 +159,7 @@ nav {
display: block; display: block;
&:hover, &:active { &:hover, &:active {
color: $blue-s1; color: $uxpl-blue-base;
} }
} }
} }
......
cms/static/sass/elements/_uploaded-assets.scss
...@@ -42,11 +42,11 @@ ...@@ -42,11 +42,11 @@
padding: 0 ($baseline/2) ($baseline*0.75) ($baseline/2); padding: 0 ($baseline/2) ($baseline*0.75) ($baseline/2);
vertical-align: middle; vertical-align: middle;
text-align: left; text-align: left;
color: $gray; color: $gray-d2;
.column-sort-link { .column-sort-link {
cursor: pointer; cursor: pointer;
color: $blue; color: $blue-d2;
} }
.current-sort { .current-sort {
...@@ -111,7 +111,7 @@ ...@@ -111,7 +111,7 @@
.date-col, .date-col,
.embed-col, .embed-col,
.embed-col .embeddable-xml-input { .embed-col .embeddable-xml-input {
color: $gray; color: $gray-d1;
} }
} }
} }
...@@ -141,13 +141,13 @@ ...@@ -141,13 +141,13 @@
.date-col { .date-col {
@include transition(all $tmg-f2 ease-in-out 0s); @include transition(all $tmg-f2 ease-in-out 0s);
@extend %t-copy-sub2; @extend %t-copy-sub2;
color: $gray-l2; color: $gray-d1;
} }
.embed-col { .embed-col {
@include transition(all $tmg-f2 ease-in-out 0s); @include transition(all $tmg-f2 ease-in-out 0s);
padding-left: ($baseline*0.75); padding-left: ($baseline*0.75);
color: $gray-l2; color: $gray-d1;
.embeddable-xml-input { .embeddable-xml-input {
@include transition(all $tmg-f2 ease-in-out 0s); @include transition(all $tmg-f2 ease-in-out 0s);
...@@ -156,7 +156,7 @@ ...@@ -156,7 +156,7 @@
border: 1px solid transparent; border: 1px solid transparent;
background: none; background: none;
width: 100%; width: 100%;
color: $gray-l2; color: $gray-d1;
&:focus { &:focus {
background-color: $white; background-color: $white;
......
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 ...@@ -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-base: rgb(0, 117, 180) !default; // wcag2a compliant
$uxpl-blue-hover-active: rgb(6, 86, 131) !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-base: rgb(0, 129, 0) !default; // wcag2a compliant
$uxpl-green-hover-active: rgb(0, 155, 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-base: rgb(194, 56, 125) !default; // wcag2a compliant
$uxpl-pink-hover-active: lighten($uxpl-pink-base, 7%) !default; // wcag2a compliant $uxpl-pink-hover-active: lighten($uxpl-pink-base, 7%) !default; // wcag2a compliant
...@@ -218,7 +220,7 @@ $color-staff-only: $black !default; ...@@ -218,7 +220,7 @@ $color-staff-only: $black !default;
$color-gated: $black !default; $color-gated: $black !default;
$color-heading-base: $gray-d2 !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; $color-copy-emphasized: $gray-d2 !default;
// +Timing // +Timing
......
cms/static/sass/views/_assets.scss
...@@ -54,7 +54,7 @@ ...@@ -54,7 +54,7 @@
display: inline-block; display: inline-block;
vertical-align: top; vertical-align: top;
width: flex-grid(9, 12); width: flex-grid(9, 12);
color: $gray-l1; color: $gray-d1;
.count-current-shown, .count-current-shown,
.count-total, .count-total,
...@@ -130,7 +130,7 @@ ...@@ -130,7 +130,7 @@
margin: 0 ($baseline*0.75); margin: 0 ($baseline*0.75);
padding: ($baseline/4); padding: ($baseline/4);
text-align: center; text-align: center;
color: $gray; color: $gray-d1;
} }
.current-page { .current-page {
...@@ -143,7 +143,7 @@ ...@@ -143,7 +143,7 @@
@extend %t-title4; @extend %t-title4;
@extend %t-regular; @extend %t-regular;
vertical-align: middle; vertical-align: middle;
color: $gray-l2; color: $gray;
} }
...@@ -219,7 +219,7 @@ ...@@ -219,7 +219,7 @@
&.nav-dd{ &.nav-dd{
// basic layout - nav items // basic layout - nav items
margin: 0 -($baseline/2); margin: 0 -($baseline/2);
color: $blue; color: $blue-d2;
cursor: pointer; cursor: pointer;
.wrapper-nav-sub { .wrapper-nav-sub {
top: 35px; top: 35px;
...@@ -342,7 +342,7 @@ ...@@ -342,7 +342,7 @@
.type-col { .type-col {
@extend %t-copy-sub2; @extend %t-copy-sub2;
color: $gray-l2; color: $gray-d1;
} }
.date-col { .date-col {
......
cms/static/sass/views/_container.scss
...@@ -246,7 +246,7 @@ ...@@ -246,7 +246,7 @@
.copy { .copy {
@extend %t-copy-sub2; @extend %t-copy-sub2;
color: $gray; color: $gray-d2;
} }
.date, .date,
...@@ -287,7 +287,7 @@ ...@@ -287,7 +287,7 @@
@extend %cont-text-wrap; @extend %cont-text-wrap;
a { a {
color: $blue; color: $uxpl-blue-base;
&:hover { &:hover {
color: $orange-d1; color: $orange-d1;
......
cms/static/sass/views/_dashboard.scss
...@@ -491,7 +491,7 @@ ...@@ -491,7 +491,7 @@
.course-metadata { .course-metadata {
@extend %t-copy-sub1; @extend %t-copy-sub1;
@include transition(opacity $tmg-f1 ease-in-out 0); @include transition(opacity $tmg-f1 ease-in-out 0);
color: $gray; color: $gray-d2;
.metadata-item { .metadata-item {
display: inline-block; display: inline-block;
......
cms/static/sass/views/_group-configuration.scss
...@@ -21,6 +21,7 @@ ...@@ -21,6 +21,7 @@
.no-content { .no-content {
@extend %no-content; @extend %no-content;
color: $gray-d1;
} }
.wrapper-groups { .wrapper-groups {
......
cms/static/sass/views/_index.scss
...@@ -228,7 +228,7 @@ ...@@ -228,7 +228,7 @@
min-height: ($baseline*8); min-height: ($baseline*8);
margin-right: flex-gutter(); margin-right: flex-gutter();
padding: ($baseline*0.75) $baseline; padding: ($baseline*0.75) $baseline;
color: $gray-l1; color: $gray-d1;
.title { .title {
@extend %t-copy-base; @extend %t-copy-base;
...@@ -244,7 +244,7 @@ ...@@ -244,7 +244,7 @@
top: -($baseline/5); top: -($baseline/5);
.title { .title {
color: $blue; color: $blue-d2;
} }
} }
......
cms/static/sass/views/_settings.scss
...@@ -1078,7 +1078,7 @@ ...@@ -1078,7 +1078,7 @@
background-color: $pink-l5; background-color: $pink-l5;
.status { .status {
color: $pink-l2; color: $pink;
} }
} }
} }
......
cms/static/sass/views/_static-pages.scss
...@@ -17,6 +17,7 @@ ...@@ -17,6 +17,7 @@
.add-pages { .add-pages {
@extend %no-content; @extend %no-content;
margin: ($baseline*1.5) 0; margin: ($baseline*1.5) 0;
color: $gray-d1;
} }
.notice-incontext { .notice-incontext {
...@@ -257,7 +258,7 @@ ...@@ -257,7 +258,7 @@
width: auto; width: auto;
height: ($baseline*1.5); height: ($baseline*1.5);
border-radius: 3px; border-radius: 3px;
color: $gray-l1; color: $gray-d1;
text-transform: uppercase; text-transform: uppercase;
&:hover { &:hover {
......
cms/static/sass/views/_textbooks.scss
...@@ -12,6 +12,7 @@ ...@@ -12,6 +12,7 @@
.no-textbook-content { .no-textbook-content {
@extend %no-content; @extend %no-content;
color: $gray-d1;
} }
.textbook { .textbook {
......
cms/static/sass/views/_updates.scss
...@@ -182,7 +182,7 @@ ...@@ -182,7 +182,7 @@
margin: 0; margin: 0;
@include border-radius(0, 3px, 3px, 0); @include border-radius(0, 3px, 3px, 0);
@include border-left(none); @include border-left(none);
background: $lightGrey; background: $uxpl-light-blue-base;
.title { .title {
@extend %t-title4; @extend %t-title4;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment