wip: design

crates/ui/src/resizable/panel.rs

@@ -1,15 +1,12 @@
-use std::rc::Rc;
-
+use super::resize_handle;
+use crate::{h_flex, v_flex, AxisExt};
 use gpui::{
     canvas, div, prelude::FluentBuilder, px, relative, Along, AnyElement, AnyView, Axis, Bounds,
     Element, Entity, EntityId, EventEmitter, IntoElement, IsZero, MouseMoveEvent, MouseUpEvent,
     ParentElement, Pixels, Render, StatefulInteractiveElement as _, Style, Styled, View,
     ViewContext, VisualContext as _, WeakView, WindowContext,
 };
-
-use crate::{h_flex, v_flex, AxisExt};
-
-use super::resize_handle;
+use std::rc::Rc;
 
 pub(crate) const PANEL_MIN_SIZE: Pixels = px(100.);
 
@@ -237,7 +234,9 @@ impl ResizablePanelGroup {
         }
     }
 }
+
 impl EventEmitter<ResizablePanelEvent> for ResizablePanelGroup {}
+
 impl Render for ResizablePanelGroup {
     fn render(&mut self, cx: &mut ViewContext<Self>) -> impl IntoElement {
         let view = cx.view().clone();

crates/ui/src/resizable/resize_handle.rs

@@ -1,11 +1,13 @@
+use crate::{
+    theme::{scale::ColorScaleStep, ActiveTheme as _},
+    AxisExt as _,
+};
 use gpui::{
     div, prelude::FluentBuilder as _, px, Axis, Div, ElementId, InteractiveElement, IntoElement,
     ParentElement as _, Pixels, RenderOnce, Stateful, StatefulInteractiveElement, Styled as _,
     WindowContext,
 };
 
-use crate::{theme::ActiveTheme as _, AxisExt as _};
-
 pub(crate) const HANDLE_PADDING: Pixels = px(4.);
 pub(crate) const HANDLE_SIZE: Pixels = px(1.);
 
@@ -34,6 +36,7 @@ impl InteractiveElement for ResizeHandle {
         self.base.interactivity()
     }
 }
+
 impl StatefulInteractiveElement for ResizeHandle {}
 
 impl RenderOnce for ResizeHandle {
@@ -62,7 +65,7 @@ impl RenderOnce for ResizeHandle {
             })
             .child(
                 div()
-                    .bg(cx.theme().border)
+                    .bg(cx.theme().base.step(cx, ColorScaleStep::THREE))
                     .when(self.axis.is_horizontal(), |this| {
                         this.h_full().w(HANDLE_SIZE)
                     })