V 3/beta color changes (#1318)

reown-com · Sep 7, 2023 · 570c61d · 570c61d · vercel · Sep 7, 2023
1 parent 2bf7e57
commit 570c61d
Show file tree

Hide file tree

Showing 38 changed files with 199 additions and 140 deletions.
diff --git a/apps/gallery/stories/composites/wui-icon-box.stories.ts b/apps/gallery/stories/composites/wui-icon-box.stories.ts
@@ -3,7 +3,12 @@ import '@web3modal/ui/src/composites/wui-icon-box'
 import type { WuiIconBox } from '@web3modal/ui/src/composites/wui-icon-box'
 import { html } from 'lit'
 
-import { backgroundOptions, colorOptions, iconOptions } from '../../utils/PresetUtils'
+import {
+  backgroundOptions,
+  colorOptions,
+  iconBoxBorderOptions,
+  iconOptions
+} from '../../utils/PresetUtils'
 
 type Component = Meta<WuiIconBox>
 
@@ -15,7 +20,8 @@ export default {
     iconColor: 'accent-100',
     icon: 'copy',
     background: 'transparent',
-    border: false
+    border: false,
+    borderColor: undefined
   },
 
   argTypes: {
@@ -42,6 +48,10 @@ export default {
     },
     border: {
       control: { type: 'boolean' }
+    },
+    borderColor: {
+      options: iconBoxBorderOptions,
+      control: { type: 'select' }
     }
   }
 } as Component
@@ -55,5 +65,6 @@ export const Default: Component = {
       icon=${args.icon}
       background=${args.background}
       ?border=${args.border}
+      .borderColor=${args.borderColor}
     ></wui-icon-box>`
 }
diff --git a/apps/gallery/utils/PresetUtils.ts b/apps/gallery/utils/PresetUtils.ts
@@ -15,6 +15,7 @@ import type {
   FlexWrapType,
   GridContentType,
   GridItemsType,
+  IconBoxBorderType,
   IconType,
   LogoType,
   PlacementType,
@@ -259,4 +260,9 @@ export const accountEntryOptions: AccountEntryType[] = ['icon', 'image']
 
 export const themeOptions: ThemeType[] = ['dark', 'light']
 
+export const iconBoxBorderOptions: IconBoxBorderType[] = [
+  'wui-color-bg-125',
+  'wui-overlay-accent-010'
+]
+
 export const tagLabelOptions = ['get wallet', 'installed', 'qr code', 'recent']
diff --git 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-overlay-005);
+    background-color: var(--wui-gray-glass-005);
   }
 
   a {

diff --git a/packages/scaffold/src/utils/w3m-connecting-widget/index.ts b/packages/scaffold/src/utils/w3m-connecting-widget/index.ts
@@ -126,6 +126,7 @@ export class W3mConnectingWidget extends LitElement {
             icon="close"
             size="sm"
             border
+            borderColor="wui-color-bg-125"
           ></wui-icon-box>
         </wui-flex>
 

diff --git a/packages/scaffold/src/views/w3m-all-wallets-view/index.ts b/packages/scaffold/src/views/w3m-all-wallets-view/index.ts
@@ -43,6 +43,8 @@ export class W3mAllWalletsView extends LitElement {
           backgroundcolor="accent-100"
           icon="qrCode"
           background="transparent"
+          border
+          borderColor="wui-overlay-accent-010"
           @click=${this.onWalletConnectQr.bind(this)}
         ></wui-icon-box>
       `

diff --git a/packages/scaffold/src/views/w3m-network-switch-view/index.ts b/packages/scaffold/src/views/w3m-network-switch-view/index.ts
@@ -56,6 +56,7 @@ export class W3mNetworkSwitchView extends LitElement {
             icon="close"
             size="sm"
             ?border=${true}
+            borderColor="wui-color-bg-125"
           ></wui-icon-box>
         </wui-flex>
 

diff --git 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);
-    border: 1px solid var(--wui-overlay-005);
+    border: 1px solid var(--wui-gray-glass-005);
     background-color: var(--wui-color-bg-125);
     overflow: hidden;
   }

diff --git 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;
-    outline: 1px solid var(--wui-overlay-005);
+    outline: 1px solid var(--wui-gray-glass-005);
     background: linear-gradient(
       90deg,
       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
@@ -7,24 +7,24 @@ export default css`
 
   button {
     border-radius: var(--wui-border-radius-3xl);
-    background: var(--wui-overlay-002);
+    background: var(--wui-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-overlay-005);
+    border: 1px solid var(--wui-gray-glass-005);
   }
 
   button:disabled {
-    background: var(--wui-overlay-015);
+    background: var(--wui-gray-glass-015);
   }
 
   button:disabled > wui-text {
-    color: var(--wui-overlay-015);
+    color: var(--wui-gray-glass-015);
   }
 
   button:disabled > wui-flex > wui-text {
-    color: var(--wui-overlay-015);
+    color: var(--wui-gray-glass-015);
   }
 
   button:disabled > wui-image,
@@ -52,13 +52,13 @@ export default css`
     border-radius: var(--wui-border-radius-3xl);
     width: 24px;
     height: 24px;
-    outline: 2px solid var(--wui-overlay-005);
+    outline: 2px solid var(--wui-gray-glass-005);
   }
 
   wui-flex {
     border-radius: var(--wui-border-radius-3xl);
-    border: 1px solid var(--wui-overlay-005);
-    background: var(--wui-overlay-005);
+    border: 1px solid var(--wui-gray-glass-005);
+    background: var(--wui-gray-glass-005);
     padding: 4px var(--wui-spacing-m) 4px var(--wui-spacing-xxs);
   }
 
