dan/gpui-component
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

input: Update carret style. (#585)

Browse source 
- 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
This commit is contained in:
Jason Lee 2025-01-26 14:11:51 +08:00 committed by GitHub
parent cd613db6d6
commit 852ce923ae
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 32 additions and 28 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
crates/ui/src/input/element.rs
View file

@ -11,7 +11,6 @@ use super::TextInput;
const RIGHT_MARGIN: Pixels = px(5.); const RIGHT_MARGIN: Pixels = px(5.);
const BOTTOM_MARGIN: Pixels = px(20.); const BOTTOM_MARGIN: Pixels = px(20.);
const CURSOR_INSET: Pixels = px(0.5);
pub(super) struct TextElement { pub(super) struct TextElement {
input: View<TextInput>, input: View<TextInput>,
@ -140,15 +139,16 @@ impl TextElement {
if input.show_cursor(cx) { if input.show_cursor(cx) {
// cursor blink // cursor blink
let cursor_height = cx.text_style().font_size.to_pixels(cx.rem_size()) + px(2.);
cursor = Some(fill( cursor = Some(fill(
Bounds::new( Bounds::new(
point( point(
bounds.left() + cursor_pos.x, 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,
)) ))
}; };
} }

52
crates/ui/src/theme.rs
View file

@ -85,9 +85,9 @@ pub struct ThemeColor {
pub accordion_hover: Hsla, pub accordion_hover: Hsla,
pub background: Hsla, pub background: Hsla,
pub border: Hsla, pub border: Hsla,
pub window_border: Hsla,
pub card: Hsla, pub card: Hsla,
pub card_foreground: Hsla, pub card_foreground: Hsla,
pub caret: Hsla,
pub danger: Hsla, pub danger: Hsla,
pub danger_active: Hsla, pub danger_active: Hsla,
pub danger_foreground: Hsla, pub danger_foreground: Hsla,
@ -124,6 +124,13 @@ pub struct ThemeColor {
pub secondary_foreground: Hsla, pub secondary_foreground: Hsla,
pub secondary_hover: Hsla, pub secondary_hover: Hsla,
pub selection: 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 skeleton: Hsla,
pub slider_bar: Hsla, pub slider_bar: Hsla,
pub slider_thumb: Hsla, pub slider_thumb: Hsla,
@ -142,13 +149,7 @@ pub struct ThemeColor {
pub table_row_border: Hsla, pub table_row_border: Hsla,
pub title_bar: Hsla, pub title_bar: Hsla,
pub title_bar_border: Hsla, pub title_bar_border: Hsla,
pub sidebar: Hsla, pub window_border: 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,
} }
impl ThemeColor { impl ThemeColor {
@ -161,9 +162,9 @@ impl ThemeColor {
accordion_hover: hsl(240.0, 4.8, 95.9).opacity(0.7), accordion_hover: hsl(240.0, 4.8, 95.9).opacity(0.7),
background: hsl(0.0, 0.0, 100.), background: hsl(0.0, 0.0, 100.),
border: hsl(240.0, 5.9, 90.0), 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: hsl(0.0, 0.0, 100.0),
card_foreground: hsl(240.0, 10.0, 3.9), 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: hsl(0.0, 84.2, 60.2),
danger_active: hsl(0.0, 84.2, 47.0), danger_active: hsl(0.0, 84.2, 47.0),
danger_foreground: hsl(0.0, 0.0, 98.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_foreground: hsl(240.0, 59.0, 10.),
secondary_hover: hsl(240.0, 5.9, 98.), secondary_hover: hsl(240.0, 5.9, 98.),
selection: hsl(211.0, 97.0, 85.0), 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), skeleton: hsl(223.0, 5.9, 10.0).opacity(0.1),
slider_bar: hsl(223.0, 5.9, 10.0), slider_bar: hsl(223.0, 5.9, 10.0),
slider_thumb: hsl(0.0, 0.0, 100.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), table_row_border: hsl(240.0, 7.7, 94.5),
title_bar: hsl(0.0, 0.0, 100.), title_bar: hsl(0.0, 0.0, 100.),
title_bar_border: hsl(240.0, 5.9, 90.0), title_bar_border: hsl(240.0, 5.9, 90.0),
sidebar: hsl(0.0, 0.0, 98.0), window_border: hsl(240.0, 5.9, 78.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),
} }
} }
@ -237,9 +239,9 @@ impl ThemeColor {
accordion_hover: hsl(240.0, 3.7, 15.9).opacity(0.7), accordion_hover: hsl(240.0, 3.7, 15.9).opacity(0.7),
background: hsl(0.0, 0.0, 8.0), background: hsl(0.0, 0.0, 8.0),
border: hsl(240.0, 3.7, 16.9), 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: hsl(0.0, 0.0, 8.0),
card_foreground: hsl(0.0, 0.0, 78.0), card_foreground: hsl(0.0, 0.0, 78.0),
caret: hsl(0., 0., 78.),
danger: hsl(0.0, 62.8, 30.6), danger: hsl(0.0, 62.8, 30.6),
danger_active: hsl(0.0, 62.8, 20.6), danger_active: hsl(0.0, 62.8, 20.6),
danger_foreground: hsl(0.0, 0.0, 78.0), 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_foreground: hsl(0.0, 0.0, 78.0),
secondary_hover: hsl(240.0, 0., 15.), secondary_hover: hsl(240.0, 0., 15.),
selection: hsl(211.0, 97.0, 22.0), 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), skeleton: hsla(223.0, 0.0, 98.0, 0.1),
slider_bar: hsl(223.0, 0.0, 98.0), slider_bar: hsl(223.0, 0.0, 98.0),
slider_thumb: hsl(0.0, 0.0, 8.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), table_row_border: hsl(240.0, 3.7, 16.9).opacity(0.5),
title_bar: hsl(0., 0., 9.7), title_bar: hsl(0., 0., 9.7),
title_bar_border: hsl(240.0, 3.7, 15.9), title_bar_border: hsl(240.0, 3.7, 15.9),
sidebar: hsl(240.0, 0.0, 10.0), window_border: hsl(240.0, 3.7, 28.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),
} }
} }
} }
@ -354,6 +357,7 @@ impl Theme {
self.foreground = self.foreground.apply(mask_color); self.foreground = self.foreground.apply(mask_color);
self.card = self.card.apply(mask_color); self.card = self.card.apply(mask_color);
self.card_foreground = self.card_foreground.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 = self.popover.apply(mask_color);
self.popover_foreground = self.popover_foreground.apply(mask_color); self.popover_foreground = self.popover_foreground.apply(mask_color);
self.primary = self.primary.apply(mask_color); self.primary = self.primary.apply(mask_color);