ZacharyZhang-NY
abf4cbcfc6
Theme tokens in light and dark with high contrast, a palette cross-fade, motion curves and a damped spring, embedded Lucide icons with Inter and JetBrains Mono, Icon, Button, IconButton, and a gallery that captures its own window. Reviewed by codex gpt-6-astra (max): PASS in round 3.
325 lines
10 KiB
Rust
325 lines
10 KiB
Rust
use std::time::Duration;
|
|
|
|
use ely_gpui_component::{
|
|
motion,
|
|
theme::{ActiveTheme, Elevation, Radius, TextSize},
|
|
};
|
|
use gpui::{
|
|
Animation, AnimationExt, AnyElement, App, FontStyle, FontWeight, HighlightStyle, Hsla,
|
|
IntoElement, ParentElement, SharedString, Styled, StyledText, Window, div, px,
|
|
};
|
|
|
|
use super::Page;
|
|
use crate::ui::{section, specimen, specimens};
|
|
|
|
pub const PAGE: Page = Page {
|
|
number: 39,
|
|
slug: "theme",
|
|
title: "Theme",
|
|
summary: "Tokens every component reads. Light and dark share one grammar.",
|
|
render,
|
|
};
|
|
|
|
fn render(_: &mut Window, cx: &mut App) -> AnyElement {
|
|
let colors = cx.theme().colors.clone();
|
|
let surfaces = [
|
|
("bg", colors.bg),
|
|
("surface", colors.surface),
|
|
("sunken", colors.sunken),
|
|
("hover", colors.hover),
|
|
("active", colors.active),
|
|
("border", colors.border),
|
|
("border strong", colors.border_strong),
|
|
];
|
|
let inks = [
|
|
("fg", colors.fg),
|
|
("muted", colors.fg_muted),
|
|
("subtle", colors.fg_subtle),
|
|
("disabled", colors.fg_disabled),
|
|
("focus", colors.focus),
|
|
("link", colors.link),
|
|
];
|
|
let signals = [
|
|
("success", colors.success, colors.success_subtle),
|
|
("warning", colors.warning, colors.warning_subtle),
|
|
("danger", colors.danger, colors.danger_subtle),
|
|
("info", colors.info, colors.info_subtle),
|
|
];
|
|
|
|
div()
|
|
.child(
|
|
section(
|
|
"Surfaces",
|
|
"Warm neutrals. Depth comes from tone, not shadow.",
|
|
cx,
|
|
)
|
|
.child(
|
|
specimens()
|
|
.gap_3()
|
|
.children(surfaces.map(|(name, color)| swatch(name, color, cx))),
|
|
),
|
|
)
|
|
.child(
|
|
section("Ink", "Four steps of text. Blue marks focus and links.", cx).child(
|
|
specimens()
|
|
.gap_3()
|
|
.children(inks.map(|(name, color)| swatch(name, color, cx))),
|
|
),
|
|
)
|
|
.child(
|
|
section("Signals", "Status colors, each with a quiet fill.", cx).child(
|
|
specimens()
|
|
.gap_3()
|
|
.children(signals.map(|(name, strong, quiet)| {
|
|
specimen(name, signal_pair(strong, quiet, cx), cx)
|
|
})),
|
|
),
|
|
)
|
|
.child(
|
|
section("Series", "Eight chart colors, even in weight.", cx).child(
|
|
specimens()
|
|
.gap_2()
|
|
.children(colors.chart.iter().enumerate().map(|(ix, &color)| {
|
|
specimen(format!("{}", ix + 1), chip(color, 40.0, cx), cx)
|
|
})),
|
|
),
|
|
)
|
|
.child(
|
|
section("Syntax", "Code tokens sit below text in weight.", cx).child(code_sample(cx)),
|
|
)
|
|
.child(
|
|
section("Type", "Inter for words. JetBrains Mono for code.", cx).child(type_scale(cx)),
|
|
)
|
|
.child(
|
|
section("Shape", "Four radii. Three elevations.", cx)
|
|
.child(
|
|
specimens().children([Radius::Sm, Radius::Md, Radius::Lg, Radius::Xl].map(
|
|
|radius| {
|
|
specimen(
|
|
format!("{radius:?}"),
|
|
div()
|
|
.size(px(64.0))
|
|
.rounded(cx.theme().radius(radius))
|
|
.bg(colors.sunken)
|
|
.border_1()
|
|
.border_color(colors.border_strong),
|
|
cx,
|
|
)
|
|
},
|
|
)),
|
|
)
|
|
.child(specimens().gap_8().pt_4().children(
|
|
[Elevation::Raised, Elevation::Floating, Elevation::Modal].map(|level| {
|
|
specimen(
|
|
format!("{level:?}"),
|
|
div()
|
|
.w(px(120.0))
|
|
.h(px(72.0))
|
|
.rounded(cx.theme().radius(Radius::Lg))
|
|
.bg(colors.overlay)
|
|
.shadow(cx.theme().elevation(level)),
|
|
cx,
|
|
)
|
|
}),
|
|
)),
|
|
)
|
|
.child(
|
|
section(
|
|
"Motion",
|
|
"Ease out to arrive. Springs only where a hand leads. Slowed to one second here.",
|
|
cx,
|
|
)
|
|
.child(track(
|
|
"ease-out",
|
|
"ease out cubic",
|
|
motion::ease_out_cubic,
|
|
cx,
|
|
))
|
|
.child(track(
|
|
"ease-in-out",
|
|
"ease in out cubic",
|
|
motion::ease_in_out_cubic,
|
|
cx,
|
|
))
|
|
.child(track("spring", "spring · damping 0.75", motion::spring, cx)),
|
|
)
|
|
.into_any_element()
|
|
}
|
|
|
|
fn chip(color: Hsla, side: f32, cx: &App) -> impl IntoElement + use<> {
|
|
let theme = cx.theme();
|
|
div()
|
|
.w(px(side))
|
|
.h(px(side))
|
|
.rounded(theme.radius(Radius::Md))
|
|
.bg(color)
|
|
.border_1()
|
|
.border_color(theme.colors.border)
|
|
}
|
|
|
|
fn swatch(name: &'static str, color: Hsla, cx: &App) -> impl IntoElement + use<> {
|
|
let theme = cx.theme();
|
|
specimen(
|
|
name,
|
|
div()
|
|
.w(px(88.0))
|
|
.h(px(56.0))
|
|
.rounded(theme.radius(Radius::Lg))
|
|
.bg(color)
|
|
.border_1()
|
|
.border_color(theme.colors.border),
|
|
cx,
|
|
)
|
|
}
|
|
|
|
fn signal_pair(strong: Hsla, quiet: Hsla, cx: &App) -> impl IntoElement + use<> {
|
|
let theme = cx.theme();
|
|
div()
|
|
.flex()
|
|
.items_center()
|
|
.gap_2()
|
|
.h(px(40.0))
|
|
.px_3()
|
|
.rounded(theme.radius(Radius::Md))
|
|
.bg(quiet)
|
|
.child(div().size(px(8.0)).rounded_full().bg(strong))
|
|
.child(
|
|
div()
|
|
.text_color(strong)
|
|
.font_weight(FontWeight::MEDIUM)
|
|
.child("Aa 12"),
|
|
)
|
|
}
|
|
|
|
fn code_sample(cx: &App) -> impl IntoElement + use<> {
|
|
let theme = cx.theme();
|
|
let syntax = &theme.colors.syntax;
|
|
let text = "fn answer() -> u32 { let x = 42; x } // truth";
|
|
let color = |c: Hsla| HighlightStyle {
|
|
color: Some(c),
|
|
..Default::default()
|
|
};
|
|
let spans = [
|
|
(0..2, color(syntax.keyword)),
|
|
(3..9, color(syntax.function)),
|
|
(9..11, color(syntax.punctuation)),
|
|
(12..14, color(syntax.operator)),
|
|
(15..18, color(syntax.type_name)),
|
|
(19..20, color(syntax.punctuation)),
|
|
(21..24, color(syntax.keyword)),
|
|
(25..26, color(syntax.variable)),
|
|
(27..28, color(syntax.operator)),
|
|
(29..31, color(syntax.number)),
|
|
(31..32, color(syntax.punctuation)),
|
|
(35..36, color(syntax.punctuation)),
|
|
(
|
|
37..45,
|
|
HighlightStyle {
|
|
color: Some(syntax.comment),
|
|
font_style: Some(FontStyle::Italic),
|
|
..Default::default()
|
|
},
|
|
),
|
|
];
|
|
div()
|
|
.px_4()
|
|
.py_3()
|
|
.rounded(theme.radius(Radius::Lg))
|
|
.bg(theme.colors.sunken)
|
|
.font_family(theme.mono_family.clone())
|
|
.text_size(theme.text_size(TextSize::Base))
|
|
.text_color(theme.colors.fg)
|
|
.child(StyledText::new(text).with_highlights(spans))
|
|
}
|
|
|
|
fn type_scale(cx: &App) -> impl IntoElement + use<> {
|
|
let theme = cx.theme();
|
|
let steps = [
|
|
(TextSize::Display, "Display 32", FontWeight::SEMIBOLD),
|
|
(TextSize::Xxl, "Heading 24", FontWeight::SEMIBOLD),
|
|
(TextSize::Xl, "Title 20", FontWeight::SEMIBOLD),
|
|
(TextSize::Lg, "Subtitle 16", FontWeight::MEDIUM),
|
|
(TextSize::Md, "Body large 14", FontWeight::NORMAL),
|
|
(TextSize::Base, "Body 13", FontWeight::NORMAL),
|
|
(TextSize::Sm, "Small 12", FontWeight::NORMAL),
|
|
(TextSize::Xs, "Caption 11", FontWeight::NORMAL),
|
|
];
|
|
div()
|
|
.flex()
|
|
.flex_col()
|
|
.gap_3()
|
|
.children(steps.map(|(size, name, weight)| {
|
|
div()
|
|
.flex()
|
|
.items_center()
|
|
.gap_6()
|
|
.child(
|
|
div()
|
|
.w(px(120.0))
|
|
.text_size(theme.text_size(TextSize::Xs))
|
|
.text_color(theme.colors.fg_subtle)
|
|
.child(SharedString::from(name)),
|
|
)
|
|
.child(
|
|
div()
|
|
.text_size(theme.text_size(size))
|
|
.font_weight(weight)
|
|
.text_color(theme.colors.fg)
|
|
.child("Quiet interfaces age well."),
|
|
)
|
|
}))
|
|
}
|
|
|
|
fn track(
|
|
id: &'static str,
|
|
name: &'static str,
|
|
ease: fn(f32) -> f32,
|
|
cx: &App,
|
|
) -> impl IntoElement + use<> {
|
|
let theme = cx.theme();
|
|
let width = 360.0;
|
|
let travel = width - 12.0;
|
|
let knob = div()
|
|
.absolute()
|
|
.top(px(6.0))
|
|
.size(px(12.0))
|
|
.rounded_full()
|
|
.bg(theme.colors.fg);
|
|
let knob = if theme.reduced_motion {
|
|
knob.left(px(travel)).into_any_element()
|
|
} else {
|
|
knob.with_animation(
|
|
id,
|
|
Animation::new(Duration::from_millis(2400)).repeat(),
|
|
move |knob, t| {
|
|
let offset = match t {
|
|
t if t < 0.42 => ease(t / 0.42),
|
|
t if t < 0.5 => 1.0,
|
|
t if t < 0.92 => 1.0 - ease((t - 0.5) / 0.42),
|
|
_ => 0.0,
|
|
};
|
|
knob.left(px(offset * travel))
|
|
},
|
|
)
|
|
.into_any_element()
|
|
};
|
|
specimen(
|
|
name,
|
|
div()
|
|
.relative()
|
|
.w(px(width))
|
|
.h(px(24.0))
|
|
.child(
|
|
div()
|
|
.absolute()
|
|
.top(px(11.5))
|
|
.left_0()
|
|
.w(px(width))
|
|
.h(px(1.0))
|
|
.bg(theme.colors.border),
|
|
)
|
|
.child(knob),
|
|
cx,
|
|
)
|
|
}
|