tweak(ui): hover and active styles for filetree tabs

packages/ui/src/components/tabs.css

@@ -253,20 +253,20 @@
       }
 
       &:hover:not(:disabled) {
-        background-color: var(--surface-raised-base-hover);
+        background-color: var(--surface-base-hover);
         color: var(--text-strong);
       }
 
       &:active:not(:disabled) {
-        background-color: var(--surface-raised-base-active);
+        background-color: var(--surface-base-active);
       }
 
       &:has([data-selected]) {
-        background-color: var(--surface-raised-base-active);
+        background-color: var(--surface-base-active);
         color: var(--text-strong);
 
         &:hover:not(:disabled) {
-          background-color: var(--surface-raised-base-active);
+          background-color: var(--surface-base-active);
         }
       }
     }
@@ -330,11 +330,11 @@
       }
 
       &:hover:not(:disabled) {
-        background-color: var(--surface-raised-base-hover);
+        background-color: var(--surface-base-hover);
       }
 
       &:has([data-selected]) {
-        background-color: var(--surface-raised-base-active);
+        background-color: var(--surface-base-active);
         color: var(--text-strong);
       }
     }
@@ -368,11 +368,11 @@
         }
 
         &:hover:not(:disabled) {
-          background-color: var(--surface-raised-base-hover);
+          background-color: var(--surface-base-hover);
         }
 
         &:has([data-selected]) {
-          background-color: var(--surface-raised-base-hover);
+          background-color: var(--surface-base-hover);
           color: var(--text-strong);
         }
       }
@@ -431,16 +431,16 @@
         }
 
         &:hover:not(:disabled) {
-          background-color: var(--surface-raised-base-hover);
+          background-color: var(--surface-base-hover);
         }
 
         &:has([data-slot="tabs-trigger"]:focus-visible) {
-          background-color: var(--surface-raised-base-hover);
+          background-color: var(--surface-base-hover);
           box-shadow: var(--shadow-xs-border-focus);
         }
 
         &:has([data-selected]) {
-          background-color: var(--surface-raised-base-active);
+          background-color: var(--surface-base-active);
           color: var(--text-strong);
 
           [data-component="icon"] {
@@ -448,13 +448,13 @@
           }
 
           &:hover:not(:disabled) {
-            background-color: var(--surface-raised-base-active);
+            background-color: var(--surface-base-active);
           }
         }
       }
 
       [data-slot="tabs-content"] {
-        background-color: var(--surface-raised-stronger-non-alpha);
+        background-color: var(--surface-stronger-non-alpha);
       }
     }
   }