Merge pull request #26 from reaviz/light-theme

Light theme
reaviz · Aug 2, 2024 · da9aa9b · da9aa9b
2 parents da08dad + e1d97a5
commit da9aa9b
Show file tree

Hide file tree

Showing 8 changed files with 157 additions and 117 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/assets/trash.svg b/src/assets/trash.svg
diff --git a/src/theme.ts b/src/theme.ts
@@ -81,20 +81,27 @@ export interface ChatTheme {
 }
 
 export const chatTheme: ChatTheme = {
-  base: 'text-white',
+  base: 'dark:text-white text-gray-500',
   console: 'flex w-full gap-5 h-full',
   companion: 'w-full h-full overflow-hidden',
   empty: 'text-center flex-1',
   sessions: {
     base: 'overflow-auto',
-    console: 'min-w-[150px] w-[30%] max-w-[300px] bg-[#11111F] p-5 rounded-3xl',
+    console:
+      'min-w-[150px] w-[30%] max-w-[300px] dark:bg-[#11111F] bg-[#F2F3F7] p-5 rounded-3xl',
     companion: 'w-full h-full',
-    group: 'text-xs text-gray-400 mt-4 hover:bg-transparent mb-1',
-    create: 'relative mb-4 rounded-[10px]',
+    group:
+      'text-xs dart:text-gray-400 text-gray-700 mt-4 hover:bg-transparent mb-1',
+    create: 'relative mb-4 rounded-[10px] text-white',
     session: {
-      base: 'my-1 rounded-[10px] p-2 text-typography hover:bg-gray-800/50 border border-transparent hover:border-gray-700/50',
-      active:
-        'bg-gray-800/70 border border-gray-700/70 hover:bg-gray-800/50 border-gray-700/50 text-white',
+      base: [
+        'my-1 rounded-[10px] p-2 text-gray-500 border border-transparent hover:bg-gray-300 hover:border-gray-400 [&_svg]:text-gray-500',
+        'dark:text-typography dark:text-gray-400 dark:hover:bg-gray-800/50 dark:hover:border-gray-700/50 dark:[&_svg]:text-gray-200'
+      ].join(' '),
+      active: [
+        'border border-gray-300 hover:border-gray-400 text-gray-700 bg-gray-200 hover:bg-gray-300 ',
+        'dark:text-gray-500 dark:bg-gray-800/70 dark:border-gray-700/50 dark:text-white dark:border-gray-700/70 dark:hover:bg-gray-800/50'
+      ].join(' '),
       delete: '[&>svg]:w-4 [&>svg]:h-4 opacity-50'
     }
   },
@@ -104,37 +111,51 @@ export const chatTheme: ChatTheme = {
     companion: 'flex w-full h-full',
     back: 'self-start p-0 my-2',
     inner: 'flex-1 h-full flex flex-col',
-    title: 'text-2xl font-bold',
-    date: 'text-sm whitespace-nowrap pt-2',
-    content: 'mt-2 flex-1 overflow-auto',
+    title: ['text-2xl font-bold text-gray-500', 'dark:text-gray-200'].join(' '),
+    date: 'text-sm whitespace-nowrap pt-2 text-gray-400',
+    content: [
+      'mt-2 flex-1 overflow-auto [&_hr]:bg-gray-200',
+      'dark:[&_hr]:bg-gray-800/60'
+    ].join(' '),
     header: 'flex justify-between items-start gap-2',
     showMore: 'mb-4',
     message: {
-      base: 'mt-4 mb-4 flex flex-col p-0 rounded border-none',
-      question:
-        'font-semibold text-gray-400 mb-4 px-4 py-3 pb-1 rounded-3xl rounded-br-none text-typography bg-gray-900/60 border border-gray-700/50',
-      response: '',
+      base: [
+        'mt-4 mb-4 flex flex-col p-0 rounded border-none bg-white',
+        'dark:bg-panel'
+      ].join(' '),
+      question: [
+        'font-semibold mb-4 px-4 py-3 pb-1 rounded-3xl rounded-br-none text-typography border bg-gray-200 border-gray-300 text-gray-900',
+        'dark:bg-gray-900/60 dark:border-gray-700/50 dark:text-gray-100'
+      ].join(' '),
+      response: ['text-gray-900', 'dark:text-gray-100'].join(' '),
       cursor: 'inline-block w-1 h-4 bg-current',
       files: {
         base: 'mb-2 flex flex-wrap gap-3 ',
         file: {
-          base: 'flex items-center gap-2 border border-gray-700 p-2 rounded cursor-pointer',
-          name: 'text-sm'
+          base: [
+            'flex items-center gap-2 border border-gray-300 p-2 rounded cursor-pointer',
+            'dark:border-gray-700'
+          ].join(' '),
+          name: ['text-sm text-gray-500', 'dark:text-gray-200'].join(' ')
         }
       },
       sources: {
         base: 'my-4 flex flex-wrap gap-3',
         source: {
-          base: 'flex gap-2 border border-gray-700 p-2 rounded cursor-pointer',
+          base: [
+            'flex gap-2 border border-gray-200 p-2 rounded cursor-pointer',
+            'dark:border-gray-700'
+          ].join(' '),
           image: 'w-6 h-6 rounded-md',
           title: 'text-md block',
-          url: 'text-sm text-blue-700 underline'
+          url: 'text-sm text-blue-400 underline'
         }
       },
       markdown: {
         copy: 'absolute right-0 top-0 [&>svg]:w-4 [&>svg]:h-4 opacity-50',
         p: 'mb-2',
-        a: 'text-blue-700 underline',
+        a: 'text-blue-400 underline',
         table: 'table-auto w-full m-2',
         th: 'px-4 py-2 text-left font-bold border-b border-gray-500',
         td: 'px-4 py-2',
@@ -144,8 +165,11 @@ export const chatTheme: ChatTheme = {
         ol: 'mb-4 list-decimal'
       },
       footer: {
-        base: 'mt-3 flex gap-1.5',
-        copy: 'p-3 rounded-[10px] [&>svg]:w-4 [&>svg]:h-4 opacity-50 hover:!opacity-100 hover:bg-gray-700/40 hover:text-white',
+        base: 'mt-3 flex gap-1.5 text-gray-400',
+        copy: [
+          'p-3 rounded-[10px] [&>svg]:w-4 [&>svg]:h-4 opacity-50 hover:!opacity-100 hover:bg-gray-200 hover:text-gray-500',
+          'dark:hover:bg-gray-800 dark:hover:text-white'
+        ].join(' '),
         upvote:
           'p-3 rounded-[10px] [&>svg]:w-4 [&>svg]:h-4 opacity-50 hover:!opacity-100 hover:bg-gray-700/40 hover:text-white',
         downvote:
@@ -157,12 +181,17 @@ export const chatTheme: ChatTheme = {
   },
   input: {
     base: 'flex mt-4 relative',
-    upload: 'px-5 py-2 text-white size-10',
-    input:
-      'w-full text-typography border border-gray-700/70 rounded-3xl px-3 py-2 pr-16 after:!mx-10 [&>textarea]:w-full [&>textarea]:flex-none',
+    upload: ['px-5 py-2 text-gray-400 size-10', 'dark:gray-500'].join(' '),
+    input: [
+      'w-full border rounded-3xl px-3 py-2 pr-16 text-gray-500 border-gray-200 hover:bg-blue-100 hover:border-blue-500 after:hidden after:!mx-10 bg-white [&>textarea]:w-full [&>textarea]:flex-none',
+      'dark:border-gray-700/50 dark:text-gray-200 dark:bg-gray-950 dark:hover:bg-blue-950/40'
+    ].join(' '),
     actions: {
       base: 'absolute flex gap-2 items-center right-5 inset-y-1/2 -translate-y-1/2 z-10',
-      send: 'px-3 py-3 text-white bg-gray-800 hover:bg-primary-hover rounded-full ',
+      send: [
+        'px-3 py-3 hover:bg-primary-hover rounded-full bg-gray-200 hover:bg-gray-300 text-gray-500',
+        'dark:text-white dark:bg-gray-800 hover:dark:bg-gray-700'
+      ].join(' '),
       stop: 'px-2 py-2 bg-red-500 text-white rounded-full hover:bg-red-700 '
     }
   }

diff --git a/stories/Companion.stories.tsx b/stories/Companion.stories.tsx
@@ -34,11 +34,11 @@ export const Basic = () => {
   ]);
   return (
     <div
+      className="dark:bg-gray-950 bg-white"
       style={{
         width: 350,
         height: 500,
         padding: 20,
-        background: '#02020F',
         borderRadius: 5
       }}
     >
@@ -100,11 +100,11 @@ export const Basic = () => {
 export const Empty = () => {
   return (
     <div
+      className="dark:bg-gray-950 bg-white"
       style={{
         width: 350,
         height: 500,
         padding: 20,
-        background: '#02020F',
         borderRadius: 5
       }}
     >