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/TableOfContents/PageDocumentItem.tsx

@@ -5,7 +5,7 @@ import { pageHref } from '@/lib/links';
 import { tcls } from '@/lib/tailwind';
 
 import { PagesList } from './PagesList';
-import { ToggeableLinkItem } from './ToggeableLinkItem';
+import { ToggleableLinkItem } from './ToggleableLinkItem';
 
 export function PageDocumentItem(props: {
     page: RevisionPageDocument;
@@ -29,28 +29,48 @@ export function PageDocumentItem(props: {
             'transition-colors',
             'duration-100',
             activePage.id === page.id
-                ? ['bg-primary-100', 'text-primary-500', 'font-semibold']
-                : ['hover:bg-slate-100', 'text-slate-500', 'font-normal'],
+                ? [
+                      'font-semibold',
+                      'text-primary',
+                      'bg-primary-500/3',
+                      'dark:text-primary-400',
+                      'dark:hover:bg-primary-500/5',
+                  ]
+                : [
+                      'font-normal',
+                      'text-dark/7',
+                      'hover:bg-dark/1',
+                      'dark:text-light/7',
+                      'dark:hover:bg-light/2',
+                  ],
         ),
     };
 
     return (
         <li className={tcls('flex', 'flex-col', 'mb-0.5')}>
             {page.pages && page.pages.length ? (
-                <ToggeableLinkItem
+                <ToggleableLinkItem
                     {...linkProps}
                     descendants={
                         <PagesList
                             pages={page.pages}
-                            style={tcls('ms-2', 'ps-3', 'my-2', 'border-l', 'border-slate-200')}
+                            style={tcls(
+                                'ms-2',
+                                'ps-3',
+                                'my-2',
+                                'border-l',
+                                'border-dark/3',
+                                'dark:border-light/2',
+                            )}
                             activePage={activePage}
                             ancestors={ancestors}
                         />
                     }
                     defaultOpen={hasActiveDescendant || activePage.id === page.id}
+                    isActive={activePage.id === page.id}
                 >
                     {page.title}
-                </ToggeableLinkItem>
+                </ToggleableLinkItem>
             ) : (
                 <Link {...linkProps}>{page.title}</Link>
             )}

src/components/TableOfContents/PageGroupItem.tsx

@@ -13,9 +13,7 @@ export function PageGroupItem(props: {
 
     return (
         <li className={tcls('flex', 'flex-col', 'my-3')}>
-            <div className={tcls('px-2', 'py-1.5', 'text-m', 'text-slate-900', 'font-medium')}>
-                {page.title}
-            </div>
+            <div className={tcls('px-2', 'py-2', 'text', 'font-medium')}>{page.title}</div>
             {page.pages && page.pages.length ? (
                 <PagesList pages={page.pages} activePage={activePage} ancestors={ancestors} />
             ) : null}

src/components/TableOfContents/TableOfContents.tsx

@@ -30,8 +30,6 @@ export function TableOfContents(
                 'shrink-0',
                 'sticky',
                 withHeaderOffset ? SIDE_COLUMN_WITH_HEADER : SIDE_COLUMN_WITHOUT_HEADER,
-                'border-r',
-                'border-slate-200',
             )}
         >
             {header ? <div className={tcls('pt-6', 'pb-3', 'pr-4')}>{header}</div> : null}

src/components/TableOfContents/ToggleableLinkItem.tsx

@@ -10,15 +10,16 @@ import { tcls } from '@/lib/tailwind';
 /**
  * Client component to allow toggling of a page's children.
  */
-export function ToggeableLinkItem(
+export function ToggleableLinkItem(
     props: LinkProps & {
         className?: string;
         children: React.ReactNode;
         descendants?: React.ReactNode;
         defaultOpen?: boolean;
+        isActive?: boolean;
     },
 ) {
-    const { children, descendants, defaultOpen = false, ...linkProps } = props;
+    const { children, descendants, defaultOpen = false, isActive = false, ...linkProps } = props;
 
     const [open, setOpen] = React.useState(defaultOpen);
     const Chevron = open ? IconChevronDown : IconChevronRight;
@@ -32,10 +33,14 @@ export function ToggeableLinkItem(
                         'w-5',
                         'h-5',
                         'p-0.5',
-                        'text-slate-600',
+                        'text-current',
                         'rounded',
-                        'hover:bg-slate-200',
-                        'hover:text-slate-700',
+                        'hover:bg-dark/2',
+                        'hover:text-current',
+                        'dark:hover:bg-light/2',
+                        'dark:hover:text-current',
+                        'transition-colors',
+                        isActive ? ['hover:bg-primary-500/5', 'dark:hover:bg-primary-500/5'] : [],
                     )}
                     onClick={(event) => {
                         event.preventDefault();

src/components/TableOfContents/Trademark.tsx

@@ -11,16 +11,19 @@ export function Trademark(props: IntlContext) {
                 href="https://www.gitbook.com"
                 className={tcls(
                     'text-m',
-                    'text-slate-500',
+                    'text-dark/8',
                     'font-normal',
                     'px-4',
                     'py-3',
                     'mr-4',
                     'my-4',
                     'rounded-lg',
-                    'bg-white',
-                    'bg-slate-50',
-                    'hover:bg-slate-100',
+                    'bg-dark/1',
+                    'hover:bg-dark/2',
+                    'transition-colors',
+                    'dark:bg-vanta/5',
+                    'dark:text-light/5',
+                    'dark:hover:bg-vanta/6',
                 )}
             >
                 {t(props, 'powered_by_gitbook')}