add scrollarea

crates/theme/src/colors.rs

@@ -33,8 +33,10 @@ pub struct ColorTokens {
     pub input: Hsla,
     pub ring: Hsla,
     pub selection: Hsla,
-    /// The scrim behind modal layers; translucent in every theme.
+    /// The scrim behind modal layers, translucent in every theme.
     pub overlay: Hsla,
+    /// The overlay scrollbar thumb, translucent over scrolling content.
+    pub scrollbar_thumb: Hsla,
 }
 
 impl ColorTokens {
@@ -60,6 +62,8 @@ impl ColorTokens {
             ring: hex(0x93c5fd),
             selection: hex(0xdbeafe),
             overlay: scrim(0.25),
+            // macOS light overlay thumbs are translucent black.
+            scrollbar_thumb: hsla(0., 0., 0., 0.25),
         }
     }
 
@@ -85,6 +89,8 @@ impl ColorTokens {
             ring: hex(0x1d4ed8),
             selection: hex(0x1e3a8a),
             overlay: scrim(0.45),
+            // macOS dark overlay thumbs are translucent light gray.
+            scrollbar_thumb: hsla(0., 0., 1., 0.3),
         }
     }
 }

crates/theme/src/definition.rs

@@ -30,6 +30,7 @@ pub struct ThemeDefinition {
     pub ring: Option<String>,
     pub selection: Option<String>,
     pub overlay: Option<String>,
+    pub scrollbar_thumb: Option<String>,
 }
 
 impl ThemeDefinition {
@@ -112,6 +113,10 @@ impl ThemeDefinition {
     pub fn overlay(&self) -> Option<Hsla> {
         parse_hex(self.overlay.as_deref()?)
     }
+
+    pub fn scrollbar_thumb(&self) -> Option<Hsla> {
+        parse_hex(self.scrollbar_thumb.as_deref()?)
+    }
 }
 
 /// Parses `#rgb` or `#rrggbb` into an opaque color.

crates/theme/src/lib.rs

@@ -51,6 +51,8 @@ pub struct Theme {
     pub elevations: Elevations,
     /// Overlay transition timing; gpui's animation primitives do the rest.
     pub motion: Motion,
+    /// Overlay scrollbar geometry.
+    pub scrollbar: Scrollbar,
     /// The platform's native root font size; rem-based sizing scales with it.
     pub root_font_size: Pixels,
     pub sizes: SizeTable,
@@ -82,8 +84,8 @@ impl Default for Radius {
     }
 }
 
-/// One drop shadow of a floating layer, transcribed from the platform's
-/// native overlay shadows.
+/// One drop shadow of a floating layer,
+/// transcribed from the platform's native overlay shadows.
 #[derive(Clone, Copy, Debug, PartialEq)]
 pub struct Elevation {
     pub offset_y: Pixels,
@@ -149,6 +151,27 @@ impl Default for Motion {
     }
 }
 
+/// Overlay scrollbar geometry, transcribed from the platform's overlay crollbars.
+#[derive(Clone, Copy, Debug, PartialEq)]
+pub struct Scrollbar {
+    /// The painted thumb's thickness.
+    pub width: Pixels,
+    /// Edge padding between the thumb and the viewport it floats over.
+    pub inset: Pixels,
+    /// The thumb never shrinks below this length, so it stays grabbable.
+    pub min_thumb: Pixels,
+}
+
+impl Default for Scrollbar {
+    fn default() -> Self {
+        Self {
+            width: px(8.),
+            inset: px(2.),
+            min_thumb: px(24.),
+        }
+    }
+}
+
 /// A named control size class.
 #[derive(Clone, Copy, Debug, Default, PartialEq, Eq)]
 pub enum Size {
@@ -176,8 +199,7 @@ pub struct ControlMetrics {
     pub avatar_size: Pixels,
 }
 
-/// The control metrics for every size class, derived from the theme's root
-/// font size so controls scale with the platform's native type.
+/// The control metrics for every size class.
 #[derive(Clone, Copy, Debug, PartialEq)]
 pub struct SizeTable {
     pub small: ControlMetrics,
@@ -246,6 +268,7 @@ impl Theme {
             radius: resolved.radius,
             elevations: resolved.elevations,
             motion: resolved.motion,
+            scrollbar: resolved.scrollbar,
             root_font_size: resolved.root_font_size,
             sizes: resolved.sizes,
             accessibility: resolved.accessibility,

crates/theme/src/resolve.rs

@@ -1,7 +1,7 @@
 use crate::definition::ThemeDefinition;
 use crate::ramps::{AccentShades, Oklch, contrast_foreground, derive_shades, mix};
 use crate::system::SystemTheme;
-use crate::{ColorTokens, Elevations, Motion, Radius, SizeTable, ThemeVariant};
+use crate::{ColorTokens, Elevations, Motion, Radius, Scrollbar, SizeTable, ThemeVariant};
 use gpui::px;
 
 /// Derived state shades for the colors that get pressed and hovered.
@@ -21,6 +21,7 @@ pub struct ResolvedTheme {
     pub radius: Radius,
     pub elevations: Elevations,
     pub motion: Motion,
+    pub scrollbar: Scrollbar,
     /// The platform's native root font size; the fallback theme uses 16.
     pub root_font_size: gpui::Pixels,
     pub sizes: SizeTable,
@@ -130,6 +131,11 @@ pub(crate) fn resolve(
             system_palette.overlay,
             base.overlay,
         ),
+        scrollbar_thumb: pick(
+            def_color(|d| d.scrollbar_thumb()),
+            system_palette.scrollbar_thumb,
+            base.scrollbar_thumb,
+        ),
     };
 
     let accessibility = system.accessibility;
@@ -181,6 +187,7 @@ pub(crate) fn resolve(
         radius,
         elevations: Elevations::default(),
         motion: Motion::default(),
+        scrollbar: Scrollbar::default(),
         root_font_size,
         sizes,
         accessibility,

crates/theme/src/source/macos.rs

@@ -86,6 +86,7 @@ impl MacosSource {
             ring: Self::color_to_hsla(&NSColor::keyboardFocusIndicatorColor()),
             selection: Self::color_to_hsla(&NSColor::selectedTextBackgroundColor()),
             overlay: None,
+            scrollbar_thumb: None,
         }
     }
 }

crates/theme/src/system.rs

@@ -49,6 +49,8 @@ pub struct PartialPalette {
     pub selection: Option<Hsla>,
     /// No platform states a scrim color; preset and user files override it.
     pub overlay: Option<Hsla>,
+    /// No platform states a scrollbar thumb color; presets override it.
+    pub scrollbar_thumb: Option<Hsla>,
 }
 
 /// A normalized snapshot of the running system's theme.