Merge pull request #498 from greenpeace/planet-5843

PLANET-5843 Replace some colors to align with the design system
greenpeace · Mar 2, 2021 · c697327 · c697327
2 parents 9b8b7b8 + 247d00a
commit c697327
Show file tree

Hide file tree

Showing 15 changed files with 29 additions and 42 deletions.
diff --git a/admin/css/admin_en.css b/admin/css/admin_en.css
@@ -1,5 +1,5 @@
 .enform-required-field {
-  border-color: #ff3333 !important;
+  border-color: #f75848 !important;
 }
 
 #fields_list_box, #questions_list_box, #optins_list_box {

diff --git a/assets/src/styles/blocks/CarouselHeader_full_width_classic.scss b/assets/src/styles/blocks/CarouselHeader_full_width_classic.scss
@@ -698,7 +698,7 @@ $medium-image-height: 600px;
     }
 
     li {
-      background-color: rgba(0, 0, 0, 0.4);
+      background-color: transparentize($grey-80, 0.4);
       width: 40px;
       height: 3px;
       border-radius: 0;
@@ -713,7 +713,7 @@ $medium-image-height: 600px;
       }
 
       &.active {
-        background: $black;
+        background: $grey-80;
         @include large-and-up {
           background: $white;
         }

diff --git a/assets/src/styles/blocks/Columns.scss b/assets/src/styles/blocks/Columns.scss
@@ -223,7 +223,7 @@
           @include large-and-up {
             position: absolute;
             background-color: $dark-blue;
-            border-color: $spray;
+            border-color: $white;
             border-style: solid;
             border-width: 2px;
             border-radius: 50%;

diff --git a/assets/src/styles/blocks/Covers/CampaignCovers.scss b/assets/src/styles/blocks/Covers/CampaignCovers.scss
@@ -113,7 +113,7 @@
         width: 100%;
         z-index: 2;
         margin-bottom: 18px;
-        text-shadow: 1px 1px $black;
+        text-shadow: 1px 1px $grey-80;
 
         @include medium-and-up {
           margin-bottom: 20px;

diff --git a/assets/src/styles/blocks/Covers/TakeActionBoxoutBottom.scss b/assets/src/styles/blocks/Covers/TakeActionBoxoutBottom.scss
@@ -99,12 +99,9 @@
     }
 
     &:hover,
-    &:focus {
-      background-color: $orange-hover;
-    }
-
+    &:focus,
     &:active {
-      background-color: $orange-active;
+      background-color: $orange-hover;
     }
   }
 
@@ -133,7 +130,7 @@
     }
 
     .cover-card-excerpt {
-      color: #242424;
+      color: $grey;
       line-height: 1.5;
       font-size: 14px;
       display: -webkit-box;

diff --git a/assets/src/styles/blocks/Covers/TakeActionBoxoutScroll.scss b/assets/src/styles/blocks/Covers/TakeActionBoxoutScroll.scss
@@ -189,7 +189,7 @@
       bottom: 320px;
       left: 0;
       font-size: 28px;
-      color: $black;
+      color: $grey-80;
 
       html[dir="rtl"] & {
         right: 0;

diff --git a/assets/src/styles/blocks/Covers/TakeActionCovers.scss b/assets/src/styles/blocks/Covers/TakeActionCovers.scss
@@ -141,7 +141,7 @@
 
   &:hover, &:focus, &:focus-within {
     @include background-before-opacity(linear-gradient(180deg, rgba(51, 51, 51, 0.6), rgba(250, 247, 236, 0.9), rgba(255, 255, 255, 0.8)), 1);
-    box-shadow: 0 0 10px transparentize($black, .5);
+    box-shadow: 0 0 10px transparentize($grey-80, .5);
 
     @include medium-and-up {
       p {
@@ -168,7 +168,7 @@
   }
 
   &--evergreen {
-    @include background-before-opacity($black, .25);
+    @include background-before-opacity($grey-80, .25);
 
     &:hover {
       h2,
@@ -204,7 +204,7 @@
       color: $white;
     }
 
-    text-shadow: 1px 1px 3px $black;
+    text-shadow: 1px 1px 3px $grey-80;
     display: table;
     z-index: 1;
     pointer-events: all;
@@ -231,7 +231,7 @@
       box-shadow: none;
 
       &:hover {
-        box-shadow: 0 0 10px transparentize($black, .5);
+        box-shadow: 0 0 10px transparentize($grey-80, .5);
       }
     }
   }
@@ -245,7 +245,7 @@
   display: inline-block;
   margin-bottom: 8px;
   text-decoration: none;
-  text-shadow: 1.5px 1.5px 1.5px $black;
+  text-shadow: 1.5px 1.5px 1.5px $grey-80;
   font-weight: 800;
   font-family: $roboto;
   pointer-events: all;

diff --git a/assets/src/styles/blocks/ENForm/components/_enform-side-style.scss b/assets/src/styles/blocks/ENForm/components/_enform-side-style.scss
@@ -107,7 +107,7 @@
   }
 
   .title-and-description {
-    color: #1a1a1a;
+    color: $grey-80;
     padding: $n15;
 
     @include large-and-up {

diff --git a/assets/src/styles/blocks/ENForm/components/_enform.scss b/assets/src/styles/blocks/ENForm/components/_enform.scss
@@ -102,16 +102,16 @@
       }
 
       &.is-invalid {
-        border-color: rgba(247, 88, 72, 0.5);
+        border-color: $dark-orange;
         background: $white;
 
         &:focus {
-          border-color: rgba(247, 88, 72, 0.5);
+          border-color: $dark-orange;
         }
       }
 
       + .invalid-feedback {
-        background: rgb(247, 88, 72);
+        background: $dark-orange;
         color: white;
         border-radius: 4px;
         font-size: 12px;
@@ -129,7 +129,7 @@
           height: 0;
           width: 0;
           position: absolute;
-          border-bottom-color: rgb(247, 88, 72);
+          border-bottom-color: $dark-orange;
           border-width: 5px;
           right: auto;
           left: 16px;

diff --git a/assets/src/styles/blocks/SplitTwoColumns.scss b/assets/src/styles/blocks/SplitTwoColumns.scss
@@ -1,5 +1,5 @@
 .split-two-column {
-  background-color: $black;
+  background-color: $grey-80;
   color: $white;
   display: flex;
   position: relative;
@@ -63,7 +63,7 @@
 
   a {
     color: $white;
-    text-shadow: 1px 1px 3px $black;
+    text-shadow: 1px 1px 3px $grey-80;
   }
 
   @include small-and-up {
@@ -97,7 +97,7 @@
 
   &:hover {
     color: $yellow;
-    text-shadow: 1px 1px 3px $black;
+    text-shadow: 1px 1px 3px $grey-80;
   }
 
   @include medium-and-up {
@@ -127,7 +127,7 @@
   @include medium-and-up {
     font-size: $font-size-xs;
     font-weight: 400;
-    text-shadow: 1px 1px 1px $black;
+    text-shadow: 1px 1px 1px $grey-80;
     line-height: 1.6;
     margin-bottom: 18px;
   }

diff --git a/assets/src/styles/blocks/Submenu.scss b/assets/src/styles/blocks/Submenu.scss
@@ -27,7 +27,7 @@ div[data-render="planet4-blocks/submenu"] {
     }
 
     a {
-      color: $menu-blue;
+      color: $grey-80;
     }
 
     ul {
@@ -51,7 +51,7 @@ div[data-render="planet4-blocks/submenu"] {
         @supports (mask-repeat: no-repeat) or (-webkit-mask-repeat: no-repeat) {
           & {
             background-image: none;
-            background-color: $menu-blue;
+            background-color: $grey-80;
             -webkit-mask-image: url("../../public/images/icons/angle-right.svg");
             mask-image: url("../../public/images/icons/angle-right.svg");
             mask-repeat: no-repeat;
@@ -126,7 +126,7 @@ div.page-template > .back-top {
   width: 44px;
   left: calc(85% - 26px);
   bottom: 50px;
-  background-color: #074365;
+  background-color: $dark-blue;
   text-align: center;
   box-shadow: 0 2px 5px rgba(0, 0, 0, .25);
   z-index: 1000;

diff --git a/assets/src/styles/campaigns/components/_campaign_covers.scss b/assets/src/styles/campaigns/components/_campaign_covers.scss
@@ -113,7 +113,7 @@
         width: 100%;
         z-index: 2;
         margin-bottom: 18px;
-        text-shadow: 1px 1px $black;
+        text-shadow: 1px 1px $grey-80;
 
         @include medium-and-up {
           margin-bottom: 20px;

diff --git a/assets/src/styles/campaigns/themes/_theme_antarctic.scss b/assets/src/styles/campaigns/themes/_theme_antarctic.scss
@@ -159,7 +159,7 @@ body.theme-antarctic {
   } // end .split-two-column
 
   .columns-block.block-style-image {
-    @include campaign_columns_style_image($sanctuary, $black, $regular);
+    @include campaign_columns_style_image($sanctuary, black, $regular);
 
     .column-wrap a.btn-primary {
       @extend .btn-primary;

diff --git a/assets/src/styles/editorOverrides.scss b/assets/src/styles/editorOverrides.scss
@@ -189,7 +189,7 @@ input.describe[type=text][data-setting=caption] {
 }
 
 .cmb2_required_field_error {
-  border-color: $red !important;
+  border-color: $dark-orange !important;
 }
 
 .input_error {

diff --git a/classes/class-loader.php b/classes/class-loader.php
@@ -602,21 +602,11 @@ public function set_color_palette() {
 					'slug'  => 'gp-green',
 					'color' => '#66cc00',
 				],
-				[
-					'name'  => __( 'Dark Tiber', 'planet4-blocks-backend' ),
-					'slug'  => 'dark-tiber',
-					'color' => '#052a30',
-				],
 				[
 					'name'  => __( 'X Dark Blue', 'planet4-blocks-backend' ),
 					'slug'  => 'x-dark-blue',
 					'color' => '#042233',
 				],
-				[
-					'name'  => __( 'Spray', 'planet4-blocks-backend' ),
-					'slug'  => 'spray',
-					'color' => '#86eee7',
-				],
 				[
 					'name'  => __( 'Dark Blue', 'planet4-blocks-backend' ),
 					'slug'  => 'dark-blue',