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;