Bug 1854551 - Apply standardized heading font size to error pages r=dholbert,reusable-components-reviewers,desktop-theme-reviewers,mstriemer

Differential Revision: https://phabricator.services.mozilla.com/D189010

browser/base/content/aboutRestartRequired.xhtml

@@ -34,8 +34,12 @@
     <!-- PAGE CONTAINER (for styling purposes only) -->
     <div id="errorPageContainer">
       <div id="text-container">
-        <div id="title">
-          <h1 id="title-text" data-l10n-id="restart-required-heading" />
+        <div class="title" id="title">
+          <h1
+            class="title-text"
+            id="title-text"
+            data-l10n-id="restart-required-heading"
+          />
         </div>
         <div id="errorLongContent">
           <div id="errorLongDesc">

browser/components/storybook/.storybook/preview-head.html

@@ -40,6 +40,10 @@
     text-align: left;
     width: 100%;
 
+    & h1.sb-preview-font-size-xxlarge {
+      font-size: var(--font-size-xxlarge);
+    }
+
     & th {
       background: #ebf5fc;
     }

browser/components/storybook/docs/README.typography.stories.md

@@ -17,6 +17,24 @@ We set `font: message-box` at the root of `common-shared.css` and `global.css` s
     </tr>
   </thead>
   <tbody>
+  <tr>
+    <th>Heading XLarge <i>(used for error pages)</i></th>
+      <td><code>--font-size-xxlarge</code></td>
+      <td>
+        ```html story
+          <h1 class="text-truncated-ellipsis sb-preview-font-size-xxlarge">The quick brown fox jumps over the lazy dog</h1>
+        ```
+      </td>
+      <td>
+        <code>2.2rem</code> (<code>33px</code>)
+      </td>
+      <td>
+        <code>300</code>
+      </td>
+      <td>
+        <code>1.3</code>
+      </td>
+    </tr>
     <tr>
       <th>Heading Large</th>
       <td><code>h1,<br/>.heading-large</code></td>

toolkit/themes/shared/aboutNetError.css

@@ -30,17 +30,13 @@ body.certerror {
     display: none !important;
 }
 
-.title {
-  font-size: 1.75em;
-}
-
 body.captiveportal .title {
   background-image: url("chrome://global/skin/in-content/wifi.svg");
 }
 
 body.certerror .title {
   background-image: url("chrome://global/skin/icons/warning.svg");
-  color: var(--warning-color);
+  fill: var(--warning-color);
 }
 
 body.blocked .title {

toolkit/themes/shared/design-system/tokens-brand.css

@@ -14,6 +14,7 @@
   --font-size-small: 0.867rem;  /* 13px */
   --font-size-large: 1.133rem;  /* 17px */
   --font-size-xlarge: 1.467rem; /* 22px */
+  --font-size-xxlarge: 2.2rem;  /* 33px */
 
   /* Application */
   /** Font weight **/

toolkit/themes/shared/design-system/tokens-platform.css

@@ -15,6 +15,7 @@
     --font-size-small: unset;
     --font-size-large: unset;
     --font-size-xlarge: unset;
+    --font-size-xxlarge: unset;
 
     /* Application */
     /* Border */

toolkit/themes/shared/in-content/info-pages.css

@@ -36,7 +36,7 @@ body.wide-container {
   background-size: 1.6em;
   margin-inline-start: -2.3em;
   padding-inline-start: 2.3em;
-  font-size: 2.2em;
+  font-size: var(--font-size-xxlarge);
   -moz-context-properties: fill;
   fill: currentColor;
 }
@@ -47,7 +47,7 @@ body.wide-container {
 }
 
 .title-text {
-  font-size: inherit;
+  font-size: var(--font-size-xxlarge);
   padding-bottom: 0.4em;
 }