style(ui): some desktop ui component style update (#877)

some desktop ui component style update

packages/ui/src/components/AppContent/index.module.scss

@@ -9,22 +9,24 @@
 
 .content {
   @include _.flex_column;
-  background-color: var(--color-base);
+  background-color: var(--color-surface);
 }
 
 main {
   position: absolute;
   inset: 0;
-  background: var(--color-surface);
+  background: var(--color-base);
   color: var(--color-text);
   font: var(--font-body);
   @include _.flex_column;
 }
 
+body {
+  background-color: var(--color-base);
+}
+
 /* Foundation */
 :global(body.mobile) {
-  background-color: var(--color-base);
-
   &.light {
     @include mobile.colors-light-theme;
   }
@@ -50,8 +52,6 @@ main {
 }
 
 :global(body.desktop) {
-  background-color: var(--color-base);
-
   &.light {
     @include desktop.colors-light-theme;
   }

packages/ui/src/components/ConfirmModal/Acmodal.module.scss

@@ -16,6 +16,7 @@
 .container {
   background: var(--color-dialogue);
   border-radius: var(--radius);
+  border: _.border(var(--color-divider));
   padding: _.unit(6);
 }
 

packages/ui/src/components/Dropdown/index.module.scss

@@ -1,13 +1,10 @@
 @use '@/scss/underscore' as _;
 
 .content {
-  background: var(--color-base);
+  background: var(--color-dialogue);
-  box-shadow: var(--shadow);
+  box-shadow: var(--shadow-2);
   border-radius: var(--radius);
-
+  border: _.border(var(--color-divider));
-  &.onTop {
-    box-shadow: var(--shadow-reversed);
-  }
 
   &:focus {
     outline: none;

packages/ui/src/components/LoadingLayer/index.module.scss

@@ -31,3 +31,9 @@
     transform: rotate(360deg);
   }
 }
+
+:global(body.desktop) {
+  .container {
+    border: _.border(var(--color-divider));
+  }
+}

packages/ui/src/components/Toast/index.module.scss

@@ -15,9 +15,10 @@
   padding: _.unit(2) _.unit(4);
   max-width: 295px;
   font: var(--font-body);
-  color: var(--color-text);
+  color: var(--color-primary-button-text);
   border-radius: var(--radius);
   background: var(--color-toast);
+  box-shadow: var(--shadow-2);
   text-align: center;
   opacity: 0%;
   transition: opacity 0.3s ease-in-out;
@@ -30,6 +31,7 @@
 
 :global(body.desktop) {
   .toast {
+    border: _.border(var(--color-divider));
     padding: _.unit(3) _.unit(4);
   }
 }

packages/ui/src/scss/_desktop.scss

@@ -10,8 +10,8 @@ $font-family: -apple-system,
   sans-serif;
 
 @mixin colors-light-theme {
-  --color-surface: #ecebf6;
+  --color-base: #ecebf6;
-  --color-base: #fff;
+  --color-surface: #fff;
   --color-text: #191c1d;
   --color-text-disabled: #c4c7c7;
   --color-border: #c4c7c7;
@@ -32,19 +32,11 @@ $font-family: -apple-system,
   --color-dialogue: #fff;
   --color-divider: #e0e3e3;
   --color-error: #ba1b1b;
-
-  // shadows
-  --shadow: 0 4px 12px rgba(66, 41, 159, 12%);
-  --shadow-reversed: 0 -4px 12px rgba(66, 41, 159, 12%);
-
-  // legacy below
-  --color-toast: rgba(25, 28, 29, 80%);
-  --color-overlay: rgba(25, 28, 29, 16%);
 }
 
 @mixin colors-dark-theme {
-  --color-surface: #25272b;
+  --color-base: #25272b;
-  --color-base: #2a2c32;
+  --color-surface: #2a2c32;
   --color-text: #f7f8f8;
   --color-text-disabled: #5c5f60;
   --color-border: #5c5f60;
@@ -65,19 +57,15 @@ $font-family: -apple-system,
   --color-dialogue: linear-gradient(0deg, rgba(202, 190, 255, 8%), rgba(202, 190, 255, 8%)), linear-gradient(0deg, rgba(196, 199, 199, 2%), rgba(196, 199, 199, 2%)), #191c1d;
   --color-divider: #444748;
   --color-error: #dd3730;
-
-  // shadows
-  --shadow: 0 4px 12px rgba(66, 41, 159, 12%);
-  --shadow-reversed: 0 -4px 12px rgba(66, 41, 159, 12%);
-
-  // legacy below
-  --color-toast: rgba(247, 248, 248, 80%);
-  --color-overlay: rgba(25, 28, 29, 40%);
 }
 
 
 @mixin colors-universal {
   --color-primary-button-text: #fff;
+  --color-toast: #34353f;
+  --color-overlay: rgba(0, 0, 0, 30%);
+  // shadows
+  --shadow-2: 0 2px 12px rgba(0, 0, 0, 12%);
 }
 
 @mixin fonts {

packages/ui/src/scss/_mobile.scss

@@ -10,6 +10,8 @@ $font-family: -apple-system,
   sans-serif;
 
 @mixin colors-light-theme {
+  --color-base: #fff;
+  --color-surface: #fff;
   --color-text: #191c1d;
   --color-icon: #747778;
   --color-caption: #747778;
@@ -20,14 +22,13 @@ $font-family: -apple-system,
   --color-primary: var(--light-primary-color);
   --color-layer: #eff1f1;
   --color-error: #ba1b1b;
-  --color-toast: rgba(25, 28, 29, 80%);
-  --color-overlay: rgba(25, 28, 29, 16%);
-  --color-base: #fff;
   --color-surface: #fff;
   --color-dialogue: #fff;
 }
 
 @mixin colors-dark-theme {
+  --color-base: #191c1d;
+  --color-surface: #191c1d;
   --color-text: #f7f8f8;
   --color-icon: #a9acac;
   --color-caption: #a9acac;
@@ -38,16 +39,16 @@ $font-family: -apple-system,
   --color-primary: var(--dark-primary-color);
   --color-layer: linear-gradient(0deg, rgba(202, 190, 255, 14%), rgba(202, 190, 255, 14%)), linear-gradient(0deg, rgba(196, 199, 199, 2%), rgba(196, 199, 199, 2%)), #191c1d;
   --color-error: #dd3730;
-  --color-toast: rgba(247, 248, 248, 80%);
-  --color-overlay: rgba(25, 28, 29, 40%);
-  --color-base: #191c1d;
-  --color-surface: #191c1d;
   --color-dialogue: linear-gradient(0deg, rgba(202, 190, 255, 8%), rgba(202, 190, 255, 8%)), linear-gradient(0deg, rgba(196, 199, 199, 2%), rgba(196, 199, 199, 2%)), #191c1d;
 }
 
 
 @mixin colors-universal {
   --color-primary-button-text: #fff;
+  --color-toast: #34353f;
+  --color-overlay: rgba(0, 0, 0, 30%);
+  // shadows
+  --shadow-2: 0 2px 12px rgba(0, 0, 0, 12%);
 }
 
 @mixin fonts {