Unify colors in global variables for light / dark themes. (#126)

* Unify colors in global variables for light / dark themes.

* updated unlock styles

* uniformization of colors for unlock and side panel

* updates on ledger, notifications feed, toasts and sign screens

* fixes on sign screens and wallet connect

* updates on ledger confirm

* updated changelog

* updates on pagination and preloader

* updates and general clean-up

* Fixed spacing

* Fixed ledger colors

* fixes after review

* Updated Tailwind classes

* Updated Tailwind classes

* Updated all components that used CSS to use SCSS stylesheets

* Updated class approach

* small UI fixes

* fixed spinner color on ledger addresses

* Fixed Ledger styles

* Updated styles

* Updated colors

* fixes on approach for icon styles

* ui fixes

* Updated styles

* Update styles

* Updated colors

* updated colors

* removed unnecesary variables

* Removed unused variables

* Removed unused variables

* removed unused variables

* Fixed tests

* Fixed theme order

* added color for explorer link

---------

Co-authored-by: Miro Mărgineanu <miro.margineanu@multiversx.com>

Author: iuliacimpeanu

CHANGELOG.md

@@ -10,6 +10,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - [Fixed ledger connect header close button not working](https://github.com/multiversx/mx-sdk-dapp-ui/pull/129)
 - [Fixed the ExplorerLink shadow DOM status and layout](https://github.com/multiversx/mx-sdk-dapp-ui/pull/128)
 - [Updated the Ledger mobile layout and converted styles to Tailwind](https://github.com/multiversx/mx-sdk-dapp-ui/pull/127)
+- [Unify colors in global variables for light / dark themes](https://github.com/multiversx/mx-sdk-dapp-ui/pull/126)
 - [Removed Satoshi font and allow custom fonts from dApp](https://github.com/multiversx/mx-sdk-dapp-ui/pull/125)
 - [Updated Unlock Panel to be responsive and mobile friendly](https://github.com/multiversx/mx-sdk-dapp-ui/pull/124)
 - [Mobile version for notifications feed](https://github.com/multiversx/mx-sdk-dapp-ui/pull/123)

src/assets/icons/arrow-up-right-from-square-icon/arrow-up-right-from-square-icon.scss

@@ -1,8 +1,8 @@
 :host {
-  display: flex;
+  @apply mvx:flex;
 
   .arrow-up-right-from-square-icon {
-    width: 16px;
-    height: 16px;
+    @apply mvx:w-4 mvx:h-4 mvx:flex;
+    fill: var(--mvx-text-color-primary);
   }
 }

src/assets/icons/arrow-up-right-icon/arrow-up-right-icon.scss

@@ -3,6 +3,6 @@
 
   .arrow-up-right-icon {
     @apply mvx:flex mvx:h-2.5 mvx:w-2.5;
-    fill: #e5e5e5;
+    fill: var(--mvx-text-color-primary);
   }
 }

src/assets/icons/default-transaction-icon-large/default-transaction-icon-large.scss

@@ -0,0 +1,16 @@
+:host {
+  @apply mvx:flex;
+
+  .default-transaction-icon-large {
+    @apply mvx:h-10 mvx:w-10;
+    fill: none;
+
+    rect {
+      fill: var(--mvx-icon-bg);
+    }
+
+    path {
+      fill: var(--mvx-text-color-primary);
+    }
+  }
+}

src/assets/icons/default-transaction-icon-large/default-transaction-icon-large.tsx

@@ -1,19 +1,23 @@
-import { Component, h } from '@stencil/core';
+import { Component, h, Prop } from '@stencil/core';
 
 @Component({
   tag: 'mvx-default-transaction-icon-large',
+  styleUrl: 'default-transaction-icon-large.scss',
   shadow: true,
 })
 export class DefaultTransactionIconLarge {
+  @Prop() class?: string;
+
   render() {
     return (
-      <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 41" fill="none">
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 40 41"
+        class={{ 'default-transaction-icon-large': true, [this.class]: Boolean(this.class) }}
+      >
         <g clip-path="url(#clip0_8136_11348)">
-          <rect y="0.319824" width="40" height="40" rx="20" fill="#787878" fill-opacity="0.2" />
-          <path
-            d="M10 13.9136C10 11.9604 11.6016 10.3198 13.5938 10.3198C15.5469 10.3198 17.1875 11.9604 17.1875 13.9136V15.6323H22.8125V13.9136C22.8125 11.9604 24.4141 10.3198 26.4062 10.3198C28.3594 10.3198 30 11.9604 30 13.9136V14.0698C30 16.1401 28.3203 17.8198 26.25 17.8198H24.6875V22.8198H26.25C28.3203 22.8198 30 24.4995 30 26.5698V26.7261C30 28.7183 28.3594 30.3198 26.4062 30.3198C24.4141 30.3198 22.8125 28.7183 22.8125 26.7261V25.0073H17.1875V26.7261C17.1875 28.7183 15.5469 30.3198 13.5938 30.3198C11.6016 30.3198 10 28.7183 10 26.7261V26.5698C10 24.4995 11.6797 22.8198 13.75 22.8198H15.3125V17.8198H13.75C11.6797 17.8198 10 16.1401 10 14.0698V13.9136ZM15.3125 15.9448V13.9136C15.3125 12.9761 14.5312 12.1948 13.5938 12.1948C12.6172 12.1948 11.875 12.9761 11.875 13.9136V14.0698C11.875 15.1245 12.6953 15.9448 13.75 15.9448H15.3125ZM17.1875 23.1323H22.8125V17.5073H17.1875V23.1323ZM15.3125 24.6948H13.75C12.6953 24.6948 11.875 25.5542 11.875 26.5698V26.7261C11.875 27.7026 12.6172 28.4448 13.5938 28.4448C14.5312 28.4448 15.3125 27.7026 15.3125 26.7261V24.6948ZM24.6875 26.7261C24.6875 27.7026 25.4297 28.4448 26.4062 28.4448C27.3438 28.4448 28.125 27.7026 28.125 26.7261V26.5698C28.125 25.5542 27.2656 24.6948 26.25 24.6948H24.6875V26.7261ZM24.6875 15.9448H26.25C27.2656 15.9448 28.125 15.1245 28.125 14.0698V13.9136C28.125 12.9761 27.3438 12.1948 26.4062 12.1948C25.4297 12.1948 24.6875 12.9761 24.6875 13.9136V15.9448Z"
-            fill="#E8E8E8"
-          />
+          <rect y="0.319824" width="40" height="40" rx="20" />
+          <path d="M10 13.9136C10 11.9604 11.6016 10.3198 13.5938 10.3198C15.5469 10.3198 17.1875 11.9604 17.1875 13.9136V15.6323H22.8125V13.9136C22.8125 11.9604 24.4141 10.3198 26.4062 10.3198C28.3594 10.3198 30 11.9604 30 13.9136V14.0698C30 16.1401 28.3203 17.8198 26.25 17.8198H24.6875V22.8198H26.25C28.3203 22.8198 30 24.4995 30 26.5698V26.7261C30 28.7183 28.3594 30.3198 26.4062 30.3198C24.4141 30.3198 22.8125 28.7183 22.8125 26.7261V25.0073H17.1875V26.7261C17.1875 28.7183 15.5469 30.3198 13.5938 30.3198C11.6016 30.3198 10 28.7183 10 26.7261V26.5698C10 24.4995 11.6797 22.8198 13.75 22.8198H15.3125V17.8198H13.75C11.6797 17.8198 10 16.1401 10 14.0698V13.9136ZM15.3125 15.9448V13.9136C15.3125 12.9761 14.5312 12.1948 13.5938 12.1948C12.6172 12.1948 11.875 12.9761 11.875 13.9136V14.0698C11.875 15.1245 12.6953 15.9448 13.75 15.9448H15.3125ZM17.1875 23.1323H22.8125V17.5073H17.1875V23.1323ZM15.3125 24.6948H13.75C12.6953 24.6948 11.875 25.5542 11.875 26.5698V26.7261C11.875 27.7026 12.6172 28.4448 13.5938 28.4448C14.5312 28.4448 15.3125 27.7026 15.3125 26.7261V24.6948ZM24.6875 26.7261C24.6875 27.7026 25.4297 28.4448 26.4062 28.4448C27.3438 28.4448 28.125 27.7026 28.125 26.7261V26.5698C28.125 25.5542 27.2656 24.6948 26.25 24.6948H24.6875V26.7261ZM24.6875 15.9448H26.25C27.2656 15.9448 28.125 15.1245 28.125 14.0698V13.9136C28.125 12.9761 27.3438 12.1948 26.4062 12.1948C25.4297 12.1948 24.6875 12.9761 24.6875 13.9136V15.9448Z" />
         </g>
         <defs>
           <clipPath id="clip0_8136_11348">

src/assets/icons/default-transaction-icon-small/default-transaction-icon-small.scss

@@ -0,0 +1,16 @@
+:host {
+  @apply mvx:flex;
+
+  .default-transaction-icon-small {
+    @apply mvx:h-4 mvx:w-4;
+    fill: none;
+
+    rect {
+      fill: var(--mvx-icon-bg);
+    }
+
+    path {
+      fill: var(--mvx-text-color-primary);
+    }
+  }
+}

src/assets/icons/default-transaction-icon-small/default-transaction-icon-small.tsx

@@ -1,19 +1,23 @@
-import { Component, h } from '@stencil/core';
+import { Component, h, Prop } from '@stencil/core';
 
 @Component({
   tag: 'mvx-default-transaction-icon-small',
+  styleUrl: 'default-transaction-icon-small.scss',
   shadow: true,
 })
 export class DefaultTransactionIconSmall {
+  @Prop() class?: string;
+
   render() {
     return (
-      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 17" fill="none">
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 16 17"
+        class={{ 'default-transaction-icon-small': true, [this.class]: Boolean(this.class) }}
+      >
         <g clip-path="url(#clip0_8136_19149)">
-          <rect y="0.319824" width="16" height="16" rx="8" fill="#3B3D48" />
-          <path
-            d="M4 5.75732C4 4.97607 4.64062 4.31982 5.4375 4.31982C6.21875 4.31982 6.875 4.97607 6.875 5.75732V6.44482H9.125V5.75732C9.125 4.97607 9.76562 4.31982 10.5625 4.31982C11.3438 4.31982 12 4.97607 12 5.75732V5.81982C12 6.64795 11.3281 7.31982 10.5 7.31982H9.875V9.31982H10.5C11.3281 9.31982 12 9.9917 12 10.8198V10.8823C12 11.6792 11.3438 12.3198 10.5625 12.3198C9.76562 12.3198 9.125 11.6792 9.125 10.8823V10.1948H6.875V10.8823C6.875 11.6792 6.21875 12.3198 5.4375 12.3198C4.64062 12.3198 4 11.6792 4 10.8823V10.8198C4 9.9917 4.67188 9.31982 5.5 9.31982H6.125V7.31982H5.5C4.67188 7.31982 4 6.64795 4 5.81982V5.75732ZM6.125 6.56982V5.75732C6.125 5.38232 5.8125 5.06982 5.4375 5.06982C5.04688 5.06982 4.75 5.38232 4.75 5.75732V5.81982C4.75 6.2417 5.07812 6.56982 5.5 6.56982H6.125ZM6.875 9.44482H9.125V7.19482H6.875V9.44482ZM6.125 10.0698H5.5C5.07812 10.0698 4.75 10.4136 4.75 10.8198V10.8823C4.75 11.2729 5.04688 11.5698 5.4375 11.5698C5.8125 11.5698 6.125 11.2729 6.125 10.8823V10.0698ZM9.875 10.8823C9.875 11.2729 10.1719 11.5698 10.5625 11.5698C10.9375 11.5698 11.25 11.2729 11.25 10.8823V10.8198C11.25 10.4136 10.9062 10.0698 10.5 10.0698H9.875V10.8823ZM9.875 6.56982H10.5C10.9062 6.56982 11.25 6.2417 11.25 5.81982V5.75732C11.25 5.38232 10.9375 5.06982 10.5625 5.06982C10.1719 5.06982 9.875 5.38232 9.875 5.75732V6.56982Z"
-            fill="#EEEEF1"
-          />
+          <rect y="0.319824" width="16" height="16" rx="8" />
+          <path d="M4 5.75732C4 4.97607 4.64062 4.31982 5.4375 4.31982C6.21875 4.31982 6.875 4.97607 6.875 5.75732V6.44482H9.125V5.75732C9.125 4.97607 9.76562 4.31982 10.5625 4.31982C11.3438 4.31982 12 4.97607 12 5.75732V5.81982C12 6.64795 11.3281 7.31982 10.5 7.31982H9.875V9.31982H10.5C11.3281 9.31982 12 9.9917 12 10.8198V10.8823C12 11.6792 11.3438 12.3198 10.5625 12.3198C9.76562 12.3198 9.125 11.6792 9.125 10.8823V10.1948H6.875V10.8823C6.875 11.6792 6.21875 12.3198 5.4375 12.3198C4.64062 12.3198 4 11.6792 4 10.8823V10.8198C4 9.9917 4.67188 9.31982 5.5 9.31982H6.125V7.31982H5.5C4.67188 7.31982 4 6.64795 4 5.81982V5.75732ZM6.125 6.56982V5.75732C6.125 5.38232 5.8125 5.06982 5.4375 5.06982C5.04688 5.06982 4.75 5.38232 4.75 5.75732V5.81982C4.75 6.2417 5.07812 6.56982 5.5 6.56982H6.125ZM6.875 9.44482H9.125V7.19482H6.875V9.44482ZM6.125 10.0698H5.5C5.07812 10.0698 4.75 10.4136 4.75 10.8198V10.8823C4.75 11.2729 5.04688 11.5698 5.4375 11.5698C5.8125 11.5698 6.125 11.2729 6.125 10.8823V10.0698ZM9.875 10.8823C9.875 11.2729 10.1719 11.5698 10.5625 11.5698C10.9375 11.5698 11.25 11.2729 11.25 10.8823V10.8198C11.25 10.4136 10.9062 10.0698 10.5 10.0698H9.875V10.8823ZM9.875 6.56982H10.5C10.9062 6.56982 11.25 6.2417 11.25 5.81982V5.75732C11.25 5.38232 10.9375 5.06982 10.5625 5.06982C10.1719 5.06982 9.875 5.38232 9.875 5.75732V6.56982Z" />
         </g>
         <defs>
           <clipPath id="clip0_8136_19149">

src/assets/icons/magnifying-glass-icon/magnifying-glass-icon.scss

@@ -3,6 +3,6 @@
 
   .magnifying-glass-icon {
     @apply mvx:transition-all mvx:duration-200 mvx:w-3 mvx:h-3 mvx:box-content mvx:ease-in-out;
-    fill: #737373;
+    fill: var(--mvx-neutral-500);
   }
 }

src/assets/icons/single-angle-down-icon/single-angle-down-icon.scss

@@ -4,6 +4,6 @@
 
   .single-angle-down-icon {
     @apply mvx:flex mvx:w-4 mvx:h-2.5;
-    fill: #b6b3af;
+    fill: var(--mvx-text-color-secondary);
   }
 }

src/assets/icons/spinner-icon/spinner-icon.scss

@@ -5,6 +5,7 @@
 }
 
 .spinner {
-  fill: #a09a93;
+  @apply mvx:w-4 mvx:h-4;
+  fill: var(--mvx-text-color-secondary);
   animation: SpinnerAnimation 3000ms linear infinite;
 }