Reset nova and luna theme files

packages/css/themes/rollup.config.ts

@@ -34,9 +34,10 @@ const cssEntry = (input: string, output: string) => ({
 });
 
 const packageConfig: () => Promise<RollupOptions[]> = async () => ([
+    cssEntry('./src/nada/main.css', `../../../dist/${folder}/themes/nada.css`),
+    cssEntry('./src/fest/main.css', `../../../dist/${folder}/themes/fest.css`),
     cssEntry('./src/luna/main.css', `../../../dist/${folder}/themes/luna.css`),
     cssEntry('./src/nova/main.css', `../../../dist/${folder}/themes/nova.css`),
-    cssEntry('./src/fest/main.css', `../../../dist/${folder}/themes/fest.css`),
 ]);
 
 export default packageConfig;

packages/css/themes/src/common/variables-colors.css → packages/css/themes/src/common/colors.css

@@ -39,7 +39,7 @@
     --nlux-prmInp-dslb--brdClr: var(--nlux-PromptInput-Disabled--BorderColor, darkgrey);
     --nlux-prmInp-dslb--txtClr: var(--nlux-PromptInput-Disabled--TextColor, grey);
 
-    --nlux-prmInp-plcHldr--txtClr: var(--nlux-PromptInput-Olaceholder--TextColor, darkgrey);
+    --nlux-prmInp-plcHldr--txtClr: var(--nlux-PromptInput-Placeholder--TextColor, darkgrey);
     --nlux-prmInp-fcs-otln--clr: var(--nlux-PromptInput-Focus-Outline--Color, grey);
 
     /** Submit button colors */

packages/css/themes/src/common/main.css

@@ -1,5 +1,5 @@
-@import './variables-components.css';
-@import './variables-colors.css';
+@import './variables.css';
+@import './colors.css';
 
 @import './layout.css';
 @import './format.css';

packages/css/themes/src/fest/colors.css

