From fd8c6d7a40a6eba24515850169fdb351e1c177c5 Mon Sep 17 00:00:00 2001
From: TheoryOfNekomata <allan.crisostomo@outlook.com>
Date: Sat, 29 Jul 2023 12:41:18 +0800
Subject: [PATCH] Add variables for layouts

Allow user to specify background colors for layouts.
---
 README.md                                        | 16 ++++++++++++++--
 packages/base/src/plugin-tailwind.ts             | 16 ++++++++++++----
 .../react-next/src/pages/layouts/basic.tsx       |  2 +-
 .../src/pages/layouts/left-sidebar-with-menu.tsx |  2 +-
 .../src/pages/layouts/left-sidebar.tsx           |  2 +-
 .../src/pages/layouts/right-sidebar-static.tsx   |  2 +-
 .../react-next/src/styles/globals.css            |  9 +++++++++
 .../kitchen-sink/react-next/tailwind.config.js   | 13 ++++++++++++-
 .../react-remix/app/routes/layouts.basic.tsx     |  2 +-
 .../routes/layouts.left-sidebar-with-menu.tsx    |  2 +-
 .../app/routes/layouts.left-sidebar._index.tsx   |  2 +-
 .../routes/layouts.left-sidebar.alternate.tsx    |  2 +-
 .../app/routes/layouts.right-sidebar-static.tsx  |  2 +-
 packages/kitchen-sink/react-remix/app/style.css  |  9 +++++++++
 .../kitchen-sink/react-remix/tailwind.config.js  | 11 +++++++++++
 .../react/src/widgets/LeftSidebarBase/index.tsx  |  2 +-
 .../widgets/LeftSidebarWithMenuBase/index.tsx    | 10 +++++-----
 .../react/src/widgets/RightSidebarBase/index.tsx |  2 +-
 packages/react/src/widgets/TopBar/index.tsx      |  2 +-
 19 files changed, 84 insertions(+), 24 deletions(-)

diff --git a/README.md b/README.md
index cd12706..2bf0d2c 100644
--- a/README.md
+++ b/README.md
@@ -27,8 +27,20 @@ Default value: `4rem`
 
 Width or height of the menu, depending on the orientation it is rendered.
 
-### `--color-background`
+### `--color-topbar`
 
 Default value: `white`
 
