From 852ce923aed97b423a1040e0917ac55525f9c81b Mon Sep 17 00:00:00 2001 From: Jason Lee Date: Sun, 26 Jan 2025 14:11:51 +0800 Subject: [PATCH] input: Update `carret` style. (#585) - 1px width. - Add `cx.theme.carret` variable for color and default use foreground color. - Reduce height to match with font size. https://github.com/user-attachments/assets/d16a51eb-2c9a-4586-8b0d-67922a738002 --- crates/ui/src/input/element.rs | 8 +++--- crates/ui/src/theme.rs | 52 ++++++++++++++++++---------------- 2 files changed, 32 insertions(+), 28 deletions(-) diff --git a/crates/ui/src/input/element.rs b/crates/ui/src/input/element.rs index 85f0403d..3b599098 100644 --- a/crates/ui/src/input/element.rs +++ b/crates/ui/src/input/element.rs @@ -11,7 +11,6 @@ use super::TextInput; const RIGHT_MARGIN: Pixels = px(5.); const BOTTOM_MARGIN: Pixels = px(20.); -const CURSOR_INSET: Pixels = px(0.5); pub(super) struct TextElement { input: View, @@ -140,15 +139,16 @@ impl TextElement { if input.show_cursor(cx) { // cursor blink + let cursor_height = cx.text_style().font_size.to_pixels(cx.rem_size()) + px(2.); cursor = Some(fill( Bounds::new( point( bounds.left() + cursor_pos.x, - bounds.top() + cursor_pos.y + CURSOR_INSET, + bounds.top() + cursor_pos.y + ((line_height - cursor_height) / 2.), ), - size(px(1.5), line_height), + size(px(1.), cursor_height), ), - crate::blue_500(), + cx.theme().caret, )) }; } diff --git a/crates/ui/src/theme.rs b/crates/ui/src/theme.rs index 1be948e7..57dd1705 100644 --- a/crates/ui/src/theme.rs +++ b/crates/ui/src/theme.rs @@ -85,9 +85,9 @@ pub struct ThemeColor { pub accordion_hover: Hsla, pub background: Hsla, pub border: Hsla, - pub window_border: Hsla, pub card: Hsla, pub card_foreground: Hsla, + pub caret: Hsla, pub danger: Hsla, pub danger_active: Hsla, pub danger_foreground: Hsla, @@ -124,6 +124,13 @@ pub struct ThemeColor { pub secondary_foreground: Hsla, pub secondary_hover: Hsla, pub selection: Hsla, + pub sidebar: Hsla, + pub sidebar_accent: Hsla, + pub sidebar_accent_foreground: Hsla, + pub sidebar_border: Hsla, + pub sidebar_foreground: Hsla, + pub sidebar_primary: Hsla, + pub sidebar_primary_foreground: Hsla, pub skeleton: Hsla, pub slider_bar: Hsla, pub slider_thumb: Hsla, @@ -142,13 +149,7 @@ pub struct ThemeColor { pub table_row_border: Hsla, pub title_bar: Hsla, pub title_bar_border: Hsla, - pub sidebar: Hsla, - pub sidebar_accent: Hsla, - pub sidebar_accent_foreground: Hsla, - pub sidebar_border: Hsla, - pub sidebar_foreground: Hsla, - pub sidebar_primary: Hsla, - pub sidebar_primary_foreground: Hsla, + pub window_border: Hsla, } impl ThemeColor { @@ -161,9 +162,9 @@ impl ThemeColor { accordion_hover: hsl(240.0, 4.8, 95.9).opacity(0.7), background: hsl(0.0, 0.0, 100.), border: hsl(240.0, 5.9, 90.0), - window_border: hsl(240.0, 5.9, 78.0), card: hsl(0.0, 0.0, 100.0), card_foreground: hsl(240.0, 10.0, 3.9), + caret: hsl(240.0, 10., 3.9), danger: hsl(0.0, 84.2, 60.2), danger_active: hsl(0.0, 84.2, 47.0), danger_foreground: hsl(0.0, 0.0, 98.0), @@ -200,6 +201,13 @@ impl ThemeColor { secondary_foreground: hsl(240.0, 59.0, 10.), secondary_hover: hsl(240.0, 5.9, 98.), selection: hsl(211.0, 97.0, 85.0), + sidebar: hsl(0.0, 0.0, 98.0), + sidebar_accent: hsl(240.0, 4.8, 92.), + sidebar_accent_foreground: hsl(240.0, 5.9, 10.0), + sidebar_border: hsl(220.0, 13.0, 91.0), + sidebar_foreground: hsl(240.0, 5.3, 26.1), + sidebar_primary: hsl(240.0, 5.9, 10.0), + sidebar_primary_foreground: hsl(0.0, 0.0, 98.0), skeleton: hsl(223.0, 5.9, 10.0).opacity(0.1), slider_bar: hsl(223.0, 5.9, 10.0), slider_thumb: hsl(0.0, 0.0, 100.0), @@ -218,13 +226,7 @@ impl ThemeColor { table_row_border: hsl(240.0, 7.7, 94.5), title_bar: hsl(0.0, 0.0, 100.), title_bar_border: hsl(240.0, 5.9, 90.0), - sidebar: hsl(0.0, 0.0, 98.0), - sidebar_accent: hsl(240.0, 4.8, 92.), - sidebar_accent_foreground: hsl(240.0, 5.9, 10.0), - sidebar_border: hsl(220.0, 13.0, 91.0), - sidebar_foreground: hsl(240.0, 5.3, 26.1), - sidebar_primary: hsl(240.0, 5.9, 10.0), - sidebar_primary_foreground: hsl(0.0, 0.0, 98.0), + window_border: hsl(240.0, 5.9, 78.0), } } @@ -237,9 +239,9 @@ impl ThemeColor { accordion_hover: hsl(240.0, 3.7, 15.9).opacity(0.7), background: hsl(0.0, 0.0, 8.0), border: hsl(240.0, 3.7, 16.9), - window_border: hsl(240.0, 3.7, 28.0), card: hsl(0.0, 0.0, 8.0), card_foreground: hsl(0.0, 0.0, 78.0), + caret: hsl(0., 0., 78.), danger: hsl(0.0, 62.8, 30.6), danger_active: hsl(0.0, 62.8, 20.6), danger_foreground: hsl(0.0, 0.0, 78.0), @@ -276,6 +278,13 @@ impl ThemeColor { secondary_foreground: hsl(0.0, 0.0, 78.0), secondary_hover: hsl(240.0, 0., 15.), selection: hsl(211.0, 97.0, 22.0), + sidebar: hsl(240.0, 0.0, 10.0), + sidebar_accent: hsl(240.0, 3.7, 15.9), + sidebar_accent_foreground: hsl(240.0, 4.8, 95.9), + sidebar_border: hsl(240.0, 3.7, 15.9), + sidebar_foreground: hsl(240.0, 4.8, 95.9), + sidebar_primary: hsl(0.0, 0.0, 98.0), + sidebar_primary_foreground: hsl(240.0, 5.9, 10.0), skeleton: hsla(223.0, 0.0, 98.0, 0.1), slider_bar: hsl(223.0, 0.0, 98.0), slider_thumb: hsl(0.0, 0.0, 8.0), @@ -294,13 +303,7 @@ impl ThemeColor { table_row_border: hsl(240.0, 3.7, 16.9).opacity(0.5), title_bar: hsl(0., 0., 9.7), title_bar_border: hsl(240.0, 3.7, 15.9), - sidebar: hsl(240.0, 0.0, 10.0), - sidebar_accent: hsl(240.0, 3.7, 15.9), - sidebar_accent_foreground: hsl(240.0, 4.8, 95.9), - sidebar_border: hsl(240.0, 3.7, 15.9), - sidebar_foreground: hsl(240.0, 4.8, 95.9), - sidebar_primary: hsl(0.0, 0.0, 98.0), - sidebar_primary_foreground: hsl(240.0, 5.9, 10.0), + window_border: hsl(240.0, 3.7, 28.0), } } } @@ -354,6 +357,7 @@ impl Theme { self.foreground = self.foreground.apply(mask_color); self.card = self.card.apply(mask_color); self.card_foreground = self.card_foreground.apply(mask_color); + self.caret = self.caret.apply(mask_color); self.popover = self.popover.apply(mask_color); self.popover_foreground = self.popover_foreground.apply(mask_color); self.primary = self.primary.apply(mask_color);