refactor to not output on page

bedrock/base/templates/base-protocol-mozilla.html

@@ -15,6 +15,7 @@
     {{ css_bundle('protocol-mozilla') }}
   {% endif %}
   {% if switch('m24-navigation-and-footer') and LANG.startswith('en-') %}
+    {{ css_bundle('m24-root') }}
     {{ css_bundle('m24-navigation-and-footer') }}
   {% endif %}
 {% endblock %}

bedrock/base/templates/base-protocol.html

@@ -78,6 +78,7 @@
         {{ css_bundle('protocol-firefox') }}
       {% endif %}
       {% if switch('m24-navigation-and-footer') and LANG.startswith('en-') %}
+        {{ css_bundle('m24-root') }}
         {{ css_bundle('m24-navigation-and-footer') }}
       {% endif %}
     {% endblock %}

bedrock/firefox/templates/firefox/new/basic/base.html

@@ -37,6 +37,7 @@
     {{ css_bundle('protocol-firefox') }}
   {% endif %}
   {% if switch('m24-navigation-and-footer') and LANG.startswith('en-') %}
+    {{ css_bundle('m24-root') }}
     {{ css_bundle('m24-navigation-and-footer') }}
   {% endif %}
 

bedrock/firefox/templates/firefox/new/desktop/base.html

@@ -37,6 +37,7 @@
     {{ css_bundle('protocol-firefox') }}
   {% endif %}
   {% if switch('m24-navigation-and-footer') and LANG.startswith('en-') %}
+    {{ css_bundle('m24-root') }}
     {{ css_bundle('m24-navigation-and-footer') }}
   {% endif %}
 {% endblock %}

bedrock/mozorg/templates/mozorg/about/index-m24.html

@@ -16,7 +16,8 @@
 {% block body_id %}about{% endblock %}
 
 {% block page_css %}
-  {{ css_bundle('m24') }}
+  {{ css_bundle('m24-root') }}
+  {{ css_bundle('m24-base') }}
 {% endblock %}
 
 {% block content %}

bedrock/mozorg/templates/mozorg/home/home-m24.html

@@ -23,7 +23,8 @@
 {% set show_firefox_app_store_banner = switch('firefox-app-store-banner') %}
 
 {% block page_css %}
-  {{ css_bundle('m24') }}
+  {{ css_bundle('m24-root') }}
+  {{ css_bundle('m24-base') }}
 {% endblock %}
 
 {% block site_header %}

media/css/m24/grid.scss

