Remove :hover:visited styles (Fix #1071)

stephaniehobson · stephaniehobson · commit 35fa5bf7d94e · 2025-07-23T16:07:31.000-07:00
diff --git a/assets/sass/protocol/base/elements/_links.scss b/assets/sass/protocol/base/elements/_links.scss
@@ -8,6 +8,10 @@
     color: $link-color;
     text-decoration: underline;
 
+    :visited {
+        color: $link-color-visited;
+    }
+
     &:hover,
     &:focus,
     &:active {
@@ -30,26 +34,6 @@
     }
 }
 
-:visited {
-    color: $link-color-visited;
-
-    &:hover,
-    &:focus,
-    &:active {
-        color: $link-color-visited-hover;
-    }
-
-    @supports (--css: variables) {
-        color: var(--link-color-visited);
-
-        &:hover,
-        &:focus,
-        &:active {
-            color: var(--link-color-visited-hover);
-        }
-    }
-}
-
 .mzp-t-dark {
     @include light-links;
 }
diff --git a/assets/sass/protocol/components/_button.scss b/assets/sass/protocol/components/_button.scss
@@ -135,8 +135,7 @@ a.mzp-c-button {
 // Primary
 
 .mzp-c-button,
-a.mzp-c-button:link,
-a.mzp-c-button:visited {
+a.mzp-c-button {
     background-color: $color-black;
     border: 2px solid $color-black;
     color: $color-white;
@@ -180,8 +179,7 @@ a.mzp-c-button {
 // Product Buttons
 
 .mzp-c-button.mzp-t-product,
-a.mzp-c-button.mzp-t-product:link,
-a.mzp-c-button.mzp-t-product:visited {
+a.mzp-c-button.mzp-t-product {
     background-color: $color-blue-50;
     border-color: transparent;
     color: $color-white;
diff --git a/assets/sass/protocol/components/_footer.scss b/assets/sass/protocol/components/_footer.scss
@@ -25,12 +25,12 @@
     a:visited {
         font-weight: normal;
         text-decoration: underline;
+    }
 
-        &:hover,
-        &:focus,
-        &:active {
-            text-decoration: none;
-        }
+    a:hover,
+    a:focus,
+    a:active {
+        text-decoration: none;
     }
 }
 
diff --git a/assets/sass/protocol/components/_notification-bar.scss b/assets/sass/protocol/components/_notification-bar.scss
@@ -36,18 +36,18 @@
         font-size: inherit;
         font-weight: 700;
 
-        &:hover,
-        &:active,
-        &:focus {
-            color: inherit;
-            text-decoration: none;
-        }
-
         &.mzp-c-notification-bar-cta {
             margin: 0 $spacing-sm;
         }
     }
 
+    a:hover,
+    a:active,
+    a:focus {
+        color: inherit;
+        text-decoration: none;
+    }
+
     &.mzp-is-sticky {
         left: $spacing-md;
         margin: $spacing-md 0;
diff --git a/assets/sass/protocol/includes/_themes-sass.scss b/assets/sass/protocol/includes/_themes-sass.scss
@@ -43,8 +43,6 @@ $body-text-color: tokens.$color-black;
 $link-color-hover-inverse: tokens.$color-blue-05;
 $link-color-hover: tokens.$color-link-hover;
 $link-color-inverse: tokens.$color-blue-10;
-$link-color-visited-hover-inverse: tokens.$color-violet-05;
-$link-color-visited-hover: tokens.$color-link-hover;
 $link-color-visited-inverse: tokens.$color-violet-10;
 $link-color-visited: tokens.$color-link-visited;
 $link-color: tokens.$color-link;
@@ -127,8 +125,6 @@ $theme-colors-firefox: (
     link-color-hover-inverse: tokens.$color-blue-05,
     link-color-hover: tokens.$color-link-hover,
     link-color-inverse: tokens.$color-blue-10,
-    link-color-visited-hover-inverse: tokens.$color-violet-05,
-    link-color-visited-hover: tokens.$color-link-hover,
     link-color-visited-inverse: tokens.$color-violet-10,
     link-color-visited: tokens.$color-link-visited,
     link-color: tokens.$color-link,
@@ -149,8 +145,6 @@ $theme-colors-mozilla: (
     link-color-hover-inverse: tokens.$color-blue-05,
     link-color-hover: tokens.$color-link-hover,
     link-color-inverse: tokens.$color-blue-10,
-    link-color-visited-hover-inverse: tokens.$color-violet-05,
-    link-color-visited-hover: tokens.$color-link-hover,
     link-color-visited-inverse: tokens.$color-violet-10,
     link-color-visited: tokens.$color-link-visited,
     link-color: tokens.$color-link,
diff --git a/assets/sass/protocol/includes/mixins/_utils.scss b/assets/sass/protocol/includes/mixins/_utils.scss
@@ -238,12 +238,6 @@
         color: themes.$link-color-hover-inverse;
     }
 
-    a:visited:hover,
-    a:visited:focus,
-    a:visited:active {
-        color: themes.$link-color-visited-hover-inverse;
-    }
-
     @supports (--css: variables) {
         a:link {
             color: var(--link-color-inverse);
@@ -258,12 +252,6 @@
         a:active {
             color: var(--link-color-hover-inverse);
         }
-
-        a:visited:hover,
-        a:visited:focus,
-        a:visited:active {
-            color: var(--link-color-visited-hover-inverse);
-        }
     }
 }
 
diff --git a/assets/sass/protocol/includes/themes/_firefox.scss b/assets/sass/protocol/includes/themes/_firefox.scss
@@ -24,8 +24,6 @@
     --link-color-hover-inverse: #{tokens.$color-blue-05};
     --link-color-hover: #{tokens.$color-link-hover};
     --link-color-inverse: #{tokens.$color-blue-10};
-    --link-color-visited-hover-inverse: #{tokens.$color-violet-05};
-    --link-color-visited-hover: #{tokens.$color-link-hover};
     --link-color-visited-inverse: #{tokens.$color-violet-10};
     --link-color-visited: #{tokens.$color-link-visited};
     --link-color: #{tokens.$color-link};
diff --git a/assets/sass/protocol/includes/themes/_mozilla.scss b/assets/sass/protocol/includes/themes/_mozilla.scss
@@ -29,8 +29,6 @@
     --link-color-hover-inverse: #{tokens.$color-blue-05};
     --link-color-hover: #{tokens.$color-link-hover};
     --link-color-inverse: #{tokens.$color-blue-10};
-    --link-color-visited-hover-inverse: #{tokens.$color-violet-05};
-    --link-color-visited-hover: #{tokens.$color-link-hover};
     --link-color-visited-inverse: #{tokens.$color-violet-10};
     --link-color-visited: #{tokens.$color-link-visited};
     --link-color: #{tokens.$color-link};
diff --git a/docs/02-usage/02-framework.md b/docs/02-usage/02-framework.md
@@ -129,8 +129,6 @@ link-color-hover
 link-color-hover-inverse
 link-color-inverse
 link-color-visited
-link-color-visited-hover
-link-color-visited-hover-inverse
 link-color-visited-inverse
 title-font-family
 title-text-color
diff --git a/theme/assets/sass/components/_prose.scss b/theme/assets/sass/components/_prose.scss
@@ -13,6 +13,10 @@
         color: $link-color;
         text-decoration: underline;
 
+        &:visited {
+            color: $link-color-visited;
+        }
+
         &:hover,
         &:focus,
         &:active {
@@ -35,26 +39,6 @@
         }
     }
 
-    :visited {
-        color: $link-color-visited;
-
-        &:hover,
-        &:focus,
-        &:active {
-            color: $link-color-visited-hover;
-        }
-
-        @supports (--css: variables) {
-            color: var(--link-color-visited);
-
-            &:hover,
-            &:focus,
-            &:active {
-                color: var(--link-color-visited-hover);
-            }
-        }
-    }
-
     h1,
     h2,
     h3,

Original file line number	Diff line number	Diff line change
`@@ -238,12 +238,6 @@`
`238`	`238`	`color: themes.$link-color-hover-inverse;`
`239`	`239`	`}`
`240`	`240`
`241`		`- a:visited:hover,`
`242`		`- a:visited:focus,`
`243`		`- a:visited:active {`
`244`		`- color: themes.$link-color-visited-hover-inverse;`
`245`		`- }`
`246`		`-`
`247`	`241`	`@supports (--css: variables) {`
`248`	`242`	`a:link {`
`249`	`243`	`color: var(--link-color-inverse);`
`@@ -258,12 +252,6 @@`
`258`	`252`	`a:active {`
`259`	`253`	`color: var(--link-color-hover-inverse);`
`260`	`254`	`}`
`261`		`-`
`262`		`- a:visited:hover,`
`263`		`- a:visited:focus,`
`264`		`- a:visited:active {`
`265`		`- color: var(--link-color-visited-hover-inverse);`
`266`		`- }`
`267`	`255`	`}`
`268`	`256`	`}`
`269`	`257`