wip(desktop): new layout work

1 files changed, 20 insertions, 22 deletions

diff --git a/packages/ui/src/components/button.css b/packages/ui/src/components/button.css
index 0fdb49cdc..7015ea88d 100644
--- a/packages/ui/src/components/button.css
+++ b/packages/ui/src/components/button.css
@@ -19,13 +19,29 @@
       border-color: var(--border-hover);
       background-color: var(--surface-brand-hover);
     }
+    &:focus:not(:disabled) {
+      border-color: var(--border-focus);
+      background-color: var(--surface-brand-focus);
+    }
     &:active:not(:disabled) {
       border-color: var(--border-active);
       background-color: var(--surface-brand-active);
     }
+  }
+
+  &[data-variant="ghost"] {
+    border-color: transparent;
+    background-color: transparent;
+    color: var(--text-strong);
+
+    &:hover:not(:disabled) {
+      background-color: var(--surface-raised-base-hover);
+    }
     &:focus:not(:disabled) {
-      border-color: var(--border-focus);
-      background-color: var(--surface-brand-focus);
+      background-color: var(--surface-raised-base-hover);
+    }
+    &:active:not(:disabled) {
+      background-color: var(--surface-raised-base-active);
     }
   }
 
@@ -38,9 +54,6 @@
     &:hover:not(:disabled) {
       background-color: var(--button-secondary-hover);
     }
-    &:active:not(:disabled) {
-      background-color: var(--button-secondary-base);
-    }
     &:focus:not(:disabled) {
       background-color: var(--button-secondary-base);
     }
@@ -51,7 +64,8 @@
     &:focus-visible:active {
       box-shadow: none;
     }
-    &:active {
+    &:active:not(:disabled) {
+      background-color: var(--button-secondary-base);
       scale: 0.99;
       transition: all 150ms ease-out;
     }
@@ -61,22 +75,6 @@
     }
   }
 
-  &[data-variant="ghost"] {
-    border-color: transparent;
-    background-color: transparent;
-    color: var(--text-strong);
-
-    &:hover:not(:disabled) {
-      background-color: var(--button-ghost-hover);
-    }
-    &:active:not(:disabled) {
-      background-color: var(--button-ghost-hover-2);
-    }
-    &:focus:not(:disabled) {
-      background-color: var(--button-ghost-hover);
-    }
-  }
-
   &[data-size="normal"] {
     height: 24px;
     padding: 0 6px;