From 9e81e7053cde4dacf3c777a0c345405b25528d43 Mon Sep 17 00:00:00 2001
From: Stephanie Hobson <shobson@mozilla.com>
Date: Wed, 23 Jul 2025 12:40:50 -0700
Subject: [PATCH 1/6] Remove :hover:visited styles (Fix #1071)

reduce specificity in components
---
 CHANGELOG.md                                  | 25 +++++----
 .../sass/protocol/base/elements/_links.scss   | 36 +++++--------
 .../sass/protocol/components/_breadcrumb.scss |  5 +-
 assets/sass/protocol/components/_button.scss  | 23 ++++-----
 assets/sass/protocol/components/_card.scss    | 30 ++++-------
 assets/sass/protocol/components/_footer.scss  | 12 ++---
 .../sass/protocol/components/_menu-item.scss  | 32 +++++-------
 assets/sass/protocol/components/_menu.scss    |  2 +-
 .../components/_notification-bar.scss         |  4 +-
 .../sass/protocol/includes/_themes-sass.scss  |  6 ---
 .../sass/protocol/includes/mixins/_utils.scss | 51 +++++++------------
 .../protocol/includes/themes/_firefox.scss    |  2 -
 .../protocol/includes/themes/_mozilla.scss    |  2 -
 components/button/button.html                 | 27 ++++++++++
 docs/02-usage/02-framework.md                 |  2 -
 theme/assets/sass/components/_prose.scss      | 24 ++-------
 16 files changed, 120 insertions(+), 163 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index df3210812..b36f1644e 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -11,17 +11,20 @@
 
 ## Migration Tips
 
-* Breadcrumb updates do not require any changes, however if you have local customizations double check them.
-
-* Icons used internally with Protocol components have been updated but any icons used in consumer projects will have to consider the following:
-
-* New and updated icons have intrinsic width of 16x16 instead of 24x24. If you were relying on SVG width and height attributes for sizing, you may need to update by CSS sizing.
-
-* Updated icons are still square but do not have padding around the icon. This is particularly noticeable with menu and arrows. If you were relying on the icon for spacing, you may need to update to re-add that spacing through CSS.
-
-* Icons formerly known as "arrow" are now known as "caret" and there are new icon designs for "arrow" name. You will need to update naming to keep the "caret" design.
-
-* Find and replace `$url-image-arrow-down-` with `$url-image-caret-down-`
+* Breadcrumb updates do not require any changes unless you have local customizations.
+
+* Icon updates
+  * Icons used internally with Protocol components have been updated but any icons used in consumer projects will have to consider the following:
+  * New and updated icons have intrinsic width of 16x16 instead of 24x24. If you were relying on SVG width and height attributes for sizing, you may need to update by CSS sizing.
+  * Updated icons are still square but do not have padding around the icon. This is particularly noticeable with menu and arrows. If you were relying on the icon for spacing, you may need to update to re-add that spacing through CSS.
+  * Icons formerly known as "arrow" are now known as "caret" and there are new icon designs for "arrow" name. You will need to update naming to keep the "caret" design.
+  * Find and replace `$url-image-arrow-down-` with `$url-image-caret-down-`
+
+* Remove `:hover:visited` styles & decrease base link specificity (#1071)
+  * This will decrease the specificity of Protocol's link and button components, hopefully making local overrides easier, no need to change anything you already have in place.
+  * Removal of `:link` pseudo classes in some places will mean that `<a>` elements which do not have a `href` value could now have link styles when previously they would not have. But, like, maybe don't do that?
+  * Removed `:visted` styles for `.mzp-c-button` they should match unvisited styles, if you have `:visited` styles defined check they are still legible without the expected inherited styles.
+  * Removed the text colour change from `:link:focus` styles. Rely on the focus ring for a focus indicator instead.
 
 # 21.1.0
 
diff --git a/assets/sass/protocol/base/elements/_links.scss b/assets/sass/protocol/base/elements/_links.scss
index e350761bf..0fd363814 100644
--- a/assets/sass/protocol/base/elements/_links.scss
+++ b/assets/sass/protocol/base/elements/_links.scss
@@ -4,12 +4,21 @@
 
 @use '../../includes/lib' as *;
 
-:link {
+// Rely on source order for the stateful style overrides
+// 1. Visited
+// 2. Hover
+// 3. Active
+// 4. Focus
+
+a {
     color: $link-color;
     text-decoration: underline;
 
+    &:visited {
+        color: $link-color-visited;
+    }
+
     &:hover,
-    &:focus,
     &:active {
         color: $link-color-hover;
         text-decoration: none;
@@ -22,30 +31,13 @@
     @supports (--css: variables) {
         color: var(--link-color);
 
-        &:hover,
-        &:focus,
-        &:active {
-            color: var(--link-color-hover);
+        &:visited {
+            color: var(--link-color-visited);
         }
-    }
-}
-
-: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);
+            color: var(--link-color-hover);
         }
     }
 }
diff --git a/assets/sass/protocol/components/_breadcrumb.scss b/assets/sass/protocol/components/_breadcrumb.scss
index ccdee6b84..c68363a87 100644
--- a/assets/sass/protocol/components/_breadcrumb.scss
+++ b/assets/sass/protocol/components/_breadcrumb.scss
@@ -39,10 +39,7 @@
         }
 
         a {
-            &:link,
-            &:visited {
-                text-decoration: underline;
-            }
+            text-decoration: underline;
 
             &:hover,
             &:active,
diff --git a/assets/sass/protocol/components/_button.scss b/assets/sass/protocol/components/_button.scss
index f151a670d..6dd01d6da 100644
--- a/assets/sass/protocol/components/_button.scss
+++ b/assets/sass/protocol/components/_button.scss
@@ -72,8 +72,8 @@
 // * -------------------------------------------------------------------------- */
 // Button shape and size
 
-.mzp-c-button, /* stylelint-disable-line no-duplicate-selectors */
-a.mzp-c-button {
+.mzp-c-button,
+a.mzp-c-button { /* stylelint-disable-line no-duplicate-selectors */
     @include border-box;
     @include font-size(16px);
     @include transition(background-color 100ms, box-shadow 100ms, color 100ms);
@@ -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;
@@ -274,16 +272,15 @@ a.mzp-c-button {
     display: block;
     margin-top: forms.$info-v-spacing;
 
-    a:link,
-    a:visited {
+    a {
         color: inherit;
         text-decoration: none;
-    }
 
-    a:hover,
-    a:active,
-    a:focus {
-        text-decoration: underline;
+        &:hover,
+        &:active,
+        &:focus {
+            text-decoration: underline;
+        }
     }
 }
 
diff --git a/assets/sass/protocol/components/_card.scss b/assets/sass/protocol/components/_card.scss
index 3a369a202..9a4193a96 100644
--- a/assets/sass/protocol/components/_card.scss
+++ b/assets/sass/protocol/components/_card.scss
@@ -93,15 +93,11 @@
     .mzp-c-card-block-link {
         border-radius: $border-radius-xs;
         display: block;
+        color: $color-black;
+        text-decoration: none;
 
-        &:link,
-        &:visited {
-            color: $color-black;
-            text-decoration: none;
-
-            .mzp-c-card-cta-text {
-                color: $color-link;
-            }
+        .mzp-c-card-cta-text {
+            color: $color-link;
         }
 
         &:hover,
@@ -147,19 +143,16 @@
     }
 
     .mzp-c-card-block-link {
+        color: $body-text-color-inverse;
+
         &:hover,
         &:active,
         &:focus {
             box-shadow: 0 0 0 4px $color-marketing-gray-80;
         }
 
-        &:link,
-        &:visited {
+        .mzp-c-card-cta-text {
             color: $body-text-color-inverse;
-
-            .mzp-c-card-cta-text {
-                color: $body-text-color-inverse;
-            }
         }
     }
 
@@ -173,13 +166,10 @@
         }
 
         .mzp-c-card-block-link {
-            &:link,
-            &:visited {
-                color: var(--body-text-color-inverse);
+            color: var(--body-text-color-inverse);
 
-                .mzp-c-card-cta-text {
-                    color: var(--body-text-color-inverse);
-                }
+            .mzp-c-card-cta-text {
+                color: var(--body-text-color-inverse);
             }
         }
     }
diff --git a/assets/sass/protocol/components/_footer.scss b/assets/sass/protocol/components/_footer.scss
index fc89a337e..c4e1ff5a9 100644
--- a/assets/sass/protocol/components/_footer.scss
+++ b/assets/sass/protocol/components/_footer.scss
@@ -21,8 +21,7 @@
     margin: 0;
     width: 100%;
 
-    a:link,
-    a:visited {
+    a {
         font-weight: normal;
         text-decoration: underline;
 
@@ -89,8 +88,7 @@
         margin-bottom: 0;
     }
 
-    a:link,
-    a:visited {
+    a {
         text-decoration: none;
 
         &:hover,
@@ -190,8 +188,7 @@
         }
     }
 
-    a:link,
-    a:visited {
+    a {
         font-weight: bold;
     }
 
@@ -234,8 +231,7 @@
     position: relative;
     color: $color-light-gray-50;
 
-    a:link,
-    a:visited {
+    a {
         color: $color-light-gray-50;
 
         &:hover,
diff --git a/assets/sass/protocol/components/_menu-item.scss b/assets/sass/protocol/components/_menu-item.scss
index 4921c8c90..5324bc211 100644
--- a/assets/sass/protocol/components/_menu-item.scss
+++ b/assets/sass/protocol/components/_menu-item.scss
@@ -12,16 +12,8 @@ $icon-size: 24px;
 
     .mzp-c-menu-item-link {
         display: block;
-
-        &:link,
-        &:visited {
-            color: $color-black;
-            text-decoration: none;
-
-            .mzp-c-menu-item-title {
-                border-bottom: 2px solid transparent;
-            }
-        }
+        color: $color-black;
+        text-decoration: none;
 
         &:hover,
         &:active,
@@ -32,6 +24,10 @@ $icon-size: 24px;
                 color: $color-black;
             }
         }
+
+        .mzp-c-menu-item-title {
+            border-bottom: 2px solid transparent;
+        }
     }
 
     .mzp-c-menu-item-head {
@@ -80,19 +76,19 @@ $icon-size: 24px;
             word-wrap: break-word;
         }
 
-        a:link,
-        a:visited {
+        a {
             color: $color-black;
             text-decoration: none;
-        }
 
-        a:hover,
-        a:active,
-        a:focus {
-            color: $color-black;
-            text-decoration: underline;
+            &:hover,
+            &:active,
+            &:focus {
+                color: $color-black;
+                text-decoration: underline;
+            }
         }
 
+
         @media #{$mq-sm} {
             li {
                 @include bidi(((float, left, right),));
diff --git a/assets/sass/protocol/components/_menu.scss b/assets/sass/protocol/components/_menu.scss
index 8a635e34a..2dfb10069 100644
--- a/assets/sass/protocol/components/_menu.scss
+++ b/assets/sass/protocol/components/_menu.scss
@@ -65,7 +65,7 @@
             text-decoration: underline;
         }
 
-        &:link:active {
+        &:active {
             background: none;
         }
     }
diff --git a/assets/sass/protocol/components/_notification-bar.scss b/assets/sass/protocol/components/_notification-bar.scss
index ea84cd3d5..0bfe6c736 100644
--- a/assets/sass/protocol/components/_notification-bar.scss
+++ b/assets/sass/protocol/components/_notification-bar.scss
@@ -29,8 +29,7 @@
         margin: 0 auto;
     }
 
-    a:link,
-    a:visited {
+    a {
         color: inherit;
         display: inline-block;
         font-size: inherit;
@@ -48,6 +47,7 @@
         }
     }
 
+
     &.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
index 806c6b1c0..1ca11c474 100644
--- 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
index 71390bfa1..b35f3ccff 100644
--- a/assets/sass/protocol/includes/mixins/_utils.scss
+++ b/assets/sass/protocol/includes/mixins/_utils.scss
@@ -224,53 +224,40 @@
 
 // Light color links for dark backgrounds.
 @mixin light-links {
-    a:link {
+    a {
         color: themes.$link-color-inverse;
-    }
-
-    a:visited {
-        color: themes.$link-color-visited-inverse;
-    }
 
-    a:hover,
-    a:focus,
-    a:active {
-        color: themes.$link-color-hover-inverse;
-    }
+        &:visited {
+            color: themes.$link-color-visited-inverse;
+        }
 
-    a:visited:hover,
-    a:visited:focus,
-    a:visited:active {
-        color: themes.$link-color-visited-hover-inverse;
+        &:hover,
+        &:focus,
+        &:active {
+            color: themes.$link-color-hover-inverse;
+        }
     }
 
     @supports (--css: variables) {
-        a:link {
+        a {
             color: var(--link-color-inverse);
-        }
 
-        a:visited {
-            color: var(--link-color-visited-inverse);
-        }
-
-        a:hover,
-        a:focus,
-        a:active {
-            color: var(--link-color-hover-inverse);
-        }
+            &:visited {
+                color: var(--link-color-visited-inverse);
+            }
 
-        a:visited:hover,
-        a:visited:focus,
-        a:visited:active {
-            color: var(--link-color-visited-hover-inverse);
+            &:hover,
+            &:focus,
+            &:active {
+                color: var(--link-color-hover-inverse);
+            }
         }
     }
 }
 
 // White color links for dark backgrounds, when link colors are undesirable.
 @mixin white-links {
-    a:link,
-    a:visited {
+    a {
         color: tokens.$color-white;
 
         &:hover,
diff --git a/assets/sass/protocol/includes/themes/_firefox.scss b/assets/sass/protocol/includes/themes/_firefox.scss
index ae80a8f7a..8518440f0 100644
--- 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
index a10947a0a..eb428c70e 100644
--- 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/components/button/button.html b/components/button/button.html
index 5bb67e49a..aa7c8b955 100644
--- a/components/button/button.html
+++ b/components/button/button.html
@@ -9,6 +9,33 @@
 # iconStart     - markup
 # iconEnd       - markup
 #}
+
+<p><a href="https://www.mozilla.org">Visited</a></p>
+<p><a href="https://www.example.com/test">Unvisited</a></p>
+<p><button>button</button></p>
+
+<p><a href="https://www.mozilla.org" class="mzp-c-button">Visited</a></p>
+<p><a href="https://www.example.com/test" class="mzp-c-button">Unvisited</a></p>
+<p><button class="mzp-c-button">button</button></p>
+
+<p><a href="https://www.mozilla.org" class="mzp-c-button mzp-t-product">Visited</a></p>
+<p><a href="https://www.example.com/test" class="mzp-c-button mzp-t-product">Unvisited</a></p>
+<p><button class="mzp-c-button mzp-t-product">button</button></p>
+
+<div style="background-color: #000;">
+
+ <p><a href="https://www.mozilla.org" class="mzp-c-button mzp-t-dark">Visited</a></p>
+<p><a href="https://www.example.com/test" class="mzp-c-button mzp-t-dark">Unvisited</a></p>
+<p><button class="mzp-c-button mzp-t-dark">button</button></p>
+
+<p><a href="https://www.mozilla.org" class="mzp-c-button mzp-t-product mzp-t-secondary mzp-t-dark">Visited</a></p>
+<p><a href="https://www.example.com/test" class="mzp-c-button mzp-t-product mzp-t-secondary mzp-t-dark">Unvisited</a></p>
+<p><button class="mzp-c-button mzp-t-product mzp-t-secondary mzp-t-dark">button</button></p>
+
+
+</div>
+
+
 {%- if link -%}
 <a class="mzp-c-button{% if class %} {{ class }}{% endif %}" href="{{ link }}">
   {%- if iconStart %}
diff --git a/docs/02-usage/02-framework.md b/docs/02-usage/02-framework.md
index 459877987..65843a9cd 100644
--- 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
index d8bb1633a..e6caa0d92 100755
--- 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,

From 18b2d3d24612367c9331e963bb037cfa48f397db Mon Sep 17 00:00:00 2001
From: Stephanie Hobson <shobson@mozilla.com>
Date: Fri, 25 Jul 2025 11:32:52 -0700
Subject: [PATCH 2/6] Solve no-duplicate-selectors warning

---
 assets/sass/protocol/components/_button.scss | 132 +++++++++----------
 1 file changed, 66 insertions(+), 66 deletions(-)

diff --git a/assets/sass/protocol/components/_button.scss b/assets/sass/protocol/components/_button.scss
index 6dd01d6da..1b8d86b3d 100644
--- a/assets/sass/protocol/components/_button.scss
+++ b/assets/sass/protocol/components/_button.scss
@@ -72,8 +72,10 @@
 // * -------------------------------------------------------------------------- */
 // Button shape and size
 
-.mzp-c-button,
-a.mzp-c-button { /* stylelint-disable-line no-duplicate-selectors */
+
+
+.mzp-c-button, /* stylelint-disable-line no-duplicate-selectors */
+a.mzp-c-button {
     @include border-box;
     @include font-size(16px);
     @include transition(background-color 100ms, box-shadow 100ms, color 100ms);
@@ -132,10 +134,12 @@ a.mzp-c-button { /* stylelint-disable-line no-duplicate-selectors */
 }
 
 // * -------------------------------------------------------------------------- */
-// Primary
+// Button colors
 
-.mzp-c-button,
+.mzp-c-button, /* stylelint-disable-line no-duplicate-selectors */
 a.mzp-c-button {
+    // * ---------------------------------------------------------------------- */
+    // Primary
     background-color: $color-black;
     border: 2px solid $color-black;
     color: $color-white;
@@ -150,13 +154,12 @@ a.mzp-c-button {
 
         @include default-states-dark;
     }
-}
 
-// * -------------------------------------------------------------------------- */
-// Secondary
 
-.mzp-c-button, /* stylelint-disable-line no-duplicate-selectors */
-a.mzp-c-button {
+
+    // * ---------------------------------------------------------------------- */
+    // Secondary
+
     &.mzp-t-secondary {
         background-color: transparent;
         border-color: $color-black;
@@ -173,87 +176,84 @@ a.mzp-c-button {
             @include default-states-dark;
         }
     }
-}
-
-// * -------------------------------------------------------------------------- */
-// Product Buttons
-
-.mzp-c-button.mzp-t-product,
-a.mzp-c-button.mzp-t-product {
-    background-color: $color-blue-50;
-    border-color: transparent;
-    color: $color-white;
-
-    @include product-states;
 
-    // dark is the same as light
+    // * ---------------------------------------------------------------------- */
+    // Product
 
-    // secondary
-    &.mzp-t-secondary {
-        background-color: transparent;
-        border-color: $color-blue-50;
-        color: $color-blue-50;
+    &.mzp-t-product {
+        background-color: $color-blue-50;
+        border-color: transparent;
+        color: $color-white;
 
         @include product-states;
 
-        // dark
-        &.mzp-t-dark {
-            background-color: rgba($color-white, 0.3);
-            border-color: transparent;
-            color: $color-white;
+        // dark is the same as light
 
-            @include product-states;
-        }
-    }
-}
+        // secondary
+        &.mzp-t-secondary {
+            background-color: transparent;
+            border-color: $color-blue-50;
+            color: $color-blue-50;
 
-// * -------------------------------------------------------------------------- */
-// Neutral Buttons
+            @include product-states;
 
-.mzp-c-button, /* stylelint-disable-line no-duplicate-selectors */
-a.mzp-c-button {
-    &.mzp-t-neutral {
-        background-color: transparent;
-        border-color: $color-marketing-gray-30;
-        color: $color-marketing-gray-70;
+            // dark
+            &.mzp-t-dark {
+                background-color: rgba($color-white, 0.3);
+                border-color: transparent;
+                color: $color-white;
 
-        &:focus {
-            border-color: forms.$button-border-color-focus;
+                @include product-states;
+            }
         }
 
-        &:hover {
-            background-color: $color-marketing-gray-20;
-            border-color: $color-marketing-gray-40;
-            color: $color-marketing-gray-70;
-        }
 
-        &:active {
-            background-color: $color-marketing-gray-20;
-            border-color: $color-marketing-gray-50;
+        // * -------------------------------------------------------------------------- */
+        // Neutral Buttons
+        &.mzp-t-neutral {
+            background-color: transparent;
+            border-color: $color-marketing-gray-30;
             color: $color-marketing-gray-70;
-        }
-
-        // dark
-        &.mzp-t-dark {
-            background-color: rgba($color-white, 0.1);
-            border-color: rgba($color-white, 0.6);
-            color: $color-white;
 
             &:focus {
                 border-color: forms.$button-border-color-focus;
             }
 
             &:hover {
-                background-color: rgba($color-white, 0.2);
-                border-color: rgba($color-white, 0.6);
-                color: $color-white;
+                background-color: $color-marketing-gray-20;
+                border-color: $color-marketing-gray-40;
+                color: $color-marketing-gray-70;
             }
 
             &:active {
-                background-color: rgba($color-white, 0.2);
-                border-color: rgba($color-white, 0.4);
+                background-color: $color-marketing-gray-20;
+                border-color: $color-marketing-gray-50;
+                color: $color-marketing-gray-70;
+            }
+
+            // dark
+            &.mzp-t-dark {
+                background-color: rgba($color-white, 0.1);
+                border-color: rgba($color-white, 0.6);
                 color: $color-white;
+
+                &:focus {
+                    border-color: forms.$button-border-color-focus;
+                }
+
+                &:hover {
+                    background-color: rgba($color-white, 0.2);
+                    border-color: rgba($color-white, 0.6);
+                    color: $color-white;
+                }
+
+                &:active {
+                    background-color: rgba($color-white, 0.2);
+                    border-color: rgba($color-white, 0.4);
+                    color: $color-white;
+                }
             }
+
         }
     }
 }

From 0a6ffe5dded28c3def21fe0688819b6a390787f6 Mon Sep 17 00:00:00 2001
From: Stephanie Hobson <shobson@mozilla.com>
Date: Mon, 28 Jul 2025 14:01:03 -0700
Subject: [PATCH 3/6] Furthur reduce specificity on :visited

---
 assets/sass/protocol/base/elements/_links.scss   | 4 ++--
 assets/sass/protocol/includes/mixins/_utils.scss | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/assets/sass/protocol/base/elements/_links.scss b/assets/sass/protocol/base/elements/_links.scss
index 0fd363814..509742c1b 100644
--- a/assets/sass/protocol/base/elements/_links.scss
+++ b/assets/sass/protocol/base/elements/_links.scss
@@ -14,7 +14,7 @@ a {
     color: $link-color;
     text-decoration: underline;
 
-    &:visited {
+    &:where(:visited) {
         color: $link-color-visited;
     }
 
@@ -31,7 +31,7 @@ a {
     @supports (--css: variables) {
         color: var(--link-color);
 
-        &:visited {
+        &:where(:visited) {
             color: var(--link-color-visited);
         }
 
diff --git a/assets/sass/protocol/includes/mixins/_utils.scss b/assets/sass/protocol/includes/mixins/_utils.scss
index b35f3ccff..8f180961a 100644
--- a/assets/sass/protocol/includes/mixins/_utils.scss
+++ b/assets/sass/protocol/includes/mixins/_utils.scss
@@ -227,7 +227,7 @@
     a {
         color: themes.$link-color-inverse;
 
-        &:visited {
+        &:where(:visited) {
             color: themes.$link-color-visited-inverse;
         }
 
@@ -242,7 +242,7 @@
         a {
             color: var(--link-color-inverse);
 
-            &:visited {
+            &:where(:visited) {
                 color: var(--link-color-visited-inverse);
             }
 

From 43d5886ec86201fd27f4fa70d3e46a653e2e320a Mon Sep 17 00:00:00 2001
From: Stephanie Hobson <shobson@mozilla.com>
Date: Mon, 28 Jul 2025 14:12:03 -0700
Subject: [PATCH 4/6] remove text colour change on :focus from dark links

---
 CHANGELOG.md                                  |  2 +-
 assets/sass/protocol/components/_button.scss  |  2 --
 .../sass/protocol/includes/mixins/_utils.scss |  3 ---
 components/button/button.html                 | 27 -------------------
 4 files changed, 1 insertion(+), 33 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index b36f1644e..ccd54c8ae 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -24,7 +24,7 @@
   * This will decrease the specificity of Protocol's link and button components, hopefully making local overrides easier, no need to change anything you already have in place.
   * Removal of `:link` pseudo classes in some places will mean that `<a>` elements which do not have a `href` value could now have link styles when previously they would not have. But, like, maybe don't do that?
   * Removed `:visted` styles for `.mzp-c-button` they should match unvisited styles, if you have `:visited` styles defined check they are still legible without the expected inherited styles.
-  * Removed the text colour change from `:link:focus` styles. Rely on the focus ring for a focus indicator instead.
+  * Removed the text colour change from `:focus` styles. Rely on the focus ring for a focus indicator instead.
 
 # 21.1.0
 
diff --git a/assets/sass/protocol/components/_button.scss b/assets/sass/protocol/components/_button.scss
index 1b8d86b3d..a3047363b 100644
--- a/assets/sass/protocol/components/_button.scss
+++ b/assets/sass/protocol/components/_button.scss
@@ -72,8 +72,6 @@
 // * -------------------------------------------------------------------------- */
 // Button shape and size
 
-
-
 .mzp-c-button, /* stylelint-disable-line no-duplicate-selectors */
 a.mzp-c-button {
     @include border-box;
diff --git a/assets/sass/protocol/includes/mixins/_utils.scss b/assets/sass/protocol/includes/mixins/_utils.scss
index 8f180961a..2d654cf26 100644
--- a/assets/sass/protocol/includes/mixins/_utils.scss
+++ b/assets/sass/protocol/includes/mixins/_utils.scss
@@ -232,7 +232,6 @@
         }
 
         &:hover,
-        &:focus,
         &:active {
             color: themes.$link-color-hover-inverse;
         }
@@ -247,7 +246,6 @@
             }
 
             &:hover,
-            &:focus,
             &:active {
                 color: var(--link-color-hover-inverse);
             }
@@ -261,7 +259,6 @@
         color: tokens.$color-white;
 
         &:hover,
-        &:focus,
         &:active {
             color: tokens.$color-white;
         }
diff --git a/components/button/button.html b/components/button/button.html
index aa7c8b955..5bb67e49a 100644
--- a/components/button/button.html
+++ b/components/button/button.html
@@ -9,33 +9,6 @@
 # iconStart     - markup
 # iconEnd       - markup
 #}
-
-<p><a href="https://www.mozilla.org">Visited</a></p>
-<p><a href="https://www.example.com/test">Unvisited</a></p>
-<p><button>button</button></p>
-
-<p><a href="https://www.mozilla.org" class="mzp-c-button">Visited</a></p>
-<p><a href="https://www.example.com/test" class="mzp-c-button">Unvisited</a></p>
-<p><button class="mzp-c-button">button</button></p>
-
-<p><a href="https://www.mozilla.org" class="mzp-c-button mzp-t-product">Visited</a></p>
-<p><a href="https://www.example.com/test" class="mzp-c-button mzp-t-product">Unvisited</a></p>
-<p><button class="mzp-c-button mzp-t-product">button</button></p>
-
-<div style="background-color: #000;">
-
- <p><a href="https://www.mozilla.org" class="mzp-c-button mzp-t-dark">Visited</a></p>
-<p><a href="https://www.example.com/test" class="mzp-c-button mzp-t-dark">Unvisited</a></p>
-<p><button class="mzp-c-button mzp-t-dark">button</button></p>
-
-<p><a href="https://www.mozilla.org" class="mzp-c-button mzp-t-product mzp-t-secondary mzp-t-dark">Visited</a></p>
-<p><a href="https://www.example.com/test" class="mzp-c-button mzp-t-product mzp-t-secondary mzp-t-dark">Unvisited</a></p>
-<p><button class="mzp-c-button mzp-t-product mzp-t-secondary mzp-t-dark">button</button></p>
-
-
-</div>
-
-
 {%- if link -%}
 <a class="mzp-c-button{% if class %} {{ class }}{% endif %}" href="{{ link }}">
   {%- if iconStart %}

From 1ac15442c55bbf4ca8e052277ed3c8383b5406c9 Mon Sep 17 00:00:00 2001
From: Stephanie Hobson <sjhobson@gmail.com>
Date: Mon, 11 Aug 2025 11:55:02 -0700
Subject: [PATCH 5/6] Update CHANGELOG.md

Co-authored-by: maureenlholland <19650432+maureenlholland@users.noreply.github.com>
---
 CHANGELOG.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index ccd54c8ae..8c2d3f908 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -23,7 +23,7 @@
 * Remove `:hover:visited` styles & decrease base link specificity (#1071)
   * This will decrease the specificity of Protocol's link and button components, hopefully making local overrides easier, no need to change anything you already have in place.
   * Removal of `:link` pseudo classes in some places will mean that `<a>` elements which do not have a `href` value could now have link styles when previously they would not have. But, like, maybe don't do that?
-  * Removed `:visted` styles for `.mzp-c-button` they should match unvisited styles, if you have `:visited` styles defined check they are still legible without the expected inherited styles.
+  * Removed `:visited` styles for `.mzp-c-button` they should match unvisited styles, if you have `:visited` styles defined check they are still legible without the expected inherited styles.
   * Removed the text colour change from `:focus` styles. Rely on the focus ring for a focus indicator instead.
 
 # 21.1.0

From 78d8b51736bbccb513b0a6fac4968f89dd4c1797 Mon Sep 17 00:00:00 2001
From: Stephanie Hobson <shobson@mozilla.com>
Date: Mon, 11 Aug 2025 12:27:02 -0700
Subject: [PATCH 6/6] review fixes

---
 assets/sass/protocol/base/elements/_links.scss   | 1 +
 assets/sass/protocol/components/_button.scss     | 6 ++----
 assets/sass/protocol/includes/mixins/_utils.scss | 2 ++
 3 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/assets/sass/protocol/base/elements/_links.scss b/assets/sass/protocol/base/elements/_links.scss
index 509742c1b..9b316b26e 100644
--- a/assets/sass/protocol/base/elements/_links.scss
+++ b/assets/sass/protocol/base/elements/_links.scss
@@ -14,6 +14,7 @@ a {
     color: $link-color;
     text-decoration: underline;
 
+    // where is used to decrease specificity to avoid conflicts with button styles
     &:where(:visited) {
         color: $link-color-visited;
     }
diff --git a/assets/sass/protocol/components/_button.scss b/assets/sass/protocol/components/_button.scss
index a3047363b..3768d4f7d 100644
--- a/assets/sass/protocol/components/_button.scss
+++ b/assets/sass/protocol/components/_button.scss
@@ -72,8 +72,7 @@
 // * -------------------------------------------------------------------------- */
 // Button shape and size
 
-.mzp-c-button, /* stylelint-disable-line no-duplicate-selectors */
-a.mzp-c-button {
+.mzp-c-button {
     @include border-box;
     @include font-size(16px);
     @include transition(background-color 100ms, box-shadow 100ms, color 100ms);
@@ -134,8 +133,7 @@ a.mzp-c-button {
 // * -------------------------------------------------------------------------- */
 // Button colors
 
-.mzp-c-button, /* stylelint-disable-line no-duplicate-selectors */
-a.mzp-c-button {
+.mzp-c-button { /* stylelint-disable-line no-duplicate-selectors */
     // * ---------------------------------------------------------------------- */
     // Primary
     background-color: $color-black;
diff --git a/assets/sass/protocol/includes/mixins/_utils.scss b/assets/sass/protocol/includes/mixins/_utils.scss
index 2d654cf26..26fbb37ee 100644
--- a/assets/sass/protocol/includes/mixins/_utils.scss
+++ b/assets/sass/protocol/includes/mixins/_utils.scss
@@ -227,6 +227,7 @@
     a {
         color: themes.$link-color-inverse;
 
+        // where is used to decrease specificity to avoid conflicts with button styles
         &:where(:visited) {
             color: themes.$link-color-visited-inverse;
         }
@@ -241,6 +242,7 @@
         a {
             color: var(--link-color-inverse);
 
+            // where is used to decrease specificity to avoid conflicts with button styles
             &:where(:visited) {
                 color: var(--link-color-visited-inverse);
             }