Added new theme Nove with dark/light modes

nlkitai · May 16, 2024 · f9c21fc · f9c21fc
1 parent 44a9b0d
commit f9c21fc
Show file tree

Hide file tree

Showing 18 changed files with 274 additions and 83 deletions.
diff --git a/packages/css/themes/rollup.config.ts b/packages/css/themes/rollup.config.ts
@@ -35,6 +35,7 @@ const cssEntry = (input: string, output: string) => ({
 
 const packageConfig: () => Promise<RollupOptions[]> = async () => ([
     cssEntry('./src/luna/theme.css', `../../../dist/${folder}/themes/luna.css`),
+    cssEntry('./src/nova/theme.css', `../../../dist/${folder}/themes/nova.css`),
 ]);
 
 export default packageConfig;
diff --git a/packages/css/themes/src/common/components/PromptBox.css b/packages/css/themes/src/common/components/PromptBox.css
@@ -4,7 +4,6 @@
     flex-direction: row;
     justify-content: center;
 
-    border: none;
     background-color: transparent;
     gap: var(--nlux-flex-gap);
 
@@ -48,7 +47,17 @@
         background-color: var(--nlux-button-background-color);
 
         > .nlux_sndIcn {
-            width: 80%;
+            width: 100%;
+
+            > .snd_icn_ctn {
+                display: inline-block;
+                width: 100%;
+                background-color: currentColor;
+                background-repeat: no-repeat;
+                background-size: contain;
+                mask: var(--nlux-send-icon);
+                aspect-ratio: 1;
+            }
         }
 
         > .nlux_msg_ldr {

diff --git a/packages/css/themes/src/common/layout.css b/packages/css/themes/src/common/layout.css
@@ -33,13 +33,13 @@
             overflow-x: hidden;
             overflow-y: auto;
             flex: 1;
-            margin-bottom: 0.5em;
-            padding: 0;
+            padding: 0 0 var(--nlux-padding) 0;
         }
 
         > .nlux-chtRm-prmptBox-cntr {
             flex: 0 0 auto;
-            padding: 0;
+            padding: var(--nlux-padding) 0 0 0;
+            border-top: var(--nlux-border-width) solid var(--nlux-divider-color);
             gap: var(--nlux-flex-gap);
         }
     }

diff --git a/packages/css/themes/src/luna/colors.css b/packages/css/themes/src/luna/colors.css
@@ -28,6 +28,8 @@
     --nlux-button-disabled-border-color: #c5d7c9;
     --nlux-button-disabled-text-color: #ffffff;
 
+    --nlux-divider-color: transparent;
+
     --nlux-message-sent-background-color: #5fe095;
     --nlux-message-sent-border-color: #6fc693;
     --nlux-message-sent-text-color: #ffffff;

diff --git a/packages/css/themes/src/luna/icons.css b/packages/css/themes/src/luna/icons.css
@@ -0,0 +1,8 @@
+.nlux-AiChat-root.nlux-theme-luna {
+    --nlux-send-icon: url('data:image/svg+xml,\
+        <svg fill="currentColor" version="1.1" viewBox="0 0 495 495" xml:space="preserve" xmlns="http://www.w3.org/2000/svg">\
+            <path d="m164.71 456.69c0 2.966 1.647 5.686 4.266 7.072 2.617 1.385 5.799 1.207 8.245-0.468l55.09-37.616-67.6-32.22v63.232z"/>\
+            <path d="m492.43 32.443c-1.513-1.395-3.466-2.125-5.44-2.125-1.19 0-2.377 0.264-3.5 0.816l-475.59 233.29c-4.861 2.389-7.937 7.353-7.904 12.783 0.033 5.423 3.161 10.353 8.057 12.689l125.34 59.724 250.62-205.99-219.56 220.79 156.14 74.4c1.918 0.919 4.012 1.376 6.084 1.376 1.768 0 3.519-0.322 5.186-0.977 3.637-1.438 6.527-4.318 7.97-7.956l154.6-390c1.224-3.069 0.426-6.578-2.005-8.814z"/>\
+        </svg>\
+    ');
+}
diff --git a/packages/css/themes/src/luna/theme.css b/packages/css/themes/src/luna/theme.css
@@ -1,4 +1,5 @@
 @import './font.css';
 @import './colors.css';
+@import './icons.css';
 @import './variables.css';
 @import '../common/nlux.css';
diff --git a/packages/css/themes/src/nova/colors.css b/packages/css/themes/src/nova/colors.css
@@ -0,0 +1,91 @@
+.nlux-AiChat-root.nlux-theme-nova.nlux-colorScheme-light {
+    --nlux-background-color: #ffffff;
+    --nlux-primaryText-color: #09090b;
+    --nlux-placeholderText-color: #5f5f5f;
+
+    --nlux-messageReceivedBackground-color: #f4f6f9;
+    --nlux-messageReceivedText-color: var(--nlux-primaryText-color);
+
+    --nlux-messageSentBackground-color: #18181b;
+    --nlux-messageSentText-color: #ffffff;
+
+    --nlux-icon-primary-color: #09090b;
+    --nlux-icon-secondary-color: #5f5f5f;
+
+    --nlux-divider-color: rgba(235, 235, 235, 0.5);
+}
+
+.nlux-AiChat-root.nlux-theme-nova.nlux-colorScheme-dark {
+    --nlux-background-color: #151515;
+    --nlux-primaryText-color: #ffffff;
+    --nlux-placeholderText-color: #71717a;
+
+    --nlux-messageReceivedBackground-color: #494949;
+    --nlux-messageReceivedText-color: var(--nlux-primaryText-color);
+
+    --nlux-messageSentBackground-color: #323232;
+    --nlux-messageSentText-color: #ffffff;
+
+    --nlux-icon-primary-color: #ffffff;
+    --nlux-icon-secondary-color: #71717a;
+
+    --nlux-divider-color: rgba(235, 235, 235, 0.5);
+}
+
+.nlux-AiChat-root.nlux-theme-nova {
+    --nlux-text-color: var(--nlux-primaryText-color);
+
+    --nlux-input-background-color: transparent;
+    --nlux-input-border-color: transparent;
+    --nlux-input-text-color: var(--nlux-text-color);
+    --nlux-input-placeholder-color: var(--nlux-placeholderText-color);
+
+    --nlux-input-active-background-color: transparent;
+    --nlux-input-active-border-color: transparent;
+    --nlux-input-active-text-color: var(--nlux-text-color);
+    --nlux-input-active-placeholder-color: var(--nlux-placeholderText-color);
+
+    --nlux-input-disabled-background-color: transparent;
+    --nlux-input-disabled-border-color: transparent;
+    --nlux-input-disabled-text-color: var(--nlux-text-color);
+    --nlux-input-disabled-placeholder-color: var(--nlux-placeholderText-color);
+
+    --nlux-button-background-color: transparent;
+    --nlux-button-border-color: transparent;
+    --nlux-button-text-color: var(--nlux-icon-primary-color);
+
+    --nlux-button-active-background-color: transparent;
+    --nlux-button-active-border-color: transparent;
+    --nlux-button-active-text-color: var(--nlux-icon-primary-color);
+
+    --nlux-button-disabled-background-color: transparent;
+    --nlux-button-disabled-border-color: transparent;
+    --nlux-button-disabled-text-color: var(--nlux-icon-secondary-color);
+
+    --nlux-message-sent-background-color: var(--nlux-messageSentBackground-color);
+    --nlux-message-sent-border-color: var(--nlux-messageSentBackground-color);
+    --nlux-message-sent-text-color: var(--nlux-messageSentText-color);
+
+    --nlux-message-sent-active-background-color: var(--nlux-messageSentBackground-color);
+    --nlux-message-sent-active-border-color: var(--nlux-messageSentBackground-color);
+    --nlux-message-sent-active-text-color: var(--nlux-messageSentText-color);
+
+    --nlux-message-received-background-color: var(--nlux-messageReceivedBackground-color);
+    --nlux-message-received-border-color: var(--nlux-messageReceivedBackground-color);
+    --nlux-message-received-text-color: var(--nlux-messageReceivedText-color);
+
+    --nlux-message-received-active-background-color: var(--nlux-messageReceivedBackground-color);
+    --nlux-message-received-active-border-color: var(--nlux-messageReceivedBackground-color);
+    --nlux-message-received-active-text-color: var(--nlux-messageReceivedText-color);
+
+    --nlux-code-block-background-color: #303530;
+    --nlux-code-block-hover-background-color: #404240;
+    --nlux-code-block-text-color: #dde5e2ff;
+
+    --nlux-inline-code-background-color: #d5dad1;
+    --nlux-inline-code-text-color: #18210c;
+
+    --nlux-exceptions-box-error-background-color: #d05858;
+    --nlux-exceptions-box-error-border-color: #d05858;
+    --nlux-exceptions-box-error-text-color: #ffffff;
+}
diff --git a/packages/css/themes/src/nova/font.css b/packages/css/themes/src/nova/font.css
@@ -0,0 +1 @@
+@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap');
diff --git a/packages/css/themes/src/nova/icons.css b/packages/css/themes/src/nova/icons.css
@@ -0,0 +1,11 @@
+.nlux-AiChat-root.nlux-theme-nova {
+    --nlux-send-icon: url('data:image/svg+xml,\
+        <svg viewBox="0 0 101 101" fill="none" xmlns="http://www.w3.org/2000/svg">\
+            <path\
+                fill-rule="evenodd" clip-rule="evenodd"\
+                d="M100.662 50.6616C100.662 78.2758 78.2758 100.662 50.6616 100.662C23.0473 100.662 0.66156 78.2758 0.66156 50.6616C0.66156 23.0473 23.0473 0.66156 50.6616 0.66156C78.2758 0.66156 100.662 23.0473 100.662 50.6616ZM50.651 27.9339C49.2859 27.9339 48.0614 28.5356 47.2282 29.4883L29.2694 47.447C27.4943 49.2221 27.4943 52.1001 29.2694 53.8753C31.0446 55.6504 33.9226 55.6504 35.6977 53.8753L46.1055 43.4674V68.8429C46.1055 71.3533 48.1406 73.3884 50.651 73.3884C53.1613 73.3884 55.1964 71.3533 55.1964 68.8429V43.4386L65.6331 53.8753C67.4082 55.6504 70.2862 55.6504 72.0613 53.8753C73.8364 52.1001 73.8364 49.2221 72.0613 47.447L53.8795 29.2652C52.9902 28.3759 51.8241 27.9321 50.6585 27.9339L50.651 27.9339Z"\
+                fill="currentColor"\ style="fill:currentColor;fill-opacity:1;"\
+            />\
+        </svg>\
+    ');
+}
diff --git a/packages/css/themes/src/nova/theme.css b/packages/css/themes/src/nova/theme.css
@@ -0,0 +1,5 @@
+@import './font.css';
+@import './colors.css';
+@import './variables.css';
+@import './icons.css';
+@import '../common/nlux.css';
diff --git a/packages/css/themes/src/nova/variables.css b/packages/css/themes/src/nova/variables.css
@@ -0,0 +1,28 @@
+.nlux-AiChat-root.nlux-theme-nova {
+    --nlux-font-family: 'IBM Plex Sans';
+    --nlux-mono-font-family: monospace;
+
+    --nlux-font-weight: 400;
+    --nlux-line-height: 1.2;
+
+    --nlux-font-size: 1rem;
+    --nlux-font-size-s: 0.8rem;
+    --nlux-font-size-l: 1.2rem;
+
+    --nlux-padding-xs: 0.1rem;
+    --nlux-padding-s: 0.3rem;
+    --nlux-padding: 0.6rem;
+    --nlux-padding-m: 0.7rem;
+    --nlux-padding-l: 0.9rem;
+
+    --nlux-flex-gap: 0.8rem;
+
+    --nlux-border-radius-xs: 4px;
+    --nlux-border-radius-s: 6px;
+    --nlux-border-radius: 8px;
+    --nlux-border-radius-m: 10px;
+    --nlux-border-radius-l: 12px;
+
+    --nlux-border-width: 1px;
+    --nlux-box-shadow: none;
+}
diff --git a/packages/react/core/src/ui/SendIcon/SendIconComp.tsx b/packages/react/core/src/ui/SendIcon/SendIconComp.tsx
@@ -3,15 +3,7 @@ import {className as compSendIconClassName} from '../../../../../shared/src/ui/S
 export const SendIconComp = () => {
     return (
         <div className={compSendIconClassName}>
-            <svg fill="currentColor" version="1.1" viewBox="0 0 495 495" xmlSpace="preserve"
-                 xmlns="http://www.w3.org/2000/svg">
-                <path
-                    d="m164.71 456.69c0 2.966 1.647 5.686 4.266 7.072 2.617 1.385 5.799 1.207 8.245-0.468l55.09-37.616-67.6-32.22v63.232z"
-                />
-                <path
-                    d="m492.43 32.443c-1.513-1.395-3.466-2.125-5.44-2.125-1.19 0-2.377 0.264-3.5 0.816l-475.59 233.29c-4.861 2.389-7.937 7.353-7.904 12.783 0.033 5.423 3.161 10.353 8.057 12.689l125.34 59.724 250.62-205.99-219.56 220.79 156.14 74.4c1.918 0.919 4.012 1.376 6.084 1.376 1.768 0 3.519-0.322 5.186-0.977 3.637-1.438 6.527-4.318 7.97-7.956l154.6-390c1.224-3.069 0.426-6.578-2.005-8.814z"
-                />
-            </svg>
+            <div className="snd_icn_ctn"/>
         </div>
     );
 };
diff --git a/packages/shared/src/ui/SendIcon/create.ts b/packages/shared/src/ui/SendIcon/create.ts
@@ -3,15 +3,6 @@ export const className = 'nlux_sndIcn';
 export const createSendIconDom = () => {
     const sendIcon = document.createElement('div');
     sendIcon.classList.add(className);
-    sendIcon.innerHTML = `<div class="snd_icn_ctn">` +
-        `<svg fill="currentColor" version="1.1" viewBox="0 0 495 495" xml:space="preserve" xmlns="http://www.w3.org/2000/svg">`
-        +
-        `<path d="m164.71 456.69c0 2.966 1.647 5.686 4.266 7.072 2.617 1.385 5.799 1.207 8.245-0.468l55.09-37.616-67.6-32.22v63.232z"/>`
-        +
-        `<path d="m492.43 32.443c-1.513-1.395-3.466-2.125-5.44-2.125-1.19 0-2.377 0.264-3.5 0.816l-475.59 233.29c-4.861 2.389-7.937 7.353-7.904 12.783 0.033 5.423 3.161 10.353 8.057 12.689l125.34 59.724 250.62-205.99-219.56 220.79 156.14 74.4c1.918 0.919 4.012 1.376 6.084 1.376 1.768 0 3.519-0.322 5.186-0.977 3.637-1.438 6.527-4.318 7.97-7.956l154.6-390c1.224-3.069 0.426-6.578-2.005-8.814z"/>`
-        +
-        `</svg>` +
-        `</div>`;
-
+    sendIcon.innerHTML = `<div class="snd_icn_ctn"></div>`;
     return sendIcon;
 };
diff --git a/pipeline/npm/versions.json b/pipeline/npm/versions.json
@@ -1,6 +1,6 @@
 {
   "inherit": true,
-  "nlux": "2.1.2-beta",
+  "nlux": "2.1.4-beta",
   "peerDependencies": {
     "react": "18.2.0",
     "react-dom": "18.2.0"
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap');