More theming

Author: skibitsky

Packages/com.walletconnect.web3modal/Resources/WalletConnect/Web3Modal/Components/ModalHeader/ModalHeader.uss

@@ -2,7 +2,7 @@
     width: 100%;
     height: 63;
     border-bottom-width: 1;
-    border-color: rgba(255, 255, 255, 0.05);
+    border-color: var(--wui-modal-header-border-color);
 }
 
 #modal-header__container {
@@ -12,7 +12,7 @@
 }
 
 #modal-header__body {
-    color: rgba(228, 231, 231, 1);
+    color: var(--wui-color-fg-100);
     padding-left: 12;
     padding-right: 12;
 }

Packages/com.walletconnect.web3modal/Resources/WalletConnect/Web3Modal/Components/QrCode/QrCode.uss

@@ -1,7 +1,7 @@
 .qrcode {
     width: 100%;
     height: 100%;
-    border-radius: 36px;
+    border-radius: var(--wui-border-radius-l);
     overflow: hidden;
 }
 

Packages/com.walletconnect.web3modal/Runtime/Components/QrCode.cs

@@ -7,7 +7,34 @@ namespace WalletConnect.UI
 {
     public class QrCode : VisualElement
     {
-        public static readonly string ussClassName = "qrcode";
+        public const string Name = "qrcode";
+
+        private static readonly CustomStyleProperty<Color> BgColorProperty = new("--wui-qrcode-bg-color");
+        private static readonly CustomStyleProperty<Color> FgColorProperty = new("--wui-qrcode-fg-color");
+
+        private readonly Image _qrcodeImage;
+
+        private Color _bgColor = Color.white;
+        private Color _fgColor = Color.black;
+        private string _data;
+
+        public QrCode() : this(string.Empty)
+        {
+        }
+
+        public QrCode(string data)
+        {
+            var asset = Resources.Load<VisualTreeAsset>("WalletConnect/Web3Modal/Components/QrCode/QrCode");
+            asset.CloneTree(this);
+
+            AddToClassList(Name);
+
+            _qrcodeImage = this.Q<Image>("qrcode-image");
+
+            Data = data;
+
+            RegisterCallback(new EventCallback<CustomStyleResolvedEvent>(CustomStyleResolvedHandler));
+        }
 
         public string Data
         {
@@ -28,33 +55,20 @@ public string Data
                 else
                 {
                     WCLoadingAnimator.Instance.Unsubscribe(_qrcodeImage);
-                    _qrcodeImage.image = QRCode.EncodeTexture(value);
+                    _qrcodeImage.image = QRCode.EncodeTexture(value, _fgColor, _bgColor);
                     _data = value;
                 }
             }
         }
 
-        private readonly Image _qrcodeImage;
-        private string _data;
-
-        public new class UxmlFactory : UxmlFactory<QrCode>
-        {
-        }
-
-        public QrCode() : this(string.Empty)
+        private void CustomStyleResolvedHandler(CustomStyleResolvedEvent evt)
         {
+            _ = evt.customStyle.TryGetValue(BgColorProperty, out _bgColor);
+            _ = evt.customStyle.TryGetValue(FgColorProperty, out _fgColor);
         }
 
-        public QrCode(string data)
+        public new class UxmlFactory : UxmlFactory<QrCode>
         {
-            var asset = Resources.Load<VisualTreeAsset>("WalletConnect/Web3Modal/Components/QrCode/QrCode");
-            asset.CloneTree(this);
-
-            AddToClassList(ussClassName);
-
-            _qrcodeImage = this.Q<Image>("qrcode-image");
-
-            Data = data;
         }
     }
 }

Packages/com.walletconnect.web3modal/Runtime/Views/WalletSearchView/WalletSearchView.cs

@@ -58,7 +58,7 @@ public WalletSearchView()
             // --- ScrollView
             scrollView = this.Q<ScrollView>();
             scrollView.mode = ScrollViewMode.Vertical;
-            scrollView.mouseWheelScrollSize = 50;
+            scrollView.mouseWheelScrollSize = 60;
             scrollView.horizontalScrollerVisibility = ScrollerVisibility.Hidden;
             scrollView.verticalScrollerVisibility = ScrollerVisibility.Hidden;
 

Packages/com.walletconnect.web3modal/UI Toolkit/WUI Base Theme.tss

@@ -85,13 +85,17 @@
     --wui-modal-border-color: var(--wui-gray-glass-005);
     --wui-modal-border-width: 1px;
 
+    --wui-modal-header-border-color: var(--wui-gray-glass-005);
 
     --wui-card-select-bg-color: var(--wui-gray-glass-002);
     --wui-card-select-bg-color-hover: var(--wui-gray-glass-005);
     --wui-card-select-border-color: rgba(0, 0, 0, 0);
     --wui-card-select-border-width: 1px;
     --wui-card-select-image-border-color: var(--wui-gray-glass-010);
     --wui-card-select-image-border-width: 1px;
+
+    --wui-qrcode-bg-color: white;
+    --wui-qrcode-fg-color: black;
 }
 
 .text-micro {