refactor: replace outline stylings with box shadow (#1483)

reown-com · Nov 17, 2023 · 30f4bd4 · 30f4bd4 · vercel · Nov 17, 2023
1 parent baa9d8c
commit 30f4bd4
Show file tree

Hide file tree

Showing 10 changed files with 18 additions and 17 deletions.
diff --git a/packages/ui/src/components/wui-shimmer/styles.ts b/packages/ui/src/components/wui-shimmer/styles.ts
@@ -3,8 +3,7 @@ import { css } from 'lit'
 export default css`
   :host {
     display: block;
-    outline: 1px solid var(--wui-gray-glass-005);
-    outline-offset: -1px;
+    box-shadow: inset 0 0 0 1px var(--wui-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
@@ -52,7 +52,7 @@ export default css`
     border-radius: var(--wui-border-radius-3xl);
     width: 24px;
     height: 24px;
-    outline: 2px solid var(--wui-gray-glass-005);
+    box-shadow: 0 0 0 2px var(--wui-gray-glass-005);
   }
 
   wui-flex {
@@ -71,7 +71,7 @@ export default css`
   wui-avatar {
     width: 20px;
     height: 20px;
-    outline: 2px solid var(--wui-gray-glass-010);
+    box-shadow: 0 0 0 2px var(--wui-accent-glass-010);
   }
 
   @media (hover: hover) and (pointer: fine) {

diff --git a/packages/ui/src/composites/wui-avatar/styles.ts b/packages/ui/src/composites/wui-avatar/styles.ts
@@ -5,8 +5,8 @@ export default css`
     display: block;
     width: 64px;
     height: 64px;
-    outline: 8px solid var(--wui-gray-glass-005);
     border-radius: var(--wui-border-radius-3xl);
+    box-shadow: 0 0 0 8px var(--wui-gray-glass-005);
     overflow: hidden;
     position: relative;
   }
@@ -50,7 +50,7 @@ export default css`
   }
 
   :host([data-variant='generated']) {
-    outline: 8px solid var(--wui-avatar-border);
+    box-shadow: 0 0 0 8px var(--wui-gray-glass-005);
     background: radial-gradient(
       75.29% 75.29% at 64.96% 24.36%,
       #fff 0.52%,
@@ -63,7 +63,7 @@ export default css`
   }
 
   :host([data-variant='default']) {
-    outline: 8px solid var(--wui-avatar-border);
+    box-shadow: 0 0 0 8px var(--wui-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-icon-box/styles.ts b/packages/ui/src/composites/wui-icon-box/styles.ts
@@ -9,8 +9,7 @@ export default css`
     overflow: hidden;
     background-color: var(--wui-gray-glass-020);
     border-radius: var(--local-border-radius);
-    outline: var(--local-border);
-    outline-offset: 0px;
+    box-shadow: 0 0 0 1px var(--local-border);
     width: var(--local-size);
     height: var(--local-size);
     min-height: var(--local-size);

diff --git a/packages/ui/src/composites/wui-list-item/styles.ts b/packages/ui/src/composites/wui-list-item/styles.ts
@@ -22,7 +22,7 @@ export default css`
   button > wui-image {
     width: 32px;
     height: 32px;
-    outline: 2px solid var(--wui-gray-glass-005);
+    box-shadow: 0 0 0 2px var(--wui-gray-glass-005);
     border-radius: var(--wui-border-radius-3xl);
   }
 
@@ -32,11 +32,11 @@ export default css`
   }
 
   button > wui-icon-box[data-variant='blue'] {
-    outline: 2px solid var(--wui-accent-glass-005);
+    box-shadow: 0 0 0 2px var(--wui-accent-glass-005);
   }
 
   button > wui-icon-box[data-variant='overlay'] {
-    outline: 2px solid var(--wui-gray-glass-005);
+    box-shadow: 0 0 0 2px var(--wui-gray-glass-005);
   }
 
   button > wui-icon-box[data-variant='square-blue'] {

diff --git a/packages/ui/src/composites/wui-network-button/styles.ts b/packages/ui/src/composites/wui-network-button/styles.ts
@@ -37,6 +37,6 @@ export default css`
     border-radius: var(--wui-border-radius-3xl);
     width: 24px;
     height: 24px;
-    outline: 2px solid var(--wui-gray-glass-005);
+    box-shadow: 0 0 0 2px var(--wui-gray-glass-005);
   }
 `
diff --git a/packages/ui/src/composites/wui-qr-code/styles.ts b/packages/ui/src/composites/wui-qr-code/styles.ts
@@ -17,7 +17,7 @@ export default css`
   }
 
   :host([data-theme='light']) {
-    outline: 1px solid var(--wui-color-bg-125);
+    box-shadow: 0 0 0 1px var(--wui-color-bg-125);
     background-color: var(--wui-color-bg-125);
   }
 

diff --git a/packages/ui/src/composites/wui-tabs/styles.ts b/packages/ui/src/composites/wui-tabs/styles.ts
@@ -100,4 +100,8 @@ export default css`
   button:active:enabled > wui-text {
     color: var(--wui-color-fg-125);
   }
+
+  button {
+    border-radius: var(--wui-border-radius-3xl);
+  }
 `
diff --git a/packages/ui/src/composites/wui-transaction-visual/styles.ts b/packages/ui/src/composites/wui-transaction-visual/styles.ts
@@ -8,8 +8,7 @@ export default css`
     position: relative;
     width: 40px;
     height: 40px;
-    outline: 1px solid var(--wui-gray-glass-005);
-    outline-offset: -1px;
+    box-shadow: inset 0 0 0 1px var(--wui-gray-glass-005);
     background-color: var(--wui-gray-glass-005);
   }
 

diff --git a/packages/ui/src/composites/wui-visual-thumbnail/styles.ts b/packages/ui/src/composites/wui-visual-thumbnail/styles.ts
@@ -7,7 +7,7 @@ export default css`
     align-items: center;
     width: 64px;
     height: 64px;
-    outline: 8px solid var(--wui-thumbnail-border);
+    box-shadow: 0 0 0 8px var(--wui-thumbnail-border);
     border-radius: var(--local-border-radius);
     overflow: hidden;
   }