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/DocumentView/BlockContentRef.tsx

@@ -23,12 +23,14 @@ export async function BlockContentRef(props: BlockProps<DocumentBlockContentRef>
                 'items-center',
                 'rounded',
                 'border',
-                'border-slate-200',
-                'hover:border-slate-300',
+                'border-dark/2',
+                'hover:border-dark/4',
                 'px-5',
                 'py-2',
-                'text-slate-500',
-                'hover:text-slate-700',
+                'hover:text-dark',
+                'dark:border-light/2',
+                'dark:hover:text-light',
+                'dark:hover:border-light/4',
                 style,
             )}
         >

src/components/DocumentView/Blocks.tsx

@@ -21,23 +21,9 @@ export function Blocks<T extends DocumentBlock, Tag extends React.ElementType =
 
         /** Style passed to all blocks */
         blockStyle?: ClassValue;
-
-        /** Style passed to the first block */
-        firstBlockStyle?: ClassValue;
-
-        /** Style passed to the last block */
-        lastBlockStyle?: ClassValue;
     },
 ) {
-    const {
-        nodes,
-        tag: Tag = 'div',
-        style,
-        blockStyle = ['mt-6'],
-        firstBlockStyle = ['mt-0'],
-        lastBlockStyle,
-        ...contextProps
-    } = props;
+    const { nodes, tag: Tag = 'div', style, blockStyle, ...contextProps } = props;
 
     return (
         <Tag className={tcls(style)}>
@@ -45,13 +31,7 @@ export function Blocks<T extends DocumentBlock, Tag extends React.ElementType =
                 <Block
                     key={node.key}
                     block={node}
-                    style={[
-                        'max-w-3xl', // Default max size for blocks, can be overridden in the block implementation
-                        'mx-auto',
-                        blockStyle,
-                        index === 0 && firstBlockStyle,
-                        index === nodes.length - 1 && lastBlockStyle,
-                    ]}
+                    style={['max-w-3xl', 'w-full', 'mx-auto', 'leading-relaxed', blockStyle]}
                     {...contextProps}
                 />
             ))}

src/components/DocumentView/Heading.tsx

