Core: Add --onboard-wallet-app-icon-background and --onboard-modal-background (#1120)

* Add --onboard-wallet-app-icon-background and --onboard-modal-background
* Bump core version
* Variable per background color

Author: ReflectiveChimp

packages/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@web3-onboard/core",
-  "version": "2.4.0-alpha.1",
+  "version": "2.4.0-alpha.2",
   "repository": "blocknative/web3-onboard",
   "scripts": {
     "build": "rollup -c",

packages/core/src/views/shared/Modal.svelte

@@ -89,7 +89,7 @@
   .modal {
     border-radius: var(--onboard-modal-border-radius, var(--border-radius-1));
     overflow-y: auto;
-    background: white;
+    background: var(--onboard-modal-background, white);
   }
 
   @media all and (max-width: 520px) {

packages/core/src/views/shared/WalletAppBadge.svelte

@@ -78,27 +78,27 @@
   }
 
   .background-gray {
-    background: var(--onboard-gray-500, var(--gray-500));
+    background: var(--onboard-wallet-app-icon-background-gray, var(--onboard-gray-500, var(--gray-500)));
   }
 
   .background-light-gray {
-    background: var(--onboard-gray-100, var(--gray-100));
+    background: var(--onboard-wallet-app-icon-background-light-gray, var(--onboard-gray-100, var(--gray-100)));
   }
 
   .background-light-blue {
-    background: var(--onboard-primary-100, var(--primary-100));
+    background: var(--onboard-wallet-app-icon-background-light-blue, var(--onboard-primary-100, var(--primary-100)));
   }
 
   .background-green {
-    background: var(--onboard-success-100, var(--success-100));
+    background: var(--onboard-wallet-app-icon-background-green, var(--onboard-success-100, var(--success-100)));
   }
 
   .background-white {
-    background: var(--onboard-white, var(--white));
+    background: var(--onboard-wallet-app-icon-background-white, var(--onboard-white, var(--white)));
   }
 
   .background-transparent {
-    background: transparent;
+    background: var(--onboard-wallet-app-icon-background-transparent, transparent);
   }
 
   @keyframes pulse {