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/PageAside/PageAside.tsx

@@ -36,7 +36,7 @@ export function PageAside(props: {
         >
             {sections.length > 0 ? (
                 <>
-                    <div className={tcls('text-sm', 'text-slate-500', 'font-semibold', 'pb-3')}>
+                    <div className={tcls('text-sm', 'font-semibold', 'pb-3')}>
                         {t({ space }, 'on_this_page')}
                     </div>
                     <div className={tcls('overflow-auto', 'flex-1')}>

src/components/PageAside/ScrollSectionsList.tsx

@@ -26,10 +26,10 @@ export function ScrollSectionsList(props: { sections: DocumentSection[] }) {
                             'flex-row',
                             'text-sm',
                             section.depth > 1
-                                ? ['font-light', 'ps-3', 'py-1', 'text-slate-500']
-                                : ['py-2', 'text-slate-700'],
+                                ? ['font-light', 'ps-3', 'py-1', 'text-light/5']
+                                : ['py-2', 'text-light/7'],
 
-                            activeId === section.id ? 'text-primary-500' : 'hover:text-slate-900',
+                            activeId === section.id ? 'text-primary' : 'hover:text-light/9',
                         )}
                     >
                         {section.depth > 1 ? (