refactor/theme variables and v4 ui updates

apps/gallery/components/gallery-placeholder/styles.ts

@@ -35,7 +35,7 @@ export default css`
   }
 
   .placeholder-bg-color-blue {
-    background-color: #47a1ff;
+    background-color: #667dff;
   }
 
   .placeholder-margin {

apps/gallery/stories/composites/wui-button.stories.ts

@@ -10,8 +10,8 @@ type Component = Meta<WuiButton & { iconLeft?: IconType; iconRight?: IconType }>
 export default {
   title: 'Composites/wui-button',
   args: {
-    size: 'md',
-    variant: 'fill',
+    size: 'lg',
+    variant: 'main',
     disabled: false,
     fullWidth: false,
     iconLeft: undefined,
@@ -20,16 +20,13 @@ export default {
   },
   argTypes: {
     size: {
-      options: ['xs', 'sm', 'md', 'lg'],
+      options: ['lg', 'md'],
       control: { type: 'select' }
     },
     variant: {
       options: buttonOptions,
       control: { type: 'select' }
     },
-    fullWidth: {
-      control: { type: 'boolean' }
-    },
     disabled: {
       control: { type: 'boolean' }
     },

apps/gallery/stories/composites/wui-chip-button.stories.ts

@@ -2,22 +2,27 @@ import type { Meta } from '@storybook/web-components'
 import '@web3modal/ui/src/composites/wui-chip-button'
 import type { WuiChipButton } from '@web3modal/ui/src/composites/wui-chip-button'
 import { html } from 'lit'
-import { chipOptions, iconOptions, walletImagesOptions } from '../../utils/PresetUtils'
+import { chipButtonVariants, iconOptions, walletImagesOptions } from '../../utils/PresetUtils'
 
 type Component = Meta<WuiChipButton>
 
 export default {
   title: 'Composites/wui-chip-button',
   args: {
-    variant: 'fill',
+    variant: 'main',
+    size: 'md',
     disabled: false,
     icon: 'externalLink',
     imageSrc: walletImagesOptions[3]?.src,
     text: 'dianeyes.walletconnect.eth'
   },
   argTypes: {
     variant: {
-      options: chipOptions,
+      options: chipButtonVariants,
+      control: { type: 'select' }
+    },
+    size: {
+      options: ['sm', 'md'],
       control: { type: 'select' }
     },
     icon: {
@@ -35,6 +40,7 @@ export const Default: Component = {
     html`<wui-chip-button
       icon=${args.icon}
       text=${args.text}
+      size=${args.size}
       variant=${args.variant}
       ?disabled=${args.disabled}
       .imageSrc=${args.imageSrc}

apps/gallery/stories/composites/wui-chip.stories.ts

