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.
74 lines
2.2 KiB
Rust
74 lines
2.2 KiB
Rust
use ely_gpui_component::{
|
|
primitives::{Icon, IconName},
|
|
theme::{ActiveTheme, IconSize},
|
|
};
|
|
use gpui::{AnyElement, App, InteractiveElement, IntoElement, ParentElement, Styled, Window, div};
|
|
|
|
use super::Page;
|
|
use crate::ui::{section, specimen, specimens};
|
|
|
|
pub const PAGE: Page = Page {
|
|
number: 1,
|
|
slug: "primitives",
|
|
title: "Primitives",
|
|
summary: "The smallest parts. Icons, dividers, overlays, focus.",
|
|
render,
|
|
};
|
|
|
|
fn render(_: &mut Window, cx: &mut App) -> AnyElement {
|
|
let colors = &cx.theme().colors;
|
|
let sizes = [
|
|
(IconSize::Xs, "12"),
|
|
(IconSize::Sm, "14"),
|
|
(IconSize::Md, "16"),
|
|
(IconSize::Lg, "20"),
|
|
(IconSize::Xl, "24"),
|
|
(IconSize::Xxl, "32"),
|
|
];
|
|
let tones = [
|
|
(colors.fg, "fg"),
|
|
(colors.fg_muted, "muted"),
|
|
(colors.focus, "focus"),
|
|
(colors.success, "success"),
|
|
(colors.warning, "warning"),
|
|
(colors.danger, "danger"),
|
|
];
|
|
|
|
div()
|
|
.child(
|
|
section(
|
|
"Icon",
|
|
"Lucide, drawn as a mask. Color comes from the theme.",
|
|
cx,
|
|
)
|
|
.child(specimens().children(
|
|
sizes.map(|(size, name)| {
|
|
specimen(name, Icon::new(IconName::Sparkles).size(size), cx)
|
|
}),
|
|
))
|
|
.child(specimens().children(tones.map(|(color, name)| {
|
|
specimen(name, Icon::new(IconName::CircleCheck).color(color), cx)
|
|
}))),
|
|
)
|
|
.child(
|
|
section("Icon set", "Every bundled icon.", cx).child(
|
|
div()
|
|
.flex()
|
|
.flex_wrap()
|
|
.gap_1()
|
|
.children(IconName::ALL.iter().enumerate().map(|(ix, &name)| {
|
|
div()
|
|
.id(ix)
|
|
.size_9()
|
|
.flex()
|
|
.items_center()
|
|
.justify_center()
|
|
.rounded_md()
|
|
.hover(|style| style.bg(colors.hover))
|
|
.child(Icon::new(name).color(colors.fg_muted))
|
|
})),
|
|
),
|
|
)
|
|
.into_any_element()
|
|
}
|