V 3/beta tweaks v3

apps/gallery/stories/components/wui-loading-thumbnail.stories.ts

@@ -6,9 +6,12 @@ import { html } from 'lit'
 type Component = Meta<WuiLoadingThumbnail>
 
 export default {
-  title: 'Components/wui-loading-thumbnail'
+  title: 'Components/wui-loading-thumbnail',
+  args: {
+    radius: 36
+  }
 } as Component
 
 export const Default: Component = {
-  render: () => html` <wui-loading-thumbnail></wui-loading-thumbnail>`
+  render: args => html` <wui-loading-thumbnail radius=${args.radius}></wui-loading-thumbnail>`
 }

apps/laboratory/src/components/Theming/BorderRadiusInput.tsx

@@ -0,0 +1,48 @@
+import {
+  Heading,
+  Slider,
+  SliderFilledTrack,
+  SliderMark,
+  SliderThumb,
+  SliderTrack
+} from '@chakra-ui/react'
+
+import { ThemeStore } from '../../utils/StoreUtil'
+import { useProxy } from 'valtio/utils'
+
+export default function BorderRadiusInput() {
+  const state = useProxy(ThemeStore.state)
+
+  return (
+    <>
+      <Heading size="sm" fontWeight="400" as="h2">
+        Border Radius
+      </Heading>
+      <Slider
+        min={0}
+        max={10}
+        value={parseInt(state.borderRadius.replace('px', ''), 10)}
+        onChange={val => {
+          ThemeStore.setBorderRadius(`${val}px`)
+        }}
+      >
+        <SliderMark
+          value={parseInt(state.borderRadius.replace('px', ''), 10)}
+          textAlign="center"
+          bg="blackAlpha.700"
+          color="white"
+          mt="3"
+          ml="-5"
+          borderRadius="base"
+          w="12"
+        >
+          {state.borderRadius}
+        </SliderMark>
+        <SliderTrack>
+          <SliderFilledTrack />
+        </SliderTrack>
+        <SliderThumb />
+      </Slider>
+    </>
+  )
+}

apps/laboratory/src/layout/Header.tsx

@@ -18,6 +18,7 @@ import {
 } from '@chakra-ui/react'
 import MixColorInput from '../components/Theming/MixColorInput'
 import AccentColorInput from '../components/Theming/AccentColorInput'
