feat(search-component): enhance styling and font integration for improved UI consistency

skeptrunedev · cdxker · commit 61c01b4d1610 · 2025-04-14T13:57:13.000-07:00
diff --git a/clients/search-component/example/index.html b/clients/search-component/example/index.html
@@ -34,6 +34,12 @@
     />
     <meta property="og:type" content="" />
     <meta property="og:image" content="https://cdn.trieve.ai/trieve-og.png" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Karla:ital,wght@0,200..800;1,200..800&family=Work+Sans:ital,wght@0,100..900;1,100..900&display=swap"
+      rel="stylesheet"
+    />
     <title>Design Muse by Trieve</title>
   </head>
   <body>
diff --git a/clients/search-component/example/src/index.css b/clients/search-component/example/src/index.css
@@ -3,7 +3,8 @@
 @tailwind utilities;
 
 :root {
-  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+  font-family: var(--tv-prop-brand-font-family), system-ui, Avenir, Helvetica,
+    Arial, sans-serif;
   line-height: 1.5;
   font-weight: 400;
 
diff --git a/clients/search-component/example/src/routes/searchpage.tsx b/clients/search-component/example/src/routes/searchpage.tsx
@@ -237,13 +237,13 @@ export default function ECommerce() {
     <>
       <div className="min-w-screen max-w-[96rem] mx-auto min-h-screen relative p-2">
         <div className="w-full flex justify-between my-2 py-4 px-2 border-b">
-          <p className="text-3xl font-semibold">Design Muse</p>
+          <p className="text-3xl font-bold">Design Muse</p>
           <a
             href={tutorialUrl}
             target="_blank"
             rel="noopener noreferrer"
             data-slot="button"
-            className="cursor-pointer justify-center whitespace-nowrap text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg:not([class*='size-'])]:size-4 shrink-0 [&amp;_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 h-8 rounded-md px-3 has-[>svg]:px-2.5 flex items-center gap-1 hover:bg-neutral-100"
+            className="cursor-pointer justify-center whitespace-nowrap text-sm transition-all disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg:not([class*='size-'])]:size-4 shrink-0 [&amp;_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 h-8 rounded-xl px-3 has-[>svg]:px-2.5 flex items-center gap-1 hover:bg-neutral-100 font-semibold"
           >
             <svg
               xmlns="http://www.w3.org/2000/svg"
@@ -271,6 +271,7 @@ export default function ECommerce() {
             inline={true}
             defaultSearchMode="chat"
             allowSwitchingModes={false}
+            brandFontFamily="Karla"
             brandColor="#000"
             type="ecommerce"
             searchOptions={{
diff --git a/clients/search-component/src/TrieveModal/index.css b/clients/search-component/src/TrieveModal/index.css
@@ -1551,7 +1551,7 @@ body {
     }
 
     label {
-      @apply tv-cursor-pointer tv-text-sm;
+      @apply tv-cursor-pointer;
     }
   }
 
@@ -1568,15 +1568,15 @@ body {
       &[data-prev-complete="false"] {
         .trieve-inference-filters-step-header {
           .trieve-inference-filters-step-number {
-            background-color: var(--tv-zinc-400);
+            background-color: #86868b;
           }
 
           .trieve-inference-filters-step-title {
-            color: var(--tv-zinc-400);
+            color: #86868b;
           }
 
           .trieve-inference-filters-step-description {
-            color: var(--tv-zinc-400);
+            color: #86868b;
           }
         }
       }
@@ -1590,12 +1590,12 @@ body {
         }
 
         .trieve-inference-filters-step-title {
-          @apply tv-text-lg tv-font-medium;
+          @apply tv-text-xl tv-font-bold;
         }
       }
 
       .trieve-inference-filters-step-description {
-        @apply tv-mt-0.5 tv-text-gray-500;
+        @apply tv-mt-0.5 tv-text-[#86868b] tv-font-bold;
       }
 
       .trieve-inference-filters-step-input-container {
@@ -1606,7 +1606,7 @@ body {
         }
 
         .trieve-image-input-container {
-          @apply tv-border-dashed tv-border-2 tv-rounded-lg tv-px-2 tv-py-4 tv-mt-4 tv-flex-col tv-items-center tv-justify-center tv-cursor-pointer;
+          @apply tv-border-dashed tv-border-2 tv-rounded-xl tv-px-2 tv-py-4 tv-mt-4 tv-flex-col tv-items-center tv-justify-center tv-cursor-pointer;
 
           display: none;
 
@@ -1646,7 +1646,7 @@ body {
           }
 
           .trieve-image-input-placeholder {
-            @apply tv-text-sm tv-mt-6 tv-max-w-[75%] tv-text-center;
+            @apply tv-mt-6 tv-max-w-[75%] tv-text-center;
           }
         }
 
@@ -1685,7 +1685,7 @@ body {
 
             .trieve-text-input-textarea-container {
               .trieve-text-input-textarea {
-                @apply tv-block tv-w-full tv-rounded-md tv-bg-white tv-px-3 tv-py-1.5 tv-outline tv-outline-1 tv--outline-offset-1 tv-outline-gray-300 placeholder:tv-text-gray-400 focus:tv-outline focus:tv-outline-2 focus:tv--outline-offset-2 sm:tv-text-sm/6;
+                @apply tv-block tv-w-full tv-rounded-xl tv-bg-white tv-px-3 tv-py-1.5 tv-outline tv-outline-1 tv--outline-offset-1 tv-outline-gray-300 placeholder:tv-text-gray-400 focus:tv-outline focus:tv-outline-2 focus:tv--outline-offset-2 tv-text-black;
 
                 &:focus,
                 &:hover {
@@ -1699,7 +1699,7 @@ body {
             @apply tv-flex tv-w-full tv-mt-4;
 
             .trieve-text-input-button {
-              @apply tv-flex tv-items-center tv-justify-center tv-px-3 tv-py-1.5 tv-rounded-md tv-gap-x-1;
+              @apply tv-flex tv-items-center tv-justify-center tv-px-3 tv-py-1.5 tv-rounded-xl tv-gap-x-1;
 
               background-color: var(--tv-prop-brand-color);
               color: white;
@@ -1754,7 +1754,7 @@ body {
             }
 
             button.trieve-inference-filters-step-tag {
-              @apply tv-flex tv-items-center tv-gap-x-1 tv-py-1 tv-px-2 tv-rounded-lg tv-cursor-pointer tv-bg-zinc-100;
+              @apply tv-flex tv-items-center tv-gap-x-1 tv-py-1 tv-px-2 tv-rounded-xl tv-cursor-pointer tv-bg-zinc-100;
 
               &[data-active="true"] {
                 background-color: var(--tv-prop-brand-color);
diff --git a/server/src/public/search-component-code.html b/server/src/public/search-component-code.html
@@ -61,6 +61,9 @@
       {% if params.brandColor -%}
       brandColor: "{{ params.brandColor }}",
       {% endif -%}
+      {% if params.brandFontFamily -%}
+      brandFontFamily: "{{ params.brandFontFamily }}",
+      {% endif -%}
       {% if params.placeholder -%}
       placeholder: "{{ params.placeholder }}",
       {% endif -%}

Original file line number	Diff line number	Diff line change
`@@ -1551,7 +1551,7 @@ body {`
`1551`	`1551`	`}`
`1552`	`1552`
`1553`	`1553`	`label {`
`1554`		`- @apply tv-cursor-pointer tv-text-sm;`
	`1554`	`+ @apply tv-cursor-pointer;`
`1555`	`1555`	`}`
`1556`	`1556`	`}`
`1557`	`1557`
`@@ -1568,15 +1568,15 @@ body {`
`1568`	`1568`	`&[data-prev-complete="false"] {`
`1569`	`1569`	`.trieve-inference-filters-step-header {`
`1570`	`1570`	`.trieve-inference-filters-step-number {`
`1571`		`- background-color: var(--tv-zinc-400);`
	`1571`	`+ background-color: #86868b;`
`1572`	`1572`	`}`
`1573`	`1573`
`1574`	`1574`	`.trieve-inference-filters-step-title {`
`1575`		`- color: var(--tv-zinc-400);`
	`1575`	`+ color: #86868b;`
`1576`	`1576`	`}`
`1577`	`1577`
`1578`	`1578`	`.trieve-inference-filters-step-description {`
`1579`		`- color: var(--tv-zinc-400);`
	`1579`	`+ color: #86868b;`
`1580`	`1580`	`}`
`1581`	`1581`	`}`
`1582`	`1582`	`}`
`@@ -1590,12 +1590,12 @@ body {`
`1590`	`1590`	`}`
`1591`	`1591`
`1592`	`1592`	`.trieve-inference-filters-step-title {`
`1593`		`- @apply tv-text-lg tv-font-medium;`
	`1593`	`+ @apply tv-text-xl tv-font-bold;`
`1594`	`1594`	`}`
`1595`	`1595`	`}`
`1596`	`1596`
`1597`	`1597`	`.trieve-inference-filters-step-description {`
`1598`		`- @apply tv-mt-0.5 tv-text-gray-500;`
	`1598`	`+ @apply tv-mt-0.5 tv-text-[#86868b] tv-font-bold;`
`1599`	`1599`	`}`
`1600`	`1600`
`1601`	`1601`	`.trieve-inference-filters-step-input-container {`
`@@ -1606,7 +1606,7 @@ body {`
`1606`	`1606`	`}`
`1607`	`1607`
`1608`	`1608`	`.trieve-image-input-container {`
`1609`		`- @apply tv-border-dashed tv-border-2 tv-rounded-lg tv-px-2 tv-py-4 tv-mt-4 tv-flex-col tv-items-center tv-justify-center tv-cursor-pointer;`
	`1609`	`+ @apply tv-border-dashed tv-border-2 tv-rounded-xl tv-px-2 tv-py-4 tv-mt-4 tv-flex-col tv-items-center tv-justify-center tv-cursor-pointer;`
`1610`	`1610`
`1611`	`1611`	`display: none;`
`1612`	`1612`
`@@ -1646,7 +1646,7 @@ body {`
`1646`	`1646`	`}`
`1647`	`1647`
`1648`	`1648`	`.trieve-image-input-placeholder {`
`1649`		`- @apply tv-text-sm tv-mt-6 tv-max-w-[75%] tv-text-center;`
	`1649`	`+ @apply tv-mt-6 tv-max-w-[75%] tv-text-center;`
`1650`	`1650`	`}`
`1651`	`1651`	`}`
`1652`	`1652`
`@@ -1685,7 +1685,7 @@ body {`
`1685`	`1685`
`1686`	`1686`	`.trieve-text-input-textarea-container {`
`1687`	`1687`	`.trieve-text-input-textarea {`
`1688`		`- @apply tv-block tv-w-full tv-rounded-md tv-bg-white tv-px-3 tv-py-1.5 tv-outline tv-outline-1 tv--outline-offset-1 tv-outline-gray-300 placeholder:tv-text-gray-400 focus:tv-outline focus:tv-outline-2 focus:tv--outline-offset-2 sm:tv-text-sm/6;`
	`1688`	`+ @apply tv-block tv-w-full tv-rounded-xl tv-bg-white tv-px-3 tv-py-1.5 tv-outline tv-outline-1 tv--outline-offset-1 tv-outline-gray-300 placeholder:tv-text-gray-400 focus:tv-outline focus:tv-outline-2 focus:tv--outline-offset-2 tv-text-black;`
`1689`	`1689`
`1690`	`1690`	`&:focus,`
`1691`	`1691`	`&:hover {`
`@@ -1699,7 +1699,7 @@ body {`
`1699`	`1699`	`@apply tv-flex tv-w-full tv-mt-4;`
`1700`	`1700`
`1701`	`1701`	`.trieve-text-input-button {`
`1702`		`- @apply tv-flex tv-items-center tv-justify-center tv-px-3 tv-py-1.5 tv-rounded-md tv-gap-x-1;`
	`1702`	`+ @apply tv-flex tv-items-center tv-justify-center tv-px-3 tv-py-1.5 tv-rounded-xl tv-gap-x-1;`
`1703`	`1703`
`1704`	`1704`	`background-color: var(--tv-prop-brand-color);`
`1705`	`1705`	`color: white;`
`@@ -1754,7 +1754,7 @@ body {`
`1754`	`1754`	`}`
`1755`	`1755`
`1756`	`1756`	`button.trieve-inference-filters-step-tag {`
`1757`		`- @apply tv-flex tv-items-center tv-gap-x-1 tv-py-1 tv-px-2 tv-rounded-lg tv-cursor-pointer tv-bg-zinc-100;`
	`1757`	`+ @apply tv-flex tv-items-center tv-gap-x-1 tv-py-1 tv-px-2 tv-rounded-xl tv-cursor-pointer tv-bg-zinc-100;`
`1758`	`1758`
`1759`	`1759`	`&[data-active="true"] {`
`1760`	`1760`	`background-color: var(--tv-prop-brand-color);`