@@ -11,7 +11,7 @@
 
 .m24-c-grid-container {
     @media #{$mq-md} {
-        gap: var(--spacer-xl) var(--grid-gutter);
+        gap: $m24-spacer-xl $m24-grid-gutter;
         display: grid;
         grid-template-columns: repeat(2, 1fr);
         margin-top: $spacer-xl;
@@ -23,24 +23,24 @@
 }
 
 .m24-c-grid-tile {
-    margin-bottom: var(--spacer-xl);
+    margin-bottom: $m24-spacer-xl;
 
     .m24-c-grid-tile-content > :last-child {
         margin-bottom: 0;
     }
 
     .m24-c-grid-tile-image {
-        margin-bottom: var(--spacer-sm);
+        margin-bottom: $m24-spacer-sm;
     }
 
     .m24-c-grid-tile-title {
-        font-size: var(--text-title-md);
+        font-size: $m24-text-title-md;
         text-decoration: underline 0.075em transparent;
         transition: text-decoration-color 150ms ease-in-out, color 150ms ease-in-out;
     }
 
     .m24-c-grid-tile-cta > span {
-        font-size: var(--text-body-lg);
+        font-size: $m24-text-body-lg;
         font-weight: bold;
         text-decoration: underline 0.075em transparent;
         transition: text-decoration-color 150ms ease-in-out, color 150ms ease-in-out;

media/css/m24/root.scss

@@ -0,0 +1,222 @@
+// This Source Code Form is subject to the terms of the Mozilla Public
+// 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/.
+
+@import '~@mozilla-protocol/core/protocol/css/includes/lib';
+@import 'vars/color';
+
+:root {
+    // black and white
+    --m24-white: #{$token-color-white};
+    --m24-black: #{$token-color-black};
+
+    // gray
+    --m24-light-gray: #{$token-color-light-gray};
+    --m24-medium-gray: #{$token-color-medium-gray};
+    --m24-dark-gray: #{$token-color-dark-gray};
+    --m24-functional-gray: #{$token-color-functional-gray-on-white};
+
+    // green
+    --m24-green: #{$token-color-green};
+    --m24-light-green: #{$token-color-light-green};
+    --m24-dark-green: #{$token-color-dark-green};
+
+    // pink
+    --m24-pink: #{$token-color-pink};
+    --m24-light-pink: #{$token-color-light-pink};
+    --m24-dark-pink: #{$token-color-dark-pink};
+
+    // orange
+    --m24-orange: #{$token-color-orange};
+    --m24-light-orange: #{$token-color-light-orange};
+    --m24-dark-orange: #{$token-color-dark-orange};
+
+    // grid
+    --grid-margin: 16px;
+    --grid-gutter: 8px;
+
+    // spacers
+    --spacer-3xl: 80px;
+    --spacer-2xl: 64px;
+    --spacer-xl: 32px;
+    --spacer-lg: 24px;
+    --spacer-md: 16px;
+    --spacer-sm: 8px;
+    --spacer-xs: 8px;
+    --spacer-2xs: 4px;
+
+    // container
+    --container-padding: 16px;
+
+    // titles
+    --text-title-2xl: 48px;
+    --text-title-xl: 32px;
+    --text-title-lg: 24px;
+    --text-title-md: 18px;
+    --text-title-sm: 16px;
+
+    // body
+    --text-body-lg: 18px;
+    --text-body-md: 16px;
+    --text-body-sm: 12px;
+
+    // buttons
+    --text-button-lg: 24px;
+    --text-button-sm: 18px;
+}
+
+@media #{$mq-md} {
+    :root {
+        // grid
+        --grid-margin: 24px;
+        --grid-gutter: 12px;
+
+        // spacers
+        --spacer-3xl: 128px;
+        --spacer-2xl: 80px;
+        --spacer-xl: 64px;
+        --spacer-lg: 32px;
+        --spacer-md: 24px;
+        --spacer-sm: 16px;
+        --spacer-xs: 8px;
+        --spacer-2xs: 4px;
+
+        // container
+        --container-padding: 24px;
+
+        // title
+        --text-title-2xl: 64px;
+        --text-title-xl: 48px;
+        --text-title-lg: 32px;
+        --text-title-md: 24px;
+        --text-title-sm: 16px;
+
+        // body
+        --text-body-lg: 18px;
+        --text-body-md: 16px;
+        --text-body-sm: 12px;
+
+        // buttons
+        --text-button-lg: 32px;
+        --text-button-sm: 18px;
+    }
+}
+
+@media #{$mq-xl} {
+    :root {
+        // grid
+        --grid-margin: 32px;
+        --grid-gutter: 16px;
+
+        // spacers
+        --spacer-3xl: 200px;
+        --spacer-2xl: 128px;
+        --spacer-xl: 64px;
+        --spacer-lg: 32px;
+        --spacer-md: 24px;
+        --spacer-sm: 16px;
+        --spacer-xs: 8px;
+        --spacer-2xs: 4px;
+
+        // container
+        --container-padding: 32px;
+
+        // titles
+        --text-title-2xl: 128px;
+        --text-title-xl: 80px;
+        --text-title-lg: 48px;
+        --text-title-md: 24px;
+        --text-title-sm: 16px;
+
+        // body
+        --text-body-lg: 18px;
+        --text-body-md: 16px;
+        --text-body-sm: 12px;
+
+        // buttons
+        --text-button-lg: 48px;
+        --text-button-sm: 18px;
+    }
+}
+
+$m24-font-path: '/media/fonts/m24';
+
+@font-face {
+    font-display: swap;
+    font-family: 'Mozilla Sans Text';
+    font-style: normal;
+    font-weight: normal;
+    src:
+        url('#{$m24-font-path}/mozilla-sans-text/MozillaSansTextBETA-Regular.woff2') format('woff2'),
+        url('#{$m24-font-path}/mozilla-sans-text/MozillaSansTextBETA-Regular.woff') format('woff');
+}
+
+@font-face {
+    font-display: swap;
+    font-family: 'Mozilla Sans Text';
+    font-style: normal;
+    font-weight: 600;
+    src:
+        url('#{$m24-font-path}/mozilla-sans-text/MozillaSansTextBETA-SemiBold.woff2') format('woff2'),
+        url('#{$m24-font-path}/mozilla-sans-text/MozillaSansTextBETA-SemiBold.woff') format('woff');
+}
+
+@font-face {
+    font-display: swap;
+    font-family: 'Mozilla Sans Text';
+    font-style: italic;
+    font-weight: 600;
+    src:
+        url('#{$m24-font-path}/mozilla-sans-text/MozillaSansTextBETA-SemiBoldIt.woff2') format('woff2'),
+        url('#{$m24-font-path}/mozilla-sans-text/MozillaSansTextBETA-SemiBoldIt.woff') format('woff');
+}
+
+@font-face {
+    font-display: swap;
+    font-family: 'Mozilla Sans Text';
+    font-style: normal;
+    font-weight: bold;
+    src:
+        url('#{$m24-font-path}/mozilla-sans-text/MozillaSansTextBETA-Bold.woff2') format('woff2'),
+        url('#{$m24-font-path}/mozilla-sans-text/MozillaSansTextBETA-Bold.woff') format('woff');
+}
+
+@font-face {
+    font-display: swap;
+    font-family: 'Mozilla Sans Text';
+    font-style: italic;
+    font-weight: normal;
+    src:
+        url('#{$m24-font-path}/mozilla-sans-text/MozillaSansTextBETA-Italic.woff2') format('woff2'),
+        url('#{$m24-font-path}/mozilla-sans-text/MozillaSansTextBETA-Italic.woff') format('woff');
+}
+
+@font-face {
+    font-display: swap;
+    font-family: 'Mozilla Sans Text';
+    font-style: italic;
+    font-weight: bold;
+    src:
+        url('#{$m24-font-path}/mozilla-sans-text/MozillaSansTextBETA-BoldIt.woff2') format('woff2'),
+        url('#{$m24-font-path}/mozilla-sans-text/MozillaSansTextBETA-BoldIt.woff') format('woff');
+}
+
+@font-face {
+    font-display: swap;
+    font-family: 'Mozilla SemiSlab';
+    font-style: normal;
+    font-weight: normal;
+    src:
+        url('#{$m24-font-path}/mozilla-semi-slab/MozillaSemiSlab-Regular.woff2') format('woff2'),
+        url('#{$m24-font-path}/mozilla-semi-slab/MozillaSemiSlab-Regular.woff') format('woff');
+}
+
+@font-face {
+    font-display: swap;
+    font-family: 'Mozilla SemiSlab';
+    font-style: normal;
+    font-weight: bold;
+    src:
+        url('#{$m24-font-path}/mozilla-semi-slab/MozillaSemiSlab-Bold.woff2') format('woff2'),
+        url('#{$m24-font-path}/mozilla-semi-slab/MozillaSemiSlab-Bold.woff') format('woff');
+}

