Make every shell color token theme-aware

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

What lands:
- `ely_design_system::colors::Mode` + thread-local + `set_mode` /
  `mode` accessors. Every ink shade, glass surface, stroke, divider,
  hairline, canvas, success / error chip now picks the warm-dark
  counterpart when the active mode is `Mode::Dark`.
- `ElyShell::render` resolves `ThemeMode::System` against
  `Window::appearance()` and pushes the mode before traversing the
  tree, so widgets lower down read the right shade without owning a
  `Mode` parameter.
- `render_wallpaper` + `panel_bg` now branch on `colors::mode()` so
  the gradient base, panel tint, and overlay highlights flip to
  warm-graphite when dark mode is active.
- Mechanical conversion across 687 call sites in 55 files from
  `colors::FOO` constants to `colors::foo()` accessors. The
  `Theme` / `ELY_THEME` const surface (unused outside the design
  system) is removed; the function surface is the new contract.

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_2().border_color(rgb(colors::accent())))
-                .when(!selected, |el| el.border_1().border_color(rgba(colors::STROKE)))
+                .when(!selected, |el| el.border_1().border_color(rgba(colors::stroke())))
                 .relative()
                 .overflow_hidden()
                 .bg(rgb(base))
@@ -126,11 +126,11 @@ fn render_wallpaper_swatch(
                     div()
                         .flex_1()
                         .font_weight(FontWeight(500.0))
-                        .text_color(rgb(colors::INK))
+                        .text_color(rgb(colors::ink()))
                         .child(label),
                 )
                 .when(selected, |el| {
-                    el.child(div().text_color(rgb(colors::ACCENT)).child(IconName::Check))
+                    el.child(div().text_color(rgb(colors::accent())).child(IconName::Check))
                 }),
         )
         .into_any_element()
@@ -168,7 +168,7 @@ fn render_translucency_row(shell: &mut ElyShell, pct: u8) -> AnyElement {
                 div()
                     .min_w(px(36.0))
                     .text_size(px(11.0))
-                    .text_color(rgb(colors::INK_3))
+                    .text_color(rgb(colors::ink_3()))
                     .child(format!("{pct}%")),
             )
             .into_any_element(),
@@ -181,7 +181,7 @@ fn render_translucency_presets(cx: &mut Context<ElyShell>) -> AnyElement {
         .items_center()
         .gap(px(8.0))
         .pt(px(2.0))
-        .child(div().text_size(px(10.5)).text_color(rgb(colors::INK_4)).child("Presets"))
+        .child(div().text_size(px(10.5)).text_color(rgb(colors::ink_4())).child("Presets"))
         .child(translucency_preset("Solid", 0, cx))
         .child(translucency_preset("Default", 40, cx))
         .child(translucency_preset("Glassy", 75, cx))
@@ -203,7 +203,7 @@ fn translucency_preset(
         .bg(rgba(SEGMENT_BG))
         .text_size(px(11.5))
         .font_weight(FontWeight(500.0))
-        .text_color(rgb(colors::INK_2))
+        .text_color(rgb(colors::ink_2()))
         .cursor_pointer()
         .hover(|style| style.opacity(0.92))
         .active(|style| style.opacity(0.82))
@@ -249,7 +249,7 @@ fn theme_segment(
         .rounded(px(6.0))
         .text_size(px(12.0))
         .font_weight(FontWeight(500.0))
-        .text_color(rgb(colors::INK_2))
+        .text_color(rgb(colors::ink_2()))
         .bg(rgba(bg))
         .cursor_pointer()
         .hover(|style| style.opacity(0.92))
@@ -269,11 +269,11 @@ fn render_accent_row() -> AnyElement {
             .flex()
             .items_center()
             .gap(px(8.0))
-            .child(swatch(colors::ACCENT, true))
+            .child(swatch(colors::accent(), true))
             .child(swatch(0xec6a8e, false))
             .child(swatch(0x7c6cf7, false))
             .child(swatch(0x4fb59a, false))
-            .child(swatch(colors::INK, false))
+            .child(swatch(colors::ink(), false))
             .into_any_element(),
     )
 }
@@ -286,7 +286,7 @@ fn swatch(color: u32, selected: bool) -> AnyElement {
         .border_1()
         .border_color(rgba(0x0000000d));
     if selected {
-        element = element.border_2().border_color(rgb(colors::ACCENT));
+        element = element.border_2().border_color(rgb(colors::accent()));
     }
     element.into_any_element()
 }
@@ -300,7 +300,7 @@ fn render_reduce_motion_row(reduce: bool, cx: &mut Context<ElyShell>) -> AnyElem
             .w(px(34.0))
             .h(px(20.0))
             .rounded_full()
-            .bg(if reduce { rgb(colors::ACCENT) } else { rgba(0x281e1426) })
+            .bg(if reduce { rgb(colors::accent()) } else { rgba(0x281e1426) })
             .p(px(2.0))
             .cursor_pointer()
             .hover(|style| style.opacity(0.9))
@@ -329,7 +329,7 @@ fn render_reset_row(cx: &mut Context<ElyShell>) -> AnyElement {
             .bg(rgba(SEGMENT_BG))
             .text_size(px(12.0))
             .font_weight(FontWeight(500.0))
-            .text_color(rgb(colors::INK_2))
+            .text_color(rgb(colors::ink_2()))
             .cursor_pointer()
             .hover(|style| style.opacity(0.92))
             .active(|style| style.opacity(0.82))
@@ -348,7 +348,7 @@ fn settings_row(title: &'static str, detail: &'static str, control: AnyElement)
         .gap(px(16.0))
         .py(px(14.0))
         .border_b_1()
-        .border_color(rgba(colors::DIVIDER))
+        .border_color(rgba(colors::divider()))
         .child(
             div()
                 .flex_1()
@@ -360,10 +360,10 @@ fn settings_row(title: &'static str, detail: &'static str, control: AnyElement)
                     div()
                         .text_size(px(13.0))
                         .font_weight(FontWeight(500.0))
-                        .text_color(rgb(colors::INK))
+                        .text_color(rgb(colors::ink()))
                         .child(title),
                 )
-                .child(div().text_size(px(11.5)).text_color(rgb(colors::INK_3)).child(detail)),
+                .child(div().text_size(px(11.5)).text_color(rgb(colors::ink_3())).child(detail)),
         )
         .child(control)
         .into_any_element()

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_2().border_color(rgb(colors::accent())))
-        .when(!selected, |el| el.border_1().border_color(rgba(colors::STROKE)))
+        .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()
 }

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()
 }

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()
 }

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))
+        .border_color(rgba(colors::divider()))
-        .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()
@@ -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()
 }

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()
 }

crates/ely_app/src/shell/chrome/home/favorites.rs

