ZacharyZhang-NY/ELY-Browser
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Redesign shell with glass morphism and warm clay palette

Browse Source 
Update design system: warm clay accent (#c96442), ink scale for text
hierarchy, glass surface tokens with alpha, redesigned spacing/radius
tokens. Restructure shell layout: sidebar and main pane as rounded
glass panels, pill-shaped omnibar inside main pane, workspace tiles,
section labels, profile avatar in sidebar footer.
This commit is contained in:
ZacharyZhang-NY
2026-05-09 15:42:10 -04:00
parent f3a8671bd5
commit 483bda5567
6 changed files with 373 additions and 221 deletions
Download Patch File Download Diff File Expand all files Collapse all files
crates/ely_app/src/shell/render.rs
+259 -156
View File
@@ -1,14 +1,15 @@
use ely_browser_core::BrowserSnapshot; use ely_browser_core::BrowserSnapshot;
use ely_design_system::{ELY_THEME, colors, spacing}; use ely_design_system::{colors, spacing};
use ely_domain::{ArchivedTab, BrowserTab, Profile, Space}; use ely_domain::{ArchivedTab, BrowserTab, Profile, Space};
use gpui::{ use gpui::{
AnyElement, Context, InteractiveElement, IntoElement, ParentElement, Render, SharedString, AnyElement, Context, InteractiveElement, IntoElement, ParentElement, Render, SharedString,
StatefulInteractiveElement, Styled, Window, div, px, rgb, StatefulInteractiveElement, Styled, Window, div, px, rgb, rgba,
}; };
use gpui_component::{ use gpui_component::{
IconName, Selectable, Sizable, StyledExt, IconName, Selectable, Sizable, StyledExt,
button::{Button, ButtonVariants}, button::{Button, ButtonVariants},
input::Input, input::Input,
scroll::ScrollableElement,
}; };
use super::sidebar::{collapsed_sidebar_active, render_command_bar_identity}; use super::sidebar::{collapsed_sidebar_active, render_command_bar_identity};
@@ -64,33 +65,46 @@ impl ElyShell {
.on_action(cx.listener(Self::on_toggle_sidebar)) .on_action(cx.listener(Self::on_toggle_sidebar))
.on_action(cx.listener(Self::on_zoom_in)) .on_action(cx.listener(Self::on_zoom_in))
.on_action(cx.listener(Self::on_zoom_out)) .on_action(cx.listener(Self::on_zoom_out))
.bg(rgb(ELY_THEME.canvas)) .bg(rgb(colors::CANVAS))
.text_color(rgb(ELY_THEME.ink)) .text_color(rgb(colors::INK))
.p(px(spacing::SHELL_INSET))
.gap(px(spacing::SIDEBAR_MAIN_GAP))
.flex()
.child(self.render_sidebar(&snapshot, sidebar_width, sidebar_collapsed, cx))
.child(self.render_main_pane(&snapshot, &active_tab, sidebar_collapsed, cx))
.into_any_element()
}
fn render_main_pane(
&mut self,
snapshot: &BrowserSnapshot,
active_tab: &BrowserTab,
sidebar_collapsed: bool,
cx: &mut Context<Self>,
) -> AnyElement {
div()
.flex_1()
.h_full()
.min_w_0()
.flex() .flex()
.flex_col() .flex_col()
.child(self.render_command_bar( .rounded(px(spacing::RADIUS_CARD))
&snapshot, .bg(rgba(colors::GLASS))
&active_tab, .overflow_hidden()
sidebar_width, .child(self.render_topbar(snapshot, active_tab, sidebar_collapsed, cx))
sidebar_collapsed,
cx,
))
.child( .child(
div() div()
.flex()
.flex_1() .flex_1()
.overflow_hidden() .overflow_hidden()
.child(self.render_sidebar(&snapshot, sidebar_width, sidebar_collapsed, cx)) .child(self.render_content_area(snapshot, active_tab, cx)),
.child(self.render_content_area(&snapshot, &active_tab, cx)),
) )
.into_any_element() .into_any_element()
} }
fn render_command_bar( fn render_topbar(
&mut self, &mut self,
snapshot: &BrowserSnapshot, snapshot: &BrowserSnapshot,
active_tab: &BrowserTab, active_tab: &BrowserTab,
sidebar_width: f32,
sidebar_collapsed: bool, sidebar_collapsed: bool,
cx: &mut Context<Self>, cx: &mut Context<Self>,
) -> AnyElement { ) -> AnyElement {
@@ -101,25 +115,41 @@ impl ElyShell {
let pinned_tooltip = if active_tab.flags().pinned { "Unpin Tab" } else { "Pin Tab" }; let pinned_tooltip = if active_tab.flags().pinned { "Unpin Tab" } else { "Pin Tab" };
div() div()
.h(px(spacing::COMMAND_BAR_HEIGHT)) .h(px(spacing::TOPBAR_HEIGHT))
.pl(px(96.0)) .px(px(14.0))
.pr_4() .gap_2()
.gap_3()
.flex() .flex()
.items_center() .items_center()
.border_b_1() .flex_shrink_0()
.border_color(rgb(colors::HAIRLINE)) .children(if sidebar_collapsed {
.child(render_command_bar_identity(snapshot, sidebar_width, sidebar_collapsed)) Some(render_command_bar_identity(snapshot, 56.0, true))
} else {
None
})
.child( .child(
div() div()
.flex_1() .flex_1()
.h(px(40.0)) .h(px(spacing::OMNIBAR_HEIGHT))
.rounded_md() .rounded(px(spacing::RADIUS_PILL))
.border_1() .bg(rgba(colors::GLASS_2))
.border_color(rgb(colors::HAIRLINE_STRONG)) .px(px(14.0))
.bg(rgb(colors::SURFACE_CARD)) .flex()
.px_3() .items_center()
.child(Input::new(&self.command_input).appearance(false).cleanable(true)), .gap(px(10.0))
.child(
div()
.text_color(rgb(colors::INK_3))
.child(IconName::Search),
)
.child(
div()
.flex_1()
.child(
Input::new(&self.command_input)
.appearance(false)
.cleanable(true),
),
),
) )
.child( .child(
Button::new("toggle-pinned-tab") Button::new("toggle-pinned-tab")
@@ -141,7 +171,7 @@ impl ElyShell {
) )
.child( .child(
Button::new("new-tab") Button::new("new-tab")
.primary() .ghost()
.small() .small()
.icon(IconName::Plus) .icon(IconName::Plus)
.tooltip("New Tab") .tooltip("New Tab")
@@ -166,12 +196,19 @@ impl ElyShell {
.h_full() .h_full()
.flex() .flex()
.flex_col() .flex_col()
.gap_3() .rounded(px(spacing::RADIUS_CARD))
.p_3() .bg(rgba(colors::GLASS))
.border_r_1() .overflow_hidden()
.border_color(rgb(colors::HAIRLINE)) .child(self.render_sidebar_header(snapshot))
.bg(rgb(colors::CANVAS)) .child(
.child(section_label("Favorites")) div()
.flex_1()
.overflow_y_scrollbar()
.p(px(10.0))
.flex()
.flex_col()
.gap(px(6.0))
.child(section_label("FAVORITES"))
.children(snapshot.favorites.iter().map(|tab| { .children(snapshot.favorites.iter().map(|tab| {
self.render_favorite_row( self.render_favorite_row(
tab, tab,
@@ -180,7 +217,7 @@ impl ElyShell {
cx, cx,
) )
})) }))
.child(section_label("Pinned")) .child(section_label("PINNED"))
.children(snapshot.pinned_tabs.iter().map(|tab| { .children(snapshot.pinned_tabs.iter().map(|tab| {
self.render_pinned_row( self.render_pinned_row(
tab, tab,
@@ -189,26 +226,101 @@ impl ElyShell {
cx, cx,
) )
})) }))
.child(section_label("Space")) .child(section_label("SPACES"))
.children(snapshot.spaces.iter().map(|space| { .children(snapshot.spaces.iter().map(|space| {
self.render_space_row(space, space.id() == &snapshot.active_space_id, cx) self.render_space_row(
space,
space.id() == &snapshot.active_space_id,
cx,
)
})) }))
.child(section_label("Tabs")) .child(section_label("TABS"))
.children(self.render_sidebar_tab_rows(snapshot, cx)) .children(self.render_sidebar_tab_rows(snapshot, cx))
.child(section_label("Archive")) .child(section_label("ARCHIVE"))
.children( .children(
snapshot snapshot
.archived_tabs .archived_tabs
.iter() .iter()
.rev() .rev()
.map(|archived_tab| self.render_archived_row(archived_tab, snapshot, cx)), .map(|archived_tab| {
self.render_archived_row(archived_tab, snapshot, cx)
}),
),
) )
.child(div().flex_1()) .child(self.render_sidebar_footer(snapshot))
.child(section_label("Profile")) .into_any_element()
}
fn render_sidebar_header(&self, snapshot: &BrowserSnapshot) -> AnyElement {
let space_name = snapshot
.spaces
.iter()
.find(|s| s.id() == &snapshot.active_space_id)
.map(|s| s.name().to_string())
.unwrap_or_default();
div()
.pt(px(48.0))
.px(px(14.0))
.pb(px(10.0))
.flex()
.flex_col()
.gap_1()
.flex_shrink_0()
.child( .child(
div() div()
.text_sm() .text_size(px(15.0))
.text_color(rgb(colors::BODY)) .font_semibold()
.text_color(rgb(colors::INK))
.child("ELY Browser"),
)
.child(
div()
.text_size(px(11.0))
.text_color(rgb(colors::INK_3))
.child(space_name),
)
.into_any_element()
}
fn render_sidebar_footer(&self, snapshot: &BrowserSnapshot) -> AnyElement {
div()
.px(px(14.0))
.py(px(12.0))
.flex()
.items_center()
.gap_2()
.flex_shrink_0()
.border_t_1()
.border_color(rgba(colors::DIVIDER))
.child(
div()
.size(px(26.0))
.rounded_full()
.bg(rgb(colors::ACCENT))
.flex()
.items_center()
.justify_center()
.child(
div()
.text_size(px(10.0))
.font_semibold()
.text_color(rgb(colors::SURFACE_CARD))
.child(
snapshot
.active_profile_name
.chars()
.next()
.unwrap_or('P')
.to_uppercase()
.to_string(),
),
),
)
.child(
div()
.text_size(px(13.0))
.text_color(rgb(colors::INK_2))
.child(snapshot.active_profile_name.clone()), .child(snapshot.active_profile_name.clone()),
) )
.into_any_element() .into_any_element()
@@ -221,34 +333,32 @@ impl ElyShell {
cx: &mut Context<Self>, cx: &mut Context<Self>,
) -> AnyElement { ) -> AnyElement {
let space_id = space.id().clone(); let space_id = space.id().clone();
let background = if active { colors::SURFACE_CARD } else { colors::CANVAS }; let bg_color = if active { colors::GLASS_3 } else { 0x00000000 };
let border = if active { colors::HAIRLINE_STRONG } else { colors::HAIRLINE }; let text_color = if active { colors::INK } else { colors::INK_2 };
div() div()
.id(SharedString::from(format!("space-{}", space.id().as_str()))) .id(SharedString::from(format!("space-{}", space.id().as_str())))
.rounded_md() .rounded(px(spacing::RADIUS_NAV))
.border_1() .px(px(10.0))
.border_color(rgb(border)) .py(px(7.0))
.bg(rgb(background)) .gap(px(10.0))
.px_3()
.py_2()
.gap_2()
.flex() .flex()
.items_center() .items_center()
.cursor_pointer() .cursor_pointer()
.hover(|style| style.bg(rgb(colors::SURFACE_CARD))) .hover(|style| style.bg(rgba(colors::GLASS_3)))
.active(|style| style.opacity(0.82)) .active(|style| style.opacity(0.82))
.bg(rgba(bg_color))
.on_click(cx.listener(move |shell, _, window, cx| { .on_click(cx.listener(move |shell, _, window, cx| {
shell.select_space(&space_id, window, cx); shell.select_space(&space_id, window, cx);
})) }))
.child(render_workspace_tile(space))
.child( .child(
div() div()
.text_xs() .text_size(px(13.0))
.font_semibold() .font_weight(gpui::FontWeight(500.0))
.text_color(rgb(colors::PRIMARY)) .text_color(rgb(text_color))
.child(space.icon().to_string()), .child(space.name().to_string()),
) )
.child(div().text_sm().font_semibold().child(space.name().to_string()))
.into_any_element() .into_any_element()
} }
@@ -259,45 +369,7 @@ impl ElyShell {
active: bool, active: bool,
cx: &mut Context<Self>, cx: &mut Context<Self>,
) -> AnyElement { ) -> AnyElement {
let tab_id = tab.id().clone(); self.render_nav_row(tab, profiles, active, IconName::Star, colors::ACCENT, cx)
let background = if active { colors::SURFACE_CARD } else { colors::CANVAS };
let border = if active { colors::HAIRLINE_STRONG } else { colors::HAIRLINE };
let detail = sidebar_tab_detail(tab, profiles);
div()
.id(SharedString::from(format!("favorite-{}", tab.id().as_str())))
.rounded_md()
.border_1()
.border_color(rgb(border))
.bg(rgb(background))
.px_3()
.py_2()
.gap_2()
.flex()
.items_center()
.cursor_pointer()
.hover(|style| style.bg(rgb(colors::SURFACE_CARD)))
.active(|style| style.opacity(0.82))
.on_click(cx.listener(move |shell, _, window, cx| {
shell.select_tab(&tab_id, window, cx);
}))
.child(div().text_color(rgb(colors::PRIMARY)).child(IconName::Star))
.child(
div()
.min_w_0()
.flex()
.flex_col()
.gap_1()
.child(
div()
.text_sm()
.font_semibold()
.text_color(rgb(colors::INK))
.child(tab.title().to_string()),
)
.child(div().text_xs().text_color(rgb(colors::MUTED)).child(detail)),
)
.into_any_element()
} }
fn render_pinned_row( fn render_pinned_row(
@@ -306,45 +378,48 @@ impl ElyShell {
profiles: &[Profile], profiles: &[Profile],
active: bool, active: bool,
cx: &mut Context<Self>, cx: &mut Context<Self>,
) -> AnyElement {
self.render_nav_row(tab, profiles, active, IconName::Asterisk, colors::INK_3, cx)
}
fn render_nav_row(
&mut self,
tab: &BrowserTab,
_profiles: &[Profile],
active: bool,
icon: IconName,
icon_color: u32,
cx: &mut Context<Self>,
) -> AnyElement { ) -> AnyElement {
let tab_id = tab.id().clone(); let tab_id = tab.id().clone();
let background = if active { colors::SURFACE_CARD } else { colors::CANVAS }; let bg_color = if active { colors::GLASS_3 } else { 0x00000000 };
let border = if active { colors::HAIRLINE_STRONG } else { colors::HAIRLINE }; let text_color = if active { colors::INK } else { colors::INK_2 };
let detail = sidebar_tab_detail(tab, profiles);
div() div()
.id(SharedString::from(format!("pinned-{}", tab.id().as_str()))) .id(SharedString::from(format!("nav-{}", tab.id().as_str())))
.rounded_md() .rounded(px(spacing::RADIUS_NAV))
.border_1() .px(px(10.0))
.border_color(rgb(border)) .py(px(7.0))
.bg(rgb(background)) .gap(px(10.0))
.px_3()
.py_2()
.gap_2()
.flex() .flex()
.items_center() .items_center()
.cursor_pointer() .cursor_pointer()
.hover(|style| style.bg(rgb(colors::SURFACE_CARD))) .hover(|style| style.bg(rgba(colors::GLASS_3)))
.active(|style| style.opacity(0.82)) .active(|style| style.opacity(0.82))
.bg(rgba(bg_color))
.on_click(cx.listener(move |shell, _, window, cx| { .on_click(cx.listener(move |shell, _, window, cx| {
shell.select_tab(&tab_id, window, cx); shell.select_tab(&tab_id, window, cx);
})) }))
.child(div().text_color(rgb(colors::MUTED)).child(IconName::Asterisk)) .child(div().text_color(rgb(icon_color)).child(icon))
.child( .child(
div() div()
.min_w_0() .min_w_0()
.flex() .overflow_hidden()
.flex_col() .text_size(px(13.0))
.gap_1() .font_weight(gpui::FontWeight(500.0))
.child( .text_color(rgb(text_color))
div()
.text_sm()
.font_semibold()
.text_color(rgb(colors::INK))
.child(tab.title().to_string()), .child(tab.title().to_string()),
) )
.child(div().text_xs().text_color(rgb(colors::MUTED)).child(detail)),
)
.into_any_element() .into_any_element()
} }
@@ -355,34 +430,39 @@ impl ElyShell {
cx: &mut Context<Self>, cx: &mut Context<Self>,
) -> AnyElement { ) -> AnyElement {
let tab_id = tab.id().clone(); let tab_id = tab.id().clone();
let background = if active { colors::SURFACE_CARD } else { colors::CANVAS }; let bg_color = if active { colors::GLASS_3 } else { 0x00000000 };
let border = if active { colors::HAIRLINE_STRONG } else { colors::HAIRLINE }; let text_color = if active { colors::INK } else { colors::INK_2 };
div() div()
.id(SharedString::from(tab.id().as_str().to_string())) .id(SharedString::from(tab.id().as_str().to_string()))
.rounded_md() .rounded(px(spacing::RADIUS_NAV))
.border_1() .px(px(10.0))
.border_color(rgb(border)) .py(px(7.0))
.bg(rgb(background)) .gap(px(6.0))
.px_3()
.py_2()
.gap_1()
.flex() .flex()
.flex_col() .flex_col()
.cursor_pointer() .cursor_pointer()
.hover(|style| style.bg(rgb(colors::SURFACE_CARD))) .hover(|style| style.bg(rgba(colors::GLASS_3)))
.active(|style| style.opacity(0.82)) .active(|style| style.opacity(0.82))
.bg(rgba(bg_color))
.on_click(cx.listener(move |shell, _, window, cx| { .on_click(cx.listener(move |shell, _, window, cx| {
shell.select_tab(&tab_id, window, cx); shell.select_tab(&tab_id, window, cx);
})) }))
.child( .child(
div() div()
.text_sm() .text_size(px(13.0))
.font_semibold() .font_weight(gpui::FontWeight(500.0))
.text_color(rgb(colors::INK)) .text_color(rgb(text_color))
.overflow_hidden()
.child(tab.title().to_string()), .child(tab.title().to_string()),
) )
.child(div().text_xs().text_color(rgb(colors::MUTED)).child(tab.display_url())) .child(
div()
.text_size(px(11.0))
.text_color(rgb(colors::INK_4))
.overflow_hidden()
.child(tab.display_url()),
)
.into_any_element() .into_any_element()
} }
@@ -398,22 +478,19 @@ impl ElyShell {
div() div()
.id(SharedString::from(format!("archived-{}", tab.id().as_str()))) .id(SharedString::from(format!("archived-{}", tab.id().as_str())))
.rounded_md() .rounded(px(spacing::RADIUS_NAV))
.border_1() .px(px(10.0))
.border_color(rgb(colors::HAIRLINE)) .py(px(7.0))
.bg(rgb(colors::CANVAS)) .gap(px(10.0))
.px_3()
.py_2()
.gap_2()
.flex() .flex()
.items_center() .items_center()
.cursor_pointer() .cursor_pointer()
.hover(|style| style.bg(rgb(colors::SURFACE_CARD))) .hover(|style| style.bg(rgba(colors::GLASS_3)))
.active(|style| style.opacity(0.82)) .active(|style| style.opacity(0.82))
.on_click(cx.listener(move |shell, _, window, cx| { .on_click(cx.listener(move |shell, _, window, cx| {
shell.restore_archived_tab(&tab_id, window, cx); shell.restore_archived_tab(&tab_id, window, cx);
})) }))
.child(div().text_color(rgb(colors::MUTED)).child(IconName::Undo2)) .child(div().text_color(rgb(colors::INK_4)).child(IconName::Undo2))
.child( .child(
div() div()
.min_w_0() .min_w_0()
@@ -422,12 +499,19 @@ impl ElyShell {
.gap_1() .gap_1()
.child( .child(
div() div()
.text_sm() .text_size(px(13.0))
.font_semibold() .font_weight(gpui::FontWeight(500.0))
.text_color(rgb(colors::INK)) .text_color(rgb(colors::INK_2))
.overflow_hidden()
.child(tab.title().to_string()), .child(tab.title().to_string()),
) )
.child(div().text_xs().text_color(rgb(colors::MUTED)).child(detail)), .child(
div()
.text_size(px(11.0))
.text_color(rgb(colors::INK_4))
.overflow_hidden()
.child(detail),
),
) )
.into_any_element() .into_any_element()
} }
@@ -446,7 +530,30 @@ fn render_error(message: String) -> AnyElement {
} }
fn section_label(label: &'static str) -> impl IntoElement { fn section_label(label: &'static str) -> impl IntoElement {
div().text_xs().font_semibold().text_color(rgb(colors::MUTED)).child(label) div()
.pt(px(8.0))
.pb(px(4.0))
.px(px(10.0))
.text_size(px(10.5))
.font_weight(gpui::FontWeight(500.0))
.text_color(rgb(colors::INK_4))
.child(label)
}
fn render_workspace_tile(space: &Space) -> impl IntoElement {
div()
.size(px(32.0))
.rounded(px(9.0))
.bg(rgba(colors::GLASS_3))
.flex()
.items_center()
.justify_center()
.child(
div()
.text_size(px(14.0))
.text_color(rgb(colors::ACCENT))
.child(space.icon().to_string()),
)
} }
fn active_sidebar_width(snapshot: &BrowserSnapshot) -> Result<f32, String> { fn active_sidebar_width(snapshot: &BrowserSnapshot) -> Result<f32, String> {
@@ -459,10 +566,6 @@ fn active_sidebar_width(snapshot: &BrowserSnapshot) -> Result<f32, String> {
Ok(f32::from(active_space.sidebar_width_px())) Ok(f32::from(active_space.sidebar_width_px()))
} }
fn sidebar_tab_detail(tab: &BrowserTab, profiles: &[Profile]) -> String {
format!("{} - {}", tab.display_url(), tab_profile_label(tab, profiles))
}
pub(super) fn tab_profile_label(tab: &BrowserTab, profiles: &[Profile]) -> String { pub(super) fn tab_profile_label(tab: &BrowserTab, profiles: &[Profile]) -> String {
profiles profiles
.iter() .iter()
crates/ely_app/src/shell/sidebar.rs
+17 -16
View File
@@ -3,7 +3,7 @@ use ely_design_system::{colors, spacing};
use ely_domain::{ use ely_domain::{
ArchivedTab, BrowserTab, COLLAPSED_SIDEBAR_WIDTH_PX, DEFAULT_SIDEBAR_WIDTH_PX, Space, ArchivedTab, BrowserTab, COLLAPSED_SIDEBAR_WIDTH_PX, DEFAULT_SIDEBAR_WIDTH_PX, Space,
}; };
use gpui::{AnyElement, Context, IntoElement, ParentElement, Styled, Window, div, px, rgb}; use gpui::{AnyElement, Context, IntoElement, ParentElement, Styled, Window, div, px, rgb, rgba};
use gpui_component::{ use gpui_component::{
IconName, Selectable, Sizable, StyledExt, IconName, Selectable, Sizable, StyledExt,
button::{Button, ButtonVariants}, button::{Button, ButtonVariants},
@@ -36,9 +36,8 @@ impl ElyShell {
.items_center() .items_center()
.gap_2() .gap_2()
.p_2() .p_2()
.border_r_1() .rounded(px(spacing::RADIUS_CARD))
.border_color(rgb(colors::HAIRLINE)) .bg(rgba(colors::GLASS))
.bg(rgb(colors::CANVAS))
.children(snapshot.favorites.iter().enumerate().map(|(index, tab)| { .children(snapshot.favorites.iter().enumerate().map(|(index, tab)| {
self.render_compact_tab_button( self.render_compact_tab_button(
("compact-favorite", index), ("compact-favorite", index),
@@ -174,23 +173,20 @@ impl ElyShell {
pub(super) fn render_command_bar_identity( pub(super) fn render_command_bar_identity(
snapshot: &BrowserSnapshot, snapshot: &BrowserSnapshot,
sidebar_width: f32, _sidebar_width: f32,
sidebar_collapsed: bool, sidebar_collapsed: bool,
) -> AnyElement { ) -> AnyElement {
let width = sidebar_width - spacing::XL;
if sidebar_collapsed { if sidebar_collapsed {
return div() return div()
.w(px(width))
.flex() .flex()
.items_center() .items_center()
.justify_center()
.child( .child(
div() div()
.size(px(28.0)) .size(px(28.0))
.rounded_md() .rounded(px(spacing::RADIUS_NAV))
.bg(rgb(colors::PRIMARY)) .bg(rgb(colors::ACCENT))
.text_color(rgb(colors::CANVAS)) .text_color(rgb(colors::SURFACE_CARD))
.text_xs() .text_size(px(10.0))
.font_semibold() .font_semibold()
.flex() .flex()
.items_center() .items_center()
@@ -201,15 +197,20 @@ pub(super) fn render_command_bar_identity(
} }
div() div()
.w(px(width))
.flex() .flex()
.items_center() .items_center()
.gap_2() .gap_2()
.child(div().text_size(px(18.0)).font_semibold().child("ELY Browser"))
.child( .child(
div() div()
.text_xs() .text_size(px(15.0))
.text_color(rgb(colors::MUTED)) .font_semibold()
.text_color(rgb(colors::INK))
.child("ELY Browser"),
)
.child(
div()
.text_size(px(11.0))
.text_color(rgb(colors::INK_3))
.child(snapshot.active_space_name.clone()), .child(snapshot.active_space_name.clone()),
) )
.into_any_element() .into_any_element()
crates/ely_design_system/src/colors.rs
+43 -11
View File
@@ -1,14 +1,46 @@
pub const PRIMARY: u32 = 0xf54e00; // Ink scale — text hierarchy with warm undertones
pub const PRIMARY_ACTIVE: u32 = 0xd04200; pub const INK: u32 = 0x1d1c1a;
pub const INK: u32 = 0x26251e; pub const INK_2: u32 = 0x3a3733;
pub const BODY: u32 = 0x5a5852; pub const INK_3: u32 = 0x6b6660;
pub const MUTED: u32 = 0x807d72; pub const INK_4: u32 = 0x9a948c;
pub const MUTED_SOFT: u32 = 0xa09c92; pub const INK_5: u32 = 0xc8c2b8;
pub const HAIRLINE: u32 = 0xe6e5e0;
pub const HAIRLINE_STRONG: u32 = 0xcfcdc4; // Glass surfaces — semi-transparent whites (use with rgba)
pub const CANVAS: u32 = 0xf7f7f4; 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)
pub const STROKE: u32 = 0x281e1414; // 8% warm dark
pub const STROKE_2: u32 = 0x281e140a; // 4% warm dark
pub const DIVIDER: u32 = 0x281e140f; // 6% warm dark
// Accent — warm clay palette
pub const ACCENT: u32 = 0xc96442;
pub const ACCENT_LIGHT: u32 = 0xd97757;
pub const ACCENT_HOVER: u32 = 0xc9644214; // 8% opacity for row highlights
// Secondary accents
pub const VIOLET: u32 = 0x7c6cf7;
pub const ROSE: u32 = 0xec6a8e;
pub const MINT: u32 = 0x4fb59a;
// Canvas backgrounds (opaque fallbacks)
pub const CANVAS: u32 = 0xf0eee9;
pub const CANVAS_SOFT: u32 = 0xfafaf7; pub const CANVAS_SOFT: u32 = 0xfafaf7;
pub const SURFACE_CARD: u32 = 0xffffff; pub const SURFACE_CARD: u32 = 0xffffff;
pub const SURFACE_STRONG: u32 = 0xe6e5e0;
pub const SUCCESS: u32 = 0x1f8a65; // Semantic
pub const SUCCESS: u32 = 0x2f7d68;
pub const ERROR: u32 = 0xcf2d56; pub const ERROR: u32 = 0xcf2d56;
// Legacy aliases — preserved for compatibility during migration
pub const PRIMARY: u32 = ACCENT;
pub const PRIMARY_ACTIVE: u32 = 0xb55a3c;
pub const BODY: u32 = INK_2;
pub const MUTED: u32 = INK_3;
pub const MUTED_SOFT: u32 = INK_4;
pub const HAIRLINE: u32 = 0xe6e5e0;
pub const HAIRLINE_STRONG: u32 = 0xcfcdc4;
pub const SURFACE_STRONG: u32 = 0xe6e5e0;
crates/ely_design_system/src/lib.rs
+3 -3
View File
@@ -22,10 +22,10 @@ pub const ELY_THEME: Theme = Theme {
canvas_soft: colors::CANVAS_SOFT, canvas_soft: colors::CANVAS_SOFT,
surface: colors::SURFACE_CARD, surface: colors::SURFACE_CARD,
ink: colors::INK, ink: colors::INK,
body: colors::BODY, body: colors::INK_2,
muted: colors::MUTED, muted: colors::INK_3,
hairline: colors::HAIRLINE, hairline: colors::HAIRLINE,
accent: colors::PRIMARY, accent: colors::ACCENT,
success: colors::SUCCESS, success: colors::SUCCESS,
error: colors::ERROR, error: colors::ERROR,
}; };
crates/ely_design_system/src/spacing.rs
+14 -2
View File
@@ -6,6 +6,18 @@ pub const MD: f32 = 20.0;
pub const LG: f32 = 24.0; pub const LG: f32 = 24.0;
pub const XL: f32 = 32.0; pub const XL: f32 = 32.0;
pub const XXL: f32 = 48.0; pub const XXL: f32 = 48.0;
pub const SIDEBAR_WIDTH: f32 = 280.0;
pub const SIDEBAR_WIDTH: f32 = 256.0;
pub const SIDEBAR_COLLAPSED_WIDTH: f32 = 56.0; pub const SIDEBAR_COLLAPSED_WIDTH: f32 = 56.0;
pub const COMMAND_BAR_HEIGHT: f32 = 64.0; pub const SHELL_INSET: f32 = 16.0;
pub const SIDEBAR_MAIN_GAP: f32 = 12.0;
pub const TOPBAR_HEIGHT: f32 = 54.0;
pub const OMNIBAR_HEIGHT: f32 = 36.0;
pub const COMMAND_BAR_HEIGHT: f32 = 54.0;
pub const RADIUS_CARD: f32 = 18.0;
pub const RADIUS_PANE: f32 = 14.0;
pub const RADIUS_PILL: f32 = 999.0;
pub const RADIUS_NAV: f32 = 8.0;
pub const RADIUS_BUTTON: f32 = 8.0;
pub const RADIUS_INPUT: f32 = 9.0;
crates/ely_design_system/src/typography.rs
+11 -7
View File
@@ -5,10 +5,14 @@ pub struct TypeToken {
pub weight: u16, pub weight: u16,
} }
pub const DISPLAY_MD: TypeToken = TypeToken { size_px: 26.0, line_height: 1.25, weight: 400 }; pub const HERO: TypeToken = TypeToken { size_px: 64.0, line_height: 1.05, weight: 400 };
pub const DISPLAY_LG: TypeToken = TypeToken { size_px: 48.0, line_height: 1.05, weight: 400 };
pub const TITLE_MD: TypeToken = TypeToken { size_px: 18.0, line_height: 1.4, weight: 600 }; pub const DISPLAY_MD: TypeToken = TypeToken { size_px: 34.0, line_height: 1.1, weight: 400 };
pub const TITLE_LG: TypeToken = TypeToken { size_px: 22.0, line_height: 1.3, weight: 400 };
pub const BODY_MD: TypeToken = TypeToken { size_px: 16.0, line_height: 1.5, weight: 400 }; pub const TITLE_MD: TypeToken = TypeToken { size_px: 18.0, line_height: 1.4, weight: 500 };
pub const BODY_LG: TypeToken = TypeToken { size_px: 16.0, line_height: 1.5, weight: 400 };
pub const CAPTION: TypeToken = TypeToken { size_px: 13.0, line_height: 1.4, weight: 400 }; pub const BODY_MD: TypeToken = TypeToken { size_px: 14.0, line_height: 1.5, weight: 400 };
pub const LABEL: TypeToken = TypeToken { size_px: 13.0, line_height: 1.4, weight: 500 };
pub const CAPTION: TypeToken = TypeToken { size_px: 12.0, line_height: 1.4, weight: 500 };
pub const SECTION_LABEL: TypeToken = TypeToken { size_px: 10.5, line_height: 1.4, weight: 500 };
pub const META: TypeToken = TypeToken { size_px: 10.0, line_height: 1.4, weight: 500 };