From fd8c6d7a40a6eba24515850169fdb351e1c177c5 Mon Sep 17 00:00:00 2001 From: TheoryOfNekomata 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( @@ -12,7 +14,9 @@ export const plugin = tailwindPlugin.withOptions( 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( '--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( }, 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 = ({ span={span} > = ({ > { > { 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 = () => { > { > { > { >
-
+
@@ -92,7 +92,7 @@ export const LeftSidebarWithMenuBase = React.forwardRef
{children}
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 (
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(({