Просмотр исходного кода

[website-redesign] Change all website-redesign CTA button color to our new green: "emerald-green" (#16711)

* Change all website-redesign CTA button color to our new green: "emerald-green"

* Change `inline-green-link` color to `emerald-green`, also change the hover of `green-link` to `emerald-green-dark`

* reuse the `btn-primary` class for website-redesign pages with the new green primary color

GitOrigin-RevId: 63ba76efbb7e7e9d1a99ff9f6b426e94d86bbdf0
M Fahru 2 лет назад
Родитель
Сommit
6f3402e0e8

+ 16 - 3
services/web/frontend/stylesheets/app/website-redesign.less

@@ -757,15 +757,19 @@
     color: var(--emerald-green);
 
     &:hover {
-      color: var(--green-60);
+      color: var(--emerald-green-dark);
       .right-arrow {
-        background: var(--green-60);
+        color: var(--emerald-green-dark);
       }
     }
   }
 
   .inline-green-link {
-    color: var(--green-50);
+    color: var(--emerald-green);
+
+    &:hover {
+      color: var(--emerald-green-dark);
+    }
     text-decoration: underline;
   }
 
@@ -783,6 +787,15 @@
     }
   }
 
+  .btn-primary {
+    background: var(--emerald-green);
+    color: var(--white);
+
+    &:hover {
+      background: var(--emerald-green-dark);
+    }
+  }
+
   .round-background {
     border-radius: 50%;
     font-size: 1.5rem;

+ 1 - 1
services/web/frontend/stylesheets/components/navbar.less

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

+ 1 - 0
services/web/frontend/stylesheets/variables/colors.less

@@ -94,6 +94,7 @@
 
 // == Website Redesign ==
 @emerald-green: #098842;
+@emerald-green-dark: #087a3b;
 @ceil: #9597c9;
 @caramel: #f9d38f;
 @dark-jungle-green: #0f271a;

+ 1 - 0
services/web/frontend/stylesheets/variables/css-variables.less

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