Make every shell color token theme-aware

Dark mode was persistent in `AppearanceSettings` but never reached any
paint code: every call site in the shell read `colors::INK` etc. as a
`pub const u32`, so toggling `ThemeMode::Dark` mutated state nothing
sampled. Root-cause fix is to invert the contract — the design-system
exports functions that resolve through a thread-local `Mode`, and the
GPUI render impl sets that mode each frame.

What lands:
- `ely_design_system::colors::Mode` + thread-local + `set_mode` /
  `mode` accessors. Every ink shade, glass surface, stroke, divider,
  hairline, canvas, success / error chip now picks the warm-dark
  counterpart when the active mode is `Mode::Dark`.
- `ElyShell::render` resolves `ThemeMode::System` against
  `Window::appearance()` and pushes the mode before traversing the
  tree, so widgets lower down read the right shade without owning a
  `Mode` parameter.
- `render_wallpaper` + `panel_bg` now branch on `colors::mode()` so
  the gradient base, panel tint, and overlay highlights flip to
  warm-graphite when dark mode is active.
- Mechanical conversion across 687 call sites in 55 files from
  `colors::FOO` constants to `colors::foo()` accessors. The
  `Theme` / `ELY_THEME` const surface (unused outside the design
  system) is removed; the function surface is the new contract.