media/css/m24/vars/color.scss → media/css/m24/vars/_color.scss

@@ -25,35 +25,6 @@ $token-color-feedback-success: $token-color-green;
 $token-color-feedback-caution: $token-color-dark-orange;
 $token-color-feedback-error: $token-color-orange;
 
-// define CSS variables for the browser
-// do not reference these directly, use the $m24-color-* variables
-:root {
-    // black and white
-    --m24-white: #{$token-color-white};
-    --m24-black: #{$token-color-black};
-
-    // gray
-    --m24-light-gray: #{$token-color-light-gray};
-    --m24-medium-gray: #{$token-color-medium-gray};
-    --m24-dark-gray: #{$token-color-dark-gray};
-    --m24-functional-gray: #{$token-color-functional-gray-on-white};
-
-    // green
-    --m24-green: #{$token-color-green};
-    --m24-light-green: #{$token-color-light-green};
-    --m24-dark-green: #{$token-color-dark-green};
-
-    // pink
-    --m24-pink: #{$token-color-pink};
-    --m24-light-pink: #{$token-color-light-pink};
-    --m24-dark-pink: #{$token-color-dark-pink};
-
-    // orange
-    --m24-orange: #{$token-color-orange};
-    --m24-light-orange: #{$token-color-light-orange};
-    --m24-dark-orange: #{$token-color-dark-orange};
-}
-
 /* ------------------------------------------------------------------------------- */
 // define sass variables to hold CSS variables
 // reference these!
@@ -114,6 +85,7 @@ $m24-color-dark-pink: var(--m24-dark-pink);
 }
 
 /* ------------------------------------------------------------------------------- */
+// TKTK: this file should not write, split into "theme" component?
 
 .m24-t-light-alt {
     background-color: $m24-color-light-gray;

media/css/m24/vars/_fonts.scss

@@ -0,0 +1,8 @@
+// This Source Code Form is subject to the terms of the Mozilla Public
+// 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/.
+
+/* stylelint-disable value-keyword-case  */
+$primary-font: "Mozilla Sans Text", Inter, Arial, "X-LocaleSpecific", sans-serif;
+$secondary-font: "Mozilla SemiSlab", Rockwell, "Roboto Slab", "X-LocaleSpecific", serif;
+/* stylelint-enable */

media/css/m24/vars/grid.scss → media/css/m24/vars/_grid.scss

@@ -2,27 +2,6 @@
 // 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/.
 
-:root {
-    // grid
-    --grid-margin: 16px;
-    --grid-gutter: 8px;
-}
-
-@media #{$mq-md} {
-    :root {
-        // grid
-        --grid-margin: 24px;
-        --grid-gutter: 12px;
-    }
-}
-
-@media #{$mq-xl} {
-    :root {
-        // grid
-        --grid-margin: 32px;
-        --grid-gutter: 16px;
-    }
-}
 
 // grid
 $grid-margin: var(--grid-margin);