From 2ae629e2be2ecd6004673020f0195b5939bab729 Mon Sep 17 00:00:00 2001 From: somebodyawesome-dev Date: Wed, 26 Jun 2024 20:03:18 +0100 Subject: [PATCH 1/6] corrected --nlux-ChatRoom--Padding values to match figma --- packages/css/themes/src/dev/layout.css | 2 +- packages/css/themes/src/luna/layout.css | 2 +- packages/css/themes/src/nova/layout.css | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/css/themes/src/dev/layout.css b/packages/css/themes/src/dev/layout.css index d29a36be..6e90d33f 100644 --- a/packages/css/themes/src/dev/layout.css +++ b/packages/css/themes/src/dev/layout.css @@ -33,7 +33,7 @@ --nlux-ChatRoom--FontFamily: 'Merienda', cursive; --nlux-ChatRoom--FontSize: 16px; - --nlux-ChatRoom--Padding: 10px; + --nlux-ChatRoom--Padding: 20px; --nlux-ChatRoom--BorderRadius: 8px; --nlux-ChatRoom--BorderWidth: 5px; diff --git a/packages/css/themes/src/luna/layout.css b/packages/css/themes/src/luna/layout.css index 7eec47a2..5cf95590 100644 --- a/packages/css/themes/src/luna/layout.css +++ b/packages/css/themes/src/luna/layout.css @@ -39,7 +39,7 @@ --nlux-ChatRoom--FontFamily: var(--nlux-luna--FontFamily); --nlux-ChatRoom--FontSize: 16px; - --nlux-ChatRoom--Padding: 10px; + --nlux-ChatRoom--Padding: 20px; --nlux-ChatRoom--BorderRadius: var(--nlux-luna--BorderRadius); --nlux-ChatRoom--BorderWidth: var(--nlux-luna--BorderWidth); diff --git a/packages/css/themes/src/nova/layout.css b/packages/css/themes/src/nova/layout.css index 50d646e0..6fe5efee 100644 --- a/packages/css/themes/src/nova/layout.css +++ b/packages/css/themes/src/nova/layout.css @@ -38,7 +38,7 @@ --nlux-ChatRoom--FontFamily: var(--nlux-nova--FontFamily); --nlux-ChatRoom--FontSize: 16px; - --nlux-ChatRoom--Padding: 10px; + --nlux-ChatRoom--Padding: 20px; --nlux-ChatRoom--BorderRadius: 18px; --nlux-ChatRoom--BorderWidth: var(--nlux-nova--BorderWidth); From 8d4fd9ae733bd4ad0d5858066b06447e452894e3 Mon Sep 17 00:00:00 2001 From: somebodyawesome-dev Date: Tue, 2 Jul 2024 23:46:30 +0100 Subject: [PATCH 2/6] added padding variable to particpant info --- packages/css/themes/src/common/components/ChatItem.css | 1 + packages/css/themes/src/common/layout.css | 1 + packages/css/themes/src/dev/layout.css | 1 + packages/css/themes/src/luna/layout.css | 1 + packages/css/themes/src/nova/layout.css | 1 + 5 files changed, 5 insertions(+) diff --git a/packages/css/themes/src/common/components/ChatItem.css b/packages/css/themes/src/common/components/ChatItem.css index 77473698..66b3ddc2 100644 --- a/packages/css/themes/src/common/components/ChatItem.css +++ b/packages/css/themes/src/common/components/ChatItem.css @@ -24,6 +24,7 @@ flex-direction: row; align-items: center; justify-content: center; + padding: var(--nlux-comp-chatItem-participantInfo--pdng) ; gap: var(--nlux-comp-chatItem-participantInfo--gap); > .nlux-comp-chatItem-participantName { diff --git a/packages/css/themes/src/common/layout.css b/packages/css/themes/src/common/layout.css index 9502467b..ecafdbcf 100644 --- a/packages/css/themes/src/common/layout.css +++ b/packages/css/themes/src/common/layout.css @@ -35,6 +35,7 @@ /** Chat item participant info: Avatar + Name */ --nlux-comp-chatItem-participantInfo--gap: var(--nlux-ChatItem-ParticipantInfo--Gap, 10px); /* Gap between avatar and name */ + --nlux-comp-chatItem-participantInfo--pdng: var(--nlux-ChatItem-ParticipantInfo--Padding, 0); /** Chat item participant name */ --nlux-prtInfo-prtNm--ftSz: var(--nlux-ChatItem-ParticipantName--FontSize); diff --git a/packages/css/themes/src/dev/layout.css b/packages/css/themes/src/dev/layout.css index 6e90d33f..38eb4e67 100644 --- a/packages/css/themes/src/dev/layout.css +++ b/packages/css/themes/src/dev/layout.css @@ -50,6 +50,7 @@ /** 👇 Participant info in chat */ --nlux-ChatItem-ParticipantInfo--Gap: 12px; + --nlux-ChatItem-ParticipantInfo--Padding: 0px; --nlux-ChatItem-ParticipantName--FontSize: 20px; --nlux-ChatItem-ParticipantName--FontWeight: 700; diff --git a/packages/css/themes/src/luna/layout.css b/packages/css/themes/src/luna/layout.css index 5cf95590..2a79938d 100644 --- a/packages/css/themes/src/luna/layout.css +++ b/packages/css/themes/src/luna/layout.css @@ -51,6 +51,7 @@ /** Chat item participant info */ --nlux-ChatItem-ParticipantInfo--Gap: var(--nlux-luna--FlexGap); + --nlux-ChatItem-ParticipantInfo--Padding: 0px; --nlux-ChatItem-ParticipantName--FontSize: 16px; --nlux-ChatItem-ParticipantName--FontWeight: 700; diff --git a/packages/css/themes/src/nova/layout.css b/packages/css/themes/src/nova/layout.css index 6fe5efee..d1d3ccf7 100644 --- a/packages/css/themes/src/nova/layout.css +++ b/packages/css/themes/src/nova/layout.css @@ -50,6 +50,7 @@ /** Chat item participant info */ --nlux-ChatItem-ParticipantInfo--Gap: var(--nlux-nova--FlexGap); + --nlux-ChatItem-ParticipantInfo--Padding: 0px; --nlux-ChatItem-ParticipantName--FontSize: 16px; --nlux-ChatItem-ParticipantName--FontWeight: 700; From cf51d52a0b63c81e43cf64b9e730f9ed255cde82 Mon Sep 17 00:00:00 2001 From: somebodyawesome-dev Date: Tue, 2 Jul 2024 23:59:08 +0100 Subject: [PATCH 3/6] fixed icon's position in code copyButton --- packages/css/themes/src/common/components/Message.css | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/css/themes/src/common/components/Message.css b/packages/css/themes/src/common/components/Message.css index 4a35eee0..a41aad87 100644 --- a/packages/css/themes/src/common/components/Message.css +++ b/packages/css/themes/src/common/components/Message.css @@ -65,6 +65,7 @@ } button.nlux-comp-copyButton { + display: flex; position: absolute; top:5px; right:0; From 480339fbfd25bdc5d42db1b247363caa9135e4b8 Mon Sep 17 00:00:00 2001 From: somebodyawesome-dev Date: Wed, 3 Jul 2024 00:19:25 +0100 Subject: [PATCH 4/6] added openai style theme --- .../css/themes/src/openai/colors-dark.css | 91 +++++++++++++ .../css/themes/src/openai/colors-light.css | 91 +++++++++++++ packages/css/themes/src/openai/font.css | 1 + packages/css/themes/src/openai/icons.css | 26 ++++ packages/css/themes/src/openai/layout.css | 124 ++++++++++++++++++ packages/css/themes/src/openai/main.css | 6 + 6 files changed, 339 insertions(+) create mode 100644 packages/css/themes/src/openai/colors-dark.css create mode 100644 packages/css/themes/src/openai/colors-light.css create mode 100644 packages/css/themes/src/openai/font.css create mode 100644 packages/css/themes/src/openai/icons.css create mode 100644 packages/css/themes/src/openai/layout.css create mode 100644 packages/css/themes/src/openai/main.css diff --git a/packages/css/themes/src/openai/colors-dark.css b/packages/css/themes/src/openai/colors-dark.css new file mode 100644 index 00000000..89f4e2e9 --- /dev/null +++ b/packages/css/themes/src/openai/colors-dark.css @@ -0,0 +1,91 @@ +.nlux-AiChat-root.nlux-theme-nova[data-color-scheme='dark'] { + /** Exceptions box */ + --nlux-Exceptions--BackgroundColor: tomato; + --nlux-Exceptions--BorderColor: darkred; + --nlux-Exceptions--TextColor: white; + + /** Welcome message */ + --nlux-WelcomeMessage-Avatar--BorderColor: transparent; + --nlux-WelcomeMessage-Avatar--BackgroundColor: transparent; + + /** Divider between composer and messages */ + --nlux-ChatRoom-Divider--Color: #71717a; + + /** Conversation loader */ + --nlux-ChatRoom-Loader--Color: #71717a; + + /** Conversation content color */ + --nlux-ChatRoom--BackgroundColor: #212121; + --nlux-ChatRoom--BorderColor: transparent; + --nlux-ChatRoom--TextColor: #ffffff; + + /** Participant info in chat */ + --nlux-ChatItem-ParticipantName--Color: #ffffff; + + /* Human message in chat */ + --nlux-HumanMessage--BackgroundColor: #2F2F2F; + --nlux-HumanMessage--BorderColor: transparent; + --nlux-HumanMessage--TextColor: #ffffff; + + /** AI message in chat */ + --nlux-AiMessage--BackgroundColor: #212121; + --nlux-AiMessage--BorderColor: transparent; + --nlux-AiMessage--TextColor: #ffffff; + + /** Prompt input colors */ + --nlux-PromptInput--BackgroundColor: transparent; + --nlux-PromptInput--BorderColor: transparent; + --nlux-PromptInput--TextColor: #2F2F2F; + + --nlux-PromptInput-Active--BackgroundColor: transparent; + --nlux-PromptInput-Active--BorderColor: transparent; + --nlux-PromptInput-Active--TextColor: #ffffff; + + --nlux-PromptInput-Disabled--BackgroundColor: transprent; + --nlux-PromptInput-Disabled--TextColor: transprent; + --nlux-PromptInput-Disabled--BorderColor: transprent; + + --nlux-PromptInput-Placeholder--TextColor: #71717a; + --nlux-PromptInput-Focus-Outline--Color: transparent; + + /** Submit button colors */ + --nlux-SubmitButton--BackgroundColor: transparent; + --nlux-SubmitButton--BorderColor: transparent; + --nlux-SubmitButton--TextColor: #ffffff; + + --nlux-SubmitButton-Active--BackgroundColor: transparent; + --nlux-SubmitButton-Active--BorderColor: transparent; + --nlux-SubmitButton-Active--TextColor: #ffffff; + + --nlux-SubmitButton-Disabled--BackgroundColor: transparent; + --nlux-SubmitButton-Disabled--BorderColor: transparent; + --nlux-SubmitButton-Disabled--TextColor: #71717a; + + --nlux-SubmitButton-Focus-Outline--Color: transparent; + + /** Code block */ + --nlux-CodeBlock--BackgroundColor: #0D0D0D; + --nlux-CodeBlock--BorderColor: transparent; + --nlux-CodeBlock--TextColor: #ffffff; + --nlux-CodeBlock-Hover--BackgroundColor: #0D0D0D; + + /** Code block copy button */ + --nlux-CodeBlock-CopyButton--BackgroundColor: #2F2F2F; + --nlux-CodeBlock-CopyButton--BorderColor: #c5c5c3; + --nlux-CodeBlock-CopyButton--TextColor: #ffffff; + + /** Code block copy button in clicked state */ + --nlux-CodeBlock-CopyButton-Clicked--BackgroundColor: #2F2F2F; + --nlux-CodeBlock-CopyButton-Clicked--BorderColor: #393930; + --nlux-CodeBlock-CopyButton-Clicked--TextColor: #ffffff; + + /** Inline code in markdown */ + --nlux-InlineCode--BackgroundColor: #393930; + --nlux-InlineCode--BorderColor: transparent; + --nlux-InlineCode--TextColor: #ffffff; + + /** Conversation starters */ + --nlux-ConversationStarter--BackgroundColor: var(--nlux-HumanMessage--BackgroundColor); + --nlux-ConversationStarter--BorderColor: transparent; + --nlux-ConversationStarter--TextColor: var(--nlux-HumanMessage--TextColor); +} diff --git a/packages/css/themes/src/openai/colors-light.css b/packages/css/themes/src/openai/colors-light.css new file mode 100644 index 00000000..4f1586a5 --- /dev/null +++ b/packages/css/themes/src/openai/colors-light.css @@ -0,0 +1,91 @@ +.nlux-AiChat-root.nlux-theme-nova[data-color-scheme='light'] { + /** Exceptions box */ + --nlux-Exceptions--BackgroundColor: tomato; + --nlux-Exceptions--BorderColor: darkred; + --nlux-Exceptions--TextColor: white; + + /** Welcome message */ + --nlux-WelcomeMessage-Avatar--BorderColor: transparent; + --nlux-WelcomeMessage-Avatar--BackgroundColor: transparent; + + /** Divider between composer and messages */ + --nlux-ChatRoom-Divider--Color: #71717a; + + /** Conversation loader */ + --nlux-ChatRoom-Loader--Color: #71717a; + + /** Conversation content color */ + --nlux-ChatRoom--BackgroundColor: #ffffff; + --nlux-ChatRoom--BorderColor: transparent; + --nlux-ChatRoom--TextColor: #09090B; + + /** Participant info in chat */ + --nlux-ChatItem-ParticipantName--Color: #09090B; + + /* Human message in chat */ + --nlux-HumanMessage--BackgroundColor: #F4F4F4; + --nlux-HumanMessage--BorderColor: transparent; + --nlux-HumanMessage--TextColor: #000000; + + /** AI message in chat */ + --nlux-AiMessage--BackgroundColor: #FFFFFF; + --nlux-AiMessage--BorderColor: transparent; + --nlux-AiMessage--TextColor: #09090B; + + /** Prompt input colors */ + --nlux-PromptInput--BackgroundColor: transparent; + --nlux-PromptInput--BorderColor: transparent; + --nlux-PromptInput--TextColor: #71717a; + + --nlux-PromptInput-Active--BackgroundColor: transparent; + --nlux-PromptInput-Active--BorderColor: transparent; + --nlux-PromptInput-Active--TextColor: #000000; + + --nlux-PromptInput-Disabled--BackgroundColor: transprent; + --nlux-PromptInput-Disabled--TextColor: #71717A; + --nlux-PromptInput-Disabled--BorderColor: transprent; + + --nlux-PromptInput-Placeholder--TextColor: #b4b4b4; + --nlux-PromptInput-Focus-Outline--Color: transparent; + + /** Submit button colors */ + --nlux-SubmitButton--BackgroundColor: transparent; + --nlux-SubmitButton--BorderColor: transparent; + --nlux-SubmitButton--TextColor: #000000; + + --nlux-SubmitButton-Active--BackgroundColor: transparent; + --nlux-SubmitButton-Active--BorderColor: transparent; + --nlux-SubmitButton-Active--TextColor: #000000; + + --nlux-SubmitButton-Disabled--BackgroundColor: transparent; + --nlux-SubmitButton-Disabled--BorderColor: transparent; + --nlux-SubmitButton-Disabled--TextColor: #b4b4b4; + + --nlux-SubmitButton-Focus-Outline--Color: transparent; + + /** Code block */ + --nlux-CodeBlock--BackgroundColor: #0D0D0D; + --nlux-CodeBlock--BorderColor: transparent; + --nlux-CodeBlock--TextColor: white; + --nlux-CodeBlock-Hover--BackgroundColor: #0D0D0D; + + /** Code block copy button */ + --nlux-CodeBlock-CopyButton--BackgroundColor: #2F2F2F; + --nlux-CodeBlock-CopyButton--BorderColor: #c5c5c3; + --nlux-CodeBlock-CopyButton--TextColor: #ffffff; + + /** Code block copy button in clicked state */ + --nlux-CodeBlock-CopyButton-Clicked--BackgroundColor: #393930; + --nlux-CodeBlock-CopyButton-Clicked--BorderColor: #393930; + --nlux-CodeBlock-CopyButton-Clicked--TextColor: #ffffff; + + /** Inline code in markdown */ + --nlux-InlineCode--BackgroundColor: #fff9d8; + --nlux-InlineCode--BorderColor: transparent; + --nlux-InlineCode--TextColor: black; + + /** Conversation starters */ + --nlux-ConversationStarter--BackgroundColor: var(--nlux-AiMessage--BackgroundColor); + --nlux-ConversationStarter--BorderColor: transparent; + --nlux-ConversationStarter--TextColor: var(--nlux-AiMessage--TextColor); +} diff --git a/packages/css/themes/src/openai/font.css b/packages/css/themes/src/openai/font.css new file mode 100644 index 00000000..be1c58c9 --- /dev/null +++ b/packages/css/themes/src/openai/font.css @@ -0,0 +1 @@ +@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap'); diff --git a/packages/css/themes/src/openai/icons.css b/packages/css/themes/src/openai/icons.css new file mode 100644 index 00000000..f1f7c98f --- /dev/null +++ b/packages/css/themes/src/openai/icons.css @@ -0,0 +1,26 @@ +.nlux-AiChat-root.nlux-theme-nova { + --nlux-send-icon: url('data:image/svg+xml,\ + \ + \ + \ + '); + + --nlux-cancel-icon: url('data:image/svg+xml,\ + \ + \ + \ + \ + \ + \ + '); + + --nlux-copy-icon: url('data:image/svg+xml,\ + \ + \ + \ + '); +} diff --git a/packages/css/themes/src/openai/layout.css b/packages/css/themes/src/openai/layout.css new file mode 100644 index 00000000..d29e09af --- /dev/null +++ b/packages/css/themes/src/openai/layout.css @@ -0,0 +1,124 @@ +.nlux-AiChat-root.nlux-theme-nova { + /** + * Theme-specific local variables. + */ + + --nlux-nova--FontFamily: 'Inter', sans-serif; + --nlux-nova--MonoFontFamily: monospace; + + --nlux-nova--BorderWidth: 0; + --nlux-nova--LineHeight: 1.4; + --nlux-nova--FlexGap: 12px; + + /** + * Definitions and overrides of required theme variables. + */ + + /** Exceptions box */ + --nlux-Exceptions--Padding: 5px; + --nlux-Exceptions--BorderWidth: var(--nlux-nova--BorderWidth); + --nlux-Exceptions--BorderRadius: 12px; + + /** Welcome message */ + --nlux-WelcomeMessage-Avatar--Width: 48px; + --nlux-WelcomeMessage-PersonaName--FontSize: 18px; + --nlux-WelcomeMessage-PersonaName--FontWeight: 600; + --nlux-WelcomeMessage-Text--FontSize: 15px; + --nlux-WelcomeMessage-Text--FontWeight: 400; + --nlux-WelcomeMessage--Gap: 4px; + + /** Divider between conversation and composer */ + --nlux-ChatRoom-Divider--MarginTop: 10px; + --nlux-ChatRoom-Divider--MarginBottom: 10px; + --nlux-ChatRoom-Divider--BorderWidth: 1px; + + /** Chat-room container */ + --nlux-ChatRoom--LineHeight: var(--nlux-nova--LineHeight); + --nlux-ChatRoom--FontWeight: 400; + --nlux-ChatRoom--FontFamily: var(--nlux-nova--FontFamily); + --nlux-ChatRoom--FontSize: 16px; + + --nlux-ChatRoom--Padding: 20px; + --nlux-ChatRoom--BorderRadius: 18px; + --nlux-ChatRoom--BorderWidth: var(--nlux-nova--BorderWidth); + + /** Chat-room loader */ + --nlux-ChatRoom-Loader--Width: 25px; + + /** Chat item */ + --nlux-ChatItem--AlignItems: flex-start; + + /** Chat item participant info */ + --nlux-ChatItem-ParticipantInfo--Gap: var(--nlux-nova--FlexGap); + --nlux-ChatItem-ParticipantInfo--Padding: 10px 0px; + --nlux-ChatItem-ParticipantName--FontSize: 16px; + --nlux-ChatItem-ParticipantName--FontWeight: 700; + + /** Chat item avatar */ + --nlux-ChatItem-Avatar--Width: 30px; + --nlux-ChatItem-Avatar--BorderRadius: 50%; + --nlux-ChatItem-Avatar--BorderWidth: var(--nlux-nova--BorderWidth); + + /** Chat item message */ + --nlux-ChatItem-Message--Gap: var(--nlux-nova--FlexGap); /** Gap between elements within message */ + + /** Chat item message in bubbles display layout */ + --nlux-ChatItem-Message-BubbleLayout--BorderWidth: 0px; + --nlux-ChatItem-Message-BubbleLayout--BorderRadius: 12px; + --nlux-ChatItem-Message-BubbleLayout--PaddingTopBottom: 10px; + --nlux-ChatItem-Message-BubbleLayout--PaddingLeftRight: 15px; + + /** Chat item message in list display layout */ + --nlux-ChatItem-Message-ListLayout--BorderWidth: 0px; + --nlux-ChatItem-Message-ListLayout--BorderRadius: 12px; + --nlux-ChatItem-Message-ListLayout--PaddingTopBottom: 5px; + --nlux-ChatItem-Message-ListLayout--PaddingLeftRight: 10px; + --nlux-ChatItem-Message-ListLayout--MarginTop: -10px; + --nlux-ChatItem-Message-ListLayout--MarginBottom: 0px; + --nlux-ChatItem-Message-ListLayout--MarginLeft: 32px; + --nlux-ChatItem-Message-ListLayout--MarginRight: 0px; + + /** Chat item message code block */ + --nlux-CodeBlock--FontSize: 14px; + --nlux-CodeBlock--FontFamily: 'Courier New', monospace; + --nlux-CodeBlock--Padding: 10px; + --nlux-CodeBlock--BorderWidth: var(--nlux-nova--BorderWidth); + --nlux-CodeBlock--BorderRadius: 6px; + + /** Code block copy button */ + --nlux-CodeBlock-CopyButton--Width: 22px; + --nlux-CodeBlock-CopyButton--Height: 22px; + --nlux-CodeBlock-CopyButton--Padding: 2px; + --nlux-CodeBlock-CopyButton--BorderRadius: 4px; + --nlux-CodeBlock-CopyButton--BorderWidth: var(--nlux-nova--BorderWidth); + + /** Inline code in markdown */ + --nlux-InlineCode--BorderRadius: 6px; + --nlux-InlineCode--BorderWidth: 2px; + --nlux-InlineCode--Padding: 0 2px; + --nlux-InlineCode--FontSize: 18px; + + /** Composer */ + --nlux-Composer--Gap: 5px; + + /** Submit button */ + --nlux-SubmitButton--Width: 65px; + --nlux-SubmitButton--BorderWidth: var(--nlux-nova--BorderWidth); + --nlux-SubmitButton--BorderRadius: 12px; + --nlux-SubmitButton-Focus-Outline--Width: 2px; + + /** Composer input */ + --nlux-PromptInput--FontFamily: var(--nlux-nova--FontFamily); + --nlux-PromptInput--FontSize: 16px; + --nlux-PromptInput--BorderWidth: 0; + --nlux-PromptInput--BorderRadius: 12px; + --nlux-PromptInput-Focus-Outline--Width: 2px; + + /** Conversation starters */ + --nlux-ConversationStarter--Padding: 0 10px; + --nlux-ConversationStarter--BorderRadius: 6px; + --nlux-ConversationStarter--BorderWidth: 0; + --nlux-ConversationStarter--Gap: var(--nlux-nova--FlexGap); + --nlux-ConversationStarter--Width: 160px; + --nlux-ConversationStarter--Height: 101px; +} diff --git a/packages/css/themes/src/openai/main.css b/packages/css/themes/src/openai/main.css new file mode 100644 index 00000000..e5d1aa3c --- /dev/null +++ b/packages/css/themes/src/openai/main.css @@ -0,0 +1,6 @@ +@import './font.css'; +@import './colors-light.css'; +@import './colors-dark.css'; +@import './layout.css'; +@import './icons.css'; +@import '../common/main.css'; From d5cb8d5aa00b7e61e973ddb829a7c0c7233336cf Mon Sep 17 00:00:00 2001 From: somebodyawesome-dev Date: Wed, 3 Jul 2024 23:39:43 +0100 Subject: [PATCH 5/6] added variable for background color property to composer container --- packages/css/themes/src/common/colors.css | 2 ++ packages/css/themes/src/common/structure.css | 2 ++ packages/css/themes/src/dev/colors.css | 3 +++ packages/css/themes/src/luna/colors-dark.css | 3 +++ packages/css/themes/src/luna/colors-light.css | 3 +++ packages/css/themes/src/nova/colors-dark.css | 3 +++ packages/css/themes/src/nova/colors-light.css | 3 +++ packages/css/themes/src/openai/colors-dark.css | 3 +++ packages/css/themes/src/openai/colors-light.css | 3 +++ 9 files changed, 25 insertions(+) diff --git a/packages/css/themes/src/common/colors.css b/packages/css/themes/src/common/colors.css index 6737035e..c7b26c60 100644 --- a/packages/css/themes/src/common/colors.css +++ b/packages/css/themes/src/common/colors.css @@ -35,6 +35,8 @@ --nlux-aiMsg--bgClr: var(--nlux-AiMessage--BackgroundColor); --nlux-aiMsg--brdClr: var(--nlux-AiMessage--BorderColor); --nlux-aiMsg--txtClr: var(--nlux-AiMessage--TextColor); + /** Prompt container */ + --nlux-cmp-cnt--bgClr: var(--nlux-composer-container--BackgroundColor, transparent); /** Prompt input colors */ --nlux-prmInp--bgClr: var(--nlux-PromptInput--BackgroundColor); diff --git a/packages/css/themes/src/common/structure.css b/packages/css/themes/src/common/structure.css index fab73039..069ffca1 100644 --- a/packages/css/themes/src/common/structure.css +++ b/packages/css/themes/src/common/structure.css @@ -44,6 +44,8 @@ flex-direction: row; align-items: stretch; + background-color: var(--nlux-cmp-cnt--bgClr); + > .nlux-comp-composer { width: 100%; } diff --git a/packages/css/themes/src/dev/colors.css b/packages/css/themes/src/dev/colors.css index f69089b6..c2c4578d 100644 --- a/packages/css/themes/src/dev/colors.css +++ b/packages/css/themes/src/dev/colors.css @@ -41,6 +41,9 @@ /** 👇 Divider between composer and messages */ --nlux-ChatRoom-Divider--Color: red; + /** 👇 Prompt container */ + --nlux-composer-container--BackgroundColor: transparent; + /** 👇 Prompt input colors */ --nlux-PromptInput--BackgroundColor: honeydew; --nlux-PromptInput--BorderColor: mediumseagreen; diff --git a/packages/css/themes/src/luna/colors-dark.css b/packages/css/themes/src/luna/colors-dark.css index 750151a4..f215395c 100644 --- a/packages/css/themes/src/luna/colors-dark.css +++ b/packages/css/themes/src/luna/colors-dark.css @@ -25,6 +25,9 @@ --nlux-ChatRoom--BorderColor: transparent; --nlux-ChatRoom--TextColor: #ffffff; + /** Prompt container */ + --nlux-composer-container--BackgroundColor: transparent; + /** Participant info in chat */ --nlux-ChatItem-ParticipantName--Color: #E0E0E0; diff --git a/packages/css/themes/src/luna/colors-light.css b/packages/css/themes/src/luna/colors-light.css index 8df0cc5c..1a679bd3 100644 --- a/packages/css/themes/src/luna/colors-light.css +++ b/packages/css/themes/src/luna/colors-light.css @@ -38,6 +38,9 @@ --nlux-AiMessage--BorderColor: #dde5e2; --nlux-AiMessage--TextColor: #18210c; + /** Prompt container */ + --nlux-composer-container--BackgroundColor: transparent; + /** Prompt input colors */ --nlux-PromptInput--BackgroundColor: #ffffff; --nlux-PromptInput--BorderColor: #c5d7c9; diff --git a/packages/css/themes/src/nova/colors-dark.css b/packages/css/themes/src/nova/colors-dark.css index 74cf742c..a901c656 100644 --- a/packages/css/themes/src/nova/colors-dark.css +++ b/packages/css/themes/src/nova/colors-dark.css @@ -32,6 +32,9 @@ --nlux-AiMessage--BorderColor: transparent; --nlux-AiMessage--TextColor: #ffffff; + /** Prompt container */ + --nlux-composer-container--BackgroundColor: transparent; + /** Prompt input colors */ --nlux-PromptInput--BackgroundColor: transparent; --nlux-PromptInput--BorderColor: transparent; diff --git a/packages/css/themes/src/nova/colors-light.css b/packages/css/themes/src/nova/colors-light.css index fdd25933..33d6708c 100644 --- a/packages/css/themes/src/nova/colors-light.css +++ b/packages/css/themes/src/nova/colors-light.css @@ -32,6 +32,9 @@ --nlux-AiMessage--BorderColor: transparent; --nlux-AiMessage--TextColor: #09090B; + /** Prompt container */ + --nlux-composer-container--BackgroundColor: transparent; + /** Prompt input colors */ --nlux-PromptInput--BackgroundColor: transparent; --nlux-PromptInput--BorderColor: transparent; diff --git a/packages/css/themes/src/openai/colors-dark.css b/packages/css/themes/src/openai/colors-dark.css index 89f4e2e9..1350533e 100644 --- a/packages/css/themes/src/openai/colors-dark.css +++ b/packages/css/themes/src/openai/colors-dark.css @@ -32,6 +32,9 @@ --nlux-AiMessage--BorderColor: transparent; --nlux-AiMessage--TextColor: #ffffff; + /** Prompt container */ + --nlux-composer-container--BackgroundColor: transparent; + /** Prompt input colors */ --nlux-PromptInput--BackgroundColor: transparent; --nlux-PromptInput--BorderColor: transparent; diff --git a/packages/css/themes/src/openai/colors-light.css b/packages/css/themes/src/openai/colors-light.css index 4f1586a5..7d7bea8d 100644 --- a/packages/css/themes/src/openai/colors-light.css +++ b/packages/css/themes/src/openai/colors-light.css @@ -32,6 +32,9 @@ --nlux-AiMessage--BorderColor: transparent; --nlux-AiMessage--TextColor: #09090B; + /** Prompt container */ + --nlux-composer-container--BackgroundColor: transparent; + /** Prompt input colors */ --nlux-PromptInput--BackgroundColor: transparent; --nlux-PromptInput--BorderColor: transparent; From c44474beca779725757c5ae64dd3e5724e851e3c Mon Sep 17 00:00:00 2001 From: somebodyawesome-dev Date: Thu, 4 Jul 2024 00:28:56 +0100 Subject: [PATCH 6/6] introduced new claude theme --- .../css/themes/src/claude/colors-dark.css | 94 +++++++++++++ .../css/themes/src/claude/colors-light.css | 94 +++++++++++++ packages/css/themes/src/claude/font.css | 1 + packages/css/themes/src/claude/icons.css | 26 ++++ packages/css/themes/src/claude/layout.css | 124 ++++++++++++++++++ packages/css/themes/src/claude/main.css | 6 + 6 files changed, 345 insertions(+) create mode 100644 packages/css/themes/src/claude/colors-dark.css create mode 100644 packages/css/themes/src/claude/colors-light.css create mode 100644 packages/css/themes/src/claude/font.css create mode 100644 packages/css/themes/src/claude/icons.css create mode 100644 packages/css/themes/src/claude/layout.css create mode 100644 packages/css/themes/src/claude/main.css diff --git a/packages/css/themes/src/claude/colors-dark.css b/packages/css/themes/src/claude/colors-dark.css new file mode 100644 index 00000000..3c819d13 --- /dev/null +++ b/packages/css/themes/src/claude/colors-dark.css @@ -0,0 +1,94 @@ +.nlux-AiChat-root.nlux-theme-nova[data-color-scheme='dark'] { + /** Exceptions box */ + --nlux-Exceptions--BackgroundColor: tomato; + --nlux-Exceptions--BorderColor: darkred; + --nlux-Exceptions--TextColor: white; + + /** Welcome message */ + --nlux-WelcomeMessage-Avatar--BorderColor: transparent; + --nlux-WelcomeMessage-Avatar--BackgroundColor: transparent; + + /** Divider between composer and messages */ + --nlux-ChatRoom-Divider--Color: #71717a; + + /** Conversation loader */ + --nlux-ChatRoom-Loader--Color: #71717a; + + /** Conversation content color */ + --nlux-ChatRoom--BackgroundColor: #2D2D2A; + --nlux-ChatRoom--BorderColor: transparent; + --nlux-ChatRoom--TextColor: #ffffff; + + /** Participant info in chat */ + --nlux-ChatItem-ParticipantName--Color: #ffffff; + + /* Human message in chat */ + --nlux-HumanMessage--BackgroundColor: #1A1915; + --nlux-HumanMessage--BorderColor: transparent; + --nlux-HumanMessage--TextColor: #ffffff; + + /** AI message in chat */ + --nlux-AiMessage--BackgroundColor: #363634; + --nlux-AiMessage--BorderColor: transparent; + --nlux-AiMessage--TextColor: #ffffff; + + /** Prompt container */ + --nlux-composer-container--BackgroundColor: #393937; + + /** Prompt input colors */ + --nlux-PromptInput--BackgroundColor: transparent; + --nlux-PromptInput--BorderColor: transparent; + --nlux-PromptInput--TextColor: #ffffff; + + --nlux-PromptInput-Active--BackgroundColor: transparent; + --nlux-PromptInput-Active--BorderColor: transparent; + --nlux-PromptInput-Active--TextColor: #ffffff; + + --nlux-PromptInput-Disabled--BackgroundColor: transprent; + --nlux-PromptInput-Disabled--TextColor: transprent; + --nlux-PromptInput-Disabled--BorderColor: transprent; + + --nlux-PromptInput-Placeholder--TextColor: #71717a; + --nlux-PromptInput-Focus-Outline--Color: transparent; + + /** Submit button colors */ + --nlux-SubmitButton--BackgroundColor: transparent; + --nlux-SubmitButton--BorderColor: transparent; + --nlux-SubmitButton--TextColor: #ffffff; + + --nlux-SubmitButton-Active--BackgroundColor: transparent; + --nlux-SubmitButton-Active--BorderColor: transparent; + --nlux-SubmitButton-Active--TextColor: #ffffff; + + --nlux-SubmitButton-Disabled--BackgroundColor: transparent; + --nlux-SubmitButton-Disabled--BorderColor: transparent; + --nlux-SubmitButton-Disabled--TextColor: #71717a; + + --nlux-SubmitButton-Focus-Outline--Color: transparent; + + /** Code block */ + --nlux-CodeBlock--BackgroundColor: #282C34; + --nlux-CodeBlock--BorderColor: transparent; + --nlux-CodeBlock--TextColor: #ffffff; + --nlux-CodeBlock-Hover--BackgroundColor: #282C34; + + /** Code block copy button */ + --nlux-CodeBlock-CopyButton--BackgroundColor: #21201C; + --nlux-CodeBlock-CopyButton--BorderColor: #c5c5c3; + --nlux-CodeBlock-CopyButton--TextColor: #ffffff; + + /** Code block copy button in clicked state */ + --nlux-CodeBlock-CopyButton-Clicked--BackgroundColor: #21201C; + --nlux-CodeBlock-CopyButton-Clicked--BorderColor: #393930; + --nlux-CodeBlock-CopyButton-Clicked--TextColor: #ffffff; + + /** Inline code in markdown */ + --nlux-InlineCode--BackgroundColor: #393930; + --nlux-InlineCode--BorderColor: transparent; + --nlux-InlineCode--TextColor: #ffffff; + + /** Conversation starters */ + --nlux-ConversationStarter--BackgroundColor: var(--nlux-HumanMessage--BackgroundColor); + --nlux-ConversationStarter--BorderColor: transparent; + --nlux-ConversationStarter--TextColor: var(--nlux-HumanMessage--TextColor); +} diff --git a/packages/css/themes/src/claude/colors-light.css b/packages/css/themes/src/claude/colors-light.css new file mode 100644 index 00000000..1e3bf8bb --- /dev/null +++ b/packages/css/themes/src/claude/colors-light.css @@ -0,0 +1,94 @@ +.nlux-AiChat-root.nlux-theme-nova[data-color-scheme='light'] { + /** Exceptions box */ + --nlux-Exceptions--BackgroundColor: tomato; + --nlux-Exceptions--BorderColor: darkred; + --nlux-Exceptions--TextColor: white; + + /** Welcome message */ + --nlux-WelcomeMessage-Avatar--BorderColor: transparent; + --nlux-WelcomeMessage-Avatar--BackgroundColor: transparent; + + /** Divider between composer and messages */ + --nlux-ChatRoom-Divider--Color: #B9B5AB; + + /** Conversation loader */ + --nlux-ChatRoom-Loader--Color: #71717a; + + /** Conversation content color */ + --nlux-ChatRoom--BackgroundColor: #F3F1EB; + --nlux-ChatRoom--BorderColor: transparent; + --nlux-ChatRoom--TextColor: #09090B; + + /** Participant info in chat */ + --nlux-ChatItem-ParticipantName--Color: #09090B; + + /* Human message in chat */ + --nlux-HumanMessage--BackgroundColor: #E4DFCF; + --nlux-HumanMessage--BorderColor: transparent; + --nlux-HumanMessage--TextColor: #000000; + + /** AI message in chat */ + --nlux-AiMessage--BackgroundColor: #F7F7F5; + --nlux-AiMessage--BorderColor: transparent; + --nlux-AiMessage--TextColor: #09090B; + + /** Prompt container */ + --nlux-composer-container--BackgroundColor: #F8F8F7; + + /** Prompt input colors */ + --nlux-PromptInput--BackgroundColor: transparent; + --nlux-PromptInput--BorderColor: transparent; + --nlux-PromptInput--TextColor: #71717a; + + --nlux-PromptInput-Active--BackgroundColor: transparent; + --nlux-PromptInput-Active--BorderColor: transparent; + --nlux-PromptInput-Active--TextColor: #000000; + + --nlux-PromptInput-Disabled--BackgroundColor: transprent; + --nlux-PromptInput-Disabled--TextColor: #71717A; + --nlux-PromptInput-Disabled--BorderColor: transprent; + + --nlux-PromptInput-Placeholder--TextColor: #b4b4b4; + --nlux-PromptInput-Focus-Outline--Color: transparent; + + /** Submit button colors */ + --nlux-SubmitButton--BackgroundColor: transparent; + --nlux-SubmitButton--BorderColor: transparent; + --nlux-SubmitButton--TextColor: #BA5B38; + + --nlux-SubmitButton-Active--BackgroundColor: transparent; + --nlux-SubmitButton-Active--BorderColor: transparent; + --nlux-SubmitButton-Active--TextColor: #C96442; + + --nlux-SubmitButton-Disabled--BackgroundColor: transparent; + --nlux-SubmitButton-Disabled--BorderColor: transparent; + --nlux-SubmitButton-Disabled--TextColor: #b4b4b4; + + --nlux-SubmitButton-Focus-Outline--Color: transparent; + + /** Code block */ + --nlux-CodeBlock--BackgroundColor: #282C34; + --nlux-CodeBlock--BorderColor: transparent; + --nlux-CodeBlock--TextColor: white; + --nlux-CodeBlock-Hover--BackgroundColor: #282C34; + + /** Code block copy button */ + --nlux-CodeBlock-CopyButton--BackgroundColor: #E8E5D8; + --nlux-CodeBlock-CopyButton--BorderColor: #c5c5c3; + --nlux-CodeBlock-CopyButton--TextColor: #000000; + + /** Code block copy button in clicked state */ + --nlux-CodeBlock-CopyButton-Clicked--BackgroundColor: #393930; + --nlux-CodeBlock-CopyButton-Clicked--BorderColor: #393930; + --nlux-CodeBlock-CopyButton-Clicked--TextColor: #ffffff; + + /** Inline code in markdown */ + --nlux-InlineCode--BackgroundColor: #fff9d8; + --nlux-InlineCode--BorderColor: transparent; + --nlux-InlineCode--TextColor: black; + + /** Conversation starters */ + --nlux-ConversationStarter--BackgroundColor: var(--nlux-AiMessage--BackgroundColor); + --nlux-ConversationStarter--BorderColor: transparent; + --nlux-ConversationStarter--TextColor: var(--nlux-AiMessage--TextColor); +} diff --git a/packages/css/themes/src/claude/font.css b/packages/css/themes/src/claude/font.css new file mode 100644 index 00000000..be1c58c9 --- /dev/null +++ b/packages/css/themes/src/claude/font.css @@ -0,0 +1 @@ +@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap'); diff --git a/packages/css/themes/src/claude/icons.css b/packages/css/themes/src/claude/icons.css new file mode 100644 index 00000000..f1f7c98f --- /dev/null +++ b/packages/css/themes/src/claude/icons.css @@ -0,0 +1,26 @@ +.nlux-AiChat-root.nlux-theme-nova { + --nlux-send-icon: url('data:image/svg+xml,\ + \ + \ + \ + '); + + --nlux-cancel-icon: url('data:image/svg+xml,\ + \ + \ + \ + \ + \ + \ + '); + + --nlux-copy-icon: url('data:image/svg+xml,\ + \ + \ + \ + '); +} diff --git a/packages/css/themes/src/claude/layout.css b/packages/css/themes/src/claude/layout.css new file mode 100644 index 00000000..53a9767b --- /dev/null +++ b/packages/css/themes/src/claude/layout.css @@ -0,0 +1,124 @@ +.nlux-AiChat-root.nlux-theme-nova { + /** + * Theme-specific local variables. + */ + + --nlux-nova--FontFamily: 'Inter', sans-serif; + --nlux-nova--MonoFontFamily: monospace; + + --nlux-nova--BorderWidth: 0; + --nlux-nova--LineHeight: 1.4; + --nlux-nova--FlexGap: 12px; + + /** + * Definitions and overrides of required theme variables. + */ + + /** Exceptions box */ + --nlux-Exceptions--Padding: 5px; + --nlux-Exceptions--BorderWidth: var(--nlux-nova--BorderWidth); + --nlux-Exceptions--BorderRadius: 12px; + + /** Welcome message */ + --nlux-WelcomeMessage-Avatar--Width: 48px; + --nlux-WelcomeMessage-PersonaName--FontSize: 18px; + --nlux-WelcomeMessage-PersonaName--FontWeight: 600; + --nlux-WelcomeMessage-Text--FontSize: 15px; + --nlux-WelcomeMessage-Text--FontWeight: 400; + --nlux-WelcomeMessage--Gap: 4px; + + /** Divider between conversation and composer */ + --nlux-ChatRoom-Divider--MarginTop: 10px; + --nlux-ChatRoom-Divider--MarginBottom: 10px; + --nlux-ChatRoom-Divider--BorderWidth: 1px; + + /** Chat-room container */ + --nlux-ChatRoom--LineHeight: var(--nlux-nova--LineHeight); + --nlux-ChatRoom--FontWeight: 400; + --nlux-ChatRoom--FontFamily: var(--nlux-nova--FontFamily); + --nlux-ChatRoom--FontSize: 16px; + + --nlux-ChatRoom--Padding: 20px; + --nlux-ChatRoom--BorderRadius: 18px; + --nlux-ChatRoom--BorderWidth: var(--nlux-nova--BorderWidth); + + /** Chat-room loader */ + --nlux-ChatRoom-Loader--Width: 25px; + + /** Chat item */ + --nlux-ChatItem--AlignItems: flex-start; + + /** Chat item participant info */ + --nlux-ChatItem-ParticipantInfo--Gap: var(--nlux-nova--FlexGap); + --nlux-ChatItem-ParticipantInfo--Padding: 0px; + --nlux-ChatItem-ParticipantName--FontSize: 16px; + --nlux-ChatItem-ParticipantName--FontWeight: 700; + + /** Chat item avatar */ + --nlux-ChatItem-Avatar--Width: 30px; + --nlux-ChatItem-Avatar--BorderRadius: 50%; + --nlux-ChatItem-Avatar--BorderWidth: var(--nlux-nova--BorderWidth); + + /** Chat item message */ + --nlux-ChatItem-Message--Gap: var(--nlux-nova--FlexGap); /** Gap between elements within message */ + + /** Chat item message in bubbles display layout */ + --nlux-ChatItem-Message-BubbleLayout--BorderWidth: 0px; + --nlux-ChatItem-Message-BubbleLayout--BorderRadius: 12px; + --nlux-ChatItem-Message-BubbleLayout--PaddingTopBottom: 10px; + --nlux-ChatItem-Message-BubbleLayout--PaddingLeftRight: 15px; + + /** Chat item message in list display layout */ + --nlux-ChatItem-Message-ListLayout--BorderWidth: 0px; + --nlux-ChatItem-Message-ListLayout--BorderRadius: 12px; + --nlux-ChatItem-Message-ListLayout--PaddingTopBottom: 5px; + --nlux-ChatItem-Message-ListLayout--PaddingLeftRight: 10px; + --nlux-ChatItem-Message-ListLayout--MarginTop: -10px; + --nlux-ChatItem-Message-ListLayout--MarginBottom: 0px; + --nlux-ChatItem-Message-ListLayout--MarginLeft: 32px; + --nlux-ChatItem-Message-ListLayout--MarginRight: 0px; + + /** Chat item message code block */ + --nlux-CodeBlock--FontSize: 14px; + --nlux-CodeBlock--FontFamily: 'Courier New', monospace; + --nlux-CodeBlock--Padding: 10px; + --nlux-CodeBlock--BorderWidth: var(--nlux-nova--BorderWidth); + --nlux-CodeBlock--BorderRadius: 6px; + + /** Code block copy button */ + --nlux-CodeBlock-CopyButton--Width: 22px; + --nlux-CodeBlock-CopyButton--Height: 22px; + --nlux-CodeBlock-CopyButton--Padding: 2px; + --nlux-CodeBlock-CopyButton--BorderRadius: 4px; + --nlux-CodeBlock-CopyButton--BorderWidth: var(--nlux-nova--BorderWidth); + + /** Inline code in markdown */ + --nlux-InlineCode--BorderRadius: 6px; + --nlux-InlineCode--BorderWidth: 2px; + --nlux-InlineCode--Padding: 0 2px; + --nlux-InlineCode--FontSize: 18px; + + /** Composer */ + --nlux-Composer--Gap: 5px; + + /** Submit button */ + --nlux-SubmitButton--Width: 65px; + --nlux-SubmitButton--BorderWidth: var(--nlux-nova--BorderWidth); + --nlux-SubmitButton--BorderRadius: 12px; + --nlux-SubmitButton-Focus-Outline--Width: 2px; + + /** Composer input */ + --nlux-PromptInput--FontFamily: var(--nlux-nova--FontFamily); + --nlux-PromptInput--FontSize: 16px; + --nlux-PromptInput--BorderWidth: 0; + --nlux-PromptInput--BorderRadius: 12px; + --nlux-PromptInput-Focus-Outline--Width: 2px; + + /** Conversation starters */ + --nlux-ConversationStarter--Padding: 0 10px; + --nlux-ConversationStarter--BorderRadius: 6px; + --nlux-ConversationStarter--BorderWidth: 0; + --nlux-ConversationStarter--Gap: var(--nlux-nova--FlexGap); + --nlux-ConversationStarter--Width: 160px; + --nlux-ConversationStarter--Height: 101px; +} diff --git a/packages/css/themes/src/claude/main.css b/packages/css/themes/src/claude/main.css new file mode 100644 index 00000000..e5d1aa3c --- /dev/null +++ b/packages/css/themes/src/claude/main.css @@ -0,0 +1,6 @@ +@import './font.css'; +@import './colors-light.css'; +@import './colors-dark.css'; +@import './layout.css'; +@import './icons.css'; +@import '../common/main.css';