Revert "feat: Transitions, spacing, scroll fade, prompt area update (#11168)"

packages/app/src/components/dialog-select-model.tsx

@@ -90,7 +90,7 @@ const ModelList: Component<{
 
 export function ModelSelectorPopover<T extends ValidComponent = "div">(props: {
   provider?: string
-  children?: JSX.Element | ((open: boolean) => JSX.Element)
+  children?: JSX.Element
   triggerAs?: T
   triggerProps?: ComponentProps<T>
 }) {
@@ -182,13 +182,12 @@ export function ModelSelectorPopover<T extends ValidComponent = "div">(props: {
         as={props.triggerAs ?? "div"}
         {...(props.triggerProps as any)}
       >
-        {typeof props.children === "function" ? props.children(store.open) : props.children}
+        {props.children}
       </Kobalte.Trigger>
       <Kobalte.Portal>
         <Kobalte.Content
-          class="w-72 h-80 flex flex-col rounded-md border border-border-base bg-surface-raised-stronger-non-alpha shadow-md z-50 outline-none overflow-hidden"
-          data-component="model-popover-content"
           ref={(el) => setStore("content", el)}
+          class="w-72 h-80 flex flex-col p-2 rounded-md border border-border-base bg-surface-raised-stronger-non-alpha shadow-md z-50 outline-none overflow-hidden"
           onEscapeKeyDown={(event) => {
             setStore("dismiss", "escape")
             setStore("open", false)

packages/app/src/components/session-context-usage.tsx

@@ -64,8 +64,8 @@ export function SessionContextUsage(props: SessionContextUsageProps) {
   }
 
   const circle = () => (
-    <div class="text-icon-base">
-      <ProgressCircle size={18} percentage={context()?.percentage ?? 0} />
+    <div class="p-1">
+      <ProgressCircle size={16} strokeWidth={2} percentage={context()?.percentage ?? 0} />
     </div>
   )
 
@@ -101,7 +101,7 @@ export function SessionContextUsage(props: SessionContextUsageProps) {
             <Button
               type="button"
               variant="ghost"
-              class="size-7 text-icon-base"
+              class="size-6"
               onClick={openContext}
               aria-label={language.t("context.usage.view")}
             >

packages/app/src/components/settings-general.tsx

@@ -10,7 +10,6 @@ import { usePlatform } from "@/context/platform"
 import { useSettings, monoFontFamily } from "@/context/settings"
 import { playSound, SOUND_OPTIONS } from "@/utils/sound"
 import { Link } from "./link"
-import { ScrollFade } from "@opencode-ai/ui/scroll-fade"
 
 let demoSoundState = {
   cleanup: undefined as (() => void) | undefined,
@@ -131,12 +130,7 @@ export const SettingsGeneral: Component = () => {
   const soundOptions = [...SOUND_OPTIONS]
 
   return (
-    <ScrollFade
-      direction="vertical"
-      fadeStartSize={0}
-      fadeEndSize={16}
-      class="flex flex-col h-full overflow-y-auto no-scrollbar px-4 pb-10 sm:px-10 sm:pb-10"
-    >
+    <div class="flex flex-col h-full overflow-y-auto no-scrollbar px-4 pb-10 sm:px-10 sm:pb-10">
       <div class="sticky top-0 z-10 bg-[linear-gradient(to_bottom,var(--surface-raised-stronger-non-alpha)_calc(100%_-_24px),transparent)]">
         <div class="flex flex-col gap-1 pt-6 pb-8">
           <h2 class="text-16-medium text-text-strong">{language.t("settings.tab.general")}</h2>
@@ -401,7 +395,7 @@ export const SettingsGeneral: Component = () => {
           </div>
         </div>
       </div>
-    </ScrollFade>
+    </div>
   )
 }
 

packages/app/src/components/settings-keybinds.tsx

@@ -9,7 +9,6 @@ import fuzzysort from "fuzzysort"
 import { formatKeybind, parseKeybind, useCommand } from "@/context/command"
 import { useLanguage } from "@/context/language"
 import { useSettings } from "@/context/settings"
-import { ScrollFade } from "@opencode-ai/ui/scroll-fade"
 
 const IS_MAC = typeof navigator === "object" && /(Mac|iPod|iPhone|iPad)/.test(navigator.platform)
 const PALETTE_ID = "command.palette"
@@ -353,12 +352,7 @@ export const SettingsKeybinds: Component = () => {
   })
 
   return (
-    <ScrollFade
-      direction="vertical"
-      fadeStartSize={0}
-      fadeEndSize={16}
-      class="flex flex-col h-full overflow-y-auto no-scrollbar px-4 pb-10 sm:px-10 sm:pb-10"
-    >
+    <div class="flex flex-col h-full overflow-y-auto no-scrollbar px-4 pb-10 sm:px-10 sm:pb-10">
       <div class="sticky top-0 z-10 bg-[linear-gradient(to_bottom,var(--surface-raised-stronger-non-alpha)_calc(100%_-_24px),transparent)]">
         <div class="flex flex-col gap-4 pt-6 pb-6 max-w-[720px]">
           <div class="flex items-center justify-between gap-4">
@@ -435,6 +429,6 @@ export const SettingsKeybinds: Component = () => {
           </div>
         </Show>
       </div>
-    </ScrollFade>
+    </div>
   )
 }

packages/desktop/src-tauri/src/lib.rs

@@ -345,7 +345,6 @@ pub fn run() {
                 .decorations(false);
 
             let window = window_builder.build().expect("Failed to create window");
-            let _ = window.show();
 
             #[cfg(windows)]
             let _ = window.create_overlay_titlebar();

packages/ui/src/components/accordion.css

@@ -36,9 +36,7 @@
         border-radius: var(--radius-md);
         overflow: clip;
         color: var(--text-strong);
-        transition-property: background-color, border-color;
-        transition-duration: var(--transition-duration);
-        transition-timing-function: var(--transition-easing);
+        transition: background-color 0.15s ease;
 
         /* text-12-regular */
         font-family: var(--font-family-sans);
@@ -60,48 +58,41 @@
       }
     }
 
-    [data-slot="accordion-arrow"] {
-      flex-shrink: 0;
-      width: 16px;
-      height: 16px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      color: var(--text-weak);
-    }
-
-    [data-slot="accordion-content"] {
-      display: grid;
-      grid-template-rows: 0fr;
-      transition-property: grid-template-rows, opacity;
-      transition-duration: var(--transition-duration);
-      transition-timing-function: var(--transition-easing);
-      width: 100%;
-
-      > * {
-        overflow: hidden;
+    &[data-expanded] {
+      [data-slot="accordion-trigger"] {
+        border-bottom-left-radius: 0;
+        border-bottom-right-radius: 0;
       }
-    }
 
-    [data-slot="accordion-content"][data-expanded] {
-      grid-template-rows: 1fr;
+      [data-slot="accordion-content"] {
+        border: 1px solid var(--border-weak-base);
+        border-top: none;
+        border-bottom-left-radius: var(--radius-md);
+        border-bottom-right-radius: var(--radius-md);
+      }
     }
 
-    [data-slot="accordion-content"][data-closed] {
-      grid-template-rows: 0fr;
+    [data-slot="accordion-content"] {
+      overflow: hidden;
+      width: 100%;
     }
+  }
+}
 
-    &[data-expanded] [data-slot="accordion-trigger"] {
-      border-bottom-left-radius: 0;
-      border-bottom-right-radius: 0;
-    }
+@keyframes slideDown {
+  from {
+    height: 0;
+  }
+  to {
+    height: var(--kb-accordion-content-height);
+  }
+}
 
-    &[data-expanded] [data-slot="accordion-content"] {
-      border: 1px solid var(--border-weak-base);
-      border-top: none;
-      border-bottom-left-radius: var(--radius-md);
-      border-bottom-right-radius: var(--radius-md);
-      height: auto;
-    }
+@keyframes slideUp {
+  from {
+    height: var(--kb-accordion-content-height);
+  }
+  to {
+    height: 0;
   }
 }

packages/ui/src/components/accordion.tsx

@@ -1,16 +1,13 @@
 import { Accordion as Kobalte } from "@kobalte/core/accordion"
-import { Accessor, createContext, splitProps, useContext } from "solid-js"
+import { splitProps } from "solid-js"
 import type { ComponentProps, ParentProps } from "solid-js"
-import { MorphChevron } from "./morph-chevron"
 
 export interface AccordionProps extends ComponentProps<typeof Kobalte> {}
 export interface AccordionItemProps extends ComponentProps<typeof Kobalte.Item> {}
 export interface AccordionHeaderProps extends ComponentProps<typeof Kobalte.Header> {}
 export interface AccordionTriggerProps extends ComponentProps<typeof Kobalte.Trigger> {}
 export interface AccordionContentProps extends ComponentProps<typeof Kobalte.Content> {}
 
-const AccordionItemContext = createContext<Accessor<boolean>>()
-
 function AccordionRoot(props: AccordionProps) {
   const [split, rest] = splitProps(props, ["class", "classList"])
   return (
@@ -25,19 +22,17 @@ function AccordionRoot(props: AccordionProps) {
   )
 }
 
-function AccordionItem(props: AccordionItemProps & { expanded?: boolean }) {
-  const [split, rest] = splitProps(props, ["class", "classList", "expanded"])
+function AccordionItem(props: AccordionItemProps) {
+  const [split, rest] = splitProps(props, ["class", "classList"])
   return (
-    <AccordionItemContext.Provider value={() => split.expanded ?? false}>
-      <Kobalte.Item
-        {...rest}
-        data-slot="accordion-item"
-        classList={{
-          ...(split.classList ?? {}),
-          [split.class ?? ""]: !!split.class,
-        }}
-      />
-    </AccordionItemContext.Provider>
+    <Kobalte.Item
+      {...rest}
+      data-slot="accordion-item"
+      classList={{
+        ...(split.classList ?? {}),
+        [split.class ?? ""]: !!split.class,
+      }}
+    />
   )
 }
 
@@ -89,25 +84,9 @@ function AccordionContent(props: ParentProps<AccordionContentProps>) {
   )
 }
 
-export interface AccordionArrowProps extends ComponentProps<"div"> {
-  expanded?: boolean
-}
-
-function AccordionArrow(props: AccordionArrowProps = {}) {
-  const [local, rest] = splitProps(props, ["expanded"])
-  const contextExpanded = useContext(AccordionItemContext)
-  const isExpanded = () => local.expanded ?? contextExpanded?.() ?? false
-  return (
-    <div data-slot="accordion-arrow" {...rest}>
-      <MorphChevron expanded={isExpanded()} />
-    </div>
-  )
-}
-
 export const Accordion = Object.assign(AccordionRoot, {
   Item: AccordionItem,
   Header: AccordionHeader,
   Trigger: AccordionTrigger,
   Content: AccordionContent,
-  Arrow: AccordionArrow,
 })

packages/ui/src/components/button.css

@@ -8,13 +8,8 @@
   text-decoration: none;
   user-select: none;
   cursor: default;
-  padding: 4px 8px;
-  white-space: nowrap;
-  transition-property: background-color, border-color, color, box-shadow, opacity;
-  transition-duration: var(--transition-duration);
-  transition-timing-function: var(--transition-easing);
   outline: none;
-  line-height: 20px;
+  white-space: nowrap;
 
   &[data-variant="primary"] {
     background-color: var(--button-primary-base);
@@ -99,6 +94,7 @@
     &:active:not(:disabled) {
       background-color: var(--button-secondary-base);
       scale: 0.99;
+      transition: all 150ms ease-out;
     }
     &:disabled {
       border-color: var(--border-disabled);
@@ -113,27 +109,34 @@
   }
 
   &[data-size="small"] {
-    padding: 2px 8px;
+    height: 22px;
+    padding: 0 8px;
     &[data-icon] {
-      padding: 2px 12px 2px 4px;
+      padding: 0 12px 0 4px;
     }
 
+    font-size: var(--font-size-small);
+    line-height: var(--line-height-large);
     gap: 4px;
 
     /* 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);
   }
 
   &[data-size="normal"] {
-    padding: 4px 6px;
+    height: 24px;
+    line-height: 24px;
+    padding: 0 6px;
     &[data-icon] {
-      padding: 4px 12px 4px 4px;
+      padding: 0 12px 0 4px;
     }
 
+    font-size: var(--font-size-small);
     gap: 6px;
 
     /* text-12-medium */
@@ -145,10 +148,11 @@
   }
 
   &[data-size="large"] {
+    height: 32px;
     padding: 6px 12px;
 
     &[data-icon] {
-      padding: 6px 12px 6px 8px;
+      padding: 0 12px 0 8px;
     }
 
     gap: 4px;
@@ -158,6 +162,7 @@
     font-size: 14px;
     font-style: normal;
     font-weight: var(--font-weight-medium);
+    line-height: var(--line-height-large); /* 142.857% */
     letter-spacing: var(--letter-spacing-normal);
   }
 

packages/ui/src/components/button.tsx

@@ -4,7 +4,7 @@ import { Icon, IconProps } from "./icon"
 
 export interface ButtonProps
   extends ComponentProps<typeof Kobalte>,
-    Pick<ComponentProps<"button">, "class" | "classList" | "children" | "style"> {
+    Pick<ComponentProps<"button">, "class" | "classList" | "children"> {
   size?: "small" | "normal" | "large"
   variant?: "primary" | "secondary" | "ghost"
   icon?: IconProps["name"]

packages/ui/src/components/card.css

@@ -4,9 +4,7 @@
   flex-direction: column;
   background-color: var(--surface-inset-base);
   border: 1px solid var(--border-weaker-base);
-  transition-property: background-color, border-color;
-  transition-duration: var(--transition-duration);
-  transition-timing-function: var(--transition-easing);
+  transition: background-color 0.15s ease;
   border-radius: var(--radius-md);
   padding: 6px 12px;
   overflow: clip;

packages/ui/src/components/checkbox.css

@@ -4,18 +4,6 @@
   gap: 12px;
   cursor: default;
 
-  [data-slot="checkbox-checkbox-control"] {
-    transition-property: border-color, background-color, box-shadow;
-    transition-duration: var(--transition-duration);
-    transition-timing-function: var(--transition-easing);
-  }
-
-  [data-slot="checkbox-checkbox-indicator"] {
-    transition-property: opacity;
-    transition-duration: var(--transition-duration);
-    transition-timing-function: var(--transition-easing);
-  }
-
   [data-slot="checkbox-checkbox-input"] {
     position: absolute;
     width: 1px;