@@ -71,7 +71,7 @@ export default css`
   wui-avatar {
     width: 20px;
     height: 20px;
-    outline: 2px solid var(--wui-overlay-010);
+    outline: 2px solid var(--wui-gray-glass-010);
   }
 
   @media (hover: hover) and (pointer: fine) {

diff --git 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-overlay-002);
+    background: var(--wui-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-overlay-010);
+    border: 1px solid var(--wui-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
@@ -5,7 +5,7 @@ export default css`
     display: block;
     width: 64px;
     height: 64px;
-    outline: 8px solid var(--wui-overlay-005);
+    outline: 8px solid var(--wui-gray-glass-005);
     border-radius: var(--wui-border-radius-3xl);
     overflow: hidden;
     position: relative;

diff --git a/packages/ui/src/composites/wui-button/styles.ts b/packages/ui/src/composites/wui-button/styles.ts
@@ -7,12 +7,12 @@ export default css`
   }
 
   button {
-    border: 1px solid var(--wui-overlay-010);
+    border: 1px solid var(--wui-gray-glass-010);
     border-radius: var(--wui-border-radius-m);
   }
 
   button:disabled {
-    border: 1px solid var(--wui-overlay-010);
+    border: 1px solid var(--wui-gray-glass-010);
   }
 
   button[data-size='sm'] {

diff --git 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-overlay-002);
+    background-color: var(--wui-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-overlay-010);
+    stroke: var(--wui-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
@@ -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-overlay-002);
+    background-color: var(--wui-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-overlay-015);
+    color: var(--wui-gray-glass-015);
   }
 
   [data-selected='true'] {
-    background-color: var(--wui-color-accent-020);
+    background-color: var(--wui-accent-glass-020);
   }
 
   @media (hover: hover) and (pointer: fine) {
     [data-selected='true']:hover:enabled {
-      background-color: var(--wui-color-accent-015);
+      background-color: var(--wui-accent-glass-015);
     }
   }
 
   [data-selected='true']:active:enabled {
-    background-color: var(--wui-color-accent-010);
+    background-color: var(--wui-accent-glass-010);
   }
 `
diff --git 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-overlay-010);
+    border: 1px solid var(--wui-gray-glass-010);
     border-radius: var(--wui-border-radius-3xl);
   }
 
@@ -23,7 +23,7 @@ export default css`
 
   a[data-variant='shade'] {
     background-color: transparent;
-    background-color: var(--wui-overlay-010);
+    background-color: var(--wui-gray-glass-010);
     color: var(--wui-color-fg-200);
   }
 
@@ -61,7 +61,7 @@ export default css`
   }
 
   a[data-variant='shade'] > wui-image {
-    border: 1px solid var(--wui-overlay-010);
+    border: 1px solid var(--wui-gray-glass-010);
   }
 
   a[data-variant='fill'] > wui-icon,
@@ -85,16 +85,16 @@ export default css`
   }
 
   a[data-variant='shade']:focus-visible {
-    background-color: var(--wui-overlay-015);
+    background-color: var(--wui-gray-glass-015);
   }
 
   a[data-variant='transparent']:focus-visible {
-    background-color: var(--wui-overlay-005);
+    background-color: var(--wui-gray-glass-005);
   }
 
   a.disabled {
-    color: var(--wui-overlay-015);
-    background-color: var(--wui-overlay-015);
+    color: var(--wui-gray-glass-015);
+    background-color: var(--wui-gray-glass-015);
     pointer-events: none;
   }
 
@@ -104,11 +104,11 @@ export default css`
     }
 
     a[data-variant='shade']:hover {
-      background-color: var(--wui-overlay-015);
+      background-color: var(--wui-gray-glass-015);
     }
 
     a[data-variant='transparent']:hover {
-      background-color: var(--wui-overlay-005);
+      background-color: var(--wui-gray-glass-005);
     }
   }
 
@@ -117,10 +117,10 @@ export default css`
   }
 
   a[data-variant='shade']:active {
-    background-color: var(--wui-overlay-020);
+    background-color: var(--wui-gray-glass-020);
   }
 
   a[data-variant='transparent']:active {
-    background-color: var(--wui-overlay-010);
+    background-color: var(--wui-gray-glass-010);
   }
 `
diff --git 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-overlay-010);
+    border: 1px solid var(--wui-gray-glass-010);
     border-radius: var(--wui-border-radius-m);
     gap: var(--wui-spacing-xs);
   }
 
   button.loading {
-    background: var(--wui-overlay-010);
-    border: 1px solid var(--wui-overlay-010);
+    background: var(--wui-gray-glass-010);
+    border: 1px solid var(--wui-gray-glass-010);
     pointer-events: none;
   }
 
   button:disabled {
-    background-color: var(--wui-overlay-015);
-    border: 1px solid var(--wui-overlay-010);
+    background-color: var(--wui-gray-glass-015);
+    border: 1px solid var(--wui-gray-glass-010);
   }
 
   button:disabled > wui-text {
-    color: var(--wui-overlay-015);
+    color: var(--wui-gray-glass-015);
   }
 
   @media (hover: hover) and (pointer: fine) {
@@ -39,7 +39,7 @@ export default css`
   }
 
   button:focus-visible {
-    border: 1px solid var(--wui-overlay-010);
+    border: 1px solid var(--wui-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);