Style sprint 3 (#136)

* first pass at nested ordered list symbols

* remove margin inside lists

* V1 of nested bullets & fix header hash pos

* clean up

* convert listItem render to switch

* Improve lists

* improve heading hash

* fix list todos to match heading size too

* no need for inline-grid

---------

Co-authored-by: Samy Pessé <samypesse@gmail.com>

src/app/[spaceId]/globals.css

@@ -122,6 +122,24 @@
     .inverted-theme-scroll::-webkit-scrollbar-thumb:hover {
         @apply bg-dark/6;
     }
+
+    /*  bullet icons */
+    .bullet-dash {
+        @apply [mask-image:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iNyIgdmlld0JveD0iMCAwIDEwIDciIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHg9IjEiIHk9IjIuNSIgd2lkdGg9IjgiIGhlaWdodD0iMS41IiByeD0iMC42NiIgZmlsbD0id2hpdGUiLz4KPC9zdmc+Cg==")];
+    }
+    .bullet-circleFilled {
+        @apply [mask-image:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iNyIgdmlld0JveD0iMCAwIDEwIDciIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHg9IjIiIHdpZHRoPSI2IiBoZWlnaHQ9IjYiIHJ4PSIzIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K")];
+    }
+    .bullet-circle {
+        @apply [mask-image:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iNyIgdmlld0JveD0iMCAwIDEwIDciIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHg9IjIuNzUiIHk9IjAuNzUiIHdpZHRoPSI1LjUiIGhlaWdodD0iNS41IiByeD0iMi43NSIgc3Ryb2tlPSJ3aGl0ZSIgc3Ryb2tlLXdpZHRoPSIxLjUiLz4KPC9zdmc+Cg==")];
+    }
+    .bullet-squareFilled {
+        @apply [mask-image:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iNyIgdmlld0JveD0iMCAwIDEwIDciIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHg9IjIiIHdpZHRoPSI2IiBoZWlnaHQ9IjYiIHJ4PSIxIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K")];
+    }
+    .bullet-square {
+        @apply [mask-image:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iNyIgdmlld0JveD0iMCAwIDEwIDciIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxtYXNrIGlkPSJwYXRoLTEtaW5zaWRlLTFfOV80OCIgZmlsbD0id2hpdGUiPgo8cmVjdCB4PSIyIiB3aWR0aD0iNyIgaGVpZ2h0PSI3IiByeD0iMSIvPgo8L21hc2s+CjxyZWN0IHg9IjIiIHdpZHRoPSI3IiBoZWlnaHQ9IjciIHJ4PSIxIiBzdHJva2U9IndoaXRlIiBzdHJva2Utd2lkdGg9IjMiIG1hc2s9InVybCgjcGF0aC0xLWluc2lkZS0xXzlfNDgpIi8+Cjwvc3ZnPgo=")];
+    }
+    
 }
 
 @layer utilities {

src/components/DocumentView/Heading.tsx

@@ -21,18 +21,20 @@ export function Heading(props: BlockProps<DocumentBlockHeading>) {
         <Tag id={id} className={tcls(textStyle.textSize, 'group', 'relative', 'grid', style)}>
             <div
                 className={tcls(
-                    'hidden',
+                    'grid',
+                    'bg-light',
                     'grid-area-1-1',
                     'relative',
                     '-ml-6',
                     'w-7',
                     'border-0',
                     'opacity-0',
-                    'group-hover:opacity-10',
-                    'group-focus:opacity-10',
-                    'lg:grid',
-                    'h-full',
-                    textStyle.lineHeight,
+                    'group-hover:opacity-[0]',
+                    'group-focus:opacity-[0]',
+                    'dark:bg-dark',
+                    'md:group-hover:md:opacity-[1]',
+                    'md:group-focus:md:opacity-[1]',
+                    textStyle.marginTop,
                 )}
             >
                 <a
@@ -41,26 +43,27 @@ export function Heading(props: BlockProps<DocumentBlockHeading>) {
                     className={tcls(
                         'inline-flex',
                         'h-full',
-                        'items-center',
+                        'items-start',
                         'dark:text-light/3',
                         'dark:shadow-none',
                         'dark:ring-0',
+                        textStyle.lineHeight,
                     )}
                 >
                     <IconHash
                         className={tcls(
-                            textStyle.marginTop,
-                            'w-4',
-                            'h-4',
+                            'w-3.5',
+                            'h-[1lh]',
                             'transition-colors',
                             'stroke-transparent',
                             'group-hover:stroke-dark/6',
-                            'dark:group-hover:stroke-light/4',
+                            'dark:group-hover:stroke-light/5',
+                            'lg:w-4',
                         )}
                     />
                 </a>
             </div>
-            <div className={tcls('grid-area-1-1', textStyle.marginTop)}>
+            <div className={tcls('grid-area-1-1', 'z-[1]', textStyle.marginTop)}>
                 <Inlines {...rest} context={context} nodes={block.nodes} />
             </div>
         </Tag>

src/components/DocumentView/ListItem.tsx

@@ -5,41 +5,82 @@ import { tcls } from '@/lib/tailwind';
 
 import { BlockProps } from './Block';
 import { Blocks } from './Blocks';
+import { getBlockTextStyle } from './spacing';
 
 export function ListItem(props: BlockProps<DocumentBlockListItem>) {
     const { block, ancestorBlocks, ...contextProps } = props;
 
-    const isTaskList = ancestorBlocks[ancestorBlocks.length - 1]?.type === 'list-tasks';
+    const textStyle = getBlockTextStyle(block);
 
-    return (
-        <li>
-            {isTaskList ? (
-                <div className={tcls('flex', 'flex-row', 'items-baseline')}>
-                    <Checkbox
-                        id={block.key!}
-                        disabled
-                        checked={block.data?.checked}
-                        className={tcls('top-0.5', 'relative')}
-                    />
+    const listType = ancestorBlocks[ancestorBlocks.length - 1]?.type;
 
-                    <label htmlFor={block.key}>
+    const ListItemType = () => {
+        switch (listType) {
+            case 'list-tasks':
+                return (
+                    <li>
+                        <div className={tcls('flex', 'flex-row')}>
+                            <div
+                                className={tcls(
+                                    textStyle.textSize,
+                                    'flex',
+                                    'flex-col',
+                                    'justify-center',
+                                    'h-[1lh]',
+                                )}
+                            >
+                                <Checkbox
+                                    id={block.key!}
+                                    disabled
+                                    checked={block.data?.checked}
+                                    className={tcls('relative')}
+                                />
+                            </div>
+
+                            <label htmlFor={block.key}>
+                                <Blocks
+                                    {...contextProps}
+                                    nodes={block.nodes}
+                                    ancestorBlocks={[...ancestorBlocks, block]}
+                                    blockStyle={tcls('flex-1')}
+                                    style={tcls('ml-2', 'space-y-2')}
+                                />
+                            </label>
+                        </div>
+                    </li>
+                );
+            case 'list-ordered':
+                return (
+                    <li className={tcls(textStyle.lineHeight)}>
+                        <div
+                            className={tcls('bullet', textStyle.textSize, 'leading-[inherit]')}
+                        ></div>
+                        {/* zero width space to force layouts with empty lists */}
                         <Blocks
                             {...contextProps}
                             nodes={block.nodes}
                             ancestorBlocks={[...ancestorBlocks, block]}
-                            blockStyle={tcls('flex-1')}
-                            style={tcls('ml-2', 'space-y-2')}
+                            style={tcls('space-y-2', 'flex', 'flex-col')}
+                            blockStyle={tcls(textStyle.lineHeight, 'min-h-[1lh]')}
                         />
-                    </label>
-                </div>
-            ) : (
-                <Blocks
-                    {...contextProps}
-                    nodes={block.nodes}
-                    ancestorBlocks={[...ancestorBlocks, block]}
-                    style={tcls('space-y-2')}
-                />
-            )}
-        </li>
-    );
+                    </li>
+                );
+            default:
+                // 'list-unordered'
+                return (
+                    <li className={tcls(textStyle.lineHeight)}>
+                        <div className={tcls('bullet', textStyle.textSize)}></div>
+                        <Blocks
+                            {...contextProps}
+                            nodes={block.nodes}
+                            ancestorBlocks={[...ancestorBlocks, block]}
+                            style={tcls('space-y-2', 'flex', 'flex-col')}
+                            blockStyle={tcls('min-h-[1lh]')}
+                        />
+                    </li>
+                );
+        }
+    };
+
+    return <ListItemType />;
 }

src/components/DocumentView/ListOrdered.tsx

@@ -14,12 +14,30 @@ export function ListOrdered(props: BlockProps<DocumentBlockListOrdered>) {
             ancestorBlocks={[...ancestorBlocks, block]}
             style={[
                 'space-y-2',
-                'list-decimal',
-                'ps-[2ch]',
-                'marker:[font-variant-numeric:normal]',
-                'marker:text-dark/6',
-                '[&>li]:pl-[.25ch]',
-                'dark:marker:text-light/6',
+                'flex',
+                'flex-col',
+                '[&>li]:gap-[1ch]',
+
+                '[counter-reset:list-decimal]',
+
+                '[&>li]:flex',
+                '[&>li]:flex-row',
+
+                /* '[&>li>.bullet]:w-[1ch]', */
+                '[&>li>.bullet]:[font-variant-numeric:tabular-nums]',
+                '[&>li>.bullet]:[counter-increment:list-decimal]',
+
+                '[&>li>.bullet]:before:h-[1lh]',
+                '[&>li>.bullet]:before:leading-[inherit]',
+                '[&>li>.bullet]:before:flex',
+                '[&>li>.bullet]:before:[content:counter(list-decimal)]',
+                /* '[&>li>.bullet]:before:pr-[1ch]', */
+                '[&>li>.bullet]:text-dark/6',
+
+                //remove any spacing when using heading as list item
+                '[&>li>div_div]:mt-0',
+
+                'dark:[&>li>.bullet]:text-light/6',
                 style,
             ]}
         />

src/components/DocumentView/ListTasks.tsx

@@ -12,7 +12,14 @@ export function ListTasks(props: BlockProps<DocumentBlockListTasks>) {
             tag="ul"
             nodes={block.nodes}
             ancestorBlocks={[...ancestorBlocks, block]}
-            style={['list-none', '[&>li]:pl-[.25ch]', 'space-y-2', style]}
+            style={[
+                'list-none',
+                '[&>li]:pl-[.25ch]',
+                //remove any spacing when using heading as list item
+                '[&>li>div_div]:mt-0',
+                'space-y-2',
+                style,
+            ]}
         />
     );
 }

src/components/DocumentView/ListUnordered.tsx

@@ -6,6 +6,19 @@ import { Blocks } from './Blocks';
 export function ListUnordered(props: BlockProps<DocumentBlockListUnordered>) {
     const { block, style, ancestorBlocks, ...contextProps } = props;
 
+    const nestedBulletStyle = [
+        // Level 1
+        '[&>li>.bullet:before]:bullet-dash',
+        // Level 2
+        `[&_&>li>.bullet:before]:bullet-circleFilled`,
+        // Level 3
+        `[&_&_&>li>.bullet:before]:bullet-circle`,
+        // Level 4
+        `[&_&_&_&>li>.bullet:before]:bullet-squareFilled`,
+        // Level 5
+        `[&_&_&_&_&>li>.bullet:before]:bullet-square`,
+    ];
+
     return (
         <Blocks
             {...contextProps}
@@ -17,11 +30,18 @@ export function ListUnordered(props: BlockProps<DocumentBlockListUnordered>) {
                 'space-y-2',
                 '[&>li]:relative',
                 '[&>li]:ps-[2.25ch]',
-                '[&>li]:before:text-dark/6',
-                '[&>li]:before:content-["–"]',
-                '[&>li]:before:absolute',
-                '[&>li]:before:left-0',
-                'dark:[&>li]:before:text-light/6',
+                //remove any spacing when using heading as list item
+                '[&>li>div_div]:mt-0',
+                //custom content setup for lists
+                '[&>li>.bullet]:before:bg-dark/6',
+                '[&>li>.bullet]:before:absolute',
+                '[&>li>.bullet]:before:left-0',
+                '[&>li>.bullet]:before:w-[1ch]',
+                '[&>li>.bullet]:before:h-[1lh]',
+                '[&>li>.bullet]:before:[mask-repeat:no-repeat]',
+                '[&>li>.bullet]:before:[mask-position:left]',
+                'dark:[&>li>.bullet]:before:bg-light/6',
+                nestedBulletStyle,
                 style,
             ]}
         />