Updated dev theme

nlkitai · Jun 16, 2024 · 8448d7e · 8448d7e
1 parent 99ab19b
commit 8448d7e
Show file tree

Hide file tree

Showing 6 changed files with 131 additions and 139 deletions.
diff --git a/docs/docs/learn/008-customize-theme.mdx b/docs/docs/learn/008-customize-theme.mdx
@@ -18,16 +18,19 @@ import ThemeIdJavaScript from './_005-customize-theme/#js/themeId.mdx';
 
 ---
 
-`NLUX` comes with a default theme called `nova` and an `unstyled` theme that provides a basic look and layout for the
-chat interface with no styling.
+`NLUX` comes with a default theme called `nova` and an `unstyled` theme that provides a basic layout for the chat
+interface with no styling or colors.
 
 If you would like to fully customize the look and feel of the chat interface, you can import the `unstyled`
-theme and set the CSS variables that you want to override.
+theme and set the CSS variables to match your design.
+
+**Over 100 variables** are available for you to set the desired look and feel for your interface.
 
 ---
 
 ## Customizing The Unstyled Theme
-
+<br />
+<br />
 You can create a new custom theme by creating a new CSS file that defines all the theme variables. You can then import
 this CSS file in your HTML file or in your JavaScript/TypeScript file. You will also need to provide a theme ID to the
 `AiChat` component as follows:

diff --git a/packages/css/themes/rollup.config.ts b/packages/css/themes/rollup.config.ts
@@ -33,10 +33,18 @@ const cssEntry = (input: string, output: string) => ({
     ],
 });
 
-const packageConfig: () => Promise<RollupOptions[]> = async () => ([
+const entries = [
     cssEntry('./src/nova/main.css', `../../../dist/${folder}/themes/nova.css`),
     cssEntry('./src/luna/main.css', `../../../dist/${folder}/themes/luna.css`),
     cssEntry('./src/unstyled/main.css', `../../../dist/${folder}/themes/unstyled.css`),
-]);
+];
+
+if (!isProduction) {
+    entries.push(
+        cssEntry('./src/dev/main.css', `../../../dist/${folder}/themes/dev.css`),
+    );
+}
+
+const packageConfig: () => Promise<RollupOptions[]> = async () => (entries);
 
 export default packageConfig;
