Revert "feat(ui): Select, dropdown, popover styles & transitions (#11675)"

This reverts commit 377bf7ff21.

packages/ui/src/components/select.css

@@ -1,13 +1,7 @@
 [data-component="select"] {
   [data-slot="select-select-trigger"] {
-    display: flex;
-    padding: 4px 8px !important;
-    align-items: center;
-    justify-content: space-between;
+    padding: 0 4px 0 8px;
     box-shadow: none;
-    transition-property: background-color;
-    transition-duration: var(--transition-duration);
-    transition-timing-function: var(--transition-easing);
 
     [data-slot="select-select-trigger-value"] {
       overflow: hidden;
@@ -21,10 +15,10 @@
       align-items: center;
       justify-content: center;
       flex-shrink: 0;
-      color: var(--icon-base);
+      color: var(--text-weak);
+      transition: transform 0.1s ease-in-out;
     }
 
-    &:hover,
     &[data-expanded] {
       &[data-variant="secondary"] {
         background-color: var(--button-secondary-hover);
@@ -36,13 +30,13 @@
         background-color: var(--icon-strong-active);
       }
     }
-    &:not([data-expanded]):focus,
+
     &:not([data-expanded]):focus-visible {
       &[data-variant="secondary"] {
         background-color: var(--button-secondary-base);
       }
       &[data-variant="ghost"] {
-        background-color: transparent;
+        background-color: var(--surface-raised-base-hover);
       }
       &[data-variant="primary"] {
         background-color: var(--icon-strong-base);
@@ -52,10 +46,10 @@
 
   &[data-trigger-style="settings"] {
     [data-slot="select-select-trigger"] {
-      padding: 6px 6px 6px 10px;
+      padding: 6px 6px 6px 12px;
       box-shadow: none;
       border-radius: 6px;
-      field-sizing: content;
+      min-width: 160px;
       height: 32px;
       justify-content: flex-end;
       gap: 12px;
@@ -67,7 +61,6 @@
         white-space: nowrap;
         font-size: var(--font-size-base);
         font-weight: var(--font-weight-regular);
-        padding: 4px 8px 4px 4px;
       }
       [data-slot="select-select-trigger-icon"] {
         width: 16px;
@@ -98,26 +91,17 @@
 }
 
 [data-component="select-content"] {
-  min-width: 8rem;
+  min-width: 104px;
   max-width: 23rem;
   overflow: hidden;
   border-radius: var(--radius-md);
   background-color: var(--surface-raised-stronger-non-alpha);
   padding: 4px;
   box-shadow: var(--shadow-xs-border);
-  z-index: 50;
-  transform-origin: var(--kb-popper-content-transform-origin);
-  pointer-events: none;
-
-  animation: selectContentHide var(--transition-duration) var(--transition-easing) forwards;
-
-  @starting-style {
-    animation: none;
-  }
+  z-index: 60;
 
   &[data-expanded] {
-    pointer-events: auto;
-    animation: selectContentShow var(--transition-duration) var(--transition-easing) forwards;
+    animation: select-open 0.15s ease-out;
   }
 
   [data-slot="select-select-content-list"] {
@@ -127,38 +111,43 @@
     overflow-x: hidden;
     display: flex;
     flex-direction: column;
+
     &:focus {
       outline: none;
     }
+
     > *:not([role="presentation"]) + *:not([role="presentation"]) {
       margin-top: 2px;
     }
   }
+
   [data-slot="select-select-item"] {
     position: relative;
     display: flex;
     align-items: center;
-    padding: 4px 8px;
+    padding: 2px 8px;
     gap: 12px;
-    border-radius: var(--radius-sm);
+    border-radius: 4px;
+    cursor: default;
 
     /* text-12-medium */
     font-family: var(--font-family-sans);
-    font-size: var(--font-size-base);
+    font-size: var(--font-size-small);
     font-style: normal;
     font-weight: var(--font-weight-medium);
     line-height: var(--line-height-large); /* 166.667% */
     letter-spacing: var(--letter-spacing-normal);
+
     color: var(--text-strong);
 
-    transition-property: background-color, color;
-    transition-duration: var(--transition-duration);
-    transition-timing-function: var(--transition-easing);
+    transition:
+      background-color 0.2s ease-in-out,
+      color 0.2s ease-in-out;
     outline: none;
     user-select: none;
 
-    &:hover {
-      background-color: var(--surface-raised-base-hover);
+    &[data-highlighted] {
+      background: var(--surface-raised-base-hover);
     }
     &[data-disabled] {
       background-color: var(--surface-raised-base);
@@ -171,11 +160,6 @@
       margin-left: auto;
       width: 16px;
       height: 16px;
-      color: var(--icon-strong-base);
-
-      svg {
-        color: var(--icon-strong-base);
-      }
     }
     &:focus {
       outline: none;
@@ -187,9 +171,13 @@
 }
 
 [data-component="select-content"][data-trigger-style="settings"] {
-  field-sizing: content;
+  min-width: 160px;
   border-radius: 8px;
-  padding: 0 0 0 4px;
+  padding: 0;
+
+  [data-slot="select-select-content-list"] {
+    padding: 4px;
+  }
 
   [data-slot="select-select-item"] {
     /* text-14-regular */
@@ -202,24 +190,13 @@
   }
 }
 
-@keyframes selectContentShow {
+@keyframes select-open {
   from {
     opacity: 0;
-    transform: scaleY(0.95);
+    transform: scale(0.95);
   }
   to {
     opacity: 1;
-    transform: scaleY(1);
-  }
-}
-
-@keyframes selectContentHide {
-  from {
-    opacity: 1;
-    transform: scaleY(1);
-  }
-  to {
-    opacity: 0;
-    transform: scaleY(0.95);
+    transform: scale(1);
   }
 }