[Coinbase, Common, Core, Injected-Wallets, Keepkey, Keystone, Ledger, React, Trezor, Vue] : Update - Convert background color to background (#1074)

* Convert background-color styling that are associated with variables to background for further flexibility
* Update package versions

Author: Adamj1232

packages/coinbase/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@web3-onboard/coinbase",
-  "version": "2.0.4",
+  "version": "2.0.5-alpha.1",
   "description": "Coinbase Wallet module for web3-onboard",
   "module": "dist/index.js",
   "browser": "dist/index.js",
@@ -21,6 +21,6 @@
   },
   "dependencies": {
     "@coinbase/wallet-sdk": "^3.0.5",
-    "@web3-onboard/common": "2.1.1"
+    "@web3-onboard/common": "2.1.2-alpha.2"
   }
 }

packages/common/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@web3-onboard/common",
-  "version": "2.1.2-alpha.1",
+  "version": "2.1.2-alpha.2",
   "scripts": {
     "build": "rollup -c",
     "dev": "rollup -c -w",

packages/common/src/elements/AddressTable.svelte

@@ -55,7 +55,7 @@
   }
 
   tbody tr:hover {
-    background-color: var(
+    background: var(
       --account-select-primary-100,
       var(--onboard-primary-100, var(--primary-100))
     );
@@ -70,7 +70,7 @@
 
   .selected-row,
   .selected-row:hover {
-    background-color: var(
+    background: var(
       --account-select-primary-500,
       var(--onboard-primary-500, var(--primary-500))
     );

packages/common/src/elements/TableHeader.svelte

@@ -71,7 +71,7 @@
   }
 
   input:disabled {
-    background-color: var(
+    background: var(
       --account-select-gray-100,
       var(--onboard-gray-100, var(--gray-100))
     );
@@ -80,7 +80,7 @@
   input[type='checkbox'] {
     -webkit-appearance: none;
     width: auto;
-    background-color: var(
+    background: var(
       --account-select-white,
       var(--onboard-white, var(--white))
     );
@@ -105,7 +105,7 @@
   }
 
   input[type='checkbox']:checked {
-    background-color: var(
+    background: var(
       --account-select-primary-500,
       var(--onboard-primary-500, var(--primary-500))
     );

packages/common/src/views/AccountSelect.svelte

@@ -243,7 +243,7 @@
   }
 
   select:disabled {
-    background-color: var(
+    background: var(
       --account-select-gray-100,
       var(--onboard-gray-100, var(--gray-100))
     );
@@ -397,7 +397,7 @@
     right: 0.2rem;
     width: 2.5rem;
     height: 2.5rem;
-    background-color: var(
+    background: var(
       --account-select-white,
       var(--onboard-white, var(--white))
     );

packages/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@web3-onboard/core",
-  "version": "2.2.13-alpha.2",
+  "version": "2.2.13-alpha.3",
   "scripts": {
     "build": "rollup -c",
     "dev": "rollup -c -w",
@@ -41,7 +41,7 @@
     "typescript": "^4.5.5"
   },
   "dependencies": {
-    "@web3-onboard/common": "^2.1.2-alpha.1",
+    "@web3-onboard/common": "^2.1.2-alpha.2",
     "bowser": "^2.11.0",
     "ethers": "5.5.3",
     "eventemitter3": "^4.0.7",

packages/core/src/views/Index.svelte

@@ -96,7 +96,7 @@
   :global(input[type='checkbox']) {
     -webkit-appearance: none;
     width: auto;
-    background-color: var(--onboard-white, var(--white));
+    background: var(--onboard-white, var(--white));
     outline: 1px solid var(--onboard-gray-300, var(--gray-300));
     border: none;
     padding: 0.5em;
@@ -116,7 +116,7 @@
   }
 
   :global(input[type='checkbox']:checked) {
-    background-color: var(
+    background: var(
       --onboard-checkbox-background,
       var(--onboard-primary-500, var(--primary-500))
     );
@@ -152,7 +152,7 @@
   }
 
   :global(input:disabled, textarea:disabled, select:disabled) {
-    background-color: var(--gray-100);
+    background: var(--gray-100);
   }
 
   :global(input::-moz-focus-inner) {
@@ -200,14 +200,14 @@
   :global(.button-neutral-solid) {
     width: 100%;
     border-radius: 8px;
-    background-color: var(--onboard-gray-500, var(--gray-500));
+    background: var(--onboard-gray-500, var(--gray-500));
     color: var(--onboard-white, var(--white));
     line-height: var(--onboard-font-line-height-3, var(--font-line-height-3));
   }
 
   :global(.button-neutral-solid-b) {
     width: 100%;
-    background-color: var(--onboard-gray-100, var(--gray-100));
+    background: var(--onboard-gray-100, var(--gray-100));
     color: var(--onboard-gray-500, var(--gray-500));
     line-height: var(--onboard-font-line-height-3, var(--font-line-height-3));
   }
@@ -217,10 +217,10 @@
   }
 
   :global(.button-neutral-solid:hover) {
-    background-color: var(--onboard-gray-700, var(--gray-700));
+    background: var(--onboard-gray-700, var(--gray-700));
   }
   :global(.button-neutral-solid-b:hover) {
-    background-color: var(--onboard-gray-200, var(--gray-200));
+    background: var(--onboard-gray-200, var(--gray-200));
   }
 
   :global(.button-neutral-solid:active) {
@@ -229,7 +229,7 @@
 
   :global(.button-neutral-solid-b:active) {
     color: var(--onboard-gray-600, var(--gray-600));
-    background-color: var(--onboard-gray-300, var(--gray-300));
+    background: var(--onboard-gray-300, var(--gray-300));
   }
 </style>
 

packages/core/src/views/account-center/DisconnectAllConfirm.svelte

@@ -20,7 +20,7 @@
   .icon-container {
     width: 3rem;
     height: 3rem;
-    background-color: var(--onboard-warning-100, var(--warning-100));
+    background: var(--onboard-warning-100, var(--warning-100));
     border-radius: 24px;
     padding: 12px;
     color: var(--onboard-warning-500, var(--warning-500));

packages/core/src/views/account-center/Maximized.svelte

@@ -50,7 +50,7 @@
 
 <style>
   .outer-container {
-    background-color: var(--onboard-gray-600, var(--gray-600));
+    background: var(--onboard-gray-600, var(--gray-600));
     border-radius: var(--onboard-border-radius-3, var(--border-radius-3));
     width: 100%;
     filter: drop-shadow(0px 4px 16px rgba(178, 178, 178, 0.2));
@@ -104,15 +104,15 @@
   }
 
   .background-blue {
-    background-color: var(--onboard-primary-100, var(--primary-100));
+    background: var(--onboard-primary-100, var(--primary-100));
   }
 
   .background-gray {
-    background-color: var(--onboard-gray-100, var(--gray-100));
+    background: var(--onboard-gray-100, var(--gray-100));
   }
 
   .background-yellow {
-    background-color: var(--onboard-warning-100, var(--warning-100));
+    background: var(--onboard-warning-100, var(--warning-100));
   }
 
   .network-container {

packages/core/src/views/account-center/Micro.svelte

@@ -17,7 +17,7 @@
 
 <style>
   .minimized {
-    background-color: var(--onboard-white, var(--white));
+    background: var(--onboard-white, var(--white));
     border: 1px solid var(--onboard-gray-100, var(--gray-100));
     box-shadow: var(--onboard-shadow-3, var(--shadow-3));
   }