Bug 1918317 - Remove --button-bgcolor, --button-hover-bgcolor, --button-active-bgcolor. r=desktop-theme-reviewers,emilio

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

browser/themes/BuiltInThemeConfig.sys.mjs

@@ -22,14 +22,14 @@ export const BuiltInThemeConfig = new Map([
   [
     "firefox-compact-light@mozilla.org",
     {
-      version: "1.2",
+      version: "1.3",
       path: "resource://builtin-themes/light/",
     },
   ],
   [
     "firefox-compact-dark@mozilla.org",
     {
-      version: "1.2",
+      version: "1.3",
       path: "resource://builtin-themes/dark/",
     },
   ],

browser/themes/addons/dark/manifest.json

@@ -10,7 +10,7 @@
   "name": "Dark",
   "description": "A theme with a dark color scheme.",
   "author": "Mozilla",
-  "version": "1.2",
+  "version": "1.3",
 
   "icons": { "32": "icon.svg" },
 
@@ -65,9 +65,9 @@
   "theme_experiment": {
     "stylesheet": "experiment.css",
     "colors": {
-      "button": "--button-bgcolor",
-      "button_hover": "--button-hover-bgcolor",
-      "button_active": "--button-active-bgcolor",
+      "button": "--button-background-color",
+      "button_hover": "--button-background-color-hover",
+      "button_active": "--button-background-color-active",
       "button_primary": "--button-primary-bgcolor",
       "button_primary_hover": "--button-primary-hover-bgcolor",
       "button_primary_active": "--button-primary-active-bgcolor",

browser/themes/addons/light/manifest.json

@@ -10,7 +10,7 @@
   "name": "Light",
   "description": "A theme with a light color scheme.",
   "author": "Mozilla",
-  "version": "1.2",
+  "version": "1.3",
 
   "icons": { "32": "icon.svg" },
 
@@ -70,9 +70,9 @@
     "stylesheet": "experiment.css",
     "colors": {
       "popup_action_color": "--urlbarView-action-color",
-      "button": "--button-bgcolor",
-      "button_hover": "--button-hover-bgcolor",
-      "button_active": "--button-active-bgcolor",
+      "button": "--button-background-color",
+      "button_hover": "--button-background-color-hover",
+      "button_active": "--button-background-color-active",
       "button_primary": "--button-primary-bgcolor",
       "button_primary_hover": "--button-primary-hover-bgcolor",
       "button_primary_active": "--button-primary-active-bgcolor",

browser/themes/shared/browser-custom-colors.css

@@ -8,15 +8,15 @@
     --button-primary-hover-bgcolor: light-dark(rgb(2, 80, 187), rgb(128, 235, 255));
     --button-primary-active-bgcolor: light-dark(rgb(5, 62, 148), rgb(170, 242, 255));
     --button-primary-color: light-dark(rgb(251, 251, 254), rgb(43, 42, 51));
-    --button-bgcolor: light-dark(
+    --button-background-color: light-dark(
       rgba(207, 207, 216, .33),
       rgba(0, 0, 0, .33)
     );
-    --button-hover-bgcolor: light-dark(
+    --button-background-color-hover: light-dark(
       rgba(207, 207, 216, .66),
       rgba(207, 207, 216, .20)
     );
-    --button-active-bgcolor: light-dark(
+    --button-background-color-active: light-dark(
       rgb(207, 207, 216),
       rgba(207, 207, 216, .40)
     );

browser/themes/shared/downloads/downloads.inc.css

@@ -169,9 +169,9 @@
   background: transparent;
   color: inherit;
   border-radius: 4px;
-  --button-hover-bgcolor: var(--panel-item-hover-bgcolor);
+  --button-background-color-hover: var(--panel-item-hover-bgcolor);
   --button-hover-color: inherit;
-  --button-active-bgcolor: var(--panel-item-active-bgcolor);
+  --button-background-color-active: var(--panel-item-active-bgcolor);
   --button-active-color: inherit;
 }
 
@@ -193,20 +193,20 @@
     background-color: ButtonFace;
     color: ButtonText;
     border-color: currentColor;
-    --button-hover-bgcolor: SelectedItem;
+    --button-background-color-hover: SelectedItem;
     --button-hover-color: SelectedItemText;
-    --button-active-bgcolor: ButtonFace;
+    --button-background-color-active: ButtonFace;
     --button-active-color: ButtonText;
   }
 }
 
 .downloadButton:hover:not(:active) {
-  background-color: var(--button-hover-bgcolor);
+  background-color: var(--button-background-color-hover);
   color: var(--button-hover-color);
-  border-color: var(--button-hover-bgcolor);
+  border-color: var(--button-background-color-hover);
 }
 .downloadButton:hover:active {
-  background-color: var(--button-active-bgcolor);
+  background-color: var(--button-background-color-active);
   color: var(--button-active-color);
 }
 

toolkit/mozapps/extensions/default-theme/manifest.json

@@ -10,7 +10,7 @@
   "name": "System theme — auto",
   "description": "Follow the operating system setting for buttons, menus, and windows.",
   "author": "Mozilla",
-  "version": "1.3",
+  "version": "1.4",
 
   "icons": { "32": "icon.svg" },
 
@@ -65,9 +65,9 @@
 
   "theme_experiment": {
     "colors": {
-      "button": "--button-bgcolor",
-      "button_hover": "--button-hover-bgcolor",
-      "button_active": "--button-active-bgcolor",
+      "button": "--button-background-color",
+      "button_hover": "--button-background-color-hover",
+      "button_active": "--button-background-color-active",
       "button_primary": "--button-primary-bgcolor",
       "button_primary_hover": "--button-primary-hover-bgcolor",
       "button_primary_active": "--button-primary-active-bgcolor",

toolkit/mozapps/extensions/test/browser/browser_html_detail_view.js

@@ -827,7 +827,7 @@ add_task(async function testDefaultTheme() {
   // Version.
   let version = rows.shift();
   await checkLabel(version, "version");
-  is(version.lastChild.textContent, "1.3", "It's always version 1.3");
+  is(version.lastChild.textContent, "1.4", "It's always version 1.4");
 
   // Last updated.
   let lastUpdated = rows.shift();

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

@@ -155,7 +155,7 @@
               "default": "color-mix(in srgb, currentColor 7%, transparent)"
             },
             "platform": {
-              "default": "var(--button-bgcolor, color-mix(in srgb, currentColor 13%, transparent))"
+              "default": "color-mix(in srgb, currentColor 13%, transparent)"
             }
           }
         },
@@ -166,7 +166,7 @@
               "default": "color-mix(in srgb, currentColor 14%, transparent)"
             },
             "platform": {
-              "default": "var(--button-hover-bgcolor, color-mix(in srgb, currentColor 17%, transparent))"
+              "default": "color-mix(in srgb, currentColor 17%, transparent)"
             }
           }
         },
@@ -177,7 +177,7 @@
               "default": "color-mix(in srgb, currentColor 21%, transparent)"
             },
             "platform": {
-              "default": "var(--button-active-bgcolor, color-mix(in srgb, currentColor 30%, transparent))"
+              "default": "color-mix(in srgb, currentColor 30%, transparent)"
             }
           }
         },

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

