Refresh: Update color palette (mozilla#15618)

- update colours to match most recent brand color palette
- tweak some colors to better match Figma

bedrock/mozorg/templates/mozorg/about/includes/m24/community.html

@@ -39,4 +39,4 @@ <h2 class="m24-c-showcase-title">{{ ftl('m24-about-community-love') }}</h2>
   </div>
 </section>
 
-<div class="m24-c-transition m24-t-top-pink m24-t-bottom-dark"><hr></div>
+<div class="m24-c-transition m24-t-top-pink m24-t-bottom-dark-alt"><hr></div>

bedrock/mozorg/templates/mozorg/about/includes/m24/manifesto.html

@@ -6,7 +6,7 @@
 
 {% from "macros-protocol.html" import picto with context %}
 
-<div class="m24-t-light-alt m24-t-dark">
+<div class="m24-t-dark m24-t-alt">
   <div class="m24-c-feature">
     <div class="m24-c-feature-media">
       {{ resp_img(
@@ -37,7 +37,7 @@ <h2 class="m24-c-feature-title">{{ ftl('m24-about-together-we-can') }}</h2>
   </div>
 </div>
 
-<div class="m24-t-light-alt">
+<div class="m24-t-alt">
   <div class="m24-c-content">
   <ul class="m24-t-columns-four">
     {% call picto(

bedrock/mozorg/templates/mozorg/home/includes/m24/hero.html

@@ -4,7 +4,7 @@
  file, You can obtain one at https://mozilla.org/MPL/2.0/.
 #}
 
-<div class="m24-t-light-alt m24-t-dark">
+<div class="m24-t-dark m24-t-alt ">
   <section class="m24-c-flag">
     <div class="m24-c-flag-media">
       <img src="{{ static('img/home/2024/hero-symbol-white.svg') }}" alt="" width="216" height="243">

bedrock/mozorg/templates/mozorg/home/includes/m24/issues-gallery.html

@@ -91,4 +91,4 @@ <h2 class="m24-c-intro-title">{{ ftl('m24-home-explore-issues-shaping') }}</h2>
   </div>
 </section>
 
-<div class="m24-c-transition m24-t-top-light m24-t-bottom-dark"><hr></div>
+<div class="m24-c-transition m24-t-top-light m24-t-bottom-dark-alt"><hr></div>

media/css/m24/components/footer-refresh.scss

@@ -13,7 +13,7 @@ $max-footer-content-width: $content-max;
 // whole footer
 .moz24-footer {
     @include invert-colors;
-    background-color: $m24-color-white;
+    background-color: $m24-color-alt-white;
     color: $m24-color-black;
     padding-top: $spacer-xl;
 
@@ -183,10 +183,10 @@ $max-footer-content-width: $content-max;
 }
 
 .moz24-footer-label {
-    color: $m24-color-functional-gray;
-    font-weight: 400;
+    color: $m24-color-mid-gray;
     font-size: $text-body-sm;
     font-family: $primary-font;
+    font-weight: 500;
 }
 
 .moz24-footer-primary-list {
@@ -255,7 +255,7 @@ $max-footer-content-width: $content-max;
     position: relative;
     border-radius: 0;
     font-weight: 500;
-    background-color: transparent;
+    background-color: $m24-color-white;
     color: $m24-color-black;
     padding: 6px 24px;
     border: $border-width solid $m24-color-black;
@@ -388,7 +388,7 @@ $max-footer-content-width: $content-max;
 
         &:hover,
         &:focus-visible {
-            border-color: $m24-color-functional-gray;
+            border-color: $m24-color-mid-gray;
         }
     }
 }

media/css/m24/components/navigation-refresh.scss

@@ -28,7 +28,7 @@ $margin-top: 54px; // top margin offset for mobile navigation menu
 
 .m24-navigation-refresh {
     background-color: $color-white;
-    border-bottom: $border-width solid $m24-color-medium-gray;
+    border-bottom: $border-width solid $m24-color-light-mid-gray;
     display: flex;
     width: 100%;
 
@@ -391,7 +391,7 @@ $margin-top: 54px; // top margin offset for mobile navigation menu
     @include border-box;
 
     @media #{$mq-md} {
-        border-bottom: $border-width solid $m24-color-medium-gray;
+        border-bottom: $border-width solid $m24-color-light-mid-gray;
         left: 0;
         overflow: auto;
         padding: 0;
@@ -648,7 +648,7 @@ $margin-top: 54px; // top margin offset for mobile navigation menu
 
     &:hover,
     &:focus {
-        border-color: $m24-color-medium-gray;
+        border-color: $m24-color-mid-gray;
     }
 }
 

media/css/m24/root.scss

@@ -7,13 +7,16 @@
 :root {
     // black and white
     --m24-white: #{$token-color-white};
+    --m24-off-white: #{$token-color-off-white};
     --m24-black: #{$token-color-black};
+    --m24-off-black: #{$token-color-off-black};
 
     // gray
     --m24-light-gray: #{$token-color-light-gray};
-    --m24-medium-gray: #{$token-color-medium-gray};
+    --m24-light-mid-gray: #{$token-color-light-mid-gray};
+    --m24-mid-gray: #{$token-color-mid-gray};
+    --m24-dark-mid-gray: #{$token-color-dark-mid-gray};
     --m24-dark-gray: #{$token-color-dark-gray};
-    --m24-functional-gray: #{$token-color-functional-gray-on-white};
 
     // green
     --m24-green: #{$token-color-green};

media/css/m24/theme.scss

@@ -4,17 +4,17 @@
 
 @use 'vars/lib' as *;
 
-.m24-t-light-alt {
-    background-color: $m24-color-white-alt;
+.m24-t-alt {
+    background-color: $m24-color-alt-white;
 }
 
 .m24-t-dark {
     @include invert-colors;
     background-color: $m24-color-white;
     color: $m24-color-black;
 
-    &.m24-t-light-alt {
-        background-color: $m24-color-white-alt;
+    &.m24-t-alt {
+        background-color: $m24-color-alt-white;
     }
 }
 

media/css/m24/transition.scss

@@ -41,7 +41,7 @@
 
         &.m24-t-top-light-alt::before,
         &.m24-t-bottom-light-alt {
-            background-color: $m24-color-white-alt;
+            background-color: $m24-color-alt-white;
         }
 
         &.m24-t-top-dark::before,
@@ -51,7 +51,7 @@
 
         &.m24-t-top-dark-alt::before,
         &.m24-t-bottom-dark-alt {
-            background-color: $m24-color-black-alt;
+            background-color: $m24-color-alt-black;
         }
 
         &.m24-t-top-green::before,

media/css/m24/vars/_color.scss

@@ -5,56 +5,72 @@
 /* ------------------------------------------------------------------------------- */
 // 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-light-gray: #f4f4f4;
-$token-color-medium-gray: #e8e8e8;
-$token-color-dark-gray: #161616;
-$token-color-functional-gray-on-white: #707070;
-$token-color-functional-gray-on-black: #828282;
+$token-color-off-black: #161616;
 $token-color-white: #fff;
+$token-color-off-white: #fafafa;
+
+// 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
+
+// greens
 $token-color-green: #00D230;
 $token-color-light-green: #D6FFCD;
-$token-color-dark-green: #28733F;
+$token-color-dark-green: #022611;
+$token-color-mid-green: #28733F;
+
+// oranges
 $token-color-orange: #FF9456;
 $token-color-light-orange: #FAF0E6;
-$token-color-dark-orange: #FF453F;
+$token-color-dark-orange: #330505;
+$token-color-red: #FF453F;
+
+// pinks
 $token-color-pink: #FF97E2;
 $token-color-light-pink: #FFF1F8;
-$token-color-dark-pink: #AE49EC;
-$token-color-feedback-success: $token-color-green;
-$token-color-feedback-caution: $token-color-dark-orange;
-$token-color-feedback-error: $token-color-orange;
+$token-color-dark-pink: #210340;
+$token-color-purple: #AE49EC;
 
 /* ------------------------------------------------------------------------------- */
 // define sass variables to hold CSS variables
 // reference these!
 
 // black and white
-$m24-color-white: var(--m24-white);
 $m24-color-black: var(--m24-black);
+$m24-color-alt-black: var(--m24-off-black);
+$m24-color-white: var(--m24-white);
+$m24-color-alt-white: var(--m24-off-white);
 
-// gray
+// grays
 $m24-color-light-gray: var(--m24-light-gray);
-$m24-color-medium-gray: var(--m24-medium-gray);
+$m24-color-light-mid-gray: var(--m24-light-mid-gray) ;
+$m24-color-mid-gray: var(--m24-mid-gray) ;
+$m24-color-dark-mid-gray: var(--m24-dark-mid-gray) ;
 $m24-color-dark-gray: var(--m24-dark-gray);
-$m24-color-functional-gray: var(--m24-functional-gray);
-$m24-color-white-alt: var(--m24-light-gray);
-$m24-color-black-alt: var(--m24-dark-gray);
 
-// green
+// greens
 $m24-color-green: var(--m24-green);
 $m24-color-light-green: var(--m24-light-green);
 $m24-color-dark-green: var(--m24-dark-green);
+$m24-color-mid-green: var(--m24-mid-green);
 
-// orange
+// oranges
 $m24-color-orange: var(--m24-orange);
 $m24-color-light-orange: var(--m24-light-orange);
 $m24-color-dark-orange: var(--m24-dark-orange);
+$m24-color-red: var(--m24-red);
 
-// pink
+// pinks
 $m24-color-pink: var(--m24-pink);
 $m24-color-light-pink: var(--m24-light-pink);
 $m24-color-dark-pink: var(--m24-dark-pink);
+$m24-color-purple: var(--m24-purple);
 
 
 /* ------------------------------------------------------------------------------- */
@@ -63,12 +79,15 @@ $m24-color-dark-pink: var(--m24-dark-pink);
 @mixin invert-colors {
     // black and white
     --m24-white: #{$token-color-black};
+    --m24-off-white: #{$token-color-off-black};
     --m24-black: #{$token-color-white};
+    --m24-off-black: #{$token-color-off-white};
 
     // gray
     --m24-light-gray: #{$token-color-dark-gray};
     --m24-dark-gray: #{$token-color-light-gray};
-    --m24-functional-gray: #{$token-color-functional-gray-on-black};
+    --m24-light-mid-gray: #{$token-color-dark-mid-gray};
+    --m24-dark-mid-gray: #{$token-color-light-mid-gray};
 
     // green
     --m24-green: #{$token-color-green};