 }}){kind=icon}
+  }}){kind=icon}
{{page.content|richtext}}
 }}){kind=icon}
+  }}){kind=icon}
{% else %}
 }}){kind=icon}
{% endif %}
diff --git a/bedrock/firefox/templates/firefox/all/lang.html b/bedrock/firefox/templates/firefox/all/lang.html
index ba113a4c829..1af771a096f 100644
--- a/bedrock/firefox/templates/firefox/all/lang.html
+++ b/bedrock/firefox/templates/firefox/all/lang.html
@@ -13,7 +13,7 @@  }}){kind=icon}
{% endif %}
{% elif product and platform %}
-  }}){kind=icon}
+ {{ page.title }}
{{ page.subheading|richtext }}
diff --git a/bedrock/products/templates/products/vpn/cms/resource-center/detail.html b/bedrock/products/templates/products/vpn/cms/resource-center/detail.html index a575c75cf12..5f1f442bbee 100644 --- a/bedrock/products/templates/products/vpn/cms/resource-center/detail.html +++ b/bedrock/products/templates/products/vpn/cms/resource-center/detail.html @@ -27,7 +27,7 @@
-
+
diff --git a/l10n/en/mozorg/home-new.ftl b/l10n/en/mozorg/home-new.ftl
index 534333a8411..866f0163bd9 100644
--- a/l10n/en/mozorg/home-new.ftl
+++ b/l10n/en/mozorg/home-new.ftl
@@ -2,7 +2,7 @@
# License, v. 2.0. If a copy of the MPL was not distributed with this
# file, You can obtain one at https://mozilla.org/MPL/2.0/.
-### URL: https://www-dev.allizom.org/ (Global locales)
+### URL: https://www-dev.allizom.org/?xv=trailhead (Previous homepage version)
home-internet-for-people-not-profit = Internet for people, not profit
home-did-you-know-mozilla-the-maker = Did you know? { -brand-name-mozilla } — the maker of { -brand-name-firefox } — fights to keep the internet a global public resource, open and accessible to all.
diff --git a/l10n/en/mozorg/home.ftl b/l10n/en/mozorg/home.ftl
index ee4ab222330..2f5f7e10ee7 100644
--- a/l10n/en/mozorg/home.ftl
+++ b/l10n/en/mozorg/home.ftl
@@ -2,7 +2,7 @@
# License, v. 2.0. If a copy of the MPL was not distributed with this
# file, You can obtain one at https://mozilla.org/MPL/2.0/.
-### URL: https://www-dev.allizom.org/ ('en-US', 'en-CA', 'en-GB', 'de' and 'fr' excluded)
+### URL: https://www-dev.allizom.org/?xv=quantum (old, old homepage)
home-internet-for-people-not-profit = Internet for people, not profit
home-did-you-know-mozilla-the-maker = Did you know? { -brand-name-mozilla } — the maker of { -brand-name-firefox } — fights to keep the internet a global public resource, open and accessible to all.
diff --git a/media/css/cms/rich-text.scss b/media/css/cms/rich-text.scss
index c27b70f0b0e..6326fbfe6e3 100644
--- a/media/css/cms/rich-text.scss
+++ b/media/css/cms/rich-text.scss
@@ -3,50 +3,10 @@
// file, You can obtain one at https://mozilla.org/MPL/2.0/.
@use '~@mozilla-protocol/core/protocol/css/includes/lib' as *;
+@use '~@mozilla-protocol/core/protocol/css/base/utilities/rich-text';
-.w-rich-text {
- ul {
- @include bidi(((margin-left, $layout-sm, margin-right, 0),));
- list-style: disc;
-
- li {
- margin-bottom: 0.25em;
- }
-
- ul {
- @include bidi(((margin-left, $layout-xs, margin-right, 0),));
- list-style: circle;
- margin-bottom: 0;
- }
-
- ol {
- @include bidi(((margin-left, $layout-xs, margin-right, 0),));
- list-style: decimal;
- margin-bottom: 0;
- }
- }
-
- ol {
- @include bidi(((margin-left, $layout-sm, margin-right, 0),));
- list-style: decimal;
-
- li {
- margin-bottom: 0.25em;
- }
-
- ol {
- @include bidi(((margin-left, $layout-xs, margin-right, 0),));
- list-style: lower-alpha;
- margin-bottom: 0;
- }
-
- ul {
- @include bidi(((margin-left, $layout-xs, margin-right, 0),));
- list-style: disc;
- margin-bottom: 0;
- }
- }
+.mzp-u-rich-text {
.richtext-image {
display: block;
height: auto;
diff --git a/media/css/firefox/whatsnew/whatsnew-133-fakespot.scss b/media/css/firefox/whatsnew/whatsnew-133-fakespot.scss
index fb57d58cc50..bd755f2a7a9 100644
--- a/media/css/firefox/whatsnew/whatsnew-133-fakespot.scss
+++ b/media/css/firefox/whatsnew/whatsnew-133-fakespot.scss
@@ -48,14 +48,14 @@
}
.wnp-main-body {
- color: $color-moz-light-gray;
+ color: $color-moz-gray-light;
.shopping-icon {
background-image: url("/media/img/firefox/whatsnew/whatsnew133/icon-shopping-light.svg");
}
.wnp-body-cta:link {
- color: $color-moz-light-gray;
+ color: $color-moz-gray-light;
}
}
diff --git a/media/css/firefox/whatsnew/whatsnew-nightly.scss b/media/css/firefox/whatsnew/whatsnew-nightly.scss
index 381994d0a13..41b1e6fc531 100644
--- a/media/css/firefox/whatsnew/whatsnew-nightly.scss
+++ b/media/css/firefox/whatsnew/whatsnew-nightly.scss
@@ -50,11 +50,11 @@ body {
a:link,
a:visited {
color: $color-ink-80;
+ }
- &:hover,
- &:focus {
- color: inherit;
- }
+ a:hover,
+ a:focus {
+ color: inherit;
}
abbr {
diff --git a/media/css/foundation/annual-report-2019-2020.scss b/media/css/foundation/annual-report-2019-2020.scss
index 1cabf345b5c..06c68786385 100644
--- a/media/css/foundation/annual-report-2019-2020.scss
+++ b/media/css/foundation/annual-report-2019-2020.scss
@@ -358,15 +358,15 @@
a:link,
a:visited {
color: $color-black;
+ }
- &:hover,
- &:focus,
- &:active {
- color: $link-color-hover;
+ a:hover,
+ a:focus,
+ a:active {
+ color: $link-color-hover;
- @supports (--css: variables) {
- color: var(--link-color-hover);
- }
+ @supports (--css: variables) {
+ color: var(--link-color-hover);
}
}
diff --git a/media/css/foundation/annual-report-2021.scss b/media/css/foundation/annual-report-2021.scss
index c08a2612798..5cdb0068315 100644
--- a/media/css/foundation/annual-report-2021.scss
+++ b/media/css/foundation/annual-report-2021.scss
@@ -171,15 +171,15 @@ main {
a:link,
a:visited {
color: $color-black;
+ }
- &:hover,
- &:focus,
- &:active {
- color: $link-color-hover;
+ a:hover,
+ a:focus,
+ a:active {
+ color: $link-color-hover;
- @supports (--css: variables) {
- color: var(--link-color-hover);
- }
+ @supports (--css: variables) {
+ color: var(--link-color-hover);
}
}
diff --git a/media/css/foundation/m24/article/header.scss b/media/css/foundation/m24/article/header.scss
index a14e843e367..37952fa0a72 100644
--- a/media/css/foundation/m24/article/header.scss
+++ b/media/css/foundation/m24/article/header.scss
@@ -76,7 +76,7 @@
position: relative;
&::before {
- background-image: url('/media/img/icons/m24-small/arrow-left.svg');
+ background-image: url('/media/protocol/img/icons/arrow-left.svg');
background-position: center left;
background-repeat: no-repeat;
background-size: 18px auto;
diff --git a/media/css/foundation/m24/article/related.scss b/media/css/foundation/m24/article/related.scss
index e8437d5d07c..f9b7ee351f2 100644
--- a/media/css/foundation/m24/article/related.scss
+++ b/media/css/foundation/m24/article/related.scss
@@ -14,10 +14,10 @@
font-size: $text-body-md;
&::before {
- background-image: url('/media/img/icons/m24-small/arrow-left.svg');
+ background-image: url('/media/protocol/img/icons/arrow-left.svg');
background-position: center left;
background-repeat: no-repeat;
- background-size: 18px auto;
+ background-size: 16px auto;
bottom: 0;
content: '';
display: block;
diff --git a/media/css/foundation/m24/index/article-gallery.scss b/media/css/foundation/m24/index/article-gallery.scss
index d1b7debec24..879e832f720 100644
--- a/media/css/foundation/m24/index/article-gallery.scss
+++ b/media/css/foundation/m24/index/article-gallery.scss
@@ -89,8 +89,7 @@
&:hover,
&:focus,
- &:active,
- &:visited:hover {
+ &:active {
color: inherit;
text-decoration: underline;
}
diff --git a/media/css/foundation/m24/index/join-us.scss b/media/css/foundation/m24/index/join-us.scss
index d4b608a4d05..a7849a84db3 100644
--- a/media/css/foundation/m24/index/join-us.scss
+++ b/media/css/foundation/m24/index/join-us.scss
@@ -35,7 +35,7 @@
width: 100%;
&::after {
- background-image: url('/media/img/icons/m24-small/arrow-right.svg');
+ background-image: url('/media/protocol/img/icons/arrow-right.svg');
background-position: center left;
background-repeat: no-repeat;
background-size: 18px auto;
diff --git a/media/css/foundation/m24/index/toc.scss b/media/css/foundation/m24/index/toc.scss
index 8400a312818..082b2c99851 100644
--- a/media/css/foundation/m24/index/toc.scss
+++ b/media/css/foundation/m24/index/toc.scss
@@ -34,7 +34,7 @@ $toc-img-width-large: 40px;
width: 100%;
&::after {
- background-image: url('/media/img/icons/m24-small/arrow-right-white.svg');
+ background-image: url('/media/protocol/img/icons/arrow-right-white.svg');
background-position: center left;
background-repeat: no-repeat;
background-size: 18px auto;
diff --git a/media/css/foundation/reimagine-open.scss b/media/css/foundation/reimagine-open.scss
index 6fce9d41ebd..02c13c27653 100644
--- a/media/css/foundation/reimagine-open.scss
+++ b/media/css/foundation/reimagine-open.scss
@@ -7,7 +7,7 @@
@use '~@mozilla-protocol/core/protocol/css/includes/lib' as *;
.mzp-c-callout.mzp-t-hero {
- background: $color-moz-neon-green url('/media/img/foundation/reimagine-open/bg-header.png') left bottom no-repeat;
+ background: $color-moz-green-light url('/media/img/foundation/reimagine-open/bg-header.png') left bottom no-repeat;
@include background-size(469px, 195px);
.mzp-c-callout-desc {
@@ -74,7 +74,7 @@
}
.case-study {
- background: color.adjust($color-moz-warm-red, $alpha: 0.95);
+ background: #f15b6aa0; // this colour matches the image that appears with this section
}
@media #{$mq-md} {
@@ -84,11 +84,11 @@
// Section III: The Future of Open: 2020 and Beyond
.section-three {
- background: color.adjust($color-moz-lemon-yellow, $lightness: 20%) url('/media/img/foundation/reimagine-open/section-three.svg') right -20% top 10% no-repeat;
+ background: color.adjust($color-moz-seed, $lightness: 20%) url('/media/img/foundation/reimagine-open/section-three.svg') right -20% top 10% no-repeat;
@include background-size(600px, 514px);
.case-study {
- background: color.adjust($color-moz-lemon-yellow, $alpha: 0.8);
+ background: color.adjust($color-moz-seed, $alpha: 0.8);
}
@media #{$mq-md} {
diff --git a/media/css/m24/base.scss b/media/css/m24/base.scss
index 1ce440073ec..8cbed965c98 100644
--- a/media/css/m24/base.scss
+++ b/media/css/m24/base.scss
@@ -31,14 +31,11 @@ strong {
}
a:link,
-a:visited {
+a:visited,
+a:hover,
+a:focus,
+a:active {
color: $m24-color-black;
-
- &:hover,
- &:focus,
- &:active {
- color: $m24-color-black;
- }
}
*:focus,
@@ -79,8 +76,7 @@ a:visited {
text-decoration: none;
}
- &:link:hover,
- &:link:hover:visited {
+ &:link:hover {
--cta-bg-position: 0%;
transition: $slow $bezier;
}
diff --git a/media/css/m24/button.scss b/media/css/m24/button.scss
index c7d1f5c8c89..750f33f2606 100644
--- a/media/css/m24/button.scss
+++ b/media/css/m24/button.scss
@@ -21,16 +21,16 @@
&:link,
&:visited {
color: $m24-color-white;
+ }
- &:hover,
- &:active,
- &:focus {
- background-color: $m24-color-white;
- color: $m24-color-black;
- transition-duration: $fast;
- transition-property: background-color, border-color, color;
- transition-timing-function: $bezier;
- }
+ &:hover,
+ &:active,
+ &:focus {
+ background-color: $m24-color-white;
+ color: $m24-color-black;
+ transition-duration: $fast;
+ transition-property: background-color, border-color, color;
+ transition-timing-function: $bezier;
}
&.m24-t-alt {
@@ -41,13 +41,13 @@
&:link,
&:visited {
color: $m24-color-black;
+ }
- &:hover,
- &:active,
- &:focus {
- background-color: $m24-color-black;
- color: $m24-color-white;
- }
+ &:hover,
+ &:active,
+ &:focus {
+ background-color: $m24-color-black;
+ color: $m24-color-white;
}
}
}
diff --git a/media/css/m24/components/footer-newsletter.scss b/media/css/m24/components/footer-newsletter.scss
index 98dfdda6b26..40542aa6199 100644
--- a/media/css/m24/components/footer-newsletter.scss
+++ b/media/css/m24/components/footer-newsletter.scss
@@ -178,7 +178,7 @@ $max-footer-content-width: $content-max;
select {
width: 100%;
@include bidi(((background-position, right 8px center, 8px center),));
- background: $m24-color-light-gray url('/media/img/icons/m24-small/down-caret-white.svg') no-repeat;
+ background: $m24-color-light-gray url('/media/protocol/img/icons/caret-down-white.svg') no-repeat;
background-size: 16px 16px;
@media #{$mq-lg} {
@@ -191,7 +191,7 @@ $max-footer-content-width: $content-max;
&:focus-within {
color: $m24-color-alt-white;
@include bidi(((background-position, right 8px center, 8px center),));
- background: $m24-color-alt-black url('/media/img/icons/m24-small/down-caret.svg') no-repeat;
+ background: $m24-color-alt-black url('/media/protocol/img/icons/caret-down.svg') no-repeat;
background-size: 16px 16px;
}
}
diff --git a/media/css/m24/components/footer-refresh.scss b/media/css/m24/components/footer-refresh.scss
index 485abb19773..89ccfe52b42 100644
--- a/media/css/m24/components/footer-refresh.scss
+++ b/media/css/m24/components/footer-refresh.scss
@@ -340,7 +340,7 @@ $max-footer-content-width: $content-max;
border-radius: 0;
font-weight: 600;
background-color: $m24-color-alt-white;
- padding: 9.6px 24px;
+ padding: 8px 24px;
border: $border-width solid $m24-color-black;
text-align: center;
max-width: 800px;
@@ -381,14 +381,14 @@ $max-footer-content-width: $content-max;
&:has(.mzp-js-language-switcher-select:hover)::before,
&:has(.mzp-js-language-switcher-select:focus)::before,
&:has(.mzp-js-language-switcher-select:focus-within)::before {
- background: $m24-color-alt-black url('/media/img/icons/m24-small/globe.svg') center center no-repeat;
- background-size: 18px 18px;
+ background: $m24-color-alt-black url('/media/protocol/img/icons/globe.svg') center center no-repeat;
+ background-size: 16px 16px;
}
&::before {
@include bidi(((left, 4px, auto), (right, auto, 4px)));
- background: transparent url('/media/img/icons/m24-small/globe-white.svg') center center no-repeat;
- background-size: 18px 18px;
+ background: transparent url('/media/protocol/img/icons/globe-white.svg') center center no-repeat;
+ background-size: 16px 16px;
top: 50%;
margin-top: -16px;
content: "";
@@ -423,7 +423,7 @@ $max-footer-content-width: $content-max;
.mzp-js-language-switcher-select {
@include bidi(((background-position, right 8px center, 8px center),));
- background: $m24-color-alt-white url('/media/img/icons/m24-small/down-caret-white.svg') no-repeat;
+ background: $m24-color-alt-white url('/media/protocol/img/icons/caret-down-white.svg') no-repeat;
background-size: 16px 16px;
border-radius: 0;
border: $border-width solid $m24-color-alt-black;
@@ -443,7 +443,7 @@ $max-footer-content-width: $content-max;
&:focus-visible,
&:focus-within {
color: $m24-color-white;
- background: $m24-color-alt-black url('/media/img/icons/m24-small/down-caret.svg') no-repeat;
+ background: $m24-color-alt-black url('/media/protocol/img/icons/caret-down.svg') no-repeat;
@include bidi(((background-position, right 8px center, 8px center),));
background-size: 16px 16px;
}
diff --git a/media/css/m24/components/navigation-refresh.scss b/media/css/m24/components/navigation-refresh.scss
index 5202c279814..74b24c80548 100644
--- a/media/css/m24/components/navigation-refresh.scss
+++ b/media/css/m24/components/navigation-refresh.scss
@@ -118,7 +118,7 @@ $margin-top: 54px; // top margin offset for mobile navigation menu
text-decoration-thickness: 1px;
&.mzp-is-active {
- background: transparent url('/media/protocol/img/icons/close.svg') center center no-repeat;
+ background: transparent url('/media/protocol/img/icons/close.svg') center center / 20px 20px no-repeat;
width: 40px;
@include image-replaced;
@@ -248,7 +248,7 @@ $margin-top: 54px; // top margin offset for mobile navigation menu
// Arrow styles for mobile menu items.
&::after {
- background: transparent url('/media/img/icons/m24-small/up-arrow.svg') center center no-repeat;
+ background: transparent url('/media/protocol/img/icons/arrow-up.svg') center center no-repeat;
content: '';
height: 20px;
position: absolute;
@@ -566,6 +566,7 @@ $margin-top: 54px; // top margin offset for mobile navigation menu
.m24-c-menu-panel .m24-c-menu-category-link a,
.m24-c-menu-panel .m24-c-menu-category-link a:visited,
.m24-c-menu-panel .m24-c-menu-category-link a:link {
+ align-items: center;
border: none;
color: $color-black;
display: flex;
@@ -577,15 +578,14 @@ $margin-top: 54px; // top margin offset for mobile navigation menu
svg {
@include bidi((
(left, auto, 0),
- (margin-left, $spacing-xs, 0),
- (margin-right, 0, $spacing-xs),
+ (margin-left, $spacing-sm, 0),
+ (margin-right, 0, $spacing-sm),
(right, 0, auto),
(transition-property, right, left),
(transform, none, rotate(-180deg)),
));
- height: 0.8em;
+ height: 16px;
position: relative;
- top: 0.15em;
transition-duration: $fast;
transition-timing-function: $bezier;
width: auto;
@@ -640,17 +640,16 @@ $margin-top: 54px; // top margin offset for mobile navigation menu
// Menu panel close button shown on desktop sized view ports.
.m24-c-menu-button-close {
- @include bidi(((right, 15px, left, auto), (left, auto, right, 15px)));
+ @include bidi(((right, 4px, left, auto), (left, auto, right, 4px)));
@include image-replaced;
- background: $color-white url('/media/protocol/img/icons/close.svg') center center no-repeat;
- @include background-size(20px, 20px);
+ background: $color-white url('/media/protocol/img/icons/close.svg') center center / 20px 20px no-repeat;
border: $border-width solid transparent;
cursor: pointer;
display: none;
height: 24px;
padding: var(--spacer-xs);
position: absolute;
- top: 15px;
+ top: 4px;
width: 24px;
transition: border-color $fast $bezier;
diff --git a/media/css/m24/components/pencil-banner.scss b/media/css/m24/components/pencil-banner.scss
index 297e11a98c7..6eaccd8db2a 100644
--- a/media/css/m24/components/pencil-banner.scss
+++ b/media/css/m24/components/pencil-banner.scss
@@ -29,7 +29,7 @@
.m24-pencil-banner-close {
@include bidi(((right, $spacer-sm, auto), (left, auto, $spacer-sm)));
@include image-replaced;
- background: transparent url('/media/img/icons/m24-small/close.svg') center center no-repeat;
+ background: transparent url('/media/protocol/img/icons/close.svg') center center no-repeat;
@include background-size(20px 20px);
border: $border-width solid transparent;
cursor: pointer;
diff --git a/media/css/m24/flag.scss b/media/css/m24/flag.scss
index fbbc1ffd38d..58a1c75adda 100644
--- a/media/css/m24/flag.scss
+++ b/media/css/m24/flag.scss
@@ -109,13 +109,6 @@
}
}
-.m24-c-cta {
- &:hover,
- &:visited:hover {
- color: $m24-color-black;
- }
-}
-
@media #{$mq-lg} {
.m24-c-flag {
@include grid;
diff --git a/media/css/m24/gallery.scss b/media/css/m24/gallery.scss
index 16e819e8d86..43470f00e57 100644
--- a/media/css/m24/gallery.scss
+++ b/media/css/m24/gallery.scss
@@ -93,8 +93,7 @@
&:hover,
&:focus,
- &:active,
- &:visited:hover {
+ &:active {
color: inherit;
text-decoration: underline;
}
diff --git a/media/css/m24/launchpad.scss b/media/css/m24/launchpad.scss
index b8588cede67..f60ec4e1cb4 100644
--- a/media/css/m24/launchpad.scss
+++ b/media/css/m24/launchpad.scss
@@ -65,7 +65,7 @@ $launchpad-logo-spacing: $launchpad-logo-width + $launchpad-logo-padding;
(right, $container-padding, auto),
(left, auto, $container-padding),
(transition-property, right, left),
- (background-image, url('/media/img/icons/m24-small/arrow-right.svg'), url('/media/img/icons/m24-small/arrow-left.svg'))
+ (background-image, url('/media/protocol/img/icons/arrow-right.svg'), url('/media/protocol/img/icons/arrow-left.svg'))
));
background-size: 18px auto;
transition-duration: $fast;
diff --git a/media/css/m24/springboard.scss b/media/css/m24/springboard.scss
index 936b48bef3d..d89d495f146 100644
--- a/media/css/m24/springboard.scss
+++ b/media/css/m24/springboard.scss
@@ -33,16 +33,16 @@ $springboard-thumb-width: 32px;
padding: $spacer-md $container-padding;
transition: background-color $fast $bezier;
- &:link:hover,
- &:link:focus {
- background-color: $m24-color-light-gray;
+ &:link,
+ &:visited {
text-decoration: none;
- cursor: pointer;
}
- &:link,
- &:link:visited {
+ &:hover,
+ &:focus {
+ background-color: $m24-color-light-gray;
text-decoration: none;
+ cursor: pointer;
}
}
@@ -102,12 +102,12 @@ $springboard-thumb-width: 32px;
}
.m24-c-springboard-icon-podcast {
- background-image: url('/media/img/icons/m24-small/headphones.svg');
+ background-image: url('/media/protocol/img/icons/headphone.svg');
background-size: 18px 18px;
}
.m24-c-springboard-icon-video {
- background-image: url('/media/img/icons/m24-small/arrow-right.svg');
+ background-image: url('/media/protocol/img/icons/arrow-right.svg');
background-size: 16px 16px;
}
diff --git a/media/css/m24/vars/_color.scss b/media/css/m24/vars/_color.scss
index f703617085e..8dfbf9c56b3 100644
--- a/media/css/m24/vars/_color.scss
+++ b/media/css/m24/vars/_color.scss
@@ -2,40 +2,43 @@
// License, v. 2.0. If a copy of the MPL was not distributed with this
// file, You can obtain one at https://mozilla.org/MPL/2.0/.
+@use '~@mozilla-protocol/core/protocol/css/includes/lib' as lib;
+
/* ------------------------------------------------------------------------------- */
// hex code colors
// do not reference these directly, use the $m24-color-* variables as they will adapt for dark mode
// black and white
-$token-color-black: #000;
-$token-color-off-black: #161616;
-$token-color-white: #fff;
-$token-color-off-white: #fafafa;
+$token-color-black: lib.$color-moz-black-strong;
+$token-color-off-black: lib.$color-moz-black;
+$token-color-white: lib.$color-moz-white-strong;
+$token-color-off-white: lib.$color-moz-white;
// grays
-$token-color-light-gray: #f4f4f4; // gray 1
-$token-color-light-mid-gray: #E8E8E8; // gray 2
-$token-color-mid-gray: #B3B3B3; // gray 3
-$token-color-dark-mid-gray: #6D6D6D; // gray 4
-$token-color-dark-gray: #414141; // gray 5
+// names seems to have shifted between when these variables were named and final colours were decided on
+$token-color-light-gray: lib.$color-moz-white;
+$token-color-light-mid-gray: lib.$color-moz-gray-light;
+$token-color-mid-gray: lib.$color-moz-gray; // gray 3
+$token-color-dark-mid-gray: lib.$color-moz-gray-mid; // gray 4
+$token-color-dark-gray: lib.$color-moz-gray-dark; // gray 5
// greens
-$token-color-green: #00D230;
-$token-color-light-green: #D6FFCD;
-$token-color-dark-green: #022611;
-$token-color-mid-green: #28733F;
+$token-color-green: lib.$color-moz-green;
+$token-color-light-green: lib.$color-moz-green-light;
+$token-color-dark-green: lib.$color-moz-green-dark;
+$token-color-mid-green: lib.$color-moz-green-mid;
// oranges
-$token-color-orange: #FF9456;
-$token-color-light-orange: #FAF0E6;
-$token-color-dark-orange: #330505;
-$token-color-red: #FF453F;
+$token-color-orange: lib.$color-moz-orange;
+$token-color-light-orange: lib.$color-moz-orange-light;
+$token-color-dark-orange: lib.$color-moz-orange-dark;
+$token-color-red: lib.$color-moz-orange-mid;
// pinks
-$token-color-pink: #FF97E2;
-$token-color-light-pink: #FFF1F8;
-$token-color-dark-pink: #210340;
-$token-color-purple: #AE49EC;
+$token-color-pink: lib.$color-moz-pink;
+$token-color-light-pink: lib.$color-moz-pink-light;
+$token-color-dark-pink: lib.$color-moz-pink-dark;
+$token-color-purple: lib.$color-moz-pink-mid;
/* ------------------------------------------------------------------------------- */
// define sass variables to hold CSS variables
diff --git a/media/css/mozorg/about-transparency.scss b/media/css/mozorg/about-transparency.scss
index 44512d629d2..606381756fe 100644
--- a/media/css/mozorg/about-transparency.scss
+++ b/media/css/mozorg/about-transparency.scss
@@ -149,7 +149,6 @@ $mzp-v-spacing: var(--v-grid-md);
img {
padding: $spacing-xs;
box-sizing: border-box;
- height: 1.5rem;
}
}
diff --git a/media/css/mozorg/ads/home-contact.scss b/media/css/mozorg/ads/home-contact.scss
index a84a8b19474..0614c85afab 100644
--- a/media/css/mozorg/ads/home-contact.scss
+++ b/media/css/mozorg/ads/home-contact.scss
@@ -6,8 +6,10 @@
.mzp-c-button.mozads-c-contact-button {
+ background-color: $m24-color-black;
+ border-color: currentColor;
border-radius: 0;
- color: #fff;
+ color: $m24-color-white;
margin-top: 2rem;
}
@@ -30,8 +32,14 @@
.mzp-c-button.mozads-c-contact-button {
margin-top: 2rem;
+ svg {
+ position: relative;
+ top: -2px;
+ }
+
&:hover {
- background-color: white;
+ background-color: $m24-color-white;
+ color: $m24-color-black;
}
}
}
diff --git a/media/css/mozorg/contribute.scss b/media/css/mozorg/contribute.scss
index 5618f38f84e..e7bd247476c 100644
--- a/media/css/mozorg/contribute.scss
+++ b/media/css/mozorg/contribute.scss
@@ -87,7 +87,7 @@ $image-path: '/media/protocol/img';
}
.mzp-c-card-media-wrapper {
- background-color: $color-moz-neon-green;
+ background-color: $color-moz-aqua;
}
}
@@ -296,7 +296,7 @@ $image-path: '/media/protocol/img';
url('/media/img/contribute/contribute-problems-fly.svg');
background-repeat: no-repeat;
background-size: 86px 241px, 33%;
- border: 4px solid $color-moz-light-gray;
+ border: 4px solid $color-moz-gray-light;
}
.contribute-banner-problems-title {
diff --git a/media/css/mozorg/diversity/diversity.scss b/media/css/mozorg/diversity/diversity.scss
index dcf173aeadc..b49d2cdf758 100644
--- a/media/css/mozorg/diversity/diversity.scss
+++ b/media/css/mozorg/diversity/diversity.scss
@@ -221,15 +221,15 @@ $image-path: '/media/protocol/img';
a:link,
a:visited {
color: $color-black;
+ }
- &:hover,
- &:focus,
- &:active {
- color: $link-color-hover;
+ a:hover,
+ a:focus,
+ a:active {
+ color: $link-color-hover;
- @supports (--css: variables) {
- color: var(--link-color-hover);
- }
+ @supports (--css: variables) {
+ color: var(--link-color-hover);
}
}
diff --git a/media/css/mozorg/home/includes/mofo-donate-promo.scss b/media/css/mozorg/home/includes/mofo-donate-promo.scss
index 932e57f9641..d3e4ffcacfa 100644
--- a/media/css/mozorg/home/includes/mofo-donate-promo.scss
+++ b/media/css/mozorg/home/includes/mofo-donate-promo.scss
@@ -30,7 +30,7 @@ $image-path: '/media/protocol/img';
small {
@include text-body-md;
text-transform: uppercase;
- color: $color-moz-dark-purple;
+ color: $color-moz-pink-dark;
font-weight: bold;
margin: $spacing-md 0;
display: block;
diff --git a/media/css/mozorg/leadership.scss b/media/css/mozorg/leadership.scss
index 5f6dd950174..22a9b2d0529 100644
--- a/media/css/mozorg/leadership.scss
+++ b/media/css/mozorg/leadership.scss
@@ -177,7 +177,7 @@ main .leadership-section:first-of-type .leadership-title:first-of-type {
a.twitter::before { background-image: url('/media/protocol/img/icons/social/x/black.svg'); }
a.mastodon::before { background-image: url('/media/protocol/img/icons/social/mastodon/black.svg'); }
a.profile::before { background-image: url('/media/protocol/img/icons/accounts.svg'); }
- a.file::before { background-image: url('/media/protocol/img/icons/file-image.svg'); }
+ a.file::before { background-image: url('/media/protocol/img/icons/download.svg'); }
a.link::before { background-image: url('/media/protocol/img/icons/link.svg'); }
}
diff --git a/media/css/mozorg/mozilla-account-promo.scss b/media/css/mozorg/mozilla-account-promo.scss
index 12841c2f711..c3971dd53d6 100644
--- a/media/css/mozorg/mozilla-account-promo.scss
+++ b/media/css/mozorg/mozilla-account-promo.scss
@@ -128,12 +128,12 @@ $promo-sm-mq: 400px;
a:link,
a:visited {
color: $color-white;
+ }
- &:hover,
- &:focus,
- &:active {
- color: $color-white;
- }
+ a:hover,
+ a:focus,
+ a:active {
+ color: $color-white;
}
.products-list {
diff --git a/media/css/privacy/cookie-settings-form.scss b/media/css/privacy/cookie-settings-form.scss
index 3e1e43d7f93..69ace91da2e 100644
--- a/media/css/privacy/cookie-settings-form.scss
+++ b/media/css/privacy/cookie-settings-form.scss
@@ -5,44 +5,10 @@
@use '~@mozilla-protocol/core/protocol/css/includes/lib' as *;
@use '~@mozilla-protocol/core/protocol/css/components/breadcrumb';
-// Temporary fix until https://github.com/mozilla/protocol/issues/933 is resolved
.mzp-c-breadcrumb {
- padding-top: $spacing-md;
- padding-bottom: $spacing-md;
-
&.is-hidden {
display: none;
}
-
- .mzp-c-breadcrumb-list {
- max-width: $content-max;
- margin: 0 auto;
- }
-
- .mzp-c-breadcrumb-item a {
- &:link,
- &:visited {
- text-decoration: underline;
- }
-
- &:hover,
- &:active,
- &:focus {
- text-decoration: none;
- }
- }
-
- @media #{$mq-md} {
- .mzp-c-breadcrumb-list {
- padding: 8px 64px;
- }
- }
-
- @media #{$mq-lg} {
- .mzp-c-breadcrumb-list {
- padding: 8px 96px;
- }
- }
}
main {
diff --git a/media/css/products/monitor/article.scss b/media/css/products/monitor/article.scss
index 5b64f0b1c86..839363a4e5f 100644
--- a/media/css/products/monitor/article.scss
+++ b/media/css/products/monitor/article.scss
@@ -109,49 +109,6 @@ html {
}
}
-
-// * -------------------------------------------------------------------------- */
-// Temporary fix until https://github.com/mozilla/protocol/issues/933 is resolved
-.mzp-c-breadcrumb {
- padding-top: $spacing-md;
- padding-bottom: $spacing-md;
-
- &.is-hidden {
- display: none;
- }
-
- .mzp-c-breadcrumb-list {
- max-width: $content-max;
- margin: 0 auto;
- }
-
- .mzp-c-breadcrumb-item a {
- &:link,
- &:visited {
- text-decoration: underline;
- }
-
- &:hover,
- &:active,
- &:focus {
- text-decoration: none;
- }
- }
-
- @media #{$mq-md} {
- .mzp-c-breadcrumb-list {
- padding: 8px $layout-lg;
- }
- }
-
- @media #{$mq-lg} {
- .mzp-c-breadcrumb-list {
- padding: 8px $layout-xl;
- }
- }
-}
-
-
// * -------------------------------------------------------------------------- */
// article styles as used in the new PN/TOU, these are good reading enhancements and should be ported
diff --git a/media/css/products/vpn/common-refresh.scss b/media/css/products/vpn/common-refresh.scss
index 5055a260eda..2249fbec769 100644
--- a/media/css/products/vpn/common-refresh.scss
+++ b/media/css/products/vpn/common-refresh.scss
@@ -104,7 +104,7 @@ main {
.c-guarantee {
@include text-body-sm;
- color: $color-moz-dark-green;
+ color: $color-moz-green-mid;
font-weight: bold;
margin: 0 auto;
text-align: center;
@@ -130,13 +130,13 @@ main {
a:visited {
color: $color-black;
text-decoration: underline;
+ }
- &:hover,
- &:active,
- &:focus {
- color: $color-black;
- text-decoration: none;
- }
+ a:hover,
+ a:active,
+ a:focus {
+ color: $color-black;
+ text-decoration: none;
}
}
diff --git a/media/css/products/vpn/common.scss b/media/css/products/vpn/common.scss
index c44bdcc704c..dbcc30cd729 100644
--- a/media/css/products/vpn/common.scss
+++ b/media/css/products/vpn/common.scss
@@ -47,12 +47,12 @@
a:visited {
color: inherit;
text-decoration: none;
+ }
- &:hover,
- &:active,
- &:focus {
- text-decoration: underline;
- }
+ a:hover,
+ a:active,
+ a:focus {
+ text-decoration: underline;
}
}
diff --git a/media/css/products/vpn/resource-center.scss b/media/css/products/vpn/resource-center.scss
index 1498cc06d63..f4ea03f53cf 100644
--- a/media/css/products/vpn/resource-center.scss
+++ b/media/css/products/vpn/resource-center.scss
@@ -142,7 +142,7 @@
.vpn-c-vote-btn {
background: none;
border: none;
- color: $color-moz-dark-gray;
+ color: $color-moz-gray;
cursor: pointer;
fill: currentColor;
height: $layout-sm + 6px;
diff --git a/media/css/protocol/components/_menu.scss b/media/css/protocol/components/_menu.scss
index 495a5cf3c7f..7b55605e05e 100644
--- a/media/css/protocol/components/_menu.scss
+++ b/media/css/protocol/components/_menu.scss
@@ -86,7 +86,7 @@
text-decoration: none;
&::before {
- background: $url-image-arrow-down-form top left no-repeat;
+ background: $url-image-caret-down-form top left no-repeat;
@include background-size(20px, 20px);
@include bidi(((right, 8px, left, auto),));
@include transition(transform 100ms ease-in-out);
@@ -243,14 +243,14 @@
color: $color-black;
text-decoration: none;
border-bottom: 2px solid transparent;
+ }
- &:hover,
- &:active,
- &:focus {
- @include transition(border-bottom-color 100ms ease-in-out);
- border-bottom: 2px solid $color-black;
- color: $color-black;
- }
+ a:hover,
+ a:active,
+ a:focus {
+ @include transition(border-bottom-color 100ms ease-in-out);
+ border-bottom: 2px solid $color-black;
+ color: $color-black;
}
}
diff --git a/media/css/protocol/components/_sub-navigation.scss b/media/css/protocol/components/_sub-navigation.scss
index e22a2022ffb..a69734c6546 100644
--- a/media/css/protocol/components/_sub-navigation.scss
+++ b/media/css/protocol/components/_sub-navigation.scss
@@ -8,7 +8,7 @@
// Should be replaced by https://github.com/mozilla/protocol/issues/471
.c-sub-navigation {
- background: $color-marketing-gray-10;
+ background: #f4f4f4;
.mzp-l-content {
padding-top: 0;
@@ -89,7 +89,7 @@
}
button::before {
- background: $url-image-arrow-down-form top left no-repeat;
+ background: $url-image-caret-down-form top left no-repeat;
@include background-size(24px, 24px);
@include bidi(((right, $spacing-xs, left, auto),));
@include transition(transform 100ms ease-in-out);
@@ -139,12 +139,12 @@
color: $color-black;
font-family: var(--body-font-family);
text-decoration: none;
+ }
- &:hover,
- &:focus,
- &:active {
- text-decoration: underline;
- }
+ a:hover,
+ a:focus,
+ a:active {
+ text-decoration: underline;
}
.mzp-c-button.mzp-t-product {
diff --git a/media/css/security/components/level.scss b/media/css/security/components/level.scss
index 4f1a3b0e587..594b95aa761 100644
--- a/media/css/security/components/level.scss
+++ b/media/css/security/components/level.scss
@@ -57,8 +57,7 @@
.level-heading {
position: relative;
- a,
- a:visited {
+ a {
color: inherit;
text-decoration: none;
diff --git a/media/img/icons/m24-small/arrow-left.svg b/media/img/icons/m24-small/arrow-left.svg
deleted file mode 100644
index ed36db9a599..00000000000
--- a/media/img/icons/m24-small/arrow-left.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
diff --git a/media/img/icons/m24-small/arrow-right-white.svg b/media/img/icons/m24-small/arrow-right-white.svg
deleted file mode 100644
index e4fd98681ba..00000000000
--- a/media/img/icons/m24-small/arrow-right-white.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
diff --git a/media/img/icons/m24-small/arrow-right.svg b/media/img/icons/m24-small/arrow-right.svg
deleted file mode 100644
index 1ecf9deb4a9..00000000000
--- a/media/img/icons/m24-small/arrow-right.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
diff --git a/media/img/icons/m24-small/bell.svg b/media/img/icons/m24-small/bell.svg
deleted file mode 100644
index 966587c6d8f..00000000000
--- a/media/img/icons/m24-small/bell.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
diff --git a/media/img/icons/m24-small/close-white.svg b/media/img/icons/m24-small/close-white.svg
deleted file mode 100644
index facb091611c..00000000000
--- a/media/img/icons/m24-small/close-white.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
diff --git a/media/img/icons/m24-small/close.svg b/media/img/icons/m24-small/close.svg
deleted file mode 100644
index 0ab2332c290..00000000000
--- a/media/img/icons/m24-small/close.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
diff --git a/media/img/icons/m24-small/cursor.svg b/media/img/icons/m24-small/cursor.svg
deleted file mode 100644
index 3a055e4ab23..00000000000
--- a/media/img/icons/m24-small/cursor.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
diff --git a/media/img/icons/m24-small/dollar.svg b/media/img/icons/m24-small/dollar.svg
deleted file mode 100644
index 32864429d1b..00000000000
--- a/media/img/icons/m24-small/dollar.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
diff --git a/media/img/icons/m24-small/down-caret-white.svg b/media/img/icons/m24-small/down-caret-white.svg
deleted file mode 100644
index 2fb7b96855e..00000000000
--- a/media/img/icons/m24-small/down-caret-white.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
diff --git a/media/img/icons/m24-small/down-caret.svg b/media/img/icons/m24-small/down-caret.svg
deleted file mode 100644
index a97462b6abb..00000000000
--- a/media/img/icons/m24-small/down-caret.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
diff --git a/media/img/icons/m24-small/download.svg b/media/img/icons/m24-small/download.svg
deleted file mode 100644
index 0f9a1462ce2..00000000000
--- a/media/img/icons/m24-small/download.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-
diff --git a/media/img/icons/m24-small/globe-white.svg b/media/img/icons/m24-small/globe-white.svg
deleted file mode 100644
index 1bf25587c49..00000000000
--- a/media/img/icons/m24-small/globe-white.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
diff --git a/media/img/icons/m24-small/globe.svg b/media/img/icons/m24-small/globe.svg
deleted file mode 100644
index b9c933fe834..00000000000
--- a/media/img/icons/m24-small/globe.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
diff --git a/media/img/icons/m24-small/headphones.svg b/media/img/icons/m24-small/headphones.svg
deleted file mode 100644
index bb91d96fdf9..00000000000
--- a/media/img/icons/m24-small/headphones.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
diff --git a/media/img/icons/m24-small/heart.svg b/media/img/icons/m24-small/heart.svg
deleted file mode 100644
index 57a77ba7504..00000000000
--- a/media/img/icons/m24-small/heart.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
diff --git a/media/img/icons/m24-small/home.svg b/media/img/icons/m24-small/home.svg
deleted file mode 100644
index bba8b677cf7..00000000000
--- a/media/img/icons/m24-small/home.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
diff --git a/media/img/icons/m24-small/left-arrow.svg b/media/img/icons/m24-small/left-arrow.svg
deleted file mode 100644
index a745cd39513..00000000000
--- a/media/img/icons/m24-small/left-arrow.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
diff --git a/media/img/icons/m24-small/lock.svg b/media/img/icons/m24-small/lock.svg
deleted file mode 100644
index 09aa6024443..00000000000
--- a/media/img/icons/m24-small/lock.svg
+++ /dev/null
@@ -1,9 +0,0 @@
-
diff --git a/media/img/icons/m24-small/pencil.svg b/media/img/icons/m24-small/pencil.svg
deleted file mode 100644
index 9ee3cc27340..00000000000
--- a/media/img/icons/m24-small/pencil.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
diff --git a/media/img/icons/m24-small/shield.svg b/media/img/icons/m24-small/shield.svg
deleted file mode 100644
index 22b45341241..00000000000
--- a/media/img/icons/m24-small/shield.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
diff --git a/media/img/icons/m24-small/up-arrow.svg b/media/img/icons/m24-small/up-arrow.svg
deleted file mode 100644
index 7e8c3f6b207..00000000000
--- a/media/img/icons/m24-small/up-arrow.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
diff --git a/package-lock.json b/package-lock.json
index 6b06c8f2b8f..b41037bc98f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,7 +11,7 @@
"dependencies": {
"@babel/core": "^7.28.4",
"@babel/preset-env": "^7.28.3",
- "@mozilla-protocol/core": "^20.0.0",
+ "@mozilla-protocol/core": "^22.0.0",
"@mozilla/glean": "^5.0.3",
"@mozmeao/consent-banner": "^1.1.0",
"@mozmeao/cookie-helper": "^1.1.0",
@@ -2103,9 +2103,9 @@
"dev": true
},
"node_modules/@mozilla-protocol/core": {
- "version": "20.0.0",
- "resolved": "https://registry.npmjs.org/@mozilla-protocol/core/-/core-20.0.0.tgz",
- "integrity": "sha512-cAW9rsYPJ9rxoD+LOoDQKhEG843a/07HWZP3JTcA8XdT4385QafrYRulhj6i7S2HjU6grpRybINyf69sCDvOmA==",
+ "version": "22.0.0",
+ "resolved": "https://registry.npmjs.org/@mozilla-protocol/core/-/core-22.0.0.tgz",
+ "integrity": "sha512-BsYVbUiNc5+vZZGWGrrdCNFxW7C1SvwST9bek0+oxxYsRTmzgvv1wov3Z0XYRZl7P9xLVFi2zK7861U+ulBtPg==",
"license": "MPL-2.0"
},
"node_modules/@mozilla/glean": {
diff --git a/package.json b/package.json
index 27c1bbb98ac..d0a502bc4bd 100644
--- a/package.json
+++ b/package.json
@@ -6,7 +6,7 @@
"dependencies": {
"@babel/core": "^7.28.4",
"@babel/preset-env": "^7.28.3",
- "@mozilla-protocol/core": "^20.0.0",
+ "@mozilla-protocol/core": "^22.0.0",
"@mozilla/glean": "^5.0.3",
"@mozmeao/consent-banner": "^1.1.0",
"@mozmeao/cookie-helper": "^1.1.0",