feat: unify trading workspace visual system

app/frontend/shared/components/tables.css

@@ -6,7 +6,7 @@
 }
 
 .data-table th[data-sort]:hover {
-  background: rgb(227, 237, 242);
+  background: var(--surface-hover);
 
   color: var(--blue-dark);
 }
@@ -76,7 +76,7 @@
 }
 
 .data-table:not(#limitTable) th[data-auto-sort]:hover {
-  background: rgb(227, 237, 242);
+  background: var(--surface-hover);
 
   color: var(--action-hover);
 }
@@ -110,7 +110,7 @@
 }
 
 .data-table td {
-  background: var(--surface);
+  background: transparent;
 
   text-align: left;
 
@@ -120,7 +120,7 @@
 
   border-right: 0px;
 
-  border-bottom: 1px solid rgb(232, 237, 241);
+  border-bottom: 1px solid var(--border-subtle);
 
   line-height: 1.4;
 }
@@ -138,23 +138,23 @@
 
   border-right: 0px;
 
-  border-bottom: 1px solid rgb(232, 237, 241);
+  border-bottom: 1px solid var(--border);
 
   line-height: 1.4;
 
   height: 38px;
 
-  background: rgb(244, 247, 249);
+  background: var(--table-header);
 
-  color: rgb(82, 98, 115);
+  color: var(--text-secondary);
 
-  font-size: 11.5px;
+  font-size: var(--font-size-label);
 
-  font-weight: 700;
+  font-weight: var(--font-weight-semibold);
 }
 
 .data-table tbody tr.selected td {
-  background: rgb(237, 245, 255);
+  background: var(--table-selected);
 }
 
 @media (max-width: 720px) {
@@ -188,13 +188,13 @@
 
   white-space: nowrap;
 
-  color: rgb(38, 51, 64);
+  color: var(--text-primary);
 
   width: 100%;
 
   border-collapse: collapse;
 
-  font-size: 12.5px;
+  font-size: var(--font-size-table);
 }
 
 .data-table tbody tr:last-child td {
@@ -208,7 +208,7 @@
 }
 
 .data-table tbody tr:hover td {
-  background: rgb(248, 250, 255);
+  background: var(--table-hover);
 }
 
 .data-table .stock-name {
@@ -246,25 +246,25 @@
 
   border-bottom: 1px solid var(--border);
 
-  background: var(--surface-subtle);
+  background: var(--table-header);
 
   color: var(--text-secondary);
 
-  font-weight: 650;
+  font-weight: var(--font-weight-semibold);
 
   white-space: nowrap;
 
   height: 36px;
 
-  font-size: 11.5px;
+  font-size: var(--font-size-label);
 }
 
 .data-table tbody td {
   padding: 6px 11px;
 
-  border-bottom: 1px solid rgb(237, 240, 244);
+  border-bottom: 1px solid var(--border-subtle);
 
-  color: var(--xb-gray-700);
+  color: var(--text-primary);
 
   height: 41px;
 }
@@ -294,7 +294,7 @@
 
   top: 0px;
 
-  background: rgb(248, 250, 252);
+  background: var(--table-header);
 
   color: var(--sub);
 
@@ -346,7 +346,7 @@
 }
 
 .tbl tbody tr:hover {
-  background: rgb(248, 250, 255);
+  background: var(--table-hover);
 }
 
 .tbl.compact tbody td {