Merge branch 'main' of github.com:WalletConnect/web3modal into releas…

…e/5.0.9
reown-com · Jul 29, 2024 · 8034d93 · 8034d93
2 parents aa8296d + c1ae0a6
commit 8034d93
Show file tree

Hide file tree

Showing 14 changed files with 116 additions and 78 deletions.
diff --git a/packages/scaffold-ui/src/partials/w3m-account-default-widget/styles.ts b/packages/scaffold-ui/src/partials/w3m-account-default-widget/styles.ts
@@ -97,8 +97,10 @@ export default css`
     border-radius: var(--XS, 16px);
     border: 1px solid var(--dark-accent-glass-010, rgba(71, 161, 255, 0.1));
     background: var(--dark-accent-glass-010, rgba(71, 161, 255, 0.1));
-    transition: background-color var(--wui-ease-out-power-1) var(--wui-duration-md);
-    will-change: background-color;
+    transition:
+      background-color var(--wui-ease-out-power-1) var(--wui-duration-md),
+      opacity var(--wui-ease-out-power-1) var(--wui-duration-md);
+    will-change: background-color, opacity;
   }
 
   .account-links wui-flex:hover {

diff --git a/packages/scaffold-ui/src/partials/w3m-connect-external-widget/index.ts b/packages/scaffold-ui/src/partials/w3m-connect-external-widget/index.ts
@@ -27,22 +27,20 @@ export class W3mConnectExternalWidget extends LitElement {
   // -- Render -------------------------------------------- //
   public override render() {
     const externalConnectors = this.connectors.filter(connector => connector.type === 'EXTERNAL')
+    const filteredOutCoinbaseConnectors = externalConnectors.filter(
+      connector => connector.id !== 'coinbaseWalletSDK'
+    )
 
-    if (!externalConnectors?.length) {
+    if (!filteredOutCoinbaseConnectors?.length) {
       this.style.cssText = `display: none`
 
       return null
     }
 
     return html`
       <wui-flex flexDirection="column" gap="xs">
