Claude.ai and ChatGPT themes for NLUX

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);
+}

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);
+}

packages/css/themes/src/claude/font.css

@@ -0,0 +1 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter:[email protected]&display=swap');

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;
+}

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';

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);

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 {

packages/css/themes/src/common/components/Message.css

@@ -65,6 +65,7 @@
     }
 
     button.nlux-comp-copyButton {
+        display: flex;
         position: absolute;
         top:5px;
         right:0;

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);

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%;
             }