diff --git a/packages/css/themes/src/dev/colors.css b/packages/css/themes/src/dev/colors.css
@@ -1,104 +1,94 @@
+/*
+    🎨 CSS variables to control the colors of your theme.
+*/
 .nlux-AiChat-root.nlux-theme-dev {
-    /** 👇 Theme-specific local variables **/
 
-    --nlux-dev--Outline-Color: blue;
-    --nlux-dev--Input-BorderColor: mediumseagreen;
-    --nlux-dev--Input-Active-BorderColor: limegreen;
-    --nlux-dev--Input-Disabled-BorderColor: darkgrey;
-    --nlux-dev--Input-BackgroundColor: honeydew;
-    --nlux-dev--Input-Active-BackgroundColor: white;
-    --nlux-dev--Input-Disabled-BackgroundColor: lightgrey;
-    --nlux-dev--Input-Disabled-TextColor: grey;
+    /** 👇 Welcome message */
+    --nlux-WelcomeMessage-Avatar--BorderColor: darkgoldenrod;
+    --nlux-WelcomeMessage-Avatar--BackgroundColor: lightgrey;
 
-    /** 👇 Definitions and overrides of required theme variables **/
+    /** 👇 Loader */
+    --nlux-ChatRoom-Loader--Color: red;
 
-    /** Exceptions box */
+    /** 👇 Exceptions box ( displayed when an error occurs ) */
     --nlux-Exceptions--BackgroundColor: tomato;
     --nlux-Exceptions--BorderColor: darkred;
     --nlux-Exceptions--TextColor: white;
 
-    /** Welcome message */
-    --nlux-WelcomeMessage-Avatar--BorderColor: darkgoldenrod;
-    --nlux-WelcomeMessage-Avatar--BackgroundColor: lightgrey;
-
-    /** Divider between composer and messages */
-    --nlux-ChatRoom-Divider--Color: red;
-
-    /** Conversation loader */
-    --nlux-ChatRoom-Loader--Color: red;
+    /** 👇 Conversation starters */
+    --nlux-ConversationStarter--BackgroundColor: yellow;
+    --nlux-ConversationStarter--BorderColor: red;
+    --nlux-ConversationStarter--TextColor: darkgreen;
 
-    /** Conversation content color */
+    /** 👇 Conversation content color */
     --nlux-ChatRoom--BackgroundColor: lavender;
     --nlux-ChatRoom--BorderColor: darkgoldenrod;
     --nlux-ChatRoom--TextColor: black;
 
-    /** Participant info in chat */
+    /** 👇 Participant info in chat */
     --nlux-ChatItem-ParticipantName--Color: darkblue;
 
-    /* Human message in chat */
+    /* 👇 User message in chat */
     --nlux-HumanMessage--BackgroundColor: lemonchiffon;
     --nlux-HumanMessage--BorderColor: darkkhaki;
     --nlux-HumanMessage--TextColor: black;
 
-    /** AI message in chat */
+    /** 👇 Assistant message in chat */
     --nlux-AiMessage--BackgroundColor: dimgrey;
     --nlux-AiMessage--BorderColor: black;
     --nlux-AiMessage--TextColor: white;
 
-    /** Prompt input colors */
-    --nlux-PromptInput--BackgroundColor: var(--nlux-dev--Input-BackgroundColor);
-    --nlux-PromptInput--BorderColor: var(--nlux-dev--Input-BorderColor);
+    /** 👇 Divider between composer and messages */
+    --nlux-ChatRoom-Divider--Color: red;
+
+    /** 👇 Prompt input colors */
+    --nlux-PromptInput--BackgroundColor: honeydew;
+    --nlux-PromptInput--BorderColor: mediumseagreen;
     --nlux-PromptInput--TextColor: black;
 
-    --nlux-PromptInput-Active--BackgroundColor: var(--nlux-dev--Input-Active-BackgroundColor);
-    --nlux-PromptInput-Active--BorderColor: var(--nlux-dev--Input-Active-BorderColor);
+    --nlux-PromptInput-Active--BackgroundColor: white;
+    --nlux-PromptInput-Active--BorderColor: limegreen;
     --nlux-PromptInput-Active--TextColor: black;
 
-    --nlux-PromptInput-Disabled--BackgroundColor: var(--nlux-dev--Input-Disabled-BackgroundColor);
-    --nlux-PromptInput-Disabled--TextColor: var(--nlux-dev--Input-Disabled-TextColor);
-    --nlux-PromptInput-Disabled--BorderColor: var(--nlux-dev--Input-Disabled-BorderColor);
+    --nlux-PromptInput-Disabled--BackgroundColor: lightgrey;
+    --nlux-PromptInput-Disabled--TextColor: grey;
+    --nlux-PromptInput-Disabled--BorderColor: darkgrey;
 
     --nlux-PromptInput-Placeholder--TextColor: darkseagreen;
-    --nlux-PromptInput-Focus-Outline--Color: var(--nlux-dev--Outline-Color);
+    --nlux-PromptInput-Focus-Outline--Color: blue;
 
-    /** Submit button colors */
-    --nlux-SubmitButton--BackgroundColor: var(--nlux-dev--Input-BackgroundColor);
-    --nlux-SubmitButton--BorderColor: var(--nlux-dev--Input-BorderColor);
+    /** 👇 Submit button colors */
+    --nlux-SubmitButton--BackgroundColor: honeydew;
+    --nlux-SubmitButton--BorderColor: mediumseagreen;
     --nlux-SubmitButton--TextColor: mediumseagreen;
 
-    --nlux-SubmitButton-Active--BackgroundColor: var(--nlux-dev--Input-Active-BackgroundColor);
-    --nlux-SubmitButton-Active--BorderColor: var(--nlux-dev--Input-Active-BorderColor);
+    --nlux-SubmitButton-Active--BackgroundColor: white;
+    --nlux-SubmitButton-Active--BorderColor: limegreen;
     --nlux-SubmitButton-Active--TextColor: limegreen;
 
-    --nlux-SubmitButton-Disabled--BackgroundColor: var(--nlux-dev--Input-Disabled-BackgroundColor);
-    --nlux-SubmitButton-Disabled--BorderColor: var(--nlux-dev--Input-Disabled-BorderColor);
-    --nlux-SubmitButton-Disabled--TextColor: var(--nlux-dev--Input-Disabled-TextColor);
+    --nlux-SubmitButton-Disabled--BackgroundColor: lightgrey;
+    --nlux-SubmitButton-Disabled--BorderColor: darkgrey;
+    --nlux-SubmitButton-Disabled--TextColor: grey;
 
-    --nlux-SubmitButton-Focus-Outline--Color: var(--nlux-dev--Outline-Color);
+    --nlux-SubmitButton-Focus-Outline--Color: blue;
 
-    /** Code block */
+    /** 👇 Code block in parsed markdown */
     --nlux-CodeBlock--BackgroundColor: gold;
     --nlux-CodeBlock--BorderColor: deeppink;
     --nlux-CodeBlock--TextColor: black;
     --nlux-CodeBlock-Hover--BackgroundColor: lightgoldenrodyellow;
 
-    /** Code block copy button */
+    /** 👇 Code block copy button */
     --nlux-CodeBlock-CopyButton--BackgroundColor: darkgoldenrod;
     --nlux-CodeBlock-CopyButton--BorderColor: darkred;
     --nlux-CodeBlock-CopyButton--TextColor: white;
 
-    /** Code block copy button in clicked state */
     --nlux-CodeBlock-CopyButton-Clicked--BackgroundColor: greenyellow;
     --nlux-CodeBlock-CopyButton-Clicked--BorderColor: limegreen;
     --nlux-CodeBlock-CopyButton-Clicked--TextColor: black;
 
-    /** Inline code in markdown */
+    /** 👇 Inline code in markdown */
     --nlux-InlineCode--BackgroundColor: chartreuse;
     --nlux-InlineCode--BorderColor: darkgreen;
     --nlux-InlineCode--TextColor: black;
-
-    /** Conversation starters */
-    --nlux-ConversationStarter--BackgroundColor: yellow;
-    --nlux-ConversationStarter--BorderColor: red;
-    --nlux-ConversationStarter--TextColor: darkgreen;
 }