-        ${externalConnectors.map(connector => {
-          // Coinbase connector is handled separately
-          if (connector.id === 'coinbaseWalletSDK') {
-            return null
-          }
-
-          return html`
+        ${filteredOutCoinbaseConnectors.map(
+          connector => html`
             <wui-list-wallet
               imageSrc=${ifDefined(AssetUtil.getConnectorImage(connector))}
               .installed=${true}
@@ -52,7 +50,7 @@ export class W3mConnectExternalWidget extends LitElement {
             >
             </wui-list-wallet>
           `
-        })}
+        )}
       </wui-flex>
     `
   }

diff --git a/packages/scaffold-ui/src/views/w3m-connect-view/index.ts b/packages/scaffold-ui/src/views/w3m-connect-view/index.ts
@@ -46,14 +46,14 @@ export class W3mConnectView extends LitElement {
         return html`
           <wui-flex flexDirection="column" gap="xs" .margin=${['xs', '0', '0', '0'] as const}>
             <w3m-connector-list></w3m-connector-list>
-            <wui-flex class="all-wallets" .margin=${['xs', '0', '0', '0'] as const}>
+            <wui-flex class="all-wallets">
               <w3m-all-wallets-widget></w3m-all-wallets-widget>
             </wui-flex>
           </wui-flex>
         `
       }
 
-      return html` <wui-list-button
+      return html`<wui-list-button
         @click=${this.onContinueWalletClick.bind(this)}
         text="Continue with a wallet"
       ></wui-list-button>`

diff --git a/packages/ui/src/composites/wui-button/styles.ts b/packages/ui/src/composites/wui-button/styles.ts
@@ -114,42 +114,58 @@ export default css`
   }
 
   /* -- Hover & Active states ----------------------------------------------------------- */
-  button[data-variant='main']:hover:enabled {
-    background-color: var(--wui-color-accent-090);
-  }
-
-  button[data-variant='main']:active:enabled {
-    background-color: var(--wui-color-accent-080);
-  }
-
-  button[data-variant='inverse']:hover:enabled {
-    background-color: var(--wui-color-inverse-100);
-  }
-
-  button[data-variant='accent']:hover:enabled {
-    background-color: var(--wui-color-accent-glass-010);
-  }
-
-  button[data-variant='accent-error']:hover:enabled {
-    background: var(--wui-color-error-glass-015);
-    color: var(--wui-color-error-100);
-  }
-
-  button[data-variant='accent-success']:hover:enabled {
-    background: var(--wui-color-success-glass-015);
-    color: var(--wui-color-success-100);
-  }
-
-  button[data-variant='neutral']:hover:enabled {
-    background: var(--wui-color-gray-glass-005);
-  }
-
-  button[data-size='lg'][data-icon-left='true'][data-icon-right='false'] {
-    padding-left: var(--wui-spacing-m);
-  }
-
-  button[data-size='lg'][data-icon-right='true'][data-icon-left='false'] {
-    padding-right: var(--wui-spacing-m);
+  @media (hover: hover) and (pointer: fine) {
+    button[data-variant='main']:hover:enabled {
+      background-color: var(--wui-color-accent-090);
+    }
+
+    button[data-variant='main']:active:enabled {
+      background-color: var(--wui-color-accent-080);
+    }
+
+    button[data-variant='accent']:hover:enabled {
+      background-color: var(--wui-color-accent-glass-015);
+    }
+
+    button[data-variant='accent']:active:enabled {
+      background-color: var(--wui-color-accent-glass-020);
+    }
+
+    button[data-variant='accent-error']:hover:enabled {
+      background: var(--wui-color-error-glass-020);
+      color: var(--wui-color-error-100);
+    }
+
+    button[data-variant='accent-error']:active:enabled {
+      background: var(--wui-color-error-glass-030);
+      color: var(--wui-color-error-100);
+    }
+
+    button[data-variant='accent-success']:hover:enabled {
+      background: var(--wui-color-success-glass-020);
+      color: var(--wui-color-success-100);
+    }
+
+    button[data-variant='accent-success']:active:enabled {
+      background: var(--wui-color-success-glass-030);
+      color: var(--wui-color-success-100);
+    }
+
+    button[data-variant='neutral']:hover:enabled {
+      background: var(--wui-color-gray-glass-002);
+    }
+
+    button[data-variant='neutral']:active:enabled {
+      background: var(--wui-color-gray-glass-005);
+    }
+
+    button[data-size='lg'][data-icon-left='true'][data-icon-right='false'] {
+      padding-left: var(--wui-spacing-m);
+    }
+
+    button[data-size='lg'][data-icon-right='true'][data-icon-left='false'] {
+      padding-right: var(--wui-spacing-m);
+    }
   }
 
   /* -- Disabled state --------------------------------------------------- */

diff --git a/packages/ui/src/composites/wui-card-select/styles.ts b/packages/ui/src/composites/wui-card-select/styles.ts
@@ -19,10 +19,6 @@ export default css`
     justify-content: center;
   }
 
-  button:hover:enabled {
-    background-color: var(--wui-color-gray-glass-005);
-  }
-
   button:disabled > wui-text {
     color: var(--wui-color-gray-glass-015);
   }

diff --git a/packages/ui/src/composites/wui-chip-button/styles.ts b/packages/ui/src/composites/wui-chip-button/styles.ts
@@ -84,6 +84,22 @@ export default css`
       background-color: var(--wui-color-accent-090);
     }
 
+    button[data-variant='main']:hover:enabled {
+      background-color: var(--wui-color-accent-090);
+    }
+
+    button[data-variant='main']:active:enabled {
+      background-color: var(--wui-color-accent-080);
+    }
+
+    button[data-variant='accent']:hover:enabled {
+      background-color: var(--wui-color-accent-glass-015);
+    }
+
+    button[data-variant='accent']:active:enabled {
+      background-color: var(--wui-color-accent-glass-020);
+    }
+
     button[data-variant='shade']:focus-visible,
     button[data-variant='gray']:focus-visible,
     button[data-variant='shade']:hover,

diff --git a/packages/ui/src/composites/wui-icon-link/styles.ts b/packages/ui/src/composites/wui-icon-link/styles.ts
@@ -7,10 +7,6 @@ export default css`
     padding: var(--local-padding);
   }
 
-  button:hover:enabled {
-    background-color: var(--wui-color-gray-glass-005);
-  }
-
   @media (max-width: 700px) {
     button {
       padding: var(--wui-spacing-s);

diff --git a/packages/ui/src/composites/wui-input-element/styles.ts b/packages/ui/src/composites/wui-input-element/styles.ts
@@ -21,13 +21,13 @@ export default css`
     border: 1px solid var(--wui-color-accent-100);
   }
 
-  button:active:enabled {
-    background-color: var(--wui-color-fg-225);
-  }
-
   @media (hover: hover) and (pointer: fine) {
     button:hover:enabled {
       background-color: var(--wui-color-fg-250);
     }
+
+    button:active:enabled {
+      background-color: var(--wui-color-fg-225);
+    }
   }
 `
diff --git a/packages/ui/src/composites/wui-list-item/styles.ts b/packages/ui/src/composites/wui-list-item/styles.ts
@@ -70,10 +70,6 @@ export default css`
     height: 14px;
   }
 