@@ -70,7 +70,7 @@ fn render_favorite_tile(index: usize, tab: &BrowserTab, cx: &mut Context<ElyShel
         .child(
             div()
                 .text_size(px(11.5))
-                .text_color(rgb(colors::INK_3))
+                .text_color(rgb(colors::ink_3()))
                 .max_w(px(80.0))
                 .truncate()
                 .child(title),
@@ -87,7 +87,7 @@ fn render_add_favorite_tile(cx: &mut Context<ElyShell>) -> AnyElement {
         .flex()
         .items_center()
         .justify_center()
-        .text_color(rgb(colors::INK_4))
+        .text_color(rgb(colors::ink_4()))
         .cursor_pointer()
         .hover(|style| style.bg(rgba(CARD_BG)))
         .on_click(cx.listener(|shell, _, window, cx| {

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<ElyShell>) -> AnyElement
     // so this is a read-only echo, not a parallel input.
     let omnibar_value = shell.command_input.read(cx).value().to_string();
     let (display_text, display_color) = if omnibar_value.is_empty() {
-        ("Search the web or ELY".to_string(), colors::INK_4)
+        ("Search the web or ELY".to_string(), colors::ink_4())
     } else {
-        (omnibar_value, colors::INK)
+        (omnibar_value, colors::ink())
     };
 
     div()
@@ -96,7 +96,7 @@ fn render_search_bar(shell: &ElyShell, cx: &mut Context<ElyShell>) -> AnyElement
         .on_click(cx.listener(|shell, _, window, cx| {
             shell.focus_address_bar(window, cx);
         }))
-        .child(div().text_color(rgb(colors::INK_3)).child(IconName::Search))
+        .child(div().text_color(rgb(colors::ink_3())).child(IconName::Search))
         .child(
             div()
                 .flex_1()
@@ -114,7 +114,7 @@ fn render_search_bar(shell: &ElyShell, cx: &mut Context<ElyShell>) -> AnyElement
                 .flex()
                 .items_center()
                 .justify_center()
-                .text_color(rgb(colors::INK_3))
+                .text_color(rgb(colors::ink_3()))
                 .child(IconName::ArrowRight),
         )
         .into_any_element()
@@ -161,7 +161,7 @@ where
     F: Fn(&mut ElyShell, &mut gpui::Window, &mut Context<ElyShell>) + 'static,
 {
     let leading =
-        div().text_color(rgb(colors::INK_3)).text_size(px(12.0)).child(icon).into_any_element();
+        div().text_color(rgb(colors::ink_3())).text_size(px(12.0)).child(icon).into_any_element();
     render_pill(id, leading, label, cx, handler)
 }
 
@@ -194,7 +194,7 @@ where
             div()
                 .text_size(px(12.0))
                 .font_weight(FontWeight(500.0))
-                .text_color(rgb(colors::INK_2))
+                .text_color(rgb(colors::ink_2()))
                 .child(label),
         )
         .into_any_element()

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<ElyShell>) -> AnyElement {
         .id(SharedString::from("activity-view-all"))
         .pt(px(10.0))
         .border_t_1()
-        .border_color(rgba(colors::DIVIDER))
+        .border_color(rgba(colors::divider()))
         .flex()
         .items_center()
         .gap(px(4.0))
         .text_size(px(11.5))
-        .text_color(rgb(colors::INK_3))
+        .text_color(rgb(colors::ink_3()))
         .cursor_pointer()
-        .hover(|style| style.text_color(rgb(colors::INK)))
+        .hover(|style| style.text_color(rgb(colors::ink())))
         .on_click(cx.listener(|shell, _, window, cx| {
             shell.open_internal_tab("ely://history", window, cx);
         }))

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()
 }

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)),
                 ),
         )

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()
 }

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)

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 {
+fn wallpaper_panel_rgb(theme: ely_domain::WallpaperTheme, mode: colors::Mode) -> u32 {
-    match theme {
+    match (theme, mode) {
-        ely_domain::WallpaperTheme::Dawn => 0xfaf6f0,
+        (ely_domain::WallpaperTheme::Dawn, colors::Mode::Light) => 0xfaf6f0,
-        ely_domain::WallpaperTheme::Violet => 0xf6f3f8,
+        (ely_domain::WallpaperTheme::Violet, colors::Mode::Light) => 0xf6f3f8,
-        ely_domain::WallpaperTheme::Mint => 0xf3f6f1,
+        (ely_domain::WallpaperTheme::Mint, colors::Mode::Light) => 0xf3f6f1,
-        ely_domain::WallpaperTheme::Slate => 0xeff1f4,
+        (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,
     }
 }
 

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<ElyShell>) -> AnyElement {
         .flex()
         .items_center()
         .justify_center()
-        .text_color(rgb(colors::ACCENT))
+        .text_color(rgb(colors::accent()))
         .cursor_pointer()
         .hover(|style| style.opacity(0.92))
         .active(|style| style.opacity(0.82))
@@ -164,10 +164,10 @@ fn render_picker_pill(
                 .truncate()
                 .text_size(px(13.0))
                 .font_weight(gpui::FontWeight(500.0))
-                .text_color(rgb(colors::INK))
+                .text_color(rgb(colors::ink()))
                 .child(space_name),
         )
-        .child(div().text_color(rgb(colors::INK_3)).child(chevron))
+        .child(div().text_color(rgb(colors::ink_3())).child(chevron))
         .into_any_element()
 }
 
@@ -305,10 +305,10 @@ fn render_disclosure_row(
                 .truncate()
                 .text_size(px(13.0))
                 .font_weight(gpui::FontWeight(500.0))
-                .text_color(rgb(colors::INK))
+                .text_color(rgb(colors::ink()))
                 .child(space.name().to_string()),
         )
-        .when(active, |el| el.child(div().text_color(rgb(colors::ACCENT)).child(IconName::Check)))
+        .when(active, |el| el.child(div().text_color(rgb(colors::accent())).child(IconName::Check)))
         .into_any_element()
 }
 
@@ -323,17 +323,17 @@ fn render_disclosure_footer(cx: &mut Context<ElyShell>) -> AnyElement {
         .mt(px(2.0))
         .rounded(px(8.0))
         .border_t_1()
-        .border_color(rgba(colors::DIVIDER))
+        .border_color(rgba(colors::divider()))
         .text_size(px(12.0))
-        .text_color(rgb(colors::INK_3))
+        .text_color(rgb(colors::ink_3()))
         .cursor_pointer()
-        .hover(|style| style.bg(rgba(DISCLOSURE_ROW_HOVER_BG)).text_color(rgb(colors::INK)))
+        .hover(|style| style.bg(rgba(DISCLOSURE_ROW_HOVER_BG)).text_color(rgb(colors::ink())))
         .active(|style| style.opacity(0.85))
         .on_click(cx.listener(|shell, _, window, cx| {
             shell.close_workspace_picker(cx);
             shell.open_internal_tab("ely://settings/spaces", window, cx);
         }))
-        .child(div().text_color(rgb(colors::INK_4)).child(IconName::Settings))
+        .child(div().text_color(rgb(colors::ink_4())).child(IconName::Settings))
         .child("Manage spaces")
         .into_any_element()
 }
@@ -366,9 +366,9 @@ fn render_add_workspace_button(cx: &mut Context<ElyShell>) -> AnyElement {
         .flex()
         .items_center()
         .justify_center()
-        .text_color(rgb(colors::INK_3))
+        .text_color(rgb(colors::ink_3()))
         .cursor_pointer()
-        .hover(|style| style.bg(rgba(PICKER_BG)).text_color(rgb(colors::INK)))
+        .hover(|style| style.bg(rgba(PICKER_BG)).text_color(rgb(colors::ink())))
         .active(|style| style.opacity(0.82))
         .on_click(cx.listener(|shell, _, window, cx| {
             shell.open_internal_tab("ely://settings/spaces", window, cx);

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<ElyShell>) -> AnyElement {
     div()
-        .text_color(rgb(colors::INK_5))
+        .text_color(rgb(colors::ink_5()))
         .text_size(px(11.0))
         .child(IconName::Redo2)
         .into_any_element()
@@ -75,10 +75,10 @@ fn render_close_glyph(close_tab_id: TabId, cx: &mut Context<ElyShell>) -> AnyEle
     let id = format!("split-pane-close-{}", close_tab_id.as_str());
     div()
         .id(SharedString::from(id))
-        .text_color(rgb(colors::INK_4))
+        .text_color(rgb(colors::ink_4()))
         .text_size(px(11.0))
         .cursor_pointer()
-        .hover(|style| style.text_color(rgb(colors::INK)))
+        .hover(|style| style.text_color(rgb(colors::ink())))
         .on_click(cx.listener(move |shell, _, window, cx| {
             // The split pane itself has an on_click that selects the
             // tab. Stop propagation here so closing the pane doesn't
@@ -114,13 +114,13 @@ pub(crate) fn render_compact_split_canvas(tab: &BrowserTab) -> AnyElement {
                 .size_full()
                 .min_h_0()
                 .rounded(px(10.0))
-                .bg(rgba(colors::GLASS_2))
+                .bg(rgba(colors::glass_2()))
                 .px(px(10.0))
                 .py(px(8.0))
                 .gap(px(8.0))
                 .flex()
                 .items_center()
-                .child(div().text_color(rgb(colors::INK_4)).child(IconName::Globe))
+                .child(div().text_color(rgb(colors::ink_4())).child(IconName::Globe))
                 .child(
                     div()
                         .min_w_0()
@@ -137,7 +137,7 @@ pub(crate) fn render_compact_split_canvas(tab: &BrowserTab) -> AnyElement {
                             div()
                                 .truncate()
                                 .text_size(px(11.0))
-                                .text_color(rgb(colors::INK_4))
+                                .text_color(rgb(colors::ink_4()))
                                 .child(split_canvas_status(tab)),
                         ),
                 ),

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().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().min_w_0().truncate().text_color(rgb(colors::ink_3())).child(path))
         .into_any_element()
 }
 
 fn render_lock_or_search(secure: bool, show_styled: bool) -> AnyElement {
     let icon = if show_styled && !secure { IconName::Globe } else { IconName::Search };
-    div().text_color(rgb(colors::INK_3)).child(icon).into_any_element()
+    div().text_color(rgb(colors::ink_3())).child(icon).into_any_element()
 }
 
 fn render_omnibar_chip<F>(
@@ -158,7 +158,7 @@ fn render_omnibar_chip<F>(
 where
     F: Fn(&mut ElyShell, &mut gpui::Window, &mut Context<ElyShell>) + 'static,
 {
-    let color = if active { colors::ACCENT } else { colors::INK_4 };
+    let color = if active { colors::accent() } else { colors::ink_4() };
     div()
         .id(SharedString::from(id))
         .size(px(22.0))
@@ -168,7 +168,7 @@ where
         .justify_center()
         .text_color(rgb(color))
         .cursor_pointer()
-        .hover(|style| style.bg(rgba(CHIP_HOVER_BG)).text_color(rgb(colors::INK)))
+        .hover(|style| style.bg(rgba(CHIP_HOVER_BG)).text_color(rgb(colors::ink())))
         .active(|style| style.opacity(0.7))
         .on_click(cx.listener(move |shell, _, window, cx| handler(shell, window, cx)))
         .child(icon)
@@ -185,7 +185,7 @@ fn render_nav_arrow<F>(
 where
     F: Fn(&mut ElyShell, &mut gpui::Window, &mut Context<ElyShell>) + 'static,
 {
-    let color = if enabled { colors::INK_3 } else { colors::INK_5 };
+    let color = if enabled { colors::ink_3() } else { colors::ink_5() };
     div()
         .id(SharedString::from(id))
         .size(px(30.0))
@@ -196,7 +196,7 @@ where
         .text_color(rgb(color))
         .when(enabled, |el| {
             el.cursor_pointer()
-                .hover(|style| style.bg(rgba(OMNIBAR_BG)).text_color(rgb(colors::INK)))
+                .hover(|style| style.bg(rgba(OMNIBAR_BG)).text_color(rgb(colors::ink())))
                 .active(|style| style.opacity(0.82))
                 .on_click(cx.listener(move |shell, _, window, cx| handler(shell, window, cx)))
         })
@@ -221,8 +221,8 @@ where
         .items_center()
         .justify_center()
         .cursor_pointer()
-        .text_color(rgb(colors::INK_3))
+        .text_color(rgb(colors::ink_3()))
-        .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)))
         .child(icon)

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 {
+fn palette_for(theme: WallpaperTheme, mode: colors::Mode) -> WallpaperPalette {
-    match theme {
+    match (theme, mode) {
-        WallpaperTheme::Dawn => WallpaperPalette {
+        (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),
+        },
     }
 }
 

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))),
     )
 }
 

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()

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))
+        .border_color(rgb(colors::hairline()))
-        .bg(rgb(colors::CANVAS_SOFT))
+        .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()

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::CodeReceived => colors::success(),
-        AuthCallbackState::ProviderError(_) => colors::ERROR,
+        AuthCallbackState::ProviderError(_) => colors::error(),
-        AuthCallbackState::MissingCode => colors::MUTED,
+        AuthCallbackState::MissingCode => colors::muted(),
     }
 }
 

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))
+        .border_color(rgb(colors::hairline_strong()))
-        .bg(rgb(colors::CANVAS_SOFT))
+        .bg(rgb(colors::canvas_soft()))
         .p_3()
         .flex()
         .flex_col()
