From 6b2578c3a88e04ac232801cd79bc33836b39583f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=9B=B7=E7=94=B5=E8=8A=BD=E8=A1=A3?= Date: Fri, 15 May 2026 19:50:38 -0400 Subject: [PATCH] Make every shell color token theme-aware MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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. --- .../src/shell/chrome/appearance_form.rs | 38 +-- .../shell/chrome/appearance_layout_cards.rs | 12 +- .../ely_app/src/shell/chrome/brand_glyph.rs | 4 +- .../src/shell/chrome/command_footer.rs | 8 +- .../src/shell/chrome/command_overlay.rs | 14 +- .../ely_app/src/shell/chrome/command_rows.rs | 14 +- .../src/shell/chrome/home/favorites.rs | 4 +- crates/ely_app/src/shell/chrome/home/hero.rs | 16 +- crates/ely_app/src/shell/chrome/home/recap.rs | 26 +- .../ely_app/src/shell/chrome/home/section.rs | 4 +- .../src/shell/chrome/plugin_detail_view.rs | 39 +-- .../src/shell/chrome/settings_layout.rs | 12 +- crates/ely_app/src/shell/chrome/sidebar.rs | 30 +-- .../src/shell/chrome/sidebar_chrome.rs | 26 +- .../src/shell/chrome/sidebar_header.rs | 26 +- crates/ely_app/src/shell/chrome/split_pane.rs | 20 +- crates/ely_app/src/shell/chrome/topbar.rs | 20 +- crates/ely_app/src/shell/chrome/wallpaper.rs | 35 ++- crates/ely_app/src/shell/internal_pages.rs | 28 +- .../ely_app/src/shell/internal_pages/about.rs | 22 +- .../src/shell/internal_pages/advanced.rs | 34 +-- .../src/shell/internal_pages/auth_callback.rs | 22 +- .../src/shell/internal_pages/bookmarks.rs | 46 ++-- .../ely_app/src/shell/internal_pages/crash.rs | 12 +- .../shell/internal_pages/download_settings.rs | 28 +- .../src/shell/internal_pages/downloads.rs | 44 +-- .../src/shell/internal_pages/general.rs | 30 ++- .../src/shell/internal_pages/history.rs | 57 ++-- .../ely_app/src/shell/internal_pages/notes.rs | 24 +- .../shell/internal_pages/notes_markdown.rs | 16 +- .../shell/internal_pages/plugin_catalog.rs | 40 +-- .../shell/internal_pages/plugin_details.rs | 8 +- .../internal_pages/plugin_editors_pick.rs | 10 +- .../src/shell/internal_pages/plugins.rs | 50 ++-- .../internal_pages/privacy_data_inventory.rs | 33 ++- .../shell/internal_pages/privacy_security.rs | 54 ++-- .../src/shell/internal_pages/profiles.rs | 20 +- .../src/shell/internal_pages/reading_list.rs | 28 +- .../src/shell/internal_pages/search.rs | 28 +- .../src/shell/internal_pages/shortcuts.rs | 42 +-- .../src/shell/internal_pages/sidebar_tabs.rs | 47 ++-- .../internal_pages/site_compatibility.rs | 56 ++-- .../site_permissions_settings.rs | 40 +-- .../src/shell/internal_pages/site_settings.rs | 42 +-- .../ely_app/src/shell/internal_pages/sleep.rs | 8 +- .../src/shell/internal_pages/space_actions.rs | 2 +- .../src/shell/internal_pages/spaces.rs | 46 ++-- .../ely_app/src/shell/internal_pages/sync.rs | 38 +-- .../src/shell/internal_pages/tab_context.rs | 4 +- .../src/shell/internal_pages/task_manager.rs | 48 ++-- .../src/shell/internal_pages/updates.rs | 44 +-- crates/ely_app/src/shell/render.rs | 37 ++- crates/ely_app/src/shell/sidebar.rs | 8 +- crates/ely_app/src/shell/splits.rs | 18 +- crates/ely_app/src/shell/tab_groups.rs | 10 +- crates/ely_app/src/shell/web_surface_view.rs | 6 +- crates/ely_design_system/src/colors.rs | 250 +++++++++++++++--- crates/ely_design_system/src/lib.rs | 27 -- 58 files changed, 1010 insertions(+), 745 deletions(-) diff --git a/crates/ely_app/src/shell/chrome/appearance_form.rs b/crates/ely_app/src/shell/chrome/appearance_form.rs index 534aec8..a2b32c8 100644 --- a/crates/ely_app/src/shell/chrome/appearance_form.rs +++ b/crates/ely_app/src/shell/chrome/appearance_form.rs @@ -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) -> 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) -> 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) -> 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() diff --git a/crates/ely_app/src/shell/chrome/appearance_layout_cards.rs b/crates/ely_app/src/shell/chrome/appearance_layout_cards.rs index d14a1de..d048c50 100644 --- a/crates/ely_app/src/shell/chrome/appearance_layout_cards.rs +++ b/crates/ely_app/src/shell/chrome/appearance_layout_cards.rs @@ -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() } diff --git a/crates/ely_app/src/shell/chrome/brand_glyph.rs b/crates/ely_app/src/shell/chrome/brand_glyph.rs index aa3c6c7..0e88c18 100644 --- a/crates/ely_app/src/shell/chrome/brand_glyph.rs +++ b/crates/ely_app/src/shell/chrome/brand_glyph.rs @@ -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() } diff --git a/crates/ely_app/src/shell/chrome/command_footer.rs b/crates/ely_app/src/shell/chrome/command_footer.rs index a2034d1..7bb1916 100644 --- a/crates/ely_app/src/shell/chrome/command_footer.rs +++ b/crates/ely_app/src/shell/chrome/command_footer.rs @@ -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() } diff --git a/crates/ely_app/src/shell/chrome/command_overlay.rs b/crates/ely_app/src/shell/chrome/command_overlay.rs index 526bc23..4de1ad8 100644 --- a/crates/ely_app/src/shell/chrome/command_overlay.rs +++ b/crates/ely_app/src/shell/chrome/command_overlay.rs @@ -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() } diff --git a/crates/ely_app/src/shell/chrome/command_rows.rs b/crates/ely_app/src/shell/chrome/command_rows.rs index 0a684c0..a89ca20 100644 --- a/crates/ely_app/src/shell/chrome/command_rows.rs +++ b/crates/ely_app/src/shell/chrome/command_rows.rs @@ -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() } diff --git a/crates/ely_app/src/shell/chrome/home/favorites.rs b/crates/ely_app/src/shell/chrome/home/favorites.rs index 5a78d4c..11e6502 100644 --- a/crates/ely_app/src/shell/chrome/home/favorites.rs +++ b/crates/ely_app/src/shell/chrome/home/favorites.rs @@ -70,7 +70,7 @@ fn render_favorite_tile(index: usize, tab: &BrowserTab, cx: &mut Context) -> 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| { diff --git a/crates/ely_app/src/shell/chrome/home/hero.rs b/crates/ely_app/src/shell/chrome/home/hero.rs index 39f76cf..f9b2459 100644 --- a/crates/ely_app/src/shell/chrome/home/hero.rs +++ b/crates/ely_app/src/shell/chrome/home/hero.rs @@ -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) -> 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) -> 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) -> 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) + '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() diff --git a/crates/ely_app/src/shell/chrome/home/recap.rs b/crates/ely_app/src/shell/chrome/home/recap.rs index 5dbbdc4..5b4836e 100644 --- a/crates/ely_app/src/shell/chrome/home/recap.rs +++ b/crates/ely_app/src/shell/chrome/home/recap.rs @@ -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) -> 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); })) diff --git a/crates/ely_app/src/shell/chrome/home/section.rs b/crates/ely_app/src/shell/chrome/home/section.rs index 4a462f2..e48f906 100644 --- a/crates/ely_app/src/shell/chrome/home/section.rs +++ b/crates/ely_app/src/shell/chrome/home/section.rs @@ -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() } diff --git a/crates/ely_app/src/shell/chrome/plugin_detail_view.rs b/crates/ely_app/src/shell/chrome/plugin_detail_view.rs index 4e4d039..c6d15d8 100644 --- a/crates/ely_app/src/shell/chrome/plugin_detail_view.rs +++ b/crates/ely_app/src/shell/chrome/plugin_detail_view.rs @@ -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)), ), ) diff --git a/crates/ely_app/src/shell/chrome/settings_layout.rs b/crates/ely_app/src/shell/chrome/settings_layout.rs index 903f5a2..9d3b79a 100644 --- a/crates/ely_app/src/shell/chrome/settings_layout.rs +++ b/crates/ely_app/src/shell/chrome/settings_layout.rs @@ -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() } diff --git a/crates/ely_app/src/shell/chrome/sidebar.rs b/crates/ely_app/src/shell/chrome/sidebar.rs index 87e49ea..47cf22c 100644 --- a/crates/ely_app/src/shell/chrome/sidebar.rs +++ b/crates/ely_app/src/shell/chrome/sidebar.rs @@ -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) diff --git a/crates/ely_app/src/shell/chrome/sidebar_chrome.rs b/crates/ely_app/src/shell/chrome/sidebar_chrome.rs index b5a011a..c4090c3 100644 --- a/crates/ely_app/src/shell/chrome/sidebar_chrome.rs +++ b/crates/ely_app/src/shell/chrome/sidebar_chrome.rs @@ -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, } } diff --git a/crates/ely_app/src/shell/chrome/sidebar_header.rs b/crates/ely_app/src/shell/chrome/sidebar_header.rs index e05a31f..084b380 100644 --- a/crates/ely_app/src/shell/chrome/sidebar_header.rs +++ b/crates/ely_app/src/shell/chrome/sidebar_header.rs @@ -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) -> 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) -> 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) -> 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); diff --git a/crates/ely_app/src/shell/chrome/split_pane.rs b/crates/ely_app/src/shell/chrome/split_pane.rs index e8adc1d..b2f4c21 100644 --- a/crates/ely_app/src/shell/chrome/split_pane.rs +++ b/crates/ely_app/src/shell/chrome/split_pane.rs @@ -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) -> 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) -> 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)), ), ), diff --git a/crates/ely_app/src/shell/chrome/topbar.rs b/crates/ely_app/src/shell/chrome/topbar.rs index 5734e02..945b41e 100644 --- a/crates/ely_app/src/shell/chrome/topbar.rs +++ b/crates/ely_app/src/shell/chrome/topbar.rs @@ -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( @@ -158,7 +158,7 @@ fn render_omnibar_chip( where F: Fn(&mut ElyShell, &mut gpui::Window, &mut Context) + '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( where F: Fn(&mut ElyShell, &mut gpui::Window, &mut Context) + '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) diff --git a/crates/ely_app/src/shell/chrome/wallpaper.rs b/crates/ely_app/src/shell/chrome/wallpaper.rs index 63ac93b..3be581f 100644 --- a/crates/ely_app/src/shell/chrome/wallpaper.rs +++ b/crates/ely_app/src/shell/chrome/wallpaper.rs @@ -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), + }, } } diff --git a/crates/ely_app/src/shell/internal_pages.rs b/crates/ely_app/src/shell/internal_pages.rs index a89a142..4e9e204 100644 --- a/crates/ely_app/src/shell/internal_pages.rs +++ b/crates/ely_app/src/shell/internal_pages.rs @@ -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))), ) } diff --git a/crates/ely_app/src/shell/internal_pages/about.rs b/crates/ely_app/src/shell/internal_pages/about.rs index adc80e0..c41a77b 100644 --- a/crates/ely_app/src/shell/internal_pages/about.rs +++ b/crates/ely_app/src/shell/internal_pages/about.rs @@ -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() diff --git a/crates/ely_app/src/shell/internal_pages/advanced.rs b/crates/ely_app/src/shell/internal_pages/advanced.rs index 0296483..73aebb1 100644 --- a/crates/ely_app/src/shell/internal_pages/advanced.rs +++ b/crates/ely_app/src/shell/internal_pages/advanced.rs @@ -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() diff --git a/crates/ely_app/src/shell/internal_pages/auth_callback.rs b/crates/ely_app/src/shell/internal_pages/auth_callback.rs index 30466fa..85dff97 100644 --- a/crates/ely_app/src/shell/internal_pages/auth_callback.rs +++ b/crates/ely_app/src/shell/internal_pages/auth_callback.rs @@ -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(), } } diff --git a/crates/ely_app/src/shell/internal_pages/bookmarks.rs b/crates/ely_app/src/shell/internal_pages/bookmarks.rs index ce928cc..756f66d 100644 --- a/crates/ely_app/src/shell/internal_pages/bookmarks.rs +++ b/crates/ely_app/src/shell/internal_pages/bookmarks.rs @@ -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) - .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( diff --git a/crates/ely_app/src/shell/internal_pages/crash.rs b/crates/ely_app/src/shell/internal_pages/crash.rs index e0d6627..d1bb380 100644 --- a/crates/ely_app/src/shell/internal_pages/crash.rs +++ b/crates/ely_app/src/shell/internal_pages/crash.rs @@ -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) -> 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) -> 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)), ) } diff --git a/crates/ely_app/src/shell/internal_pages/download_settings.rs b/crates/ely_app/src/shell/internal_pages/download_settings.rs index 44150d2..071703e 100644 --- a/crates/ely_app/src/shell/internal_pages/download_settings.rs +++ b/crates/ely_app/src/shell/internal_pages/download_settings.rs @@ -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 { diff --git a/crates/ely_app/src/shell/internal_pages/downloads.rs b/crates/ely_app/src/shell/internal_pages/downloads.rs index 352665e..b7a2320 100644 --- a/crates/ely_app/src/shell/internal_pages/downloads.rs +++ b/crates/ely_app/src/shell/internal_pages/downloads.rs @@ -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() diff --git a/crates/ely_app/src/shell/internal_pages/general.rs b/crates/ely_app/src/shell/internal_pages/general.rs index 62cd5c8..aaf18f6 100644 --- a/crates/ely_app/src/shell/internal_pages/general.rs +++ b/crates/ely_app/src/shell/internal_pages/general.rs @@ -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 { diff --git a/crates/ely_app/src/shell/internal_pages/history.rs b/crates/ely_app/src/shell/internal_pages/history.rs index 330bfc6..017d3e9 100644 --- a/crates/ely_app/src/shell/internal_pages/history.rs +++ b/crates/ely_app/src/shell/internal_pages/history.rs @@ -61,8 +61,8 @@ fn render_history_header(snapshot: &BrowserSnapshot, cx: &mut Context) .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) .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) - 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) - .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,28 +289,29 @@ 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( - div() - .max_w(px(180.0)) - .truncate() - .text_color(rgb(colors::MUTED_SOFT)) - .child(format!("Source: {source_tab_label}")), - ) + this.child(div().text_color(rgb(colors::muted_soft())).child("-")) + .child( + div() + .max_w(px(180.0)) + .truncate() + .text_color(rgb(colors::muted_soft())) + .child(format!("Source: {source_tab_label}")), + ) }), ), ) diff --git a/crates/ely_app/src/shell/internal_pages/notes.rs b/crates/ely_app/src/shell/internal_pages/notes.rs index 5fb0d17..930977b 100644 --- a/crates/ely_app/src/shell/internal_pages/notes.rs +++ b/crates/ely_app/src/shell/internal_pages/notes.rs @@ -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() diff --git a/crates/ely_app/src/shell/internal_pages/notes_markdown.rs b/crates/ely_app/src/shell/internal_pages/notes_markdown.rs index 6c88439..0dc096b 100644 --- a/crates/ely_app/src/shell/internal_pages/notes_markdown.rs +++ b/crates/ely_app/src/shell/internal_pages/notes_markdown.rs @@ -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 { diff --git a/crates/ely_app/src/shell/internal_pages/plugin_catalog.rs b/crates/ely_app/src/shell/internal_pages/plugin_catalog.rs index 8c1bb7c..75084ec 100644 --- a/crates/ely_app/src/shell/internal_pages/plugin_catalog.rs +++ b/crates/ely_app/src/shell/internal_pages/plugin_catalog.rs @@ -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( - "ELY plugins are sandboxed, theme-aware, and ship with their own \ + .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) -> 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"), ), ) diff --git a/crates/ely_app/src/shell/internal_pages/plugin_details.rs b/crates/ely_app/src/shell/internal_pages/plugin_details.rs index dfb07b1..ae37795 100644 --- a/crates/ely_app/src/shell/internal_pages/plugin_details.rs +++ b/crates/ely_app/src/shell/internal_pages/plugin_details.rs @@ -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( diff --git a/crates/ely_app/src/shell/internal_pages/plugin_editors_pick.rs b/crates/ely_app/src/shell/internal_pages/plugin_editors_pick.rs index f498c3e..6f4e76d 100644 --- a/crates/ely_app/src/shell/internal_pages/plugin_editors_pick.rs +++ b/crates/ely_app/src/shell/internal_pages/plugin_editors_pick.rs @@ -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)) diff --git a/crates/ely_app/src/shell/internal_pages/plugins.rs b/crates/ely_app/src/shell/internal_pages/plugins.rs index c900bc6..536fd5a 100644 --- a/crates/ely_app/src/shell/internal_pages/plugins.rs +++ b/crates/ely_app/src/shell/internal_pages/plugins.rs @@ -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) -> 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) -> .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() } diff --git a/crates/ely_app/src/shell/internal_pages/privacy_data_inventory.rs b/crates/ely_app/src/shell/internal_pages/privacy_data_inventory.rs index b91fa03..59a9d11 100644 --- a/crates/ely_app/src/shell/internal_pages/privacy_data_inventory.rs +++ b/crates/ely_app/src/shell/internal_pages/privacy_data_inventory.rs @@ -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 { 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() diff --git a/crates/ely_app/src/shell/internal_pages/privacy_security.rs b/crates/ely_app/src/shell/internal_pages/privacy_security.rs index d8a4b39..eeaa36f 100644 --- a/crates/ely_app/src/shell/internal_pages/privacy_security.rs +++ b/crates/ely_app/src/shell/internal_pages/privacy_security.rs @@ -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 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 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 .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) -> 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) -> 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 { diff --git a/crates/ely_app/src/shell/internal_pages/profiles.rs b/crates/ely_app/src/shell/internal_pages/profiles.rs index 23107b5..1f148fe 100644 --- a/crates/ely_app/src/shell/internal_pages/profiles.rs +++ b/crates/ely_app/src/shell/internal_pages/profiles.rs @@ -46,11 +46,11 @@ fn render_profiles_header(snapshot: &BrowserSnapshot, cx: &mut Context .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 .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) - .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(); } diff --git a/crates/ely_app/src/shell/internal_pages/reading_list.rs b/crates/ely_app/src/shell/internal_pages/reading_list.rs index f414abf..3f1b403 100644 --- a/crates/ely_app/src/shell/internal_pages/reading_list.rs +++ b/crates/ely_app/src/shell/internal_pages/reading_list.rs @@ -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() diff --git a/crates/ely_app/src/shell/internal_pages/search.rs b/crates/ely_app/src/shell/internal_pages/search.rs index 65885bf..ff99b8c 100644 --- a/crates/ely_app/src/shell/internal_pages/search.rs +++ b/crates/ely_app/src/shell/internal_pages/search.rs @@ -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 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 .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 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 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 .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 { diff --git a/crates/ely_app/src/shell/internal_pages/shortcuts.rs b/crates/ely_app/src/shell/internal_pages/shortcuts.rs index 71e3522..8989937 100644 --- a/crates/ely_app/src/shell/internal_pages/shortcuts.rs +++ b/crates/ely_app/src/shell/internal_pages/shortcuts.rs @@ -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() } } diff --git a/crates/ely_app/src/shell/internal_pages/sidebar_tabs.rs b/crates/ely_app/src/shell/internal_pages/sidebar_tabs.rs index 8b8a151..080c956 100644 --- a/crates/ely_app/src/shell/internal_pages/sidebar_tabs.rs +++ b/crates/ely_app/src/shell/internal_pages/sidebar_tabs.rs @@ -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 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, ) -> 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() } } diff --git a/crates/ely_app/src/shell/internal_pages/site_compatibility.rs b/crates/ely_app/src/shell/internal_pages/site_compatibility.rs index 78b1824..c4aadf2 100644 --- a/crates/ely_app/src/shell/internal_pages/site_compatibility.rs +++ b/crates/ely_app/src/shell/internal_pages/site_compatibility.rs @@ -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() diff --git a/crates/ely_app/src/shell/internal_pages/site_permissions_settings.rs b/crates/ely_app/src/shell/internal_pages/site_permissions_settings.rs index 09aac29..0227aed 100644 --- a/crates/ely_app/src/shell/internal_pages/site_permissions_settings.rs +++ b/crates/ely_app/src/shell/internal_pages/site_permissions_settings.rs @@ -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) -> 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) -> 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(), } } diff --git a/crates/ely_app/src/shell/internal_pages/site_settings.rs b/crates/ely_app/src/shell/internal_pages/site_settings.rs index 6847af6..a72abe9 100644 --- a/crates/ely_app/src/shell/internal_pages/site_settings.rs +++ b/crates/ely_app/src/shell/internal_pages/site_settings.rs @@ -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(), } } diff --git a/crates/ely_app/src/shell/internal_pages/sleep.rs b/crates/ely_app/src/shell/internal_pages/sleep.rs index 5a2ac55..e279940 100644 --- a/crates/ely_app/src/shell/internal_pages/sleep.rs +++ b/crates/ely_app/src/shell/internal_pages/sleep.rs @@ -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) -> 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) -> AnyEleme div() .text_sm() .truncate() - .text_color(rgb(colors::MUTED)) + .text_color(rgb(colors::muted())) .child(format!("Sleeping {}", tab.display_url())), ), ) diff --git a/crates/ely_app/src/shell/internal_pages/space_actions.rs b/crates/ely_app/src/shell/internal_pages/space_actions.rs index cfa6cb6..36c01b4 100644 --- a/crates/ely_app/src/shell/internal_pages/space_actions.rs +++ b/crates/ely_app/src/shell/internal_pages/space_actions.rs @@ -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(); } diff --git a/crates/ely_app/src/shell/internal_pages/spaces.rs b/crates/ely_app/src/shell/internal_pages/spaces.rs index ce33917..f0e8deb 100644 --- a/crates/ely_app/src/shell/internal_pages/spaces.rs +++ b/crates/ely_app/src/shell/internal_pages/spaces.rs @@ -52,12 +52,12 @@ fn render_spaces_header(snapshot: &BrowserSnapshot, cx: &mut Context) .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) .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) 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 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 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() } diff --git a/crates/ely_app/src/shell/internal_pages/sync.rs b/crates/ely_app/src/shell/internal_pages/sync.rs index c20f10c..4d99096 100644 --- a/crates/ely_app/src/shell/internal_pages/sync.rs +++ b/crates/ely_app/src/shell/internal_pages/sync.rs @@ -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) - .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) - .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) -> 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) -> 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 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}"))) diff --git a/crates/ely_app/src/shell/internal_pages/tab_context.rs b/crates/ely_app/src/shell/internal_pages/tab_context.rs index 7fb0a1f..6d600d1 100644 --- a/crates/ely_app/src/shell/internal_pages/tab_context.rs +++ b/crates/ely_app/src/shell/internal_pages/tab_context.rs @@ -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() diff --git a/crates/ely_app/src/shell/internal_pages/task_manager.rs b/crates/ely_app/src/shell/internal_pages/task_manager.rs index 586e984..1011364 100644 --- a/crates/ely_app/src/shell/internal_pages/task_manager.rs +++ b/crates/ely_app/src/shell/internal_pages/task_manager.rs @@ -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(), } } diff --git a/crates/ely_app/src/shell/internal_pages/updates.rs b/crates/ely_app/src/shell/internal_pages/updates.rs index 7e1985b..4316234 100644 --- a/crates/ely_app/src/shell/internal_pages/updates.rs +++ b/crates/ely_app/src/shell/internal_pages/updates.rs @@ -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() diff --git a/crates/ely_app/src/shell/render.rs b/crates/ely_app/src/shell/render.rs index 9153564..9452f50 100644 --- a/crates/ely_app/src/shell/render.rs +++ b/crates/ely_app/src/shell/render.rs @@ -18,6 +18,19 @@ use super::{ElyShell, ShellState}; impl Render for ElyShell { fn render(&mut self, window: &mut Window, cx: &mut Context) -> 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() diff --git a/crates/ely_app/src/shell/sidebar.rs b/crates/ely_app/src/shell/sidebar.rs index 9a4c075..65951a9 100644 --- a/crates/ely_app/src/shell/sidebar.rs +++ b/crates/ely_app/src/shell/sidebar.rs @@ -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() diff --git a/crates/ely_app/src/shell/splits.rs b/crates/ely_app/src/shell/splits.rs index 7ca379e..3bf17c4 100644 --- a/crates/ely_app/src/shell/splits.rs +++ b/crates/ely_app/src/shell/splits.rs @@ -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, ) -> Option { 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())), ), ) diff --git a/crates/ely_app/src/shell/tab_groups.rs b/crates/ely_app/src/shell/tab_groups.rs index d7e867f..ab0a7be 100644 --- a/crates/ely_app/src/shell/tab_groups.rs +++ b/crates/ely_app/src/shell/tab_groups.rs @@ -108,8 +108,8 @@ impl ElyShell { cx: &mut Context, ) -> 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}")), ), ) diff --git a/crates/ely_app/src/shell/web_surface_view.rs b/crates/ely_app/src/shell/web_surface_view.rs index 3efd103..947595e 100644 --- a/crates/ely_app/src/shell/web_surface_view.rs +++ b/crates/ely_app/src/shell/web_surface_view.rs @@ -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( diff --git a/crates/ely_design_system/src/colors.rs b/crates/ely_design_system/src/colors.rs index d5fd46b..7f2faf3 100644 --- a/crates/ely_design_system/src/colors.rs +++ b/crates/ely_design_system/src/colors.rs @@ -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 = 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); + } +} diff --git a/crates/ely_design_system/src/lib.rs b/crates/ely_design_system/src/lib.rs index 04035d5..d4ae3db 100644 --- a/crates/ely_design_system/src/lib.rs +++ b/crates/ely_design_system/src/lib.rs @@ -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, -};