This commit is contained in:
2026-05-15 19:50:38 -04:00
parent 5548427df3
commit 6b2578c3a8
58 changed files with 1010 additions and 745 deletions
@@ -46,16 +46,16 @@ fn render_header() -> AnyElement {
.flex()
.flex_col()
.gap(px(6.0))
.child(div().text_size(px(11.0)).text_color(rgb(colors::INK_4)).child("GENERAL"))
.child(div().text_size(px(11.0)).text_color(rgb(colors::ink_4())).child("GENERAL"))
.child(
div()
.font_family(SERIF_FAMILY)
.text_size(px(34.0))
.font_weight(FontWeight(400.0))
.text_color(rgb(colors::INK))
.text_color(rgb(colors::ink()))
.child("Appearance"),
)
.child(div().max_w(px(520.0)).text_size(px(13.0)).text_color(rgb(colors::INK_3)).child(
.child(div().max_w(px(520.0)).text_size(px(13.0)).text_color(rgb(colors::ink_3())).child(
"Tune the atmosphere of your browser. ELY's wallpaper sets the ambient \
palette of every surface; pick one and let it breathe.",
))
@@ -100,8 +100,8 @@ fn render_wallpaper_swatch(
div()
.h(px(96.0))
.rounded(px(10.0))
.when(selected, |el| el.border_2().border_color(rgb(colors::ACCENT)))
.when(!selected, |el| el.border_1().border_color(rgba(colors::STROKE)))
.when(selected, |el| el.border_2().border_color(rgb(colors::accent())))
.when(!selected, |el| el.border_1().border_color(rgba(colors::stroke())))
.relative()
.overflow_hidden()
.bg(rgb(base))
@@ -126,11 +126,11 @@ fn render_wallpaper_swatch(
div()
.flex_1()
.font_weight(FontWeight(500.0))
.text_color(rgb(colors::INK))
.text_color(rgb(colors::ink()))
.child(label),
)
.when(selected, |el| {
el.child(div().text_color(rgb(colors::ACCENT)).child(IconName::Check))
el.child(div().text_color(rgb(colors::accent())).child(IconName::Check))
}),
)
.into_any_element()
@@ -168,7 +168,7 @@ fn render_translucency_row(shell: &mut ElyShell, pct: u8) -> AnyElement {
div()
.min_w(px(36.0))
.text_size(px(11.0))
.text_color(rgb(colors::INK_3))
.text_color(rgb(colors::ink_3()))
.child(format!("{pct}%")),
)
.into_any_element(),
@@ -181,7 +181,7 @@ fn render_translucency_presets(cx: &mut Context<ElyShell>) -> AnyElement {
.items_center()
.gap(px(8.0))
.pt(px(2.0))
.child(div().text_size(px(10.5)).text_color(rgb(colors::INK_4)).child("Presets"))
.child(div().text_size(px(10.5)).text_color(rgb(colors::ink_4())).child("Presets"))
.child(translucency_preset("Solid", 0, cx))
.child(translucency_preset("Default", 40, cx))
.child(translucency_preset("Glassy", 75, cx))
@@ -203,7 +203,7 @@ fn translucency_preset(
.bg(rgba(SEGMENT_BG))
.text_size(px(11.5))
.font_weight(FontWeight(500.0))
.text_color(rgb(colors::INK_2))
.text_color(rgb(colors::ink_2()))
.cursor_pointer()
.hover(|style| style.opacity(0.92))
.active(|style| style.opacity(0.82))
@@ -249,7 +249,7 @@ fn theme_segment(
.rounded(px(6.0))
.text_size(px(12.0))
.font_weight(FontWeight(500.0))
.text_color(rgb(colors::INK_2))
.text_color(rgb(colors::ink_2()))
.bg(rgba(bg))
.cursor_pointer()
.hover(|style| style.opacity(0.92))
@@ -269,11 +269,11 @@ fn render_accent_row() -> AnyElement {
.flex()
.items_center()
.gap(px(8.0))
.child(swatch(colors::ACCENT, true))
.child(swatch(colors::accent(), true))
.child(swatch(0xec6a8e, false))
.child(swatch(0x7c6cf7, false))
.child(swatch(0x4fb59a, false))
.child(swatch(colors::INK, false))
.child(swatch(colors::ink(), false))
.into_any_element(),
)
}
@@ -286,7 +286,7 @@ fn swatch(color: u32, selected: bool) -> AnyElement {
.border_1()
.border_color(rgba(0x0000000d));
if selected {
element = element.border_2().border_color(rgb(colors::ACCENT));
element = element.border_2().border_color(rgb(colors::accent()));
}
element.into_any_element()
}
@@ -300,7 +300,7 @@ fn render_reduce_motion_row(reduce: bool, cx: &mut Context<ElyShell>) -> AnyElem
.w(px(34.0))
.h(px(20.0))
.rounded_full()
.bg(if reduce { rgb(colors::ACCENT) } else { rgba(0x281e1426) })
.bg(if reduce { rgb(colors::accent()) } else { rgba(0x281e1426) })
.p(px(2.0))
.cursor_pointer()
.hover(|style| style.opacity(0.9))
@@ -329,7 +329,7 @@ fn render_reset_row(cx: &mut Context<ElyShell>) -> AnyElement {
.bg(rgba(SEGMENT_BG))
.text_size(px(12.0))
.font_weight(FontWeight(500.0))
.text_color(rgb(colors::INK_2))
.text_color(rgb(colors::ink_2()))
.cursor_pointer()
.hover(|style| style.opacity(0.92))
.active(|style| style.opacity(0.82))
@@ -348,7 +348,7 @@ fn settings_row(title: &'static str, detail: &'static str, control: AnyElement)
.gap(px(16.0))
.py(px(14.0))
.border_b_1()
.border_color(rgba(colors::DIVIDER))
.border_color(rgba(colors::divider()))
.child(
div()
.flex_1()
@@ -360,10 +360,10 @@ fn settings_row(title: &'static str, detail: &'static str, control: AnyElement)
div()
.text_size(px(13.0))
.font_weight(FontWeight(500.0))
.text_color(rgb(colors::INK))
.text_color(rgb(colors::ink()))
.child(title),
)
.child(div().text_size(px(11.5)).text_color(rgb(colors::INK_3)).child(detail)),
.child(div().text_size(px(11.5)).text_color(rgb(colors::ink_3())).child(detail)),
)
.child(control)
.into_any_element()
@@ -26,13 +26,13 @@ pub(crate) fn render_sidebar_layout_section(
.flex_col()
.gap(px(14.0))
.pt(px(8.0))
.child(div().text_size(px(11.0)).text_color(rgb(colors::INK_4)).child("SIDEBAR"))
.child(div().text_size(px(11.0)).text_color(rgb(colors::ink_4())).child("SIDEBAR"))
.child(
div()
.font_family(SERIF_FAMILY)
.text_size(px(22.0))
.font_weight(FontWeight(400.0))
.text_color(rgb(colors::INK))
.text_color(rgb(colors::ink()))
.child("Layout"),
)
.child(
@@ -120,8 +120,8 @@ fn render_layout_card(
.p(px(14.0))
.rounded(px(14.0))
.bg(rgba(LAYOUT_CARD_BG))
.when(selected, |el| el.border_2().border_color(rgb(colors::ACCENT)))
.when(!selected, |el| el.border_1().border_color(rgba(colors::STROKE)))
.when(selected, |el| el.border_2().border_color(rgb(colors::accent())))
.when(!selected, |el| el.border_1().border_color(rgba(colors::stroke())))
.flex()
.flex_col()
.gap(px(10.0))
@@ -141,10 +141,10 @@ fn render_layout_card(
div()
.text_size(px(12.5))
.font_weight(FontWeight(500.0))
.text_color(rgb(colors::INK))
.text_color(rgb(colors::ink()))
.child(title),
)
.child(div().text_size(px(11.0)).text_color(rgb(colors::INK_4)).child(detail)),
.child(div().text_size(px(11.0)).text_color(rgb(colors::ink_4())).child(detail)),
)
.into_any_element()
}
@@ -126,7 +126,7 @@ pub(crate) fn brand_accent_color(brand: Brand) -> u32 {
/// unknown sites still render the design's colored dot instead of looking
/// stranded.
pub(crate) fn accent_color_for_host(host: Option<&str>) -> u32 {
host.and_then(Brand::from_host).map(brand_accent_color).unwrap_or(colors::ACCENT)
host.and_then(Brand::from_host).map(brand_accent_color).unwrap_or(colors::accent())
}
fn render_notion(size: f32) -> AnyElement {
@@ -253,7 +253,7 @@ fn render_fallback(initial: &str, size: f32) -> AnyElement {
.justify_center()
.text_size(px(size * 0.5))
.font_weight(FontWeight(600.0))
.text_color(rgb(colors::INK))
.text_color(rgb(colors::ink()))
.child(glyph)
.into_any_element()
}
@@ -10,9 +10,9 @@ pub(crate) fn render_command_footer() -> AnyElement {
.px(px(16.0))
.py(px(10.0))
.border_t_1()
.border_color(rgba(colors::DIVIDER))
.border_color(rgba(colors::divider()))
.text_size(px(10.5))
.text_color(rgb(colors::INK_3))
.text_color(rgb(colors::ink_3()))
.bg(rgba(FOOTER_BG))
// Only the shortcuts that actually do something today.
// `⌘↵` (split-on-open) and `⇥` (filter) are real product
@@ -26,7 +26,7 @@ pub(crate) fn render_command_footer() -> AnyElement {
.flex()
.items_center()
.gap(px(6.0))
.child(div().text_color(rgb(colors::ACCENT)).child(IconName::Asterisk))
.child(div().text_color(rgb(colors::accent())).child(IconName::Asterisk))
.child("Powered by ELY"),
)
.into_any_element()
@@ -43,7 +43,7 @@ pub(crate) fn render_kbd(label: &'static str) -> AnyElement {
.rounded(px(4.0))
.bg(rgba(KBD_BG))
.text_size(px(10.0))
.text_color(rgb(colors::INK_3))
.text_color(rgb(colors::ink_3()))
.child(label)
.into_any_element()
}
@@ -81,7 +81,7 @@ fn render_panel(
}
fn render_header(query_label: String, is_empty: bool) -> AnyElement {
let label_color = if is_empty { colors::INK_4 } else { colors::INK };
let label_color = if is_empty { colors::ink_4() } else { colors::ink() };
div()
.flex()
@@ -90,8 +90,8 @@ fn render_header(query_label: String, is_empty: bool) -> AnyElement {
.px(px(18.0))
.py(px(16.0))
.border_b_1()
.border_color(rgba(colors::DIVIDER))
.child(div().text_color(rgb(colors::INK_3)).child(IconName::Search))
.border_color(rgba(colors::divider()))
.child(div().text_color(rgb(colors::ink_3())).child(IconName::Search))
.child(
div()
.flex_1()
@@ -103,7 +103,7 @@ fn render_header(query_label: String, is_empty: bool) -> AnyElement {
.child(query_label)
.child(blink(
"command-overlay-caret",
div().w(px(1.0)).h(px(18.0)).bg(rgb(colors::ACCENT)),
div().w(px(1.0)).h(px(18.0)).bg(rgb(colors::accent())),
)),
)
.child(
@@ -113,7 +113,7 @@ fn render_header(query_label: String, is_empty: bool) -> AnyElement {
.rounded(px(6.0))
.bg(rgba(BADGE_BG))
.text_size(px(10.5))
.text_color(rgb(colors::INK_3))
.text_color(rgb(colors::ink_3()))
.child("Switcher"),
)
.child(render_kbd("esc"))
@@ -182,7 +182,7 @@ fn render_section(label: &'static str, body: AnyElement) -> AnyElement {
.pt(px(6.0))
.text_size(px(10.0))
.font_weight(FontWeight(500.0))
.text_color(rgb(colors::INK_4))
.text_color(rgb(colors::ink_4()))
.child(label),
)
.child(body)
@@ -194,7 +194,7 @@ fn render_empty_state() -> AnyElement {
.px(px(18.0))
.py(px(20.0))
.text_size(px(12.5))
.text_color(rgb(colors::INK_4))
.text_color(rgb(colors::ink_4()))
.child("No matches yet — keep typing.")
.into_any_element()
}
@@ -179,7 +179,7 @@ where
.flex()
.items_center()
.justify_center()
.text_color(rgb(colors::INK_2))
.text_color(rgb(colors::ink_2()))
.child(icon)
.into_any_element();
render_row_inner(content, leading, cx, handler)
@@ -233,7 +233,7 @@ where
.bottom(px(6.0))
.w(px(2.0))
.rounded(px(2.0))
.bg(rgb(colors::ACCENT)),
.bg(rgb(colors::accent())),
)
})
.child(leading)
@@ -248,16 +248,20 @@ where
div()
.text_size(px(13.0))
.font_weight(FontWeight(500.0))
.text_color(rgb(colors::INK))
.text_color(rgb(colors::ink()))
.truncate()
.child(title),
)
.children(hint.map(|hint| {
div().text_size(px(11.0)).text_color(rgb(colors::INK_4)).truncate().child(hint)
div()
.text_size(px(11.0))
.text_color(rgb(colors::ink_4()))
.truncate()
.child(hint)
})),
)
.children(keys.map(|key_label| {
div().text_size(px(10.5)).text_color(rgb(colors::INK_3)).child(key_label)
div().text_size(px(10.5)).text_color(rgb(colors::ink_3())).child(key_label)
}))
.into_any_element()
}
@@ -70,7 +70,7 @@ fn render_favorite_tile(index: usize, tab: &BrowserTab, cx: &mut Context<ElyShel
.child(
div()
.text_size(px(11.5))
.text_color(rgb(colors::INK_3))
.text_color(rgb(colors::ink_3()))
.max_w(px(80.0))
.truncate()
.child(title),
@@ -87,7 +87,7 @@ fn render_add_favorite_tile(cx: &mut Context<ElyShell>) -> AnyElement {
.flex()
.items_center()
.justify_center()
.text_color(rgb(colors::INK_4))
.text_color(rgb(colors::ink_4()))
.cursor_pointer()
.hover(|style| style.bg(rgba(CARD_BG)))
.on_click(cx.listener(|shell, _, window, cx| {
+8 -8
View File
@@ -38,7 +38,7 @@ fn render_greeting_row(text: String, phase: DayPhase) -> AnyElement {
.items_center()
.gap(px(8.0))
.text_size(px(13.0))
.text_color(rgb(colors::INK_3))
.text_color(rgb(colors::ink_3()))
.child(div().text_color(rgb(color)).child(icon))
.child(text)
.into_any_element()
@@ -61,7 +61,7 @@ fn render_serif_headline() -> AnyElement {
.font_family(SERIF_FAMILY)
.text_size(px(64.0))
.font_weight(FontWeight(400.0))
.text_color(rgb(colors::INK))
.text_color(rgb(colors::ink()))
.child("Where focus finds flow.")
.into_any_element()
}
@@ -74,9 +74,9 @@ fn render_search_bar(shell: &ElyShell, cx: &mut Context<ElyShell>) -> AnyElement
// so this is a read-only echo, not a parallel input.
let omnibar_value = shell.command_input.read(cx).value().to_string();
let (display_text, display_color) = if omnibar_value.is_empty() {
("Search the web or ELY".to_string(), colors::INK_4)
("Search the web or ELY".to_string(), colors::ink_4())
} else {
(omnibar_value, colors::INK)
(omnibar_value, colors::ink())
};
div()
@@ -96,7 +96,7 @@ fn render_search_bar(shell: &ElyShell, cx: &mut Context<ElyShell>) -> AnyElement
.on_click(cx.listener(|shell, _, window, cx| {
shell.focus_address_bar(window, cx);
}))
.child(div().text_color(rgb(colors::INK_3)).child(IconName::Search))
.child(div().text_color(rgb(colors::ink_3())).child(IconName::Search))
.child(
div()
.flex_1()
@@ -114,7 +114,7 @@ fn render_search_bar(shell: &ElyShell, cx: &mut Context<ElyShell>) -> AnyElement
.flex()
.items_center()
.justify_center()
.text_color(rgb(colors::INK_3))
.text_color(rgb(colors::ink_3()))
.child(IconName::ArrowRight),
)
.into_any_element()
@@ -161,7 +161,7 @@ where
F: Fn(&mut ElyShell, &mut gpui::Window, &mut Context<ElyShell>) + 'static,
{
let leading =
div().text_color(rgb(colors::INK_3)).text_size(px(12.0)).child(icon).into_any_element();
div().text_color(rgb(colors::ink_3())).text_size(px(12.0)).child(icon).into_any_element();
render_pill(id, leading, label, cx, handler)
}
@@ -194,7 +194,7 @@ where
div()
.text_size(px(12.0))
.font_weight(FontWeight(500.0))
.text_color(rgb(colors::INK_2))
.text_color(rgb(colors::ink_2()))
.child(label),
)
.into_any_element()
+13 -13
View File
@@ -71,7 +71,7 @@ fn render_continue_history(
div()
.text_size(px(13.0))
.font_weight(FontWeight(500.0))
.text_color(rgb(colors::INK))
.text_color(rgb(colors::ink()))
.child("Continue where you left off"),
)
.child(if entries.is_empty() {
@@ -95,7 +95,7 @@ fn render_continue_history(
fn render_empty_history_state() -> AnyElement {
div()
.text_size(px(12.0))
.text_color(rgb(colors::INK_4))
.text_color(rgb(colors::ink_4()))
.child("Your recently visited pages will appear here.")
.into_any_element()
}
@@ -136,14 +136,14 @@ fn render_history_row(
div()
.text_size(px(13.0))
.font_weight(FontWeight(500.0))
.text_color(rgb(colors::INK))
.text_color(rgb(colors::ink()))
.truncate()
.child(title),
)
.child(
div()
.text_size(px(11.5))
.text_color(rgb(colors::INK_4))
.text_color(rgb(colors::ink_4()))
.truncate()
.child(format!("{host_label} · {when}")),
),
@@ -254,7 +254,7 @@ fn render_activity_card(
div()
.text_size(px(13.0))
.font_weight(FontWeight(500.0))
.text_color(rgb(colors::INK))
.text_color(rgb(colors::ink()))
.child("Recent activity"),
)
.child(if entries.is_empty() {
@@ -279,7 +279,7 @@ fn render_activity_card(
fn render_empty_activity_state() -> AnyElement {
div()
.text_size(px(12.0))
.text_color(rgb(colors::INK_4))
.text_color(rgb(colors::ink_4()))
.child("Activity from your tabs will land here.")
.into_any_element()
}
@@ -316,25 +316,25 @@ fn render_activity_row(
.flex_col()
.gap_1()
.child(
div().text_size(px(11.5)).text_color(rgb(colors::INK_3)).child("You visited"),
div().text_size(px(11.5)).text_color(rgb(colors::ink_3())).child("You visited"),
)
.child(
div()
.text_size(px(13.0))
.font_weight(FontWeight(500.0))
.text_color(rgb(colors::INK))
.text_color(rgb(colors::ink()))
.truncate()
.child(title),
)
.child(
div()
.text_size(px(10.5))
.text_color(rgb(colors::INK_4))
.text_color(rgb(colors::ink_4()))
.truncate()
.child(display_url),
),
)
.child(div().text_size(px(10.5)).text_color(rgb(colors::INK_4)).child(when))
.child(div().text_size(px(10.5)).text_color(rgb(colors::ink_4())).child(when))
.into_any_element()
}
@@ -343,14 +343,14 @@ fn render_view_all_link(cx: &mut Context<ElyShell>) -> AnyElement {
.id(SharedString::from("activity-view-all"))
.pt(px(10.0))
.border_t_1()
.border_color(rgba(colors::DIVIDER))
.border_color(rgba(colors::divider()))
.flex()
.items_center()
.gap(px(4.0))
.text_size(px(11.5))
.text_color(rgb(colors::INK_3))
.text_color(rgb(colors::ink_3()))
.cursor_pointer()
.hover(|style| style.text_color(rgb(colors::INK)))
.hover(|style| style.text_color(rgb(colors::ink())))
.on_click(cx.listener(|shell, _, window, cx| {
shell.open_internal_tab("ely://history", window, cx);
}))
@@ -7,10 +7,10 @@ pub(crate) fn render_section_chevron_label(label: &'static str) -> AnyElement {
.flex()
.items_center()
.gap(px(6.0))
.text_color(rgb(colors::INK_3))
.text_color(rgb(colors::ink_3()))
.text_size(px(12.5))
.font_weight(FontWeight(500.0))
.child(label)
.child(div().text_color(rgb(colors::INK_4)).child(IconName::ChevronDown))
.child(div().text_color(rgb(colors::ink_4())).child(IconName::ChevronDown))
.into_any_element()
}
@@ -113,7 +113,7 @@ where
.flex_1()
.h(px(40.0))
.rounded(px(10.0))
.bg(rgb(colors::INK))
.bg(rgb(colors::ink()))
.flex()
.items_center()
.justify_center()
@@ -142,9 +142,9 @@ where
.flex()
.items_center()
.justify_center()
.text_color(rgb(colors::INK_3))
.text_color(rgb(colors::ink_3()))
.cursor_pointer()
.hover(|style| style.bg(rgba(SECONDARY_BG_HOVER)).text_color(rgb(colors::INK)))
.hover(|style| style.bg(rgba(SECONDARY_BG_HOVER)).text_color(rgb(colors::ink())))
.active(|style| style.opacity(0.82))
.on_click(cx.listener(move |shell, _, window, cx| handler(shell, window, cx)))
.child(icon)
@@ -157,11 +157,11 @@ fn render_permissions_block(manifest: &PluginManifest) -> AnyElement {
.flex_col()
.gap(px(8.0))
.pt(px(4.0))
.child(div().text_size(px(11.0)).text_color(rgb(colors::INK_3)).child("PERMISSIONS"))
.child(div().text_size(px(11.0)).text_color(rgb(colors::ink_3())).child("PERMISSIONS"))
.child(if manifest.permissions().is_empty() {
div()
.text_size(px(12.0))
.text_color(rgb(colors::INK_4))
.text_color(rgb(colors::ink_4()))
.child("This plugin declares no permissions.")
.into_any_element()
} else {
@@ -198,7 +198,10 @@ fn render_permission_row(permission: &PluginPermission) -> AnyElement {
.child(if high_risk { "!" } else { "" }),
)
.child(
div().flex_1().text_color(rgb(colors::INK_2)).child(permission_scope_label(permission)),
div()
.flex_1()
.text_color(rgb(colors::ink_2()))
.child(permission_scope_label(permission)),
)
.into_any_element()
}
@@ -214,7 +217,7 @@ fn render_right_column(plugin: &InstalledPlugin) -> AnyElement {
.child(
div()
.text_size(px(13.5))
.text_color(rgb(colors::INK_2))
.text_color(rgb(colors::ink_2()))
.child(manifest.description().to_string()),
)
.child(render_stats_grid(plugin))
@@ -239,7 +242,7 @@ fn render_right_header(plugin: &InstalledPlugin) -> AnyElement {
.child(
div()
.text_size(px(11.0))
.text_color(rgb(colors::INK_4))
.text_color(rgb(colors::ink_4()))
.child(category_label(plugin)),
)
.child(
@@ -247,10 +250,10 @@ fn render_right_header(plugin: &InstalledPlugin) -> AnyElement {
.font_family(SERIF_FAMILY)
.text_size(px(32.0))
.font_weight(FontWeight(400.0))
.text_color(rgb(colors::INK))
.text_color(rgb(colors::ink()))
.child(manifest.name().to_string()),
)
.child(div().text_size(px(12.5)).text_color(rgb(colors::INK_3)).child(format!(
.child(div().text_size(px(12.5)).text_color(rgb(colors::ink_3())).child(format!(
"by {} · min ELY {}",
manifest.author(),
manifest.min_ely_build()
@@ -264,7 +267,7 @@ fn render_status_chip(plugin: &InstalledPlugin) -> AnyElement {
let enabled = plugin.enabled();
let label = if enabled { "Enabled" } else { "Disabled" };
let bg = if enabled { 0xe8f3ee } else { 0x281e140d };
let color = if enabled { 0x2f7d68 } else { colors::INK_3 };
let color = if enabled { 0x2f7d68 } else { colors::ink_3() };
div()
.px(px(10.0))
@@ -305,12 +308,12 @@ fn stat_card(label: &'static str, value: String) -> AnyElement {
.flex()
.flex_col()
.gap(px(2.0))
.child(div().text_size(px(10.5)).text_color(rgb(colors::INK_4)).child(label))
.child(div().text_size(px(10.5)).text_color(rgb(colors::ink_4())).child(label))
.child(
div()
.text_size(px(13.0))
.font_weight(FontWeight(500.0))
.text_color(rgb(colors::INK))
.text_color(rgb(colors::ink()))
.child(value),
)
.into_any_element()
@@ -327,13 +330,13 @@ fn render_contributions(manifest: &PluginManifest) -> AnyElement {
div()
.text_size(px(13.0))
.font_weight(FontWeight(600.0))
.text_color(rgb(colors::INK))
.text_color(rgb(colors::ink()))
.child("What it adds to ELY"),
)
.child(if contributions.is_empty() {
div()
.text_size(px(12.0))
.text_color(rgb(colors::INK_4))
.text_color(rgb(colors::ink_4()))
.child("This plugin does not register any contributions.")
.into_any_element()
} else {
@@ -365,7 +368,7 @@ fn render_contribution_row(contribution: &PluginContributionPoint) -> AnyElement
.items_center()
.justify_center()
.mt(px(1.0))
.text_color(rgb(colors::ACCENT))
.text_color(rgb(colors::accent()))
.text_size(px(11.0))
.child(IconName::Check),
)
@@ -380,13 +383,13 @@ fn render_contribution_row(contribution: &PluginContributionPoint) -> AnyElement
div()
.text_size(px(12.5))
.font_weight(FontWeight(500.0))
.text_color(rgb(colors::INK))
.text_color(rgb(colors::ink()))
.child(contribution_title(contribution)),
)
.child(
div()
.text_size(px(11.5))
.text_color(rgb(colors::INK_3))
.text_color(rgb(colors::ink_3()))
.child(contribution_detail(contribution)),
),
)
@@ -124,7 +124,7 @@ fn render_nav_column(
.h_full()
.flex_shrink_0()
.border_r_1()
.border_color(rgba(colors::DIVIDER))
.border_color(rgba(colors::divider()))
.px(px(10.0))
.pt(px(16.0))
.pb(px(12.0))
@@ -153,13 +153,13 @@ fn render_nav_brand(snapshot: &BrowserSnapshot) -> AnyElement {
div()
.text_size(px(18.0))
.font_weight(FontWeight(500.0))
.text_color(rgb(colors::INK))
.text_color(rgb(colors::ink()))
.child("Settings"),
)
.child(
div()
.text_size(px(11.5))
.text_color(rgb(colors::INK_4))
.text_color(rgb(colors::ink_4()))
.child(format!("ELY 0.42 · Profile: {}", snapshot.active_profile_name)),
)
.into_any_element()
@@ -189,7 +189,7 @@ fn render_nav_label(label: &'static str) -> AnyElement {
.px(px(12.0))
.text_size(px(10.0))
.font_weight(FontWeight(500.0))
.text_color(rgb(colors::INK_4))
.text_color(rgb(colors::ink_4()))
.child(label)
.into_any_element()
}
@@ -203,7 +203,7 @@ fn render_nav_item(
) -> AnyElement {
let active = item.route == active_route;
let bg = if active { ACTIVE_BG } else { 0x00000000 };
let text_color = if active { colors::INK } else { colors::INK_2 };
let text_color = if active { colors::ink() } else { colors::ink_2() };
let route = item.route;
let icon = item.icon.clone();
@@ -224,7 +224,7 @@ fn render_nav_item(
.on_click(cx.listener(move |shell, _, window, cx| {
shell.open_internal_tab(route, window, cx);
}))
.child(div().text_color(rgb(colors::INK_3)).child(icon))
.child(div().text_color(rgb(colors::ink_3())).child(icon))
.child(div().flex_1().truncate().child(item.label))
.into_any_element()
}
+15 -15
View File
@@ -94,7 +94,7 @@ impl ElyShell {
.gap(px(2.0))
.flex_shrink_0()
.border_t_1()
.border_color(rgba(colors::DIVIDER))
.border_color(rgba(colors::divider()))
.child(self.render_settings_row(cx))
.child(self.render_profile_row(snapshot, cx))
.into_any_element()
@@ -114,14 +114,14 @@ impl ElyShell {
.flex()
.items_center()
.text_size(px(13.0))
.text_color(rgb(colors::INK_2))
.text_color(rgb(colors::ink_2()))
.cursor_pointer()
.hover(|style| style.bg(rgba(HOVER_NAV_BG)).text_color(rgb(colors::INK)))
.hover(|style| style.bg(rgba(HOVER_NAV_BG)).text_color(rgb(colors::ink())))
.active(|style| style.opacity(0.82))
.on_click(cx.listener(|shell, _, window, cx| {
shell.open_internal_tab("ely://settings", window, cx);
}))
.child(div().text_color(rgb(colors::INK_3)).child(IconName::Settings))
.child(div().text_color(rgb(colors::ink_3())).child(IconName::Settings))
.child("Settings")
.into_any_element()
}
@@ -174,7 +174,7 @@ impl ElyShell {
.truncate()
.text_size(px(13.0))
.font_weight(FontWeight(500.0))
.text_color(rgb(colors::INK_2))
.text_color(rgb(colors::ink_2()))
.child(profile_name),
)
.child(
@@ -182,7 +182,7 @@ impl ElyShell {
// it's not a popover. Use a right-chevron so the icon
// promises "this opens a page" instead of the down
// chevron that promises "this opens a menu inline".
div().text_color(rgb(colors::INK_4)).child(IconName::ChevronRight),
div().text_color(rgb(colors::ink_4())).child(IconName::ChevronRight),
)
.into_any_element()
}
@@ -212,7 +212,7 @@ impl ElyShell {
.on_click(cx.listener(|shell, _, window, cx| {
shell.open_internal_tab("ely://new-tab", window, cx);
}))
.child(div().text_color(rgb(colors::INK_3)).child(IconName::Frame))
.child(div().text_color(rgb(colors::ink_3())).child(IconName::Frame))
.child(
div()
.flex_1()
@@ -290,15 +290,15 @@ impl ElyShell {
.gap(px(10.0))
.flex()
.items_center()
.text_color(rgb(colors::INK_3))
.text_color(rgb(colors::ink_3()))
.text_size(px(13.0))
.cursor_pointer()
.hover(|style| style.bg(rgba(HOVER_NAV_BG)).text_color(rgb(colors::INK)))
.hover(|style| style.bg(rgba(HOVER_NAV_BG)).text_color(rgb(colors::ink())))
.active(|style| style.opacity(0.82))
.on_click(cx.listener(|shell, _, window, cx| {
shell.open_new_tab(window, cx);
}))
.child(div().text_color(rgb(colors::INK_4)).child(IconName::Plus))
.child(div().text_color(rgb(colors::ink_4())).child(IconName::Plus))
.child("New Tab")
.into_any_element()
}
@@ -353,7 +353,7 @@ impl ElyShell {
.child(
div()
.text_size(px(11.0))
.text_color(rgb(colors::INK_4))
.text_color(rgb(colors::ink_4()))
.truncate()
.child(tab.display_url()),
),
@@ -377,9 +377,9 @@ impl ElyShell {
/// place rather than three transparent-sentinel triples.
fn nav_row_palette(active: bool) -> NavRowPalette {
if active {
NavRowPalette { bg: ACTIVE_NAV_BG, hover_bg: ACTIVE_NAV_BG_HOVER, text: colors::INK }
NavRowPalette { bg: ACTIVE_NAV_BG, hover_bg: ACTIVE_NAV_BG_HOVER, text: colors::ink() }
} else {
NavRowPalette { bg: 0x00000000, hover_bg: HOVER_NAV_BG, text: colors::INK_2 }
NavRowPalette { bg: 0x00000000, hover_bg: HOVER_NAV_BG, text: colors::ink_2() }
}
}
@@ -414,10 +414,10 @@ where
.flex()
.items_center()
.justify_center()
.text_color(rgb(colors::INK_4))
.text_color(rgb(colors::ink_4()))
.opacity(0.0)
.group_hover(group_name, |style| style.opacity(1.0))
.hover(|style| style.bg(rgba(CLOSE_HOVER_BG)).text_color(rgb(colors::INK)))
.hover(|style| style.bg(rgba(CLOSE_HOVER_BG)).text_color(rgb(colors::ink())))
.cursor_pointer()
.on_click(on_click)
.child(IconName::Close)
@@ -65,7 +65,7 @@ pub(crate) fn render_unread_badge(count: u32) -> impl IntoElement {
.bg(rgba(UNREAD_BADGE_BG))
.text_size(px(10.0))
.font_weight(FontWeight(500.0))
.text_color(rgb(colors::INK_3))
.text_color(rgb(colors::ink_3()))
.child(label)
}
@@ -77,12 +77,12 @@ pub(crate) fn section_tabs_label(count: usize) -> impl IntoElement {
.flex()
.items_center()
.gap(px(6.0))
.child(div().text_color(rgb(colors::INK_4)).child(IconName::Frame))
.child(div().text_color(rgb(colors::ink_4())).child(IconName::Frame))
.child(
div()
.text_size(px(10.5))
.font_weight(FontWeight(500.0))
.text_color(rgb(colors::INK_4))
.text_color(rgb(colors::ink_4()))
.child(format!("TABS · {count}")),
)
}
@@ -94,7 +94,7 @@ pub(crate) fn section_label(label: &'static str) -> impl IntoElement {
.px(px(10.0))
.text_size(px(10.5))
.font_weight(FontWeight(500.0))
.text_color(rgb(colors::INK_4))
.text_color(rgb(colors::ink_4()))
.child(label)
}
@@ -138,16 +138,20 @@ pub(crate) fn panel_bg(snapshot: &BrowserSnapshot) -> u32 {
let max_alpha: u32 = 0xff;
let min_alpha: u32 = 0xb3;
let alpha = max_alpha - (pct * (max_alpha - min_alpha)) / 100;
let rgb = wallpaper_panel_rgb(snapshot.appearance.wallpaper());
let rgb = wallpaper_panel_rgb(snapshot.appearance.wallpaper(), colors::mode());
(rgb << 8) | alpha
}
fn wallpaper_panel_rgb(theme: ely_domain::WallpaperTheme) -> u32 {
match theme {
ely_domain::WallpaperTheme::Dawn => 0xfaf6f0,
ely_domain::WallpaperTheme::Violet => 0xf6f3f8,
ely_domain::WallpaperTheme::Mint => 0xf3f6f1,
ely_domain::WallpaperTheme::Slate => 0xeff1f4,
fn wallpaper_panel_rgb(theme: ely_domain::WallpaperTheme, mode: colors::Mode) -> u32 {
match (theme, mode) {
(ely_domain::WallpaperTheme::Dawn, colors::Mode::Light) => 0xfaf6f0,
(ely_domain::WallpaperTheme::Violet, colors::Mode::Light) => 0xf6f3f8,
(ely_domain::WallpaperTheme::Mint, colors::Mode::Light) => 0xf3f6f1,
(ely_domain::WallpaperTheme::Slate, colors::Mode::Light) => 0xeff1f4,
(ely_domain::WallpaperTheme::Dawn, colors::Mode::Dark) => 0x24211f,
(ely_domain::WallpaperTheme::Violet, colors::Mode::Dark) => 0x232029,
(ely_domain::WallpaperTheme::Mint, colors::Mode::Dark) => 0x1f2421,
(ely_domain::WallpaperTheme::Slate, colors::Mode::Dark) => 0x22262e,
}
}
@@ -70,10 +70,10 @@ fn render_title_row() -> AnyElement {
div()
.text_size(px(12.5))
.font_weight(gpui::FontWeight(500.0))
.text_color(rgb(colors::INK_2))
.text_color(rgb(colors::ink_2()))
.child("ELY Browser"),
)
.child(div().text_color(rgb(colors::INK_3)).opacity(0.6).child(IconName::ChevronDown))
.child(div().text_color(rgb(colors::ink_3())).opacity(0.6).child(IconName::ChevronDown))
.into_any_element()
}
@@ -117,7 +117,7 @@ fn render_workspaces_tile(cx: &mut Context<ElyShell>) -> AnyElement {
.flex()
.items_center()
.justify_center()
.text_color(rgb(colors::ACCENT))
.text_color(rgb(colors::accent()))
.cursor_pointer()
.hover(|style| style.opacity(0.92))
.active(|style| style.opacity(0.82))
@@ -164,10 +164,10 @@ fn render_picker_pill(
.truncate()
.text_size(px(13.0))
.font_weight(gpui::FontWeight(500.0))
.text_color(rgb(colors::INK))
.text_color(rgb(colors::ink()))
.child(space_name),
)
.child(div().text_color(rgb(colors::INK_3)).child(chevron))
.child(div().text_color(rgb(colors::ink_3())).child(chevron))
.into_any_element()
}
@@ -305,10 +305,10 @@ fn render_disclosure_row(
.truncate()
.text_size(px(13.0))
.font_weight(gpui::FontWeight(500.0))
.text_color(rgb(colors::INK))
.text_color(rgb(colors::ink()))
.child(space.name().to_string()),
)
.when(active, |el| el.child(div().text_color(rgb(colors::ACCENT)).child(IconName::Check)))
.when(active, |el| el.child(div().text_color(rgb(colors::accent())).child(IconName::Check)))
.into_any_element()
}
@@ -323,17 +323,17 @@ fn render_disclosure_footer(cx: &mut Context<ElyShell>) -> AnyElement {
.mt(px(2.0))
.rounded(px(8.0))
.border_t_1()
.border_color(rgba(colors::DIVIDER))
.border_color(rgba(colors::divider()))
.text_size(px(12.0))
.text_color(rgb(colors::INK_3))
.text_color(rgb(colors::ink_3()))
.cursor_pointer()
.hover(|style| style.bg(rgba(DISCLOSURE_ROW_HOVER_BG)).text_color(rgb(colors::INK)))
.hover(|style| style.bg(rgba(DISCLOSURE_ROW_HOVER_BG)).text_color(rgb(colors::ink())))
.active(|style| style.opacity(0.85))
.on_click(cx.listener(|shell, _, window, cx| {
shell.close_workspace_picker(cx);
shell.open_internal_tab("ely://settings/spaces", window, cx);
}))
.child(div().text_color(rgb(colors::INK_4)).child(IconName::Settings))
.child(div().text_color(rgb(colors::ink_4())).child(IconName::Settings))
.child("Manage spaces")
.into_any_element()
}
@@ -366,9 +366,9 @@ fn render_add_workspace_button(cx: &mut Context<ElyShell>) -> AnyElement {
.flex()
.items_center()
.justify_center()
.text_color(rgb(colors::INK_3))
.text_color(rgb(colors::ink_3()))
.cursor_pointer()
.hover(|style| style.bg(rgba(PICKER_BG)).text_color(rgb(colors::INK)))
.hover(|style| style.bg(rgba(PICKER_BG)).text_color(rgb(colors::ink())))
.active(|style| style.opacity(0.82))
.on_click(cx.listener(|shell, _, window, cx| {
shell.open_internal_tab("ely://settings/spaces", window, cx);
+10 -10
View File
@@ -32,15 +32,15 @@ pub(crate) fn render_split_pane_header(
.items_center()
.flex_shrink_0()
.border_b_1()
.border_color(rgb(colors::HAIRLINE))
.border_color(rgb(colors::hairline()))
.bg(rgb(0xf6f4ef))
.child(div().size(px(8.0)).rounded_full().bg(rgb(accent)))
.child(div().text_color(rgb(colors::INK_3)).text_size(px(11.0)).child(lock_or_globe))
.child(div().text_color(rgb(colors::ink_3())).text_size(px(11.0)).child(lock_or_globe))
.child(
div()
.text_size(px(11.0))
.font_weight(FontWeight(500.0))
.text_color(rgb(colors::INK))
.text_color(rgb(colors::ink()))
.child(host),
)
.child(
@@ -49,7 +49,7 @@ pub(crate) fn render_split_pane_header(
.min_w_0()
.truncate()
.text_size(px(11.0))
.text_color(rgb(colors::INK_4))
.text_color(rgb(colors::ink_4()))
.child(title),
)
.child(render_reload_glyph(close_tab_id.clone(), cx))
@@ -65,7 +65,7 @@ pub(crate) fn render_split_pane_header(
/// reload action when one lands.
fn render_reload_glyph(_tab_id: TabId, _cx: &mut Context<ElyShell>) -> AnyElement {
div()
.text_color(rgb(colors::INK_5))
.text_color(rgb(colors::ink_5()))
.text_size(px(11.0))
.child(IconName::Redo2)
.into_any_element()
@@ -75,10 +75,10 @@ fn render_close_glyph(close_tab_id: TabId, cx: &mut Context<ElyShell>) -> AnyEle
let id = format!("split-pane-close-{}", close_tab_id.as_str());
div()
.id(SharedString::from(id))
.text_color(rgb(colors::INK_4))
.text_color(rgb(colors::ink_4()))
.text_size(px(11.0))
.cursor_pointer()
.hover(|style| style.text_color(rgb(colors::INK)))
.hover(|style| style.text_color(rgb(colors::ink())))
.on_click(cx.listener(move |shell, _, window, cx| {
// The split pane itself has an on_click that selects the
// tab. Stop propagation here so closing the pane doesn't
@@ -114,13 +114,13 @@ pub(crate) fn render_compact_split_canvas(tab: &BrowserTab) -> AnyElement {
.size_full()
.min_h_0()
.rounded(px(10.0))
.bg(rgba(colors::GLASS_2))
.bg(rgba(colors::glass_2()))
.px(px(10.0))
.py(px(8.0))
.gap(px(8.0))
.flex()
.items_center()
.child(div().text_color(rgb(colors::INK_4)).child(IconName::Globe))
.child(div().text_color(rgb(colors::ink_4())).child(IconName::Globe))
.child(
div()
.min_w_0()
@@ -137,7 +137,7 @@ pub(crate) fn render_compact_split_canvas(tab: &BrowserTab) -> AnyElement {
div()
.truncate()
.text_size(px(11.0))
.text_color(rgb(colors::INK_4))
.text_color(rgb(colors::ink_4()))
.child(split_canvas_status(tab)),
),
),
+10 -10
View File
@@ -27,7 +27,7 @@ pub(crate) fn render_topbar(
.items_center()
.flex_shrink_0()
.border_b_1()
.border_color(rgba(colors::DIVIDER))
.border_color(rgba(colors::divider()))
.when(sidebar_collapsed, |el| el.child(render_command_bar_identity(snapshot, 56.0, true)))
.child(render_nav_arrow(
"nav-back",
@@ -138,14 +138,14 @@ fn render_styled_url(active_tab: &BrowserTab) -> AnyElement {
.items_center()
.gap(px(2.0))
.text_size(px(13.0))
.child(div().font_weight(FontWeight(500.0)).text_color(rgb(colors::INK)).child(host))
.child(div().min_w_0().truncate().text_color(rgb(colors::INK_3)).child(path))
.child(div().font_weight(FontWeight(500.0)).text_color(rgb(colors::ink())).child(host))
.child(div().min_w_0().truncate().text_color(rgb(colors::ink_3())).child(path))
.into_any_element()
}
fn render_lock_or_search(secure: bool, show_styled: bool) -> AnyElement {
let icon = if show_styled && !secure { IconName::Globe } else { IconName::Search };
div().text_color(rgb(colors::INK_3)).child(icon).into_any_element()
div().text_color(rgb(colors::ink_3())).child(icon).into_any_element()
}
fn render_omnibar_chip<F>(
@@ -158,7 +158,7 @@ fn render_omnibar_chip<F>(
where
F: Fn(&mut ElyShell, &mut gpui::Window, &mut Context<ElyShell>) + 'static,
{
let color = if active { colors::ACCENT } else { colors::INK_4 };
let color = if active { colors::accent() } else { colors::ink_4() };
div()
.id(SharedString::from(id))
.size(px(22.0))
@@ -168,7 +168,7 @@ where
.justify_center()
.text_color(rgb(color))
.cursor_pointer()
.hover(|style| style.bg(rgba(CHIP_HOVER_BG)).text_color(rgb(colors::INK)))
.hover(|style| style.bg(rgba(CHIP_HOVER_BG)).text_color(rgb(colors::ink())))
.active(|style| style.opacity(0.7))
.on_click(cx.listener(move |shell, _, window, cx| handler(shell, window, cx)))
.child(icon)
@@ -185,7 +185,7 @@ fn render_nav_arrow<F>(
where
F: Fn(&mut ElyShell, &mut gpui::Window, &mut Context<ElyShell>) + 'static,
{
let color = if enabled { colors::INK_3 } else { colors::INK_5 };
let color = if enabled { colors::ink_3() } else { colors::ink_5() };
div()
.id(SharedString::from(id))
.size(px(30.0))
@@ -196,7 +196,7 @@ where
.text_color(rgb(color))
.when(enabled, |el| {
el.cursor_pointer()
.hover(|style| style.bg(rgba(OMNIBAR_BG)).text_color(rgb(colors::INK)))
.hover(|style| style.bg(rgba(OMNIBAR_BG)).text_color(rgb(colors::ink())))
.active(|style| style.opacity(0.82))
.on_click(cx.listener(move |shell, _, window, cx| handler(shell, window, cx)))
})
@@ -221,8 +221,8 @@ where
.items_center()
.justify_center()
.cursor_pointer()
.text_color(rgb(colors::INK_3))
.hover(|style| style.bg(rgba(OMNIBAR_BG)).text_color(rgb(colors::INK)))
.text_color(rgb(colors::ink_3()))
.hover(|style| style.bg(rgba(OMNIBAR_BG)).text_color(rgb(colors::ink())))
.active(|style| style.opacity(0.82))
.on_click(cx.listener(move |shell, _, window, cx| handler(shell, window, cx)))
.child(icon)
+28 -7
View File
@@ -1,10 +1,11 @@
use ely_design_system::colors;
use ely_domain::WallpaperTheme;
use gpui::{
Hsla, IntoElement, ParentElement, Styled, div, hsla, linear_color_stop, linear_gradient, rgb,
};
pub(crate) fn render_wallpaper(theme: WallpaperTheme) -> impl IntoElement {
let palette = palette_for(theme);
let palette = palette_for(theme, colors::mode());
div()
.absolute()
@@ -28,28 +29,48 @@ struct WallpaperPalette {
lower: Hsla,
}
fn palette_for(theme: WallpaperTheme) -> WallpaperPalette {
match theme {
WallpaperTheme::Dawn => WallpaperPalette {
fn palette_for(theme: WallpaperTheme, mode: colors::Mode) -> WallpaperPalette {
match (theme, mode) {
(WallpaperTheme::Dawn, colors::Mode::Light) => WallpaperPalette {
base: 0xefe8e1,
upper: hsla(351.0 / 360.0, 1.0, 0.91, 0.85),
lower: hsla(228.0 / 360.0, 1.0, 0.86, 0.65),
},
WallpaperTheme::Violet => WallpaperPalette {
(WallpaperTheme::Dawn, colors::Mode::Dark) => WallpaperPalette {
base: 0x141312,
upper: hsla(351.0 / 360.0, 0.45, 0.18, 0.85),
lower: hsla(228.0 / 360.0, 0.45, 0.16, 0.65),
},
(WallpaperTheme::Violet, colors::Mode::Light) => WallpaperPalette {
base: 0xe9e2ee,
upper: hsla(263.0 / 360.0, 1.0, 0.88, 0.78),
lower: hsla(33.0 / 360.0, 1.0, 0.87, 0.60),
},
WallpaperTheme::Mint => WallpaperPalette {
(WallpaperTheme::Violet, colors::Mode::Dark) => WallpaperPalette {
base: 0x161320,
upper: hsla(263.0 / 360.0, 0.55, 0.20, 0.85),
lower: hsla(33.0 / 360.0, 0.50, 0.18, 0.65),
},
(WallpaperTheme::Mint, colors::Mode::Light) => WallpaperPalette {
base: 0xe6ece2,
upper: hsla(146.0 / 360.0, 0.69, 0.85, 0.82),
lower: hsla(40.0 / 360.0, 1.0, 0.86, 0.65),
},
WallpaperTheme::Slate => WallpaperPalette {
(WallpaperTheme::Mint, colors::Mode::Dark) => WallpaperPalette {
base: 0x121814,
upper: hsla(146.0 / 360.0, 0.45, 0.18, 0.82),
lower: hsla(40.0 / 360.0, 0.45, 0.16, 0.65),
},
(WallpaperTheme::Slate, colors::Mode::Light) => WallpaperPalette {
base: 0xd6dae3,
upper: hsla(218.0 / 360.0, 0.20, 0.85, 0.75),
lower: hsla(20.0 / 360.0, 0.0, 0.10, 0.18),
},
(WallpaperTheme::Slate, colors::Mode::Dark) => WallpaperPalette {
base: 0x141620,
upper: hsla(218.0 / 360.0, 0.30, 0.20, 0.80),
lower: hsla(20.0 / 360.0, 0.0, 0.12, 0.55),
},
}
}
+15 -13
View File
@@ -176,20 +176,20 @@ impl ElyShell {
.child(
div()
.text_size(px(26.0))
.text_color(rgb(colors::INK))
.text_color(rgb(colors::ink()))
.child("Archived Tabs"),
)
.child(
div()
.text_sm()
.text_color(rgb(colors::MUTED))
.text_color(rgb(colors::muted()))
.child("All Spaces"),
),
)
.child(
div()
.text_xs()
.text_color(rgb(colors::MUTED))
.text_color(rgb(colors::muted()))
.child(format!("{} archived", snapshot.archived_tabs.len())),
),
)
@@ -206,10 +206,10 @@ impl ElyShell {
return div()
.flex_1()
.border_t_1()
.border_color(rgb(colors::HAIRLINE))
.border_color(rgb(colors::hairline()))
.pt_5()
.text_sm()
.text_color(rgb(colors::MUTED))
.text_color(rgb(colors::muted()))
.child("Archive is empty.")
.into_any_element();
}
@@ -220,7 +220,7 @@ impl ElyShell {
.flex_col()
.overflow_y_scrollbar()
.border_t_1()
.border_color(rgb(colors::HAIRLINE))
.border_color(rgb(colors::hairline()))
.children(snapshot.archived_tabs.iter().rev().enumerate().map(
|(index, archived_tab)| self.render_archive_row(index, archived_tab, snapshot, cx),
))
@@ -242,13 +242,13 @@ impl ElyShell {
.id(SharedString::from(format!("archive-{index}")))
.py_3()
.border_b_1()
.border_color(rgb(colors::HAIRLINE))
.border_color(rgb(colors::hairline()))
.flex()
.items_center()
.justify_between()
.gap_4()
.cursor_pointer()
.hover(|style| style.bg(rgb(colors::CANVAS_SOFT)))
.hover(|style| style.bg(rgb(colors::canvas_soft())))
.active(|style| style.opacity(0.82))
.on_click(cx.listener(move |shell, _, window, cx| {
shell.restore_archived_tab(&tab_id, window, cx);
@@ -264,12 +264,14 @@ impl ElyShell {
.text_sm()
.font_semibold()
.truncate()
.text_color(rgb(colors::INK))
.text_color(rgb(colors::ink()))
.child(tab.title().to_string()),
)
.child(div().text_xs().truncate().text_color(rgb(colors::MUTED)).child(detail)),
.child(
div().text_xs().truncate().text_color(rgb(colors::muted())).child(detail),
),
)
.child(div().text_color(rgb(colors::MUTED_SOFT)).child(IconName::Undo2))
.child(div().text_color(rgb(colors::muted_soft())).child(IconName::Undo2))
.into_any_element()
}
}
@@ -285,10 +287,10 @@ fn render_default_page(tab: &BrowserTab) -> AnyElement {
.child(
div()
.text_size(px(26.0))
.text_color(rgb(colors::INK))
.text_color(rgb(colors::ink()))
.child(tab.title().to_string()),
)
.child(div().text_sm().text_color(rgb(colors::MUTED)).child(render_tab_status(tab))),
.child(div().text_sm().text_color(rgb(colors::muted())).child(render_tab_status(tab))),
)
}
@@ -46,10 +46,10 @@ fn render_about_header() -> AnyElement {
.child(
div()
.text_size(px(26.0))
.text_color(rgb(colors::INK))
.text_color(rgb(colors::ink()))
.child(format!("About {PRODUCT_NAME}")),
)
.child(div().text_sm().text_color(rgb(colors::MUTED)).child(FORMAL_PRODUCT_NAME)),
.child(div().text_sm().text_color(rgb(colors::muted())).child(FORMAL_PRODUCT_NAME)),
)
.child(
div()
@@ -58,7 +58,7 @@ fn render_about_header() -> AnyElement {
.gap_2()
.text_xs()
.font_semibold()
.text_color(rgb(colors::MUTED))
.text_color(rgb(colors::muted()))
.child(IconName::Info)
.child(format!("Build {BUILD_REVISION}")),
)
@@ -73,7 +73,7 @@ fn render_about_rows(snapshot: &BrowserSnapshot) -> AnyElement {
.flex_col()
.overflow_y_scrollbar()
.border_t_1()
.border_color(rgb(colors::HAIRLINE))
.border_color(rgb(colors::hairline()))
.child(about_row(
IconName::Building2,
"Product",
@@ -135,7 +135,7 @@ fn about_row(
div()
.py_3()
.border_b_1()
.border_color(rgb(colors::HAIRLINE))
.border_color(rgb(colors::hairline()))
.flex()
.items_center()
.justify_between()
@@ -147,7 +147,7 @@ fn about_row(
.flex()
.items_center()
.gap_3()
.child(div().text_color(rgb(colors::MUTED_SOFT)).child(icon))
.child(div().text_color(rgb(colors::muted_soft())).child(icon))
.child(
div()
.min_w_0()
@@ -159,11 +159,15 @@ fn about_row(
.text_sm()
.font_semibold()
.truncate()
.text_color(rgb(colors::INK))
.text_color(rgb(colors::ink()))
.child(label),
)
.child(
div().text_xs().truncate().text_color(rgb(colors::MUTED)).child(detail),
div()
.text_xs()
.truncate()
.text_color(rgb(colors::muted()))
.child(detail),
),
),
)
@@ -173,7 +177,7 @@ fn about_row(
.truncate()
.text_sm()
.font_semibold()
.text_color(rgb(colors::INK))
.text_color(rgb(colors::ink()))
.child(value),
)
.into_any_element()
@@ -34,12 +34,12 @@ fn render_advanced_header(snapshot: &BrowserSnapshot) -> AnyElement {
.flex()
.flex_col()
.gap_2()
.child(div().text_size(px(26.0)).text_color(rgb(colors::INK)).child("Advanced"))
.child(div().text_size(px(26.0)).text_color(rgb(colors::ink())).child("Advanced"))
.child(
div()
.text_sm()
.truncate()
.text_color(rgb(colors::MUTED))
.text_color(rgb(colors::muted()))
.child(format!("Space: {}", snapshot.active_space_name)),
),
)
@@ -50,7 +50,7 @@ fn render_advanced_header(snapshot: &BrowserSnapshot) -> AnyElement {
.gap_2()
.text_xs()
.font_semibold()
.text_color(rgb(colors::MUTED))
.text_color(rgb(colors::muted()))
.child(IconName::Inspector)
.child(format!("{} policies", advanced_policy_count())),
)
@@ -61,8 +61,8 @@ fn render_advanced_summary(snapshot: &BrowserSnapshot) -> AnyElement {
div()
.rounded_md()
.border_1()
.border_color(rgb(colors::HAIRLINE))
.bg(rgb(colors::CANVAS_SOFT))
.border_color(rgb(colors::hairline()))
.bg(rgb(colors::canvas_soft()))
.px_4()
.py_3()
.flex()
@@ -75,7 +75,7 @@ fn render_advanced_summary(snapshot: &BrowserSnapshot) -> AnyElement {
.flex()
.items_center()
.gap_3()
.child(div().text_color(rgb(colors::PRIMARY)).child(IconName::Inspector))
.child(div().text_color(rgb(colors::primary())).child(IconName::Inspector))
.child(
div()
.min_w_0()
@@ -86,10 +86,10 @@ fn render_advanced_summary(snapshot: &BrowserSnapshot) -> AnyElement {
div()
.text_sm()
.font_semibold()
.text_color(rgb(colors::INK))
.text_color(rgb(colors::ink()))
.child("Local Runtime"),
)
.child(div().text_xs().truncate().text_color(rgb(colors::MUTED)).child(
.child(div().text_xs().truncate().text_color(rgb(colors::muted())).child(
format!(
"{} space / {} profile",
snapshot.active_space_name, snapshot.active_profile_name
@@ -97,7 +97,7 @@ fn render_advanced_summary(snapshot: &BrowserSnapshot) -> AnyElement {
)),
),
)
.child(div().text_xs().font_semibold().text_color(rgb(colors::SUCCESS)).child("Local"))
.child(div().text_xs().font_semibold().text_color(rgb(colors::success())).child("Local"))
.into_any_element()
}
@@ -111,7 +111,7 @@ fn render_advanced_rows(snapshot: &BrowserSnapshot) -> AnyElement {
.flex_col()
.overflow_y_scrollbar()
.border_t_1()
.border_color(rgb(colors::HAIRLINE))
.border_color(rgb(colors::hairline()))
.child(advanced_row(
IconName::Eye,
"History Recording",
@@ -179,7 +179,7 @@ fn advanced_row(
div()
.py_3()
.border_b_1()
.border_color(rgb(colors::HAIRLINE))
.border_color(rgb(colors::hairline()))
.flex()
.items_center()
.justify_between()
@@ -190,7 +190,7 @@ fn advanced_row(
.flex()
.items_center()
.gap_3()
.child(div().text_color(rgb(colors::MUTED_SOFT)).child(icon))
.child(div().text_color(rgb(colors::muted_soft())).child(icon))
.child(
div()
.min_w_0()
@@ -202,11 +202,15 @@ fn advanced_row(
.text_sm()
.font_semibold()
.truncate()
.text_color(rgb(colors::INK))
.text_color(rgb(colors::ink()))
.child(label),
)
.child(
div().text_xs().truncate().text_color(rgb(colors::MUTED)).child(detail),
div()
.text_xs()
.truncate()
.text_color(rgb(colors::muted()))
.child(detail),
),
),
)
@@ -216,7 +220,7 @@ fn advanced_row(
.truncate()
.text_sm()
.font_semibold()
.text_color(rgb(colors::INK))
.text_color(rgb(colors::ink()))
.child(value),
)
.into_any_element()
@@ -41,9 +41,9 @@ fn render_auth_callback_header(state: &AuthCallbackState) -> AnyElement {
.flex_col()
.gap_2()
.child(
div().text_size(px(26.0)).text_color(rgb(colors::INK)).child("Auth Callback"),
div().text_size(px(26.0)).text_color(rgb(colors::ink())).child("Auth Callback"),
)
.child(div().text_sm().text_color(rgb(colors::MUTED)).child(SYNC_SERVICE_NAME)),
.child(div().text_sm().text_color(rgb(colors::muted())).child(SYNC_SERVICE_NAME)),
)
.child(
div()
@@ -66,7 +66,7 @@ fn render_auth_callback_rows(state: &AuthCallbackState) -> AnyElement {
.flex()
.flex_col()
.border_t_1()
.border_color(rgb(colors::HAIRLINE))
.border_color(rgb(colors::hairline()))
.child(auth_callback_row(
IconName::Globe,
"Service",
@@ -97,7 +97,7 @@ fn auth_callback_row(
div()
.py_4()
.border_b_1()
.border_color(rgb(colors::HAIRLINE))
.border_color(rgb(colors::hairline()))
.flex()
.items_center()
.justify_between()
@@ -108,7 +108,7 @@ fn auth_callback_row(
.flex()
.items_center()
.gap_3()
.child(div().text_color(rgb(colors::MUTED)).child(icon))
.child(div().text_color(rgb(colors::muted())).child(icon))
.child(
div()
.min_w_0()
@@ -119,19 +119,19 @@ fn auth_callback_row(
div()
.text_sm()
.font_semibold()
.text_color(rgb(colors::INK))
.text_color(rgb(colors::ink()))
.child(label),
)
.child(
div()
.text_xs()
.truncate()
.text_color(rgb(colors::MUTED))
.text_color(rgb(colors::muted()))
.child(detail.into()),
),
),
)
.child(div().text_xs().font_semibold().text_color(rgb(colors::MUTED)).child(value.into()))
.child(div().text_xs().font_semibold().text_color(rgb(colors::muted())).child(value.into()))
.into_any_element()
}
@@ -167,9 +167,9 @@ fn auth_callback_icon(state: &AuthCallbackState) -> IconName {
fn auth_callback_color(state: &AuthCallbackState) -> u32 {
match state {
AuthCallbackState::CodeReceived => colors::SUCCESS,
AuthCallbackState::ProviderError(_) => colors::ERROR,
AuthCallbackState::MissingCode => colors::MUTED,
AuthCallbackState::CodeReceived => colors::success(),
AuthCallbackState::ProviderError(_) => colors::error(),
AuthCallbackState::MissingCode => colors::muted(),
}
}
@@ -29,10 +29,10 @@ impl ElyShell {
.gap_5()
.child(self.render_bookmarks_header(snapshot, cx))
.when_some(self.bookmark_file_error.clone(), |this, message| {
this.child(render_bookmark_file_message(message, colors::ERROR))
this.child(render_bookmark_file_message(message, colors::error()))
})
.when_some(self.bookmark_file_notice.clone(), |this, message| {
this.child(render_bookmark_file_message(message, colors::SUCCESS))
this.child(render_bookmark_file_message(message, colors::success()))
})
.child(self.render_bookmark_list(snapshot, cx)),
)
@@ -47,10 +47,10 @@ impl ElyShell {
return div()
.flex_1()
.border_t_1()
.border_color(rgb(colors::HAIRLINE))
.border_color(rgb(colors::hairline()))
.pt_5()
.text_sm()
.text_color(rgb(colors::MUTED))
.text_color(rgb(colors::muted()))
.child("No bookmarks in this Profile.")
.into_any_element();
}
@@ -62,7 +62,7 @@ impl ElyShell {
.flex_col()
.overflow_y_scrollbar()
.border_t_1()
.border_color(rgb(colors::HAIRLINE))
.border_color(rgb(colors::hairline()))
.children(
snapshot
.bookmarks
@@ -94,7 +94,7 @@ impl ElyShell {
.id(SharedString::from(format!("bookmark-{}", bookmark.id().as_str())))
.py_3()
.border_b_1()
.border_color(rgb(colors::HAIRLINE))
.border_color(rgb(colors::hairline()))
.flex()
.flex_col()
.gap_3()
@@ -116,12 +116,14 @@ impl ElyShell {
.items_center()
.gap_3()
.cursor_pointer()
.hover(|style| style.bg(rgb(colors::CANVAS_SOFT)))
.hover(|style| style.bg(rgb(colors::canvas_soft())))
.on_click(cx.listener(move |shell, _, window, cx| {
shell.open_url(url.clone(), window, cx);
}))
.child(
div().text_color(rgb(colors::MUTED_SOFT)).child(IconName::BookOpen),
div()
.text_color(rgb(colors::muted_soft()))
.child(IconName::BookOpen),
)
.child(render_bookmark_summary(bookmark)),
)
@@ -171,17 +173,21 @@ fn render_bookmark_summary(bookmark: &BookmarkEntry) -> AnyElement {
.text_sm()
.font_semibold()
.truncate()
.text_color(rgb(colors::INK))
.text_color(rgb(colors::ink()))
.child(bookmark.title().to_string()),
)
.child(
div().text_xs().truncate().text_color(rgb(colors::MUTED)).child(bookmark.display_url()),
)
.child(
div()
.text_xs()
.truncate()
.text_color(rgb(colors::MUTED_SOFT))
.text_color(rgb(colors::muted()))
.child(bookmark.display_url()),
)
.child(
div()
.text_xs()
.truncate()
.text_color(rgb(colors::muted_soft()))
.child(bookmark_metadata_label(bookmark)),
)
.into_any_element()
@@ -196,8 +202,8 @@ fn render_bookmark_editor(
div()
.rounded_md()
.border_1()
.border_color(rgb(colors::HAIRLINE_STRONG))
.bg(rgb(colors::CANVAS_SOFT))
.border_color(rgb(colors::hairline_strong()))
.bg(rgb(colors::canvas_soft()))
.p_3()
.flex()
.flex_col()
@@ -211,7 +217,7 @@ fn render_bookmark_editor(
)
.child(render_bookmark_edit_field("Note", pending_edit.note_input()))
.when_some(edit_error.map(ToOwned::to_owned), |this, message| {
this.child(div().text_xs().text_color(rgb(colors::ERROR)).child(message))
this.child(div().text_xs().text_color(rgb(colors::error())).child(message))
})
.child(
div()
@@ -252,7 +258,7 @@ fn render_bookmark_edit_field(label: &'static str, input: &Entity<InputState>) -
.flex()
.flex_col()
.gap_1()
.child(div().text_xs().font_semibold().text_color(rgb(colors::MUTED)).child(label))
.child(div().text_xs().font_semibold().text_color(rgb(colors::muted())).child(label))
.child(Input::new(input).small())
.into_any_element()
}
@@ -274,12 +280,12 @@ impl ElyShell {
.flex_col()
.gap_2()
.child(
div().text_size(px(26.0)).text_color(rgb(colors::INK)).child("Bookmarks"),
div().text_size(px(26.0)).text_color(rgb(colors::ink())).child("Bookmarks"),
)
.child(
div()
.text_sm()
.text_color(rgb(colors::MUTED))
.text_color(rgb(colors::muted()))
.child(format!("Profile: {}", snapshot.active_profile_name)),
),
)
@@ -291,7 +297,7 @@ impl ElyShell {
.child(
div()
.text_xs()
.text_color(rgb(colors::MUTED))
.text_color(rgb(colors::muted()))
.child(bookmark_count_label(snapshot.bookmarks.len())),
)
.child(
@@ -58,7 +58,7 @@ fn render_crash_content(
div()
.border_t_1()
.border_b_1()
.border_color(rgb(colors::HAIRLINE))
.border_color(rgb(colors::hairline()))
.py_4()
.flex()
.flex_col()
@@ -79,7 +79,7 @@ fn render_crash_content(
.items_center()
.gap_3()
.text_sm()
.text_color(rgb(colors::MUTED))
.text_color(rgb(colors::muted()))
.child(IconName::TriangleAlert)
.child("The renderer stopped for this tab. Restore reloads the saved tab state."),
)
@@ -119,7 +119,7 @@ fn render_crash_header(tab: &BrowserTab, cx: &mut Context<ElyShell>) -> AnyEleme
.items_center()
.gap_3()
.text_size(px(26.0))
.text_color(rgb(colors::INK))
.text_color(rgb(colors::ink()))
.child(IconName::TriangleAlert)
.child("Tab Recovery"),
)
@@ -127,7 +127,7 @@ fn render_crash_header(tab: &BrowserTab, cx: &mut Context<ElyShell>) -> AnyEleme
div()
.text_sm()
.truncate()
.text_color(rgb(colors::MUTED))
.text_color(rgb(colors::muted()))
.child(format!("Recovering {}", tab.display_url())),
),
)
@@ -153,8 +153,8 @@ fn render_missing_crash_route(message: &'static str) -> AnyElement {
.flex()
.flex_col()
.gap_4()
.child(div().text_size(px(26.0)).text_color(rgb(colors::INK)).child("Tab Recovery"))
.child(div().text_sm().text_color(rgb(colors::MUTED)).child(message)),
.child(div().text_size(px(26.0)).text_color(rgb(colors::ink())).child("Tab Recovery"))
.child(div().text_sm().text_color(rgb(colors::muted())).child(message)),
)
}
@@ -55,12 +55,12 @@ fn render_download_settings_header(snapshot: &BrowserSnapshot) -> AnyElement {
.flex()
.flex_col()
.gap_2()
.child(div().text_size(px(26.0)).text_color(rgb(colors::INK)).child("Downloads"))
.child(div().text_size(px(26.0)).text_color(rgb(colors::ink())).child("Downloads"))
.child(
div()
.text_sm()
.truncate()
.text_color(rgb(colors::MUTED))
.text_color(rgb(colors::muted()))
.child(format!("Profile: {}", snapshot.active_profile_name)),
),
)
@@ -71,7 +71,7 @@ fn render_download_settings_header(snapshot: &BrowserSnapshot) -> AnyElement {
.gap_2()
.text_xs()
.font_semibold()
.text_color(rgb(colors::MUTED))
.text_color(rgb(colors::muted()))
.child(IconName::Folder)
.child(download_destination_short_label(&snapshot.active_download_policy)),
)
@@ -85,8 +85,8 @@ fn render_download_policy_summary(
div()
.rounded_md()
.border_1()
.border_color(rgb(colors::HAIRLINE))
.bg(rgb(colors::CANVAS_SOFT))
.border_color(rgb(colors::hairline()))
.bg(rgb(colors::canvas_soft()))
.px_4()
.py_3()
.flex()
@@ -99,7 +99,7 @@ fn render_download_policy_summary(
.flex()
.items_center()
.gap_3()
.child(div().text_color(rgb(colors::PRIMARY)).child(IconName::Folder))
.child(div().text_color(rgb(colors::primary())).child(IconName::Folder))
.child(
div()
.min_w_0()
@@ -110,14 +110,14 @@ fn render_download_policy_summary(
div()
.text_sm()
.font_semibold()
.text_color(rgb(colors::INK))
.text_color(rgb(colors::ink()))
.child("Download location"),
)
.child(
div()
.text_xs()
.truncate()
.text_color(rgb(colors::MUTED))
.text_color(rgb(colors::muted()))
.child(download_policy_label(&snapshot.active_download_policy)),
),
),
@@ -131,7 +131,7 @@ fn render_download_policy_summary(
div()
.text_xs()
.font_semibold()
.text_color(rgb(colors::MUTED))
.text_color(rgb(colors::muted()))
.child(format!("{} entries", snapshot.download_entries.len())),
)
.child(
@@ -161,7 +161,7 @@ fn render_download_policy_rows(
.flex_col()
.overflow_y_scrollbar()
.border_t_1()
.border_color(rgb(colors::HAIRLINE))
.border_color(rgb(colors::hairline()))
.children(
options.iter().enumerate().map(|(index, option)| {
render_download_policy_row(index, option, active_policy, cx)
@@ -182,7 +182,7 @@ fn render_download_policy_row(
div()
.py_3()
.border_b_1()
.border_color(rgb(colors::HAIRLINE))
.border_color(rgb(colors::hairline()))
.flex()
.items_center()
.justify_between()
@@ -209,14 +209,14 @@ fn render_download_policy_row(
.text_sm()
.font_semibold()
.truncate()
.text_color(rgb(colors::INK))
.text_color(rgb(colors::ink()))
.child(option.title),
)
.child(
div()
.text_xs()
.truncate()
.text_color(rgb(colors::MUTED))
.text_color(rgb(colors::muted()))
.child(option.detail.clone()),
),
),
@@ -273,7 +273,7 @@ fn download_policy_icon(option: &DownloadPolicyOption, selected: bool) -> IconNa
}
fn download_policy_icon_color(selected: bool) -> u32 {
if selected { colors::PRIMARY } else { colors::MUTED_SOFT }
if selected { colors::primary() } else { colors::muted_soft() }
}
fn download_policy_button_label(selected: bool) -> &'static str {
@@ -48,13 +48,13 @@ impl ElyShell {
.child(
div()
.text_size(px(26.0))
.text_color(rgb(colors::INK))
.text_color(rgb(colors::ink()))
.child("Downloads"),
)
.child(
div()
.text_sm()
.text_color(rgb(colors::MUTED))
.text_color(rgb(colors::muted()))
.child(snapshot.active_profile_name.clone()),
),
)
@@ -70,7 +70,7 @@ impl ElyShell {
.items_center()
.gap_2()
.child(
div().text_xs().text_color(rgb(colors::MUTED)).child(
div().text_xs().text_color(rgb(colors::muted())).child(
format!(
"{} downloads",
snapshot.download_entries.len()
@@ -99,7 +99,7 @@ impl ElyShell {
.items_center()
.gap_1()
.text_xs()
.text_color(rgb(colors::MUTED))
.text_color(rgb(colors::muted()))
.child(IconName::Folder)
.child(div().max_w(px(360.0)).truncate().child(
download_policy_label(&snapshot.active_download_policy),
@@ -129,14 +129,14 @@ impl ElyShell {
div()
.rounded_md()
.border_1()
.border_color(rgb(colors::HAIRLINE))
.border_color(rgb(colors::hairline()))
.px_3()
.py_2()
.flex()
.items_center()
.justify_between()
.gap_3()
.child(div().min_w_0().text_xs().text_color(rgb(colors::BODY)).truncate().child(
.child(div().min_w_0().text_xs().text_color(rgb(colors::body())).truncate().child(
format!(
"Clear {} downloads for {}?",
snapshot.download_entries.len(),
@@ -178,7 +178,7 @@ impl ElyShell {
div()
.rounded_md()
.border_1()
.border_color(rgb(colors::ERROR))
.border_color(rgb(colors::error()))
.px_3()
.py_2()
.flex()
@@ -192,7 +192,7 @@ impl ElyShell {
.items_center()
.gap_2()
.text_xs()
.text_color(rgb(colors::ERROR))
.text_color(rgb(colors::error()))
.child(IconName::TriangleAlert)
.child(div().truncate().child(format!(
"Confirm {} for {}",
@@ -236,10 +236,10 @@ impl ElyShell {
return div()
.flex_1()
.border_t_1()
.border_color(rgb(colors::HAIRLINE))
.border_color(rgb(colors::hairline()))
.pt_5()
.text_sm()
.text_color(rgb(colors::MUTED))
.text_color(rgb(colors::muted()))
.child("Downloads are empty for this Profile.")
.into_any_element();
}
@@ -250,7 +250,7 @@ impl ElyShell {
.flex_col()
.overflow_y_scrollbar()
.border_t_1()
.border_color(rgb(colors::HAIRLINE))
.border_color(rgb(colors::hairline()))
.children(
snapshot
.download_entries
@@ -272,7 +272,7 @@ impl ElyShell {
.id(SharedString::from(format!("download-{index}")))
.py_3()
.border_b_1()
.border_color(rgb(colors::HAIRLINE))
.border_color(rgb(colors::hairline()))
.flex()
.items_center()
.justify_between()
@@ -283,7 +283,7 @@ impl ElyShell {
.flex()
.items_center()
.gap_3()
.child(div().text_color(rgb(colors::MUTED)).child(IconName::File))
.child(div().text_color(rgb(colors::muted())).child(IconName::File))
.child(
div()
.min_w_0()
@@ -295,14 +295,14 @@ impl ElyShell {
.text_sm()
.font_semibold()
.truncate()
.text_color(rgb(colors::INK))
.text_color(rgb(colors::ink()))
.child(entry.file_name().to_string()),
)
.child(
div()
.text_xs()
.truncate()
.text_color(rgb(colors::MUTED))
.text_color(rgb(colors::muted()))
.child(entry.source_url().display_url()),
)
.child(
@@ -311,7 +311,7 @@ impl ElyShell {
.items_center()
.gap_2()
.text_xs()
.text_color(rgb(colors::MUTED))
.text_color(rgb(colors::muted()))
.child(
div()
.min_w_0()
@@ -344,13 +344,13 @@ impl ElyShell {
div()
.text_xs()
.font_semibold()
.text_color(rgb(colors::BODY))
.text_color(rgb(colors::body()))
.child(download_state_label(entry.state())),
)
.child(
div()
.text_xs()
.text_color(rgb(colors::MUTED))
.text_color(rgb(colors::muted()))
.child(download_size_label(entry)),
),
)
@@ -364,14 +364,14 @@ fn render_download_action_error(message: String) -> AnyElement {
div()
.rounded_md()
.border_1()
.border_color(rgb(colors::ERROR))
.border_color(rgb(colors::error()))
.px_3()
.py_2()
.flex()
.items_center()
.gap_2()
.text_xs()
.text_color(rgb(colors::ERROR))
.text_color(rgb(colors::error()))
.child(IconName::TriangleAlert)
.child(message)
.into_any_element()
@@ -379,7 +379,7 @@ fn render_download_action_error(message: String) -> AnyElement {
fn render_security_prompt(entry: &DownloadEntry) -> AnyElement {
let prompt_color =
if entry.requires_security_confirmation() { colors::ERROR } else { colors::SUCCESS };
if entry.requires_security_confirmation() { colors::error() } else { colors::success() };
let prompt_icon = if entry.requires_security_confirmation() {
IconName::TriangleAlert
} else {
@@ -401,7 +401,7 @@ fn render_checksum_label(checksum: &DownloadChecksum) -> AnyElement {
.flex()
.items_center()
.gap_1()
.text_color(rgb(colors::SUCCESS))
.text_color(rgb(colors::success()))
.child(IconName::CircleCheck)
.child(format!("SHA-256 {}", short_checksum(checksum.value())))
.into_any_element()
@@ -42,12 +42,12 @@ fn render_general_header(snapshot: &BrowserSnapshot) -> AnyElement {
.flex()
.flex_col()
.gap_2()
.child(div().text_size(px(26.0)).text_color(rgb(colors::INK)).child("General"))
.child(div().text_size(px(26.0)).text_color(rgb(colors::ink())).child("General"))
.child(
div()
.text_sm()
.truncate()
.text_color(rgb(colors::MUTED))
.text_color(rgb(colors::muted()))
.child(format!("Profile: {}", snapshot.active_profile_name)),
),
)
@@ -58,7 +58,7 @@ fn render_general_header(snapshot: &BrowserSnapshot) -> AnyElement {
.gap_2()
.text_xs()
.font_semibold()
.text_color(rgb(colors::MUTED))
.text_color(rgb(colors::muted()))
.child(IconName::Settings2)
.child(snapshot.new_tab_destination.name()),
)
@@ -72,8 +72,8 @@ fn render_general_summary(
div()
.rounded_md()
.border_1()
.border_color(rgb(colors::HAIRLINE))
.bg(rgb(colors::CANVAS_SOFT))
.border_color(rgb(colors::hairline()))
.bg(rgb(colors::canvas_soft()))
.px_4()
.py_3()
.flex()
@@ -86,7 +86,9 @@ fn render_general_summary(
.flex()
.items_center()
.gap_3()
.child(div().text_color(rgb(colors::PRIMARY)).child(destination_icon(destination)))
.child(
div().text_color(rgb(colors::primary())).child(destination_icon(destination)),
)
.child(
div()
.min_w_0()
@@ -97,14 +99,14 @@ fn render_general_summary(
div()
.text_sm()
.font_semibold()
.text_color(rgb(colors::INK))
.text_color(rgb(colors::ink()))
.child(format!("New Tab opens {}", destination.name())),
)
.child(
div()
.text_xs()
.truncate()
.text_color(rgb(colors::MUTED))
.text_color(rgb(colors::muted()))
.child(destination.detail()),
),
),
@@ -118,7 +120,7 @@ fn render_general_summary(
div()
.text_xs()
.font_semibold()
.text_color(rgb(colors::SUCCESS))
.text_color(rgb(colors::success()))
.child("Saved locally"),
)
.child(
@@ -147,7 +149,7 @@ fn render_new_tab_destinations(
.flex_col()
.overflow_y_scrollbar()
.border_t_1()
.border_color(rgb(colors::HAIRLINE))
.border_color(rgb(colors::hairline()))
.children(NewTabDestination::ALL.iter().copied().enumerate().map(|(index, destination)| {
render_new_tab_destination_row(index, destination, active_destination, cx)
}))
@@ -165,7 +167,7 @@ fn render_new_tab_destination_row(
div()
.py_3()
.border_b_1()
.border_color(rgb(colors::HAIRLINE))
.border_color(rgb(colors::hairline()))
.flex()
.items_center()
.justify_between()
@@ -192,14 +194,14 @@ fn render_new_tab_destination_row(
.text_sm()
.font_semibold()
.truncate()
.text_color(rgb(colors::INK))
.text_color(rgb(colors::ink()))
.child(destination.name()),
)
.child(
div()
.text_xs()
.truncate()
.text_color(rgb(colors::MUTED))
.text_color(rgb(colors::muted()))
.child(destination.detail()),
),
),
@@ -231,7 +233,7 @@ fn destination_status_icon(destination: NewTabDestination, selected: bool) -> Ic
}
fn destination_icon_color(selected: bool) -> u32 {
if selected { colors::PRIMARY } else { colors::MUTED_SOFT }
if selected { colors::primary() } else { colors::muted_soft() }
}
fn destination_button_label(selected: bool) -> &'static str {
@@ -61,8 +61,8 @@ fn render_history_header(snapshot: &BrowserSnapshot, cx: &mut Context<ElyShell>)
.flex()
.flex_col()
.gap_2()
.child(div().text_size(px(26.0)).text_color(rgb(colors::INK)).child("History"))
.child(div().text_sm().text_color(rgb(colors::MUTED)).child(format!(
.child(div().text_size(px(26.0)).text_color(rgb(colors::ink())).child("History"))
.child(div().text_sm().text_color(rgb(colors::muted())).child(format!(
"{} / {}",
snapshot.active_profile_name, snapshot.active_space_name
))),
@@ -75,7 +75,7 @@ fn render_history_header(snapshot: &BrowserSnapshot, cx: &mut Context<ElyShell>)
.child(
div()
.text_xs()
.text_color(rgb(colors::MUTED))
.text_color(rgb(colors::muted()))
.child(format!("{} entries", snapshot.history_entries.len())),
)
.when(!snapshot.history_entries.is_empty(), |this| {
@@ -101,8 +101,8 @@ fn render_time_clear_confirmation(
div()
.rounded_md()
.border_1()
.border_color(rgb(colors::ERROR))
.bg(rgb(colors::CANVAS_SOFT))
.border_color(rgb(colors::error()))
.bg(rgb(colors::canvas_soft()))
.px_4()
.py_3()
.flex()
@@ -119,13 +119,13 @@ fn render_time_clear_confirmation(
div()
.text_sm()
.font_semibold()
.text_color(rgb(colors::INK))
.text_color(rgb(colors::ink()))
.child(format!("Confirm clearing {}", pending.label())),
)
.child(
div()
.text_xs()
.text_color(rgb(colors::MUTED))
.text_color(rgb(colors::muted()))
.child("This removes recent history in the current Space."),
),
)
@@ -163,8 +163,8 @@ fn render_domain_clear_confirmation(
div()
.rounded_md()
.border_1()
.border_color(rgb(colors::ERROR))
.bg(rgb(colors::CANVAS_SOFT))
.border_color(rgb(colors::error()))
.bg(rgb(colors::canvas_soft()))
.px_4()
.py_3()
.flex()
@@ -181,13 +181,13 @@ fn render_domain_clear_confirmation(
div()
.text_sm()
.font_semibold()
.text_color(rgb(colors::INK))
.text_color(rgb(colors::ink()))
.child(format!("Confirm clearing {}", pending.host())),
)
.child(
div()
.text_xs()
.text_color(rgb(colors::MUTED))
.text_color(rgb(colors::muted()))
.child("This removes matching history in the current Space."),
),
)
@@ -223,10 +223,10 @@ fn render_history_list(snapshot: &BrowserSnapshot, cx: &mut Context<ElyShell>) -
return div()
.flex_1()
.border_t_1()
.border_color(rgb(colors::HAIRLINE))
.border_color(rgb(colors::hairline()))
.pt_5()
.text_sm()
.text_color(rgb(colors::MUTED))
.text_color(rgb(colors::muted()))
.child("History is empty for this Space and Profile.")
.into_any_element();
}
@@ -238,7 +238,7 @@ fn render_history_list(snapshot: &BrowserSnapshot, cx: &mut Context<ElyShell>) -
.flex_col()
.overflow_y_scrollbar()
.border_t_1()
.border_color(rgb(colors::HAIRLINE))
.border_color(rgb(colors::hairline()))
.children(
snapshot
.history_entries
@@ -264,7 +264,7 @@ fn render_history_row(
.id(SharedString::from(format!("history-{index}")))
.py_3()
.border_b_1()
.border_color(rgb(colors::HAIRLINE))
.border_color(rgb(colors::hairline()))
.flex()
.items_center()
.justify_between()
@@ -280,7 +280,7 @@ fn render_history_row(
.text_sm()
.font_semibold()
.truncate()
.text_color(rgb(colors::INK))
.text_color(rgb(colors::ink()))
.child(entry.title().to_string()),
)
.child(
@@ -289,26 +289,27 @@ fn render_history_row(
.items_center()
.gap_2()
.text_xs()
.text_color(rgb(colors::MUTED))
.text_color(rgb(colors::muted()))
.child(div().min_w_0().truncate().child(entry.url().display_url()))
.child(div().text_color(rgb(colors::MUTED_SOFT)).child("-"))
.child(div().text_color(rgb(colors::muted_soft())).child("-"))
.child(
div()
.text_color(rgb(colors::MUTED_SOFT))
.text_color(rgb(colors::muted_soft()))
.child(visit_count_label(entry.visit_count())),
)
.child(div().text_color(rgb(colors::MUTED_SOFT)).child("-"))
.child(div().text_color(rgb(colors::muted_soft())).child("-"))
.child(
div()
.text_color(rgb(colors::MUTED_SOFT))
.text_color(rgb(colors::muted_soft()))
.child(visited_at_label(entry.visited_at())),
)
.when_some(source_tab_label, |this, source_tab_label| {
this.child(div().text_color(rgb(colors::MUTED_SOFT)).child("-")).child(
this.child(div().text_color(rgb(colors::muted_soft())).child("-"))
.child(
div()
.max_w(px(180.0))
.truncate()
.text_color(rgb(colors::MUTED_SOFT))
.text_color(rgb(colors::muted_soft()))
.child(format!("Source: {source_tab_label}")),
)
}),
@@ -43,10 +43,10 @@ impl ElyShell {
return div()
.flex_1()
.border_t_1()
.border_color(rgb(colors::HAIRLINE))
.border_color(rgb(colors::hairline()))
.pt_5()
.text_sm()
.text_color(rgb(colors::MUTED))
.text_color(rgb(colors::muted()))
.child("Notes are empty for this Profile.")
.into_any_element();
}
@@ -58,7 +58,7 @@ impl ElyShell {
.flex_col()
.overflow_y_scrollbar()
.border_t_1()
.border_color(rgb(colors::HAIRLINE))
.border_color(rgb(colors::hairline()))
.children(
snapshot
.notes
@@ -86,7 +86,7 @@ impl ElyShell {
.id(SharedString::from(format!("note-{}", note.id().as_str())))
.py_3()
.border_b_1()
.border_color(rgb(colors::HAIRLINE))
.border_color(rgb(colors::hairline()))
.flex()
.items_center()
.justify_between()
@@ -100,12 +100,12 @@ impl ElyShell {
.items_center()
.gap_3()
.cursor_pointer()
.hover(|style| style.bg(rgb(colors::CANVAS_SOFT)))
.hover(|style| style.bg(rgb(colors::canvas_soft())))
.active(|style| style.opacity(0.82))
.on_click(cx.listener(move |shell, _, window, cx| {
shell.open_url(url.clone(), window, cx);
}))
.child(div().text_color(rgb(colors::MUTED_SOFT)).child(IconName::File))
.child(div().text_color(rgb(colors::muted_soft())).child(IconName::File))
.child(
div()
.min_w_0()
@@ -117,14 +117,14 @@ impl ElyShell {
.text_sm()
.font_semibold()
.truncate()
.text_color(rgb(colors::INK))
.text_color(rgb(colors::ink()))
.child(note.title().to_string()),
)
.child(
div()
.text_xs()
.truncate()
.text_color(rgb(colors::MUTED))
.text_color(rgb(colors::muted()))
.child(note.display_url()),
)
.child(render_markdown_preview(note.body())),
@@ -139,7 +139,7 @@ impl ElyShell {
.gap_2()
.text_xs()
.font_semibold()
.text_color(rgb(colors::MUTED))
.text_color(rgb(colors::muted()))
.when_some(space_name, |this, space_name| {
this.child(div().max_w(px(110.0)).truncate().child(space_name))
})
@@ -171,18 +171,18 @@ fn render_notes_header(snapshot: &BrowserSnapshot) -> AnyElement {
.flex()
.flex_col()
.gap_2()
.child(div().text_size(px(26.0)).text_color(rgb(colors::INK)).child("Notes"))
.child(div().text_size(px(26.0)).text_color(rgb(colors::ink())).child("Notes"))
.child(
div()
.text_sm()
.text_color(rgb(colors::MUTED))
.text_color(rgb(colors::muted()))
.child(format!("Profile: {}", snapshot.active_profile_name)),
),
)
.child(
div()
.text_xs()
.text_color(rgb(colors::MUTED))
.text_color(rgb(colors::muted()))
.child(notes_count_label(snapshot.notes.len())),
)
.into_any_element()
@@ -47,7 +47,7 @@ fn render_heading(level: u8, text: String) -> AnyElement {
.text_size(px(size))
.font_semibold()
.truncate()
.text_color(rgb(colors::INK))
.text_color(rgb(colors::ink()))
.child(text)
.into_any_element()
}
@@ -59,7 +59,7 @@ fn render_bullet(text: String) -> AnyElement {
.items_start()
.gap_2()
.text_xs()
.text_color(rgb(colors::MUTED_SOFT))
.text_color(rgb(colors::muted_soft()))
.child(div().flex_none().child("-"))
.child(div().min_w_0().truncate().child(text))
.into_any_element()
@@ -69,11 +69,11 @@ fn render_quote(text: String) -> AnyElement {
div()
.min_w_0()
.border_l_2()
.border_color(rgb(colors::HAIRLINE_STRONG))
.border_color(rgb(colors::hairline_strong()))
.pl_2()
.text_xs()
.truncate()
.text_color(rgb(colors::MUTED))
.text_color(rgb(colors::muted()))
.child(text)
.into_any_element()
}
@@ -83,18 +83,18 @@ fn render_code(text: String) -> AnyElement {
.min_w_0()
.rounded_md()
.border_1()
.border_color(rgb(colors::HAIRLINE))
.bg(rgb(colors::CANVAS_SOFT))
.border_color(rgb(colors::hairline()))
.bg(rgb(colors::canvas_soft()))
.px_2()
.py_1()
.text_xs()
.text_color(rgb(colors::BODY))
.text_color(rgb(colors::body()))
.child(truncate_text(&text, TEXT_LIMIT))
.into_any_element()
}
fn render_paragraph(text: String) -> AnyElement {
div().text_xs().truncate().text_color(rgb(colors::MUTED_SOFT)).child(text).into_any_element()
div().text_xs().truncate().text_color(rgb(colors::muted_soft())).child(text).into_any_element()
}
fn markdown_preview_blocks(body: &str) -> Vec<MarkdownPreviewBlock> {
@@ -58,7 +58,7 @@ impl ElyShell {
.child(
div()
.text_size(px(11.0))
.text_color(rgb(colors::INK_4))
.text_color(rgb(colors::ink_4()))
.child("PLUGINS · NATIVE TO ELY"),
)
.child(
@@ -66,13 +66,15 @@ impl ElyShell {
.font_family(SERIF_FAMILY)
.text_size(px(48.0))
.font_weight(FontWeight(400.0))
.text_color(rgb(colors::INK))
.text_color(rgb(colors::ink()))
.child("Quiet tools. Everyday magic."),
)
.child(div().max_w(px(520.0)).text_size(px(13.5)).text_color(rgb(colors::INK_2)).child(
.child(
div().max_w(px(520.0)).text_size(px(13.5)).text_color(rgb(colors::ink_2())).child(
"ELY plugins are sandboxed, theme-aware, and ship with their own \
controls in your sidebar no Chrome extension framework required.",
))
),
)
.child(self.render_search_row(cx))
.into_any_element()
}
@@ -93,7 +95,7 @@ impl ElyShell {
.flex()
.items_center()
.gap(px(10.0))
.child(div().text_color(rgb(colors::INK_3)).child(IconName::Search))
.child(div().text_color(rgb(colors::ink_3())).child(IconName::Search))
.child(div().flex_1().child(
Input::new(&self.plugin_search_input).appearance(false).cleanable(true),
)),
@@ -132,7 +134,7 @@ fn render_summary(snapshot: &BrowserSnapshot) -> AnyElement {
.child(category_chip("All", true))
.child(category_chip("Installed", false))
.child(category_chip(sandbox_chip_label(snapshot), false))
.child(div().ml_auto().text_size(px(11.5)).text_color(rgb(colors::INK_3)).child(format!(
.child(div().ml_auto().text_size(px(11.5)).text_color(rgb(colors::ink_3())).child(format!(
"{} signed · {} high-risk",
snapshot.installed_plugins.len(),
high_risk_plugin_count(snapshot)
@@ -142,7 +144,7 @@ fn render_summary(snapshot: &BrowserSnapshot) -> AnyElement {
fn category_chip(label: &'static str, active: bool) -> AnyElement {
let bg = if active { 0x1d1c1aff } else { 0xffffffb3 };
let text_color = if active { 0xffffff } else { colors::INK_2 };
let text_color = if active { 0xffffff } else { colors::ink_2() };
div()
.px(px(12.0))
@@ -201,13 +203,13 @@ fn render_no_match_state(needle: &str) -> AnyElement {
.child(
div()
.text_size(px(13.0))
.text_color(rgb(colors::INK))
.text_color(rgb(colors::ink()))
.child(format!("No plugins match \"{needle}\".")),
)
.child(
div()
.text_size(px(11.5))
.text_color(rgb(colors::INK_3))
.text_color(rgb(colors::ink_3()))
.child("Try a different keyword."),
)
.into_any_element()
@@ -224,10 +226,10 @@ fn render_empty_state(cx: &mut Context<ElyShell>) -> AnyElement {
div()
.text_size(px(15.0))
.font_weight(FontWeight(500.0))
.text_color(rgb(colors::INK))
.text_color(rgb(colors::ink()))
.child("No plugins yet."),
)
.child(div().max_w(px(420.0)).text_size(px(13.0)).text_color(rgb(colors::INK_3)).child(
.child(div().max_w(px(420.0)).text_size(px(13.0)).text_color(rgb(colors::ink_3())).child(
"Drop a signed .rplug package on ELY to extend the browser with sandboxed \
tools. Plugins ship with their own sidebar controls.",
))
@@ -246,7 +248,7 @@ fn render_plugin_card(
let detail_route = format!("ely://plugin/{}", plugin.id().as_str());
let enabled = plugin.enabled_for_profile(profile_kind);
let status = if enabled { "Enabled" } else { "Disabled" };
let status_color = if enabled { colors::SUCCESS } else { colors::INK_4 };
let status_color = if enabled { colors::success() } else { colors::ink_4() };
let high_risk = plugin.manifest().high_risk_permissions().count();
let glyph = plugin.manifest().name().chars().next().unwrap_or('◇').to_string();
let initial = glyph.to_uppercase().to_string();
@@ -298,14 +300,14 @@ fn render_plugin_card(
div()
.text_size(px(13.5))
.font_weight(FontWeight(600.0))
.text_color(rgb(colors::INK))
.text_color(rgb(colors::ink()))
.truncate()
.child(plugin.manifest().name().to_string()),
)
.child(
div()
.text_size(px(11.0))
.text_color(rgb(colors::INK_4))
.text_color(rgb(colors::ink_4()))
.truncate()
.child(plugin.manifest().author().to_string()),
),
@@ -325,7 +327,7 @@ fn render_plugin_card(
.child(
div()
.text_size(px(12.0))
.text_color(rgb(colors::INK_3))
.text_color(rgb(colors::ink_3()))
.max_h(px(48.0))
.overflow_hidden()
.child(plugin.manifest().description().to_string()),
@@ -337,9 +339,9 @@ fn render_plugin_card(
.gap(px(8.0))
.pt(px(8.0))
.border_t_1()
.border_color(rgba(colors::DIVIDER))
.border_color(rgba(colors::divider()))
.text_size(px(10.5))
.text_color(rgb(colors::INK_4))
.text_color(rgb(colors::ink_4()))
.child(format!("{} permissions", plugin.manifest().permissions().len()))
.child("·")
.child(format!("{high_risk} high risk"))
@@ -349,7 +351,7 @@ fn render_plugin_card(
.flex()
.items_center()
.gap(px(3.0))
.text_color(rgb(colors::SUCCESS))
.text_color(rgb(colors::success()))
.child("Sandboxed"),
),
)
@@ -60,15 +60,15 @@ fn render_missing_plugin_detail(
div()
.font_family(SERIF_FAMILY)
.text_size(px(28.0))
.text_color(rgb(colors::INK))
.text_color(rgb(colors::ink()))
.child("Plugin Details"),
)
.child(div().text_sm().text_color(rgb(colors::MUTED)).child(detail)),
.child(div().text_sm().text_color(rgb(colors::muted())).child(detail)),
)
.child(
div()
.border_t_1()
.border_color(rgb(colors::HAIRLINE))
.border_color(rgb(colors::hairline()))
.pt(px(20.0))
.flex()
.items_center()
@@ -77,7 +77,7 @@ fn render_missing_plugin_detail(
.child(
div()
.text_sm()
.text_color(rgb(colors::MUTED))
.text_color(rgb(colors::muted()))
.child("Plugin details are available for installed plugins."),
)
.child(
@@ -24,7 +24,7 @@ pub(super) fn render_editors_pick(
.flex()
.flex_col()
.gap(px(14.0))
.child(div().text_size(px(11.0)).text_color(rgb(colors::INK_3)).child("EDITOR'S PICK"))
.child(div().text_size(px(11.0)).text_color(rgb(colors::ink_3())).child("EDITOR'S PICK"))
.child(render_featured_body(featured))
.child(render_featured_actions(featured, cx))
.into_any_element()
@@ -72,10 +72,10 @@ fn render_featured_body(featured: Option<&InstalledPlugin>) -> AnyElement {
div()
.text_size(px(15.0))
.font_weight(FontWeight(600.0))
.text_color(rgb(colors::INK))
.text_color(rgb(colors::ink()))
.child(name),
)
.child(div().text_size(px(12.5)).text_color(rgb(colors::INK_3)).child(desc)),
.child(div().text_size(px(12.5)).text_color(rgb(colors::ink_3())).child(desc)),
)
.into_any_element()
}
@@ -98,7 +98,7 @@ fn render_featured_actions(
div()
.ml_auto()
.text_size(px(11.5))
.text_color(rgb(colors::INK_3))
.text_color(rgb(colors::ink_3()))
.child(format!("{} permissions", plugin.manifest().permissions().len())),
)
.into_any_element()
@@ -128,7 +128,7 @@ where
.px(px(14.0))
.py(px(7.0))
.rounded(px(8.0))
.bg(rgb(colors::INK))
.bg(rgb(colors::ink()))
.text_size(px(12.0))
.font_weight(FontWeight(500.0))
.text_color(rgb(0xffffff))
@@ -38,13 +38,13 @@ impl ElyShell {
.child(
div()
.text_size(px(26.0))
.text_color(rgb(colors::INK))
.text_color(rgb(colors::ink()))
.child("Plugins"),
)
.child(
div()
.text_sm()
.text_color(rgb(colors::MUTED))
.text_color(rgb(colors::muted()))
.child("Browser scope"),
),
)
@@ -54,10 +54,10 @@ impl ElyShell {
.flex_col()
.items_end()
.gap_1()
.child(div().text_xs().text_color(rgb(colors::MUTED)).child(
.child(div().text_xs().text_color(rgb(colors::muted())).child(
format!("{} installed", snapshot.installed_plugins.len()),
))
.child(div().text_xs().text_color(rgb(colors::MUTED)).child(
.child(div().text_xs().text_color(rgb(colors::muted())).child(
format!("{} audit events", snapshot.plugin_audit_events.len()),
)),
),
@@ -71,7 +71,7 @@ impl ElyShell {
.child(
div()
.text_xs()
.text_color(rgb(colors::MUTED))
.text_color(rgb(colors::muted()))
.child("Install signed .rplug packages from local disk."),
)
.child(
@@ -105,11 +105,11 @@ fn render_plugin_install_error(message: String) -> AnyElement {
div()
.rounded_md()
.border_1()
.border_color(rgb(colors::ERROR))
.border_color(rgb(colors::error()))
.px_3()
.py_2()
.text_xs()
.text_color(rgb(colors::ERROR))
.text_color(rgb(colors::error()))
.child(message)
.into_any_element()
}
@@ -121,7 +121,7 @@ fn render_plugin_install_confirmation(
div()
.rounded_md()
.border_1()
.border_color(rgb(colors::ERROR))
.border_color(rgb(colors::error()))
.px_3()
.py_2()
.flex()
@@ -138,14 +138,14 @@ fn render_plugin_install_confirmation(
div()
.text_xs()
.font_semibold()
.text_color(rgb(colors::ERROR))
.text_color(rgb(colors::error()))
.child(format!("Confirm install for {}", pending.manifest().name())),
)
.child(
div()
.text_xs()
.truncate()
.text_color(rgb(colors::MUTED))
.text_color(rgb(colors::muted()))
.child(plugin_install_confirmation_label(pending)),
),
)
@@ -181,7 +181,7 @@ fn render_plugin_uninstall_confirmation(
div()
.rounded_md()
.border_1()
.border_color(rgb(colors::ERROR))
.border_color(rgb(colors::error()))
.px_3()
.py_2()
.flex()
@@ -198,14 +198,14 @@ fn render_plugin_uninstall_confirmation(
div()
.text_xs()
.font_semibold()
.text_color(rgb(colors::ERROR))
.text_color(rgb(colors::error()))
.child(format!("Confirm uninstall for {}", pending.plugin_name())),
)
.child(
div()
.text_xs()
.truncate()
.text_color(rgb(colors::MUTED))
.text_color(rgb(colors::muted()))
.child(pending.plugin_id().as_str().to_string()),
),
)
@@ -240,10 +240,10 @@ fn render_plugin_list(snapshot: &BrowserSnapshot, cx: &mut Context<ElyShell>) ->
if snapshot.installed_plugins.is_empty() {
return div()
.border_t_1()
.border_color(rgb(colors::HAIRLINE))
.border_color(rgb(colors::hairline()))
.pt_5()
.text_sm()
.text_color(rgb(colors::MUTED))
.text_color(rgb(colors::muted()))
.child("No plugins installed.")
.into_any_element();
}
@@ -259,7 +259,7 @@ fn render_plugin_list(snapshot: &BrowserSnapshot, cx: &mut Context<ElyShell>) ->
.flex()
.flex_col()
.border_t_1()
.border_color(rgb(colors::HAIRLINE))
.border_color(rgb(colors::hairline()))
.children(rows)
.into_any_element()
}
@@ -272,7 +272,7 @@ fn render_plugin_row(
) -> AnyElement {
let high_risk_count = plugin.manifest().high_risk_permissions().count();
let status_color =
if plugin.enabled_for_profile(profile_kind) { colors::SUCCESS } else { colors::MUTED };
if plugin.enabled_for_profile(profile_kind) { colors::success() } else { colors::muted() };
let status_label = plugin_status_label(plugin, profile_kind);
let plugin_id = plugin.id().clone();
let plugin_name = plugin.manifest().name().to_string();
@@ -281,7 +281,7 @@ fn render_plugin_row(
div()
.py_3()
.border_b_1()
.border_color(rgb(colors::HAIRLINE))
.border_color(rgb(colors::hairline()))
.flex()
.items_center()
.justify_between()
@@ -297,14 +297,14 @@ fn render_plugin_row(
.text_sm()
.font_semibold()
.truncate()
.text_color(rgb(colors::INK))
.text_color(rgb(colors::ink()))
.child(plugin.manifest().name().to_string()),
)
.child(
div()
.text_xs()
.truncate()
.text_color(rgb(colors::MUTED))
.text_color(rgb(colors::muted()))
.child(plugin.id().as_str().to_string()),
),
)
@@ -314,7 +314,7 @@ fn render_plugin_row(
.items_center()
.gap_3()
.text_xs()
.text_color(rgb(colors::MUTED))
.text_color(rgb(colors::muted()))
.child(format!("{} permissions", plugin.manifest().permissions().len()))
.child(format!("{high_risk_count} high risk"))
.child(div().text_color(rgb(status_color)).child(status_label))
@@ -419,7 +419,7 @@ fn render_plugin_audit_list(snapshot: &BrowserSnapshot) -> AnyElement {
.flex_col()
.min_h_0()
.gap_3()
.child(div().text_xs().font_semibold().text_color(rgb(colors::MUTED)).child("Audit"))
.child(div().text_xs().font_semibold().text_color(rgb(colors::muted())).child("Audit"))
.child(
div()
.flex_1()
@@ -435,7 +435,7 @@ fn render_plugin_audit_row(event: &PluginAuditEvent) -> AnyElement {
div()
.py_2()
.border_b_1()
.border_color(rgb(colors::HAIRLINE))
.border_color(rgb(colors::hairline()))
.flex()
.items_center()
.justify_between()
@@ -445,11 +445,11 @@ fn render_plugin_audit_row(event: &PluginAuditEvent) -> AnyElement {
div()
.min_w_0()
.truncate()
.text_color(rgb(colors::BODY))
.text_color(rgb(colors::body()))
.child(event.plugin_id().as_str().to_string()),
)
.child(
div().text_color(rgb(colors::MUTED)).child(plugin_audit_action_label(event.action())),
div().text_color(rgb(colors::muted())).child(plugin_audit_action_label(event.action())),
)
.into_any_element()
}
@@ -20,8 +20,8 @@ pub(super) fn render_local_data_inventory(
div()
.rounded_md()
.border_1()
.border_color(rgb(colors::HAIRLINE))
.bg(rgb(colors::CANVAS_SOFT))
.border_color(rgb(colors::hairline()))
.bg(rgb(colors::canvas_soft()))
.px_4()
.py_3()
.flex()
@@ -50,7 +50,7 @@ fn render_inventory_header(
.flex()
.items_center()
.gap_3()
.child(div().text_color(rgb(colors::PRIMARY)).child(IconName::Inspector))
.child(div().text_color(rgb(colors::primary())).child(IconName::Inspector))
.child(
div()
.min_w_0()
@@ -61,10 +61,10 @@ fn render_inventory_header(
div()
.text_sm()
.font_semibold()
.text_color(rgb(colors::INK))
.text_color(rgb(colors::ink()))
.child("Local Data"),
)
.child(div().text_xs().truncate().text_color(rgb(colors::MUTED)).child(
.child(div().text_xs().truncate().text_color(rgb(colors::muted())).child(
format!(
"{} Profile inventory for review, export, and deletion.",
snapshot.active_profile_name
@@ -82,13 +82,13 @@ fn render_inventory_header(
div()
.rounded_md()
.border_1()
.border_color(rgb(colors::HAIRLINE))
.bg(rgb(colors::CANVAS))
.border_color(rgb(colors::hairline()))
.bg(rgb(colors::canvas()))
.px_3()
.py_2()
.text_xs()
.font_semibold()
.text_color(rgb(colors::INK))
.text_color(rgb(colors::ink()))
.child(format!("{} items", inventory.total_items())),
)
.child(
@@ -108,8 +108,8 @@ fn render_inventory_header(
fn file_message(notice: Option<&str>, error: Option<&str>) -> Option<AnyElement> {
notice
.map(|message| render_file_message(message, colors::SUCCESS))
.or_else(|| error.map(|message| render_file_message(message, colors::ERROR)))
.map(|message| render_file_message(message, colors::success()))
.or_else(|| error.map(|message| render_file_message(message, colors::error())))
}
fn render_file_message(message: &str, color: u32) -> AnyElement {
@@ -150,7 +150,7 @@ fn inventory_row(icon: IconName, label: &'static str, count: usize) -> AnyElemen
div()
.py_2()
.border_t_1()
.border_color(rgb(colors::HAIRLINE))
.border_color(rgb(colors::hairline()))
.flex()
.items_center()
.justify_between()
@@ -161,9 +161,14 @@ fn inventory_row(icon: IconName, label: &'static str, count: usize) -> AnyElemen
.flex()
.items_center()
.gap_3()
.child(div().text_color(rgb(colors::MUTED_SOFT)).child(icon))
.child(div().text_color(rgb(colors::muted_soft())).child(icon))
.child(
div().min_w_0().truncate().text_sm().text_color(rgb(colors::INK)).child(label),
div()
.min_w_0()
.truncate()
.text_sm()
.text_color(rgb(colors::ink()))
.child(label),
),
)
.child(
@@ -171,7 +176,7 @@ fn inventory_row(icon: IconName, label: &'static str, count: usize) -> AnyElemen
.flex_none()
.text_sm()
.font_semibold()
.text_color(rgb(colors::MUTED))
.text_color(rgb(colors::muted()))
.child(count.to_string()),
)
.into_any_element()
@@ -58,14 +58,14 @@ fn render_privacy_header(snapshot: &BrowserSnapshot) -> AnyElement {
.child(
div()
.text_size(px(26.0))
.text_color(rgb(colors::INK))
.text_color(rgb(colors::ink()))
.child("Privacy & Security"),
)
.child(
div()
.text_sm()
.truncate()
.text_color(rgb(colors::MUTED))
.text_color(rgb(colors::muted()))
.child(format!("Profile: {}", snapshot.active_profile_name)),
),
)
@@ -76,7 +76,7 @@ fn render_privacy_header(snapshot: &BrowserSnapshot) -> AnyElement {
.gap_2()
.text_xs()
.font_semibold()
.text_color(rgb(colors::MUTED))
.text_color(rgb(colors::muted()))
.child(privacy_icon(snapshot.history_recording_policy))
.child(snapshot.history_recording_policy.status()),
)
@@ -87,8 +87,8 @@ fn render_history_summary(snapshot: &BrowserSnapshot, cx: &mut Context<ElyShell>
div()
.rounded_md()
.border_1()
.border_color(rgb(colors::HAIRLINE))
.bg(rgb(colors::CANVAS_SOFT))
.border_color(rgb(colors::hairline()))
.bg(rgb(colors::canvas_soft()))
.px_4()
.py_3()
.flex()
@@ -116,14 +116,14 @@ fn render_history_summary(snapshot: &BrowserSnapshot, cx: &mut Context<ElyShell>
div()
.text_sm()
.font_semibold()
.text_color(rgb(colors::INK))
.text_color(rgb(colors::ink()))
.child(snapshot.history_recording_policy.name()),
)
.child(
div()
.text_xs()
.truncate()
.text_color(rgb(colors::MUTED))
.text_color(rgb(colors::muted()))
.child(snapshot.history_recording_policy.detail()),
),
),
@@ -133,7 +133,7 @@ fn render_history_summary(snapshot: &BrowserSnapshot, cx: &mut Context<ElyShell>
.flex()
.items_center()
.gap_2()
.child(div().text_xs().font_semibold().text_color(rgb(colors::MUTED)).child(
.child(div().text_xs().font_semibold().text_color(rgb(colors::muted())).child(
format!("{} Profile entries", snapshot.active_profile_history_entry_count),
))
.child(
@@ -164,7 +164,7 @@ fn render_history_clear_controls(confirming_clear: bool, cx: &mut Context<ElyShe
.child(
div()
.text_sm()
.text_color(rgb(colors::MUTED))
.text_color(rgb(colors::muted()))
.child("Clear all history saved for this Profile."),
)
.child(
@@ -184,8 +184,8 @@ fn render_clear_history_confirmation(cx: &mut Context<ElyShell>) -> AnyElement {
div()
.rounded_md()
.border_1()
.border_color(rgb(colors::ERROR))
.bg(rgb(colors::CANVAS_SOFT))
.border_color(rgb(colors::error()))
.bg(rgb(colors::canvas_soft()))
.px_4()
.py_3()
.flex()
@@ -202,13 +202,13 @@ fn render_clear_history_confirmation(cx: &mut Context<ElyShell>) -> AnyElement {
div()
.text_sm()
.font_semibold()
.text_color(rgb(colors::INK))
.text_color(rgb(colors::ink()))
.child("Confirm history clearing"),
)
.child(
div()
.text_xs()
.text_color(rgb(colors::MUTED))
.text_color(rgb(colors::muted()))
.child("This removes Profile history across every Space."),
),
)
@@ -244,7 +244,7 @@ fn render_privacy_settings_rows(
.min_h_0()
.overflow_y_scrollbar()
.border_t_1()
.border_color(rgb(colors::HAIRLINE))
.border_color(rgb(colors::hairline()))
.flex()
.flex_col()
.child(section_label("History"))
@@ -260,7 +260,7 @@ fn section_label(label: &'static str) -> AnyElement {
.pb_2()
.text_xs()
.font_semibold()
.text_color(rgb(colors::MUTED))
.text_color(rgb(colors::muted()))
.child(label)
.into_any_element()
}
@@ -308,7 +308,7 @@ fn render_diagnostics_policy_row(
div()
.py_3()
.border_b_1()
.border_color(rgb(colors::HAIRLINE))
.border_color(rgb(colors::hairline()))
.flex()
.items_center()
.justify_between()
@@ -335,14 +335,14 @@ fn render_diagnostics_policy_row(
.text_sm()
.font_semibold()
.truncate()
.text_color(rgb(colors::INK))
.text_color(rgb(colors::ink()))
.child(policy.name()),
)
.child(
div()
.text_xs()
.truncate()
.text_color(rgb(colors::MUTED))
.text_color(rgb(colors::muted()))
.child(policy.detail()),
),
),
@@ -372,7 +372,7 @@ fn render_history_policy_row(
div()
.py_3()
.border_b_1()
.border_color(rgb(colors::HAIRLINE))
.border_color(rgb(colors::hairline()))
.flex()
.items_center()
.justify_between()
@@ -399,14 +399,14 @@ fn render_history_policy_row(
.text_sm()
.font_semibold()
.truncate()
.text_color(rgb(colors::INK))
.text_color(rgb(colors::ink()))
.child(policy.name()),
)
.child(
div()
.text_xs()
.truncate()
.text_color(rgb(colors::MUTED))
.text_color(rgb(colors::muted()))
.child(policy.detail()),
),
),
@@ -441,15 +441,15 @@ fn diagnostics_icon(policy: DiagnosticsReportingPolicy) -> IconName {
fn policy_color(policy: HistoryRecordingPolicy) -> u32 {
match policy {
HistoryRecordingPolicy::Record => colors::SUCCESS,
HistoryRecordingPolicy::Pause => colors::PRIMARY,
HistoryRecordingPolicy::Record => colors::success(),
HistoryRecordingPolicy::Pause => colors::primary(),
}
}
fn diagnostics_policy_color(policy: DiagnosticsReportingPolicy) -> u32 {
match policy {
DiagnosticsReportingPolicy::Minimal => colors::SUCCESS,
DiagnosticsReportingPolicy::Paused => colors::PRIMARY,
DiagnosticsReportingPolicy::Minimal => colors::success(),
DiagnosticsReportingPolicy::Paused => colors::primary(),
}
}
@@ -462,11 +462,11 @@ fn diagnostics_policy_icon(policy: DiagnosticsReportingPolicy, selected: bool) -
}
fn history_policy_icon_color(policy: HistoryRecordingPolicy, selected: bool) -> u32 {
if selected { policy_color(policy) } else { colors::MUTED_SOFT }
if selected { policy_color(policy) } else { colors::muted_soft() }
}
fn diagnostics_policy_icon_color(policy: DiagnosticsReportingPolicy, selected: bool) -> u32 {
if selected { diagnostics_policy_color(policy) } else { colors::MUTED_SOFT }
if selected { diagnostics_policy_color(policy) } else { colors::muted_soft() }
}
fn history_policy_button_label(policy: HistoryRecordingPolicy, selected: bool) -> &'static str {
@@ -46,11 +46,11 @@ fn render_profiles_header(snapshot: &BrowserSnapshot, cx: &mut Context<ElyShell>
.flex()
.flex_col()
.gap_2()
.child(div().text_size(px(26.0)).text_color(rgb(colors::INK)).child("Profiles"))
.child(div().text_size(px(26.0)).text_color(rgb(colors::ink())).child("Profiles"))
.child(
div()
.text_sm()
.text_color(rgb(colors::MUTED))
.text_color(rgb(colors::muted()))
.child(format!("Active Space: {}", snapshot.active_space_name)),
),
)
@@ -62,7 +62,7 @@ fn render_profiles_header(snapshot: &BrowserSnapshot, cx: &mut Context<ElyShell>
.child(
div()
.text_xs()
.text_color(rgb(colors::MUTED))
.text_color(rgb(colors::muted()))
.child(format!("{} profiles", snapshot.profiles.len())),
)
.child(
@@ -90,7 +90,7 @@ fn render_profile_list(snapshot: &BrowserSnapshot, cx: &mut Context<ElyShell>) -
.flex_col()
.overflow_y_scrollbar()
.border_t_1()
.border_color(rgb(colors::HAIRLINE))
.border_color(rgb(colors::hairline()))
.children(snapshot.profiles.iter().enumerate().map(|(index, profile)| {
render_profile_row(
index,
@@ -119,7 +119,7 @@ fn render_profile_row(
.id(SharedString::from(format!("profile-{}", profile.id().as_str())))
.py_3()
.border_b_1()
.border_color(rgb(colors::HAIRLINE))
.border_color(rgb(colors::hairline()))
.flex()
.items_center()
.justify_between()
@@ -142,14 +142,14 @@ fn render_profile_row(
.text_sm()
.font_semibold()
.truncate()
.text_color(rgb(colors::INK))
.text_color(rgb(colors::ink()))
.child(profile.name().to_string()),
)
.child(
div()
.text_xs()
.truncate()
.text_color(rgb(colors::MUTED))
.text_color(rgb(colors::muted()))
.child(profile_detail_label(profile)),
),
),
@@ -184,7 +184,7 @@ fn profile_color_swatch(color_hex: u32) -> AnyElement {
.h(px(14.0))
.rounded_full()
.border_1()
.border_color(rgb(colors::HAIRLINE_STRONG))
.border_color(rgb(colors::hairline_strong()))
.bg(rgb(color_hex))
.into_any_element()
}
@@ -200,7 +200,7 @@ fn render_profile_default_action(
return div()
.text_xs()
.font_semibold()
.text_color(rgb(colors::SUCCESS))
.text_color(rgb(colors::success()))
.child("Default")
.into_any_element();
}
@@ -237,7 +237,7 @@ fn render_profile_action(
return div()
.text_xs()
.font_semibold()
.text_color(rgb(colors::SUCCESS))
.text_color(rgb(colors::success()))
.child("Active")
.into_any_element();
}
@@ -43,10 +43,10 @@ impl ElyShell {
return div()
.flex_1()
.border_t_1()
.border_color(rgb(colors::HAIRLINE))
.border_color(rgb(colors::hairline()))
.pt_5()
.text_sm()
.text_color(rgb(colors::MUTED))
.text_color(rgb(colors::muted()))
.child("Reading List is empty for this Profile.")
.into_any_element();
}
@@ -58,7 +58,7 @@ impl ElyShell {
.flex_col()
.overflow_y_scrollbar()
.border_t_1()
.border_color(rgb(colors::HAIRLINE))
.border_color(rgb(colors::hairline()))
.children(
snapshot
.reading_list
@@ -86,7 +86,7 @@ impl ElyShell {
.id(SharedString::from(format!("reading-{}", entry.id().as_str())))
.py_3()
.border_b_1()
.border_color(rgb(colors::HAIRLINE))
.border_color(rgb(colors::hairline()))
.flex()
.items_center()
.justify_between()
@@ -100,12 +100,12 @@ impl ElyShell {
.items_center()
.gap_3()
.cursor_pointer()
.hover(|style| style.bg(rgb(colors::CANVAS_SOFT)))
.hover(|style| style.bg(rgb(colors::canvas_soft())))
.active(|style| style.opacity(0.82))
.on_click(cx.listener(move |shell, _, window, cx| {
shell.open_url(url.clone(), window, cx);
}))
.child(div().text_color(rgb(colors::MUTED_SOFT)).child(IconName::Inbox))
.child(div().text_color(rgb(colors::muted_soft())).child(IconName::Inbox))
.child(
div()
.min_w_0()
@@ -117,21 +117,21 @@ impl ElyShell {
.text_sm()
.font_semibold()
.truncate()
.text_color(rgb(colors::INK))
.text_color(rgb(colors::ink()))
.child(entry.title().to_string()),
)
.child(
div()
.text_xs()
.truncate()
.text_color(rgb(colors::MUTED))
.text_color(rgb(colors::muted()))
.child(entry.display_url()),
)
.child(
div()
.text_xs()
.truncate()
.text_color(rgb(colors::MUTED_SOFT))
.text_color(rgb(colors::muted_soft()))
.child(added_at_label(entry.added_at())),
),
),
@@ -145,7 +145,7 @@ impl ElyShell {
.gap_2()
.text_xs()
.font_semibold()
.text_color(rgb(colors::MUTED))
.text_color(rgb(colors::muted()))
.when_some(space_name, |this, space_name| {
this.child(div().max_w(px(140.0)).truncate().child(space_name))
})
@@ -167,18 +167,20 @@ fn render_reading_list_header(snapshot: &BrowserSnapshot) -> AnyElement {
.flex()
.flex_col()
.gap_2()
.child(div().text_size(px(26.0)).text_color(rgb(colors::INK)).child("Reading List"))
.child(
div().text_size(px(26.0)).text_color(rgb(colors::ink())).child("Reading List"),
)
.child(
div()
.text_sm()
.text_color(rgb(colors::MUTED))
.text_color(rgb(colors::muted()))
.child(format!("Profile: {}", snapshot.active_profile_name)),
),
)
.child(
div()
.text_xs()
.text_color(rgb(colors::MUTED))
.text_color(rgb(colors::muted()))
.child(reading_list_count_label(snapshot.reading_list.len())),
)
.into_any_element()
@@ -42,12 +42,12 @@ fn render_search_header(snapshot: &BrowserSnapshot) -> AnyElement {
.flex()
.flex_col()
.gap_2()
.child(div().text_size(px(26.0)).text_color(rgb(colors::INK)).child("Search"))
.child(div().text_size(px(26.0)).text_color(rgb(colors::ink())).child("Search"))
.child(
div()
.text_sm()
.truncate()
.text_color(rgb(colors::MUTED))
.text_color(rgb(colors::muted()))
.child(format!("Profile: {}", snapshot.active_profile_name)),
),
)
@@ -58,7 +58,7 @@ fn render_search_header(snapshot: &BrowserSnapshot) -> AnyElement {
.gap_2()
.text_xs()
.font_semibold()
.text_color(rgb(colors::MUTED))
.text_color(rgb(colors::muted()))
.child(IconName::Search)
.child(snapshot.search_engine.name()),
)
@@ -69,8 +69,8 @@ fn render_search_summary(search_engine: SearchEngine, cx: &mut Context<ElyShell>
div()
.rounded_md()
.border_1()
.border_color(rgb(colors::HAIRLINE))
.bg(rgb(colors::CANVAS_SOFT))
.border_color(rgb(colors::hairline()))
.bg(rgb(colors::canvas_soft()))
.px_4()
.py_3()
.flex()
@@ -83,7 +83,7 @@ fn render_search_summary(search_engine: SearchEngine, cx: &mut Context<ElyShell>
.flex()
.items_center()
.gap_3()
.child(div().text_color(rgb(colors::PRIMARY)).child(IconName::Search))
.child(div().text_color(rgb(colors::primary())).child(IconName::Search))
.child(
div()
.min_w_0()
@@ -94,14 +94,14 @@ fn render_search_summary(search_engine: SearchEngine, cx: &mut Context<ElyShell>
div()
.text_sm()
.font_semibold()
.text_color(rgb(colors::INK))
.text_color(rgb(colors::ink()))
.child(search_engine.name()),
)
.child(
div()
.text_xs()
.truncate()
.text_color(rgb(colors::MUTED))
.text_color(rgb(colors::muted()))
.child(search_engine.host()),
),
),
@@ -115,7 +115,7 @@ fn render_search_summary(search_engine: SearchEngine, cx: &mut Context<ElyShell>
div()
.text_xs()
.font_semibold()
.text_color(rgb(colors::SUCCESS))
.text_color(rgb(colors::success()))
.child("Saved locally"),
)
.child(
@@ -141,7 +141,7 @@ fn render_search_engines(active_engine: SearchEngine, cx: &mut Context<ElyShell>
.flex_col()
.overflow_y_scrollbar()
.border_t_1()
.border_color(rgb(colors::HAIRLINE))
.border_color(rgb(colors::hairline()))
.children(SearchEngine::ALL.iter().copied().enumerate().map(|(index, search_engine)| {
render_search_engine_row(index, search_engine, active_engine, cx)
}))
@@ -159,7 +159,7 @@ fn render_search_engine_row(
div()
.py_3()
.border_b_1()
.border_color(rgb(colors::HAIRLINE))
.border_color(rgb(colors::hairline()))
.flex()
.items_center()
.justify_between()
@@ -186,14 +186,14 @@ fn render_search_engine_row(
.text_sm()
.font_semibold()
.truncate()
.text_color(rgb(colors::INK))
.text_color(rgb(colors::ink()))
.child(search_engine.name()),
)
.child(
div()
.text_xs()
.truncate()
.text_color(rgb(colors::MUTED))
.text_color(rgb(colors::muted()))
.child(search_engine.host()),
),
),
@@ -217,7 +217,7 @@ fn search_engine_icon(selected: bool) -> IconName {
}
fn search_engine_icon_color(selected: bool) -> u32 {
if selected { colors::PRIMARY } else { colors::MUTED_SOFT }
if selected { colors::primary() } else { colors::muted_soft() }
}
fn search_engine_button_label(selected: bool) -> &'static str {
@@ -63,12 +63,12 @@ fn render_shortcuts_header(
.flex()
.flex_col()
.gap_2()
.child(div().text_size(px(26.0)).text_color(rgb(colors::INK)).child("Shortcuts"))
.child(div().text_size(px(26.0)).text_color(rgb(colors::ink())).child("Shortcuts"))
.child(
div()
.text_sm()
.truncate()
.text_color(rgb(colors::MUTED))
.text_color(rgb(colors::muted()))
.child(format!("Profile: {}", snapshot.active_profile_name)),
),
)
@@ -116,8 +116,8 @@ fn render_shortcuts_header(
fn render_shortcut_file_message(notice: Option<&str>, error: Option<&str>) -> AnyElement {
let Some((message, color, icon)) = error
.map(|message| (message, colors::ERROR, IconName::TriangleAlert))
.or_else(|| notice.map(|message| (message, colors::SUCCESS, IconName::CircleCheck)))
.map(|message| (message, colors::error(), IconName::TriangleAlert))
.or_else(|| notice.map(|message| (message, colors::success(), IconName::CircleCheck)))
else {
return div().hidden().into_any_element();
};
@@ -126,7 +126,7 @@ fn render_shortcut_file_message(notice: Option<&str>, error: Option<&str>) -> An
.rounded_md()
.border_1()
.border_color(rgb(color))
.bg(rgb(colors::CANVAS_SOFT))
.bg(rgb(colors::canvas_soft()))
.px_4()
.py_2()
.flex()
@@ -146,22 +146,22 @@ fn render_conflict_panel(conflicts: &[ShortcutConflict]) -> AnyElement {
IconName::CircleCheck,
"No shortcut conflicts",
"Every registered browser shortcut maps to a single action.",
colors::SUCCESS,
colors::success(),
)
} else {
(
IconName::TriangleAlert,
"Shortcut conflicts",
"Conflicting bindings need a new key before customization is enabled.",
colors::ERROR,
colors::error(),
)
};
div()
.rounded_md()
.border_1()
.border_color(rgb(colors::HAIRLINE))
.bg(rgb(colors::CANVAS_SOFT))
.border_color(rgb(colors::hairline()))
.bg(rgb(colors::canvas_soft()))
.px_4()
.py_3()
.flex()
@@ -185,10 +185,10 @@ fn render_conflict_panel(conflicts: &[ShortcutConflict]) -> AnyElement {
div()
.text_sm()
.font_semibold()
.text_color(rgb(colors::INK))
.text_color(rgb(colors::ink()))
.child(title),
)
.child(div().text_xs().text_color(rgb(colors::MUTED)).child(detail)),
.child(div().text_xs().text_color(rgb(colors::muted())).child(detail)),
),
)
.child(
@@ -212,7 +212,7 @@ fn render_shortcut_categories(
.flex_col()
.overflow_y_scrollbar()
.border_t_1()
.border_color(rgb(colors::HAIRLINE))
.border_color(rgb(colors::hairline()))
.children(
SHORTCUT_CATEGORIES
.iter()
@@ -246,7 +246,7 @@ fn render_category_header(category: &'static str) -> AnyElement {
.pb_2()
.text_xs()
.font_semibold()
.text_color(rgb(colors::MUTED))
.text_color(rgb(colors::muted()))
.child(category)
.into_any_element()
}
@@ -263,7 +263,7 @@ fn render_shortcut_row(
div()
.py_3()
.border_b_1()
.border_color(rgb(colors::HAIRLINE))
.border_color(rgb(colors::hairline()))
.flex()
.items_center()
.justify_between()
@@ -290,14 +290,14 @@ fn render_shortcut_row(
.text_sm()
.font_semibold()
.truncate()
.text_color(rgb(colors::INK))
.text_color(rgb(colors::ink()))
.child(action.label()),
)
.child(
div()
.text_xs()
.truncate()
.text_color(rgb(colors::MUTED))
.text_color(rgb(colors::muted()))
.child(action.command().unwrap_or("Key binding only")),
),
),
@@ -326,11 +326,11 @@ fn shortcut_platform_label(
.flex()
.flex_col()
.gap_1()
.child(div().text_xs().text_color(rgb(colors::MUTED_SOFT)).child(platform.label()))
.child(div().text_xs().text_color(rgb(colors::muted_soft())).child(platform.label()))
.child(
div()
.font_semibold()
.text_color(rgb(colors::INK))
.text_color(rgb(colors::ink()))
.child(profile.display_bindings_for_action(action, platform)),
)
.into_any_element()
@@ -338,13 +338,13 @@ fn shortcut_platform_label(
fn shortcut_row_status(has_conflict: bool) -> AnyElement {
let (label, color) =
if has_conflict { ("Conflict", colors::ERROR) } else { ("Ready", colors::SUCCESS) };
if has_conflict { ("Conflict", colors::error()) } else { ("Ready", colors::success()) };
div().min_w(px(72.0)).font_semibold().text_color(rgb(color)).child(label).into_any_element()
}
fn shortcut_status_color(conflict_count: usize) -> u32 {
if conflict_count == 0 { colors::SUCCESS } else { colors::ERROR }
if conflict_count == 0 { colors::success() } else { colors::error() }
}
fn shortcut_status_icon(conflict_count: usize) -> IconName {
@@ -356,5 +356,5 @@ fn shortcut_row_icon(has_conflict: bool) -> IconName {
}
fn shortcut_row_icon_color(has_conflict: bool) -> u32 {
if has_conflict { colors::ERROR } else { colors::MUTED_SOFT }
if has_conflict { colors::error() } else { colors::muted_soft() }
}
@@ -52,7 +52,7 @@ impl ElyShell {
div()
.size_full()
.p_8()
.text_color(rgb(colors::ERROR))
.text_color(rgb(colors::error()))
.child("Active Space is unavailable."),
);
};
@@ -87,13 +87,16 @@ fn render_sidebar_tabs_header(
.flex_col()
.gap_2()
.child(
div().text_size(px(26.0)).text_color(rgb(colors::INK)).child("Sidebar & Tabs"),
div()
.text_size(px(26.0))
.text_color(rgb(colors::ink()))
.child("Sidebar & Tabs"),
)
.child(
div()
.text_sm()
.truncate()
.text_color(rgb(colors::MUTED))
.text_color(rgb(colors::muted()))
.child(format!("Space: {}", snapshot.active_space_name)),
),
)
@@ -109,7 +112,7 @@ fn render_sidebar_tabs_header(
.gap_2()
.text_xs()
.font_semibold()
.text_color(rgb(colors::MUTED))
.text_color(rgb(colors::muted()))
.child(IconName::LayoutDashboard)
.child(format!(
"{} / {} / {}",
@@ -143,7 +146,7 @@ fn render_sidebar_tabs_settings(
.min_h_0()
.overflow_y_scrollbar()
.border_t_1()
.border_color(rgb(colors::HAIRLINE))
.border_color(rgb(colors::hairline()))
.pt_5()
.flex()
.flex_col()
@@ -176,13 +179,13 @@ fn render_sidebar_width_section(active_space: &Space) -> AnyElement {
div()
.text_sm()
.font_semibold()
.text_color(rgb(colors::INK))
.text_color(rgb(colors::ink()))
.child("Sidebar Width"),
)
.child(
div()
.text_xs()
.text_color(rgb(colors::MUTED))
.text_color(rgb(colors::muted()))
.child("Current Space sidebar width."),
),
)
@@ -190,7 +193,7 @@ fn render_sidebar_width_section(active_space: &Space) -> AnyElement {
div()
.text_xs()
.font_semibold()
.text_color(rgb(colors::MUTED))
.text_color(rgb(colors::muted()))
.child(sidebar_width_label(active_space)),
),
)
@@ -218,13 +221,13 @@ fn render_archive_policy_section(active_space: &Space, cx: &mut Context<ElyShell
div()
.text_sm()
.font_semibold()
.text_color(rgb(colors::INK))
.text_color(rgb(colors::ink()))
.child("Auto Archive"),
)
.child(
div()
.text_xs()
.text_color(rgb(colors::MUTED))
.text_color(rgb(colors::muted()))
.child("Current Space policy for idle unpinned tabs."),
),
)
@@ -273,13 +276,13 @@ fn render_favorite_limit_section(
div()
.text_sm()
.font_semibold()
.text_color(rgb(colors::INK))
.text_color(rgb(colors::ink()))
.child("Favorite Limit"),
)
.child(
div()
.text_xs()
.text_color(rgb(colors::MUTED))
.text_color(rgb(colors::muted()))
.child("Maximum cross-space Favorites visible in the sidebar."),
),
)
@@ -287,7 +290,7 @@ fn render_favorite_limit_section(
div()
.text_xs()
.font_semibold()
.text_color(rgb(colors::MUTED))
.text_color(rgb(colors::muted()))
.child(favorite_limit.label()),
),
)
@@ -311,13 +314,13 @@ fn render_archive_policy_option(
) -> AnyElement {
let selected = active_space.archive_policy() == &option.policy;
let policy = option.policy.clone();
let border = if selected { colors::PRIMARY } else { colors::HAIRLINE };
let border = if selected { colors::primary() } else { colors::hairline() };
div()
.rounded_md()
.border_1()
.border_color(rgb(border))
.bg(rgb(colors::CANVAS_SOFT))
.bg(rgb(colors::canvas_soft()))
.px_4()
.py_3()
.flex()
@@ -343,14 +346,14 @@ fn render_archive_policy_option(
div()
.text_sm()
.font_semibold()
.text_color(rgb(colors::INK))
.text_color(rgb(colors::ink()))
.child(option.label),
)
.child(
div()
.text_xs()
.truncate()
.text_color(rgb(colors::MUTED))
.text_color(rgb(colors::muted()))
.child(option.detail),
),
),
@@ -376,13 +379,13 @@ fn render_favorite_limit_option(
cx: &mut Context<ElyShell>,
) -> AnyElement {
let selected = limit == active_limit;
let border = if selected { colors::PRIMARY } else { colors::HAIRLINE };
let border = if selected { colors::primary() } else { colors::hairline() };
div()
.rounded_md()
.border_1()
.border_color(rgb(border))
.bg(rgb(colors::CANVAS_SOFT))
.bg(rgb(colors::canvas_soft()))
.px_4()
.py_3()
.flex()
@@ -408,14 +411,14 @@ fn render_favorite_limit_option(
div()
.text_sm()
.font_semibold()
.text_color(rgb(colors::INK))
.text_color(rgb(colors::ink()))
.child(limit.label()),
)
.child(
div()
.text_xs()
.truncate()
.text_color(rgb(colors::MUTED))
.text_color(rgb(colors::muted()))
.child(limit.detail()),
),
),
@@ -449,5 +452,5 @@ fn policy_icon(selected: bool) -> IconName {
}
fn policy_icon_color(selected: bool) -> u32 {
if selected { colors::PRIMARY } else { colors::MUTED }
if selected { colors::primary() } else { colors::muted() }
}
@@ -42,19 +42,19 @@ fn render_missing_tab() -> AnyElement {
div()
.rounded_md()
.border_1()
.border_color(rgb(colors::HAIRLINE))
.bg(rgb(colors::CANVAS_SOFT))
.border_color(rgb(colors::hairline()))
.bg(rgb(colors::canvas_soft()))
.px_4()
.py_3()
.flex()
.items_center()
.gap_3()
.child(div().text_color(rgb(colors::ERROR)).child(IconName::TriangleAlert))
.child(div().text_color(rgb(colors::error())).child(IconName::TriangleAlert))
.child(
div()
.text_sm()
.font_semibold()
.text_color(rgb(colors::INK))
.text_color(rgb(colors::ink()))
.child("Active tab is unavailable."),
)
.into_any_element()
@@ -79,10 +79,10 @@ fn render_compatibility_header(
.child(
div()
.text_size(px(26.0))
.text_color(rgb(colors::INK))
.text_color(rgb(colors::ink()))
.child("Site Compatibility"),
)
.child(div().text_sm().truncate().text_color(rgb(colors::MUTED)).child(format!(
.child(div().text_sm().truncate().text_color(rgb(colors::muted())).child(format!(
"{} / {}",
snapshot.active_profile_name,
diagnostic_url_scope(active_tab)
@@ -100,7 +100,7 @@ fn render_compatibility_header(
.gap_2()
.text_xs()
.font_semibold()
.text_color(rgb(colors::MUTED))
.text_color(rgb(colors::muted()))
.child(IconName::Inspector)
.child("Diagnostics"),
)
@@ -119,39 +119,39 @@ fn render_compatibility_summary(
"Current page is ready",
"Diagnostics omit URL path and query before copying.",
IconName::CircleCheck,
colors::SUCCESS,
colors::success(),
),
TabState::Loading => (
"Current page is loading",
"Capture diagnostics after the page reaches a stable state.",
IconName::LoaderCircle,
colors::PRIMARY,
colors::primary(),
),
TabState::Crashed => (
"Current page crashed",
"The copied report includes tab state and profile-scoped permissions.",
IconName::TriangleAlert,
colors::ERROR,
colors::error(),
),
TabState::Discarded => (
"Current page is sleeping",
"Wake the tab to refresh Servo rendering details.",
IconName::EyeOff,
colors::MUTED,
colors::muted(),
),
TabState::Archived => (
"Current page is archived",
"Restore the tab to refresh Servo rendering details.",
IconName::Folder,
colors::MUTED,
colors::muted(),
),
};
div()
.rounded_md()
.border_1()
.border_color(rgb(colors::HAIRLINE))
.bg(rgb(colors::CANVAS_SOFT))
.border_color(rgb(colors::hairline()))
.bg(rgb(colors::canvas_soft()))
.px_4()
.py_3()
.flex()
@@ -175,11 +175,15 @@ fn render_compatibility_summary(
div()
.text_sm()
.font_semibold()
.text_color(rgb(colors::INK))
.text_color(rgb(colors::ink()))
.child(title),
)
.child(
div().text_xs().truncate().text_color(rgb(colors::MUTED)).child(detail),
div()
.text_xs()
.truncate()
.text_color(rgb(colors::muted()))
.child(detail),
),
),
)
@@ -192,12 +196,12 @@ fn render_compatibility_summary(
.font_semibold()
.child(
div()
.text_color(rgb(colors::MUTED))
.text_color(rgb(colors::muted()))
.child(format!("{} permissions", site_permission_count(snapshot, origin))),
)
.child(
div()
.text_color(rgb(colors::MUTED))
.text_color(rgb(colors::muted()))
.child(format!("{} audits", site_permission_audit_count(snapshot, origin))),
),
)
@@ -216,7 +220,7 @@ fn render_compatibility_rows(
.flex_col()
.overflow_y_scrollbar()
.border_t_1()
.border_color(rgb(colors::HAIRLINE))
.border_color(rgb(colors::hairline()))
.child(compatibility_row(
IconName::Globe,
"URL Scope",
@@ -281,7 +285,7 @@ fn compatibility_row(
div()
.py_3()
.border_b_1()
.border_color(rgb(colors::HAIRLINE))
.border_color(rgb(colors::hairline()))
.flex()
.items_center()
.justify_between()
@@ -292,7 +296,7 @@ fn compatibility_row(
.flex()
.items_center()
.gap_3()
.child(div().text_color(rgb(colors::MUTED_SOFT)).child(icon))
.child(div().text_color(rgb(colors::muted_soft())).child(icon))
.child(
div()
.min_w_0()
@@ -304,11 +308,15 @@ fn compatibility_row(
.text_sm()
.font_semibold()
.truncate()
.text_color(rgb(colors::INK))
.text_color(rgb(colors::ink()))
.child(label),
)
.child(
div().text_xs().truncate().text_color(rgb(colors::MUTED)).child(detail),
div()
.text_xs()
.truncate()
.text_color(rgb(colors::muted()))
.child(detail),
),
),
)
@@ -318,7 +326,7 @@ fn compatibility_row(
.truncate()
.text_sm()
.font_semibold()
.text_color(rgb(colors::INK))
.text_color(rgb(colors::ink()))
.child(value),
)
.into_any_element()
@@ -51,14 +51,14 @@ fn render_site_permissions_header(snapshot: &BrowserSnapshot) -> AnyElement {
.child(
div()
.text_size(px(26.0))
.text_color(rgb(colors::INK))
.text_color(rgb(colors::ink()))
.child("Site Permissions"),
)
.child(
div()
.text_sm()
.truncate()
.text_color(rgb(colors::MUTED))
.text_color(rgb(colors::muted()))
.child(format!("Profile: {}", snapshot.active_profile_name)),
),
)
@@ -69,7 +69,7 @@ fn render_site_permissions_header(snapshot: &BrowserSnapshot) -> AnyElement {
.gap_2()
.text_xs()
.font_semibold()
.text_color(rgb(colors::MUTED))
.text_color(rgb(colors::muted()))
.child(IconName::Globe)
.child("Profile scoped"),
)
@@ -80,7 +80,7 @@ fn render_site_permissions_summary(snapshot: &BrowserSnapshot) -> AnyElement {
div()
.border_t_1()
.border_b_1()
.border_color(rgb(colors::HAIRLINE))
.border_color(rgb(colors::hairline()))
.py_3()
.flex()
.items_center()
@@ -101,9 +101,9 @@ fn site_permission_metric(label: &'static str, value: usize) -> AnyElement {
.flex()
.flex_col()
.gap_1()
.child(div().text_xs().text_color(rgb(colors::MUTED)).child(label))
.child(div().text_xs().text_color(rgb(colors::muted())).child(label))
.child(
div().text_sm().font_semibold().text_color(rgb(colors::INK)).child(value.to_string()),
div().text_sm().font_semibold().text_color(rgb(colors::ink())).child(value.to_string()),
)
.into_any_element()
}
@@ -129,7 +129,7 @@ fn render_site_permissions_controls(
.child(
div()
.text_sm()
.text_color(rgb(colors::MUTED))
.text_color(rgb(colors::muted()))
.child("Clear all configured permissions for this Profile."),
)
.child(
@@ -149,8 +149,8 @@ fn render_clear_confirmation(cx: &mut Context<ElyShell>) -> AnyElement {
div()
.rounded_md()
.border_1()
.border_color(rgb(colors::ERROR))
.bg(rgb(colors::CANVAS_SOFT))
.border_color(rgb(colors::error()))
.bg(rgb(colors::canvas_soft()))
.px_4()
.py_3()
.flex()
@@ -167,13 +167,13 @@ fn render_clear_confirmation(cx: &mut Context<ElyShell>) -> AnyElement {
div()
.text_sm()
.font_semibold()
.text_color(rgb(colors::INK))
.text_color(rgb(colors::ink()))
.child("Confirm permission clearing"),
)
.child(
div()
.text_xs()
.text_color(rgb(colors::MUTED))
.text_color(rgb(colors::muted()))
.child("Each cleared permission records a local audit event."),
),
)
@@ -212,10 +212,10 @@ fn render_site_permissions_list(
return div()
.flex_1()
.border_t_1()
.border_color(rgb(colors::HAIRLINE))
.border_color(rgb(colors::hairline()))
.pt_5()
.text_sm()
.text_color(rgb(colors::MUTED))
.text_color(rgb(colors::muted()))
.child("No site permissions are configured for this Profile.")
.into_any_element();
}
@@ -227,7 +227,7 @@ fn render_site_permissions_list(
.flex_col()
.overflow_y_scrollbar()
.border_t_1()
.border_color(rgb(colors::HAIRLINE))
.border_color(rgb(colors::hairline()))
.children(
snapshot
.site_permissions
@@ -250,7 +250,7 @@ fn render_site_permission_entry(
div()
.py_3()
.border_b_1()
.border_color(rgb(colors::HAIRLINE))
.border_color(rgb(colors::hairline()))
.flex()
.items_center()
.justify_between()
@@ -277,10 +277,10 @@ fn render_site_permission_entry(
.text_sm()
.font_semibold()
.truncate()
.text_color(rgb(colors::INK))
.text_color(rgb(colors::ink()))
.child(entry.origin().as_str().to_string()),
)
.child(div().text_xs().truncate().text_color(rgb(colors::MUTED)).child(
.child(div().text_xs().truncate().text_color(rgb(colors::muted())).child(
format!("{} - {}", entry.feature().label(), entry.decision().label()),
)),
),
@@ -325,8 +325,10 @@ fn site_settings_route(origin: &SiteOrigin) -> String {
fn permission_decision_color(decision: SitePermissionDecision) -> u32 {
match decision {
SitePermissionDecision::AllowOnce | SitePermissionDecision::AllowAlways => colors::SUCCESS,
SitePermissionDecision::DenyAlways => colors::ERROR,
SitePermissionDecision::AllowOnce | SitePermissionDecision::AllowAlways => {
colors::success()
}
SitePermissionDecision::DenyAlways => colors::error(),
}
}
@@ -61,9 +61,9 @@ fn render_site_settings_header(snapshot: &BrowserSnapshot, origin: &SiteOrigin)
.flex_col()
.gap_2()
.child(
div().text_size(px(26.0)).text_color(rgb(colors::INK)).child("Site Settings"),
div().text_size(px(26.0)).text_color(rgb(colors::ink())).child("Site Settings"),
)
.child(div().text_sm().truncate().text_color(rgb(colors::MUTED)).child(format!(
.child(div().text_sm().truncate().text_color(rgb(colors::muted())).child(format!(
"{} / {}",
snapshot.active_profile_name,
origin.as_str()
@@ -76,7 +76,7 @@ fn render_site_settings_header(snapshot: &BrowserSnapshot, origin: &SiteOrigin)
.gap_2()
.text_xs()
.font_semibold()
.text_color(rgb(colors::MUTED))
.text_color(rgb(colors::muted()))
.child(IconName::Globe)
.child("Profile scoped"),
)
@@ -87,7 +87,7 @@ fn render_site_permission_summary(snapshot: &BrowserSnapshot, origin: &SiteOrigi
div()
.border_t_1()
.border_b_1()
.border_color(rgb(colors::HAIRLINE))
.border_color(rgb(colors::hairline()))
.py_3()
.flex()
.items_center()
@@ -108,9 +108,9 @@ fn site_metric(label: &'static str, value: usize) -> AnyElement {
.flex()
.flex_col()
.gap_1()
.child(div().text_xs().text_color(rgb(colors::MUTED)).child(label))
.child(div().text_xs().text_color(rgb(colors::muted())).child(label))
.child(
div().text_sm().font_semibold().text_color(rgb(colors::INK)).child(value.to_string()),
div().text_sm().font_semibold().text_color(rgb(colors::ink())).child(value.to_string()),
)
.into_any_element()
}
@@ -126,7 +126,9 @@ fn render_site_permission_rows(
.flex()
.flex_col()
.gap_3()
.child(div().text_xs().font_semibold().text_color(rgb(colors::MUTED)).child("Permissions"))
.child(
div().text_xs().font_semibold().text_color(rgb(colors::muted())).child("Permissions"),
)
.child(div().flex_1().min_h_0().flex().flex_col().overflow_y_scrollbar().children(
SitePermissionFeature::all().iter().copied().enumerate().map(|(index, feature)| {
render_site_permission_row(snapshot, origin, index, feature, cx)
@@ -144,13 +146,13 @@ fn render_site_permission_row(
) -> AnyElement {
let decision = decision_for(snapshot, origin, feature);
let status = decision.map_or("Ask", |decision| decision.label());
let status_color = decision.map_or(colors::MUTED, decision_color);
let status_color = decision.map_or(colors::muted(), decision_color);
let button_base = index * 4;
div()
.py_3()
.border_b_1()
.border_color(rgb(colors::HAIRLINE))
.border_color(rgb(colors::hairline()))
.flex()
.items_center()
.justify_between()
@@ -173,13 +175,13 @@ fn render_site_permission_row(
.text_sm()
.font_semibold()
.truncate()
.text_color(rgb(colors::INK))
.text_color(rgb(colors::ink()))
.child(feature.label()),
)
.child(
div()
.text_xs()
.text_color(rgb(colors::MUTED))
.text_color(rgb(colors::muted()))
.child(feature_scope_label(feature)),
),
),
@@ -295,7 +297,7 @@ fn render_site_permission_audit(snapshot: &BrowserSnapshot, origin: &SiteOrigin)
.flex()
.flex_col()
.gap_2()
.child(div().text_xs().font_semibold().text_color(rgb(colors::MUTED)).child("Audit"))
.child(div().text_xs().font_semibold().text_color(rgb(colors::muted())).child("Audit"))
.children(events.into_iter().map(render_audit_row))
.into_any_element()
}
@@ -304,18 +306,18 @@ fn render_audit_row(event: &SitePermissionAuditEvent) -> AnyElement {
div()
.py_2()
.border_b_1()
.border_color(rgb(colors::HAIRLINE))
.border_color(rgb(colors::hairline()))
.flex()
.items_center()
.justify_between()
.gap_3()
.text_xs()
.child(div().min_w_0().truncate().text_color(rgb(colors::BODY)).child(format!(
.child(div().min_w_0().truncate().text_color(rgb(colors::body())).child(format!(
"{} - {}",
event.feature().label(),
audit_action_label(event.action())
)))
.child(div().text_color(rgb(colors::MUTED)).child("Local audit"))
.child(div().text_color(rgb(colors::muted())).child("Local audit"))
.into_any_element()
}
@@ -331,12 +333,12 @@ fn render_invalid_site_route() -> AnyElement {
.flex_col()
.gap_2()
.child(
div().text_size(px(26.0)).text_color(rgb(colors::INK)).child("Site Settings"),
div().text_size(px(26.0)).text_color(rgb(colors::ink())).child("Site Settings"),
)
.child(
div()
.text_sm()
.text_color(rgb(colors::MUTED))
.text_color(rgb(colors::muted()))
.child("Site settings require an http or https origin."),
),
)
@@ -389,8 +391,10 @@ fn audit_count(snapshot: &BrowserSnapshot, origin: &SiteOrigin) -> usize {
fn decision_color(decision: SitePermissionDecision) -> u32 {
match decision {
SitePermissionDecision::AllowOnce | SitePermissionDecision::AllowAlways => colors::SUCCESS,
SitePermissionDecision::DenyAlways => colors::ERROR,
SitePermissionDecision::AllowOnce | SitePermissionDecision::AllowAlways => {
colors::success()
}
SitePermissionDecision::DenyAlways => colors::error(),
}
}
@@ -41,7 +41,7 @@ fn render_sleep_content(
div()
.border_t_1()
.border_b_1()
.border_color(rgb(colors::HAIRLINE))
.border_color(rgb(colors::hairline()))
.py_4()
.flex()
.flex_col()
@@ -62,7 +62,7 @@ fn render_sleep_content(
.items_center()
.gap_3()
.text_sm()
.text_color(rgb(colors::MUTED))
.text_color(rgb(colors::muted()))
.child(IconName::CircleCheck)
.child("This tab is sleeping. Restore wakes the tab and keeps its saved context."),
)
@@ -102,7 +102,7 @@ fn render_sleep_header(tab: &BrowserTab, cx: &mut Context<ElyShell>) -> AnyEleme
.items_center()
.gap_3()
.text_size(px(26.0))
.text_color(rgb(colors::INK))
.text_color(rgb(colors::ink()))
.child(IconName::CircleCheck)
.child("Sleeping Tab"),
)
@@ -110,7 +110,7 @@ fn render_sleep_header(tab: &BrowserTab, cx: &mut Context<ElyShell>) -> AnyEleme
div()
.text_sm()
.truncate()
.text_color(rgb(colors::MUTED))
.text_color(rgb(colors::muted()))
.child(format!("Sleeping {}", tab.display_url())),
),
)
@@ -145,7 +145,7 @@ fn render_space_switch_action(
return div()
.text_xs()
.font_semibold()
.text_color(rgb(colors::SUCCESS))
.text_color(rgb(colors::success()))
.child("Active")
.into_any_element();
}
@@ -52,12 +52,12 @@ fn render_spaces_header(snapshot: &BrowserSnapshot, cx: &mut Context<ElyShell>)
.flex()
.flex_col()
.gap_2()
.child(div().text_size(px(26.0)).text_color(rgb(colors::INK)).child("Spaces"))
.child(div().text_size(px(26.0)).text_color(rgb(colors::ink())).child("Spaces"))
.child(
div()
.text_sm()
.truncate()
.text_color(rgb(colors::MUTED))
.text_color(rgb(colors::muted()))
.child(format!("Profile: {}", snapshot.active_profile_name)),
),
)
@@ -103,7 +103,7 @@ fn render_spaces_header(snapshot: &BrowserSnapshot, cx: &mut Context<ElyShell>)
.gap_2()
.text_xs()
.font_semibold()
.text_color(rgb(colors::MUTED))
.text_color(rgb(colors::muted()))
.child(IconName::GalleryVerticalEnd)
.child(format!("{} spaces", snapshot.spaces.len())),
),
@@ -113,9 +113,9 @@ fn render_spaces_header(snapshot: &BrowserSnapshot, cx: &mut Context<ElyShell>)
fn render_space_file_message(notice: Option<&str>, error: Option<&str>) -> AnyElement {
let (message, color, icon) = if let Some(error) = error {
(error, colors::ERROR, IconName::TriangleAlert)
(error, colors::error(), IconName::TriangleAlert)
} else if let Some(notice) = notice {
(notice, colors::SUCCESS, IconName::CircleCheck)
(notice, colors::success(), IconName::CircleCheck)
} else {
return div().into_any_element();
};
@@ -143,11 +143,11 @@ fn render_active_space_summary(snapshot: &BrowserSnapshot) -> AnyElement {
return div()
.rounded_md()
.border_1()
.border_color(rgb(colors::ERROR))
.border_color(rgb(colors::error()))
.px_4()
.py_3()
.text_sm()
.text_color(rgb(colors::ERROR))
.text_color(rgb(colors::error()))
.child("Active Space is unavailable.")
.into_any_element();
};
@@ -155,8 +155,8 @@ fn render_active_space_summary(snapshot: &BrowserSnapshot) -> AnyElement {
div()
.rounded_md()
.border_1()
.border_color(rgb(colors::HAIRLINE))
.bg(rgb(colors::CANVAS_SOFT))
.border_color(rgb(colors::hairline()))
.bg(rgb(colors::canvas_soft()))
.px_4()
.py_3()
.flex()
@@ -174,19 +174,19 @@ fn render_active_space_summary(snapshot: &BrowserSnapshot) -> AnyElement {
div()
.text_sm()
.font_semibold()
.text_color(rgb(colors::INK))
.text_color(rgb(colors::ink()))
.child(active_space.name().to_string()),
)
.child(
div()
.text_xs()
.truncate()
.text_color(rgb(colors::MUTED))
.text_color(rgb(colors::muted()))
.child(space_detail_label(active_space, &snapshot.profiles)),
),
),
)
.child(div().text_xs().font_semibold().text_color(rgb(colors::SUCCESS)).child("Active"))
.child(div().text_xs().font_semibold().text_color(rgb(colors::success())).child("Active"))
.into_any_element()
}
@@ -202,7 +202,7 @@ fn render_spaces_list(
.flex_col()
.overflow_y_scrollbar()
.border_t_1()
.border_color(rgb(colors::HAIRLINE))
.border_color(rgb(colors::hairline()))
.children(snapshot.spaces.iter().enumerate().map(|(index, space)| {
render_space_row(
index,
@@ -232,7 +232,7 @@ fn render_space_row(
.id(SharedString::from(format!("settings-space-{}", space.id().as_str())))
.py_3()
.border_b_1()
.border_color(rgb(colors::HAIRLINE))
.border_color(rgb(colors::hairline()))
.flex()
.items_center()
.justify_between()
@@ -249,14 +249,14 @@ fn render_space_row(
.text_sm()
.font_semibold()
.truncate()
.text_color(rgb(colors::INK))
.text_color(rgb(colors::ink()))
.child(space.name().to_string()),
)
.child(
div()
.text_xs()
.truncate()
.text_color(rgb(colors::MUTED))
.text_color(rgb(colors::muted()))
.child(space_detail_label(space, &snapshot.profiles)),
),
),
@@ -282,7 +282,7 @@ fn render_trashed_spaces_list(
.flex_col()
.gap_2()
.border_t_1()
.border_color(rgb(colors::HAIRLINE))
.border_color(rgb(colors::hairline()))
.pt_3()
.child(render_trashed_spaces_header(expired_count, cx))
.children(
@@ -298,7 +298,7 @@ fn render_trashed_spaces_header(expired_count: usize, cx: &mut Context<ElyShell>
div()
.text_xs()
.font_semibold()
.text_color(rgb(colors::MUTED_SOFT))
.text_color(rgb(colors::muted_soft()))
.child("30 day retention")
.into_any_element()
} else {
@@ -323,7 +323,7 @@ fn render_trashed_spaces_header(expired_count: usize, cx: &mut Context<ElyShell>
div()
.text_xs()
.font_semibold()
.text_color(rgb(colors::MUTED))
.text_color(rgb(colors::muted()))
.child("Recently Trashed"),
)
.child(action)
@@ -361,14 +361,14 @@ fn render_trashed_space_row(
.text_sm()
.font_semibold()
.truncate()
.text_color(rgb(colors::INK))
.text_color(rgb(colors::ink()))
.child(trashed_space.space().name().to_string()),
)
.child(
div()
.text_xs()
.truncate()
.text_color(rgb(colors::MUTED))
.text_color(rgb(colors::muted()))
.child(trashed_space_detail_label(trashed_space, now)),
),
),
@@ -393,14 +393,14 @@ fn space_avatar(space: &Space) -> AnyElement {
.h(px(28.0))
.rounded_md()
.border_1()
.border_color(rgb(colors::HAIRLINE_STRONG))
.border_color(rgb(colors::hairline_strong()))
.bg(rgb(space.accent_hex()))
.flex()
.items_center()
.justify_center()
.text_xs()
.font_semibold()
.text_color(rgb(colors::CANVAS))
.text_color(rgb(colors::canvas()))
.child(space.icon().to_string())
.into_any_element()
}
+19 -19
View File
@@ -57,8 +57,8 @@ fn render_status_pill(snapshot: &BrowserSnapshot) -> AnyElement {
.rounded(px(999.0))
.bg(rgba(PILL_BG))
.text_size(px(11.0))
.text_color(rgb(colors::INK_3))
.child(div().text_color(rgb(colors::ACCENT)).child(IconName::Globe))
.text_color(rgb(colors::ink_3()))
.child(div().text_color(rgb(colors::accent())).child(IconName::Globe))
.child(format!(
"{SYNC_SERVICE_NAME} · {}",
connection_label(snapshot.sync_status.connection())
@@ -71,7 +71,7 @@ fn render_serif_headline() -> AnyElement {
.font_family(SERIF_FAMILY)
.text_size(px(46.0))
.font_weight(FontWeight(400.0))
.text_color(rgb(colors::INK))
.text_color(rgb(colors::ink()))
.child("Your tabs, on every device.")
.into_any_element()
}
@@ -80,7 +80,7 @@ fn render_intro_paragraph() -> AnyElement {
div()
.max_w(px(440.0))
.text_size(px(14.0))
.text_color(rgb(colors::INK_2))
.text_color(rgb(colors::ink_2()))
.child(
"ELY keeps tabs, workspaces, pinned items, and history mirrored across your \
devices encrypted in your hands and replayed at the edge.",
@@ -97,7 +97,7 @@ fn render_metrics_card(snapshot: &BrowserSnapshot, cx: &mut Context<ElyShell>) -
.flex()
.flex_col()
.gap(px(16.0))
.child(div().text_size(px(12.5)).text_color(rgb(colors::INK_3)).child("Local queue"))
.child(div().text_size(px(12.5)).text_color(rgb(colors::ink_3())).child("Local queue"))
.child(
div()
.grid()
@@ -106,12 +106,12 @@ fn render_metrics_card(snapshot: &BrowserSnapshot, cx: &mut Context<ElyShell>) -
.child(render_metric(
"Pending",
snapshot.sync_status.pending_objects(),
colors::INK,
colors::ink(),
))
.child(render_metric(
"Failed",
snapshot.sync_status.failed_objects(),
colors::ERROR,
colors::error(),
)),
)
.child(render_reset_button(cx))
@@ -123,7 +123,7 @@ fn render_metric(label: &'static str, value: usize, color: u32) -> AnyElement {
.flex()
.flex_col()
.gap_1()
.child(div().text_size(px(10.5)).text_color(rgb(colors::INK_4)).child(label))
.child(div().text_size(px(10.5)).text_color(rgb(colors::ink_4())).child(label))
.child(
div()
.text_size(px(20.0))
@@ -144,7 +144,7 @@ fn render_reset_button(cx: &mut Context<ElyShell>) -> AnyElement {
.px(px(12.0))
.py(px(7.0))
.rounded(px(8.0))
.bg(rgba(colors::ACCENT))
.bg(rgba(colors::accent()))
.text_size(px(12.0))
.font_weight(FontWeight(500.0))
.text_color(rgb(0xfff5e6))
@@ -163,7 +163,7 @@ fn render_reset_button(cx: &mut Context<ElyShell>) -> AnyElement {
.bg(rgba(BUTTON_BG))
.text_size(px(12.0))
.font_weight(FontWeight(500.0))
.text_color(rgb(colors::INK_2))
.text_color(rgb(colors::ink_2()))
.cursor_pointer()
.hover(|style| style.bg(rgba(BUTTON_BG_HOVER)))
.active(|style| style.opacity(0.85))
@@ -201,13 +201,13 @@ fn render_what_syncs_card(snapshot: &BrowserSnapshot, cx: &mut Context<ElyShell>
div()
.text_size(px(13.0))
.font_weight(FontWeight(500.0))
.text_color(rgb(colors::INK))
.text_color(rgb(colors::ink()))
.child("What syncs"),
)
.child(
div()
.text_size(px(11.0))
.text_color(rgb(colors::INK_3))
.text_color(rgb(colors::ink_3()))
.child(format!("{} kinds tracked", snapshot.sync_status.objects().len())),
),
)
@@ -235,7 +235,7 @@ fn render_sync_object_row(
.gap(px(10.0))
.py(px(8.0))
.border_b_1()
.border_color(rgba(colors::DIVIDER))
.border_color(rgba(colors::divider()))
.child(render_state_dot(status.state()))
.child(
div()
@@ -248,10 +248,10 @@ fn render_sync_object_row(
div()
.text_size(px(13.0))
.font_weight(FontWeight(500.0))
.text_color(rgb(colors::INK))
.text_color(rgb(colors::ink()))
.child(sync_object_kind_label(status.kind())),
)
.child(div().text_size(px(11.0)).text_color(rgb(colors::INK_4)).child(format!(
.child(div().text_size(px(11.0)).text_color(rgb(colors::ink_4())).child(format!(
"{} local · {}",
status.local_count(),
sync_object_state_label(status.state())
@@ -263,9 +263,9 @@ fn render_sync_object_row(
fn render_state_dot(state: SyncObjectState) -> AnyElement {
let color = match state {
SyncObjectState::LocalOnly => colors::INK_4,
SyncObjectState::Paused => colors::INK_5,
SyncObjectState::PrivacyControlled => colors::ACCENT,
SyncObjectState::LocalOnly => colors::ink_4(),
SyncObjectState::Paused => colors::ink_5(),
SyncObjectState::PrivacyControlled => colors::accent(),
};
div().size(px(8.0)).rounded_full().bg(rgb(color)).into_any_element()
@@ -279,7 +279,7 @@ fn render_policy_toggle(
let enabled = status.policy() == SyncObjectPolicy::Enabled;
let next_policy = if enabled { SyncObjectPolicy::Paused } else { SyncObjectPolicy::Enabled };
let kind = status.kind();
let track_color = if enabled { colors::ACCENT } else { 0x281e1426 };
let track_color = if enabled { colors::accent() } else { 0x281e1426 };
div()
.id(SharedString::from(format!("sync-policy-{index}")))
@@ -10,14 +10,14 @@ pub(super) fn tab_context_row(label: &'static str, value: String) -> AnyElement
.items_center()
.justify_between()
.gap_4()
.child(div().min_w(px(128.0)).text_xs().text_color(rgb(colors::MUTED)).child(label))
.child(div().min_w(px(128.0)).text_xs().text_color(rgb(colors::muted())).child(label))
.child(
div()
.min_w_0()
.text_sm()
.font_semibold()
.truncate()
.text_color(rgb(colors::INK))
.text_color(rgb(colors::ink()))
.child(value),
)
.into_any_element()
@@ -40,8 +40,10 @@ fn render_task_manager_header(snapshot: &BrowserSnapshot) -> AnyElement {
.flex()
.flex_col()
.gap_2()
.child(div().text_size(px(26.0)).text_color(rgb(colors::INK)).child("Task Manager"))
.child(div().text_sm().text_color(rgb(colors::MUTED)).child(format!(
.child(
div().text_size(px(26.0)).text_color(rgb(colors::ink())).child("Task Manager"),
)
.child(div().text_sm().text_color(rgb(colors::muted())).child(format!(
"{} / {}",
snapshot.active_profile_name, snapshot.active_space_name
))),
@@ -53,7 +55,7 @@ fn render_task_manager_header(snapshot: &BrowserSnapshot) -> AnyElement {
.gap_2()
.text_xs()
.font_semibold()
.text_color(rgb(colors::MUTED))
.text_color(rgb(colors::muted()))
.child(IconName::LayoutDashboard)
.child(format!("{} local tasks", task_count(snapshot))),
)
@@ -64,7 +66,7 @@ fn render_task_summary(snapshot: &BrowserSnapshot) -> AnyElement {
div()
.border_t_1()
.border_b_1()
.border_color(rgb(colors::HAIRLINE))
.border_color(rgb(colors::hairline()))
.py_3()
.flex()
.items_center()
@@ -85,9 +87,9 @@ fn task_metric(label: &'static str, value: usize) -> AnyElement {
.flex()
.flex_col()
.gap_1()
.child(div().text_xs().text_color(rgb(colors::MUTED)).child(label))
.child(div().text_xs().text_color(rgb(colors::muted())).child(label))
.child(
div().text_sm().font_semibold().text_color(rgb(colors::INK)).child(value.to_string()),
div().text_sm().font_semibold().text_color(rgb(colors::ink())).child(value.to_string()),
)
.into_any_element()
}
@@ -133,7 +135,7 @@ fn render_section_header(label: &'static str) -> AnyElement {
.pb_2()
.text_xs()
.font_semibold()
.text_color(rgb(colors::MUTED))
.text_color(rgb(colors::muted()))
.child(label)
.into_any_element()
}
@@ -174,7 +176,7 @@ fn render_plugin_task_row(
) -> AnyElement {
let status = if plugin.enabled_for_profile(profile_kind) { "Enabled" } else { "Disabled" };
let status_color =
if plugin.enabled_for_profile(profile_kind) { colors::SUCCESS } else { colors::MUTED };
if plugin.enabled_for_profile(profile_kind) { colors::success() } else { colors::muted() };
let detail = format!(
"{} permissions - {} contributions",
plugin.manifest().permissions().len(),
@@ -205,7 +207,7 @@ fn render_task_row(
.id(SharedString::from(id))
.py_3()
.border_b_1()
.border_color(rgb(colors::HAIRLINE))
.border_color(rgb(colors::hairline()))
.flex()
.items_center()
.justify_between()
@@ -216,7 +218,7 @@ fn render_task_row(
.flex()
.items_center()
.gap_3()
.child(div().text_color(rgb(colors::MUTED_SOFT)).child(icon))
.child(div().text_color(rgb(colors::muted_soft())).child(icon))
.child(
div()
.min_w_0()
@@ -228,11 +230,15 @@ fn render_task_row(
.text_sm()
.font_semibold()
.truncate()
.text_color(rgb(colors::INK))
.text_color(rgb(colors::ink()))
.child(title),
)
.child(
div().text_xs().truncate().text_color(rgb(colors::MUTED)).child(detail),
div()
.text_xs()
.truncate()
.text_color(rgb(colors::muted()))
.child(detail),
),
),
)
@@ -243,7 +249,7 @@ fn render_task_row(
.justify_end()
.gap_3()
.text_xs()
.child(div().min_w(px(86.0)).text_color(rgb(colors::MUTED)).child(scope))
.child(div().min_w(px(86.0)).text_color(rgb(colors::muted())).child(scope))
.child(
div()
.min_w(px(76.0))
@@ -271,18 +277,18 @@ fn tab_state_label(state: &TabState) -> &'static str {
fn tab_state_color(state: &TabState) -> u32 {
match state {
TabState::Loading => colors::PRIMARY,
TabState::Ready => colors::SUCCESS,
TabState::Crashed => colors::ERROR,
TabState::Discarded | TabState::Archived => colors::MUTED,
TabState::Loading => colors::primary(),
TabState::Ready => colors::success(),
TabState::Crashed => colors::error(),
TabState::Discarded | TabState::Archived => colors::muted(),
}
}
fn download_state_color(state: &DownloadState) -> u32 {
match state {
DownloadState::InProgress => colors::PRIMARY,
DownloadState::Completed => colors::SUCCESS,
DownloadState::Paused => colors::MUTED,
DownloadState::Cancelled | DownloadState::Failed => colors::ERROR,
DownloadState::InProgress => colors::primary(),
DownloadState::Completed => colors::success(),
DownloadState::Paused => colors::muted(),
DownloadState::Cancelled | DownloadState::Failed => colors::error(),
}
}
@@ -52,12 +52,12 @@ fn render_updates_header(snapshot: &BrowserSnapshot) -> AnyElement {
.flex()
.flex_col()
.gap_2()
.child(div().text_size(px(26.0)).text_color(rgb(colors::INK)).child("Updates"))
.child(div().text_size(px(26.0)).text_color(rgb(colors::ink())).child("Updates"))
.child(
div()
.text_sm()
.truncate()
.text_color(rgb(colors::MUTED))
.text_color(rgb(colors::muted()))
.child(format!("Profile: {}", snapshot.active_profile_name)),
),
)
@@ -68,7 +68,7 @@ fn render_updates_header(snapshot: &BrowserSnapshot) -> AnyElement {
.gap_2()
.text_xs()
.font_semibold()
.text_color(rgb(colors::MUTED))
.text_color(rgb(colors::muted()))
.child(IconName::LoaderCircle)
.child(format!("Build {BUILD_REVISION}")),
)
@@ -82,8 +82,8 @@ fn render_updates_summary(
div()
.rounded_md()
.border_1()
.border_color(rgb(colors::HAIRLINE))
.bg(rgb(colors::CANVAS_SOFT))
.border_color(rgb(colors::hairline()))
.bg(rgb(colors::canvas_soft()))
.px_4()
.py_3()
.flex()
@@ -96,7 +96,7 @@ fn render_updates_summary(
.flex()
.items_center()
.gap_3()
.child(div().text_color(rgb(colors::PRIMARY)).child(IconName::LoaderCircle))
.child(div().text_color(rgb(colors::primary())).child(IconName::LoaderCircle))
.child(
div()
.min_w_0()
@@ -107,14 +107,14 @@ fn render_updates_summary(
div()
.text_sm()
.font_semibold()
.text_color(rgb(colors::INK))
.text_color(rgb(colors::ink()))
.child("Release Manifest Contract"),
)
.child(
div()
.text_xs()
.truncate()
.text_color(rgb(colors::MUTED))
.text_color(rgb(colors::muted()))
.child(update_policy.detail()),
),
),
@@ -128,7 +128,7 @@ fn render_updates_summary(
div()
.text_xs()
.font_semibold()
.text_color(rgb(colors::SUCCESS))
.text_color(rgb(colors::success()))
.child(update_policy.name()),
)
.child(
@@ -154,7 +154,7 @@ fn render_update_policy_rows(
.flex()
.flex_col()
.border_t_1()
.border_color(rgb(colors::HAIRLINE))
.border_color(rgb(colors::hairline()))
.children(
UpdatePolicy::ALL
.iter()
@@ -176,7 +176,7 @@ fn render_update_policy_row(
div()
.py_3()
.border_b_1()
.border_color(rgb(colors::HAIRLINE))
.border_color(rgb(colors::hairline()))
.flex()
.items_center()
.justify_between()
@@ -201,14 +201,14 @@ fn render_update_policy_row(
.text_sm()
.font_semibold()
.truncate()
.text_color(rgb(colors::INK))
.text_color(rgb(colors::ink()))
.child(policy.name()),
)
.child(
div()
.text_xs()
.truncate()
.text_color(rgb(colors::MUTED))
.text_color(rgb(colors::muted()))
.child(policy.detail()),
),
),
@@ -235,7 +235,7 @@ fn render_update_contract_rows() -> AnyElement {
.flex_col()
.overflow_y_scrollbar()
.border_t_1()
.border_color(rgb(colors::HAIRLINE))
.border_color(rgb(colors::hairline()))
.child(update_row(IconName::Info, "Current Version", APP_VERSION, "Cargo package version"))
.child(update_row(IconName::GitHub, "Build Revision", BUILD_REVISION, "Git revision"))
.child(update_row(
@@ -270,7 +270,7 @@ fn policy_icon(selected: bool) -> IconName {
}
fn policy_icon_color(selected: bool) -> u32 {
if selected { colors::PRIMARY } else { colors::MUTED_SOFT }
if selected { colors::primary() } else { colors::muted_soft() }
}
fn policy_button_label(selected: bool) -> &'static str {
@@ -289,7 +289,7 @@ fn update_row(
div()
.py_3()
.border_b_1()
.border_color(rgb(colors::HAIRLINE))
.border_color(rgb(colors::hairline()))
.flex()
.items_center()
.justify_between()
@@ -300,7 +300,7 @@ fn update_row(
.flex()
.items_center()
.gap_3()
.child(div().text_color(rgb(colors::MUTED_SOFT)).child(icon))
.child(div().text_color(rgb(colors::muted_soft())).child(icon))
.child(
div()
.min_w_0()
@@ -312,11 +312,15 @@ fn update_row(
.text_sm()
.font_semibold()
.truncate()
.text_color(rgb(colors::INK))
.text_color(rgb(colors::ink()))
.child(label),
)
.child(
div().text_xs().truncate().text_color(rgb(colors::MUTED)).child(detail),
div()
.text_xs()
.truncate()
.text_color(rgb(colors::muted()))
.child(detail),
),
),
)
@@ -326,7 +330,7 @@ fn update_row(
.truncate()
.text_sm()
.font_semibold()
.text_color(rgb(colors::INK))
.text_color(rgb(colors::ink()))
.child(value),
)
.into_any_element()
+34 -3
View File
@@ -18,6 +18,19 @@ use super::{ElyShell, ShellState};
impl Render for ElyShell {
fn render(&mut self, window: &mut Window, cx: &mut Context<Self>) -> impl IntoElement {
// Resolve the active palette before anything else so every
// `colors::ink()` etc. call lower in the tree reads the right
// shade. `ThemeMode::System` defers to the OS preference via
// GPUI's `Window::appearance`; explicit Light / Dark wins.
let appearance = window.appearance();
let theme_mode = match &self.state {
ShellState::Ready(core) => {
core.snapshot().map(|s| s.appearance.theme_mode()).unwrap_or_default()
}
ShellState::StartupError(_) => ely_domain::ThemeMode::default(),
};
colors::set_mode(resolve_color_mode(theme_mode, appearance));
match &self.state {
ShellState::Ready(core) => match (core.snapshot(), core.active_tab().cloned()) {
(Ok(snapshot), Ok(active_tab)) => {
@@ -30,6 +43,24 @@ impl Render for ElyShell {
}
}
fn resolve_color_mode(
theme_mode: ely_domain::ThemeMode,
window_appearance: gpui::WindowAppearance,
) -> colors::Mode {
match theme_mode {
ely_domain::ThemeMode::Light => colors::Mode::Light,
ely_domain::ThemeMode::Dark => colors::Mode::Dark,
ely_domain::ThemeMode::System => match window_appearance {
gpui::WindowAppearance::Dark | gpui::WindowAppearance::VibrantDark => {
colors::Mode::Dark
}
gpui::WindowAppearance::Light | gpui::WindowAppearance::VibrantLight => {
colors::Mode::Light
}
},
}
}
impl ElyShell {
fn render_browser(
&mut self,
@@ -75,7 +106,7 @@ impl ElyShell {
.on_mouse_up(MouseButton::Left, cx.listener(Self::on_window_mouse_up))
.capture_key_down(cx.listener(Self::on_command_overlay_key_down))
.font_family(SANS_FAMILY)
.text_color(rgb(colors::INK))
.text_color(rgb(colors::ink()))
.child(render_wallpaper(snapshot.appearance.wallpaper()))
.child(
div()
@@ -333,8 +364,8 @@ const COLLAPSE_THRESHOLD_PX: f32 = spacing::SHELL_INSET + DEFAULT_SIDEBAR_WIDTH_
fn render_error(message: String) -> AnyElement {
div()
.size_full()
.bg(rgb(colors::CANVAS))
.text_color(rgb(colors::ERROR))
.bg(rgb(colors::canvas()))
.text_color(rgb(colors::error()))
.flex()
.items_center()
.justify_center()
+4 -4
View File
@@ -235,8 +235,8 @@ pub(super) fn render_command_bar_identity(
div()
.size(px(28.0))
.rounded(px(spacing::RADIUS_NAV))
.bg(rgb(colors::ACCENT))
.text_color(rgb(colors::SURFACE_CARD))
.bg(rgb(colors::accent()))
.text_color(rgb(colors::surface_card()))
.text_size(px(10.0))
.font_semibold()
.flex()
@@ -255,13 +255,13 @@ pub(super) fn render_command_bar_identity(
div()
.text_size(px(15.0))
.font_semibold()
.text_color(rgb(colors::INK))
.text_color(rgb(colors::ink()))
.child("ELY Browser"),
)
.child(
div()
.text_size(px(11.0))
.text_color(rgb(colors::INK_3))
.text_color(rgb(colors::ink_3()))
.child(snapshot.active_space_name.clone()),
)
.into_any_element()
+9 -9
View File
@@ -189,7 +189,7 @@ impl ElyShell {
let active = tab.id() == &snapshot.active_tab_id;
let tab_id = tab.id().clone();
let close_tab_id = tab.id().clone();
let border = if active { colors::ACCENT } else { colors::HAIRLINE_STRONG };
let border = if active { colors::accent() } else { colors::hairline_strong() };
let host = pane_host_label(tab);
let title = tab.title().to_string();
let secure = pane_url_is_secure(tab);
@@ -235,12 +235,12 @@ impl ElyShell {
.items_center()
.justify_center()
.rounded(px(10.0))
.bg(rgba(colors::GLASS_2))
.bg(rgba(colors::glass_2()))
.child(
div()
.text_xs()
.font_semibold()
.text_color(rgb(colors::MUTED))
.text_color(rgb(colors::muted()))
.child("Split Controls"),
)
.child(
@@ -252,7 +252,7 @@ impl ElyShell {
div()
.text_xs()
.font_semibold()
.text_color(rgb(colors::MUTED))
.text_color(rgb(colors::muted()))
.child("Layout"),
)
.child(self.render_split_axis_button(
@@ -368,7 +368,7 @@ impl ElyShell {
cx: &mut Context<Self>,
) -> Option<AnyElement> {
let first_tab_id = layout.panes().first()?.tab_id().clone();
let bg = if active { colors::GLASS_3 } else { 0x00000000 };
let bg = if active { colors::glass_3() } else { 0x00000000 };
Some(
div()
@@ -381,12 +381,12 @@ impl ElyShell {
.flex()
.items_center()
.cursor_pointer()
.hover(|style| style.bg(rgba(colors::GLASS_3)))
.hover(|style| style.bg(rgba(colors::glass_3())))
.active(|style| style.opacity(0.82))
.on_click(cx.listener(move |shell, _, window, cx| {
shell.select_tab(&first_tab_id, window, cx);
}))
.child(div().text_color(rgb(colors::ACCENT)).child(IconName::Frame))
.child(div().text_color(rgb(colors::accent())).child(IconName::Frame))
.child(
div()
.min_w_0()
@@ -398,13 +398,13 @@ impl ElyShell {
.text_size(px(13.0))
.font_weight(gpui::FontWeight(500.0))
.truncate()
.text_color(rgb(colors::INK))
.text_color(rgb(colors::ink()))
.child(layout.title().to_string()),
)
.child(
div()
.text_size(px(11.0))
.text_color(rgb(colors::INK_4))
.text_color(rgb(colors::ink_4()))
.child(format!("{} panes", layout.pane_count())),
),
)
+5 -5
View File
@@ -108,8 +108,8 @@ impl ElyShell {
cx: &mut Context<Self>,
) -> AnyElement {
let group_id = group.id().clone();
let background = if active { colors::SURFACE_CARD } else { colors::CANVAS };
let border = if active { colors::PRIMARY } else { colors::HAIRLINE };
let background = if active { colors::surface_card() } else { colors::canvas() };
let border = if active { colors::primary() } else { colors::hairline() };
let icon = if group.collapsed() { IconName::Folder } else { IconName::FolderOpen };
let state_label = if group.collapsed() { "Collapsed" } else { "Expanded" };
@@ -125,7 +125,7 @@ impl ElyShell {
.flex()
.items_center()
.cursor_pointer()
.hover(|style| style.bg(rgb(colors::SURFACE_CARD)))
.hover(|style| style.bg(rgb(colors::surface_card())))
.active(|style| style.opacity(0.82))
.on_click(cx.listener(move |shell, _, _, cx| {
shell.toggle_tab_group(&group_id, cx);
@@ -142,13 +142,13 @@ impl ElyShell {
.text_sm()
.font_semibold()
.truncate()
.text_color(rgb(colors::INK))
.text_color(rgb(colors::ink()))
.child(group.name().to_string()),
)
.child(
div()
.text_xs()
.text_color(rgb(colors::MUTED))
.text_color(rgb(colors::muted()))
.child(format!("{tab_count} tabs - {state_label}")),
),
)
+4 -2
View File
@@ -78,10 +78,12 @@ fn error_page(message: &str) -> impl IntoElement {
div()
.text_size(px(22.0))
.font_weight(gpui::FontWeight(400.0))
.text_color(rgb(colors::INK))
.text_color(rgb(colors::ink()))
.child("Page unavailable"),
)
.child(div().text_size(px(14.0)).text_color(rgb(colors::INK_3)).child(message.to_string()))
.child(
div().text_size(px(14.0)).text_color(rgb(colors::ink_3())).child(message.to_string()),
)
}
fn render_web_surface(
+211 -39
View File
@@ -1,46 +1,218 @@
// Ink scale — text hierarchy with warm undertones
pub const INK: u32 = 0x1d1c1a;
pub const INK_2: u32 = 0x3a3733;
pub const INK_3: u32 = 0x6b6660;
pub const INK_4: u32 = 0x9a948c;
pub const INK_5: u32 = 0xc8c2b8;
//! Theme-aware color tokens.
//!
//! Each token is a function (not a `const`) so the same call site can
//! resolve to the light or dark value depending on the current mode.
//! Mode lives in a thread-local that the GPUI render impl sets once
//! per frame via [`set_mode`]; the entire single-threaded render tree
//! reads the same value, so there is no per-element parameter to
//! thread through.
//!
//! Semantic accents (Accent, Violet, Rose, Mint) stay constant across
//! modes — their hue is the brand and looks correct against both warm
//! cream and warm graphite backdrops.
// Glass surfaces — semi-transparent whites (use with rgba)
pub const GLASS: u32 = 0xffffff9e; // 62% white
pub const GLASS_2: u32 = 0xffffffc7; // 78% white
pub const GLASS_3: u32 = 0xffffffeb; // 92% white
pub const TINT: u32 = 0xffffff6b; // 42% white
use std::cell::Cell;
// Stroke & divider — subtle borders (use with rgba)
pub const STROKE: u32 = 0x281e1414; // 8% warm dark
pub const STROKE_2: u32 = 0x281e140a; // 4% warm dark
pub const DIVIDER: u32 = 0x281e140f; // 6% warm dark
#[derive(Clone, Copy, Debug, Default, Eq, PartialEq)]
pub enum Mode {
#[default]
Light,
Dark,
}
// Accent — warm clay palette
pub const ACCENT: u32 = 0xc96442;
pub const ACCENT_LIGHT: u32 = 0xd97757;
pub const ACCENT_HOVER: u32 = 0xc9644214; // 8% opacity for row highlights
thread_local! {
static CURRENT_MODE: Cell<Mode> = const { Cell::new(Mode::Light) };
}
// Secondary accents
pub const VIOLET: u32 = 0x7c6cf7;
pub const ROSE: u32 = 0xec6a8e;
pub const MINT: u32 = 0x4fb59a;
/// Resolve the mode used by every subsequent [`Mode`]-keyed function
/// call on this thread. The Render impl calls this once at the top of
/// every frame so widgets that read e.g. [`ink`] return the right
/// shade without owning a `Mode` parameter.
pub fn set_mode(mode: Mode) {
CURRENT_MODE.with(|cell| cell.set(mode));
}
// Canvas backgrounds (opaque fallbacks)
pub const CANVAS: u32 = 0xf0eee9;
pub const CANVAS_SOFT: u32 = 0xfafaf7;
pub const SURFACE_CARD: u32 = 0xffffff;
#[must_use]
pub fn mode() -> Mode {
CURRENT_MODE.with(Cell::get)
}
// Semantic
pub const SUCCESS: u32 = 0x2f7d68;
pub const ERROR: u32 = 0xcf2d56;
#[must_use]
fn pick(light: u32, dark: u32) -> u32 {
match mode() {
Mode::Light => light,
Mode::Dark => dark,
}
}
// Legacy aliases — preserved for compatibility during migration
pub const PRIMARY: u32 = ACCENT;
pub const PRIMARY_ACTIVE: u32 = 0xb55a3c;
pub const BODY: u32 = INK_2;
pub const MUTED: u32 = INK_3;
pub const MUTED_SOFT: u32 = INK_4;
pub const HAIRLINE: u32 = 0xe6e5e0;
pub const HAIRLINE_STRONG: u32 = 0xcfcdc4;
pub const SURFACE_STRONG: u32 = 0xe6e5e0;
// Ink scale — text hierarchy with warm undertones. In dark mode the
// hierarchy inverts: brightest at the top, darkest at the bottom,
// keeping the same step contrast (~12 % luminance gaps) as the light
// scale so headings + secondary copy still pull the reader's eye in
// the right order.
#[must_use]
pub fn ink() -> u32 {
pick(0x1d1c1a, 0xf2efe9)
}
#[must_use]
pub fn ink_2() -> u32 {
pick(0x3a3733, 0xcfc8be)
}
#[must_use]
pub fn ink_3() -> u32 {
pick(0x6b6660, 0xa39b8e)
}
#[must_use]
pub fn ink_4() -> u32 {
pick(0x9a948c, 0x7c7568)
}
#[must_use]
pub fn ink_5() -> u32 {
pick(0xc8c2b8, 0x4f4942)
}
// Glass surfaces — semi-transparent panels. Dark mode swaps the white
// for warm-graphite so a translucent panel sits naturally on a dark
// wallpaper without bleaching the underlying gradient.
#[must_use]
pub fn glass() -> u32 {
pick(0xffffff9e, 0x1f1d1b9e)
}
#[must_use]
pub fn glass_2() -> u32 {
pick(0xffffffc7, 0x1f1d1bc7)
}
#[must_use]
pub fn glass_3() -> u32 {
pick(0xffffffeb, 0x1f1d1beb)
}
#[must_use]
pub fn tint() -> u32 {
pick(0xffffff6b, 0x1f1d1b6b)
}
// Stroke & divider — subtle borders. Dark mode uses warm-white at
// matching opacity so panels keep their inner highlight.
#[must_use]
pub fn stroke() -> u32 {
pick(0x281e1414, 0xf2efe914)
}
#[must_use]
pub fn stroke_2() -> u32 {
pick(0x281e140a, 0xf2efe90a)
}
#[must_use]
pub fn divider() -> u32 {
pick(0x281e140f, 0xf2efe90f)
}
#[must_use]
pub fn hairline() -> u32 {
pick(0xe6e5e0, 0x312d28)
}
#[must_use]
pub fn hairline_strong() -> u32 {
pick(0xcfcdc4, 0x49443c)
}
// Accent — warm clay palette. Stays constant across modes; the hue is
// the brand and reads correctly against both creamy + graphite
// backdrops with the same contrast ladder.
#[must_use]
pub fn accent() -> u32 {
0xc96442
}
#[must_use]
pub fn accent_light() -> u32 {
0xd97757
}
#[must_use]
pub fn accent_hover() -> u32 {
pick(0xc9644214, 0xc9644229)
}
// Secondary accents.
#[must_use]
pub fn violet() -> u32 {
0x7c6cf7
}
#[must_use]
pub fn rose() -> u32 {
0xec6a8e
}
#[must_use]
pub fn mint() -> u32 {
0x4fb59a
}
// Canvas backgrounds (opaque fallbacks for non-wallpaper surfaces).
// Dark canvas uses a warm graphite that holds up against the dark
// wallpapers without crushing contrast.
#[must_use]
pub fn canvas() -> u32 {
pick(0xf0eee9, 0x141312)
}
#[must_use]
pub fn canvas_soft() -> u32 {
pick(0xfafaf7, 0x1a1816)
}
#[must_use]
pub fn surface_card() -> u32 {
pick(0xffffff, 0x24211f)
}
// Semantic — same hue across modes, lightness shifted slightly in
// dark mode so the chip reads at the same legibility weight.
#[must_use]
pub fn success() -> u32 {
pick(0x2f7d68, 0x6cc8a8)
}
#[must_use]
pub fn error() -> u32 {
pick(0xcf2d56, 0xff7095)
}
// Legacy aliases — preserved during migration from the old constant
// surface. Internal call sites still reach for `colors::body()`,
// `colors::muted()`, etc., so keep the names available.
#[must_use]
pub fn primary() -> u32 {
accent()
}
#[must_use]
pub fn primary_active() -> u32 {
pick(0xb55a3c, 0xe2785a)
}
#[must_use]
pub fn body() -> u32 {
ink_2()
}
#[must_use]
pub fn muted() -> u32 {
ink_3()
}
#[must_use]
pub fn muted_soft() -> u32 {
ink_4()
}
#[must_use]
pub fn surface_strong() -> u32 {
hairline()
}
#[cfg(test)]
mod tests {
use super::{Mode, ink, mode, set_mode};
#[test]
fn mode_toggle_flips_ink() {
set_mode(Mode::Light);
let light = ink();
set_mode(Mode::Dark);
let dark = ink();
assert_ne!(light, dark, "dark ink must differ from light ink");
assert_eq!(mode(), Mode::Dark);
// Restore the default so subsequent tests on this thread aren't
// dragged into dark mode.
set_mode(Mode::Light);
}
}
-27
View File
@@ -2,30 +2,3 @@ pub mod colors;
pub mod motion;
pub mod spacing;
pub mod typography;
#[derive(Clone, Copy, Debug, Eq, PartialEq)]
pub struct Theme {
pub canvas: u32,
pub canvas_soft: u32,
pub surface: u32,
pub ink: u32,
pub body: u32,
pub muted: u32,
pub hairline: u32,
pub accent: u32,
pub success: u32,
pub error: u32,
}
pub const ELY_THEME: Theme = Theme {
canvas: colors::CANVAS,
canvas_soft: colors::CANVAS_SOFT,
surface: colors::SURFACE_CARD,
ink: colors::INK,
body: colors::INK_2,
muted: colors::INK_3,
hairline: colors::HAIRLINE,
accent: colors::ACCENT,
success: colors::SUCCESS,
error: colors::ERROR,
};