@@ -211,7 +217,7 @@ fn render_bookmark_editor(
         )
         .child(render_bookmark_edit_field("Note", pending_edit.note_input()))
         .when_some(edit_error.map(ToOwned::to_owned), |this, message| {
-            this.child(div().text_xs().text_color(rgb(colors::ERROR)).child(message))
+            this.child(div().text_xs().text_color(rgb(colors::error())).child(message))
         })
         .child(
             div()
@@ -252,7 +258,7 @@ fn render_bookmark_edit_field(label: &'static str, input: &Entity<InputState>) -
         .flex()
         .flex_col()
         .gap_1()
-        .child(div().text_xs().font_semibold().text_color(rgb(colors::MUTED)).child(label))
+        .child(div().text_xs().font_semibold().text_color(rgb(colors::muted())).child(label))
         .child(Input::new(input).small())
         .into_any_element()
 }
@@ -274,12 +280,12 @@ impl ElyShell {
                     .flex_col()
                     .gap_2()
                     .child(
-                        div().text_size(px(26.0)).text_color(rgb(colors::INK)).child("Bookmarks"),
+                        div().text_size(px(26.0)).text_color(rgb(colors::ink())).child("Bookmarks"),
                     )
                     .child(
                         div()
                             .text_sm()
-                            .text_color(rgb(colors::MUTED))
+                            .text_color(rgb(colors::muted()))
                             .child(format!("Profile: {}", snapshot.active_profile_name)),
                     ),
             )
@@ -291,7 +297,7 @@ impl ElyShell {
                     .child(
                         div()
                             .text_xs()
-                            .text_color(rgb(colors::MUTED))
+                            .text_color(rgb(colors::muted()))
                             .child(bookmark_count_label(snapshot.bookmarks.len())),
                     )
                     .child(

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<ElyShell>) -> AnyEleme
                         .items_center()
                         .gap_3()
                         .text_size(px(26.0))
-                        .text_color(rgb(colors::INK))
+                        .text_color(rgb(colors::ink()))
                         .child(IconName::TriangleAlert)
                         .child("Tab Recovery"),
                 )
@@ -127,7 +127,7 @@ fn render_crash_header(tab: &BrowserTab, cx: &mut Context<ElyShell>) -> AnyEleme
                     div()
                         .text_sm()
                         .truncate()
-                        .text_color(rgb(colors::MUTED))
+                        .text_color(rgb(colors::muted()))
                         .child(format!("Recovering {}", tab.display_url())),
                 ),
         )
@@ -153,8 +153,8 @@ fn render_missing_crash_route(message: &'static str) -> AnyElement {
             .flex()
             .flex_col()
             .gap_4()
-            .child(div().text_size(px(26.0)).text_color(rgb(colors::INK)).child("Tab Recovery"))
+            .child(div().text_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_sm().text_color(rgb(colors::muted())).child(message)),
     )
 }
 

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))
+        .border_color(rgb(colors::hairline()))
-        .bg(rgb(colors::CANVAS_SOFT))
+        .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 {

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()

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))
+        .border_color(rgb(colors::hairline()))
-        .bg(rgb(colors::CANVAS_SOFT))
+        .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 {

crates/ely_app/src/shell/internal_pages/history.rs

@@ -61,8 +61,8 @@ fn render_history_header(snapshot: &BrowserSnapshot, cx: &mut Context<ElyShell>)
                 .flex()
                 .flex_col()
                 .gap_2()
-                .child(div().text_size(px(26.0)).text_color(rgb(colors::INK)).child("History"))
+                .child(div().text_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_sm().text_color(rgb(colors::muted())).child(format!(
                     "{} / {}",
                     snapshot.active_profile_name, snapshot.active_space_name
                 ))),
@@ -75,7 +75,7 @@ fn render_history_header(snapshot: &BrowserSnapshot, cx: &mut Context<ElyShell>)
                 .child(
                     div()
                         .text_xs()
-                        .text_color(rgb(colors::MUTED))
+                        .text_color(rgb(colors::muted()))
                         .child(format!("{} entries", snapshot.history_entries.len())),
                 )
                 .when(!snapshot.history_entries.is_empty(), |this| {
@@ -101,8 +101,8 @@ fn render_time_clear_confirmation(
     div()
         .rounded_md()
         .border_1()
-        .border_color(rgb(colors::ERROR))
+        .border_color(rgb(colors::error()))
-        .bg(rgb(colors::CANVAS_SOFT))
+        .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))
+        .border_color(rgb(colors::error()))
-        .bg(rgb(colors::CANVAS_SOFT))
+        .bg(rgb(colors::canvas_soft()))
         .px_4()
         .py_3()
         .flex()
@@ -181,13 +181,13 @@ fn render_domain_clear_confirmation(
                     div()
                         .text_sm()
                         .font_semibold()
-                        .text_color(rgb(colors::INK))
+                        .text_color(rgb(colors::ink()))
                         .child(format!("Confirm clearing {}", pending.host())),
                 )
                 .child(
                     div()
                         .text_xs()
-                        .text_color(rgb(colors::MUTED))
+                        .text_color(rgb(colors::muted()))
                         .child("This removes matching history in the current Space."),
                 ),
         )
@@ -223,10 +223,10 @@ fn render_history_list(snapshot: &BrowserSnapshot, cx: &mut Context<ElyShell>) -
         return div()
             .flex_1()
             .border_t_1()
-            .border_color(rgb(colors::HAIRLINE))
+            .border_color(rgb(colors::hairline()))
             .pt_5()
             .text_sm()
-            .text_color(rgb(colors::MUTED))
+            .text_color(rgb(colors::muted()))
             .child("History is empty for this Space and Profile.")
             .into_any_element();
     }
@@ -238,7 +238,7 @@ fn render_history_list(snapshot: &BrowserSnapshot, cx: &mut Context<ElyShell>) -
         .flex_col()
         .overflow_y_scrollbar()
         .border_t_1()
