[core-v2.8.4-alpha.2, react-v2.3.4-alpha.2, vue-v2.2.4-alpha.2] : Enhancement - Improved theme nomenclature (#1202)

* Starting
* Added more variables to AC but after speaking with Gustavo am thinking of a different approach
* Added variables for Maximized
* Added and cleanedup variables for notify
* Added docs around changes
* Config created for styling
* Added styling abstract to root of internal demo
* Notes about containerElement usage
* Bump packages that use core
* Fix spacing issues
* Added background color
* Added theme selector
* Updates to color
* Add styling output
* Place styling config visible at top level
* Image drop working
* Added backdrop toggle
* update display and add notifications to test area
* Set iframe to window location
* Yarn it
* Refine mapping
* Update packages/core/README.md

Author: Adamj1232

packages/core/README.md

@@ -115,7 +115,9 @@ export type AccountCenter = {
   position?: AccountCenterPosition // default: 'topRight'
   expanded?: boolean // default: true
   minimal?: boolean // enabled by default for mobile
-  containerElement?: string // defines the DOM container element for svelte to attach
+  containerElement?: string // defines the DOM container element for svelte to attach 
+  // **NOTE: containerElement must be a DOM element with a styleSheet property attached.
+  // This property can normally be omitted from the config and allowed to default to document.body
 }
 
 export type AccountCenterOptions = {
@@ -839,6 +841,23 @@ The Onboard styles can customized via [CSS variables](https://developer.mozilla.
   --account-center-app-btn-background
   --account-center-app-btn-font-family
 
+  --account-center-border
+  --account-center-box-shadow
+  --account-center-border-radius
+  --account-center-chain-warning
+  --account-center-minimized-balance-color
+  --account-center-minimized-chain-select-background
+
+  --account-center-maximized-network-section-background
+  --account-center-maximized-network-text-color
+  --account-center-maximized-info-section-background-color
+  --account-center-maximized-upper-action-color
+  --account-center-maximized-upper-action-background-hover
+  --account-center-maximized-app-name-color
+  --account-center-maximized-app-info-color
+
+  --account-center-micro-background
+
   /* CUSTOMIZE SECTIONS OF THE CONNECT MODAL */
   --onboard-connect-content-width
   --onboard-connect-content-height
@@ -975,6 +994,17 @@ The Onboard styles can customized via [CSS variables](https://developer.mozilla.
   --notify-onboard-primary-100
   --notify-onboard-primary-400
   --notify-onboard-main-padding
+
+  --notify-onboard-z-index
+  --notify-onboard-background
+  --notify-onboard-close-icon-color
+  --notify-onboard-close-icon-hover
+  --notify-onboard-transaction-status-color
+  --notify-onboard-transaction-font-size
+  --notify-onboard-hash-time-font-size
+  --notify-onboard-hash-time-font-line-height
+  --notify-onboard-address-hash-color
+  --notify-onboard-anchor-color
 }
 ```
 

packages/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@web3-onboard/core",
-  "version": "2.8.4-alpha.1",
+  "version": "2.8.4-alpha.2",
   "description": "Web3-Onboard makes it simple to connect Ethereum hardware and software wallets to your dapp. Features standardized spec compliant web3 providers for all supported wallets, framework agnostic modern javascript UI with code splitting, CSS customization, multi-chain and multi-account support, reactive wallet state subscriptions and real-time transaction state change notifications.",
   "keywords": [
     "Ethereum",

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

@@ -54,7 +54,10 @@
       --account-center-maximized-upper-background,
       var(--onboard-gray-600, var(--gray-600))
     );
-    border-radius: var(--onboard-border-radius-3, var(--border-radius-3));
+    border-radius: var(
+      --account-center-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));
     padding: 0 1px 1px 1px;
@@ -63,7 +66,10 @@
 
   .wallets-section {
     width: 100%;
-    border-radius: var(--onboard-border-radius-3, var(--border-radius-3));
+    border-radius: var(
+      --account-center-border-radius,
+      var(--onboard-border-radius-3, var(--border-radius-3))
+    );
   }
 
   .p5 {
@@ -76,7 +82,10 @@
   }
 
   .actions {
-    color: var(--onboard-primary-400, var(--primary-400));
+    color: var(
+      --account-center-maximized-upper-action-color,
+      var(--onboard-primary-400, var(--primary-400))
+    );
     padding-left: 2px;
   }
 
@@ -88,7 +97,7 @@
 
   .action-container:hover {
     background-color: var(
-      --account-center-maximized-action-background-hover,
+      --account-center-maximized-upper-action-background-hover,
       rgba(146, 155, 237, 0.2)
     );
   }
@@ -112,7 +121,10 @@
   }
 
   .background-blue {
-    background: var(--onboard-primary-100, var(--primary-100));
+    background: var(
+      --account-center-maximized-network-section-background,
+      var(--onboard-primary-100, var(--primary-100))
+    );
   }
 
   .background-gray {
@@ -124,10 +136,16 @@
   }
 
   .network-container {
-    border-radius: var(--onboard-border-radius-3, var(--border-radius-3));
+    border-radius: var(
+      --account-center-border-radius,
+      var(--onboard-border-radius-3, var(--border-radius-3))
+    );
     color: var(
-      --account-center-maximized-network-section,
-      var(--onboard-gray-500, var(--gray-500))
+      --account-center-maximized-network-text-color,
+      var(
+        --account-center-maximized-network-section,
+        var(--onboard-gray-500, var(--gray-500))
+      )
     );
   }
 
@@ -147,36 +165,54 @@
 
   .app-info-container {
     background: var(
-      --account-center-maximized-app-info-section,
-      var(--onboard-white, var(--white))
+      --account-center-maximized-info-section-background-color,
+      var(
+        --account-center-maximized-info-section,
+        var(--onboard-white, var(--white))
+      )
+    );
+    border-radius: var(
+      --account-center-border-radius,
+      var(--onboard-border-radius-3, var(--border-radius-3))
     );
-    border-radius: 16px;
     padding: 12px;
   }
 
   .app-name {
     font-weight: 700;
     font-size: var(--onboard-font-size-5, var(--font-size-5));
     line-height: var(--onboard-font-line-height-3, var(--font-line-height-3));
-    color: var(--onboard-gray-600, var(--gray-600));
+    color: var(
+      --account-center-maximized-app-name-color,
+      var(--onboard-gray-600, var(--gray-600))
+    );
     margin-bottom: var(--onboard-spacing-5, var(--spacing-5));
     margin-top: 0;
   }
 
   .app-description {
     font-size: var(--onboard-font-size-7, var(--font-size-7));
     line-height: var(--onboard-font-line-height-3, var(--font-line-height-3));
-    color: var(--onboard-gray-500, var(--gray-500));
+    color: var(
+      --account-center-maximized-app-info-color,
+      var(--onboard-gray-500, var(--gray-500))
+    );
     margin: 0;
   }
 
   .app-info {
     font-size: var(--onboard-font-size-7, var(--font-size-7));
     line-height: var(--onboard-font-line-height-3, var(--font-line-height-3));
-    color: var(--onboard-gray-500, var(--gray-500));
+    color: var(
+      --account-center-maximized-app-info-color,
+      var(--onboard-gray-500, var(--gray-500))
+    );
   }
   .app-info-heading {
-    color: var(--onboard-gray-600, var(--gray-600));
+    color: var(
+      --account-center-maximized-app-info-color,
+      var(--onboard-gray-600, var(--gray-600))
+    );
     font-weight: 700;
     margin-top: var(--onboard-spacing-5, var(--spacing-5));
     margin-bottom: var(--onboard-spacing-7, var(--spacing-7));

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

@@ -17,15 +17,25 @@
 
 <style>
   .minimized {
-    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));
+    background: var(
+      --account-center-micro-background,
+      var(--onboard-white, var(--white))
+    );
+    border: 1px solid
+      var(--acount-center-border, var(--onboard-gray-100, var(--gray-100)));
+    box-shadow: var(
+      --account-center-box-shadow,
+      var(--onboard-shadow-3, var(--shadow-3))
+    );
     width: 80px;
     pointer-events: auto;
   }
 
   .radius {
-    border-radius: var(--onboard-border-radius-3, var(--border-radius-3));
+    border-radius: var(
+      --account-center-border-radius,
+      var(--onboard-border-radius-3, var(--border-radius-3))
+    );
   }
 
   .drop-shadow {

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

@@ -62,14 +62,21 @@
       --account-center-minimized-background,
       var(--onboard-white, var(--white))
     );
-    border: 1px solid var(--onboard-gray-100, var(--gray-100));
+    border: 1px solid
+      var(--account-center-border, var(--onboard-gray-100, var(--gray-100)));
     width: 100%;
-    box-shadow: var(--onboard-shadow-3, var(--shadow-3));
+    box-shadow: var(
+      --account-center-box-shadow,
+      var(--onboard-shadow-3, var(--shadow-3))
+    );
     pointer-events: auto;
   }
 
   .radius {
-    border-radius: var(--onboard-border-radius-3, var(--border-radius-3));
+    border-radius: var(
+      --account-center-border-radius,
+      var(--onboard-border-radius-3, var(--border-radius-3))
+    );
   }
 
   .padding-5 {
@@ -89,7 +96,10 @@
   .balance {
     font-weight: 400;
     line-height: var(--onboard-font-line-height-2, var(--font-line-height-2));
-    color: var(--onboard-gray-400, var(--gray-400));
+    color: var(
+      --account-center-minimized-balance-color,
+      var(--onboard-gray-400, var(--gray-400))
+    );
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
@@ -118,7 +128,10 @@
   }
 
   .color-yellow {
-    color: var(--onboard-warning-500, var(--warning-500));
+    color: var(
+      --account-center-chain-warning,
+      var(--onboard-warning-500, var(--warning-500))
+    );
   }
 
   .color-white {
@@ -184,11 +197,15 @@
       <div
         on:click|stopPropagation
         class="container shadow-1 flex items-center"
-        style={`border-color: ${
-          validAppChain ? '#D0D4F7' : '#FFAF00'
-        }; background-color: var(--account-center-minimized-chain-select-background, var(${
-          validAppChain ? '--primary-100' : '--warning-100'
-        }))`}
+        style={`border-color: var(${
+          validAppChain
+            ? '--onboard-primary-200, var(--primary-200)'
+            : '--onboard-warning-500, var(--warning-500)'
+        }); background-color: var(${
+          validAppChain
+            ? '--account-center-minimized-chain-select-background, var(--primary-100)'
+            : '--account-center-minimized-chain-select-background-warning, var(--warning-100)'
+        })`}
       >
         <div class="flex items-center">
           <div
@@ -200,7 +217,7 @@
                 ? validAppChain.color ||
                   (defaultChainStyles && defaultChainStyles.color) ||
                   unrecognizedChainStyle.color
-                : '#FFE7B3'
+                : 'var(--onboard-warning-200, var(--warning-200))'
             };`}
           >
             {@html validAppChain

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

@@ -70,18 +70,21 @@
   }
 
   .container:hover {
-    background: var(
-      --account-center-maximized-account-section-background-hover,
-      var(--onboard-gray-500, var(--gray-500))
-    );
+    background: var(--onboard-gray-500, var(--gray-500));
   }
 
   .container:hover > div > span.balance {
-    color: var(--onboard-gray-100, var(--gray-100));
+    color: var(
+      --account-center-maximized-balance-color,
+      var(--onboard-gray-100, var(--gray-100))
+    );
   }
 
   .container.primary:hover {
-    background: var(--onboard-gray-700, var(--gray-700));
+    background: var(
+      --account-center-maximized-account-section-background-hover,
+      var(--onboard-gray-700, var(--gray-700))
+    );
   }
 
   .address-ens {

packages/core/src/views/notify/Index.svelte

@@ -70,7 +70,7 @@
     overflow: visible;
     scrollbar-width: none;
     box-sizing: border-box;
-    z-index: 300;
+    z-index: var(--notify-onboard-z-index, 300);
     font-family: var(
       --notify-onboard-font-family-normal,
       var(--onboard-font-family-normal, var(--font-family-normal))

packages/core/src/views/notify/Notification.svelte

@@ -68,7 +68,7 @@
     width: 100%;
     min-height: 56px;
     background: var(
-      --notify-onboard-gray-600,
+      --notify-onboard-background,
       var(--onboard-gray-600, var(--gray-600))
     );
     border-radius: var(
@@ -117,21 +117,21 @@
 
   .notify-close-btn > .close-icon {
     color: var(
-      --notify-onboard-gray-300,
+      --notify-onboard-close-icon-color,
       var(--onboard-gray-300, var(--gray-300))
     );
   }
 
   .notify-close-btn:hover > .close-icon {
     color: var(
-      --notify-onboard-gray-100,
+      --notify-onboard-close-icon-hover,
       var(--onboard-gray-100, var(--gray-100))
     );
   }
 
   .transaction-status {
     color: var(
-      --notify-onboard-primary-100,
+      --notify-onboard-transaction-status-color,
       var(--onboard-primary-100, var(--primary-100))
     );
     line-height: 14px;