Design pass (#8)

* first stab at bullet points
* setup theming, custom opacities, use of brand UI colors
* color key change
* delete brand
* setup initial defaults
* Add opacity parameter to primary color
* style TOC
* styling pass header, footer, hints, toc, trademark
* table pass
* style pass, typo, quote, tabs, search, theme, toc

src/components/Search/HighlightQuery.tsx

@@ -11,7 +11,7 @@ export function HighlightQuery(props: {
     /** Style to apply on matching parts (default to primary) */
     highlight?: ClassValue;
 }): React.ReactElement {
-    const { query, text, highlight = ['text-bold', 'text-primary-500'], ...textProps } = props;
+    const { query, text, highlight = ['text-bold', 'text-primary'], ...textProps } = props;
     const matches = matchString(text, query);
 
     return (

src/components/Search/SearchButton.tsx

@@ -30,13 +30,12 @@ export function SearchButton(props: { children?: React.ReactNode; style?: ClassV
                 'px-4',
                 'py-1',
                 'rounded',
-                'bg-slate-50',
-                'hover:bg-slate-100',
-                'text-base',
-                'text-slate-600',
-                'hover:text-slate-900',
+                'dark:bg-vanta/4',
+                'hover:bg-light',
                 'border',
-                'border-slate-200',
+                'border-dark/2',
+                'shadow-lg',
+                'dark:border-light/3',
                 style,
             )}
         >

src/components/Search/SearchModal.tsx

@@ -46,9 +46,9 @@ export function SearchModal(props: SearchModalProps) {
                 'justify-center',
                 'fixed',
                 'inset-0',
-                'bg-zinc-400/25',
-                'backdrop-blur-sm',
-                'dark:bg-black/40',
+                'bg-dark/4',
+                'backdrop-blur',
+                'dark:bg-dark/9',
                 'opacity-100',
                 'z-30',
                 'pt-24',
@@ -109,17 +109,18 @@ function SearchModalBody(
                 'bg-white',
                 'w-[600px]',
                 'max-h',
-                'rounded',
+                'rounded-3xl',
                 'border-slate-500',
                 'shadow-lg',
                 'overflow-hidden',
+                'dark:bg-metal',
             )}
             onClick={(event) => {
                 event.stopPropagation();
             }}
         >
-            <div className={tcls('flex', 'flex-row', 'items-center')}>
-                <div className={tcls('text-slate-400', 'p-3')}>
+            <div className={tcls('flex', 'flex-row', 'items-center', 'border-b', 'border-dark/2')}>
+                <div className={tcls('text-dark/4', 'p-3')}>
                     <IconSearch className={tcls('w-6', 'h-6')} />
                 </div>
                 <div className={tcls('flex-1')}>
@@ -128,7 +129,13 @@ function SearchModalBody(
                         value={query}
                         onKeyDown={onKeyDown}
                         onChange={onChange}
-                        className={tcls('w-full', 'p-2', 'text-slate-600', 'focus:outline-none')}
+                        className={tcls(
+                            'w-full',
+                            'p-2',
+                            'text-dark',
+                            'focus:outline-none',
+                            'bg-transparent',
+                        )}
                         placeholder={inputPlaceholder}
                     />
                 </div>

src/components/Search/SearchPageResultItem.tsx

@@ -22,13 +22,16 @@ export const SearchPageResultItem = React.forwardRef(function SearchPageResultIt
             href={item.href}
             className={tcls(
                 'flex',
-                'flex-col',
+                'flex-row',
                 'rounded',
-                'px-3',
+                'px-6',
                 'py-3',
-                'hover:bg-slate-50',
+                'hover:bg-dark/1',
                 'text-base',
-                'text-slate-600',
+                'text-dark',
+                'font-semibold',
+                'mt-6',
+                'first:mt-0',
                 active ? ['bg-primary-50'] : null,
             )}
         >

src/components/Search/SearchResults.tsx

@@ -100,9 +100,9 @@ export const SearchResults = React.forwardRef(function SearchResults(
     }
 
     return (
-        <div className={tcls('max-h-[60vh]', 'overflow-auto', 'px-3')}>
+        <div className={tcls('max-h-[60vh]', 'overflow-auto', 'px')}>
             {results.length === 0 ? (
-                <div className={tcls('text-sm', 'text-slate-400', 'p-6', 'text-center')}>
+                <div className={tcls('text-sm', 'text-dark', 'p-6', 'text-center')}>
                     {noResultsMessage}
                 </div>
             ) : (

src/components/Search/SearchSectionResultItem.tsx

@@ -19,24 +19,31 @@ export const SearchSectionResultItem = React.forwardRef(function SearchSectionRe
             className={tcls(
                 'flex',
                 'flex-col',
-                'rounded',
-                'px-3',
-                'py-3',
                 'pl-6',
-                'hover:bg-slate-50',
+                'hover:bg-dark/1',
                 active ? ['bg-primary-50'] : null,
             )}
         >
-            {item.title ? (
-                <p className={tcls('text-base', 'text-slate-600')}>
-                    <HighlightQuery query={query} text={item.title} />
-                </p>
-            ) : null}
-            {item.body ? (
-                <p className={tcls('text-sm', 'text-slate-400')}>
-                    <HighlightQuery query={query} text={item.body} />
-                </p>
-            ) : null}
+            <div className={tcls('border-l', 'p-3', 'border-dark/2')}>
+                {item.title ? (
+                    <p className={tcls('text-base', 'text-dark/7', 'dark:text-dark/7')}>
+                        <HighlightQuery query={query} text={item.title} />
+                    </p>
+                ) : null}
+                {item.body ? (
+                    <p
+                        className={tcls(
+                            'text-sm',
+                            'text-dark',
+                            'line-clamp-6',
+                            'linear-mask-gradient',
+                            'dark:text-dark',
+                        )}
+                    >
+                        <HighlightQuery query={query} text={item.body} />
+                    </p>
+                ) : null}
+            </div>
         </Link>
     );
 });