-        .border_color(rgb(colors::HAIRLINE))
+        .border_color(rgb(colors::hairline()))
         .children(
             snapshot
                 .history_entries
@@ -264,7 +264,7 @@ fn render_history_row(
         .id(SharedString::from(format!("history-{index}")))
         .py_3()
         .border_b_1()
-        .border_color(rgb(colors::HAIRLINE))
+        .border_color(rgb(colors::hairline()))
         .flex()
         .items_center()
         .justify_between()
@@ -280,7 +280,7 @@ fn render_history_row(
                         .text_sm()
                         .font_semibold()
                         .truncate()
-                        .text_color(rgb(colors::INK))
+                        .text_color(rgb(colors::ink()))
                         .child(entry.title().to_string()),
                 )
                 .child(
@@ -289,26 +289,27 @@ fn render_history_row(
                         .items_center()
                         .gap_2()
                         .text_xs()
-                        .text_color(rgb(colors::MUTED))
+                        .text_color(rgb(colors::muted()))
                         .child(div().min_w_0().truncate().child(entry.url().display_url()))
-                        .child(div().text_color(rgb(colors::MUTED_SOFT)).child("-"))
+                        .child(div().text_color(rgb(colors::muted_soft())).child("-"))
                         .child(
                             div()
-                                .text_color(rgb(colors::MUTED_SOFT))
+                                .text_color(rgb(colors::muted_soft()))
                                 .child(visit_count_label(entry.visit_count())),
                         )
-                        .child(div().text_color(rgb(colors::MUTED_SOFT)).child("-"))
+                        .child(div().text_color(rgb(colors::muted_soft())).child("-"))
                         .child(
                             div()
-                                .text_color(rgb(colors::MUTED_SOFT))
+                                .text_color(rgb(colors::muted_soft()))
                                 .child(visited_at_label(entry.visited_at())),
                         )
                         .when_some(source_tab_label, |this, source_tab_label| {
-                            this.child(div().text_color(rgb(colors::MUTED_SOFT)).child("-")).child(
+                            this.child(div().text_color(rgb(colors::muted_soft())).child("-"))
+                                .child(
                                     div()
                                         .max_w(px(180.0))
                                         .truncate()
-                                    .text_color(rgb(colors::MUTED_SOFT))
+                                        .text_color(rgb(colors::muted_soft()))
                                         .child(format!("Source: {source_tab_label}")),
                                 )
                         }),

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()

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))
+        .border_color(rgb(colors::hairline()))
-        .bg(rgb(colors::CANVAS_SOFT))
+        .bg(rgb(colors::canvas_soft()))
         .px_2()
         .py_1()
         .text_xs()
-        .text_color(rgb(colors::BODY))
+        .text_color(rgb(colors::body()))
         .child(truncate_text(&text, TEXT_LIMIT))
         .into_any_element()
 }
 
 fn render_paragraph(text: String) -> AnyElement {
-    div().text_xs().truncate().text_color(rgb(colors::MUTED_SOFT)).child(text).into_any_element()
+    div().text_xs().truncate().text_color(rgb(colors::muted_soft())).child(text).into_any_element()
 }
 
 fn markdown_preview_blocks(body: &str) -> Vec<MarkdownPreviewBlock> {

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(
+            .child(
+                div().max_w(px(520.0)).text_size(px(13.5)).text_color(rgb(colors::ink_2())).child(
                     "ELY plugins are sandboxed, theme-aware, and ship with their own \
                          controls in your sidebar — no Chrome extension framework required.",
-            ))
+                ),
+            )
             .child(self.render_search_row(cx))
             .into_any_element()
     }
@@ -93,7 +95,7 @@ impl ElyShell {
                     .flex()
                     .items_center()
                     .gap(px(10.0))
-                    .child(div().text_color(rgb(colors::INK_3)).child(IconName::Search))
+                    .child(div().text_color(rgb(colors::ink_3())).child(IconName::Search))
                     .child(div().flex_1().child(
                         Input::new(&self.plugin_search_input).appearance(false).cleanable(true),
                     )),
@@ -132,7 +134,7 @@ fn render_summary(snapshot: &BrowserSnapshot) -> AnyElement {
         .child(category_chip("All", true))
         .child(category_chip("Installed", false))
         .child(category_chip(sandbox_chip_label(snapshot), false))
-        .child(div().ml_auto().text_size(px(11.5)).text_color(rgb(colors::INK_3)).child(format!(
+        .child(div().ml_auto().text_size(px(11.5)).text_color(rgb(colors::ink_3())).child(format!(
             "{} signed · {} high-risk",
             snapshot.installed_plugins.len(),
             high_risk_plugin_count(snapshot)
@@ -142,7 +144,7 @@ fn render_summary(snapshot: &BrowserSnapshot) -> AnyElement {
 
 fn category_chip(label: &'static str, active: bool) -> AnyElement {
     let bg = if active { 0x1d1c1aff } else { 0xffffffb3 };
-    let text_color = if active { 0xffffff } else { colors::INK_2 };
+    let text_color = if active { 0xffffff } else { colors::ink_2() };
 
     div()
         .px(px(12.0))
@@ -201,13 +203,13 @@ fn render_no_match_state(needle: &str) -> AnyElement {
         .child(
             div()
                 .text_size(px(13.0))
-                .text_color(rgb(colors::INK))
+                .text_color(rgb(colors::ink()))
                 .child(format!("No plugins match \"{needle}\".")),
         )
         .child(
             div()
                 .text_size(px(11.5))
-                .text_color(rgb(colors::INK_3))
+                .text_color(rgb(colors::ink_3()))
                 .child("Try a different keyword."),
         )
         .into_any_element()
@@ -224,10 +226,10 @@ fn render_empty_state(cx: &mut Context<ElyShell>) -> AnyElement {
             div()
                 .text_size(px(15.0))
                 .font_weight(FontWeight(500.0))
-                .text_color(rgb(colors::INK))
+                .text_color(rgb(colors::ink()))
                 .child("No plugins yet."),
         )
-        .child(div().max_w(px(420.0)).text_size(px(13.0)).text_color(rgb(colors::INK_3)).child(
+        .child(div().max_w(px(420.0)).text_size(px(13.0)).text_color(rgb(colors::ink_3())).child(
             "Drop a signed .rplug package on ELY to extend the browser with sandboxed \
                      tools. Plugins ship with their own sidebar controls.",
         ))
@@ -246,7 +248,7 @@ fn render_plugin_card(
     let detail_route = format!("ely://plugin/{}", plugin.id().as_str());
     let enabled = plugin.enabled_for_profile(profile_kind);
     let status = if enabled { "Enabled" } else { "Disabled" };
-    let status_color = if enabled { colors::SUCCESS } else { colors::INK_4 };
+    let status_color = if enabled { colors::success() } else { colors::ink_4() };
     let high_risk = plugin.manifest().high_risk_permissions().count();
     let glyph = plugin.manifest().name().chars().next().unwrap_or('◇').to_string();
     let initial = glyph.to_uppercase().to_string();
@@ -298,14 +300,14 @@ fn render_plugin_card(
                             div()
                                 .text_size(px(13.5))
                                 .font_weight(FontWeight(600.0))
-                                .text_color(rgb(colors::INK))
+                                .text_color(rgb(colors::ink()))
                                 .truncate()
                                 .child(plugin.manifest().name().to_string()),
                         )
                         .child(
                             div()
                                 .text_size(px(11.0))
-                                .text_color(rgb(colors::INK_4))
+                                .text_color(rgb(colors::ink_4()))
                                 .truncate()
                                 .child(plugin.manifest().author().to_string()),
                         ),
@@ -325,7 +327,7 @@ fn render_plugin_card(
         .child(
             div()
                 .text_size(px(12.0))
-                .text_color(rgb(colors::INK_3))
+                .text_color(rgb(colors::ink_3()))
                 .max_h(px(48.0))
                 .overflow_hidden()
                 .child(plugin.manifest().description().to_string()),
@@ -337,9 +339,9 @@ fn render_plugin_card(
                 .gap(px(8.0))
                 .pt(px(8.0))
                 .border_t_1()
-                .border_color(rgba(colors::DIVIDER))
+                .border_color(rgba(colors::divider()))
                 .text_size(px(10.5))
-                .text_color(rgb(colors::INK_4))
+                .text_color(rgb(colors::ink_4()))
                 .child(format!("{} permissions", plugin.manifest().permissions().len()))
                 .child("·")
                 .child(format!("{high_risk} high risk"))
@@ -349,7 +351,7 @@ fn render_plugin_card(
                         .flex()
                         .items_center()
                         .gap(px(3.0))
-                        .text_color(rgb(colors::SUCCESS))
+                        .text_color(rgb(colors::success()))
                         .child("Sandboxed"),
                 ),
         )

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(

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))

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<ElyShell>) ->
     if snapshot.installed_plugins.is_empty() {
         return div()
             .border_t_1()
-            .border_color(rgb(colors::HAIRLINE))
+            .border_color(rgb(colors::hairline()))
             .pt_5()
             .text_sm()
-            .text_color(rgb(colors::MUTED))
+            .text_color(rgb(colors::muted()))
             .child("No plugins installed.")
             .into_any_element();
     }
@@ -259,7 +259,7 @@ fn render_plugin_list(snapshot: &BrowserSnapshot, cx: &mut Context<ElyShell>) ->
         .flex()
         .flex_col()
         .border_t_1()
-        .border_color(rgb(colors::HAIRLINE))
+        .border_color(rgb(colors::hairline()))
         .children(rows)
         .into_any_element()
 }
@@ -272,7 +272,7 @@ fn render_plugin_row(
 ) -> AnyElement {
     let high_risk_count = plugin.manifest().high_risk_permissions().count();
     let status_color =
-        if plugin.enabled_for_profile(profile_kind) { colors::SUCCESS } else { colors::MUTED };
+        if plugin.enabled_for_profile(profile_kind) { colors::success() } else { colors::muted() };
     let status_label = plugin_status_label(plugin, profile_kind);
     let plugin_id = plugin.id().clone();
     let plugin_name = plugin.manifest().name().to_string();
@@ -281,7 +281,7 @@ fn render_plugin_row(
     div()
         .py_3()
         .border_b_1()
-        .border_color(rgb(colors::HAIRLINE))
+        .border_color(rgb(colors::hairline()))
         .flex()
         .items_center()
         .justify_between()
@@ -297,14 +297,14 @@ fn render_plugin_row(
                         .text_sm()
                         .font_semibold()
                         .truncate()
-                        .text_color(rgb(colors::INK))
+                        .text_color(rgb(colors::ink()))
                         .child(plugin.manifest().name().to_string()),
                 )
                 .child(
                     div()
                         .text_xs()
                         .truncate()
-                        .text_color(rgb(colors::MUTED))
+                        .text_color(rgb(colors::muted()))
                         .child(plugin.id().as_str().to_string()),
                 ),
         )
@@ -314,7 +314,7 @@ fn render_plugin_row(
                 .items_center()
                 .gap_3()
                 .text_xs()
-                .text_color(rgb(colors::MUTED))
+                .text_color(rgb(colors::muted()))
                 .child(format!("{} permissions", plugin.manifest().permissions().len()))
                 .child(format!("{high_risk_count} high risk"))
                 .child(div().text_color(rgb(status_color)).child(status_label))
@@ -419,7 +419,7 @@ fn render_plugin_audit_list(snapshot: &BrowserSnapshot) -> AnyElement {
         .flex_col()
         .min_h_0()
         .gap_3()
-        .child(div().text_xs().font_semibold().text_color(rgb(colors::MUTED)).child("Audit"))
+        .child(div().text_xs().font_semibold().text_color(rgb(colors::muted())).child("Audit"))
         .child(
             div()
                 .flex_1()
@@ -435,7 +435,7 @@ fn render_plugin_audit_row(event: &PluginAuditEvent) -> AnyElement {
     div()
         .py_2()
         .border_b_1()
-        .border_color(rgb(colors::HAIRLINE))
+        .border_color(rgb(colors::hairline()))
         .flex()
         .items_center()
         .justify_between()
@@ -445,11 +445,11 @@ fn render_plugin_audit_row(event: &PluginAuditEvent) -> AnyElement {
             div()
                 .min_w_0()
                 .truncate()
-                .text_color(rgb(colors::BODY))
+                .text_color(rgb(colors::body()))
                 .child(event.plugin_id().as_str().to_string()),
         )
         .child(
-            div().text_color(rgb(colors::MUTED)).child(plugin_audit_action_label(event.action())),
+            div().text_color(rgb(colors::muted())).child(plugin_audit_action_label(event.action())),
         )
         .into_any_element()
 }

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))
+        .border_color(rgb(colors::hairline()))
-        .bg(rgb(colors::CANVAS_SOFT))
+        .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))
+                        .border_color(rgb(colors::hairline()))
-                        .bg(rgb(colors::CANVAS))
+                        .bg(rgb(colors::canvas()))
                         .px_3()
                         .py_2()
                         .text_xs()
                         .font_semibold()
-                        .text_color(rgb(colors::INK))
+                        .text_color(rgb(colors::ink()))
                         .child(format!("{} items", inventory.total_items())),
                 )
                 .child(
@@ -108,8 +108,8 @@ fn render_inventory_header(
 
 fn file_message(notice: Option<&str>, error: Option<&str>) -> Option<AnyElement> {
     notice
-        .map(|message| render_file_message(message, colors::SUCCESS))
+        .map(|message| render_file_message(message, colors::success()))
-        .or_else(|| error.map(|message| render_file_message(message, colors::ERROR)))
+        .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()

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<ElyShell>
     div()
         .rounded_md()
         .border_1()
-        .border_color(rgb(colors::HAIRLINE))
+        .border_color(rgb(colors::hairline()))
-        .bg(rgb(colors::CANVAS_SOFT))
+        .bg(rgb(colors::canvas_soft()))
         .px_4()
         .py_3()
         .flex()
@@ -116,14 +116,14 @@ fn render_history_summary(snapshot: &BrowserSnapshot, cx: &mut Context<ElyShell>
                             div()
                                 .text_sm()
                                 .font_semibold()
-                                .text_color(rgb(colors::INK))
+                                .text_color(rgb(colors::ink()))
                                 .child(snapshot.history_recording_policy.name()),
                         )
                         .child(
                             div()
                                 .text_xs()
                                 .truncate()
-                                .text_color(rgb(colors::MUTED))
+                                .text_color(rgb(colors::muted()))
                                 .child(snapshot.history_recording_policy.detail()),
                         ),
                 ),
@@ -133,7 +133,7 @@ fn render_history_summary(snapshot: &BrowserSnapshot, cx: &mut Context<ElyShell>
                 .flex()
                 .items_center()
                 .gap_2()
-                .child(div().text_xs().font_semibold().text_color(rgb(colors::MUTED)).child(
+                .child(div().text_xs().font_semibold().text_color(rgb(colors::muted())).child(
                     format!("{} Profile entries", snapshot.active_profile_history_entry_count),
                 ))
                 .child(
@@ -164,7 +164,7 @@ fn render_history_clear_controls(confirming_clear: bool, cx: &mut Context<ElyShe
         .child(
             div()
                 .text_sm()
-                .text_color(rgb(colors::MUTED))
+                .text_color(rgb(colors::muted()))
                 .child("Clear all history saved for this Profile."),
         )
         .child(
@@ -184,8 +184,8 @@ fn render_clear_history_confirmation(cx: &mut Context<ElyShell>) -> AnyElement {
     div()
         .rounded_md()
         .border_1()
-        .border_color(rgb(colors::ERROR))
+        .border_color(rgb(colors::error()))
-        .bg(rgb(colors::CANVAS_SOFT))
+        .bg(rgb(colors::canvas_soft()))
         .px_4()
         .py_3()
         .flex()
@@ -202,13 +202,13 @@ fn render_clear_history_confirmation(cx: &mut Context<ElyShell>) -> AnyElement {
                     div()
                         .text_sm()
                         .font_semibold()
-                        .text_color(rgb(colors::INK))
+                        .text_color(rgb(colors::ink()))
                         .child("Confirm history clearing"),
                 )
                 .child(
                     div()
                         .text_xs()
-                        .text_color(rgb(colors::MUTED))
+                        .text_color(rgb(colors::muted()))
                         .child("This removes Profile history across every Space."),
                 ),
         )
@@ -244,7 +244,7 @@ fn render_privacy_settings_rows(
         .min_h_0()
         .overflow_y_scrollbar()
         .border_t_1()
-        .border_color(rgb(colors::HAIRLINE))
+        .border_color(rgb(colors::hairline()))
         .flex()
         .flex_col()
         .child(section_label("History"))
@@ -260,7 +260,7 @@ fn section_label(label: &'static str) -> AnyElement {
         .pb_2()
         .text_xs()
         .font_semibold()
-        .text_color(rgb(colors::MUTED))
+        .text_color(rgb(colors::muted()))
         .child(label)
         .into_any_element()
 }
@@ -308,7 +308,7 @@ fn render_diagnostics_policy_row(
     div()
         .py_3()
         .border_b_1()
-        .border_color(rgb(colors::HAIRLINE))
+        .border_color(rgb(colors::hairline()))
         .flex()
         .items_center()
         .justify_between()
@@ -335,14 +335,14 @@ fn render_diagnostics_policy_row(
                                 .text_sm()
                                 .font_semibold()
                                 .truncate()
-                                .text_color(rgb(colors::INK))
+                                .text_color(rgb(colors::ink()))
                                 .child(policy.name()),
                         )
                         .child(
                             div()
                                 .text_xs()
                                 .truncate()
-                                .text_color(rgb(colors::MUTED))
+                                .text_color(rgb(colors::muted()))
                                 .child(policy.detail()),
                         ),
                 ),
@@ -372,7 +372,7 @@ fn render_history_policy_row(
     div()
         .py_3()
         .border_b_1()
-        .border_color(rgb(colors::HAIRLINE))
+        .border_color(rgb(colors::hairline()))
         .flex()
         .items_center()
         .justify_between()
@@ -399,14 +399,14 @@ fn render_history_policy_row(
                                 .text_sm()
                                 .font_semibold()
                                 .truncate()
-                                .text_color(rgb(colors::INK))
+                                .text_color(rgb(colors::ink()))
                                 .child(policy.name()),
                         )
                         .child(
                             div()
                                 .text_xs()
                                 .truncate()
-                                .text_color(rgb(colors::MUTED))
+                                .text_color(rgb(colors::muted()))
                                 .child(policy.detail()),
                         ),
                 ),
@@ -441,15 +441,15 @@ fn diagnostics_icon(policy: DiagnosticsReportingPolicy) -> IconName {
 
 fn policy_color(policy: HistoryRecordingPolicy) -> u32 {
     match policy {
-        HistoryRecordingPolicy::Record => colors::SUCCESS,
+        HistoryRecordingPolicy::Record => colors::success(),
-        HistoryRecordingPolicy::Pause => colors::PRIMARY,
+        HistoryRecordingPolicy::Pause => colors::primary(),
     }
 }
 
 fn diagnostics_policy_color(policy: DiagnosticsReportingPolicy) -> u32 {
     match policy {
-        DiagnosticsReportingPolicy::Minimal => colors::SUCCESS,
+        DiagnosticsReportingPolicy::Minimal => colors::success(),
-        DiagnosticsReportingPolicy::Paused => colors::PRIMARY,
+        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 {

crates/ely_app/src/shell/internal_pages/profiles.rs

@@ -46,11 +46,11 @@ fn render_profiles_header(snapshot: &BrowserSnapshot, cx: &mut Context<ElyShell>
                 .flex()
                 .flex_col()
                 .gap_2()
-                .child(div().text_size(px(26.0)).text_color(rgb(colors::INK)).child("Profiles"))
+                .child(div().text_size(px(26.0)).text_color(rgb(colors::ink())).child("Profiles"))
                 .child(
                     div()
                         .text_sm()
-                        .text_color(rgb(colors::MUTED))
+                        .text_color(rgb(colors::muted()))
                         .child(format!("Active Space: {}", snapshot.active_space_name)),
                 ),
         )
@@ -62,7 +62,7 @@ fn render_profiles_header(snapshot: &BrowserSnapshot, cx: &mut Context<ElyShell>
                 .child(
                     div()
                         .text_xs()
-                        .text_color(rgb(colors::MUTED))
+                        .text_color(rgb(colors::muted()))
                         .child(format!("{} profiles", snapshot.profiles.len())),
                 )
                 .child(
@@ -90,7 +90,7 @@ fn render_profile_list(snapshot: &BrowserSnapshot, cx: &mut Context<ElyShell>) -
         .flex_col()
         .overflow_y_scrollbar()
         .border_t_1()
-        .border_color(rgb(colors::HAIRLINE))
+        .border_color(rgb(colors::hairline()))
         .children(snapshot.profiles.iter().enumerate().map(|(index, profile)| {
             render_profile_row(
                 index,
@@ -119,7 +119,7 @@ fn render_profile_row(
         .id(SharedString::from(format!("profile-{}", profile.id().as_str())))
         .py_3()
         .border_b_1()
-        .border_color(rgb(colors::HAIRLINE))
+        .border_color(rgb(colors::hairline()))
         .flex()
         .items_center()
         .justify_between()
@@ -142,14 +142,14 @@ fn render_profile_row(
                                 .text_sm()
                                 .font_semibold()
                                 .truncate()
-                                .text_color(rgb(colors::INK))
+                                .text_color(rgb(colors::ink()))
                                 .child(profile.name().to_string()),
                         )
                         .child(
                             div()
                                 .text_xs()
                                 .truncate()
-                                .text_color(rgb(colors::MUTED))
+                                .text_color(rgb(colors::muted()))
                                 .child(profile_detail_label(profile)),
                         ),
                 ),
@@ -184,7 +184,7 @@ fn profile_color_swatch(color_hex: u32) -> AnyElement {
         .h(px(14.0))
         .rounded_full()
         .border_1()
-        .border_color(rgb(colors::HAIRLINE_STRONG))
+        .border_color(rgb(colors::hairline_strong()))
         .bg(rgb(color_hex))
         .into_any_element()
 }
@@ -200,7 +200,7 @@ fn render_profile_default_action(
         return div()
             .text_xs()
             .font_semibold()
-            .text_color(rgb(colors::SUCCESS))
+            .text_color(rgb(colors::success()))
             .child("Default")
             .into_any_element();
     }
@@ -237,7 +237,7 @@ fn render_profile_action(
         return div()
             .text_xs()
             .font_semibold()
-            .text_color(rgb(colors::SUCCESS))
+            .text_color(rgb(colors::success()))
             .child("Active")
             .into_any_element();
     }

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()

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<ElyShell>
     div()
         .rounded_md()
         .border_1()
-        .border_color(rgb(colors::HAIRLINE))
+        .border_color(rgb(colors::hairline()))
-        .bg(rgb(colors::CANVAS_SOFT))
+        .bg(rgb(colors::canvas_soft()))
         .px_4()
         .py_3()
         .flex()
@@ -83,7 +83,7 @@ fn render_search_summary(search_engine: SearchEngine, cx: &mut Context<ElyShell>
                 .flex()
                 .items_center()
                 .gap_3()
-                .child(div().text_color(rgb(colors::PRIMARY)).child(IconName::Search))
+                .child(div().text_color(rgb(colors::primary())).child(IconName::Search))
                 .child(
                     div()
                         .min_w_0()
@@ -94,14 +94,14 @@ fn render_search_summary(search_engine: SearchEngine, cx: &mut Context<ElyShell>
                             div()
                                 .text_sm()
                                 .font_semibold()
-                                .text_color(rgb(colors::INK))
+                                .text_color(rgb(colors::ink()))
                                 .child(search_engine.name()),
                         )
                         .child(
                             div()
                                 .text_xs()
                                 .truncate()
-                                .text_color(rgb(colors::MUTED))
+                                .text_color(rgb(colors::muted()))
                                 .child(search_engine.host()),
                         ),
                 ),
@@ -115,7 +115,7 @@ fn render_search_summary(search_engine: SearchEngine, cx: &mut Context<ElyShell>
                     div()
                         .text_xs()
                         .font_semibold()
-                        .text_color(rgb(colors::SUCCESS))
+                        .text_color(rgb(colors::success()))
                         .child("Saved locally"),
                 )
                 .child(
@@ -141,7 +141,7 @@ fn render_search_engines(active_engine: SearchEngine, cx: &mut Context<ElyShell>
         .flex_col()
         .overflow_y_scrollbar()
         .border_t_1()
-        .border_color(rgb(colors::HAIRLINE))
+        .border_color(rgb(colors::hairline()))
         .children(SearchEngine::ALL.iter().copied().enumerate().map(|(index, search_engine)| {
             render_search_engine_row(index, search_engine, active_engine, cx)
         }))
@@ -159,7 +159,7 @@ fn render_search_engine_row(
     div()
         .py_3()
         .border_b_1()
-        .border_color(rgb(colors::HAIRLINE))
+        .border_color(rgb(colors::hairline()))
         .flex()
         .items_center()
         .justify_between()
@@ -186,14 +186,14 @@ fn render_search_engine_row(
                                 .text_sm()
                                 .font_semibold()
                                 .truncate()
-                                .text_color(rgb(colors::INK))
+                                .text_color(rgb(colors::ink()))
                                 .child(search_engine.name()),
                         )
                         .child(
                             div()
                                 .text_xs()
                                 .truncate()
-                                .text_color(rgb(colors::MUTED))
+                                .text_color(rgb(colors::muted()))
                                 .child(search_engine.host()),
                         ),
                 ),
@@ -217,7 +217,7 @@ fn search_engine_icon(selected: bool) -> IconName {
 }
 
 fn search_engine_icon_color(selected: bool) -> u32 {
-    if selected { colors::PRIMARY } else { colors::MUTED_SOFT }
+    if selected { colors::primary() } else { colors::muted_soft() }
 }
 
 fn search_engine_button_label(selected: bool) -> &'static str {

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))
+        .map(|message| (message, colors::error(), IconName::TriangleAlert))
-        .or_else(|| notice.map(|message| (message, colors::SUCCESS, IconName::CircleCheck)))
+        .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))
+        .border_color(rgb(colors::hairline()))
-        .bg(rgb(colors::CANVAS_SOFT))
+        .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() }
 }

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<ElyShell
                             div()
                                 .text_sm()
                                 .font_semibold()
-                                .text_color(rgb(colors::INK))
+                                .text_color(rgb(colors::ink()))
                                 .child("Auto Archive"),
                         )
                         .child(
                             div()
                                 .text_xs()
-                                .text_color(rgb(colors::MUTED))
+                                .text_color(rgb(colors::muted()))
                                 .child("Current Space policy for idle unpinned tabs."),
                         ),
                 )
@@ -273,13 +276,13 @@ fn render_favorite_limit_section(
                             div()
                                 .text_sm()
                                 .font_semibold()
-                                .text_color(rgb(colors::INK))
+                                .text_color(rgb(colors::ink()))
                                 .child("Favorite Limit"),
                         )
                         .child(
                             div()
                                 .text_xs()
-                                .text_color(rgb(colors::MUTED))
+                                .text_color(rgb(colors::muted()))
                                 .child("Maximum cross-space Favorites visible in the sidebar."),
                         ),
                 )
@@ -287,7 +290,7 @@ fn render_favorite_limit_section(
                     div()
                         .text_xs()
                         .font_semibold()
-                        .text_color(rgb(colors::MUTED))
+                        .text_color(rgb(colors::muted()))
                         .child(favorite_limit.label()),
                 ),
         )
@@ -311,13 +314,13 @@ fn render_archive_policy_option(
 ) -> AnyElement {
     let selected = active_space.archive_policy() == &option.policy;
     let policy = option.policy.clone();
-    let border = if selected { colors::PRIMARY } else { colors::HAIRLINE };
+    let border = if selected { colors::primary() } else { colors::hairline() };
 
     div()
         .rounded_md()
         .border_1()
         .border_color(rgb(border))
-        .bg(rgb(colors::CANVAS_SOFT))
+        .bg(rgb(colors::canvas_soft()))
         .px_4()
         .py_3()
         .flex()
@@ -343,14 +346,14 @@ fn render_archive_policy_option(
                             div()
                                 .text_sm()
                                 .font_semibold()
-                                .text_color(rgb(colors::INK))
+                                .text_color(rgb(colors::ink()))
                                 .child(option.label),
                         )
                         .child(
                             div()
                                 .text_xs()
                                 .truncate()
-                                .text_color(rgb(colors::MUTED))
+                                .text_color(rgb(colors::muted()))
                                 .child(option.detail),
                         ),
                 ),
@@ -376,13 +379,13 @@ fn render_favorite_limit_option(
     cx: &mut Context<ElyShell>,
 ) -> AnyElement {
     let selected = limit == active_limit;
-    let border = if selected { colors::PRIMARY } else { colors::HAIRLINE };
+    let border = if selected { colors::primary() } else { colors::hairline() };
 
     div()
         .rounded_md()
         .border_1()
         .border_color(rgb(border))
-        .bg(rgb(colors::CANVAS_SOFT))
+        .bg(rgb(colors::canvas_soft()))
         .px_4()
         .py_3()
         .flex()
@@ -408,14 +411,14 @@ fn render_favorite_limit_option(
                             div()
                                 .text_sm()
                                 .font_semibold()
-                                .text_color(rgb(colors::INK))
+                                .text_color(rgb(colors::ink()))
                                 .child(limit.label()),
                         )
                         .child(
                             div()
                                 .text_xs()
                                 .truncate()
-                                .text_color(rgb(colors::MUTED))
+                                .text_color(rgb(colors::muted()))
                                 .child(limit.detail()),
                         ),
                 ),
@@ -449,5 +452,5 @@ fn policy_icon(selected: bool) -> IconName {
 }
 
 fn policy_icon_color(selected: bool) -> u32 {
-    if selected { colors::PRIMARY } else { colors::MUTED }
+    if selected { colors::primary() } else { colors::muted() }
 }

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))
+        .border_color(rgb(colors::hairline()))
-        .bg(rgb(colors::CANVAS_SOFT))
+        .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))
+        .border_color(rgb(colors::hairline()))
-        .bg(rgb(colors::CANVAS_SOFT))
+        .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()

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<ElyShell>) -> AnyElement {
     div()
         .rounded_md()
         .border_1()
-        .border_color(rgb(colors::ERROR))
+        .border_color(rgb(colors::error()))
-        .bg(rgb(colors::CANVAS_SOFT))
+        .bg(rgb(colors::canvas_soft()))
         .px_4()
         .py_3()
         .flex()
@@ -167,13 +167,13 @@ fn render_clear_confirmation(cx: &mut Context<ElyShell>) -> AnyElement {
                     div()
                         .text_sm()
                         .font_semibold()
-                        .text_color(rgb(colors::INK))
+                        .text_color(rgb(colors::ink()))
                         .child("Confirm permission clearing"),
                 )
                 .child(
                     div()
                         .text_xs()
-                        .text_color(rgb(colors::MUTED))
+                        .text_color(rgb(colors::muted()))
                         .child("Each cleared permission records a local audit event."),
                 ),
         )
@@ -212,10 +212,10 @@ fn render_site_permissions_list(
         return div()
             .flex_1()
             .border_t_1()
-            .border_color(rgb(colors::HAIRLINE))
+            .border_color(rgb(colors::hairline()))
             .pt_5()
             .text_sm()
-            .text_color(rgb(colors::MUTED))
+            .text_color(rgb(colors::muted()))
             .child("No site permissions are configured for this Profile.")
             .into_any_element();
     }
@@ -227,7 +227,7 @@ fn render_site_permissions_list(
         .flex_col()
         .overflow_y_scrollbar()
         .border_t_1()
-        .border_color(rgb(colors::HAIRLINE))
+        .border_color(rgb(colors::hairline()))
         .children(
             snapshot
                 .site_permissions
@@ -250,7 +250,7 @@ fn render_site_permission_entry(
     div()
         .py_3()
         .border_b_1()
-        .border_color(rgb(colors::HAIRLINE))
+        .border_color(rgb(colors::hairline()))
         .flex()
         .items_center()
         .justify_between()
@@ -277,10 +277,10 @@ fn render_site_permission_entry(
                                 .text_sm()
                                 .font_semibold()
                                 .truncate()
-                                .text_color(rgb(colors::INK))
+                                .text_color(rgb(colors::ink()))
                                 .child(entry.origin().as_str().to_string()),
                         )
-                        .child(div().text_xs().truncate().text_color(rgb(colors::MUTED)).child(
+                        .child(div().text_xs().truncate().text_color(rgb(colors::muted())).child(
                             format!("{} - {}", entry.feature().label(), entry.decision().label()),
                         )),
                 ),
@@ -325,8 +325,10 @@ fn site_settings_route(origin: &SiteOrigin) -> String {
 
 fn permission_decision_color(decision: SitePermissionDecision) -> u32 {
     match decision {
-        SitePermissionDecision::AllowOnce | SitePermissionDecision::AllowAlways => colors::SUCCESS,
+        SitePermissionDecision::AllowOnce | SitePermissionDecision::AllowAlways => {
-        SitePermissionDecision::DenyAlways => colors::ERROR,
+            colors::success()
+        }
+        SitePermissionDecision::DenyAlways => colors::error(),
     }
 }
 

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::AllowOnce | SitePermissionDecision::AllowAlways => {
-        SitePermissionDecision::DenyAlways => colors::ERROR,
+            colors::success()
+        }
+        SitePermissionDecision::DenyAlways => colors::error(),
     }
 }
 

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<ElyShell>) -> AnyEleme
                         .items_center()
                         .gap_3()
                         .text_size(px(26.0))
-                        .text_color(rgb(colors::INK))
+                        .text_color(rgb(colors::ink()))
                         .child(IconName::CircleCheck)
                         .child("Sleeping Tab"),
                 )
@@ -110,7 +110,7 @@ fn render_sleep_header(tab: &BrowserTab, cx: &mut Context<ElyShell>) -> AnyEleme
                     div()
                         .text_sm()
                         .truncate()
-                        .text_color(rgb(colors::MUTED))
+                        .text_color(rgb(colors::muted()))
                         .child(format!("Sleeping {}", tab.display_url())),
                 ),
         )

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();
     }

crates/ely_app/src/shell/internal_pages/spaces.rs

@@ -52,12 +52,12 @@ fn render_spaces_header(snapshot: &BrowserSnapshot, cx: &mut Context<ElyShell>)
                 .flex()
                 .flex_col()
                 .gap_2()
-                .child(div().text_size(px(26.0)).text_color(rgb(colors::INK)).child("Spaces"))
+                .child(div().text_size(px(26.0)).text_color(rgb(colors::ink())).child("Spaces"))
                 .child(
                     div()
                         .text_sm()
                         .truncate()
-                        .text_color(rgb(colors::MUTED))
+                        .text_color(rgb(colors::muted()))
                         .child(format!("Profile: {}", snapshot.active_profile_name)),
                 ),
         )
@@ -103,7 +103,7 @@ fn render_spaces_header(snapshot: &BrowserSnapshot, cx: &mut Context<ElyShell>)
                         .gap_2()
                         .text_xs()
                         .font_semibold()
-                        .text_color(rgb(colors::MUTED))
+                        .text_color(rgb(colors::muted()))
                         .child(IconName::GalleryVerticalEnd)
                         .child(format!("{} spaces", snapshot.spaces.len())),
                 ),
@@ -113,9 +113,9 @@ fn render_spaces_header(snapshot: &BrowserSnapshot, cx: &mut Context<ElyShell>)
 
 fn render_space_file_message(notice: Option<&str>, error: Option<&str>) -> AnyElement {
     let (message, color, icon) = if let Some(error) = error {
-        (error, colors::ERROR, IconName::TriangleAlert)
+        (error, colors::error(), IconName::TriangleAlert)
     } else if let Some(notice) = notice {
-        (notice, colors::SUCCESS, IconName::CircleCheck)
+        (notice, colors::success(), IconName::CircleCheck)
     } else {
         return div().into_any_element();
     };
@@ -143,11 +143,11 @@ fn render_active_space_summary(snapshot: &BrowserSnapshot) -> AnyElement {
         return div()
             .rounded_md()
             .border_1()
-            .border_color(rgb(colors::ERROR))
+            .border_color(rgb(colors::error()))
             .px_4()
             .py_3()
             .text_sm()
-            .text_color(rgb(colors::ERROR))
+            .text_color(rgb(colors::error()))
             .child("Active Space is unavailable.")
             .into_any_element();
     };
@@ -155,8 +155,8 @@ fn render_active_space_summary(snapshot: &BrowserSnapshot) -> AnyElement {
     div()
         .rounded_md()
         .border_1()
-        .border_color(rgb(colors::HAIRLINE))
+        .border_color(rgb(colors::hairline()))
-        .bg(rgb(colors::CANVAS_SOFT))
+        .bg(rgb(colors::canvas_soft()))
         .px_4()
         .py_3()
         .flex()
@@ -174,19 +174,19 @@ fn render_active_space_summary(snapshot: &BrowserSnapshot) -> AnyElement {
                         div()
                             .text_sm()
                             .font_semibold()
-                            .text_color(rgb(colors::INK))
+                            .text_color(rgb(colors::ink()))
                             .child(active_space.name().to_string()),
                     )
                     .child(
                         div()
                             .text_xs()
                             .truncate()
-                            .text_color(rgb(colors::MUTED))
+                            .text_color(rgb(colors::muted()))
                             .child(space_detail_label(active_space, &snapshot.profiles)),
                     ),
             ),
         )
-        .child(div().text_xs().font_semibold().text_color(rgb(colors::SUCCESS)).child("Active"))
+        .child(div().text_xs().font_semibold().text_color(rgb(colors::success())).child("Active"))
         .into_any_element()
 }
 
@@ -202,7 +202,7 @@ fn render_spaces_list(
         .flex_col()
         .overflow_y_scrollbar()
         .border_t_1()
-        .border_color(rgb(colors::HAIRLINE))
+        .border_color(rgb(colors::hairline()))
         .children(snapshot.spaces.iter().enumerate().map(|(index, space)| {
             render_space_row(
                 index,
@@ -232,7 +232,7 @@ fn render_space_row(
         .id(SharedString::from(format!("settings-space-{}", space.id().as_str())))
         .py_3()
         .border_b_1()
-        .border_color(rgb(colors::HAIRLINE))
+        .border_color(rgb(colors::hairline()))
         .flex()
         .items_center()
         .justify_between()
@@ -249,14 +249,14 @@ fn render_space_row(
                             .text_sm()
                             .font_semibold()
                             .truncate()
-                            .text_color(rgb(colors::INK))
+                            .text_color(rgb(colors::ink()))
                             .child(space.name().to_string()),
                     )
                     .child(
                         div()
                             .text_xs()
                             .truncate()
-                            .text_color(rgb(colors::MUTED))
+                            .text_color(rgb(colors::muted()))
                             .child(space_detail_label(space, &snapshot.profiles)),
                     ),
             ),
@@ -282,7 +282,7 @@ fn render_trashed_spaces_list(
         .flex_col()
         .gap_2()
         .border_t_1()
-        .border_color(rgb(colors::HAIRLINE))
+        .border_color(rgb(colors::hairline()))
         .pt_3()
         .child(render_trashed_spaces_header(expired_count, cx))
         .children(
@@ -298,7 +298,7 @@ fn render_trashed_spaces_header(expired_count: usize, cx: &mut Context<ElyShell>
         div()
             .text_xs()
             .font_semibold()
-            .text_color(rgb(colors::MUTED_SOFT))
+            .text_color(rgb(colors::muted_soft()))
             .child("30 day retention")
             .into_any_element()
     } else {
@@ -323,7 +323,7 @@ fn render_trashed_spaces_header(expired_count: usize, cx: &mut Context<ElyShell>
             div()
                 .text_xs()
                 .font_semibold()
-                .text_color(rgb(colors::MUTED))
+                .text_color(rgb(colors::muted()))
                 .child("Recently Trashed"),
         )
         .child(action)
@@ -361,14 +361,14 @@ fn render_trashed_space_row(
                                 .text_sm()
                                 .font_semibold()
                                 .truncate()
-                                .text_color(rgb(colors::INK))
+                                .text_color(rgb(colors::ink()))
                                 .child(trashed_space.space().name().to_string()),
                         )
                         .child(
                             div()
                                 .text_xs()
                                 .truncate()
-                                .text_color(rgb(colors::MUTED))
+                                .text_color(rgb(colors::muted()))
                                 .child(trashed_space_detail_label(trashed_space, now)),
                         ),
                 ),
@@ -393,14 +393,14 @@ fn space_avatar(space: &Space) -> AnyElement {
         .h(px(28.0))
         .rounded_md()
         .border_1()
-        .border_color(rgb(colors::HAIRLINE_STRONG))
+        .border_color(rgb(colors::hairline_strong()))
         .bg(rgb(space.accent_hex()))
         .flex()
         .items_center()
         .justify_center()
         .text_xs()
         .font_semibold()
-        .text_color(rgb(colors::CANVAS))
+        .text_color(rgb(colors::canvas()))
         .child(space.icon().to_string())
         .into_any_element()
 }

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))
+        .text_color(rgb(colors::ink_3()))
-        .child(div().text_color(rgb(colors::ACCENT)).child(IconName::Globe))
+        .child(div().text_color(rgb(colors::accent())).child(IconName::Globe))
         .child(format!(
             "{SYNC_SERVICE_NAME} · {}",
             connection_label(snapshot.sync_status.connection())
@@ -71,7 +71,7 @@ fn render_serif_headline() -> AnyElement {
         .font_family(SERIF_FAMILY)
         .text_size(px(46.0))
         .font_weight(FontWeight(400.0))
-        .text_color(rgb(colors::INK))
+        .text_color(rgb(colors::ink()))
         .child("Your tabs, on every device.")
         .into_any_element()
 }
@@ -80,7 +80,7 @@ fn render_intro_paragraph() -> AnyElement {
     div()
         .max_w(px(440.0))
         .text_size(px(14.0))
-        .text_color(rgb(colors::INK_2))
+        .text_color(rgb(colors::ink_2()))
         .child(
             "ELY keeps tabs, workspaces, pinned items, and history mirrored across your \
              devices — encrypted in your hands and replayed at the edge.",
@@ -97,7 +97,7 @@ fn render_metrics_card(snapshot: &BrowserSnapshot, cx: &mut Context<ElyShell>) -
         .flex()
         .flex_col()
         .gap(px(16.0))
-        .child(div().text_size(px(12.5)).text_color(rgb(colors::INK_3)).child("Local queue"))
+        .child(div().text_size(px(12.5)).text_color(rgb(colors::ink_3())).child("Local queue"))
         .child(
             div()
                 .grid()
@@ -106,12 +106,12 @@ fn render_metrics_card(snapshot: &BrowserSnapshot, cx: &mut Context<ElyShell>) -
                 .child(render_metric(
                     "Pending",
                     snapshot.sync_status.pending_objects(),
-                    colors::INK,
+                    colors::ink(),
                 ))
                 .child(render_metric(
                     "Failed",
                     snapshot.sync_status.failed_objects(),
-                    colors::ERROR,
+                    colors::error(),
                 )),
         )
         .child(render_reset_button(cx))
@@ -123,7 +123,7 @@ fn render_metric(label: &'static str, value: usize, color: u32) -> AnyElement {
         .flex()
         .flex_col()
         .gap_1()
-        .child(div().text_size(px(10.5)).text_color(rgb(colors::INK_4)).child(label))
+        .child(div().text_size(px(10.5)).text_color(rgb(colors::ink_4())).child(label))
         .child(
             div()
                 .text_size(px(20.0))
@@ -144,7 +144,7 @@ fn render_reset_button(cx: &mut Context<ElyShell>) -> AnyElement {
                 .px(px(12.0))
                 .py(px(7.0))
                 .rounded(px(8.0))
-                .bg(rgba(colors::ACCENT))
+                .bg(rgba(colors::accent()))
                 .text_size(px(12.0))
                 .font_weight(FontWeight(500.0))
                 .text_color(rgb(0xfff5e6))
@@ -163,7 +163,7 @@ fn render_reset_button(cx: &mut Context<ElyShell>) -> AnyElement {
                 .bg(rgba(BUTTON_BG))
                 .text_size(px(12.0))
                 .font_weight(FontWeight(500.0))
-                .text_color(rgb(colors::INK_2))
+                .text_color(rgb(colors::ink_2()))
                 .cursor_pointer()
                 .hover(|style| style.bg(rgba(BUTTON_BG_HOVER)))
                 .active(|style| style.opacity(0.85))
@@ -201,13 +201,13 @@ fn render_what_syncs_card(snapshot: &BrowserSnapshot, cx: &mut Context<ElyShell>
                     div()
                         .text_size(px(13.0))
                         .font_weight(FontWeight(500.0))
-                        .text_color(rgb(colors::INK))
+                        .text_color(rgb(colors::ink()))
                         .child("What syncs"),
                 )
                 .child(
                     div()
                         .text_size(px(11.0))
-                        .text_color(rgb(colors::INK_3))
+                        .text_color(rgb(colors::ink_3()))
                         .child(format!("{} kinds tracked", snapshot.sync_status.objects().len())),
                 ),
         )
@@ -235,7 +235,7 @@ fn render_sync_object_row(
         .gap(px(10.0))
         .py(px(8.0))
         .border_b_1()
-        .border_color(rgba(colors::DIVIDER))
+        .border_color(rgba(colors::divider()))
         .child(render_state_dot(status.state()))
         .child(
             div()
@@ -248,10 +248,10 @@ fn render_sync_object_row(
                     div()
                         .text_size(px(13.0))
                         .font_weight(FontWeight(500.0))
-                        .text_color(rgb(colors::INK))
+                        .text_color(rgb(colors::ink()))
                         .child(sync_object_kind_label(status.kind())),
                 )
-                .child(div().text_size(px(11.0)).text_color(rgb(colors::INK_4)).child(format!(
+                .child(div().text_size(px(11.0)).text_color(rgb(colors::ink_4())).child(format!(
                     "{} local · {}",
                     status.local_count(),
                     sync_object_state_label(status.state())
@@ -263,9 +263,9 @@ fn render_sync_object_row(
 
 fn render_state_dot(state: SyncObjectState) -> AnyElement {
     let color = match state {
-        SyncObjectState::LocalOnly => colors::INK_4,
+        SyncObjectState::LocalOnly => colors::ink_4(),
-        SyncObjectState::Paused => colors::INK_5,
+        SyncObjectState::Paused => colors::ink_5(),
-        SyncObjectState::PrivacyControlled => colors::ACCENT,
+        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}")))

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()

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(
-                .child(div().text_sm().text_color(rgb(colors::MUTED)).child(format!(
+                    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::Loading => colors::primary(),
-        TabState::Ready => colors::SUCCESS,
+        TabState::Ready => colors::success(),
-        TabState::Crashed => colors::ERROR,
+        TabState::Crashed => colors::error(),
-        TabState::Discarded | TabState::Archived => colors::MUTED,
+        TabState::Discarded | TabState::Archived => colors::muted(),
     }
 }
 
 fn download_state_color(state: &DownloadState) -> u32 {
     match state {
-        DownloadState::InProgress => colors::PRIMARY,
+        DownloadState::InProgress => colors::primary(),
-        DownloadState::Completed => colors::SUCCESS,
+        DownloadState::Completed => colors::success(),
-        DownloadState::Paused => colors::MUTED,
+        DownloadState::Paused => colors::muted(),
-        DownloadState::Cancelled | DownloadState::Failed => colors::ERROR,
+        DownloadState::Cancelled | DownloadState::Failed => colors::error(),
     }
 }

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))
+        .border_color(rgb(colors::hairline()))
-        .bg(rgb(colors::CANVAS_SOFT))
+        .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()

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<Self>) -> impl IntoElement {
+        // Resolve the active palette before anything else so every
+        // `colors::ink()` etc. call lower in the tree reads the right
+        // shade. `ThemeMode::System` defers to the OS preference via
+        // GPUI's `Window::appearance`; explicit Light / Dark wins.
+        let appearance = window.appearance();
+        let theme_mode = match &self.state {
+            ShellState::Ready(core) => {
+                core.snapshot().map(|s| s.appearance.theme_mode()).unwrap_or_default()
+            }
+            ShellState::StartupError(_) => ely_domain::ThemeMode::default(),
+        };
+        colors::set_mode(resolve_color_mode(theme_mode, appearance));
+
         match &self.state {
             ShellState::Ready(core) => match (core.snapshot(), core.active_tab().cloned()) {
                 (Ok(snapshot), Ok(active_tab)) => {
@@ -30,6 +43,24 @@ impl Render for ElyShell {
     }
 }
 
+fn resolve_color_mode(
+    theme_mode: ely_domain::ThemeMode,
+    window_appearance: gpui::WindowAppearance,
+) -> colors::Mode {
+    match theme_mode {
+        ely_domain::ThemeMode::Light => colors::Mode::Light,
+        ely_domain::ThemeMode::Dark => colors::Mode::Dark,
+        ely_domain::ThemeMode::System => match window_appearance {
+            gpui::WindowAppearance::Dark | gpui::WindowAppearance::VibrantDark => {
+                colors::Mode::Dark
+            }
+            gpui::WindowAppearance::Light | gpui::WindowAppearance::VibrantLight => {
+                colors::Mode::Light
+            }
+        },
+    }
+}
+
 impl ElyShell {
     fn render_browser(
         &mut self,
@@ -75,7 +106,7 @@ impl ElyShell {
             .on_mouse_up(MouseButton::Left, cx.listener(Self::on_window_mouse_up))
             .capture_key_down(cx.listener(Self::on_command_overlay_key_down))
             .font_family(SANS_FAMILY)
-            .text_color(rgb(colors::INK))
+            .text_color(rgb(colors::ink()))
             .child(render_wallpaper(snapshot.appearance.wallpaper()))
             .child(
                 div()
@@ -333,8 +364,8 @@ const COLLAPSE_THRESHOLD_PX: f32 = spacing::SHELL_INSET + DEFAULT_SIDEBAR_WIDTH_
 fn render_error(message: String) -> AnyElement {
     div()
         .size_full()
-        .bg(rgb(colors::CANVAS))
+        .bg(rgb(colors::canvas()))
-        .text_color(rgb(colors::ERROR))
+        .text_color(rgb(colors::error()))
         .flex()
         .items_center()
         .justify_center()

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))
+                    .bg(rgb(colors::accent()))
-                    .text_color(rgb(colors::SURFACE_CARD))
+                    .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()

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<Self>,
     ) -> Option<AnyElement> {
         let first_tab_id = layout.panes().first()?.tab_id().clone();
-        let bg = if active { colors::GLASS_3 } else { 0x00000000 };
+        let bg = if active { colors::glass_3() } else { 0x00000000 };
 
         Some(
             div()
@@ -381,12 +381,12 @@ impl ElyShell {
                 .flex()
                 .items_center()
                 .cursor_pointer()
-                .hover(|style| style.bg(rgba(colors::GLASS_3)))
+                .hover(|style| style.bg(rgba(colors::glass_3())))
                 .active(|style| style.opacity(0.82))
                 .on_click(cx.listener(move |shell, _, window, cx| {
                     shell.select_tab(&first_tab_id, window, cx);
                 }))
-                .child(div().text_color(rgb(colors::ACCENT)).child(IconName::Frame))
+                .child(div().text_color(rgb(colors::accent())).child(IconName::Frame))
                 .child(
                     div()
                         .min_w_0()
@@ -398,13 +398,13 @@ impl ElyShell {
                                 .text_size(px(13.0))
                                 .font_weight(gpui::FontWeight(500.0))
                                 .truncate()
-                                .text_color(rgb(colors::INK))
+                                .text_color(rgb(colors::ink()))
                                 .child(layout.title().to_string()),
                         )
                         .child(
                             div()
                                 .text_size(px(11.0))
-                                .text_color(rgb(colors::INK_4))
+                                .text_color(rgb(colors::ink_4()))
                                 .child(format!("{} panes", layout.pane_count())),
                         ),
                 )

crates/ely_app/src/shell/tab_groups.rs

@@ -108,8 +108,8 @@ impl ElyShell {
         cx: &mut Context<Self>,
     ) -> AnyElement {
         let group_id = group.id().clone();
-        let background = if active { colors::SURFACE_CARD } else { colors::CANVAS };
+        let background = if active { colors::surface_card() } else { colors::canvas() };
-        let border = if active { colors::PRIMARY } else { colors::HAIRLINE };
+        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}")),
                     ),
             )

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(

crates/ely_design_system/src/colors.rs

@@ -1,46 +1,218 @@
-// Ink scale — text hierarchy with warm undertones
+//! Theme-aware color tokens.
-pub const INK: u32 = 0x1d1c1a;
+//!
-pub const INK_2: u32 = 0x3a3733;
+//! Each token is a function (not a `const`) so the same call site can
-pub const INK_3: u32 = 0x6b6660;
+//! resolve to the light or dark value depending on the current mode.
-pub const INK_4: u32 = 0x9a948c;
+//! Mode lives in a thread-local that the GPUI render impl sets once
-pub const INK_5: u32 = 0xc8c2b8;
+//! 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)
+use std::cell::Cell;
-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
 
-// Stroke & divider — subtle borders (use with rgba)
+#[derive(Clone, Copy, Debug, Default, Eq, PartialEq)]
-pub const STROKE: u32 = 0x281e1414; // 8% warm dark
+pub enum Mode {
-pub const STROKE_2: u32 = 0x281e140a; // 4% warm dark
+    #[default]
-pub const DIVIDER: u32 = 0x281e140f; // 6% warm dark
+    Light,
+    Dark,
+}
 
-// Accent — warm clay palette
+thread_local! {
-pub const ACCENT: u32 = 0xc96442;
+    static CURRENT_MODE: Cell<Mode> = const { Cell::new(Mode::Light) };
-pub const ACCENT_LIGHT: u32 = 0xd97757;
+}
-pub const ACCENT_HOVER: u32 = 0xc9644214; // 8% opacity for row highlights
 
-// Secondary accents
+/// Resolve the mode used by every subsequent [`Mode`]-keyed function
-pub const VIOLET: u32 = 0x7c6cf7;
+/// call on this thread. The Render impl calls this once at the top of
-pub const ROSE: u32 = 0xec6a8e;
+/// every frame so widgets that read e.g. [`ink`] return the right
-pub const MINT: u32 = 0x4fb59a;
+/// shade without owning a `Mode` parameter.
+pub fn set_mode(mode: Mode) {
+    CURRENT_MODE.with(|cell| cell.set(mode));
+}
 
-// Canvas backgrounds (opaque fallbacks)
+#[must_use]
-pub const CANVAS: u32 = 0xf0eee9;
+pub fn mode() -> Mode {
-pub const CANVAS_SOFT: u32 = 0xfafaf7;
+    CURRENT_MODE.with(Cell::get)
-pub const SURFACE_CARD: u32 = 0xffffff;
+}
 
-// Semantic
+#[must_use]
-pub const SUCCESS: u32 = 0x2f7d68;
+fn pick(light: u32, dark: u32) -> u32 {
-pub const ERROR: u32 = 0xcf2d56;
+    match mode() {
+        Mode::Light => light,
+        Mode::Dark => dark,
+    }
+}
 
-// Legacy aliases — preserved for compatibility during migration
+// Ink scale — text hierarchy with warm undertones. In dark mode the
-pub const PRIMARY: u32 = ACCENT;
+// hierarchy inverts: brightest at the top, darkest at the bottom,
-pub const PRIMARY_ACTIVE: u32 = 0xb55a3c;
+// keeping the same step contrast (~12 % luminance gaps) as the light
-pub const BODY: u32 = INK_2;
+// scale so headings + secondary copy still pull the reader's eye in
-pub const MUTED: u32 = INK_3;
+// the right order.
-pub const MUTED_SOFT: u32 = INK_4;
+#[must_use]
-pub const HAIRLINE: u32 = 0xe6e5e0;
+pub fn ink() -> u32 {
-pub const HAIRLINE_STRONG: u32 = 0xcfcdc4;
+    pick(0x1d1c1a, 0xf2efe9)
-pub const SURFACE_STRONG: u32 = 0xe6e5e0;
+}
+#[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);
+    }
+}

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,
-};