@@ -3,7 +3,7 @@ import '@web3modal/ui/src/composites/wui-chip'
 import type { WuiChip } from '@web3modal/ui/src/composites/wui-chip'
 import { html } from 'lit'
 import {
-  chipOptions,
+  chipVariants,
   externalLink,
   iconOptions,
   walletImagesOptions
@@ -22,7 +22,7 @@ export default {
   },
   argTypes: {
     variant: {
-      options: chipOptions,
+      options: chipVariants,
       control: { type: 'select' }
     },
     icon: {

apps/gallery/stories/theme/Colors.mdx

@@ -5,6 +5,15 @@ import { Meta, ColorPalette, Title, ColorItem } from '@storybook/blocks'
 <Title>Dark</Title>
 
 <ColorPalette>
+  <ColorItem
+    title="Accent"
+    subtitle="80 | 90 | 100"
+    colors={{
+      'wui-accent-080': 'hsla(231, 92%, 74%, 1)',
+      'wui-accent-090': 'hsla(231, 97%, 72%, 1)',
+      'wui-accent-100': 'hsla(231, 100%, 70%, 1)'
+    }}
+  />
   <ColorItem
     title="Blue"
     subtitle="80 | 90 | 100"
@@ -89,12 +98,12 @@ import { Meta, ColorPalette, Title, ColorItem } from '@storybook/blocks'
 
 <ColorPalette>
   <ColorItem
-    title="Blue"
+    title="Accent"
     subtitle="80 | 90 | 100"
     colors={{
-      'wui-color-blue-80': '#2978CC',
-      'wui-color-blue-90': '#2D7DD2',
-      'wui-color-blue-100': '#3396FF'
+      'wui-accent-080': 'hsla(230, 59%, 55%, 1)',
+      'wui-accent-090': 'hsla(231, 76%, 61%, 1)',
+      'wui-accent-100': 'hsla(230, 100%, 67%, 1)'
     }}
   />
   <ColorItem

apps/gallery/utils/PresetUtils.ts

@@ -2,8 +2,9 @@ import type {
   AccountEntryType,
   BackgroundType,
   BorderRadiusType,
-  ButtonType,
+  ButtonVariant,
   CardSelectType,
+  ChipButtonVariant,
   ChipType,
   ColorType,
   FlexAlignItemsType,
@@ -253,12 +254,14 @@ export const logoOptions: LogoType[] = [
   'google',
   'telegram',
   'twitch',
-  'twitter'
+  'x'
 ]
 
 export const placementOptions: PlacementType[] = ['top', 'right', 'bottom', 'left']
 
-export const chipOptions: ChipType[] = [
+export const chipButtonVariants: ChipButtonVariant[] = ['main', 'accent', 'shade', 'gray', 'shade']
+
+export const chipVariants: ChipType[] = [
   'fill',
   'transparent',
   'shade',
@@ -267,7 +270,14 @@ export const chipOptions: ChipType[] = [
   'error'
 ]
 
-export const buttonOptions: ButtonType[] = ['fill', 'accent', 'shade', 'fullWidth', 'accentBg']
+export const buttonOptions: ButtonVariant[] = [
+  'main',
+  'accent',
+  'accent',
+  'accent-error',
+  'accent-success',
+  'neutral'
+]
 
 export const transactionTypeOptions: TransactionType[] = [
   'approve',

packages/common/src/utils/ThemeUtil.ts

@@ -20,13 +20,13 @@ export interface W3mThemeVariables {
 export function getW3mThemeVariables(themeVariables?: ThemeVariables, themeType?: ThemeType) {
   if (themeType === 'light') {
     return {
-      '--w3m-accent': themeVariables?.['--w3m-accent'] || '#5773ff',
+      '--w3m-accent': themeVariables?.['--w3m-accent'] || 'hsla(231, 100%, 70%, 1)',
       '--w3m-background': '#fff'
     }
   }
 
   return {
-    '--w3m-accent': themeVariables?.['--w3m-accent'] || '#667dff',
+    '--w3m-accent': themeVariables?.['--w3m-accent'] || 'hsla(230, 100%, 67%, 1)',
     '--w3m-background': '#121313'
   }
 }

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

@@ -78,8 +78,8 @@ export class W3mOnrampWidget extends LitElement {
             ${BUY_PRESET_AMOUNTS.map(
               amount =>
                 html`<wui-button
-                  variant=${this.paymentAmount === amount ? 'accentBg' : 'shade'}
-                  size="xs"
+                  variant=${this.paymentAmount === amount ? 'accent' : 'neutral'}
+                  size="md"
                   textVariant="paragraph-600"
                   fullWidth
                   @click=${() => this.selectPresetAmount(amount)}
@@ -99,7 +99,7 @@ export class W3mOnrampWidget extends LitElement {
     return this.connected
       ? html`<wui-button
           @click=${this.getQuotes.bind(this)}
-          variant="fill"
+          variant="main"
           fullWidth
           size="lg"
           borderRadius="xs"
@@ -108,7 +108,7 @@ export class W3mOnrampWidget extends LitElement {
         </wui-button>`
       : html`<wui-button
           @click=${this.openModal.bind(this)}
-          variant="accentBg"
+          variant="accent"
           fullWidth
           size="lg"
           borderRadius="xs"

packages/scaffold/src/partials/w3m-account-default-widget/index.ts

@@ -210,7 +210,7 @@ export class W3mAccountDefaultWidget extends LitElement {
     }
 
     return html`
-      <wui-button size="sm" variant="shade" @click=${this.onExplorer.bind(this)}>
+      <wui-button size="md" variant="neutral" @click=${this.onExplorer.bind(this)}>
         <wui-icon size="sm" color="inherit" slot="iconLeft" name="compass"></wui-icon>
         Block Explorer
         <wui-icon size="sm" color="inherit" slot="iconRight" name="externalLink"></wui-icon>

packages/scaffold/src/partials/w3m-account-default-widget/styles.ts

@@ -42,14 +42,14 @@ export default css`
     height: 48px;
     padding: var(--wui-spacing-xs);
     padding-right: var(--wui-spacing-s);
-    box-shadow: inset 0 0 0 1px var(--wui-gray-glass-002);
-    background-color: var(--wui-gray-glass-002);
+    box-shadow: inset 0 0 0 1px var(--wui-color-gray-glass-002);
+    background-color: var(--wui-color-gray-glass-002);
     border-radius: 24px;
     transaction: background-color 0.2s linear;
   }
 
   .account-button:hover {
-    background-color: var(--wui-gray-glass-005);
+    background-color: var(--wui-color-gray-glass-005);
   }
 
   .avatar-container {
@@ -59,7 +59,7 @@ export default css`
   wui-avatar.avatar {
     width: 32px;
     height: 32px;
-    box-shadow: 0 0 0 2px var(--wui-gray-glass-005);
+    box-shadow: 0 0 0 2px var(--wui-color-gray-glass-005);
   }
 
   wui-avatar.network-avatar {
@@ -69,7 +69,7 @@ export default css`
     left: 100%;
     top: 100%;
     transform: translate(-75%, -75%);
-    box-shadow: 0 0 0 2px var(--wui-gray-glass-005);
+    box-shadow: 0 0 0 2px var(--wui-color-gray-glass-005);
   }
 
   .account-links {
@@ -107,6 +107,6 @@ export default css`
   }
 
   .account-links wui-flex wui-icon svg path {
-    stroke: #47a1ff;
+    stroke: #667dff;
   }
 `

packages/scaffold/src/partials/w3m-activity-list/index.ts

@@ -193,7 +193,7 @@ export class W3mActivityList extends LitElement {
       gap="xl"
     >
       <wui-icon-box
-        backgroundColor="glass-005"
+        backgroundColor="gray-glass-005"
         background="gray"
         iconColor="fg-200"
         icon="wallet"

packages/scaffold/src/partials/w3m-connecting-header/index.ts

@@ -34,7 +34,7 @@ export class W3mConnectingHeader extends LitElement {
     const tabs = this.generateTabs()
 
     return html`
-      <wui-flex justifyContent="center" .padding=${['l', '0', '0', '0'] as const}>
+      <wui-flex justifyContent="center" .padding=${['0', '0', 'l', '0'] as const}>
         <wui-tabs
           ?disabled=${this.buffering}
           .tabs=${tabs}

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

@@ -29,7 +29,12 @@ export class W3mConnectingWcQrcode extends W3mConnectingWidget {
     this.onRenderProxy()
 
     return html`
-      <wui-flex padding="xl" flexDirection="column" gap="xl" alignItems="center">
+      <wui-flex
+        flexDirection="column"
+        alignItems="center"
+        .padding=${['0', 'xl', 'xl', 'xl']}
+        gap="xl"
+      >
         <wui-shimmer borderRadius="l" width="100%"> ${this.qrCodeTemplate()} </wui-shimmer>
 
         <wui-text variant="paragraph-500" color="fg-100">

packages/scaffold/src/partials/w3m-input-address/index.ts

@@ -47,8 +47,8 @@ export class W3mInputAddress extends LitElement {
         Type or
         <wui-button
           class="paste"
-          size="sm"
-          variant="shade"
+          size="md"
+          variant="neutral"
           iconLeft="copy"
           @click=${this.onPasteClick.bind(this)}
         >

packages/scaffold/src/partials/w3m-input-address/styles.ts

@@ -5,15 +5,15 @@ export default css`
     width: 100%;
     height: 100px;
     border-radius: var(--wui-border-radius-s);
-    border: 1px solid var(--wui-gray-glass-002);
-    background-color: var(--wui-gray-glass-002);
+    border: 1px solid var(--wui-color-gray-glass-002);
+    background-color: var(--wui-color-gray-glass-002);
     transition: background-color var(--wui-ease-out-power-1) var(--wui-duration-lg);
     will-change: background-color;
     position: relative;
   }
 
   :host(:hover) {
-    background-color: var(--wui-gray-glass-005);
+    background-color: var(--wui-color-gray-glass-005);
   }
 
   wui-flex {

packages/scaffold/src/partials/w3m-input-token/index.ts

@@ -48,13 +48,13 @@ export class W3mInputToken extends LitElement {
         text=${this.token.symbol}
         imageSrc=${this.token.iconUrl}
         @click=${this.handleSelectButtonClick.bind(this)}
-        >Select token</wui-token-button
-      >`
+      >
+      </wui-token-button>`
     }
 
     return html`<wui-button
       size="md"
-      variant="accentBg"
+      variant="accent"
       @click=${this.handleSelectButtonClick.bind(this)}
       >Select token</wui-button
     >`

packages/scaffold/src/partials/w3m-input-token/styles.ts

@@ -5,14 +5,14 @@ export default css`
     width: 100%;
     height: 100px;
     border-radius: var(--wui-border-radius-s);
-    border: 1px solid var(--wui-gray-glass-002);
-    background-color: var(--wui-gray-glass-002);
+    border: 1px solid var(--wui-color-gray-glass-002);
+    background-color: var(--wui-color-gray-glass-002);
     transition: background-color var(--wui-ease-out-power-1) var(--wui-duration-lg);
     will-change: background-color;
   }
 
   :host(:hover) {
-    background-color: var(--wui-gray-glass-005);
+    background-color: var(--wui-color-gray-glass-005);
   }
 
   wui-flex {

packages/scaffold/src/partials/w3m-legal-footer/styles.ts

@@ -2,7 +2,7 @@ import { css } from 'lit'
 
 export default css`
   wui-flex {
-    background-color: var(--wui-gray-glass-005);
+    background-color: var(--wui-color-gray-glass-005);
   }
 
   a {

packages/scaffold/src/partials/w3m-onramp-input/styles.ts

@@ -22,8 +22,8 @@ export default css`
       var(--wui-spacing-xs);
     min-width: 95px;
     border-radius: var(--FULL, 1000px);
-    border: 1px solid var(--wui-gray-glass-002);
-    background: var(--wui-gray-glass-002);
+    border: 1px solid var(--wui-color-gray-glass-002);
+    background: var(--wui-color-gray-glass-002);
     cursor: pointer;
   }
 

packages/scaffold/src/partials/w3m-onramp-providers-footer/styles.ts

@@ -2,7 +2,7 @@ import { css } from 'lit'
 
 export default css`
   wui-flex {
-    border-top: 1px solid var(--wui-gray-glass-005);
+    border-top: 1px solid var(--wui-color-gray-glass-005);
   }
 
   a {