@@ -21,7 +21,9 @@ export function Heading(props: BlockProps<DocumentBlockHeading>) {
             <div
                 className={tcls(
                     'absolute',
-                    ' -ml-8',
+                    '-left-7',
+                    'ml-full',
+                    'w-7',
                     'hidden',
                     'items-center',
                     'border-0',
@@ -41,21 +43,22 @@ export function Heading(props: BlockProps<DocumentBlockHeading>) {
                         'w-6',
                         'items-center',
                         'justify-center',
-                        'rounded-md',
-                        'text-slate-400',
-                        'shadow-sm',
-                        'ring-1',
-                        'ring-slate-900/5',
-                        'hover:text-slate-700',
-                        'hover:shadow',
-                        'hover:ring-slate-900/10',
-                        'dark:bg-slate-700',
-                        'dark:text-slate-300',
+                        'transition-colors',
+                        'dark:text-light/3',
                         'dark:shadow-none',
                         'dark:ring-0',
                     )}
                 >
-                    <IconHash className={tcls('w-4', 'h-4')} />
+                    <IconHash
+                        className={tcls(
+                            'w-4',
+                            'h-4',
+                            'stroke-dark/5',
+                            'group-hover:stroke-dark/6',
+                            'dark:stroke-light/2',
+                            'dark:group-hover:stroke-light/4',
+                        )}
+                    />
                 </a>
             </div>
 

src/components/DocumentView/Hint.tsx

@@ -22,8 +22,7 @@ export function Hint(props: BlockProps<DocumentBlockHint>) {
                 'flex-row',
                 'px-4',
                 'py-4',
-                'bg-slate-50',
-                'dark:bg-slate-900',
+                'transition-colors',
                 'rounded',
                 'border-l-4',
                 hintStyle.style,
@@ -36,6 +35,7 @@ export function Hint(props: BlockProps<DocumentBlockHint>) {
                     'items-center',
                     'justify-center',
                     'pr-3',
+
                     firstLine.lineHeight,
                     hintStyle.iconStyle,
                 )}
@@ -46,7 +46,7 @@ export function Hint(props: BlockProps<DocumentBlockHint>) {
                 {...contextProps}
                 ancestorBlocks={[...ancestorBlocks, block]}
                 nodes={block.nodes}
-                style={['flex-1']}
+                style={['flex-1', 'space-y-8']}
             />
         </div>
     );
@@ -61,22 +61,22 @@ const HINT_STYLES: {
 } = {
     info: {
         icon: IconInfo,
-        iconStyle: ['text-blue-500'],
-        style: ['border-blue-500'],
+        iconStyle: ['text-current'],
+        style: ['border-dark/2', 'bg-dark/2', 'dark:bg-light/1', 'dark:border-light/3'],
     },
     warning: {
         icon: IconAlertCircle,
-        iconStyle: ['text-orange-500'],
-        style: ['border-orange-500'],
+        iconStyle: ['text-yellow, dark:text-yellow/1, dark:text-yellow/8'],
+        style: ['border-yellow/4', 'bg-yellow', 'dark:bg-yellow/1'],
     },
     danger: {
         icon: IconAlertTriangle,
-        iconStyle: ['text-red-500'],
-        style: ['border-red-500'],
+        iconStyle: ['text-pomegranate'],
+        style: ['border-pomegranate/4', 'bg-pomegranate/2', 'dark:bg-pomegranate/1'],
     },
     success: {
         icon: IconCheckInCircle,
-        iconStyle: ['text-green-500'],
-        style: ['border-green-500'],
+        iconStyle: ['text-teal'],
+        style: ['border-teal/4', 'bg-teal/2', 'dark:bg-teal/2'],
     },
 };

src/components/DocumentView/Images.tsx

@@ -22,6 +22,7 @@ export function Images(props: BlockProps<DocumentBlockImages>) {
                 block.data.align === 'left' && 'justify-start',
                 style,
                 block.data.fullWidth ? 'max-w-full' : null,
+                'justify-center',
             )}
         >
             {block.nodes.map((node: any, i: number) => (

src/components/DocumentView/Link.tsx

@@ -20,10 +20,7 @@ export async function Link(props: InlineProps<DocumentInlineLink>) {
     }
 
     return (
-        <NextLink
-            href={resolved.href}
-            className="underline text-primary-600 hover:text-primary-800"
-        >
+        <NextLink href={resolved.href} className="underline text-primary hover:text-primary-700">
             <Inlines context={context} nodes={inline.nodes} />
         </NextLink>
     );

src/components/DocumentView/ListItem.tsx

@@ -13,13 +13,14 @@ export function ListItem(props: BlockProps<DocumentBlockListItem>) {
     return (
         <li className={tcls('text-base', 'font-normal')}>
             {isTaskList ? (
-                <div className={tcls('flex', 'flex-row')}>
+                <div className={tcls('flex', 'flex-row', 'items-baseline')}>
                     <input type="checkbox" disabled checked={block.data?.checked} />
                     <Blocks
                         {...contextProps}
                         nodes={block.nodes}
                         ancestorBlocks={[...ancestorBlocks, block]}
-                        blockStyle={tcls('mt-6', 'first:mt-0', 'last:mt-0', 'flex-1')}
+                        blockStyle={tcls('flex-1')}
+                        style={tcls('ml-2', 'space-y-2')}
                     />
                 </div>
             ) : (
@@ -27,7 +28,7 @@ export function ListItem(props: BlockProps<DocumentBlockListItem>) {
                     {...contextProps}
                     nodes={block.nodes}
                     ancestorBlocks={[...ancestorBlocks, block]}
-                    blockStyle={tcls('mt-6', 'first:mt-0', 'last:mt-0')}
+                    style={tcls('space-y-2')}
                 />
             )}
         </li>

src/components/DocumentView/ListOrdered.tsx

@@ -12,7 +12,7 @@ export function ListOrdered(props: BlockProps<DocumentBlockListOrdered>) {
             tag="ol"
             nodes={block.nodes}
             ancestorBlocks={[...ancestorBlocks, block]}
-            style={['list-decimal', 'ps-8', style]}
+            style={['list-decimal', 'ps-8', 'space-y-2', style]}
         />
     );
 }

src/components/DocumentView/ListTasks.tsx

@@ -12,7 +12,7 @@ export function ListTasks(props: BlockProps<DocumentBlockListTasks>) {
             tag="ul"
             nodes={block.nodes}
             ancestorBlocks={[...ancestorBlocks, block]}
-            style={['list-disc', 'ps-8', style]}
+            style={['list-none', 'ps-4', 'space-y-2', style]}
         />
     );
 }

src/components/DocumentView/ListUnordered.tsx

@@ -12,7 +12,7 @@ export function ListUnordered(props: BlockProps<DocumentBlockListUnordered>) {
             tag="ul"
             nodes={block.nodes}
             ancestorBlocks={[...ancestorBlocks, block]}
-            style={['list-disc', 'ps-8', style]}
+            style={['list-disc', 'ps-8', 'space-y-2', style]}
         />
     );
 }

src/components/DocumentView/Paragraph.tsx

@@ -9,7 +9,7 @@ export function Paragraph(props: BlockProps<DocumentBlockParagraph>) {
     const { block, style, ...contextProps } = props;
 
     return (
-        <p className={tcls('text-base', 'font-normal', style)}>
+        <p className={tcls('font-normal', style)}>
             <Inlines {...contextProps} nodes={block.nodes} />
         </p>
     );

src/components/DocumentView/Table/RecordRow.tsx

@@ -16,7 +16,16 @@ export async function RecordRow(
         <tr>
             {view.columns.map((column) => {
                 return (
-                    <td key={column} className={tcls('border', 'border-slate-700', 'px-2', 'py-1')}>
+                    <td
+                        key={column}
+                        className={tcls(
+                            'border',
+                            'border-dark/2',
+                            'px-2',
+                            'py-1',
+                            'dark:border-light/2',
+                        )}
+                    >
                         <RecordColumnValue key={column} {...props} column={column} />
                     </td>
                 );

src/components/DocumentView/Table/ViewGrid.tsx

@@ -14,9 +14,6 @@ export function ViewGrid(props: TableViewProps<DocumentTableViewGrid>) {
                 style,
                 'table-auto',
                 'w-full',
-                'border-collapse',
-                'border',
-                'border-slate-500',
                 block.data.fullWidth ? ['max-w-full'] : null,
             )}
         >
@@ -27,7 +24,13 @@ export function ViewGrid(props: TableViewProps<DocumentTableViewGrid>) {
                             return (
                                 <th
                                     key={column}
-                                    className={tcls('border', 'border-slate-700', 'px-2', 'py-1')}
+                                    className={tcls(
+                                        'border',
+                                        'border-dark/4',
+                                        'px-2',
+                                        'py-1',
+                                        'dark:border-light/4',
+                                    )}
                                 >
                                     {block.data.definition[column].title}
                                 </th>

src/components/DocumentView/Tabs/DynamicTabs.tsx

@@ -20,8 +20,18 @@ export function DynamicTabs(props: {
     const [active, setActive] = React.useState<null | string>(null);
 
     return (
-        <div className={tcls('rounded', 'border', 'border-slate-200', 'flex', 'flex-col', style)}>
-            <div role="tablist" className={tcls('flex', 'flex-row', 'p-4')}>
+        <div
+            className={tcls(
+                'rounded-md',
+                'border',
+                'border-dark/2',
+                'flex',
+                'flex-col',
+                'dark:border-light/3',
+                style,
+            )}
+        >
+            <div role="tablist" className={tcls('flex', 'flex-row', 'p-4', 'space-x-2')}>
                 {tabs.map((tab) => (
                     <button
                         key={tab.id}
@@ -33,14 +43,19 @@ export function DynamicTabs(props: {
                             setActive(tab.id);
                         }}
                         className={tcls(
-                            'bg-slate-50',
+                            'bg-transparent',
                             'text-sm',
-                            'textslate-700',
-                            'rounded',
+                            'rounded-full',
                             'px-4',
                             'py-2',
-                            'me-2',
-                            active === tab.id ? ['bg-slate-100'] : null,
+                            'transition-colors',
+                            'hover:bg-dark/1',
+                            'font-semibold',
+                            'text-dark/7',
+                            'dark:text-light/6',
+                            active === tab.id
+                                ? ['text-dark', 'bg-dark/2', 'dark:bg-light/2', 'dark:text-light']
+                                : null,
                         )}
                     >
                         {tab.title}