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

Improve green link colour contrast on the marketing pages (#26461)

* Fix visited link colour

* Udpdate green link colors for the marketing pages

* Use the semantic color variables

GitOrigin-RevId: c53240cbd6f3608031d6e98db8203fe7bb414a9b
Rebeka Dekany 1 год назад
Родитель
Сommit
99e580047c

+ 2 - 2
services/web/frontend/stylesheets/bootstrap-5/base/links.scss

@@ -30,10 +30,10 @@ a {
   @include font-mono;
 
   font-weight: 500;
-  color: var(--green-50);
+  color: var(--link-web);
 
   &:hover {
-    color: var(--green-60);
+    color: var(--link-web-hover);
   }
 }
 

+ 5 - 5
services/web/frontend/stylesheets/bootstrap-5/foundations/colors.scss

@@ -90,8 +90,8 @@ $border-disabled: $neutral-20;
 $border-active: $blue-50;
 $border-danger: $red-50;
 $border-divider: $neutral-20;
-$link-web: $green-50;
-$link-web-hover: $green-60;
+$link-web: $green-60;
+$link-web-hover: $green-70;
 $link-web-visited: $green-60;
 $link-ui: $blue-50;
 $link-ui-hover: $blue-60;
@@ -203,9 +203,9 @@ $link-ui-visited-dark: $blue-40;
   --border-danger: var(--red-50);
   --border-divider: var(--neutral-20);
   --border-dark-divider: var(--neutral-70);
-  --link-web: var(--green-50);
-  --link-web-hover: var(--green-60);
-  --link-web-visited: var(--green-50);
+  --link-web: var(--green-60);
+  --link-web-hover: var(--green-70);
+  --link-web-visited: var(--green-60);
   --link-ui: var(--blue-50);
   --link-ui-hover: var(--blue-60);
   --link-ui-visited: var(--blue-60);

+ 2 - 2
services/web/frontend/stylesheets/bootstrap-5/pages/templates-v2.scss

@@ -47,11 +47,11 @@
       text-decoration: none;
 
       &:visited {
-        color: var(--green-50);
+        color: var(--link-web-visited);
       }
 
       &:hover {
-        color: var(--green-60);
+        color: var(--link-web-hover);
       }
 
       &.active {

+ 2 - 2
services/web/frontend/stylesheets/bootstrap-5/pages/website-redesign.scss

@@ -386,7 +386,7 @@
   }
 
   .inline-green-link {
-    color: var(--green-50);
+    color: var(--link-web);
     padding: 0;
     text-decoration: underline;
 
@@ -395,7 +395,7 @@
     text-decoration-skip-ink: none;
 
     &:hover {
-      color: var(--green-60);
+      color: var(--link-web-hover);
     }
 
     // TODO: this is copied directly from the `.less` file, migrate this to scss