diff --git a/CHANGELOG.md b/CHANGELOG.md index df3210812..8c2d3f908 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 `` 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 `: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 diff --git a/assets/sass/protocol/base/elements/_links.scss b/assets/sass/protocol/base/elements/_links.scss index e350761bf..9b316b26e 100644 --- a/assets/sass/protocol/base/elements/_links.scss +++ b/assets/sass/protocol/base/elements/_links.scss @@ -4,12 +4,22 @@ @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; + // where is used to decrease specificity to avoid conflicts with button styles + &:where(:visited) { + color: $link-color-visited; + } + &:hover, - &:focus, &:active { color: $link-color-hover; text-decoration: none; @@ -22,30 +32,13 @@ @supports (--css: variables) { color: var(--link-color); - &:hover, - &:focus, - &:active { - color: var(--link-color-hover); + &:where(: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..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); @@ -132,11 +131,11 @@ a.mzp-c-button { } // * -------------------------------------------------------------------------- */ -// Primary +// Button colors -.mzp-c-button, -a.mzp-c-button:link, -a.mzp-c-button:visited { +.mzp-c-button { /* stylelint-disable-line no-duplicate-selectors */ + // * ---------------------------------------------------------------------- */ + // Primary background-color: $color-black; border: 2px solid $color-black; color: $color-white; @@ -151,13 +150,12 @@ a.mzp-c-button:visited { @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; @@ -174,88 +172,84 @@ a.mzp-c-button { @include default-states-dark; } } -} - -// * -------------------------------------------------------------------------- */ -// Product Buttons - -.mzp-c-button.mzp-t-product, -a.mzp-c-button.mzp-t-product:link, -a.mzp-c-button.mzp-t-product:visited { - background-color: $color-blue-50; - border-color: transparent; - color: $color-white; - @include product-states; + // * ---------------------------------------------------------------------- */ + // Product - // dark is the same as light - - // 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; + } } + } } } @@ -274,16 +268,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..26fbb37ee 100644 --- a/assets/sass/protocol/includes/mixins/_utils.scss +++ b/assets/sass/protocol/includes/mixins/_utils.scss @@ -224,57 +224,43 @@ // 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; - } + // where is used to decrease specificity to avoid conflicts with button styles + &:where(:visited) { + color: themes.$link-color-visited-inverse; + } - a:visited:hover, - a:visited:focus, - a:visited:active { - color: themes.$link-color-visited-hover-inverse; + &:hover, + &: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); - } + // where is used to decrease specificity to avoid conflicts with button styles + &:where(:visited) { + color: var(--link-color-visited-inverse); + } - a:visited:hover, - a:visited:focus, - a:visited:active { - color: var(--link-color-visited-hover-inverse); + &:hover, + &: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, - &:focus, &:active { color: tokens.$color-white; } 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/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,