ui/styles/
semantic.rs

1//! Theme-driven neutral color roles.
2//!
3//! Components read neutrals (surfaces, borders, text, hover backgrounds) from
4//! here rather than hardcoding palette grays, so dark and light both work
5//! automatically: [`theme::set_appearance`] swaps the active theme and every
6//! role below follows `cx.theme().colors()`. Accents/status come from
7//! [`crate::styles::palette`] directly (mode-agnostic).
8
9use gpui::{App, Hsla};
10use theme::ActiveTheme;
11
12/// Base app background.
13pub fn background(cx: &App) -> Hsla {
14    cx.theme().colors().background
15}
16
17/// Primary surface for cards, panels, inputs.
18pub fn surface(cx: &App) -> Hsla {
19    cx.theme().colors().surface_background
20}
21
22/// Raised surface for popovers, dropdowns, modals.
23pub fn elevated_surface(cx: &App) -> Hsla {
24    cx.theme().colors().elevated_surface_background
25}
26
27/// Default border.
28pub fn border(cx: &App) -> Hsla {
29    cx.theme().colors().border
30}
31
32/// Muted/subtle border.
33pub fn border_muted(cx: &App) -> Hsla {
34    cx.theme().colors().border_variant
35}
36
37/// Border color for focused elements (also see `focus_ring`).
38pub fn border_focused(cx: &App) -> Hsla {
39    cx.theme().colors().border_focused
40}
41
42/// Primary text.
43pub fn text(cx: &App) -> Hsla {
44    cx.theme().colors().text
45}
46
47/// Secondary/muted text.
48pub fn text_muted(cx: &App) -> Hsla {
49    cx.theme().colors().text_muted
50}
51
52/// Placeholder text.
53pub fn text_placeholder(cx: &App) -> Hsla {
54    cx.theme().colors().text_placeholder
55}
56
57/// Hover background for interactive neutral elements.
58pub fn hover_bg(cx: &App) -> Hsla {
59    cx.theme().colors().element_hover
60}
61
62/// Active/pressed background for interactive neutral elements.
63pub fn active_bg(cx: &App) -> Hsla {
64    cx.theme().colors().element_active
65}
66
67/// Default icon color.
68pub fn icon(cx: &App) -> Hsla {
69    cx.theme().colors().icon
70}
71
72/// Muted icon color.
73pub fn icon_muted(cx: &App) -> Hsla {
74    cx.theme().colors().icon_muted
75}
76
77/// shadcn `--secondary` background: always-visible neutral-solid surface.
78pub fn secondary_bg(cx: &App) -> Hsla {
79    cx.theme().colors().element_background
80}
81
82/// shadcn `--secondary-foreground` text on [`secondary_bg`].
83pub fn secondary_fg(cx: &App) -> Hsla {
84    cx.theme().colors().text
85}
86
87/// shadcn `--muted` background (companion to [`text_muted`]).
88pub fn muted_bg(cx: &App) -> Hsla {
89    cx.theme().colors().ghost_element_hover
90}
91
92/// shadcn `--accent` background: standalone accent chip, not hover-only.
93pub fn accent_bg(cx: &App) -> Hsla {
94    cx.theme().colors().element_selected
95}
96
97/// shadcn `--accent-foreground` text on [`accent_bg`].
98pub fn accent_fg(cx: &App) -> Hsla {
99    cx.theme().colors().text_accent
100}
101
102/// shadcn `--card` background (alias of [`surface`]).
103pub fn card(cx: &App) -> Hsla {
104    surface(cx)
105}
106
107/// shadcn `--popover` background (alias of [`elevated_surface`]).
108pub fn popover(cx: &App) -> Hsla {
109    elevated_surface(cx)
110}
111
112/// shadcn `--ring` focus ring color (alias of [`border_focused`]).
113pub fn ring(cx: &App) -> Hsla {
114    border_focused(cx)
115}
116
117/// shadcn `--input` border color (alias of [`border`] in this kit).
118pub fn input_border(cx: &App) -> Hsla {
119    border(cx)
120}
ui/styles/semantic.rs

ui/styles/
semantic.rs
