Make match background a customization option (#134)

* Add classname

* Start applying it

* reset existing style changes in favor of global setup

* setup v1 plain mode

* fix name clash

* move light/dark bases as vars

* side image render fix

* customize individual light tiers for light mode

* Add comment about primary and base

* remove style prop from image

* w-unset not needed on image

---------

Co-authored-by: sebastiangraz <graz@live.se>

src/components/DocumentView/Images.tsx

@@ -18,14 +18,13 @@ export function Images(props: BlockProps<DocumentBlockImages>) {
     return (
         <div
             className={tcls(
-                'w-full',
+                style,
                 'flex',
                 'flex-row',
                 'gap-3',
                 block.data.align === 'center' && 'justify-center',
                 block.data.align === 'right' && 'justify-end',
                 block.data.align === 'left' && 'justify-start',
-                style,
                 isMultipleImages && ['grid', 'grid-flow-col', 'max-w-none'],
                 block.data.fullWidth ? 'max-w-screen-2xl' : null,
                 'justify-center',
@@ -36,7 +35,7 @@ export function Images(props: BlockProps<DocumentBlockImages>) {
                     key={node.key}
                     block={node}
                     document={document}
-                    style={[i > 0 && 'mt-4', style]}
+                    style={[]}
                     siblings={block.nodes.length}
                     context={context}
                     isOffscreen={isOffscreen}

src/components/SpaceLayout/SpaceLayout.tsx

@@ -53,7 +53,7 @@ export function SpaceLayout(props: {
 
     return (
         <div>
-            {/* <ColorDebugger /> */}
+            {/*             <ColorDebugger /> */}
             <Header
                 withTopHeader={withTopHeader}
                 space={space}