From d8995f31c0d7b231a2ec5f057cd0fb5c16f5ed43 Mon Sep 17 00:00:00 2001
From: enesozturk <enesozturk.d@gmail.com>
Date: Wed, 15 May 2024 18:47:06 +0300
Subject: [PATCH 1/5] refactor: theme variable updates, primitive components,
 comp props

---
 .../components/gallery-placeholder/styles.ts  |   2 +-
 .../composites/wui-chip-button.stories.ts     |  12 +-
 .../stories/composites/wui-chip.stories.ts    |   4 +-
 apps/gallery/utils/PresetUtils.ts             |  18 +-
 packages/common/src/utils/ThemeUtil.ts        |   4 +-
 .../src/modal/w3m-onramp-widget/index.ts      |   4 +-
 .../w3m-account-default-widget/index.ts       |   2 +-
 .../w3m-account-default-widget/styles.ts      |  12 +-
 .../src/partials/w3m-activity-list/index.ts   |   2 +-
 .../partials/w3m-connecting-header/index.ts   |   2 +-
 .../w3m-connecting-wc-qrcode/index.ts         |   7 +-
 .../src/partials/w3m-input-address/index.ts   |   4 +-
 .../src/partials/w3m-input-address/styles.ts  |   6 +-
 .../src/partials/w3m-input-token/index.ts     |   6 +-
 .../src/partials/w3m-input-token/styles.ts    |   6 +-
 .../src/partials/w3m-legal-footer/styles.ts   |   2 +-
 .../src/partials/w3m-onramp-input/styles.ts   |   4 +-
 .../w3m-onramp-providers-footer/styles.ts     |   2 +-
 .../src/partials/w3m-swap-details/styles.ts   |   4 +-
 .../w3m-swap-input-skeleton/styles.ts         |   8 +-
 .../src/partials/w3m-swap-input/index.ts      |  24 +-
 .../src/partials/w3m-swap-input/styles.ts     |  35 +-
 .../src/partials/w3m-tooltip/styles.ts        |   2 +-
 .../w3m-wallet-send-details/styles.ts         |   8 +-
 .../src/utils/w3m-connecting-widget/index.ts  |   1 +
 .../src/utils/w3m-email-otp-widget/index.ts   |   2 +-
 .../views/w3m-buy-in-progress-view/styles.ts  |   2 +-
 .../src/views/w3m-connect-view/index.ts       |   2 +-
 .../src/views/w3m-connect-view/styles.ts      |   7 +-
 .../w3m-email-verify-device-view/index.ts     |   2 +-
 .../src/views/w3m-get-wallet-view/index.ts    |   2 +-
 .../views/w3m-network-switch-view/index.ts    |   3 +-
 .../views/w3m-onramp-activity-view/index.ts   |   2 +-
 .../w3m-onramp-fiat-select-view/index.ts      |   2 +-
 .../views/w3m-onramp-providers-view/index.ts  |   2 +-
 .../w3m-onramp-tokens-select-view/index.ts    |   2 +-
 .../src/views/w3m-swap-preview-view/index.ts  |   8 +-
 .../src/views/w3m-swap-preview-view/styles.ts |  18 +-
 .../w3m-swap-select-token-view/styles.ts      |   8 +-
 .../scaffold/src/views/w3m-swap-view/index.ts |   4 +-
 .../src/views/w3m-swap-view/styles.ts         |  12 +-
 .../w3m-update-email-wallet-view/index.ts     |   2 +-
 .../index.ts                                  |   2 +-
 .../views/w3m-wallet-receive-view/index.ts    |   7 +-
 .../w3m-wallet-send-preview-view/index.ts     |   6 +-
 .../src/views/w3m-wallet-send-view/index.ts   |   4 +-
 .../views/w3m-what-is-a-network-view/index.ts |   4 +-
 .../views/w3m-what-is-a-wallet-view/index.ts  |   2 +-
 .../views/w3m-connecting-siwe-view/index.ts   |   6 +-
 packages/ui/src/assets/svg/add.ts             |   2 +-
 packages/ui/src/components/wui-card/styles.ts |   2 +-
 .../components/wui-loading-spinner/index.ts   |   4 +-
 .../ui/src/components/wui-shimmer/styles.ts   |   2 +-
 .../composites/wui-account-button/styles.ts   |  18 +-
 .../wui-all-wallets-image/styles.ts           |   4 +-
 .../ui/src/composites/wui-avatar/styles.ts    |   6 +-
 .../ui/src/composites/wui-banner/styles.ts    |   2 +-
 .../ui/src/composites/wui-button/styles.ts    |  36 +-
 .../wui-card-select-loader/styles.ts          |   4 +-
 .../src/composites/wui-card-select/styles.ts  |  10 +-
 .../src/composites/wui-chip-button/index.ts   |  18 +-
 .../src/composites/wui-chip-button/styles.ts  | 182 +++-----
 packages/ui/src/composites/wui-chip/styles.ts |  42 +-
 .../wui-compatible-network/styles.ts          |   4 +-
 .../composites/wui-connect-button/styles.ts   |  14 +-
 .../ui/src/composites/wui-cta-button/index.ts |   6 +-
 .../src/composites/wui-cta-button/styles.ts   |   2 +-
 .../composites/wui-details-group/styles.ts    |   2 +-
 .../ui/src/composites/wui-icon-box/styles.ts  |   2 +-
 .../src/composites/wui-icon-button/styles.ts  |   8 +-
 .../ui/src/composites/wui-icon-link/styles.ts |   4 +
 .../composites/wui-input-numeric/styles.ts    |  12 +-
 .../src/composites/wui-input-text/styles.ts   |  23 +-
 packages/ui/src/composites/wui-link/styles.ts |   6 +-
 .../composites/wui-list-accordion/styles.ts   |   2 +-
 .../src/composites/wui-list-button/styles.ts  |   6 +-
 .../src/composites/wui-list-content/styles.ts |   2 +-
 .../composites/wui-list-description/styles.ts |   2 +-
 .../ui/src/composites/wui-list-item/styles.ts |  14 +-
 .../src/composites/wui-list-network/styles.ts |   8 +-
 .../src/composites/wui-list-social/styles.ts  |   6 +-
 .../src/composites/wui-list-token/styles.ts   |   2 +-
 .../wui-list-wallet-transaction/styles.ts     |   2 +-
 .../src/composites/wui-list-wallet/styles.ts  |   8 +-
 .../src/composites/wui-logo-select/styles.ts  |   2 +-
 packages/ui/src/composites/wui-logo/styles.ts |   2 +-
 .../composites/wui-network-button/styles.ts   |  16 +-
 .../src/composites/wui-network-image/index.ts |   2 +-
 .../composites/wui-network-image/styles.ts    |   4 +-
 .../src/composites/wui-notice-card/styles.ts  |   6 +-
 .../wui-onramp-activity-item/styles.ts        |   4 +-
 .../wui-onramp-provider-item/styles.ts        |  10 +-
 .../src/composites/wui-preview-item/styles.ts |   8 +-
 .../composites/wui-profile-button/styles.ts   |   6 +-
 .../ui/src/composites/wui-promo/styles.ts     |   8 +-
 .../ui/src/composites/wui-snackbar/styles.ts  |   2 +-
 packages/ui/src/composites/wui-tabs/styles.ts |   6 +-
 packages/ui/src/composites/wui-tag/styles.ts  |   4 +-
 .../src/composites/wui-token-button/styles.ts |   8 +-
 .../composites/wui-token-list-item/styles.ts  |   4 +-
 .../ui/src/composites/wui-tooltip/styles.ts   |   2 +-
 .../wui-transaction-visual/styles.ts          |   4 +-
 .../src/composites/wui-wallet-image/styles.ts |  10 +-
 .../ui/src/layout/wui-separator/styles.ts     |   2 +-
 packages/ui/src/utils/ThemeUtil.ts            | 441 ++++++++----------
 packages/ui/src/utils/TypeUtil.ts             |  16 +-
 106 files changed, 602 insertions(+), 724 deletions(-)

diff --git a/apps/gallery/components/gallery-placeholder/styles.ts b/apps/gallery/components/gallery-placeholder/styles.ts
index 1c1d9e2c40..7f353972e0 100644
--- a/apps/gallery/components/gallery-placeholder/styles.ts
+++ b/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 {
diff --git a/apps/gallery/stories/composites/wui-chip-button.stories.ts b/apps/gallery/stories/composites/wui-chip-button.stories.ts
index 9f9a6104b2..3f8def30c4 100644
--- a/apps/gallery/stories/composites/wui-chip-button.stories.ts
+++ b/apps/gallery/stories/composites/wui-chip-button.stories.ts
@@ -2,14 +2,15 @@ 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,
@@ -17,7 +18,11 @@ export default {
   },
   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}
diff --git a/apps/gallery/stories/composites/wui-chip.stories.ts b/apps/gallery/stories/composites/wui-chip.stories.ts
index 8e8e0fe3ca..fab8159468 100644
--- a/apps/gallery/stories/composites/wui-chip.stories.ts
+++ b/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: {
diff --git a/apps/gallery/utils/PresetUtils.ts b/apps/gallery/utils/PresetUtils.ts
index 61146892cc..67405b20f6 100644
--- a/apps/gallery/utils/PresetUtils.ts
+++ b/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',
diff --git a/packages/common/src/utils/ThemeUtil.ts b/packages/common/src/utils/ThemeUtil.ts
index ee8ff3ce75..5e61ef4811 100644
--- a/packages/common/src/utils/ThemeUtil.ts
+++ b/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'
   }
 }
diff --git a/packages/scaffold/src/modal/w3m-onramp-widget/index.ts b/packages/scaffold/src/modal/w3m-onramp-widget/index.ts
index 2a9c6f5bed..bdb05fa8db 100644
--- a/packages/scaffold/src/modal/w3m-onramp-widget/index.ts
+++ b/packages/scaffold/src/modal/w3m-onramp-widget/index.ts
@@ -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"
diff --git a/packages/scaffold/src/partials/w3m-account-default-widget/index.ts b/packages/scaffold/src/partials/w3m-account-default-widget/index.ts
index 8aa19bd1f2..2495576952 100644
--- a/packages/scaffold/src/partials/w3m-account-default-widget/index.ts
+++ b/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>
diff --git a/packages/scaffold/src/partials/w3m-account-default-widget/styles.ts b/packages/scaffold/src/partials/w3m-account-default-widget/styles.ts
index 0f2acd8636..01f82ea012 100644
--- a/packages/scaffold/src/partials/w3m-account-default-widget/styles.ts
+++ b/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;
   }
 `
diff --git a/packages/scaffold/src/partials/w3m-activity-list/index.ts b/packages/scaffold/src/partials/w3m-activity-list/index.ts
index 492b991dd8..15fb504edc 100644
--- a/packages/scaffold/src/partials/w3m-activity-list/index.ts
+++ b/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"
diff --git a/packages/scaffold/src/partials/w3m-connecting-header/index.ts b/packages/scaffold/src/partials/w3m-connecting-header/index.ts
index 392196dbc8..7034a8c4a2 100644
--- a/packages/scaffold/src/partials/w3m-connecting-header/index.ts
+++ b/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}
diff --git a/packages/scaffold/src/partials/w3m-connecting-wc-qrcode/index.ts b/packages/scaffold/src/partials/w3m-connecting-wc-qrcode/index.ts
index d964fe2acb..e7b39e89d8 100644
--- a/packages/scaffold/src/partials/w3m-connecting-wc-qrcode/index.ts
+++ b/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">
diff --git a/packages/scaffold/src/partials/w3m-input-address/index.ts b/packages/scaffold/src/partials/w3m-input-address/index.ts
index be60e27114..89a38ea074 100644
--- a/packages/scaffold/src/partials/w3m-input-address/index.ts
+++ b/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)}
         >
diff --git a/packages/scaffold/src/partials/w3m-input-address/styles.ts b/packages/scaffold/src/partials/w3m-input-address/styles.ts
index 097b124f56..5af92ba074 100644
--- a/packages/scaffold/src/partials/w3m-input-address/styles.ts
+++ b/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 {
diff --git a/packages/scaffold/src/partials/w3m-input-token/index.ts b/packages/scaffold/src/partials/w3m-input-token/index.ts
index 5d6e9b132d..545e8c2f45 100644
--- a/packages/scaffold/src/partials/w3m-input-token/index.ts
+++ b/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
     >`
