[core-v2.2.6] : Enhancement - CSS variable add (#963)

* Add css variables for connect modal border radius, box-shadow & background, wallet buttons border radius & bow shadow
* Update styling for use with themes
* Refine css var naming
* Version bump for core

Author: Adamj1232

packages/core/README.md

@@ -487,8 +487,15 @@ The Onboard styles can customized via [CSS variables](https://developer.mozilla.
   --onboard-wallet-button-background-hover
   --onboard-wallet-button-color
   --onboard-wallet-button-border-color
+  --onboard-wallet-button-border-radius
+  --onboard-wallet-button-box-shadow
   --onboard-wallet-app-icon-border-color
 
+  /* CUSTOMIZE THE CONNECT MODAL */
+  --onboard-modal-border-radius
+  --onboard-modal-backdrop
+  --onboard-modal-box-shadow
+
   /* FONTS */
   --onboard-font-family-normal: Sofia Pro;
   --onboard-font-family-semibold: Sofia Pro Semibold;
@@ -510,6 +517,10 @@ The Onboard styles can customized via [CSS variables](https://developer.mozilla.
   --onboard-spacing-5: 0.5rem;
 
   /* SHADOWS */
+  --onboard-border-radius-1: 24px;
+
+  /* SHADOWS */
+  --onboard-shadow-0: none;
   --onboard-shadow-1: 0px 4px 12px rgba(0, 0, 0, 0.1);
   --onboard-shadow-2: inset 0px -1px 0px rgba(0, 0, 0, 0.1);
 

packages/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@web3-onboard/core",
-  "version": "2.2.5",
+  "version": "2.2.6",
   "scripts": {
     "build": "rollup -c",
     "dev": "rollup -c -w",

packages/core/src/index.ts

@@ -184,7 +184,11 @@ function mountApp() {
           --spacing-6: 0.25rem;
           --spacing-7: 0.125rem;
   
+          /* BORDER RADIUS */
+          --border-radius-1: 24px;  
+
           /* SHADOWS */
+          --shadow-0: none;
           --shadow-1: 0px 4px 12px rgba(0, 0, 0, 0.1);
           --shadow-2: inset 0px -1px 0px rgba(0, 0, 0, 0.1);
           --shadow-3: 0px 4px 16px rgba(179, 179, 179, 0.2);
@@ -195,6 +199,9 @@ function mountApp() {
           --modal-right: unset;
           --modal-bottom: unset;
           --modal-left: unset;
+          
+          /* MODAL STYLES */
+          --modal-backdrop: rgba(0, 0, 0, 0.6);
         }
       </style>
     `

packages/core/src/views/connect/Sidebar.svelte

@@ -20,7 +20,6 @@
 <style>
   .sidebar {
     padding: var(--onboard-spacing-3, var(--spacing-3));
-    border-radius: 24px 0 0 24px;
     background: var(
       --onboard-connect-sidebar-background,
       var(--onboard-gray-100, var(--gray-100))

packages/core/src/views/connect/WalletButton.svelte

@@ -45,10 +45,15 @@
   .name {
     margin-left: var(--onboard-spacing-4, var(--spacing-4));
   }
+
+  button.wallet-button-styling {
+    border-radius: var(--onboard-wallet-button-border-radius, var(--border-radius-1));
+    box-shadow: var(--onboard-wallet-button-box-shadow, var(--box-shadow-0));
+  }
 </style>
 
 <button
-  class="relative justify-start"
+  class="relative justify-start wallet-button-styling"
   class:connected
   in:fade
   on:click={onClick}

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

@@ -30,7 +30,7 @@
   .background {
     width: 100vw;
     height: 100vh;
-    background: rgba(0, 0, 0, 0.6);
+    background: var(--onboard-modal-backdrop, var(--modal-backdrop));
     pointer-events: all;
   }
 
@@ -47,11 +47,15 @@
 
   .modal-overflow {
     overflow: hidden;
-    border-radius: 24px;
+  }
+  
+  .modal-styling {
+    border-radius: var(--onboard-modal-border-radius, var(--border-radius-1));
+    box-shadow: var(--onboard-modal-box-shadow, var(--box-shadow-0));
   }
 
   .modal {
-    border-radius: 24px;
+    border-radius: var(--onboard-modal-border-radius, var(--border-radius-1));
     overflow-y: auto;
     background: white;
   }
@@ -78,7 +82,7 @@
   >
     <div class="flex modal-position absolute">
       <div on:click|stopPropagation class="flex relative max-height">
-        <div class="modal-overflow relative flex justify-center">
+        <div class="modal-overflow modal-styling relative flex justify-center">
           <div class="modal relative">
             <slot />
           </div>