Skip to content

Commit

Permalink
added openai style theme
Browse files Browse the repository at this point in the history
  • Loading branch information
somebodyawesome-dev committed Jul 2, 2024
1 parent b3ac27f commit 203412e
Show file tree
Hide file tree
Showing 6 changed files with 339 additions and 0 deletions.
91 changes: 91 additions & 0 deletions packages/css/themes/src/openai/colors-dark.css
Original file line number Diff line number Diff line change
@@ -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);
}
91 changes: 91 additions & 0 deletions packages/css/themes/src/openai/colors-light.css
Original file line number Diff line number Diff line change
@@ -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);
}
1 change: 1 addition & 0 deletions packages/css/themes/src/openai/font.css
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
@import url('https://fonts.googleapis.com/css2?family=Inter:[email protected]&display=swap');
26 changes: 26 additions & 0 deletions packages/css/themes/src/openai/icons.css

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

124 changes: 124 additions & 0 deletions packages/css/themes/src/openai/layout.css
Original file line number Diff line number Diff line change
@@ -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;
}
6 changes: 6 additions & 0 deletions packages/css/themes/src/openai/main.css
Original file line number Diff line number Diff line change
@@ -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';

0 comments on commit 203412e

Please sign in to comment.