Bug 1517856 - Use shared CSS var for defining common page-level content widths r=reusable-components-reviewers,extension-reviewers,settings-reviewers,desktop-theme-reviewers,mconley,hjones,robwu

* Add new token that builds CSS var

* Replace instances with new CSS var

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

browser/themes/shared/preferences/preferences.css

@@ -33,7 +33,6 @@
   display: flex;
   flex-direction: column;
 
-  --main-pane-width: 664px;
 }
 
 /*
@@ -56,7 +55,7 @@
 .pane-container {
   /* A workaround to keep the container always float on the `top: 0` (Bug 1377009) */
   display: block;
-  width: min(100%, var(--main-pane-width));
+  width: min(100%, var(--page-main-content-width));
   min-width: min-content;
 }
 
@@ -1022,7 +1021,7 @@ dialog > .sync-engines-list + hbox {
 
 .sticky-inner-container {
   flex: 1;
-  max-width: var(--main-pane-width);
+  max-width: var(--page-main-content-width);
 }
 
 .search-tooltip {

toolkit/mozapps/extensions/content/aboutaddons.css

@@ -5,7 +5,6 @@
 :root {
   --addon-icon-size: 32px;
   --main-margin-start: 28px;
-  --section-width: 664px;
   --sidebar-width: var(--in-content-sidebar-width);
   --z-index-sticky-container: 5;
   --z-index-popup: 10;
@@ -138,7 +137,7 @@ h2 {
   padding-inline-start: 28px;
   padding-top: 20px;
   padding-bottom: 30px;
-  max-width: var(--section-width);
+  max-width: var(--page-main-content-width);
 }
 
 search-addons > search-textbox {
@@ -156,7 +155,7 @@ search-addons > search-textbox {
   display: flex;
   margin-inline-start: var(--main-margin-start);
   padding-bottom: 16px;
-  max-width: var(--section-width);
+  max-width: var(--page-main-content-width);
 }
 
 .spacer {
@@ -182,12 +181,12 @@ search-addons > search-textbox {
 #main {
   margin-inline-start: var(--main-margin-start);
   margin-bottom: 28px;
-  max-width: var(--section-width);
+  max-width: var(--page-main-content-width);
 }
 
 global-warnings {
   margin-inline-start: var(--main-margin-start);
-  max-width: var(--section-width);
+  max-width: var(--page-main-content-width);
 }
 
 /* The margin between message bars. */
@@ -273,10 +272,10 @@ addon-card[expanded] .update-postponed-bar + .addon-card-message {
 .card-heading-image {
   /* If the width, height or aspect ratio changes, don't forget to update the
    * getScreenshotUrlForAddon function in aboutaddons.js */
-  width: var(--section-width);
+  width: var(--page-main-content-width);
   /* Adjust height so that the image preserves the aspect ratio from AMO.
    * For details, see https://bugzilla.mozilla.org/show_bug.cgi?id=1546123 */
-  height: calc(var(--section-width) * 92 / 680);
+  height: calc(var(--page-main-content-width) * 92 / 680);
   object-fit: cover;
 }
 

toolkit/themes/shared/design-system/design-tokens.json

@@ -902,6 +902,19 @@
       }
     }
   },
+  "page": {
+    "main": {
+      "content": {
+        "width": {
+          "value": {
+            "brand": {
+              "default": "664px"
+            }
+          }
+        }
+      }
+    }
+  },
   "size": {
     "item": {
       "small": {

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

@@ -45,6 +45,9 @@
     --link-color-active: var(--color-accent-primary-active);
     --link-color-visited: var(--link-color);
 
+    /** Page **/
+    --page-main-content-width: 664px;
+
     /** Text **/
     --text-color: light-dark(var(--color-gray-100), var(--color-gray-05));
   }

toolkit/themes/shared/design-system/tokens-config.js

@@ -24,6 +24,7 @@ const TOKEN_SECTIONS = {
   "Input - Space": "input-space",
   Link: "link",
   "Outline Color": "outline-color",
+  Page: "page",
   Size: "size",
   Space: "space",
   Text: "text",

toolkit/themes/shared/design-system/tokens-storybook.mjs

@@ -749,6 +749,12 @@ export const storybookTables = {
     },
     { value: "1px", name: "--link-focus-outline-offset" },
   ],
+  "page-main": [
+    {
+      value: { brand: { default: "664px" } },
+      name: "--page-main-content-width",
+    },
+  ],
   space: [
     { value: "calc(0.5 * var(--space-xsmall))", name: "--space-xxsmall" },
     { value: "0.267rem", name: "--space-xsmall" },
@@ -1201,6 +1207,7 @@ export const variableLookupTable = {
     prefersContrast: "var(--border-color)",
     default: "light-dark(var(--color-red-50), var(--color-red-20))",
   },
+  "page-main-content-width": { brand: { default: "664px" } },
   "size-item-small": "16px",
   "size-item-medium": "28px",
   "size-item-large": "32px",