Bug 1942110 - Part 1: create our icon-size token scale r=reusable-components-reviewers,desktop-theme-reviewers,mtigley,settings-reviewers,credential-management-reviewers,fxview-reviewers,mstriemer,dao,nsharpley

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

browser/components/aboutlogins/content/components/login-item.css

@@ -228,8 +228,8 @@ moz-button-group,
 
 .login-item-favicon {
   margin-inline-end: 12px;
-  height: 24px;
-  width: 24px;
+  height: var(--icon-size-large);
+  width: var(--icon-size-large);
   flex-shrink: 0;
   -moz-context-properties: fill, fill-opacity;
   fill: currentColor;
@@ -275,7 +275,7 @@ login-command-button {
   inset-inline-start: 32px;
   -moz-context-properties: fill;
   fill: currentColor;
-  width: 24px;
+  width: var(--icon-size-large);
 }
 
 .alert-learn-more-link:hover,

browser/components/aboutlogins/content/components/remove-logins-dialog.css

@@ -63,8 +63,8 @@
 .warning-icon {
   -moz-context-properties: fill;
   fill: currentColor;
-  width: 32px;
-  height: 32px;
+  width: var(--icon-size-xlarge);
+  height: var(--icon-size-xlarge);
   margin: 8px;
 }
 

browser/components/firefoxview/fxview-empty-state.css

@@ -64,8 +64,8 @@
 .icon {
   background-position: center center;
   background-repeat: no-repeat;
-  width: 20px;
-  height: 20px;
+  width: var(--icon-size-medium);
+  height: var(--icon-size-medium);
 
   &:not([hidden]) {
     display: inline-block;

browser/themes/shared/preferences/preferences.css

@@ -278,10 +278,10 @@ radio {
 }
 
 .extension-controlled-icon {
-  height: 20px;
+  height: var(--icon-size-medium);
   margin: 2px 0 6px;
   vertical-align: middle;
-  width: 20px;
+  width: var(--icon-size-medium);
   -moz-context-properties: fill;
   fill: currentColor;
 }
@@ -679,8 +679,8 @@ html|dialog,
   background-color: transparent; /* override common.css, but keep hover/active states */
   min-width: 0;
   min-height: auto;
-  width: 20px;
-  height: 20px;
+  width: var(--icon-size-medium);
+  height: var(--icon-size-medium);
   padding: 0;
   margin-inline: 0 8px;
 }
@@ -919,8 +919,8 @@ dialog > .sync-engines-list + hbox {
 .androidIcon,
 .iOSIcon {
   margin-inline: 2px 4px;
-  width: 20px;
-  height: 20px;
+  width: var(--icon-size-medium);
+  height: var(--icon-size-medium);
   vertical-align: text-bottom;
 }
 

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

@@ -836,7 +836,19 @@
     },
     "size": {
       "default": {
+        "value": "{icon.size.small}"
+      },
+      "small": {
         "value": "{size.item.small}"
+      },
+      "medium": {
+        "value": "20px"
+      },
+      "large": {
+        "value": "24px"
+      },
+      "xlarge": {
+        "value": "{size.item.large}"
       }
     }
   },

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

@@ -157,7 +157,11 @@
     --icon-color-information: light-dark(var(--color-blue-50), var(--color-blue-30));
     --icon-color-success: light-dark(var(--color-green-50), var(--color-green-30));
     --icon-color-warning: light-dark(var(--color-yellow-50), var(--color-yellow-30));
-    --icon-size-default: var(--size-item-small);
+    --icon-size-default: var(--icon-size-small);
+    --icon-size-small: var(--size-item-small);
+    --icon-size-medium: 20px;
+    --icon-size-large: 24px;
+    --icon-size-xlarge: var(--size-item-large);
 
     /** Input - Text **/
     --input-text-min-height: var(--button-min-height);

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

@@ -759,7 +759,11 @@ export const storybookTables = {
     },
   ],
   "icon-size": [
-    { value: "var(--size-item-small)", name: "--icon-size-default" },
+    { value: "var(--icon-size-small)", name: "--icon-size-default" },
+    { value: "var(--size-item-small)", name: "--icon-size-small" },
+    { value: "20px", name: "--icon-size-medium" },
+    { value: "24px", name: "--icon-size-large" },
+    { value: "var(--size-item-large)", name: "--icon-size-xlarge" },
   ],
   "input-space": [
     { value: "var(--space-xsmall)", name: "--input-space-block" },
@@ -1306,7 +1310,11 @@ export const variableLookupTable = {
     prefersContrast: "var(--icon-color)",
     default: "light-dark(var(--color-red-50), var(--color-red-30))",
   },
-  "icon-size-default": "var(--size-item-small)",
+  "icon-size-default": "var(--icon-size-small)",
+  "icon-size-small": "var(--size-item-small)",
+  "icon-size-medium": "20px",
+  "icon-size-large": "24px",
+  "icon-size-xlarge": "var(--size-item-large)",
   "input-text-min-height": "var(--button-min-height)",
   "input-space-block": "var(--space-xsmall)",
   "link-color": {