@@ -1,7 +1,5 @@
 .nlux-AiChat-root.nlux-theme-fest {
-    /**
-     * Theme-specific local variables.
-     **/
+    /** 👇 Theme-specific local variables **/
 
     --nlux-fest--Outline-Color: blue;
     --nlux-fest--Input-BorderColor: mediumseagreen;
@@ -12,9 +10,7 @@
     --nlux-fest--Input-Disabled-BackgroundColor: lightgrey;
     --nlux-fest--Input-Disabled-TextColor: grey;
 
-    /**
-     * Definitions and overrides of required theme variables.
-     **/
+    /** 👇 Definitions and overrides of required theme variables **/
 
     /** Exceptions box */
     --nlux-Exceptions--BackgroundColor: tomato;
@@ -58,7 +54,7 @@
     --nlux-PromptInput-Disabled--TextColor: var(--nlux-fest--Input-Disabled-TextColor);
     --nlux-PromptInput-Disabled--BorderColor: var(--nlux-fest--Input-Disabled-BorderColor);
 
-    --nlux-PromptInput-Olaceholder--TextColor: darkseagreen;
+    --nlux-PromptInput-Placeholder--TextColor: darkseagreen;
     --nlux-PromptInput-Focus-Outline--Color: var(--nlux-fest--Outline-Color);
 
     /** Submit button colors */

packages/css/themes/src/luna/colors-dark.css

@@ -0,0 +1,88 @@
+.nlux-AiChat-root.nlux-theme-luna.nlux-colorScheme-dark {
+    /** 👇 Theme-specific local variables **/
+
+    --nlux-fest--Outline-Color: #4141ff;
+
+    /** 👇 Definitions and overrides of required theme variables **/
+
+    /** Exceptions box */
+    --nlux-Exceptions--BackgroundColor: tomato;
+    --nlux-Exceptions--BorderColor: darkred;
+    --nlux-Exceptions--TextColor: white;
+
+    /** Welcome message */
+    --nlux-WelcomeMessage-Avatar--BorderColor: transparent;
+
+    /** Divider between prompt box and messages */
+    --nlux-ChatRoom-Divider--Color: transparent;
+
+    /** Conversation loader */
+    --nlux-ChatRoom-Loader--Color: #ffffff;
+
+    /** Conversation content color */
+    --nlux-ChatRoom--BackgroundColor: transparent;
+    --nlux-ChatRoom--BorderColor: transparent;
+    --nlux-ChatRoom--TextColor: #ffffff;
+
+    /* Human message in chat */
+    --nlux-HumanMessage--BackgroundColor: #5fe095;
+    --nlux-HumanMessage--BorderColor: #6fc693;
+    --nlux-HumanMessage--TextColor: #ffffff;
+
+    /** AI message in chat */
+    --nlux-AiMessage--BackgroundColor: #f4f6f9;
+    --nlux-AiMessage--BorderColor: #dde5e2;
+    --nlux-AiMessage--TextColor: #18210c;
+
+    /** Prompt input colors */
+    --nlux-PromptInput--BackgroundColor: #ffffff;
+    --nlux-PromptInput--BorderColor: #c5d7c9;
+    --nlux-PromptInput--TextColor: black;
+
+    --nlux-PromptInput-Active--BackgroundColor: #ffffff;
+    --nlux-PromptInput-Active--BorderColor: #c5d7c9;
+    --nlux-PromptInput-Active--TextColor: black;
+
+    --nlux-PromptInput-Disabled--BackgroundColor: #ffffff;
+    --nlux-PromptInput-Disabled--TextColor: #959993;
+    --nlux-PromptInput-Disabled--BorderColor: #c5d7c9;
+
+    --nlux-PromptInput-Placeholder--TextColor: #c5d7c9;
+    --nlux-PromptInput-Focus-Outline--Color: var(--nlux-fest--Outline-Color);
+
+    /** Submit button colors */
+    --nlux-SubmitButton--BackgroundColor: #5fe095;
+    --nlux-SubmitButton--BorderColor: #5fe095;
+    --nlux-SubmitButton--TextColor: #ffffff;
+
+    --nlux-SubmitButton-Active--BackgroundColor: #72e7a1;
+    --nlux-SubmitButton-Active--BorderColor: #72e7a1;
+    --nlux-SubmitButton-Active--TextColor: #ffffff;
+
+    --nlux-SubmitButton-Disabled--BackgroundColor: #c5d7c9;
+    --nlux-SubmitButton-Disabled--BorderColor: #c5d7c9;
+    --nlux-SubmitButton-Disabled--TextColor: #ffffff;
+
+    --nlux-SubmitButton-Focus-Outline--Color: var(--nlux-fest--Outline-Color);
+
+    /** Code block */
+    --nlux-CodeBlock--BackgroundColor: #303530;
+    --nlux-CodeBlock--BorderColor: #303530;
+    --nlux-CodeBlock--TextColor: #dde5e2;
+    --nlux-CodeBlock-Hover--BackgroundColor: #404240;
+
+    /** Code block copy button */
+    --nlux-CodeBlock-CopyButton--BackgroundColor: #ffffff;
+    --nlux-CodeBlock-CopyButton--BorderColor: #303530;
+    --nlux-CodeBlock-CopyButton--TextColor: #303530;
+
+    /** Code block copy button in clicked state */
+    --nlux-CodeBlock-CopyButton-Clicked--BackgroundColor: #303530;
+    --nlux-CodeBlock-CopyButton-Clicked--BorderColor: #303530;
+    --nlux-CodeBlock-CopyButton-Clicked--TextColor: #ffffff;
+
+    /** Inline code in markdown */
+    --nlux-InlineCode--BackgroundColor: #d5dad1;
+    --nlux-InlineCode--BorderColor: #d5dad1;
+    --nlux-InlineCode--TextColor: #18210c;
+}

packages/css/themes/src/luna/colors-light.css

@@ -0,0 +1,88 @@
+.nlux-AiChat-root.nlux-theme-luna.nlux-colorScheme-light {
+    /** 👇 Theme-specific local variables **/
+
+    --nlux-fest--Outline-Color: #4141ff;
+
+    /** 👇 Definitions and overrides of required theme variables **/
+
+    /** Exceptions box */
+    --nlux-Exceptions--BackgroundColor: tomato;
+    --nlux-Exceptions--BorderColor: darkred;
+    --nlux-Exceptions--TextColor: white;
+
+    /** Welcome message */
+    --nlux-WelcomeMessage-Avatar--BorderColor: transparent;
+
+    /** Divider between prompt box and messages */
+    --nlux-ChatRoom-Divider--Color: transparent;
+
+    /** Conversation loader */
+    --nlux-ChatRoom-Loader--Color: #000000;
+
+    /** Conversation content color */
+    --nlux-ChatRoom--BackgroundColor: transparent;
+    --nlux-ChatRoom--BorderColor: transparent;
+    --nlux-ChatRoom--TextColor: #000000;
+
+    /* Human message in chat */
+    --nlux-HumanMessage--BackgroundColor: #5fe095;
+    --nlux-HumanMessage--BorderColor: #6fc693;
+    --nlux-HumanMessage--TextColor: #ffffff;
+
+    /** AI message in chat */
+    --nlux-AiMessage--BackgroundColor: #f4f6f9;
+    --nlux-AiMessage--BorderColor: #dde5e2;
+    --nlux-AiMessage--TextColor: #18210c;
+
+    /** Prompt input colors */
+    --nlux-PromptInput--BackgroundColor: #ffffff;
+    --nlux-PromptInput--BorderColor: #c5d7c9;
+    --nlux-PromptInput--TextColor: black;
+
+    --nlux-PromptInput-Active--BackgroundColor: #ffffff;
+    --nlux-PromptInput-Active--BorderColor: #c5d7c9;
+    --nlux-PromptInput-Active--TextColor: black;
+
+    --nlux-PromptInput-Disabled--BackgroundColor: #ffffff;
+    --nlux-PromptInput-Disabled--TextColor: #959993;
+    --nlux-PromptInput-Disabled--BorderColor: #c5d7c9;
+
+    --nlux-PromptInput-Placeholder--TextColor: #c5d7c9;
+    --nlux-PromptInput-Focus-Outline--Color: var(--nlux-fest--Outline-Color);
+
+    /** Submit button colors */
+    --nlux-SubmitButton--BackgroundColor: #5fe095;
+    --nlux-SubmitButton--BorderColor: #5fe095;
+    --nlux-SubmitButton--TextColor: #ffffff;
+
+    --nlux-SubmitButton-Active--BackgroundColor: #72e7a1;
+    --nlux-SubmitButton-Active--BorderColor: #72e7a1;
+    --nlux-SubmitButton-Active--TextColor: #ffffff;
+
+    --nlux-SubmitButton-Disabled--BackgroundColor: #c5d7c9;
+    --nlux-SubmitButton-Disabled--BorderColor: #c5d7c9;
+    --nlux-SubmitButton-Disabled--TextColor: #ffffff;
+
+    --nlux-SubmitButton-Focus-Outline--Color: var(--nlux-fest--Outline-Color);
+
+    /** Code block */
+    --nlux-CodeBlock--BackgroundColor: #303530;
+    --nlux-CodeBlock--BorderColor: #303530;
+    --nlux-CodeBlock--TextColor: #dde5e2;
+    --nlux-CodeBlock-Hover--BackgroundColor: #404240;
+
+    /** Code block copy button */
+    --nlux-CodeBlock-CopyButton--BackgroundColor: #ffffff;
+    --nlux-CodeBlock-CopyButton--BorderColor: #303530;
+    --nlux-CodeBlock-CopyButton--TextColor: #303530;
+
+    /** Code block copy button in clicked state */
+    --nlux-CodeBlock-CopyButton-Clicked--BackgroundColor: #303530;
+    --nlux-CodeBlock-CopyButton-Clicked--BorderColor: #303530;
+    --nlux-CodeBlock-CopyButton-Clicked--TextColor: #ffffff;
+
+    /** Inline code in markdown */
+    --nlux-InlineCode--BackgroundColor: #d5dad1;
+    --nlux-InlineCode--BorderColor: #d5dad1;
+    --nlux-InlineCode--TextColor: #18210c;
+}

packages/css/themes/src/luna/main.css

@@ -1,6 +1,6 @@
 @import './font.css';
-@import './colors.css';
-@import './overrides.css';
+@import './colors-light.css';
+@import './colors-dark.css';
 @import './icons.css';
 @import './variables.css';
 @import '../common/main.css';

packages/css/themes/src/luna/variables.css

@@ -1,2 +1,95 @@
 .nlux-AiChat-root.nlux-theme-luna {
+    /**
+ * Theme-specific local variables.
+ */
+
+    --nlux-fest--FontFamily: 'IBM Plex Sans', sans-serif;
+    --nlux-fest--MonoFontFamily: monospace;
+
+    --nlux-fest--BorderWidth: 1px;
+    --nlux-fest--BorderRadius: 8px;
+    --nlux-fest--LineHeight: 1.4;
+    --nlux-fest--FlexGap: 12px;
+
+    /**
+     * Definitions and overrides of required theme variables.
+     */
+
+    /** Exceptions box */
+    --nlux-Exceptions--Padding: 5px;
+    --nlux-Exceptions--BorderWidth: var(--nlux-fest--BorderWidth);
+    --nlux-Exceptions--BorderRadius: var(--nlux-fest--BorderRadius);
+
+    /** Welcome message */
+    --nlux-WelcomeMessage-Avatar--Width: 60px;
+    --nlux-WelcomeMessage-PersonaName--FontSize: 22px;
+    --nlux-WelcomeMessage-PersonaName--FontWeight: 700;
+    --nlux-WelcomeMessage--Gap: 5px;
+
+    /** Divider between conversation and prompt box */
+    --nlux-ChatRoom-Divider--MarginTop: 10px;
+    --nlux-ChatRoom-Divider--MarginBottom: 10px;
+
+    /** Chat-room container */
+    --nlux-ChatRoom--LineHeight: var(--nlux-fest--LineHeight);
+    --nlux-ChatRoom--FontWeight: 400;
+    --nlux-ChatRoom--FontFamily: var(--nlux-fest--FontFamily);
+    --nlux-ChatRoom--FontSize: 16px;
+
+    --nlux-ChatRoom--Padding: 10px;
+    --nlux-ChatRoom--BorderRadius: var(--nlux-fest--BorderRadius);
+    --nlux-ChatRoom--BorderWidth: var(--nlux-fest--BorderWidth);
+
+    /** Chat-room loader */
+    --nlux-ChatRoom-Loader--Width: 25px;
+
+    /** Chat item */
+    --nlux-ChatItem--AlignItems: flex-start;
+
+    /** Chat item avatar */
+    --nlux-ChatItem-Avatar--Width: 30px;
+    --nlux-ChatItem-Avatar--BorderRadius: 50%;
+
+    /** Chat item message */
+    --nlux-ChatItem-Message--BorderWidth: 0;
+    --nlux-ChatItem-Message--PaddingTopBottom: 10px;
+    --nlux-ChatItem-Message--PaddingLeftRight: 15px;
+    --nlux-ChatItem-Message--BorderRadius: var(--nlux-fest--BorderRadius);
+    --nlux-ChatItem-Message--Gap: var(--nlux-fest--FlexGap);
+
+    /** Chat item message code block */
+    --nlux-CodeBlock--FontSize: 14px;
+    --nlux-CodeBlock--FontFamily: 'Courier New', monospace;
+    --nlux-CodeBlock--Padding: 10px;
+    --nlux-CodeBlock--BorderWidth: var(--nlux-fest--BorderWidth);
+    --nlux-CodeBlock--BorderRadius: var(--nlux-fest--BorderRadius);
+
+    /** Code block copy button */
+    --nlux-CodeBlock-CopyButton--Width: 22px;
+    --nlux-CodeBlock-CopyButton--Height: 22px;
+    --nlux-CodeBlock-CopyButton--Padding: 2px 2px 0 2px;
+    --nlux-CodeBlock-CopyButton--BorderRadius: 4px;
+    --nlux-CodeBlock-CopyButton--BorderWidth: var(--nlux-fest--BorderWidth);
+
+    /** Inline code in markdown */
+    --nlux-InlineCode--BorderRadius: 6px;
+    --nlux-InlineCode--BorderWidth: 2px;
+    --nlux-InlineCode--Padding: 2px 4px;
+    --nlux-InlineCode--FontSize: 14px;
+
+    /** Prompt box */
+    --nlux-PromptBox--Gap: 5px;
+
+    /** Submit button */
+    --nlux-SubmitButton--Width: 65px;
+    --nlux-SubmitButton--BorderWidth: var(--nlux-fest--BorderWidth);
+    --nlux-SubmitButton--BorderRadius: var(--nlux-fest--BorderRadius);
+    --nlux-SubmitButton-Focus-Outline--Width: var(--nlux-fest--BorderWidth);
+
+    /** Prompt box input */
+    --nlux-PromptInput--FontFamily: var(--nlux-fest--FontFamily);
+    --nlux-PromptInput--FontSize: 16px;
+    --nlux-PromptInput--BorderWidth: var(--nlux-fest--BorderWidth);
+    --nlux-PromptInput--BorderRadius: var(--nlux-fest--BorderRadius);
+    --nlux-PromptInput-Focus-Outline--Width: var(--nlux-fest--BorderWidth);
 }

packages/css/themes/src/nada/font.css

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

packages/css/themes/src/nova/colors-dark.css

@@ -0,0 +1,2 @@
+.nlux-AiChat-root.nlux-theme-nova.nlux-colorScheme-dark {
+}

packages/css/themes/src/nova/colors-light.css

@@ -0,0 +1,2 @@
+.nlux-AiChat-root.nlux-theme-nova.nlux-colorScheme-light {
+}