Commit e641c0dc by Chris Committed by GitHub

Merge pull request #13134 from edx/clrux/ac-549

AC-549 updating pink
parents 7ad1a28e edfd0d6a
...@@ -6,8 +6,8 @@ html { ...@@ -6,8 +6,8 @@ html {
body { body {
min-width: $fg-min-width; min-width: $fg-min-width;
background: $gray-l5; background: $uxpl-grayscale-x-back;
color: $gray-d2; color: $gray-d3;
} }
footer.primary{ footer.primary{
......
...@@ -28,8 +28,8 @@ html { ...@@ -28,8 +28,8 @@ html {
body { body {
@extend %t-copy-base; @extend %t-copy-base;
min-width: $fg-min-width; min-width: $fg-min-width;
background: $gray-l5; background: $uxpl-grayscale-x-back;
color: $gray-d2; color: $gray-d3;
} }
body, input, button { body, input, button {
......
...@@ -27,10 +27,10 @@ ...@@ -27,10 +27,10 @@
.cta-show-sock { .cta-show-sock {
@extend %ui-btn-pill; @extend %ui-btn-pill;
background: $gray-l5; background: $uxpl-grayscale-x-back;
font-size: font-size(x-small); font-size: font-size(x-small);
padding: ($baseline/2) $baseline; padding: ($baseline/2) $baseline;
color: $gray; color: $gray-d3;
.icon { .icon {
@include margin-right($baseline/4); @include margin-right($baseline/4);
......
...@@ -14,7 +14,7 @@ ...@@ -14,7 +14,7 @@
min-width: $fg-min-width; min-width: $fg-min-width;
width: flex-grid(12); width: flex-grid(12);
margin: 0 auto; margin: 0 auto;
color: $gray-l1; color: $gray-d3;
.footer-content-primary { .footer-content-primary {
@include clearfix(); @include clearfix();
......
...@@ -280,7 +280,7 @@ ...@@ -280,7 +280,7 @@
.nav-item { .nav-item {
@extend %wipe-last-child; @extend %wipe-last-child;
margin-bottom: ($baseline/4); margin-bottom: ($baseline/4);
border-bottom: 1px dotted $gray-l4; border-bottom: 1px dotted $gray-l5;
padding-bottom: ($baseline/4); padding-bottom: ($baseline/4);
} }
} }
......
...@@ -41,11 +41,16 @@ $transparent: rgba(0,0,0,0); // used when color value is needed for UI width/tra ...@@ -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 // +Colors - UXPL new pattern library colors
// ==================== // ====================
$uxpl-blue-base: rgba(0, 116, 180, 1); // wcag2a compliant $uxpl-blue-base: rgb(0, 117, 180); // wcag2a compliant
$uxpl-blue-hover-active: lighten($uxpl-blue-base, 7%); // wcag2a compliant $uxpl-blue-hover-active: rgb(41, 145, 195); // wcag2a compliant
$uxpl-green-base: rgba(0, 129, 0, 1); // wcag2a compliant $uxpl-green-base: rgb(0, 129, 0); // wcag2a compliant
$uxpl-green-hover-active: lighten($uxpl-green-base, 7%); // 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); $uxpl-primary-accent: rgb(14, 166, 236);
......
...@@ -522,7 +522,7 @@ ...@@ -522,7 +522,7 @@
.current-course-image { .current-course-image {
margin-bottom: ($baseline/2); margin-bottom: ($baseline/2);
padding: ($baseline/2) $baseline; padding: ($baseline/2) $baseline;
background: $gray-l5; background: $gray-l6;
text-align: center; text-align: center;
.wrapper-course-image { .wrapper-course-image {
...@@ -941,7 +941,7 @@ ...@@ -941,7 +941,7 @@
@extend %t-copy-sub2; @extend %t-copy-sub2;
display: block; display: block;
margin-top: ($baseline/2); margin-top: ($baseline/2);
color: $gray-l3; color: $gray-l5;
} }
} }
......
...@@ -87,11 +87,16 @@ $blue-t1: rgba($blue, 0.25); ...@@ -87,11 +87,16 @@ $blue-t1: rgba($blue, 0.25);
$blue-t2: rgba($blue, 0.50); $blue-t2: rgba($blue, 0.50);
$blue-t3: rgba($blue, 0.75); $blue-t3: rgba($blue, 0.75);
$uxpl-blue-base: rgba(0, 116, 180, 1); // wcag2a compliant $uxpl-blue-base: rgb(0, 117, 180); // wcag2a compliant
$uxpl-blue-hover-active: lighten($uxpl-blue-base, 7%); // wcag2a compliant $uxpl-blue-hover-active: rgb(41, 145, 195); // wcag2a compliant
$uxpl-green-base: rgba(0, 129, 0, 1); // wcag2a compliant $uxpl-green-base: rgb(0, 129, 0); // wcag2a compliant
$uxpl-green-hover-active: lighten($uxpl-green-base, 7%); // 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: rgb(183, 37, 103); // #b72567;
$pink-l1: tint($pink,20%); $pink-l1: tint($pink,20%);
......
...@@ -33,7 +33,7 @@ html.video-fullscreen { ...@@ -33,7 +33,7 @@ html.video-fullscreen {
@include margin-left($baseline/2); @include margin-left($baseline/2);
padding: ($baseline/4) ($baseline/2); padding: ($baseline/4) ($baseline/2);
border-radius: ($baseline/4); border-radius: ($baseline/4);
background-color: $shadow-l2; background-color: $light-gray1;
text-align: right; text-align: right;
text-transform: uppercase; text-transform: uppercase;
color: $staff-color; color: $staff-color;
......
...@@ -50,7 +50,6 @@ ...@@ -50,7 +50,6 @@
&.active { &.active {
border-bottom: 4px solid $uxpl-blue-base; border-bottom: 4px solid $uxpl-blue-base;
background-color: transparent;
color: $uxpl-blue-base; color: $uxpl-blue-base;
&:hover, &:hover,
......
...@@ -249,7 +249,7 @@ ...@@ -249,7 +249,7 @@
@include float(right); @include float(right);
padding: ($baseline/4) ($baseline/2); padding: ($baseline/4) ($baseline/2);
border-radius: ($baseline/4); border-radius: ($baseline/4);
background-color: $shadow-l2; background-color: $light-gray1;
@include text-align(right); @include text-align(right);
text-transform: uppercase; text-transform: uppercase;
color: $staff-color; color: $staff-color;
......
...@@ -159,11 +159,16 @@ $blue-t1: rgba($blue, 0.25); ...@@ -159,11 +159,16 @@ $blue-t1: rgba($blue, 0.25);
$blue-t2: rgba($blue, 0.50); $blue-t2: rgba($blue, 0.50);
$blue-t3: rgba($blue, 0.75); $blue-t3: rgba($blue, 0.75);
$uxpl-blue-base: rgba(0, 116, 180, 1); // wcag2a compliant $uxpl-blue-base: rgb(0, 117, 180); // wcag2a compliant
$uxpl-blue-hover-active: lighten($uxpl-blue-base, 7%); // wcag2a compliant $uxpl-blue-hover-active: rgb(41, 145, 195); // wcag2a compliant
$uxpl-green-base: rgba(0, 129, 0, 1); // wcag2a compliant $uxpl-green-base: rgb(0, 129, 0); // wcag2a compliant
$uxpl-green-hover-active: lighten($uxpl-green-base, 7%); // 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: rgb(237, 189, 60);
$orange-l1: tint($orange,20%); $orange-l1: tint($orange,20%);
...@@ -311,7 +316,7 @@ $audit-color-lvl2: tint($audit-color-lvl1, 33%); ...@@ -311,7 +316,7 @@ $audit-color-lvl2: tint($audit-color-lvl1, 33%);
$credit-color-base: rgb(244,195,0); // accessible with black text $credit-color-base: rgb(244,195,0); // accessible with black text
// edx-specific: Studio/Staff actions // 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 ...@@ -439,7 +444,7 @@ $button-archive-color: rgb(238,238,238) !default; // #eeeeee
// larger, random elements // larger, random elements
$dark-trans-bg: rgba(0, 0, 0, .75); $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; $container-bg: $white !default;
...@@ -495,7 +500,7 @@ $dashboard-course-cover-border: rgb(221, 221, 221) !default; ...@@ -495,7 +500,7 @@ $dashboard-course-cover-border: rgb(221, 221, 221) !default;
// course elements // course elements
$content-wrapper-bg: $white !default; $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; $account-content-wrapper-bg: shade($body-bg, 2%) !default;
$course-profile-bg: rgb(245,245,245) !default; $course-profile-bg: rgb(245,245,245) !default;
$course-header-bg: rgba(255,255,255, 0.93) !default; $course-header-bg: rgba(255,255,255, 0.93) !default;
......
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