+import BorderRadiusInput from '../components/Theming/BorderRadiusInput'
 
 export default function Header() {
   const { colorMode, toggleColorMode } = useColorMode()
@@ -38,6 +39,9 @@ export default function Header() {
               <Flex gridGap="4" flexDirection="column">
                 <AccentColorInput />
               </Flex>
+              <Flex gridGap="4" flexDirection="column">
+                <BorderRadiusInput />
+              </Flex>
             </Flex>
           </DrawerBody>
         </DrawerContent>

apps/laboratory/src/utils/StoreUtil.ts

@@ -14,13 +14,15 @@ interface ThemeStoreState {
   mixColorStrength: number
   mixColor?: string
   accentColor?: string
+  borderRadius: string
   themeVariables: ThemeVariables
 }
 
 const state = proxy<ThemeStoreState>({
   mixColorStrength: 0,
   mixColor: undefined,
   accentColor: undefined,
+  borderRadius: '4px',
   themeVariables: {}
 })
 
@@ -42,6 +44,11 @@ export const ThemeStore = {
     modal.setThemeVariables({ '--w3m-accent': value })
   },
 
+  setBorderRadius(value: ThemeStoreState['borderRadius']) {
+    state.borderRadius = value
+    modal.setThemeVariables({ '--w3m-border-radius-master': value })
+  },
+
   setThemeVariables(value: ThemeStoreState['themeVariables']) {
     state.themeVariables = value
     modal.setThemeVariables(value)

packages/scaffold/src/modal/w3m-modal/index.ts

@@ -80,14 +80,20 @@ export class W3mModal extends LitElement {
   }
 
   private onScrollLock() {
+    const { body } = document
+    const { innerHeight: viewportHeight } = window
+    const scrollHeight = body?.scrollHeight
+
+    const scrollbarGutter = scrollHeight > viewportHeight ? 'scrollbar-gutter: stable;' : ''
+
     const styleTag = document.createElement('style')
     styleTag.dataset['w3m'] = SCROLL_LOCK
     styleTag.textContent = `
       html, body {
         touch-action: none;
         overflow: hidden;
         overscroll-behavior: contain;
-        scrollbar-gutter: stable;
+       ${scrollbarGutter}
       }
     `
     document.head.appendChild(styleTag)

packages/scaffold/src/partials/w3m-connecting-wc-qrcode/styles.ts

@@ -13,7 +13,7 @@ export default css`
   wui-shimmer {
     width: 100%;
     aspect-ratio: 1 / 1;
-    border-radius: var(--wui-border-radius-l) !important;
+    border-radius: clamp(0px, var(--wui-border-radius-l), 40px) !important;
   }
 
   wui-qr-code {

packages/scaffold/src/utils/w3m-connecting-widget/index.ts

@@ -3,7 +3,8 @@ import {
   ConnectionController,
   CoreHelperUtil,
   RouterController,
-  SnackController
+  SnackController,
+  ThemeController
 } from '@web3modal/core'
 import type { IconType } from '@web3modal/ui'
 import { LitElement, html } from 'lit'
@@ -116,7 +117,7 @@ export class W3mConnectingWidget extends LitElement {
         <wui-flex justifyContent="center" alignItems="center">
           <wui-wallet-image size="lg" imageSrc=${ifDefined(this.imageSrc)}></wui-wallet-image>
 
-          ${this.error ? null : html`<wui-loading-thumbnail></wui-loading-thumbnail>`}
+          ${this.error ? null : this.loaderTemplate()}
 
           <wui-icon-box
             backgroundColor="error-100"
@@ -179,6 +180,13 @@ export class W3mConnectingWidget extends LitElement {
     }
   }
 
+  private loaderTemplate() {
+    const borderRadiusMaster = ThemeController.state.themeVariables['--w3m-border-radius-master']
+    const radius = borderRadiusMaster ? parseInt(borderRadiusMaster.replace('px', ''), 10) : 4
+
+    return html`<wui-loading-thumbnail radius=${radius * 9}></wui-loading-thumbnail>`
+  }
+
   // -- Protected ----------------------------------------- //
   protected onCopyUri() {
     try {

packages/ui/src/assets/svg/all-wallets.ts

@@ -1,30 +1,8 @@
 import { svg } from 'lit'
 
-export const allWalletsSvg = svg`<svg fill="none" viewBox="0 0 40 40">
-  <g clip-path="url(#a)">
-    <mask
-      id="b"
-      width="40"
-      height="40"
-      x="0"
-      y="0"
-      maskUnits="userSpaceOnUse"
-      style="mask-type:luminance"
-    >
-      <path fill="#fff" d="M40 0H0v40h40V0Z" />
-    </mask>
-    <g mask="url(#b)">
-      <path
-				style="fill: var(--wui-color-accent-010);"
-        d="M0 16.6c0-6.17 0-9.25 1.31-11.55A10 10 0 0 1 5.05 1.3C7.35 0 10.43 0 16.6 0h6.8c6.17 0 9.25 0 11.55 1.31a10 10 0 0 1 3.74 3.74C40 7.35 40 10.43 40 16.6v6.8c0 6.17 0 9.25-1.31 11.55a10 10 0 0 1-3.74 3.74C32.65 40 29.57 40 23.4 40h-6.8c-6.17 0-9.25 0-11.55-1.31a10 10 0 0 1-3.74-3.74C0 32.65 0 29.57 0 23.4v-6.8Z"
-      />
-      <path
-				style="fill: var(--wui-color-accent-100);"
-        d="M18.2 14.6a3.6 3.6 0 1 1-7.2 0 3.6 3.6 0 0 1 7.2 0Zm10.8 0a3.6 3.6 0 1 1-7.2 0 3.6 3.6 0 0 1 7.2 0ZM18.2 25.4a3.6 3.6 0 1 1-7.2 0 3.6 3.6 0 0 1 7.2 0Zm10.8 0a3.6 3.6 0 1 1-7.2 0 3.6 3.6 0 0 1 7.2 0Z"
-      />
-    </g>
-  </g>
-  <defs>
-    <clipPath id="a"><path fill="#fff" d="M0 0h40v40H0z" /></clipPath>
-  </defs>
+export const allWalletsSvg = svg`<svg fill="none" viewBox="0 0 24 24">
+  <path
+    style="fill: var(--wui-color-accent-100);"
+    d="M10.2 6.6a3.6 3.6 0 1 1-7.2 0 3.6 3.6 0 0 1 7.2 0ZM21 6.6a3.6 3.6 0 1 1-7.2 0 3.6 3.6 0 0 1 7.2 0ZM10.2 17.4a3.6 3.6 0 1 1-7.2 0 3.6 3.6 0 0 1 7.2 0ZM21 17.4a3.6 3.6 0 1 1-7.2 0 3.6 3.6 0 0 1 7.2 0Z"
+  />
 </svg>`

packages/ui/src/components/wui-card/styles.ts

@@ -3,7 +3,7 @@ import { css } from 'lit'
 export default css`
   :host {
     display: block;
-    border-radius: var(--wui-border-radius-l);
+    border-radius: clamp(0px, var(--wui-border-radius-l), 44px);
     border: 1px solid var(--wui-overlay-005);
     background-color: var(--wui-color-bg-125);
     overflow: hidden;

packages/ui/src/components/wui-loading-thumbnail/index.ts

@@ -1,17 +1,39 @@
 import { html, LitElement } from 'lit'
-import { customElement } from 'lit/decorators.js'
+import { customElement, property } from 'lit/decorators.js'
 import { resetStyles } from '../../utils/ThemeUtil.js'
 import styles from './styles.js'
 
 @customElement('wui-loading-thumbnail')
 export class WuiLoadingThumbnail extends LitElement {
   public static override styles = [resetStyles, styles]
 
+  // -- State & Properties -------------------------------- //
+  @property({ type: Number }) public radius = 36
+
   // -- Render -------------------------------------------- //
   public override render() {
+    return this.svgLoaderTemplate()
+  }
+
+  private svgLoaderTemplate() {
+    const radius = this.radius > 50 ? 50 : this.radius
+    const standardValue = 36
+    const radiusFactor = standardValue - radius
+    const dashArrayStart = 116 + radiusFactor
+    const dashArrayEnd = 245 + radiusFactor
+    const dashOffset = 360 + radiusFactor * 1.75
+
     return html`
       <svg viewBox="0 0 110 110" width="110" height="110">
-        <rect x="2" y="2" width="106" height="106" rx="36" />
+        <rect
+          x="2"
+          y="2"
+          width="106"
+          height="106"
+          rx=${radius}
+          stroke-dasharray="${dashArrayStart} ${dashArrayEnd}"
+          stroke-dashoffset=${dashOffset}
+        />
       </svg>
     `
   }

packages/ui/src/components/wui-loading-thumbnail/styles.ts

@@ -17,8 +17,6 @@ export default css`
     fill: none;
     stroke: var(--wui-color-accent-100);
     stroke-width: 4px;
-    stroke-dasharray: 116, 245;
-    stroke-dashoffset: 360;
     stroke-linecap: round;
     animation: dash 1s linear infinite;
   }

packages/ui/src/components/wui-shimmer/index.ts

@@ -19,7 +19,7 @@ export class WuiShimmer extends LitElement {
     this.style.cssText = `
       width: ${this.width};
       height: ${this.height};
-      border-radius: ${`var(--wui-border-radius-${this.borderRadius})`};
+      border-radius: ${`clamp(0px,var(--wui-border-radius-${this.borderRadius}), 40px)`};
     `
 
     return html`<slot></slot>`

packages/ui/src/composites/wui-card-select-loader/styles.ts

@@ -9,7 +9,7 @@ export default css`
     row-gap: var(--wui-spacing-xs);
     padding: var(--wui-spacing-xs) 10px;
     background-color: var(--wui-overlay-002);
-    border-radius: var(--wui-border-radius-xs);
+    border-radius: clamp(0px, var(--wui-border-radius-xs), 20px);
     position: relative;
   }
 

packages/ui/src/composites/wui-card-select/styles.ts

@@ -7,7 +7,7 @@ export default css`
     row-gap: var(--wui-spacing-xs);
     padding: var(--wui-spacing-xs) var(--wui-spacing-0);
     background-color: var(--wui-overlay-002);
-    border-radius: var(--wui-border-radius-xs);
+    border-radius: clamp(0px, var(--wui-border-radius-xs), 20px);
   }
 
   button > wui-text {

packages/ui/src/composites/wui-qr-code/styles.ts

@@ -11,7 +11,7 @@ export default css`
   }
 
   :host([data-theme='dark']) {
-    border-radius: var(--wui-border-radius-l);
+    border-radius: clamp(0px, var(--wui-border-radius-l), 40px);
     background-color: var(--wui-color-inverse-100);
     box-shadow: 0 2px 5px var(--wui-color-inverse-000);
     padding: var(--wui-spacing-l);

packages/ui/src/composites/wui-wallet-image/index.ts

@@ -34,6 +34,10 @@ export class WuiWalletImage extends LitElement {
        --local-size: var(--wui-wallet-image-size-${this.size});
    `
 
+    if (this.walletIcon) {
+      this.dataset['walletIcon'] = this.walletIcon
+    }
+
     return html` ${this.templateVisual()}`
   }
 
@@ -43,7 +47,7 @@ export class WuiWalletImage extends LitElement {
       return html`<wui-image src=${this.imageSrc} alt=${this.name}></wui-image>`
     } else if (this.walletIcon) {
       return html`<wui-icon
-        data-parent-size="full"
+        data-parent-size="md"
         size="md"
         color="inherit"
         name=${this.walletIcon}

packages/ui/src/composites/wui-wallet-image/styles.ts

@@ -5,7 +5,7 @@ export default css`
     position: relative;
     border-radius: inherit;
     overflow: hidden;
-    background: var(--wui-overlay-002);
+    background-color: var(--wui-overlay-002);
     display: flex;
     justify-content: center;
     align-items: center;
@@ -30,6 +30,14 @@ export default css`
     border: 1px solid var(--wui-color-accent-010);
   }
 
+  :host([data-wallet-icon='allWallets']) {
+    background-color: var(--wui-all-wallets-bg-100);
+  }
+
+  :host([data-wallet-icon='allWallets'])::after {
+    border: 1px solid var(--wui-color-accent-010);
+  }
+
   wui-icon[data-parent-size='inherit'] {
     width: 75%;
     height: 75%;

packages/ui/src/utils/ThemeUtil.ts

@@ -173,6 +173,8 @@ function createRootStyles(themeVariables: ThemeVariables) {
       --wui-icon-box-bg-success-100: var(--wui-icon-box-bg-success-base-100);
       --wui-icon-box-bg-inverse-100: var(--wui-icon-box-bg-inverse-base-100);
 
+      --wui-all-wallets-bg-100: var(--wui-all-wallets-bg-base-100);
+
       --wui-avatar-border: var(--wui-avatar-border-base);
 
       --wui-box-shadow-blue: rgba(71, 161, 255, 0.16);
@@ -317,6 +319,12 @@ function createRootStyles(themeVariables: ThemeVariables) {
         var(--wui-icon-box-bg-inverse-base-100)
       );
 
+      --wui-all-wallets-bg-100: color-mix(
+        in srgb,
+        var(--w3m-color-mix) var(--w3m-color-mix-strength),
+        var(--wui-all-wallets-bg-base-100)
+      );
+
       --wui-avatar-border: color-mix(
         in srgb,
         var(--w3m-color-mix) var(--w3m-color-mix-strength),
@@ -367,6 +375,8 @@ function createRootStyles(themeVariables: ThemeVariables) {
       --wui-icon-box-bg-success-base-100: #1f3a28;
       --wui-icon-box-bg-inverse-base-100: #243240;
 
+      --wui-all-wallets-bg-base-100: #222b35;
+
       --wui-avatar-border-base: #252525;
 
       --wui-overlay-002: rgba(255, 255, 255, 0.02);
@@ -421,6 +431,8 @@ function createRootStyles(themeVariables: ThemeVariables) {
       --wui-icon-box-bg-success-base-100: #daf0e4;
       --wui-icon-box-bg-inverse-base-100: #dcecfc;
 
+      --wui-all-wallets-bg-base-100: #c1dfde;
+
       --wui-avatar-border-base: #f3f4f4;
 
       --wui-overlay-002: rgba(0, 0, 0, 0.02);