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