Modal and CardSelect theme variables, fix text wrapping in some places

Author: skibitsky

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

@@ -9,20 +9,20 @@
     padding: 8px 8px 10px;
     align-items: center;
     border-radius: var(--wui-border-radius-xs);
-    border-width: 1px;
-    border-color: rgba(0, 0, 0, 0);
+    border-width: var(--wui-card-select-border-width);
+    border-color: var(--wui-card-select-border-color);
     transition-property: background-color;
     transition-duration: 100ms;
 
-    background-color: var(--wui-gray-glass-002);
+    background-color: var(--wui-card-select-bg-color);
 }
 
 #card-select:active #card-select__container {
     border-color: var(--wui-color-accent-100);
 }
 
 #card-select__container:hover {
-    background-color: var(--wui-gray-glass-005);
+    background-color: var(--wui-card-select-bg-color-hover);
 }
 
 #card-select__container:disabled {
@@ -82,9 +82,9 @@
 #card-select__icon-image-border {
     width: 55;
     height: 55;
-    border-color: rgba(255, 255, 255, 0.1);
+    border-color: var(--wui-card-select-image-border-color);
     border-radius: var(--wui-border-radius-3xs);
-    border-width: 1px;
+    border-width: var(--wui-card-select-image-border-width);
 }
 
 #card-select__status-icon-container {

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

@@ -2,11 +2,12 @@
     width: 100%;
     height: 0;
     border-radius: var(--wui-border-radius-l);
-    border-color: var(--wui-gray-glass-005);
-    background-color: var(--wui-color-modal-bg);
+    border-color: var(--wui-modal-border-color);
+    border-width: var(--wui-modal-border-width);
+    background-color: var(--wui-modal-bg-color);
     overflow: hidden;
     transition-property: height;
-    transition-duration: 150ms;
+    transition-duration: 175ms;
 }
 
 .modal--type-mobile {

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

@@ -24,7 +24,7 @@ Image {
     padding-left: 12;
     padding-right: 12;
     align-items: center;
-    border-radius: 12;
+    border-radius: var(--wui-border-radius-xxs);
     border-width: 1;
     flex-shrink: 1;
     border-color: var(--wui-gray-glass-005);

Packages/com.walletconnect.web3modal/Resources/WalletConnect/Web3Modal/Views/DeepLinkView/DeepLinkView.uss

@@ -1,3 +1,7 @@
+Label {
+    white-space: normal;
+}
+
 #deep-link-view__wallet-icon-container {
     margin-top: 30;
     margin-bottom: 10;

Packages/com.walletconnect.web3modal/Resources/WalletConnect/Web3Modal/Views/WebAppView/WebAppView.uss

@@ -1,3 +1,7 @@
+Label {
+    white-space: normal;
+}
+
 #web-app-view__wallet-icon-container {
     margin-top: 30;
     margin-bottom: 10;

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

@@ -3,9 +3,6 @@
 * {
     -unity-font-definition: resource("Fonts & Materials/Inter/Inter-Regular SDF");
 
-    --w3m-accent: #3396ff;
-    --w3m-default: #000;
-
     --wui-color-success-100: #26d962;
     --wui-color-error-100: #f25a67;
 
@@ -33,7 +30,6 @@
     --wui-color-bg-275: #363b3b;
     --wui-color-bg-300: #3b4040;
 
-    --wui-color-modal-bg: rgb(25, 26, 26);
 
     --wui-color-accent-100: #3396ff;
 
@@ -83,6 +79,19 @@
     --wui-letter-spacing-large: -0.8px;
     --wui-letter-spacing-medium-title: -0.96px;
     --wui-letter-spacing-2xl: -1.6px;
+
+
+    --wui-modal-bg-color: rgb(25, 26, 26);
+    --wui-modal-border-color: var(--wui-gray-glass-005);
+    --wui-modal-border-width: 1px;
+
+
+    --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;
 }
 
 .text-micro {