diff --git a/packages/css/themes/src/dev/layout.css b/packages/css/themes/src/dev/layout.css
@@ -1,74 +1,63 @@
+/*
+    📐 CSS variables to control the layout of your theme.
+*/
 .nlux-AiChat-root.nlux-theme-dev {
-    /**
-     * Theme-specific local variables.
-     */
 
-    --nlux-dev--FontFamily: 'Merienda', cursive;
-    --nlux-dev--MonoFontFamily: monospace;
-
-    --nlux-dev--BorderWidth: 5px;
-    --nlux-dev--BorderRadius: 8px;
-    --nlux-dev--LineHeight: 1.4;
-    --nlux-dev--FlexGap: 12px;
-
-    /**
-     * Definitions and overrides of required theme variables.
-     */
-
-    /** Exceptions box */
-    --nlux-Exceptions--Padding: 5px;
-    --nlux-Exceptions--BorderWidth: var(--nlux-dev--BorderWidth);
-    --nlux-Exceptions--BorderRadius: var(--nlux-dev--BorderRadius);
-
-    /** Welcome message */
+    /** 👇 Welcome message */
     --nlux-WelcomeMessage-Avatar--Width: 60px;
     --nlux-WelcomeMessage-PersonaName--FontSize: 22px;
     --nlux-WelcomeMessage-PersonaName--FontWeight: 700;
     --nlux-WelcomeMessage-Text--FontSize: 18px;
     --nlux-WelcomeMessage-Text--FontWeight: 400;
     --nlux-WelcomeMessage--Gap: 5px;
 
-    /** Divider between conversation and composer */
-    --nlux-ChatRoom-Divider--MarginTop: 10px;
-    --nlux-ChatRoom-Divider--MarginBottom: 10px;
-    --nlux-ChatRoom-Divider--BorderWidth: 8px;
+    /** 👇 Loader */
+    --nlux-ChatRoom-Loader--Width: 25px;
+
+    /** 👇 Exceptions box ( displayed when an error occurs ) */
+    --nlux-Exceptions--Padding: 5px;
+    --nlux-Exceptions--BorderWidth: 5px;
+    --nlux-Exceptions--BorderRadius: 8px;
 
-    /** Chat-room container */
-    --nlux-ChatRoom--LineHeight: var(--nlux-dev--LineHeight);
+    /** 👇 Conversation starters */
+    --nlux-ConversationStarter--Padding: 0 10px;
+    --nlux-ConversationStarter--BorderRadius: 50px;
+    --nlux-ConversationStarter--BorderWidth: 5px;
+    --nlux-ConversationStarter--Gap: 12px;
+
+    /** 👇 Conversation content */
+    --nlux-ChatRoom--LineHeight: 1.4;
     --nlux-ChatRoom--FontWeight: 400;
-    --nlux-ChatRoom--FontFamily: var(--nlux-dev--FontFamily);
+    --nlux-ChatRoom--FontFamily: 'Merienda', cursive;
     --nlux-ChatRoom--FontSize: 16px;
 
     --nlux-ChatRoom--Padding: 10px;
-    --nlux-ChatRoom--BorderRadius: var(--nlux-dev--BorderRadius);
-    --nlux-ChatRoom--BorderWidth: var(--nlux-dev--BorderWidth);
-
-    /** Chat-room loader */
-    --nlux-ChatRoom-Loader--Width: 25px;
+    --nlux-ChatRoom--BorderRadius: 8px;
+    --nlux-ChatRoom--BorderWidth: 5px;
 
-    /** Chat item */
+    /** 👇 Chat item */
     --nlux-ChatItem--AlignItems: flex-end;
 
-    /** Chat item participant info */
-    --nlux-ChatItem-ParticipantInfo--Gap: var(--nlux-dev--FlexGap);
-    --nlux-ChatItem-ParticipantName--FontSize: 20px;
-    --nlux-ChatItem-ParticipantName--FontWeight: 700;
-
-    /** Chat item avatar */
+    /** 👇 Chat item avatar */
     --nlux-ChatItem-Avatar--Width: 30px;
     --nlux-ChatItem-Avatar--BorderRadius: 50%;
-    --nlux-ChatItem-Avatar--BorderWidth: var(--nlux-dev--BorderWidth);
+    --nlux-ChatItem-Avatar--BorderWidth: 5px;
 
-    /** Chat item message */
-    --nlux-ChatItem-Message--Gap: var(--nlux-dev--FlexGap); /** Gap between elements within message */
+    /** 👇 Chat item message */
+    --nlux-ChatItem-Message--Gap: 12px; /** Gap between elements within message */
 
-    /** Chat item message in bubbles display layout */
-    --nlux-ChatItem-Message-BubbleLayout--BorderWidth: var(--nlux-dev--BorderWidth);
-    --nlux-ChatItem-Message-BubbleLayout--BorderRadius: var(--nlux-dev--BorderRadius);
+    /** 👇 Participant info in chat */
+    --nlux-ChatItem-ParticipantInfo--Gap: 12px;
+    --nlux-ChatItem-ParticipantName--FontSize: 20px;
+    --nlux-ChatItem-ParticipantName--FontWeight: 700;
+
+    /** 👇 Chat item message in bubbles display layout */
+    --nlux-ChatItem-Message-BubbleLayout--BorderWidth: 5px;
+    --nlux-ChatItem-Message-BubbleLayout--BorderRadius: 8px;
     --nlux-ChatItem-Message-BubbleLayout--PaddingTopBottom: 10px;
     --nlux-ChatItem-Message-BubbleLayout--PaddingLeftRight: 15px;
 
-    /** Chat item message in list display layout */
+    /** 👇 Chat item message in list display layout */
     --nlux-ChatItem-Message-ListLayout--BorderWidth: 2px;
     --nlux-ChatItem-Message-ListLayout--BorderRadius: 2px;
     --nlux-ChatItem-Message-ListLayout--PaddingTopBottom: 5px;
@@ -78,45 +67,44 @@
     --nlux-ChatItem-Message-ListLayout--MarginLeft: 10px;
     --nlux-ChatItem-Message-ListLayout--MarginRight: 10px;
 
-    /** Chat item message code block */
+    /** 👇 Divider between conversation and composer */
+    --nlux-ChatRoom-Divider--MarginTop: 10px;
+    --nlux-ChatRoom-Divider--MarginBottom: 10px;
+    --nlux-ChatRoom-Divider--BorderWidth: 8px;
+
+    /** 👇 Composer */
+    --nlux-Composer--Gap: 5px;
+
+    /** 👇 Prompt input */
+    --nlux-PromptInput--FontFamily: 'Merienda', cursive;
+    --nlux-PromptInput--FontSize: 16px;
+    --nlux-PromptInput--BorderWidth: 5px;
+    --nlux-PromptInput--BorderRadius: 8px;
+    --nlux-PromptInput-Focus-Outline--Width: 5px;
+
+    /** 👇 Submit button */
+    --nlux-SubmitButton--Width: 65px;
+    --nlux-SubmitButton--BorderWidth: 5px;
+    --nlux-SubmitButton--BorderRadius: 8px;
+    --nlux-SubmitButton-Focus-Outline--Width: 5px;
+
+    /** 👇 Code block in parsed markdown */
     --nlux-CodeBlock--FontSize: 14px;
     --nlux-CodeBlock--FontFamily: 'Courier New', monospace;
     --nlux-CodeBlock--Padding: 10px;
-    --nlux-CodeBlock--BorderWidth: var(--nlux-dev--BorderWidth);
-    --nlux-CodeBlock--BorderRadius: var(--nlux-dev--BorderRadius);
+    --nlux-CodeBlock--BorderWidth: 5px;
+    --nlux-CodeBlock--BorderRadius: 8px;
 
-    /** Code block copy button */
+    /** 👇 Code block copy button */
     --nlux-CodeBlock-CopyButton--Width: 28px;
     --nlux-CodeBlock-CopyButton--Height: 28px;
     --nlux-CodeBlock-CopyButton--Padding: 2px;
-    --nlux-CodeBlock-CopyButton--BorderRadius: var(--nlux-dev--BorderRadius);
-    --nlux-CodeBlock-CopyButton--BorderWidth: var(--nlux-dev--BorderWidth);
+    --nlux-CodeBlock-CopyButton--BorderRadius: 8px;
+    --nlux-CodeBlock-CopyButton--BorderWidth: 5px;
 
-    /** Inline code in markdown */
+    /** 👇 Inline code in markdown */
     --nlux-InlineCode--BorderRadius: 6px;
     --nlux-InlineCode--BorderWidth: 2px;
     --nlux-InlineCode--Padding: 2px 4px;
     --nlux-InlineCode--FontSize: 18px;
-
-    /** Composer */
-    --nlux-Composer--Gap: 5px;
-
-    /** Submit button */
-    --nlux-SubmitButton--Width: 65px;
-    --nlux-SubmitButton--BorderWidth: var(--nlux-dev--BorderWidth);
-    --nlux-SubmitButton--BorderRadius: var(--nlux-dev--BorderRadius);
-    --nlux-SubmitButton-Focus-Outline--Width: var(--nlux-dev--BorderWidth);
-
-    /** Composer input */
-    --nlux-PromptInput--FontFamily: var(--nlux-dev--FontFamily);
-    --nlux-PromptInput--FontSize: 16px;
-    --nlux-PromptInput--BorderWidth: var(--nlux-dev--BorderWidth);
-    --nlux-PromptInput--BorderRadius: var(--nlux-dev--BorderRadius);
-    --nlux-PromptInput-Focus-Outline--Width: var(--nlux-dev--BorderWidth);
-
-    /** Conversation starters */
-    --nlux-ConversationStarter--Padding: 0 10px;
-    --nlux-ConversationStarter--BorderRadius: 50px;
-    --nlux-ConversationStarter--BorderWidth: var(--nlux-dev--BorderWidth);
-    --nlux-ConversationStarter--Gap: var(--nlux-dev--FlexGap);
 }
diff --git a/samples/aiChat/js/src/app.ts b/samples/aiChat/js/src/app.ts
@@ -14,7 +14,7 @@ import './style.css';
 document.addEventListener('DOMContentLoaded', () => {
     const parent = document.getElementById('root')!;
 
-    type ThemeId = 'nova' | 'luna' | 'dev' | 'unstyled';
+    type ThemeId = 'nova' | 'luna' | 'unstyled' | 'dev';
     let themeId: ThemeId = 'nova';
     let colorScheme: 'light' | 'dark' | 'auto' = 'dark';