ui/styles/radius.rs
1//! shadcn `--radius` scale mapped to GPUI corner-radius builders.
2//!
3//! shadcn (Tailwind v4 template, `globals.css`) defines:
4//! - `--radius: 0.625rem` (10px at 16px root)
5//! - `--radius-sm: calc(var(--radius) - 4px)` → 6px
6//! - `--radius-md: calc(var(--radius) - 2px)` → 8px
7//! - `--radius-lg: var(--radius)` → 10px
8//! - `--radius-xl: calc(var(--radius) + 4px)` → 14px
9//!
10//! GPUI's own Tailwind-style corner radius steps (see
11//! `crates/gpui_macros/src/styles.rs`'s `corner_suffixes()`, the source of
12//! truth for these px values) are a fixed rem scale that does **not** line
13//! up 1:1 with shadcn's `calc()`-derived values:
14//! - `.rounded_sm()` → 4px (0.25rem)
15//! - `.rounded_md()` → 6px (0.375rem)
16//! - `.rounded_lg()` → 8px (0.5rem)
17//! - `.rounded_xl()` → 12px (0.75rem)
18//! - `.rounded_2xl()` → 16px (1rem)
19//!
20//! The constants below are **documentation only** — plain `&str` labels
21//! naming which GPUI builder method to call for each shadcn step, not
22//! callable radius values themselves. `RADIUS_SM`/`RADIUS_MD` line up with
23//! an exact GPUI step; `RADIUS_LG`/`RADIUS_XL` don't have an exact match and
24//! are pinned to the nearest larger step so the four constants stay
25//! strictly ordered smallest-to-largest instead of two of them colliding on
26//! the same builder. New or aligned components should call the matching
27//! builder directly rather than inventing ad-hoc pixel radii; this module
28//! exists purely as the reference mapping.
29
30/// shadcn `--radius-sm` (6px). GPUI: `.rounded_md()` — exact match (6px).
31pub const RADIUS_SM: &str = "rounded_md";
32
33/// shadcn `--radius-md` (8px). GPUI: `.rounded_lg()` — exact match (8px).
34pub const RADIUS_MD: &str = "rounded_lg";
35
36/// shadcn `--radius-lg` / base `--radius` (10px). GPUI: `.rounded_xl()` —
37/// no exact 10px step exists; this is the nearest larger one (12px).
38pub const RADIUS_LG: &str = "rounded_xl";
39
40/// shadcn `--radius-xl` (14px). GPUI: `.rounded_2xl()` — no exact 14px step
41/// exists; this is the nearest larger one (16px), kept distinct from
42/// [`RADIUS_LG`] so the two shadcn steps don't collide on one GPUI builder.
43pub const RADIUS_XL: &str = "rounded_2xl";
44
45/// Full pill — shadcn badges/chips. GPUI: `.rounded_full()`.
46pub const RADIUS_FULL: &str = "rounded_full";