✨ feat(ui): overhaul UI with micro-interactions, animations, and 3 new themes

- Add font rendering: antialiased smoothing, optimizeLegibility, smooth scroll
- Enhance animation system: easing/duration tokens, entrance keyframes, reduced-motion
- Add utilities: theme-aware selection, focus rings, global transitions, styled scrollbars
- Improve shadow depth: refined 5-level system (xs/sm/md/lg/xl)
- Button: hover shadow lift, active press scale, icon color transitions
- Card: upgraded radius, hover border highlight + shadow elevation
- Dialog: frosted glass overlay (backdrop-filter blur), smoother scale+translate entrance
- Icon-button: tactile press scale(0.92), icon color transitions
- Tabs: color/background/border transitions on triggers
- Tooltip: enabled directional slide-in transitions, upgraded radius/padding
- Popover: upgraded shadow/radius, added translateY to animations
- List: smooth background/radius transition on items
- Add Rosé Pine theme (light + dark)
- Add Kanagawa theme (light + dark)
- Add Everforest theme (light + dark)

Author: praxstack

docs/09-temp/ui-overhaul-plan.md

@@ -1,35 +1,94 @@
 # UI/UX Overhaul Plan — OpenCode Desktop
 
 **Date:** 2026-02-24
-**Status:** TODO — needs brainstorming session with ui-ux-pro-max + frontend-pe skills
+**Status:** ✅ PHASE 1 COMPLETE
 
 ## User Requirements
