wip(desktop): new layout work

1 files changed, 21 insertions, 20 deletions

diff --git a/packages/ui/src/components/icon-button.css b/packages/ui/src/components/icon-button.css
index 9e1c51cb2..3449adaeb 100644
--- a/packages/ui/src/components/icon-button.css
+++ b/packages/ui/src/components/icon-button.css
@@ -26,12 +26,12 @@
     &:hover:not(:disabled) {
       background-color: var(--icon-strong-hover);
     }
-    &:active:not(:disabled) {
-      background-color: var(--icon-string-active);
-    }
     &:focus:not(:disabled) {
       background-color: var(--icon-strong-focus);
     }
+    &:active:not(:disabled) {
+      background-color: var(--icon-string-active);
+    }
     &:disabled {
       background-color: var(--icon-strong-disabled);
 
@@ -50,9 +50,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);
     }
@@ -63,6 +60,9 @@
     &:focus-visible:active {
       box-shadow: none;
     }
+    &:active:not(:disabled) {
+      background-color: var(--button-secondary-base);
+    }
 
     [data-slot="icon"] {
       color: var(--icon-strong-base);
@@ -78,25 +78,26 @@
     }
 
     &:hover:not(:disabled) {
-      background-color: var(--surface-base-hover);
+      background-color: var(--surface-raised-base-hover);
 
-      [data-slot="icon"] {
-        color: var(--icon-hover);
-      }
+      /* [data-slot="icon"] { */
+      /*   color: var(--icon-hover); */
+      /* } */
+    }
+    &:focus:not(:disabled) {
+      background-color: var(--surface-focus);
     }
     &:active:not(:disabled) {
-      [data-slot="icon"] {
-        color: var(--icon-active);
-      }
+      background-color: var(--surface-raised-base-active);
+      /* [data-slot="icon"] { */
+      /*   color: var(--icon-active); */
+      /* } */
     }
     &:selected:not(:disabled) {
-      background-color: var(--surface-base-active);
-      [data-slot="icon"] {
-        color: var(--icon-selected);
-      }
-    }
-    &:focus:not(:disabled) {
-      background-color: var(--surface-focus);
+      background-color: var(--surface-raised-base-active);
+      /* [data-slot="icon"] { */
+      /*   color: var(--icon-selected); */
+      /* } */
     }
   }