-Background colors of several widgets from the library.
+Background colors of the topbar widget from the library.
+
+### `--color-sidebar`
+
+Default value: `white`
+
+Background colors of the main sidebar from the library.
+
+### `--color-sidebar-menu`
+
+Default value: `white`
+
+Background colors of the main sidebar menu from the library.
diff --git a/packages/base/src/plugin-tailwind.ts b/packages/base/src/plugin-tailwind.ts
index 69952ce..7b47f2f 100644
--- a/packages/base/src/plugin-tailwind.ts
+++ b/packages/base/src/plugin-tailwind.ts
@@ -4,7 +4,9 @@ export interface ViewfinderPluginOptions {
 	baseWidth?: number;
 	topbarHeight?: string;
 	sizeMenu?: string;
-	colorBackground?: string;
+	colorTopbar?: string;
+	colorSidebar?: string;
+	colorSidebarMenu?: string;
 }
 
 export const plugin = tailwindPlugin.withOptions<ViewfinderPluginOptions>(
@@ -12,7 +14,9 @@ export const plugin = tailwindPlugin.withOptions<ViewfinderPluginOptions>(
 		baseWidth = 360 as const,
 		topbarHeight = '4rem' as const,
 		sizeMenu = topbarHeight,
-		colorBackground = '255 255 255' as const,
+		colorTopbar = '255 255 255' as const,
+		colorSidebarMenu = '255 255 255' as const,
+		colorSidebar = '255 255 255' as const,
 	} = {} as ViewfinderPluginOptions) => ({
 		addBase,
 		addComponents,
@@ -23,7 +27,9 @@ export const plugin = tailwindPlugin.withOptions<ViewfinderPluginOptions>(
 				'--base-width': `${baseWidth}px`,
 				'--height-topbar': topbarHeight,
 				'--size-menu': sizeMenu,
-				'--color-background': colorBackground,
+				'--color-topbar': colorTopbar,
+				'--color-sidebar': colorSidebar,
+				'--color-sidebar-menu': colorSidebarMenu,
 			},
 		});
 		addBase({
@@ -111,7 +117,9 @@ export const plugin = tailwindPlugin.withOptions<ViewfinderPluginOptions>(
 			},
 			extend: {
 				colors: {
-					bg: 'rgb(var(--color-background))',
+					topbar: 'rgb(var(--color-topbar))',
+					sidebar: 'rgb(var(--color-sidebar))',
+					'sidebar-menu': 'rgb(var(--color-sidebar-menu))',
 				},
 				spacing: {
 					topbar: 'var(--height-topbar, 4rem)',
diff --git a/packages/kitchen-sink/react-next/src/pages/layouts/basic.tsx b/packages/kitchen-sink/react-next/src/pages/layouts/basic.tsx
index 6050f81..a2e8ddd 100644
--- a/packages/kitchen-sink/react-next/src/pages/layouts/basic.tsx
+++ b/packages/kitchen-sink/react-next/src/pages/layouts/basic.tsx
@@ -38,7 +38,7 @@ const BasicLayoutPage: NextPage<BaseLayoutPageProps> = ({
         span={span}
       >
         <ReactMarkdown
-					className="prose"
+					className="prose my-16"
           components={{
             img: Image,
           }}
diff --git a/packages/kitchen-sink/react-next/src/pages/layouts/left-sidebar-with-menu.tsx b/packages/kitchen-sink/react-next/src/pages/layouts/left-sidebar-with-menu.tsx
index b4c2feb..304ec7d 100644
--- a/packages/kitchen-sink/react-next/src/pages/layouts/left-sidebar-with-menu.tsx
+++ b/packages/kitchen-sink/react-next/src/pages/layouts/left-sidebar-with-menu.tsx
@@ -193,7 +193,7 @@ const LeftSidebarWithMenuLayoutPage: NextPage<LeftSidebarWithMenuLayoutPageProps
     >
       <Layouts.LeftSidebarWithMenu.MainContentContainer>
         <ReactMarkdown
-					className="prose"
+					className="prose my-16"
           components={{
             img: Image,
           }}
diff --git a/packages/kitchen-sink/react-next/src/pages/layouts/left-sidebar.tsx b/packages/kitchen-sink/react-next/src/pages/layouts/left-sidebar.tsx
index 8eb4208..b49ea55 100644
--- a/packages/kitchen-sink/react-next/src/pages/layouts/left-sidebar.tsx
+++ b/packages/kitchen-sink/react-next/src/pages/layouts/left-sidebar.tsx
@@ -92,7 +92,7 @@ const LeftSidebarLayoutPage: NextPage<LeftSidebarLayoutPageProps> = ({
     >
       <Layouts.LeftSidebar.MainContentContainer>
         <ReactMarkdown
-					className="prose"
+					className="prose my-16"
           components={{
             img: Image,
           }}
diff --git a/packages/kitchen-sink/react-next/src/pages/layouts/right-sidebar-static.tsx b/packages/kitchen-sink/react-next/src/pages/layouts/right-sidebar-static.tsx
index 37477c7..a7e742f 100644
--- a/packages/kitchen-sink/react-next/src/pages/layouts/right-sidebar-static.tsx
+++ b/packages/kitchen-sink/react-next/src/pages/layouts/right-sidebar-static.tsx
@@ -70,7 +70,7 @@ const RightSidebarStaticLayoutPage: NextPage = () => {
     >
       <Layouts.RightSidebarStatic.MainContentContainer>
         <ReactMarkdown
-					className="prose"
+					className="prose my-16"
           components={{
             img: Image,
           }}
diff --git a/packages/kitchen-sink/react-next/src/styles/globals.css b/packages/kitchen-sink/react-next/src/styles/globals.css
index b5c61c9..58c2f2f 100644
--- a/packages/kitchen-sink/react-next/src/styles/globals.css
+++ b/packages/kitchen-sink/react-next/src/styles/globals.css
@@ -1,3 +1,12 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+@layer base {
+	:root {
+		--color-bg: 244 244 244;
+		--color-fg: 34 34 34;
+		background-color: rgb(var(--color-bg));
+		color: rgb(var(--color-fg));
+	}
+}
diff --git a/packages/kitchen-sink/react-next/tailwind.config.js b/packages/kitchen-sink/react-next/tailwind.config.js
index d63c948..21c16ef 100644
--- a/packages/kitchen-sink/react-next/tailwind.config.js
+++ b/packages/kitchen-sink/react-next/tailwind.config.js
@@ -3,9 +3,20 @@ const { tailwind } = require('@tesseract-design/viewfinder-base');
 /** @type {import('tailwindcss').Config} */
 module.exports = {
   content: [
-    './src/**/*.{js,ts,jsx,tsx,mdx}',
+    './src/**/*.tsx',
     './node_modules/@tesseract-design/viewfinder-react/dist/**/*.js',
   ],
+	theme: {
+		extend: {
+			colors: {
+				topbar: 'rgb(255 255 255)',
+				sidebar: 'rgb(252 252 252)',
+				'sidebar-menu': 'rgb(248 248 248)',
+				'bg': 'rgb(var(--color-bg))',
+				'fg': 'rgb(var(--color-fg))',
+			},
+		},
+	},
   plugins: [
 		require('@tailwindcss/typography'),
 		tailwind.plugin(),
diff --git a/packages/kitchen-sink/react-remix/app/routes/layouts.basic.tsx b/packages/kitchen-sink/react-remix/app/routes/layouts.basic.tsx
index 3ae57b4..f65504b 100644
--- a/packages/kitchen-sink/react-remix/app/routes/layouts.basic.tsx
+++ b/packages/kitchen-sink/react-remix/app/routes/layouts.basic.tsx
@@ -34,7 +34,7 @@ const BasicLayoutPage = () => {
           components={{
             img: Image,
           }}
-					className="prose"
+					className="prose my-16"
         >
           {`# Piano
 
diff --git a/packages/kitchen-sink/react-remix/app/routes/layouts.left-sidebar-with-menu.tsx b/packages/kitchen-sink/react-remix/app/routes/layouts.left-sidebar-with-menu.tsx
index 3b9dcfb..ab2ac51 100644
--- a/packages/kitchen-sink/react-remix/app/routes/layouts.left-sidebar-with-menu.tsx
+++ b/packages/kitchen-sink/react-remix/app/routes/layouts.left-sidebar-with-menu.tsx
@@ -173,7 +173,7 @@ const LeftSidebarWithMenuLayoutPage = () => {
 		>
 			<Layouts.LeftSidebarWithMenu.MainContentContainer>
 				<ReactMarkdown
-					className="prose"
+					className="prose my-16"
 					components={{
 						img: Image,
 					}}
diff --git a/packages/kitchen-sink/react-remix/app/routes/layouts.left-sidebar._index.tsx b/packages/kitchen-sink/react-remix/app/routes/layouts.left-sidebar._index.tsx
index 1ae71d0..7b3cd5c 100644
--- a/packages/kitchen-sink/react-remix/app/routes/layouts.left-sidebar._index.tsx
+++ b/packages/kitchen-sink/react-remix/app/routes/layouts.left-sidebar._index.tsx
@@ -78,7 +78,7 @@ const LeftSidebarLayoutPage = () => {
     >
       <Layouts.LeftSidebar.MainContentContainer>
         <ReactMarkdown
-					className="prose"
+					className="prose my-16"
           components={{
             img: Image,
           }}
diff --git a/packages/kitchen-sink/react-remix/app/routes/layouts.left-sidebar.alternate.tsx b/packages/kitchen-sink/react-remix/app/routes/layouts.left-sidebar.alternate.tsx
index f47015f..ad61bc0 100644
--- a/packages/kitchen-sink/react-remix/app/routes/layouts.left-sidebar.alternate.tsx
+++ b/packages/kitchen-sink/react-remix/app/routes/layouts.left-sidebar.alternate.tsx
@@ -125,7 +125,7 @@ const LeftSidebarWithMenuLayoutPage = () => {
 		>
 			<Layouts.LeftSidebarWithMenu.MainContentContainer>
 				<ReactMarkdown
-					className="prose"
+					className="prose my-16"
 					components={{
 						img: Image,
 					}}
diff --git a/packages/kitchen-sink/react-remix/app/routes/layouts.right-sidebar-static.tsx b/packages/kitchen-sink/react-remix/app/routes/layouts.right-sidebar-static.tsx
index 27d30b1..ffcc2fd 100644
--- a/packages/kitchen-sink/react-remix/app/routes/layouts.right-sidebar-static.tsx
+++ b/packages/kitchen-sink/react-remix/app/routes/layouts.right-sidebar-static.tsx
@@ -65,7 +65,7 @@ const RightSidebarStaticLayoutPage = () => {
     >
       <Layouts.RightSidebarStatic.MainContentContainer>
         <ReactMarkdown
-					className="prose"
+					className="prose my-16"
           components={{
             img: Image,
           }}
diff --git a/packages/kitchen-sink/react-remix/app/style.css b/packages/kitchen-sink/react-remix/app/style.css
index b5c61c9..58c2f2f 100644
--- a/packages/kitchen-sink/react-remix/app/style.css
+++ b/packages/kitchen-sink/react-remix/app/style.css
@@ -1,3 +1,12 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+@layer base {
+	:root {
+		--color-bg: 244 244 244;
+		--color-fg: 34 34 34;
+		background-color: rgb(var(--color-bg));
+		color: rgb(var(--color-fg));
+	}
+}
diff --git a/packages/kitchen-sink/react-remix/tailwind.config.js b/packages/kitchen-sink/react-remix/tailwind.config.js
index 0d06953..276d834 100644
--- a/packages/kitchen-sink/react-remix/tailwind.config.js
+++ b/packages/kitchen-sink/react-remix/tailwind.config.js
@@ -6,6 +6,17 @@ module.exports = {
 		'./app/**/*.tsx',
 		'./node_modules/@tesseract-design/viewfinder-react/dist/**/*.js',
 	],
+	theme: {
+		extend: {
+			colors: {
+				topbar: 'rgb(255 255 255)',
+				sidebar: 'rgb(252 252 252)',
+				'sidebar-menu': 'rgb(248 248 248)',
+				'bg': 'rgb(var(--color-bg))',
+				'fg': 'rgb(var(--color-fg))',
+			},
+		},
+	},
   plugins: [
 		require('@tailwindcss/typography'),
 		tailwind.plugin(),
diff --git a/packages/react/src/widgets/LeftSidebarBase/index.tsx b/packages/react/src/widgets/LeftSidebarBase/index.tsx
index 7461379..fc67413 100644
--- a/packages/react/src/widgets/LeftSidebarBase/index.tsx
+++ b/packages/react/src/widgets/LeftSidebarBase/index.tsx
@@ -11,7 +11,7 @@ export const LeftSidebarBase = React.forwardRef<HTMLDivElement, LeftSidebarBaseP
   return (
     <div
       className={clsx(
-				'box-border fixed top-0 -left-full w-full h-full bg-bg md:left-0 md:w-[calc(50%-(var(--base-width)*0.5))] scrollbar-hidden',
+				'box-border fixed top-0 -left-full w-full h-full bg-sidebar md:left-0 md:w-[calc(50%-(var(--base-width)*0.5))] scrollbar-hidden',
 				open && 'left-0',
 			)}
       {...etcProps}
diff --git a/packages/react/src/widgets/LeftSidebarWithMenuBase/index.tsx b/packages/react/src/widgets/LeftSidebarWithMenuBase/index.tsx
index 316fd67..282f54d 100644
--- a/packages/react/src/widgets/LeftSidebarWithMenuBase/index.tsx
+++ b/packages/react/src/widgets/LeftSidebarWithMenuBase/index.tsx
@@ -64,9 +64,9 @@ export const LeftSidebarWithMenuBase = React.forwardRef<HTMLDivElement, LeftSide
     >
       <div
 				data-viewfinder="menu"
-        className="box-border scrollbar-hidden overflow-auto fixed bottom-0 left-0 w-full h-menu z-[3] bg-bg md:top-0 md:ml-auto md:absolute md:h-full md:pt-inherit md:overflow-auto md:z-auto"
+        className="box-border scrollbar-hidden overflow-auto fixed bottom-0 left-0 w-full h-menu z-[3] bg-sidebar-menu md:top-0 md:ml-auto md:absolute md:h-full md:pt-inherit md:overflow-auto md:z-auto"
       >
-        <div className="w-full h-full bg-bg">
+        <div className="w-full h-full bg-sidebar-menu">
           <div
             className="flex w-full h-full max-w-[calc(var(--base-width)*2)] mx-auto relative z-[1] md:max-w-none md:mr-0 md:flex-col md:justify-between md:items-end"
           >
@@ -92,7 +92,7 @@ export const LeftSidebarWithMenuBase = React.forwardRef<HTMLDivElement, LeftSide
 							)}
             >
               <div
-                className="w-full h-full overflow-auto bg-bg md:contents"
+                className="w-full h-full overflow-auto bg-sidebar-menu md:contents"
               >
                 <div
                   className="contents md:w-full md:block md:flex-auto"
@@ -163,13 +163,13 @@ export const LeftSidebarWithMenuBase = React.forwardRef<HTMLDivElement, LeftSide
       {children && (
         <div
           className={clsx(
-						'box-border fixed top-0 w-full h-full pt-inherit pb-menu z-[2] bg-bg',
+						'box-border fixed top-0 w-full h-full pt-inherit pb-menu z-[2] bg-sidebar',
 						open ? 'right-0': 'right-full',
 						'md:absolute md:right-0 md:ml-0 md:pb-0 md:w-[calc(var(--base-width)-var(--size-menu,4rem))]'
 					)}
         >
           <div
-            className="bg-bg w-full h-full overflow-auto scrollbar-hidden relative z-[1]"
+            className="w-full h-full overflow-auto scrollbar-hidden relative z-[1]"
           >
             {children}
           </div>
diff --git a/packages/react/src/widgets/RightSidebarBase/index.tsx b/packages/react/src/widgets/RightSidebarBase/index.tsx
index 1dc133e..6be16d1 100644
--- a/packages/react/src/widgets/RightSidebarBase/index.tsx
+++ b/packages/react/src/widgets/RightSidebarBase/index.tsx
@@ -7,7 +7,7 @@ export const RightSidebarStaticBase = React.forwardRef<HTMLDivElement, RightSide
   ...etcProps
 }, ref) => (
   <div
-    className="box-border bg-bg after:pb-[1px] after:-mt-[1px] after:box-border md:pr-[calc(50%-(var(--base-width)*0.5)] md:absolute md:top-0 md:right-0 md:h-full md:w-[calc(50%-(var(--base-width)*0.5))]"
+    className="box-border after:pb-[1px] after:-mt-[1px] after:box-border md:pr-[calc(50%-(var(--base-width)*0.5)] md:absolute md:top-0 md:right-0 md:h-full md:w-[calc(50%-(var(--base-width)*0.5))]"
     {...etcProps}
     ref={ref}
   >
diff --git a/packages/react/src/widgets/TopBar/index.tsx b/packages/react/src/widgets/TopBar/index.tsx
index 4d3431c..355811b 100644
--- a/packages/react/src/widgets/TopBar/index.tsx
+++ b/packages/react/src/widgets/TopBar/index.tsx
@@ -24,7 +24,7 @@ export const TopBar = React.forwardRef<HTMLDivElement, TopBarProps>(({
 			<div
 				{...etcProps}
 				ref={ref}
-				className="w-full h-full bg-bg"
+				className="w-full h-full bg-topbar"
 			>
 				<div className={clsx(
 					'px-8 box-border mx-auto w-full h-full flex items-center relative z-[1]',