-  button:hover:enabled {
-    background-color: var(--wui-color-gray-glass-005);
-  }
-
   button:disabled {
     color: var(--wui-color-gray-glass-020);
   }

diff --git a/packages/ui/src/composites/wui-list-wallet/styles.ts b/packages/ui/src/composites/wui-list-wallet/styles.ts
@@ -15,10 +15,6 @@ export default css`
     flex: 1;
   }
 
-  button:hover:enabled {
-    background-color: var(--wui-color-gray-glass-005);
-  }
-
   button:disabled {
     background-color: var(--wui-color-gray-glass-015);
     color: var(--wui-color-gray-glass-015);

diff --git a/packages/ui/src/composites/wui-notice-card/styles.ts b/packages/ui/src/composites/wui-notice-card/styles.ts
@@ -13,11 +13,11 @@ export default css`
     padding-left: var(--wui-spacing-s);
     padding-right: var(--wui-spacing-2l);
     border-radius: var(--wui-border-radius-s);
-    background-color: var(--wui-color-accent-glass-015);
+    background-color: var(--wui-color-accent-glass-010);
   }
 
   button:hover {
-    background-color: var(--wui-color-accent-glass-010) !important;
+    background-color: var(--wui-color-accent-glass-015) !important;
   }
 
   button:active {

diff --git a/packages/ui/src/composites/wui-tabs/styles.ts b/packages/ui/src/composites/wui-tabs/styles.ts
@@ -98,11 +98,13 @@ export default css`
 
   button:hover:enabled > wui-icon,
   button:active:enabled > wui-icon {
+    transition: all var(--wui-ease-out-power-1) var(--wui-duration-lg);
     color: var(--wui-color-fg-125);
   }
 
   button:hover:enabled > wui-text,
   button:active:enabled > wui-text {
+    transition: all var(--wui-ease-out-power-1) var(--wui-duration-lg);
     color: var(--wui-color-fg-125);
   }
 

diff --git a/packages/ui/src/composites/wui-token-list-item/styles.ts b/packages/ui/src/composites/wui-token-list-item/styles.ts
@@ -17,11 +17,20 @@ export default css`
     background-color: transparent;
     border-radius: var(--wui-border-radius-xs);
     color: var(--wui-color-fg-250);
-    transition: background-color 0.2s linear;
+    transition:
+      background-color var(--wui-ease-out-power-1) var(--wui-duration-lg),
+      opacity var(--wui-ease-out-power-1) var(--wui-duration-lg);
+    will-change: background-color, opacity;
   }
 
-  :host > wui-flex:hover {
-    background-color: var(--wui-color-gray-glass-002);
+  @media (hover: hover) and (pointer: fine) {
+    :host > wui-flex:hover {
+      background-color: var(--wui-color-gray-glass-002);
+    }
+
+    :host > wui-flex:active {
+      background-color: var(--wui-color-gray-glass-005);
+    }
   }
 
   :host([disabled]) > wui-flex {

diff --git a/packages/ui/src/utils/ThemeUtil.ts b/packages/ui/src/utils/ThemeUtil.ts
@@ -623,10 +623,11 @@ export const elementStyles = css`
     align-items: center;
     position: relative;
     transition:
-      background-color var(--wui-ease-inout-power-1) var(--wui-duration-md),
-      color var(--wui-ease-inout-power-1) var(--wui-duration-md),
-      box-shadow var(--wui-ease-inout-power-1) var(--wui-duration-md);
-    will-change: background-color, color;
+      color var(--wui-duration-lg) var(--wui-ease-out-power-1),
+      background-color var(--wui-duration-lg) var(--wui-ease-out-power-1),
+      border var(--wui-duration-lg) var(--wui-ease-out-power-1),
+      box-shadow var(--wui-duration-lg) var(--wui-ease-out-power-1);
+    will-change: background-color, color, border, box-shadow;
     outline: none;
     border: none;
     column-gap: var(--wui-spacing-3xs);
@@ -643,6 +644,16 @@ export const elementStyles = css`
     filter: grayscale(1);
   }
 
+  @media (hover: hover) and (pointer: fine) {
+    button:hover:enabled {
+      background-color: var(--wui-color-gray-glass-005);
+    }
+
+    button:active:enabled {
+      background-color: var(--wui-color-gray-glass-010);
+    }
+  }
+
   button:disabled > wui-icon-box {
     opacity: 0.5;
   }