majiayu000 GPUI Styling
Metadata
This skill provides comprehensive guidance on GPUI's styling system, theme management, and visual design patterns for creating beautiful, consistent user interfaces.
Instructions
Styling API Fundamentals
Basic Styling
use gpui::*;
div()
// Colors
.bg(rgb(0x2563eb)) // Background
.text_color(white()) // Text color
.border_color(rgb(0xe5e7eb)) // Border color
// Spacing
.p_4() // Padding: 1rem
.px_6() // Padding horizontal
.py_2() // Padding vertical
.m_4() // Margin
.gap_3() // Gap between children
// Sizing
.w_64() // Width: 16rem
.h_32() // Height: 8rem
.w_full() // Width: 100%
.h_full() // Height: 100%
// Borders
.border_1() // Border: 1px
.rounded_lg() // Border radius: large
Color Types
// RGB from hex
let blue = rgb(0x2563eb);
// RGBA with alpha
let transparent_blue = rgba(0x2563eb, 0.5);
// HSLA (hue, saturation, lightness, alpha)
let hsla_color = hsla(0.6, 0.8, 0.5, 1.0);
// Named colors
let white = white();
let black = black();
Layout with Flexbox
div()
.flex() // Enable flexbox
.flex_row() // Horizontal layout
.flex_col() // Vertical layout
.items_center() // Align items center
.justify_between() // Space between
.gap_4() // Gap between items
.child(/* ... */)
.child(/* ... */)
Theme System
Basic Theme Structure
use gpui::*;
#[derive(Clone)]
pub struct AppTheme {
pub colors: ThemeColors,
pub typography: Typography,
pub spacing: Spacing,
pub shadows: Shadows,
}
#[derive(Clone)]
pub struct ThemeColors {
// Base colors
pub background: Hsla,
pub foreground: Hsla,
// UI colors
pub primary: Hsla,
pub primary_foreground: Hsla,
pub primary_hover: Hsla,
pub secondary: Hsla,
pub secondary_foreground: Hsla,
pub secondary_hover: Hsla,
pub accent: Hsla,
pub accent_foreground: Hsla,
pub destructive: Hsla,
pub destructive_foreground: Hsla,
// Neutral colors
pub muted: Hsla,
pub muted_foreground: Hsla,
pub border: Hsla,
pub input: Hsla,
pub ring: Hsla,
}
#[derive(Clone)]
pub struct Typography {
pub font_sans: Vec<String>,
pub font_mono: Vec<String>,
pub text_xs: Pixels,
pub text_sm: Pixels,
pub text_base: Pixels,
pub text_lg: Pixels,
pub text_xl: Pixels,
pub text_2xl: Pixels,
}
#[derive(Clone)]
pub struct Spacing {
pub xs: Pixels,
pub sm: Pixels,
pub md: Pixels,
pub lg: Pixels,
pub xl: Pixels,
}
Light Theme Implementation
impl AppTheme {
pub fn light() -> Self {
Self {
colors: ThemeColors {
background: rgb(0xffffff),
foreground: rgb(0x0a0a0a),
primary: rgb(0x2563eb),
primary_foreground: rgb(0xffffff),
primary_hover: rgb(0x1d4ed8),
secondary: rgb(0xf1f5f9),
secondary_foreground: rgb(0x0f172a),
secondary_hover: rgb(0xe2e8f0),
accent: rgb(0xf1f5f9),
accent_foreground: rgb(0x0f172a),
destructive: rgb(0xef4444),
destructive_foreground: rgb(0xffffff),
muted: rgb(0xf1f5f9),
muted_foreground: rgb(0x64748b),
border: rgb(0xe2e8f0),
input: rgb(0xe2e8f0),
ring: rgb(0x2563eb),
},
typography: Typography {
font_sans: vec![
"Inter".to_string(),
"system-ui".to_string(),
"sans-serif".to_string(),
],
font_mono: vec![
"JetBrains Mono".to_string(),
"monospace".to_string(),
],
text_xs: px(12.0),
text_sm: px(14.0),
text_base: px(16.0),
text_lg: px(18.0),
text_xl: px(20.0),
text_2xl: px(24.0),
},
spacing: Spacing {
xs: px(4.0),
sm: px(8.0),
md: px(16.0),
lg: px(24.0),
xl: px(32.0),
},
shadows: Shadows {
sm: Shadow::new(px(1.0), rgba(0x000000, 0.05)),
md: Shadow::new(px(4.0), rgba(0x000000, 0.1)),
lg: Shadow::new(px(8.0), rgba(0x000000, 0.15)),
},
}
}
}
Dark Theme Implementation
impl AppTheme {
pub fn dark() -> Self {
Self {
colors: ThemeColors {
background: rgb(0x0a0a0a),
foreground: rgb(0xfafafa),
primary: rgb(0x3b82f6),
primary_foreground: rgb(0xffffff),
primary_hover: rgb(0x2563eb),
secondary: rgb(0x1e293b),
secondary_foreground: rgb(0xf1f5f9),
secondary_hover: rgb(0x334155),
accent: rgb(0x1e293b),
accent_foreground: rgb(0xf1f5f9),
destructive: rgb(0xef4444),
destructive_foreground: rgb(0xffffff),
muted: rgb(0x1e293b),
muted_foreground: rgb(0x94a3b8),
border: rgb(0x334155),
input: rgb(0x334155),
ring: rgb(0x3b82f6),
},
typography: Typography {
font_sans: vec![
"Inter".to_string(),
"system-ui".to_string(),
"sans-serif".to_string(),
],
font_mono: vec![
"JetBrains Mono".to_string(),
"monospace".to_string(),
],
text_xs: px(12.0),
text_sm: px(14.0),
text_base: px(16.0),
text_lg: px(18.0),
text_xl: px(20.0),
text_2xl: px(24.0),
},
spacing: Spacing {
xs: px(4.0),
sm: px(8.0),
md: px(16.0),
lg: px(24.0),
xl: px(32.0),
},
shadows: Shadows {
sm: Shadow::new(px(1.0), rgba(0x000000, 0.2)),
md: Shadow::new(px(4.0), rgba(0x000000, 0.3)),
lg: Shadow::new(px(8.0), rgba(0x000000, 0.4)),
},
}
}
}
Using Themes in Components
impl Render for ThemedComponent {
fn render(&mut self, cx: &mut ViewContext<Self>) -> impl IntoElement {
let theme = cx.global::<AppTheme>();
div()
.bg(theme.colors.background)
.text_color(theme.colors.foreground)
.p(theme.spacing.md)
.border_1()
.border_color(theme.colors.border)
.child("Themed content")
}
}
Theme Switching
pub fn toggle_theme(cx: &mut AppContext) {
let current = cx.global::<AppTheme>().clone();
let new_theme = match current.mode {
ThemeMode::Light => AppTheme::dark(),
ThemeMode::Dark => AppTheme::light(),
};
cx.set_global(new_theme);
cx.refresh();
}
Responsive Design
Window Size Detection
impl Render for ResponsiveView {
fn render(&mut self, cx: &mut ViewContext<Self>) -> impl IntoElement {
let window_size = cx.window_bounds().get_bounds().size;
let is_mobile = window_size.width < px(768.0);
let is_tablet = window_size.width >= px(768.0) && window_size.width < px(1024.0);
let is_desktop = window_size.width >= px(1024.0);
div()
.flex()
.when(is_mobile, |this| {
this.flex_col().gap_2()
})
.when(is_desktop, |this| {
this.flex_row().gap_6()
})
.child(sidebar())
.child(main_content())
}
}
Breakpoint-Based Styling
pub struct Breakpoints;
impl Breakpoints {
pub const SM: f32 = 640.0;
pub const MD: f32 = 768.0;
pub const LG: f32 = 1024.0;
pub const XL: f32 = 1280.0;
pub const XXL: f32 = 1536.0;
}
fn responsive_grid(width: Pixels) -> impl IntoElement {
div()
.grid()
.when(width.0 < Breakpoints::SM, |this| this.grid_cols_1())
.when(width.0 >= Breakpoints::SM && width.0 < Breakpoints::LG, |this| {
this.grid_cols_2()
})
.when(width.0 >= Breakpoints::LG, |this| this.grid_cols_3())
.gap_4()
}
Visual Design Patterns
Card Component
pub fn card(
title: impl Into<String>,
description: impl Into<String>,
content: impl IntoElement,
) -> impl IntoElement {
let theme = cx.global::<AppTheme>();
div()
.bg(theme.colors.background)
.border_1()
.border_color(theme.colors.border)
.rounded_lg()
.shadow_sm()
.overflow_hidden()
.child(
div()
.p_6()
.border_b_1()
.border_color(theme.colors.border)
.child(
div()
.text_lg()
.font_semibold()
.child(title.into())
)
.child(
div()
.text_sm()
.text_color(theme.colors.muted_foreground)
.child(description.into())
)
)
.child(
div()
.p_6()
.child(content)
)
}
Button Variants
pub enum ButtonVariant {
Primary,
Secondary,
Outline,
Ghost,
Destructive,
}
pub fn button(
label: &str,
variant: ButtonVariant,
) -> impl IntoElement {
let theme = cx.global::<AppTheme>();
let (bg, fg, hover_bg) = match variant {
ButtonVariant::Primary => (
theme.colors.primary,
theme.colors.primary_foreground,
theme.colors.primary_hover,
),
ButtonVariant::Secondary => (
theme.colors.secondary,
theme.colors.secondary_foreground,
theme.colors.secondary_hover,
),
ButtonVariant::Outline => (
hsla(0.0, 0.0, 0.0, 0.0),
theme.colors.foreground,
theme.colors.accent,
),
ButtonVariant::Ghost => (
hsla(0.0, 0.0, 0.0, 0.0),
theme.colors.foreground,
theme.colors.accent,
),
ButtonVariant::Destructive => (
theme.colors.destructive,
theme.colors.destructive_foreground,
theme.colors.destructive,
),
};
div()
.px_4()
.py_2()
.bg(bg)
.text_color(fg)
.rounded_md()
.font_medium()
.cursor_pointer()
.when(matches!(variant, ButtonVariant::Outline), |this| {
this.border_1().border_color(theme.colors.border)
})
.hover(|this| this.bg(hover_bg))
.transition_colors()
.duration_150()
.child(label)
}
Input Fields
pub fn text_input(
value: &str,
placeholder: &str,
) -> impl IntoElement {
let theme = cx.global::<AppTheme>();
div()
.flex()
.items_center()
.w_full()
.px_3()
.py_2()
.bg(theme.colors.background)
.border_1()
.border_color(theme.colors.input)
.rounded_md()
.text_color(theme.colors.foreground)
.focus(|this| {
this.border_color(theme.colors.ring)
.ring_2()
.ring_color(rgba(theme.colors.ring, 0.2))
})
.child(
input()
.w_full()
.bg(hsla(0.0, 0.0, 0.0, 0.0))
.placeholder(placeholder)
.value(value)
)
}
Style Composition
Reusable Style Functions
pub fn focus_ring(theme: &AppTheme) -> StyleRefinement {
StyleRefinement::default()
.ring_2()
.ring_color(rgba(theme.colors.ring, 0.2))
.border_color(theme.colors.ring)
}
pub fn shadow_sm(theme: &AppTheme) -> StyleRefinement {
StyleRefinement::default()
.shadow(theme.shadows.sm)
}
// Usage
div()
.apply(focus_ring(&theme))
.apply(shadow_sm(&theme))
.child("Styled element")
Conditional Styles
fn dynamic_button(
label: &str,
is_loading: bool,
is_disabled: bool,
) -> impl IntoElement {
let theme = cx.global::<AppTheme>();
div()
.px_4()
.py_2()
.bg(theme.colors.primary)
.text_color(theme.colors.primary_foreground)
.rounded_md()
.when(is_disabled || is_loading, |this| {
this.opacity(0.5).cursor_not_allowed()
})
.when(!is_disabled && !is_loading, |this| {
this.cursor_pointer()
.hover(|this| this.bg(theme.colors.primary_hover))
})
.child(
if is_loading {
"Loading..."
} else {
label
}
)
}
Animation and Transitions
Hover Transitions
div()
.transition_all() // Transition all properties
.duration_200() // 200ms duration
.bg(blue_500())
.hover(|this| {
this.bg(blue_600())
.scale_105() // Scale to 105%
})
.child("Hover me")
Transform Animations
div()
.transition_transform()
.duration_300()
.ease_in_out()
.hover(|this| {
this.rotate(5.0) // Rotate 5 degrees
.translate_y(px(-2.0)) // Move up 2px
})
.child("Animated element")
Resources
Color Systems
- Use HSL for color manipulation
- Maintain consistent color contrast ratios
- Define semantic color names (primary, secondary, etc.)
- Support both light and dark themes
Typography Scale
- Base: 16px (1rem)
- Scale: 1.125 (Major Second) or 1.2 (Minor Third)
- Sizes: xs, sm, base, lg, xl, 2xl, etc.
- Weights: normal, medium, semibold, bold
Spacing Scale
- Base unit: 4px or 8px
- Multipliers: 0.5, 1, 2, 3, 4, 6, 8, 12, 16, 24, 32
- Consistent throughout application
- Used for padding, margin, gap
Best Practices
- Define theme at app level
- Use semantic color names
- Implement both light and dark themes
- Support responsive design
- Maintain consistent spacing
- Use transitions for smooth interactions
- Ensure accessibility (contrast, focus indicators)
- Document theme structure