fix(app): stop select theme color transitions

packages/app/e2e/regression/settings-theme-select-close.spec.ts

@@ -5,6 +5,7 @@ const directory = "C:/OpenCode/SettingsThemeSelectClose"
 
 test("theme setting selects hide their closing dropdown before applying theme colors", async ({ page }) => {
   await openSettings(page)
+  await expectSelectThemeColorsDoNotTransition(page)
 
   await chooseThemeSetting(page, "Dark", "Light")
   await expect(page.locator("html")).toHaveAttribute("data-color-scheme", "light")
@@ -54,6 +55,25 @@ async function expectThemeSelectClosedWithoutFlash(page: Page) {
   expect(await page.evaluate(selectContentState)).toMatchObject({ visible: false })
 }
 
+async function expectSelectThemeColorsDoNotTransition(page: Page) {
+  const transitions = await page.locator('[data-component="select-v2"]').evaluateAll((elements) =>
+    elements.map((element) => {
+      const style = getComputedStyle(element)
+      return {
+        text: element.textContent?.trim(),
+        transitionProperty: style.transitionProperty,
+      }
+    }),
+  )
+  expect(
+    transitions.every(
+      (transition) =>
+        !transition.transitionProperty.includes("background") && !transition.transitionProperty.includes("box-shadow"),
+    ),
+    JSON.stringify(transitions, null, 2),
+  ).toBe(true)
+}
+
 function selectContentState() {
   const element = document.querySelector<HTMLElement>('[data-slot="select-v2-content"]')
   if (!element) return { visible: false }

packages/ui/src/v2/components/select-v2.css

@@ -70,10 +70,7 @@
   box-shadow: var(--v2-elevation-button-neutral);
   flex: none;
   align-self: stretch;
-  transition:
-    background 85ms ease-out,
-    outline-color 85ms ease-out,
-    box-shadow 85ms ease-out;
+  transition: outline-color 85ms ease-out;
 }
 
 [data-component="select-v2"][data-appearance="large"] {