From 21e8e8763e5a28264a15a4f5ef3d19447247169e Mon Sep 17 00:00:00 2001 From: Antonio Scandurra Date: Thu, 15 Jun 2023 13:59:01 +0200 Subject: [PATCH 01/56] Allow splitting of messages using `shift-enter` --- assets/keymaps/default.json | 3 +- crates/ai/src/assistant.rs | 158 ++++++++++++++++++++++++++++-------- 2 files changed, 126 insertions(+), 35 deletions(-) diff --git a/assets/keymaps/default.json b/assets/keymaps/default.json index 45e85fd04f..f6682a9f0b 100644 --- a/assets/keymaps/default.json +++ b/assets/keymaps/default.json @@ -200,7 +200,8 @@ "context": "AssistantEditor > Editor", "bindings": { "cmd-enter": "assistant::Assist", - "cmd->": "assistant::QuoteSelection" + "cmd->": "assistant::QuoteSelection", + "shift-enter": "assistant::Split" } }, { diff --git a/crates/ai/src/assistant.rs b/crates/ai/src/assistant.rs index e5702cb677..cd334d77b1 100644 --- a/crates/ai/src/assistant.rs +++ b/crates/ai/src/assistant.rs @@ -8,7 +8,7 @@ use collections::{HashMap, HashSet}; use editor::{ display_map::{BlockDisposition, BlockId, BlockProperties, BlockStyle, ToDisplayPoint}, scroll::autoscroll::{Autoscroll, AutoscrollStrategy}, - Anchor, Editor, ToOffset as _, + Anchor, Editor, }; use fs::Fs; use futures::{io::BufReader, AsyncBufReadExt, AsyncReadExt, Stream, StreamExt}; @@ -40,7 +40,14 @@ const OPENAI_API_URL: &'static str = "https://api.openai.com/v1"; actions!( assistant, - [NewContext, Assist, QuoteSelection, ToggleFocus, ResetKey] + [ + NewContext, + Assist, + Split, + QuoteSelection, + ToggleFocus, + ResetKey + ] ); pub fn init(cx: &mut AppContext) { @@ -64,6 +71,7 @@ pub fn init(cx: &mut AppContext) { cx.capture_action(AssistantEditor::cancel_last_assist); cx.add_action(AssistantEditor::quote_selection); cx.capture_action(AssistantEditor::copy); + cx.capture_action(AssistantEditor::split); cx.add_action(AssistantPanel::save_api_key); cx.add_action(AssistantPanel::reset_api_key); cx.add_action( @@ -711,6 +719,67 @@ impl Assistant { } } + fn split_message( + &mut self, + range: Range, + cx: &mut ModelContext, + ) -> (Option, Option) { + let start_message = self.message_for_offset(range.start, cx); + let end_message = self.message_for_offset(range.end, cx); + if let Some((start_message, end_message)) = start_message.zip(end_message) { + let (start_message_ix, _, start_message_metadata) = start_message; + let (end_message_ix, _, _) = end_message; + + // Prevent splitting when range spans multiple messages. + if start_message_ix != end_message_ix { + return (None, None); + } + + let role = start_message_metadata.role; + self.buffer.update(cx, |buffer, cx| { + buffer.edit([(range.end..range.end, "\n")], None, cx) + }); + let suffix = Message { + id: MessageId(post_inc(&mut self.next_message_id.0)), + start: self.buffer.read(cx).anchor_before(range.end + 1), + }; + self.messages.insert(start_message_ix + 1, suffix.clone()); + self.messages_metadata.insert( + suffix.id, + MessageMetadata { + role, + sent_at: Local::now(), + error: None, + }, + ); + + if range.start == range.end { + (None, Some(suffix)) + } else { + self.buffer.update(cx, |buffer, cx| { + buffer.edit([(range.start..range.start, "\n")], None, cx) + }); + let selection = Message { + id: MessageId(post_inc(&mut self.next_message_id.0)), + start: self.buffer.read(cx).anchor_before(range.start + 1), + }; + self.messages + .insert(start_message_ix + 1, selection.clone()); + self.messages_metadata.insert( + selection.id, + MessageMetadata { + role, + sent_at: Local::now(), + error: None, + }, + ); + (Some(selection), Some(suffix)) + } + } else { + (None, None) + } + } + fn summarize(&mut self, cx: &mut ModelContext) { if self.messages.len() >= 2 && self.summary.is_none() { let api_key = self.api_key.borrow().clone(); @@ -755,35 +824,39 @@ impl Assistant { fn open_ai_request_messages(&self, cx: &AppContext) -> Vec { let buffer = self.buffer.read(cx); self.messages(cx) - .map(|(_message, metadata, range)| RequestMessage { + .map(|(_ix, _message, metadata, range)| RequestMessage { role: metadata.role, content: buffer.text_for_range(range).collect(), }) .collect() } - fn message_id_for_offset(&self, offset: usize, cx: &AppContext) -> Option { - Some( - self.messages(cx) - .find(|(_, _, range)| range.contains(&offset)) - .map(|(message, _, _)| message) - .or(self.messages.last())? - .id, - ) + fn message_for_offset<'a>( + &'a self, + offset: usize, + cx: &'a AppContext, + ) -> Option<(usize, &Message, &MessageMetadata)> { + let mut messages = self.messages(cx).peekable(); + while let Some((ix, message, metadata, range)) = messages.next() { + if range.contains(&offset) || messages.peek().is_none() { + return Some((ix, message, metadata)); + } + } + None } fn messages<'a>( &'a self, cx: &'a AppContext, - ) -> impl 'a + Iterator)> { + ) -> impl 'a + Iterator)> { let buffer = self.buffer.read(cx); - let mut messages = self.messages.iter().peekable(); + let mut messages = self.messages.iter().enumerate().peekable(); iter::from_fn(move || { - while let Some(message) = messages.next() { + while let Some((ix, message)) = messages.next() { let metadata = self.messages_metadata.get(&message.id)?; let message_start = message.start.to_offset(buffer); let mut message_end = None; - while let Some(next_message) = messages.peek() { + while let Some((_, next_message)) = messages.peek() { if next_message.start.is_valid(buffer) { message_end = Some(next_message.start); break; @@ -794,7 +867,7 @@ impl Assistant { let message_end = message_end .unwrap_or(language::Anchor::MAX) .to_offset(buffer); - return Some((message, metadata, message_start..message_end)); + return Some((ix, message, metadata, message_start..message_end)); } None }) @@ -857,21 +930,7 @@ impl AssistantEditor { fn assist(&mut self, _: &Assist, cx: &mut ViewContext) { let user_message = self.assistant.update(cx, |assistant, cx| { - let editor = self.editor.read(cx); - let newest_selection = editor - .selections - .newest_anchor() - .head() - .to_offset(&editor.buffer().read(cx).snapshot(cx)); - let message_id = assistant.message_id_for_offset(newest_selection, cx)?; - let metadata = assistant.messages_metadata.get(&message_id)?; - let user_message = if metadata.role == Role::User { - let (_, user_message) = assistant.assist(cx)?; - user_message - } else { - let user_message = assistant.insert_message_after(message_id, Role::User, cx)?; - user_message - }; + let (_, user_message) = assistant.assist(cx)?; Some(user_message) }); @@ -982,7 +1041,7 @@ impl AssistantEditor { .assistant .read(cx) .messages(cx) - .map(|(message, metadata, _)| BlockProperties { + .map(|(_, message, metadata, _)| BlockProperties { position: buffer.anchor_in_excerpt(excerpt_id, message.start), height: 2, style: BlockStyle::Sticky, @@ -1147,7 +1206,7 @@ impl AssistantEditor { let selection = editor.selections.newest::(cx); let mut copied_text = String::new(); let mut spanned_messages = 0; - for (_message, metadata, message_range) in assistant.messages(cx) { + for (_ix, _message, metadata, message_range) in assistant.messages(cx) { if message_range.start >= selection.range().end { break; } else if message_range.end >= selection.range().start { @@ -1174,6 +1233,13 @@ impl AssistantEditor { cx.propagate_action(); } + fn split(&mut self, _: &Split, cx: &mut ViewContext) { + self.assistant.update(cx, |assistant, cx| { + let range = self.editor.read(cx).selections.newest::(cx).range(); + assistant.split_message(range, cx); + }); + } + fn cycle_model(&mut self, cx: &mut ViewContext) { self.assistant.update(cx, |assistant, cx| { let new_model = match assistant.model.as_str() { @@ -1510,6 +1576,30 @@ mod tests { (message_3.id, Role::User, 4..5) ] ); + + // Split a message into prefix, selection and suffix. + buffer.update(cx, |buffer, cx| buffer.edit([(2..2, "3")], None, cx)); + assert_eq!( + messages(&assistant, cx), + vec![ + (message_1.id, Role::User, 0..4), + (message_5.id, Role::System, 4..5), + (message_3.id, Role::User, 5..6) + ] + ); + let (message_6, message_7) = + assistant.update(cx, |assistant, cx| assistant.split_message(2..3, cx)); + let (message_6, message_7) = (message_6.unwrap(), message_7.unwrap()); + assert_eq!( + messages(&assistant, cx), + vec![ + (message_1.id, Role::User, 0..3), + (message_6.id, Role::User, 3..5), + (message_7.id, Role::User, 5..6), + (message_5.id, Role::System, 6..7), + (message_3.id, Role::User, 7..8) + ] + ); } fn messages( @@ -1519,7 +1609,7 @@ mod tests { assistant .read(cx) .messages(cx) - .map(|(message, metadata, range)| (message.id, metadata.role, range)) + .map(|(_, message, metadata, range)| (message.id, metadata.role, range)) .collect() } } From 8c6ba13fef17bd7579a82bb4d1535057f4af4685 Mon Sep 17 00:00:00 2001 From: Nathan Sobo Date: Thu, 15 Jun 2023 09:02:15 -0600 Subject: [PATCH 02/56] Never insert an empty prefix when splitting a message with a non-empty range Co-Authored-By: Antonio Scandurra Co-Authored-By: Piotr Osiewicz --- crates/ai/src/assistant.rs | 29 +++++++++++++++++++++++------ 1 file changed, 23 insertions(+), 6 deletions(-) diff --git a/crates/ai/src/assistant.rs b/crates/ai/src/assistant.rs index cd334d77b1..0d748e52b2 100644 --- a/crates/ai/src/assistant.rs +++ b/crates/ai/src/assistant.rs @@ -727,15 +727,15 @@ impl Assistant { let start_message = self.message_for_offset(range.start, cx); let end_message = self.message_for_offset(range.end, cx); if let Some((start_message, end_message)) = start_message.zip(end_message) { - let (start_message_ix, _, start_message_metadata) = start_message; - let (end_message_ix, _, _) = end_message; + let (start_message_ix, _, metadata, message_range) = start_message; + let (end_message_ix, _, _, _) = end_message; // Prevent splitting when range spans multiple messages. if start_message_ix != end_message_ix { return (None, None); } - let role = start_message_metadata.role; + let role = metadata.role; self.buffer.update(cx, |buffer, cx| { buffer.edit([(range.end..range.end, "\n")], None, cx) }); @@ -753,7 +753,7 @@ impl Assistant { }, ); - if range.start == range.end { + if range.start == range.end || range.start == message_range.start { (None, Some(suffix)) } else { self.buffer.update(cx, |buffer, cx| { @@ -835,11 +835,11 @@ impl Assistant { &'a self, offset: usize, cx: &'a AppContext, - ) -> Option<(usize, &Message, &MessageMetadata)> { + ) -> Option<(usize, &Message, &MessageMetadata, Range)> { let mut messages = self.messages(cx).peekable(); while let Some((ix, message, metadata, range)) = messages.next() { if range.contains(&offset) || messages.peek().is_none() { - return Some((ix, message, metadata)); + return Some((ix, message, metadata, range)); } } None @@ -1600,6 +1600,23 @@ mod tests { (message_3.id, Role::User, 7..8) ] ); + + // Don't include an empty prefix when splitting with a non-empty range + let (no_message, message_8) = + assistant.update(cx, |assistant, cx| assistant.split_message(3..4, cx)); + assert!(no_message.is_none()); + let message_8 = message_8.unwrap(); + assert_eq!( + messages(&assistant, cx), + vec![ + (message_1.id, Role::User, 0..3), + (message_6.id, Role::User, 3..5), + (message_8.id, Role::User, 5..6), + (message_7.id, Role::User, 6..7), + (message_5.id, Role::System, 7..8), + (message_3.id, Role::User, 8..9) + ] + ); } fn messages( From ef6cb11d5c553517d7e5dc400b06aac500e135e5 Mon Sep 17 00:00:00 2001 From: Piotr Osiewicz <24362066+osiewicz@users.noreply.github.com> Date: Fri, 16 Jun 2023 13:29:12 +0200 Subject: [PATCH 03/56] Emit editor event whether we insert a newline or not. --- crates/ai/src/assistant.rs | 13 ++++++++++--- 1 file changed, 10 insertions(+), 3 deletions(-) diff --git a/crates/ai/src/assistant.rs b/crates/ai/src/assistant.rs index 0d748e52b2..d6b8f52dd1 100644 --- a/crates/ai/src/assistant.rs +++ b/crates/ai/src/assistant.rs @@ -736,8 +736,13 @@ impl Assistant { } let role = metadata.role; - self.buffer.update(cx, |buffer, cx| { - buffer.edit([(range.end..range.end, "\n")], None, cx) + let is_newline = self.buffer.update(cx, |buffer, cx| { + if buffer.chars_at(range.end).next() != Some('\n') { + buffer.edit([(range.end..range.end, "\n")], None, cx); + false + } else { + true + } }); let suffix = Message { id: MessageId(post_inc(&mut self.next_message_id.0)), @@ -752,7 +757,9 @@ impl Assistant { error: None, }, ); - + if is_newline { + cx.emit(AssistantEvent::MessagesEdited); + } if range.start == range.end || range.start == message_range.start { (None, Some(suffix)) } else { From 6c0f65cfe0823545ce0eee843dc818e7f80130d1 Mon Sep 17 00:00:00 2001 From: Nathan Sobo Date: Fri, 16 Jun 2023 10:36:42 -0600 Subject: [PATCH 04/56] Avoid inserting redundant newlines Co-Authored-By: Piotr Osiewicz Co-Authored-By: Antonio Scandurra --- crates/ai/src/assistant.rs | 175 ++++++++++++++++++++++++++++++++----- 1 file changed, 155 insertions(+), 20 deletions(-) diff --git a/crates/ai/src/assistant.rs b/crates/ai/src/assistant.rs index d6b8f52dd1..0e361a6fa3 100644 --- a/crates/ai/src/assistant.rs +++ b/crates/ai/src/assistant.rs @@ -736,18 +736,33 @@ impl Assistant { } let role = metadata.role; - let is_newline = self.buffer.update(cx, |buffer, cx| { - if buffer.chars_at(range.end).next() != Some('\n') { - buffer.edit([(range.end..range.end, "\n")], None, cx); - false - } else { - true + let mut edited_buffer = false; + + let mut suffix_start = None; + if range.start > message_range.start && range.end < message_range.end - 1 { + if self.buffer.read(cx).chars_at(range.end).next() == Some('\n') { + suffix_start = Some(range.end + 1); + } else if self.buffer.read(cx).reversed_chars_at(range.end).next() == Some('\n') { + suffix_start = Some(range.end); + } + } + + let suffix = if let Some(suffix_start) = suffix_start { + Message { + id: MessageId(post_inc(&mut self.next_message_id.0)), + start: self.buffer.read(cx).anchor_before(suffix_start), + } + } else { + self.buffer.update(cx, |buffer, cx| { + buffer.edit([(range.end..range.end, "\n")], None, cx); + }); + edited_buffer = true; + Message { + id: MessageId(post_inc(&mut self.next_message_id.0)), + start: self.buffer.read(cx).anchor_before(range.end + 1), } - }); - let suffix = Message { - id: MessageId(post_inc(&mut self.next_message_id.0)), - start: self.buffer.read(cx).anchor_before(range.end + 1), }; + self.messages.insert(start_message_ix + 1, suffix.clone()); self.messages_metadata.insert( suffix.id, @@ -757,19 +772,38 @@ impl Assistant { error: None, }, ); - if is_newline { - cx.emit(AssistantEvent::MessagesEdited); - } - if range.start == range.end || range.start == message_range.start { + + let new_messages = if range.start == range.end || range.start == message_range.start { (None, Some(suffix)) } else { - self.buffer.update(cx, |buffer, cx| { - buffer.edit([(range.start..range.start, "\n")], None, cx) - }); - let selection = Message { - id: MessageId(post_inc(&mut self.next_message_id.0)), - start: self.buffer.read(cx).anchor_before(range.start + 1), + let mut prefix_end = None; + if range.start > message_range.start && range.end < message_range.end - 1 { + if self.buffer.read(cx).chars_at(range.start).next() == Some('\n') { + prefix_end = Some(range.start + 1); + } else if self.buffer.read(cx).reversed_chars_at(range.start).next() + == Some('\n') + { + prefix_end = Some(range.start); + } + } + + let selection = if let Some(prefix_end) = prefix_end { + cx.emit(AssistantEvent::MessagesEdited); + Message { + id: MessageId(post_inc(&mut self.next_message_id.0)), + start: self.buffer.read(cx).anchor_before(prefix_end), + } + } else { + self.buffer.update(cx, |buffer, cx| { + buffer.edit([(range.start..range.start, "\n")], None, cx) + }); + edited_buffer = true; + Message { + id: MessageId(post_inc(&mut self.next_message_id.0)), + start: self.buffer.read(cx).anchor_before(range.end + 1), + } }; + self.messages .insert(start_message_ix + 1, selection.clone()); self.messages_metadata.insert( @@ -781,7 +815,12 @@ impl Assistant { }, ); (Some(selection), Some(suffix)) + }; + + if !edited_buffer { + cx.emit(AssistantEvent::MessagesEdited); } + new_messages } else { (None, None) } @@ -1594,8 +1633,11 @@ mod tests { (message_3.id, Role::User, 5..6) ] ); + let (message_6, message_7) = assistant.update(cx, |assistant, cx| assistant.split_message(2..3, cx)); + + assert_eq!(buffer.read(cx).text(), "1C\n3\n\n\nD"); // We insert a newline for the new empty message let (message_6, message_7) = (message_6.unwrap(), message_7.unwrap()); assert_eq!( messages(&assistant, cx), @@ -1626,6 +1668,99 @@ mod tests { ); } + #[gpui::test] + fn test_message_splitting(cx: &mut AppContext) { + let registry = Arc::new(LanguageRegistry::test()); + let assistant = cx.add_model(|cx| Assistant::new(Default::default(), registry, cx)); + let buffer = assistant.read(cx).buffer.clone(); + + let message_1 = assistant.read(cx).messages[0].clone(); + assert_eq!( + messages(&assistant, cx), + vec![(message_1.id, Role::User, 0..0)] + ); + + buffer.update(cx, |buffer, cx| { + buffer.edit([(0..0, "aaa\nbbb\nccc\nddd\n")], None, cx) + }); + + let (_, message_2) = + assistant.update(cx, |assistant, cx| assistant.split_message(3..3, cx)); + let message_2 = message_2.unwrap(); + + // We recycle newlines in the middle of a split message + assert_eq!(buffer.read(cx).text(), "aaa\nbbb\nccc\nddd\n"); + assert_eq!( + messages(&assistant, cx), + vec![ + (message_1.id, Role::User, 0..4), + (message_2.id, Role::User, 4..16), + ] + ); + + let (_, message_3) = + assistant.update(cx, |assistant, cx| assistant.split_message(3..3, cx)); + let message_3 = message_3.unwrap(); + + // We don't recycle newlines at the end of a split message + assert_eq!(buffer.read(cx).text(), "aaa\n\nbbb\nccc\nddd\n"); + assert_eq!( + messages(&assistant, cx), + vec![ + (message_1.id, Role::User, 0..4), + (message_3.id, Role::User, 4..5), + (message_2.id, Role::User, 5..17), + ] + ); + + let (_, message_4) = + assistant.update(cx, |assistant, cx| assistant.split_message(9..9, cx)); + let message_4 = message_4.unwrap(); + assert_eq!(buffer.read(cx).text(), "aaa\n\nbbb\nccc\nddd\n"); + assert_eq!( + messages(&assistant, cx), + vec![ + (message_1.id, Role::User, 0..4), + (message_3.id, Role::User, 4..5), + (message_2.id, Role::User, 5..9), + (message_4.id, Role::User, 9..17), + ] + ); + + let (_, message_5) = + assistant.update(cx, |assistant, cx| assistant.split_message(9..9, cx)); + let message_5 = message_5.unwrap(); + assert_eq!(buffer.read(cx).text(), "aaa\n\nbbb\n\nccc\nddd\n"); + assert_eq!( + messages(&assistant, cx), + vec![ + (message_1.id, Role::User, 0..4), + (message_3.id, Role::User, 4..5), + (message_2.id, Role::User, 5..9), + (message_4.id, Role::User, 9..10), + (message_5.id, Role::User, 10..18), + ] + ); + + let (message_6, message_7) = + assistant.update(cx, |assistant, cx| assistant.split_message(14..16, cx)); + let message_6 = message_6.unwrap(); + let message_7 = message_7.unwrap(); + assert_eq!(buffer.read(cx).text(), "aaa\n\nbbb\n\nccc\ndd\nd\n"); + assert_eq!( + messages(&assistant, cx), + vec![ + (message_1.id, Role::User, 0..4), + (message_3.id, Role::User, 4..5), + (message_2.id, Role::User, 5..9), + (message_4.id, Role::User, 9..10), + (message_5.id, Role::User, 10..14), + (message_6.id, Role::User, 14..17), + (message_7.id, Role::User, 17..19), + ] + ); + } + fn messages( assistant: &ModelHandle, cx: &AppContext, From c179dd999035ad6c23c258371bb7ee104c3ed3a0 Mon Sep 17 00:00:00 2001 From: Nathan Sobo Date: Fri, 16 Jun 2023 11:43:16 -0600 Subject: [PATCH 05/56] Remove redundant tests --- crates/ai/src/assistant.rs | 44 -------------------------------------- 1 file changed, 44 deletions(-) diff --git a/crates/ai/src/assistant.rs b/crates/ai/src/assistant.rs index 0e361a6fa3..eff3dc4d20 100644 --- a/crates/ai/src/assistant.rs +++ b/crates/ai/src/assistant.rs @@ -1622,50 +1622,6 @@ mod tests { (message_3.id, Role::User, 4..5) ] ); - - // Split a message into prefix, selection and suffix. - buffer.update(cx, |buffer, cx| buffer.edit([(2..2, "3")], None, cx)); - assert_eq!( - messages(&assistant, cx), - vec![ - (message_1.id, Role::User, 0..4), - (message_5.id, Role::System, 4..5), - (message_3.id, Role::User, 5..6) - ] - ); - - let (message_6, message_7) = - assistant.update(cx, |assistant, cx| assistant.split_message(2..3, cx)); - - assert_eq!(buffer.read(cx).text(), "1C\n3\n\n\nD"); // We insert a newline for the new empty message - let (message_6, message_7) = (message_6.unwrap(), message_7.unwrap()); - assert_eq!( - messages(&assistant, cx), - vec![ - (message_1.id, Role::User, 0..3), - (message_6.id, Role::User, 3..5), - (message_7.id, Role::User, 5..6), - (message_5.id, Role::System, 6..7), - (message_3.id, Role::User, 7..8) - ] - ); - - // Don't include an empty prefix when splitting with a non-empty range - let (no_message, message_8) = - assistant.update(cx, |assistant, cx| assistant.split_message(3..4, cx)); - assert!(no_message.is_none()); - let message_8 = message_8.unwrap(); - assert_eq!( - messages(&assistant, cx), - vec![ - (message_1.id, Role::User, 0..3), - (message_6.id, Role::User, 3..5), - (message_8.id, Role::User, 5..6), - (message_7.id, Role::User, 6..7), - (message_5.id, Role::System, 7..8), - (message_3.id, Role::User, 8..9) - ] - ); } #[gpui::test] From 75b5ac8488c72af2702f582249543320e3f541e4 Mon Sep 17 00:00:00 2001 From: Nathan Sobo Date: Thu, 15 Jun 2023 16:24:53 -0600 Subject: [PATCH 06/56] Cycle message roles on ctrl-r --- assets/keymaps/default.json | 3 +- crates/ai/src/assistant.rs | 168 ++++++++++++++++++++---------------- 2 files changed, 98 insertions(+), 73 deletions(-) diff --git a/assets/keymaps/default.json b/assets/keymaps/default.json index f6682a9f0b..a642697a37 100644 --- a/assets/keymaps/default.json +++ b/assets/keymaps/default.json @@ -201,7 +201,8 @@ "bindings": { "cmd-enter": "assistant::Assist", "cmd->": "assistant::QuoteSelection", - "shift-enter": "assistant::Split" + "shift-enter": "assistant::Split", + "ctrl-r": "assistant::CycleMessageRole" } }, { diff --git a/crates/ai/src/assistant.rs b/crates/ai/src/assistant.rs index eff3dc4d20..853f7262d3 100644 --- a/crates/ai/src/assistant.rs +++ b/crates/ai/src/assistant.rs @@ -44,6 +44,7 @@ actions!( NewContext, Assist, Split, + CycleMessageRole, QuoteSelection, ToggleFocus, ResetKey @@ -72,6 +73,7 @@ pub fn init(cx: &mut AppContext) { cx.add_action(AssistantEditor::quote_selection); cx.capture_action(AssistantEditor::copy); cx.capture_action(AssistantEditor::split); + cx.capture_action(AssistantEditor::cycle_message_role); cx.add_action(AssistantPanel::save_api_key); cx.add_action(AssistantPanel::reset_api_key); cx.add_action( @@ -446,7 +448,7 @@ enum AssistantEvent { struct Assistant { buffer: ModelHandle, - messages: Vec, + message_anchors: Vec, messages_metadata: HashMap, next_message_id: MessageId, summary: Option, @@ -491,7 +493,7 @@ impl Assistant { }); let mut this = Self { - messages: Default::default(), + message_anchors: Default::default(), messages_metadata: Default::default(), next_message_id: Default::default(), summary: None, @@ -506,11 +508,11 @@ impl Assistant { api_key, buffer, }; - let message = Message { + let message = MessageAnchor { id: MessageId(post_inc(&mut this.next_message_id.0)), start: language::Anchor::MIN, }; - this.messages.push(message.clone()); + this.message_anchors.push(message.clone()); this.messages_metadata.insert( message.id, MessageMetadata { @@ -587,7 +589,7 @@ impl Assistant { cx.notify(); } - fn assist(&mut self, cx: &mut ModelContext) -> Option<(Message, Message)> { + fn assist(&mut self, cx: &mut ModelContext) -> Option<(MessageAnchor, MessageAnchor)> { let request = OpenAIRequest { model: self.model.clone(), messages: self.open_ai_request_messages(cx), @@ -597,7 +599,7 @@ impl Assistant { let api_key = self.api_key.borrow().clone()?; let stream = stream_completion(api_key, cx.background().clone(), request); let assistant_message = - self.insert_message_after(self.messages.last()?.id, Role::Assistant, cx)?; + self.insert_message_after(self.message_anchors.last()?.id, Role::Assistant, cx)?; let user_message = self.insert_message_after(assistant_message.id, Role::User, cx)?; let task = cx.spawn_weak({ |this, mut cx| async move { @@ -613,14 +615,15 @@ impl Assistant { .update(&mut cx, |this, cx| { let text: Arc = choice.delta.content?.into(); let message_ix = this - .messages + .message_anchors .iter() .position(|message| message.id == assistant_message_id)?; this.buffer.update(cx, |buffer, cx| { - let offset = if message_ix + 1 == this.messages.len() { + let offset = if message_ix + 1 == this.message_anchors.len() + { buffer.len() } else { - this.messages[message_ix + 1] + this.message_anchors[message_ix + 1] .start .to_offset(buffer) .saturating_sub(1) @@ -685,25 +688,26 @@ impl Assistant { message_id: MessageId, role: Role, cx: &mut ModelContext, - ) -> Option { + ) -> Option { if let Some(prev_message_ix) = self - .messages + .message_anchors .iter() .position(|message| message.id == message_id) { let start = self.buffer.update(cx, |buffer, cx| { - let offset = self.messages[prev_message_ix + 1..] + let offset = self.message_anchors[prev_message_ix + 1..] .iter() .find(|message| message.start.is_valid(buffer)) .map_or(buffer.len(), |message| message.start.to_offset(buffer) - 1); buffer.edit([(offset..offset, "\n")], None, cx); buffer.anchor_before(offset + 1) }); - let message = Message { + let message = MessageAnchor { id: MessageId(post_inc(&mut self.next_message_id.0)), start, }; - self.messages.insert(prev_message_ix + 1, message.clone()); + self.message_anchors + .insert(prev_message_ix + 1, message.clone()); self.messages_metadata.insert( message.id, MessageMetadata { @@ -723,23 +727,21 @@ impl Assistant { &mut self, range: Range, cx: &mut ModelContext, - ) -> (Option, Option) { + ) -> (Option, Option) { let start_message = self.message_for_offset(range.start, cx); let end_message = self.message_for_offset(range.end, cx); if let Some((start_message, end_message)) = start_message.zip(end_message) { - let (start_message_ix, _, metadata, message_range) = start_message; - let (end_message_ix, _, _, _) = end_message; - // Prevent splitting when range spans multiple messages. - if start_message_ix != end_message_ix { + if start_message.index != end_message.index { return (None, None); } - let role = metadata.role; + let message = start_message; + let role = message.role; let mut edited_buffer = false; let mut suffix_start = None; - if range.start > message_range.start && range.end < message_range.end - 1 { + if range.start > message.range.start && range.end < message.range.end - 1 { if self.buffer.read(cx).chars_at(range.end).next() == Some('\n') { suffix_start = Some(range.end + 1); } else if self.buffer.read(cx).reversed_chars_at(range.end).next() == Some('\n') { @@ -748,7 +750,7 @@ impl Assistant { } let suffix = if let Some(suffix_start) = suffix_start { - Message { + MessageAnchor { id: MessageId(post_inc(&mut self.next_message_id.0)), start: self.buffer.read(cx).anchor_before(suffix_start), } @@ -757,13 +759,14 @@ impl Assistant { buffer.edit([(range.end..range.end, "\n")], None, cx); }); edited_buffer = true; - Message { + MessageAnchor { id: MessageId(post_inc(&mut self.next_message_id.0)), start: self.buffer.read(cx).anchor_before(range.end + 1), } }; - self.messages.insert(start_message_ix + 1, suffix.clone()); + self.message_anchors + .insert(message.index + 1, suffix.clone()); self.messages_metadata.insert( suffix.id, MessageMetadata { @@ -773,11 +776,11 @@ impl Assistant { }, ); - let new_messages = if range.start == range.end || range.start == message_range.start { + let new_messages = if range.start == range.end || range.start == message.range.start { (None, Some(suffix)) } else { let mut prefix_end = None; - if range.start > message_range.start && range.end < message_range.end - 1 { + if range.start > message.range.start && range.end < message.range.end - 1 { if self.buffer.read(cx).chars_at(range.start).next() == Some('\n') { prefix_end = Some(range.start + 1); } else if self.buffer.read(cx).reversed_chars_at(range.start).next() @@ -789,7 +792,7 @@ impl Assistant { let selection = if let Some(prefix_end) = prefix_end { cx.emit(AssistantEvent::MessagesEdited); - Message { + MessageAnchor { id: MessageId(post_inc(&mut self.next_message_id.0)), start: self.buffer.read(cx).anchor_before(prefix_end), } @@ -798,14 +801,14 @@ impl Assistant { buffer.edit([(range.start..range.start, "\n")], None, cx) }); edited_buffer = true; - Message { + MessageAnchor { id: MessageId(post_inc(&mut self.next_message_id.0)), start: self.buffer.read(cx).anchor_before(range.end + 1), } }; - self.messages - .insert(start_message_ix + 1, selection.clone()); + self.message_anchors + .insert(message.index + 1, selection.clone()); self.messages_metadata.insert( selection.id, MessageMetadata { @@ -827,7 +830,7 @@ impl Assistant { } fn summarize(&mut self, cx: &mut ModelContext) { - if self.messages.len() >= 2 && self.summary.is_none() { + if self.message_anchors.len() >= 2 && self.summary.is_none() { let api_key = self.api_key.borrow().clone(); if let Some(api_key) = api_key { let mut messages = self.open_ai_request_messages(cx); @@ -870,50 +873,51 @@ impl Assistant { fn open_ai_request_messages(&self, cx: &AppContext) -> Vec { let buffer = self.buffer.read(cx); self.messages(cx) - .map(|(_ix, _message, metadata, range)| RequestMessage { - role: metadata.role, - content: buffer.text_for_range(range).collect(), + .map(|message| RequestMessage { + role: message.role, + content: buffer.text_for_range(message.range).collect(), }) .collect() } - fn message_for_offset<'a>( - &'a self, - offset: usize, - cx: &'a AppContext, - ) -> Option<(usize, &Message, &MessageMetadata, Range)> { + fn message_for_offset<'a>(&'a self, offset: usize, cx: &'a AppContext) -> Option { let mut messages = self.messages(cx).peekable(); - while let Some((ix, message, metadata, range)) = messages.next() { - if range.contains(&offset) || messages.peek().is_none() { - return Some((ix, message, metadata, range)); + while let Some(message) = messages.next() { + if message.range.contains(&offset) || messages.peek().is_none() { + return Some(message); } } None } - fn messages<'a>( - &'a self, - cx: &'a AppContext, - ) -> impl 'a + Iterator)> { + fn messages<'a>(&'a self, cx: &'a AppContext) -> impl 'a + Iterator { let buffer = self.buffer.read(cx); - let mut messages = self.messages.iter().enumerate().peekable(); + let mut message_anchors = self.message_anchors.iter().enumerate().peekable(); iter::from_fn(move || { - while let Some((ix, message)) = messages.next() { - let metadata = self.messages_metadata.get(&message.id)?; - let message_start = message.start.to_offset(buffer); + while let Some((ix, message_anchor)) = message_anchors.next() { + let metadata = self.messages_metadata.get(&message_anchor.id)?; + let message_start = message_anchor.start.to_offset(buffer); let mut message_end = None; - while let Some((_, next_message)) = messages.peek() { + while let Some((_, next_message)) = message_anchors.peek() { if next_message.start.is_valid(buffer) { message_end = Some(next_message.start); break; } else { - messages.next(); + message_anchors.next(); } } let message_end = message_end .unwrap_or(language::Anchor::MAX) .to_offset(buffer); - return Some((ix, message, metadata, message_start..message_end)); + return Some(Message { + index: ix, + range: message_start..message_end, + id: message_anchor.id, + anchor: message_anchor.start, + role: metadata.role, + sent_at: metadata.sent_at, + error: metadata.error.clone(), + }); } None }) @@ -1003,6 +1007,15 @@ impl AssistantEditor { } } + fn cycle_message_role(&mut self, _: &CycleMessageRole, cx: &mut ViewContext) { + let cursor_offset = self.editor.read(cx).selections.newest(cx).head(); + self.assistant.update(cx, |assistant, cx| { + if let Some(message) = assistant.message_for_offset(cursor_offset, cx) { + assistant.cycle_message_role(message.id, cx); + } + }); + } + fn handle_assistant_event( &mut self, _: ModelHandle, @@ -1087,14 +1100,14 @@ impl AssistantEditor { .assistant .read(cx) .messages(cx) - .map(|(_, message, metadata, _)| BlockProperties { - position: buffer.anchor_in_excerpt(excerpt_id, message.start), + .map(|message| BlockProperties { + position: buffer.anchor_in_excerpt(excerpt_id, message.anchor), height: 2, style: BlockStyle::Sticky, render: Arc::new({ let assistant = self.assistant.clone(); - let metadata = metadata.clone(); - let message = message.clone(); + // let metadata = message.metadata.clone(); + // let message = message.clone(); move |cx| { enum Sender {} enum ErrorTooltip {} @@ -1105,7 +1118,7 @@ impl AssistantEditor { let sender = MouseEventHandler::::new( message_id.0, cx, - |state, _| match metadata.role { + |state, _| match message.role { Role::User => { let style = style.user_sender.style_for(state, false); Label::new("You", style.text.clone()) @@ -1140,14 +1153,14 @@ impl AssistantEditor { .with_child(sender.aligned()) .with_child( Label::new( - metadata.sent_at.format("%I:%M%P").to_string(), + message.sent_at.format("%I:%M%P").to_string(), style.sent_at.text.clone(), ) .contained() .with_style(style.sent_at.container) .aligned(), ) - .with_children(metadata.error.clone().map(|error| { + .with_children(message.error.as_ref().map(|error| { Svg::new("icons/circle_x_mark_12.svg") .with_color(style.error_icon.color) .constrained() @@ -1156,7 +1169,7 @@ impl AssistantEditor { .with_style(style.error_icon.container) .with_tooltip::( message_id.0, - error, + error.to_string(), None, theme.tooltip.clone(), cx, @@ -1252,15 +1265,15 @@ impl AssistantEditor { let selection = editor.selections.newest::(cx); let mut copied_text = String::new(); let mut spanned_messages = 0; - for (_ix, _message, metadata, message_range) in assistant.messages(cx) { - if message_range.start >= selection.range().end { + for message in assistant.messages(cx) { + if message.range.start >= selection.range().end { break; - } else if message_range.end >= selection.range().start { - let range = cmp::max(message_range.start, selection.range().start) - ..cmp::min(message_range.end, selection.range().end); + } else if message.range.end >= selection.range().start { + let range = cmp::max(message.range.start, selection.range().start) + ..cmp::min(message.range.end, selection.range().end); if !range.is_empty() { spanned_messages += 1; - write!(&mut copied_text, "## {}\n\n", metadata.role).unwrap(); + write!(&mut copied_text, "## {}\n\n", message.role).unwrap(); for chunk in assistant.buffer.read(cx).text_for_range(range) { copied_text.push_str(&chunk); } @@ -1395,7 +1408,7 @@ impl Item for AssistantEditor { struct MessageId(usize); #[derive(Clone, Debug)] -struct Message { +struct MessageAnchor { id: MessageId, start: language::Anchor, } @@ -1404,7 +1417,18 @@ struct Message { struct MessageMetadata { role: Role, sent_at: DateTime, - error: Option, + error: Option>, +} + +#[derive(Clone, Debug)] +pub struct Message { + range: Range, + index: usize, + id: MessageId, + anchor: language::Anchor, + role: Role, + sent_at: DateTime, + error: Option>, } async fn stream_completion( @@ -1504,7 +1528,7 @@ mod tests { let assistant = cx.add_model(|cx| Assistant::new(Default::default(), registry, cx)); let buffer = assistant.read(cx).buffer.clone(); - let message_1 = assistant.read(cx).messages[0].clone(); + let message_1 = assistant.read(cx).message_anchors[0].clone(); assert_eq!( messages(&assistant, cx), vec![(message_1.id, Role::User, 0..0)] @@ -1630,7 +1654,7 @@ mod tests { let assistant = cx.add_model(|cx| Assistant::new(Default::default(), registry, cx)); let buffer = assistant.read(cx).buffer.clone(); - let message_1 = assistant.read(cx).messages[0].clone(); + let message_1 = assistant.read(cx).message_anchors[0].clone(); assert_eq!( messages(&assistant, cx), vec![(message_1.id, Role::User, 0..0)] @@ -1724,7 +1748,7 @@ mod tests { assistant .read(cx) .messages(cx) - .map(|(_, message, metadata, range)| (message.id, metadata.role, range)) + .map(|message| (message.id, message.role, message.range)) .collect() } } From 54c71c1a359b6b4cd6a8e9685506544d44888d90 Mon Sep 17 00:00:00 2001 From: Nathan Sobo Date: Fri, 16 Jun 2023 12:41:07 -0600 Subject: [PATCH 07/56] Insert reply after the currently selected user message --- crates/ai/src/assistant.rs | 19 ++++++++++++++----- 1 file changed, 14 insertions(+), 5 deletions(-) diff --git a/crates/ai/src/assistant.rs b/crates/ai/src/assistant.rs index 853f7262d3..6686dcc2a3 100644 --- a/crates/ai/src/assistant.rs +++ b/crates/ai/src/assistant.rs @@ -22,7 +22,7 @@ use gpui::{ Subscription, Task, View, ViewContext, ViewHandle, WeakViewHandle, WindowContext, }; use isahc::{http::StatusCode, Request, RequestExt}; -use language::{language_settings::SoftWrap, Buffer, LanguageRegistry, ToOffset as _}; +use language::{language_settings::SoftWrap, Buffer, LanguageRegistry, Selection, ToOffset as _}; use serde::Deserialize; use settings::SettingsStore; use std::{ @@ -589,7 +589,11 @@ impl Assistant { cx.notify(); } - fn assist(&mut self, cx: &mut ModelContext) -> Option<(MessageAnchor, MessageAnchor)> { + fn assist( + &mut self, + selection: Selection, + cx: &mut ModelContext, + ) -> Option<(MessageAnchor, MessageAnchor)> { let request = OpenAIRequest { model: self.model.clone(), messages: self.open_ai_request_messages(cx), @@ -598,9 +602,13 @@ impl Assistant { let api_key = self.api_key.borrow().clone()?; let stream = stream_completion(api_key, cx.background().clone(), request); - let assistant_message = - self.insert_message_after(self.message_anchors.last()?.id, Role::Assistant, cx)?; + let assistant_message = self.insert_message_after( + self.message_for_offset(selection.head(), cx)?.id, + Role::Assistant, + cx, + )?; let user_message = self.insert_message_after(assistant_message.id, Role::User, cx)?; + let task = cx.spawn_weak({ |this, mut cx| async move { let assistant_message_id = assistant_message.id; @@ -979,8 +987,9 @@ impl AssistantEditor { } fn assist(&mut self, _: &Assist, cx: &mut ViewContext) { + let selection = self.editor.read(cx).selections.newest(cx); let user_message = self.assistant.update(cx, |assistant, cx| { - let (_, user_message) = assistant.assist(cx)?; + let (_, user_message) = assistant.assist(selection, cx)?; Some(user_message) }); From 77f5b5a80d2f1565d87fdceba80e657476a0103e Mon Sep 17 00:00:00 2001 From: Kirill Bulatov Date: Fri, 16 Jun 2023 22:02:29 +0300 Subject: [PATCH 08/56] React on message-less LSP requests properly Co-Authored-By: Julia Risley --- crates/lsp/src/lsp.rs | 27 ++++++++++++++++++++------- 1 file changed, 20 insertions(+), 7 deletions(-) diff --git a/crates/lsp/src/lsp.rs b/crates/lsp/src/lsp.rs index 96d4382075..af73a16ec2 100644 --- a/crates/lsp/src/lsp.rs +++ b/crates/lsp/src/lsp.rs @@ -103,14 +103,14 @@ struct Notification<'a, T> { params: T, } -#[derive(Deserialize)] +#[derive(Debug, Clone, Deserialize)] struct AnyNotification<'a> { #[serde(default)] id: Option, #[serde(borrow)] method: &'a str, - #[serde(borrow)] - params: &'a RawValue, + #[serde(borrow, default)] + params: Option<&'a RawValue>, } #[derive(Debug, Serialize, Deserialize)] @@ -157,9 +157,12 @@ impl LanguageServer { "unhandled notification {}:\n{}", notification.method, serde_json::to_string_pretty( - &Value::from_str(notification.params.get()).unwrap() + ¬ification + .params + .and_then(|params| Value::from_str(params.get()).ok()) + .unwrap_or(Value::Null) ) - .unwrap() + .unwrap(), ); }, ); @@ -279,7 +282,11 @@ impl LanguageServer { if let Ok(msg) = serde_json::from_slice::(&buffer) { if let Some(handler) = notification_handlers.lock().get_mut(msg.method) { - handler(msg.id, msg.params.get(), cx.clone()); + handler( + msg.id, + &msg.params.map(|params| params.get()).unwrap_or("null"), + cx.clone(), + ); } else { on_unhandled_notification(msg); } @@ -828,7 +835,13 @@ impl LanguageServer { cx, move |msg| { notifications_tx - .try_send((msg.method.to_string(), msg.params.get().to_string())) + .try_send(( + msg.method.to_string(), + msg.params + .map(|raw_value| raw_value.get()) + .unwrap_or("null") + .to_string(), + )) .ok(); }, )), From ffd1190ccad54acc4f73d7f4d20013ef5927cff1 Mon Sep 17 00:00:00 2001 From: Nate Butler Date: Fri, 16 Jun 2023 23:02:32 -0400 Subject: [PATCH 09/56] Update rose pine theme family --- styles/src/themes/rose-pine/common.ts | 73 +++++++++++++++++++ styles/src/themes/rose-pine/rose-pine-dawn.ts | 40 +++++----- styles/src/themes/rose-pine/rose-pine-moon.ts | 40 +++++----- styles/src/themes/rose-pine/rose-pine.ts | 37 +++++----- 4 files changed, 129 insertions(+), 61 deletions(-) create mode 100644 styles/src/themes/rose-pine/common.ts diff --git a/styles/src/themes/rose-pine/common.ts b/styles/src/themes/rose-pine/common.ts new file mode 100644 index 0000000000..28ed090c5d --- /dev/null +++ b/styles/src/themes/rose-pine/common.ts @@ -0,0 +1,73 @@ +export const color = { + default: { + base: '#191724', + surface: '#1f1d2e', + overlay: '#26233a', + muted: '#6e6a86', + subtle: '#908caa', + text: '#e0def4', + love: '#eb6f92', + gold: '#f6c177', + rose: '#ebbcba', + pine: '#31748f', + foam: '#9ccfd8', + iris: '#c4a7e7', + highlightLow: '#21202e', + highlightMed: '#403d52', + highlightHigh: '#524f67', + }, + moon: { + base: '#232136', + surface: '#2a273f', + overlay: '#393552', + muted: '#6e6a86', + subtle: '#908caa', + text: '#e0def4', + love: '#eb6f92', + gold: '#f6c177', + rose: '#ea9a97', + pine: '#3e8fb0', + foam: '#9ccfd8', + iris: '#c4a7e7', + highlightLow: '#2a283e', + highlightMed: '#44415a', + highlightHigh: '#56526e', + }, + dawn: { + base: "#faf4ed", + surface: "#fffaf3", + overlay: "#f2e9e1", + muted: "#9893a5", + subtle: "#797593", + text: "#575279", + love: "#b4637a", + gold: "#ea9d34", + rose: "#d7827e", + pine: "#286983", + foam: "#56949f", + iris: "#907aa9", + highlightLow: "#f4ede8", + highlightMed: "#dfdad9", + highlightHigh: "#cecacd", + } +}; + +export const syntax = (c: typeof color.default) => { + return { + comment: { color: c.muted }, + operator: { color: c.subtle }, + punctuation: { color: c.subtle }, + variable: { color: c.text }, + string: { color: c.gold }, + "type.builtin": { color: c.rose }, + boolean: { color: c.rose }, + function: { color: c.rose }, + keyword: { color: c.pine }, + tag: { color: c.foam }, + type: { color: c.foam }, + "function.method": { color: c.iris }, + title: { color: c.gold }, + linkText: { color: c.foam, italic: false }, + linkUri: { color: c.rose }, + } +} diff --git a/styles/src/themes/rose-pine/rose-pine-dawn.ts b/styles/src/themes/rose-pine/rose-pine-dawn.ts index a373ed378c..3ec5d30bb6 100644 --- a/styles/src/themes/rose-pine/rose-pine-dawn.ts +++ b/styles/src/themes/rose-pine/rose-pine-dawn.ts @@ -6,6 +6,13 @@ import { ThemeConfig, } from "../../common" +import { color as c, syntax } from "./common"; + +const color = c.dawn + +const green = chroma.mix(color.foam, "#10b981", 0.6, 'lab'); +const magenta = chroma.mix(color.love, color.pine, 0.5, 'lab'); + export const theme: ThemeConfig = { name: "Rosé Pine Dawn", author: "edunfelt", @@ -14,26 +21,17 @@ export const theme: ThemeConfig = { licenseUrl: "https://github.com/edunfelt/base16-rose-pine-scheme", licenseFile: `${__dirname}/LICENSE`, inputColor: { - neutral: chroma - .scale([ - "#575279", - "#797593", - "#9893A5", - "#B5AFB8", - "#D3CCCC", - "#F2E9E1", - "#FFFAF3", - "#FAF4ED", - ]) - .domain([0, 0.35, 0.45, 0.65, 0.7, 0.8, 0.9, 1]), - red: colorRamp(chroma("#B4637A")), - orange: colorRamp(chroma("#D7827E")), - yellow: colorRamp(chroma("#EA9D34")), - green: colorRamp(chroma("#679967")), - cyan: colorRamp(chroma("#286983")), - blue: colorRamp(chroma("#56949F")), - violet: colorRamp(chroma("#907AA9")), - magenta: colorRamp(chroma("#79549F")), + neutral: chroma.scale([color.base, color.surface, color.highlightHigh, color.overlay, color.muted, color.subtle, color.text].reverse()).domain([0, 0.35, 0.45, 0.65, 0.7, 0.8, 0.9, 1]), + red: colorRamp(chroma(color.love)), + orange: colorRamp(chroma(color.iris)), + yellow: colorRamp(chroma(color.gold)), + green: colorRamp(chroma(green)), + cyan: colorRamp(chroma(color.pine)), + blue: colorRamp(chroma(color.foam)), + violet: colorRamp(chroma(color.iris)), + magenta: colorRamp(chroma(magenta)), }, - override: { syntax: {} }, + override: { + syntax: syntax(color) + } } diff --git a/styles/src/themes/rose-pine/rose-pine-moon.ts b/styles/src/themes/rose-pine/rose-pine-moon.ts index 94b8166cb3..4e70d2f0ad 100644 --- a/styles/src/themes/rose-pine/rose-pine-moon.ts +++ b/styles/src/themes/rose-pine/rose-pine-moon.ts @@ -6,6 +6,13 @@ import { ThemeConfig, } from "../../common" +import { color as c, syntax } from "./common"; + +const color = c.moon + +const green = chroma.mix(color.foam, "#10b981", 0.6, 'lab'); +const magenta = chroma.mix(color.love, color.pine, 0.5, 'lab'); + export const theme: ThemeConfig = { name: "Rosé Pine Moon", author: "edunfelt", @@ -14,26 +21,17 @@ export const theme: ThemeConfig = { licenseUrl: "https://github.com/edunfelt/base16-rose-pine-scheme", licenseFile: `${__dirname}/LICENSE`, inputColor: { - neutral: chroma - .scale([ - "#232136", - "#2A273F", - "#393552", - "#3E3A53", - "#56526C", - "#6E6A86", - "#908CAA", - "#E0DEF4", - ]) - .domain([0, 0.3, 0.55, 1]), - red: colorRamp(chroma("#EB6F92")), - orange: colorRamp(chroma("#EBBCBA")), - yellow: colorRamp(chroma("#F6C177")), - green: colorRamp(chroma("#8DBD8D")), - cyan: colorRamp(chroma("#409BBE")), - blue: colorRamp(chroma("#9CCFD8")), - violet: colorRamp(chroma("#C4A7E7")), - magenta: colorRamp(chroma("#AB6FE9")), + neutral: chroma.scale([color.base, color.surface, color.highlightHigh, color.overlay, color.muted, color.subtle, color.text]).domain([0, 0.3, 0.55, 1]), + red: colorRamp(chroma(color.love)), + orange: colorRamp(chroma(color.iris)), + yellow: colorRamp(chroma(color.gold)), + green: colorRamp(chroma(green)), + cyan: colorRamp(chroma(color.pine)), + blue: colorRamp(chroma(color.foam)), + violet: colorRamp(chroma(color.iris)), + magenta: colorRamp(chroma(magenta)), }, - override: { syntax: {} }, + override: { + syntax: syntax(color) + } } diff --git a/styles/src/themes/rose-pine/rose-pine.ts b/styles/src/themes/rose-pine/rose-pine.ts index 3aabe3f10e..6c4a6ac49b 100644 --- a/styles/src/themes/rose-pine/rose-pine.ts +++ b/styles/src/themes/rose-pine/rose-pine.ts @@ -5,6 +5,12 @@ import { ThemeLicenseType, ThemeConfig, } from "../../common" +import { color as c, syntax } from "./common"; + +const color = c.default + +const green = chroma.mix(color.foam, "#10b981", 0.6, 'lab'); +const magenta = chroma.mix(color.love, color.pine, 0.5, 'lab'); export const theme: ThemeConfig = { name: "Rosé Pine", @@ -14,24 +20,17 @@ export const theme: ThemeConfig = { licenseUrl: "https://github.com/edunfelt/base16-rose-pine-scheme", licenseFile: `${__dirname}/LICENSE`, inputColor: { - neutral: chroma.scale([ - "#191724", - "#1f1d2e", - "#26233A", - "#3E3A53", - "#56526C", - "#6E6A86", - "#908CAA", - "#E0DEF4", - ]), - red: colorRamp(chroma("#EB6F92")), - orange: colorRamp(chroma("#EBBCBA")), - yellow: colorRamp(chroma("#F6C177")), - green: colorRamp(chroma("#8DBD8D")), - cyan: colorRamp(chroma("#409BBE")), - blue: colorRamp(chroma("#9CCFD8")), - violet: colorRamp(chroma("#C4A7E7")), - magenta: colorRamp(chroma("#AB6FE9")), + neutral: chroma.scale([color.base, color.surface, color.highlightHigh, color.overlay, color.muted, color.subtle, color.text]), + red: colorRamp(chroma(color.love)), + orange: colorRamp(chroma(color.iris)), + yellow: colorRamp(chroma(color.gold)), + green: colorRamp(chroma(green)), + cyan: colorRamp(chroma(color.pine)), + blue: colorRamp(chroma(color.foam)), + violet: colorRamp(chroma(color.iris)), + magenta: colorRamp(chroma(magenta)), }, - override: { syntax: {} }, + override: { + syntax: syntax(color) + } } From bb04d65b8ec38de230c9515f48139469c923df62 Mon Sep 17 00:00:00 2001 From: "Joseph T. Lyons" Date: Sun, 18 Jun 2023 02:05:25 -0400 Subject: [PATCH 10/56] Add pane activation bindings for Atom keymap --- assets/keymaps/atom.json | 35 ++++++++++++++++++++++++++++++++++- 1 file changed, 34 insertions(+), 1 deletion(-) diff --git a/assets/keymaps/atom.json b/assets/keymaps/atom.json index 25143914cc..60acf5ea6f 100644 --- a/assets/keymaps/atom.json +++ b/assets/keymaps/atom.json @@ -55,7 +55,40 @@ "context": "Pane", "bindings": { "alt-cmd-/": "search::ToggleRegex", - "ctrl-0": "project_panel::ToggleFocus" + "ctrl-0": "project_panel::ToggleFocus", + "cmd-1": [ + "pane::ActivateItem", + 0 + ], + "cmd-2": [ + "pane::ActivateItem", + 1 + ], + "cmd-3": [ + "pane::ActivateItem", + 2 + ], + "cmd-4": [ + "pane::ActivateItem", + 3 + ], + "cmd-5": [ + "pane::ActivateItem", + 4 + ], + "cmd-6": [ + "pane::ActivateItem", + 5 + ], + "cmd-7": [ + "pane::ActivateItem", + 6 + ], + "cmd-8": [ + "pane::ActivateItem", + 7 + ], + "cmd-9": "pane::ActivateLastItem" } }, { From c9df963142d317f41b4998550d2cdc7ef78c90f2 Mon Sep 17 00:00:00 2001 From: Antonio Scandurra Date: Mon, 19 Jun 2023 12:00:45 +0200 Subject: [PATCH 11/56] Allow message splitting with multiple cursors --- crates/ai/src/assistant.rs | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) diff --git a/crates/ai/src/assistant.rs b/crates/ai/src/assistant.rs index 853f7262d3..d5c50146c3 100644 --- a/crates/ai/src/assistant.rs +++ b/crates/ai/src/assistant.rs @@ -8,7 +8,7 @@ use collections::{HashMap, HashSet}; use editor::{ display_map::{BlockDisposition, BlockId, BlockProperties, BlockStyle, ToDisplayPoint}, scroll::autoscroll::{Autoscroll, AutoscrollStrategy}, - Anchor, Editor, + Anchor, Editor, ToOffset, }; use fs::Fs; use futures::{io::BufReader, AsyncBufReadExt, AsyncReadExt, Stream, StreamExt}; @@ -1294,8 +1294,14 @@ impl AssistantEditor { fn split(&mut self, _: &Split, cx: &mut ViewContext) { self.assistant.update(cx, |assistant, cx| { - let range = self.editor.read(cx).selections.newest::(cx).range(); - assistant.split_message(range, cx); + let selections = self.editor.read(cx).selections.disjoint_anchors(); + for selection in selections.into_iter() { + let buffer = self.editor.read(cx).buffer().read(cx).snapshot(cx); + let range = selection + .map(|endpoint| endpoint.to_offset(&buffer)) + .range(); + assistant.split_message(range, cx); + } }); } From 9191a824471874b1821e3d16bb55bb8e8a2a1981 Mon Sep 17 00:00:00 2001 From: Antonio Scandurra Date: Mon, 19 Jun 2023 14:35:33 +0200 Subject: [PATCH 12/56] Remove `Assistant::open_ai_request_messages` --- crates/ai/src/assistant.rs | 47 +++++++++++++++++++++----------------- 1 file changed, 26 insertions(+), 21 deletions(-) diff --git a/crates/ai/src/assistant.rs b/crates/ai/src/assistant.rs index a96528039c..be3a49ce18 100644 --- a/crates/ai/src/assistant.rs +++ b/crates/ai/src/assistant.rs @@ -543,7 +543,7 @@ impl Assistant { fn count_remaining_tokens(&mut self, cx: &mut ModelContext) { let messages = self - .open_ai_request_messages(cx) + .messages(cx) .into_iter() .filter_map(|message| { Some(tiktoken_rs::ChatCompletionRequestMessage { @@ -552,7 +552,7 @@ impl Assistant { Role::Assistant => "assistant".into(), Role::System => "system".into(), }, - content: message.content, + content: self.buffer.read(cx).text_for_range(message.range).collect(), name: None, }) }) @@ -596,7 +596,10 @@ impl Assistant { ) -> Option<(MessageAnchor, MessageAnchor)> { let request = OpenAIRequest { model: self.model.clone(), - messages: self.open_ai_request_messages(cx), + messages: self + .messages(cx) + .map(|message| message.to_open_ai_message(self.buffer.read(cx))) + .collect(), stream: true, }; @@ -841,16 +844,19 @@ impl Assistant { if self.message_anchors.len() >= 2 && self.summary.is_none() { let api_key = self.api_key.borrow().clone(); if let Some(api_key) = api_key { - let mut messages = self.open_ai_request_messages(cx); - messages.truncate(2); - messages.push(RequestMessage { - role: Role::User, - content: "Summarize the conversation into a short title without punctuation" - .into(), - }); + let messages = self + .messages(cx) + .take(2) + .map(|message| message.to_open_ai_message(self.buffer.read(cx))) + .chain(Some(RequestMessage { + role: Role::User, + content: + "Summarize the conversation into a short title without punctuation" + .into(), + })); let request = OpenAIRequest { model: self.model.clone(), - messages, + messages: messages.collect(), stream: true, }; @@ -878,16 +884,6 @@ impl Assistant { } } - fn open_ai_request_messages(&self, cx: &AppContext) -> Vec { - let buffer = self.buffer.read(cx); - self.messages(cx) - .map(|message| RequestMessage { - role: message.role, - content: buffer.text_for_range(message.range).collect(), - }) - .collect() - } - fn message_for_offset<'a>(&'a self, offset: usize, cx: &'a AppContext) -> Option { let mut messages = self.messages(cx).peekable(); while let Some(message) = messages.next() { @@ -1446,6 +1442,15 @@ pub struct Message { error: Option>, } +impl Message { + fn to_open_ai_message(&self, buffer: &Buffer) -> RequestMessage { + RequestMessage { + role: self.role, + content: buffer.text_for_range(self.range.clone()).collect(), + } + } +} + async fn stream_completion( api_key: String, executor: Arc, From 75e23290285a751fed9b3faf0d81832bb21d5d8c Mon Sep 17 00:00:00 2001 From: Antonio Scandurra Date: Mon, 19 Jun 2023 17:23:40 +0200 Subject: [PATCH 13/56] Allow for multi-cursor `assist` and `cycle_role` actions Co-Authored-By: Nathan Sobo Co-Authored-By: Kyle Caverly --- crates/ai/src/assistant.rs | 350 +++++++++++++++++++++++++------------ 1 file changed, 241 insertions(+), 109 deletions(-) diff --git a/crates/ai/src/assistant.rs b/crates/ai/src/assistant.rs index be3a49ce18..83b7105be2 100644 --- a/crates/ai/src/assistant.rs +++ b/crates/ai/src/assistant.rs @@ -22,7 +22,7 @@ use gpui::{ Subscription, Task, View, ViewContext, ViewHandle, WeakViewHandle, WindowContext, }; use isahc::{http::StatusCode, Request, RequestExt}; -use language::{language_settings::SoftWrap, Buffer, LanguageRegistry, Selection, ToOffset as _}; +use language::{language_settings::SoftWrap, Buffer, LanguageRegistry, ToOffset as _}; use serde::Deserialize; use settings::SettingsStore; use std::{ @@ -591,106 +591,129 @@ impl Assistant { fn assist( &mut self, - selection: Selection, + selected_messages: HashSet, cx: &mut ModelContext, - ) -> Option<(MessageAnchor, MessageAnchor)> { - let request = OpenAIRequest { - model: self.model.clone(), - messages: self - .messages(cx) - .map(|message| message.to_open_ai_message(self.buffer.read(cx))) - .collect(), - stream: true, - }; + ) -> Vec { + let mut user_messages = Vec::new(); + for selected_message_id in selected_messages { + let selected_message_role = + if let Some(metadata) = self.messages_metadata.get(&selected_message_id) { + metadata.role + } else { + continue; + }; + let Some(user_message) = self.insert_message_after(selected_message_id, Role::User, cx) else { + continue; + }; + user_messages.push(user_message); + if selected_message_role == Role::User { + let request = OpenAIRequest { + model: self.model.clone(), + messages: self + .messages(cx) + .map(|message| message.to_open_ai_message(self.buffer.read(cx))) + .chain(Some(RequestMessage { + role: Role::System, + content: format!( + "Direct your reply to message with id {}. Do not include a [Message X] header.", + selected_message_id.0 + ), + })) + .collect(), + stream: true, + }; - let api_key = self.api_key.borrow().clone()?; - let stream = stream_completion(api_key, cx.background().clone(), request); - let assistant_message = self.insert_message_after( - self.message_for_offset(selection.head(), cx)?.id, - Role::Assistant, - cx, - )?; - let user_message = self.insert_message_after(assistant_message.id, Role::User, cx)?; + let Some(api_key) = self.api_key.borrow().clone() else { continue }; + let stream = stream_completion(api_key, cx.background().clone(), request); + let assistant_message = self + .insert_message_after(selected_message_id, Role::Assistant, cx) + .unwrap(); - let task = cx.spawn_weak({ - |this, mut cx| async move { - let assistant_message_id = assistant_message.id; - let stream_completion = async { - let mut messages = stream.await?; + let task = cx.spawn_weak({ + |this, mut cx| async move { + let assistant_message_id = assistant_message.id; + let stream_completion = async { + let mut messages = stream.await?; + + while let Some(message) = messages.next().await { + let mut message = message?; + if let Some(choice) = message.choices.pop() { + this.upgrade(&cx) + .ok_or_else(|| anyhow!("assistant was dropped"))? + .update(&mut cx, |this, cx| { + let text: Arc = choice.delta.content?.into(); + let message_ix = this.message_anchors.iter().position( + |message| message.id == assistant_message_id, + )?; + this.buffer.update(cx, |buffer, cx| { + let offset = if message_ix + 1 + == this.message_anchors.len() + { + buffer.len() + } else { + this.message_anchors[message_ix + 1] + .start + .to_offset(buffer) + .saturating_sub(1) + }; + buffer.edit([(offset..offset, text)], None, cx); + }); + cx.emit(AssistantEvent::StreamedCompletion); + + Some(()) + }); + } + } - while let Some(message) = messages.next().await { - let mut message = message?; - if let Some(choice) = message.choices.pop() { this.upgrade(&cx) .ok_or_else(|| anyhow!("assistant was dropped"))? .update(&mut cx, |this, cx| { - let text: Arc = choice.delta.content?.into(); - let message_ix = this - .message_anchors - .iter() - .position(|message| message.id == assistant_message_id)?; - this.buffer.update(cx, |buffer, cx| { - let offset = if message_ix + 1 == this.message_anchors.len() - { - buffer.len() - } else { - this.message_anchors[message_ix + 1] - .start - .to_offset(buffer) - .saturating_sub(1) - }; - buffer.edit([(offset..offset, text)], None, cx); + this.pending_completions.retain(|completion| { + completion.id != this.completion_count }); - cx.emit(AssistantEvent::StreamedCompletion); - - Some(()) + this.summarize(cx); }); + + anyhow::Ok(()) + }; + + let result = stream_completion.await; + if let Some(this) = this.upgrade(&cx) { + this.update(&mut cx, |this, cx| { + if let Err(error) = result { + if let Some(metadata) = + this.messages_metadata.get_mut(&assistant_message.id) + { + metadata.error = Some(error.to_string().trim().into()); + cx.notify(); + } + } + }); } } + }); - this.upgrade(&cx) - .ok_or_else(|| anyhow!("assistant was dropped"))? - .update(&mut cx, |this, cx| { - this.pending_completions - .retain(|completion| completion.id != this.completion_count); - this.summarize(cx); - }); - - anyhow::Ok(()) - }; - - let result = stream_completion.await; - if let Some(this) = this.upgrade(&cx) { - this.update(&mut cx, |this, cx| { - if let Err(error) = result { - if let Some(metadata) = - this.messages_metadata.get_mut(&assistant_message.id) - { - metadata.error = Some(error.to_string().trim().into()); - cx.notify(); - } - } - }); - } + self.pending_completions.push(PendingCompletion { + id: post_inc(&mut self.completion_count), + _task: task, + }); } - }); + } - self.pending_completions.push(PendingCompletion { - id: post_inc(&mut self.completion_count), - _task: task, - }); - Some((assistant_message, user_message)) + user_messages } fn cancel_last_assist(&mut self) -> bool { self.pending_completions.pop().is_some() } - fn cycle_message_role(&mut self, id: MessageId, cx: &mut ModelContext) { - if let Some(metadata) = self.messages_metadata.get_mut(&id) { - metadata.role.cycle(); - cx.emit(AssistantEvent::MessagesEdited); - cx.notify(); + fn cycle_message_roles(&mut self, ids: HashSet, cx: &mut ModelContext) { + for id in ids { + if let Some(metadata) = self.messages_metadata.get_mut(&id) { + metadata.role.cycle(); + cx.emit(AssistantEvent::MessagesEdited); + cx.notify(); + } } } @@ -884,14 +907,39 @@ impl Assistant { } } - fn message_for_offset<'a>(&'a self, offset: usize, cx: &'a AppContext) -> Option { + fn message_for_offset(&self, offset: usize, cx: &AppContext) -> Option { + self.messages_for_offsets([offset], cx).pop() + } + + fn messages_for_offsets( + &self, + offsets: impl IntoIterator, + cx: &AppContext, + ) -> Vec { + let mut result = Vec::new(); + + let buffer_len = self.buffer.read(cx).len(); let mut messages = self.messages(cx).peekable(); - while let Some(message) = messages.next() { - if message.range.contains(&offset) || messages.peek().is_none() { - return Some(message); + let mut offsets = offsets.into_iter().peekable(); + while let Some(offset) = offsets.next() { + // Skip messages that start after the offset. + while messages.peek().map_or(false, |message| { + message.range.end < offset || (message.range.end == offset && offset < buffer_len) + }) { + messages.next(); } + let Some(message) = messages.peek() else { continue }; + + // Skip offsets that are in the same message. + while offsets.peek().map_or(false, |offset| { + message.range.contains(offset) || message.range.end == buffer_len + }) { + offsets.next(); + } + + result.push(message.clone()); } - None + result } fn messages<'a>(&'a self, cx: &'a AppContext) -> impl 'a + Iterator { @@ -983,24 +1031,32 @@ impl AssistantEditor { } fn assist(&mut self, _: &Assist, cx: &mut ViewContext) { - let selection = self.editor.read(cx).selections.newest(cx); - let user_message = self.assistant.update(cx, |assistant, cx| { - let (_, user_message) = assistant.assist(selection, cx)?; - Some(user_message) - }); + let cursors = self.cursors(cx); - if let Some(user_message) = user_message { - let cursor = user_message - .start - .to_offset(&self.assistant.read(cx).buffer.read(cx)); - self.editor.update(cx, |editor, cx| { - editor.change_selections( - Some(Autoscroll::Strategy(AutoscrollStrategy::Fit)), - cx, - |selections| selections.select_ranges([cursor..cursor]), - ); - }); - } + let user_messages = self.assistant.update(cx, |assistant, cx| { + let selected_messages = assistant + .messages_for_offsets(cursors, cx) + .into_iter() + .map(|message| message.id) + .collect(); + assistant.assist(selected_messages, cx) + }); + let new_selections = user_messages + .iter() + .map(|message| { + let cursor = message + .start + .to_offset(self.assistant.read(cx).buffer.read(cx)); + cursor..cursor + }) + .collect::>(); + self.editor.update(cx, |editor, cx| { + editor.change_selections( + Some(Autoscroll::Strategy(AutoscrollStrategy::Fit)), + cx, + |selections| selections.select_ranges(new_selections), + ); + }); } fn cancel_last_assist(&mut self, _: &editor::Cancel, cx: &mut ViewContext) { @@ -1013,14 +1069,25 @@ impl AssistantEditor { } fn cycle_message_role(&mut self, _: &CycleMessageRole, cx: &mut ViewContext) { - let cursor_offset = self.editor.read(cx).selections.newest(cx).head(); + let cursors = self.cursors(cx); self.assistant.update(cx, |assistant, cx| { - if let Some(message) = assistant.message_for_offset(cursor_offset, cx) { - assistant.cycle_message_role(message.id, cx); - } + let messages = assistant + .messages_for_offsets(cursors, cx) + .into_iter() + .map(|message| message.id) + .collect(); + assistant.cycle_message_roles(messages, cx) }); } + fn cursors(&self, cx: &AppContext) -> Vec { + let selections = self.editor.read(cx).selections.all::(cx); + selections + .into_iter() + .map(|selection| selection.head()) + .collect() + } + fn handle_assistant_event( &mut self, _: ModelHandle, @@ -1149,7 +1216,10 @@ impl AssistantEditor { let assistant = assistant.clone(); move |_, _, cx| { assistant.update(cx, |assistant, cx| { - assistant.cycle_message_role(message_id, cx) + assistant.cycle_message_roles( + HashSet::from_iter(Some(message_id)), + cx, + ) }) } }); @@ -1444,9 +1514,11 @@ pub struct Message { impl Message { fn to_open_ai_message(&self, buffer: &Buffer) -> RequestMessage { + let mut content = format!("[Message {}]\n", self.id.0).to_string(); + content.extend(buffer.text_for_range(self.range.clone())); RequestMessage { role: self.role, - content: buffer.text_for_range(self.range.clone()).collect(), + content, } } } @@ -1761,6 +1833,66 @@ mod tests { ); } + #[gpui::test] + fn test_messages_for_offsets(cx: &mut AppContext) { + let registry = Arc::new(LanguageRegistry::test()); + let assistant = cx.add_model(|cx| Assistant::new(Default::default(), registry, cx)); + let buffer = assistant.read(cx).buffer.clone(); + + let message_1 = assistant.read(cx).message_anchors[0].clone(); + assert_eq!( + messages(&assistant, cx), + vec![(message_1.id, Role::User, 0..0)] + ); + + buffer.update(cx, |buffer, cx| buffer.edit([(0..0, "aaa")], None, cx)); + let message_2 = assistant + .update(cx, |assistant, cx| { + assistant.insert_message_after(message_1.id, Role::User, cx) + }) + .unwrap(); + buffer.update(cx, |buffer, cx| buffer.edit([(4..4, "bbb")], None, cx)); + + let message_3 = assistant + .update(cx, |assistant, cx| { + assistant.insert_message_after(message_2.id, Role::User, cx) + }) + .unwrap(); + buffer.update(cx, |buffer, cx| buffer.edit([(8..8, "ccc")], None, cx)); + + assert_eq!(buffer.read(cx).text(), "aaa\nbbb\nccc"); + assert_eq!( + messages(&assistant, cx), + vec![ + (message_1.id, Role::User, 0..4), + (message_2.id, Role::User, 4..8), + (message_3.id, Role::User, 8..11) + ] + ); + + assert_eq!( + message_ids_for_offsets(&assistant, &[0, 4, 9], cx), + [message_1.id, message_2.id, message_3.id] + ); + assert_eq!( + message_ids_for_offsets(&assistant, &[0, 1, 11], cx), + [message_1.id, message_3.id] + ); + + fn message_ids_for_offsets( + assistant: &ModelHandle, + offsets: &[usize], + cx: &AppContext, + ) -> Vec { + assistant + .read(cx) + .messages_for_offsets(offsets.iter().copied(), cx) + .into_iter() + .map(|message| message.id) + .collect() + } + } + fn messages( assistant: &ModelHandle, cx: &AppContext, From cb55356106624959b77941d3e06796aa7ba2a1a9 Mon Sep 17 00:00:00 2001 From: Antonio Scandurra Date: Mon, 19 Jun 2023 17:53:05 +0200 Subject: [PATCH 14/56] WIP --- crates/ai/src/ai.rs | 2 +- crates/ai/src/assistant.rs | 34 +++++++++++++++++++--------------- 2 files changed, 20 insertions(+), 16 deletions(-) diff --git a/crates/ai/src/ai.rs b/crates/ai/src/ai.rs index 40224b3229..b3b62c6a24 100644 --- a/crates/ai/src/ai.rs +++ b/crates/ai/src/ai.rs @@ -7,7 +7,7 @@ use serde::{Deserialize, Serialize}; use std::fmt::{self, Display}; // Data types for chat completion requests -#[derive(Serialize)] +#[derive(Debug, Serialize)] struct OpenAIRequest { model: String, messages: Vec, diff --git a/crates/ai/src/assistant.rs b/crates/ai/src/assistant.rs index 83b7105be2..121e4600cc 100644 --- a/crates/ai/src/assistant.rs +++ b/crates/ai/src/assistant.rs @@ -473,7 +473,7 @@ impl Assistant { language_registry: Arc, cx: &mut ModelContext, ) -> Self { - let model = "gpt-3.5-turbo"; + let model = "gpt-3.5-turbo-0613"; let markdown = language_registry.language_for_name("Markdown"); let buffer = cx.add_model(|cx| { let mut buffer = Buffer::new(0, "", cx); @@ -602,11 +602,13 @@ impl Assistant { } else { continue; }; - let Some(user_message) = self.insert_message_after(selected_message_id, Role::User, cx) else { - continue; - }; - user_messages.push(user_message); - if selected_message_role == Role::User { + + if selected_message_role == Role::Assistant { + let Some(user_message) = self.insert_message_after(selected_message_id, Role::User, cx) else { + continue; + }; + user_messages.push(user_message); + } else { let request = OpenAIRequest { model: self.model.clone(), messages: self @@ -1050,13 +1052,15 @@ impl AssistantEditor { cursor..cursor }) .collect::>(); - self.editor.update(cx, |editor, cx| { - editor.change_selections( - Some(Autoscroll::Strategy(AutoscrollStrategy::Fit)), - cx, - |selections| selections.select_ranges(new_selections), - ); - }); + if !new_selections.is_empty() { + self.editor.update(cx, |editor, cx| { + editor.change_selections( + Some(Autoscroll::Strategy(AutoscrollStrategy::Fit)), + cx, + |selections| selections.select_ranges(new_selections), + ); + }); + } } fn cancel_last_assist(&mut self, _: &editor::Cancel, cx: &mut ViewContext) { @@ -1383,8 +1387,8 @@ impl AssistantEditor { fn cycle_model(&mut self, cx: &mut ViewContext) { self.assistant.update(cx, |assistant, cx| { let new_model = match assistant.model.as_str() { - "gpt-4" => "gpt-3.5-turbo", - _ => "gpt-4", + "gpt-4-0613" => "gpt-3.5-turbo-0613", + _ => "gpt-4-0613", }; assistant.set_model(new_model.into(), cx); }); From 2a3c660d1fbdd17fd90cec4bdc0bf12b101e643b Mon Sep 17 00:00:00 2001 From: Piotr Osiewicz <24362066+osiewicz@users.noreply.github.com> Date: Mon, 19 Jun 2023 18:29:03 +0200 Subject: [PATCH 15/56] settings: accept trailing commas (#2606) Z-2357 I've found a crate that handles both comments and trailing commas in JSON. It is a fork of `serde_json`, but it is maintained & up-to-date. Sadly RawValue seems to not play nicely with it; I've ran into deserialisation issues around use of RawValue. For this PR I've migrated to `Value` API. Obviously this is just a point of discussion, not something I'd merge straight away. There may be better solutions to this particular problem. I've also noticed that `serde_json_lenient` does not handle trailing commas after bindings array. I'm not sure how big of an issue that is. Release Notes: - Improved handling of trailing commas in settings files. [#1322](https://github.com/zed-industries/community/issues/1322) --- Cargo.lock | 43 ++++++++++++++-------- crates/gpui/src/app.rs | 8 ++--- crates/gpui/src/app/action.rs | 8 ++--- crates/gpui/src/app/window.rs | 2 +- crates/settings/Cargo.toml | 4 +-- crates/settings/src/keymap_file.rs | 51 +++++++++++++++++++++------ crates/settings/src/settings_store.rs | 5 +-- 7 files changed, 81 insertions(+), 40 deletions(-) diff --git a/Cargo.lock b/Cargo.lock index 24fd67f90e..4902050017 100644 --- a/Cargo.lock +++ b/Cargo.lock @@ -593,7 +593,7 @@ dependencies = [ "http", "http-body", "hyper", - "itoa", + "itoa 1.0.6", "matchit", "memchr", "mime", @@ -3011,7 +3011,7 @@ checksum = "bd6effc99afb63425aff9b05836f029929e345a6148a14b7ecd5ab67af944482" dependencies = [ "bytes 1.4.0", "fnv", - "itoa", + "itoa 1.0.6", ] [[package]] @@ -3070,7 +3070,7 @@ dependencies = [ "http-body", "httparse", "httpdate", - "itoa", + "itoa 1.0.6", "pin-project-lite 0.2.9", "socket2", "tokio", @@ -3336,6 +3336,12 @@ dependencies = [ "either", ] +[[package]] +name = "itoa" +version = "0.4.8" +source = "registry+https://github.com/rust-lang/crates.io-index" +checksum = "b71991ff56294aa922b450139ee08b3bfc70982c6b2c7562771375cf73542dd4" + [[package]] name = "itoa" version = "1.0.6" @@ -3396,12 +3402,6 @@ dependencies = [ "wasm-bindgen", ] -[[package]] -name = "json_comments" -version = "0.2.1" -source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "41ee439ee368ba4a77ac70d04f14015415af8600d6c894dc1f11bd79758c57d5" - [[package]] name = "jwt" version = "0.16.0" @@ -5667,7 +5667,7 @@ dependencies = [ "bitflags", "errno 0.2.8", "io-lifetimes 0.5.3", - "itoa", + "itoa 1.0.6", "libc", "linux-raw-sys 0.0.42", "once_cell", @@ -6099,7 +6099,19 @@ source = "registry+https://github.com/rust-lang/crates.io-index" checksum = "057d394a50403bcac12672b2b18fb387ab6d289d957dab67dd201875391e52f1" dependencies = [ "indexmap", - "itoa", + "itoa 1.0.6", + "ryu", + "serde", +] + +[[package]] +name = "serde_json_lenient" +version = "0.1.4" +source = "registry+https://github.com/rust-lang/crates.io-index" +checksum = "7d7b9ce5b0a63c6269b9623ed828b39259545a6ec0d8a35d6135ad6af6232add" +dependencies = [ + "indexmap", + "itoa 0.4.8", "ryu", "serde", ] @@ -6122,7 +6134,7 @@ source = "registry+https://github.com/rust-lang/crates.io-index" checksum = "d3491c14715ca2294c4d6a88f15e84739788c1d030eed8c110436aafdaa2f3fd" dependencies = [ "form_urlencoded", - "itoa", + "itoa 1.0.6", "ryu", "serde", ] @@ -6148,7 +6160,7 @@ dependencies = [ "fs", "futures 0.3.28", "gpui", - "json_comments", + "indoc", "lazy_static", "postage", "pretty_assertions", @@ -6157,6 +6169,7 @@ dependencies = [ "serde", "serde_derive", "serde_json", + "serde_json_lenient", "smallvec", "sqlez", "staff_mode", @@ -6507,7 +6520,7 @@ dependencies = [ "hkdf", "hmac 0.12.1", "indexmap", - "itoa", + "itoa 1.0.6", "libc", "libsqlite3-sys", "log", @@ -6993,7 +7006,7 @@ version = "0.3.21" source = "registry+https://github.com/rust-lang/crates.io-index" checksum = "8f3403384eaacbca9923fa06940178ac13e4edb725486d70e8e15881d0c836cc" dependencies = [ - "itoa", + "itoa 1.0.6", "serde", "time-core", "time-macros", diff --git a/crates/gpui/src/app.rs b/crates/gpui/src/app.rs index 882800f128..41684f3226 100644 --- a/crates/gpui/src/app.rs +++ b/crates/gpui/src/app.rs @@ -445,7 +445,7 @@ type WindowBoundsCallback = Box>, &mut WindowContext) -> bool>; type ActiveLabeledTasksCallback = Box bool>; -type DeserializeActionCallback = fn(json: &str) -> anyhow::Result>; +type DeserializeActionCallback = fn(json: serde_json::Value) -> anyhow::Result>; type WindowShouldCloseSubscriptionCallback = Box bool>; pub struct AppContext { @@ -624,14 +624,14 @@ impl AppContext { pub fn deserialize_action( &self, name: &str, - argument: Option<&str>, + argument: Option, ) -> Result> { let callback = self .action_deserializers .get(name) .ok_or_else(|| anyhow!("unknown action {}", name))? .1; - callback(argument.unwrap_or("{}")) + callback(argument.unwrap_or_else(|| serde_json::Value::Object(Default::default()))) .with_context(|| format!("invalid data for action {}", name)) } @@ -5573,7 +5573,7 @@ mod tests { let action1 = cx .deserialize_action( "test::something::ComplexAction", - Some(r#"{"arg": "a", "count": 5}"#), + Some(serde_json::from_str(r#"{"arg": "a", "count": 5}"#).unwrap()), ) .unwrap(); let action2 = cx diff --git a/crates/gpui/src/app/action.rs b/crates/gpui/src/app/action.rs index 5b4df68a65..c6b43e489b 100644 --- a/crates/gpui/src/app/action.rs +++ b/crates/gpui/src/app/action.rs @@ -11,7 +11,7 @@ pub trait Action: 'static { fn qualified_name() -> &'static str where Self: Sized; - fn from_json_str(json: &str) -> anyhow::Result> + fn from_json_str(json: serde_json::Value) -> anyhow::Result> where Self: Sized; } @@ -38,7 +38,7 @@ macro_rules! actions { $crate::__impl_action! { $namespace, $name, - fn from_json_str(_: &str) -> $crate::anyhow::Result> { + fn from_json_str(_: $crate::serde_json::Value) -> $crate::anyhow::Result> { Ok(Box::new(Self)) } } @@ -58,8 +58,8 @@ macro_rules! impl_actions { $crate::__impl_action! { $namespace, $name, - fn from_json_str(json: &str) -> $crate::anyhow::Result> { - Ok(Box::new($crate::serde_json::from_str::(json)?)) + fn from_json_str(json: $crate::serde_json::Value) -> $crate::anyhow::Result> { + Ok(Box::new($crate::serde_json::from_value::(json)?)) } } )* diff --git a/crates/gpui/src/app/window.rs b/crates/gpui/src/app/window.rs index cfcef626df..cffce6c3a6 100644 --- a/crates/gpui/src/app/window.rs +++ b/crates/gpui/src/app/window.rs @@ -394,7 +394,7 @@ impl<'a> WindowContext<'a> { .iter() .filter_map(move |(name, (type_id, deserialize))| { if let Some(action_depth) = handler_depths_by_action_type.get(type_id).copied() { - let action = deserialize("{}").ok()?; + let action = deserialize(serde_json::Value::Object(Default::default())).ok()?; let bindings = self .keystroke_matcher .bindings_for_action_type(*type_id) diff --git a/crates/settings/Cargo.toml b/crates/settings/Cargo.toml index dab4b91992..b5dc301a5c 100644 --- a/crates/settings/Cargo.toml +++ b/crates/settings/Cargo.toml @@ -21,7 +21,7 @@ util = { path = "../util" } anyhow.workspace = true futures.workspace = true -json_comments = "0.2" +serde_json_lenient = {version = "0.1", features = ["preserve_order", "raw_value"]} lazy_static.workspace = true postage.workspace = true rust-embed.workspace = true @@ -37,6 +37,6 @@ tree-sitter-json = "*" [dev-dependencies] gpui = { path = "../gpui", features = ["test-support"] } fs = { path = "../fs", features = ["test-support"] } - +indoc.workspace = true pretty_assertions = "1.3.0" unindent.workspace = true diff --git a/crates/settings/src/keymap_file.rs b/crates/settings/src/keymap_file.rs index e607a254bd..d2e656ebe3 100644 --- a/crates/settings/src/keymap_file.rs +++ b/crates/settings/src/keymap_file.rs @@ -1,5 +1,5 @@ use crate::{settings_store::parse_json_with_comments, SettingsAssets}; -use anyhow::{Context, Result}; +use anyhow::{anyhow, Context, Result}; use collections::BTreeMap; use gpui::{keymap_matcher::Binding, AppContext}; use schemars::{ @@ -8,7 +8,7 @@ use schemars::{ JsonSchema, }; use serde::Deserialize; -use serde_json::{value::RawValue, Value}; +use serde_json::Value; use util::{asset_str, ResultExt}; #[derive(Deserialize, Default, Clone, JsonSchema)] @@ -24,7 +24,7 @@ pub struct KeymapBlock { #[derive(Deserialize, Default, Clone)] #[serde(transparent)] -pub struct KeymapAction(Box); +pub struct KeymapAction(Value); impl JsonSchema for KeymapAction { fn schema_name() -> String { @@ -37,11 +37,12 @@ impl JsonSchema for KeymapAction { } #[derive(Deserialize)] -struct ActionWithData(Box, Box); +struct ActionWithData(Box, Value); impl KeymapFile { pub fn load_asset(asset_path: &str, cx: &mut AppContext) -> Result<()> { let content = asset_str::(asset_path); + Self::parse(content.as_ref())?.add_to_cx(cx) } @@ -54,18 +55,27 @@ impl KeymapFile { let bindings = bindings .into_iter() .filter_map(|(keystroke, action)| { - let action = action.0.get(); + let action = action.0; // This is a workaround for a limitation in serde: serde-rs/json#497 // We want to deserialize the action data as a `RawValue` so that we can // deserialize the action itself dynamically directly from the JSON // string. But `RawValue` currently does not work inside of an untagged enum. - if action.starts_with('[') { - let ActionWithData(name, data) = serde_json::from_str(action).log_err()?; - cx.deserialize_action(&name, Some(data.get())) + if let Value::Array(items) = action { + let Ok([name, data]): Result<[serde_json::Value; 2], _> = items.try_into() else { + return Some(Err(anyhow!("Expected array of length 2"))); + }; + let serde_json::Value::String(name) = name else { + return Some(Err(anyhow!("Expected first item in array to be a string."))) + }; + cx.deserialize_action( + &name, + Some(data), + ) + } else if let Value::String(name) = action { + cx.deserialize_action(&name, None) } else { - let name = serde_json::from_str(action).log_err()?; - cx.deserialize_action(name, None) + return Some(Err(anyhow!("Expected two-element array, got {:?}", action))); } .with_context(|| { format!( @@ -118,3 +128,24 @@ impl KeymapFile { serde_json::to_value(root_schema).unwrap() } } + +#[cfg(test)] +mod tests { + use crate::KeymapFile; + + #[test] + fn can_deserialize_keymap_with_trailing_comma() { + let json = indoc::indoc! {"[ + // Standard macOS bindings + { + \"bindings\": { + \"up\": \"menu::SelectPrev\", + }, + }, + ] + " + + }; + KeymapFile::parse(json).unwrap(); + } +} diff --git a/crates/settings/src/settings_store.rs b/crates/settings/src/settings_store.rs index 39c6a2c122..1188018cd8 100644 --- a/crates/settings/src/settings_store.rs +++ b/crates/settings/src/settings_store.rs @@ -834,11 +834,8 @@ fn to_pretty_json(value: &impl Serialize, indent_size: usize, indent_prefix_len: } pub fn parse_json_with_comments(content: &str) -> Result { - Ok(serde_json::from_reader( - json_comments::CommentSettings::c_style().strip_comments(content.as_bytes()), - )?) + Ok(serde_json_lenient::from_str(content)?) } - #[cfg(test)] mod tests { use super::*; From 04430fdbd628e872a255fb69a6e2965ad2559525 Mon Sep 17 00:00:00 2001 From: Max Brunsfeld Date: Mon, 19 Jun 2023 12:34:46 -0700 Subject: [PATCH 16/56] Fix issues with syntax highlighting in elixir and heex --- crates/zed/src/languages/elixir/highlights.scm | 9 +++++++-- crates/zed/src/languages/heex/highlights.scm | 15 +++++++++------ crates/zed/src/languages/heex/injections.scm | 18 ++++++++++-------- 3 files changed, 26 insertions(+), 16 deletions(-) diff --git a/crates/zed/src/languages/elixir/highlights.scm b/crates/zed/src/languages/elixir/highlights.scm index deea51c436..0e779d195c 100644 --- a/crates/zed/src/languages/elixir/highlights.scm +++ b/crates/zed/src/languages/elixir/highlights.scm @@ -36,8 +36,6 @@ (char) @constant -(interpolation "#{" @punctuation.special "}" @punctuation.special) @embedded - (escape_sequence) @string.escape [ @@ -146,3 +144,10 @@ "<<" ">>" ] @punctuation.bracket + +(interpolation "#{" @punctuation.special "}" @punctuation.special) @embedded + +((sigil + (sigil_name) @_sigil_name + (quoted_content) @embedded) + (#eq? @_sigil_name "H")) diff --git a/crates/zed/src/languages/heex/highlights.scm b/crates/zed/src/languages/heex/highlights.scm index fa88acd4d9..8728110d58 100644 --- a/crates/zed/src/languages/heex/highlights.scm +++ b/crates/zed/src/languages/heex/highlights.scm @@ -1,17 +1,11 @@ ; HEEx delimiters [ - "%>" "--%>" "-->" "/>" "" +] @keyword + ; HEEx operators are highlighted as such "=" @operator diff --git a/crates/zed/src/languages/heex/injections.scm b/crates/zed/src/languages/heex/injections.scm index 0d4977b28a..41b65db8ee 100644 --- a/crates/zed/src/languages/heex/injections.scm +++ b/crates/zed/src/languages/heex/injections.scm @@ -1,11 +1,13 @@ -((directive (partial_expression_value) @content) - (#set! language "elixir") - (#set! include-children) - (#set! combined)) - -; Regular expression_values do not need to be combined -((directive (expression_value) @content) - (#set! language "elixir")) +( + (directive + [ + (partial_expression_value) + (expression_value) + (ending_expression_value) + ] @content) + (#set! language "elixir") + (#set! combined) +) ; expressions live within HTML tags, and do not need to be combined ; From 360bbebbd9b972205a27812a8aa973d387ec5582 Mon Sep 17 00:00:00 2001 From: Max Brunsfeld Date: Mon, 19 Jun 2023 15:56:40 -0700 Subject: [PATCH 17/56] Introduce LspAdapterDelegate trait, passed to LspDelegates --- crates/language/src/language.rs | 92 +++++++++++++++----------- crates/project/src/project.rs | 39 +++++++++-- crates/zed/src/languages/c.rs | 26 +++++--- crates/zed/src/languages/elixir.rs | 27 +++++--- crates/zed/src/languages/go.rs | 32 ++++++--- crates/zed/src/languages/html.rs | 22 +++--- crates/zed/src/languages/json.rs | 15 +++-- crates/zed/src/languages/lua.rs | 29 +++++--- crates/zed/src/languages/python.rs | 13 ++-- crates/zed/src/languages/ruby.rs | 13 ++-- crates/zed/src/languages/rust.rs | 26 +++++--- crates/zed/src/languages/typescript.rs | 30 ++++++--- crates/zed/src/languages/yaml.rs | 12 ++-- 13 files changed, 243 insertions(+), 133 deletions(-) diff --git a/crates/language/src/language.rs b/crates/language/src/language.rs index e91d5770cf..c8554074cd 100644 --- a/crates/language/src/language.rs +++ b/crates/language/src/language.rs @@ -17,7 +17,7 @@ use futures::{ future::{BoxFuture, Shared}, FutureExt, TryFutureExt as _, }; -use gpui::{executor::Background, AppContext, Task}; +use gpui::{executor::Background, AppContext, AsyncAppContext, Task}; use highlight_map::HighlightMap; use lazy_static::lazy_static; use lsp::CodeActionKind; @@ -125,27 +125,30 @@ impl CachedLspAdapter { pub async fn fetch_latest_server_version( &self, - http: Arc, + delegate: &dyn LspAdapterDelegate, ) -> Result> { - self.adapter.fetch_latest_server_version(http).await + self.adapter.fetch_latest_server_version(delegate).await } pub async fn fetch_server_binary( &self, version: Box, - http: Arc, container_dir: PathBuf, + delegate: &dyn LspAdapterDelegate, ) -> Result { self.adapter - .fetch_server_binary(version, http, container_dir) + .fetch_server_binary(version, container_dir, delegate) .await } pub async fn cached_server_binary( &self, container_dir: PathBuf, + delegate: &dyn LspAdapterDelegate, ) -> Option { - self.adapter.cached_server_binary(container_dir).await + self.adapter + .cached_server_binary(container_dir, delegate) + .await } pub fn code_action_kinds(&self) -> Option> { @@ -187,23 +190,32 @@ impl CachedLspAdapter { } } +pub trait LspAdapterDelegate: Send + Sync { + fn show_notification(&self, message: &str, cx: &mut AppContext); + fn http_client(&self) -> Arc; +} + #[async_trait] pub trait LspAdapter: 'static + Send + Sync { async fn name(&self) -> LanguageServerName; async fn fetch_latest_server_version( &self, - http: Arc, + delegate: &dyn LspAdapterDelegate, ) -> Result>; async fn fetch_server_binary( &self, version: Box, - http: Arc, container_dir: PathBuf, + delegate: &dyn LspAdapterDelegate, ) -> Result; - async fn cached_server_binary(&self, container_dir: PathBuf) -> Option; + async fn cached_server_binary( + &self, + container_dir: PathBuf, + delegate: &dyn LspAdapterDelegate, + ) -> Option; async fn process_diagnostics(&self, _: &mut lsp::PublishDiagnosticsParams) {} @@ -513,10 +525,7 @@ pub struct LanguageRegistry { login_shell_env_loaded: Shared>, #[allow(clippy::type_complexity)] lsp_binary_paths: Mutex< - HashMap< - LanguageServerName, - Shared>>>, - >, + HashMap>>>>, >, executor: Option>, } @@ -812,7 +821,7 @@ impl LanguageRegistry { language: Arc, adapter: Arc, root_path: Arc, - http_client: Arc, + delegate: Arc, cx: &mut AppContext, ) -> Option { let server_id = self.state.write().next_language_server_id(); @@ -860,7 +869,6 @@ impl LanguageRegistry { .log_err()?; let this = self.clone(); let language = language.clone(); - let http_client = http_client.clone(); let download_dir = download_dir.clone(); let root_path = root_path.clone(); let adapter = adapter.clone(); @@ -870,23 +878,25 @@ impl LanguageRegistry { let task = cx.spawn(|cx| async move { login_shell_env_loaded.await; - let mut lock = this.lsp_binary_paths.lock(); - let entry = lock + let entry = this + .lsp_binary_paths + .lock() .entry(adapter.name.clone()) .or_insert_with(|| { - get_binary( - adapter.clone(), - language.clone(), - http_client, - download_dir, - lsp_binary_statuses, - ) - .map_err(Arc::new) - .boxed() + cx.spawn(|cx| { + get_binary( + adapter.clone(), + language.clone(), + delegate, + download_dir, + lsp_binary_statuses, + cx, + ) + .map_err(Arc::new) + }) .shared() }) .clone(); - drop(lock); let binary = entry.clone().map_err(|e| anyhow!(e)).await?; let server = lsp::LanguageServer::new( @@ -958,9 +968,10 @@ impl Default for LanguageRegistry { async fn get_binary( adapter: Arc, language: Arc, - http_client: Arc, + delegate: Arc, download_dir: Arc, statuses: async_broadcast::Sender<(Arc, LanguageServerBinaryStatus)>, + _cx: AsyncAppContext, ) -> Result { let container_dir = download_dir.join(adapter.name.0.as_ref()); if !container_dir.exists() { @@ -972,14 +983,17 @@ async fn get_binary( let binary = fetch_latest_binary( adapter.clone(), language.clone(), - http_client, + delegate.as_ref(), &container_dir, statuses.clone(), ) .await; if let Err(error) = binary.as_ref() { - if let Some(cached) = adapter.cached_server_binary(container_dir).await { + if let Some(cached) = adapter + .cached_server_binary(container_dir, delegate.as_ref()) + .await + { statuses .broadcast((language.clone(), LanguageServerBinaryStatus::Cached)) .await?; @@ -1001,7 +1015,7 @@ async fn get_binary( async fn fetch_latest_binary( adapter: Arc, language: Arc, - http_client: Arc, + delegate: &dyn LspAdapterDelegate, container_dir: &Path, lsp_binary_statuses_tx: async_broadcast::Sender<(Arc, LanguageServerBinaryStatus)>, ) -> Result { @@ -1012,14 +1026,12 @@ async fn fetch_latest_binary( LanguageServerBinaryStatus::CheckingForUpdate, )) .await?; - let version_info = adapter - .fetch_latest_server_version(http_client.clone()) - .await?; + let version_info = adapter.fetch_latest_server_version(delegate).await?; lsp_binary_statuses_tx .broadcast((language.clone(), LanguageServerBinaryStatus::Downloading)) .await?; let binary = adapter - .fetch_server_binary(version_info, http_client, container_dir.to_path_buf()) + .fetch_server_binary(version_info, container_dir.to_path_buf(), delegate) .await?; lsp_binary_statuses_tx .broadcast((language.clone(), LanguageServerBinaryStatus::Downloaded)) @@ -1543,7 +1555,7 @@ impl LspAdapter for Arc { async fn fetch_latest_server_version( &self, - _: Arc, + _: &dyn LspAdapterDelegate, ) -> Result> { unreachable!(); } @@ -1551,13 +1563,17 @@ impl LspAdapter for Arc { async fn fetch_server_binary( &self, _: Box, - _: Arc, _: PathBuf, + _: &dyn LspAdapterDelegate, ) -> Result { unreachable!(); } - async fn cached_server_binary(&self, _: PathBuf) -> Option { + async fn cached_server_binary( + &self, + _: PathBuf, + _: &dyn LspAdapterDelegate, + ) -> Option { unreachable!(); } diff --git a/crates/project/src/project.rs b/crates/project/src/project.rs index 5069c805b7..6d823f0107 100644 --- a/crates/project/src/project.rs +++ b/crates/project/src/project.rs @@ -38,9 +38,9 @@ use language::{ }, range_from_lsp, range_to_lsp, Anchor, Bias, Buffer, CachedLspAdapter, CodeAction, CodeLabel, Completion, Diagnostic, DiagnosticEntry, DiagnosticSet, Diff, Event as BufferEvent, File as _, - Language, LanguageRegistry, LanguageServerName, LocalFile, OffsetRangeExt, Operation, Patch, - PendingLanguageServer, PointUtf16, TextBufferSnapshot, ToOffset, ToPointUtf16, Transaction, - Unclipped, + Language, LanguageRegistry, LanguageServerName, LocalFile, LspAdapterDelegate, OffsetRangeExt, + Operation, Patch, PendingLanguageServer, PointUtf16, TextBufferSnapshot, ToOffset, + ToPointUtf16, Transaction, Unclipped, }; use log::error; use lsp::{ @@ -75,8 +75,8 @@ use std::{ }; use terminals::Terminals; use util::{ - debug_panic, defer, merge_json_value_into, paths::LOCAL_SETTINGS_RELATIVE_PATH, post_inc, - ResultExt, TryFutureExt as _, + debug_panic, defer, http::HttpClient, merge_json_value_into, + paths::LOCAL_SETTINGS_RELATIVE_PATH, post_inc, ResultExt, TryFutureExt as _, }; pub use fs::*; @@ -252,6 +252,7 @@ pub enum Event { LanguageServerAdded(LanguageServerId), LanguageServerRemoved(LanguageServerId), LanguageServerLog(LanguageServerId, String), + LanguageServerNotification(String), ActiveEntryChanged(Option), WorktreeAdded, WorktreeRemoved(WorktreeId), @@ -435,6 +436,11 @@ pub enum FormatTrigger { Manual, } +struct ProjectLspAdapterDelegate { + project: ModelHandle, + http_client: Arc, +} + impl FormatTrigger { fn from_proto(value: i32) -> FormatTrigger { match value { @@ -2407,7 +2413,7 @@ impl Project { language.clone(), adapter.clone(), worktree_path.clone(), - self.client.http_client(), + ProjectLspAdapterDelegate::new(self, cx), cx, ) { Some(pending_server) => pending_server, @@ -7188,6 +7194,27 @@ impl> From<(WorktreeId, P)> for ProjectPath { } } +impl ProjectLspAdapterDelegate { + fn new(project: &Project, cx: &ModelContext) -> Arc { + Arc::new(Self { + project: cx.handle(), + http_client: project.client.http_client(), + }) + } +} + +impl LspAdapterDelegate for ProjectLspAdapterDelegate { + fn show_notification(&self, message: &str, cx: &mut AppContext) { + self.project.update(cx, |_, cx| { + cx.emit(Event::LanguageServerNotification(message.to_owned())) + }); + } + + fn http_client(&self) -> Arc { + self.http_client.clone() + } +} + fn split_operations( mut operations: Vec, ) -> impl Iterator> { diff --git a/crates/zed/src/languages/c.rs b/crates/zed/src/languages/c.rs index 7e4ddcef19..241b11b47c 100644 --- a/crates/zed/src/languages/c.rs +++ b/crates/zed/src/languages/c.rs @@ -4,12 +4,11 @@ use futures::StreamExt; pub use language::*; use smol::fs::{self, File}; use std::{any::Any, path::PathBuf, sync::Arc}; -use util::fs::remove_matching; -use util::github::latest_github_release; -use util::http::HttpClient; -use util::ResultExt; - -use util::github::GitHubLspBinaryVersion; +use util::{ + fs::remove_matching, + github::{latest_github_release, GitHubLspBinaryVersion}, + ResultExt, +}; pub struct CLspAdapter; @@ -21,9 +20,9 @@ impl super::LspAdapter for CLspAdapter { async fn fetch_latest_server_version( &self, - http: Arc, + delegate: &dyn LspAdapterDelegate, ) -> Result> { - let release = latest_github_release("clangd/clangd", false, http).await?; + let release = latest_github_release("clangd/clangd", false, delegate.http_client()).await?; let asset_name = format!("clangd-mac-{}.zip", release.name); let asset = release .assets @@ -40,8 +39,8 @@ impl super::LspAdapter for CLspAdapter { async fn fetch_server_binary( &self, version: Box, - http: Arc, container_dir: PathBuf, + delegate: &dyn LspAdapterDelegate, ) -> Result { let version = version.downcast::().unwrap(); let zip_path = container_dir.join(format!("clangd_{}.zip", version.name)); @@ -49,7 +48,8 @@ impl super::LspAdapter for CLspAdapter { let binary_path = version_dir.join("bin/clangd"); if fs::metadata(&binary_path).await.is_err() { - let mut response = http + let mut response = delegate + .http_client() .get(&version.url, Default::default(), true) .await .context("error downloading release")?; @@ -81,7 +81,11 @@ impl super::LspAdapter for CLspAdapter { }) } - async fn cached_server_binary(&self, container_dir: PathBuf) -> Option { + async fn cached_server_binary( + &self, + container_dir: PathBuf, + _: &dyn LspAdapterDelegate, + ) -> Option { (|| async move { let mut last_clangd_dir = None; let mut entries = fs::read_dir(&container_dir).await?; diff --git a/crates/zed/src/languages/elixir.rs b/crates/zed/src/languages/elixir.rs index 2939a0fa5f..b63dba3778 100644 --- a/crates/zed/src/languages/elixir.rs +++ b/crates/zed/src/languages/elixir.rs @@ -5,12 +5,11 @@ pub use language::*; use lsp::{CompletionItemKind, SymbolKind}; use smol::fs::{self, File}; use std::{any::Any, path::PathBuf, sync::Arc}; -use util::fs::remove_matching; -use util::github::latest_github_release; -use util::http::HttpClient; -use util::ResultExt; - -use util::github::GitHubLspBinaryVersion; +use util::{ + fs::remove_matching, + github::{latest_github_release, GitHubLspBinaryVersion}, + ResultExt, +}; pub struct ElixirLspAdapter; @@ -22,9 +21,10 @@ impl LspAdapter for ElixirLspAdapter { async fn fetch_latest_server_version( &self, - http: Arc, + delegate: &dyn LspAdapterDelegate, ) -> Result> { - let release = latest_github_release("elixir-lsp/elixir-ls", false, http).await?; + let release = + latest_github_release("elixir-lsp/elixir-ls", false, delegate.http_client()).await?; let asset_name = "elixir-ls.zip"; let asset = release .assets @@ -41,8 +41,8 @@ impl LspAdapter for ElixirLspAdapter { async fn fetch_server_binary( &self, version: Box, - http: Arc, container_dir: PathBuf, + delegate: &dyn LspAdapterDelegate, ) -> Result { let version = version.downcast::().unwrap(); let zip_path = container_dir.join(format!("elixir-ls_{}.zip", version.name)); @@ -50,7 +50,8 @@ impl LspAdapter for ElixirLspAdapter { let binary_path = version_dir.join("language_server.sh"); if fs::metadata(&binary_path).await.is_err() { - let mut response = http + let mut response = delegate + .http_client() .get(&version.url, Default::default(), true) .await .context("error downloading release")?; @@ -88,7 +89,11 @@ impl LspAdapter for ElixirLspAdapter { }) } - async fn cached_server_binary(&self, container_dir: PathBuf) -> Option { + async fn cached_server_binary( + &self, + container_dir: PathBuf, + _: &dyn LspAdapterDelegate, + ) -> Option { (|| async move { let mut last = None; let mut entries = fs::read_dir(&container_dir).await?; diff --git a/crates/zed/src/languages/go.rs b/crates/zed/src/languages/go.rs index ed24abb45c..c425e6931f 100644 --- a/crates/zed/src/languages/go.rs +++ b/crates/zed/src/languages/go.rs @@ -5,12 +5,15 @@ pub use language::*; use lazy_static::lazy_static; use regex::Regex; use smol::{fs, process}; -use std::ffi::{OsStr, OsString}; -use std::{any::Any, ops::Range, path::PathBuf, str, sync::Arc}; -use util::fs::remove_matching; -use util::github::latest_github_release; -use util::http::HttpClient; -use util::ResultExt; +use std::{ + any::Any, + ffi::{OsStr, OsString}, + ops::Range, + path::PathBuf, + str, + sync::Arc, +}; +use util::{fs::remove_matching, github::latest_github_release, ResultExt}; fn server_binary_arguments() -> Vec { vec!["-mode=stdio".into()] @@ -31,9 +34,9 @@ impl super::LspAdapter for GoLspAdapter { async fn fetch_latest_server_version( &self, - http: Arc, + delegate: &dyn LspAdapterDelegate, ) -> Result> { - let release = latest_github_release("golang/tools", false, http).await?; + let release = latest_github_release("golang/tools", false, delegate.http_client()).await?; let version: Option = release.name.strip_prefix("gopls/v").map(str::to_string); if version.is_none() { log::warn!( @@ -47,8 +50,8 @@ impl super::LspAdapter for GoLspAdapter { async fn fetch_server_binary( &self, version: Box, - _: Arc, container_dir: PathBuf, + delegate: &dyn LspAdapterDelegate, ) -> Result { let version = version.downcast::>().unwrap(); let this = *self; @@ -68,7 +71,10 @@ impl super::LspAdapter for GoLspAdapter { }); } } - } else if let Some(path) = this.cached_server_binary(container_dir.clone()).await { + } else if let Some(path) = this + .cached_server_binary(container_dir.clone(), delegate) + .await + { return Ok(path); } @@ -105,7 +111,11 @@ impl super::LspAdapter for GoLspAdapter { }) } - async fn cached_server_binary(&self, container_dir: PathBuf) -> Option { + async fn cached_server_binary( + &self, + container_dir: PathBuf, + _: &dyn LspAdapterDelegate, + ) -> Option { (|| async move { let mut last_binary_path = None; let mut entries = fs::read_dir(&container_dir).await?; diff --git a/crates/zed/src/languages/html.rs b/crates/zed/src/languages/html.rs index 68f780c3af..d038ef8071 100644 --- a/crates/zed/src/languages/html.rs +++ b/crates/zed/src/languages/html.rs @@ -1,14 +1,16 @@ use anyhow::{anyhow, Result}; use async_trait::async_trait; use futures::StreamExt; -use language::{LanguageServerBinary, LanguageServerName, LspAdapter}; +use language::{LanguageServerBinary, LanguageServerName, LspAdapter, LspAdapterDelegate}; use node_runtime::NodeRuntime; use serde_json::json; use smol::fs; -use std::ffi::OsString; -use std::path::Path; -use std::{any::Any, path::PathBuf, sync::Arc}; -use util::http::HttpClient; +use std::{ + any::Any, + ffi::OsString, + path::{Path, PathBuf}, + sync::Arc, +}; use util::ResultExt; fn server_binary_arguments(server_path: &Path) -> Vec { @@ -36,7 +38,7 @@ impl LspAdapter for HtmlLspAdapter { async fn fetch_latest_server_version( &self, - _: Arc, + _: &dyn LspAdapterDelegate, ) -> Result> { Ok(Box::new( self.node @@ -48,8 +50,8 @@ impl LspAdapter for HtmlLspAdapter { async fn fetch_server_binary( &self, version: Box, - _: Arc, container_dir: PathBuf, + _: &dyn LspAdapterDelegate, ) -> Result { let version = version.downcast::().unwrap(); let server_path = container_dir.join(Self::SERVER_PATH); @@ -69,7 +71,11 @@ impl LspAdapter for HtmlLspAdapter { }) } - async fn cached_server_binary(&self, container_dir: PathBuf) -> Option { + async fn cached_server_binary( + &self, + container_dir: PathBuf, + _: &dyn LspAdapterDelegate, + ) -> Option { (|| async move { let mut last_version_dir = None; let mut entries = fs::read_dir(&container_dir).await?; diff --git a/crates/zed/src/languages/json.rs b/crates/zed/src/languages/json.rs index e1f3da9e02..ced733fa1b 100644 --- a/crates/zed/src/languages/json.rs +++ b/crates/zed/src/languages/json.rs @@ -3,7 +3,9 @@ use async_trait::async_trait; use collections::HashMap; use futures::{future::BoxFuture, FutureExt, StreamExt}; use gpui::AppContext; -use language::{LanguageRegistry, LanguageServerBinary, LanguageServerName, LspAdapter}; +use language::{ + LanguageRegistry, LanguageServerBinary, LanguageServerName, LspAdapter, LspAdapterDelegate, +}; use node_runtime::NodeRuntime; use serde_json::json; use settings::{KeymapFile, SettingsJsonSchemaParams, SettingsStore}; @@ -16,7 +18,6 @@ use std::{ path::{Path, PathBuf}, sync::Arc, }; -use util::http::HttpClient; use util::{paths, ResultExt}; const SERVER_PATH: &'static str = @@ -45,7 +46,7 @@ impl LspAdapter for JsonLspAdapter { async fn fetch_latest_server_version( &self, - _: Arc, + _: &dyn LspAdapterDelegate, ) -> Result> { Ok(Box::new( self.node @@ -57,8 +58,8 @@ impl LspAdapter for JsonLspAdapter { async fn fetch_server_binary( &self, version: Box, - _: Arc, container_dir: PathBuf, + _: &dyn LspAdapterDelegate, ) -> Result { let version = version.downcast::().unwrap(); let server_path = container_dir.join(SERVER_PATH); @@ -78,7 +79,11 @@ impl LspAdapter for JsonLspAdapter { }) } - async fn cached_server_binary(&self, container_dir: PathBuf) -> Option { + async fn cached_server_binary( + &self, + container_dir: PathBuf, + _: &dyn LspAdapterDelegate, + ) -> Option { (|| async move { let mut last_version_dir = None; let mut entries = fs::read_dir(&container_dir).await?; diff --git a/crates/zed/src/languages/lua.rs b/crates/zed/src/languages/lua.rs index f204eb2555..7f63a1fae2 100644 --- a/crates/zed/src/languages/lua.rs +++ b/crates/zed/src/languages/lua.rs @@ -3,12 +3,14 @@ use async_compression::futures::bufread::GzipDecoder; use async_tar::Archive; use async_trait::async_trait; use futures::{io::BufReader, StreamExt}; -use language::{LanguageServerBinary, LanguageServerName}; +use language::{LanguageServerBinary, LanguageServerName, LspAdapterDelegate}; use smol::fs; -use std::{any::Any, env::consts, ffi::OsString, path::PathBuf, sync::Arc}; -use util::{async_iife, github::latest_github_release, http::HttpClient, ResultExt}; - -use util::github::GitHubLspBinaryVersion; +use std::{any::Any, env::consts, ffi::OsString, path::PathBuf}; +use util::{ + async_iife, + github::{latest_github_release, GitHubLspBinaryVersion}, + ResultExt, +}; #[derive(Copy, Clone)] pub struct LuaLspAdapter; @@ -28,9 +30,11 @@ impl super::LspAdapter for LuaLspAdapter { async fn fetch_latest_server_version( &self, - http: Arc, + delegate: &dyn LspAdapterDelegate, ) -> Result> { - let release = latest_github_release("LuaLS/lua-language-server", false, http).await?; + let release = + latest_github_release("LuaLS/lua-language-server", false, delegate.http_client()) + .await?; let version = release.name.clone(); let platform = match consts::ARCH { "x86_64" => "x64", @@ -53,15 +57,16 @@ impl super::LspAdapter for LuaLspAdapter { async fn fetch_server_binary( &self, version: Box, - http: Arc, container_dir: PathBuf, + delegate: &dyn LspAdapterDelegate, ) -> Result { let version = version.downcast::().unwrap(); let binary_path = container_dir.join("bin/lua-language-server"); if fs::metadata(&binary_path).await.is_err() { - let mut response = http + let mut response = delegate + .http_client() .get(&version.url, Default::default(), true) .await .map_err(|err| anyhow!("error downloading release: {}", err))?; @@ -81,7 +86,11 @@ impl super::LspAdapter for LuaLspAdapter { }) } - async fn cached_server_binary(&self, container_dir: PathBuf) -> Option { + async fn cached_server_binary( + &self, + container_dir: PathBuf, + _: &dyn LspAdapterDelegate, + ) -> Option { async_iife!({ let mut last_binary_path = None; let mut entries = fs::read_dir(&container_dir).await?; diff --git a/crates/zed/src/languages/python.rs b/crates/zed/src/languages/python.rs index 7aaddf5fe8..b56a0d6175 100644 --- a/crates/zed/src/languages/python.rs +++ b/crates/zed/src/languages/python.rs @@ -1,7 +1,7 @@ use anyhow::{anyhow, Result}; use async_trait::async_trait; use futures::StreamExt; -use language::{LanguageServerBinary, LanguageServerName, LspAdapter}; +use language::{LanguageServerBinary, LanguageServerName, LspAdapter, LspAdapterDelegate}; use node_runtime::NodeRuntime; use smol::fs; use std::{ @@ -10,7 +10,6 @@ use std::{ path::{Path, PathBuf}, sync::Arc, }; -use util::http::HttpClient; use util::ResultExt; fn server_binary_arguments(server_path: &Path) -> Vec { @@ -37,7 +36,7 @@ impl LspAdapter for PythonLspAdapter { async fn fetch_latest_server_version( &self, - _: Arc, + _: &dyn LspAdapterDelegate, ) -> Result> { Ok(Box::new(self.node.npm_package_latest_version("pyright").await?) as Box<_>) } @@ -45,8 +44,8 @@ impl LspAdapter for PythonLspAdapter { async fn fetch_server_binary( &self, version: Box, - _: Arc, container_dir: PathBuf, + _: &dyn LspAdapterDelegate, ) -> Result { let version = version.downcast::().unwrap(); let server_path = container_dir.join(Self::SERVER_PATH); @@ -63,7 +62,11 @@ impl LspAdapter for PythonLspAdapter { }) } - async fn cached_server_binary(&self, container_dir: PathBuf) -> Option { + async fn cached_server_binary( + &self, + container_dir: PathBuf, + _: &dyn LspAdapterDelegate, + ) -> Option { (|| async move { let mut last_version_dir = None; let mut entries = fs::read_dir(&container_dir).await?; diff --git a/crates/zed/src/languages/ruby.rs b/crates/zed/src/languages/ruby.rs index d387f815f0..18756e3b77 100644 --- a/crates/zed/src/languages/ruby.rs +++ b/crates/zed/src/languages/ruby.rs @@ -1,8 +1,7 @@ use anyhow::{anyhow, Result}; use async_trait::async_trait; -use language::{LanguageServerBinary, LanguageServerName, LspAdapter}; +use language::{LanguageServerBinary, LanguageServerName, LspAdapter, LspAdapterDelegate}; use std::{any::Any, path::PathBuf, sync::Arc}; -use util::http::HttpClient; pub struct RubyLanguageServer; @@ -14,7 +13,7 @@ impl LspAdapter for RubyLanguageServer { async fn fetch_latest_server_version( &self, - _: Arc, + _: &dyn LspAdapterDelegate, ) -> Result> { Ok(Box::new(())) } @@ -22,13 +21,17 @@ impl LspAdapter for RubyLanguageServer { async fn fetch_server_binary( &self, _version: Box, - _: Arc, _container_dir: PathBuf, + _: &dyn LspAdapterDelegate, ) -> Result { Err(anyhow!("solargraph must be installed manually")) } - async fn cached_server_binary(&self, _container_dir: PathBuf) -> Option { + async fn cached_server_binary( + &self, + _: PathBuf, + _: &dyn LspAdapterDelegate, + ) -> Option { Some(LanguageServerBinary { path: "solargraph".into(), arguments: vec!["stdio".into()], diff --git a/crates/zed/src/languages/rust.rs b/crates/zed/src/languages/rust.rs index 15700ec80a..e60846b70a 100644 --- a/crates/zed/src/languages/rust.rs +++ b/crates/zed/src/languages/rust.rs @@ -7,10 +7,11 @@ use lazy_static::lazy_static; use regex::Regex; use smol::fs::{self, File}; use std::{any::Any, borrow::Cow, env::consts, path::PathBuf, str, sync::Arc}; -use util::fs::remove_matching; -use util::github::{latest_github_release, GitHubLspBinaryVersion}; -use util::http::HttpClient; -use util::ResultExt; +use util::{ + fs::remove_matching, + github::{latest_github_release, GitHubLspBinaryVersion}, + ResultExt, +}; pub struct RustLspAdapter; @@ -22,9 +23,11 @@ impl LspAdapter for RustLspAdapter { async fn fetch_latest_server_version( &self, - http: Arc, + delegate: &dyn LspAdapterDelegate, ) -> Result> { - let release = latest_github_release("rust-analyzer/rust-analyzer", false, http).await?; + let release = + latest_github_release("rust-analyzer/rust-analyzer", false, delegate.http_client()) + .await?; let asset_name = format!("rust-analyzer-{}-apple-darwin.gz", consts::ARCH); let asset = release .assets @@ -40,14 +43,15 @@ impl LspAdapter for RustLspAdapter { async fn fetch_server_binary( &self, version: Box, - http: Arc, container_dir: PathBuf, + delegate: &dyn LspAdapterDelegate, ) -> Result { let version = version.downcast::().unwrap(); let destination_path = container_dir.join(format!("rust-analyzer-{}", version.name)); if fs::metadata(&destination_path).await.is_err() { - let mut response = http + let mut response = delegate + .http_client() .get(&version.url, Default::default(), true) .await .map_err(|err| anyhow!("error downloading release: {}", err))?; @@ -69,7 +73,11 @@ impl LspAdapter for RustLspAdapter { }) } - async fn cached_server_binary(&self, container_dir: PathBuf) -> Option { + async fn cached_server_binary( + &self, + container_dir: PathBuf, + _: &dyn LspAdapterDelegate, + ) -> Option { (|| async move { let mut last = None; let mut entries = fs::read_dir(&container_dir).await?; diff --git a/crates/zed/src/languages/typescript.rs b/crates/zed/src/languages/typescript.rs index 7d2d580857..662e73ea33 100644 --- a/crates/zed/src/languages/typescript.rs +++ b/crates/zed/src/languages/typescript.rs @@ -4,7 +4,7 @@ use async_tar::Archive; use async_trait::async_trait; use futures::{future::BoxFuture, FutureExt}; use gpui::AppContext; -use language::{LanguageServerBinary, LanguageServerName, LspAdapter}; +use language::{LanguageServerBinary, LanguageServerName, LspAdapter, LspAdapterDelegate}; use lsp::CodeActionKind; use node_runtime::NodeRuntime; use serde_json::{json, Value}; @@ -16,7 +16,7 @@ use std::{ path::{Path, PathBuf}, sync::Arc, }; -use util::{fs::remove_matching, github::latest_github_release, http::HttpClient}; +use util::{fs::remove_matching, github::latest_github_release}; use util::{github::GitHubLspBinaryVersion, ResultExt}; fn typescript_server_binary_arguments(server_path: &Path) -> Vec { @@ -58,7 +58,7 @@ impl LspAdapter for TypeScriptLspAdapter { async fn fetch_latest_server_version( &self, - _: Arc, + _: &dyn LspAdapterDelegate, ) -> Result> { Ok(Box::new(TypeScriptVersions { typescript_version: self.node.npm_package_latest_version("typescript").await?, @@ -72,8 +72,8 @@ impl LspAdapter for TypeScriptLspAdapter { async fn fetch_server_binary( &self, version: Box, - _: Arc, container_dir: PathBuf, + _: &dyn LspAdapterDelegate, ) -> Result { let version = version.downcast::().unwrap(); let server_path = container_dir.join(Self::NEW_SERVER_PATH); @@ -99,7 +99,11 @@ impl LspAdapter for TypeScriptLspAdapter { }) } - async fn cached_server_binary(&self, container_dir: PathBuf) -> Option { + async fn cached_server_binary( + &self, + container_dir: PathBuf, + _: &dyn LspAdapterDelegate, + ) -> Option { (|| async move { let old_server_path = container_dir.join(Self::OLD_SERVER_PATH); let new_server_path = container_dir.join(Self::NEW_SERVER_PATH); @@ -204,12 +208,13 @@ impl LspAdapter for EsLintLspAdapter { async fn fetch_latest_server_version( &self, - http: Arc, + delegate: &dyn LspAdapterDelegate, ) -> Result> { // At the time of writing the latest vscode-eslint release was released in 2020 and requires // special custom LSP protocol extensions be handled to fully initialize. Download the latest // prerelease instead to sidestep this issue - let release = latest_github_release("microsoft/vscode-eslint", true, http).await?; + let release = + latest_github_release("microsoft/vscode-eslint", true, delegate.http_client()).await?; Ok(Box::new(GitHubLspBinaryVersion { name: release.name, url: release.tarball_url, @@ -219,8 +224,8 @@ impl LspAdapter for EsLintLspAdapter { async fn fetch_server_binary( &self, version: Box, - http: Arc, container_dir: PathBuf, + delegate: &dyn LspAdapterDelegate, ) -> Result { let version = version.downcast::().unwrap(); let destination_path = container_dir.join(format!("vscode-eslint-{}", version.name)); @@ -229,7 +234,8 @@ impl LspAdapter for EsLintLspAdapter { if fs::metadata(&server_path).await.is_err() { remove_matching(&container_dir, |entry| entry != destination_path).await; - let mut response = http + let mut response = delegate + .http_client() .get(&version.url, Default::default(), true) .await .map_err(|err| anyhow!("error downloading release: {}", err))?; @@ -257,7 +263,11 @@ impl LspAdapter for EsLintLspAdapter { }) } - async fn cached_server_binary(&self, container_dir: PathBuf) -> Option { + async fn cached_server_binary( + &self, + container_dir: PathBuf, + _: &dyn LspAdapterDelegate, + ) -> Option { (|| async move { // This is unfortunate but we don't know what the version is to build a path directly let mut dir = fs::read_dir(&container_dir).await?; diff --git a/crates/zed/src/languages/yaml.rs b/crates/zed/src/languages/yaml.rs index 7f87a7caed..99c226bba7 100644 --- a/crates/zed/src/languages/yaml.rs +++ b/crates/zed/src/languages/yaml.rs @@ -4,6 +4,7 @@ use futures::{future::BoxFuture, FutureExt, StreamExt}; use gpui::AppContext; use language::{ language_settings::all_language_settings, LanguageServerBinary, LanguageServerName, LspAdapter, + LspAdapterDelegate, }; use node_runtime::NodeRuntime; use serde_json::Value; @@ -15,7 +16,6 @@ use std::{ path::{Path, PathBuf}, sync::Arc, }; -use util::http::HttpClient; use util::ResultExt; fn server_binary_arguments(server_path: &Path) -> Vec { @@ -42,7 +42,7 @@ impl LspAdapter for YamlLspAdapter { async fn fetch_latest_server_version( &self, - _: Arc, + _: &dyn LspAdapterDelegate, ) -> Result> { Ok(Box::new( self.node @@ -54,8 +54,8 @@ impl LspAdapter for YamlLspAdapter { async fn fetch_server_binary( &self, version: Box, - _: Arc, container_dir: PathBuf, + _: &dyn LspAdapterDelegate, ) -> Result { let version = version.downcast::().unwrap(); let server_path = container_dir.join(Self::SERVER_PATH); @@ -72,7 +72,11 @@ impl LspAdapter for YamlLspAdapter { }) } - async fn cached_server_binary(&self, container_dir: PathBuf) -> Option { + async fn cached_server_binary( + &self, + container_dir: PathBuf, + _: &dyn LspAdapterDelegate, + ) -> Option { (|| async move { let mut last_version_dir = None; let mut entries = fs::read_dir(&container_dir).await?; From 57c2d85c66fc0a3f2a5eae5c86db21a67e9aa876 Mon Sep 17 00:00:00 2001 From: Max Brunsfeld Date: Mon, 19 Jun 2023 16:13:06 -0700 Subject: [PATCH 18/56] Show a notification that gopls can't be installed without go --- crates/language/src/language.rs | 22 +++++++++++++++++++++- crates/project/src/project.rs | 7 +++---- crates/workspace/src/workspace.rs | 4 ++++ crates/zed/src/languages/go.rs | 19 +++++++++++++++++++ 4 files changed, 47 insertions(+), 5 deletions(-) diff --git a/crates/language/src/language.rs b/crates/language/src/language.rs index c8554074cd..e4552864dd 100644 --- a/crates/language/src/language.rs +++ b/crates/language/src/language.rs @@ -130,6 +130,14 @@ impl CachedLspAdapter { self.adapter.fetch_latest_server_version(delegate).await } + pub fn will_fetch_server_binary( + &self, + delegate: &Arc, + cx: &mut AsyncAppContext, + ) -> Option>> { + self.adapter.will_fetch_server_binary(delegate, cx) + } + pub async fn fetch_server_binary( &self, version: Box, @@ -204,6 +212,14 @@ pub trait LspAdapter: 'static + Send + Sync { delegate: &dyn LspAdapterDelegate, ) -> Result>; + fn will_fetch_server_binary( + &self, + _: &Arc, + _: &mut AsyncAppContext, + ) -> Option>> { + None + } + async fn fetch_server_binary( &self, version: Box, @@ -971,7 +987,7 @@ async fn get_binary( delegate: Arc, download_dir: Arc, statuses: async_broadcast::Sender<(Arc, LanguageServerBinaryStatus)>, - _cx: AsyncAppContext, + mut cx: AsyncAppContext, ) -> Result { let container_dir = download_dir.join(adapter.name.0.as_ref()); if !container_dir.exists() { @@ -980,6 +996,10 @@ async fn get_binary( .context("failed to create container directory")?; } + if let Some(task) = adapter.will_fetch_server_binary(&delegate, &mut cx) { + task.await?; + } + let binary = fetch_latest_binary( adapter.clone(), language.clone(), diff --git a/crates/project/src/project.rs b/crates/project/src/project.rs index 6d823f0107..27d424879f 100644 --- a/crates/project/src/project.rs +++ b/crates/project/src/project.rs @@ -252,7 +252,7 @@ pub enum Event { LanguageServerAdded(LanguageServerId), LanguageServerRemoved(LanguageServerId), LanguageServerLog(LanguageServerId, String), - LanguageServerNotification(String), + Notification(String), ActiveEntryChanged(Option), WorktreeAdded, WorktreeRemoved(WorktreeId), @@ -7205,9 +7205,8 @@ impl ProjectLspAdapterDelegate { impl LspAdapterDelegate for ProjectLspAdapterDelegate { fn show_notification(&self, message: &str, cx: &mut AppContext) { - self.project.update(cx, |_, cx| { - cx.emit(Event::LanguageServerNotification(message.to_owned())) - }); + self.project + .update(cx, |_, cx| cx.emit(Event::Notification(message.to_owned()))); } fn http_client(&self) -> Arc { diff --git a/crates/workspace/src/workspace.rs b/crates/workspace/src/workspace.rs index f813635941..43ca41ab1d 100644 --- a/crates/workspace/src/workspace.rs +++ b/crates/workspace/src/workspace.rs @@ -553,6 +553,10 @@ impl Workspace { } } + project::Event::Notification(message) => this.show_notification(0, cx, |cx| { + cx.add_view(|_| MessageNotification::new(message.clone())) + }), + _ => {} } cx.notify() diff --git a/crates/zed/src/languages/go.rs b/crates/zed/src/languages/go.rs index c425e6931f..fe518ed4ee 100644 --- a/crates/zed/src/languages/go.rs +++ b/crates/zed/src/languages/go.rs @@ -1,6 +1,7 @@ use anyhow::{anyhow, Result}; use async_trait::async_trait; use futures::StreamExt; +use gpui::{AsyncAppContext, Task}; pub use language::*; use lazy_static::lazy_static; use regex::Regex; @@ -47,6 +48,24 @@ impl super::LspAdapter for GoLspAdapter { Ok(Box::new(version) as Box<_>) } + fn will_fetch_server_binary( + &self, + delegate: &Arc, + cx: &mut AsyncAppContext, + ) -> Option>> { + let delegate = delegate.clone(); + Some(cx.spawn(|mut cx| async move { + let install_output = process::Command::new("go").args(["version"]).output().await; + if install_output.is_err() { + cx.update(|cx| { + delegate + .show_notification("go is not installed. gopls will not be available.", cx); + }) + } + Ok(()) + })) + } + async fn fetch_server_binary( &self, version: Box, From 1215de0c4227f97fadf3c5dbc0a0b7cdad727d43 Mon Sep 17 00:00:00 2001 From: Max Brunsfeld Date: Mon, 19 Jun 2023 18:05:30 -0700 Subject: [PATCH 19/56] Show a notification when unable to start elixir-ls --- crates/language/src/language.rs | 32 ++++++++++++++++++----- crates/zed/src/languages/elixir.rs | 41 +++++++++++++++++++++++++++++- crates/zed/src/languages/go.rs | 25 +++++++++++++----- 3 files changed, 85 insertions(+), 13 deletions(-) diff --git a/crates/language/src/language.rs b/crates/language/src/language.rs index e4552864dd..5a4d604ce3 100644 --- a/crates/language/src/language.rs +++ b/crates/language/src/language.rs @@ -130,12 +130,20 @@ impl CachedLspAdapter { self.adapter.fetch_latest_server_version(delegate).await } - pub fn will_fetch_server_binary( + pub fn will_fetch_server( &self, delegate: &Arc, cx: &mut AsyncAppContext, ) -> Option>> { - self.adapter.will_fetch_server_binary(delegate, cx) + self.adapter.will_fetch_server(delegate, cx) + } + + pub fn will_start_server( + &self, + delegate: &Arc, + cx: &mut AsyncAppContext, + ) -> Option>> { + self.adapter.will_start_server(delegate, cx) } pub async fn fetch_server_binary( @@ -212,7 +220,15 @@ pub trait LspAdapter: 'static + Send + Sync { delegate: &dyn LspAdapterDelegate, ) -> Result>; - fn will_fetch_server_binary( + fn will_fetch_server( + &self, + _: &Arc, + _: &mut AsyncAppContext, + ) -> Option>> { + None + } + + fn will_start_server( &self, _: &Arc, _: &mut AsyncAppContext, @@ -891,7 +907,7 @@ impl LanguageRegistry { let lsp_binary_statuses = self.lsp_binary_statuses_tx.clone(); let login_shell_env_loaded = self.login_shell_env_loaded.clone(); - let task = cx.spawn(|cx| async move { + let task = cx.spawn(|mut cx| async move { login_shell_env_loaded.await; let entry = this @@ -903,7 +919,7 @@ impl LanguageRegistry { get_binary( adapter.clone(), language.clone(), - delegate, + delegate.clone(), download_dir, lsp_binary_statuses, cx, @@ -915,6 +931,10 @@ impl LanguageRegistry { .clone(); let binary = entry.clone().map_err(|e| anyhow!(e)).await?; + if let Some(task) = adapter.will_start_server(&delegate, &mut cx) { + task.await?; + } + let server = lsp::LanguageServer::new( server_id, &binary.path, @@ -996,7 +1016,7 @@ async fn get_binary( .context("failed to create container directory")?; } - if let Some(task) = adapter.will_fetch_server_binary(&delegate, &mut cx) { + if let Some(task) = adapter.will_fetch_server(&delegate, &mut cx) { task.await?; } diff --git a/crates/zed/src/languages/elixir.rs b/crates/zed/src/languages/elixir.rs index b63dba3778..22aaedc069 100644 --- a/crates/zed/src/languages/elixir.rs +++ b/crates/zed/src/languages/elixir.rs @@ -1,10 +1,18 @@ use anyhow::{anyhow, Context, Result}; use async_trait::async_trait; use futures::StreamExt; +use gpui::{AsyncAppContext, Task}; pub use language::*; use lsp::{CompletionItemKind, SymbolKind}; use smol::fs::{self, File}; -use std::{any::Any, path::PathBuf, sync::Arc}; +use std::{ + any::Any, + path::PathBuf, + sync::{ + atomic::{AtomicBool, Ordering::SeqCst}, + Arc, + }, +}; use util::{ fs::remove_matching, github::{latest_github_release, GitHubLspBinaryVersion}, @@ -19,6 +27,37 @@ impl LspAdapter for ElixirLspAdapter { LanguageServerName("elixir-ls".into()) } + fn will_start_server( + &self, + delegate: &Arc, + cx: &mut AsyncAppContext, + ) -> Option>> { + static DID_SHOW_NOTIFICATION: AtomicBool = AtomicBool::new(false); + + const NOTIFICATION_MESSAGE: &str = "Could not run the elixir language server, `elixir-ls`, because `elixir` was not found."; + + let delegate = delegate.clone(); + Some(cx.spawn(|mut cx| async move { + let elixir_output = smol::process::Command::new("elixir") + .args(["--version"]) + .output() + .await; + if elixir_output.is_err() { + if DID_SHOW_NOTIFICATION + .compare_exchange(false, true, SeqCst, SeqCst) + .is_ok() + { + cx.update(|cx| { + delegate.show_notification(NOTIFICATION_MESSAGE, cx); + }) + } + return Err(anyhow!("cannot run elixir-ls")); + } + + Ok(()) + })) + } + async fn fetch_latest_server_version( &self, delegate: &dyn LspAdapterDelegate, diff --git a/crates/zed/src/languages/go.rs b/crates/zed/src/languages/go.rs index fe518ed4ee..34364d0b7f 100644 --- a/crates/zed/src/languages/go.rs +++ b/crates/zed/src/languages/go.rs @@ -12,7 +12,10 @@ use std::{ ops::Range, path::PathBuf, str, - sync::Arc, + sync::{ + atomic::{AtomicBool, Ordering::SeqCst}, + Arc, + }, }; use util::{fs::remove_matching, github::latest_github_release, ResultExt}; @@ -48,19 +51,29 @@ impl super::LspAdapter for GoLspAdapter { Ok(Box::new(version) as Box<_>) } - fn will_fetch_server_binary( + fn will_fetch_server( &self, delegate: &Arc, cx: &mut AsyncAppContext, ) -> Option>> { + static DID_SHOW_NOTIFICATION: AtomicBool = AtomicBool::new(false); + + const NOTIFICATION_MESSAGE: &str = + "Could not install the Go language server `gopls`, because `go` was not found."; + let delegate = delegate.clone(); Some(cx.spawn(|mut cx| async move { let install_output = process::Command::new("go").args(["version"]).output().await; if install_output.is_err() { - cx.update(|cx| { - delegate - .show_notification("go is not installed. gopls will not be available.", cx); - }) + if DID_SHOW_NOTIFICATION + .compare_exchange(false, true, SeqCst, SeqCst) + .is_ok() + { + cx.update(|cx| { + delegate.show_notification(NOTIFICATION_MESSAGE, cx); + }) + } + return Err(anyhow!("cannot install gopls")); } Ok(()) })) From 8c298a9da59b0ea246a7ea10c6f30d0b9009ec8e Mon Sep 17 00:00:00 2001 From: Nathan Sobo Date: Sun, 18 Jun 2023 18:37:21 -0600 Subject: [PATCH 20/56] Rename SumTree::push_tree to ::append --- crates/editor/src/display_map/block_map.rs | 4 +-- crates/editor/src/display_map/fold_map.rs | 12 ++++----- crates/editor/src/display_map/wrap_map.rs | 8 +++--- crates/editor/src/multi_buffer.rs | 10 ++++---- crates/gpui/src/elements/list.rs | 10 ++++---- crates/language/src/syntax_map.rs | 8 +++--- crates/project/src/worktree.rs | 4 +-- crates/rope/src/rope.rs | 2 +- crates/sum_tree/src/cursor.rs | 4 +-- crates/sum_tree/src/sum_tree.rs | 22 ++++++++-------- crates/sum_tree/src/tree_map.rs | 6 ++--- crates/text/src/text.rs | 30 +++++++++++----------- 12 files changed, 60 insertions(+), 60 deletions(-) diff --git a/crates/editor/src/display_map/block_map.rs b/crates/editor/src/display_map/block_map.rs index 05ff9886f1..0cf5bacc65 100644 --- a/crates/editor/src/display_map/block_map.rs +++ b/crates/editor/src/display_map/block_map.rs @@ -243,7 +243,7 @@ impl BlockMap { // Preserve any old transforms that precede this edit. let old_start = WrapRow(edit.old.start); let new_start = WrapRow(edit.new.start); - new_transforms.push_tree(cursor.slice(&old_start, Bias::Left, &()), &()); + new_transforms.append(cursor.slice(&old_start, Bias::Left, &()), &()); if let Some(transform) = cursor.item() { if transform.is_isomorphic() && old_start == cursor.end(&()) { new_transforms.push(transform.clone(), &()); @@ -425,7 +425,7 @@ impl BlockMap { push_isomorphic(&mut new_transforms, extent_after_edit); } - new_transforms.push_tree(cursor.suffix(&()), &()); + new_transforms.append(cursor.suffix(&()), &()); debug_assert_eq!( new_transforms.summary().input_rows, wrap_snapshot.max_point().row() + 1 diff --git a/crates/editor/src/display_map/fold_map.rs b/crates/editor/src/display_map/fold_map.rs index 6ef1ebce1d..36cfeba4a1 100644 --- a/crates/editor/src/display_map/fold_map.rs +++ b/crates/editor/src/display_map/fold_map.rs @@ -115,10 +115,10 @@ impl<'a> FoldMapWriter<'a> { let mut new_tree = SumTree::new(); let mut cursor = self.0.folds.cursor::(); for fold in folds { - new_tree.push_tree(cursor.slice(&fold, Bias::Right, &buffer), &buffer); + new_tree.append(cursor.slice(&fold, Bias::Right, &buffer), &buffer); new_tree.push(fold, &buffer); } - new_tree.push_tree(cursor.suffix(&buffer), &buffer); + new_tree.append(cursor.suffix(&buffer), &buffer); new_tree }; @@ -165,10 +165,10 @@ impl<'a> FoldMapWriter<'a> { let mut cursor = self.0.folds.cursor::(); let mut folds = SumTree::new(); for fold_ix in fold_ixs_to_delete { - folds.push_tree(cursor.slice(&fold_ix, Bias::Right, &buffer), &buffer); + folds.append(cursor.slice(&fold_ix, Bias::Right, &buffer), &buffer); cursor.next(&buffer); } - folds.push_tree(cursor.suffix(&buffer), &buffer); + folds.append(cursor.suffix(&buffer), &buffer); folds }; @@ -302,7 +302,7 @@ impl FoldMap { cursor.seek(&0, Bias::Right, &()); while let Some(mut edit) = buffer_edits_iter.next() { - new_transforms.push_tree(cursor.slice(&edit.old.start, Bias::Left, &()), &()); + new_transforms.append(cursor.slice(&edit.old.start, Bias::Left, &()), &()); edit.new.start -= edit.old.start - cursor.start(); edit.old.start = *cursor.start(); @@ -412,7 +412,7 @@ impl FoldMap { } } - new_transforms.push_tree(cursor.suffix(&()), &()); + new_transforms.append(cursor.suffix(&()), &()); if new_transforms.is_empty() { let text_summary = new_buffer.text_summary(); new_transforms.push( diff --git a/crates/editor/src/display_map/wrap_map.rs b/crates/editor/src/display_map/wrap_map.rs index 478eaf4c7e..dad264d57d 100644 --- a/crates/editor/src/display_map/wrap_map.rs +++ b/crates/editor/src/display_map/wrap_map.rs @@ -353,7 +353,7 @@ impl WrapSnapshot { } old_cursor.next(&()); - new_transforms.push_tree( + new_transforms.append( old_cursor.slice(&next_edit.old.start, Bias::Right, &()), &(), ); @@ -366,7 +366,7 @@ impl WrapSnapshot { new_transforms.push_or_extend(Transform::isomorphic(summary)); } old_cursor.next(&()); - new_transforms.push_tree(old_cursor.suffix(&()), &()); + new_transforms.append(old_cursor.suffix(&()), &()); } } } @@ -500,7 +500,7 @@ impl WrapSnapshot { new_transforms.push_or_extend(Transform::isomorphic(summary)); } old_cursor.next(&()); - new_transforms.push_tree( + new_transforms.append( old_cursor.slice( &TabPoint::new(next_edit.old_rows.start, 0), Bias::Right, @@ -517,7 +517,7 @@ impl WrapSnapshot { new_transforms.push_or_extend(Transform::isomorphic(summary)); } old_cursor.next(&()); - new_transforms.push_tree(old_cursor.suffix(&()), &()); + new_transforms.append(old_cursor.suffix(&()), &()); } } } diff --git a/crates/editor/src/multi_buffer.rs b/crates/editor/src/multi_buffer.rs index 955902da12..31af03f768 100644 --- a/crates/editor/src/multi_buffer.rs +++ b/crates/editor/src/multi_buffer.rs @@ -1010,7 +1010,7 @@ impl MultiBuffer { let suffix = cursor.suffix(&()); let changed_trailing_excerpt = suffix.is_empty(); - new_excerpts.push_tree(suffix, &()); + new_excerpts.append(suffix, &()); drop(cursor); snapshot.excerpts = new_excerpts; snapshot.excerpt_ids = new_excerpt_ids; @@ -1193,7 +1193,7 @@ impl MultiBuffer { while let Some(excerpt_id) = excerpt_ids.next() { // Seek to the next excerpt to remove, preserving any preceding excerpts. let locator = snapshot.excerpt_locator_for_id(excerpt_id); - new_excerpts.push_tree(cursor.slice(&Some(locator), Bias::Left, &()), &()); + new_excerpts.append(cursor.slice(&Some(locator), Bias::Left, &()), &()); if let Some(mut excerpt) = cursor.item() { if excerpt.id != excerpt_id { @@ -1245,7 +1245,7 @@ impl MultiBuffer { } let suffix = cursor.suffix(&()); let changed_trailing_excerpt = suffix.is_empty(); - new_excerpts.push_tree(suffix, &()); + new_excerpts.append(suffix, &()); drop(cursor); snapshot.excerpts = new_excerpts; @@ -1509,7 +1509,7 @@ impl MultiBuffer { let mut cursor = snapshot.excerpts.cursor::<(Option<&Locator>, usize)>(); for (locator, buffer, buffer_edited) in excerpts_to_edit { - new_excerpts.push_tree(cursor.slice(&Some(locator), Bias::Left, &()), &()); + new_excerpts.append(cursor.slice(&Some(locator), Bias::Left, &()), &()); let old_excerpt = cursor.item().unwrap(); let buffer = buffer.read(cx); let buffer_id = buffer.remote_id(); @@ -1549,7 +1549,7 @@ impl MultiBuffer { new_excerpts.push(new_excerpt, &()); cursor.next(&()); } - new_excerpts.push_tree(cursor.suffix(&()), &()); + new_excerpts.append(cursor.suffix(&()), &()); drop(cursor); snapshot.excerpts = new_excerpts; diff --git a/crates/gpui/src/elements/list.rs b/crates/gpui/src/elements/list.rs index 1cf8cc986f..4c6298d8f5 100644 --- a/crates/gpui/src/elements/list.rs +++ b/crates/gpui/src/elements/list.rs @@ -211,7 +211,7 @@ impl Element for List { let mut cursor = old_items.cursor::(); if state.rendered_range.start < new_rendered_range.start { - new_items.push_tree( + new_items.append( cursor.slice(&Count(state.rendered_range.start), Bias::Right, &()), &(), ); @@ -221,7 +221,7 @@ impl Element for List { cursor.next(&()); } } - new_items.push_tree( + new_items.append( cursor.slice(&Count(new_rendered_range.start), Bias::Right, &()), &(), ); @@ -230,7 +230,7 @@ impl Element for List { cursor.seek(&Count(new_rendered_range.end), Bias::Right, &()); if new_rendered_range.end < state.rendered_range.start { - new_items.push_tree( + new_items.append( cursor.slice(&Count(state.rendered_range.start), Bias::Right, &()), &(), ); @@ -240,7 +240,7 @@ impl Element for List { cursor.next(&()); } - new_items.push_tree(cursor.suffix(&()), &()); + new_items.append(cursor.suffix(&()), &()); state.items = new_items; state.rendered_range = new_rendered_range; @@ -413,7 +413,7 @@ impl ListState { old_heights.seek_forward(&Count(old_range.end), Bias::Right, &()); new_heights.extend((0..count).map(|_| ListItem::Unrendered), &()); - new_heights.push_tree(old_heights.suffix(&()), &()); + new_heights.append(old_heights.suffix(&()), &()); drop(old_heights); state.items = new_heights; } diff --git a/crates/language/src/syntax_map.rs b/crates/language/src/syntax_map.rs index 7e5664c1bd..c589e37d8a 100644 --- a/crates/language/src/syntax_map.rs +++ b/crates/language/src/syntax_map.rs @@ -288,7 +288,7 @@ impl SyntaxSnapshot { }; if target.cmp(&cursor.start(), text).is_gt() { let slice = cursor.slice(&target, Bias::Left, text); - layers.push_tree(slice, text); + layers.append(slice, text); } } // If this layer follows all of the edits, then preserve it and any @@ -303,7 +303,7 @@ impl SyntaxSnapshot { Bias::Left, text, ); - layers.push_tree(slice, text); + layers.append(slice, text); continue; }; @@ -369,7 +369,7 @@ impl SyntaxSnapshot { cursor.next(text); } - layers.push_tree(cursor.suffix(&text), &text); + layers.append(cursor.suffix(&text), &text); drop(cursor); self.layers = layers; } @@ -478,7 +478,7 @@ impl SyntaxSnapshot { if bounded_position.cmp(&cursor.start(), &text).is_gt() { let slice = cursor.slice(&bounded_position, Bias::Left, text); if !slice.is_empty() { - layers.push_tree(slice, &text); + layers.append(slice, &text); if changed_regions.prune(cursor.end(text), text) { done = false; } diff --git a/crates/project/src/worktree.rs b/crates/project/src/worktree.rs index 561da2c292..2b0ba3d521 100644 --- a/crates/project/src/worktree.rs +++ b/crates/project/src/worktree.rs @@ -1470,7 +1470,7 @@ impl Snapshot { break; } } - new_entries_by_path.push_tree(cursor.suffix(&()), &()); + new_entries_by_path.append(cursor.suffix(&()), &()); new_entries_by_path }; @@ -2259,7 +2259,7 @@ impl BackgroundScannerState { let mut cursor = self.snapshot.entries_by_path.cursor::(); new_entries = cursor.slice(&TraversalTarget::Path(path), Bias::Left, &()); removed_entries = cursor.slice(&TraversalTarget::PathSuccessor(path), Bias::Left, &()); - new_entries.push_tree(cursor.suffix(&()), &()); + new_entries.append(cursor.suffix(&()), &()); } self.snapshot.entries_by_path = new_entries; diff --git a/crates/rope/src/rope.rs b/crates/rope/src/rope.rs index 6b6f364fdb..0b76dba319 100644 --- a/crates/rope/src/rope.rs +++ b/crates/rope/src/rope.rs @@ -53,7 +53,7 @@ impl Rope { } } - self.chunks.push_tree(chunks.suffix(&()), &()); + self.chunks.append(chunks.suffix(&()), &()); self.check_invariants(); } diff --git a/crates/sum_tree/src/cursor.rs b/crates/sum_tree/src/cursor.rs index 88412f6059..b78484e6de 100644 --- a/crates/sum_tree/src/cursor.rs +++ b/crates/sum_tree/src/cursor.rs @@ -669,7 +669,7 @@ impl<'a, T: Item> SeekAggregate<'a, T> for () { impl<'a, T: Item> SeekAggregate<'a, T> for SliceSeekAggregate { fn begin_leaf(&mut self) {} fn end_leaf(&mut self, cx: &::Context) { - self.tree.push_tree( + self.tree.append( SumTree(Arc::new(Node::Leaf { summary: mem::take(&mut self.leaf_summary), items: mem::take(&mut self.leaf_items), @@ -689,7 +689,7 @@ impl<'a, T: Item> SeekAggregate<'a, T> for SliceSeekAggregate { _: &T::Summary, cx: &::Context, ) { - self.tree.push_tree(tree.clone(), cx); + self.tree.append(tree.clone(), cx); } } diff --git a/crates/sum_tree/src/sum_tree.rs b/crates/sum_tree/src/sum_tree.rs index 6c6150aa3a..fa467886f0 100644 --- a/crates/sum_tree/src/sum_tree.rs +++ b/crates/sum_tree/src/sum_tree.rs @@ -268,7 +268,7 @@ impl SumTree { for item in iter { if leaf.is_some() && leaf.as_ref().unwrap().items().len() == 2 * TREE_BASE { - self.push_tree(SumTree(Arc::new(leaf.take().unwrap())), cx); + self.append(SumTree(Arc::new(leaf.take().unwrap())), cx); } if leaf.is_none() { @@ -295,13 +295,13 @@ impl SumTree { } if leaf.is_some() { - self.push_tree(SumTree(Arc::new(leaf.take().unwrap())), cx); + self.append(SumTree(Arc::new(leaf.take().unwrap())), cx); } } pub fn push(&mut self, item: T, cx: &::Context) { let summary = item.summary(); - self.push_tree( + self.append( SumTree(Arc::new(Node::Leaf { summary: summary.clone(), items: ArrayVec::from_iter(Some(item)), @@ -311,11 +311,11 @@ impl SumTree { ); } - pub fn push_tree(&mut self, other: Self, cx: &::Context) { + pub fn append(&mut self, other: Self, cx: &::Context) { if !other.0.is_leaf() || !other.0.items().is_empty() { if self.0.height() < other.0.height() { for tree in other.0.child_trees() { - self.push_tree(tree.clone(), cx); + self.append(tree.clone(), cx); } } else if let Some(split_tree) = self.push_tree_recursive(other, cx) { *self = Self::from_child_trees(self.clone(), split_tree, cx); @@ -512,7 +512,7 @@ impl SumTree { } } new_tree.push(item, cx); - new_tree.push_tree(cursor.suffix(cx), cx); + new_tree.append(cursor.suffix(cx), cx); new_tree }; replaced @@ -529,7 +529,7 @@ impl SumTree { cursor.next(cx); } } - new_tree.push_tree(cursor.suffix(cx), cx); + new_tree.append(cursor.suffix(cx), cx); new_tree }; removed @@ -563,7 +563,7 @@ impl SumTree { { new_tree.extend(buffered_items.drain(..), cx); let slice = cursor.slice(&new_key, Bias::Left, cx); - new_tree.push_tree(slice, cx); + new_tree.append(slice, cx); old_item = cursor.item(); } @@ -583,7 +583,7 @@ impl SumTree { } new_tree.extend(buffered_items, cx); - new_tree.push_tree(cursor.suffix(cx), cx); + new_tree.append(cursor.suffix(cx), cx); new_tree }; @@ -719,7 +719,7 @@ mod tests { let mut tree2 = SumTree::new(); tree2.extend(50..100, &()); - tree1.push_tree(tree2, &()); + tree1.append(tree2, &()); assert_eq!( tree1.items(&()), (0..20).chain(50..100).collect::>() @@ -766,7 +766,7 @@ mod tests { let mut new_tree = cursor.slice(&Count(splice_start), Bias::Right, &()); new_tree.extend(new_items, &()); cursor.seek(&Count(splice_end), Bias::Right, &()); - new_tree.push_tree(cursor.slice(&tree_end, Bias::Right, &()), &()); + new_tree.append(cursor.slice(&tree_end, Bias::Right, &()), &()); new_tree }; diff --git a/crates/sum_tree/src/tree_map.rs b/crates/sum_tree/src/tree_map.rs index ea69fb0dca..4bb98d2ac8 100644 --- a/crates/sum_tree/src/tree_map.rs +++ b/crates/sum_tree/src/tree_map.rs @@ -67,7 +67,7 @@ impl TreeMap { removed = Some(cursor.item().unwrap().value.clone()); cursor.next(&()); } - new_tree.push_tree(cursor.suffix(&()), &()); + new_tree.append(cursor.suffix(&()), &()); drop(cursor); self.0 = new_tree; removed @@ -79,7 +79,7 @@ impl TreeMap { let mut cursor = self.0.cursor::>(); let mut new_tree = cursor.slice(&start, Bias::Left, &()); cursor.seek(&end, Bias::Left, &()); - new_tree.push_tree(cursor.suffix(&()), &()); + new_tree.append(cursor.suffix(&()), &()); drop(cursor); self.0 = new_tree; } @@ -117,7 +117,7 @@ impl TreeMap { new_tree.push(updated, &()); cursor.next(&()); } - new_tree.push_tree(cursor.suffix(&()), &()); + new_tree.append(cursor.suffix(&()), &()); drop(cursor); self.0 = new_tree; result diff --git a/crates/text/src/text.rs b/crates/text/src/text.rs index 2693add8ed..28c5125de2 100644 --- a/crates/text/src/text.rs +++ b/crates/text/src/text.rs @@ -600,7 +600,7 @@ impl Buffer { let mut old_fragments = self.fragments.cursor::(); let mut new_fragments = old_fragments.slice(&edits.peek().unwrap().0.start, Bias::Right, &None); - new_ropes.push_tree(new_fragments.summary().text); + new_ropes.append(new_fragments.summary().text); let mut fragment_start = old_fragments.start().visible; for (range, new_text) in edits { @@ -625,8 +625,8 @@ impl Buffer { } let slice = old_fragments.slice(&range.start, Bias::Right, &None); - new_ropes.push_tree(slice.summary().text); - new_fragments.push_tree(slice, &None); + new_ropes.append(slice.summary().text); + new_fragments.append(slice, &None); fragment_start = old_fragments.start().visible; } @@ -728,8 +728,8 @@ impl Buffer { } let suffix = old_fragments.suffix(&None); - new_ropes.push_tree(suffix.summary().text); - new_fragments.push_tree(suffix, &None); + new_ropes.append(suffix.summary().text); + new_fragments.append(suffix, &None); let (visible_text, deleted_text) = new_ropes.finish(); drop(old_fragments); @@ -828,7 +828,7 @@ impl Buffer { Bias::Left, &cx, ); - new_ropes.push_tree(new_fragments.summary().text); + new_ropes.append(new_fragments.summary().text); let mut fragment_start = old_fragments.start().0.full_offset(); for (range, new_text) in edits { @@ -854,8 +854,8 @@ impl Buffer { let slice = old_fragments.slice(&VersionedFullOffset::Offset(range.start), Bias::Left, &cx); - new_ropes.push_tree(slice.summary().text); - new_fragments.push_tree(slice, &None); + new_ropes.append(slice.summary().text); + new_fragments.append(slice, &None); fragment_start = old_fragments.start().0.full_offset(); } @@ -986,8 +986,8 @@ impl Buffer { } let suffix = old_fragments.suffix(&cx); - new_ropes.push_tree(suffix.summary().text); - new_fragments.push_tree(suffix, &None); + new_ropes.append(suffix.summary().text); + new_fragments.append(suffix, &None); let (visible_text, deleted_text) = new_ropes.finish(); drop(old_fragments); @@ -1056,8 +1056,8 @@ impl Buffer { for fragment_id in self.fragment_ids_for_edits(undo.counts.keys()) { let preceding_fragments = old_fragments.slice(&Some(fragment_id), Bias::Left, &None); - new_ropes.push_tree(preceding_fragments.summary().text); - new_fragments.push_tree(preceding_fragments, &None); + new_ropes.append(preceding_fragments.summary().text); + new_fragments.append(preceding_fragments, &None); if let Some(fragment) = old_fragments.item() { let mut fragment = fragment.clone(); @@ -1087,8 +1087,8 @@ impl Buffer { } let suffix = old_fragments.suffix(&None); - new_ropes.push_tree(suffix.summary().text); - new_fragments.push_tree(suffix, &None); + new_ropes.append(suffix.summary().text); + new_fragments.append(suffix, &None); drop(old_fragments); let (visible_text, deleted_text) = new_ropes.finish(); @@ -2070,7 +2070,7 @@ impl<'a> RopeBuilder<'a> { } } - fn push_tree(&mut self, len: FragmentTextSummary) { + fn append(&mut self, len: FragmentTextSummary) { self.push(len.visible, true, true); self.push(len.deleted, false, false); } From 050c22312cfee1a1cdb388350f9b23a2ac989270 Mon Sep 17 00:00:00 2001 From: Max Brunsfeld Date: Mon, 19 Jun 2023 19:02:05 -0700 Subject: [PATCH 21/56] Update plugin runtime LspAdapter impl --- crates/zed/src/languages/language_plugin.rs | 13 ++++++++----- 1 file changed, 8 insertions(+), 5 deletions(-) diff --git a/crates/zed/src/languages/language_plugin.rs b/crates/zed/src/languages/language_plugin.rs index 9b82713d08..5209102454 100644 --- a/crates/zed/src/languages/language_plugin.rs +++ b/crates/zed/src/languages/language_plugin.rs @@ -3,10 +3,9 @@ use async_trait::async_trait; use collections::HashMap; use futures::lock::Mutex; use gpui::executor::Background; -use language::{LanguageServerBinary, LanguageServerName, LspAdapter}; +use language::{LanguageServerBinary, LanguageServerName, LspAdapter, LspAdapterDelegate}; use plugin_runtime::{Plugin, PluginBinary, PluginBuilder, WasiFn}; use std::{any::Any, path::PathBuf, sync::Arc}; -use util::http::HttpClient; use util::ResultExt; #[allow(dead_code)] @@ -72,7 +71,7 @@ impl LspAdapter for PluginLspAdapter { async fn fetch_latest_server_version( &self, - _: Arc, + _: &dyn LspAdapterDelegate, ) -> Result> { let runtime = self.runtime.clone(); let function = self.fetch_latest_server_version; @@ -92,8 +91,8 @@ impl LspAdapter for PluginLspAdapter { async fn fetch_server_binary( &self, version: Box, - _: Arc, container_dir: PathBuf, + _: &dyn LspAdapterDelegate, ) -> Result { let version = *version.downcast::().unwrap(); let runtime = self.runtime.clone(); @@ -110,7 +109,11 @@ impl LspAdapter for PluginLspAdapter { .await } - async fn cached_server_binary(&self, container_dir: PathBuf) -> Option { + async fn cached_server_binary( + &self, + container_dir: PathBuf, + _: &dyn LspAdapterDelegate, + ) -> Option { let runtime = self.runtime.clone(); let function = self.cached_server_binary; From 8673b0b75bdf9a654a05751e44ada4eb0bf07052 Mon Sep 17 00:00:00 2001 From: Antonio Scandurra Date: Tue, 20 Jun 2023 11:59:51 +0200 Subject: [PATCH 22/56] Avoid including pending or errored messages on `assist` --- Cargo.lock | 1 + crates/ai/Cargo.toml | 1 + crates/ai/src/assistant.rs | 148 +++++++++++++++++++++++-------------- 3 files changed, 94 insertions(+), 56 deletions(-) diff --git a/Cargo.lock b/Cargo.lock index 24fd67f90e..957f8c04bb 100644 --- a/Cargo.lock +++ b/Cargo.lock @@ -114,6 +114,7 @@ dependencies = [ "serde", "serde_json", "settings", + "smol", "theme", "tiktoken-rs", "util", diff --git a/crates/ai/Cargo.toml b/crates/ai/Cargo.toml index 9d67cbd108..7f8954bb21 100644 --- a/crates/ai/Cargo.toml +++ b/crates/ai/Cargo.toml @@ -28,6 +28,7 @@ isahc.workspace = true schemars.workspace = true serde.workspace = true serde_json.workspace = true +smol.workspace = true tiktoken-rs = "0.4" [dev-dependencies] diff --git a/crates/ai/src/assistant.rs b/crates/ai/src/assistant.rs index 121e4600cc..e6b62e4ea1 100644 --- a/crates/ai/src/assistant.rs +++ b/crates/ai/src/assistant.rs @@ -518,7 +518,7 @@ impl Assistant { MessageMetadata { role: Role::User, sent_at: Local::now(), - error: None, + status: MessageStatus::Done, }, ); @@ -595,6 +595,7 @@ impl Assistant { cx: &mut ModelContext, ) -> Vec { let mut user_messages = Vec::new(); + let mut tasks = Vec::new(); for selected_message_id in selected_messages { let selected_message_role = if let Some(metadata) = self.messages_metadata.get(&selected_message_id) { @@ -604,15 +605,22 @@ impl Assistant { }; if selected_message_role == Role::Assistant { - let Some(user_message) = self.insert_message_after(selected_message_id, Role::User, cx) else { + if let Some(user_message) = self.insert_message_after( + selected_message_id, + Role::User, + MessageStatus::Done, + cx, + ) { + user_messages.push(user_message); + } else { continue; - }; - user_messages.push(user_message); + } } else { let request = OpenAIRequest { model: self.model.clone(), messages: self .messages(cx) + .filter(|message| matches!(message.status, MessageStatus::Done)) .map(|message| message.to_open_ai_message(self.buffer.read(cx))) .chain(Some(RequestMessage { role: Role::System, @@ -628,10 +636,15 @@ impl Assistant { let Some(api_key) = self.api_key.borrow().clone() else { continue }; let stream = stream_completion(api_key, cx.background().clone(), request); let assistant_message = self - .insert_message_after(selected_message_id, Role::Assistant, cx) + .insert_message_after( + selected_message_id, + Role::Assistant, + MessageStatus::Pending, + cx, + ) .unwrap(); - let task = cx.spawn_weak({ + tasks.push(cx.spawn_weak({ |this, mut cx| async move { let assistant_message_id = assistant_message.id; let stream_completion = async { @@ -648,16 +661,15 @@ impl Assistant { |message| message.id == assistant_message_id, )?; this.buffer.update(cx, |buffer, cx| { - let offset = if message_ix + 1 - == this.message_anchors.len() - { - buffer.len() - } else { - this.message_anchors[message_ix + 1] - .start - .to_offset(buffer) - .saturating_sub(1) - }; + let offset = this.message_anchors[message_ix + 1..] + .iter() + .find(|message| message.start.is_valid(buffer)) + .map_or(buffer.len(), |message| { + message + .start + .to_offset(buffer) + .saturating_sub(1) + }); buffer.edit([(offset..offset, text)], None, cx); }); cx.emit(AssistantEvent::StreamedCompletion); @@ -665,6 +677,7 @@ impl Assistant { Some(()) }); } + smol::future::yield_now().await; } this.upgrade(&cx) @@ -682,26 +695,35 @@ impl Assistant { let result = stream_completion.await; if let Some(this) = this.upgrade(&cx) { this.update(&mut cx, |this, cx| { - if let Err(error) = result { - if let Some(metadata) = - this.messages_metadata.get_mut(&assistant_message.id) - { - metadata.error = Some(error.to_string().trim().into()); - cx.notify(); + if let Some(metadata) = + this.messages_metadata.get_mut(&assistant_message.id) + { + match result { + Ok(_) => { + metadata.status = MessageStatus::Done; + } + Err(error) => { + metadata.status = MessageStatus::Error( + error.to_string().trim().into(), + ); + } } + cx.notify(); } }); } } - }); - - self.pending_completions.push(PendingCompletion { - id: post_inc(&mut self.completion_count), - _task: task, - }); + })); } } + if !tasks.is_empty() { + self.pending_completions.push(PendingCompletion { + id: post_inc(&mut self.completion_count), + _tasks: tasks, + }); + } + user_messages } @@ -723,6 +745,7 @@ impl Assistant { &mut self, message_id: MessageId, role: Role, + status: MessageStatus, cx: &mut ModelContext, ) -> Option { if let Some(prev_message_ix) = self @@ -749,7 +772,7 @@ impl Assistant { MessageMetadata { role, sent_at: Local::now(), - error: None, + status, }, ); cx.emit(AssistantEvent::MessagesEdited); @@ -808,7 +831,7 @@ impl Assistant { MessageMetadata { role, sent_at: Local::now(), - error: None, + status: MessageStatus::Done, }, ); @@ -850,7 +873,7 @@ impl Assistant { MessageMetadata { role, sent_at: Local::now(), - error: None, + status: MessageStatus::Done, }, ); (Some(selection), Some(suffix)) @@ -970,7 +993,7 @@ impl Assistant { anchor: message_anchor.start, role: metadata.role, sent_at: metadata.sent_at, - error: metadata.error.clone(), + status: metadata.status.clone(), }); } None @@ -980,7 +1003,7 @@ impl Assistant { struct PendingCompletion { id: usize, - _task: Task<()>, + _tasks: Vec>, } enum AssistantEditorEvent { @@ -1239,22 +1262,28 @@ impl AssistantEditor { .with_style(style.sent_at.container) .aligned(), ) - .with_children(message.error.as_ref().map(|error| { - Svg::new("icons/circle_x_mark_12.svg") - .with_color(style.error_icon.color) - .constrained() - .with_width(style.error_icon.width) - .contained() - .with_style(style.error_icon.container) - .with_tooltip::( - message_id.0, - error.to_string(), - None, - theme.tooltip.clone(), - cx, + .with_children( + if let MessageStatus::Error(error) = &message.status { + Some( + Svg::new("icons/circle_x_mark_12.svg") + .with_color(style.error_icon.color) + .constrained() + .with_width(style.error_icon.width) + .contained() + .with_style(style.error_icon.container) + .with_tooltip::( + message_id.0, + error.to_string(), + None, + theme.tooltip.clone(), + cx, + ) + .aligned(), ) - .aligned() - })) + } else { + None + }, + ) .aligned() .left() .contained() @@ -1502,7 +1531,14 @@ struct MessageAnchor { struct MessageMetadata { role: Role, sent_at: DateTime, - error: Option>, + status: MessageStatus, +} + +#[derive(Clone, Debug)] +enum MessageStatus { + Pending, + Done, + Error(Arc), } #[derive(Clone, Debug)] @@ -1513,7 +1549,7 @@ pub struct Message { anchor: language::Anchor, role: Role, sent_at: DateTime, - error: Option>, + status: MessageStatus, } impl Message { @@ -1632,7 +1668,7 @@ mod tests { let message_2 = assistant.update(cx, |assistant, cx| { assistant - .insert_message_after(message_1.id, Role::Assistant, cx) + .insert_message_after(message_1.id, Role::Assistant, MessageStatus::Done, cx) .unwrap() }); assert_eq!( @@ -1656,7 +1692,7 @@ mod tests { let message_3 = assistant.update(cx, |assistant, cx| { assistant - .insert_message_after(message_2.id, Role::User, cx) + .insert_message_after(message_2.id, Role::User, MessageStatus::Done, cx) .unwrap() }); assert_eq!( @@ -1670,7 +1706,7 @@ mod tests { let message_4 = assistant.update(cx, |assistant, cx| { assistant - .insert_message_after(message_2.id, Role::User, cx) + .insert_message_after(message_2.id, Role::User, MessageStatus::Done, cx) .unwrap() }); assert_eq!( @@ -1731,7 +1767,7 @@ mod tests { // Ensure we can still insert after a merged message. let message_5 = assistant.update(cx, |assistant, cx| { assistant - .insert_message_after(message_1.id, Role::System, cx) + .insert_message_after(message_1.id, Role::System, MessageStatus::Done, cx) .unwrap() }); assert_eq!( @@ -1852,14 +1888,14 @@ mod tests { buffer.update(cx, |buffer, cx| buffer.edit([(0..0, "aaa")], None, cx)); let message_2 = assistant .update(cx, |assistant, cx| { - assistant.insert_message_after(message_1.id, Role::User, cx) + assistant.insert_message_after(message_1.id, Role::User, MessageStatus::Done, cx) }) .unwrap(); buffer.update(cx, |buffer, cx| buffer.edit([(4..4, "bbb")], None, cx)); let message_3 = assistant .update(cx, |assistant, cx| { - assistant.insert_message_after(message_2.id, Role::User, cx) + assistant.insert_message_after(message_2.id, Role::User, MessageStatus::Done, cx) }) .unwrap(); buffer.update(cx, |buffer, cx| buffer.edit([(8..8, "ccc")], None, cx)); From dc07b60e40d1df812b627db397ebf60e32eed3d5 Mon Sep 17 00:00:00 2001 From: Julia Date: Tue, 20 Jun 2023 09:31:30 -0400 Subject: [PATCH 23/56] Avoid assigning NSCursor style when it already is that style This avoids a high cost which appears to be the system rasterizing the cursor every time we call this, fixes a slowdown when scrolling rapidly while mouse motion continually attempted to assign the style Co-Authored-By: Antonio Scandurra --- crates/gpui/src/platform/mac/platform.rs | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/crates/gpui/src/platform/mac/platform.rs b/crates/gpui/src/platform/mac/platform.rs index 8b5b801ada..ea415cc6a6 100644 --- a/crates/gpui/src/platform/mac/platform.rs +++ b/crates/gpui/src/platform/mac/platform.rs @@ -786,7 +786,7 @@ impl platform::Platform for MacPlatform { fn set_cursor_style(&self, style: CursorStyle) { unsafe { - let cursor: id = match style { + let new_cursor: id = match style { CursorStyle::Arrow => msg_send![class!(NSCursor), arrowCursor], CursorStyle::ResizeLeftRight => { msg_send![class!(NSCursor), resizeLeftRightCursor] @@ -795,7 +795,11 @@ impl platform::Platform for MacPlatform { CursorStyle::PointingHand => msg_send![class!(NSCursor), pointingHandCursor], CursorStyle::IBeam => msg_send![class!(NSCursor), IBeamCursor], }; - let _: () = msg_send![cursor, set]; + + let old_cursor: id = msg_send![class!(NSCursor), currentCursor]; + if new_cursor != old_cursor { + let _: () = msg_send![new_cursor, set]; + } } } From 1d84da1d3363175e4231ce80b5717487678b559e Mon Sep 17 00:00:00 2001 From: Antonio Scandurra Date: Tue, 20 Jun 2023 15:32:51 +0200 Subject: [PATCH 24/56] Improve prompt --- crates/ai/src/assistant.rs | 16 +++++++++++++++- 1 file changed, 15 insertions(+), 1 deletion(-) diff --git a/crates/ai/src/assistant.rs b/crates/ai/src/assistant.rs index e6b62e4ea1..ce816f147b 100644 --- a/crates/ai/src/assistant.rs +++ b/crates/ai/src/assistant.rs @@ -621,7 +621,21 @@ impl Assistant { messages: self .messages(cx) .filter(|message| matches!(message.status, MessageStatus::Done)) - .map(|message| message.to_open_ai_message(self.buffer.read(cx))) + .flat_map(|message| { + let mut system_message = None; + if message.id == selected_message_id { + system_message = Some(RequestMessage { + role: Role::System, + content: concat!( + "Treat the following messages as additional knowledge you have learned about, ", + "but act as if they were not part of this conversation. That is, treat them ", + "as if the user didn't see them and couldn't possibly inquire about them." + ).into() + }); + } + + Some(message.to_open_ai_message(self.buffer.read(cx))).into_iter().chain(system_message) + }) .chain(Some(RequestMessage { role: Role::System, content: format!( From e92015b12fde6a0ab7c9d0a4dc5723d3312321d0 Mon Sep 17 00:00:00 2001 From: Piotr Osiewicz <24362066+osiewicz@users.noreply.github.com> Date: Wed, 14 Jun 2023 14:02:32 +0200 Subject: [PATCH 25/56] Split out Interactive into Toggle and Interactive --- crates/ai/src/assistant.rs | 8 +- crates/auto_update/src/update_notification.rs | 4 +- crates/breadcrumbs/src/breadcrumbs.rs | 2 +- crates/collab_ui/src/collab_titlebar_item.rs | 29 +++-- crates/collab_ui/src/contact_finder.rs | 3 +- crates/collab_ui/src/contact_list.rs | 41 ++++--- crates/collab_ui/src/notifications.rs | 4 +- crates/command_palette/src/command_palette.rs | 8 +- crates/context_menu/src/context_menu.rs | 32 ++++-- crates/copilot/src/sign_in.rs | 6 +- crates/copilot_button/src/copilot_button.rs | 5 +- crates/diagnostics/src/items.rs | 4 +- crates/editor/src/editor.rs | 18 +-- crates/editor/src/element.rs | 2 +- crates/feedback/src/deploy_feedback_button.rs | 3 +- crates/feedback/src/submit_feedback_button.rs | 2 +- crates/file_finder/src/file_finder.rs | 2 +- .../src/active_buffer_language.rs | 2 +- .../src/language_selector.rs | 2 +- crates/language_tools/src/lsp_log.rs | 8 +- crates/language_tools/src/syntax_tree_view.rs | 5 +- crates/outline/src/outline.rs | 2 +- crates/project_panel/src/project_panel.rs | 11 +- crates/project_symbols/src/project_symbols.rs | 4 +- crates/recent_projects/src/recent_projects.rs | 2 +- crates/search/src/buffer_search.rs | 10 +- crates/search/src/project_search.rs | 8 +- crates/theme/src/theme.rs | 105 ++++++++++-------- crates/theme/src/ui.rs | 6 +- crates/theme_selector/src/theme_selector.rs | 2 +- crates/welcome/src/base_keymap_picker.rs | 2 +- crates/workspace/src/dock.rs | 11 +- crates/workspace/src/notifications.rs | 4 +- crates/workspace/src/pane.rs | 4 +- crates/workspace/src/toolbar.rs | 6 +- 35 files changed, 223 insertions(+), 144 deletions(-) diff --git a/crates/ai/src/assistant.rs b/crates/ai/src/assistant.rs index ce816f147b..5b254fac4b 100644 --- a/crates/ai/src/assistant.rs +++ b/crates/ai/src/assistant.rs @@ -1233,19 +1233,19 @@ impl AssistantEditor { cx, |state, _| match message.role { Role::User => { - let style = style.user_sender.style_for(state, false); + let style = style.user_sender.style_for(state); Label::new("You", style.text.clone()) .contained() .with_style(style.container) } Role::Assistant => { - let style = style.assistant_sender.style_for(state, false); + let style = style.assistant_sender.style_for(state); Label::new("Assistant", style.text.clone()) .contained() .with_style(style.container) } Role::System => { - let style = style.system_sender.style_for(state, false); + let style = style.system_sender.style_for(state); Label::new("System", style.text.clone()) .contained() .with_style(style.container) @@ -1484,7 +1484,7 @@ impl View for AssistantEditor { Flex::row() .with_child( MouseEventHandler::::new(0, cx, |state, _| { - let style = theme.model.style_for(state, false); + let style = theme.model.style_for(state); Label::new(model, style.text.clone()) .contained() .with_style(style.container) diff --git a/crates/auto_update/src/update_notification.rs b/crates/auto_update/src/update_notification.rs index 6f31df614d..cd2e53905d 100644 --- a/crates/auto_update/src/update_notification.rs +++ b/crates/auto_update/src/update_notification.rs @@ -49,7 +49,7 @@ impl View for UpdateNotification { ) .with_child( MouseEventHandler::::new(0, cx, |state, _| { - let style = theme.dismiss_button.style_for(state, false); + let style = theme.dismiss_button.style_for(state); Svg::new("icons/x_mark_8.svg") .with_color(style.color) .constrained() @@ -74,7 +74,7 @@ impl View for UpdateNotification { ), ) .with_child({ - let style = theme.action_message.style_for(state, false); + let style = theme.action_message.style_for(state); Text::new("View the release notes", style.text.clone()) .contained() .with_style(style.container) diff --git a/crates/breadcrumbs/src/breadcrumbs.rs b/crates/breadcrumbs/src/breadcrumbs.rs index 906d70abb7..433dbed29b 100644 --- a/crates/breadcrumbs/src/breadcrumbs.rs +++ b/crates/breadcrumbs/src/breadcrumbs.rs @@ -83,7 +83,7 @@ impl View for Breadcrumbs { } MouseEventHandler::::new(0, cx, |state, _| { - let style = style.style_for(state, false); + let style = style.style_for(state); crumbs.with_style(style.container) }) .on_click(MouseButton::Left, |_, this, cx| { diff --git a/crates/collab_ui/src/collab_titlebar_item.rs b/crates/collab_ui/src/collab_titlebar_item.rs index 720a73f477..aa643f4416 100644 --- a/crates/collab_ui/src/collab_titlebar_item.rs +++ b/crates/collab_ui/src/collab_titlebar_item.rs @@ -299,7 +299,7 @@ impl CollabTitlebarItem { pub fn toggle_user_menu(&mut self, _: &ToggleUserMenu, cx: &mut ViewContext) { let theme = theme::current(cx).clone(); let avatar_style = theme.workspace.titlebar.leader_avatar.clone(); - let item_style = theme.context_menu.item.disabled_style().clone(); + let item_style = theme.context_menu.item.off_state().disabled_style().clone(); self.user_menu.update(cx, |user_menu, cx| { let items = if let Some(user) = self.user_store.read(cx).current_user() { vec![ @@ -361,8 +361,20 @@ impl CollabTitlebarItem { .contained() .with_style(titlebar.toggle_contacts_badge) .contained() - .with_margin_left(titlebar.toggle_contacts_button.default.icon_width) - .with_margin_top(titlebar.toggle_contacts_button.default.icon_width) + .with_margin_left( + titlebar + .toggle_contacts_button + .off_state() + .default + .icon_width, + ) + .with_margin_top( + titlebar + .toggle_contacts_button + .off_state() + .default + .icon_width, + ) .aligned(), ) }; @@ -372,7 +384,8 @@ impl CollabTitlebarItem { MouseEventHandler::::new(0, cx, |state, _| { let style = titlebar .toggle_contacts_button - .style_for(state, self.contacts_popover.is_some()); + .in_state(self.contacts_popover.is_some()) + .style_for(state); Svg::new("icons/user_plus_16.svg") .with_color(style.color) .constrained() @@ -419,7 +432,7 @@ impl CollabTitlebarItem { let titlebar = &theme.workspace.titlebar; MouseEventHandler::::new(0, cx, |state, _| { - let style = titlebar.call_control.style_for(state, false); + let style = titlebar.call_control.style_for(state); Svg::new(icon) .with_color(style.color) .constrained() @@ -473,7 +486,7 @@ impl CollabTitlebarItem { .with_child( MouseEventHandler::::new(0, cx, |state, _| { //TODO: Ensure this button has consistent width for both text variations - let style = titlebar.share_button.style_for(state, false); + let style = titlebar.share_button.style_for(state); Label::new(label, style.text.clone()) .contained() .with_style(style.container) @@ -511,7 +524,7 @@ impl CollabTitlebarItem { Stack::new() .with_child( MouseEventHandler::::new(0, cx, |state, _| { - let style = titlebar.call_control.style_for(state, false); + let style = titlebar.call_control.style_for(state); Svg::new("icons/ellipsis_14.svg") .with_color(style.color) .constrained() @@ -549,7 +562,7 @@ impl CollabTitlebarItem { fn render_sign_in_button(&self, theme: &Theme, cx: &mut ViewContext) -> AnyElement { let titlebar = &theme.workspace.titlebar; MouseEventHandler::::new(0, cx, |state, _| { - let style = titlebar.sign_in_prompt.style_for(state, false); + let style = titlebar.sign_in_prompt.style_for(state); Label::new("Sign In", style.text.clone()) .contained() .with_style(style.container) diff --git a/crates/collab_ui/src/contact_finder.rs b/crates/collab_ui/src/contact_finder.rs index b5f2416a5b..af59817ece 100644 --- a/crates/collab_ui/src/contact_finder.rs +++ b/crates/collab_ui/src/contact_finder.rs @@ -117,7 +117,8 @@ impl PickerDelegate for ContactFinderDelegate { .contact_finder .picker .item - .style_for(mouse_state, selected); + .in_state(selected) + .style_for(mouse_state); Flex::row() .with_children(user.avatar.clone().map(|avatar| { Image::from_data(avatar) diff --git a/crates/collab_ui/src/contact_list.rs b/crates/collab_ui/src/contact_list.rs index e8dae210c4..c0839249f2 100644 --- a/crates/collab_ui/src/contact_list.rs +++ b/crates/collab_ui/src/contact_list.rs @@ -774,7 +774,8 @@ impl ContactList { .with_style( *theme .contact_row - .style_for(&mut Default::default(), is_selected), + .in_state(is_selected) + .style_for(&mut Default::default()), ) .into_any() } @@ -797,7 +798,7 @@ impl ContactList { .width .or(theme.contact_avatar.height) .unwrap_or(0.); - let row = &theme.project_row.default; + let row = &theme.project_row.off_state().default; let tree_branch = theme.tree_branch; let line_height = row.name.text.line_height(font_cache); let cap_height = row.name.text.cap_height(font_cache); @@ -810,8 +811,11 @@ impl ContactList { }; MouseEventHandler::::new(project_id as usize, cx, |mouse_state, _| { - let tree_branch = *tree_branch.style_for(mouse_state, is_selected); - let row = theme.project_row.style_for(mouse_state, is_selected); + let tree_branch = *tree_branch.in_state(is_selected).style_for(mouse_state); + let row = theme + .project_row + .in_state(is_selected) + .style_for(mouse_state); Flex::row() .with_child( @@ -893,7 +897,7 @@ impl ContactList { .width .or(theme.contact_avatar.height) .unwrap_or(0.); - let row = &theme.project_row.default; + let row = &theme.project_row.off_state().default; let tree_branch = theme.tree_branch; let line_height = row.name.text.line_height(font_cache); let cap_height = row.name.text.cap_height(font_cache); @@ -904,8 +908,11 @@ impl ContactList { peer_id.as_u64() as usize, cx, |mouse_state, _| { - let tree_branch = *tree_branch.style_for(mouse_state, is_selected); - let row = theme.project_row.style_for(mouse_state, is_selected); + let tree_branch = *tree_branch.in_state(is_selected).style_for(mouse_state); + let row = theme + .project_row + .in_state(is_selected) + .style_for(mouse_state); Flex::row() .with_child( @@ -989,7 +996,8 @@ impl ContactList { let header_style = theme .header_row - .style_for(&mut Default::default(), is_selected); + .in_state(is_selected) + .style_for(&mut Default::default()); let text = match section { Section::ActiveCall => "Collaborators", Section::Requests => "Contact Requests", @@ -999,7 +1007,7 @@ impl ContactList { let leave_call = if section == Section::ActiveCall { Some( MouseEventHandler::::new(0, cx, |state, _| { - let style = theme.leave_call.style_for(state, false); + let style = theme.leave_call.style_for(state); Label::new("Leave Call", style.text.clone()) .contained() .with_style(style.container) @@ -1110,8 +1118,7 @@ impl ContactList { contact.user.id as usize, cx, |mouse_state, _| { - let button_style = - theme.contact_button.style_for(mouse_state, false); + let button_style = theme.contact_button.style_for(mouse_state); render_icon_button(button_style, "icons/x_mark_8.svg") .aligned() .flex_float() @@ -1146,7 +1153,8 @@ impl ContactList { .with_style( *theme .contact_row - .style_for(&mut Default::default(), is_selected), + .in_state(is_selected) + .style_for(&mut Default::default()), ) }) .on_click(MouseButton::Left, move |_, this, cx| { @@ -1204,7 +1212,7 @@ impl ContactList { let button_style = if is_contact_request_pending { &theme.disabled_button } else { - theme.contact_button.style_for(mouse_state, false) + theme.contact_button.style_for(mouse_state) }; render_icon_button(button_style, "icons/x_mark_8.svg").aligned() }) @@ -1227,7 +1235,7 @@ impl ContactList { let button_style = if is_contact_request_pending { &theme.disabled_button } else { - theme.contact_button.style_for(mouse_state, false) + theme.contact_button.style_for(mouse_state) }; render_icon_button(button_style, "icons/check_8.svg") .aligned() @@ -1250,7 +1258,7 @@ impl ContactList { let button_style = if is_contact_request_pending { &theme.disabled_button } else { - theme.contact_button.style_for(mouse_state, false) + theme.contact_button.style_for(mouse_state) }; render_icon_button(button_style, "icons/x_mark_8.svg") .aligned() @@ -1277,7 +1285,8 @@ impl ContactList { .with_style( *theme .contact_row - .style_for(&mut Default::default(), is_selected), + .in_state(is_selected) + .style_for(&mut Default::default()), ) .into_any() } diff --git a/crates/collab_ui/src/notifications.rs b/crates/collab_ui/src/notifications.rs index abeb65b1dc..cbd072fe89 100644 --- a/crates/collab_ui/src/notifications.rs +++ b/crates/collab_ui/src/notifications.rs @@ -53,7 +53,7 @@ where ) .with_child( MouseEventHandler::::new(user.id as usize, cx, |state, _| { - let style = theme.dismiss_button.style_for(state, false); + let style = theme.dismiss_button.style_for(state); Svg::new("icons/x_mark_8.svg") .with_color(style.color) .constrained() @@ -93,7 +93,7 @@ where .with_children(buttons.into_iter().enumerate().map( |(ix, (message, handler))| { MouseEventHandler::::new(ix, cx, |state, _| { - let button = theme.button.style_for(state, false); + let button = theme.button.style_for(state); Label::new(message, button.text.clone()) .contained() .with_style(button.container) diff --git a/crates/command_palette/src/command_palette.rs b/crates/command_palette/src/command_palette.rs index 2ee93a0734..e7e7462fd9 100644 --- a/crates/command_palette/src/command_palette.rs +++ b/crates/command_palette/src/command_palette.rs @@ -185,8 +185,12 @@ impl PickerDelegate for CommandPaletteDelegate { let mat = &self.matches[ix]; let command = &self.actions[mat.candidate_id]; let theme = theme::current(cx); - let style = theme.picker.item.style_for(mouse_state, selected); - let key_style = &theme.command_palette.key.style_for(mouse_state, selected); + let style = theme.picker.item.in_state(selected).style_for(mouse_state); + let key_style = &theme + .command_palette + .key + .in_state(selected) + .style_for(mouse_state); let keystroke_spacing = theme.command_palette.keystroke_spacing; Flex::row() diff --git a/crates/context_menu/src/context_menu.rs b/crates/context_menu/src/context_menu.rs index fb455fe1d0..e9ab24f06e 100644 --- a/crates/context_menu/src/context_menu.rs +++ b/crates/context_menu/src/context_menu.rs @@ -9,6 +9,7 @@ use gpui::{ }; use menu::*; use std::{any::TypeId, borrow::Cow, sync::Arc, time::Duration}; +use theme::ToggleState; pub fn init(cx: &mut AppContext) { cx.add_action(ContextMenu::select_first); @@ -328,10 +329,13 @@ impl ContextMenu { Flex::column().with_children(self.items.iter().enumerate().map(|(ix, item)| { match item { ContextMenuItem::Item { label, .. } => { - let style = style.item.style_for( - &mut Default::default(), - Some(ix) == self.selected_index, - ); + let toggle_state = if Some(ix) == self.selected_index { + ToggleState::On + } else { + ToggleState::Off + }; + let style = style.item.in_state(toggle_state); + let style = style.style_for(&mut Default::default()); match label { ContextMenuItemLabel::String(label) => { @@ -363,10 +367,13 @@ impl ContextMenu { .with_children(self.items.iter().enumerate().map(|(ix, item)| { match item { ContextMenuItem::Item { action, .. } => { - let style = style.item.style_for( - &mut Default::default(), - Some(ix) == self.selected_index, - ); + let toggle_state = if Some(ix) == self.selected_index { + ToggleState::On + } else { + ToggleState::Off + }; + let style = style.item.in_state(toggle_state); + let style = style.style_for(&mut Default::default()); match action { ContextMenuItemAction::Action(action) => KeystrokeLabel::new( @@ -412,8 +419,13 @@ impl ContextMenu { let action = action.clone(); let view_id = self.parent_view_id; MouseEventHandler::::new(ix, cx, |state, _| { - let style = - style.item.style_for(state, Some(ix) == self.selected_index); + let toggle_state = if Some(ix) == self.selected_index { + ToggleState::On + } else { + ToggleState::Off + }; + let style = style.item.in_state(toggle_state); + let style = style.style_for(state); let keystroke = match &action { ContextMenuItemAction::Action(action) => Some( KeystrokeLabel::new( diff --git a/crates/copilot/src/sign_in.rs b/crates/copilot/src/sign_in.rs index 0993a33e6c..803cb5cc85 100644 --- a/crates/copilot/src/sign_in.rs +++ b/crates/copilot/src/sign_in.rs @@ -127,16 +127,16 @@ impl CopilotCodeVerification { .with_child( Label::new( if copied { "Copied!" } else { "Copy" }, - device_code_style.cta.style_for(state, false).text.clone(), + device_code_style.cta.style_for(state).text.clone(), ) .aligned() .contained() - .with_style(*device_code_style.right_container.style_for(state, false)) + .with_style(*device_code_style.right_container.style_for(state)) .constrained() .with_width(device_code_style.right), ) .contained() - .with_style(device_code_style.cta.style_for(state, false).container) + .with_style(device_code_style.cta.style_for(state).container) }) .on_click(gpui::platform::MouseButton::Left, { let user_code = data.user_code.clone(); diff --git a/crates/copilot_button/src/copilot_button.rs b/crates/copilot_button/src/copilot_button.rs index 2454074d45..9b0581492f 100644 --- a/crates/copilot_button/src/copilot_button.rs +++ b/crates/copilot_button/src/copilot_button.rs @@ -71,7 +71,8 @@ impl View for CopilotButton { .status_bar .panel_buttons .button - .style_for(state, active); + .in_state(active) + .style_for(state); Flex::row() .with_child( @@ -255,7 +256,7 @@ impl CopilotButton { move |state: &mut MouseState, style: &theme::ContextMenuItem| { Flex::row() .with_child(Label::new("Copilot Settings", style.label.clone())) - .with_child(theme::ui::icon(icon_style.style_for(state, false))) + .with_child(theme::ui::icon(icon_style.style_for(state))) .align_children_center() .into_any() }, diff --git a/crates/diagnostics/src/items.rs b/crates/diagnostics/src/items.rs index f84846eae1..c106f042b5 100644 --- a/crates/diagnostics/src/items.rs +++ b/crates/diagnostics/src/items.rs @@ -100,7 +100,7 @@ impl View for DiagnosticIndicator { .workspace .status_bar .diagnostic_summary - .style_for(state, false); + .style_for(state); let mut summary_row = Flex::row(); if self.summary.error_count > 0 { @@ -198,7 +198,7 @@ impl View for DiagnosticIndicator { MouseEventHandler::::new(1, cx, |state, _| { Label::new( diagnostic.message.split('\n').next().unwrap().to_string(), - message_style.style_for(state, false).text.clone(), + message_style.style_for(state).text.clone(), ) .aligned() .contained() diff --git a/crates/editor/src/editor.rs b/crates/editor/src/editor.rs index 2e0d444e04..e438d0dc2e 100644 --- a/crates/editor/src/editor.rs +++ b/crates/editor/src/editor.rs @@ -3320,15 +3320,21 @@ impl Editor { pub fn render_code_actions_indicator( &self, style: &EditorStyle, - active: bool, + is_active: bool, cx: &mut ViewContext, ) -> Option> { if self.available_code_actions.is_some() { enum CodeActions {} Some( MouseEventHandler::::new(0, cx, |state, _| { - Svg::new("icons/bolt_8.svg") - .with_color(style.code_actions.indicator.style_for(state, active).color) + Svg::new("icons/bolt_8.svg").with_color( + style + .code_actions + .indicator + .in_state(is_active) + .style_for(state) + .color, + ) }) .with_cursor_style(CursorStyle::PointingHand) .with_padding(Padding::uniform(3.)) @@ -3378,10 +3384,8 @@ impl Editor { .with_color( style .indicator - .style_for( - mouse_state, - fold_status == FoldStatus::Folded, - ) + .in_state(fold_status == FoldStatus::Folded) + .style_for(mouse_state) .color, ) .constrained() diff --git a/crates/editor/src/element.rs b/crates/editor/src/element.rs index d6f9a2e906..835d53bc8c 100644 --- a/crates/editor/src/element.rs +++ b/crates/editor/src/element.rs @@ -2090,7 +2090,7 @@ impl Element for EditorElement { .folds .ellipses .background - .style_for(&mut cx.mouse_state::(id as usize), false) + .style_for(&mut cx.mouse_state::(id as usize)) .color; (id, fold, color) diff --git a/crates/feedback/src/deploy_feedback_button.rs b/crates/feedback/src/deploy_feedback_button.rs index d32a3e5b4c..beb5284031 100644 --- a/crates/feedback/src/deploy_feedback_button.rs +++ b/crates/feedback/src/deploy_feedback_button.rs @@ -41,7 +41,8 @@ impl View for DeployFeedbackButton { .status_bar .panel_buttons .button - .style_for(state, active); + .in_state(active) + .style_for(state); Svg::new("icons/feedback_16.svg") .with_color(style.icon_color) diff --git a/crates/feedback/src/submit_feedback_button.rs b/crates/feedback/src/submit_feedback_button.rs index 56bc235570..15f77bd561 100644 --- a/crates/feedback/src/submit_feedback_button.rs +++ b/crates/feedback/src/submit_feedback_button.rs @@ -48,7 +48,7 @@ impl View for SubmitFeedbackButton { let theme = theme::current(cx).clone(); enum SubmitFeedbackButton {} MouseEventHandler::::new(0, cx, |state, _| { - let style = theme.feedback.submit_button.style_for(state, false); + let style = theme.feedback.submit_button.style_for(state); Label::new("Submit as Markdown", style.text.clone()) .contained() .with_style(style.container) diff --git a/crates/file_finder/src/file_finder.rs b/crates/file_finder/src/file_finder.rs index 73e7ca6eaa..3f6bd83760 100644 --- a/crates/file_finder/src/file_finder.rs +++ b/crates/file_finder/src/file_finder.rs @@ -546,7 +546,7 @@ impl PickerDelegate for FileFinderDelegate { .get(ix) .expect("Invalid matches state: no element for index {ix}"); let theme = theme::current(cx); - let style = theme.picker.item.style_for(mouse_state, selected); + let style = theme.picker.item.in_state(selected).style_for(mouse_state); let (file_name, file_name_positions, full_path, full_path_positions) = self.labels_for_match(path_match, cx, ix); Flex::column() diff --git a/crates/language_selector/src/active_buffer_language.rs b/crates/language_selector/src/active_buffer_language.rs index 2c78b89f31..b97417580f 100644 --- a/crates/language_selector/src/active_buffer_language.rs +++ b/crates/language_selector/src/active_buffer_language.rs @@ -55,7 +55,7 @@ impl View for ActiveBufferLanguage { MouseEventHandler::::new(0, cx, |state, cx| { let theme = &theme::current(cx).workspace.status_bar; - let style = theme.active_language.style_for(state, false); + let style = theme.active_language.style_for(state); Label::new(active_language_text, style.text.clone()) .contained() .with_style(style.container) diff --git a/crates/language_selector/src/language_selector.rs b/crates/language_selector/src/language_selector.rs index 817901cd3a..6362b8247d 100644 --- a/crates/language_selector/src/language_selector.rs +++ b/crates/language_selector/src/language_selector.rs @@ -180,7 +180,7 @@ impl PickerDelegate for LanguageSelectorDelegate { ) -> AnyElement> { let theme = theme::current(cx); let mat = &self.matches[ix]; - let style = theme.picker.item.style_for(mouse_state, selected); + let style = theme.picker.item.in_state(selected).style_for(mouse_state); let buffer_language_name = self.buffer.read(cx).language().map(|l| l.name()); let mut label = mat.string.clone(); if buffer_language_name.as_deref() == Some(mat.string.as_str()) { diff --git a/crates/language_tools/src/lsp_log.rs b/crates/language_tools/src/lsp_log.rs index 04f47885c0..12d8c6b34d 100644 --- a/crates/language_tools/src/lsp_log.rs +++ b/crates/language_tools/src/lsp_log.rs @@ -681,7 +681,7 @@ impl LspLogToolbarItemView { ) }) .unwrap_or_else(|| "No server selected".into()); - let style = theme.toolbar_dropdown_menu.header.style_for(state, false); + let style = theme.toolbar_dropdown_menu.header.style_for(state); Label::new(label, style.text.clone()) .contained() .with_style(style.container) @@ -722,7 +722,8 @@ impl LspLogToolbarItemView { let style = theme .toolbar_dropdown_menu .item - .style_for(state, logs_selected); + .in_state(logs_selected) + .style_for(state); Label::new(SERVER_LOGS, style.text.clone()) .contained() .with_style(style.container) @@ -739,7 +740,8 @@ impl LspLogToolbarItemView { let style = theme .toolbar_dropdown_menu .item - .style_for(state, rpc_trace_selected); + .in_state(rpc_trace_selected) + .style_for(state); Flex::row() .with_child( Label::new(RPC_MESSAGES, style.text.clone()) diff --git a/crates/language_tools/src/syntax_tree_view.rs b/crates/language_tools/src/syntax_tree_view.rs index 075df76653..3e6727bbf4 100644 --- a/crates/language_tools/src/syntax_tree_view.rs +++ b/crates/language_tools/src/syntax_tree_view.rs @@ -565,7 +565,7 @@ impl SyntaxTreeToolbarItemView { ) -> impl Element { enum ToggleMenu {} MouseEventHandler::::new(0, cx, move |state, _| { - let style = theme.toolbar_dropdown_menu.header.style_for(state, false); + let style = theme.toolbar_dropdown_menu.header.style_for(state); Flex::row() .with_child( Label::new(active_layer.language.name().to_string(), style.text.clone()) @@ -601,7 +601,8 @@ impl SyntaxTreeToolbarItemView { let style = theme .toolbar_dropdown_menu .item - .style_for(state, is_selected); + .in_state(is_selected) + .style_for(state); Flex::row() .with_child( Label::new(layer.language.name().to_string(), style.text.clone()) diff --git a/crates/outline/src/outline.rs b/crates/outline/src/outline.rs index 1e364f5fc8..f93fa10052 100644 --- a/crates/outline/src/outline.rs +++ b/crates/outline/src/outline.rs @@ -204,7 +204,7 @@ impl PickerDelegate for OutlineViewDelegate { cx: &AppContext, ) -> AnyElement> { let theme = theme::current(cx); - let style = theme.picker.item.style_for(mouse_state, selected); + let style = theme.picker.item.in_state(selected).style_for(mouse_state); let string_match = &self.matches[ix]; let outline_item = &self.outline.items[string_match.candidate_id]; diff --git a/crates/project_panel/src/project_panel.rs b/crates/project_panel/src/project_panel.rs index 9563d54be8..a4ac8a5743 100644 --- a/crates/project_panel/src/project_panel.rs +++ b/crates/project_panel/src/project_panel.rs @@ -1253,7 +1253,10 @@ impl ProjectPanel { let show_editor = details.is_editing && !details.is_processing; MouseEventHandler::::new(entry_id.to_usize(), cx, |state, cx| { - let mut style = entry_style.style_for(state, details.is_selected).clone(); + let mut style = entry_style + .in_state(details.is_selected) + .style_for(state) + .clone(); if cx .global::>() @@ -1264,7 +1267,7 @@ impl ProjectPanel { .filter(|destination| details.path.starts_with(destination)) .is_some() { - style = entry_style.active.clone().unwrap(); + style = entry_style.on_state().default.clone(); } let row_container_style = if show_editor { @@ -1405,9 +1408,9 @@ impl View for ProjectPanel { let button_style = theme.open_project_button.clone(); let context_menu_item_style = theme::current(cx).context_menu.item.clone(); move |state, cx| { - let button_style = button_style.style_for(state, false).clone(); + let button_style = button_style.style_for(state).clone(); let context_menu_item = - context_menu_item_style.style_for(state, true).clone(); + context_menu_item_style.on_state().style_for(state).clone(); theme::ui::keystroke_label( "Open a project", diff --git a/crates/project_symbols/src/project_symbols.rs b/crates/project_symbols/src/project_symbols.rs index 0dc5dad3bf..dbfad48e87 100644 --- a/crates/project_symbols/src/project_symbols.rs +++ b/crates/project_symbols/src/project_symbols.rs @@ -196,7 +196,7 @@ impl PickerDelegate for ProjectSymbolsDelegate { ) -> AnyElement> { let theme = theme::current(cx); let style = &theme.picker.item; - let current_style = style.style_for(mouse_state, selected); + let current_style = style.in_state(selected).style_for(mouse_state); let string_match = &self.matches[ix]; let symbol = &self.symbols[string_match.candidate_id]; @@ -229,7 +229,7 @@ impl PickerDelegate for ProjectSymbolsDelegate { .with_child( // Avoid styling the path differently when it is selected, since // the symbol's syntax highlighting doesn't change when selected. - Label::new(path.to_string(), style.default.label.clone()), + Label::new(path.to_string(), style.off_state().default.label.clone()), ) .contained() .with_style(current_style.container) diff --git a/crates/recent_projects/src/recent_projects.rs b/crates/recent_projects/src/recent_projects.rs index a1dc8982c7..b13f72da0b 100644 --- a/crates/recent_projects/src/recent_projects.rs +++ b/crates/recent_projects/src/recent_projects.rs @@ -173,7 +173,7 @@ impl PickerDelegate for RecentProjectsDelegate { cx: &gpui::AppContext, ) -> AnyElement> { let theme = theme::current(cx); - let style = theme.picker.item.style_for(mouse_state, selected); + let style = theme.picker.item.in_state(selected).style_for(mouse_state); let string_match = &self.matches[ix]; diff --git a/crates/search/src/buffer_search.rs b/crates/search/src/buffer_search.rs index 87a8b265fb..1a059f5df7 100644 --- a/crates/search/src/buffer_search.rs +++ b/crates/search/src/buffer_search.rs @@ -328,7 +328,11 @@ impl BufferSearchBar { Some( MouseEventHandler::::new(option as usize, cx, |state, cx| { let theme = theme::current(cx); - let style = theme.search.option_button.style_for(state, is_active); + let style = theme + .search + .option_button + .in_state(is_active) + .style_for(state); Label::new(icon, style.text.clone()) .contained() .with_style(style.container) @@ -371,7 +375,7 @@ impl BufferSearchBar { enum NavButton {} MouseEventHandler::::new(direction as usize, cx, |state, cx| { let theme = theme::current(cx); - let style = theme.search.option_button.style_for(state, false); + let style = theme.search.option_button.off_state().style_for(state); Label::new(icon, style.text.clone()) .contained() .with_style(style.container) @@ -403,7 +407,7 @@ impl BufferSearchBar { enum CloseButton {} MouseEventHandler::::new(0, cx, |state, _| { - let style = theme.dismiss_button.style_for(state, false); + let style = theme.dismiss_button.style_for(state); Svg::new("icons/x_mark_8.svg") .with_color(style.color) .constrained() diff --git a/crates/search/src/project_search.rs b/crates/search/src/project_search.rs index 27aac1762b..a379fa80e1 100644 --- a/crates/search/src/project_search.rs +++ b/crates/search/src/project_search.rs @@ -896,7 +896,7 @@ impl ProjectSearchBar { enum NavButton {} MouseEventHandler::::new(direction as usize, cx, |state, cx| { let theme = theme::current(cx); - let style = theme.search.option_button.style_for(state, false); + let style = theme.search.option_button.off_state().style_for(state); Label::new(icon, style.text.clone()) .contained() .with_style(style.container) @@ -927,7 +927,11 @@ impl ProjectSearchBar { let is_active = self.is_option_enabled(option, cx); MouseEventHandler::::new(option as usize, cx, |state, cx| { let theme = theme::current(cx); - let style = theme.search.option_button.style_for(state, is_active); + let style = theme + .search + .option_button + .in_state(is_active) + .style_for(state); Label::new(icon, style.text.clone()) .contained() .with_style(style.container) diff --git a/crates/theme/src/theme.rs b/crates/theme/src/theme.rs index c7563ec87a..812659078f 100644 --- a/crates/theme/src/theme.rs +++ b/crates/theme/src/theme.rs @@ -132,7 +132,7 @@ pub struct Titlebar { pub outdated_warning: ContainedText, pub share_button: Interactive, pub call_control: Interactive, - pub toggle_contacts_button: Interactive, + pub toggle_contacts_button: Toggleable>, pub user_menu_button: Interactive, pub toggle_contacts_badge: ContainerStyle, } @@ -204,12 +204,12 @@ pub struct ContactList { pub user_query_editor: FieldEditor, pub user_query_editor_height: f32, pub add_contact_button: IconButton, - pub header_row: Interactive, + pub header_row: Toggleable>, pub leave_call: Interactive, - pub contact_row: Interactive, + pub contact_row: Toggleable>, pub row_height: f32, - pub project_row: Interactive, - pub tree_branch: Interactive, + pub project_row: Toggleable>, + pub tree_branch: Toggleable>, pub contact_avatar: ImageStyle, pub contact_status_free: ContainerStyle, pub contact_status_busy: ContainerStyle, @@ -251,7 +251,7 @@ pub struct DropdownMenu { pub container: ContainerStyle, pub header: Interactive, pub section_header: ContainedText, - pub item: Interactive, + pub item: Toggleable>, pub row_height: f32, } @@ -270,7 +270,7 @@ pub struct DropdownMenuItem { pub struct TabBar { #[serde(flatten)] pub container: ContainerStyle, - pub pane_button: Interactive, + pub pane_button: Toggleable>, pub pane_button_container: ContainerStyle, pub active_pane: TabStyles, pub inactive_pane: TabStyles, @@ -339,7 +339,7 @@ pub struct Toolbar { pub container: ContainerStyle, pub height: f32, pub item_spacing: f32, - pub nav_button: Interactive, + pub nav_button: Toggleable>, } #[derive(Clone, Deserialize, Default)] @@ -359,7 +359,7 @@ pub struct Search { pub include_exclude_editor: FindEditor, pub invalid_include_exclude_editor: ContainerStyle, pub include_exclude_inputs: ContainedText, - pub option_button: Interactive, + pub option_button: Toggleable>, pub match_background: Color, pub match_index: ContainedText, pub results_status: TextStyle, @@ -395,7 +395,7 @@ pub struct StatusBarPanelButtons { pub group_left: ContainerStyle, pub group_bottom: ContainerStyle, pub group_right: ContainerStyle, - pub button: Interactive, + pub button: Toggleable>, } #[derive(Deserialize, Default)] @@ -444,10 +444,10 @@ pub struct PanelButton { pub struct ProjectPanel { #[serde(flatten)] pub container: ContainerStyle, - pub entry: Interactive, + pub entry: Toggleable>, pub dragged_entry: ProjectPanelEntry, - pub ignored_entry: Interactive, - pub cut_entry: Interactive, + pub ignored_entry: Toggleable>, + pub cut_entry: Toggleable>, pub filename_editor: FieldEditor, pub indent_width: f32, pub open_project_button: Interactive, @@ -481,7 +481,7 @@ pub struct GitProjectStatus { pub struct ContextMenu { #[serde(flatten)] pub container: ContainerStyle, - pub item: Interactive, + pub item: Toggleable>, pub keystroke_margin: f32, pub separator: ContainerStyle, } @@ -498,7 +498,7 @@ pub struct ContextMenuItem { #[derive(Debug, Deserialize, Default)] pub struct CommandPalette { - pub key: Interactive, + pub key: Toggleable>, pub keystroke_spacing: f32, } @@ -565,7 +565,7 @@ pub struct Picker { pub input_editor: FieldEditor, pub empty_input_editor: FieldEditor, pub no_matches: ContainedLabel, - pub item: Interactive, + pub item: Toggleable>, } #[derive(Clone, Debug, Deserialize, Default)] @@ -771,13 +771,13 @@ pub struct InteractiveColor { #[derive(Clone, Deserialize, Default)] pub struct CodeActions { #[serde(default)] - pub indicator: Interactive, + pub indicator: Toggleable>, pub vertical_scale: f32, } #[derive(Clone, Deserialize, Default)] pub struct Folds { - pub indicator: Interactive, + pub indicator: Toggleable>, pub ellipses: FoldEllipses, pub fold_background: Color, pub icon_margin_scale: f32, @@ -806,29 +806,52 @@ pub struct DiffStyle { pub struct Interactive { pub default: T, pub hover: Option, - pub hover_and_active: Option, pub clicked: Option, - pub click_and_active: Option, - pub active: Option, pub disabled: Option, } +#[derive(Clone, Copy, Debug, Default, Deserialize)] +pub struct Toggleable { + on: T, + off: T, +} + +#[derive(Copy, Clone, Debug, Hash, PartialEq, Eq)] +pub enum ToggleState { + Off, + On, +} + +impl> From for ToggleState { + fn from(item: T) -> Self { + match *item.borrow() { + true => Self::On, + false => Self::Off, + } + } +} + +impl Toggleable { + pub fn new(on: T, off: T) -> Self { + Self { on, off } + } + pub fn in_state(&self, state: impl Into) -> &T { + match state.into() { + ToggleState::Off => &self.off, + ToggleState::On => &self.on, + } + } + pub fn on_state(&self) -> &T { + self.in_state(ToggleState::On) + } + pub fn off_state(&self) -> &T { + self.in_state(ToggleState::Off) + } +} + impl Interactive { - pub fn style_for(&self, state: &mut MouseState, active: bool) -> &T { - if active { - if state.hovered() { - self.hover_and_active - .as_ref() - .unwrap_or(self.active.as_ref().unwrap_or(&self.default)) - } else if state.clicked() == Some(platform::MouseButton::Left) && self.clicked.is_some() - { - self.click_and_active - .as_ref() - .unwrap_or(self.active.as_ref().unwrap_or(&self.default)) - } else { - self.active.as_ref().unwrap_or(&self.default) - } - } else if state.clicked() == Some(platform::MouseButton::Left) && self.clicked.is_some() { + pub fn style_for(&self, state: &mut MouseState) -> &T { + if state.clicked() == Some(platform::MouseButton::Left) && self.clicked.is_some() { self.clicked.as_ref().unwrap() } else if state.hovered() { self.hover.as_ref().unwrap_or(&self.default) @@ -836,7 +859,6 @@ impl Interactive { &self.default } } - pub fn disabled_style(&self) -> &T { self.disabled.as_ref().unwrap_or(&self.default) } @@ -852,10 +874,7 @@ impl<'de, T: DeserializeOwned> Deserialize<'de> for Interactive { #[serde(flatten)] default: Value, hover: Option, - hover_and_active: Option, clicked: Option, - click_and_active: Option, - active: Option, disabled: Option, } @@ -881,20 +900,14 @@ impl<'de, T: DeserializeOwned> Deserialize<'de> for Interactive { }; let hover = deserialize_state(json.hover)?; - let hover_and_active = deserialize_state(json.hover_and_active)?; let clicked = deserialize_state(json.clicked)?; - let click_and_active = deserialize_state(json.click_and_active)?; - let active = deserialize_state(json.active)?; let disabled = deserialize_state(json.disabled)?; let default = serde_json::from_value(json.default).map_err(serde::de::Error::custom)?; Ok(Interactive { default, hover, - hover_and_active, clicked, - click_and_active, - active, disabled, }) } diff --git a/crates/theme/src/ui.rs b/crates/theme/src/ui.rs index b86bfca8c4..a0fd741d1d 100644 --- a/crates/theme/src/ui.rs +++ b/crates/theme/src/ui.rs @@ -170,7 +170,7 @@ where F: Fn(MouseClick, &mut V, &mut EventContext) + 'static, { MouseEventHandler::::new(0, cx, |state, _| { - let style = style.style_for(state, false); + let style = style.style_for(state); Label::new(label, style.text.to_owned()) .aligned() .contained() @@ -220,13 +220,13 @@ where title, style .title_text - .style_for(&mut MouseState::default(), false) + .style_for(&mut MouseState::default()) .clone(), )) .with_child( // FIXME: Get a better tag type MouseEventHandler::::new(999999, cx, |state, _cx| { - let style = style.close_icon.style_for(state, false); + let style = style.close_icon.style_for(state); icon(style) }) .on_click(platform::MouseButton::Left, move |_, _, cx| { diff --git a/crates/theme_selector/src/theme_selector.rs b/crates/theme_selector/src/theme_selector.rs index a6c84d1d91..5775f1b3e7 100644 --- a/crates/theme_selector/src/theme_selector.rs +++ b/crates/theme_selector/src/theme_selector.rs @@ -208,7 +208,7 @@ impl PickerDelegate for ThemeSelectorDelegate { cx: &AppContext, ) -> AnyElement> { let theme = theme::current(cx); - let style = theme.picker.item.style_for(mouse_state, selected); + let style = theme.picker.item.in_state(selected).style_for(mouse_state); let theme_match = &self.matches[ix]; Label::new(theme_match.string.clone(), style.label.clone()) diff --git a/crates/welcome/src/base_keymap_picker.rs b/crates/welcome/src/base_keymap_picker.rs index e44b391d84..cf24a9127e 100644 --- a/crates/welcome/src/base_keymap_picker.rs +++ b/crates/welcome/src/base_keymap_picker.rs @@ -141,7 +141,7 @@ impl PickerDelegate for BaseKeymapSelectorDelegate { ) -> gpui::AnyElement> { let theme = &theme::current(cx); let keymap_match = &self.matches[ix]; - let style = theme.picker.item.style_for(mouse_state, selected); + let style = theme.picker.item.in_state(selected).style_for(mouse_state); Label::new(keymap_match.string.clone(), style.label.clone()) .with_highlights(keymap_match.positions.clone()) diff --git a/crates/workspace/src/dock.rs b/crates/workspace/src/dock.rs index c174b8d3a5..376fb85b21 100644 --- a/crates/workspace/src/dock.rs +++ b/crates/workspace/src/dock.rs @@ -6,7 +6,7 @@ use gpui::{ }; use serde::Deserialize; use std::rc::Rc; -use theme::ThemeSettings; +use theme::{ThemeSettings, ToggleState}; pub trait Panel: View { fn position(&self, cx: &WindowContext) -> DockPosition; @@ -498,7 +498,14 @@ impl View for PanelButtons { Stack::new() .with_child( MouseEventHandler::::new(panel_ix, cx, |state, cx| { - let style = button_style.style_for(state, is_active); + let toggle_state = if is_active { + ToggleState::On + } else { + ToggleState::Off + }; + let style = button_style.in_state(toggle_state); + + let style = style.style_for(state); Flex::row() .with_child( Svg::new(view.icon_path(cx)) diff --git a/crates/workspace/src/notifications.rs b/crates/workspace/src/notifications.rs index 1e3c6044a1..09cfb4d5d8 100644 --- a/crates/workspace/src/notifications.rs +++ b/crates/workspace/src/notifications.rs @@ -291,7 +291,7 @@ pub mod simple_message_notification { ) .with_child( MouseEventHandler::::new(0, cx, |state, _| { - let style = theme.dismiss_button.style_for(state, false); + let style = theme.dismiss_button.style_for(state); Svg::new("icons/x_mark_8.svg") .with_color(style.color) .constrained() @@ -323,7 +323,7 @@ pub mod simple_message_notification { 0, cx, |state, _| { - let style = theme.action_message.style_for(state, false); + let style = theme.action_message.style_for(state); Flex::row() .with_child( diff --git a/crates/workspace/src/pane.rs b/crates/workspace/src/pane.rs index 551bc831d3..5136db1d18 100644 --- a/crates/workspace/src/pane.rs +++ b/crates/workspace/src/pane.rs @@ -1410,7 +1410,7 @@ impl Pane { pub fn render_tab_bar_button)>( index: usize, icon: &'static str, - active: bool, + is_active: bool, tooltip: Option<(String, Option>)>, cx: &mut ViewContext, on_click: F, @@ -1420,7 +1420,7 @@ impl Pane { let mut button = MouseEventHandler::::new(index, cx, |mouse_state, cx| { let theme = &settings::get::(cx).theme.workspace.tab_bar; - let style = theme.pane_button.style_for(mouse_state, active); + let style = theme.pane_button.in_state(is_active).style_for(mouse_state); Svg::new(icon) .with_color(style.color) .constrained() diff --git a/crates/workspace/src/toolbar.rs b/crates/workspace/src/toolbar.rs index 8b26b1181b..59f39f1d93 100644 --- a/crates/workspace/src/toolbar.rs +++ b/crates/workspace/src/toolbar.rs @@ -219,7 +219,7 @@ impl View for Toolbar { #[allow(clippy::too_many_arguments)] fn nav_button)>( svg_path: &'static str, - style: theme::Interactive, + style: theme::Toggleable>, nav_button_height: f32, tooltip_style: TooltipStyle, enabled: bool, @@ -231,9 +231,9 @@ fn nav_button ) -> AnyElement { MouseEventHandler::::new(0, cx, |state, _| { let style = if enabled { - style.style_for(state, false) + style.off_state().style_for(state) } else { - style.disabled_style() + style.off_state().disabled_style() }; Svg::new(svg_path) .with_color(style.color) From 0256f89dd66c693523d8fa19aefa5cdd7ddd34b2 Mon Sep 17 00:00:00 2001 From: Piotr Osiewicz <24362066+osiewicz@users.noreply.github.com> Date: Wed, 14 Jun 2023 15:12:38 +0200 Subject: [PATCH 26/56] Rename on/off states to active/inactive --- crates/collab_ui/src/collab_titlebar_item.rs | 11 +++++-- crates/collab_ui/src/contact_list.rs | 4 +-- crates/context_menu/src/context_menu.rs | 12 +++---- crates/project_panel/src/project_panel.rs | 8 +++-- crates/project_symbols/src/project_symbols.rs | 5 ++- crates/search/src/buffer_search.rs | 2 +- crates/search/src/project_search.rs | 2 +- crates/theme/src/theme.rs | 31 ++++++++++--------- crates/workspace/src/dock.rs | 4 +-- crates/workspace/src/toolbar.rs | 4 +-- 10 files changed, 47 insertions(+), 36 deletions(-) diff --git a/crates/collab_ui/src/collab_titlebar_item.rs b/crates/collab_ui/src/collab_titlebar_item.rs index aa643f4416..cf699d1988 100644 --- a/crates/collab_ui/src/collab_titlebar_item.rs +++ b/crates/collab_ui/src/collab_titlebar_item.rs @@ -299,7 +299,12 @@ impl CollabTitlebarItem { pub fn toggle_user_menu(&mut self, _: &ToggleUserMenu, cx: &mut ViewContext) { let theme = theme::current(cx).clone(); let avatar_style = theme.workspace.titlebar.leader_avatar.clone(); - let item_style = theme.context_menu.item.off_state().disabled_style().clone(); + let item_style = theme + .context_menu + .item + .inactive_state() + .disabled_style() + .clone(); self.user_menu.update(cx, |user_menu, cx| { let items = if let Some(user) = self.user_store.read(cx).current_user() { vec![ @@ -364,14 +369,14 @@ impl CollabTitlebarItem { .with_margin_left( titlebar .toggle_contacts_button - .off_state() + .inactive_state() .default .icon_width, ) .with_margin_top( titlebar .toggle_contacts_button - .off_state() + .inactive_state() .default .icon_width, ) diff --git a/crates/collab_ui/src/contact_list.rs b/crates/collab_ui/src/contact_list.rs index c0839249f2..0c8b27a151 100644 --- a/crates/collab_ui/src/contact_list.rs +++ b/crates/collab_ui/src/contact_list.rs @@ -798,7 +798,7 @@ impl ContactList { .width .or(theme.contact_avatar.height) .unwrap_or(0.); - let row = &theme.project_row.off_state().default; + let row = &theme.project_row.inactive_state().default; let tree_branch = theme.tree_branch; let line_height = row.name.text.line_height(font_cache); let cap_height = row.name.text.cap_height(font_cache); @@ -897,7 +897,7 @@ impl ContactList { .width .or(theme.contact_avatar.height) .unwrap_or(0.); - let row = &theme.project_row.off_state().default; + let row = &theme.project_row.inactive_state().default; let tree_branch = theme.tree_branch; let line_height = row.name.text.line_height(font_cache); let cap_height = row.name.text.cap_height(font_cache); diff --git a/crates/context_menu/src/context_menu.rs b/crates/context_menu/src/context_menu.rs index e9ab24f06e..e140177c5c 100644 --- a/crates/context_menu/src/context_menu.rs +++ b/crates/context_menu/src/context_menu.rs @@ -330,9 +330,9 @@ impl ContextMenu { match item { ContextMenuItem::Item { label, .. } => { let toggle_state = if Some(ix) == self.selected_index { - ToggleState::On + ToggleState::Active } else { - ToggleState::Off + ToggleState::Inactive }; let style = style.item.in_state(toggle_state); let style = style.style_for(&mut Default::default()); @@ -368,9 +368,9 @@ impl ContextMenu { match item { ContextMenuItem::Item { action, .. } => { let toggle_state = if Some(ix) == self.selected_index { - ToggleState::On + ToggleState::Active } else { - ToggleState::Off + ToggleState::Inactive }; let style = style.item.in_state(toggle_state); let style = style.style_for(&mut Default::default()); @@ -420,9 +420,9 @@ impl ContextMenu { let view_id = self.parent_view_id; MouseEventHandler::::new(ix, cx, |state, _| { let toggle_state = if Some(ix) == self.selected_index { - ToggleState::On + ToggleState::Active } else { - ToggleState::Off + ToggleState::Inactive }; let style = style.item.in_state(toggle_state); let style = style.style_for(state); diff --git a/crates/project_panel/src/project_panel.rs b/crates/project_panel/src/project_panel.rs index a4ac8a5743..dc592b7588 100644 --- a/crates/project_panel/src/project_panel.rs +++ b/crates/project_panel/src/project_panel.rs @@ -1267,7 +1267,7 @@ impl ProjectPanel { .filter(|destination| details.path.starts_with(destination)) .is_some() { - style = entry_style.on_state().default.clone(); + style = entry_style.active_state().default.clone(); } let row_container_style = if show_editor { @@ -1409,8 +1409,10 @@ impl View for ProjectPanel { let context_menu_item_style = theme::current(cx).context_menu.item.clone(); move |state, cx| { let button_style = button_style.style_for(state).clone(); - let context_menu_item = - context_menu_item_style.on_state().style_for(state).clone(); + let context_menu_item = context_menu_item_style + .active_state() + .style_for(state) + .clone(); theme::ui::keystroke_label( "Open a project", diff --git a/crates/project_symbols/src/project_symbols.rs b/crates/project_symbols/src/project_symbols.rs index dbfad48e87..fc17b57c6d 100644 --- a/crates/project_symbols/src/project_symbols.rs +++ b/crates/project_symbols/src/project_symbols.rs @@ -229,7 +229,10 @@ impl PickerDelegate for ProjectSymbolsDelegate { .with_child( // Avoid styling the path differently when it is selected, since // the symbol's syntax highlighting doesn't change when selected. - Label::new(path.to_string(), style.off_state().default.label.clone()), + Label::new( + path.to_string(), + style.inactive_state().default.label.clone(), + ), ) .contained() .with_style(current_style.container) diff --git a/crates/search/src/buffer_search.rs b/crates/search/src/buffer_search.rs index 1a059f5df7..c6a86b2f6a 100644 --- a/crates/search/src/buffer_search.rs +++ b/crates/search/src/buffer_search.rs @@ -375,7 +375,7 @@ impl BufferSearchBar { enum NavButton {} MouseEventHandler::::new(direction as usize, cx, |state, cx| { let theme = theme::current(cx); - let style = theme.search.option_button.off_state().style_for(state); + let style = theme.search.option_button.inactive_state().style_for(state); Label::new(icon, style.text.clone()) .contained() .with_style(style.container) diff --git a/crates/search/src/project_search.rs b/crates/search/src/project_search.rs index a379fa80e1..135194df6a 100644 --- a/crates/search/src/project_search.rs +++ b/crates/search/src/project_search.rs @@ -896,7 +896,7 @@ impl ProjectSearchBar { enum NavButton {} MouseEventHandler::::new(direction as usize, cx, |state, cx| { let theme = theme::current(cx); - let style = theme.search.option_button.off_state().style_for(state); + let style = theme.search.option_button.inactive_state().style_for(state); Label::new(icon, style.text.clone()) .contained() .with_style(style.container) diff --git a/crates/theme/src/theme.rs b/crates/theme/src/theme.rs index 812659078f..7c4c8c1ce2 100644 --- a/crates/theme/src/theme.rs +++ b/crates/theme/src/theme.rs @@ -812,40 +812,41 @@ pub struct Interactive { #[derive(Clone, Copy, Debug, Default, Deserialize)] pub struct Toggleable { - on: T, - off: T, + active: T, + inactive: T, } -#[derive(Copy, Clone, Debug, Hash, PartialEq, Eq)] +#[derive(Copy, Clone, Debug, Default, Hash, PartialEq, Eq)] pub enum ToggleState { - Off, - On, + #[default] + Inactive, + Active, } impl> From for ToggleState { fn from(item: T) -> Self { match *item.borrow() { - true => Self::On, - false => Self::Off, + true => Self::Active, + false => Self::Inactive, } } } impl Toggleable { - pub fn new(on: T, off: T) -> Self { - Self { on, off } + pub fn new(active: T, inactive: T) -> Self { + Self { active, inactive } } pub fn in_state(&self, state: impl Into) -> &T { match state.into() { - ToggleState::Off => &self.off, - ToggleState::On => &self.on, + ToggleState::Inactive => &self.inactive, + ToggleState::Active => &self.active, } } - pub fn on_state(&self) -> &T { - self.in_state(ToggleState::On) + pub fn active_state(&self) -> &T { + self.in_state(ToggleState::Active) } - pub fn off_state(&self) -> &T { - self.in_state(ToggleState::Off) + pub fn inactive_state(&self) -> &T { + self.in_state(ToggleState::Inactive) } } diff --git a/crates/workspace/src/dock.rs b/crates/workspace/src/dock.rs index 376fb85b21..ec00ddece8 100644 --- a/crates/workspace/src/dock.rs +++ b/crates/workspace/src/dock.rs @@ -499,9 +499,9 @@ impl View for PanelButtons { .with_child( MouseEventHandler::::new(panel_ix, cx, |state, cx| { let toggle_state = if is_active { - ToggleState::On + ToggleState::Active } else { - ToggleState::Off + ToggleState::Inactive }; let style = button_style.in_state(toggle_state); diff --git a/crates/workspace/src/toolbar.rs b/crates/workspace/src/toolbar.rs index 59f39f1d93..d74e7f046a 100644 --- a/crates/workspace/src/toolbar.rs +++ b/crates/workspace/src/toolbar.rs @@ -231,9 +231,9 @@ fn nav_button ) -> AnyElement { MouseEventHandler::::new(0, cx, |state, _| { let style = if enabled { - style.off_state().style_for(state) + style.inactive_state().style_for(state) } else { - style.off_state().disabled_style() + style.inactive_state().disabled_style() }; Svg::new(svg_path) .with_color(style.color) From b9959ffdc0811e01fb6b87a18c3f61741000bce0 Mon Sep 17 00:00:00 2001 From: Piotr Osiewicz <24362066+osiewicz@users.noreply.github.com> Date: Wed, 14 Jun 2023 17:26:47 +0200 Subject: [PATCH 27/56] Do not flatten Interactive::default --- crates/theme/src/theme.rs | 1 - 1 file changed, 1 deletion(-) diff --git a/crates/theme/src/theme.rs b/crates/theme/src/theme.rs index 7c4c8c1ce2..a82bb18cf1 100644 --- a/crates/theme/src/theme.rs +++ b/crates/theme/src/theme.rs @@ -872,7 +872,6 @@ impl<'de, T: DeserializeOwned> Deserialize<'de> for Interactive { { #[derive(Deserialize)] struct Helper { - #[serde(flatten)] default: Value, hover: Option, clicked: Option, From c47d1e9f5178d1a14122405f0872e305c6da562e Mon Sep 17 00:00:00 2001 From: Piotr Osiewicz <24362066+osiewicz@users.noreply.github.com> Date: Wed, 14 Jun 2023 17:26:58 +0200 Subject: [PATCH 28/56] Add toggle.ts and interactive.ts --- styles/src/styleTree/interactive.ts | 26 ++++++++++++++++++++++++++ styles/src/styleTree/toggle.ts | 17 +++++++++++++++++ 2 files changed, 43 insertions(+) create mode 100644 styles/src/styleTree/interactive.ts create mode 100644 styles/src/styleTree/toggle.ts diff --git a/styles/src/styleTree/interactive.ts b/styles/src/styleTree/interactive.ts new file mode 100644 index 0000000000..2f7181900c --- /dev/null +++ b/styles/src/styleTree/interactive.ts @@ -0,0 +1,26 @@ +interface Interactive { + default: T, + hover?: T, + clicked?: T, + disabled?: T, +} + +export function interactive(base: T, modifications: Partial>): Interactive { + const interactiveObj: Interactive = { + default: base, + }; + + if (modifications.hover !== undefined) { + interactiveObj.hover = { ...base, ...modifications.hover }; + } + + if (modifications.clicked !== undefined) { + interactiveObj.clicked = { ...base, ...modifications.clicked }; + } + + if (modifications.disabled !== undefined) { + interactiveObj.disabled = { ...base, ...modifications.disabled }; + } + + return interactiveObj; +} diff --git a/styles/src/styleTree/toggle.ts b/styles/src/styleTree/toggle.ts new file mode 100644 index 0000000000..0602ae6b59 --- /dev/null +++ b/styles/src/styleTree/toggle.ts @@ -0,0 +1,17 @@ +interface Toggleable { + inactive: T + active: T, +} + +export function toggleable(inactive: T, modifications: Partial>): Toggleable { + let active: T = inactive; + if (modifications.active !== undefined) { + active = { ...inactive, ...modifications.active }; + } + return { + inactive: inactive, + active: active + }; + + d +} From 198a446b03a168fc96f68f8de2e0ebf96068c1ac Mon Sep 17 00:00:00 2001 From: Piotr Osiewicz <24362066+osiewicz@users.noreply.github.com> Date: Thu, 15 Jun 2023 13:09:22 +0200 Subject: [PATCH 29/56] Implement Toggleable and Interactive properly --- styles/package-lock.json | 30 ++++++++++++++- styles/package.json | 4 +- styles/src/styleTree/commandPalette.ts | 53 +++++++++++++++----------- styles/src/styleTree/interactive.ts | 19 ++++++--- styles/src/styleTree/toggle.ts | 40 +++++++++++++------ 5 files changed, 104 insertions(+), 42 deletions(-) diff --git a/styles/package-lock.json b/styles/package-lock.json index d1d0ed0eb8..b4bdd52c66 100644 --- a/styles/package-lock.json +++ b/styles/package-lock.json @@ -18,7 +18,9 @@ "chroma-js": "^2.4.2", "deepmerge": "^4.3.0", "toml": "^3.0.0", - "ts-node": "^10.9.1" + "ts-deepmerge": "^6.0.3", + "ts-node": "^10.9.1", + "utility-types": "^3.10.0" } }, "node_modules/@cspotcode/source-map-support": { @@ -180,6 +182,14 @@ "resolved": "https://registry.npmjs.org/toml/-/toml-3.0.0.tgz", "integrity": "sha512-y/mWCZinnvxjTKYhJ+pYxwD0mRLVvOtdS2Awbgxln6iEnt4rk0yBxeSBHkGJcPucRiG0e55mwWp+g/05rsrd6w==" }, + "node_modules/ts-deepmerge": { + "version": "6.0.3", + "resolved": "https://registry.npmjs.org/ts-deepmerge/-/ts-deepmerge-6.0.3.tgz", + "integrity": "sha512-MBBJL0UK/mMnZRONMz4J1CRu5NsGtsh+gR1nkn8KLE9LXo/PCzeHhQduhNary8m5/m9ryOOyFwVKxq81cPlaow==", + "engines": { + "node": ">=14.13.1" + } + }, "node_modules/ts-node": { "version": "10.9.1", "resolved": "https://registry.npmjs.org/ts-node/-/ts-node-10.9.1.tgz", @@ -235,6 +245,14 @@ "node": ">=4.2.0" } }, + "node_modules/utility-types": { + "version": "3.10.0", + "resolved": "https://registry.npmjs.org/utility-types/-/utility-types-3.10.0.tgz", + "integrity": "sha512-O11mqxmi7wMKCo6HKFt5AhO4BwY3VV68YU07tgxfz8zJTIxr4BpsezN49Ffwy9j3ZpwwJp4fkRwjRzq3uWE6Rg==", + "engines": { + "node": ">= 4" + } + }, "node_modules/v8-compile-cache-lib": { "version": "3.0.1", "resolved": "https://registry.npmjs.org/v8-compile-cache-lib/-/v8-compile-cache-lib-3.0.1.tgz", @@ -382,6 +400,11 @@ "resolved": "https://registry.npmjs.org/toml/-/toml-3.0.0.tgz", "integrity": "sha512-y/mWCZinnvxjTKYhJ+pYxwD0mRLVvOtdS2Awbgxln6iEnt4rk0yBxeSBHkGJcPucRiG0e55mwWp+g/05rsrd6w==" }, + "ts-deepmerge": { + "version": "6.0.3", + "resolved": "https://registry.npmjs.org/ts-deepmerge/-/ts-deepmerge-6.0.3.tgz", + "integrity": "sha512-MBBJL0UK/mMnZRONMz4J1CRu5NsGtsh+gR1nkn8KLE9LXo/PCzeHhQduhNary8m5/m9ryOOyFwVKxq81cPlaow==" + }, "ts-node": { "version": "10.9.1", "resolved": "https://registry.npmjs.org/ts-node/-/ts-node-10.9.1.tgz", @@ -408,6 +431,11 @@ "integrity": "sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==", "peer": true }, + "utility-types": { + "version": "3.10.0", + "resolved": "https://registry.npmjs.org/utility-types/-/utility-types-3.10.0.tgz", + "integrity": "sha512-O11mqxmi7wMKCo6HKFt5AhO4BwY3VV68YU07tgxfz8zJTIxr4BpsezN49Ffwy9j3ZpwwJp4fkRwjRzq3uWE6Rg==" + }, "v8-compile-cache-lib": { "version": "3.0.1", "resolved": "https://registry.npmjs.org/v8-compile-cache-lib/-/v8-compile-cache-lib-3.0.1.tgz", diff --git a/styles/package.json b/styles/package.json index 2a0881863b..30336d5c51 100644 --- a/styles/package.json +++ b/styles/package.json @@ -20,7 +20,9 @@ "chroma-js": "^2.4.2", "deepmerge": "^4.3.0", "toml": "^3.0.0", - "ts-node": "^10.9.1" + "ts-deepmerge": "^6.0.3", + "ts-node": "^10.9.1", + "utility-types": "^3.10.0" }, "prettier": { "semi": false, diff --git a/styles/src/styleTree/commandPalette.ts b/styles/src/styleTree/commandPalette.ts index c49e1f194c..5fe7b74f92 100644 --- a/styles/src/styleTree/commandPalette.ts +++ b/styles/src/styleTree/commandPalette.ts @@ -1,30 +1,37 @@ import { ColorScheme } from "../theme/colorScheme" import { withOpacity } from "../theme/color" import { text, background } from "./components" +import { toggleable } from "./toggle" +import { interactive } from "./interactive" export default function commandPalette(colorScheme: ColorScheme) { - let layer = colorScheme.highest - return { - keystrokeSpacing: 8, - key: { - text: text(layer, "mono", "variant", "default", { size: "xs" }), - cornerRadius: 2, - background: background(layer, "on"), - padding: { - top: 1, - bottom: 1, - left: 6, - right: 6, - }, - margin: { - top: 1, - bottom: 1, - left: 2, - }, - active: { - text: text(layer, "mono", "on", "default", { size: "xs" }), - background: withOpacity(background(layer, "on"), 0.2), - }, + let layer = colorScheme.highest + return { + keystrokeSpacing: 8, + key: + toggleable(interactive({ + text: text(layer, "mono", "variant", "default", { size: "xs" }), + cornerRadius: 2, + background: background(layer, "on"), + padding: { + top: 1, + bottom: 1, + left: 6, + right: 6, }, - } + margin: { + top: 1, + bottom: 1, + left: 2, + }, + }, { hover: { cornerRadius: 4, padding: { top: 17 } } }), { + default: { + text: text(layer, "mono", "on", "default", { size: "xs" }), + background: withOpacity(background(layer, "on"), 0.2), + } + + }) + , + + } } diff --git a/styles/src/styleTree/interactive.ts b/styles/src/styleTree/interactive.ts index 2f7181900c..7135cecd90 100644 --- a/styles/src/styleTree/interactive.ts +++ b/styles/src/styleTree/interactive.ts @@ -1,3 +1,5 @@ +import { DeepPartial } from "utility-types"; +import merge from "ts-deepmerge" interface Interactive { default: T, hover?: T, @@ -5,21 +7,26 @@ interface Interactive { disabled?: T, } -export function interactive(base: T, modifications: Partial>): Interactive { - const interactiveObj: Interactive = { +// Helper function for creating Interactive objects that works pretty much like Toggle. +// It takes a object to be used as a value for `default` field and then fills out other fields +// with fields from either `base` or `modifications`. Notably, it does not touch `hover`, `clicked` and `disabled` if there are no modifications for it. +export function interactive(base: T, modifications: DeepPartial>): Interactive { + let interactiveObj: Interactive = { default: base, }; - + if (modifications.default !== undefined) { + interactiveObj.default = merge(interactiveObj.default, modifications.default) as T; + } if (modifications.hover !== undefined) { - interactiveObj.hover = { ...base, ...modifications.hover }; + interactiveObj.hover = merge(interactiveObj.default, modifications.hover) as T; } if (modifications.clicked !== undefined) { - interactiveObj.clicked = { ...base, ...modifications.clicked }; + interactiveObj.clicked = merge(interactiveObj.default, modifications.clicked) as T; } if (modifications.disabled !== undefined) { - interactiveObj.disabled = { ...base, ...modifications.disabled }; + interactiveObj.disabled = merge(interactiveObj.default, modifications.disabled) as T; } return interactiveObj; diff --git a/styles/src/styleTree/toggle.ts b/styles/src/styleTree/toggle.ts index 0602ae6b59..9c35b8337c 100644 --- a/styles/src/styleTree/toggle.ts +++ b/styles/src/styleTree/toggle.ts @@ -1,17 +1,35 @@ +import { DeepPartial } from 'utility-types'; +import merge from 'ts-deepmerge'; + interface Toggleable { inactive: T active: T, } -export function toggleable(inactive: T, modifications: Partial>): Toggleable { - let active: T = inactive; - if (modifications.active !== undefined) { - active = { ...inactive, ...modifications.active }; - } - return { - inactive: inactive, - active: active - }; - - d +/// Helper function for creating Toggleable objects; it takes a object of type T that is used as +/// `inactive` member of result Toggleable. `active` member is created by applying `modifications` on top of `inactive` argument. +// Thus, the following call: +// ``` +// toggleable({day: 1, month: "January"}, {day: 3}) +// ``` +// To return the following object: +// ``` +// Toggleable<_>{ +// inactive: { day: 1, month: "January" }, +// active: { day: 3, month: "January" } +// } +// ``` +// Remarkably, it also works for nested structures: +// ``` +// toggleable({first_level: "foo", second_level: {nested_member: "nested"}}, {second_level: {nested_member: "another nested thing"}}) +// ``` +// ``` +// Toggleable<_> { +// inactive: {first_level: "foo", second_level: {nested_member: "nested"}}, +// active: { first_level: "foo", second_level: {nested_member: "another nested thing"}} +// } +// ``` +export function toggleable(inactive: T, modifications: DeepPartial): Toggleable { + let active: T = merge(inactive, modifications) as T; + return { active: active, inactive: inactive }; } From 31c1177737501b742e3522a52a4045a6c718e279 Mon Sep 17 00:00:00 2001 From: Piotr Osiewicz <24362066+osiewicz@users.noreply.github.com> Date: Thu, 15 Jun 2023 16:24:05 +0200 Subject: [PATCH 30/56] Adjust some of the styles to the new Toggleable format --- crates/collab_ui/src/collab_titlebar_item.rs | 4 +- crates/theme/src/theme.rs | 8 +- crates/workspace/src/toolbar.rs | 6 +- styles/src/styleTree/components.ts | 436 ++++++------ styles/src/styleTree/contactList.ts | 360 +++++----- styles/src/styleTree/contactNotification.ts | 81 ++- styles/src/styleTree/contextMenu.ts | 91 +-- styles/src/styleTree/copilot.ts | 515 +++++++------- styles/src/styleTree/editor.ts | 537 +++++++-------- styles/src/styleTree/picker.ts | 154 ++--- styles/src/styleTree/projectPanel.ts | 208 +++--- styles/src/styleTree/statusBar.ts | 241 +++---- styles/src/styleTree/tabBar.ts | 191 +++--- styles/src/styleTree/welcome.ts | 240 +++---- styles/src/styleTree/workspace.ts | 668 ++++++++++--------- 15 files changed, 1932 insertions(+), 1808 deletions(-) diff --git a/crates/collab_ui/src/collab_titlebar_item.rs b/crates/collab_ui/src/collab_titlebar_item.rs index cf699d1988..04fc9650eb 100644 --- a/crates/collab_ui/src/collab_titlebar_item.rs +++ b/crates/collab_ui/src/collab_titlebar_item.rs @@ -491,7 +491,7 @@ impl CollabTitlebarItem { .with_child( MouseEventHandler::::new(0, cx, |state, _| { //TODO: Ensure this button has consistent width for both text variations - let style = titlebar.share_button.style_for(state); + let style = titlebar.share_button.inactive_state().style_for(state); Label::new(label, style.text.clone()) .contained() .with_style(style.container) @@ -567,7 +567,7 @@ impl CollabTitlebarItem { fn render_sign_in_button(&self, theme: &Theme, cx: &mut ViewContext) -> AnyElement { let titlebar = &theme.workspace.titlebar; MouseEventHandler::::new(0, cx, |state, _| { - let style = titlebar.sign_in_prompt.style_for(state); + let style = titlebar.sign_in_prompt.inactive_state().style_for(state); Label::new("Sign In", style.text.clone()) .contained() .with_style(style.container) diff --git a/crates/theme/src/theme.rs b/crates/theme/src/theme.rs index a82bb18cf1..fd30387ad8 100644 --- a/crates/theme/src/theme.rs +++ b/crates/theme/src/theme.rs @@ -128,12 +128,12 @@ pub struct Titlebar { pub leader_avatar: AvatarStyle, pub follower_avatar: AvatarStyle, pub inactive_avatar_grayscale: bool, - pub sign_in_prompt: Interactive, + pub sign_in_prompt: Toggleable>, pub outdated_warning: ContainedText, - pub share_button: Interactive, + pub share_button: Toggleable>, pub call_control: Interactive, pub toggle_contacts_button: Toggleable>, - pub user_menu_button: Interactive, + pub user_menu_button: Toggleable>, pub toggle_contacts_badge: ContainerStyle, } @@ -339,7 +339,7 @@ pub struct Toolbar { pub container: ContainerStyle, pub height: f32, pub item_spacing: f32, - pub nav_button: Toggleable>, + pub nav_button: Interactive, } #[derive(Clone, Deserialize, Default)] diff --git a/crates/workspace/src/toolbar.rs b/crates/workspace/src/toolbar.rs index d74e7f046a..49f9db12e6 100644 --- a/crates/workspace/src/toolbar.rs +++ b/crates/workspace/src/toolbar.rs @@ -219,7 +219,7 @@ impl View for Toolbar { #[allow(clippy::too_many_arguments)] fn nav_button)>( svg_path: &'static str, - style: theme::Toggleable>, + style: theme::Interactive, nav_button_height: f32, tooltip_style: TooltipStyle, enabled: bool, @@ -231,9 +231,9 @@ fn nav_button ) -> AnyElement { MouseEventHandler::::new(0, cx, |state, _| { let style = if enabled { - style.inactive_state().style_for(state) + style.style_for(state) } else { - style.inactive_state().disabled_style() + style.disabled_style() }; Svg::new(svg_path) .with_color(style.color) diff --git a/styles/src/styleTree/components.ts b/styles/src/styleTree/components.ts index a575dad527..3aa5d9176e 100644 --- a/styles/src/styleTree/components.ts +++ b/styles/src/styleTree/components.ts @@ -2,297 +2,297 @@ import { fontFamilies, fontSizes, FontWeight } from "../common" import { Layer, Styles, StyleSets, Style } from "../theme/colorScheme" function isStyleSet(key: any): key is StyleSets { - return [ - "base", - "variant", - "on", - "accent", - "positive", - "warning", - "negative", - ].includes(key) + return [ + "base", + "variant", + "on", + "accent", + "positive", + "warning", + "negative", + ].includes(key) } function isStyle(key: any): key is Styles { - return [ - "default", - "active", - "disabled", - "hovered", - "pressed", - "inverted", - ].includes(key) + return [ + "default", + "active", + "disabled", + "hovered", + "pressed", + "inverted", + ].includes(key) } function getStyle( - layer: Layer, - possibleStyleSetOrStyle?: any, - possibleStyle?: any + layer: Layer, + possibleStyleSetOrStyle?: any, + possibleStyle?: any ): Style { - let styleSet: StyleSets = "base" - let style: Styles = "default" - if (isStyleSet(possibleStyleSetOrStyle)) { - styleSet = possibleStyleSetOrStyle - } else if (isStyle(possibleStyleSetOrStyle)) { - style = possibleStyleSetOrStyle - } + let styleSet: StyleSets = "base" + let style: Styles = "default" + if (isStyleSet(possibleStyleSetOrStyle)) { + styleSet = possibleStyleSetOrStyle + } else if (isStyle(possibleStyleSetOrStyle)) { + style = possibleStyleSetOrStyle + } - if (isStyle(possibleStyle)) { - style = possibleStyle - } + if (isStyle(possibleStyle)) { + style = possibleStyle + } - return layer[styleSet][style] + return layer[styleSet][style] } export function background(layer: Layer, style?: Styles): string export function background( - layer: Layer, - styleSet?: StyleSets, - style?: Styles + layer: Layer, + styleSet?: StyleSets, + style?: Styles ): string export function background( - layer: Layer, - styleSetOrStyles?: StyleSets | Styles, - style?: Styles + layer: Layer, + styleSetOrStyles?: StyleSets | Styles, + style?: Styles ): string { - return getStyle(layer, styleSetOrStyles, style).background + return getStyle(layer, styleSetOrStyles, style).background } export function borderColor(layer: Layer, style?: Styles): string export function borderColor( - layer: Layer, - styleSet?: StyleSets, - style?: Styles + layer: Layer, + styleSet?: StyleSets, + style?: Styles ): string export function borderColor( - layer: Layer, - styleSetOrStyles?: StyleSets | Styles, - style?: Styles + layer: Layer, + styleSetOrStyles?: StyleSets | Styles, + style?: Styles ): string { - return getStyle(layer, styleSetOrStyles, style).border + return getStyle(layer, styleSetOrStyles, style).border } export function foreground(layer: Layer, style?: Styles): string export function foreground( - layer: Layer, - styleSet?: StyleSets, - style?: Styles + layer: Layer, + styleSet?: StyleSets, + style?: Styles ): string export function foreground( - layer: Layer, - styleSetOrStyles?: StyleSets | Styles, - style?: Styles + layer: Layer, + styleSetOrStyles?: StyleSets | Styles, + style?: Styles ): string { - return getStyle(layer, styleSetOrStyles, style).foreground + return getStyle(layer, styleSetOrStyles, style).foreground } -interface Text { - family: keyof typeof fontFamilies - color: string - size: number - weight?: FontWeight - underline?: boolean +interface Text extends Object { + family: keyof typeof fontFamilies + color: string + size: number + weight?: FontWeight + underline?: boolean } export interface TextProperties { - size?: keyof typeof fontSizes - weight?: FontWeight - underline?: boolean - color?: string - features?: FontFeatures + size?: keyof typeof fontSizes + weight?: FontWeight + underline?: boolean + color?: string + features?: FontFeatures } interface FontFeatures { - /** Contextual Alternates: Applies a second substitution feature based on a match of a character pattern within a context of surrounding patterns */ - calt?: boolean - /** Case-Sensitive Forms: Shifts various punctuation marks up to a position that works better with all-capital sequences */ - case?: boolean - /** Capital Spacing: Adjusts inter-glyph spacing for all-capital text */ - cpsp?: boolean - /** Fractions: Replaces figures separated by a slash with diagonal fractions */ - frac?: boolean - /** Standard Ligatures: Replaces a sequence of glyphs with a single glyph which is preferred for typographic purposes */ - liga?: boolean - /** Oldstyle Figures: Changes selected figures from the default or lining style to oldstyle form. */ - onum?: boolean - /** Ordinals: Replaces default alphabetic glyphs with the corresponding ordinal forms for use after figures */ - ordn?: boolean - /** Proportional Figures: Replaces figure glyphs set on uniform (tabular) widths with corresponding glyphs set on proportional widths */ - pnum?: boolean - /** Stylistic set 01 */ - ss01?: boolean - /** Stylistic set 02 */ - ss02?: boolean - /** Stylistic set 03 */ - ss03?: boolean - /** Stylistic set 04 */ - ss04?: boolean - /** Stylistic set 05 */ - ss05?: boolean - /** Stylistic set 06 */ - ss06?: boolean - /** Stylistic set 07 */ - ss07?: boolean - /** Stylistic set 08 */ - ss08?: boolean - /** Stylistic set 09 */ - ss09?: boolean - /** Stylistic set 10 */ - ss10?: boolean - /** Stylistic set 11 */ - ss11?: boolean - /** Stylistic set 12 */ - ss12?: boolean - /** Stylistic set 13 */ - ss13?: boolean - /** Stylistic set 14 */ - ss14?: boolean - /** Stylistic set 15 */ - ss15?: boolean - /** Stylistic set 16 */ - ss16?: boolean - /** Stylistic set 17 */ - ss17?: boolean - /** Stylistic set 18 */ - ss18?: boolean - /** Stylistic set 19 */ - ss19?: boolean - /** Stylistic set 20 */ - ss20?: boolean - /** Subscript: Replaces default glyphs with subscript glyphs */ - subs?: boolean - /** Superscript: Replaces default glyphs with superscript glyphs */ - sups?: boolean - /** Swash: Replaces default glyphs with swash glyphs for stylistic purposes */ - swsh?: boolean - /** Titling: Replaces default glyphs with titling glyphs for use in large-size settings */ - titl?: boolean - /** Tabular Figures: Replaces figure glyphs set on proportional widths with corresponding glyphs set on uniform (tabular) widths */ - tnum?: boolean - /** Slashed Zero: Replaces default zero with a slashed zero for better distinction between "0" and "O" */ - zero?: boolean + /** Contextual Alternates: Applies a second substitution feature based on a match of a character pattern within a context of surrounding patterns */ + calt?: boolean + /** Case-Sensitive Forms: Shifts various punctuation marks up to a position that works better with all-capital sequences */ + case?: boolean + /** Capital Spacing: Adjusts inter-glyph spacing for all-capital text */ + cpsp?: boolean + /** Fractions: Replaces figures separated by a slash with diagonal fractions */ + frac?: boolean + /** Standard Ligatures: Replaces a sequence of glyphs with a single glyph which is preferred for typographic purposes */ + liga?: boolean + /** Oldstyle Figures: Changes selected figures from the default or lining style to oldstyle form. */ + onum?: boolean + /** Ordinals: Replaces default alphabetic glyphs with the corresponding ordinal forms for use after figures */ + ordn?: boolean + /** Proportional Figures: Replaces figure glyphs set on uniform (tabular) widths with corresponding glyphs set on proportional widths */ + pnum?: boolean + /** Stylistic set 01 */ + ss01?: boolean + /** Stylistic set 02 */ + ss02?: boolean + /** Stylistic set 03 */ + ss03?: boolean + /** Stylistic set 04 */ + ss04?: boolean + /** Stylistic set 05 */ + ss05?: boolean + /** Stylistic set 06 */ + ss06?: boolean + /** Stylistic set 07 */ + ss07?: boolean + /** Stylistic set 08 */ + ss08?: boolean + /** Stylistic set 09 */ + ss09?: boolean + /** Stylistic set 10 */ + ss10?: boolean + /** Stylistic set 11 */ + ss11?: boolean + /** Stylistic set 12 */ + ss12?: boolean + /** Stylistic set 13 */ + ss13?: boolean + /** Stylistic set 14 */ + ss14?: boolean + /** Stylistic set 15 */ + ss15?: boolean + /** Stylistic set 16 */ + ss16?: boolean + /** Stylistic set 17 */ + ss17?: boolean + /** Stylistic set 18 */ + ss18?: boolean + /** Stylistic set 19 */ + ss19?: boolean + /** Stylistic set 20 */ + ss20?: boolean + /** Subscript: Replaces default glyphs with subscript glyphs */ + subs?: boolean + /** Superscript: Replaces default glyphs with superscript glyphs */ + sups?: boolean + /** Swash: Replaces default glyphs with swash glyphs for stylistic purposes */ + swsh?: boolean + /** Titling: Replaces default glyphs with titling glyphs for use in large-size settings */ + titl?: boolean + /** Tabular Figures: Replaces figure glyphs set on proportional widths with corresponding glyphs set on uniform (tabular) widths */ + tnum?: boolean + /** Slashed Zero: Replaces default zero with a slashed zero for better distinction between "0" and "O" */ + zero?: boolean } export function text( - layer: Layer, - fontFamily: keyof typeof fontFamilies, - styleSet: StyleSets, - style: Styles, - properties?: TextProperties + layer: Layer, + fontFamily: keyof typeof fontFamilies, + styleSet: StyleSets, + style: Styles, + properties?: TextProperties ): Text export function text( - layer: Layer, - fontFamily: keyof typeof fontFamilies, - styleSet: StyleSets, - properties?: TextProperties + layer: Layer, + fontFamily: keyof typeof fontFamilies, + styleSet: StyleSets, + properties?: TextProperties ): Text export function text( - layer: Layer, - fontFamily: keyof typeof fontFamilies, - style: Styles, - properties?: TextProperties + layer: Layer, + fontFamily: keyof typeof fontFamilies, + style: Styles, + properties?: TextProperties ): Text export function text( - layer: Layer, - fontFamily: keyof typeof fontFamilies, - properties?: TextProperties + layer: Layer, + fontFamily: keyof typeof fontFamilies, + properties?: TextProperties ): Text export function text( - layer: Layer, - fontFamily: keyof typeof fontFamilies, - styleSetStyleOrProperties?: StyleSets | Styles | TextProperties, - styleOrProperties?: Styles | TextProperties, - properties?: TextProperties + layer: Layer, + fontFamily: keyof typeof fontFamilies, + styleSetStyleOrProperties?: StyleSets | Styles | TextProperties, + styleOrProperties?: Styles | TextProperties, + properties?: TextProperties ) { - let style = getStyle(layer, styleSetStyleOrProperties, styleOrProperties) + let style = getStyle(layer, styleSetStyleOrProperties, styleOrProperties) - if (typeof styleSetStyleOrProperties === "object") { - properties = styleSetStyleOrProperties - } - if (typeof styleOrProperties === "object") { - properties = styleOrProperties - } + if (typeof styleSetStyleOrProperties === "object") { + properties = styleSetStyleOrProperties + } + if (typeof styleOrProperties === "object") { + properties = styleOrProperties + } - let size = fontSizes[properties?.size || "sm"] - let color = properties?.color || style.foreground + let size = fontSizes[properties?.size || "sm"] + let color = properties?.color || style.foreground - return { - family: fontFamilies[fontFamily], - ...properties, - color, - size, - } + return { + family: fontFamilies[fontFamily], + ...properties, + color, + size, + } } export interface Border { - color: string - width: number - top?: boolean - bottom?: boolean - left?: boolean - right?: boolean - overlay?: boolean + color: string + width: number + top?: boolean + bottom?: boolean + left?: boolean + right?: boolean + overlay?: boolean } export interface BorderProperties { - width?: number - top?: boolean - bottom?: boolean - left?: boolean - right?: boolean - overlay?: boolean + width?: number + top?: boolean + bottom?: boolean + left?: boolean + right?: boolean + overlay?: boolean } export function border( - layer: Layer, - styleSet: StyleSets, - style: Styles, - properties?: BorderProperties + layer: Layer, + styleSet: StyleSets, + style: Styles, + properties?: BorderProperties ): Border export function border( - layer: Layer, - styleSet: StyleSets, - properties?: BorderProperties + layer: Layer, + styleSet: StyleSets, + properties?: BorderProperties ): Border export function border( - layer: Layer, - style: Styles, - properties?: BorderProperties + layer: Layer, + style: Styles, + properties?: BorderProperties ): Border export function border(layer: Layer, properties?: BorderProperties): Border export function border( - layer: Layer, - styleSetStyleOrProperties?: StyleSets | Styles | BorderProperties, - styleOrProperties?: Styles | BorderProperties, - properties?: BorderProperties + layer: Layer, + styleSetStyleOrProperties?: StyleSets | Styles | BorderProperties, + styleOrProperties?: Styles | BorderProperties, + properties?: BorderProperties ): Border { - let style = getStyle(layer, styleSetStyleOrProperties, styleOrProperties) + let style = getStyle(layer, styleSetStyleOrProperties, styleOrProperties) - if (typeof styleSetStyleOrProperties === "object") { - properties = styleSetStyleOrProperties - } - if (typeof styleOrProperties === "object") { - properties = styleOrProperties - } + if (typeof styleSetStyleOrProperties === "object") { + properties = styleSetStyleOrProperties + } + if (typeof styleOrProperties === "object") { + properties = styleOrProperties + } - return { - color: style.border, - width: 1, - ...properties, - } + return { + color: style.border, + width: 1, + ...properties, + } } export function svg( - color: string, - asset: String, - width: Number, - height: Number + color: string, + asset: String, + width: Number, + height: Number ) { - return { - color, - asset, - dimensions: { - width, - height, - }, - } + return { + color, + asset, + dimensions: { + width, + height, + }, + } } diff --git a/styles/src/styleTree/contactList.ts b/styles/src/styleTree/contactList.ts index a597e44d9f..b3e30f4aa7 100644 --- a/styles/src/styleTree/contactList.ts +++ b/styles/src/styleTree/contactList.ts @@ -1,182 +1,206 @@ import { ColorScheme } from "../theme/colorScheme" import { background, border, borderColor, foreground, text } from "./components" - +import { toggleable } from "./toggle" +import { interactive } from "./interactive" export default function contactsPanel(colorScheme: ColorScheme) { - const nameMargin = 8 - const sidePadding = 12 + const nameMargin = 8 + const sidePadding = 12 - let layer = colorScheme.middle + let layer = colorScheme.middle - const contactButton = { - background: background(layer, "on"), - color: foreground(layer, "on"), - iconWidth: 8, - buttonWidth: 16, - cornerRadius: 8, - } - const projectRow = { - guestAvatarSpacing: 4, - height: 24, - guestAvatar: { - cornerRadius: 8, - width: 14, + const contactButton = { + background: background(layer, "on"), + color: foreground(layer, "on"), + iconWidth: 8, + buttonWidth: 16, + cornerRadius: 8, + } + const projectRow = { + guestAvatarSpacing: 4, + height: 24, + guestAvatar: { + cornerRadius: 8, + width: 14, + }, + name: { + ...text(layer, "mono", { size: "sm" }), + margin: { + left: nameMargin, + right: 6, + }, + }, + guests: { + margin: { + left: nameMargin, + right: nameMargin, + }, + }, + padding: { + left: sidePadding, + right: sidePadding, + }, + } + + return { + background: background(layer), + padding: { top: 12 }, + userQueryEditor: { + background: background(layer, "on"), + cornerRadius: 6, + text: text(layer, "mono", "on"), + placeholderText: text(layer, "mono", "on", "disabled", { + size: "xs", + }), + selection: colorScheme.players[0], + border: border(layer, "on"), + padding: { + bottom: 4, + left: 8, + right: 8, + top: 4, + }, + margin: { + left: 6, + }, + }, + userQueryEditorHeight: 33, + addContactButton: { + margin: { left: 6, right: 12 }, + color: foreground(layer, "on"), + buttonWidth: 28, + iconWidth: 16, + }, + rowHeight: 28, + sectionIconSize: 8, + headerRow: toggleable(interactive({ + ...text(layer, "mono", { size: "sm" }), + margin: { top: 14 }, + padding: { + left: sidePadding, + right: sidePadding, + }, + background: background(layer, "default"),// posiewic: breaking change + }, {}), + { + default: { + ...text(layer, "mono", "active", { size: "sm" }), + background: background(layer, "active"), }, - name: { - ...text(layer, "mono", { size: "sm" }), - margin: { - left: nameMargin, - right: 6, - }, - }, - guests: { - margin: { - left: nameMargin, - right: nameMargin, - }, - }, - padding: { + }), + leaveCall: interactive({ + background: background(layer), + border: border(layer), + cornerRadius: 6, + margin: { + top: 1, + }, + padding: { + top: 1, + bottom: 1, + left: 7, + right: 7, + }, + ...text(layer, "sans", "variant", { size: "xs" }), + }, + { + hover: { + ...text(layer, "sans", "hovered", { size: "xs" }), + background: background(layer, "hovered"), + border: border(layer, "hovered"), + } + } + ), + contactRow: { + inactive: { + default: { + padding: { left: sidePadding, right: sidePadding, + } }, - } + }, + active: { + default: { + background: background(layer, "active"), + padding: { + left: sidePadding, + right: sidePadding, + } + } + }, + }, - return { - background: background(layer), - padding: { top: 12 }, - userQueryEditor: { - background: background(layer, "on"), - cornerRadius: 6, - text: text(layer, "mono", "on"), - placeholderText: text(layer, "mono", "on", "disabled", { - size: "xs", - }), - selection: colorScheme.players[0], - border: border(layer, "on"), - padding: { - bottom: 4, - left: 8, - right: 8, - top: 4, - }, - margin: { - left: 6, - }, + contactAvatar: { + cornerRadius: 10, + width: 18, + }, + contactStatusFree: { + cornerRadius: 4, + padding: 4, + margin: { top: 12, left: 12 }, + background: foreground(layer, "positive"), + }, + contactStatusBusy: { + cornerRadius: 4, + padding: 4, + margin: { top: 12, left: 12 }, + background: foreground(layer, "negative"), + }, + contactUsername: { + ...text(layer, "mono", { size: "sm" }), + margin: { + left: nameMargin, + }, + }, + contactButtonSpacing: nameMargin, + contactButton: interactive( + contactButton, + { + hover: { + background: background(layer, "hovered"), }, - userQueryEditorHeight: 33, - addContactButton: { - margin: { left: 6, right: 12 }, - color: foreground(layer, "on"), - buttonWidth: 28, - iconWidth: 16, + }), + disabledButton: { + ...contactButton, + background: background(layer, "on"), + color: foreground(layer, "on"), + }, + callingIndicator: { + ...text(layer, "mono", "variant", { size: "xs" }), + }, + treeBranch: toggleable(interactive({ + color: borderColor(layer), + width: 1, + }, + { + hover: { + color: borderColor(layer), }, - rowHeight: 28, - sectionIconSize: 8, - headerRow: { - ...text(layer, "mono", { size: "sm" }), - margin: { top: 14 }, - padding: { - left: sidePadding, - right: sidePadding, - }, - active: { - ...text(layer, "mono", "active", { size: "sm" }), - background: background(layer, "active"), - }, + }), + { + default: { + color: borderColor(layer), }, - leaveCall: { - background: background(layer), - border: border(layer), - cornerRadius: 6, - margin: { - top: 1, - }, - padding: { - top: 1, - bottom: 1, - left: 7, - right: 7, - }, - ...text(layer, "sans", "variant", { size: "xs" }), - hover: { - ...text(layer, "sans", "hovered", { size: "xs" }), - background: background(layer, "hovered"), - border: border(layer, "hovered"), - }, - }, - contactRow: { - padding: { - left: sidePadding, - right: sidePadding, - }, - active: { - background: background(layer, "active"), - }, - }, - contactAvatar: { - cornerRadius: 10, - width: 18, - }, - contactStatusFree: { - cornerRadius: 4, - padding: 4, - margin: { top: 12, left: 12 }, - background: foreground(layer, "positive"), - }, - contactStatusBusy: { - cornerRadius: 4, - padding: 4, - margin: { top: 12, left: 12 }, - background: foreground(layer, "negative"), - }, - contactUsername: { - ...text(layer, "mono", { size: "sm" }), - margin: { - left: nameMargin, - }, - }, - contactButtonSpacing: nameMargin, - contactButton: { - ...contactButton, - hover: { - background: background(layer, "hovered"), - }, - }, - disabledButton: { - ...contactButton, - background: background(layer, "on"), - color: foreground(layer, "on"), - }, - callingIndicator: { - ...text(layer, "mono", "variant", { size: "xs" }), - }, - treeBranch: { - color: borderColor(layer), - width: 1, - hover: { - color: borderColor(layer), - }, - active: { - color: borderColor(layer), - }, - }, - projectRow: { - ...projectRow, - background: background(layer), - icon: { - margin: { left: nameMargin }, - color: foreground(layer, "variant"), - width: 12, - }, - name: { - ...projectRow.name, - ...text(layer, "mono", { size: "sm" }), - }, - hover: { - background: background(layer, "hovered"), - }, - active: { - background: background(layer, "active"), - }, - }, - } + } + ), + projectRow: { + ...projectRow, + background: background(layer), + icon: { + margin: { left: nameMargin }, + color: foreground(layer, "variant"), + width: 12, + }, + name: { + ...projectRow.name, + ...text(layer, "mono", { size: "sm" }), + }, + hover: { + background: background(layer, "hovered"), + }, + active: { + background: background(layer, "active"), + }, + }, + } } diff --git a/styles/src/styleTree/contactNotification.ts b/styles/src/styleTree/contactNotification.ts index 85a0b9d0de..edef8dac20 100644 --- a/styles/src/styleTree/contactNotification.ts +++ b/styles/src/styleTree/contactNotification.ts @@ -1,45 +1,52 @@ import { ColorScheme } from "../theme/colorScheme" import { background, foreground, text } from "./components" - +import { interactive } from "./interactive" const avatarSize = 12 const headerPadding = 8 export default function contactNotification(colorScheme: ColorScheme): Object { - let layer = colorScheme.lowest - return { - headerAvatar: { - height: avatarSize, - width: avatarSize, - cornerRadius: 6, + let layer = colorScheme.lowest + return { + headerAvatar: { + height: avatarSize, + width: avatarSize, + cornerRadius: 6, + }, + headerMessage: { + ...text(layer, "sans", { size: "xs" }), + margin: { left: headerPadding, right: headerPadding }, + }, + headerHeight: 18, + bodyMessage: { + ...text(layer, "sans", { size: "xs" }), + margin: { left: avatarSize + headerPadding, top: 6, bottom: 6 }, + }, + button: + interactive({ + ...text(layer, "sans", "on", { size: "xs" }), + background: background(layer, "on"), + padding: 4, + cornerRadius: 6, + margin: { left: 6 } + }, + + { + hover: { + background: background(layer, "on", "hovered"), + } + }), + + dismissButton: { + default: { + color: foreground(layer, "variant"), + iconWidth: 8, + iconHeight: 8, + buttonWidth: 8, + buttonHeight: 8, + hover: { + color: foreground(layer, "hovered"), }, - headerMessage: { - ...text(layer, "sans", { size: "xs" }), - margin: { left: headerPadding, right: headerPadding }, - }, - headerHeight: 18, - bodyMessage: { - ...text(layer, "sans", { size: "xs" }), - margin: { left: avatarSize + headerPadding, top: 6, bottom: 6 }, - }, - button: { - ...text(layer, "sans", "on", { size: "xs" }), - background: background(layer, "on"), - padding: 4, - cornerRadius: 6, - margin: { left: 6 }, - hover: { - background: background(layer, "on", "hovered"), - }, - }, - dismissButton: { - color: foreground(layer, "variant"), - iconWidth: 8, - iconHeight: 8, - buttonWidth: 8, - buttonHeight: 8, - hover: { - color: foreground(layer, "hovered"), - }, - }, - } + } + }, + } } diff --git a/styles/src/styleTree/contextMenu.ts b/styles/src/styleTree/contextMenu.ts index f14cd90219..b030d27972 100644 --- a/styles/src/styleTree/contextMenu.ts +++ b/styles/src/styleTree/contextMenu.ts @@ -1,49 +1,54 @@ import { ColorScheme } from "../theme/colorScheme" import { background, border, borderColor, text } from "./components" +import { interactive } from "./interactive" +import { toggleable } from "./toggle" export default function contextMenu(colorScheme: ColorScheme) { - let layer = colorScheme.middle - return { - background: background(layer), - cornerRadius: 10, - padding: 4, - shadow: colorScheme.popoverShadow, - border: border(layer), - keystrokeMargin: 30, - item: { - iconSpacing: 8, - iconWidth: 14, - padding: { left: 6, right: 6, top: 2, bottom: 2 }, - cornerRadius: 6, - label: text(layer, "sans", { size: "sm" }), - keystroke: { - ...text(layer, "sans", "variant", { - size: "sm", - weight: "bold", - }), - padding: { left: 3, right: 3 }, - }, - hover: { - background: background(layer, "hovered"), - label: text(layer, "sans", "hovered", { size: "sm" }), - keystroke: { - ...text(layer, "sans", "hovered", { - size: "sm", - weight: "bold", - }), - padding: { left: 3, right: 3 }, - }, - }, - active: { - background: background(layer, "active"), - }, - activeHover: { - background: background(layer, "active"), - }, + let layer = colorScheme.middle + return { + background: background(layer), + cornerRadius: 10, + padding: 4, + shadow: colorScheme.popoverShadow, + border: border(layer), + keystrokeMargin: 30, + item: toggleable(interactive({ + iconSpacing: 8, + iconWidth: 14, + padding: { left: 6, right: 6, top: 2, bottom: 2 }, + cornerRadius: 6, + label: text(layer, "sans", { size: "sm" }), + keystroke: { + ...text(layer, "sans", "variant", { + size: "sm", + weight: "bold", + }), + padding: { left: 3, right: 3 }, + } + }, { + hover: { + background: background(layer, "hovered"), + label: text(layer, "sans", "hovered", { size: "sm" }), + keystroke: { + ...text(layer, "sans", "hovered", { + size: "sm", + weight: "bold", + }), + padding: { left: 3, right: 3 }, }, - separator: { - background: borderColor(layer), - margin: { top: 2, bottom: 2 }, - }, - } + } + }), { + default: { + background: background(layer, "active"), + }, + hover: { + background: background(layer, "active"), + }, + }), + + separator: { + background: borderColor(layer), + margin: { top: 2, bottom: 2 }, + }, + } } diff --git a/styles/src/styleTree/copilot.ts b/styles/src/styleTree/copilot.ts index 8614cb6976..090d05eaee 100644 --- a/styles/src/styleTree/copilot.ts +++ b/styles/src/styleTree/copilot.ts @@ -1,267 +1,278 @@ import { ColorScheme } from "../theme/colorScheme" import { background, border, foreground, svg, text } from "./components" - +import { interactive } from "./interactive" export default function copilot(colorScheme: ColorScheme) { - let layer = colorScheme.middle + let layer = colorScheme.middle - let content_width = 264 + let content_width = 264 - let ctaButton = { - // Copied from welcome screen. FIXME: Move this into a ZDS component - background: background(layer), - border: border(layer, "default"), - cornerRadius: 4, - margin: { + let ctaButton = + // Copied from welcome screen. FIXME: Move this into a ZDS component + interactive({ + background: background(layer), + border: border(layer, "default"), + cornerRadius: 4, + margin: { + top: 4, + bottom: 4, + left: 8, + right: 8, + }, + padding: { + top: 3, + bottom: 3, + left: 7, + right: 7, + }, + ...text(layer, "sans", "default", { size: "sm" }) + }, + { + hover: { + ...text(layer, "sans", "default", { size: "sm" }), + background: background(layer, "hovered"), + border: border(layer, "active"), + }, + }); + + return { + outLinkIcon: + interactive({ + icon: svg( + foreground(layer, "variant"), + "icons/link_out_12.svg", + 12, + 12 + ), + container: { + cornerRadius: 6, + padding: { left: 6 }, + }, + }, + { + hover: { + icon: { + color: + foreground(layer, "hovered") + } + }, + }), + + modal: { + titleText: { + default: { + ...text(layer, "sans", { size: "xs", weight: "bold" }) + } + }, + titlebar: { + background: background(colorScheme.lowest), + border: border(layer, "active"), + padding: { + top: 4, + bottom: 4, + left: 8, + right: 8, + }, + }, + container: { + background: background(colorScheme.lowest), + padding: { + top: 0, + left: 0, + right: 0, + bottom: 8, + }, + }, + closeIcon: interactive( + { + icon: svg( + foreground(layer, "variant"), + "icons/x_mark_8.svg", + 8, + 8 + ), + container: { + cornerRadius: 2, + padding: { + top: 4, + bottom: 4, + left: 4, + right: 4, + }, + margin: { + right: 0, + }, + } + }, + { + hover: { + icon: svg( + foreground(layer, "on"), + "icons/x_mark_8.svg", + 8, + 8 + ), + }, + clicked: { + icon: svg( + foreground(layer, "base"), + "icons/x_mark_8.svg", + 8, + 8 + ), + }, + }), + dimensions: { + width: 280, + height: 280, + }, + }, + + auth: { + content_width, + + ctaButton, + + header: { + icon: svg( + foreground(layer, "default"), + "icons/zed_plus_copilot_32.svg", + 92, + 32 + ), + container: { + margin: { + top: 35, + bottom: 5, + left: 0, + right: 0, + }, + }, + }, + + prompting: { + subheading: { + ...text(layer, "sans", { size: "xs" }), + margin: { + top: 6, + bottom: 12, + left: 0, + right: 0, + }, + }, + + hint: { + ...text(layer, "sans", { size: "xs", color: "#838994" }), + margin: { + top: 6, + bottom: 2, + }, + }, + + deviceCode: { + text: text(layer, "mono", { size: "sm" }), + cta: { + ...ctaButton, + background: background(colorScheme.lowest), + border: border(colorScheme.lowest, "inverted"), + padding: { + top: 0, + bottom: 0, + left: 16, + right: 16, + }, + margin: { + left: 16, + right: 16, + }, + }, + left: content_width / 2, + leftContainer: { + padding: { + top: 3, + bottom: 3, + left: 0, + right: 6, + }, + }, + right: (content_width * 1) / 3, + rightContainer: interactive({ + border: border(colorScheme.lowest, "inverted", { + bottom: false, + right: false, + top: false, + left: true, + }), + padding: { + top: 3, + bottom: 5, + left: 8, + right: 0, + } + }, { + hover: { + border: border(layer, "active", { + bottom: false, + right: false, + top: false, + left: true, + }), + }, + }) + }, + }, + + notAuthorized: { + subheading: { + ...text(layer, "sans", { size: "xs" }), + + margin: { + top: 16, + bottom: 16, + left: 0, + right: 0, + }, + }, + + warning: { + ...text(layer, "sans", { + size: "xs", + color: foreground(layer, "warning"), + }), + border: border(layer, "warning"), + background: background(layer, "warning"), + cornerRadius: 2, + padding: { top: 4, + left: 4, bottom: 4, + right: 4, + }, + margin: { + bottom: 16, left: 8, right: 8, + }, }, - padding: { - top: 3, - bottom: 3, - left: 7, - right: 7, - }, - ...text(layer, "sans", "default", { size: "sm" }), - hover: { - ...text(layer, "sans", "default", { size: "sm" }), - background: background(layer, "hovered"), - border: border(layer, "active"), - }, - } + }, - return { - outLinkIcon: { - icon: svg( - foreground(layer, "variant"), - "icons/link_out_12.svg", - 12, - 12 - ), - container: { - cornerRadius: 6, - padding: { left: 6 }, - }, - hover: { - icon: svg( - foreground(layer, "hovered"), - "icons/link_out_12.svg", - 12, - 12 - ), - }, - }, - modal: { - titleText: { - ...text(layer, "sans", { size: "xs", weight: "bold" }), - }, - titlebar: { - background: background(colorScheme.lowest), - border: border(layer, "active"), - padding: { - top: 4, - bottom: 4, - left: 8, - right: 8, - }, - }, - container: { - background: background(colorScheme.lowest), - padding: { - top: 0, - left: 0, - right: 0, - bottom: 8, - }, - }, - closeIcon: { - icon: svg( - foreground(layer, "variant"), - "icons/x_mark_8.svg", - 8, - 8 - ), - container: { - cornerRadius: 2, - padding: { - top: 4, - bottom: 4, - left: 4, - right: 4, - }, - margin: { - right: 0, - }, - }, - hover: { - icon: svg( - foreground(layer, "on"), - "icons/x_mark_8.svg", - 8, - 8 - ), - }, - clicked: { - icon: svg( - foreground(layer, "base"), - "icons/x_mark_8.svg", - 8, - 8 - ), - }, - }, - dimensions: { - width: 280, - height: 280, - }, + authorized: { + subheading: { + ...text(layer, "sans", { size: "xs" }), + + margin: { + top: 16, + bottom: 16, + }, }, - auth: { - content_width, - - ctaButton, - - header: { - icon: svg( - foreground(layer, "default"), - "icons/zed_plus_copilot_32.svg", - 92, - 32 - ), - container: { - margin: { - top: 35, - bottom: 5, - left: 0, - right: 0, - }, - }, - }, - - prompting: { - subheading: { - ...text(layer, "sans", { size: "xs" }), - margin: { - top: 6, - bottom: 12, - left: 0, - right: 0, - }, - }, - - hint: { - ...text(layer, "sans", { size: "xs", color: "#838994" }), - margin: { - top: 6, - bottom: 2, - }, - }, - - deviceCode: { - text: text(layer, "mono", { size: "sm" }), - cta: { - ...ctaButton, - background: background(colorScheme.lowest), - border: border(colorScheme.lowest, "inverted"), - padding: { - top: 0, - bottom: 0, - left: 16, - right: 16, - }, - margin: { - left: 16, - right: 16, - }, - }, - left: content_width / 2, - leftContainer: { - padding: { - top: 3, - bottom: 3, - left: 0, - right: 6, - }, - }, - right: (content_width * 1) / 3, - rightContainer: { - border: border(colorScheme.lowest, "inverted", { - bottom: false, - right: false, - top: false, - left: true, - }), - padding: { - top: 3, - bottom: 5, - left: 8, - right: 0, - }, - hover: { - border: border(layer, "active", { - bottom: false, - right: false, - top: false, - left: true, - }), - }, - }, - }, - }, - - notAuthorized: { - subheading: { - ...text(layer, "sans", { size: "xs" }), - - margin: { - top: 16, - bottom: 16, - left: 0, - right: 0, - }, - }, - - warning: { - ...text(layer, "sans", { - size: "xs", - color: foreground(layer, "warning"), - }), - border: border(layer, "warning"), - background: background(layer, "warning"), - cornerRadius: 2, - padding: { - top: 4, - left: 4, - bottom: 4, - right: 4, - }, - margin: { - bottom: 16, - left: 8, - right: 8, - }, - }, - }, - - authorized: { - subheading: { - ...text(layer, "sans", { size: "xs" }), - - margin: { - top: 16, - bottom: 16, - }, - }, - - hint: { - ...text(layer, "sans", { size: "xs", color: "#838994" }), - margin: { - top: 24, - bottom: 4, - }, - }, - }, + hint: { + ...text(layer, "sans", { size: "xs", color: "#838994" }), + margin: { + top: 24, + bottom: 4, + }, }, - } + }, + }, + } } diff --git a/styles/src/styleTree/editor.ts b/styles/src/styleTree/editor.ts index 55f3da6e90..ac7447de42 100644 --- a/styles/src/styleTree/editor.ts +++ b/styles/src/styleTree/editor.ts @@ -4,275 +4,284 @@ import { background, border, borderColor, foreground, text } from "./components" import hoverPopover from "./hoverPopover" import { buildSyntax } from "../theme/syntax" +import { interactive } from "./interactive" +import { toggleable } from "./toggle" export default function editor(colorScheme: ColorScheme) { - const { isLight } = colorScheme + const { isLight } = colorScheme - let layer = colorScheme.highest + let layer = colorScheme.highest - const autocompleteItem = { - cornerRadius: 6, - padding: { - bottom: 2, - left: 6, - right: 6, - top: 2, - }, - } - - function diagnostic(layer: Layer, styleSet: StyleSets) { - return { - textScaleFactor: 0.857, - header: { - border: border(layer, { - top: true, - }), - }, - message: { - text: text(layer, "sans", styleSet, "default", { size: "sm" }), - highlightText: text(layer, "sans", styleSet, "default", { - size: "sm", - weight: "bold", - }), - }, - } - } - - const syntax = buildSyntax(colorScheme) + const autocompleteItem = { + cornerRadius: 6, + padding: { + bottom: 2, + left: 6, + right: 6, + top: 2, + }, + } + function diagnostic(layer: Layer, styleSet: StyleSets) { return { - textColor: syntax.primary.color, - background: background(layer), - activeLineBackground: withOpacity(background(layer, "on"), 0.75), - highlightedLineBackground: background(layer, "on"), - // Inline autocomplete suggestions, Co-pilot suggestions, etc. - suggestion: syntax.predictive, - codeActions: { - indicator: { - color: foreground(layer, "variant"), - - clicked: { - color: foreground(layer, "base"), - }, - hover: { - color: foreground(layer, "on"), - }, - active: { - color: foreground(layer, "on"), - }, - }, - verticalScale: 0.55, - }, - folds: { - iconMarginScale: 2.5, - foldedIcon: "icons/chevron_right_8.svg", - foldableIcon: "icons/chevron_down_8.svg", - indicator: { - color: foreground(layer, "variant"), - - clicked: { - color: foreground(layer, "base"), - }, - hover: { - color: foreground(layer, "on"), - }, - active: { - color: foreground(layer, "on"), - }, - }, - ellipses: { - textColor: colorScheme.ramps.neutral(0.71).hex(), - cornerRadiusFactor: 0.15, - background: { - // Copied from hover_popover highlight - color: colorScheme.ramps.neutral(0.5).alpha(0.0).hex(), - - hover: { - color: colorScheme.ramps.neutral(0.5).alpha(0.5).hex(), - }, - - clicked: { - color: colorScheme.ramps.neutral(0.5).alpha(0.7).hex(), - }, - }, - }, - foldBackground: foreground(layer, "variant"), - }, - diff: { - deleted: isLight - ? colorScheme.ramps.red(0.5).hex() - : colorScheme.ramps.red(0.4).hex(), - modified: isLight - ? colorScheme.ramps.yellow(0.5).hex() - : colorScheme.ramps.yellow(0.5).hex(), - inserted: isLight - ? colorScheme.ramps.green(0.4).hex() - : colorScheme.ramps.green(0.5).hex(), - removedWidthEm: 0.275, - widthEm: 0.15, - cornerRadius: 0.05, - }, - /** Highlights matching occurrences of what is under the cursor - * as well as matched brackets - */ - documentHighlightReadBackground: withOpacity( - foreground(layer, "accent"), - 0.1 - ), - documentHighlightWriteBackground: colorScheme.ramps - .neutral(0.5) - .alpha(0.4) - .hex(), // TODO: This was blend * 2 - errorColor: background(layer, "negative"), - gutterBackground: background(layer), - gutterPaddingFactor: 3.5, - lineNumber: withOpacity(foreground(layer), 0.35), - lineNumberActive: foreground(layer), - renameFade: 0.6, - unnecessaryCodeFade: 0.5, - selection: colorScheme.players[0], - whitespace: colorScheme.ramps.neutral(0.5).hex(), - guestSelections: [ - colorScheme.players[1], - colorScheme.players[2], - colorScheme.players[3], - colorScheme.players[4], - colorScheme.players[5], - colorScheme.players[6], - colorScheme.players[7], - ], - autocomplete: { - background: background(colorScheme.middle), - cornerRadius: 8, - padding: 4, - margin: { - left: -14, - }, - border: border(colorScheme.middle), - shadow: colorScheme.popoverShadow, - matchHighlight: foreground(colorScheme.middle, "accent"), - item: autocompleteItem, - hoveredItem: { - ...autocompleteItem, - matchHighlight: foreground( - colorScheme.middle, - "accent", - "hovered" - ), - background: background(colorScheme.middle, "hovered"), - }, - selectedItem: { - ...autocompleteItem, - matchHighlight: foreground( - colorScheme.middle, - "accent", - "active" - ), - background: background(colorScheme.middle, "active"), - }, - }, - diagnosticHeader: { - background: background(colorScheme.middle), - iconWidthFactor: 1.5, - textScaleFactor: 0.857, - border: border(colorScheme.middle, { - bottom: true, - top: true, - }), - code: { - ...text(colorScheme.middle, "mono", { size: "sm" }), - margin: { - left: 10, - }, - }, - source: { - text: text(colorScheme.middle, "sans", { - size: "sm", - weight: "bold", - }), - }, - message: { - highlightText: text(colorScheme.middle, "sans", { - size: "sm", - weight: "bold", - }), - text: text(colorScheme.middle, "sans", { size: "sm" }), - }, - }, - diagnosticPathHeader: { - background: background(colorScheme.middle), - textScaleFactor: 0.857, - filename: text(colorScheme.middle, "mono", { size: "sm" }), - path: { - ...text(colorScheme.middle, "mono", { size: "sm" }), - margin: { - left: 12, - }, - }, - }, - errorDiagnostic: diagnostic(colorScheme.middle, "negative"), - warningDiagnostic: diagnostic(colorScheme.middle, "warning"), - informationDiagnostic: diagnostic(colorScheme.middle, "accent"), - hintDiagnostic: diagnostic(colorScheme.middle, "warning"), - invalidErrorDiagnostic: diagnostic(colorScheme.middle, "base"), - invalidHintDiagnostic: diagnostic(colorScheme.middle, "base"), - invalidInformationDiagnostic: diagnostic(colorScheme.middle, "base"), - invalidWarningDiagnostic: diagnostic(colorScheme.middle, "base"), - hoverPopover: hoverPopover(colorScheme), - linkDefinition: { - color: syntax.linkUri.color, - underline: syntax.linkUri.underline, - }, - jumpIcon: { - color: foreground(layer, "on"), - iconWidth: 20, - buttonWidth: 20, - cornerRadius: 6, - padding: { - top: 6, - bottom: 6, - left: 6, - right: 6, - }, - hover: { - background: background(layer, "on", "hovered"), - }, - }, - scrollbar: { - width: 12, - minHeightFactor: 1.0, - track: { - border: border(layer, "variant", { left: true }), - }, - thumb: { - background: withOpacity(background(layer, "inverted"), 0.3), - border: { - width: 1, - color: borderColor(layer, "variant"), - top: false, - right: true, - left: true, - bottom: false, - }, - }, - git: { - deleted: isLight - ? withOpacity(colorScheme.ramps.red(0.5).hex(), 0.8) - : withOpacity(colorScheme.ramps.red(0.4).hex(), 0.8), - modified: isLight - ? withOpacity(colorScheme.ramps.yellow(0.5).hex(), 0.8) - : withOpacity(colorScheme.ramps.yellow(0.4).hex(), 0.8), - inserted: isLight - ? withOpacity(colorScheme.ramps.green(0.5).hex(), 0.8) - : withOpacity(colorScheme.ramps.green(0.4).hex(), 0.8), - }, - }, - compositionMark: { - underline: { - thickness: 1.0, - color: borderColor(layer), - }, - }, - syntax, + textScaleFactor: 0.857, + header: { + border: border(layer, { + top: true, + }), + }, + message: { + text: text(layer, "sans", styleSet, "default", { size: "sm" }), + highlightText: text(layer, "sans", styleSet, "default", { + size: "sm", + weight: "bold", + }), + }, } + } + + const syntax = buildSyntax(colorScheme) + + return { + textColor: syntax.primary.color, + background: background(layer), + activeLineBackground: withOpacity(background(layer, "on"), 0.75), + highlightedLineBackground: background(layer, "on"), + // Inline autocomplete suggestions, Co-pilot suggestions, etc. + suggestion: syntax.predictive, + codeActions: { + indicator: toggleable(interactive({ + color: foreground(layer, "variant"), + }, { + clicked: { + color: foreground(layer, "base"), + }, + hover: { + color: foreground(layer, "on"), + }, + }), + { + default: { + color: foreground(layer, "on"), + } + }), + + verticalScale: 0.55, + }, + folds: { + iconMarginScale: 2.5, + foldedIcon: "icons/chevron_right_8.svg", + foldableIcon: "icons/chevron_down_8.svg", + indicator: toggleable(interactive({ + color: foreground(layer, "variant"), + }, { + clicked: { + color: foreground(layer, "base"), + }, + hover: { + color: foreground(layer, "on"), + }, + }), + { + default: { + color: foreground(layer, "on"), + } + }), + ellipses: { + textColor: colorScheme.ramps.neutral(0.71).hex(), + cornerRadiusFactor: 0.15, + background: { + // Copied from hover_popover highlight + default: { color: colorScheme.ramps.neutral(0.5).alpha(0.0).hex() }, + + hover: { + color: colorScheme.ramps.neutral(0.5).alpha(0.5).hex(), + }, + + clicked: { + color: colorScheme.ramps.neutral(0.5).alpha(0.7).hex(), + }, + }, + }, + foldBackground: foreground(layer, "variant"), + }, + diff: { + deleted: isLight + ? colorScheme.ramps.red(0.5).hex() + : colorScheme.ramps.red(0.4).hex(), + modified: isLight + ? colorScheme.ramps.yellow(0.5).hex() + : colorScheme.ramps.yellow(0.5).hex(), + inserted: isLight + ? colorScheme.ramps.green(0.4).hex() + : colorScheme.ramps.green(0.5).hex(), + removedWidthEm: 0.275, + widthEm: 0.15, + cornerRadius: 0.05, + }, + /** Highlights matching occurrences of what is under the cursor + * as well as matched brackets + */ + documentHighlightReadBackground: withOpacity( + foreground(layer, "accent"), + 0.1 + ), + documentHighlightWriteBackground: colorScheme.ramps + .neutral(0.5) + .alpha(0.4) + .hex(), // TODO: This was blend * 2 + errorColor: background(layer, "negative"), + gutterBackground: background(layer), + gutterPaddingFactor: 3.5, + lineNumber: withOpacity(foreground(layer), 0.35), + lineNumberActive: foreground(layer), + renameFade: 0.6, + unnecessaryCodeFade: 0.5, + selection: colorScheme.players[0], + whitespace: colorScheme.ramps.neutral(0.5).hex(), + guestSelections: [ + colorScheme.players[1], + colorScheme.players[2], + colorScheme.players[3], + colorScheme.players[4], + colorScheme.players[5], + colorScheme.players[6], + colorScheme.players[7], + ], + autocomplete: { + background: background(colorScheme.middle), + cornerRadius: 8, + padding: 4, + margin: { + left: -14, + }, + border: border(colorScheme.middle), + shadow: colorScheme.popoverShadow, + matchHighlight: foreground(colorScheme.middle, "accent"), + item: autocompleteItem, + hoveredItem: { + ...autocompleteItem, + matchHighlight: foreground( + colorScheme.middle, + "accent", + "hovered" + ), + background: background(colorScheme.middle, "hovered"), + }, + selectedItem: { + ...autocompleteItem, + matchHighlight: foreground( + colorScheme.middle, + "accent", + "active" + ), + background: background(colorScheme.middle, "active"), + }, + }, + diagnosticHeader: { + background: background(colorScheme.middle), + iconWidthFactor: 1.5, + textScaleFactor: 0.857, + border: border(colorScheme.middle, { + bottom: true, + top: true, + }), + code: { + ...text(colorScheme.middle, "mono", { size: "sm" }), + margin: { + left: 10, + }, + }, + source: { + text: text(colorScheme.middle, "sans", { + size: "sm", + weight: "bold", + }), + }, + message: { + highlightText: text(colorScheme.middle, "sans", { + size: "sm", + weight: "bold", + }), + text: text(colorScheme.middle, "sans", { size: "sm" }), + }, + }, + diagnosticPathHeader: { + background: background(colorScheme.middle), + textScaleFactor: 0.857, + filename: text(colorScheme.middle, "mono", { size: "sm" }), + path: { + ...text(colorScheme.middle, "mono", { size: "sm" }), + margin: { + left: 12, + }, + }, + }, + errorDiagnostic: diagnostic(colorScheme.middle, "negative"), + warningDiagnostic: diagnostic(colorScheme.middle, "warning"), + informationDiagnostic: diagnostic(colorScheme.middle, "accent"), + hintDiagnostic: diagnostic(colorScheme.middle, "warning"), + invalidErrorDiagnostic: diagnostic(colorScheme.middle, "base"), + invalidHintDiagnostic: diagnostic(colorScheme.middle, "base"), + invalidInformationDiagnostic: diagnostic(colorScheme.middle, "base"), + invalidWarningDiagnostic: diagnostic(colorScheme.middle, "base"), + hoverPopover: hoverPopover(colorScheme), + linkDefinition: { + color: syntax.linkUri.color, + underline: syntax.linkUri.underline, + }, + jumpIcon: interactive({ + color: foreground(layer, "on"), + iconWidth: 20, + buttonWidth: 20, + cornerRadius: 6, + padding: { + top: 6, + bottom: 6, + left: 6, + right: 6, + } + }, { + hover: { + background: background(layer, "on", "hovered"), + } + }), + + scrollbar: { + width: 12, + minHeightFactor: 1.0, + track: { + border: border(layer, "variant", { left: true }), + }, + thumb: { + background: withOpacity(background(layer, "inverted"), 0.3), + border: { + width: 1, + color: borderColor(layer, "variant"), + top: false, + right: true, + left: true, + bottom: false, + }, + }, + git: { + deleted: isLight + ? withOpacity(colorScheme.ramps.red(0.5).hex(), 0.8) + : withOpacity(colorScheme.ramps.red(0.4).hex(), 0.8), + modified: isLight + ? withOpacity(colorScheme.ramps.yellow(0.5).hex(), 0.8) + : withOpacity(colorScheme.ramps.yellow(0.4).hex(), 0.8), + inserted: isLight + ? withOpacity(colorScheme.ramps.green(0.5).hex(), 0.8) + : withOpacity(colorScheme.ramps.green(0.4).hex(), 0.8), + }, + }, + compositionMark: { + underline: { + thickness: 1.0, + color: borderColor(layer), + }, + }, + syntax, + } } diff --git a/styles/src/styleTree/picker.ts b/styles/src/styleTree/picker.ts index d84bd6fc7a..ecf34a9927 100644 --- a/styles/src/styleTree/picker.ts +++ b/styles/src/styleTree/picker.ts @@ -1,82 +1,86 @@ import { ColorScheme } from "../theme/colorScheme" import { withOpacity } from "../theme/color" import { background, border, text } from "./components" +import { toggleable } from "./toggle" +import { interactive } from "./interactive" export default function picker(colorScheme: ColorScheme): any { - let layer = colorScheme.lowest - const container = { - background: background(layer), - border: border(layer), - shadow: colorScheme.modalShadow, - cornerRadius: 12, - padding: { - bottom: 4, - }, - } - const inputEditor = { - placeholderText: text(layer, "sans", "on", "disabled"), - selection: colorScheme.players[0], - text: text(layer, "mono", "on"), - border: border(layer, { bottom: true }), - padding: { - bottom: 8, - left: 16, - right: 16, - top: 8, - }, - margin: { - bottom: 4, - }, - } - const emptyInputEditor: any = { ...inputEditor } - delete emptyInputEditor.border - delete emptyInputEditor.margin + let layer = colorScheme.lowest + const container = { + background: background(layer), + border: border(layer), + shadow: colorScheme.modalShadow, + cornerRadius: 12, + padding: { + bottom: 4, + }, + } + const inputEditor = { + placeholderText: text(layer, "sans", "on", "disabled"), + selection: colorScheme.players[0], + text: text(layer, "mono", "on"), + border: border(layer, { bottom: true }), + padding: { + bottom: 8, + left: 16, + right: 16, + top: 8, + }, + margin: { + bottom: 4, + }, + } + const emptyInputEditor: any = { ...inputEditor } + delete emptyInputEditor.border + delete emptyInputEditor.margin - return { - ...container, - emptyContainer: { - ...container, - padding: {}, - }, - item: { - padding: { - bottom: 4, - left: 12, - right: 12, - top: 4, - }, - margin: { - top: 1, - left: 4, - right: 4, - }, - cornerRadius: 8, - text: text(layer, "sans", "variant"), - highlightText: text(layer, "sans", "accent", { weight: "bold" }), - active: { - background: withOpacity( - background(layer, "base", "active"), - 0.5 - ), - text: text(layer, "sans", "base", "active"), - highlightText: text(layer, "sans", "accent", { - weight: "bold", - }), - }, - hover: { - background: withOpacity(background(layer, "hovered"), 0.5), - }, - }, - inputEditor, - emptyInputEditor, - noMatches: { - text: text(layer, "sans", "variant"), - padding: { - bottom: 8, - left: 16, - right: 16, - top: 8, - }, - }, - } + return { + ...container, + emptyContainer: { + ...container, + padding: {}, + }, + item: toggleable(interactive({ + padding: { + bottom: 4, + left: 12, + right: 12, + top: 4, + }, + margin: { + top: 1, + left: 4, + right: 4, + }, + cornerRadius: 8, + text: text(layer, "sans", "variant"), + highlightText: text(layer, "sans", "accent", { weight: "bold" }), + }, { + hover: { + background: withOpacity(background(layer, "hovered"), 0.5), + } + }), + { + default: { + background: withOpacity( + background(layer, "base", "active"), + 0.5 + ), + //text: text(layer, "sans", "base", "active"), + } + }), + + + inputEditor, + emptyInputEditor, + noMatches: { + text: text(layer, "sans", "variant"), + padding: { + bottom: 8, + left: 16, + right: 16, + top: 8, + }, + }, + } } diff --git a/styles/src/styleTree/projectPanel.ts b/styles/src/styleTree/projectPanel.ts index a86ae010b6..57abd0dafc 100644 --- a/styles/src/styleTree/projectPanel.ts +++ b/styles/src/styleTree/projectPanel.ts @@ -1,107 +1,119 @@ import { ColorScheme } from "../theme/colorScheme" import { withOpacity } from "../theme/color" import { background, border, foreground, text } from "./components" - +import { interactive } from "./interactive" +import { toggleable } from "./toggle" export default function projectPanel(colorScheme: ColorScheme) { - const { isLight } = colorScheme + const { isLight } = colorScheme - let layer = colorScheme.middle + let layer = colorScheme.middle - let baseEntry = { - height: 22, + let baseEntry = { + height: 22, + iconColor: foreground(layer, "variant"), + iconSize: 7, + iconSpacing: 5, + } + + let status = { + git: { + modified: isLight + ? colorScheme.ramps.yellow(0.6).hex() + : colorScheme.ramps.yellow(0.5).hex(), + inserted: isLight + ? colorScheme.ramps.green(0.45).hex() + : colorScheme.ramps.green(0.5).hex(), + conflict: isLight + ? colorScheme.ramps.red(0.6).hex() + : colorScheme.ramps.red(0.5).hex(), + }, + } + + let entry = toggleable(interactive({ + ...baseEntry, + text: text(layer, "mono", "variant", { size: "sm" }), + status, + }, + { + hover: { + background: background(layer, "variant", "hovered"), + } + }), + { + default: { + /*background: colorScheme.isLight + ? withOpacity(background(layer, "active"), 0.5) + : background(layer, "active") ,*/ // todo posiewic + text: text(layer, "mono", "active", { size: "sm" }), + }, + hover: { + //background: background(layer, "active"), + text: text(layer, "mono", "active", { size: "sm" }), + }, + + }); + + return { + openProjectButton: interactive({ + background: background(layer), + border: border(layer, "active"), + cornerRadius: 4, + margin: { + top: 16, + left: 16, + right: 16, + }, + padding: { + top: 3, + bottom: 3, + left: 7, + right: 7, + }, + ...text(layer, "sans", "default", { size: "sm" }) + }, { + hover: { + ...text(layer, "sans", "default", { size: "sm" }), + background: background(layer, "hovered"), + border: border(layer, "active"), + }, + }), + background: background(layer), + padding: { left: 6, right: 6, top: 0, bottom: 6 }, + indentWidth: 12, + entry, + draggedEntry: { + ...baseEntry, + text: text(layer, "mono", "on", { size: "sm" }), + background: withOpacity(background(layer, "on"), 0.9), + border: border(layer), + status, + }, + ignoredEntry: { + ...entry, + iconColor: foreground(layer, "disabled"), + text: text(layer, "mono", "disabled"), + active: { + ...entry.active, iconColor: foreground(layer, "variant"), - iconSize: 7, - iconSpacing: 5, - } + }, + }, + cutEntry: { + ...entry, + text: text(layer, "mono", "disabled"), + active: { + ...entry.active, + default: { + ...entry.active.default, + background: background(layer, "active"), + text: text(layer, "mono", "disabled", { size: "sm" }), + }, - let status = { - git: { - modified: isLight - ? colorScheme.ramps.yellow(0.6).hex() - : colorScheme.ramps.yellow(0.5).hex(), - inserted: isLight - ? colorScheme.ramps.green(0.45).hex() - : colorScheme.ramps.green(0.5).hex(), - conflict: isLight - ? colorScheme.ramps.red(0.6).hex() - : colorScheme.ramps.red(0.5).hex(), - }, - } - - let entry = { - ...baseEntry, - text: text(layer, "mono", "variant", { size: "sm" }), - hover: { - background: background(layer, "variant", "hovered"), - }, - active: { - background: colorScheme.isLight - ? withOpacity(background(layer, "active"), 0.5) - : background(layer, "active"), - text: text(layer, "mono", "active", { size: "sm" }), - }, - activeHover: { - background: background(layer, "active"), - text: text(layer, "mono", "active", { size: "sm" }), - }, - status, - } - - return { - openProjectButton: { - background: background(layer), - border: border(layer, "active"), - cornerRadius: 4, - margin: { - top: 16, - left: 16, - right: 16, - }, - padding: { - top: 3, - bottom: 3, - left: 7, - right: 7, - }, - ...text(layer, "sans", "default", { size: "sm" }), - hover: { - ...text(layer, "sans", "default", { size: "sm" }), - background: background(layer, "hovered"), - border: border(layer, "active"), - }, - }, - background: background(layer), - padding: { left: 6, right: 6, top: 0, bottom: 6 }, - indentWidth: 12, - entry, - draggedEntry: { - ...baseEntry, - text: text(layer, "mono", "on", { size: "sm" }), - background: withOpacity(background(layer, "on"), 0.9), - border: border(layer), - status, - }, - ignoredEntry: { - ...entry, - iconColor: foreground(layer, "disabled"), - text: text(layer, "mono", "disabled"), - active: { - ...entry.active, - iconColor: foreground(layer, "variant"), - }, - }, - cutEntry: { - ...entry, - text: text(layer, "mono", "disabled"), - active: { - background: background(layer, "active"), - text: text(layer, "mono", "disabled", { size: "sm" }), - }, - }, - filenameEditor: { - background: background(layer, "on"), - text: text(layer, "mono", "on", { size: "sm" }), - selection: colorScheme.players[0], - }, - } + }, + }, + filenameEditor: { + background: background(layer, "on"), + text: text(layer, "mono", "on", { size: "sm" }), + selection: colorScheme.players[0], + }, + } } diff --git a/styles/src/styleTree/statusBar.ts b/styles/src/styleTree/statusBar.ts index a8d926f40e..66643dbde1 100644 --- a/styles/src/styleTree/statusBar.ts +++ b/styles/src/styleTree/statusBar.ts @@ -1,126 +1,135 @@ import { ColorScheme } from "../theme/colorScheme" import { background, border, foreground, text } from "./components" - +import { interactive } from "./interactive" +import { toggleable } from "./toggle" export default function statusBar(colorScheme: ColorScheme) { - let layer = colorScheme.lowest + let layer = colorScheme.lowest - const statusContainer = { - cornerRadius: 6, - padding: { top: 3, bottom: 3, left: 6, right: 6 }, - } + const statusContainer = { + cornerRadius: 6, + padding: { top: 3, bottom: 3, left: 6, right: 6 }, + } - const diagnosticStatusContainer = { - cornerRadius: 6, - padding: { top: 1, bottom: 1, left: 6, right: 6 }, - } + const diagnosticStatusContainer = { + cornerRadius: 6, + padding: { top: 1, bottom: 1, left: 6, right: 6 }, + } - return { - height: 30, - itemSpacing: 8, - padding: { - top: 1, - bottom: 1, - left: 6, - right: 6, + return { + height: 30, + itemSpacing: 8, + padding: { + top: 1, + bottom: 1, + left: 6, + right: 6, + }, + border: border(layer, { top: true, overlay: true }), + cursorPosition: text(layer, "sans", "variant"), + activeLanguage: interactive({ + padding: { left: 6, right: 6 }, + ...text(layer, "sans", "variant") + }, + { + hover: { + ...text(layer, "sans", "on"), + } + }, + ), + autoUpdateProgressMessage: text(layer, "sans", "variant"), + autoUpdateDoneMessage: text(layer, "sans", "variant"), + lspStatus: interactive({ + ...diagnosticStatusContainer, + iconSpacing: 4, + iconWidth: 14, + height: 18, + message: text(layer, "sans"), + iconColor: foreground(layer) + }, + { + hover: { + message: text(layer, "sans"), + iconColor: foreground(layer), + background: background(layer, "hovered"), + } + }), + diagnosticMessage: interactive({ + ...text(layer, "sans") + }, + { hover: text(layer, "sans", "hovered") }, + ), + diagnosticSummary: + interactive({ + height: 20, + iconWidth: 16, + iconSpacing: 2, + summarySpacing: 6, + text: text(layer, "sans", { size: "sm" }), + iconColorOk: foreground(layer, "variant"), + iconColorWarning: foreground(layer, "warning"), + iconColorError: foreground(layer, "negative"), + containerOk: { + cornerRadius: 6, + padding: { top: 3, bottom: 3, left: 7, right: 7 }, }, - border: border(layer, { top: true, overlay: true }), - cursorPosition: text(layer, "sans", "variant"), - activeLanguage: { - padding: { left: 6, right: 6 }, - ...text(layer, "sans", "variant"), - hover: { - ...text(layer, "sans", "on"), - }, + containerWarning: { + ...diagnosticStatusContainer, + background: background(layer, "warning"), + border: border(layer, "warning"), }, - autoUpdateProgressMessage: text(layer, "sans", "variant"), - autoUpdateDoneMessage: text(layer, "sans", "variant"), - lspStatus: { - ...diagnosticStatusContainer, - iconSpacing: 4, - iconWidth: 14, - height: 18, - message: text(layer, "sans"), - iconColor: foreground(layer), - hover: { - message: text(layer, "sans"), - iconColor: foreground(layer), - background: background(layer, "hovered"), - }, + containerError: { + ...diagnosticStatusContainer, + background: background(layer, "negative"), + border: border(layer, "negative"), + } + }, { + hover: { + iconColorOk: foreground(layer, "on"), + containerOk: { + background: background(layer, "on", "hovered"), + }, + containerWarning: { + background: background(layer, "warning", "hovered"), + border: border(layer, "warning", "hovered"), + }, + containerError: { + background: background(layer, "negative", "hovered"), + border: border(layer, "negative", "hovered"), + } + } + } + ), + panelButtons: { + groupLeft: {}, + groupBottom: {}, + groupRight: {}, + button: toggleable(interactive({ + ...statusContainer, + iconSize: 16, + iconColor: foreground(layer, "variant"), + label: { + margin: { left: 6 }, + ...text(layer, "sans", { size: "sm" }), }, - diagnosticMessage: { - ...text(layer, "sans"), - hover: text(layer, "sans", "hovered"), - }, - diagnosticSummary: { - height: 20, - iconWidth: 16, - iconSpacing: 2, - summarySpacing: 6, - text: text(layer, "sans", { size: "sm" }), - iconColorOk: foreground(layer, "variant"), - iconColorWarning: foreground(layer, "warning"), - iconColorError: foreground(layer, "negative"), - containerOk: { - cornerRadius: 6, - padding: { top: 3, bottom: 3, left: 7, right: 7 }, - }, - containerWarning: { - ...diagnosticStatusContainer, - background: background(layer, "warning"), - border: border(layer, "warning"), - }, - containerError: { - ...diagnosticStatusContainer, - background: background(layer, "negative"), - border: border(layer, "negative"), - }, - hover: { - iconColorOk: foreground(layer, "on"), - containerOk: { - cornerRadius: 6, - padding: { top: 3, bottom: 3, left: 7, right: 7 }, - background: background(layer, "on", "hovered"), - }, - containerWarning: { - ...diagnosticStatusContainer, - background: background(layer, "warning", "hovered"), - border: border(layer, "warning", "hovered"), - }, - containerError: { - ...diagnosticStatusContainer, - background: background(layer, "negative", "hovered"), - border: border(layer, "negative", "hovered"), - }, - }, - }, - panelButtons: { - groupLeft: {}, - groupBottom: {}, - groupRight: {}, - button: { - ...statusContainer, - iconSize: 16, - iconColor: foreground(layer, "variant"), - label: { - margin: { left: 6 }, - ...text(layer, "sans", { size: "sm" }), - }, - hover: { - iconColor: foreground(layer, "hovered"), - background: background(layer, "variant"), - }, - active: { - iconColor: foreground(layer, "active"), - background: background(layer, "active"), - }, - }, - badge: { - cornerRadius: 3, - padding: 2, - margin: { bottom: -1, right: -1 }, - border: border(layer), - background: background(layer, "accent"), - }, - }, - } + }, { + hover: { + iconColor: foreground(layer, "hovered"), + background: background(layer, "variant"), + } + }), + { + default: { + iconColor: foreground(layer, "active"), + background: background(layer, "active"), + } + }), + badge: { + cornerRadius: 3, + padding: 2, + margin: { bottom: -1, right: -1 }, + border: border(layer), + background: background(layer, "accent"), + }, + }, + } } diff --git a/styles/src/styleTree/tabBar.ts b/styles/src/styleTree/tabBar.ts index c5b397b34a..6799b0a9e3 100644 --- a/styles/src/styleTree/tabBar.ts +++ b/styles/src/styleTree/tabBar.ts @@ -1,109 +1,116 @@ import { ColorScheme } from "../theme/colorScheme" import { withOpacity } from "../theme/color" import { text, border, background, foreground } from "./components" +import { toggleable } from "./toggle" +import { interactive } from "./interactive" export default function tabBar(colorScheme: ColorScheme) { - const height = 32 + const height = 32 - let activeLayer = colorScheme.highest - let layer = colorScheme.middle + let activeLayer = colorScheme.highest + let layer = colorScheme.middle - const tab = { - height, - text: text(layer, "sans", "variant", { size: "sm" }), - background: background(layer), - border: border(layer, { - right: true, - bottom: true, - overlay: true, - }), - padding: { - left: 8, - right: 12, - }, - spacing: 8, + const tab = { + height, + text: text(layer, "sans", "variant", { size: "sm" }), + background: background(layer), + border: border(layer, { + right: true, + bottom: true, + overlay: true, + }), + padding: { + left: 8, + right: 12, + }, + spacing: 8, - // Tab type icons (e.g. Project Search) - typeIconWidth: 14, + // Tab type icons (e.g. Project Search) + typeIconWidth: 14, - // Close icons - closeIconWidth: 8, - iconClose: foreground(layer, "variant"), - iconCloseActive: foreground(layer, "hovered"), + // Close icons + closeIconWidth: 8, + iconClose: foreground(layer, "variant"), + iconCloseActive: foreground(layer, "hovered"), - // Indicators - iconConflict: foreground(layer, "warning"), - iconDirty: foreground(layer, "accent"), + // Indicators + iconConflict: foreground(layer, "warning"), + iconDirty: foreground(layer, "accent"), - // When two tabs of the same name are open, a label appears next to them - description: { - margin: { left: 8 }, - ...text(layer, "sans", "disabled", { size: "2xs" }), - }, - } + // When two tabs of the same name are open, a label appears next to them + description: { + margin: { left: 8 }, + ...text(layer, "sans", "disabled", { size: "2xs" }), + }, + } - const activePaneActiveTab = { - ...tab, - background: background(activeLayer), - text: text(activeLayer, "sans", "active", { size: "sm" }), - border: { - ...tab.border, - bottom: false, - }, - } + const activePaneActiveTab = { + ...tab, + background: background(activeLayer), + text: text(activeLayer, "sans", "active", { size: "sm" }), + border: { + ...tab.border, + bottom: false, + }, + } - const inactivePaneInactiveTab = { - ...tab, - background: background(layer), - text: text(layer, "sans", "variant", { size: "sm" }), - } + const inactivePaneInactiveTab = { + ...tab, + background: background(layer), + text: text(layer, "sans", "variant", { size: "sm" }), + } - const inactivePaneActiveTab = { - ...tab, - background: background(activeLayer), - text: text(layer, "sans", "variant", { size: "sm" }), - border: { - ...tab.border, - bottom: false, - }, - } + const inactivePaneActiveTab = { + ...tab, + background: background(activeLayer), + text: text(layer, "sans", "variant", { size: "sm" }), + border: { + ...tab.border, + bottom: false, + }, + } - const draggedTab = { - ...activePaneActiveTab, - background: withOpacity(tab.background, 0.9), - border: undefined as any, - shadow: colorScheme.popoverShadow, - } + const draggedTab = { + ...activePaneActiveTab, + background: withOpacity(tab.background, 0.9), + border: undefined as any, + shadow: colorScheme.popoverShadow, + } - return { - height, - background: background(layer), - activePane: { - activeTab: activePaneActiveTab, - inactiveTab: tab, - }, - inactivePane: { - activeTab: inactivePaneActiveTab, - inactiveTab: inactivePaneInactiveTab, - }, - draggedTab, - paneButton: { - color: foreground(layer, "variant"), - iconWidth: 12, - buttonWidth: activePaneActiveTab.height, - hover: { - color: foreground(layer, "hovered"), - }, - active: { - color: foreground(layer, "accent"), - }, - }, - paneButtonContainer: { - background: tab.background, - border: { - ...tab.border, - right: false, - }, - }, - } + return { + height, + background: background(layer), + activePane: { + activeTab: activePaneActiveTab, + inactiveTab: tab, + }, + inactivePane: { + activeTab: inactivePaneActiveTab, + inactiveTab: inactivePaneInactiveTab, + }, + draggedTab, + paneButton: toggleable(interactive({ + color: foreground(layer, "variant"), + iconWidth: 12, + buttonWidth: activePaneActiveTab.height, + }, + { + hover: { + color: foreground(layer, "hovered"), + } + }), + { + default: { + color: foreground(layer, "accent"), + } + }, + ), + paneButtonContainer: { + background: tab.background, + border: { + ...tab.border, + right: false, + }, + }, + } } diff --git a/styles/src/styleTree/welcome.ts b/styles/src/styleTree/welcome.ts index 10e6e02b95..dbabc55383 100644 --- a/styles/src/styleTree/welcome.ts +++ b/styles/src/styleTree/welcome.ts @@ -1,129 +1,131 @@ import { ColorScheme } from "../theme/colorScheme" import { withOpacity } from "../theme/color" import { - border, - background, - foreground, - text, - TextProperties, - svg, + border, + background, + foreground, + text, + TextProperties, + svg, } from "./components" +import { interactive } from "./interactive" export default function welcome(colorScheme: ColorScheme) { - let layer = colorScheme.highest + let layer = colorScheme.highest - let checkboxBase = { - cornerRadius: 4, - padding: { - left: 3, - right: 3, - top: 3, - bottom: 3, - }, - // shadow: colorScheme.popoverShadow, - border: border(layer), - margin: { - right: 8, - top: 5, - bottom: 5, - }, - } + let checkboxBase = { + cornerRadius: 4, + padding: { + left: 3, + right: 3, + top: 3, + bottom: 3, + }, + // shadow: colorScheme.popoverShadow, + border: border(layer), + margin: { + right: 8, + top: 5, + bottom: 5, + }, + } - let interactive_text_size: TextProperties = { size: "sm" } + let interactive_text_size: TextProperties = { size: "sm" } - return { - pageWidth: 320, - logo: svg(foreground(layer, "default"), "icons/logo_96.svg", 64, 64), - logoSubheading: { - ...text(layer, "sans", "variant", { size: "md" }), - margin: { - top: 10, - bottom: 7, - }, - }, - buttonGroup: { - margin: { - top: 8, - bottom: 16, - }, - }, - headingGroup: { - margin: { - top: 8, - bottom: 12, - }, - }, - checkboxGroup: { - border: border(layer, "variant"), - background: withOpacity(background(layer, "hovered"), 0.25), - cornerRadius: 4, - padding: { - left: 12, - top: 2, - bottom: 2, - }, - }, - button: { - background: background(layer), - border: border(layer, "active"), - cornerRadius: 4, - margin: { - top: 4, - bottom: 4, - }, - padding: { - top: 3, - bottom: 3, - left: 7, - right: 7, - }, - ...text(layer, "sans", "default", interactive_text_size), - hover: { - ...text(layer, "sans", "default", interactive_text_size), - background: background(layer, "hovered"), - border: border(layer, "active"), - }, - }, - usageNote: { - ...text(layer, "sans", "variant", { size: "2xs" }), - padding: { - top: -4, - }, - }, - checkboxContainer: { - margin: { - top: 4, - }, - padding: { - bottom: 8, - }, - }, - checkbox: { - label: { - ...text(layer, "sans", interactive_text_size), - // Also supports margin, container, border, etc. - }, - icon: svg(foreground(layer, "on"), "icons/check_12.svg", 12, 12), - default: { - ...checkboxBase, - background: background(layer, "default"), - border: border(layer, "active"), - }, - checked: { - ...checkboxBase, - background: background(layer, "hovered"), - border: border(layer, "active"), - }, - hovered: { - ...checkboxBase, - background: background(layer, "hovered"), - border: border(layer, "active"), - }, - hoveredAndChecked: { - ...checkboxBase, - background: background(layer, "hovered"), - border: border(layer, "active"), - }, - }, - } + return { + pageWidth: 320, + logo: svg(foreground(layer, "default"), "icons/logo_96.svg", 64, 64), + logoSubheading: { + ...text(layer, "sans", "variant", { size: "md" }), + margin: { + top: 10, + bottom: 7, + }, + }, + buttonGroup: { + margin: { + top: 8, + bottom: 16, + }, + }, + headingGroup: { + margin: { + top: 8, + bottom: 12, + }, + }, + checkboxGroup: { + border: border(layer, "variant"), + background: withOpacity(background(layer, "hovered"), 0.25), + cornerRadius: 4, + padding: { + left: 12, + top: 2, + bottom: 2, + }, + }, + button: interactive({ + background: background(layer), + border: border(layer, "active"), + cornerRadius: 4, + margin: { + top: 4, + bottom: 4, + }, + padding: { + top: 3, + bottom: 3, + left: 7, + right: 7, + }, + ...text(layer, "sans", "default", interactive_text_size) + }, { + hover: { + ...text(layer, "sans", "default", interactive_text_size), + background: background(layer, "hovered"), + } + }), + + usageNote: { + ...text(layer, "sans", "variant", { size: "2xs" }), + padding: { + top: -4, + }, + }, + checkboxContainer: { + margin: { + top: 4, + }, + padding: { + bottom: 8, + }, + }, + checkbox: { + label: { + ...text(layer, "sans", interactive_text_size), + // Also supports margin, container, border, etc. + }, + icon: svg(foreground(layer, "on"), "icons/check_12.svg", 12, 12), + default: { + ...checkboxBase, + background: background(layer, "default"), + border: border(layer, "active"), + }, + checked: { + ...checkboxBase, + background: background(layer, "hovered"), + border: border(layer, "active"), + }, + hovered: { + ...checkboxBase, + background: background(layer, "hovered"), + border: border(layer, "active"), + }, + hoveredAndChecked: { + ...checkboxBase, + background: background(layer, "hovered"), + border: border(layer, "active"), + }, + }, + } } diff --git a/styles/src/styleTree/workspace.ts b/styles/src/styleTree/workspace.ts index ae8de178f8..18341fc51e 100644 --- a/styles/src/styleTree/workspace.ts +++ b/styles/src/styleTree/workspace.ts @@ -1,338 +1,372 @@ import { ColorScheme } from "../theme/colorScheme" import { withOpacity } from "../theme/color" +import { toggleable } from "./toggle" import { - background, - border, - borderColor, - foreground, - svg, - text, + background, + border, + borderColor, + foreground, + svg, + text, } from "./components" import statusBar from "./statusBar" import tabBar from "./tabBar" - +import { interactive } from "./interactive" +import merge from 'ts-deepmerge'; export default function workspace(colorScheme: ColorScheme) { - const layer = colorScheme.lowest - const isLight = colorScheme.isLight - const itemSpacing = 8 - const titlebarButton = { - cornerRadius: 6, - padding: { - top: 1, - bottom: 1, + const layer = colorScheme.lowest + const isLight = colorScheme.isLight + const itemSpacing = 8 + const titlebarButton = toggleable(interactive({ + cornerRadius: 6, + padding: { + top: 1, + bottom: 1, + left: 8, + right: 8, + }, + ...text(layer, "sans", "variant", { size: "xs" }), + background: background(layer, "variant"), + border: border(layer), + }, { + hover: { + ...text(layer, "sans", "variant", "hovered", { size: "xs" }), + background: background(layer, "variant", "hovered"), + border: border(layer, "variant", "hovered"), + }, + clicked: { + ...text(layer, "sans", "variant", "pressed", { size: "xs" }), + background: background(layer, "variant", "pressed"), + border: border(layer, "variant", "pressed"), + } + }), + { + default: { + ...text(layer, "sans", "variant", "active", { size: "xs" }), + background: background(layer, "variant", "active"), + border: border(layer, "variant", "active"), + } + }, + ); + const avatarWidth = 18 + const avatarOuterWidth = avatarWidth + 4 + const followerAvatarWidth = 14 + const followerAvatarOuterWidth = followerAvatarWidth + 4 + + return { + background: background(colorScheme.lowest), + blankPane: { + logoContainer: { + width: 256, + height: 256, + }, + logo: svg( + withOpacity("#000000", colorScheme.isLight ? 0.6 : 0.8), + "icons/logo_96.svg", + 256, + 256 + ), + + logoShadow: svg( + withOpacity( + colorScheme.isLight + ? "#FFFFFF" + : colorScheme.lowest.base.default.background, + colorScheme.isLight ? 1 : 0.6 + ), + "icons/logo_96.svg", + 256, + 256 + ), + keyboardHints: { + margin: { + top: 96, + }, + cornerRadius: 4, + }, + keyboardHint: + interactive({ + ...text(layer, "sans", "variant", { size: "sm" }), + padding: { + top: 3, left: 8, right: 8, + bottom: 3, + }, + cornerRadius: 8 + }, { + hover: { + ...text(layer, "sans", "active", { size: "sm" }), + } + }), + + keyboardHintWidth: 320, + }, + joiningProjectAvatar: { + cornerRadius: 40, + width: 80, + }, + joiningProjectMessage: { + padding: 12, + ...text(layer, "sans", { size: "lg" }), + }, + externalLocationMessage: { + background: background(colorScheme.middle, "accent"), + border: border(colorScheme.middle, "accent"), + cornerRadius: 6, + padding: 12, + margin: { bottom: 8, right: 8 }, + ...text(colorScheme.middle, "sans", "accent", { size: "xs" }), + }, + leaderBorderOpacity: 0.7, + leaderBorderWidth: 2.0, + tabBar: tabBar(colorScheme), + modal: { + margin: { + bottom: 52, + top: 52, + }, + cursor: "Arrow", + }, + zoomedBackground: { + cursor: "Arrow", + background: isLight + ? withOpacity(background(colorScheme.lowest), 0.8) + : withOpacity(background(colorScheme.highest), 0.6), + }, + zoomedPaneForeground: { + margin: 16, + shadow: colorScheme.modalShadow, + border: border(colorScheme.lowest, { overlay: true }), + }, + zoomedPanelForeground: { + margin: 16, + border: border(colorScheme.lowest, { overlay: true }), + }, + dock: { + left: { + border: border(layer, { right: true }), + }, + bottom: { + border: border(layer, { top: true }), + }, + right: { + border: border(layer, { left: true }), + }, + }, + paneDivider: { + color: borderColor(layer), + width: 1, + }, + statusBar: statusBar(colorScheme), + titlebar: { + itemSpacing, + facePileSpacing: 2, + height: 33, // 32px + 1px border. It's important the content area of the titlebar is evenly sized to vertically center avatar images. + background: background(layer), + border: border(layer, { bottom: true }), + padding: { + left: 80, + right: itemSpacing, + }, + + // Project + title: text(layer, "sans", "variant"), + highlight_color: text(layer, "sans", "active").color, + + // Collaborators + leaderAvatar: { + width: avatarWidth, + outerWidth: avatarOuterWidth, + cornerRadius: avatarWidth / 2, + outerCornerRadius: avatarOuterWidth / 2, + }, + followerAvatar: { + width: followerAvatarWidth, + outerWidth: followerAvatarOuterWidth, + cornerRadius: followerAvatarWidth / 2, + outerCornerRadius: followerAvatarOuterWidth / 2, + }, + inactiveAvatarGrayscale: true, + followerAvatarOverlap: 8, + leaderSelection: { + margin: { + top: 4, + bottom: 4, }, - ...text(layer, "sans", "variant", { size: "xs" }), - background: background(layer, "variant"), - border: border(layer), + padding: { + left: 2, + right: 2, + top: 2, + bottom: 2, + }, + cornerRadius: 6, + }, + avatarRibbon: { + height: 3, + width: 12, + // TODO: Chore: Make avatarRibbon colors driven by the theme rather than being hard coded. + }, + + // Sign in buttom + // FlatButton, Variant + signInPrompt: + merge(titlebarButton, + { + inactive: { + default: { + margin: { + left: itemSpacing, + }, + } + } + }), + + + // Offline Indicator + offlineIcon: { + color: foreground(layer, "variant"), + width: 16, + margin: { + left: itemSpacing, + }, + padding: { + right: 4, + }, + }, + + // Notice that the collaboration server is out of date + outdatedWarning: { + ...text(layer, "sans", "warning", { size: "xs" }), + background: withOpacity(background(layer, "warning"), 0.3), + border: border(layer, "warning"), + margin: { + left: itemSpacing, + }, + padding: { + left: 8, + right: 8, + }, + cornerRadius: 6, + }, + callControl: interactive({ + cornerRadius: 6, + color: foreground(layer, "variant"), + iconWidth: 12, + buttonWidth: 20, + }, { hover: { - ...text(layer, "sans", "variant", "hovered", { size: "xs" }), - background: background(layer, "variant", "hovered"), - border: border(layer, "variant", "hovered"), + background: background(layer, "variant", "hovered"), + color: foreground(layer, "variant", "hovered"), }, - clicked: { - ...text(layer, "sans", "variant", "pressed", { size: "xs" }), + }), + toggleContactsButton: toggleable(interactive({ + margin: { left: itemSpacing }, + cornerRadius: 6, + color: foreground(layer, "variant"), + iconWidth: 14, + buttonWidth: 20, + }, + { + clicked: { background: background(layer, "variant", "pressed"), - border: border(layer, "variant", "pressed"), - }, - active: { - ...text(layer, "sans", "variant", "active", { size: "xs" }), + color: foreground(layer, "variant", "pressed"), + }, + hover: { + background: background(layer, "variant", "hovered"), + color: foreground(layer, "variant", "hovered"), + } + }), + { + default: { background: background(layer, "variant", "active"), - border: border(layer, "variant", "active"), + color: foreground(layer, "variant", "active") + } }, - } - const avatarWidth = 18 - const avatarOuterWidth = avatarWidth + 4 - const followerAvatarWidth = 14 - const followerAvatarOuterWidth = followerAvatarWidth + 4 + ), + userMenuButton: merge(titlebarButton, { + inactive: { + default: { + buttonWidth: 20, + iconWidth: 12 + } + }, active: { // posiewic: these properties are not currently set on main + default: { + iconWidth: 12, + button_width: 20, + } + } + }), - return { - background: background(colorScheme.lowest), - blankPane: { - logoContainer: { - width: 256, - height: 256, - }, - logo: svg( - withOpacity("#000000", colorScheme.isLight ? 0.6 : 0.8), - "icons/logo_96.svg", - 256, - 256 - ), - logoShadow: svg( - withOpacity( - colorScheme.isLight - ? "#FFFFFF" - : colorScheme.lowest.base.default.background, - colorScheme.isLight ? 1 : 0.6 - ), - "icons/logo_96.svg", - 256, - 256 - ), - keyboardHints: { - margin: { - top: 96, - }, - cornerRadius: 4, - }, - keyboardHint: { - ...text(layer, "sans", "variant", { size: "sm" }), - padding: { - top: 3, - left: 8, - right: 8, - bottom: 3, - }, - cornerRadius: 8, - hover: { - ...text(layer, "sans", "active", { size: "sm" }), - }, - }, - keyboardHintWidth: 320, - }, - joiningProjectAvatar: { - cornerRadius: 40, - width: 80, - }, - joiningProjectMessage: { - padding: 12, - ...text(layer, "sans", { size: "lg" }), - }, - externalLocationMessage: { - background: background(colorScheme.middle, "accent"), - border: border(colorScheme.middle, "accent"), - cornerRadius: 6, - padding: 12, - margin: { bottom: 8, right: 8 }, - ...text(colorScheme.middle, "sans", "accent", { size: "xs" }), - }, - leaderBorderOpacity: 0.7, - leaderBorderWidth: 2.0, - tabBar: tabBar(colorScheme), - modal: { - margin: { - bottom: 52, - top: 52, - }, - cursor: "Arrow", - }, - zoomedBackground: { - cursor: "Arrow", - background: isLight - ? withOpacity(background(colorScheme.lowest), 0.8) - : withOpacity(background(colorScheme.highest), 0.6), - }, - zoomedPaneForeground: { - margin: 16, - shadow: colorScheme.modalShadow, - border: border(colorScheme.lowest, { overlay: true }), - }, - zoomedPanelForeground: { - margin: 16, - border: border(colorScheme.lowest, { overlay: true }), - }, - dock: { - left: { - border: border(layer, { right: true }), - }, - bottom: { - border: border(layer, { top: true }), - }, - right: { - border: border(layer, { left: true }), - }, - }, - paneDivider: { - color: borderColor(layer), - width: 1, - }, - statusBar: statusBar(colorScheme), - titlebar: { - itemSpacing, - facePileSpacing: 2, - height: 33, // 32px + 1px border. It's important the content area of the titlebar is evenly sized to vertically center avatar images. - background: background(layer), - border: border(layer, { bottom: true }), - padding: { - left: 80, - right: itemSpacing, - }, + toggleContactsBadge: { + cornerRadius: 3, + padding: 2, + margin: { top: 3, left: 3 }, + border: border(layer), + background: foreground(layer, "accent"), + }, + shareButton: { + ...titlebarButton, + }, + }, - // Project - title: text(layer, "sans", "variant"), - highlight_color: text(layer, "sans", "active").color, - - // Collaborators - leaderAvatar: { - width: avatarWidth, - outerWidth: avatarOuterWidth, - cornerRadius: avatarWidth / 2, - outerCornerRadius: avatarOuterWidth / 2, - }, - followerAvatar: { - width: followerAvatarWidth, - outerWidth: followerAvatarOuterWidth, - cornerRadius: followerAvatarWidth / 2, - outerCornerRadius: followerAvatarOuterWidth / 2, - }, - inactiveAvatarGrayscale: true, - followerAvatarOverlap: 8, - leaderSelection: { - margin: { - top: 4, - bottom: 4, - }, - padding: { - left: 2, - right: 2, - top: 2, - bottom: 2, - }, - cornerRadius: 6, - }, - avatarRibbon: { - height: 3, - width: 12, - // TODO: Chore: Make avatarRibbon colors driven by the theme rather than being hard coded. - }, - - // Sign in buttom - // FlatButton, Variant - signInPrompt: { - margin: { - left: itemSpacing, - }, - ...titlebarButton, - }, - - // Offline Indicator - offlineIcon: { - color: foreground(layer, "variant"), - width: 16, - margin: { - left: itemSpacing, - }, - padding: { - right: 4, - }, - }, - - // Notice that the collaboration server is out of date - outdatedWarning: { - ...text(layer, "sans", "warning", { size: "xs" }), - background: withOpacity(background(layer, "warning"), 0.3), - border: border(layer, "warning"), - margin: { - left: itemSpacing, - }, - padding: { - left: 8, - right: 8, - }, - cornerRadius: 6, - }, - callControl: { - cornerRadius: 6, - color: foreground(layer, "variant"), - iconWidth: 12, - buttonWidth: 20, - hover: { - background: background(layer, "variant", "hovered"), - color: foreground(layer, "variant", "hovered"), - }, - }, - toggleContactsButton: { - margin: { left: itemSpacing }, - cornerRadius: 6, - color: foreground(layer, "variant"), - iconWidth: 14, - buttonWidth: 20, - active: { - background: background(layer, "variant", "active"), - color: foreground(layer, "variant", "active"), - }, - clicked: { - background: background(layer, "variant", "pressed"), - color: foreground(layer, "variant", "pressed"), - }, - hover: { - background: background(layer, "variant", "hovered"), - color: foreground(layer, "variant", "hovered"), - }, - }, - userMenuButton: { - buttonWidth: 20, - iconWidth: 12, - ...titlebarButton, - }, - toggleContactsBadge: { - cornerRadius: 3, - padding: 2, - margin: { top: 3, left: 3 }, - border: border(layer), - background: foreground(layer, "accent"), - }, - shareButton: { - ...titlebarButton, - }, + toolbar: { + height: 34, + background: background(colorScheme.highest), + border: border(colorScheme.highest, { bottom: true }), + itemSpacing: 8, + navButton: interactive( + { + color: foreground(colorScheme.highest, "on"), + iconWidth: 12, + buttonWidth: 24, + cornerRadius: 6, + }, { + hover: { + color: foreground(colorScheme.highest, "on", "hovered"), + background: background( + colorScheme.highest, + "on", + "hovered" + ), }, - - toolbar: { - height: 34, - background: background(colorScheme.highest), - border: border(colorScheme.highest, { bottom: true }), - itemSpacing: 8, - navButton: { - color: foreground(colorScheme.highest, "on"), - iconWidth: 12, - buttonWidth: 24, - cornerRadius: 6, - hover: { - color: foreground(colorScheme.highest, "on", "hovered"), - background: background( - colorScheme.highest, - "on", - "hovered" - ), - }, - disabled: { - color: foreground(colorScheme.highest, "on", "disabled"), - }, - }, - padding: { left: 8, right: 8, top: 4, bottom: 4 }, + disabled: { + color: foreground(colorScheme.highest, "on", "disabled"), }, - breadcrumbHeight: 24, - breadcrumbs: { - ...text(colorScheme.highest, "sans", "variant"), - cornerRadius: 6, - padding: { - left: 6, - right: 6, - }, - hover: { - color: foreground(colorScheme.highest, "on", "hovered"), - background: background(colorScheme.highest, "on", "hovered"), - }, - }, - disconnectedOverlay: { - ...text(layer, "sans"), - background: withOpacity(background(layer), 0.8), - }, - notification: { - margin: { top: 10 }, - background: background(colorScheme.middle), - cornerRadius: 6, - padding: 12, - border: border(colorScheme.middle), - shadow: colorScheme.popoverShadow, - }, - notifications: { - width: 400, - margin: { right: 10, bottom: 10 }, - }, - dropTargetOverlayColor: withOpacity(foreground(layer, "variant"), 0.5), - } + }), + padding: { left: 8, right: 8, top: 4, bottom: 4 }, + }, + breadcrumbHeight: 24, + breadcrumbs: interactive({ + ...text(colorScheme.highest, "sans", "variant"), + cornerRadius: 6, + padding: { + left: 6, + right: 6, + } + }, { + hover: { + color: foreground(colorScheme.highest, "on", "hovered"), + background: background(colorScheme.highest, "on", "hovered"), + }, + }), + disconnectedOverlay: { + ...text(layer, "sans"), + background: withOpacity(background(layer), 0.8), + }, + notification: { + margin: { top: 10 }, + background: background(colorScheme.middle), + cornerRadius: 6, + padding: 12, + border: border(colorScheme.middle), + shadow: colorScheme.popoverShadow, + }, + notifications: { + width: 400, + margin: { right: 10, bottom: 10 }, + }, + dropTargetOverlayColor: withOpacity(foreground(layer, "variant"), 0.5), + } } From 16564707df836c12fe785dc6aa51999bdded0b4b Mon Sep 17 00:00:00 2001 From: Nate Butler Date: Thu, 15 Jun 2023 11:10:37 -0400 Subject: [PATCH 31/56] Use TS-flavored doc comments --- styles/src/styleTree/interactive.ts | 54 +++++++++++++++----------- styles/src/styleTree/toggle.ts | 60 ++++++++++++++++------------- 2 files changed, 64 insertions(+), 50 deletions(-) diff --git a/styles/src/styleTree/interactive.ts b/styles/src/styleTree/interactive.ts index 7135cecd90..230a05515d 100644 --- a/styles/src/styleTree/interactive.ts +++ b/styles/src/styleTree/interactive.ts @@ -1,33 +1,41 @@ import { DeepPartial } from "utility-types"; import merge from "ts-deepmerge" interface Interactive { - default: T, - hover?: T, - clicked?: T, - disabled?: T, + default: T, + hover?: T, + clicked?: T, + disabled?: T, } -// Helper function for creating Interactive objects that works pretty much like Toggle. -// It takes a object to be used as a value for `default` field and then fills out other fields -// with fields from either `base` or `modifications`. Notably, it does not touch `hover`, `clicked` and `disabled` if there are no modifications for it. +/** + * Helper function for creating Interactive objects that works pretty much like Toggle. + * It takes a object to be used as a value for `default` field and then fills out other fields + * with fields from either `base` or `modifications`. + * Notably, it does not touch `hover`, `clicked` and `disabled` if there are no modifications for it. + * + * @param defaultObj Object to be used as the value for `default` field. + * @param base Object containing base fields to be included in the resulting object. + * @param modifications Object containing modified fields to be included in the resulting object. + * @returns Interactive object with fields from `base` and `modifications`. + */ export function interactive(base: T, modifications: DeepPartial>): Interactive { - let interactiveObj: Interactive = { - default: base, - }; - if (modifications.default !== undefined) { - interactiveObj.default = merge(interactiveObj.default, modifications.default) as T; - } - if (modifications.hover !== undefined) { - interactiveObj.hover = merge(interactiveObj.default, modifications.hover) as T; - } + let interactiveObj: Interactive = { + default: base, + }; + if (modifications.default !== undefined) { + interactiveObj.default = merge(interactiveObj.default, modifications.default) as T; + } + if (modifications.hover !== undefined) { + interactiveObj.hover = merge(interactiveObj.default, modifications.hover) as T; + } - if (modifications.clicked !== undefined) { - interactiveObj.clicked = merge(interactiveObj.default, modifications.clicked) as T; - } + if (modifications.clicked !== undefined) { + interactiveObj.clicked = merge(interactiveObj.default, modifications.clicked) as T; + } - if (modifications.disabled !== undefined) { - interactiveObj.disabled = merge(interactiveObj.default, modifications.disabled) as T; - } + if (modifications.disabled !== undefined) { + interactiveObj.disabled = merge(interactiveObj.default, modifications.disabled) as T; + } - return interactiveObj; + return interactiveObj; } diff --git a/styles/src/styleTree/toggle.ts b/styles/src/styleTree/toggle.ts index 9c35b8337c..d6b37dde9e 100644 --- a/styles/src/styleTree/toggle.ts +++ b/styles/src/styleTree/toggle.ts @@ -2,34 +2,40 @@ import { DeepPartial } from 'utility-types'; import merge from 'ts-deepmerge'; interface Toggleable { - inactive: T - active: T, + inactive: T + active: T, } -/// Helper function for creating Toggleable objects; it takes a object of type T that is used as -/// `inactive` member of result Toggleable. `active` member is created by applying `modifications` on top of `inactive` argument. -// Thus, the following call: -// ``` -// toggleable({day: 1, month: "January"}, {day: 3}) -// ``` -// To return the following object: -// ``` -// Toggleable<_>{ -// inactive: { day: 1, month: "January" }, -// active: { day: 3, month: "January" } -// } -// ``` -// Remarkably, it also works for nested structures: -// ``` -// toggleable({first_level: "foo", second_level: {nested_member: "nested"}}, {second_level: {nested_member: "another nested thing"}}) -// ``` -// ``` -// Toggleable<_> { -// inactive: {first_level: "foo", second_level: {nested_member: "nested"}}, -// active: { first_level: "foo", second_level: {nested_member: "another nested thing"}} -// } -// ``` +/** + * Helper function for creating Toggleable objects. + * @template T The type of the object being toggled. + * @param inactive The initial state of the toggleable object. + * @param modifications The modifications to be applied to the initial state to create the active state. + * @returns A Toggleable object containing both the inactive and active states. + * @example + * ``` + * toggleable({day: 1, month: "January"}, {day: 3}) + * ``` + * This returns the following object: + * ``` + * Toggleable<_>{ + * inactive: { day: 1, month: "January" }, + * active: { day: 3, month: "January" } + * } + * ``` + * The function also works for nested structures: + * ``` + * toggleable({first_level: "foo", second_level: {nested_member: "nested"}}, {second_level: {nested_member: "another nested thing"}}) + * ``` + * Which returns: + * ``` + * Toggleable<_> { + * inactive: {first_level: "foo", second_level: {nested_member: "nested"}}, + * active: { first_level: "foo", second_level: {nested_member: "another nested thing"}} + * } + * ``` + */ export function toggleable(inactive: T, modifications: DeepPartial): Toggleable { - let active: T = merge(inactive, modifications) as T; - return { active: active, inactive: inactive }; + let active: T = merge(inactive, modifications) as T; + return { active: active, inactive: inactive }; } From 247f618d4f5419acacf86e4ac3b276437a755990 Mon Sep 17 00:00:00 2001 From: Nate Butler Date: Thu, 15 Jun 2023 15:33:02 -0400 Subject: [PATCH 32/56] Update the interactive function --- styles/src/styleTree/interactive.ts | 58 ++++++++++++++++++++++------- 1 file changed, 44 insertions(+), 14 deletions(-) diff --git a/styles/src/styleTree/interactive.ts b/styles/src/styleTree/interactive.ts index 230a05515d..6bc6ca048b 100644 --- a/styles/src/styleTree/interactive.ts +++ b/styles/src/styleTree/interactive.ts @@ -1,10 +1,18 @@ -import { DeepPartial } from "utility-types"; import merge from "ts-deepmerge" -interface Interactive { + +type InteractiveState = "default" | "hovered" | "clicked" | "selected" | "disabled"; + +type Interactive = { default: T, - hover?: T, + hovered?: T, clicked?: T, + selected?: T, disabled?: T, +}; + +interface InteractiveProps { + base?: T, + state: Partial> } /** @@ -18,23 +26,45 @@ interface Interactive { * @param modifications Object containing modified fields to be included in the resulting object. * @returns Interactive object with fields from `base` and `modifications`. */ -export function interactive(base: T, modifications: DeepPartial>): Interactive { +export function interactive({ base, state }: InteractiveProps): Interactive { + if (!base && !state.default) throw new Error("An interactive object must have a default state, or a base property."); + + let defaultState: T; + + if (state.default && base) { + defaultState = merge(base, state.default) as T; + } else { + defaultState = base ? base : state.default as T; + } + let interactiveObj: Interactive = { - default: base, + default: defaultState, }; - if (modifications.default !== undefined) { - interactiveObj.default = merge(interactiveObj.default, modifications.default) as T; - } - if (modifications.hover !== undefined) { - interactiveObj.hover = merge(interactiveObj.default, modifications.hover) as T; + + let stateCount = 0; + + if (state.hovered !== undefined) { + interactiveObj.hovered = merge(interactiveObj.default, state.hovered) as T; + stateCount++; } - if (modifications.clicked !== undefined) { - interactiveObj.clicked = merge(interactiveObj.default, modifications.clicked) as T; + if (state.clicked !== undefined) { + interactiveObj.clicked = merge(interactiveObj.default, state.clicked) as T; + stateCount++; } - if (modifications.disabled !== undefined) { - interactiveObj.disabled = merge(interactiveObj.default, modifications.disabled) as T; + if (state.selected !== undefined) { + interactiveObj.selected = merge(interactiveObj.default, state.selected) as T; + stateCount++; + } + + if (state.disabled !== undefined) { + interactiveObj.disabled = merge(interactiveObj.default, state.disabled) as T; + stateCount++; + } + + if (stateCount < 1) { + throw new Error("An interactive object must have a default and at least one other state."); } return interactiveObj; From 63630949ba96ef6b0b36aafad7558d31774e92b1 Mon Sep 17 00:00:00 2001 From: Piotr Osiewicz <24362066+osiewicz@users.noreply.github.com> Date: Thu, 15 Jun 2023 21:58:08 +0200 Subject: [PATCH 33/56] Fix up uses of interactive --- styles/src/styleTree/commandPalette.ts | 32 ++-- styles/src/styleTree/contactList.ts | 79 +++++----- styles/src/styleTree/contactNotification.ts | 20 +-- styles/src/styleTree/contextMenu.ts | 40 ++--- styles/src/styleTree/copilot.ts | 112 ++++++------- styles/src/styleTree/editor.ts | 64 ++++---- styles/src/styleTree/picker.ts | 37 +++-- styles/src/styleTree/projectPanel.ts | 58 +++---- styles/src/styleTree/statusBar.ts | 128 ++++++++------- styles/src/styleTree/tabBar.ts | 16 +- styles/src/styleTree/welcome.ts | 38 ++--- styles/src/styleTree/workspace.ts | 164 +++++++++++--------- 12 files changed, 425 insertions(+), 363 deletions(-) diff --git a/styles/src/styleTree/commandPalette.ts b/styles/src/styleTree/commandPalette.ts index 5fe7b74f92..d6cb196770 100644 --- a/styles/src/styleTree/commandPalette.ts +++ b/styles/src/styleTree/commandPalette.ts @@ -10,21 +10,23 @@ export default function commandPalette(colorScheme: ColorScheme) { keystrokeSpacing: 8, key: toggleable(interactive({ - text: text(layer, "mono", "variant", "default", { size: "xs" }), - cornerRadius: 2, - background: background(layer, "on"), - padding: { - top: 1, - bottom: 1, - left: 6, - right: 6, - }, - margin: { - top: 1, - bottom: 1, - left: 2, - }, - }, { hover: { cornerRadius: 4, padding: { top: 17 } } }), { + base: { + text: text(layer, "mono", "variant", "default", { size: "xs" }), + cornerRadius: 2, + background: background(layer, "on"), + padding: { + top: 1, + bottom: 1, + left: 6, + right: 6, + }, + margin: { + top: 1, + bottom: 1, + left: 2, + }, + }, state: { hovered: { cornerRadius: 4, padding: { top: 17 } } } + }), { default: { text: text(layer, "mono", "on", "default", { size: "xs" }), background: withOpacity(background(layer, "on"), 0.2), diff --git a/styles/src/styleTree/contactList.ts b/styles/src/styleTree/contactList.ts index b3e30f4aa7..5837720401 100644 --- a/styles/src/styleTree/contactList.ts +++ b/styles/src/styleTree/contactList.ts @@ -73,14 +73,17 @@ export default function contactsPanel(colorScheme: ColorScheme) { rowHeight: 28, sectionIconSize: 8, headerRow: toggleable(interactive({ - ...text(layer, "mono", { size: "sm" }), - margin: { top: 14 }, - padding: { - left: sidePadding, - right: sidePadding, - }, - background: background(layer, "default"),// posiewic: breaking change - }, {}), + base: { + ...text(layer, "mono", { size: "sm" }), + margin: { top: 14 }, + padding: { + left: sidePadding, + right: sidePadding, + }, + background: background(layer, "default"),// posiewic: breaking change + } + , state: { hovered: { background: background(layer, "default") } } // hack, we want headerRow to be interactive for whatever reason. It probably shouldn't be interactive in the first place. + }), { default: { ...text(layer, "mono", "active", { size: "sm" }), @@ -88,27 +91,30 @@ export default function contactsPanel(colorScheme: ColorScheme) { }, }), leaveCall: interactive({ - background: background(layer), - border: border(layer), - cornerRadius: 6, - margin: { - top: 1, - }, - padding: { - top: 1, - bottom: 1, - left: 7, - right: 7, - }, - ...text(layer, "sans", "variant", { size: "xs" }), - }, - { - hover: { + base: { + background: background(layer), + border: border(layer), + cornerRadius: 6, + margin: { + top: 1, + }, + padding: { + top: 1, + bottom: 1, + left: 7, + right: 7, + }, + ...text(layer, "sans", "variant", { size: "xs" }), + } + , + state: { + hovered: { ...text(layer, "sans", "hovered", { size: "xs" }), background: background(layer, "hovered"), border: border(layer, "hovered"), } } + } ), contactRow: { inactive: { @@ -153,13 +159,14 @@ export default function contactsPanel(colorScheme: ColorScheme) { }, }, contactButtonSpacing: nameMargin, - contactButton: interactive( - contactButton, - { - hover: { + contactButton: interactive({ + base: { ...contactButton }, + state: { + hovered: { background: background(layer, "hovered"), }, - }), + } + }), disabledButton: { ...contactButton, background: background(layer, "on"), @@ -169,14 +176,16 @@ export default function contactsPanel(colorScheme: ColorScheme) { ...text(layer, "mono", "variant", { size: "xs" }), }, treeBranch: toggleable(interactive({ - color: borderColor(layer), - width: 1, - }, - { - hover: { + base: { + color: borderColor(layer), + width: 1, + }, + state: { + hovered: { color: borderColor(layer), }, - }), + } + }), { default: { color: borderColor(layer), diff --git a/styles/src/styleTree/contactNotification.ts b/styles/src/styleTree/contactNotification.ts index edef8dac20..5b29e15e6b 100644 --- a/styles/src/styleTree/contactNotification.ts +++ b/styles/src/styleTree/contactNotification.ts @@ -23,18 +23,20 @@ export default function contactNotification(colorScheme: ColorScheme): Object { }, button: interactive({ - ...text(layer, "sans", "on", { size: "xs" }), - background: background(layer, "on"), - padding: 4, - cornerRadius: 6, - margin: { left: 6 } - }, + base: { + ...text(layer, "sans", "on", { size: "xs" }), + background: background(layer, "on"), + padding: 4, + cornerRadius: 6, + margin: { left: 6 } + }, - { - hover: { + state: { + hovered: { background: background(layer, "on", "hovered"), } - }), + } + }), dismissButton: { default: { diff --git a/styles/src/styleTree/contextMenu.ts b/styles/src/styleTree/contextMenu.ts index b030d27972..2d5e84dcf0 100644 --- a/styles/src/styleTree/contextMenu.ts +++ b/styles/src/styleTree/contextMenu.ts @@ -13,35 +13,37 @@ export default function contextMenu(colorScheme: ColorScheme) { border: border(layer), keystrokeMargin: 30, item: toggleable(interactive({ - iconSpacing: 8, - iconWidth: 14, - padding: { left: 6, right: 6, top: 2, bottom: 2 }, - cornerRadius: 6, - label: text(layer, "sans", { size: "sm" }), - keystroke: { - ...text(layer, "sans", "variant", { - size: "sm", - weight: "bold", - }), - padding: { left: 3, right: 3 }, - } - }, { - hover: { - background: background(layer, "hovered"), - label: text(layer, "sans", "hovered", { size: "sm" }), + base: { + iconSpacing: 8, + iconWidth: 14, + padding: { left: 6, right: 6, top: 2, bottom: 2 }, + cornerRadius: 6, + label: text(layer, "sans", { size: "sm" }), keystroke: { - ...text(layer, "sans", "hovered", { + ...text(layer, "sans", "variant", { size: "sm", weight: "bold", }), padding: { left: 3, right: 3 }, - }, + } + }, state: { + hovered: { + background: background(layer, "hovered"), + label: text(layer, "sans", "hovered", { size: "sm" }), + keystroke: { + ...text(layer, "sans", "hovered", { + size: "sm", + weight: "bold", + }), + padding: { left: 3, right: 3 }, + }, + } } }), { default: { background: background(layer, "active"), }, - hover: { + hovered: { background: background(layer, "active"), }, }), diff --git a/styles/src/styleTree/copilot.ts b/styles/src/styleTree/copilot.ts index 090d05eaee..6440941e64 100644 --- a/styles/src/styleTree/copilot.ts +++ b/styles/src/styleTree/copilot.ts @@ -9,53 +9,57 @@ export default function copilot(colorScheme: ColorScheme) { let ctaButton = // Copied from welcome screen. FIXME: Move this into a ZDS component interactive({ - background: background(layer), - border: border(layer, "default"), - cornerRadius: 4, - margin: { - top: 4, - bottom: 4, - left: 8, - right: 8, + base: { + background: background(layer), + border: border(layer, "default"), + cornerRadius: 4, + margin: { + top: 4, + bottom: 4, + left: 8, + right: 8, + }, + padding: { + top: 3, + bottom: 3, + left: 7, + right: 7, + }, + ...text(layer, "sans", "default", { size: "sm" }) }, - padding: { - top: 3, - bottom: 3, - left: 7, - right: 7, - }, - ...text(layer, "sans", "default", { size: "sm" }) - }, - { - hover: { + state: { + hovered: { ...text(layer, "sans", "default", { size: "sm" }), background: background(layer, "hovered"), border: border(layer, "active"), }, - }); + } + }); return { outLinkIcon: interactive({ - icon: svg( - foreground(layer, "variant"), - "icons/link_out_12.svg", - 12, - 12 - ), - container: { - cornerRadius: 6, - padding: { left: 6 }, + base: { + icon: svg( + foreground(layer, "variant"), + "icons/link_out_12.svg", + 12, + 12 + ), + container: { + cornerRadius: 6, + padding: { left: 6 }, + }, }, - }, - { - hover: { + state: { + hovered: { icon: { color: foreground(layer, "hovered") } }, - }), + } + }), modal: { titleText: { @@ -82,7 +86,8 @@ export default function copilot(colorScheme: ColorScheme) { bottom: 8, }, }, - closeIcon: interactive( + closeIcon: interactive({ + base: { icon: svg( foreground(layer, "variant"), @@ -103,8 +108,8 @@ export default function copilot(colorScheme: ColorScheme) { }, } }, - { - hover: { + state: { + hovered: { icon: svg( foreground(layer, "on"), "icons/x_mark_8.svg", @@ -120,7 +125,8 @@ export default function copilot(colorScheme: ColorScheme) { 8 ), }, - }), + } + }), dimensions: { width: 280, height: 280, @@ -196,27 +202,29 @@ export default function copilot(colorScheme: ColorScheme) { }, right: (content_width * 1) / 3, rightContainer: interactive({ - border: border(colorScheme.lowest, "inverted", { - bottom: false, - right: false, - top: false, - left: true, - }), - padding: { - top: 3, - bottom: 5, - left: 8, - right: 0, - } - }, { - hover: { - border: border(layer, "active", { + base: { + border: border(colorScheme.lowest, "inverted", { bottom: false, right: false, top: false, left: true, }), - }, + padding: { + top: 3, + bottom: 5, + left: 8, + right: 0, + } + }, state: { + hovered: { + border: border(layer, "active", { + bottom: false, + right: false, + top: false, + left: true, + }), + }, + } }) }, }, diff --git a/styles/src/styleTree/editor.ts b/styles/src/styleTree/editor.ts index ac7447de42..b3b22f3c8b 100644 --- a/styles/src/styleTree/editor.ts +++ b/styles/src/styleTree/editor.ts @@ -51,14 +51,16 @@ export default function editor(colorScheme: ColorScheme) { suggestion: syntax.predictive, codeActions: { indicator: toggleable(interactive({ - color: foreground(layer, "variant"), - }, { - clicked: { - color: foreground(layer, "base"), - }, - hover: { - color: foreground(layer, "on"), - }, + base: { + color: foreground(layer, "variant"), + }, state: { + clicked: { + color: foreground(layer, "base"), + }, + hovered: { + color: foreground(layer, "on"), + }, + } }), { default: { @@ -73,14 +75,16 @@ export default function editor(colorScheme: ColorScheme) { foldedIcon: "icons/chevron_right_8.svg", foldableIcon: "icons/chevron_down_8.svg", indicator: toggleable(interactive({ - color: foreground(layer, "variant"), - }, { - clicked: { - color: foreground(layer, "base"), - }, - hover: { - color: foreground(layer, "on"), - }, + base: { + color: foreground(layer, "variant"), + }, state: { + clicked: { + color: foreground(layer, "base"), + }, + hovered: { + color: foreground(layer, "on"), + }, + } }), { default: { @@ -231,19 +235,21 @@ export default function editor(colorScheme: ColorScheme) { underline: syntax.linkUri.underline, }, jumpIcon: interactive({ - color: foreground(layer, "on"), - iconWidth: 20, - buttonWidth: 20, - cornerRadius: 6, - padding: { - top: 6, - bottom: 6, - left: 6, - right: 6, - } - }, { - hover: { - background: background(layer, "on", "hovered"), + base: { + color: foreground(layer, "on"), + iconWidth: 20, + buttonWidth: 20, + cornerRadius: 6, + padding: { + top: 6, + bottom: 6, + left: 6, + right: 6, + } + }, state: { + hovered: { + background: background(layer, "on", "hovered"), + } } }), diff --git a/styles/src/styleTree/picker.ts b/styles/src/styleTree/picker.ts index ecf34a9927..89b6cd0614 100644 --- a/styles/src/styleTree/picker.ts +++ b/styles/src/styleTree/picker.ts @@ -41,23 +41,26 @@ export default function picker(colorScheme: ColorScheme): any { padding: {}, }, item: toggleable(interactive({ - padding: { - bottom: 4, - left: 12, - right: 12, - top: 4, - }, - margin: { - top: 1, - left: 4, - right: 4, - }, - cornerRadius: 8, - text: text(layer, "sans", "variant"), - highlightText: text(layer, "sans", "accent", { weight: "bold" }), - }, { - hover: { - background: withOpacity(background(layer, "hovered"), 0.5), + base: { + padding: { + bottom: 4, + left: 12, + right: 12, + top: 4, + }, + margin: { + top: 1, + left: 4, + right: 4, + }, + cornerRadius: 8, + text: text(layer, "sans", "variant"), + highlightText: text(layer, "sans", "accent", { weight: "bold" }), + } + , state: { + hovered: { + background: withOpacity(background(layer, "hovered"), 0.5), + } } }), { diff --git a/styles/src/styleTree/projectPanel.ts b/styles/src/styleTree/projectPanel.ts index 57abd0dafc..782c781156 100644 --- a/styles/src/styleTree/projectPanel.ts +++ b/styles/src/styleTree/projectPanel.ts @@ -30,15 +30,17 @@ export default function projectPanel(colorScheme: ColorScheme) { } let entry = toggleable(interactive({ - ...baseEntry, - text: text(layer, "mono", "variant", { size: "sm" }), - status, - }, + base: { + ...baseEntry, + text: text(layer, "mono", "variant", { size: "sm" }), + status, + }, state: { - hover: { + hovered: { background: background(layer, "variant", "hovered"), } - }), + } + }), { default: { /*background: colorScheme.isLight @@ -46,7 +48,7 @@ export default function projectPanel(colorScheme: ColorScheme) { : background(layer, "active") ,*/ // todo posiewic text: text(layer, "mono", "active", { size: "sm" }), }, - hover: { + hovered: { //background: background(layer, "active"), text: text(layer, "mono", "active", { size: "sm" }), }, @@ -55,27 +57,29 @@ export default function projectPanel(colorScheme: ColorScheme) { return { openProjectButton: interactive({ - background: background(layer), - border: border(layer, "active"), - cornerRadius: 4, - margin: { - top: 16, - left: 16, - right: 16, - }, - padding: { - top: 3, - bottom: 3, - left: 7, - right: 7, - }, - ...text(layer, "sans", "default", { size: "sm" }) - }, { - hover: { - ...text(layer, "sans", "default", { size: "sm" }), - background: background(layer, "hovered"), + base: { + background: background(layer), border: border(layer, "active"), - }, + cornerRadius: 4, + margin: { + top: 16, + left: 16, + right: 16, + }, + padding: { + top: 3, + bottom: 3, + left: 7, + right: 7, + }, + ...text(layer, "sans", "default", { size: "sm" }) + }, state: { + hovered: { + ...text(layer, "sans", "default", { size: "sm" }), + background: background(layer, "hovered"), + border: border(layer, "active"), + }, + } }), background: background(layer), padding: { left: 6, right: 6, top: 0, bottom: 6 }, diff --git a/styles/src/styleTree/statusBar.ts b/styles/src/styleTree/statusBar.ts index 66643dbde1..754703c2b9 100644 --- a/styles/src/styleTree/statusBar.ts +++ b/styles/src/styleTree/statusBar.ts @@ -27,74 +27,82 @@ export default function statusBar(colorScheme: ColorScheme) { border: border(layer, { top: true, overlay: true }), cursorPosition: text(layer, "sans", "variant"), activeLanguage: interactive({ - padding: { left: 6, right: 6 }, - ...text(layer, "sans", "variant") - }, - { - hover: { + base: { + padding: { left: 6, right: 6 }, + ...text(layer, "sans", "variant") + }, + state: { + hovered: { ...text(layer, "sans", "on"), } - }, + } + }, ), autoUpdateProgressMessage: text(layer, "sans", "variant"), autoUpdateDoneMessage: text(layer, "sans", "variant"), lspStatus: interactive({ - ...diagnosticStatusContainer, - iconSpacing: 4, - iconWidth: 14, - height: 18, - message: text(layer, "sans"), - iconColor: foreground(layer) - }, - { - hover: { + base: { + ...diagnosticStatusContainer, + iconSpacing: 4, + iconWidth: 14, + height: 18, + message: text(layer, "sans"), + iconColor: foreground(layer) + }, + state: { + hovered: { message: text(layer, "sans"), iconColor: foreground(layer), background: background(layer, "hovered"), } - }), + } + }), diagnosticMessage: interactive({ - ...text(layer, "sans") + base: { + ...text(layer, "sans") + }, + state: { hovered: text(layer, "sans", "hovered") } }, - { hover: text(layer, "sans", "hovered") }, ), diagnosticSummary: interactive({ - height: 20, - iconWidth: 16, - iconSpacing: 2, - summarySpacing: 6, - text: text(layer, "sans", { size: "sm" }), - iconColorOk: foreground(layer, "variant"), - iconColorWarning: foreground(layer, "warning"), - iconColorError: foreground(layer, "negative"), - containerOk: { - cornerRadius: 6, - padding: { top: 3, bottom: 3, left: 7, right: 7 }, - }, - containerWarning: { - ...diagnosticStatusContainer, - background: background(layer, "warning"), - border: border(layer, "warning"), - }, - containerError: { - ...diagnosticStatusContainer, - background: background(layer, "negative"), - border: border(layer, "negative"), - } - }, { - hover: { - iconColorOk: foreground(layer, "on"), + base: { + height: 20, + iconWidth: 16, + iconSpacing: 2, + summarySpacing: 6, + text: text(layer, "sans", { size: "sm" }), + iconColorOk: foreground(layer, "variant"), + iconColorWarning: foreground(layer, "warning"), + iconColorError: foreground(layer, "negative"), containerOk: { - background: background(layer, "on", "hovered"), + cornerRadius: 6, + padding: { top: 3, bottom: 3, left: 7, right: 7 }, }, containerWarning: { - background: background(layer, "warning", "hovered"), - border: border(layer, "warning", "hovered"), + ...diagnosticStatusContainer, + background: background(layer, "warning"), + border: border(layer, "warning"), }, containerError: { - background: background(layer, "negative", "hovered"), - border: border(layer, "negative", "hovered"), + ...diagnosticStatusContainer, + background: background(layer, "negative"), + border: border(layer, "negative"), + } + }, state: { + hovered: { + iconColorOk: foreground(layer, "on"), + containerOk: { + background: background(layer, "on", "hovered"), + }, + containerWarning: { + background: background(layer, "warning", "hovered"), + border: border(layer, "warning", "hovered"), + }, + containerError: { + background: background(layer, "negative", "hovered"), + border: border(layer, "negative", "hovered"), + } } } } @@ -104,17 +112,19 @@ export default function statusBar(colorScheme: ColorScheme) { groupBottom: {}, groupRight: {}, button: toggleable(interactive({ - ...statusContainer, - iconSize: 16, - iconColor: foreground(layer, "variant"), - label: { - margin: { left: 6 }, - ...text(layer, "sans", { size: "sm" }), - }, - }, { - hover: { - iconColor: foreground(layer, "hovered"), - background: background(layer, "variant"), + base: { + ...statusContainer, + iconSize: 16, + iconColor: foreground(layer, "variant"), + label: { + margin: { left: 6 }, + ...text(layer, "sans", { size: "sm" }), + }, + }, state: { + hovered: { + iconColor: foreground(layer, "hovered"), + background: background(layer, "variant"), + } } }), { diff --git a/styles/src/styleTree/tabBar.ts b/styles/src/styleTree/tabBar.ts index 6799b0a9e3..9da63b9518 100644 --- a/styles/src/styleTree/tabBar.ts +++ b/styles/src/styleTree/tabBar.ts @@ -90,15 +90,17 @@ export default function tabBar(colorScheme: ColorScheme) { }, draggedTab, paneButton: toggleable(interactive({ - color: foreground(layer, "variant"), - iconWidth: 12, - buttonWidth: activePaneActiveTab.height, - }, - { - hover: { + base: { + color: foreground(layer, "variant"), + iconWidth: 12, + buttonWidth: activePaneActiveTab.height, + }, + state: { + hovered: { color: foreground(layer, "hovered"), } - }), + } + }), { default: { color: foreground(layer, "accent"), diff --git a/styles/src/styleTree/welcome.ts b/styles/src/styleTree/welcome.ts index dbabc55383..7ba7b30430 100644 --- a/styles/src/styleTree/welcome.ts +++ b/styles/src/styleTree/welcome.ts @@ -65,24 +65,26 @@ export default function welcome(colorScheme: ColorScheme) { }, }, button: interactive({ - background: background(layer), - border: border(layer, "active"), - cornerRadius: 4, - margin: { - top: 4, - bottom: 4, - }, - padding: { - top: 3, - bottom: 3, - left: 7, - right: 7, - }, - ...text(layer, "sans", "default", interactive_text_size) - }, { - hover: { - ...text(layer, "sans", "default", interactive_text_size), - background: background(layer, "hovered"), + base: { + background: background(layer), + border: border(layer, "active"), + cornerRadius: 4, + margin: { + top: 4, + bottom: 4, + }, + padding: { + top: 3, + bottom: 3, + left: 7, + right: 7, + }, + ...text(layer, "sans", "default", interactive_text_size) + }, state: { + hovered: { + ...text(layer, "sans", "default", interactive_text_size), + background: background(layer, "hovered"), + } } }), diff --git a/styles/src/styleTree/workspace.ts b/styles/src/styleTree/workspace.ts index 18341fc51e..fcada68a28 100644 --- a/styles/src/styleTree/workspace.ts +++ b/styles/src/styleTree/workspace.ts @@ -18,26 +18,28 @@ export default function workspace(colorScheme: ColorScheme) { const isLight = colorScheme.isLight const itemSpacing = 8 const titlebarButton = toggleable(interactive({ - cornerRadius: 6, - padding: { - top: 1, - bottom: 1, - left: 8, - right: 8, - }, - ...text(layer, "sans", "variant", { size: "xs" }), - background: background(layer, "variant"), - border: border(layer), - }, { - hover: { - ...text(layer, "sans", "variant", "hovered", { size: "xs" }), - background: background(layer, "variant", "hovered"), - border: border(layer, "variant", "hovered"), - }, - clicked: { - ...text(layer, "sans", "variant", "pressed", { size: "xs" }), - background: background(layer, "variant", "pressed"), - border: border(layer, "variant", "pressed"), + base: { + cornerRadius: 6, + padding: { + top: 1, + bottom: 1, + left: 8, + right: 8, + }, + ...text(layer, "sans", "variant", { size: "xs" }), + background: background(layer, "variant"), + border: border(layer), + }, state: { + hovered: { + ...text(layer, "sans", "variant", "hovered", { size: "xs" }), + background: background(layer, "variant", "hovered"), + border: border(layer, "variant", "hovered"), + }, + clicked: { + ...text(layer, "sans", "variant", "pressed", { size: "xs" }), + background: background(layer, "variant", "pressed"), + border: border(layer, "variant", "pressed"), + } } }), { @@ -86,17 +88,19 @@ export default function workspace(colorScheme: ColorScheme) { }, keyboardHint: interactive({ - ...text(layer, "sans", "variant", { size: "sm" }), - padding: { - top: 3, - left: 8, - right: 8, - bottom: 3, - }, - cornerRadius: 8 - }, { - hover: { - ...text(layer, "sans", "active", { size: "sm" }), + base: { + ...text(layer, "sans", "variant", { size: "sm" }), + padding: { + top: 3, + left: 8, + right: 8, + bottom: 3, + }, + cornerRadius: 8 + }, state: { + hovered: { + ...text(layer, "sans", "active", { size: "sm" }), + } } }), @@ -250,33 +254,37 @@ export default function workspace(colorScheme: ColorScheme) { cornerRadius: 6, }, callControl: interactive({ - cornerRadius: 6, - color: foreground(layer, "variant"), - iconWidth: 12, - buttonWidth: 20, - }, { - hover: { - background: background(layer, "variant", "hovered"), - color: foreground(layer, "variant", "hovered"), - }, + base: { + cornerRadius: 6, + color: foreground(layer, "variant"), + iconWidth: 12, + buttonWidth: 20, + }, state: { + hovered: { + background: background(layer, "variant", "hovered"), + color: foreground(layer, "variant", "hovered"), + }, + } }), toggleContactsButton: toggleable(interactive({ - margin: { left: itemSpacing }, - cornerRadius: 6, - color: foreground(layer, "variant"), - iconWidth: 14, - buttonWidth: 20, - }, - { + base: { + margin: { left: itemSpacing }, + cornerRadius: 6, + color: foreground(layer, "variant"), + iconWidth: 14, + buttonWidth: 20, + }, + state: { clicked: { background: background(layer, "variant", "pressed"), color: foreground(layer, "variant", "pressed"), }, - hover: { + hovered: { background: background(layer, "variant", "hovered"), color: foreground(layer, "variant", "hovered"), } - }), + } + }), { default: { background: background(layer, "variant", "active"), @@ -318,38 +326,42 @@ export default function workspace(colorScheme: ColorScheme) { itemSpacing: 8, navButton: interactive( { - color: foreground(colorScheme.highest, "on"), - iconWidth: 12, - buttonWidth: 24, - cornerRadius: 6, - }, { - hover: { - color: foreground(colorScheme.highest, "on", "hovered"), - background: background( - colorScheme.highest, - "on", - "hovered" - ), - }, - disabled: { - color: foreground(colorScheme.highest, "on", "disabled"), - }, - }), + base: { + color: foreground(colorScheme.highest, "on"), + iconWidth: 12, + buttonWidth: 24, + cornerRadius: 6, + }, state: { + hovered: { + color: foreground(colorScheme.highest, "on", "hovered"), + background: background( + colorScheme.highest, + "on", + "hovered" + ), + }, + disabled: { + color: foreground(colorScheme.highest, "on", "disabled"), + }, + } + }), padding: { left: 8, right: 8, top: 4, bottom: 4 }, }, breadcrumbHeight: 24, breadcrumbs: interactive({ - ...text(colorScheme.highest, "sans", "variant"), - cornerRadius: 6, - padding: { - left: 6, - right: 6, + base: { + ...text(colorScheme.highest, "sans", "variant"), + cornerRadius: 6, + padding: { + left: 6, + right: 6, + } + }, state: { + hovered: { + color: foreground(colorScheme.highest, "on", "hovered"), + background: background(colorScheme.highest, "on", "hovered"), + }, } - }, { - hover: { - color: foreground(colorScheme.highest, "on", "hovered"), - background: background(colorScheme.highest, "on", "hovered"), - }, }), disconnectedOverlay: { ...text(layer, "sans"), From 4bd89c4c8c8b6860050c09d8457fac1baebfee65 Mon Sep 17 00:00:00 2001 From: Piotr Osiewicz <24362066+osiewicz@users.noreply.github.com> Date: Thu, 15 Jun 2023 22:39:51 +0200 Subject: [PATCH 34/56] further style adjustments; cargo-run works --- styles/src/styleTree/assistant.ts | 167 +++++++------- styles/src/styleTree/contactList.ts | 41 ++-- styles/src/styleTree/feedback.ts | 78 ++++--- styles/src/styleTree/search.ts | 210 +++++++++--------- .../styleTree/simpleMessageNotification.ts | 71 +++--- styles/src/styleTree/toolbarDropdownMenu.ts | 92 ++++---- styles/src/styleTree/updateNotification.ts | 54 +++-- 7 files changed, 382 insertions(+), 331 deletions(-) diff --git a/styles/src/styleTree/assistant.ts b/styles/src/styleTree/assistant.ts index bbb4aae5e1..d501237721 100644 --- a/styles/src/styleTree/assistant.ts +++ b/styles/src/styleTree/assistant.ts @@ -1,85 +1,94 @@ import { ColorScheme } from "../theme/colorScheme" import { text, border, background, foreground } from "./components" import editor from "./editor" +import { interactive } from "./interactive" export default function assistant(colorScheme: ColorScheme) { - const layer = colorScheme.highest - return { - container: { - background: editor(colorScheme).background, - padding: { left: 12 }, - }, - header: { - border: border(layer, "default", { bottom: true, top: true }), - margin: { bottom: 6, top: 6 }, - background: editor(colorScheme).background, - }, - userSender: { - ...text(layer, "sans", "default", { size: "sm", weight: "bold" }), - }, - assistantSender: { - ...text(layer, "sans", "accent", { size: "sm", weight: "bold" }), - }, - systemSender: { - ...text(layer, "sans", "variant", { size: "sm", weight: "bold" }), - }, - sentAt: { - margin: { top: 2, left: 8 }, - ...text(layer, "sans", "default", { size: "2xs" }), - }, - modelInfoContainer: { - margin: { right: 16, top: 4 }, - }, - model: { - background: background(layer, "on"), - border: border(layer, "on", { overlay: true }), - padding: 4, - cornerRadius: 4, - ...text(layer, "sans", "default", { size: "xs" }), - hover: { - background: background(layer, "on", "hovered"), - }, - }, - remainingTokens: { - background: background(layer, "on"), - border: border(layer, "on", { overlay: true }), - padding: 4, - margin: { left: 4 }, - cornerRadius: 4, - ...text(layer, "sans", "positive", { size: "xs" }), - }, - noRemainingTokens: { - background: background(layer, "on"), - border: border(layer, "on", { overlay: true }), - padding: 4, - margin: { left: 4 }, - cornerRadius: 4, - ...text(layer, "sans", "negative", { size: "xs" }), - }, - errorIcon: { - margin: { left: 8 }, - color: foreground(layer, "negative"), - width: 12, - }, - apiKeyEditor: { - background: background(layer, "on"), - cornerRadius: 6, - text: text(layer, "mono", "on"), - placeholderText: text(layer, "mono", "on", "disabled", { - size: "xs", - }), - selection: colorScheme.players[0], - border: border(layer, "on"), - padding: { - bottom: 4, - left: 8, - right: 8, - top: 4, - }, - }, - apiKeyPrompt: { - padding: 10, - ...text(layer, "sans", "default", { size: "xs" }), - }, - } + const layer = colorScheme.highest + return { + container: { + background: editor(colorScheme).background, + padding: { left: 12 }, + }, + header: { + border: border(layer, "default", { bottom: true, top: true }), + margin: { bottom: 6, top: 6 }, + background: editor(colorScheme).background, + }, + userSender: { + default: + { ...text(layer, "sans", "default", { size: "sm", weight: "bold" }) }, + }, + assistantSender: { + default: { + ...text(layer, "sans", "accent", { size: "sm", weight: "bold" }) + }, + }, + systemSender: { + default: { + ...text(layer, "sans", "variant", { size: "sm", weight: "bold" }) + }, + }, + sentAt: { + margin: { top: 2, left: 8 }, + ...text(layer, "sans", "default", { size: "2xs" }), + }, + modelInfoContainer: { + margin: { right: 16, top: 4 }, + }, + model: interactive({ + base: { + background: background(layer, "on"), + border: border(layer, "on", { overlay: true }), + padding: 4, + cornerRadius: 4, + ...text(layer, "sans", "default", { size: "xs" }), + }, state: { + hovered: { + background: background(layer, "on", "hovered"), + } + } + }), + remainingTokens: { + background: background(layer, "on"), + border: border(layer, "on", { overlay: true }), + padding: 4, + margin: { left: 4 }, + cornerRadius: 4, + ...text(layer, "sans", "positive", { size: "xs" }), + }, + noRemainingTokens: { + background: background(layer, "on"), + border: border(layer, "on", { overlay: true }), + padding: 4, + margin: { left: 4 }, + cornerRadius: 4, + ...text(layer, "sans", "negative", { size: "xs" }), + }, + errorIcon: { + margin: { left: 8 }, + color: foreground(layer, "negative"), + width: 12, + }, + apiKeyEditor: { + background: background(layer, "on"), + cornerRadius: 6, + text: text(layer, "mono", "on"), + placeholderText: text(layer, "mono", "on", "disabled", { + size: "xs", + }), + selection: colorScheme.players[0], + border: border(layer, "on"), + padding: { + bottom: 4, + left: 8, + right: 8, + top: 4, + }, + }, + apiKeyPrompt: { + padding: 10, + ...text(layer, "sans", "default", { size: "xs" }), + }, + } } diff --git a/styles/src/styleTree/contactList.ts b/styles/src/styleTree/contactList.ts index 5837720401..4309343ed2 100644 --- a/styles/src/styleTree/contactList.ts +++ b/styles/src/styleTree/contactList.ts @@ -192,24 +192,27 @@ export default function contactsPanel(colorScheme: ColorScheme) { }, } ), - projectRow: { - ...projectRow, - background: background(layer), - icon: { - margin: { left: nameMargin }, - color: foreground(layer, "variant"), - width: 12, - }, - name: { - ...projectRow.name, - ...text(layer, "mono", { size: "sm" }), - }, - hover: { - background: background(layer, "hovered"), - }, - active: { - background: background(layer, "active"), - }, - }, + projectRow: toggleable(interactive({ + base: { + ...projectRow, + background: background(layer), + icon: { + margin: { left: nameMargin }, + color: foreground(layer, "variant"), + width: 12, + }, + name: { + ...projectRow.name, + ...text(layer, "mono", { size: "sm" }), + }, + }, state: { + hovered: { + background: background(layer, "hovered"), + }, + } + }), + { + default: { background: background(layer, "active") } + }) } } diff --git a/styles/src/styleTree/feedback.ts b/styles/src/styleTree/feedback.ts index 5eef4b4279..4b5a4de89f 100644 --- a/styles/src/styleTree/feedback.ts +++ b/styles/src/styleTree/feedback.ts @@ -1,44 +1,48 @@ import { ColorScheme } from "../theme/colorScheme" import { background, border, text } from "./components" +import { interactive } from "./interactive" export default function feedback(colorScheme: ColorScheme) { - let layer = colorScheme.highest + let layer = colorScheme.highest - return { - submit_button: { - ...text(layer, "mono", "on"), - background: background(layer, "on"), - cornerRadius: 6, - border: border(layer, "on"), - margin: { - right: 4, - }, - padding: { - bottom: 2, - left: 10, - right: 10, - top: 2, - }, - clicked: { - ...text(layer, "mono", "on", "pressed"), - background: background(layer, "on", "pressed"), - border: border(layer, "on", "pressed"), - }, - hover: { - ...text(layer, "mono", "on", "hovered"), - background: background(layer, "on", "hovered"), - border: border(layer, "on", "hovered"), - }, + return { + submit_button: interactive({ + base: { + ...text(layer, "mono", "on"), + background: background(layer, "on"), + cornerRadius: 6, + border: border(layer, "on"), + margin: { + right: 4, }, - button_margin: 8, - info_text_default: text(layer, "sans", "default", { size: "xs" }), - link_text_default: text(layer, "sans", "default", { - size: "xs", - underline: true, - }), - link_text_hover: text(layer, "sans", "hovered", { - size: "xs", - underline: true, - }), - } + padding: { + bottom: 2, + left: 10, + right: 10, + top: 2, + } + }, state: { + clicked: { + ...text(layer, "mono", "on", "pressed"), + background: background(layer, "on", "pressed"), + border: border(layer, "on", "pressed"), + }, + hovered: { + ...text(layer, "mono", "on", "hovered"), + background: background(layer, "on", "hovered"), + border: border(layer, "on", "hovered"), + }, + } + }), + button_margin: 8, + info_text_default: text(layer, "sans", "default", { size: "xs" }), + link_text_default: text(layer, "sans", "default", { + size: "xs", + underline: true, + }), + link_text_hover: text(layer, "sans", "hovered", { + size: "xs", + underline: true, + }), + } } diff --git a/styles/src/styleTree/search.ts b/styles/src/styleTree/search.ts index d69c4bb2d9..e278f69ff0 100644 --- a/styles/src/styleTree/search.ts +++ b/styles/src/styleTree/search.ts @@ -1,113 +1,123 @@ import { ColorScheme } from "../theme/colorScheme" import { withOpacity } from "../theme/color" import { background, border, foreground, text } from "./components" +import { interactive } from "./interactive" +import { toggleable } from "./toggle" export default function search(colorScheme: ColorScheme) { - let layer = colorScheme.highest + let layer = colorScheme.highest - // Search input - const editor = { - background: background(layer), - cornerRadius: 8, - minWidth: 200, - maxWidth: 500, - placeholderText: text(layer, "mono", "disabled"), - selection: colorScheme.players[0], - text: text(layer, "mono", "default"), - border: border(layer), + // Search input + const editor = { + background: background(layer), + cornerRadius: 8, + minWidth: 200, + maxWidth: 500, + placeholderText: text(layer, "mono", "disabled"), + selection: colorScheme.players[0], + text: text(layer, "mono", "default"), + border: border(layer), + margin: { + right: 12, + }, + padding: { + top: 3, + bottom: 3, + left: 12, + right: 8, + }, + } + + const includeExcludeEditor = { + ...editor, + minWidth: 100, + maxWidth: 250, + } + + return { + // TODO: Add an activeMatchBackground on the rust side to differentiate between active and inactive + matchBackground: withOpacity(foreground(layer, "accent"), 0.4), + optionButton: toggleable(interactive({ + base: { + ...text(layer, "mono", "on"), + background: background(layer, "on"), + cornerRadius: 6, + border: border(layer, "on"), margin: { - right: 12, + right: 4, }, padding: { - top: 3, - bottom: 3, - left: 12, - right: 8, + bottom: 2, + left: 10, + right: 10, + top: 2, }, - } + }, state: { + clicked: { + ...text(layer, "mono", "on", "pressed"), + background: background(layer, "on", "pressed"), + border: border(layer, "on", "pressed"), + }, + hovered: { + ...text(layer, "mono", "on", "hovered"), + background: background(layer, "on", "hovered"), + border: border(layer, "on", "hovered"), + }, + } + }), { + default: { + ...text(layer, "mono", "on", "inverted"), + background: background(layer, "on", "inverted"), + border: border(layer, "on", "inverted"), + }, - const includeExcludeEditor = { - ...editor, - minWidth: 100, - maxWidth: 250, - } - - return { - // TODO: Add an activeMatchBackground on the rust side to differentiate between active and inactive - matchBackground: withOpacity(foreground(layer, "accent"), 0.4), - optionButton: { - ...text(layer, "mono", "on"), - background: background(layer, "on"), - cornerRadius: 6, - border: border(layer, "on"), - margin: { - right: 4, - }, - padding: { - bottom: 2, - left: 10, - right: 10, - top: 2, - }, - active: { - ...text(layer, "mono", "on", "inverted"), - background: background(layer, "on", "inverted"), - border: border(layer, "on", "inverted"), - }, - clicked: { - ...text(layer, "mono", "on", "pressed"), - background: background(layer, "on", "pressed"), - border: border(layer, "on", "pressed"), - }, - hover: { - ...text(layer, "mono", "on", "hovered"), - background: background(layer, "on", "hovered"), - border: border(layer, "on", "hovered"), - }, + }), + editor, + invalidEditor: { + ...editor, + border: border(layer, "negative"), + }, + includeExcludeEditor, + invalidIncludeExcludeEditor: { + ...includeExcludeEditor, + border: border(layer, "negative"), + }, + matchIndex: { + ...text(layer, "mono", "variant"), + padding: { + left: 6, + }, + }, + optionButtonGroup: { + padding: { + left: 12, + right: 12, + }, + }, + includeExcludeInputs: { + ...text(layer, "mono", "variant"), + padding: { + right: 6, + }, + }, + resultsStatus: { + ...text(layer, "mono", "on"), + size: 18, + }, + dismissButton: interactive({ + base: { + color: foreground(layer, "variant"), + iconWidth: 12, + buttonWidth: 14, + padding: { + left: 10, + right: 10, }, - editor, - invalidEditor: { - ...editor, - border: border(layer, "negative"), - }, - includeExcludeEditor, - invalidIncludeExcludeEditor: { - ...includeExcludeEditor, - border: border(layer, "negative"), - }, - matchIndex: { - ...text(layer, "mono", "variant"), - padding: { - left: 6, - }, - }, - optionButtonGroup: { - padding: { - left: 12, - right: 12, - }, - }, - includeExcludeInputs: { - ...text(layer, "mono", "variant"), - padding: { - right: 6, - }, - }, - resultsStatus: { - ...text(layer, "mono", "on"), - size: 18, - }, - dismissButton: { - color: foreground(layer, "variant"), - iconWidth: 12, - buttonWidth: 14, - padding: { - left: 10, - right: 10, - }, - hover: { - color: foreground(layer, "hovered"), - }, - }, - } + }, state: { + hovered: { + color: foreground(layer, "hovered"), + } + } + }), + } } diff --git a/styles/src/styleTree/simpleMessageNotification.ts b/styles/src/styleTree/simpleMessageNotification.ts index 8d88f05c53..70219d7a10 100644 --- a/styles/src/styleTree/simpleMessageNotification.ts +++ b/styles/src/styleTree/simpleMessageNotification.ts @@ -1,44 +1,51 @@ import { ColorScheme } from "../theme/colorScheme" import { background, border, foreground, text } from "./components" +import { interactive } from "./interactive" const headerPadding = 8 export default function simpleMessageNotification( - colorScheme: ColorScheme + colorScheme: ColorScheme ): Object { - let layer = colorScheme.middle - return { - message: { - ...text(layer, "sans", { size: "xs" }), - margin: { left: headerPadding, right: headerPadding }, + let layer = colorScheme.middle + return { + message: { + ...text(layer, "sans", { size: "xs" }), + margin: { left: headerPadding, right: headerPadding }, + }, + actionMessage: interactive({ + base: { + ...text(layer, "sans", { size: "xs" }), + border: border(layer, "active"), + cornerRadius: 4, + padding: { + top: 3, + bottom: 3, + left: 7, + right: 7, }, - actionMessage: { - ...text(layer, "sans", { size: "xs" }), - border: border(layer, "active"), - cornerRadius: 4, - padding: { - top: 3, - bottom: 3, - left: 7, - right: 7, - }, - margin: { left: headerPadding, top: 6, bottom: 6 }, - hover: { - ...text(layer, "sans", "default", { size: "xs" }), - background: background(layer, "hovered"), - border: border(layer, "active"), - }, + margin: { left: headerPadding, top: 6, bottom: 6 }, + }, state: { + hovered: { + ...text(layer, "sans", "default", { size: "xs" }), + background: background(layer, "hovered"), + border: border(layer, "active"), }, - dismissButton: { - color: foreground(layer), - iconWidth: 8, - iconHeight: 8, - buttonWidth: 8, - buttonHeight: 8, - hover: { - color: foreground(layer, "hovered"), - }, + } + }), + dismissButton: interactive({ + base: { + color: foreground(layer), + iconWidth: 8, + iconHeight: 8, + buttonWidth: 8, + buttonHeight: 8, + }, state: { + hovered: { + color: foreground(layer, "hovered"), }, - } + } + }) + } } diff --git a/styles/src/styleTree/toolbarDropdownMenu.ts b/styles/src/styleTree/toolbarDropdownMenu.ts index 92616eb022..0cfcb921ef 100644 --- a/styles/src/styleTree/toolbarDropdownMenu.ts +++ b/styles/src/styleTree/toolbarDropdownMenu.ts @@ -1,46 +1,56 @@ import { ColorScheme } from "../theme/colorScheme" import { background, border, text } from "./components" - +import { interactive } from "./interactive" +import { toggleable } from "./toggle" export default function dropdownMenu(colorScheme: ColorScheme) { - let layer = colorScheme.middle + let layer = colorScheme.middle - return { - rowHeight: 30, - background: background(layer), - border: border(layer), - shadow: colorScheme.popoverShadow, - header: { - ...text(layer, "sans", { size: "sm" }), - secondaryText: text(layer, "sans", { size: "sm", color: "#aaaaaa" }), - secondaryTextSpacing: 10, - padding: { left: 8, right: 8, top: 2, bottom: 2 }, - cornerRadius: 6, - background: background(layer, "on"), - border: border(layer, "on", { overlay: true }), - hover: { - background: background(layer, "hovered"), - ...text(layer, "sans", "hovered", { size: "sm" }), - } - }, - sectionHeader: { - ...text(layer, "sans", { size: "sm" }), - padding: { left: 8, right: 8, top: 8, bottom: 8 }, - }, - item: { - ...text(layer, "sans", { size: "sm" }), - secondaryTextSpacing: 10, - secondaryText: text(layer, "sans", { size: "sm" }), - padding: { left: 18, right: 18, top: 2, bottom: 2 }, - hover: { - background: background(layer, "hovered"), - ...text(layer, "sans", "hovered", { size: "sm" }), - }, - active: { - background: background(layer, "active"), - }, - activeHover: { - background: background(layer, "active"), - }, - }, - } + return { + rowHeight: 30, + background: background(layer), + border: border(layer), + shadow: colorScheme.popoverShadow, + header: interactive({ + base: { + ...text(layer, "sans", { size: "sm" }), + secondaryText: text(layer, "sans", { size: "sm", color: "#aaaaaa" }), + secondaryTextSpacing: 10, + padding: { left: 8, right: 8, top: 2, bottom: 2 }, + cornerRadius: 6, + background: background(layer, "on"), + border: border(layer, "on", { overlay: true }) + }, + state: { + hovered: { + background: background(layer, "hovered"), + ...text(layer, "sans", "hovered", { size: "sm" }), + } + } + }) + , + sectionHeader: { + ...text(layer, "sans", { size: "sm" }), + padding: { left: 8, right: 8, top: 8, bottom: 8 }, + }, + item: toggleable(interactive({ + base: { + ...text(layer, "sans", { size: "sm" }), + secondaryTextSpacing: 10, + secondaryText: text(layer, "sans", { size: "sm" }), + padding: { left: 18, right: 18, top: 2, bottom: 2 } + }, state: { + hovered: { + background: background(layer, "hovered"), + ...text(layer, "sans", "hovered", { size: "sm" }), + } + } + }), { + default: { + background: background(layer, "active"), + }, + hovered: { + background: background(layer, "active"), + }, + }) + } } diff --git a/styles/src/styleTree/updateNotification.ts b/styles/src/styleTree/updateNotification.ts index 281012e62f..aa8db916ea 100644 --- a/styles/src/styleTree/updateNotification.ts +++ b/styles/src/styleTree/updateNotification.ts @@ -1,31 +1,39 @@ import { ColorScheme } from "../theme/colorScheme" import { foreground, text } from "./components" +import { interactive } from "./interactive" const headerPadding = 8 export default function updateNotification(colorScheme: ColorScheme): Object { - let layer = colorScheme.middle - return { - message: { - ...text(layer, "sans", { size: "xs" }), - margin: { left: headerPadding, right: headerPadding }, + let layer = colorScheme.middle + return { + message: { + ...text(layer, "sans", { size: "xs" }), + margin: { left: headerPadding, right: headerPadding }, + }, + actionMessage: interactive({ + base: { + ...text(layer, "sans", { size: "xs" }), + margin: { left: headerPadding, top: 6, bottom: 6 } + }, state: { + hovered: { + color: foreground(layer, "hovered"), + } + } + }), + dismissButton: interactive({ + base: { + color: foreground(layer), + iconWidth: 8, + iconHeight: 8, + buttonWidth: 8, + buttonHeight: 8 + }, state: { + hovered: { + color: foreground(layer, "hovered"), }, - actionMessage: { - ...text(layer, "sans", { size: "xs" }), - margin: { left: headerPadding, top: 6, bottom: 6 }, - hover: { - color: foreground(layer, "hovered"), - }, - }, - dismissButton: { - color: foreground(layer), - iconWidth: 8, - iconHeight: 8, - buttonWidth: 8, - buttonHeight: 8, - hover: { - color: foreground(layer, "hovered"), - }, - }, - } + }, + }) + + } } From 5369f2c25a98217bd8a6d35f67687a84147af7c2 Mon Sep 17 00:00:00 2001 From: Nate Butler Date: Thu, 15 Jun 2023 18:42:48 -0400 Subject: [PATCH 35/56] Set up vitest and add tests for `interactive` --- styles/.gitignore | 1 + styles/package-lock.json | 2306 ++++++++++++++++- styles/package.json | 9 +- styles/src/element/interactive/index.ts | 3 + .../element/interactive/interactive.test.ts | 59 + .../interactive}/interactive.ts | 23 +- styles/src/styleTree/assistant.ts | 176 +- styles/src/styleTree/commandPalette.ts | 60 +- styles/src/styleTree/contactList.ts | 412 +-- styles/src/styleTree/contactNotification.ts | 90 +- styles/src/styleTree/contextMenu.ts | 98 +- styles/src/styleTree/copilot.ts | 540 ++-- styles/src/styleTree/editor.ts | 556 ++-- styles/src/styleTree/feedback.ts | 84 +- styles/src/styleTree/picker.ts | 152 +- styles/src/styleTree/projectPanel.ts | 226 +- styles/src/styleTree/search.ts | 218 +- .../styleTree/simpleMessageNotification.ts | 82 +- styles/src/styleTree/statusBar.ts | 268 +- styles/src/styleTree/tabBar.ts | 200 +- styles/src/styleTree/toolbarDropdownMenu.ts | 100 +- styles/src/styleTree/updateNotification.ts | 60 +- styles/src/styleTree/welcome.ts | 242 +- styles/src/styleTree/workspace.ts | 736 +++--- styles/vitest.config.ts | 8 + 25 files changed, 4546 insertions(+), 2163 deletions(-) create mode 100644 styles/src/element/interactive/index.ts create mode 100644 styles/src/element/interactive/interactive.test.ts rename styles/src/{styleTree => element/interactive}/interactive.ts (58%) create mode 100644 styles/vitest.config.ts diff --git a/styles/.gitignore b/styles/.gitignore index c2658d7d1b..25fbf5a1c4 100644 --- a/styles/.gitignore +++ b/styles/.gitignore @@ -1 +1,2 @@ node_modules/ +coverage/ diff --git a/styles/package-lock.json b/styles/package-lock.json index b4bdd52c66..faa64043b6 100644 --- a/styles/package-lock.json +++ b/styles/package-lock.json @@ -20,9 +20,32 @@ "toml": "^3.0.0", "ts-deepmerge": "^6.0.3", "ts-node": "^10.9.1", - "utility-types": "^3.10.0" + "utility-types": "^3.10.0", + "vitest": "^0.32.0" + }, + "devDependencies": { + "@vitest/coverage-v8": "^0.32.0" } }, + "node_modules/@ampproject/remapping": { + "version": "2.2.1", + "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.2.1.tgz", + "integrity": "sha512-lFMjJTrFL3j7L9yBxwYfCq2k6qqwHyzuUl/XBnif78PWTJYyL/dfowQHWE3sp6U6ZzqWiiIZnpTMO96zhkjwtg==", + "dev": true, + "dependencies": { + "@jridgewell/gen-mapping": "^0.3.0", + "@jridgewell/trace-mapping": "^0.3.9" + }, + "engines": { + "node": ">=6.0.0" + } + }, + "node_modules/@bcoe/v8-coverage": { + "version": "0.2.3", + "resolved": "https://registry.npmjs.org/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz", + "integrity": "sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==", + "dev": true + }, "node_modules/@cspotcode/source-map-support": { "version": "0.8.1", "resolved": "https://registry.npmjs.org/@cspotcode/source-map-support/-/source-map-support-0.8.1.tgz", @@ -34,6 +57,359 @@ "node": ">=12" } }, + "node_modules/@esbuild/android-arm": { + "version": "0.17.19", + "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.17.19.tgz", + "integrity": "sha512-rIKddzqhmav7MSmoFCmDIb6e2W57geRsM94gV2l38fzhXMwq7hZoClug9USI2pFRGL06f4IOPHHpFNOkWieR8A==", + "cpu": [ + "arm" + ], + "optional": true, + "os": [ + "android" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/android-arm64": { + "version": "0.17.19", + "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.17.19.tgz", + "integrity": "sha512-KBMWvEZooR7+kzY0BtbTQn0OAYY7CsiydT63pVEaPtVYF0hXbUaOyZog37DKxK7NF3XacBJOpYT4adIJh+avxA==", + "cpu": [ + "arm64" + ], + "optional": true, + "os": [ + "android" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/android-x64": { + "version": "0.17.19", + "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.17.19.tgz", + "integrity": "sha512-uUTTc4xGNDT7YSArp/zbtmbhO0uEEK9/ETW29Wk1thYUJBz3IVnvgEiEwEa9IeLyvnpKrWK64Utw2bgUmDveww==", + "cpu": [ + "x64" + ], + "optional": true, + "os": [ + "android" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/darwin-arm64": { + "version": "0.17.19", + "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.17.19.tgz", + "integrity": "sha512-80wEoCfF/hFKM6WE1FyBHc9SfUblloAWx6FJkFWTWiCoht9Mc0ARGEM47e67W9rI09YoUxJL68WHfDRYEAvOhg==", + "cpu": [ + "arm64" + ], + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/darwin-x64": { + "version": "0.17.19", + "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.17.19.tgz", + "integrity": "sha512-IJM4JJsLhRYr9xdtLytPLSH9k/oxR3boaUIYiHkAawtwNOXKE8KoU8tMvryogdcT8AU+Bflmh81Xn6Q0vTZbQw==", + "cpu": [ + "x64" + ], + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/freebsd-arm64": { + "version": "0.17.19", + "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.17.19.tgz", + "integrity": "sha512-pBwbc7DufluUeGdjSU5Si+P3SoMF5DQ/F/UmTSb8HXO80ZEAJmrykPyzo1IfNbAoaqw48YRpv8shwd1NoI0jcQ==", + "cpu": [ + "arm64" + ], + "optional": true, + "os": [ + "freebsd" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/freebsd-x64": { + "version": "0.17.19", + "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.17.19.tgz", + "integrity": "sha512-4lu+n8Wk0XlajEhbEffdy2xy53dpR06SlzvhGByyg36qJw6Kpfk7cp45DR/62aPH9mtJRmIyrXAS5UWBrJT6TQ==", + "cpu": [ + "x64" + ], + "optional": true, + "os": [ + "freebsd" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/linux-arm": { + "version": "0.17.19", + "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.17.19.tgz", + "integrity": "sha512-cdmT3KxjlOQ/gZ2cjfrQOtmhG4HJs6hhvm3mWSRDPtZ/lP5oe8FWceS10JaSJC13GBd4eH/haHnqf7hhGNLerA==", + "cpu": [ + "arm" + ], + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/linux-arm64": { + "version": "0.17.19", + "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.17.19.tgz", + "integrity": "sha512-ct1Tg3WGwd3P+oZYqic+YZF4snNl2bsnMKRkb3ozHmnM0dGWuxcPTTntAF6bOP0Sp4x0PjSF+4uHQ1xvxfRKqg==", + "cpu": [ + "arm64" + ], + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/linux-ia32": { + "version": "0.17.19", + "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.17.19.tgz", + "integrity": "sha512-w4IRhSy1VbsNxHRQpeGCHEmibqdTUx61Vc38APcsRbuVgK0OPEnQ0YD39Brymn96mOx48Y2laBQGqgZ0j9w6SQ==", + "cpu": [ + "ia32" + ], + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/linux-loong64": { + "version": "0.17.19", + "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.17.19.tgz", + "integrity": "sha512-2iAngUbBPMq439a+z//gE+9WBldoMp1s5GWsUSgqHLzLJ9WoZLZhpwWuym0u0u/4XmZ3gpHmzV84PonE+9IIdQ==", + "cpu": [ + "loong64" + ], + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/linux-mips64el": { + "version": "0.17.19", + "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.17.19.tgz", + "integrity": "sha512-LKJltc4LVdMKHsrFe4MGNPp0hqDFA1Wpt3jE1gEyM3nKUvOiO//9PheZZHfYRfYl6AwdTH4aTcXSqBerX0ml4A==", + "cpu": [ + "mips64el" + ], + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/linux-ppc64": { + "version": "0.17.19", + "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.17.19.tgz", + "integrity": "sha512-/c/DGybs95WXNS8y3Ti/ytqETiW7EU44MEKuCAcpPto3YjQbyK3IQVKfF6nbghD7EcLUGl0NbiL5Rt5DMhn5tg==", + "cpu": [ + "ppc64" + ], + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/linux-riscv64": { + "version": "0.17.19", + "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.17.19.tgz", + "integrity": "sha512-FC3nUAWhvFoutlhAkgHf8f5HwFWUL6bYdvLc/TTuxKlvLi3+pPzdZiFKSWz/PF30TB1K19SuCxDTI5KcqASJqA==", + "cpu": [ + "riscv64" + ], + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/linux-s390x": { + "version": "0.17.19", + "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.17.19.tgz", + "integrity": "sha512-IbFsFbxMWLuKEbH+7sTkKzL6NJmG2vRyy6K7JJo55w+8xDk7RElYn6xvXtDW8HCfoKBFK69f3pgBJSUSQPr+4Q==", + "cpu": [ + "s390x" + ], + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/linux-x64": { + "version": "0.17.19", + "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.17.19.tgz", + "integrity": "sha512-68ngA9lg2H6zkZcyp22tsVt38mlhWde8l3eJLWkyLrp4HwMUr3c1s/M2t7+kHIhvMjglIBrFpncX1SzMckomGw==", + "cpu": [ + "x64" + ], + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/netbsd-x64": { + "version": "0.17.19", + "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.17.19.tgz", + "integrity": "sha512-CwFq42rXCR8TYIjIfpXCbRX0rp1jo6cPIUPSaWwzbVI4aOfX96OXY8M6KNmtPcg7QjYeDmN+DD0Wp3LaBOLf4Q==", + "cpu": [ + "x64" + ], + "optional": true, + "os": [ + "netbsd" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/openbsd-x64": { + "version": "0.17.19", + "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.17.19.tgz", + "integrity": "sha512-cnq5brJYrSZ2CF6c35eCmviIN3k3RczmHz8eYaVlNasVqsNY+JKohZU5MKmaOI+KkllCdzOKKdPs762VCPC20g==", + "cpu": [ + "x64" + ], + "optional": true, + "os": [ + "openbsd" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/sunos-x64": { + "version": "0.17.19", + "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.17.19.tgz", + "integrity": "sha512-vCRT7yP3zX+bKWFeP/zdS6SqdWB8OIpaRq/mbXQxTGHnIxspRtigpkUcDMlSCOejlHowLqII7K2JKevwyRP2rg==", + "cpu": [ + "x64" + ], + "optional": true, + "os": [ + "sunos" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/win32-arm64": { + "version": "0.17.19", + "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.17.19.tgz", + "integrity": "sha512-yYx+8jwowUstVdorcMdNlzklLYhPxjniHWFKgRqH7IFlUEa0Umu3KuYplf1HUZZ422e3NU9F4LGb+4O0Kdcaag==", + "cpu": [ + "arm64" + ], + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/win32-ia32": { + "version": "0.17.19", + "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.17.19.tgz", + "integrity": "sha512-eggDKanJszUtCdlVs0RB+h35wNlb5v4TWEkq4vZcmVt5u/HiDZrTXe2bWFQUez3RgNHwx/x4sk5++4NSSicKkw==", + "cpu": [ + "ia32" + ], + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/win32-x64": { + "version": "0.17.19", + "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.17.19.tgz", + "integrity": "sha512-lAhycmKnVOuRYNtRtatQR1LPQf2oYCkRGkSFnseDAKPl8lu5SOsK/e1sXe5a0Pc5kHIHe6P2I/ilntNv2xf3cA==", + "cpu": [ + "x64" + ], + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@istanbuljs/schema": { + "version": "0.1.3", + "resolved": "https://registry.npmjs.org/@istanbuljs/schema/-/schema-0.1.3.tgz", + "integrity": "sha512-ZXRY4jNvVgSVQ8DL3LTcakaAtXwTVUxE81hslsyD2AtoXW/wVob10HkOJ1X/pAlcI7D+2YoZKg5do8G/w6RYgA==", + "dev": true, + "engines": { + "node": ">=8" + } + }, + "node_modules/@jridgewell/gen-mapping": { + "version": "0.3.3", + "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.3.tgz", + "integrity": "sha512-HLhSWOLRi875zjjMG/r+Nv0oCW8umGb0BgEhyX3dDX3egwZtB8PqLnjz3yedt8R5StBrzcg4aBpnh8UA9D1BoQ==", + "dev": true, + "dependencies": { + "@jridgewell/set-array": "^1.0.1", + "@jridgewell/sourcemap-codec": "^1.4.10", + "@jridgewell/trace-mapping": "^0.3.9" + }, + "engines": { + "node": ">=6.0.0" + } + }, "node_modules/@jridgewell/resolve-uri": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.0.tgz", @@ -42,6 +418,15 @@ "node": ">=6.0.0" } }, + "node_modules/@jridgewell/set-array": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.1.2.tgz", + "integrity": "sha512-xnkseuNADM0gt2bs+BvhO0p78Mk762YnZdsuzFV018NoG1Sj1SCQvpSqa7XUaTam5vAGasABV9qXASMKnFMwMw==", + "dev": true, + "engines": { + "node": ">=6.0.0" + } + }, "node_modules/@jridgewell/sourcemap-codec": { "version": "1.4.14", "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.14.tgz", @@ -81,16 +466,124 @@ "resolved": "https://registry.npmjs.org/@tsconfig/node16/-/node16-1.0.3.tgz", "integrity": "sha512-yOlFc+7UtL/89t2ZhjPvvB/DeAr3r+Dq58IgzsFkOAvVC6NMJXmCGjbptdXdR9qsX7pKcTL+s87FtYREi2dEEQ==" }, + "node_modules/@types/chai": { + "version": "4.3.5", + "resolved": "https://registry.npmjs.org/@types/chai/-/chai-4.3.5.tgz", + "integrity": "sha512-mEo1sAde+UCE6b2hxn332f1g1E8WfYRu6p5SvTKr2ZKC1f7gFJXk4h5PyGP9Dt6gCaG8y8XhwnXWC6Iy2cmBng==" + }, + "node_modules/@types/chai-subset": { + "version": "1.3.3", + "resolved": "https://registry.npmjs.org/@types/chai-subset/-/chai-subset-1.3.3.tgz", + "integrity": "sha512-frBecisrNGz+F4T6bcc+NLeolfiojh5FxW2klu669+8BARtyQv2C/GkNW6FUodVe4BroGMP/wER/YDGc7rEllw==", + "dependencies": { + "@types/chai": "*" + } + }, "node_modules/@types/chroma-js": { "version": "2.4.0", "resolved": "https://registry.npmjs.org/@types/chroma-js/-/chroma-js-2.4.0.tgz", "integrity": "sha512-JklMxityrwjBTjGY2anH8JaTx3yjRU3/sEHSblLH1ba5lqcSh1LnImXJZO5peJfXyqKYWjHTGy4s5Wz++hARrw==" }, + "node_modules/@types/istanbul-lib-coverage": { + "version": "2.0.4", + "resolved": "https://registry.npmjs.org/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.4.tgz", + "integrity": "sha512-z/QT1XN4K4KYuslS23k62yDIDLwLFkzxOuMplDtObz0+y7VqJCaO2o+SPwHCvLFZh7xazvvoor2tA/hPz9ee7g==", + "dev": true + }, "node_modules/@types/node": { "version": "18.14.1", "resolved": "https://registry.npmjs.org/@types/node/-/node-18.14.1.tgz", "integrity": "sha512-QH+37Qds3E0eDlReeboBxfHbX9omAcBCXEzswCu6jySP642jiM3cYSIkU/REqwhCUqXdonHFuBfJDiAJxMNhaQ==" }, + "node_modules/@vitest/coverage-v8": { + "version": "0.32.0", + "resolved": "https://registry.npmjs.org/@vitest/coverage-v8/-/coverage-v8-0.32.0.tgz", + "integrity": "sha512-VXXlWq9X/NbsoP/l/CHLBjutsFFww1UY1qEhzGjn/DY7Tqe+z0Nu8XKc8im/XUAmjiWsh2XV7sy/F0IKAl4eaw==", + "dev": true, + "dependencies": { + "@ampproject/remapping": "^2.2.1", + "@bcoe/v8-coverage": "^0.2.3", + "istanbul-lib-coverage": "^3.2.0", + "istanbul-lib-report": "^3.0.0", + "istanbul-lib-source-maps": "^4.0.1", + "istanbul-reports": "^3.1.5", + "magic-string": "^0.30.0", + "picocolors": "^1.0.0", + "std-env": "^3.3.2", + "test-exclude": "^6.0.0", + "v8-to-istanbul": "^9.1.0" + }, + "funding": { + "url": "https://opencollective.com/vitest" + }, + "peerDependencies": { + "vitest": ">=0.32.0 <1" + } + }, + "node_modules/@vitest/expect": { + "version": "0.32.0", + "resolved": "https://registry.npmjs.org/@vitest/expect/-/expect-0.32.0.tgz", + "integrity": "sha512-VxVHhIxKw9Lux+O9bwLEEk2gzOUe93xuFHy9SzYWnnoYZFYg1NfBtnfnYWiJN7yooJ7KNElCK5YtA7DTZvtXtg==", + "dependencies": { + "@vitest/spy": "0.32.0", + "@vitest/utils": "0.32.0", + "chai": "^4.3.7" + }, + "funding": { + "url": "https://opencollective.com/vitest" + } + }, + "node_modules/@vitest/runner": { + "version": "0.32.0", + "resolved": "https://registry.npmjs.org/@vitest/runner/-/runner-0.32.0.tgz", + "integrity": "sha512-QpCmRxftHkr72xt5A08xTEs9I4iWEXIOCHWhQQguWOKE4QH7DXSKZSOFibuwEIMAD7G0ERvtUyQn7iPWIqSwmw==", + "dependencies": { + "@vitest/utils": "0.32.0", + "concordance": "^5.0.4", + "p-limit": "^4.0.0", + "pathe": "^1.1.0" + }, + "funding": { + "url": "https://opencollective.com/vitest" + } + }, + "node_modules/@vitest/snapshot": { + "version": "0.32.0", + "resolved": "https://registry.npmjs.org/@vitest/snapshot/-/snapshot-0.32.0.tgz", + "integrity": "sha512-yCKorPWjEnzpUxQpGlxulujTcSPgkblwGzAUEL+z01FTUg/YuCDZ8dxr9sHA08oO2EwxzHXNLjQKWJ2zc2a19Q==", + "dependencies": { + "magic-string": "^0.30.0", + "pathe": "^1.1.0", + "pretty-format": "^27.5.1" + }, + "funding": { + "url": "https://opencollective.com/vitest" + } + }, + "node_modules/@vitest/spy": { + "version": "0.32.0", + "resolved": "https://registry.npmjs.org/@vitest/spy/-/spy-0.32.0.tgz", + "integrity": "sha512-MruAPlM0uyiq3d53BkwTeShXY0rYEfhNGQzVO5GHBmmX3clsxcWp79mMnkOVcV244sNTeDcHbcPFWIjOI4tZvw==", + "dependencies": { + "tinyspy": "^2.1.0" + }, + "funding": { + "url": "https://opencollective.com/vitest" + } + }, + "node_modules/@vitest/utils": { + "version": "0.32.0", + "resolved": "https://registry.npmjs.org/@vitest/utils/-/utils-0.32.0.tgz", + "integrity": "sha512-53yXunzx47MmbuvcOPpLaVljHaeSu1G2dHdmy7+9ngMnQIkBQcvwOcoclWFnxDMxFbnq8exAfh3aKSZaK71J5A==", + "dependencies": { + "concordance": "^5.0.4", + "loupe": "^2.3.6", + "pretty-format": "^27.5.1" + }, + "funding": { + "url": "https://opencollective.com/vitest" + } + }, "node_modules/acorn": { "version": "8.8.2", "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.8.2.tgz", @@ -110,11 +603,38 @@ "node": ">=0.4.0" } }, + "node_modules/ansi-regex": { + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz", + "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==", + "engines": { + "node": ">=8" + } + }, + "node_modules/ansi-styles": { + "version": "5.2.0", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-5.2.0.tgz", + "integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==", + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/chalk/ansi-styles?sponsor=1" + } + }, "node_modules/arg": { "version": "4.1.3", "resolved": "https://registry.npmjs.org/arg/-/arg-4.1.3.tgz", "integrity": "sha512-58S9QDqG0Xx27YwPSt9fJxivjYl432YCwfDMfZ+71RAqUrZef7LrKQZ3LHLOwCS4FLNBplP533Zx895SeOCHvA==" }, + "node_modules/assertion-error": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/assertion-error/-/assertion-error-1.1.0.tgz", + "integrity": "sha512-jgsaNduz+ndvGyFt3uSuWqvy4lCnIJiovtouQN5JZHOKCS2QuhEdbcQHFhVksz2N2U9hXJo8odG7ETyWlEeuDw==", + "engines": { + "node": "*" + } + }, "node_modules/ayu": { "version": "8.0.1", "resolved": "https://registry.npmjs.org/ayu/-/ayu-8.0.1.tgz", @@ -125,11 +645,40 @@ "nonenumerable": "^1.1.1" } }, + "node_modules/balanced-match": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz", + "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==", + "dev": true + }, "node_modules/bezier-easing": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/bezier-easing/-/bezier-easing-2.1.0.tgz", "integrity": "sha512-gbIqZ/eslnUFC1tjEvtz0sgx+xTK20wDnYMIA27VA04R7w6xxXQPZDbibjA9DTWZRA2CXtwHykkVzlCaAJAZig==" }, + "node_modules/blueimp-md5": { + "version": "2.19.0", + "resolved": "https://registry.npmjs.org/blueimp-md5/-/blueimp-md5-2.19.0.tgz", + "integrity": "sha512-DRQrD6gJyy8FbiE4s+bDoXS9hiW3Vbx5uCdwvcCf3zLHL+Iv7LtGHLpr+GZV8rHG8tK766FGYBwRbu8pELTt+w==" + }, + "node_modules/brace-expansion": { + "version": "1.1.11", + "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz", + "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==", + "dev": true, + "dependencies": { + "balanced-match": "^1.0.0", + "concat-map": "0.0.1" + } + }, + "node_modules/cac": { + "version": "6.7.14", + "resolved": "https://registry.npmjs.org/cac/-/cac-6.7.14.tgz", + "integrity": "sha512-b6Ilus+c3RrdDk+JhLKUAQfzzgLEPy6wcXqS7f/xe1EETvsDP6GORG7SFuOs6cID5YkqchW/LXZbX5bc8j7ZcQ==", + "engines": { + "node": ">=8" + } + }, "node_modules/case-anything": { "version": "2.1.10", "resolved": "https://registry.npmjs.org/case-anything/-/case-anything-2.1.10.tgz", @@ -141,16 +690,109 @@ "url": "https://github.com/sponsors/mesqueeb" } }, + "node_modules/chai": { + "version": "4.3.7", + "resolved": "https://registry.npmjs.org/chai/-/chai-4.3.7.tgz", + "integrity": "sha512-HLnAzZ2iupm25PlN0xFreAlBA5zaBSv3og0DdeGA4Ar6h6rJ3A0rolRUKJhSF2V10GZKDgWF/VmAEsNWjCRB+A==", + "dependencies": { + "assertion-error": "^1.1.0", + "check-error": "^1.0.2", + "deep-eql": "^4.1.2", + "get-func-name": "^2.0.0", + "loupe": "^2.3.1", + "pathval": "^1.1.1", + "type-detect": "^4.0.5" + }, + "engines": { + "node": ">=4" + } + }, + "node_modules/check-error": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/check-error/-/check-error-1.0.2.tgz", + "integrity": "sha512-BrgHpW9NURQgzoNyjfq0Wu6VFO6D7IZEmJNdtgNqpzGG8RuNFHt2jQxWlAs4HMe119chBnv+34syEZtc6IhLtA==", + "engines": { + "node": "*" + } + }, "node_modules/chroma-js": { "version": "2.4.2", "resolved": "https://registry.npmjs.org/chroma-js/-/chroma-js-2.4.2.tgz", "integrity": "sha512-U9eDw6+wt7V8z5NncY2jJfZa+hUH8XEj8FQHgFJTrUFnJfXYf4Ml4adI2vXZOjqRDpFWtYVWypDfZwnJ+HIR4A==" }, + "node_modules/concat-map": { + "version": "0.0.1", + "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz", + "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==", + "dev": true + }, + "node_modules/concordance": { + "version": "5.0.4", + "resolved": "https://registry.npmjs.org/concordance/-/concordance-5.0.4.tgz", + "integrity": "sha512-OAcsnTEYu1ARJqWVGwf4zh4JDfHZEaSNlNccFmt8YjB2l/n19/PF2viLINHc57vO4FKIAFl2FWASIGZZWZ2Kxw==", + "dependencies": { + "date-time": "^3.1.0", + "esutils": "^2.0.3", + "fast-diff": "^1.2.0", + "js-string-escape": "^1.0.1", + "lodash": "^4.17.15", + "md5-hex": "^3.0.1", + "semver": "^7.3.2", + "well-known-symbols": "^2.0.0" + }, + "engines": { + "node": ">=10.18.0 <11 || >=12.14.0 <13 || >=14" + } + }, + "node_modules/convert-source-map": { + "version": "1.9.0", + "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.9.0.tgz", + "integrity": "sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A==", + "dev": true + }, "node_modules/create-require": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/create-require/-/create-require-1.1.1.tgz", "integrity": "sha512-dcKFX3jn0MpIaXjisoRvexIJVEKzaq7z2rZKxf+MSr9TkdmHmsU4m2lcLojrj/FHl8mk5VxMmYA+ftRkP/3oKQ==" }, + "node_modules/date-time": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/date-time/-/date-time-3.1.0.tgz", + "integrity": "sha512-uqCUKXE5q1PNBXjPqvwhwJf9SwMoAHBgWJ6DcrnS5o+W2JOiIILl0JEdVD8SGujrNS02GGxgwAg2PN2zONgtjg==", + "dependencies": { + "time-zone": "^1.0.0" + }, + "engines": { + "node": ">=6" + } + }, + "node_modules/debug": { + "version": "4.3.4", + "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz", + "integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==", + "dependencies": { + "ms": "2.1.2" + }, + "engines": { + "node": ">=6.0" + }, + "peerDependenciesMeta": { + "supports-color": { + "optional": true + } + } + }, + "node_modules/deep-eql": { + "version": "4.1.3", + "resolved": "https://registry.npmjs.org/deep-eql/-/deep-eql-4.1.3.tgz", + "integrity": "sha512-WaEtAOpRA1MQ0eohqZjpGD8zdI0Ovsm8mmFhaDN8dvDZzyoUMcYDnf5Y6iu7HTXxf8JDS23qWa4a+hKCDyOPzw==", + "dependencies": { + "type-detect": "^4.0.0" + }, + "engines": { + "node": ">=6" + } + }, "node_modules/deepmerge": { "version": "4.3.0", "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.3.0.tgz", @@ -167,16 +809,564 @@ "node": ">=0.3.1" } }, + "node_modules/esbuild": { + "version": "0.17.19", + "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.17.19.tgz", + "integrity": "sha512-XQ0jAPFkK/u3LcVRcvVHQcTIqD6E2H1fvZMA5dQPSOWb3suUbWbfbRf94pjc0bNzRYLfIrDRQXr7X+LHIm5oHw==", + "hasInstallScript": true, + "bin": { + "esbuild": "bin/esbuild" + }, + "engines": { + "node": ">=12" + }, + "optionalDependencies": { + "@esbuild/android-arm": "0.17.19", + "@esbuild/android-arm64": "0.17.19", + "@esbuild/android-x64": "0.17.19", + "@esbuild/darwin-arm64": "0.17.19", + "@esbuild/darwin-x64": "0.17.19", + "@esbuild/freebsd-arm64": "0.17.19", + "@esbuild/freebsd-x64": "0.17.19", + "@esbuild/linux-arm": "0.17.19", + "@esbuild/linux-arm64": "0.17.19", + "@esbuild/linux-ia32": "0.17.19", + "@esbuild/linux-loong64": "0.17.19", + "@esbuild/linux-mips64el": "0.17.19", + "@esbuild/linux-ppc64": "0.17.19", + "@esbuild/linux-riscv64": "0.17.19", + "@esbuild/linux-s390x": "0.17.19", + "@esbuild/linux-x64": "0.17.19", + "@esbuild/netbsd-x64": "0.17.19", + "@esbuild/openbsd-x64": "0.17.19", + "@esbuild/sunos-x64": "0.17.19", + "@esbuild/win32-arm64": "0.17.19", + "@esbuild/win32-ia32": "0.17.19", + "@esbuild/win32-x64": "0.17.19" + } + }, + "node_modules/esutils": { + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz", + "integrity": "sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==", + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/fast-diff": { + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/fast-diff/-/fast-diff-1.3.0.tgz", + "integrity": "sha512-VxPP4NqbUjj6MaAOafWeUn2cXWLcCtljklUtZf0Ind4XQ+QPtmA0b18zZy0jIQx+ExRVCR/ZQpBmik5lXshNsw==" + }, + "node_modules/fs.realpath": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz", + "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==", + "dev": true + }, + "node_modules/fsevents": { + "version": "2.3.2", + "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz", + "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==", + "hasInstallScript": true, + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": "^8.16.0 || ^10.6.0 || >=11.0.0" + } + }, + "node_modules/get-func-name": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/get-func-name/-/get-func-name-2.0.0.tgz", + "integrity": "sha512-Hm0ixYtaSZ/V7C8FJrtZIuBBI+iSgL+1Aq82zSu8VQNB4S3Gk8e7Qs3VwBDJAhmRZcFqkl3tQu36g/Foh5I5ig==", + "engines": { + "node": "*" + } + }, + "node_modules/glob": { + "version": "7.2.3", + "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz", + "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==", + "dev": true, + "dependencies": { + "fs.realpath": "^1.0.0", + "inflight": "^1.0.4", + "inherits": "2", + "minimatch": "^3.1.1", + "once": "^1.3.0", + "path-is-absolute": "^1.0.0" + }, + "engines": { + "node": "*" + }, + "funding": { + "url": "https://github.com/sponsors/isaacs" + } + }, + "node_modules/has-flag": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz", + "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==", + "dev": true, + "engines": { + "node": ">=8" + } + }, + "node_modules/html-escaper": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/html-escaper/-/html-escaper-2.0.2.tgz", + "integrity": "sha512-H2iMtd0I4Mt5eYiapRdIDjp+XzelXQ0tFE4JS7YFwFevXXMmOp9myNrUvCg0D6ws8iqkRPBfKHgbwig1SmlLfg==", + "dev": true + }, + "node_modules/inflight": { + "version": "1.0.6", + "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz", + "integrity": "sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==", + "dev": true, + "dependencies": { + "once": "^1.3.0", + "wrappy": "1" + } + }, + "node_modules/inherits": { + "version": "2.0.4", + "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz", + "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==", + "dev": true + }, + "node_modules/istanbul-lib-coverage": { + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/istanbul-lib-coverage/-/istanbul-lib-coverage-3.2.0.tgz", + "integrity": "sha512-eOeJ5BHCmHYvQK7xt9GkdHuzuCGS1Y6g9Gvnx3Ym33fz/HpLRYxiS0wHNr+m/MBC8B647Xt608vCDEvhl9c6Mw==", + "dev": true, + "engines": { + "node": ">=8" + } + }, + "node_modules/istanbul-lib-report": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/istanbul-lib-report/-/istanbul-lib-report-3.0.0.tgz", + "integrity": "sha512-wcdi+uAKzfiGT2abPpKZ0hSU1rGQjUQnLvtY5MpQ7QCTahD3VODhcu4wcfY1YtkGaDD5yuydOLINXsfbus9ROw==", + "dev": true, + "dependencies": { + "istanbul-lib-coverage": "^3.0.0", + "make-dir": "^3.0.0", + "supports-color": "^7.1.0" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/istanbul-lib-source-maps": { + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/istanbul-lib-source-maps/-/istanbul-lib-source-maps-4.0.1.tgz", + "integrity": "sha512-n3s8EwkdFIJCG3BPKBYvskgXGoy88ARzvegkitk60NxRdwltLOTaH7CUiMRXvwYorl0Q712iEjcWB+fK/MrWVw==", + "dev": true, + "dependencies": { + "debug": "^4.1.1", + "istanbul-lib-coverage": "^3.0.0", + "source-map": "^0.6.1" + }, + "engines": { + "node": ">=10" + } + }, + "node_modules/istanbul-reports": { + "version": "3.1.5", + "resolved": "https://registry.npmjs.org/istanbul-reports/-/istanbul-reports-3.1.5.tgz", + "integrity": "sha512-nUsEMa9pBt/NOHqbcbeJEgqIlY/K7rVWUX6Lql2orY5e9roQOthbR3vtY4zzf2orPELg80fnxxk9zUyPlgwD1w==", + "dev": true, + "dependencies": { + "html-escaper": "^2.0.0", + "istanbul-lib-report": "^3.0.0" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/js-string-escape": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/js-string-escape/-/js-string-escape-1.0.1.tgz", + "integrity": "sha512-Smw4xcfIQ5LVjAOuJCvN/zIodzA/BBSsluuoSykP+lUvScIi4U6RJLfwHet5cxFnCswUjISV8oAXaqaJDY3chg==", + "engines": { + "node": ">= 0.8" + } + }, + "node_modules/jsonc-parser": { + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/jsonc-parser/-/jsonc-parser-3.2.0.tgz", + "integrity": "sha512-gfFQZrcTc8CnKXp6Y4/CBT3fTc0OVuDofpre4aEeEpSBPV5X5v4+Vmx+8snU7RLPrNHPKSgLxGo9YuQzz20o+w==" + }, + "node_modules/local-pkg": { + "version": "0.4.3", + "resolved": "https://registry.npmjs.org/local-pkg/-/local-pkg-0.4.3.tgz", + "integrity": "sha512-SFppqq5p42fe2qcZQqqEOiVRXl+WCP1MdT6k7BDEW1j++sp5fIY+/fdRQitvKgB5BrBcmrs5m/L0v2FrU5MY1g==", + "engines": { + "node": ">=14" + }, + "funding": { + "url": "https://github.com/sponsors/antfu" + } + }, + "node_modules/lodash": { + "version": "4.17.21", + "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz", + "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==" + }, + "node_modules/loupe": { + "version": "2.3.6", + "resolved": "https://registry.npmjs.org/loupe/-/loupe-2.3.6.tgz", + "integrity": "sha512-RaPMZKiMy8/JruncMU5Bt6na1eftNoo++R4Y+N2FrxkDVTrGvcyzFTsaGif4QTeKESheMGegbhw6iUAq+5A8zA==", + "dependencies": { + "get-func-name": "^2.0.0" + } + }, + "node_modules/lru-cache": { + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz", + "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==", + "dependencies": { + "yallist": "^4.0.0" + }, + "engines": { + "node": ">=10" + } + }, + "node_modules/magic-string": { + "version": "0.30.0", + "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.0.tgz", + "integrity": "sha512-LA+31JYDJLs82r2ScLrlz1GjSgu66ZV518eyWT+S8VhyQn/JL0u9MeBOvQMGYiPk1DBiSN9DDMOcXvigJZaViQ==", + "dependencies": { + "@jridgewell/sourcemap-codec": "^1.4.13" + }, + "engines": { + "node": ">=12" + } + }, + "node_modules/make-dir": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-3.1.0.tgz", + "integrity": "sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==", + "dev": true, + "dependencies": { + "semver": "^6.0.0" + }, + "engines": { + "node": ">=8" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/make-dir/node_modules/semver": { + "version": "6.3.0", + "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz", + "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==", + "dev": true, + "bin": { + "semver": "bin/semver.js" + } + }, "node_modules/make-error": { "version": "1.3.6", "resolved": "https://registry.npmjs.org/make-error/-/make-error-1.3.6.tgz", "integrity": "sha512-s8UhlNe7vPKomQhC1qFelMokr/Sc3AgNbso3n74mVPA5LTZwkB9NlXf4XPamLxJE8h0gh73rM94xvwRT2CVInw==" }, + "node_modules/md5-hex": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/md5-hex/-/md5-hex-3.0.1.tgz", + "integrity": "sha512-BUiRtTtV39LIJwinWBjqVsU9xhdnz7/i889V859IBFpuqGAj6LuOvHv5XLbgZ2R7ptJoJaEcxkv88/h25T7Ciw==", + "dependencies": { + "blueimp-md5": "^2.10.0" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/minimatch": { + "version": "3.1.2", + "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz", + "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==", + "dev": true, + "dependencies": { + "brace-expansion": "^1.1.7" + }, + "engines": { + "node": "*" + } + }, + "node_modules/mlly": { + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/mlly/-/mlly-1.3.0.tgz", + "integrity": "sha512-HT5mcgIQKkOrZecOjOX3DJorTikWXwsBfpcr/MGBkhfWcjiqvnaL/9ppxvIUXfjT6xt4DVIAsN9fMUz1ev4bIw==", + "dependencies": { + "acorn": "^8.8.2", + "pathe": "^1.1.0", + "pkg-types": "^1.0.3", + "ufo": "^1.1.2" + } + }, + "node_modules/ms": { + "version": "2.1.2", + "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz", + "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==" + }, + "node_modules/nanoid": { + "version": "3.3.6", + "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.6.tgz", + "integrity": "sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA==", + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/ai" + } + ], + "bin": { + "nanoid": "bin/nanoid.cjs" + }, + "engines": { + "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1" + } + }, "node_modules/nonenumerable": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/nonenumerable/-/nonenumerable-1.1.1.tgz", "integrity": "sha512-ptUD9w9D8WqW6fuJJkZNCImkf+0vdbgUTbRK3i7jsy3olqtH96hYE6Q/S3Tx9NWbcB/ocAjYshXCAUP0lZ9B4Q==" }, + "node_modules/once": { + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz", + "integrity": "sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==", + "dev": true, + "dependencies": { + "wrappy": "1" + } + }, + "node_modules/p-limit": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-4.0.0.tgz", + "integrity": "sha512-5b0R4txpzjPWVw/cXXUResoD4hb6U/x9BH08L7nw+GN1sezDzPdxeRvpc9c433fZhBan/wusjbCsqwqm4EIBIQ==", + "dependencies": { + "yocto-queue": "^1.0.0" + }, + "engines": { + "node": "^12.20.0 || ^14.13.1 || >=16.0.0" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/path-is-absolute": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz", + "integrity": "sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==", + "dev": true, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/pathe": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/pathe/-/pathe-1.1.1.tgz", + "integrity": "sha512-d+RQGp0MAYTIaDBIMmOfMwz3E+LOZnxx1HZd5R18mmCZY0QBlK0LDZfPc8FW8Ed2DlvsuE6PRjroDY+wg4+j/Q==" + }, + "node_modules/pathval": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/pathval/-/pathval-1.1.1.tgz", + "integrity": "sha512-Dp6zGqpTdETdR63lehJYPeIOqpiNBNtc7BpWSLrOje7UaIsE5aY92r/AunQA7rsXvet3lrJ3JnZX29UPTKXyKQ==", + "engines": { + "node": "*" + } + }, + "node_modules/picocolors": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz", + "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==" + }, + "node_modules/pkg-types": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/pkg-types/-/pkg-types-1.0.3.tgz", + "integrity": "sha512-nN7pYi0AQqJnoLPC9eHFQ8AcyaixBUOwvqc5TDnIKCMEE6I0y8P7OKA7fPexsXGCGxQDl/cmrLAp26LhcwxZ4A==", + "dependencies": { + "jsonc-parser": "^3.2.0", + "mlly": "^1.2.0", + "pathe": "^1.1.0" + } + }, + "node_modules/postcss": { + "version": "8.4.24", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.24.tgz", + "integrity": "sha512-M0RzbcI0sO/XJNucsGjvWU9ERWxb/ytp1w6dKtxTKgixdtQDq4rmx/g8W1hnaheq9jgwL/oyEdH5Bc4WwJKMqg==", + "funding": [ + { + "type": "opencollective", + "url": "https://opencollective.com/postcss/" + }, + { + "type": "tidelift", + "url": "https://tidelift.com/funding/github/npm/postcss" + }, + { + "type": "github", + "url": "https://github.com/sponsors/ai" + } + ], + "dependencies": { + "nanoid": "^3.3.6", + "picocolors": "^1.0.0", + "source-map-js": "^1.0.2" + }, + "engines": { + "node": "^10 || ^12 || >=14" + } + }, + "node_modules/pretty-format": { + "version": "27.5.1", + "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-27.5.1.tgz", + "integrity": "sha512-Qb1gy5OrP5+zDf2Bvnzdl3jsTf1qXVMazbvCoKhtKqVs4/YK4ozX4gKQJJVyNe+cajNPn0KoC0MC3FUmaHWEmQ==", + "dependencies": { + "ansi-regex": "^5.0.1", + "ansi-styles": "^5.0.0", + "react-is": "^17.0.1" + }, + "engines": { + "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0" + } + }, + "node_modules/react-is": { + "version": "17.0.2", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz", + "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==" + }, + "node_modules/rollup": { + "version": "3.25.1", + "resolved": "https://registry.npmjs.org/rollup/-/rollup-3.25.1.tgz", + "integrity": "sha512-tywOR+rwIt5m2ZAWSe5AIJcTat8vGlnPFAv15ycCrw33t6iFsXZ6mzHVFh2psSjxQPmI+xgzMZZizUAukBI4aQ==", + "bin": { + "rollup": "dist/bin/rollup" + }, + "engines": { + "node": ">=14.18.0", + "npm": ">=8.0.0" + }, + "optionalDependencies": { + "fsevents": "~2.3.2" + } + }, + "node_modules/semver": { + "version": "7.5.2", + "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.2.tgz", + "integrity": "sha512-SoftuTROv/cRjCze/scjGyiDtcUyxw1rgYQSZY7XTmtR5hX+dm76iDbTH8TkLPHCQmlbQVSSbNZCPM2hb0knnQ==", + "dependencies": { + "lru-cache": "^6.0.0" + }, + "bin": { + "semver": "bin/semver.js" + }, + "engines": { + "node": ">=10" + } + }, + "node_modules/siginfo": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/siginfo/-/siginfo-2.0.0.tgz", + "integrity": "sha512-ybx0WO1/8bSBLEWXZvEd7gMW3Sn3JFlW3TvX1nREbDLRNQNaeNN8WK0meBwPdAaOI7TtRRRJn/Es1zhrrCHu7g==" + }, + "node_modules/source-map": { + "version": "0.6.1", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", + "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", + "dev": true, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/source-map-js": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz", + "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==", + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/stackback": { + "version": "0.0.2", + "resolved": "https://registry.npmjs.org/stackback/-/stackback-0.0.2.tgz", + "integrity": "sha512-1XMJE5fQo1jGH6Y/7ebnwPOBEkIEnT4QF32d5R1+VXdXveM0IBMJt8zfaxX1P3QhVwrYe+576+jkANtSS2mBbw==" + }, + "node_modules/std-env": { + "version": "3.3.3", + "resolved": "https://registry.npmjs.org/std-env/-/std-env-3.3.3.tgz", + "integrity": "sha512-Rz6yejtVyWnVjC1RFvNmYL10kgjC49EOghxWn0RFqlCHGFpQx+Xe7yW3I4ceK1SGrWIGMjD5Kbue8W/udkbMJg==" + }, + "node_modules/strip-literal": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/strip-literal/-/strip-literal-1.0.1.tgz", + "integrity": "sha512-QZTsipNpa2Ppr6v1AmJHESqJ3Uz247MUS0OjrnnZjFAvEoWqxuyFuXn2xLgMtRnijJShAa1HL0gtJyUs7u7n3Q==", + "dependencies": { + "acorn": "^8.8.2" + }, + "funding": { + "url": "https://github.com/sponsors/antfu" + } + }, + "node_modules/supports-color": { + "version": "7.2.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", + "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==", + "dev": true, + "dependencies": { + "has-flag": "^4.0.0" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/test-exclude": { + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/test-exclude/-/test-exclude-6.0.0.tgz", + "integrity": "sha512-cAGWPIyOHU6zlmg88jwm7VRyXnMN7iV68OGAbYDk/Mh/xC/pzVPlQtY6ngoIH/5/tciuhGfvESU8GrHrcxD56w==", + "dev": true, + "dependencies": { + "@istanbuljs/schema": "^0.1.2", + "glob": "^7.1.4", + "minimatch": "^3.0.4" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/time-zone": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/time-zone/-/time-zone-1.0.0.tgz", + "integrity": "sha512-TIsDdtKo6+XrPtiTm1ssmMngN1sAhyKnTO2kunQWqNPWIVvCm15Wmw4SWInwTVgJ5u/Tr04+8Ei9TNcw4x4ONA==", + "engines": { + "node": ">=4" + } + }, + "node_modules/tinybench": { + "version": "2.5.0", + "resolved": "https://registry.npmjs.org/tinybench/-/tinybench-2.5.0.tgz", + "integrity": "sha512-kRwSG8Zx4tjF9ZiyH4bhaebu+EDz1BOx9hOigYHlUW4xxI/wKIUQUqo018UlU4ar6ATPBsaMrdbKZ+tmPdohFA==" + }, + "node_modules/tinypool": { + "version": "0.5.0", + "resolved": "https://registry.npmjs.org/tinypool/-/tinypool-0.5.0.tgz", + "integrity": "sha512-paHQtnrlS1QZYKF/GnLoOM/DN9fqaGOFbCbxzAhwniySnzl9Ebk8w73/dd34DAhe/obUbPAOldTyYXQZxnPBPQ==", + "engines": { + "node": ">=14.0.0" + } + }, + "node_modules/tinyspy": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/tinyspy/-/tinyspy-2.1.1.tgz", + "integrity": "sha512-XPJL2uSzcOyBMky6OFrusqWlzfFrXtE0hPuMgW8A2HmaqrPo4ZQHRN/V0QXN3FSjKxpsbRrFc5LI7KOwBsT1/w==", + "engines": { + "node": ">=14.0.0" + } + }, "node_modules/toml": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/toml/-/toml-3.0.0.tgz", @@ -232,6 +1422,14 @@ } } }, + "node_modules/type-detect": { + "version": "4.0.8", + "resolved": "https://registry.npmjs.org/type-detect/-/type-detect-4.0.8.tgz", + "integrity": "sha512-0fr/mIH1dlO+x7TlcMy+bIDqKPsw/70tVyeHW787goQjhmqaZe10uwLujubK9q9Lg6Fiho1KUKDYz0Z7k7g5/g==", + "engines": { + "node": ">=4" + } + }, "node_modules/typescript": { "version": "4.9.5", "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.5.tgz", @@ -245,6 +1443,11 @@ "node": ">=4.2.0" } }, + "node_modules/ufo": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/ufo/-/ufo-1.1.2.tgz", + "integrity": "sha512-TrY6DsjTQQgyS3E3dBaOXf0TpPD8u9FVrVYmKVegJuFw51n/YB9XPt+U6ydzFG5ZIN7+DIjPbNmXoBj9esYhgQ==" + }, "node_modules/utility-types": { "version": "3.10.0", "resolved": "https://registry.npmjs.org/utility-types/-/utility-types-3.10.0.tgz", @@ -258,6 +1461,210 @@ "resolved": "https://registry.npmjs.org/v8-compile-cache-lib/-/v8-compile-cache-lib-3.0.1.tgz", "integrity": "sha512-wa7YjyUGfNZngI/vtK0UHAN+lgDCxBPCylVXGp0zu59Fz5aiGtNXaq3DhIov063MorB+VfufLh3JlF2KdTK3xg==" }, + "node_modules/v8-to-istanbul": { + "version": "9.1.0", + "resolved": "https://registry.npmjs.org/v8-to-istanbul/-/v8-to-istanbul-9.1.0.tgz", + "integrity": "sha512-6z3GW9x8G1gd+JIIgQQQxXuiJtCXeAjp6RaPEPLv62mH3iPHPxV6W3robxtCzNErRo6ZwTmzWhsbNvjyEBKzKA==", + "dev": true, + "dependencies": { + "@jridgewell/trace-mapping": "^0.3.12", + "@types/istanbul-lib-coverage": "^2.0.1", + "convert-source-map": "^1.6.0" + }, + "engines": { + "node": ">=10.12.0" + } + }, + "node_modules/v8-to-istanbul/node_modules/@jridgewell/trace-mapping": { + "version": "0.3.18", + "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.18.tgz", + "integrity": "sha512-w+niJYzMHdd7USdiH2U6869nqhD2nbfZXND5Yp93qIbEmnDNk7PD48o+YchRVpzMU7M6jVCbenTR7PA1FLQ9pA==", + "dev": true, + "dependencies": { + "@jridgewell/resolve-uri": "3.1.0", + "@jridgewell/sourcemap-codec": "1.4.14" + } + }, + "node_modules/vite": { + "version": "4.3.9", + "resolved": "https://registry.npmjs.org/vite/-/vite-4.3.9.tgz", + "integrity": "sha512-qsTNZjO9NoJNW7KnOrgYwczm0WctJ8m/yqYAMAK9Lxt4SoySUfS5S8ia9K7JHpa3KEeMfyF8LoJ3c5NeBJy6pg==", + "dependencies": { + "esbuild": "^0.17.5", + "postcss": "^8.4.23", + "rollup": "^3.21.0" + }, + "bin": { + "vite": "bin/vite.js" + }, + "engines": { + "node": "^14.18.0 || >=16.0.0" + }, + "optionalDependencies": { + "fsevents": "~2.3.2" + }, + "peerDependencies": { + "@types/node": ">= 14", + "less": "*", + "sass": "*", + "stylus": "*", + "sugarss": "*", + "terser": "^5.4.0" + }, + "peerDependenciesMeta": { + "@types/node": { + "optional": true + }, + "less": { + "optional": true + }, + "sass": { + "optional": true + }, + "stylus": { + "optional": true + }, + "sugarss": { + "optional": true + }, + "terser": { + "optional": true + } + } + }, + "node_modules/vite-node": { + "version": "0.32.0", + "resolved": "https://registry.npmjs.org/vite-node/-/vite-node-0.32.0.tgz", + "integrity": "sha512-220P/y8YacYAU+daOAqiGEFXx2A8AwjadDzQqos6wSukjvvTWNqleJSwoUn0ckyNdjHIKoxn93Nh1vWBqEKr3Q==", + "dependencies": { + "cac": "^6.7.14", + "debug": "^4.3.4", + "mlly": "^1.2.0", + "pathe": "^1.1.0", + "picocolors": "^1.0.0", + "vite": "^3.0.0 || ^4.0.0" + }, + "bin": { + "vite-node": "vite-node.mjs" + }, + "engines": { + "node": ">=v14.18.0" + }, + "funding": { + "url": "https://opencollective.com/vitest" + } + }, + "node_modules/vitest": { + "version": "0.32.0", + "resolved": "https://registry.npmjs.org/vitest/-/vitest-0.32.0.tgz", + "integrity": "sha512-SW83o629gCqnV3BqBnTxhB10DAwzwEx3z+rqYZESehUB+eWsJxwcBQx7CKy0otuGMJTYh7qCVuUX23HkftGl/Q==", + "dependencies": { + "@types/chai": "^4.3.5", + "@types/chai-subset": "^1.3.3", + "@types/node": "*", + "@vitest/expect": "0.32.0", + "@vitest/runner": "0.32.0", + "@vitest/snapshot": "0.32.0", + "@vitest/spy": "0.32.0", + "@vitest/utils": "0.32.0", + "acorn": "^8.8.2", + "acorn-walk": "^8.2.0", + "cac": "^6.7.14", + "chai": "^4.3.7", + "concordance": "^5.0.4", + "debug": "^4.3.4", + "local-pkg": "^0.4.3", + "magic-string": "^0.30.0", + "pathe": "^1.1.0", + "picocolors": "^1.0.0", + "std-env": "^3.3.2", + "strip-literal": "^1.0.1", + "tinybench": "^2.5.0", + "tinypool": "^0.5.0", + "vite": "^3.0.0 || ^4.0.0", + "vite-node": "0.32.0", + "why-is-node-running": "^2.2.2" + }, + "bin": { + "vitest": "vitest.mjs" + }, + "engines": { + "node": ">=v14.18.0" + }, + "funding": { + "url": "https://opencollective.com/vitest" + }, + "peerDependencies": { + "@edge-runtime/vm": "*", + "@vitest/browser": "*", + "@vitest/ui": "*", + "happy-dom": "*", + "jsdom": "*", + "playwright": "*", + "safaridriver": "*", + "webdriverio": "*" + }, + "peerDependenciesMeta": { + "@edge-runtime/vm": { + "optional": true + }, + "@vitest/browser": { + "optional": true + }, + "@vitest/ui": { + "optional": true + }, + "happy-dom": { + "optional": true + }, + "jsdom": { + "optional": true + }, + "playwright": { + "optional": true + }, + "safaridriver": { + "optional": true + }, + "webdriverio": { + "optional": true + } + } + }, + "node_modules/well-known-symbols": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/well-known-symbols/-/well-known-symbols-2.0.0.tgz", + "integrity": "sha512-ZMjC3ho+KXo0BfJb7JgtQ5IBuvnShdlACNkKkdsqBmYw3bPAaJfPeYUo6tLUaT5tG/Gkh7xkpBhKRQ9e7pyg9Q==", + "engines": { + "node": ">=6" + } + }, + "node_modules/why-is-node-running": { + "version": "2.2.2", + "resolved": "https://registry.npmjs.org/why-is-node-running/-/why-is-node-running-2.2.2.tgz", + "integrity": "sha512-6tSwToZxTOcotxHeA+qGCq1mVzKR3CwcJGmVcY+QE8SHy6TnpFnh8PAvPNHYr7EcuVeG0QSMxtYCuO1ta/G/oA==", + "dependencies": { + "siginfo": "^2.0.0", + "stackback": "0.0.2" + }, + "bin": { + "why-is-node-running": "cli.js" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/wrappy": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz", + "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==", + "dev": true + }, + "node_modules/yallist": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz", + "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==" + }, "node_modules/yn": { "version": "3.1.1", "resolved": "https://registry.npmjs.org/yn/-/yn-3.1.1.tgz", @@ -265,9 +1672,36 @@ "engines": { "node": ">=6" } + }, + "node_modules/yocto-queue": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-1.0.0.tgz", + "integrity": "sha512-9bnSc/HEW2uRy67wc+T8UwauLuPJVn28jb+GtJY16iiKWyvmYJRXVT4UamsAEGQfPohgr2q4Tq0sQbQlxTfi1g==", + "engines": { + "node": ">=12.20" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } } }, "dependencies": { + "@ampproject/remapping": { + "version": "2.2.1", + "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.2.1.tgz", + "integrity": "sha512-lFMjJTrFL3j7L9yBxwYfCq2k6qqwHyzuUl/XBnif78PWTJYyL/dfowQHWE3sp6U6ZzqWiiIZnpTMO96zhkjwtg==", + "dev": true, + "requires": { + "@jridgewell/gen-mapping": "^0.3.0", + "@jridgewell/trace-mapping": "^0.3.9" + } + }, + "@bcoe/v8-coverage": { + "version": "0.2.3", + "resolved": "https://registry.npmjs.org/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz", + "integrity": "sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==", + "dev": true + }, "@cspotcode/source-map-support": { "version": "0.8.1", "resolved": "https://registry.npmjs.org/@cspotcode/source-map-support/-/source-map-support-0.8.1.tgz", @@ -276,11 +1710,166 @@ "@jridgewell/trace-mapping": "0.3.9" } }, + "@esbuild/android-arm": { + "version": "0.17.19", + "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.17.19.tgz", + "integrity": "sha512-rIKddzqhmav7MSmoFCmDIb6e2W57geRsM94gV2l38fzhXMwq7hZoClug9USI2pFRGL06f4IOPHHpFNOkWieR8A==", + "optional": true + }, + "@esbuild/android-arm64": { + "version": "0.17.19", + "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.17.19.tgz", + "integrity": "sha512-KBMWvEZooR7+kzY0BtbTQn0OAYY7CsiydT63pVEaPtVYF0hXbUaOyZog37DKxK7NF3XacBJOpYT4adIJh+avxA==", + "optional": true + }, + "@esbuild/android-x64": { + "version": "0.17.19", + "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.17.19.tgz", + "integrity": "sha512-uUTTc4xGNDT7YSArp/zbtmbhO0uEEK9/ETW29Wk1thYUJBz3IVnvgEiEwEa9IeLyvnpKrWK64Utw2bgUmDveww==", + "optional": true + }, + "@esbuild/darwin-arm64": { + "version": "0.17.19", + "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.17.19.tgz", + "integrity": "sha512-80wEoCfF/hFKM6WE1FyBHc9SfUblloAWx6FJkFWTWiCoht9Mc0ARGEM47e67W9rI09YoUxJL68WHfDRYEAvOhg==", + "optional": true + }, + "@esbuild/darwin-x64": { + "version": "0.17.19", + "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.17.19.tgz", + "integrity": "sha512-IJM4JJsLhRYr9xdtLytPLSH9k/oxR3boaUIYiHkAawtwNOXKE8KoU8tMvryogdcT8AU+Bflmh81Xn6Q0vTZbQw==", + "optional": true + }, + "@esbuild/freebsd-arm64": { + "version": "0.17.19", + "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.17.19.tgz", + "integrity": "sha512-pBwbc7DufluUeGdjSU5Si+P3SoMF5DQ/F/UmTSb8HXO80ZEAJmrykPyzo1IfNbAoaqw48YRpv8shwd1NoI0jcQ==", + "optional": true + }, + "@esbuild/freebsd-x64": { + "version": "0.17.19", + "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.17.19.tgz", + "integrity": "sha512-4lu+n8Wk0XlajEhbEffdy2xy53dpR06SlzvhGByyg36qJw6Kpfk7cp45DR/62aPH9mtJRmIyrXAS5UWBrJT6TQ==", + "optional": true + }, + "@esbuild/linux-arm": { + "version": "0.17.19", + "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.17.19.tgz", + "integrity": "sha512-cdmT3KxjlOQ/gZ2cjfrQOtmhG4HJs6hhvm3mWSRDPtZ/lP5oe8FWceS10JaSJC13GBd4eH/haHnqf7hhGNLerA==", + "optional": true + }, + "@esbuild/linux-arm64": { + "version": "0.17.19", + "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.17.19.tgz", + "integrity": "sha512-ct1Tg3WGwd3P+oZYqic+YZF4snNl2bsnMKRkb3ozHmnM0dGWuxcPTTntAF6bOP0Sp4x0PjSF+4uHQ1xvxfRKqg==", + "optional": true + }, + "@esbuild/linux-ia32": { + "version": "0.17.19", + "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.17.19.tgz", + "integrity": "sha512-w4IRhSy1VbsNxHRQpeGCHEmibqdTUx61Vc38APcsRbuVgK0OPEnQ0YD39Brymn96mOx48Y2laBQGqgZ0j9w6SQ==", + "optional": true + }, + "@esbuild/linux-loong64": { + "version": "0.17.19", + "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.17.19.tgz", + "integrity": "sha512-2iAngUbBPMq439a+z//gE+9WBldoMp1s5GWsUSgqHLzLJ9WoZLZhpwWuym0u0u/4XmZ3gpHmzV84PonE+9IIdQ==", + "optional": true + }, + "@esbuild/linux-mips64el": { + "version": "0.17.19", + "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.17.19.tgz", + "integrity": "sha512-LKJltc4LVdMKHsrFe4MGNPp0hqDFA1Wpt3jE1gEyM3nKUvOiO//9PheZZHfYRfYl6AwdTH4aTcXSqBerX0ml4A==", + "optional": true + }, + "@esbuild/linux-ppc64": { + "version": "0.17.19", + "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.17.19.tgz", + "integrity": "sha512-/c/DGybs95WXNS8y3Ti/ytqETiW7EU44MEKuCAcpPto3YjQbyK3IQVKfF6nbghD7EcLUGl0NbiL5Rt5DMhn5tg==", + "optional": true + }, + "@esbuild/linux-riscv64": { + "version": "0.17.19", + "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.17.19.tgz", + "integrity": "sha512-FC3nUAWhvFoutlhAkgHf8f5HwFWUL6bYdvLc/TTuxKlvLi3+pPzdZiFKSWz/PF30TB1K19SuCxDTI5KcqASJqA==", + "optional": true + }, + "@esbuild/linux-s390x": { + "version": "0.17.19", + "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.17.19.tgz", + "integrity": "sha512-IbFsFbxMWLuKEbH+7sTkKzL6NJmG2vRyy6K7JJo55w+8xDk7RElYn6xvXtDW8HCfoKBFK69f3pgBJSUSQPr+4Q==", + "optional": true + }, + "@esbuild/linux-x64": { + "version": "0.17.19", + "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.17.19.tgz", + "integrity": "sha512-68ngA9lg2H6zkZcyp22tsVt38mlhWde8l3eJLWkyLrp4HwMUr3c1s/M2t7+kHIhvMjglIBrFpncX1SzMckomGw==", + "optional": true + }, + "@esbuild/netbsd-x64": { + "version": "0.17.19", + "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.17.19.tgz", + "integrity": "sha512-CwFq42rXCR8TYIjIfpXCbRX0rp1jo6cPIUPSaWwzbVI4aOfX96OXY8M6KNmtPcg7QjYeDmN+DD0Wp3LaBOLf4Q==", + "optional": true + }, + "@esbuild/openbsd-x64": { + "version": "0.17.19", + "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.17.19.tgz", + "integrity": "sha512-cnq5brJYrSZ2CF6c35eCmviIN3k3RczmHz8eYaVlNasVqsNY+JKohZU5MKmaOI+KkllCdzOKKdPs762VCPC20g==", + "optional": true + }, + "@esbuild/sunos-x64": { + "version": "0.17.19", + "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.17.19.tgz", + "integrity": "sha512-vCRT7yP3zX+bKWFeP/zdS6SqdWB8OIpaRq/mbXQxTGHnIxspRtigpkUcDMlSCOejlHowLqII7K2JKevwyRP2rg==", + "optional": true + }, + "@esbuild/win32-arm64": { + "version": "0.17.19", + "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.17.19.tgz", + "integrity": "sha512-yYx+8jwowUstVdorcMdNlzklLYhPxjniHWFKgRqH7IFlUEa0Umu3KuYplf1HUZZ422e3NU9F4LGb+4O0Kdcaag==", + "optional": true + }, + "@esbuild/win32-ia32": { + "version": "0.17.19", + "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.17.19.tgz", + "integrity": "sha512-eggDKanJszUtCdlVs0RB+h35wNlb5v4TWEkq4vZcmVt5u/HiDZrTXe2bWFQUez3RgNHwx/x4sk5++4NSSicKkw==", + "optional": true + }, + "@esbuild/win32-x64": { + "version": "0.17.19", + "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.17.19.tgz", + "integrity": "sha512-lAhycmKnVOuRYNtRtatQR1LPQf2oYCkRGkSFnseDAKPl8lu5SOsK/e1sXe5a0Pc5kHIHe6P2I/ilntNv2xf3cA==", + "optional": true + }, + "@istanbuljs/schema": { + "version": "0.1.3", + "resolved": "https://registry.npmjs.org/@istanbuljs/schema/-/schema-0.1.3.tgz", + "integrity": "sha512-ZXRY4jNvVgSVQ8DL3LTcakaAtXwTVUxE81hslsyD2AtoXW/wVob10HkOJ1X/pAlcI7D+2YoZKg5do8G/w6RYgA==", + "dev": true + }, + "@jridgewell/gen-mapping": { + "version": "0.3.3", + "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.3.tgz", + "integrity": "sha512-HLhSWOLRi875zjjMG/r+Nv0oCW8umGb0BgEhyX3dDX3egwZtB8PqLnjz3yedt8R5StBrzcg4aBpnh8UA9D1BoQ==", + "dev": true, + "requires": { + "@jridgewell/set-array": "^1.0.1", + "@jridgewell/sourcemap-codec": "^1.4.10", + "@jridgewell/trace-mapping": "^0.3.9" + } + }, "@jridgewell/resolve-uri": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.0.tgz", "integrity": "sha512-F2msla3tad+Mfht5cJq7LSXcdudKTWCVYUgw6pLFOOHSTtZlj6SWNYAp+AhuqLmWdBO2X5hPrLcu8cVP8fy28w==" }, + "@jridgewell/set-array": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.1.2.tgz", + "integrity": "sha512-xnkseuNADM0gt2bs+BvhO0p78Mk762YnZdsuzFV018NoG1Sj1SCQvpSqa7XUaTam5vAGasABV9qXASMKnFMwMw==", + "dev": true + }, "@jridgewell/sourcemap-codec": { "version": "1.4.14", "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.14.tgz", @@ -320,16 +1909,103 @@ "resolved": "https://registry.npmjs.org/@tsconfig/node16/-/node16-1.0.3.tgz", "integrity": "sha512-yOlFc+7UtL/89t2ZhjPvvB/DeAr3r+Dq58IgzsFkOAvVC6NMJXmCGjbptdXdR9qsX7pKcTL+s87FtYREi2dEEQ==" }, + "@types/chai": { + "version": "4.3.5", + "resolved": "https://registry.npmjs.org/@types/chai/-/chai-4.3.5.tgz", + "integrity": "sha512-mEo1sAde+UCE6b2hxn332f1g1E8WfYRu6p5SvTKr2ZKC1f7gFJXk4h5PyGP9Dt6gCaG8y8XhwnXWC6Iy2cmBng==" + }, + "@types/chai-subset": { + "version": "1.3.3", + "resolved": "https://registry.npmjs.org/@types/chai-subset/-/chai-subset-1.3.3.tgz", + "integrity": "sha512-frBecisrNGz+F4T6bcc+NLeolfiojh5FxW2klu669+8BARtyQv2C/GkNW6FUodVe4BroGMP/wER/YDGc7rEllw==", + "requires": { + "@types/chai": "*" + } + }, "@types/chroma-js": { "version": "2.4.0", "resolved": "https://registry.npmjs.org/@types/chroma-js/-/chroma-js-2.4.0.tgz", "integrity": "sha512-JklMxityrwjBTjGY2anH8JaTx3yjRU3/sEHSblLH1ba5lqcSh1LnImXJZO5peJfXyqKYWjHTGy4s5Wz++hARrw==" }, + "@types/istanbul-lib-coverage": { + "version": "2.0.4", + "resolved": "https://registry.npmjs.org/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.4.tgz", + "integrity": "sha512-z/QT1XN4K4KYuslS23k62yDIDLwLFkzxOuMplDtObz0+y7VqJCaO2o+SPwHCvLFZh7xazvvoor2tA/hPz9ee7g==", + "dev": true + }, "@types/node": { "version": "18.14.1", "resolved": "https://registry.npmjs.org/@types/node/-/node-18.14.1.tgz", "integrity": "sha512-QH+37Qds3E0eDlReeboBxfHbX9omAcBCXEzswCu6jySP642jiM3cYSIkU/REqwhCUqXdonHFuBfJDiAJxMNhaQ==" }, + "@vitest/coverage-v8": { + "version": "0.32.0", + "resolved": "https://registry.npmjs.org/@vitest/coverage-v8/-/coverage-v8-0.32.0.tgz", + "integrity": "sha512-VXXlWq9X/NbsoP/l/CHLBjutsFFww1UY1qEhzGjn/DY7Tqe+z0Nu8XKc8im/XUAmjiWsh2XV7sy/F0IKAl4eaw==", + "dev": true, + "requires": { + "@ampproject/remapping": "^2.2.1", + "@bcoe/v8-coverage": "^0.2.3", + "istanbul-lib-coverage": "^3.2.0", + "istanbul-lib-report": "^3.0.0", + "istanbul-lib-source-maps": "^4.0.1", + "istanbul-reports": "^3.1.5", + "magic-string": "^0.30.0", + "picocolors": "^1.0.0", + "std-env": "^3.3.2", + "test-exclude": "^6.0.0", + "v8-to-istanbul": "^9.1.0" + } + }, + "@vitest/expect": { + "version": "0.32.0", + "resolved": "https://registry.npmjs.org/@vitest/expect/-/expect-0.32.0.tgz", + "integrity": "sha512-VxVHhIxKw9Lux+O9bwLEEk2gzOUe93xuFHy9SzYWnnoYZFYg1NfBtnfnYWiJN7yooJ7KNElCK5YtA7DTZvtXtg==", + "requires": { + "@vitest/spy": "0.32.0", + "@vitest/utils": "0.32.0", + "chai": "^4.3.7" + } + }, + "@vitest/runner": { + "version": "0.32.0", + "resolved": "https://registry.npmjs.org/@vitest/runner/-/runner-0.32.0.tgz", + "integrity": "sha512-QpCmRxftHkr72xt5A08xTEs9I4iWEXIOCHWhQQguWOKE4QH7DXSKZSOFibuwEIMAD7G0ERvtUyQn7iPWIqSwmw==", + "requires": { + "@vitest/utils": "0.32.0", + "concordance": "^5.0.4", + "p-limit": "^4.0.0", + "pathe": "^1.1.0" + } + }, + "@vitest/snapshot": { + "version": "0.32.0", + "resolved": "https://registry.npmjs.org/@vitest/snapshot/-/snapshot-0.32.0.tgz", + "integrity": "sha512-yCKorPWjEnzpUxQpGlxulujTcSPgkblwGzAUEL+z01FTUg/YuCDZ8dxr9sHA08oO2EwxzHXNLjQKWJ2zc2a19Q==", + "requires": { + "magic-string": "^0.30.0", + "pathe": "^1.1.0", + "pretty-format": "^27.5.1" + } + }, + "@vitest/spy": { + "version": "0.32.0", + "resolved": "https://registry.npmjs.org/@vitest/spy/-/spy-0.32.0.tgz", + "integrity": "sha512-MruAPlM0uyiq3d53BkwTeShXY0rYEfhNGQzVO5GHBmmX3clsxcWp79mMnkOVcV244sNTeDcHbcPFWIjOI4tZvw==", + "requires": { + "tinyspy": "^2.1.0" + } + }, + "@vitest/utils": { + "version": "0.32.0", + "resolved": "https://registry.npmjs.org/@vitest/utils/-/utils-0.32.0.tgz", + "integrity": "sha512-53yXunzx47MmbuvcOPpLaVljHaeSu1G2dHdmy7+9ngMnQIkBQcvwOcoclWFnxDMxFbnq8exAfh3aKSZaK71J5A==", + "requires": { + "concordance": "^5.0.4", + "loupe": "^2.3.6", + "pretty-format": "^27.5.1" + } + }, "acorn": { "version": "8.8.2", "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.8.2.tgz", @@ -340,11 +2016,26 @@ "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-8.2.0.tgz", "integrity": "sha512-k+iyHEuPgSw6SbuDpGQM+06HQUa04DZ3o+F6CSzXMvvI5KMvnaEqXe+YVe555R9nn6GPt404fos4wcgpw12SDA==" }, + "ansi-regex": { + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz", + "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==" + }, + "ansi-styles": { + "version": "5.2.0", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-5.2.0.tgz", + "integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==" + }, "arg": { "version": "4.1.3", "resolved": "https://registry.npmjs.org/arg/-/arg-4.1.3.tgz", "integrity": "sha512-58S9QDqG0Xx27YwPSt9fJxivjYl432YCwfDMfZ+71RAqUrZef7LrKQZ3LHLOwCS4FLNBplP533Zx895SeOCHvA==" }, + "assertion-error": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/assertion-error/-/assertion-error-1.1.0.tgz", + "integrity": "sha512-jgsaNduz+ndvGyFt3uSuWqvy4lCnIJiovtouQN5JZHOKCS2QuhEdbcQHFhVksz2N2U9hXJo8odG7ETyWlEeuDw==" + }, "ayu": { "version": "8.0.1", "resolved": "https://registry.npmjs.org/ayu/-/ayu-8.0.1.tgz", @@ -355,26 +2046,122 @@ "nonenumerable": "^1.1.1" } }, + "balanced-match": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz", + "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==", + "dev": true + }, "bezier-easing": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/bezier-easing/-/bezier-easing-2.1.0.tgz", "integrity": "sha512-gbIqZ/eslnUFC1tjEvtz0sgx+xTK20wDnYMIA27VA04R7w6xxXQPZDbibjA9DTWZRA2CXtwHykkVzlCaAJAZig==" }, + "blueimp-md5": { + "version": "2.19.0", + "resolved": "https://registry.npmjs.org/blueimp-md5/-/blueimp-md5-2.19.0.tgz", + "integrity": "sha512-DRQrD6gJyy8FbiE4s+bDoXS9hiW3Vbx5uCdwvcCf3zLHL+Iv7LtGHLpr+GZV8rHG8tK766FGYBwRbu8pELTt+w==" + }, + "brace-expansion": { + "version": "1.1.11", + "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz", + "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==", + "dev": true, + "requires": { + "balanced-match": "^1.0.0", + "concat-map": "0.0.1" + } + }, + "cac": { + "version": "6.7.14", + "resolved": "https://registry.npmjs.org/cac/-/cac-6.7.14.tgz", + "integrity": "sha512-b6Ilus+c3RrdDk+JhLKUAQfzzgLEPy6wcXqS7f/xe1EETvsDP6GORG7SFuOs6cID5YkqchW/LXZbX5bc8j7ZcQ==" + }, "case-anything": { "version": "2.1.10", "resolved": "https://registry.npmjs.org/case-anything/-/case-anything-2.1.10.tgz", "integrity": "sha512-JczJwVrCP0jPKh05McyVsuOg6AYosrB9XWZKbQzXeDAm2ClE/PJE/BcrrQrVyGYH7Jg8V/LDupmyL4kFlVsVFQ==" }, + "chai": { + "version": "4.3.7", + "resolved": "https://registry.npmjs.org/chai/-/chai-4.3.7.tgz", + "integrity": "sha512-HLnAzZ2iupm25PlN0xFreAlBA5zaBSv3og0DdeGA4Ar6h6rJ3A0rolRUKJhSF2V10GZKDgWF/VmAEsNWjCRB+A==", + "requires": { + "assertion-error": "^1.1.0", + "check-error": "^1.0.2", + "deep-eql": "^4.1.2", + "get-func-name": "^2.0.0", + "loupe": "^2.3.1", + "pathval": "^1.1.1", + "type-detect": "^4.0.5" + } + }, + "check-error": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/check-error/-/check-error-1.0.2.tgz", + "integrity": "sha512-BrgHpW9NURQgzoNyjfq0Wu6VFO6D7IZEmJNdtgNqpzGG8RuNFHt2jQxWlAs4HMe119chBnv+34syEZtc6IhLtA==" + }, "chroma-js": { "version": "2.4.2", "resolved": "https://registry.npmjs.org/chroma-js/-/chroma-js-2.4.2.tgz", "integrity": "sha512-U9eDw6+wt7V8z5NncY2jJfZa+hUH8XEj8FQHgFJTrUFnJfXYf4Ml4adI2vXZOjqRDpFWtYVWypDfZwnJ+HIR4A==" }, + "concat-map": { + "version": "0.0.1", + "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz", + "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==", + "dev": true + }, + "concordance": { + "version": "5.0.4", + "resolved": "https://registry.npmjs.org/concordance/-/concordance-5.0.4.tgz", + "integrity": "sha512-OAcsnTEYu1ARJqWVGwf4zh4JDfHZEaSNlNccFmt8YjB2l/n19/PF2viLINHc57vO4FKIAFl2FWASIGZZWZ2Kxw==", + "requires": { + "date-time": "^3.1.0", + "esutils": "^2.0.3", + "fast-diff": "^1.2.0", + "js-string-escape": "^1.0.1", + "lodash": "^4.17.15", + "md5-hex": "^3.0.1", + "semver": "^7.3.2", + "well-known-symbols": "^2.0.0" + } + }, + "convert-source-map": { + "version": "1.9.0", + "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.9.0.tgz", + "integrity": "sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A==", + "dev": true + }, "create-require": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/create-require/-/create-require-1.1.1.tgz", "integrity": "sha512-dcKFX3jn0MpIaXjisoRvexIJVEKzaq7z2rZKxf+MSr9TkdmHmsU4m2lcLojrj/FHl8mk5VxMmYA+ftRkP/3oKQ==" }, + "date-time": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/date-time/-/date-time-3.1.0.tgz", + "integrity": "sha512-uqCUKXE5q1PNBXjPqvwhwJf9SwMoAHBgWJ6DcrnS5o+W2JOiIILl0JEdVD8SGujrNS02GGxgwAg2PN2zONgtjg==", + "requires": { + "time-zone": "^1.0.0" + } + }, + "debug": { + "version": "4.3.4", + "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz", + "integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==", + "requires": { + "ms": "2.1.2" + } + }, + "deep-eql": { + "version": "4.1.3", + "resolved": "https://registry.npmjs.org/deep-eql/-/deep-eql-4.1.3.tgz", + "integrity": "sha512-WaEtAOpRA1MQ0eohqZjpGD8zdI0Ovsm8mmFhaDN8dvDZzyoUMcYDnf5Y6iu7HTXxf8JDS23qWa4a+hKCDyOPzw==", + "requires": { + "type-detect": "^4.0.0" + } + }, "deepmerge": { "version": "4.3.0", "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.3.0.tgz", @@ -385,16 +2172,414 @@ "resolved": "https://registry.npmjs.org/diff/-/diff-4.0.2.tgz", "integrity": "sha512-58lmxKSA4BNyLz+HHMUzlOEpg09FV+ev6ZMe3vJihgdxzgcwZ8VoEEPmALCZG9LmqfVoNMMKpttIYTVG6uDY7A==" }, + "esbuild": { + "version": "0.17.19", + "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.17.19.tgz", + "integrity": "sha512-XQ0jAPFkK/u3LcVRcvVHQcTIqD6E2H1fvZMA5dQPSOWb3suUbWbfbRf94pjc0bNzRYLfIrDRQXr7X+LHIm5oHw==", + "requires": { + "@esbuild/android-arm": "0.17.19", + "@esbuild/android-arm64": "0.17.19", + "@esbuild/android-x64": "0.17.19", + "@esbuild/darwin-arm64": "0.17.19", + "@esbuild/darwin-x64": "0.17.19", + "@esbuild/freebsd-arm64": "0.17.19", + "@esbuild/freebsd-x64": "0.17.19", + "@esbuild/linux-arm": "0.17.19", + "@esbuild/linux-arm64": "0.17.19", + "@esbuild/linux-ia32": "0.17.19", + "@esbuild/linux-loong64": "0.17.19", + "@esbuild/linux-mips64el": "0.17.19", + "@esbuild/linux-ppc64": "0.17.19", + "@esbuild/linux-riscv64": "0.17.19", + "@esbuild/linux-s390x": "0.17.19", + "@esbuild/linux-x64": "0.17.19", + "@esbuild/netbsd-x64": "0.17.19", + "@esbuild/openbsd-x64": "0.17.19", + "@esbuild/sunos-x64": "0.17.19", + "@esbuild/win32-arm64": "0.17.19", + "@esbuild/win32-ia32": "0.17.19", + "@esbuild/win32-x64": "0.17.19" + } + }, + "esutils": { + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz", + "integrity": "sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==" + }, + "fast-diff": { + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/fast-diff/-/fast-diff-1.3.0.tgz", + "integrity": "sha512-VxPP4NqbUjj6MaAOafWeUn2cXWLcCtljklUtZf0Ind4XQ+QPtmA0b18zZy0jIQx+ExRVCR/ZQpBmik5lXshNsw==" + }, + "fs.realpath": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz", + "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==", + "dev": true + }, + "fsevents": { + "version": "2.3.2", + "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz", + "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==", + "optional": true + }, + "get-func-name": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/get-func-name/-/get-func-name-2.0.0.tgz", + "integrity": "sha512-Hm0ixYtaSZ/V7C8FJrtZIuBBI+iSgL+1Aq82zSu8VQNB4S3Gk8e7Qs3VwBDJAhmRZcFqkl3tQu36g/Foh5I5ig==" + }, + "glob": { + "version": "7.2.3", + "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz", + "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==", + "dev": true, + "requires": { + "fs.realpath": "^1.0.0", + "inflight": "^1.0.4", + "inherits": "2", + "minimatch": "^3.1.1", + "once": "^1.3.0", + "path-is-absolute": "^1.0.0" + } + }, + "has-flag": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz", + "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==", + "dev": true + }, + "html-escaper": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/html-escaper/-/html-escaper-2.0.2.tgz", + "integrity": "sha512-H2iMtd0I4Mt5eYiapRdIDjp+XzelXQ0tFE4JS7YFwFevXXMmOp9myNrUvCg0D6ws8iqkRPBfKHgbwig1SmlLfg==", + "dev": true + }, + "inflight": { + "version": "1.0.6", + "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz", + "integrity": "sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==", + "dev": true, + "requires": { + "once": "^1.3.0", + "wrappy": "1" + } + }, + "inherits": { + "version": "2.0.4", + "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz", + "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==", + "dev": true + }, + "istanbul-lib-coverage": { + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/istanbul-lib-coverage/-/istanbul-lib-coverage-3.2.0.tgz", + "integrity": "sha512-eOeJ5BHCmHYvQK7xt9GkdHuzuCGS1Y6g9Gvnx3Ym33fz/HpLRYxiS0wHNr+m/MBC8B647Xt608vCDEvhl9c6Mw==", + "dev": true + }, + "istanbul-lib-report": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/istanbul-lib-report/-/istanbul-lib-report-3.0.0.tgz", + "integrity": "sha512-wcdi+uAKzfiGT2abPpKZ0hSU1rGQjUQnLvtY5MpQ7QCTahD3VODhcu4wcfY1YtkGaDD5yuydOLINXsfbus9ROw==", + "dev": true, + "requires": { + "istanbul-lib-coverage": "^3.0.0", + "make-dir": "^3.0.0", + "supports-color": "^7.1.0" + } + }, + "istanbul-lib-source-maps": { + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/istanbul-lib-source-maps/-/istanbul-lib-source-maps-4.0.1.tgz", + "integrity": "sha512-n3s8EwkdFIJCG3BPKBYvskgXGoy88ARzvegkitk60NxRdwltLOTaH7CUiMRXvwYorl0Q712iEjcWB+fK/MrWVw==", + "dev": true, + "requires": { + "debug": "^4.1.1", + "istanbul-lib-coverage": "^3.0.0", + "source-map": "^0.6.1" + } + }, + "istanbul-reports": { + "version": "3.1.5", + "resolved": "https://registry.npmjs.org/istanbul-reports/-/istanbul-reports-3.1.5.tgz", + "integrity": "sha512-nUsEMa9pBt/NOHqbcbeJEgqIlY/K7rVWUX6Lql2orY5e9roQOthbR3vtY4zzf2orPELg80fnxxk9zUyPlgwD1w==", + "dev": true, + "requires": { + "html-escaper": "^2.0.0", + "istanbul-lib-report": "^3.0.0" + } + }, + "js-string-escape": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/js-string-escape/-/js-string-escape-1.0.1.tgz", + "integrity": "sha512-Smw4xcfIQ5LVjAOuJCvN/zIodzA/BBSsluuoSykP+lUvScIi4U6RJLfwHet5cxFnCswUjISV8oAXaqaJDY3chg==" + }, + "jsonc-parser": { + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/jsonc-parser/-/jsonc-parser-3.2.0.tgz", + "integrity": "sha512-gfFQZrcTc8CnKXp6Y4/CBT3fTc0OVuDofpre4aEeEpSBPV5X5v4+Vmx+8snU7RLPrNHPKSgLxGo9YuQzz20o+w==" + }, + "local-pkg": { + "version": "0.4.3", + "resolved": "https://registry.npmjs.org/local-pkg/-/local-pkg-0.4.3.tgz", + "integrity": "sha512-SFppqq5p42fe2qcZQqqEOiVRXl+WCP1MdT6k7BDEW1j++sp5fIY+/fdRQitvKgB5BrBcmrs5m/L0v2FrU5MY1g==" + }, + "lodash": { + "version": "4.17.21", + "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz", + "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==" + }, + "loupe": { + "version": "2.3.6", + "resolved": "https://registry.npmjs.org/loupe/-/loupe-2.3.6.tgz", + "integrity": "sha512-RaPMZKiMy8/JruncMU5Bt6na1eftNoo++R4Y+N2FrxkDVTrGvcyzFTsaGif4QTeKESheMGegbhw6iUAq+5A8zA==", + "requires": { + "get-func-name": "^2.0.0" + } + }, + "lru-cache": { + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz", + "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==", + "requires": { + "yallist": "^4.0.0" + } + }, + "magic-string": { + "version": "0.30.0", + "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.0.tgz", + "integrity": "sha512-LA+31JYDJLs82r2ScLrlz1GjSgu66ZV518eyWT+S8VhyQn/JL0u9MeBOvQMGYiPk1DBiSN9DDMOcXvigJZaViQ==", + "requires": { + "@jridgewell/sourcemap-codec": "^1.4.13" + } + }, + "make-dir": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-3.1.0.tgz", + "integrity": "sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==", + "dev": true, + "requires": { + "semver": "^6.0.0" + }, + "dependencies": { + "semver": { + "version": "6.3.0", + "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz", + "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==", + "dev": true + } + } + }, "make-error": { "version": "1.3.6", "resolved": "https://registry.npmjs.org/make-error/-/make-error-1.3.6.tgz", "integrity": "sha512-s8UhlNe7vPKomQhC1qFelMokr/Sc3AgNbso3n74mVPA5LTZwkB9NlXf4XPamLxJE8h0gh73rM94xvwRT2CVInw==" }, + "md5-hex": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/md5-hex/-/md5-hex-3.0.1.tgz", + "integrity": "sha512-BUiRtTtV39LIJwinWBjqVsU9xhdnz7/i889V859IBFpuqGAj6LuOvHv5XLbgZ2R7ptJoJaEcxkv88/h25T7Ciw==", + "requires": { + "blueimp-md5": "^2.10.0" + } + }, + "minimatch": { + "version": "3.1.2", + "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz", + "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==", + "dev": true, + "requires": { + "brace-expansion": "^1.1.7" + } + }, + "mlly": { + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/mlly/-/mlly-1.3.0.tgz", + "integrity": "sha512-HT5mcgIQKkOrZecOjOX3DJorTikWXwsBfpcr/MGBkhfWcjiqvnaL/9ppxvIUXfjT6xt4DVIAsN9fMUz1ev4bIw==", + "requires": { + "acorn": "^8.8.2", + "pathe": "^1.1.0", + "pkg-types": "^1.0.3", + "ufo": "^1.1.2" + } + }, + "ms": { + "version": "2.1.2", + "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz", + "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==" + }, + "nanoid": { + "version": "3.3.6", + "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.6.tgz", + "integrity": "sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA==" + }, "nonenumerable": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/nonenumerable/-/nonenumerable-1.1.1.tgz", "integrity": "sha512-ptUD9w9D8WqW6fuJJkZNCImkf+0vdbgUTbRK3i7jsy3olqtH96hYE6Q/S3Tx9NWbcB/ocAjYshXCAUP0lZ9B4Q==" }, + "once": { + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz", + "integrity": "sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==", + "dev": true, + "requires": { + "wrappy": "1" + } + }, + "p-limit": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-4.0.0.tgz", + "integrity": "sha512-5b0R4txpzjPWVw/cXXUResoD4hb6U/x9BH08L7nw+GN1sezDzPdxeRvpc9c433fZhBan/wusjbCsqwqm4EIBIQ==", + "requires": { + "yocto-queue": "^1.0.0" + } + }, + "path-is-absolute": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz", + "integrity": "sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==", + "dev": true + }, + "pathe": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/pathe/-/pathe-1.1.1.tgz", + "integrity": "sha512-d+RQGp0MAYTIaDBIMmOfMwz3E+LOZnxx1HZd5R18mmCZY0QBlK0LDZfPc8FW8Ed2DlvsuE6PRjroDY+wg4+j/Q==" + }, + "pathval": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/pathval/-/pathval-1.1.1.tgz", + "integrity": "sha512-Dp6zGqpTdETdR63lehJYPeIOqpiNBNtc7BpWSLrOje7UaIsE5aY92r/AunQA7rsXvet3lrJ3JnZX29UPTKXyKQ==" + }, + "picocolors": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz", + "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==" + }, + "pkg-types": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/pkg-types/-/pkg-types-1.0.3.tgz", + "integrity": "sha512-nN7pYi0AQqJnoLPC9eHFQ8AcyaixBUOwvqc5TDnIKCMEE6I0y8P7OKA7fPexsXGCGxQDl/cmrLAp26LhcwxZ4A==", + "requires": { + "jsonc-parser": "^3.2.0", + "mlly": "^1.2.0", + "pathe": "^1.1.0" + } + }, + "postcss": { + "version": "8.4.24", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.24.tgz", + "integrity": "sha512-M0RzbcI0sO/XJNucsGjvWU9ERWxb/ytp1w6dKtxTKgixdtQDq4rmx/g8W1hnaheq9jgwL/oyEdH5Bc4WwJKMqg==", + "requires": { + "nanoid": "^3.3.6", + "picocolors": "^1.0.0", + "source-map-js": "^1.0.2" + } + }, + "pretty-format": { + "version": "27.5.1", + "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-27.5.1.tgz", + "integrity": "sha512-Qb1gy5OrP5+zDf2Bvnzdl3jsTf1qXVMazbvCoKhtKqVs4/YK4ozX4gKQJJVyNe+cajNPn0KoC0MC3FUmaHWEmQ==", + "requires": { + "ansi-regex": "^5.0.1", + "ansi-styles": "^5.0.0", + "react-is": "^17.0.1" + } + }, + "react-is": { + "version": "17.0.2", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz", + "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==" + }, + "rollup": { + "version": "3.25.1", + "resolved": "https://registry.npmjs.org/rollup/-/rollup-3.25.1.tgz", + "integrity": "sha512-tywOR+rwIt5m2ZAWSe5AIJcTat8vGlnPFAv15ycCrw33t6iFsXZ6mzHVFh2psSjxQPmI+xgzMZZizUAukBI4aQ==", + "requires": { + "fsevents": "~2.3.2" + } + }, + "semver": { + "version": "7.5.2", + "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.2.tgz", + "integrity": "sha512-SoftuTROv/cRjCze/scjGyiDtcUyxw1rgYQSZY7XTmtR5hX+dm76iDbTH8TkLPHCQmlbQVSSbNZCPM2hb0knnQ==", + "requires": { + "lru-cache": "^6.0.0" + } + }, + "siginfo": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/siginfo/-/siginfo-2.0.0.tgz", + "integrity": "sha512-ybx0WO1/8bSBLEWXZvEd7gMW3Sn3JFlW3TvX1nREbDLRNQNaeNN8WK0meBwPdAaOI7TtRRRJn/Es1zhrrCHu7g==" + }, + "source-map": { + "version": "0.6.1", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", + "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", + "dev": true + }, + "source-map-js": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz", + "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==" + }, + "stackback": { + "version": "0.0.2", + "resolved": "https://registry.npmjs.org/stackback/-/stackback-0.0.2.tgz", + "integrity": "sha512-1XMJE5fQo1jGH6Y/7ebnwPOBEkIEnT4QF32d5R1+VXdXveM0IBMJt8zfaxX1P3QhVwrYe+576+jkANtSS2mBbw==" + }, + "std-env": { + "version": "3.3.3", + "resolved": "https://registry.npmjs.org/std-env/-/std-env-3.3.3.tgz", + "integrity": "sha512-Rz6yejtVyWnVjC1RFvNmYL10kgjC49EOghxWn0RFqlCHGFpQx+Xe7yW3I4ceK1SGrWIGMjD5Kbue8W/udkbMJg==" + }, + "strip-literal": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/strip-literal/-/strip-literal-1.0.1.tgz", + "integrity": "sha512-QZTsipNpa2Ppr6v1AmJHESqJ3Uz247MUS0OjrnnZjFAvEoWqxuyFuXn2xLgMtRnijJShAa1HL0gtJyUs7u7n3Q==", + "requires": { + "acorn": "^8.8.2" + } + }, + "supports-color": { + "version": "7.2.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", + "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==", + "dev": true, + "requires": { + "has-flag": "^4.0.0" + } + }, + "test-exclude": { + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/test-exclude/-/test-exclude-6.0.0.tgz", + "integrity": "sha512-cAGWPIyOHU6zlmg88jwm7VRyXnMN7iV68OGAbYDk/Mh/xC/pzVPlQtY6ngoIH/5/tciuhGfvESU8GrHrcxD56w==", + "dev": true, + "requires": { + "@istanbuljs/schema": "^0.1.2", + "glob": "^7.1.4", + "minimatch": "^3.0.4" + } + }, + "time-zone": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/time-zone/-/time-zone-1.0.0.tgz", + "integrity": "sha512-TIsDdtKo6+XrPtiTm1ssmMngN1sAhyKnTO2kunQWqNPWIVvCm15Wmw4SWInwTVgJ5u/Tr04+8Ei9TNcw4x4ONA==" + }, + "tinybench": { + "version": "2.5.0", + "resolved": "https://registry.npmjs.org/tinybench/-/tinybench-2.5.0.tgz", + "integrity": "sha512-kRwSG8Zx4tjF9ZiyH4bhaebu+EDz1BOx9hOigYHlUW4xxI/wKIUQUqo018UlU4ar6ATPBsaMrdbKZ+tmPdohFA==" + }, + "tinypool": { + "version": "0.5.0", + "resolved": "https://registry.npmjs.org/tinypool/-/tinypool-0.5.0.tgz", + "integrity": "sha512-paHQtnrlS1QZYKF/GnLoOM/DN9fqaGOFbCbxzAhwniySnzl9Ebk8w73/dd34DAhe/obUbPAOldTyYXQZxnPBPQ==" + }, + "tinyspy": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/tinyspy/-/tinyspy-2.1.1.tgz", + "integrity": "sha512-XPJL2uSzcOyBMky6OFrusqWlzfFrXtE0hPuMgW8A2HmaqrPo4ZQHRN/V0QXN3FSjKxpsbRrFc5LI7KOwBsT1/w==" + }, "toml": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/toml/-/toml-3.0.0.tgz", @@ -425,12 +2610,22 @@ "yn": "3.1.1" } }, + "type-detect": { + "version": "4.0.8", + "resolved": "https://registry.npmjs.org/type-detect/-/type-detect-4.0.8.tgz", + "integrity": "sha512-0fr/mIH1dlO+x7TlcMy+bIDqKPsw/70tVyeHW787goQjhmqaZe10uwLujubK9q9Lg6Fiho1KUKDYz0Z7k7g5/g==" + }, "typescript": { "version": "4.9.5", "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.5.tgz", "integrity": "sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==", "peer": true }, + "ufo": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/ufo/-/ufo-1.1.2.tgz", + "integrity": "sha512-TrY6DsjTQQgyS3E3dBaOXf0TpPD8u9FVrVYmKVegJuFw51n/YB9XPt+U6ydzFG5ZIN7+DIjPbNmXoBj9esYhgQ==" + }, "utility-types": { "version": "3.10.0", "resolved": "https://registry.npmjs.org/utility-types/-/utility-types-3.10.0.tgz", @@ -441,10 +2636,119 @@ "resolved": "https://registry.npmjs.org/v8-compile-cache-lib/-/v8-compile-cache-lib-3.0.1.tgz", "integrity": "sha512-wa7YjyUGfNZngI/vtK0UHAN+lgDCxBPCylVXGp0zu59Fz5aiGtNXaq3DhIov063MorB+VfufLh3JlF2KdTK3xg==" }, + "v8-to-istanbul": { + "version": "9.1.0", + "resolved": "https://registry.npmjs.org/v8-to-istanbul/-/v8-to-istanbul-9.1.0.tgz", + "integrity": "sha512-6z3GW9x8G1gd+JIIgQQQxXuiJtCXeAjp6RaPEPLv62mH3iPHPxV6W3robxtCzNErRo6ZwTmzWhsbNvjyEBKzKA==", + "dev": true, + "requires": { + "@jridgewell/trace-mapping": "^0.3.12", + "@types/istanbul-lib-coverage": "^2.0.1", + "convert-source-map": "^1.6.0" + }, + "dependencies": { + "@jridgewell/trace-mapping": { + "version": "0.3.18", + "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.18.tgz", + "integrity": "sha512-w+niJYzMHdd7USdiH2U6869nqhD2nbfZXND5Yp93qIbEmnDNk7PD48o+YchRVpzMU7M6jVCbenTR7PA1FLQ9pA==", + "dev": true, + "requires": { + "@jridgewell/resolve-uri": "3.1.0", + "@jridgewell/sourcemap-codec": "1.4.14" + } + } + } + }, + "vite": { + "version": "4.3.9", + "resolved": "https://registry.npmjs.org/vite/-/vite-4.3.9.tgz", + "integrity": "sha512-qsTNZjO9NoJNW7KnOrgYwczm0WctJ8m/yqYAMAK9Lxt4SoySUfS5S8ia9K7JHpa3KEeMfyF8LoJ3c5NeBJy6pg==", + "requires": { + "esbuild": "^0.17.5", + "fsevents": "~2.3.2", + "postcss": "^8.4.23", + "rollup": "^3.21.0" + } + }, + "vite-node": { + "version": "0.32.0", + "resolved": "https://registry.npmjs.org/vite-node/-/vite-node-0.32.0.tgz", + "integrity": "sha512-220P/y8YacYAU+daOAqiGEFXx2A8AwjadDzQqos6wSukjvvTWNqleJSwoUn0ckyNdjHIKoxn93Nh1vWBqEKr3Q==", + "requires": { + "cac": "^6.7.14", + "debug": "^4.3.4", + "mlly": "^1.2.0", + "pathe": "^1.1.0", + "picocolors": "^1.0.0", + "vite": "^3.0.0 || ^4.0.0" + } + }, + "vitest": { + "version": "0.32.0", + "resolved": "https://registry.npmjs.org/vitest/-/vitest-0.32.0.tgz", + "integrity": "sha512-SW83o629gCqnV3BqBnTxhB10DAwzwEx3z+rqYZESehUB+eWsJxwcBQx7CKy0otuGMJTYh7qCVuUX23HkftGl/Q==", + "requires": { + "@types/chai": "^4.3.5", + "@types/chai-subset": "^1.3.3", + "@types/node": "*", + "@vitest/expect": "0.32.0", + "@vitest/runner": "0.32.0", + "@vitest/snapshot": "0.32.0", + "@vitest/spy": "0.32.0", + "@vitest/utils": "0.32.0", + "acorn": "^8.8.2", + "acorn-walk": "^8.2.0", + "cac": "^6.7.14", + "chai": "^4.3.7", + "concordance": "^5.0.4", + "debug": "^4.3.4", + "local-pkg": "^0.4.3", + "magic-string": "^0.30.0", + "pathe": "^1.1.0", + "picocolors": "^1.0.0", + "std-env": "^3.3.2", + "strip-literal": "^1.0.1", + "tinybench": "^2.5.0", + "tinypool": "^0.5.0", + "vite": "^3.0.0 || ^4.0.0", + "vite-node": "0.32.0", + "why-is-node-running": "^2.2.2" + } + }, + "well-known-symbols": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/well-known-symbols/-/well-known-symbols-2.0.0.tgz", + "integrity": "sha512-ZMjC3ho+KXo0BfJb7JgtQ5IBuvnShdlACNkKkdsqBmYw3bPAaJfPeYUo6tLUaT5tG/Gkh7xkpBhKRQ9e7pyg9Q==" + }, + "why-is-node-running": { + "version": "2.2.2", + "resolved": "https://registry.npmjs.org/why-is-node-running/-/why-is-node-running-2.2.2.tgz", + "integrity": "sha512-6tSwToZxTOcotxHeA+qGCq1mVzKR3CwcJGmVcY+QE8SHy6TnpFnh8PAvPNHYr7EcuVeG0QSMxtYCuO1ta/G/oA==", + "requires": { + "siginfo": "^2.0.0", + "stackback": "0.0.2" + } + }, + "wrappy": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz", + "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==", + "dev": true + }, + "yallist": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz", + "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==" + }, "yn": { "version": "3.1.1", "resolved": "https://registry.npmjs.org/yn/-/yn-3.1.1.tgz", "integrity": "sha512-Ux4ygGWsu2c7isFWe8Yu1YluJmqVhxqK2cLXNQA5AcC3QfbGNpM7fu0Y8b/z16pXLnFxZYvWhd3fhBY9DLmC6Q==" + }, + "yocto-queue": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-1.0.0.tgz", + "integrity": "sha512-9bnSc/HEW2uRy67wc+T8UwauLuPJVn28jb+GtJY16iiKWyvmYJRXVT4UamsAEGQfPohgr2q4Tq0sQbQlxTfi1g==" } } } diff --git a/styles/package.json b/styles/package.json index 30336d5c51..9907b0cbff 100644 --- a/styles/package.json +++ b/styles/package.json @@ -6,7 +6,8 @@ "scripts": { "build": "ts-node ./src/buildThemes.ts", "build-licenses": "ts-node ./src/buildLicenses.ts", - "build-tokens": "ts-node ./src/buildTokens.ts" + "build-tokens": "ts-node ./src/buildTokens.ts", + "test": "vitest" }, "author": "", "license": "ISC", @@ -22,12 +23,16 @@ "toml": "^3.0.0", "ts-deepmerge": "^6.0.3", "ts-node": "^10.9.1", - "utility-types": "^3.10.0" + "utility-types": "^3.10.0", + "vitest": "^0.32.0" }, "prettier": { "semi": false, "printWidth": 80, "htmlWhitespaceSensitivity": "strict", "tabWidth": 4 + }, + "devDependencies": { + "@vitest/coverage-v8": "^0.32.0" } } diff --git a/styles/src/element/interactive/index.ts b/styles/src/element/interactive/index.ts new file mode 100644 index 0000000000..0ead902eb9 --- /dev/null +++ b/styles/src/element/interactive/index.ts @@ -0,0 +1,3 @@ +import { interactive } from "./interactive"; + +export { interactive } diff --git a/styles/src/element/interactive/interactive.test.ts b/styles/src/element/interactive/interactive.test.ts new file mode 100644 index 0000000000..aa716e998e --- /dev/null +++ b/styles/src/element/interactive/interactive.test.ts @@ -0,0 +1,59 @@ +import { NOT_ENOUGH_STATES_ERROR, NO_DEFAULT_OR_BASE_ERROR, interactive } from './interactive' +import { describe, it, expect } from 'vitest' + +describe('interactive', () => { + + it('creates an Interactive with base properties and states', () => { + + const result = interactive({ + base: { fontSize: 10, color: '#FFFFFF' }, + state: { + hovered: { color: '#EEEEEE' }, + clicked: { color: '#CCCCCC' }, + } + }) + + expect(result).toEqual({ + default: { color: '#FFFFFF', fontSize: 10 }, + hovered: { color: '#EEEEEE', fontSize: 10 }, + clicked: { color: '#CCCCCC', fontSize: 10 }, + }) + }) + + it('creates an Interactive with no base properties', () => { + + const result = interactive({ + state: { + default: { color: '#FFFFFF', fontSize: 10 }, + hovered: { color: '#EEEEEE' }, + clicked: { color: '#CCCCCC' }, + } + }) + + expect(result).toEqual({ + default: { color: '#FFFFFF', fontSize: 10 }, + hovered: { color: '#EEEEEE', fontSize: 10 }, + clicked: { color: '#CCCCCC', fontSize: 10 }, + }) + }) + + it('throws error when both default and base are missing', () => { + const state = { + hovered: { color: 'blue' }, + } + + expect(() => interactive({ state })).toThrow( + NO_DEFAULT_OR_BASE_ERROR + ) + }) + + it('throws error when no other state besides default is present', () => { + const state = { + default: { fontSize: 10 }, + } + + expect(() => interactive({ state })).toThrow( + NOT_ENOUGH_STATES_ERROR + ) + }) +}) diff --git a/styles/src/styleTree/interactive.ts b/styles/src/element/interactive/interactive.ts similarity index 58% rename from styles/src/styleTree/interactive.ts rename to styles/src/element/interactive/interactive.ts index 6bc6ca048b..23cd2a8c15 100644 --- a/styles/src/styleTree/interactive.ts +++ b/styles/src/element/interactive/interactive.ts @@ -10,24 +10,27 @@ type Interactive = { disabled?: T, }; +export const NO_DEFAULT_OR_BASE_ERROR = "An interactive object must have a default state, or a base property." +export const NOT_ENOUGH_STATES_ERROR = "An interactive object must have a default and at least one other state." + interface InteractiveProps { base?: T, state: Partial> } /** - * Helper function for creating Interactive objects that works pretty much like Toggle. - * It takes a object to be used as a value for `default` field and then fills out other fields - * with fields from either `base` or `modifications`. - * Notably, it does not touch `hover`, `clicked` and `disabled` if there are no modifications for it. + * Helper function for creating Interactive objects that works with Toggle-like behavior. + * It takes a default object to be used as the value for `default` field and fills out other fields + * with fields from either `base` or from the `state` object which contains values for specific states. + * Notably, it does not touch `hover`, `clicked`, `selected` and `disabled` states if there are no modifications for them. * - * @param defaultObj Object to be used as the value for `default` field. - * @param base Object containing base fields to be included in the resulting object. - * @param modifications Object containing modified fields to be included in the resulting object. - * @returns Interactive object with fields from `base` and `modifications`. + * @param defaultObj Object to be used as the value for the `default` field. + * @param base Optional object containing base fields to be included in the resulting object. + * @param state Object containing optional modified fields to be included in the resulting object for each state. + * @returns Interactive object with fields from `base` and `state`. */ export function interactive({ base, state }: InteractiveProps): Interactive { - if (!base && !state.default) throw new Error("An interactive object must have a default state, or a base property."); + if (!base && !state.default) throw new Error(NO_DEFAULT_OR_BASE_ERROR); let defaultState: T; @@ -64,7 +67,7 @@ export function interactive({ base, state }: InteractiveProps< } if (stateCount < 1) { - throw new Error("An interactive object must have a default and at least one other state."); + throw new Error(NOT_ENOUGH_STATES_ERROR); } return interactiveObj; diff --git a/styles/src/styleTree/assistant.ts b/styles/src/styleTree/assistant.ts index d501237721..b31fe8169e 100644 --- a/styles/src/styleTree/assistant.ts +++ b/styles/src/styleTree/assistant.ts @@ -1,94 +1,94 @@ import { ColorScheme } from "../theme/colorScheme" import { text, border, background, foreground } from "./components" import editor from "./editor" -import { interactive } from "./interactive" +import { interactive } from "../element/interactive" export default function assistant(colorScheme: ColorScheme) { - const layer = colorScheme.highest - return { - container: { - background: editor(colorScheme).background, - padding: { left: 12 }, - }, - header: { - border: border(layer, "default", { bottom: true, top: true }), - margin: { bottom: 6, top: 6 }, - background: editor(colorScheme).background, - }, - userSender: { - default: - { ...text(layer, "sans", "default", { size: "sm", weight: "bold" }) }, - }, - assistantSender: { - default: { - ...text(layer, "sans", "accent", { size: "sm", weight: "bold" }) - }, - }, - systemSender: { - default: { - ...text(layer, "sans", "variant", { size: "sm", weight: "bold" }) - }, - }, - sentAt: { - margin: { top: 2, left: 8 }, - ...text(layer, "sans", "default", { size: "2xs" }), - }, - modelInfoContainer: { - margin: { right: 16, top: 4 }, - }, - model: interactive({ - base: { - background: background(layer, "on"), - border: border(layer, "on", { overlay: true }), - padding: 4, - cornerRadius: 4, - ...text(layer, "sans", "default", { size: "xs" }), - }, state: { - hovered: { - background: background(layer, "on", "hovered"), - } - } - }), - remainingTokens: { - background: background(layer, "on"), - border: border(layer, "on", { overlay: true }), - padding: 4, - margin: { left: 4 }, - cornerRadius: 4, - ...text(layer, "sans", "positive", { size: "xs" }), - }, - noRemainingTokens: { - background: background(layer, "on"), - border: border(layer, "on", { overlay: true }), - padding: 4, - margin: { left: 4 }, - cornerRadius: 4, - ...text(layer, "sans", "negative", { size: "xs" }), - }, - errorIcon: { - margin: { left: 8 }, - color: foreground(layer, "negative"), - width: 12, - }, - apiKeyEditor: { - background: background(layer, "on"), - cornerRadius: 6, - text: text(layer, "mono", "on"), - placeholderText: text(layer, "mono", "on", "disabled", { - size: "xs", - }), - selection: colorScheme.players[0], - border: border(layer, "on"), - padding: { - bottom: 4, - left: 8, - right: 8, - top: 4, - }, - }, - apiKeyPrompt: { - padding: 10, - ...text(layer, "sans", "default", { size: "xs" }), - }, - } + const layer = colorScheme.highest + return { + container: { + background: editor(colorScheme).background, + padding: { left: 12 }, + }, + header: { + border: border(layer, "default", { bottom: true, top: true }), + margin: { bottom: 6, top: 6 }, + background: editor(colorScheme).background, + }, + userSender: { + default: + { ...text(layer, "sans", "default", { size: "sm", weight: "bold" }) }, + }, + assistantSender: { + default: { + ...text(layer, "sans", "accent", { size: "sm", weight: "bold" }) + }, + }, + systemSender: { + default: { + ...text(layer, "sans", "variant", { size: "sm", weight: "bold" }) + }, + }, + sentAt: { + margin: { top: 2, left: 8 }, + ...text(layer, "sans", "default", { size: "2xs" }), + }, + modelInfoContainer: { + margin: { right: 16, top: 4 }, + }, + model: interactive({ + base: { + background: background(layer, "on"), + border: border(layer, "on", { overlay: true }), + padding: 4, + cornerRadius: 4, + ...text(layer, "sans", "default", { size: "xs" }), + }, state: { + hovered: { + background: background(layer, "on", "hovered"), + } + } + }), + remainingTokens: { + background: background(layer, "on"), + border: border(layer, "on", { overlay: true }), + padding: 4, + margin: { left: 4 }, + cornerRadius: 4, + ...text(layer, "sans", "positive", { size: "xs" }), + }, + noRemainingTokens: { + background: background(layer, "on"), + border: border(layer, "on", { overlay: true }), + padding: 4, + margin: { left: 4 }, + cornerRadius: 4, + ...text(layer, "sans", "negative", { size: "xs" }), + }, + errorIcon: { + margin: { left: 8 }, + color: foreground(layer, "negative"), + width: 12, + }, + apiKeyEditor: { + background: background(layer, "on"), + cornerRadius: 6, + text: text(layer, "mono", "on"), + placeholderText: text(layer, "mono", "on", "disabled", { + size: "xs", + }), + selection: colorScheme.players[0], + border: border(layer, "on"), + padding: { + bottom: 4, + left: 8, + right: 8, + top: 4, + }, + }, + apiKeyPrompt: { + padding: 10, + ...text(layer, "sans", "default", { size: "xs" }), + }, + } } diff --git a/styles/src/styleTree/commandPalette.ts b/styles/src/styleTree/commandPalette.ts index d6cb196770..081a0ba68c 100644 --- a/styles/src/styleTree/commandPalette.ts +++ b/styles/src/styleTree/commandPalette.ts @@ -2,38 +2,38 @@ import { ColorScheme } from "../theme/colorScheme" import { withOpacity } from "../theme/color" import { text, background } from "./components" import { toggleable } from "./toggle" -import { interactive } from "./interactive" +import { interactive } from "../element/interactive" export default function commandPalette(colorScheme: ColorScheme) { - let layer = colorScheme.highest - return { - keystrokeSpacing: 8, - key: - toggleable(interactive({ - base: { - text: text(layer, "mono", "variant", "default", { size: "xs" }), - cornerRadius: 2, - background: background(layer, "on"), - padding: { - top: 1, - bottom: 1, - left: 6, - right: 6, - }, - margin: { - top: 1, - bottom: 1, - left: 2, - }, - }, state: { hovered: { cornerRadius: 4, padding: { top: 17 } } } - }), { - default: { - text: text(layer, "mono", "on", "default", { size: "xs" }), - background: withOpacity(background(layer, "on"), 0.2), - } + let layer = colorScheme.highest + return { + keystrokeSpacing: 8, + key: + toggleable(interactive({ + base: { + text: text(layer, "mono", "variant", "default", { size: "xs" }), + cornerRadius: 2, + background: background(layer, "on"), + padding: { + top: 1, + bottom: 1, + left: 6, + right: 6, + }, + margin: { + top: 1, + bottom: 1, + left: 2, + }, + }, state: { hovered: { cornerRadius: 4, padding: { top: 17 } } } + }), { + default: { + text: text(layer, "mono", "on", "default", { size: "xs" }), + background: withOpacity(background(layer, "on"), 0.2), + } - }) - , + }) + , - } + } } diff --git a/styles/src/styleTree/contactList.ts b/styles/src/styleTree/contactList.ts index 4309343ed2..3b95a3c885 100644 --- a/styles/src/styleTree/contactList.ts +++ b/styles/src/styleTree/contactList.ts @@ -1,218 +1,218 @@ import { ColorScheme } from "../theme/colorScheme" import { background, border, borderColor, foreground, text } from "./components" import { toggleable } from "./toggle" -import { interactive } from "./interactive" +import { interactive } from "../element/interactive" export default function contactsPanel(colorScheme: ColorScheme) { - const nameMargin = 8 - const sidePadding = 12 + const nameMargin = 8 + const sidePadding = 12 - let layer = colorScheme.middle + let layer = colorScheme.middle - const contactButton = { - background: background(layer, "on"), - color: foreground(layer, "on"), - iconWidth: 8, - buttonWidth: 16, - cornerRadius: 8, - } - const projectRow = { - guestAvatarSpacing: 4, - height: 24, - guestAvatar: { - cornerRadius: 8, - width: 14, - }, - name: { - ...text(layer, "mono", { size: "sm" }), - margin: { - left: nameMargin, - right: 6, - }, - }, - guests: { - margin: { - left: nameMargin, - right: nameMargin, - }, - }, - padding: { - left: sidePadding, - right: sidePadding, - }, - } - - return { - background: background(layer), - padding: { top: 12 }, - userQueryEditor: { - background: background(layer, "on"), - cornerRadius: 6, - text: text(layer, "mono", "on"), - placeholderText: text(layer, "mono", "on", "disabled", { - size: "xs", - }), - selection: colorScheme.players[0], - border: border(layer, "on"), - padding: { - bottom: 4, - left: 8, - right: 8, - top: 4, - }, - margin: { - left: 6, - }, - }, - userQueryEditorHeight: 33, - addContactButton: { - margin: { left: 6, right: 12 }, - color: foreground(layer, "on"), - buttonWidth: 28, - iconWidth: 16, - }, - rowHeight: 28, - sectionIconSize: 8, - headerRow: toggleable(interactive({ - base: { - ...text(layer, "mono", { size: "sm" }), - margin: { top: 14 }, - padding: { - left: sidePadding, - right: sidePadding, - }, - background: background(layer, "default"),// posiewic: breaking change - } - , state: { hovered: { background: background(layer, "default") } } // hack, we want headerRow to be interactive for whatever reason. It probably shouldn't be interactive in the first place. - }), - { - default: { - ...text(layer, "mono", "active", { size: "sm" }), - background: background(layer, "active"), - }, - }), - leaveCall: interactive({ - base: { - background: background(layer), - border: border(layer), - cornerRadius: 6, - margin: { - top: 1, - }, - padding: { - top: 1, - bottom: 1, - left: 7, - right: 7, - }, - ...text(layer, "sans", "variant", { size: "xs" }), - } - , - state: { - hovered: { - ...text(layer, "sans", "hovered", { size: "xs" }), - background: background(layer, "hovered"), - border: border(layer, "hovered"), - } - } + const contactButton = { + background: background(layer, "on"), + color: foreground(layer, "on"), + iconWidth: 8, + buttonWidth: 16, + cornerRadius: 8, } - ), - contactRow: { - inactive: { - default: { - padding: { - left: sidePadding, - right: sidePadding, - } - }, - }, - active: { - default: { - background: background(layer, "active"), - padding: { - left: sidePadding, - right: sidePadding, - } - } - }, - }, - - contactAvatar: { - cornerRadius: 10, - width: 18, - }, - contactStatusFree: { - cornerRadius: 4, - padding: 4, - margin: { top: 12, left: 12 }, - background: foreground(layer, "positive"), - }, - contactStatusBusy: { - cornerRadius: 4, - padding: 4, - margin: { top: 12, left: 12 }, - background: foreground(layer, "negative"), - }, - contactUsername: { - ...text(layer, "mono", { size: "sm" }), - margin: { - left: nameMargin, - }, - }, - contactButtonSpacing: nameMargin, - contactButton: interactive({ - base: { ...contactButton }, - state: { - hovered: { - background: background(layer, "hovered"), - }, - } - }), - disabledButton: { - ...contactButton, - background: background(layer, "on"), - color: foreground(layer, "on"), - }, - callingIndicator: { - ...text(layer, "mono", "variant", { size: "xs" }), - }, - treeBranch: toggleable(interactive({ - base: { - color: borderColor(layer), - width: 1, - }, - state: { - hovered: { - color: borderColor(layer), - }, - } - }), - { - default: { - color: borderColor(layer), - }, - } - ), - projectRow: toggleable(interactive({ - base: { - ...projectRow, - background: background(layer), - icon: { - margin: { left: nameMargin }, - color: foreground(layer, "variant"), - width: 12, + const projectRow = { + guestAvatarSpacing: 4, + height: 24, + guestAvatar: { + cornerRadius: 8, + width: 14, }, name: { - ...projectRow.name, - ...text(layer, "mono", { size: "sm" }), + ...text(layer, "mono", { size: "sm" }), + margin: { + left: nameMargin, + right: 6, + }, }, - }, state: { - hovered: { - background: background(layer, "hovered"), + guests: { + margin: { + left: nameMargin, + right: nameMargin, + }, }, - } - }), - { - default: { background: background(layer, "active") } - }) - } + padding: { + left: sidePadding, + right: sidePadding, + }, + } + + return { + background: background(layer), + padding: { top: 12 }, + userQueryEditor: { + background: background(layer, "on"), + cornerRadius: 6, + text: text(layer, "mono", "on"), + placeholderText: text(layer, "mono", "on", "disabled", { + size: "xs", + }), + selection: colorScheme.players[0], + border: border(layer, "on"), + padding: { + bottom: 4, + left: 8, + right: 8, + top: 4, + }, + margin: { + left: 6, + }, + }, + userQueryEditorHeight: 33, + addContactButton: { + margin: { left: 6, right: 12 }, + color: foreground(layer, "on"), + buttonWidth: 28, + iconWidth: 16, + }, + rowHeight: 28, + sectionIconSize: 8, + headerRow: toggleable(interactive({ + base: { + ...text(layer, "mono", { size: "sm" }), + margin: { top: 14 }, + padding: { + left: sidePadding, + right: sidePadding, + }, + background: background(layer, "default"),// posiewic: breaking change + } + , state: { hovered: { background: background(layer, "default") } } // hack, we want headerRow to be interactive for whatever reason. It probably shouldn't be interactive in the first place. + }), + { + default: { + ...text(layer, "mono", "active", { size: "sm" }), + background: background(layer, "active"), + }, + }), + leaveCall: interactive({ + base: { + background: background(layer), + border: border(layer), + cornerRadius: 6, + margin: { + top: 1, + }, + padding: { + top: 1, + bottom: 1, + left: 7, + right: 7, + }, + ...text(layer, "sans", "variant", { size: "xs" }), + } + , + state: { + hovered: { + ...text(layer, "sans", "hovered", { size: "xs" }), + background: background(layer, "hovered"), + border: border(layer, "hovered"), + } + } + } + ), + contactRow: { + inactive: { + default: { + padding: { + left: sidePadding, + right: sidePadding, + } + }, + }, + active: { + default: { + background: background(layer, "active"), + padding: { + left: sidePadding, + right: sidePadding, + } + } + }, + }, + + contactAvatar: { + cornerRadius: 10, + width: 18, + }, + contactStatusFree: { + cornerRadius: 4, + padding: 4, + margin: { top: 12, left: 12 }, + background: foreground(layer, "positive"), + }, + contactStatusBusy: { + cornerRadius: 4, + padding: 4, + margin: { top: 12, left: 12 }, + background: foreground(layer, "negative"), + }, + contactUsername: { + ...text(layer, "mono", { size: "sm" }), + margin: { + left: nameMargin, + }, + }, + contactButtonSpacing: nameMargin, + contactButton: interactive({ + base: { ...contactButton }, + state: { + hovered: { + background: background(layer, "hovered"), + }, + } + }), + disabledButton: { + ...contactButton, + background: background(layer, "on"), + color: foreground(layer, "on"), + }, + callingIndicator: { + ...text(layer, "mono", "variant", { size: "xs" }), + }, + treeBranch: toggleable(interactive({ + base: { + color: borderColor(layer), + width: 1, + }, + state: { + hovered: { + color: borderColor(layer), + }, + } + }), + { + default: { + color: borderColor(layer), + }, + } + ), + projectRow: toggleable(interactive({ + base: { + ...projectRow, + background: background(layer), + icon: { + margin: { left: nameMargin }, + color: foreground(layer, "variant"), + width: 12, + }, + name: { + ...projectRow.name, + ...text(layer, "mono", { size: "sm" }), + }, + }, state: { + hovered: { + background: background(layer, "hovered"), + }, + } + }), + { + default: { background: background(layer, "active") } + }) + } } diff --git a/styles/src/styleTree/contactNotification.ts b/styles/src/styleTree/contactNotification.ts index 5b29e15e6b..4d57239005 100644 --- a/styles/src/styleTree/contactNotification.ts +++ b/styles/src/styleTree/contactNotification.ts @@ -1,54 +1,54 @@ import { ColorScheme } from "../theme/colorScheme" import { background, foreground, text } from "./components" -import { interactive } from "./interactive" +import { interactive } from "../element/interactive" const avatarSize = 12 const headerPadding = 8 export default function contactNotification(colorScheme: ColorScheme): Object { - let layer = colorScheme.lowest - return { - headerAvatar: { - height: avatarSize, - width: avatarSize, - cornerRadius: 6, - }, - headerMessage: { - ...text(layer, "sans", { size: "xs" }), - margin: { left: headerPadding, right: headerPadding }, - }, - headerHeight: 18, - bodyMessage: { - ...text(layer, "sans", { size: "xs" }), - margin: { left: avatarSize + headerPadding, top: 6, bottom: 6 }, - }, - button: - interactive({ - base: { - ...text(layer, "sans", "on", { size: "xs" }), - background: background(layer, "on"), - padding: 4, - cornerRadius: 6, - margin: { left: 6 } + let layer = colorScheme.lowest + return { + headerAvatar: { + height: avatarSize, + width: avatarSize, + cornerRadius: 6, }, - - state: { - hovered: { - background: background(layer, "on", "hovered"), - } - } - }), - - dismissButton: { - default: { - color: foreground(layer, "variant"), - iconWidth: 8, - iconHeight: 8, - buttonWidth: 8, - buttonHeight: 8, - hover: { - color: foreground(layer, "hovered"), + headerMessage: { + ...text(layer, "sans", { size: "xs" }), + margin: { left: headerPadding, right: headerPadding }, }, - } - }, - } + headerHeight: 18, + bodyMessage: { + ...text(layer, "sans", { size: "xs" }), + margin: { left: avatarSize + headerPadding, top: 6, bottom: 6 }, + }, + button: + interactive({ + base: { + ...text(layer, "sans", "on", { size: "xs" }), + background: background(layer, "on"), + padding: 4, + cornerRadius: 6, + margin: { left: 6 } + }, + + state: { + hovered: { + background: background(layer, "on", "hovered"), + } + } + }), + + dismissButton: { + default: { + color: foreground(layer, "variant"), + iconWidth: 8, + iconHeight: 8, + buttonWidth: 8, + buttonHeight: 8, + hover: { + color: foreground(layer, "hovered"), + }, + } + }, + } } diff --git a/styles/src/styleTree/contextMenu.ts b/styles/src/styleTree/contextMenu.ts index 2d5e84dcf0..51bff9de7f 100644 --- a/styles/src/styleTree/contextMenu.ts +++ b/styles/src/styleTree/contextMenu.ts @@ -1,56 +1,56 @@ import { ColorScheme } from "../theme/colorScheme" import { background, border, borderColor, text } from "./components" -import { interactive } from "./interactive" +import { interactive } from "../element/interactive" import { toggleable } from "./toggle" export default function contextMenu(colorScheme: ColorScheme) { - let layer = colorScheme.middle - return { - background: background(layer), - cornerRadius: 10, - padding: 4, - shadow: colorScheme.popoverShadow, - border: border(layer), - keystrokeMargin: 30, - item: toggleable(interactive({ - base: { - iconSpacing: 8, - iconWidth: 14, - padding: { left: 6, right: 6, top: 2, bottom: 2 }, - cornerRadius: 6, - label: text(layer, "sans", { size: "sm" }), - keystroke: { - ...text(layer, "sans", "variant", { - size: "sm", - weight: "bold", - }), - padding: { left: 3, right: 3 }, - } - }, state: { - hovered: { - background: background(layer, "hovered"), - label: text(layer, "sans", "hovered", { size: "sm" }), - keystroke: { - ...text(layer, "sans", "hovered", { - size: "sm", - weight: "bold", - }), - padding: { left: 3, right: 3 }, - }, - } - } - }), { - default: { - background: background(layer, "active"), - }, - hovered: { - background: background(layer, "active"), - }, - }), + let layer = colorScheme.middle + return { + background: background(layer), + cornerRadius: 10, + padding: 4, + shadow: colorScheme.popoverShadow, + border: border(layer), + keystrokeMargin: 30, + item: toggleable(interactive({ + base: { + iconSpacing: 8, + iconWidth: 14, + padding: { left: 6, right: 6, top: 2, bottom: 2 }, + cornerRadius: 6, + label: text(layer, "sans", { size: "sm" }), + keystroke: { + ...text(layer, "sans", "variant", { + size: "sm", + weight: "bold", + }), + padding: { left: 3, right: 3 }, + } + }, state: { + hovered: { + background: background(layer, "hovered"), + label: text(layer, "sans", "hovered", { size: "sm" }), + keystroke: { + ...text(layer, "sans", "hovered", { + size: "sm", + weight: "bold", + }), + padding: { left: 3, right: 3 }, + }, + } + } + }), { + default: { + background: background(layer, "active"), + }, + hovered: { + background: background(layer, "active"), + }, + }), - separator: { - background: borderColor(layer), - margin: { top: 2, bottom: 2 }, - }, - } + separator: { + background: borderColor(layer), + margin: { top: 2, bottom: 2 }, + }, + } } diff --git a/styles/src/styleTree/copilot.ts b/styles/src/styleTree/copilot.ts index 6440941e64..27ef5ec11c 100644 --- a/styles/src/styleTree/copilot.ts +++ b/styles/src/styleTree/copilot.ts @@ -1,286 +1,286 @@ import { ColorScheme } from "../theme/colorScheme" import { background, border, foreground, svg, text } from "./components" -import { interactive } from "./interactive" +import { interactive } from "../element/interactive" export default function copilot(colorScheme: ColorScheme) { - let layer = colorScheme.middle + let layer = colorScheme.middle - let content_width = 264 + let content_width = 264 - let ctaButton = - // Copied from welcome screen. FIXME: Move this into a ZDS component - interactive({ - base: { - background: background(layer), - border: border(layer, "default"), - cornerRadius: 4, - margin: { - top: 4, - bottom: 4, - left: 8, - right: 8, - }, - padding: { - top: 3, - bottom: 3, - left: 7, - right: 7, - }, - ...text(layer, "sans", "default", { size: "sm" }) - }, - state: { - hovered: { - ...text(layer, "sans", "default", { size: "sm" }), - background: background(layer, "hovered"), - border: border(layer, "active"), - }, - } - }); - - return { - outLinkIcon: - interactive({ - base: { - icon: svg( - foreground(layer, "variant"), - "icons/link_out_12.svg", - 12, - 12 - ), - container: { - cornerRadius: 6, - padding: { left: 6 }, - }, - }, - state: { - hovered: { - icon: { - color: - foreground(layer, "hovered") - } - }, - } - }), - - modal: { - titleText: { - default: { - ...text(layer, "sans", { size: "xs", weight: "bold" }) - } - }, - titlebar: { - background: background(colorScheme.lowest), - border: border(layer, "active"), - padding: { - top: 4, - bottom: 4, - left: 8, - right: 8, - }, - }, - container: { - background: background(colorScheme.lowest), - padding: { - top: 0, - left: 0, - right: 0, - bottom: 8, - }, - }, - closeIcon: interactive({ - base: - { - icon: svg( - foreground(layer, "variant"), - "icons/x_mark_8.svg", - 8, - 8 - ), - container: { - cornerRadius: 2, - padding: { - top: 4, - bottom: 4, - left: 4, - right: 4, - }, - margin: { - right: 0, - }, - } - }, - state: { - hovered: { - icon: svg( - foreground(layer, "on"), - "icons/x_mark_8.svg", - 8, - 8 - ), - }, - clicked: { - icon: svg( - foreground(layer, "base"), - "icons/x_mark_8.svg", - 8, - 8 - ), - }, - } - }), - dimensions: { - width: 280, - height: 280, - }, - }, - - auth: { - content_width, - - ctaButton, - - header: { - icon: svg( - foreground(layer, "default"), - "icons/zed_plus_copilot_32.svg", - 92, - 32 - ), - container: { - margin: { - top: 35, - bottom: 5, - left: 0, - right: 0, - }, - }, - }, - - prompting: { - subheading: { - ...text(layer, "sans", { size: "xs" }), - margin: { - top: 6, - bottom: 12, - left: 0, - right: 0, - }, - }, - - hint: { - ...text(layer, "sans", { size: "xs", color: "#838994" }), - margin: { - top: 6, - bottom: 2, - }, - }, - - deviceCode: { - text: text(layer, "mono", { size: "sm" }), - cta: { - ...ctaButton, - background: background(colorScheme.lowest), - border: border(colorScheme.lowest, "inverted"), - padding: { - top: 0, - bottom: 0, - left: 16, - right: 16, - }, - margin: { - left: 16, - right: 16, - }, - }, - left: content_width / 2, - leftContainer: { - padding: { - top: 3, - bottom: 3, - left: 0, - right: 6, - }, - }, - right: (content_width * 1) / 3, - rightContainer: interactive({ + let ctaButton = + // Copied from welcome screen. FIXME: Move this into a ZDS component + interactive({ base: { - border: border(colorScheme.lowest, "inverted", { - bottom: false, - right: false, - top: false, - left: true, - }), - padding: { - top: 3, - bottom: 5, - left: 8, - right: 0, - } - }, state: { - hovered: { - border: border(layer, "active", { - bottom: false, - right: false, - top: false, - left: true, - }), - }, + background: background(layer), + border: border(layer, "default"), + cornerRadius: 4, + margin: { + top: 4, + bottom: 4, + left: 8, + right: 8, + }, + padding: { + top: 3, + bottom: 3, + left: 7, + right: 7, + }, + ...text(layer, "sans", "default", { size: "sm" }) + }, + state: { + hovered: { + ...text(layer, "sans", "default", { size: "sm" }), + background: background(layer, "hovered"), + border: border(layer, "active"), + }, } - }) - }, - }, + }); - notAuthorized: { - subheading: { - ...text(layer, "sans", { size: "xs" }), + return { + outLinkIcon: + interactive({ + base: { + icon: svg( + foreground(layer, "variant"), + "icons/link_out_12.svg", + 12, + 12 + ), + container: { + cornerRadius: 6, + padding: { left: 6 }, + }, + }, + state: { + hovered: { + icon: { + color: + foreground(layer, "hovered") + } + }, + } + }), - margin: { - top: 16, - bottom: 16, - left: 0, - right: 0, - }, + modal: { + titleText: { + default: { + ...text(layer, "sans", { size: "xs", weight: "bold" }) + } + }, + titlebar: { + background: background(colorScheme.lowest), + border: border(layer, "active"), + padding: { + top: 4, + bottom: 4, + left: 8, + right: 8, + }, + }, + container: { + background: background(colorScheme.lowest), + padding: { + top: 0, + left: 0, + right: 0, + bottom: 8, + }, + }, + closeIcon: interactive({ + base: + { + icon: svg( + foreground(layer, "variant"), + "icons/x_mark_8.svg", + 8, + 8 + ), + container: { + cornerRadius: 2, + padding: { + top: 4, + bottom: 4, + left: 4, + right: 4, + }, + margin: { + right: 0, + }, + } + }, + state: { + hovered: { + icon: svg( + foreground(layer, "on"), + "icons/x_mark_8.svg", + 8, + 8 + ), + }, + clicked: { + icon: svg( + foreground(layer, "base"), + "icons/x_mark_8.svg", + 8, + 8 + ), + }, + } + }), + dimensions: { + width: 280, + height: 280, + }, }, - warning: { - ...text(layer, "sans", { - size: "xs", - color: foreground(layer, "warning"), - }), - border: border(layer, "warning"), - background: background(layer, "warning"), - cornerRadius: 2, - padding: { - top: 4, - left: 4, - bottom: 4, - right: 4, - }, - margin: { - bottom: 16, - left: 8, - right: 8, - }, - }, - }, + auth: { + content_width, - authorized: { - subheading: { - ...text(layer, "sans", { size: "xs" }), + ctaButton, - margin: { - top: 16, - bottom: 16, - }, - }, + header: { + icon: svg( + foreground(layer, "default"), + "icons/zed_plus_copilot_32.svg", + 92, + 32 + ), + container: { + margin: { + top: 35, + bottom: 5, + left: 0, + right: 0, + }, + }, + }, - hint: { - ...text(layer, "sans", { size: "xs", color: "#838994" }), - margin: { - top: 24, - bottom: 4, - }, + prompting: { + subheading: { + ...text(layer, "sans", { size: "xs" }), + margin: { + top: 6, + bottom: 12, + left: 0, + right: 0, + }, + }, + + hint: { + ...text(layer, "sans", { size: "xs", color: "#838994" }), + margin: { + top: 6, + bottom: 2, + }, + }, + + deviceCode: { + text: text(layer, "mono", { size: "sm" }), + cta: { + ...ctaButton, + background: background(colorScheme.lowest), + border: border(colorScheme.lowest, "inverted"), + padding: { + top: 0, + bottom: 0, + left: 16, + right: 16, + }, + margin: { + left: 16, + right: 16, + }, + }, + left: content_width / 2, + leftContainer: { + padding: { + top: 3, + bottom: 3, + left: 0, + right: 6, + }, + }, + right: (content_width * 1) / 3, + rightContainer: interactive({ + base: { + border: border(colorScheme.lowest, "inverted", { + bottom: false, + right: false, + top: false, + left: true, + }), + padding: { + top: 3, + bottom: 5, + left: 8, + right: 0, + } + }, state: { + hovered: { + border: border(layer, "active", { + bottom: false, + right: false, + top: false, + left: true, + }), + }, + } + }) + }, + }, + + notAuthorized: { + subheading: { + ...text(layer, "sans", { size: "xs" }), + + margin: { + top: 16, + bottom: 16, + left: 0, + right: 0, + }, + }, + + warning: { + ...text(layer, "sans", { + size: "xs", + color: foreground(layer, "warning"), + }), + border: border(layer, "warning"), + background: background(layer, "warning"), + cornerRadius: 2, + padding: { + top: 4, + left: 4, + bottom: 4, + right: 4, + }, + margin: { + bottom: 16, + left: 8, + right: 8, + }, + }, + }, + + authorized: { + subheading: { + ...text(layer, "sans", { size: "xs" }), + + margin: { + top: 16, + bottom: 16, + }, + }, + + hint: { + ...text(layer, "sans", { size: "xs", color: "#838994" }), + margin: { + top: 24, + bottom: 4, + }, + }, + }, }, - }, - }, - } + } } diff --git a/styles/src/styleTree/editor.ts b/styles/src/styleTree/editor.ts index b3b22f3c8b..3612a0acd1 100644 --- a/styles/src/styleTree/editor.ts +++ b/styles/src/styleTree/editor.ts @@ -4,290 +4,290 @@ import { background, border, borderColor, foreground, text } from "./components" import hoverPopover from "./hoverPopover" import { buildSyntax } from "../theme/syntax" -import { interactive } from "./interactive" +import { interactive } from "../element/interactive" import { toggleable } from "./toggle" export default function editor(colorScheme: ColorScheme) { - const { isLight } = colorScheme + const { isLight } = colorScheme - let layer = colorScheme.highest + let layer = colorScheme.highest - const autocompleteItem = { - cornerRadius: 6, - padding: { - bottom: 2, - left: 6, - right: 6, - top: 2, - }, - } - - function diagnostic(layer: Layer, styleSet: StyleSets) { - return { - textScaleFactor: 0.857, - header: { - border: border(layer, { - top: true, - }), - }, - message: { - text: text(layer, "sans", styleSet, "default", { size: "sm" }), - highlightText: text(layer, "sans", styleSet, "default", { - size: "sm", - weight: "bold", - }), - }, - } - } - - const syntax = buildSyntax(colorScheme) - - return { - textColor: syntax.primary.color, - background: background(layer), - activeLineBackground: withOpacity(background(layer, "on"), 0.75), - highlightedLineBackground: background(layer, "on"), - // Inline autocomplete suggestions, Co-pilot suggestions, etc. - suggestion: syntax.predictive, - codeActions: { - indicator: toggleable(interactive({ - base: { - color: foreground(layer, "variant"), - }, state: { - clicked: { - color: foreground(layer, "base"), - }, - hovered: { - color: foreground(layer, "on"), - }, - } - }), - { - default: { - color: foreground(layer, "on"), - } - }), - - verticalScale: 0.55, - }, - folds: { - iconMarginScale: 2.5, - foldedIcon: "icons/chevron_right_8.svg", - foldableIcon: "icons/chevron_down_8.svg", - indicator: toggleable(interactive({ - base: { - color: foreground(layer, "variant"), - }, state: { - clicked: { - color: foreground(layer, "base"), - }, - hovered: { - color: foreground(layer, "on"), - }, - } - }), - { - default: { - color: foreground(layer, "on"), - } - }), - ellipses: { - textColor: colorScheme.ramps.neutral(0.71).hex(), - cornerRadiusFactor: 0.15, - background: { - // Copied from hover_popover highlight - default: { color: colorScheme.ramps.neutral(0.5).alpha(0.0).hex() }, - - hover: { - color: colorScheme.ramps.neutral(0.5).alpha(0.5).hex(), - }, - - clicked: { - color: colorScheme.ramps.neutral(0.5).alpha(0.7).hex(), - }, - }, - }, - foldBackground: foreground(layer, "variant"), - }, - diff: { - deleted: isLight - ? colorScheme.ramps.red(0.5).hex() - : colorScheme.ramps.red(0.4).hex(), - modified: isLight - ? colorScheme.ramps.yellow(0.5).hex() - : colorScheme.ramps.yellow(0.5).hex(), - inserted: isLight - ? colorScheme.ramps.green(0.4).hex() - : colorScheme.ramps.green(0.5).hex(), - removedWidthEm: 0.275, - widthEm: 0.15, - cornerRadius: 0.05, - }, - /** Highlights matching occurrences of what is under the cursor - * as well as matched brackets - */ - documentHighlightReadBackground: withOpacity( - foreground(layer, "accent"), - 0.1 - ), - documentHighlightWriteBackground: colorScheme.ramps - .neutral(0.5) - .alpha(0.4) - .hex(), // TODO: This was blend * 2 - errorColor: background(layer, "negative"), - gutterBackground: background(layer), - gutterPaddingFactor: 3.5, - lineNumber: withOpacity(foreground(layer), 0.35), - lineNumberActive: foreground(layer), - renameFade: 0.6, - unnecessaryCodeFade: 0.5, - selection: colorScheme.players[0], - whitespace: colorScheme.ramps.neutral(0.5).hex(), - guestSelections: [ - colorScheme.players[1], - colorScheme.players[2], - colorScheme.players[3], - colorScheme.players[4], - colorScheme.players[5], - colorScheme.players[6], - colorScheme.players[7], - ], - autocomplete: { - background: background(colorScheme.middle), - cornerRadius: 8, - padding: 4, - margin: { - left: -14, - }, - border: border(colorScheme.middle), - shadow: colorScheme.popoverShadow, - matchHighlight: foreground(colorScheme.middle, "accent"), - item: autocompleteItem, - hoveredItem: { - ...autocompleteItem, - matchHighlight: foreground( - colorScheme.middle, - "accent", - "hovered" - ), - background: background(colorScheme.middle, "hovered"), - }, - selectedItem: { - ...autocompleteItem, - matchHighlight: foreground( - colorScheme.middle, - "accent", - "active" - ), - background: background(colorScheme.middle, "active"), - }, - }, - diagnosticHeader: { - background: background(colorScheme.middle), - iconWidthFactor: 1.5, - textScaleFactor: 0.857, - border: border(colorScheme.middle, { - bottom: true, - top: true, - }), - code: { - ...text(colorScheme.middle, "mono", { size: "sm" }), - margin: { - left: 10, - }, - }, - source: { - text: text(colorScheme.middle, "sans", { - size: "sm", - weight: "bold", - }), - }, - message: { - highlightText: text(colorScheme.middle, "sans", { - size: "sm", - weight: "bold", - }), - text: text(colorScheme.middle, "sans", { size: "sm" }), - }, - }, - diagnosticPathHeader: { - background: background(colorScheme.middle), - textScaleFactor: 0.857, - filename: text(colorScheme.middle, "mono", { size: "sm" }), - path: { - ...text(colorScheme.middle, "mono", { size: "sm" }), - margin: { - left: 12, - }, - }, - }, - errorDiagnostic: diagnostic(colorScheme.middle, "negative"), - warningDiagnostic: diagnostic(colorScheme.middle, "warning"), - informationDiagnostic: diagnostic(colorScheme.middle, "accent"), - hintDiagnostic: diagnostic(colorScheme.middle, "warning"), - invalidErrorDiagnostic: diagnostic(colorScheme.middle, "base"), - invalidHintDiagnostic: diagnostic(colorScheme.middle, "base"), - invalidInformationDiagnostic: diagnostic(colorScheme.middle, "base"), - invalidWarningDiagnostic: diagnostic(colorScheme.middle, "base"), - hoverPopover: hoverPopover(colorScheme), - linkDefinition: { - color: syntax.linkUri.color, - underline: syntax.linkUri.underline, - }, - jumpIcon: interactive({ - base: { - color: foreground(layer, "on"), - iconWidth: 20, - buttonWidth: 20, + const autocompleteItem = { cornerRadius: 6, padding: { - top: 6, - bottom: 6, - left: 6, - right: 6, - } - }, state: { - hovered: { - background: background(layer, "on", "hovered"), - } - } - }), - - scrollbar: { - width: 12, - minHeightFactor: 1.0, - track: { - border: border(layer, "variant", { left: true }), - }, - thumb: { - background: withOpacity(background(layer, "inverted"), 0.3), - border: { - width: 1, - color: borderColor(layer, "variant"), - top: false, - right: true, - left: true, - bottom: false, + bottom: 2, + left: 6, + right: 6, + top: 2, }, - }, - git: { - deleted: isLight - ? withOpacity(colorScheme.ramps.red(0.5).hex(), 0.8) - : withOpacity(colorScheme.ramps.red(0.4).hex(), 0.8), - modified: isLight - ? withOpacity(colorScheme.ramps.yellow(0.5).hex(), 0.8) - : withOpacity(colorScheme.ramps.yellow(0.4).hex(), 0.8), - inserted: isLight - ? withOpacity(colorScheme.ramps.green(0.5).hex(), 0.8) - : withOpacity(colorScheme.ramps.green(0.4).hex(), 0.8), - }, - }, - compositionMark: { - underline: { - thickness: 1.0, - color: borderColor(layer), - }, - }, - syntax, - } + } + + function diagnostic(layer: Layer, styleSet: StyleSets) { + return { + textScaleFactor: 0.857, + header: { + border: border(layer, { + top: true, + }), + }, + message: { + text: text(layer, "sans", styleSet, "default", { size: "sm" }), + highlightText: text(layer, "sans", styleSet, "default", { + size: "sm", + weight: "bold", + }), + }, + } + } + + const syntax = buildSyntax(colorScheme) + + return { + textColor: syntax.primary.color, + background: background(layer), + activeLineBackground: withOpacity(background(layer, "on"), 0.75), + highlightedLineBackground: background(layer, "on"), + // Inline autocomplete suggestions, Co-pilot suggestions, etc. + suggestion: syntax.predictive, + codeActions: { + indicator: toggleable(interactive({ + base: { + color: foreground(layer, "variant"), + }, state: { + clicked: { + color: foreground(layer, "base"), + }, + hovered: { + color: foreground(layer, "on"), + }, + } + }), + { + default: { + color: foreground(layer, "on"), + } + }), + + verticalScale: 0.55, + }, + folds: { + iconMarginScale: 2.5, + foldedIcon: "icons/chevron_right_8.svg", + foldableIcon: "icons/chevron_down_8.svg", + indicator: toggleable(interactive({ + base: { + color: foreground(layer, "variant"), + }, state: { + clicked: { + color: foreground(layer, "base"), + }, + hovered: { + color: foreground(layer, "on"), + }, + } + }), + { + default: { + color: foreground(layer, "on"), + } + }), + ellipses: { + textColor: colorScheme.ramps.neutral(0.71).hex(), + cornerRadiusFactor: 0.15, + background: { + // Copied from hover_popover highlight + default: { color: colorScheme.ramps.neutral(0.5).alpha(0.0).hex() }, + + hover: { + color: colorScheme.ramps.neutral(0.5).alpha(0.5).hex(), + }, + + clicked: { + color: colorScheme.ramps.neutral(0.5).alpha(0.7).hex(), + }, + }, + }, + foldBackground: foreground(layer, "variant"), + }, + diff: { + deleted: isLight + ? colorScheme.ramps.red(0.5).hex() + : colorScheme.ramps.red(0.4).hex(), + modified: isLight + ? colorScheme.ramps.yellow(0.5).hex() + : colorScheme.ramps.yellow(0.5).hex(), + inserted: isLight + ? colorScheme.ramps.green(0.4).hex() + : colorScheme.ramps.green(0.5).hex(), + removedWidthEm: 0.275, + widthEm: 0.15, + cornerRadius: 0.05, + }, + /** Highlights matching occurrences of what is under the cursor + * as well as matched brackets + */ + documentHighlightReadBackground: withOpacity( + foreground(layer, "accent"), + 0.1 + ), + documentHighlightWriteBackground: colorScheme.ramps + .neutral(0.5) + .alpha(0.4) + .hex(), // TODO: This was blend * 2 + errorColor: background(layer, "negative"), + gutterBackground: background(layer), + gutterPaddingFactor: 3.5, + lineNumber: withOpacity(foreground(layer), 0.35), + lineNumberActive: foreground(layer), + renameFade: 0.6, + unnecessaryCodeFade: 0.5, + selection: colorScheme.players[0], + whitespace: colorScheme.ramps.neutral(0.5).hex(), + guestSelections: [ + colorScheme.players[1], + colorScheme.players[2], + colorScheme.players[3], + colorScheme.players[4], + colorScheme.players[5], + colorScheme.players[6], + colorScheme.players[7], + ], + autocomplete: { + background: background(colorScheme.middle), + cornerRadius: 8, + padding: 4, + margin: { + left: -14, + }, + border: border(colorScheme.middle), + shadow: colorScheme.popoverShadow, + matchHighlight: foreground(colorScheme.middle, "accent"), + item: autocompleteItem, + hoveredItem: { + ...autocompleteItem, + matchHighlight: foreground( + colorScheme.middle, + "accent", + "hovered" + ), + background: background(colorScheme.middle, "hovered"), + }, + selectedItem: { + ...autocompleteItem, + matchHighlight: foreground( + colorScheme.middle, + "accent", + "active" + ), + background: background(colorScheme.middle, "active"), + }, + }, + diagnosticHeader: { + background: background(colorScheme.middle), + iconWidthFactor: 1.5, + textScaleFactor: 0.857, + border: border(colorScheme.middle, { + bottom: true, + top: true, + }), + code: { + ...text(colorScheme.middle, "mono", { size: "sm" }), + margin: { + left: 10, + }, + }, + source: { + text: text(colorScheme.middle, "sans", { + size: "sm", + weight: "bold", + }), + }, + message: { + highlightText: text(colorScheme.middle, "sans", { + size: "sm", + weight: "bold", + }), + text: text(colorScheme.middle, "sans", { size: "sm" }), + }, + }, + diagnosticPathHeader: { + background: background(colorScheme.middle), + textScaleFactor: 0.857, + filename: text(colorScheme.middle, "mono", { size: "sm" }), + path: { + ...text(colorScheme.middle, "mono", { size: "sm" }), + margin: { + left: 12, + }, + }, + }, + errorDiagnostic: diagnostic(colorScheme.middle, "negative"), + warningDiagnostic: diagnostic(colorScheme.middle, "warning"), + informationDiagnostic: diagnostic(colorScheme.middle, "accent"), + hintDiagnostic: diagnostic(colorScheme.middle, "warning"), + invalidErrorDiagnostic: diagnostic(colorScheme.middle, "base"), + invalidHintDiagnostic: diagnostic(colorScheme.middle, "base"), + invalidInformationDiagnostic: diagnostic(colorScheme.middle, "base"), + invalidWarningDiagnostic: diagnostic(colorScheme.middle, "base"), + hoverPopover: hoverPopover(colorScheme), + linkDefinition: { + color: syntax.linkUri.color, + underline: syntax.linkUri.underline, + }, + jumpIcon: interactive({ + base: { + color: foreground(layer, "on"), + iconWidth: 20, + buttonWidth: 20, + cornerRadius: 6, + padding: { + top: 6, + bottom: 6, + left: 6, + right: 6, + } + }, state: { + hovered: { + background: background(layer, "on", "hovered"), + } + } + }), + + scrollbar: { + width: 12, + minHeightFactor: 1.0, + track: { + border: border(layer, "variant", { left: true }), + }, + thumb: { + background: withOpacity(background(layer, "inverted"), 0.3), + border: { + width: 1, + color: borderColor(layer, "variant"), + top: false, + right: true, + left: true, + bottom: false, + }, + }, + git: { + deleted: isLight + ? withOpacity(colorScheme.ramps.red(0.5).hex(), 0.8) + : withOpacity(colorScheme.ramps.red(0.4).hex(), 0.8), + modified: isLight + ? withOpacity(colorScheme.ramps.yellow(0.5).hex(), 0.8) + : withOpacity(colorScheme.ramps.yellow(0.4).hex(), 0.8), + inserted: isLight + ? withOpacity(colorScheme.ramps.green(0.5).hex(), 0.8) + : withOpacity(colorScheme.ramps.green(0.4).hex(), 0.8), + }, + }, + compositionMark: { + underline: { + thickness: 1.0, + color: borderColor(layer), + }, + }, + syntax, + } } diff --git a/styles/src/styleTree/feedback.ts b/styles/src/styleTree/feedback.ts index 4b5a4de89f..19a8f1e4c7 100644 --- a/styles/src/styleTree/feedback.ts +++ b/styles/src/styleTree/feedback.ts @@ -1,48 +1,48 @@ import { ColorScheme } from "../theme/colorScheme" import { background, border, text } from "./components" -import { interactive } from "./interactive" +import { interactive } from "../element/interactive" export default function feedback(colorScheme: ColorScheme) { - let layer = colorScheme.highest + let layer = colorScheme.highest - return { - submit_button: interactive({ - base: { - ...text(layer, "mono", "on"), - background: background(layer, "on"), - cornerRadius: 6, - border: border(layer, "on"), - margin: { - right: 4, - }, - padding: { - bottom: 2, - left: 10, - right: 10, - top: 2, - } - }, state: { - clicked: { - ...text(layer, "mono", "on", "pressed"), - background: background(layer, "on", "pressed"), - border: border(layer, "on", "pressed"), - }, - hovered: { - ...text(layer, "mono", "on", "hovered"), - background: background(layer, "on", "hovered"), - border: border(layer, "on", "hovered"), - }, - } - }), - button_margin: 8, - info_text_default: text(layer, "sans", "default", { size: "xs" }), - link_text_default: text(layer, "sans", "default", { - size: "xs", - underline: true, - }), - link_text_hover: text(layer, "sans", "hovered", { - size: "xs", - underline: true, - }), - } + return { + submit_button: interactive({ + base: { + ...text(layer, "mono", "on"), + background: background(layer, "on"), + cornerRadius: 6, + border: border(layer, "on"), + margin: { + right: 4, + }, + padding: { + bottom: 2, + left: 10, + right: 10, + top: 2, + } + }, state: { + clicked: { + ...text(layer, "mono", "on", "pressed"), + background: background(layer, "on", "pressed"), + border: border(layer, "on", "pressed"), + }, + hovered: { + ...text(layer, "mono", "on", "hovered"), + background: background(layer, "on", "hovered"), + border: border(layer, "on", "hovered"), + }, + } + }), + button_margin: 8, + info_text_default: text(layer, "sans", "default", { size: "xs" }), + link_text_default: text(layer, "sans", "default", { + size: "xs", + underline: true, + }), + link_text_hover: text(layer, "sans", "hovered", { + size: "xs", + underline: true, + }), + } } diff --git a/styles/src/styleTree/picker.ts b/styles/src/styleTree/picker.ts index 89b6cd0614..3bcdae584f 100644 --- a/styles/src/styleTree/picker.ts +++ b/styles/src/styleTree/picker.ts @@ -2,88 +2,88 @@ import { ColorScheme } from "../theme/colorScheme" import { withOpacity } from "../theme/color" import { background, border, text } from "./components" import { toggleable } from "./toggle" -import { interactive } from "./interactive" +import { interactive } from "../element/interactive" export default function picker(colorScheme: ColorScheme): any { - let layer = colorScheme.lowest - const container = { - background: background(layer), - border: border(layer), - shadow: colorScheme.modalShadow, - cornerRadius: 12, - padding: { - bottom: 4, - }, - } - const inputEditor = { - placeholderText: text(layer, "sans", "on", "disabled"), - selection: colorScheme.players[0], - text: text(layer, "mono", "on"), - border: border(layer, { bottom: true }), - padding: { - bottom: 8, - left: 16, - right: 16, - top: 8, - }, - margin: { - bottom: 4, - }, - } - const emptyInputEditor: any = { ...inputEditor } - delete emptyInputEditor.border - delete emptyInputEditor.margin - - return { - ...container, - emptyContainer: { - ...container, - padding: {}, - }, - item: toggleable(interactive({ - base: { + let layer = colorScheme.lowest + const container = { + background: background(layer), + border: border(layer), + shadow: colorScheme.modalShadow, + cornerRadius: 12, padding: { - bottom: 4, - left: 12, - right: 12, - top: 4, + bottom: 4, + }, + } + const inputEditor = { + placeholderText: text(layer, "sans", "on", "disabled"), + selection: colorScheme.players[0], + text: text(layer, "mono", "on"), + border: border(layer, { bottom: true }), + padding: { + bottom: 8, + left: 16, + right: 16, + top: 8, }, margin: { - top: 1, - left: 4, - right: 4, + bottom: 4, }, - cornerRadius: 8, - text: text(layer, "sans", "variant"), - highlightText: text(layer, "sans", "accent", { weight: "bold" }), - } - , state: { - hovered: { - background: withOpacity(background(layer, "hovered"), 0.5), - } - } - }), - { - default: { - background: withOpacity( - background(layer, "base", "active"), - 0.5 - ), - //text: text(layer, "sans", "base", "active"), - } - }), + } + const emptyInputEditor: any = { ...inputEditor } + delete emptyInputEditor.border + delete emptyInputEditor.margin + + return { + ...container, + emptyContainer: { + ...container, + padding: {}, + }, + item: toggleable(interactive({ + base: { + padding: { + bottom: 4, + left: 12, + right: 12, + top: 4, + }, + margin: { + top: 1, + left: 4, + right: 4, + }, + cornerRadius: 8, + text: text(layer, "sans", "variant"), + highlightText: text(layer, "sans", "accent", { weight: "bold" }), + } + , state: { + hovered: { + background: withOpacity(background(layer, "hovered"), 0.5), + } + } + }), + { + default: { + background: withOpacity( + background(layer, "base", "active"), + 0.5 + ), + //text: text(layer, "sans", "base", "active"), + } + }), - inputEditor, - emptyInputEditor, - noMatches: { - text: text(layer, "sans", "variant"), - padding: { - bottom: 8, - left: 16, - right: 16, - top: 8, - }, - }, - } + inputEditor, + emptyInputEditor, + noMatches: { + text: text(layer, "sans", "variant"), + padding: { + bottom: 8, + left: 16, + right: 16, + top: 8, + }, + }, + } } diff --git a/styles/src/styleTree/projectPanel.ts b/styles/src/styleTree/projectPanel.ts index 782c781156..132dfe102c 100644 --- a/styles/src/styleTree/projectPanel.ts +++ b/styles/src/styleTree/projectPanel.ts @@ -1,123 +1,123 @@ import { ColorScheme } from "../theme/colorScheme" import { withOpacity } from "../theme/color" import { background, border, foreground, text } from "./components" -import { interactive } from "./interactive" +import { interactive } from "../element/interactive" import { toggleable } from "./toggle" export default function projectPanel(colorScheme: ColorScheme) { - const { isLight } = colorScheme + const { isLight } = colorScheme - let layer = colorScheme.middle + let layer = colorScheme.middle - let baseEntry = { - height: 22, - iconColor: foreground(layer, "variant"), - iconSize: 7, - iconSpacing: 5, - } - - let status = { - git: { - modified: isLight - ? colorScheme.ramps.yellow(0.6).hex() - : colorScheme.ramps.yellow(0.5).hex(), - inserted: isLight - ? colorScheme.ramps.green(0.45).hex() - : colorScheme.ramps.green(0.5).hex(), - conflict: isLight - ? colorScheme.ramps.red(0.6).hex() - : colorScheme.ramps.red(0.5).hex(), - }, - } - - let entry = toggleable(interactive({ - base: { - ...baseEntry, - text: text(layer, "mono", "variant", { size: "sm" }), - status, - }, state: - { - hovered: { - background: background(layer, "variant", "hovered"), - } - } - }), - { - default: { - /*background: colorScheme.isLight - ? withOpacity(background(layer, "active"), 0.5) - : background(layer, "active") ,*/ // todo posiewic - text: text(layer, "mono", "active", { size: "sm" }), - }, - hovered: { - //background: background(layer, "active"), - text: text(layer, "mono", "active", { size: "sm" }), - }, - - }); - - return { - openProjectButton: interactive({ - base: { - background: background(layer), - border: border(layer, "active"), - cornerRadius: 4, - margin: { - top: 16, - left: 16, - right: 16, - }, - padding: { - top: 3, - bottom: 3, - left: 7, - right: 7, - }, - ...text(layer, "sans", "default", { size: "sm" }) - }, state: { - hovered: { - ...text(layer, "sans", "default", { size: "sm" }), - background: background(layer, "hovered"), - border: border(layer, "active"), - }, - } - }), - background: background(layer), - padding: { left: 6, right: 6, top: 0, bottom: 6 }, - indentWidth: 12, - entry, - draggedEntry: { - ...baseEntry, - text: text(layer, "mono", "on", { size: "sm" }), - background: withOpacity(background(layer, "on"), 0.9), - border: border(layer), - status, - }, - ignoredEntry: { - ...entry, - iconColor: foreground(layer, "disabled"), - text: text(layer, "mono", "disabled"), - active: { - ...entry.active, + let baseEntry = { + height: 22, iconColor: foreground(layer, "variant"), - }, - }, - cutEntry: { - ...entry, - text: text(layer, "mono", "disabled"), - active: { - ...entry.active, - default: { - ...entry.active.default, - background: background(layer, "active"), - text: text(layer, "mono", "disabled", { size: "sm" }), - }, + iconSize: 7, + iconSpacing: 5, + } - }, - }, - filenameEditor: { - background: background(layer, "on"), - text: text(layer, "mono", "on", { size: "sm" }), - selection: colorScheme.players[0], - }, - } + let status = { + git: { + modified: isLight + ? colorScheme.ramps.yellow(0.6).hex() + : colorScheme.ramps.yellow(0.5).hex(), + inserted: isLight + ? colorScheme.ramps.green(0.45).hex() + : colorScheme.ramps.green(0.5).hex(), + conflict: isLight + ? colorScheme.ramps.red(0.6).hex() + : colorScheme.ramps.red(0.5).hex(), + }, + } + + let entry = toggleable(interactive({ + base: { + ...baseEntry, + text: text(layer, "mono", "variant", { size: "sm" }), + status, + }, state: + { + hovered: { + background: background(layer, "variant", "hovered"), + } + } + }), + { + default: { + /*background: colorScheme.isLight + ? withOpacity(background(layer, "active"), 0.5) + : background(layer, "active") ,*/ // todo posiewic + text: text(layer, "mono", "active", { size: "sm" }), + }, + hovered: { + //background: background(layer, "active"), + text: text(layer, "mono", "active", { size: "sm" }), + }, + + }); + + return { + openProjectButton: interactive({ + base: { + background: background(layer), + border: border(layer, "active"), + cornerRadius: 4, + margin: { + top: 16, + left: 16, + right: 16, + }, + padding: { + top: 3, + bottom: 3, + left: 7, + right: 7, + }, + ...text(layer, "sans", "default", { size: "sm" }) + }, state: { + hovered: { + ...text(layer, "sans", "default", { size: "sm" }), + background: background(layer, "hovered"), + border: border(layer, "active"), + }, + } + }), + background: background(layer), + padding: { left: 6, right: 6, top: 0, bottom: 6 }, + indentWidth: 12, + entry, + draggedEntry: { + ...baseEntry, + text: text(layer, "mono", "on", { size: "sm" }), + background: withOpacity(background(layer, "on"), 0.9), + border: border(layer), + status, + }, + ignoredEntry: { + ...entry, + iconColor: foreground(layer, "disabled"), + text: text(layer, "mono", "disabled"), + active: { + ...entry.active, + iconColor: foreground(layer, "variant"), + }, + }, + cutEntry: { + ...entry, + text: text(layer, "mono", "disabled"), + active: { + ...entry.active, + default: { + ...entry.active.default, + background: background(layer, "active"), + text: text(layer, "mono", "disabled", { size: "sm" }), + }, + + }, + }, + filenameEditor: { + background: background(layer, "on"), + text: text(layer, "mono", "on", { size: "sm" }), + selection: colorScheme.players[0], + }, + } } diff --git a/styles/src/styleTree/search.ts b/styles/src/styleTree/search.ts index e278f69ff0..1f63d2740b 100644 --- a/styles/src/styleTree/search.ts +++ b/styles/src/styleTree/search.ts @@ -1,123 +1,123 @@ import { ColorScheme } from "../theme/colorScheme" import { withOpacity } from "../theme/color" import { background, border, foreground, text } from "./components" -import { interactive } from "./interactive" +import { interactive } from "../element/interactive" import { toggleable } from "./toggle" export default function search(colorScheme: ColorScheme) { - let layer = colorScheme.highest + let layer = colorScheme.highest - // Search input - const editor = { - background: background(layer), - cornerRadius: 8, - minWidth: 200, - maxWidth: 500, - placeholderText: text(layer, "mono", "disabled"), - selection: colorScheme.players[0], - text: text(layer, "mono", "default"), - border: border(layer), - margin: { - right: 12, - }, - padding: { - top: 3, - bottom: 3, - left: 12, - right: 8, - }, - } - - const includeExcludeEditor = { - ...editor, - minWidth: 100, - maxWidth: 250, - } - - return { - // TODO: Add an activeMatchBackground on the rust side to differentiate between active and inactive - matchBackground: withOpacity(foreground(layer, "accent"), 0.4), - optionButton: toggleable(interactive({ - base: { - ...text(layer, "mono", "on"), - background: background(layer, "on"), - cornerRadius: 6, - border: border(layer, "on"), + // Search input + const editor = { + background: background(layer), + cornerRadius: 8, + minWidth: 200, + maxWidth: 500, + placeholderText: text(layer, "mono", "disabled"), + selection: colorScheme.players[0], + text: text(layer, "mono", "default"), + border: border(layer), margin: { - right: 4, + right: 12, }, padding: { - bottom: 2, - left: 10, - right: 10, - top: 2, + top: 3, + bottom: 3, + left: 12, + right: 8, }, - }, state: { - clicked: { - ...text(layer, "mono", "on", "pressed"), - background: background(layer, "on", "pressed"), - border: border(layer, "on", "pressed"), - }, - hovered: { - ...text(layer, "mono", "on", "hovered"), - background: background(layer, "on", "hovered"), - border: border(layer, "on", "hovered"), - }, - } - }), { - default: { - ...text(layer, "mono", "on", "inverted"), - background: background(layer, "on", "inverted"), - border: border(layer, "on", "inverted"), - }, + } - }), - editor, - invalidEditor: { - ...editor, - border: border(layer, "negative"), - }, - includeExcludeEditor, - invalidIncludeExcludeEditor: { - ...includeExcludeEditor, - border: border(layer, "negative"), - }, - matchIndex: { - ...text(layer, "mono", "variant"), - padding: { - left: 6, - }, - }, - optionButtonGroup: { - padding: { - left: 12, - right: 12, - }, - }, - includeExcludeInputs: { - ...text(layer, "mono", "variant"), - padding: { - right: 6, - }, - }, - resultsStatus: { - ...text(layer, "mono", "on"), - size: 18, - }, - dismissButton: interactive({ - base: { - color: foreground(layer, "variant"), - iconWidth: 12, - buttonWidth: 14, - padding: { - left: 10, - right: 10, + const includeExcludeEditor = { + ...editor, + minWidth: 100, + maxWidth: 250, + } + + return { + // TODO: Add an activeMatchBackground on the rust side to differentiate between active and inactive + matchBackground: withOpacity(foreground(layer, "accent"), 0.4), + optionButton: toggleable(interactive({ + base: { + ...text(layer, "mono", "on"), + background: background(layer, "on"), + cornerRadius: 6, + border: border(layer, "on"), + margin: { + right: 4, + }, + padding: { + bottom: 2, + left: 10, + right: 10, + top: 2, + }, + }, state: { + clicked: { + ...text(layer, "mono", "on", "pressed"), + background: background(layer, "on", "pressed"), + border: border(layer, "on", "pressed"), + }, + hovered: { + ...text(layer, "mono", "on", "hovered"), + background: background(layer, "on", "hovered"), + border: border(layer, "on", "hovered"), + }, + } + }), { + default: { + ...text(layer, "mono", "on", "inverted"), + background: background(layer, "on", "inverted"), + border: border(layer, "on", "inverted"), + }, + + }), + editor, + invalidEditor: { + ...editor, + border: border(layer, "negative"), }, - }, state: { - hovered: { - color: foreground(layer, "hovered"), - } - } - }), - } + includeExcludeEditor, + invalidIncludeExcludeEditor: { + ...includeExcludeEditor, + border: border(layer, "negative"), + }, + matchIndex: { + ...text(layer, "mono", "variant"), + padding: { + left: 6, + }, + }, + optionButtonGroup: { + padding: { + left: 12, + right: 12, + }, + }, + includeExcludeInputs: { + ...text(layer, "mono", "variant"), + padding: { + right: 6, + }, + }, + resultsStatus: { + ...text(layer, "mono", "on"), + size: 18, + }, + dismissButton: interactive({ + base: { + color: foreground(layer, "variant"), + iconWidth: 12, + buttonWidth: 14, + padding: { + left: 10, + right: 10, + }, + }, state: { + hovered: { + color: foreground(layer, "hovered"), + } + } + }), + } } diff --git a/styles/src/styleTree/simpleMessageNotification.ts b/styles/src/styleTree/simpleMessageNotification.ts index 70219d7a10..4c2abfcf9d 100644 --- a/styles/src/styleTree/simpleMessageNotification.ts +++ b/styles/src/styleTree/simpleMessageNotification.ts @@ -1,51 +1,51 @@ import { ColorScheme } from "../theme/colorScheme" import { background, border, foreground, text } from "./components" -import { interactive } from "./interactive" +import { interactive } from "../element/interactive" const headerPadding = 8 export default function simpleMessageNotification( - colorScheme: ColorScheme + colorScheme: ColorScheme ): Object { - let layer = colorScheme.middle - return { - message: { - ...text(layer, "sans", { size: "xs" }), - margin: { left: headerPadding, right: headerPadding }, - }, - actionMessage: interactive({ - base: { - ...text(layer, "sans", { size: "xs" }), - border: border(layer, "active"), - cornerRadius: 4, - padding: { - top: 3, - bottom: 3, - left: 7, - right: 7, + let layer = colorScheme.middle + return { + message: { + ...text(layer, "sans", { size: "xs" }), + margin: { left: headerPadding, right: headerPadding }, }, + actionMessage: interactive({ + base: { + ...text(layer, "sans", { size: "xs" }), + border: border(layer, "active"), + cornerRadius: 4, + padding: { + top: 3, + bottom: 3, + left: 7, + right: 7, + }, - margin: { left: headerPadding, top: 6, bottom: 6 }, - }, state: { - hovered: { - ...text(layer, "sans", "default", { size: "xs" }), - background: background(layer, "hovered"), - border: border(layer, "active"), - }, - } - }), - dismissButton: interactive({ - base: { - color: foreground(layer), - iconWidth: 8, - iconHeight: 8, - buttonWidth: 8, - buttonHeight: 8, - }, state: { - hovered: { - color: foreground(layer, "hovered"), - }, - } - }) - } + margin: { left: headerPadding, top: 6, bottom: 6 }, + }, state: { + hovered: { + ...text(layer, "sans", "default", { size: "xs" }), + background: background(layer, "hovered"), + border: border(layer, "active"), + }, + } + }), + dismissButton: interactive({ + base: { + color: foreground(layer), + iconWidth: 8, + iconHeight: 8, + buttonWidth: 8, + buttonHeight: 8, + }, state: { + hovered: { + color: foreground(layer, "hovered"), + }, + } + }) + } } diff --git a/styles/src/styleTree/statusBar.ts b/styles/src/styleTree/statusBar.ts index 754703c2b9..ee78f5e6b3 100644 --- a/styles/src/styleTree/statusBar.ts +++ b/styles/src/styleTree/statusBar.ts @@ -1,145 +1,145 @@ import { ColorScheme } from "../theme/colorScheme" import { background, border, foreground, text } from "./components" -import { interactive } from "./interactive" +import { interactive } from "../element/interactive" import { toggleable } from "./toggle" export default function statusBar(colorScheme: ColorScheme) { - let layer = colorScheme.lowest + let layer = colorScheme.lowest - const statusContainer = { - cornerRadius: 6, - padding: { top: 3, bottom: 3, left: 6, right: 6 }, - } + const statusContainer = { + cornerRadius: 6, + padding: { top: 3, bottom: 3, left: 6, right: 6 }, + } - const diagnosticStatusContainer = { - cornerRadius: 6, - padding: { top: 1, bottom: 1, left: 6, right: 6 }, - } + const diagnosticStatusContainer = { + cornerRadius: 6, + padding: { top: 1, bottom: 1, left: 6, right: 6 }, + } - return { - height: 30, - itemSpacing: 8, - padding: { - top: 1, - bottom: 1, - left: 6, - right: 6, - }, - border: border(layer, { top: true, overlay: true }), - cursorPosition: text(layer, "sans", "variant"), - activeLanguage: interactive({ - base: { - padding: { left: 6, right: 6 }, - ...text(layer, "sans", "variant") - }, - state: { - hovered: { - ...text(layer, "sans", "on"), - } - } - }, - ), - autoUpdateProgressMessage: text(layer, "sans", "variant"), - autoUpdateDoneMessage: text(layer, "sans", "variant"), - lspStatus: interactive({ - base: { - ...diagnosticStatusContainer, - iconSpacing: 4, - iconWidth: 14, - height: 18, - message: text(layer, "sans"), - iconColor: foreground(layer) - }, - state: { - hovered: { - message: text(layer, "sans"), - iconColor: foreground(layer), - background: background(layer, "hovered"), - } - } - }), - diagnosticMessage: interactive({ - base: { - ...text(layer, "sans") - }, - state: { hovered: text(layer, "sans", "hovered") } - }, - ), - diagnosticSummary: - interactive({ - base: { - height: 20, - iconWidth: 16, - iconSpacing: 2, - summarySpacing: 6, - text: text(layer, "sans", { size: "sm" }), - iconColorOk: foreground(layer, "variant"), - iconColorWarning: foreground(layer, "warning"), - iconColorError: foreground(layer, "negative"), - containerOk: { - cornerRadius: 6, - padding: { top: 3, bottom: 3, left: 7, right: 7 }, - }, - containerWarning: { - ...diagnosticStatusContainer, - background: background(layer, "warning"), - border: border(layer, "warning"), - }, - containerError: { - ...diagnosticStatusContainer, - background: background(layer, "negative"), - border: border(layer, "negative"), - } - }, state: { - hovered: { - iconColorOk: foreground(layer, "on"), - containerOk: { - background: background(layer, "on", "hovered"), + return { + height: 30, + itemSpacing: 8, + padding: { + top: 1, + bottom: 1, + left: 6, + right: 6, + }, + border: border(layer, { top: true, overlay: true }), + cursorPosition: text(layer, "sans", "variant"), + activeLanguage: interactive({ + base: { + padding: { left: 6, right: 6 }, + ...text(layer, "sans", "variant") }, - containerWarning: { - background: background(layer, "warning", "hovered"), - border: border(layer, "warning", "hovered"), - }, - containerError: { - background: background(layer, "negative", "hovered"), - border: border(layer, "negative", "hovered"), + state: { + hovered: { + ...text(layer, "sans", "on"), + } + } + }, + ), + autoUpdateProgressMessage: text(layer, "sans", "variant"), + autoUpdateDoneMessage: text(layer, "sans", "variant"), + lspStatus: interactive({ + base: { + ...diagnosticStatusContainer, + iconSpacing: 4, + iconWidth: 14, + height: 18, + message: text(layer, "sans"), + iconColor: foreground(layer) + }, + state: { + hovered: { + message: text(layer, "sans"), + iconColor: foreground(layer), + background: background(layer, "hovered"), + } } - } - } - } - ), - panelButtons: { - groupLeft: {}, - groupBottom: {}, - groupRight: {}, - button: toggleable(interactive({ - base: { - ...statusContainer, - iconSize: 16, - iconColor: foreground(layer, "variant"), - label: { - margin: { left: 6 }, - ...text(layer, "sans", { size: "sm" }), - }, - }, state: { - hovered: { - iconColor: foreground(layer, "hovered"), - background: background(layer, "variant"), - } - } - }), - { - default: { - iconColor: foreground(layer, "active"), - background: background(layer, "active"), - } }), - badge: { - cornerRadius: 3, - padding: 2, - margin: { bottom: -1, right: -1 }, - border: border(layer), - background: background(layer, "accent"), - }, - }, - } + diagnosticMessage: interactive({ + base: { + ...text(layer, "sans") + }, + state: { hovered: text(layer, "sans", "hovered") } + }, + ), + diagnosticSummary: + interactive({ + base: { + height: 20, + iconWidth: 16, + iconSpacing: 2, + summarySpacing: 6, + text: text(layer, "sans", { size: "sm" }), + iconColorOk: foreground(layer, "variant"), + iconColorWarning: foreground(layer, "warning"), + iconColorError: foreground(layer, "negative"), + containerOk: { + cornerRadius: 6, + padding: { top: 3, bottom: 3, left: 7, right: 7 }, + }, + containerWarning: { + ...diagnosticStatusContainer, + background: background(layer, "warning"), + border: border(layer, "warning"), + }, + containerError: { + ...diagnosticStatusContainer, + background: background(layer, "negative"), + border: border(layer, "negative"), + } + }, state: { + hovered: { + iconColorOk: foreground(layer, "on"), + containerOk: { + background: background(layer, "on", "hovered"), + }, + containerWarning: { + background: background(layer, "warning", "hovered"), + border: border(layer, "warning", "hovered"), + }, + containerError: { + background: background(layer, "negative", "hovered"), + border: border(layer, "negative", "hovered"), + } + } + } + } + ), + panelButtons: { + groupLeft: {}, + groupBottom: {}, + groupRight: {}, + button: toggleable(interactive({ + base: { + ...statusContainer, + iconSize: 16, + iconColor: foreground(layer, "variant"), + label: { + margin: { left: 6 }, + ...text(layer, "sans", { size: "sm" }), + }, + }, state: { + hovered: { + iconColor: foreground(layer, "hovered"), + background: background(layer, "variant"), + } + } + }), + { + default: { + iconColor: foreground(layer, "active"), + background: background(layer, "active"), + } + }), + badge: { + cornerRadius: 3, + padding: 2, + margin: { bottom: -1, right: -1 }, + border: border(layer), + background: background(layer, "accent"), + }, + }, + } } diff --git a/styles/src/styleTree/tabBar.ts b/styles/src/styleTree/tabBar.ts index 9da63b9518..8011a70772 100644 --- a/styles/src/styleTree/tabBar.ts +++ b/styles/src/styleTree/tabBar.ts @@ -2,117 +2,117 @@ import { ColorScheme } from "../theme/colorScheme" import { withOpacity } from "../theme/color" import { text, border, background, foreground } from "./components" import { toggleable } from "./toggle" -import { interactive } from "./interactive" +import { interactive } from "../element/interactive" export default function tabBar(colorScheme: ColorScheme) { - const height = 32 + const height = 32 - let activeLayer = colorScheme.highest - let layer = colorScheme.middle + let activeLayer = colorScheme.highest + let layer = colorScheme.middle - const tab = { - height, - text: text(layer, "sans", "variant", { size: "sm" }), - background: background(layer), - border: border(layer, { - right: true, - bottom: true, - overlay: true, - }), - padding: { - left: 8, - right: 12, - }, - spacing: 8, + const tab = { + height, + text: text(layer, "sans", "variant", { size: "sm" }), + background: background(layer), + border: border(layer, { + right: true, + bottom: true, + overlay: true, + }), + padding: { + left: 8, + right: 12, + }, + spacing: 8, - // Tab type icons (e.g. Project Search) - typeIconWidth: 14, + // Tab type icons (e.g. Project Search) + typeIconWidth: 14, - // Close icons - closeIconWidth: 8, - iconClose: foreground(layer, "variant"), - iconCloseActive: foreground(layer, "hovered"), + // Close icons + closeIconWidth: 8, + iconClose: foreground(layer, "variant"), + iconCloseActive: foreground(layer, "hovered"), - // Indicators - iconConflict: foreground(layer, "warning"), - iconDirty: foreground(layer, "accent"), + // Indicators + iconConflict: foreground(layer, "warning"), + iconDirty: foreground(layer, "accent"), - // When two tabs of the same name are open, a label appears next to them - description: { - margin: { left: 8 }, - ...text(layer, "sans", "disabled", { size: "2xs" }), - }, - } + // When two tabs of the same name are open, a label appears next to them + description: { + margin: { left: 8 }, + ...text(layer, "sans", "disabled", { size: "2xs" }), + }, + } - const activePaneActiveTab = { - ...tab, - background: background(activeLayer), - text: text(activeLayer, "sans", "active", { size: "sm" }), - border: { - ...tab.border, - bottom: false, - }, - } + const activePaneActiveTab = { + ...tab, + background: background(activeLayer), + text: text(activeLayer, "sans", "active", { size: "sm" }), + border: { + ...tab.border, + bottom: false, + }, + } - const inactivePaneInactiveTab = { - ...tab, - background: background(layer), - text: text(layer, "sans", "variant", { size: "sm" }), - } + const inactivePaneInactiveTab = { + ...tab, + background: background(layer), + text: text(layer, "sans", "variant", { size: "sm" }), + } - const inactivePaneActiveTab = { - ...tab, - background: background(activeLayer), - text: text(layer, "sans", "variant", { size: "sm" }), - border: { - ...tab.border, - bottom: false, - }, - } + const inactivePaneActiveTab = { + ...tab, + background: background(activeLayer), + text: text(layer, "sans", "variant", { size: "sm" }), + border: { + ...tab.border, + bottom: false, + }, + } - const draggedTab = { - ...activePaneActiveTab, - background: withOpacity(tab.background, 0.9), - border: undefined as any, - shadow: colorScheme.popoverShadow, - } + const draggedTab = { + ...activePaneActiveTab, + background: withOpacity(tab.background, 0.9), + border: undefined as any, + shadow: colorScheme.popoverShadow, + } - return { - height, - background: background(layer), - activePane: { - activeTab: activePaneActiveTab, - inactiveTab: tab, - }, - inactivePane: { - activeTab: inactivePaneActiveTab, - inactiveTab: inactivePaneInactiveTab, - }, - draggedTab, - paneButton: toggleable(interactive({ - base: { - color: foreground(layer, "variant"), - iconWidth: 12, - buttonWidth: activePaneActiveTab.height, - }, - state: { - hovered: { - color: foreground(layer, "hovered"), - } - } - }), - { - default: { - color: foreground(layer, "accent"), - } - }, - ), - paneButtonContainer: { - background: tab.background, - border: { - ...tab.border, - right: false, - }, - }, - } + return { + height, + background: background(layer), + activePane: { + activeTab: activePaneActiveTab, + inactiveTab: tab, + }, + inactivePane: { + activeTab: inactivePaneActiveTab, + inactiveTab: inactivePaneInactiveTab, + }, + draggedTab, + paneButton: toggleable(interactive({ + base: { + color: foreground(layer, "variant"), + iconWidth: 12, + buttonWidth: activePaneActiveTab.height, + }, + state: { + hovered: { + color: foreground(layer, "hovered"), + } + } + }), + { + default: { + color: foreground(layer, "accent"), + } + }, + ), + paneButtonContainer: { + background: tab.background, + border: { + ...tab.border, + right: false, + }, + }, + } } diff --git a/styles/src/styleTree/toolbarDropdownMenu.ts b/styles/src/styleTree/toolbarDropdownMenu.ts index 0cfcb921ef..0bb3958dc8 100644 --- a/styles/src/styleTree/toolbarDropdownMenu.ts +++ b/styles/src/styleTree/toolbarDropdownMenu.ts @@ -1,56 +1,56 @@ import { ColorScheme } from "../theme/colorScheme" import { background, border, text } from "./components" -import { interactive } from "./interactive" +import { interactive } from "../element/interactive" import { toggleable } from "./toggle" export default function dropdownMenu(colorScheme: ColorScheme) { - let layer = colorScheme.middle + let layer = colorScheme.middle - return { - rowHeight: 30, - background: background(layer), - border: border(layer), - shadow: colorScheme.popoverShadow, - header: interactive({ - base: { - ...text(layer, "sans", { size: "sm" }), - secondaryText: text(layer, "sans", { size: "sm", color: "#aaaaaa" }), - secondaryTextSpacing: 10, - padding: { left: 8, right: 8, top: 2, bottom: 2 }, - cornerRadius: 6, - background: background(layer, "on"), - border: border(layer, "on", { overlay: true }) - }, - state: { - hovered: { - background: background(layer, "hovered"), - ...text(layer, "sans", "hovered", { size: "sm" }), - } - } - }) - , - sectionHeader: { - ...text(layer, "sans", { size: "sm" }), - padding: { left: 8, right: 8, top: 8, bottom: 8 }, - }, - item: toggleable(interactive({ - base: { - ...text(layer, "sans", { size: "sm" }), - secondaryTextSpacing: 10, - secondaryText: text(layer, "sans", { size: "sm" }), - padding: { left: 18, right: 18, top: 2, bottom: 2 } - }, state: { - hovered: { - background: background(layer, "hovered"), - ...text(layer, "sans", "hovered", { size: "sm" }), - } - } - }), { - default: { - background: background(layer, "active"), - }, - hovered: { - background: background(layer, "active"), - }, - }) - } + return { + rowHeight: 30, + background: background(layer), + border: border(layer), + shadow: colorScheme.popoverShadow, + header: interactive({ + base: { + ...text(layer, "sans", { size: "sm" }), + secondaryText: text(layer, "sans", { size: "sm", color: "#aaaaaa" }), + secondaryTextSpacing: 10, + padding: { left: 8, right: 8, top: 2, bottom: 2 }, + cornerRadius: 6, + background: background(layer, "on"), + border: border(layer, "on", { overlay: true }) + }, + state: { + hovered: { + background: background(layer, "hovered"), + ...text(layer, "sans", "hovered", { size: "sm" }), + } + } + }) + , + sectionHeader: { + ...text(layer, "sans", { size: "sm" }), + padding: { left: 8, right: 8, top: 8, bottom: 8 }, + }, + item: toggleable(interactive({ + base: { + ...text(layer, "sans", { size: "sm" }), + secondaryTextSpacing: 10, + secondaryText: text(layer, "sans", { size: "sm" }), + padding: { left: 18, right: 18, top: 2, bottom: 2 } + }, state: { + hovered: { + background: background(layer, "hovered"), + ...text(layer, "sans", "hovered", { size: "sm" }), + } + } + }), { + default: { + background: background(layer, "active"), + }, + hovered: { + background: background(layer, "active"), + }, + }) + } } diff --git a/styles/src/styleTree/updateNotification.ts b/styles/src/styleTree/updateNotification.ts index aa8db916ea..a7a5aaabaa 100644 --- a/styles/src/styleTree/updateNotification.ts +++ b/styles/src/styleTree/updateNotification.ts @@ -1,39 +1,39 @@ import { ColorScheme } from "../theme/colorScheme" import { foreground, text } from "./components" -import { interactive } from "./interactive" +import { interactive } from "../element/interactive" const headerPadding = 8 export default function updateNotification(colorScheme: ColorScheme): Object { - let layer = colorScheme.middle - return { - message: { - ...text(layer, "sans", { size: "xs" }), - margin: { left: headerPadding, right: headerPadding }, - }, - actionMessage: interactive({ - base: { - ...text(layer, "sans", { size: "xs" }), - margin: { left: headerPadding, top: 6, bottom: 6 } - }, state: { - hovered: { - color: foreground(layer, "hovered"), - } - } - }), - dismissButton: interactive({ - base: { - color: foreground(layer), - iconWidth: 8, - iconHeight: 8, - buttonWidth: 8, - buttonHeight: 8 - }, state: { - hovered: { - color: foreground(layer, "hovered"), + let layer = colorScheme.middle + return { + message: { + ...text(layer, "sans", { size: "xs" }), + margin: { left: headerPadding, right: headerPadding }, }, - }, - }) + actionMessage: interactive({ + base: { + ...text(layer, "sans", { size: "xs" }), + margin: { left: headerPadding, top: 6, bottom: 6 } + }, state: { + hovered: { + color: foreground(layer, "hovered"), + } + } + }), + dismissButton: interactive({ + base: { + color: foreground(layer), + iconWidth: 8, + iconHeight: 8, + buttonWidth: 8, + buttonHeight: 8 + }, state: { + hovered: { + color: foreground(layer, "hovered"), + }, + }, + }) - } + } } diff --git a/styles/src/styleTree/welcome.ts b/styles/src/styleTree/welcome.ts index 7ba7b30430..f0e4badf3f 100644 --- a/styles/src/styleTree/welcome.ts +++ b/styles/src/styleTree/welcome.ts @@ -1,133 +1,133 @@ import { ColorScheme } from "../theme/colorScheme" import { withOpacity } from "../theme/color" import { - border, - background, - foreground, - text, - TextProperties, - svg, + border, + background, + foreground, + text, + TextProperties, + svg, } from "./components" -import { interactive } from "./interactive" +import { interactive } from "../element/interactive" export default function welcome(colorScheme: ColorScheme) { - let layer = colorScheme.highest + let layer = colorScheme.highest - let checkboxBase = { - cornerRadius: 4, - padding: { - left: 3, - right: 3, - top: 3, - bottom: 3, - }, - // shadow: colorScheme.popoverShadow, - border: border(layer), - margin: { - right: 8, - top: 5, - bottom: 5, - }, - } - - let interactive_text_size: TextProperties = { size: "sm" } - - return { - pageWidth: 320, - logo: svg(foreground(layer, "default"), "icons/logo_96.svg", 64, 64), - logoSubheading: { - ...text(layer, "sans", "variant", { size: "md" }), - margin: { - top: 10, - bottom: 7, - }, - }, - buttonGroup: { - margin: { - top: 8, - bottom: 16, - }, - }, - headingGroup: { - margin: { - top: 8, - bottom: 12, - }, - }, - checkboxGroup: { - border: border(layer, "variant"), - background: withOpacity(background(layer, "hovered"), 0.25), - cornerRadius: 4, - padding: { - left: 12, - top: 2, - bottom: 2, - }, - }, - button: interactive({ - base: { - background: background(layer), - border: border(layer, "active"), + let checkboxBase = { cornerRadius: 4, - margin: { - top: 4, - bottom: 4, - }, padding: { - top: 3, - bottom: 3, - left: 7, - right: 7, + left: 3, + right: 3, + top: 3, + bottom: 3, }, - ...text(layer, "sans", "default", interactive_text_size) - }, state: { - hovered: { - ...text(layer, "sans", "default", interactive_text_size), - background: background(layer, "hovered"), - } - } - }), + // shadow: colorScheme.popoverShadow, + border: border(layer), + margin: { + right: 8, + top: 5, + bottom: 5, + }, + } - usageNote: { - ...text(layer, "sans", "variant", { size: "2xs" }), - padding: { - top: -4, - }, - }, - checkboxContainer: { - margin: { - top: 4, - }, - padding: { - bottom: 8, - }, - }, - checkbox: { - label: { - ...text(layer, "sans", interactive_text_size), - // Also supports margin, container, border, etc. - }, - icon: svg(foreground(layer, "on"), "icons/check_12.svg", 12, 12), - default: { - ...checkboxBase, - background: background(layer, "default"), - border: border(layer, "active"), - }, - checked: { - ...checkboxBase, - background: background(layer, "hovered"), - border: border(layer, "active"), - }, - hovered: { - ...checkboxBase, - background: background(layer, "hovered"), - border: border(layer, "active"), - }, - hoveredAndChecked: { - ...checkboxBase, - background: background(layer, "hovered"), - border: border(layer, "active"), - }, - }, - } + let interactive_text_size: TextProperties = { size: "sm" } + + return { + pageWidth: 320, + logo: svg(foreground(layer, "default"), "icons/logo_96.svg", 64, 64), + logoSubheading: { + ...text(layer, "sans", "variant", { size: "md" }), + margin: { + top: 10, + bottom: 7, + }, + }, + buttonGroup: { + margin: { + top: 8, + bottom: 16, + }, + }, + headingGroup: { + margin: { + top: 8, + bottom: 12, + }, + }, + checkboxGroup: { + border: border(layer, "variant"), + background: withOpacity(background(layer, "hovered"), 0.25), + cornerRadius: 4, + padding: { + left: 12, + top: 2, + bottom: 2, + }, + }, + button: interactive({ + base: { + background: background(layer), + border: border(layer, "active"), + cornerRadius: 4, + margin: { + top: 4, + bottom: 4, + }, + padding: { + top: 3, + bottom: 3, + left: 7, + right: 7, + }, + ...text(layer, "sans", "default", interactive_text_size) + }, state: { + hovered: { + ...text(layer, "sans", "default", interactive_text_size), + background: background(layer, "hovered"), + } + } + }), + + usageNote: { + ...text(layer, "sans", "variant", { size: "2xs" }), + padding: { + top: -4, + }, + }, + checkboxContainer: { + margin: { + top: 4, + }, + padding: { + bottom: 8, + }, + }, + checkbox: { + label: { + ...text(layer, "sans", interactive_text_size), + // Also supports margin, container, border, etc. + }, + icon: svg(foreground(layer, "on"), "icons/check_12.svg", 12, 12), + default: { + ...checkboxBase, + background: background(layer, "default"), + border: border(layer, "active"), + }, + checked: { + ...checkboxBase, + background: background(layer, "hovered"), + border: border(layer, "active"), + }, + hovered: { + ...checkboxBase, + background: background(layer, "hovered"), + border: border(layer, "active"), + }, + hoveredAndChecked: { + ...checkboxBase, + background: background(layer, "hovered"), + border: border(layer, "active"), + }, + }, + } } diff --git a/styles/src/styleTree/workspace.ts b/styles/src/styleTree/workspace.ts index fcada68a28..fa2d337592 100644 --- a/styles/src/styleTree/workspace.ts +++ b/styles/src/styleTree/workspace.ts @@ -2,383 +2,383 @@ import { ColorScheme } from "../theme/colorScheme" import { withOpacity } from "../theme/color" import { toggleable } from "./toggle" import { - background, - border, - borderColor, - foreground, - svg, - text, + background, + border, + borderColor, + foreground, + svg, + text, } from "./components" import statusBar from "./statusBar" import tabBar from "./tabBar" -import { interactive } from "./interactive" +import { interactive } from "../element/interactive" import merge from 'ts-deepmerge'; export default function workspace(colorScheme: ColorScheme) { - const layer = colorScheme.lowest - const isLight = colorScheme.isLight - const itemSpacing = 8 - const titlebarButton = toggleable(interactive({ - base: { - cornerRadius: 6, - padding: { - top: 1, - bottom: 1, - left: 8, - right: 8, - }, - ...text(layer, "sans", "variant", { size: "xs" }), - background: background(layer, "variant"), - border: border(layer), - }, state: { - hovered: { - ...text(layer, "sans", "variant", "hovered", { size: "xs" }), - background: background(layer, "variant", "hovered"), - border: border(layer, "variant", "hovered"), - }, - clicked: { - ...text(layer, "sans", "variant", "pressed", { size: "xs" }), - background: background(layer, "variant", "pressed"), - border: border(layer, "variant", "pressed"), - } - } - }), - { - default: { - ...text(layer, "sans", "variant", "active", { size: "xs" }), - background: background(layer, "variant", "active"), - border: border(layer, "variant", "active"), - } - }, - ); - const avatarWidth = 18 - const avatarOuterWidth = avatarWidth + 4 - const followerAvatarWidth = 14 - const followerAvatarOuterWidth = followerAvatarWidth + 4 - - return { - background: background(colorScheme.lowest), - blankPane: { - logoContainer: { - width: 256, - height: 256, - }, - logo: svg( - withOpacity("#000000", colorScheme.isLight ? 0.6 : 0.8), - "icons/logo_96.svg", - 256, - 256 - ), - - logoShadow: svg( - withOpacity( - colorScheme.isLight - ? "#FFFFFF" - : colorScheme.lowest.base.default.background, - colorScheme.isLight ? 1 : 0.6 - ), - "icons/logo_96.svg", - 256, - 256 - ), - keyboardHints: { - margin: { - top: 96, - }, - cornerRadius: 4, - }, - keyboardHint: - interactive({ - base: { - ...text(layer, "sans", "variant", { size: "sm" }), - padding: { - top: 3, - left: 8, - right: 8, - bottom: 3, - }, - cornerRadius: 8 - }, state: { - hovered: { - ...text(layer, "sans", "active", { size: "sm" }), - } - } - }), - - keyboardHintWidth: 320, - }, - joiningProjectAvatar: { - cornerRadius: 40, - width: 80, - }, - joiningProjectMessage: { - padding: 12, - ...text(layer, "sans", { size: "lg" }), - }, - externalLocationMessage: { - background: background(colorScheme.middle, "accent"), - border: border(colorScheme.middle, "accent"), - cornerRadius: 6, - padding: 12, - margin: { bottom: 8, right: 8 }, - ...text(colorScheme.middle, "sans", "accent", { size: "xs" }), - }, - leaderBorderOpacity: 0.7, - leaderBorderWidth: 2.0, - tabBar: tabBar(colorScheme), - modal: { - margin: { - bottom: 52, - top: 52, - }, - cursor: "Arrow", - }, - zoomedBackground: { - cursor: "Arrow", - background: isLight - ? withOpacity(background(colorScheme.lowest), 0.8) - : withOpacity(background(colorScheme.highest), 0.6), - }, - zoomedPaneForeground: { - margin: 16, - shadow: colorScheme.modalShadow, - border: border(colorScheme.lowest, { overlay: true }), - }, - zoomedPanelForeground: { - margin: 16, - border: border(colorScheme.lowest, { overlay: true }), - }, - dock: { - left: { - border: border(layer, { right: true }), - }, - bottom: { - border: border(layer, { top: true }), - }, - right: { - border: border(layer, { left: true }), - }, - }, - paneDivider: { - color: borderColor(layer), - width: 1, - }, - statusBar: statusBar(colorScheme), - titlebar: { - itemSpacing, - facePileSpacing: 2, - height: 33, // 32px + 1px border. It's important the content area of the titlebar is evenly sized to vertically center avatar images. - background: background(layer), - border: border(layer, { bottom: true }), - padding: { - left: 80, - right: itemSpacing, - }, - - // Project - title: text(layer, "sans", "variant"), - highlight_color: text(layer, "sans", "active").color, - - // Collaborators - leaderAvatar: { - width: avatarWidth, - outerWidth: avatarOuterWidth, - cornerRadius: avatarWidth / 2, - outerCornerRadius: avatarOuterWidth / 2, - }, - followerAvatar: { - width: followerAvatarWidth, - outerWidth: followerAvatarOuterWidth, - cornerRadius: followerAvatarWidth / 2, - outerCornerRadius: followerAvatarOuterWidth / 2, - }, - inactiveAvatarGrayscale: true, - followerAvatarOverlap: 8, - leaderSelection: { - margin: { - top: 4, - bottom: 4, - }, - padding: { - left: 2, - right: 2, - top: 2, - bottom: 2, - }, - cornerRadius: 6, - }, - avatarRibbon: { - height: 3, - width: 12, - // TODO: Chore: Make avatarRibbon colors driven by the theme rather than being hard coded. - }, - - // Sign in buttom - // FlatButton, Variant - signInPrompt: - merge(titlebarButton, - { - inactive: { - default: { - margin: { - left: itemSpacing, - }, - } - } - }), - - - // Offline Indicator - offlineIcon: { - color: foreground(layer, "variant"), - width: 16, - margin: { - left: itemSpacing, - }, - padding: { - right: 4, - }, - }, - - // Notice that the collaboration server is out of date - outdatedWarning: { - ...text(layer, "sans", "warning", { size: "xs" }), - background: withOpacity(background(layer, "warning"), 0.3), - border: border(layer, "warning"), - margin: { - left: itemSpacing, - }, - padding: { - left: 8, - right: 8, - }, - cornerRadius: 6, - }, - callControl: interactive({ + const layer = colorScheme.lowest + const isLight = colorScheme.isLight + const itemSpacing = 8 + const titlebarButton = toggleable(interactive({ base: { - cornerRadius: 6, - color: foreground(layer, "variant"), - iconWidth: 12, - buttonWidth: 20, - }, state: { - hovered: { - background: background(layer, "variant", "hovered"), - color: foreground(layer, "variant", "hovered"), - }, - } - }), - toggleContactsButton: toggleable(interactive({ - base: { - margin: { left: itemSpacing }, - cornerRadius: 6, - color: foreground(layer, "variant"), - iconWidth: 14, - buttonWidth: 20, - }, - state: { - clicked: { - background: background(layer, "variant", "pressed"), - color: foreground(layer, "variant", "pressed"), - }, - hovered: { - background: background(layer, "variant", "hovered"), - color: foreground(layer, "variant", "hovered"), - } - } - }), - { - default: { - background: background(layer, "variant", "active"), - color: foreground(layer, "variant", "active") - } - }, - ), - userMenuButton: merge(titlebarButton, { - inactive: { - default: { - buttonWidth: 20, - iconWidth: 12 - } - }, active: { // posiewic: these properties are not currently set on main - default: { - iconWidth: 12, - button_width: 20, - } - } - }), - - - toggleContactsBadge: { - cornerRadius: 3, - padding: 2, - margin: { top: 3, left: 3 }, - border: border(layer), - background: foreground(layer, "accent"), - }, - shareButton: { - ...titlebarButton, - }, - }, - - toolbar: { - height: 34, - background: background(colorScheme.highest), - border: border(colorScheme.highest, { bottom: true }), - itemSpacing: 8, - navButton: interactive( - { - base: { - color: foreground(colorScheme.highest, "on"), - iconWidth: 12, - buttonWidth: 24, cornerRadius: 6, - }, state: { + padding: { + top: 1, + bottom: 1, + left: 8, + right: 8, + }, + ...text(layer, "sans", "variant", { size: "xs" }), + background: background(layer, "variant"), + border: border(layer), + }, state: { hovered: { - color: foreground(colorScheme.highest, "on", "hovered"), - background: background( - colorScheme.highest, - "on", - "hovered" - ), + ...text(layer, "sans", "variant", "hovered", { size: "xs" }), + background: background(layer, "variant", "hovered"), + border: border(layer, "variant", "hovered"), }, - disabled: { - color: foreground(colorScheme.highest, "on", "disabled"), - }, - } - }), - padding: { left: 8, right: 8, top: 4, bottom: 4 }, - }, - breadcrumbHeight: 24, - breadcrumbs: interactive({ - base: { - ...text(colorScheme.highest, "sans", "variant"), - cornerRadius: 6, - padding: { - left: 6, - right: 6, + clicked: { + ...text(layer, "sans", "variant", "pressed", { size: "xs" }), + background: background(layer, "variant", "pressed"), + border: border(layer, "variant", "pressed"), + } } - }, state: { - hovered: { - color: foreground(colorScheme.highest, "on", "hovered"), - background: background(colorScheme.highest, "on", "hovered"), - }, - } }), - disconnectedOverlay: { - ...text(layer, "sans"), - background: withOpacity(background(layer), 0.8), - }, - notification: { - margin: { top: 10 }, - background: background(colorScheme.middle), - cornerRadius: 6, - padding: 12, - border: border(colorScheme.middle), - shadow: colorScheme.popoverShadow, - }, - notifications: { - width: 400, - margin: { right: 10, bottom: 10 }, - }, - dropTargetOverlayColor: withOpacity(foreground(layer, "variant"), 0.5), - } + { + default: { + ...text(layer, "sans", "variant", "active", { size: "xs" }), + background: background(layer, "variant", "active"), + border: border(layer, "variant", "active"), + } + }, + ); + const avatarWidth = 18 + const avatarOuterWidth = avatarWidth + 4 + const followerAvatarWidth = 14 + const followerAvatarOuterWidth = followerAvatarWidth + 4 + + return { + background: background(colorScheme.lowest), + blankPane: { + logoContainer: { + width: 256, + height: 256, + }, + logo: svg( + withOpacity("#000000", colorScheme.isLight ? 0.6 : 0.8), + "icons/logo_96.svg", + 256, + 256 + ), + + logoShadow: svg( + withOpacity( + colorScheme.isLight + ? "#FFFFFF" + : colorScheme.lowest.base.default.background, + colorScheme.isLight ? 1 : 0.6 + ), + "icons/logo_96.svg", + 256, + 256 + ), + keyboardHints: { + margin: { + top: 96, + }, + cornerRadius: 4, + }, + keyboardHint: + interactive({ + base: { + ...text(layer, "sans", "variant", { size: "sm" }), + padding: { + top: 3, + left: 8, + right: 8, + bottom: 3, + }, + cornerRadius: 8 + }, state: { + hovered: { + ...text(layer, "sans", "active", { size: "sm" }), + } + } + }), + + keyboardHintWidth: 320, + }, + joiningProjectAvatar: { + cornerRadius: 40, + width: 80, + }, + joiningProjectMessage: { + padding: 12, + ...text(layer, "sans", { size: "lg" }), + }, + externalLocationMessage: { + background: background(colorScheme.middle, "accent"), + border: border(colorScheme.middle, "accent"), + cornerRadius: 6, + padding: 12, + margin: { bottom: 8, right: 8 }, + ...text(colorScheme.middle, "sans", "accent", { size: "xs" }), + }, + leaderBorderOpacity: 0.7, + leaderBorderWidth: 2.0, + tabBar: tabBar(colorScheme), + modal: { + margin: { + bottom: 52, + top: 52, + }, + cursor: "Arrow", + }, + zoomedBackground: { + cursor: "Arrow", + background: isLight + ? withOpacity(background(colorScheme.lowest), 0.8) + : withOpacity(background(colorScheme.highest), 0.6), + }, + zoomedPaneForeground: { + margin: 16, + shadow: colorScheme.modalShadow, + border: border(colorScheme.lowest, { overlay: true }), + }, + zoomedPanelForeground: { + margin: 16, + border: border(colorScheme.lowest, { overlay: true }), + }, + dock: { + left: { + border: border(layer, { right: true }), + }, + bottom: { + border: border(layer, { top: true }), + }, + right: { + border: border(layer, { left: true }), + }, + }, + paneDivider: { + color: borderColor(layer), + width: 1, + }, + statusBar: statusBar(colorScheme), + titlebar: { + itemSpacing, + facePileSpacing: 2, + height: 33, // 32px + 1px border. It's important the content area of the titlebar is evenly sized to vertically center avatar images. + background: background(layer), + border: border(layer, { bottom: true }), + padding: { + left: 80, + right: itemSpacing, + }, + + // Project + title: text(layer, "sans", "variant"), + highlight_color: text(layer, "sans", "active").color, + + // Collaborators + leaderAvatar: { + width: avatarWidth, + outerWidth: avatarOuterWidth, + cornerRadius: avatarWidth / 2, + outerCornerRadius: avatarOuterWidth / 2, + }, + followerAvatar: { + width: followerAvatarWidth, + outerWidth: followerAvatarOuterWidth, + cornerRadius: followerAvatarWidth / 2, + outerCornerRadius: followerAvatarOuterWidth / 2, + }, + inactiveAvatarGrayscale: true, + followerAvatarOverlap: 8, + leaderSelection: { + margin: { + top: 4, + bottom: 4, + }, + padding: { + left: 2, + right: 2, + top: 2, + bottom: 2, + }, + cornerRadius: 6, + }, + avatarRibbon: { + height: 3, + width: 12, + // TODO: Chore: Make avatarRibbon colors driven by the theme rather than being hard coded. + }, + + // Sign in buttom + // FlatButton, Variant + signInPrompt: + merge(titlebarButton, + { + inactive: { + default: { + margin: { + left: itemSpacing, + }, + } + } + }), + + + // Offline Indicator + offlineIcon: { + color: foreground(layer, "variant"), + width: 16, + margin: { + left: itemSpacing, + }, + padding: { + right: 4, + }, + }, + + // Notice that the collaboration server is out of date + outdatedWarning: { + ...text(layer, "sans", "warning", { size: "xs" }), + background: withOpacity(background(layer, "warning"), 0.3), + border: border(layer, "warning"), + margin: { + left: itemSpacing, + }, + padding: { + left: 8, + right: 8, + }, + cornerRadius: 6, + }, + callControl: interactive({ + base: { + cornerRadius: 6, + color: foreground(layer, "variant"), + iconWidth: 12, + buttonWidth: 20, + }, state: { + hovered: { + background: background(layer, "variant", "hovered"), + color: foreground(layer, "variant", "hovered"), + }, + } + }), + toggleContactsButton: toggleable(interactive({ + base: { + margin: { left: itemSpacing }, + cornerRadius: 6, + color: foreground(layer, "variant"), + iconWidth: 14, + buttonWidth: 20, + }, + state: { + clicked: { + background: background(layer, "variant", "pressed"), + color: foreground(layer, "variant", "pressed"), + }, + hovered: { + background: background(layer, "variant", "hovered"), + color: foreground(layer, "variant", "hovered"), + } + } + }), + { + default: { + background: background(layer, "variant", "active"), + color: foreground(layer, "variant", "active") + } + }, + ), + userMenuButton: merge(titlebarButton, { + inactive: { + default: { + buttonWidth: 20, + iconWidth: 12 + } + }, active: { // posiewic: these properties are not currently set on main + default: { + iconWidth: 12, + button_width: 20, + } + } + }), + + + toggleContactsBadge: { + cornerRadius: 3, + padding: 2, + margin: { top: 3, left: 3 }, + border: border(layer), + background: foreground(layer, "accent"), + }, + shareButton: { + ...titlebarButton, + }, + }, + + toolbar: { + height: 34, + background: background(colorScheme.highest), + border: border(colorScheme.highest, { bottom: true }), + itemSpacing: 8, + navButton: interactive( + { + base: { + color: foreground(colorScheme.highest, "on"), + iconWidth: 12, + buttonWidth: 24, + cornerRadius: 6, + }, state: { + hovered: { + color: foreground(colorScheme.highest, "on", "hovered"), + background: background( + colorScheme.highest, + "on", + "hovered" + ), + }, + disabled: { + color: foreground(colorScheme.highest, "on", "disabled"), + }, + } + }), + padding: { left: 8, right: 8, top: 4, bottom: 4 }, + }, + breadcrumbHeight: 24, + breadcrumbs: interactive({ + base: { + ...text(colorScheme.highest, "sans", "variant"), + cornerRadius: 6, + padding: { + left: 6, + right: 6, + } + }, state: { + hovered: { + color: foreground(colorScheme.highest, "on", "hovered"), + background: background(colorScheme.highest, "on", "hovered"), + }, + } + }), + disconnectedOverlay: { + ...text(layer, "sans"), + background: withOpacity(background(layer), 0.8), + }, + notification: { + margin: { top: 10 }, + background: background(colorScheme.middle), + cornerRadius: 6, + padding: 12, + border: border(colorScheme.middle), + shadow: colorScheme.popoverShadow, + }, + notifications: { + width: 400, + margin: { right: 10, bottom: 10 }, + }, + dropTargetOverlayColor: withOpacity(foreground(layer, "variant"), 0.5), + } } diff --git a/styles/vitest.config.ts b/styles/vitest.config.ts new file mode 100644 index 0000000000..83bd50b9c6 --- /dev/null +++ b/styles/vitest.config.ts @@ -0,0 +1,8 @@ +import { configDefaults, defineConfig } from 'vitest/config' + +export default defineConfig({ + test: { + exclude: [...configDefaults.exclude, 'target/*'], + include: ['src/**/*.{spec,test}.ts'], + }, +}) From 1f3feacb2162db3a35699060727c43b062c882fb Mon Sep 17 00:00:00 2001 From: Nate Butler Date: Fri, 16 Jun 2023 00:37:08 -0400 Subject: [PATCH 36/56] Add path aliases --- styles/src/element/{interactive => }/index.ts | 0 .../{interactive => }/interactive.test.ts | 0 .../element/{interactive => }/interactive.ts | 0 styles/src/styleTree/assistant.ts | 2 +- styles/src/styleTree/commandPalette.ts | 2 +- styles/src/styleTree/contactList.ts | 2 +- styles/src/styleTree/contactNotification.ts | 2 +- styles/src/styleTree/contextMenu.ts | 2 +- styles/src/styleTree/copilot.ts | 2 +- styles/src/styleTree/editor.ts | 2 +- styles/src/styleTree/feedback.ts | 2 +- styles/src/styleTree/picker.ts | 2 +- styles/src/styleTree/projectPanel.ts | 2 +- styles/src/styleTree/search.ts | 2 +- .../styleTree/simpleMessageNotification.ts | 2 +- styles/src/styleTree/statusBar.ts | 2 +- styles/src/styleTree/tabBar.ts | 2 +- styles/src/styleTree/toolbarDropdownMenu.ts | 2 +- styles/src/styleTree/updateNotification.ts | 2 +- styles/src/styleTree/welcome.ts | 2 +- styles/src/styleTree/workspace.ts | 2 +- styles/tsconfig.json | 30 +++++++++++++++++-- 22 files changed, 46 insertions(+), 20 deletions(-) rename styles/src/element/{interactive => }/index.ts (100%) rename styles/src/element/{interactive => }/interactive.test.ts (100%) rename styles/src/element/{interactive => }/interactive.ts (100%) diff --git a/styles/src/element/interactive/index.ts b/styles/src/element/index.ts similarity index 100% rename from styles/src/element/interactive/index.ts rename to styles/src/element/index.ts diff --git a/styles/src/element/interactive/interactive.test.ts b/styles/src/element/interactive.test.ts similarity index 100% rename from styles/src/element/interactive/interactive.test.ts rename to styles/src/element/interactive.test.ts diff --git a/styles/src/element/interactive/interactive.ts b/styles/src/element/interactive.ts similarity index 100% rename from styles/src/element/interactive/interactive.ts rename to styles/src/element/interactive.ts diff --git a/styles/src/styleTree/assistant.ts b/styles/src/styleTree/assistant.ts index b31fe8169e..6ebf648481 100644 --- a/styles/src/styleTree/assistant.ts +++ b/styles/src/styleTree/assistant.ts @@ -1,7 +1,7 @@ import { ColorScheme } from "../theme/colorScheme" import { text, border, background, foreground } from "./components" import editor from "./editor" -import { interactive } from "../element/interactive" +import { interactive } from "../element" export default function assistant(colorScheme: ColorScheme) { const layer = colorScheme.highest diff --git a/styles/src/styleTree/commandPalette.ts b/styles/src/styleTree/commandPalette.ts index 081a0ba68c..8634d08a90 100644 --- a/styles/src/styleTree/commandPalette.ts +++ b/styles/src/styleTree/commandPalette.ts @@ -2,7 +2,7 @@ import { ColorScheme } from "../theme/colorScheme" import { withOpacity } from "../theme/color" import { text, background } from "./components" import { toggleable } from "./toggle" -import { interactive } from "../element/interactive" +import { interactive } from "../element" export default function commandPalette(colorScheme: ColorScheme) { let layer = colorScheme.highest diff --git a/styles/src/styleTree/contactList.ts b/styles/src/styleTree/contactList.ts index 3b95a3c885..f038d79716 100644 --- a/styles/src/styleTree/contactList.ts +++ b/styles/src/styleTree/contactList.ts @@ -1,7 +1,7 @@ import { ColorScheme } from "../theme/colorScheme" import { background, border, borderColor, foreground, text } from "./components" import { toggleable } from "./toggle" -import { interactive } from "../element/interactive" +import { interactive } from "../element" export default function contactsPanel(colorScheme: ColorScheme) { const nameMargin = 8 const sidePadding = 12 diff --git a/styles/src/styleTree/contactNotification.ts b/styles/src/styleTree/contactNotification.ts index 4d57239005..7de3f2fe0c 100644 --- a/styles/src/styleTree/contactNotification.ts +++ b/styles/src/styleTree/contactNotification.ts @@ -1,6 +1,6 @@ import { ColorScheme } from "../theme/colorScheme" import { background, foreground, text } from "./components" -import { interactive } from "../element/interactive" +import { interactive } from "../element" const avatarSize = 12 const headerPadding = 8 diff --git a/styles/src/styleTree/contextMenu.ts b/styles/src/styleTree/contextMenu.ts index 51bff9de7f..21231ccac9 100644 --- a/styles/src/styleTree/contextMenu.ts +++ b/styles/src/styleTree/contextMenu.ts @@ -1,6 +1,6 @@ import { ColorScheme } from "../theme/colorScheme" import { background, border, borderColor, text } from "./components" -import { interactive } from "../element/interactive" +import { interactive } from "../element" import { toggleable } from "./toggle" export default function contextMenu(colorScheme: ColorScheme) { diff --git a/styles/src/styleTree/copilot.ts b/styles/src/styleTree/copilot.ts index 27ef5ec11c..9229761414 100644 --- a/styles/src/styleTree/copilot.ts +++ b/styles/src/styleTree/copilot.ts @@ -1,6 +1,6 @@ import { ColorScheme } from "../theme/colorScheme" import { background, border, foreground, svg, text } from "./components" -import { interactive } from "../element/interactive" +import { interactive } from "../element" export default function copilot(colorScheme: ColorScheme) { let layer = colorScheme.middle diff --git a/styles/src/styleTree/editor.ts b/styles/src/styleTree/editor.ts index 3612a0acd1..5a55341933 100644 --- a/styles/src/styleTree/editor.ts +++ b/styles/src/styleTree/editor.ts @@ -4,7 +4,7 @@ import { background, border, borderColor, foreground, text } from "./components" import hoverPopover from "./hoverPopover" import { buildSyntax } from "../theme/syntax" -import { interactive } from "../element/interactive" +import { interactive } from "../element" import { toggleable } from "./toggle" export default function editor(colorScheme: ColorScheme) { diff --git a/styles/src/styleTree/feedback.ts b/styles/src/styleTree/feedback.ts index 19a8f1e4c7..4f0e99844d 100644 --- a/styles/src/styleTree/feedback.ts +++ b/styles/src/styleTree/feedback.ts @@ -1,6 +1,6 @@ import { ColorScheme } from "../theme/colorScheme" import { background, border, text } from "./components" -import { interactive } from "../element/interactive" +import { interactive } from "../element" export default function feedback(colorScheme: ColorScheme) { let layer = colorScheme.highest diff --git a/styles/src/styleTree/picker.ts b/styles/src/styleTree/picker.ts index 3bcdae584f..940059eb43 100644 --- a/styles/src/styleTree/picker.ts +++ b/styles/src/styleTree/picker.ts @@ -2,7 +2,7 @@ import { ColorScheme } from "../theme/colorScheme" import { withOpacity } from "../theme/color" import { background, border, text } from "./components" import { toggleable } from "./toggle" -import { interactive } from "../element/interactive" +import { interactive } from "../element" export default function picker(colorScheme: ColorScheme): any { let layer = colorScheme.lowest diff --git a/styles/src/styleTree/projectPanel.ts b/styles/src/styleTree/projectPanel.ts index 132dfe102c..5df3988be6 100644 --- a/styles/src/styleTree/projectPanel.ts +++ b/styles/src/styleTree/projectPanel.ts @@ -1,7 +1,7 @@ import { ColorScheme } from "../theme/colorScheme" import { withOpacity } from "../theme/color" import { background, border, foreground, text } from "./components" -import { interactive } from "../element/interactive" +import { interactive } from "../element" import { toggleable } from "./toggle" export default function projectPanel(colorScheme: ColorScheme) { const { isLight } = colorScheme diff --git a/styles/src/styleTree/search.ts b/styles/src/styleTree/search.ts index 1f63d2740b..64f17e7d74 100644 --- a/styles/src/styleTree/search.ts +++ b/styles/src/styleTree/search.ts @@ -1,7 +1,7 @@ import { ColorScheme } from "../theme/colorScheme" import { withOpacity } from "../theme/color" import { background, border, foreground, text } from "./components" -import { interactive } from "../element/interactive" +import { interactive } from "../element" import { toggleable } from "./toggle" export default function search(colorScheme: ColorScheme) { diff --git a/styles/src/styleTree/simpleMessageNotification.ts b/styles/src/styleTree/simpleMessageNotification.ts index 4c2abfcf9d..404be2da7e 100644 --- a/styles/src/styleTree/simpleMessageNotification.ts +++ b/styles/src/styleTree/simpleMessageNotification.ts @@ -1,6 +1,6 @@ import { ColorScheme } from "../theme/colorScheme" import { background, border, foreground, text } from "./components" -import { interactive } from "../element/interactive" +import { interactive } from "../element" const headerPadding = 8 diff --git a/styles/src/styleTree/statusBar.ts b/styles/src/styleTree/statusBar.ts index ee78f5e6b3..30f933de8c 100644 --- a/styles/src/styleTree/statusBar.ts +++ b/styles/src/styleTree/statusBar.ts @@ -1,6 +1,6 @@ import { ColorScheme } from "../theme/colorScheme" import { background, border, foreground, text } from "./components" -import { interactive } from "../element/interactive" +import { interactive } from "../element" import { toggleable } from "./toggle" export default function statusBar(colorScheme: ColorScheme) { let layer = colorScheme.lowest diff --git a/styles/src/styleTree/tabBar.ts b/styles/src/styleTree/tabBar.ts index 8011a70772..ae2d14bfd6 100644 --- a/styles/src/styleTree/tabBar.ts +++ b/styles/src/styleTree/tabBar.ts @@ -2,7 +2,7 @@ import { ColorScheme } from "../theme/colorScheme" import { withOpacity } from "../theme/color" import { text, border, background, foreground } from "./components" import { toggleable } from "./toggle" -import { interactive } from "../element/interactive" +import { interactive } from "../element" export default function tabBar(colorScheme: ColorScheme) { const height = 32 diff --git a/styles/src/styleTree/toolbarDropdownMenu.ts b/styles/src/styleTree/toolbarDropdownMenu.ts index 0bb3958dc8..bb3e8eda0c 100644 --- a/styles/src/styleTree/toolbarDropdownMenu.ts +++ b/styles/src/styleTree/toolbarDropdownMenu.ts @@ -1,6 +1,6 @@ import { ColorScheme } from "../theme/colorScheme" import { background, border, text } from "./components" -import { interactive } from "../element/interactive" +import { interactive } from "../element" import { toggleable } from "./toggle" export default function dropdownMenu(colorScheme: ColorScheme) { let layer = colorScheme.middle diff --git a/styles/src/styleTree/updateNotification.ts b/styles/src/styleTree/updateNotification.ts index a7a5aaabaa..0cef7fa805 100644 --- a/styles/src/styleTree/updateNotification.ts +++ b/styles/src/styleTree/updateNotification.ts @@ -1,6 +1,6 @@ import { ColorScheme } from "../theme/colorScheme" import { foreground, text } from "./components" -import { interactive } from "../element/interactive" +import { interactive } from "../element" const headerPadding = 8 diff --git a/styles/src/styleTree/welcome.ts b/styles/src/styleTree/welcome.ts index f0e4badf3f..a0d599b747 100644 --- a/styles/src/styleTree/welcome.ts +++ b/styles/src/styleTree/welcome.ts @@ -8,7 +8,7 @@ import { TextProperties, svg, } from "./components" -import { interactive } from "../element/interactive" +import { interactive } from "../element" export default function welcome(colorScheme: ColorScheme) { let layer = colorScheme.highest diff --git a/styles/src/styleTree/workspace.ts b/styles/src/styleTree/workspace.ts index fa2d337592..1045be1a9a 100644 --- a/styles/src/styleTree/workspace.ts +++ b/styles/src/styleTree/workspace.ts @@ -11,7 +11,7 @@ import { } from "./components" import statusBar from "./statusBar" import tabBar from "./tabBar" -import { interactive } from "../element/interactive" +import { interactive } from "../element" import merge from 'ts-deepmerge'; export default function workspace(colorScheme: ColorScheme) { const layer = colorScheme.lowest diff --git a/styles/tsconfig.json b/styles/tsconfig.json index 6d24728a0a..051626adbc 100644 --- a/styles/tsconfig.json +++ b/styles/tsconfig.json @@ -20,7 +20,33 @@ "noFallthroughCasesInSwitch": false, "experimentalDecorators": true, "strictPropertyInitialization": false, - "skipLibCheck": true + "skipLibCheck": true, + "baseUrl": ".", + "paths": { + "@/*": [ + "./*" + ], + "@element/*": [ + "./src/element/*" + ], + "@component/*": [ + "./src/component/*" + ], + "@styleTree/*": [ + "./src/styleTree/*" + ], + "@theme/*": [ + "./src/theme/*" + ], + "@themes/*": [ + "./src/themes/*" + ], + "@util/*": [ + "./src/util/*" + ] + } }, - "exclude": ["node_modules"] + "exclude": [ + "node_modules" + ] } From 5c034ab63c2520e8fe0a6c27f9602dc0851662c6 Mon Sep 17 00:00:00 2001 From: Nate Butler Date: Fri, 16 Jun 2023 01:01:51 -0400 Subject: [PATCH 37/56] Format --- styles/src/element/index.ts | 2 +- styles/src/element/interactive.test.ts | 59 ++- styles/src/element/interactive.ts | 76 +-- styles/src/styleTree/app.ts | 1 - styles/src/styleTree/assistant.ts | 25 +- styles/src/styleTree/commandPalette.ts | 22 +- styles/src/styleTree/components.ts | 434 +++++++++--------- styles/src/styleTree/contactList.ts | 106 +++-- styles/src/styleTree/contactNotification.ts | 31 +- styles/src/styleTree/contextMenu.ts | 60 +-- styles/src/styleTree/copilot.ts | 66 ++- styles/src/styleTree/editor.ts | 67 +-- styles/src/styleTree/feedback.ts | 7 +- styles/src/styleTree/picker.ts | 54 ++- styles/src/styleTree/projectPanel.ts | 37 +- styles/src/styleTree/search.ts | 72 +-- .../styleTree/simpleMessageNotification.ts | 12 +- styles/src/styleTree/statusBar.ts | 134 +++--- styles/src/styleTree/tabBar.ts | 29 +- styles/src/styleTree/toggle.ts | 64 +-- styles/src/styleTree/toolbarDropdownMenu.ts | 54 ++- styles/src/styleTree/updateNotification.ts | 17 +- styles/src/styleTree/welcome.ts | 9 +- styles/src/styleTree/workspace.ts | 235 +++++----- styles/src/theme/tokens/colorScheme.ts | 56 ++- styles/src/theme/tokens/layer.ts | 33 +- styles/src/theme/tokens/players.ts | 18 +- styles/src/theme/tokens/token.ts | 9 +- styles/src/utils/slugify.ts | 11 +- styles/tsconfig.json | 32 +- styles/vitest.config.ts | 6 +- 31 files changed, 978 insertions(+), 860 deletions(-) diff --git a/styles/src/element/index.ts b/styles/src/element/index.ts index 0ead902eb9..ad58b89e0e 100644 --- a/styles/src/element/index.ts +++ b/styles/src/element/index.ts @@ -1,3 +1,3 @@ -import { interactive } from "./interactive"; +import { interactive } from "./interactive" export { interactive } diff --git a/styles/src/element/interactive.test.ts b/styles/src/element/interactive.test.ts index aa716e998e..b0cc57875f 100644 --- a/styles/src/element/interactive.test.ts +++ b/styles/src/element/interactive.test.ts @@ -1,59 +1,56 @@ -import { NOT_ENOUGH_STATES_ERROR, NO_DEFAULT_OR_BASE_ERROR, interactive } from './interactive' -import { describe, it, expect } from 'vitest' - -describe('interactive', () => { - - it('creates an Interactive with base properties and states', () => { +import { + NOT_ENOUGH_STATES_ERROR, + NO_DEFAULT_OR_BASE_ERROR, + interactive, +} from "./interactive" +import { describe, it, expect } from "vitest" +describe("interactive", () => { + it("creates an Interactive with base properties and states", () => { const result = interactive({ - base: { fontSize: 10, color: '#FFFFFF' }, + base: { fontSize: 10, color: "#FFFFFF" }, state: { - hovered: { color: '#EEEEEE' }, - clicked: { color: '#CCCCCC' }, - } + hovered: { color: "#EEEEEE" }, + clicked: { color: "#CCCCCC" }, + }, }) expect(result).toEqual({ - default: { color: '#FFFFFF', fontSize: 10 }, - hovered: { color: '#EEEEEE', fontSize: 10 }, - clicked: { color: '#CCCCCC', fontSize: 10 }, + default: { color: "#FFFFFF", fontSize: 10 }, + hovered: { color: "#EEEEEE", fontSize: 10 }, + clicked: { color: "#CCCCCC", fontSize: 10 }, }) }) - it('creates an Interactive with no base properties', () => { - + it("creates an Interactive with no base properties", () => { const result = interactive({ state: { - default: { color: '#FFFFFF', fontSize: 10 }, - hovered: { color: '#EEEEEE' }, - clicked: { color: '#CCCCCC' }, - } + default: { color: "#FFFFFF", fontSize: 10 }, + hovered: { color: "#EEEEEE" }, + clicked: { color: "#CCCCCC" }, + }, }) expect(result).toEqual({ - default: { color: '#FFFFFF', fontSize: 10 }, - hovered: { color: '#EEEEEE', fontSize: 10 }, - clicked: { color: '#CCCCCC', fontSize: 10 }, + default: { color: "#FFFFFF", fontSize: 10 }, + hovered: { color: "#EEEEEE", fontSize: 10 }, + clicked: { color: "#CCCCCC", fontSize: 10 }, }) }) - it('throws error when both default and base are missing', () => { + it("throws error when both default and base are missing", () => { const state = { - hovered: { color: 'blue' }, + hovered: { color: "blue" }, } - expect(() => interactive({ state })).toThrow( - NO_DEFAULT_OR_BASE_ERROR - ) + expect(() => interactive({ state })).toThrow(NO_DEFAULT_OR_BASE_ERROR) }) - it('throws error when no other state besides default is present', () => { + it("throws error when no other state besides default is present", () => { const state = { default: { fontSize: 10 }, } - expect(() => interactive({ state })).toThrow( - NOT_ENOUGH_STATES_ERROR - ) + expect(() => interactive({ state })).toThrow(NOT_ENOUGH_STATES_ERROR) }) }) diff --git a/styles/src/element/interactive.ts b/styles/src/element/interactive.ts index 23cd2a8c15..5d9772d313 100644 --- a/styles/src/element/interactive.ts +++ b/styles/src/element/interactive.ts @@ -1,20 +1,27 @@ import merge from "ts-deepmerge" -type InteractiveState = "default" | "hovered" | "clicked" | "selected" | "disabled"; +type InteractiveState = + | "default" + | "hovered" + | "clicked" + | "selected" + | "disabled" type Interactive = { - default: T, - hovered?: T, - clicked?: T, - selected?: T, - disabled?: T, -}; + default: T + hovered?: T + clicked?: T + selected?: T + disabled?: T +} -export const NO_DEFAULT_OR_BASE_ERROR = "An interactive object must have a default state, or a base property." -export const NOT_ENOUGH_STATES_ERROR = "An interactive object must have a default and at least one other state." +export const NO_DEFAULT_OR_BASE_ERROR = + "An interactive object must have a default state, or a base property." +export const NOT_ENOUGH_STATES_ERROR = + "An interactive object must have a default and at least one other state." interface InteractiveProps { - base?: T, + base?: T state: Partial> } @@ -29,46 +36,61 @@ interface InteractiveProps { * @param state Object containing optional modified fields to be included in the resulting object for each state. * @returns Interactive object with fields from `base` and `state`. */ -export function interactive({ base, state }: InteractiveProps): Interactive { - if (!base && !state.default) throw new Error(NO_DEFAULT_OR_BASE_ERROR); +export function interactive({ + base, + state, +}: InteractiveProps): Interactive { + if (!base && !state.default) throw new Error(NO_DEFAULT_OR_BASE_ERROR) - let defaultState: T; + let defaultState: T if (state.default && base) { - defaultState = merge(base, state.default) as T; + defaultState = merge(base, state.default) as T } else { - defaultState = base ? base : state.default as T; + defaultState = base ? base : (state.default as T) } let interactiveObj: Interactive = { default: defaultState, - }; + } - let stateCount = 0; + let stateCount = 0 if (state.hovered !== undefined) { - interactiveObj.hovered = merge(interactiveObj.default, state.hovered) as T; - stateCount++; + interactiveObj.hovered = merge( + interactiveObj.default, + state.hovered + ) as T + stateCount++ } if (state.clicked !== undefined) { - interactiveObj.clicked = merge(interactiveObj.default, state.clicked) as T; - stateCount++; + interactiveObj.clicked = merge( + interactiveObj.default, + state.clicked + ) as T + stateCount++ } if (state.selected !== undefined) { - interactiveObj.selected = merge(interactiveObj.default, state.selected) as T; - stateCount++; + interactiveObj.selected = merge( + interactiveObj.default, + state.selected + ) as T + stateCount++ } if (state.disabled !== undefined) { - interactiveObj.disabled = merge(interactiveObj.default, state.disabled) as T; - stateCount++; + interactiveObj.disabled = merge( + interactiveObj.default, + state.disabled + ) as T + stateCount++ } if (stateCount < 1) { - throw new Error(NOT_ENOUGH_STATES_ERROR); + throw new Error(NOT_ENOUGH_STATES_ERROR) } - return interactiveObj; + return interactiveObj } diff --git a/styles/src/styleTree/app.ts b/styles/src/styleTree/app.ts index 6244cbae10..754443cc5f 100644 --- a/styles/src/styleTree/app.ts +++ b/styles/src/styleTree/app.ts @@ -1,4 +1,3 @@ -import { text } from "./components" import contactFinder from "./contactFinder" import contactsPopover from "./contactsPopover" import commandPalette from "./commandPalette" diff --git a/styles/src/styleTree/assistant.ts b/styles/src/styleTree/assistant.ts index 6ebf648481..163584cd6d 100644 --- a/styles/src/styleTree/assistant.ts +++ b/styles/src/styleTree/assistant.ts @@ -16,17 +16,27 @@ export default function assistant(colorScheme: ColorScheme) { background: editor(colorScheme).background, }, userSender: { - default: - { ...text(layer, "sans", "default", { size: "sm", weight: "bold" }) }, + default: { + ...text(layer, "sans", "default", { + size: "sm", + weight: "bold", + }), + }, }, assistantSender: { default: { - ...text(layer, "sans", "accent", { size: "sm", weight: "bold" }) + ...text(layer, "sans", "accent", { + size: "sm", + weight: "bold", + }), }, }, systemSender: { default: { - ...text(layer, "sans", "variant", { size: "sm", weight: "bold" }) + ...text(layer, "sans", "variant", { + size: "sm", + weight: "bold", + }), }, }, sentAt: { @@ -43,11 +53,12 @@ export default function assistant(colorScheme: ColorScheme) { padding: 4, cornerRadius: 4, ...text(layer, "sans", "default", { size: "xs" }), - }, state: { + }, + state: { hovered: { background: background(layer, "on", "hovered"), - } - } + }, + }, }), remainingTokens: { background: background(layer, "on"), diff --git a/styles/src/styleTree/commandPalette.ts b/styles/src/styleTree/commandPalette.ts index 8634d08a90..ae0aae2f81 100644 --- a/styles/src/styleTree/commandPalette.ts +++ b/styles/src/styleTree/commandPalette.ts @@ -8,10 +8,12 @@ export default function commandPalette(colorScheme: ColorScheme) { let layer = colorScheme.highest return { keystrokeSpacing: 8, - key: - toggleable(interactive({ + key: toggleable( + interactive({ base: { - text: text(layer, "mono", "variant", "default", { size: "xs" }), + text: text(layer, "mono", "variant", "default", { + size: "xs", + }), cornerRadius: 2, background: background(layer, "on"), padding: { @@ -25,15 +27,15 @@ export default function commandPalette(colorScheme: ColorScheme) { bottom: 1, left: 2, }, - }, state: { hovered: { cornerRadius: 4, padding: { top: 17 } } } - }), { + }, + state: { hovered: { cornerRadius: 4, padding: { top: 17 } } }, + }), + { default: { text: text(layer, "mono", "on", "default", { size: "xs" }), background: withOpacity(background(layer, "on"), 0.2), - } - - }) - , - + }, + } + ), } } diff --git a/styles/src/styleTree/components.ts b/styles/src/styleTree/components.ts index 3aa5d9176e..bfd1f75cb0 100644 --- a/styles/src/styleTree/components.ts +++ b/styles/src/styleTree/components.ts @@ -2,297 +2,297 @@ import { fontFamilies, fontSizes, FontWeight } from "../common" import { Layer, Styles, StyleSets, Style } from "../theme/colorScheme" function isStyleSet(key: any): key is StyleSets { - return [ - "base", - "variant", - "on", - "accent", - "positive", - "warning", - "negative", - ].includes(key) + return [ + "base", + "variant", + "on", + "accent", + "positive", + "warning", + "negative", + ].includes(key) } function isStyle(key: any): key is Styles { - return [ - "default", - "active", - "disabled", - "hovered", - "pressed", - "inverted", - ].includes(key) + return [ + "default", + "active", + "disabled", + "hovered", + "pressed", + "inverted", + ].includes(key) } function getStyle( - layer: Layer, - possibleStyleSetOrStyle?: any, - possibleStyle?: any + layer: Layer, + possibleStyleSetOrStyle?: any, + possibleStyle?: any ): Style { - let styleSet: StyleSets = "base" - let style: Styles = "default" - if (isStyleSet(possibleStyleSetOrStyle)) { - styleSet = possibleStyleSetOrStyle - } else if (isStyle(possibleStyleSetOrStyle)) { - style = possibleStyleSetOrStyle - } + let styleSet: StyleSets = "base" + let style: Styles = "default" + if (isStyleSet(possibleStyleSetOrStyle)) { + styleSet = possibleStyleSetOrStyle + } else if (isStyle(possibleStyleSetOrStyle)) { + style = possibleStyleSetOrStyle + } - if (isStyle(possibleStyle)) { - style = possibleStyle - } + if (isStyle(possibleStyle)) { + style = possibleStyle + } - return layer[styleSet][style] + return layer[styleSet][style] } export function background(layer: Layer, style?: Styles): string export function background( - layer: Layer, - styleSet?: StyleSets, - style?: Styles + layer: Layer, + styleSet?: StyleSets, + style?: Styles ): string export function background( - layer: Layer, - styleSetOrStyles?: StyleSets | Styles, - style?: Styles + layer: Layer, + styleSetOrStyles?: StyleSets | Styles, + style?: Styles ): string { - return getStyle(layer, styleSetOrStyles, style).background + return getStyle(layer, styleSetOrStyles, style).background } export function borderColor(layer: Layer, style?: Styles): string export function borderColor( - layer: Layer, - styleSet?: StyleSets, - style?: Styles + layer: Layer, + styleSet?: StyleSets, + style?: Styles ): string export function borderColor( - layer: Layer, - styleSetOrStyles?: StyleSets | Styles, - style?: Styles + layer: Layer, + styleSetOrStyles?: StyleSets | Styles, + style?: Styles ): string { - return getStyle(layer, styleSetOrStyles, style).border + return getStyle(layer, styleSetOrStyles, style).border } export function foreground(layer: Layer, style?: Styles): string export function foreground( - layer: Layer, - styleSet?: StyleSets, - style?: Styles + layer: Layer, + styleSet?: StyleSets, + style?: Styles ): string export function foreground( - layer: Layer, - styleSetOrStyles?: StyleSets | Styles, - style?: Styles + layer: Layer, + styleSetOrStyles?: StyleSets | Styles, + style?: Styles ): string { - return getStyle(layer, styleSetOrStyles, style).foreground + return getStyle(layer, styleSetOrStyles, style).foreground } interface Text extends Object { - family: keyof typeof fontFamilies - color: string - size: number - weight?: FontWeight - underline?: boolean + family: keyof typeof fontFamilies + color: string + size: number + weight?: FontWeight + underline?: boolean } export interface TextProperties { - size?: keyof typeof fontSizes - weight?: FontWeight - underline?: boolean - color?: string - features?: FontFeatures + size?: keyof typeof fontSizes + weight?: FontWeight + underline?: boolean + color?: string + features?: FontFeatures } interface FontFeatures { - /** Contextual Alternates: Applies a second substitution feature based on a match of a character pattern within a context of surrounding patterns */ - calt?: boolean - /** Case-Sensitive Forms: Shifts various punctuation marks up to a position that works better with all-capital sequences */ - case?: boolean - /** Capital Spacing: Adjusts inter-glyph spacing for all-capital text */ - cpsp?: boolean - /** Fractions: Replaces figures separated by a slash with diagonal fractions */ - frac?: boolean - /** Standard Ligatures: Replaces a sequence of glyphs with a single glyph which is preferred for typographic purposes */ - liga?: boolean - /** Oldstyle Figures: Changes selected figures from the default or lining style to oldstyle form. */ - onum?: boolean - /** Ordinals: Replaces default alphabetic glyphs with the corresponding ordinal forms for use after figures */ - ordn?: boolean - /** Proportional Figures: Replaces figure glyphs set on uniform (tabular) widths with corresponding glyphs set on proportional widths */ - pnum?: boolean - /** Stylistic set 01 */ - ss01?: boolean - /** Stylistic set 02 */ - ss02?: boolean - /** Stylistic set 03 */ - ss03?: boolean - /** Stylistic set 04 */ - ss04?: boolean - /** Stylistic set 05 */ - ss05?: boolean - /** Stylistic set 06 */ - ss06?: boolean - /** Stylistic set 07 */ - ss07?: boolean - /** Stylistic set 08 */ - ss08?: boolean - /** Stylistic set 09 */ - ss09?: boolean - /** Stylistic set 10 */ - ss10?: boolean - /** Stylistic set 11 */ - ss11?: boolean - /** Stylistic set 12 */ - ss12?: boolean - /** Stylistic set 13 */ - ss13?: boolean - /** Stylistic set 14 */ - ss14?: boolean - /** Stylistic set 15 */ - ss15?: boolean - /** Stylistic set 16 */ - ss16?: boolean - /** Stylistic set 17 */ - ss17?: boolean - /** Stylistic set 18 */ - ss18?: boolean - /** Stylistic set 19 */ - ss19?: boolean - /** Stylistic set 20 */ - ss20?: boolean - /** Subscript: Replaces default glyphs with subscript glyphs */ - subs?: boolean - /** Superscript: Replaces default glyphs with superscript glyphs */ - sups?: boolean - /** Swash: Replaces default glyphs with swash glyphs for stylistic purposes */ - swsh?: boolean - /** Titling: Replaces default glyphs with titling glyphs for use in large-size settings */ - titl?: boolean - /** Tabular Figures: Replaces figure glyphs set on proportional widths with corresponding glyphs set on uniform (tabular) widths */ - tnum?: boolean - /** Slashed Zero: Replaces default zero with a slashed zero for better distinction between "0" and "O" */ - zero?: boolean + /** Contextual Alternates: Applies a second substitution feature based on a match of a character pattern within a context of surrounding patterns */ + calt?: boolean + /** Case-Sensitive Forms: Shifts various punctuation marks up to a position that works better with all-capital sequences */ + case?: boolean + /** Capital Spacing: Adjusts inter-glyph spacing for all-capital text */ + cpsp?: boolean + /** Fractions: Replaces figures separated by a slash with diagonal fractions */ + frac?: boolean + /** Standard Ligatures: Replaces a sequence of glyphs with a single glyph which is preferred for typographic purposes */ + liga?: boolean + /** Oldstyle Figures: Changes selected figures from the default or lining style to oldstyle form. */ + onum?: boolean + /** Ordinals: Replaces default alphabetic glyphs with the corresponding ordinal forms for use after figures */ + ordn?: boolean + /** Proportional Figures: Replaces figure glyphs set on uniform (tabular) widths with corresponding glyphs set on proportional widths */ + pnum?: boolean + /** Stylistic set 01 */ + ss01?: boolean + /** Stylistic set 02 */ + ss02?: boolean + /** Stylistic set 03 */ + ss03?: boolean + /** Stylistic set 04 */ + ss04?: boolean + /** Stylistic set 05 */ + ss05?: boolean + /** Stylistic set 06 */ + ss06?: boolean + /** Stylistic set 07 */ + ss07?: boolean + /** Stylistic set 08 */ + ss08?: boolean + /** Stylistic set 09 */ + ss09?: boolean + /** Stylistic set 10 */ + ss10?: boolean + /** Stylistic set 11 */ + ss11?: boolean + /** Stylistic set 12 */ + ss12?: boolean + /** Stylistic set 13 */ + ss13?: boolean + /** Stylistic set 14 */ + ss14?: boolean + /** Stylistic set 15 */ + ss15?: boolean + /** Stylistic set 16 */ + ss16?: boolean + /** Stylistic set 17 */ + ss17?: boolean + /** Stylistic set 18 */ + ss18?: boolean + /** Stylistic set 19 */ + ss19?: boolean + /** Stylistic set 20 */ + ss20?: boolean + /** Subscript: Replaces default glyphs with subscript glyphs */ + subs?: boolean + /** Superscript: Replaces default glyphs with superscript glyphs */ + sups?: boolean + /** Swash: Replaces default glyphs with swash glyphs for stylistic purposes */ + swsh?: boolean + /** Titling: Replaces default glyphs with titling glyphs for use in large-size settings */ + titl?: boolean + /** Tabular Figures: Replaces figure glyphs set on proportional widths with corresponding glyphs set on uniform (tabular) widths */ + tnum?: boolean + /** Slashed Zero: Replaces default zero with a slashed zero for better distinction between "0" and "O" */ + zero?: boolean } export function text( - layer: Layer, - fontFamily: keyof typeof fontFamilies, - styleSet: StyleSets, - style: Styles, - properties?: TextProperties + layer: Layer, + fontFamily: keyof typeof fontFamilies, + styleSet: StyleSets, + style: Styles, + properties?: TextProperties ): Text export function text( - layer: Layer, - fontFamily: keyof typeof fontFamilies, - styleSet: StyleSets, - properties?: TextProperties + layer: Layer, + fontFamily: keyof typeof fontFamilies, + styleSet: StyleSets, + properties?: TextProperties ): Text export function text( - layer: Layer, - fontFamily: keyof typeof fontFamilies, - style: Styles, - properties?: TextProperties + layer: Layer, + fontFamily: keyof typeof fontFamilies, + style: Styles, + properties?: TextProperties ): Text export function text( - layer: Layer, - fontFamily: keyof typeof fontFamilies, - properties?: TextProperties + layer: Layer, + fontFamily: keyof typeof fontFamilies, + properties?: TextProperties ): Text export function text( - layer: Layer, - fontFamily: keyof typeof fontFamilies, - styleSetStyleOrProperties?: StyleSets | Styles | TextProperties, - styleOrProperties?: Styles | TextProperties, - properties?: TextProperties + layer: Layer, + fontFamily: keyof typeof fontFamilies, + styleSetStyleOrProperties?: StyleSets | Styles | TextProperties, + styleOrProperties?: Styles | TextProperties, + properties?: TextProperties ) { - let style = getStyle(layer, styleSetStyleOrProperties, styleOrProperties) + let style = getStyle(layer, styleSetStyleOrProperties, styleOrProperties) - if (typeof styleSetStyleOrProperties === "object") { - properties = styleSetStyleOrProperties - } - if (typeof styleOrProperties === "object") { - properties = styleOrProperties - } + if (typeof styleSetStyleOrProperties === "object") { + properties = styleSetStyleOrProperties + } + if (typeof styleOrProperties === "object") { + properties = styleOrProperties + } - let size = fontSizes[properties?.size || "sm"] - let color = properties?.color || style.foreground + let size = fontSizes[properties?.size || "sm"] + let color = properties?.color || style.foreground - return { - family: fontFamilies[fontFamily], - ...properties, - color, - size, - } + return { + family: fontFamilies[fontFamily], + ...properties, + color, + size, + } } export interface Border { - color: string - width: number - top?: boolean - bottom?: boolean - left?: boolean - right?: boolean - overlay?: boolean + color: string + width: number + top?: boolean + bottom?: boolean + left?: boolean + right?: boolean + overlay?: boolean } export interface BorderProperties { - width?: number - top?: boolean - bottom?: boolean - left?: boolean - right?: boolean - overlay?: boolean + width?: number + top?: boolean + bottom?: boolean + left?: boolean + right?: boolean + overlay?: boolean } export function border( - layer: Layer, - styleSet: StyleSets, - style: Styles, - properties?: BorderProperties + layer: Layer, + styleSet: StyleSets, + style: Styles, + properties?: BorderProperties ): Border export function border( - layer: Layer, - styleSet: StyleSets, - properties?: BorderProperties + layer: Layer, + styleSet: StyleSets, + properties?: BorderProperties ): Border export function border( - layer: Layer, - style: Styles, - properties?: BorderProperties + layer: Layer, + style: Styles, + properties?: BorderProperties ): Border export function border(layer: Layer, properties?: BorderProperties): Border export function border( - layer: Layer, - styleSetStyleOrProperties?: StyleSets | Styles | BorderProperties, - styleOrProperties?: Styles | BorderProperties, - properties?: BorderProperties + layer: Layer, + styleSetStyleOrProperties?: StyleSets | Styles | BorderProperties, + styleOrProperties?: Styles | BorderProperties, + properties?: BorderProperties ): Border { - let style = getStyle(layer, styleSetStyleOrProperties, styleOrProperties) + let style = getStyle(layer, styleSetStyleOrProperties, styleOrProperties) - if (typeof styleSetStyleOrProperties === "object") { - properties = styleSetStyleOrProperties - } - if (typeof styleOrProperties === "object") { - properties = styleOrProperties - } + if (typeof styleSetStyleOrProperties === "object") { + properties = styleSetStyleOrProperties + } + if (typeof styleOrProperties === "object") { + properties = styleOrProperties + } - return { - color: style.border, - width: 1, - ...properties, - } + return { + color: style.border, + width: 1, + ...properties, + } } export function svg( - color: string, - asset: String, - width: Number, - height: Number + color: string, + asset: String, + width: Number, + height: Number ) { - return { - color, - asset, - dimensions: { - width, - height, - }, - } + return { + color, + asset, + dimensions: { + width, + height, + }, + } } diff --git a/styles/src/styleTree/contactList.ts b/styles/src/styleTree/contactList.ts index f038d79716..5c6068408e 100644 --- a/styles/src/styleTree/contactList.ts +++ b/styles/src/styleTree/contactList.ts @@ -72,24 +72,28 @@ export default function contactsPanel(colorScheme: ColorScheme) { }, rowHeight: 28, sectionIconSize: 8, - headerRow: toggleable(interactive({ - base: { - ...text(layer, "mono", { size: "sm" }), - margin: { top: 14 }, - padding: { - left: sidePadding, - right: sidePadding, + headerRow: toggleable( + interactive({ + base: { + ...text(layer, "mono", { size: "sm" }), + margin: { top: 14 }, + padding: { + left: sidePadding, + right: sidePadding, + }, + background: background(layer, "default"), // posiewic: breaking change }, - background: background(layer, "default"),// posiewic: breaking change - } - , state: { hovered: { background: background(layer, "default") } } // hack, we want headerRow to be interactive for whatever reason. It probably shouldn't be interactive in the first place. - }), + state: { + hovered: { background: background(layer, "default") }, + }, // hack, we want headerRow to be interactive for whatever reason. It probably shouldn't be interactive in the first place. + }), { default: { ...text(layer, "mono", "active", { size: "sm" }), background: background(layer, "active"), }, - }), + } + ), leaveCall: interactive({ base: { background: background(layer), @@ -105,24 +109,22 @@ export default function contactsPanel(colorScheme: ColorScheme) { right: 7, }, ...text(layer, "sans", "variant", { size: "xs" }), - } - , + }, state: { hovered: { ...text(layer, "sans", "hovered", { size: "xs" }), background: background(layer, "hovered"), border: border(layer, "hovered"), - } - } - } - ), + }, + }, + }), contactRow: { inactive: { default: { padding: { left: sidePadding, right: sidePadding, - } + }, }, }, active: { @@ -131,8 +133,8 @@ export default function contactsPanel(colorScheme: ColorScheme) { padding: { left: sidePadding, right: sidePadding, - } - } + }, + }, }, }, @@ -165,7 +167,7 @@ export default function contactsPanel(colorScheme: ColorScheme) { hovered: { background: background(layer, "hovered"), }, - } + }, }), disabledButton: { ...contactButton, @@ -175,44 +177,48 @@ export default function contactsPanel(colorScheme: ColorScheme) { callingIndicator: { ...text(layer, "mono", "variant", { size: "xs" }), }, - treeBranch: toggleable(interactive({ - base: { - color: borderColor(layer), - width: 1, - }, - state: { - hovered: { + treeBranch: toggleable( + interactive({ + base: { color: borderColor(layer), + width: 1, }, - } - }), + state: { + hovered: { + color: borderColor(layer), + }, + }, + }), { default: { color: borderColor(layer), }, } ), - projectRow: toggleable(interactive({ - base: { - ...projectRow, - background: background(layer), - icon: { - margin: { left: nameMargin }, - color: foreground(layer, "variant"), - width: 12, + projectRow: toggleable( + interactive({ + base: { + ...projectRow, + background: background(layer), + icon: { + margin: { left: nameMargin }, + color: foreground(layer, "variant"), + width: 12, + }, + name: { + ...projectRow.name, + ...text(layer, "mono", { size: "sm" }), + }, }, - name: { - ...projectRow.name, - ...text(layer, "mono", { size: "sm" }), + state: { + hovered: { + background: background(layer, "hovered"), + }, }, - }, state: { - hovered: { - background: background(layer, "hovered"), - }, - } - }), + }), { - default: { background: background(layer, "active") } - }) + default: { background: background(layer, "active") }, + } + ), } } diff --git a/styles/src/styleTree/contactNotification.ts b/styles/src/styleTree/contactNotification.ts index 7de3f2fe0c..825c5a389a 100644 --- a/styles/src/styleTree/contactNotification.ts +++ b/styles/src/styleTree/contactNotification.ts @@ -21,22 +21,21 @@ export default function contactNotification(colorScheme: ColorScheme): Object { ...text(layer, "sans", { size: "xs" }), margin: { left: avatarSize + headerPadding, top: 6, bottom: 6 }, }, - button: - interactive({ - base: { - ...text(layer, "sans", "on", { size: "xs" }), - background: background(layer, "on"), - padding: 4, - cornerRadius: 6, - margin: { left: 6 } - }, + button: interactive({ + base: { + ...text(layer, "sans", "on", { size: "xs" }), + background: background(layer, "on"), + padding: 4, + cornerRadius: 6, + margin: { left: 6 }, + }, - state: { - hovered: { - background: background(layer, "on", "hovered"), - } - } - }), + state: { + hovered: { + background: background(layer, "on", "hovered"), + }, + }, + }), dismissButton: { default: { @@ -48,7 +47,7 @@ export default function contactNotification(colorScheme: ColorScheme): Object { hover: { color: foreground(layer, "hovered"), }, - } + }, }, } } diff --git a/styles/src/styleTree/contextMenu.ts b/styles/src/styleTree/contextMenu.ts index 21231ccac9..6f5eb53640 100644 --- a/styles/src/styleTree/contextMenu.ts +++ b/styles/src/styleTree/contextMenu.ts @@ -12,41 +12,45 @@ export default function contextMenu(colorScheme: ColorScheme) { shadow: colorScheme.popoverShadow, border: border(layer), keystrokeMargin: 30, - item: toggleable(interactive({ - base: { - iconSpacing: 8, - iconWidth: 14, - padding: { left: 6, right: 6, top: 2, bottom: 2 }, - cornerRadius: 6, - label: text(layer, "sans", { size: "sm" }), - keystroke: { - ...text(layer, "sans", "variant", { - size: "sm", - weight: "bold", - }), - padding: { left: 3, right: 3 }, - } - }, state: { - hovered: { - background: background(layer, "hovered"), - label: text(layer, "sans", "hovered", { size: "sm" }), + item: toggleable( + interactive({ + base: { + iconSpacing: 8, + iconWidth: 14, + padding: { left: 6, right: 6, top: 2, bottom: 2 }, + cornerRadius: 6, + label: text(layer, "sans", { size: "sm" }), keystroke: { - ...text(layer, "sans", "hovered", { + ...text(layer, "sans", "variant", { size: "sm", weight: "bold", }), padding: { left: 3, right: 3 }, }, - } + }, + state: { + hovered: { + background: background(layer, "hovered"), + label: text(layer, "sans", "hovered", { size: "sm" }), + keystroke: { + ...text(layer, "sans", "hovered", { + size: "sm", + weight: "bold", + }), + padding: { left: 3, right: 3 }, + }, + }, + }, + }), + { + default: { + background: background(layer, "active"), + }, + hovered: { + background: background(layer, "active"), + }, } - }), { - default: { - background: background(layer, "active"), - }, - hovered: { - background: background(layer, "active"), - }, - }), + ), separator: { background: borderColor(layer), diff --git a/styles/src/styleTree/copilot.ts b/styles/src/styleTree/copilot.ts index 9229761414..1e09f4ff6b 100644 --- a/styles/src/styleTree/copilot.ts +++ b/styles/src/styleTree/copilot.ts @@ -25,7 +25,7 @@ export default function copilot(colorScheme: ColorScheme) { left: 7, right: 7, }, - ...text(layer, "sans", "default", { size: "sm" }) + ...text(layer, "sans", "default", { size: "sm" }), }, state: { hovered: { @@ -33,39 +33,37 @@ export default function copilot(colorScheme: ColorScheme) { background: background(layer, "hovered"), border: border(layer, "active"), }, - } - }); + }, + }) return { - outLinkIcon: - interactive({ - base: { - icon: svg( - foreground(layer, "variant"), - "icons/link_out_12.svg", - 12, - 12 - ), - container: { - cornerRadius: 6, - padding: { left: 6 }, + outLinkIcon: interactive({ + base: { + icon: svg( + foreground(layer, "variant"), + "icons/link_out_12.svg", + 12, + 12 + ), + container: { + cornerRadius: 6, + padding: { left: 6 }, + }, + }, + state: { + hovered: { + icon: { + color: foreground(layer, "hovered"), }, }, - state: { - hovered: { - icon: { - color: - foreground(layer, "hovered") - } - }, - } - }), + }, + }), modal: { titleText: { default: { - ...text(layer, "sans", { size: "xs", weight: "bold" }) - } + ...text(layer, "sans", { size: "xs", weight: "bold" }), + }, }, titlebar: { background: background(colorScheme.lowest), @@ -87,8 +85,7 @@ export default function copilot(colorScheme: ColorScheme) { }, }, closeIcon: interactive({ - base: - { + base: { icon: svg( foreground(layer, "variant"), "icons/x_mark_8.svg", @@ -106,7 +103,7 @@ export default function copilot(colorScheme: ColorScheme) { margin: { right: 0, }, - } + }, }, state: { hovered: { @@ -125,7 +122,7 @@ export default function copilot(colorScheme: ColorScheme) { 8 ), }, - } + }, }), dimensions: { width: 280, @@ -214,8 +211,9 @@ export default function copilot(colorScheme: ColorScheme) { bottom: 5, left: 8, right: 0, - } - }, state: { + }, + }, + state: { hovered: { border: border(layer, "active", { bottom: false, @@ -224,8 +222,8 @@ export default function copilot(colorScheme: ColorScheme) { left: true, }), }, - } - }) + }, + }), }, }, diff --git a/styles/src/styleTree/editor.ts b/styles/src/styleTree/editor.ts index 5a55341933..9dec64b0ce 100644 --- a/styles/src/styleTree/editor.ts +++ b/styles/src/styleTree/editor.ts @@ -50,23 +50,26 @@ export default function editor(colorScheme: ColorScheme) { // Inline autocomplete suggestions, Co-pilot suggestions, etc. suggestion: syntax.predictive, codeActions: { - indicator: toggleable(interactive({ - base: { - color: foreground(layer, "variant"), - }, state: { - clicked: { - color: foreground(layer, "base"), + indicator: toggleable( + interactive({ + base: { + color: foreground(layer, "variant"), }, - hovered: { - color: foreground(layer, "on"), + state: { + clicked: { + color: foreground(layer, "base"), + }, + hovered: { + color: foreground(layer, "on"), + }, }, - } - }), + }), { default: { color: foreground(layer, "on"), - } - }), + }, + } + ), verticalScale: 0.55, }, @@ -74,29 +77,34 @@ export default function editor(colorScheme: ColorScheme) { iconMarginScale: 2.5, foldedIcon: "icons/chevron_right_8.svg", foldableIcon: "icons/chevron_down_8.svg", - indicator: toggleable(interactive({ - base: { - color: foreground(layer, "variant"), - }, state: { - clicked: { - color: foreground(layer, "base"), + indicator: toggleable( + interactive({ + base: { + color: foreground(layer, "variant"), }, - hovered: { - color: foreground(layer, "on"), + state: { + clicked: { + color: foreground(layer, "base"), + }, + hovered: { + color: foreground(layer, "on"), + }, }, - } - }), + }), { default: { color: foreground(layer, "on"), - } - }), + }, + } + ), ellipses: { textColor: colorScheme.ramps.neutral(0.71).hex(), cornerRadiusFactor: 0.15, background: { // Copied from hover_popover highlight - default: { color: colorScheme.ramps.neutral(0.5).alpha(0.0).hex() }, + default: { + color: colorScheme.ramps.neutral(0.5).alpha(0.0).hex(), + }, hover: { color: colorScheme.ramps.neutral(0.5).alpha(0.5).hex(), @@ -245,12 +253,13 @@ export default function editor(colorScheme: ColorScheme) { bottom: 6, left: 6, right: 6, - } - }, state: { + }, + }, + state: { hovered: { background: background(layer, "on", "hovered"), - } - } + }, + }, }), scrollbar: { diff --git a/styles/src/styleTree/feedback.ts b/styles/src/styleTree/feedback.ts index 4f0e99844d..c98cbe768f 100644 --- a/styles/src/styleTree/feedback.ts +++ b/styles/src/styleTree/feedback.ts @@ -20,8 +20,9 @@ export default function feedback(colorScheme: ColorScheme) { left: 10, right: 10, top: 2, - } - }, state: { + }, + }, + state: { clicked: { ...text(layer, "mono", "on", "pressed"), background: background(layer, "on", "pressed"), @@ -32,7 +33,7 @@ export default function feedback(colorScheme: ColorScheme) { background: background(layer, "on", "hovered"), border: border(layer, "on", "hovered"), }, - } + }, }), button_margin: 8, info_text_default: text(layer, "sans", "default", { size: "xs" }), diff --git a/styles/src/styleTree/picker.ts b/styles/src/styleTree/picker.ts index 940059eb43..7730395ec9 100644 --- a/styles/src/styleTree/picker.ts +++ b/styles/src/styleTree/picker.ts @@ -40,29 +40,35 @@ export default function picker(colorScheme: ColorScheme): any { ...container, padding: {}, }, - item: toggleable(interactive({ - base: { - padding: { - bottom: 4, - left: 12, - right: 12, - top: 4, + item: toggleable( + interactive({ + base: { + padding: { + bottom: 4, + left: 12, + right: 12, + top: 4, + }, + margin: { + top: 1, + left: 4, + right: 4, + }, + cornerRadius: 8, + text: text(layer, "sans", "variant"), + highlightText: text(layer, "sans", "accent", { + weight: "bold", + }), }, - margin: { - top: 1, - left: 4, - right: 4, + state: { + hovered: { + background: withOpacity( + background(layer, "hovered"), + 0.5 + ), + }, }, - cornerRadius: 8, - text: text(layer, "sans", "variant"), - highlightText: text(layer, "sans", "accent", { weight: "bold" }), - } - , state: { - hovered: { - background: withOpacity(background(layer, "hovered"), 0.5), - } - } - }), + }), { default: { background: withOpacity( @@ -70,9 +76,9 @@ export default function picker(colorScheme: ColorScheme): any { 0.5 ), //text: text(layer, "sans", "base", "active"), - } - }), - + }, + } + ), inputEditor, emptyInputEditor, diff --git a/styles/src/styleTree/projectPanel.ts b/styles/src/styleTree/projectPanel.ts index 5df3988be6..23df2fbf58 100644 --- a/styles/src/styleTree/projectPanel.ts +++ b/styles/src/styleTree/projectPanel.ts @@ -29,18 +29,19 @@ export default function projectPanel(colorScheme: ColorScheme) { }, } - let entry = toggleable(interactive({ - base: { - ...baseEntry, - text: text(layer, "mono", "variant", { size: "sm" }), - status, - }, state: - { - hovered: { - background: background(layer, "variant", "hovered"), - } - } - }), + let entry = toggleable( + interactive({ + base: { + ...baseEntry, + text: text(layer, "mono", "variant", { size: "sm" }), + status, + }, + state: { + hovered: { + background: background(layer, "variant", "hovered"), + }, + }, + }), { default: { /*background: colorScheme.isLight @@ -52,8 +53,8 @@ export default function projectPanel(colorScheme: ColorScheme) { //background: background(layer, "active"), text: text(layer, "mono", "active", { size: "sm" }), }, - - }); + } + ) return { openProjectButton: interactive({ @@ -72,14 +73,15 @@ export default function projectPanel(colorScheme: ColorScheme) { left: 7, right: 7, }, - ...text(layer, "sans", "default", { size: "sm" }) - }, state: { + ...text(layer, "sans", "default", { size: "sm" }), + }, + state: { hovered: { ...text(layer, "sans", "default", { size: "sm" }), background: background(layer, "hovered"), border: border(layer, "active"), }, - } + }, }), background: background(layer), padding: { left: 6, right: 6, top: 0, bottom: 6 }, @@ -111,7 +113,6 @@ export default function projectPanel(colorScheme: ColorScheme) { background: background(layer, "active"), text: text(layer, "mono", "disabled", { size: "sm" }), }, - }, }, filenameEditor: { diff --git a/styles/src/styleTree/search.ts b/styles/src/styleTree/search.ts index 64f17e7d74..a95296971c 100644 --- a/styles/src/styleTree/search.ts +++ b/styles/src/styleTree/search.ts @@ -37,41 +37,44 @@ export default function search(colorScheme: ColorScheme) { return { // TODO: Add an activeMatchBackground on the rust side to differentiate between active and inactive matchBackground: withOpacity(foreground(layer, "accent"), 0.4), - optionButton: toggleable(interactive({ - base: { - ...text(layer, "mono", "on"), - background: background(layer, "on"), - cornerRadius: 6, - border: border(layer, "on"), - margin: { - right: 4, + optionButton: toggleable( + interactive({ + base: { + ...text(layer, "mono", "on"), + background: background(layer, "on"), + cornerRadius: 6, + border: border(layer, "on"), + margin: { + right: 4, + }, + padding: { + bottom: 2, + left: 10, + right: 10, + top: 2, + }, }, - padding: { - bottom: 2, - left: 10, - right: 10, - top: 2, + state: { + clicked: { + ...text(layer, "mono", "on", "pressed"), + background: background(layer, "on", "pressed"), + border: border(layer, "on", "pressed"), + }, + hovered: { + ...text(layer, "mono", "on", "hovered"), + background: background(layer, "on", "hovered"), + border: border(layer, "on", "hovered"), + }, }, - }, state: { - clicked: { - ...text(layer, "mono", "on", "pressed"), - background: background(layer, "on", "pressed"), - border: border(layer, "on", "pressed"), - }, - hovered: { - ...text(layer, "mono", "on", "hovered"), - background: background(layer, "on", "hovered"), - border: border(layer, "on", "hovered"), + }), + { + default: { + ...text(layer, "mono", "on", "inverted"), + background: background(layer, "on", "inverted"), + border: border(layer, "on", "inverted"), }, } - }), { - default: { - ...text(layer, "mono", "on", "inverted"), - background: background(layer, "on", "inverted"), - border: border(layer, "on", "inverted"), - }, - - }), + ), editor, invalidEditor: { ...editor, @@ -113,11 +116,12 @@ export default function search(colorScheme: ColorScheme) { left: 10, right: 10, }, - }, state: { + }, + state: { hovered: { color: foreground(layer, "hovered"), - } - } + }, + }, }), } } diff --git a/styles/src/styleTree/simpleMessageNotification.ts b/styles/src/styleTree/simpleMessageNotification.ts index 404be2da7e..e894db3514 100644 --- a/styles/src/styleTree/simpleMessageNotification.ts +++ b/styles/src/styleTree/simpleMessageNotification.ts @@ -26,13 +26,14 @@ export default function simpleMessageNotification( }, margin: { left: headerPadding, top: 6, bottom: 6 }, - }, state: { + }, + state: { hovered: { ...text(layer, "sans", "default", { size: "xs" }), background: background(layer, "hovered"), border: border(layer, "active"), }, - } + }, }), dismissButton: interactive({ base: { @@ -41,11 +42,12 @@ export default function simpleMessageNotification( iconHeight: 8, buttonWidth: 8, buttonHeight: 8, - }, state: { + }, + state: { hovered: { color: foreground(layer, "hovered"), }, - } - }) + }, + }), } } diff --git a/styles/src/styleTree/statusBar.ts b/styles/src/styleTree/statusBar.ts index 30f933de8c..8a91b7eaac 100644 --- a/styles/src/styleTree/statusBar.ts +++ b/styles/src/styleTree/statusBar.ts @@ -29,15 +29,14 @@ export default function statusBar(colorScheme: ColorScheme) { activeLanguage: interactive({ base: { padding: { left: 6, right: 6 }, - ...text(layer, "sans", "variant") + ...text(layer, "sans", "variant"), }, state: { hovered: { ...text(layer, "sans", "on"), - } - } - }, - ), + }, + }, + }), autoUpdateProgressMessage: text(layer, "sans", "variant"), autoUpdateDoneMessage: text(layer, "sans", "variant"), lspStatus: interactive({ @@ -47,92 +46,93 @@ export default function statusBar(colorScheme: ColorScheme) { iconWidth: 14, height: 18, message: text(layer, "sans"), - iconColor: foreground(layer) + iconColor: foreground(layer), }, state: { hovered: { message: text(layer, "sans"), iconColor: foreground(layer), background: background(layer, "hovered"), - } - } + }, + }, }), diagnosticMessage: interactive({ base: { - ...text(layer, "sans") + ...text(layer, "sans"), }, - state: { hovered: text(layer, "sans", "hovered") } - }, - ), - diagnosticSummary: - interactive({ - base: { - height: 20, - iconWidth: 16, - iconSpacing: 2, - summarySpacing: 6, - text: text(layer, "sans", { size: "sm" }), - iconColorOk: foreground(layer, "variant"), - iconColorWarning: foreground(layer, "warning"), - iconColorError: foreground(layer, "negative"), + state: { hovered: text(layer, "sans", "hovered") }, + }), + diagnosticSummary: interactive({ + base: { + height: 20, + iconWidth: 16, + iconSpacing: 2, + summarySpacing: 6, + text: text(layer, "sans", { size: "sm" }), + iconColorOk: foreground(layer, "variant"), + iconColorWarning: foreground(layer, "warning"), + iconColorError: foreground(layer, "negative"), + containerOk: { + cornerRadius: 6, + padding: { top: 3, bottom: 3, left: 7, right: 7 }, + }, + containerWarning: { + ...diagnosticStatusContainer, + background: background(layer, "warning"), + border: border(layer, "warning"), + }, + containerError: { + ...diagnosticStatusContainer, + background: background(layer, "negative"), + border: border(layer, "negative"), + }, + }, + state: { + hovered: { + iconColorOk: foreground(layer, "on"), containerOk: { - cornerRadius: 6, - padding: { top: 3, bottom: 3, left: 7, right: 7 }, + background: background(layer, "on", "hovered"), }, containerWarning: { - ...diagnosticStatusContainer, - background: background(layer, "warning"), - border: border(layer, "warning"), + background: background(layer, "warning", "hovered"), + border: border(layer, "warning", "hovered"), }, containerError: { - ...diagnosticStatusContainer, - background: background(layer, "negative"), - border: border(layer, "negative"), - } - }, state: { - hovered: { - iconColorOk: foreground(layer, "on"), - containerOk: { - background: background(layer, "on", "hovered"), - }, - containerWarning: { - background: background(layer, "warning", "hovered"), - border: border(layer, "warning", "hovered"), - }, - containerError: { - background: background(layer, "negative", "hovered"), - border: border(layer, "negative", "hovered"), - } - } - } - } - ), + background: background(layer, "negative", "hovered"), + border: border(layer, "negative", "hovered"), + }, + }, + }, + }), panelButtons: { groupLeft: {}, groupBottom: {}, groupRight: {}, - button: toggleable(interactive({ - base: { - ...statusContainer, - iconSize: 16, - iconColor: foreground(layer, "variant"), - label: { - margin: { left: 6 }, - ...text(layer, "sans", { size: "sm" }), + button: toggleable( + interactive({ + base: { + ...statusContainer, + iconSize: 16, + iconColor: foreground(layer, "variant"), + label: { + margin: { left: 6 }, + ...text(layer, "sans", { size: "sm" }), + }, }, - }, state: { - hovered: { - iconColor: foreground(layer, "hovered"), - background: background(layer, "variant"), - } - } - }), + state: { + hovered: { + iconColor: foreground(layer, "hovered"), + background: background(layer, "variant"), + }, + }, + }), { default: { iconColor: foreground(layer, "active"), background: background(layer, "active"), - } - }), + }, + } + ), badge: { cornerRadius: 3, padding: 2, diff --git a/styles/src/styleTree/tabBar.ts b/styles/src/styleTree/tabBar.ts index ae2d14bfd6..c2b5de0215 100644 --- a/styles/src/styleTree/tabBar.ts +++ b/styles/src/styleTree/tabBar.ts @@ -89,23 +89,24 @@ export default function tabBar(colorScheme: ColorScheme) { inactiveTab: inactivePaneInactiveTab, }, draggedTab, - paneButton: toggleable(interactive({ - base: { - color: foreground(layer, "variant"), - iconWidth: 12, - buttonWidth: activePaneActiveTab.height, - }, - state: { - hovered: { - color: foreground(layer, "hovered"), - } - } - }), + paneButton: toggleable( + interactive({ + base: { + color: foreground(layer, "variant"), + iconWidth: 12, + buttonWidth: activePaneActiveTab.height, + }, + state: { + hovered: { + color: foreground(layer, "hovered"), + }, + }, + }), { default: { color: foreground(layer, "accent"), - } - }, + }, + } ), paneButtonContainer: { background: tab.background, diff --git a/styles/src/styleTree/toggle.ts b/styles/src/styleTree/toggle.ts index d6b37dde9e..2b6858e15b 100644 --- a/styles/src/styleTree/toggle.ts +++ b/styles/src/styleTree/toggle.ts @@ -1,41 +1,47 @@ -import { DeepPartial } from 'utility-types'; -import merge from 'ts-deepmerge'; +import merge from "ts-deepmerge" -interface Toggleable { - inactive: T - active: T, +type ToggleState = "inactive" | "active" + +type Toggleable = Record + +const NO_INACTIVE_OR_BASE_ERROR = + "A toggleable object must have an inactive state, or a base property." +const NO_ACTIVE_ERROR = "A toggleable object must have an active state." + +interface ToggleableProps { + base?: T + state: Partial> } /** * Helper function for creating Toggleable objects. * @template T The type of the object being toggled. - * @param inactive The initial state of the toggleable object. - * @param modifications The modifications to be applied to the initial state to create the active state. + * @param props Object containing the base (inactive) state and state modifications to create the active state. * @returns A Toggleable object containing both the inactive and active states. * @example * ``` - * toggleable({day: 1, month: "January"}, {day: 3}) - * ``` - * This returns the following object: - * ``` - * Toggleable<_>{ - * inactive: { day: 1, month: "January" }, - * active: { day: 3, month: "January" } - * } - * ``` - * The function also works for nested structures: - * ``` - * toggleable({first_level: "foo", second_level: {nested_member: "nested"}}, {second_level: {nested_member: "another nested thing"}}) - * ``` - * Which returns: - * ``` - * Toggleable<_> { - * inactive: {first_level: "foo", second_level: {nested_member: "nested"}}, - * active: { first_level: "foo", second_level: {nested_member: "another nested thing"}} - * } + * toggleable({ + * base: { background: "#000000", text: "#CCCCCC" }, + * state: { active: { text: "#CCCCCC" } }, + * }) * ``` */ -export function toggleable(inactive: T, modifications: DeepPartial): Toggleable { - let active: T = merge(inactive, modifications) as T; - return { active: active, inactive: inactive }; +export function toggleable( + props: ToggleableProps +): Toggleable { + const { base, state } = props + + if (!base && !state.inactive) throw new Error(NO_INACTIVE_OR_BASE_ERROR) + if (!state.active) throw new Error(NO_ACTIVE_ERROR) + + const inactiveState = base + ? ((state.inactive ? merge(base, state.inactive) : base) as T) + : (state.inactive as T) + + const toggleObj: Toggleable = { + inactive: inactiveState, + active: merge(base ?? {}, state.active) as T, + } + + return toggleObj } diff --git a/styles/src/styleTree/toolbarDropdownMenu.ts b/styles/src/styleTree/toolbarDropdownMenu.ts index bb3e8eda0c..1f47c85f4e 100644 --- a/styles/src/styleTree/toolbarDropdownMenu.ts +++ b/styles/src/styleTree/toolbarDropdownMenu.ts @@ -13,44 +13,50 @@ export default function dropdownMenu(colorScheme: ColorScheme) { header: interactive({ base: { ...text(layer, "sans", { size: "sm" }), - secondaryText: text(layer, "sans", { size: "sm", color: "#aaaaaa" }), + secondaryText: text(layer, "sans", { + size: "sm", + color: "#aaaaaa", + }), secondaryTextSpacing: 10, padding: { left: 8, right: 8, top: 2, bottom: 2 }, cornerRadius: 6, background: background(layer, "on"), - border: border(layer, "on", { overlay: true }) + border: border(layer, "on", { overlay: true }), }, state: { hovered: { background: background(layer, "hovered"), ...text(layer, "sans", "hovered", { size: "sm" }), - } - } - }) - , + }, + }, + }), sectionHeader: { ...text(layer, "sans", { size: "sm" }), padding: { left: 8, right: 8, top: 8, bottom: 8 }, }, - item: toggleable(interactive({ - base: { - ...text(layer, "sans", { size: "sm" }), - secondaryTextSpacing: 10, - secondaryText: text(layer, "sans", { size: "sm" }), - padding: { left: 18, right: 18, top: 2, bottom: 2 } - }, state: { + item: toggleable( + interactive({ + base: { + ...text(layer, "sans", { size: "sm" }), + secondaryTextSpacing: 10, + secondaryText: text(layer, "sans", { size: "sm" }), + padding: { left: 18, right: 18, top: 2, bottom: 2 }, + }, + state: { + hovered: { + background: background(layer, "hovered"), + ...text(layer, "sans", "hovered", { size: "sm" }), + }, + }, + }), + { + default: { + background: background(layer, "active"), + }, hovered: { - background: background(layer, "hovered"), - ...text(layer, "sans", "hovered", { size: "sm" }), - } + background: background(layer, "active"), + }, } - }), { - default: { - background: background(layer, "active"), - }, - hovered: { - background: background(layer, "active"), - }, - }) + ), } } diff --git a/styles/src/styleTree/updateNotification.ts b/styles/src/styleTree/updateNotification.ts index 0cef7fa805..c6ef81c667 100644 --- a/styles/src/styleTree/updateNotification.ts +++ b/styles/src/styleTree/updateNotification.ts @@ -14,12 +14,13 @@ export default function updateNotification(colorScheme: ColorScheme): Object { actionMessage: interactive({ base: { ...text(layer, "sans", { size: "xs" }), - margin: { left: headerPadding, top: 6, bottom: 6 } - }, state: { + margin: { left: headerPadding, top: 6, bottom: 6 }, + }, + state: { hovered: { color: foreground(layer, "hovered"), - } - } + }, + }, }), dismissButton: interactive({ base: { @@ -27,13 +28,13 @@ export default function updateNotification(colorScheme: ColorScheme): Object { iconWidth: 8, iconHeight: 8, buttonWidth: 8, - buttonHeight: 8 - }, state: { + buttonHeight: 8, + }, + state: { hovered: { color: foreground(layer, "hovered"), }, }, - }) - + }), } } diff --git a/styles/src/styleTree/welcome.ts b/styles/src/styleTree/welcome.ts index a0d599b747..311ff6daff 100644 --- a/styles/src/styleTree/welcome.ts +++ b/styles/src/styleTree/welcome.ts @@ -79,13 +79,14 @@ export default function welcome(colorScheme: ColorScheme) { left: 7, right: 7, }, - ...text(layer, "sans", "default", interactive_text_size) - }, state: { + ...text(layer, "sans", "default", interactive_text_size), + }, + state: { hovered: { ...text(layer, "sans", "default", interactive_text_size), background: background(layer, "hovered"), - } - } + }, + }, }), usageNote: { diff --git a/styles/src/styleTree/workspace.ts b/styles/src/styleTree/workspace.ts index 1045be1a9a..79e7830aec 100644 --- a/styles/src/styleTree/workspace.ts +++ b/styles/src/styleTree/workspace.ts @@ -12,44 +12,50 @@ import { import statusBar from "./statusBar" import tabBar from "./tabBar" import { interactive } from "../element" -import merge from 'ts-deepmerge'; +import merge from "ts-deepmerge" export default function workspace(colorScheme: ColorScheme) { const layer = colorScheme.lowest const isLight = colorScheme.isLight const itemSpacing = 8 - const titlebarButton = toggleable(interactive({ - base: { - cornerRadius: 6, - padding: { - top: 1, - bottom: 1, - left: 8, - right: 8, + const titlebarButton = toggleable( + interactive({ + base: { + cornerRadius: 6, + padding: { + top: 1, + bottom: 1, + left: 8, + right: 8, + }, + ...text(layer, "sans", "variant", { size: "xs" }), + background: background(layer, "variant"), + border: border(layer), }, - ...text(layer, "sans", "variant", { size: "xs" }), - background: background(layer, "variant"), - border: border(layer), - }, state: { - hovered: { - ...text(layer, "sans", "variant", "hovered", { size: "xs" }), - background: background(layer, "variant", "hovered"), - border: border(layer, "variant", "hovered"), + state: { + hovered: { + ...text(layer, "sans", "variant", "hovered", { + size: "xs", + }), + background: background(layer, "variant", "hovered"), + border: border(layer, "variant", "hovered"), + }, + clicked: { + ...text(layer, "sans", "variant", "pressed", { + size: "xs", + }), + background: background(layer, "variant", "pressed"), + border: border(layer, "variant", "pressed"), + }, }, - clicked: { - ...text(layer, "sans", "variant", "pressed", { size: "xs" }), - background: background(layer, "variant", "pressed"), - border: border(layer, "variant", "pressed"), - } - } - }), + }), { default: { ...text(layer, "sans", "variant", "active", { size: "xs" }), background: background(layer, "variant", "active"), border: border(layer, "variant", "active"), - } - }, - ); + }, + } + ) const avatarWidth = 18 const avatarOuterWidth = avatarWidth + 4 const followerAvatarWidth = 14 @@ -86,23 +92,23 @@ export default function workspace(colorScheme: ColorScheme) { }, cornerRadius: 4, }, - keyboardHint: - interactive({ - base: { - ...text(layer, "sans", "variant", { size: "sm" }), - padding: { - top: 3, - left: 8, - right: 8, - bottom: 3, - }, - cornerRadius: 8 - }, state: { - hovered: { - ...text(layer, "sans", "active", { size: "sm" }), - } - } - }), + keyboardHint: interactive({ + base: { + ...text(layer, "sans", "variant", { size: "sm" }), + padding: { + top: 3, + left: 8, + right: 8, + bottom: 3, + }, + cornerRadius: 8, + }, + state: { + hovered: { + ...text(layer, "sans", "active", { size: "sm" }), + }, + }, + }), keyboardHintWidth: 320, }, @@ -214,18 +220,15 @@ export default function workspace(colorScheme: ColorScheme) { // Sign in buttom // FlatButton, Variant - signInPrompt: - merge(titlebarButton, - { - inactive: { - default: { - margin: { - left: itemSpacing, - }, - } - } - }), - + signInPrompt: merge(titlebarButton, { + inactive: { + default: { + margin: { + left: itemSpacing, + }, + }, + }, + }), // Offline Indicator offlineIcon: { @@ -259,54 +262,57 @@ export default function workspace(colorScheme: ColorScheme) { color: foreground(layer, "variant"), iconWidth: 12, buttonWidth: 20, - }, state: { - hovered: { - background: background(layer, "variant", "hovered"), - color: foreground(layer, "variant", "hovered"), - }, - } - }), - toggleContactsButton: toggleable(interactive({ - base: { - margin: { left: itemSpacing }, - cornerRadius: 6, - color: foreground(layer, "variant"), - iconWidth: 14, - buttonWidth: 20, }, state: { - clicked: { - background: background(layer, "variant", "pressed"), - color: foreground(layer, "variant", "pressed"), - }, hovered: { background: background(layer, "variant", "hovered"), color: foreground(layer, "variant", "hovered"), - } - } + }, + }, }), + toggleContactsButton: toggleable( + interactive({ + base: { + margin: { left: itemSpacing }, + cornerRadius: 6, + color: foreground(layer, "variant"), + iconWidth: 14, + buttonWidth: 20, + }, + state: { + clicked: { + background: background(layer, "variant", "pressed"), + color: foreground(layer, "variant", "pressed"), + }, + hovered: { + background: background(layer, "variant", "hovered"), + color: foreground(layer, "variant", "hovered"), + }, + }, + }), { default: { background: background(layer, "variant", "active"), - color: foreground(layer, "variant", "active") - } - }, + color: foreground(layer, "variant", "active"), + }, + } ), userMenuButton: merge(titlebarButton, { inactive: { default: { buttonWidth: 20, - iconWidth: 12 - } - }, active: { // posiewic: these properties are not currently set on main + iconWidth: 12, + }, + }, + active: { + // posiewic: these properties are not currently set on main default: { iconWidth: 12, button_width: 20, - } - } + }, + }, }), - toggleContactsBadge: { cornerRadius: 3, padding: 2, @@ -324,27 +330,31 @@ export default function workspace(colorScheme: ColorScheme) { background: background(colorScheme.highest), border: border(colorScheme.highest, { bottom: true }), itemSpacing: 8, - navButton: interactive( - { - base: { - color: foreground(colorScheme.highest, "on"), - iconWidth: 12, - buttonWidth: 24, - cornerRadius: 6, - }, state: { - hovered: { - color: foreground(colorScheme.highest, "on", "hovered"), - background: background( - colorScheme.highest, - "on", - "hovered" - ), - }, - disabled: { - color: foreground(colorScheme.highest, "on", "disabled"), - }, - } - }), + navButton: interactive({ + base: { + color: foreground(colorScheme.highest, "on"), + iconWidth: 12, + buttonWidth: 24, + cornerRadius: 6, + }, + state: { + hovered: { + color: foreground(colorScheme.highest, "on", "hovered"), + background: background( + colorScheme.highest, + "on", + "hovered" + ), + }, + disabled: { + color: foreground( + colorScheme.highest, + "on", + "disabled" + ), + }, + }, + }), padding: { left: 8, right: 8, top: 4, bottom: 4 }, }, breadcrumbHeight: 24, @@ -355,13 +365,18 @@ export default function workspace(colorScheme: ColorScheme) { padding: { left: 6, right: 6, - } - }, state: { + }, + }, + state: { hovered: { color: foreground(colorScheme.highest, "on", "hovered"), - background: background(colorScheme.highest, "on", "hovered"), + background: background( + colorScheme.highest, + "on", + "hovered" + ), }, - } + }, }), disconnectedOverlay: { ...text(layer, "sans"), diff --git a/styles/src/theme/tokens/colorScheme.ts b/styles/src/theme/tokens/colorScheme.ts index 84b8db5ce0..bc53ca802a 100644 --- a/styles/src/theme/tokens/colorScheme.ts +++ b/styles/src/theme/tokens/colorScheme.ts @@ -1,9 +1,19 @@ -import { SingleBoxShadowToken, SingleColorToken, SingleOtherToken, TokenTypes } from "@tokens-studio/types" -import { ColorScheme, Shadow, SyntaxHighlightStyle, ThemeSyntax } from "../colorScheme" +import { + SingleBoxShadowToken, + SingleColorToken, + SingleOtherToken, + TokenTypes, +} from "@tokens-studio/types" +import { + ColorScheme, + Shadow, + SyntaxHighlightStyle, + ThemeSyntax, +} from "../colorScheme" import { LayerToken, layerToken } from "./layer" import { PlayersToken, playersToken } from "./players" import { colorToken } from "./token" -import { Syntax } from "../syntax"; +import { Syntax } from "../syntax" import editor from "../../styleTree/editor" interface ColorSchemeTokens { @@ -18,27 +28,32 @@ interface ColorSchemeTokens { syntax?: Partial } -const createShadowToken = (shadow: Shadow, tokenName: string): SingleBoxShadowToken => { +const createShadowToken = ( + shadow: Shadow, + tokenName: string +): SingleBoxShadowToken => { return { name: tokenName, type: TokenTypes.BOX_SHADOW, - value: `${shadow.offset[0]}px ${shadow.offset[1]}px ${shadow.blur}px 0px ${shadow.color}` - }; -}; + value: `${shadow.offset[0]}px ${shadow.offset[1]}px ${shadow.blur}px 0px ${shadow.color}`, + } +} const popoverShadowToken = (colorScheme: ColorScheme): SingleBoxShadowToken => { - const shadow = colorScheme.popoverShadow; - return createShadowToken(shadow, "popoverShadow"); -}; + const shadow = colorScheme.popoverShadow + return createShadowToken(shadow, "popoverShadow") +} const modalShadowToken = (colorScheme: ColorScheme): SingleBoxShadowToken => { - const shadow = colorScheme.modalShadow; - return createShadowToken(shadow, "modalShadow"); -}; + const shadow = colorScheme.modalShadow + return createShadowToken(shadow, "modalShadow") +} type ThemeSyntaxColorTokens = Record -function syntaxHighlightStyleColorTokens(syntax: Syntax): ThemeSyntaxColorTokens { +function syntaxHighlightStyleColorTokens( + syntax: Syntax +): ThemeSyntaxColorTokens { const styleKeys = Object.keys(syntax) as (keyof Syntax)[] return styleKeys.reduce((acc, styleKey) => { @@ -46,13 +61,16 @@ function syntaxHighlightStyleColorTokens(syntax: Syntax): ThemeSyntaxColorTokens // This can happen because we have a "constructor" property on the syntax object // and a "constructor" property on the prototype of the syntax object // To work around this just assert that the type of the style is not a function - if (!syntax[styleKey] || typeof syntax[styleKey] === 'function') return acc; - const { color } = syntax[styleKey] as Required; - return { ...acc, [styleKey]: colorToken(styleKey, color) }; - }, {} as ThemeSyntaxColorTokens); + if (!syntax[styleKey] || typeof syntax[styleKey] === "function") + return acc + const { color } = syntax[styleKey] as Required + return { ...acc, [styleKey]: colorToken(styleKey, color) } + }, {} as ThemeSyntaxColorTokens) } -const syntaxTokens = (colorScheme: ColorScheme): ColorSchemeTokens['syntax'] => { +const syntaxTokens = ( + colorScheme: ColorScheme +): ColorSchemeTokens["syntax"] => { const syntax = editor(colorScheme).syntax return syntaxHighlightStyleColorTokens(syntax) diff --git a/styles/src/theme/tokens/layer.ts b/styles/src/theme/tokens/layer.ts index 3ee813b8c4..42a69b5a52 100644 --- a/styles/src/theme/tokens/layer.ts +++ b/styles/src/theme/tokens/layer.ts @@ -1,11 +1,11 @@ -import { SingleColorToken } from "@tokens-studio/types"; -import { Layer, Style, StyleSet } from "../colorScheme"; -import { colorToken } from "./token"; +import { SingleColorToken } from "@tokens-studio/types" +import { Layer, Style, StyleSet } from "../colorScheme" +import { colorToken } from "./token" interface StyleToken { - background: SingleColorToken, - border: SingleColorToken, - foreground: SingleColorToken, + background: SingleColorToken + border: SingleColorToken + foreground: SingleColorToken } interface StyleSetToken { @@ -37,24 +37,27 @@ export const styleToken = (style: Style, name: string): StyleToken => { return token } -export const styleSetToken = (styleSet: StyleSet, name: string): StyleSetToken => { - const token: StyleSetToken = {} as StyleSetToken; +export const styleSetToken = ( + styleSet: StyleSet, + name: string +): StyleSetToken => { + const token: StyleSetToken = {} as StyleSetToken for (const style in styleSet) { - const s = style as keyof StyleSet; - token[s] = styleToken(styleSet[s], `${name}${style}`); + const s = style as keyof StyleSet + token[s] = styleToken(styleSet[s], `${name}${style}`) } - return token; + return token } export const layerToken = (layer: Layer, name: string): LayerToken => { - const token: LayerToken = {} as LayerToken; + const token: LayerToken = {} as LayerToken for (const styleSet in layer) { - const s = styleSet as keyof Layer; - token[s] = styleSetToken(layer[s], `${name}${styleSet}`); + const s = styleSet as keyof Layer + token[s] = styleSetToken(layer[s], `${name}${styleSet}`) } - return token; + return token } diff --git a/styles/src/theme/tokens/players.ts b/styles/src/theme/tokens/players.ts index b5f5538b2e..94d05cd827 100644 --- a/styles/src/theme/tokens/players.ts +++ b/styles/src/theme/tokens/players.ts @@ -6,13 +6,21 @@ export type PlayerToken = Record<"selection" | "cursor", SingleColorToken> export type PlayersToken = Record -function buildPlayerToken(colorScheme: ColorScheme, index: number): PlayerToken { - +function buildPlayerToken( + colorScheme: ColorScheme, + index: number +): PlayerToken { const playerNumber = index.toString() as keyof Players return { - selection: colorToken(`player${index}Selection`, colorScheme.players[playerNumber].selection), - cursor: colorToken(`player${index}Cursor`, colorScheme.players[playerNumber].cursor), + selection: colorToken( + `player${index}Selection`, + colorScheme.players[playerNumber].selection + ), + cursor: colorToken( + `player${index}Cursor`, + colorScheme.players[playerNumber].cursor + ), } } @@ -24,5 +32,5 @@ export const playersToken = (colorScheme: ColorScheme): PlayersToken => ({ "4": buildPlayerToken(colorScheme, 4), "5": buildPlayerToken(colorScheme, 5), "6": buildPlayerToken(colorScheme, 6), - "7": buildPlayerToken(colorScheme, 7) + "7": buildPlayerToken(colorScheme, 7), }) diff --git a/styles/src/theme/tokens/token.ts b/styles/src/theme/tokens/token.ts index 3e5187dd64..2f1760778e 100644 --- a/styles/src/theme/tokens/token.ts +++ b/styles/src/theme/tokens/token.ts @@ -1,6 +1,10 @@ import { SingleColorToken, TokenTypes } from "@tokens-studio/types" -export function colorToken(name: string, value: string, description?: string): SingleColorToken { +export function colorToken( + name: string, + value: string, + description?: string +): SingleColorToken { const token: SingleColorToken = { name, type: TokenTypes.COLOR, @@ -8,7 +12,8 @@ export function colorToken(name: string, value: string, description?: string): S description, } - if (!token.value || token.value === '') throw new Error("Color token must have a value") + if (!token.value || token.value === "") + throw new Error("Color token must have a value") return token } diff --git a/styles/src/utils/slugify.ts b/styles/src/utils/slugify.ts index 62b226cd10..b5c3b3c519 100644 --- a/styles/src/utils/slugify.ts +++ b/styles/src/utils/slugify.ts @@ -1 +1,10 @@ -export function slugify(t: string): string { return t.toString().toLowerCase().replace(/\s+/g, '-').replace(/[^\w\-]+/g, '').replace(/\-\-+/g, '-').replace(/^-+/, '').replace(/-+$/, '') } +export function slugify(t: string): string { + return t + .toString() + .toLowerCase() + .replace(/\s+/g, "-") + .replace(/[^\w\-]+/g, "") + .replace(/\-\-+/g, "-") + .replace(/^-+/, "") + .replace(/-+$/, "") +} diff --git a/styles/tsconfig.json b/styles/tsconfig.json index 051626adbc..7a8ec69927 100644 --- a/styles/tsconfig.json +++ b/styles/tsconfig.json @@ -23,30 +23,14 @@ "skipLibCheck": true, "baseUrl": ".", "paths": { - "@/*": [ - "./*" - ], - "@element/*": [ - "./src/element/*" - ], - "@component/*": [ - "./src/component/*" - ], - "@styleTree/*": [ - "./src/styleTree/*" - ], - "@theme/*": [ - "./src/theme/*" - ], - "@themes/*": [ - "./src/themes/*" - ], - "@util/*": [ - "./src/util/*" - ] + "@/*": ["./*"], + "@element/*": ["./src/element/*"], + "@component/*": ["./src/component/*"], + "@styleTree/*": ["./src/styleTree/*"], + "@theme/*": ["./src/theme/*"], + "@themes/*": ["./src/themes/*"], + "@util/*": ["./src/util/*"] } }, - "exclude": [ - "node_modules" - ] + "exclude": ["node_modules"] } diff --git a/styles/vitest.config.ts b/styles/vitest.config.ts index 83bd50b9c6..00f3a9852d 100644 --- a/styles/vitest.config.ts +++ b/styles/vitest.config.ts @@ -1,8 +1,8 @@ -import { configDefaults, defineConfig } from 'vitest/config' +import { configDefaults, defineConfig } from "vitest/config" export default defineConfig({ test: { - exclude: [...configDefaults.exclude, 'target/*'], - include: ['src/**/*.{spec,test}.ts'], + exclude: [...configDefaults.exclude, "target/*"], + include: ["src/**/*.{spec,test}.ts"], }, }) From 040881df3f584036570f7e07ee3fee7002e5e81f Mon Sep 17 00:00:00 2001 From: Nate Butler Date: Fri, 16 Jun 2023 01:02:00 -0400 Subject: [PATCH 38/56] Update toggle --- styles/src/element/toggle.ts | 47 ++++++++++++++++++++++++++++++++++++ 1 file changed, 47 insertions(+) create mode 100644 styles/src/element/toggle.ts diff --git a/styles/src/element/toggle.ts b/styles/src/element/toggle.ts new file mode 100644 index 0000000000..2b6858e15b --- /dev/null +++ b/styles/src/element/toggle.ts @@ -0,0 +1,47 @@ +import merge from "ts-deepmerge" + +type ToggleState = "inactive" | "active" + +type Toggleable = Record + +const NO_INACTIVE_OR_BASE_ERROR = + "A toggleable object must have an inactive state, or a base property." +const NO_ACTIVE_ERROR = "A toggleable object must have an active state." + +interface ToggleableProps { + base?: T + state: Partial> +} + +/** + * Helper function for creating Toggleable objects. + * @template T The type of the object being toggled. + * @param props Object containing the base (inactive) state and state modifications to create the active state. + * @returns A Toggleable object containing both the inactive and active states. + * @example + * ``` + * toggleable({ + * base: { background: "#000000", text: "#CCCCCC" }, + * state: { active: { text: "#CCCCCC" } }, + * }) + * ``` + */ +export function toggleable( + props: ToggleableProps +): Toggleable { + const { base, state } = props + + if (!base && !state.inactive) throw new Error(NO_INACTIVE_OR_BASE_ERROR) + if (!state.active) throw new Error(NO_ACTIVE_ERROR) + + const inactiveState = base + ? ((state.inactive ? merge(base, state.inactive) : base) as T) + : (state.inactive as T) + + const toggleObj: Toggleable = { + inactive: inactiveState, + active: merge(base ?? {}, state.active) as T, + } + + return toggleObj +} From 61535ed41f62653efbd966fbf3d15d0632e0eb44 Mon Sep 17 00:00:00 2001 From: Nate Butler Date: Fri, 16 Jun 2023 01:11:02 -0400 Subject: [PATCH 39/56] Update toggle, add tests --- styles/src/element/index.ts | 3 +- styles/src/element/toggle.test.ts | 52 +++++++++++++++++++++ styles/src/element/toggle.ts | 4 +- styles/src/styleTree/commandPalette.ts | 3 +- styles/src/styleTree/contactList.ts | 3 +- styles/src/styleTree/contextMenu.ts | 3 +- styles/src/styleTree/editor.ts | 3 +- styles/src/styleTree/picker.ts | 3 +- styles/src/styleTree/projectPanel.ts | 3 +- styles/src/styleTree/search.ts | 3 +- styles/src/styleTree/statusBar.ts | 3 +- styles/src/styleTree/tabBar.ts | 3 +- styles/src/styleTree/toolbarDropdownMenu.ts | 3 +- styles/src/styleTree/workspace.ts | 2 +- 14 files changed, 67 insertions(+), 24 deletions(-) create mode 100644 styles/src/element/toggle.test.ts diff --git a/styles/src/element/index.ts b/styles/src/element/index.ts index ad58b89e0e..b1e3cfe415 100644 --- a/styles/src/element/index.ts +++ b/styles/src/element/index.ts @@ -1,3 +1,4 @@ import { interactive } from "./interactive" +import { toggleable } from "./toggle" -export { interactive } +export { interactive, toggleable } diff --git a/styles/src/element/toggle.test.ts b/styles/src/element/toggle.test.ts new file mode 100644 index 0000000000..8018ce1039 --- /dev/null +++ b/styles/src/element/toggle.test.ts @@ -0,0 +1,52 @@ +import { + NO_ACTIVE_ERROR, + NO_INACTIVE_OR_BASE_ERROR, + toggleable, +} from "./toggle" +import { describe, it, expect } from "vitest" + +describe("toggleable", () => { + it("creates a Toggleable with base properties and states", () => { + const result = toggleable({ + base: { background: "#000000", color: "#CCCCCC" }, + state: { + active: { color: "#FFFFFF" }, + }, + }) + + expect(result).toEqual({ + inactive: { background: "#000000", color: "#CCCCCC" }, + active: { background: "#000000", color: "#FFFFFF" }, + }) + }) + + it("creates a Toggleable with no base properties", () => { + const result = toggleable({ + state: { + inactive: { background: "#000000", color: "#CCCCCC" }, + active: { background: "#000000", color: "#FFFFFF" }, + }, + }) + + expect(result).toEqual({ + inactive: { background: "#000000", color: "#CCCCCC" }, + active: { background: "#000000", color: "#FFFFFF" }, + }) + }) + + it("throws error when both inactive and base are missing", () => { + const state = { + active: { background: "#000000", color: "#FFFFFF" }, + } + + expect(() => toggleable({ state })).toThrow(NO_INACTIVE_OR_BASE_ERROR) + }) + + it("throws error when no active state is present", () => { + const state = { + inactive: { background: "#000000", color: "#CCCCCC" }, + } + + expect(() => toggleable({ state })).toThrow(NO_ACTIVE_ERROR) + }) +}) diff --git a/styles/src/element/toggle.ts b/styles/src/element/toggle.ts index 2b6858e15b..84390810c0 100644 --- a/styles/src/element/toggle.ts +++ b/styles/src/element/toggle.ts @@ -4,9 +4,9 @@ type ToggleState = "inactive" | "active" type Toggleable = Record -const NO_INACTIVE_OR_BASE_ERROR = +export const NO_INACTIVE_OR_BASE_ERROR = "A toggleable object must have an inactive state, or a base property." -const NO_ACTIVE_ERROR = "A toggleable object must have an active state." +export const NO_ACTIVE_ERROR = "A toggleable object must have an active state." interface ToggleableProps { base?: T diff --git a/styles/src/styleTree/commandPalette.ts b/styles/src/styleTree/commandPalette.ts index ae0aae2f81..59e12945db 100644 --- a/styles/src/styleTree/commandPalette.ts +++ b/styles/src/styleTree/commandPalette.ts @@ -1,8 +1,7 @@ import { ColorScheme } from "../theme/colorScheme" import { withOpacity } from "../theme/color" import { text, background } from "./components" -import { toggleable } from "./toggle" -import { interactive } from "../element" +import { interactive, toggleable } from "../element" export default function commandPalette(colorScheme: ColorScheme) { let layer = colorScheme.highest diff --git a/styles/src/styleTree/contactList.ts b/styles/src/styleTree/contactList.ts index 5c6068408e..2ac17a4584 100644 --- a/styles/src/styleTree/contactList.ts +++ b/styles/src/styleTree/contactList.ts @@ -1,7 +1,6 @@ import { ColorScheme } from "../theme/colorScheme" import { background, border, borderColor, foreground, text } from "./components" -import { toggleable } from "./toggle" -import { interactive } from "../element" +import { interactive, toggleable } from "../element" export default function contactsPanel(colorScheme: ColorScheme) { const nameMargin = 8 const sidePadding = 12 diff --git a/styles/src/styleTree/contextMenu.ts b/styles/src/styleTree/contextMenu.ts index 6f5eb53640..90ba0ce5b5 100644 --- a/styles/src/styleTree/contextMenu.ts +++ b/styles/src/styleTree/contextMenu.ts @@ -1,7 +1,6 @@ import { ColorScheme } from "../theme/colorScheme" import { background, border, borderColor, text } from "./components" -import { interactive } from "../element" -import { toggleable } from "./toggle" +import { interactive, toggleable } from "../element" export default function contextMenu(colorScheme: ColorScheme) { let layer = colorScheme.middle diff --git a/styles/src/styleTree/editor.ts b/styles/src/styleTree/editor.ts index 9dec64b0ce..e029a724a3 100644 --- a/styles/src/styleTree/editor.ts +++ b/styles/src/styleTree/editor.ts @@ -4,8 +4,7 @@ import { background, border, borderColor, foreground, text } from "./components" import hoverPopover from "./hoverPopover" import { buildSyntax } from "../theme/syntax" -import { interactive } from "../element" -import { toggleable } from "./toggle" +import { interactive, toggleable } from "../element" export default function editor(colorScheme: ColorScheme) { const { isLight } = colorScheme diff --git a/styles/src/styleTree/picker.ts b/styles/src/styleTree/picker.ts index 7730395ec9..12fecfa6f8 100644 --- a/styles/src/styleTree/picker.ts +++ b/styles/src/styleTree/picker.ts @@ -1,8 +1,7 @@ import { ColorScheme } from "../theme/colorScheme" import { withOpacity } from "../theme/color" import { background, border, text } from "./components" -import { toggleable } from "./toggle" -import { interactive } from "../element" +import { interactive, toggleable } from "../element" export default function picker(colorScheme: ColorScheme): any { let layer = colorScheme.lowest diff --git a/styles/src/styleTree/projectPanel.ts b/styles/src/styleTree/projectPanel.ts index 23df2fbf58..5f283e551d 100644 --- a/styles/src/styleTree/projectPanel.ts +++ b/styles/src/styleTree/projectPanel.ts @@ -1,8 +1,7 @@ import { ColorScheme } from "../theme/colorScheme" import { withOpacity } from "../theme/color" import { background, border, foreground, text } from "./components" -import { interactive } from "../element" -import { toggleable } from "./toggle" +import { interactive, toggleable } from "../element" export default function projectPanel(colorScheme: ColorScheme) { const { isLight } = colorScheme diff --git a/styles/src/styleTree/search.ts b/styles/src/styleTree/search.ts index a95296971c..4b0869f10e 100644 --- a/styles/src/styleTree/search.ts +++ b/styles/src/styleTree/search.ts @@ -1,8 +1,7 @@ import { ColorScheme } from "../theme/colorScheme" import { withOpacity } from "../theme/color" import { background, border, foreground, text } from "./components" -import { interactive } from "../element" -import { toggleable } from "./toggle" +import { interactive, toggleable } from "../element" export default function search(colorScheme: ColorScheme) { let layer = colorScheme.highest diff --git a/styles/src/styleTree/statusBar.ts b/styles/src/styleTree/statusBar.ts index 8a91b7eaac..d6d7eda732 100644 --- a/styles/src/styleTree/statusBar.ts +++ b/styles/src/styleTree/statusBar.ts @@ -1,7 +1,6 @@ import { ColorScheme } from "../theme/colorScheme" import { background, border, foreground, text } from "./components" -import { interactive } from "../element" -import { toggleable } from "./toggle" +import { interactive, toggleable } from "../element" export default function statusBar(colorScheme: ColorScheme) { let layer = colorScheme.lowest diff --git a/styles/src/styleTree/tabBar.ts b/styles/src/styleTree/tabBar.ts index c2b5de0215..e00f0b8b83 100644 --- a/styles/src/styleTree/tabBar.ts +++ b/styles/src/styleTree/tabBar.ts @@ -1,8 +1,7 @@ import { ColorScheme } from "../theme/colorScheme" import { withOpacity } from "../theme/color" import { text, border, background, foreground } from "./components" -import { toggleable } from "./toggle" -import { interactive } from "../element" +import { interactive, toggleable } from "../element" export default function tabBar(colorScheme: ColorScheme) { const height = 32 diff --git a/styles/src/styleTree/toolbarDropdownMenu.ts b/styles/src/styleTree/toolbarDropdownMenu.ts index 1f47c85f4e..3ce7ca7d7c 100644 --- a/styles/src/styleTree/toolbarDropdownMenu.ts +++ b/styles/src/styleTree/toolbarDropdownMenu.ts @@ -1,7 +1,6 @@ import { ColorScheme } from "../theme/colorScheme" import { background, border, text } from "./components" -import { interactive } from "../element" -import { toggleable } from "./toggle" +import { interactive, toggleable } from "../element" export default function dropdownMenu(colorScheme: ColorScheme) { let layer = colorScheme.middle diff --git a/styles/src/styleTree/workspace.ts b/styles/src/styleTree/workspace.ts index 79e7830aec..a2a21eaff4 100644 --- a/styles/src/styleTree/workspace.ts +++ b/styles/src/styleTree/workspace.ts @@ -1,6 +1,6 @@ import { ColorScheme } from "../theme/colorScheme" import { withOpacity } from "../theme/color" -import { toggleable } from "./toggle" +import { toggleable } from "../element" import { background, border, From ae53c3e6232e30d37fb33fbe4162c07a472b1a67 Mon Sep 17 00:00:00 2001 From: Nate Butler Date: Fri, 16 Jun 2023 01:41:10 -0400 Subject: [PATCH 40/56] WIP: Start updating style trees to new `toggle()` format. --- styles/src/styleTree/commandPalette.ts | 62 +++++++++++++------------- styles/src/styleTree/contactList.ts | 18 ++++---- 2 files changed, 42 insertions(+), 38 deletions(-) diff --git a/styles/src/styleTree/commandPalette.ts b/styles/src/styleTree/commandPalette.ts index 59e12945db..cb6bb0503a 100644 --- a/styles/src/styleTree/commandPalette.ts +++ b/styles/src/styleTree/commandPalette.ts @@ -1,40 +1,42 @@ import { ColorScheme } from "../theme/colorScheme" import { withOpacity } from "../theme/color" import { text, background } from "./components" -import { interactive, toggleable } from "../element" +import { toggleable } from "../element" export default function commandPalette(colorScheme: ColorScheme) { let layer = colorScheme.highest + + const key = toggleable({ + base: { + text: text(layer, "mono", "variant", "default", { size: "xs" }), + cornerRadius: 2, + background: background(layer, "on"), + padding: { + top: 1, + bottom: 1, + left: 6, + right: 6, + }, + margin: { + top: 1, + bottom: 1, + left: 2, + }, + }, + state: { + active: { + text: text(layer, "mono", "on", "default", { size: "xs" }), + background: withOpacity(background(layer, "on"), 0.2), + } + } + }) + return { keystrokeSpacing: 8, - key: toggleable( - interactive({ - base: { - text: text(layer, "mono", "variant", "default", { - size: "xs", - }), - cornerRadius: 2, - background: background(layer, "on"), - padding: { - top: 1, - bottom: 1, - left: 6, - right: 6, - }, - margin: { - top: 1, - bottom: 1, - left: 2, - }, - }, - state: { hovered: { cornerRadius: 4, padding: { top: 17 } } }, - }), - { - default: { - text: text(layer, "mono", "on", "default", { size: "xs" }), - background: withOpacity(background(layer, "on"), 0.2), - }, - } - ), + // TODO: This should be a Toggle on the rust side so we don't have to do this + key: { + ...key.inactive, + active: key.active, + } } } diff --git a/styles/src/styleTree/contactList.ts b/styles/src/styleTree/contactList.ts index 2ac17a4584..1f38b9b376 100644 --- a/styles/src/styleTree/contactList.ts +++ b/styles/src/styleTree/contactList.ts @@ -71,8 +71,8 @@ export default function contactsPanel(colorScheme: ColorScheme) { }, rowHeight: 28, sectionIconSize: 8, - headerRow: toggleable( - interactive({ + headerRow: toggleable({ + base: interactive({ base: { ...text(layer, "mono", { size: "sm" }), margin: { top: 14 }, @@ -86,13 +86,15 @@ export default function contactsPanel(colorScheme: ColorScheme) { hovered: { background: background(layer, "default") }, }, // hack, we want headerRow to be interactive for whatever reason. It probably shouldn't be interactive in the first place. }), - { - default: { - ...text(layer, "mono", "active", { size: "sm" }), - background: background(layer, "active"), - }, + state: { + active: { + default: { + ...text(layer, "mono", "active", { size: "sm" }), + background: background(layer, "active"), + }, + } } - ), + }), leaveCall: interactive({ base: { background: background(layer), From 60b4054b0a28580e1ebd99205433317fe58577b1 Mon Sep 17 00:00:00 2001 From: Piotr Osiewicz <24362066+osiewicz@users.noreply.github.com> Date: Fri, 16 Jun 2023 14:30:16 +0200 Subject: [PATCH 41/56] Fix up toggles --- .../src/activity_indicator.rs | 2 +- crates/command_palette/src/command_palette.rs | 6 +- crates/theme/src/theme.rs | 12 +- styles/src/element/interactive.ts | 119 +-- styles/src/element/toggle.ts | 32 +- styles/src/styleTree/commandPalette.ts | 66 +- styles/src/styleTree/contactList.ts | 420 +++++----- styles/src/styleTree/contextMenu.ts | 108 +-- styles/src/styleTree/editor.ts | 558 ++++++------- styles/src/styleTree/picker.ts | 170 ++-- styles/src/styleTree/projectPanel.ts | 216 ++--- styles/src/styleTree/search.ts | 226 ++--- styles/src/styleTree/statusBar.ts | 272 +++--- styles/src/styleTree/tabBar.ts | 201 ++--- styles/src/styleTree/toolbarDropdownMenu.ts | 108 +-- styles/src/styleTree/workspace.ts | 774 +++++++++--------- 16 files changed, 1670 insertions(+), 1620 deletions(-) diff --git a/crates/activity_indicator/src/activity_indicator.rs b/crates/activity_indicator/src/activity_indicator.rs index 801c8f7172..f795d7321c 100644 --- a/crates/activity_indicator/src/activity_indicator.rs +++ b/crates/activity_indicator/src/activity_indicator.rs @@ -326,7 +326,7 @@ impl View for ActivityIndicator { let mut element = MouseEventHandler::::new(0, cx, |state, cx| { let theme = &theme::current(cx).workspace.status_bar.lsp_status; let style = if state.hovered() && on_click.is_some() { - theme.hover.as_ref().unwrap_or(&theme.default) + theme.hovered.as_ref().unwrap_or(&theme.default) } else { &theme.default }; diff --git a/crates/command_palette/src/command_palette.rs b/crates/command_palette/src/command_palette.rs index e7e7462fd9..aec876bd78 100644 --- a/crates/command_palette/src/command_palette.rs +++ b/crates/command_palette/src/command_palette.rs @@ -186,11 +186,7 @@ impl PickerDelegate for CommandPaletteDelegate { let command = &self.actions[mat.candidate_id]; let theme = theme::current(cx); let style = theme.picker.item.in_state(selected).style_for(mouse_state); - let key_style = &theme - .command_palette - .key - .in_state(selected) - .style_for(mouse_state); + let key_style = &theme.command_palette.key.in_state(selected); let keystroke_spacing = theme.command_palette.keystroke_spacing; Flex::row() diff --git a/crates/theme/src/theme.rs b/crates/theme/src/theme.rs index fd30387ad8..8f9f228129 100644 --- a/crates/theme/src/theme.rs +++ b/crates/theme/src/theme.rs @@ -498,7 +498,7 @@ pub struct ContextMenuItem { #[derive(Debug, Deserialize, Default)] pub struct CommandPalette { - pub key: Toggleable>, + pub key: Toggleable, pub keystroke_spacing: f32, } @@ -805,7 +805,7 @@ pub struct DiffStyle { #[derive(Debug, Default, Clone, Copy)] pub struct Interactive { pub default: T, - pub hover: Option, + pub hovered: Option, pub clicked: Option, pub disabled: Option, } @@ -855,7 +855,7 @@ impl Interactive { if state.clicked() == Some(platform::MouseButton::Left) && self.clicked.is_some() { self.clicked.as_ref().unwrap() } else if state.hovered() { - self.hover.as_ref().unwrap_or(&self.default) + self.hovered.as_ref().unwrap_or(&self.default) } else { &self.default } @@ -873,7 +873,7 @@ impl<'de, T: DeserializeOwned> Deserialize<'de> for Interactive { #[derive(Deserialize)] struct Helper { default: Value, - hover: Option, + hovered: Option, clicked: Option, disabled: Option, } @@ -899,14 +899,14 @@ impl<'de, T: DeserializeOwned> Deserialize<'de> for Interactive { } }; - let hover = deserialize_state(json.hover)?; + let hovered = deserialize_state(json.hovered)?; let clicked = deserialize_state(json.clicked)?; let disabled = deserialize_state(json.disabled)?; let default = serde_json::from_value(json.default).map_err(serde::de::Error::custom)?; Ok(Interactive { default, - hover, + hovered, clicked, disabled, }) diff --git a/styles/src/element/interactive.ts b/styles/src/element/interactive.ts index 5d9772d313..bd90e28aad 100644 --- a/styles/src/element/interactive.ts +++ b/styles/src/element/interactive.ts @@ -1,28 +1,29 @@ import merge from "ts-deepmerge" +import { DeepPartial } from "utility-types" type InteractiveState = - | "default" - | "hovered" - | "clicked" - | "selected" - | "disabled" + | "default" + | "hovered" + | "clicked" + | "selected" + | "disabled" type Interactive = { - default: T - hovered?: T - clicked?: T - selected?: T - disabled?: T + default: T + hovered?: T + clicked?: T + selected?: T + disabled?: T } export const NO_DEFAULT_OR_BASE_ERROR = - "An interactive object must have a default state, or a base property." + "An interactive object must have a default state, or a base property." export const NOT_ENOUGH_STATES_ERROR = - "An interactive object must have a default and at least one other state." + "An interactive object must have a default and at least one other state." interface InteractiveProps { - base?: T - state: Partial> + base?: T + state: Partial>> } /** @@ -37,60 +38,60 @@ interface InteractiveProps { * @returns Interactive object with fields from `base` and `state`. */ export function interactive({ - base, - state, + base, + state, }: InteractiveProps): Interactive { - if (!base && !state.default) throw new Error(NO_DEFAULT_OR_BASE_ERROR) + if (!base && !state.default) throw new Error(NO_DEFAULT_OR_BASE_ERROR) - let defaultState: T + let defaultState: T - if (state.default && base) { - defaultState = merge(base, state.default) as T - } else { - defaultState = base ? base : (state.default as T) - } + if (state.default && base) { + defaultState = merge(base, state.default) as T + } else { + defaultState = base ? base : (state.default as T) + } - let interactiveObj: Interactive = { - default: defaultState, - } + let interactiveObj: Interactive = { + default: defaultState, + } - let stateCount = 0 + let stateCount = 0 - if (state.hovered !== undefined) { - interactiveObj.hovered = merge( - interactiveObj.default, - state.hovered - ) as T - stateCount++ - } + if (state.hovered !== undefined) { + interactiveObj.hovered = merge( + interactiveObj.default, + state.hovered + ) as T + stateCount++ + } - if (state.clicked !== undefined) { - interactiveObj.clicked = merge( - interactiveObj.default, - state.clicked - ) as T - stateCount++ - } + if (state.clicked !== undefined) { + interactiveObj.clicked = merge( + interactiveObj.default, + state.clicked + ) as T + stateCount++ + } - if (state.selected !== undefined) { - interactiveObj.selected = merge( - interactiveObj.default, - state.selected - ) as T - stateCount++ - } + if (state.selected !== undefined) { + interactiveObj.selected = merge( + interactiveObj.default, + state.selected + ) as T + stateCount++ + } - if (state.disabled !== undefined) { - interactiveObj.disabled = merge( - interactiveObj.default, - state.disabled - ) as T - stateCount++ - } + if (state.disabled !== undefined) { + interactiveObj.disabled = merge( + interactiveObj.default, + state.disabled + ) as T + stateCount++ + } - if (stateCount < 1) { - throw new Error(NOT_ENOUGH_STATES_ERROR) - } + if (stateCount < 1) { + throw new Error(NOT_ENOUGH_STATES_ERROR) + } - return interactiveObj + return interactiveObj } diff --git a/styles/src/element/toggle.ts b/styles/src/element/toggle.ts index 84390810c0..cbf28b71e7 100644 --- a/styles/src/element/toggle.ts +++ b/styles/src/element/toggle.ts @@ -1,16 +1,17 @@ import merge from "ts-deepmerge" +import { DeepPartial } from "utility-types" type ToggleState = "inactive" | "active" type Toggleable = Record export const NO_INACTIVE_OR_BASE_ERROR = - "A toggleable object must have an inactive state, or a base property." + "A toggleable object must have an inactive state, or a base property." export const NO_ACTIVE_ERROR = "A toggleable object must have an active state." interface ToggleableProps { - base?: T - state: Partial> + base?: T + state: Partial>> } /** @@ -27,21 +28,20 @@ interface ToggleableProps { * ``` */ export function toggleable( - props: ToggleableProps + props: ToggleableProps ): Toggleable { - const { base, state } = props + const { base, state } = props - if (!base && !state.inactive) throw new Error(NO_INACTIVE_OR_BASE_ERROR) - if (!state.active) throw new Error(NO_ACTIVE_ERROR) + if (!base && !state.inactive) throw new Error(NO_INACTIVE_OR_BASE_ERROR) + if (!state.active) throw new Error(NO_ACTIVE_ERROR) - const inactiveState = base - ? ((state.inactive ? merge(base, state.inactive) : base) as T) - : (state.inactive as T) + const inactiveState = base + ? ((state.inactive ? merge(base, state.inactive) : base) as T) + : (state.inactive as T) - const toggleObj: Toggleable = { - inactive: inactiveState, - active: merge(base ?? {}, state.active) as T, - } - - return toggleObj + const toggleObj: Toggleable = { + inactive: inactiveState, + active: merge(base ?? {}, state.active) as T, + } + return toggleObj } diff --git a/styles/src/styleTree/commandPalette.ts b/styles/src/styleTree/commandPalette.ts index cb6bb0503a..947e730f55 100644 --- a/styles/src/styleTree/commandPalette.ts +++ b/styles/src/styleTree/commandPalette.ts @@ -4,39 +4,39 @@ import { text, background } from "./components" import { toggleable } from "../element" export default function commandPalette(colorScheme: ColorScheme) { - let layer = colorScheme.highest + let layer = colorScheme.highest - const key = toggleable({ - base: { - text: text(layer, "mono", "variant", "default", { size: "xs" }), - cornerRadius: 2, - background: background(layer, "on"), - padding: { - top: 1, - bottom: 1, - left: 6, - right: 6, - }, - margin: { - top: 1, - bottom: 1, - left: 2, - }, - }, - state: { - active: { - text: text(layer, "mono", "on", "default", { size: "xs" }), - background: withOpacity(background(layer, "on"), 0.2), - } - } - }) - - return { - keystrokeSpacing: 8, - // TODO: This should be a Toggle on the rust side so we don't have to do this - key: { - ...key.inactive, - active: key.active, - } + const key = toggleable({ + base: { + text: text(layer, "mono", "variant", "default", { size: "xs" }), + cornerRadius: 2, + background: background(layer, "on"), + padding: { + top: 1, + bottom: 1, + left: 6, + right: 6, + }, + margin: { + top: 1, + bottom: 1, + left: 2, + }, + }, + state: { + active: { + text: text(layer, "mono", "on", "default", { size: "xs" }), + background: withOpacity(background(layer, "on"), 0.2), + } } + }) + + return { + keystrokeSpacing: 8, + // TODO: This should be a Toggle on the rust side so we don't have to do this + key: { + inactive: { ...key.inactive }, + active: key.active, + } + } } diff --git a/styles/src/styleTree/contactList.ts b/styles/src/styleTree/contactList.ts index 1f38b9b376..d5ecb1c224 100644 --- a/styles/src/styleTree/contactList.ts +++ b/styles/src/styleTree/contactList.ts @@ -2,224 +2,232 @@ import { ColorScheme } from "../theme/colorScheme" import { background, border, borderColor, foreground, text } from "./components" import { interactive, toggleable } from "../element" export default function contactsPanel(colorScheme: ColorScheme) { - const nameMargin = 8 - const sidePadding = 12 + const nameMargin = 8 + const sidePadding = 12 - let layer = colorScheme.middle + let layer = colorScheme.middle - const contactButton = { - background: background(layer, "on"), - color: foreground(layer, "on"), - iconWidth: 8, - buttonWidth: 16, - cornerRadius: 8, - } - const projectRow = { - guestAvatarSpacing: 4, - height: 24, - guestAvatar: { - cornerRadius: 8, - width: 14, - }, - name: { - ...text(layer, "mono", { size: "sm" }), - margin: { - left: nameMargin, - right: 6, - }, - }, - guests: { - margin: { - left: nameMargin, - right: nameMargin, - }, - }, - padding: { + const contactButton = { + background: background(layer, "on"), + color: foreground(layer, "on"), + iconWidth: 8, + buttonWidth: 16, + cornerRadius: 8, + } + const projectRow = { + guestAvatarSpacing: 4, + height: 24, + guestAvatar: { + cornerRadius: 8, + width: 14, + }, + name: { + ...text(layer, "mono", { size: "sm" }), + margin: { + left: nameMargin, + right: 6, + }, + }, + guests: { + margin: { + left: nameMargin, + right: nameMargin, + }, + }, + padding: { + left: sidePadding, + right: sidePadding, + }, + } + + return { + background: background(layer), + padding: { top: 12 }, + userQueryEditor: { + background: background(layer, "on"), + cornerRadius: 6, + text: text(layer, "mono", "on"), + placeholderText: text(layer, "mono", "on", "disabled", { + size: "xs", + }), + selection: colorScheme.players[0], + border: border(layer, "on"), + padding: { + bottom: 4, + left: 8, + right: 8, + top: 4, + }, + margin: { + left: 6, + }, + }, + userQueryEditorHeight: 33, + addContactButton: { + margin: { left: 6, right: 12 }, + color: foreground(layer, "on"), + buttonWidth: 28, + iconWidth: 16, + }, + rowHeight: 28, + sectionIconSize: 8, + headerRow: toggleable({ + base: interactive({ + base: { + ...text(layer, "mono", { size: "sm" }), + margin: { top: 14 }, + padding: { left: sidePadding, right: sidePadding, + }, + background: background(layer, "default"), // posiewic: breaking change }, - } - - return { + state: { + hovered: { background: background(layer, "default") }, + }, // hack, we want headerRow to be interactive for whatever reason. It probably shouldn't be interactive in the first place. + }), + state: { + active: { + default: { + ...text(layer, "mono", "active", { size: "sm" }), + background: background(layer, "active"), + }, + } + } + }), + leaveCall: interactive({ + base: { background: background(layer), - padding: { top: 12 }, - userQueryEditor: { - background: background(layer, "on"), - cornerRadius: 6, - text: text(layer, "mono", "on"), - placeholderText: text(layer, "mono", "on", "disabled", { - size: "xs", - }), - selection: colorScheme.players[0], - border: border(layer, "on"), - padding: { - bottom: 4, - left: 8, - right: 8, - top: 4, - }, - margin: { - left: 6, - }, + border: border(layer), + cornerRadius: 6, + margin: { + top: 1, }, - userQueryEditorHeight: 33, - addContactButton: { - margin: { left: 6, right: 12 }, - color: foreground(layer, "on"), - buttonWidth: 28, - iconWidth: 16, + padding: { + top: 1, + bottom: 1, + left: 7, + right: 7, }, - rowHeight: 28, - sectionIconSize: 8, - headerRow: toggleable({ - base: interactive({ - base: { - ...text(layer, "mono", { size: "sm" }), - margin: { top: 14 }, - padding: { - left: sidePadding, - right: sidePadding, - }, - background: background(layer, "default"), // posiewic: breaking change - }, - state: { - hovered: { background: background(layer, "default") }, - }, // hack, we want headerRow to be interactive for whatever reason. It probably shouldn't be interactive in the first place. - }), - state: { - active: { - default: { - ...text(layer, "mono", "active", { size: "sm" }), - background: background(layer, "active"), - }, - } - } - }), - leaveCall: interactive({ - base: { - background: background(layer), - border: border(layer), - cornerRadius: 6, - margin: { - top: 1, - }, - padding: { - top: 1, - bottom: 1, - left: 7, - right: 7, - }, - ...text(layer, "sans", "variant", { size: "xs" }), - }, - state: { - hovered: { - ...text(layer, "sans", "hovered", { size: "xs" }), - background: background(layer, "hovered"), - border: border(layer, "hovered"), - }, - }, - }), - contactRow: { - inactive: { - default: { - padding: { - left: sidePadding, - right: sidePadding, - }, - }, - }, - active: { - default: { - background: background(layer, "active"), - padding: { - left: sidePadding, - right: sidePadding, - }, - }, - }, + ...text(layer, "sans", "variant", { size: "xs" }), + }, + state: { + hovered: { + ...text(layer, "sans", "hovered", { size: "xs" }), + background: background(layer, "hovered"), + border: border(layer, "hovered"), }, + }, + }), + contactRow: { + inactive: { + default: { + padding: { + left: sidePadding, + right: sidePadding, + }, + }, + }, + active: { + default: { + background: background(layer, "active"), + padding: { + left: sidePadding, + right: sidePadding, + }, + }, + }, + }, - contactAvatar: { - cornerRadius: 10, - width: 18, + contactAvatar: { + cornerRadius: 10, + width: 18, + }, + contactStatusFree: { + cornerRadius: 4, + padding: 4, + margin: { top: 12, left: 12 }, + background: foreground(layer, "positive"), + }, + contactStatusBusy: { + cornerRadius: 4, + padding: 4, + margin: { top: 12, left: 12 }, + background: foreground(layer, "negative"), + }, + contactUsername: { + ...text(layer, "mono", { size: "sm" }), + margin: { + left: nameMargin, + }, + }, + contactButtonSpacing: nameMargin, + contactButton: interactive({ + base: { ...contactButton }, + state: { + hovered: { + background: background(layer, "hovered"), }, - contactStatusFree: { - cornerRadius: 4, - padding: 4, - margin: { top: 12, left: 12 }, - background: foreground(layer, "positive"), - }, - contactStatusBusy: { - cornerRadius: 4, - padding: 4, - margin: { top: 12, left: 12 }, - background: foreground(layer, "negative"), - }, - contactUsername: { - ...text(layer, "mono", { size: "sm" }), - margin: { - left: nameMargin, - }, - }, - contactButtonSpacing: nameMargin, - contactButton: interactive({ - base: { ...contactButton }, - state: { - hovered: { - background: background(layer, "hovered"), - }, + }, + }), + disabledButton: { + ...contactButton, + background: background(layer, "on"), + color: foreground(layer, "on"), + }, + callingIndicator: { + ...text(layer, "mono", "variant", { size: "xs" }), + }, + treeBranch: toggleable({ + base: + interactive({ + base: { + color: borderColor(layer), + width: 1, + }, + state: { + hovered: { + color: borderColor(layer), }, + }, }), - disabledButton: { - ...contactButton, - background: background(layer, "on"), - color: foreground(layer, "on"), - }, - callingIndicator: { - ...text(layer, "mono", "variant", { size: "xs" }), - }, - treeBranch: toggleable( - interactive({ - base: { - color: borderColor(layer), - width: 1, - }, - state: { - hovered: { - color: borderColor(layer), - }, - }, - }), - { - default: { - color: borderColor(layer), - }, - } - ), - projectRow: toggleable( - interactive({ - base: { - ...projectRow, - background: background(layer), - icon: { - margin: { left: nameMargin }, - color: foreground(layer, "variant"), - width: 12, - }, - name: { - ...projectRow.name, - ...text(layer, "mono", { size: "sm" }), - }, - }, - state: { - hovered: { - background: background(layer, "hovered"), - }, - }, - }), - { - default: { background: background(layer, "active") }, - } - ), + state: { + active: { + default: { + color: borderColor(layer), + }, + } + } } + ), + projectRow: toggleable({ + base: + interactive({ + base: { + ...projectRow, + background: background(layer), + icon: { + margin: { left: nameMargin }, + color: foreground(layer, "variant"), + width: 12, + }, + name: { + ...projectRow.name, + ...text(layer, "mono", { size: "sm" }), + }, + }, + state: { + hovered: { + background: background(layer, "hovered"), + }, + }, + }), + state: { + active: { + default: { background: background(layer, "active") }, + } + } + } + ), + } } diff --git a/styles/src/styleTree/contextMenu.ts b/styles/src/styleTree/contextMenu.ts index 90ba0ce5b5..661742f800 100644 --- a/styles/src/styleTree/contextMenu.ts +++ b/styles/src/styleTree/contextMenu.ts @@ -3,57 +3,61 @@ import { background, border, borderColor, text } from "./components" import { interactive, toggleable } from "../element" export default function contextMenu(colorScheme: ColorScheme) { - let layer = colorScheme.middle - return { - background: background(layer), - cornerRadius: 10, - padding: 4, - shadow: colorScheme.popoverShadow, - border: border(layer), - keystrokeMargin: 30, - item: toggleable( - interactive({ - base: { - iconSpacing: 8, - iconWidth: 14, - padding: { left: 6, right: 6, top: 2, bottom: 2 }, - cornerRadius: 6, - label: text(layer, "sans", { size: "sm" }), - keystroke: { - ...text(layer, "sans", "variant", { - size: "sm", - weight: "bold", - }), - padding: { left: 3, right: 3 }, - }, - }, - state: { - hovered: { - background: background(layer, "hovered"), - label: text(layer, "sans", "hovered", { size: "sm" }), - keystroke: { - ...text(layer, "sans", "hovered", { - size: "sm", - weight: "bold", - }), - padding: { left: 3, right: 3 }, - }, - }, - }, - }), - { - default: { - background: background(layer, "active"), - }, - hovered: { - background: background(layer, "active"), - }, - } - ), - - separator: { - background: borderColor(layer), - margin: { top: 2, bottom: 2 }, - }, + let layer = colorScheme.middle + return { + background: background(layer), + cornerRadius: 10, + padding: 4, + shadow: colorScheme.popoverShadow, + border: border(layer), + keystrokeMargin: 30, + item: toggleable({ + base: + interactive({ + base: { + iconSpacing: 8, + iconWidth: 14, + padding: { left: 6, right: 6, top: 2, bottom: 2 }, + cornerRadius: 6, + label: text(layer, "sans", { size: "sm" }), + keystroke: { + ...text(layer, "sans", "variant", { + size: "sm", + weight: "bold", + }), + padding: { left: 3, right: 3 }, + }, + }, + state: { + hovered: { + background: background(layer, "hovered"), + label: text(layer, "sans", "hovered", { size: "sm" }), + keystroke: { + ...text(layer, "sans", "hovered", { + size: "sm", + weight: "bold", + }), + padding: { left: 3, right: 3 }, + }, + }, + }, + }), + state: { + active: { + default: { + background: background(layer, "active"), + }, + hovered: { + background: background(layer, "active"), + }, + } + } } + ), + + separator: { + background: borderColor(layer), + margin: { top: 2, bottom: 2 }, + }, + } } diff --git a/styles/src/styleTree/editor.ts b/styles/src/styleTree/editor.ts index e029a724a3..2437257875 100644 --- a/styles/src/styleTree/editor.ts +++ b/styles/src/styleTree/editor.ts @@ -7,295 +7,303 @@ import { buildSyntax } from "../theme/syntax" import { interactive, toggleable } from "../element" export default function editor(colorScheme: ColorScheme) { - const { isLight } = colorScheme + const { isLight } = colorScheme - let layer = colorScheme.highest + let layer = colorScheme.highest - const autocompleteItem = { - cornerRadius: 6, - padding: { - bottom: 2, - left: 6, - right: 6, - top: 2, - }, - } - - function diagnostic(layer: Layer, styleSet: StyleSets) { - return { - textScaleFactor: 0.857, - header: { - border: border(layer, { - top: true, - }), - }, - message: { - text: text(layer, "sans", styleSet, "default", { size: "sm" }), - highlightText: text(layer, "sans", styleSet, "default", { - size: "sm", - weight: "bold", - }), - }, - } - } - - const syntax = buildSyntax(colorScheme) + const autocompleteItem = { + cornerRadius: 6, + padding: { + bottom: 2, + left: 6, + right: 6, + top: 2, + }, + } + function diagnostic(layer: Layer, styleSet: StyleSets) { return { - textColor: syntax.primary.color, - background: background(layer), - activeLineBackground: withOpacity(background(layer, "on"), 0.75), - highlightedLineBackground: background(layer, "on"), - // Inline autocomplete suggestions, Co-pilot suggestions, etc. - suggestion: syntax.predictive, - codeActions: { - indicator: toggleable( - interactive({ - base: { - color: foreground(layer, "variant"), - }, - state: { - clicked: { - color: foreground(layer, "base"), - }, - hovered: { - color: foreground(layer, "on"), - }, - }, - }), - { - default: { - color: foreground(layer, "on"), - }, - } - ), + textScaleFactor: 0.857, + header: { + border: border(layer, { + top: true, + }), + }, + message: { + text: text(layer, "sans", styleSet, "default", { size: "sm" }), + highlightText: text(layer, "sans", styleSet, "default", { + size: "sm", + weight: "bold", + }), + }, + } + } - verticalScale: 0.55, - }, - folds: { - iconMarginScale: 2.5, - foldedIcon: "icons/chevron_right_8.svg", - foldableIcon: "icons/chevron_down_8.svg", - indicator: toggleable( - interactive({ - base: { - color: foreground(layer, "variant"), - }, - state: { - clicked: { - color: foreground(layer, "base"), - }, - hovered: { - color: foreground(layer, "on"), - }, - }, - }), - { - default: { - color: foreground(layer, "on"), - }, - } - ), - ellipses: { - textColor: colorScheme.ramps.neutral(0.71).hex(), - cornerRadiusFactor: 0.15, - background: { - // Copied from hover_popover highlight - default: { - color: colorScheme.ramps.neutral(0.5).alpha(0.0).hex(), - }, + const syntax = buildSyntax(colorScheme) - hover: { - color: colorScheme.ramps.neutral(0.5).alpha(0.5).hex(), - }, - - clicked: { - color: colorScheme.ramps.neutral(0.5).alpha(0.7).hex(), - }, - }, - }, - foldBackground: foreground(layer, "variant"), - }, - diff: { - deleted: isLight - ? colorScheme.ramps.red(0.5).hex() - : colorScheme.ramps.red(0.4).hex(), - modified: isLight - ? colorScheme.ramps.yellow(0.5).hex() - : colorScheme.ramps.yellow(0.5).hex(), - inserted: isLight - ? colorScheme.ramps.green(0.4).hex() - : colorScheme.ramps.green(0.5).hex(), - removedWidthEm: 0.275, - widthEm: 0.15, - cornerRadius: 0.05, - }, - /** Highlights matching occurrences of what is under the cursor - * as well as matched brackets - */ - documentHighlightReadBackground: withOpacity( - foreground(layer, "accent"), - 0.1 - ), - documentHighlightWriteBackground: colorScheme.ramps - .neutral(0.5) - .alpha(0.4) - .hex(), // TODO: This was blend * 2 - errorColor: background(layer, "negative"), - gutterBackground: background(layer), - gutterPaddingFactor: 3.5, - lineNumber: withOpacity(foreground(layer), 0.35), - lineNumberActive: foreground(layer), - renameFade: 0.6, - unnecessaryCodeFade: 0.5, - selection: colorScheme.players[0], - whitespace: colorScheme.ramps.neutral(0.5).hex(), - guestSelections: [ - colorScheme.players[1], - colorScheme.players[2], - colorScheme.players[3], - colorScheme.players[4], - colorScheme.players[5], - colorScheme.players[6], - colorScheme.players[7], - ], - autocomplete: { - background: background(colorScheme.middle), - cornerRadius: 8, - padding: 4, - margin: { - left: -14, - }, - border: border(colorScheme.middle), - shadow: colorScheme.popoverShadow, - matchHighlight: foreground(colorScheme.middle, "accent"), - item: autocompleteItem, - hoveredItem: { - ...autocompleteItem, - matchHighlight: foreground( - colorScheme.middle, - "accent", - "hovered" - ), - background: background(colorScheme.middle, "hovered"), - }, - selectedItem: { - ...autocompleteItem, - matchHighlight: foreground( - colorScheme.middle, - "accent", - "active" - ), - background: background(colorScheme.middle, "active"), - }, - }, - diagnosticHeader: { - background: background(colorScheme.middle), - iconWidthFactor: 1.5, - textScaleFactor: 0.857, - border: border(colorScheme.middle, { - bottom: true, - top: true, - }), - code: { - ...text(colorScheme.middle, "mono", { size: "sm" }), - margin: { - left: 10, - }, - }, - source: { - text: text(colorScheme.middle, "sans", { - size: "sm", - weight: "bold", - }), - }, - message: { - highlightText: text(colorScheme.middle, "sans", { - size: "sm", - weight: "bold", - }), - text: text(colorScheme.middle, "sans", { size: "sm" }), - }, - }, - diagnosticPathHeader: { - background: background(colorScheme.middle), - textScaleFactor: 0.857, - filename: text(colorScheme.middle, "mono", { size: "sm" }), - path: { - ...text(colorScheme.middle, "mono", { size: "sm" }), - margin: { - left: 12, - }, - }, - }, - errorDiagnostic: diagnostic(colorScheme.middle, "negative"), - warningDiagnostic: diagnostic(colorScheme.middle, "warning"), - informationDiagnostic: diagnostic(colorScheme.middle, "accent"), - hintDiagnostic: diagnostic(colorScheme.middle, "warning"), - invalidErrorDiagnostic: diagnostic(colorScheme.middle, "base"), - invalidHintDiagnostic: diagnostic(colorScheme.middle, "base"), - invalidInformationDiagnostic: diagnostic(colorScheme.middle, "base"), - invalidWarningDiagnostic: diagnostic(colorScheme.middle, "base"), - hoverPopover: hoverPopover(colorScheme), - linkDefinition: { - color: syntax.linkUri.color, - underline: syntax.linkUri.underline, - }, - jumpIcon: interactive({ + return { + textColor: syntax.primary.color, + background: background(layer), + activeLineBackground: withOpacity(background(layer, "on"), 0.75), + highlightedLineBackground: background(layer, "on"), + // Inline autocomplete suggestions, Co-pilot suggestions, etc. + suggestion: syntax.predictive, + codeActions: { + indicator: toggleable({ + base: + interactive({ base: { - color: foreground(layer, "on"), - iconWidth: 20, - buttonWidth: 20, - cornerRadius: 6, - padding: { - top: 6, - bottom: 6, - left: 6, - right: 6, - }, + color: foreground(layer, "variant"), }, state: { - hovered: { - background: background(layer, "on", "hovered"), - }, + clicked: { + color: foreground(layer, "base"), + }, + hovered: { + color: foreground(layer, "on"), + }, }, - }), + }), + state: { + active: { + default: { + color: foreground(layer, "on"), + }, + } + } + } + ), - scrollbar: { - width: 12, - minHeightFactor: 1.0, - track: { - border: border(layer, "variant", { left: true }), + verticalScale: 0.55, + }, + folds: { + iconMarginScale: 2.5, + foldedIcon: "icons/chevron_right_8.svg", + foldableIcon: "icons/chevron_down_8.svg", + indicator: toggleable({ + base: + interactive({ + base: { + color: foreground(layer, "variant"), }, - thumb: { - background: withOpacity(background(layer, "inverted"), 0.3), - border: { - width: 1, - color: borderColor(layer, "variant"), - top: false, - right: true, - left: true, - bottom: false, - }, + state: { + clicked: { + color: foreground(layer, "base"), + }, + hovered: { + color: foreground(layer, "on"), + }, }, - git: { - deleted: isLight - ? withOpacity(colorScheme.ramps.red(0.5).hex(), 0.8) - : withOpacity(colorScheme.ramps.red(0.4).hex(), 0.8), - modified: isLight - ? withOpacity(colorScheme.ramps.yellow(0.5).hex(), 0.8) - : withOpacity(colorScheme.ramps.yellow(0.4).hex(), 0.8), - inserted: isLight - ? withOpacity(colorScheme.ramps.green(0.5).hex(), 0.8) - : withOpacity(colorScheme.ramps.green(0.4).hex(), 0.8), + }), + state: { + active: { + default: { + color: foreground(layer, "on"), }, + } + } + } + ), + ellipses: { + textColor: colorScheme.ramps.neutral(0.71).hex(), + cornerRadiusFactor: 0.15, + background: { + // Copied from hover_popover highlight + default: { + color: colorScheme.ramps.neutral(0.5).alpha(0.0).hex(), + }, + + hovered: { + color: colorScheme.ramps.neutral(0.5).alpha(0.5).hex(), + }, + + clicked: { + color: colorScheme.ramps.neutral(0.5).alpha(0.7).hex(), + }, }, - compositionMark: { - underline: { - thickness: 1.0, - color: borderColor(layer), - }, + }, + foldBackground: foreground(layer, "variant"), + }, + diff: { + deleted: isLight + ? colorScheme.ramps.red(0.5).hex() + : colorScheme.ramps.red(0.4).hex(), + modified: isLight + ? colorScheme.ramps.yellow(0.5).hex() + : colorScheme.ramps.yellow(0.5).hex(), + inserted: isLight + ? colorScheme.ramps.green(0.4).hex() + : colorScheme.ramps.green(0.5).hex(), + removedWidthEm: 0.275, + widthEm: 0.15, + cornerRadius: 0.05, + }, + /** Highlights matching occurrences of what is under the cursor + * as well as matched brackets + */ + documentHighlightReadBackground: withOpacity( + foreground(layer, "accent"), + 0.1 + ), + documentHighlightWriteBackground: colorScheme.ramps + .neutral(0.5) + .alpha(0.4) + .hex(), // TODO: This was blend * 2 + errorColor: background(layer, "negative"), + gutterBackground: background(layer), + gutterPaddingFactor: 3.5, + lineNumber: withOpacity(foreground(layer), 0.35), + lineNumberActive: foreground(layer), + renameFade: 0.6, + unnecessaryCodeFade: 0.5, + selection: colorScheme.players[0], + whitespace: colorScheme.ramps.neutral(0.5).hex(), + guestSelections: [ + colorScheme.players[1], + colorScheme.players[2], + colorScheme.players[3], + colorScheme.players[4], + colorScheme.players[5], + colorScheme.players[6], + colorScheme.players[7], + ], + autocomplete: { + background: background(colorScheme.middle), + cornerRadius: 8, + padding: 4, + margin: { + left: -14, + }, + border: border(colorScheme.middle), + shadow: colorScheme.popoverShadow, + matchHighlight: foreground(colorScheme.middle, "accent"), + item: autocompleteItem, + hoveredItem: { + ...autocompleteItem, + matchHighlight: foreground( + colorScheme.middle, + "accent", + "hovered" + ), + background: background(colorScheme.middle, "hovered"), + }, + selectedItem: { + ...autocompleteItem, + matchHighlight: foreground( + colorScheme.middle, + "accent", + "active" + ), + background: background(colorScheme.middle, "active"), + }, + }, + diagnosticHeader: { + background: background(colorScheme.middle), + iconWidthFactor: 1.5, + textScaleFactor: 0.857, + border: border(colorScheme.middle, { + bottom: true, + top: true, + }), + code: { + ...text(colorScheme.middle, "mono", { size: "sm" }), + margin: { + left: 10, }, - syntax, - } + }, + source: { + text: text(colorScheme.middle, "sans", { + size: "sm", + weight: "bold", + }), + }, + message: { + highlightText: text(colorScheme.middle, "sans", { + size: "sm", + weight: "bold", + }), + text: text(colorScheme.middle, "sans", { size: "sm" }), + }, + }, + diagnosticPathHeader: { + background: background(colorScheme.middle), + textScaleFactor: 0.857, + filename: text(colorScheme.middle, "mono", { size: "sm" }), + path: { + ...text(colorScheme.middle, "mono", { size: "sm" }), + margin: { + left: 12, + }, + }, + }, + errorDiagnostic: diagnostic(colorScheme.middle, "negative"), + warningDiagnostic: diagnostic(colorScheme.middle, "warning"), + informationDiagnostic: diagnostic(colorScheme.middle, "accent"), + hintDiagnostic: diagnostic(colorScheme.middle, "warning"), + invalidErrorDiagnostic: diagnostic(colorScheme.middle, "base"), + invalidHintDiagnostic: diagnostic(colorScheme.middle, "base"), + invalidInformationDiagnostic: diagnostic(colorScheme.middle, "base"), + invalidWarningDiagnostic: diagnostic(colorScheme.middle, "base"), + hoverPopover: hoverPopover(colorScheme), + linkDefinition: { + color: syntax.linkUri.color, + underline: syntax.linkUri.underline, + }, + jumpIcon: interactive({ + base: { + color: foreground(layer, "on"), + iconWidth: 20, + buttonWidth: 20, + cornerRadius: 6, + padding: { + top: 6, + bottom: 6, + left: 6, + right: 6, + }, + }, + state: { + hovered: { + background: background(layer, "on", "hovered"), + }, + }, + }), + + scrollbar: { + width: 12, + minHeightFactor: 1.0, + track: { + border: border(layer, "variant", { left: true }), + }, + thumb: { + background: withOpacity(background(layer, "inverted"), 0.3), + border: { + width: 1, + color: borderColor(layer, "variant"), + top: false, + right: true, + left: true, + bottom: false, + }, + }, + git: { + deleted: isLight + ? withOpacity(colorScheme.ramps.red(0.5).hex(), 0.8) + : withOpacity(colorScheme.ramps.red(0.4).hex(), 0.8), + modified: isLight + ? withOpacity(colorScheme.ramps.yellow(0.5).hex(), 0.8) + : withOpacity(colorScheme.ramps.yellow(0.4).hex(), 0.8), + inserted: isLight + ? withOpacity(colorScheme.ramps.green(0.5).hex(), 0.8) + : withOpacity(colorScheme.ramps.green(0.4).hex(), 0.8), + }, + }, + compositionMark: { + underline: { + thickness: 1.0, + color: borderColor(layer), + }, + }, + syntax, + } } diff --git a/styles/src/styleTree/picker.ts b/styles/src/styleTree/picker.ts index 12fecfa6f8..f7cec1bd41 100644 --- a/styles/src/styleTree/picker.ts +++ b/styles/src/styleTree/picker.ts @@ -4,91 +4,95 @@ import { background, border, text } from "./components" import { interactive, toggleable } from "../element" export default function picker(colorScheme: ColorScheme): any { - let layer = colorScheme.lowest - const container = { - background: background(layer), - border: border(layer), - shadow: colorScheme.modalShadow, - cornerRadius: 12, - padding: { - bottom: 4, - }, - } - const inputEditor = { - placeholderText: text(layer, "sans", "on", "disabled"), - selection: colorScheme.players[0], - text: text(layer, "mono", "on"), - border: border(layer, { bottom: true }), - padding: { - bottom: 8, - left: 16, - right: 16, - top: 8, - }, - margin: { - bottom: 4, - }, - } - const emptyInputEditor: any = { ...inputEditor } - delete emptyInputEditor.border - delete emptyInputEditor.margin + let layer = colorScheme.lowest + const container = { + background: background(layer), + border: border(layer), + shadow: colorScheme.modalShadow, + cornerRadius: 12, + padding: { + bottom: 4, + }, + } + const inputEditor = { + placeholderText: text(layer, "sans", "on", "disabled"), + selection: colorScheme.players[0], + text: text(layer, "mono", "on"), + border: border(layer, { bottom: true }), + padding: { + bottom: 8, + left: 16, + right: 16, + top: 8, + }, + margin: { + bottom: 4, + }, + } + const emptyInputEditor: any = { ...inputEditor } + delete emptyInputEditor.border + delete emptyInputEditor.margin - return { - ...container, - emptyContainer: { - ...container, - padding: {}, - }, - item: toggleable( - interactive({ - base: { - padding: { - bottom: 4, - left: 12, - right: 12, - top: 4, - }, - margin: { - top: 1, - left: 4, - right: 4, - }, - cornerRadius: 8, - text: text(layer, "sans", "variant"), - highlightText: text(layer, "sans", "accent", { - weight: "bold", - }), - }, - state: { - hovered: { - background: withOpacity( - background(layer, "hovered"), - 0.5 - ), - }, - }, - }), - { - default: { - background: withOpacity( - background(layer, "base", "active"), - 0.5 - ), - //text: text(layer, "sans", "base", "active"), - }, - } - ), - - inputEditor, - emptyInputEditor, - noMatches: { - text: text(layer, "sans", "variant"), + return { + ...container, + emptyContainer: { + ...container, + padding: {}, + }, + item: toggleable({ + base: + interactive({ + base: { padding: { - bottom: 8, - left: 16, - right: 16, - top: 8, + bottom: 4, + left: 12, + right: 12, + top: 4, }, - }, + margin: { + top: 1, + left: 4, + right: 4, + }, + cornerRadius: 8, + text: text(layer, "sans", "variant"), + highlightText: text(layer, "sans", "accent", { + weight: "bold", + }), + }, + state: { + hovered: { + background: withOpacity( + background(layer, "hovered"), + 0.5 + ), + }, + }, + }), + state: { + active: { + default: { + background: withOpacity( + background(layer, "base", "active"), + 0.5 + ), + //text: text(layer, "sans", "base", "active"), + }, + } + } } + ), + + inputEditor, + emptyInputEditor, + noMatches: { + text: text(layer, "sans", "variant"), + padding: { + bottom: 8, + left: 16, + right: 16, + top: 8, + }, + }, + } } diff --git a/styles/src/styleTree/projectPanel.ts b/styles/src/styleTree/projectPanel.ts index 5f283e551d..babd1431fb 100644 --- a/styles/src/styleTree/projectPanel.ts +++ b/styles/src/styleTree/projectPanel.ts @@ -3,121 +3,125 @@ import { withOpacity } from "../theme/color" import { background, border, foreground, text } from "./components" import { interactive, toggleable } from "../element" export default function projectPanel(colorScheme: ColorScheme) { - const { isLight } = colorScheme + const { isLight } = colorScheme - let layer = colorScheme.middle + let layer = colorScheme.middle - let baseEntry = { - height: 22, - iconColor: foreground(layer, "variant"), - iconSize: 7, - iconSpacing: 5, - } + let baseEntry = { + height: 22, + iconColor: foreground(layer, "variant"), + iconSize: 7, + iconSpacing: 5, + } - let status = { - git: { - modified: isLight - ? colorScheme.ramps.yellow(0.6).hex() - : colorScheme.ramps.yellow(0.5).hex(), - inserted: isLight - ? colorScheme.ramps.green(0.45).hex() - : colorScheme.ramps.green(0.5).hex(), - conflict: isLight - ? colorScheme.ramps.red(0.6).hex() - : colorScheme.ramps.red(0.5).hex(), + let status = { + git: { + modified: isLight + ? colorScheme.ramps.yellow(0.6).hex() + : colorScheme.ramps.yellow(0.5).hex(), + inserted: isLight + ? colorScheme.ramps.green(0.45).hex() + : colorScheme.ramps.green(0.5).hex(), + conflict: isLight + ? colorScheme.ramps.red(0.6).hex() + : colorScheme.ramps.red(0.5).hex(), + }, + } + + let entry = toggleable({ + base: + interactive({ + base: { + ...baseEntry, + text: text(layer, "mono", "variant", { size: "sm" }), + status, }, + state: { + hovered: { + background: background(layer, "variant", "hovered"), + }, + }, + }), + state: { + active: { + default: { + /*background: colorScheme.isLight + ? withOpacity(background(layer, "active"), 0.5) + : background(layer, "active") ,*/ // todo posiewic + text: text(layer, "mono", "active", { size: "sm" }), + }, + hovered: { + //background: background(layer, "active"), + text: text(layer, "mono", "active", { size: "sm" }), + }, + } } + } + ) - let entry = toggleable( - interactive({ - base: { - ...baseEntry, - text: text(layer, "mono", "variant", { size: "sm" }), - status, - }, - state: { - hovered: { - background: background(layer, "variant", "hovered"), - }, - }, - }), - { - default: { - /*background: colorScheme.isLight - ? withOpacity(background(layer, "active"), 0.5) - : background(layer, "active") ,*/ // todo posiewic - text: text(layer, "mono", "active", { size: "sm" }), - }, - hovered: { - //background: background(layer, "active"), - text: text(layer, "mono", "active", { size: "sm" }), - }, - } - ) - - return { - openProjectButton: interactive({ - base: { - background: background(layer), - border: border(layer, "active"), - cornerRadius: 4, - margin: { - top: 16, - left: 16, - right: 16, - }, - padding: { - top: 3, - bottom: 3, - left: 7, - right: 7, - }, - ...text(layer, "sans", "default", { size: "sm" }), - }, - state: { - hovered: { - ...text(layer, "sans", "default", { size: "sm" }), - background: background(layer, "hovered"), - border: border(layer, "active"), - }, - }, - }), + return { + openProjectButton: interactive({ + base: { background: background(layer), - padding: { left: 6, right: 6, top: 0, bottom: 6 }, - indentWidth: 12, - entry, - draggedEntry: { - ...baseEntry, - text: text(layer, "mono", "on", { size: "sm" }), - background: withOpacity(background(layer, "on"), 0.9), - border: border(layer), - status, + border: border(layer, "active"), + cornerRadius: 4, + margin: { + top: 16, + left: 16, + right: 16, }, - ignoredEntry: { - ...entry, - iconColor: foreground(layer, "disabled"), - text: text(layer, "mono", "disabled"), - active: { - ...entry.active, - iconColor: foreground(layer, "variant"), - }, + padding: { + top: 3, + bottom: 3, + left: 7, + right: 7, }, - cutEntry: { - ...entry, - text: text(layer, "mono", "disabled"), - active: { - ...entry.active, - default: { - ...entry.active.default, - background: background(layer, "active"), - text: text(layer, "mono", "disabled", { size: "sm" }), - }, - }, + ...text(layer, "sans", "default", { size: "sm" }), + }, + state: { + hovered: { + ...text(layer, "sans", "default", { size: "sm" }), + background: background(layer, "hovered"), + border: border(layer, "active"), }, - filenameEditor: { - background: background(layer, "on"), - text: text(layer, "mono", "on", { size: "sm" }), - selection: colorScheme.players[0], + }, + }), + background: background(layer), + padding: { left: 6, right: 6, top: 0, bottom: 6 }, + indentWidth: 12, + entry, + draggedEntry: { + ...baseEntry, + text: text(layer, "mono", "on", { size: "sm" }), + background: withOpacity(background(layer, "on"), 0.9), + border: border(layer), + status, + }, + ignoredEntry: { + ...entry, + iconColor: foreground(layer, "disabled"), + text: text(layer, "mono", "disabled"), + active: { + ...entry.active, + iconColor: foreground(layer, "variant"), + }, + }, + cutEntry: { + ...entry, + text: text(layer, "mono", "disabled"), + active: { + ...entry.active, + default: { + ...entry.active.default, + background: background(layer, "active"), + text: text(layer, "mono", "disabled", { size: "sm" }), }, - } + }, + }, + filenameEditor: { + background: background(layer, "on"), + text: text(layer, "mono", "on", { size: "sm" }), + selection: colorScheme.players[0], + }, + } } diff --git a/styles/src/styleTree/search.ts b/styles/src/styleTree/search.ts index 4b0869f10e..aa015d5cde 100644 --- a/styles/src/styleTree/search.ts +++ b/styles/src/styleTree/search.ts @@ -4,123 +4,127 @@ import { background, border, foreground, text } from "./components" import { interactive, toggleable } from "../element" export default function search(colorScheme: ColorScheme) { - let layer = colorScheme.highest + let layer = colorScheme.highest - // Search input - const editor = { - background: background(layer), - cornerRadius: 8, - minWidth: 200, - maxWidth: 500, - placeholderText: text(layer, "mono", "disabled"), - selection: colorScheme.players[0], - text: text(layer, "mono", "default"), - border: border(layer), - margin: { - right: 12, - }, - padding: { - top: 3, - bottom: 3, - left: 12, - right: 8, - }, - } + // Search input + const editor = { + background: background(layer), + cornerRadius: 8, + minWidth: 200, + maxWidth: 500, + placeholderText: text(layer, "mono", "disabled"), + selection: colorScheme.players[0], + text: text(layer, "mono", "default"), + border: border(layer), + margin: { + right: 12, + }, + padding: { + top: 3, + bottom: 3, + left: 12, + right: 8, + }, + } - const includeExcludeEditor = { - ...editor, - minWidth: 100, - maxWidth: 250, - } + const includeExcludeEditor = { + ...editor, + minWidth: 100, + maxWidth: 250, + } - return { - // TODO: Add an activeMatchBackground on the rust side to differentiate between active and inactive - matchBackground: withOpacity(foreground(layer, "accent"), 0.4), - optionButton: toggleable( - interactive({ - base: { - ...text(layer, "mono", "on"), - background: background(layer, "on"), - cornerRadius: 6, - border: border(layer, "on"), - margin: { - right: 4, - }, - padding: { - bottom: 2, - left: 10, - right: 10, - top: 2, - }, - }, - state: { - clicked: { - ...text(layer, "mono", "on", "pressed"), - background: background(layer, "on", "pressed"), - border: border(layer, "on", "pressed"), - }, - hovered: { - ...text(layer, "mono", "on", "hovered"), - background: background(layer, "on", "hovered"), - border: border(layer, "on", "hovered"), - }, - }, - }), - { - default: { - ...text(layer, "mono", "on", "inverted"), - background: background(layer, "on", "inverted"), - border: border(layer, "on", "inverted"), - }, - } - ), - editor, - invalidEditor: { - ...editor, - border: border(layer, "negative"), - }, - includeExcludeEditor, - invalidIncludeExcludeEditor: { - ...includeExcludeEditor, - border: border(layer, "negative"), - }, - matchIndex: { - ...text(layer, "mono", "variant"), - padding: { - left: 6, - }, - }, - optionButtonGroup: { - padding: { - left: 12, - right: 12, - }, - }, - includeExcludeInputs: { - ...text(layer, "mono", "variant"), - padding: { - right: 6, - }, - }, - resultsStatus: { + return { + // TODO: Add an activeMatchBackground on the rust side to differentiate between active and inactive + matchBackground: withOpacity(foreground(layer, "accent"), 0.4), + optionButton: toggleable({ + base: + interactive({ + base: { ...text(layer, "mono", "on"), - size: 18, - }, - dismissButton: interactive({ - base: { - color: foreground(layer, "variant"), - iconWidth: 12, - buttonWidth: 14, - padding: { - left: 10, - right: 10, - }, + background: background(layer, "on"), + cornerRadius: 6, + border: border(layer, "on"), + margin: { + right: 4, }, - state: { - hovered: { - color: foreground(layer, "hovered"), - }, + padding: { + bottom: 2, + left: 10, + right: 10, + top: 2, }, + }, + state: { + clicked: { + ...text(layer, "mono", "on", "pressed"), + background: background(layer, "on", "pressed"), + border: border(layer, "on", "pressed"), + }, + hovered: { + ...text(layer, "mono", "on", "hovered"), + background: background(layer, "on", "hovered"), + border: border(layer, "on", "hovered"), + }, + }, }), + state: { + active: { + default: { + ...text(layer, "mono", "on", "inverted"), + background: background(layer, "on", "inverted"), + border: border(layer, "on", "inverted"), + }, + } + } } + ), + editor, + invalidEditor: { + ...editor, + border: border(layer, "negative"), + }, + includeExcludeEditor, + invalidIncludeExcludeEditor: { + ...includeExcludeEditor, + border: border(layer, "negative"), + }, + matchIndex: { + ...text(layer, "mono", "variant"), + padding: { + left: 6, + }, + }, + optionButtonGroup: { + padding: { + left: 12, + right: 12, + }, + }, + includeExcludeInputs: { + ...text(layer, "mono", "variant"), + padding: { + right: 6, + }, + }, + resultsStatus: { + ...text(layer, "mono", "on"), + size: 18, + }, + dismissButton: interactive({ + base: { + color: foreground(layer, "variant"), + iconWidth: 12, + buttonWidth: 14, + padding: { + left: 10, + right: 10, + }, + }, + state: { + hovered: { + color: foreground(layer, "hovered"), + }, + }, + }), + } } diff --git a/styles/src/styleTree/statusBar.ts b/styles/src/styleTree/statusBar.ts index d6d7eda732..4c566a5c3a 100644 --- a/styles/src/styleTree/statusBar.ts +++ b/styles/src/styleTree/statusBar.ts @@ -2,143 +2,147 @@ import { ColorScheme } from "../theme/colorScheme" import { background, border, foreground, text } from "./components" import { interactive, toggleable } from "../element" export default function statusBar(colorScheme: ColorScheme) { - let layer = colorScheme.lowest + let layer = colorScheme.lowest - const statusContainer = { - cornerRadius: 6, - padding: { top: 3, bottom: 3, left: 6, right: 6 }, - } + const statusContainer = { + cornerRadius: 6, + padding: { top: 3, bottom: 3, left: 6, right: 6 }, + } - const diagnosticStatusContainer = { - cornerRadius: 6, - padding: { top: 1, bottom: 1, left: 6, right: 6 }, - } + const diagnosticStatusContainer = { + cornerRadius: 6, + padding: { top: 1, bottom: 1, left: 6, right: 6 }, + } - return { - height: 30, - itemSpacing: 8, - padding: { - top: 1, - bottom: 1, - left: 6, - right: 6, + return { + height: 30, + itemSpacing: 8, + padding: { + top: 1, + bottom: 1, + left: 6, + right: 6, + }, + border: border(layer, { top: true, overlay: true }), + cursorPosition: text(layer, "sans", "variant"), + activeLanguage: interactive({ + base: { + padding: { left: 6, right: 6 }, + ...text(layer, "sans", "variant"), + }, + state: { + hovered: { + ...text(layer, "sans", "on"), }, - border: border(layer, { top: true, overlay: true }), - cursorPosition: text(layer, "sans", "variant"), - activeLanguage: interactive({ - base: { - padding: { left: 6, right: 6 }, - ...text(layer, "sans", "variant"), - }, - state: { - hovered: { - ...text(layer, "sans", "on"), - }, - }, - }), - autoUpdateProgressMessage: text(layer, "sans", "variant"), - autoUpdateDoneMessage: text(layer, "sans", "variant"), - lspStatus: interactive({ - base: { - ...diagnosticStatusContainer, - iconSpacing: 4, - iconWidth: 14, - height: 18, - message: text(layer, "sans"), - iconColor: foreground(layer), - }, - state: { - hovered: { - message: text(layer, "sans"), - iconColor: foreground(layer), - background: background(layer, "hovered"), - }, - }, - }), - diagnosticMessage: interactive({ - base: { - ...text(layer, "sans"), - }, - state: { hovered: text(layer, "sans", "hovered") }, - }), - diagnosticSummary: interactive({ - base: { - height: 20, - iconWidth: 16, - iconSpacing: 2, - summarySpacing: 6, - text: text(layer, "sans", { size: "sm" }), - iconColorOk: foreground(layer, "variant"), - iconColorWarning: foreground(layer, "warning"), - iconColorError: foreground(layer, "negative"), - containerOk: { - cornerRadius: 6, - padding: { top: 3, bottom: 3, left: 7, right: 7 }, - }, - containerWarning: { - ...diagnosticStatusContainer, - background: background(layer, "warning"), - border: border(layer, "warning"), - }, - containerError: { - ...diagnosticStatusContainer, - background: background(layer, "negative"), - border: border(layer, "negative"), - }, - }, - state: { - hovered: { - iconColorOk: foreground(layer, "on"), - containerOk: { - background: background(layer, "on", "hovered"), - }, - containerWarning: { - background: background(layer, "warning", "hovered"), - border: border(layer, "warning", "hovered"), - }, - containerError: { - background: background(layer, "negative", "hovered"), - border: border(layer, "negative", "hovered"), - }, - }, - }, - }), - panelButtons: { - groupLeft: {}, - groupBottom: {}, - groupRight: {}, - button: toggleable( - interactive({ - base: { - ...statusContainer, - iconSize: 16, - iconColor: foreground(layer, "variant"), - label: { - margin: { left: 6 }, - ...text(layer, "sans", { size: "sm" }), - }, - }, - state: { - hovered: { - iconColor: foreground(layer, "hovered"), - background: background(layer, "variant"), - }, - }, - }), - { - default: { - iconColor: foreground(layer, "active"), - background: background(layer, "active"), - }, - } - ), - badge: { - cornerRadius: 3, - padding: 2, - margin: { bottom: -1, right: -1 }, - border: border(layer), - background: background(layer, "accent"), - }, + }, + }), + autoUpdateProgressMessage: text(layer, "sans", "variant"), + autoUpdateDoneMessage: text(layer, "sans", "variant"), + lspStatus: interactive({ + base: { + ...diagnosticStatusContainer, + iconSpacing: 4, + iconWidth: 14, + height: 18, + message: text(layer, "sans"), + iconColor: foreground(layer), + }, + state: { + hovered: { + message: text(layer, "sans"), + iconColor: foreground(layer), + background: background(layer, "hovered"), }, - } + }, + }), + diagnosticMessage: interactive({ + base: { + ...text(layer, "sans"), + }, + state: { hovered: text(layer, "sans", "hovered") }, + }), + diagnosticSummary: interactive({ + base: { + height: 20, + iconWidth: 16, + iconSpacing: 2, + summarySpacing: 6, + text: text(layer, "sans", { size: "sm" }), + iconColorOk: foreground(layer, "variant"), + iconColorWarning: foreground(layer, "warning"), + iconColorError: foreground(layer, "negative"), + containerOk: { + cornerRadius: 6, + padding: { top: 3, bottom: 3, left: 7, right: 7 }, + }, + containerWarning: { + ...diagnosticStatusContainer, + background: background(layer, "warning"), + border: border(layer, "warning"), + }, + containerError: { + ...diagnosticStatusContainer, + background: background(layer, "negative"), + border: border(layer, "negative"), + }, + }, + state: { + hovered: { + iconColorOk: foreground(layer, "on"), + containerOk: { + background: background(layer, "on", "hovered"), + }, + containerWarning: { + background: background(layer, "warning", "hovered"), + border: border(layer, "warning", "hovered"), + }, + containerError: { + background: background(layer, "negative", "hovered"), + border: border(layer, "negative", "hovered"), + }, + }, + }, + }), + panelButtons: { + groupLeft: {}, + groupBottom: {}, + groupRight: {}, + button: toggleable({ + base: + interactive({ + base: { + ...statusContainer, + iconSize: 16, + iconColor: foreground(layer, "variant"), + label: { + margin: { left: 6 }, + ...text(layer, "sans", { size: "sm" }), + }, + }, + state: { + hovered: { + iconColor: foreground(layer, "hovered"), + background: background(layer, "variant"), + }, + }, + }), state: + { + active: { + default: { + iconColor: foreground(layer, "active"), + background: background(layer, "active"), + }, + } + } + } + ), + badge: { + cornerRadius: 3, + padding: 2, + margin: { bottom: -1, right: -1 }, + border: border(layer), + background: background(layer, "accent"), + }, + }, + } } diff --git a/styles/src/styleTree/tabBar.ts b/styles/src/styleTree/tabBar.ts index e00f0b8b83..d7b3b58055 100644 --- a/styles/src/styleTree/tabBar.ts +++ b/styles/src/styleTree/tabBar.ts @@ -4,115 +4,120 @@ import { text, border, background, foreground } from "./components" import { interactive, toggleable } from "../element" export default function tabBar(colorScheme: ColorScheme) { - const height = 32 + const height = 32 - let activeLayer = colorScheme.highest - let layer = colorScheme.middle + let activeLayer = colorScheme.highest + let layer = colorScheme.middle - const tab = { - height, - text: text(layer, "sans", "variant", { size: "sm" }), - background: background(layer), - border: border(layer, { - right: true, - bottom: true, - overlay: true, - }), - padding: { - left: 8, - right: 12, - }, - spacing: 8, + const tab = { + height, + text: text(layer, "sans", "variant", { size: "sm" }), + background: background(layer), + border: border(layer, { + right: true, + bottom: true, + overlay: true, + }), + padding: { + left: 8, + right: 12, + }, + spacing: 8, - // Tab type icons (e.g. Project Search) - typeIconWidth: 14, + // Tab type icons (e.g. Project Search) + typeIconWidth: 14, - // Close icons - closeIconWidth: 8, - iconClose: foreground(layer, "variant"), - iconCloseActive: foreground(layer, "hovered"), + // Close icons + closeIconWidth: 8, + iconClose: foreground(layer, "variant"), + iconCloseActive: foreground(layer, "hovered"), - // Indicators - iconConflict: foreground(layer, "warning"), - iconDirty: foreground(layer, "accent"), + // Indicators + iconConflict: foreground(layer, "warning"), + iconDirty: foreground(layer, "accent"), - // When two tabs of the same name are open, a label appears next to them - description: { - margin: { left: 8 }, - ...text(layer, "sans", "disabled", { size: "2xs" }), - }, - } + // When two tabs of the same name are open, a label appears next to them + description: { + margin: { left: 8 }, + ...text(layer, "sans", "disabled", { size: "2xs" }), + }, + } - const activePaneActiveTab = { - ...tab, - background: background(activeLayer), - text: text(activeLayer, "sans", "active", { size: "sm" }), - border: { - ...tab.border, - bottom: false, - }, - } + const activePaneActiveTab = { + ...tab, + background: background(activeLayer), + text: text(activeLayer, "sans", "active", { size: "sm" }), + border: { + ...tab.border, + bottom: false, + }, + } - const inactivePaneInactiveTab = { - ...tab, - background: background(layer), - text: text(layer, "sans", "variant", { size: "sm" }), - } + const inactivePaneInactiveTab = { + ...tab, + background: background(layer), + text: text(layer, "sans", "variant", { size: "sm" }), + } - const inactivePaneActiveTab = { - ...tab, - background: background(activeLayer), - text: text(layer, "sans", "variant", { size: "sm" }), - border: { - ...tab.border, - bottom: false, - }, - } + const inactivePaneActiveTab = { + ...tab, + background: background(activeLayer), + text: text(layer, "sans", "variant", { size: "sm" }), + border: { + ...tab.border, + bottom: false, + }, + } - const draggedTab = { - ...activePaneActiveTab, - background: withOpacity(tab.background, 0.9), - border: undefined as any, - shadow: colorScheme.popoverShadow, - } + const draggedTab = { + ...activePaneActiveTab, + background: withOpacity(tab.background, 0.9), + border: undefined as any, + shadow: colorScheme.popoverShadow, + } - return { - height, - background: background(layer), - activePane: { - activeTab: activePaneActiveTab, - inactiveTab: tab, - }, - inactivePane: { - activeTab: inactivePaneActiveTab, - inactiveTab: inactivePaneInactiveTab, - }, - draggedTab, - paneButton: toggleable( - interactive({ - base: { - color: foreground(layer, "variant"), - iconWidth: 12, - buttonWidth: activePaneActiveTab.height, - }, - state: { - hovered: { - color: foreground(layer, "hovered"), - }, - }, - }), - { - default: { - color: foreground(layer, "accent"), - }, - } - ), - paneButtonContainer: { - background: tab.background, - border: { - ...tab.border, - right: false, + return { + height, + background: background(layer), + activePane: { + activeTab: activePaneActiveTab, + inactiveTab: tab, + }, + inactivePane: { + activeTab: inactivePaneActiveTab, + inactiveTab: inactivePaneInactiveTab, + }, + draggedTab, + paneButton: toggleable({ + base: + interactive({ + base: { + color: foreground(layer, "variant"), + iconWidth: 12, + buttonWidth: activePaneActiveTab.height, + }, + state: { + hovered: { + color: foreground(layer, "hovered"), }, - }, + }, + }), + state: + { + active: { + default: { + color: foreground(layer, "accent"), + }, + } + } } + ), + paneButtonContainer: { + background: tab.background, + border: { + ...tab.border, + right: false, + }, + }, + } } diff --git a/styles/src/styleTree/toolbarDropdownMenu.ts b/styles/src/styleTree/toolbarDropdownMenu.ts index 3ce7ca7d7c..3a870b008f 100644 --- a/styles/src/styleTree/toolbarDropdownMenu.ts +++ b/styles/src/styleTree/toolbarDropdownMenu.ts @@ -2,60 +2,64 @@ import { ColorScheme } from "../theme/colorScheme" import { background, border, text } from "./components" import { interactive, toggleable } from "../element" export default function dropdownMenu(colorScheme: ColorScheme) { - let layer = colorScheme.middle + let layer = colorScheme.middle - return { - rowHeight: 30, - background: background(layer), - border: border(layer), - shadow: colorScheme.popoverShadow, - header: interactive({ - base: { - ...text(layer, "sans", { size: "sm" }), - secondaryText: text(layer, "sans", { - size: "sm", - color: "#aaaaaa", - }), - secondaryTextSpacing: 10, - padding: { left: 8, right: 8, top: 2, bottom: 2 }, - cornerRadius: 6, - background: background(layer, "on"), - border: border(layer, "on", { overlay: true }), - }, - state: { - hovered: { - background: background(layer, "hovered"), - ...text(layer, "sans", "hovered", { size: "sm" }), - }, - }, + return { + rowHeight: 30, + background: background(layer), + border: border(layer), + shadow: colorScheme.popoverShadow, + header: interactive({ + base: { + ...text(layer, "sans", { size: "sm" }), + secondaryText: text(layer, "sans", { + size: "sm", + color: "#aaaaaa", }), - sectionHeader: { - ...text(layer, "sans", { size: "sm" }), - padding: { left: 8, right: 8, top: 8, bottom: 8 }, + secondaryTextSpacing: 10, + padding: { left: 8, right: 8, top: 2, bottom: 2 }, + cornerRadius: 6, + background: background(layer, "on"), + border: border(layer, "on", { overlay: true }), + }, + state: { + hovered: { + background: background(layer, "hovered"), + ...text(layer, "sans", "hovered", { size: "sm" }), }, - item: toggleable( - interactive({ - base: { - ...text(layer, "sans", { size: "sm" }), - secondaryTextSpacing: 10, - secondaryText: text(layer, "sans", { size: "sm" }), - padding: { left: 18, right: 18, top: 2, bottom: 2 }, - }, - state: { - hovered: { - background: background(layer, "hovered"), - ...text(layer, "sans", "hovered", { size: "sm" }), - }, - }, - }), - { - default: { - background: background(layer, "active"), - }, - hovered: { - background: background(layer, "active"), - }, - } - ), + }, + }), + sectionHeader: { + ...text(layer, "sans", { size: "sm" }), + padding: { left: 8, right: 8, top: 8, bottom: 8 }, + }, + item: toggleable({ + base: + interactive({ + base: { + ...text(layer, "sans", { size: "sm" }), + secondaryTextSpacing: 10, + secondaryText: text(layer, "sans", { size: "sm" }), + padding: { left: 18, right: 18, top: 2, bottom: 2 }, + }, + state: { + hovered: { + background: background(layer, "hovered"), + ...text(layer, "sans", "hovered", { size: "sm" }), + }, + }, + }), + state: { + active: { + default: { + background: background(layer, "active"), + }, + hovered: { + background: background(layer, "active"), + }, + } + } } + ), + } } diff --git a/styles/src/styleTree/workspace.ts b/styles/src/styleTree/workspace.ts index a2a21eaff4..96f4b8bdbd 100644 --- a/styles/src/styleTree/workspace.ts +++ b/styles/src/styleTree/workspace.ts @@ -2,398 +2,406 @@ import { ColorScheme } from "../theme/colorScheme" import { withOpacity } from "../theme/color" import { toggleable } from "../element" import { - background, - border, - borderColor, - foreground, - svg, - text, + background, + border, + borderColor, + foreground, + svg, + text, } from "./components" import statusBar from "./statusBar" import tabBar from "./tabBar" import { interactive } from "../element" import merge from "ts-deepmerge" export default function workspace(colorScheme: ColorScheme) { - const layer = colorScheme.lowest - const isLight = colorScheme.isLight - const itemSpacing = 8 - const titlebarButton = toggleable( - interactive({ - base: { - cornerRadius: 6, - padding: { - top: 1, - bottom: 1, - left: 8, - right: 8, - }, - ...text(layer, "sans", "variant", { size: "xs" }), - background: background(layer, "variant"), - border: border(layer), - }, - state: { - hovered: { - ...text(layer, "sans", "variant", "hovered", { - size: "xs", - }), - background: background(layer, "variant", "hovered"), - border: border(layer, "variant", "hovered"), - }, - clicked: { - ...text(layer, "sans", "variant", "pressed", { - size: "xs", - }), - background: background(layer, "variant", "pressed"), - border: border(layer, "variant", "pressed"), - }, - }, - }), - { - default: { - ...text(layer, "sans", "variant", "active", { size: "xs" }), - background: background(layer, "variant", "active"), - border: border(layer, "variant", "active"), - }, - } - ) - const avatarWidth = 18 - const avatarOuterWidth = avatarWidth + 4 - const followerAvatarWidth = 14 - const followerAvatarOuterWidth = followerAvatarWidth + 4 - - return { - background: background(colorScheme.lowest), - blankPane: { - logoContainer: { - width: 256, - height: 256, - }, - logo: svg( - withOpacity("#000000", colorScheme.isLight ? 0.6 : 0.8), - "icons/logo_96.svg", - 256, - 256 - ), - - logoShadow: svg( - withOpacity( - colorScheme.isLight - ? "#FFFFFF" - : colorScheme.lowest.base.default.background, - colorScheme.isLight ? 1 : 0.6 - ), - "icons/logo_96.svg", - 256, - 256 - ), - keyboardHints: { - margin: { - top: 96, - }, - cornerRadius: 4, - }, - keyboardHint: interactive({ - base: { - ...text(layer, "sans", "variant", { size: "sm" }), - padding: { - top: 3, - left: 8, - right: 8, - bottom: 3, - }, - cornerRadius: 8, - }, - state: { - hovered: { - ...text(layer, "sans", "active", { size: "sm" }), - }, - }, + const layer = colorScheme.lowest + const isLight = colorScheme.isLight + const itemSpacing = 8 + const titlebarButton = toggleable({ + base: + interactive({ + base: { + cornerRadius: 6, + padding: { + top: 1, + bottom: 1, + left: 8, + right: 8, + }, + ...text(layer, "sans", "variant", { size: "xs" }), + background: background(layer, "variant"), + border: border(layer), + }, + state: { + hovered: { + ...text(layer, "sans", "variant", "hovered", { + size: "xs", }), - - keyboardHintWidth: 320, - }, - joiningProjectAvatar: { - cornerRadius: 40, - width: 80, - }, - joiningProjectMessage: { - padding: 12, - ...text(layer, "sans", { size: "lg" }), - }, - externalLocationMessage: { - background: background(colorScheme.middle, "accent"), - border: border(colorScheme.middle, "accent"), - cornerRadius: 6, - padding: 12, - margin: { bottom: 8, right: 8 }, - ...text(colorScheme.middle, "sans", "accent", { size: "xs" }), - }, - leaderBorderOpacity: 0.7, - leaderBorderWidth: 2.0, - tabBar: tabBar(colorScheme), - modal: { - margin: { - bottom: 52, - top: 52, - }, - cursor: "Arrow", - }, - zoomedBackground: { - cursor: "Arrow", - background: isLight - ? withOpacity(background(colorScheme.lowest), 0.8) - : withOpacity(background(colorScheme.highest), 0.6), - }, - zoomedPaneForeground: { - margin: 16, - shadow: colorScheme.modalShadow, - border: border(colorScheme.lowest, { overlay: true }), - }, - zoomedPanelForeground: { - margin: 16, - border: border(colorScheme.lowest, { overlay: true }), - }, - dock: { - left: { - border: border(layer, { right: true }), - }, - bottom: { - border: border(layer, { top: true }), - }, - right: { - border: border(layer, { left: true }), - }, - }, - paneDivider: { - color: borderColor(layer), - width: 1, - }, - statusBar: statusBar(colorScheme), - titlebar: { - itemSpacing, - facePileSpacing: 2, - height: 33, // 32px + 1px border. It's important the content area of the titlebar is evenly sized to vertically center avatar images. - background: background(layer), - border: border(layer, { bottom: true }), - padding: { - left: 80, - right: itemSpacing, - }, - - // Project - title: text(layer, "sans", "variant"), - highlight_color: text(layer, "sans", "active").color, - - // Collaborators - leaderAvatar: { - width: avatarWidth, - outerWidth: avatarOuterWidth, - cornerRadius: avatarWidth / 2, - outerCornerRadius: avatarOuterWidth / 2, - }, - followerAvatar: { - width: followerAvatarWidth, - outerWidth: followerAvatarOuterWidth, - cornerRadius: followerAvatarWidth / 2, - outerCornerRadius: followerAvatarOuterWidth / 2, - }, - inactiveAvatarGrayscale: true, - followerAvatarOverlap: 8, - leaderSelection: { - margin: { - top: 4, - bottom: 4, - }, - padding: { - left: 2, - right: 2, - top: 2, - bottom: 2, - }, - cornerRadius: 6, - }, - avatarRibbon: { - height: 3, - width: 12, - // TODO: Chore: Make avatarRibbon colors driven by the theme rather than being hard coded. - }, - - // Sign in buttom - // FlatButton, Variant - signInPrompt: merge(titlebarButton, { - inactive: { - default: { - margin: { - left: itemSpacing, - }, - }, - }, + background: background(layer, "variant", "hovered"), + border: border(layer, "variant", "hovered"), + }, + clicked: { + ...text(layer, "sans", "variant", "pressed", { + size: "xs", }), - - // Offline Indicator - offlineIcon: { - color: foreground(layer, "variant"), - width: 16, - margin: { - left: itemSpacing, - }, - padding: { - right: 4, - }, - }, - - // Notice that the collaboration server is out of date - outdatedWarning: { - ...text(layer, "sans", "warning", { size: "xs" }), - background: withOpacity(background(layer, "warning"), 0.3), - border: border(layer, "warning"), - margin: { - left: itemSpacing, - }, - padding: { - left: 8, - right: 8, - }, - cornerRadius: 6, - }, - callControl: interactive({ - base: { - cornerRadius: 6, - color: foreground(layer, "variant"), - iconWidth: 12, - buttonWidth: 20, - }, - state: { - hovered: { - background: background(layer, "variant", "hovered"), - color: foreground(layer, "variant", "hovered"), - }, - }, - }), - toggleContactsButton: toggleable( - interactive({ - base: { - margin: { left: itemSpacing }, - cornerRadius: 6, - color: foreground(layer, "variant"), - iconWidth: 14, - buttonWidth: 20, - }, - state: { - clicked: { - background: background(layer, "variant", "pressed"), - color: foreground(layer, "variant", "pressed"), - }, - hovered: { - background: background(layer, "variant", "hovered"), - color: foreground(layer, "variant", "hovered"), - }, - }, - }), - { - default: { - background: background(layer, "variant", "active"), - color: foreground(layer, "variant", "active"), - }, - } - ), - userMenuButton: merge(titlebarButton, { - inactive: { - default: { - buttonWidth: 20, - iconWidth: 12, - }, - }, - active: { - // posiewic: these properties are not currently set on main - default: { - iconWidth: 12, - button_width: 20, - }, - }, - }), - - toggleContactsBadge: { - cornerRadius: 3, - padding: 2, - margin: { top: 3, left: 3 }, - border: border(layer), - background: foreground(layer, "accent"), - }, - shareButton: { - ...titlebarButton, - }, + background: background(layer, "variant", "pressed"), + border: border(layer, "variant", "pressed"), + }, }, - - toolbar: { - height: 34, - background: background(colorScheme.highest), - border: border(colorScheme.highest, { bottom: true }), - itemSpacing: 8, - navButton: interactive({ - base: { - color: foreground(colorScheme.highest, "on"), - iconWidth: 12, - buttonWidth: 24, - cornerRadius: 6, - }, - state: { - hovered: { - color: foreground(colorScheme.highest, "on", "hovered"), - background: background( - colorScheme.highest, - "on", - "hovered" - ), - }, - disabled: { - color: foreground( - colorScheme.highest, - "on", - "disabled" - ), - }, - }, - }), - padding: { left: 8, right: 8, top: 4, bottom: 4 }, + }), + state: { + active: { + default: { + ...text(layer, "sans", "variant", "active", { size: "xs" }), + background: background(layer, "variant", "active"), + border: border(layer, "variant", "active"), }, - breadcrumbHeight: 24, - breadcrumbs: interactive({ - base: { - ...text(colorScheme.highest, "sans", "variant"), - cornerRadius: 6, - padding: { - left: 6, - right: 6, - }, - }, - state: { - hovered: { - color: foreground(colorScheme.highest, "on", "hovered"), - background: background( - colorScheme.highest, - "on", - "hovered" - ), - }, - }, - }), - disconnectedOverlay: { - ...text(layer, "sans"), - background: withOpacity(background(layer), 0.8), - }, - notification: { - margin: { top: 10 }, - background: background(colorScheme.middle), - cornerRadius: 6, - padding: 12, - border: border(colorScheme.middle), - shadow: colorScheme.popoverShadow, - }, - notifications: { - width: 400, - margin: { right: 10, bottom: 10 }, - }, - dropTargetOverlayColor: withOpacity(foreground(layer, "variant"), 0.5), + } } + } + ) + const avatarWidth = 18 + const avatarOuterWidth = avatarWidth + 4 + const followerAvatarWidth = 14 + const followerAvatarOuterWidth = followerAvatarWidth + 4 + + return { + background: background(colorScheme.lowest), + blankPane: { + logoContainer: { + width: 256, + height: 256, + }, + logo: svg( + withOpacity("#000000", colorScheme.isLight ? 0.6 : 0.8), + "icons/logo_96.svg", + 256, + 256 + ), + + logoShadow: svg( + withOpacity( + colorScheme.isLight + ? "#FFFFFF" + : colorScheme.lowest.base.default.background, + colorScheme.isLight ? 1 : 0.6 + ), + "icons/logo_96.svg", + 256, + 256 + ), + keyboardHints: { + margin: { + top: 96, + }, + cornerRadius: 4, + }, + keyboardHint: interactive({ + base: { + ...text(layer, "sans", "variant", { size: "sm" }), + padding: { + top: 3, + left: 8, + right: 8, + bottom: 3, + }, + cornerRadius: 8, + }, + state: { + hovered: { + ...text(layer, "sans", "active", { size: "sm" }), + }, + }, + }), + + keyboardHintWidth: 320, + }, + joiningProjectAvatar: { + cornerRadius: 40, + width: 80, + }, + joiningProjectMessage: { + padding: 12, + ...text(layer, "sans", { size: "lg" }), + }, + externalLocationMessage: { + background: background(colorScheme.middle, "accent"), + border: border(colorScheme.middle, "accent"), + cornerRadius: 6, + padding: 12, + margin: { bottom: 8, right: 8 }, + ...text(colorScheme.middle, "sans", "accent", { size: "xs" }), + }, + leaderBorderOpacity: 0.7, + leaderBorderWidth: 2.0, + tabBar: tabBar(colorScheme), + modal: { + margin: { + bottom: 52, + top: 52, + }, + cursor: "Arrow", + }, + zoomedBackground: { + cursor: "Arrow", + background: isLight + ? withOpacity(background(colorScheme.lowest), 0.8) + : withOpacity(background(colorScheme.highest), 0.6), + }, + zoomedPaneForeground: { + margin: 16, + shadow: colorScheme.modalShadow, + border: border(colorScheme.lowest, { overlay: true }), + }, + zoomedPanelForeground: { + margin: 16, + border: border(colorScheme.lowest, { overlay: true }), + }, + dock: { + left: { + border: border(layer, { right: true }), + }, + bottom: { + border: border(layer, { top: true }), + }, + right: { + border: border(layer, { left: true }), + }, + }, + paneDivider: { + color: borderColor(layer), + width: 1, + }, + statusBar: statusBar(colorScheme), + titlebar: { + itemSpacing, + facePileSpacing: 2, + height: 33, // 32px + 1px border. It's important the content area of the titlebar is evenly sized to vertically center avatar images. + background: background(layer), + border: border(layer, { bottom: true }), + padding: { + left: 80, + right: itemSpacing, + }, + + // Project + title: text(layer, "sans", "variant"), + highlight_color: text(layer, "sans", "active").color, + + // Collaborators + leaderAvatar: { + width: avatarWidth, + outerWidth: avatarOuterWidth, + cornerRadius: avatarWidth / 2, + outerCornerRadius: avatarOuterWidth / 2, + }, + followerAvatar: { + width: followerAvatarWidth, + outerWidth: followerAvatarOuterWidth, + cornerRadius: followerAvatarWidth / 2, + outerCornerRadius: followerAvatarOuterWidth / 2, + }, + inactiveAvatarGrayscale: true, + followerAvatarOverlap: 8, + leaderSelection: { + margin: { + top: 4, + bottom: 4, + }, + padding: { + left: 2, + right: 2, + top: 2, + bottom: 2, + }, + cornerRadius: 6, + }, + avatarRibbon: { + height: 3, + width: 12, + // TODO: Chore: Make avatarRibbon colors driven by the theme rather than being hard coded. + }, + + // Sign in buttom + // FlatButton, Variant + signInPrompt: merge(titlebarButton, { + inactive: { + default: { + margin: { + left: itemSpacing, + }, + }, + }, + }), + + // Offline Indicator + offlineIcon: { + color: foreground(layer, "variant"), + width: 16, + margin: { + left: itemSpacing, + }, + padding: { + right: 4, + }, + }, + + // Notice that the collaboration server is out of date + outdatedWarning: { + ...text(layer, "sans", "warning", { size: "xs" }), + background: withOpacity(background(layer, "warning"), 0.3), + border: border(layer, "warning"), + margin: { + left: itemSpacing, + }, + padding: { + left: 8, + right: 8, + }, + cornerRadius: 6, + }, + callControl: interactive({ + base: { + cornerRadius: 6, + color: foreground(layer, "variant"), + iconWidth: 12, + buttonWidth: 20, + }, + state: { + hovered: { + background: background(layer, "variant", "hovered"), + color: foreground(layer, "variant", "hovered"), + }, + }, + }), + toggleContactsButton: toggleable({ + base: + interactive({ + base: { + margin: { left: itemSpacing }, + cornerRadius: 6, + color: foreground(layer, "variant"), + iconWidth: 14, + buttonWidth: 20, + }, + state: { + clicked: { + background: background(layer, "variant", "pressed"), + color: foreground(layer, "variant", "pressed"), + }, + hovered: { + background: background(layer, "variant", "hovered"), + color: foreground(layer, "variant", "hovered"), + }, + }, + }), state: + { + active: { + default: { + background: background(layer, "variant", "active"), + color: foreground(layer, "variant", "active"), + }, + } + } + } + ), + userMenuButton: merge(titlebarButton, { + inactive: { + default: { + buttonWidth: 20, + iconWidth: 12, + }, + }, + active: { + // posiewic: these properties are not currently set on main + default: { + iconWidth: 12, + button_width: 20, + }, + }, + }), + + toggleContactsBadge: { + cornerRadius: 3, + padding: 2, + margin: { top: 3, left: 3 }, + border: border(layer), + background: foreground(layer, "accent"), + }, + shareButton: { + ...titlebarButton, + }, + }, + + toolbar: { + height: 34, + background: background(colorScheme.highest), + border: border(colorScheme.highest, { bottom: true }), + itemSpacing: 8, + navButton: interactive({ + base: { + color: foreground(colorScheme.highest, "on"), + iconWidth: 12, + buttonWidth: 24, + cornerRadius: 6, + }, + state: { + hovered: { + color: foreground(colorScheme.highest, "on", "hovered"), + background: background( + colorScheme.highest, + "on", + "hovered" + ), + }, + disabled: { + color: foreground( + colorScheme.highest, + "on", + "disabled" + ), + }, + }, + }), + padding: { left: 8, right: 8, top: 4, bottom: 4 }, + }, + breadcrumbHeight: 24, + breadcrumbs: interactive({ + base: { + ...text(colorScheme.highest, "sans", "variant"), + cornerRadius: 6, + padding: { + left: 6, + right: 6, + }, + }, + state: { + hovered: { + color: foreground(colorScheme.highest, "on", "hovered"), + background: background( + colorScheme.highest, + "on", + "hovered" + ), + }, + }, + }), + disconnectedOverlay: { + ...text(layer, "sans"), + background: withOpacity(background(layer), 0.8), + }, + notification: { + margin: { top: 10 }, + background: background(colorScheme.middle), + cornerRadius: 6, + padding: 12, + border: border(colorScheme.middle), + shadow: colorScheme.popoverShadow, + }, + notifications: { + width: 400, + margin: { right: 10, bottom: 10 }, + }, + dropTargetOverlayColor: withOpacity(foreground(layer, "variant"), 0.5), + } } From dacfd70fb4390b52b04dd66dcb562db4e13e49e8 Mon Sep 17 00:00:00 2001 From: Mikayla Maki Date: Tue, 20 Jun 2023 15:46:30 -0700 Subject: [PATCH 42/56] Remove unescessary enum --- crates/context_menu/src/context_menu.rs | 22 +++---------------- crates/theme/src/theme.rs | 29 ++++++------------------- crates/workspace/src/dock.rs | 9 ++------ 3 files changed, 12 insertions(+), 48 deletions(-) diff --git a/crates/context_menu/src/context_menu.rs b/crates/context_menu/src/context_menu.rs index e140177c5c..de78b51e9c 100644 --- a/crates/context_menu/src/context_menu.rs +++ b/crates/context_menu/src/context_menu.rs @@ -9,7 +9,6 @@ use gpui::{ }; use menu::*; use std::{any::TypeId, borrow::Cow, sync::Arc, time::Duration}; -use theme::ToggleState; pub fn init(cx: &mut AppContext) { cx.add_action(ContextMenu::select_first); @@ -329,12 +328,7 @@ impl ContextMenu { Flex::column().with_children(self.items.iter().enumerate().map(|(ix, item)| { match item { ContextMenuItem::Item { label, .. } => { - let toggle_state = if Some(ix) == self.selected_index { - ToggleState::Active - } else { - ToggleState::Inactive - }; - let style = style.item.in_state(toggle_state); + let style = style.item.in_state(self.selected_index == Some(ix)); let style = style.style_for(&mut Default::default()); match label { @@ -367,12 +361,7 @@ impl ContextMenu { .with_children(self.items.iter().enumerate().map(|(ix, item)| { match item { ContextMenuItem::Item { action, .. } => { - let toggle_state = if Some(ix) == self.selected_index { - ToggleState::Active - } else { - ToggleState::Inactive - }; - let style = style.item.in_state(toggle_state); + let style = style.item.in_state(self.selected_index == Some(ix)); let style = style.style_for(&mut Default::default()); match action { @@ -419,12 +408,7 @@ impl ContextMenu { let action = action.clone(); let view_id = self.parent_view_id; MouseEventHandler::::new(ix, cx, |state, _| { - let toggle_state = if Some(ix) == self.selected_index { - ToggleState::Active - } else { - ToggleState::Inactive - }; - let style = style.item.in_state(toggle_state); + let style = style.item.in_state(self.selected_index == Some(ix)); let style = style.style_for(state); let keystroke = match &action { ContextMenuItemAction::Action(action) => Some( diff --git a/crates/theme/src/theme.rs b/crates/theme/src/theme.rs index 8f9f228129..586f444ebb 100644 --- a/crates/theme/src/theme.rs +++ b/crates/theme/src/theme.rs @@ -816,37 +816,22 @@ pub struct Toggleable { inactive: T, } -#[derive(Copy, Clone, Debug, Default, Hash, PartialEq, Eq)] -pub enum ToggleState { - #[default] - Inactive, - Active, -} - -impl> From for ToggleState { - fn from(item: T) -> Self { - match *item.borrow() { - true => Self::Active, - false => Self::Inactive, - } - } -} - impl Toggleable { pub fn new(active: T, inactive: T) -> Self { Self { active, inactive } } - pub fn in_state(&self, state: impl Into) -> &T { - match state.into() { - ToggleState::Inactive => &self.inactive, - ToggleState::Active => &self.active, + pub fn in_state(&self, active: bool) -> &T { + if active { + &self.inactive + } else { + &self.active } } pub fn active_state(&self) -> &T { - self.in_state(ToggleState::Active) + self.in_state(true) } pub fn inactive_state(&self) -> &T { - self.in_state(ToggleState::Inactive) + self.in_state(false) } } diff --git a/crates/workspace/src/dock.rs b/crates/workspace/src/dock.rs index ec00ddece8..9d23c6aca4 100644 --- a/crates/workspace/src/dock.rs +++ b/crates/workspace/src/dock.rs @@ -6,7 +6,7 @@ use gpui::{ }; use serde::Deserialize; use std::rc::Rc; -use theme::{ThemeSettings, ToggleState}; +use theme::ThemeSettings; pub trait Panel: View { fn position(&self, cx: &WindowContext) -> DockPosition; @@ -498,12 +498,7 @@ impl View for PanelButtons { Stack::new() .with_child( MouseEventHandler::::new(panel_ix, cx, |state, cx| { - let toggle_state = if is_active { - ToggleState::Active - } else { - ToggleState::Inactive - }; - let style = button_style.in_state(toggle_state); + let style = button_style.in_state(is_active); let style = style.style_for(state); Flex::row() From da9401414160445725f2f855f5ba3310ced97e65 Mon Sep 17 00:00:00 2001 From: Mikayla Maki Date: Tue, 20 Jun 2023 15:54:58 -0700 Subject: [PATCH 43/56] Fix flipped boolean --- crates/theme/src/theme.rs | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/crates/theme/src/theme.rs b/crates/theme/src/theme.rs index 586f444ebb..69c06c85ad 100644 --- a/crates/theme/src/theme.rs +++ b/crates/theme/src/theme.rs @@ -822,9 +822,9 @@ impl Toggleable { } pub fn in_state(&self, active: bool) -> &T { if active { - &self.inactive - } else { &self.active + } else { + &self.inactive } } pub fn active_state(&self) -> &T { From b1b4b563c2b1adc377cf52cc4477f287f93ececd Mon Sep 17 00:00:00 2001 From: Mikayla Maki Date: Tue, 20 Jun 2023 15:58:59 -0700 Subject: [PATCH 44/56] Add zed typescript settings Remove 2 space indent --- styles/.zed/settings.json | 11 + styles/src/styleTree/commandPalette.ts | 64 +- styles/src/styleTree/contactList.ts | 424 +++++------ styles/src/styleTree/contextMenu.ts | 108 +-- styles/src/styleTree/editor.ts | 584 +++++++-------- styles/src/styleTree/picker.ts | 178 ++--- styles/src/styleTree/projectPanel.ts | 234 +++--- styles/src/styleTree/search.ts | 238 +++--- styles/src/styleTree/statusBar.ts | 268 +++---- styles/src/styleTree/tabBar.ts | 224 +++--- styles/src/styleTree/toolbarDropdownMenu.ts | 110 +-- styles/src/styleTree/workspace.ts | 776 ++++++++++---------- 12 files changed, 1615 insertions(+), 1604 deletions(-) create mode 100644 styles/.zed/settings.json diff --git a/styles/.zed/settings.json b/styles/.zed/settings.json new file mode 100644 index 0000000000..0a3c761b8e --- /dev/null +++ b/styles/.zed/settings.json @@ -0,0 +1,11 @@ +// Folder-specific settings +// +// For a full list of overridable settings, and general information on folder-specific settings, +// see the documentation: https://docs.zed.dev/configuration/configuring-zed#folder-specific-settings +{ + "languages": { + "TypeScript": { + "tab_size": 4 + } + } +} diff --git a/styles/src/styleTree/commandPalette.ts b/styles/src/styleTree/commandPalette.ts index 947e730f55..5389a775ed 100644 --- a/styles/src/styleTree/commandPalette.ts +++ b/styles/src/styleTree/commandPalette.ts @@ -4,39 +4,39 @@ import { text, background } from "./components" import { toggleable } from "../element" export default function commandPalette(colorScheme: ColorScheme) { - let layer = colorScheme.highest + let layer = colorScheme.highest - const key = toggleable({ - base: { - text: text(layer, "mono", "variant", "default", { size: "xs" }), - cornerRadius: 2, - background: background(layer, "on"), - padding: { - top: 1, - bottom: 1, - left: 6, - right: 6, - }, - margin: { - top: 1, - bottom: 1, - left: 2, - }, - }, - state: { - active: { - text: text(layer, "mono", "on", "default", { size: "xs" }), - background: withOpacity(background(layer, "on"), 0.2), - } - } - }) + const key = toggleable({ + base: { + text: text(layer, "mono", "variant", "default", { size: "xs" }), + cornerRadius: 2, + background: background(layer, "on"), + padding: { + top: 1, + bottom: 1, + left: 6, + right: 6, + }, + margin: { + top: 1, + bottom: 1, + left: 2, + }, + }, + state: { + active: { + text: text(layer, "mono", "on", "default", { size: "xs" }), + background: withOpacity(background(layer, "on"), 0.2), + } + } + }) - return { - keystrokeSpacing: 8, - // TODO: This should be a Toggle on the rust side so we don't have to do this - key: { - inactive: { ...key.inactive }, - active: key.active, + return { + keystrokeSpacing: 8, + // TODO: This should be a Toggle on the rust side so we don't have to do this + key: { + inactive: { ...key.inactive }, + active: key.active, + } } - } } diff --git a/styles/src/styleTree/contactList.ts b/styles/src/styleTree/contactList.ts index d5ecb1c224..57034109f1 100644 --- a/styles/src/styleTree/contactList.ts +++ b/styles/src/styleTree/contactList.ts @@ -2,232 +2,232 @@ import { ColorScheme } from "../theme/colorScheme" import { background, border, borderColor, foreground, text } from "./components" import { interactive, toggleable } from "../element" export default function contactsPanel(colorScheme: ColorScheme) { - const nameMargin = 8 - const sidePadding = 12 + const nameMargin = 8 + const sidePadding = 12 - let layer = colorScheme.middle + let layer = colorScheme.middle - const contactButton = { - background: background(layer, "on"), - color: foreground(layer, "on"), - iconWidth: 8, - buttonWidth: 16, - cornerRadius: 8, - } - const projectRow = { - guestAvatarSpacing: 4, - height: 24, - guestAvatar: { - cornerRadius: 8, - width: 14, - }, - name: { - ...text(layer, "mono", { size: "sm" }), - margin: { - left: nameMargin, - right: 6, - }, - }, - guests: { - margin: { - left: nameMargin, - right: nameMargin, - }, - }, - padding: { - left: sidePadding, - right: sidePadding, - }, - } - - return { - background: background(layer), - padding: { top: 12 }, - userQueryEditor: { - background: background(layer, "on"), - cornerRadius: 6, - text: text(layer, "mono", "on"), - placeholderText: text(layer, "mono", "on", "disabled", { - size: "xs", - }), - selection: colorScheme.players[0], - border: border(layer, "on"), - padding: { - bottom: 4, - left: 8, - right: 8, - top: 4, - }, - margin: { - left: 6, - }, - }, - userQueryEditorHeight: 33, - addContactButton: { - margin: { left: 6, right: 12 }, - color: foreground(layer, "on"), - buttonWidth: 28, - iconWidth: 16, - }, - rowHeight: 28, - sectionIconSize: 8, - headerRow: toggleable({ - base: interactive({ - base: { - ...text(layer, "mono", { size: "sm" }), - margin: { top: 14 }, - padding: { - left: sidePadding, - right: sidePadding, - }, - background: background(layer, "default"), // posiewic: breaking change + const contactButton = { + background: background(layer, "on"), + color: foreground(layer, "on"), + iconWidth: 8, + buttonWidth: 16, + cornerRadius: 8, + } + const projectRow = { + guestAvatarSpacing: 4, + height: 24, + guestAvatar: { + cornerRadius: 8, + width: 14, }, - state: { - hovered: { background: background(layer, "default") }, - }, // hack, we want headerRow to be interactive for whatever reason. It probably shouldn't be interactive in the first place. - }), - state: { - active: { - default: { - ...text(layer, "mono", "active", { size: "sm" }), - background: background(layer, "active"), - }, - } - } - }), - leaveCall: interactive({ - base: { - background: background(layer), - border: border(layer), - cornerRadius: 6, - margin: { - top: 1, + name: { + ...text(layer, "mono", { size: "sm" }), + margin: { + left: nameMargin, + right: 6, + }, + }, + guests: { + margin: { + left: nameMargin, + right: nameMargin, + }, }, padding: { - top: 1, - bottom: 1, - left: 7, - right: 7, - }, - ...text(layer, "sans", "variant", { size: "xs" }), - }, - state: { - hovered: { - ...text(layer, "sans", "hovered", { size: "xs" }), - background: background(layer, "hovered"), - border: border(layer, "hovered"), - }, - }, - }), - contactRow: { - inactive: { - default: { - padding: { left: sidePadding, right: sidePadding, - }, }, - }, - active: { - default: { - background: background(layer, "active"), - padding: { - left: sidePadding, - right: sidePadding, - }, - }, - }, - }, + } - contactAvatar: { - cornerRadius: 10, - width: 18, - }, - contactStatusFree: { - cornerRadius: 4, - padding: 4, - margin: { top: 12, left: 12 }, - background: foreground(layer, "positive"), - }, - contactStatusBusy: { - cornerRadius: 4, - padding: 4, - margin: { top: 12, left: 12 }, - background: foreground(layer, "negative"), - }, - contactUsername: { - ...text(layer, "mono", { size: "sm" }), - margin: { - left: nameMargin, - }, - }, - contactButtonSpacing: nameMargin, - contactButton: interactive({ - base: { ...contactButton }, - state: { - hovered: { - background: background(layer, "hovered"), + return { + background: background(layer), + padding: { top: 12 }, + userQueryEditor: { + background: background(layer, "on"), + cornerRadius: 6, + text: text(layer, "mono", "on"), + placeholderText: text(layer, "mono", "on", "disabled", { + size: "xs", + }), + selection: colorScheme.players[0], + border: border(layer, "on"), + padding: { + bottom: 4, + left: 8, + right: 8, + top: 4, + }, + margin: { + left: 6, + }, }, - }, - }), - disabledButton: { - ...contactButton, - background: background(layer, "on"), - color: foreground(layer, "on"), - }, - callingIndicator: { - ...text(layer, "mono", "variant", { size: "xs" }), - }, - treeBranch: toggleable({ - base: - interactive({ - base: { - color: borderColor(layer), - width: 1, - }, - state: { - hovered: { - color: borderColor(layer), - }, - }, + userQueryEditorHeight: 33, + addContactButton: { + margin: { left: 6, right: 12 }, + color: foreground(layer, "on"), + buttonWidth: 28, + iconWidth: 16, + }, + rowHeight: 28, + sectionIconSize: 8, + headerRow: toggleable({ + base: interactive({ + base: { + ...text(layer, "mono", { size: "sm" }), + margin: { top: 14 }, + padding: { + left: sidePadding, + right: sidePadding, + }, + background: background(layer, "default"), // posiewic: breaking change + }, + state: { + hovered: { background: background(layer, "default") }, + }, // hack, we want headerRow to be interactive for whatever reason. It probably shouldn't be interactive in the first place. + }), + state: { + active: { + default: { + ...text(layer, "mono", "active", { size: "sm" }), + background: background(layer, "active"), + }, + } + } }), - state: { - active: { - default: { - color: borderColor(layer), - }, - } - } - } - ), - projectRow: toggleable({ - base: - interactive({ - base: { - ...projectRow, - background: background(layer), - icon: { - margin: { left: nameMargin }, - color: foreground(layer, "variant"), - width: 12, + leaveCall: interactive({ + base: { + background: background(layer), + border: border(layer), + cornerRadius: 6, + margin: { + top: 1, + }, + padding: { + top: 1, + bottom: 1, + left: 7, + right: 7, + }, + ...text(layer, "sans", "variant", { size: "xs" }), }, - name: { - ...projectRow.name, - ...text(layer, "mono", { size: "sm" }), + state: { + hovered: { + ...text(layer, "sans", "hovered", { size: "xs" }), + background: background(layer, "hovered"), + border: border(layer, "hovered"), + }, }, - }, - state: { - hovered: { - background: background(layer, "hovered"), - }, - }, }), - state: { - active: { - default: { background: background(layer, "active") }, + contactRow: { + inactive: { + default: { + padding: { + left: sidePadding, + right: sidePadding, + }, + }, + }, + active: { + default: { + background: background(layer, "active"), + padding: { + left: sidePadding, + right: sidePadding, + }, + }, + }, + }, + + contactAvatar: { + cornerRadius: 10, + width: 18, + }, + contactStatusFree: { + cornerRadius: 4, + padding: 4, + margin: { top: 12, left: 12 }, + background: foreground(layer, "positive"), + }, + contactStatusBusy: { + cornerRadius: 4, + padding: 4, + margin: { top: 12, left: 12 }, + background: foreground(layer, "negative"), + }, + contactUsername: { + ...text(layer, "mono", { size: "sm" }), + margin: { + left: nameMargin, + }, + }, + contactButtonSpacing: nameMargin, + contactButton: interactive({ + base: { ...contactButton }, + state: { + hovered: { + background: background(layer, "hovered"), + }, + }, + }), + disabledButton: { + ...contactButton, + background: background(layer, "on"), + color: foreground(layer, "on"), + }, + callingIndicator: { + ...text(layer, "mono", "variant", { size: "xs" }), + }, + treeBranch: toggleable({ + base: + interactive({ + base: { + color: borderColor(layer), + width: 1, + }, + state: { + hovered: { + color: borderColor(layer), + }, + }, + }), + state: { + active: { + default: { + color: borderColor(layer), + }, + } + } } - } + ), + projectRow: toggleable({ + base: + interactive({ + base: { + ...projectRow, + background: background(layer), + icon: { + margin: { left: nameMargin }, + color: foreground(layer, "variant"), + width: 12, + }, + name: { + ...projectRow.name, + ...text(layer, "mono", { size: "sm" }), + }, + }, + state: { + hovered: { + background: background(layer, "hovered"), + }, + }, + }), + state: { + active: { + default: { background: background(layer, "active") }, + } + } + } + ), } - ), - } } diff --git a/styles/src/styleTree/contextMenu.ts b/styles/src/styleTree/contextMenu.ts index 661742f800..7b2b9be6c2 100644 --- a/styles/src/styleTree/contextMenu.ts +++ b/styles/src/styleTree/contextMenu.ts @@ -3,61 +3,61 @@ import { background, border, borderColor, text } from "./components" import { interactive, toggleable } from "../element" export default function contextMenu(colorScheme: ColorScheme) { - let layer = colorScheme.middle - return { - background: background(layer), - cornerRadius: 10, - padding: 4, - shadow: colorScheme.popoverShadow, - border: border(layer), - keystrokeMargin: 30, - item: toggleable({ - base: - interactive({ - base: { - iconSpacing: 8, - iconWidth: 14, - padding: { left: 6, right: 6, top: 2, bottom: 2 }, - cornerRadius: 6, - label: text(layer, "sans", { size: "sm" }), - keystroke: { - ...text(layer, "sans", "variant", { - size: "sm", - weight: "bold", - }), - padding: { left: 3, right: 3 }, - }, - }, - state: { - hovered: { - background: background(layer, "hovered"), - label: text(layer, "sans", "hovered", { size: "sm" }), - keystroke: { - ...text(layer, "sans", "hovered", { - size: "sm", - weight: "bold", + let layer = colorScheme.middle + return { + background: background(layer), + cornerRadius: 10, + padding: 4, + shadow: colorScheme.popoverShadow, + border: border(layer), + keystrokeMargin: 30, + item: toggleable({ + base: + interactive({ + base: { + iconSpacing: 8, + iconWidth: 14, + padding: { left: 6, right: 6, top: 2, bottom: 2 }, + cornerRadius: 6, + label: text(layer, "sans", { size: "sm" }), + keystroke: { + ...text(layer, "sans", "variant", { + size: "sm", + weight: "bold", + }), + padding: { left: 3, right: 3 }, + }, + }, + state: { + hovered: { + background: background(layer, "hovered"), + label: text(layer, "sans", "hovered", { size: "sm" }), + keystroke: { + ...text(layer, "sans", "hovered", { + size: "sm", + weight: "bold", + }), + padding: { left: 3, right: 3 }, + }, + }, + }, }), - padding: { left: 3, right: 3 }, - }, - }, - }, - }), - state: { - active: { - default: { - background: background(layer, "active"), - }, - hovered: { - background: background(layer, "active"), - }, + state: { + active: { + default: { + background: background(layer, "active"), + }, + hovered: { + background: background(layer, "active"), + }, + } + } } - } - } - ), + ), - separator: { - background: borderColor(layer), - margin: { top: 2, bottom: 2 }, - }, - } + separator: { + background: borderColor(layer), + margin: { top: 2, bottom: 2 }, + }, + } } diff --git a/styles/src/styleTree/editor.ts b/styles/src/styleTree/editor.ts index 2437257875..b02366192a 100644 --- a/styles/src/styleTree/editor.ts +++ b/styles/src/styleTree/editor.ts @@ -7,303 +7,303 @@ import { buildSyntax } from "../theme/syntax" import { interactive, toggleable } from "../element" export default function editor(colorScheme: ColorScheme) { - const { isLight } = colorScheme + const { isLight } = colorScheme - let layer = colorScheme.highest + let layer = colorScheme.highest - const autocompleteItem = { - cornerRadius: 6, - padding: { - bottom: 2, - left: 6, - right: 6, - top: 2, - }, - } - - function diagnostic(layer: Layer, styleSet: StyleSets) { - return { - textScaleFactor: 0.857, - header: { - border: border(layer, { - top: true, - }), - }, - message: { - text: text(layer, "sans", styleSet, "default", { size: "sm" }), - highlightText: text(layer, "sans", styleSet, "default", { - size: "sm", - weight: "bold", - }), - }, - } - } - - const syntax = buildSyntax(colorScheme) - - return { - textColor: syntax.primary.color, - background: background(layer), - activeLineBackground: withOpacity(background(layer, "on"), 0.75), - highlightedLineBackground: background(layer, "on"), - // Inline autocomplete suggestions, Co-pilot suggestions, etc. - suggestion: syntax.predictive, - codeActions: { - indicator: toggleable({ - base: - interactive({ - base: { - color: foreground(layer, "variant"), - }, - state: { - clicked: { - color: foreground(layer, "base"), - }, - hovered: { - color: foreground(layer, "on"), - }, - }, - }), - state: { - active: { - default: { - color: foreground(layer, "on"), - }, - } - } - } - ), - - verticalScale: 0.55, - }, - folds: { - iconMarginScale: 2.5, - foldedIcon: "icons/chevron_right_8.svg", - foldableIcon: "icons/chevron_down_8.svg", - indicator: toggleable({ - base: - interactive({ - base: { - color: foreground(layer, "variant"), - }, - state: { - clicked: { - color: foreground(layer, "base"), - }, - hovered: { - color: foreground(layer, "on"), - }, - }, - }), - state: { - active: { - default: { - color: foreground(layer, "on"), - }, - } - } - } - ), - ellipses: { - textColor: colorScheme.ramps.neutral(0.71).hex(), - cornerRadiusFactor: 0.15, - background: { - // Copied from hover_popover highlight - default: { - color: colorScheme.ramps.neutral(0.5).alpha(0.0).hex(), - }, - - hovered: { - color: colorScheme.ramps.neutral(0.5).alpha(0.5).hex(), - }, - - clicked: { - color: colorScheme.ramps.neutral(0.5).alpha(0.7).hex(), - }, - }, - }, - foldBackground: foreground(layer, "variant"), - }, - diff: { - deleted: isLight - ? colorScheme.ramps.red(0.5).hex() - : colorScheme.ramps.red(0.4).hex(), - modified: isLight - ? colorScheme.ramps.yellow(0.5).hex() - : colorScheme.ramps.yellow(0.5).hex(), - inserted: isLight - ? colorScheme.ramps.green(0.4).hex() - : colorScheme.ramps.green(0.5).hex(), - removedWidthEm: 0.275, - widthEm: 0.15, - cornerRadius: 0.05, - }, - /** Highlights matching occurrences of what is under the cursor - * as well as matched brackets - */ - documentHighlightReadBackground: withOpacity( - foreground(layer, "accent"), - 0.1 - ), - documentHighlightWriteBackground: colorScheme.ramps - .neutral(0.5) - .alpha(0.4) - .hex(), // TODO: This was blend * 2 - errorColor: background(layer, "negative"), - gutterBackground: background(layer), - gutterPaddingFactor: 3.5, - lineNumber: withOpacity(foreground(layer), 0.35), - lineNumberActive: foreground(layer), - renameFade: 0.6, - unnecessaryCodeFade: 0.5, - selection: colorScheme.players[0], - whitespace: colorScheme.ramps.neutral(0.5).hex(), - guestSelections: [ - colorScheme.players[1], - colorScheme.players[2], - colorScheme.players[3], - colorScheme.players[4], - colorScheme.players[5], - colorScheme.players[6], - colorScheme.players[7], - ], - autocomplete: { - background: background(colorScheme.middle), - cornerRadius: 8, - padding: 4, - margin: { - left: -14, - }, - border: border(colorScheme.middle), - shadow: colorScheme.popoverShadow, - matchHighlight: foreground(colorScheme.middle, "accent"), - item: autocompleteItem, - hoveredItem: { - ...autocompleteItem, - matchHighlight: foreground( - colorScheme.middle, - "accent", - "hovered" - ), - background: background(colorScheme.middle, "hovered"), - }, - selectedItem: { - ...autocompleteItem, - matchHighlight: foreground( - colorScheme.middle, - "accent", - "active" - ), - background: background(colorScheme.middle, "active"), - }, - }, - diagnosticHeader: { - background: background(colorScheme.middle), - iconWidthFactor: 1.5, - textScaleFactor: 0.857, - border: border(colorScheme.middle, { - bottom: true, - top: true, - }), - code: { - ...text(colorScheme.middle, "mono", { size: "sm" }), - margin: { - left: 10, - }, - }, - source: { - text: text(colorScheme.middle, "sans", { - size: "sm", - weight: "bold", - }), - }, - message: { - highlightText: text(colorScheme.middle, "sans", { - size: "sm", - weight: "bold", - }), - text: text(colorScheme.middle, "sans", { size: "sm" }), - }, - }, - diagnosticPathHeader: { - background: background(colorScheme.middle), - textScaleFactor: 0.857, - filename: text(colorScheme.middle, "mono", { size: "sm" }), - path: { - ...text(colorScheme.middle, "mono", { size: "sm" }), - margin: { - left: 12, - }, - }, - }, - errorDiagnostic: diagnostic(colorScheme.middle, "negative"), - warningDiagnostic: diagnostic(colorScheme.middle, "warning"), - informationDiagnostic: diagnostic(colorScheme.middle, "accent"), - hintDiagnostic: diagnostic(colorScheme.middle, "warning"), - invalidErrorDiagnostic: diagnostic(colorScheme.middle, "base"), - invalidHintDiagnostic: diagnostic(colorScheme.middle, "base"), - invalidInformationDiagnostic: diagnostic(colorScheme.middle, "base"), - invalidWarningDiagnostic: diagnostic(colorScheme.middle, "base"), - hoverPopover: hoverPopover(colorScheme), - linkDefinition: { - color: syntax.linkUri.color, - underline: syntax.linkUri.underline, - }, - jumpIcon: interactive({ - base: { - color: foreground(layer, "on"), - iconWidth: 20, - buttonWidth: 20, + const autocompleteItem = { cornerRadius: 6, padding: { - top: 6, - bottom: 6, - left: 6, - right: 6, + bottom: 2, + left: 6, + right: 6, + top: 2, }, - }, - state: { - hovered: { - background: background(layer, "on", "hovered"), - }, - }, - }), + } - scrollbar: { - width: 12, - minHeightFactor: 1.0, - track: { - border: border(layer, "variant", { left: true }), - }, - thumb: { - background: withOpacity(background(layer, "inverted"), 0.3), - border: { - width: 1, - color: borderColor(layer, "variant"), - top: false, - right: true, - left: true, - bottom: false, + function diagnostic(layer: Layer, styleSet: StyleSets) { + return { + textScaleFactor: 0.857, + header: { + border: border(layer, { + top: true, + }), + }, + message: { + text: text(layer, "sans", styleSet, "default", { size: "sm" }), + highlightText: text(layer, "sans", styleSet, "default", { + size: "sm", + weight: "bold", + }), + }, + } + } + + const syntax = buildSyntax(colorScheme) + + return { + textColor: syntax.primary.color, + background: background(layer), + activeLineBackground: withOpacity(background(layer, "on"), 0.75), + highlightedLineBackground: background(layer, "on"), + // Inline autocomplete suggestions, Co-pilot suggestions, etc. + suggestion: syntax.predictive, + codeActions: { + indicator: toggleable({ + base: + interactive({ + base: { + color: foreground(layer, "variant"), + }, + state: { + clicked: { + color: foreground(layer, "base"), + }, + hovered: { + color: foreground(layer, "on"), + }, + }, + }), + state: { + active: { + default: { + color: foreground(layer, "on"), + }, + } + } + } + ), + + verticalScale: 0.55, }, - }, - git: { - deleted: isLight - ? withOpacity(colorScheme.ramps.red(0.5).hex(), 0.8) - : withOpacity(colorScheme.ramps.red(0.4).hex(), 0.8), - modified: isLight - ? withOpacity(colorScheme.ramps.yellow(0.5).hex(), 0.8) - : withOpacity(colorScheme.ramps.yellow(0.4).hex(), 0.8), - inserted: isLight - ? withOpacity(colorScheme.ramps.green(0.5).hex(), 0.8) - : withOpacity(colorScheme.ramps.green(0.4).hex(), 0.8), - }, - }, - compositionMark: { - underline: { - thickness: 1.0, - color: borderColor(layer), - }, - }, - syntax, - } + folds: { + iconMarginScale: 2.5, + foldedIcon: "icons/chevron_right_8.svg", + foldableIcon: "icons/chevron_down_8.svg", + indicator: toggleable({ + base: + interactive({ + base: { + color: foreground(layer, "variant"), + }, + state: { + clicked: { + color: foreground(layer, "base"), + }, + hovered: { + color: foreground(layer, "on"), + }, + }, + }), + state: { + active: { + default: { + color: foreground(layer, "on"), + }, + } + } + } + ), + ellipses: { + textColor: colorScheme.ramps.neutral(0.71).hex(), + cornerRadiusFactor: 0.15, + background: { + // Copied from hover_popover highlight + default: { + color: colorScheme.ramps.neutral(0.5).alpha(0.0).hex(), + }, + + hovered: { + color: colorScheme.ramps.neutral(0.5).alpha(0.5).hex(), + }, + + clicked: { + color: colorScheme.ramps.neutral(0.5).alpha(0.7).hex(), + }, + }, + }, + foldBackground: foreground(layer, "variant"), + }, + diff: { + deleted: isLight + ? colorScheme.ramps.red(0.5).hex() + : colorScheme.ramps.red(0.4).hex(), + modified: isLight + ? colorScheme.ramps.yellow(0.5).hex() + : colorScheme.ramps.yellow(0.5).hex(), + inserted: isLight + ? colorScheme.ramps.green(0.4).hex() + : colorScheme.ramps.green(0.5).hex(), + removedWidthEm: 0.275, + widthEm: 0.15, + cornerRadius: 0.05, + }, + /** Highlights matching occurrences of what is under the cursor + * as well as matched brackets + */ + documentHighlightReadBackground: withOpacity( + foreground(layer, "accent"), + 0.1 + ), + documentHighlightWriteBackground: colorScheme.ramps + .neutral(0.5) + .alpha(0.4) + .hex(), // TODO: This was blend * 2 + errorColor: background(layer, "negative"), + gutterBackground: background(layer), + gutterPaddingFactor: 3.5, + lineNumber: withOpacity(foreground(layer), 0.35), + lineNumberActive: foreground(layer), + renameFade: 0.6, + unnecessaryCodeFade: 0.5, + selection: colorScheme.players[0], + whitespace: colorScheme.ramps.neutral(0.5).hex(), + guestSelections: [ + colorScheme.players[1], + colorScheme.players[2], + colorScheme.players[3], + colorScheme.players[4], + colorScheme.players[5], + colorScheme.players[6], + colorScheme.players[7], + ], + autocomplete: { + background: background(colorScheme.middle), + cornerRadius: 8, + padding: 4, + margin: { + left: -14, + }, + border: border(colorScheme.middle), + shadow: colorScheme.popoverShadow, + matchHighlight: foreground(colorScheme.middle, "accent"), + item: autocompleteItem, + hoveredItem: { + ...autocompleteItem, + matchHighlight: foreground( + colorScheme.middle, + "accent", + "hovered" + ), + background: background(colorScheme.middle, "hovered"), + }, + selectedItem: { + ...autocompleteItem, + matchHighlight: foreground( + colorScheme.middle, + "accent", + "active" + ), + background: background(colorScheme.middle, "active"), + }, + }, + diagnosticHeader: { + background: background(colorScheme.middle), + iconWidthFactor: 1.5, + textScaleFactor: 0.857, + border: border(colorScheme.middle, { + bottom: true, + top: true, + }), + code: { + ...text(colorScheme.middle, "mono", { size: "sm" }), + margin: { + left: 10, + }, + }, + source: { + text: text(colorScheme.middle, "sans", { + size: "sm", + weight: "bold", + }), + }, + message: { + highlightText: text(colorScheme.middle, "sans", { + size: "sm", + weight: "bold", + }), + text: text(colorScheme.middle, "sans", { size: "sm" }), + }, + }, + diagnosticPathHeader: { + background: background(colorScheme.middle), + textScaleFactor: 0.857, + filename: text(colorScheme.middle, "mono", { size: "sm" }), + path: { + ...text(colorScheme.middle, "mono", { size: "sm" }), + margin: { + left: 12, + }, + }, + }, + errorDiagnostic: diagnostic(colorScheme.middle, "negative"), + warningDiagnostic: diagnostic(colorScheme.middle, "warning"), + informationDiagnostic: diagnostic(colorScheme.middle, "accent"), + hintDiagnostic: diagnostic(colorScheme.middle, "warning"), + invalidErrorDiagnostic: diagnostic(colorScheme.middle, "base"), + invalidHintDiagnostic: diagnostic(colorScheme.middle, "base"), + invalidInformationDiagnostic: diagnostic(colorScheme.middle, "base"), + invalidWarningDiagnostic: diagnostic(colorScheme.middle, "base"), + hoverPopover: hoverPopover(colorScheme), + linkDefinition: { + color: syntax.linkUri.color, + underline: syntax.linkUri.underline, + }, + jumpIcon: interactive({ + base: { + color: foreground(layer, "on"), + iconWidth: 20, + buttonWidth: 20, + cornerRadius: 6, + padding: { + top: 6, + bottom: 6, + left: 6, + right: 6, + }, + }, + state: { + hovered: { + background: background(layer, "on", "hovered"), + }, + }, + }), + + scrollbar: { + width: 12, + minHeightFactor: 1.0, + track: { + border: border(layer, "variant", { left: true }), + }, + thumb: { + background: withOpacity(background(layer, "inverted"), 0.3), + border: { + width: 1, + color: borderColor(layer, "variant"), + top: false, + right: true, + left: true, + bottom: false, + }, + }, + git: { + deleted: isLight + ? withOpacity(colorScheme.ramps.red(0.5).hex(), 0.8) + : withOpacity(colorScheme.ramps.red(0.4).hex(), 0.8), + modified: isLight + ? withOpacity(colorScheme.ramps.yellow(0.5).hex(), 0.8) + : withOpacity(colorScheme.ramps.yellow(0.4).hex(), 0.8), + inserted: isLight + ? withOpacity(colorScheme.ramps.green(0.5).hex(), 0.8) + : withOpacity(colorScheme.ramps.green(0.4).hex(), 0.8), + }, + }, + compositionMark: { + underline: { + thickness: 1.0, + color: borderColor(layer), + }, + }, + syntax, + } } diff --git a/styles/src/styleTree/picker.ts b/styles/src/styleTree/picker.ts index f7cec1bd41..809cd1743f 100644 --- a/styles/src/styleTree/picker.ts +++ b/styles/src/styleTree/picker.ts @@ -4,95 +4,95 @@ import { background, border, text } from "./components" import { interactive, toggleable } from "../element" export default function picker(colorScheme: ColorScheme): any { - let layer = colorScheme.lowest - const container = { - background: background(layer), - border: border(layer), - shadow: colorScheme.modalShadow, - cornerRadius: 12, - padding: { - bottom: 4, - }, - } - const inputEditor = { - placeholderText: text(layer, "sans", "on", "disabled"), - selection: colorScheme.players[0], - text: text(layer, "mono", "on"), - border: border(layer, { bottom: true }), - padding: { - bottom: 8, - left: 16, - right: 16, - top: 8, - }, - margin: { - bottom: 4, - }, - } - const emptyInputEditor: any = { ...inputEditor } - delete emptyInputEditor.border - delete emptyInputEditor.margin - - return { - ...container, - emptyContainer: { - ...container, - padding: {}, - }, - item: toggleable({ - base: - interactive({ - base: { - padding: { - bottom: 4, - left: 12, - right: 12, - top: 4, - }, - margin: { - top: 1, - left: 4, - right: 4, - }, - cornerRadius: 8, - text: text(layer, "sans", "variant"), - highlightText: text(layer, "sans", "accent", { - weight: "bold", - }), - }, - state: { - hovered: { - background: withOpacity( - background(layer, "hovered"), - 0.5 - ), - }, - }, - }), - state: { - active: { - default: { - background: withOpacity( - background(layer, "base", "active"), - 0.5 - ), - //text: text(layer, "sans", "base", "active"), - }, - } - } + let layer = colorScheme.lowest + const container = { + background: background(layer), + border: border(layer), + shadow: colorScheme.modalShadow, + cornerRadius: 12, + padding: { + bottom: 4, + }, } - ), + const inputEditor = { + placeholderText: text(layer, "sans", "on", "disabled"), + selection: colorScheme.players[0], + text: text(layer, "mono", "on"), + border: border(layer, { bottom: true }), + padding: { + bottom: 8, + left: 16, + right: 16, + top: 8, + }, + margin: { + bottom: 4, + }, + } + const emptyInputEditor: any = { ...inputEditor } + delete emptyInputEditor.border + delete emptyInputEditor.margin - inputEditor, - emptyInputEditor, - noMatches: { - text: text(layer, "sans", "variant"), - padding: { - bottom: 8, - left: 16, - right: 16, - top: 8, - }, - }, - } + return { + ...container, + emptyContainer: { + ...container, + padding: {}, + }, + item: toggleable({ + base: + interactive({ + base: { + padding: { + bottom: 4, + left: 12, + right: 12, + top: 4, + }, + margin: { + top: 1, + left: 4, + right: 4, + }, + cornerRadius: 8, + text: text(layer, "sans", "variant"), + highlightText: text(layer, "sans", "accent", { + weight: "bold", + }), + }, + state: { + hovered: { + background: withOpacity( + background(layer, "hovered"), + 0.5 + ), + }, + }, + }), + state: { + active: { + default: { + background: withOpacity( + background(layer, "base", "active"), + 0.5 + ), + //text: text(layer, "sans", "base", "active"), + }, + } + } + } + ), + + inputEditor, + emptyInputEditor, + noMatches: { + text: text(layer, "sans", "variant"), + padding: { + bottom: 8, + left: 16, + right: 16, + top: 8, + }, + }, + } } diff --git a/styles/src/styleTree/projectPanel.ts b/styles/src/styleTree/projectPanel.ts index babd1431fb..7c37ce6bd3 100644 --- a/styles/src/styleTree/projectPanel.ts +++ b/styles/src/styleTree/projectPanel.ts @@ -3,125 +3,125 @@ import { withOpacity } from "../theme/color" import { background, border, foreground, text } from "./components" import { interactive, toggleable } from "../element" export default function projectPanel(colorScheme: ColorScheme) { - const { isLight } = colorScheme + const { isLight } = colorScheme - let layer = colorScheme.middle + let layer = colorScheme.middle - let baseEntry = { - height: 22, - iconColor: foreground(layer, "variant"), - iconSize: 7, - iconSpacing: 5, - } - - let status = { - git: { - modified: isLight - ? colorScheme.ramps.yellow(0.6).hex() - : colorScheme.ramps.yellow(0.5).hex(), - inserted: isLight - ? colorScheme.ramps.green(0.45).hex() - : colorScheme.ramps.green(0.5).hex(), - conflict: isLight - ? colorScheme.ramps.red(0.6).hex() - : colorScheme.ramps.red(0.5).hex(), - }, - } - - let entry = toggleable({ - base: - interactive({ - base: { - ...baseEntry, - text: text(layer, "mono", "variant", { size: "sm" }), - status, - }, - state: { - hovered: { - background: background(layer, "variant", "hovered"), - }, - }, - }), - state: { - active: { - default: { - /*background: colorScheme.isLight - ? withOpacity(background(layer, "active"), 0.5) - : background(layer, "active") ,*/ // todo posiewic - text: text(layer, "mono", "active", { size: "sm" }), - }, - hovered: { - //background: background(layer, "active"), - text: text(layer, "mono", "active", { size: "sm" }), - }, - } - } - } - ) - - return { - openProjectButton: interactive({ - base: { - background: background(layer), - border: border(layer, "active"), - cornerRadius: 4, - margin: { - top: 16, - left: 16, - right: 16, - }, - padding: { - top: 3, - bottom: 3, - left: 7, - right: 7, - }, - ...text(layer, "sans", "default", { size: "sm" }), - }, - state: { - hovered: { - ...text(layer, "sans", "default", { size: "sm" }), - background: background(layer, "hovered"), - border: border(layer, "active"), - }, - }, - }), - background: background(layer), - padding: { left: 6, right: 6, top: 0, bottom: 6 }, - indentWidth: 12, - entry, - draggedEntry: { - ...baseEntry, - text: text(layer, "mono", "on", { size: "sm" }), - background: withOpacity(background(layer, "on"), 0.9), - border: border(layer), - status, - }, - ignoredEntry: { - ...entry, - iconColor: foreground(layer, "disabled"), - text: text(layer, "mono", "disabled"), - active: { - ...entry.active, + let baseEntry = { + height: 22, iconColor: foreground(layer, "variant"), - }, - }, - cutEntry: { - ...entry, - text: text(layer, "mono", "disabled"), - active: { - ...entry.active, - default: { - ...entry.active.default, - background: background(layer, "active"), - text: text(layer, "mono", "disabled", { size: "sm" }), + iconSize: 7, + iconSpacing: 5, + } + + let status = { + git: { + modified: isLight + ? colorScheme.ramps.yellow(0.6).hex() + : colorScheme.ramps.yellow(0.5).hex(), + inserted: isLight + ? colorScheme.ramps.green(0.45).hex() + : colorScheme.ramps.green(0.5).hex(), + conflict: isLight + ? colorScheme.ramps.red(0.6).hex() + : colorScheme.ramps.red(0.5).hex(), }, - }, - }, - filenameEditor: { - background: background(layer, "on"), - text: text(layer, "mono", "on", { size: "sm" }), - selection: colorScheme.players[0], - }, - } + } + + let entry = toggleable({ + base: + interactive({ + base: { + ...baseEntry, + text: text(layer, "mono", "variant", { size: "sm" }), + status, + }, + state: { + hovered: { + background: background(layer, "variant", "hovered"), + }, + }, + }), + state: { + active: { + default: { + /*background: colorScheme.isLight + ? withOpacity(background(layer, "active"), 0.5) + : background(layer, "active") ,*/ // todo posiewic + text: text(layer, "mono", "active", { size: "sm" }), + }, + hovered: { + //background: background(layer, "active"), + text: text(layer, "mono", "active", { size: "sm" }), + }, + } + } + } + ) + + return { + openProjectButton: interactive({ + base: { + background: background(layer), + border: border(layer, "active"), + cornerRadius: 4, + margin: { + top: 16, + left: 16, + right: 16, + }, + padding: { + top: 3, + bottom: 3, + left: 7, + right: 7, + }, + ...text(layer, "sans", "default", { size: "sm" }), + }, + state: { + hovered: { + ...text(layer, "sans", "default", { size: "sm" }), + background: background(layer, "hovered"), + border: border(layer, "active"), + }, + }, + }), + background: background(layer), + padding: { left: 6, right: 6, top: 0, bottom: 6 }, + indentWidth: 12, + entry, + draggedEntry: { + ...baseEntry, + text: text(layer, "mono", "on", { size: "sm" }), + background: withOpacity(background(layer, "on"), 0.9), + border: border(layer), + status, + }, + ignoredEntry: { + ...entry, + iconColor: foreground(layer, "disabled"), + text: text(layer, "mono", "disabled"), + active: { + ...entry.active, + iconColor: foreground(layer, "variant"), + }, + }, + cutEntry: { + ...entry, + text: text(layer, "mono", "disabled"), + active: { + ...entry.active, + default: { + ...entry.active.default, + background: background(layer, "active"), + text: text(layer, "mono", "disabled", { size: "sm" }), + }, + }, + }, + filenameEditor: { + background: background(layer, "on"), + text: text(layer, "mono", "on", { size: "sm" }), + selection: colorScheme.players[0], + }, + } } diff --git a/styles/src/styleTree/search.ts b/styles/src/styleTree/search.ts index aa015d5cde..0123ddee22 100644 --- a/styles/src/styleTree/search.ts +++ b/styles/src/styleTree/search.ts @@ -4,127 +4,127 @@ import { background, border, foreground, text } from "./components" import { interactive, toggleable } from "../element" export default function search(colorScheme: ColorScheme) { - let layer = colorScheme.highest + let layer = colorScheme.highest - // Search input - const editor = { - background: background(layer), - cornerRadius: 8, - minWidth: 200, - maxWidth: 500, - placeholderText: text(layer, "mono", "disabled"), - selection: colorScheme.players[0], - text: text(layer, "mono", "default"), - border: border(layer), - margin: { - right: 12, - }, - padding: { - top: 3, - bottom: 3, - left: 12, - right: 8, - }, - } - - const includeExcludeEditor = { - ...editor, - minWidth: 100, - maxWidth: 250, - } - - return { - // TODO: Add an activeMatchBackground on the rust side to differentiate between active and inactive - matchBackground: withOpacity(foreground(layer, "accent"), 0.4), - optionButton: toggleable({ - base: - interactive({ - base: { - ...text(layer, "mono", "on"), - background: background(layer, "on"), - cornerRadius: 6, - border: border(layer, "on"), - margin: { - right: 4, - }, - padding: { - bottom: 2, - left: 10, - right: 10, - top: 2, - }, - }, - state: { - clicked: { - ...text(layer, "mono", "on", "pressed"), - background: background(layer, "on", "pressed"), - border: border(layer, "on", "pressed"), - }, - hovered: { - ...text(layer, "mono", "on", "hovered"), - background: background(layer, "on", "hovered"), - border: border(layer, "on", "hovered"), - }, - }, - }), - state: { - active: { - default: { - ...text(layer, "mono", "on", "inverted"), - background: background(layer, "on", "inverted"), - border: border(layer, "on", "inverted"), - }, - } - } - } - ), - editor, - invalidEditor: { - ...editor, - border: border(layer, "negative"), - }, - includeExcludeEditor, - invalidIncludeExcludeEditor: { - ...includeExcludeEditor, - border: border(layer, "negative"), - }, - matchIndex: { - ...text(layer, "mono", "variant"), - padding: { - left: 6, - }, - }, - optionButtonGroup: { - padding: { - left: 12, - right: 12, - }, - }, - includeExcludeInputs: { - ...text(layer, "mono", "variant"), - padding: { - right: 6, - }, - }, - resultsStatus: { - ...text(layer, "mono", "on"), - size: 18, - }, - dismissButton: interactive({ - base: { - color: foreground(layer, "variant"), - iconWidth: 12, - buttonWidth: 14, + // Search input + const editor = { + background: background(layer), + cornerRadius: 8, + minWidth: 200, + maxWidth: 500, + placeholderText: text(layer, "mono", "disabled"), + selection: colorScheme.players[0], + text: text(layer, "mono", "default"), + border: border(layer), + margin: { + right: 12, + }, padding: { - left: 10, - right: 10, + top: 3, + bottom: 3, + left: 12, + right: 8, }, - }, - state: { - hovered: { - color: foreground(layer, "hovered"), + } + + const includeExcludeEditor = { + ...editor, + minWidth: 100, + maxWidth: 250, + } + + return { + // TODO: Add an activeMatchBackground on the rust side to differentiate between active and inactive + matchBackground: withOpacity(foreground(layer, "accent"), 0.4), + optionButton: toggleable({ + base: + interactive({ + base: { + ...text(layer, "mono", "on"), + background: background(layer, "on"), + cornerRadius: 6, + border: border(layer, "on"), + margin: { + right: 4, + }, + padding: { + bottom: 2, + left: 10, + right: 10, + top: 2, + }, + }, + state: { + clicked: { + ...text(layer, "mono", "on", "pressed"), + background: background(layer, "on", "pressed"), + border: border(layer, "on", "pressed"), + }, + hovered: { + ...text(layer, "mono", "on", "hovered"), + background: background(layer, "on", "hovered"), + border: border(layer, "on", "hovered"), + }, + }, + }), + state: { + active: { + default: { + ...text(layer, "mono", "on", "inverted"), + background: background(layer, "on", "inverted"), + border: border(layer, "on", "inverted"), + }, + } + } + } + ), + editor, + invalidEditor: { + ...editor, + border: border(layer, "negative"), }, - }, - }), - } + includeExcludeEditor, + invalidIncludeExcludeEditor: { + ...includeExcludeEditor, + border: border(layer, "negative"), + }, + matchIndex: { + ...text(layer, "mono", "variant"), + padding: { + left: 6, + }, + }, + optionButtonGroup: { + padding: { + left: 12, + right: 12, + }, + }, + includeExcludeInputs: { + ...text(layer, "mono", "variant"), + padding: { + right: 6, + }, + }, + resultsStatus: { + ...text(layer, "mono", "on"), + size: 18, + }, + dismissButton: interactive({ + base: { + color: foreground(layer, "variant"), + iconWidth: 12, + buttonWidth: 14, + padding: { + left: 10, + right: 10, + }, + }, + state: { + hovered: { + color: foreground(layer, "hovered"), + }, + }, + }), + } } diff --git a/styles/src/styleTree/statusBar.ts b/styles/src/styleTree/statusBar.ts index 4c566a5c3a..e4a48e8215 100644 --- a/styles/src/styleTree/statusBar.ts +++ b/styles/src/styleTree/statusBar.ts @@ -2,147 +2,147 @@ import { ColorScheme } from "../theme/colorScheme" import { background, border, foreground, text } from "./components" import { interactive, toggleable } from "../element" export default function statusBar(colorScheme: ColorScheme) { - let layer = colorScheme.lowest + let layer = colorScheme.lowest - const statusContainer = { - cornerRadius: 6, - padding: { top: 3, bottom: 3, left: 6, right: 6 }, - } + const statusContainer = { + cornerRadius: 6, + padding: { top: 3, bottom: 3, left: 6, right: 6 }, + } - const diagnosticStatusContainer = { - cornerRadius: 6, - padding: { top: 1, bottom: 1, left: 6, right: 6 }, - } + const diagnosticStatusContainer = { + cornerRadius: 6, + padding: { top: 1, bottom: 1, left: 6, right: 6 }, + } - return { - height: 30, - itemSpacing: 8, - padding: { - top: 1, - bottom: 1, - left: 6, - right: 6, - }, - border: border(layer, { top: true, overlay: true }), - cursorPosition: text(layer, "sans", "variant"), - activeLanguage: interactive({ - base: { - padding: { left: 6, right: 6 }, - ...text(layer, "sans", "variant"), - }, - state: { - hovered: { - ...text(layer, "sans", "on"), + return { + height: 30, + itemSpacing: 8, + padding: { + top: 1, + bottom: 1, + left: 6, + right: 6, }, - }, - }), - autoUpdateProgressMessage: text(layer, "sans", "variant"), - autoUpdateDoneMessage: text(layer, "sans", "variant"), - lspStatus: interactive({ - base: { - ...diagnosticStatusContainer, - iconSpacing: 4, - iconWidth: 14, - height: 18, - message: text(layer, "sans"), - iconColor: foreground(layer), - }, - state: { - hovered: { - message: text(layer, "sans"), - iconColor: foreground(layer), - background: background(layer, "hovered"), - }, - }, - }), - diagnosticMessage: interactive({ - base: { - ...text(layer, "sans"), - }, - state: { hovered: text(layer, "sans", "hovered") }, - }), - diagnosticSummary: interactive({ - base: { - height: 20, - iconWidth: 16, - iconSpacing: 2, - summarySpacing: 6, - text: text(layer, "sans", { size: "sm" }), - iconColorOk: foreground(layer, "variant"), - iconColorWarning: foreground(layer, "warning"), - iconColorError: foreground(layer, "negative"), - containerOk: { - cornerRadius: 6, - padding: { top: 3, bottom: 3, left: 7, right: 7 }, - }, - containerWarning: { - ...diagnosticStatusContainer, - background: background(layer, "warning"), - border: border(layer, "warning"), - }, - containerError: { - ...diagnosticStatusContainer, - background: background(layer, "negative"), - border: border(layer, "negative"), - }, - }, - state: { - hovered: { - iconColorOk: foreground(layer, "on"), - containerOk: { - background: background(layer, "on", "hovered"), - }, - containerWarning: { - background: background(layer, "warning", "hovered"), - border: border(layer, "warning", "hovered"), - }, - containerError: { - background: background(layer, "negative", "hovered"), - border: border(layer, "negative", "hovered"), - }, - }, - }, - }), - panelButtons: { - groupLeft: {}, - groupBottom: {}, - groupRight: {}, - button: toggleable({ - base: - interactive({ + border: border(layer, { top: true, overlay: true }), + cursorPosition: text(layer, "sans", "variant"), + activeLanguage: interactive({ base: { - ...statusContainer, - iconSize: 16, - iconColor: foreground(layer, "variant"), - label: { - margin: { left: 6 }, - ...text(layer, "sans", { size: "sm" }), - }, + padding: { left: 6, right: 6 }, + ...text(layer, "sans", "variant"), }, state: { - hovered: { - iconColor: foreground(layer, "hovered"), - background: background(layer, "variant"), - }, + hovered: { + ...text(layer, "sans", "on"), + }, }, - }), state: - { - active: { - default: { - iconColor: foreground(layer, "active"), - background: background(layer, "active"), + }), + autoUpdateProgressMessage: text(layer, "sans", "variant"), + autoUpdateDoneMessage: text(layer, "sans", "variant"), + lspStatus: interactive({ + base: { + ...diagnosticStatusContainer, + iconSpacing: 4, + iconWidth: 14, + height: 18, + message: text(layer, "sans"), + iconColor: foreground(layer), }, - } - } - } - ), - badge: { - cornerRadius: 3, - padding: 2, - margin: { bottom: -1, right: -1 }, - border: border(layer), - background: background(layer, "accent"), - }, - }, - } + state: { + hovered: { + message: text(layer, "sans"), + iconColor: foreground(layer), + background: background(layer, "hovered"), + }, + }, + }), + diagnosticMessage: interactive({ + base: { + ...text(layer, "sans"), + }, + state: { hovered: text(layer, "sans", "hovered") }, + }), + diagnosticSummary: interactive({ + base: { + height: 20, + iconWidth: 16, + iconSpacing: 2, + summarySpacing: 6, + text: text(layer, "sans", { size: "sm" }), + iconColorOk: foreground(layer, "variant"), + iconColorWarning: foreground(layer, "warning"), + iconColorError: foreground(layer, "negative"), + containerOk: { + cornerRadius: 6, + padding: { top: 3, bottom: 3, left: 7, right: 7 }, + }, + containerWarning: { + ...diagnosticStatusContainer, + background: background(layer, "warning"), + border: border(layer, "warning"), + }, + containerError: { + ...diagnosticStatusContainer, + background: background(layer, "negative"), + border: border(layer, "negative"), + }, + }, + state: { + hovered: { + iconColorOk: foreground(layer, "on"), + containerOk: { + background: background(layer, "on", "hovered"), + }, + containerWarning: { + background: background(layer, "warning", "hovered"), + border: border(layer, "warning", "hovered"), + }, + containerError: { + background: background(layer, "negative", "hovered"), + border: border(layer, "negative", "hovered"), + }, + }, + }, + }), + panelButtons: { + groupLeft: {}, + groupBottom: {}, + groupRight: {}, + button: toggleable({ + base: + interactive({ + base: { + ...statusContainer, + iconSize: 16, + iconColor: foreground(layer, "variant"), + label: { + margin: { left: 6 }, + ...text(layer, "sans", { size: "sm" }), + }, + }, + state: { + hovered: { + iconColor: foreground(layer, "hovered"), + background: background(layer, "variant"), + }, + }, + }), state: + { + active: { + default: { + iconColor: foreground(layer, "active"), + background: background(layer, "active"), + }, + } + } + } + ), + badge: { + cornerRadius: 3, + padding: 2, + margin: { bottom: -1, right: -1 }, + border: border(layer), + background: background(layer, "accent"), + }, + }, + } } diff --git a/styles/src/styleTree/tabBar.ts b/styles/src/styleTree/tabBar.ts index d7b3b58055..f2c99ea736 100644 --- a/styles/src/styleTree/tabBar.ts +++ b/styles/src/styleTree/tabBar.ts @@ -4,120 +4,120 @@ import { text, border, background, foreground } from "./components" import { interactive, toggleable } from "../element" export default function tabBar(colorScheme: ColorScheme) { - const height = 32 + const height = 32 - let activeLayer = colorScheme.highest - let layer = colorScheme.middle + let activeLayer = colorScheme.highest + let layer = colorScheme.middle - const tab = { - height, - text: text(layer, "sans", "variant", { size: "sm" }), - background: background(layer), - border: border(layer, { - right: true, - bottom: true, - overlay: true, - }), - padding: { - left: 8, - right: 12, - }, - spacing: 8, - - // Tab type icons (e.g. Project Search) - typeIconWidth: 14, - - // Close icons - closeIconWidth: 8, - iconClose: foreground(layer, "variant"), - iconCloseActive: foreground(layer, "hovered"), - - // Indicators - iconConflict: foreground(layer, "warning"), - iconDirty: foreground(layer, "accent"), - - // When two tabs of the same name are open, a label appears next to them - description: { - margin: { left: 8 }, - ...text(layer, "sans", "disabled", { size: "2xs" }), - }, - } - - const activePaneActiveTab = { - ...tab, - background: background(activeLayer), - text: text(activeLayer, "sans", "active", { size: "sm" }), - border: { - ...tab.border, - bottom: false, - }, - } - - const inactivePaneInactiveTab = { - ...tab, - background: background(layer), - text: text(layer, "sans", "variant", { size: "sm" }), - } - - const inactivePaneActiveTab = { - ...tab, - background: background(activeLayer), - text: text(layer, "sans", "variant", { size: "sm" }), - border: { - ...tab.border, - bottom: false, - }, - } - - const draggedTab = { - ...activePaneActiveTab, - background: withOpacity(tab.background, 0.9), - border: undefined as any, - shadow: colorScheme.popoverShadow, - } - - return { - height, - background: background(layer), - activePane: { - activeTab: activePaneActiveTab, - inactiveTab: tab, - }, - inactivePane: { - activeTab: inactivePaneActiveTab, - inactiveTab: inactivePaneInactiveTab, - }, - draggedTab, - paneButton: toggleable({ - base: - interactive({ - base: { - color: foreground(layer, "variant"), - iconWidth: 12, - buttonWidth: activePaneActiveTab.height, - }, - state: { - hovered: { - color: foreground(layer, "hovered"), - }, - }, + const tab = { + height, + text: text(layer, "sans", "variant", { size: "sm" }), + background: background(layer), + border: border(layer, { + right: true, + bottom: true, + overlay: true, }), - state: - { - active: { - default: { - color: foreground(layer, "accent"), - }, - } - } + padding: { + left: 8, + right: 12, + }, + spacing: 8, + + // Tab type icons (e.g. Project Search) + typeIconWidth: 14, + + // Close icons + closeIconWidth: 8, + iconClose: foreground(layer, "variant"), + iconCloseActive: foreground(layer, "hovered"), + + // Indicators + iconConflict: foreground(layer, "warning"), + iconDirty: foreground(layer, "accent"), + + // When two tabs of the same name are open, a label appears next to them + description: { + margin: { left: 8 }, + ...text(layer, "sans", "disabled", { size: "2xs" }), + }, + } + + const activePaneActiveTab = { + ...tab, + background: background(activeLayer), + text: text(activeLayer, "sans", "active", { size: "sm" }), + border: { + ...tab.border, + bottom: false, + }, + } + + const inactivePaneInactiveTab = { + ...tab, + background: background(layer), + text: text(layer, "sans", "variant", { size: "sm" }), + } + + const inactivePaneActiveTab = { + ...tab, + background: background(activeLayer), + text: text(layer, "sans", "variant", { size: "sm" }), + border: { + ...tab.border, + bottom: false, + }, + } + + const draggedTab = { + ...activePaneActiveTab, + background: withOpacity(tab.background, 0.9), + border: undefined as any, + shadow: colorScheme.popoverShadow, + } + + return { + height, + background: background(layer), + activePane: { + activeTab: activePaneActiveTab, + inactiveTab: tab, + }, + inactivePane: { + activeTab: inactivePaneActiveTab, + inactiveTab: inactivePaneInactiveTab, + }, + draggedTab, + paneButton: toggleable({ + base: + interactive({ + base: { + color: foreground(layer, "variant"), + iconWidth: 12, + buttonWidth: activePaneActiveTab.height, + }, + state: { + hovered: { + color: foreground(layer, "hovered"), + }, + }, + }), + state: + { + active: { + default: { + color: foreground(layer, "accent"), + }, + } + } + } + ), + paneButtonContainer: { + background: tab.background, + border: { + ...tab.border, + right: false, + }, + }, } - ), - paneButtonContainer: { - background: tab.background, - border: { - ...tab.border, - right: false, - }, - }, - } } diff --git a/styles/src/styleTree/toolbarDropdownMenu.ts b/styles/src/styleTree/toolbarDropdownMenu.ts index 3a870b008f..b1b28d789e 100644 --- a/styles/src/styleTree/toolbarDropdownMenu.ts +++ b/styles/src/styleTree/toolbarDropdownMenu.ts @@ -2,64 +2,64 @@ import { ColorScheme } from "../theme/colorScheme" import { background, border, text } from "./components" import { interactive, toggleable } from "../element" export default function dropdownMenu(colorScheme: ColorScheme) { - let layer = colorScheme.middle + let layer = colorScheme.middle - return { - rowHeight: 30, - background: background(layer), - border: border(layer), - shadow: colorScheme.popoverShadow, - header: interactive({ - base: { - ...text(layer, "sans", { size: "sm" }), - secondaryText: text(layer, "sans", { - size: "sm", - color: "#aaaaaa", - }), - secondaryTextSpacing: 10, - padding: { left: 8, right: 8, top: 2, bottom: 2 }, - cornerRadius: 6, - background: background(layer, "on"), - border: border(layer, "on", { overlay: true }), - }, - state: { - hovered: { - background: background(layer, "hovered"), - ...text(layer, "sans", "hovered", { size: "sm" }), - }, - }, - }), - sectionHeader: { - ...text(layer, "sans", { size: "sm" }), - padding: { left: 8, right: 8, top: 8, bottom: 8 }, - }, - item: toggleable({ - base: - interactive({ - base: { - ...text(layer, "sans", { size: "sm" }), - secondaryTextSpacing: 10, - secondaryText: text(layer, "sans", { size: "sm" }), - padding: { left: 18, right: 18, top: 2, bottom: 2 }, - }, - state: { - hovered: { - background: background(layer, "hovered"), - ...text(layer, "sans", "hovered", { size: "sm" }), + return { + rowHeight: 30, + background: background(layer), + border: border(layer), + shadow: colorScheme.popoverShadow, + header: interactive({ + base: { + ...text(layer, "sans", { size: "sm" }), + secondaryText: text(layer, "sans", { + size: "sm", + color: "#aaaaaa", + }), + secondaryTextSpacing: 10, + padding: { left: 8, right: 8, top: 2, bottom: 2 }, + cornerRadius: 6, + background: background(layer, "on"), + border: border(layer, "on", { overlay: true }), + }, + state: { + hovered: { + background: background(layer, "hovered"), + ...text(layer, "sans", "hovered", { size: "sm" }), + }, }, - }, }), - state: { - active: { - default: { - background: background(layer, "active"), - }, - hovered: { - background: background(layer, "active"), - }, + sectionHeader: { + ...text(layer, "sans", { size: "sm" }), + padding: { left: 8, right: 8, top: 8, bottom: 8 }, + }, + item: toggleable({ + base: + interactive({ + base: { + ...text(layer, "sans", { size: "sm" }), + secondaryTextSpacing: 10, + secondaryText: text(layer, "sans", { size: "sm" }), + padding: { left: 18, right: 18, top: 2, bottom: 2 }, + }, + state: { + hovered: { + background: background(layer, "hovered"), + ...text(layer, "sans", "hovered", { size: "sm" }), + }, + }, + }), + state: { + active: { + default: { + background: background(layer, "active"), + }, + hovered: { + background: background(layer, "active"), + }, + } + } } - } + ), } - ), - } } diff --git a/styles/src/styleTree/workspace.ts b/styles/src/styleTree/workspace.ts index 96f4b8bdbd..fdc7657481 100644 --- a/styles/src/styleTree/workspace.ts +++ b/styles/src/styleTree/workspace.ts @@ -2,406 +2,406 @@ import { ColorScheme } from "../theme/colorScheme" import { withOpacity } from "../theme/color" import { toggleable } from "../element" import { - background, - border, - borderColor, - foreground, - svg, - text, + background, + border, + borderColor, + foreground, + svg, + text, } from "./components" import statusBar from "./statusBar" import tabBar from "./tabBar" import { interactive } from "../element" import merge from "ts-deepmerge" export default function workspace(colorScheme: ColorScheme) { - const layer = colorScheme.lowest - const isLight = colorScheme.isLight - const itemSpacing = 8 - const titlebarButton = toggleable({ - base: - interactive({ - base: { - cornerRadius: 6, - padding: { - top: 1, - bottom: 1, - left: 8, - right: 8, - }, - ...text(layer, "sans", "variant", { size: "xs" }), - background: background(layer, "variant"), - border: border(layer), - }, - state: { - hovered: { - ...text(layer, "sans", "variant", "hovered", { - size: "xs", - }), - background: background(layer, "variant", "hovered"), - border: border(layer, "variant", "hovered"), - }, - clicked: { - ...text(layer, "sans", "variant", "pressed", { - size: "xs", - }), - background: background(layer, "variant", "pressed"), - border: border(layer, "variant", "pressed"), - }, - }, - }), - state: { - active: { - default: { - ...text(layer, "sans", "variant", "active", { size: "xs" }), - background: background(layer, "variant", "active"), - border: border(layer, "variant", "active"), - }, - } - } - } - ) - const avatarWidth = 18 - const avatarOuterWidth = avatarWidth + 4 - const followerAvatarWidth = 14 - const followerAvatarOuterWidth = followerAvatarWidth + 4 - - return { - background: background(colorScheme.lowest), - blankPane: { - logoContainer: { - width: 256, - height: 256, - }, - logo: svg( - withOpacity("#000000", colorScheme.isLight ? 0.6 : 0.8), - "icons/logo_96.svg", - 256, - 256 - ), - - logoShadow: svg( - withOpacity( - colorScheme.isLight - ? "#FFFFFF" - : colorScheme.lowest.base.default.background, - colorScheme.isLight ? 1 : 0.6 - ), - "icons/logo_96.svg", - 256, - 256 - ), - keyboardHints: { - margin: { - top: 96, - }, - cornerRadius: 4, - }, - keyboardHint: interactive({ - base: { - ...text(layer, "sans", "variant", { size: "sm" }), - padding: { - top: 3, - left: 8, - right: 8, - bottom: 3, - }, - cornerRadius: 8, - }, - state: { - hovered: { - ...text(layer, "sans", "active", { size: "sm" }), - }, - }, - }), - - keyboardHintWidth: 320, - }, - joiningProjectAvatar: { - cornerRadius: 40, - width: 80, - }, - joiningProjectMessage: { - padding: 12, - ...text(layer, "sans", { size: "lg" }), - }, - externalLocationMessage: { - background: background(colorScheme.middle, "accent"), - border: border(colorScheme.middle, "accent"), - cornerRadius: 6, - padding: 12, - margin: { bottom: 8, right: 8 }, - ...text(colorScheme.middle, "sans", "accent", { size: "xs" }), - }, - leaderBorderOpacity: 0.7, - leaderBorderWidth: 2.0, - tabBar: tabBar(colorScheme), - modal: { - margin: { - bottom: 52, - top: 52, - }, - cursor: "Arrow", - }, - zoomedBackground: { - cursor: "Arrow", - background: isLight - ? withOpacity(background(colorScheme.lowest), 0.8) - : withOpacity(background(colorScheme.highest), 0.6), - }, - zoomedPaneForeground: { - margin: 16, - shadow: colorScheme.modalShadow, - border: border(colorScheme.lowest, { overlay: true }), - }, - zoomedPanelForeground: { - margin: 16, - border: border(colorScheme.lowest, { overlay: true }), - }, - dock: { - left: { - border: border(layer, { right: true }), - }, - bottom: { - border: border(layer, { top: true }), - }, - right: { - border: border(layer, { left: true }), - }, - }, - paneDivider: { - color: borderColor(layer), - width: 1, - }, - statusBar: statusBar(colorScheme), - titlebar: { - itemSpacing, - facePileSpacing: 2, - height: 33, // 32px + 1px border. It's important the content area of the titlebar is evenly sized to vertically center avatar images. - background: background(layer), - border: border(layer, { bottom: true }), - padding: { - left: 80, - right: itemSpacing, - }, - - // Project - title: text(layer, "sans", "variant"), - highlight_color: text(layer, "sans", "active").color, - - // Collaborators - leaderAvatar: { - width: avatarWidth, - outerWidth: avatarOuterWidth, - cornerRadius: avatarWidth / 2, - outerCornerRadius: avatarOuterWidth / 2, - }, - followerAvatar: { - width: followerAvatarWidth, - outerWidth: followerAvatarOuterWidth, - cornerRadius: followerAvatarWidth / 2, - outerCornerRadius: followerAvatarOuterWidth / 2, - }, - inactiveAvatarGrayscale: true, - followerAvatarOverlap: 8, - leaderSelection: { - margin: { - top: 4, - bottom: 4, - }, - padding: { - left: 2, - right: 2, - top: 2, - bottom: 2, - }, - cornerRadius: 6, - }, - avatarRibbon: { - height: 3, - width: 12, - // TODO: Chore: Make avatarRibbon colors driven by the theme rather than being hard coded. - }, - - // Sign in buttom - // FlatButton, Variant - signInPrompt: merge(titlebarButton, { - inactive: { - default: { - margin: { - left: itemSpacing, - }, - }, - }, - }), - - // Offline Indicator - offlineIcon: { - color: foreground(layer, "variant"), - width: 16, - margin: { - left: itemSpacing, - }, - padding: { - right: 4, - }, - }, - - // Notice that the collaboration server is out of date - outdatedWarning: { - ...text(layer, "sans", "warning", { size: "xs" }), - background: withOpacity(background(layer, "warning"), 0.3), - border: border(layer, "warning"), - margin: { - left: itemSpacing, - }, - padding: { - left: 8, - right: 8, - }, - cornerRadius: 6, - }, - callControl: interactive({ - base: { - cornerRadius: 6, - color: foreground(layer, "variant"), - iconWidth: 12, - buttonWidth: 20, - }, - state: { - hovered: { - background: background(layer, "variant", "hovered"), - color: foreground(layer, "variant", "hovered"), - }, - }, - }), - toggleContactsButton: toggleable({ + const layer = colorScheme.lowest + const isLight = colorScheme.isLight + const itemSpacing = 8 + const titlebarButton = toggleable({ base: - interactive({ + interactive({ + base: { + cornerRadius: 6, + padding: { + top: 1, + bottom: 1, + left: 8, + right: 8, + }, + ...text(layer, "sans", "variant", { size: "xs" }), + background: background(layer, "variant"), + border: border(layer), + }, + state: { + hovered: { + ...text(layer, "sans", "variant", "hovered", { + size: "xs", + }), + background: background(layer, "variant", "hovered"), + border: border(layer, "variant", "hovered"), + }, + clicked: { + ...text(layer, "sans", "variant", "pressed", { + size: "xs", + }), + background: background(layer, "variant", "pressed"), + border: border(layer, "variant", "pressed"), + }, + }, + }), + state: { + active: { + default: { + ...text(layer, "sans", "variant", "active", { size: "xs" }), + background: background(layer, "variant", "active"), + border: border(layer, "variant", "active"), + }, + } + } + } + ) + const avatarWidth = 18 + const avatarOuterWidth = avatarWidth + 4 + const followerAvatarWidth = 14 + const followerAvatarOuterWidth = followerAvatarWidth + 4 + + return { + background: background(colorScheme.lowest), + blankPane: { + logoContainer: { + width: 256, + height: 256, + }, + logo: svg( + withOpacity("#000000", colorScheme.isLight ? 0.6 : 0.8), + "icons/logo_96.svg", + 256, + 256 + ), + + logoShadow: svg( + withOpacity( + colorScheme.isLight + ? "#FFFFFF" + : colorScheme.lowest.base.default.background, + colorScheme.isLight ? 1 : 0.6 + ), + "icons/logo_96.svg", + 256, + 256 + ), + keyboardHints: { + margin: { + top: 96, + }, + cornerRadius: 4, + }, + keyboardHint: interactive({ + base: { + ...text(layer, "sans", "variant", { size: "sm" }), + padding: { + top: 3, + left: 8, + right: 8, + bottom: 3, + }, + cornerRadius: 8, + }, + state: { + hovered: { + ...text(layer, "sans", "active", { size: "sm" }), + }, + }, + }), + + keyboardHintWidth: 320, + }, + joiningProjectAvatar: { + cornerRadius: 40, + width: 80, + }, + joiningProjectMessage: { + padding: 12, + ...text(layer, "sans", { size: "lg" }), + }, + externalLocationMessage: { + background: background(colorScheme.middle, "accent"), + border: border(colorScheme.middle, "accent"), + cornerRadius: 6, + padding: 12, + margin: { bottom: 8, right: 8 }, + ...text(colorScheme.middle, "sans", "accent", { size: "xs" }), + }, + leaderBorderOpacity: 0.7, + leaderBorderWidth: 2.0, + tabBar: tabBar(colorScheme), + modal: { + margin: { + bottom: 52, + top: 52, + }, + cursor: "Arrow", + }, + zoomedBackground: { + cursor: "Arrow", + background: isLight + ? withOpacity(background(colorScheme.lowest), 0.8) + : withOpacity(background(colorScheme.highest), 0.6), + }, + zoomedPaneForeground: { + margin: 16, + shadow: colorScheme.modalShadow, + border: border(colorScheme.lowest, { overlay: true }), + }, + zoomedPanelForeground: { + margin: 16, + border: border(colorScheme.lowest, { overlay: true }), + }, + dock: { + left: { + border: border(layer, { right: true }), + }, + bottom: { + border: border(layer, { top: true }), + }, + right: { + border: border(layer, { left: true }), + }, + }, + paneDivider: { + color: borderColor(layer), + width: 1, + }, + statusBar: statusBar(colorScheme), + titlebar: { + itemSpacing, + facePileSpacing: 2, + height: 33, // 32px + 1px border. It's important the content area of the titlebar is evenly sized to vertically center avatar images. + background: background(layer), + border: border(layer, { bottom: true }), + padding: { + left: 80, + right: itemSpacing, + }, + + // Project + title: text(layer, "sans", "variant"), + highlight_color: text(layer, "sans", "active").color, + + // Collaborators + leaderAvatar: { + width: avatarWidth, + outerWidth: avatarOuterWidth, + cornerRadius: avatarWidth / 2, + outerCornerRadius: avatarOuterWidth / 2, + }, + followerAvatar: { + width: followerAvatarWidth, + outerWidth: followerAvatarOuterWidth, + cornerRadius: followerAvatarWidth / 2, + outerCornerRadius: followerAvatarOuterWidth / 2, + }, + inactiveAvatarGrayscale: true, + followerAvatarOverlap: 8, + leaderSelection: { + margin: { + top: 4, + bottom: 4, + }, + padding: { + left: 2, + right: 2, + top: 2, + bottom: 2, + }, + cornerRadius: 6, + }, + avatarRibbon: { + height: 3, + width: 12, + // TODO: Chore: Make avatarRibbon colors driven by the theme rather than being hard coded. + }, + + // Sign in buttom + // FlatButton, Variant + signInPrompt: merge(titlebarButton, { + inactive: { + default: { + margin: { + left: itemSpacing, + }, + }, + }, + }), + + // Offline Indicator + offlineIcon: { + color: foreground(layer, "variant"), + width: 16, + margin: { + left: itemSpacing, + }, + padding: { + right: 4, + }, + }, + + // Notice that the collaboration server is out of date + outdatedWarning: { + ...text(layer, "sans", "warning", { size: "xs" }), + background: withOpacity(background(layer, "warning"), 0.3), + border: border(layer, "warning"), + margin: { + left: itemSpacing, + }, + padding: { + left: 8, + right: 8, + }, + cornerRadius: 6, + }, + callControl: interactive({ + base: { + cornerRadius: 6, + color: foreground(layer, "variant"), + iconWidth: 12, + buttonWidth: 20, + }, + state: { + hovered: { + background: background(layer, "variant", "hovered"), + color: foreground(layer, "variant", "hovered"), + }, + }, + }), + toggleContactsButton: toggleable({ + base: + interactive({ + base: { + margin: { left: itemSpacing }, + cornerRadius: 6, + color: foreground(layer, "variant"), + iconWidth: 14, + buttonWidth: 20, + }, + state: { + clicked: { + background: background(layer, "variant", "pressed"), + color: foreground(layer, "variant", "pressed"), + }, + hovered: { + background: background(layer, "variant", "hovered"), + color: foreground(layer, "variant", "hovered"), + }, + }, + }), state: + { + active: { + default: { + background: background(layer, "variant", "active"), + color: foreground(layer, "variant", "active"), + }, + } + } + } + ), + userMenuButton: merge(titlebarButton, { + inactive: { + default: { + buttonWidth: 20, + iconWidth: 12, + }, + }, + active: { + // posiewic: these properties are not currently set on main + default: { + iconWidth: 12, + button_width: 20, + }, + }, + }), + + toggleContactsBadge: { + cornerRadius: 3, + padding: 2, + margin: { top: 3, left: 3 }, + border: border(layer), + background: foreground(layer, "accent"), + }, + shareButton: { + ...titlebarButton, + }, + }, + + toolbar: { + height: 34, + background: background(colorScheme.highest), + border: border(colorScheme.highest, { bottom: true }), + itemSpacing: 8, + navButton: interactive({ + base: { + color: foreground(colorScheme.highest, "on"), + iconWidth: 12, + buttonWidth: 24, + cornerRadius: 6, + }, + state: { + hovered: { + color: foreground(colorScheme.highest, "on", "hovered"), + background: background( + colorScheme.highest, + "on", + "hovered" + ), + }, + disabled: { + color: foreground( + colorScheme.highest, + "on", + "disabled" + ), + }, + }, + }), + padding: { left: 8, right: 8, top: 4, bottom: 4 }, + }, + breadcrumbHeight: 24, + breadcrumbs: interactive({ base: { - margin: { left: itemSpacing }, - cornerRadius: 6, - color: foreground(layer, "variant"), - iconWidth: 14, - buttonWidth: 20, + ...text(colorScheme.highest, "sans", "variant"), + cornerRadius: 6, + padding: { + left: 6, + right: 6, + }, }, state: { - clicked: { - background: background(layer, "variant", "pressed"), - color: foreground(layer, "variant", "pressed"), - }, - hovered: { - background: background(layer, "variant", "hovered"), - color: foreground(layer, "variant", "hovered"), - }, + hovered: { + color: foreground(colorScheme.highest, "on", "hovered"), + background: background( + colorScheme.highest, + "on", + "hovered" + ), + }, }, - }), state: - { - active: { - default: { - background: background(layer, "variant", "active"), - color: foreground(layer, "variant", "active"), - }, - } - } - } - ), - userMenuButton: merge(titlebarButton, { - inactive: { - default: { - buttonWidth: 20, - iconWidth: 12, - }, + }), + disconnectedOverlay: { + ...text(layer, "sans"), + background: withOpacity(background(layer), 0.8), }, - active: { - // posiewic: these properties are not currently set on main - default: { - iconWidth: 12, - button_width: 20, - }, + notification: { + margin: { top: 10 }, + background: background(colorScheme.middle), + cornerRadius: 6, + padding: 12, + border: border(colorScheme.middle), + shadow: colorScheme.popoverShadow, }, - }), - - toggleContactsBadge: { - cornerRadius: 3, - padding: 2, - margin: { top: 3, left: 3 }, - border: border(layer), - background: foreground(layer, "accent"), - }, - shareButton: { - ...titlebarButton, - }, - }, - - toolbar: { - height: 34, - background: background(colorScheme.highest), - border: border(colorScheme.highest, { bottom: true }), - itemSpacing: 8, - navButton: interactive({ - base: { - color: foreground(colorScheme.highest, "on"), - iconWidth: 12, - buttonWidth: 24, - cornerRadius: 6, + notifications: { + width: 400, + margin: { right: 10, bottom: 10 }, }, - state: { - hovered: { - color: foreground(colorScheme.highest, "on", "hovered"), - background: background( - colorScheme.highest, - "on", - "hovered" - ), - }, - disabled: { - color: foreground( - colorScheme.highest, - "on", - "disabled" - ), - }, - }, - }), - padding: { left: 8, right: 8, top: 4, bottom: 4 }, - }, - breadcrumbHeight: 24, - breadcrumbs: interactive({ - base: { - ...text(colorScheme.highest, "sans", "variant"), - cornerRadius: 6, - padding: { - left: 6, - right: 6, - }, - }, - state: { - hovered: { - color: foreground(colorScheme.highest, "on", "hovered"), - background: background( - colorScheme.highest, - "on", - "hovered" - ), - }, - }, - }), - disconnectedOverlay: { - ...text(layer, "sans"), - background: withOpacity(background(layer), 0.8), - }, - notification: { - margin: { top: 10 }, - background: background(colorScheme.middle), - cornerRadius: 6, - padding: 12, - border: border(colorScheme.middle), - shadow: colorScheme.popoverShadow, - }, - notifications: { - width: 400, - margin: { right: 10, bottom: 10 }, - }, - dropTargetOverlayColor: withOpacity(foreground(layer, "variant"), 0.5), - } + dropTargetOverlayColor: withOpacity(foreground(layer, "variant"), 0.5), + } } From f1dc6124dd7687cadccee4e4eddcde5bf5caaa60 Mon Sep 17 00:00:00 2001 From: Mikayla Maki Date: Tue, 20 Jun 2023 16:09:17 -0700 Subject: [PATCH 45/56] Fix rebase mistake --- crates/editor/src/element.rs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/crates/editor/src/element.rs b/crates/editor/src/element.rs index 835d53bc8c..9cc058133b 100644 --- a/crates/editor/src/element.rs +++ b/crates/editor/src/element.rs @@ -1527,7 +1527,7 @@ impl EditorElement { enum JumpIcon {} MouseEventHandler::::new((*id).into(), cx, |state, _| { - let style = style.jump_icon.style_for(state, false); + let style = style.jump_icon.style_for(state); Svg::new("icons/arrow_up_right_8.svg") .with_color(style.color) .constrained() From 11125a62c711b69c8474515c3e529ca5536902f9 Mon Sep 17 00:00:00 2001 From: Mikayla Maki Date: Tue, 20 Jun 2023 16:48:30 -0700 Subject: [PATCH 46/56] Add copy-on-click to diagnostic messages --- crates/diagnostics/src/diagnostics.rs | 4 +- crates/editor/src/display_map/block_map.rs | 1 + crates/editor/src/editor.rs | 48 +++++++++++++++------- crates/editor/src/element.rs | 10 +++-- crates/workspace/src/workspace.rs | 6 ++- 5 files changed, 49 insertions(+), 20 deletions(-) diff --git a/crates/diagnostics/src/diagnostics.rs b/crates/diagnostics/src/diagnostics.rs index 5350e53d6a..d0cd437946 100644 --- a/crates/diagnostics/src/diagnostics.rs +++ b/crates/diagnostics/src/diagnostics.rs @@ -1509,7 +1509,8 @@ mod tests { let snapshot = editor.snapshot(cx); snapshot .blocks_in_range(0..snapshot.max_point().row()) - .filter_map(|(row, block)| { + .enumerate() + .filter_map(|(ix, (row, block))| { let name = match block { TransformBlock::Custom(block) => block .render(&mut BlockContext { @@ -1520,6 +1521,7 @@ mod tests { gutter_width: 0., line_height: 0., em_width: 0., + block_id: ix, }) .name()? .to_string(), diff --git a/crates/editor/src/display_map/block_map.rs b/crates/editor/src/display_map/block_map.rs index 0cf5bacc65..b20ecaef1c 100644 --- a/crates/editor/src/display_map/block_map.rs +++ b/crates/editor/src/display_map/block_map.rs @@ -88,6 +88,7 @@ pub struct BlockContext<'a, 'b, 'c> { pub gutter_padding: f32, pub em_width: f32, pub line_height: f32, + pub block_id: usize, } #[derive(Clone, Copy, Debug, PartialEq, Eq, PartialOrd, Ord)] diff --git a/crates/editor/src/editor.rs b/crates/editor/src/editor.rs index 2e0d444e04..dd9952e870 100644 --- a/crates/editor/src/editor.rs +++ b/crates/editor/src/editor.rs @@ -7949,6 +7949,7 @@ impl Deref for EditorStyle { pub fn diagnostic_block_renderer(diagnostic: Diagnostic, is_valid: bool) -> RenderBlock { let mut highlighted_lines = Vec::new(); + for (index, line) in diagnostic.message.lines().enumerate() { let line = match &diagnostic.source { Some(source) if index == 0 => { @@ -7960,25 +7961,44 @@ pub fn diagnostic_block_renderer(diagnostic: Diagnostic, is_valid: bool) -> Rend }; highlighted_lines.push(line); } - + let message = diagnostic.message; Arc::new(move |cx: &mut BlockContext| { + let message = message.clone(); let settings = settings::get::(cx); + let tooltip_style = settings.theme.tooltip.clone(); let theme = &settings.theme.editor; let style = diagnostic_style(diagnostic.severity, is_valid, theme); let font_size = (style.text_scale_factor * settings.buffer_font_size(cx)).round(); - Flex::column() - .with_children(highlighted_lines.iter().map(|(line, highlights)| { - Label::new( - line.clone(), - style.message.clone().with_font_size(font_size), - ) - .with_highlights(highlights.clone()) - .contained() - .with_margin_left(cx.anchor_x) - })) - .aligned() - .left() - .into_any() + let anchor_x = cx.anchor_x; + enum BlockContextToolip {} + MouseEventHandler::::new(cx.block_id, cx, |_, _| { + Flex::column() + .with_children(highlighted_lines.iter().map(|(line, highlights)| { + Label::new( + line.clone(), + style.message.clone().with_font_size(font_size), + ) + .with_highlights(highlights.clone()) + .contained() + .with_margin_left(anchor_x) + })) + .aligned() + .left() + .into_any() + }) + .with_cursor_style(CursorStyle::PointingHand) + .on_click(MouseButton::Left, move |_, _, cx| { + cx.write_to_clipboard(ClipboardItem::new(message.clone())); + }) + // We really need to rethink this ID system... + .with_tooltip::( + cx.block_id, + "Copy diagnostic message".to_string(), + None, + tooltip_style, + cx, + ) + .into_any() }) } diff --git a/crates/editor/src/element.rs b/crates/editor/src/element.rs index d6f9a2e906..5be745162a 100644 --- a/crates/editor/src/element.rs +++ b/crates/editor/src/element.rs @@ -1467,6 +1467,7 @@ impl EditorElement { editor: &mut Editor, cx: &mut LayoutContext, ) -> (f32, Vec) { + let mut block_id = 0; let scroll_x = snapshot.scroll_anchor.offset.x(); let (fixed_blocks, non_fixed_blocks) = snapshot .blocks_in_range(rows.clone()) @@ -1474,7 +1475,7 @@ impl EditorElement { TransformBlock::ExcerptHeader { .. } => false, TransformBlock::Custom(block) => block.style() == BlockStyle::Fixed, }); - let mut render_block = |block: &TransformBlock, width: f32| { + let mut render_block = |block: &TransformBlock, width: f32, block_id: usize| { let mut element = match block { TransformBlock::Custom(block) => { let align_to = block @@ -1499,6 +1500,7 @@ impl EditorElement { scroll_x, gutter_width, em_width, + block_id, }) } TransformBlock::ExcerptHeader { @@ -1634,7 +1636,8 @@ impl EditorElement { let mut fixed_block_max_width = 0f32; let mut blocks = Vec::new(); for (row, block) in fixed_blocks { - let element = render_block(block, f32::INFINITY); + let element = render_block(block, f32::INFINITY, block_id); + block_id += 1; fixed_block_max_width = fixed_block_max_width.max(element.size().x() + em_width); blocks.push(BlockLayout { row, @@ -1654,7 +1657,8 @@ impl EditorElement { .max(gutter_width + scroll_width), BlockStyle::Fixed => unreachable!(), }; - let element = render_block(block, width); + let element = render_block(block, width, block_id); + block_id += 1; blocks.push(BlockLayout { row, element, diff --git a/crates/workspace/src/workspace.rs b/crates/workspace/src/workspace.rs index 43ca41ab1d..a4974fc173 100644 --- a/crates/workspace/src/workspace.rs +++ b/crates/workspace/src/workspace.rs @@ -140,9 +140,11 @@ pub struct OpenPaths { #[derive(Clone, Deserialize, PartialEq)] pub struct ActivatePane(pub usize); +#[derive(Deserialize)] pub struct Toast { id: usize, msg: Cow<'static, str>, + #[serde(skip)] on_click: Option<(Cow<'static, str>, Arc)>, } @@ -183,9 +185,9 @@ impl Clone for Toast { } } -pub type WorkspaceId = i64; +impl_actions!(workspace, [ActivatePane, Toast]); -impl_actions!(workspace, [ActivatePane]); +pub type WorkspaceId = i64; pub fn init_settings(cx: &mut AppContext) { settings::register::(cx); From bd97767c7251dc3666fcd9389907fe8b4cf93ae9 Mon Sep 17 00:00:00 2001 From: Kirill Bulatov Date: Wed, 21 Jun 2023 13:20:42 +0300 Subject: [PATCH 47/56] Run LSP response deserialization outside of main thread Improves latency when big inlay hints LSP responses for ~8k line files Co-Authored-By: Antonio Scandurra --- crates/lsp/src/lsp.rs | 27 ++++++++++++++++++--------- 1 file changed, 18 insertions(+), 9 deletions(-) diff --git a/crates/lsp/src/lsp.rs b/crates/lsp/src/lsp.rs index af73a16ec2..5074989277 100644 --- a/crates/lsp/src/lsp.rs +++ b/crates/lsp/src/lsp.rs @@ -33,7 +33,7 @@ const JSON_RPC_VERSION: &str = "2.0"; const CONTENT_LEN_HEADER: &str = "Content-Length: "; type NotificationHandler = Box, &str, AsyncAppContext)>; -type ResponseHandler = Box)>; +type ResponseHandler = Box)>; type IoHandler = Box; pub struct LanguageServer { @@ -302,9 +302,9 @@ impl LanguageServer { if let Some(error) = error { handler(Err(error)); } else if let Some(result) = result { - handler(Ok(result.get())); + handler(Ok(result.get().into())); } else { - handler(Ok("null")); + handler(Ok("null".into())); } } } else { @@ -457,11 +457,13 @@ impl LanguageServer { let response_handlers = self.response_handlers.clone(); let next_id = AtomicUsize::new(self.next_id.load(SeqCst)); let outbound_tx = self.outbound_tx.clone(); + let executor = self.executor.clone(); let mut output_done = self.output_done_rx.lock().take().unwrap(); let shutdown_request = Self::request_internal::( &next_id, &response_handlers, &outbound_tx, + &executor, (), ); let exit = Self::notify_internal::(&outbound_tx, ()); @@ -658,6 +660,7 @@ impl LanguageServer { &self.next_id, &self.response_handlers, &self.outbound_tx, + &self.executor, params, ) } @@ -666,6 +669,7 @@ impl LanguageServer { next_id: &AtomicUsize, response_handlers: &Mutex>>, outbound_tx: &channel::Sender, + executor: &Arc, params: T::Params, ) -> impl 'static + Future> where @@ -686,15 +690,20 @@ impl LanguageServer { .as_mut() .ok_or_else(|| anyhow!("server shut down")) .map(|handlers| { + let executor = executor.clone(); handlers.insert( id, Box::new(move |result| { - let response = match result { - Ok(response) => serde_json::from_str(response) - .context("failed to deserialize response"), - Err(error) => Err(anyhow!("{}", error.message)), - }; - let _ = tx.send(response); + executor + .spawn(async move { + let response = match result { + Ok(response) => serde_json::from_str(&response) + .context("failed to deserialize response"), + Err(error) => Err(anyhow!("{}", error.message)), + }; + let _ = tx.send(response); + }) + .detach(); }), ); }); From f0138a7a878f9c512d104d82c9d0fa81874012e9 Mon Sep 17 00:00:00 2001 From: Nate Butler Date: Wed, 21 Jun 2023 12:15:24 -0400 Subject: [PATCH 48/56] Add initial syntax highlighting doc --- docs/zed/syntax-highlighting.md | 79 +++++++++++++++++++++++++++++++++ 1 file changed, 79 insertions(+) create mode 100644 docs/zed/syntax-highlighting.md diff --git a/docs/zed/syntax-highlighting.md b/docs/zed/syntax-highlighting.md new file mode 100644 index 0000000000..3878fcc6e9 --- /dev/null +++ b/docs/zed/syntax-highlighting.md @@ -0,0 +1,79 @@ +# Syntax Highlighting in Zed + +This doc is a work in progress! + +## Defining syntax highlighting rules + +We use tree-sitter queries to match certian properties to highlight. + +### Simple Example: + +```scheme +(property_identifier) @property +``` + +```ts +const font: FontFamily = { + weight: "normal", + underline: false, + italic: false, +} +``` + +Match a property identifier and highlight it using the identifier `@property`. In the above example, `weight`, `underline`, and `italic` would be highlighted. + +### Complex example: + +```scheme +(_ + return_type: (type_annotation + [ + (type_identifier) @type.return + (generic_type + name: (type_identifier) @type.return) + ])) +``` + +```ts +function buildDefaultSyntax(colorScheme: ColorScheme): Partial { + // ... +} +``` + +Match a function return type, and highlight the type using the identifier `@type.return`. In the above example, `Partial` would be highlighted. + +### Example - Typescript + +Here is an example portion of our `highlights.scm` for TypeScript: + +```scheme +; crates/zed/src/languages/typescript/highlights.scm + +; Variables + +(identifier) @variable + +; Properties + +(property_identifier) @property + +; Function and method calls + +(call_expression + function: (identifier) @function) + +(call_expression + function: (member_expression + property: (property_identifier) @function.method)) + +; Function and method definitions + +(function + name: (identifier) @function) +(function_declaration + name: (identifier) @function) +(method_definition + name: (property_identifier) @function.method) + +; ... +``` From eeb155a951132cbd321fca65c617521fd2b7ffeb Mon Sep 17 00:00:00 2001 From: Nate Butler Date: Wed, 21 Jun 2023 12:20:47 -0400 Subject: [PATCH 49/56] Remove unused light variable --- styles/src/theme/syntax.ts | 2 -- 1 file changed, 2 deletions(-) diff --git a/styles/src/theme/syntax.ts b/styles/src/theme/syntax.ts index 380fd31786..369fceb070 100644 --- a/styles/src/theme/syntax.ts +++ b/styles/src/theme/syntax.ts @@ -129,8 +129,6 @@ function buildDefaultSyntax(colorScheme: ColorScheme): Syntax { [key: string]: Omit } = {} - const light = colorScheme.isLight - // then spread the default to each style for (const key of Object.keys({} as Syntax)) { syntax[key as keyof Syntax] = { From a3e65528baa6409f49d11a749eb2e8f3bd2570f5 Mon Sep 17 00:00:00 2001 From: Nate Butler Date: Wed, 21 Jun 2023 12:21:01 -0400 Subject: [PATCH 50/56] Update syntax colors --- styles/src/themes/rose-pine/common.ts | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/styles/src/themes/rose-pine/common.ts b/styles/src/themes/rose-pine/common.ts index 28ed090c5d..8b3b3b7000 100644 --- a/styles/src/themes/rose-pine/common.ts +++ b/styles/src/themes/rose-pine/common.ts @@ -1,3 +1,5 @@ +import { ThemeSyntax } from "../../common"; + export const color = { default: { base: '#191724', @@ -52,20 +54,20 @@ export const color = { } }; -export const syntax = (c: typeof color.default) => { +export const syntax = (c: typeof color.default): Partial => { return { comment: { color: c.muted }, - operator: { color: c.subtle }, + operator: { color: c.pine }, punctuation: { color: c.subtle }, variable: { color: c.text }, string: { color: c.gold }, - "type.builtin": { color: c.rose }, + type: { color: c.foam }, + "type.builtin": { color: c.foam }, boolean: { color: c.rose }, function: { color: c.rose }, keyword: { color: c.pine }, tag: { color: c.foam }, - type: { color: c.foam }, - "function.method": { color: c.iris }, + "function.method": { color: c.rose }, title: { color: c.gold }, linkText: { color: c.foam, italic: false }, linkUri: { color: c.rose }, From 86506a89aba71d85afd0123af16fe13b527b59fc Mon Sep 17 00:00:00 2001 From: Piotr Osiewicz <24362066+osiewicz@users.noreply.github.com> Date: Wed, 21 Jun 2023 19:11:55 +0200 Subject: [PATCH 51/56] Remove theme_testbench --- Cargo.lock | 13 - Cargo.toml | 1 - crates/theme_testbench/Cargo.toml | 19 -- crates/theme_testbench/src/theme_testbench.rs | 300 ------------------ crates/zed/Cargo.toml | 1 - crates/zed/src/main.rs | 1 - 6 files changed, 335 deletions(-) delete mode 100644 crates/theme_testbench/Cargo.toml delete mode 100644 crates/theme_testbench/src/theme_testbench.rs diff --git a/Cargo.lock b/Cargo.lock index a4b12223e5..206859ee45 100644 --- a/Cargo.lock +++ b/Cargo.lock @@ -6916,18 +6916,6 @@ dependencies = [ "workspace", ] -[[package]] -name = "theme_testbench" -version = "0.1.0" -dependencies = [ - "gpui", - "project", - "settings", - "smallvec", - "theme", - "workspace", -] - [[package]] name = "thiserror" version = "1.0.40" @@ -8888,7 +8876,6 @@ dependencies = [ "text", "theme", "theme_selector", - "theme_testbench", "thiserror", "tiny_http", "toml", diff --git a/Cargo.toml b/Cargo.toml index fca7355964..a49d75d3e2 100644 --- a/Cargo.toml +++ b/Cargo.toml @@ -61,7 +61,6 @@ members = [ "crates/text", "crates/theme", "crates/theme_selector", - "crates/theme_testbench", "crates/util", "crates/vim", "crates/workspace", diff --git a/crates/theme_testbench/Cargo.toml b/crates/theme_testbench/Cargo.toml deleted file mode 100644 index 32dca6a07a..0000000000 --- a/crates/theme_testbench/Cargo.toml +++ /dev/null @@ -1,19 +0,0 @@ -[package] -name = "theme_testbench" -version = "0.1.0" -edition = "2021" -publish = false - -[lib] -path = "src/theme_testbench.rs" -doctest = false - - -[dependencies] -gpui = { path = "../gpui" } -theme = { path = "../theme" } -settings = { path = "../settings" } -workspace = { path = "../workspace" } -project = { path = "../project" } - -smallvec.workspace = true diff --git a/crates/theme_testbench/src/theme_testbench.rs b/crates/theme_testbench/src/theme_testbench.rs deleted file mode 100644 index 258249b599..0000000000 --- a/crates/theme_testbench/src/theme_testbench.rs +++ /dev/null @@ -1,300 +0,0 @@ -use gpui::{ - actions, - color::Color, - elements::{ - AnyElement, Canvas, Container, ContainerStyle, Flex, Label, Margin, MouseEventHandler, - Padding, ParentElement, - }, - fonts::TextStyle, - AppContext, Border, Element, Entity, ModelHandle, Quad, Task, View, ViewContext, ViewHandle, - WeakViewHandle, -}; -use project::Project; -use theme::{ColorScheme, Layer, Style, StyleSet, ThemeSettings}; -use workspace::{item::Item, register_deserializable_item, Pane, Workspace}; - -actions!(theme, [DeployThemeTestbench]); - -pub fn init(cx: &mut AppContext) { - cx.add_action(ThemeTestbench::deploy); - - register_deserializable_item::(cx) -} - -pub struct ThemeTestbench {} - -impl ThemeTestbench { - pub fn deploy( - workspace: &mut Workspace, - _: &DeployThemeTestbench, - cx: &mut ViewContext, - ) { - let view = cx.add_view(|_| ThemeTestbench {}); - workspace.add_item(Box::new(view), cx); - } - - fn render_ramps(color_scheme: &ColorScheme) -> Flex { - fn display_ramp(ramp: &Vec) -> AnyElement { - Flex::row() - .with_children(ramp.iter().cloned().map(|color| { - Canvas::new(move |scene, bounds, _, _, _| { - scene.push_quad(Quad { - bounds, - background: Some(color), - ..Default::default() - }); - }) - .flex(1.0, false) - })) - .flex(1.0, false) - .into_any() - } - - Flex::column() - .with_child(display_ramp(&color_scheme.ramps.neutral)) - .with_child(display_ramp(&color_scheme.ramps.red)) - .with_child(display_ramp(&color_scheme.ramps.orange)) - .with_child(display_ramp(&color_scheme.ramps.yellow)) - .with_child(display_ramp(&color_scheme.ramps.green)) - .with_child(display_ramp(&color_scheme.ramps.cyan)) - .with_child(display_ramp(&color_scheme.ramps.blue)) - .with_child(display_ramp(&color_scheme.ramps.violet)) - .with_child(display_ramp(&color_scheme.ramps.magenta)) - } - - fn render_layer( - layer_index: usize, - layer: &Layer, - cx: &mut ViewContext, - ) -> Container { - Flex::column() - .with_child( - Self::render_button_set(0, layer_index, "base", &layer.base, cx).flex(1., false), - ) - .with_child( - Self::render_button_set(1, layer_index, "variant", &layer.variant, cx) - .flex(1., false), - ) - .with_child( - Self::render_button_set(2, layer_index, "on", &layer.on, cx).flex(1., false), - ) - .with_child( - Self::render_button_set(3, layer_index, "accent", &layer.accent, cx) - .flex(1., false), - ) - .with_child( - Self::render_button_set(4, layer_index, "positive", &layer.positive, cx) - .flex(1., false), - ) - .with_child( - Self::render_button_set(5, layer_index, "warning", &layer.warning, cx) - .flex(1., false), - ) - .with_child( - Self::render_button_set(6, layer_index, "negative", &layer.negative, cx) - .flex(1., false), - ) - .contained() - .with_style(ContainerStyle { - margin: Margin { - top: 10., - bottom: 10., - left: 10., - right: 10., - }, - background_color: Some(layer.base.default.background), - ..Default::default() - }) - } - - fn render_button_set( - set_index: usize, - layer_index: usize, - set_name: &'static str, - style_set: &StyleSet, - cx: &mut ViewContext, - ) -> Flex { - Flex::row() - .with_child(Self::render_button( - set_index * 6, - layer_index, - set_name, - &style_set, - None, - cx, - )) - .with_child(Self::render_button( - set_index * 6 + 1, - layer_index, - "hovered", - &style_set, - Some(|style_set| &style_set.hovered), - cx, - )) - .with_child(Self::render_button( - set_index * 6 + 2, - layer_index, - "pressed", - &style_set, - Some(|style_set| &style_set.pressed), - cx, - )) - .with_child(Self::render_button( - set_index * 6 + 3, - layer_index, - "active", - &style_set, - Some(|style_set| &style_set.active), - cx, - )) - .with_child(Self::render_button( - set_index * 6 + 4, - layer_index, - "disabled", - &style_set, - Some(|style_set| &style_set.disabled), - cx, - )) - .with_child(Self::render_button( - set_index * 6 + 5, - layer_index, - "inverted", - &style_set, - Some(|style_set| &style_set.inverted), - cx, - )) - } - - fn render_button( - button_index: usize, - layer_index: usize, - text: &'static str, - style_set: &StyleSet, - style_override: Option &Style>, - cx: &mut ViewContext, - ) -> AnyElement { - enum TestBenchButton {} - MouseEventHandler::::new(layer_index + button_index, cx, |state, cx| { - let style = if let Some(style_override) = style_override { - style_override(&style_set) - } else if state.clicked().is_some() { - &style_set.pressed - } else if state.hovered() { - &style_set.hovered - } else { - &style_set.default - }; - - Self::render_label(text.to_string(), style, cx) - .contained() - .with_style(ContainerStyle { - margin: Margin { - top: 4., - bottom: 4., - left: 4., - right: 4., - }, - padding: Padding { - top: 4., - bottom: 4., - left: 4., - right: 4., - }, - background_color: Some(style.background), - border: Border { - width: 1., - color: style.border, - overlay: false, - top: true, - bottom: true, - left: true, - right: true, - }, - corner_radius: 2., - ..Default::default() - }) - }) - .flex(1., true) - .into_any() - } - - fn render_label(text: String, style: &Style, cx: &mut ViewContext) -> Label { - let settings = settings::get::(cx); - let font_cache = cx.font_cache(); - let family_id = settings.buffer_font_family; - let font_size = settings.buffer_font_size(cx); - let font_id = font_cache - .select_font(family_id, &Default::default()) - .unwrap(); - - let text_style = TextStyle { - color: style.foreground, - font_family_id: family_id, - font_family_name: font_cache.family_name(family_id).unwrap(), - font_id, - font_size, - font_properties: Default::default(), - underline: Default::default(), - }; - - Label::new(text, text_style) - } -} - -impl Entity for ThemeTestbench { - type Event = (); -} - -impl View for ThemeTestbench { - fn ui_name() -> &'static str { - "ThemeTestbench" - } - - fn render(&mut self, cx: &mut gpui::ViewContext) -> AnyElement { - let color_scheme = &theme::current(cx).clone().color_scheme; - - Flex::row() - .with_child( - Self::render_ramps(color_scheme) - .contained() - .with_margin_right(10.) - .flex(0.1, false), - ) - .with_child( - Flex::column() - .with_child(Self::render_layer(100, &color_scheme.lowest, cx).flex(1., true)) - .with_child(Self::render_layer(200, &color_scheme.middle, cx).flex(1., true)) - .with_child(Self::render_layer(300, &color_scheme.highest, cx).flex(1., true)) - .flex(1., false), - ) - .into_any() - } -} - -impl Item for ThemeTestbench { - fn tab_content( - &self, - _: Option, - style: &theme::Tab, - _: &AppContext, - ) -> AnyElement { - Label::new("Theme Testbench", style.label.clone()) - .aligned() - .contained() - .into_any() - } - - fn serialized_item_kind() -> Option<&'static str> { - Some("ThemeTestBench") - } - - fn deserialize( - _project: ModelHandle, - _workspace: WeakViewHandle, - _workspace_id: workspace::WorkspaceId, - _item_id: workspace::ItemId, - cx: &mut ViewContext, - ) -> Task>> { - Task::ready(Ok(cx.add_view(|_| Self {}))) - } -} diff --git a/crates/zed/Cargo.toml b/crates/zed/Cargo.toml index d8e47d1c3e..6c15973b50 100644 --- a/crates/zed/Cargo.toml +++ b/crates/zed/Cargo.toml @@ -62,7 +62,6 @@ text = { path = "../text" } terminal_view = { path = "../terminal_view" } theme = { path = "../theme" } theme_selector = { path = "../theme_selector" } -theme_testbench = { path = "../theme_testbench" } util = { path = "../util" } vim = { path = "../vim" } workspace = { path = "../workspace" } diff --git a/crates/zed/src/main.rs b/crates/zed/src/main.rs index dcdf5c1ea5..23ecbf978b 100644 --- a/crates/zed/src/main.rs +++ b/crates/zed/src/main.rs @@ -154,7 +154,6 @@ fn main() { search::init(cx); vim::init(cx); terminal_view::init(cx); - theme_testbench::init(cx); copilot::init(http.clone(), node_runtime, cx); ai::init(cx); From 127f4aa506118470cfc981f751eb1ffb27befb44 Mon Sep 17 00:00:00 2001 From: Nate Butler Date: Wed, 21 Jun 2023 13:14:39 -0400 Subject: [PATCH 52/56] Fix status bar buttons --- styles/src/styleTree/statusBar.ts | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/styles/src/styleTree/statusBar.ts b/styles/src/styleTree/statusBar.ts index e4a48e8215..636da15bad 100644 --- a/styles/src/styleTree/statusBar.ts +++ b/styles/src/styleTree/statusBar.ts @@ -132,6 +132,15 @@ export default function statusBar(colorScheme: ColorScheme) { iconColor: foreground(layer, "active"), background: background(layer, "active"), }, + hovered: { + iconColor: foreground(layer, "hovered"), + background: background(layer, "hovered"), + }, + clicked: { + iconColor: foreground(layer, "pressed"), + background: background(layer, "pressed"), + }, + } } } From ed8bdd186e9515e648a83d3448e7c9805cb3d2eb Mon Sep 17 00:00:00 2001 From: Nate Butler Date: Wed, 21 Jun 2023 13:56:27 -0400 Subject: [PATCH 53/56] Update toggle active styles --- styles/src/styleTree/contactList.ts | 13 ++++- styles/src/styleTree/contextMenu.ts | 8 ++- styles/src/styleTree/editor.ts | 27 +++++++---- styles/src/styleTree/picker.ts | 19 +++++++- styles/src/styleTree/projectPanel.ts | 54 +++++++++++++-------- styles/src/styleTree/search.ts | 23 ++++++--- styles/src/styleTree/tabBar.ts | 9 ++++ styles/src/styleTree/toolbarDropdownMenu.ts | 9 ++-- styles/src/styleTree/workspace.ts | 11 +++-- 9 files changed, 126 insertions(+), 47 deletions(-) diff --git a/styles/src/styleTree/contactList.ts b/styles/src/styleTree/contactList.ts index 57034109f1..cee17219c8 100644 --- a/styles/src/styleTree/contactList.ts +++ b/styles/src/styleTree/contactList.ts @@ -83,7 +83,12 @@ export default function contactsPanel(colorScheme: ColorScheme) { background: background(layer, "default"), // posiewic: breaking change }, state: { - hovered: { background: background(layer, "default") }, + hovered: { + background: background(layer, "hovered"), + }, + clicked: { + background: background(layer, "pressed"), + } }, // hack, we want headerRow to be interactive for whatever reason. It probably shouldn't be interactive in the first place. }), state: { @@ -92,6 +97,12 @@ export default function contactsPanel(colorScheme: ColorScheme) { ...text(layer, "mono", "active", { size: "sm" }), background: background(layer, "active"), }, + hovered: { + background: background(layer, "hovered"), + }, + clicked: { + background: background(layer, "pressed"), + } } } }), diff --git a/styles/src/styleTree/contextMenu.ts b/styles/src/styleTree/contextMenu.ts index 7b2b9be6c2..a217018c97 100644 --- a/styles/src/styleTree/contextMenu.ts +++ b/styles/src/styleTree/contextMenu.ts @@ -40,6 +40,9 @@ export default function contextMenu(colorScheme: ColorScheme) { padding: { left: 3, right: 3 }, }, }, + clicked: { + background: background(layer, "pressed"), + }, }, }), state: { @@ -48,7 +51,10 @@ export default function contextMenu(colorScheme: ColorScheme) { background: background(layer, "active"), }, hovered: { - background: background(layer, "active"), + background: background(layer, "hovered"), + }, + clicked: { + background: background(layer, "pressed"), }, } } diff --git a/styles/src/styleTree/editor.ts b/styles/src/styleTree/editor.ts index b02366192a..62792f6feb 100644 --- a/styles/src/styleTree/editor.ts +++ b/styles/src/styleTree/editor.ts @@ -56,18 +56,24 @@ export default function editor(colorScheme: ColorScheme) { color: foreground(layer, "variant"), }, state: { - clicked: { - color: foreground(layer, "base"), - }, hovered: { - color: foreground(layer, "on"), + color: foreground(layer, "variant", "hovered"), + }, + clicked: { + color: foreground(layer, "variant", "pressed"), }, }, }), state: { active: { default: { - color: foreground(layer, "on"), + color: foreground(layer, "accent"), + }, + hovered: { + color: foreground(layer, "accent", "hovered"), + }, + clicked: { + color: foreground(layer, "accent", "pressed"), }, } } @@ -87,18 +93,21 @@ export default function editor(colorScheme: ColorScheme) { color: foreground(layer, "variant"), }, state: { - clicked: { - color: foreground(layer, "base"), - }, hovered: { color: foreground(layer, "on"), }, + clicked: { + color: foreground(layer, "base"), + }, }, }), state: { active: { default: { - color: foreground(layer, "on"), + color: foreground(layer, "default"), + }, + hovered: { + color: foreground(layer, "variant"), }, } } diff --git a/styles/src/styleTree/picker.ts b/styles/src/styleTree/picker.ts index 809cd1743f..57ee71efb4 100644 --- a/styles/src/styleTree/picker.ts +++ b/styles/src/styleTree/picker.ts @@ -67,6 +67,12 @@ export default function picker(colorScheme: ColorScheme): any { 0.5 ), }, + clicked: { + background: withOpacity( + background(layer, "pressed"), + 0.5 + ), + }, }, }), state: { @@ -76,7 +82,18 @@ export default function picker(colorScheme: ColorScheme): any { background(layer, "base", "active"), 0.5 ), - //text: text(layer, "sans", "base", "active"), + }, + hovered: { + background: withOpacity( + background(layer, "hovered"), + 0.5 + ), + }, + clicked: { + background: withOpacity( + background(layer, "pressed"), + 0.5 + ), }, } } diff --git a/styles/src/styleTree/projectPanel.ts b/styles/src/styleTree/projectPanel.ts index 7c37ce6bd3..2c94a51dba 100644 --- a/styles/src/styleTree/projectPanel.ts +++ b/styles/src/styleTree/projectPanel.ts @@ -28,33 +28,44 @@ export default function projectPanel(colorScheme: ColorScheme) { }, } + const default_entry = interactive({ + base: { + ...baseEntry, + text: text(layer, "mono", "variant", { size: "sm" }), + status, + }, + state: { + default: { + background: background(layer), + }, + hovered: { + background: background(layer, "variant", "hovered"), + }, + clicked: { + background: background(layer, "variant", "pressed"), + } + }, + }) + let entry = toggleable({ - base: - interactive({ + base: default_entry, + state: { + active: interactive({ base: { - ...baseEntry, - text: text(layer, "mono", "variant", { size: "sm" }), - status, + ...default_entry }, state: { + default: { + background: background(colorScheme.lowest), + }, hovered: { - background: background(layer, "variant", "hovered"), + background: background(colorScheme.lowest, "hovered"), + }, + clicked: { + background: background(colorScheme.lowest, "pressed"), }, }, }), - state: { - active: { - default: { - /*background: colorScheme.isLight - ? withOpacity(background(layer, "active"), 0.5) - : background(layer, "active") ,*/ // todo posiewic - text: text(layer, "mono", "active", { size: "sm" }), - }, - hovered: { - //background: background(layer, "active"), - text: text(layer, "mono", "active", { size: "sm" }), - }, - } } } ) @@ -84,6 +95,11 @@ export default function projectPanel(colorScheme: ColorScheme) { background: background(layer, "hovered"), border: border(layer, "active"), }, + clicked: { + ...text(layer, "sans", "default", { size: "sm" }), + background: background(layer, "pressed"), + border: border(layer, "active"), + } }, }), background: background(layer), diff --git a/styles/src/styleTree/search.ts b/styles/src/styleTree/search.ts index 0123ddee22..40816e673c 100644 --- a/styles/src/styleTree/search.ts +++ b/styles/src/styleTree/search.ts @@ -55,24 +55,28 @@ export default function search(colorScheme: ColorScheme) { }, }, state: { - clicked: { - ...text(layer, "mono", "on", "pressed"), - background: background(layer, "on", "pressed"), - border: border(layer, "on", "pressed"), - }, hovered: { ...text(layer, "mono", "on", "hovered"), background: background(layer, "on", "hovered"), border: border(layer, "on", "hovered"), }, + clicked: { + ...text(layer, "mono", "on", "pressed"), + background: background(layer, "on", "pressed"), + border: border(layer, "on", "pressed"), + }, }, }), state: { active: { default: { - ...text(layer, "mono", "on", "inverted"), - background: background(layer, "on", "inverted"), - border: border(layer, "on", "inverted"), + ...text(layer, "mono", "accent"), + }, + hovered: { + ...text(layer, "mono", "accent", "hovered"), + }, + clicked: { + ...text(layer, "mono", "accent", "pressed"), }, } } @@ -124,6 +128,9 @@ export default function search(colorScheme: ColorScheme) { hovered: { color: foreground(layer, "hovered"), }, + clicked: { + color: foreground(layer, "pressed"), + }, }, }), } diff --git a/styles/src/styleTree/tabBar.ts b/styles/src/styleTree/tabBar.ts index f2c99ea736..85291c9edb 100644 --- a/styles/src/styleTree/tabBar.ts +++ b/styles/src/styleTree/tabBar.ts @@ -100,6 +100,9 @@ export default function tabBar(colorScheme: ColorScheme) { hovered: { color: foreground(layer, "hovered"), }, + clicked: { + color: foreground(layer, "pressed"), + }, }, }), state: @@ -108,6 +111,12 @@ export default function tabBar(colorScheme: ColorScheme) { default: { color: foreground(layer, "accent"), }, + hovered: { + color: foreground(layer, "hovered"), + }, + clicked: { + color: foreground(layer, "pressed"), + }, } } } diff --git a/styles/src/styleTree/toolbarDropdownMenu.ts b/styles/src/styleTree/toolbarDropdownMenu.ts index b1b28d789e..3837f5e1a4 100644 --- a/styles/src/styleTree/toolbarDropdownMenu.ts +++ b/styles/src/styleTree/toolbarDropdownMenu.ts @@ -19,13 +19,14 @@ export default function dropdownMenu(colorScheme: ColorScheme) { secondaryTextSpacing: 10, padding: { left: 8, right: 8, top: 2, bottom: 2 }, cornerRadius: 6, - background: background(layer, "on"), - border: border(layer, "on", { overlay: true }), + background: background(layer, "on") }, state: { hovered: { background: background(layer, "hovered"), - ...text(layer, "sans", "hovered", { size: "sm" }), + }, + clicked: { + background: background(layer, "pressed"), }, }, }), @@ -55,7 +56,7 @@ export default function dropdownMenu(colorScheme: ColorScheme) { background: background(layer, "active"), }, hovered: { - background: background(layer, "active"), + background: background(layer, "hovered"), }, } } diff --git a/styles/src/styleTree/workspace.ts b/styles/src/styleTree/workspace.ts index fdc7657481..d835dfe3a1 100644 --- a/styles/src/styleTree/workspace.ts +++ b/styles/src/styleTree/workspace.ts @@ -287,20 +287,23 @@ export default function workspace(colorScheme: ColorScheme) { state: { clicked: { background: background(layer, "variant", "pressed"), - color: foreground(layer, "variant", "pressed"), }, hovered: { background: background(layer, "variant", "hovered"), - color: foreground(layer, "variant", "hovered"), }, }, }), state: { active: { default: { - background: background(layer, "variant", "active"), - color: foreground(layer, "variant", "active"), + background: background(layer, "on", "default"), }, + hovered: { + background: background(layer, "on", "hovered"), + }, + clicked: { + background: background(layer, "on", "pressed"), + } } } } From a845e82173366e2e37504ea9b3f6cf0582c0995d Mon Sep 17 00:00:00 2001 From: Nate Butler Date: Wed, 21 Jun 2023 13:58:42 -0400 Subject: [PATCH 54/56] Update settings.json --- styles/.zed/settings.json | 17 +++++++++++++---- 1 file changed, 13 insertions(+), 4 deletions(-) diff --git a/styles/.zed/settings.json b/styles/.zed/settings.json index 0a3c761b8e..5c31fc5ac1 100644 --- a/styles/.zed/settings.json +++ b/styles/.zed/settings.json @@ -3,9 +3,18 @@ // For a full list of overridable settings, and general information on folder-specific settings, // see the documentation: https://docs.zed.dev/configuration/configuring-zed#folder-specific-settings { - "languages": { - "TypeScript": { - "tab_size": 4 + "languages": { + "TypeScript": { + "tab_size": 4 + }, + "TSX": { + "tab_size": 4 + }, + "JavaScript": { + "tab_size": 4 + }, + "JSON": { + "tab_size": 4 + } } - } } From 9d9bbfdabfb04389beb7989babed076369ce3cb5 Mon Sep 17 00:00:00 2001 From: Nate Butler Date: Wed, 21 Jun 2023 13:58:54 -0400 Subject: [PATCH 55/56] Format --- styles/src/buildTokens.ts | 86 +++++++------- styles/src/element/interactive.ts | 118 ++++++++++---------- styles/src/element/toggle.ts | 30 ++--- styles/src/styleTree/commandPalette.ts | 6 +- styles/src/styleTree/contactList.ts | 78 ++++++------- styles/src/styleTree/contextMenu.ts | 56 +++++----- styles/src/styleTree/editor.ts | 60 +++++----- styles/src/styleTree/picker.ts | 72 ++++++------ styles/src/styleTree/projectPanel.ts | 11 +- styles/src/styleTree/search.ts | 62 +++++----- styles/src/styleTree/statusBar.ts | 41 ++++--- styles/src/styleTree/tabBar.ts | 37 +++--- styles/src/styleTree/toolbarDropdownMenu.ts | 36 +++--- styles/src/styleTree/workspace.ts | 106 +++++++++--------- 14 files changed, 387 insertions(+), 412 deletions(-) diff --git a/styles/src/buildTokens.ts b/styles/src/buildTokens.ts index 0cf1ea037e..6c6acd2f22 100644 --- a/styles/src/buildTokens.ts +++ b/styles/src/buildTokens.ts @@ -1,13 +1,13 @@ -import * as fs from "fs"; -import * as path from "path"; -import { ColorScheme, createColorScheme } from "./common"; -import { themes } from "./themes"; -import { slugify } from "./utils/slugify"; -import { colorSchemeTokens } from "./theme/tokens/colorScheme"; +import * as fs from "fs" +import * as path from "path" +import { ColorScheme, createColorScheme } from "./common" +import { themes } from "./themes" +import { slugify } from "./utils/slugify" +import { colorSchemeTokens } from "./theme/tokens/colorScheme" -const TOKENS_DIRECTORY = path.join(__dirname, "..", "target", "tokens"); -const TOKENS_FILE = path.join(TOKENS_DIRECTORY, "$themes.json"); -const METADATA_FILE = path.join(TOKENS_DIRECTORY, "$metadata.json"); +const TOKENS_DIRECTORY = path.join(__dirname, "..", "target", "tokens") +const TOKENS_FILE = path.join(TOKENS_DIRECTORY, "$themes.json") +const METADATA_FILE = path.join(TOKENS_DIRECTORY, "$metadata.json") function clearTokens(tokensDirectory: string) { if (!fs.existsSync(tokensDirectory)) { @@ -22,64 +22,66 @@ function clearTokens(tokensDirectory: string) { } type TokenSet = { - id: string; - name: string; - selectedTokenSets: { [key: string]: "enabled" }; -}; + id: string + name: string + selectedTokenSets: { [key: string]: "enabled" } +} -function buildTokenSetOrder(colorSchemes: ColorScheme[]): { tokenSetOrder: string[] } { - const tokenSetOrder: string[] = colorSchemes.map( - (scheme) => scheme.name.toLowerCase().replace(/\s+/g, "_") - ); - return { tokenSetOrder }; +function buildTokenSetOrder(colorSchemes: ColorScheme[]): { + tokenSetOrder: string[] +} { + const tokenSetOrder: string[] = colorSchemes.map((scheme) => + scheme.name.toLowerCase().replace(/\s+/g, "_") + ) + return { tokenSetOrder } } function buildThemesIndex(colorSchemes: ColorScheme[]): TokenSet[] { const themesIndex: TokenSet[] = colorSchemes.map((scheme, index) => { const id = `${scheme.isLight ? "light" : "dark"}_${scheme.name .toLowerCase() - .replace(/\s+/g, "_")}_${index}`; - const selectedTokenSets: { [key: string]: "enabled" } = {}; - const tokenSet = scheme.name.toLowerCase().replace(/\s+/g, "_"); - selectedTokenSets[tokenSet] = "enabled"; + .replace(/\s+/g, "_")}_${index}` + const selectedTokenSets: { [key: string]: "enabled" } = {} + const tokenSet = scheme.name.toLowerCase().replace(/\s+/g, "_") + selectedTokenSets[tokenSet] = "enabled" return { id, name: `${scheme.name} - ${scheme.isLight ? "Light" : "Dark"}`, selectedTokenSets, - }; - }); + } + }) - return themesIndex; + return themesIndex } function writeTokens(colorSchemes: ColorScheme[], tokensDirectory: string) { - clearTokens(tokensDirectory); + clearTokens(tokensDirectory) for (const colorScheme of colorSchemes) { - const fileName = slugify(colorScheme.name) + ".json"; - const tokens = colorSchemeTokens(colorScheme); - const tokensJSON = JSON.stringify(tokens, null, 2); - const outPath = path.join(tokensDirectory, fileName); - fs.writeFileSync(outPath, tokensJSON, { mode: 0o644 }); - console.log(`- ${outPath} created`); + const fileName = slugify(colorScheme.name) + ".json" + const tokens = colorSchemeTokens(colorScheme) + const tokensJSON = JSON.stringify(tokens, null, 2) + const outPath = path.join(tokensDirectory, fileName) + fs.writeFileSync(outPath, tokensJSON, { mode: 0o644 }) + console.log(`- ${outPath} created`) } - const themeIndexData = buildThemesIndex(colorSchemes); + const themeIndexData = buildThemesIndex(colorSchemes) - const themesJSON = JSON.stringify(themeIndexData, null, 2); - fs.writeFileSync(TOKENS_FILE, themesJSON, { mode: 0o644 }); - console.log(`- ${TOKENS_FILE} created`); + const themesJSON = JSON.stringify(themeIndexData, null, 2) + fs.writeFileSync(TOKENS_FILE, themesJSON, { mode: 0o644 }) + console.log(`- ${TOKENS_FILE} created`) - const tokenSetOrderData = buildTokenSetOrder(colorSchemes); + const tokenSetOrderData = buildTokenSetOrder(colorSchemes) - const metadataJSON = JSON.stringify(tokenSetOrderData, null, 2); - fs.writeFileSync(METADATA_FILE, metadataJSON, { mode: 0o644 }); - console.log(`- ${METADATA_FILE} created`); + const metadataJSON = JSON.stringify(tokenSetOrderData, null, 2) + fs.writeFileSync(METADATA_FILE, metadataJSON, { mode: 0o644 }) + console.log(`- ${METADATA_FILE} created`) } const colorSchemes: ColorScheme[] = themes.map((theme) => createColorScheme(theme) -); +) -writeTokens(colorSchemes, TOKENS_DIRECTORY); +writeTokens(colorSchemes, TOKENS_DIRECTORY) diff --git a/styles/src/element/interactive.ts b/styles/src/element/interactive.ts index bd90e28aad..1c0f393cff 100644 --- a/styles/src/element/interactive.ts +++ b/styles/src/element/interactive.ts @@ -2,28 +2,28 @@ import merge from "ts-deepmerge" import { DeepPartial } from "utility-types" type InteractiveState = - | "default" - | "hovered" - | "clicked" - | "selected" - | "disabled" + | "default" + | "hovered" + | "clicked" + | "selected" + | "disabled" type Interactive = { - default: T - hovered?: T - clicked?: T - selected?: T - disabled?: T + default: T + hovered?: T + clicked?: T + selected?: T + disabled?: T } export const NO_DEFAULT_OR_BASE_ERROR = - "An interactive object must have a default state, or a base property." + "An interactive object must have a default state, or a base property." export const NOT_ENOUGH_STATES_ERROR = - "An interactive object must have a default and at least one other state." + "An interactive object must have a default and at least one other state." interface InteractiveProps { - base?: T - state: Partial>> + base?: T + state: Partial>> } /** @@ -38,60 +38,60 @@ interface InteractiveProps { * @returns Interactive object with fields from `base` and `state`. */ export function interactive({ - base, - state, + base, + state, }: InteractiveProps): Interactive { - if (!base && !state.default) throw new Error(NO_DEFAULT_OR_BASE_ERROR) + if (!base && !state.default) throw new Error(NO_DEFAULT_OR_BASE_ERROR) - let defaultState: T + let defaultState: T - if (state.default && base) { - defaultState = merge(base, state.default) as T - } else { - defaultState = base ? base : (state.default as T) - } + if (state.default && base) { + defaultState = merge(base, state.default) as T + } else { + defaultState = base ? base : (state.default as T) + } - let interactiveObj: Interactive = { - default: defaultState, - } + let interactiveObj: Interactive = { + default: defaultState, + } - let stateCount = 0 + let stateCount = 0 - if (state.hovered !== undefined) { - interactiveObj.hovered = merge( - interactiveObj.default, - state.hovered - ) as T - stateCount++ - } + if (state.hovered !== undefined) { + interactiveObj.hovered = merge( + interactiveObj.default, + state.hovered + ) as T + stateCount++ + } - if (state.clicked !== undefined) { - interactiveObj.clicked = merge( - interactiveObj.default, - state.clicked - ) as T - stateCount++ - } + if (state.clicked !== undefined) { + interactiveObj.clicked = merge( + interactiveObj.default, + state.clicked + ) as T + stateCount++ + } - if (state.selected !== undefined) { - interactiveObj.selected = merge( - interactiveObj.default, - state.selected - ) as T - stateCount++ - } + if (state.selected !== undefined) { + interactiveObj.selected = merge( + interactiveObj.default, + state.selected + ) as T + stateCount++ + } - if (state.disabled !== undefined) { - interactiveObj.disabled = merge( - interactiveObj.default, - state.disabled - ) as T - stateCount++ - } + if (state.disabled !== undefined) { + interactiveObj.disabled = merge( + interactiveObj.default, + state.disabled + ) as T + stateCount++ + } - if (stateCount < 1) { - throw new Error(NOT_ENOUGH_STATES_ERROR) - } + if (stateCount < 1) { + throw new Error(NOT_ENOUGH_STATES_ERROR) + } - return interactiveObj + return interactiveObj } diff --git a/styles/src/element/toggle.ts b/styles/src/element/toggle.ts index cbf28b71e7..ead8f1e824 100644 --- a/styles/src/element/toggle.ts +++ b/styles/src/element/toggle.ts @@ -6,12 +6,12 @@ type ToggleState = "inactive" | "active" type Toggleable = Record export const NO_INACTIVE_OR_BASE_ERROR = - "A toggleable object must have an inactive state, or a base property." + "A toggleable object must have an inactive state, or a base property." export const NO_ACTIVE_ERROR = "A toggleable object must have an active state." interface ToggleableProps { - base?: T - state: Partial>> + base?: T + state: Partial>> } /** @@ -28,20 +28,20 @@ interface ToggleableProps { * ``` */ export function toggleable( - props: ToggleableProps + props: ToggleableProps ): Toggleable { - const { base, state } = props + const { base, state } = props - if (!base && !state.inactive) throw new Error(NO_INACTIVE_OR_BASE_ERROR) - if (!state.active) throw new Error(NO_ACTIVE_ERROR) + if (!base && !state.inactive) throw new Error(NO_INACTIVE_OR_BASE_ERROR) + if (!state.active) throw new Error(NO_ACTIVE_ERROR) - const inactiveState = base - ? ((state.inactive ? merge(base, state.inactive) : base) as T) - : (state.inactive as T) + const inactiveState = base + ? ((state.inactive ? merge(base, state.inactive) : base) as T) + : (state.inactive as T) - const toggleObj: Toggleable = { - inactive: inactiveState, - active: merge(base ?? {}, state.active) as T, - } - return toggleObj + const toggleObj: Toggleable = { + inactive: inactiveState, + active: merge(base ?? {}, state.active) as T, + } + return toggleObj } diff --git a/styles/src/styleTree/commandPalette.ts b/styles/src/styleTree/commandPalette.ts index 5389a775ed..5d4b7373c3 100644 --- a/styles/src/styleTree/commandPalette.ts +++ b/styles/src/styleTree/commandPalette.ts @@ -27,8 +27,8 @@ export default function commandPalette(colorScheme: ColorScheme) { active: { text: text(layer, "mono", "on", "default", { size: "xs" }), background: withOpacity(background(layer, "on"), 0.2), - } - } + }, + }, }) return { @@ -37,6 +37,6 @@ export default function commandPalette(colorScheme: ColorScheme) { key: { inactive: { ...key.inactive }, active: key.active, - } + }, } } diff --git a/styles/src/styleTree/contactList.ts b/styles/src/styleTree/contactList.ts index cee17219c8..88ae04277e 100644 --- a/styles/src/styleTree/contactList.ts +++ b/styles/src/styleTree/contactList.ts @@ -88,7 +88,7 @@ export default function contactsPanel(colorScheme: ColorScheme) { }, clicked: { background: background(layer, "pressed"), - } + }, }, // hack, we want headerRow to be interactive for whatever reason. It probably shouldn't be interactive in the first place. }), state: { @@ -102,9 +102,9 @@ export default function contactsPanel(colorScheme: ColorScheme) { }, clicked: { background: background(layer, "pressed"), - } - } - } + }, + }, + }, }), leaveCall: interactive({ base: { @@ -190,55 +190,51 @@ export default function contactsPanel(colorScheme: ColorScheme) { ...text(layer, "mono", "variant", { size: "xs" }), }, treeBranch: toggleable({ - base: - interactive({ - base: { + base: interactive({ + base: { + color: borderColor(layer), + width: 1, + }, + state: { + hovered: { color: borderColor(layer), - width: 1, }, - state: { - hovered: { - color: borderColor(layer), - }, - }, - }), + }, + }), state: { active: { default: { color: borderColor(layer), }, - } - } - } - ), + }, + }, + }), projectRow: toggleable({ - base: - interactive({ - base: { - ...projectRow, - background: background(layer), - icon: { - margin: { left: nameMargin }, - color: foreground(layer, "variant"), - width: 12, - }, - name: { - ...projectRow.name, - ...text(layer, "mono", { size: "sm" }), - }, + base: interactive({ + base: { + ...projectRow, + background: background(layer), + icon: { + margin: { left: nameMargin }, + color: foreground(layer, "variant"), + width: 12, }, - state: { - hovered: { - background: background(layer, "hovered"), - }, + name: { + ...projectRow.name, + ...text(layer, "mono", { size: "sm" }), }, - }), + }, + state: { + hovered: { + background: background(layer, "hovered"), + }, + }, + }), state: { active: { default: { background: background(layer, "active") }, - } - } - } - ), + }, + }, + }), } } diff --git a/styles/src/styleTree/contextMenu.ts b/styles/src/styleTree/contextMenu.ts index a217018c97..a59284c43a 100644 --- a/styles/src/styleTree/contextMenu.ts +++ b/styles/src/styleTree/contextMenu.ts @@ -12,39 +12,38 @@ export default function contextMenu(colorScheme: ColorScheme) { border: border(layer), keystrokeMargin: 30, item: toggleable({ - base: - interactive({ - base: { - iconSpacing: 8, - iconWidth: 14, - padding: { left: 6, right: 6, top: 2, bottom: 2 }, - cornerRadius: 6, - label: text(layer, "sans", { size: "sm" }), + base: interactive({ + base: { + iconSpacing: 8, + iconWidth: 14, + padding: { left: 6, right: 6, top: 2, bottom: 2 }, + cornerRadius: 6, + label: text(layer, "sans", { size: "sm" }), + keystroke: { + ...text(layer, "sans", "variant", { + size: "sm", + weight: "bold", + }), + padding: { left: 3, right: 3 }, + }, + }, + state: { + hovered: { + background: background(layer, "hovered"), + label: text(layer, "sans", "hovered", { size: "sm" }), keystroke: { - ...text(layer, "sans", "variant", { + ...text(layer, "sans", "hovered", { size: "sm", weight: "bold", }), padding: { left: 3, right: 3 }, }, }, - state: { - hovered: { - background: background(layer, "hovered"), - label: text(layer, "sans", "hovered", { size: "sm" }), - keystroke: { - ...text(layer, "sans", "hovered", { - size: "sm", - weight: "bold", - }), - padding: { left: 3, right: 3 }, - }, - }, - clicked: { - background: background(layer, "pressed"), - }, + clicked: { + background: background(layer, "pressed"), }, - }), + }, + }), state: { active: { default: { @@ -56,10 +55,9 @@ export default function contextMenu(colorScheme: ColorScheme) { clicked: { background: background(layer, "pressed"), }, - } - } - } - ), + }, + }, + }), separator: { background: borderColor(layer), diff --git a/styles/src/styleTree/editor.ts b/styles/src/styleTree/editor.ts index 62792f6feb..c53f3ba2ff 100644 --- a/styles/src/styleTree/editor.ts +++ b/styles/src/styleTree/editor.ts @@ -50,20 +50,19 @@ export default function editor(colorScheme: ColorScheme) { suggestion: syntax.predictive, codeActions: { indicator: toggleable({ - base: - interactive({ - base: { - color: foreground(layer, "variant"), + base: interactive({ + base: { + color: foreground(layer, "variant"), + }, + state: { + hovered: { + color: foreground(layer, "variant", "hovered"), }, - state: { - hovered: { - color: foreground(layer, "variant", "hovered"), - }, - clicked: { - color: foreground(layer, "variant", "pressed"), - }, + clicked: { + color: foreground(layer, "variant", "pressed"), }, - }), + }, + }), state: { active: { default: { @@ -75,10 +74,9 @@ export default function editor(colorScheme: ColorScheme) { clicked: { color: foreground(layer, "accent", "pressed"), }, - } - } - } - ), + }, + }, + }), verticalScale: 0.55, }, @@ -87,20 +85,19 @@ export default function editor(colorScheme: ColorScheme) { foldedIcon: "icons/chevron_right_8.svg", foldableIcon: "icons/chevron_down_8.svg", indicator: toggleable({ - base: - interactive({ - base: { - color: foreground(layer, "variant"), + base: interactive({ + base: { + color: foreground(layer, "variant"), + }, + state: { + hovered: { + color: foreground(layer, "on"), }, - state: { - hovered: { - color: foreground(layer, "on"), - }, - clicked: { - color: foreground(layer, "base"), - }, + clicked: { + color: foreground(layer, "base"), }, - }), + }, + }), state: { active: { default: { @@ -109,10 +106,9 @@ export default function editor(colorScheme: ColorScheme) { hovered: { color: foreground(layer, "variant"), }, - } - } - } - ), + }, + }, + }), ellipses: { textColor: colorScheme.ramps.neutral(0.71).hex(), cornerRadiusFactor: 0.15, diff --git a/styles/src/styleTree/picker.ts b/styles/src/styleTree/picker.ts index 57ee71efb4..5501bd4df2 100644 --- a/styles/src/styleTree/picker.ts +++ b/styles/src/styleTree/picker.ts @@ -40,41 +40,40 @@ export default function picker(colorScheme: ColorScheme): any { padding: {}, }, item: toggleable({ - base: - interactive({ - base: { - padding: { - bottom: 4, - left: 12, - right: 12, - top: 4, - }, - margin: { - top: 1, - left: 4, - right: 4, - }, - cornerRadius: 8, - text: text(layer, "sans", "variant"), - highlightText: text(layer, "sans", "accent", { - weight: "bold", - }), + base: interactive({ + base: { + padding: { + bottom: 4, + left: 12, + right: 12, + top: 4, }, - state: { - hovered: { - background: withOpacity( - background(layer, "hovered"), - 0.5 - ), - }, - clicked: { - background: withOpacity( - background(layer, "pressed"), - 0.5 - ), - }, + margin: { + top: 1, + left: 4, + right: 4, }, - }), + cornerRadius: 8, + text: text(layer, "sans", "variant"), + highlightText: text(layer, "sans", "accent", { + weight: "bold", + }), + }, + state: { + hovered: { + background: withOpacity( + background(layer, "hovered"), + 0.5 + ), + }, + clicked: { + background: withOpacity( + background(layer, "pressed"), + 0.5 + ), + }, + }, + }), state: { active: { default: { @@ -95,10 +94,9 @@ export default function picker(colorScheme: ColorScheme): any { 0.5 ), }, - } - } - } - ), + }, + }, + }), inputEditor, emptyInputEditor, diff --git a/styles/src/styleTree/projectPanel.ts b/styles/src/styleTree/projectPanel.ts index 2c94a51dba..6bec951288 100644 --- a/styles/src/styleTree/projectPanel.ts +++ b/styles/src/styleTree/projectPanel.ts @@ -43,7 +43,7 @@ export default function projectPanel(colorScheme: ColorScheme) { }, clicked: { background: background(layer, "variant", "pressed"), - } + }, }, }) @@ -52,7 +52,7 @@ export default function projectPanel(colorScheme: ColorScheme) { state: { active: interactive({ base: { - ...default_entry + ...default_entry, }, state: { default: { @@ -66,9 +66,8 @@ export default function projectPanel(colorScheme: ColorScheme) { }, }, }), - } - } - ) + }, + }) return { openProjectButton: interactive({ @@ -99,7 +98,7 @@ export default function projectPanel(colorScheme: ColorScheme) { ...text(layer, "sans", "default", { size: "sm" }), background: background(layer, "pressed"), border: border(layer, "active"), - } + }, }, }), background: background(layer), diff --git a/styles/src/styleTree/search.ts b/styles/src/styleTree/search.ts index 40816e673c..b471e6cbda 100644 --- a/styles/src/styleTree/search.ts +++ b/styles/src/styleTree/search.ts @@ -37,36 +37,35 @@ export default function search(colorScheme: ColorScheme) { // TODO: Add an activeMatchBackground on the rust side to differentiate between active and inactive matchBackground: withOpacity(foreground(layer, "accent"), 0.4), optionButton: toggleable({ - base: - interactive({ - base: { - ...text(layer, "mono", "on"), - background: background(layer, "on"), - cornerRadius: 6, - border: border(layer, "on"), - margin: { - right: 4, - }, - padding: { - bottom: 2, - left: 10, - right: 10, - top: 2, - }, + base: interactive({ + base: { + ...text(layer, "mono", "on"), + background: background(layer, "on"), + cornerRadius: 6, + border: border(layer, "on"), + margin: { + right: 4, }, - state: { - hovered: { - ...text(layer, "mono", "on", "hovered"), - background: background(layer, "on", "hovered"), - border: border(layer, "on", "hovered"), - }, - clicked: { - ...text(layer, "mono", "on", "pressed"), - background: background(layer, "on", "pressed"), - border: border(layer, "on", "pressed"), - }, + padding: { + bottom: 2, + left: 10, + right: 10, + top: 2, }, - }), + }, + state: { + hovered: { + ...text(layer, "mono", "on", "hovered"), + background: background(layer, "on", "hovered"), + border: border(layer, "on", "hovered"), + }, + clicked: { + ...text(layer, "mono", "on", "pressed"), + background: background(layer, "on", "pressed"), + border: border(layer, "on", "pressed"), + }, + }, + }), state: { active: { default: { @@ -78,10 +77,9 @@ export default function search(colorScheme: ColorScheme) { clicked: { ...text(layer, "mono", "accent", "pressed"), }, - } - } - } - ), + }, + }, + }), editor, invalidEditor: { ...editor, diff --git a/styles/src/styleTree/statusBar.ts b/styles/src/styleTree/statusBar.ts index 636da15bad..339e2e40cf 100644 --- a/styles/src/styleTree/statusBar.ts +++ b/styles/src/styleTree/statusBar.ts @@ -108,25 +108,24 @@ export default function statusBar(colorScheme: ColorScheme) { groupBottom: {}, groupRight: {}, button: toggleable({ - base: - interactive({ - base: { - ...statusContainer, - iconSize: 16, - iconColor: foreground(layer, "variant"), - label: { - margin: { left: 6 }, - ...text(layer, "sans", { size: "sm" }), - }, + base: interactive({ + base: { + ...statusContainer, + iconSize: 16, + iconColor: foreground(layer, "variant"), + label: { + margin: { left: 6 }, + ...text(layer, "sans", { size: "sm" }), }, - state: { - hovered: { - iconColor: foreground(layer, "hovered"), - background: background(layer, "variant"), - }, + }, + state: { + hovered: { + iconColor: foreground(layer, "hovered"), + background: background(layer, "variant"), }, - }), state: - { + }, + }), + state: { active: { default: { iconColor: foreground(layer, "active"), @@ -140,11 +139,9 @@ export default function statusBar(colorScheme: ColorScheme) { iconColor: foreground(layer, "pressed"), background: background(layer, "pressed"), }, - - } - } - } - ), + }, + }, + }), badge: { cornerRadius: 3, padding: 2, diff --git a/styles/src/styleTree/tabBar.ts b/styles/src/styleTree/tabBar.ts index 85291c9edb..af35a8fef4 100644 --- a/styles/src/styleTree/tabBar.ts +++ b/styles/src/styleTree/tabBar.ts @@ -89,24 +89,22 @@ export default function tabBar(colorScheme: ColorScheme) { }, draggedTab, paneButton: toggleable({ - base: - interactive({ - base: { - color: foreground(layer, "variant"), - iconWidth: 12, - buttonWidth: activePaneActiveTab.height, + base: interactive({ + base: { + color: foreground(layer, "variant"), + iconWidth: 12, + buttonWidth: activePaneActiveTab.height, + }, + state: { + hovered: { + color: foreground(layer, "hovered"), }, - state: { - hovered: { - color: foreground(layer, "hovered"), - }, - clicked: { - color: foreground(layer, "pressed"), - }, + clicked: { + color: foreground(layer, "pressed"), }, - }), - state: - { + }, + }), + state: { active: { default: { color: foreground(layer, "accent"), @@ -117,10 +115,9 @@ export default function tabBar(colorScheme: ColorScheme) { clicked: { color: foreground(layer, "pressed"), }, - } - } - } - ), + }, + }, + }), paneButtonContainer: { background: tab.background, border: { diff --git a/styles/src/styleTree/toolbarDropdownMenu.ts b/styles/src/styleTree/toolbarDropdownMenu.ts index 3837f5e1a4..d82e5f1cde 100644 --- a/styles/src/styleTree/toolbarDropdownMenu.ts +++ b/styles/src/styleTree/toolbarDropdownMenu.ts @@ -19,7 +19,7 @@ export default function dropdownMenu(colorScheme: ColorScheme) { secondaryTextSpacing: 10, padding: { left: 8, right: 8, top: 2, bottom: 2 }, cornerRadius: 6, - background: background(layer, "on") + background: background(layer, "on"), }, state: { hovered: { @@ -35,21 +35,20 @@ export default function dropdownMenu(colorScheme: ColorScheme) { padding: { left: 8, right: 8, top: 8, bottom: 8 }, }, item: toggleable({ - base: - interactive({ - base: { - ...text(layer, "sans", { size: "sm" }), - secondaryTextSpacing: 10, - secondaryText: text(layer, "sans", { size: "sm" }), - padding: { left: 18, right: 18, top: 2, bottom: 2 }, + base: interactive({ + base: { + ...text(layer, "sans", { size: "sm" }), + secondaryTextSpacing: 10, + secondaryText: text(layer, "sans", { size: "sm" }), + padding: { left: 18, right: 18, top: 2, bottom: 2 }, + }, + state: { + hovered: { + background: background(layer, "hovered"), + ...text(layer, "sans", "hovered", { size: "sm" }), }, - state: { - hovered: { - background: background(layer, "hovered"), - ...text(layer, "sans", "hovered", { size: "sm" }), - }, - }, - }), + }, + }), state: { active: { default: { @@ -58,9 +57,8 @@ export default function dropdownMenu(colorScheme: ColorScheme) { hovered: { background: background(layer, "hovered"), }, - } - } - } - ), + }, + }, + }), } } diff --git a/styles/src/styleTree/workspace.ts b/styles/src/styleTree/workspace.ts index d835dfe3a1..bd14a3af72 100644 --- a/styles/src/styleTree/workspace.ts +++ b/styles/src/styleTree/workspace.ts @@ -18,37 +18,36 @@ export default function workspace(colorScheme: ColorScheme) { const isLight = colorScheme.isLight const itemSpacing = 8 const titlebarButton = toggleable({ - base: - interactive({ - base: { - cornerRadius: 6, - padding: { - top: 1, - bottom: 1, - left: 8, - right: 8, - }, - ...text(layer, "sans", "variant", { size: "xs" }), - background: background(layer, "variant"), - border: border(layer), + base: interactive({ + base: { + cornerRadius: 6, + padding: { + top: 1, + bottom: 1, + left: 8, + right: 8, }, - state: { - hovered: { - ...text(layer, "sans", "variant", "hovered", { - size: "xs", - }), - background: background(layer, "variant", "hovered"), - border: border(layer, "variant", "hovered"), - }, - clicked: { - ...text(layer, "sans", "variant", "pressed", { - size: "xs", - }), - background: background(layer, "variant", "pressed"), - border: border(layer, "variant", "pressed"), - }, + ...text(layer, "sans", "variant", { size: "xs" }), + background: background(layer, "variant"), + border: border(layer), + }, + state: { + hovered: { + ...text(layer, "sans", "variant", "hovered", { + size: "xs", + }), + background: background(layer, "variant", "hovered"), + border: border(layer, "variant", "hovered"), }, - }), + clicked: { + ...text(layer, "sans", "variant", "pressed", { + size: "xs", + }), + background: background(layer, "variant", "pressed"), + border: border(layer, "variant", "pressed"), + }, + }, + }), state: { active: { default: { @@ -56,10 +55,9 @@ export default function workspace(colorScheme: ColorScheme) { background: background(layer, "variant", "active"), border: border(layer, "variant", "active"), }, - } - } - } - ) + }, + }, + }) const avatarWidth = 18 const avatarOuterWidth = avatarWidth + 4 const followerAvatarWidth = 14 @@ -275,25 +273,24 @@ export default function workspace(colorScheme: ColorScheme) { }, }), toggleContactsButton: toggleable({ - base: - interactive({ - base: { - margin: { left: itemSpacing }, - cornerRadius: 6, - color: foreground(layer, "variant"), - iconWidth: 14, - buttonWidth: 20, + base: interactive({ + base: { + margin: { left: itemSpacing }, + cornerRadius: 6, + color: foreground(layer, "variant"), + iconWidth: 14, + buttonWidth: 20, + }, + state: { + clicked: { + background: background(layer, "variant", "pressed"), }, - state: { - clicked: { - background: background(layer, "variant", "pressed"), - }, - hovered: { - background: background(layer, "variant", "hovered"), - }, + hovered: { + background: background(layer, "variant", "hovered"), }, - }), state: - { + }, + }), + state: { active: { default: { background: background(layer, "on", "default"), @@ -303,11 +300,10 @@ export default function workspace(colorScheme: ColorScheme) { }, clicked: { background: background(layer, "on", "pressed"), - } - } - } - } - ), + }, + }, + }, + }), userMenuButton: merge(titlebarButton, { inactive: { default: { From cc027dc626c6ec06d2e0106cbf04f8ad4bb996d4 Mon Sep 17 00:00:00 2001 From: "Joseph T. Lyons" Date: Wed, 21 Jun 2023 13:59:07 -0400 Subject: [PATCH 56/56] v0.93.x dev --- Cargo.lock | 2 +- crates/zed/Cargo.toml | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/Cargo.lock b/Cargo.lock index a4b12223e5..24477edb7a 100644 --- a/Cargo.lock +++ b/Cargo.lock @@ -8809,7 +8809,7 @@ dependencies = [ [[package]] name = "zed" -version = "0.92.0" +version = "0.93.0" dependencies = [ "activity_indicator", "ai", diff --git a/crates/zed/Cargo.toml b/crates/zed/Cargo.toml index d8e47d1c3e..69da1fef5d 100644 --- a/crates/zed/Cargo.toml +++ b/crates/zed/Cargo.toml @@ -3,7 +3,7 @@ authors = ["Nathan Sobo "] description = "The fast, collaborative code editor." edition = "2021" name = "zed" -version = "0.92.0" +version = "0.93.0" publish = false [lib]