feat: unify trading workspace visual system

app/frontend/pages/popularity/foundation.css

@@ -40,7 +40,7 @@
 :where(#popularityView) #popularitySummary {
   margin-bottom: 12px;
 
-  background: rgb(255, 255, 255);
+  background: var(--surface);
 }
 
 #popularityView .data-table {
@@ -148,7 +148,7 @@
 
   border-radius: 8px;
 
-  background: rgb(244, 245, 247);
+  background: var(--surface-muted);
 }
 
 .popularity-source-tabs-v2 button {
@@ -174,7 +174,7 @@
 }
 
 .popularity-source-tabs-v2 button.active {
-  background: rgb(255, 255, 255);
+  background: var(--surface);
 
   color: var(--r2-ink);
 
@@ -308,7 +308,7 @@
 
   border-radius: var(--r2-radius);
 
-  background: rgb(255, 255, 255);
+  background: var(--surface);
 
   box-shadow: var(--r2-shadow);
 }
@@ -489,7 +489,7 @@
 }
 
 .popularity-table-v2 tbody tr:hover {
-  background: rgb(247, 249, 252);
+  background: var(--table-hover);
 }
 
 .popularity-rank-v2 {
@@ -587,7 +587,7 @@
 
   border-radius: 5px;
 
-  background: rgb(243, 244, 246);
+  background: var(--surface-muted);
 
   color: var(--r2-sub);
 
@@ -792,7 +792,7 @@
 }
 
 .hot3 .hc {
-  background: rgb(255, 255, 255);
+  background: var(--surface);
 
   border: 1px solid var(--line);