Add variables for layouts

Allow user to specify background colors for layouts.

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.

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)',

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,
           }}

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,
           }}

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,
           }}

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,
           }}

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));
+	}
+}

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(),

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
 

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,
 					}}

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,
           }}

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,
 					}}

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,
           }}

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));
+	}
+}

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(),

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}

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>

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}
   >

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]',