-- UI looks "very bad" — needs visual polish and tactile feel
-- More themes and theme customization
-- Better UI rendering quality
+- UI looks "very bad" — needs visual polish and tactile feel ✅
+- More themes and theme customization ✅
+- Better UI rendering quality ✅
 - Font size ✅ (fixed in PR #14821)
 - Zoom in/out ✅ (already works via Cmd+/-/0)
 - Wide mode ✅ (added in PR #14835)
-- More UI settings options needed
-
-## Skills to Use
-- `ui-ux-pro-max` — Design system, color palettes, typography, UX guidelines
-- `frontend-pe` — Avant-garde UI design, micro-interactions, visual polish
-- `brainstorming` — Plan before implementing
-
-## Areas to Investigate
-1. **Theme system** — opencode already has theming (`packages/ui/src/context/theme/`). How to add more?
-2. **Tactile UI** — Micro-interactions, hover states, transitions, shadows
-3. **Typography** — Font rendering, line-height, letter-spacing refinements
-4. **Spacing** — Consistent padding/margin system
-5. **Colors** — More vibrant palettes, better contrast
-6. **Animations** — Smooth transitions between states
-7. **Settings page** — More appearance options (line-height, letter-spacing, sidebar width, etc.)
-
-## Tonight's Completed Fixes (6 PRs)
-- #14820: Streaming content duplication
-- #14821: Font size settings (CSS + terminal + UI)
-- #14826: ContextOverflowError recovery
-- #14827: Prune before compaction
-- #14831: Context usage card + compact button
-- #14835: Wide mode setting (full-width chat)
+- More UI settings options needed (future)
+
+## Phase 1 Changes (Completed)
+
+### 1. Font Rendering (`base.css`)
+- Added `-webkit-font-smoothing: antialiased` for crisp text on macOS
+- Added `-moz-osx-font-smoothing: grayscale` for Firefox
+- Added `text-rendering: optimizeLegibility` for better kerning
+- Added `scroll-behavior: smooth` for smooth scrolling
+
+### 2. Animation System (`animations.css`)
+- Added CSS custom property easing tokens (`--ease-out-expo`, `--ease-spring`, etc.)
+- Added duration tokens (`--duration-instant` through `--duration-slower`)
+- Added new keyframes: `fadeIn`, `fadeInScale`, `slideInFromRight/Left/Bottom`
+- Added `subtleGlow` for focus states, `shimmer` for loading, `spin`
+- Halved stagger delay (50ms instead of 100ms) for snappier text reveals
+- Added `prefers-reduced-motion: reduce` media query for accessibility
+
+### 3. Utilities (`utilities.css`)
+- Added `::selection` styling with theme-aware color
+- Added global transition defaults for all interactive elements
+- Added `:focus-visible` ring with theme color
+- Added thin scrollbar styling for scroll views
+- Suppressed focus ring for components that handle their own
+
+### 4. Shadow/Depth System (`theme.css`)
+- Refined `--shadow-xs` with slightly stronger presence
+- Added new `--shadow-sm` level for subtle elevation
+- Enhanced `--shadow-md` with deeper, more dramatic depth
+- Enhanced `--shadow-lg` with softer, more premium feel
+- Added new `--shadow-xl` for maximum elevation (modals, floating panels)
+
+### 5. Button Micro-Interactions (`button.css`)
+- Added explicit transition for bg-color, border, box-shadow, transform, opacity
+- Primary: hover now lifts with `--shadow-sm`, active presses with `scale(0.98)`
+- Ghost: icon color transitions on hover, active presses with `scale(0.97)`
+- Secondary: hover adds border shadow hint, active presses
+- Disabled states now use `opacity: 0.6` for clearer visual feedback
+
+### 6. Card Polish (`card.css`)
+- Upgraded border-radius from `--radius-md` to `--radius-lg`
+- Added full transition for bg-color, border-color, box-shadow, transform
+- Hover state now shows subtle border highlight and `--shadow-xs` elevation
+
+### 7. Dialog Animations (`dialog.css`)
+- Overlay now uses `backdrop-filter: blur(4px)` for frosted glass effect
+- Overlay opacity increased from 0.2 to 0.35 for better focus
+- Content now uses combined `scale(0.96) + translateY(4px)` entrance
+- Animation uses `cubic-bezier(0.16, 1, 0.3, 1)` expo-out for premium feel
+- Added subtle 1px border ring on dialog content for depth definition
+- Overlay entrance/exit now animated separately
+
+### 8. Icon Button Interactions (`icon-button.css`)
+- Added explicit transitions for bg-color, box-shadow, transform
+- Ghost variant: icon color now transitions on hover (to `--icon-hover`)
+- Active state now scales to `0.92` for satisfying tactile press
+- Icon SVG color now properly transitions through states
+- Disabled state uses `opacity: 0.5`
+
+### 9. New Themes (3 premium additions)
+- **Rosé Pine** — Dreamy, soft palette with purple/rose accents. Very popular community theme.
+- **Kanagawa** — Japanese-inspired warm palette. Distinctive golden/purple tones based on "The Great Wave."
+- **Everforest** — Calming green/earth tones nature-inspired palette. Easy on the eyes for long sessions.
+
+All themes include full light + dark variants with seeds, borders, surfaces, text, syntax highlighting, and markdown colors.
+
+## Files Modified
+- `packages/ui/src/styles/base.css` — Font rendering
+- `packages/ui/src/styles/animations.css` — Animation system
+- `packages/ui/src/styles/utilities.css` — Selection, focus, transitions, scrollbars
+- `packages/ui/src/styles/theme.css` — Shadow system
+- `packages/ui/src/components/button.css` — Button interactions
+- `packages/ui/src/components/card.css` — Card polish
+- `packages/ui/src/components/dialog.css` — Dialog animations
+- `packages/ui/src/components/icon-button.css` — Icon button interactions
+- `packages/ui/src/theme/themes/rosepine.json` — NEW
+- `packages/ui/src/theme/themes/kanagawa.json` — NEW
+- `packages/ui/src/theme/themes/everforest.json` — NEW
+- `packages/ui/src/theme/default-themes.ts` — Theme registration
+
+## Build Status
+✅ `vite build` passes with zero errors (7.98s)

packages/ui/src/components/button.css

@@ -10,6 +10,12 @@
   cursor: default;
   outline: none;
   white-space: nowrap;
+  transition:
+    background-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
+    border-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
+    box-shadow 150ms cubic-bezier(0.4, 0, 0.2, 1),
+    transform 100ms cubic-bezier(0.4, 0, 0.2, 1),
+    opacity 150ms cubic-bezier(0.4, 0, 0.2, 1);
 
   &[data-variant="primary"] {
     background-color: var(--button-primary-base);
@@ -22,15 +28,18 @@
 
     &:hover:not(:disabled) {
       background-color: var(--icon-strong-hover);
+      box-shadow: var(--shadow-sm);
     }
     &:focus:not(:disabled) {
       background-color: var(--icon-strong-focus);
     }
     &:active:not(:disabled) {
       background-color: var(--icon-strong-active);
+      transform: scale(0.98);
     }
     &:disabled {
       background-color: var(--icon-strong-disabled);
+      opacity: 0.6;
 
       [data-slot="icon-svg"] {
         color: var(--icon-invert-base);
@@ -45,20 +54,27 @@
 
     [data-slot="icon-svg"] {
       color: var(--icon-base);
+      transition: color 150ms cubic-bezier(0.4, 0, 0.2, 1);
     }
 
     &:hover:not(:disabled) {
       background-color: var(--surface-base-hover);
+
+      [data-slot="icon-svg"] {
+        color: var(--icon-hover);
+      }
     }
     &:focus-visible:not(:disabled) {
       background-color: var(--surface-base-hover);
     }
     &:active:not(:disabled) {
       background-color: var(--surface-base-active);
+      transform: scale(0.97);
     }
     &:disabled {
       color: var(--text-weak);
       cursor: not-allowed;
+      opacity: 0.5;
 
       [data-slot="icon-svg"] {
         color: var(--icon-disabled);
@@ -80,6 +96,7 @@
 
     &:hover:not(:disabled) {
       background-color: var(--button-secondary-hover);
+      box-shadow: var(--shadow-xs-border-hover);
     }
     &:focus:not(:disabled) {
       background-color: var(--button-secondary-base);
@@ -93,12 +110,14 @@
     }
     &:active:not(:disabled) {
       background-color: var(--button-secondary-base);
+      transform: scale(0.98);
     }
     &:disabled {
       border-color: var(--border-disabled);
       background-color: var(--surface-disabled);
       color: var(--text-weak);
       cursor: not-allowed;
+      opacity: 0.6;
     }
 
     [data-slot="icon-svg"] {

packages/ui/src/components/card.css

@@ -4,11 +4,20 @@
   flex-direction: column;
   background-color: var(--surface-inset-base);
   border: 1px solid var(--border-weaker-base);
-  transition: background-color 0.15s ease;
-  border-radius: var(--radius-md);
+  transition:
+    background-color 200ms cubic-bezier(0.4, 0, 0.2, 1),
+    border-color 200ms cubic-bezier(0.4, 0, 0.2, 1),
+    box-shadow 200ms cubic-bezier(0.4, 0, 0.2, 1),
+    transform 200ms cubic-bezier(0.16, 1, 0.3, 1);
+  border-radius: var(--radius-lg);
   padding: 6px 12px;
   overflow: clip;
 
+  &:hover {
+    border-color: var(--border-weaker-hover);
+    box-shadow: var(--shadow-xs);
+  }
+
   &[data-variant="error"] {
     background-color: var(--surface-critical-weak);
     border: 1px solid var(--border-critical-base);

packages/ui/src/components/dialog.css

@@ -4,7 +4,9 @@
   position: fixed;
   inset: 0;
   z-index: 50;
-  background-color: hsl(from var(--background-base) h s l / 0.2);
+  background-color: hsl(from var(--background-base) h s l / 0.35);
+  backdrop-filter: blur(4px);
+  -webkit-backdrop-filter: blur(4px);
 }
 
 [data-component="dialog"] {
@@ -50,7 +52,9 @@
       border-radius: var(--radius-xl);
       background: var(--surface-raised-stronger-non-alpha);
       background-clip: padding-box;
-      box-shadow: var(--shadow-lg-border-base);
+      box-shadow:
+        var(--shadow-lg-border-base),
+        0 0 0 1px var(--border-weaker-base);
 
       [data-slot="dialog-header"] {
         display: flex;
@@ -136,19 +140,29 @@
 }
 
 [data-component="dialog"][data-transition] [data-slot="dialog-content"] {
-  animation: contentHide 100ms ease-in forwards;
+  animation: contentHide 120ms cubic-bezier(0.4, 0, 1, 1) forwards;
 
   &[data-expanded] {
-    animation: contentShow 150ms ease-out;
+    animation: contentShow 250ms cubic-bezier(0.16, 1, 0.3, 1);
+  }
+}
+
+[data-component="dialog"][data-transition] [data-component="dialog-overlay"] {
+  animation: overlayHide 150ms ease-in forwards;
+
+  &[data-expanded] {
+    animation: overlayShow 200ms ease-out;
   }
 }
 
 @keyframes overlayShow {
   from {
     opacity: 0;
+    backdrop-filter: blur(0);
   }
   to {
     opacity: 1;
+    backdrop-filter: blur(4px);
   }
 }
 @keyframes overlayHide {
@@ -162,20 +176,20 @@
 @keyframes contentShow {
   from {
     opacity: 0;
-    transform: scale(0.98);
+    transform: scale(0.96) translateY(4px);
   }
   to {
     opacity: 1;
-    transform: scale(1);
+    transform: scale(1) translateY(0);
   }
 }
 @keyframes contentHide {
   from {
     opacity: 1;
-    transform: scale(1);
+    transform: scale(1) translateY(0);
   }
   to {
     opacity: 0;
-    transform: scale(0.98);
+    transform: scale(0.96) translateY(4px);
   }
 }

packages/ui/src/components/icon-button.css

@@ -7,6 +7,10 @@
   user-select: none;
   aspect-ratio: 1;
   flex-shrink: 0;
+  transition:
+    background-color 120ms cubic-bezier(0.4, 0, 0.2, 1),
+    box-shadow 120ms cubic-bezier(0.4, 0, 0.2, 1),
+    transform 80ms cubic-bezier(0.4, 0, 0.2, 1);
 
   &[data-variant="primary"] {
     background-color: var(--icon-strong-base);
@@ -77,37 +81,41 @@
 
   &[data-variant="ghost"] {
     background-color: transparent;
-    /* color: var(--icon-base); */
 
     [data-slot="icon-svg"] {
       color: var(--icon-base);
+      transition: color 120ms cubic-bezier(0.4, 0, 0.2, 1);
     }
 
     &:hover:not(:disabled) {
       background-color: var(--surface-base-hover);
 
-      /* [data-slot="icon-svg"] { */
-      /*   color: var(--icon-hover); */
-      /* } */
+      [data-slot="icon-svg"] {
+        color: var(--icon-hover);
+      }
     }
     &:focus-visible:not(:disabled) {
       background-color: var(--surface-base-hover);
     }
     &:active:not(:disabled) {
       background-color: var(--surface-base-active);
-      /* [data-slot="icon-svg"] { */
-      /*   color: var(--icon-active); */
-      /* } */
+      transform: scale(0.92);
+
+      [data-slot="icon-svg"] {
+        color: var(--icon-active);
+      }
     }
     &:selected:not(:disabled) {
       background-color: var(--surface-base-active);
-      /* [data-slot="icon-svg"] { */
-      /*   color: var(--icon-selected); */
-      /* } */
+
+      [data-slot="icon-svg"] {
+        color: var(--icon-selected);
+      }
     }
     &:disabled {
       color: var(--icon-invert-base);
       cursor: not-allowed;
+      opacity: 0.5;
     }
   }
 

packages/ui/src/components/list.css

@@ -237,6 +237,9 @@
           align-items: center;
           color: var(--text-strong);
           scroll-margin-top: 28px;
+          transition:
+            background-color 100ms cubic-bezier(0.4, 0, 0.2, 1),
+            border-radius 100ms cubic-bezier(0.4, 0, 0.2, 1);
 
           /* text-14-medium */
           font-family: var(--font-family-sans);