diff --git a/packages/scaffold/src/partials/w3m-input-token/styles.ts b/packages/scaffold/src/partials/w3m-input-token/styles.ts
index 18c85ee7b5..e6a1e3a4c8 100644
--- a/packages/scaffold/src/partials/w3m-input-token/styles.ts
+++ b/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 {
diff --git a/packages/scaffold/src/partials/w3m-legal-footer/styles.ts b/packages/scaffold/src/partials/w3m-legal-footer/styles.ts
index 0b31a76345..ec9dbb8fa2 100644
--- a/packages/scaffold/src/partials/w3m-legal-footer/styles.ts
+++ b/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 {
diff --git a/packages/scaffold/src/partials/w3m-onramp-input/styles.ts b/packages/scaffold/src/partials/w3m-onramp-input/styles.ts
index 2c82ea0f5b..f13700de61 100644
--- a/packages/scaffold/src/partials/w3m-onramp-input/styles.ts
+++ b/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;
   }
 
diff --git a/packages/scaffold/src/partials/w3m-onramp-providers-footer/styles.ts b/packages/scaffold/src/partials/w3m-onramp-providers-footer/styles.ts
index 6d7e389fad..110e865eb5 100644
--- a/packages/scaffold/src/partials/w3m-onramp-providers-footer/styles.ts
+++ b/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 {
diff --git a/packages/scaffold/src/partials/w3m-swap-details/styles.ts b/packages/scaffold/src/partials/w3m-swap-details/styles.ts
index e901680780..1d11a36ffc 100644
--- a/packages/scaffold/src/partials/w3m-swap-details/styles.ts
+++ b/packages/scaffold/src/partials/w3m-swap-details/styles.ts
@@ -6,7 +6,7 @@ export default css`
   }
 
   .details-container > wui-flex {
-    background: var(--wui-gray-glass-002);
+    background: var(--wui-color-gray-glass-002);
     border-radius: var(--wui-border-radius-xxs);
     width: 100%;
   }
@@ -37,7 +37,7 @@ export default css`
     padding-left: var(--wui-spacing-s);
     padding-right: var(--wui-spacing-1xs);
     border-radius: calc(var(--wui-border-radius-5xs) + var(--wui-border-radius-4xs));
-    background: var(--wui-gray-glass-002);
+    background: var(--wui-color-gray-glass-002);
   }
 
   .details-row-title {
diff --git a/packages/scaffold/src/partials/w3m-swap-input-skeleton/styles.ts b/packages/scaffold/src/partials/w3m-swap-input-skeleton/styles.ts
index 8fa147d56b..af7f1106e8 100644
--- a/packages/scaffold/src/partials/w3m-swap-input-skeleton/styles.ts
+++ b/packages/scaffold/src/partials/w3m-swap-input-skeleton/styles.ts
@@ -13,8 +13,8 @@ export default css`
     border-radius: var(--wui-border-radius-s);
     padding: var(--wui-spacing-xl);
     padding-right: var(--wui-spacing-s);
-    background-color: var(--wui-gray-glass-002);
-    box-shadow: inset 0px 0px 0px 1px var(--wui-gray-glass-002);
+    background-color: var(--wui-color-gray-glass-002);
+    box-shadow: inset 0px 0px 0px 1px var(--wui-color-gray-glass-002);
     width: 100%;
     height: 100px;
     box-sizing: border-box;
@@ -38,10 +38,10 @@ export default css`
   }
 
   :host wui-flex .input_mask__border {
-    fill: var(--wui-gray-glass-020);
+    fill: var(--wui-color-gray-glass-020);
   }
 
   :host wui-flex .input_mask__background {
-    fill: var(--wui-gray-glass-002);
+    fill: var(--wui-color-gray-glass-002);
   }
 `
diff --git a/packages/scaffold/src/partials/w3m-swap-input/index.ts b/packages/scaffold/src/partials/w3m-swap-input/index.ts
index f63b089c7e..7a77b88bf8 100644
--- a/packages/scaffold/src/partials/w3m-swap-input/index.ts
+++ b/packages/scaffold/src/partials/w3m-swap-input/index.ts
@@ -126,24 +126,13 @@ export class W3mSwapInput extends LitElement {
       return html` <wui-button
         class="swap-token-button"
         size="md"
-        variant="accentBg"
+        variant="accent"
         @click=${this.onSelectToken.bind(this)}
       >
         Select token
       </wui-button>`
     }
 
-    const tokenElement = this.token.logoUri
-      ? html`<wui-image src=${this.token.logoUri}></wui-image>`
-      : html`
-          <wui-icon-box
-            size="sm"
-            iconColor="fg-200"
-            backgroundColor="fg-300"
-            icon="networkPlaceholder"
-          ></wui-icon-box>
-        `
-
     return html`
       <wui-flex
         class="swap-token-button"
@@ -152,15 +141,12 @@ export class W3mSwapInput extends LitElement {
         justifyContent="center"
         gap="xxs"
       >
-        <button
-          size="sm"
-          variant="shade"
-          class="token-select-button"
+        <wui-token-button
+          text=${this.token.symbol}
+          imageSrc=${this.token.logoUri}
           @click=${this.onSelectToken.bind(this)}
         >
-          ${tokenElement}
-          <wui-text variant="paragraph-600" color="fg-100">${this.token.symbol}</wui-text>
-        </button>
+        </wui-token-button>
         <wui-flex alignItems="center" gap="xxs"> ${this.tokenBalanceTemplate()} </wui-flex>
       </wui-flex>
     `
diff --git a/packages/scaffold/src/partials/w3m-swap-input/styles.ts b/packages/scaffold/src/partials/w3m-swap-input/styles.ts
index 6e50791a9c..0cc12db9ca 100644
--- a/packages/scaffold/src/partials/w3m-swap-input/styles.ts
+++ b/packages/scaffold/src/partials/w3m-swap-input/styles.ts
@@ -7,20 +7,20 @@ export default css`
     justify-content: space-between;
     align-items: center;
     border-radius: var(--wui-border-radius-s);
-    background-color: var(--wui-gray-glass-002);
+    background-color: var(--wui-color-gray-glass-002);
     padding: var(--wui-spacing-xl);
     padding-right: var(--wui-spacing-s);
     width: 100%;
     height: 100px;
     box-sizing: border-box;
-    box-shadow: inset 0px 0px 0px 1px var(--wui-gray-glass-002);
+    box-shadow: inset 0px 0px 0px 1px var(--wui-color-gray-glass-002);
     position: relative;
     transition: box-shadow var(--wui-ease-out-power-1) var(--wui-duration-lg);
     will-change: background-color;
   }
 
   :host wui-flex.focus {
-    box-shadow: inset 0px 0px 0px 1px var(--wui-gray-glass-005);
+    box-shadow: inset 0px 0px 0px 1px var(--wui-color-gray-glass-005);
   }
 
   :host > wui-flex .swap-input,
@@ -74,38 +74,11 @@ export default css`
     margin: 0;
   }
 
-  .token-select-button {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: var(--wui-spacing-xxs);
-    padding: var(--wui-spacing-xs);
-    padding-right: var(--wui-spacing-1xs);
-    height: 40px;
-    border: none;
-    border-radius: 80px;
-    background: var(--wui-gray-glass-002);
-    box-shadow: inset 0 0 0 1px var(--wui-gray-glass-002);
-    cursor: pointer;
-    transition: background 0.2s linear;
-  }
-
-  .token-select-button:hover {
-    background: var(--wui-gray-glass-005);
-  }
-
-  .token-select-button wui-image {
-    width: 24px;
-    height: 24px;
-    border-radius: var(--wui-border-radius-s);
-    box-shadow: inset 0 0 0 1px var(--wui-gray-glass-010);
-  }
-
   .max-value-button {
     background-color: transparent;
     border: none;
     cursor: pointer;
-    color: var(--wui-gray-glass-020);
+    color: var(--wui-color-gray-glass-020);
     padding-left: 0px;
   }
 
diff --git a/packages/scaffold/src/partials/w3m-tooltip/styles.ts b/packages/scaffold/src/partials/w3m-tooltip/styles.ts
index 3d528a8dab..a678629645 100644
--- a/packages/scaffold/src/partials/w3m-tooltip/styles.ts
+++ b/packages/scaffold/src/partials/w3m-tooltip/styles.ts
@@ -22,7 +22,7 @@ export default css`
 
   :host([data-variant='shade']) > wui-flex {
     background-color: var(--wui-color-bg-150);
-    border: 1px solid var(--wui-gray-glass-005);
+    border: 1px solid var(--wui-color-gray-glass-005);
   }
 
   :host([data-variant='shade']) > wui-flex > wui-text {
diff --git a/packages/scaffold/src/partials/w3m-wallet-send-details/styles.ts b/packages/scaffold/src/partials/w3m-wallet-send-details/styles.ts
index 89f8cbd9ba..2ed19f4cf6 100644
--- a/packages/scaffold/src/partials/w3m-wallet-send-details/styles.ts
+++ b/packages/scaffold/src/partials/w3m-wallet-send-details/styles.ts
@@ -7,7 +7,7 @@ export default css`
     flex-direction: column;
     gap: var(--wui-border-radius-1xs);
     border-radius: var(--wui-border-radius-s);
-    background: var(--wui-gray-glass-002);
+    background: var(--wui-color-gray-glass-002);
     padding: var(--wui-spacing-s) var(--wui-spacing-1xs) var(--wui-spacing-1xs)
       var(--wui-spacing-1xs);
   }
@@ -28,17 +28,17 @@ export default css`
 
   .network:focus-visible {
     border: 1px solid var(--wui-color-accent-100);
-    background-color: var(--wui-gray-glass-005);
+    background-color: var(--wui-color-gray-glass-005);
     -webkit-box-shadow: 0px 0px 0px 4px var(--wui-box-shadow-blue);
     -moz-box-shadow: 0px 0px 0px 4px var(--wui-box-shadow-blue);
     box-shadow: 0px 0px 0px 4px var(--wui-box-shadow-blue);
   }
 
   .network:hover {
-    background-color: var(--wui-gray-glass-005);
+    background-color: var(--wui-color-gray-glass-005);
   }
 
   .network:active {
-    background-color: var(--wui-gray-glass-010);
+    background-color: var(--wui-color-gray-glass-010);
   }
 `
diff --git a/packages/scaffold/src/utils/w3m-connecting-widget/index.ts b/packages/scaffold/src/utils/w3m-connecting-widget/index.ts
index a678533264..13ea2595e4 100644
--- a/packages/scaffold/src/utils/w3m-connecting-widget/index.ts
+++ b/packages/scaffold/src/utils/w3m-connecting-widget/index.ts
@@ -140,6 +140,7 @@ export class W3mConnectingWidget extends LitElement {
 
         <wui-button
           variant="accent"
+          size="md"
           ?disabled=${!this.error && this.buffering}
           @click=${this.onTryAgain.bind(this)}
         >
diff --git a/packages/scaffold/src/utils/w3m-email-otp-widget/index.ts b/packages/scaffold/src/utils/w3m-email-otp-widget/index.ts
index 5f5d7538c8..e4517d3c61 100644
--- a/packages/scaffold/src/utils/w3m-email-otp-widget/index.ts
+++ b/packages/scaffold/src/utils/w3m-email-otp-widget/index.ts
@@ -95,7 +95,7 @@ export class W3mEmailOtpWidget extends LitElement {
                 : null}
             </wui-flex>`}
 
-        <wui-flex alignItems="center">
+        <wui-flex alignItems="center" gap="xs">
           <wui-text variant="small-400" color="fg-200">${footerLabels.title}</wui-text>
           <wui-link @click=${this.onResendCode.bind(this)} .disabled=${isResendDisabled}>
             ${footerLabels.action}
diff --git a/packages/scaffold/src/views/w3m-buy-in-progress-view/styles.ts b/packages/scaffold/src/views/w3m-buy-in-progress-view/styles.ts
index fd500b4f64..9c3d9c1aa2 100644
--- a/packages/scaffold/src/views/w3m-buy-in-progress-view/styles.ts
+++ b/packages/scaffold/src/views/w3m-buy-in-progress-view/styles.ts
@@ -43,7 +43,7 @@ export default css`
     position: absolute;
     inset: 0;
     border-radius: calc(var(--wui-border-radius-5xs) * 9 - var(--wui-border-radius-xxs));
-    box-shadow: inset 0 0 0 1px var(--wui-gray-glass-005);
+    box-shadow: inset 0 0 0 1px var(--wui-color-gray-glass-005);
   }
 
   wui-icon-box {
diff --git a/packages/scaffold/src/views/w3m-connect-view/index.ts b/packages/scaffold/src/views/w3m-connect-view/index.ts
index 9b75d8d9f8..2bdde213ea 100644
--- a/packages/scaffold/src/views/w3m-connect-view/index.ts
+++ b/packages/scaffold/src/views/w3m-connect-view/index.ts
@@ -43,7 +43,7 @@ export class W3mConnectView extends LitElement {
   // -- Render -------------------------------------------- //
   public override render() {
     return html`
-      <wui-flex flexDirection="column" padding="s" gap="xs">
+      <wui-flex flexDirection="column" .padding=${['3xs', 's', 's', 's']} gap="xs">
         <w3m-email-login-widget></w3m-email-login-widget>
 
         ${this.walletConnectConnectorTemplate()} ${this.recentTemplate()}
diff --git a/packages/scaffold/src/views/w3m-connect-view/styles.ts b/packages/scaffold/src/views/w3m-connect-view/styles.ts
index bf8ed26f5b..4e6807dd4d 100644
--- a/packages/scaffold/src/views/w3m-connect-view/styles.ts
+++ b/packages/scaffold/src/views/w3m-connect-view/styles.ts
@@ -1,13 +1,14 @@
 import { css } from 'lit'
 
 export default css`
-  wui-flex {
+  :host > wui-flex {
     max-height: clamp(360px, 540px, 80vh);
-    overflow: scroll;
     scrollbar-width: none;
+    overflow-y: scroll;
+    overflow-x: hidden;
   }
 
-  wui-flex::-webkit-scrollbar {
+  :host > wui-flex::-webkit-scrollbar {
     display: none;
   }
 `
diff --git a/packages/scaffold/src/views/w3m-email-verify-device-view/index.ts b/packages/scaffold/src/views/w3m-email-verify-device-view/index.ts
index eb7b63e394..ba0ea6ba99 100644
--- a/packages/scaffold/src/views/w3m-email-verify-device-view/index.ts
+++ b/packages/scaffold/src/views/w3m-email-verify-device-view/index.ts
@@ -62,7 +62,7 @@ export class W3mEmailVerifyDeviceView extends LitElement {
             The code expires in 20 minutes
           </wui-text>
 
-          <wui-flex alignItems="center" id="w3m-resend-section">
+          <wui-flex alignItems="center" id="w3m-resend-section" gap="xs">
             <wui-text variant="small-400" color="fg-100" align="center">
               Didn't receive it?
             </wui-text>
diff --git a/packages/scaffold/src/views/w3m-get-wallet-view/index.ts b/packages/scaffold/src/views/w3m-get-wallet-view/index.ts
index 41221b60d4..d8cffb25cb 100644
--- a/packages/scaffold/src/views/w3m-get-wallet-view/index.ts
+++ b/packages/scaffold/src/views/w3m-get-wallet-view/index.ts
@@ -10,7 +10,7 @@ export class W3mGetWalletView extends LitElement {
   // -- Render -------------------------------------------- //
   public override render() {
     return html`
-      <wui-flex flexDirection="column" padding="s" gap="xs">
+      <wui-flex flexDirection="column" .padding=${['0', 's', 's', 's']} gap="xs">
         ${this.recommendedWalletsTemplate()}
         <wui-list-wallet
           name="Explore all"
diff --git a/packages/scaffold/src/views/w3m-network-switch-view/index.ts b/packages/scaffold/src/views/w3m-network-switch-view/index.ts
index b9958f9b6e..9bee16f361 100644
--- a/packages/scaffold/src/views/w3m-network-switch-view/index.ts
+++ b/packages/scaffold/src/views/w3m-network-switch-view/index.ts
@@ -83,7 +83,8 @@ export class W3mNetworkSwitchView extends LitElement {
 
         <wui-button
           data-retry=${this.showRetry}
-          variant="fill"
+          variant="accent"
+          size="md"
           .disabled=${!this.error}
           @click=${this.onSwitchNetwork.bind(this)}
         >
diff --git a/packages/scaffold/src/views/w3m-onramp-activity-view/index.ts b/packages/scaffold/src/views/w3m-onramp-activity-view/index.ts
index f4c99cbb1a..d9e145b6ac 100644
--- a/packages/scaffold/src/views/w3m-onramp-activity-view/index.ts
+++ b/packages/scaffold/src/views/w3m-onramp-activity-view/index.ts
@@ -56,7 +56,7 @@ export class W3mOnRampActivityView extends LitElement {
   // -- Render -------------------------------------------- //
   public override render() {
     return html`
-      <wui-flex flexDirection="column" padding="s" gap="xs">
+      <wui-flex flexDirection="column" .padding=${['0', 's', 's', 's']} gap="xs">
         ${this.loading ? this.templateLoading() : this.templateTransactionsByYear()}
       </wui-flex>
     `
diff --git a/packages/scaffold/src/views/w3m-onramp-fiat-select-view/index.ts b/packages/scaffold/src/views/w3m-onramp-fiat-select-view/index.ts
index f9401b084d..abc868cabe 100644
--- a/packages/scaffold/src/views/w3m-onramp-fiat-select-view/index.ts
+++ b/packages/scaffold/src/views/w3m-onramp-fiat-select-view/index.ts
@@ -38,7 +38,7 @@ export class W3mOnrampFiatSelectView extends LitElement {
   // -- Render -------------------------------------------- //
   public override render() {
     return html`
-      <wui-flex flexDirection="column" padding="s" gap="xs">
+      <wui-flex flexDirection="column" .padding=${['0', 's', 's', 's']} gap="xs">
         ${this.currenciesTemplate()}
       </wui-flex>
       <w3m-legal-footer></w3m-legal-footer>
diff --git a/packages/scaffold/src/views/w3m-onramp-providers-view/index.ts b/packages/scaffold/src/views/w3m-onramp-providers-view/index.ts
index 5a533b7957..56eeb881f2 100644
--- a/packages/scaffold/src/views/w3m-onramp-providers-view/index.ts
+++ b/packages/scaffold/src/views/w3m-onramp-providers-view/index.ts
@@ -50,7 +50,7 @@ export class W3mOnRampProvidersView extends LitElement {
   // -- Render -------------------------------------------- //
   public override render() {
     return html`
-      <wui-flex flexDirection="column" padding="s" gap="xs">
+      <wui-flex flexDirection="column" .padding=${['0', 's', 's', 's']} gap="xs">
         ${this.onRampProvidersTemplate()}
       </wui-flex>
       <w3m-onramp-providers-footer></w3m-onramp-providers-footer>
diff --git a/packages/scaffold/src/views/w3m-onramp-tokens-select-view/index.ts b/packages/scaffold/src/views/w3m-onramp-tokens-select-view/index.ts
index 654d7ec8d8..8717cbb9ef 100644
--- a/packages/scaffold/src/views/w3m-onramp-tokens-select-view/index.ts
+++ b/packages/scaffold/src/views/w3m-onramp-tokens-select-view/index.ts
@@ -38,7 +38,7 @@ export class W3mOnrampTokensView extends LitElement {
   // -- Render -------------------------------------------- //
   public override render() {
     return html`
-      <wui-flex flexDirection="column" padding="s" gap="xs">
+      <wui-flex flexDirection="column" .padding=${['0', 's', 's', 's']} gap="xs">
         ${this.currenciesTemplate()}
       </wui-flex>
       <w3m-legal-footer></w3m-legal-footer>
diff --git a/packages/scaffold/src/views/w3m-swap-preview-view/index.ts b/packages/scaffold/src/views/w3m-swap-preview-view/index.ts
index 4c4168db60..abbea335a9 100644
--- a/packages/scaffold/src/views/w3m-swap-preview-view/index.ts
+++ b/packages/scaffold/src/views/w3m-swap-preview-view/index.ts
@@ -88,7 +88,9 @@ export class W3mSwapPreviewView extends LitElement {
   // -- Render -------------------------------------------- //
   public override render() {
     return html`
-      <wui-flex flexDirection="column" padding="l" gap="s">${this.templateSwap()}</wui-flex>
+      <wui-flex flexDirection="column" .padding=${['0', 'l', 'l', 'l']} gap="s"
+        >${this.templateSwap()}</wui-flex
+      >
     `
   }
 
@@ -166,7 +168,7 @@ export class W3mSwapPreviewView extends LitElement {
             fullWidth
             size="lg"
             borderRadius="xs"
-            variant="shade"
+            variant="neutral"
             @click=${this.onCancelTransaction.bind(this)}
           >
             <wui-text variant="paragraph-600" color="fg-200">Cancel</wui-text>
@@ -176,7 +178,7 @@ export class W3mSwapPreviewView extends LitElement {
             fullWidth
             size="lg"
             borderRadius="xs"
-            variant="fill"
+            variant="main"
             ?disabled=${this.transactionLoading}
             @click=${this.onSendTransaction.bind(this)}
           >
diff --git a/packages/scaffold/src/views/w3m-swap-preview-view/styles.ts b/packages/scaffold/src/views/w3m-swap-preview-view/styles.ts
index 19ac4561cc..fe0005d8f0 100644
--- a/packages/scaffold/src/views/w3m-swap-preview-view/styles.ts
+++ b/packages/scaffold/src/views/w3m-swap-preview-view/styles.ts
@@ -19,7 +19,7 @@ export default css`
   .token-image {
     width: 24px;
     height: 24px;
-    box-shadow: 0 0 0 2px var(--wui-gray-glass-005);
+    box-shadow: 0 0 0 2px var(--wui-color-gray-glass-005);
     border-radius: 12px;
   }
 
@@ -36,14 +36,14 @@ export default css`
     height: 40px;
     border: none;
     border-radius: 80px;
-    background: var(--wui-gray-glass-002);
-    box-shadow: inset 0 0 0 1px var(--wui-gray-glass-002);
+    background: var(--wui-color-gray-glass-002);
+    box-shadow: inset 0 0 0 1px var(--wui-color-gray-glass-002);
     cursor: pointer;
     transition: background 0.2s linear;
   }
 
   .token-item:hover {
-    background: var(--wui-gray-glass-005);
+    background: var(--wui-color-gray-glass-005);
   }
 
   .preview-token-details-container {
@@ -54,7 +54,7 @@ export default css`
     width: 100%;
     padding: var(--wui-spacing-s) var(--wui-spacing-xl);
     border-radius: var(--wui-border-radius-xxs);
-    background: var(--wui-gray-glass-002);
+    background: var(--wui-color-gray-glass-002);
   }
 
   .action-buttons-container {
@@ -70,7 +70,7 @@ export default css`
     height: 48px;
     border-radius: var(--wui-border-radius-xs);
     border: none;
-    box-shadow: inset 0 0 0 1px var(--wui-gray-glass-010);
+    box-shadow: inset 0 0 0 1px var(--wui-color-gray-glass-010);
   }
 
   .action-buttons-container > button:disabled {
@@ -96,7 +96,7 @@ export default css`
   }
 
   .details-container > wui-flex {
-    background: var(--wui-gray-glass-002);
+    background: var(--wui-color-gray-glass-002);
     border-radius: var(--wui-border-radius-xxs);
     width: 100%;
   }
@@ -110,7 +110,7 @@ export default css`
   }
 
   .details-container > wui-flex > button:hover {
-    background: var(--wui-gray-glass-002);
+    background: var(--wui-color-gray-glass-002);
   }
 
   .details-content-container {
@@ -128,6 +128,6 @@ export default css`
     width: 100%;
     padding: var(--wui-spacing-s) var(--wui-spacing-xl);
     border-radius: var(--wui-border-radius-xxs);
-    background: var(--wui-gray-glass-002);
+    background: var(--wui-color-gray-glass-002);
   }
 `
diff --git a/packages/scaffold/src/views/w3m-swap-select-token-view/styles.ts b/packages/scaffold/src/views/w3m-swap-select-token-view/styles.ts
index a50bf60d6e..17d3f6027c 100644
--- a/packages/scaffold/src/views/w3m-swap-select-token-view/styles.ts
+++ b/packages/scaffold/src/views/w3m-swap-select-token-view/styles.ts
@@ -58,7 +58,7 @@ export default css`
   }
 
   .tokens-container {
-    border-top: 1px solid var(--wui-gray-glass-005);
+    border-top: 1px solid var(--wui-color-gray-glass-005);
     height: 100%;
     max-height: 390px;
   }
@@ -91,7 +91,7 @@ export default css`
     align-items: center;
     justify-content: center;
     gap: var(--wui-spacing-xs);
-    box-shadow: inset 0 0 0 1px var(--wui-gray-glass-005);
+    box-shadow: inset 0 0 0 1px var(--wui-color-gray-glass-005);
     background-color: transparent;
     border-radius: var(--wui-border-radius-xxs);
     padding: var(--wui-spacing-xs);
@@ -100,13 +100,13 @@ export default css`
   }
 
   .select-network-button:hover {
-    background-color: var(--wui-gray-glass-002);
+    background-color: var(--wui-color-gray-glass-002);
   }
 
   .select-network-button > wui-image {
     width: 26px;
     height: 26px;
     border-radius: var(--wui-border-radius-xs);
-    box-shadow: inset 0 0 0 1px var(--wui-gray-glass-010);
+    box-shadow: inset 0 0 0 1px var(--wui-color-gray-glass-010);
   }
 `
diff --git a/packages/scaffold/src/views/w3m-swap-view/index.ts b/packages/scaffold/src/views/w3m-swap-view/index.ts
index 1dbfdac3e8..9ef7e92836 100644
--- a/packages/scaffold/src/views/w3m-swap-view/index.ts
+++ b/packages/scaffold/src/views/w3m-swap-view/index.ts
@@ -118,7 +118,7 @@ export class W3mSwapView extends LitElement {
   // -- Render -------------------------------------------- //
   public override render() {
     return html`
-      <wui-flex flexDirection="column" padding="l" gap="s">
+      <wui-flex flexDirection="column" .padding=${['0', 'l', 'l', 'l']} gap="s">
         ${this.initialized ? this.templateSwap() : this.templateLoading()}
       </wui-flex>
     `
@@ -302,7 +302,7 @@ export class W3mSwapView extends LitElement {
         fullWidth
         size="lg"
         borderRadius="xs"
-        variant=${haveNoTokenSelected ? 'shade' : 'fill'}
+        variant=${haveNoTokenSelected ? 'neutral' : 'main'}
         .loading=${loading}
         .disabled=${disabled}
         @click=${this.onSwapPreview}
diff --git a/packages/scaffold/src/views/w3m-swap-view/styles.ts b/packages/scaffold/src/views/w3m-swap-view/styles.ts
index 740e781ef0..fb5a642951 100644
--- a/packages/scaffold/src/views/w3m-swap-view/styles.ts
+++ b/packages/scaffold/src/views/w3m-swap-view/styles.ts
@@ -21,7 +21,7 @@ export default css`
   }
 
   .action-button:disabled {
-    border-color: 1px solid var(--wui-gray-glass-005);
+    border-color: 1px solid var(--wui-color-gray-glass-005);
   }
 
   .swap-inputs-container {
@@ -51,18 +51,18 @@ export default css`
     padding: var(--wui-spacing-xs);
     border: none;
     border-radius: var(--wui-border-radius-xxs);
-    background: var(--wui-gray-glass-002);
+    background: var(--wui-color-gray-glass-002);
     transition: background-color var(--wui-duration-md) var(--wui-ease-out-power-1);
     will-change: background-color;
     z-index: 20;
   }
 
   .replace-tokens-button-container > button:hover {
-    background: var(--wui-gray-glass-005);
+    background: var(--wui-color-gray-glass-005);
   }
 
   .details-container > wui-flex {
-    background: var(--wui-gray-glass-002);
+    background: var(--wui-color-gray-glass-002);
     border-radius: var(--wui-border-radius-xxs);
     width: 100%;
   }
@@ -76,7 +76,7 @@ export default css`
   }
 
   .details-container > wui-flex > button:hover {
-    background: var(--wui-gray-glass-002);
+    background: var(--wui-color-gray-glass-002);
   }
 
   .details-content-container {
@@ -94,6 +94,6 @@ export default css`
     width: 100%;
     padding: var(--wui-spacing-s) var(--wui-spacing-xl);
     border-radius: var(--wui-border-radius-xxs);
-    background: var(--wui-gray-glass-002);
+    background: var(--wui-color-gray-glass-002);
   }
 `
diff --git a/packages/scaffold/src/views/w3m-update-email-wallet-view/index.ts b/packages/scaffold/src/views/w3m-update-email-wallet-view/index.ts
index 50369e3592..2e2348d49c 100644
--- a/packages/scaffold/src/views/w3m-update-email-wallet-view/index.ts
+++ b/packages/scaffold/src/views/w3m-update-email-wallet-view/index.ts
@@ -52,7 +52,7 @@ export class W3mUpdateEmailWalletView extends LitElement {
 
           <wui-button
             size="md"
-            variant="fill"
+            variant="main"
             fullWidth
             @click=${this.onSubmitEmail.bind(this)}
             .disabled=${!showSubmit}
diff --git a/packages/scaffold/src/views/w3m-upgrade-to-smart-account-view/index.ts b/packages/scaffold/src/views/w3m-upgrade-to-smart-account-view/index.ts
index 60023dfad1..4e4af49e25 100644
--- a/packages/scaffold/src/views/w3m-upgrade-to-smart-account-view/index.ts
+++ b/packages/scaffold/src/views/w3m-upgrade-to-smart-account-view/index.ts
@@ -63,7 +63,7 @@ export class W3mUpgradeToSmartAccountView extends LitElement {
   private buttonsTemplate() {
     return html`<wui-flex .padding=${['0', '2l', '0', '2l'] as const} gap="s">
       <wui-button
-        variant="accentBg"
+        variant="accent"
         @click=${this.redirectToAccount.bind(this)}
         size="lg"
         borderRadius="xs"
diff --git a/packages/scaffold/src/views/w3m-wallet-receive-view/index.ts b/packages/scaffold/src/views/w3m-wallet-receive-view/index.ts
index 26f81e5306..ccffa2c3d0 100644
--- a/packages/scaffold/src/views/w3m-wallet-receive-view/index.ts
+++ b/packages/scaffold/src/views/w3m-wallet-receive-view/index.ts
@@ -65,20 +65,21 @@ export class W3mWalletReceiveView extends LitElement {
 
     return html` <wui-flex
       flexDirection="column"
-      .padding=${['xl', 'l', 'l', 'l'] as const}
+      .padding=${['0', 'l', 'l', 'l'] as const}
       alignItems="center"
     >
       <wui-chip-button
         @click=${this.onCopyClick.bind(this)}
         text=${UiHelperUtil.getTruncateString({
-          string: this.address ?? '',
+          string: this.profileName || this.address || '',
           charsStart: this.profileName ? 18 : 4,
           charsEnd: this.profileName ? 0 : 4,
           truncate: this.profileName ? 'end' : 'middle'
         })}
         icon="copy"
+        size="sm"
         imageSrc=${networkImage ? networkImage : ''}
-        variant="shadeSmall"
+        variant="gray"
       ></wui-chip-button>
       <wui-flex
         flexDirection="column"
diff --git a/packages/scaffold/src/views/w3m-wallet-send-preview-view/index.ts b/packages/scaffold/src/views/w3m-wallet-send-preview-view/index.ts
index 95e4e44660..eeaf2d73b4 100644
--- a/packages/scaffold/src/views/w3m-wallet-send-preview-view/index.ts
+++ b/packages/scaffold/src/views/w3m-wallet-send-preview-view/index.ts
@@ -49,7 +49,7 @@ export class W3mWalletSendPreviewView extends LitElement {
 
   // -- Render -------------------------------------------- //
   public override render() {
-    return html` <wui-flex flexDirection="column" .padding=${['s', 'l', 'l', 'l'] as const}>
+    return html` <wui-flex flexDirection="column" .padding=${['0', 'l', 'l', 'l'] as const}>
       <wui-flex gap="xs" flexDirection="column" .padding=${['0', 'xs', '0', 'xs'] as const}>
         <wui-flex alignItems="center" justifyContent="space-between">
           <wui-flex flexDirection="column" gap="4xs">
@@ -103,7 +103,7 @@ export class W3mWalletSendPreviewView extends LitElement {
             class="cancelButton"
             @click=${this.onCancelClick.bind(this)}
             size="lg"
-            variant="shade"
+            variant="neutral"
           >
             Cancel
           </wui-button>
@@ -111,7 +111,7 @@ export class W3mWalletSendPreviewView extends LitElement {
             class="sendButton"
             @click=${this.onSendClick.bind(this)}
             size="lg"
-            variant="fill"
+            variant="main"
           >
             Send
           </wui-button>
diff --git a/packages/scaffold/src/views/w3m-wallet-send-view/index.ts b/packages/scaffold/src/views/w3m-wallet-send-view/index.ts
index 260ee61f41..6d3f5159af 100644
--- a/packages/scaffold/src/views/w3m-wallet-send-view/index.ts
+++ b/packages/scaffold/src/views/w3m-wallet-send-view/index.ts
@@ -58,7 +58,7 @@ export class W3mWalletSendView extends LitElement {
   public override render() {
     this.getMessage()
 
-    return html` <wui-flex flexDirection="column" .padding=${['s', 'l', 'l', 'l'] as const}>
+    return html` <wui-flex flexDirection="column" .padding=${['0', 'l', 'l', 'l'] as const}>
       <wui-flex class="inputContainer" gap="xs" flexDirection="column">
         <w3m-input-token
           .token=${this.token}
@@ -82,7 +82,7 @@ export class W3mWalletSendView extends LitElement {
           @click=${this.onButtonClick.bind(this)}
           ?disabled=${!this.message.startsWith('Preview Send')}
           size="lg"
-          variant="fill"
+          variant="main"
           ?loading=${this.loading}
           fullWidth
         >
diff --git a/packages/scaffold/src/views/w3m-what-is-a-network-view/index.ts b/packages/scaffold/src/views/w3m-what-is-a-network-view/index.ts
index dc2d12fca1..076b254918 100644
--- a/packages/scaffold/src/views/w3m-what-is-a-network-view/index.ts
+++ b/packages/scaffold/src/views/w3m-what-is-a-network-view/index.ts
@@ -28,8 +28,8 @@ export class W3mWhatIsANetworkView extends LitElement {
       >
         <w3m-help-widget .data=${data}></w3m-help-widget>
         <wui-button
-          variant="fill"
-          size="sm"
+          variant="main"
+          size="md"
           @click=${() => {
             CoreHelperUtil.openHref('https://ethereum.org/en/developers/docs/networks/', '_blank')
           }}
diff --git a/packages/scaffold/src/views/w3m-what-is-a-wallet-view/index.ts b/packages/scaffold/src/views/w3m-what-is-a-wallet-view/index.ts
index 3ebfcd3c55..04eb47c5a6 100644
--- a/packages/scaffold/src/views/w3m-what-is-a-wallet-view/index.ts
+++ b/packages/scaffold/src/views/w3m-what-is-a-wallet-view/index.ts
@@ -32,7 +32,7 @@ export class W3mWhatIsAWalletView extends LitElement {
         gap="xl"
       >
         <w3m-help-widget .data=${data}></w3m-help-widget>
-        <wui-button variant="fill" size="sm" @click=${this.onGetWallet.bind(this)}>
+        <wui-button variant="main" size="md" @click=${this.onGetWallet.bind(this)}>
           <wui-icon color="inherit" slot="iconLeft" name="wallet"></wui-icon>
           Get a wallet
         </wui-button>
diff --git a/packages/siwe/scaffold/views/w3m-connecting-siwe-view/index.ts b/packages/siwe/scaffold/views/w3m-connecting-siwe-view/index.ts
index d207661922..41a396e8fb 100644
--- a/packages/siwe/scaffold/views/w3m-connecting-siwe-view/index.ts
+++ b/packages/siwe/scaffold/views/w3m-connecting-siwe-view/index.ts
@@ -50,8 +50,8 @@ export class W3mConnectingSiweView extends LitElement {
       <wui-flex .padding=${['l', 'xl', 'xl', 'xl'] as const} gap="s" justifyContent="space-between">
         <wui-button
           size="md"
-          ?fullwidth=${true}
-          variant="shade"
+          fullWidth
+          variant="neutral"
           @click=${this.onCancel.bind(this)}
           data-testid="w3m-connecting-siwe-cancel"
         >
@@ -60,7 +60,7 @@ export class W3mConnectingSiweView extends LitElement {
         <wui-button
           size="md"
           ?fullwidth=${true}
-          variant="fill"
+          variant="main"
           @click=${this.onSign.bind(this)}
           ?loading=${this.isSigning}
           data-testid="w3m-connecting-siwe-sign"
diff --git a/packages/ui/src/assets/svg/add.ts b/packages/ui/src/assets/svg/add.ts
index bc896de4c6..6c1cc6a952 100644
--- a/packages/ui/src/assets/svg/add.ts
+++ b/packages/ui/src/assets/svg/add.ts
@@ -12,6 +12,6 @@ export const addSvg = svg`<svg
     fill-rule="evenodd"
     clip-rule="evenodd"
     d="M7.0023 0.875C7.48571 0.875 7.8776 1.26675 7.8776 1.75V6.125H12.2541C12.7375 6.125 13.1294 6.51675 13.1294 7C13.1294 7.48325 12.7375 7.875 12.2541 7.875H7.8776V12.25C7.8776 12.7332 7.48571 13.125 7.0023 13.125C6.51889 13.125 6.12701 12.7332 6.12701 12.25V7.875H1.75054C1.26713 7.875 0.875244 7.48325 0.875244 7C0.875244 6.51675 1.26713 6.125 1.75054 6.125H6.12701V1.75C6.12701 1.26675 6.51889 0.875 7.0023 0.875Z"
-    fill="#47A1FF"
+    fill="#667dff"
   /></svg
 >`
diff --git a/packages/ui/src/components/wui-card/styles.ts b/packages/ui/src/components/wui-card/styles.ts
index ad09da6609..05c7289251 100644
--- a/packages/ui/src/components/wui-card/styles.ts
+++ b/packages/ui/src/components/wui-card/styles.ts
@@ -4,7 +4,7 @@ export default css`
   :host {
     display: block;
     border-radius: clamp(0px, var(--wui-border-radius-l), 44px);
-    box-shadow: 0 0 0 1px var(--wui-gray-glass-005);
+    box-shadow: 0 0 0 1px var(--wui-color-gray-glass-005);
     background-color: var(--wui-color-modal-bg);
     overflow: hidden;
   }
diff --git a/packages/ui/src/components/wui-loading-spinner/index.ts b/packages/ui/src/components/wui-loading-spinner/index.ts
index 91b4ee3117..05e0dfcacf 100644
--- a/packages/ui/src/components/wui-loading-spinner/index.ts
+++ b/packages/ui/src/components/wui-loading-spinner/index.ts
@@ -15,7 +15,9 @@ export class WuiLoadingSpinner extends LitElement {
 
   // -- Render -------------------------------------------- //
   public override render() {
-    this.style.cssText = `--local-color: var(--wui-color-${this.color});`
+    this.style.cssText = `--local-color: ${
+      this.color === 'inherit' ? 'inherit' : `var(--wui-color-${this.color})`
+    }`
 
     this.dataset['size'] = this.size
 
diff --git a/packages/ui/src/components/wui-shimmer/styles.ts b/packages/ui/src/components/wui-shimmer/styles.ts
index 48fe347e31..4ed45b144a 100644
--- a/packages/ui/src/components/wui-shimmer/styles.ts
+++ b/packages/ui/src/components/wui-shimmer/styles.ts
@@ -3,7 +3,7 @@ import { css } from 'lit'
 export default css`
   :host {
     display: block;
-    box-shadow: inset 0 0 0 1px var(--wui-gray-glass-005);
+    box-shadow: inset 0 0 0 1px var(--wui-color-gray-glass-005);
     background: linear-gradient(
       120deg,
       var(--wui-color-bg-200) 5%,
diff --git a/packages/ui/src/composites/wui-account-button/styles.ts b/packages/ui/src/composites/wui-account-button/styles.ts
index 8b2c04daf8..fb446402e1 100644
--- a/packages/ui/src/composites/wui-account-button/styles.ts
+++ b/packages/ui/src/composites/wui-account-button/styles.ts
@@ -7,24 +7,24 @@ export default css`
 
   button {
     border-radius: var(--wui-border-radius-3xl);
-    background: var(--wui-gray-glass-002);
+    background: var(--wui-color-gray-glass-002);
     display: flex;
     gap: var(--wui-spacing-xs);
     padding: var(--wui-spacing-3xs) var(--wui-spacing-xs) var(--wui-spacing-3xs)
       var(--wui-spacing-xs);
-    border: 1px solid var(--wui-gray-glass-005);
+    border: 1px solid var(--wui-color-gray-glass-005);
   }
 
   button:disabled {
-    background: var(--wui-gray-glass-015);
+    background: var(--wui-color-gray-glass-015);
   }
 
   button:disabled > wui-text {
-    color: var(--wui-gray-glass-015);
+    color: var(--wui-color-gray-glass-015);
   }
 
   button:disabled > wui-flex > wui-text {
-    color: var(--wui-gray-glass-015);
+    color: var(--wui-color-gray-glass-015);
   }
 
   button:disabled > wui-image,
@@ -51,13 +51,13 @@ export default css`
     border-radius: var(--wui-border-radius-3xl);
     width: 24px;
     height: 24px;
-    box-shadow: 0 0 0 2px var(--wui-gray-glass-005);
+    box-shadow: 0 0 0 2px var(--wui-color-gray-glass-005);
   }
 
   wui-flex {
     border-radius: var(--wui-border-radius-3xl);
-    border: 1px solid var(--wui-gray-glass-005);
-    background: var(--wui-gray-glass-005);
+    border: 1px solid var(--wui-color-gray-glass-005);
+    background: var(--wui-color-gray-glass-005);
     padding: 4px var(--wui-spacing-m) 4px var(--wui-spacing-xxs);
   }
 
@@ -70,7 +70,7 @@ export default css`
   wui-avatar {
     width: 20px;
     height: 20px;
-    box-shadow: 0 0 0 2px var(--wui-accent-glass-010);
+    box-shadow: 0 0 0 2px var(--wui-color-accent-glass-010);
   }
 
   @media (max-width: 500px) {
diff --git a/packages/ui/src/composites/wui-all-wallets-image/styles.ts b/packages/ui/src/composites/wui-all-wallets-image/styles.ts
index 6750b1d610..ae7478eb52 100644
--- a/packages/ui/src/composites/wui-all-wallets-image/styles.ts
+++ b/packages/ui/src/composites/wui-all-wallets-image/styles.ts
@@ -7,7 +7,7 @@ export default css`
     width: 40px;
     height: 40px;
     overflow: hidden;
-    background: var(--wui-gray-glass-002);
+    background: var(--wui-color-gray-glass-002);
     display: flex;
     justify-content: center;
     align-items: center;
@@ -24,7 +24,7 @@ export default css`
     left: 0;
     right: 0;
     border-radius: inherit;
-    border: 1px solid var(--wui-gray-glass-010);
+    border: 1px solid var(--wui-color-gray-glass-010);
     pointer-events: none;
   }
 
diff --git a/packages/ui/src/composites/wui-avatar/styles.ts b/packages/ui/src/composites/wui-avatar/styles.ts
index 6236ec569c..1de42c06ec 100644
--- a/packages/ui/src/composites/wui-avatar/styles.ts
+++ b/packages/ui/src/composites/wui-avatar/styles.ts
@@ -6,7 +6,7 @@ export default css`
     width: var(--wui-icon-box-size-xl);
     height: var(--wui-icon-box-size-xl);
     border-radius: var(--wui-border-radius-3xl);
-    box-shadow: 0 0 0 8px var(--wui-gray-glass-005);
+    box-shadow: 0 0 0 8px var(--wui-color-gray-glass-005);
     overflow: hidden;
     position: relative;
   }
@@ -50,7 +50,7 @@ export default css`
   }
 
   :host([data-variant='generated']) {
-    box-shadow: 0 0 0 8px var(--wui-gray-glass-005);
+    box-shadow: 0 0 0 8px var(--wui-color-gray-glass-005);
     background: radial-gradient(
       var(--local-radial-circle),
       #fff 0.52%,
@@ -63,7 +63,7 @@ export default css`
   }
 
   :host([data-variant='default']) {
-    box-shadow: 0 0 0 8px var(--wui-gray-glass-005);
+    box-shadow: 0 0 0 8px var(--wui-color-gray-glass-005);
     background: radial-gradient(
       75.29% 75.29% at 64.96% 24.36%,
       #fff 0.52%,
diff --git a/packages/ui/src/composites/wui-banner/styles.ts b/packages/ui/src/composites/wui-banner/styles.ts
index 4e715490b4..2bc0ecf456 100644
--- a/packages/ui/src/composites/wui-banner/styles.ts
+++ b/packages/ui/src/composites/wui-banner/styles.ts
@@ -3,7 +3,7 @@ import { css } from 'lit'
 export default css`
   wui-flex {
     width: 100%;
-    background-color: var(--wui-gray-glass-005);
+    background-color: var(--wui-color-gray-glass-005);
     border-radius: var(--wui-border-radius-s);
     padding: var(--wui-spacing-1xs) var(--wui-spacing-s) var(--wui-spacing-1xs)
       var(--wui-spacing-1xs);
diff --git a/packages/ui/src/composites/wui-button/styles.ts b/packages/ui/src/composites/wui-button/styles.ts
index a4e62d9dc2..84ee56b34e 100644
--- a/packages/ui/src/composites/wui-button/styles.ts
+++ b/packages/ui/src/composites/wui-button/styles.ts
@@ -7,47 +7,16 @@ export default css`
   }
 
   button {
-    border: 1px solid var(--wui-gray-glass-010);
+    border: none;
     border-radius: var(--local-border-radius);
     width: var(--local-width);
     white-space: nowrap;
   }
 
-  button:disabled {
-    border: 1px solid var(--wui-gray-glass-010);
-  }
-
-  /* xs settings */
-  button[data-size='xs'] {
-    padding: var(--wui-spacing-xs) var(--wui-spacing-1xs);
-  }
-
-  button[data-size='xs'][data-icon-left='true'][data-icon-right='false'] {
-    padding-left: var(--wui-spacing-xxs);
-  }
-
-  button[data-size='xs'][data-icon-right='true'][data-icon-left='false'] {
-    padding-right: var(--wui-spacing-xxs);
-  }
-
-  /* sm settings */
-  button[data-size='sm'] {
-    padding: var(--wui-spacing-xxs) var(--wui-spacing-s);
-  }
-
-  button[data-size='sm'][data-icon-left='true'][data-icon-right='false'] {
-    padding: var(--wui-spacing-xxs) var(--wui-spacing-s) var(--wui-spacing-xxs)
-      var(--wui-spacing-xs);
-  }
-
-  button[data-size='sm'][data-icon-right='true'][data-icon-left='false'] {
-    padding: var(--wui-spacing-xxs) var(--wui-spacing-xs) var(--wui-spacing-xxs)
-      var(--wui-spacing-s);
-  }
-
   /* md settings */
   button[data-size='md'] {
     padding: 8.2px var(--wui-spacing-l) 9px var(--wui-spacing-l);
+    height: 36px;
   }
 
   button[data-size='md'][data-icon-left='true'][data-icon-right='false'] {
@@ -61,6 +30,7 @@ export default css`
   /* lg settings */
   button[data-size='lg'] {
     padding: var(--wui-spacing-m) var(--wui-spacing-2l);
+    height: 48px;
   }
 
   button[data-size='lg'][data-icon-left='true'][data-icon-right='false'] {
diff --git a/packages/ui/src/composites/wui-card-select-loader/styles.ts b/packages/ui/src/composites/wui-card-select-loader/styles.ts
index 056b8e25b0..abea5eb0ff 100644
--- a/packages/ui/src/composites/wui-card-select-loader/styles.ts
+++ b/packages/ui/src/composites/wui-card-select-loader/styles.ts
@@ -8,7 +8,7 @@ export default css`
     width: 76px;
     row-gap: var(--wui-spacing-xs);
     padding: var(--wui-spacing-xs) 10px;
-    background-color: var(--wui-gray-glass-002);
+    background-color: var(--wui-color-gray-glass-002);
     border-radius: clamp(0px, var(--wui-border-radius-xs), 20px);
     position: relative;
   }
@@ -27,7 +27,7 @@ export default css`
   }
 
   svg > path {
-    stroke: var(--wui-gray-glass-010);
+    stroke: var(--wui-color-gray-glass-010);
     stroke-width: 1px;
   }
 `
diff --git a/packages/ui/src/composites/wui-card-select/styles.ts b/packages/ui/src/composites/wui-card-select/styles.ts
index efaf4f6795..7913e2dc95 100644
--- a/packages/ui/src/composites/wui-card-select/styles.ts
+++ b/packages/ui/src/composites/wui-card-select/styles.ts
@@ -6,7 +6,7 @@ export default css`
     width: 76px;
     row-gap: var(--wui-spacing-xs);
     padding: var(--wui-spacing-xs) var(--wui-spacing-0);
-    background-color: var(--wui-gray-glass-002);
+    background-color: var(--wui-color-gray-glass-002);
     border-radius: clamp(0px, var(--wui-border-radius-xs), 20px);
   }
 
@@ -20,20 +20,20 @@ export default css`
   }
 
   button:disabled > wui-text {
-    color: var(--wui-gray-glass-015);
+    color: var(--wui-color-gray-glass-015);
   }
 
   [data-selected='true'] {
-    background-color: var(--wui-accent-glass-020);
+    background-color: var(--wui-color-accent-glass-020);
   }
 
   @media (hover: hover) and (pointer: fine) {
     [data-selected='true']:hover:enabled {
-      background-color: var(--wui-accent-glass-015);
+      background-color: var(--wui-color-accent-glass-015);
     }
   }
 
   [data-selected='true']:active:enabled {
-    background-color: var(--wui-accent-glass-010);
+    background-color: var(--wui-color-accent-glass-010);
   }
 `
diff --git a/packages/ui/src/composites/wui-chip-button/index.ts b/packages/ui/src/composites/wui-chip-button/index.ts
index f13b223423..29204328ab 100644
--- a/packages/ui/src/composites/wui-chip-button/index.ts
+++ b/packages/ui/src/composites/wui-chip-button/index.ts
@@ -4,7 +4,7 @@ import '../../components/wui-icon/index.js'
 import '../../components/wui-image/index.js'
 import '../../components/wui-text/index.js'
 import { elementStyles, resetStyles } from '../../utils/ThemeUtil.js'
-import type { ChipType, IconType } from '../../utils/TypeUtil.js'
+import type { ChipButtonVariant, IconType } from '../../utils/TypeUtil.js'
 import { customElement } from '../../utils/WebComponentsUtil.js'
 import styles from './styles.js'
 
@@ -13,7 +13,7 @@ export class WuiChipButton extends LitElement {
   public static override styles = [resetStyles, elementStyles, styles]
 
   // -- State & Properties -------------------------------- //
-  @property() public variant: ChipType = 'fill'
+  @property() public variant: ChipButtonVariant = 'accent'
 
   @property() public imageSrc = ''
 
@@ -21,17 +21,21 @@ export class WuiChipButton extends LitElement {
 
   @property() public icon: IconType = 'externalLink'
 
+  @property() public size: 'sm' | 'md' = 'md'
+
   @property() public text = ''
 
   // -- Render -------------------------------------------- //
   public override render() {
-    const isSmall =
-      this.variant === 'success' || this.variant === 'transparent' || this.variant === 'shadeSmall'
-    const textVariant = isSmall ? 'small-600' : 'paragraph-600'
+    const textVariant = this.size === 'sm' ? 'small-600' : 'paragraph-600'
 
     return html`
-      <button class=${this.disabled ? 'disabled' : ''} data-variant=${this.variant}>
-        <wui-image src=${this.imageSrc}></wui-image>
+      <button
+        class=${this.disabled ? 'disabled' : ''}
+        data-variant=${this.variant}
+        data-size=${this.size}
+      >
+        ${this.imageSrc ? html`<wui-image src=${this.imageSrc}></wui-image>` : null}
         <wui-text variant=${textVariant} color="inherit"> ${this.text} </wui-text>
         <wui-icon name=${this.icon} color="inherit" size="inherit"></wui-icon>
       </button>
diff --git a/packages/ui/src/composites/wui-chip-button/styles.ts b/packages/ui/src/composites/wui-chip-button/styles.ts
index b58b8c6306..161260a261 100644
--- a/packages/ui/src/composites/wui-chip-button/styles.ts
+++ b/packages/ui/src/composites/wui-chip-button/styles.ts
@@ -2,183 +2,105 @@ import { css } from 'lit'
 
 export default css`
   button {
-    border: 1px solid var(--wui-gray-glass-010);
+    border: none;
     border-radius: var(--wui-border-radius-3xl);
   }
 
-  wui-image {
-    border-radius: var(--wui-border-radius-3xl);
-    overflow: hidden;
-  }
-
-  button.disabled > wui-icon,
-  button.disabled > wui-image {
-    filter: grayscale(1);
+  button[data-variant='main'] {
+    background-color: var(--wui-color-accent-100);
+    color: var(--wui-color-inverse-100);
+    box-shadow: inset 0 0 0 1px var(--wui-color-gray-glass-010);
   }
 
-  button[data-variant='fill'] {
-    color: var(--wui-color-inverse-100);
-    background-color: var(--wui-color-accent-100);
+  button[data-variant='accent'] {
+    background-color: var(--wui-color-accent-glass-010);
+    color: var(--wui-color-accent-100);
+    box-shadow: inset 0 0 0 1px var(--wui-color-gray-glass-005);
   }
 
-  button[data-variant='shade'],
-  button[data-variant='shadeSmall'] {
+  button[data-variant='gray'] {
     background-color: transparent;
-    background-color: var(--wui-gray-glass-010);
     color: var(--wui-color-fg-200);
+    box-shadow: inset 0 0 0 1px var(--wui-color-gray-glass-010);
   }
 
-  button[data-variant='success'] {
-    column-gap: var(--wui-spacing-xxs);
-    border: 1px solid var(--wui-success-glass-010);
-    background-color: var(--wui-success-glass-010);
-    color: var(--wui-color-success-100);
-  }
-
-  button[data-variant='error'] {
-    column-gap: var(--wui-spacing-xxs);
-    border: 1px solid var(--wui-error-glass-010);
-    background-color: var(--wui-error-glass-010);
-    color: var(--wui-color-error-100);
-  }
-
-  button[data-variant='transparent'] {
-    column-gap: var(--wui-spacing-xxs);
+  button[data-variant='shade'] {
     background-color: transparent;
-    color: var(--wui-color-fg-150);
-  }
-
-  button[data-variant='transparent'],
-  button[data-variant='success'],
-  button[data-variant='shadeSmall'],
-  button[data-variant='error'] {
-    padding: 7px var(--wui-spacing-s) 7px 8px;
+    color: var(--wui-color-accent-100);
+    box-shadow: inset 0 0 0 1px var(--wui-color-gray-glass-010);
   }
 
-  button[data-variant='transparent']:has(wui-text:first-child),
-  button[data-variant='success']:has(wui-text:first-child),
-  button[data-variant='shadeSmall']:has(wui-text:first-child),
-  button[data-variant='error']:has(wui-text:first-child) {
-    padding: 7px var(--wui-spacing-s);
+  button[data-size='sm'] {
+    height: 32px;
+    padding: 0 var(--wui-spacing-s);
   }
 
-  button[data-variant='fill'],
-  button[data-variant='shade'] {
-    column-gap: var(--wui-spacing-xs);
-    padding: var(--wui-spacing-xxs) var(--wui-spacing-m) var(--wui-spacing-xxs)
-      var(--wui-spacing-xs);
+  button[data-size='md'] {
+    height: 40px;
+    padding: 0 var(--wui-spacing-l);
   }
 
-  button[data-variant='fill']:has(wui-text:first-child),
-  button[data-variant='shade']:has(wui-text:first-child) {
-    padding: 9px var(--wui-spacing-m) 9px var(--wui-spacing-m);
+  button[data-size='sm'] > wui-image {
+    width: 16px;
+    height: 16px;
   }
 
-  button[data-variant='fill'] > wui-image,
-  button[data-variant='shade'] > wui-image {
+  button[data-size='md'] > wui-image {
     width: 24px;
     height: 24px;
   }
 
-  button[data-variant='fill'] > wui-image {
-    box-shadow: inset 0 0 0 1px var(--wui-color-accent-090);
-  }
-
-  button[data-variant='shade'] > wui-image,
-  button[data-variant='shadeSmall'] > wui-image {
-    box-shadow: inset 0 0 0 1px var(--wui-gray-glass-010);
-  }
-
-  button[data-variant='fill'] > wui-icon,
-  button[data-variant='shade'] > wui-icon {
-    width: 14px;
-    height: 14px;
-  }
-
-  button[data-variant='transparent'] > wui-image,
-  button[data-variant='success'] > wui-image,
-  button[data-variant='shadeSmall'] > wui-image,
-  button[data-variant='error'] > wui-image {
-    width: 14px;
-    height: 14px;
-  }
-
-  button[data-variant='transparent'] > wui-icon,
-  button[data-variant='success'] > wui-icon,
-  button[data-variant='shadeSmall'] > wui-icon,
-  button[data-variant='error'] > wui-icon {
+  button[data-size='sm'] > wui-icon {
     width: 12px;
     height: 12px;
   }
 
-  button[data-variant='fill']:focus-visible {
-    background-color: var(--wui-color-accent-090);
-  }
-
-  button[data-variant='shade']:focus-visible,
-  button[data-variant='shadeSmall']:focus-visible {
-    background-color: var(--wui-gray-glass-015);
+  button[data-size='md'] > wui-icon {
+    width: 14px;
+    height: 14px;
   }
 
-  button[data-variant='transparent']:focus-visible {
-    background-color: var(--wui-gray-glass-005);
+  wui-image {
+    border-radius: var(--wui-border-radius-3xl);
+    overflow: hidden;
   }
 
-  button[data-variant='success']:focus-visible {
-    background-color: var(--wui-success-glass-015);
+  button.disabled > wui-icon,
+  button.disabled > wui-image {
+    filter: grayscale(1);
   }
 
-  button[data-variant='error']:focus-visible {
-    background-color: var(--wui-error-glass-015);
+  button[data-variant='main'] > wui-image {
+    box-shadow: inset 0 0 0 1px var(--wui-color-accent-090);
   }
 
-  button.disabled {
-    color: var(--wui-gray-glass-015);
-    background-color: var(--wui-gray-glass-015);
-    pointer-events: none;
+  button[data-variant='shade'] > wui-image,
+  button[data-variant='gray'] > wui-image {
+    box-shadow: inset 0 0 0 1px var(--wui-color-gray-glass-010);
   }
 
   @media (hover: hover) and (pointer: fine) {
-    button[data-variant='fill']:hover {
+    button[data-variant='main']:focus-visible {
       background-color: var(--wui-color-accent-090);
     }
 
+    button[data-variant='shade']:focus-visible,
+    button[data-variant='gray']:focus-visible,
     button[data-variant='shade']:hover,
-    button[data-variant='shadeSmall']:hover {
-      background-color: var(--wui-gray-glass-015);
-    }
-
-    button[data-variant='transparent']:hover {
-      background-color: var(--wui-gray-glass-005);
-    }
-
-    button[data-variant='success']:hover {
-      background-color: var(--wui-success-glass-015);
+    button[data-variant='gray']:hover {
+      background-color: var(--wui-color-gray-glass-002);
     }
 
-    button[data-variant='error']:hover {
-      background-color: var(--wui-error-glass-015);
+    button[data-variant='gray']:active,
+    button[data-variant='shade']:active {
+      background-color: var(--wui-color-gray-glass-005);
     }
   }
 
-  button[data-variant='fill']:active {
-    background-color: var(--wui-color-accent-080);
-  }
-
-  button[data-variant='shade']:active,
-  button[data-variant='shadeSmall']:active {
-    background-color: var(--wui-gray-glass-020);
-  }
-
-  button[data-variant='transparent']:active {
-    background-color: var(--wui-gray-glass-010);
-  }
-
-  button[data-variant='success']:active {
-    background-color: var(--wui-success-glass-020);
-  }
-
-  button[data-variant='error']:active {
-    background-color: var(--wui-error-glass-020);
+  button.disabled {
+    color: var(--wui-color-gray-glass-020);
+    background-color: var(--wui-color-gray-glass-002);
+    box-shadow: inset 0 0 0 1px var(--wui-color-gray-glass-002);
+    pointer-events: none;
   }
 `
diff --git a/packages/ui/src/composites/wui-chip/styles.ts b/packages/ui/src/composites/wui-chip/styles.ts
index 8c172f6ab7..9f590ba8e1 100644
--- a/packages/ui/src/composites/wui-chip/styles.ts
+++ b/packages/ui/src/composites/wui-chip/styles.ts
@@ -2,7 +2,7 @@ import { css } from 'lit'
 
 export default css`
   a {
-    border: 1px solid var(--wui-gray-glass-010);
+    border: 1px solid var(--wui-color-gray-glass-010);
     border-radius: var(--wui-border-radius-3xl);
   }
 
@@ -24,21 +24,21 @@ export default css`
   a[data-variant='shade'],
   a[data-variant='shadeSmall'] {
     background-color: transparent;
-    background-color: var(--wui-gray-glass-010);
+    background-color: var(--wui-color-gray-glass-010);
     color: var(--wui-color-fg-200);
   }
 
   a[data-variant='success'] {
     column-gap: var(--wui-spacing-xxs);
-    border: 1px solid var(--wui-success-glass-010);
-    background-color: var(--wui-success-glass-010);
+    border: 1px solid var(--wui-color-success-glass-010);
+    background-color: var(--wui-color-success-glass-010);
     color: var(--wui-color-success-100);
   }
 
   a[data-variant='error'] {
     column-gap: var(--wui-spacing-xxs);
-    border: 1px solid var(--wui-error-glass-010);
-    background-color: var(--wui-error-glass-010);
+    border: 1px solid var(--wui-color-error-glass-010);
+    background-color: var(--wui-color-error-glass-010);
     color: var(--wui-color-error-100);
   }
 
@@ -86,7 +86,7 @@ export default css`
 
   a[data-variant='shade'] > wui-image,
   a[data-variant='shadeSmall'] > wui-image {
-    box-shadow: inset 0 0 0 1px var(--wui-gray-glass-010);
+    box-shadow: inset 0 0 0 1px var(--wui-color-gray-glass-010);
   }
 
   a[data-variant='fill'] > wui-icon,
@@ -117,24 +117,24 @@ export default css`
 
   a[data-variant='shade']:focus-visible,
   a[data-variant='shadeSmall']:focus-visible {
-    background-color: var(--wui-gray-glass-015);
+    background-color: var(--wui-color-gray-glass-015);
   }
 
   a[data-variant='transparent']:focus-visible {
-    background-color: var(--wui-gray-glass-005);
+    background-color: var(--wui-color-gray-glass-005);
   }
 
   a[data-variant='success']:focus-visible {
-    background-color: var(--wui-success-glass-015);
+    background-color: var(--wui-color-success-glass-015);
   }
 
   a[data-variant='error']:focus-visible {
-    background-color: var(--wui-error-glass-015);
+    background-color: var(--wui-color-error-glass-015);
   }
 
   a.disabled {
-    color: var(--wui-gray-glass-015);
-    background-color: var(--wui-gray-glass-015);
+    color: var(--wui-color-gray-glass-015);
+    background-color: var(--wui-color-gray-glass-015);
     pointer-events: none;
   }
 
@@ -145,19 +145,19 @@ export default css`
 
     a[data-variant='shade']:hover,
     a[data-variant='shadeSmall']:hover {
-      background-color: var(--wui-gray-glass-015);
+      background-color: var(--wui-color-gray-glass-015);
     }
 
     a[data-variant='transparent']:hover {
-      background-color: var(--wui-gray-glass-005);
+      background-color: var(--wui-color-gray-glass-005);
     }
 
     a[data-variant='success']:hover {
-      background-color: var(--wui-success-glass-015);
+      background-color: var(--wui-color-success-glass-015);
     }
 
     a[data-variant='error']:hover {
-      background-color: var(--wui-error-glass-015);
+      background-color: var(--wui-color-error-glass-015);
     }
   }
 
@@ -167,18 +167,18 @@ export default css`
 
   a[data-variant='shade']:active,
   a[data-variant='shadeSmall']:active {
-    background-color: var(--wui-gray-glass-020);
+    background-color: var(--wui-color-gray-glass-020);
   }
 
   a[data-variant='transparent']:active {
-    background-color: var(--wui-gray-glass-010);
+    background-color: var(--wui-color-gray-glass-010);
   }
 
   a[data-variant='success']:active {
-    background-color: var(--wui-success-glass-020);
+    background-color: var(--wui-color-success-glass-020);
   }
 
   a[data-variant='error']:active {
-    background-color: var(--wui-error-glass-020);
+    background-color: var(--wui-color-error-glass-020);
   }
 `
diff --git a/packages/ui/src/composites/wui-compatible-network/styles.ts b/packages/ui/src/composites/wui-compatible-network/styles.ts
index a7921559b7..9cb07ae178 100644
--- a/packages/ui/src/composites/wui-compatible-network/styles.ts
+++ b/packages/ui/src/composites/wui-compatible-network/styles.ts
@@ -5,7 +5,7 @@ export default css`
     display: flex;
     gap: var(--wui-spacing-xl);
     width: 100%;
-    background-color: var(--wui-gray-glass-002);
+    background-color: var(--wui-color-gray-glass-002);
     border-radius: var(--wui-border-radius-xxs);
     padding: var(--wui-spacing-m) var(--wui-spacing-s);
   }
@@ -24,7 +24,7 @@ export default css`
     border-radius: calc(var(--wui-spacing-2l) / 2);
     overflow: hidden;
     box-shadow:
-      0 0 0 3px var(--wui-gray-glass-002),
+      0 0 0 3px var(--wui-color-gray-glass-002),
       0 0 0 3px var(--wui-color-modal-bg);
   }
 `
diff --git a/packages/ui/src/composites/wui-connect-button/styles.ts b/packages/ui/src/composites/wui-connect-button/styles.ts
index 30f9e93c27..e1f369aa49 100644
--- a/packages/ui/src/composites/wui-connect-button/styles.ts
+++ b/packages/ui/src/composites/wui-connect-button/styles.ts
@@ -8,24 +8,24 @@ export default css`
 
   button {
     background: var(--wui-color-accent-100);
-    border: 1px solid var(--wui-gray-glass-010);
+    border: 1px solid var(--wui-color-gray-glass-010);
     border-radius: var(--wui-border-radius-m);
     gap: var(--wui-spacing-xs);
   }
 
   button.loading {
-    background: var(--wui-gray-glass-010);
-    border: 1px solid var(--wui-gray-glass-010);
+    background: var(--wui-color-gray-glass-010);
+    border: 1px solid var(--wui-color-gray-glass-010);
     pointer-events: none;
   }
 
   button:disabled {
-    background-color: var(--wui-gray-glass-015);
-    border: 1px solid var(--wui-gray-glass-010);
+    background-color: var(--wui-color-gray-glass-015);
+    border: 1px solid var(--wui-color-gray-glass-010);
   }
 
   button:disabled > wui-text {
-    color: var(--wui-gray-glass-015);
+    color: var(--wui-color-gray-glass-015);
   }
 
   @media (hover: hover) and (pointer: fine) {
@@ -39,7 +39,7 @@ export default css`
   }
 
   button:focus-visible {
-    border: 1px solid var(--wui-gray-glass-010);
+    border: 1px solid var(--wui-color-gray-glass-010);
     background-color: var(--wui-color-accent-090);
     -webkit-box-shadow: 0px 0px 0px 4px var(--wui-box-shadow-blue);
     -moz-box-shadow: 0px 0px 0px 4px var(--wui-box-shadow-blue);
diff --git a/packages/ui/src/composites/wui-cta-button/index.ts b/packages/ui/src/composites/wui-cta-button/index.ts
index 2de4d8f18d..65cda99fc9 100644
--- a/packages/ui/src/composites/wui-cta-button/index.ts
+++ b/packages/ui/src/composites/wui-cta-button/index.ts
@@ -28,10 +28,8 @@ export class WuiCtaButton extends LitElement {
         .padding=${['1xs', '2l', '1xs', '2l'] as const}
       >
         <wui-text variant="paragraph-500" color="fg-200">${this.label}</wui-text>
-        <wui-button size="sm" variant="accent">
-          ${this.buttonLabel}
-          <wui-icon size="xs" color="inherit" slot="iconRight" name="chevronRight"></wui-icon>
-        </wui-button>
+        <wui-chip-button size="sm" variant="shade" text=${this.buttonLabel} icon="chevronRight">
+        </wui-chip-button>
       </wui-flex>
     `
   }
diff --git a/packages/ui/src/composites/wui-cta-button/styles.ts b/packages/ui/src/composites/wui-cta-button/styles.ts
index 1304b61010..44cf96cc99 100644
--- a/packages/ui/src/composites/wui-cta-button/styles.ts
+++ b/packages/ui/src/composites/wui-cta-button/styles.ts
@@ -3,7 +3,7 @@ import { css } from 'lit'
 export default css`
   wui-flex {
     width: 100%;
-    background-color: var(--wui-gray-glass-002);
+    background-color: var(--wui-color-gray-glass-002);
     border-radius: var(--wui-border-radius-xs);
   }
 `
diff --git a/packages/ui/src/composites/wui-details-group/styles.ts b/packages/ui/src/composites/wui-details-group/styles.ts
index 2bd7881ffa..e93c6bb441 100644
--- a/packages/ui/src/composites/wui-details-group/styles.ts
+++ b/packages/ui/src/composites/wui-details-group/styles.ts
@@ -4,7 +4,7 @@ export default css`
   :host {
     display: block;
     padding: var(--wui-spacing-l) var(--wui-spacing-m);
-    background-color: var(--wui-gray-glass-002);
+    background-color: var(--wui-color-gray-glass-002);
     border-radius: var(--wui-border-radius-xs);
     width: 100%;
   }
diff --git a/packages/ui/src/composites/wui-icon-box/styles.ts b/packages/ui/src/composites/wui-icon-box/styles.ts
index bf4de4f397..16bd5457c7 100644
--- a/packages/ui/src/composites/wui-icon-box/styles.ts
+++ b/packages/ui/src/composites/wui-icon-box/styles.ts
@@ -7,7 +7,7 @@ export default css`
     align-items: center;
     position: relative;
     overflow: hidden;
-    background-color: var(--wui-gray-glass-020);
+    background-color: var(--wui-color-gray-glass-020);
     border-radius: var(--local-border-radius);
     border: var(--local-border);
     box-sizing: content-box;
diff --git a/packages/ui/src/composites/wui-icon-button/styles.ts b/packages/ui/src/composites/wui-icon-button/styles.ts
index 80a2ffef28..d445f35ce0 100644
--- a/packages/ui/src/composites/wui-icon-button/styles.ts
+++ b/packages/ui/src/composites/wui-icon-button/styles.ts
@@ -11,9 +11,9 @@ export default css`
     align-items: center;
     height: 48px;
     width: 100%;
-    background-color: var(--wui-accent-glass-010);
+    background-color: var(--wui-color-accent-glass-010);
     border-radius: var(--wui-border-radius-xs);
-    border: 1px solid var(--wui-accent-glass-010);
+    border: 1px solid var(--wui-color-accent-glass-010);
     transition: background-color var(--wui-ease-out-power-1) var(--wui-duration-md);
     will-change: background-color;
   }
@@ -30,11 +30,11 @@ export default css`
 
   @media (hover: hover) and (pointer: fine) {
     button:hover:enabled {
-      background-color: var(--wui-accent-glass-015);
+      background-color: var(--wui-color-accent-glass-015);
     }
 
     button:active:enabled {
-      background-color: var(--wui-accent-glass-020);
+      background-color: var(--wui-color-accent-glass-020);
     }
   }
 `
diff --git a/packages/ui/src/composites/wui-icon-link/styles.ts b/packages/ui/src/composites/wui-icon-link/styles.ts
index 2de1351354..42fe467b08 100644
--- a/packages/ui/src/composites/wui-icon-link/styles.ts
+++ b/packages/ui/src/composites/wui-icon-link/styles.ts
@@ -7,6 +7,10 @@ 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-numeric/styles.ts b/packages/ui/src/composites/wui-input-numeric/styles.ts
index cb9f1926f7..162b57c924 100644
--- a/packages/ui/src/composites/wui-input-numeric/styles.ts
+++ b/packages/ui/src/composites/wui-input-numeric/styles.ts
@@ -9,9 +9,9 @@ export default css`
   input {
     width: 50px;
     height: 50px;
-    background: var(--wui-gray-glass-010);
+    background: var(--wui-color-gray-glass-010);
     border-radius: var(--wui-border-radius-xs);
-    border: 1px solid var(--wui-gray-glass-005);
+    border: 1px solid var(--wui-color-gray-glass-005);
     font-family: var(--wui-font-family);
     font-size: var(--wui-font-size-large);
     font-weight: var(--wui-font-weight-regular);
@@ -42,12 +42,12 @@ export default css`
 
   input:disabled {
     cursor: not-allowed;
-    border: 1px solid var(--wui-gray-glass-010);
-    background: var(--wui-gray-glass-005);
+    border: 1px solid var(--wui-color-gray-glass-010);
+    background: var(--wui-color-gray-glass-005);
   }
 
   input:focus:enabled {
-    background-color: var(--wui-gray-glass-015);
+    background-color: var(--wui-color-gray-glass-015);
     border: 1px solid var(--wui-color-accent-100);
     -webkit-box-shadow: 0px 0px 0px 4px var(--wui-box-shadow-blue);
     -moz-box-shadow: 0px 0px 0px 4px var(--wui-box-shadow-blue);
@@ -56,7 +56,7 @@ export default css`
 
   @media (hover: hover) and (pointer: fine) {
     input:hover:enabled {
-      background-color: var(--wui-gray-glass-015);
+      background-color: var(--wui-color-gray-glass-015);
     }
   }
 `
diff --git a/packages/ui/src/composites/wui-input-text/styles.ts b/packages/ui/src/composites/wui-input-text/styles.ts
index af5276fdf9..b121ca9d1b 100644
--- a/packages/ui/src/composites/wui-input-text/styles.ts
+++ b/packages/ui/src/composites/wui-input-text/styles.ts
@@ -11,8 +11,8 @@ export default css`
   input {
     width: 100%;
     border-radius: var(--wui-border-radius-xs);
-    border: 1px solid var(--wui-gray-glass-005);
-    background: var(--wui-gray-glass-005);
+    box-shadow: inset 0 0 0 1px var(--wui-color-gray-glass-002);
+    background: var(--wui-color-gray-glass-002);
     font-size: var(--wui-font-size-paragraph);
     letter-spacing: var(--wui-letter-spacing-paragraph);
     color: var(--wui-color-fg-100);
@@ -26,7 +26,7 @@ export default css`
 
   input:disabled {
     cursor: not-allowed;
-    border: 1px solid var(--wui-gray-glass-010);
+    border: 1px solid var(--wui-color-gray-glass-010);
   }
 
   input:disabled::placeholder,
@@ -39,15 +39,20 @@ export default css`
   }
 
   input:focus:enabled {
-    background-color: var(--wui-gray-glass-010);
-    border: 1px solid var(--wui-color-accent-100);
-    -webkit-box-shadow: 0px 0px 0px 4px var(--wui-box-shadow-blue);
-    -moz-box-shadow: 0px 0px 0px 4px var(--wui-box-shadow-blue);
-    box-shadow: 0px 0px 0px 4px var(--wui-box-shadow-blue);
+    background-color: var(--wui-color-gray-glass-005);
+    -webkit-box-shadow:
+      inset 0 0 0 1px var(--wui-color-accent-100),
+      0px 0px 0px 4px var(--wui-box-shadow-blue);
+    -moz-box-shadow:
+      inset 0 0 0 1px var(--wui-color-accent-100),
+      0px 0px 0px 4px var(--wui-box-shadow-blue);
+    box-shadow:
+      inset 0 0 0 1px var(--wui-color-accent-100),
+      0px 0px 0px 4px var(--wui-box-shadow-blue);
   }
 
   input:hover:enabled {
-    background-color: var(--wui-gray-glass-010);
+    background-color: var(--wui-color-gray-glass-005);
   }
 
   wui-icon {
diff --git a/packages/ui/src/composites/wui-link/styles.ts b/packages/ui/src/composites/wui-link/styles.ts
index f0ebf44b7e..baac1df30e 100644
--- a/packages/ui/src/composites/wui-link/styles.ts
+++ b/packages/ui/src/composites/wui-link/styles.ts
@@ -10,6 +10,10 @@ export default css`
 
   button:disabled {
     background-color: transparent;
-    color: var(--wui-gray-glass-015);
+    color: var(--wui-color-gray-glass-015);
+  }
+
+  button:hover {
+    background-color: var(--wui-color-gray-glass-005);
   }
 `
diff --git a/packages/ui/src/composites/wui-list-accordion/styles.ts b/packages/ui/src/composites/wui-list-accordion/styles.ts
index 73bd7a4915..b314bcc6c0 100644
--- a/packages/ui/src/composites/wui-list-accordion/styles.ts
+++ b/packages/ui/src/composites/wui-list-accordion/styles.ts
@@ -8,7 +8,7 @@ export default css`
     gap: var(--wui-spacing-s);
     padding: 17px 18px 17px var(--wui-spacing-m);
     width: 100%;
-    background-color: var(--wui-gray-glass-002);
+    background-color: var(--wui-color-gray-glass-002);
     border-radius: var(--wui-border-radius-xs);
     color: var(--wui-color-fg-250);
   }
diff --git a/packages/ui/src/composites/wui-list-button/styles.ts b/packages/ui/src/composites/wui-list-button/styles.ts
index 7315d5e7a4..39b4916bdf 100644
--- a/packages/ui/src/composites/wui-list-button/styles.ts
+++ b/packages/ui/src/composites/wui-list-button/styles.ts
@@ -5,7 +5,7 @@ export default css`
     column-gap: var(--wui-spacing-s);
     padding: 16.5px var(--wui-spacing-l) 16.5px var(--wui-spacing-xs);
     width: 100%;
-    background-color: var(--wui-gray-glass-002);
+    background-color: var(--wui-color-gray-glass-002);
     border-radius: var(--wui-border-radius-xs);
     color: var(--wui-color-fg-100);
     justify-content: center;
@@ -13,7 +13,7 @@ export default css`
   }
 
   button:disabled {
-    background-color: var(--wui-gray-glass-015);
-    color: var(--wui-gray-glass-015);
+    background-color: var(--wui-color-gray-glass-015);
+    color: var(--wui-color-gray-glass-015);
   }
 `
diff --git a/packages/ui/src/composites/wui-list-content/styles.ts b/packages/ui/src/composites/wui-list-content/styles.ts
index 1a9047f1e0..4036dc2711 100644
--- a/packages/ui/src/composites/wui-list-content/styles.ts
+++ b/packages/ui/src/composites/wui-list-content/styles.ts
@@ -6,7 +6,7 @@ export default css`
     column-gap: var(--wui-spacing-s);
     padding: 17px 18px 17px var(--wui-spacing-m);
     width: 100%;
-    background-color: var(--wui-gray-glass-002);
+    background-color: var(--wui-color-gray-glass-002);
     border-radius: var(--wui-border-radius-xs);
     color: var(--wui-color-fg-250);
   }
diff --git a/packages/ui/src/composites/wui-list-description/styles.ts b/packages/ui/src/composites/wui-list-description/styles.ts
index 38f1512983..fec22fb78b 100644
--- a/packages/ui/src/composites/wui-list-description/styles.ts
+++ b/packages/ui/src/composites/wui-list-description/styles.ts
@@ -8,7 +8,7 @@ export default css`
     align-items: center;
     justify-content: flex-start;
     padding: var(--wui-spacing-s) var(--wui-spacing-m) var(--wui-spacing-s) var(--wui-spacing-s);
-    background-color: var(--wui-gray-glass-002);
+    background-color: var(--wui-color-gray-glass-002);
     border-radius: var(--wui-border-radius-xs);
   }
 
diff --git a/packages/ui/src/composites/wui-list-item/styles.ts b/packages/ui/src/composites/wui-list-item/styles.ts
index 6425cd3422..0424fefb60 100644
--- a/packages/ui/src/composites/wui-list-item/styles.ts
+++ b/packages/ui/src/composites/wui-list-item/styles.ts
@@ -5,7 +5,7 @@ export default css`
     column-gap: var(--wui-spacing-s);
     padding: 11px 18px 11px var(--wui-spacing-s);
     width: 100%;
-    background-color: var(--wui-gray-glass-002);
+    background-color: var(--wui-color-gray-glass-002);
     border-radius: var(--wui-border-radius-xs);
     color: var(--wui-color-fg-250);
     transition:
@@ -26,7 +26,7 @@ export default css`
   button > wui-image {
     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);
     border-radius: var(--wui-border-radius-3xl);
   }
 
@@ -38,11 +38,11 @@ export default css`
   }
 
   button > wui-icon-box[data-variant='blue'] {
-    box-shadow: 0 0 0 2px var(--wui-accent-glass-005);
+    box-shadow: 0 0 0 2px var(--wui-color-accent-glass-005);
   }
 
   button > wui-icon-box[data-variant='overlay'] {
-    box-shadow: 0 0 0 2px var(--wui-gray-glass-005);
+    box-shadow: 0 0 0 2px var(--wui-color-gray-glass-005);
   }
 
   button > wui-icon-box[data-variant='square-blue'] {
@@ -61,7 +61,7 @@ export default css`
     left: 0;
     right: 0;
     border-radius: inherit;
-    border: 1px solid var(--wui-accent-glass-010);
+    border: 1px solid var(--wui-color-accent-glass-010);
     pointer-events: none;
   }
 
@@ -71,8 +71,8 @@ export default css`
   }
 
   button:disabled {
-    background-color: var(--wui-gray-glass-015);
-    color: var(--wui-gray-glass-015);
+    background-color: var(--wui-color-gray-glass-015);
+    color: var(--wui-color-gray-glass-015);
   }
 
   button[data-loading='true'] > wui-icon {
diff --git a/packages/ui/src/composites/wui-list-network/styles.ts b/packages/ui/src/composites/wui-list-network/styles.ts
index 32298534d7..2b61b39b28 100644
--- a/packages/ui/src/composites/wui-list-network/styles.ts
+++ b/packages/ui/src/composites/wui-list-network/styles.ts
@@ -5,7 +5,7 @@ export default css`
     column-gap: var(--wui-spacing-s);
     padding: 7px var(--wui-spacing-l) 7px var(--wui-spacing-xs);
     width: 100%;
-    background-color: var(--wui-gray-glass-002);
+    background-color: var(--wui-color-gray-glass-002);
     border-radius: var(--wui-border-radius-xs);
     color: var(--wui-color-fg-100);
   }
@@ -25,12 +25,12 @@ export default css`
   }
 
   button:disabled {
-    background-color: var(--wui-gray-glass-015);
-    color: var(--wui-gray-glass-015);
+    background-color: var(--wui-color-gray-glass-015);
+    color: var(--wui-color-gray-glass-015);
   }
 
   button:disabled > wui-tag {
-    background-color: var(--wui-gray-glass-010);
+    background-color: var(--wui-color-gray-glass-010);
     color: var(--wui-color-fg-300);
   }
 `
diff --git a/packages/ui/src/composites/wui-list-social/styles.ts b/packages/ui/src/composites/wui-list-social/styles.ts
index 63b3efb261..7fade72402 100644
--- a/packages/ui/src/composites/wui-list-social/styles.ts
+++ b/packages/ui/src/composites/wui-list-social/styles.ts
@@ -6,7 +6,7 @@ export default css`
     padding: 7px var(--wui-spacing-l) 7px var(--wui-spacing-xs);
     width: 100%;
     justify-content: flex-start;
-    background-color: var(--wui-gray-glass-002);
+    background-color: var(--wui-color-gray-glass-002);
     border-radius: var(--wui-border-radius-xs);
     color: var(--wui-color-fg-100);
   }
@@ -32,7 +32,7 @@ export default css`
   }
 
   button:disabled {
-    background-color: var(--wui-gray-glass-015);
-    color: var(--wui-gray-glass-015);
+    background-color: var(--wui-color-gray-glass-015);
+    color: var(--wui-color-gray-glass-015);
   }
 `
diff --git a/packages/ui/src/composites/wui-list-token/styles.ts b/packages/ui/src/composites/wui-list-token/styles.ts
index 8984bffbc6..eb25105739 100644
--- a/packages/ui/src/composites/wui-list-token/styles.ts
+++ b/packages/ui/src/composites/wui-list-token/styles.ts
@@ -7,7 +7,7 @@ export default css`
     justify-content: space-between;
     width: 100%;
     border-radius: var(--wui-border-radius-xs);
-    background-color: var(--wui-gray-glass-002);
+    background-color: var(--wui-color-gray-glass-002);
   }
 
   button[data-clickable='false'] {
diff --git a/packages/ui/src/composites/wui-list-wallet-transaction/styles.ts b/packages/ui/src/composites/wui-list-wallet-transaction/styles.ts
index edff0ea4ca..7a1de7c6af 100644
--- a/packages/ui/src/composites/wui-list-wallet-transaction/styles.ts
+++ b/packages/ui/src/composites/wui-list-wallet-transaction/styles.ts
@@ -7,7 +7,7 @@ export default css`
     gap: var(--wui-spacing-l);
     padding: 17px 18px 17px var(--wui-spacing-m);
     width: 100%;
-    background-color: var(--wui-gray-glass-002);
+    background-color: var(--wui-color-gray-glass-002);
     border-radius: var(--wui-border-radius-xs);
     color: var(--wui-color-fg-250);
   }
diff --git a/packages/ui/src/composites/wui-list-wallet/styles.ts b/packages/ui/src/composites/wui-list-wallet/styles.ts
index 675d84f6c8..9cd6bfadd0 100644
--- a/packages/ui/src/composites/wui-list-wallet/styles.ts
+++ b/packages/ui/src/composites/wui-list-wallet/styles.ts
@@ -5,7 +5,7 @@ export default css`
     column-gap: var(--wui-spacing-s);
     padding: 7px var(--wui-spacing-l) 7px var(--wui-spacing-xs);
     width: 100%;
-    background-color: var(--wui-gray-glass-002);
+    background-color: var(--wui-color-gray-glass-002);
     border-radius: var(--wui-border-radius-xs);
     color: var(--wui-color-fg-100);
   }
@@ -20,12 +20,12 @@ export default css`
   }
 
   button:disabled {
-    background-color: var(--wui-gray-glass-015);
-    color: var(--wui-gray-glass-015);
+    background-color: var(--wui-color-gray-glass-015);
+    color: var(--wui-color-gray-glass-015);
   }
 
   button:disabled > wui-tag {
-    background-color: var(--wui-gray-glass-010);
+    background-color: var(--wui-color-gray-glass-010);
     color: var(--wui-color-fg-300);
   }
 `
diff --git a/packages/ui/src/composites/wui-logo-select/styles.ts b/packages/ui/src/composites/wui-logo-select/styles.ts
index aa0c94f803..6f3f0cfa96 100644
--- a/packages/ui/src/composites/wui-logo-select/styles.ts
+++ b/packages/ui/src/composites/wui-logo-select/styles.ts
@@ -9,7 +9,7 @@ export default css`
   button {
     width: 100%;
     height: 56px;
-    background: var(--wui-gray-glass-002);
+    background: var(--wui-color-gray-glass-002);
     border-radius: var(--wui-border-radius-xs);
   }
 `
diff --git a/packages/ui/src/composites/wui-logo/styles.ts b/packages/ui/src/composites/wui-logo/styles.ts
index e9e082f02e..bce8088892 100644
--- a/packages/ui/src/composites/wui-logo/styles.ts
+++ b/packages/ui/src/composites/wui-logo/styles.ts
@@ -8,7 +8,7 @@ export default css`
     width: 40px;
     height: 40px;
     border-radius: var(--wui-border-radius-3xl);
-    border: 1px solid var(--wui-gray-glass-005);
+    border: 1px solid var(--wui-color-gray-glass-005);
     overflow: hidden;
   }
 
diff --git a/packages/ui/src/composites/wui-network-button/styles.ts b/packages/ui/src/composites/wui-network-button/styles.ts
index 2d504b6b6a..62b896cc1d 100644
--- a/packages/ui/src/composites/wui-network-button/styles.ts
+++ b/packages/ui/src/composites/wui-network-button/styles.ts
@@ -11,24 +11,24 @@ export default css`
     gap: var(--wui-spacing-xs);
     padding: var(--wui-spacing-2xs) var(--wui-spacing-s) var(--wui-spacing-2xs)
       var(--wui-spacing-xs);
-    border: 1px solid var(--wui-gray-glass-010);
-    background-color: var(--wui-gray-glass-005);
+    border: 1px solid var(--wui-color-gray-glass-010);
+    background-color: var(--wui-color-gray-glass-005);
     color: var(--wui-color-fg-100);
   }
 
   button:disabled {
-    border: 1px solid var(--wui-gray-glass-005);
-    background-color: var(--wui-gray-glass-015);
-    color: var(--wui-gray-glass-015);
+    border: 1px solid var(--wui-color-gray-glass-005);
+    background-color: var(--wui-color-gray-glass-015);
+    color: var(--wui-color-gray-glass-015);
   }
 
   @media (hover: hover) and (pointer: fine) {
     button:hover:enabled {
-      background-color: var(--wui-gray-glass-010);
+      background-color: var(--wui-color-gray-glass-010);
     }
 
     button:active:enabled {
-      background-color: var(--wui-gray-glass-015);
+      background-color: var(--wui-color-gray-glass-015);
     }
   }
 
@@ -37,6 +37,6 @@ export default css`
     border-radius: var(--wui-border-radius-3xl);
     width: 24px;
     height: 24px;
-    box-shadow: 0 0 0 2px var(--wui-gray-glass-005);
+    box-shadow: 0 0 0 2px var(--wui-color-gray-glass-005);
   }
 `
diff --git a/packages/ui/src/composites/wui-network-image/index.ts b/packages/ui/src/composites/wui-network-image/index.ts
index 63c106819b..ac4c0550c0 100644
--- a/packages/ui/src/composites/wui-network-image/index.ts
+++ b/packages/ui/src/composites/wui-network-image/index.ts
@@ -28,7 +28,7 @@ export class WuiNetworkImage extends LitElement {
     const networkImagesBySize = { sm: networkSvgSm, md: networkSvgMd, lg: networkSvgLg }
     this.style.cssText = `
       --local-stroke: ${
-        this.selected ? 'var(--wui-color-accent-100)' : 'var(--wui-gray-glass-010)'
+        this.selected ? 'var(--wui-color-accent-100)' : 'var(--wui-color-gray-glass-010)'
       };
       --local-path: var(--wui-path-network-${this.size});
       --local-width:  var(--wui-width-network-${this.size});
diff --git a/packages/ui/src/composites/wui-network-image/styles.ts b/packages/ui/src/composites/wui-network-image/styles.ts
index 578523456e..02212bc8c5 100644
--- a/packages/ui/src/composites/wui-network-image/styles.ts
+++ b/packages/ui/src/composites/wui-network-image/styles.ts
@@ -18,7 +18,7 @@ export default css`
     width: 100%;
     height: 100%;
     z-index: 1;
-    fill: var(--wui-gray-glass-002);
+    fill: var(--wui-color-gray-glass-002);
   }
 
   svg > path {
@@ -30,7 +30,7 @@ export default css`
     height: 100%;
     -webkit-clip-path: var(--local-path);
     clip-path: var(--local-path);
-    background: var(--wui-gray-glass-002);
+    background: var(--wui-color-gray-glass-002);
   }
 
   wui-icon {
diff --git a/packages/ui/src/composites/wui-notice-card/styles.ts b/packages/ui/src/composites/wui-notice-card/styles.ts
index 9f49330ae9..ce23e99a74 100644
--- a/packages/ui/src/composites/wui-notice-card/styles.ts
+++ b/packages/ui/src/composites/wui-notice-card/styles.ts
@@ -13,14 +13,14 @@ 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-accent-glass-015);
+    background-color: var(--wui-color-accent-glass-015);
   }
 
   button:hover {
-    background-color: var(--wui-accent-glass-010) !important;
+    background-color: var(--wui-color-accent-glass-010) !important;
   }
 
   button:active {
-    background-color: var(--wui-accent-glass-020) !important;
+    background-color: var(--wui-color-accent-glass-020) !important;
   }
 `
diff --git a/packages/ui/src/composites/wui-onramp-activity-item/styles.ts b/packages/ui/src/composites/wui-onramp-activity-item/styles.ts
index e211bb873e..01d6177f5f 100644
--- a/packages/ui/src/composites/wui-onramp-activity-item/styles.ts
+++ b/packages/ui/src/composites/wui-onramp-activity-item/styles.ts
@@ -17,7 +17,7 @@ export default css`
   }
 
   :host > wui-flex:hover {
-    background-color: var(--wui-gray-glass-002);
+    background-color: var(--wui-color-gray-glass-002);
   }
 
   .purchase-image-container {
@@ -44,7 +44,7 @@ export default css`
     position: absolute;
     inset: 0;
     border-radius: calc(var(--wui-icon-box-size-lg) / 2);
-    box-shadow: inset 0 0 0 1px var(--wui-gray-glass-005);
+    box-shadow: inset 0 0 0 1px var(--wui-color-gray-glass-005);
   }
 
   .purchase-image-container wui-icon-box {
diff --git a/packages/ui/src/composites/wui-onramp-provider-item/styles.ts b/packages/ui/src/composites/wui-onramp-provider-item/styles.ts
index 8df40e6f75..80c576c386 100644
--- a/packages/ui/src/composites/wui-onramp-provider-item/styles.ts
+++ b/packages/ui/src/composites/wui-onramp-provider-item/styles.ts
@@ -4,7 +4,7 @@ export default css`
   button {
     padding: var(--wui-spacing-s);
     border-radius: var(--wui-border-radius-xs);
-    background-color: var(--wui-gray-glass-002);
+    background-color: var(--wui-color-gray-glass-002);
     width: 100%;
     display: flex;
     align-items: center;
@@ -15,7 +15,7 @@ export default css`
   }
 
   button:hover {
-    background-color: var(--wui-gray-glass-005);
+    background-color: var(--wui-color-gray-glass-005);
   }
 
   .provider-image {
@@ -35,7 +35,7 @@ export default css`
     position: absolute;
     inset: 0;
     border-radius: calc(var(--wui-border-radius-xs) - calc(var(--wui-spacing-s) / 2));
-    box-shadow: inset 0 0 0 1px var(--wui-gray-glass-005);
+    box-shadow: inset 0 0 0 1px var(--wui-color-gray-glass-005);
   }
 
   .network-icon {
@@ -44,7 +44,7 @@ export default css`
     border-radius: calc(var(--wui-spacing-m) / 2);
     overflow: hidden;
     box-shadow:
-      0 0 0 3px var(--wui-gray-glass-002),
+      0 0 0 3px var(--wui-color-gray-glass-002),
       0 0 0 3px var(--wui-color-modal-bg);
     transition: box-shadow var(--wui-ease-out-power-1) var(--wui-duration-md);
     will-change: box-shadow;
@@ -52,7 +52,7 @@ export default css`
 
   button:hover .network-icon {
     box-shadow:
-      0 0 0 3px var(--wui-gray-glass-005),
+      0 0 0 3px var(--wui-color-gray-glass-005),
       0 0 0 3px var(--wui-color-modal-bg);
   }
 `
diff --git a/packages/ui/src/composites/wui-preview-item/styles.ts b/packages/ui/src/composites/wui-preview-item/styles.ts
index 2186799406..73d9a81e08 100644
--- a/packages/ui/src/composites/wui-preview-item/styles.ts
+++ b/packages/ui/src/composites/wui-preview-item/styles.ts
@@ -5,8 +5,8 @@ export default css`
     display: flex;
     gap: var(--wui-spacing-xs);
     border-radius: var(--wui-border-radius-3xl);
-    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);
     padding: var(--wui-spacing-2xs) var(--wui-spacing-xs) var(--wui-spacing-2xs)
       var(--wui-spacing-s);
     align-items: center;
@@ -17,8 +17,8 @@ export default css`
   wui-image {
     width: 32px;
     height: 32px;
-    border: 1px solid var(--wui-gray-glass-002);
+    border: 1px solid var(--wui-color-gray-glass-002);
     border-radius: var(--wui-border-radius-3xl);
-    box-shadow: 0 0 0 2px var(--wui-gray-glass-002);
+    box-shadow: 0 0 0 2px var(--wui-color-gray-glass-002);
   }
 `
diff --git a/packages/ui/src/composites/wui-profile-button/styles.ts b/packages/ui/src/composites/wui-profile-button/styles.ts
index faa2292e9f..93c4f4902a 100644
--- a/packages/ui/src/composites/wui-profile-button/styles.ts
+++ b/packages/ui/src/composites/wui-profile-button/styles.ts
@@ -2,9 +2,9 @@ import { css } from 'lit'
 
 export default css`
   button {
-    background-color: var(--wui-gray-glass-002);
+    background-color: var(--wui-color-gray-glass-002);
     border-radius: var(--wui-border-radius-3xl);
-    border: 1px solid var(--wui-gray-glass-002);
+    border: 1px solid var(--wui-color-gray-glass-002);
     padding: var(--wui-spacing-xs) var(--wui-spacing-s) var(--wui-spacing-xs) var(--wui-spacing-xs);
     position: relative;
   }
@@ -13,7 +13,7 @@ export default css`
     width: 32px;
     height: 32px;
     box-shadow: 0 0 0 0;
-    outline: 3px solid var(--wui-gray-glass-005);
+    outline: 3px solid var(--wui-color-gray-glass-005);
   }
 
   wui-icon-box,
diff --git a/packages/ui/src/composites/wui-promo/styles.ts b/packages/ui/src/composites/wui-promo/styles.ts
index fbffaff5e8..83c64de4e0 100644
--- a/packages/ui/src/composites/wui-promo/styles.ts
+++ b/packages/ui/src/composites/wui-promo/styles.ts
@@ -6,20 +6,20 @@ export default css`
     gap: var(--wui-spacing-3xs);
     align-items: center;
     padding: 6.25px var(--wui-spacing-xs) 7.25px var(--wui-spacing-s);
-    background-color: var(--wui-gray-glass-090);
+    background-color: var(--wui-color-gray-glass-090);
     border-radius: var(--wui-border-radius-3xl);
-    border: 1px solid var(--wui-gray-glass-060);
+    border: 1px solid var(--wui-color-gray-glass-060);
     transition: background-color var(--wui-duration-md) var(--wui-ease-inout-power-1);
     will-change: background-color;
   }
 
   @media (hover: hover) and (pointer: fine) {
     button:hover:enabled {
-      background-color: var(--wui-gray-glass-080);
+      background-color: var(--wui-color-gray-glass-080);
     }
 
     button:active:enabled {
-      background-color: var(--wui-gray-glass-060);
+      background-color: var(--wui-color-gray-glass-060);
     }
   }
 `
diff --git a/packages/ui/src/composites/wui-snackbar/styles.ts b/packages/ui/src/composites/wui-snackbar/styles.ts
index f7aa1e429a..03e7db04ea 100644
--- a/packages/ui/src/composites/wui-snackbar/styles.ts
+++ b/packages/ui/src/composites/wui-snackbar/styles.ts
@@ -7,7 +7,7 @@ export default css`
     align-items: center;
     padding: var(--wui-spacing-xs) var(--wui-spacing-m) var(--wui-spacing-xs) var(--wui-spacing-xs);
     border-radius: var(--wui-border-radius-3xl);
-    border: 1px solid var(--wui-gray-glass-005);
+    border: 1px solid var(--wui-color-gray-glass-005);
     box-sizing: border-box;
     max-height: 40px;
     background-color: var(--wui-color-bg-175);
diff --git a/packages/ui/src/composites/wui-tabs/styles.ts b/packages/ui/src/composites/wui-tabs/styles.ts
index 09f8c371af..36af76ff97 100644
--- a/packages/ui/src/composites/wui-tabs/styles.ts
+++ b/packages/ui/src/composites/wui-tabs/styles.ts
@@ -3,7 +3,7 @@ import { css } from 'lit'
 export default css`
   :host {
     display: inline-flex;
-    background-color: var(--wui-gray-glass-002);
+    background-color: var(--wui-color-gray-glass-002);
     border-radius: var(--wui-border-radius-3xl);
     padding: var(--wui-spacing-3xs);
     position: relative;
@@ -21,8 +21,8 @@ export default css`
     width: var(--local-tab-width);
     height: 28px;
     border-radius: var(--wui-border-radius-3xl);
-    background-color: var(--wui-gray-glass-002);
-    box-shadow: inset 0 0 0 1px var(--wui-gray-glass-002);
+    background-color: var(--wui-color-gray-glass-002);
+    box-shadow: inset 0 0 0 1px var(--wui-color-gray-glass-002);
     transform: translateX(calc(var(--local-tab) * var(--local-tab-width)));
     transition: transform var(--wui-ease-out-power-1) var(--wui-duration-md);
     will-change: background-color, opacity;
diff --git a/packages/ui/src/composites/wui-tag/styles.ts b/packages/ui/src/composites/wui-tag/styles.ts
index 413dfe9f33..7679ca4c93 100644
--- a/packages/ui/src/composites/wui-tag/styles.ts
+++ b/packages/ui/src/composites/wui-tag/styles.ts
@@ -15,12 +15,12 @@ export default css`
   }
 
   :host([data-variant='main']) {
-    background-color: var(--wui-accent-glass-015);
+    background-color: var(--wui-color-accent-glass-015);
     color: var(--wui-color-accent-100);
   }
 
   :host([data-variant='shade']) {
-    background-color: var(--wui-gray-glass-010);
+    background-color: var(--wui-color-gray-glass-010);
     color: var(--wui-color-fg-200);
   }
 
diff --git a/packages/ui/src/composites/wui-token-button/styles.ts b/packages/ui/src/composites/wui-token-button/styles.ts
index cb252eff47..05f4ee6a47 100644
--- a/packages/ui/src/composites/wui-token-button/styles.ts
+++ b/packages/ui/src/composites/wui-token-button/styles.ts
@@ -10,16 +10,16 @@ export default css`
     padding: var(--wui-spacing-xs);
     padding-right: var(--wui-spacing-1xs);
     height: 40px;
-    border-radius: var(--wui-border-radius-3xl);
-    background: var(--wui-gray-glass-002);
+    border-radius: var(--wui-border-radius-l);
+    background: var(--wui-color-gray-glass-002);
     border-width: 0px;
-    box-shadow: inset 0 0 0 1px var(--wui-gray-glass-002);
+    box-shadow: inset 0 0 0 1px var(--wui-color-gray-glass-002);
   }
 
   :host > button wui-image {
     width: 24px;
     height: 24px;
     border-radius: var(--wui-border-radius-s);
-    box-shadow: inset 0 0 0 1px var(--wui-gray-glass-010);
+    box-shadow: inset 0 0 0 1px var(--wui-color-gray-glass-010);
   }
 `
diff --git a/packages/ui/src/composites/wui-token-list-item/styles.ts b/packages/ui/src/composites/wui-token-list-item/styles.ts
index 6b5aa1f3a2..9a0afb4603 100644
--- a/packages/ui/src/composites/wui-token-list-item/styles.ts
+++ b/packages/ui/src/composites/wui-token-list-item/styles.ts
@@ -15,7 +15,7 @@ export default css`
   }
 
   :host > wui-flex:hover {
-    background-color: var(--wui-gray-glass-002);
+    background-color: var(--wui-color-gray-glass-002);
   }
 
   :host([disabled]) > wui-flex {
@@ -41,7 +41,7 @@ export default css`
     position: absolute;
     content: '';
     inset: 0;
-    box-shadow: inset 0 0 0 1px var(--wui-gray-glass-010);
+    box-shadow: inset 0 0 0 1px var(--wui-color-gray-glass-010);
     border-radius: var(--wui-border-radius-l);
   }
 
diff --git a/packages/ui/src/composites/wui-tooltip/styles.ts b/packages/ui/src/composites/wui-tooltip/styles.ts
index 64e63c59b7..976c79a4d7 100644
--- a/packages/ui/src/composites/wui-tooltip/styles.ts
+++ b/packages/ui/src/composites/wui-tooltip/styles.ts
@@ -12,7 +12,7 @@ export default css`
 
   :host([data-variant='shade']) {
     background-color: var(--wui-color-bg-150);
-    border: 1px solid var(--wui-gray-glass-005);
+    border: 1px solid var(--wui-color-gray-glass-005);
   }
 
   :host([data-variant='shade']) > wui-text {
diff --git a/packages/ui/src/composites/wui-transaction-visual/styles.ts b/packages/ui/src/composites/wui-transaction-visual/styles.ts
index d64a3ba692..9e903ffa15 100644
--- a/packages/ui/src/composites/wui-transaction-visual/styles.ts
+++ b/packages/ui/src/composites/wui-transaction-visual/styles.ts
@@ -8,8 +8,8 @@ export default css`
     position: relative;
     width: 40px;
     height: 40px;
-    box-shadow: inset 0 0 0 1px var(--wui-gray-glass-005);
-    background-color: var(--wui-gray-glass-005);
+    box-shadow: inset 0 0 0 1px var(--wui-color-gray-glass-005);
+    background-color: var(--wui-color-gray-glass-005);
   }
 
   :host > wui-flex wui-image {
diff --git a/packages/ui/src/composites/wui-wallet-image/styles.ts b/packages/ui/src/composites/wui-wallet-image/styles.ts
index e91f198d42..ffbdeabb4b 100644
--- a/packages/ui/src/composites/wui-wallet-image/styles.ts
+++ b/packages/ui/src/composites/wui-wallet-image/styles.ts
@@ -3,7 +3,7 @@ import { css } from 'lit'
 export default css`
   :host {
     position: relative;
-    background-color: var(--wui-gray-glass-002);
+    background-color: var(--wui-color-gray-glass-002);
     display: flex;
     justify-content: center;
     align-items: center;
@@ -27,12 +27,12 @@ export default css`
     left: 0;
     right: 0;
     border-radius: inherit;
-    border: 1px solid var(--wui-gray-glass-010);
+    border: 1px solid var(--wui-color-gray-glass-010);
     pointer-events: none;
   }
 
   :host([name='Extension'])::after {
-    border: 1px solid var(--wui-accent-glass-010);
+    border: 1px solid var(--wui-color-accent-glass-010);
   }
 
   :host([data-wallet-icon='allWallets']) {
@@ -40,7 +40,7 @@ export default css`
   }
 
   :host([data-wallet-icon='allWallets'])::after {
-    border: 1px solid var(--wui-accent-glass-010);
+    border: 1px solid var(--wui-color-accent-glass-010);
   }
 
   wui-icon[data-parent-size='inherit'] {
@@ -75,7 +75,7 @@ export default css`
     right: -1px;
     bottom: -2px;
     z-index: 1;
-    border: 2px solid var(--wui-color-bg-base-150, #1e1f1f);
+    border: 2px solid var(--wui-color-bg-150, #1e1f1f);
     padding: 1px;
   }
 `
diff --git a/packages/ui/src/layout/wui-separator/styles.ts b/packages/ui/src/layout/wui-separator/styles.ts
index 2e9817db7f..4ff2287135 100644
--- a/packages/ui/src/layout/wui-separator/styles.ts
+++ b/packages/ui/src/layout/wui-separator/styles.ts
@@ -6,7 +6,7 @@ export default css`
     display: flex;
     width: 100%;
     height: 1px;
-    background-color: var(--wui-gray-glass-005);
+    background-color: var(--wui-color-gray-glass-005);
     justify-content: center;
     align-items: center;
   }
diff --git a/packages/ui/src/utils/ThemeUtil.ts b/packages/ui/src/utils/ThemeUtil.ts
index 80b743834b..abd71f3768 100644
--- a/packages/ui/src/utils/ThemeUtil.ts
+++ b/packages/ui/src/utils/ThemeUtil.ts
@@ -195,35 +195,8 @@ function createRootStyles(themeVariables?: ThemeVariables) {
         --wui-color-accent-090: var(--wui-color-accent-base-090);
         --wui-color-accent-080: var(--wui-color-accent-base-080);
 
-        --wui-accent-glass-090: var(--wui-accent-glass-base-090);
-        --wui-accent-glass-080: var(--wui-accent-glass-base-080);
-        --wui-accent-glass-020: var(--wui-accent-glass-base-020);
-        --wui-accent-glass-015: var(--wui-accent-glass-base-015);
-        --wui-accent-glass-010: var(--wui-accent-glass-base-010);
-        --wui-accent-glass-005: var(--wui-accent-glass-base-005);
-        --wui-accent-glass-002: var(--wui-accent-glass-base-002);
-
-        --wui-color-fg-100: var(--wui-color-fg-base-100);
-        --wui-color-fg-125: var(--wui-color-fg-base-125);
-        --wui-color-fg-150: var(--wui-color-fg-base-150);
-        --wui-color-fg-175: var(--wui-color-fg-base-175);
-        --wui-color-fg-200: var(--wui-color-fg-base-200);
-        --wui-color-fg-225: var(--wui-color-fg-base-225);
-        --wui-color-fg-250: var(--wui-color-fg-base-250);
-        --wui-color-fg-275: var(--wui-color-fg-base-275);
-        --wui-color-fg-300: var(--wui-color-fg-base-300);
-
-        --wui-color-bg-100: var(--wui-color-bg-base-100);
-        --wui-color-bg-125: var(--wui-color-bg-base-125);
-        --wui-color-bg-150: var(--wui-color-bg-base-150);
-        --wui-color-bg-175: var(--wui-color-bg-base-175);
-        --wui-color-bg-200: var(--wui-color-bg-base-200);
-        --wui-color-bg-225: var(--wui-color-bg-base-225);
-        --wui-color-bg-250: var(--wui-color-bg-base-250);
-        --wui-color-bg-275: var(--wui-color-bg-base-275);
-        --wui-color-bg-300: var(--wui-color-bg-base-300);
-
         --wui-color-success-100: var(--wui-color-success-base-100);
+
         --wui-color-error-100: var(--wui-color-error-base-100);
 
         --wui-icon-box-bg-error-100: var(--wui-icon-box-bg-error-base-100);
@@ -231,13 +204,13 @@ 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-all-wallets-bg-100: var(--wui-all-wallets-bg-100);
 
         --wui-avatar-border: var(--wui-avatar-border-base);
 
         --wui-thumbnail-border: var(--wui-thumbnail-border-base);
 
-        --wui-box-shadow-blue: rgba(71, 161, 255, 0.16);
+        --wui-box-shadow-blue: var(--wui-color-accent-glass-020);
       }
 
       @supports (background: color-mix(in srgb, white 50%, black)) {
@@ -248,19 +221,13 @@ function createRootStyles(themeVariables?: ThemeVariables) {
             var(--wui-color-modal-bg-base)
           );
 
-          --wui-box-shadow-blue: color-mix(in srgb, var(--wui-color-accent-100) 16%, transparent);
+          --wui-box-shadow-blue: color-mix(in srgb, var(--wui-color-accent-100) 20%, transparent);
 
-          --wui-color-accent-090: color-mix(
+          --wui-color-accent-100: color-mix(
             in srgb,
-            var(--wui-color-accent-base-100) 90%,
-            var(--w3m-default)
-          );
-          --wui-color-accent-080: color-mix(
-            in srgb,
-            var(--wui-color-accent-base-100) 80%,
-            var(--w3m-default)
+            var(--wui-color-accent-base-100) 100%,
+            transparent
           );
-
           --wui-color-accent-090: color-mix(
             in srgb,
             var(--wui-color-accent-base-100) 90%,
@@ -271,33 +238,32 @@ function createRootStyles(themeVariables?: ThemeVariables) {
             var(--wui-color-accent-base-100) 80%,
             transparent
           );
-
-          --wui-accent-glass-090: color-mix(
+          --wui-color-accent-glass-090: color-mix(
             in srgb,
             var(--wui-color-accent-base-100) 90%,
             transparent
           );
-          --wui-accent-glass-080: color-mix(
+          --wui-color-accent-glass-080: color-mix(
             in srgb,
             var(--wui-color-accent-base-100) 80%,
             transparent
           );
-          --wui-accent-glass-020: color-mix(
+          --wui-color-accent-glass-020: color-mix(
             in srgb,
             var(--wui-color-accent-base-100) 20%,
             transparent
           );
-          --wui-accent-glass-015: color-mix(
+          --wui-color-accent-glass-015: color-mix(
             in srgb,
             var(--wui-color-accent-base-100) 15%,
             transparent
           );
-          --wui-accent-glass-010: color-mix(
+          --wui-color-accent-glass-010: color-mix(
             in srgb,
             var(--wui-color-accent-base-100) 10%,
             transparent
           );
-          --wui-accent-glass-005: color-mix(
+          --wui-color-accent-glass-005: color-mix(
             in srgb,
             var(--wui-color-accent-base-100) 5%,
             transparent
@@ -311,93 +277,93 @@ function createRootStyles(themeVariables?: ThemeVariables) {
           --wui-color-fg-100: color-mix(
             in srgb,
             var(--w3m-color-mix) var(--w3m-color-mix-strength),
-            var(--wui-color-fg-base-100)
+            var(--wui-color-fg-100)
           );
           --wui-color-fg-125: color-mix(
             in srgb,
             var(--w3m-color-mix) var(--w3m-color-mix-strength),
-            var(--wui-color-fg-base-125)
+            var(--wui-color-fg-125)
           );
           --wui-color-fg-150: color-mix(
             in srgb,
             var(--w3m-color-mix) var(--w3m-color-mix-strength),
-            var(--wui-color-fg-base-150)
+            var(--wui-color-fg-150)
           );
           --wui-color-fg-175: color-mix(
             in srgb,
             var(--w3m-color-mix) var(--w3m-color-mix-strength),
-            var(--wui-color-fg-base-175)
+            var(--wui-color-fg-175)
           );
           --wui-color-fg-200: color-mix(
             in srgb,
             var(--w3m-color-mix) var(--w3m-color-mix-strength),
-            var(--wui-color-fg-base-200)
+            var(--wui-color-fg-200)
           );
           --wui-color-fg-225: color-mix(
             in srgb,
             var(--w3m-color-mix) var(--w3m-color-mix-strength),
-            var(--wui-color-fg-base-225)
+            var(--wui-color-fg-225)
           );
           --wui-color-fg-250: color-mix(
             in srgb,
             var(--w3m-color-mix) var(--w3m-color-mix-strength),
-            var(--wui-color-fg-base-250)
+            var(--wui-color-fg-250)
           );
           --wui-color-fg-275: color-mix(
             in srgb,
             var(--w3m-color-mix) var(--w3m-color-mix-strength),
-            var(--wui-color-fg-base-275)
+            var(--wui-color-fg-275)
           );
           --wui-color-fg-300: color-mix(
             in srgb,
             var(--w3m-color-mix) var(--w3m-color-mix-strength),
-            var(--wui-color-fg-base-300)
+            var(--wui-color-fg-300)
           );
 
           --wui-color-bg-100: color-mix(
             in srgb,
             var(--w3m-color-mix) var(--w3m-color-mix-strength),
-            var(--wui-color-bg-base-100)
+            var(--wui-color-bg-100)
           );
           --wui-color-bg-125: color-mix(
             in srgb,
             var(--w3m-color-mix) var(--w3m-color-mix-strength),
-            var(--wui-color-bg-base-125)
+            var(--wui-color-bg-125)
           );
           --wui-color-bg-150: color-mix(
             in srgb,
             var(--w3m-color-mix) var(--w3m-color-mix-strength),
-            var(--wui-color-bg-base-150)
+            var(--wui-color-bg-150)
           );
           --wui-color-bg-175: color-mix(
             in srgb,
             var(--w3m-color-mix) var(--w3m-color-mix-strength),
-            var(--wui-color-bg-base-175)
+            var(--wui-color-bg-175)
           );
           --wui-color-bg-200: color-mix(
             in srgb,
             var(--w3m-color-mix) var(--w3m-color-mix-strength),
-            var(--wui-color-bg-base-200)
+            var(--wui-color-bg-200)
           );
           --wui-color-bg-225: color-mix(
             in srgb,
             var(--w3m-color-mix) var(--w3m-color-mix-strength),
-            var(--wui-color-bg-base-225)
+            var(--wui-color-bg-225)
           );
           --wui-color-bg-250: color-mix(
             in srgb,
             var(--w3m-color-mix) var(--w3m-color-mix-strength),
-            var(--wui-color-bg-base-250)
+            var(--wui-color-bg-250)
           );
           --wui-color-bg-275: color-mix(
             in srgb,
             var(--w3m-color-mix) var(--w3m-color-mix-strength),
-            var(--wui-color-bg-base-275)
+            var(--wui-color-bg-275)
           );
           --wui-color-bg-300: color-mix(
             in srgb,
             var(--w3m-color-mix) var(--w3m-color-mix-strength),
-            var(--wui-color-bg-base-300)
+            var(--wui-color-bg-300)
           );
 
           --wui-color-success-100: color-mix(
@@ -435,7 +401,7 @@ function createRootStyles(themeVariables?: ThemeVariables) {
           --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)
+            var(--wui-all-wallets-bg-100)
           );
 
           --wui-avatar-border: color-mix(
@@ -463,81 +429,77 @@ function createRootStyles(themeVariables?: ThemeVariables) {
         )};
         --wui-color-accent-base-100: var(--w3m-accent);
 
-        --wui-accent-glass-base-090: rgba(71, 161, 255, 0.9);
-        --wui-accent-glass-base-080: rgba(71, 161, 255, 0.8);
-        --wui-accent-glass-base-020: rgba(71, 161, 255, 0.2);
-        --wui-accent-glass-base-015: rgba(71, 161, 255, 0.15);
-        --wui-accent-glass-base-010: rgba(71, 161, 255, 0.1);
-        --wui-accent-glass-base-005: rgba(71, 161, 255, 0.05);
-        --wui-accent-glass-base-002: rgba(71, 161, 255, 0.02);
-
-        --wui-color-fg-base-100: #e4e7e7;
-        --wui-color-fg-base-125: #d0d5d5;
-        --wui-color-fg-base-150: #a8b1b1;
-        --wui-color-fg-base-175: #a8b0b0;
-        --wui-color-fg-base-200: #949e9e;
-        --wui-color-fg-base-225: #868f8f;
-        --wui-color-fg-base-250: #788080;
-        --wui-color-fg-base-275: #788181;
-        --wui-color-fg-base-300: #6e7777;
-
-        --wui-color-bg-base-100: #141414;
-        --wui-color-bg-base-125: #191a1a;
-        --wui-color-bg-base-150: #1e1f1f;
-        --wui-color-bg-base-175: #222525;
-        --wui-color-bg-base-200: #272a2a;
-        --wui-color-bg-base-225: #2c3030;
-        --wui-color-bg-base-250: #313535;
-        --wui-color-bg-base-275: #363b3b;
-        --wui-color-bg-base-300: #3b4040;
+        --wui-color-blueberry-100: hsla(230, 100%, 67%, 1);
+        --wui-color-blueberry-090: hsla(231, 76%, 61%, 1);
+        --wui-color-blueberry-080: hsla(230, 59%, 55%, 1);
+
+        --wui-color-fg-100: #e4e7e7;
+        --wui-color-fg-125: #d0d5d5;
+        --wui-color-fg-150: #a8b1b1;
+        --wui-color-fg-175: #a8b0b0;
+        --wui-color-fg-200: #949e9e;
+        --wui-color-fg-225: #868f8f;
+        --wui-color-fg-250: #788080;
+        --wui-color-fg-275: #788181;
+        --wui-color-fg-300: #6e7777;
+
+        --wui-color-bg-100: #141414;
+        --wui-color-bg-125: #191a1a;
+        --wui-color-bg-150: #1e1f1f;
+        --wui-color-bg-175: #222525;
+        --wui-color-bg-200: #272a2a;
+        --wui-color-bg-225: #2c3030;
+        --wui-color-bg-250: #313535;
+        --wui-color-bg-275: #363b3b;
+        --wui-color-bg-300: #3b4040;
 
         --wui-color-success-base-100: #26d962;
         --wui-color-error-base-100: #f25a67;
 
-        --wui-success-glass-001: rgba(38, 217, 98, 0.01);
-        --wui-success-glass-002: rgba(38, 217, 98, 0.02);
-        --wui-success-glass-005: rgba(38, 217, 98, 0.05);
-        --wui-success-glass-010: rgba(38, 217, 98, 0.1);
-        --wui-success-glass-015: rgba(38, 217, 98, 0.15);
-        --wui-success-glass-020: rgba(38, 217, 98, 0.2);
-        --wui-success-glass-025: rgba(38, 217, 98, 0.25);
-        --wui-success-glass-030: rgba(38, 217, 98, 0.3);
-        --wui-success-glass-060: rgba(38, 217, 98, 0.6);
-        --wui-success-glass-080: rgba(38, 217, 98, 0.8);
-
-        --wui-error-glass-001: rgba(242, 90, 103, 0.01);
-        --wui-error-glass-002: rgba(242, 90, 103, 0.02);
-        --wui-error-glass-005: rgba(242, 90, 103, 0.05);
-        --wui-error-glass-010: rgba(242, 90, 103, 0.1);
-        --wui-error-glass-015: rgba(242, 90, 103, 0.15);
-        --wui-error-glass-020: rgba(242, 90, 103, 0.2);
-        --wui-error-glass-025: rgba(242, 90, 103, 0.25);
-        --wui-error-glass-030: rgba(242, 90, 103, 0.3);
-        --wui-error-glass-060: rgba(242, 90, 103, 0.6);
-        --wui-error-glass-080: rgba(242, 90, 103, 0.8);
+        --wui-color-success-glass-001: rgba(38, 217, 98, 0.01);
+        --wui-color-success-glass-002: rgba(38, 217, 98, 0.02);
+        --wui-color-success-glass-005: rgba(38, 217, 98, 0.05);
+        --wui-color-success-glass-010: rgba(38, 217, 98, 0.1);
+        --wui-color-success-glass-015: rgba(38, 217, 98, 0.15);
+        --wui-color-success-glass-020: rgba(38, 217, 98, 0.2);
+        --wui-color-success-glass-025: rgba(38, 217, 98, 0.25);
+        --wui-color-success-glass-030: rgba(38, 217, 98, 0.3);
+        --wui-color-success-glass-060: rgba(38, 217, 98, 0.6);
+        --wui-color-success-glass-080: rgba(38, 217, 98, 0.8);
+
+        --wui-color-error-glass-001: rgba(242, 90, 103, 0.01);
+        --wui-color-error-glass-002: rgba(242, 90, 103, 0.02);
+        --wui-color-error-glass-005: rgba(242, 90, 103, 0.05);
+        --wui-color-error-glass-010: rgba(242, 90, 103, 0.1);
+        --wui-color-error-glass-015: rgba(242, 90, 103, 0.15);
+        --wui-color-error-glass-020: rgba(242, 90, 103, 0.2);
+        --wui-color-error-glass-025: rgba(242, 90, 103, 0.25);
+        --wui-color-error-glass-030: rgba(242, 90, 103, 0.3);
+        --wui-color-error-glass-060: rgba(242, 90, 103, 0.6);
+        --wui-color-error-glass-080: rgba(242, 90, 103, 0.8);
+
+        --wui-color-gray-glass-001: rgba(255, 255, 255, 0.01);
+        --wui-color-gray-glass-002: rgba(255, 255, 255, 0.02);
+        --wui-color-gray-glass-005: rgba(255, 255, 255, 0.05);
+        --wui-color-gray-glass-010: rgba(255, 255, 255, 0.1);
+        --wui-color-gray-glass-015: rgba(255, 255, 255, 0.15);
+        --wui-color-gray-glass-020: rgba(255, 255, 255, 0.2);
+        --wui-color-gray-glass-025: rgba(255, 255, 255, 0.25);
+        --wui-color-gray-glass-030: rgba(255, 255, 255, 0.3);
+        --wui-color-gray-glass-060: rgba(255, 255, 255, 0.6);
+        --wui-color-gray-glass-080: rgba(255, 255, 255, 0.8);
+        --wui-color-gray-glass-090: rgba(255, 255, 255, 0.9);
 
         --wui-icon-box-bg-error-base-100: #3c2426;
         --wui-icon-box-bg-blue-base-100: #20303f;
         --wui-icon-box-bg-success-base-100: #1f3a28;
         --wui-icon-box-bg-inverse-base-100: #243240;
 
-        --wui-all-wallets-bg-base-100: #222b35;
+        --wui-all-wallets-bg-100: #222b35;
 
         --wui-avatar-border-base: #252525;
 
         --wui-thumbnail-border-base: #252525;
-
-        --wui-gray-glass-001: rgba(255, 255, 255, 0.01);
-        --wui-gray-glass-002: rgba(255, 255, 255, 0.02);
-        --wui-gray-glass-005: rgba(255, 255, 255, 0.05);
-        --wui-gray-glass-010: rgba(255, 255, 255, 0.1);
-        --wui-gray-glass-015: rgba(255, 255, 255, 0.15);
-        --wui-gray-glass-020: rgba(255, 255, 255, 0.2);
-        --wui-gray-glass-025: rgba(255, 255, 255, 0.25);
-        --wui-gray-glass-030: rgba(255, 255, 255, 0.3);
-        --wui-gray-glass-060: rgba(255, 255, 255, 0.6);
-        --wui-gray-glass-080: rgba(255, 255, 255, 0.8);
-        --wui-gray-glass-090: rgba(255, 255, 255, 0.9);
       }
     `,
     dark: css`
@@ -551,81 +513,77 @@ function createRootStyles(themeVariables?: ThemeVariables) {
         )};
         --wui-color-accent-base-100: var(--w3m-accent);
 
-        --wui-accent-glass-base-090: rgba(51, 150, 255, 0.9);
-        --wui-accent-glass-base-080: rgba(51, 150, 255, 0.8);
-        --wui-accent-glass-base-020: rgba(51, 150, 255, 0.2);
-        --wui-accent-glass-base-015: rgba(51, 150, 255, 0.15);
-        --wui-accent-glass-base-010: rgba(51, 150, 255, 0.1);
-        --wui-accent-glass-base-005: rgba(51, 150, 255, 0.05);
-        --wui-accent-glass-base-002: rgba(51, 150, 255, 0.02);
-
-        --wui-color-fg-base-100: #141414;
-        --wui-color-fg-base-125: #2d3131;
-        --wui-color-fg-base-150: #474d4d;
-        --wui-color-fg-base-175: #636d6d;
-        --wui-color-fg-base-200: #798686;
-        --wui-color-fg-base-225: #828f8f;
-        --wui-color-fg-base-250: #8b9797;
-        --wui-color-fg-base-275: #95a0a0;
-        --wui-color-fg-base-300: #9ea9a9;
-
-        --wui-color-bg-base-100: #ffffff;
-        --wui-color-bg-base-125: #f5fafa;
-        --wui-color-bg-base-150: #f3f8f8;
-        --wui-color-bg-base-175: #eef4f4;
-        --wui-color-bg-base-200: #eaf1f1;
-        --wui-color-bg-base-225: #e5eded;
-        --wui-color-bg-base-250: #e1e9e9;
-        --wui-color-bg-base-275: #dce7e7;
-        --wui-color-bg-base-300: #d8e3e3;
+        --wui-color-blueberry-100: hsla(231, 100%, 70%, 1);
+        --wui-color-blueberry-090: hsla(231, 97%, 72%, 1);
+        --wui-color-blueberry-080: hsla(231, 92%, 74%, 1);
+
+        --wui-color-fg-100: #141414;
+        --wui-color-fg-125: #2d3131;
+        --wui-color-fg-150: #474d4d;
+        --wui-color-fg-175: #636d6d;
+        --wui-color-fg-200: #798686;
+        --wui-color-fg-225: #828f8f;
+        --wui-color-fg-250: #8b9797;
+        --wui-color-fg-275: #95a0a0;
+        --wui-color-fg-300: #9ea9a9;
+
+        --wui-color-bg-100: #ffffff;
+        --wui-color-bg-125: #f5fafa;
+        --wui-color-bg-150: #f3f8f8;
+        --wui-color-bg-175: #eef4f4;
+        --wui-color-bg-200: #eaf1f1;
+        --wui-color-bg-225: #e5eded;
+        --wui-color-bg-250: #e1e9e9;
+        --wui-color-bg-275: #dce7e7;
+        --wui-color-bg-300: #d8e3e3;
 
         --wui-color-success-base-100: #26b562;
         --wui-color-error-base-100: #f05142;
 
-        --wui-success-glass-001: rgba(38, 181, 98, 0.01);
-        --wui-success-glass-002: rgba(38, 181, 98, 0.02);
-        --wui-success-glass-005: rgba(38, 181, 98, 0.05);
-        --wui-success-glass-010: rgba(38, 181, 98, 0.1);
-        --wui-success-glass-015: rgba(38, 181, 98, 0.15);
-        --wui-success-glass-020: rgba(38, 181, 98, 0.2);
-        --wui-success-glass-025: rgba(38, 181, 98, 0.25);
-        --wui-success-glass-030: rgba(38, 181, 98, 0.3);
-        --wui-success-glass-060: rgba(38, 181, 98, 0.6);
-        --wui-success-glass-080: rgba(38, 181, 98, 0.8);
-
-        --wui-error-glass-001: rgba(240, 81, 66, 0.01);
-        --wui-error-glass-002: rgba(240, 81, 66, 0.02);
-        --wui-error-glass-005: rgba(240, 81, 66, 0.05);
-        --wui-error-glass-010: rgba(240, 81, 66, 0.1);
-        --wui-error-glass-015: rgba(240, 81, 66, 0.15);
-        --wui-error-glass-020: rgba(240, 81, 66, 0.2);
-        --wui-error-glass-025: rgba(240, 81, 66, 0.25);
-        --wui-error-glass-030: rgba(240, 81, 66, 0.3);
-        --wui-error-glass-060: rgba(240, 81, 66, 0.6);
-        --wui-error-glass-080: rgba(240, 81, 66, 0.8);
+        --wui-color-success-glass-001: rgba(38, 181, 98, 0.01);
+        --wui-color-success-glass-002: rgba(38, 181, 98, 0.02);
+        --wui-color-success-glass-005: rgba(38, 181, 98, 0.05);
+        --wui-color-success-glass-010: rgba(38, 181, 98, 0.1);
+        --wui-color-success-glass-015: rgba(38, 181, 98, 0.15);
+        --wui-color-success-glass-020: rgba(38, 181, 98, 0.2);
+        --wui-color-success-glass-025: rgba(38, 181, 98, 0.25);
+        --wui-color-success-glass-030: rgba(38, 181, 98, 0.3);
+        --wui-color-success-glass-060: rgba(38, 181, 98, 0.6);
+        --wui-color-success-glass-080: rgba(38, 181, 98, 0.8);
+
+        --wui-color-error-glass-001: rgba(240, 81, 66, 0.01);
+        --wui-color-error-glass-002: rgba(240, 81, 66, 0.02);
+        --wui-color-error-glass-005: rgba(240, 81, 66, 0.05);
+        --wui-color-error-glass-010: rgba(240, 81, 66, 0.1);
+        --wui-color-error-glass-015: rgba(240, 81, 66, 0.15);
+        --wui-color-error-glass-020: rgba(240, 81, 66, 0.2);
+        --wui-color-error-glass-025: rgba(240, 81, 66, 0.25);
+        --wui-color-error-glass-030: rgba(240, 81, 66, 0.3);
+        --wui-color-error-glass-060: rgba(240, 81, 66, 0.6);
+        --wui-color-error-glass-080: rgba(240, 81, 66, 0.8);
 
         --wui-icon-box-bg-error-base-100: #f4dfdd;
         --wui-icon-box-bg-blue-base-100: #d9ecfb;
         --wui-icon-box-bg-success-base-100: #daf0e4;
         --wui-icon-box-bg-inverse-base-100: #dcecfc;
 
-        --wui-all-wallets-bg-base-100: #e8f1fa;
+        --wui-all-wallets-bg-100: #e8f1fa;
 
         --wui-avatar-border-base: #f3f4f4;
 
         --wui-thumbnail-border-base: #eaefef;
 
-        --wui-gray-glass-001: rgba(0, 0, 0, 0.01);
-        --wui-gray-glass-002: rgba(0, 0, 0, 0.02);
-        --wui-gray-glass-005: rgba(0, 0, 0, 0.05);
-        --wui-gray-glass-010: rgba(0, 0, 0, 0.1);
-        --wui-gray-glass-015: rgba(0, 0, 0, 0.15);
-        --wui-gray-glass-020: rgba(0, 0, 0, 0.2);
-        --wui-gray-glass-025: rgba(0, 0, 0, 0.25);
-        --wui-gray-glass-030: rgba(0, 0, 0, 0.3);
-        --wui-gray-glass-060: rgba(0, 0, 0, 0.6);
-        --wui-gray-glass-080: rgba(0, 0, 0, 0.8);
-        --wui-gray-glass-090: rgba(0, 0, 0, 0.9);
+        --wui-color-gray-glass-001: rgba(0, 0, 0, 0.01);
+        --wui-color-gray-glass-002: rgba(0, 0, 0, 0.02);
+        --wui-color-gray-glass-005: rgba(0, 0, 0, 0.05);
+        --wui-color-gray-glass-010: rgba(0, 0, 0, 0.1);
+        --wui-color-gray-glass-015: rgba(0, 0, 0, 0.15);
+        --wui-color-gray-glass-020: rgba(0, 0, 0, 0.2);
+        --wui-color-gray-glass-025: rgba(0, 0, 0, 0.25);
+        --wui-color-gray-glass-030: rgba(0, 0, 0, 0.3);
+        --wui-color-gray-glass-060: rgba(0, 0, 0, 0.6);
+        --wui-color-gray-glass-080: rgba(0, 0, 0, 0.8);
+        --wui-color-gray-glass-090: rgba(0, 0, 0, 0.9);
       }
     `
   }
@@ -664,45 +622,48 @@ export const elementStyles = css`
       box-shadow var(--wui-ease-inout-power-1) var(--wui-duration-md);
     will-change: background-color, color;
     outline: none;
-    border: 1px solid transparent;
+    border: none;
     column-gap: var(--wui-spacing-3xs);
     background-color: transparent;
     text-decoration: none;
   }
 
   @media (hover: hover) and (pointer: fine) {
-    button:hover:enabled {
-      background-color: var(--wui-gray-glass-005);
+    button[data-variant='main']:focus-visible:enabled,
+    button[data-variant='main']:hover:enabled {
+      background-color: var(--wui-color-accent-090);
     }
 
-    button:active:enabled {
-      background-color: var(--wui-gray-glass-010);
+    button[data-variant='main']:active:enabled {
+      background-color: var(--wui-color-accent-080);
     }
 
-    button[data-variant='fill']:hover:enabled {
-      background-color: var(--wui-color-accent-090);
+    button[data-variant='inverse']:focus-visible:enabled,
+    button[data-variant='inverse']:hover:enabled {
+      background-color: var(--wui-color-inverse-100);
     }
 
-    button[data-variant='accentBg']:hover:enabled {
-      background: var(--wui-accent-glass-015);
+    button[data-variant='accent']:focus-visible:enabled,
+    button[data-variant='accent']:hover:enabled {
+      background-color: var(--wui-color-accent-glass-010);
     }
 
-    button[data-variant='accentBg']:active:enabled {
-      background: var(--wui-accent-glass-020);
+    button[data-variant='accent-error']:focus-visible:enabled,
+    button[data-variant='accent-error']:hover:enabled {
+      background: var(--wui-color-error-glass-015);
+      color: var(--wui-color-error-100);
     }
-  }
 
-  button:disabled {
-    cursor: not-allowed;
-    background-color: var(--wui-gray-glass-005);
-  }
+    button[data-variant='accent-success']:focus-visible:enabled,
+    button[data-variant='accent-success']:hover:enabled {
+      background: var(--wui-color-success-glass-015);
+      color: var(--wui-color-success-100);
+    }
 
-  button[data-variant='shade']:disabled,
-  button[data-variant='accent']:disabled,
-  button[data-variant='accentBg']:disabled {
-    background-color: var(--wui-gray-glass-010);
-    color: var(--wui-gray-glass-015);
-    filter: grayscale(1);
+    button[data-variant='neutral']:hover:enabled,
+    button[data-variant='neutral']:focus-visible:enabled {
+      background: var(--wui-color-gray-glass-005);
+    }
   }
 
   button:disabled > wui-wallet-image,
@@ -718,42 +679,52 @@ export const elementStyles = css`
   button:focus-visible,
   a:focus-visible {
     border: 1px solid var(--wui-color-accent-100);
-    background-color: var(--wui-gray-glass-005);
+    background-color: var(--wui-color-gray-glass-005);
     -webkit-box-shadow: 0px 0px 0px 4px var(--wui-box-shadow-blue);
     -moz-box-shadow: 0px 0px 0px 4px var(--wui-box-shadow-blue);
     box-shadow: 0px 0px 0px 4px var(--wui-box-shadow-blue);
   }
 
-  button[data-variant='fill']:focus-visible {
-    background-color: var(--wui-color-accent-090);
-  }
-
-  button[data-variant='fill'] {
-    color: var(--wui-color-inverse-100);
+  button[data-variant='main'] {
     background-color: var(--wui-color-accent-100);
+    color: var(--wui-color-inverse-100);
+    border: none;
+    box-shadow: inset 0 0 0 1px var(--wui-color-gray-glass-010);
   }
 
-  button[data-variant='fill']:disabled {
-    color: var(--wui-gray-glass-015);
-    background-color: var(--wui-gray-glass-015);
+  button[data-variant='inverse'] {
+    background-color: var(--wui-color-inverse-100);
+    color: var(--wui-color-inverse-000);
+    border: none;
+    box-shadow: inset 0 0 0 1px var(--wui-color-gray-glass-010);
   }
 
-  button[data-variant='fill']:disabled > wui-icon {
-    color: var(--wui-gray-glass-015);
+  button[data-variant='accent'] {
+    background-color: var(--wui-color-accent-glass-010);
+    color: var(--wui-color-accent-100);
+    border: none;
+    box-shadow: inset 0 0 0 1px var(--wui-color-gray-glass-005);
   }
 
-  button[data-variant='shade'] {
-    color: var(--wui-color-fg-200);
+  button[data-variant='accent-error'] {
+    background: var(--wui-color-error-glass-015);
+    color: var(--wui-color-error-100);
+    border: none;
+    box-shadow: inset 0 0 0 1px var(--wui-color-error-glass-010);
   }
 
-  button[data-variant='accent'],
-  button[data-variant='accentBg'] {
-    color: var(--wui-color-accent-100);
+  button[data-variant='accent-success'] {
+    background: var(--wui-color-success-glass-015);
+    color: var(--wui-color-success-100);
+    border: none;
+    box-shadow: inset 0 0 0 1px var(--wui-color-success-glass-010);
   }
 
-  button[data-variant='accentBg'] {
-    background: var(--wui-accent-glass-010);
-    border: 1px solid var(--wui-accent-glass-010);
+  button[data-variant='neutral'] {
+    background: transparent;
+    color: var(--wui-color-fg-100);
+    border: none;
+    box-shadow: inset 0 0 0 1px var(--wui-color-gray-glass-005);
   }
 
   button[data-variant='fullWidth'] {
@@ -761,18 +732,20 @@ export const elementStyles = css`
     border-radius: var(--wui-border-radius-xs);
     height: 56px;
     border: none;
-    background-color: var(--wui-gray-glass-002);
+    background-color: var(--wui-color-gray-glass-002);
     color: var(--wui-color-fg-200);
     gap: var(--wui-spacing-xs);
   }
 
   button:active:enabled {
-    background-color: var(--wui-gray-glass-010);
+    background-color: var(--wui-color-gray-glass-010);
   }
 
-  button[data-variant='fill']:active:enabled {
-    background-color: var(--wui-color-accent-080);
-    border: 1px solid var(--wui-gray-glass-010);
+  button:disabled {
+    background-color: var(--wui-color-gray-glass-002);
+    cursor: not-allowed;
+    color: var(--wui-color-gray-glass-020);
+    box-shadow: inset 0 0 0 1px var(--wui-color-gray-glass-002);
   }
 
   input {
diff --git a/packages/ui/src/utils/TypeUtil.ts b/packages/ui/src/utils/TypeUtil.ts
index 2b74c85161..bc1fb23370 100644
--- a/packages/ui/src/utils/TypeUtil.ts
+++ b/packages/ui/src/utils/TypeUtil.ts
@@ -10,8 +10,8 @@ export type ColorType =
   | 'inverse-000'
   | 'inverse-100'
   | 'success-100'
-  | 'glass-005'
-  | 'glass-020'
+  | 'gray-glass-005'
+  | 'gray-glass-020'
 
 export type TextType =
   | 'large-500'
@@ -203,7 +203,17 @@ export type PlacementType = 'bottom' | 'left' | 'right' | 'top'
 
 export type ChipType = 'fill' | 'shade' | 'shadeSmall' | 'transparent' | 'success' | 'error'
 
-export type ButtonType = 'accent' | 'fill' | 'shade' | 'fullWidth' | 'accentBg'
+export type ChipButtonVariant = 'accent' | 'main' | 'shade' | 'gray'
+
+export type ButtonSize = 'lg' | 'md'
+
+export type ButtonVariant =
+  | 'main'
+  | 'inverse'
+  | 'accent'
+  | 'accent-error'
+  | 'accent-success'
+  | 'neutral'
 
 export type TransactionType =
   | 'approve'

From f6f116a02329c73db512eb39d03e503bf7056d01 Mon Sep 17 00:00:00 2001
From: enesozturk <enesozturk.d@gmail.com>
Date: Wed, 15 May 2024 19:32:31 +0300
Subject: [PATCH 2/5] refactor: move button styles to wui-button component

---
 .../stories/composites/wui-button.stories.ts  |   9 +-
 apps/gallery/stories/theme/Colors.mdx         |  17 ++-
 .../src/views/w3m-all-wallets-view/index.ts   |   4 +-
 .../src/views/w3m-connect-view/index.ts       |  13 +-
 .../scaffold/src/views/w3m-swap-view/index.ts |   1 -
 .../views/w3m-connecting-siwe-view/index.ts   |   2 +-
 .../ui/src/composites/wui-button/index.ts     |  40 ++++--
 .../ui/src/composites/wui-button/styles.ts    | 123 +++++++++++++++++-
 packages/ui/src/utils/ThemeUtil.ts            | 110 ----------------
 9 files changed, 177 insertions(+), 142 deletions(-)

diff --git a/apps/gallery/stories/composites/wui-button.stories.ts b/apps/gallery/stories/composites/wui-button.stories.ts
index 00512a4282..121e2793e6 100644
--- a/apps/gallery/stories/composites/wui-button.stories.ts
+++ b/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' }
     },
diff --git a/apps/gallery/stories/theme/Colors.mdx b/apps/gallery/stories/theme/Colors.mdx
index f71a88417a..7191a8c956 100644
--- a/apps/gallery/stories/theme/Colors.mdx
+++ b/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
diff --git a/packages/scaffold/src/views/w3m-all-wallets-view/index.ts b/packages/scaffold/src/views/w3m-all-wallets-view/index.ts
index 2a4c30f7d4..3bd6a3f9cf 100644
--- a/packages/scaffold/src/views/w3m-all-wallets-view/index.ts
+++ b/packages/scaffold/src/views/w3m-all-wallets-view/index.ts
@@ -13,10 +13,10 @@ export class W3mAllWalletsView extends LitElement {
     const isSearch = this.search.length >= 2
 
     return html`
-      <wui-flex padding="s" gap="s">
+      <wui-flex .padding=${['0', 's', 's', 's']} gap="s">
         <wui-search-bar @inputChange=${this.onInputChange.bind(this)}></wui-search-bar>
-        ${this.qrButtonTemplate()}
       </wui-flex>
+      ${this.qrButtonTemplate()}
       ${isSearch
         ? html`<w3m-all-wallets-search query=${this.search}></w3m-all-wallets-search>`
         : html`<w3m-all-wallets-list></w3m-all-wallets-list>`}
diff --git a/packages/scaffold/src/views/w3m-connect-view/index.ts b/packages/scaffold/src/views/w3m-connect-view/index.ts
index 2bdde213ea..9713029ca6 100644
--- a/packages/scaffold/src/views/w3m-connect-view/index.ts
+++ b/packages/scaffold/src/views/w3m-connect-view/index.ts
@@ -43,13 +43,14 @@ export class W3mConnectView extends LitElement {
   // -- Render -------------------------------------------- //
   public override render() {
     return html`
-      <wui-flex flexDirection="column" .padding=${['3xs', 's', 's', 's']} gap="xs">
+      <wui-flex flexDirection="column" .padding=${['3xs', 's', 's', 's']}>
         <w3m-email-login-widget></w3m-email-login-widget>
-
-        ${this.walletConnectConnectorTemplate()} ${this.recentTemplate()}
-        ${this.announcedTemplate()} ${this.injectedTemplate()} ${this.featuredTemplate()}
-        ${this.customTemplate()} ${this.recommendedTemplate()} ${this.externalTemplate()}
-        ${this.allWalletsTemplate()}
+        <wui-flex flexDirection="column" gap="xs">
+          ${this.walletConnectConnectorTemplate()} ${this.recentTemplate()}
+          ${this.announcedTemplate()} ${this.injectedTemplate()} ${this.featuredTemplate()}
+          ${this.customTemplate()} ${this.recommendedTemplate()} ${this.externalTemplate()}
+          ${this.allWalletsTemplate()}
+        </wui-flex>
       </wui-flex>
       <w3m-legal-footer></w3m-legal-footer>
     `
diff --git a/packages/scaffold/src/views/w3m-swap-view/index.ts b/packages/scaffold/src/views/w3m-swap-view/index.ts
index 9ef7e92836..2b49b66e4d 100644
--- a/packages/scaffold/src/views/w3m-swap-view/index.ts
+++ b/packages/scaffold/src/views/w3m-swap-view/index.ts
@@ -298,7 +298,6 @@ export class W3mSwapView extends LitElement {
     return html` <wui-flex gap="xs">
       <wui-button
         class="action-button"
-        ?fullWidth=${true}
         fullWidth
         size="lg"
         borderRadius="xs"
diff --git a/packages/siwe/scaffold/views/w3m-connecting-siwe-view/index.ts b/packages/siwe/scaffold/views/w3m-connecting-siwe-view/index.ts
index 41a396e8fb..e035eb2391 100644
--- a/packages/siwe/scaffold/views/w3m-connecting-siwe-view/index.ts
+++ b/packages/siwe/scaffold/views/w3m-connecting-siwe-view/index.ts
@@ -59,7 +59,7 @@ export class W3mConnectingSiweView extends LitElement {
         </wui-button>
         <wui-button
           size="md"
-          ?fullwidth=${true}
+          fullWidth
           variant="main"
           @click=${this.onSign.bind(this)}
           ?loading=${this.isSigning}
diff --git a/packages/ui/src/composites/wui-button/index.ts b/packages/ui/src/composites/wui-button/index.ts
index 1365b95d9f..ae47ce6f86 100644
--- a/packages/ui/src/composites/wui-button/index.ts
+++ b/packages/ui/src/composites/wui-button/index.ts
@@ -4,23 +4,38 @@ import '../../components/wui-icon/index.js'
 import '../../components/wui-loading-spinner/index.js'
 import '../../components/wui-text/index.js'
 import { elementStyles, resetStyles } from '../../utils/ThemeUtil.js'
-import type { BorderRadiusType, ButtonType, SizeType } from '../../utils/TypeUtil.js'
+import type { BorderRadiusType, ButtonSize, ButtonVariant } from '../../utils/TypeUtil.js'
 import { customElement } from '../../utils/WebComponentsUtil.js'
 import styles from './styles.js'
 
+// -- Constants ------------------------------------------ //
+const SPINNER_COLOR_BY_VARIANT = {
+  main: 'inverse-100',
+  inverse: 'inverse-000',
+  accent: 'accent-100',
+  'accent-error': 'error-100',
+  'accent-success': 'success-100',
+  neutral: 'fg-100',
+  disabled: 'gray-glass-020'
+}
+
 const TEXT_VARIANT_BY_SIZE = {
-  xs: 'small-600',
-  sm: 'paragraph-600',
-  md: 'small-600',
-  mdl: 'small-600',
-  lg: 'paragraph-600'
+  lg: 'paragraph-600',
+  md: 'small-600'
+}
+
+const SPINNER_SIZE_BY_SIZE = {
+  lg: 'md',
+  md: 'md'
 }
+
+// -- Component ------------------------------------------ //
 @customElement('wui-button')
 export class WuiButton extends LitElement {
   public static override styles = [resetStyles, elementStyles, styles]
 
   // -- State & Properties -------------------------------- //
-  @property() public size: Exclude<SizeType, 'inherit' | 'xl' | 'xxs'> = 'md'
+  @property() public size: ButtonSize = 'lg'
 
   @property({ type: Boolean }) public disabled = false
 
@@ -28,7 +43,7 @@ export class WuiButton extends LitElement {
 
   @property({ type: Boolean }) public loading = false
 
-  @property() public variant: ButtonType = 'fill'
+  @property() public variant: ButtonVariant = 'main'
 
   @property({ type: Boolean }) private hasIconLeft = false
 
@@ -55,7 +70,7 @@ export class WuiButton extends LitElement {
         data-icon-left=${this.hasIconLeft}
         data-icon-right=${this.hasIconRight}
         data-size=${this.size}
-        ?disabled=${this.disabled || this.loading}
+        ?disabled=${this.disabled}
         ontouchstart
       >
         ${this.loadingTemplate()}
@@ -78,7 +93,12 @@ export class WuiButton extends LitElement {
 
   public loadingTemplate() {
     if (this.loading) {
-      return html`<wui-loading-spinner color="fg-300"></wui-loading-spinner>`
+      const size = SPINNER_SIZE_BY_SIZE[this.size]
+      const color = this.disabled
+        ? SPINNER_COLOR_BY_VARIANT['disabled']
+        : SPINNER_COLOR_BY_VARIANT[this.variant]
+
+      return html`<wui-loading-spinner color=${color} size=${size}></wui-loading-spinner>`
     }
 
     return html``
diff --git a/packages/ui/src/composites/wui-button/styles.ts b/packages/ui/src/composites/wui-button/styles.ts
index 84ee56b34e..9c13769757 100644
--- a/packages/ui/src/composites/wui-button/styles.ts
+++ b/packages/ui/src/composites/wui-button/styles.ts
@@ -13,7 +13,7 @@ export default css`
     white-space: nowrap;
   }
 
-  /* md settings */
+  /* -- Sizes --------------------------------------------------- */
   button[data-size='md'] {
     padding: 8.2px var(--wui-spacing-l) 9px var(--wui-spacing-l);
     height: 36px;
@@ -27,12 +27,123 @@ export default css`
     padding: 8.2px var(--wui-spacing-s) 9px var(--wui-spacing-l);
   }
 
-  /* lg settings */
   button[data-size='lg'] {
     padding: var(--wui-spacing-m) var(--wui-spacing-2l);
     height: 48px;
   }
 
+  /* -- Variants --------------------------------------------------------- */
+  button[data-variant='main'] {
+    background-color: var(--wui-color-accent-100);
+    color: var(--wui-color-inverse-100);
+    border: none;
+    box-shadow: inset 0 0 0 1px var(--wui-color-gray-glass-010);
+  }
+
+  button[data-variant='inverse'] {
+    background-color: var(--wui-color-inverse-100);
+    color: var(--wui-color-inverse-000);
+    border: none;
+    box-shadow: inset 0 0 0 1px var(--wui-color-gray-glass-010);
+  }
+
+  button[data-variant='accent'] {
+    background-color: var(--wui-color-accent-glass-010);
+    color: var(--wui-color-accent-100);
+    border: none;
+    box-shadow: inset 0 0 0 1px var(--wui-color-gray-glass-005);
+  }
+
+  button[data-variant='accent-error'] {
+    background: var(--wui-color-error-glass-015);
+    color: var(--wui-color-error-100);
+    border: none;
+    box-shadow: inset 0 0 0 1px var(--wui-color-error-glass-010);
+  }
+
+  button[data-variant='accent-success'] {
+    background: var(--wui-color-success-glass-015);
+    color: var(--wui-color-success-100);
+    border: none;
+    box-shadow: inset 0 0 0 1px var(--wui-color-success-glass-010);
+  }
+
+  button[data-variant='neutral'] {
+    background: transparent;
+    color: var(--wui-color-fg-100);
+    border: none;
+    box-shadow: inset 0 0 0 1px var(--wui-color-gray-glass-005);
+  }
+
+  /* -- Focus states --------------------------------------------------- */
+  button[data-variant='main']:focus-visible:enabled {
+    background-color: var(--wui-color-accent-090);
+    box-shadow:
+      inset 0 0 0 1px var(--wui-color-accent-100),
+      0 0 0 4px var(--wui-color-accent-glass-020);
+  }
+  button[data-variant='inverse']:focus-visible:enabled {
+    background-color: var(--wui-color-inverse-100);
+    box-shadow:
+      inset 0 0 0 1px var(--wui-color-gray-glass-010),
+      0 0 0 4px var(--wui-color-accent-glass-020);
+  }
+  button[data-variant='accent']:focus-visible:enabled {
+    background-color: var(--wui-color-accent-glass-010);
+    box-shadow:
+      inset 0 0 0 1px var(--wui-color-accent-100),
+      0 0 0 4px var(--wui-color-accent-glass-020);
+  }
+  button[data-variant='accent-error']:focus-visible:enabled {
+    background: var(--wui-color-error-glass-015);
+    box-shadow:
+      inset 0 0 0 1px var(--wui-color-error-100),
+      0 0 0 4px var(--wui-color-error-glass-020);
+  }
+  button[data-variant='accent-success']:focus-visible:enabled {
+    background: var(--wui-color-success-glass-015);
+    box-shadow:
+      inset 0 0 0 1px var(--wui-color-success-100),
+      0 0 0 4px var(--wui-color-success-glass-020);
+  }
+  button[data-variant='neutral']:focus-visible:enabled {
+    background: var(--wui-color-gray-glass-005);
+    box-shadow:
+      inset 0 0 0 1px var(--wui-color-gray-glass-010),
+      0 0 0 4px var(--wui-color-gray-glass-002);
+  }
+
+  /* -- 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);
   }
@@ -41,6 +152,14 @@ export default css`
     padding-right: var(--wui-spacing-m);
   }
 
+  /* -- Disabled state --------------------------------------------------- */
+  button:disabled {
+    background-color: var(--wui-color-gray-glass-002);
+    box-shadow: inset 0 0 0 1px var(--wui-color-gray-glass-002);
+    color: var(--wui-color-gray-glass-020);
+    cursor: not-allowed;
+  }
+
   button > wui-text {
     transition: opacity var(--wui-ease-out-power-1) var(--wui-duration-md);
     will-change: opacity;
diff --git a/packages/ui/src/utils/ThemeUtil.ts b/packages/ui/src/utils/ThemeUtil.ts
index abd71f3768..4497e30cdc 100644
--- a/packages/ui/src/utils/ThemeUtil.ts
+++ b/packages/ui/src/utils/ThemeUtil.ts
@@ -628,44 +628,6 @@ export const elementStyles = css`
     text-decoration: none;
   }
 
-  @media (hover: hover) and (pointer: fine) {
-    button[data-variant='main']:focus-visible:enabled,
-    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']:focus-visible:enabled,
-    button[data-variant='inverse']:hover:enabled {
-      background-color: var(--wui-color-inverse-100);
-    }
-
-    button[data-variant='accent']:focus-visible:enabled,
-    button[data-variant='accent']:hover:enabled {
-      background-color: var(--wui-color-accent-glass-010);
-    }
-
-    button[data-variant='accent-error']:focus-visible:enabled,
-    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']:focus-visible:enabled,
-    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,
-    button[data-variant='neutral']:focus-visible:enabled {
-      background: var(--wui-color-gray-glass-005);
-    }
-  }
-
   button:disabled > wui-wallet-image,
   button:disabled > wui-all-wallets-image,
   button:disabled > wui-network-image,
@@ -676,78 +638,6 @@ export const elementStyles = css`
     filter: grayscale(1);
   }
 
-  button:focus-visible,
-  a:focus-visible {
-    border: 1px solid var(--wui-color-accent-100);
-    background-color: var(--wui-color-gray-glass-005);
-    -webkit-box-shadow: 0px 0px 0px 4px var(--wui-box-shadow-blue);
-    -moz-box-shadow: 0px 0px 0px 4px var(--wui-box-shadow-blue);
-    box-shadow: 0px 0px 0px 4px var(--wui-box-shadow-blue);
-  }
-
-  button[data-variant='main'] {
-    background-color: var(--wui-color-accent-100);
-    color: var(--wui-color-inverse-100);
-    border: none;
-    box-shadow: inset 0 0 0 1px var(--wui-color-gray-glass-010);
-  }
-
-  button[data-variant='inverse'] {
-    background-color: var(--wui-color-inverse-100);
-    color: var(--wui-color-inverse-000);
-    border: none;
-    box-shadow: inset 0 0 0 1px var(--wui-color-gray-glass-010);
-  }
-
-  button[data-variant='accent'] {
-    background-color: var(--wui-color-accent-glass-010);
-    color: var(--wui-color-accent-100);
-    border: none;
-    box-shadow: inset 0 0 0 1px var(--wui-color-gray-glass-005);
-  }
-
-  button[data-variant='accent-error'] {
-    background: var(--wui-color-error-glass-015);
-    color: var(--wui-color-error-100);
-    border: none;
-    box-shadow: inset 0 0 0 1px var(--wui-color-error-glass-010);
-  }
-
-  button[data-variant='accent-success'] {
-    background: var(--wui-color-success-glass-015);
-    color: var(--wui-color-success-100);
-    border: none;
-    box-shadow: inset 0 0 0 1px var(--wui-color-success-glass-010);
-  }
-
-  button[data-variant='neutral'] {
-    background: transparent;
-    color: var(--wui-color-fg-100);
-    border: none;
-    box-shadow: inset 0 0 0 1px var(--wui-color-gray-glass-005);
-  }
-
-  button[data-variant='fullWidth'] {
-    width: 100%;
-    border-radius: var(--wui-border-radius-xs);
-    height: 56px;
-    border: none;
-    background-color: var(--wui-color-gray-glass-002);
-    color: var(--wui-color-fg-200);
-    gap: var(--wui-spacing-xs);
-  }
-
-  button:active:enabled {
-    background-color: var(--wui-color-gray-glass-010);
-  }
-
-  button:disabled {
-    background-color: var(--wui-color-gray-glass-002);
-    cursor: not-allowed;
-    color: var(--wui-color-gray-glass-020);
-    box-shadow: inset 0 0 0 1px var(--wui-color-gray-glass-002);
-  }
-
   input {
     border: none;
     outline: none;

From e618c56276b2b158d5d7ff34693ef602f7d55c4d Mon Sep 17 00:00:00 2001
From: enesozturk <enesozturk.d@gmail.com>
Date: Wed, 15 May 2024 19:48:00 +0300
Subject: [PATCH 3/5] refactor: paddings and button stylings

---
 .../src/views/w3m-swap-select-token-view/index.ts |  6 +++---
 .../views/w3m-swap-select-token-view/styles.ts    | 15 ---------------
 .../src/views/w3m-transactions-view/index.ts      |  2 +-
 .../src/views/w3m-transactions-view/styles.ts     |  1 -
 .../ui/src/composites/wui-card-select/styles.ts   |  4 ++++
 .../ui/src/composites/wui-list-item/styles.ts     |  4 ++++
 6 files changed, 12 insertions(+), 20 deletions(-)

diff --git a/packages/scaffold/src/views/w3m-swap-select-token-view/index.ts b/packages/scaffold/src/views/w3m-swap-select-token-view/index.ts
index b668914d79..6851631d46 100644
--- a/packages/scaffold/src/views/w3m-swap-select-token-view/index.ts
+++ b/packages/scaffold/src/views/w3m-swap-select-token-view/index.ts
@@ -90,7 +90,7 @@ export class W3mSwapSelectTokenView extends LitElement {
 
   private templateSearchInput() {
     return html`
-      <wui-flex class="search-input-container" gap="xs">
+      <wui-flex .padding=${['0', 's', '0', 's']} gap="xs">
         <wui-input-text
           class="network-search-input"
           size="sm"
@@ -117,7 +117,7 @@ export class W3mSwapSelectTokenView extends LitElement {
 
     return html`
       <wui-flex class="tokens-container">
-        <wui-flex class="tokens" flexDirection="column">
+        <wui-flex class="tokens" .padding=${['0', 's', 's', 's']} flexDirection="column">
           ${filteredYourTokens?.length > 0
             ? html`
                 <wui-flex justifyContent="flex-start" padding="s">
@@ -179,7 +179,7 @@ export class W3mSwapSelectTokenView extends LitElement {
     }
 
     return html`
-      <wui-flex class="suggested-tokens-container" gap="xs">
+      <wui-flex class="suggested-tokens-container" .padding=${['0', 's', '0', 's']} gap="xs">
         ${tokens.map(
           token => html`
             <wui-token-button
diff --git a/packages/scaffold/src/views/w3m-swap-select-token-view/styles.ts b/packages/scaffold/src/views/w3m-swap-select-token-view/styles.ts
index 17d3f6027c..d70beb1cbd 100644
--- a/packages/scaffold/src/views/w3m-swap-select-token-view/styles.ts
+++ b/packages/scaffold/src/views/w3m-swap-select-token-view/styles.ts
@@ -23,21 +23,6 @@ export default css`
     position: absolute;
   }
 
-  .search-input-container,
-  .suggested-tokens-container {
-    padding-left: var(--wui-spacing-s);
-    padding-right: var(--wui-spacing-s);
-  }
-
-  .tokens-container .tokens {
-    padding: 0px var(--wui-spacing-s);
-    padding-bottom: var(--wui-spacing-s);
-  }
-
-  .search-input-container {
-    padding-top: var(--wui-spacing-s);
-  }
-
   .suggested-tokens-container {
     overflow-x: auto;
     mask-image: linear-gradient(
diff --git a/packages/scaffold/src/views/w3m-transactions-view/index.ts b/packages/scaffold/src/views/w3m-transactions-view/index.ts
index a5b246b7d6..94e093e395 100644
--- a/packages/scaffold/src/views/w3m-transactions-view/index.ts
+++ b/packages/scaffold/src/views/w3m-transactions-view/index.ts
@@ -10,7 +10,7 @@ export class W3mTransactionsView extends LitElement {
   // -- Render -------------------------------------------- //
   public override render() {
     return html`
-      <wui-flex flexDirection="column" gap="s">
+      <wui-flex flexDirection="column" .padding=${['0', 'm', 'm', 'm']} gap="s">
         <w3m-activity-list page="activity"></w3m-activity-list>
       </wui-flex>
     `
diff --git a/packages/scaffold/src/views/w3m-transactions-view/styles.ts b/packages/scaffold/src/views/w3m-transactions-view/styles.ts
index 24bba49f7c..0ef2615a12 100644
--- a/packages/scaffold/src/views/w3m-transactions-view/styles.ts
+++ b/packages/scaffold/src/views/w3m-transactions-view/styles.ts
@@ -6,7 +6,6 @@ export default css`
     overflow-y: auto;
     overflow-x: hidden;
     scrollbar-width: none;
-    padding: var(--wui-spacing-m);
   }
 
   :host > wui-flex:first-child::-webkit-scrollbar {
diff --git a/packages/ui/src/composites/wui-card-select/styles.ts b/packages/ui/src/composites/wui-card-select/styles.ts
index 7913e2dc95..ac48067676 100644
--- a/packages/ui/src/composites/wui-card-select/styles.ts
+++ b/packages/ui/src/composites/wui-card-select/styles.ts
@@ -19,6 +19,10 @@ 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-list-item/styles.ts b/packages/ui/src/composites/wui-list-item/styles.ts
index 0424fefb60..32051f4538 100644
--- a/packages/ui/src/composites/wui-list-item/styles.ts
+++ b/packages/ui/src/composites/wui-list-item/styles.ts
@@ -70,6 +70,10 @@ export default css`
     height: 14px;
   }
 
+  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);

From 562114efe71616c2595b41d65576daacdcebac1b Mon Sep 17 00:00:00 2001
From: enesozturk <enesozturk.d@gmail.com>
Date: Wed, 15 May 2024 20:26:12 +0300
Subject: [PATCH 4/5] chore: add hover state for wallet list item

---
 packages/ui/src/composites/wui-list-wallet/styles.ts | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/packages/ui/src/composites/wui-list-wallet/styles.ts b/packages/ui/src/composites/wui-list-wallet/styles.ts
index 9cd6bfadd0..eb89821e56 100644
--- a/packages/ui/src/composites/wui-list-wallet/styles.ts
+++ b/packages/ui/src/composites/wui-list-wallet/styles.ts
@@ -15,8 +15,8 @@ export default css`
     flex: 1;
   }
 
-  wui-icon {
-    color: var(--wui-color-fg-200) !important;
+  button:hover:enabled {
+    background-color: var(--wui-color-gray-glass-005);
   }
 
   button:disabled {
@@ -28,4 +28,8 @@ export default css`
     background-color: var(--wui-color-gray-glass-010);
     color: var(--wui-color-fg-300);
   }
+
+  wui-icon {
+    color: var(--wui-color-fg-200) !important;
+  }
 `

From d66a74b4cfbe3748b8fe84d4c59df4b2f6799cbd Mon Sep 17 00:00:00 2001
From: enesozturk <enesozturk.d@gmail.com>
Date: Thu, 16 May 2024 12:18:59 +0300
Subject: [PATCH 5/5] chore: update button variants

---
 packages/scaffold/src/modal/w3m-onramp-widget/index.ts        | 4 ++--
 packages/scaffold/src/views/w3m-all-wallets-view/index.ts     | 2 +-
 packages/scaffold/src/views/w3m-buy-in-progress-view/index.ts | 2 +-
 .../scaffold/src/views/w3m-update-email-wallet-view/index.ts  | 2 +-
 4 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/scaffold/src/modal/w3m-onramp-widget/index.ts b/packages/scaffold/src/modal/w3m-onramp-widget/index.ts
index bdb05fa8db..93dbae48c6 100644
--- a/packages/scaffold/src/modal/w3m-onramp-widget/index.ts
+++ b/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)}
diff --git a/packages/scaffold/src/views/w3m-all-wallets-view/index.ts b/packages/scaffold/src/views/w3m-all-wallets-view/index.ts
index 3bd6a3f9cf..b8cc59eb50 100644
--- a/packages/scaffold/src/views/w3m-all-wallets-view/index.ts
+++ b/packages/scaffold/src/views/w3m-all-wallets-view/index.ts
@@ -15,8 +15,8 @@ export class W3mAllWalletsView extends LitElement {
     return html`
       <wui-flex .padding=${['0', 's', 's', 's']} gap="s">
         <wui-search-bar @inputChange=${this.onInputChange.bind(this)}></wui-search-bar>
+        ${this.qrButtonTemplate()}
       </wui-flex>
-      ${this.qrButtonTemplate()}
       ${isSearch
         ? html`<w3m-all-wallets-search query=${this.search}></w3m-all-wallets-search>`
         : html`<w3m-all-wallets-list></w3m-all-wallets-list>`}
diff --git a/packages/scaffold/src/views/w3m-buy-in-progress-view/index.ts b/packages/scaffold/src/views/w3m-buy-in-progress-view/index.ts
index 341fcab1b9..cffa4c1449 100644
--- a/packages/scaffold/src/views/w3m-buy-in-progress-view/index.ts
+++ b/packages/scaffold/src/views/w3m-buy-in-progress-view/index.ts
@@ -196,7 +196,7 @@ export class W3mBuyInProgressView extends LitElement {
       return null
     }
 
-    return html`<wui-button variant="accent" @click=${this.onTryAgain.bind(this)}>
+    return html`<wui-button size="md" variant="accent" @click=${this.onTryAgain.bind(this)}>
       <wui-icon color="inherit" slot="iconLeft" name="refresh"></wui-icon>
       Try again
     </wui-button>`
diff --git a/packages/scaffold/src/views/w3m-update-email-wallet-view/index.ts b/packages/scaffold/src/views/w3m-update-email-wallet-view/index.ts
index 2e2348d49c..03b70b54fa 100644
--- a/packages/scaffold/src/views/w3m-update-email-wallet-view/index.ts
+++ b/packages/scaffold/src/views/w3m-update-email-wallet-view/index.ts
@@ -46,7 +46,7 @@ export class W3mUpdateEmailWalletView extends LitElement {
         </form>
 
         <wui-flex gap="s">
-          <wui-button size="md" variant="shade" fullWidth @click=${RouterController.goBack}>
+          <wui-button size="md" variant="neutral" fullWidth @click=${RouterController.goBack}>
             Cancel
           </wui-button>