ZacharyZhang-NYandClaude Opus 5.5
d2ac6c7753
DesignTokenViewer shows every token of the theme in the mode shown, named as code reads it: colors with their hex, syntax, chart and terminal colors, the type scale, radii, control and icon sizes, elevations and spacing. A11yChecker audits each text color over the surfaces it sits on at 4.5:1 and the focus ring and chart hues at 3:1, failures first. The audit found fg_subtle under 4.5:1 on hover and overlay; it is #6f6d6a light and #8c8a87 dark now, and a test holds all four Ely palettes to the audit. IconBrowser points to forms::IconPicker and the ScreenshotTest Harness to the gallery's capture, each with a section on the tooling page. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
75 lines
3.0 KiB
Rust
75 lines
3.0 KiB
Rust
use ely_gpui_component::{
|
|
forms::IconPicker,
|
|
primitives::{Icon, IconName},
|
|
theme::{ActiveTheme, IconSize},
|
|
tooling::{A11yChecker, DesignTokenViewer},
|
|
typography::Code,
|
|
};
|
|
use gpui::{AnyElement, App, IntoElement, ParentElement, Styled, Window, div, px};
|
|
|
|
use crate::probe::probe;
|
|
use crate::ui::section;
|
|
|
|
pub fn sections(window: &mut Window, cx: &mut App) -> Vec<AnyElement> {
|
|
let picked = window.use_keyed_state("icon-browser-picked", cx, |_, _| IconName::Search);
|
|
let icon = *picked.read(cx);
|
|
let fg = cx.theme().colors.fg;
|
|
vec![
|
|
section(
|
|
"DesignTokenViewer",
|
|
"Every token of the theme in the mode shown, each named as code reads it: the colors with their hex, the syntax, chart and terminal colors, the type scale, radii, control and icon sizes, elevations and the spacing steps.",
|
|
cx,
|
|
)
|
|
.child(div().max_w(px(840.0)).child(DesignTokenViewer::new()))
|
|
.into_any_element(),
|
|
section(
|
|
"IconBrowser",
|
|
"The library's icons, searchable: this is forms::IconPicker, its home. Pick one to see the name code uses.",
|
|
cx,
|
|
)
|
|
.child(
|
|
div()
|
|
.flex()
|
|
.flex_wrap()
|
|
.items_start()
|
|
.gap_6()
|
|
.child(probe(
|
|
"icon-browser",
|
|
IconPicker::new("icon-browser")
|
|
.selected(icon)
|
|
.on_change(move |next, _, cx| {
|
|
picked.update(cx, |picked, cx| {
|
|
*picked = next;
|
|
cx.notify();
|
|
})
|
|
}),
|
|
))
|
|
.child(
|
|
div()
|
|
.flex()
|
|
.items_center()
|
|
.gap_3()
|
|
.child(Icon::new(icon).size(IconSize::Xxl).color(fg))
|
|
.child(Code::new(format!("IconName::{icon:?}"))),
|
|
),
|
|
)
|
|
.into_any_element(),
|
|
section(
|
|
"A11yChecker",
|
|
"The theme's contrast in the mode shown: each text color over the surfaces it sits on at 4.5:1, the focus ring and the chart hues beside the page at 3:1, failures first. Ely's palettes pass in both modes, with high contrast and without.",
|
|
cx,
|
|
)
|
|
.child(div().max_w(px(560.0)).child(A11yChecker::new()))
|
|
.into_any_element(),
|
|
section(
|
|
"ScreenshotTest Harness",
|
|
"The gallery photographs itself: --capture writes every page top to bottom, light and dark, then each page's scripted states, with input posted to its own event queue. Each pass starts its page fresh, and reduced motion holds the shots still.",
|
|
cx,
|
|
)
|
|
.child(Code::new(
|
|
"cargo run --example gallery -- --page tooling --capture shots",
|
|
))
|
|
.into_any_element(),
|
|
]
|
|
}
|