exported height and max height properties for prompt input's style

nlkitai · Jul 9, 2024 · 1e304da · 1e304da
1 parent 060193b
commit 1e304da
Show file tree

Hide file tree

Showing 7 changed files with 13 additions and 4 deletions.
diff --git a/packages/css/themes/src/common/components/Composer.css b/packages/css/themes/src/common/components/Composer.css
@@ -8,7 +8,7 @@
 
     > textarea {
         height:100%;
-        max-height: 80px; /* Set maximum height the textarea can expand to */ 
+        max-height: var(--nlux-prmInp-mxhg); /* Set maximum height the textarea can expand to */ 
         field-sizing: content;
 
         font-family: var(--nlux-prmInp--ftFm), sans-serif;

diff --git a/packages/css/themes/src/common/layout.css b/packages/css/themes/src/common/layout.css
@@ -102,7 +102,8 @@
     --nlux-prmInp--brdrWd: var(--nlux-PromptInput--BorderWidth);
     --nlux-prmInp--brdrRd: var(--nlux-PromptInput--BorderRadius);
     --nlux-prmInp-fcs-otln--wd: var(--nlux-PromptInput-Focus-Outline--Width, 6px);
-
+    --nlux-prmInp-mxhg: var(--nlux-PromptInput-Max-Height, 80px);
+    --nlux-prmInp-hg: var(--nlux-PromptInput-Height, 60px);
     /** Conversation starters */
     --nlux-cvStrt--pdng: var(--nlux-ConversationStarter--Padding, 0 10px);
     --nlux-cvStrt--brdrRd: var(--nlux-ConversationStarter--BorderRadius);

diff --git a/packages/css/themes/src/common/structure.css b/packages/css/themes/src/common/structure.css
@@ -38,7 +38,7 @@
         }
 
         > .nlux-composer-container {
-            min-height: 60px;
+            min-height: var(--nlux-prmInp-hg);
             width: 100%;
             display: flex;
             flex-direction: row;

diff --git a/packages/css/themes/src/dev/layout.css b/packages/css/themes/src/dev/layout.css
@@ -84,6 +84,8 @@
     --nlux-PromptInput--BorderWidth: 5px;
     --nlux-PromptInput--BorderRadius: 8px;
     --nlux-PromptInput-Focus-Outline--Width: 5px;
+    --nlux-PromptInput-Max-Height: 80px;
+    --nlux-PromptInput-Height: 60px;
 
     /** 👇 Submit button */
     --nlux-SubmitButton--Width: 65px;

diff --git a/packages/css/themes/src/luna/layout.css b/packages/css/themes/src/luna/layout.css
@@ -114,7 +114,9 @@
     --nlux-PromptInput--BorderWidth: var(--nlux-luna--BorderWidth);
     --nlux-PromptInput--BorderRadius: var(--nlux-luna--BorderRadius);
     --nlux-PromptInput-Focus-Outline--Width: var(--nlux-luna--BorderWidth);
-
+    --nlux-PromptInput-Max-Height: 80px;
+    --nlux-PromptInput-Height: 60px;
+
     /** Conversation starters */
     --nlux-ConversationStarter--Padding: 0 10px;
     --nlux-ConversationStarter--BorderRadius: var(--nlux-luna--BorderRadius);

diff --git a/packages/css/themes/src/nova/layout.css b/packages/css/themes/src/nova/layout.css
@@ -113,6 +113,8 @@
     --nlux-PromptInput--BorderWidth: 0;
     --nlux-PromptInput--BorderRadius: 12px;
     --nlux-PromptInput-Focus-Outline--Width: 2px;
+    --nlux-PromptInput-Max-Height: 80px;
+    --nlux-PromptInput-Height: 60px;
 
     /** Conversation starters */
     --nlux-ConversationStarter--Padding: 0 10px;

diff --git a/packages/css/themes/src/openai/layout.css b/packages/css/themes/src/openai/layout.css
@@ -113,6 +113,8 @@
     --nlux-PromptInput--BorderWidth: 0;
     --nlux-PromptInput--BorderRadius: 12px;
     --nlux-PromptInput-Focus-Outline--Width: 2px;
+    --nlux-PromptInput-Max-Height: 80px;
+    --nlux-PromptInput-Height: 60px;
 
     /** Conversation starters */
     --nlux-ConversationStarter--Padding: 0 10px;