From 45aa3a8aab2eb671a46426972a7fe888be3f76bc Mon Sep 17 00:00:00 2001 From: maureenlholland Date: Wed, 16 Apr 2025 11:24:26 +0100 Subject: [PATCH 01/12] Reduce base link specificity --- .../sass/protocol/base/elements/_links.scss | 53 ++++++------------- 1 file changed, 17 insertions(+), 36 deletions(-) diff --git a/assets/sass/protocol/base/elements/_links.scss b/assets/sass/protocol/base/elements/_links.scss index d8994881e..b50f1fefe 100644 --- a/assets/sass/protocol/base/elements/_links.scss +++ b/assets/sass/protocol/base/elements/_links.scss @@ -4,61 +4,42 @@ @use '../../includes/lib' as *; -:link { - color: $link-color; +a { + color: var(--link-color); text-decoration: underline; &:hover, &:focus, &:active { - color: $link-color-hover; + color: var(--link-color-hover); text-decoration: none; } &:active { background-color: rgba(0, 0, 0, 0.05); } - - @supports (--css: variables) { - color: var(--link-color); - - &:hover, - &:focus, - &:active { - color: var(--link-color-hover); - } - } } :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); - } - } + --link-color: var(--link-color-visited); + --link-color-hover: var(--link-color-visited-hover); } .mzp-t-dark { - @include light-links; + --link-color: var(--link-color-inverse); + --link-color-hover: var(--link-color-hover-inverse); + --link-color-visited: var(--link-color-visited-inverse); + --link-color-visited-hover:var(--link-color-visited-hover-inverse); +} + +.mzp-t-white-links { + --link-color: $color-white; + --link-color-hover: $color-white; + --link-color-visited: $color-white; + --link-color-visited-hover: $color-white; } .mzp-c-cta-link { - font-family: $button-font-family; + font-family: var(--button-font-family); font-weight: bold; - - @supports (--css: variables) { - font-family: var(--button-font-family); - } } From 78812edc1931278daa10f5f0572655fb66f277da Mon Sep 17 00:00:00 2001 From: maureenlholland Date: Wed, 16 Apr 2025 11:30:31 +0100 Subject: [PATCH 02/12] Remove stateful pseudo-class specificity with :where This keeps all base element styles at a single element level of specificity and ensures any class will overrule the styles --- assets/sass/protocol/base/elements/_links.scss | 14 ++++++-------- 1 file changed, 6 insertions(+), 8 deletions(-) diff --git a/assets/sass/protocol/base/elements/_links.scss b/assets/sass/protocol/base/elements/_links.scss index b50f1fefe..87638107d 100644 --- a/assets/sass/protocol/base/elements/_links.scss +++ b/assets/sass/protocol/base/elements/_links.scss @@ -8,21 +8,19 @@ a { color: var(--link-color); text-decoration: underline; - &:hover, - &:focus, - &:active { + &:where(:hover, :focus, :active) { color: var(--link-color-hover); text-decoration: none; } - &:active { + &:where(:active) { background-color: rgba(0, 0, 0, 0.05); } -} -:visited { - --link-color: var(--link-color-visited); - --link-color-hover: var(--link-color-visited-hover); + &:where(:visited) { + --link-color: var(--link-color-visited); + --link-color-hover: var(--link-color-visited-hover); + } } .mzp-t-dark { From 1dd40e83f191907bbb66f96018ba7f3b0def37f3 Mon Sep 17 00:00:00 2001 From: maureenlholland Date: Wed, 16 Apr 2025 11:51:41 +0100 Subject: [PATCH 03/12] Add comments --- assets/sass/protocol/base/elements/_links.scss | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/assets/sass/protocol/base/elements/_links.scss b/assets/sass/protocol/base/elements/_links.scss index 87638107d..33b672348 100644 --- a/assets/sass/protocol/base/elements/_links.scss +++ b/assets/sass/protocol/base/elements/_links.scss @@ -17,12 +17,15 @@ a { background-color: rgba(0, 0, 0, 0.05); } + // check support and fallback of :where &:where(:visited) { --link-color: var(--link-color-visited); --link-color-hover: var(--link-color-visited-hover); } } +// any descendant link will inherit dark theming (replace light-links mixin) +// this might belong in root file? site-wide dark theme class .mzp-t-dark { --link-color: var(--link-color-inverse); --link-color-hover: var(--link-color-hover-inverse); @@ -30,6 +33,8 @@ a { --link-color-visited-hover:var(--link-color-visited-hover-inverse); } +// any descendant link will inherit white theming (replace white-links mixin) +// link-specific theme class .mzp-t-white-links { --link-color: $color-white; --link-color-hover: $color-white; @@ -37,6 +42,9 @@ a { --link-color-visited-hover: $color-white; } +// this might belong in a different CTA file? +// it's not meant to apply to `a` elements unless they have the class added directly +// the other classes in this file are theme containers that select `a` elements inside them .mzp-c-cta-link { font-family: var(--button-font-family); font-weight: bold; From 459e73dcd4e5b2cef334c738fa3b91808c9778e6 Mon Sep 17 00:00:00 2001 From: maureenlholland Date: Wed, 16 Apr 2025 12:20:18 +0100 Subject: [PATCH 04/12] Fix syntax --- .../sass/protocol/base/elements/_links.scss | 20 +++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/assets/sass/protocol/base/elements/_links.scss b/assets/sass/protocol/base/elements/_links.scss index 33b672348..2b4567566 100644 --- a/assets/sass/protocol/base/elements/_links.scss +++ b/assets/sass/protocol/base/elements/_links.scss @@ -4,6 +4,12 @@ @use '../../includes/lib' as *; +// check support and fallback of :where +a:where(:visited) { + --link-color: var(--link-color-visited); + --link-color-hover: var(--link-color-visited-hover); +} + a { color: var(--link-color); text-decoration: underline; @@ -16,12 +22,6 @@ a { &:where(:active) { background-color: rgba(0, 0, 0, 0.05); } - - // check support and fallback of :where - &:where(:visited) { - --link-color: var(--link-color-visited); - --link-color-hover: var(--link-color-visited-hover); - } } // any descendant link will inherit dark theming (replace light-links mixin) @@ -36,10 +36,10 @@ a { // any descendant link will inherit white theming (replace white-links mixin) // link-specific theme class .mzp-t-white-links { - --link-color: $color-white; - --link-color-hover: $color-white; - --link-color-visited: $color-white; - --link-color-visited-hover: $color-white; + --link-color: #{$color-white}; + --link-color-hover: #{$color-white}; + --link-color-visited: #{$color-white}; + --link-color-visited-hover: #{$color-white}; } // this might belong in a different CTA file? From eacd7dad7e47609d796bad96c20d73826deb216a Mon Sep 17 00:00:00 2001 From: maureenlholland Date: Wed, 16 Apr 2025 12:26:32 +0100 Subject: [PATCH 05/12] Move visited outside base selector, explicitly set rules --- assets/sass/protocol/base/elements/_links.scss | 14 ++++++++------ 1 file changed, 8 insertions(+), 6 deletions(-) diff --git a/assets/sass/protocol/base/elements/_links.scss b/assets/sass/protocol/base/elements/_links.scss index 2b4567566..174ccc7f6 100644 --- a/assets/sass/protocol/base/elements/_links.scss +++ b/assets/sass/protocol/base/elements/_links.scss @@ -4,12 +4,6 @@ @use '../../includes/lib' as *; -// check support and fallback of :where -a:where(:visited) { - --link-color: var(--link-color-visited); - --link-color-hover: var(--link-color-visited-hover); -} - a { color: var(--link-color); text-decoration: underline; @@ -24,6 +18,14 @@ a { } } +a:where(:visited) { + color: var(--link-color-visited); + + &:where(:hover, :focus, :active) { + color: var(--link-color-visited-hover); + } +} + // any descendant link will inherit dark theming (replace light-links mixin) // this might belong in root file? site-wide dark theme class .mzp-t-dark { From 003c1a6733c2ac6d7e98107d0a6ded1156e339bc Mon Sep 17 00:00:00 2001 From: maureenlholland Date: Mon, 28 Apr 2025 14:38:04 +0100 Subject: [PATCH 06/12] Fix visited hover token name --- assets/sass/protocol/includes/themes/_firefox.scss | 2 +- assets/sass/protocol/includes/themes/_mozilla.scss | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/assets/sass/protocol/includes/themes/_firefox.scss b/assets/sass/protocol/includes/themes/_firefox.scss index ae80a8f7a..caaf8358b 100644 --- a/assets/sass/protocol/includes/themes/_firefox.scss +++ b/assets/sass/protocol/includes/themes/_firefox.scss @@ -25,7 +25,7 @@ --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-hover: #{tokens.$color-link-visited-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..dca860ffe 100644 --- a/assets/sass/protocol/includes/themes/_mozilla.scss +++ b/assets/sass/protocol/includes/themes/_mozilla.scss @@ -30,7 +30,7 @@ --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-hover: #{tokens.$color-link-visited-hover}; --link-color-visited-inverse: #{tokens.$color-violet-10}; --link-color-visited: #{tokens.$color-link-visited}; --link-color: #{tokens.$color-link}; From aacae3b029168f88335d959dfaa6401e9197e990 Mon Sep 17 00:00:00 2001 From: maureenlholland Date: Mon, 28 Apr 2025 15:36:23 +0100 Subject: [PATCH 07/12] Remove extra button selector for links styled as buttons --- assets/sass/protocol/components/_button.scss | 15 +++++---------- 1 file changed, 5 insertions(+), 10 deletions(-) diff --git a/assets/sass/protocol/components/_button.scss b/assets/sass/protocol/components/_button.scss index 5272c1b2f..36c1bde3e 100644 --- a/assets/sass/protocol/components/_button.scss +++ b/assets/sass/protocol/components/_button.scss @@ -76,8 +76,7 @@ // * -------------------------------------------------------------------------- */ // Button shape and size -.mzp-c-button, /* stylelint-disable-line no-duplicate-selectors */ -a.mzp-c-button { +.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); @@ -139,8 +138,7 @@ a.mzp-c-button { // Primary /* stylelint-disable-next-line no-duplicate-selectors */ -.mzp-c-button, -a.mzp-c-button { +.mzp-c-button { background-color: $color-black; border: 2px solid $color-black; color: $color-white; @@ -161,8 +159,7 @@ a.mzp-c-button { // Secondary /* stylelint-disable-next-line no-duplicate-selectors */ -.mzp-c-button, -a.mzp-c-button { +.mzp-c-button { &.mzp-t-secondary { background-color: transparent; border-color: $color-black; @@ -184,8 +181,7 @@ a.mzp-c-button { // * -------------------------------------------------------------------------- */ // Product Buttons -.mzp-c-button.mzp-t-product, -a.mzp-c-button.mzp-t-product { +.mzp-c-button.mzp-t-product { background-color: $color-blue-50; border-color: transparent; color: $color-white; @@ -217,8 +213,7 @@ a.mzp-c-button.mzp-t-product { // Neutral Buttons /* stylelint-disable-next-line no-duplicate-selectors */ -.mzp-c-button, -a.mzp-c-button { +.mzp-c-button { &.mzp-t-neutral { background-color: transparent; border-color: $color-marketing-gray-30; From 763299cc65a7bf54357ac01fe32557fe0bf3677d Mon Sep 17 00:00:00 2001 From: maureenlholland Date: Mon, 28 Apr 2025 15:39:51 +0100 Subject: [PATCH 08/12] Unnest button theme selectors --- assets/sass/protocol/components/_button.scss | 88 +++++++++----------- 1 file changed, 41 insertions(+), 47 deletions(-) diff --git a/assets/sass/protocol/components/_button.scss b/assets/sass/protocol/components/_button.scss index 36c1bde3e..184c092f6 100644 --- a/assets/sass/protocol/components/_button.scss +++ b/assets/sass/protocol/components/_button.scss @@ -158,23 +158,20 @@ // * -------------------------------------------------------------------------- */ // Secondary -/* stylelint-disable-next-line no-duplicate-selectors */ -.mzp-c-button { - &.mzp-t-secondary { - background-color: transparent; - border-color: $color-black; - color: $color-black; +.mzp-c-button.mzp-t-secondary { + background-color: transparent; + border-color: $color-black; + color: $color-black; - @include default-states; + @include default-states; - // dark - &.mzp-t-dark { - background-color: transparent; - border-color: $color-white; - color: $color-white; + // dark + &.mzp-t-dark { + background-color: transparent; + border-color: $color-white; + color: $color-white; - @include default-states-dark; - } + @include default-states-dark; } } @@ -212,50 +209,47 @@ // * -------------------------------------------------------------------------- */ // Neutral Buttons -/* stylelint-disable-next-line no-duplicate-selectors */ -.mzp-c-button { - &.mzp-t-neutral { - background-color: transparent; - border-color: $color-marketing-gray-30; +.mzp-c-button.mzp-t-neutral { + background-color: transparent; + border-color: $color-marketing-gray-30; + color: $color-marketing-gray-70; + + &:focus { + border-color: forms.$button-border-color-focus; + } + + &: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; + 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: $color-marketing-gray-20; - border-color: $color-marketing-gray-40; - color: $color-marketing-gray-70; + background-color: rgba($color-white, 0.2); + border-color: rgba($color-white, 0.6); + color: $color-white; } &:active { - 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); + background-color: rgba($color-white, 0.2); + border-color: rgba($color-white, 0.4); 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 9de9e96095760dc59c9d8bd52fb20b70be097345 Mon Sep 17 00:00:00 2001 From: maureenlholland Date: Mon, 28 Apr 2025 15:46:47 +0100 Subject: [PATCH 09/12] Update mixins to use custom property approach, add note to prefer theme classes --- .../sass/protocol/includes/mixins/_utils.scss | 61 ++++--------------- 1 file changed, 12 insertions(+), 49 deletions(-) diff --git a/assets/sass/protocol/includes/mixins/_utils.scss b/assets/sass/protocol/includes/mixins/_utils.scss index 71390bfa1..d7e841007 100644 --- a/assets/sass/protocol/includes/mixins/_utils.scss +++ b/assets/sass/protocol/includes/mixins/_utils.scss @@ -223,61 +223,24 @@ } // Light color links for dark backgrounds. +// Prefer mzp-t-dark class in markup where possible @mixin light-links { - a:link { - 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; - } - - 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); - } - - a:visited { - color: var(--link-color-visited-inverse); - } - - a:hover, - a:focus, - a:active { - color: var(--link-color-hover-inverse); - } - - a:visited:hover, - a:visited:focus, - a:visited:active { - color: var(--link-color-visited-hover-inverse); - } + a { + --link-color: var(--link-color-inverse); + --link-color-hover: var(--link-color-hover-inverse); + --link-color-visited: var(--link-color-visited-inverse); + --link-color-visited-hover:var(--link-color-visited-hover-inverse); } } // White color links for dark backgrounds, when link colors are undesirable. +// Prefer mzp-t-white-links class in markup where possible @mixin white-links { - a:link, - a:visited { - color: tokens.$color-white; - - &:hover, - &:focus, - &:active { - color: tokens.$color-white; - } + a { + --link-color: #{tokens.$color-white}; + --link-color-hover: #{tokens.$color-white}; + --link-color-visited: #{tokens.$color-white}; + --link-color-visited-hover: #{tokens.$color-white}; } } From 631f6136c1eff099dad52c5a4ba8806c21c518ed Mon Sep 17 00:00:00 2001 From: maureenlholland Date: Mon, 28 Apr 2025 16:38:10 +0100 Subject: [PATCH 10/12] Clean comments and fix spacing --- assets/sass/protocol/base/elements/_links.scss | 6 ++---- assets/sass/protocol/components/_button.scss | 2 +- 2 files changed, 3 insertions(+), 5 deletions(-) diff --git a/assets/sass/protocol/base/elements/_links.scss b/assets/sass/protocol/base/elements/_links.scss index 174ccc7f6..9409c20f6 100644 --- a/assets/sass/protocol/base/elements/_links.scss +++ b/assets/sass/protocol/base/elements/_links.scss @@ -32,7 +32,7 @@ a:where(:visited) { --link-color: var(--link-color-inverse); --link-color-hover: var(--link-color-hover-inverse); --link-color-visited: var(--link-color-visited-inverse); - --link-color-visited-hover:var(--link-color-visited-hover-inverse); + --link-color-visited-hover: var(--link-color-visited-hover-inverse); } // any descendant link will inherit white theming (replace white-links mixin) @@ -44,9 +44,7 @@ a:where(:visited) { --link-color-visited-hover: #{$color-white}; } -// this might belong in a different CTA file? -// it's not meant to apply to `a` elements unless they have the class added directly -// the other classes in this file are theme containers that select `a` elements inside them +// apply directly to link .mzp-c-cta-link { font-family: var(--button-font-family); font-weight: bold; diff --git a/assets/sass/protocol/components/_button.scss b/assets/sass/protocol/components/_button.scss index 184c092f6..f89d1bd44 100644 --- a/assets/sass/protocol/components/_button.scss +++ b/assets/sass/protocol/components/_button.scss @@ -76,7 +76,7 @@ // * -------------------------------------------------------------------------- */ // Button shape and size -.mzp-c-button /* stylelint-disable-line no-duplicate-selectors */ { +.mzp-c-button { @include border-box; @include font-size(16px); @include transition(background-color 100ms, box-shadow 100ms, color 100ms); From 97cc65cb10e03189f03c6c805a7adff908006e5f Mon Sep 17 00:00:00 2001 From: maureenlholland Date: Tue, 13 May 2025 11:48:09 +0100 Subject: [PATCH 11/12] Use source order for stateful link styles --- .../sass/protocol/base/elements/_links.scss | 23 +++++++++++-------- 1 file changed, 13 insertions(+), 10 deletions(-) diff --git a/assets/sass/protocol/base/elements/_links.scss b/assets/sass/protocol/base/elements/_links.scss index 9409c20f6..5e7b0eb27 100644 --- a/assets/sass/protocol/base/elements/_links.scss +++ b/assets/sass/protocol/base/elements/_links.scss @@ -4,28 +4,31 @@ @use '../../includes/lib' as *; +// Rely on source order for the stateful style overrides +// 1. Visited +// 2. Hover +// 3. Active +// 4. Focus + + a { color: var(--link-color); text-decoration: underline; - &:where(:hover, :focus, :active) { + &:visited { + color: var(--link-color-visited); + } + + &:hover, &:active, &:focus { color: var(--link-color-hover); text-decoration: none; } - &:where(:active) { + &:active { background-color: rgba(0, 0, 0, 0.05); } } -a:where(:visited) { - color: var(--link-color-visited); - - &:where(:hover, :focus, :active) { - color: var(--link-color-visited-hover); - } -} - // any descendant link will inherit dark theming (replace light-links mixin) // this might belong in root file? site-wide dark theme class .mzp-t-dark { From 17b6cf4bb9dee018051cfc2d8fae958ffaff0b25 Mon Sep 17 00:00:00 2001 From: maureenlholland Date: Tue, 13 May 2025 12:05:28 +0100 Subject: [PATCH 12/12] Demo only: use CSS color function for hover styles --- assets/sass/protocol/base/elements/_links.scss | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/assets/sass/protocol/base/elements/_links.scss b/assets/sass/protocol/base/elements/_links.scss index 5e7b0eb27..4bea8f8a2 100644 --- a/assets/sass/protocol/base/elements/_links.scss +++ b/assets/sass/protocol/base/elements/_links.scss @@ -20,7 +20,8 @@ a { } &:hover, &:active, &:focus { - color: var(--link-color-hover); + /* stylelint-disable-next-line color-function-notation */ + color: var(--link-color-with-state, hsl(from var(--link-color) h s calc(l - 10))); text-decoration: none; } @@ -33,18 +34,17 @@ a { // this might belong in root file? site-wide dark theme class .mzp-t-dark { --link-color: var(--link-color-inverse); - --link-color-hover: var(--link-color-hover-inverse); --link-color-visited: var(--link-color-visited-inverse); - --link-color-visited-hover: var(--link-color-visited-hover-inverse); + /* stylelint-disable-next-line color-function-notation */ + --link-color-with-state: hsl(from var(--link-color-inverse) h s calc(l + 10)); } // any descendant link will inherit white theming (replace white-links mixin) // link-specific theme class .mzp-t-white-links { --link-color: #{$color-white}; - --link-color-hover: #{$color-white}; --link-color-visited: #{$color-white}; - --link-color-visited-hover: #{$color-white}; + --link-color-with-state: #{$color-white}; } // apply directly to link