Merge pull request #19715 from overleaf/jel-green

[web] Use greens from foundations for new site design

GitOrigin-RevId: a3e79484fd5bd0bdc5cf83a55be5c64d04d0ffa3

services/web/frontend/stylesheets/app/base.less

@@ -194,7 +194,7 @@
       color: var(--emerald-green);
 
       &:hover {
-        color: var(--emerald-green-dark);
+        color: var(--green-60);
       }
       text-decoration: underline;
     }
@@ -210,7 +210,7 @@
         color: var(--emerald-green);
 
         &:hover {
-          color: var(--emerald-green-dark);
+          color: var(--green-60);
         }
 
         text-decoration: underline;

services/web/frontend/stylesheets/app/login-register.less

@@ -170,7 +170,7 @@
       text-decoration-skip-ink: none;
 
       &:hover {
-        color: var(--emerald-green-dark);
+        color: var(--green-60);
       }
 
       // for accessibility with keyboard navigation
@@ -346,7 +346,7 @@
       text-decoration-skip-ink: none;
 
       &:hover {
-        color: var(--emerald-green-dark);
+        color: var(--green-60);
       }
 
       // for accessibility with keyboard navigation
@@ -371,7 +371,7 @@
         text-decoration-skip-ink: none;
 
         &:hover {
-          color: var(--emerald-green-dark);
+          color: var(--green-60);
         }
 
         // for accessibility with keyboard navigation

services/web/frontend/stylesheets/app/website-redesign.less

@@ -775,7 +775,7 @@
     }
 
     .quote-card-link {
-      color: var(--mint-green);
+      color: var(--green-30);
     }
 
     @media (max-width: @screen-sm-max) {
@@ -834,7 +834,7 @@
     }
 
     &.green-bg {
-      background-color: var(--mint-green);
+      background-color: var(--green-30);
     }
   }
 
@@ -956,9 +956,9 @@
     color: var(--emerald-green);
 
     &:hover {
-      color: var(--emerald-green-dark);
+      color: var(--green-60);
       .right-arrow {
-        color: var(--emerald-green-dark);
+        color: var(--green-60);
       }
     }
   }
@@ -971,7 +971,7 @@
     text-decoration-skip-ink: none;
 
     &:hover {
-      color: var(--emerald-green-dark);
+      color: var(--green-60);
     }
 
     // for accessibility with keyboard navigation
@@ -1001,7 +1001,7 @@
       color: var(--white);
 
       &:hover {
-        background: var(--emerald-green-dark);
+        background: var(--green-60);
       }
     }
   }
@@ -1018,7 +1018,7 @@
 
   .green-round-background {
     .round-background;
-    background: var(--mint-green);
+    background: var(--green-30);
   }
 
   .blue-round-background {

services/web/frontend/stylesheets/components/card.less

@@ -103,10 +103,10 @@
     padding: var(--spacing-09);
 
     a:not(.btn) {
-      color: var(--mint-green);
+      color: var(--green-30);
 
       &:hover {
-        color: var(--mint-green);
+        color: var(--green-30);
       }
     }
   }

services/web/frontend/stylesheets/components/navbar.less

@@ -678,7 +678,7 @@
       }
 
       > li.primary > a {
-        .btn-borderless(@white, @emerald-green, @emerald-green-dark);
+        .btn-borderless(@white, @emerald-green, @green-60);
       }
 
       > li.secondary > a {

services/web/frontend/stylesheets/variables/colors.less

@@ -94,12 +94,10 @@
 
 // == Website Redesign ==
 @emerald-green: #098842;
-@emerald-green-dark: #087a3b;
 @ceil: #9597c9;
 @caramel: #f9d38f;
 @dark-jungle-green: #0f271a;
 @malachite: #13c965;
-@mint-green: #80cb9c;
 @sapphire-blue: #4354a3;
 @sapphire-blue-dark: #3c4c93;
 @vivid-tangerine: #f1a695;

services/web/frontend/stylesheets/variables/css-variables.less

@@ -82,8 +82,6 @@
 
   // website-redesign
   --emerald-green: @emerald-green;
-  --emerald-green-dark: @emerald-green-dark;
-  --mint-green: @mint-green;
   --ceil: @ceil;
   --caramel: @caramel;
   --dark-jungle-green: @dark-jungle-green;