@@ -21,9 +21,9 @@
     --border-color-interactive: color-mix(in srgb, currentColor 15%, var(--color-gray-60));
 
     /** Button **/
-    --button-background-color: var(--button-bgcolor, color-mix(in srgb, currentColor 13%, transparent)); /* TODO Bug 1821203 - Gray use needs to be consolidated */
-    --button-background-color-hover: var(--button-hover-bgcolor, color-mix(in srgb, currentColor 17%, transparent));
-    --button-background-color-active: var(--button-active-bgcolor, color-mix(in srgb, currentColor 30%, transparent));
+    --button-background-color: color-mix(in srgb, currentColor 13%, transparent); /* TODO Bug 1821203 - Gray use needs to be consolidated */
+    --button-background-color-hover: color-mix(in srgb, currentColor 17%, transparent);
+    --button-background-color-active: color-mix(in srgb, currentColor 30%, transparent);
     --button-text-color: var(--button-color);
     --button-text-color-primary: var(--button-primary-color);
 

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

@@ -83,8 +83,7 @@ export const storybookTables = {
         forcedColors: "ButtonFace",
         brand: { default: "color-mix(in srgb, currentColor 7%, transparent)" },
         platform: {
-          default:
-            "var(--button-bgcolor, color-mix(in srgb, currentColor 13%, transparent))",
+          default: "color-mix(in srgb, currentColor 13%, transparent)",
         },
       },
       name: "--button-background-color",
@@ -94,8 +93,7 @@ export const storybookTables = {
         forcedColors: "SelectedItemText",
         brand: { default: "color-mix(in srgb, currentColor 14%, transparent)" },
         platform: {
-          default:
-            "var(--button-hover-bgcolor, color-mix(in srgb, currentColor 17%, transparent))",
+          default: "color-mix(in srgb, currentColor 17%, transparent)",
         },
       },
       name: "--button-background-color-hover",
@@ -105,8 +103,7 @@ export const storybookTables = {
         forcedColors: "SelectedItemText",
         brand: { default: "color-mix(in srgb, currentColor 21%, transparent)" },
         platform: {
-          default:
-            "var(--button-active-bgcolor, color-mix(in srgb, currentColor 30%, transparent))",
+          default: "color-mix(in srgb, currentColor 30%, transparent)",
         },
       },
       name: "--button-background-color-active",
@@ -844,26 +841,17 @@ export const variableLookupTable = {
   "button-background-color": {
     forcedColors: "ButtonFace",
     brand: { default: "color-mix(in srgb, currentColor 7%, transparent)" },
-    platform: {
-      default:
-        "var(--button-bgcolor, color-mix(in srgb, currentColor 13%, transparent))",
-    },
+    platform: { default: "color-mix(in srgb, currentColor 13%, transparent)" },
   },
   "button-background-color-hover": {
     forcedColors: "SelectedItemText",
     brand: { default: "color-mix(in srgb, currentColor 14%, transparent)" },
-    platform: {
-      default:
-        "var(--button-hover-bgcolor, color-mix(in srgb, currentColor 17%, transparent))",
-    },
+    platform: { default: "color-mix(in srgb, currentColor 17%, transparent)" },
   },
   "button-background-color-active": {
     forcedColors: "SelectedItemText",
     brand: { default: "color-mix(in srgb, currentColor 21%, transparent)" },
-    platform: {
-      default:
-        "var(--button-active-bgcolor, color-mix(in srgb, currentColor 30%, transparent))",
-    },
+    platform: { default: "color-mix(in srgb, currentColor 30%, transparent)" },
   },
   "button-background-color-disabled": {
     default: "var(--button-background-color)",